add info tooltip on analytics graph card

- add assets and config folders
	- rename conflicting css classess

src/components/TestAnalyticsPie.js

@@ -3,14 +3,19 @@ import * as d3 from 'd3';
 import { sgg } from 'ml-savitzky-golay-generalized';
 import axios from 'axios';
 import moment from 'moment';
+import { FaBeer, FaInfoCircle } from "react-icons/fa";
 
 import './TestAnalyticsPie.css';
-import constants from '../constants';
+import constants from '../configs/constants';
 
 class TestAnalyticsPie extends Component {
     constructor(props) {
         super(props);
-        this.state = { data: this.props.data, show: this.props.show };
+        this.state = {
+            data: this.props.data,
+            show: this.props.show,
+            showCardInfo: false
+        };
     }
     componentDidMount() {
         this.drawChart(this.state.data);
@@ -55,6 +60,7 @@ class TestAnalyticsPie extends Component {
 
         var tooltip = d3.select("#category-diagram")
             .append("div")
+            .attr("class", "category-tooltip")
             .style("position", "absolute")
             .style("z-index", "10")
             .style("visibility", "hidden")
@@ -65,10 +71,11 @@ class TestAnalyticsPie extends Component {
             .attr("d", path)
             .attr("fill", function (d) { return color(d.data.category); })
             .on('mouseover', (event, d) => {
-                tooltip.text(`${d.data.category}: ${d.data.count}, ${100 * d.data.count/data.reduce((a, c) => a + c.count, 0)}%`);
+                tooltip.text(`${d.data.category}: ${d.data.count}, ${100 * d.data.count / data.reduce((a, c) => a + c.count, 0)}%`);
                 return tooltip
                     .style("visibility", "visible")
-                    .style("font-size", "0.75em")
+                    .style("font-size", "0.65em")
+                    .style("font-weight", "600")
                     .style("z-index", "9999")
                     .style("width", "200px")
                     .style("height", "50px")
@@ -100,10 +107,12 @@ class TestAnalyticsPie extends Component {
     render() {
         return (
             <div>
-                <div className='graph-card'>
+                <div className='category-graph-card'>
+                    <div className='category-card-title'>Category data on daily basis<span className='category-info-icon' onClick={() => !this.setState({ showCardInfo: !this.state.showCardInfo })}><FaInfoCircle /></span>
+                        {this.state.showCardInfo && <div className='category-info-card'>Current day test data or the last tested day data is taken into account</div>}
+                    </div>
                     <div id="category-diagram" style={{ margin: '1em' }}>
                     </div>
-                    <div className='graph-title'>category data on daily basis</div>
                 </div>
             </div>
         )