docs: improve docs for charts

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

@@ -0,0 +1,249 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { DocsHeader } from '@shared/stories/DocsHeader';
+import '@ui5/webcomponents-icons/dist/person-placeholder.js';
+import { BarChart } from '@ui5/webcomponents-react-charts/lib/BarChart';
+import { complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
+import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
+
+<Meta
+  title="Charts /  BarChart"
+  component={BarChart}
+  argTypes={{
+    ...DocsCommonProps,
+    dataset: {
+      control: { disable: true }
+    },
+    measures: {
+      control: { disable: true }
+    },
+    dimensions: {
+      control: { disable: true }
+    },
+    chartConfig: {
+      control: { disable: true }
+    },
+    children: {
+      control: { disable: true }
+    }
+  }}
+/>
+
+<DocsHeader />
+
+## Example
+
+<Canvas withToolbar>
+  <Story name="Default">
+    {(props) => (
+      <BarChart
+        loading={props.loading}
+        noLegend={props.noLegend}
+        noAnimation={props.noAnimation}
+        onDataPointClick={props.onDataPointClick}
+        onLegendClick={props.onLegendClick}
+        dataset={complexDataSet}
+        style={{ height: '60vh' }}
+        chartConfig={props.chartConfig}
+        dimensions={[
+          {
+            accessor: 'name'
+          }
+        ]}
+        measures={[
+          {
+            accessor: 'users',
+            label: 'Users',
+            formatter: (val) => val.toLocaleString(),
+            opacity: 0.6
+          },
+          {
+            accessor: 'sessions',
+            label: 'Active Sessions',
+            formatter: (val) => `${val} sessions`,
+            hideDataLabel: true
+          },
+          {
+            accessor: 'volume',
+            label: 'Vol.'
+          }
+        ]}
+      />
+    )}
+  </Story>
+</Canvas>
+
+## Properties
+
+<ArgsTable story="Default" />
+
+<br />
+<br />
+
+## More Examples
+
+### with custom color
+
+<Canvas>
+  <Story name="with custom color">
+    {(props) => (
+      <BarChart
+        loading={props.loading}
+        noLegend={props.noLegend}
+        noAnimation={props.noAnimation}
+        onDataPointClick={props.onDataPointClick}
+        dimensions={[{ accessor: 'name' }]}
+        measures={[{ accessor: 'users', color: 'red' }]}
+        dataset={simpleDataSet}
+        chartConfig={props.chartConfig}
+        style={{ width: '95%', height: '40vh' }}
+      />
+    )}
+  </Story>
+</Canvas>
+
+### with secondary dimension
+
+<Canvas>
+  <Story name="With secondary dimension">
+    {(props) => (
+      <BarChart
+        chartConfig={props.chartConfig}
+        loading={props.loading}
+        noLegend={props.noLegend}
+        noAnimation={props.noAnimation}
+        onDataPointClick={props.onDataPointClick}
+        dimensions={[{ accessor: 'name' }, { accessor: 'dimension' }]}
+        measures={[{ accessor: 'users', color: 'red' }]}
+        dataset={secondaryDimensionDataSet}
+        style={{ width: '95%', height: '60vh' }}
+      />
+    )}
+  </Story>
+</Canvas>
+
+### with data labels
+
+<Canvas>
+  <Story name="with data labels">
+    {(props) => (
+      <BarChart
+        loading={props.loading}
+        noLegend={props.noLegend}
+        noAnimation={props.noAnimation}
+        onDataPointClick={props.onDataPointClick}
+        onLegendClick={props.onLegendClick}
+        dimensions={[{ accessor: 'name' }]}
+        measures={[
+          {
+            accessor: 'users'
+          },
+          {
+            accessor: 'sessions'
+          },
+          {
+            accessor: 'volume'
+          }
+        ]}
+        dataset={complexDataSet}
+        style={{ width: '95%', height: '40vh' }}
+        chartConfig={props.chartConfig}
+      />
+    )}
+  </Story>
+</Canvas>
+
+### with formatter
+
+<Canvas>
+  <Story name="with formatter">
+    {(props) => (
+      <BarChart
+        loading={props.loading}
+        noLegend={props.noLegend}
+        noAnimation={props.noAnimation}
+        onDataPointClick={props.onDataPointClick}
+        onLegendClick={props.onLegendClick}
+        dataset={complexDataSet}
+        dimensions={[{ accessor: 'name', formatter: (element) => element.slice(0, 3) }]}
+        measures={[
+          {
+            accessor: 'users',
+            formatter: (element) => `${element / 10}`,
+            label: 'number of users'
+          },
+          {
+            accessor: 'sessions'
+          },
+          {
+            accessor: 'volume'
+          }
+        ]}
+        style={{ width: '95%', height: '100vh' }}
+        chartConfig={{
+          zoomingTool: true
+        }}
+      />
+    )}
+  </Story>
+</Canvas>
+
+### Loading Placeholder
+
+<Canvas>
+  <Story name="Loading Placeholder">
+    <BarChart style={{ width: '30%' }} dimensions={[]} measures={[]} />
+  </Story>
+</Canvas>
+
+### with reference line
+
+<Canvas>
+  <Story name="with reference line">
+    {(props) => (
+      <BarChart
+        loading={props.loading}
+        noLegend={props.noLegend}
+        noAnimation={props.noAnimation}
+        onDataPointClick={props.onDataPointClick}
+        onLegendClick={props.onLegendClick}
+        dataset={complexDataSet}
+        dimensions={[{ accessor: 'name' }]}
+        measures={[
+          {
+            accessor: 'users',
+            stackId: 'A'
+          },
+          {
+            accessor: 'sessions',
+            stackId: 'A'
+          },
+          {
+            accessor: 'volume'
+          }
+        ]}
+        style={{
+          width: '95%',
+          height: '70vh',
+          '--sapChart_OrderedColor_1': '#0f828f',
+          '--sapChart_OrderedColor_2': '#5ac2ce',
+          '--sapChart_OrderedColor_3': '#03734d',
+          '--sapChart_OrderedColor_4': '#66c2a3',
+          '--sapChart_OrderedColor_5': '#3c6372',
+          '--sapChart_OrderedColor_6': '#adbcc3',
+          '--sapChart_OrderedColor_7': '#144b7f',
+          '--sapChart_OrderedColor_8': '#698caf',
+          '--sapChart_OrderedColor_9': '#d62f2f',
+          '--sapChart_OrderedColor_10': '#f8a6a6',
+          '--sapChart_OrderedColor_11': '#921473'
+        }}
+        chartConfig={{
+          referenceLine: {
+            color: 'red',
+            label: 'MAX',
+            value: 650
+          }
+        }}
+      />
+    )}
+  </Story>
+</Canvas>