[Dashboards] - Min Max range on secondary axis bar charts (#15118)

video QA https://github.com/user-attachments/assets/70c37188-2398-43de-bbf6-5882bb79940a --------- Co-authored-by: Charles Bochet <charles@twenty.com>
2025-10-22 14:21:01 +05:30
parent c6addc2bb4
commit 226cc9eb74
37 changed files with 1096 additions and 407 deletions
@@ -40,6 +40,8 @@ type GraphWidgetBarChartProps = {
  layout?: 'vertical' | 'horizontal';
  groupMode?: 'grouped' | 'stacked';
  seriesLabels?: Record<string, string>;
+  rangeMin?: number;
+  rangeMax?: number;
 } & GraphValueFormatOptions;

 const StyledContainer = styled.div`
@@ -65,6 +67,8 @@ export const GraphWidgetBarChart = ({
  layout = 'vertical',
  groupMode = 'grouped',
  seriesLabels,
+  rangeMin,
+  rangeMax,
  displayType,
  decimals,
  prefix,
@@ -180,7 +184,12 @@ export const GraphWidgetBarChart = ({
          padding={0.3}
          groupMode={groupMode}
          layout={layout}
-          valueScale={{ type: 'linear' }}
+          valueScale={{
+            type: 'linear',
+            min: rangeMin ?? 'auto',
+            max: rangeMax ?? 'auto',
+            clamp: true,
+          }}
          indexScale={{ type: 'band', round: true }}
          colors={(datum) => getBarChartColor(datum, barConfigs, theme)}
          defs={defs}
@@ -1,6 +1,6 @@
 import { ChartSkeletonLoader } from '@/page-layout/widgets/graph/components/ChartSkeletonLoader';
 import { useGraphBarChartWidgetData } from '@/page-layout/widgets/graph/graphWidgetBarChart/hooks/useGraphBarChartWidgetData';
-import { lazy, Suspense } from 'react';
+import { lazy, Suspense, useMemo } from 'react';
 import {
  type BarChartConfiguration,
  type PageLayoutWidget,
@@ -34,17 +34,28 @@ export const GraphWidgetBarChartRenderer = ({
    configuration: widget.configuration as BarChartConfiguration,
  });

-  if (loading) {
-    return <ChartSkeletonLoader />;
-  }
-
  const configuration = widget.configuration as BarChartConfiguration;
  const groupMode =
    configuration.groupMode === 'GROUPED' ? 'grouped' : 'stacked';

+  const filterStateKey = useMemo(
+    () =>
+      `${configuration.rangeMin ?? ''}-${configuration.rangeMax ?? ''}-${configuration.omitNullValues ?? ''}`,
+    [
+      configuration.rangeMin,
+      configuration.rangeMax,
+      configuration.omitNullValues,
+    ],
+  );
+
+  if (loading) {
+    return <ChartSkeletonLoader />;
+  }
+
  return (
    <Suspense fallback={<ChartSkeletonLoader />}>
      <GraphWidgetBarChart
+        key={filterStateKey}
        data={data}
        series={series}
        indexBy={indexBy}
@@ -56,6 +67,8 @@ export const GraphWidgetBarChartRenderer = ({
        groupMode={groupMode}
        id={widget.id}
        displayType="shortNumber"
+        rangeMin={configuration.rangeMin ?? undefined}
+        rangeMax={configuration.rangeMax ?? undefined}
      />
    </Suspense>
  );