Migrate Vega import

Author: ChengYanJin

ui/src/components/DashboardGlobalHealth.tsx

@@ -15,7 +15,7 @@ import {
 import {
   Alert,
   GlobalHealthBar as GlobalHealthBarRecharts,
-} from '@scality/core-ui/dist/components/globalhealthbar/GlobalHealthBarRecharts.component';
+} from '@scality/core-ui/dist/next';
 import {
   highestAlertToStatus,
   useAlertLibrary,

ui/src/components/NonSymmetricalQuantileChart.tsx

@@ -1,4 +1,4 @@
-import { ChartLegendWrapper } from '@scality/core-ui/dist/components/chartlegend/ChartLegendWrapper';
+import { ChartLegendWrapper } from '@scality/core-ui/dist/next';
 import {
   ChartLegend,
   LineTimeSerieChart,

ui/src/components/SymmetricalQuantileChart.tsx

@@ -1,5 +1,4 @@
-import { ChartLegendWrapper } from '@scality/core-ui/dist/components/chartlegend/ChartLegendWrapper';
-import { UNIT_RANGE_BS } from '@scality/core-ui/dist/components/linetemporalchart/LineTemporalChart.component';
+import { ChartLegendWrapper } from '@scality/core-ui/dist/next';
 import {
   ChartLegend,
   LineTimeSerieChart,
@@ -25,6 +24,29 @@ import {
 } from '../services/graphUtils';
 import { SymmetricalQuantileTooltip } from './SymmetricalQuantileTooltip';
 
+const UNIT_RANGE_BS = [
+  {
+    threshold: 1,
+    label: 'B/s',
+  },
+  {
+    threshold: 1024,
+    label: 'KiB/s',
+  },
+  {
+    threshold: 1024 * 1024,
+    label: 'MiB/s',
+  },
+  {
+    threshold: 1024 * 1024 * 1024,
+    label: 'GiB/s',
+  },
+  {
+    threshold: 1024 * 1024 * 1024 * 1024,
+    label: 'TiB/s',
+  },
+];
+
 const SymmetricalQuantileChart = ({
   getAboveQuantileQuery,
   getBelowQuantileQuery,

ui/src/components/shared/QuantileTooltipShared.tsx

@@ -1,8 +1,4 @@
-import {
-  chartColors,
-  fontSize,
-  fontWeight,
-} from '@scality/core-ui/dist/style/theme';
+import { fontSize, fontWeight } from '@scality/core-ui/dist/style/theme';
 import React from 'react';
 import {
   Stack,
@@ -12,7 +8,7 @@ import {
   FormattedDateTime,
 } from '@scality/core-ui/dist/index';
 import styled from 'styled-components';
-import { LegendShape } from '@scality/core-ui/dist/components/chartlegend/ChartLegend';
+import { ChartLegend } from '@scality/core-ui/dist/next';
 import {
   SmallerSecondaryText,
   Text,
@@ -366,11 +362,7 @@ export const TooltipEntry = ({
       <Stack direction="vertical" gap={'r4'} key={index}>
         <Wrap>
           <Stack direction="horizontal" gap={'r10'}>
-            <LegendShape
-              color={serieData.color}
-              shape="line"
-              chartColors={chartColors}
-            />
+            <ChartLegend shape="line" />
             <SmallerText>{serieData.name}</SmallerText>
           </Stack>
 

ui/src/hooks/useChartLegendRegistration.ts

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
-import { useChartLegend } from '@scality/core-ui/dist/components/chartlegend/ChartLegendWrapper';
-import { Serie } from '@scality/core-ui/dist/components/linetimeseriechart/linetimeseriechart.component';
+import { useChartLegend, Serie } from '@scality/core-ui/dist/next';
 
 type SymmetricalSeries = {
   above: Serie[];

ui/src/services/platformlibrary/metrics.ts

@@ -6,7 +6,7 @@ import {
 import { queryPromtheusMetrics } from '../prometheus/fetchMetrics';
 import type { NodesState } from '../../ducks/app/nodes';
 import { queryPrometheus, queryPrometheusRange } from '../prometheus/api';
-import { addMissingDataPoint } from '@scality/core-ui/dist/components/linetemporalchart/ChartUtil';
+import { addMissingDataPoint } from '@scality/core-ui/dist/components/charts/index';
 import { generateSelectWithKey, getNaNSegments, getSegments } from '../utils';
 import { getFormattedLokiAlert } from '../loki/api';
 import { NAN_STRING } from '@scality/core-ui/dist/components/constants';