feat: add chartColorGen

Author: Elessar1802

src/Shared/Components/Charts/index.ts

@@ -1,2 +1,3 @@
 export { default as Chart } from './Chart.component'
 export type { ChartColorKey, ChartProps, ChartType, SimpleDataset, SimpleDatasetForPie } from './types'
+export { chartColorGenerator } from './utils'

src/Shared/Components/Charts/types.ts

@@ -2,7 +2,7 @@ import { AppThemeType } from '@Shared/Providers'
 
 export type ChartType = 'area' | 'pie' | 'stackedBar' | 'stackedBarHorizontal' | 'line'
 
-type ColorTokensType =
+export type ColorTokensType =
     | 'DeepPlum'
     | 'Magenta'
     | 'Slate'
@@ -14,7 +14,7 @@ type ColorTokensType =
     | 'GoldenYellow'
     | 'CharcoalGray'
     | 'Gray'
-type VariantsType = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
+export type VariantsType = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
 
 export type ChartColorKey = `${ColorTokensType}${VariantsType}`
 

src/Shared/Components/Charts/utils.ts

@@ -11,10 +11,12 @@ import {
 import {
     ChartColorKey,
     ChartType,
+    ColorTokensType,
     GetBackgroundAndBorderColorProps,
     SimpleDataset,
     TransformDataForChartProps,
     TransformDatasetProps,
+    VariantsType,
 } from './types'
 
 // Map our chart types to Chart.js types
@@ -264,3 +266,27 @@ export const transformDataForChart = (props: TransformDataForChartProps) => {
             return datasets.map((dataset) => transformDataset({ type, dataset, appTheme }))
     }
 }
+
+export function* chartColorGenerator() {
+    const WEIGHTS: VariantsType[] = [400, 500, 600, 700, 300, 800, 200, 900, 100, 50, 950]
+    const TOKENS: ColorTokensType[] = [
+        'SkyBlue',
+        'DeepPlum',
+        'AquaTeal',
+        'GoldenYellow',
+        'Lavender',
+        'CharcoalGray',
+        'Magenta',
+        'CoralRed',
+        'LimeGreen',
+        'Slate',
+        'Gray',
+    ]
+
+    for (let i = 0; i < WEIGHTS.length; i++) {
+        for (let j = 0; j < TOKENS.length; j++) {
+            // Yield a color key like 'SkyBlue500'
+            yield `${TOKENS[j]}${WEIGHTS[i]}` as ChartColorKey
+        }
+    }
+}

src/Shared/Components/Table/InternalTable.tsx

@@ -169,7 +169,10 @@ const InternalTable = <
     const filteredRowsError = getRows ? getRowsError : rowsError
     const reloadFilteredRows = getRows ? reloadGetRows : reloadRows
 
-    const { filteredRows, totalRows } = filteredRowsResult ?? { filteredRows: [], totalRows: 0 }
+    const { filteredRows, totalRows } = useMemo(
+        () => filteredRowsResult ?? { filteredRows: [], totalRows: 0 },
+        [filteredRowsResult],
+    )
 
     const areFilteredRowsLoading = _areFilteredRowsLoading || filteredRowsError === NO_ROWS_OR_GET_ROWS_ERROR
 
@@ -238,11 +241,7 @@ const InternalTable = <
     }
 
     return (
-        <div
-            ref={wrapperDivRef}
-            className="flexbox-col flex-grow-1 dc__overflow-hidden dc__no-shrink"
-            id={`table-wrapper-${id}`}
-        >
+        <div ref={wrapperDivRef} className="flexbox-col flex-grow-1 dc__overflow-hidden" id={`table-wrapper-${id}`}>
             <Wrapper
                 areRowsLoading={areFilteredRowsLoading}
                 clearFilters={clearFilters}