Merge pull request #25 from kubit-ui/feat/bar-axis-value-formatter-and-halfchart-path-fix

feat: add bar axis valueFormatter and fix halfChart path

Author: hectoruch

package.json

@@ -172,6 +172,7 @@
     "@storybook/addon-docs": "10.2.10",
     "@storybook/addon-links": "10.2.10",
     "@storybook/addon-themes": "10.2.10",
+    "@storybook/react": "10.2.10",
     "@storybook/react-vite": "10.2.10",
     "@storybook/test-runner": "0.24.2",
     "@storybook/testing-library": "0.2.2",

pnpm-lock.yaml

@@ -1 +1 @@
-module.exports = {};
+export default {};

src/__mocks__/styleMock.ts

@@ -8,6 +8,7 @@ import type { TickData } from '@/components/tick/tick.types';
 import type { CanvasConfig } from '@/types/canvas.type';
 import type { ChartError, ChartErrorCollection, ErrorType } from '@/types/errors.type';
 import type { Positions } from '@/types/position.enum';
+import type { ValueFormatter } from '@/types/valueFormatter.type';
 
 export type BarChartChildrenType = ReactNode | ReactElement<PathProps | XAxisProps | YAxisProps>;
 
@@ -121,13 +122,15 @@ export interface BarChartXAxisProps extends Omit<XAxisProps, OmitProps>, React.A
    */
   ariaLabel?: string;
   tickValues?: BarChartTickValuesAxisProps;
+  valueFormatter?: ValueFormatter<string>;
 }
 export interface BarChartYAxisProps extends Omit<YAxisProps, OmitProps>, React.AriaAttributes {
   /**
    * @deprecated Use aria-label instead for better accessibility standards
    */
   ariaLabel?: string;
   tickValues?: BarChartTickValuesAxisProps;
+  valueFormatter?: ValueFormatter<string>;
 }
 export interface BarChartSeparatorProps {
   topSeparator?: StyleProps;

src/charts/barChart/barChart.type.ts

@@ -15,4 +15,20 @@ describe('LineChartXAxis', () => {
     const xAxis = getByTestId('testxAxis');
     expect(xAxis).toBeInTheDocument();
   });
+
+  it('renders formatted tick labels', () => {
+    const { getByText } = render(
+      <BarChartContext.Provider value={CONTEXT}>
+        <BarChart.XAxis
+          tickLine={{}}
+          tickText={{ fontSize: 12 }}
+          valueFormatter={value => `Label ${value}`}
+        />
+      </BarChartContext.Provider>
+    );
+
+    expect(getByText('Label 1')).toBeInTheDocument();
+    expect(getByText('Label 2')).toBeInTheDocument();
+    expect(getByText('Label 3')).toBeInTheDocument();
+  });
 });

src/charts/barChart/fragments/__tests__/barChartXAxis.test.tsx

@@ -15,4 +15,20 @@ describe('LineChartYAxis', () => {
     const yAxis = getByTestId('testyAxis');
     expect(yAxis).toBeInTheDocument();
   });
+
+  it('renders formatted tick labels', () => {
+    const { getByText } = render(
+      <BarChartContext.Provider value={CONTEXT}>
+        <BarChart.YAxis
+          tickLine={{}}
+          tickText={{ fontSize: 12 }}
+          valueFormatter={value => `${value}%`}
+        />
+      </BarChartContext.Provider>
+    );
+
+    expect(getByText('10%')).toBeInTheDocument();
+    expect(getByText('20%')).toBeInTheDocument();
+    expect(getByText('30%')).toBeInTheDocument();
+  });
 });

src/charts/barChart/fragments/__tests__/barChartYAxis.test.tsx

@@ -1,6 +1,7 @@
 import { type FC, type ReactElement, useContext } from 'react';
 
 import { XAxis } from '@/components/axisChart/xAxis/xAxis';
+import { TickDataUtils } from '@/components/tick/tick.types';
 import { Positions } from '@/types/position.enum';
 import { getTickTextYCoordinate } from '@/utils/getTickTextCoordinate/getTickTextCoordinates';
 
@@ -12,6 +13,7 @@ export const BarChartXAxis: FC<BarChartXAxisProps> = ({
   position = Positions.BOTTOM,
   tickLine,
   tickText,
+  valueFormatter = (value: string) => value,
   ...props
 }): ReactElement => {
   const {
@@ -29,6 +31,9 @@ export const BarChartXAxis: FC<BarChartXAxisProps> = ({
 
   const y1 = context.extraSpaceTopY;
   const y2 = Number(context.canvasHeight) - context.extraSpaceBottomY;
+  const formattedTickValues = tickText
+    ? TickDataUtils.formatTicksValues(tickValues, valueFormatter)
+    : undefined;
 
   return (
     <XAxis
@@ -51,7 +56,7 @@ export const BarChartXAxis: FC<BarChartXAxisProps> = ({
         ...tickText,
         y: tickTextY,
       }}
-      tickValues={tickText ? tickValues : undefined}
+      tickValues={formattedTickValues}
     />
   );
 };

src/charts/barChart/fragments/barChartXAxis.tsx

@@ -1,6 +1,7 @@
 import { type FC, type ReactElement, useContext } from 'react';
 
 import { YAxis } from '@/components/axisChart/yAxis/yAxis';
+import { TickDataUtils } from '@/components/tick/tick.types';
 import { Positions } from '@/types/position.enum';
 import { ajustedTextSpace } from '@/utils/ajustedTextSpace/ajustedTextSpace';
 import { getTickTextXCoordinate } from '@/utils/getTickTextCoordinate/getTickTextCoordinates';
@@ -13,6 +14,7 @@ export const BarChartYAxis: FC<BarChartYAxisProps> = ({
   position = Positions.LEFT,
   tickLine,
   tickText,
+  valueFormatter = (value: string) => value,
   ...props
 }): ReactElement => {
   const {
@@ -30,6 +32,9 @@ export const BarChartYAxis: FC<BarChartYAxisProps> = ({
     coordinates.x1,
     ajustedText
   );
+  const formattedTickValues = tickText
+    ? TickDataUtils.formatTicksValues(tickValues, valueFormatter)
+    : undefined;
 
   return (
     <YAxis
@@ -44,7 +49,7 @@ export const BarChartYAxis: FC<BarChartYAxisProps> = ({
         x2: Number(context.canvasWidth) - context.extraSpaceRightX,
       }}
       tickText={{ ...tickText, x: xTickText }}
-      tickValues={tickText ? tickValues : undefined}
+      tickValues={formattedTickValues}
     />
   );
 };

src/charts/barChart/fragments/barChartYAxis.tsx

@@ -12,10 +12,7 @@ import { AXIS_WITH_HORIZONTAL_BARS } from './templates/axisWithHorizontalBars';
 import { AXIS_WITH_VERTICAL_BARS } from './templates/axisWithVericalBars';
 import { COMPARATIVE_DATA, MIXED_DATA } from './templates/data';
 import { BarChartWithErrorHandlingWithHooks } from './templates/withErrorHandling';
-import {
-  BarChartWithTooltip,
-  BarChartHorizontalWithTooltip,
-} from './templates/withTooltip';
+import { BarChartHorizontalWithTooltip, BarChartWithTooltip } from './templates/withTooltip';
 
 const meta = {
   argTypes: argtypes(),
@@ -272,8 +269,8 @@ export const WithTooltipHorizontal: Story = {
             text={[
               <div key="tooltip-horizontal-explanation">
                 <p>
-                  This example shows a <strong>horizontal bar chart</strong> with a fixed info
-                  panel that displays details about the hovered bar.
+                  This example shows a <strong>horizontal bar chart</strong> with a fixed info panel
+                  that displays details about the hovered bar.
                 </p>
                 <p>
                   Instead of a floating tooltip, this pattern uses a persistent panel that updates

src/charts/barChart/stories/barChart.stories.tsx

@@ -181,6 +181,26 @@ export const xAxisArgTypes = (): ArgTypes<BarChartXAxisProps> => {
       },
     },
 
+    valueFormatter: {
+      control: {
+        labels: {
+          currency: 'Currency ($)',
+          custom: 'Custom Format [val]',
+          millions: 'Millions (M)',
+          none: 'None (no formatting)',
+          percentage: 'Percentage (%)',
+          thousands: 'Thousands (K)',
+        },
+        type: 'select',
+      },
+      description: 'Select a formatting style for tick labels in this story.',
+      options: ['none', 'currency', 'percentage', 'thousands', 'millions', 'custom'],
+      table: {
+        category: CATEGORY_CONTROL.DATA,
+        type: { summary: 'ValueFormatter | undefined' },
+      },
+    },
+
     transform: {
       control: { type: 'text' },
       description: 'SVG transform attribute for positioning and scaling.',