Merge pull request #920 from devtron-labs/feat/efficient-projects

feat: uat changes finops

Author: whoami-amrit

package-lock.json

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

package.json

@@ -35,7 +35,7 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
     swapLegendAndBar = false,
     showAnimationOnBar = false,
     isLoading,
-    size = ComponentSizeType.medium,
+    size = ComponentSizeType.small,
 }) => {
     const entities = isLoading ? [FALLBACK_ENTITY] : userEntities
     const total = entities.reduce((sum, entity) => entity.value + sum, 0)

src/Common/SegmentedBarChart/SegmentedBarChart.tsx

@@ -4,6 +4,8 @@ export const getBarHeightForSize = (size: ComponentSizeType) => {
     switch (size) {
         case ComponentSizeType.large:
             return 'h-20'
+        case ComponentSizeType.medium:
+            return 'h-12'
         case ComponentSizeType.xs:
             return 'h-6'
         default:

src/Common/SegmentedBarChart/utils.ts

@@ -314,3 +314,5 @@ export const CHART_CANVAS_BACKGROUND_COLORS: Record<AppThemeType, string> = {
 }
 
 export const LINE_DASH = [6, 6]
+
+export const MAX_BAR_THICKNESS = 96

src/Shared/Components/Charts/constants.ts

@@ -69,22 +69,26 @@ export type TypeAndDatasetsType =
            */
           datasets: SimpleDatasetForPie
           onChartClick?: OnChartClickHandler
+          yScaleTickFormat?: never
       } & Never<XYAxisMax>)
     | ({
           type: 'line'
           datasets: SimpleDatasetForLineAndArea[]
           onChartClick?: never
+          yScaleTickFormat?: (value: number) => string
       } & XYAxisMax)
     | ({
           type: 'area'
           datasets: SimpleDatasetForLineAndArea
           /* onChartClick is not applicable for area charts */
           onChartClick?: never
+          yScaleTickFormat?: (value: number) => string
       } & XYAxisMax)
     | ({
           type: Exclude<ChartType, 'pie' | 'line' | 'area'>
           datasets: SimpleDataset[]
           onChartClick?: OnChartClickHandler
+          yScaleTickFormat?: (value: number) => string
       } & XYAxisMax)
 
 export type ChartProps = {

src/Shared/Components/Charts/types.ts

@@ -20,6 +20,7 @@ import {
     CHART_COLORS,
     CHART_GRID_LINES_COLORS,
     LINE_DASH,
+    MAX_BAR_THICKNESS,
 } from './constants'
 import {
     ChartColorKey,
@@ -180,6 +181,7 @@ export const getDefaultOptions = ({
         yAxisMax,
         xScaleTitle,
         yScaleTitle,
+        yScaleTickFormat,
     } = chartProps
     const baseOptions: ChartOptions = {
         responsive: true,
@@ -243,16 +245,28 @@ 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 }
+            : {}),
     } satisfies ScaleOptions<'linear'>
 
     const commonYScaleConfig = {
         ...commonScaleConfig,
         max: yAxisMax,
         title: getScaleTickTitleConfig(yScaleTitle, appTheme),
+        // for stackedBarHorizon
+        ...(typeof yScaleTickFormat === 'function' && type !== 'stackedBarHorizontal'
+            ? { ticks: ticksWithCallback }
+            : {}),
     } satisfies ScaleOptions<'linear'>
 
     switch (type) {
@@ -301,6 +315,11 @@ export const getDefaultOptions = ({
                         beginAtZero: true,
                     },
                 },
+                datasets: {
+                    bar: {
+                        maxBarThickness: MAX_BAR_THICKNESS,
+                    },
+                },
             } satisfies ChartOptions<'bar'>
         case 'stackedBarHorizontal':
             return {
@@ -316,6 +335,11 @@ export const getDefaultOptions = ({
                         stacked: true,
                     },
                 },
+                datasets: {
+                    bar: {
+                        maxBarThickness: MAX_BAR_THICKNESS,
+                    },
+                },
             } satisfies ChartOptions<'bar'>
         case 'pie':
             return {