Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Manage axes individually #141

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Manage axes individually #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 86 additions & 1 deletion examples/area-chart/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
48 changes: 47 additions & 1 deletion examples/bar-chart/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
88 changes: 87 additions & 1 deletion examples/line-chart/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
47 changes: 45 additions & 2 deletions examples/scatterplot-chart/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down
16 changes: 12 additions & 4 deletions modules/area-chart/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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) {
Expand Down
Loading