From 5cb04e02afa96881ba920a0826052e7db63f4516 Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Tue, 23 Jun 2020 07:10:25 -0400 Subject: [PATCH] Codesandbox examples for charting demos (#987) * initial effort * add dynamic demos to basic charts * update charting package version, optimize demo components * fix lint error * update @carbon/charts to 0.32.3 * add image alt tags to dataviz chart types page * update yarn.lock * fix styling issues * styling fixes * undo overview-card tag height change * move resources below anchor links for basic charts page * final touch on CodeBar Co-authored-by: TJ Egan --- package.json | 4 +- src/components/ComponentDemo/Code/CodeBar.js | 16 +- .../ComponentDemo/Code/useCodesandbox.js | 4 + src/components/data-visualization/AllDemos.js | 73 ++++ src/data/charts/bar.js | 336 ------------------ src/data/charts/index.js | 8 - src/data/charts/line.js | 241 ------------- src/data/charts/pie-donut.js | 40 --- src/data/data-visualization/index.js | 21 ++ .../data-visualization/basic-charts/index.mdx | 243 ++----------- .../chart-types/images/radar.svg | 4 - .../data-visualization/chart-types/index.mdx | 111 +++--- .../data-visualization.scss | 17 +- yarn.lock | 42 +-- 14 files changed, 225 insertions(+), 935 deletions(-) create mode 100644 src/components/data-visualization/AllDemos.js delete mode 100644 src/data/charts/bar.js delete mode 100644 src/data/charts/index.js delete mode 100644 src/data/charts/line.js delete mode 100644 src/data/charts/pie-donut.js create mode 100644 src/data/data-visualization/index.js diff --git a/package.json b/package.json index 2f069d51574..3007cfba074 100644 --- a/package.json +++ b/package.json @@ -34,8 +34,8 @@ "carbon-components-react": "^7.14.0" }, "dependencies": { - "@carbon/charts": "^0.28.1", - "@carbon/charts-react": "^0.28.1", + "@carbon/charts": "^0.32.8", + "@carbon/charts-react": "^0.32.8", "@carbon/elements": "^10.14.0", "@carbon/icons": "^10.13.0", "@carbon/icons-react": "^10.13.0", diff --git a/src/components/ComponentDemo/Code/CodeBar.js b/src/components/ComponentDemo/Code/CodeBar.js index 871a661c07b..b1a3b2b91e0 100644 --- a/src/components/ComponentDemo/Code/CodeBar.js +++ b/src/components/ComponentDemo/Code/CodeBar.js @@ -20,18 +20,22 @@ const StorybookLink = ({ framework, url }) => ( const CodeBar = ({ src, code, links }) => { const sandboxUrl = useCodesandbox(code); const storybookLinks = Object.entries(links); + const shouldShowCopyButton = !src && code; return (
- - CodeSandbox - + {sandboxUrl && ( + + CodeSandbox + + )} {storybookLinks.map(([framework, url]) => ( ))}
- {src ? ( + + {src && ( { > - ) : ( + )} + + {shouldShowCopyButton && ( { diff --git a/src/components/ComponentDemo/Code/useCodesandbox.js b/src/components/ComponentDemo/Code/useCodesandbox.js index 153f6313b98..5921b814d80 100644 --- a/src/components/ComponentDemo/Code/useCodesandbox.js +++ b/src/components/ComponentDemo/Code/useCodesandbox.js @@ -23,6 +23,10 @@ const getIndex = ({ code = '' }) => { const useCodesandbox = (code) => { const { current: originalCode } = useRef(code); const url = useMemo(() => { + if (!originalCode) { + return null; + } + const indexContent = getIndex({ code: originalCode }); const parameters = getParameters({ diff --git a/src/components/data-visualization/AllDemos.js b/src/components/data-visualization/AllDemos.js new file mode 100644 index 00000000000..56374c6acd6 --- /dev/null +++ b/src/components/data-visualization/AllDemos.js @@ -0,0 +1,73 @@ +import React from 'react'; + +import * as ChartComponents from '@carbon/charts-react'; + +import H2 from 'gatsby-theme-carbon/src/components/markdown/H2'; +import CodeBar from '../ComponentDemo/Code/CodeBar.js'; + +import demoGroups from '../../data/data-visualization'; + +const generateHeadingID = (title) => + title + .split(' ') + .map((t) => t.toLowerCase()) + .join('-'); + +const AllDemos = () => ( + <> + {demoGroups.map((demoGroup) => ( + <> +

{demoGroup.title}

+ + {demoGroup.description && ( +
+
+

{demoGroup.description}

+
+
+ )} + + {demoGroup.demos.map((demo) => { + const DemoComponent = ChartComponents[demo.chartType.vanilla]; + return ( + <> + {demo.description && ( +
+
+

{demo.description}

+
+
+ )} +
+
+
+
+ +
+ +
+
+
+ + ); + })} + + ))} + +); + +export default AllDemos; diff --git a/src/data/charts/bar.js b/src/data/charts/bar.js deleted file mode 100644 index 956bab305fa..00000000000 --- a/src/data/charts/bar.js +++ /dev/null @@ -1,336 +0,0 @@ -export const groupedBarData = { - labels: ['Qty', 'More', 'Sold', 'Restocking', 'Misc'], - datasets: [ - { - label: 'Dataset 1', - data: [65000, -29123, -35213, 51213, 16932], - }, - { - label: 'Dataset 2', - data: [32432, -21312, -56456, -21312, 34234], - }, - { - label: 'Dataset 3', - data: [-12312, 23232, 34232, -12312, -34234], - }, - { - label: 'Dataset 4', - data: [-32423, 21313, 64353, 24134, 32423], - }, - ], -}; - -export const groupedBarOptions = { - title: 'Grouped bar (discrete)', - axes: { - left: { - primary: true, - }, - bottom: { - scaleType: 'labels', - secondary: true, - }, - }, -}; - -// Horizontal Grouped -export const groupedHorizontalBarData = groupedBarData; -export const groupedHorizontalBarOptions = { - title: 'Grouped horizontal bar (discrete)', - axes: { - left: { - scaleType: 'labels', - primary: true, - }, - bottom: { - secondary: true, - }, - }, -}; - -// Simple bar -export const simpleBarData = { - labels: ['Qty', 'More', 'Sold', 'Restocking', 'Misc'], - datasets: [ - { - label: 'Dataset 1', - data: [65000, 29123, 35213, 51213, 16932], - }, - ], -}; - -// Horizontal Simple -export const simpleHorizontalBarData = simpleBarData; -export const simpleHorizontalBarOptions = { - title: 'Simple horizontal bar (discrete)', - axes: { - left: { - primary: true, - scaleType: 'labels', - }, - bottom: { - secondary: true, - }, - }, -}; - -export const simpleBarOptions = { - title: 'Simple bar (discrete)', - axes: { - left: { - primary: true, - }, - bottom: { - scaleType: 'labels', - secondary: true, - }, - }, -}; - -export const simpleBarTimeSeriesData = { - labels: ['Qty', 'More', 'Sold', 'Restocking', 'Miscellaneous'], - datasets: [ - { - label: 'Dataset 1', - data: [ - { - date: new Date(2019, 0, 1), - value: 10000, - }, - { - date: new Date(2019, 0, 2), - value: 65000, - }, - { - date: new Date(2019, 0, 3), - value: 10000, - }, - { - date: new Date(2019, 0, 6), - value: 49213, - }, - { - date: new Date(2019, 0, 7), - value: 51213, - }, - ], - }, - ], -}; - -export const simpleBarTimeSeriesOptions = { - title: 'Simple bar (time series)', - axes: { - left: { - primary: true, - }, - bottom: { - scaleType: 'time', - secondary: true, - }, - }, -}; - -// Horizontal simple time series -export const simpleHorizontalBarTimeSeriesOptions = { - title: 'Simple horizontal bar (time series)', - axes: { - left: { - scaleType: 'time', - primary: true, - }, - bottom: { - secondary: true, - }, - }, -}; -export const simpleHorizontalBarTimeSeriesData = simpleBarTimeSeriesData; - -// Stacked bar -export const stackedBarData = { - labels: ['Qty', 'More', 'Sold', 'Restocking', 'Misc'], - datasets: [ - { - label: 'Dataset 1', - data: [65000, 29123, 35213, 51213, 16932], - }, - { - label: 'Dataset 2', - data: [32432, 21312, 56456, 21312, 34234], - }, - { - label: 'Dataset 3', - data: [12312, 23232, 34232, 12312, 34234], - }, - { - label: 'Dataset 4', - data: [32423, 21313, 64353, 24134, 32423], - }, - ], -}; - -// horizontal stacked bar -export const stackedHorizontalBarData = stackedBarData; -export const stackedHorizontalBarOptions = { - title: 'Stacked horizontal bar (discrete)', - axes: { - left: { - scaleType: 'labels', - primary: true, - }, - bottom: { - stacked: true, - secondary: true, - }, - }, -}; - -export const stackedBarOptions = { - title: 'Stacked bar (discrete)', - axes: { - left: { - primary: true, - stacked: true, - }, - bottom: { - scaleType: 'labels', - secondary: true, - }, - }, -}; - -export const stackedBarTimeSeriesData = { - labels: ['Qty', 'More', 'Sold', 'Restocking', 'Misc'], - datasets: [ - { - label: 'Dataset 1', - data: [ - { - date: new Date(2019, 0, 1), - value: 10000, - }, - { - date: new Date(2019, 0, 5), - value: 65000, - }, - { - date: new Date(2019, 0, 8), - value: 10000, - }, - { - date: new Date(2019, 0, 13), - value: 49213, - }, - { - date: new Date(2019, 0, 17), - value: 51213, - }, - ], - }, - { - label: 'Dataset 2', - data: [ - { - date: new Date(2019, 0, 3), - value: 75000, - }, - { - date: new Date(2019, 0, 6), - value: 57312, - }, - { - date: new Date(2019, 0, 8), - value: 21432, - }, - { - date: new Date(2019, 0, 15), - value: 70323, - }, - { - date: new Date(2019, 0, 19), - value: 21300, - }, - ], - }, - { - label: 'Dataset 3', - data: [ - { - date: new Date(2019, 0, 1), - value: 50000, - }, - { - date: new Date(2019, 0, 5), - value: 15000, - }, - { - date: new Date(2019, 0, 8), - value: 20000, - }, - { - date: new Date(2019, 0, 13), - value: 39213, - }, - { - date: new Date(2019, 0, 17), - value: 61213, - }, - ], - }, - { - label: 'Dataset 4', - data: [ - { - date: new Date(2019, 0, 2), - value: 10, - }, - { - date: new Date(2019, 0, 6), - value: 37312, - }, - { - date: new Date(2019, 0, 8), - value: 51432, - }, - { - date: new Date(2019, 0, 15), - value: 40323, - }, - { - date: new Date(2019, 0, 19), - value: 31300, - }, - ], - }, - ], -}; - -export const stackedBarTimeSeriesOptions = { - title: 'Stacked bar (time series)', - axes: { - left: { - primary: true, - stacked: true, - }, - bottom: { - scaleType: 'time', - secondary: true, - }, - }, -}; - -// Stacked horizontal bar (time series) -export const stackedHorizontalBarTimeSeriesOptions = { - title: 'Stacked horizontal bar (time series)', - axes: { - left: { - primary: true, - scaleType: 'time', - }, - bottom: { - stacked: true, - secondary: true, - }, - }, -}; -export const stackedHorizontalBarTimeSeriesData = stackedBarTimeSeriesData; diff --git a/src/data/charts/index.js b/src/data/charts/index.js deleted file mode 100644 index 5a39d31ef97..00000000000 --- a/src/data/charts/index.js +++ /dev/null @@ -1,8 +0,0 @@ -export * from './bar'; -export * from './pie-donut'; -export * from './line'; - -export const addHeightToOptions = (options) => ({ - ...options, - height: '400px', -}); diff --git a/src/data/charts/line.js b/src/data/charts/line.js deleted file mode 100644 index 8833e8a33e5..00000000000 --- a/src/data/charts/line.js +++ /dev/null @@ -1,241 +0,0 @@ -export const lineTimeSeriesData = { - labels: ['Qty', 'More', 'Sold', 'Restocking', 'Misc'], - datasets: [ - { - label: 'Dataset 1', - data: [ - { - date: new Date(2019, 0, 1), - value: 10000, - }, - { - date: new Date(2019, 0, 5), - value: 65000, - }, - { - date: new Date(2019, 0, 8), - value: 10000, - }, - { - date: new Date(2019, 0, 13), - value: 49213, - }, - { - date: new Date(2019, 0, 17), - value: 51213, - }, - ], - }, - { - label: 'Dataset 2', - data: [ - { - date: new Date(2019, 0, 2), - value: 0, - }, - { - date: new Date(2019, 0, 6), - value: 57312, - }, - { - date: new Date(2019, 0, 8), - value: 21432, - }, - { - date: new Date(2019, 0, 15), - value: 70323, - }, - { - date: new Date(2019, 0, 19), - value: 21300, - }, - ], - }, - { - label: 'Dataset 3', - data: [ - { - date: new Date(2019, 0, 1), - value: 50000, - }, - { - date: new Date(2019, 0, 5), - value: 15000, - }, - { - date: new Date(2019, 0, 8), - value: 20000, - }, - { - date: new Date(2019, 0, 13), - value: 39213, - }, - { - date: new Date(2019, 0, 17), - value: 61213, - }, - ], - }, - { - label: 'Dataset 4', - data: [ - { - date: new Date(2019, 0, 2), - value: 10, - }, - { - date: new Date(2019, 0, 6), - value: 37312, - }, - { - date: new Date(2019, 0, 8), - value: 51432, - }, - { - date: new Date(2019, 0, 15), - value: 40323, - }, - { - date: new Date(2019, 0, 19), - value: 31300, - }, - ], - }, - ], -}; - -export const lineTimeSeriesOptions = { - title: 'Line (time series)', - axes: { - left: { - secondary: true, - }, - bottom: { - scaleType: 'time', - primary: true, - }, - }, - curve: 'curveMonotoneX', -}; - -export const lineData = { - labels: ['Qty', 'More', 'Sold', 'Restocking', 'Misc'], - datasets: [ - { - label: 'Dataset 1', - data: [32100, 23500, 53100, 42300, 12300], - }, - { - label: 'Dataset 2', - data: [34200, 53200, 42300, 21400, 0], - }, - { - label: 'Dataset 3 long name', - data: [41200, 23400, 34210, 1400, 42100], - }, - { - label: 'Dataset 4 long name', - data: [22000, 1200, 9000, 24000, 3000], - }, - { - label: 'Dataset 5 long name', - data: [2412, 30000, 10000, 5000, 31000], - }, - { - label: 'Dataset 6 long name', - data: [0, 20000, 40000, 60000, 80000], - }, - ], -}; - -export const lineOptions = { - title: 'Line (discrete)', - axes: { - bottom: { - title: '2018 Annual Sales Figures', - scaleType: 'labels', - secondary: true, - }, - left: { - primary: true, - }, - }, -}; - -// Step -export const stepOptions = { - ...lineOptions, - title: 'Step (discrete)', - curve: 'curveStepAfter', -}; - -export const stepData = lineData; - -export const stepTimeSeriesOptions = { - ...lineTimeSeriesOptions, - title: 'Step (time series)', - curve: 'curveStepAfter', -}; - -export const stepTimeSeriesData = lineTimeSeriesData; - -// Scatter -export const scatterData = { - labels: ['Qty', 'More', 'Sold', 'Restocking', 'Misc'], - datasets: [ - { - label: 'Dataset 1', - data: [32100, 23500, 53100, 42300, 12300], - }, - { - label: 'Dataset 2', - data: [34200, 53200, 42300, 21400, 0], - }, - { - label: 'Dataset 3 long name', - data: [41200, 23400, 34210, 1400, 42100], - }, - { - label: 'Dataset 4 long name', - data: [22000, 1200, 9000, 24000, 3000], - }, - { - label: 'Dataset 5 long name', - data: [2412, 30000, 10000, 5000, 31000], - }, - { - label: 'Dataset 6 long name', - data: [0, 20000, 40000, 60000, 80000], - }, - ], -}; - -export const scatterOptions = { - title: 'Scatter (discrete)', - axes: { - bottom: { - title: '2018 Annual Sales Figures', - scaleType: 'labels', - secondary: true, - }, - left: { - primary: true, - }, - }, -}; - -export const scatterTimeSeriesData = lineTimeSeriesData; - -export const scatterTimeSeriesOptions = { - title: 'Scatter (time series)', - axes: { - bottom: { - title: '2019 Annual Sales Figures', - scaleType: 'time', - secondary: true, - }, - left: { - primary: true, - }, - }, -}; diff --git a/src/data/charts/pie-donut.js b/src/data/charts/pie-donut.js deleted file mode 100644 index 704e6f6bd6f..00000000000 --- a/src/data/charts/pie-donut.js +++ /dev/null @@ -1,40 +0,0 @@ -import { defaultColors } from '@carbon/charts'; - -export const pieData = { - labels: [ - '2V2N 9KYPM version 1', - 'L22I P66EP L22I P66EP L22I P66EP', - 'JQAI 2M4L1', - 'J9DZ F37AP', - 'YEL48 Q6XK YEL48', - 'P66EP L22I L22I', - ], - datasets: [ - { - label: 'Dataset 1', - backgroundColors: defaultColors, - data: [75000, 65000, 10000, 25000, 1200, 20000], - }, - ], -}; - -export const pieOptions = { - title: 'Pie', - accessibility: false, - legendClickable: true, - resizable: true, -}; - -export const donutData = pieData; - -export const donutOptions = { - title: 'Donut', - accessibility: false, - legendClickable: true, - resizable: true, - donut: { - center: { - label: 'Browsers', - }, - }, -}; diff --git a/src/data/data-visualization/index.js b/src/data/data-visualization/index.js new file mode 100644 index 00000000000..861a1a76ba6 --- /dev/null +++ b/src/data/data-visualization/index.js @@ -0,0 +1,21 @@ +import { demoGroups as dG } from '@carbon/charts/demo/data'; + +// Merge all demoGroups with matching names +const demoGroups = []; +dG.forEach((demoGroup) => { + const demoGroupTitle = demoGroup.title; + const demoGroupExistingIndex = demoGroups.findIndex( + (dg) => dg.title === demoGroupTitle + ); + + if (demoGroupExistingIndex === -1) { + demoGroups.push(demoGroup); + } else { + const existingDemos = demoGroups[demoGroupExistingIndex].demos; + demoGroups[demoGroupExistingIndex].demos = existingDemos.concat( + demoGroup.demos + ); + } +}); + +export default demoGroups; diff --git a/src/pages/data-visualization/basic-charts/index.mdx b/src/pages/data-visualization/basic-charts/index.mdx index 1911b145c0e..dc5770d765b 100755 --- a/src/pages/data-visualization/basic-charts/index.mdx +++ b/src/pages/data-visualization/basic-charts/index.mdx @@ -11,244 +11,57 @@ Basic charts offer a way to visualize data sets in an intuitive, easy to underst import "@carbon/charts/styles.css"; -import { - SimpleBarChart, - GroupedBarChart, - StackedBarChart, - PieChart, - DonutChart, - LineChart, - ScatterChart, -} from "@carbon/charts-react"; - -import { - addHeightToOptions, - // Bar - groupedBarOptions, - groupedBarData, - groupedHorizontalBarOptions, - groupedHorizontalBarData, - simpleBarOptions, - simpleBarData, - simpleHorizontalBarOptions, - simpleHorizontalBarData, - simpleBarTimeSeriesOptions, - simpleBarTimeSeriesData, - simpleHorizontalBarTimeSeriesOptions, - simpleHorizontalBarTimeSeriesData, - stackedBarOptions, - stackedBarData, - stackedHorizontalBarOptions, - stackedHorizontalBarData, - stackedBarTimeSeriesOptions, - stackedBarTimeSeriesData, - stackedHorizontalBarTimeSeriesOptions, - stackedHorizontalBarTimeSeriesData, - // Pie & donut - pieOptions, - pieData, - donutOptions, - donutData, - // Line - lineTimeSeriesOptions, - lineTimeSeriesData, - lineData, - lineOptions, - // Step - stepOptions, - stepData, - stepTimeSeriesOptions, - stepTimeSeriesData, - // Scatter - scatterTimeSeriesOptions, - scatterTimeSeriesData, - scatterOptions, - scatterData, -} from "../../../data/charts/index"; +import demoGroups from "../../../data/data-visualization"; - +import { AnchorLinks, AnchorLink } from "gatsby-theme-carbon"; +import AllDemos from "../../../components/data-visualization/AllDemos.js"; -Bar chart -Line chart -Area chart -Polar charts -Scatter plots -Meter and gauge + + { + demoGroups.map(storybookDemoGroup => ( + {storybookDemoGroup.title} + )) + } + Design-only -## Bar chart - -### Default - -Bar charts use vertical or horizontal data markers to compare individual values. You can use them to compare discrete data or show trends over time. - - - - - -### Grouped bar chart - -A grouped bar chart, also known as a clustered bar graph, multi-set bar chart, or grouped column chart, is a type of bar graph that is used to compare values across multiple categories. - - - -### Stacked bar - -Stacked bar charts are useful for comparing proportional contributions within a category. They plot the relative value that each data series contributes to the total. - - - - - -### Horizontal bar - -### Default - -Bar charts use vertical or horizontal data markers to compare individual values. You can use them to compare discrete data or show trends over time. - - - - - -### Grouped bar chart - -A grouped bar chart, also known as a clustered bar graph, multi-set bar chart, or grouped column chart, is a type of bar graph that is used to compare values across multiple categories. - - - -### Stacked bar - -Stacked bar charts are useful for comparing proportional contributions within a category. They plot the relative value that each data series contributes to the total. - - - - - -## Line chart - -### Default - -Line charts plot data at regular intervals connected by lines. You can use line visualizations to show trends over time and compare several data sets. - - - - - -### Stepped line chart - -Stepped line charts plot data at regular intervals, forming a series of steps between data points. You can use line visualizations to show trends over time and compare several data sets. - - - -### Curved line chart - - - -## Area chart - -### Default - -Area charts are similar to line charts, but the areas below the lines are filled with colors or patterns. Stacked charts are useful for comparing proportional contributions within a category. They plot the relative value that each data series contributes to the total. - - - - -![Horizontal bar chart](images/charts-basic-area.png) - - +## Resources + + + + + + + -### Stacked area chart + -Stacked area charts are useful for comparing proportional contributions within a category. They plot the relative value that each data series contributes to the total. +## Design-only -Note: This chart is currently a work-in-progress. To see our roadmap, request missing guidance, or contribute content, please go to the carbon-charts [GitHub repository](https://github.com/carbon-design-system/carbon-charts). +Note: These charts are currently a work-in-progress. To see our roadmap, request missing guidance, or contribute content, please go to the carbon-charts [GitHub repository](https://github.com/carbon-design-system/carbon-charts). - - - -![Horizontal bar chart](images/charts-basic-areastacked.png) - - - - -## Polar charts - -### Pie - - - -### Donut - - - -## Scatter plots - -### Default - -Scatter plot visualizations use data points to plot two measures anywhere along a scale, not only at regular tick marks. You can use scatter plots to explore correlations between different measures. - - - - - -### Bubble chart +### Stacked area chart -Bubble charts use data points and bubbles to plot measures anywhere along a scale. One measure is plotted along each axis. The size of the bubble represents the third measure. You can use bubble charts to represent financial data or any data where measured values are related. +Stacked area charts are useful for comparing proportional contributions within a category. They plot the relative value that each data series contributes to the total. -![Horizontal bar chart](images/charts-basic-bubble.png) +![Horizontal bar chart](images/charts-basic-areastacked.png) -## Meter and gauge +### Meter and gauge diff --git a/src/pages/data-visualization/chart-types/images/radar.svg b/src/pages/data-visualization/chart-types/images/radar.svg index 4812f81ad03..9e501ec2a37 100644 --- a/src/pages/data-visualization/chart-types/images/radar.svg +++ b/src/pages/data-visualization/chart-types/images/radar.svg @@ -4,11 +4,7 @@ radar copy Created with Sketch. - - - - diff --git a/src/pages/data-visualization/chart-types/index.mdx b/src/pages/data-visualization/chart-types/index.mdx index 54ffc1d7ce5..3d89fc9c773 100644 --- a/src/pages/data-visualization/chart-types/index.mdx +++ b/src/pages/data-visualization/chart-types/index.mdx @@ -16,51 +16,51 @@ Start by identifying the purpose of the visualization and choose a chart type ap -![](images/bar.svg) +![Simple bar (vertical)](images/bar.svg) -![](images/bargrouped.svg) +![Grouped bar (vertical)](images/bargrouped.svg) -![](images/bubble.svg) +![Bubble](images/bubble.svg) -![](images/radar.svg) +![Radar](images/radar.svg) -![](images/barhoriz.svg) +![Simple bar (horizontal)](images/barhoriz.svg) @@ -71,42 +71,41 @@ Start by identifying the purpose of the visualization and choose a chart type ap -![](images/line.svg) +![Line](images/line.svg) -![](images/area.svg) +![Area](images/area.svg) -![](images/histogram.svg) +![Histogram](images/histogram.svg) -![](images/stream.svg) +![Stream](images/stream.svg) @@ -117,42 +116,42 @@ Start by identifying the purpose of the visualization and choose a chart type ap -![](images/donut.svg) +![Donut](images/donut.svg) -![](images/barstack.svg) +![Pie](images/donut.svg) -![](images/areastack.svg) +![Stacked bar (vertical)](images/barstack.svg) - + -![](images/treemap.svg) +![Stacked area](images/areastack.svg) @@ -163,7 +162,17 @@ Start by identifying the purpose of the visualization and choose a chart type ap tag="Design only" > -![](images/gauge.svg) +![Meter / gauge](images/gauge.svg) + + + + + + +![Tree map](images/treemap.svg) @@ -174,11 +183,11 @@ Start by identifying the purpose of the visualization and choose a chart type ap -![](images/scatter.svg) +![Scatter](images/scatter.svg) @@ -188,7 +197,7 @@ Start by identifying the purpose of the visualization and choose a chart type ap disabled > -![](images/heatmap.svg) +![Heat map](images/heatmap.svg) @@ -198,7 +207,7 @@ Start by identifying the purpose of the visualization and choose a chart type ap disabled > -![](images/parallel.svg) +![Parallel coordinates](images/parallel.svg) @@ -214,7 +223,7 @@ Start by identifying the purpose of the visualization and choose a chart type ap tag="Design only" > -![](images/alluvial.svg) +![Alluvial diagram](images/alluvial.svg) @@ -225,7 +234,7 @@ Start by identifying the purpose of the visualization and choose a chart type ap tag="Design only" > -![](images/treediagram.svg) +![Tree diagram](images/treediagram.svg) @@ -241,7 +250,7 @@ Start by identifying the purpose of the visualization and choose a chart type ap tag="Design only" > -![](images/geo-choropleth.svg) +![Choropleth map](images/geo-choropleth.svg) @@ -252,7 +261,7 @@ Start by identifying the purpose of the visualization and choose a chart type ap tag="Design only" > -![](images/geo-proportion.svg) +![Proportional symbol](images/geo-proportion.svg) @@ -263,7 +272,7 @@ Start by identifying the purpose of the visualization and choose a chart type ap tag="Design only" > -![](images/geo-connection.svg) +![Connecting lines](images/geo-connection.svg) diff --git a/src/pages/data-visualization/data-visualization.scss b/src/pages/data-visualization/data-visualization.scss index 9d7b5415384..dfa7641747b 100644 --- a/src/pages/data-visualization/data-visualization.scss +++ b/src/pages/data-visualization/data-visualization.scss @@ -1,12 +1,15 @@ -div.chart-holder { +div.chart-demo-wrapper { background: $carbon--white-0; - padding: rem(30px); + margin-bottom: rem(60px); - @include carbon--breakpoint("md") { - width: 75% !important; + div.chart-demo { + padding: rem(30px); } +} - @include carbon--breakpoint("lg") { - width: 66.667% !important; - } +.dataviz-copy { + font-size: 1rem; + font-weight: 400; + line-height: 1.5rem; + letter-spacing: 0; } diff --git a/yarn.lock b/yarn.lock index 07fbb5dc138..a2f10bdd17a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1139,25 +1139,29 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" -"@carbon/charts-react@^0.28.1": - version "0.28.1" - resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.28.1.tgz#0a64702d4cd9df753d94f1505966faedcfcb9d04" - integrity sha512-+gR8quh32slJU725S20HnRAk4nZqrzynaYA4r50npwaf7NxabuueHTWx6WLtFIRNoGfJyUSkN5gdVae5oCtrmA== +"@carbon/charts-react@^0.32.8": + version "0.32.8" + resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.32.8.tgz#1cfde4bbdedd0b48d8f5f1d9157a1497e0000203" + integrity sha512-A8IAjlvBCCkvIT70TFYyi5wcuruhkGbZMJBju6QkzviAk63Oi2ZF9nkpdIY2YbeOKGoVOymmYyjSuueAXCf6Jg== dependencies: - "@carbon/charts" "^0.28.1" + "@carbon/charts" "^0.32.8" -"@carbon/charts@^0.28.1": - version "0.28.1" - resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.28.1.tgz#8fe6e3b22e82f211693c18e17a6551d7fae35215" - integrity sha512-ZA3mdrO+ccqMhx8tx9LNJAEh8OzgSqv0Yk2Ax7v8L7kRb94CQ0p2VWlCDINm2btQ3Y6GdK3CMy8eLN0Gh1fNPg== +"@carbon/charts@^0.32.8": + version "0.32.8" + resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.32.8.tgz#f191c8b5136c15774b64e6e80cf9cf1d336a4c4a" + integrity sha512-KQDmf+4aD4Mm4++gbm6lYkQYqCOO6GkqexeIcAFtyh8C/geq25f2xJZ0kOlrrilskcDUD0GbEOwyO7XB3oLJFQ== dependencies: + "@carbon/colors" "10.4.0" "@carbon/utils-position" "1.1.1" - babel-polyfill "6.26.0" - carbon-components "10.5.0" date-fns "2.8.1" lodash-es "4.17.15" resize-observer-polyfill "1.5.0" +"@carbon/colors@10.4.0": + version "10.4.0" + resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-10.4.0.tgz#8c21127926bc389dcb4d415b55d4eae278f3d525" + integrity sha512-UERU07hWXAjsaWu6JPJDyJnwVLkJr+8wTvFrbCkubCfl/MZjKoyLgz0CNypu8hSg8ZaDUzl/NfXMgRpprzuSjQ== + "@carbon/colors@^10.10.0": version "10.10.0" resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-10.10.0.tgz#f75b7e70327b5b756faa908444aae5ac2bd5f1cf" @@ -3669,15 +3673,6 @@ babel-plugin-transform-react-remove-prop-types@^0.4.24: resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a" integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA== -babel-polyfill@6.26.0: - version "6.26.0" - resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153" - integrity sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM= - dependencies: - babel-runtime "^6.26.0" - core-js "^2.5.0" - regenerator-runtime "^0.10.5" - babel-preset-fbjs@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/babel-preset-fbjs/-/babel-preset-fbjs-3.3.0.tgz#a6024764ea86c8e06a22d794ca8b69534d263541" @@ -5340,7 +5335,7 @@ core-js-pure@^3.0.0: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813" integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA== -core-js@2, core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0, core-js@^2.6.11, core-js@^2.6.5: +core-js@2, core-js@^2.4.0, core-js@^2.4.1, core-js@^2.6.11, core-js@^2.6.5: version "2.6.11" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c" integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg== @@ -14789,11 +14784,6 @@ regenerate@^1.4.0: resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.1.tgz#cad92ad8e6b591773485fbe05a485caf4f457e6f" integrity sha512-j2+C8+NtXQgEKWk49MMP5P/u2GhnahTtVkRIHr5R5lVRlbKvmQ+oS+A5aLKWp2ma5VkT8sh6v+v4hbH0YHR66A== -regenerator-runtime@^0.10.5: - version "0.10.5" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658" - integrity sha1-M2w+/BIgrc7dosn6tntaeVWjNlg= - regenerator-runtime@^0.11.0: version "0.11.1" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"