docs(dataviz): update charts to 0.54.2, update heatmap specs & demo (#…

…2678)

* docs(dataviz): add histogram

* update charts to 0.54.0, add heatmap demo

* remove heatmap design only tag

* update charts to 0.54.0 & update complex charts page

package.json

@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@babel/core": "^7.15.8",
-    "@carbon/charts-react": "0.50.8",
+    "@carbon/charts-react": "0.54.2",
     "@carbon/elements": "^10.46.0",
     "@carbon/icons": "^10.42.0",
     "@carbon/icons-react": "^10.42.0",

src/pages/data-visualization/chart-types/index.mdx

@@ -268,7 +268,6 @@ appropriate chart type.
  <OverviewCard
     title="Heat map"
     href="/data-visualization/complex-charts#heat-maps"	       
-    tag="Design only"
     >
 
 ![GATSBY_EMPTY_ALT](images/heatmap.svg)

src/pages/data-visualization/complex-charts/index.mdx

@@ -74,18 +74,12 @@ or all negative. Sequential heat maps can leverage the full range of the palette
 (from 10–100) to maximize contrast. Please note that the 3:1 minimum contrast
 requirement does not apply to heat maps.
 
-<Row>
-<Column  colLg={12} colMd={8} colSm={4} >
-
-![Sequential heat map](images/04_adv_heatmap_928.png)
+<ChartDemoGroup demoGroup={getDemoGroupByTitle('heatmap')} light={true} />
 
 <Caption>
   When cells get extremely small, a white border can hinder the intended effect.
 </Caption>
 
-</Column>
-</Row>
-
 #### Heat map behaviors
 
 Axis ticks and legend can be used to leverage the chart potential giving the
@@ -98,14 +92,6 @@ users additional information and dedicated kinds of interaction.
 
 <Caption>Exploration of a domain axis hover behavior</Caption>
 
-</Column>
-
-<Column  colLg={4} colMd={4} colSm={4} >
-
-![Heat map interactive legend detail](images/04b_adv_heatmap_detail_288.png)
-
-<Caption>Exploration of an interactive legend</Caption>
-
 </Column>
 </Row>
 
@@ -133,18 +119,6 @@ exceptions. The data for a divergent heat map does not need to be symmetrical on
 either side of the inflection point. For example, the data set could have a zero
 value between -20 and +100 as well.
 
-<Row>
-<Column  colLg={12} colMd={8} colSm={4} >
-
-![Divergent heat map](images/05_adv_heatmap_928.png)
-
-<Caption>
-  Example of a symmetrical divergent heat map with optional cell borders
-</Caption>
-
-</Column>
-</Row>
-
 ## Network diagrams
 
 A network diagram is a way of visually representing network architecture. It

yarn.lock

@@ -1089,19 +1089,19 @@
     "@babel/helper-validator-identifier" "^7.15.7"
     to-fast-properties "^2.0.0"
 
-"@carbon/charts-react@0.50.8":
-  version "0.50.8"
-  resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.50.8.tgz#d69f22b87f6ae203e5a78e93a203e4b27864479a"
-  integrity sha512-Q+5/ZP3LmZ9Q723a9aC3/8OiwN15mBXdp/xMApJy59ljnCQutH9v4BwdsmxhM0CIX94rb+lovEW7nsmtQPvuoQ==
+"@carbon/charts-react@0.54.2":
+  version "0.54.2"
+  resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.54.2.tgz#a76ad602a2a1b267a335e0bddb98ab9768a1e832"
+  integrity sha512-Vdz9htq+CLdC90ldkvUf/2VKIs6BvOZ5lEzLm7cAXER293XUSlhVe6DGD1WsMEUG99hC1x8W3mzJ03Jgswtekg==
   dependencies:
-    "@carbon/charts" "^0.50.8"
+    "@carbon/charts" "^0.54.2"
     "@carbon/icons-react" "^10.32.0"
     "@carbon/telemetry" "0.0.0-alpha.6"
 
-"@carbon/charts@^0.50.8":
-  version "0.50.10"
-  resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.50.10.tgz#ec5291e1f65dbd7dd6521f50f117f4368909a49e"
-  integrity sha512-FvCej1XRWYTQqxWXGfX4de7xAs3YCp9YPJ2nxYI85MD4mgFSFVCXaqPpjwK2vFKBMNI/B9e1LigrSCY6TlY8tg==
+"@carbon/charts@^0.54.2":
+  version "0.54.2"
+  resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.54.2.tgz#9ac2234b3d85fac89a8dacc99caea94eb41bdd8c"
+  integrity sha512-rkodYLj8dJaaO4sv9vCJulE+mG6QR0/N05Fv4undnA3xu9Q0cwnwIjEjgr7i3OfAKq5iczm2OkRpLW0yZF6quQ==
   dependencies:
     "@carbon/colors" "10.29.0"
     "@carbon/telemetry" "0.0.0-alpha.6"