feat: add data viz section to website

package.json

@@ -15,6 +15,8 @@
     "timestamp": "./build-timestamp.sh"
   },
   "dependencies": {
+    "@carbon/charts": "0.16.8",
+    "@carbon/charts-react": "0.16.8",
     "@carbon/elements": "^10.6.0",
     "@carbon/icons": "^10.6.0",
     "@carbon/icons-react": "^10.6.0",
@@ -25,11 +27,12 @@
     "carbon-components-react": "^7.6.0",
     "change-case": "^3.1.0",
     "classnames": "^2.2.6",
+    "d3": "^5.12.0",
     "gatsby": "^2.13.73",
     "gatsby-plugin-compile-es6-packages": "^2.1.0",
     "gatsby-plugin-lodash": "^3.1.3",
     "gatsby-plugin-remove-serviceworker": "^1.0.0",
-    "gatsby-theme-carbon": "^1.11.6",
+    "gatsby-theme-carbon": "^1.14.2",
     "html-loader": "^0.5.5",
     "lodash": "^4.17.15",
     "markdown-it": "^9.0.1",

src/components/OverviewCard/OverviewCard.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Link } from 'gatsby';
+import { Tag } from 'carbon-components-react';
+
+export default class OverviewCard extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+
+    /**
+     * Add tag
+     */
+    tag: PropTypes.string,
+
+    /**
+     * Set url for card
+     */
+    href: PropTypes.string,
+
+    /**
+     * LTitle
+     */
+    title: PropTypes.string,
+
+    /**
+     * Use for disabled card
+     */
+    disabled: PropTypes.bool,
+
+    /**
+     * Specify a custom class
+     */
+    className: PropTypes.string,
+  };
+
+  static defaultProps = {
+    disabled: false,
+  };
+
+  render() {
+    const { children, href, title, disabled, className, tag } = this.props;
+
+    let isLink;
+    if (href !== undefined) {
+      isLink = href.charAt(0) === '/';
+    }
+
+    const OverviewCardClassNames = classnames([`overview-card`], {
+      [className]: className,
+      [`overview-card--disabled`]: disabled,
+    });
+
+    const carbonTileclassNames = classnames(
+      [`bx--tile`],
+      [`bx--tile--clickable`]
+    );
+
+    const cardContent = (
+      <>
+        <h4 className="overview-card__title">{title}</h4>
+        {tag && <Tag type="teal">{tag}</Tag>}
+        <div className={`overview-card__img`}>{children}</div>
+      </>
+    );
+
+    let cardContainer;
+    if (disabled === true) {
+      cardContainer = <div className={carbonTileclassNames}>{cardContent}</div>;
+    } else if (isLink === true) {
+      cardContainer = (
+        <Link to={href} className={carbonTileclassNames}>
+          {cardContent}
+        </Link>
+      );
+    } else {
+      cardContainer = (
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href={href}
+          className={carbonTileclassNames}>
+          {cardContent}
+        </a>
+      );
+    }
+
+    return (
+      <div className={OverviewCardClassNames}>
+        <div className="bx--aspect-ratio--1x1">
+          <div className="bx--aspect-ratio--object">{cardContainer}</div>
+        </div>
+      </div>
+    );
+  }
+}

src/components/OverviewCard/index.js

@@ -0,0 +1,3 @@
+import OverviewCard from './OverviewCard';
+
+export default OverviewCard;

src/components/OverviewCard/overview-card-group.scss

@@ -0,0 +1,22 @@
+.overview-card-group {
+  margin: $spacing-05 0 $spacing-07;
+}
+
+.overview-card-group .overview-card {
+  border-top: 1px solid $carbon--gray-20;
+  border-left: 1px solid $carbon--gray-20;
+}
+
+.overview-card-group .#{$prefix}--col-sm-2:nth-child(-n + 2) .overview-card {
+  border-top: 0px solid transparent;
+}
+
+@include carbon--breakpoint('md') {
+  .overview-card-group .#{$prefix}--col-lg-3:nth-child(-n + 4) .overview-card {
+    border-top: 0px solid transparent;
+  }
+
+  .overview-card-group .#{$prefix}--col-lg-3:nth-child(4n-7) .overview-card {
+    border-left: 0px solid transparent;
+  }
+}

src/components/OverviewCard/overview-card.scss

@@ -0,0 +1,71 @@
+.overview-card {
+  position: relative;
+}
+
+.overview-card .#{$prefix}--tile {
+  height: 100%;
+  padding: $spacing-05;
+  position: relative;
+  text-decoration: none;
+  background: $carbon--white-0;
+  transition: background $transition--base;
+  display: flex;
+  justify-content: space-between;
+
+  &:hover {
+    background: $hover-ui;
+  }
+
+  &:active {
+    background: $active-ui;
+  }
+}
+
+.overview-card__title {
+  @include carbon--type-style('body-short-01');
+  text-decoration: none;
+  color: $text-01;
+  position: relative;
+  z-index: 1;
+}
+
+.overview-card .bx--tag {
+  margin-top: -0.25rem;
+  white-space: nowrap;
+}
+
+// Image
+.overview-card__img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.overview-card__img .gatsby-resp-image-wrapper,
+.overview-card__img img[src*='svg'],
+.overview-card__img img[src*='gif'] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  max-width: 100% !important;
+  top: -1px;
+  left: -1px;
+  background: transparent;
+}
+
+.overview-card .#{$prefix}--tile:hover .overview-card__img:after {
+  opacity: 1;
+}
+
+// Disabled
+.overview-card--disabled .#{$prefix}--tile:hover {
+  background: $carbon--white-0;
+  cursor: not-allowed;
+}
+
+.overview-card--disabled .overview-card__title {
+  color: $disabled-03;
+}