npm - @react-magma/charts - Versions diffs - 10.0.0 → 10.0.1-next.1 - Mend

@react-magma/charts 10.0.0 → 10.0.1-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/src/components/CarbonChart/CarbonChartBubble.stories.tsx ADDED Viewed

@@ -0,0 +1,606 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+import { Card } from 'react-magma-dom';
+export default {
+  component: CarbonChart,
+  title: 'CarbonChart/Bubble',
+  argTypes: {
+    isInverse: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    type: {
+      control: {
+        type: 'select',
+        options: CarbonChartType,
+      },
+    },
+  },
+} as Meta;
+const Template: Story<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,
+      },
+    },
+    bubble: {
+      radiusMapsTo: 'surplus',
+      radiusLabel: 'Surplus',
+    },
+    legend: {
+      additionalItems: [
+        {
+          type: 'radius',
+          name: 'Surplus',
+        },
+      ],
+    },
+    height: '400px',
+  },
+};
+// Uncomment when adding new charts. Issues: #1054, #1055, #1056
+// 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',
+//       },
+//     },
+//     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',
+//       },
+//     },
+//     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',
+//       },
+//     },
+//     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,
+//       },
+//     },
+//     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,
+//       },
+//     },
+//     bubble: {
+//       radiusMapsTo: 'surplus',
+//     },
+//     data: {
+//       loading: true,
+//     },
+//     height: '400px',
+//   },
+// };

package/src/components/CarbonChart/CarbonChartBullet.stories.tsx ADDED Viewed

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { CarbonChart, CarbonChartProps, CarbonChartType } from '.';
+import { Card } from 'react-magma-dom';
+export default {
+  component: CarbonChart,
+  title: 'CarbonChart/Bullet',
+  argTypes: {
+    isInverse: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    type: {
+      control: {
+        type: 'select',
+        options: CarbonChartType,
+      },
+    },
+  },
+} as Meta;
+const Template: Story<CarbonChartProps> = args => (
+  <Card isInverse={args.isInverse} style={{ padding: '12px' }}>
+    <CarbonChart {...args} />
+  </Card>
+);
+export const BasicBullet = Template.bind({});
+BasicBullet.args = {
+  isInverse: false,
+  type: CarbonChartType.bullet,
+  dataSet: [
+    {
+      title: 'Item E',
+      group: 'D3',
+      ranges: [350, 650, 980],
+      marker: 1575,
+      value: 400,
+    },
+    {
+      title: 'Item D',
+      group: 'D2',
+      ranges: [750, 1200, null],
+      marker: 1725,
+      value: 2100,
+    },
+    {
+      title: 'Item C',
+      group: 'D3',
+      ranges: [350, 500, 1005],
+      marker: 1340,
+      value: 550,
+    },
+    {
+      title: 'Item B',
+      group: 'D1',
+      ranges: [300, 895, 1600],
+      marker: 1455,
+      value: 1000,
+    },
+    {
+      title: 'Item A',
+      group: 'D1',
+      ranges: [800, 1000, 1400],
+      marker: 1275,
+      value: 250,
+    },
+  ],
+  options: {
+    title: 'Basic bullet',
+    axes: {
+      bottom: {
+        mapsTo: 'value',
+        extendLinearDomainBy: 'marker',
+      },
+      left: {
+        scaleType: 'labels',
+        mapsTo: 'title',
+      },
+      right: {
+        scaleType: 'labels-ratio',
+        mapsTo: 'title',
+      },
+    },
+    height: '251px',
+  },
+};