simplify useChartMargin

SAP · Apr 28, 2020 · a1b6644 · a1b6644
1 parent 91440dd
commit a1b6644
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 47 deletions.
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -167,9 +167,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
 
   const marginChart = useChartMargin(
     dataset,
-    measures,
-    primaryDimension?.formatter ?? ((d) => d),
-    primaryDimensionAccessor,
+    dimensions,
     chartConfig.margin,
     true,
     dimensions.length > 1,

diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -172,8 +172,6 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
   const marginChart = useChartMargin(
     dataset,
     measures,
-    primaryDimension?.formatter ?? ((d) => d),
-    primaryDimensionAccessor,
     chartConfig.margin,
     false,
     dimensions.length > 1,

diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
@@ -219,9 +219,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
 
   const marginChart = useChartMargin(
     dataset,
-    measures,
-    primaryDimension?.formatter ?? ((d) => d),
-    primaryDimensionAccessor,
+    layout === 'vertical' ? dimensions : measures,
     chartConfig.margin,
     false,
     dimensions.length > 1,

diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -163,8 +163,6 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
   const marginChart = useChartMargin(
     dataset,
     measures,
-    primaryDimension?.formatter ?? ((d) => d),
-    primaryDimensionAccessor,
     chartConfig.margin,
     false,
     dimensions.length > 1,

diff --git a/packages/charts/src/hooks/useChartMargin.ts b/packages/charts/src/hooks/useChartMargin.ts
@@ -1,48 +1,27 @@
 import { useMemo } from 'react';
 import { getValueByDataKey } from 'recharts/lib/util/ChartUtils';
-import { getTextWidth } from '../util/Utils';
+import { getTextWidth, truncateLongLabel } from '../util/Utils';
 
-export const useChartMargin = (
-  dataset,
-  measures,
-  formatter,
-  labelKey,
-  margin,
-  isBar?,
-  hasSecondaryDimension?,
-  hasZoomingTool?
-) =>
+export const useChartMargin = (dataset: unknown[], elements, margin, isBar?, hasSecondaryDimension?, hasZoomingTool?) =>
   useMemo(() => {
     let marginLeft = 0;
-    if (dataset && typeof margin?.left !== 'number') {
-      if (isBar) {
-        marginLeft = Math.max(
-          ...dataset
-            .map((data) => formatter(getValueByDataKey(data, labelKey, '')).split(' '))
-            .flat()
-            .map(getTextWidth)
-        );
-      } else {
-        marginLeft = getTextWidth(
-          Math.max(
-            ...dataset.map((item) => {
-              return Math.max(...measures.map((measure) => item[measure.accessor]));
-            })
+    const primaryElement = elements[0];
+    if (dataset instanceof Array && primaryElement) {
+      marginLeft = Math.max(
+        ...dataset
+          .map((item) =>
+            elements.map((elementConfig) =>
+              truncateLongLabel(primaryElement.formatter(getValueByDataKey(item, elementConfig.accessor, '')))
+            )
           )
-        );
-      }
+          .flat()
+          .map(getTextWidth)
+      );
     }
     return {
       right: margin?.right ?? 60,
       top: margin?.top ?? hasZoomingTool ? 40 : 10,
       bottom: margin?.bottom ?? (!isBar && hasSecondaryDimension) ? 100 : 30,
-      left:
-        margin?.left ?? isBar
-          ? hasSecondaryDimension
-            ? marginLeft
-            : marginLeft / 2
-          : hasSecondaryDimension
-          ? marginLeft / 2
-          : marginLeft / 2
+      left: margin?.left ?? (isBar && hasSecondaryDimension) ? marginLeft : marginLeft / 2
     };
-  }, [dataset, labelKey, margin]);
+  }, [dataset, elements, margin, hasSecondaryDimension, hasZoomingTool]);
diff --git a/packages/charts/src/internal/YAxisTicks.tsx b/packages/charts/src/internal/YAxisTicks.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import { truncateLongLabel } from '../util/Utils';
 
 export const YAxisTicks = (props) => {
   const { x, y, payload, config } = props;
   const formattedValue = config.formatter(payload.value);
-  const tickValue = formattedValue.length > 10 ? `${formattedValue.slice(0, 13)}...` : formattedValue;
+  const tickValue = truncateLongLabel(formattedValue);
   return (
     <g transform={`translate(${x},${y + 3})`}>
       <text fill={ThemingParameters.sapContent_LabelColor} textAnchor={'end'}>

diff --git a/packages/charts/src/util/Utils.ts b/packages/charts/src/util/Utils.ts
@@ -67,3 +67,10 @@ export const getTextHeight = (text = 'M', font = `normal ${defaultFont.size}pt $
   const metrics = context.measureText(text); // should be around 90% accurate...
   return textHeight || (textHeight = metrics.width);
 };
+
+export const truncateLongLabel = (value: string, length = 13) => {
+  if (value.length > length) {
+    return `${value.slice(0, length)}...`;
+  }
+  return value;
+};