Explanation page

package.json

@@ -18,13 +18,16 @@
     "react-scripts": "^2.1.8"
   },
   "dependencies": {
+    "apexcharts": "^3.10.1",
     "loader-runner": "^3.0.0",
     "node-sass": "^4.12.0",
     "prop-types": "^15.7.2",
     "react": "16.3.2",
+    "react-apexcharts": "^1.3.3",
     "react-dom": "16.3.3",
     "react-ga": "^2.6.0",
     "react-google-charts": "^2.0.29",
+    "react-grid-system": "^6.0.3",
     "react-html-parser": "^1.0.3",
     "react-json-tree": "^0.11.0",
     "react-md": "^1.12.1",

src/__tests__/components/chart/ControlledRadarChartCard.test.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {CLASSIFICATION, REGRESSION} from '../../../reference';
+import {regJobs} from '../../../../stories/LineChart';
+import {SelectField} from 'react-md';
+import {classJobs} from '../../../../stories/Validation';
+import RadarChartCard from '../../../components/chart/RadarChartCard';
+import ControlledRadarChartCard from '../../../components/chart/ControlledRadarChartCard';
+
+
+const element = shallow(<ControlledRadarChartCard predictionMethod={REGRESSION} jobs={regJobs}/>);
+it('renders', () => {
+  expect(element).toBeDefined();
+  expect(element.find(RadarChartCard).length).toBe(1);
+  expect(element.find(SelectField).length).toBe(2);
+
+  expect(element.find(SelectField).at(0).props().menuItems.length).toBeGreaterThanOrEqual(1);
+  expect(element.find(SelectField).at(0).props().menuItems).toContain('Average');
+  expect(element.find(SelectField).at(1).props().menuItems.length).toBeGreaterThanOrEqual(1);
+  expect(element.find(SelectField).at(1).props().menuItems).toContain('All');
+});
+
+it('maps jobs to chart', () => {
+  const radarChartProps = element.find(RadarChartCard).props();
+  expect(radarChartProps.labels).toContain('rmse');
+  expect(radarChartProps.data.length).toBe(1);
+  expect(radarChartProps.data[0].data.length).toBe(4);
+  expect(radarChartProps.labels.length).toBe(4);
+});
+
+
+it('when updating', () => {
+  const upEl = shallow(<ControlledRadarChartCard predictionMethod={CLASSIFICATION} jobs={classJobs}/>);
+  expect(upEl.find(SelectField).length).toBe(2);
+  expect(upEl.find(SelectField).at(0).props().menuItems.length).toBeGreaterThanOrEqual(1);
+  expect(upEl.find(SelectField).at(1).props().menuItems.length).toBeGreaterThanOrEqual(1);
+
+  const radarChartProps = upEl.find(RadarChartCard).props();
+  expect(radarChartProps.labels).toContain('f1_score');
+  expect(radarChartProps.data.length).toBe(1);
+  expect(radarChartProps.data[0].data.length).toBe(5);
+  expect(radarChartProps.labels.length).toBe(5);
+  expect(Math.max(...radarChartProps.data[0].data)).toBeLessThanOrEqual(1);
+  expect(Math.min(...radarChartProps.data[0].data)).toBeGreaterThanOrEqual(0);
+});
+

src/__tests__/components/chart/HorizontalBarChartCard.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import ReactApexChart from 'react-apexcharts';
+import HorizontalBarChartCard from '../../../components/chart/HorizontalBarChartCard';
+
+const labels = ['event', 'event1', 'event2', 'event3', 'event4'];
+const values = [1, 0.8, 0.1, 0.3, 0];
+
+describe('HorizontalBarChartCard', () => {
+  it('renders with empty data', () => {
+    const element = shallow(<HorizontalBarChartCard data={[]} labels={[]}/>);
+    expect(element).toBeDefined();
+    expect(element.find(ReactApexChart).length).toBe(0);
+  });
+
+  it('renders with empty labels', () => {
+    const element = shallow(<HorizontalBarChartCard data={values} labels={[]}/>);
+    expect(element).toBeDefined();
+    expect(element.find(ReactApexChart).length).toBe(1);
+
+    const chartProps = element.find(ReactApexChart).props();
+    expect(chartProps.options.xaxis.categories.length).toBe(0);
+    expect(chartProps.series[0].data.length).toBe(5);
+  });
+
+  it('renders with non empty data and label', () => {
+    const element = shallow(<HorizontalBarChartCard data={values} labels={labels}/>);
+    expect(element).toBeDefined();
+    expect(element.find(ReactApexChart).length).toBe(1);
+
+    const chartProps = element.find(ReactApexChart).props();
+    expect(chartProps.options.xaxis.categories.length).toBe(5);
+    expect(chartProps.series[0].data.length).toBe(5);
+  });
+});

src/__tests__/components/chart/PredictionLineChart.test.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import ReactApexChart from 'react-apexcharts';
+import PredictionLineChart from '../../../components/chart/PredictionLineChart';
+
+const categories = ['event', 'event1', 'event2', 'event3', 'event4'];
+const values = [[16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1]];
+
+describe('PredictionLineChart', () => {
+  it('renders with empty data', () => {
+    const element = shallow(<PredictionLineChart data={[]} categories={[]}/>);
+    expect(element).toBeDefined();
+    expect(element.find(ReactApexChart).length).toBe(0);
+  });
+
+  it('renders with empty labels', () => {
+    const element = shallow(<PredictionLineChart data={values} categories={[]}/>);
+    expect(element).toBeDefined();
+    expect(element.find(ReactApexChart).length).toBe(1);
+  });
+
+  it('renders with non empty data and label', () => {
+    const element = shallow(<PredictionLineChart data={values} categories={categories}/>);
+    expect(element).toBeDefined();
+    expect(element.find(ReactApexChart).length).toBe(1);
+
+    const chartProps = element.find(ReactApexChart).props();
+    expect(chartProps.series.length).toBe(5);
+  });
+});

src/__tests__/components/chart/RadarChartCard.test.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import RadarChartCard from '../../../components/chart/RadarChartCard';
+import ReactApexChart from 'react-apexcharts';
+
+const labels = ['f1_score', 'accuracy', 'precision', 'recall', 'auc'];
+const values = [1, 0.8, 0.1, 0.3, 0];
+
+describe('RadarChartCard', () => {
+  it('renders with full data', () => {
+    const element = shallow(<RadarChartCard data={values} labels={labels}/>);
+    expect(element).toBeDefined();
+    const chartProps = element.find(ReactApexChart).props();
+    expect(element.find(ReactApexChart).length).toBe(1);
+    expect(chartProps.options.labels.length).toBe(5);
+    expect(chartProps.options.labels[0]).toEqual('f1_score');
+    expect(chartProps.options.labels[4]).toEqual('auc');
+    expect(chartProps.series).toEqual(values);
+  });
+
+  it('renders without labels', () => {
+    const element = shallow(<RadarChartCard data={values} labels={[]}/>);
+    expect(element).toBeDefined();
+    const chartProps = element.find(ReactApexChart).props();
+    expect(element.find(ReactApexChart).length).toBe(1);
+    expect(chartProps.options.labels.length).toBe(0);
+    expect(chartProps.series).toEqual(values);
+  });
+
+  it('renders without data', () => {
+    const element = shallow(<RadarChartCard data={[]} labels={[]}/>);
+    expect(element).toBeDefined();
+    const chartProps = element.find(ReactApexChart).props();
+    expect(element.find(ReactApexChart).length).toBe(1);
+    expect(chartProps.options.labels.length).toBe(0);
+    expect(chartProps.series).toEqual([]);
+  });
+});