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

package/src/components/CarbonChart/CarbonChartStep.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,153 +23,156 @@ 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 StepTimeSeries = Template.bind({});
-StepTimeSeries.args = {
-  isInverse: false,
-  type: CarbonChartType.line,
-  dataSet: [
-    {
-      group: 'Dataset 1',
-      date: '2018-12-31T23:00:00.000Z',
-      value: 50000,
-      surplus: 844630247.9315708,
-    },
-    {
-      group: 'Dataset 1',
-      date: '2019-01-04T23:00:00.000Z',
-      value: 65000,
-      surplus: 722253377.7025548,
-    },
-    {
-      group: 'Dataset 1',
-      date: '2019-01-07T23:00:00.000Z',
-      value: null,
-      surplus: 9586.628515900247,
-    },
-    {
-      group: 'Dataset 1',
-      date: '2019-01-12T23:00:00.000Z',
-      value: 49213,
-      surplus: 519710030.3060996,
-    },
-    {
-      group: 'Dataset 1',
-      date: '2019-01-16T23:00:00.000Z',
-      value: 51213,
-      surplus: 964336709.1293422,
-    },
-    {
-      group: 'Dataset 2',
-      date: '2019-01-01T23:00:00.000Z',
-      value: 0,
-      surplus: 24733.73210194359,
-    },
-    {
-      group: 'Dataset 2',
-      date: '2019-01-05T23:00:00.000Z',
-      value: 57312,
-      surplus: 2104847.5679499935,
-    },
-    {
-      group: 'Dataset 2',
-      date: '2019-01-07T23:00:00.000Z',
-      value: 27432,
-      surplus: 632664658.6542752,
-    },
-    {
-      group: 'Dataset 2',
-      date: '2019-01-14T23:00:00.000Z',
-      value: 70323,
-      surplus: 1484604165.9194114,
-    },
-    {
-      group: 'Dataset 2',
-      date: '2019-01-18T23:00:00.000Z',
-      value: 21300,
-      surplus: 228423489.25766274,
-    },
-    {
-      group: 'Dataset 3',
-      date: '2018-12-31T23:00:00.000Z',
-      value: 40000,
-      surplus: 634264360.9426379,
-    },
-    {
-      group: 'Dataset 3',
-      date: '2019-01-04T23:00:00.000Z',
-      value: null,
-      surplus: 781.4728603674881,
-    },
-    {
-      group: 'Dataset 3',
-      date: '2019-01-07T23:00:00.000Z',
-      value: 18000,
-      surplus: 210741530.6295638,
-    },
-    {
-      group: 'Dataset 3',
-      date: '2019-01-12T23:00:00.000Z',
-      value: 39213,
-      surplus: 135260712.71714658,
-    },
-    {
-      group: 'Dataset 3',
-      date: '2019-01-16T23:00:00.000Z',
-      value: 61213,
-      surplus: 313154331.2033775,
-    },
-    {
-      group: 'Dataset 4',
-      date: '2019-01-01T23:00:00.000Z',
-      value: 20000,
-      surplus: 450715657.7789645,
-    },
-    {
-      group: 'Dataset 4',
-      date: '2019-01-05T23:00:00.000Z',
-      value: 37312,
-      surplus: 60444212.38584305,
-    },
-    {
-      group: 'Dataset 4',
-      date: '2019-01-07T23:00:00.000Z',
-      value: 51432,
-      surplus: 1007946419.445114,
-    },
-    {
-      group: 'Dataset 4',
-      date: '2019-01-14T23:00:00.000Z',
-      value: 25332,
-      surplus: 281099594.1962531,
-    },
-    {
-      group: 'Dataset 4',
-      date: '2019-01-18T23:00:00.000Z',
-      value: null,
-      surplus: 1928.4268222770295,
-    },
-  ],
-  options: {
-    title: 'Step (time series)',
-    axes: {
-      bottom: {
-        title: '2019 Annual Sales Figures',
-        mapsTo: 'date',
-        scaleType: 'time',
-      },
-      left: {
-        mapsTo: 'value',
-        title: 'Conversion rate',
-        scaleType: 'linear',
+export const StepTimeSeries = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.line,
+    dataSet: [
+      {
+        group: 'Dataset 1',
+        date: '2018-12-31T23:00:00.000Z',
+        value: 50000,
+        surplus: 844630247.9315708,
+      },
+      {
+        group: 'Dataset 1',
+        date: '2019-01-04T23:00:00.000Z',
+        value: 65000,
+        surplus: 722253377.7025548,
+      },
+      {
+        group: 'Dataset 1',
+        date: '2019-01-07T23:00:00.000Z',
+        value: null,
+        surplus: 9586.628515900247,
+      },
+      {
+        group: 'Dataset 1',
+        date: '2019-01-12T23:00:00.000Z',
+        value: 49213,
+        surplus: 519710030.3060996,
+      },
+      {
+        group: 'Dataset 1',
+        date: '2019-01-16T23:00:00.000Z',
+        value: 51213,
+        surplus: 964336709.1293422,
+      },
+      {
+        group: 'Dataset 2',
+        date: '2019-01-01T23:00:00.000Z',
+        value: 0,
+        surplus: 24733.73210194359,
+      },
+      {
+        group: 'Dataset 2',
+        date: '2019-01-05T23:00:00.000Z',
+        value: 57312,
+        surplus: 2104847.5679499935,
+      },
+      {
+        group: 'Dataset 2',
+        date: '2019-01-07T23:00:00.000Z',
+        value: 27432,
+        surplus: 632664658.6542752,
+      },
+      {
+        group: 'Dataset 2',
+        date: '2019-01-14T23:00:00.000Z',
+        value: 70323,
+        surplus: 1484604165.9194114,
+      },
+      {
+        group: 'Dataset 2',
+        date: '2019-01-18T23:00:00.000Z',
+        value: 21300,
+        surplus: 228423489.25766274,
+      },
+      {
+        group: 'Dataset 3',
+        date: '2018-12-31T23:00:00.000Z',
+        value: 40000,
+        surplus: 634264360.9426379,
+      },
+      {
+        group: 'Dataset 3',
+        date: '2019-01-04T23:00:00.000Z',
+        value: null,
+        surplus: 781.4728603674881,
+      },
+      {
+        group: 'Dataset 3',
+        date: '2019-01-07T23:00:00.000Z',
+        value: 18000,
+        surplus: 210741530.6295638,
+      },
+      {
+        group: 'Dataset 3',
+        date: '2019-01-12T23:00:00.000Z',
+        value: 39213,
+        surplus: 135260712.71714658,
+      },
+      {
+        group: 'Dataset 3',
+        date: '2019-01-16T23:00:00.000Z',
+        value: 61213,
+        surplus: 313154331.2033775,
+      },
+      {
+        group: 'Dataset 4',
+        date: '2019-01-01T23:00:00.000Z',
+        value: 20000,
+        surplus: 450715657.7789645,
+      },
+      {
+        group: 'Dataset 4',
+        date: '2019-01-05T23:00:00.000Z',
+        value: 37312,
+        surplus: 60444212.38584305,
+      },
+      {
+        group: 'Dataset 4',
+        date: '2019-01-07T23:00:00.000Z',
+        value: 51432,
+        surplus: 1007946419.445114,
+      },
+      {
+        group: 'Dataset 4',
+        date: '2019-01-14T23:00:00.000Z',
+        value: 25332,
+        surplus: 281099594.1962531,
+      },
+      {
+        group: 'Dataset 4',
+        date: '2019-01-18T23:00:00.000Z',
+        value: null,
+        surplus: 1928.4268222770295,
+      },
+    ],
+    options: {
+      title: 'Step (time series)',
+      axes: {
+        bottom: {
+          title: '2019 Annual Sales Figures',
+          mapsTo: 'date',
+          scaleType: 'time',
+        },
+        left: {
+          mapsTo: 'value',
+          title: 'Conversion rate',
+          scaleType: 'linear',
+        },
       },
+      curve: 'curveStepAfter',
+      height: '400px',
     },
-    curve: 'curveStepAfter',
-    height: '400px',
   },
 };

package/src/components/LineChart/LineChart.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Story, Meta } from '@storybook/react/types-6-0';
+import { StoryFn, Meta } from '@storybook/react/types-6-0';
 
 import {
   historyOfTexas as historyOfTexasData,
@@ -53,8 +53,6 @@ const data = [
   },
 ];
 
-const Template: Story<ChartProps<any>> = args => <Chart {...args} />;
-
 export default {
   title: 'Chart',
   component: Chart,
@@ -65,22 +63,23 @@ const title = 'Annual sales figures for 2019';
 const description =
   'description - Lorem ipsum dolor sitamet, consectetur adipiscing elit.';
 
-export const Default = Template.bind({});
-Default.args = {
-  data: data,
-  description,
-  title,
-  type: 'line',
-  componentProps: {
-    xAxis: {
-      label: '2019 Annual Sales Figures',
-      tickFormat: ['Jan', 'Feb', 'March', 'April', 'May'],
-    },
-    yAxis: {
-      domain: [10, 80],
-      label: 'Conversion Rate',
-      tickFormat: t => `$${t}k`,
-      tickValues: [10, 20, 30, 40, 50, 60, 70, 80],
+export const Default = {
+  args: {
+    data: data,
+    description,
+    title,
+    type: 'line',
+    componentProps: {
+      xAxis: {
+        label: '2019 Annual Sales Figures',
+        tickFormat: ['Jan', 'Feb', 'March', 'April', 'May'],
+      },
+      yAxis: {
+        domain: [10, 80],
+        label: 'Conversion Rate',
+        tickFormat: t => `$${t}k`,
+        tickValues: [10, 20, 30, 40, 50, 60, 70, 80],
+      },
     },
   },
 };
@@ -298,36 +297,33 @@ const explicitData = [
   },
 ];
 
-const ExplicitDataTemplate: Story<ChartProps<ExplicitDataInterface>> = args => (
-  <Chart {...args} />
-);
-
-export const ExplicitData = ExplicitDataTemplate.bind({});
-ExplicitData.args = {
-  ...Default.args,
-  componentProps: {
-    ...Default.args.componentProps,
-    xAxis: {
-      ...Default.args.componentProps.xAxis,
-      tickFormat: [
-        'Jan',
-        'Feb',
-        'March',
-        'April',
-        'May',
-        'June',
-        'July',
-        'Aug',
-        'Sept',
-        'Oct',
-        'Nov',
-        'Dec',
-      ],
+export const ExplicitData = {
+  args: {
+    ...Default.args,
+    componentProps: {
+      ...Default.args.componentProps,
+      xAxis: {
+        ...Default.args.componentProps.xAxis,
+        tickFormat: [
+          'Jan',
+          'Feb',
+          'March',
+          'April',
+          'May',
+          'June',
+          'July',
+          'Aug',
+          'Sept',
+          'Oct',
+          'Nov',
+          'Dec',
+        ],
+      },
     },
+    data: explicitData,
+    x: 'month',
+    y: 'sales',
   },
-  data: explicitData,
-  x: 'month',
-  y: 'sales',
 };
 
 interface HistoryOfTexasInterface {
@@ -336,49 +332,43 @@ interface HistoryOfTexasInterface {
   label: string;
 }
 
-const HistoryOfTexasTemplate: Story<
-  ChartProps<HistoryOfTexasInterface>
-> = args => <Chart {...args} />;
-
-export const HistoryOfTexas = HistoryOfTexasTemplate.bind({});
-HistoryOfTexas.args = {
-  ...Default.args,
-  description: 'Number of enslaved people in Texas',
-  title: 'History of Texas',
-  componentProps: {
-    xAxis: {
-      label: 'Number of enslaved people',
-      tickValues: [1830, 1835, 1840, 1845, 1850, 1855, 1860, 1865],
-    },
-    yAxis: {
-      label: 'Year',
-      tickFormat: t => t.toLocaleString(),
-      tickValues: [
-        0, 20000, 40000, 60000, 80000, 100000, 120000, 140000, 160000, 180000,
-      ],
+export const HistoryOfTexas = {
+  args: {
+    ...Default.args,
+    description: 'Number of enslaved people in Texas',
+    title: 'History of Texas',
+    componentProps: {
+      xAxis: {
+        label: 'Number of enslaved people',
+        tickValues: [1830, 1835, 1840, 1845, 1850, 1855, 1860, 1865],
+      },
+      yAxis: {
+        label: 'Year',
+        tickFormat: t => t.toLocaleString(),
+        tickValues: [
+          0, 20000, 40000, 60000, 80000, 100000, 120000, 140000, 160000, 180000,
+        ],
+      },
     },
+    data: historyOfTexasData,
+    x: 'year',
+    y: 'number',
   },
-  data: historyOfTexasData,
-  x: 'year',
-  y: 'number',
 };
 
-const SpendingRevenueTemplate: Story<ChartProps<any>> = args => (
-  <Chart {...args} />
-);
-
-export const SpendingRevenue = SpendingRevenueTemplate.bind({});
-SpendingRevenue.args = {
-  data: spendingRevenueData,
-  title: 'Spending Revenue',
-  type: 'line',
-  componentProps: {
-    xAxis: {
-      label: '',
-    },
-    yAxis: {
-      label: 'Average %',
-      tickValues: [0, 2, 4, 6, 8, 10, 12, 14],
+export const SpendingRevenue = {
+  args: {
+    data: spendingRevenueData,
+    title: 'Spending Revenue',
+    type: 'line',
+    componentProps: {
+      xAxis: {
+        label: '',
+      },
+      yAxis: {
+        label: 'Average %',
+        tickValues: [0, 2, 4, 6, 8, 10, 12, 14],
+      },
     },
   },
 };
@@ -389,24 +379,21 @@ interface VotingParticipationInterface {
   label: string;
 }
 
-const VotingParticipationTemplate: Story<
-  ChartProps<VotingParticipationInterface>
-> = args => <Chart {...args} />;
-
-export const VotingParticipation = VotingParticipationTemplate.bind({});
-VotingParticipation.args = {
-  data: votingParticipationData,
-  title: 'Turnout in elections since 2000: US and Texas',
-  type: 'line',
-  componentProps: {
-    xAxis: {
-      label: 'Year',
-    },
-    yAxis: {
-      domain: [10, 80],
-      label: 'Percent',
+export const VotingParticipation = {
+  args: {
+    data: votingParticipationData,
+    title: 'Turnout in elections since 2000: US and Texas',
+    type: 'line',
+    componentProps: {
+      xAxis: {
+        label: 'Year',
+      },
+      yAxis: {
+        domain: [10, 80],
+        label: 'Percent',
+      },
     },
+    x: 'year',
+    y: 'percent',
   },
-  x: 'year',
-  y: 'percent',
 };