feat(ScatterChart): initial component implementation

packages/charts/src/components/BarChart/BarChart.tsx

@@ -98,7 +98,7 @@ export interface BarChartProps extends IChartBaseProps {
 /**
  * <code>import { BarChart } from '@ui5/webcomponents-react-charts/lib/BarChart';</code>
  */
-const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<any>) => {
+const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<HTMLDivElement>) => {
   const {
     loading,
     dataset,

packages/charts/src/components/ColumnChart/ColumnChart.tsx

@@ -96,7 +96,7 @@ const valueAccessor = (attribute) => ({ payload }) => {
 /**
  * <code>import { ColumnChart } from '@ui5/webcomponents-react-charts/lib/ColumnChart';</code>
  */
-const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, ref: Ref<any>) => {
+const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, ref: Ref<HTMLDivElement>) => {
   const {
     loading,
     dataset,

packages/charts/src/components/ComposedChart/index.tsx

@@ -107,7 +107,7 @@ type AvailableChartTypes = 'line' | 'bar' | 'area' | string;
 /**
  * <code>import { ComposedChart } from '@ui5/webcomponents-react-charts/lib/ComposedChart';</code>
  */
-const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartProps, ref: Ref<any>) => {
+const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartProps, ref: Ref<HTMLDivElement>) => {
   const {
     loading,
     dataset,

packages/charts/src/components/LineChart/LineChart.tsx

@@ -83,7 +83,7 @@ const measureDefaults = {
 /**
  * <code>import { LineChart } from '@ui5/webcomponents-react-charts/lib/LineChart';</code>
  */
-const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Ref<any>) => {
+const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Ref<HTMLDivElement>) => {
   const {
     dataset,
     loading,

packages/charts/src/components/MicroBarChart/MicroBarChart.tsx

@@ -78,7 +78,7 @@ const microBarChartMargin = { left: -30, right: 30, top: 40, bottom: 30 };
 /**
  * <code>import { MicroBarChart } from '@ui5/webcomponents-react-charts/lib/MicroBarChart';</code>
  */
-const MicroBarChart: FC<MicroBarChartProps> = forwardRef((props: MicroBarChartProps, ref: Ref<any>) => {
+const MicroBarChart: FC<MicroBarChartProps> = forwardRef((props: MicroBarChartProps, ref: Ref<HTMLDivElement>) => {
   const { loading, dataset, onDataPointClick, style, className, tooltip, slot } = props;
 
   const chartRef = useConsolidatedRef<any>(ref);

packages/charts/src/components/PieChart/PieChart.tsx

@@ -58,7 +58,7 @@ export interface PieChartProps extends IChartBaseProps<IPolarChartConfig> {
 /**
  * <code>import { PieChart } from '@ui5/webcomponents-react-charts/lib/PieChart';</code>
  */
-const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<any>) => {
+const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<HTMLDivElement>) => {
   const {
     loading,
     dataset,

packages/charts/src/components/RadarChart/RadarChart.tsx

@@ -68,7 +68,7 @@ const measureDefaults = {
 /**
  * <code>import { RadarChart } from '@ui5/webcomponents-react-charts/lib/RadarChart';</code>
  */
-const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref: Ref<any>) => {
+const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref: Ref<HTMLDivElement>) => {
   const {
     loading,
     dataset,

packages/charts/src/components/RadialChart/RadialChart.tsx

@@ -21,7 +21,7 @@ const radialBarLabelStyle = { fontSize: ThemingParameters.sapFontHeader3Size, fi
 /**
  * <code>import { RadialChart } from '@ui5/webcomponents-react-charts/lib/RadialChart';</code>
  */
-const RadialChart: FC<RadialChartProps> = forwardRef((props: RadialChartProps, ref: Ref<any>) => {
+const RadialChart: FC<RadialChartProps> = forwardRef((props: RadialChartProps, ref: Ref<HTMLDivElement>) => {
   const { maxValue = 100, value, displayValue, onDataPointClick, color, style, className, tooltip, slot } = props;
 
   const range = useMemo(() => {

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

@@ -0,0 +1,29 @@
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+export const ScatterChartPlaceholder = (props) => {
+  return (
+    <ContentLoader
+      viewBox="0 0 165 145"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
+      speed={2}
+      backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
+      foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}
+      backgroundOpacity={ThemingParameters.sapContent_DisabledOpacity as any}
+      {...props}
+    >
+      <rect x="10" y="135" width="135" height="1" />
+      <circle cx="20" cy="90" r="2" />
+      <circle cx="40" cy="58" r="3" />
+      <circle cx="60" cy="108" r="14" />
+      <circle cx="85" cy="87" r="8" />
+      <circle cx="105" cy="50" r="6" />
+      <circle cx="125" cy="115" r="4" />
+      <circle cx="78" cy="58" r="10" />
+      <circle cx="28" cy="115" r="4" />
+    </ContentLoader>
+  );
+};

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

@@ -0,0 +1,80 @@
+import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
+import React from 'react';
+import { ScatterChart } from '@ui5/webcomponents-react-charts/lib/ScatterChart';
+import { scatterColorDataSet, scatterComplexDataSet } from '../../resources/DemoProps';
+
+export default {
+  title: 'Charts /  ScatterChart',
+  component: ScatterChart
+};
+
+export const renderStory = () => (
+  <ScatterChart
+    loading={boolean('loading', false)}
+    noLegend={boolean('noLegend', false)}
+    noAnimation={boolean('noAnimation', false)}
+    onDataPointClick={action('onDataPointClick')}
+    onLegendClick={action('onLegendClick')}
+    dataset={scatterComplexDataSet}
+    style={{ width: '100%' }}
+    measures={[
+      {
+        accessor: 'users',
+        label: 'Users',
+        axis: 'x'
+      },
+      {
+        accessor: 'sessions',
+        label: 'Sessions',
+        formatter: (val) => `${val}k`,
+        axis: 'y'
+      },
+      {
+        accessor: 'volume',
+        axis: 'z'
+      }
+    ]}
+  />
+);
+
+renderStory.story = {
+  name: 'Default'
+};
+
+export const renderStoryWithCustomColor = () => (
+  <ScatterChart
+    loading={boolean('loading', false)}
+    noLegend={boolean('noLegend', false)}
+    noAnimation={boolean('noAnimation', false)}
+    onDataPointClick={action('onDataPointClick')}
+    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 loadingPlaceholder = () => <ScatterChart style={{ width: '100%' }} measures={[]} />;
+
+loadingPlaceholder.story = {
+  name: 'Loading placeholder'
+};

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

@@ -0,0 +1,43 @@
+import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
+import { mount } from 'enzyme';
+import * as React from 'react';
+import { scatterComplexDataSet } from '../../resources/DemoProps';
+import { ScatterChart } from '@ui5/webcomponents-react-charts/lib/ScatterChart';
+
+describe('Scatter Chart', () => {
+  test('Renders with data', () => {
+    expect(
+      mount(
+        <ScatterChart
+          loading={boolean('loading', false)}
+          onDataPointClick={action('onDataPointClick')}
+          onLegendClick={action('onLegendClick')}
+          dataset={scatterComplexDataSet}
+          style={{ width: '100%' }}
+          measures={[
+            {
+              accessor: 'users',
+              label: 'Users',
+              axis: 'x'
+            },
+            {
+              accessor: 'sessions',
+              label: 'Sessions',
+              axis: 'y'
+            },
+            {
+              accessor: 'volume',
+              axis: 'z'
+            }
+          ]}
+        />
+      ).render()
+    ).toMatchSnapshot();
+  });
+
+  test('loading placeholder', () => {
+    const wrapper = mount(<ScatterChart style={{ width: '30%' }} measures={[]} />);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+});