Scatter chart: update stories and tests

kleinju1017 · kleinju1017 · commit a75699911451 · 2020-06-18T14:11:58.000+02:00
diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -158,7 +158,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
   const [yAxisWidth, legendPosition] = useLongestYAxisLabel(dataset, measures);
   const marginChart = useChartMargin(chartConfig.margin, chartConfig.zoomingTool);
   const xAxisHeights = useObserveXAxisHeights(chartRef, props.dimensions.length);
-
+  console.log(dataset);
   return (
     <ChartContainer
       dataset={dataset}
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.stories.tsx b/packages/charts/src/components/ScatterChart/ScatterChart.stories.tsx
@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
 import React from 'react';
 import { ScatterChart } from '../../lib/ScatterChart';
-import { bigDataSet, complexDataSet, scatterComplexDataSet } from '../../resources/DemoProps';
+import { bigDataSet, complexDataSet, scatterColorDataSet, scatterComplexDataSet } from '../../resources/DemoProps';
 
 export default {
   title: 'Charts /  ScatterChart',
@@ -22,14 +22,11 @@ export const renderStory = () => (
       {
         accessor: 'users',
         label: 'Users',
-        formatter: (e) => e + ' Users',
         axis: 'x'
       },
       {
         accessor: 'sessions',
-        label: 'Active Sessions',
-        formatter: (e) => e + ' Sessions',
-        hideDataLabel: true,
+        label: 'Sessions',
         axis: 'y'
       },
       {
@@ -50,67 +47,31 @@ export const renderStoryWithCustomColor = () => (
     noLegend={boolean('noLegend', false)}
     noAnimation={boolean('noAnimation', false)}
     onDataPointClick={action('onDataPointClick')}
-    dimensions={{ accessor: 'name' }}
-    measures={[{ accessor: 'users', color: 'red' }]}
-    dataset={scatterComplexDataSet}
-    style={{ width: '95%', height: '40vh' }}
+    dataset={scatterColorDataSet}
+    style={{ width: '100%' }}
+    measures={[
+      {
+        accessor: 'users',
+        label: 'Users',
+        axis: 'x'
+      },
+      {
+        accessor: 'sessions',
+        label: 'Sessions',
+        axis: 'y'
+      },
+      {
+        accessor: 'volume',
+        axis: 'z'
+      }
+    ]}
   />
 );
 
 renderStoryWithCustomColor.story = {
   name: 'With custom color'
 };
 
-export const withSecondaryDimension = () => (
-  <ScatterChart
-    loading={boolean('loading', false)}
-    noLegend={boolean('noLegend', false)}
-    noAnimation={boolean('noAnimation', false)}
-    onDataPointClick={action('onDataPointClick')}
-    dimensions={[{ accessor: 'name' }, { accessor: 'dimension' }]}
-    measures={[{ accessor: 'users', color: 'red' }]}
-    dataset={secondaryDimensionDataSet}
-    style={{ width: '95%', height: '60vh' }}
-  />
-);
-
-withSecondaryDimension.story = {
-  name: 'With secondary dimension'
-};
-
-export const renderLabelStory = () => {
-  return (
-    <ScatterChart
-      loading={boolean('loading', false)}
-      noLegend={boolean('noLegend', false)}
-      noAnimation={boolean('noAnimation', false)}
-      onDataPointClick={action('onDataPointClick')}
-      onLegendClick={action('onLegendClick')}
-      dimensions={[{ accessor: 'name' }]}
-      measures={[
-        {
-          accessor: 'users'
-        },
-        {
-          accessor: 'sessions'
-        },
-        {
-          accessor: 'volume'
-        }
-      ]}
-      dataset={complexDataSet}
-      style={{ width: '95%', height: '40vh' }}
-      chartConfig={{
-        zoomingTool: true
-      }}
-    />
-  );
-};
-
-renderLabelStory.story = {
-  name: 'With data labels'
-};
-
 export const renderCustomDataLabelStory = () => {
   return (
     <ScatterChart
@@ -119,25 +80,27 @@ export const renderCustomDataLabelStory = () => {
       noAnimation={boolean('noAnimation', false)}
       onDataPointClick={action('onDataPointClick')}
       onLegendClick={action('onLegendClick')}
-      dataset={complexDataSet}
-      dimensions={[{ accessor: 'name', formatter: (element: string) => element.slice(0, 3) }]}
+      dataset={scatterComplexDataSet}
+      style={{ width: '100%' }}
       measures={[
         {
           accessor: 'users',
-          formatter: (element: number) => `${element / 10}`,
-          label: 'number of users'
+          label: 'Users',
+          formatter: (e) => e + ' Users',
+          axis: 'x'
         },
         {
-          accessor: 'sessions'
+          accessor: 'sessions',
+          label: 'Active Sessions',
+          formatter: (e) => e + ' Sessions',
+          hideDataLabel: true,
+          axis: 'y'
         },
         {
-          accessor: 'volume'
+          accessor: 'volume',
+          axis: 'z'
         }
       ]}
-      style={{ width: '95%', height: '40vh' }}
-      chartConfig={{
-        zoomingTool: true
-      }}
     />
   );
 };
@@ -146,45 +109,8 @@ renderCustomDataLabelStory.story = {
   name: 'With formatter'
 };
 
-export const loadingPlaceholder = () => <LineChart style={{ width: '100%' }} dimensions={[]} measures={[]} />;
+export const loadingPlaceholder = () => <ScatterChart style={{ width: '100%' }} measures={[]} />;
 
 loadingPlaceholder.story = {
   name: 'Loading placeholder'
 };
-
-export const withReferenceLineStory = () => {
-  return (
-    <ScatterChart
-      loading={boolean('loading', false)}
-      noLegend={boolean('noLegend', false)}
-      noAnimation={boolean('noAnimation', false)}
-      onDataPointClick={action('onDataPointClick')}
-      onLegendClick={action('onLegendClick')}
-      dataset={bigDataSet}
-      dimensions={[{ accessor: 'name' }]}
-      measures={[
-        {
-          accessor: 'users'
-        },
-        {
-          accessor: 'sessions'
-        },
-        {
-          accessor: 'volume'
-        }
-      ]}
-      style={{ width: '95%', height: '40vh' }}
-      chartConfig={{
-        referenceLine: {
-          color: 'red',
-          label: 'MAX',
-          value: 650
-        }
-      }}
-    />
-  );
-};
-
-withReferenceLineStory.story = {
-  name: 'With reference line'
-};
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.test.tsx b/packages/charts/src/components/ScatterChart/ScatterChart.test.tsx
@@ -2,41 +2,33 @@ import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
 import { mount } from 'enzyme';
 import * as React from 'react';
-import { complexDataSet } from '../../resources/DemoProps';
-import { LineChart } from './LineChart';
+import { scatterComplexDataSet } from '../../resources/DemoProps';
+import { ScatterChart } from './ScatterChart';
 
 describe('LineChart', () => {
   test('Renders with data', () => {
     expect(
       mount(
-        <LineChart
+        <ScatterChart
           loading={boolean('loading', false)}
           onDataPointClick={action('onDataPointClick')}
           onLegendClick={action('onLegendClick')}
-          dataset={complexDataSet}
+          dataset={scatterComplexDataSet}
           style={{ width: '100%' }}
-          dimensions={[
-            {
-              accessor: 'name',
-              formatter: (d) => `${d} 2019`,
-              interval: 0
-            }
-          ]}
           measures={[
             {
               accessor: 'users',
               label: 'Users',
-              formatter: (val) => val.toLocaleString()
+              axis: 'x'
             },
             {
               accessor: 'sessions',
-              label: 'Active Sessions',
-              formatter: (val) => `${val} sessions`,
-              hideDataLabel: true
+              label: 'Sessions',
+              axis: 'y'
             },
             {
               accessor: 'volume',
-              label: 'Vol.'
+              axis: 'z'
             }
           ]}
         />
@@ -45,7 +37,7 @@ describe('LineChart', () => {
   });
 
   test('loading placeholder', () => {
-    const wrapper = mount(<LineChart style={{ width: '30%' }} dimensions={[]} measures={[]} />);
+    const wrapper = mount(<ScatterChart style={{ width: '30%' }} measures={[]} />);
     expect(wrapper.render()).toMatchSnapshot();
   });
 });
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.tsx b/packages/charts/src/components/ScatterChart/ScatterChart.tsx
@@ -6,7 +6,7 @@ import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxis
 import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
 import { LineChartPlaceholder } from '@ui5/webcomponents-react-charts/lib/LineChartPlaceholder';
 import { useLegendItemClick } from '@ui5/webcomponents-react-charts/lib/useLegendItemClick';
-import React, { FC, forwardRef, Ref, useCallback, useMemo } from 'react';
+import React, { CSSProperties, FC, forwardRef, Ref, useCallback, useMemo } from 'react';
 import {
   CartesianGrid,
   Legend,
@@ -48,7 +48,8 @@ interface MeasureConfig extends IChartMeasure {
 
 interface ScatterDataObject {
   label?: string;
-  data: any[];
+  data?: any[];
+  color?: CSSProperties['color'];
 }
 
 export interface ScatterChartProps extends IChartBaseProps {
@@ -71,7 +72,7 @@ export interface ScatterChartProps extends IChartBaseProps {
    * - `opacity`: line opacity, defaults to `1`
    *
    */
-  measures: MeasureConfig[];
+  measures?: MeasureConfig[];
 }
 
 const measureDefaults = {
@@ -142,11 +143,10 @@ const ScatterChart: FC<ScatterChartProps> = forwardRef((props: ScatterChartProps
   const zMeasure = measures.filter(({ axis }) => axis === 'z');
 
   const [yAxisWidth, legendPosition] = useLongestYAxisLabel(
-    dataset[0].data,
+    dataset?.[0].data,
     measures.filter(({ axis }) => axis === 'y')
   );
   const xAxisHeights = useObserveXAxisHeights(chartRef, 1);
-
   const marginChart = useChartMargin(chartConfig.margin, chartConfig.zoomingTool);
 
   return (
@@ -174,41 +174,42 @@ const ScatterChart: FC<ScatterChartProps> = forwardRef((props: ScatterChartProps
         {chartConfig.xAxisVisible && (
           <XAxis
             type={'number'}
-            key={xMeasure[0].accessor}
-            label={{ position: 'bottom', value: xMeasure[0].label }}
-            dataKey={xMeasure[0].accessor}
-            interval={xMeasure[0]?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
-            tick={<XAxisTicks config={xMeasure[0]} />}
+            key={xMeasure?.[0]?.accessor}
+            label={{ position: 'bottom', value: xMeasure?.[0]?.label }}
+            dataKey={xMeasure?.[0]?.accessor}
+            xAxisId={0}
+            interval={xMeasure?.[0]?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
+            tick={<XAxisTicks config={xMeasure?.[0]} />}
             padding={xAxisPadding}
             // height={xAxisHeights[0]}
           />
         )}
         <YAxis
-          label={yMeasure[0].label ? { position: 'top', value: yMeasure[0].label } : false}
+          label={yMeasure?.[0]?.label ? { position: 'top', value: yMeasure?.[0]?.label } : false}
           type={'number'}
-          name={yMeasure[0].accessor}
+          name={yMeasure?.[0]?.accessor}
           axisLine={chartConfig.yAxisVisible}
           tickLine={tickLineConfig}
-          key={yMeasure[0].accessor}
-          dataKey={yMeasure[0].accessor}
-          tickFormatter={yMeasure[0]?.formatter}
+          key={yMeasure?.[0]?.accessor}
+          dataKey={yMeasure?.[0]?.accessor}
+          tickFormatter={yMeasure?.[0]?.formatter}
           interval={0}
           tick={<YAxisTicks config={yMeasure[0]} />}
           width={yAxisWidth}
-          padding={yMeasure[0].label ? { top: 10 } : 0}
+          padding={yMeasure?.[0]?.label ? { top: 10 } : 0}
         />
         <ZAxis
-          name={zMeasure[0].accessor}
-          dataKey={zMeasure[0].accessor}
+          name={zMeasure?.[0]?.accessor}
+          dataKey={zMeasure?.[0]?.accessor}
           range={[0, 5000]}
-          key={zMeasure[0].accessor}
+          key={zMeasure?.[0]?.accessor}
         />
-        {dataset.map((dataSet, index) => {
+        {dataset?.map((dataSet, index) => {
           return (
             <Scatter
-              data={dataSet.data}
-              name={dataSet.label}
-              fill={`var(--sapChart_OrderedColor_${(index % 11) + 1})`}
+              data={dataSet?.data}
+              name={dataSet?.label}
+              fill={dataSet?.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
               isAnimationActive={noAnimation === false}
             />
           );
diff --git a/packages/charts/src/components/ScatterChart/__snapshots__/ScatterChart.test.tsx.snap b/packages/charts/src/components/ScatterChart/__snapshots__/ScatterChart.test.tsx.snap
diff --git a/packages/charts/src/resources/DemoProps.ts b/packages/charts/src/resources/DemoProps.ts
