From 1877cfa91fe35bae602b15146fe7e5593064a92d Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Mon, 12 Apr 2021 20:08:15 -0400 Subject: [PATCH 1/5] update dataviz demo pages --- package.json | 3 +- src/components/data-visualization/AllDemos.js | 72 -------------- .../data-visualization/ChartDemoGroup.js | 94 ++++++++++++++++++ src/data/data-visualization/index.js | 29 ++---- src/data/nav-items.yaml | 8 +- src/images/storybook-icon.svg | 15 +++ .../data-visualization/chart-types/index.mdx | 49 +++++---- .../images/01_adv_alluvial_928.png | Bin .../images/02_adv_alluvial_detail_288.png | Bin .../images/03_adv_alluvial_288.png | Bin .../images/04_adv_heatmap_928.png | Bin .../images/04a_adv_heatmap_detail_288.png | Bin .../images/04b_adv_heatmap_detail_288.png | Bin .../images/05_adv_heatmap_928.png | Bin .../images/06_adv_tree_928.png | Bin .../images/07_adv_tree_detail_288.png | Bin .../images/08_adv_tree_detail_288.png | Bin .../images/09_adv_geo_choropleth_928.png | Bin .../images/10_adv_geo_prop_sym_928.png | Bin .../images/11_adv_geo_connections_928.png | Bin .../images/12_adv_geo_cartogram_928.png | Bin .../images/12a_adv_cartogram_448.png | Bin .../images/12b_adv_cartogram_448.png | Bin .../images/13_adv_geo_dorling_a_448.png | Bin .../images/14_adv_geo_dorling_b_448.png | Bin .../images/15_adv_geo_mapbox_a_928.png | Bin .../images/16_adv_geo_mapbox_b_288.png | Bin .../images/17_adv_geo_mapbox_c_288.png | Bin .../images/18_adv_geo_mapbox_d_288.png | Bin .../images/c.png | Bin .../images/charts-adv-alluvial.png | Bin .../images/charts-adv-choropleth.png | Bin .../images/charts-adv-connecting.png | Bin .../images/charts-adv-heatmap.png | Bin .../images/charts-adv-proportion.png | Bin .../images/charts-adv-treediagram.png | Bin .../images/mapbox.svg | 0 .../images/new_adv_parallel_928 2.png | Bin .../images/new_adv_parallel_928.png | Bin .../images/new_adv_parallel_detail_01_288.png | Bin .../images/new_adv_parallel_detail_02_288.png | Bin .../images/new_adv_treemap_01_928.png | Bin .../images/new_adv_treemap_02_928.png | Bin .../images/new_adv_treemap_a_288.png | Bin .../images/new_adv_treemap_b_288.png | Bin .../index.mdx | 53 +++++----- .../images/charts-basic-area.png | Bin .../images/charts-basic-areastacked.png | Bin .../images/charts-basic-bubble.png | Bin .../images/charts-basic-gauge.png | Bin .../images/charts-basic-horizontalbar.png | Bin .../images/charts-basic-meter.png | Bin .../{basic-charts => simple-charts}/index.mdx | 20 ++-- yarn.lock | 40 +++++--- 54 files changed, 212 insertions(+), 171 deletions(-) delete mode 100644 src/components/data-visualization/AllDemos.js create mode 100644 src/components/data-visualization/ChartDemoGroup.js create mode 100644 src/images/storybook-icon.svg rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/01_adv_alluvial_928.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/02_adv_alluvial_detail_288.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/03_adv_alluvial_288.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/04_adv_heatmap_928.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/04a_adv_heatmap_detail_288.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/04b_adv_heatmap_detail_288.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/05_adv_heatmap_928.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/06_adv_tree_928.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/07_adv_tree_detail_288.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/08_adv_tree_detail_288.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/09_adv_geo_choropleth_928.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/10_adv_geo_prop_sym_928.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/11_adv_geo_connections_928.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/12_adv_geo_cartogram_928.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/12a_adv_cartogram_448.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/12b_adv_cartogram_448.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/13_adv_geo_dorling_a_448.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/14_adv_geo_dorling_b_448.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/15_adv_geo_mapbox_a_928.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/16_adv_geo_mapbox_b_288.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/17_adv_geo_mapbox_c_288.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/18_adv_geo_mapbox_d_288.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/c.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/charts-adv-alluvial.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/charts-adv-choropleth.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/charts-adv-connecting.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/charts-adv-heatmap.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/charts-adv-proportion.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/charts-adv-treediagram.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/mapbox.svg (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/new_adv_parallel_928 2.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/new_adv_parallel_928.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/new_adv_parallel_detail_01_288.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/new_adv_parallel_detail_02_288.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/new_adv_treemap_01_928.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/new_adv_treemap_02_928.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/new_adv_treemap_a_288.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/images/new_adv_treemap_b_288.png (100%) rename src/pages/data-visualization/{advanced-charts => complex-charts}/index.mdx (91%) rename src/pages/data-visualization/{basic-charts => simple-charts}/images/charts-basic-area.png (100%) rename src/pages/data-visualization/{basic-charts => simple-charts}/images/charts-basic-areastacked.png (100%) rename src/pages/data-visualization/{basic-charts => simple-charts}/images/charts-basic-bubble.png (100%) rename src/pages/data-visualization/{basic-charts => simple-charts}/images/charts-basic-gauge.png (100%) rename src/pages/data-visualization/{basic-charts => simple-charts}/images/charts-basic-horizontalbar.png (100%) rename src/pages/data-visualization/{basic-charts => simple-charts}/images/charts-basic-meter.png (100%) rename src/pages/data-visualization/{basic-charts => simple-charts}/index.mdx (52%) diff --git a/package.json b/package.json index aa4c8c5a4d0..318fb031209 100644 --- a/package.json +++ b/package.json @@ -45,8 +45,7 @@ "gatsby-remark-images": "^3.3.33" }, "dependencies": { - "@carbon/charts": "0.34.11", - "@carbon/charts-react": "0.34.11", + "@carbon/charts-react": "0.41.53", "@carbon/elements": "^10.32.0", "@carbon/icons": "^10.30.0", "@carbon/icons-react": "^10.30.0", diff --git a/src/components/data-visualization/AllDemos.js b/src/components/data-visualization/AllDemos.js deleted file mode 100644 index 6768ab57b0c..00000000000 --- a/src/components/data-visualization/AllDemos.js +++ /dev/null @@ -1,72 +0,0 @@ -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/components/data-visualization/ChartDemoGroup.js b/src/components/data-visualization/ChartDemoGroup.js new file mode 100644 index 00000000000..b06500cc920 --- /dev/null +++ b/src/components/data-visualization/ChartDemoGroup.js @@ -0,0 +1,94 @@ +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 { + CardGroup, + MiniCard, +} from 'gatsby-theme-carbon/src/components/MiniCard'; + +import STORYBOOK_LOGO from '../../images/storybook-icon.svg'; + +const generateHeadingID = (title) => + title + .split(' ') + .map((t) => t.toLowerCase()) + .join('-'); + +const ChartDemoGroup = ({ demoGroup, light }) => { + let demo = demoGroup.demos.find((d) => d.mainDemo === true); + if (!demo) { + demo = demoGroup.demos[0]; + } + + const DemoComponent = ChartComponents[demo.chartType.vanilla]; + + const numberOfRemainingDemos = + demoGroup.demos.length > 2 ? demoGroup.demos.length - 1 : 0; + + return ( + <> + {light !== true &&

{demoGroup.title}

} + + {light !== true && demoGroup.description && ( +
+
+

{demoGroup.description}

+
+
+ )} + + <> + {light !== true && demo.description && ( +
+
+

{demo.description}

+
+
+ )} + +
+
+
+
+ +
+ +
+
+
+ + {numberOfRemainingDemos > 0 && ( + 1 ? 's' : '' + }`} + href={`https://carbon-design-system.github.io/carbon-charts/?path=/story/${demoGroup.type.replace( + '-chart', + '' + )}-charts-${demo.id}`}> + + + )} + + + ); +}; + +export default ChartDemoGroup; diff --git a/src/data/data-visualization/index.js b/src/data/data-visualization/index.js index 861a1a76ba6..561e521d140 100644 --- a/src/data/data-visualization/index.js +++ b/src/data/data-visualization/index.js @@ -1,21 +1,14 @@ -import { demoGroups as dG } from '@carbon/charts/demo/data'; +import { storybookDemoGroups } 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 - ); +export const simpleChartDemoGroups = storybookDemoGroups.filter( + (demoGroup) => demoGroup.type === 'simple-chart' +); - if (demoGroupExistingIndex === -1) { - demoGroups.push(demoGroup); - } else { - const existingDemos = demoGroups[demoGroupExistingIndex].demos; - demoGroups[demoGroupExistingIndex].demos = existingDemos.concat( - demoGroup.demos - ); - } -}); +export const complexChartDemoGroups = storybookDemoGroups.filter( + (demoGroup) => demoGroup.type === 'complex-chart' +); -export default demoGroups; +export const getDemoGroupByTitle = (title) => + storybookDemoGroups.find( + (demoGroup) => demoGroup.title.toLowerCase() === title.toLowerCase() + ); diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml index 6c03aa88557..fcf8e5ccd9a 100644 --- a/src/data/nav-items.yaml +++ b/src/data/nav-items.yaml @@ -213,10 +213,10 @@ path: /data-visualization/chart-types/ - title: Chart anatomy path: /data-visualization/chart-anatomy/ - - title: Basic charts - path: /data-visualization/basic-charts/ - - title: Advanced charts - path: /data-visualization/advanced-charts/ + - title: Simple charts + path: /data-visualization/simple-charts/ + - title: Complex charts + path: /data-visualization/complex-charts/ - title: Color palettes path: /data-visualization/color-palettes/ - title: Axes and labels diff --git a/src/images/storybook-icon.svg b/src/images/storybook-icon.svg new file mode 100644 index 00000000000..6295b911b95 --- /dev/null +++ b/src/images/storybook-icon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/pages/data-visualization/chart-types/index.mdx b/src/pages/data-visualization/chart-types/index.mdx index caa8f143012..430d7a218de 100644 --- a/src/pages/data-visualization/chart-types/index.mdx +++ b/src/pages/data-visualization/chart-types/index.mdx @@ -18,7 +18,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/bar.svg) @@ -28,7 +28,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/bargrouped.svg) @@ -38,7 +38,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/bubble.svg) @@ -48,7 +48,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/radar.svg) @@ -58,7 +58,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/barhoriz.svg) @@ -68,7 +68,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/grouped-bar-horizontal.svg) @@ -83,7 +83,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/line.svg) @@ -93,7 +93,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/area.svg) @@ -128,7 +128,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/donut.svg) @@ -138,7 +138,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/pie.svg) @@ -149,7 +149,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/stacked-bar-horizontal.svg) @@ -159,7 +159,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/barstack.svg) @@ -169,7 +169,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/areastack.svg) @@ -179,7 +179,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/meter.svg) @@ -190,7 +190,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/gauge.svg) @@ -201,8 +201,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/treemap.svg) @@ -217,7 +216,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/scatter.svg) @@ -227,7 +226,7 @@ appropriate chart type. @@ -238,7 +237,7 @@ appropriate chart type. @@ -254,7 +253,7 @@ appropriate chart type. @@ -265,7 +264,7 @@ appropriate chart type. @@ -281,7 +280,7 @@ appropriate chart type. @@ -292,7 +291,7 @@ appropriate chart type. @@ -303,7 +302,7 @@ appropriate chart type. diff --git a/src/pages/data-visualization/advanced-charts/images/01_adv_alluvial_928.png b/src/pages/data-visualization/complex-charts/images/01_adv_alluvial_928.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/01_adv_alluvial_928.png rename to src/pages/data-visualization/complex-charts/images/01_adv_alluvial_928.png diff --git a/src/pages/data-visualization/advanced-charts/images/02_adv_alluvial_detail_288.png b/src/pages/data-visualization/complex-charts/images/02_adv_alluvial_detail_288.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/02_adv_alluvial_detail_288.png rename to src/pages/data-visualization/complex-charts/images/02_adv_alluvial_detail_288.png diff --git a/src/pages/data-visualization/advanced-charts/images/03_adv_alluvial_288.png b/src/pages/data-visualization/complex-charts/images/03_adv_alluvial_288.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/03_adv_alluvial_288.png rename to src/pages/data-visualization/complex-charts/images/03_adv_alluvial_288.png diff --git a/src/pages/data-visualization/advanced-charts/images/04_adv_heatmap_928.png b/src/pages/data-visualization/complex-charts/images/04_adv_heatmap_928.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/04_adv_heatmap_928.png rename to src/pages/data-visualization/complex-charts/images/04_adv_heatmap_928.png diff --git a/src/pages/data-visualization/advanced-charts/images/04a_adv_heatmap_detail_288.png b/src/pages/data-visualization/complex-charts/images/04a_adv_heatmap_detail_288.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/04a_adv_heatmap_detail_288.png rename to src/pages/data-visualization/complex-charts/images/04a_adv_heatmap_detail_288.png diff --git a/src/pages/data-visualization/advanced-charts/images/04b_adv_heatmap_detail_288.png b/src/pages/data-visualization/complex-charts/images/04b_adv_heatmap_detail_288.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/04b_adv_heatmap_detail_288.png rename to src/pages/data-visualization/complex-charts/images/04b_adv_heatmap_detail_288.png diff --git a/src/pages/data-visualization/advanced-charts/images/05_adv_heatmap_928.png b/src/pages/data-visualization/complex-charts/images/05_adv_heatmap_928.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/05_adv_heatmap_928.png rename to src/pages/data-visualization/complex-charts/images/05_adv_heatmap_928.png diff --git a/src/pages/data-visualization/advanced-charts/images/06_adv_tree_928.png b/src/pages/data-visualization/complex-charts/images/06_adv_tree_928.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/06_adv_tree_928.png rename to src/pages/data-visualization/complex-charts/images/06_adv_tree_928.png diff --git a/src/pages/data-visualization/advanced-charts/images/07_adv_tree_detail_288.png b/src/pages/data-visualization/complex-charts/images/07_adv_tree_detail_288.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/07_adv_tree_detail_288.png rename to src/pages/data-visualization/complex-charts/images/07_adv_tree_detail_288.png diff --git a/src/pages/data-visualization/advanced-charts/images/08_adv_tree_detail_288.png b/src/pages/data-visualization/complex-charts/images/08_adv_tree_detail_288.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/08_adv_tree_detail_288.png rename to src/pages/data-visualization/complex-charts/images/08_adv_tree_detail_288.png diff --git a/src/pages/data-visualization/advanced-charts/images/09_adv_geo_choropleth_928.png b/src/pages/data-visualization/complex-charts/images/09_adv_geo_choropleth_928.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/09_adv_geo_choropleth_928.png rename to src/pages/data-visualization/complex-charts/images/09_adv_geo_choropleth_928.png diff --git a/src/pages/data-visualization/advanced-charts/images/10_adv_geo_prop_sym_928.png b/src/pages/data-visualization/complex-charts/images/10_adv_geo_prop_sym_928.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/10_adv_geo_prop_sym_928.png rename to src/pages/data-visualization/complex-charts/images/10_adv_geo_prop_sym_928.png diff --git a/src/pages/data-visualization/advanced-charts/images/11_adv_geo_connections_928.png b/src/pages/data-visualization/complex-charts/images/11_adv_geo_connections_928.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/11_adv_geo_connections_928.png rename to src/pages/data-visualization/complex-charts/images/11_adv_geo_connections_928.png diff --git a/src/pages/data-visualization/advanced-charts/images/12_adv_geo_cartogram_928.png b/src/pages/data-visualization/complex-charts/images/12_adv_geo_cartogram_928.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/12_adv_geo_cartogram_928.png rename to src/pages/data-visualization/complex-charts/images/12_adv_geo_cartogram_928.png diff --git a/src/pages/data-visualization/advanced-charts/images/12a_adv_cartogram_448.png b/src/pages/data-visualization/complex-charts/images/12a_adv_cartogram_448.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/12a_adv_cartogram_448.png rename to src/pages/data-visualization/complex-charts/images/12a_adv_cartogram_448.png diff --git a/src/pages/data-visualization/advanced-charts/images/12b_adv_cartogram_448.png b/src/pages/data-visualization/complex-charts/images/12b_adv_cartogram_448.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/12b_adv_cartogram_448.png rename to src/pages/data-visualization/complex-charts/images/12b_adv_cartogram_448.png diff --git a/src/pages/data-visualization/advanced-charts/images/13_adv_geo_dorling_a_448.png b/src/pages/data-visualization/complex-charts/images/13_adv_geo_dorling_a_448.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/13_adv_geo_dorling_a_448.png rename to src/pages/data-visualization/complex-charts/images/13_adv_geo_dorling_a_448.png diff --git a/src/pages/data-visualization/advanced-charts/images/14_adv_geo_dorling_b_448.png b/src/pages/data-visualization/complex-charts/images/14_adv_geo_dorling_b_448.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/14_adv_geo_dorling_b_448.png rename to src/pages/data-visualization/complex-charts/images/14_adv_geo_dorling_b_448.png diff --git a/src/pages/data-visualization/advanced-charts/images/15_adv_geo_mapbox_a_928.png b/src/pages/data-visualization/complex-charts/images/15_adv_geo_mapbox_a_928.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/15_adv_geo_mapbox_a_928.png rename to src/pages/data-visualization/complex-charts/images/15_adv_geo_mapbox_a_928.png diff --git a/src/pages/data-visualization/advanced-charts/images/16_adv_geo_mapbox_b_288.png b/src/pages/data-visualization/complex-charts/images/16_adv_geo_mapbox_b_288.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/16_adv_geo_mapbox_b_288.png rename to src/pages/data-visualization/complex-charts/images/16_adv_geo_mapbox_b_288.png diff --git a/src/pages/data-visualization/advanced-charts/images/17_adv_geo_mapbox_c_288.png b/src/pages/data-visualization/complex-charts/images/17_adv_geo_mapbox_c_288.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/17_adv_geo_mapbox_c_288.png rename to src/pages/data-visualization/complex-charts/images/17_adv_geo_mapbox_c_288.png diff --git a/src/pages/data-visualization/advanced-charts/images/18_adv_geo_mapbox_d_288.png b/src/pages/data-visualization/complex-charts/images/18_adv_geo_mapbox_d_288.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/18_adv_geo_mapbox_d_288.png rename to src/pages/data-visualization/complex-charts/images/18_adv_geo_mapbox_d_288.png diff --git a/src/pages/data-visualization/advanced-charts/images/c.png b/src/pages/data-visualization/complex-charts/images/c.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/c.png rename to src/pages/data-visualization/complex-charts/images/c.png diff --git a/src/pages/data-visualization/advanced-charts/images/charts-adv-alluvial.png b/src/pages/data-visualization/complex-charts/images/charts-adv-alluvial.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/charts-adv-alluvial.png rename to src/pages/data-visualization/complex-charts/images/charts-adv-alluvial.png diff --git a/src/pages/data-visualization/advanced-charts/images/charts-adv-choropleth.png b/src/pages/data-visualization/complex-charts/images/charts-adv-choropleth.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/charts-adv-choropleth.png rename to src/pages/data-visualization/complex-charts/images/charts-adv-choropleth.png diff --git a/src/pages/data-visualization/advanced-charts/images/charts-adv-connecting.png b/src/pages/data-visualization/complex-charts/images/charts-adv-connecting.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/charts-adv-connecting.png rename to src/pages/data-visualization/complex-charts/images/charts-adv-connecting.png diff --git a/src/pages/data-visualization/advanced-charts/images/charts-adv-heatmap.png b/src/pages/data-visualization/complex-charts/images/charts-adv-heatmap.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/charts-adv-heatmap.png rename to src/pages/data-visualization/complex-charts/images/charts-adv-heatmap.png diff --git a/src/pages/data-visualization/advanced-charts/images/charts-adv-proportion.png b/src/pages/data-visualization/complex-charts/images/charts-adv-proportion.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/charts-adv-proportion.png rename to src/pages/data-visualization/complex-charts/images/charts-adv-proportion.png diff --git a/src/pages/data-visualization/advanced-charts/images/charts-adv-treediagram.png b/src/pages/data-visualization/complex-charts/images/charts-adv-treediagram.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/charts-adv-treediagram.png rename to src/pages/data-visualization/complex-charts/images/charts-adv-treediagram.png diff --git a/src/pages/data-visualization/advanced-charts/images/mapbox.svg b/src/pages/data-visualization/complex-charts/images/mapbox.svg similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/mapbox.svg rename to src/pages/data-visualization/complex-charts/images/mapbox.svg diff --git a/src/pages/data-visualization/advanced-charts/images/new_adv_parallel_928 2.png b/src/pages/data-visualization/complex-charts/images/new_adv_parallel_928 2.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/new_adv_parallel_928 2.png rename to src/pages/data-visualization/complex-charts/images/new_adv_parallel_928 2.png diff --git a/src/pages/data-visualization/advanced-charts/images/new_adv_parallel_928.png b/src/pages/data-visualization/complex-charts/images/new_adv_parallel_928.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/new_adv_parallel_928.png rename to src/pages/data-visualization/complex-charts/images/new_adv_parallel_928.png diff --git a/src/pages/data-visualization/advanced-charts/images/new_adv_parallel_detail_01_288.png b/src/pages/data-visualization/complex-charts/images/new_adv_parallel_detail_01_288.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/new_adv_parallel_detail_01_288.png rename to src/pages/data-visualization/complex-charts/images/new_adv_parallel_detail_01_288.png diff --git a/src/pages/data-visualization/advanced-charts/images/new_adv_parallel_detail_02_288.png b/src/pages/data-visualization/complex-charts/images/new_adv_parallel_detail_02_288.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/new_adv_parallel_detail_02_288.png rename to src/pages/data-visualization/complex-charts/images/new_adv_parallel_detail_02_288.png diff --git a/src/pages/data-visualization/advanced-charts/images/new_adv_treemap_01_928.png b/src/pages/data-visualization/complex-charts/images/new_adv_treemap_01_928.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/new_adv_treemap_01_928.png rename to src/pages/data-visualization/complex-charts/images/new_adv_treemap_01_928.png diff --git a/src/pages/data-visualization/advanced-charts/images/new_adv_treemap_02_928.png b/src/pages/data-visualization/complex-charts/images/new_adv_treemap_02_928.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/new_adv_treemap_02_928.png rename to src/pages/data-visualization/complex-charts/images/new_adv_treemap_02_928.png diff --git a/src/pages/data-visualization/advanced-charts/images/new_adv_treemap_a_288.png b/src/pages/data-visualization/complex-charts/images/new_adv_treemap_a_288.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/new_adv_treemap_a_288.png rename to src/pages/data-visualization/complex-charts/images/new_adv_treemap_a_288.png diff --git a/src/pages/data-visualization/advanced-charts/images/new_adv_treemap_b_288.png b/src/pages/data-visualization/complex-charts/images/new_adv_treemap_b_288.png similarity index 100% rename from src/pages/data-visualization/advanced-charts/images/new_adv_treemap_b_288.png rename to src/pages/data-visualization/complex-charts/images/new_adv_treemap_b_288.png diff --git a/src/pages/data-visualization/advanced-charts/index.mdx b/src/pages/data-visualization/complex-charts/index.mdx similarity index 91% rename from src/pages/data-visualization/advanced-charts/index.mdx rename to src/pages/data-visualization/complex-charts/index.mdx index aa3d9f08bf5..23da53ebf5e 100755 --- a/src/pages/data-visualization/advanced-charts/index.mdx +++ b/src/pages/data-visualization/complex-charts/index.mdx @@ -1,11 +1,19 @@ --- -title: Advanced charts -description: Advanced charts are a powerful way to display complex data sets. +title: Complex charts +description: Complex charts are a powerful way to display complex data sets. --- +import { + complexChartDemoGroups, + getDemoGroupByTitle, +} from '../../../data/data-visualization'; + +import { AnchorLinks, AnchorLink } from 'gatsby-theme-carbon'; +import ChartDemoGroup from '../../../components/data-visualization/ChartDemoGroup.js'; + -Advanced charts are a powerful way to display complex data sets. While less +Complex charts are a powerful way to display complex data sets. While less intuitive than basic charts, the visualizations should still tell a story the user can understand. @@ -13,9 +21,10 @@ user can understand. -**Note:** Advanced charts are not included in the Carbon-charts repository yet. -To see our roadmap, make feature requests, or contribute, please go to the -[Carbon-charts repository](https://github.com/carbon-design-system/carbon-charts). +**Note:** Some of the charts below are not included in the Carbon-charts +repository yet. To see our roadmap, make feature requests, or contribute, please +go to the +[carbon-charts repository](https://github.com/carbon-design-system/carbon-charts). @@ -171,7 +180,7 @@ The example below illustrates a swimlane graph with expandable nodes developed by the Security team. In products like QRadar these diagrams are often paired with side and filter panels. However, a simplified version of the component is available in the -[Carbon-charts repository](https://github.com/carbon-design-system/carbon-charts/pull/435) +[carbon-charts repository](https://github.com/carbon-design-system/carbon-charts/pull/435) for IBM designers to adapt. @@ -274,18 +283,9 @@ useful. Tree maps provide an attractive alternative by maintaining a hierarchical structure while displaying rectangular quantities for each category and subcategory via area size. - - - -![Basic tree map](images/new_adv_treemap_01_928.png) - - - Example of a basic tree map where countries are colored according to the - continent they belong to - - - - +
+ +
#### Divergent tree maps @@ -294,14 +294,13 @@ hierarchical structure of a tree map. Each rectangle has an area proportional to a specified dimension of the data, but the rectangles can also be colored independently according to an additional indicator. -As with [heat maps](#heat-maps), the -diverging palette shows color progression in either direction from an inflection -point (for example, a 0 value midway between -10 and +10). In the example below, -the inflection point is simply an average. Tourism can be mapped by the number -of visitors to a certain country, but the visualization can also compare this -data to a yearly average. For instance, even though one country may have a lot -of visitors compared to another country, tourism for that country may fall below -its annual average. +As with [heat maps](#heat-maps), the diverging palette shows color progression +in either direction from an inflection point (for example, a 0 value midway +between -10 and +10). In the example below, the inflection point is simply an +average. Tourism can be mapped by the number of visitors to a certain country, +but the visualization can also compare this data to a yearly average. For +instance, even though one country may have a lot of visitors compared to another +country, tourism for that country may fall below its annual average. diff --git a/src/pages/data-visualization/basic-charts/images/charts-basic-area.png b/src/pages/data-visualization/simple-charts/images/charts-basic-area.png similarity index 100% rename from src/pages/data-visualization/basic-charts/images/charts-basic-area.png rename to src/pages/data-visualization/simple-charts/images/charts-basic-area.png diff --git a/src/pages/data-visualization/basic-charts/images/charts-basic-areastacked.png b/src/pages/data-visualization/simple-charts/images/charts-basic-areastacked.png similarity index 100% rename from src/pages/data-visualization/basic-charts/images/charts-basic-areastacked.png rename to src/pages/data-visualization/simple-charts/images/charts-basic-areastacked.png diff --git a/src/pages/data-visualization/basic-charts/images/charts-basic-bubble.png b/src/pages/data-visualization/simple-charts/images/charts-basic-bubble.png similarity index 100% rename from src/pages/data-visualization/basic-charts/images/charts-basic-bubble.png rename to src/pages/data-visualization/simple-charts/images/charts-basic-bubble.png diff --git a/src/pages/data-visualization/basic-charts/images/charts-basic-gauge.png b/src/pages/data-visualization/simple-charts/images/charts-basic-gauge.png similarity index 100% rename from src/pages/data-visualization/basic-charts/images/charts-basic-gauge.png rename to src/pages/data-visualization/simple-charts/images/charts-basic-gauge.png diff --git a/src/pages/data-visualization/basic-charts/images/charts-basic-horizontalbar.png b/src/pages/data-visualization/simple-charts/images/charts-basic-horizontalbar.png similarity index 100% rename from src/pages/data-visualization/basic-charts/images/charts-basic-horizontalbar.png rename to src/pages/data-visualization/simple-charts/images/charts-basic-horizontalbar.png diff --git a/src/pages/data-visualization/basic-charts/images/charts-basic-meter.png b/src/pages/data-visualization/simple-charts/images/charts-basic-meter.png similarity index 100% rename from src/pages/data-visualization/basic-charts/images/charts-basic-meter.png rename to src/pages/data-visualization/simple-charts/images/charts-basic-meter.png diff --git a/src/pages/data-visualization/basic-charts/index.mdx b/src/pages/data-visualization/simple-charts/index.mdx similarity index 52% rename from src/pages/data-visualization/basic-charts/index.mdx rename to src/pages/data-visualization/simple-charts/index.mdx index ec409096f9e..1043d60ffc9 100755 --- a/src/pages/data-visualization/basic-charts/index.mdx +++ b/src/pages/data-visualization/simple-charts/index.mdx @@ -1,25 +1,25 @@ --- -title: Basic charts +title: Simple charts description: - Basic charts offer a way to visualize data sets in an intuitive, easy to + Simple charts offer a way to visualize data sets in an intuitive, easy to understand way --- -Basic charts offer a way to visualize data sets in an intuitive, easy to +Simple charts offer a way to visualize data sets in an intuitive, easy to understand way. Every chart should tell a story and should reflect the content on the page where it is found. -import demoGroups from '../../../data/data-visualization'; +import { simpleChartDemoGroups } from '../../../data/data-visualization'; import { AnchorLinks, AnchorLink } from 'gatsby-theme-carbon'; -import AllDemos from '../../../components/data-visualization/AllDemos.js'; +import ChartDemoGroup from '../../../components/data-visualization/ChartDemoGroup.js'; - {demoGroups.map((storybookDemoGroup) => ( + {simpleChartDemoGroups.map((storybookDemoGroup) => ( {storybookDemoGroup.title} ))} @@ -31,9 +31,13 @@ import AllDemos from '../../../components/data-visualization/AllDemos.js'; - + ![Alluvial diagram](images/01_adv_alluvial_928.png) - +
+ {simpleChartDemoGroups.map((demoGroup) => ( + + ))} +
diff --git a/yarn.lock b/yarn.lock index 2615b093039..7c9ca0df257 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1144,28 +1144,31 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" -"@carbon/charts-react@0.34.11": - version "0.34.11" - resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.34.11.tgz#21c525a804981b5546f09053a78641eaebf52017" - integrity sha512-Wm4PUUssWvRKfyYNdOM3q8qdURsN32KIBb1UvoABEiXJ8+fKgO01jxaT31rw2RCGt+3NVjuJmi7MnZAaYGmr4Q== +"@carbon/charts-react@0.41.52": + version "0.41.52" + resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.41.52.tgz#71bf23856e7e60326d57f66edb9dd6c421e66e38" + integrity sha512-tecSbxhMDLnQgkDKayPgsj0vpDAB6P2ui+NaRQxIyGIYK9pyvRQBY0uyv4jVAKyXQZtERR+Eh9a0UbWDjQnO3A== dependencies: - "@carbon/charts" "^0.34.11" + "@carbon/charts" "^0.41.52" + "@carbon/telemetry" "0.0.0-alpha.6" -"@carbon/charts@0.34.11", "@carbon/charts@^0.34.11": - version "0.34.11" - resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.34.11.tgz#68245fb42ee53186977ae4edb9515c58317f80b7" - integrity sha512-cnMGd5bobEKKU6DKv/PwXIVLosgF6Y7NNdsixi7J196UFoLMRP+aSJ/wfOp8AMGiLeuLS1bpuxv3ggzwuWFSdQ== +"@carbon/charts@^0.41.52": + version "0.41.52" + resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.41.52.tgz#729b71453246bdb890febcb06e9bab584c1528f7" + integrity sha512-/TZHUamaYaVR79COWQ49ZxEbTUVKhV3AhBWKFQDuiX5OYg0+YySCPCDlvoAk7LH1dgYBxlYog94g4Q0NLP1UYw== dependencies: - "@carbon/colors" "10.4.0" + "@carbon/colors" "10.15.0" + "@carbon/telemetry" "0.0.0-alpha.6" "@carbon/utils-position" "1.1.1" + d3-cloud "1.2.5" 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.15.0": + version "10.15.0" + resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-10.15.0.tgz#1a7f211a9e92b51c838995f5f3ffae002a3fed8b" + integrity sha512-z6Ur7unTO6XoVVujXnGcvxxDaX1g5ccCqImlb/HtJHtF7WFCQVjpxKKn76XcmI3PRZ2tbc9q+ENpfbS5Ry/NBQ== "@carbon/colors@^10.19.0": version "10.19.0" @@ -5607,6 +5610,13 @@ d3-chord@1: d3-array "1" d3-path "1" +d3-cloud@1.2.5: + version "1.2.5" + resolved "https://registry.yarnpkg.com/d3-cloud/-/d3-cloud-1.2.5.tgz#3e91564f2d27fba47fcc7d812eb5081ea24c603d" + integrity sha512-4s2hXZgvs0CoUIw31oBAGrHt9Kt/7P9Ik5HIVzISFiWkD0Ga2VLAuO/emO/z1tYIpE7KG2smB4PhMPfFMJpahw== + dependencies: + d3-dispatch "^1.0.3" + d3-collection@1: version "1.0.7" resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.7.tgz#349bd2aa9977db071091c13144d5e4f16b5b310e" @@ -5624,7 +5634,7 @@ d3-contour@1: dependencies: d3-array "^1.1.1" -d3-dispatch@1: +d3-dispatch@1, d3-dispatch@^1.0.3: version "1.0.6" resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.6.tgz#00d37bcee4dd8cd97729dd893a0ac29caaba5d58" integrity sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA== From 42c0920a5be015745605e8c64087dc703b2e19bf Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Mon, 12 Apr 2021 21:03:56 -0400 Subject: [PATCH 2/5] update chart types page links --- src/components/MdxIcon/MdxIcon.module.scss | 1 + src/components/MdxIcon/icons/storybook.svg | 15 +++++++ src/components/MdxIcon/index.js | 2 + .../data-visualization/chart-types/index.mdx | 42 +++---------------- .../getting-started/index.mdx | 2 +- .../simple-charts/index.mdx | 2 +- 6 files changed, 26 insertions(+), 38 deletions(-) create mode 100644 src/components/MdxIcon/icons/storybook.svg diff --git a/src/components/MdxIcon/MdxIcon.module.scss b/src/components/MdxIcon/MdxIcon.module.scss index 2ad2c0f9583..ad6baf63ec5 100644 --- a/src/components/MdxIcon/MdxIcon.module.scss +++ b/src/components/MdxIcon/MdxIcon.module.scss @@ -1,5 +1,6 @@ .mdx-icon { width: 32px; + max-height: 32px; object-fit: contain; position: relative; display: inline-block; diff --git a/src/components/MdxIcon/icons/storybook.svg b/src/components/MdxIcon/icons/storybook.svg new file mode 100644 index 00000000000..6295b911b95 --- /dev/null +++ b/src/components/MdxIcon/icons/storybook.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/MdxIcon/index.js b/src/components/MdxIcon/index.js index 36f14c0d914..17be43073bf 100644 --- a/src/components/MdxIcon/index.js +++ b/src/components/MdxIcon/index.js @@ -13,6 +13,7 @@ import vue from './icons/vue.png'; import angular from './icons/angular.png'; import webcomponents from './icons/webcomponents.png'; import npm from './icons/npm.svg'; +import storybook from './icons/storybook.svg'; const localIcons = { sketch, @@ -25,6 +26,7 @@ const localIcons = { angular, webcomponents, npm, + storybook, }; const carbonIcons = { diff --git a/src/pages/data-visualization/chart-types/index.mdx b/src/pages/data-visualization/chart-types/index.mdx index 430d7a218de..f2f8e8198fb 100644 --- a/src/pages/data-visualization/chart-types/index.mdx +++ b/src/pages/data-visualization/chart-types/index.mdx @@ -17,8 +17,8 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/bar.svg) @@ -27,8 +27,8 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/bargrouped.svg) @@ -53,26 +53,6 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/radar.svg) - - - - - -![GATSBY_EMPTY_ALT](images/barhoriz.svg) - - - - - - -![GATSBY_EMPTY_ALT](images/grouped-bar-horizontal.svg) - @@ -148,22 +128,12 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/stacked-bar-horizontal.svg) - - - - - -![GATSBY_EMPTY_ALT](images/barstack.svg) - diff --git a/src/pages/data-visualization/getting-started/index.mdx b/src/pages/data-visualization/getting-started/index.mdx index 54c87b127c6..20e98bd9347 100755 --- a/src/pages/data-visualization/getting-started/index.mdx +++ b/src/pages/data-visualization/getting-started/index.mdx @@ -33,7 +33,7 @@ requests to the - + diff --git a/src/pages/data-visualization/simple-charts/index.mdx b/src/pages/data-visualization/simple-charts/index.mdx index 1043d60ffc9..71c15d8eb7f 100755 --- a/src/pages/data-visualization/simple-charts/index.mdx +++ b/src/pages/data-visualization/simple-charts/index.mdx @@ -31,7 +31,7 @@ import ChartDemoGroup from '../../../components/data-visualization/ChartDemoGrou - ![Alluvial diagram](images/01_adv_alluvial_928.png) + From 375a8b09c6ee38a6c5d0ee478eb7c15e7cd79d6e Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Tue, 13 Apr 2021 13:16:36 -0400 Subject: [PATCH 3/5] final touches --- conf.d/rewrite.conf | 4 ++++ .../data-visualization/ChartDemoGroup.js | 14 ++++++++------ .../data-visualization/chart-types/index.mdx | 4 ++-- .../data-visualization/data-visualization.scss | 1 + yarn.lock | 18 +++++++++--------- 5 files changed, 24 insertions(+), 17 deletions(-) diff --git a/conf.d/rewrite.conf b/conf.d/rewrite.conf index 0a72e457327..71ae2dc9128 100644 --- a/conf.d/rewrite.conf +++ b/conf.d/rewrite.conf @@ -39,3 +39,7 @@ rewrite /resources /developing/developer-resources permanent; rewrite /tutorial/angular/(.*) /developing/angular-tutorial/\$1 permanent; rewrite /tutorial/react/(.*) /developing/react-tutorial/\$1 permanent; rewrite /tutorial/vue/(.*) /developing/vue-tutorial/\$1 permanent; + +# Data-visualization +rewrite /data-visualization/basic-charts/ /data-visualization/simple-charts/ permanent; +rewrite /data-visualization/advanced-charts/ /data-visualization/complex-charts/ permanent; diff --git a/src/components/data-visualization/ChartDemoGroup.js b/src/components/data-visualization/ChartDemoGroup.js index b06500cc920..ae22e8428b2 100644 --- a/src/components/data-visualization/ChartDemoGroup.js +++ b/src/components/data-visualization/ChartDemoGroup.js @@ -3,6 +3,7 @@ import React from 'react'; import * as ChartComponents from '@carbon/charts-react'; import H2 from 'gatsby-theme-carbon/src/components/markdown/H2'; +import P from 'gatsby-theme-carbon/src/components/markdown/P'; import CodeBar from '../ComponentDemo/Code/CodeBar.js'; import { @@ -36,7 +37,7 @@ const ChartDemoGroup = ({ demoGroup, light }) => { {light !== true && demoGroup.description && (
-

{demoGroup.description}

+

{demoGroup.description}

)} @@ -45,12 +46,12 @@ const ChartDemoGroup = ({ demoGroup, light }) => { {light !== true && demo.description && (
-

{demo.description}

+

{demo.description}

)} -
+
{ style={{ maxWidth: 400 }} />
+ { numberOfRemainingDemos > 1 ? 's' : '' }`} href={`https://carbon-design-system.github.io/carbon-charts/?path=/story/${demoGroup.type.replace( - '-chart', - '' - )}-charts-${demo.id}`}> + '-chart', + '' + )}-charts-${demo.id}`}> )} diff --git a/src/pages/data-visualization/chart-types/index.mdx b/src/pages/data-visualization/chart-types/index.mdx index f2f8e8198fb..2c9b31f729b 100644 --- a/src/pages/data-visualization/chart-types/index.mdx +++ b/src/pages/data-visualization/chart-types/index.mdx @@ -73,7 +73,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/area.svg) @@ -139,7 +139,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/areastack.svg) diff --git a/src/pages/data-visualization/data-visualization.scss b/src/pages/data-visualization/data-visualization.scss index dfa7641747b..eb9adc4ac1c 100644 --- a/src/pages/data-visualization/data-visualization.scss +++ b/src/pages/data-visualization/data-visualization.scss @@ -12,4 +12,5 @@ div.chart-demo-wrapper { font-weight: 400; line-height: 1.5rem; letter-spacing: 0; + margin-top: 1.5rem; } diff --git a/yarn.lock b/yarn.lock index 7c9ca0df257..afaec323424 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1144,18 +1144,18 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" -"@carbon/charts-react@0.41.52": - version "0.41.52" - resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.41.52.tgz#71bf23856e7e60326d57f66edb9dd6c421e66e38" - integrity sha512-tecSbxhMDLnQgkDKayPgsj0vpDAB6P2ui+NaRQxIyGIYK9pyvRQBY0uyv4jVAKyXQZtERR+Eh9a0UbWDjQnO3A== +"@carbon/charts-react@0.41.53": + version "0.41.53" + resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.41.53.tgz#bcccf0940c42996878c359a2ba7ad093576a8d99" + integrity sha512-aloCmrdkt1JJQBqEFiQtjsP8BM/B842+jYjICXq1FwZZLEC8NQ8K68BtfZnDZ61HZAvJZaSPslls9keASBm19g== dependencies: - "@carbon/charts" "^0.41.52" + "@carbon/charts" "^0.41.53" "@carbon/telemetry" "0.0.0-alpha.6" -"@carbon/charts@^0.41.52": - version "0.41.52" - resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.41.52.tgz#729b71453246bdb890febcb06e9bab584c1528f7" - integrity sha512-/TZHUamaYaVR79COWQ49ZxEbTUVKhV3AhBWKFQDuiX5OYg0+YySCPCDlvoAk7LH1dgYBxlYog94g4Q0NLP1UYw== +"@carbon/charts@^0.41.53": + version "0.41.53" + resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.41.53.tgz#d8e1b8698793878f3bf28f7ce578edd30ee81015" + integrity sha512-hF+Gh2M9DhmixSWMJmrhSXWYIfo98qE5lJn+Zou3u6sJDBToa14U6zmgnihD7hfSNpRVFwaJ4mzTU14RvKQ4Ow== dependencies: "@carbon/colors" "10.15.0" "@carbon/telemetry" "0.0.0-alpha.6" From 140ade0d29e65b44db4f5f033580e73fb077a869 Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Tue, 13 Apr 2021 16:00:49 -0400 Subject: [PATCH 4/5] add boxplot & wordcloud images --- .../data-visualization/ChartDemoGroup.js | 4 +- .../chart-types/images/boxplot.svg | 56 +++++++++++++++++++ .../chart-types/images/wordcloud.svg | 27 +++++++++ .../data-visualization/chart-types/index.mdx | 24 ++++++++ 4 files changed, 109 insertions(+), 2 deletions(-) create mode 100644 src/pages/data-visualization/chart-types/images/boxplot.svg create mode 100644 src/pages/data-visualization/chart-types/images/wordcloud.svg diff --git a/src/components/data-visualization/ChartDemoGroup.js b/src/components/data-visualization/ChartDemoGroup.js index ae22e8428b2..037762bb8ed 100644 --- a/src/components/data-visualization/ChartDemoGroup.js +++ b/src/components/data-visualization/ChartDemoGroup.js @@ -31,7 +31,7 @@ const ChartDemoGroup = ({ demoGroup, light }) => { demoGroup.demos.length > 2 ? demoGroup.demos.length - 1 : 0; return ( - <> +
{light !== true &&

{demoGroup.title}

} {light !== true && demoGroup.description && ( @@ -89,7 +89,7 @@ const ChartDemoGroup = ({ demoGroup, light }) => { )} - +
); }; diff --git a/src/pages/data-visualization/chart-types/images/boxplot.svg b/src/pages/data-visualization/chart-types/images/boxplot.svg new file mode 100644 index 00000000000..f9a7ac4fe8c --- /dev/null +++ b/src/pages/data-visualization/chart-types/images/boxplot.svg @@ -0,0 +1,56 @@ + + + boxplot + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/pages/data-visualization/chart-types/images/wordcloud.svg b/src/pages/data-visualization/chart-types/images/wordcloud.svg new file mode 100644 index 00000000000..76969ed9fb4 --- /dev/null +++ b/src/pages/data-visualization/chart-types/images/wordcloud.svg @@ -0,0 +1,27 @@ + + + wordcloud + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/pages/data-visualization/chart-types/index.mdx b/src/pages/data-visualization/chart-types/index.mdx index 2c9b31f729b..0398d6536f5 100644 --- a/src/pages/data-visualization/chart-types/index.mdx +++ b/src/pages/data-visualization/chart-types/index.mdx @@ -80,6 +80,18 @@ appropriate chart type. + + + + +![GATSBY_EMPTY_ALT](images/boxplot.svg) + + + + + + + + +![GATSBY_EMPTY_ALT](images/wordcloud.svg) + + + + ## Correlations From 0d028aac92fb03fa2c7edcea64e26280758323cc Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Wed, 14 Apr 2021 10:59:45 -0400 Subject: [PATCH 5/5] add lollipop to demos and move wordcloud into comparisons --- .../chart-types/images/lollipop.svg | 24 +++++++++++++ .../chart-types/images/wordcloud.svg | 1 - .../data-visualization/chart-types/index.mdx | 35 +++++++++++++------ 3 files changed, 48 insertions(+), 12 deletions(-) create mode 100644 src/pages/data-visualization/chart-types/images/lollipop.svg diff --git a/src/pages/data-visualization/chart-types/images/lollipop.svg b/src/pages/data-visualization/chart-types/images/lollipop.svg new file mode 100644 index 00000000000..9ca53312e46 --- /dev/null +++ b/src/pages/data-visualization/chart-types/images/lollipop.svg @@ -0,0 +1,24 @@ + + + lollipop + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/pages/data-visualization/chart-types/images/wordcloud.svg b/src/pages/data-visualization/chart-types/images/wordcloud.svg index 76969ed9fb4..2001fc590e7 100644 --- a/src/pages/data-visualization/chart-types/images/wordcloud.svg +++ b/src/pages/data-visualization/chart-types/images/wordcloud.svg @@ -2,7 +2,6 @@ wordcloud - diff --git a/src/pages/data-visualization/chart-types/index.mdx b/src/pages/data-visualization/chart-types/index.mdx index 0398d6536f5..08557d6048a 100644 --- a/src/pages/data-visualization/chart-types/index.mdx +++ b/src/pages/data-visualization/chart-types/index.mdx @@ -35,6 +35,18 @@ appropriate chart type. + + + + +![GATSBY_EMPTY_ALT](images/lollipop.svg) + + + + + + + + +![GATSBY_EMPTY_ALT](images/wordcloud.svg) + + + + ## Trends @@ -191,17 +215,6 @@ appropriate chart type. - - - -![GATSBY_EMPTY_ALT](images/wordcloud.svg) - - - - ## Correlations