fix(Charts - New): make secondary dimension configurable (#395)

SAP · Mar 31, 2020 · 0a57b51 · 0a57b51
1 parent 8d34535
commit 0a57b51
Show file tree

Hide file tree

Showing 13 changed files with 189 additions and 28 deletions.
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -33,6 +33,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
     color,
     loading,
     labelKey = 'name',
+    secondaryDimensionKey,
     dataKeys,
     width = '100%',
     height = '500px',
@@ -76,7 +77,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
 
   const chartRef = useConsolidatedRef<any>(ref);
 
-  const currentDataKeys = useResolveDataKeys(dataKeys, labelKey, dataset);
+  const currentDataKeys = useResolveDataKeys(dataKeys, labelKey, dataset, secondaryDimensionKey);
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
 
@@ -121,8 +122,6 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
   const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
   const SecondaryDimensionLabel = useSecondaryDimensionLabel(true, yAxisFormatter);
 
-  const secondaryDimension = dataset && dataset[0].hasOwnProperty('dimension');
-
   return (
     <ChartContainer
       dataset={dataset}
@@ -153,7 +152,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
           interval={0}
           yAxisId={0}
         />
-        {secondaryDimension && (
+        {secondaryDimensionKey && (
           <YAxis
             interval={0}
             type={'category'}

diff --git a/packages/charts/src/components/BarChart/BarRechart.stories.tsx b/packages/charts/src/components/BarChart/BarRechart.stories.tsx
@@ -139,7 +139,8 @@ export const withSecondardDimension = () => (
     onDataPointClick={action('onDataPointClick')}
     dataset={secondaryDimensionDataSet}
     labelKey={'name'}
-    color={'red'}
+    secondaryDimensionKey={'dimension'}
+    color={'lightblue'}
     width={text('width', '95%')}
     height={text('height', '70vh')}
     chartConfig={{ dataLabel: true, barSize: 20 }}

diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -33,6 +33,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
     color,
     loading,
     labelKey = 'name',
+    secondaryDimensionKey,
     width = '100%',
     height = '300px',
     dataset,
@@ -83,7 +84,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
 
   const chartRef = useConsolidatedRef<any>(ref);
 
-  const currentDataKeys = useResolveDataKeys(dataKeys, labelKey, dataset);
+  const currentDataKeys = useResolveDataKeys(dataKeys, labelKey, dataset, secondaryDimensionKey);
 
   const colorSecondY = useMemo(
     () => (chartConfig.secondYAxis ? currentDataKeys.findIndex((key) => key === chartConfig.secondYAxis.dataKey) : 0),
@@ -122,11 +123,16 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
 
   const SecondaryDimensionLabel = useSecondaryDimensionLabel();
 
-  const secondaryDimension = dataset && dataset[0].hasOwnProperty('dimension');
+  const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
 
-  const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit, secondaryDimension);
-
-  const marginChart = useChartMargin(dataset, labelKey, yAxisFormatter, chartConfig.margin, false, secondaryDimension);
+  const marginChart = useChartMargin(
+    dataset,
+    labelKey,
+    yAxisFormatter,
+    chartConfig.margin,
+    false,
+    secondaryDimensionKey
+  );
 
   return (
     <ChartContainer
@@ -148,7 +154,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
           stroke={chartConfig.gridStroke ?? ThemingParameters.sapList_BorderColor}
         />
         {(chartConfig.xAxisVisible ?? true) && <XAxis interval={0} tick={XAxisLabel} dataKey={labelKey} xAxisId={0} />}
-        {secondaryDimension && (
+        {secondaryDimensionKey && (
           <XAxis
             interval={0}
             dataKey={'dimension'}

diff --git a/packages/charts/src/components/ColumnChart/ColumnRechart.stories.tsx b/packages/charts/src/components/ColumnChart/ColumnRechart.stories.tsx
@@ -41,6 +41,7 @@ export const withSecondaryDimension = () => (
   <ColumnChart
     onDataPointClick={action('onDataPointClick')}
     dataset={secondaryDimensionDataSet}
+    secondaryDimensionKey={'dimension'}
     color={'red'}
     width={'100%'}
     height={'50vh'}

diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx b/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
@@ -1,7 +1,11 @@
 import { action } from '@storybook/addon-actions';
 import { ComposedChart } from '@ui5/webcomponents-react-charts/lib/next/ComposedChart';
 import React from 'react';
-import { complexDataSet } from '../../resources/DemoProps';
+import {
+  complexDataSet,
+  secondaryDimensionComposedDataSet,
+  secondaryDimensionDataSet
+} from '../../resources/DemoProps';
 
 export const renderComposedChart = () => (
   <ComposedChart
@@ -31,6 +35,35 @@ renderComposedChart.story = {
   name: 'Default'
 };
 
+export const withSecondaryDimension = () => (
+  <ComposedChart
+    width={'95%'}
+    height={'500px'}
+    secondaryDimensionKey={'dimension'}
+    dataset={secondaryDimensionComposedDataSet}
+    onLegendClick={action('onLegendClick')}
+    onDataPointClick={action('onDataPointClick')}
+    elements={[
+      {
+        type: 'bar',
+        accessor: 'sessions'
+      },
+      {
+        type: 'area',
+        accessor: 'users'
+      },
+      {
+        type: 'line',
+        accessor: 'volume'
+      }
+    ]}
+  />
+);
+
+withSecondaryDimension.story = {
+  name: 'With secondary dimension'
+};
+
 export const renderComposedChartPlaceholder = () => (
   <ComposedChart
     width={'30%'}

diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
@@ -67,6 +67,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
     loading,
     dataset,
     labelKey = 'name',
+    secondaryDimensionKey,
     onDataPointClick,
     noLegend = false,
     xAxisFormatter = (el) => el,
@@ -173,9 +174,14 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
   const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
   const SecondaryDimensionLabel = useSecondaryDimensionLabel();
 
-  const secondaryDimension = dataset && dataset[0].hasOwnProperty('dimension');
-
-  const marginChart = useChartMargin(dataset, yAxisFormatter, labelKey, chartConfig.margin);
+  const marginChart = useChartMargin(
+    dataset,
+    yAxisFormatter,
+    labelKey,
+    chartConfig.margin,
+    false,
+    secondaryDimensionKey
+  );
 
   return (
     <ChartContainer
@@ -205,10 +211,10 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
             xAxisId={0}
           />
         )}
-        {secondaryDimension && (
+        {secondaryDimensionKey && (
           <XAxis
             interval={0}
-            dataKey={'dimension'}
+            dataKey={secondaryDimensionKey}
             tickLine={false}
             tick={SecondaryDimensionLabel}
             axisLine={false}

diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -33,6 +33,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
     color,
     loading,
     labelKey = 'name',
+    secondaryDimensionKey,
     width = '100%',
     height = '500px',
     dataset,
@@ -79,7 +80,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
 
   const chartRef = useConsolidatedRef<any>(ref);
 
-  const currentDataKeys = useResolveDataKeys(dataKeys, labelKey, dataset);
+  const currentDataKeys = useResolveDataKeys(dataKeys, labelKey, dataset, secondaryDimensionKey);
 
   const colorSecondY = useMemo(
     () => (chartConfig.secondYAxis ? currentDataKeys.findIndex((key) => key === chartConfig.secondYAxis.dataKey) : 0),
@@ -109,9 +110,14 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
   const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
   const SecondaryDimensionLabel = useSecondaryDimensionLabel();
 
-  const secondaryDimension = dataset && dataset[0].hasOwnProperty('dimension');
-
-  const marginChart = useChartMargin(dataset, yAxisFormatter, labelKey, chartConfig.margin);
+  const marginChart = useChartMargin(
+    dataset,
+    yAxisFormatter,
+    labelKey,
+    chartConfig.margin,
+    false,
+    secondaryDimensionKey
+  );
 
   return (
     <ChartContainer
@@ -133,10 +139,10 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
           stroke={chartConfig.gridStroke ?? ThemingParameters.sapList_BorderColor}
         />
         {(chartConfig.xAxisVisible ?? true) && <XAxis dataKey={labelKey} xAxisId={0} interval={0} tick={XAxisLabel} />}
-        {secondaryDimension && (
+        {secondaryDimensionKey && (
           <XAxis
             interval={0}
-            dataKey={'dimension'}
+            dataKey={secondaryDimensionKey}
             tickLine={false}
             tick={SecondaryDimensionLabel}
             axisLine={false}

diff --git a/packages/charts/src/components/LineChart/LineRechart.stories.tsx b/packages/charts/src/components/LineChart/LineRechart.stories.tsx
@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { LineChart } from '@ui5/webcomponents-react-charts/lib/next/LineChart';
 import React from 'react';
-import { complexDataSet, simpleDataSet } from '../../resources/DemoProps';
+import { complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
 
 export default {
   title: 'Charts - Unstable /  LineChart',
@@ -45,6 +45,27 @@ renderStoryWithCustomColor.story = {
   name: 'With custom color'
 };
 
+export const withSecondaryDimension = () => (
+  <LineChart
+    onDataPointClick={action('onDataPointClick')}
+    labelKey={'name'}
+    dataset={secondaryDimensionDataSet}
+    secondaryDimensionKey={'dimension'}
+    color={'red'}
+    width={'95%'}
+    height={'60vh'}
+    chartConfig={{
+      dataLabel: true,
+      strokeWidth: 2,
+      strokeOpacity: 0.5
+    }}
+  />
+);
+
+withSecondaryDimension.story = {
+  name: 'With secondary dimension'
+};
+
 export const renderLabelStory = () => {
   return (
     <LineChart

diff --git a/packages/charts/src/hooks/useChartMargin.ts b/packages/charts/src/hooks/useChartMargin.ts
@@ -16,6 +16,6 @@ export const useChartMargin = (dataset, formatter, labelKey, margin, bar?, secon
       right: margin?.right ?? 30,
       top: margin?.top ?? 40,
       bottom: margin?.bottom ?? secondaryDimension ? 100 : 30,
-      left: margin?.left ?? marginLeft / 2
+      left: margin?.left ?? bar ? marginLeft / 2 : secondaryDimension ? 20 : 0
     };
   }, [dataset, labelKey, margin]);
diff --git a/packages/charts/src/hooks/useResolveDataKeys.ts b/packages/charts/src/hooks/useResolveDataKeys.ts
@@ -1,13 +1,13 @@
 import { useMemo } from 'react';
 
-export const useResolveDataKeys = (dataKeys, labelKey, dataset): string[] => {
+export const useResolveDataKeys = (dataKeys, labelKey, dataset, secondaryDimensionKey): string[] => {
   return useMemo(() => {
     if (dataKeys) {
       // manually provided, let the user decide
       return dataKeys;
     }
     if (dataset && dataset[0]) {
-      return Object.keys(dataset[0]).filter((key) => key !== labelKey && key !== 'dimension');
+      return Object.keys(dataset[0]).filter((key) => key !== labelKey && key !== secondaryDimensionKey);
     }
     return [];
   }, [dataKeys, labelKey, dataset]);

diff --git a/packages/charts/src/interfaces/RechartBaseProps.ts b/packages/charts/src/interfaces/RechartBaseProps.ts
@@ -4,6 +4,7 @@ import { ChartContainerProps } from './ChartContainerProps';
 
 export interface RechartBaseProps extends ChartContainerProps {
   labelKey?: string;
+  secondaryDimensionKey?: string;
   dataKeys?: string[];
   noLegend?: boolean;
   onDataPointClick?: (event: CustomEvent) => void;

diff --git a/packages/charts/src/internal/CustomElements.tsx b/packages/charts/src/internal/CustomElements.tsx
@@ -10,7 +10,7 @@ export const XAxisTicks = (props, formatter, unit = '', rotate) => {
     ? formatter(payload.value).length > 10
       ? `${formatter(payload.value).slice(0, 8)}...`
       : formatter(payload.value)
-    : payload.value;
+    : formatter(payload.value);
   return (
     <g transform={`translate(${x},${y + 10})`}>
       <text