Adds time support
This commit is contained in:
parent
77c1dada2f
commit
7eb1781079
|
@ -60,14 +60,10 @@ let make = (~dist) => {
|
||||||
}),
|
}),
|
||||||
),
|
),
|
||||||
}) =>
|
}) =>
|
||||||
Js.log2("n", n);
|
|
||||||
Js.log2("d", d);
|
|
||||||
Js.log2("f", f);
|
|
||||||
Js.log2("dist", dist);
|
|
||||||
<div>
|
<div>
|
||||||
<Continuous data={n |> Shape.Continuous.toPdf} />
|
<Continuous data={n |> Shape.Continuous.toPdf} />
|
||||||
{d |> Shape.Discrete.scaleYToTotal(f) |> Shape.Discrete.render}
|
{d |> Shape.Discrete.scaleYToTotal(f) |> Shape.Discrete.render}
|
||||||
</div>;
|
</div>
|
||||||
| _ => <div />
|
| _ => <div />
|
||||||
};
|
};
|
||||||
};
|
};
|
|
@ -1,8 +1,6 @@
|
||||||
const d3 = require('d3');
|
const d3 = require('d3');
|
||||||
const moment = require('moment');
|
const moment = require('moment');
|
||||||
|
|
||||||
const format = ts => moment(ts).format("dddd, MMMM Do YYYY, h:mm:ss a");
|
|
||||||
|
|
||||||
d3.selection.prototype.patternify = function patternify(params) {
|
d3.selection.prototype.patternify = function patternify(params) {
|
||||||
const selector = params.selector;
|
const selector = params.selector;
|
||||||
const elementTag = params.tag;
|
const elementTag = params.tag;
|
||||||
|
@ -55,6 +53,7 @@ class Chartigo {
|
||||||
this.dataPoints = null;
|
this.dataPoints = null;
|
||||||
this.mouseover = this.mouseover.bind(this);
|
this.mouseover = this.mouseover.bind(this);
|
||||||
this.mouseout = this.mouseout.bind(this);
|
this.mouseout = this.mouseout.bind(this);
|
||||||
|
this.formatDates = this.formatDates.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
svgWidth(svgWidth) {
|
svgWidth(svgWidth) {
|
||||||
|
@ -127,7 +126,6 @@ class Chartigo {
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param key
|
* @param key
|
||||||
* @returns {[]}
|
* @returns {[]}
|
||||||
|
@ -176,10 +174,11 @@ class Chartigo {
|
||||||
|
|
||||||
if (attrs.scale === 'linear') {
|
if (attrs.scale === 'linear') {
|
||||||
this.xScale = d3.scaleLinear()
|
this.xScale = d3.scaleLinear()
|
||||||
.domain([
|
.domain([attrs.minX || xMin, attrs.maxX || xMax])
|
||||||
attrs.minX || xMin,
|
.range([0, calc.chartWidth]);
|
||||||
attrs.maxX || xMax
|
} else if (attrs.scale === 'time') {
|
||||||
])
|
this.xScale = d3.scaleLinear()
|
||||||
|
.domain([new Date(2012, 0, 1), new Date(2020, 0, 31)])
|
||||||
.range([0, calc.chartWidth]);
|
.range([0, calc.chartWidth]);
|
||||||
} else {
|
} else {
|
||||||
this.xScale = d3.scaleLog()
|
this.xScale = d3.scaleLog()
|
||||||
|
@ -195,15 +194,27 @@ class Chartigo {
|
||||||
.domain([yMin, yMax])
|
.domain([yMin, yMax])
|
||||||
.range([calc.chartHeight, 0]);
|
.range([calc.chartHeight, 0]);
|
||||||
|
|
||||||
const xDateScale3 = d3.scaleLinear()
|
|
||||||
.domain([new Date(2012, 0, 1), new Date(2020, 0, 31)])
|
|
||||||
.range([0, calc.chartWidth]);
|
|
||||||
|
|
||||||
// Axis generator.
|
// Axis generator.
|
||||||
const xAxis = d3.axisBottom()
|
if (attrs.scale === 'time') {
|
||||||
.scale(xDateScale3)
|
this.xAxis = d3.axisBottom()
|
||||||
.ticks(5)
|
.scale(this.xScale)
|
||||||
.tickFormat(format);
|
.ticks(5)
|
||||||
|
.tickFormat(this.formatDates);
|
||||||
|
} else {
|
||||||
|
this.xAxis = d3.axisBottom(this.xScale)
|
||||||
|
.ticks(3)
|
||||||
|
.tickFormat(d => {
|
||||||
|
if (Math.abs(d) < 1) {
|
||||||
|
return d3.format(".2")(d);
|
||||||
|
} else if (xMin > 1000 && xMax < 3000) {
|
||||||
|
// Condition which identifies years; 2019, 2020, 2021.
|
||||||
|
return d3.format(".0")(d);
|
||||||
|
} else {
|
||||||
|
const prefix = d3.formatPrefix(".0", d);
|
||||||
|
return prefix(d).replace("G", "B");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Line generator.
|
// Line generator.
|
||||||
const line = d3.line()
|
const line = d3.line()
|
||||||
|
@ -233,14 +244,14 @@ class Chartigo {
|
||||||
// Add axis.
|
// Add axis.
|
||||||
this.chart.patternify({ tag: 'g', selector: 'axis' })
|
this.chart.patternify({ tag: 'g', selector: 'axis' })
|
||||||
.attr('transform', 'translate(' + 0 + ',' + calc.chartHeight + ')')
|
.attr('transform', 'translate(' + 0 + ',' + calc.chartHeight + ')')
|
||||||
.call(xAxis);
|
.call(this.xAxis);
|
||||||
|
|
||||||
// Draw area.
|
// Draw area.
|
||||||
this.chart
|
this.chart
|
||||||
.patternify({
|
.patternify({
|
||||||
tag: 'path',
|
tag: 'path',
|
||||||
selector: 'area-path',
|
selector: 'area-path',
|
||||||
data: this.dataPoints
|
data: this.dataPoints,
|
||||||
})
|
})
|
||||||
.attr('d', area)
|
.attr('d', area)
|
||||||
.attr('fill', (d, i) => areaColor(i))
|
.attr('fill', (d, i) => areaColor(i))
|
||||||
|
@ -252,21 +263,19 @@ class Chartigo {
|
||||||
.patternify({
|
.patternify({
|
||||||
tag: 'path',
|
tag: 'path',
|
||||||
selector: 'line-path',
|
selector: 'line-path',
|
||||||
data: this.dataPoints
|
data: this.dataPoints,
|
||||||
})
|
})
|
||||||
.attr('d', line)
|
.attr('d', line)
|
||||||
.attr('id', (d, i) => 'line-' + (i + 1))
|
.attr('id', (d, i) => 'line-' + (i + 1))
|
||||||
.attr('opacity', (d, i) => {
|
.attr('opacity', (d, i) => i === 0 ? 0.7 : 1)
|
||||||
return i === 0 ? 0.7 : 1
|
|
||||||
})
|
|
||||||
.attr('fill', 'none');
|
.attr('fill', 'none');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (attrs.showVerticalLine) {
|
if (attrs.showVerticalLine) {
|
||||||
this.chart
|
this.chart
|
||||||
.patternify({ tag: 'line', selector: 'v-line' })
|
.patternify({ tag: 'line', selector: 'v-line' })
|
||||||
.attr('x1', xScale(attrs.verticalLine))
|
.attr('x1', this.xScale(attrs.verticalLine))
|
||||||
.attr('x2', xScale(attrs.verticalLine))
|
.attr('x2', this.xScale(attrs.verticalLine))
|
||||||
.attr('y1', 0)
|
.attr('y1', 0)
|
||||||
.attr('y2', calc.chartHeight)
|
.attr('y2', calc.chartHeight)
|
||||||
.attr('stroke-width', 1.5)
|
.attr('stroke-width', 1.5)
|
||||||
|
@ -331,6 +340,10 @@ class Chartigo {
|
||||||
mouseout() {
|
mouseout() {
|
||||||
this.hoverLine.attr('opacity', 0)
|
this.hoverLine.attr('opacity', 0)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
formatDates(ts) {
|
||||||
|
return moment(ts).format("dddd, MMMM Do YYYY, h:mm:ss a");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function chart() {
|
function chart() {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user