fix typo

- remove unwanted code
	- fix dropdown bug
	- add bar graph for test count

src/components/TestAnalyticsGraph.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import * as d3 from 'd3';
 import moment from 'moment';
+import { sgg } from 'ml-savitzky-golay-generalized';
 
 import './TestAnalyticsGraph.css';
 
@@ -10,7 +11,98 @@ class TestAnalyticsGraph extends Component {
         this.state = { data: this.props.data, show: this.props.show };
     }
     componentDidMount() {
-        this.drawChart(this.state.data);
+        // this.drawChart(this.state.data);
+        this.drawBar(this.state.data);
+    }
+
+    drawBar(data) {
+        if (!data) return;
+
+        data.reverse();
+
+        var margin = { top: 20, right: 20, bottom: 30, left: 50 },
+            width = 900 - margin.left - margin.right,
+            height = 500 - margin.top - margin.bottom;
+
+        var svg = d3.select("#tests-count-graph").append('svg')
+            .attr("width", width + margin.left + margin.right)
+            .attr("height", height + margin.top + margin.bottom)
+            .append("g").attr("transform",
+                "translate(" + margin.left + "," + margin.top + ")");
+
+
+        var xScale = d3.scaleBand().range([0, width]).padding(0.4),
+            yScale = d3.scaleLinear().range([height, 0]);
+
+        var g = svg.append("g")
+            .attr("transform", "translate(" + 10 + "," + 10 + ")");
+
+
+        xScale.domain(data.map(function (d) { return d.date; }));
+        yScale.domain([0, d3.max(data, function (d) { return d.count; })]);
+
+
+        g.append("g")
+            .attr("transform", "translate(0," + height + ")")
+            .call(d3.axisBottom(xScale));
+
+        g.append("g")
+            .call(d3.axisLeft(yScale).tickFormat(function (d) {
+                return " " + d;
+            }).ticks(10))
+            .append("text")
+            .attr("y", 6)
+            .attr("dy", "0.71em")
+            .attr("text-anchor", "end")
+            .text("value");
+
+        g.selectAll(".bar")
+            .data(data)
+            .enter().append("rect")
+            .attr("class", "bar")
+            .on("mouseover", (event, d) => {
+                // console.log("event", event);
+                d3.select(event.srcElement).attr('class', 'highlight');
+                d3.select(event.srcElement).transition()
+                    .duration(400)
+                    .attr('width', xScale.bandwidth() + 5)
+                    .attr("y", function (d) { return yScale(d.count) - 10; })
+                    .attr("height", function (d) { return height - yScale(d.count) + 10; });
+
+                g.append("text")
+                    .attr('class', 'val') // add class to text label
+                    .attr('x', function () {
+                        return xScale(d.date);
+                    })
+                    .attr('y', function () {
+                        return yScale(d.count) - 15;
+                    })
+                    .text(function () {
+                        return [' ' + d.count];  // Value of the text
+                    });
+            })
+            .on("mouseout", (event, d) => {
+                d3.select(event.srcElement).attr('class', 'bar');
+                d3.select(event.srcElement)
+                    .transition()     // adds animation
+                    .duration(400)
+                    .attr('width', xScale.bandwidth())
+                    .attr("y", function (d) { return yScale(d.count); })
+                    .attr("height", function (d) { return height - yScale(d.count); });
+
+                d3.selectAll('.val')
+                    .remove()
+            })
+            .attr("x", function (d) { return xScale(d.date); })
+            .attr("y", function (d) { return yScale(d.count); })
+            .attr("width", xScale.bandwidth())
+            .transition()
+            .ease(d3.easeLinear)
+            .duration(400)
+            .delay(function (d, i) {
+                return i * 50;
+            })
+            .attr("height", function (d) { return height - yScale(d.count); });
     }
 
     drawChart(data) {
@@ -19,12 +111,21 @@ class TestAnalyticsGraph extends Component {
             width = 960 - margin.left - margin.right,
             height = 500 - margin.top - margin.bottom;
 
+        const INNER_WIDTH = width;// - margin.left - margin.right;
+        const INNER_HEIGHT = height - margin.top - margin.bottom;
+
         // set the ranges
         var x = d3.scaleTime().range([0, width]);
         var y = d3.scaleLinear().range([height, 0]);
 
+        const xAxis = d3.axisBottom(x).ticks(10);
+        const yAxis = d3.axisLeft(y).ticks(10);
+        const xAxisGrid = d3.axisBottom(x).tickSize(-INNER_HEIGHT).tickFormat('').ticks(10);
+        const yAxisGrid = d3.axisLeft(y).tickSize(-INNER_WIDTH).tickFormat('').ticks(10);
+
         // define the line
         var valueline = d3.line()
+            .curve(d3.curveCatmullRom.alpha(0.5)) // curve
             .x(function (d) { return x(moment(d.date)); })
             .y(function (d) { return y(d.count); });
 
@@ -40,11 +141,11 @@ class TestAnalyticsGraph extends Component {
         //     derivative: 0,
         //     polynomial: 3,
         // };
-        // const sggResult = sgg(data.map(x => x.CA), (Math.PI * 2) / data.length, options);
+        // const sggResult = sgg(data.map(x => x.count), (Math.PI * 2) / data.length, options);
 
         // data.forEach(function (d, index) {
-        //     d.NM = d.NM;
-        //     d.CA = sggResult[index];
+        //     d.date = d.date;
+        //     d.count = sggResult[index];
         // });
         // data.forEach(function (d) {
         //     d.date = d.date;
@@ -57,7 +158,7 @@ class TestAnalyticsGraph extends Component {
         svg.append("path")
             .data([data])
             .attr("class", "line")
-            .attr("d", valueline);
+            .attr("d", valueline(data));
 
         svg.append("g")
             .attr("transform", "translate(0," + height + ")")
@@ -71,7 +172,9 @@ class TestAnalyticsGraph extends Component {
             .text("Test time");
 
         svg.append("g")
-            .call(d3.axisLeft(y))
+            .attr('class', 'y axis-grid')
+            .call(yAxisGrid)
+            // .call(d3.axisLeft(y))
             .append("text")
             .attr("transform", "rotate(-90)")
             .attr("x", -160)
@@ -79,6 +182,12 @@ class TestAnalyticsGraph extends Component {
             .attr("dy", "0.71em")
             .attr("fill", "#000")
             .text("Tests Count");
+
+        svg.append('g')
+            .attr('class', 'y axis')
+            .call(yAxis);
+
+
     }
 
     render() {