fix: use referenceLines

Author: Elessar1802

src/Shared/Components/Charts/Chart.component.tsx

@@ -22,7 +22,7 @@ import { DEVTRON_BASE_MAIN_ID } from '@Shared/constants'
 import { useTheme } from '@Shared/Providers'
 
 import { LEGENDS_LABEL_CONFIG } from './constants'
-import { getAverageLinePlugin, getSeparatorLinePlugin } from './plugins'
+import { drawReferenceLine, getSeparatorLinePlugin } from './plugins'
 import { ChartProps, GetDefaultOptionsParams } from './types'
 import { buildChartTooltipFromContext, getChartJSType, getDefaultOptions, transformDataForChart } from './utils'
 
@@ -159,7 +159,7 @@ const Chart = (props: ChartProps) => {
         hideAxis = false,
         onChartClick,
         separatorIndex,
-        averageLineValue,
+        referenceLines,
         hideXAxisLabels = false,
         xAxisMax,
         yAxisMax,
@@ -242,15 +242,15 @@ const Chart = (props: ChartProps) => {
                 ...defaultOptions,
             },
             plugins: [
-                ...(averageLineValue ? [getAverageLinePlugin(averageLineValue, appTheme)] : []),
+                ...(referenceLines ?? []).map((rl, idx) => drawReferenceLine(rl, `reference-line-${idx}`, appTheme)),
                 ...(separatorIndex ? [getSeparatorLinePlugin(separatorIndex, type, appTheme)] : []),
             ],
         })
 
         return () => {
             chartRef.current.destroy()
         }
-    }, [type, datasets, labels, appTheme, hideAxis, averageLineValue, separatorIndex])
+    }, [type, datasets, labels, appTheme, hideAxis, referenceLines, separatorIndex])
 
     return (
         <div className="h-100 w-100 dc__position-rel">

src/Shared/Components/Charts/index.ts

@@ -1,4 +1,11 @@
 export { default as Chart } from './Chart.component'
 export { CHART_COLORS } from './constants'
-export type { ChartColorKey, ChartProps, ChartType, SimpleDataset, SimpleDatasetForPie } from './types'
+export type {
+    ChartColorKey,
+    ChartProps,
+    ChartType,
+    ReferenceLineConfigType,
+    SimpleDataset,
+    SimpleDatasetForPie,
+} from './types'
 export { chartColorGenerator } from './utils'

src/Shared/Components/Charts/plugins.ts

@@ -3,21 +3,21 @@ import { Chart, Plugin } from 'chart.js'
 import { AppThemeType } from '@Shared/Providers'
 
 import { CHART_COLORS } from './constants'
-import { ChartType } from './types'
+import { ChartType, ReferenceLineConfigType } from './types'
 
-export const getAverageLinePlugin = (averageValue: number, appTheme: AppThemeType): Plugin => ({
-    id: 'averageLine',
+export const drawReferenceLine = (config: ReferenceLineConfigType, id: string, appTheme: AppThemeType): Plugin => ({
+    id,
     afterDraw: (chart) => {
         const { ctx, chartArea, scales } = chart
-        if (!scales || !scales.y || !averageValue) {
+        if (!scales || !scales.y || !config?.value) {
             return
         }
-        const yValue = scales.y.getPixelForValue(averageValue)
+        const yValue = scales.y.getPixelForValue(config.value)
         ctx.save()
         ctx.beginPath()
         ctx.setLineDash([6, 6])
-        ctx.strokeStyle = CHART_COLORS[appTheme].CharcoalGray700
-        ctx.lineWidth = 1
+        ctx.strokeStyle = CHART_COLORS[appTheme][config.color ?? 'CharcoalGray700']
+        ctx.lineWidth = config.strokeWidth ?? 1
         ctx.moveTo(chartArea.left, yValue)
         ctx.lineTo(chartArea.right, yValue)
         ctx.stroke()

src/Shared/Components/Charts/types.ts

@@ -42,9 +42,19 @@ export interface SimpleDatasetForLine extends BaseSimpleDataset {
     borderColor: ChartColorKey
 }
 
+export interface ReferenceLineConfigType {
+    strokeWidth?: number
+    color?: ChartColorKey
+    value: number
+}
+
 type XYAxisMax = {
     xAxisMax?: number
     yAxisMax?: number
+    /**
+     * Optional reference lines to draw across the chart
+     */
+    referenceLines?: ReferenceLineConfigType[]
 }
 
 type TypeAndDatasetsType =
@@ -55,25 +65,21 @@ type TypeAndDatasetsType =
            */
           datasets: SimpleDatasetForPie
           separatorIndex?: never
-          averageLineValue?: never
       } & Never<XYAxisMax>)
     | ({
           type: 'line'
           datasets: SimpleDatasetForLine[]
           separatorIndex?: never
-          averageLineValue?: number
       } & XYAxisMax)
     | ({
           type: 'area'
           datasets: SimpleDataset[]
           separatorIndex?: never
-          averageLineValue?: number
       } & XYAxisMax)
     | ({
           type: Exclude<ChartType, 'pie' | 'line' | 'area'>
           datasets: SimpleDataset[]
           separatorIndex?: number
-          averageLineValue?: number
       } & XYAxisMax)
 
 export type ChartProps = {