refactor(ui): add common-chart-options (#50)

* feactor(ui): add common-chart-options

* refactor(ui): move charts folder into component, remove console.debug, improve xAxisData function

ui/src/components/charts/confusion-matrix-chart/options.js

@@ -0,0 +1,24 @@
+import * as commonChartOptions from '@Helpers/common-chart-options';
+
+export default function confusionMatrixOptions(dataset, labelClass, colors) {
+  let dataMax = 0;
+  const heatmapData = dataset.toReversed().reduce((accumulator, datas, yIndex) => accumulator.concat(datas.map((data, xIndex) => {
+    if (data > dataMax) {
+      dataMax = data;
+    }
+    return [xIndex, yIndex, data];
+  })), []);
+
+  const options = {
+    ...commonChartOptions.yAxisOptions.categoryType(labelClass.yAxisLabel),
+    ...commonChartOptions.xAxisOptions.categoryType(labelClass.xAxisLabel),
+    ...commonChartOptions.gridOptions.heatmapChart(),
+    ...commonChartOptions.commonOptions.heatmapChart(),
+    ...commonChartOptions.visualMapOptions.heatmapChart(dataMax, colors),
+    series: {
+      ...commonChartOptions.seriesOptions.heatmapChart(heatmapData),
+    },
+  };
+
+  return options;
+}

ui/src/components/charts/line-chart/options.js

@@ -0,0 +1,37 @@
+import { numberFormatter } from '@Src/constants';
+import { CHART_COLOR } from '@Helpers/common-chart-options';
+import * as commonChartOptions from '@Helpers/common-chart-options';
+
+export default function lineChartOptions(title, color, currentDataset, referenceDataset) {
+  const currentDatasetFormatted = currentDataset.map(({ timestamp, value }) => [timestamp, numberFormatter().format(value)]);
+
+  const series = [
+    commonChartOptions.seriesOptions.lineChart(title, CHART_COLOR.LINE_CHART_COLOR, currentDatasetFormatted),
+  ];
+
+  if (referenceDataset) {
+    const referenceDatasetFormatted = referenceDataset.map(({ timestamp, value }) => [timestamp, numberFormatter().format(value)]);
+
+    const referenceLine = {
+      ...commonChartOptions.seriesOptions.lineChart('Reference', CHART_COLOR.REFERENCE, referenceDatasetFormatted),
+      endLabel: {
+        show: true,
+        color: CHART_COLOR.REFERENCE,
+        formatter: ({ value }) => `Reference\n${value[1]}`,
+      },
+      color: CHART_COLOR.REFERENCE,
+    };
+
+    referenceLine.lineStyle.type = 'dotted';
+    series.push(referenceLine);
+  }
+
+  return {
+    color: [color],
+    ...commonChartOptions.tooltipOptions(),
+    ...commonChartOptions.yAxisOptions.valueType(),
+    ...commonChartOptions.xAxisOptions.timeType(),
+    ...commonChartOptions.gridOptions.lineChart(),
+    series,
+  };
+}

ui/src/container/models/Details/binary-classification/current/data-drift/use-get-filtered-features.js

@@ -28,8 +28,6 @@ export default () => {
       const isNumerical = isNumericalSelected && type === DRIFT_TEST_ENUM.KS;
       const isCategorical = isCategoricalSelected && type === DRIFT_TEST_ENUM.CHI2;
 
-      console.debug(type, isNumerical, isCategorical);
-
       return isNumerical || isCategorical;
     });
 };

ui/src/container/models/Details/binary-classification/current/data-quality/data-point-distribution/options.js

@@ -0,0 +1,42 @@
+import { CHART_COLOR } from '@Helpers/common-chart-options';
+import { numberFormatter } from '@Src/constants';
+import * as commonChartOptions from '@Helpers/common-chart-options';
+
+export default function chartOptions(title, referenceDataset, currentDataset) {
+  const yAxisLabel = currentDataset.map(({ name }) => name);
+
+  const referenceData = referenceDataset.map(({ count, percentage }) => ({ percentage, count, value: count }));
+  const currentData = currentDataset.map(({ count, percentage }) => ({ percentage, count, value: count }));
+
+  const options = {
+    ...commonChartOptions.gridOptions.barChart(),
+    ...commonChartOptions.xAxisOptions.valueType(),
+    ...commonChartOptions.yAxisOptions.categoryType(yAxisLabel),
+    ...commonChartOptions.commonOptions.barChart(),
+    series: [
+      {
+        ...commonChartOptions.seriesOptions.barChart(title, CHART_COLOR.REFERENCE_LIGHT, referenceData),
+        color: CHART_COLOR.REFERENCE_LIGHT,
+        label: {
+          show: true,
+          position: 'insideRight',
+          fontWeight: 'bold',
+          formatter: (el) => (el.data.count > 0) ? `${el.data.count} (${numberFormatter().format(el.data.percentage)}%)` : '',
+        },
+      },
+      {
+        ...commonChartOptions.seriesOptions.barChart(title, CHART_COLOR.CURRENT_LIGHT_LIGHT, currentData),
+        color: CHART_COLOR.CURRENT_LIGHT,
+        label: {
+          show: true,
+          position: 'insideRight',
+          fontWeight: 'bold',
+          color: CHART_COLOR.CURRENT_DARK,
+          formatter: (el) => (el.data.count > 0) ? `${el.data.count} (${numberFormatter().format(el.data.percentage)}%)` : '',
+        },
+      },
+    ],
+  };
+
+  return options;
+}

ui/src/container/models/Details/binary-classification/current/data-quality/data-quality-list/numerical/chart/index.jsx

@@ -1,4 +1,4 @@
-import { CHART_COLOR } from '@Container/models/Details/constants';
+import { CHART_COLOR } from '@Helpers/common-chart-options';
 import ReactEchartsCore from 'echarts-for-react/lib/core';
 import { BarChart } from 'echarts/charts';
 import {

ui/src/container/models/Details/binary-classification/current/data-quality/data-quality-list/numerical/chart/options.js

@@ -1,49 +1,24 @@
 import { numberFormatter } from '@Src/constants';
+import * as commonChartOptions from '@Helpers/common-chart-options';
 
 export default function chartOptions(dataset, referenceColor, currentColor) {
-  const dataFormatted = dataset.buckets.map((value) => numberFormatter().format(value));
-  const lastElementData = dataFormatted.pop();
-  const xAxisData = dataFormatted.map((el, idx) => `[${dataFormatted[idx]}${(idx < dataFormatted.length - 1) ? `-${dataFormatted[idx + 1]})` : (idx === dataFormatted.length - 1) ? `-${lastElementData}]` : ''} `);
+  const { length, [length - 1]: last, ...rest } = dataset.buckets.map((value) => numberFormatter().format(value));
 
-  return {
-    grid: {
-      top: 10,
-      bottom: 0,
-      left: 25,
-      right: 5,
-      containLabel: true,
-    },
-    xAxis: {
-      type: 'category',
-      data: xAxisData,
-      axisTick: { show: false },
-      axisLine: { show: false },
-      splitLine: { show: false },
-      axisLabel: {
-        fontSize: 12,
-        interval: 0,
-        rotate: 20,
-        color: '#9b99a1',
-      },
-    },
-    yAxis: {
-      type: 'value',
-      axisLabel: {
-        fontSize: 9,
-        color: '#9b99a1',
-      },
-    },
+  const values = Object.values(rest);
+
+  const xAxisData = values.map((el, idx) => `[${el}${(idx < values.length - 1) ? `-${values[idx + 1]})` : (idx === values.length - 1) ? `-${last}]` : ''} `);
+
+  const options = {
+    ...commonChartOptions.gridOptions.barChart(),
+    ...commonChartOptions.xAxisOptions.categoryType(xAxisData),
+    ...commonChartOptions.yAxisOptions.valueType(),
     series: [
-      {
-        data: dataset.referenceValues,
-        type: 'bar',
-        itemStyle: { color: referenceColor },
-      },
-      {
-        data: dataset.currentValues,
-        type: 'bar',
-        itemStyle: { color: currentColor },
-      },
+      commonChartOptions.seriesOptions.barChart('reference', referenceColor, dataset.referenceValues),
+      commonChartOptions.seriesOptions.barChart('current', currentColor, dataset.currentValues),
     ],
   };
+
+  options.xAxis.axisLabel.rotate = 20;
+
+  return options;
 }

ui/src/container/models/Details/binary-classification/current/model-quality/charts.jsx

@@ -1,5 +1,6 @@
-import LineChart from '@Container/models/Details/charts/line-chart';
-import { CHART_COLOR, MODEL_QUALITY_FIELD } from '@Container/models/Details/constants';
+import { CHART_COLOR } from '@Helpers/common-chart-options';
+import LineChart from '@Components/charts/line-chart';
+import { MODEL_QUALITY_FIELD } from '@Container/models/Details/constants';
 import { useGetCurrentModelQualityQueryWithPolling } from '@Src/store/state/models/polling-hook';
 import { modelsApiSlice } from '@State/models/api';
 import { useParams } from 'react-router';

ui/src/container/models/Details/binary-classification/current/model-quality/index.jsx

@@ -1,7 +1,7 @@
 import SomethingWentWrong from '@Components/ErrorPage/something-went-wrong';
 import JobStatus from '@Components/JobStatus';
-import ConfusionMatrix from '@Container/models/Details/charts/confusion-matrix-chart';
-import { CHART_COLOR, MODEL_QUALITY_FIELD } from '@Container/models/Details/constants';
+import ConfusionMatrix from '@Components/charts/confusion-matrix-chart';
+import { MODEL_QUALITY_FIELD } from '@Container/models/Details/constants';
 import { JOB_STATUS } from '@Src/constants';
 import { modelsApiSlice } from '@State/models/api';
 import { useGetCurrentModelQualityQueryWithPolling } from '@State/models/polling-hook';
@@ -10,6 +10,7 @@ import {
 } from '@radicalbit/radicalbit-design-system';
 import { memo } from 'react';
 import { useParams } from 'react-router';
+import { CHART_COLOR } from '@Helpers/common-chart-options';
 import {
   AccuracyChart,
   AreaUnderPrChart,

ui/src/container/models/Details/binary-classification/reference/data-quality/data-point-distribution/options.js

@@ -0,0 +1,30 @@
+import { CHART_COLOR } from '@Helpers/common-chart-options';
+import { numberFormatter } from '@Src/constants';
+import * as commonChartOptions from '@Helpers/common-chart-options';
+
+export default function chartOptions(title, dataset) {
+  const yAxisLabel = dataset.map(({ name }) => name);
+
+  const referenceData = dataset.map(({ count, percentage }) => ({ percentage, count, value: count }));
+
+  const options = {
+    ...commonChartOptions.gridOptions.barChart(),
+    ...commonChartOptions.xAxisOptions.valueType(),
+    ...commonChartOptions.yAxisOptions.categoryType(yAxisLabel),
+    ...commonChartOptions.commonOptions.barChart(),
+    series: [
+      {
+        ...commonChartOptions.seriesOptions.barChart(title, CHART_COLOR.REFERENCE_LIGHT, referenceData),
+        color: CHART_COLOR.REFERENCE_LIGHT,
+        label: {
+          show: true,
+          position: 'insideRight',
+          fontWeight: 'bold',
+          formatter: (el) => (el.data.count > 0) ? `${el.data.count} (${numberFormatter().format(el.data.percentage)}%)` : '',
+        },
+      },
+    ],
+  };
+
+  return options;
+}

ui/src/container/models/Details/binary-classification/reference/data-quality/data-quality-list/numerical/chart/index.jsx

@@ -1,4 +1,4 @@
-import { CHART_COLOR } from '@Container/models/Details/constants';
+import { CHART_COLOR } from '@Helpers/common-chart-options';
 import ReactEchartsCore from 'echarts-for-react/lib/core';
 import { BarChart } from 'echarts/charts';
 import {