Chart type cards (carbon-design-system#1270)

* adds thumbnails * image update * image udate * Description update * enable cards * Update src/pages/data-visualization/chart-types/index.mdx Co-authored-by: Eliad Moosavi <[email protected]> * Update src/pages/data-visualization/chart-types/index.mdx Co-authored-by: Eliad Moosavi <[email protected]> * Update src/pages/data-visualization/chart-types/index.mdx Co-authored-by: Eliad Moosavi <[email protected]> * Update src/pages/data-visualization/chart-types/index.mdx Co-authored-by: Eliad Moosavi <[email protected]> * Update src/pages/data-visualization/chart-types/index.mdx Co-authored-by: Eliad Moosavi <[email protected]> * link fix * grouped bar link fix * removed design only tags Co-authored-by: Eliad Moosavi <[email protected]>
natashadecoste · May 19, 2021 · 8df8bbf · 8df8bbf
1 parent d6b5a4c
commit 8df8bbf
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 8 deletions.
diff --git a/src/pages/data-visualization/chart-types/images/grouped-bar-horizontal.svg b/src/pages/data-visualization/chart-types/images/grouped-bar-horizontal.svg
diff --git a/src/pages/data-visualization/chart-types/images/pie.svg b/src/pages/data-visualization/chart-types/images/pie.svg
diff --git a/src/pages/data-visualization/chart-types/images/stacked-bar-horizontal.svg b/src/pages/data-visualization/chart-types/images/stacked-bar-horizontal.svg
diff --git a/src/pages/data-visualization/chart-types/index.mdx b/src/pages/data-visualization/chart-types/index.mdx
@@ -7,7 +7,7 @@ import OverviewCard from "components/OverviewCard";
 
 <PageDescription>
 
-Start by identifying the purpose of the visualization and choose a chart type appropriately.
+Start by identifying the purpose of the visualization and then choose the appropriate chart type.
 
 </PageDescription>
 
@@ -62,6 +62,16 @@ Start by identifying the purpose of the visualization and choose a chart type ap
 
 ![Simple bar (horizontal)](images/barhoriz.svg)
 
+</OverviewCard>
+</Column>
+<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >
+ <OverviewCard
+    title="Grouped bar (horizontal)"
+    href="/data-visualization/basic-charts#grouped-horizontal-bar-(discrete)"
+    >
+
+![Grouped bar (horizontal)](images/grouped-bar-horizontal.svg)
+
 </OverviewCard>
 </Column>
 </Row>
@@ -102,7 +112,7 @@ Start by identifying the purpose of the visualization and choose a chart type ap
 <Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >
  <OverviewCard
     title="Stream"
-    disabled
+    href="/data-visualization/basic-charts#donut"
     >
 
 ![Stream](images/stream.svg)
@@ -130,7 +140,18 @@ Start by identifying the purpose of the visualization and choose a chart type ap
     href="/data-visualization/basic-charts#pie"
     >
 
-![Pie](images/donut.svg)
+![Pie](images/pie.svg)
+
+</OverviewCard>
+</Column>
+
+<Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >
+ <OverviewCard
+    title="Stacked bar (horizontal)"
+    href="/data-visualization/basic-charts/#stacked-horizontal-bar-(discrete)"
+    >
+
+![Stacked bar horizontal](images/stacked-bar-horizontal.svg)
 
 </OverviewCard>
 </Column>
@@ -148,7 +169,6 @@ Start by identifying the purpose of the visualization and choose a chart type ap
  <OverviewCard
     title="Stacked area"
     href="/data-visualization/basic-charts/#stacked-area-chart"
-    tag="Design only"
     >
 
 ![Stacked area](images/areastack.svg)
@@ -162,14 +182,14 @@ Start by identifying the purpose of the visualization and choose a chart type ap
    tag="Design only"
    >
 
-![Meter / gauge](images/gauge.svg)
+![Gauge](images/gauge.svg)
 
 </OverviewCard>
 </Column>
 <Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm>
  <OverviewCard
     title="Tree map"
-    disabled
+    href="/data-visualization/basic-charts#gauge"
     >
 
 ![Tree map](images/treemap.svg)
@@ -194,7 +214,8 @@ Start by identifying the purpose of the visualization and choose a chart type ap
 <Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >
  <OverviewCard
     title="Heat map"
-    disabled
+    href="/data-visualization/advanced-charts#heat-maps"	       
+    tag="Design only"
     >
 
 ![Heat map](images/heatmap.svg)
@@ -204,7 +225,8 @@ Start by identifying the purpose of the visualization and choose a chart type ap
 <Column  colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >
  <OverviewCard
     title="Parallel coordinates"
-    disabled
+    href="/data-visualization/advanced-charts#parallel-coordinates"	       
+    tag="Design only"
     >
 
 ![Parallel coordinates](images/parallel.svg)