external/mailinabox
1
0
Fork 0
mirror of https://github.com/mail-in-a-box/mailinabox.git synced 2025-04-05 00:27:25 +00:00
Code Issues Releases Wiki Activity

Better handling of timeseries containing just one value

Browse Source
This commit is contained in:
downtownallday 2021-04-08 14:43:35 -04:00
parent 26319ac59b
commit 606e5e0569
2 changed files with 44 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
management/reporting/ui/chart-multi-line-timeseries.js
View File

@ -78,25 +78,39 @@ Vue.component('chart-multi-line-timeseries', {
.call(this.yAxis.bind(this))
.attr("font-size", ChartPrefs.axis_font_size);
const line = d3.line()
.defined(d => !isNaN(d))
.x((d, i) => this.xscale(this.tsdata.dates[i]))
.y(d => this.yscale(d));
if (this.tsdata.dates.length == 1) {
// special case
const g = svg.append("g")
.selectAll("circle")
.data(this.tsdata.series)
.join("circle")
.attr("fill", (d, i) => this.colors[i])
.attr("cx", this.xscale(this.tsdata.dates[0]))
.attr("cy", d => this.yscale(d.values[0]))
.attr("r", 2.5);
this.hover(svg, g);
}
else {
const line = d3.line()
.defined(d => !isNaN(d))
.x((d, i) => this.xscale(this.tsdata.dates[i]))
.y(d => this.yscale(d));
const path = svg.append("g")
.attr("fill", "none")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.selectAll("path")
.data(this.tsdata.series)
.join("path")
.style("mix-blend-mode", "multiply")
.style("stroke", (d, i) => this.colors[i])
.attr("d", d => line(d.values))
;
const path = svg.append("g")
.attr("fill", "none")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.selectAll("path")
.data(this.tsdata.series)
.join("path")
.style("mix-blend-mode", "multiply")
.style("stroke", (d, i) => this.colors[i])
.attr("d", d => line(d.values))
;
svg.call(this.hover.bind(this), path);
svg.call(this.hover.bind(this), path);
}
},
xAxis: function(g) {
@ -160,8 +174,10 @@ Vue.component('chart-multi-line-timeseries', {
const xvalue = this.xscale.invert(pointer[0]); // date
const yvalue = this.yscale.invert(pointer[1]); // number
//const i = d3.bisectCenter(this.tsdata.dates, xvalue); // index
const i = d3.bisect(this.tsdata.dates, xvalue); // index
if (i >= this.tsdata.dates.length) return;
var i = d3.bisect(this.tsdata.dates, xvalue); // index
if (i > this.tsdata.dates.length) return;
i = Math.min(this.tsdata.dates.length-1, i);
// closest series
var closest = null;
for (var sidx=0; sidx<this.tsdata.series.length; sidx++) {
@ -192,7 +208,7 @@ Vue.component('chart-multi-line-timeseries', {
function entered() {
path.style("mix-blend-mode", null).attr("stroke", "#ddd");
dot.attr("display", null);
//dot.attr("display", null);
}
function left() {

8
management/reporting/ui/chart-pie.js
View File

@ -148,11 +148,15 @@ Vue.component('chart-pie', {
.data(arcs)
.join("text")
.attr("transform", d => `translate(${arcLabel.centroid(d)})`)
.call(text => text.append("tspan")
.call(text => text
.filter(d => (d.endAngle - d.startAngle) > 0.25)
.append("tspan")
.attr("y", "-0.4em")
.attr("font-weight", "bold")
.text(d => d.data.name))
.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")
.call(text => text
.filter(d => (d.endAngle - d.startAngle) > 0.25)
.append("tspan")
.attr("x", 0)
.attr("y", "0.7em")
.attr("fill-opacity", 0.7)