From f31660625fa72fb827a8ecf662e6c9f89334ddc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= <raphael.benitte@ekino.com>
Date: Thu, 14 Dec 2017 15:07:49 +0900
Subject: [PATCH] feat(website): make chart demo layout consistent across chart
 types

---
 website/src/components/ChartTabs.js                | 13 ++-----------
 website/src/components/charts/bubble/Bubble.js     | 14 +++++++-------
 .../src/components/charts/bubble/BubbleCanvas.js   | 14 +++++++-------
 website/src/components/charts/bubble/BubbleHtml.js | 14 +++++++-------
 website/src/components/charts/chord/Chord.js       | 14 +++++++-------
 website/src/components/charts/chord/ChordCanvas.js | 14 +++++++-------
 website/src/components/charts/line/Line/index.js   |  8 +-------
 .../src/components/charts/line/LineCanvas/index.js |  7 +------
 website/src/components/charts/radar/Radar.js       | 14 +++++++-------
 website/src/components/charts/sunburst/Sunburst.js | 14 +++++++-------
 website/src/components/charts/treemap/TreeMap.js   | 14 +++++++-------
 .../src/components/charts/treemap/TreeMapCanvas.js | 14 +++++++-------
 .../src/components/charts/treemap/TreeMapHtml.js   | 14 +++++++-------
 website/src/components/charts/voronoi/Voronoi.js   | 14 +++++++-------
 14 files changed, 81 insertions(+), 101 deletions(-)

diff --git a/website/src/components/ChartTabs.js b/website/src/components/ChartTabs.js
index 7cac518c7..4ceedb2ac 100644
--- a/website/src/components/ChartTabs.js
+++ b/website/src/components/ChartTabs.js
@@ -17,14 +17,9 @@ 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 = {
-        mode: '',
-    }
-
     state = {
         tab: 'chart',
         hoverTab: null,
@@ -39,7 +34,7 @@ export default class ChartTabs extends Component {
     }
 
     render() {
-        const { chartClass, mode, data, code, children, diceRoll, nodeCount } = this.props
+        const { chartClass, data, code, children, diceRoll, nodeCount } = this.props
         const { tab: currentTab, hoverTab } = this.state
 
         let content
@@ -60,11 +55,7 @@ export default class ChartTabs extends Component {
         }
 
         return (
-            <div
-                className={`chart-tabs${
-                    mode.length > 0 ? ` chart-tabs--${mode}` : ''
-                } chart-tabs--${currentTab}`}
-            >
+            <div className={`chart-tabs chart-tabs--${currentTab}`}>
                 <div className="chart-tabs__menu">
                     {tabs.map(tab => {
                         const isCurrent = tab === currentTab
diff --git a/website/src/components/charts/bubble/Bubble.js b/website/src/components/charts/bubble/Bubble.js
index bb7577dae..7afb63593 100644
--- a/website/src/components/charts/bubble/Bubble.js
+++ b/website/src/components/charts/bubble/Bubble.js
@@ -147,7 +147,7 @@ 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}
@@ -159,12 +159,6 @@ export default class Bubble extends Component {
                             theme={nivoTheme}
                         />
                     </ChartTabs>
-                </div>
-                <div className="chart-page_main">
-                    <MediaQuery query="(min-width: 1000px)">
-                        {header}
-                        {description}
-                    </MediaQuery>
                     <BubbleControls
                         scope="Bubble"
                         settings={settings}
@@ -172,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 154ce3928..a7167a845 100644
--- a/website/src/components/charts/bubble/BubbleCanvas.js
+++ b/website/src/components/charts/bubble/BubbleCanvas.js
@@ -118,7 +118,7 @@ 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}
@@ -136,12 +136,6 @@ export default class BubbleCanvas extends Component {
                             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 f2712c81e..59da3059a 100644
--- a/website/src/components/charts/bubble/BubbleHtml.js
+++ b/website/src/components/charts/bubble/BubbleHtml.js
@@ -136,7 +136,7 @@ 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}
@@ -148,12 +148,6 @@ export default class BubbleHtml extends Component {
                             theme={nivoTheme}
                         />
                     </ChartTabs>
-                </div>
-                <div className="chart-page_main">
-                    <MediaQuery query="(min-width: 1000px)">
-                        {header}
-                        {description}
-                    </MediaQuery>
                     <BubbleControls
                         scope="BubbleHtml"
                         settings={settings}
@@ -161,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 0edf91aaf..35287db3b 100644
--- a/website/src/components/charts/chord/Chord.js
+++ b/website/src/components/charts/chord/Chord.js
@@ -165,7 +165,7 @@ 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}
@@ -183,12 +183,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}
@@ -196,6 +190,12 @@ export default class Chord extends Component {
                     />
                     <ComponentPropsDocumentation chartClass="ChordSvg" 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 0ef8a735f..4774b1403 100644
--- a/website/src/components/charts/chord/ChordCanvas.js
+++ b/website/src/components/charts/chord/ChordCanvas.js
@@ -124,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}
@@ -143,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}
@@ -156,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/line/Line/index.js b/website/src/components/charts/line/Line/index.js
index eac4d13ce..ca97608b2 100644
--- a/website/src/components/charts/line/Line/index.js
+++ b/website/src/components/charts/line/Line/index.js
@@ -124,13 +124,7 @@ export default class LineChartSvgDemo extends Component {
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs
-                        chartClass="line"
-                        code={code}
-                        data={data}
-                        mode="horizontal"
-                        diceRoll={this.diceRoll}
-                    >
+                    <ChartTabs chartClass="line" code={code} data={data} diceRoll={this.diceRoll}>
                         <ResponsiveLineChartSvg data={data} {...mappedSettings} />
                     </ChartTabs>
                     <LineControls
diff --git a/website/src/components/charts/line/LineCanvas/index.js b/website/src/components/charts/line/LineCanvas/index.js
index b9f40b5d6..f537287e8 100644
--- a/website/src/components/charts/line/LineCanvas/index.js
+++ b/website/src/components/charts/line/LineCanvas/index.js
@@ -74,12 +74,7 @@ export default class LineChartCanvasDemo extends Component {
                         {header}
                         {description}
                     </MediaQuery>
-                    <ChartTabs
-                        chartClass="line"
-                        code={code}
-                        mode="horizontal"
-                        diceRoll={this.diceRoll}
-                    >
+                    <ChartTabs chartClass="line" code={code} diceRoll={this.diceRoll}>
                         <ResponsiveLineChartCanvas {...mappedSettings} data={data} pixelRatio={2} />
                     </ChartTabs>
                     <LineControls
diff --git a/website/src/components/charts/radar/Radar.js b/website/src/components/charts/radar/Radar.js
index 9166c2943..ce9494ca5 100644
--- a/website/src/components/charts/radar/Radar.js
+++ b/website/src/components/charts/radar/Radar.js
@@ -153,7 +153,7 @@ 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}
@@ -167,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}
@@ -180,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/sunburst/Sunburst.js b/website/src/components/charts/sunburst/Sunburst.js
index 2eecbdeaf..c635f472d 100644
--- a/website/src/components/charts/sunburst/Sunburst.js
+++ b/website/src/components/charts/sunburst/Sunburst.js
@@ -81,7 +81,7 @@ 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}
@@ -89,12 +89,6 @@ export default class Sunburst extends Component {
                     <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}
@@ -102,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 e90fe15dc..34c52a5f3 100644
--- a/website/src/components/charts/treemap/TreeMap.js
+++ b/website/src/components/charts/treemap/TreeMap.js
@@ -150,7 +150,7 @@ 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}
@@ -168,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}
@@ -181,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 fbc75f55c..25d0a06f4 100644
--- a/website/src/components/charts/treemap/TreeMapCanvas.js
+++ b/website/src/components/charts/treemap/TreeMapCanvas.js
@@ -123,7 +123,7 @@ 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}
@@ -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 deeab346e..da53cdd73 100644
--- a/website/src/components/charts/treemap/TreeMapHtml.js
+++ b/website/src/components/charts/treemap/TreeMapHtml.js
@@ -151,7 +151,7 @@ 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}
@@ -169,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}
@@ -182,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 47c397d7a..bc1878e41 100644
--- a/website/src/components/charts/voronoi/Voronoi.js
+++ b/website/src/components/charts/voronoi/Voronoi.js
@@ -83,7 +83,7 @@ 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}
@@ -100,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}
@@ -113,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>
         )
     }