From 26373914da2c49223e333af340fb9361ab74a823 Mon Sep 17 00:00:00 2001
From: Alex Paxton <alex@influxdata.com>
Date: Mon, 27 Aug 2018 15:40:10 -0700
Subject: [PATCH] Polish Graph Type Selection (#4290)

* Optionally pass division pixels to child

* Pass division pixels to graph type selector

* Convert component to typescript and refactor

* Simplify styles for display options

* Fix appearance of note svg graphic

* Yarny things

* Fix tests

* Use fixed size grid for graph type selection

* cleanup

* Fix weirdness
---
 ui/src/dashboards/components/AxesOptions.tsx  |   7 +-
 ui/src/dashboards/components/GaugeOptions.tsx |   7 +-
 .../components/GraphTypeSelector.js           |  63 ------
 .../components/GraphTypeSelector.scss         | 159 ++++++++++++++
 .../components/GraphTypeSelector.tsx          |  68 ++++++
 .../components/SingleStatOptions.tsx          |   7 +-
 ui/src/dashboards/components/TableOptions.tsx |   7 +-
 ui/src/dashboards/graphics/graph.tsx          | 193 ++++++++---------
 .../shared/components/threesizer/Division.tsx |  36 +++-
 .../components/threesizer/Threesizer.tsx      |   2 +-
 ui/src/style/chronograf.scss                  |   1 +
 .../style/components/ceo-display-options.scss | 197 +-----------------
 ui/src/style/unsorted.scss                    |   1 +
 13 files changed, 374 insertions(+), 374 deletions(-)
 delete mode 100644 ui/src/dashboards/components/GraphTypeSelector.js
 create mode 100644 ui/src/dashboards/components/GraphTypeSelector.scss
 create mode 100644 ui/src/dashboards/components/GraphTypeSelector.tsx

diff --git a/ui/src/dashboards/components/AxesOptions.tsx b/ui/src/dashboards/components/AxesOptions.tsx
index f8a3cb70e..44901bd53 100644
--- a/ui/src/dashboards/components/AxesOptions.tsx
+++ b/ui/src/dashboards/components/AxesOptions.tsx
@@ -78,11 +78,8 @@ class AxesOptions extends PureComponent<Props> {
     const {menuOption} = GRAPH_TYPES.find(graph => graph.type === type)
 
     return (
-      <FancyScrollbar
-        className="display-options--cell y-axis-controls"
-        autoHide={false}
-      >
-        <div className="display-options--cell-wrapper">
+      <FancyScrollbar className="display-options" autoHide={false}>
+        <div className="display-options--wrapper">
           <h5 className="display-options--header">{menuOption} Controls</h5>
           <form autoComplete="off" className="form-group-wrapper">
             <div className="form-group col-sm-12">
diff --git a/ui/src/dashboards/components/GaugeOptions.tsx b/ui/src/dashboards/components/GaugeOptions.tsx
index 400d89c68..d6d4d631e 100644
--- a/ui/src/dashboards/components/GaugeOptions.tsx
+++ b/ui/src/dashboards/components/GaugeOptions.tsx
@@ -42,11 +42,8 @@ class GaugeOptions extends PureComponent<Props> {
     const {y} = axes
 
     return (
-      <FancyScrollbar
-        className="display-options--cell y-axis-controls"
-        autoHide={false}
-      >
-        <div className="display-options--cell-wrapper">
+      <FancyScrollbar className="display-options" autoHide={false}>
+        <div className="display-options--wrapper">
           <h5 className="display-options--header">Gauge Controls</h5>
           <div className="thresholds-list">
             <button
diff --git a/ui/src/dashboards/components/GraphTypeSelector.js b/ui/src/dashboards/components/GraphTypeSelector.js
deleted file mode 100644
index 2e7556d97..000000000
--- a/ui/src/dashboards/components/GraphTypeSelector.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import {connect} from 'react-redux'
-import {bindActionCreators} from 'redux'
-import classnames from 'classnames'
-
-import FancyScrollbar from 'shared/components/FancyScrollbar'
-
-import {GRAPH_TYPES} from 'src/dashboards/graphics/graph'
-
-import {changeCellType} from 'src/dashboards/actions/cellEditorOverlay'
-
-const GraphTypeSelector = ({type, handleChangeCellType}) => {
-  const onChangeCellType = newType => () => {
-    handleChangeCellType(newType)
-  }
-
-  return (
-    <FancyScrollbar
-      className="display-options--cell display-options--cellx2"
-      autoHide={false}
-    >
-      <div className="display-options--cell-wrapper">
-        <div className="viz-type-selector">
-          {GRAPH_TYPES.map(graphType => (
-            <div
-              key={graphType.type}
-              className={classnames('viz-type-selector--option', {
-                active: graphType.type === type,
-              })}
-            >
-              <div onClick={onChangeCellType(graphType.type)}>
-                {graphType.graphic}
-                <p>{graphType.menuOption}</p>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </FancyScrollbar>
-  )
-}
-
-const {func, string} = PropTypes
-
-GraphTypeSelector.propTypes = {
-  type: string.isRequired,
-  handleChangeCellType: func.isRequired,
-}
-
-const mapStateToProps = ({
-  cellEditorOverlay: {
-    cell: {type},
-  },
-}) => ({
-  type,
-})
-
-const mapDispatchToProps = dispatch => ({
-  handleChangeCellType: bindActionCreators(changeCellType, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(GraphTypeSelector)
diff --git a/ui/src/dashboards/components/GraphTypeSelector.scss b/ui/src/dashboards/components/GraphTypeSelector.scss
new file mode 100644
index 000000000..ec82d2c0b
--- /dev/null
+++ b/ui/src/dashboards/components/GraphTypeSelector.scss
@@ -0,0 +1,159 @@
+/*
+  Graph Type Selector Styles
+  ------------------------------------------------------------------------------
+*/
+
+$graph-type--card: 190px;
+$graph-type--margin: 4px;
+$graph-type--graphic: 150px;
+
+.graph-type-selector {
+  background-color: $g3-castle;
+}
+
+.graph-type-selector--container {
+  min-width: 200px;
+  padding: 30px;
+}
+
+.graph-type-selector--grid {
+  width: 100%;
+  display: inline-block;
+  margin: 0 (-$graph-type--gutter / 2);
+  margin-bottom: -$graph-type--gutter;
+}
+
+.graph-type-selector--option {
+  float: left;
+  width: $graph-type--card;
+  padding-bottom: $graph-type--card;
+  position: relative;
+
+  > div > p {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 900;
+    position: absolute;
+    bottom: 7%;
+    left: 10px;
+    width: calc(100% - 20px);
+    text-align: center;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // Actual "card"
+  > div {
+    background-color: $g2-kevlar;
+    color: $g11-sidewalk;
+    border-radius: $ix-radius;
+    width: $graph-type--card - ($graph-type--margin / 2);
+    height: $graph-type--card - ($graph-type--margin / 2);
+    position: absolute;
+    top: $graph-type--gutter / 2;
+    left: $graph-type--gutter / 2;
+    transition: color 0.25s ease, border-color 0.25s ease,
+      background-color 0.25s ease;
+
+    &:hover {
+      cursor: pointer;
+      background-color: $g4-onyx;
+      color: $g15-platinum;
+    }
+  }
+}
+
+// Active state "card"
+.graph-type-selector--option.active > div,
+.graph-type-selector--option.active > div:hover {
+  background-color: $g5-pepper;
+  color: $g18-cloud;
+}
+
+.graph-type-selector--graphic {
+  width: $graph-type--graphic;
+  height: $graph-type--graphic;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  > svg,
+  > svg * {
+    transform: translate3d(0, 0, 0);
+  }
+  > svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+.graph-type-selector--graphic-line {
+  stroke-width: 1px;
+  fill: none;
+  stroke-linecap: round;
+  stroke-miterlimit: 10;
+
+  &.graphic-line-a {
+    stroke: $g11-sidewalk;
+  }
+  &.graphic-line-b {
+    stroke: $g9-mountain;
+  }
+  &.graphic-line-c {
+    stroke: $g7-graphite;
+  }
+  &.graphic-line-d {
+    stroke: $g13-mist;
+  }
+}
+.graph-type-selector--graphic-fill {
+  opacity: 0.045;
+
+  &.graphic-fill-a {
+    fill: $g11-sidewalk;
+  }
+  &.graphic-fill-b {
+    fill: $g9-mountain;
+  }
+  &.graphic-fill-c {
+    fill: $g7-graphite;
+  }
+  &.graphic-fill-d {
+    fill: $g13-mist;
+    opacity: 1;
+  }
+}
+.graph-type-selector--option.active .graph-type-selector--graphic {
+  .graph-type-selector--graphic-line.graphic-line-a {
+    stroke: $c-pool;
+  }
+  .graph-type-selector--graphic-line.graphic-line-b {
+    stroke: $c-dreamsicle;
+  }
+  .graph-type-selector--graphic-line.graphic-line-c {
+    stroke: $c-rainforest;
+  }
+  .graph-type-selector--graphic-line.graphic-line-d {
+    stroke: $g17-whisper;
+  }
+  .graph-type-selector--graphic-fill.graphic-fill-a {
+    fill: $c-pool;
+  }
+  .graph-type-selector--graphic-fill.graphic-fill-b {
+    fill: $c-dreamsicle;
+  }
+  .graph-type-selector--graphic-fill.graphic-fill-c {
+    fill: $c-rainforest;
+  }
+  .graph-type-selector--graphic-fill.graphic-fill-a,
+  .graph-type-selector--graphic-fill.graphic-fill-b,
+  .graph-type-selector--graphic-fill.graphic-fill-c {
+    opacity: 0.22;
+  }
+  .graph-type-selector--graphic-fill.graphic-fill-d {
+    fill: $g17-whisper;
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/ui/src/dashboards/components/GraphTypeSelector.tsx b/ui/src/dashboards/components/GraphTypeSelector.tsx
new file mode 100644
index 000000000..2dab8482c
--- /dev/null
+++ b/ui/src/dashboards/components/GraphTypeSelector.tsx
@@ -0,0 +1,68 @@
+// Libraries
+import React, {Component} from 'react'
+import {connect} from 'react-redux'
+import classnames from 'classnames'
+
+// Components
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+
+// Actions
+import {changeCellType} from 'src/dashboards/actions/cellEditorOverlay'
+
+// Constants
+import {GRAPH_TYPES} from 'src/dashboards/graphics/graph'
+
+// Decorators
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+interface Props {
+  type: string
+  handleChangeCellType: (newType: string) => void
+}
+
+@ErrorHandling
+class GraphTypeSelector extends Component<Props> {
+  public render() {
+    const {type} = this.props
+
+    return (
+      <FancyScrollbar autoHide={false} className="graph-type-selector">
+        <div className="graph-type-selector--container">
+          <div className="graph-type-selector--grid">
+            {GRAPH_TYPES.map(graphType => (
+              <div
+                key={graphType.type}
+                className={classnames('graph-type-selector--option', {
+                  active: graphType.type === type,
+                })}
+              >
+                <div onClick={this.onChangeCellType(graphType.type)}>
+                  {graphType.graphic}
+                  <p>{graphType.menuOption}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </FancyScrollbar>
+    )
+  }
+
+  private onChangeCellType = (newType: string) => (): void => {
+    this.props.handleChangeCellType(newType)
+  }
+}
+
+const mapStateToProps = ({
+  cellEditorOverlay: {
+    cell: {type},
+  },
+}) => ({
+  type,
+})
+
+const mapDispatchToProps = {
+  handleChangeCellType: changeCellType,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(GraphTypeSelector)
diff --git a/ui/src/dashboards/components/SingleStatOptions.tsx b/ui/src/dashboards/components/SingleStatOptions.tsx
index 60640ccc0..1ddb12dce 100644
--- a/ui/src/dashboards/components/SingleStatOptions.tsx
+++ b/ui/src/dashboards/components/SingleStatOptions.tsx
@@ -34,11 +34,8 @@ class SingleStatOptions extends PureComponent<Props> {
     } = this.props
 
     return (
-      <FancyScrollbar
-        className="display-options--cell y-axis-controls"
-        autoHide={false}
-      >
-        <div className="display-options--cell-wrapper">
+      <FancyScrollbar className="display-options" autoHide={false}>
+        <div className="display-options--wrapper">
           <h5 className="display-options--header">Single Stat Controls</h5>
           <ThresholdsList onResetFocus={onResetFocus} />
           <div className="graph-options-group form-group-wrapper">
diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx
index 0326f25af..45e84ebb1 100644
--- a/ui/src/dashboards/components/TableOptions.tsx
+++ b/ui/src/dashboards/components/TableOptions.tsx
@@ -80,11 +80,8 @@ export class TableOptions extends Component<Props, {}> {
     }))
 
     return (
-      <FancyScrollbar
-        className="display-options--cell y-axis-controls"
-        autoHide={false}
-      >
-        <div className="display-options--cell-wrapper">
+      <FancyScrollbar className="display-options" autoHide={false}>
+        <div className="display-options--wrapper">
           <h5 className="display-options--header">Table Controls</h5>
           <div className="form-group-wrapper">
             <GraphOptionsSortBy
diff --git a/ui/src/dashboards/graphics/graph.tsx b/ui/src/dashboards/graphics/graph.tsx
index 52507aaed..42289c0ba 100644
--- a/ui/src/dashboards/graphics/graph.tsx
+++ b/ui/src/dashboards/graphics/graph.tsx
@@ -17,7 +17,7 @@ interface GraphSVGs {
 }
 const GRAPH_SVGS: GraphSVGs = {
   line: (
-    <div className="viz-type-selector--graphic">
+    <div className="graph-type-selector--graphic">
       <svg
         width="100%"
         height="100%"
@@ -27,36 +27,37 @@ const GRAPH_SVGS: GraphSVGs = {
         y="0px"
         viewBox="0 0 150 150"
         preserveAspectRatio="none meet"
+        shapeRendering="geometricPrecision"
       >
         <polygon
-          className="viz-type-selector--graphic-fill graphic-fill-a"
+          className="graph-type-selector--graphic-fill graphic-fill-a"
           points="148,40 111.5,47.2 75,25 38.5,90.8 2,111.8 2,125 148,125 	"
         />
         <polyline
-          className="viz-type-selector--graphic-line graphic-line-a"
+          className="graph-type-selector--graphic-line graphic-line-a"
           points="2,111.8 38.5,90.8 75,25 111.5,47.2 148,40 	"
         />
         <polygon
-          className="viz-type-selector--graphic-fill graphic-fill-b"
+          className="graph-type-selector--graphic-fill graphic-fill-b"
           points="148,88.2 111.5,95.5 75,61.7 38.5,49.3 2,90.8 2,125 148,125 	"
         />
         <polyline
-          className="viz-type-selector--graphic-line graphic-line-b"
+          className="graph-type-selector--graphic-line graphic-line-b"
           points="2,90.8 38.5,49.3 75,61.7 111.5,95.5 148,88.2 	"
         />
         <polygon
-          className="viz-type-selector--graphic-fill graphic-fill-c"
+          className="graph-type-selector--graphic-fill graphic-fill-c"
           points="148,96 111.5,106.3 75,85.7 38.5,116.5 2,115 2,125 148,125 	"
         />
         <polyline
-          className="viz-type-selector--graphic-line graphic-line-c"
+          className="graph-type-selector--graphic-line graphic-line-c"
           points="2,115 38.5,116.5 75,85.7 111.5,106.3 148,96 	"
         />
       </svg>
     </div>
   ),
   'line-stacked': (
-    <div className="viz-type-selector--graphic">
+    <div className="graph-type-selector--graphic">
       <svg
         width="100%"
         height="100%"
@@ -66,36 +67,37 @@ const GRAPH_SVGS: GraphSVGs = {
         y="0px"
         viewBox="0 0 150 150"
         preserveAspectRatio="none meet"
+        shapeRendering="geometricPrecision"
       >
         <polygon
-          className="viz-type-selector--graphic-fill graphic-fill-a"
+          className="graph-type-selector--graphic-fill graphic-fill-a"
           points="148,25 111.5,25 75,46 38.5,39.1 2,85.5 2,125 148,125 	"
         />
         <polyline
-          className="viz-type-selector--graphic-line graphic-line-a"
+          className="graph-type-selector--graphic-line graphic-line-a"
           points="2,85.5 38.5,39.1 75,46 111.5,25 148,25 	"
         />
         <polygon
-          className="viz-type-selector--graphic-fill graphic-fill-b"
+          className="graph-type-selector--graphic-fill graphic-fill-b"
           points="148,53 111.5,49.9 75,88.5 38.5,71 2,116 2,125 148,125 	"
         />
         <polyline
-          className="viz-type-selector--graphic-line graphic-line-b"
+          className="graph-type-selector--graphic-line graphic-line-b"
           points="2,116 38.5,71 75,88.5 111.5,49.9 148,53 	"
         />
         <polygon
-          className="viz-type-selector--graphic-fill graphic-fill-c"
+          className="graph-type-selector--graphic-fill graphic-fill-c"
           points="148,86.2 111.5,88.6 75,108.6 38.5,98 2,121.1 2,125 148,125 	"
         />
         <polyline
-          className="viz-type-selector--graphic-line graphic-line-c"
+          className="graph-type-selector--graphic-line graphic-line-c"
           points="2,121.1 38.5,98 75,108.6 111.5,88.6 148,86.2 	"
         />
       </svg>
     </div>
   ),
   'line-stepplot': (
-    <div className="viz-type-selector--graphic">
+    <div className="graph-type-selector--graphic">
       <svg
         width="100%"
         height="100%"
@@ -105,36 +107,37 @@ const GRAPH_SVGS: GraphSVGs = {
         y="0px"
         viewBox="0 0 150 150"
         preserveAspectRatio="none meet"
+        shapeRendering="geometricPrecision"
       >
         <polygon
-          className="viz-type-selector--graphic-fill graphic-fill-a"
+          className="graph-type-selector--graphic-fill graphic-fill-a"
           points="148,61.9 129.8,61.9 129.8,25 93.2,25 93.2,40.6 56.8,40.6 56.8,25 20.2,25 20.2,67.8 2,67.8 2,125 148,125 	"
         />
         <polyline
-          className="viz-type-selector--graphic-line graphic-line-a"
+          className="graph-type-selector--graphic-line graphic-line-a"
           points="2,67.8 20.2,67.8 20.2,25 56.8,25 56.8,40.6 93.2,40.6 93.2,25 129.8,25 129.8,61.9 148,61.9 	"
         />
         <polygon
-          className="viz-type-selector--graphic-fill graphic-fill-b"
+          className="graph-type-selector--graphic-fill graphic-fill-b"
           points="148,91.9 129.8,91.9 129.8,70.2 93.2,70.2 93.2,67 56.8,67 56.8,50.1 20.2,50.1 20.2,87 2,87 2,125 148,125 	"
         />
         <polyline
-          className="viz-type-selector--graphic-line graphic-line-b"
+          className="graph-type-selector--graphic-line graphic-line-b"
           points="2,87 20.2,87 20.2,50.1 56.8,50.1 56.8,67 93.2,67 93.2,70.2 129.8,70.2 129.8,91.9 148,91.9 	"
         />
         <polygon
-          className="viz-type-selector--graphic-fill graphic-fill-c"
+          className="graph-type-selector--graphic-fill graphic-fill-c"
           points="148,103.5 129.8,103.5 129.8,118.2 93.2,118.2 93.2,84.5 56.8,84.5 56.8,75 20.2,75 20.2,100.2 2,100.2 2,125 148,125 	"
         />
         <polyline
-          className="viz-type-selector--graphic-line graphic-line-c"
+          className="graph-type-selector--graphic-line graphic-line-c"
           points="2,100.2 20.2,100.2 20.2,75 56.8,75 56.8,84.5 93.2,84.5 93.2,118.2 129.8,118.2 129.8,103.5 148,103.5 	"
         />
       </svg>
     </div>
   ),
   'single-stat': (
-    <div className="viz-type-selector--graphic">
+    <div className="graph-type-selector--graphic">
       <svg
         width="100%"
         height="100%"
@@ -144,36 +147,37 @@ const GRAPH_SVGS: GraphSVGs = {
         y="0px"
         viewBox="0 0 150 150"
         preserveAspectRatio="none meet"
+        shapeRendering="geometricPrecision"
       >
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="graph-type-selector--graphic-fill graphic-fill-d"
           d="M35.6,80.4h4.9v1.1h-4.9v7.8h-1.1v-7.8H20.7v-0.6l13.6-20.1h1.3V80.4z M22.4,80.4h12.1V62.1l-1.6,2.7 L22.4,80.4z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="graph-type-selector--graphic-fill graphic-fill-d"
           d="M58.6,75.1c-0.7,1.5-1.8,2.7-3.2,3.6c-1.5,0.9-3.1,1.4-4.9,1.4c-1.6,0-3-0.4-4.2-1.3s-2.2-2-2.9-3.5 c-0.7-1.5-1.1-3.1-1.1-4.8c0-1.9,0.4-3.6,1.1-5.1c0.7-1.6,1.7-2.8,3-3.7c1.3-0.9,2.7-1.3,4.3-1.3c2.9,0,5.2,1,6.7,2.9 c1.5,1.9,2.3,4.7,2.3,8.3v3.3c0,4.8-1.1,8.5-3.2,11c-2.1,2.5-5.3,3.8-9.4,3.9H46l0-1.1h0.8c3.8,0,6.7-1.2,8.7-3.5 C57.6,82.8,58.6,79.5,58.6,75.1z M50.4,79c1.9,0,3.6-0.6,5.1-1.7s2.5-2.6,3-4.5v-1.2c0-3.3-0.7-5.8-2-7.5c-1.4-1.7-3.3-2.6-5.8-2.6 c-1.4,0-2.7,0.4-3.8,1.2s-2,1.9-2.6,3.3c-0.6,1.4-0.9,2.9-0.9,4.5c0,1.5,0.3,3,0.9,4.3c0.6,1.3,1.5,2.4,2.5,3.1 C47.8,78.7,49.1,79,50.4,79z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="graph-type-selector--graphic-fill graphic-fill-d"
           d="M81.3,89.2h-17v-1.1L74,77c1.6-1.9,2.8-3.5,3.5-5c0.8-1.4,1.2-2.8,1.2-4c0-2.1-0.6-3.7-1.8-4.9 c-1.2-1.2-2.9-1.7-5.1-1.7c-1.3,0-2.5,0.3-3.6,1c-1.1,0.6-2,1.5-2.6,2.6c-0.6,1.1-0.9,2.4-0.9,3.8h-1.1c0-1.5,0.4-2.9,1.1-4.2 c0.7-1.3,1.7-2.3,2.9-3.1s2.6-1.1,4.2-1.1c2.5,0,4.5,0.7,5.9,2c1.4,1.3,2.1,3.2,2.1,5.6c0,2.2-1.2,4.9-3.7,7.9l-1.8,2.2l-8.6,10 h15.6V89.2z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="graph-type-selector--graphic-fill graphic-fill-d"
           d="M85.3,88.3c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.5-0.3,0.8-0.3c0.3,0,0.6,0.1,0.8,0.3s0.3,0.5,0.3,0.8 c0,0.3-0.1,0.6-0.3,0.8s-0.5,0.3-0.8,0.3c-0.3,0-0.6-0.1-0.8-0.3C85.4,88.8,85.3,88.6,85.3,88.3z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="graph-type-selector--graphic-fill graphic-fill-d"
           d="M92.7,74.3L94,60.8h13.9v1.1H95l-1.2,11.4c0.7-0.6,1.6-1,2.7-1.4s2.2-0.5,3.3-0.5c2.6,0,4.6,0.8,6.1,2.4 c1.5,1.6,2.3,3.8,2.3,6.4c0,3.1-0.7,5.4-2.1,7c-1.4,1.6-3.4,2.4-5.9,2.4c-2.4,0-4.4-0.7-5.9-2.1c-1.5-1.4-2.3-3.3-2.5-5.8h1.1 c0.2,2.2,0.9,3.9,2.2,5.1c1.2,1.2,3,1.7,5.2,1.7c2.3,0,4.1-0.7,5.2-2.1c1.1-1.4,1.7-3.5,1.7-6.2c0-2.4-0.7-4.3-2-5.7 c-1.3-1.4-3.1-2.1-5.3-2.1c-1.4,0-2.6,0.2-3.6,0.5c-1,0.4-1.9,0.9-2.7,1.7L92.7,74.3z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="graph-type-selector--graphic-fill graphic-fill-d"
           d="M113.8,74.3l1.3-13.6H129v1.1h-12.9l-1.2,11.4c0.7-0.6,1.6-1,2.7-1.4s2.2-0.5,3.3-0.5c2.6,0,4.6,0.8,6.1,2.4 c1.5,1.6,2.3,3.8,2.3,6.4c0,3.1-0.7,5.4-2.1,7c-1.4,1.6-3.4,2.4-5.9,2.4c-2.4,0-4.4-0.7-5.9-2.1c-1.5-1.4-2.3-3.3-2.5-5.8h1.1 c0.2,2.2,0.9,3.9,2.2,5.1c1.2,1.2,3,1.7,5.2,1.7c2.3,0,4.1-0.7,5.2-2.1c1.1-1.4,1.7-3.5,1.7-6.2c0-2.4-0.7-4.3-2-5.7 c-1.3-1.4-3.1-2.1-5.3-2.1c-1.4,0-2.6,0.2-3.6,0.5c-1,0.4-1.9,0.9-2.7,1.7L113.8,74.3z"
         />
       </svg>
     </div>
   ),
   'line-plus-single-stat': (
-    <div className="viz-type-selector--graphic">
+    <div className="graph-type-selector--graphic">
       <svg
         width="100%"
         height="100%"
@@ -183,46 +187,47 @@ const GRAPH_SVGS: GraphSVGs = {
         y="0px"
         viewBox="0 0 150 150"
         preserveAspectRatio="none meet"
+        shapeRendering="geometricPrecision"
       >
         <g>
           <polygon
-            className="viz-type-selector--graphic-fill graphic-fill-c"
+            className="graph-type-selector--graphic-fill graphic-fill-c"
             points="148,88.2 111.5,95.5 75,25 38.5,54.7 2,66.7 2,125 148,125"
           />
           <polyline
-            className="viz-type-selector--graphic-line graphic-line-c"
+            className="graph-type-selector--graphic-line graphic-line-c"
             points="2,66.7 38.5,54.7 75,25 111.5,95.5 148,88.2"
           />
         </g>
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="graph-type-selector--graphic-fill graphic-fill-d"
           d="M35.6,80.4h4.9v1.1h-4.9v7.8h-1.1v-7.8H20.7v-0.6l13.6-20.1h1.3V80.4z M22.4,80.4h12.1V62.1l-1.6,2.7 L22.4,80.4z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="graph-type-selector--graphic-fill graphic-fill-d"
           d="M58.6,75.1c-0.7,1.5-1.8,2.7-3.2,3.6c-1.5,0.9-3.1,1.4-4.9,1.4c-1.6,0-3-0.4-4.2-1.3s-2.2-2-2.9-3.5 c-0.7-1.5-1.1-3.1-1.1-4.8c0-1.9,0.4-3.6,1.1-5.1c0.7-1.6,1.7-2.8,3-3.7c1.3-0.9,2.7-1.3,4.3-1.3c2.9,0,5.2,1,6.7,2.9 c1.5,1.9,2.3,4.7,2.3,8.3v3.3c0,4.8-1.1,8.5-3.2,11c-2.1,2.5-5.3,3.8-9.4,3.9H46l0-1.1h0.8c3.8,0,6.7-1.2,8.7-3.5 C57.6,82.8,58.6,79.5,58.6,75.1z M50.4,79c1.9,0,3.6-0.6,5.1-1.7s2.5-2.6,3-4.5v-1.2c0-3.3-0.7-5.8-2-7.5c-1.4-1.7-3.3-2.6-5.8-2.6 c-1.4,0-2.7,0.4-3.8,1.2s-2,1.9-2.6,3.3c-0.6,1.4-0.9,2.9-0.9,4.5c0,1.5,0.3,3,0.9,4.3c0.6,1.3,1.5,2.4,2.5,3.1 C47.8,78.7,49.1,79,50.4,79z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="graph-type-selector--graphic-fill graphic-fill-d"
           d="M81.3,89.2h-17v-1.1L74,77c1.6-1.9,2.8-3.5,3.5-5c0.8-1.4,1.2-2.8,1.2-4c0-2.1-0.6-3.7-1.8-4.9 c-1.2-1.2-2.9-1.7-5.1-1.7c-1.3,0-2.5,0.3-3.6,1c-1.1,0.6-2,1.5-2.6,2.6c-0.6,1.1-0.9,2.4-0.9,3.8h-1.1c0-1.5,0.4-2.9,1.1-4.2 c0.7-1.3,1.7-2.3,2.9-3.1s2.6-1.1,4.2-1.1c2.5,0,4.5,0.7,5.9,2c1.4,1.3,2.1,3.2,2.1,5.6c0,2.2-1.2,4.9-3.7,7.9l-1.8,2.2l-8.6,10 h15.6V89.2z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="graph-type-selector--graphic-fill graphic-fill-d"
           d="M85.3,88.3c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.5-0.3,0.8-0.3c0.3,0,0.6,0.1,0.8,0.3s0.3,0.5,0.3,0.8 c0,0.3-0.1,0.6-0.3,0.8s-0.5,0.3-0.8,0.3c-0.3,0-0.6-0.1-0.8-0.3C85.4,88.8,85.3,88.6,85.3,88.3z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="graph-type-selector--graphic-fill graphic-fill-d"
           d="M92.7,74.3L94,60.8h13.9v1.1H95l-1.2,11.4c0.7-0.6,1.6-1,2.7-1.4s2.2-0.5,3.3-0.5c2.6,0,4.6,0.8,6.1,2.4 c1.5,1.6,2.3,3.8,2.3,6.4c0,3.1-0.7,5.4-2.1,7c-1.4,1.6-3.4,2.4-5.9,2.4c-2.4,0-4.4-0.7-5.9-2.1c-1.5-1.4-2.3-3.3-2.5-5.8h1.1 c0.2,2.2,0.9,3.9,2.2,5.1c1.2,1.2,3,1.7,5.2,1.7c2.3,0,4.1-0.7,5.2-2.1c1.1-1.4,1.7-3.5,1.7-6.2c0-2.4-0.7-4.3-2-5.7 c-1.3-1.4-3.1-2.1-5.3-2.1c-1.4,0-2.6,0.2-3.6,0.5c-1,0.4-1.9,0.9-2.7,1.7L92.7,74.3z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="graph-type-selector--graphic-fill graphic-fill-d"
           d="M113.8,74.3l1.3-13.6H129v1.1h-12.9l-1.2,11.4c0.7-0.6,1.6-1,2.7-1.4s2.2-0.5,3.3-0.5c2.6,0,4.6,0.8,6.1,2.4 c1.5,1.6,2.3,3.8,2.3,6.4c0,3.1-0.7,5.4-2.1,7c-1.4,1.6-3.4,2.4-5.9,2.4c-2.4,0-4.4-0.7-5.9-2.1c-1.5-1.4-2.3-3.3-2.5-5.8h1.1 c0.2,2.2,0.9,3.9,2.2,5.1c1.2,1.2,3,1.7,5.2,1.7c2.3,0,4.1-0.7,5.2-2.1c1.1-1.4,1.7-3.5,1.7-6.2c0-2.4-0.7-4.3-2-5.7 c-1.3-1.4-3.1-2.1-5.3-2.1c-1.4,0-2.6,0.2-3.6,0.5c-1,0.4-1.9,0.9-2.7,1.7L113.8,74.3z"
         />
       </svg>
     </div>
   ),
   bar: (
-    <div className="viz-type-selector--graphic">
+    <div className="graph-type-selector--graphic">
       <svg
         width="100%"
         height="100%"
@@ -232,74 +237,75 @@ const GRAPH_SVGS: GraphSVGs = {
         y="0px"
         viewBox="0 0 150 150"
         preserveAspectRatio="none meet"
+        shapeRendering="geometricPrecision"
       >
         <rect
           x="2"
           y="108.4"
-          className="viz-type-selector--graphic-line graphic-line-a"
+          className="graph-type-selector--graphic-line graphic-line-a"
           width="26.8"
           height="16.6"
         />
         <rect
           x="31.8"
           y="82.4"
-          className="viz-type-selector--graphic-line graphic-line-b"
+          className="graph-type-selector--graphic-line graphic-line-b"
           width="26.8"
           height="42.6"
         />
         <rect
           x="61.6"
           y="28.8"
-          className="viz-type-selector--graphic-line graphic-line-c"
+          className="graph-type-selector--graphic-line graphic-line-c"
           width="26.8"
           height="96.2"
         />
         <rect
           x="91.4"
           y="47.9"
-          className="viz-type-selector--graphic-line graphic-line-a"
+          className="graph-type-selector--graphic-line graphic-line-a"
           width="26.8"
           height="77.1"
         />
         <rect
           x="121.2"
           y="25"
-          className="viz-type-selector--graphic-line graphic-line-b"
+          className="graph-type-selector--graphic-line graphic-line-b"
           width="26.8"
           height="100"
         />
         <rect
           x="2"
           y="108.4"
-          className="viz-type-selector--graphic-fill graphic-fill-a"
+          className="graph-type-selector--graphic-fill graphic-fill-a"
           width="26.8"
           height="16.6"
         />
         <rect
           x="31.8"
           y="82.4"
-          className="viz-type-selector--graphic-fill graphic-fill-b"
+          className="graph-type-selector--graphic-fill graphic-fill-b"
           width="26.8"
           height="42.6"
         />
         <rect
           x="61.6"
           y="28.8"
-          className="viz-type-selector--graphic-fill graphic-fill-c"
+          className="graph-type-selector--graphic-fill graphic-fill-c"
           width="26.8"
           height="96.2"
         />
         <rect
           x="91.4"
           y="47.9"
-          className="viz-type-selector--graphic-fill graphic-fill-a"
+          className="graph-type-selector--graphic-fill graphic-fill-a"
           width="26.8"
           height="77.1"
         />
         <rect
           x="121.2"
           y="25"
-          className="viz-type-selector--graphic-fill graphic-fill-b"
+          className="graph-type-selector--graphic-fill graphic-fill-b"
           width="26.8"
           height="100"
         />
@@ -307,7 +313,7 @@ const GRAPH_SVGS: GraphSVGs = {
     </div>
   ),
   gauge: (
-    <div className="viz-type-selector--graphic">
+    <div className="graph-type-selector--graphic">
       <svg
         width="100%"
         height="100%"
@@ -317,98 +323,99 @@ const GRAPH_SVGS: GraphSVGs = {
         y="0px"
         viewBox="0 0 150 150"
         preserveAspectRatio="none meet"
+        shapeRendering="geometricPrecision"
       >
         <g>
           <path
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="graph-type-selector--graphic-line graphic-line-d"
             d="M110.9,110.9c19.9-19.9,19.9-52,0-71.9s-52-19.9-71.9,0s-19.9,52,0,71.9"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="graph-type-selector--graphic-line graphic-line-d"
             x1="39.1"
             y1="110.9"
             x2="35"
             y2="115"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="graph-type-selector--graphic-line graphic-line-d"
             x1="110.9"
             y1="110.9"
             x2="115"
             y2="115"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="graph-type-selector--graphic-line graphic-line-d"
             x1="122"
             y1="94.5"
             x2="127.2"
             y2="96.6"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="graph-type-selector--graphic-line graphic-line-d"
             x1="125.8"
             y1="75"
             x2="131.5"
             y2="75"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="graph-type-selector--graphic-line graphic-line-d"
             x1="122"
             y1="55.5"
             x2="127.2"
             y2="53.4"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="graph-type-selector--graphic-line graphic-line-d"
             x1="110.9"
             y1="39.1"
             x2="115"
             y2="35"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="graph-type-selector--graphic-line graphic-line-d"
             x1="94.5"
             y1="28"
             x2="96.6"
             y2="22.8"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="graph-type-selector--graphic-line graphic-line-d"
             x1="75"
             y1="24.2"
             x2="75"
             y2="18.5"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="graph-type-selector--graphic-line graphic-line-d"
             x1="55.5"
             y1="28"
             x2="53.4"
             y2="22.8"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="graph-type-selector--graphic-line graphic-line-d"
             x1="39.1"
             y1="39.1"
             x2="35"
             y2="35"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="graph-type-selector--graphic-line graphic-line-d"
             x1="28"
             y1="55.5"
             x2="22.8"
             y2="53.4"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="graph-type-selector--graphic-line graphic-line-d"
             x1="24.2"
             y1="75"
             x2="18.5"
             y2="75"
           />
           <line
-            className="viz-type-selector--graphic-line graphic-line-d"
+            className="graph-type-selector--graphic-line graphic-line-d"
             x1="28"
             y1="94.5"
             x2="22.8"
@@ -416,38 +423,38 @@ const GRAPH_SVGS: GraphSVGs = {
           />
         </g>
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-d"
+          className="graph-type-selector--graphic-fill graphic-fill-d"
           d="M78.6,73.4L75,56.3l-3.6,17.1c-0.2,0.5-0.3,1-0.3,1.6c0,2.2,1.8,3.9,3.9,3.9s3.9-1.8,3.9-3.9C78.9,74.4,78.8,73.9,78.6,73.4z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-a"
+          className="graph-type-selector--graphic-fill graphic-fill-a"
           d="M58.9,58.9c8.9-8.9,23.4-8.9,32.3,0l17.1-17.1c-18.4-18.4-48.2-18.4-66.5,0C32.5,50.9,27.9,63,27.9,75h24.2C52.2,69.2,54.4,63.3,58.9,58.9z"
         />
         <path
-          className="viz-type-selector--graphic-line graphic-line-a"
+          className="graph-type-selector--graphic-line graphic-line-a"
           d="M58.9,58.9c8.9-8.9,23.4-8.9,32.3,0l17.1-17.1c-18.4-18.4-48.2-18.4-66.5,0C32.5,50.9,27.9,63,27.9,75h24.2C52.2,69.2,54.4,63.3,58.9,58.9z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-b"
+          className="graph-type-selector--graphic-fill graphic-fill-b"
           d="M58.9,91.1c-4.5-4.5-6.7-10.3-6.7-16.1H27.9c0,12,4.6,24.1,13.8,33.3L58.9,91.1z"
         />
         <path
-          className="viz-type-selector--graphic-line graphic-line-b"
+          className="graph-type-selector--graphic-line graphic-line-b"
           d="M58.9,91.1c-4.5-4.5-6.7-10.3-6.7-16.1H27.9c0,12,4.6,24.1,13.8,33.3L58.9,91.1z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-c"
+          className="graph-type-selector--graphic-fill graphic-fill-c"
           d="M91.1,91.1l17.1,17.1c18.4-18.4,18.4-48.2,0-66.6L91.1,58.9C100.1,67.8,100.1,82.2,91.1,91.1z"
         />
         <path
-          className="viz-type-selector--graphic-line graphic-line-c"
+          className="graph-type-selector--graphic-line graphic-line-c"
           d="M91.1,91.1l17.1,17.1c18.4-18.4,18.4-48.2,0-66.6L91.1,58.9C100.1,67.8,100.1,82.2,91.1,91.1z"
         />
       </svg>
     </div>
   ),
   table: (
-    <div className="viz-type-selector--graphic">
+    <div className="graph-type-selector--graphic">
       <svg
         id="Table"
         x="0px"
@@ -457,73 +464,73 @@ const GRAPH_SVGS: GraphSVGs = {
         viewBox="0 0 150 150"
       >
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-c"
+          className="graph-type-selector--graphic-fill graphic-fill-c"
           d="M55.5,115H19.7c-1.7,0-3.1-1.4-3.1-3.1V61.7h38.9V115z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-b"
+          className="graph-type-selector--graphic-fill graphic-fill-b"
           d="M133.4,61.7H55.5V35h74.8c1.7,0,3.1,1.4,3.1,3.1V61.7z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-a"
+          className="graph-type-selector--graphic-fill graphic-fill-a"
           d="M55.5,61.7H16.6V38.1c0-1.7,1.4-3.1,3.1-3.1h35.9V61.7z"
         />
         <path
-          className="viz-type-selector--graphic-line graphic-line-c"
+          className="graph-type-selector--graphic-line graphic-line-c"
           d="M16.6,88.3v23.6c0,1.7,1.4,3.1,3.1,3.1h35.9V88.3H16.6z"
         />
         <rect
-          className="viz-type-selector--graphic-line graphic-line-c"
+          className="graph-type-selector--graphic-line graphic-line-c"
           x="16.6"
           y="61.7"
           width="38.9"
           height="26.7"
         />
         <path
-          className="viz-type-selector--graphic-line graphic-line-b"
+          className="graph-type-selector--graphic-line graphic-line-b"
           d="M94.5,35v26.7h38.9V38.1c0-1.7-1.4-3.1-3.1-3.1H94.5z"
         />
         <rect
-          className="viz-type-selector--graphic-line graphic-line-b"
+          className="graph-type-selector--graphic-line graphic-line-b"
           x="55.5"
           y="35"
           width="38.9"
           height="26.7"
         />
         <path
-          className="viz-type-selector--graphic-line graphic-line-d"
+          className="graph-type-selector--graphic-line graphic-line-d"
           d="M94.5,115h35.9c1.7,0,3.1-1.4,3.1-3.1V88.3H94.5V115z"
         />
         <rect
-          className="viz-type-selector--graphic-line graphic-line-d"
+          className="graph-type-selector--graphic-line graphic-line-d"
           x="55.5"
           y="88.3"
           width="38.9"
           height="26.7"
         />
         <rect
-          className="viz-type-selector--graphic-line graphic-line-d"
+          className="graph-type-selector--graphic-line graphic-line-d"
           x="94.5"
           y="61.7"
           width="38.9"
           height="26.7"
         />
         <rect
-          className="viz-type-selector--graphic-line graphic-line-d"
+          className="graph-type-selector--graphic-line graphic-line-d"
           x="55.5"
           y="61.7"
           width="38.9"
           height="26.7"
         />
         <path
-          className="viz-type-selector--graphic-line graphic-line-a"
+          className="graph-type-selector--graphic-line graphic-line-a"
           d="M55.5,35H19.7c-1.7,0-3.1,1.4-3.1,3.1v23.6h38.9V35z"
         />
       </svg>
     </div>
   ),
   note: (
-    <div className="viz-type-selector--graphic">
+    <div className="graph-type-selector--graphic">
       <svg
         id="Note"
         x="0px"
@@ -533,11 +540,11 @@ const GRAPH_SVGS: GraphSVGs = {
         viewBox="0 0 150 150"
       >
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-a"
+          className="graph-type-selector--graphic-fill graphic-fill-a"
           d="M61,97.3H37l-4.2,13.6H14l26.7-72.8h16.5l26.9,72.8H65.3L61,97.3z M41.2,83.8h15.7L49,58.5L41.2,83.8z"
         />
         <path
-          className="viz-type-selector--graphic-fill graphic-fill-b"
+          className="graph-type-selector--graphic-fill graphic-fill-b"
           d="M119.1,110.9c-0.6-1.1-1.1-2.7-1.6-4.9c-3.1,3.9-7.4,5.9-13,5.9c-5.1,0-9.4-1.5-13-4.6c-3.6-3.1-5.4-7-5.4-11.6
 	c0-5.9,2.2-10.3,6.5-13.3c4.3-3,10.6-4.5,18.9-4.5h5.2V75c0-5-2.2-7.5-6.5-7.5c-4,0-6,2-6,5.9H87.5c0-5.2,2.2-9.5,6.7-12.7
 	c4.5-3.3,10.1-4.9,17-4.9c6.9,0,12.4,1.7,16.4,5.1c4,3.4,6.1,8,6.2,13.9v24c0.1,5,0.8,8.8,2.3,11.4v0.9H119.1z M108.6,99.9
@@ -545,11 +552,11 @@ const GRAPH_SVGS: GraphSVGs = {
 	C105.7,99.4,107,99.9,108.6,99.9z"
         />
         <path
-          className="viz-type-selector--graphic-line graphic-line-a"
+          className="graph-type-selector--graphic-line graphic-line-a"
           d="M61,97.3H37l-4.2,13.6H14l26.7-72.8h16.5l26.9,72.8H65.3L61,97.3z M41.2,83.8h15.7L49,58.5L41.2,83.8z"
         />
         <path
-          className="viz-type-selector--graphic-line graphic-line-b"
+          className="graph-type-selector--graphic-line graphic-line-b"
           d="M119.1,110.9c-0.6-1.1-1.1-2.7-1.6-4.9c-3.1,3.9-7.4,5.9-13,5.9c-5.1,0-9.4-1.5-13-4.6c-3.6-3.1-5.4-7-5.4-11.6
 	c0-5.9,2.2-10.3,6.5-13.3c4.3-3,10.6-4.5,18.9-4.5h5.2V75c0-5-2.2-7.5-6.5-7.5c-4,0-6,2-6,5.9H87.5c0-5.2,2.2-9.5,6.7-12.7
 	c4.5-3.3,10.1-4.9,17-4.9c6.9,0,12.4,1.7,16.4,5.1c4,3.4,6.1,8,6.2,13.9v24c0.1,5,0.8,8.8,2.3,11.4v0.9H119.1z M108.6,99.9
@@ -570,27 +577,27 @@ interface GraphType {
 export const GRAPH_TYPES: GraphType[] = [
   {
     type: CellType.Line,
-    menuOption: 'Line Graph',
+    menuOption: 'Line',
     graphic: GRAPH_SVGS[CellType.Line],
   },
   {
     type: CellType.Stacked,
-    menuOption: 'Stacked Graph',
+    menuOption: 'Stacked',
     graphic: GRAPH_SVGS[CellType.Stacked],
   },
   {
     type: CellType.StepPlot,
-    menuOption: 'Step-Plot Graph',
+    menuOption: 'Step-Plot',
     graphic: GRAPH_SVGS[CellType.StepPlot],
   },
   {
     type: CellType.Bar,
-    menuOption: 'Bar Graph',
+    menuOption: 'Bar',
     graphic: GRAPH_SVGS[CellType.Bar],
   },
   {
     type: CellType.LinePlusSingleStat,
-    menuOption: 'Line Graph + Single Stat',
+    menuOption: 'Line + Single Stat',
     graphic: GRAPH_SVGS[CellType.LinePlusSingleStat],
   },
   {
diff --git a/ui/src/shared/components/threesizer/Division.tsx b/ui/src/shared/components/threesizer/Division.tsx
index fc83c0b2b..ef6ae6fbb 100644
--- a/ui/src/shared/components/threesizer/Division.tsx
+++ b/ui/src/shared/components/threesizer/Division.tsx
@@ -30,7 +30,7 @@ interface Props {
   orientation: string
   activeHandleID: string
   headerOrientation: string
-  render: (visibility: string) => ReactElement<any>
+  render: (visibility: string, pixels: number) => ReactElement<any>
   onHandleStartDrag: (id: string, e: MouseEvent<HTMLElement>) => void
   onDoubleClick: (id: string) => void
   onMaximize: (id: string) => void
@@ -46,15 +46,17 @@ class Division extends PureComponent<Props> {
   }
 
   private collapseThreshold: number = 0
-  private ref: React.RefObject<HTMLDivElement>
+  private divisionRef: React.RefObject<HTMLDivElement>
+  private divisionPixels: number = 0
 
   constructor(props) {
     super(props)
-    this.ref = React.createRef<HTMLDivElement>()
+    this.divisionRef = React.createRef<HTMLDivElement>()
   }
 
   public componentDidMount() {
     const {name} = this.props
+    this.calcDivisionPixels()
 
     if (!name) {
       return 0
@@ -70,18 +72,25 @@ class Division extends PureComponent<Props> {
     this.collapseThreshold = width + NAME_OFFSET
   }
 
+  public componentDidUpdate() {
+    this.calcDivisionPixels()
+  }
+
   public render() {
     const {render} = this.props
+
     return (
       <div
         className={this.containerClass}
         style={this.containerStyle}
-        ref={this.ref}
+        ref={this.divisionRef}
       >
         {this.renderDragHandle}
         <div className={this.contentsClass} style={this.contentStyle}>
           {this.renderHeader}
-          <div className="threesizer--body">{render(this.visibility)}</div>
+          <div className="threesizer--body">
+            {render(this.visibility, this.divisionPixels)}
+          </div>
         </div>
       </div>
     )
@@ -273,11 +282,11 @@ class Division extends PureComponent<Props> {
       return true
     }
 
-    if (!this.ref || this.props.size >= 0.33) {
+    if (!this.divisionRef || this.props.size >= 0.33) {
       return false
     }
 
-    const {width} = this.ref.current.getBoundingClientRect()
+    const {width} = this.divisionRef.current.getBoundingClientRect()
 
     return width <= this.collapseThreshold
   }
@@ -312,6 +321,19 @@ class Division extends PureComponent<Props> {
     const {id, onMaximize} = this.props
     onMaximize(id)
   }
+
+  private calcDivisionPixels = (): void => {
+    const {orientation} = this.props
+
+    const {clientWidth, clientHeight} = this.divisionRef.current
+
+    let divisionPixels = clientWidth
+    if (orientation === HANDLE_HORIZONTAL) {
+      divisionPixels = clientHeight
+    }
+
+    this.divisionPixels = divisionPixels
+  }
 }
 
 export default Division
diff --git a/ui/src/shared/components/threesizer/Threesizer.tsx b/ui/src/shared/components/threesizer/Threesizer.tsx
index 685af3f3c..36a7bc831 100644
--- a/ui/src/shared/components/threesizer/Threesizer.tsx
+++ b/ui/src/shared/components/threesizer/Threesizer.tsx
@@ -38,7 +38,7 @@ interface DivisionProps {
   size?: number
   headerButtons?: JSX.Element[]
   menuOptions: MenuItem[]
-  render: (visibility?: string) => ReactElement<any>
+  render: (visibility: string, pixels: number) => ReactElement<any>
 }
 
 interface DivisionState extends DivisionProps {
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
index 937c7a8f4..e20bacbe2 100644
--- a/ui/src/style/chronograf.scss
+++ b/ui/src/style/chronograf.scss
@@ -76,6 +76,7 @@
 @import 'src/shared/components/TimeMachine/CellNoteEditor';
 @import 'src/shared/components/MarkdownCell';
 @import 'src/sources/components/DashboardStep';
+@import 'src/dashboards/components/GraphTypeSelector';
 
 
 // Reusable UI Components
diff --git a/ui/src/style/components/ceo-display-options.scss b/ui/src/style/components/ceo-display-options.scss
index 630e74484..6f92dd6d6 100644
--- a/ui/src/style/components/ceo-display-options.scss
+++ b/ui/src/style/components/ceo-display-options.scss
@@ -6,32 +6,16 @@
 $graph-type--gutter: 4px;
 
 .display-options {
-  height: 100%;
-  min-height: 300px;
-  display: flex;
-  background-color: $g2-kevlar;
-  padding: 8px 60px;
-  flex-wrap: nowrap;
-  align-items: stretch;
-}
-.display-options--cell {
-  flex: 1 0 0;
-  margin-right: 8px;
-  border-radius: 3px;
   background-color: $g3-castle;
+}
 
-  &:last-of-type {
-    margin: 0;
-  }
-}
-.display-options--cellx2 {
-  flex: 2 0 0;
-}
-.display-options--cell-wrapper {
-  width: 100%;
-  position: relative;
-  display: inline-block;
+.display-options--wrapper {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+  align-items: stretch;
   padding: 30px;
+  min-width: 500px;
 }
 
 .display-options--header {
@@ -40,173 +24,6 @@ $graph-type--gutter: 4px;
   color: $g11-sidewalk;
   @include no-user-select();
 }
-.viz-type-selector {
-  width: 100%;
-  display: inline-block;
-  margin: 0 (-$graph-type--gutter / 2);
-  margin-bottom: -$graph-type--gutter;
-}
-.viz-type-selector--option {
-  float: left;
-  width: 33.3333%;
-  padding-bottom: 33.3333%;
-  position: relative;
-
-  > div > p {
-    margin: 0;
-    font-size: 14px;
-    font-weight: 900;
-    position: absolute;
-    bottom: 18px;
-    left: 10px;
-    width: calc(100% - 20px);
-    text-align: center;
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  // Actual "card"
-  > div {
-    background-color: $g2-kevlar;
-    color: $g11-sidewalk;
-    border-radius: 4px;
-    width: calc(100% - #{$graph-type--gutter});
-    height: calc(100% - #{$graph-type--gutter});
-    position: absolute;
-    top: $graph-type--gutter / 2;
-    left: $graph-type--gutter / 2;
-    transition: color 0.25s ease, border-color 0.25s ease,
-      background-color 0.25s ease;
-
-    &:hover {
-      cursor: pointer;
-      background-color: $g4-onyx;
-      color: $g15-platinum;
-    }
-  }
-}
-// Increase options per row as screen enlarges
-@media only screen and (min-width: 1000px) {
-  .viz-type-selector--option {
-    width: 25%;
-    padding-bottom: 25%;
-  }
-}
-@media only screen and (min-width: 1270px) {
-  .viz-type-selector--option {
-    width: 20%;
-    padding-bottom: 20%;
-  }
-}
-@media only screen and (min-width: 1600px) {
-  .viz-type-selector--option {
-    width: 16.6667%;
-    padding-bottom: 16.6667%;
-  }
-}
-@media only screen and (min-width: 2000px) {
-  .viz-type-selector--option {
-    width: 12.5%;
-    padding-bottom: 12.5%;
-  }
-}
-
-// Active state "card"
-.viz-type-selector--option.active > div,
-.viz-type-selector--option.active > div:hover {
-  background-color: $g5-pepper;
-  color: $g18-cloud;
-}
-
-.viz-type-selector--graphic {
-  width: calc(100% - 54px);
-  height: calc(100% - 54px);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  > svg,
-  > svg * {
-    transform: translate3d(0, 0, 0);
-  }
-  > svg {
-    width: 100%;
-    height: 100%;
-  }
-}
-.viz-type-selector--graphic-line {
-  stroke-width: 2px;
-  fill: none;
-  stroke-linecap: round;
-  stroke-miterlimit: 10;
-  // transition: all 0.5s ease;
-
-  &.graphic-line-a {
-    stroke: $g11-sidewalk;
-  }
-  &.graphic-line-b {
-    stroke: $g9-mountain;
-  }
-  &.graphic-line-c {
-    stroke: $g7-graphite;
-  }
-  &.graphic-line-d {
-    stroke: $g13-mist;
-  }
-}
-.viz-type-selector--graphic-fill {
-  opacity: 0.045;
-  // transition: opacity 0.5s ease;
-
-  &.graphic-fill-a {
-    fill: $g11-sidewalk;
-  }
-  &.graphic-fill-b {
-    fill: $g9-mountain;
-  }
-  &.graphic-fill-c {
-    fill: $g7-graphite;
-  }
-  &.graphic-fill-d {
-    fill: $g13-mist;
-    opacity: 1;
-  }
-}
-.viz-type-selector--option.active .viz-type-selector--graphic {
-  .viz-type-selector--graphic-line.graphic-line-a {
-    stroke: $c-pool;
-  }
-  .viz-type-selector--graphic-line.graphic-line-b {
-    stroke: $c-dreamsicle;
-  }
-  .viz-type-selector--graphic-line.graphic-line-c {
-    stroke: $c-rainforest;
-  }
-  .viz-type-selector--graphic-line.graphic-line-d {
-    stroke: $g17-whisper;
-  }
-  .viz-type-selector--graphic-fill.graphic-fill-a {
-    fill: $c-pool;
-  }
-  .viz-type-selector--graphic-fill.graphic-fill-b {
-    fill: $c-dreamsicle;
-  }
-  .viz-type-selector--graphic-fill.graphic-fill-c {
-    fill: $c-rainforest;
-  }
-  .viz-type-selector--graphic-fill.graphic-fill-a,
-  .viz-type-selector--graphic-fill.graphic-fill-b,
-  .viz-type-selector--graphic-fill.graphic-fill-c {
-    opacity: 0.22;
-  }
-  .viz-type-selector--graphic-fill.graphic-fill-d {
-    fill: $g17-whisper;
-    opacity: 1;
-  }
-}
 
 .display-options--footnote {
   color: $g11-sidewalk;
diff --git a/ui/src/style/unsorted.scss b/ui/src/style/unsorted.scss
index 820fb8cf5..fc509e6df 100644
--- a/ui/src/style/unsorted.scss
+++ b/ui/src/style/unsorted.scss
@@ -382,6 +382,7 @@ div.dropdown.dropdown-stretch > button.dropdown-toggle {
   height: calc(100% - 60px);
   overflow: hidden;
   border-radius: 0 0 $radius $radius;
+  outline: none;
 }
 
 .deceo {