refactor(ui): align charts common style (#101)

* refactor(ui): align numerical charts for all modelType * refactor(ui): fix datapoint section for all modelType * refactor(ui): improve charts option in modelQuality * reafctor(ui): update version of @radicalbit/radicalbit-design-system * feat(ui): update radicalbit/radicalbit-design-system version * feat(ui): update yarn.lock
radicalbit · Jul 15, 2024 · 71c2d77 · 71c2d77
1 parent 1522c89
commit 71c2d77
Show file tree

Hide file tree

Showing 18 changed files with 116 additions and 113 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@radicalbit/formbit": "1.0.0",
-    "@radicalbit/radicalbit-design-system": "1.0.0",
+    "@radicalbit/radicalbit-design-system": "1.1.0",
     "@reduxjs/toolkit": "^2.2.4",
     "@vitejs/plugin-react": "^4.2.1",
     "ace-builds": "^1.33.2",

diff --git a/...s/binary-classification/current/data-quality/data-quality-list/numerical/chart/options.js b/...s/binary-classification/current/data-quality/data-quality-list/numerical/chart/options.js
@@ -13,13 +13,15 @@ export default function chartOptions(dataset, referenceColor, currentColor) {
     ...commonChartOptions.gridOptions(CHART_TYPE.BAR),
     ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData),
     ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE),
+    ...commonChartOptions.commonOptions(CHART_TYPE.BAR),
     series: [
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', referenceColor, dataset.referenceValues),
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'current', currentColor, dataset.currentValues),
     ],
   };
 
   options.xAxis.axisLabel.rotate = 20;
+  options.barCategoryGap = '0';
 
   return options;
 }
diff --git a/...binary-classification/reference/data-quality/data-quality-list/numerical/chart/options.js b/...binary-classification/reference/data-quality/data-quality-list/numerical/chart/options.js
@@ -13,12 +13,14 @@ export default function chartOptions(dataset, color) {
     ...commonChartOptions.gridOptions(CHART_TYPE.BAR),
     ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData),
     ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE),
+    ...commonChartOptions.commonOptions(CHART_TYPE.BAR),
     series: [
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', color, dataset.referenceValues),
     ],
   };
 
   options.xAxis.axisLabel.rotate = 20;
+  options.barCategoryGap = '0';
 
   return options;
 }
diff --git a/...dels/Details/multi-classification/current/data-quality/data-point-distribution/options.js b/...dels/Details/multi-classification/current/data-quality/data-point-distribution/options.js
@@ -17,24 +17,15 @@ export default function chartOptions(title, referenceDataset, currentDataset) {
     series: [
       {
         ...commonChartOptions.seriesOptions(CHART_TYPE.BAR, title, CHART_COLOR.REFERENCE_LIGHT, referenceData),
-        color: CHART_COLOR.REFERENCE_LIGHT,
       },
       {
         ...commonChartOptions.seriesOptions(CHART_TYPE.BAR, `${title}_current`, CHART_COLOR.CURRENT_LIGHT, currentData),
-        color: CHART_COLOR.CURRENT_LIGHT,
       },
     ],
   };
 
   if (currentData.length >= 20 || referenceData.length >= 20) {
-    options.dataZoom = [
-      {
-        show: true,
-      },
-      {
-        type: 'inside',
-      },
-    ];
+    options.dataZoom = commonChartOptions.dataZoomOptions();
     options.grid.bottom = 40;
   }
 

diff --git a/...ls/multi-classification/current/data-quality/data-quality-list/numerical/chart/options.js b/...ls/multi-classification/current/data-quality/data-quality-list/numerical/chart/options.js
@@ -13,21 +13,15 @@ export default function chartOptions(dataset, referenceColor, currentColor) {
     ...commonChartOptions.gridOptions(CHART_TYPE.BAR),
     ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData),
     ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE),
-
-    barCategoryGap: '0',
-    barGap: 0,
-    itemStyle: {
-      borderWidth: 1,
-      borderColor: 'rgba(201, 25, 25, 1)',
-    },
-
+    ...commonChartOptions.commonOptions(CHART_TYPE.BAR),
     series: [
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', referenceColor, dataset.referenceValues),
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'current', currentColor, dataset.currentValues),
     ],
   };
 
   options.xAxis.axisLabel.rotate = 20;
+  options.barCategoryGap = '0';
 
   return options;
 }
diff --git a/...r/models/Details/multi-classification/current/model-quality/class-chart-metrics/chart.jsx b/...r/models/Details/multi-classification/current/model-quality/class-chart-metrics/chart.jsx
@@ -28,7 +28,7 @@ echarts.use([
 ]);
 
 function LineChart({
-  title, color, currentData, referenceData = [],
+  title, currentData, referenceData = [],
 }) {
   const handleOnChartReady = (echart) => {
     // To handle the second opening of a modal when the rtkq hook read from cache
@@ -48,7 +48,7 @@ function LineChart({
           echarts={echarts}
           notMerge
           onChartReady={handleOnChartReady}
-          option={lineChartOptions(color, currentData, referenceData)}
+          option={lineChartOptions(currentData, referenceData)}
           style={{ height: '24rem' }}
         />
       )}

diff --git a/...r/models/Details/multi-classification/current/model-quality/class-chart-metrics/index.jsx b/...r/models/Details/multi-classification/current/model-quality/class-chart-metrics/index.jsx
@@ -1,5 +1,4 @@
 import { MODEL_QUALITY_FIELD } from '@Container/models/Details/constants';
-import { CHART_COLOR } from '@Helpers/common-chart-options';
 import useGetDataCharts from '../use-get-data-charts';
 import LineChart from './chart';
 
@@ -22,9 +21,8 @@ function MulticlassChartMetrics() {
 function RecallChart() {
   const items = useGetDataCharts();
 
-  const cappedSeries = items;
-  const currentSeries = cappedSeries.map(({ className, currentData }) => ({ className, data: currentData.recall }));
-  const referenceSeries = cappedSeries.map(({ className, referenceData, currentData }) => ({
+  const currentSeries = items.map(({ className, currentData }) => ({ className, data: currentData.recall }));
+  const referenceSeries = items.map(({ className, referenceData, currentData }) => ({
     className,
     data: currentData.recall.map((o) => ({
       timestamp: o.timestamp,
@@ -34,7 +32,6 @@ function RecallChart() {
 
   return (
     <LineChart
-      color={CHART_COLOR.CURRENT}
       currentData={currentSeries}
       referenceData={referenceSeries}
       title={MODEL_QUALITY_FIELD.RECALL}
@@ -45,9 +42,8 @@ function RecallChart() {
 function F1MeasureChart() {
   const items = useGetDataCharts();
 
-  const cappedSeries = items.slice(0, 13);
-  const currentSeries = cappedSeries.map(({ className, currentData }) => ({ className, data: currentData.fMeasure }));
-  const referenceSeries = cappedSeries.map(({ className, referenceData, currentData }) => ({
+  const currentSeries = items.map(({ className, currentData }) => ({ className, data: currentData.fMeasure }));
+  const referenceSeries = items.map(({ className, referenceData, currentData }) => ({
     className,
     data: currentData.fMeasure.map((o) => ({
       timestamp: o.timestamp,
@@ -57,7 +53,6 @@ function F1MeasureChart() {
 
   return (
     <LineChart
-      color={CHART_COLOR.CURRENT}
       currentData={currentSeries}
       referenceData={referenceSeries}
       title={MODEL_QUALITY_FIELD.F1}
@@ -68,9 +63,8 @@ function F1MeasureChart() {
 function PrecisionChart() {
   const items = useGetDataCharts();
 
-  const cappedSeries = items.slice(0, 13);
-  const currentSeries = cappedSeries.map(({ className, currentData }) => ({ className, data: currentData.precision }));
-  const referenceSeries = cappedSeries.map(({ className, referenceData, currentData }) => ({
+  const currentSeries = items.map(({ className, currentData }) => ({ className, data: currentData.precision }));
+  const referenceSeries = items.map(({ className, referenceData, currentData }) => ({
     className,
     data: currentData.precision.map((o) => ({
       timestamp: o.timestamp,
@@ -80,7 +74,6 @@ function PrecisionChart() {
 
   return (
     <LineChart
-      color={CHART_COLOR.CURRENT}
       currentData={currentSeries}
       referenceData={referenceSeries}
       title={MODEL_QUALITY_FIELD.PRECISION}
@@ -91,9 +84,8 @@ function PrecisionChart() {
 function FalsePositiveRateChart() {
   const items = useGetDataCharts();
 
-  const cappedSeries = items.slice(0, 13);
-  const currentSeries = cappedSeries.map(({ className, currentData }) => ({ className, data: currentData.falsePositiveRate }));
-  const referenceSeries = cappedSeries.map(({ className, referenceData, currentData }) => ({
+  const currentSeries = items.map(({ className, currentData }) => ({ className, data: currentData.falsePositiveRate }));
+  const referenceSeries = items.map(({ className, referenceData, currentData }) => ({
     className,
     data: currentData.falsePositiveRate.map((o) => ({
       timestamp: o.timestamp,
@@ -103,7 +95,6 @@ function FalsePositiveRateChart() {
 
   return (
     <LineChart
-      color={CHART_COLOR.CURRENT}
       currentData={currentSeries}
       referenceData={referenceSeries}
       title={MODEL_QUALITY_FIELD.FALSE_POSITIVE_RATE}
@@ -114,10 +105,9 @@ function FalsePositiveRateChart() {
 function TruePositiveRateChart() {
   const items = useGetDataCharts();
 
-  const cappedSeries = items.slice(0, 13);
-  const currentSeries = cappedSeries.map(({ className, currentData }) => ({ className, data: currentData.truePositiveRate }));
+  const currentSeries = items.map(({ className, currentData }) => ({ className, data: currentData.truePositiveRate }));
 
-  const referenceSeries = cappedSeries.map(({ className, referenceData, currentData }) => ({
+  const referenceSeries = items.map(({ className, referenceData, currentData }) => ({
     className,
     data: currentData.truePositiveRate.map((o) => ({
       timestamp: o.timestamp,
@@ -127,7 +117,6 @@ function TruePositiveRateChart() {
 
   return (
     <LineChart
-      color={CHART_COLOR.CURRENT}
       currentData={currentSeries}
       referenceData={referenceSeries}
       title={MODEL_QUALITY_FIELD.TRUE_POSITIVE_RATE}

diff --git a/.../models/Details/multi-classification/current/model-quality/class-chart-metrics/options.js b/.../models/Details/multi-classification/current/model-quality/class-chart-metrics/options.js
@@ -2,12 +2,14 @@ import { CHART_COLOR, CHART_TYPE, OPTIONS_TYPE } from '@Helpers/common-chart-opt
 import { numberFormatter } from '@Src/constants';
 import * as commonChartOptions from '@Helpers/common-chart-options';
 
-export default function lineChartOptions(color, currentDataset, referenceDataset) {
+export default function lineChartOptions(currentDataset, referenceDataset) {
   let dataSeries = currentDataset.map((el) => {
     const currentSeries = el.data.map(({ timestamp, value }) => [timestamp, numberFormatter().format(value)]);
     return commonChartOptions.seriesOptions(CHART_TYPE.LINE, el.className, null, currentSeries);
   });
 
+  const legendLabel = dataSeries.map(({ name }) => name);
+
   if (referenceDataset) {
     const series = referenceDataset.map((el) => {
       const referenceSeries = el.data.map(({ timestamp, value }) => [timestamp, numberFormatter().format(value)]);
@@ -31,38 +33,13 @@ export default function lineChartOptions(color, currentDataset, referenceDataset
   }
 
   const options = {
-    // color: [color],
     ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE),
     ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.TIME),
     ...commonChartOptions.gridOptions(CHART_TYPE.LINE),
     ...commonChartOptions.colorList,
-    series: dataSeries,
-
-    tooltip: {
-      trigger: 'axis',
-    },
-
-    emphasis: {
-      focus: 'series',
-    },
-    legend: {
-      right: 0,
-      top: 16,
-      bottom: 0,
-      orient: 'vertical',
-      type: 'scroll',
-      scrollDataIndex: 'scroll',
-      pageIconSize: 8,
-      pageTextStyle: {
-        fontSize: 8,
-      },
-      data: dataSeries.map(({ name }) => name),
-      textStyle: {
-        fontSize: 10,
-        fontWeight: '300',
-      },
-    },
-
+    ...commonChartOptions.legendOptions(legendLabel),
+    tooltip: { trigger: 'axis' },
+    emphasis: { focus: 'series' },
     title: {
       text: '••• Reference',
       textStyle: {
@@ -72,6 +49,7 @@ export default function lineChartOptions(color, currentDataset, referenceDataset
       right: 0,
     },
 
+    series: dataSeries,
   };
 
   options.grid.right = 140;

diff --git a/...ls/Details/multi-classification/reference/data-quality/data-point-distribution/options.js b/...ls/Details/multi-classification/reference/data-quality/data-point-distribution/options.js
@@ -1,6 +1,5 @@
-import { CHART_COLOR, CHART_TYPE, OPTIONS_TYPE } from '@Helpers/common-chart-options';
-import { numberFormatter } from '@Src/constants';
 import * as commonChartOptions from '@Helpers/common-chart-options';
+import { CHART_COLOR, CHART_TYPE, OPTIONS_TYPE } from '@Helpers/common-chart-options';
 
 export default function chartOptions(title, dataset) {
   const xAxisLabel = dataset?.map(({ name }) => name);
@@ -16,28 +15,12 @@ export default function chartOptions(title, dataset) {
     series: [
       {
         ...commonChartOptions.seriesOptions(CHART_TYPE.BAR, title, CHART_COLOR.REFERENCE_LIGHT, referenceData),
-        color: CHART_COLOR.REFERENCE_LIGHT,
-        label: {
-          show: false,
-          position: 'top',
-          fontWeight: 'bold',
-          rotate: 45,
-          offset: [25, 5],
-          formatter: (el) => (el.data.count > 0) ? `${el.data.count} (${numberFormatter().format(el.data.percentage)}%)` : '',
-        },
       },
     ],
   };
 
   if (referenceData.length >= 30) {
-    options.dataZoom = [
-      {
-        show: true,
-      },
-      {
-        type: 'inside',
-      },
-    ];
+    options.dataZoom = commonChartOptions.dataZoomOptions();
     options.grid.bottom = 40;
   }
 

diff --git a/.../multi-classification/reference/data-quality/data-quality-list/numerical/chart/options.js b/.../multi-classification/reference/data-quality/data-quality-list/numerical/chart/options.js
@@ -13,20 +13,14 @@ export default function chartOptions(dataset, color) {
     ...commonChartOptions.gridOptions(CHART_TYPE.BAR),
     ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData),
     ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE),
-
-    barCategoryGap: '0',
-    barGap: 0,
-    itemStyle: {
-      borderWidth: 1,
-      borderColor: 'rgba(201, 25, 25, 1)',
-    },
-
+    ...commonChartOptions.commonOptions(CHART_TYPE.BAR),
     series: [
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', color, dataset.referenceValues),
     ],
   };
 
   options.xAxis.axisLabel.rotate = 20;
+  options.barCategoryGap = '0';
 
   return options;
 }
diff --git a/...ontainer/models/Details/regression/current/data-quality/data-point-distribution/index.jsx b/...ontainer/models/Details/regression/current/data-quality/data-point-distribution/index.jsx
@@ -107,11 +107,11 @@ function DataPointDistributionChart() {
             echarts={echarts}
             onChartReady={handleOnChartReady}
             option={chartOptions(dataset, CHART_COLOR.REFERENCE, CHART_COLOR.CURRENT)}
-            style={{ height: '100%' }}
+            style={{ height: '12rem', width: '100%' }}
           />
         </div>
       )}
-      modifier="w-full h-full shadow"
+      modifier="w-full h-full shadow overflow-auto max-w-full "
       size="small"
     />
   );

diff --git a/...ntainer/models/Details/regression/current/data-quality/data-point-distribution/options.js b/...ntainer/models/Details/regression/current/data-quality/data-point-distribution/options.js
@@ -13,13 +13,15 @@ export default function chartOptions(dataset, referenceColor, currentColor) {
     ...commonChartOptions.gridOptions(CHART_TYPE.BAR),
     ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData),
     ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE),
+    ...commonChartOptions.commonOptions(CHART_TYPE.BAR),
     series: [
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', referenceColor, dataset.referenceValues),
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'current', currentColor, dataset.currentValues),
     ],
   };
 
   options.xAxis.axisLabel.rotate = 20;
+  options.barCategoryGap = '0';
 
   return options;
 }
diff --git a/...dels/Details/regression/current/data-quality/data-quality-list/numerical/chart/options.js b/...dels/Details/regression/current/data-quality/data-quality-list/numerical/chart/options.js
@@ -13,13 +13,15 @@ export default function chartOptions(dataset, referenceColor, currentColor) {
     ...commonChartOptions.gridOptions(CHART_TYPE.BAR),
     ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData),
     ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE),
+    ...commonChartOptions.commonOptions(CHART_TYPE.BAR),
     series: [
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', referenceColor, dataset.referenceValues),
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'current', currentColor, dataset.currentValues),
     ],
   };
 
   options.xAxis.axisLabel.rotate = 20;
+  options.barCategoryGap = '0';
 
   return options;
 }
diff --git a/...tainer/models/Details/regression/reference/data-quality/data-point-distribution/index.jsx b/...tainer/models/Details/regression/reference/data-quality/data-point-distribution/index.jsx
@@ -109,7 +109,7 @@ function DataPointDistributionChart() {
             echarts={echarts}
             onChartReady={handleOnChartReady}
             option={chartOptions(classMetrics, CHART_COLOR.REFERENCE)}
-            style={{ height: '20rem', width: '100%' }}
+            style={{ height: '12rem', width: '100%' }}
           />
         </div>
       )}