@react-magma/charts 11.0.0-next.0 → 11.0.0-next.1

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

@@ -27,6 +27,854 @@ const Template: Story<CarbonChartProps> = args => (
   </Card>
 );
 
+export const CustomDomainLine = Template.bind({});
+CustomDomainLine.args = {
+  isInverse: false,
+  type: CarbonChartType.line,
+  dataSet: [
+    {
+      group: 'Dataset 1',
+      key: 'Qty',
+      value: 34200,
+    },
+    {
+      group: 'Dataset 1',
+      key: 'More',
+      value: 23500,
+    },
+    {
+      group: 'Dataset 1',
+      key: 'Sold',
+      value: 53100,
+    },
+    {
+      group: 'Dataset 1',
+      key: 'Restocking',
+      value: 42300,
+    },
+    {
+      group: 'Dataset 1',
+      key: 'Misc',
+      value: 12300,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'Qty',
+      value: 34200,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'More',
+      value: 53200,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'Sold',
+      value: 42300,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'Restocking',
+      value: 21400,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'Misc',
+      value: 0,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'Qty',
+      value: 41200,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'More',
+      value: 18400,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'Sold',
+      value: 34210,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'Restocking',
+      value: 1400,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'Misc',
+      value: 42100,
+    },
+    {
+      group: 'Dataset 4',
+      key: 'Qty',
+      value: 22000,
+    },
+    {
+      group: 'Dataset 4',
+      key: 'More',
+      value: 1200,
+    },
+    {
+      group: 'Dataset 4',
+      key: 'Sold',
+      value: 9000,
+    },
+    {
+      group: 'Dataset 4',
+      key: 'Restocking',
+      value: 24000,
+      audienceSize: 10,
+    },
+    {
+      group: 'Dataset 4',
+      key: 'Misc',
+      value: 3000,
+      audienceSize: 10,
+    },
+  ],
+  options: {
+    title: 'Custom domain (line)',
+    axes: {
+      bottom: {
+        title: '2023 Annual Sales Figures',
+        mapsTo: 'key',
+        scaleType: 'labels',
+        domain: ['Qty', 'More', 'Misc'],
+      },
+      left: {
+        domain: [10000, 50000],
+        mapsTo: 'value',
+        title: 'Conversion rate',
+        scaleType: 'linear',
+      },
+    },
+    height: '400px',
+  },
+};
+
+export const RotatedTicksLine = Template.bind({});
+RotatedTicksLine.args = {
+  isInverse: false,
+  type: CarbonChartType.line,
+  dataSet: [
+    {
+      group: 'Dataset 1',
+      date: '2023-12-30',
+      value: 32100,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2023-12-31',
+      value: 23500,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2024-01-01',
+      value: 53100,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2024-01-02',
+      value: 42300,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2024-01-03',
+      value: 12300,
+    },
+  ],
+  options: {
+    title: 'Rotated ticks (line)',
+    axes: {
+      bottom: {
+        scaleType: 'time',
+        mapsTo: 'date',
+        ticks: {
+          rotation: 'always',
+        },
+      },
+      left: {
+        mapsTo: 'value',
+      },
+    },
+    legend: {
+      clickable: false,
+    },
+    height: '400px',
+  },
+};
+
+export const LineTimeSeries15SecondInterval = Template.bind({});
+LineTimeSeries15SecondInterval.args = {
+  isInverse: false,
+  type: CarbonChartType.line,
+  dataSet: [
+    {
+      group: 'Dataset 1',
+      date: '2020-12-11T04:59:15.000Z',
+      value: 15,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2020-12-11T04:59:30.000Z',
+      value: 15,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2020-12-11T04:59:45.000Z',
+      value: 7,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2020-12-11T05:00:00.000Z',
+      value: 2,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2020-12-11T05:00:15.000Z',
+      value: 9,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2020-12-11T05:00:30.000Z',
+      value: 13,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2020-12-11T05:00:45.000Z',
+      value: 8,
+    },
+  ],
+  options: {
+    title: 'Line (time series) - 15 second interval',
+    axes: {
+      left: {
+        mapsTo: 'value',
+      },
+      bottom: {
+        scaleType: 'time',
+        mapsTo: 'date',
+      },
+    },
+    legend: {
+      clickable: false,
+    },
+    height: '400px',
+  },
+};
+
+export const LogAxis = Template.bind({});
+LogAxis.args = {
+  isInverse: false,
+  type: CarbonChartType.line,
+  dataSet: [
+    {
+      group: 'Dataset 1',
+      date: '2023-12-30',
+      value: 300100,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2023-12-31',
+      value: 235000,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2024-01-01',
+      value: 153100,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2024-01-02',
+      value: 142300,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2024-01-03',
+      value: 82300,
+    },
+  ],
+  options: {
+    title: 'Log Axis',
+    axes: {
+      bottom: {
+        scaleType: 'time',
+        mapsTo: 'date',
+      },
+      left: {
+        mapsTo: 'value',
+        scaleType: 'log',
+        includeZero: false,
+      },
+    },
+    height: '400px',
+  },
+};
+
+export const PreSelectedGroupsLine = Template.bind({});
+PreSelectedGroupsLine.args = {
+  isInverse: false,
+  type: CarbonChartType.line,
+  dataSet: [
+    {
+      group: 'Dataset 1',
+      key: 'Qty',
+      value: 34200,
+    },
+    {
+      group: 'Dataset 1',
+      key: 'More',
+      value: 23500,
+    },
+    {
+      group: 'Dataset 1',
+      key: 'Sold',
+      value: 53100,
+    },
+    {
+      group: 'Dataset 1',
+      key: 'Restocking',
+      value: 42300,
+    },
+    {
+      group: 'Dataset 1',
+      key: 'Misc',
+      value: 12300,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'Qty',
+      value: 34200,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'More',
+      value: 56000,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'Sold',
+      value: 42300,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'Restocking',
+      value: 21400,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'Misc',
+      value: 0,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'Qty',
+      value: 41200,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'More',
+      value: 18400,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'Sold',
+      value: 34210,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'Restocking',
+      value: 1400,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'Misc',
+      value: 42100,
+    },
+    {
+      group: 'Dataset 4',
+      key: 'Qty',
+      value: 22000,
+    },
+    {
+      group: 'Dataset 4',
+      key: 'More',
+      value: 1200,
+    },
+    {
+      group: 'Dataset 4',
+      key: 'Sold',
+      value: 9000,
+    },
+    {
+      group: 'Dataset 4',
+      key: 'Restocking',
+      value: 24000,
+      audienceSize: 10,
+    },
+    {
+      group: 'Dataset 4',
+      key: 'Misc',
+      value: 3000,
+      audienceSize: 10,
+    },
+  ],
+  options: {
+    title: 'Pre-selected groups (line)',
+    data: {
+      selectedGroups: ['Dataset 1', 'Dataset 3'],
+    },
+    axes: {
+      bottom: {
+        title: '2023 Annual Sales Figures',
+        mapsTo: 'key',
+        scaleType: 'labels',
+      },
+      left: {
+        mapsTo: 'value',
+        title: 'Conversion rate',
+        scaleType: 'linear',
+      },
+    },
+    height: '400px',
+  },
+};
+
+export const LeftAlignedVerticalLegendLine = Template.bind({});
+LeftAlignedVerticalLegendLine.args = {
+  isInverse: false,
+  type: CarbonChartType.line,
+  dataSet: [
+    {
+      group: 'Dataset 1',
+      key: 'Qty',
+      value: 34200,
+    },
+    {
+      group: 'Dataset 1',
+      key: 'More',
+      value: 23500,
+    },
+    {
+      group: 'Dataset 1',
+      key: 'Sold',
+      value: 53100,
+    },
+    {
+      group: 'Dataset 1',
+      key: 'Restocking',
+      value: 42300,
+    },
+    {
+      group: 'Dataset 1',
+      key: 'Misc',
+      value: 12300,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'Qty',
+      value: 34200,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'More',
+      value: 53200,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'Sold',
+      value: 42300,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'Restocking',
+      value: 21400,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'Misc',
+      value: 0,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'Qty',
+      value: 41200,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'More',
+      value: 18400,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'Sold',
+      value: 34210,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'Restocking',
+      value: 1400,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'Misc',
+      value: 42100,
+    },
+    {
+      group: 'Dataset 4',
+      key: 'Qty',
+      value: 22000,
+    },
+    {
+      group: 'Dataset 4',
+      key: 'More',
+      value: 1200,
+    },
+    {
+      group: 'Dataset 4',
+      key: 'Sold',
+      value: 9000,
+    },
+    {
+      group: 'Dataset 4',
+      key: 'Restocking',
+      value: 24000,
+      audienceSize: 10,
+    },
+    {
+      group: 'Dataset 4',
+      key: 'Misc',
+      value: 3000,
+      audienceSize: 10,
+    },
+  ],
+  options: {
+    title: 'Left aligned vertical legend (line)',
+    axes: {
+      bottom: {
+        title: '2023 Annual Sales Figures',
+        mapsTo: 'key',
+        scaleType: 'labels',
+      },
+      left: {
+        mapsTo: 'value',
+        title: 'Conversion rate',
+        scaleType: 'linear',
+      },
+    },
+    legend: {
+      position: 'left',
+      orientation: 'vertical',
+    },
+    height: '400px',
+  },
+};
+
+export const ThresholdsLine = Template.bind({});
+ThresholdsLine.args = {
+  isInverse: false,
+  type: CarbonChartType.line,
+  dataSet: [
+    {
+      group: 'Dataset 1',
+      date: '2023-01-01',
+      value: 50000,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2023-01-05',
+      value: 65000,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2023-01-08',
+      value: null,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2023-01-13',
+      value: 49213,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2023-01-17',
+      value: 51213,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2023-01-02',
+      value: 0,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2023-01-06',
+      value: 57312,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2023-01-08',
+      value: 27432,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2023-01-15',
+      value: 70323,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2023-01-19',
+      value: 21300,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2023-01-01',
+      value: 40000,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2023-01-05',
+      value: null,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2023-01-08',
+      value: 18000,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2023-01-13',
+      value: 39213,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2023-01-17',
+      value: 61213,
+    },
+    {
+      group: 'Dataset 4',
+      date: '2023-01-02',
+      value: 20000,
+    },
+    {
+      group: 'Dataset 4',
+      date: '2023-01-06',
+      value: 37312,
+    },
+    {
+      group: 'Dataset 4',
+      date: '2023-01-08',
+      value: 51432,
+    },
+    {
+      group: 'Dataset 4',
+      date: '2023-01-15',
+      value: 25332,
+    },
+    {
+      group: 'Dataset 4',
+      date: '2023-01-19',
+      value: null,
+    },
+  ],
+  options: {
+    title: 'Thresholds (line)',
+    axes: {
+      bottom: {
+        title: '2023 Annual Sales Figures',
+        mapsTo: 'date',
+        scaleType: 'time',
+        thresholds: [
+          {
+            value: new Date(2023, 0, 11, 0, 0, 0),
+            label: 'Custom formatter',
+            valueFormatter: e =>
+              new Intl.DateTimeFormat('en-CA', {
+                month: 'short',
+                day: '2-digit',
+              }).format(e),
+          },
+        ],
+      },
+      left: {
+        mapsTo: 'value',
+        title: 'Conversion rate',
+        scaleType: 'linear',
+        thresholds: [
+          {
+            value: 55000,
+            label: 'Custom label',
+            fillColor: 'orange',
+          },
+          {
+            value: 10000,
+            fillColor: '#03a9f4',
+          },
+        ],
+      },
+    },
+    curve: 'curveMonotoneX',
+    height: '400px',
+  },
+};
+
+export const LineTimeSeriesSingleDatum = Template.bind({});
+LineTimeSeriesSingleDatum.args = {
+  isInverse: false,
+  type: CarbonChartType.line,
+  dataSet: [
+    {
+      group: 'Dataset 1',
+      date: '2020-01-06T19:43:16.000Z',
+      value: 10,
+    },
+  ],
+  options: {
+    title: 'Line (time series) - Single datum',
+    axes: {
+      left: {
+        mapsTo: 'value',
+      },
+      bottom: {
+        scaleType: 'time',
+        mapsTo: 'date',
+      },
+    },
+    legend: {
+      clickable: false,
+    },
+    height: '400px',
+  },
+};
+
+export const TruncatedlabelsLine = Template.bind({});
+TruncatedlabelsLine.args = {
+  isInverse: false,
+  type: CarbonChartType.line,
+  dataSet: [
+    {
+      group: 'Dataset 1',
+      key: 'Qty',
+      value: 34200,
+    },
+    {
+      group: 'Dataset 1',
+      key: 'More',
+      value: 23500,
+    },
+    {
+      group: 'Dataset 1',
+      key: 'Sold',
+      value: 53100,
+    },
+    {
+      group: 'Dataset 1',
+      key: '347FEDE2F7403759069E5F84B65B49D2467D8914B5184738699259AA310EB0F9',
+      value: 42300,
+    },
+    {
+      group: 'Dataset 1',
+      key: 'Misc',
+      value: 12300,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'Qty',
+      value: 34200,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'More',
+      value: 53200,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'Sold',
+      value: 42300,
+    },
+    {
+      group: 'Dataset 2',
+      key: '347FEDE2F7403759069E5F84B65B49D2467D8914B5184738699259AA310EB0F9',
+      value: 21400,
+    },
+    {
+      group: 'Dataset 2',
+      key: 'Misc',
+      value: 0,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'Qty',
+      value: 41200,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'More',
+      value: 18400,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'Sold',
+      value: 34210,
+    },
+    {
+      group: 'Dataset 3',
+      key: '347FEDE2F7403759069E5F84B65B49D2467D8914B5184738699259AA310EB0F9',
+      value: 1400,
+    },
+    {
+      group: 'Dataset 3',
+      key: 'Misc',
+      value: 42100,
+    },
+    {
+      group: 'LongLabelShouldBeTruncated',
+      key: 'Qty',
+      value: 22000,
+    },
+    {
+      group: 'LongLabelShouldBeTruncated',
+      key: 'More',
+      value: 1200,
+    },
+    {
+      group: 'LongLabelShouldBeTruncated',
+      key: 'Sold',
+      value: 9000,
+    },
+    {
+      group: 'LongLabelShouldBeTruncated',
+      key: '347FEDE2F7403759069E5F84B65B49D2467D8914B5184738699259AA310EB0F9',
+      value: 24000,
+      audienceSize: 10,
+    },
+    {
+      group: 'LongLabelShouldBeTruncated',
+      key: 'Misc',
+      value: 3000,
+      audienceSize: 10,
+    },
+  ],
+  options: {
+    title: 'Truncated labels (line)',
+    axes: {
+      bottom: {
+        title: '2023 Annual Sales Figures',
+        mapsTo: 'key',
+        scaleType: 'labels',
+      },
+      left: {
+        mapsTo: 'value',
+        title: 'Conversion rate',
+        scaleType: 'linear',
+      },
+    },
+    height: '400px',
+  },
+};
+
 export const LineDiscrete = Template.bind({});
 LineDiscrete.args = {
   isInverse: false,
@@ -622,6 +1470,208 @@ LineLineDualDualAxes.args = {
   },
 };
 
+export const LineTimeSeriesAllLabelsInPrimaryFormat = Template.bind({});
+LineTimeSeriesAllLabelsInPrimaryFormat.args = {
+  isInverse: false,
+  type: CarbonChartType.line,
+  dataSet: [
+    {
+      group: 'Dataset 1',
+      date: '2020-01-23T06:00:00.000Z',
+      value: 10,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2020-01-29T06:00:00.000Z',
+      value: 10,
+    },
+  ],
+  options: {
+    title: 'Line (time series) - All labels in primary format',
+    axes: {
+      left: {
+        mapsTo: 'value',
+      },
+      bottom: {
+        scaleType: 'time',
+        mapsTo: 'date',
+      },
+    },
+    timeScale: {
+      addSpaceOnEdges: 0,
+    },
+    legend: {
+      clickable: false,
+    },
+    height: '400px',
+  },
+};
+
+export const LineTimeSeriesTwoIcons = Template.bind({});
+LineTimeSeriesTwoIcons.args = {
+  isInverse: false,
+  type: CarbonChartType.line,
+  dataSet: [
+    {
+      group: 'Dataset 1',
+      date: '2019-01-01T05:00:00.000Z',
+      value: 50000,
+      surplus: 776202545.2043447,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2019-01-05T05:00:00.000Z',
+      value: 65000,
+      surplus: 1185729357.0244992,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2019-01-08T05:00:00.000Z',
+      value: null,
+      surplus: 11613.75907479044,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2019-01-13T05:00:00.000Z',
+      value: 49213,
+      surplus: 847080513.346657,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2019-01-17T05:00:00.000Z',
+      value: 51213,
+      surplus: 1211892509.000086,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2019-01-02T05:00:00.000Z',
+      value: 0,
+      surplus: 6102.7727993504,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2019-01-06T05:00:00.000Z',
+      value: 57312,
+      surplus: 261556941.96214834,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2019-01-08T05:00:00.000Z',
+      value: 27432,
+      surplus: 14178837.917517675,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2019-01-15T05:00:00.000Z',
+      value: 70323,
+      surplus: 295263282.23943055,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2019-01-19T05:00:00.000Z',
+      value: 21300,
+      surplus: 133872100.36457807,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2019-01-01T05:00:00.000Z',
+      value: 40000,
+      surplus: 302619995.3236921,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2019-01-05T05:00:00.000Z',
+      value: null,
+      surplus: 19518.355960758956,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2019-01-08T05:00:00.000Z',
+      value: 18000,
+      surplus: 431282259.09100664,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2019-01-13T05:00:00.000Z',
+      value: 39213,
+      surplus: 788505803.1662132,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2019-01-17T05:00:00.000Z',
+      value: 61213,
+      surplus: 1273123736.0033627,
+    },
+    {
+      group: 'Dataset 4',
+      date: '2019-01-02T05:00:00.000Z',
+      value: 20000,
+      surplus: 466576638.7877422,
+    },
+    {
+      group: 'Dataset 4',
+      date: '2019-01-06T05:00:00.000Z',
+      value: 37312,
+      surplus: 368228069.08366436,
+    },
+    {
+      group: 'Dataset 4',
+      date: '2019-01-08T05:00:00.000Z',
+      value: 51432,
+      surplus: 240908388.9062717,
+    },
+    {
+      group: 'Dataset 4',
+      date: '2019-01-15T05:00:00.000Z',
+      value: 25332,
+      surplus: 422842585.96060365,
+    },
+    {
+      group: 'Dataset 4',
+      date: '2019-01-19T05:00:00.000Z',
+      value: null,
+      surplus: 24964.179219263424,
+    },
+  ],
+  options: {
+    title: 'Line (time series) - two icons',
+    axes: {
+      bottom: {
+        title: '2019 Annual Sales Figures',
+        mapsTo: 'date',
+        scaleType: 'time',
+      },
+      left: {
+        mapsTo: 'value',
+        title: 'Conversion rate',
+        scaleType: 'linear',
+      },
+    },
+    curve: 'curveMonotoneX',
+    toolbar: {
+      enabled: true,
+      numberOfIcons: 2,
+      controls: [
+        {
+          type: 'Reset zoom',
+        },
+        {
+          type: 'Zoom in',
+        },
+        {
+          type: 'Zoom out',
+        },
+      ],
+    },
+    zoomBar: {
+      top: {
+        enabled: true,
+      },
+    },
+    height: '400px',
+  },
+};
+
 export const LineEmptyState = Template.bind({});
 LineEmptyState.args = {
   isInverse: false,