From 2c2265f5671b82997515ea26c978b575e86dd3e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= <raphael.benitte@ekino.com>
Date: Sat, 27 Jan 2018 12:17:42 +0900
Subject: [PATCH] feat(website): improve chart tabs

---
 packages/nivo-legends/src/props.js            |  2 +-
 website/src/components/ChartHeader.js         | 12 +--
 website/src/components/ChartTabs.js           | 75 +++++++++----------
 website/src/components/charts/bar/Bar.js      | 10 +--
 .../src/components/charts/bar/BarCanvas.js    |  5 +-
 .../src/components/charts/bubble/Bubble.js    | 22 +++---
 .../components/charts/bubble/BubbleCanvas.js  | 30 ++++----
 .../components/charts/bubble/BubbleHtml.js    | 22 +++---
 website/src/components/charts/chord/Chord.js  | 29 ++++---
 .../components/charts/chord/ChordCanvas.js    | 21 +++---
 .../src/components/charts/heatmap/HeatMap.js  | 11 ++-
 .../charts/heatmap/HeatMapCanvas.js           |  7 +-
 website/src/components/charts/line/Line.js    | 10 +--
 website/src/components/charts/pie/Pie.js      |  3 +-
 website/src/components/charts/radar/Radar.js  | 22 +++---
 .../src/components/charts/sankey/Sankey.js    | 15 ++--
 .../charts/scatterplot/ScatterPlot.js         | 15 ++--
 .../charts/scatterplot/ScatterPlotCanvas.js   |  9 +--
 .../src/components/charts/stream/Stream.js    | 10 +--
 .../components/charts/sunburst/Sunburst.js    | 22 +++---
 .../src/components/charts/treemap/TreeMap.js  | 27 +++----
 .../charts/treemap/TreeMapCanvas.js           | 30 ++++----
 .../components/charts/treemap/TreeMapHtml.js  | 27 +++----
 .../src/components/charts/voronoi/Voronoi.js  | 24 +++---
 website/src/styles/charts.css                 | 54 ++++++-------
 website/src/styles/index.css                  | 10 ++-
 26 files changed, 233 insertions(+), 291 deletions(-)

diff --git a/packages/nivo-legends/src/props.js b/packages/nivo-legends/src/props.js
index 34fc49699..8d2ed17bb 100644
--- a/packages/nivo-legends/src/props.js
+++ b/packages/nivo-legends/src/props.js
@@ -76,5 +76,5 @@ export const LegendPropShape = {
     symbolSize: PropTypes.number,
     symbolSpacing: PropTypes.number,
     symbolShape: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    textColor: PropTypes.string
+    textColor: PropTypes.string,
 }
diff --git a/website/src/components/ChartHeader.js b/website/src/components/ChartHeader.js
index f996e5188..04b05b4f0 100644
--- a/website/src/components/ChartHeader.js
+++ b/website/src/components/ChartHeader.js
@@ -7,18 +7,11 @@ class ChartHeader extends Component {
     }
 
     render() {
-        const { chartClass, tags, diceRoll } = this.props
+        const { chartClass, tags } = this.props
 
         return (
             <div className="chart_header">
-                <h1 className="chart__title">
-                    {chartClass}
-                    {diceRoll && (
-                        <span className="dice-roll no-select" onClick={diceRoll}>
-                            roll the dice
-                        </span>
-                    )}
-                </h1>
+                <h1 className="chart__title">{chartClass}</h1>
                 <div className="component_meta">
                     {tags.map(tag => (
                         <span key={tag} className="component_meta_tag">
@@ -34,7 +27,6 @@ class ChartHeader extends Component {
 ChartHeader.propTypes = {
     chartClass: PropTypes.string.isRequired,
     tags: PropTypes.array.isRequired,
-    diceRoll: PropTypes.func,
 }
 
 ChartHeader.defaultProps = {
diff --git a/website/src/components/ChartTabs.js b/website/src/components/ChartTabs.js
index 77459d1e0..2b112c63f 100644
--- a/website/src/components/ChartTabs.js
+++ b/website/src/components/ChartTabs.js
@@ -17,7 +17,7 @@ export default class ChartTabs extends Component {
         data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
         code: PropTypes.string.isRequired,
         nodeCount: PropTypes.number,
-        mode: PropTypes.string.isRequired,
+        diceRoll: PropTypes.func,
     }
 
     static defaultProps = {
@@ -38,12 +38,12 @@ export default class ChartTabs extends Component {
     }
 
     render() {
-        const { chartClass, mode, data, code, children, nodeCount } = this.props
+        const { chartClass, data, code, children, diceRoll, nodeCount } = this.props
         const { tab: currentTab, hoverTab } = this.state
 
         let content
         if (currentTab === 'chart') {
-            content = children
+            content = <div className="chart-tabs__content">{children}</div>
         } else if (currentTab === 'code') {
             content = (
                 <div className="code-snippet">
@@ -59,46 +59,43 @@ export default class ChartTabs extends Component {
         }
 
         return (
-            <div
-                className={`chart-tabs${
-                    mode.length > 0 ? ` chart-tabs--${mode}` : ''
-                } chart-tabs--${currentTab}`}
-            >
-                {content}
+            <div className={`chart-tabs chart-tabs--${currentTab}`}>
                 <div className="chart-tabs__menu">
-                    <span
-                        className={`chart-tabs__menu__helper chart-tabs__menu__helper--${currentTab}`}
-                    >
-                        {hoverTab}
-                    </span>
-                    <div className="chart-tabs__menu__wrapper">
-                        {tabs.map(tab => {
-                            const icon = tab === 'chart' ? chartClass : tab
-                            const iconColor =
-                                tab === currentTab || hoverTab === tab ? 'red' : 'grey'
+                    {tabs.map(tab => {
+                        const isCurrent = tab === currentTab
+                        const icon = tab === 'chart' ? chartClass : tab
+                        const iconColor = isCurrent || hoverTab === tab ? 'red' : 'grey'
 
-                            return (
+                        return (
+                            <span
+                                key={tab}
+                                className={`chart-tabs__menu__item no-select ${
+                                    isCurrent ? 'chart-tabs__menu__item--current' : ''
+                                }`}
+                                onClick={() => {
+                                    this.handleTabToggle(tab)
+                                }}
+                                onMouseEnter={() => {
+                                    this.handleTabHover(tab)
+                                }}
+                                onMouseLeave={() => {
+                                    this.handleTabHover(null)
+                                }}
+                            >
                                 <span
-                                    key={tab}
-                                    className="chart-tabs__menu__item"
-                                    onClick={() => {
-                                        this.handleTabToggle(tab)
-                                    }}
-                                    onMouseEnter={() => {
-                                        this.handleTabHover(tab)
-                                    }}
-                                    onMouseLeave={() => {
-                                        this.handleTabHover(null)
-                                    }}
-                                >
-                                    <span
-                                        className={`chart-tabs__menu__item__icon sprite-icons-${icon}-${iconColor}`}
-                                    />
-                                </span>
-                            )
-                        })}
-                    </div>
+                                    className={`chart-tabs__menu__item__icon sprite-icons-${icon}-${iconColor}`}
+                                />
+                                {tab}
+                            </span>
+                        )
+                    })}
+                    {diceRoll && (
+                        <span className="dice-roll no-select" onClick={diceRoll}>
+                            roll the dice
+                        </span>
+                    )}
                 </div>
+                {content}
                 {currentTab === 'chart' &&
                     nodeCount !== undefined && (
                         <span className="chart-tabs__node-count">
diff --git a/website/src/components/charts/bar/Bar.js b/website/src/components/charts/bar/Bar.js
index 38bcdae90..260725fdf 100644
--- a/website/src/components/charts/bar/Bar.js
+++ b/website/src/components/charts/bar/Bar.js
@@ -174,13 +174,7 @@ export default class Bar extends Component {
             { pkg: '@nivo/bar', defaults: BarDefaultProps }
         )
 
-        const header = (
-            <ChartHeader
-                chartClass="Bar"
-                tags={['basic', 'isomorphic', 'api']}
-                diceRoll={this.diceRoll}
-            />
-        )
+        const header = <ChartHeader chartClass="Bar" tags={['basic', 'isomorphic', 'api']} />
 
         const description = (
             <div className="chart-description">
@@ -250,7 +244,7 @@ export default class Bar extends Component {
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="bar" code={code} data={data}>
+                    <ChartTabs chartClass="bar" code={code} data={data} diceRoll={this.diceRoll}>
                         <ResponsiveBar
                             data={data}
                             keys={keys}
diff --git a/website/src/components/charts/bar/BarCanvas.js b/website/src/components/charts/bar/BarCanvas.js
index a67d3b69a..059095866 100644
--- a/website/src/components/charts/bar/BarCanvas.js
+++ b/website/src/components/charts/bar/BarCanvas.js
@@ -141,9 +141,7 @@ export default class BarCanvas extends Component {
             { pkg: '@nivo/bar' }
         )
 
-        const header = (
-            <ChartHeader chartClass="BarCanvas" tags={['bar', 'canvas']} diceRoll={this.diceRoll} />
-        )
+        const header = <ChartHeader chartClass="BarCanvas" tags={['bar', 'canvas']} />
 
         const description = (
             <div className="chart-description">
@@ -170,6 +168,7 @@ export default class BarCanvas extends Component {
                         chartClass="bar"
                         code={code}
                         data={data}
+                        diceRoll={this.diceRoll}
                         nodeCount={data.length * keys.length}
                     >
                         <ResponsiveBarCanvas
diff --git a/website/src/components/charts/bubble/Bubble.js b/website/src/components/charts/bubble/Bubble.js
index 5ba0e09b1..7afb63593 100644
--- a/website/src/components/charts/bubble/Bubble.js
+++ b/website/src/components/charts/bubble/Bubble.js
@@ -92,11 +92,7 @@ export default class Bubble extends Component {
         })
 
         const header = (
-            <ChartHeader
-                chartClass="Bubble"
-                tags={['hierarchy', 'svg', 'isomorphic', 'api']}
-                diceRoll={diceRoll}
-            />
+            <ChartHeader chartClass="Bubble" tags={['hierarchy', 'svg', 'isomorphic', 'api']} />
         )
 
         const description = (
@@ -151,24 +147,18 @@ export default class Bubble extends Component {
 
         return (
             <div className="page_content grid">
-                <div className="chart-page_aside">
+                <div className="chart-page_main">
                     <MediaQuery query="(max-width: 1000px)">
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="bubble" code={code} data={root}>
+                    <ChartTabs chartClass="bubble" code={code} data={root} diceRoll={diceRoll}>
                         <ResponsiveBubble
                             root={cloneDeep(root)}
                             {...mappedSettings}
                             theme={nivoTheme}
                         />
                     </ChartTabs>
-                </div>
-                <div className="chart-page_main">
-                    <MediaQuery query="(min-width: 1000px)">
-                        {header}
-                        {description}
-                    </MediaQuery>
                     <BubbleControls
                         scope="Bubble"
                         settings={settings}
@@ -176,6 +166,12 @@ export default class Bubble extends Component {
                     />
                     <ComponentPropsDocumentation chartClass="Bubble" properties={properties} />
                 </div>
+                <div className="chart-page_aside">
+                    <MediaQuery query="(min-width: 1000px)">
+                        {header}
+                        {description}
+                    </MediaQuery>
+                </div>
             </div>
         )
     }
diff --git a/website/src/components/charts/bubble/BubbleCanvas.js b/website/src/components/charts/bubble/BubbleCanvas.js
index 29eb6aa20..a7167a845 100644
--- a/website/src/components/charts/bubble/BubbleCanvas.js
+++ b/website/src/components/charts/bubble/BubbleCanvas.js
@@ -98,13 +98,7 @@ export default class BubbleCanvas extends Component {
             defaults: BubbleCanvasDefaultProps,
         })
 
-        const header = (
-            <ChartHeader
-                chartClass="BubbleCanvas"
-                tags={['hierarchy', 'canvas']}
-                diceRoll={diceRoll}
-            />
-        )
+        const header = <ChartHeader chartClass="BubbleCanvas" tags={['hierarchy', 'canvas']} />
 
         const description = (
             <div className="chart-description">
@@ -124,24 +118,24 @@ export default class BubbleCanvas extends Component {
 
         return (
             <div className="page_content grid">
-                <div className="chart-page_aside">
+                <div className="chart-page_main">
                     <MediaQuery query="(max-width: 1000px)">
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="bubble" code={code} data={root} nodeCount={NODE_COUNT}>
+                    <ChartTabs
+                        chartClass="bubble"
+                        code={code}
+                        data={root}
+                        nodeCount={NODE_COUNT}
+                        diceRoll={diceRoll}
+                    >
                         <ResponsiveBubbleCanvas
                             root={cloneDeep(root)}
                             {...mappedSettings}
                             theme={nivoTheme}
                         />
                     </ChartTabs>
-                </div>
-                <div className="chart-page_main">
-                    <MediaQuery query="(min-width: 1000px)">
-                        {header}
-                        {description}
-                    </MediaQuery>
                     <BubbleControls
                         scope="BubbleCanvas"
                         settings={settings}
@@ -152,6 +146,12 @@ export default class BubbleCanvas extends Component {
                         properties={properties}
                     />
                 </div>
+                <div className="chart-page_aside">
+                    <MediaQuery query="(min-width: 1000px)">
+                        {header}
+                        {description}
+                    </MediaQuery>
+                </div>
             </div>
         )
     }
diff --git a/website/src/components/charts/bubble/BubbleHtml.js b/website/src/components/charts/bubble/BubbleHtml.js
index 42079a9e9..59da3059a 100644
--- a/website/src/components/charts/bubble/BubbleHtml.js
+++ b/website/src/components/charts/bubble/BubbleHtml.js
@@ -81,11 +81,7 @@ export default class BubbleHtml extends Component {
         })
 
         const header = (
-            <ChartHeader
-                chartClass="BubbleHtml"
-                tags={['hierarchy', 'html', 'isomorphic']}
-                diceRoll={diceRoll}
-            />
+            <ChartHeader chartClass="BubbleHtml" tags={['hierarchy', 'html', 'isomorphic']} />
         )
 
         const description = (
@@ -140,24 +136,18 @@ export default class BubbleHtml extends Component {
 
         return (
             <div className="page_content grid">
-                <div className="chart-page_aside">
+                <div className="chart-page_main">
                     <MediaQuery query="(max-width: 1000px)">
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="bubble" code={code} data={root}>
+                    <ChartTabs chartClass="bubble" code={code} data={root} diceRoll={diceRoll}>
                         <ResponsiveBubbleHtml
                             root={cloneDeep(root)}
                             {...mappedSettings}
                             theme={nivoTheme}
                         />
                     </ChartTabs>
-                </div>
-                <div className="chart-page_main">
-                    <MediaQuery query="(min-width: 1000px)">
-                        {header}
-                        {description}
-                    </MediaQuery>
                     <BubbleControls
                         scope="BubbleHtml"
                         settings={settings}
@@ -165,6 +155,12 @@ export default class BubbleHtml extends Component {
                     />
                     <ComponentPropsDocumentation chartClass="BubbleHtml" properties={properties} />
                 </div>
+                <div className="chart-page_aside">
+                    <MediaQuery query="(min-width: 1000px)">
+                        {header}
+                        {description}
+                    </MediaQuery>
+                </div>
             </div>
         )
     }
diff --git a/website/src/components/charts/chord/Chord.js b/website/src/components/charts/chord/Chord.js
index 60bef68f4..f984c4d71 100644
--- a/website/src/components/charts/chord/Chord.js
+++ b/website/src/components/charts/chord/Chord.js
@@ -114,13 +114,7 @@ export default class Chord extends Component {
             }
         )
 
-        const header = (
-            <ChartHeader
-                chartClass="Chord"
-                tags={['relational', 'isomorphic', 'api']}
-                diceRoll={this.diceRoll}
-            />
-        )
+        const header = <ChartHeader chartClass="Chord" tags={['relational', 'isomorphic', 'api']} />
 
         const description = (
             <div className="chart-description">
@@ -169,12 +163,17 @@ export default class Chord extends Component {
 
         return (
             <div className="page_content grid">
-                <div className="chart-page_aside">
+                <div className="chart-page_main">
                     <MediaQuery query="(max-width: 1000px)">
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="chord" code={code} data={matrix}>
+                    <ChartTabs
+                        chartClass="chord"
+                        code={code}
+                        data={matrix}
+                        diceRoll={this.diceRoll}
+                    >
                         <ResponsiveChord
                             matrix={matrix}
                             keys={keys}
@@ -182,12 +181,6 @@ export default class Chord extends Component {
                             theme={nivoTheme}
                         />
                     </ChartTabs>
-                </div>
-                <div className="chart-page_main">
-                    <MediaQuery query="(min-width: 1000px)">
-                        {header}
-                        {description}
-                    </MediaQuery>
                     <ChordControls
                         scope="Chord"
                         settings={settings}
@@ -195,6 +188,12 @@ export default class Chord extends Component {
                     />
                     <ComponentPropsDocumentation chartClass="Chord" properties={properties} />
                 </div>
+                <div className="chart-page_aside">
+                    <MediaQuery query="(min-width: 1000px)">
+                        {header}
+                        {description}
+                    </MediaQuery>
+                </div>
             </div>
         )
     }
diff --git a/website/src/components/charts/chord/ChordCanvas.js b/website/src/components/charts/chord/ChordCanvas.js
index 3a3f16768..08b57a628 100644
--- a/website/src/components/charts/chord/ChordCanvas.js
+++ b/website/src/components/charts/chord/ChordCanvas.js
@@ -104,11 +104,7 @@ export default class ChordCanvas extends Component {
         )
 
         const header = (
-            <ChartHeader
-                chartClass="ChordCanvas"
-                tags={['relational', 'canvas', 'experimental']}
-                diceRoll={this.diceRoll}
-            />
+            <ChartHeader chartClass="ChordCanvas" tags={['relational', 'canvas', 'experimental']} />
         )
 
         const description = (
@@ -128,7 +124,7 @@ export default class ChordCanvas extends Component {
 
         return (
             <div className="page_content grid">
-                <div className="chart-page_aside">
+                <div className="chart-page_main">
                     <MediaQuery query="(max-width: 1000px)">
                         {header}
                         {description}
@@ -137,6 +133,7 @@ export default class ChordCanvas extends Component {
                         chartClass="chord"
                         code={code}
                         data={matrix}
+                        diceRoll={this.diceRoll}
                         nodeCount={MATRIX_SIZE * MATRIX_SIZE + MATRIX_SIZE}
                     >
                         <ResponsiveChordCanvas
@@ -146,12 +143,6 @@ export default class ChordCanvas extends Component {
                             theme={nivoTheme}
                         />
                     </ChartTabs>
-                </div>
-                <div className="chart-page_main">
-                    <MediaQuery query="(min-width: 1000px)">
-                        {header}
-                        {description}
-                    </MediaQuery>
                     <ChordControls
                         scope="ChordCanvas"
                         settings={settings}
@@ -159,6 +150,12 @@ export default class ChordCanvas extends Component {
                     />
                     <ComponentPropsDocumentation chartClass="ChordCanvas" properties={properties} />
                 </div>
+                <div className="chart-page_aside">
+                    <MediaQuery query="(min-width: 1000px)">
+                        {header}
+                        {description}
+                    </MediaQuery>
+                </div>
             </div>
         )
     }
diff --git a/website/src/components/charts/heatmap/HeatMap.js b/website/src/components/charts/heatmap/HeatMap.js
index 2dda79051..f947a0582 100644
--- a/website/src/components/charts/heatmap/HeatMap.js
+++ b/website/src/components/charts/heatmap/HeatMap.js
@@ -150,9 +150,7 @@ export default class HeatMap extends Component {
             { pkg: '@nivo/heatmap ', defaults: HeatMapDefaultProps }
         )
 
-        const header = (
-            <ChartHeader chartClass="HeatMap" tags={['heatmap', 'svg']} diceRoll={this.diceRoll} />
-        )
+        const header = <ChartHeader chartClass="HeatMap" tags={['heatmap', 'svg']} />
 
         const description = (
             <div className="chart-description">
@@ -200,7 +198,12 @@ export default class HeatMap extends Component {
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="heatmap" code={code} data={data}>
+                    <ChartTabs
+                        chartClass="heatmap"
+                        code={code}
+                        data={data}
+                        diceRoll={this.diceRoll}
+                    >
                         <ResponsiveHeatMap
                             data={data}
                             keys={keys}
diff --git a/website/src/components/charts/heatmap/HeatMapCanvas.js b/website/src/components/charts/heatmap/HeatMapCanvas.js
index b28b12f88..62d45a584 100644
--- a/website/src/components/charts/heatmap/HeatMapCanvas.js
+++ b/website/src/components/charts/heatmap/HeatMapCanvas.js
@@ -140,11 +140,7 @@ export default class HeatMap extends Component {
         )
 
         const header = (
-            <ChartHeader
-                chartClass="HeatMapCanvas"
-                tags={['heatmap', 'canvas', 'experimental']}
-                diceRoll={this.diceRoll}
-            />
+            <ChartHeader chartClass="HeatMapCanvas" tags={['heatmap', 'canvas', 'experimental']} />
         )
 
         const description = (
@@ -173,6 +169,7 @@ export default class HeatMap extends Component {
                         chartClass="heatmap"
                         code={code}
                         data={data}
+                        diceRoll={this.diceRoll}
                         nodeCount={data.length * keys.length}
                     >
                         <ResponsiveHeatMapCanvas
diff --git a/website/src/components/charts/line/Line.js b/website/src/components/charts/line/Line.js
index 3a21f3573..aaa3d6832 100644
--- a/website/src/components/charts/line/Line.js
+++ b/website/src/components/charts/line/Line.js
@@ -55,13 +55,7 @@ export default class Line extends Component {
             defaults: LineDefaultProps,
         })
 
-        const header = (
-            <ChartHeader
-                chartClass="Line"
-                tags={['basic', 'isomorphic', 'api']}
-                diceRoll={diceRoll}
-            />
-        )
+        const header = <ChartHeader chartClass="Line" tags={['basic', 'isomorphic', 'api']} />
 
         const description = (
             <div className="chart-description">
@@ -114,7 +108,7 @@ export default class Line extends Component {
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="line" code={code} data={data} mode="horizontal">
+                    <ChartTabs chartClass="line" code={code} data={data} diceRoll={diceRoll}>
                         <ResponsiveLine data={data} {...mappedSettings} theme={nivoTheme} />
                     </ChartTabs>
                     <LineControls
diff --git a/website/src/components/charts/pie/Pie.js b/website/src/components/charts/pie/Pie.js
index f6ce4eee5..e700eed42 100644
--- a/website/src/components/charts/pie/Pie.js
+++ b/website/src/components/charts/pie/Pie.js
@@ -59,7 +59,6 @@ export default class Pie extends Component {
             <ChartHeader
                 chartClass="Pie"
                 tags={['basic', 'radial', 'circle', 'isomorphic', 'api']}
-                diceRoll={diceRoll}
             />
         )
 
@@ -115,7 +114,7 @@ export default class Pie extends Component {
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="pie" code={code} data={data}>
+                    <ChartTabs chartClass="pie" code={code} data={data} diceRoll={diceRoll}>
                         <ResponsivePie data={data} {...mappedSettings} theme={nivoTheme} />
                     </ChartTabs>
                     <PieControls
diff --git a/website/src/components/charts/radar/Radar.js b/website/src/components/charts/radar/Radar.js
index 8d2872f1b..ce9494ca5 100644
--- a/website/src/components/charts/radar/Radar.js
+++ b/website/src/components/charts/radar/Radar.js
@@ -104,11 +104,7 @@ export default class Radar extends Component {
         )
 
         const header = (
-            <ChartHeader
-                chartClass="Radar"
-                tags={['radar', 'radial', 'circle', 'isomorphic']}
-                diceRoll={diceRoll}
-            />
+            <ChartHeader chartClass="Radar" tags={['radar', 'radial', 'circle', 'isomorphic']} />
         )
 
         const description = (
@@ -157,12 +153,12 @@ export default class Radar extends Component {
 
         return (
             <div className="page_content grid">
-                <div className="chart-page_aside">
+                <div className="chart-page_main">
                     <MediaQuery query="(max-width: 1000px)">
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="radar" code={code} data={data}>
+                    <ChartTabs chartClass="radar" code={code} data={data} diceRoll={diceRoll}>
                         <ResponsiveRadar
                             data={data}
                             keys={keys}
@@ -171,12 +167,6 @@ export default class Radar extends Component {
                             theme={nivoTheme}
                         />
                     </ChartTabs>
-                </div>
-                <div className="chart-page_main">
-                    <MediaQuery query="(min-width: 1000px)">
-                        {header}
-                        {description}
-                    </MediaQuery>
                     <RadarControls
                         scope="Radar"
                         settings={settings}
@@ -184,6 +174,12 @@ export default class Radar extends Component {
                     />
                     <ComponentPropsDocumentation chartClass="Radar" properties={properties} />
                 </div>
+                <div className="chart-page_aside">
+                    <MediaQuery query="(min-width: 1000px)">
+                        {header}
+                        {description}
+                    </MediaQuery>
+                </div>
             </div>
         )
     }
diff --git a/website/src/components/charts/sankey/Sankey.js b/website/src/components/charts/sankey/Sankey.js
index 7d5399130..a503fa99d 100644
--- a/website/src/components/charts/sankey/Sankey.js
+++ b/website/src/components/charts/sankey/Sankey.js
@@ -96,13 +96,7 @@ export default class Sankey extends Component {
 
         const code = generateCode('ResponsiveSankey', mappedSettings, { pkg: '@nivo/sankey' })
 
-        const header = (
-            <ChartHeader
-                chartClass="Sankey"
-                tags={['relational', 'flow', 'api']}
-                diceRoll={randomizeLinkValues}
-            />
-        )
+        const header = <ChartHeader chartClass="Sankey" tags={['relational', 'flow', 'api']} />
 
         const description = (
             <div className="chart-description">
@@ -170,7 +164,12 @@ export default class Sankey extends Component {
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="sankey" code={code} data={data}>
+                    <ChartTabs
+                        chartClass="sankey"
+                        code={code}
+                        data={data}
+                        diceRoll={randomizeLinkValues}
+                    >
                         <ResponsiveSankey data={data} {...mappedSettings} theme={nivoTheme} />
                     </ChartTabs>
                     <SankeyControls
diff --git a/website/src/components/charts/scatterplot/ScatterPlot.js b/website/src/components/charts/scatterplot/ScatterPlot.js
index b8132f0ca..78978775d 100644
--- a/website/src/components/charts/scatterplot/ScatterPlot.js
+++ b/website/src/components/charts/scatterplot/ScatterPlot.js
@@ -136,13 +136,7 @@ export default class ScatterPlot extends Component {
             { pkg: '@nivo/scatterplot', defaults: ScatterPlotDefaultProps }
         )
 
-        const header = (
-            <ChartHeader
-                chartClass="ScatterPlot"
-                tags={['basic', 'isomorphic']}
-                diceRoll={this.diceRoll}
-            />
-        )
+        const header = <ChartHeader chartClass="ScatterPlot" tags={['basic', 'isomorphic']} />
 
         const description = (
             <div className="chart-description">
@@ -180,7 +174,12 @@ export default class ScatterPlot extends Component {
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="scatterplot" code={code} data={data}>
+                    <ChartTabs
+                        chartClass="scatterplot"
+                        code={code}
+                        data={data}
+                        diceRoll={this.diceRoll}
+                    >
                         <ResponsiveScatterPlot
                             data={data}
                             {...mappedSettings}
diff --git a/website/src/components/charts/scatterplot/ScatterPlotCanvas.js b/website/src/components/charts/scatterplot/ScatterPlotCanvas.js
index d7e416148..b635fc49d 100644
--- a/website/src/components/charts/scatterplot/ScatterPlotCanvas.js
+++ b/website/src/components/charts/scatterplot/ScatterPlotCanvas.js
@@ -133,13 +133,7 @@ export default class ScatterPlotCanvas extends Component {
             { pkg: '@nivo/scatterplot', defaults: ScatterPlotDefaultProps }
         )
 
-        const header = (
-            <ChartHeader
-                chartClass="ScatterPlotCanvas"
-                tags={['basic', 'canvas']}
-                diceRoll={this.diceRoll}
-            />
-        )
+        const header = <ChartHeader chartClass="ScatterPlotCanvas" tags={['basic', 'canvas']} />
 
         const description = (
             <div className="chart-description">
@@ -168,6 +162,7 @@ export default class ScatterPlotCanvas extends Component {
                         chartClass="scatterplot"
                         code={code}
                         data={data}
+                        diceRoll={this.diceRoll}
                         nodeCount={data.length * data[0].data.length}
                     >
                         <ResponsiveScatterPlotCanvas
diff --git a/website/src/components/charts/stream/Stream.js b/website/src/components/charts/stream/Stream.js
index f2a35a586..083f50d23 100644
--- a/website/src/components/charts/stream/Stream.js
+++ b/website/src/components/charts/stream/Stream.js
@@ -58,13 +58,7 @@ export default class Stream extends Component {
             defaults: StreamDefaultProps,
         })
 
-        const header = (
-            <ChartHeader
-                chartClass="Stream"
-                tags={['stacked', 'isomorphic']}
-                diceRoll={this.diceRoll}
-            />
-        )
+        const header = <ChartHeader chartClass="Stream" tags={['stacked', 'isomorphic']} />
 
         const description = (
             <div className="chart-description">
@@ -86,7 +80,7 @@ export default class Stream extends Component {
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="stream" mode="horizontal" code={code} data={data}>
+                    <ChartTabs chartClass="stream" code={code} data={data} diceRoll={this.diceRoll}>
                         <ResponsiveStream
                             data={data}
                             keys={keys}
diff --git a/website/src/components/charts/sunburst/Sunburst.js b/website/src/components/charts/sunburst/Sunburst.js
index d4cbcf626..c635f472d 100644
--- a/website/src/components/charts/sunburst/Sunburst.js
+++ b/website/src/components/charts/sunburst/Sunburst.js
@@ -67,11 +67,7 @@ export default class Sunburst extends Component {
         const code = generateCode('ResponsiveSunburst', mappedSettings, { pkg: '@nivo/sunburst' })
 
         const header = (
-            <ChartHeader
-                chartClass="Sunburst"
-                tags={['hierarchy', 'radial', 'circle']}
-                diceRoll={diceRoll}
-            />
+            <ChartHeader chartClass="Sunburst" tags={['hierarchy', 'radial', 'circle']} />
         )
 
         const description = (
@@ -85,20 +81,14 @@ export default class Sunburst extends Component {
 
         return (
             <div className="page_content grid">
-                <div className="chart-page_aside">
+                <div className="chart-page_main">
                     <MediaQuery query="(max-width: 1000px)">
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="sunburst" code={code} data={data}>
+                    <ChartTabs chartClass="sunburst" code={code} data={data} diceRoll={diceRoll}>
                         <ResponsiveSunburst data={data} {...mappedSettings} theme={nivoTheme} />
                     </ChartTabs>
-                </div>
-                <div className="chart-page_main">
-                    <MediaQuery query="(min-width: 1000px)">
-                        {header}
-                        {description}
-                    </MediaQuery>
                     <SunburstControls
                         scope="Sunburst"
                         settings={settings}
@@ -106,6 +96,12 @@ export default class Sunburst extends Component {
                     />
                     <ComponentPropsDocumentation chartClass="Sunburst" properties={properties} />
                 </div>
+                <div className="chart-page_aside">
+                    <MediaQuery query="(min-width: 1000px)">
+                        {header}
+                        {description}
+                    </MediaQuery>
+                </div>
             </div>
         )
     }
diff --git a/website/src/components/charts/treemap/TreeMap.js b/website/src/components/charts/treemap/TreeMap.js
index 586132ceb..34c52a5f3 100644
--- a/website/src/components/charts/treemap/TreeMap.js
+++ b/website/src/components/charts/treemap/TreeMap.js
@@ -90,11 +90,7 @@ export default class TreeMap extends Component {
         })
 
         const header = (
-            <ChartHeader
-                chartClass="TreeMap"
-                tags={['hierarchy', 'svg', 'isomorphic', 'api']}
-                diceRoll={this.diceRoll}
-            />
+            <ChartHeader chartClass="TreeMap" tags={['hierarchy', 'svg', 'isomorphic', 'api']} />
         )
 
         const description = (
@@ -154,12 +150,17 @@ export default class TreeMap extends Component {
 
         return (
             <div className="page_content grid">
-                <div className="chart-page_aside">
+                <div className="chart-page_main">
                     <MediaQuery query="(max-width: 1000px)">
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="treemap" code={code} data={root}>
+                    <ChartTabs
+                        chartClass="treemap"
+                        code={code}
+                        data={root}
+                        diceRoll={this.diceRoll}
+                    >
                         <ResponsiveTreeMap
                             root={root}
                             {...mappedSettings}
@@ -167,12 +168,6 @@ export default class TreeMap extends Component {
                             onClick={this.handleNodeClick}
                         />
                     </ChartTabs>
-                </div>
-                <div className="chart-page_main">
-                    <MediaQuery query="(min-width: 1000px)">
-                        {header}
-                        {description}
-                    </MediaQuery>
                     <TreeMapControls
                         scope="TreeMap"
                         settings={settings}
@@ -180,6 +175,12 @@ export default class TreeMap extends Component {
                     />
                     <ComponentPropsDocumentation chartClass="TreeMap" properties={properties} />
                 </div>
+                <div className="chart-page_aside">
+                    <MediaQuery query="(min-width: 1000px)">
+                        {header}
+                        {description}
+                    </MediaQuery>
+                </div>
             </div>
         )
     }
diff --git a/website/src/components/charts/treemap/TreeMapCanvas.js b/website/src/components/charts/treemap/TreeMapCanvas.js
index 8a770f110..c540ec014 100644
--- a/website/src/components/charts/treemap/TreeMapCanvas.js
+++ b/website/src/components/charts/treemap/TreeMapCanvas.js
@@ -84,13 +84,7 @@ export default class TreeMapCanvas extends Component {
             defaults: TreeMapCanvasDefaultProps,
         })
 
-        const header = (
-            <ChartHeader
-                chartClass="TreeMapCanvas"
-                tags={['hierarchy', 'canvas']}
-                diceRoll={this.diceRoll}
-            />
-        )
+        const header = <ChartHeader chartClass="TreeMapCanvas" tags={['hierarchy', 'canvas']} />
 
         const description = (
             <div className="chart-description">
@@ -129,12 +123,18 @@ export default class TreeMapCanvas extends Component {
 
         return (
             <div className="page_content grid">
-                <div className="chart-page_aside">
+                <div className="chart-page_main">
                     <MediaQuery query="(max-width: 1000px)">
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="treemap" code={code} data={root} nodeCount={nodeCount}>
+                    <ChartTabs
+                        chartClass="treemap"
+                        code={code}
+                        data={root}
+                        diceRoll={this.diceRoll}
+                        nodeCount={nodeCount}
+                    >
                         <ResponsiveTreeMapCanvas
                             root={root}
                             {...mappedSettings}
@@ -142,12 +142,6 @@ export default class TreeMapCanvas extends Component {
                             onClick={this.handleNodeClick}
                         />
                     </ChartTabs>
-                </div>
-                <div className="chart-page_main">
-                    <MediaQuery query="(min-width: 1000px)">
-                        {header}
-                        {description}
-                    </MediaQuery>
                     <TreeMapControls
                         scope="TreeMapCanvas"
                         settings={settings}
@@ -158,6 +152,12 @@ export default class TreeMapCanvas extends Component {
                         properties={properties}
                     />
                 </div>
+                <div className="chart-page_aside">
+                    <MediaQuery query="(min-width: 1000px)">
+                        {header}
+                        {description}
+                    </MediaQuery>
+                </div>
             </div>
         )
     }
diff --git a/website/src/components/charts/treemap/TreeMapHtml.js b/website/src/components/charts/treemap/TreeMapHtml.js
index 24d075550..da53cdd73 100644
--- a/website/src/components/charts/treemap/TreeMapHtml.js
+++ b/website/src/components/charts/treemap/TreeMapHtml.js
@@ -91,11 +91,7 @@ export default class TreeMapHtml extends Component {
         })
 
         const header = (
-            <ChartHeader
-                chartClass="TreeMapHtml"
-                tags={['hierarchy', 'html', 'isomorphic']}
-                diceRoll={this.diceRoll}
-            />
+            <ChartHeader chartClass="TreeMapHtml" tags={['hierarchy', 'html', 'isomorphic']} />
         )
 
         const description = (
@@ -155,12 +151,17 @@ export default class TreeMapHtml extends Component {
 
         return (
             <div className="page_content grid">
-                <div className="chart-page_aside">
+                <div className="chart-page_main">
                     <MediaQuery query="(max-width: 1000px)">
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="treemap" code={code} data={root}>
+                    <ChartTabs
+                        chartClass="treemap"
+                        code={code}
+                        data={root}
+                        diceRoll={this.diceRoll}
+                    >
                         <ResponsiveTreeMapHtml
                             root={root}
                             {...mappedSettings}
@@ -168,12 +169,6 @@ export default class TreeMapHtml extends Component {
                             onClick={this.handleNodeClick}
                         />
                     </ChartTabs>
-                </div>
-                <div className="chart-page_main">
-                    <MediaQuery query="(min-width: 1000px)">
-                        {header}
-                        {description}
-                    </MediaQuery>
                     <TreeMapControls
                         scope="TreeMapHTML"
                         settings={settings}
@@ -181,6 +176,12 @@ export default class TreeMapHtml extends Component {
                     />
                     <ComponentPropsDocumentation chartClass="TreeMapHTML" properties={properties} />
                 </div>
+                <div className="chart-page_aside">
+                    <MediaQuery query="(min-width: 1000px)">
+                        {header}
+                        {description}
+                    </MediaQuery>
+                </div>
             </div>
         )
     }
diff --git a/website/src/components/charts/voronoi/Voronoi.js b/website/src/components/charts/voronoi/Voronoi.js
index c7addd49a..bc1878e41 100644
--- a/website/src/components/charts/voronoi/Voronoi.js
+++ b/website/src/components/charts/voronoi/Voronoi.js
@@ -56,13 +56,7 @@ export default class Voronoi extends Component {
             defaults: VoronoiDefaultProps,
         })
 
-        const header = (
-            <ChartHeader
-                chartClass="Voronoi"
-                tags={['voronoi', 'experimental']}
-                diceRoll={diceRoll}
-            />
-        )
+        const header = <ChartHeader chartClass="Voronoi" tags={['voronoi', 'experimental']} />
 
         const description = (
             <div className="chart-description">
@@ -89,12 +83,12 @@ export default class Voronoi extends Component {
 
         return (
             <div className="page_content grid">
-                <div className="chart-page_aside">
+                <div className="chart-page_main">
                     <MediaQuery query="(max-width: 1000px)">
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs chartClass="voronoi" code={code} data={data}>
+                    <ChartTabs chartClass="voronoi" code={code} data={data} diceRoll={diceRoll}>
                         <ResponsiveVoronoi
                             margin={{
                                 top: 20,
@@ -106,12 +100,6 @@ export default class Voronoi extends Component {
                             {...settings}
                         />
                     </ChartTabs>
-                </div>
-                <div className="chart-page_main">
-                    <MediaQuery query="(min-width: 1000px)">
-                        {header}
-                        {description}
-                    </MediaQuery>
                     <VoronoiControls
                         scope="Voronoi"
                         settings={settings}
@@ -119,6 +107,12 @@ export default class Voronoi extends Component {
                     />
                     <ComponentPropsDocumentation chartClass="Voronoi" properties={properties} />
                 </div>
+                <div className="chart-page_aside">
+                    <MediaQuery query="(min-width: 1000px)">
+                        {header}
+                        {description}
+                    </MediaQuery>
+                </div>
             </div>
         )
     }
diff --git a/website/src/styles/charts.css b/website/src/styles/charts.css
index 06e9c7236..b6e052cc8 100644
--- a/website/src/styles/charts.css
+++ b/website/src/styles/charts.css
@@ -2,7 +2,7 @@
     width: 100%;
     position: relative;
     overflow: hidden;
-    height: 460px;
+    height: 510px;
     box-shadow: 0 16px 30px rgba(0, 0, 0, 0.1);
     margin-bottom: 40px;
     background: var(--card-background-color);
@@ -30,47 +30,49 @@
 }
 
 .chart-tabs__menu {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 5;
-}
-
-.chart-tabs__menu__helper {
-    position: absolute;
-    right: 156px;
-    font-size: 14px;
-    line-height: 46px;
-    color: #666;
-    display: block;
-}
-
-.chart-tabs__menu__wrapper {
-    background-color: #fff;
-    border-bottom: 1px solid #eee;
-    border-left: 1px solid #eee;
-    height: 47px;
+    height: 46px;
+    background: #f0f3f4;
     display: flex;
-    width: 138px;
+    font-size: 15px;
+    color: #aaa;
+    position: relative;
 }
 
 .chart-tabs__menu__item {
     cursor: pointer;
-    width: 46px;
     height: 46px;
     display: block;
-    background-color: #fff;
-    overflow: hidden;
+    position: relative;
+    padding-left: 46px;
+    padding-right: 14px;
+    padding-top: 11px;
+}
+
+.chart-tabs__menu__item:hover {
+    color: var(--main-text-color);
+}
+
+.chart-tabs__menu__item--current {
+    background-color: white;
 }
 
 .chart-tabs__menu__item__icon {
+    position: absolute;
+    top: 0;
+    left: 0;
     display: block;
     transform: scale(0.44);
     transform-origin: top left;
-    background-color: #fff;
     margin: 12px 0 0 12px;
 }
 
+.chart-tabs__content {
+    position: absolute;
+    top: 46px;
+    bottom: 0;
+    width: 100%;
+}
+
 .chart_header {
     flex-direction: column;
     color: #fff;
diff --git a/website/src/styles/index.css b/website/src/styles/index.css
index 5b4609a20..60bb140c2 100644
--- a/website/src/styles/index.css
+++ b/website/src/styles/index.css
@@ -105,22 +105,24 @@ p:first-child {
 }
 
 .dice-roll {
+    position: absolute;
+    top: 7px;
+    right: 10px;
     display: block;
     padding: 8px 10px;
+    height: 32px;
     line-height: 1em;
     border-radius: 2px;
     background: #fff;
     color: var(--accent-color);
     cursor: pointer;
-    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12);
     font-weight: 600;
     font-size: 15px;
-    margin-top: 4px;
-    margin-left: 20px;
     white-space: pre;
 }
 .dice-roll:hover {
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
     color: var(--accent-color-darker);
 }