feat: add a categories formatter

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}

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;

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";

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)}`;
 

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 },
 };

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();
+};