small improvement

tremorlabs · Jul 25, 2024 · 662c2b7 · 662c2b7
1 parent f786888
commit 662c2b7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -134,15 +134,13 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
     setActiveDot(undefined);
   }
 
-  const yAxisConfigsValueFormatter = yAxisConfigs.flatMap((yAxisConfig) => {
-    return (
-      yAxisConfig.categories?.map((c) => [c, yAxisConfig.valueFormatter ?? valueFormatter]) ?? []
-    );
-  });
   const yAxisValueFormatters = Object.fromEntries(
-    yAxisConfigsValueFormatter.length > 0
-      ? yAxisConfigsValueFormatter
-      : categories.map((c, idx) => [c, yAxisConfigs[idx]?.valueFormatter ?? valueFormatter]),
+    yAxisConfigs.flatMap((yAxisConfig, i) => {
+      return (
+        yAxisConfig.categories?.map((c) => [c, yAxisConfig.valueFormatter ?? valueFormatter]) ??
+        categories.map((c) => [c, yAxisConfigs[i]?.valueFormatter ?? valueFormatter])
+      );
+    }),
   );
 
   return (

diff --git a/src/stories/chart-elements/AreaChart.stories.tsx b/src/stories/chart-elements/AreaChart.stories.tsx
@@ -386,6 +386,13 @@ export const MultipleYAxes: Story = {
   },
 };
 
+export const SingleYAxisWithValueFormatter: Story = {
+  args: {
+    categories: ["Sales", "Successful Payments"],
+    yAxisConfigs: [{ orientation: "left", valueFormatter: (value: number) => `${value} S` }],
+  },
+};
+
 export const MultipleYAxesWithExplicitCategories: Story = {
   args: {
     yAxisConfigs: [