@react-magma/charts 12.0.0 → 12.0.1-next.1

package/src/components/CarbonChart/CarbonChartBubble.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,584 +23,602 @@ 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 BubbleLinear = Template.bind({});
-BubbleLinear.args = {
-  isInverse: false,
-  type: CarbonChartType.bubble,
-  dataSet: [
-    {
-      group: 'Dataset 1',
-      sales: 10000,
-      profit: 32100,
-      surplus: 50000,
-    },
-    {
-      group: 'Dataset 1',
-      sales: 12000,
-      profit: 23500,
-      surplus: 34000,
-    },
-    {
-      group: 'Dataset 1',
-      sales: 14000,
-      profit: 53100,
-      surplus: 63000,
-    },
-    {
-      group: 'Dataset 1',
-      sales: 15000,
-      profit: 42300,
-      surplus: 43000,
-    },
-    {
-      group: 'Dataset 1',
-      sales: 16000,
-      profit: 12300,
-      surplus: 55000,
-    },
-    {
-      group: 'Dataset 2',
-      sales: 11000,
-      profit: 12400,
-      surplus: 25000,
-    },
-    {
-      group: 'Dataset 2',
-      sales: 13000,
-      profit: 34500,
-      surplus: 35000,
-    },
-    {
-      group: 'Dataset 2',
-      sales: 13500,
-      profit: 23100,
-      surplus: 55000,
-    },
-    {
-      group: 'Dataset 2',
-      sales: 15500,
-      profit: 63200,
-      surplus: 35000,
-    },
-    {
-      group: 'Dataset 2',
-      sales: 15750,
-      profit: 24300,
-      surplus: 64000,
-    },
-  ],
-  options: {
-    title: 'Bubble (linear)',
-    axes: {
-      bottom: {
-        title: 'No. of employees',
-        mapsTo: 'sales',
-        includeZero: false,
-      },
-      left: {
-        title: 'Annual sales',
-        mapsTo: 'profit',
-        includeZero: false,
+export const BubbleLinear = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.bubble,
+    dataSet: [
+      {
+        group: 'Dataset 1',
+        sales: 10000,
+        profit: 32100,
+        surplus: 50000,
       },
-    },
-    bubble: {
-      radiusMapsTo: 'surplus',
-      radiusLabel: 'Surplus',
-    },
-    legend: {
-      additionalItems: [
-        {
-          type: 'radius',
-          name: 'Surplus',
+      {
+        group: 'Dataset 1',
+        sales: 12000,
+        profit: 23500,
+        surplus: 34000,
+      },
+      {
+        group: 'Dataset 1',
+        sales: 14000,
+        profit: 53100,
+        surplus: 63000,
+      },
+      {
+        group: 'Dataset 1',
+        sales: 15000,
+        profit: 42300,
+        surplus: 43000,
+      },
+      {
+        group: 'Dataset 1',
+        sales: 16000,
+        profit: 12300,
+        surplus: 55000,
+      },
+      {
+        group: 'Dataset 2',
+        sales: 11000,
+        profit: 12400,
+        surplus: 25000,
+      },
+      {
+        group: 'Dataset 2',
+        sales: 13000,
+        profit: 34500,
+        surplus: 35000,
+      },
+      {
+        group: 'Dataset 2',
+        sales: 13500,
+        profit: 23100,
+        surplus: 55000,
+      },
+      {
+        group: 'Dataset 2',
+        sales: 15500,
+        profit: 63200,
+        surplus: 35000,
+      },
+      {
+        group: 'Dataset 2',
+        sales: 15750,
+        profit: 24300,
+        surplus: 64000,
+      },
+    ],
+    options: {
+      title: 'Bubble (linear)',
+      axes: {
+        bottom: {
+          title: 'No. of employees',
+          mapsTo: 'sales',
+          includeZero: false,
         },
-      ],
+        left: {
+          title: 'Annual sales',
+          mapsTo: 'profit',
+          includeZero: false,
+        },
+      },
+      bubble: {
+        radiusMapsTo: 'surplus',
+        radiusLabel: 'Surplus',
+      },
+      legend: {
+        additionalItems: [
+          {
+            type: 'radius',
+            name: 'Surplus',
+          },
+        ],
+      },
+      height: '400px',
     },
-    height: '400px',
   },
 };
 
-export const BubbleTimeSeries = Template.bind({});
-BubbleTimeSeries.args = {
-  isInverse: false,
-  type: CarbonChartType.bubble,
-  dataSet: [
-    {
-      group: 'Dataset 1',
-      date: '2023-01-01',
-      value: 50000,
-      surplus: 1108792759.4591982,
-    },
-    {
-      group: 'Dataset 1',
-      date: '2023-01-05',
-      value: 65000,
-      surplus: 590247271.3872744,
-    },
-    {
-      group: 'Dataset 1',
-      date: '2023-01-08',
-      value: null,
-      surplus: 9219.520929038921,
-    },
-    {
-      group: 'Dataset 1',
-      date: '2023-01-13',
-      value: 49213,
-      surplus: 1144546546.5725653,
-    },
-    {
-      group: 'Dataset 1',
-      date: '2023-01-17',
-      value: 51213,
-      surplus: 1206431312.2321992,
-    },
-    {
-      group: 'Dataset 2',
-      date: '2023-01-02',
-      value: 0,
-      surplus: 9107.915339546651,
-    },
-    {
-      group: 'Dataset 2',
-      date: '2023-01-06',
-      value: 57312,
-      surplus: 1297879289.3455367,
-    },
-    {
-      group: 'Dataset 2',
-      date: '2023-01-08',
-      value: 27432,
-      surplus: 254653461.2692332,
-    },
-    {
-      group: 'Dataset 2',
-      date: '2023-01-15',
-      value: 70323,
-      surplus: 791440614.5922209,
-    },
-    {
-      group: 'Dataset 2',
-      date: '2023-01-19',
-      value: 21300,
-      surplus: 87235499.55803385,
-    },
-    {
-      group: 'Dataset 3',
-      date: '2023-01-01',
-      value: 40000,
-      surplus: 99661858.42808129,
-    },
-    {
-      group: 'Dataset 3',
-      date: '2023-01-05',
-      value: null,
-      surplus: 4582.283257286785,
-    },
-    {
-      group: 'Dataset 3',
-      date: '2023-01-08',
-      value: 18000,
-      surplus: 388038660.7993739,
-    },
-    {
-      group: 'Dataset 3',
-      date: '2023-01-13',
-      value: 39213,
-      surplus: 281485241.99383223,
-    },
-    {
-      group: 'Dataset 3',
-      date: '2023-01-17',
-      value: 61213,
-      surplus: 77655008.12585072,
-    },
-    {
-      group: 'Dataset 4',
-      date: '2023-01-02',
-      value: 20000,
-      surplus: 138468385.58061224,
-    },
-    {
-      group: 'Dataset 4',
-      date: '2023-01-06',
-      value: 37312,
-      surplus: 703848952.2932228,
-    },
-    {
-      group: 'Dataset 4',
-      date: '2023-01-08',
-      value: 51432,
-      surplus: 721135448.0965896,
-    },
-    {
-      group: 'Dataset 4',
-      date: '2023-01-15',
-      value: 25332,
-      surplus: 524200058.75680393,
-    },
-    {
-      group: 'Dataset 4',
-      date: '2023-01-19',
-      value: null,
-      surplus: 4347.704175756872,
-    },
-  ],
-  options: {
-    title: 'Bubble (time series)',
-    axes: {
-      bottom: {
-        title: '2023 Annual Sales Figures',
-        scaleType: 'time',
-        mapsTo: 'date',
-      },
-      left: {
-        mapsTo: 'value',
+export const BubbleTimeSeries = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.bubble,
+    dataSet: [
+      {
+        group: 'Dataset 1',
+        date: '2023-01-01',
+        value: 50000,
+        surplus: 1108792759.4591982,
       },
+      {
+        group: 'Dataset 1',
+        date: '2023-01-05',
+        value: 65000,
+        surplus: 590247271.3872744,
+      },
+      {
+        group: 'Dataset 1',
+        date: '2023-01-08',
+        value: null,
+        surplus: 9219.520929038921,
+      },
+      {
+        group: 'Dataset 1',
+        date: '2023-01-13',
+        value: 49213,
+        surplus: 1144546546.5725653,
+      },
+      {
+        group: 'Dataset 1',
+        date: '2023-01-17',
+        value: 51213,
+        surplus: 1206431312.2321992,
+      },
+      {
+        group: 'Dataset 2',
+        date: '2023-01-02',
+        value: 0,
+        surplus: 9107.915339546651,
+      },
+      {
+        group: 'Dataset 2',
+        date: '2023-01-06',
+        value: 57312,
+        surplus: 1297879289.3455367,
+      },
+      {
+        group: 'Dataset 2',
+        date: '2023-01-08',
+        value: 27432,
+        surplus: 254653461.2692332,
+      },
+      {
+        group: 'Dataset 2',
+        date: '2023-01-15',
+        value: 70323,
+        surplus: 791440614.5922209,
+      },
+      {
+        group: 'Dataset 2',
+        date: '2023-01-19',
+        value: 21300,
+        surplus: 87235499.55803385,
+      },
+      {
+        group: 'Dataset 3',
+        date: '2023-01-01',
+        value: 40000,
+        surplus: 99661858.42808129,
+      },
+      {
+        group: 'Dataset 3',
+        date: '2023-01-05',
+        value: null,
+        surplus: 4582.283257286785,
+      },
+      {
+        group: 'Dataset 3',
+        date: '2023-01-08',
+        value: 18000,
+        surplus: 388038660.7993739,
+      },
+      {
+        group: 'Dataset 3',
+        date: '2023-01-13',
+        value: 39213,
+        surplus: 281485241.99383223,
+      },
+      {
+        group: 'Dataset 3',
+        date: '2023-01-17',
+        value: 61213,
+        surplus: 77655008.12585072,
+      },
+      {
+        group: 'Dataset 4',
+        date: '2023-01-02',
+        value: 20000,
+        surplus: 138468385.58061224,
+      },
+      {
+        group: 'Dataset 4',
+        date: '2023-01-06',
+        value: 37312,
+        surplus: 703848952.2932228,
+      },
+      {
+        group: 'Dataset 4',
+        date: '2023-01-08',
+        value: 51432,
+        surplus: 721135448.0965896,
+      },
+      {
+        group: 'Dataset 4',
+        date: '2023-01-15',
+        value: 25332,
+        surplus: 524200058.75680393,
+      },
+      {
+        group: 'Dataset 4',
+        date: '2023-01-19',
+        value: null,
+        surplus: 4347.704175756872,
+      },
+    ],
+    options: {
+      title: 'Bubble (time series)',
+      axes: {
+        bottom: {
+          title: '2023 Annual Sales Figures',
+          scaleType: 'time',
+          mapsTo: 'date',
+        },
+        left: {
+          mapsTo: 'value',
+        },
+      },
+      bubble: {
+        radiusMapsTo: 'surplus',
+      },
+      height: '400px',
     },
-    bubble: {
-      radiusMapsTo: 'surplus',
-    },
-    height: '400px',
   },
 };
 
-export const BubbleDiscrete = Template.bind({});
-BubbleDiscrete.args = {
-  isInverse: false,
-  type: CarbonChartType.bubble,
-  dataSet: [
-    {
-      group: 'Dataset 1',
-      key: 'Qty',
-      value: 8000,
-      surplus: 50000,
-    },
-    {
-      group: 'Dataset 1',
-      key: 'More',
-      value: 23500,
-      surplus: 15000,
-    },
-    {
-      group: 'Dataset 1',
-      key: 'Sold',
-      value: 53100,
-      surplus: 32000,
-    },
-    {
-      group: 'Dataset 1',
-      key: 'Restocking',
-      value: 42300,
-      surplus: 53000,
-    },
-    {
-      group: 'Dataset 1',
-      key: 'Misc',
-      value: 12300,
-      surplus: 34000,
-    },
-    {
-      group: 'Dataset 2',
-      key: 'Qty',
-      value: 34200,
-      surplus: 23000,
-    },
-    {
-      group: 'Dataset 2',
-      key: 'More',
-      value: 53200,
-      surplus: 31000,
-    },
-    {
-      group: 'Dataset 2',
-      key: 'Sold',
-      value: 42300,
-      surplus: 13000,
-    },
-    {
-      group: 'Dataset 2',
-      key: 'Restocking',
-      value: 13400,
-      surplus: 55000,
-    },
-    {
-      group: 'Dataset 2',
-      key: 'Misc',
-      value: 0,
-      surplus: 12000,
-    },
-    {
-      group: 'Dataset 3',
-      key: 'Qty',
-      value: 41200,
-      surplus: 32000,
-    },
-    {
-      group: 'Dataset 3',
-      key: 'More',
-      value: 18400,
-      surplus: 12000,
-    },
-    {
-      group: 'Dataset 3',
-      key: 'Sold',
-      value: 34210,
-      surplus: 18000,
-    },
-    {
-      group: 'Dataset 3',
-      key: 'Restocking',
-      value: 1400,
-      surplus: 21000,
-    },
-    {
-      group: 'Dataset 3',
-      key: 'Misc',
-      value: 42100,
-      surplus: 22000,
-    },
-    {
-      group: 'Dataset 4',
-      key: 'Qty',
-      value: 22000,
-      surplus: 32000,
-    },
-    {
-      group: 'Dataset 4',
-      key: 'More',
-      value: 4000,
-      surplus: 32000,
-    },
-    {
-      group: 'Dataset 4',
-      key: 'Sold',
-      value: 9000,
-      surplus: 43000,
-    },
-    {
-      group: 'Dataset 4',
-      key: 'Restocking',
-      value: 24000,
-      surplus: 43000,
-    },
-    {
-      group: 'Dataset 4',
-      key: 'Misc',
-      value: 7000,
-      surplus: 21000,
-    },
-  ],
-  options: {
-    title: 'Bubble (discrete)',
-    axes: {
-      bottom: {
-        title: '2023 Annual Sales Figures',
-        scaleType: 'labels',
-        mapsTo: 'key',
-      },
-      left: {
-        mapsTo: 'value',
+export const BubbleDiscrete = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.bubble,
+    dataSet: [
+      {
+        group: 'Dataset 1',
+        key: 'Qty',
+        value: 8000,
+        surplus: 50000,
       },
+      {
+        group: 'Dataset 1',
+        key: 'More',
+        value: 23500,
+        surplus: 15000,
+      },
+      {
+        group: 'Dataset 1',
+        key: 'Sold',
+        value: 53100,
+        surplus: 32000,
+      },
+      {
+        group: 'Dataset 1',
+        key: 'Restocking',
+        value: 42300,
+        surplus: 53000,
+      },
+      {
+        group: 'Dataset 1',
+        key: 'Misc',
+        value: 12300,
+        surplus: 34000,
+      },
+      {
+        group: 'Dataset 2',
+        key: 'Qty',
+        value: 34200,
+        surplus: 23000,
+      },
+      {
+        group: 'Dataset 2',
+        key: 'More',
+        value: 53200,
+        surplus: 31000,
+      },
+      {
+        group: 'Dataset 2',
+        key: 'Sold',
+        value: 42300,
+        surplus: 13000,
+      },
+      {
+        group: 'Dataset 2',
+        key: 'Restocking',
+        value: 13400,
+        surplus: 55000,
+      },
+      {
+        group: 'Dataset 2',
+        key: 'Misc',
+        value: 0,
+        surplus: 12000,
+      },
+      {
+        group: 'Dataset 3',
+        key: 'Qty',
+        value: 41200,
+        surplus: 32000,
+      },
+      {
+        group: 'Dataset 3',
+        key: 'More',
+        value: 18400,
+        surplus: 12000,
+      },
+      {
+        group: 'Dataset 3',
+        key: 'Sold',
+        value: 34210,
+        surplus: 18000,
+      },
+      {
+        group: 'Dataset 3',
+        key: 'Restocking',
+        value: 1400,
+        surplus: 21000,
+      },
+      {
+        group: 'Dataset 3',
+        key: 'Misc',
+        value: 42100,
+        surplus: 22000,
+      },
+      {
+        group: 'Dataset 4',
+        key: 'Qty',
+        value: 22000,
+        surplus: 32000,
+      },
+      {
+        group: 'Dataset 4',
+        key: 'More',
+        value: 4000,
+        surplus: 32000,
+      },
+      {
+        group: 'Dataset 4',
+        key: 'Sold',
+        value: 9000,
+        surplus: 43000,
+      },
+      {
+        group: 'Dataset 4',
+        key: 'Restocking',
+        value: 24000,
+        surplus: 43000,
+      },
+      {
+        group: 'Dataset 4',
+        key: 'Misc',
+        value: 7000,
+        surplus: 21000,
+      },
+    ],
+    options: {
+      title: 'Bubble (discrete)',
+      axes: {
+        bottom: {
+          title: '2023 Annual Sales Figures',
+          scaleType: 'labels',
+          mapsTo: 'key',
+        },
+        left: {
+          mapsTo: 'value',
+        },
+      },
+      bubble: {
+        radiusMapsTo: 'surplus',
+      },
+      height: '400px',
     },
-    bubble: {
-      radiusMapsTo: 'surplus',
-    },
-    height: '400px',
   },
 };
 
-export const BubbleDualDiscreteAxes = Template.bind({});
-BubbleDualDiscreteAxes.args = {
-  isInverse: false,
-  type: CarbonChartType.bubble,
-  dataSet: [
-    {
-      group: '2014',
-      product: 'Cloud',
-      value: 162,
-      problem: 'Skills',
-    },
-    {
-      group: '2014',
-      product: 'Mainframe',
-      value: 340,
-      problem: 'Skills',
-    },
-    {
-      group: '2014',
-      product: 'Cloud',
-      value: 202,
-      problem: 'Software',
-    },
-    {
-      group: '2014',
-      product: 'Mainframe',
-      value: 64,
-      problem: 'Software',
-    },
-    {
-      group: '2014',
-      product: 'Cloud',
-      value: 102,
-      problem: 'Staffing',
-    },
-    {
-      group: '2014',
-      product: 'Mainframe',
-      value: 88,
-      problem: 'Staffing',
-    },
-    {
-      group: '2016',
-      product: 'Cloud',
-      value: 136,
-      problem: 'Skills',
-    },
-    {
-      group: '2016',
-      product: 'Mainframe',
-      value: 74,
-      problem: 'Skills',
-    },
-    {
-      group: '2016',
-      product: 'Cloud',
-      value: 45,
-      problem: 'Software',
-    },
-    {
-      group: '2016',
-      product: 'Mainframe',
-      value: 24,
-      problem: 'Software',
-    },
-    {
-      group: '2016',
-      product: 'Cloud',
-      value: 36,
-      problem: 'Staffing',
-    },
-    {
-      group: '2016',
-      product: 'Mainframe',
-      value: 44,
-      problem: 'Staffing',
-    },
-    {
-      group: '2018',
-      product: 'Cloud',
-      value: 78,
-      problem: 'Skills',
-    },
-    {
-      group: '2018',
-      product: 'Mainframe',
-      value: 94,
-      problem: 'Skills',
-    },
-    {
-      group: '2018',
-      product: 'Cloud',
-      value: 56,
-      problem: 'Software',
-    },
-    {
-      group: '2018',
-      product: 'Mainframe',
-      value: 104,
-      problem: 'Software',
-    },
-    {
-      group: '2018',
-      product: 'Cloud',
-      value: 146,
-      problem: 'Staffing',
-    },
-    {
-      group: '2018',
-      product: 'Mainframe',
-      value: 274,
-      problem: 'Staffing',
-    },
-  ],
-  options: {
-    title: 'Bubble (dual discrete axes)',
-    axes: {
-      bottom: {
-        title: 'Problems',
-        scaleType: 'labels',
-        mapsTo: 'problem',
-      },
-      left: {
-        scaleType: 'labels',
-        mapsTo: 'product',
-        title: 'Products',
+export const BubbleDualDiscreteAxes = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.bubble,
+    dataSet: [
+      {
+        group: '2014',
+        product: 'Cloud',
+        value: 162,
+        problem: 'Skills',
       },
+      {
+        group: '2014',
+        product: 'Mainframe',
+        value: 340,
+        problem: 'Skills',
+      },
+      {
+        group: '2014',
+        product: 'Cloud',
+        value: 202,
+        problem: 'Software',
+      },
+      {
+        group: '2014',
+        product: 'Mainframe',
+        value: 64,
+        problem: 'Software',
+      },
+      {
+        group: '2014',
+        product: 'Cloud',
+        value: 102,
+        problem: 'Staffing',
+      },
+      {
+        group: '2014',
+        product: 'Mainframe',
+        value: 88,
+        problem: 'Staffing',
+      },
+      {
+        group: '2016',
+        product: 'Cloud',
+        value: 136,
+        problem: 'Skills',
+      },
+      {
+        group: '2016',
+        product: 'Mainframe',
+        value: 74,
+        problem: 'Skills',
+      },
+      {
+        group: '2016',
+        product: 'Cloud',
+        value: 45,
+        problem: 'Software',
+      },
+      {
+        group: '2016',
+        product: 'Mainframe',
+        value: 24,
+        problem: 'Software',
+      },
+      {
+        group: '2016',
+        product: 'Cloud',
+        value: 36,
+        problem: 'Staffing',
+      },
+      {
+        group: '2016',
+        product: 'Mainframe',
+        value: 44,
+        problem: 'Staffing',
+      },
+      {
+        group: '2018',
+        product: 'Cloud',
+        value: 78,
+        problem: 'Skills',
+      },
+      {
+        group: '2018',
+        product: 'Mainframe',
+        value: 94,
+        problem: 'Skills',
+      },
+      {
+        group: '2018',
+        product: 'Cloud',
+        value: 56,
+        problem: 'Software',
+      },
+      {
+        group: '2018',
+        product: 'Mainframe',
+        value: 104,
+        problem: 'Software',
+      },
+      {
+        group: '2018',
+        product: 'Cloud',
+        value: 146,
+        problem: 'Staffing',
+      },
+      {
+        group: '2018',
+        product: 'Mainframe',
+        value: 274,
+        problem: 'Staffing',
+      },
+    ],
+    options: {
+      title: 'Bubble (dual discrete axes)',
+      axes: {
+        bottom: {
+          title: 'Problems',
+          scaleType: 'labels',
+          mapsTo: 'problem',
+        },
+        left: {
+          scaleType: 'labels',
+          mapsTo: 'product',
+          title: 'Products',
+        },
+      },
+      bubble: {
+        radiusMapsTo: 'value',
+      },
+      height: '400px',
     },
-    bubble: {
-      radiusMapsTo: 'value',
-    },
-    height: '400px',
   },
 };
 
-export const BubbleEmptyState = Template.bind({});
-BubbleEmptyState.args = {
-  isInverse: false,
-  type: CarbonChartType.bubble,
-  dataSet: [],
-  options: {
-    title: 'Bubble (empty state)',
-    axes: {
-      bottom: {
-        title: 'No. of employees',
-        mapsTo: 'sales',
-        includeZero: false,
-      },
-      left: {
-        title: 'Annual sales',
-        mapsTo: 'profit',
-        includeZero: false,
+export const BubbleEmptyState = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.bubble,
+    dataSet: [],
+    options: {
+      title: 'Bubble (empty state)',
+      axes: {
+        bottom: {
+          title: 'No. of employees',
+          mapsTo: 'sales',
+          includeZero: false,
+        },
+        left: {
+          title: 'Annual sales',
+          mapsTo: 'profit',
+          includeZero: false,
+        },
       },
+      bubble: {
+        radiusMapsTo: 'surplus',
+      },
+      height: '400px',
     },
-    bubble: {
-      radiusMapsTo: 'surplus',
-    },
-    height: '400px',
   },
 };
 
-export const BubbleSkeleton = Template.bind({});
-BubbleSkeleton.args = {
-  isInverse: false,
-  type: CarbonChartType.bubble,
-  dataSet: [],
-  options: {
-    title: 'Bubble (skeleton)',
-    axes: {
-      bottom: {
-        title: 'No. of employees',
-        mapsTo: 'sales',
-        includeZero: false,
-      },
-      left: {
-        title: 'Annual sales',
-        mapsTo: 'profit',
-        includeZero: false,
+export const BubbleSkeleton = {
+  render: Template,
+
+  args: {
+    isInverse: false,
+    type: CarbonChartType.bubble,
+    dataSet: [],
+    options: {
+      title: 'Bubble (skeleton)',
+      axes: {
+        bottom: {
+          title: 'No. of employees',
+          mapsTo: 'sales',
+          includeZero: false,
+        },
+        left: {
+          title: 'Annual sales',
+          mapsTo: 'profit',
+          includeZero: false,
+        },
       },
+      bubble: {
+        radiusMapsTo: 'surplus',
+      },
+      data: {
+        loading: true,
+      },
+      height: '400px',
     },
-    bubble: {
-      radiusMapsTo: 'surplus',
-    },
-    data: {
-      loading: true,
-    },
-    height: '400px',
   },
 };