fix(charts): allow formatting y/x-axis ticks w/o changing measure formatter (#3803)

Fixes #3802

Author: Lukas742

packages/charts/package.json

@@ -23,8 +23,8 @@
     "recharts": "2.1.16"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "^1.1.0",
-    "@ui5/webcomponents-react-base": "^1.1.0",
+    "@ui5/webcomponents-react": "workspace:^1.1.0",
+    "@ui5/webcomponents-react-base": "workspace:^1.1.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-jss": "^10.9.0"
   },

packages/charts/src/interfaces/ICartesianChartConfig.ts

@@ -58,23 +58,23 @@ export interface ICartesianChartConfig {
    *
    * __Note:__ It is possible to overwrite internally used props. Please use with caution!
    */
-  yAxisConfig?: YAxisProps;
+  yAxisConfig?: Omit<YAxisProps, 'mirror'>;
   /**
    * Defines possible configurations for the `XAxis`.
    *
    * __Note:__ It is possible to overwrite internally used props. Please use with caution!
    */
-  xAxisConfig?: XAxisProps;
+  xAxisConfig?: Omit<XAxisProps, 'mirror'>;
   /**
    * Defines possible configurations for the second `YAxis`.
    *
    * __Note:__ It is possible to overwrite internally used props. Please use with caution!
    */
-  secondYAxisConfig?: YAxisProps;
+  secondYAxisConfig?: Omit<YAxisProps, 'mirror'>;
   /**
    * Defines possible configurations for the second `YAxis`.
    *
    * __Note:__ It is possible to overwrite internally used props. Please use with caution!
    */
-  secondXAxisConfig?: XAxisProps;
+  secondXAxisConfig?: Omit<XAxisProps, 'mirror'>;
 }

packages/charts/src/internal/XAxisTicks.tsx

@@ -13,15 +13,17 @@ interface XAxisTicksProps {
   secondYAxisConfig?: {
     color: string;
   };
+  tickFormatter?: (value: any, index: number) => string;
+  index?: number;
 }
 
 export const XAxisTicks = (props: XAxisTicksProps) => {
-  const { x, y, payload, config, visibleTicksCount, width, secondYAxisConfig } = props;
+  const { x, y, payload, config, visibleTicksCount, width, secondYAxisConfig, tickFormatter, index } = props;
 
   const bandWidth = width / visibleTicksCount;
   const shouldRotate = bandWidth <= 100;
 
-  const formattedValue = config.formatter(payload.value);
+  const formattedValue = tickFormatter?.(payload.value, index) ?? config.formatter(payload.value);
   let textToDisplay = formattedValue;
   if (shouldRotate) {
     textToDisplay = truncateLongLabel(formattedValue, 11);

packages/charts/src/internal/YAxisTicks.tsx

@@ -12,12 +12,14 @@ interface YAxisTicksProps {
   secondYAxisConfig?: {
     color: string;
   };
+  tickFormatter?: (value: any, index: number) => string;
+  index?: number;
 }
 
 export const YAxisTicks = (props: YAxisTicksProps) => {
-  const { x, y, payload, config, secondYAxisConfig } = props;
+  const { x, y, payload, config, secondYAxisConfig, tickFormatter, index } = props;
 
-  const formattedValue = config.formatter(payload.value);
+  const formattedValue = tickFormatter?.(payload.value, index) ?? config.formatter(payload.value);
   let textToDisplay = formattedValue;
   if (getTextWidth(formattedValue) > defaultMaxYAxisWidth) {
     for (let i = `${formattedValue}`.length; i > 0; i--) {

packages/main/package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "3.0.0-beta.18",
-    "@ui5/webcomponents-react-base": "^1.6.0",
+    "@ui5/webcomponents-react-base": "workspace:^",
     "clsx": "1.2.1",
     "react-jss": "^10.9.0",
     "react-table": "7.8.0"

yarn.lock

@@ -6342,7 +6342,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ui5/webcomponents-react-base@^1.5.0, @ui5/webcomponents-react-base@workspace:packages/base":
+"@ui5/webcomponents-react-base@workspace:^, @ui5/webcomponents-react-base@workspace:packages/base":
   version: 0.0.0-use.local
   resolution: "@ui5/webcomponents-react-base@workspace:packages/base"
   peerDependencies:
@@ -6367,8 +6367,8 @@ __metadata:
     react-content-loader: 6.2.0
     recharts: 2.1.16
   peerDependencies:
-    "@ui5/webcomponents-react": ^1.1.0
-    "@ui5/webcomponents-react-base": ^1.1.0
+    "@ui5/webcomponents-react": "workspace:^1.1.0"
+    "@ui5/webcomponents-react-base": "workspace:^1.1.0"
     react: ^16.14.0 || ^17.0.0 || ^18.0.0
     react-jss: ^10.9.0
   languageName: unknown
@@ -6379,7 +6379,7 @@ __metadata:
   resolution: "@ui5/webcomponents-react@workspace:packages/main"
   dependencies:
     "@tanstack/react-virtual": 3.0.0-beta.18
-    "@ui5/webcomponents-react-base": ^1.5.0
+    "@ui5/webcomponents-react-base": "workspace:^"
     clsx: 1.2.1
     react-jss: ^10.9.0
     react-table: 7.8.0