Scatter chart: added new placeholder

Author: kleinju1017

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.tsx

@@ -4,7 +4,7 @@ import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils'
 import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/components/ChartContainer';
 import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxisTicks';
 import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
-import { LineChartPlaceholder } from '@ui5/webcomponents-react-charts/lib/LineChartPlaceholder';
+import { ScatterChartPlaceholder } from '@ui5/webcomponents-react-charts/lib/ScatterChartPlaceholder';
 import { useLegendItemClick } from '@ui5/webcomponents-react-charts/lib/useLegendItemClick';
 import React, { CSSProperties, FC, forwardRef, Ref, useCallback, useMemo } from 'react';
 import {
@@ -177,7 +177,7 @@ const ScatterChart: FC<ScatterChartProps> = forwardRef((props: ScatterChartProps
     <ChartContainer
       dataset={dataset}
       loading={loading}
-      Placeholder={LineChartPlaceholder}
+      Placeholder={ScatterChartPlaceholder}
       ref={chartRef}
       style={style}
       className={className}

packages/charts/src/index.ts

@@ -12,6 +12,7 @@ import { PieChartPlaceholder } from './lib/PieChartPlaceholder';
 import { RadarChart } from './lib/RadarChart';
 import { RadialChart } from './lib/RadialChart';
 import { ScatterChart } from './lib/ScatterChart';
+import { ScatterChartPlaceholder } from './lib/ScatterChartPlaceholder';
 
 export {
   ColumnChart,
@@ -26,5 +27,6 @@ export {
   BarChartPlaceholder,
   ColumnChartPlaceholder,
   LineChartPlaceholder,
-  PieChartPlaceholder
+  PieChartPlaceholder,
+  ScatterChartPlaceholder
 };

packages/charts/src/lib/ScatterChartPlaceholder.ts

@@ -0,0 +1,3 @@
+import { ScatterChartPlaceholder } from '../components/ScatterChart/Placeholder';
+
+export { ScatterChartPlaceholder };