fix(Charts - New): fix crash in label truncation if value is null or undefined (#476)

Author: MarcusNotheis

packages/charts/src/components/BarChart/index.tsx

@@ -11,7 +11,7 @@ import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend
 import { getCssVariableValue } from '../../themes/Utils';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
-import { getTextWidth } from '../../util/Utils';
+import { getTextWidth } from '@ui5/webcomponents-react-charts/lib/Utils';
 import { formatAxisCallback, formatDataLabel, formatTooltipLabel, useMergedConfig } from '../../util/utils_deprecated';
 import { BarChartPlaceholder } from './Placeholder';
 

packages/charts/src/components/ColumnChart/index.tsx

@@ -1,17 +1,17 @@
+import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme';
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
+import { getTextHeight, getTextWidth } from '@ui5/webcomponents-react-charts/lib/Utils';
 import { withChartContainer } from '@ui5/webcomponents-react-charts/lib/withChartContainer';
 import bestContrast from 'get-best-contrast-color';
 import React, { FC, forwardRef, Ref, useMemo } from 'react';
 import { Bar } from 'react-chartjs-2';
-import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme';
 import { DEFAULT_OPTIONS } from '../../config';
 import { ChartBaseProps } from '../../interfaces/ChartBaseProps';
 import { InternalProps } from '../../interfaces/InternalProps';
 import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend';
 import { getCssVariableValue } from '../../themes/Utils';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
-import { getTextHeight, getTextWidth } from '../../util/Utils';
 import { formatAxisCallback, formatDataLabel, formatTooltipLabel, useMergedConfig } from '../../util/utils_deprecated';
 import { ColumnChartPlaceholder } from './Placeholder';
 

packages/charts/src/hooks/useChartMargin.ts

@@ -1,6 +1,6 @@
+import { getTextWidth, truncateLongLabel } from '@ui5/webcomponents-react-charts/lib/Utils';
 import { useMemo } from 'react';
 import { getValueByDataKey } from 'recharts/lib/util/ChartUtils';
-import { getTextWidth, truncateLongLabel } from '../util/Utils';
 
 export const useChartMargin = (dataset: unknown[], elements, margin, isBar?, hasSecondaryDimension?, hasZoomingTool?) =>
   useMemo(() => {

packages/charts/src/internal/ChartDataLabel.tsx

@@ -1,7 +1,7 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import { getTextWidth } from '@ui5/webcomponents-react-charts/lib/Utils';
 import React, { FC } from 'react';
 import { IChartMeasure } from '../interfaces/IChartMeasure';
-import { getTextWidth } from '../util/Utils';
 import Label from './ChartLabel';
 
 interface CustomDataLabelProps {

packages/charts/src/internal/SecondaryDimensionXAxisTick.tsx

@@ -1,6 +1,6 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import { truncateLongLabel } from '@ui5/webcomponents-react-charts/lib/Utils';
 import React from 'react';
-import { truncateLongLabel } from '../util/Utils';
 
 let lastRenderedTickValue = '';
 export const SecondaryDimensionTicksXAxis = (props) => {

packages/charts/src/internal/SecondaryDimensionYAxisTick.tsx

@@ -1,6 +1,6 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import { truncateLongLabel } from '@ui5/webcomponents-react-charts/lib/Utils';
 import React from 'react';
-import { truncateLongLabel } from '../util/Utils';
 
 let lastRenderedTickValue = '';
 export const SecondaryDimensionTicksYAxis = (props) => {

packages/charts/src/internal/XAxisTicks.tsx

@@ -1,7 +1,7 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import { truncateLongLabel } from '@ui5/webcomponents-react-charts/lib/Utils';
 import React, { FC, RefObject } from 'react';
 import { IChartMeasure } from '../interfaces/IChartMeasure';
-import { truncateLongLabel } from '../util/Utils';
 import { SecondaryDimensionTicksXAxis } from './SecondaryDimensionXAxisTick';
 
 interface XAxisTicksProps {

packages/charts/src/internal/YAxisTicks.tsx

@@ -1,7 +1,7 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import { truncateLongLabel } from '@ui5/webcomponents-react-charts/lib/Utils';
 import React, { FC } from 'react';
 import { IChartMeasure } from '../interfaces/IChartMeasure';
-import { truncateLongLabel } from '../util/Utils';
 import { SecondaryDimensionTicksYAxis } from './SecondaryDimensionYAxisTick';
 
 interface YAxisTicksProps {

packages/charts/src/lib/Utils.ts

@@ -0,0 +1,3 @@
+import { getTextHeight, getTextWidth, truncateLongLabel } from '../util/Utils';
+
+export { truncateLongLabel, getTextHeight, getTextWidth };

packages/charts/src/util/Utils.ts

@@ -21,7 +21,7 @@ export const getTextHeight = (text = 'M', font = `normal 12pt "72","72full",Aria
 };
 
 export const truncateLongLabel = (value: string, length = 13) => {
-  if (value.length > length) {
+  if (value?.length > length) {
     return `${value.slice(0, length - 2)}...`;
   }
   return value;