Add data viz colors for both themes

plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx

@@ -39,10 +39,7 @@ import {
   formatGraphValue,
   isInvalid,
 } from '../../utils/graphs';
-import {
-  useCostOverviewStyles as useStyles,
-  DataVizColors,
-} from '../../utils/styles';
+import { useCostOverviewStyles as useStyles } from '../../utils/styles';
 import { useFilters, useLastCompleteBillingDate } from '../../hooks';
 import { mapFiltersToProps } from './selector';
 import { getPreviousPeriodTotalCost } from '../../utils/change';
@@ -135,8 +132,8 @@ export const CostOverviewByProductChart = ({
         dataKey={product}
         stackId="1"
         fillOpacity="1"
-        stroke={DataVizColors[i]}
-        fill={DataVizColors[i]}
+        stroke={theme.palette.dataViz[i]}
+        fill={theme.palette.dataViz[i]}
       />
     ));
   };

plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx

@@ -60,8 +60,12 @@ export const CostOverviewCard = ({
   const styles = useOverviewTabsStyles(theme);
 
   const tabs = [
-    { id: 'overview', label: 'Total cost' },
-    { id: 'breakdown', label: 'Breakdown by product' },
+    { id: 'overview', label: 'Total cost', title: 'Cloud Cost' },
+    {
+      id: 'breakdown',
+      label: 'Breakdown by product',
+      title: 'Cloud Cost By Product',
+    },
   ];
 
   const OverviewTabs = () => {
@@ -94,9 +98,7 @@ export const CostOverviewCard = ({
       <ScrollAnchor behavior="smooth" top={-20} />
       <CardContent>
         {dailyCostData.groupedCosts && <OverviewTabs />}
-        <CostOverviewHeader
-          title={tabIndex === 0 ? 'Cloud Cost' : 'Cloud Cost By Product'}
-        >
+        <CostOverviewHeader title={tabs[tabIndex].title}>
           <PeriodSelect duration={filters.duration} onSelect={setDuration} />
         </CostOverviewHeader>
         <Divider />

plugins/cost-insights/src/types/Theme.ts

@@ -30,6 +30,7 @@ type CostInsightsPaletteAdditions = {
   tooltip: CostInsightsTooltipOptions;
   navigationText: string;
   alertBackground: string;
+  dataViz: string[];
 };
 
 export type CostInsightsPalette = BackstagePalette &

plugins/cost-insights/src/utils/styles.ts

@@ -24,19 +24,6 @@ import {
 import { BackstageTheme } from '@backstage/theme';
 import { CostInsightsTheme, CostInsightsThemeOptions } from '../types';
 
-export const DataVizColors = [
-  '#509BF5',
-  '#FF6437',
-  '#4B917D',
-  '#F573A0',
-  '#F59B23',
-  '#B49BC8',
-  '#C39687',
-  '#A0C3D2',
-  '#FFC864',
-  '#BABABA',
-];
-
 export const costInsightsLightTheme = {
   palette: {
     blue: '#509AF5',
@@ -50,6 +37,18 @@ export const costInsightsLightTheme = {
     },
     navigationText: '#b5b5b5',
     alertBackground: 'rgba(219, 219, 219, 0.13)',
+    dataViz: [
+      '#509BF5',
+      '#FF6437',
+      '#4B917D',
+      '#F573A0',
+      '#F59B23',
+      '#B49BC8',
+      '#C39687',
+      '#A0C3D2',
+      '#FFC864',
+      '#BABABA',
+    ],
   },
 } as CostInsightsThemeOptions;
 
@@ -68,6 +67,18 @@ export const costInsightsDarkTheme = {
     },
     navigationText: '#b5b5b5',
     alertBackground: 'rgba(32, 32, 32, 0.13)',
+    dataViz: [
+      '#B9D6FB',
+      '#FFC1AF',
+      '#B7D3CB',
+      '#FBC7D9',
+      '#FBD6A7',
+      '#E1D7E9',
+      '#E7D5CF',
+      '#D9E7ED',
+      '#FFE9C1',
+      '#E3E3E3',
+    ],
   },
 } as CostInsightsThemeOptions;