fix(ChartContainer - New): data handling (#363)

SAP · Mar 19, 2020 · fecef0d · fecef0d
1 parent d21bac7
commit fecef0d
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 29 deletions.
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -19,7 +19,7 @@ import {
   YAxis
 } from 'recharts';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
-import { useDataLabel, useXAxisLabel } from '../../hooks/useLabelElements';
+import { useDataLabel, useAxisLabel } from '../../hooks/useLabelElements';
 
 type BarChartProps = RechartBaseProps;
 
@@ -48,7 +48,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
       xAxisVisible: true,
       xAxisUnit: '',
       yAxisUnit: '',
-      gridStroke: ThemingParameters.sapList_TableFooterBorder,
+      gridStroke: ThemingParameters.sapList_BorderColor,
       gridHorizontal: true,
       gridVertical: false,
       legendPosition: 'bottom',
@@ -105,7 +105,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
     true
   );
 
-  const XAxisLabel = useXAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
+  const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
 
   return (
     <ChartContainer

diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -19,7 +19,7 @@ import {
   YAxis
 } from 'recharts';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
-import { useDataLabel, useXAxisLabel } from '../../hooks/useLabelElements';
+import { useDataLabel, useAxisLabel } from '../../hooks/useLabelElements';
 
 type ColumnChartProps = RechartBaseProps;
 
@@ -48,10 +48,10 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
       xAxisVisible: true,
       xAxisUnit: '',
       yAxisUnit: '',
-      gridStroke: ThemingParameters.sapList_TableFooterBorder,
+      gridStroke: ThemingParameters.sapList_BorderColor,
       gridHorizontal: true,
       gridVertical: false,
-      yAxisColor: ThemingParameters.sapNeutralBorderColor,
+      yAxisColor: ThemingParameters.sapList_BorderColor,
       legendPosition: 'bottom',
       barSize: 15,
       barGap: 3,
@@ -118,7 +118,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
     false
   );
 
-  const XAxisLabel = useXAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
+  const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
 
   return (
     <ChartContainer

diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
@@ -19,7 +19,7 @@ import {
   YAxis
 } from 'recharts';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
-import { useDataLabel, useXAxisLabel } from '../../hooks/useLabelElements';
+import { useDataLabel, useAxisLabel } from '../../hooks/useLabelElements';
 
 enum ChartTypes {
   line = Line,
@@ -87,11 +87,11 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
       yAxisUnit: '',
       yAxisVisible: false,
       xAxisVisible: true,
-      gridStroke: ThemingParameters.sapList_TableFooterBorder,
+      gridStroke: ThemingParameters.sapList_BorderColor,
       gridHorizontal: true,
       gridVertical: false,
       yAxisId: '',
-      yAxisColor: ThemingParameters.sapNeutralBorderColor,
+      yAxisColor: ThemingParameters.sapList_BorderColor,
       legendPosition: 'bottom',
       zoomingTool: false,
       dataLabel: false,
@@ -168,7 +168,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
     defaults.stackId
   );
 
-  const XAxisLabel = useXAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
+  const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
 
   return (
     <ChartContainer

diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -19,7 +19,7 @@ import {
   YAxis
 } from 'recharts';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
-import { useDataLabel, useXAxisLabel } from '../../hooks/useLabelElements';
+import { useDataLabel, useAxisLabel } from '../../hooks/useLabelElements';
 
 type LineChartProps = RechartBaseProps;
 
@@ -46,10 +46,10 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
     chartConfig = {
       yAxisVisible: false,
       xAxisVisible: true,
-      gridStroke: ThemingParameters.sapList_TableFooterBorder,
+      gridStroke: ThemingParameters.sapList_BorderColor,
       gridHorizontal: true,
       gridVertical: false,
-      yAxisColor: ThemingParameters.sapNeutralBorderColor,
+      yAxisColor: ThemingParameters.sapList_BorderColor,
       legendPosition: 'bottom',
       strokeWidth: 1,
       zoomingTool: false,
@@ -104,7 +104,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
 
   const LineDataLabel = useDataLabel(chartConfig.dataLabel, dataLabelCustomElement, dataLabelFormatter);
 
-  const XAxisLabel = useXAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
+  const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
 
   return (
     <ChartContainer

diff --git a/packages/charts/src/components/PieChart/PieChart.tsx b/packages/charts/src/components/PieChart/PieChart.tsx
@@ -75,13 +75,7 @@ const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<a
     [onDataPointClick]
   );
 
-  const PieDataLabel = usePieDataLabel(
-    chartConfig.dataLabel,
-    dataLabelCustomElement,
-    dataLabelFormatter,
-    chartConfig.stacked,
-    true
-  );
+  const PieDataLabel = usePieDataLabel(chartConfig.dataLabel, dataLabelCustomElement, dataLabelFormatter);
 
   return (
     <ChartContainer

diff --git a/packages/charts/src/hooks/useLabelElements.ts b/packages/charts/src/hooks/useLabelElements.ts
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { JSXElementConstructor, useCallback, useMemo } from 'react';
 import { DataLabel } from '../internal/CustomElements';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { renderAxisTicks } from '../util/Utils';
@@ -20,12 +20,12 @@ export const usePieDataLabel = (dataLabel, dataLabelCustomElement, dataLabelForm
   useMemo(() => {
     return dataLabel
       ? dataLabelCustomElement
-        ? (props) => DataLabel(props, dataLabelFormatter, dataLabelCustomElement)
-        : (props) => dataLabelFormatter(props.value)
+        ? (props): SVGGElement => DataLabel(props, dataLabelFormatter, dataLabelCustomElement)
+        : (props): number | string => dataLabelFormatter(props.value)
       : false;
   }, [dataLabelFormatter, dataLabelCustomElement, dataLabel]);
 
-export const useXAxisLabel = (xAxisFormatter, xAxisUnit) => {
+export const useAxisLabel = (xAxisFormatter, xAxisUnit) => {
   return useCallback(
     (labelProps) => {
       return renderAxisTicks(labelProps, xAxisFormatter, xAxisUnit);

diff --git a/packages/charts/src/internal/ChartContainer.tsx b/packages/charts/src/internal/ChartContainer.tsx
@@ -44,7 +44,7 @@ const ChartContainer: FC<ContainerProps> = forwardRef((props: ContainerProps, re
 
   return (
     <div ref={ref} style={internalStyles} className={className} title={tooltip} slot={slot}>
-      {dataset ? (
+      {dataset?.length > 0 ? (
         <>
           {loading && dataset.length > 0 && <Loader style={{ marginBottom: '1vh' }} />}
           {dataset.length > 0 && <ResponsiveContainer>{children}</ResponsiveContainer>}

diff --git a/packages/charts/src/internal/CustomElements.tsx b/packages/charts/src/internal/CustomElements.tsx
@@ -1,7 +1,9 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import React from 'react';
 
-export const AxisTicks = (props, formatter, unit = '', rotate) => {
+type properties = { x: number; y: number; payload: object };
+
+export const AxisTicks = (props: properties, formatter, unit = '', rotate) => {
   const { x, y, payload } = props;
   return (
     <g transform={`translate(${x},${y + 10})`}>
@@ -16,7 +18,7 @@ export const AxisTicks = (props, formatter, unit = '', rotate) => {
   );
 };
 
-export const DataLabel = (props, formatter, customElement) => {
+export const DataLabel = (props: properties, formatter, customElement) => {
   const { x, y, value } = props;
   const customElementClone =
     customElement && React.cloneElement(customElement, { children: formatter(value), textAnchor: 'middle' });