migrate RadarChart

Author: MarcusNotheis

packages/charts/src/components/RadarChart/RadarChart.mdx

@@ -0,0 +1,38 @@
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import { Canvas, Meta } from '@storybook/addon-docs';
+import * as ComponentStories from './RadarChart.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} />
+
+### With Data Labels
+
+<Canvas of={ComponentStories.WithDataLabels} />
+
+### Polygon
+
+<Canvas of={ComponentStories.Polygon} />
+
+### Loading Placeholder
+
+<Canvas of={ComponentStories.LoadingPlaceholder} />
+
+<Footer />

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

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { complexDataSet, simpleDataSet } from '../../resources/DemoProps.js';
+import { RadarChart } from './RadarChart.js';
+
+const meta = {
+  title: 'RadarChart',
+  component: RadarChart,
+  args: {
+    dimensions: [
+      {
+        accessor: 'name',
+        formatter: (d) => `${d} 2019`
+      }
+    ],
+    measures: [
+      {
+        accessor: 'users',
+        label: 'Users',
+        formatter: (val) => val.toLocaleString()
+      },
+      {
+        accessor: 'sessions',
+        label: 'Active Sessions',
+        formatter: (val) => `${val} sessions`,
+        hideDataLabel: true
+      },
+      {
+        accessor: 'volume',
+        label: 'Vol.'
+      }
+    ],
+    dataset: complexDataSet
+  },
+  argTypes: {
+    dataset: {
+      control: { disable: true }
+    }
+  }
+} satisfies Meta<typeof RadarChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithCustomColor: Story = {
+  args: {
+    dimensions: [{ accessor: 'name' }],
+    measures: [{ accessor: 'users', color: 'red' }],
+    dataset: simpleDataSet
+  }
+};
+
+export const WithDataLabels: Story = {
+  args: {
+    dimensions: [{ accessor: 'name' }],
+    measures: [
+      {
+        accessor: 'users'
+      },
+      {
+        accessor: 'sessions'
+      },
+      {
+        accessor: 'volume'
+      }
+    ]
+  }
+};
+
+export const Polygon: Story = {
+  args: {
+    dimensions: [{ accessor: 'name', formatter: (element) => element.slice(0, 3) }],
+    measures: [
+      {
+        accessor: 'users',
+        formatter: (element) => `${element / 10}`,
+        label: 'number of users'
+      },
+      {
+        accessor: 'sessions'
+      },
+      {
+        accessor: 'volume'
+      }
+    ],
+    chartConfig: { polarGridType: 'polygon' }
+  }
+};
+
+export const LoadingPlaceholder: Story = {
+  args: {
+    dataset: []
+  }
+};

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

@@ -35,23 +35,23 @@ export interface RadarChartProps extends IChartBaseProps {
   /**
    * An array of config objects. Each object will define one dimension of the chart.
    *
-   * #### Required Properties
+   * **Required Properties*
    * - `accessor`: string containing the path to the dataset key the dimension should display. Supports object structures by using <code>'parent.child'</code>.
    *   Can also be a getter.
    *
-   * #### Optional Properties
+   * **Optional Properties**
    * - `formatter`: function will be called for each data label and allows you to format it according to your needs
    *
    */
   dimensions: IChartDimension[];
   /**
    * An array of config objects. Each object is defining one radar in the chart.
    *
-   * #### Required properties
+   * **Required properties**
    * - `accessor`: string containing the path to the dataset key this radar should display. Supports object structures by using <code>'parent.child'</code>.
    *   Can also be a getter.
    *
-   * #### Optional properties
+   * **Optional properties**
    *
    * - `label`: Label to display in legends or tooltips. Falls back to the <code>accessor</code> if not present.
    * - `color`: any valid CSS Color or CSS Variable. Defaults to the `sapChart_Ordinal` colors