Adds time support

This commit is contained in:
Roman Galochkin 2020-02-18 14:58:34 +03:00
parent 77c1dada2f
commit 7eb1781079
2 changed files with 37 additions and 28 deletions

View File

@ -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 />
}; };
}; };

View File

@ -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() {