From 8e9db7c10ee23d7babee63d01148dbfaaf0b0f29 Mon Sep 17 00:00:00 2001
From: Dorian Goepp <dorian.goepp@gmail.com>
Date: Wed, 15 May 2019 11:29:34 +0200
Subject: [PATCH] Make the 'x' field in the data entries optional
---
src/LineChart/LineChart.js | 13 +++++++------
1 file changed, 7 insertions(+), 6 deletions(-)
diff --git a/src/LineChart/LineChart.js b/src/LineChart/LineChart.js
index d7bc96e..3911a76 100644
--- a/src/LineChart/LineChart.js
+++ b/src/LineChart/LineChart.js
@@ -49,8 +49,8 @@ class LineChart extends Component {
/**
* Give the extent of values for an Array of Array (of whatever, see `accessor`).
*
- * Say we have two curves to plot. Each curve is an array of coordinates (objects {x: , y:}). They are added
- * to `dataObject` with their legend as a key.
+ * Say we have two curves to plot. Each curve is an array of coordinates (objects {x: , y:}) (the 'x' key is optional).
+ * They are added to `dataObject` with their legend as a key.
*
* This function is a replacement of d3's `extent` function, as the data structure is more complex here.
*
@@ -97,7 +97,8 @@ class LineChart extends Component {
const viewbox = "0 0 " + (width + margin.left + margin.right) +" "+ (height + margin.top + margin.bottom);
- const data = this.pre_process(this.props.data);
+ const data = this.props.data;
+ // const data = this.pre_process(this.props.data);
// Allocate one colour per line to plot
const lineNames = Object.keys(data);
@@ -107,7 +108,7 @@ class LineChart extends Component {
// X scale will use the index of our data
const xScale = d3.scaleLinear()
- .domain(this.extent(data, value => value.x)) // input
+ .domain(this.extent(data, (value, i) => 'x' in value ? value.x : i)) // input
.range([0, width])
.nice(); // output
@@ -126,7 +127,7 @@ class LineChart extends Component {
// d3's line generator
const line = d3.line()
- .x(d => xScale(d.x)) // set the x values for the line generator
+ .x((d, i) => xScale('x' in d ? d.x: i)) // set the x values for the line generator
.y(d => yScale(d.y)) // set the y values for the line generator
.curve(d3.curveMonotoneX) // apply smoothing to the line
@@ -194,7 +195,7 @@ function Circles(props) {
// One circle for each data point that is provided as a property to this Component
const output = props.data.map((point, i) => (
<circle key={i} className="dot" fill={props.colour}
- cx={props.xScale(point.x)} cy={props.yScale(point.y)} r="5"/>
+ cx={props.xScale('x' in point ? point.x : i)} cy={props.yScale(point.y)} r="5"/>
));
return output;
}
--
GitLab