From 2fad90a8b82b45a326027795bf6d16cc8c0463b3 Mon Sep 17 00:00:00 2001 From: Nikita Orliak Date: Tue, 12 Nov 2024 14:35:11 +0100 Subject: [PATCH 1/8] feat(Charts): Add the `Data Visualization` tab with pages `Getting Started`, `Chart Types` and `Chart Demos`. Add new examples in the storybook. --- .changeset/feat-charts-documentation.md | 5 + .changeset/feat-fifth-batch-of-charts.md | 5 + .changeset/feat-fourth-batch-of-charts.md | 5 + .changeset/feat-third-batch-of-charts.md | 5 + .../components/CarbonChart/CarbonChart.tsx | 26 +- .../CarbonChart/CarbonChartArea.stories.tsx | 272 +++ .../CarbonChartAreaStacked.stories.tsx | 152 ++ .../CarbonChartBarGrouped.stories.tsx | 124 ++ .../CarbonChartBarStacked.stories.tsx | 125 ++ .../CarbonChartBoxplot.stories.tsx | 272 +++ .../CarbonChart/CarbonChartBubble.stories.tsx | 604 ++++++ .../CarbonChart/CarbonChartBullet.stories.tsx | 89 + .../CarbonChart/CarbonChartGauge.stories.tsx | 78 + .../CarbonChartHistogram.stories.tsx | 765 +++++++ .../CarbonChart/CarbonChartLine.stories.tsx | 1050 ++++++++++ .../CarbonChart/CarbonChartMeter.stories.tsx | 214 ++ .../CarbonChart/CarbonChartRadar.stories.tsx | 477 +++++ .../CarbonChartScatter.stories.tsx | 465 +++++ .../CarbonChartSparkline.stories.tsx | 222 ++ .../CarbonChart/CarbonChartStep.stories.tsx | 173 ++ website/react-magma-docs/gatsby-config.js | 14 + website/react-magma-docs/gatsby-node.js | 5 + .../src/components/MainNav/index.js | 65 +- .../src/components/PageContent/index.js | 59 +- .../src/images/chart-types/area.jpg | Bin 0 -> 6910 bytes .../src/images/chart-types/boxplot.jpg | Bin 0 -> 4843 bytes .../src/images/chart-types/bubble.jpg | Bin 0 -> 12063 bytes .../src/images/chart-types/bullet.jpg | Bin 0 -> 4953 bytes .../src/images/chart-types/circle-pack.jpg | Bin 0 -> 22053 bytes .../src/images/chart-types/donut.jpg | Bin 0 -> 10108 bytes .../src/images/chart-types/floating-bar.jpg | Bin 0 -> 3435 bytes .../src/images/chart-types/gauge.jpg | Bin 0 -> 4560 bytes .../src/images/chart-types/grouped-bar.jpg | Bin 0 -> 5436 bytes .../src/images/chart-types/heatmap.jpg | Bin 0 -> 3716 bytes .../src/images/chart-types/histogram.jpg | Bin 0 -> 3065 bytes .../src/images/chart-types/line.jpg | Bin 0 -> 5888 bytes .../src/images/chart-types/lollipop.jpg | Bin 0 -> 5964 bytes .../src/images/chart-types/meter.jpg | Bin 0 -> 3739 bytes .../src/images/chart-types/pie.jpg | Bin 0 -> 8579 bytes .../src/images/chart-types/radar.jpg | Bin 0 -> 17869 bytes .../src/images/chart-types/scatter.jpg | Bin 0 -> 5303 bytes .../src/images/chart-types/simple-bar.jpg | Bin 0 -> 3173 bytes .../src/images/chart-types/stacked-area.jpg | Bin 0 -> 5361 bytes .../src/images/chart-types/stacked-bar.jpg | Bin 0 -> 3945 bytes .../src/images/chart-types/treemap.jpg | Bin 0 -> 2668 bytes .../data-visualization-intro/introduction.mdx | 117 ++ .../pages/data-visualization/chart-demos.mdx | 1778 +++++++++++++++++ .../pages/data-visualization/chart-types.css | 96 + .../pages/data-visualization/chart-types.mdx | 304 +++ 49 files changed, 7561 insertions(+), 5 deletions(-) create mode 100644 .changeset/feat-charts-documentation.md create mode 100644 .changeset/feat-fifth-batch-of-charts.md create mode 100644 .changeset/feat-fourth-batch-of-charts.md create mode 100644 .changeset/feat-third-batch-of-charts.md create mode 100644 packages/charts/src/components/CarbonChart/CarbonChartBoxplot.stories.tsx create mode 100644 packages/charts/src/components/CarbonChart/CarbonChartBubble.stories.tsx create mode 100644 packages/charts/src/components/CarbonChart/CarbonChartBullet.stories.tsx create mode 100644 packages/charts/src/components/CarbonChart/CarbonChartGauge.stories.tsx create mode 100644 packages/charts/src/components/CarbonChart/CarbonChartHistogram.stories.tsx create mode 100644 packages/charts/src/components/CarbonChart/CarbonChartMeter.stories.tsx create mode 100644 packages/charts/src/components/CarbonChart/CarbonChartRadar.stories.tsx create mode 100644 packages/charts/src/components/CarbonChart/CarbonChartScatter.stories.tsx create mode 100644 packages/charts/src/components/CarbonChart/CarbonChartSparkline.stories.tsx create mode 100644 packages/charts/src/components/CarbonChart/CarbonChartStep.stories.tsx create mode 100644 website/react-magma-docs/src/images/chart-types/area.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/boxplot.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/bubble.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/bullet.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/circle-pack.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/donut.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/floating-bar.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/gauge.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/grouped-bar.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/heatmap.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/histogram.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/line.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/lollipop.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/meter.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/pie.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/radar.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/scatter.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/simple-bar.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/stacked-area.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/stacked-bar.jpg create mode 100644 website/react-magma-docs/src/images/chart-types/treemap.jpg create mode 100644 website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx create mode 100644 website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx create mode 100644 website/react-magma-docs/src/pages/data-visualization/chart-types.css create mode 100644 website/react-magma-docs/src/pages/data-visualization/chart-types.mdx diff --git a/.changeset/feat-charts-documentation.md b/.changeset/feat-charts-documentation.md new file mode 100644 index 0000000000..255e76f022 --- /dev/null +++ b/.changeset/feat-charts-documentation.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': minor +--- + +feat(Charts): Add the `Data Visualization` tab with pages `Getting Started`, `Chart Types` and `Chart Demos`. diff --git a/.changeset/feat-fifth-batch-of-charts.md b/.changeset/feat-fifth-batch-of-charts.md new file mode 100644 index 0000000000..1a709e1fed --- /dev/null +++ b/.changeset/feat-fifth-batch-of-charts.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': minor +--- + +feat(CarbonCharts): Add new charts: `Histogram`, `Scatter`, `Step`, `SparkLine`. diff --git a/.changeset/feat-fourth-batch-of-charts.md b/.changeset/feat-fourth-batch-of-charts.md new file mode 100644 index 0000000000..82b04b7d05 --- /dev/null +++ b/.changeset/feat-fourth-batch-of-charts.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': minor +--- + +feat(CarbonCharts): Add new charts: `Boxplot`, `Bullet`, `Combo`. diff --git a/.changeset/feat-third-batch-of-charts.md b/.changeset/feat-third-batch-of-charts.md new file mode 100644 index 0000000000..d06c9761de --- /dev/null +++ b/.changeset/feat-third-batch-of-charts.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': minor +--- + +feat(CarbonCharts): Add new charts: `Bubble`, `Gauge`, `Meter`, `Radar`. diff --git a/packages/charts/src/components/CarbonChart/CarbonChart.tsx b/packages/charts/src/components/CarbonChart/CarbonChart.tsx index c19bdb2481..3b588ba44c 100644 --- a/packages/charts/src/components/CarbonChart/CarbonChart.tsx +++ b/packages/charts/src/components/CarbonChart/CarbonChart.tsx @@ -12,6 +12,14 @@ import { PieChart, SimpleBarChart, StackedBarChart, + RadarChart, + BoxplotChart, + BubbleChart, + BulletChart, + GaugeChart, + HistogramChart, + MeterChart, + ScatterChart, } from '@carbon/charts-react'; import './styles.min.css'; @@ -21,10 +29,18 @@ export enum CarbonChartType { bar = 'bar', barGrouped = 'barGrouped', barStacked = 'barStacked', + boxplot = 'boxplot', + bubble = 'bubble', + bullet = 'bullet', donut = 'donut', + gauge = 'gauge', + histogram = 'histogram', line = 'line', - pie = 'pie', lollipop = 'lollipop', + meter = 'meter', + pie = 'pie', + radar = 'radar', + scatter = 'scatter', } export interface CarbonChartProps extends React.HTMLAttributes { @@ -460,6 +476,14 @@ export const CarbonChart = React.forwardRef( line: LineChart, lollipop: LollipopChart, pie: PieChart, + radar: RadarChart, + boxplot: BoxplotChart, + bubble: BubbleChart, + bullet: BulletChart, + gauge: GaugeChart, + histogram: HistogramChart, + meter: MeterChart, + scatter: ScatterChart, }; function buildColors() { diff --git a/packages/charts/src/components/CarbonChart/CarbonChartArea.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartArea.stories.tsx index d909b5ee23..b5a677b3f2 100644 --- a/packages/charts/src/components/CarbonChart/CarbonChartArea.stories.tsx +++ b/packages/charts/src/components/CarbonChart/CarbonChartArea.stories.tsx @@ -201,6 +201,105 @@ AreaTimeSeries.args = { }, }; +export const AreaDiscreteDomain = Template.bind({}); +AreaDiscreteDomain.args = { + isInverse: false, + type: CarbonChartType.area, + dataSet: [ + { + group: 'Dataset 1', + value: 10000, + key: 'a', + }, + { + group: 'Dataset 1', + value: 65000, + key: 'b', + }, + { + group: 'Dataset 1', + value: 10000, + key: 'c', + }, + { + group: 'Dataset 1', + value: 49213, + key: 'd', + }, + { + group: 'Dataset 1', + value: 51213, + key: 'e', + }, + { + group: 'Dataset 2', + value: 20000, + key: 'a', + }, + { + group: 'Dataset 2', + value: 25000, + key: 'b', + }, + { + group: 'Dataset 2', + value: 60000, + key: 'c', + }, + { + group: 'Dataset 2', + value: 30213, + key: 'd', + }, + { + group: 'Dataset 2', + value: 55213, + key: 'e', + }, + { + group: 'Dataset 3', + value: 30000, + key: 'a', + }, + { + group: 'Dataset 3', + value: 20000, + key: 'b', + }, + { + group: 'Dataset 3', + value: 40000, + key: 'c', + }, + { + group: 'Dataset 3', + value: 60213, + key: 'd', + }, + { + group: 'Dataset 3', + value: 25213, + key: 'e', + }, + ], + options: { + title: 'Discrete Domain', + axes: { + bottom: { + title: '2023 Annual Sales Figures', + mapsTo: 'key', + scaleType: 'labels', + }, + left: { + mapsTo: 'value', + title: 'Conversion rate', + scaleType: 'linear', + }, + }, + height: '400px', + }, +}; + export const BoundedAreaTimeSeriesNaturalCurve = Template.bind({}); BoundedAreaTimeSeriesNaturalCurve.args = { isInverse: false, @@ -268,6 +367,179 @@ BoundedAreaTimeSeriesNaturalCurve.args = { }, }; +export const AreaMultipleBoundedAreasNaturalCurve = Template.bind({}); +AreaMultipleBoundedAreasNaturalCurve.args = { + isInverse: false, + type: CarbonChartType.area, + dataSet: [ + { + group: 'Dataset 1', + date: '2023-01-01', + value: 47263, + min: 40000, + max: 50000, + }, + { + group: 'Dataset 1', + date: '2023-01-05', + value: 14178, + min: 10000, + max: 20000, + }, + { + group: 'Dataset 1', + date: '2023-01-08', + value: 23094, + min: 10000, + max: 25000, + }, + { + group: 'Dataset 1', + date: '2023-01-13', + value: 45281, + min: 42000, + max: 50000, + }, + { + group: 'Dataset 1', + date: '2023-01-19', + value: -63954, + min: -70000, + max: -10000, + }, + ], + options: { + title: 'Multiple Bounded Areas (Natural Curve)', + legend: { + enabled: false, + }, + bounds: { + upperBoundMapsTo: 'max', + lowerBoundMapsTo: 'min', + }, + axes: { + bottom: { + title: '2023 Annual Sales Figures', + mapsTo: 'date', + scaleType: 'time', + highlights: { + highlightStartMapsTo: 'startHighlight', + highlightEndMapsTo: 'endHighlight', + labelMapsTo: 'label', + data: [ + { + startHighlight: new Date(2023, 0, 3, 0, 0, 0), + label: 'Custom formatter', + endHighlight: new Date(2023, 0, 8, 0, 0, 0), + }, + { + startHighlight: new Date(2023, 0, 13, 0, 0, 0), + label: 'Custom formatter', + endHighlight: new Date(2023, 0, 14, 0, 0, 0), + }, + ], + }, + }, + left: { + mapsTo: 'value', + scaleType: 'linear', + }, + }, + curve: 'curveNatural', + height: '400px', + }, +}; + +export const AreaMultipleBoundedAreasNaturalCurveZoomBarEnabled = Template.bind( + {} +); +AreaMultipleBoundedAreasNaturalCurveZoomBarEnabled.args = { + isInverse: false, + type: CarbonChartType.area, + dataSet: [ + { + group: 'Dataset 1', + date: '2023-01-01', + value: 47263, + min: 40000, + max: 50000, + }, + { + group: 'Dataset 1', + date: '2023-01-05', + value: 14178, + min: 10000, + max: 20000, + }, + { + group: 'Dataset 1', + date: '2023-01-08', + value: 23094, + min: 10000, + max: 25000, + }, + { + group: 'Dataset 1', + date: '2023-01-13', + value: 45281, + min: 42000, + max: 50000, + }, + { + group: 'Dataset 1', + date: '2023-01-19', + value: -63954, + min: -70000, + max: -10000, + }, + ], + options: { + title: 'Multiple Bounded Areas (Natural Curve) - Zoom bar enabled', + legend: { + enabled: false, + }, + bounds: { + upperBoundMapsTo: 'max', + lowerBoundMapsTo: 'min', + }, + axes: { + bottom: { + title: '2023 Annual Sales Figures', + mapsTo: 'date', + scaleType: 'time', + highlights: { + highlightStartMapsTo: 'startHighlight', + highlightEndMapsTo: 'endHighlight', + labelMapsTo: 'label', + data: [ + { + startHighlight: new Date(2023, 0, 3, 0, 0, 0), + label: 'Custom formatter', + endHighlight: new Date(2023, 0, 8, 0, 0, 0), + }, + { + startHighlight: new Date(2023, 0, 13, 0, 0, 0), + label: 'Custom formatter', + endHighlight: new Date(2023, 0, 14, 0, 0, 0), + }, + ], + }, + }, + left: { + mapsTo: 'value', + scaleType: 'linear', + }, + }, + curve: 'curveNatural', + height: '400px', + zoomBar: { + top: { + enabled: true, + }, + }, + }, +}; + export const AreaSkeleton = Template.bind({}); AreaSkeleton.args = { isInverse: false, diff --git a/packages/charts/src/components/CarbonChart/CarbonChartAreaStacked.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartAreaStacked.stories.tsx index 225d12412d..2945ba85fe 100644 --- a/packages/charts/src/components/CarbonChart/CarbonChartAreaStacked.stories.tsx +++ b/packages/charts/src/components/CarbonChart/CarbonChartAreaStacked.stories.tsx @@ -311,3 +311,155 @@ StackedAreaPercentage.args = { height: '400px', }, }; + +export const VerticalStackedAreatimeSeriesWithToolbarOverride = Template.bind( + {} +); +VerticalStackedAreatimeSeriesWithToolbarOverride.args = { + isInverse: false, + type: CarbonChartType.areaStacked, + dataSet: [ + { + group: 'Dataset 1', + date: '2019-01-01T05:00:00.000Z', + value: 10000, + }, + { + group: 'Dataset 1', + date: '2019-01-05T05:00:00.000Z', + value: 65000, + }, + { + group: 'Dataset 1', + date: '2019-01-08T05:00:00.000Z', + value: 10000, + }, + { + group: 'Dataset 1', + date: '2019-01-13T05:00:00.000Z', + value: 49213, + }, + { + group: 'Dataset 1', + date: '2019-01-17T05:00:00.000Z', + value: 51213, + }, + { + group: 'Dataset 2', + date: '2019-01-03T05:00:00.000Z', + value: 75000, + }, + { + group: 'Dataset 2', + date: '2019-01-06T05:00:00.000Z', + value: 57312, + }, + { + group: 'Dataset 2', + date: '2019-01-08T05:00:00.000Z', + value: 21432, + }, + { + group: 'Dataset 2', + date: '2019-01-15T05:00:00.000Z', + value: 70323, + }, + { + group: 'Dataset 2', + date: '2019-01-19T05:00:00.000Z', + value: 21300, + }, + { + group: 'Dataset 3', + date: '2019-01-01T05:00:00.000Z', + value: 50000, + }, + { + group: 'Dataset 3', + date: '2019-01-05T05:00:00.000Z', + value: 15000, + }, + { + group: 'Dataset 3', + date: '2019-01-08T05:00:00.000Z', + value: 20000, + }, + { + group: 'Dataset 3', + date: '2019-01-13T05:00:00.000Z', + value: 39213, + }, + { + group: 'Dataset 3', + date: '2019-01-17T05:00:00.000Z', + value: 61213, + }, + { + group: 'Dataset 4', + date: '2019-01-02T05:00:00.000Z', + value: 10, + }, + { + group: 'Dataset 4', + date: '2019-01-06T05:00:00.000Z', + value: 37312, + }, + { + group: 'Dataset 4', + date: '2019-01-08T05:00:00.000Z', + value: 51432, + }, + { + group: 'Dataset 4', + date: '2019-01-15T05:00:00.000Z', + value: 40323, + }, + { + group: 'Dataset 4', + date: '2019-01-19T05:00:00.000Z', + value: 31300, + }, + ], + options: { + title: 'Vertical stacked area (time series) w/toolbar override', + axes: { + left: { + mapsTo: 'value', + stacked: true, + }, + bottom: { + mapsTo: 'date', + scaleType: 'time', + }, + }, + toolbar: { + enabled: true, + numberOfIcons: 3, + controls: [ + { + type: 'Zoom in', + }, + { + type: 'Zoom out', + }, + { + type: 'Reset zoom', + }, + { + type: 'Custom', + text: 'Custom button', + iconSVG: { + content: ` + `, + }, + }, + ], + }, + zoomBar: { + top: { + enabled: true, + }, + }, + height: '400px', + }, +}; diff --git a/packages/charts/src/components/CarbonChart/CarbonChartBarGrouped.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartBarGrouped.stories.tsx index 3e63bd9aac..c5a41a3a16 100644 --- a/packages/charts/src/components/CarbonChart/CarbonChartBarGrouped.stories.tsx +++ b/packages/charts/src/components/CarbonChart/CarbonChartBarGrouped.stories.tsx @@ -28,6 +28,130 @@ const Template: Story = args => ( ); //Grouped// +export const PreSelectedgroupsGroupedBar = Template.bind({}); +PreSelectedgroupsGroupedBar.args = { + isInverse: false, + type: CarbonChartType.barGrouped, + dataSet: [ + { + group: 'Dataset 1', + key: 'Qty', + value: 65000, + }, + { + group: 'Dataset 1', + key: 'More', + value: -29123, + }, + { + group: 'Dataset 1', + key: 'Sold', + value: -35213, + }, + { + group: 'Dataset 1', + key: 'Restocking', + value: 51213, + }, + { + group: 'Dataset 1', + key: 'Misc', + value: 16932, + }, + { + group: 'Dataset 2', + key: 'Qty', + value: 32432, + }, + { + group: 'Dataset 2', + key: 'More', + value: -21312, + }, + { + group: 'Dataset 2', + key: 'Sold', + value: -56456, + }, + { + group: 'Dataset 2', + key: 'Restocking', + value: -21312, + }, + { + group: 'Dataset 2', + key: 'Misc', + value: 34234, + }, + { + group: 'Dataset 3', + key: 'Qty', + value: -12312, + }, + { + group: 'Dataset 3', + key: 'More', + value: 23232, + }, + { + group: 'Dataset 3', + key: 'Sold', + value: 34232, + }, + { + group: 'Dataset 3', + key: 'Restocking', + value: -12312, + }, + { + group: 'Dataset 3', + key: 'Misc', + value: -34234, + }, + { + group: 'Dataset 4', + key: 'Qty', + value: -32423, + }, + { + group: 'Dataset 4', + key: 'More', + value: 21313, + }, + { + group: 'Dataset 4', + key: 'Sold', + value: 64353, + }, + { + group: 'Dataset 4', + key: 'Restocking', + value: 24134, + }, + { + group: 'Dataset 4', + key: 'Misc', + value: 24134, + }, + ], + options: { + title: 'Pre-selected groups (grouped bar)', + data: { + selectedGroups: ['Dataset 1', 'Dataset 3'], + }, + axes: { + left: { + mapsTo: 'value', + }, + bottom: { + scaleType: 'labels', + mapsTo: 'key', + }, + }, + height: '400px', + }, +}; + export const VerticalGroupedBarDiscrete = Template.bind({}); VerticalGroupedBarDiscrete.args = { isInverse: false, diff --git a/packages/charts/src/components/CarbonChart/CarbonChartBarStacked.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartBarStacked.stories.tsx index 6479d25014..99711f36f7 100644 --- a/packages/charts/src/components/CarbonChart/CarbonChartBarStacked.stories.tsx +++ b/packages/charts/src/components/CarbonChart/CarbonChartBarStacked.stories.tsx @@ -831,3 +831,128 @@ HorizontalStackedBarSkeleton.args = { height: '400px', }, }; + +export const CustomTicksStackedBar = Template.bind({}); +CustomTicksStackedBar.args = { + isInverse: false, + type: CarbonChartType.barStacked, + dataSet: [ + { + group: 'Dataset 1', + date: '2023-01-01', + value: 10000, + }, + { + group: 'Dataset 1', + date: '2023-01-05', + value: 65000, + }, + { + group: 'Dataset 1', + date: '2023-01-08', + value: 10000, + }, + { + group: 'Dataset 1', + date: '2023-01-13', + value: 49213, + }, + { + group: 'Dataset 1', + date: '2023-01-17', + value: 51213, + }, + { + group: 'Dataset 2', + date: '2023-01-03', + value: 75000, + }, + { + group: 'Dataset 2', + date: '2023-01-06', + value: 57312, + }, + { + group: 'Dataset 2', + date: '2023-01-08', + value: 21432, + }, + { + 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: 50000, + }, + { + group: 'Dataset 3', + date: '2023-01-05', + value: 15000, + }, + { + group: 'Dataset 3', + date: '2023-01-08', + value: 20000, + }, + { + 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: 10, + }, + { + 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: 40323, + }, + { + group: 'Dataset 4', + date: '2023-01-19', + value: 31300, + }, + ], + options: { + title: 'Custom ticks (stacked bar)', + axes: { + left: { + mapsTo: 'value', + stacked: true, + }, + bottom: { + mapsTo: 'date', + scaleType: 'time', + ticks: { + values: [new Date(2023, 0, 17, 0, 0, 0)], + }, + }, + }, + height: '400px', + }, +}; diff --git a/packages/charts/src/components/CarbonChart/CarbonChartBoxplot.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartBoxplot.stories.tsx new file mode 100644 index 0000000000..cd23b24a7e --- /dev/null +++ b/packages/charts/src/components/CarbonChart/CarbonChartBoxplot.stories.tsx @@ -0,0 +1,272 @@ +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/Boxplot', + argTypes: { + isInverse: { + control: { + type: 'boolean', + }, + }, + type: { + control: { + type: 'select', + options: CarbonChartType, + }, + }, + }, +} as Meta; + +const Template: Story = args => ( + + + +); + +export const HorizontalBoxplot = Template.bind({}); +HorizontalBoxplot.args = { + isInverse: false, + type: CarbonChartType.boxplot, + dataSet: [ + { + group: 'Q1', + key: 'Monday', + value: 65000, + }, + { + group: 'Q1', + key: 'Tuesday', + value: 29123, + }, + { + group: 'Q1', + key: 'Wednesday', + value: 35213, + }, + { + group: 'Q1', + key: 'Thursday', + value: 51213, + }, + { + group: 'Q1', + key: 'Friday', + value: 16932, + }, + { + group: 'Q2', + key: 'Monday', + value: 32432, + }, + { + group: 'Q2', + key: 'Tuesday', + value: 14312, + }, + { + group: 'Q2', + key: 'Wednesday', + value: 66456, + }, + { + group: 'Q2', + key: 'Thursday', + value: 21312, + }, + { + group: 'Q2', + key: 'Friday', + value: 37234, + }, + { + group: 'Q3', + key: 'Monday', + value: 5312, + }, + { + group: 'Q3', + key: 'Tuesday', + value: 23232, + }, + { + group: 'Q3', + key: 'Wednesday', + value: 34232, + }, + { + group: 'Q3', + key: 'Thursday', + value: 12312, + }, + { + group: 'Q3', + key: 'Friday', + value: 44234, + }, + { + group: 'Q4', + key: 'Monday', + value: 32423, + }, + { + group: 'Q4', + key: 'Tuesday', + value: 21313, + }, + { + group: 'Q4', + key: 'Wednesday', + value: 64353, + }, + { + group: 'Q4', + key: 'Thursday', + value: 24134, + }, + { + group: 'Q4', + key: 'Friday', + value: 45134, + }, + ], + options: { + title: 'Horizontal box plot', + axes: { + bottom: { + mapsTo: 'value', + }, + left: { + scaleType: 'labels', + mapsTo: 'group', + }, + }, + height: '400px', + }, +}; + + +export const VerticalBoxplot = Template.bind({}); +VerticalBoxplot.args = { + isInverse: false, + type: CarbonChartType.boxplot, + dataSet: [ + { + group: 'Q1', + key: 'Monday', + value: 65000, + }, + { + group: 'Q1', + key: 'Tuesday', + value: 29123, + }, + { + group: 'Q1', + key: 'Wednesday', + value: 35213, + }, + { + group: 'Q1', + key: 'Thursday', + value: 51213, + }, + { + group: 'Q1', + key: 'Friday', + value: 16932, + }, + { + group: 'Q2', + key: 'Monday', + value: 32432, + }, + { + group: 'Q2', + key: 'Tuesday', + value: 14312, + }, + { + group: 'Q2', + key: 'Wednesday', + value: 66456, + }, + { + group: 'Q2', + key: 'Thursday', + value: 21312, + }, + { + group: 'Q2', + key: 'Friday', + value: 37234, + }, + { + group: 'Q3', + key: 'Monday', + value: 5312, + }, + { + group: 'Q3', + key: 'Tuesday', + value: 23232, + }, + { + group: 'Q3', + key: 'Wednesday', + value: 34232, + }, + { + group: 'Q3', + key: 'Thursday', + value: 12312, + }, + { + group: 'Q3', + key: 'Friday', + value: 44234, + }, + { + group: 'Q4', + key: 'Monday', + value: 32423, + }, + { + group: 'Q4', + key: 'Tuesday', + value: 21313, + }, + { + group: 'Q4', + key: 'Wednesday', + value: 64353, + }, + { + group: 'Q4', + key: 'Thursday', + value: 24134, + }, + { + group: 'Q4', + key: 'Friday', + value: 45134, + }, + ], + options: { + title: 'Vertical box plot', + axes: { + left: { + mapsTo: 'value', + }, + bottom: { + scaleType: 'labels', + mapsTo: 'group', + }, + }, + height: '400px', + }, +}; + diff --git a/packages/charts/src/components/CarbonChart/CarbonChartBubble.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartBubble.stories.tsx new file mode 100644 index 0000000000..9159d06e51 --- /dev/null +++ b/packages/charts/src/components/CarbonChart/CarbonChartBubble.stories.tsx @@ -0,0 +1,604 @@ +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 = args => ( + + + +); + +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', + }, +}; + +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', + }, +}; diff --git a/packages/charts/src/components/CarbonChart/CarbonChartBullet.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartBullet.stories.tsx new file mode 100644 index 0000000000..9b2d242a25 --- /dev/null +++ b/packages/charts/src/components/CarbonChart/CarbonChartBullet.stories.tsx @@ -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 = args => ( + + + +); + +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', + }, +}; diff --git a/packages/charts/src/components/CarbonChart/CarbonChartGauge.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartGauge.stories.tsx new file mode 100644 index 0000000000..8fbcde4704 --- /dev/null +++ b/packages/charts/src/components/CarbonChart/CarbonChartGauge.stories.tsx @@ -0,0 +1,78 @@ +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/Gauge', + argTypes: { + isInverse: { + control: { + type: 'boolean', + }, + }, + type: { + control: { + type: 'select', + options: CarbonChartType, + }, + }, + }, +} as Meta; + +const Template: Story = args => ( + + + +); + +export const GaugeSemicircularDangerStatus = Template.bind({}); +GaugeSemicircularDangerStatus.args = { + isInverse: false, + type: CarbonChartType.gauge, + dataSet: [ + { + group: 'value', + value: 42, + }, + { + group: 'delta', + value: -13.37, + }, + ], + options: { + title: 'Gauge semicircular -- danger status', + resizable: true, + height: '250px', + gauge: { + type: 'semi', + status: 'danger', + }, + }, +}; + +export const GaugeCircularWarningStatus = Template.bind({}); +GaugeCircularWarningStatus.args = { + isInverse: false, + type: CarbonChartType.gauge, + dataSet: [ + { + group: 'value', + value: 42, + }, + { + group: 'delta', + value: -13.37, + }, + ], + options: { + title: 'Gauge circular -- warning status', + resizable: true, + height: '250px', + gauge: { + status: 'warning', + type: 'full', + }, + }, +}; diff --git a/packages/charts/src/components/CarbonChart/CarbonChartHistogram.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartHistogram.stories.tsx new file mode 100644 index 0000000000..3c5f3e7b5d --- /dev/null +++ b/packages/charts/src/components/CarbonChart/CarbonChartHistogram.stories.tsx @@ -0,0 +1,765 @@ +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/Histogram', + argTypes: { + isInverse: { + control: { + type: 'boolean', + }, + }, + type: { + control: { + type: 'select', + options: CarbonChartType, + }, + }, + }, +} as Meta; + +const Template: Story = args => ( + + + +); + +export const HistogramLinear = Template.bind({}); +HistogramLinear.args = { + isInverse: false, + type: CarbonChartType.histogram, + dataSet: [ + { + group: 'Dataset 1', + age: 20, + }, + { + group: 'Dataset 2', + age: 21, + }, + { + group: 'Dataset 2', + age: 23, + }, + { + group: 'Dataset 3', + age: 21, + }, + { + group: 'Dataset 3', + age: 23, + }, + { + group: 'Dataset 3', + age: 24, + }, + { + group: 'Dataset 1', + age: 30, + }, + { + group: 'Dataset 2', + age: 34, + }, + { + group: 'Dataset 1', + age: 35, + }, + { + group: 'Dataset 3', + age: 30, + }, + { + group: 'Dataset 1', + age: 40, + }, + { + group: 'Dataset 2', + age: 43, + }, + { + group: 'Dataset 1', + age: 45, + }, + { + group: 'Dataset 1', + age: 46, + }, + { + group: 'Dataset 3', + age: 40, + }, + { + group: 'Dataset 3', + age: 43, + }, + { + group: 'Dataset 3', + age: 45, + }, + { + group: 'Dataset 1', + age: 48, + }, + { + group: 'Dataset 1', + age: 50, + }, + { + group: 'Dataset 2', + age: 55, + }, + { + group: 'Dataset 2', + age: 66, + }, + { + group: 'Dataset 2', + age: 58, + }, + { + group: 'Dataset 1', + age: 70, + }, + { + group: 'Dataset 1', + age: 78, + }, + { + group: 'Dataset 3', + age: 71, + }, + { + group: 'Dataset 3', + age: 75, + }, + { + group: 'Dataset 2', + age: 83, + }, + { + group: 'Dataset 2', + age: 86, + }, + { + group: 'Dataset 1', + age: 87, + }, + ], + options: { + title: 'Histogram (linear)', + axes: { + bottom: { + title: 'Age', + mapsTo: 'age', + bins: 10, + limitDomainToBins: true, + }, + left: { + title: 'No. of participants', + scaleType: 'linear', + stacked: true, + binned: true, + }, + }, + height: '400px', + }, +}; + +export const HistogramDefinedBinsNumberLinear = Template.bind({}); +HistogramDefinedBinsNumberLinear.args = { + isInverse: false, + type: CarbonChartType.histogram, + dataSet: [ + { + group: 'Dataset 1', + value: 200, + }, + { + group: 'Dataset 1', + value: 210, + }, + { + group: 'Dataset 1', + value: 230, + }, + { + group: 'Dataset 1', + value: 210, + }, + { + group: 'Dataset 1', + value: 230, + }, + { + group: 'Dataset 1', + value: 240, + }, + { + group: 'Dataset 1', + value: 250, + }, + { + group: 'Dataset 1', + value: 255, + }, + { + group: 'Dataset 1', + value: 290, + }, + { + group: 'Dataset 1', + value: 300, + }, + { + group: 'Dataset 1', + value: 320, + }, + { + group: 'Dataset 1', + value: 330, + }, + { + group: 'Dataset 1', + value: 320, + }, + { + group: 'Dataset 1', + value: 330, + }, + { + group: 'Dataset 1', + value: 320, + }, + { + group: 'Dataset 1', + value: 330, + }, + { + group: 'Dataset 1', + value: 340, + }, + { + group: 'Dataset 1', + value: 350, + }, + { + group: 'Dataset 1', + value: 300, + }, + { + group: 'Dataset 1', + value: 400, + }, + { + group: 'Dataset 1', + value: 420, + }, + { + group: 'Dataset 1', + value: 430, + }, + { + group: 'Dataset 1', + value: 450, + }, + { + group: 'Dataset 1', + value: 460, + }, + { + group: 'Dataset 1', + value: 465, + }, + { + group: 'Dataset 1', + value: 468, + }, + { + group: 'Dataset 1', + value: 400, + }, + { + group: 'Dataset 1', + value: 430, + }, + { + group: 'Dataset 1', + value: 450, + }, + { + group: 'Dataset 1', + value: 400, + }, + { + group: 'Dataset 1', + value: 430, + }, + { + group: 'Dataset 1', + value: 400, + }, + { + group: 'Dataset 1', + value: 430, + }, + { + group: 'Dataset 1', + value: 480, + }, + { + group: 'Dataset 1', + value: 500, + }, + { + group: 'Dataset 1', + value: 550, + }, + { + group: 'Dataset 1', + value: 660, + }, + { + group: 'Dataset 1', + value: 580, + }, + { + group: 'Dataset 1', + value: 700, + }, + { + group: 'Dataset 1', + value: 780, + }, + { + group: 'Dataset 1', + value: 710, + }, + { + group: 'Dataset 1', + value: 750, + }, + { + group: 'Dataset 1', + value: 830, + }, + { + group: 'Dataset 1', + value: 860, + }, + { + group: 'Dataset 1', + value: 870, + }, + { + group: 'Dataset 1', + value: 200, + }, + { + group: 'Dataset 1', + value: 210, + }, + { + group: 'Dataset 1', + value: 230, + }, + { + group: 'Dataset 1', + value: 210, + }, + { + group: 'Dataset 1', + value: 230, + }, + { + group: 'Dataset 1', + value: 240, + }, + { + group: 'Dataset 1', + value: 290, + }, + { + group: 'Dataset 1', + value: 300, + }, + { + group: 'Dataset 1', + value: 340, + }, + { + group: 'Dataset 1', + value: 345, + }, + { + group: 'Dataset 1', + value: 350, + }, + { + group: 'Dataset 1', + value: 380, + }, + { + group: 'Dataset 1', + value: 380, + }, + { + group: 'Dataset 1', + value: 275, + }, + { + group: 'Dataset 1', + value: 260, + }, + { + group: 'Dataset 1', + value: 262, + }, + { + group: 'Dataset 1', + value: 223, + }, + { + group: 'Dataset 1', + value: 218, + }, + { + group: 'Dataset 1', + value: 333, + }, + { + group: 'Dataset 1', + value: 385, + }, + { + group: 'Dataset 1', + value: 300, + }, + { + group: 'Dataset 1', + value: 400, + }, + { + group: 'Dataset 1', + value: 430, + }, + { + group: 'Dataset 1', + value: 444, + }, + { + group: 'Dataset 1', + value: 433, + }, + { + group: 'Dataset 1', + value: 450, + }, + { + group: 'Dataset 1', + value: 375, + }, + { + group: 'Dataset 1', + value: 455, + }, + { + group: 'Dataset 1', + value: 458, + }, + { + group: 'Dataset 1', + value: 460, + }, + { + group: 'Dataset 1', + value: 477, + }, + { + group: 'Dataset 1', + value: 480, + }, + { + group: 'Dataset 1', + value: 484, + }, + { + group: 'Dataset 1', + value: 400, + }, + { + group: 'Dataset 1', + value: 430, + }, + { + group: 'Dataset 1', + value: 450, + }, + { + group: 'Dataset 1', + value: 480, + }, + { + group: 'Dataset 1', + value: 500, + }, + { + group: 'Dataset 1', + value: 550, + }, + { + group: 'Dataset 1', + value: 660, + }, + { + group: 'Dataset 1', + value: 618, + }, + { + group: 'Dataset 1', + value: 720, + }, + { + group: 'Dataset 1', + value: 621, + }, + { + group: 'Dataset 1', + value: 823, + }, + { + group: 'Dataset 1', + value: 525, + }, + { + group: 'Dataset 1', + value: 630, + }, + { + group: 'Dataset 1', + value: 635, + }, + { + group: 'Dataset 1', + value: 637, + }, + { + group: 'Dataset 1', + value: 644, + }, + { + group: 'Dataset 1', + value: 580, + }, + { + group: 'Dataset 1', + value: 570, + }, + { + group: 'Dataset 1', + value: 575, + }, + { + group: 'Dataset 1', + value: 578, + }, + { + group: 'Dataset 1', + value: 582, + }, + { + group: 'Dataset 1', + value: 591, + }, + { + group: 'Dataset 1', + value: 700, + }, + { + group: 'Dataset 1', + value: 780, + }, + { + group: 'Dataset 1', + value: 710, + }, + { + group: 'Dataset 1', + value: 750, + }, + { + group: 'Dataset 1', + value: 830, + }, + { + group: 'Dataset 1', + value: 860, + }, + { + group: 'Dataset 1', + value: 870, + }, + ], + options: { + title: 'Histogram (defined bins number) (linear)', + axes: { + bottom: { + title: 'US $ (million)', + mapsTo: 'value', + bins: 67, + limitDomainToBins: true, + }, + left: { + title: 'No. of transactions', + scaleType: 'linear', + binned: true, + }, + }, + height: '400px', + }, +}; + +export const HistogramDefinedBinsLinear = Template.bind({}); +HistogramDefinedBinsLinear.args = { + isInverse: false, + type: CarbonChartType.histogram, + dataSet: [ + { + group: 'Dataset 1', + age: 20, + }, + { + group: 'Dataset 2', + age: 21, + }, + { + group: 'Dataset 2', + age: 23, + }, + { + group: 'Dataset 3', + age: 21, + }, + { + group: 'Dataset 3', + age: 23, + }, + { + group: 'Dataset 3', + age: 24, + }, + { + group: 'Dataset 1', + age: 30, + }, + { + group: 'Dataset 2', + age: 34, + }, + { + group: 'Dataset 1', + age: 35, + }, + { + group: 'Dataset 3', + age: 30, + }, + { + group: 'Dataset 1', + age: 40, + }, + { + group: 'Dataset 2', + age: 43, + }, + { + group: 'Dataset 1', + age: 45, + }, + { + group: 'Dataset 1', + age: 46, + }, + { + group: 'Dataset 3', + age: 40, + }, + { + group: 'Dataset 3', + age: 43, + }, + { + group: 'Dataset 3', + age: 45, + }, + { + group: 'Dataset 1', + age: 48, + }, + { + group: 'Dataset 1', + age: 50, + }, + { + group: 'Dataset 2', + age: 55, + }, + { + group: 'Dataset 2', + age: 66, + }, + { + group: 'Dataset 2', + age: 58, + }, + { + group: 'Dataset 1', + age: 70, + }, + { + group: 'Dataset 1', + age: 78, + }, + { + group: 'Dataset 3', + age: 71, + }, + { + group: 'Dataset 3', + age: 75, + }, + { + group: 'Dataset 2', + age: 83, + }, + { + group: 'Dataset 2', + age: 86, + }, + { + group: 'Dataset 1', + age: 87, + }, + ], + options: { + title: 'Histogram (defined bins) (linear)', + axes: { + bottom: { + title: 'Age', + mapsTo: 'age', + bins: [20, 40, 50, 60, 90], + limitDomainToBins: true, + }, + left: { + title: 'No. of participants', + scaleType: 'linear', + stacked: true, + binned: true, + }, + }, + height: '400px', + }, +}; diff --git a/packages/charts/src/components/CarbonChart/CarbonChartLine.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartLine.stories.tsx index 8c2357c3cd..253bd5cbb2 100644 --- a/packages/charts/src/components/CarbonChart/CarbonChartLine.stories.tsx +++ b/packages/charts/src/components/CarbonChart/CarbonChartLine.stories.tsx @@ -27,6 +27,854 @@ const Template: Story = args => ( ); +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, diff --git a/packages/charts/src/components/CarbonChart/CarbonChartMeter.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartMeter.stories.tsx new file mode 100644 index 0000000000..66753f92e2 --- /dev/null +++ b/packages/charts/src/components/CarbonChart/CarbonChartMeter.stories.tsx @@ -0,0 +1,214 @@ +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/Meter', + argTypes: { + isInverse: { + control: { + type: 'boolean', + }, + }, + type: { + control: { + type: 'select', + options: CarbonChartType, + }, + }, + }, +} as Meta; + +const Template: Story = args => ( + + + +); + +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', + }, + ], + }, + }, + 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, + }, + 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', + }, + }, + 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', + }, + ], + }, + }, + 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.`, + }, + }, + }, +}; diff --git a/packages/charts/src/components/CarbonChart/CarbonChartRadar.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartRadar.stories.tsx new file mode 100644 index 0000000000..a0bf8bcf13 --- /dev/null +++ b/packages/charts/src/components/CarbonChart/CarbonChartRadar.stories.tsx @@ -0,0 +1,477 @@ +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/Radar', + argTypes: { + isInverse: { + control: { + type: 'boolean', + }, + }, + type: { + control: { + type: 'select', + options: CarbonChartType, + }, + }, + }, +} as Meta; + +const Template: Story = args => ( + + + +); + +export const Radar = Template.bind({}); +Radar.args = { + isInverse: false, + type: CarbonChartType.radar, + dataSet: [ + { + product: 'Product 1', + feature: 'Price', + score: 60, + }, + { + product: 'Product 1', + feature: 'Usability', + score: 92, + }, + { + product: 'Product 1', + feature: 'Availability', + score: 5, + }, + { + product: 'Product 1', + feature: 'Performance', + score: 85, + }, + { + product: 'Product 1', + feature: 'Quality', + score: 60, + }, + { + product: 'Product 2', + feature: 'Price', + score: 70, + }, + { + product: 'Product 2', + feature: 'Usability', + score: 63, + }, + { + product: 'Product 2', + feature: 'Availability', + score: 78, + }, + { + product: 'Product 2', + feature: 'Performance', + score: 50, + }, + { + product: 'Product 2', + feature: 'Quality', + score: 30, + }, + ], + options: { + title: 'Radar', + radar: { + axes: { + angle: 'feature', + value: 'score', + }, + }, + data: { + groupMapsTo: 'product', + }, + height: '400px', + }, +}; + +export const RadarCentered = Template.bind({}); +RadarCentered.args = { + isInverse: false, + type: CarbonChartType.radar, + dataSet: [ + { + product: 'Product 1', + feature: 'Price', + score: 60, + }, + { + product: 'Product 1', + feature: 'Usability', + score: 92, + }, + { + product: 'Product 1', + feature: 'Availability', + score: 5, + }, + { + product: 'Product 1', + feature: 'Performance', + score: 85, + }, + { + product: 'Product 1', + feature: 'Quality', + score: 60, + }, + { + product: 'Product 2', + feature: 'Price', + score: 70, + }, + { + product: 'Product 2', + feature: 'Usability', + score: 63, + }, + { + product: 'Product 2', + feature: 'Availability', + score: 78, + }, + { + product: 'Product 2', + feature: 'Performance', + score: 50, + }, + { + product: 'Product 2', + feature: 'Quality', + score: 30, + }, + ], + options: { + title: 'Radar (centered)', + radar: { + axes: { + angle: 'feature', + value: 'score', + }, + alignment: 'center', + }, + data: { + groupMapsTo: 'product', + }, + legend: { + alignment: 'center', + }, + height: '400px', + }, +}; + +export const RadarMissingDatapoints = Template.bind({}); +RadarMissingDatapoints.args = { + isInverse: false, + type: CarbonChartType.radar, + dataSet: [ + { + group: 'Sugar', + key: 'London', + value: 25, + }, + { + group: 'Oil', + key: 'London', + value: 6, + }, + { + group: 'Water', + key: 'London', + value: 12, + }, + { + group: 'Sugar', + key: 'Milan', + value: 13, + }, + { + group: 'Oil', + key: 'Milan', + value: 6, + }, + { + group: 'Water', + key: 'Milan', + value: 28, + }, + { + group: 'Sugar', + key: 'Paris', + value: 19, + }, + { + group: 'Oil', + key: 'Paris', + value: 16, + }, + { + group: 'Water', + key: 'Paris', + value: 10, + }, + { + group: 'Sugar', + key: 'New York', + value: 11, + }, + { + group: 'Oil', + key: 'New York', + value: 18, + }, + { + group: 'Water', + key: 'New York', + value: 8, + }, + { + group: 'Sugar', + key: 'Sydney', + value: 12, + }, + { + group: 'Oil', + key: 'Sydney', + value: 16, + }, + ], + options: { + title: 'Radar - Missing datapoints', + height: '400px', + }, +}; + +export const RadarDense = Template.bind({}); +RadarDense.args = { + isInverse: false, + type: CarbonChartType.radar, + dataSet: [ + { + month: 'January', + activity: 'Eating', + hoursAvg: 2, + }, + { + month: 'January', + activity: 'Drinking', + hoursAvg: 6, + }, + { + month: 'January', + activity: 'Sleeping', + hoursAvg: 6, + }, + { + month: 'January', + activity: 'Working', + hoursAvg: 8, + }, + { + month: 'January', + activity: 'Walking', + hoursAvg: 1, + }, + { + month: 'January', + activity: 'Running', + hoursAvg: 0.5, + }, + { + month: 'January', + activity: 'Cycling', + hoursAvg: 1, + }, + { + month: 'January', + activity: 'Swimming', + hoursAvg: 0, + }, + { + month: 'February', + activity: 'Eating', + hoursAvg: 1.5, + }, + { + month: 'February', + activity: 'Drinking', + hoursAvg: 9, + }, + { + month: 'February', + activity: 'Sleeping', + hoursAvg: 7, + }, + { + month: 'February', + activity: 'Working', + hoursAvg: 9, + }, + { + month: 'February', + activity: 'Walking', + hoursAvg: 2, + }, + { + month: 'February', + activity: 'Running', + hoursAvg: 2, + }, + { + month: 'February', + activity: 'Cycling', + hoursAvg: 0, + }, + { + month: 'February', + activity: 'Swimming', + hoursAvg: 1.5, + }, + { + month: 'March', + activity: 'Eating', + hoursAvg: 3, + }, + { + month: 'March', + activity: 'Drinking', + hoursAvg: 5, + }, + { + month: 'March', + activity: 'Sleeping', + hoursAvg: 5, + }, + { + month: 'March', + activity: 'Working', + hoursAvg: 6, + }, + { + month: 'March', + activity: 'Walking', + hoursAvg: 3, + }, + { + month: 'March', + activity: 'Running', + hoursAvg: 9, + }, + { + month: 'March', + activity: 'Cycling', + hoursAvg: 1, + }, + { + month: 'March', + activity: 'Swimming', + hoursAvg: 7, + }, + { + month: 'April', + activity: 'Eating', + hoursAvg: 5, + }, + { + month: 'April', + activity: 'Drinking', + hoursAvg: 1, + }, + { + month: 'April', + activity: 'Sleeping', + hoursAvg: 4, + }, + { + month: 'April', + activity: 'Working', + hoursAvg: 2, + }, + { + month: 'April', + activity: 'Walking', + hoursAvg: 5, + }, + { + month: 'April', + activity: 'Running', + hoursAvg: 4, + }, + { + month: 'April', + activity: 'Cycling', + hoursAvg: 6, + }, + { + month: 'April', + activity: 'Swimming', + hoursAvg: 3, + }, + { + month: 'May', + activity: 'Eating', + hoursAvg: 7, + }, + { + month: 'May', + activity: 'Drinking', + hoursAvg: 0, + }, + { + month: 'May', + activity: 'Sleeping', + hoursAvg: 5, + }, + { + month: 'May', + activity: 'Working', + hoursAvg: 4, + }, + { + month: 'May', + activity: 'Walking', + hoursAvg: 8, + }, + { + month: 'May', + activity: 'Running', + hoursAvg: 2, + }, + { + month: 'May', + activity: 'Cycling', + hoursAvg: 3, + }, + { + month: 'May', + activity: 'Swimming', + hoursAvg: 1, + }, + ], + options: { + title: 'Radar - Dense', + radar: { + axes: { + angle: 'activity', + value: 'hoursAvg', + }, + }, + data: { + groupMapsTo: 'month', + }, + height: '400px', + }, +}; diff --git a/packages/charts/src/components/CarbonChart/CarbonChartScatter.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartScatter.stories.tsx new file mode 100644 index 0000000000..b291a506d3 --- /dev/null +++ b/packages/charts/src/components/CarbonChart/CarbonChartScatter.stories.tsx @@ -0,0 +1,465 @@ +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/Scatter', + argTypes: { + isInverse: { + control: { + type: 'boolean', + }, + }, + type: { + control: { + type: 'select', + options: CarbonChartType, + }, + }, + }, +} as Meta; + +const Template: Story = args => ( + + + +); + +export const ScatterLinearXAndY = Template.bind({}); +ScatterLinearXAndY.args = { + isInverse: false, + type: CarbonChartType.scatter, + dataSet: [ + { + group: 'Dataset 1', + employees: 5000, + sales: 32100, + }, + { + group: 'Dataset 1', + employees: 3000, + sales: 25100, + }, + { + group: 'Dataset 1', + employees: 8000, + sales: 12100, + }, + { + group: 'Dataset 1', + employees: 4000, + sales: 53100, + }, + { + group: 'Dataset 2', + employees: 5000, + sales: 32100, + }, + { + group: 'Dataset 2', + employees: 2000, + sales: 34100, + }, + { + group: 'Dataset 2', + employees: 4000, + sales: 23100, + }, + { + group: 'Dataset 2', + employees: 7000, + sales: 14100, + }, + { + group: 'Dataset 2', + employees: 6000, + sales: 53100, + }, + ], + options: { + title: 'Scatter (linear x & y)', + axes: { + bottom: { + title: 'No. of employees', + mapsTo: 'employees', + scaleType: 'linear', + }, + left: { + title: 'Annual sales', + mapsTo: 'sales', + scaleType: 'linear', + }, + }, + height: '400px', + }, +}; + +export const ScatterTimeSeries = Template.bind({}); +ScatterTimeSeries.args = { + isInverse: false, + type: CarbonChartType.scatter, + 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: 'Scatter (time series)', + axes: { + bottom: { + title: '2019 Annual Sales Figures', + scaleType: 'time', + mapsTo: 'date', + }, + left: { + mapsTo: 'value', + }, + }, + height: '400px', + }, +}; + +export const ScatterDiscrete = Template.bind({}); +ScatterDiscrete.args = { + isInverse: false, + type: CarbonChartType.scatter, + 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, + }, + { + group: 'Dataset 4', + key: 'Misc', + value: 3000, + }, + ], + options: { + title: 'Scatter (discrete)', + axes: { + bottom: { + title: '2019 Annual Sales Figures', + scaleType: 'labels', + mapsTo: 'key', + }, + left: { + mapsTo: 'value', + }, + }, + height: '400px', + }, +}; + +export const ScatterDualAxes = Template.bind({}); +ScatterDualAxes.args = { + isInverse: false, + type: CarbonChartType.scatter, + dataSet: [ + { + group: 'Orders', + date: 'January', + orderCount: 121, + }, + { + group: 'Orders', + date: 'February', + orderCount: 321, + }, + { + group: 'Orders', + date: 'March', + orderCount: 370, + }, + { + group: 'Orders', + date: 'April', + orderCount: 329, + }, + { + group: 'Orders', + date: 'May', + orderCount: 121, + }, + { + group: 'Products', + date: 'January', + productCount: 26100, + }, + { + group: 'Products', + date: 'February', + productCount: 25100, + }, + { + group: 'Products', + date: 'March', + productCount: 28100, + }, + { + group: 'Products', + date: 'April', + productCount: 15900, + }, + { + group: 'Products', + date: 'May', + productCount: 34100, + }, + ], + options: { + title: 'Scatter (dual axes)', + axes: { + bottom: { + mapsTo: 'date', + scaleType: 'labels', + }, + left: { + title: 'order count', + mapsTo: 'orderCount', + scaleType: 'linear', + }, + right: { + title: 'product count', + mapsTo: 'productCount', + scaleType: 'linear', + correspondingDatasets: ['Products'], + }, + }, + height: '400px', + }, +}; + +export const ScatterEmptyState = Template.bind({}); +ScatterEmptyState.args = { + isInverse: false, + type: CarbonChartType.scatter, + dataSet: [], + options: { + title: 'Scatter (empty state)', + axes: { + bottom: { + title: '2019 Annual Sales Figures', + scaleType: 'time', + mapsTo: 'date', + }, + left: { + mapsTo: 'value', + }, + }, + height: '400px', + }, +}; + +export const ScatterSkeleton = Template.bind({}); +ScatterSkeleton.args = { + isInverse: false, + type: CarbonChartType.scatter, + dataSet: [], + options: { + title: 'Scatter (skeleton)', + axes: { + bottom: { + title: '2019 Annual Sales Figures', + scaleType: 'time', + mapsTo: 'date', + }, + left: { + mapsTo: 'value', + }, + }, + data: { + loading: true, + }, + height: '400px', + }, +}; diff --git a/packages/charts/src/components/CarbonChart/CarbonChartSparkline.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartSparkline.stories.tsx new file mode 100644 index 0000000000..382acd7b83 --- /dev/null +++ b/packages/charts/src/components/CarbonChart/CarbonChartSparkline.stories.tsx @@ -0,0 +1,222 @@ +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/Sparkline', + argTypes: { + isInverse: { + control: { + type: 'boolean', + }, + }, + type: { + control: { + type: 'select', + options: CarbonChartType, + }, + }, + }, +} as Meta; + +const Template: Story = args => ( + + + +); + +export const AreaSparkline = Template.bind({}); +AreaSparkline.args = { + isInverse: false, + type: CarbonChartType.area, + dataSet: [ + { + group: 'Dataset 1', + date: '2019-05-21T19:21:00.000Z', + value: 2, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:22:00.000Z', + value: 3, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:23:00.000Z', + value: 5, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:24:00.000Z', + value: 1, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:25:00.000Z', + value: 4, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:26:00.000Z', + value: 4, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:27:00.000Z', + value: 3, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:28:00.000Z', + value: 4, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:29:00.000Z', + value: 2, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:30:00.000Z', + value: 0, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:31:00.000Z', + value: 5, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:32:00.000Z', + value: 5, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:33:00.000Z', + value: 6, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:34:00.000Z', + value: 2, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:35:00.000Z', + value: 3, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:36:00.000Z', + value: 6, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:38:00.000Z', + value: 2, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:39:00.000Z', + value: 6, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:40:00.000Z', + value: 0, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:41:00.000Z', + value: 3, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:42:00.000Z', + value: 2, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:43:00.000Z', + value: 4, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:44:00.000Z', + value: 3, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:45:00.000Z', + value: 4, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:46:00.000Z', + value: 2, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:47:00.000Z', + value: 4, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:48:00.000Z', + value: 1, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:49:00.000Z', + value: 1, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:50:00.000Z', + value: 3, + }, + { + group: 'Dataset 1', + date: '2019-05-21T19:51:00.000Z', + value: 2, + }, + ], + options: { + title: 'Sparkline', + height: '400px', + grid: { + x: { + enabled: false, + }, + y: { + enabled: false, + }, + }, + axes: { + bottom: { + visible: false, + title: '2019 Annual Sales Figures', + mapsTo: 'date', + scaleType: 'time', + }, + left: { + visible: false, + mapsTo: 'value', + scaleType: 'linear', + }, + }, + color: { + gradient: { + enabled: true, + }, + }, + points: { + enabled: false, + }, + legend: { + enabled: false, + }, + }, +}; diff --git a/packages/charts/src/components/CarbonChart/CarbonChartStep.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartStep.stories.tsx new file mode 100644 index 0000000000..b48eb91f53 --- /dev/null +++ b/packages/charts/src/components/CarbonChart/CarbonChartStep.stories.tsx @@ -0,0 +1,173 @@ +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/Step', + argTypes: { + isInverse: { + control: { + type: 'boolean', + }, + }, + type: { + control: { + type: 'select', + options: CarbonChartType, + }, + }, + }, +} as Meta; + +const Template: Story = args => ( + + + +); + +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', + }, + }, + curve: 'curveStepAfter', + height: '400px', + }, +}; diff --git a/website/react-magma-docs/gatsby-config.js b/website/react-magma-docs/gatsby-config.js index a5a74aac6f..1882cbf05e 100644 --- a/website/react-magma-docs/gatsby-config.js +++ b/website/react-magma-docs/gatsby-config.js @@ -68,6 +68,20 @@ module.exports = { path: `${__dirname}/src/pages/patterns-intro`, }, }, + { + resolve: `gatsby-source-filesystem`, + options: { + name: `data-visualization`, + path: `${__dirname}/src/pages/data-visualization`, + }, + }, + { + resolve: `gatsby-source-filesystem`, + options: { + name: `data-visualization-intro`, + path: `${__dirname}/src/pages/data-visualization-intro`, + }, + }, { resolve: 'gatsby-plugin-mdx', options: { diff --git a/website/react-magma-docs/gatsby-node.js b/website/react-magma-docs/gatsby-node.js index 7d5e67ddca..181bae7318 100644 --- a/website/react-magma-docs/gatsby-node.js +++ b/website/react-magma-docs/gatsby-node.js @@ -46,6 +46,11 @@ const getPathPrefix = path => { return 'patterns-intro'; } return 'patterns'; + } else if (/data-visualization/.test(path)) { + if (/intro/.test(path)) { + return 'data-visualization-intro' + } + return 'data-visualization'; } }; diff --git a/website/react-magma-docs/src/components/MainNav/index.js b/website/react-magma-docs/src/components/MainNav/index.js index c761ec6ae2..674ea98056 100644 --- a/website/react-magma-docs/src/components/MainNav/index.js +++ b/website/react-magma-docs/src/components/MainNav/index.js @@ -195,6 +195,9 @@ function defaultPanelIndex(location) { if (location.pathname.includes('patterns')) { return [2]; } + if (location.pathname.includes('data-visualization')) { + return [3]; + } } function isAccordionItemOpen(location, id) { @@ -271,6 +274,16 @@ export const MainNav = ({ ...props }) => { ...navFields } } + dataVisualizationDocs: allMdx( + filter: { + fileAbsolutePath: { glob: "**/src/pages/data-visualization/**" } + } + sort: { order: ASC, fields: frontmatter___title } + ) { + edges { + ...navFields + } + } designIntro: allMdx( filter: { fileAbsolutePath: { glob: "**/src/pages/design-intro/**" } @@ -299,6 +312,18 @@ export const MainNav = ({ ...props }) => { ...navFields } } + dataVisualizationIntro: allMdx( + filter: { + fileAbsolutePath: { + glob: "**/src/pages/data-visualization-intro/**" + } + } + sort: { order: ASC, fields: frontmatter___order } + ) { + edges { + ...navFields + } + } } `} render={data => ( @@ -354,7 +379,6 @@ export const MainNav = ({ ...props }) => { > {node.frontmatter.title} - ))} @@ -426,6 +450,7 @@ export const MainNav = ({ ...props }) => { + @@ -463,6 +488,44 @@ export const MainNav = ({ ...props }) => { + + + + Data Visualization + + + Intro + + {data.dataVisualizationIntro.edges.map(({ node }) => ( + + + {node.frontmatter.title} + + + ))} + + API + + {data.dataVisualizationDocs.edges.map(({ node }) => ( + + + {node.frontmatter.title} + + + ))} + + + )} diff --git a/website/react-magma-docs/src/components/PageContent/index.js b/website/react-magma-docs/src/components/PageContent/index.js index 4f4834245b..a6c3978250 100644 --- a/website/react-magma-docs/src/components/PageContent/index.js +++ b/website/react-magma-docs/src/components/PageContent/index.js @@ -26,6 +26,8 @@ const NAV_TABS = { DESIGN_INTRO: 'design_intro', PATTERNS: 'patterns', PATTERNS_INTRO: 'patterns_intro', + DATA_VISUALIZATION: 'data_visualization', + DATA_VISUALIZATION_INTRO: 'data_visualization_intro', }; // Special case pages that don't have secondary navigation. @@ -161,6 +163,16 @@ export const PageContent = ({ children, componentName, type }) => { ...navFields } } + dataVisualizationDocs: allMdx( + filter: { + fileAbsolutePath: { glob: "**/src/pages/data-visualization/**" } + } + sort: { order: ASC, fields: frontmatter___title } + ) { + edges { + ...navFields + } + } designIntro: allMdx( filter: { fileAbsolutePath: { glob: "**/src/pages/design-intro/**" } @@ -189,6 +201,18 @@ export const PageContent = ({ children, componentName, type }) => { ...navFields } } + dataVisualizationIntro: allMdx( + filter: { + fileAbsolutePath: { + glob: "**/src/pages/data-visualization-intro/**" + } + } + sort: { order: ASC, fields: frontmatter___order } + ) { + edges { + ...navFields + } + } } `} render={data => { @@ -199,24 +223,38 @@ export const PageContent = ({ children, componentName, type }) => { data.designPatternDocs, componentName ); + const dataVisualizationDocs = getDataNode( + data.dataVisualizationDocs, + componentName + ); const designIntro = getDataNode(data.designIntro, componentName); const apiIntro = getDataNode(data.apiIntro, componentName); const patternsIntro = getDataNode(data.patternsIntro, componentName); + const dataVisualizationIntro = getDataNode( + data.dataVisualizationIntro, + componentName + ); const designLink = designDocs?.node.fields.slug; const apiLink = apiDocs?.node.fields.slug; const patternsLink = patternsDocs?.node.fields.slug; const designPatternsLink = designPatternDocs?.node.fields.slug; + const dataVisualizationLink = dataVisualizationDocs?.node.fields.slug; const hasDocs = !!( apiDocs || designDocs || patternsDocs || - designPatternDocs + designPatternDocs || + dataVisualizationDocs ); - const apiNavTabToLink = patternsDocs ? patternsLink : apiLink; + const apiNavTabToLink = patternsDocs + ? patternsLink + : dataVisualizationDocs + ? dataVisualizationLink + : apiLink; const designNavTabToLink = designPatternDocs ? designPatternsLink : designLink; @@ -230,6 +268,11 @@ export const PageContent = ({ children, componentName, type }) => { return patternsDocs; } } + if (dataVisualizationDocs) { + if (type === NAV_TABS.DATA_VISUALIZATION) { + return dataVisualizationDocs; + } + } if (apiDocs || designDocs) { if (type === NAV_TABS.API) { return apiDocs; @@ -238,7 +281,12 @@ export const PageContent = ({ children, componentName, type }) => { return designDocs; } } - if (designIntro || patternsIntro || apiIntro) { + if ( + designIntro || + patternsIntro || + apiIntro || + dataVisualizationIntro + ) { if (type === NAV_TABS.API_INTRO) { return apiIntro; } @@ -248,6 +296,9 @@ export const PageContent = ({ children, componentName, type }) => { if (type === NAV_TABS.PATTERNS_INTRO) { return patternsIntro; } + if (type === NAV_TABS.DATA_VISUALIZATION_INTRO) { + return dataVisualizationIntro; + } } }; @@ -329,5 +380,7 @@ PageContent.propTypes = { 'design_intro', 'patterns', 'patterns_intro', + 'data_visualization', + 'data_visualization_intro', ]), }; diff --git a/website/react-magma-docs/src/images/chart-types/area.jpg b/website/react-magma-docs/src/images/chart-types/area.jpg new file mode 100644 index 0000000000000000000000000000000000000000..95ecdbbccbfec9070a740fd12a77c7e8140fa92c GIT binary patch literal 6910 zcmb7JbySqy)_>@sLpr3pk&x~NY3Ur498y4#5(Eb6l9Cc6q@;%KMmmR5Km?=&0j0U4 z@9TRn_xt|2XV#i$X8(TYoLy({wa#+`zgYnY)Ra_}03;*;Ktgn4x1$jg` zczAh!ErJ9Bfv~Z#NpWyUdG1o)<@uk-O&352LNY=!LO~(~kO`4c2$61j0P0_=q97p# z@MmD4prNCJkdP55B|?mh@^1)1K|w=8Mn%6_0B{g;WC9cdgzQ}5&)om*xxxibU6R)> z%51NQzdiHL1>5>hzL}E3yoUp~5j?v})kiJnmFUN6gEF@uB!;Glrj?IiCzAfL<68)T zOdEt|^Ts%=%s|Z-=5Bin#EA1(aak?V|4@-c?c2XxaaKG4FJHvw5HYT zZ#U>~06>O$o2Ap5nc9Hc)wwgn2r^9OH`g=EWyBw`YV&`br+TBI=>!l&#h9)8D&)I+Z}(<%eQ zv`6{&BEP)$_0r*FMi5i|m0ecf=?@`hqh_p8#pP^KbHDH_Ib1w&L5MJD7K=jtwViC? z{aMcN#3gx)f*c1@82}HtPkM(ZHPs5i`6~*?+t5$4R)xPkNhcMT!%~?q(fW-9WqNMK3b+)me2m}M+et3S% z5*>&=aLpQ^mYq$T3scH`h`#_*!{#C$e0C(5*?U5tzQ6c?jek}}56!pm$u}91 z=uqHYDVD5h@r6qD9~ANYN7et3A#(7aX}82wu>tS*Vw~Z(gaEMQxfkK=^tj`; z82xjOvpCpP__h=fp}w$Qq?~_$Ta2*dzgN9Y_<#NdAu2X20f2;x44|R@Q?=2MQBcv5 zFi7b51hol>5ot(x#|=@wL5R|h1OjdV!bR^$gYhx}Y2u>>@XOD-CXe7DZJqdp^_)ay z^yGmUV?_sJkh3DEim*zaCpm;wm+({cUj2 zGK5Ab4W3%1xEO{nGhM}q^G(RmJWnAk^Gmhth84)c4;FQNB?ECymH1zLChsp?B<$f7 z&G-lt>gOP^t?aV9-zV*xw<$~${kS*BSVM^8-h}0}M;01{S1)x{7*mQ+lbe_FsZVX` zhE1ceDNisATGtavUy@+_s{g@675?b`Q^x?X&D{|9;5q#A)}l&&g%B$VV%$4;$fCS! z_eV^eK$9B{DSB}6DHLwv3qqa8TzAr7aD`~H6X@o8W)5icUF90pLzS}Q3Ssh@c&((s zP(8)SJI)WC%8{w$s)XyxT-a)`u8FSmRLf&2_(B&P8RN=2H_z(H=LiNaaMb1>j)a65 zw1p%mvvL|o^6X{~(erh4D_g_JFPlM`x)LKDXjZ%81m0M3=g)F;stPN3gbwy8bg27$ zQ<`N)MwWo(eQI@*dnvcgK1kPj=pmzT3!25IV%&CZ8-VC=ctQi6Wg4eH-F&H1T$Lo#Gy0tt$p9k$e|AH zq1*nDN=uVaa~*bC1S%#;j}a4Jm?aaD#JnA!5A_gZJjNHYa|W*sL#sWPStCTj}u(*tE6 zz|*TLc?v`9!cZ{-*a*jpUG4?9)Q4#4i_9_}@_=HG{1NDIL-vb)in*f4VhfQrGxh|7 z7733olRW9Ovo4h>N;R!1&E|;SJ;Mm_##9wiw{=WQkpGNDL+vjW1LczMvY_ELr%lxp z+q-`Q6jUq+W!^210_E(H>6uo$Jysaox|243IJwzcxYo>m#JYaGU3wZmlgKHRsXKQ# z9=O0#Rc1@~dNh3so}vH`zX6_3(4C1OhFinMsI_~lt z`Cp{vye|~%5?a}((59aCdlu~kwG9Yob}oI~Da$d>J`s)|FZalTtNBakg{Vcj3kqpX zuS$|QiQo=F_47yGJI7gg5~r?RDTef{W=nTL>J)wM7yZJEo~%5boSO9Pa(pk2$8KfN z0{UBH{37-9tq%5h}XYB^#qWf}P-&d*<`h>Sd(l zB- ztoHtbnd{uMgi#D^tZ_C>QcBSJ)tPzInTyw~^K-L^EJeEjY>(IA>B%5-6808~OEdVU63 z9qZ?4cj)*8wB0?b2xJoS-gL_8+Jq33OfuhdOPcu1D5#)UUDNe-(?(l^I;ieSc{*gwDD=Bz^a7?5U?y-@dtUJqOAJl-h7qkMDyB-c_Xm_pA%jeD*+FFe zMahRGsN2rd2ZCLGrRh5Oo&6}&nNBCWER7jTUQg=)q4~1J>KmZcF8D`Jbtgyi6KAL( zFE72J)I#vXs6=dprEUd2#-CaO%WX3D5RTO(+)768t(@M~w1aaOpb_b`YNOh3z#J6q%F6g3ul(Ot@NJVPwtXQ%uD;5~XV-cA;Dmr*6OT&pt zm)%f_G#rCp{rh(kpN&k39o1JxEZSS!5FC71u9HN9=y=jW%825w%lo$}l%Z;+wP>u= zKJ#{lMGw~}G0vXmRFg?qt^?4)v^Uk zN((XK;HICIUJSNfJq}Y&#_gGZ8y$p_zn3_wTM?1~iScSB8r7)?9)k%^w|magQ5QWV z?LF_S6)exF^LU%f{KV#w1(4bG`Yo<)kptSh&%K)AnXLh7^snZpv^{?~(qJmFR|wA* z6$`6dq*$#kIASxUi2gkE58&G2Hr}oVEzhk*JTEkWhVsGZ`Bog5hgv}9i*9ddS2*@X zi(`$v8CTPHs@q4&4V5N)&UKbCZMvu+15wJ)(Gi;@MAD^WiDg+$46ggFlBxx!ON~rZ z6MeXdj=0k)BM5Lr0hAHO|2OI71Bgsn#iB!ZlPL+x!|Ixyz%AKL*0w!KXa{dqhaIdG znbqm&UyyaDGSazhg%y6Yv`215t27KUI1ps=h*2;mxm-pk^EWJt<|DI@iwy~&as0%m z>{v0&(tDPmwk>lsGzy9%b8;8P=IV>jpWTRlqq$mig73b(GY%7d<7T(Ckkhg5@TOnM zzOJ8c_=#pB2*>^GlY;*UdX~41a)KMJ__EWBdv9MZl2aLOpoub%^hwNo*OLtIBG*N< zl5`v{9+l=`IN6eq-!UVRJOkpGrcs0PeAdN&UQ=fF+ILO_b95|#BynuZG#)d0tVl7J z+yGiwc^_qZ4kbIA=kjf4^&V8RehE4jtm8~ERW!NoeC;nr>E-f(L;Ay{v~f)XV&U@G zMgxwirRC(;>^2XRZChI!I^eJT!^{pGIJ3<`# z`85(hTno@vzXV8R09<**vL^&DD*7q8l3e#tIvs|Pjp^Lfm)_^yw^gmxL8h3THIK%` zJ;M0Sqd1^G(0Q7Nyw7ND;-Mb3E4o+!Gt~@c%SXfnEIiBf>MUtVy!Bb7Po>xX$$sm{ z*16`nrk{Q{Kv)i1 zn_$Ak;qR`DjD+;7E32%+N(EoEg|z4!AGlp-^prouMAF1BSgq&8c_AF$f^}$@GgKx1 zoU4UV@i>#bF{!wu;;AbD_ix{?QhCa0uj2`qnb2np3rfX>DfUZ~)mf!4rN3hIqY;`|cNsRy-j(;y=1RotcRSnh|HIclGSF}-K4zsgVtd2?- zE4R^g*X-V#vQZeX#npJLs#ovv2|p4{q}4X#9?>(APPgb<)Wt|q8{wF6x>Vn;`MRa# z`J!4c{Yoa(etFQar>BxeF8m{l&-v4ShVIMyqbskazs!(qHuaQvj%Hy_?(vfLm4QQG z@9AUFP{SYo5hMOZU%_(w1g=Jz04aUF1qI#68wjoz;Y+y)muWRF$Z1^K1k>xWu33Y| z=uU1e6uB={U-^m~Hpdn!nLek-nf-_HlCK5kA{)nYOPfO_(su<tU7X{kN+>c1uaUeXV=Z%9^VTwAe_VzAuja!PmC3~t?#uJ7Q_$qX6h}3JPzwF zw=^y931r~*IW4RMdk*@?hF5Vu&^s(j{sETTB}N1S4Vz%G(M>`#Enx28(rw4$NqT*< z!PS`1siEvrb<=vA@{r>Zp2wwjbZ1HVmxxh;g1J>YjwL0?ddaH2Sv~~bwe~qj+Oah$ z)?3Br-BlO*0Vmgu`Q`Ep{=TPTX|R3 zg$l?5Cf41|`;AHOW?5N@TcnoZ%wJS!7c$8AgG_`hHKNGq@q*+sj@dapNf@HGekGHw zha|Z~P)UKfe&w*o$LrvX_izVllfRr`jw4uLmXxPM9+%&9qAMIcKvc+C$ z-m*c4$4OXE#0!o4W@Pn6=7@H<6;o)}C~&#aXEO0g!>BOj^r1%q`yPU9)Az)_5znI_ zTs&yWyX4EpfaRxgJxg`X0B)h<+PTRo#Lu9aUsaA3QRR@4P*712Zvy_hbV5P~2vLaW z`REvAwF&rTffJPTuEud@uEX|<7*%QI5(;0ZDG0@!wh#1Nx^h}L=^H69Q*0f!U37>! z!5`AZga%}{gbwT3oW?!#f6w6sDkHaCA9Aq4vZ&_L@A7wBcSU9x-y)5<3e?DaPt98Q z?Rg9~lxtg(i%Y+6`bkb-W|f2}8Z>;aJQkJ*Y$=Yd_)m({D(kZ&jpP+(|ALu&h*oIrR&@?y1dllZ+*{lVt%Q+%X80r84t$7(i&&7zy7@{ z&y8Jt_?b|kA+Z;zyx3Ab!x#z~QhXVl0`Ec1luq*&Ihjg64c4wy`(R_^y5@)X?dx(- zJai$VGwm`*=Nk7gd9sJNE$>yY21HpkUBpUKZ-1Izx4BoCce;TN{>s#vSiAB(>1O_4 DuhQYL literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/chart-types/boxplot.jpg b/website/react-magma-docs/src/images/chart-types/boxplot.jpg new file mode 100644 index 0000000000000000000000000000000000000000..1578ec6bdf0ba052cf785ce18105457d36b6d7d0 GIT binary patch literal 4843 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 aYe*!omHIN-)>|!+btEA!;ZUqHnebo3*KMQ# literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/chart-types/bubble.jpg b/website/react-magma-docs/src/images/chart-types/bubble.jpg new file mode 100644 index 0000000000000000000000000000000000000000..00d6ebe3821eeee9b35cf7c07b33608b32742967 GIT binary patch literal 12063 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 CQ{gKB literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/chart-types/bullet.jpg b/website/react-magma-docs/src/images/chart-types/bullet.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a9df33636922bb2d2ff0f128182a7414da4272ea GIT binary patch literal 4953 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 AFkR^k&3vmhY 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 N7|&Gs85i;I|JgB;4Cw#> literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/chart-types/donut.jpg b/website/react-magma-docs/src/images/chart-types/donut.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c0944c71c159f69ccb6a4dc804150f100e34dd57 GIT binary patch literal 10108 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 literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/chart-types/floating-bar.jpg b/website/react-magma-docs/src/images/chart-types/floating-bar.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4e846272dc699d77593bd943f39261fa3632db5a GIT binary patch literal 3435 zcmex=cRarq{jAqGJX#t6m;W=25nz{bwX0hEyf2{WTeF*CBT zGO_)?#lXYN$iO7PECAGXvjIu#fHGxnJyKt20C57_#8WGvj^W(9-eP_ol*8{)v+V?w z&6is!d|?KJ!|d@i1S(7db@taLm}-QDa{0gJCcuQNoS$xUfN-!XhN&Zt=9v5Qb8Z8& zT9dv|2L>Mh{XkDDAd5rn#i1TqA<=9>>(9?_Lsdr?zq~Zf0m@0L{o(tz62f85c@Q@_ z`~p-4*?QfbUtW4EKqW|_T;89bodeRqy4`NBW(r&@W9RpW=3AeD_-5x=Uz*m!Wf+vo zpP$_Z;xgTy?>7Y=MF<50#sX$5Spi_yVM5MV;;ig!4gm!X3I@QO#R1H4j7$ul%bfLg zVS?Rj6Fye*I0|9{ap!e7z~>__*g>qUeG(2m$ijbb*u?xT!EOYysOzQ4-?Uy~fOod~ zYZG3D@A~}pBBrawYy~eCqv`^x-bp0ncDnYvR9*%KpSl1r^ca~~S%4)F6r?VB zB*ZGr#3HI}sOHeT*#H=n(12vNXZX)xULwms<4Rfix5Bs2`{(JnTw0+v)zM@X=h6UQ zt)|QnVXpjyH_m0I`6n>sSFsQIPpD4llM|;_0o|(Lxxqowi zalO2aWyKMqBOB(?h1a*(#RuNJaqsl@d2tpSzx~^O#m;_x`>iTv|DSf}^z*N8J(nE# zs#^NSw{J!t5BJX@Ju%E>cYgZi?c2X|cF#zD-mU*|F6nMAeak=nN?Dotrnk?5>9O|x z+OPcmuOI%o*Kzru|K{#{U*8tbxKcIm*f-m~J$nisKUXA}R(D<~v5WV+cmL+;oo#j% zoBlIc{bvAXI~hSxYXDem!7?3#C^L&gfkHq7q|jnw1QuF9cL^CB=0Qe}lfD+L%3L-J z3C(w&k=Q1IimIPn_BBC8c71KaC`KV0YkXdObsMH0m=XR<6-6Tj_Vj=364(ekQ4FM(cH5d^k^7#NwES>c{fTKJHOQBYV&*#TJC zG;V|xH%yF>;-<3l%ftH{KD*Ddx%jN#q;m0DxeP3vKlSzfxBkTZDt>#%yD3KK!E}}# zst5Hr3$SqPS@4LLcYJrdpWG~5 zu12vD3#a(Q`swX{bt?$??PKxl!~5&*%innX``;h``sv3%7Q8%s*#*Bx<>G29zrDTx zAsx33HZi|GyuZKw>^F;l{~7j2-+%hKCdR7Z%SCKa@bKyL>+|#O{%1J1ACeWo6*xR6 zFbFd;A!P+%)efw`OHL`lfST#Aoz2EDV9VEm0G;_@1vI@UdV5m>uwy3v1zthBQ{XF%ZG#^?S(*UJJkGMe)f83mO<2^o@% znL)|;&)qe-@Y-5<{qd{sr9$E02i$HT!@nLb9vT|{@E5|{FfUYCR_%R?qzJ;S(_RB{ sB~Y1i#r^o{!Ts@-a8+R&*SBSBK*H&s`Q4|_9^btOm0XkkdHw&J0EiHg82|tP literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/chart-types/gauge.jpg b/website/react-magma-docs/src/images/chart-types/gauge.jpg new file mode 100644 index 0000000000000000000000000000000000000000..582d215408f818a847bd73401c47697fdf42e094 GIT binary patch literal 4560 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 Ey-=M zSxgr51?4q_aVmjZgC7>h9r+)?4H;nk^61WFhw|GMM@ZueZTqxdB3GsUEohvO)j^ z+u(|+)rbn?~^57r_4EUM`vB6KgtS4Mfe5Xt^T|j&* z!Ql>x|Kshkmc`)oFM-}qIH&o2O6;bo7O>U&wO^}tKa!bZKwg|)Q!cO%^aRh3IB^MJ zw| TLcn{11_LpNG8;i={2b%olI$A+ literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/chart-types/heatmap.jpg b/website/react-magma-docs/src/images/chart-types/heatmap.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c4d0be27c6b405f9ae8b4d08a410824638ec95be GIT binary patch literal 3716 zcmd^CdpMNa8vn*H#JDE8G|7-$;xNP(W2PoVsv#o{yW|qhB$cS`)^wXwBuUbRm|S8Q zx|rPdh<4<1a;Y&wQB*|aPNX^OQ=Z*K5+o@uzCau$xjED683qXAhezmK zz>S}ydjjBf*T!7{CD*naMwEjfmh57>0WzEy>;{{z|Dd?cNySNV|twtJ^^sycpxnF9~q1AqbEVB3`ASXKU)oZCQSUn+`CWNrVGI7tGiyGx13*F1g`Z z(ralpGxAlBPJoNa9%76$v`>7=N2t#@X;{+tuHp_yboK&zfymBv`bG&VDyd+x{7<^ zmwyvf+~FI79KKfyHQy;Jg2uDe9cPa#|DFh&C@X}njDJ#ZZ*Tuduq1^IG<;(5CVGSr zxnm|s2xSFE6bm7~dD$}|)Th?D_sF>P`$EDrbFw{U_G@ESsUubh&B`X?8&^@Ub{u8% zJI174GbdANTyq|hlFjQ?F2HPQ~7a!3%R!cYzcF#M=&2((w)beH_D}s*b!`-u!G(cS%J~y z>P%g#p~KH{4NV2>OE1l`)w=jN-6+@S^Z8mqV*v_=ZwNHz6c-)km2mx4PR){8wRO?O zv2Cm}0}}R9hJUf%U+Zk;b|^M2*NLIo+pp*;F}=D{S;YG6E!#g3sye5xSfX(v9y3Z7 zLPlXjr-#V*pM9(tuJ`;eA@ofGtpODsR(9mjs7B(eG{~+=pi?eC793?H8iDaTgHX3~ z`y=7Pmbyh=yC1AGjcz?2k^B^2z5HW*;iqcV=6?+HWe^;X1`P4VcaWD#N4qx;Os%B0 ztSUT6ou(2%;kd}E1_oAm35q$T*IOPpO@qQoJ^UmrQc8*YDBw9LxY#C8ILNB2?L%(d zJo?^V?pQ%2D4eXNrX8KfDmg*!hivjQ(#AmH5Qj4-J}Mc|ue6sKL>Q>U)hr%kUijh` z-9zxaiT>7q7F09YYB%qmSTyy`-9b=rcDHr@}(w8l3Yjc~K1p)_Crc6+z5hvIrCRmKVDU^UEIv?l^j-;~sJqFA_x${fHKf zPpNSFhrXyQ77x3gxaY{^hp0I{4Y1qE#e6eW-7ojp+df9y^wO_zitLP?#Y!jK+`~EU zyGKpmv(+6{`_#;};`ZG+VMe~=>l}W8ZsMX)KZETVEXSgpCl<7E14-Y??U(DeX8Uh3 z)Eld(@;0o!ynk!vf#yD{VqFx^VU}4eeL(fqs%rYV7L7cT2TaXF?sbn&4y`T^X7nQj$XszZ znVT3-Ku_=fNs(J}kw@yvc;zhUqmIi)CB|)V&!+RO^|sp>?9Iq0Pi6mklf*oYZ~8LY z!v&FXf2Vs`QeU>U$Owu;xW91oFr0k@^f_VIB7SUjRT1->e#~Dxef9Ofy<6o_!FH8) zzDY|s?vksT;n}Q@%66L*CaRw)D20#eVYh+dYjDiBrs_5ngVS9ZiF-T<4mJAE8VI2! zM?k7!z?X{1zkY!r6pTdVjfo76x%2`$0yHIgIR3#kt>G1?t?autD*$rdEGEsrZGH%@ zQCJtJW&dSJI6T31f1kKikP|V|-PRmf<`G8aOxDHHDPfe-R8>4Ev?=sG(CSKd|va!$lIPAL93R>&qIG^Tcn(myfu~vE9?N%ct&4)*8 z`zhTG`u|>}|JfgKyZ+d+Q&@@lA^ppP{2NF7W?p d8O5D5S(_7F_JOjuuv3pCn0XCMB7YFJ{u4WW?gRh; literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/chart-types/histogram.jpg b/website/react-magma-docs/src/images/chart-types/histogram.jpg new file mode 100644 index 0000000000000000000000000000000000000000..8f5767b5ef9b692ff37afb3755d5b10c50f11fef GIT binary patch literal 3065 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 literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/chart-types/pie.jpg b/website/react-magma-docs/src/images/chart-types/pie.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e55b91274fd5dc56ffac99118611202bf0e06fa2 GIT binary patch literal 8579 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 WRoOvkuaVnBQBguSs@>;zbN>rOS#^&9 literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/chart-types/radar.jpg b/website/react-magma-docs/src/images/chart-types/radar.jpg new file mode 100644 index 0000000000000000000000000000000000000000..27b3cdc42f2681c207c22bcc745f76446f104303 GIT binary patch literal 17869 zcmcG#1DIt?vmm<5=(25hRdw06ZQHiGj4s>iF59+ktIIaJ*oE1B&VTOwcV_OqnfJYy zdw)B3Mnta6$iRvfEAwOJV;g`ZB_=5b00992K!6{>$2ve5009mxV1IrgAs`^3;h~|S zprDaH!NI_zBB7z8Afce3Vd7(>Vc=n)px}_=;1LiK6BDChlTnfpQQ#916aBde2m~Y~ zG!!%n}3ifBd{}f1Y2v9I6 z=s#E-ARLJMHzbf295|JaH2@qKup<%}60qBE+JE}~4>crDYdnGfe*%I9eCg^WD7j)9 z%ZJG7`A?|6TnhGO*-$U|_^rL9sbdv`dM5mTCjb+y!eVnOhsYZJBGk6UHw9kxa#w!& z0U-Og%YZB{6umsG9<)spk#)kJ`TPdV9mf=l&|GV;{~MLH-TuSaX~%CS;~8-NV%6bv z3osm=q+g%&hIx~j{$ohO;H4E`PT7d*85rKU>*=CN+~eg7KhFG>cRz6k#6ELdzp8no zw13DM3rF>ZI^Q`jsN;~{Lws?6wYJe7HTYac>wSCnt5q-dcz8(-^R?juEa_su#g*Ni zkH!l8-4{$YkLxQ#`Q7>Dk$BFFtH;sI(d*f)Pq}5ybUb?#8rISFmVEBdcWY5dP5WCJ zkoiq1FZ4@hdFPzJ`-6qkb#;{e7EUmp;Pvu}-OP)mJ!O)%lxa$T0pDCvGRorfx z{N*=ly{r%0f$?w+$X$lxye)?Rd;P&+r=%~da^dbirzU#4c)B;s#=xvTKUlg9MdJP5 z1<2Zl&{Ky`I)?qSe)+P04;*{eIA<&!z+kgKbb895nTg;JWCQ%Y#c*|uhxzu4S1$Vl zb;liT>s`gnY3xqd_?Jz#%z}_@ksSzPqnK%o<0vz&oz_r`djQ)*YeHT003*MnD|Wf^jEF}cj5UC>(bg0 ztEZz0?c(jB(CXI)ER#Tde!ji%o~;mhz3=)GY2HXO5@EeSeH=6zPJVx;Tr`hAWoh9$6hu~MeGCS=>515#JImw!7TMcj zB%eX&n6nBi!@PNrBH~@q#^L7dmttIA8r}GuTCMKrdZ@|VhNe+m-o=6G{A)1xGtX~s z4uIt^XOxkdy<8G|6KclkaNas>*GI=30fep&?h|IO<*>X&+Pd<~N3tUKW&I;9@S>NK zn(5|jP~n-X?&Z(!Oqt*DKb$%z}*${J}bh~(uFqXp2)K@3tR#oYWd;?hP&{_^5 ztHoKHfcpM)UpkAYd8_V1bv?b>0S|_uGkX@zMjb$StZsO;0?1j0kLDdO)2I7d^hNpR z(zR=ph{CNe6Yb??aSI<|#B`bNP||#HhT@?w5v}L!Otgxt5^3E$2RM59RnQxoUnw7@ zosE#W4ZEjlDnj(v+GX7_yhMP@W1_dAYUl)v^TBk};0d2<6M?J0?0E>J4;N>Fo<^g1 z1j)D1d&B8I7UL$G-hxdiAKqX51%1Wy0RYHahOfk*suJRM;q!Z`$ho=W5=dW%wNVDO zwgC#}F`#gs;P_EJkEO+YI(Dk)K`0fi=eoLZ^8U+!-6;4bP-Udq@UhgymGhH44gp{U zIzUaxVguRv07z$O>+lBkb^tj>;Jkw@7U#}eQQqL@ESnv}a~jTN(aM*O@cP|4PqEG~ zuCK>`rTFV=*ann;rmTOu0mgQ5W-mv?3jh#*Vb$C$Cuv7q z3|8??UvIA5vMWFHU;w8_PaVMAgwXs=Doqn;rtab=Xwg`C8#5 z@1%=ZS`GmKI7?^2Dpsr_aK9hAVY%iLxrVVbKI0zlNg78ZsO`k_lr{n&&&x8&8Wdb) zx4Cw?gP`&|qFCDpfU5@>j4(HK9!egF z=j+-y&>uibo)u50ysu-Hcw(v;WGx-580KC9y>HGcewFW2^UTpp^)9E%!< zoTjsQ70XHykbseLlA;87)BAg#fqo*sI=^l726yy@W4>Mk@xHD=OQEjgmwFAYA$@~A z=lKoDSchNIH0}Qm#7cOvEV5Iy+FGd0xM~j!&PqXjlV80Vv&s>8mb|Q^Hi7%5ACRhEgdX zgo@$)ffzXIJLMu4k3)VKLZP+_)VN>Pb$7P=fBFETe_2)Bou_QUegOD-DA|N} z3;kzy=*!O!AmqpDi<>Hj^)!FS9*hS-_uqBw)(r8-5;Qy?{QuA<|I{Vmd>qa*cJ**` zZsYv}0sw|nnah&-sAIyNoNZ`oH2#3VKu6B(4-h2JE@Dz;tZG*Nz<@$cc{z5HXX=_d z3!RENS|<7f`{S|7!S{J_&O6pU{{Vo+HU2$WP0zMYFU0lztN&l1q%A$3XXU_&5|_W4 zzpby3=ct|0Uv-Fp3^S- zF~5PM9MV4L$=`QPmSUOnxRJT?NnchJHpPzMt|^dn2(PPG%5@0#_}DV3ix{gb)EfAO zo<9ID7(DzMmETNkMAoduo`nXrk=)fj06|SFfyEK0#6sgocgv&%pm=aTxO;wtLWrQT z#PO#X3Ot>%iZvnA5SbqUf5w3pC&u*_uZ`PiSy|ZoSqMrsKK31NIt%sMs0dbif?^(0 z8?bQy-hj9D&#u-`@5ie3E0b_+8PX)su$#l@oQiVA!Hfc(AKeZV> zB7eJiV}?2vs+zSk$#dHxBNHGmTOC4{76qE!Ze{&my4<00`Q)p8p*ovg>#021!RD1# z)zQxb6Ko!)`7JFilg`N?;X+n#crUBinvj3Ra&S(cv_{?L0o9~T)n#l6aTuZ9orUFs zi5b0ci{1V0xIkQSsZ|sqcS=uXUR|jWcA5L8iEfzj9?I3a!+la&Xp>i454}!8qudB# zcXOP})n<5Cpw+Z01Km{|(*?=2yWHBR(MIA%sqlCH^SS~(dJqVd>~LnATlNMR-Brix zq0M1aqw+WnEYEf`tJeo02Fq*{%ZP^*Zm);P!r=K*>H34dl{Z@9rCyrINgVY4mm27))D$=0;S@f%@Ed%m5Vy=}}TPc^85}}9ej7(ms_vM836N@hd zC1M9Uy0X$?rPI*sfL#Ly18+LlSyrYo)yE^5O`(6OPv>uPYe6#OTW{*8Kgz?~csq{A zkX5(gc~x?zJ4mzUoY}Gb#8*8gtF0e}u)ZX<3`@RT|(#~jl#PBITRjl~VUZgtGfi`A!8ycW-?-WCe)LwX zP-|_{6NTTn@dHqzrFDKQtT?T67{-Df`tW9*%GFej70-ud0t+eCtL=N;3ZnJWcy@i$ zzp^);N3ip1V?WLaL(~TH0%Ctto6o}$cm?agA{zqYL(Z=5q1)p)2~S+Y$30a!)@5AY zeb#+-V=h;j_9}r%+c+;&RkC{-2-jS<6yl9Fl16R!#<=s@08b_q7V&FxUt`cUX{9jH z*t%i&(N9_TomThI=m|SR=8%}jisQDW68^zowauW6q=Qz=bh3x%fyh-jy z%?Glwa$1*}^-t?}pY-PMf9fzs^UKr?!!eDs)62~I6sp={rKWNF_9Y2mh<;|XUCmIb zs4N0y1gF%lem&J2$1&hWkwLGwtC%TFhs@6Q1n9unkGvc1z9h4K(_Nsm)|^|`MOCIP z)c19n+^2V#1~tUqS^8VL9{^6LqH5!uqr|50@K~&qNjXOwi>>BzRYj-8i}VQ_cPl!( zSRMIsWmm_8Swx3-Hui%ZGE5QP8gIgSO*sAuX$?Khjyn~&oElOC< z@N+s1`Glg7m>^J5V->RB4Qx^f|3V zv7#J9@qI}s!>)Lklda2-51sGS6p@jU@tuHHIZnIL`k6eL=4UmNC<14pi)!Qn9pe~t zAJcGku#AlKFK6s=)l69-?Lq=qw%4q~PcBQ&i^_806 zlVljaRxwXE>ciSJZPAvNkr3XRMSWFt76Y$Tu<2+1jLJgw-8MrjUdd(Nb1OY~FP}%LF<6rqz>;B1O=lnmGH!V0$ z7w`t?eyWx8aD>=I+qTGr1$~mTtGf2~f8bYZf08+xki~BfKmbeRnaQq&S+4eCHA-+~ z8pkzw^|sLTylW2El~+;l+h04StwN1>)ot8ANh7lwd!XTdcHwX^bPD2CX$2|%EIp;C ziFc6wTj^lxrE5=q%{=_ocexjw)bJO2v?t2bNGI26`+>xYHn<7f!Vulh1PyQ!fPvwI z#?NTYINEH+^)FeC{cz&J27GLUzxQ8EL&^FaNL`K;Hl50v&Sm8da}9+^BZ+a-){MOl zzCY?}OCHXx+ch!o>@;XyR~5neO)e&=^6+59j@iwhuSv(RD%A)e05lBxD`R&bw%g}3 z)*xcizv2zexpelz4~1bSuPmo)$Qs4(6o`17STwL}I1Z{BHBp;0|Bu>1EP`yJRBQ3` zN1@c%ngJ=2kn73^;8OWPV;*EB!JsnJ)hvW|KoL(t5j%N#_>>!$WW}RzM*275J6_KR zps1ngC*_Ox(r$UGvXfnGJ*;|m4lB7CI(O@R%deL^r;`RX$ou+gzXq&!b+%)``ALt7}#Rz5oOm-P&Fg!`C?BNIJWaILL0MoslCT9n_?r>0B0 zS*ypw8N-pnc{%Id&2su|AjV}Jn951i&6u#?pCT~z8FSga0} z=5njFqt5%yeQuuAX^e5YviFv2n-*L5T73FZlTCeQj}pCmWsHhSz&Lj~CcsYt8?hp) znZUrLsMQaG%)n4f)pGMKJiR#F>n8Q~Y!ZfVed3gkm>f+P4G_`E*3=boQyyZ}C0FTs zRG6&j!8S@xq0u7|lBS5f_A&FuyNLY3)?gfw=Bc%I zTw>!?wCOCX<`8kiY7&1M^V4%gqBt6y`)NMRNe)(=W+WHffq8~NFjXJzm;hYrQaWDC zfEXk4+-dV<^%go^Y_^(+_W40-ihyxHaxC)Rd}eb_^!QL9y~J6);8+1!Ck`JCl^WAR zK#H$jPp9Cs>^zficCF?lGJCYO!hzBGeWUu+LQRL2t$R7Mp6B2=Ti?Rfi~X18LUt+r zyX)}q@RD?~nzNahGUl(K^rUdTU8?PU$tha6^1~w^$mvG)c>)#(}2*Vm591xisCAMlNpel z!@)yMFZvG=K!b1Y ztJ=l+T2P!^VO%O3Tm|!X-?pt$#ngJGwv)cwu<7@qsdmfxn&$E!#@))n@)(Hl5KQzc z-{J zFeQSNK9h;jF(SqK_J(P3NFtiiI2HYCd*#wN`z$Bv#Xl?*lz@~_wyy0Yto;l7{NF&?Xlr=R#q<9{>m#h&_4-DN0aj#yt{eT=O_GsuJ9U45t3DL;=RyX z0N`w1HFc)TwBrl8$v{W7-t>ime6yE=(H5ybR=UyW=VvUjs%78YdLFG+gj(9zlujKn z_~h}eW~1^HFvLo6OAJZBTwHG52v0Oc>H})^{_;P*#>kcYP;7kQEye12tOzq&w(7u9 zb-a>&&n>jPUVn{=Dm7d99WiN(fi1BxYfEKQgO_F8+TN51U-mSLK;tlf7vW<1K z4y$9i`lxDE$NQomW@{3`WGY-zz0!bSqAP)xAm8Bs^DF&-?@Q*q=@3kpx zcC&*YUiHti(*WPM3T#7~6&U5+u|Q*jOzFTlL*0m%!IGOx#EY{ozRmW%|2GxZlC5)} zgskHCXC+czY_`u-YRn70DW0qb`af-|vr7$-%UCzdCoOlEMqI;9d>T)88EmTb-m`DX z1UKjvt31@G4Mtkl*3K7q8&p2;mkGeU9s7Q9;Hoo*cQ7-iB{@&UX0UM_#xurxPX}lI zM2y6lsNE5lh?h@mWcUFXvjb7$|Ir9VR8yE%p-*=gP%Vho7wAEYc)GTXFp3w%;&z)R ztM^`pH_@MB`W{lI^k$giZ=Gr_r_`N)zTw3;IsE@wg{slaNfufvWqk%-@c}s70;VaX zfN2T<7#I``7%T)R1O)Ky6bP_Q435kQfh4GC=oo;4N<_jG|D$&nQYoK7K*%UCIj?qp zhg8_9ZWmnvP1&Gtj!ea+e((BU*$WtcVD{oWWih|I(aQ&*p+;3J!2%F$ZdT02(pUvm>_|0IlUDo5CF6seCrXM^;8R(Phoc=|^NXmUglWblAN86v zbv>tBp|VWEY9v^W+MS=8O-X5Zo9XjE38HAG-zVTLw1k1tXbPZGc<*h6!WDzE#DpTr zl=gM3u!Fh=<+~xlrH{*LVuHFNe}6qR5XC<-2xhX$i;}CZ@Cin6a>Tc+j6LVVmXU3W zqIFZCko~3KAflm9vH}lxBL0+RHuD9#v9ryPeWDb`_f?CwZeLp8RUo$f2rwqdoNSp8 zn2;&$Cu|wh5u;8rZ$?o^VM$=HEyBC+mNZj!Gm97Aqf-yb5bBx;!TFxgdwbP+?WyJlrICv!Sh$r!}*(f>pk#R4H{mZ-Z zTrvuBH#b5RE1RKm}=E`W%n4WRqT|I2*DP0FERUCnCjGZBBQT znMt&*EK{_`sEkq1Hfo`#RdNAuv{!(GWORa&#m0I3J)N!=5`R;UHZ6|b64@nFENQv@ z&<0(tAOi$?LKbc|7Eu{oz9D0&ta#$6F{{>IeqW;upx4mi3EgJ%0q_>s;CUfbzT+$iU(y!Z*c(7{K@uS9Z}Eo8})klF!3lB7D>WK+Iq$6p^dd3o0(}D?` z)>tDB`V5PF2UXfDDs6}SHK(sQ>={ccXFj9eoE;*h6nN4W^9&Xxi3xVM zP@O4L?lAj+NbbG0!@F$(XyhC9nU9X%Wkuug1JaOel8OZ$WcDF>2m#p{Wu9QmcWy+g zqfq z^m~|Vv@*WaPicRQEua48wnx5U+pa|U&~PXkYu3QB*nYU zf+H93Mdf#}??NS*39>!VN)r}laB>&IHZq8O7U0O=6U2BJLuf?7`#ukAtPuqk=s}l| zGC_>9iBd@WP2rg4Qe`O9uawf8oZG^-1l=z&1e(gBANIDOR^a2-_?t{=IgPZSmPAA4 z{YVZOzzHP&DYY<;b-mougF;7=ksKTU%nm~*Dj9B9S7Y82-z^ZSlJ2w8d4ak?B8@u< zt|6z>WI&lYCt-i-F(#jIYl>}i2^(8aIl0?I$2K^$Y}vXM8nO*(8KB^vSOP6fGl8g) zfj~JTu4k7XMt~D0dbyBSaEZj3NyWqO{7HGuIXt%X?GPisZa2ihc}aQWE8M^AD&rYj zZ9wGYj3VkaBfR`R7%efS!r+rmv{%uWMb0o12Ta=DDB^6BUio*vPzosJO*Z7&Hr0Hf z%jyu~9((x`4mKgu%cO14zmG_7iLYslHKxR*C!J!+9j02F8bC` zSu|`Z$fUA3$J2=9oMSZixi&UF*wyrVn$LZ79u`y04}3VHbmkCGzy`wJ_Z}v5I!+TE zm<6#QbnIKp(IV+Pv#)tYc160F;tj$4@2h4`MT8Ar<*kBIxin)1fQd%;wFxVaoS=p6 zeAE{4Ya4&yJ&?{fF-zO?I7erWtAvp+5Not9A{xwpzGI*!e<0iBmj+4!C}d1iPE<|* z0KP##_L7lTzc_NfkMyamR`Gm_7(%fI2UdohV51B?z58skFRHqE2XTKsKs9L-nsW}Q zh*9lP`WCf}zxj6!uSgq;qS}YWW)d!FxGItzJD@3i!W<%s(JPl@We#W`cE7}1@LdmT zpQatrVv9{3isqP1dnjkv|CV61U^a~gJQGsYA-VbsUNZ8KdRGhY0pxN+Ylh;y^dr_g|`u%uDg%-J7KilY|v0AK-J;4}fAWE+4G+M!T`fy)K9 zflZZ@#tr*rSd|EvVD*^V20;jk4rB#!0Z^iJWx;b;b;DVJrc+YHYNd%Ap|TaE|KKeh zihf3|Z064ANiJAy4IRM}68wcqnc7%*?Q&aO4u>d$yV3d063Nwkt&>wg?>BeE%bAdCMsZhPNFnZh9&;C|*3Sr19V9WQ7SF}$ALR;l+*r! zHTk?PQ^6h!J*x8AH|o!{nn^IX4SdBq3#mL$>{lpDMyCeQfpfT~;*ODmnY0#ABhR8y zFyC$Uu8r2pKw6}`cHQ6sLg4=!X93LXrwdd6fc)Oi&{m`|0G}~50xI(XfaDW57X|x) z4oOELnm4uUvM9Gk=x4Ev!N62eRahp#PSX^sYi0DCEb)Qgqk-jNp#j-kQfn+Ct)iUq zTL1P~H7#^kwvU@>fof-_pmZ5yPxvein<>GZewjq0AhGcB5myG8ex4ShVfELTpD@U9Q9tH;*DPUw(a!f$UvvjIXM^Kacg3`=uCvX^fcueO_RRElw(_KGQWXy0))YYpy%MAd;%^jc+W-cV6RMww>8q?a+K#3YcR~0vm{J5#Z_jP1@qQk&22n2qR3xZz| z?QQ+7oxF&Z&oRLZDQznODDdUi{;ok$+<6ILamygTFC&#@Y^6_)gs2~*(y9q_p*pK_R6WDIwh#JL8Ti&Ok-H>bQ#I=gJgt!d@XtsKq{xo=ut)-w7VO`6 z)fL3{aw@69vmp7v2O85SKLBu{m=T8CA{cS&G~7{IaI3}weBxuY!T1J9-cj<r~tml1!%ABuSe-c}r7rA*EN0#3G}q(r{MR(Q-Y;*aZ_j4%brx zl2)4GGk}gko25^O#rNGx`rGg`|7h3GRuNkkMouMsub96IS^cJmxd-bFya;A4LHGynwlN z@w!Ca_+I!nF`(hVGIYr=AN=~v{9P-7q?+}a=(3bY@>oqJP-26M$9jH9*aJsYGYN8& z$~i`~NP(HQeu$~a3!l*^9n_p+lCvhsXSNMZGd18j79kYTk%!8MKFEV}l(}doJ|gJQ z0F2Av>~ay1$uh6HTHr7s3@Hu>WXAQ62=1uHK?Haq2IcV$r5B$U8fm1GOw*Z43kH@& z`fo$}n6tV=|4@Z!&dB;jQ$T+wh&63xhjy~VC^d+q?bLJ4`>DW`6{149fsqwu{WS3> zsBJEdrp{>G-Hj1{(z>fTIyeH+CiejDqCe3Y6h~(v(w-Y6%?M|GKO)?svxu%4&84J( zAHPgr6qQTR_irq8PWXTqyrC-2+Kyo>OL}($<`zk%r1sh#01Rb|kSlFR{%4cX2EBc7 z7p^&*eXs{BAIq8Y2|G;!P==HrzCsC=;J!43IKQZlHv)Y`q^VQ)rPW)hY^hlMG-koa z$5TYB=|gAofBpCL)5pQ?YeJ3Y zcd#>z4?xdXqpc^z3hfU7$bF=H|J!yDh3!wr?XS+w6f)tqOoj{JQRE#0RLIF~JR4uB z4l5fQKklpR{7_0ky$q302c2NF&eQzmT#p=QtpP^Vpgqr^!4cOWZ(I7 zi$?&IO=D0|zZybHPmQ6vn*`3#~Aj}V@rN%v?n$u+X z_q?!Ub??&e`jlcx8wsvp0ox*ejDp<1jxHb$C~g#?Dv7JMt(Y~{=8YSENG5E7@_b{3 zQo@m+&sIMyx(Woq0MO5QCU4LIA>$Tto9S8QqbP}cjjWcj5#QpK zn^@{n^eX->Nb`#al;W|H$|=>2KCF4NPkN*Hi&B=sS%atzg+V%v$9XafD&}c62_8?N zATxxpZMVWr6q?Ejr6fNYh!Q=~wuqk1XSyPWrSB+WH|Xh_5^IMtJjKUqItgHi7}v$Z z*wvmJ{7$533J9NYEpb#%(Bq%dX&tClpJJtxFu^&1{W@s09<#oT&={I}Rc zDjt`ka-t(lkBElQ{cBe2DsvW*$0)t2!)JrD$1bgua8`Ds9znd?rQQVQ76?$p!_{#!D2e7ua;9 z004Y|JI78AanspO^f;NKIl99t0K zZ*LMMQe0~`;G3Kyag}jTPe2^+9v6hNhu&=%7)juccK^^+a{}3Dk&{?jjvhdy2)@-sLg1|910#+Z?Qi?_&Q0X%#uhEU@8cv_0RuDSPwyB=mf2LP zY*NNEd7xuKGiYwQQ@(?h%JtA=Md~&E-WfhagkC$!g3AJbgkk`InnYt_Ac{8VH8#$E zw%{I0BMPK4sw>dJ4UsRNuow}#fxN-Iqu3p`%K?Q_7598@>@z51%f~EVT}bN24gGwA zZcgrz==mHDvI1JL4bA?oaV$v|Mly<@7+ZO-yTDXF<~=@{kNZVT<>~6=|38pup3E>u zy$spAf}m?hEzal%p!fp-%(K!0&k2Bl0Sh?rfWTi{$3Q^A0N}_-D8vw`L};Xp7$gh= zOw25T3I=~=Qb9rf+6UHSW82=n|GMC|BlhfFzP_cT9fq6t0f@%4CGHt;+bu}WItY7O z#H+*}+vN_B$0hFf>kr-NroAhJkN3H?^c&(r;6$FPVw0w8m2dUirb*c*qel8kTi=ic zul{Ph19w3P@k3JVc;s{M+sY41zE8t|zV`a8=0LHbg)|LMrDyuyfA*HQe1@K?skqcj(;=9NvKgt2*a+)f8cdj1ntVpRDL;h>kA zo;fEilVIDZTI0mRVwslKee&e!SY}B-+I-|uJ|;}ETPyw(EAT+*=)_V1BR8WcgVvOd z;*BoYK{+9rMEE*cF!AY=7%OgvAfLL8lpUAG<41P9q~_X_*M>JG&zO~9L&y`8v~Dns z4?tl}t~H&`hJay}I_b1G-8OFGv9OqJ!@`h! zo+oiqF{iGdJ*A`;Q-}wlE6uczAdn+nhpg5!N2%~s-UPV=>iA-ow=6LTOjrE4$~~YS zFwlx^B5_QK^3aBDJV*}K#haOC{jPRdBz$=|5l7K=lD0#~uTXg3F2SM`#%ukzmstCEzYi`iYqLtYQZU z>M#sNLRmN`&5=R2{7N-!PL7H)v#)59L#i`Bdapy>VgqLi@?AtFIQSfe=6r}?F8ZOw z66Bq(mb5ejQ<^aobqKp9cE3!rlw++0Cph_#`Ztpw!m)H1h()f`-1;2 zyC`)Y+XQJlcJXSN6NR*aE7q4jw)IJ#M7+@o3!NR`5mD|`pyUQjczPARoqUDay2Qo#Y zR!=Bk?058vt=!5}_Hl5Gcf8ul17Nnvh{aA&1h#i};Mm0j5fFo&Z^D}5D|1^3Rckd- z7uQcY_Qf6WY*Mt1I?BYZuA6c%9(xIItefq?_bUYDQmPwo)YuQFjN!7y21G9hVDN%l z3~vt{Lw{{Y<%^u%<&_%yBNJnrCv{H;1DO(#5M@r?U;hB0Dz*wI_sLNI5o3%}SmdWh z<)B3`_hP$qEizy-`;&#Q7F|TaXWiNz&DB;`SUU%rle(uxxjE=I5P!!xuWw*;(_c+& zGfBd>;6cTS?eKgaNfMvETzNuy3;R$cN3UZ*H&WB6)(Ir{7rSq`fFu-fY@=ilo&aoMhQXk3^q~WjcXoLO!`zzAmA%&Q6A* zTOn4tMpi6FxehSKn``+v99D`oq_FR>c2Tib3;7pooOFK`i z(Qaq7)|Z(D+h)_nqZ$z>x)ul)A#Sn4C3bVK?G=yPq}td_6c`)`10{irs1z6@p&drZ zJ5unjmxY{Uk?m{S1^pdno35QOJ6`k+|0YgC30uDeUh|MIqzRgmx z#U;S@!%0rg^(5}m9Q#c9(Jmqy*_{F1Z6gGyyBVO*E#9A8s%)IRG;~u*zS+D~?vzsm zZ}NK&eg|<2TOXQqbi*{&b4Mbb!9lQhPQQ+!3!fX~VcKb8Fx;~-Kcwl&fk#onRO z?b)`=VqF8LU1w*glkc@BAXcGXiB|?kK$u!Mkb_HL#YSa3luImRipCt^wiF+M7p}tf zi19!6hYBML#`*Z2oO>JX+aB-P}R zv_u<@#j(PCcb+ZtG1c*3#zIRVyO*7w_^ z)^v2%c^g7-z*=GPjH7J>uvzTHU+zgdC90J^FGT$LQw(Y{b{wG@7}Kze>(cl)yBW7S zKo#=Ce9(Tj*QaM>EU;!9(1c|re?M1e(`M8xd92K%QZA`^ef z9x|ac!cZu1x7C>+gPOULMt9k^%3m_lA33>(+E?gwn~BADqnjA4+GQ9FE4ubU8XH@^ zEx~JRVoQ2|MzA1*PE2Ve_(AW+e-(h`+7F~sT6K;5BQT&MC^sF_J@ePWJ!!>_%_cBN zaJjVZH#-x(go_Ehd{bW#>dHgEN2)Ff`6}}HlvrO8_P+zGeh|0WE3|XT0 z+sPl)+eu*p?Y@R@6r?<9?RkzWD!M^O3UEPr(3EPqVjkJFp;~6=voPHzd zZcS5*-ulj|)8Q4Cf?ge`#_kn=K+-QV_*JXE1`^6< zyU96sXV4?}t;8SYjtGOIev`^@Jm8|hj4d$phN*7bQl1lpgQC6{M@bW$+6#aIzW0WW zE0So-qUXuXe4m~Aiuu#VE7v~;jQGwut#ykgs?S+5X9sOinj`IIMQ6Xd!Fm?4Y{{9| z0!ZNuLA6ixD)a0te9qjL${|PU*pCqTT`$m-u)tK`Ka`R`AqI@7?~z84vpu(Q!rq%a zly7TC-elx~U7BnVT8HEn+bn=BMt)JN$Ar%WJxb1dB5xH&uUC!&$@w8*aLU4Y$F8Hll4cM2A&!lg~qvFWPTta$+;9#jJkZY8p7-A%Q)8r%Lcy}EFIf%n$ zA~R3BLA{Js9uP7~vL*6@5mfS=!LSMELAh$n3Fgdc%;Rs7lflIR1 zgo3-R2dJtX8z>5Gr{hUMm+7lAZ3ax$$ULs$3^IB;R+Dto#0=M}1lA@U8%9766P>DQ zFEuYJ!K9smM-3TrmP|WBaG<~n$~f@XJkyv?{tAtsRf9supI@bSctl$+t$AjU z=@r!jAGVNRk(Z5lMab0GC^CpwVi@7?OHMiAK7*U~g*PnY2<*u<${CG6H_k;c(~DwN z2F}u<9Q-eFQ7ar0CqNSgLK78zNjE)vM@$5tKvUh3aa+S71*%%aBYqzuxgK6p^c>=u zC{h31OF#3L9lk12n;u5{mruH>Aywmj%ceWlb=Qrn9$NniF{Ww4fy(=^yQl=a zMb8ou-xjB;9IZj^G98zu3|pfd%LwkrV!P$2_Pvx5N7J^kCW zE;0a#h?o%!MG%caK#@d} znIThMi&LXT;Hw#~!3deZQZ?g`Ut7CceiY8rvO=<$;#qF4m7~kgu0M+woFQE}?U2kUz2VZCOJ2O#_ zoX1P;n!*0_DD{ZE)#-6aeHTV>Zq3dLa3*%dqC)Zm~Z6O9djRCHue(oOlCag~@kju6RO6Dlk z!MV7nXPOfZ_SX80ij_V!ctO+UlCxh{V)P(xFS=)Z+SRwqfZR2{2#NAx=O3Tn%Lxgm zMtuNODWS1Z)|W)nIlNOmj(j*zf&1iwyN$ShnpO+o+AwzjMokf11G%kk9h?XEAE*~o z*d7F)VP`Ey&}_nB%~OZp@?n1CxSX7tQtD0Nb=)_dfq1&4lw<{Y7ejt&Fg&Q|PYi~G zojRz~xd|N({dFrCd4VMn?@0@v@xfX4`vSZg1vS{ zn0n2jdXuh+HcOU1t|N+QyvK^e*{Kl)yg|&UO-DV*6X|cj{HV>hFbEv^vYvd^d?Lp- zLW*P`mZ!o%-HdS~%`ghD^uJa>THct>A@vQItLwF^x$&(mbQkvz^_c+yN?a7p_z@Xn=2nvAD$c`8Mx;jFms-Bg+tg}Ht8B5aIG>Cv{(5Ln7GN8AaIEs{j3Nn`ok^vgP_(J;z@>M z+@zt8s=WUG0-p^qb3pe;ms{0FyRjS}+EPY$3i6)TX{AY43uoi`bWhAgpXSFFta%hm zaEWivFZJ!rF~hhD(-9g3KU3eZ41N*LZOA3lX3`%stdqq;vv!R;egCN^xZ5NiPEi+5 zlCVQ#_XHZ-{LZ;eXL5Q+vr1nM+O;##Bpu`CDI{t>fAn8{qV9QtSuHpBFYU|-vPu&{ zW|3kdUHa{$B&!7(OyoHCaooPAdctL^1ZYz=@B049BgW&}l#2$6k1^zRI?jC7 zL9z@7y4mAb6VLsLn%!8U)9SoB_s)y|Wfi7c36$#Z6EopTjHqy*?l6*8$Vu`gJVJj* znm?mN`QdXX`@-E``G3AixCNfkI(S8^tBEj`rqNUyOHrvSOr|aUFB|s`RMo&^b3ms{ zgbWPmKtVzNY~lR7fB+Z;h!v2D7z7O*{Qu=_fsx$1fRX3PdQjsO6q&;Pa^dbM-% ziwk1D{JA6dFXv6M9k0&KD>Z_)j?a?grS$HZ7+-yM?pf`hn|IEKe_q(PSvJkguI~D5 ktNGTFZ*I<-}|i);c@$o8QctwfD^IeU3+uX91X|nuZzx0s#Ps@B@w~ z0A+xjgoKO)N=`;fMnOSNNzDwSrlO+eU|^(S=HcYy<>ut(5)hU~3J6LHadC^Ph)T-J zq0wkQq?(qhyr#4QTJF0O5CsJV^(kt07>r%+EcaQt|Mxg<0pO${3S;V zHa)qY*iG~o_Wd4+&BSwK7rll39%|7)G)gx{I&d-^b`2~Izf8zVYSj0YT0>py<9~Mo zHLlb-jmnkbE?6-8UGr~E{z0RDGkETS&qoLS?Ti0F34dWM#)rESL#JZMKc6VbK0f;F zY2%h|zcx!)Z?9)4jz?4WrmY{Mz4A?zO5IRi{(zoqXV5#=qBVtUKaD!2ZsaUx#xNef zAjmeU&o6Dg?To@t5CoB)@v|QG3++d@{C`m2NS{98r zH@21Dya-D{0|4{&cGOqzzKV^ng*&dRJ3q{b{GN%j?`DjA)(!ej`9841+sM&uhlBkS z4o60%`IXSbMCV5T9|S=9;o&2vOX7I1IycXs$jOt+4o8)4@r!l>{+R!C@~=Cjx6`4F zs~kTf>%;zBOQyXIdb9Y0Z`;b<&wu&?t*l85y86GVAw7JU z;V?Az#KdD50KkaR+)U>b2J`2rf&UAJa$C2w@~xfBT)CA608nD@MOv61Z2F~Iey9Ag z=h)(H)Vsn;m6GiuKg8Ih6vRy0kCxuhIaC_CUfR%%O_6Go7%#3dkNm>uP z9$~(W`N>f@uU{vzUz?-c!}${s>yg2|l}lI)Z4Yt(iJUxtTfP(Uzd3*JR_9>=h!_AM zU=ql$b_OQ&F=8kQoEA+(Cju}aMa9JR={cn?!MOb`2|bLI(B43lz%h_qC0p51aisu$ z#*VMiTtCkXp4F`G#&T31Z|&*J&HnmU5rf{;n-v~0k7#oa8h3ng<_=yh7wU0Y$U(`7 zGSk&zGfJV!7+!?##j7P9s-k8F z_ImsTN)x_Z3m;i%&jFM3KeqR(dhzv|fz1}U2ec^E_pb4Cg>5LCHHRV#vU|Qwk=>N4 zCYQn4{#y1D=QgCY?XI}r#@XW|AxIbjqQ?M}6s5FIJp?q?e zmf5C%x6`!|ZLhaHy3>gEGhA*Vfab%y>pPbnbreOhzMg`7QzCo!NtX-zWOL)Ql%K2v7N%k4YaW zSMXmsl0HzcdLLLku@S19ZU~i)o4_D4UnUJ)yuQs=hvL~hysEG=&cuDef>wk>`ar0_ zqg3+F5fa^OZl-JHYX2GFvLtFI%WK|aNn>8b6z7oXi~97BOcW5cg#!iy9ghpy1aRr; zi-R}GD|8Z9KHbAj8SQqX!NT>ZLb^g64OFkG5mzx}!BSDQN_xI`+@SpWFh)+}{=m7o zbWK~8#OY1v&P7LsY~46z>ZC8S99p+5VsW2l?KQ_`U+->@WNQft?Dl2Y$l)gWgAGjd z9v%a^n=e>4m;9T_!X2i!HgIc6U&_CN9F#Wc!*tMqjB-1|iBmM?c}=c#**aKZRF44`Z9CuiSeOQRD=xu~3J$y>&|6(wJ2p|SXpv1(4#{PYPhyXC0M&t|^TG7C&oEE8n>292; zOIC9~1jgzAWbWh)IHdp_Ri4d$ot!lbai)wI;{0GMtu{>^dsyN7NN^XO zMi}Id$nr*fX*+EQdk3%;gBLHyzO*FWu7ATxo-8ImO)EDxlU{zi@)NfHk+55S`^B{? zHVwVn7#VFGA4THeAbjd~kw#}r<4br_LC$I@4-Czf^zP1)J&oZ9Ft!s{3grAA>CD56b1ZQi>a>;WX^b(&kgpdZA5gPgRMlo*Y~}GNLXo zt+9B64BoLd=u4Dn$1k;B|0o0&$Gky#VUu0KjTR2g)a4XB9|Az4b5r zeZvSIKqu|K_MoHS5gu?z|-%l~u3soq%bO$sqqJFH!6=h|KW=6Fzq@u_BUQrMYd zU|nlTu|D)dvk-K&Ljo0ZcHS^06*UWn@}%pyK4 zNu`9{R0ImvXjl}~&{Qt^3$|%a@rMy9Yd&VXbP;WU24Am@P5Nh!&ITr*@c#vKOLaMs8=S9e2Gmu=;?%r!ki zFF+7JaY0}rVld$_7(e%Vw)8A9=l1o@;#=CC{AHzj zj+=$4hGefMefefKJpH0#s#ftj#r?svAB6_5;0snibl;Knn@iMUBe!5_bCVSGG6}=h z;Ppy?P80Z*8~gse#`$)BA$s~qmMfcu0$7=KVFhM>>b_W&og_;w4G(i zut6^2(m89{ehAy?4akZN1RE%z6ze8yJox2p?5LN%Zv12Q3tYix84at<^@Av&+>};UotL%nI z)wZXeUay{-sYpH1ke276ad^d%6J=N|)uYOgd37T)Lq~(cmrweA%=}G__wh@9NDx0! zT(7{0X!^?flUOW#I-GO%KyuG2>5|3J%B}1%NeOWsT9@jmKO&G)Anv?r_TIYYp(sv( zhb>ZTG}}y5Dz`pTqD|S8Cq905Vw%`o+RLQiMU3m@;K1|Z?r9zo@zSoUm0M58_9gCK zr+4GpSZ^jr2TaWbC7*?C2~mBEn8`ss3tzJtFhE~ zc(B{Wi+pFVk)^f@nf9RbC1o)!R@k%9L(1oYnFZAR!b?Al6MF|{{#ltTvti~EMQ)f? z&9ixJb@6|dZF5Cn(W8~VtmZu51gDL; z?E7JYcQp|EB=IQ?!q2_rmr4*VCE4cn64tp~@exRNt(1(FrO|biF6;d&Nf+$p8R%Q* zwpJmP$u|}S(>gOYCX4||y60xLzn3Tvp+pHaN;s>3Rp|HQ8ZH7pgND%{74=0qf0ZVo zfWMcfnAjKE+E7bLdClc#nXhg4_#N4r1nwpm{3U+5F>adPUbTK08$D4XsT@7{bDT&cO%>B{kV5BfOlJP3Z>uJeIV$&Cn)T|2{f+IZ`$Jl#`WI zS)_n>+~cOlK5_5oNw`sbeoB8K{YU3qEWFNKrskdm@ zC>bz?4@-}yv&zHE^R(Y_+`F0HLtomZ8Zq7qHyk_C3IGQUB`}E}oci*iv4oWcu3|;Y zL4*zn*c6@IxKU^(iqILp-ADe}_r4%sa(UbJEP=Ep%@mZv>yThY<%oPx7}iV_6fF4Z a$Lqpf=kwTfbRT5K{c?W{h#v#TWB&s){C>v( literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/chart-types/simple-bar.jpg b/website/react-magma-docs/src/images/chart-types/simple-bar.jpg new file mode 100644 index 0000000000000000000000000000000000000000..aa16bb37d54172ee1de1de8eb220980aaacc7f42 GIT binary patch literal 3173 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 literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/chart-types/stacked-bar.jpg b/website/react-magma-docs/src/images/chart-types/stacked-bar.jpg new file mode 100644 index 0000000000000000000000000000000000000000..3fb82f60bbf390b46efeeb235eb1ef45e3cc20cc GIT binary patch literal 3945 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 QjZ7?Hs=xpILi_(W0e^#O`2YX_ literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx b/website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx new file mode 100644 index 0000000000..7adc2e6268 --- /dev/null +++ b/website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx @@ -0,0 +1,117 @@ +--- +title: Getting Started +order: 1 +--- + +import { LeadParagraph } from '../../components/LeadParagraph'; +import { Flex, FlexBehavior, FlexAlignItems, magma } from 'react-magma-dom'; + + + + + Magma charts enable you to convey precise and compelling narratives around + data through visually appealing and accessible visualizations.  + + +Magma Charts is based on [Carbon Charts from IBM](https://charts.carbondesignsystem.com/introduction). + +Get started below with implementation instructions for developers. You can also learn more about the [chart types](#) we provide, as well as [view examples](#). + +export const MagmaChartsSiteLink = () => ( + + + + + + + + + + + + + + + + + + + Magma Charts demo site + + + + + +); + + + +## Installation + +### Setup Requirements + +Your project needs to be running **React v17** or greater + +### Install the Charts Library + +Install the React Magma Charts library with `npm`. + +```sh title noRender noCodeSandbox +npm install --save react-magma@charts +``` + +Install peer dependencies + +```sh title noRender noCodeSandbox +npm install --save \ + "@emotion/react@^11.13.0" \ + "@emotion/styled@^11.13.0" \ + "react@^17.0.2" \ + "react-dom@^17.0.2" \ + "react-magma-dom@^4.7.0-next.1" \ + "react-magma-icons@^3.0.0" +``` + + diff --git a/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx b/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx new file mode 100644 index 0000000000..c67944cdd8 --- /dev/null +++ b/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx @@ -0,0 +1,1778 @@ +--- +pageTitle: Chart Demos +title: Chart Demos +order: 2 +--- + +import { LeadParagraph } from '../../components/LeadParagraph'; +import { MagmaChartsSiteLink } from '../data-visualization-intro/introduction'; +import { Flex, FlexBehavior, FlexAlignItems, magma } from 'react-magma-dom'; + + + + + These charts provide an intuitive and easily understandable means of + visualizing data sets. Each chart should convey a narrative and align with the + content on the page where it is located.  + + + + +export const MoreDemoesLink = ({ number, path }) => ( + + + + + + + + + + + + + + + + + + + {number} more demos + + + + + +); + +## Area (simple) + +Area charts share similarities with line charts, distinguished by the filled areas below the lines. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + type: CarbonChartType.area, + dataSet: [ + { + group: 'Dataset 1', + date: '2019-01-01T05:00:00.000Z', + value: 0, + }, + { + group: 'Dataset 1', + date: '2019-01-06T05:00:00.000Z', + value: -37312, + }, + { + group: 'Dataset 1', + date: '2019-01-08T05:00:00.000Z', + value: -22392, + }, + { + group: 'Dataset 1', + date: '2019-01-15T05:00:00.000Z', + value: -52576, + }, + { + group: 'Dataset 1', + date: '2019-01-19T05:00:00.000Z', + value: 20135, + }, + { + group: 'Dataset 2', + date: '2019-01-01T05:00:00.000Z', + value: 47263, + }, + { + group: 'Dataset 2', + date: '2019-01-05T05:00:00.000Z', + value: 14178, + }, + { + group: 'Dataset 2', + date: '2019-01-08T05:00:00.000Z', + value: 23094, + }, + { + group: 'Dataset 2', + date: '2019-01-13T05:00:00.000Z', + value: 45281, + }, + { + group: 'Dataset 2', + date: '2019-01-19T05:00:00.000Z', + value: -63954, + }, + ], + options: { + title: 'Area (time series - natural curve)', + axes: { + bottom: { + title: '2019 Annual Sales Figures', + mapsTo: 'date', + scaleType: 'time', + }, + left: { + mapsTo: 'value', + scaleType: 'linear', + }, + }, + curve: 'curveNatural', + height: '400px', + }, + }; + + return ( + + + + ); +} +``` + + + +## Area (stacked) + +A stacked area chart is a graph that shows how the values of multiple groups change over time. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + type: CarbonChartType.areaStacked, + dataSet: [ + { + group: 'Dataset 1', + date: '2019-01-01T05:00:00.000Z', + value: 10000, + }, + { + group: 'Dataset 1', + date: '2019-01-05T05:00:00.000Z', + value: 65000, + }, + { + group: 'Dataset 1', + date: '2019-01-08T05:00:00.000Z', + value: 10000, + }, + { + group: 'Dataset 1', + date: '2019-01-13T05:00:00.000Z', + value: 49213, + }, + { + group: 'Dataset 1', + date: '2019-01-17T05:00:00.000Z', + value: 51213, + }, + { + group: 'Dataset 2', + date: '2019-01-01T05:00:00.000Z', + value: 20000, + }, + { + group: 'Dataset 2', + date: '2019-01-05T05:00:00.000Z', + value: 25000, + }, + { + group: 'Dataset 2', + date: '2019-01-08T05:00:00.000Z', + value: 60000, + }, + { + group: 'Dataset 2', + date: '2019-01-13T05:00:00.000Z', + value: 30213, + }, + { + group: 'Dataset 2', + date: '2019-01-17T05:00:00.000Z', + value: 55213, + }, + { + group: 'Dataset 3', + date: '2019-01-01T05:00:00.000Z', + value: 30000, + }, + { + group: 'Dataset 3', + date: '2019-01-05T05:00:00.000Z', + value: 20000, + }, + { + group: 'Dataset 3', + date: '2019-01-08T05:00:00.000Z', + value: 40000, + }, + { + group: 'Dataset 3', + date: '2019-01-13T05:00:00.000Z', + value: 60213, + }, + { + group: 'Dataset 3', + date: '2019-01-17T05:00:00.000Z', + value: 25213, + }, + ], + options: { + title: 'Stacked area (time series)', + axes: { + left: { + stacked: true, + scaleType: 'linear', + mapsTo: 'value', + }, + bottom: { + scaleType: 'time', + mapsTo: 'date', + }, + }, + color: { + scale: 10, + }, + curve: 'curveMonotoneX', + height: '400px', + }, + }; + + return ( + + + + ); +} +``` + + + +## Bar (simple) + +Bar charts use vertical or horizontal markers to compare values, allowing for assessment of discrete data or trends over time. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + type: CarbonChartType.bar, + dataSet: [ + { + group: 'Qty', + value: 65000, + }, + { + group: 'More', + value: 29123, + }, + { + group: 'Sold', + value: 35213, + }, + { + group: 'Restocking', + value: 51213, + }, + { + group: 'Misc', + value: 16932, + }, + ], + options: { + title: 'Vertical simple bar (discrete)', + axes: { + left: { + mapsTo: 'value', + }, + bottom: { + mapsTo: 'group', + scaleType: 'labels', + }, + }, + height: '400px', + }, + }; + + return ( + + + + ); +} +``` + + + +## Bar (floating) + +A floating bar chart uses horizontal bars to represent data, spanning between the minimum and maximum values, and floating freely rather than being anchored to an axis. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + type: CarbonChartType.bar, + dataSet: [ + { + group: 'Qty', + date: new Date(2019, 0, 1), + value: [10000, 41000], + }, + { + group: 'More', + date: new Date(2019, 0, 2), + value: 65000, + }, + { + group: 'Sold', + date: new Date(2019, 0, 3), + value: 30000, + }, + { + group: 'Restocking', + date: new Date(2019, 0, 6), + value: [22000, 69213], + }, + { + group: 'Misc', + date: new Date(2019, 0, 7), + value: [3500, 71213], + }, + ], + options: { + title: 'Horizontal floating bar (time series)', + axes: { + left: { + mapsTo: 'date', + scaleType: 'time', + }, + bottom: { + mapsTo: 'value', + }, + }, + height: '400px', + }, + }; + + return ( + + + + ); +} +``` + + + +## Bar (grouped) + +A grouped bar chart, also known as a clustered bar graph, multi-set bar chart, or grouped column chart, is used to compare values across multiple categories. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + type: CarbonChartType.barGrouped, + dataSet: [ + { + group: 'Dataset 1', + key: 'Qty', + value: 65000, + }, + { + group: 'Dataset 1', + key: 'More', + value: -29123, + }, + { + group: 'Dataset 1', + key: 'Sold', + value: -35213, + }, + { + group: 'Dataset 1', + key: 'Restocking', + value: 51213, + }, + { + group: 'Dataset 1', + key: 'Misc', + value: 16932, + }, + { + group: 'Dataset 2', + key: 'Qty', + value: 32432, + }, + { + group: 'Dataset 2', + key: 'More', + value: -21312, + }, + { + group: 'Dataset 2', + key: 'Sold', + value: -56456, + }, + { + group: 'Dataset 2', + key: 'Restocking', + value: -21312, + }, + { + group: 'Dataset 2', + key: 'Misc', + value: 34234, + }, + { + group: 'Dataset 3', + key: 'Qty', + value: -12312, + }, + { + group: 'Dataset 3', + key: 'More', + value: 23232, + }, + { + group: 'Dataset 3', + key: 'Sold', + value: 34232, + }, + { + group: 'Dataset 3', + key: 'Restocking', + value: -12312, + }, + { + group: 'Dataset 3', + key: 'Misc', + value: -34234, + }, + { + group: 'Dataset 4', + key: 'Qty', + value: -32423, + }, + { + group: 'Dataset 4', + key: 'More', + value: 21313, + }, + { + group: 'Dataset 4', + key: 'Sold', + value: 64353, + }, + { + group: 'Dataset 4', + key: 'Restocking', + value: 24134, + }, + { + group: 'Dataset 4', + key: 'Misc', + value: 24134, + }, + ], + options: { + title: 'Vertical grouped bar (discrete)', + axes: { + left: { + mapsTo: 'value', + }, + bottom: { + scaleType: 'labels', + mapsTo: 'key', + }, + }, + height: '400px', + }, + }; + + return ( + + + + ); +} +``` + + + +## Bar (stacked) + +A stacked bar chart, also called a stacked bar graph or stacked column chart, compares multiple variables over time. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + type: CarbonChartType.barStacked, + dataSet: [ + { + group: 'Dataset 1', + key: 'Qty', + value: 65000, + }, + { + group: 'Dataset 1', + key: 'More', + value: 29123, + }, + { + group: 'Dataset 1', + key: 'Sold', + value: 35213, + }, + { + group: 'Dataset 1', + key: 'Restocking', + value: 51213, + }, + { + group: 'Dataset 1', + key: 'Misc', + value: 16932, + }, + { + group: 'Dataset 2', + key: 'Qty', + value: 32432, + }, + { + group: 'Dataset 2', + key: 'More', + value: 21312, + }, + { + group: 'Dataset 2', + key: 'Sold', + value: 56456, + }, + { + group: 'Dataset 2', + key: 'Restocking', + value: 21312, + }, + { + group: 'Dataset 2', + key: 'Misc', + value: 34234, + }, + { + group: 'Dataset 3', + key: 'Qty', + value: 12312, + }, + { + group: 'Dataset 3', + key: 'More', + value: 23232, + }, + { + group: 'Dataset 3', + key: 'Sold', + value: 34232, + }, + { + group: 'Dataset 3', + key: 'Restocking', + value: 12312, + }, + { + group: 'Dataset 3', + key: 'Misc', + value: 34234, + }, + { + group: 'Dataset 4', + key: 'Qty', + value: 32423, + }, + { + group: 'Dataset 4', + key: 'More', + value: 21313, + }, + { + group: 'Dataset 4', + key: 'Sold', + value: 64353, + }, + { + group: 'Dataset 4', + key: 'Restocking', + value: 24134, + }, + { + group: 'Dataset 4', + key: 'Misc', + value: 32423, + }, + ], + options: { + title: 'Vertical stacked bar (discrete)', + axes: { + left: { + mapsTo: 'value', + stacked: true, + }, + bottom: { + mapsTo: 'key', + scaleType: 'labels', + }, + }, + height: '400px', + }, + }; + + return ( + + + + ); +} +``` + + + +## Boxplot + +A boxplot, or box and whisker plot, summarizes a set of data, showing its distribution and any outliers. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + type: CarbonChartType.boxplot, + dataSet: [ + { + group: 'Q1', + key: 'Monday', + value: 65000, + }, + { + group: 'Q1', + key: 'Tuesday', + value: 29123, + }, + { + group: 'Q1', + key: 'Wednesday', + value: 35213, + }, + { + group: 'Q1', + key: 'Thursday', + value: 51213, + }, + { + group: 'Q1', + key: 'Friday', + value: 16932, + }, + { + group: 'Q2', + key: 'Monday', + value: 32432, + }, + { + group: 'Q2', + key: 'Tuesday', + value: 14312, + }, + { + group: 'Q2', + key: 'Wednesday', + value: 66456, + }, + { + group: 'Q2', + key: 'Thursday', + value: 21312, + }, + { + group: 'Q2', + key: 'Friday', + value: 37234, + }, + { + group: 'Q3', + key: 'Monday', + value: 5312, + }, + { + group: 'Q3', + key: 'Tuesday', + value: 23232, + }, + { + group: 'Q3', + key: 'Wednesday', + value: 34232, + }, + { + group: 'Q3', + key: 'Thursday', + value: 12312, + }, + { + group: 'Q3', + key: 'Friday', + value: 44234, + }, + { + group: 'Q4', + key: 'Monday', + value: 32423, + }, + { + group: 'Q4', + key: 'Tuesday', + value: 21313, + }, + { + group: 'Q4', + key: 'Wednesday', + value: 64353, + }, + { + group: 'Q4', + key: 'Thursday', + value: 24134, + }, + { + group: 'Q4', + key: 'Friday', + value: 45134, + }, + ], + options: { + title: 'Horizontal box plot', + axes: { + bottom: { + mapsTo: 'value', + }, + left: { + scaleType: 'labels', + mapsTo: 'group', + }, + }, + height: '400px', + }, + }; + + return ( + + + + ); +} +``` + + + +## Bubble + +A bubble chart, or bubble plot, uses bubbles to represent data points and their relationships in a two-dimensional plot. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + 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', + }, + }; + + return ( + + + + ); +} +``` + + + +## Bullet + +Bullet charts are commonly used in dashboards to effectively compare metrics against target benchmarks or predefined ranges. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + 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', + }, + }; + + return ( + + + + ); +} +``` + +## Donut + +A donut chart is a type of pie chart with a hole in the middle. It shows the relationship of parts to a whole and the percentage each value contributes to the total. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + type: CarbonChartType.donut, + dataSet: [ + { + group: '2V2N 9KYPM version 1', + value: 20000, + }, + { + group: 'L22I P66EP L22I P66EP L22I P66EP', + value: 65000, + }, + { + group: 'JQAI 2M4L1', + value: 75000, + }, + { + group: 'J9DZ F37AP', + value: 1200, + }, + { + group: 'YEL48 Q6XK YEL48', + value: 10000, + }, + { + group: 'Misc', + value: 25000, + }, + ], + options: { + title: 'Donut', + resizable: true, + donut: { + center: { + label: 'Browsers', + }, + }, + height: '400px', + legend: { + truncation: { + type: 'none', + }, + }, + }, + }; + + return ( + + + + ); +} +``` + + + +## Gauge + +A gauge chart, also known as a dial or speedometer chart, displays a single data value quantitatively. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + type: CarbonChartType.gauge, + dataSet: [ + { + group: 'value', + value: 42, + }, + { + group: 'delta', + value: -13.37, + }, + ], + options: { + title: 'Gauge semicircular -- danger status', + resizable: true, + height: '250px', + gauge: { + type: 'semi', + status: 'danger', + }, + }, + }; + + return ( + + + + ); +} +``` + + + +## Histogram + +A histogram is a statistical chart depicting the distribution of a continuous dataset using bars, with each bar representing a specific category or class interval. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + type: CarbonChartType.histogram, + dataSet: [ + { + group: 'Dataset 1', + age: 20, + }, + { + group: 'Dataset 2', + age: 21, + }, + { + group: 'Dataset 2', + age: 23, + }, + { + group: 'Dataset 3', + age: 21, + }, + { + group: 'Dataset 3', + age: 23, + }, + { + group: 'Dataset 3', + age: 24, + }, + { + group: 'Dataset 1', + age: 30, + }, + { + group: 'Dataset 2', + age: 34, + }, + { + group: 'Dataset 1', + age: 35, + }, + { + group: 'Dataset 3', + age: 30, + }, + { + group: 'Dataset 1', + age: 40, + }, + { + group: 'Dataset 2', + age: 43, + }, + { + group: 'Dataset 1', + age: 45, + }, + { + group: 'Dataset 1', + age: 46, + }, + { + group: 'Dataset 3', + age: 40, + }, + { + group: 'Dataset 3', + age: 43, + }, + { + group: 'Dataset 3', + age: 45, + }, + { + group: 'Dataset 1', + age: 48, + }, + { + group: 'Dataset 1', + age: 50, + }, + { + group: 'Dataset 2', + age: 55, + }, + { + group: 'Dataset 2', + age: 66, + }, + { + group: 'Dataset 2', + age: 58, + }, + { + group: 'Dataset 1', + age: 70, + }, + { + group: 'Dataset 1', + age: 78, + }, + { + group: 'Dataset 3', + age: 71, + }, + { + group: 'Dataset 3', + age: 75, + }, + { + group: 'Dataset 2', + age: 83, + }, + { + group: 'Dataset 2', + age: 86, + }, + { + group: 'Dataset 1', + age: 87, + }, + ], + options: { + title: 'Histogram (linear)', + axes: { + bottom: { + title: 'Age', + mapsTo: 'age', + bins: 10, + limitDomainToBins: true, + }, + left: { + title: 'No. of participants', + scaleType: 'linear', + stacked: true, + binned: true, + }, + }, + height: '400px', + }, + }; + + return ( + + + + ); +} +``` + + + +## Line + +Line charts depict data at regular intervals, connecting points with lines. They are valuable for illustrating trends over time and comparing multiple datasets. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + 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: 'Line (discrete)', + axes: { + bottom: { + title: '2019 Annual Sales Figures', + mapsTo: 'key', + scaleType: 'labels', + }, + left: { + mapsTo: 'value', + title: 'Conversion rate', + scaleType: 'linear', + }, + }, + height: '400px', + }, + }; + + return ( + + + + ); +} +``` + + + +## Lollipop + +A lollipop chart is a variation of a bar chart ideal for highlighting individual data points or illustrating the relationship between numeric and categorical variables. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + 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', + }, + left: { + mapsTo: 'value', + }, + }, + height: '400px', + }, + }; + + return ( + + + + ); +} +``` + + + +## Meter + +Meter charts are used to measure the rate of change of a quantity against pre-defined targets. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + 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', + }, + }; + + return ( + + + + ); +} +``` + + + +## Pie + +A pie chart visually summarizes nominal data or illustrates the distribution of values, such as percentage distribution. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + type: CarbonChartType.pie, + dataSet: [ + { + group: '2V2N 9KYPM version 1', + value: 20000, + }, + { + group: 'L22I P66EP L22I P66EP L22I P66EP', + value: 65000, + }, + { + group: 'JQAI 2M4L1', + value: 75000, + }, + { + group: 'J9DZ F37AP', + value: 1200, + }, + { + group: 'YEL48 Q6XK YEL48', + value: 10000, + }, + { + group: 'Misc', + value: 25000, + }, + ], + options: { + title: 'Pie', + resizable: true, + height: '400px', + legend: { + truncation: { + type: 'none', + }, + }, + }, + }; + + return ( + + + + ); +} +``` + + + +## Radar + +A radar chart, or spider chart, web chart, or star chart, is a two-dimensional graph displaying multiple quantitative variables in a single visual. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + type: CarbonChartType.radar, + dataSet: [ + { + product: 'Product 1', + feature: 'Price', + score: 60, + }, + { + product: 'Product 1', + feature: 'Usability', + score: 92, + }, + { + product: 'Product 1', + feature: 'Availability', + score: 5, + }, + { + product: 'Product 1', + feature: 'Performance', + score: 85, + }, + { + product: 'Product 1', + feature: 'Quality', + score: 60, + }, + { + product: 'Product 2', + feature: 'Price', + score: 70, + }, + { + product: 'Product 2', + feature: 'Usability', + score: 63, + }, + { + product: 'Product 2', + feature: 'Availability', + score: 78, + }, + { + product: 'Product 2', + feature: 'Performance', + score: 50, + }, + { + product: 'Product 2', + feature: 'Quality', + score: 30, + }, + ], + options: { + title: 'Radar', + radar: { + axes: { + angle: 'feature', + value: 'score', + }, + }, + data: { + groupMapsTo: 'product', + }, + height: '400px', + }, + }; + + return ( + + + + ); +} +``` + + + +## Scatter + +Scatter plots use data points to plot two measures along a scale, allowing exploration of correlations between different variables. + +```tsx +import React from 'react'; +import { Card, CarbonChartType } from 'react-magma-dom'; + +function Example() { + const args = { + type: CarbonChartType.scatter, + dataSet: [ + { + group: 'Dataset 1', + employees: 5000, + sales: 32100, + }, + { + group: 'Dataset 1', + employees: 3000, + sales: 25100, + }, + { + group: 'Dataset 1', + employees: 8000, + sales: 12100, + }, + { + group: 'Dataset 1', + employees: 4000, + sales: 53100, + }, + { + group: 'Dataset 2', + employees: 5000, + sales: 32100, + }, + { + group: 'Dataset 2', + employees: 2000, + sales: 34100, + }, + { + group: 'Dataset 2', + employees: 4000, + sales: 23100, + }, + { + group: 'Dataset 2', + employees: 7000, + sales: 14100, + }, + { + group: 'Dataset 2', + employees: 6000, + sales: 53100, + }, + ], + options: { + title: 'Scatter (linear x & y)', + axes: { + bottom: { + title: 'No. of employees', + mapsTo: 'employees', + scaleType: 'linear', + }, + left: { + title: 'Annual sales', + mapsTo: 'sales', + scaleType: 'linear', + }, + }, + height: '400px', + }, + }; + + return ( + + + + ); +} +``` + + + + diff --git a/website/react-magma-docs/src/pages/data-visualization/chart-types.css b/website/react-magma-docs/src/pages/data-visualization/chart-types.css new file mode 100644 index 0000000000..bdbe20ce0d --- /dev/null +++ b/website/react-magma-docs/src/pages/data-visualization/chart-types.css @@ -0,0 +1,96 @@ +.container { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; + padding: 0 !important; +} + +@media (max-width: 768px) { + .container { + grid-template-columns: 1fr; + } +} + +.item { + border: 1px solid #d4d4d4; + border-radius: 8px; + display: flex; + flex-direction: column; + height: 100%; +} + +.description { + background-color: #f5f5f5; + padding: 16px; + flex-grow: 1; + display: flex; + flex-direction: column; +} + +.description > h2 { + padding: 0 !important; + margin: 0 !important; + font-size: 14px; + font-weight: 600; + line-height: 20px; + letter-spacing: 0.1599999964237213px; + text-align: left; + text-underline-position: from-font; + text-decoration-skip-ink: none; + text-transform: uppercase; +} + +.description > p { + margin-top: 8px; + font-size: 14px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.1599999964237213px; + text-align: left; +} + +.description > a { + font-size: 12px; + font-weight: 500; + line-height: 16px; + letter-spacing: 0.3199999928474426px; + text-align: center; + text-underline-position: from-font; + text-decoration-skip-ink: none; + padding: 6px 8px; + border: 1px solid #d4d4d4; + border-radius: 8px; + background-color: #ffffff; + text-transform: uppercase; + cursor: pointer; + transition: all 0.25s ease-in-out; + outline: none !important; + margin-top: auto; + width: fit-content; + text-decoration: none; + color: #454545; +} + +.description > a:hover { + background-color: #f5f5f5; +} + +.description > a:active { + background-color: #d4d4d4; +} + +.description > a:focus { + border-color: #8c8c8c; + color: #454545; + box-shadow: 0 0 0 3px rgba(140, 140, 140, 0.4); +} + +figure { + margin: 0 !important; + padding-block: 8px !important; +} + +figure > span { + border: none !important; + width: 144px; +} diff --git a/website/react-magma-docs/src/pages/data-visualization/chart-types.mdx b/website/react-magma-docs/src/pages/data-visualization/chart-types.mdx new file mode 100644 index 0000000000..0cfaa3445c --- /dev/null +++ b/website/react-magma-docs/src/pages/data-visualization/chart-types.mdx @@ -0,0 +1,304 @@ +--- +pageTitle: Chart Types +title: Chart Types +order: 1 +--- + +import { LeadParagraph } from '../../components/LeadParagraph'; +import './chart-types.css'; + + + + + Begin by identifying the objective of the visualization, and then choose the + chart type that best fits the purpose. + + +## Comparisons + +Comparison charts compare data between multiple distinct categories. + +
+
+
+ GATSBY_EMPTY_ALT +
+
+

Simple Bar

+

+ Bar charts use vertical or horizontal markers to compare values, + allowing for assessment of discrete data or trends over time. +

+ View Demo +
+
+
+
+ GATSBY_EMPTY_ALT +
+
+

Grouped Bar

+

+ A grouped bar chart, also known as a clustered bar graph, multi-set bar + chart, or grouped column chart, is used to compare values across + multiple categories. +

+ View Demo +
+
+
+
+ GATSBY_EMPTY_ALT +
+
+

Floating Bar

+

+ A floating bar chart uses horizontal bars to represent data, spanning + between the minimum and maximum values, and floating freely rather than + being anchored to an axis. +

+ View Demo +
+
+
+
+ GATSBY_EMPTY_ALT +
+
+

Bubble

+

+ A bubble chart, or bubble plot, uses bubbles to represent data points + and their relationships in a two-dimensional plot. +

+ View Demo +
+
+
+
+ GATSBY_EMPTY_ALT +
+
+

Radar

+

+ A radar chart, or spider chart, web chart, or star chart, is a + two-dimensional graph displaying multiple quantitative variables in a + single visual. +

+ View Demo +
+
+
+
+ GATSBY_EMPTY_ALT +
+
+

Lollipop

+

+ A lollipop chart is a variation of a bar chart ideal for highlighting + individual data points or illustrating the relationship between numeric + and categorical variables. +

+ View Demo +
+
+
+ +## Trends + +Trend charts show data over a period of time, to reveal trends or make comparisons across multiple categories. + +
+
+
+ GATSBY_EMPTY_ALT +
+
+

Line

+

+ Line charts depict data at regular intervals, connecting points with + lines. They are valuable for illustrating trends over time and comparing + multiple datasets. +

+ View Demo +
+
+
+
+ GATSBY_EMPTY_ALT +
+
+

Area

+

+ Area charts share similarities with line charts, distinguished by the + filled areas below the lines. +

+ View Demo +
+
+
+
+ GATSBY_EMPTY_ALT +
+
+

Boxplot

+

+ A boxplot, or box and whisker plot, summarizes a set of data, showing + its distribution and any outliers. +

+ View Demo +
+
+
+
+ GATSBY_EMPTY_ALT +
+
+

Histogram

+

+ A histogram is a statistical chart depicting the distribution of a + continuous dataset using bars, with each bar representing a specific + category or class interval. +

+ View Demo +
+
+
+ +## Part-to-whole + +Part-to-whole charts show how partial elements add up to a total. + +
+
+
+ GATSBY_EMPTY_ALT +
+
+

Pie

+

+ A pie chart visually summarizes nominal data or illustrates the + distribution of values, such as percentage distribution. +

+ View Demo +
+
+
+
+ GATSBY_EMPTY_ALT +
+
+

Donut

+

+ A donut chart is a type of pie chart with a hole in the middle. It shows + the relationship of parts to a whole and the percentage each value + contributes to the total. +

+ View Demo +
+
+
+
+ GATSBY_EMPTY_ALT +
+
+

Stacked Bar

+

+ A stacked bar chart, also called a stacked bar graph or stacked column + chart, compares multiple variables over time. +

+ View Demo +
+
+
+
+ GATSBY_EMPTY_ALT +
+
+

Bullet

+

+ Bullet charts are commonly used in dashboards to effectively compare + metrics against target benchmarks or predefined ranges. +

+ View Demo +
+
+
+
+ GATSBY_EMPTY_ALT +
+
+

Stacked area

+

+ A stacked area chart is a graph that shows how the values of multiple + groups change over time. +

+ View Demo +
+
+
+
+ GATSBY_EMPTY_ALT +
+
+

Meter

+

+ Meter charts are used to measure the rate of change of a quantity + against pre-defined targets. +

+ View Demo +
+
+
+
+ GATSBY_EMPTY_ALT +
+
+

Gauge

+

+ A gauge chart, also known as a dial or speedometer chart, displays a + single data value quantitatively. +

+ View Demo +
+
+
+ +## Correlations + +Correlation charts show the relationship between two or more variables. + +
+
+
+ GATSBY_EMPTY_ALT +
+
+

Scatter

+

+ Scatter plots use data points to plot two measures along a scale, + allowing exploration of correlations between different variables. +

+ View Demo +
+
+
+ + From 3286988d749ceef344b2b661fa8cae175dd36bcf Mon Sep 17 00:00:00 2001 From: Nikita Orliak Date: Tue, 12 Nov 2024 15:12:18 +0100 Subject: [PATCH 2/8] feat(Charts): add path to all links --- .../data-visualization-intro/introduction.mdx | 7 +- .../pages/data-visualization/chart-demos.mdx | 87 +++++++++++++++---- 2 files changed, 74 insertions(+), 20 deletions(-) diff --git a/website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx b/website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx index 7adc2e6268..0d574bb7f5 100644 --- a/website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx +++ b/website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx @@ -15,10 +15,13 @@ import { Flex, FlexBehavior, FlexAlignItems, magma } from 'react-magma-dom'; Magma Charts is based on [Carbon Charts from IBM](https://charts.carbondesignsystem.com/introduction). -Get started below with implementation instructions for developers. You can also learn more about the [chart types](#) we provide, as well as [view examples](#). +Get started below with implementation instructions for developers. You can also learn more about the [chart types](../../data-visualization/chart-types) we provide, as well as [view examples](../../data-visualization/chart-demos). export const MagmaChartsSiteLink = () => ( - + export const MoreDemoesLink = ({ number, path }) => ( - + + ## Area (stacked) @@ -296,7 +299,10 @@ function Example() { } ``` - + ## Bar (simple) @@ -354,7 +360,10 @@ function Example() { } ``` - + ## Bar (floating) @@ -417,7 +426,10 @@ function Example() { } ``` - + ## Bar (grouped) @@ -555,7 +567,10 @@ function Example() { } ``` - + ## Bar (stacked) @@ -694,7 +709,10 @@ function Example() { } ``` - + ## Boxplot @@ -832,7 +850,10 @@ function Example() { } ``` - + ## Bubble @@ -945,7 +966,10 @@ function Example() { } ``` - + ## Bullet @@ -1085,7 +1109,10 @@ function Example() { } ``` - + ## Gauge @@ -1127,7 +1154,10 @@ function Example() { } ``` - + ## Histogram @@ -1286,7 +1316,10 @@ function Example() { } ``` - + ## Line @@ -1429,7 +1462,10 @@ function Example() { } ``` - + ## Lollipop @@ -1488,7 +1524,10 @@ function Example() { } ``` - + ## Meter @@ -1540,7 +1579,10 @@ function Example() { } ``` - + ## Pie @@ -1599,7 +1641,10 @@ function Example() { } ``` - + ## Radar @@ -1687,7 +1732,10 @@ function Example() { } ``` - + ## Scatter @@ -1773,6 +1821,9 @@ function Example() { } ``` - + From 9527a00e1ece943be5722b25a4dca4bfaf9325a0 Mon Sep 17 00:00:00 2001 From: Nikita Orliak Date: Tue, 12 Nov 2024 17:33:02 +0100 Subject: [PATCH 3/8] fix(Charts): fix comments --- .changeset/feat-add-new-charts.md | 5 + .changeset/feat-charts-documentation.md | 2 +- .changeset/feat-fifth-batch-of-charts.md | 5 - .changeset/feat-fourth-batch-of-charts.md | 5 - .changeset/feat-third-batch-of-charts.md | 5 - .../src/images/icons/storybook-icon.tsx | 43 ++ .../react-magma-docs/src/pages/api/chart.mdx | 434 ------------------ .../data-visualization-intro/introduction.mdx | 71 +-- .../pages/data-visualization/chart-demos.mdx | 36 +- .../pages/data-visualization/chart-types.css | 4 +- 10 files changed, 86 insertions(+), 524 deletions(-) create mode 100644 .changeset/feat-add-new-charts.md delete mode 100644 .changeset/feat-fifth-batch-of-charts.md delete mode 100644 .changeset/feat-fourth-batch-of-charts.md delete mode 100644 .changeset/feat-third-batch-of-charts.md create mode 100644 website/react-magma-docs/src/images/icons/storybook-icon.tsx delete mode 100644 website/react-magma-docs/src/pages/api/chart.mdx diff --git a/.changeset/feat-add-new-charts.md b/.changeset/feat-add-new-charts.md new file mode 100644 index 0000000000..6109a9a84c --- /dev/null +++ b/.changeset/feat-add-new-charts.md @@ -0,0 +1,5 @@ +--- +'react-magma-charts': minor +--- + +feat(CarbonCharts): Add new charts: `Histogram`, `Scatter`, `Step`, `SparkLine`, `Boxplot`, `Bullet`, `Combo`, `Bubble`, `Gauge`, `Meter`, and `Radar`. diff --git a/.changeset/feat-charts-documentation.md b/.changeset/feat-charts-documentation.md index 255e76f022..cd74a237e3 100644 --- a/.changeset/feat-charts-documentation.md +++ b/.changeset/feat-charts-documentation.md @@ -1,5 +1,5 @@ --- -'react-magma-dom': minor +'react-magma-docs': patch --- feat(Charts): Add the `Data Visualization` tab with pages `Getting Started`, `Chart Types` and `Chart Demos`. diff --git a/.changeset/feat-fifth-batch-of-charts.md b/.changeset/feat-fifth-batch-of-charts.md deleted file mode 100644 index 1a709e1fed..0000000000 --- a/.changeset/feat-fifth-batch-of-charts.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'react-magma-dom': minor ---- - -feat(CarbonCharts): Add new charts: `Histogram`, `Scatter`, `Step`, `SparkLine`. diff --git a/.changeset/feat-fourth-batch-of-charts.md b/.changeset/feat-fourth-batch-of-charts.md deleted file mode 100644 index 82b04b7d05..0000000000 --- a/.changeset/feat-fourth-batch-of-charts.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'react-magma-dom': minor ---- - -feat(CarbonCharts): Add new charts: `Boxplot`, `Bullet`, `Combo`. diff --git a/.changeset/feat-third-batch-of-charts.md b/.changeset/feat-third-batch-of-charts.md deleted file mode 100644 index d06c9761de..0000000000 --- a/.changeset/feat-third-batch-of-charts.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'react-magma-dom': minor ---- - -feat(CarbonCharts): Add new charts: `Bubble`, `Gauge`, `Meter`, `Radar`. diff --git a/website/react-magma-docs/src/images/icons/storybook-icon.tsx b/website/react-magma-docs/src/images/icons/storybook-icon.tsx new file mode 100644 index 0000000000..29c55f13ef --- /dev/null +++ b/website/react-magma-docs/src/images/icons/storybook-icon.tsx @@ -0,0 +1,43 @@ +import React from 'react'; + +export const StorybookIcon = () => ( + + + + + + + + + + + + + + + + +); diff --git a/website/react-magma-docs/src/pages/api/chart.mdx b/website/react-magma-docs/src/pages/api/chart.mdx deleted file mode 100644 index 10b942469a..0000000000 --- a/website/react-magma-docs/src/pages/api/chart.mdx +++ /dev/null @@ -1,434 +0,0 @@ ---- -pageTitle: Chart API -title: Chart ---- - -import { LeadParagraph } from '../../components/LeadParagraph'; -import '@react-magma/charts/dist/charts.css'; - - - -Magma charts enable you to convey precise and compelling narratives around data through visually appealing and accessible visualizations. - -The CarbonChart component is a wrapper for the [Carbon Design System Simple Charts](https://carbondesignsystem.com/data-visualization/simple-charts). - - - - Important! CarbonChart is imported from{' '} - @react-magma/charts which must be installed as a peer dependency. -

- In addition, you must manually import the styles:
import '@react-magma/charts/dist/charts.css'; - - -We currently support the following chart types: -- AreaChart -- StackedAreaChart -- DonutChart -- GroupedBarChart -- LineChart -- LollipopChart -- PieChart -- SimpleBarChart -- StackedBarChart - -## Area Chart - -Area charts share similarities with line charts, distinguished by the filled areas below the lines, adorned with colors or patterns. Stacked charts, on the other hand, prove valuable for comparing proportional contributions within a category by plotting the relative value each data series contributes to the total. - -```typescript -import React from 'react'; -import { Card } from 'react-magma-dom'; -import { CarbonChart, CarbonChartType } from '@react-magma/charts'; -// IMPORTANT: Uncomment the line below for the correct styles -// import '@react-magma/charts/dist/charts.css'; - -export function Example() { - const dataSet = [ - { - group: 'Dataset 1', - date: '2019-01-01T05:00:00.000Z', - value: 0, - }, - { - group: 'Dataset 1', - date: '2019-01-06T05:00:00.000Z', - value: -37312, - }, - { - group: 'Dataset 1', - date: '2019-01-08T05:00:00.000Z', - value: -22392, - }, - { - group: 'Dataset 1', - date: '2019-01-15T05:00:00.000Z', - value: -52576, - }, - { - group: 'Dataset 1', - date: '2019-01-19T05:00:00.000Z', - value: 20135, - }, - { - group: 'Dataset 2', - date: '2019-01-01T05:00:00.000Z', - value: 47263, - }, - { - group: 'Dataset 2', - date: '2019-01-05T05:00:00.000Z', - value: 14178, - }, - { - group: 'Dataset 2', - date: '2019-01-08T05:00:00.000Z', - value: 23094, - }, - { - group: 'Dataset 2', - date: '2019-01-13T05:00:00.000Z', - value: 45281, - }, - { - group: 'Dataset 2', - date: '2019-01-19T05:00:00.000Z', - value: -63954, - }, - ]; - - const options = { - title: 'Area (time series - natural curve)', - axes: { - bottom: { - title: '2024 Annual Sales Figures', - mapsTo: 'date', - scaleType: 'time', - }, - left: { - mapsTo: 'value', - scaleType: 'linear', - }, - }, - curve: 'curveNatural', - height: '400px', - }; - - return ( - - - - ); -} -``` - -## Donut Chart - -```typescript -import React from 'react'; -import { Card } from 'react-magma-dom'; -import { CarbonChart, CarbonChartType } from '@react-magma/charts'; -// IMPORTANT: Uncomment the line below for the correct styles -// import '@react-magma/charts/dist/charts.css'; - -export function Example() { - const dataSet = [ - { - group: '2V2N 9KYPM version 1', - value: 20000, - }, - { - group: 'L22I P66EP L22I P66EP L22I P66EP', - value: 65000, - }, - { - group: 'JQAI 2M4L1', - value: 75000, - }, - { - group: 'J9DZ F37AP', - value: 1200, - }, - { - group: 'YEL48 Q6XK YEL48', - value: 10000, - }, - { - group: 'Misc', - value: 25000, - }, - ]; - - const options = { - title: 'Donut', - resizable: true, - donut: { - center: { - label: 'Browsers', - }, - }, - height: '400px', - legend: { - truncation: { - type: 'none', - }, - }, - }; - - return ( - - - - ); -} -``` - - -## Line Chart - -Line charts depict data at regular intervals, connecting the points with lines. These visualizations are valuable for illustrating trends over time and comparing multiple datasets. - -```typescript -import React from 'react'; -import { Card } from 'react-magma-dom'; -import { CarbonChart, CarbonChartType } from '@react-magma/charts'; -// IMPORTANT: Uncomment the line below for the correct styles -// import '@react-magma/charts/dist/charts.css'; - -export function Example() { - const 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, - }, - ]; - - const options = { - title: 'Line (discrete)', - axes: { - bottom: { - title: '2024 Annual Sales Figures', - mapsTo: 'key', - scaleType: 'labels', - }, - left: { - mapsTo: 'value', - title: 'Conversion rate', - scaleType: 'linear', - }, - }, - height: '400px', - }; - - return ( - - - - ); -} -``` - -## Pie Chart - -```typescript -import React from 'react'; -import { Card } from 'react-magma-dom'; -import { CarbonChart, CarbonChartType } from '@react-magma/charts'; -// IMPORTANT: Uncomment the line below for the correct styles -// import '@react-magma/charts/dist/charts.css'; - -export function Example() { - const dataSet = [ - { - group: '2V2N 9KYPM version 1', - value: 20000, - }, - { - group: 'L22I P66EP L22I P66EP L22I P66EP', - value: 65000, - }, - { - group: 'JQAI 2M4L1', - value: 75000, - }, - { - group: 'J9DZ F37AP', - value: 1200, - }, - { - group: 'YEL48 Q6XK YEL48', - value: 10000, - }, - { - group: 'Misc', - value: 25000, - }, - ]; - - const options = { - title: 'Pie', - resizable: true, - height: '400px', - legend: { - truncation: { - type: 'none', - }, - }, - }; - - return ( - - - - ); -} -``` - -## CarbonChart Props - - - - diff --git a/website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx b/website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx index 0d574bb7f5..0ed3abfd72 100644 --- a/website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx +++ b/website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx @@ -5,6 +5,8 @@ order: 1 import { LeadParagraph } from '../../components/LeadParagraph'; import { Flex, FlexBehavior, FlexAlignItems, magma } from 'react-magma-dom'; +import { OpenInNewIcon } from 'react-magma-icons'; +import { StorybookIcon } from '../../images/icons/storybook-icon'; @@ -19,7 +21,7 @@ Get started below with implementation instructions for developers. You can also export const MagmaChartsSiteLink = () => ( ( borderRadius: magma.spaceScale.spacing03, }} > - - - - - - - - - - - - - - - - + Magma Charts demo site - - - + ); @@ -93,6 +46,17 @@ export const MagmaChartsSiteLink = () => ( ## Installation + + Important! CarbonChart is imported from{' '} + @react-magma/charts which must be installed as a peer + dependency. +
+
+ In addition, you must manually import the styles: +
+ import '@react-magma/charts/dist/charts.css'; + + ### Setup Requirements Your project needs to be running **React v17** or greater @@ -114,7 +78,8 @@ npm install --save \ "react@^17.0.2" \ "react-dom@^17.0.2" \ "react-magma-dom@^4.7.0-next.1" \ - "react-magma-icons@^3.0.0" + "react-magma-icons@^3.0.0" \ + "@react-magma/charts" ``` diff --git a/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx b/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx index 85b1c6e45b..a08da6e56c 100644 --- a/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx +++ b/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx @@ -18,7 +18,7 @@ import { Flex, FlexBehavior, FlexAlignItems, magma } from 'react-magma-dom'; -export const MoreDemoesLink = ({ number, path }) => ( +export const MoreDemosLink = ({ number, path }) => ( ## Area (stacked) @@ -301,7 +301,7 @@ function Example() { ## Bar (simple) @@ -362,7 +362,7 @@ function Example() { ## Bar (floating) @@ -428,7 +428,7 @@ function Example() { ## Bar (grouped) @@ -569,7 +569,7 @@ function Example() { ## Bar (stacked) @@ -711,7 +711,7 @@ function Example() { ## Boxplot @@ -852,7 +852,7 @@ function Example() { ## Bubble @@ -968,7 +968,7 @@ function Example() { ## Bullet @@ -1111,7 +1111,7 @@ function Example() { ## Gauge @@ -1156,7 +1156,7 @@ function Example() { ## Histogram @@ -1318,7 +1318,7 @@ function Example() { ## Line @@ -1464,7 +1464,7 @@ function Example() { ## Lollipop @@ -1526,7 +1526,7 @@ function Example() { ## Meter @@ -1581,7 +1581,7 @@ function Example() { ## Pie @@ -1643,7 +1643,7 @@ function Example() { ## Radar @@ -1734,7 +1734,7 @@ function Example() { ## Scatter @@ -1823,7 +1823,7 @@ function Example() { diff --git a/website/react-magma-docs/src/pages/data-visualization/chart-types.css b/website/react-magma-docs/src/pages/data-visualization/chart-types.css index bdbe20ce0d..63bcbe907d 100644 --- a/website/react-magma-docs/src/pages/data-visualization/chart-types.css +++ b/website/react-magma-docs/src/pages/data-visualization/chart-types.css @@ -33,7 +33,6 @@ font-size: 14px; font-weight: 600; line-height: 20px; - letter-spacing: 0.1599999964237213px; text-align: left; text-underline-position: from-font; text-decoration-skip-ink: none; @@ -41,11 +40,11 @@ } .description > p { + font-family: Work Sans; margin-top: 8px; font-size: 14px; font-weight: 400; line-height: 20px; - letter-spacing: 0.1599999964237213px; text-align: left; } @@ -53,7 +52,6 @@ font-size: 12px; font-weight: 500; line-height: 16px; - letter-spacing: 0.3199999928474426px; text-align: center; text-underline-position: from-font; text-decoration-skip-ink: none; From 6173d2e07a1ca2ffbc522c53e2ba9b868a666d6f Mon Sep 17 00:00:00 2001 From: Nikita Orliak Date: Tue, 19 Nov 2024 12:09:17 +0100 Subject: [PATCH 4/8] fix(ChardDocs): fix comments [2] --- .changeset/feat-add-new-charts.md | 2 +- .../data-visualization-intro/introduction.mdx | 2 +- .../pages/data-visualization/chart-demos.mdx | 180 +++++++++--------- 3 files changed, 96 insertions(+), 88 deletions(-) diff --git a/.changeset/feat-add-new-charts.md b/.changeset/feat-add-new-charts.md index 6109a9a84c..f533545b4a 100644 --- a/.changeset/feat-add-new-charts.md +++ b/.changeset/feat-add-new-charts.md @@ -1,5 +1,5 @@ --- -'react-magma-charts': minor +'@react-magma/charts': minor --- feat(CarbonCharts): Add new charts: `Histogram`, `Scatter`, `Step`, `SparkLine`, `Boxplot`, `Bullet`, `Combo`, `Bubble`, `Gauge`, `Meter`, and `Radar`. diff --git a/website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx b/website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx index 0ed3abfd72..f37c15906f 100644 --- a/website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx +++ b/website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx @@ -79,7 +79,7 @@ npm install --save \ "react-dom@^17.0.2" \ "react-magma-dom@^4.7.0-next.1" \ "react-magma-icons@^3.0.0" \ - "@react-magma/charts" + "@react-magma/charts@^9.0.0" ``` diff --git a/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx b/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx index a08da6e56c..7b031c4e85 100644 --- a/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx +++ b/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx @@ -7,6 +7,9 @@ order: 2 import { LeadParagraph } from '../../components/LeadParagraph'; import { MagmaChartsSiteLink } from '../data-visualization-intro/introduction'; import { Flex, FlexBehavior, FlexAlignItems, magma } from 'react-magma-dom'; +import { StorybookIcon } from '../../images/icons/storybook-icon'; +import { OpenInNewIcon } from 'react-magma-icons'; +import '@react-magma/charts/dist/charts.css'; @@ -32,58 +35,9 @@ export const MoreDemosLink = ({ number, path }) => ( marginTop: magma.spaceScale.spacing06, }} > - - - - - - - - - - - - - - - - + {number} more demos - - - + ); @@ -94,7 +48,10 @@ Area charts share similarities with line charts, distinguished by the filled are ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -177,7 +134,7 @@ function Example() { } ``` - @@ -188,7 +145,10 @@ A stacked area chart is a graph that shows how the values of multiple groups ch ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -299,7 +259,7 @@ function Example() { } ``` - @@ -310,7 +270,10 @@ Bar charts use vertical or horizontal markers to compare values, allowing for as ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -360,7 +323,7 @@ function Example() { } ``` - @@ -371,7 +334,10 @@ A floating bar chart uses horizontal bars to represent data, spanning between th ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -426,7 +392,7 @@ function Example() { } ``` - @@ -437,7 +403,10 @@ A grouped bar chart, also known as a clustered bar graph, multi-set bar chart, o ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -567,7 +536,7 @@ function Example() { } ``` - @@ -578,7 +547,10 @@ A stacked bar chart, also called a stacked bar graph or stacked column chart, co ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -709,7 +681,7 @@ function Example() { } ``` - @@ -720,7 +692,10 @@ A boxplot, or box and whisker plot, summarizes a set of data, showing its distri ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -850,7 +825,7 @@ function Example() { } ``` - @@ -861,7 +836,10 @@ A bubble chart, or bubble plot, uses bubbles to represent data points and their ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -966,7 +944,7 @@ function Example() { } ``` - @@ -977,7 +955,10 @@ Bullet charts are commonly used in dashboards to effectively compare metrics aga ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -1053,7 +1034,10 @@ A donut chart is a type of pie chart with a hole in the middle. It shows the rel ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -1109,7 +1093,7 @@ function Example() { } ``` - @@ -1120,7 +1104,10 @@ A gauge chart, also known as a dial or speedometer chart, displays a single data ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -1154,7 +1141,7 @@ function Example() { } ``` - @@ -1165,7 +1152,10 @@ A histogram is a statistical chart depicting the distribution of a continuous da ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -1316,7 +1306,7 @@ function Example() { } ``` - @@ -1327,7 +1317,10 @@ Line charts depict data at regular intervals, connecting points with lines. They ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -1462,7 +1455,7 @@ function Example() { } ``` - @@ -1473,7 +1466,10 @@ A lollipop chart is a variation of a bar chart ideal for highlighting individual ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -1524,7 +1520,7 @@ function Example() { } ``` - @@ -1535,7 +1531,10 @@ Meter charts are used to measure the rate of change of a quantity against pre-d ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -1579,7 +1578,7 @@ function Example() { } ``` - @@ -1590,7 +1589,10 @@ A pie chart visually summarizes nominal data or illustrates the distribution of ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -1641,7 +1643,7 @@ function Example() { } ``` - @@ -1652,7 +1654,10 @@ A radar chart, or spider chart, web chart, or star chart, is a two-dimensional g ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -1732,7 +1737,7 @@ function Example() { } ``` - @@ -1743,7 +1748,10 @@ Scatter plots use data points to plot two measures along a scale, allowing explo ```tsx import React from 'react'; -import { Card, CarbonChartType } from 'react-magma-dom'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; function Example() { const args = { @@ -1821,7 +1829,7 @@ function Example() { } ``` - From b7ed6d8e5c137874d63737f7abc269397d19c70d Mon Sep 17 00:00:00 2001 From: Nikita Orliak Date: Mon, 25 Nov 2024 12:32:20 +0100 Subject: [PATCH 5/8] feat(Chart): commented all examples before adding new charts --- .changeset/feat-add-new-charts.md | 5 +- .../components/CarbonChart/CarbonChart.tsx | 3 + .../CarbonChartBoxplot.stories.tsx | 242 +-- .../CarbonChart/CarbonChartBubble.stories.tsx | 952 +++++------ .../CarbonChart/CarbonChartCombo.stories.tsx | 1418 +++++++++++++++++ .../CarbonChart/CarbonChartGauge.stories.tsx | 50 +- .../CarbonChartHistogram.stories.tsx | 1188 +++++++------- .../CarbonChart/CarbonChartMeter.stories.tsx | 296 ++-- .../CarbonChart/CarbonChartRadar.stories.tsx | 752 ++++----- .../CarbonChartScatter.stories.tsx | 728 ++++----- .../data-visualization/chart-demos.future.mdx | 916 +++++++++++ .../pages/data-visualization/chart-demos.mdx | 877 +--------- .../data-visualization/chart-types.future.mdx | 142 ++ .../pages/data-visualization/chart-types.mdx | 116 -- 14 files changed, 4632 insertions(+), 3053 deletions(-) create mode 100644 packages/charts/src/components/CarbonChart/CarbonChartCombo.stories.tsx create mode 100644 website/react-magma-docs/src/pages/data-visualization/chart-demos.future.mdx create mode 100644 website/react-magma-docs/src/pages/data-visualization/chart-types.future.mdx diff --git a/.changeset/feat-add-new-charts.md b/.changeset/feat-add-new-charts.md index f533545b4a..a573bfdbac 100644 --- a/.changeset/feat-add-new-charts.md +++ b/.changeset/feat-add-new-charts.md @@ -1,5 +1,6 @@ ---- + + diff --git a/packages/charts/src/components/CarbonChart/CarbonChart.tsx b/packages/charts/src/components/CarbonChart/CarbonChart.tsx index 3b588ba44c..748f35a622 100644 --- a/packages/charts/src/components/CarbonChart/CarbonChart.tsx +++ b/packages/charts/src/components/CarbonChart/CarbonChart.tsx @@ -20,6 +20,7 @@ import { HistogramChart, MeterChart, ScatterChart, + ComboChart, } from '@carbon/charts-react'; import './styles.min.css'; @@ -41,6 +42,7 @@ export enum CarbonChartType { pie = 'pie', radar = 'radar', scatter = 'scatter', + combo = 'combo', } export interface CarbonChartProps extends React.HTMLAttributes { @@ -484,6 +486,7 @@ export const CarbonChart = React.forwardRef( histogram: HistogramChart, meter: MeterChart, scatter: ScatterChart, + combo: ComboChart, }; function buildColors() { diff --git a/packages/charts/src/components/CarbonChart/CarbonChartBoxplot.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartBoxplot.stories.tsx index cd23b24a7e..60d6ccf632 100644 --- a/packages/charts/src/components/CarbonChart/CarbonChartBoxplot.stories.tsx +++ b/packages/charts/src/components/CarbonChart/CarbonChartBoxplot.stories.tsx @@ -149,124 +149,126 @@ HorizontalBoxplot.args = { }; -export const VerticalBoxplot = Template.bind({}); -VerticalBoxplot.args = { - isInverse: false, - type: CarbonChartType.boxplot, - dataSet: [ - { - group: 'Q1', - key: 'Monday', - value: 65000, - }, - { - group: 'Q1', - key: 'Tuesday', - value: 29123, - }, - { - group: 'Q1', - key: 'Wednesday', - value: 35213, - }, - { - group: 'Q1', - key: 'Thursday', - value: 51213, - }, - { - group: 'Q1', - key: 'Friday', - value: 16932, - }, - { - group: 'Q2', - key: 'Monday', - value: 32432, - }, - { - group: 'Q2', - key: 'Tuesday', - value: 14312, - }, - { - group: 'Q2', - key: 'Wednesday', - value: 66456, - }, - { - group: 'Q2', - key: 'Thursday', - value: 21312, - }, - { - group: 'Q2', - key: 'Friday', - value: 37234, - }, - { - group: 'Q3', - key: 'Monday', - value: 5312, - }, - { - group: 'Q3', - key: 'Tuesday', - value: 23232, - }, - { - group: 'Q3', - key: 'Wednesday', - value: 34232, - }, - { - group: 'Q3', - key: 'Thursday', - value: 12312, - }, - { - group: 'Q3', - key: 'Friday', - value: 44234, - }, - { - group: 'Q4', - key: 'Monday', - value: 32423, - }, - { - group: 'Q4', - key: 'Tuesday', - value: 21313, - }, - { - group: 'Q4', - key: 'Wednesday', - value: 64353, - }, - { - group: 'Q4', - key: 'Thursday', - value: 24134, - }, - { - group: 'Q4', - key: 'Friday', - value: 45134, - }, - ], - options: { - title: 'Vertical box plot', - axes: { - left: { - mapsTo: 'value', - }, - bottom: { - scaleType: 'labels', - mapsTo: 'group', - }, - }, - height: '400px', - }, -}; +// Uncomment when adding new charts. Issues: #1054, #1055, #1056 + +// export const VerticalBoxplot = Template.bind({}); +// VerticalBoxplot.args = { +// isInverse: false, +// type: CarbonChartType.boxplot, +// dataSet: [ +// { +// group: 'Q1', +// key: 'Monday', +// value: 65000, +// }, +// { +// group: 'Q1', +// key: 'Tuesday', +// value: 29123, +// }, +// { +// group: 'Q1', +// key: 'Wednesday', +// value: 35213, +// }, +// { +// group: 'Q1', +// key: 'Thursday', +// value: 51213, +// }, +// { +// group: 'Q1', +// key: 'Friday', +// value: 16932, +// }, +// { +// group: 'Q2', +// key: 'Monday', +// value: 32432, +// }, +// { +// group: 'Q2', +// key: 'Tuesday', +// value: 14312, +// }, +// { +// group: 'Q2', +// key: 'Wednesday', +// value: 66456, +// }, +// { +// group: 'Q2', +// key: 'Thursday', +// value: 21312, +// }, +// { +// group: 'Q2', +// key: 'Friday', +// value: 37234, +// }, +// { +// group: 'Q3', +// key: 'Monday', +// value: 5312, +// }, +// { +// group: 'Q3', +// key: 'Tuesday', +// value: 23232, +// }, +// { +// group: 'Q3', +// key: 'Wednesday', +// value: 34232, +// }, +// { +// group: 'Q3', +// key: 'Thursday', +// value: 12312, +// }, +// { +// group: 'Q3', +// key: 'Friday', +// value: 44234, +// }, +// { +// group: 'Q4', +// key: 'Monday', +// value: 32423, +// }, +// { +// group: 'Q4', +// key: 'Tuesday', +// value: 21313, +// }, +// { +// group: 'Q4', +// key: 'Wednesday', +// value: 64353, +// }, +// { +// group: 'Q4', +// key: 'Thursday', +// value: 24134, +// }, +// { +// group: 'Q4', +// key: 'Friday', +// value: 45134, +// }, +// ], +// options: { +// title: 'Vertical box plot', +// axes: { +// left: { +// mapsTo: 'value', +// }, +// bottom: { +// scaleType: 'labels', +// mapsTo: 'group', +// }, +// }, +// height: '400px', +// }, +// }; diff --git a/packages/charts/src/components/CarbonChart/CarbonChartBubble.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartBubble.stories.tsx index 9159d06e51..f76d270196 100644 --- a/packages/charts/src/components/CarbonChart/CarbonChartBubble.stories.tsx +++ b/packages/charts/src/components/CarbonChart/CarbonChartBubble.stories.tsx @@ -123,482 +123,484 @@ BubbleLinear.args = { }, }; -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', - }, -}; +// Uncomment when adding new charts. Issues: #1054, #1055, #1056 -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 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 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 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 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 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 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', - }, -}; +// 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', +// }, +// }; diff --git a/packages/charts/src/components/CarbonChart/CarbonChartCombo.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartCombo.stories.tsx new file mode 100644 index 0000000000..ae8b0cfdd7 --- /dev/null +++ b/packages/charts/src/components/CarbonChart/CarbonChartCombo.stories.tsx @@ -0,0 +1,1418 @@ +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/Combo', + argTypes: { + isInverse: { + control: { + type: 'boolean', + }, + }, + type: { + control: { + type: 'select', + options: CarbonChartType, + }, + }, + }, +} as Meta; + +const Template: Story = args => ( + + + +); + +export const ComboLineAndSimpleBarCustomConfigs = Template.bind({}); +ComboLineAndSimpleBarCustomConfigs.args = { + isInverse: false, + type: CarbonChartType.combo, + dataSet: [ + { + group: 'School A', + date: 'Monday', + value: 10000, + }, + { + group: 'School A', + date: 'Tuesday', + value: 65000, + }, + { + group: 'School A', + date: 'Wednesday', + value: 30000, + }, + { + group: 'School A', + date: 'Thursday', + value: 49213, + }, + { + group: 'School A', + date: 'Friday', + value: 49213, + }, + { + group: 'Temperature', + date: 'Monday', + temp: 70, + }, + { + group: 'Temperature', + date: 'Tuesday', + temp: 75, + }, + { + group: 'Temperature', + date: 'Wednesday', + temp: 31, + }, + { + group: 'Temperature', + date: 'Thursday', + temp: 31, + }, + { + group: 'Temperature', + date: 'Friday', + temp: 43, + }, + ], + options: { + title: 'Combo (Line + Simple bar) - custom configs', + axes: { + left: { + mapsTo: 'value', + scaleType: 'linear', + title: 'USA Summer School Attendance', + }, + right: { + mapsTo: 'temp', + scaleType: 'linear', + title: 'Temperature (°F)', + correspondingDatasets: ['Temperature'], + }, + bottom: { + title: 'Day of the Week', + mapsTo: 'date', + scaleType: 'labels', + }, + }, + comboChartTypes: [ + { + type: 'simple-bar', + correspondingDatasets: ['School A'], + }, + { + type: 'line', + options: { + points: { + radius: 5, + }, + }, + correspondingDatasets: ['Temperature'], + }, + ], + height: '400px', + }, +}; + +// Uncomment when adding new charts. Issues: #1054, #1055, #1056 + +// export const ComboLineAndStackedBar = Template.bind({}); +// ComboLineAndStackedBar.args = { +// isInverse: false, +// type: CarbonChartType.combo, +// dataSet: [ +// { +// group: 'Florida', +// key: 'Monday', +// value: 65000, +// }, +// { +// group: 'Florida', +// key: 'Tuesday', +// value: 29123, +// }, +// { +// group: 'Florida', +// key: 'Wednesday', +// value: 35213, +// }, +// { +// group: 'Florida', +// key: 'Thursday', +// value: 51213, +// }, +// { +// group: 'Florida', +// key: 'Friday', +// value: 16932, +// }, +// { +// group: 'California', +// key: 'Monday', +// value: 32432, +// }, +// { +// group: 'California', +// key: 'Tuesday', +// value: 21312, +// }, +// { +// group: 'California', +// key: 'Wednesday', +// value: 56456, +// }, +// { +// group: 'California', +// key: 'Thursday', +// value: 21312, +// }, +// { +// group: 'California', +// key: 'Friday', +// value: 34234, +// }, +// { +// group: 'Tokyo', +// key: 'Monday', +// value: 12312, +// }, +// { +// group: 'Tokyo', +// key: 'Tuesday', +// value: 23232, +// }, +// { +// group: 'Tokyo', +// key: 'Wednesday', +// value: 34232, +// }, +// { +// group: 'Tokyo', +// key: 'Thursday', +// value: 12312, +// }, +// { +// group: 'Tokyo', +// key: 'Friday', +// value: 34234, +// }, +// { +// group: 'Temperature', +// key: 'Monday', +// temp: 23, +// }, +// { +// group: 'Temperature', +// key: 'Tuesday', +// temp: 21, +// }, +// { +// group: 'Temperature', +// key: 'Wednesday', +// temp: 32, +// }, +// { +// group: 'Temperature', +// key: 'Thursday', +// temp: 34, +// }, +// { +// group: 'Temperature', +// key: 'Friday', +// temp: 23, +// }, +// ], +// options: { +// title: 'Combo (Line + Stacked bar)', +// axes: { +// left: { +// title: 'Disney Park Attendance', +// mapsTo: 'value', +// stacked: true, +// }, +// bottom: { +// title: '2018 Annual Sales Figures', +// mapsTo: 'key', +// scaleType: 'labels', +// }, +// right: { +// title: 'Temperature (°C)', +// mapsTo: 'temp', +// correspondingDatasets: ['Temperature'], +// }, +// }, +// comboChartTypes: [ +// { +// type: 'stacked-bar', +// options: {}, +// correspondingDatasets: ['Florida', 'California', 'Tokyo'], +// }, +// { +// type: 'line', +// options: {}, +// correspondingDatasets: ['Temperature'], +// }, +// ], +// height: '400px', +// }, +// }; + +// export const ComboLineAndGroupedBarCustomConfigs = Template.bind({}); +// ComboLineAndGroupedBarCustomConfigs.args = { +// isInverse: false, +// type: CarbonChartType.combo, +// dataSet: [ +// { +// group: 'Location 1', +// key: 'Monday', +// value: 65000, +// }, +// { +// group: 'Location 1', +// key: 'Tuesday', +// value: -39123, +// }, +// { +// group: 'Location 1', +// key: 'Wednesday', +// value: -35213, +// }, +// { +// group: 'Location 1', +// key: 'Thursday', +// value: 51213, +// }, +// { +// group: 'Location 1', +// key: 'Friday', +// value: 16932, +// }, +// { +// group: 'Location 2', +// key: 'Monday', +// value: 32432, +// }, +// { +// group: 'Location 2', +// key: 'Tuesday', +// value: -21312, +// }, +// { +// group: 'Location 2', +// key: 'Wednesday', +// value: -56456, +// }, +// { +// group: 'Location 2', +// key: 'Thursday', +// value: -21312, +// }, +// { +// group: 'Location 2', +// key: 'Friday', +// value: 34234, +// }, +// { +// group: 'Location 3', +// key: 'Monday', +// value: -12312, +// }, +// { +// group: 'Location 3', +// key: 'Tuesday', +// value: 23232, +// }, +// { +// group: 'Location 3', +// key: 'Wednesday', +// value: 34232, +// }, +// { +// group: 'Location 3', +// key: 'Thursday', +// value: -12312, +// }, +// { +// group: 'Location 3', +// key: 'Friday', +// value: -34234, +// }, +// { +// group: 'Temperature', +// key: 'Monday', +// temp: 20, +// }, +// { +// group: 'Temperature', +// key: 'Tuesday', +// temp: 23, +// }, +// { +// group: 'Temperature', +// key: 'Wednesday', +// temp: 33, +// }, +// { +// group: 'Temperature', +// key: 'Thursday', +// temp: 34, +// }, +// { +// group: 'Temperature', +// key: 'Friday', +// temp: 34, +// }, +// ], +// options: { +// title: 'Combo (Line + Grouped bar) - custom configs', +// axes: { +// left: { +// title: 'Sales', +// mapsTo: 'value', +// }, +// bottom: { +// scaleType: 'labels', +// mapsTo: 'key', +// }, +// right: { +// title: 'Temperature (°C)', +// mapsTo: 'temp', +// correspondingDatasets: ['Temperature'], +// }, +// }, +// comboChartTypes: [ +// { +// type: 'grouped-bar', +// correspondingDatasets: ['Location 1', 'Location 2', 'Location 3'], +// }, +// { +// type: 'line', +// options: { +// points: { +// filled: true, +// opacity: 0.5, +// }, +// }, +// correspondingDatasets: ['Temperature'], +// }, +// ], +// height: '400px', +// }, +// }; + +// export const ComboLineAndFloatingBar = Template.bind({}); +// ComboLineAndFloatingBar.args = { +// isInverse: false, +// type: CarbonChartType.combo, +// dataSet: [ +// { +// group: 'School A', +// date: 'Monday', +// value: 50000, +// }, +// { +// group: 'School A', +// date: 'Tuesday', +// value: 45000, +// }, +// { +// group: 'School A', +// date: 'Wednesday', +// value: 58000, +// }, +// { +// group: 'School A', +// date: 'Thursday', +// value: 31000, +// }, +// { +// group: 'School A', +// date: 'Friday', +// value: 33000, +// }, +// { +// group: 'Temperature', +// date: 'Monday', +// temp: [65, 70], +// }, +// { +// group: 'Temperature', +// date: 'Tuesday', +// temp: [67, 71], +// }, +// { +// group: 'Temperature', +// date: 'Wednesday', +// temp: [75, 83], +// }, +// { +// group: 'Temperature', +// date: 'Thursday', +// temp: [31, 42], +// }, +// { +// group: 'Temperature', +// date: 'Friday', +// temp: [43, 55], +// }, +// ], +// options: { +// title: 'Combo (Line + Floating bar)', +// axes: { +// left: { +// mapsTo: 'value', +// scaleType: 'linear', +// title: 'USA Summer School Attendance', +// correspondingDatasets: ['School A'], +// }, +// right: { +// mapsTo: 'temp', +// title: 'Temperature (°F)', +// }, +// bottom: { +// title: 'Day of the Week', +// mapsTo: 'date', +// scaleType: 'labels', +// }, +// }, +// comboChartTypes: [ +// { +// type: 'simple-bar', +// correspondingDatasets: ['Temperature'], +// }, +// { +// type: 'line', +// options: { +// points: { +// radius: 5, +// }, +// }, +// correspondingDatasets: ['School A'], +// }, +// ], +// height: '400px', +// }, +// }; + +// export const ComboHorizontalLineAndGroupedBar = Template.bind({}); +// ComboHorizontalLineAndGroupedBar.args = { +// isInverse: false, +// type: CarbonChartType.combo, +// dataSet: [ +// { +// group: 'Location 1', +// key: 'Monday', +// value: 65000, +// }, +// { +// group: 'Location 1', +// key: 'Tuesday', +// value: -39123, +// }, +// { +// group: 'Location 1', +// key: 'Wednesday', +// value: -35213, +// }, +// { +// group: 'Location 2', +// key: 'Monday', +// value: 32432, +// }, +// { +// group: 'Location 2', +// key: 'Tuesday', +// value: -21312, +// }, +// { +// group: 'Location 2', +// key: 'Wednesday', +// value: -56456, +// }, +// { +// group: 'Location 3', +// key: 'Monday', +// value: -12312, +// }, +// { +// group: 'Location 3', +// key: 'Tuesday', +// value: 23232, +// }, +// { +// group: 'Location 3', +// key: 'Wednesday', +// value: 34232, +// }, +// { +// group: 'Temperature', +// key: 'Monday', +// temp: 20, +// }, +// { +// group: 'Temperature', +// key: 'Tuesday', +// temp: 23, +// }, +// { +// group: 'Temperature', +// key: 'Wednesday', +// temp: 33, +// }, +// ], +// options: { +// title: 'Combo Horizontal (Line + Grouped bar)', +// axes: { +// top: { +// title: 'Sales', +// mapsTo: 'value', +// main: true, +// }, +// left: { +// scaleType: 'labels', +// mapsTo: 'key', +// }, +// bottom: { +// title: 'Temperature (°C)', +// mapsTo: 'temp', +// correspondingDatasets: ['Temperature'], +// }, +// }, +// comboChartTypes: [ +// { +// type: 'grouped-bar', +// correspondingDatasets: ['Location 1', 'Location 2', 'Location 3'], +// }, +// { +// type: 'line', +// correspondingDatasets: ['Temperature'], +// }, +// ], +// height: '400px', +// }, +// }; + +// export const HorizontalComboLineAndSimpleBar = Template.bind({}); +// HorizontalComboLineAndSimpleBar.args = { +// isInverse: false, +// type: CarbonChartType.combo, +// dataSet: [ +// { +// group: 'School A', +// date: 'Monday', +// value: 10000, +// }, +// { +// group: 'School A', +// date: 'Tuesday', +// value: 65000, +// }, +// { +// group: 'School A', +// date: 'Wednesday', +// value: 30000, +// }, +// { +// group: 'School A', +// date: 'Thursday', +// value: 49213, +// }, +// { +// group: 'School A', +// date: 'Friday', +// value: 49213, +// }, +// { +// group: 'Temperature', +// date: 'Monday', +// temp: 70, +// }, +// { +// group: 'Temperature', +// date: 'Tuesday', +// temp: 75, +// }, +// { +// group: 'Temperature', +// date: 'Wednesday', +// temp: 31, +// }, +// { +// group: 'Temperature', +// date: 'Thursday', +// temp: 31, +// }, +// { +// group: 'Temperature', +// date: 'Friday', +// temp: 43, +// }, +// ], +// options: { +// title: 'Horizontal Combo (Line + Simple bar)', +// axes: { +// top: { +// mapsTo: 'value', +// scaleType: 'linear', +// title: 'USA Summer School Attendance', +// }, +// bottom: { +// mapsTo: 'temp', +// scaleType: 'linear', +// title: 'Temperature (°F)', +// correspondingDatasets: ['Temperature'], +// }, +// left: { +// title: 'Day of the Week', +// mapsTo: 'date', +// scaleType: 'labels', +// }, +// }, +// comboChartTypes: [ +// { +// type: 'simple-bar', +// options: {}, +// correspondingDatasets: ['School A'], +// }, +// { +// type: 'line', +// options: {}, +// correspondingDatasets: ['Temperature'], +// }, +// ], +// height: '400px', +// }, +// }; + +// export const ComboLineAndArea = Template.bind({}); +// ComboLineAndArea.args = { +// isInverse: false, +// type: CarbonChartType.combo, +// dataSet: [ +// { +// group: 'Health', +// key: 'January', +// value: 312, +// }, +// { +// group: 'Health', +// key: 'February', +// value: 232, +// }, +// { +// group: 'Health', +// key: 'March', +// value: 432, +// }, +// { +// group: 'Health', +// key: 'April', +// value: 712, +// }, +// { +// group: 'Health', +// key: 'May', +// value: 834, +// }, +// { +// group: 'Health', +// key: 'June', +// value: 800, +// }, +// { +// group: 'Health', +// key: 'July', +// value: 612, +// }, +// { +// group: 'Health', +// key: 'August', +// value: 442, +// }, +// { +// group: 'Temperature', +// key: 'January', +// temp: -20, +// }, +// { +// group: 'Temperature', +// key: 'February', +// temp: -12, +// }, +// { +// group: 'Temperature', +// key: 'March', +// temp: 3, +// }, +// { +// group: 'Temperature', +// key: 'April', +// temp: 18, +// }, +// { +// group: 'Temperature', +// key: 'May', +// temp: 24, +// }, +// { +// group: 'Temperature', +// key: 'June', +// temp: 34, +// }, +// { +// group: 'Temperature', +// key: 'July', +// temp: 37, +// }, +// { +// group: 'Temperature', +// key: 'August', +// temp: 30, +// }, +// ], +// options: { +// title: 'Combo (Line + Area)', +// points: { +// enabled: false, +// }, +// axes: { +// left: { +// title: 'Score', +// mapsTo: 'value', +// }, +// bottom: { +// scaleType: 'labels', +// mapsTo: 'key', +// }, +// right: { +// title: 'Temperature (°C)', +// mapsTo: 'temp', +// correspondingDatasets: ['Temperature'], +// }, +// }, +// comboChartTypes: [ +// { +// type: 'area', +// options: {}, +// correspondingDatasets: ['Health'], +// }, +// { +// type: 'line', +// options: { +// points: { +// enabled: true, +// }, +// }, +// correspondingDatasets: ['Temperature'], +// }, +// ], +// curve: 'curveNatural', +// height: '400px', +// }, +// }; + +// export const ComboStackedAreaAndLine = Template.bind({}); +// ComboStackedAreaAndLine.args = { +// isInverse: false, +// type: CarbonChartType.combo, +// dataSet: [ +// { +// group: 'Dataset 1', +// date: '2023-01-01', +// value: 10000, +// }, +// { +// group: 'Dataset 1', +// date: '2023-01-05', +// value: 65000, +// }, +// { +// group: 'Dataset 1', +// date: '2023-01-08', +// value: 10000, +// }, +// { +// group: 'Dataset 1', +// date: '2023-01-13', +// value: 49213, +// }, +// { +// group: 'Dataset 1', +// date: '2023-01-17', +// value: 51213, +// }, +// { +// group: 'Dataset 2', +// date: '2023-01-01', +// value: 20000, +// }, +// { +// group: 'Dataset 2', +// date: '2023-01-05', +// value: 25000, +// }, +// { +// group: 'Dataset 2', +// date: '2023-01-08', +// value: 60000, +// }, +// { +// group: 'Dataset 2', +// date: '2023-01-13', +// value: 30213, +// }, +// { +// group: 'Dataset 2', +// date: '2023-01-17', +// value: 55213, +// }, +// { +// group: 'Dataset 3', +// date: '2023-01-01', +// value: 30000, +// }, +// { +// group: 'Dataset 3', +// date: '2023-01-05', +// value: 20000, +// }, +// { +// group: 'Dataset 3', +// date: '2023-01-08', +// value: 40000, +// }, +// { +// group: 'Dataset 3', +// date: '2023-01-13', +// value: 60213, +// }, +// { +// group: 'Dataset 3', +// date: '2023-01-17', +// value: 25213, +// }, +// { +// group: 'Temperature', +// date: '2023-01-01', +// temp: 77, +// }, +// { +// group: 'Temperature', +// date: '2023-01-05', +// temp: 65, +// }, +// { +// group: 'Temperature', +// date: '2023-01-08', +// temp: 80, +// }, +// { +// group: 'Temperature', +// date: '2023-01-13', +// temp: 43, +// }, +// { +// group: 'Temperature', +// date: '2023-01-17', +// temp: 53, +// }, +// ], +// options: { +// title: 'Combo (Stacked Area + Line)', +// axes: { +// left: { +// title: 'left', +// stacked: true, +// mapsTo: 'value', +// titleOrientation: 'right', +// }, +// bottom: { +// scaleType: 'time', +// mapsTo: 'date', +// }, +// right: { +// title: 'right', +// scaleType: 'linear', +// mapsTo: 'temp', +// correspondingDatasets: ['Temperature'], +// titleOrientation: 'left', +// }, +// }, +// curve: 'curveMonotoneX', +// comboChartTypes: [ +// { +// type: 'stacked-area', +// options: { +// points: { +// enabled: false, +// }, +// }, +// correspondingDatasets: ['Dataset 1', 'Dataset 2', 'Dataset 3'], +// }, +// { +// type: 'line', +// correspondingDatasets: ['Temperature'], +// }, +// ], +// height: '400px', +// }, +// }; + +// export const ComboLineAndScatterAndBar = Template.bind({}); +// ComboLineAndScatterAndBar.args = { +// isInverse: false, +// type: CarbonChartType.combo, +// dataSet: [ +// { +// group: 'Paris', +// key: 'Monday', +// temp: 25, +// }, +// { +// group: 'Paris', +// key: 'Tuesday', +// temp: 33, +// }, +// { +// group: 'Paris', +// key: 'Wednesday', +// temp: 27, +// }, +// { +// group: 'Paris', +// key: 'Thursday', +// temp: 25, +// }, +// { +// group: 'Paris', +// key: 'Friday', +// temp: 32, +// }, +// { +// group: 'Marseille', +// key: 'Monday', +// temp: 16, +// }, +// { +// group: 'Marseille', +// key: 'Tuesday', +// temp: 22, +// }, +// { +// group: 'Marseille', +// key: 'Wednesday', +// temp: 20, +// }, +// { +// group: 'Marseille', +// key: 'Thursday', +// temp: 22, +// }, +// { +// group: 'Marseille', +// key: 'Friday', +// temp: 25, +// }, +// { +// group: 'Avg Temperature', +// key: 'Monday', +// temp: 20.5, +// }, +// { +// group: 'Avg Temperature', +// key: 'Tuesday', +// temp: 27.5, +// }, +// { +// group: 'Avg Temperature', +// key: 'Wednesday', +// temp: 23.5, +// }, +// { +// group: 'Avg Temperature', +// key: 'Thursday', +// temp: 23.5, +// }, +// { +// group: 'Avg Temperature', +// key: 'Friday', +// temp: 28.5, +// }, +// { +// group: 'Attendance', +// key: 'Monday', +// value: 2650, +// }, +// { +// group: 'Attendance', +// key: 'Tuesday', +// value: 2553, +// }, +// { +// group: 'Attendance', +// key: 'Wednesday', +// value: 3433, +// }, +// { +// group: 'Attendance', +// key: 'Thursday', +// value: 3754, +// }, +// { +// group: 'Attendance', +// key: 'Friday', +// value: 3744, +// }, +// ], +// options: { +// title: 'Combo (Line + Scatter + Bar)', +// axes: { +// left: { +// mapsTo: 'value', +// title: 'Attendance', +// }, +// bottom: { +// scaleType: 'labels', +// mapsTo: 'key', +// }, +// right: { +// title: 'Temperature (°C)', +// mapsTo: 'temp', +// scaleType: 'linear', +// correspondingDatasets: ['Avg Temperature', 'Paris', 'Marseille'], +// }, +// }, +// curve: 'curveMonotoneX', +// comboChartTypes: [ +// { +// type: 'simple-bar', +// correspondingDatasets: ['Attendance'], +// }, +// { +// type: 'scatter', +// correspondingDatasets: ['Paris', 'Marseille'], +// }, +// { +// type: 'line', +// correspondingDatasets: ['Avg Temperature'], +// }, +// ], +// height: '400px', +// }, +// }; + +// export const ComboLineAndAreaTimeSeries = Template.bind({}); +// ComboLineAndAreaTimeSeries.args = { +// isInverse: false, +// type: CarbonChartType.combo, +// dataSet: [ +// { +// group: 'Health', +// key: '2022-12-30', +// value: 312, +// }, +// { +// group: 'Health', +// key: '2023-01-06', +// value: 232, +// }, +// { +// group: 'Health', +// key: '2023-01-08', +// value: 432, +// }, +// { +// group: 'Health', +// key: '2023-01-15', +// value: 712, +// }, +// { +// group: 'Health', +// key: '2023-01-19', +// value: 834, +// }, +// { +// group: 'Health', +// key: '2023-02-01', +// value: 800, +// }, +// { +// group: 'Health', +// key: '2023-02-05', +// value: 612, +// }, +// { +// group: 'Health', +// key: '2023-02-13', +// value: 442, +// }, +// { +// group: 'Temperature', +// key: '2023-01-01', +// temp: -20, +// }, +// { +// group: 'Temperature', +// key: '2023-01-05', +// temp: -12, +// }, +// { +// group: 'Temperature', +// key: '2023-01-08', +// temp: 3, +// }, +// { +// group: 'Temperature', +// key: '2023-01-13', +// temp: 18, +// }, +// { +// group: 'Temperature', +// key: '2023-01-19', +// temp: 24, +// }, +// { +// group: 'Temperature', +// key: '2023-02-02', +// temp: 34, +// }, +// { +// group: 'Temperature', +// key: '2023-02-07', +// temp: 37, +// }, +// { +// group: 'Temperature', +// key: '2023-02-09', +// temp: 30, +// }, +// ], +// options: { +// title: 'Combo (Line + Area) Time series', +// points: { +// enabled: false, +// }, +// axes: { +// left: { +// title: 'Score', +// mapsTo: 'value', +// }, +// bottom: { +// scaleType: 'time', +// mapsTo: 'key', +// }, +// right: { +// title: 'Temperature (°C)', +// mapsTo: 'temp', +// correspondingDatasets: ['Temperature'], +// }, +// }, +// comboChartTypes: [ +// { +// type: 'area', +// options: {}, +// correspondingDatasets: ['Health'], +// }, +// { +// type: 'line', +// options: { +// points: { +// enabled: true, +// }, +// }, +// correspondingDatasets: ['Temperature'], +// }, +// ], +// curve: 'curveNatural', +// timeScale: { +// addSpaceOnEdges: 0, +// }, +// height: '400px', +// }, +// }; + +// export const ComboChartEmpty = Template.bind({}); +// ComboChartEmpty.args = { +// isInverse: false, +// type: CarbonChartType.combo, +// dataSet: [], +// options: { +// title: 'Combo Chart (empty)', +// axes: { +// left: { +// mapsTo: 'value', +// title: 'Attendance', +// }, +// bottom: { +// scaleType: 'labels', +// mapsTo: 'key', +// }, +// right: { +// title: 'Temperature (°C)', +// mapsTo: 'temp', +// scaleType: 'linear', +// correspondingDatasets: ['Temperature'], +// }, +// }, +// comboChartTypes: [ +// { +// type: 'simple-bar', +// correspondingDatasets: ['Attendance'], +// }, +// { +// type: 'line', +// correspondingDatasets: ['Temperature'], +// }, +// ], +// height: '400px', +// }, +// }; + +// export const ComboChartLoading = Template.bind({}); +// ComboChartLoading.args = { +// isInverse: false, +// type: CarbonChartType.combo, +// dataSet: [ +// { +// group: 'Paris', +// key: 'Monday', +// temp: 25, +// }, +// { +// group: 'Paris', +// key: 'Tuesday', +// temp: 33, +// }, +// { +// group: 'Paris', +// key: 'Wednesday', +// temp: 27, +// }, +// { +// group: 'Paris', +// key: 'Thursday', +// temp: 25, +// }, +// { +// group: 'Paris', +// key: 'Friday', +// temp: 32, +// }, +// { +// group: 'Marseille', +// key: 'Monday', +// temp: 16, +// }, +// { +// group: 'Marseille', +// key: 'Tuesday', +// temp: 22, +// }, +// { +// group: 'Marseille', +// key: 'Wednesday', +// temp: 20, +// }, +// { +// group: 'Marseille', +// key: 'Thursday', +// temp: 22, +// }, +// { +// group: 'Marseille', +// key: 'Friday', +// temp: 25, +// }, +// { +// group: 'Avg Temperature', +// key: 'Monday', +// temp: 20.5, +// }, +// { +// group: 'Avg Temperature', +// key: 'Tuesday', +// temp: 27.5, +// }, +// { +// group: 'Avg Temperature', +// key: 'Wednesday', +// temp: 23.5, +// }, +// { +// group: 'Avg Temperature', +// key: 'Thursday', +// temp: 23.5, +// }, +// { +// group: 'Avg Temperature', +// key: 'Friday', +// temp: 28.5, +// }, +// { +// group: 'Attendance', +// key: 'Monday', +// value: 2650, +// }, +// { +// group: 'Attendance', +// key: 'Tuesday', +// value: 2553, +// }, +// { +// group: 'Attendance', +// key: 'Wednesday', +// value: 3433, +// }, +// { +// group: 'Attendance', +// key: 'Thursday', +// value: 3754, +// }, +// { +// group: 'Attendance', +// key: 'Friday', +// value: 3744, +// }, +// ], +// options: { +// title: 'Combo Chart (loading)', +// axes: { +// left: { +// mapsTo: 'value', +// title: 'Attendance', +// }, +// bottom: { +// scaleType: 'labels', +// mapsTo: 'key', +// }, +// right: { +// title: 'Temperature (°C)', +// mapsTo: 'temp', +// scaleType: 'linear', +// correspondingDatasets: ['Temperature'], +// }, +// }, +// data: { +// loading: true, +// }, +// comboChartTypes: [ +// { +// type: 'simple-bar', +// correspondingDatasets: ['Attendance'], +// }, +// { +// type: 'line', +// correspondingDatasets: ['Temperature'], +// }, +// ], +// height: '400px', +// }, +// }; diff --git a/packages/charts/src/components/CarbonChart/CarbonChartGauge.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartGauge.stories.tsx index 8fbcde4704..6f6ad7b9b0 100644 --- a/packages/charts/src/components/CarbonChart/CarbonChartGauge.stories.tsx +++ b/packages/charts/src/components/CarbonChart/CarbonChartGauge.stories.tsx @@ -52,27 +52,29 @@ GaugeSemicircularDangerStatus.args = { }, }; -export const GaugeCircularWarningStatus = Template.bind({}); -GaugeCircularWarningStatus.args = { - isInverse: false, - type: CarbonChartType.gauge, - dataSet: [ - { - group: 'value', - value: 42, - }, - { - group: 'delta', - value: -13.37, - }, - ], - options: { - title: 'Gauge circular -- warning status', - resizable: true, - height: '250px', - gauge: { - status: 'warning', - type: 'full', - }, - }, -}; +// Uncomment when adding new charts. Issues: #1054, #1055, #1056 + +// export const GaugeCircularWarningStatus = Template.bind({}); +// GaugeCircularWarningStatus.args = { +// isInverse: false, +// type: CarbonChartType.gauge, +// dataSet: [ +// { +// group: 'value', +// value: 42, +// }, +// { +// group: 'delta', +// value: -13.37, +// }, +// ], +// options: { +// title: 'Gauge circular -- warning status', +// resizable: true, +// height: '250px', +// gauge: { +// status: 'warning', +// type: 'full', +// }, +// }, +// }; diff --git a/packages/charts/src/components/CarbonChart/CarbonChartHistogram.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartHistogram.stories.tsx index 3c5f3e7b5d..c5ebe57ef9 100644 --- a/packages/charts/src/components/CarbonChart/CarbonChartHistogram.stories.tsx +++ b/packages/charts/src/components/CarbonChart/CarbonChartHistogram.stories.tsx @@ -169,597 +169,599 @@ HistogramLinear.args = { }, }; -export const HistogramDefinedBinsNumberLinear = Template.bind({}); -HistogramDefinedBinsNumberLinear.args = { - isInverse: false, - type: CarbonChartType.histogram, - dataSet: [ - { - group: 'Dataset 1', - value: 200, - }, - { - group: 'Dataset 1', - value: 210, - }, - { - group: 'Dataset 1', - value: 230, - }, - { - group: 'Dataset 1', - value: 210, - }, - { - group: 'Dataset 1', - value: 230, - }, - { - group: 'Dataset 1', - value: 240, - }, - { - group: 'Dataset 1', - value: 250, - }, - { - group: 'Dataset 1', - value: 255, - }, - { - group: 'Dataset 1', - value: 290, - }, - { - group: 'Dataset 1', - value: 300, - }, - { - group: 'Dataset 1', - value: 320, - }, - { - group: 'Dataset 1', - value: 330, - }, - { - group: 'Dataset 1', - value: 320, - }, - { - group: 'Dataset 1', - value: 330, - }, - { - group: 'Dataset 1', - value: 320, - }, - { - group: 'Dataset 1', - value: 330, - }, - { - group: 'Dataset 1', - value: 340, - }, - { - group: 'Dataset 1', - value: 350, - }, - { - group: 'Dataset 1', - value: 300, - }, - { - group: 'Dataset 1', - value: 400, - }, - { - group: 'Dataset 1', - value: 420, - }, - { - group: 'Dataset 1', - value: 430, - }, - { - group: 'Dataset 1', - value: 450, - }, - { - group: 'Dataset 1', - value: 460, - }, - { - group: 'Dataset 1', - value: 465, - }, - { - group: 'Dataset 1', - value: 468, - }, - { - group: 'Dataset 1', - value: 400, - }, - { - group: 'Dataset 1', - value: 430, - }, - { - group: 'Dataset 1', - value: 450, - }, - { - group: 'Dataset 1', - value: 400, - }, - { - group: 'Dataset 1', - value: 430, - }, - { - group: 'Dataset 1', - value: 400, - }, - { - group: 'Dataset 1', - value: 430, - }, - { - group: 'Dataset 1', - value: 480, - }, - { - group: 'Dataset 1', - value: 500, - }, - { - group: 'Dataset 1', - value: 550, - }, - { - group: 'Dataset 1', - value: 660, - }, - { - group: 'Dataset 1', - value: 580, - }, - { - group: 'Dataset 1', - value: 700, - }, - { - group: 'Dataset 1', - value: 780, - }, - { - group: 'Dataset 1', - value: 710, - }, - { - group: 'Dataset 1', - value: 750, - }, - { - group: 'Dataset 1', - value: 830, - }, - { - group: 'Dataset 1', - value: 860, - }, - { - group: 'Dataset 1', - value: 870, - }, - { - group: 'Dataset 1', - value: 200, - }, - { - group: 'Dataset 1', - value: 210, - }, - { - group: 'Dataset 1', - value: 230, - }, - { - group: 'Dataset 1', - value: 210, - }, - { - group: 'Dataset 1', - value: 230, - }, - { - group: 'Dataset 1', - value: 240, - }, - { - group: 'Dataset 1', - value: 290, - }, - { - group: 'Dataset 1', - value: 300, - }, - { - group: 'Dataset 1', - value: 340, - }, - { - group: 'Dataset 1', - value: 345, - }, - { - group: 'Dataset 1', - value: 350, - }, - { - group: 'Dataset 1', - value: 380, - }, - { - group: 'Dataset 1', - value: 380, - }, - { - group: 'Dataset 1', - value: 275, - }, - { - group: 'Dataset 1', - value: 260, - }, - { - group: 'Dataset 1', - value: 262, - }, - { - group: 'Dataset 1', - value: 223, - }, - { - group: 'Dataset 1', - value: 218, - }, - { - group: 'Dataset 1', - value: 333, - }, - { - group: 'Dataset 1', - value: 385, - }, - { - group: 'Dataset 1', - value: 300, - }, - { - group: 'Dataset 1', - value: 400, - }, - { - group: 'Dataset 1', - value: 430, - }, - { - group: 'Dataset 1', - value: 444, - }, - { - group: 'Dataset 1', - value: 433, - }, - { - group: 'Dataset 1', - value: 450, - }, - { - group: 'Dataset 1', - value: 375, - }, - { - group: 'Dataset 1', - value: 455, - }, - { - group: 'Dataset 1', - value: 458, - }, - { - group: 'Dataset 1', - value: 460, - }, - { - group: 'Dataset 1', - value: 477, - }, - { - group: 'Dataset 1', - value: 480, - }, - { - group: 'Dataset 1', - value: 484, - }, - { - group: 'Dataset 1', - value: 400, - }, - { - group: 'Dataset 1', - value: 430, - }, - { - group: 'Dataset 1', - value: 450, - }, - { - group: 'Dataset 1', - value: 480, - }, - { - group: 'Dataset 1', - value: 500, - }, - { - group: 'Dataset 1', - value: 550, - }, - { - group: 'Dataset 1', - value: 660, - }, - { - group: 'Dataset 1', - value: 618, - }, - { - group: 'Dataset 1', - value: 720, - }, - { - group: 'Dataset 1', - value: 621, - }, - { - group: 'Dataset 1', - value: 823, - }, - { - group: 'Dataset 1', - value: 525, - }, - { - group: 'Dataset 1', - value: 630, - }, - { - group: 'Dataset 1', - value: 635, - }, - { - group: 'Dataset 1', - value: 637, - }, - { - group: 'Dataset 1', - value: 644, - }, - { - group: 'Dataset 1', - value: 580, - }, - { - group: 'Dataset 1', - value: 570, - }, - { - group: 'Dataset 1', - value: 575, - }, - { - group: 'Dataset 1', - value: 578, - }, - { - group: 'Dataset 1', - value: 582, - }, - { - group: 'Dataset 1', - value: 591, - }, - { - group: 'Dataset 1', - value: 700, - }, - { - group: 'Dataset 1', - value: 780, - }, - { - group: 'Dataset 1', - value: 710, - }, - { - group: 'Dataset 1', - value: 750, - }, - { - group: 'Dataset 1', - value: 830, - }, - { - group: 'Dataset 1', - value: 860, - }, - { - group: 'Dataset 1', - value: 870, - }, - ], - options: { - title: 'Histogram (defined bins number) (linear)', - axes: { - bottom: { - title: 'US $ (million)', - mapsTo: 'value', - bins: 67, - limitDomainToBins: true, - }, - left: { - title: 'No. of transactions', - scaleType: 'linear', - binned: true, - }, - }, - height: '400px', - }, -}; +// Uncomment when adding new charts. Issues: #1054, #1055, #1056 -export const HistogramDefinedBinsLinear = Template.bind({}); -HistogramDefinedBinsLinear.args = { - isInverse: false, - type: CarbonChartType.histogram, - dataSet: [ - { - group: 'Dataset 1', - age: 20, - }, - { - group: 'Dataset 2', - age: 21, - }, - { - group: 'Dataset 2', - age: 23, - }, - { - group: 'Dataset 3', - age: 21, - }, - { - group: 'Dataset 3', - age: 23, - }, - { - group: 'Dataset 3', - age: 24, - }, - { - group: 'Dataset 1', - age: 30, - }, - { - group: 'Dataset 2', - age: 34, - }, - { - group: 'Dataset 1', - age: 35, - }, - { - group: 'Dataset 3', - age: 30, - }, - { - group: 'Dataset 1', - age: 40, - }, - { - group: 'Dataset 2', - age: 43, - }, - { - group: 'Dataset 1', - age: 45, - }, - { - group: 'Dataset 1', - age: 46, - }, - { - group: 'Dataset 3', - age: 40, - }, - { - group: 'Dataset 3', - age: 43, - }, - { - group: 'Dataset 3', - age: 45, - }, - { - group: 'Dataset 1', - age: 48, - }, - { - group: 'Dataset 1', - age: 50, - }, - { - group: 'Dataset 2', - age: 55, - }, - { - group: 'Dataset 2', - age: 66, - }, - { - group: 'Dataset 2', - age: 58, - }, - { - group: 'Dataset 1', - age: 70, - }, - { - group: 'Dataset 1', - age: 78, - }, - { - group: 'Dataset 3', - age: 71, - }, - { - group: 'Dataset 3', - age: 75, - }, - { - group: 'Dataset 2', - age: 83, - }, - { - group: 'Dataset 2', - age: 86, - }, - { - group: 'Dataset 1', - age: 87, - }, - ], - options: { - title: 'Histogram (defined bins) (linear)', - axes: { - bottom: { - title: 'Age', - mapsTo: 'age', - bins: [20, 40, 50, 60, 90], - limitDomainToBins: true, - }, - left: { - title: 'No. of participants', - scaleType: 'linear', - stacked: true, - binned: true, - }, - }, - height: '400px', - }, -}; +// export const HistogramDefinedBinsNumberLinear = Template.bind({}); +// HistogramDefinedBinsNumberLinear.args = { +// isInverse: false, +// type: CarbonChartType.histogram, +// dataSet: [ +// { +// group: 'Dataset 1', +// value: 200, +// }, +// { +// group: 'Dataset 1', +// value: 210, +// }, +// { +// group: 'Dataset 1', +// value: 230, +// }, +// { +// group: 'Dataset 1', +// value: 210, +// }, +// { +// group: 'Dataset 1', +// value: 230, +// }, +// { +// group: 'Dataset 1', +// value: 240, +// }, +// { +// group: 'Dataset 1', +// value: 250, +// }, +// { +// group: 'Dataset 1', +// value: 255, +// }, +// { +// group: 'Dataset 1', +// value: 290, +// }, +// { +// group: 'Dataset 1', +// value: 300, +// }, +// { +// group: 'Dataset 1', +// value: 320, +// }, +// { +// group: 'Dataset 1', +// value: 330, +// }, +// { +// group: 'Dataset 1', +// value: 320, +// }, +// { +// group: 'Dataset 1', +// value: 330, +// }, +// { +// group: 'Dataset 1', +// value: 320, +// }, +// { +// group: 'Dataset 1', +// value: 330, +// }, +// { +// group: 'Dataset 1', +// value: 340, +// }, +// { +// group: 'Dataset 1', +// value: 350, +// }, +// { +// group: 'Dataset 1', +// value: 300, +// }, +// { +// group: 'Dataset 1', +// value: 400, +// }, +// { +// group: 'Dataset 1', +// value: 420, +// }, +// { +// group: 'Dataset 1', +// value: 430, +// }, +// { +// group: 'Dataset 1', +// value: 450, +// }, +// { +// group: 'Dataset 1', +// value: 460, +// }, +// { +// group: 'Dataset 1', +// value: 465, +// }, +// { +// group: 'Dataset 1', +// value: 468, +// }, +// { +// group: 'Dataset 1', +// value: 400, +// }, +// { +// group: 'Dataset 1', +// value: 430, +// }, +// { +// group: 'Dataset 1', +// value: 450, +// }, +// { +// group: 'Dataset 1', +// value: 400, +// }, +// { +// group: 'Dataset 1', +// value: 430, +// }, +// { +// group: 'Dataset 1', +// value: 400, +// }, +// { +// group: 'Dataset 1', +// value: 430, +// }, +// { +// group: 'Dataset 1', +// value: 480, +// }, +// { +// group: 'Dataset 1', +// value: 500, +// }, +// { +// group: 'Dataset 1', +// value: 550, +// }, +// { +// group: 'Dataset 1', +// value: 660, +// }, +// { +// group: 'Dataset 1', +// value: 580, +// }, +// { +// group: 'Dataset 1', +// value: 700, +// }, +// { +// group: 'Dataset 1', +// value: 780, +// }, +// { +// group: 'Dataset 1', +// value: 710, +// }, +// { +// group: 'Dataset 1', +// value: 750, +// }, +// { +// group: 'Dataset 1', +// value: 830, +// }, +// { +// group: 'Dataset 1', +// value: 860, +// }, +// { +// group: 'Dataset 1', +// value: 870, +// }, +// { +// group: 'Dataset 1', +// value: 200, +// }, +// { +// group: 'Dataset 1', +// value: 210, +// }, +// { +// group: 'Dataset 1', +// value: 230, +// }, +// { +// group: 'Dataset 1', +// value: 210, +// }, +// { +// group: 'Dataset 1', +// value: 230, +// }, +// { +// group: 'Dataset 1', +// value: 240, +// }, +// { +// group: 'Dataset 1', +// value: 290, +// }, +// { +// group: 'Dataset 1', +// value: 300, +// }, +// { +// group: 'Dataset 1', +// value: 340, +// }, +// { +// group: 'Dataset 1', +// value: 345, +// }, +// { +// group: 'Dataset 1', +// value: 350, +// }, +// { +// group: 'Dataset 1', +// value: 380, +// }, +// { +// group: 'Dataset 1', +// value: 380, +// }, +// { +// group: 'Dataset 1', +// value: 275, +// }, +// { +// group: 'Dataset 1', +// value: 260, +// }, +// { +// group: 'Dataset 1', +// value: 262, +// }, +// { +// group: 'Dataset 1', +// value: 223, +// }, +// { +// group: 'Dataset 1', +// value: 218, +// }, +// { +// group: 'Dataset 1', +// value: 333, +// }, +// { +// group: 'Dataset 1', +// value: 385, +// }, +// { +// group: 'Dataset 1', +// value: 300, +// }, +// { +// group: 'Dataset 1', +// value: 400, +// }, +// { +// group: 'Dataset 1', +// value: 430, +// }, +// { +// group: 'Dataset 1', +// value: 444, +// }, +// { +// group: 'Dataset 1', +// value: 433, +// }, +// { +// group: 'Dataset 1', +// value: 450, +// }, +// { +// group: 'Dataset 1', +// value: 375, +// }, +// { +// group: 'Dataset 1', +// value: 455, +// }, +// { +// group: 'Dataset 1', +// value: 458, +// }, +// { +// group: 'Dataset 1', +// value: 460, +// }, +// { +// group: 'Dataset 1', +// value: 477, +// }, +// { +// group: 'Dataset 1', +// value: 480, +// }, +// { +// group: 'Dataset 1', +// value: 484, +// }, +// { +// group: 'Dataset 1', +// value: 400, +// }, +// { +// group: 'Dataset 1', +// value: 430, +// }, +// { +// group: 'Dataset 1', +// value: 450, +// }, +// { +// group: 'Dataset 1', +// value: 480, +// }, +// { +// group: 'Dataset 1', +// value: 500, +// }, +// { +// group: 'Dataset 1', +// value: 550, +// }, +// { +// group: 'Dataset 1', +// value: 660, +// }, +// { +// group: 'Dataset 1', +// value: 618, +// }, +// { +// group: 'Dataset 1', +// value: 720, +// }, +// { +// group: 'Dataset 1', +// value: 621, +// }, +// { +// group: 'Dataset 1', +// value: 823, +// }, +// { +// group: 'Dataset 1', +// value: 525, +// }, +// { +// group: 'Dataset 1', +// value: 630, +// }, +// { +// group: 'Dataset 1', +// value: 635, +// }, +// { +// group: 'Dataset 1', +// value: 637, +// }, +// { +// group: 'Dataset 1', +// value: 644, +// }, +// { +// group: 'Dataset 1', +// value: 580, +// }, +// { +// group: 'Dataset 1', +// value: 570, +// }, +// { +// group: 'Dataset 1', +// value: 575, +// }, +// { +// group: 'Dataset 1', +// value: 578, +// }, +// { +// group: 'Dataset 1', +// value: 582, +// }, +// { +// group: 'Dataset 1', +// value: 591, +// }, +// { +// group: 'Dataset 1', +// value: 700, +// }, +// { +// group: 'Dataset 1', +// value: 780, +// }, +// { +// group: 'Dataset 1', +// value: 710, +// }, +// { +// group: 'Dataset 1', +// value: 750, +// }, +// { +// group: 'Dataset 1', +// value: 830, +// }, +// { +// group: 'Dataset 1', +// value: 860, +// }, +// { +// group: 'Dataset 1', +// value: 870, +// }, +// ], +// options: { +// title: 'Histogram (defined bins number) (linear)', +// axes: { +// bottom: { +// title: 'US $ (million)', +// mapsTo: 'value', +// bins: 67, +// limitDomainToBins: true, +// }, +// left: { +// title: 'No. of transactions', +// scaleType: 'linear', +// binned: true, +// }, +// }, +// height: '400px', +// }, +// }; + +// export const HistogramDefinedBinsLinear = Template.bind({}); +// HistogramDefinedBinsLinear.args = { +// isInverse: false, +// type: CarbonChartType.histogram, +// dataSet: [ +// { +// group: 'Dataset 1', +// age: 20, +// }, +// { +// group: 'Dataset 2', +// age: 21, +// }, +// { +// group: 'Dataset 2', +// age: 23, +// }, +// { +// group: 'Dataset 3', +// age: 21, +// }, +// { +// group: 'Dataset 3', +// age: 23, +// }, +// { +// group: 'Dataset 3', +// age: 24, +// }, +// { +// group: 'Dataset 1', +// age: 30, +// }, +// { +// group: 'Dataset 2', +// age: 34, +// }, +// { +// group: 'Dataset 1', +// age: 35, +// }, +// { +// group: 'Dataset 3', +// age: 30, +// }, +// { +// group: 'Dataset 1', +// age: 40, +// }, +// { +// group: 'Dataset 2', +// age: 43, +// }, +// { +// group: 'Dataset 1', +// age: 45, +// }, +// { +// group: 'Dataset 1', +// age: 46, +// }, +// { +// group: 'Dataset 3', +// age: 40, +// }, +// { +// group: 'Dataset 3', +// age: 43, +// }, +// { +// group: 'Dataset 3', +// age: 45, +// }, +// { +// group: 'Dataset 1', +// age: 48, +// }, +// { +// group: 'Dataset 1', +// age: 50, +// }, +// { +// group: 'Dataset 2', +// age: 55, +// }, +// { +// group: 'Dataset 2', +// age: 66, +// }, +// { +// group: 'Dataset 2', +// age: 58, +// }, +// { +// group: 'Dataset 1', +// age: 70, +// }, +// { +// group: 'Dataset 1', +// age: 78, +// }, +// { +// group: 'Dataset 3', +// age: 71, +// }, +// { +// group: 'Dataset 3', +// age: 75, +// }, +// { +// group: 'Dataset 2', +// age: 83, +// }, +// { +// group: 'Dataset 2', +// age: 86, +// }, +// { +// group: 'Dataset 1', +// age: 87, +// }, +// ], +// options: { +// title: 'Histogram (defined bins) (linear)', +// axes: { +// bottom: { +// title: 'Age', +// mapsTo: 'age', +// bins: [20, 40, 50, 60, 90], +// limitDomainToBins: true, +// }, +// left: { +// title: 'No. of participants', +// scaleType: 'linear', +// stacked: true, +// binned: true, +// }, +// }, +// height: '400px', +// }, +// }; diff --git a/packages/charts/src/components/CarbonChart/CarbonChartMeter.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartMeter.stories.tsx index 66753f92e2..5b88c523fb 100644 --- a/packages/charts/src/components/CarbonChart/CarbonChartMeter.stories.tsx +++ b/packages/charts/src/components/CarbonChart/CarbonChartMeter.stories.tsx @@ -62,153 +62,155 @@ MeterChartWithStatuses.args = { }, }; -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, - }, - height: '100px', - }, -}; +// Uncomment when adding new charts. Issues: #1054, #1055, #1056 -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', - }, - }, - color: { - pairing: { - option: 2, - }, - }, - }, -}; +// 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, +// }, +// height: '100px', +// }, +// }; -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', - }, - ], - }, - }, - color: { - pairing: { - option: 2, - }, - }, - }, -}; +// 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', +// }, +// }, +// 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 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', +// }, +// ], +// }, +// }, +// 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.`, +// }, +// }, +// }, +// }; diff --git a/packages/charts/src/components/CarbonChart/CarbonChartRadar.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartRadar.stories.tsx index a0bf8bcf13..41261a9439 100644 --- a/packages/charts/src/components/CarbonChart/CarbonChartRadar.stories.tsx +++ b/packages/charts/src/components/CarbonChart/CarbonChartRadar.stories.tsx @@ -98,380 +98,382 @@ Radar.args = { }, }; -export const RadarCentered = Template.bind({}); -RadarCentered.args = { - isInverse: false, - type: CarbonChartType.radar, - dataSet: [ - { - product: 'Product 1', - feature: 'Price', - score: 60, - }, - { - product: 'Product 1', - feature: 'Usability', - score: 92, - }, - { - product: 'Product 1', - feature: 'Availability', - score: 5, - }, - { - product: 'Product 1', - feature: 'Performance', - score: 85, - }, - { - product: 'Product 1', - feature: 'Quality', - score: 60, - }, - { - product: 'Product 2', - feature: 'Price', - score: 70, - }, - { - product: 'Product 2', - feature: 'Usability', - score: 63, - }, - { - product: 'Product 2', - feature: 'Availability', - score: 78, - }, - { - product: 'Product 2', - feature: 'Performance', - score: 50, - }, - { - product: 'Product 2', - feature: 'Quality', - score: 30, - }, - ], - options: { - title: 'Radar (centered)', - radar: { - axes: { - angle: 'feature', - value: 'score', - }, - alignment: 'center', - }, - data: { - groupMapsTo: 'product', - }, - legend: { - alignment: 'center', - }, - height: '400px', - }, -}; +// Uncomment when adding new charts. Issues: #1054, #1055, #1056 -export const RadarMissingDatapoints = Template.bind({}); -RadarMissingDatapoints.args = { - isInverse: false, - type: CarbonChartType.radar, - dataSet: [ - { - group: 'Sugar', - key: 'London', - value: 25, - }, - { - group: 'Oil', - key: 'London', - value: 6, - }, - { - group: 'Water', - key: 'London', - value: 12, - }, - { - group: 'Sugar', - key: 'Milan', - value: 13, - }, - { - group: 'Oil', - key: 'Milan', - value: 6, - }, - { - group: 'Water', - key: 'Milan', - value: 28, - }, - { - group: 'Sugar', - key: 'Paris', - value: 19, - }, - { - group: 'Oil', - key: 'Paris', - value: 16, - }, - { - group: 'Water', - key: 'Paris', - value: 10, - }, - { - group: 'Sugar', - key: 'New York', - value: 11, - }, - { - group: 'Oil', - key: 'New York', - value: 18, - }, - { - group: 'Water', - key: 'New York', - value: 8, - }, - { - group: 'Sugar', - key: 'Sydney', - value: 12, - }, - { - group: 'Oil', - key: 'Sydney', - value: 16, - }, - ], - options: { - title: 'Radar - Missing datapoints', - height: '400px', - }, -}; +// export const RadarCentered = Template.bind({}); +// RadarCentered.args = { +// isInverse: false, +// type: CarbonChartType.radar, +// dataSet: [ +// { +// product: 'Product 1', +// feature: 'Price', +// score: 60, +// }, +// { +// product: 'Product 1', +// feature: 'Usability', +// score: 92, +// }, +// { +// product: 'Product 1', +// feature: 'Availability', +// score: 5, +// }, +// { +// product: 'Product 1', +// feature: 'Performance', +// score: 85, +// }, +// { +// product: 'Product 1', +// feature: 'Quality', +// score: 60, +// }, +// { +// product: 'Product 2', +// feature: 'Price', +// score: 70, +// }, +// { +// product: 'Product 2', +// feature: 'Usability', +// score: 63, +// }, +// { +// product: 'Product 2', +// feature: 'Availability', +// score: 78, +// }, +// { +// product: 'Product 2', +// feature: 'Performance', +// score: 50, +// }, +// { +// product: 'Product 2', +// feature: 'Quality', +// score: 30, +// }, +// ], +// options: { +// title: 'Radar (centered)', +// radar: { +// axes: { +// angle: 'feature', +// value: 'score', +// }, +// alignment: 'center', +// }, +// data: { +// groupMapsTo: 'product', +// }, +// legend: { +// alignment: 'center', +// }, +// height: '400px', +// }, +// }; -export const RadarDense = Template.bind({}); -RadarDense.args = { - isInverse: false, - type: CarbonChartType.radar, - dataSet: [ - { - month: 'January', - activity: 'Eating', - hoursAvg: 2, - }, - { - month: 'January', - activity: 'Drinking', - hoursAvg: 6, - }, - { - month: 'January', - activity: 'Sleeping', - hoursAvg: 6, - }, - { - month: 'January', - activity: 'Working', - hoursAvg: 8, - }, - { - month: 'January', - activity: 'Walking', - hoursAvg: 1, - }, - { - month: 'January', - activity: 'Running', - hoursAvg: 0.5, - }, - { - month: 'January', - activity: 'Cycling', - hoursAvg: 1, - }, - { - month: 'January', - activity: 'Swimming', - hoursAvg: 0, - }, - { - month: 'February', - activity: 'Eating', - hoursAvg: 1.5, - }, - { - month: 'February', - activity: 'Drinking', - hoursAvg: 9, - }, - { - month: 'February', - activity: 'Sleeping', - hoursAvg: 7, - }, - { - month: 'February', - activity: 'Working', - hoursAvg: 9, - }, - { - month: 'February', - activity: 'Walking', - hoursAvg: 2, - }, - { - month: 'February', - activity: 'Running', - hoursAvg: 2, - }, - { - month: 'February', - activity: 'Cycling', - hoursAvg: 0, - }, - { - month: 'February', - activity: 'Swimming', - hoursAvg: 1.5, - }, - { - month: 'March', - activity: 'Eating', - hoursAvg: 3, - }, - { - month: 'March', - activity: 'Drinking', - hoursAvg: 5, - }, - { - month: 'March', - activity: 'Sleeping', - hoursAvg: 5, - }, - { - month: 'March', - activity: 'Working', - hoursAvg: 6, - }, - { - month: 'March', - activity: 'Walking', - hoursAvg: 3, - }, - { - month: 'March', - activity: 'Running', - hoursAvg: 9, - }, - { - month: 'March', - activity: 'Cycling', - hoursAvg: 1, - }, - { - month: 'March', - activity: 'Swimming', - hoursAvg: 7, - }, - { - month: 'April', - activity: 'Eating', - hoursAvg: 5, - }, - { - month: 'April', - activity: 'Drinking', - hoursAvg: 1, - }, - { - month: 'April', - activity: 'Sleeping', - hoursAvg: 4, - }, - { - month: 'April', - activity: 'Working', - hoursAvg: 2, - }, - { - month: 'April', - activity: 'Walking', - hoursAvg: 5, - }, - { - month: 'April', - activity: 'Running', - hoursAvg: 4, - }, - { - month: 'April', - activity: 'Cycling', - hoursAvg: 6, - }, - { - month: 'April', - activity: 'Swimming', - hoursAvg: 3, - }, - { - month: 'May', - activity: 'Eating', - hoursAvg: 7, - }, - { - month: 'May', - activity: 'Drinking', - hoursAvg: 0, - }, - { - month: 'May', - activity: 'Sleeping', - hoursAvg: 5, - }, - { - month: 'May', - activity: 'Working', - hoursAvg: 4, - }, - { - month: 'May', - activity: 'Walking', - hoursAvg: 8, - }, - { - month: 'May', - activity: 'Running', - hoursAvg: 2, - }, - { - month: 'May', - activity: 'Cycling', - hoursAvg: 3, - }, - { - month: 'May', - activity: 'Swimming', - hoursAvg: 1, - }, - ], - options: { - title: 'Radar - Dense', - radar: { - axes: { - angle: 'activity', - value: 'hoursAvg', - }, - }, - data: { - groupMapsTo: 'month', - }, - height: '400px', - }, -}; +// export const RadarMissingDatapoints = Template.bind({}); +// RadarMissingDatapoints.args = { +// isInverse: false, +// type: CarbonChartType.radar, +// dataSet: [ +// { +// group: 'Sugar', +// key: 'London', +// value: 25, +// }, +// { +// group: 'Oil', +// key: 'London', +// value: 6, +// }, +// { +// group: 'Water', +// key: 'London', +// value: 12, +// }, +// { +// group: 'Sugar', +// key: 'Milan', +// value: 13, +// }, +// { +// group: 'Oil', +// key: 'Milan', +// value: 6, +// }, +// { +// group: 'Water', +// key: 'Milan', +// value: 28, +// }, +// { +// group: 'Sugar', +// key: 'Paris', +// value: 19, +// }, +// { +// group: 'Oil', +// key: 'Paris', +// value: 16, +// }, +// { +// group: 'Water', +// key: 'Paris', +// value: 10, +// }, +// { +// group: 'Sugar', +// key: 'New York', +// value: 11, +// }, +// { +// group: 'Oil', +// key: 'New York', +// value: 18, +// }, +// { +// group: 'Water', +// key: 'New York', +// value: 8, +// }, +// { +// group: 'Sugar', +// key: 'Sydney', +// value: 12, +// }, +// { +// group: 'Oil', +// key: 'Sydney', +// value: 16, +// }, +// ], +// options: { +// title: 'Radar - Missing datapoints', +// height: '400px', +// }, +// }; + +// export const RadarDense = Template.bind({}); +// RadarDense.args = { +// isInverse: false, +// type: CarbonChartType.radar, +// dataSet: [ +// { +// month: 'January', +// activity: 'Eating', +// hoursAvg: 2, +// }, +// { +// month: 'January', +// activity: 'Drinking', +// hoursAvg: 6, +// }, +// { +// month: 'January', +// activity: 'Sleeping', +// hoursAvg: 6, +// }, +// { +// month: 'January', +// activity: 'Working', +// hoursAvg: 8, +// }, +// { +// month: 'January', +// activity: 'Walking', +// hoursAvg: 1, +// }, +// { +// month: 'January', +// activity: 'Running', +// hoursAvg: 0.5, +// }, +// { +// month: 'January', +// activity: 'Cycling', +// hoursAvg: 1, +// }, +// { +// month: 'January', +// activity: 'Swimming', +// hoursAvg: 0, +// }, +// { +// month: 'February', +// activity: 'Eating', +// hoursAvg: 1.5, +// }, +// { +// month: 'February', +// activity: 'Drinking', +// hoursAvg: 9, +// }, +// { +// month: 'February', +// activity: 'Sleeping', +// hoursAvg: 7, +// }, +// { +// month: 'February', +// activity: 'Working', +// hoursAvg: 9, +// }, +// { +// month: 'February', +// activity: 'Walking', +// hoursAvg: 2, +// }, +// { +// month: 'February', +// activity: 'Running', +// hoursAvg: 2, +// }, +// { +// month: 'February', +// activity: 'Cycling', +// hoursAvg: 0, +// }, +// { +// month: 'February', +// activity: 'Swimming', +// hoursAvg: 1.5, +// }, +// { +// month: 'March', +// activity: 'Eating', +// hoursAvg: 3, +// }, +// { +// month: 'March', +// activity: 'Drinking', +// hoursAvg: 5, +// }, +// { +// month: 'March', +// activity: 'Sleeping', +// hoursAvg: 5, +// }, +// { +// month: 'March', +// activity: 'Working', +// hoursAvg: 6, +// }, +// { +// month: 'March', +// activity: 'Walking', +// hoursAvg: 3, +// }, +// { +// month: 'March', +// activity: 'Running', +// hoursAvg: 9, +// }, +// { +// month: 'March', +// activity: 'Cycling', +// hoursAvg: 1, +// }, +// { +// month: 'March', +// activity: 'Swimming', +// hoursAvg: 7, +// }, +// { +// month: 'April', +// activity: 'Eating', +// hoursAvg: 5, +// }, +// { +// month: 'April', +// activity: 'Drinking', +// hoursAvg: 1, +// }, +// { +// month: 'April', +// activity: 'Sleeping', +// hoursAvg: 4, +// }, +// { +// month: 'April', +// activity: 'Working', +// hoursAvg: 2, +// }, +// { +// month: 'April', +// activity: 'Walking', +// hoursAvg: 5, +// }, +// { +// month: 'April', +// activity: 'Running', +// hoursAvg: 4, +// }, +// { +// month: 'April', +// activity: 'Cycling', +// hoursAvg: 6, +// }, +// { +// month: 'April', +// activity: 'Swimming', +// hoursAvg: 3, +// }, +// { +// month: 'May', +// activity: 'Eating', +// hoursAvg: 7, +// }, +// { +// month: 'May', +// activity: 'Drinking', +// hoursAvg: 0, +// }, +// { +// month: 'May', +// activity: 'Sleeping', +// hoursAvg: 5, +// }, +// { +// month: 'May', +// activity: 'Working', +// hoursAvg: 4, +// }, +// { +// month: 'May', +// activity: 'Walking', +// hoursAvg: 8, +// }, +// { +// month: 'May', +// activity: 'Running', +// hoursAvg: 2, +// }, +// { +// month: 'May', +// activity: 'Cycling', +// hoursAvg: 3, +// }, +// { +// month: 'May', +// activity: 'Swimming', +// hoursAvg: 1, +// }, +// ], +// options: { +// title: 'Radar - Dense', +// radar: { +// axes: { +// angle: 'activity', +// value: 'hoursAvg', +// }, +// }, +// data: { +// groupMapsTo: 'month', +// }, +// height: '400px', +// }, +// }; diff --git a/packages/charts/src/components/CarbonChart/CarbonChartScatter.stories.tsx b/packages/charts/src/components/CarbonChart/CarbonChartScatter.stories.tsx index b291a506d3..6bfbfc20dd 100644 --- a/packages/charts/src/components/CarbonChart/CarbonChartScatter.stories.tsx +++ b/packages/charts/src/components/CarbonChart/CarbonChartScatter.stories.tsx @@ -96,370 +96,372 @@ ScatterLinearXAndY.args = { }, }; -export const ScatterTimeSeries = Template.bind({}); -ScatterTimeSeries.args = { - isInverse: false, - type: CarbonChartType.scatter, - 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: 'Scatter (time series)', - axes: { - bottom: { - title: '2019 Annual Sales Figures', - scaleType: 'time', - mapsTo: 'date', - }, - left: { - mapsTo: 'value', - }, - }, - height: '400px', - }, -}; +// Uncomment when adding new charts. Issues: #1054, #1055, #1056 -export const ScatterDiscrete = Template.bind({}); -ScatterDiscrete.args = { - isInverse: false, - type: CarbonChartType.scatter, - 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, - }, - { - group: 'Dataset 4', - key: 'Misc', - value: 3000, - }, - ], - options: { - title: 'Scatter (discrete)', - axes: { - bottom: { - title: '2019 Annual Sales Figures', - scaleType: 'labels', - mapsTo: 'key', - }, - left: { - mapsTo: 'value', - }, - }, - height: '400px', - }, -}; +// export const ScatterTimeSeries = Template.bind({}); +// ScatterTimeSeries.args = { +// isInverse: false, +// type: CarbonChartType.scatter, +// 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: 'Scatter (time series)', +// axes: { +// bottom: { +// title: '2019 Annual Sales Figures', +// scaleType: 'time', +// mapsTo: 'date', +// }, +// left: { +// mapsTo: 'value', +// }, +// }, +// height: '400px', +// }, +// }; -export const ScatterDualAxes = Template.bind({}); -ScatterDualAxes.args = { - isInverse: false, - type: CarbonChartType.scatter, - dataSet: [ - { - group: 'Orders', - date: 'January', - orderCount: 121, - }, - { - group: 'Orders', - date: 'February', - orderCount: 321, - }, - { - group: 'Orders', - date: 'March', - orderCount: 370, - }, - { - group: 'Orders', - date: 'April', - orderCount: 329, - }, - { - group: 'Orders', - date: 'May', - orderCount: 121, - }, - { - group: 'Products', - date: 'January', - productCount: 26100, - }, - { - group: 'Products', - date: 'February', - productCount: 25100, - }, - { - group: 'Products', - date: 'March', - productCount: 28100, - }, - { - group: 'Products', - date: 'April', - productCount: 15900, - }, - { - group: 'Products', - date: 'May', - productCount: 34100, - }, - ], - options: { - title: 'Scatter (dual axes)', - axes: { - bottom: { - mapsTo: 'date', - scaleType: 'labels', - }, - left: { - title: 'order count', - mapsTo: 'orderCount', - scaleType: 'linear', - }, - right: { - title: 'product count', - mapsTo: 'productCount', - scaleType: 'linear', - correspondingDatasets: ['Products'], - }, - }, - height: '400px', - }, -}; +// export const ScatterDiscrete = Template.bind({}); +// ScatterDiscrete.args = { +// isInverse: false, +// type: CarbonChartType.scatter, +// 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, +// }, +// { +// group: 'Dataset 4', +// key: 'Misc', +// value: 3000, +// }, +// ], +// options: { +// title: 'Scatter (discrete)', +// axes: { +// bottom: { +// title: '2019 Annual Sales Figures', +// scaleType: 'labels', +// mapsTo: 'key', +// }, +// left: { +// mapsTo: 'value', +// }, +// }, +// height: '400px', +// }, +// }; -export const ScatterEmptyState = Template.bind({}); -ScatterEmptyState.args = { - isInverse: false, - type: CarbonChartType.scatter, - dataSet: [], - options: { - title: 'Scatter (empty state)', - axes: { - bottom: { - title: '2019 Annual Sales Figures', - scaleType: 'time', - mapsTo: 'date', - }, - left: { - mapsTo: 'value', - }, - }, - height: '400px', - }, -}; +// export const ScatterDualAxes = Template.bind({}); +// ScatterDualAxes.args = { +// isInverse: false, +// type: CarbonChartType.scatter, +// dataSet: [ +// { +// group: 'Orders', +// date: 'January', +// orderCount: 121, +// }, +// { +// group: 'Orders', +// date: 'February', +// orderCount: 321, +// }, +// { +// group: 'Orders', +// date: 'March', +// orderCount: 370, +// }, +// { +// group: 'Orders', +// date: 'April', +// orderCount: 329, +// }, +// { +// group: 'Orders', +// date: 'May', +// orderCount: 121, +// }, +// { +// group: 'Products', +// date: 'January', +// productCount: 26100, +// }, +// { +// group: 'Products', +// date: 'February', +// productCount: 25100, +// }, +// { +// group: 'Products', +// date: 'March', +// productCount: 28100, +// }, +// { +// group: 'Products', +// date: 'April', +// productCount: 15900, +// }, +// { +// group: 'Products', +// date: 'May', +// productCount: 34100, +// }, +// ], +// options: { +// title: 'Scatter (dual axes)', +// axes: { +// bottom: { +// mapsTo: 'date', +// scaleType: 'labels', +// }, +// left: { +// title: 'order count', +// mapsTo: 'orderCount', +// scaleType: 'linear', +// }, +// right: { +// title: 'product count', +// mapsTo: 'productCount', +// scaleType: 'linear', +// correspondingDatasets: ['Products'], +// }, +// }, +// height: '400px', +// }, +// }; -export const ScatterSkeleton = Template.bind({}); -ScatterSkeleton.args = { - isInverse: false, - type: CarbonChartType.scatter, - dataSet: [], - options: { - title: 'Scatter (skeleton)', - axes: { - bottom: { - title: '2019 Annual Sales Figures', - scaleType: 'time', - mapsTo: 'date', - }, - left: { - mapsTo: 'value', - }, - }, - data: { - loading: true, - }, - height: '400px', - }, -}; +// export const ScatterEmptyState = Template.bind({}); +// ScatterEmptyState.args = { +// isInverse: false, +// type: CarbonChartType.scatter, +// dataSet: [], +// options: { +// title: 'Scatter (empty state)', +// axes: { +// bottom: { +// title: '2019 Annual Sales Figures', +// scaleType: 'time', +// mapsTo: 'date', +// }, +// left: { +// mapsTo: 'value', +// }, +// }, +// height: '400px', +// }, +// }; + +// export const ScatterSkeleton = Template.bind({}); +// ScatterSkeleton.args = { +// isInverse: false, +// type: CarbonChartType.scatter, +// dataSet: [], +// options: { +// title: 'Scatter (skeleton)', +// axes: { +// bottom: { +// title: '2019 Annual Sales Figures', +// scaleType: 'time', +// mapsTo: 'date', +// }, +// left: { +// mapsTo: 'value', +// }, +// }, +// data: { +// loading: true, +// }, +// height: '400px', +// }, +// }; diff --git a/website/react-magma-docs/src/pages/data-visualization/chart-demos.future.mdx b/website/react-magma-docs/src/pages/data-visualization/chart-demos.future.mdx new file mode 100644 index 0000000000..0677c0c5a5 --- /dev/null +++ b/website/react-magma-docs/src/pages/data-visualization/chart-demos.future.mdx @@ -0,0 +1,916 @@ + + +## Bubble + +A bubble chart, or bubble plot, uses bubbles to represent data points and their relationships in a two-dimensional plot. + +```tsx +import React from 'react'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; + +function Example() { + const args = { + 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', + }, + }; + + return ( + + + + ); +} +``` + + + +## Radar + +A radar chart, or spider chart, web chart, or star chart, is a two-dimensional graph displaying multiple quantitative variables in a single visual. + +```tsx +import React from 'react'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; + +function Example() { + const args = { + type: CarbonChartType.radar, + dataSet: [ + { + product: 'Product 1', + feature: 'Price', + score: 60, + }, + { + product: 'Product 1', + feature: 'Usability', + score: 92, + }, + { + product: 'Product 1', + feature: 'Availability', + score: 5, + }, + { + product: 'Product 1', + feature: 'Performance', + score: 85, + }, + { + product: 'Product 1', + feature: 'Quality', + score: 60, + }, + { + product: 'Product 2', + feature: 'Price', + score: 70, + }, + { + product: 'Product 2', + feature: 'Usability', + score: 63, + }, + { + product: 'Product 2', + feature: 'Availability', + score: 78, + }, + { + product: 'Product 2', + feature: 'Performance', + score: 50, + }, + { + product: 'Product 2', + feature: 'Quality', + score: 30, + }, + ], + options: { + title: 'Radar', + radar: { + axes: { + angle: 'feature', + value: 'score', + }, + }, + data: { + groupMapsTo: 'product', + }, + height: '400px', + }, + }; + + return ( + + + + ); +} +``` + + + +## Histogram + +A histogram is a statistical chart depicting the distribution of a continuous dataset using bars, with each bar representing a specific category or class interval. + +```tsx +import React from 'react'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; + +function Example() { + const args = { + type: CarbonChartType.histogram, + dataSet: [ + { + group: 'Dataset 1', + age: 20, + }, + { + group: 'Dataset 2', + age: 21, + }, + { + group: 'Dataset 2', + age: 23, + }, + { + group: 'Dataset 3', + age: 21, + }, + { + group: 'Dataset 3', + age: 23, + }, + { + group: 'Dataset 3', + age: 24, + }, + { + group: 'Dataset 1', + age: 30, + }, + { + group: 'Dataset 2', + age: 34, + }, + { + group: 'Dataset 1', + age: 35, + }, + { + group: 'Dataset 3', + age: 30, + }, + { + group: 'Dataset 1', + age: 40, + }, + { + group: 'Dataset 2', + age: 43, + }, + { + group: 'Dataset 1', + age: 45, + }, + { + group: 'Dataset 1', + age: 46, + }, + { + group: 'Dataset 3', + age: 40, + }, + { + group: 'Dataset 3', + age: 43, + }, + { + group: 'Dataset 3', + age: 45, + }, + { + group: 'Dataset 1', + age: 48, + }, + { + group: 'Dataset 1', + age: 50, + }, + { + group: 'Dataset 2', + age: 55, + }, + { + group: 'Dataset 2', + age: 66, + }, + { + group: 'Dataset 2', + age: 58, + }, + { + group: 'Dataset 1', + age: 70, + }, + { + group: 'Dataset 1', + age: 78, + }, + { + group: 'Dataset 3', + age: 71, + }, + { + group: 'Dataset 3', + age: 75, + }, + { + group: 'Dataset 2', + age: 83, + }, + { + group: 'Dataset 2', + age: 86, + }, + { + group: 'Dataset 1', + age: 87, + }, + ], + options: { + title: 'Histogram (linear)', + axes: { + bottom: { + title: 'Age', + mapsTo: 'age', + bins: 10, + limitDomainToBins: true, + }, + left: { + title: 'No. of participants', + scaleType: 'linear', + stacked: true, + binned: true, + }, + }, + height: '400px', + }, + }; + + return ( + + + + ); +} +``` + + + +## Boxplot + +A boxplot, or box and whisker plot, summarizes a set of data, showing its distribution and any outliers. + +```tsx +import React from 'react'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; + +function Example() { + const args = { + type: CarbonChartType.boxplot, + dataSet: [ + { + group: 'Q1', + key: 'Monday', + value: 65000, + }, + { + group: 'Q1', + key: 'Tuesday', + value: 29123, + }, + { + group: 'Q1', + key: 'Wednesday', + value: 35213, + }, + { + group: 'Q1', + key: 'Thursday', + value: 51213, + }, + { + group: 'Q1', + key: 'Friday', + value: 16932, + }, + { + group: 'Q2', + key: 'Monday', + value: 32432, + }, + { + group: 'Q2', + key: 'Tuesday', + value: 14312, + }, + { + group: 'Q2', + key: 'Wednesday', + value: 66456, + }, + { + group: 'Q2', + key: 'Thursday', + value: 21312, + }, + { + group: 'Q2', + key: 'Friday', + value: 37234, + }, + { + group: 'Q3', + key: 'Monday', + value: 5312, + }, + { + group: 'Q3', + key: 'Tuesday', + value: 23232, + }, + { + group: 'Q3', + key: 'Wednesday', + value: 34232, + }, + { + group: 'Q3', + key: 'Thursday', + value: 12312, + }, + { + group: 'Q3', + key: 'Friday', + value: 44234, + }, + { + group: 'Q4', + key: 'Monday', + value: 32423, + }, + { + group: 'Q4', + key: 'Tuesday', + value: 21313, + }, + { + group: 'Q4', + key: 'Wednesday', + value: 64353, + }, + { + group: 'Q4', + key: 'Thursday', + value: 24134, + }, + { + group: 'Q4', + key: 'Friday', + value: 45134, + }, + ], + options: { + title: 'Horizontal box plot', + axes: { + bottom: { + mapsTo: 'value', + }, + left: { + scaleType: 'labels', + mapsTo: 'group', + }, + }, + height: '400px', + }, + }; + + return ( + + + + ); +} +``` + + + +## Bullet + +Bullet charts are commonly used in dashboards to effectively compare metrics against target benchmarks or predefined ranges. + +```tsx +import React from 'react'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; + +function Example() { + const args = { + 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', + }, + }; + + return ( + + + + ); +} +``` + +## Meter + +Meter charts are used to measure the rate of change of a quantity against pre-defined targets. + +```tsx +import React from 'react'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; + +function Example() { + const args = { + 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', + }, + }; + + return ( + + + + ); +} +``` + + + +## Gauge + +A gauge chart, also known as a dial or speedometer chart, displays a single data value quantitatively. + +```tsx +import React from 'react'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; + +function Example() { + const args = { + type: CarbonChartType.gauge, + dataSet: [ + { + group: 'value', + value: 42, + }, + { + group: 'delta', + value: -13.37, + }, + ], + options: { + title: 'Gauge semicircular -- danger status', + resizable: true, + height: '250px', + gauge: { + type: 'semi', + status: 'danger', + }, + }, + }; + + return ( + + + + ); +} +``` + + + +## Combo + +```tsx +import React from 'react'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; + +function Example() { + const args = { + type: CarbonChartType.combo, + dataSet: [ + { + group: 'School A', + date: 'Monday', + value: 10000, + }, + { + group: 'School A', + date: 'Tuesday', + value: 65000, + }, + { + group: 'School A', + date: 'Wednesday', + value: 30000, + }, + { + group: 'School A', + date: 'Thursday', + value: 49213, + }, + { + group: 'School A', + date: 'Friday', + value: 49213, + }, + { + group: 'Temperature', + date: 'Monday', + temp: 70, + }, + { + group: 'Temperature', + date: 'Tuesday', + temp: 75, + }, + { + group: 'Temperature', + date: 'Wednesday', + temp: 31, + }, + { + group: 'Temperature', + date: 'Thursday', + temp: 31, + }, + { + group: 'Temperature', + date: 'Friday', + temp: 43, + }, + ], + options: { + title: 'Combo (Line + Simple bar) - custom configs', + axes: { + left: { + mapsTo: 'value', + scaleType: 'linear', + title: 'USA Summer School Attendance', + }, + right: { + mapsTo: 'temp', + scaleType: 'linear', + title: 'Temperature (°F)', + correspondingDatasets: ['Temperature'], + }, + bottom: { + title: 'Day of the Week', + mapsTo: 'date', + scaleType: 'labels', + }, + }, + comboChartTypes: [ + { + type: 'simple-bar', + correspondingDatasets: ['School A'], + }, + { + type: 'line', + options: { + points: { + radius: 5, + }, + }, + correspondingDatasets: ['Temperature'], + }, + ], + height: '400px', + }, + }; + + return ( + + + + ); +} +``` + + + +## Scatter + +Scatter plots use data points to plot two measures along a scale, allowing exploration of correlations between different variables. + +```tsx +import React from 'react'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; + +function Example() { + const args = { + type: CarbonChartType.scatter, + dataSet: [ + { + group: 'Dataset 1', + employees: 5000, + sales: 32100, + }, + { + group: 'Dataset 1', + employees: 3000, + sales: 25100, + }, + { + group: 'Dataset 1', + employees: 8000, + sales: 12100, + }, + { + group: 'Dataset 1', + employees: 4000, + sales: 53100, + }, + { + group: 'Dataset 2', + employees: 5000, + sales: 32100, + }, + { + group: 'Dataset 2', + employees: 2000, + sales: 34100, + }, + { + group: 'Dataset 2', + employees: 4000, + sales: 23100, + }, + { + group: 'Dataset 2', + employees: 7000, + sales: 14100, + }, + { + group: 'Dataset 2', + employees: 6000, + sales: 53100, + }, + ], + options: { + title: 'Scatter (linear x & y)', + axes: { + bottom: { + title: 'No. of employees', + mapsTo: 'employees', + scaleType: 'linear', + }, + left: { + title: 'Annual sales', + mapsTo: 'sales', + scaleType: 'linear', + }, + }, + height: '400px', + }, + }; + + return ( + + + + ); +} +``` + + diff --git a/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx b/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx index 7b031c4e85..a2f7d48e8c 100644 --- a/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx +++ b/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx @@ -686,615 +686,60 @@ function Example() { path="https://storybook-preview-dev--upbeat-sinoussi-f675aa.netlify.app/?path=/story/carbonchart-bar-stacked--vertical-stacked-bar-discrete" /> -## Boxplot - -A boxplot, or box and whisker plot, summarizes a set of data, showing its distribution and any outliers. - -```tsx -import React from 'react'; -import { Card } from 'react-magma-dom'; -import { CarbonChart, CarbonChartType } from '@react-magma/charts'; -// IMPORTANT: Uncomment the line below for the correct styles -// import '@react-magma/charts/dist/charts.css'; - -function Example() { - const args = { - type: CarbonChartType.boxplot, - dataSet: [ - { - group: 'Q1', - key: 'Monday', - value: 65000, - }, - { - group: 'Q1', - key: 'Tuesday', - value: 29123, - }, - { - group: 'Q1', - key: 'Wednesday', - value: 35213, - }, - { - group: 'Q1', - key: 'Thursday', - value: 51213, - }, - { - group: 'Q1', - key: 'Friday', - value: 16932, - }, - { - group: 'Q2', - key: 'Monday', - value: 32432, - }, - { - group: 'Q2', - key: 'Tuesday', - value: 14312, - }, - { - group: 'Q2', - key: 'Wednesday', - value: 66456, - }, - { - group: 'Q2', - key: 'Thursday', - value: 21312, - }, - { - group: 'Q2', - key: 'Friday', - value: 37234, - }, - { - group: 'Q3', - key: 'Monday', - value: 5312, - }, - { - group: 'Q3', - key: 'Tuesday', - value: 23232, - }, - { - group: 'Q3', - key: 'Wednesday', - value: 34232, - }, - { - group: 'Q3', - key: 'Thursday', - value: 12312, - }, - { - group: 'Q3', - key: 'Friday', - value: 44234, - }, - { - group: 'Q4', - key: 'Monday', - value: 32423, - }, - { - group: 'Q4', - key: 'Tuesday', - value: 21313, - }, - { - group: 'Q4', - key: 'Wednesday', - value: 64353, - }, - { - group: 'Q4', - key: 'Thursday', - value: 24134, - }, - { - group: 'Q4', - key: 'Friday', - value: 45134, - }, - ], - options: { - title: 'Horizontal box plot', - axes: { - bottom: { - mapsTo: 'value', - }, - left: { - scaleType: 'labels', - mapsTo: 'group', - }, - }, - height: '400px', - }, - }; - - return ( - - - - ); -} -``` - - - -## Bubble - -A bubble chart, or bubble plot, uses bubbles to represent data points and their relationships in a two-dimensional plot. - -```tsx -import React from 'react'; -import { Card } from 'react-magma-dom'; -import { CarbonChart, CarbonChartType } from '@react-magma/charts'; -// IMPORTANT: Uncomment the line below for the correct styles -// import '@react-magma/charts/dist/charts.css'; - -function Example() { - const args = { - 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', - }, - }; - - return ( - - - - ); -} -``` - - - -## Bullet - -Bullet charts are commonly used in dashboards to effectively compare metrics against target benchmarks or predefined ranges. - -```tsx -import React from 'react'; -import { Card } from 'react-magma-dom'; -import { CarbonChart, CarbonChartType } from '@react-magma/charts'; -// IMPORTANT: Uncomment the line below for the correct styles -// import '@react-magma/charts/dist/charts.css'; - -function Example() { - const args = { - 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', - }, - }; - - return ( - - - - ); -} -``` - -## Donut - -A donut chart is a type of pie chart with a hole in the middle. It shows the relationship of parts to a whole and the percentage each value contributes to the total. - -```tsx -import React from 'react'; -import { Card } from 'react-magma-dom'; -import { CarbonChart, CarbonChartType } from '@react-magma/charts'; -// IMPORTANT: Uncomment the line below for the correct styles -// import '@react-magma/charts/dist/charts.css'; - -function Example() { - const args = { - type: CarbonChartType.donut, - dataSet: [ - { - group: '2V2N 9KYPM version 1', - value: 20000, - }, - { - group: 'L22I P66EP L22I P66EP L22I P66EP', - value: 65000, - }, - { - group: 'JQAI 2M4L1', - value: 75000, - }, - { - group: 'J9DZ F37AP', - value: 1200, - }, - { - group: 'YEL48 Q6XK YEL48', - value: 10000, - }, - { - group: 'Misc', - value: 25000, - }, - ], - options: { - title: 'Donut', - resizable: true, - donut: { - center: { - label: 'Browsers', - }, - }, - height: '400px', - legend: { - truncation: { - type: 'none', - }, - }, - }, - }; - - return ( - - - - ); -} -``` - - - -## Gauge - -A gauge chart, also known as a dial or speedometer chart, displays a single data value quantitatively. - -```tsx -import React from 'react'; -import { Card } from 'react-magma-dom'; -import { CarbonChart, CarbonChartType } from '@react-magma/charts'; -// IMPORTANT: Uncomment the line below for the correct styles -// import '@react-magma/charts/dist/charts.css'; - -function Example() { - const args = { - type: CarbonChartType.gauge, - dataSet: [ - { - group: 'value', - value: 42, - }, - { - group: 'delta', - value: -13.37, - }, - ], - options: { - title: 'Gauge semicircular -- danger status', - resizable: true, - height: '250px', - gauge: { - type: 'semi', - status: 'danger', - }, - }, - }; - - return ( - - - - ); -} -``` - - - -## Histogram - -A histogram is a statistical chart depicting the distribution of a continuous dataset using bars, with each bar representing a specific category or class interval. - -```tsx -import React from 'react'; -import { Card } from 'react-magma-dom'; -import { CarbonChart, CarbonChartType } from '@react-magma/charts'; -// IMPORTANT: Uncomment the line below for the correct styles -// import '@react-magma/charts/dist/charts.css'; - -function Example() { - const args = { - type: CarbonChartType.histogram, - dataSet: [ - { - group: 'Dataset 1', - age: 20, - }, - { - group: 'Dataset 2', - age: 21, - }, - { - group: 'Dataset 2', - age: 23, - }, - { - group: 'Dataset 3', - age: 21, - }, - { - group: 'Dataset 3', - age: 23, - }, - { - group: 'Dataset 3', - age: 24, - }, - { - group: 'Dataset 1', - age: 30, - }, - { - group: 'Dataset 2', - age: 34, - }, - { - group: 'Dataset 1', - age: 35, - }, - { - group: 'Dataset 3', - age: 30, - }, - { - group: 'Dataset 1', - age: 40, - }, - { - group: 'Dataset 2', - age: 43, - }, - { - group: 'Dataset 1', - age: 45, - }, - { - group: 'Dataset 1', - age: 46, - }, - { - group: 'Dataset 3', - age: 40, - }, - { - group: 'Dataset 3', - age: 43, - }, - { - group: 'Dataset 3', - age: 45, - }, - { - group: 'Dataset 1', - age: 48, - }, - { - group: 'Dataset 1', - age: 50, - }, - { - group: 'Dataset 2', - age: 55, - }, - { - group: 'Dataset 2', - age: 66, - }, - { - group: 'Dataset 2', - age: 58, - }, - { - group: 'Dataset 1', - age: 70, - }, +## Donut + +A donut chart is a type of pie chart with a hole in the middle. It shows the relationship of parts to a whole and the percentage each value contributes to the total. + +```tsx +import React from 'react'; +import { Card } from 'react-magma-dom'; +import { CarbonChart, CarbonChartType } from '@react-magma/charts'; +// IMPORTANT: Uncomment the line below for the correct styles +// import '@react-magma/charts/dist/charts.css'; + +function Example() { + const args = { + type: CarbonChartType.donut, + dataSet: [ { - group: 'Dataset 1', - age: 78, + group: '2V2N 9KYPM version 1', + value: 20000, }, { - group: 'Dataset 3', - age: 71, + group: 'L22I P66EP L22I P66EP L22I P66EP', + value: 65000, }, { - group: 'Dataset 3', - age: 75, + group: 'JQAI 2M4L1', + value: 75000, }, { - group: 'Dataset 2', - age: 83, + group: 'J9DZ F37AP', + value: 1200, }, { - group: 'Dataset 2', - age: 86, + group: 'YEL48 Q6XK YEL48', + value: 10000, }, { - group: 'Dataset 1', - age: 87, + group: 'Misc', + value: 25000, }, ], options: { - title: 'Histogram (linear)', - axes: { - bottom: { - title: 'Age', - mapsTo: 'age', - bins: 10, - limitDomainToBins: true, - }, - left: { - title: 'No. of participants', - scaleType: 'linear', - stacked: true, - binned: true, + title: 'Donut', + resizable: true, + donut: { + center: { + label: 'Browsers', }, }, height: '400px', + legend: { + truncation: { + type: 'none', + }, + }, }, }; @@ -1307,8 +752,8 @@ function Example() { ``` ## Line @@ -1525,64 +970,6 @@ function Example() { path="https://storybook-preview-dev--upbeat-sinoussi-f675aa.netlify.app/?path=/story/carbonchart-lollipop--lollipop-discrete" /> -## Meter - -Meter charts are used to measure the rate of change of a quantity against pre-defined targets. - -```tsx -import React from 'react'; -import { Card } from 'react-magma-dom'; -import { CarbonChart, CarbonChartType } from '@react-magma/charts'; -// IMPORTANT: Uncomment the line below for the correct styles -// import '@react-magma/charts/dist/charts.css'; - -function Example() { - const args = { - 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', - }, - }; - - return ( - - - - ); -} -``` - - - ## Pie A pie chart visually summarizes nominal data or illustrates the distribution of values, such as percentage distribution. @@ -1648,190 +1035,4 @@ function Example() { path="https://storybook-preview-dev--upbeat-sinoussi-f675aa.netlify.app/?path=/story/carbonchart-pie--pie" /> -## Radar - -A radar chart, or spider chart, web chart, or star chart, is a two-dimensional graph displaying multiple quantitative variables in a single visual. - -```tsx -import React from 'react'; -import { Card } from 'react-magma-dom'; -import { CarbonChart, CarbonChartType } from '@react-magma/charts'; -// IMPORTANT: Uncomment the line below for the correct styles -// import '@react-magma/charts/dist/charts.css'; - -function Example() { - const args = { - type: CarbonChartType.radar, - dataSet: [ - { - product: 'Product 1', - feature: 'Price', - score: 60, - }, - { - product: 'Product 1', - feature: 'Usability', - score: 92, - }, - { - product: 'Product 1', - feature: 'Availability', - score: 5, - }, - { - product: 'Product 1', - feature: 'Performance', - score: 85, - }, - { - product: 'Product 1', - feature: 'Quality', - score: 60, - }, - { - product: 'Product 2', - feature: 'Price', - score: 70, - }, - { - product: 'Product 2', - feature: 'Usability', - score: 63, - }, - { - product: 'Product 2', - feature: 'Availability', - score: 78, - }, - { - product: 'Product 2', - feature: 'Performance', - score: 50, - }, - { - product: 'Product 2', - feature: 'Quality', - score: 30, - }, - ], - options: { - title: 'Radar', - radar: { - axes: { - angle: 'feature', - value: 'score', - }, - }, - data: { - groupMapsTo: 'product', - }, - height: '400px', - }, - }; - - return ( - - - - ); -} -``` - - - -## Scatter - -Scatter plots use data points to plot two measures along a scale, allowing exploration of correlations between different variables. - -```tsx -import React from 'react'; -import { Card } from 'react-magma-dom'; -import { CarbonChart, CarbonChartType } from '@react-magma/charts'; -// IMPORTANT: Uncomment the line below for the correct styles -// import '@react-magma/charts/dist/charts.css'; - -function Example() { - const args = { - type: CarbonChartType.scatter, - dataSet: [ - { - group: 'Dataset 1', - employees: 5000, - sales: 32100, - }, - { - group: 'Dataset 1', - employees: 3000, - sales: 25100, - }, - { - group: 'Dataset 1', - employees: 8000, - sales: 12100, - }, - { - group: 'Dataset 1', - employees: 4000, - sales: 53100, - }, - { - group: 'Dataset 2', - employees: 5000, - sales: 32100, - }, - { - group: 'Dataset 2', - employees: 2000, - sales: 34100, - }, - { - group: 'Dataset 2', - employees: 4000, - sales: 23100, - }, - { - group: 'Dataset 2', - employees: 7000, - sales: 14100, - }, - { - group: 'Dataset 2', - employees: 6000, - sales: 53100, - }, - ], - options: { - title: 'Scatter (linear x & y)', - axes: { - bottom: { - title: 'No. of employees', - mapsTo: 'employees', - scaleType: 'linear', - }, - left: { - title: 'Annual sales', - mapsTo: 'sales', - scaleType: 'linear', - }, - }, - height: '400px', - }, - }; - - return ( - - - - ); -} -``` - - - diff --git a/website/react-magma-docs/src/pages/data-visualization/chart-types.future.mdx b/website/react-magma-docs/src/pages/data-visualization/chart-types.future.mdx new file mode 100644 index 0000000000..7234c5088f --- /dev/null +++ b/website/react-magma-docs/src/pages/data-visualization/chart-types.future.mdx @@ -0,0 +1,142 @@ + + +Bubble: +
+
+ GATSBY_EMPTY_ALT +
+
+

Bubble

+

+ A bubble chart, or bubble plot, uses bubbles to represent data points and + their relationships in a two-dimensional plot. +

+ View Demo +
+
+ +Radar: +
+
+ GATSBY_EMPTY_ALT +
+
+

Radar

+

+ A radar chart, or spider chart, web chart, or star chart, is a + two-dimensional graph displaying multiple quantitative variables in a + single visual. +

+ View Demo +
+
+ +Histogram: +
+
+ GATSBY_EMPTY_ALT +
+
+

Histogram

+

+ A histogram is a statistical chart depicting the distribution of a + continuous dataset using bars, with each bar representing a specific + category or class interval. +

+ View Demo +
+
+ +Boxplot: +
+
+ GATSBY_EMPTY_ALT +
+
+

Boxplot

+

+ A boxplot, or box and whisker plot, summarizes a set of data, showing its + distribution and any outliers. +

+ View Demo +
+
+ +Bullet: +
+
+ GATSBY_EMPTY_ALT +
+
+

Bullet

+

+ Bullet charts are commonly used in dashboards to effectively compare + metrics against target benchmarks or predefined ranges. +

+ View Demo +
+
+ +Meter: +
+
+ GATSBY_EMPTY_ALT +
+
+

Meter

+

+ Meter charts are used to measure the rate of change of a quantity against + pre-defined targets. +

+ View Demo +
+
+ +Gauge: +
+
+ GATSBY_EMPTY_ALT +
+
+

Gauge

+

+ A gauge chart, also known as a dial or speedometer chart, displays a + single data value quantitatively. +

+ View Demo +
+
+ +Combo: +
+
+ GATSBY_EMPTY_ALT +
+
+

Combo

+

+ Combo chart +

+ View Demo +
+
+ +## Correlations +Correlation charts show the relationship between two or more variables. + +Scatter: +
+
+
+ GATSBY_EMPTY_ALT +
+
+

Scatter

+

+ Scatter plots use data points to plot two measures along a scale, + allowing exploration of correlations between different variables. +

+ View Demo +
+
+
diff --git a/website/react-magma-docs/src/pages/data-visualization/chart-types.mdx b/website/react-magma-docs/src/pages/data-visualization/chart-types.mdx index 0cfaa3445c..ae351e5b85 100644 --- a/website/react-magma-docs/src/pages/data-visualization/chart-types.mdx +++ b/website/react-magma-docs/src/pages/data-visualization/chart-types.mdx @@ -69,33 +69,6 @@ Comparison charts compare data between multiple distinct categories. View Demo -
-
- GATSBY_EMPTY_ALT -
-
-

Bubble

-

- A bubble chart, or bubble plot, uses bubbles to represent data points - and their relationships in a two-dimensional plot. -

- View Demo -
-
-
-
- GATSBY_EMPTY_ALT -
-
-

Radar

-

- A radar chart, or spider chart, web chart, or star chart, is a - two-dimensional graph displaying multiple quantitative variables in a - single visual. -

- View Demo -
-
GATSBY_EMPTY_ALT @@ -144,36 +117,6 @@ Trend charts show data over a period of time, to reveal trends or make compariso View Demo
-
-
- GATSBY_EMPTY_ALT -
-
-

Boxplot

-

- A boxplot, or box and whisker plot, summarizes a set of data, showing - its distribution and any outliers. -

- View Demo -
-
-
-
- GATSBY_EMPTY_ALT -
-
-

Histogram

-

- A histogram is a statistical chart depicting the distribution of a - continuous dataset using bars, with each bar representing a specific - category or class interval. -

- View Demo -
-
## Part-to-whole @@ -224,19 +167,6 @@ Part-to-whole charts show how partial elements add up to a total. View Demo -
-
- GATSBY_EMPTY_ALT -
-
-

Bullet

-

- Bullet charts are commonly used in dashboards to effectively compare - metrics against target benchmarks or predefined ranges. -

- View Demo -
-
View Demo
-
-
- GATSBY_EMPTY_ALT -
-
-

Meter

-

- Meter charts are used to measure the rate of change of a quantity - against pre-defined targets. -

- View Demo -
-
-
-
- GATSBY_EMPTY_ALT -
-
-

Gauge

-

- A gauge chart, also known as a dial or speedometer chart, displays a - single data value quantitatively. -

- View Demo -
-
- - -## Correlations - -Correlation charts show the relationship between two or more variables. - -
-
-
- GATSBY_EMPTY_ALT -
-
-

Scatter

-

- Scatter plots use data points to plot two measures along a scale, - allowing exploration of correlations between different variables. -

- View Demo -
-
From f060deff2476f6b1b5b29c52442ae6a8ae58ca5a Mon Sep 17 00:00:00 2001 From: Nikita Orliak Date: Tue, 26 Nov 2024 10:39:04 +0100 Subject: [PATCH 6/8] feat(Charts): change commented files format --- .../{chart-demos.future.mdx => chart-demos.future.txt} | 0 .../{chart-types.future.mdx => chart-types.future.txt} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename website/react-magma-docs/src/pages/data-visualization/{chart-demos.future.mdx => chart-demos.future.txt} (100%) rename website/react-magma-docs/src/pages/data-visualization/{chart-types.future.mdx => chart-types.future.txt} (100%) diff --git a/website/react-magma-docs/src/pages/data-visualization/chart-demos.future.mdx b/website/react-magma-docs/src/pages/data-visualization/chart-demos.future.txt similarity index 100% rename from website/react-magma-docs/src/pages/data-visualization/chart-demos.future.mdx rename to website/react-magma-docs/src/pages/data-visualization/chart-demos.future.txt diff --git a/website/react-magma-docs/src/pages/data-visualization/chart-types.future.mdx b/website/react-magma-docs/src/pages/data-visualization/chart-types.future.txt similarity index 100% rename from website/react-magma-docs/src/pages/data-visualization/chart-types.future.mdx rename to website/react-magma-docs/src/pages/data-visualization/chart-types.future.txt From dc386bf7be8bf22fc108d9efa556fda7bc650603 Mon Sep 17 00:00:00 2001 From: Nikita Orliak Date: Tue, 10 Dec 2024 14:44:45 +0100 Subject: [PATCH 7/8] feat(Charts): fix comments --- website/react-magma-docs/gatsby-config.js | 7 -- website/react-magma-docs/gatsby-node.js | 9 +-- .../src/components/MainNav/index.js | 33 +-------- .../src/components/PageContent/index.js | 46 +++---------- .../pages/data-visualization/chart-demos.mdx | 4 +- .../pages/data-visualization/chart-types.css | 67 ++++++++++++++----- .../pages/data-visualization/chart-types.mdx | 2 +- .../introduction.mdx | 6 +- 8 files changed, 74 insertions(+), 100 deletions(-) rename website/react-magma-docs/src/pages/{data-visualization-intro => data-visualization}/introduction.mdx (89%) diff --git a/website/react-magma-docs/gatsby-config.js b/website/react-magma-docs/gatsby-config.js index 1882cbf05e..e2ead73e5d 100644 --- a/website/react-magma-docs/gatsby-config.js +++ b/website/react-magma-docs/gatsby-config.js @@ -75,13 +75,6 @@ module.exports = { path: `${__dirname}/src/pages/data-visualization`, }, }, - { - resolve: `gatsby-source-filesystem`, - options: { - name: `data-visualization-intro`, - path: `${__dirname}/src/pages/data-visualization-intro`, - }, - }, { resolve: 'gatsby-plugin-mdx', options: { diff --git a/website/react-magma-docs/gatsby-node.js b/website/react-magma-docs/gatsby-node.js index 181bae7318..7dc67ed92d 100644 --- a/website/react-magma-docs/gatsby-node.js +++ b/website/react-magma-docs/gatsby-node.js @@ -12,8 +12,8 @@ exports.onCreateWebpackConfig = ({ actions, plugins }) => { path: require.resolve('path-browserify'), }, fallback: { - 'object.assign/polyfill': require.resolve("object.assign/polyfill.js"), - } + 'object.assign/polyfill': require.resolve('object.assign/polyfill.js'), + }, }, module: { rules: [ @@ -25,7 +25,7 @@ exports.onCreateWebpackConfig = ({ actions, plugins }) => { ], }, plugins: [ - plugins.provide({ process: 'process', Buffer: ['buffer', 'Buffer'] }) + plugins.provide({ process: 'process', Buffer: ['buffer', 'Buffer'] }), ], }); }; @@ -47,9 +47,6 @@ const getPathPrefix = path => { } return 'patterns'; } else if (/data-visualization/.test(path)) { - if (/intro/.test(path)) { - return 'data-visualization-intro' - } return 'data-visualization'; } }; diff --git a/website/react-magma-docs/src/components/MainNav/index.js b/website/react-magma-docs/src/components/MainNav/index.js index 674ea98056..708fe07edc 100644 --- a/website/react-magma-docs/src/components/MainNav/index.js +++ b/website/react-magma-docs/src/components/MainNav/index.js @@ -274,11 +274,11 @@ export const MainNav = ({ ...props }) => { ...navFields } } - dataVisualizationDocs: allMdx( + dataVisualization: allMdx( filter: { fileAbsolutePath: { glob: "**/src/pages/data-visualization/**" } } - sort: { order: ASC, fields: frontmatter___title } + sort: { order: ASC, fields: frontmatter___order } ) { edges { ...navFields @@ -312,18 +312,6 @@ export const MainNav = ({ ...props }) => { ...navFields } } - dataVisualizationIntro: allMdx( - filter: { - fileAbsolutePath: { - glob: "**/src/pages/data-visualization-intro/**" - } - } - sort: { order: ASC, fields: frontmatter___order } - ) { - edges { - ...navFields - } - } } `} render={data => ( @@ -496,23 +484,8 @@ export const MainNav = ({ ...props }) => { Data Visualization - Intro - - {data.dataVisualizationIntro.edges.map(({ node }) => ( - - - {node.frontmatter.title} - - - ))} - - API - {data.dataVisualizationDocs.edges.map(({ node }) => ( + {data.dataVisualization.edges.map(({ node }) => ( { ...navFields } } - dataVisualizationDocs: allMdx( + dataVisualization: allMdx( filter: { fileAbsolutePath: { glob: "**/src/pages/data-visualization/**" } } - sort: { order: ASC, fields: frontmatter___title } + sort: { order: ASC, fields: frontmatter___order } ) { edges { ...navFields @@ -201,18 +200,6 @@ export const PageContent = ({ children, componentName, type }) => { ...navFields } } - dataVisualizationIntro: allMdx( - filter: { - fileAbsolutePath: { - glob: "**/src/pages/data-visualization-intro/**" - } - } - sort: { order: ASC, fields: frontmatter___order } - ) { - edges { - ...navFields - } - } } `} render={data => { @@ -223,36 +210,32 @@ export const PageContent = ({ children, componentName, type }) => { data.designPatternDocs, componentName ); - const dataVisualizationDocs = getDataNode( - data.dataVisualizationDocs, + const dataVisualization = getDataNode( + data.dataVisualization, componentName ); const designIntro = getDataNode(data.designIntro, componentName); const apiIntro = getDataNode(data.apiIntro, componentName); const patternsIntro = getDataNode(data.patternsIntro, componentName); - const dataVisualizationIntro = getDataNode( - data.dataVisualizationIntro, - componentName - ); const designLink = designDocs?.node.fields.slug; const apiLink = apiDocs?.node.fields.slug; const patternsLink = patternsDocs?.node.fields.slug; const designPatternsLink = designPatternDocs?.node.fields.slug; - const dataVisualizationLink = dataVisualizationDocs?.node.fields.slug; + const dataVisualizationLink = dataVisualization?.node.fields.slug; const hasDocs = !!( apiDocs || designDocs || patternsDocs || designPatternDocs || - dataVisualizationDocs + dataVisualization ); const apiNavTabToLink = patternsDocs ? patternsLink - : dataVisualizationDocs + : dataVisualization ? dataVisualizationLink : apiLink; const designNavTabToLink = designPatternDocs @@ -268,9 +251,9 @@ export const PageContent = ({ children, componentName, type }) => { return patternsDocs; } } - if (dataVisualizationDocs) { + if (dataVisualization) { if (type === NAV_TABS.DATA_VISUALIZATION) { - return dataVisualizationDocs; + return dataVisualization; } } if (apiDocs || designDocs) { @@ -281,12 +264,7 @@ export const PageContent = ({ children, componentName, type }) => { return designDocs; } } - if ( - designIntro || - patternsIntro || - apiIntro || - dataVisualizationIntro - ) { + if (designIntro || patternsIntro || apiIntro) { if (type === NAV_TABS.API_INTRO) { return apiIntro; } @@ -296,9 +274,6 @@ export const PageContent = ({ children, componentName, type }) => { if (type === NAV_TABS.PATTERNS_INTRO) { return patternsIntro; } - if (type === NAV_TABS.DATA_VISUALIZATION_INTRO) { - return dataVisualizationIntro; - } } }; @@ -381,6 +356,5 @@ PageContent.propTypes = { 'patterns', 'patterns_intro', 'data_visualization', - 'data_visualization_intro', ]), }; diff --git a/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx b/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx index a2f7d48e8c..962f0e92a5 100644 --- a/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx +++ b/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx @@ -1,11 +1,11 @@ --- pageTitle: Chart Demos title: Chart Demos -order: 2 +order: 3 --- import { LeadParagraph } from '../../components/LeadParagraph'; -import { MagmaChartsSiteLink } from '../data-visualization-intro/introduction'; +import { MagmaChartsSiteLink } from './introduction'; import { Flex, FlexBehavior, FlexAlignItems, magma } from 'react-magma-dom'; import { StorybookIcon } from '../../images/icons/storybook-icon'; import { OpenInNewIcon } from 'react-magma-icons'; diff --git a/website/react-magma-docs/src/pages/data-visualization/chart-types.css b/website/react-magma-docs/src/pages/data-visualization/chart-types.css index 63bcbe907d..d789423fb1 100644 --- a/website/react-magma-docs/src/pages/data-visualization/chart-types.css +++ b/website/react-magma-docs/src/pages/data-visualization/chart-types.css @@ -17,6 +17,7 @@ display: flex; flex-direction: column; height: 100%; + overflow: hidden; } .description { @@ -46,41 +47,77 @@ font-weight: 400; line-height: 20px; text-align: left; + color: #454545; } .description > a { + background-color: #ffffff; + border: 1px solid; + border-color: #d4d4d4; + border-radius: 8px; + color: #454545; + cursor: pointer; + flex-shrink: 0; + font-family: Work Sans, Helvetica, sans-serif; font-size: 12px; font-weight: 500; line-height: 16px; - text-align: center; - text-underline-position: from-font; - text-decoration-skip-ink: none; + margin: 0; padding: 6px 8px; - border: 1px solid #d4d4d4; - border-radius: 8px; - background-color: #ffffff; + position: relative; + text-align: center; + text-decoration: none; text-transform: uppercase; - cursor: pointer; - transition: all 0.25s ease-in-out; + touch-action: manipulation; + transition: background 0.35s, border-color 0.35s, box-shadow 0.35s, + color 0.35s; + vertical-align: middle; + white-space: nowrap; + width: fit-content; outline: none !important; margin-top: auto; - width: fit-content; - text-decoration: none; - color: #454545; + text-underline-position: from-font; + text-decoration-skip-ink: none; + overflow: hidden; +} + +.description > a::after { + background: rgb(255, 255, 255); + border-radius: 50%; + content: ''; + height: 28px; + left: 50%; + opacity: 0; + padding: 50%; + position: absolute; + top: 50%; + transform: translate(-50%, -50%) scale(1); + transition: opacity 1s, transform 0.5s; + width: 28px; } .description > a:hover { - background-color: #f5f5f5; + background: rgba(0, 0, 0, 0.05); + color: #454545; } .description > a:active { - background-color: #d4d4d4; + background: rgba(0, 0, 0, 0.1); + color: rgb(69, 69, 69); +} + +.description > a:active::after { + opacity: 0.4; + transform: translate(-50%, -50%) scale(0); + transition: transform 0s; } .description > a:focus { - border-color: #8c8c8c; + outline: 2px solid #0074b7 !important; + outline-offset: 2px; + z-index: 1; + background: rgba(0, 0, 0, 0.05); color: #454545; - box-shadow: 0 0 0 3px rgba(140, 140, 140, 0.4); } figure { diff --git a/website/react-magma-docs/src/pages/data-visualization/chart-types.mdx b/website/react-magma-docs/src/pages/data-visualization/chart-types.mdx index ae351e5b85..1ac803bf0f 100644 --- a/website/react-magma-docs/src/pages/data-visualization/chart-types.mdx +++ b/website/react-magma-docs/src/pages/data-visualization/chart-types.mdx @@ -1,7 +1,7 @@ --- pageTitle: Chart Types title: Chart Types -order: 1 +order: 2 --- import { LeadParagraph } from '../../components/LeadParagraph'; diff --git a/website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx b/website/react-magma-docs/src/pages/data-visualization/introduction.mdx similarity index 89% rename from website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx rename to website/react-magma-docs/src/pages/data-visualization/introduction.mdx index f37c15906f..b1705becbb 100644 --- a/website/react-magma-docs/src/pages/data-visualization-intro/introduction.mdx +++ b/website/react-magma-docs/src/pages/data-visualization/introduction.mdx @@ -1,5 +1,5 @@ --- -title: Getting Started +title: Get Started order: 1 --- @@ -8,7 +8,7 @@ import { Flex, FlexBehavior, FlexAlignItems, magma } from 'react-magma-dom'; import { OpenInNewIcon } from 'react-magma-icons'; import { StorybookIcon } from '../../images/icons/storybook-icon'; - + Magma charts enable you to convey precise and compelling narratives around @@ -17,7 +17,7 @@ import { StorybookIcon } from '../../images/icons/storybook-icon'; Magma Charts is based on [Carbon Charts from IBM](https://charts.carbondesignsystem.com/introduction). -Get started below with implementation instructions for developers. You can also learn more about the [chart types](../../data-visualization/chart-types) we provide, as well as [view examples](../../data-visualization/chart-demos). +Get started below with implementation instructions for developers. You can also learn more about the [chart types](../chart-types) we provide, as well as [view examples](../chart-demos). export const MagmaChartsSiteLink = () => ( Date: Tue, 10 Dec 2024 14:49:19 +0100 Subject: [PATCH 8/8] feat(Charts): small number demos fix --- .../src/pages/data-visualization/chart-demos.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx b/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx index 962f0e92a5..be13c74314 100644 --- a/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx +++ b/website/react-magma-docs/src/pages/data-visualization/chart-demos.mdx @@ -36,7 +36,7 @@ export const MoreDemosLink = ({ number, path }) => ( }} > - {number} more demos + {number > 1 ? `${number} more demos` : `1 more demo`}