Commit 8e9db7c1 authored by Dorian Goepp's avatar Dorian Goepp

Make the 'x' field in the data entries optional

parent fe67afd1
......@@ -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;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment