Merge pull request #929 from devtron-labs/feat/finops-uat

feat: add formatter for tooltip label values

Author: whoami-amrit

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.20.6-pre-13",
+    "version": "1.20.6-alpha-13",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -475,6 +475,14 @@ export const DATE_TIME_FORMATS = {
     DD_MMM_YYYY: 'DD MMM YYYY',
     'DD/MM/YYYY': 'DD/MM/YYYY',
     DD_MMM: 'DD MMM',
+    TWENTY_FOUR_HOUR_FORMAT_HOUR: 'HH',
+    ABBREVIATED_MONTH: 'MMM',
+    DATE_WITH_ABBREVIATED_MONTH: 'DD MMM',
+    WEEKDAY_WITH_DATE_MONTH_AND_YEAR: 'ddd, DD MMM YYYY',
+    WEEKDAY_DATE_MONTH_YEAR_AND_HOUR: 'ddd, DD MMM YYYY, HH:00',
+    DAY_OF_MONTH_WITH_ORDINAL: 'Do',
+    ABBREVIATED_WEEKDAY: 'ddd',
+    DAY_OF_MONTH: 'DD',
 }
 
 export const SEMANTIC_VERSION_DOCUMENTATION_LINK = 'https://semver.org/'

src/Common/Constants.ts

@@ -310,7 +310,7 @@ export const CHART_AXIS_LABELS_COLOR: Record<AppThemeType, string> = {
 
 export const CHART_CANVAS_BACKGROUND_COLORS: Record<AppThemeType, string> = {
     [AppThemeType.light]: 'rgb(255, 255, 255)',
-    [AppThemeType.dark]: 'rgb(21, 22, 31)',
+    [AppThemeType.dark]: 'rgb(30, 31, 40)',
 }
 
 export const LINE_DASH = [6, 6]

src/Shared/Components/Charts/constants.ts

@@ -61,6 +61,11 @@ type XYAxisMax = {
 
 type OnChartClickHandler = (datasetName: string, value: number) => void
 
+type ScaleTickFormatCallbacks = Partial<{
+    xScaleTickFormat: (label: string, index: number) => string | string[] | number | number[]
+    yScaleTickFormat: (value: number, index: number) => string | string[] | number | number[]
+}>
+
 export type TypeAndDatasetsType =
     | ({
           type: 'pie'
@@ -69,27 +74,27 @@ export type TypeAndDatasetsType =
            */
           datasets: SimpleDatasetForPie
           onChartClick?: OnChartClickHandler
-          yScaleTickFormat?: never
-      } & Never<XYAxisMax>)
+      } & Never<XYAxisMax> &
+          Never<ScaleTickFormatCallbacks>)
     | ({
           type: 'line'
           datasets: SimpleDatasetForLineAndArea[]
           onChartClick?: never
-          yScaleTickFormat?: (value: number) => string
-      } & XYAxisMax)
+      } & XYAxisMax &
+          ScaleTickFormatCallbacks)
     | ({
           type: 'area'
           datasets: SimpleDatasetForLineAndArea
           /* onChartClick is not applicable for area charts */
           onChartClick?: never
-          yScaleTickFormat?: (value: number) => string
-      } & XYAxisMax)
+      } & XYAxisMax &
+          ScaleTickFormatCallbacks)
     | ({
           type: Exclude<ChartType, 'pie' | 'line' | 'area'>
           datasets: SimpleDataset[]
           onChartClick?: OnChartClickHandler
-          yScaleTickFormat?: (value: number) => string
-      } & XYAxisMax)
+      } & XYAxisMax &
+          ScaleTickFormatCallbacks)
 
 export type ChartProps = {
     id: string
@@ -109,6 +114,7 @@ export type ChartProps = {
          * @default 'top'
          */
         placement?: TooltipProps['placement']
+        datasetValueFormatter?: (value: number) => string | number
     }
     /** A title for x axis */
     xScaleTitle?: string

src/Shared/Components/Charts/types.ts

@@ -190,7 +190,13 @@ export const getDefaultOptions = ({
         xScaleTitle,
         yScaleTitle,
         yScaleTickFormat,
+        xScaleTickFormat,
+        xAxisLabels,
+        tooltipConfig,
     } = chartProps
+
+    const { datasetValueFormatter } = tooltipConfig ?? {}
+
     const baseOptions: ChartOptions = {
         responsive: true,
         devicePixelRatio: 3,
@@ -211,6 +217,16 @@ export const getDefaultOptions = ({
                 enabled: false,
                 position: 'nearest',
                 external: externalTooltipHandler,
+                ...(datasetValueFormatter
+                    ? {
+                          callbacks: {
+                              label({ dataset, raw }) {
+                                  // only number values are expected in raw as input in our types for yAxisValues is number[]
+                                  return `${dataset.label}: ${datasetValueFormatter(raw as number)}`
+                              },
+                          },
+                      }
+                    : {}),
             },
         },
         elements: {
@@ -253,28 +269,42 @@ export const getDefaultOptions = ({
         },
     } satisfies ScaleOptions<'linear'>
 
-    const ticksWithCallback = {
-        ...commonScaleConfig.ticks,
-        callback: (value) => yScaleTickFormat(Number(value)),
-    } satisfies ScaleOptions<'linear'>['ticks']
-
     const commonXScaleConfig = {
         ...commonScaleConfig,
         max: xAxisMax,
         title: getScaleTickTitleConfig(xScaleTitle, appTheme),
-        ...(typeof yScaleTickFormat === 'function' && type === 'stackedBarHorizontal'
-            ? { ticks: ticksWithCallback }
-            : {}),
+        ticks: {
+            ...commonScaleConfig.ticks,
+            ...((type !== 'stackedBarHorizontal' && typeof xScaleTickFormat === 'function') ||
+            (type === 'stackedBarHorizontal' && typeof yScaleTickFormat === 'function')
+                ? {
+                      callback:
+                          type === 'stackedBarHorizontal'
+                              ? (value, index) => yScaleTickFormat(Number(value), index)
+                              : (_, index) => xScaleTickFormat(xAxisLabels[index], index),
+                  }
+                : {}),
+            autoSkip: false,
+        },
     } satisfies ScaleOptions<'linear'>
 
     const commonYScaleConfig = {
         ...commonScaleConfig,
         max: yAxisMax,
         title: getScaleTickTitleConfig(yScaleTitle, appTheme),
         // for stackedBarHorizon
-        ...(typeof yScaleTickFormat === 'function' && type !== 'stackedBarHorizontal'
-            ? { ticks: ticksWithCallback }
-            : {}),
+        ticks: {
+            ...commonScaleConfig.ticks,
+            ...((type === 'stackedBarHorizontal' && typeof xScaleTickFormat === 'function') ||
+            (type !== 'stackedBarHorizontal' && typeof yScaleTickFormat === 'function')
+                ? {
+                      callback:
+                          type !== 'stackedBarHorizontal'
+                              ? (value, index) => yScaleTickFormat(Number(value), index)
+                              : (_, index) => xScaleTickFormat(xAxisLabels[index], index),
+                  }
+                : {}),
+        },
     } satisfies ScaleOptions<'linear'>
 
     switch (type) {
@@ -555,7 +585,7 @@ export const buildChartTooltipFromContext = ({
             <div className="flexbox-col dc__gap-2">
                 {titleLines.map((titleLine, index) => (
                     // eslint-disable-next-line react/no-array-index-key
-                    <h6 key={index} className="m-0 fs-12 fw-6 lh-20 dc__truncate">
+                    <h6 key={index} className="m-0 fs-12 fw-6 lh-20 dc__word-break-all">
                         {titleLine}
                     </h6>
                 ))}

src/Shared/Components/Charts/utils.tsx

@@ -238,7 +238,7 @@ const PageHeader = ({
                             <InfoIconTippy
                                 infoText={tippyMessage}
                                 heading={headerName || tippyHeader}
-                                iconClassName="icon-dim-20 ml-8 fcn-5"
+                                iconClassName="icon-dim-20 ml-8 fcn-7"
                                 documentationLink={tippyRedirectLink}
                                 documentationLinkText="View Documentation"
                                 additionalContent={additionalContent}