From 3b7c58e58e71e10be1532d768ba79952bf333053 Mon Sep 17 00:00:00 2001
From: Abdelkarim <abdelkarimdjelalda@gmail.com>
Date: Wed, 20 Dec 2023 14:55:10 +0100
Subject: [PATCH 1/2] feat: add categoryFormatter for AreaChart

---
 src/components/chart-elements/AreaChart/AreaChart.tsx | 11 +++++++----
 .../chart-elements/common/BaseChartProps.tsx          |  1 +
 src/lib/inputTypes.ts                                 |  4 ++--
 src/lib/utils.tsx                                     |  2 ++
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
index 6188c6992..47701f70a 100644
--- a/src/components/chart-elements/AreaChart/AreaChart.tsx
+++ b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -28,6 +28,7 @@ import {
   BaseColors,
   colorPalette,
   defaultValueFormatter,
+  defaultCategoryFormatter,
   getColorClassNames,
   themeColorRange,
   tremorTwMerge,
@@ -50,6 +51,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
   const {
     data = [],
     categories = [],
+    categoryFormatter = defaultCategoryFormatter,
     index,
     stack = false,
     colors = themeColorRange,
@@ -84,7 +86,8 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
   const [legendHeight, setLegendHeight] = useState(60);
   const [activeDot, setActiveDot] = useState<ActiveDot | undefined>(undefined);
   const [activeLegend, setActiveLegend] = useState<string | undefined>(undefined);
-  const categoryColors = constructCategoryColors(categories, colors);
+  const formattedCategories = categories.map((category: string) => categoryFormatter(category));
+  const categoryColors = constructCategoryColors(formattedCategories, colors);
 
   const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
   const hasOnValueChange = !!onValueChange;
@@ -257,7 +260,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                 }
               />
             ) : null}
-            {categories.map((category) => {
+            {formattedCategories.map((category) => {
               return (
                 <defs key={category}>
                   {showGradient ? (
@@ -308,7 +311,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                 </defs>
               );
             })}
-            {categories.map((category) => (
+            {formattedCategories.map((category) => (
               <Area
                 className={
                   getColorClassNames(
@@ -399,7 +402,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
               />
             ))}
             {onValueChange
-              ? categories.map((category) => (
+              ? formattedCategories.map((category) => (
                   <Line
                     className={tremorTwMerge("cursor-pointer")}
                     strokeOpacity={0}
diff --git a/src/components/chart-elements/common/BaseChartProps.tsx b/src/components/chart-elements/common/BaseChartProps.tsx
index 63bb632fb..ae81db943 100644
--- a/src/components/chart-elements/common/BaseChartProps.tsx
+++ b/src/components/chart-elements/common/BaseChartProps.tsx
@@ -16,6 +16,7 @@ export type EventProps = BaseEventProps | null | undefined;
 interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<HTMLDivElement> {
   data: any[];
   categories: string[];
+  categoryFormatter?: ValueFormatter<string, string>;
   index: string;
   colors?: (Color | string)[];
   valueFormatter?: ValueFormatter;
diff --git a/src/lib/inputTypes.ts b/src/lib/inputTypes.ts
index c1d458794..c9d50a6a5 100644
--- a/src/lib/inputTypes.ts
+++ b/src/lib/inputTypes.ts
@@ -1,5 +1,5 @@
-export type ValueFormatter = {
-  (value: number): string;
+export type ValueFormatter<T = number, E = string> = {
+  (value: T): E;
 };
 
 export type CurveType = "linear" | "natural" | "monotone" | "step";
diff --git a/src/lib/utils.tsx b/src/lib/utils.tsx
index 1e850841f..bb8404b1f 100644
--- a/src/lib/utils.tsx
+++ b/src/lib/utils.tsx
@@ -20,6 +20,8 @@ export const mapInputsToDeltaType = (deltaType: string, isIncreasePositive: bool
 
 export const defaultValueFormatter: ValueFormatter = (value: number) => value.toString();
 
+export const defaultCategoryFormatter: ValueFormatter<string, string> = (value: string) => value;
+
 export const currencyValueFormatter: ValueFormatter = (e: number) =>
   `$ ${Intl.NumberFormat("en-US").format(e)}`;
 

From ffc71b62254945d42491dcfbdd2ae867c15d8e1a Mon Sep 17 00:00:00 2001
From: Abdelkarim <abdelkarimdjelalda@gmail.com>
Date: Wed, 20 Dec 2023 14:55:31 +0100
Subject: [PATCH 2/2] feat: new story for categoryFormatter

---
 src/stories/chart-elements/AreaChart.stories.tsx | 6 +++++-
 src/stories/chart-elements/helpers/utils.ts      | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/stories/chart-elements/AreaChart.stories.tsx b/src/stories/chart-elements/AreaChart.stories.tsx
index 20564c833..67a3445ee 100644
--- a/src/stories/chart-elements/AreaChart.stories.tsx
+++ b/src/stories/chart-elements/AreaChart.stories.tsx
@@ -13,7 +13,7 @@ import {
   longIndexBaseChartData,
   simpleBaseChartWithNegativeValues,
 } from "./helpers/testData";
-import { valueFormatter } from "./helpers/utils";
+import { valueFormatter, categoryFormatter } from "./helpers/utils";
 
 const meta: Meta<typeof AreaChart> = {
   title: "Visualizations/Chart/AreaChart",
@@ -48,6 +48,10 @@ export const ValueFormatter: Story = {
   args: { valueFormatter: valueFormatter, yAxisWidth: 60 },
 };
 
+export const CategoryFormatter: Story = {
+  args: { categoryFormatter: categoryFormatter },
+};
+
 export const AutoMinValue: Story = {
   args: { autoMinValue: true },
 };
diff --git a/src/stories/chart-elements/helpers/utils.ts b/src/stories/chart-elements/helpers/utils.ts
index 8fd7b9e51..839eb41ee 100644
--- a/src/stories/chart-elements/helpers/utils.ts
+++ b/src/stories/chart-elements/helpers/utils.ts
@@ -1,3 +1,7 @@
 export const valueFormatter = (number: number) => {
   return Intl.NumberFormat("us").format(number).toString() + " $";
 };
+
+export const categoryFormatter = (value: string) => {
+  return value.toUpperCase();
+};