Scatter chart: new demo props, added layout

Author: kleinju1017

packages/charts/src/components/ScatterChart/ScatterChart.stories.tsx

@@ -2,7 +2,13 @@ import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
 import React from 'react';
 import { ScatterChart } from '../../lib/ScatterChart';
-import { bigDataSet, complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
+import {
+  bigDataSet,
+  complexDataSet,
+  scatterComplexDataSet,
+  secondaryDimensionDataSet,
+  simpleDataSet
+} from '../../resources/DemoProps';
 
 export default {
   title: 'Charts /  ScatterChart',
@@ -16,15 +22,12 @@ export const renderStory = () => (
     noAnimation={boolean('noAnimation', false)}
     onDataPointClick={action('onDataPointClick')}
     onLegendClick={action('onLegendClick')}
-    dataset={complexDataSet}
+    dataset={scatterComplexDataSet}
     style={{ width: '100%' }}
-    dimensions={[
-      {
-        accessor: 'name',
-        formatter: (d) => `${d} 2019`,
-        interval: 0
-      }
-    ]}
+    dimension={{
+      accessor: 'volume',
+      formatter: (e) => e + 'test'
+    }}
     measures={[
       {
         accessor: 'users',
@@ -34,12 +37,7 @@ export const renderStory = () => (
       {
         accessor: 'sessions',
         label: 'Active Sessions',
-        formatter: (val) => `${val} sessions`,
         hideDataLabel: true
-      },
-      {
-        accessor: 'volume',
-        label: 'Vol.'
       }
     ]}
   />
@@ -55,9 +53,9 @@ export const renderStoryWithCustomColor = () => (
     noLegend={boolean('noLegend', false)}
     noAnimation={boolean('noAnimation', false)}
     onDataPointClick={action('onDataPointClick')}
-    dimensions={[{ accessor: 'name' }]}
+    dimensions={{ accessor: 'name' }}
     measures={[{ accessor: 'users', color: 'red' }]}
-    dataset={simpleDataSet}
+    dataset={scatterComplexDataSet}
     style={{ width: '95%', height: '40vh' }}
   />
 );

packages/charts/src/components/ScatterChart/ScatterChart.tsx

@@ -18,7 +18,8 @@ import {
   Tooltip,
   XAxis,
   YAxis,
-  ZAxis
+  ZAxis,
+  Line
 } from 'recharts';
 import { useChartMargin } from '../../hooks/useChartMargin';
 import { useLongestYAxisLabel } from '../../hooks/useLongestYAxisLabel';
@@ -48,8 +49,9 @@ interface DimensionConfig extends IChartDimension {
   interval?: number;
 }
 
-export interface LineChartProps extends IChartBaseProps {
+export interface ScatterChartProps extends IChartBaseProps {
   dimension: DimensionConfig;
+  dataset?: Record<string, any>[][];
   /**
    * An array of config objects. Each object is defining one line in the chart.
    *
@@ -84,7 +86,7 @@ const measureDefaults = {
 /**
  * <code>import { LineChart } from '@ui5/webcomponents-react-charts/lib/LineChart';</code>
  */
-const ScatterChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Ref<any>) => {
+const ScatterChart: FC<ScatterChartProps> = forwardRef((props: ScatterChartProps, ref: Ref<any>) => {
   const {
     dataset,
     loading,
@@ -161,9 +163,9 @@ const ScatterChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref:
   const isBigDataSet = dataset?.length > 30 ?? false;
   const primaryDimensionAccessor = primaryDimension?.accessor;
 
-  const [yAxisWidth, legendPosition] = useLongestYAxisLabel(dataset, measures);
+  const [yAxisWidth, legendPosition] = useLongestYAxisLabel(dataset[0], measures);
   const marginChart = useChartMargin(chartConfig.margin, chartConfig.zoomingTool);
-  const xAxisHeights = useObserveXAxisHeights(chartRef, props.dimensions.length);
+  // const xAxisHeights = useObserveXAxisHeights(chartRef, props.dimensions.length);
 
   return (
     <ChartContainer
@@ -195,10 +197,7 @@ const ScatterChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref:
             dataKey={measures[0].accessor}
             interval={measures[0]?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
             tick={<XAxisTicks config={measures[0]} />}
-            // tickLine={index < 1}
-            // axisLine={index < 1}
             padding={xAxisPadding}
-            // allowDuplicatedCategory={index === 0}
           />
         )}
         <YAxis
@@ -213,15 +212,17 @@ const ScatterChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref:
           tick={<YAxisTicks config={measures[1]} />}
           width={yAxisWidth}
         />
-        <ZAxis
-          name={dimension.accessor}
-          dataKey={dimension.accessor}
-          axisLine={chartConfig.yAxisVisible}
-          tickLine={tickLineConfig}
-          key={dimension.accessor}
-          tickFormatter={dimension?.formatter}
-        />
-        <Scatter data={dataset} name={dimension.accessor} />
+        <ZAxis name={dimension.accessor} dataKey={dimension.accessor} range={[0, 5000]} key={dimension.accessor} />
+        {dataset.map((data, index) => {
+          return (
+            <Scatter
+              data={data}
+              name={dimension.accessor}
+              fill={`var(--sapChart_OrderedColor_${(index % 11) + 1})`}
+              isAnimationActive={noAnimation === false}
+            />
+          );
+        })}
         {!noLegend && (
           <Legend
             verticalAlign={chartConfig.legendPosition}

packages/charts/src/resources/DemoProps.ts

@@ -172,6 +172,133 @@ export const secondaryDimensionDataSet = [
   }
 ];
 
+export const scatterComplexDataSet = [
+  [
+    {
+      users: 120,
+      sessions: 330,
+      volume: 744
+    },
+    {
+      users: 213,
+      sessions: 313,
+      volume: 881
+    },
+    {
+      users: 241,
+      sessions: 424,
+      volume: 670
+    },
+    {
+      users: 328,
+      sessions: 83,
+      volume: 630
+    },
+    {
+      users: 102,
+      sessions: 302,
+      volume: 126
+    },
+    {
+      users: 233,
+      sessions: 304,
+      volume: 880
+    },
+    {
+      users: 202,
+      sessions: 47,
+      volume: 452
+    },
+    {
+      users: 222,
+      sessions: 18,
+      volume: 500
+    },
+    {
+      users: 210,
+      sessions: 362,
+      volume: 892
+    },
+    {
+      users: 215,
+      sessions: 510,
+      volume: 2022
+    },
+    {
+      users: 242,
+      sessions: 402,
+      volume: 70
+    },
+    {
+      users: 20,
+      sessions: 10,
+      volume: 60
+    }
+  ],
+  [
+    {
+      users: 100,
+      sessions: 300,
+      volume: 756
+    },
+    {
+      users: 230,
+      sessions: 330,
+      volume: 880
+    },
+    {
+      users: 240,
+      sessions: 404,
+      volume: 700
+    },
+    {
+      users: 280,
+      sessions: 80,
+      volume: 604
+    },
+    {
+      users: 100,
+      sessions: 300,
+      volume: 756
+    },
+    {
+      users: 230,
+      sessions: 330,
+      volume: 880
+    },
+    {
+      users: 20,
+      sessions: 470,
+      volume: 450
+    },
+    {
+      users: 220,
+      sessions: 180,
+      volume: 5000
+    },
+    {
+      users: 200,
+      sessions: 360,
+      volume: 879
+    },
+    {
+      users: 250,
+      sessions: 500,
+      volume: 200
+    },
+    {
+      users: 240,
+      sessions: 404,
+      volume: 700
+    },
+    {
+      users: 280,
+      sessions: 80,
+      volume: 604
+    }
+  ]
+];
+
 const concatYear = (array, year) => array.map((item) => ({ ...item, name: `${item.name} ${year}` }));
 
 export const bigDataSet = [