Merge branch 'kubecon-2025' of https://github.com/devtron-labs/devtron-fe-common-lib into feat/cost-config

Author: AbhishekA1509

src/Assets/IconV2/ic-file-download.svg

@@ -64,6 +64,7 @@ export type ActionMenuItemType<T extends string | number = string | number> = Om
     trailingItem?: TrailingItemType
     /** Prevents the menu from closing when the item is clicked. */
     doNotCloseMenuOnClick?: boolean
+    dataAttributesId?: number
 } & ConditionalActionMenuComponentType
 
 export type ActionMenuOptionType<T extends string | number> = {

src/Shared/Components/ActionMenu/types.ts

@@ -13,6 +13,7 @@ import {
     LineController,
     LineElement,
     PointElement,
+    TimeScale,
     Title,
     Tooltip as ChartJSTooltip,
 } from 'chart.js'
@@ -21,10 +22,16 @@ import { noop, useDebounce } from '@Common/Helper'
 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 { ChartProps, GetDefaultOptionsParams } from './types'
-import { buildChartTooltipFromContext, getChartJSType, getDefaultOptions, transformDataForChart } from './utils'
+import { drawReferenceLine } from './plugins'
+import { ChartProps, GetDefaultOptionsParams, TypeAndDatasetsType } from './types'
+import {
+    buildChartTooltipFromContext,
+    distanceBetweenPoints,
+    getChartJSType,
+    getDefaultOptions,
+    getLegendsLabelConfig,
+    transformDataForChart,
+} from './utils'
 
 // Register Chart.js components
 ChartJS.register(
@@ -37,19 +44,48 @@ ChartJS.register(
     PointElement,
     DoughnutController,
     ArcElement,
+    TimeScale,
     Title,
     ChartJSTooltip,
     Legend,
     Filler,
 )
 
-/**
- * The doughnut chart overrides the default legend label configuration.
- * Therefore need to set the custom legend label configuration.
- */
-ChartJS.overrides.doughnut.plugins.legend.labels = {
-    ...ChartJS.overrides.doughnut.plugins.legend.labels,
-    ...LEGENDS_LABEL_CONFIG,
+ChartJSTooltip.positioners.barElementCenterPositioner = (items, eventPosition) => {
+    if (!items.length) {
+        return false
+    }
+
+    let { x } = eventPosition
+    let { y } = eventPosition
+    let minDistance = Number.POSITIVE_INFINITY
+    let i: number
+    let len: number
+    let nearestElement: BarElement
+
+    for (i = 0, len = items.length; i < len; ++i) {
+        const el = items[i].element
+        if (el && el.hasValue()) {
+            const center = (el as BarElement).getCenterPoint()
+            const d = distanceBetweenPoints(eventPosition, center)
+
+            if (d < minDistance) {
+                minDistance = d
+                nearestElement = el as BarElement
+            }
+        }
+    }
+
+    if (nearestElement) {
+        const tp = nearestElement.getCenterPoint()
+        x = tp.x
+        y = tp.y
+    }
+
+    return {
+        x,
+        y,
+    }
 }
 
 /**
@@ -157,15 +193,15 @@ const Chart = (props: ChartProps) => {
         id,
         xAxisLabels: labels,
         hideAxis = false,
-        onChartClick,
-        separatorIndex,
-        averageLineValue,
+        referenceLines,
+        tooltipConfig,
+        type,
+        datasets,
         xAxisMax,
+        xScaleTitle,
         yAxisMax,
-        tooltipConfig,
-        ...typeAndDatasets
+        yScaleTitle,
     } = props
-    const { type, datasets } = typeAndDatasets
     const { getTooltipContent, placement } = tooltipConfig || { placement: 'top' }
 
     const canvasRef = useRef<HTMLCanvasElement>(null)
@@ -212,24 +248,34 @@ const Chart = (props: ChartProps) => {
         setTooltipVisible(true)
     }
 
-    const debouncedExternalTooltipHandler = useDebounce(externalTooltipHandler, 16)
+    const debouncedExternalTooltipHandler = useDebounce(externalTooltipHandler, 50)
 
     useEffect(() => {
         const ctx = canvasRef.current?.getContext('2d')
         if (!ctx) {
             return noop
         }
 
+        if (type === 'pie') {
+            /**
+             * The doughnut chart overrides the default legend label configuration.
+             * Therefore need to set the custom legend label configuration.
+             */
+            ChartJS.overrides.doughnut.plugins.legend.labels = {
+                ...ChartJS.overrides.doughnut.plugins.legend.labels,
+                ...getLegendsLabelConfig('pie', appTheme),
+            }
+        }
+
         // Get Chart.js type and transform data
         const chartJSType = getChartJSType(type)
-        const transformedData = { labels, datasets: transformDataForChart({ ...typeAndDatasets, appTheme }) }
+        const transformedData = {
+            labels,
+            datasets: transformDataForChart({ ...({ type, datasets } as TypeAndDatasetsType), appTheme }),
+        }
         const defaultOptions = getDefaultOptions({
-            type,
+            chartProps: props,
             appTheme,
-            hideAxis,
-            onChartClick,
-            xAxisMax,
-            yAxisMax,
             externalTooltipHandler: debouncedExternalTooltipHandler,
         })
 
@@ -240,15 +286,14 @@ const Chart = (props: ChartProps) => {
                 ...defaultOptions,
             },
             plugins: [
-                ...(averageLineValue ? [getAverageLinePlugin(averageLineValue, appTheme)] : []),
-                ...(separatorIndex ? [getSeparatorLinePlugin(separatorIndex, type, appTheme)] : []),
+                ...(referenceLines ?? []).map((rl, idx) => drawReferenceLine(rl, `reference-line-${idx}`, appTheme)),
             ],
         })
 
         return () => {
             chartRef.current.destroy()
         }
-    }, [type, datasets, labels, appTheme, hideAxis, averageLineValue, separatorIndex])
+    }, [type, datasets, labels, appTheme, hideAxis, referenceLines, xAxisMax, xScaleTitle, yAxisMax, yScaleTitle])
 
     return (
         <div className="h-100 w-100 dc__position-rel">
@@ -260,8 +305,19 @@ const Chart = (props: ChartProps) => {
                 placement={placement}
                 appendTo={document.getElementById(DEVTRON_BASE_MAIN_ID)}
                 className="default-tt dc__mxw-400 dc__word-break"
+                moveTransition="transform 200ms cubic-bezier(.42,.61,.64,.81)"
             >
-                <span ref={tooltipRef} style={{ position: 'absolute', left: 0, top: 0, width: 0, height: 0 }} />
+                <span
+                    ref={tooltipRef}
+                    style={{
+                        position: 'absolute',
+                        left: 0,
+                        top: 0,
+                        width: 0,
+                        height: 0,
+                        willChange: 'transform',
+                    }}
+                />
             </Tippy>
         </div>
     )

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

@@ -2,18 +2,6 @@ import { AppThemeType } from '@Shared/Providers'
 
 import { ChartColorKey } from './types'
 
-export const LEGENDS_LABEL_CONFIG = {
-    usePointStyle: true,
-    pointStyle: 'rectRounded',
-    pointStyleWidth: 0,
-    font: {
-        family: "'IBM Plex Sans', 'Open Sans', 'Roboto'",
-        size: 13,
-        lineHeight: '150%',
-        weight: 400,
-    },
-} as const
-
 export const CHART_COLORS: Record<AppThemeType, Record<ChartColorKey, string>> = {
     [AppThemeType.light]: {
         // Sky Blue
@@ -306,11 +294,23 @@ export const CHART_COLORS: Record<AppThemeType, Record<ChartColorKey, string>> =
 } as const
 
 export const CHART_GRID_LINES_COLORS: Record<AppThemeType, string> = {
-    [AppThemeType.light]: '#f1f5f9',
-    [AppThemeType.dark]: '#1e293b',
+    [AppThemeType.light]: 'rgb(237, 241, 245)',
+    [AppThemeType.dark]: 'rgb(40, 43, 51)',
+}
+
+export const CHART_AXIS_COLORS: Record<AppThemeType, string> = {
+    [AppThemeType.light]: 'rgb(208, 212, 217)',
+    [AppThemeType.dark]: 'rgb(60, 63, 71)',
+}
+
+export const CHART_AXIS_LABELS_COLOR: Record<AppThemeType, string> = {
+    [AppThemeType.dark]: 'rgb(248, 248, 249)',
+    [AppThemeType.light]: 'rgb(0, 10, 20)',
 }
 
 export const CHART_CANVAS_BACKGROUND_COLORS: Record<AppThemeType, string> = {
-    [AppThemeType.light]: '#ffffff',
-    [AppThemeType.dark]: '#1e293b',
+    [AppThemeType.light]: 'rgb(255, 255, 255)',
+    [AppThemeType.dark]: 'rgb(21, 22, 31)',
 }
+
+export const LINE_DASH = [6, 6]

src/Shared/Components/Charts/constants.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/index.ts

@@ -1,63 +1,27 @@
-import { Chart, Plugin } from 'chart.js'
+import { Plugin } from 'chart.js'
 
 import { AppThemeType } from '@Shared/Providers'
 
 import { CHART_COLORS } from './constants'
-import { ChartType } from './types'
+import { 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()
         ctx.setLineDash([])
         ctx.restore()
     },
 })
-
-const drawSeparator = (separatorIndex: number, chartType: ChartType, appTheme: AppThemeType) => (chart: Chart) => {
-    const { ctx, scales } = chart
-    ctx.save()
-    ctx.beginPath()
-    ctx.strokeStyle = CHART_COLORS[appTheme].CharcoalGray700
-    ctx.lineWidth = 1
-
-    if (chartType === 'stackedBar') {
-        // Draw vertical separator after separatorIndex, extend beyond chart area for labels
-        if (scales && scales.x) {
-            const xValue = scales.x.getPixelForValue(separatorIndex + 0.5)
-            // Try to extend line from top to bottom of canvas
-            ctx.moveTo(xValue, 0)
-            ctx.lineTo(xValue, chart.height)
-        }
-    } else if (scales && scales.y) {
-        // Draw horizontal separator after separatorIndex, extend beyond chart area for labels
-        const yValue = scales.y.getPixelForValue(separatorIndex + 0.5)
-        ctx.moveTo(0, yValue)
-        ctx.lineTo(chart.width, yValue)
-    }
-
-    ctx.stroke()
-    ctx.restore()
-}
-
-export const getSeparatorLinePlugin = (
-    separatorIndex: number,
-    chartType: ChartType,
-    appTheme: AppThemeType,
-): Plugin => ({
-    id: 'separatorLine',
-    afterDraw: drawSeparator(separatorIndex, chartType, appTheme),
-    afterDatasetsDraw: drawSeparator(separatorIndex, chartType, appTheme),
-})