@react-magma/charts 12.0.0-next.6 → 12.0.1-next.0

package/src/components/CarbonChart/CarbonChartDonut.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Story, Meta } from '@storybook/react/types-6-0';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
@@ -23,184 +23,201 @@ export default {
   },
 } as Meta;
 
-const Template: Story<CarbonChartProps> = args => (
+const Template: StoryFn<CarbonChartProps> = args => (
   <Card isInverse={args.isInverse} style={{ padding: '12px' }}>
     <CarbonChart {...args}>Sample text</CarbonChart>
   </Card>
 );
 
-export const Donut = Template.bind({});
-Donut.args = {
-  isInverse: false,
-  type: CarbonChartType.donut,
-  dataSet: [
-    {
-      group: '2V2N 9KYPM version 1',
-      value: 20000,
-    },
-    {
-      group: 'L22I P66EP L22I P66EP L22I P66EP',
-      value: 65000,
-    },
-    {
-      group: 'JQAI 2M4L1',
-      value: 75000,
-    },
-    {
-      group: 'J9DZ F37AP',
-      value: 1200,
-    },
-    {
-      group: 'YEL48 Q6XK YEL48',
-      value: 10000,
-    },
-    {
-      group: 'Misc',
-      value: 25000,
-    },
-  ],
-  options: {
-    title: 'Donut',
-    resizable: true,
-    donut: {
-      center: {
-        label: 'Browsers',
+export const Donut = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.donut,
+    dataSet: [
+      {
+        group: '2V2N 9KYPM version 1',
+        value: 20000,
       },
-    },
-    height: '400px',
-    legend: {
-      truncation: {
-        type: 'none',
+      {
+        group: 'L22I P66EP L22I P66EP L22I P66EP',
+        value: 65000,
+      },
+      {
+        group: 'JQAI 2M4L1',
+        value: 75000,
+      },
+      {
+        group: 'J9DZ F37AP',
+        value: 1200,
+      },
+      {
+        group: 'YEL48 Q6XK YEL48',
+        value: 10000,
+      },
+      {
+        group: 'Misc',
+        value: 25000,
+      },
+    ],
+    options: {
+      title: 'Donut',
+      resizable: true,
+      donut: {
+        center: {
+          label: 'Browsers',
+        },
+      },
+      height: '400px',
+      legend: {
+        truncation: {
+          type: 'none',
+        },
       },
     },
   },
 };
 
-export const DonutCentered = Template.bind({});
-DonutCentered.args = {
-  isInverse: false,
-  type: CarbonChartType.donut,
-  dataSet: [
-    {
-      group: '2V2N 9KYPM version 1',
-      value: 20000,
-    },
-    {
-      group: 'L22I P66EP L22I P66EP L22I P66EP',
-      value: 65000,
-    },
-    {
-      group: 'JQAI 2M4L1',
-      value: 75000,
-    },
-    {
-      group: 'J9DZ F37AP',
-      value: 1200,
-    },
-    {
-      group: 'YEL48 Q6XK YEL48',
-      value: 10000,
-    },
-    {
-      group: 'Misc',
-      value: 25000,
-    },
-  ],
-  options: {
-    title: 'Donut (centered)',
-    resizable: true,
-    legend: {
-      alignment: 'center',
-      truncation: {
-        type: 'none',
+export const DonutCentered = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.donut,
+    dataSet: [
+      {
+        group: '2V2N 9KYPM version 1',
+        value: 20000,
       },
-    },
-    donut: {
-      center: {
-        label: 'Browsers',
+      {
+        group: 'L22I P66EP L22I P66EP L22I P66EP',
+        value: 65000,
+      },
+      {
+        group: 'JQAI 2M4L1',
+        value: 75000,
+      },
+      {
+        group: 'J9DZ F37AP',
+        value: 1200,
+      },
+      {
+        group: 'YEL48 Q6XK YEL48',
+        value: 10000,
       },
-      alignment: 'center',
+      {
+        group: 'Misc',
+        value: 25000,
+      },
+    ],
+    options: {
+      title: 'Donut (centered)',
+      resizable: true,
+      legend: {
+        alignment: 'center',
+        truncation: {
+          type: 'none',
+        },
+      },
+      donut: {
+        center: {
+          label: 'Browsers',
+        },
+        alignment: 'center',
+      },
+      height: '400px',
     },
-    height: '400px',
   },
 };
 
-export const DonutValueMapsToCount = Template.bind({});
-DonutValueMapsToCount.args = {
-  isInverse: false,
-  type: CarbonChartType.donut,
-  dataSet: [
-    {
-      group: '2V2N 9KYPM version 1',
-      count: 28000,
-    },
-    {
-      group: 'L22I P66EP L22I P66EP L22I P66EP',
-      count: 65000,
-    },
-    {
-      group: 'JQAI 2M4L1',
-      count: 75000,
-    },
-    {
-      group: 'J9DZ F37AP',
-      count: 3200,
-    },
-    {
-      group: 'YEL48 Q6XK YEL48',
-      count: 15000,
-    },
-    {
-      group: 'Misc',
-      count: 25000,
-    },
-  ],
-  options: {
-    title: 'Donut (value maps to count)',
-    resizable: true,
-    pie: {
-      valueMapsTo: 'count',
-    },
-    height: '400px',
-    legend: {
-      truncation: {
-        type: 'none',
+export const DonutValueMapsToCount = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.donut,
+    dataSet: [
+      {
+        group: '2V2N 9KYPM version 1',
+        count: 28000,
+      },
+      {
+        group: 'L22I P66EP L22I P66EP L22I P66EP',
+        count: 65000,
+      },
+      {
+        group: 'JQAI 2M4L1',
+        count: 75000,
+      },
+      {
+        group: 'J9DZ F37AP',
+        count: 3200,
+      },
+      {
+        group: 'YEL48 Q6XK YEL48',
+        count: 15000,
+      },
+      {
+        group: 'Misc',
+        count: 25000,
+      },
+    ],
+    options: {
+      title: 'Donut (value maps to count)',
+      resizable: true,
+      pie: {
+        valueMapsTo: 'count',
+      },
+      height: '400px',
+      legend: {
+        truncation: {
+          type: 'none',
+        },
       },
     },
   },
 };
-export const DonutEmptyState = Template.bind({});
-DonutEmptyState.args = {
-  isInverse: false,
-  type: CarbonChartType.donut,
-  dataSet: [],
-  options: {
-    title: 'Donut (empty state)',
-    resizable: true,
-    donut: {
-      center: {
-        label: 'Browsers',
+
+export const DonutEmptyState = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.donut,
+    dataSet: [],
+    options: {
+      title: 'Donut (empty state)',
+      resizable: true,
+      donut: {
+        center: {
+          label: 'Browsers',
+        },
       },
+      height: '400px',
     },
-    height: '400px',
   },
 };
-export const DonutSkeleton = Template.bind({});
-DonutSkeleton.args = {
-  isInverse: false,
-  type: CarbonChartType.donut,
-  dataSet: [],
-  options: {
-    title: 'Donut (skeleton)',
-    resizable: true,
-    donut: {
-      center: {
-        label: 'Browsers',
+
+export const DonutSkeleton = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.donut,
+    dataSet: [],
+    options: {
+      title: 'Donut (skeleton)',
+      resizable: true,
+      donut: {
+        center: {
+          label: 'Browsers',
+        },
       },
+      data: {
+        loading: true,
+      },
+      height: '400px',
     },
-    data: {
-      loading: true,
-    },
-    height: '400px',
   },
 };

package/src/components/CarbonChart/CarbonChartGauge.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Story, Meta } from '@storybook/react/types-6-0';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 import { Card } from 'react-magma-dom';
 
 import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
@@ -23,58 +23,64 @@ export default {
   },
 } as Meta;
 
-const Template: Story<CarbonChartProps> = args => (
+const Template: StoryFn<CarbonChartProps> = args => (
   <Card isInverse={args.isInverse} style={{ padding: '12px' }}>
     <CarbonChart {...args} />
   </Card>
 );
 
-export const GaugeSemicircularDangerStatus = Template.bind({});
-GaugeSemicircularDangerStatus.args = {
-  isInverse: false,
-  type: CarbonChartType.gauge,
-  dataSet: [
-    {
-      group: 'value',
-      value: 42,
-    },
-    {
-      group: 'delta',
-      value: -13.37,
-    },
-  ],
-  options: {
-    title: 'Gauge semicircular -- danger status',
-    resizable: true,
-    height: '250px',
-    gauge: {
-      type: 'semi',
-      status: 'danger',
+export const GaugeSemicircularDangerStatus = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.gauge,
+    dataSet: [
+      {
+        group: 'value',
+        value: 42,
+      },
+      {
+        group: 'delta',
+        value: -13.37,
+      },
+    ],
+    options: {
+      title: 'Gauge semicircular -- danger status',
+      resizable: true,
+      height: '250px',
+      gauge: {
+        type: 'semi',
+        status: 'danger',
+      },
     },
   },
 };
 
-export const GaugeCircularWarningStatus = Template.bind({});
-GaugeCircularWarningStatus.args = {
-  isInverse: false,
-  type: CarbonChartType.gauge,
-  dataSet: [
-    {
-      group: 'value',
-      value: 42,
-    },
-    {
-      group: 'delta',
-      value: -13.37,
-    },
-  ],
-  options: {
-    title: 'Gauge circular -- warning status',
-    resizable: true,
-    height: '250px',
-    gauge: {
-      status: 'warning',
-      type: 'full',
+export const GaugeCircularWarningStatus = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.gauge,
+    dataSet: [
+      {
+        group: 'value',
+        value: 42,
+      },
+      {
+        group: 'delta',
+        value: -13.37,
+      },
+    ],
+    options: {
+      title: 'Gauge circular -- warning status',
+      resizable: true,
+      height: '250px',
+      gauge: {
+        status: 'warning',
+        type: 'full',
+      },
     },
   },
 };