feat(website): make chart demo layout consistent across chart types

plouc · Dec 14, 2017 · f316606 · f316606
1 parent 330720c
commit f316606
Show file tree

Hide file tree

Showing 14 changed files with 81 additions and 101 deletions.
diff --git 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
@@ -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,19 +159,19 @@ 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}
                         onChange={this.handleSettingsUpdate}
                     />
                     <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
@@ -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
@@ -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,19 +148,19 @@ 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}
                         onChange={this.handleSettingsUpdate}
                     />
                     <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
@@ -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,19 +183,19 @@ 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}
                         onChange={this.handleSettingsUpdate}
                     />
                     <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
@@ -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,19 +143,19 @@ 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}
                         onChange={this.handleSettingsUpdate}
                     />
                     <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
@@ -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
@@ -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
@@ -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,19 +167,19 @@ 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}
                         onChange={this.handleSettingsUpdate}
                     />
                     <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
@@ -81,27 +81,27 @@ 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} 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}
                         onChange={this.handleSettingsUpdate}
                     />
                     <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
@@ -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,19 +168,19 @@ 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}
                         onChange={this.handleSettingsUpdate}
                     />
                     <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
@@ -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>
         )
     }