CNV-45253: No color in the virtual machine migration graph legend

Signed-off-by: Aviv Turgeman <[email protected]>
kubevirt-ui · Sep 24, 2024 · dbccc56 · dbccc56
1 parent f4f6d7c
commit dbccc56
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/...ws/clusteroverview/MigrationsTab/components/MigrationsChartDonut/MigrationChartLegend.tsx b/...ws/clusteroverview/MigrationsTab/components/MigrationsChartDonut/MigrationChartLegend.tsx
@@ -4,8 +4,7 @@ import { Link } from 'react-router-dom-v5-compat';
 import { OnFilterChange } from '@openshift-console/dynamic-plugin-sdk';
 import { CardFooter, Grid, GridItem } from '@patternfly/react-core';
 
-import './MigrationChartLegend';
-
+import { colorScale } from './constants';
 import { ChartDataItem } from './MigrationsChartDonut';
 
 type MigrationChartLegendProps = {
@@ -17,11 +16,14 @@ const MigrationChartLegend: FC<MigrationChartLegendProps> = ({ legendItems, onFi
   return (
     <CardFooter>
       <Grid>
-        {legendItems?.map((item) => {
+        {legendItems?.map((item, index) => {
           const { x: status, y: statusCount } = item || {};
           return (
             <GridItem key={status} span={2}>
-              <i className="fas fa-square" />{' '}
+              <i
+                className="fas fa-square"
+                style={{ color: colorScale[index % colorScale.length] }}
+              />{' '}
               <Link
                 onClick={() => {
                   onFilterChange('status', { all: [status], selected: [status] });

diff --git a/...ws/clusteroverview/MigrationsTab/components/MigrationsChartDonut/MigrationsChartDonut.tsx b/...ws/clusteroverview/MigrationsTab/components/MigrationsChartDonut/MigrationsChartDonut.tsx
@@ -3,8 +3,9 @@ import React, { FC } from 'react';
 import { V1VirtualMachineInstanceMigration } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { OnFilterChange } from '@openshift-console/dynamic-plugin-sdk';
-import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts';
+import { ChartDonut } from '@patternfly/react-charts';
 
+import { colorScale } from './constants';
 import MigrationChartLegend from './MigrationChartLegend';
 
 type MigrationsChartDonutProps = {
@@ -42,14 +43,14 @@ const MigrationsChartDonut: FC<MigrationsChartDonutProps> = ({ onFilterChange, v
       <ChartDonut
         ariaDesc={t('Cluster scope migrations')}
         ariaTitle={t('Migrations')}
+        colorScale={colorScale}
         constrainToVisibleArea
         data={chartData}
         height={220}
         labels={({ datum }) => `${datum.x}: ${datum.y}`}
         legendPosition="bottom"
         padding={20}
         subTitle={t('Migrations')}
-        themeColor={ChartThemeColor.multiOrdered}
         title={vmims?.length.toString()}
         width={600}
       />

diff --git a/src/views/clusteroverview/MigrationsTab/components/MigrationsChartDonut/constants.ts b/src/views/clusteroverview/MigrationsTab/components/MigrationsChartDonut/constants.ts
@@ -0,0 +1 @@
+export const colorScale = ['#2B9AF3', '#3E8635', '#C9190B', '#F0AB00', '#40199A'];
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const colorScale = ['#2B9AF3', '#3E8635', '#C9190B', '#F0AB00', '#40199A'];