From 8c7add1b42c58e755b760313fd2a5c302aaab572 Mon Sep 17 00:00:00 2001
From: Barbara Schiavinato <barbara.schiavinato@gmail.com>
Date: Mon, 1 Oct 2018 17:24:30 +0100
Subject: [PATCH] Manage axes individually

---
 examples/area-chart/App.js                | 87 +++++++++++++++++++++-
 examples/bar-chart/App.js                 | 48 ++++++++++++-
 examples/line-chart/app.js                | 88 ++++++++++++++++++++++-
 examples/scatterplot-chart/App.js         | 47 +++++++++++-
 modules/area-chart/index.js               | 16 +++--
 modules/bar-chart/index.js                | 19 +++--
 modules/line-chart/index.js               | 18 +++--
 modules/scatterplot-chart/hybrid/index.js | 16 +++--
 modules/shared.js                         | 26 +++++--
 9 files changed, 335 insertions(+), 30 deletions(-)

diff --git a/examples/area-chart/App.js b/examples/area-chart/App.js
index a00c91f..d4ef20c 100644
--- a/examples/area-chart/App.js
+++ b/examples/area-chart/App.js
@@ -437,7 +437,8 @@ class AreaChartContainer extends PureComponent {
             <h2>Axes</h2>
 
             <p>
-              The axes can be turned on by simply passing a boolean flag to true for <b>axes</b>.
+              The axes can be turned on by simply passing a boolean flag to true for <b>axes</b>
+              or an object with both a x and y visibility boolean.
             </p>
 
             <pre>
@@ -482,6 +483,90 @@ class AreaChartContainer extends PureComponent {
               ]}
             />
 
+            <pre>
+            {(() => {
+              const html = (`
+                <AreaChart
+                  axes={{ x: true, y: false }}
+                  width={350}
+                  height={250}
+                  data={[
+                    [
+                      { x: 1, y: 20 },
+                      { x: 2, y: 10 },
+                      { x: 3, y: 25 }
+                    ], [
+                      { x: 1, y: 10 },
+                      { x: 2, y: 12 },
+                      { x: 3, y: 4 }
+                    ]
+                  ]}
+                />`);
+              return (
+                <code dangerouslySetInnerHTML={{ __html: escapeHTML(html) }} />
+              );
+            })()}
+            </pre>
+
+            <AreaChart
+              axes={{ x: true, y: false }}
+              width={350}
+              height={250}
+              data={[
+                [
+                  { x: 1, y: 20 },
+                  { x: 2, y: 10 },
+                  { x: 3, y: 25 }
+                ], [
+                  { x: 1, y: 10 },
+                  { x: 2, y: 12 },
+                  { x: 3, y: 4 }
+                ]
+              ]}
+            />
+
+            <pre>
+            {(() => {
+              const html = (`
+                <AreaChart
+                  axes={{ x: false, y: true }}
+                  width={350}
+                  height={250}
+                  data={[
+                    [
+                      { x: 1, y: 20 },
+                      { x: 2, y: 10 },
+                      { x: 3, y: 25 }
+                    ], [
+                      { x: 1, y: 10 },
+                      { x: 2, y: 12 },
+                      { x: 3, y: 4 }
+                    ]
+                  ]}
+                />`);
+              return (
+                <code dangerouslySetInnerHTML={{ __html: escapeHTML(html) }} />
+              );
+            })()}
+            </pre>
+
+            <AreaChart
+              axes={{ x: false, y: true }}
+              width={350}
+              height={250}
+              data={[
+                [
+                  { x: 1, y: 20 },
+                  { x: 2, y: 10 },
+                  { x: 3, y: 25 }
+                ], [
+                  { x: 1, y: 10 },
+                  { x: 2, y: 12 },
+                  { x: 3, y: 4 }
+                ]
+              ]}
+            />
+
           </section>
 
           <section id="axesLabels">
diff --git a/examples/bar-chart/App.js b/examples/bar-chart/App.js
index 0971ec8..bf064f9 100644
--- a/examples/bar-chart/App.js
+++ b/examples/bar-chart/App.js
@@ -586,7 +586,8 @@ export default class BarChartContainer extends PureComponent {
             <h2>Axes</h2>
 
             <p>
-              The axes can be turned on by simply passing a boolean flag to true for axes.
+              The axes can be turned on by simply passing a boolean flag to true for <b>axes</b>
+              or an object with both a x and y visibility boolean.
             </p>
 
             <pre>
@@ -620,6 +621,51 @@ export default class BarChartContainer extends PureComponent {
               data={this.defaultData}
             />
 
+            <pre>
+            {(() => {
+              const html = (`
+                <BarChart
+                  height={250}
+                  width={650}
+                  axes={{ x: true, y: false }}
+                  data={this.defaultData}
+                />`);
+              return (
+                <code dangerouslySetInnerHTML={{ __html: escapeHTML(html) }} />
+              );
+            })()}
+            </pre>
+
+            <BarChart
+              height={250}
+              width={650}
+              axes={{ x: true, y: false }}
+              data={this.defaultData}
+            />
+
+
+            <pre>
+            {(() => {
+              const html = (`
+                <BarChart
+                  height={250}
+                  width={650}
+                  axes={{ x: false, y: true }}
+                  data={this.defaultData}
+                />`);
+              return (
+                <code dangerouslySetInnerHTML={{ __html: escapeHTML(html) }} />
+              );
+            })()}
+            </pre>
+
+            <BarChart
+              height={250}
+              width={650}
+              axes={{ x: false, y: true }}
+              data={this.defaultData}
+            />
+
           </section>
 
           <section id="axesLabels">
diff --git a/examples/line-chart/app.js b/examples/line-chart/app.js
index 4248c4b..13b2e8b 100644
--- a/examples/line-chart/app.js
+++ b/examples/line-chart/app.js
@@ -430,7 +430,8 @@ class LineChartContainer extends PureComponent {
             <h2>Axes</h2>
 
             <p>
-              The axes can be turned on by simply passing a boolean flag to true for <b>axes</b>.
+              The axes can be turned on by simply passing a boolean flag to true for <b>axes</b>
+              or an object with both a x and y visibility boolean.
             </p>
 
             <pre>
@@ -475,6 +476,91 @@ class LineChartContainer extends PureComponent {
               ]}
             />
 
+
+            <pre>
+            {(() => {
+              const html = (`
+  <LineChart
+    axes={{ x: true, y: false }}
+    width={250}
+    height={250}
+    data={[
+      [
+        { x: 1, y: 20 },
+        { x: 2, y: 10 },
+        { x: 3, y: 25 }
+      ], [
+        { x: 1, y: 10 },
+        { x: 2, y: 12 },
+        { x: 3, y: 4 }
+      ]
+    ]}
+  />`);
+              return (
+                <code dangerouslySetInnerHTML={{ __html: escapeHTML(html) }} />
+              );
+            })()}
+            </pre>
+
+            <LineChart
+              axes={{ x: true, y: false }}
+              width={250}
+              height={250}
+              data={[
+                [
+                  { x: 1, y: 20 },
+                  { x: 2, y: 10 },
+                  { x: 3, y: 25 }
+                ], [
+                  { x: 1, y: 10 },
+                  { x: 2, y: 12 },
+                  { x: 3, y: 4 }
+                ]
+              ]}
+            />
+
+            <pre>
+            {(() => {
+              const html = (`
+            <LineChart
+            axes={{ x: false, y: true }}
+            width={250}
+            height={250}
+            data={[
+              [
+                { x: 1, y: 20 },
+                { x: 2, y: 10 },
+                { x: 3, y: 25 }
+              ], [
+                { x: 1, y: 10 },
+                { x: 2, y: 12 },
+                { x: 3, y: 4 }
+              ]
+            ]}
+            />`);
+              return (
+                <code dangerouslySetInnerHTML={{ __html: escapeHTML(html) }} />
+              );
+            })()}
+            </pre>
+
+            <LineChart
+              axes={{ x: false, y: true }}
+              width={250}
+              height={250}
+              data={[
+                [
+                  { x: 1, y: 20 },
+                  { x: 2, y: 10 },
+                  { x: 3, y: 25 }
+                ], [
+                  { x: 1, y: 10 },
+                  { x: 2, y: 12 },
+                  { x: 3, y: 4 }
+                ]
+              ]}
+            />
+
           </section>
 
           <section id="axesAndLabels">
diff --git a/examples/scatterplot-chart/App.js b/examples/scatterplot-chart/App.js
index 7bfe4ad..3cbca84 100644
--- a/examples/scatterplot-chart/App.js
+++ b/examples/scatterplot-chart/App.js
@@ -594,8 +594,8 @@ export default class ScatterplotContainer extends PureComponent {
             <h2>Axes</h2>
 
             <p>
-              The axes can be turned on by simply passing a boolean flag to true for
-              <strong>axes</strong>.
+              The axes can be turned on by simply passing a boolean flag to true for <b>axes</b>
+              or an object with both a x and y visibility boolean.
             </p>
 
             <pre>
@@ -614,6 +614,49 @@ export default class ScatterplotContainer extends PureComponent {
 
             <ScatterplotChart data={bigData} axes width={480} height={270} />
 
+
+            <pre>
+            {(() => {
+              const html = (`
+  <ScatterplotChart
+    data={data}
+    axes={{ x: true, y: false }}
+    width={480}
+    height={270} />`);
+              return (
+                <code dangerouslySetInnerHTML={{ __html: escapeHTML(html) }} />
+              );
+            })()}
+            </pre>
+
+            <ScatterplotChart
+              data={bigData}
+              axes={{ x: true, y: false }}
+              width={480}
+              height={270}
+            />
+
+            <pre>
+            {(() => {
+              const html = (`
+  <ScatterplotChart
+    data={data}
+    axes={{ x: false, y: true }}
+    width={480}
+    height={270} />`);
+              return (
+                <code dangerouslySetInnerHTML={{ __html: escapeHTML(html) }} />
+              );
+            })()}
+            </pre>
+
+            <ScatterplotChart
+              data={bigData}
+              axes={{ x: false, y: true }}
+              width={480}
+              height={270}
+            />
+
           </section>
 
           <section id="yaxesorientation">
diff --git a/modules/area-chart/index.js b/modules/area-chart/index.js
index 75adf38..98fe9da 100644
--- a/modules/area-chart/index.js
+++ b/modules/area-chart/index.js
@@ -40,7 +40,13 @@ export default class AreaChart extends PureComponent {
       interpolate: PropTypes.string,
       style: PropTypes.object,
       margin: PropTypes.object,
-      axes: PropTypes.bool,
+      axes: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.shape({
+          x: PropTypes.bool,
+          y: PropTypes.bool
+        })
+      ]),
       grid: PropTypes.bool,
       verticalGrid: PropTypes.bool,
       xDomainRange: PropTypes.array,
@@ -464,13 +470,15 @@ export default class AreaChart extends PureComponent {
       noAreaGradient
     } = this.props;
 
+    const hasXAxes = axes === true || axes.x;
+    const hasYAxes = axes === true || axes.y;
+
     const hasFill = !noAreaGradient;
     const p = this.calculateChartParameters();
 
     if (axes) {
-      this.createXAxis(p);
-
-      this.createYAxis(p);
+      if (hasXAxes) this.createXAxis(p);
+      if (hasYAxes) this.createYAxis(p);
     }
 
     if (hasFill) {
diff --git a/modules/bar-chart/index.js b/modules/bar-chart/index.js
index 0c392bd..09a59e2 100644
--- a/modules/bar-chart/index.js
+++ b/modules/bar-chart/index.js
@@ -52,7 +52,13 @@ export default class BarChart extends PureComponent {
       interpolate: PropTypes.string,
       style: PropTypes.object,
       colorBars: PropTypes.bool,
-      axes: PropTypes.bool,
+      axes: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.shape({
+          x: PropTypes.bool,
+          y: PropTypes.bool
+        })
+      ]),
       grid: PropTypes.bool,
       axisLabels: PropTypes.shape({
         x: PropTypes.string,
@@ -463,7 +469,7 @@ export default class BarChart extends PureComponent {
       yDomainRange,
       margin,
       width,
-      height
+      height,
     } = this.props;
 
     const hasLineData = this.hasLineData();
@@ -489,16 +495,19 @@ export default class BarChart extends PureComponent {
 
   render() {
     const {
-      axes
+      axes,
     } = this.props;
 
     const hasLineData = this.hasLineData();
     const p = this.calculateChartParameters();
 
+    const hasXAxes = axes === true || axes.x;
+    const hasYAxes = axes === true || axes.y;
+
     if (axes) {
-      this.createXAxis(p);
+      if (hasXAxes) this.createXAxis(p);
 
-      this.createYAxis(p); // const yAxis = this.createYAxis(p);
+      if (hasYAxes) this.createYAxis(p); // const yAxis = this.createYAxis(p);
 
       if (hasLineData) {
         this.createYAxis2(p); // { ...p, yAxis });
diff --git a/modules/line-chart/index.js b/modules/line-chart/index.js
index d263456..5fcda75 100644
--- a/modules/line-chart/index.js
+++ b/modules/line-chart/index.js
@@ -41,7 +41,13 @@ export default class LineChart extends React.Component {
       interpolate: PropTypes.string,
       style: PropTypes.object,
       margin: PropTypes.object,
-      axes: PropTypes.bool,
+      axes: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.shape({
+          x: PropTypes.bool,
+          y: PropTypes.bool
+        })
+      ]),
       grid: PropTypes.bool,
       verticalGrid: PropTypes.bool,
       xDomainRange: PropTypes.array,
@@ -356,7 +362,7 @@ export default class LineChart extends React.Component {
       width,
       height,
       lineColors,
-      yAxisOrientRight
+      yAxisOrientRight,
     } = this.props;
 
     /*
@@ -405,10 +411,12 @@ export default class LineChart extends React.Component {
 
     const p = this.calculateChartParameters();
 
-    if (axes) {
-      this.createXAxis(p);
+    const hasXAxes = axes === true || axes.x;
+    const hasYAxes = axes === true || axes.y;
 
-      this.createYAxis(p);
+    if (axes) {
+      if (hasXAxes) this.createXAxis(p);
+      if (hasYAxes) this.createYAxis(p);
     }
 
     this.createLinePathChart(p);
diff --git a/modules/scatterplot-chart/hybrid/index.js b/modules/scatterplot-chart/hybrid/index.js
index 76abf3f..9a69722 100644
--- a/modules/scatterplot-chart/hybrid/index.js
+++ b/modules/scatterplot-chart/hybrid/index.js
@@ -40,7 +40,13 @@ const axisMargin = 18;
 export default class ScatterplotChart extends PureComponent {
   static get propTypes() {
     return {
-      axes: PropTypes.bool,
+      axes: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.shape({
+          x: PropTypes.bool,
+          y: PropTypes.bool
+        })
+      ]),
       axisLabels: PropTypes.shape({
         x: PropTypes.string,
         y: PropTypes.string
@@ -685,12 +691,14 @@ export default class ScatterplotChart extends PureComponent {
       axes
     } = this.props;
 
+    const hasXAxes = axes === true || axes.x;
+    const hasYAxes = axes === true || axes.y;
+
     const p = this.calculateChartParameters();
 
     if (axes) {
-      this.createXAxis(p);
-
-      this.createYAxis(p);
+      if (hasXAxes) this.createXAxis(p);
+      if (hasYAxes) this.createYAxis(p);
     }
 
     this.createScatterplotChart(p);
diff --git a/modules/shared.js b/modules/shared.js
index 20f20cc..ba446c7 100644
--- a/modules/shared.js
+++ b/modules/shared.js
@@ -162,16 +162,28 @@ export function createUniqueID(o) {
   return hash(o);
 }
 
-export function calculateMargin(axes, margin, yAxisOrientRight, y2) {
+export function calculateMargin(
+  axes,
+  margin,
+  yAxisOrientRight,
+  y2) {
   if (margin) return margin;
+  const hasXAxes = axes === true || axes.x;
+  const hasYAxes = axes === true || axes.y;
   if (yAxisOrientRight) {
-    return (axes)
-      ? { top: 20, right: 50, bottom: 50, left: (y2) ? 50 : 20 }
-      : { top: 0, right: 0, bottom: 0, left: 0 };
+    return (hasXAxes || hasYAxes)
+        ? { top: 20,
+          right: hasXAxes ? 50 : 20,
+          bottom: hasYAxes ? 50 : 20,
+          left: (y2) ? 50 : 20 }
+        : { top: 0, right: 0, bottom: 0, left: 0 };
   }
-  return (axes)
-    ? { top: 20, right: (y2) ? 50 : 20, bottom: 50, left: 50 }
-    : { top: 0, right: 0, bottom: 0, left: 0 };
+  return (hasXAxes || hasYAxes)
+      ? { top: 20,
+        right: (y2) ? 50 : 20,
+        bottom: hasXAxes ? 50 : 20,
+        left: hasYAxes ? 50 : 20 }
+      : { top: 0, right: 0, bottom: 0, left: 0 };
 }
 
 /* eslint no-shadow: 0 */