migrate ScatterChart

Author: MarcusNotheis

packages/charts/src/components/ScatterChart/ScatterChart.mdx

@@ -0,0 +1,30 @@
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import { Canvas, Meta } from '@storybook/addon-docs';
+import * as ComponentStories from './ScatterChart.stories';
+
+<Meta of={ComponentStories} />
+
+<DocsHeader />
+
+## Example
+
+<Canvas of={ComponentStories.Default} />
+
+## Properties
+
+<ControlsWithNote of={ComponentStories.Default} />
+
+<br />
+<br />
+
+## More Examples
+
+### With Custom Color
+
+<Canvas of={ComponentStories.WithCustomColor} />
+
+### Loading Placeholder
+
+<Canvas of={ComponentStories.LoadingPlaceholder} />
+
+<Footer />

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

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ScatterChart } from './ScatterChart.js';
+import { scatterColorDataSet, scatterComplexDataSet } from '../../resources/DemoProps.js';
+
+const meta = {
+  title: 'ScatterChart',
+  component: ScatterChart,
+  argTypes: {
+    children: {
+      control: { disable: true }
+    }
+  },
+  args: {
+    dataset: scatterComplexDataSet,
+    measures: [
+      {
+        accessor: 'users',
+        label: 'Users',
+        axis: 'x'
+      },
+      {
+        accessor: 'sessions',
+        label: 'Sessions',
+        formatter: (val) => `${val}k`,
+        axis: 'y'
+      },
+      {
+        accessor: 'volume',
+        axis: 'z'
+      }
+    ]
+  }
+} satisfies Meta<typeof ScatterChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithCustomColor: Story = {
+  args: {
+    dataset: scatterColorDataSet,
+    measures: [
+      {
+        accessor: 'users',
+        label: 'Users',
+        axis: 'x'
+      },
+      {
+        accessor: 'sessions',
+        label: 'Sessions',
+        axis: 'y'
+      },
+      {
+        accessor: 'volume',
+        axis: 'z'
+      }
+    ]
+  }
+};
+
+export const LoadingPlaceholder: Story = {
+  args: {
+    dataset: []
+  }
+};

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

@@ -68,15 +68,15 @@ export interface ScatterChartProps extends Omit<IChartBaseProps<IScatterChartCon
   /**
    * An array of dataset objects. Each object defines a dataset which is displayed.
    *
-   * #### Required properties
+   * **Required properties**
    *  - `data`: array of objects which contains the data.
    *
-   * #### Optional properties
+   * **Optional properties**
    *  - `label`: string containing the label of the dataset which is also displayed in the legend.
    *  - `color`: any valid CSS color or CSS variable. Defaults to the `sapChart_Ordinal` colors.
    *  - `opacity`: number contains value of opacity of dataset
    *
-   * #### Example of dataset:
+   * **Example of dataset:**
    *
    * <code>
    *   <pre>
@@ -105,12 +105,12 @@ export interface ScatterChartProps extends Omit<IChartBaseProps<IScatterChartCon
   /**
    * An array of config objects. Each object is defining one axis in the chart.
    *
-   * #### Required properties
+   * **Required properties**
    *  - `accessor`: string containing the path to the dataset key this line should display. Supports object structures by using <code>'parent.child'</code>.
    *     Can also be a getter.
    *  - `axis`: string containing definition of axis. Must be x, y or z data to the axis.
    *
-   * #### Optional properties
+   * **Optional properties**
    *  - `label`: Label to display in tooltips. Falls back to the <code>accessor</code> if not present.
    *  - `formatter`: function will be called for each data label and allows you to format it according to your needs. Also addresses labels of axis.
    */
@@ -205,7 +205,7 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
   const yMeasure = measures.find(({ axis }) => axis === 'y');
   const zMeasure = measures.find(({ axis }) => axis === 'z');
 
-  const [yAxisWidth, legendPosition] = useLongestYAxisLabel(dataset?.[0].data, [yMeasure]);
+  const [yAxisWidth, legendPosition] = useLongestYAxisLabel(dataset?.[0]?.data, [yMeasure]);
   const xAxisHeights = useObserveXAxisHeights(chartRef, 1);
   const marginChart = useChartMargin(chartConfig.margin, chartConfig.zoomingTool);
   const { chartConfig: _0, measures: _1, ...propsWithoutOmitted } = rest;