From fecef0dcbed3c91187d03e95005cbdf6005aecf7 Mon Sep 17 00:00:00 2001 From: kleinju1017 Date: Thu, 19 Mar 2020 15:14:11 +0100 Subject: [PATCH] fix(ChartContainer - New): data handling (#363) --- packages/charts/src/components/BarChart/BarChart.tsx | 6 +++--- .../charts/src/components/ColumnChart/ColumnChart.tsx | 8 ++++---- packages/charts/src/components/ComposedChart/index.tsx | 8 ++++---- packages/charts/src/components/LineChart/LineChart.tsx | 8 ++++---- packages/charts/src/components/PieChart/PieChart.tsx | 8 +------- packages/charts/src/hooks/useLabelElements.ts | 8 ++++---- packages/charts/src/internal/ChartContainer.tsx | 2 +- packages/charts/src/internal/CustomElements.tsx | 6 ++++-- 8 files changed, 25 insertions(+), 29 deletions(-) diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx index 7c4ba647dc6..dda9a8b55e2 100644 --- 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 = forwardRef((props: BarChartProps, ref: Ref = forwardRef((props: BarChartProps, ref: Ref = 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 = forwardRef((props: ColumnChartProps, r false ); - const XAxisLabel = useXAxisLabel(xAxisFormatter, chartConfig.xAxisUnit); + const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit); return ( = 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 = forwardRef((props: ComposedChartPr defaults.stackId ); - const XAxisLabel = useXAxisLabel(xAxisFormatter, chartConfig.xAxisUnit); + const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit); return ( = 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 = 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 ( = forwardRef((props: PieChartProps, ref: Ref { 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 index e3ae5861b94..7f515da8405 100644 --- a/packages/charts/src/internal/ChartContainer.tsx +++ b/packages/charts/src/internal/ChartContainer.tsx @@ -44,7 +44,7 @@ const ChartContainer: FC = forwardRef((props: ContainerProps, re return (
- {dataset ? ( + {dataset?.length > 0 ? ( <> {loading && dataset.length > 0 && } {dataset.length > 0 && {children}} diff --git a/packages/charts/src/internal/CustomElements.tsx b/packages/charts/src/internal/CustomElements.tsx index 5f330ffb9ac..ef9663e0cc4 100644 --- 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 ( @@ -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' });