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

package/src/components/CarbonChart/CarbonChartLollipop.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,93 +23,98 @@ export default {
   },
 } as Meta;
 
-const Template: Story<CarbonChartProps> = args => (
+const Template: StoryFn<CarbonChartProps> = args => (
   <Card isInverse={args.isInverse} style={{ padding: '12px' }}>
     <CarbonChart {...args} />
   </Card>
 );
 
-//Lollipop//
-export const LollipopDiscrete = Template.bind({});
-LollipopDiscrete.args = {
-  isInverse: false,
-  type: CarbonChartType.lollipop,
-  dataSet: [
-    {
-      group: 'Dataset 1',
-      key: 'Qty',
-      value: 34200,
-    },
-    {
-      group: 'Dataset 2',
-      key: 'More',
-      value: 34200,
-    },
-    {
-      group: 'Dataset 3',
-      key: 'Sold',
-      value: 41200,
-    },
-    {
-      group: 'Dataset 4',
-      key: 'Restocking',
-      value: 22000,
-    },
-  ],
-  options: {
-    title: 'Lollipop (discrete)',
-    axes: {
-      bottom: {
-        title: '2019 Annual Sales Figures',
-        scaleType: 'labels',
-        mapsTo: 'key',
+export const LollipopDiscrete = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.lollipop,
+    dataSet: [
+      {
+        group: 'Dataset 1',
+        key: 'Qty',
+        value: 34200,
       },
-      left: {
-        mapsTo: 'value',
+      {
+        group: 'Dataset 2',
+        key: 'More',
+        value: 34200,
       },
+      {
+        group: 'Dataset 3',
+        key: 'Sold',
+        value: 41200,
+      },
+      {
+        group: 'Dataset 4',
+        key: 'Restocking',
+        value: 22000,
+      },
+    ],
+    options: {
+      title: 'Lollipop (discrete)',
+      axes: {
+        bottom: {
+          title: '2019 Annual Sales Figures',
+          scaleType: 'labels',
+          mapsTo: 'key',
+        },
+        left: {
+          mapsTo: 'value',
+        },
+      },
+      height: '400px',
     },
-    height: '400px',
   },
 };
-export const LollipopHorizontalPresentation = Template.bind({});
-LollipopHorizontalPresentation.args = {
-  isInverse: false,
-  type: CarbonChartType.lollipop,
-  dataSet: [
-    {
-      group: 'Dataset 1',
-      key: 'Qty',
-      value: 34200,
-    },
-    {
-      group: 'Dataset 2',
-      key: 'More',
-      value: 34200,
-    },
-    {
-      group: 'Dataset 3',
-      key: 'Sold',
-      value: 41200,
-    },
-    {
-      group: 'Dataset 4',
-      key: 'Restocking',
-      value: 22000,
-    },
-  ],
-  options: {
-    title: 'Lollipop (horizontal) - presentation',
-    axes: {
-      left: {
-        title: '2019 Annual Sales Figures',
-        scaleType: 'labels',
-        mapsTo: 'key',
+
+export const LollipopHorizontalPresentation = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.lollipop,
+    dataSet: [
+      {
+        group: 'Dataset 1',
+        key: 'Qty',
+        value: 34200,
+      },
+      {
+        group: 'Dataset 2',
+        key: 'More',
+        value: 34200,
+      },
+      {
+        group: 'Dataset 3',
+        key: 'Sold',
+        value: 41200,
+      },
+      {
+        group: 'Dataset 4',
+        key: 'Restocking',
+        value: 22000,
       },
-      bottom: {
-        mapsTo: 'value',
+    ],
+    options: {
+      title: 'Lollipop (horizontal) - presentation',
+      axes: {
+        left: {
+          title: '2019 Annual Sales Figures',
+          scaleType: 'labels',
+          mapsTo: 'key',
+        },
+        bottom: {
+          mapsTo: 'value',
+        },
       },
+      height: '400px',
     },
-    height: '400px',
   },
 };
-//Lollipop//

package/src/components/CarbonChart/CarbonChartMeter.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,193 +23,208 @@ 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 MeterChartWithStatuses = Template.bind({});
-MeterChartWithStatuses.args = {
-  isInverse: false,
-  type: CarbonChartType.meter,
-  dataSet: [
-    {
-      group: 'Dataset 1',
-      value: 56,
-    },
-  ],
-  options: {
-    title: 'Meter Chart - with statuses',
-    meter: {
-      peak: 80,
-      status: {
-        ranges: [
-          {
-            range: [0, 50],
-            status: 'success',
-          },
-          {
-            range: [50, 60],
-            status: 'warning',
-          },
-          {
-            range: [60, 100],
-            status: 'danger',
-          },
-        ],
+export const MeterChartWithStatuses = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.meter,
+    dataSet: [
+      {
+        group: 'Dataset 1',
+        value: 56,
+      },
+    ],
+    options: {
+      title: 'Meter Chart - with statuses',
+      meter: {
+        peak: 80,
+        status: {
+          ranges: [
+            {
+              range: [0, 50],
+              status: 'success',
+            },
+            {
+              range: [50, 60],
+              status: 'warning',
+            },
+            {
+              range: [60, 100],
+              status: 'danger',
+            },
+          ],
+        },
       },
+      height: '100px',
     },
-    height: '100px',
   },
 };
 
-export const MeterChartNoStatus = Template.bind({});
-MeterChartNoStatus.args = {
-  isInverse: false,
-  type: CarbonChartType.meter,
-  dataSet: [
-    {
-      group: 'Dataset 1',
-      value: 56,
-    },
-  ],
-  options: {
-    title: 'Meter Chart - no status',
-    meter: {
-      peak: 70,
+export const MeterChartNoStatus = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.meter,
+    dataSet: [
+      {
+        group: 'Dataset 1',
+        value: 56,
+      },
+    ],
+    options: {
+      title: 'Meter Chart - no status',
+      meter: {
+        peak: 70,
+      },
+      height: '100px',
     },
-    height: '100px',
   },
 };
 
-export const ProportionalMeterChart = Template.bind({});
-ProportionalMeterChart.args = {
-  isInverse: false,
-  type: CarbonChartType.meter,
-  dataSet: [
-    {
-      group: 'emails',
-      value: 202,
-    },
-    {
-      group: 'photos',
-      value: 654,
-    },
-    {
-      group: 'text messages',
-      value: 723,
-    },
-    {
-      group: 'other',
-      value: 120,
-    },
-  ],
-  options: {
-    title: 'Proportional Meter Chart',
-    height: '130px',
-    meter: {
-      proportional: {
-        total: 2000,
-        unit: 'GB',
+export const ProportionalMeterChart = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.meter,
+    dataSet: [
+      {
+        group: 'emails',
+        value: 202,
       },
-    },
-    color: {
-      pairing: {
-        option: 2,
+      {
+        group: 'photos',
+        value: 654,
+      },
+      {
+        group: 'text messages',
+        value: 723,
+      },
+      {
+        group: 'other',
+        value: 120,
+      },
+    ],
+    options: {
+      title: 'Proportional Meter Chart',
+      height: '130px',
+      meter: {
+        proportional: {
+          total: 2000,
+          unit: 'GB',
+        },
+      },
+      color: {
+        pairing: {
+          option: 2,
+        },
       },
     },
   },
 };
 
-export const ProportionalMeterChartPeakAndStatuses = Template.bind({});
-ProportionalMeterChartPeakAndStatuses.args = {
-  isInverse: false,
-  type: CarbonChartType.meter,
-  dataSet: [
-    {
-      group: 'emails',
-      value: 202,
-    },
-    {
-      group: 'photos',
-      value: 654,
-    },
-    {
-      group: 'text messages',
-      value: 723,
-    },
-    {
-      group: 'other',
-      value: 120,
-    },
-  ],
-  options: {
-    title: 'Proportional Meter Chart - peak and statuses',
-    height: '130px',
-    meter: {
-      peak: 1800,
-      proportional: {
-        total: 2000,
-        unit: 'GB',
-      },
-      status: {
-        ranges: [
-          {
-            range: [0, 800],
-            status: 'success',
-          },
-          {
-            range: [800, 1800],
-            status: 'warning',
-          },
-          {
-            range: [1800, 2000],
-            status: 'danger',
-          },
-        ],
+export const ProportionalMeterChartPeakAndStatuses = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.meter,
+    dataSet: [
+      {
+        group: 'emails',
+        value: 202,
       },
-    },
-    color: {
-      pairing: {
-        option: 2,
+      {
+        group: 'photos',
+        value: 654,
+      },
+      {
+        group: 'text messages',
+        value: 723,
+      },
+      {
+        group: 'other',
+        value: 120,
+      },
+    ],
+    options: {
+      title: 'Proportional Meter Chart - peak and statuses',
+      height: '130px',
+      meter: {
+        peak: 1800,
+        proportional: {
+          total: 2000,
+          unit: 'GB',
+        },
+        status: {
+          ranges: [
+            {
+              range: [0, 800],
+              status: 'success',
+            },
+            {
+              range: [800, 1800],
+              status: 'warning',
+            },
+            {
+              range: [1800, 2000],
+              status: 'danger',
+            },
+          ],
+        },
+      },
+      color: {
+        pairing: {
+          option: 2,
+        },
       },
     },
   },
 };
 
-export const ProportionalMeterChartTruncated = Template.bind({});
-ProportionalMeterChartTruncated.args = {
-  isInverse: false,
-  type: CarbonChartType.meter,
-  dataSet: [
-    {
-      group: 'emails',
-      value: 202,
-    },
-    {
-      group: 'photos',
-      value: 654,
-    },
-    {
-      group: 'text messages',
-      value: 723,
-    },
-    {
-      group: 'other',
-      value: 120,
-    },
-  ],
-  options: {
-    title: 'Proportional Meter Chart (truncated)',
-    height: '130px',
-    meter: {
-      proportional: {
-        total: 2000,
-        unit: 'MB',
-        totalFormatter: e => `custom total string for: ${e}`,
-        breakdownFormatter: e =>
-          `You are using ${e.datasetsTotal} GB of the space this label is really long will need to be truncated with a tooltip Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
+export const ProportionalMeterChartTruncated = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.meter,
+    dataSet: [
+      {
+        group: 'emails',
+        value: 202,
+      },
+      {
+        group: 'photos',
+        value: 654,
+      },
+      {
+        group: 'text messages',
+        value: 723,
+      },
+      {
+        group: 'other',
+        value: 120,
+      },
+    ],
+    options: {
+      title: 'Proportional Meter Chart (truncated)',
+      height: '130px',
+      meter: {
+        proportional: {
+          total: 2000,
+          unit: 'MB',
+          totalFormatter: e => `custom total string for: ${e}`,
+          breakdownFormatter: e =>
+            `You are using ${e.datasetsTotal} GB of the space this label is really long will need to be truncated with a tooltip Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
+        },
       },
     },
   },