Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

improve(stepped): draw step by null-value at begin/end of dataset #694

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open

improve(stepped): draw step by null-value at begin/end of dataset #694

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
88f3d7a
improve(stepped): draw step by null-value at begin/end of dataset
May 12, 2022
7c89128
fix(stepped): only null become a gap -> undefined is use for no data …
May 13, 2022
4955fae
fix(clipGaps): huge gap dosn't clip over multiple smale gaps
May 16, 2022
80a4466
example for multiple data logged by different intervals.
May 17, 2022
49f4228
dev(performance): join is always faster!
May 19, 2022
e223a63
dev(performance): use uPlot.join like all other examples
May 19, 2022
b77f4dc
fix(stepped) gap won't expand falsy if undefined is detected
May 20, 2022
0ee3e1d
some typings corrected to use by plugins
May 24, 2022
c15c372
Merge version 1.6.21 into fix/stepped
Jun 8, 2022
d8eb9ac
sync default options align and alignGaps
Jun 8, 2022
17ce73d
improve examples
Jun 8, 2022
ca16a95
fix: stepped dosn't respect align at the end
Jun 8, 2022
9d0ba1d
Revert "example for multiple data"
Jun 8, 2022
e84cc64
update dist
Jun 30, 2022
eec8dc6
Merge branch 'master' into fix/stepped
Jun 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 27 additions & 43 deletions demos/path-gap-clip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,40 +114,6 @@
</script>

<script>
const opts9 = {
title: "Gaps in stepped after",
width: 800,
height: 400,
scales: {
x: {
time: false,
}
},
series: [
{},
{
label: "step after",
stroke: "blue",
fill: "rgba(0,0,255,0.3)",
width: 2,
paths: uPlot.paths.stepped({
align: 1,
// ascDesc: true,
}),
},
{
label: "linear",
stroke: "red",
width: 2,
},
{
label: "spline",
stroke: "orange",
width: 2,
paths: uPlot.paths.spline(),
},
],
};

let vals9 = [null,null,null,1,1,1,1,1,null,null,2,2,null,1,undefined,undefined,null,1,1,1,1,2,2,2,undefined,undefined];
// let vals9 = [2,null,1,null,1,1];
Expand All @@ -158,12 +124,11 @@
vals9,
vals9.map((v, i) => v == null ? v : v + 0.1),
vals9.map((v, i) => v == null ? v : v + 0.2),
vals9.map((v, i) => v == null ? v : v + 0.3),
];

let u9 = new uPlot(opts9, data9, document.body);

const opts9_2 = {
title: "Gaps in stepped before",
const opts9 = {
title: "stepped1 vs stepped-1 vs linear vs spline",
width: 800,
height: 400,
scales: {
Expand All @@ -173,11 +138,23 @@
},
series: [
{},
{
label: "step after",
stroke: "green",
fill: "rgba(0,128,0,0.3)",
width: 2,
spanGaps: true,
paths: uPlot.paths.stepped({
align: 1,
// ascDesc: true,
}),
},
{
label: "step before",
stroke: "red",
fill: "rgba(255,0,0,0.3)",
width: 2,
spanGaps: true,
paths: uPlot.paths.stepped({
align: -1,
// ascDesc: true,
Expand All @@ -187,17 +164,24 @@
label: "linear",
stroke: "blue",
width: 2,
spanGaps: true,
},
{
label: "spline",
stroke: "orange",
width: 2,
spanGaps: true,
paths: uPlot.paths.spline(),
},
],
};

let u9_2 = new uPlot(opts9_2, data9, document.body);
let u9 = new uPlot(opts9, data9, document.body);
opts9.title = `Gaps in -> ${opts9.title}`
opts9.series.forEach(s => {
s.spanGaps = false
})
let u9_2 = new uPlot(opts9, data9, document.body);
</script>

<script>
Expand Down Expand Up @@ -247,7 +231,7 @@
]);

const opts = {
title: "Gaps in stepped after",
title: "Gaps in stepped -> insert after null",
width: 800,
height: 400,
scales: {
Expand Down Expand Up @@ -340,7 +324,7 @@
]);

const opts = {
title: "Gaps in stepped before",
title: "Gaps in stepped -> insert before null",
width: 800,
height: 400,
scales: {
Expand All @@ -355,14 +339,14 @@
stroke: "blue",
fill: "rgba(0,0,255,0.3)",
width: 2,
paths: uPlot.paths.stepped({ align: -1, alignGaps: -1 }),
paths: uPlot.paths.stepped({ align: 1, alignGaps: -1 }),
},
{
label: "[0..5]",
stroke: "red",
fill: "rgba(255,0,0,0.3)",
width: 2,
paths: uPlot.paths.stepped({ align: -1, alignGaps: -1 }),
paths: uPlot.paths.stepped({ align: 1, alignGaps: -1 }),
},
{
label: "dataset03",
Expand Down
38 changes: 27 additions & 11 deletions dist/uPlot.cjs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1688,13 +1688,21 @@ function clipGaps(gaps, ori, plotLft, plotTop, plotWid, plotHgt) {

for (let i = 0; i < gaps.length; i++) {
let g = gaps[i];
// begin gaps always at x=0
g[0] = Math.max(0, g[0]);
g[1] = Math.max(0, g[1]);

// do not ignore first gap if less then first Point on chart
if(i===0 && g[0] <= prevGapEnd){
prevGapEnd = g[1];
}

if (g[1] > g[0]) {
let w = g[0] - prevGapEnd;

w > 0 && rect(clip, prevGapEnd, plotTop, w, plotTop + plotHgt);

prevGapEnd = g[1];
prevGapEnd = Math.max(prevGapEnd, g[1]);
}
}

Expand Down Expand Up @@ -2004,7 +2012,7 @@ function stepped(opts) {
// whether to draw ascenders/descenders at null/gap bondaries
const ascDesc = ifNull(opts.ascDesc, false);

const alignGaps = ifNull(opts.alignGaps, 0);
const alignGaps = ifNull(opts.alignGaps, align);

return (u, seriesIdx, idx0, idx1) => {
return orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim) => {
Expand All @@ -2020,35 +2028,43 @@ function stepped(opts) {

const dir = scaleX.dir * (scaleX.ori == 0 ? 1 : -1);

idx0 = nonNullIdx(dataY, idx0, idx1, 1);
idx1 = nonNullIdx(dataY, idx0, idx1, -1);
let lftIdx = align === -1 ? idx0 : nonNullIdx(dataY, idx0, idx1, 1);
let rgtIdx = align === 1 ? idx1 : nonNullIdx(dataY, idx0, idx1, -1);

let prevYPos = pixelForY(dataY[dir == 1 ? idx0 : idx1]);
let firstXPos = pixelForX(dataX[dir == 1 ? idx0 : idx1]);
let prevYPos = pixelForY(dataY[dir == 1 ? lftIdx : rgtIdx]);
let firstXPos = pixelForX(dataX[dir == 1 ? lftIdx : rgtIdx]);
let prevXPos = firstXPos;

lineTo(stroke, firstXPos, yDim + yOff);
lineTo(stroke, firstXPos, prevYPos);

for (let i = dir == 1 ? idx0 : idx1; i >= idx0 && i <= idx1; i += dir) {
for (let i = dir == 1 ? lftIdx : rgtIdx; i >= lftIdx && i <= rgtIdx; i += dir) {
let yVal1 = dataY[i];

if (yVal1 == null)
if (yVal1 == null && i < rgtIdx)
continue;

let x1 = pixelForX(dataX[i]);
let y1 = pixelForY(yVal1);

if (align == 1)
lineTo(stroke, x1, prevYPos);
else
lineTo(stroke, prevXPos, y1);

else {
if(yVal1 !== undefined){
lineTo(stroke, prevXPos, y1);
}else {
x1 = prevXPos;
y1 = prevYPos;
}
}
lineTo(stroke, x1, y1);

prevYPos = y1;
prevXPos = x1;
}

lineTo(stroke, prevXPos, yDim + yOff);

let [ bandFillDir, bandClipDir ] = bandFillClipDirs(u, seriesIdx);

if (series.fill != null || bandFillDir != 0) {
Expand Down
21 changes: 15 additions & 6 deletions dist/uPlot.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,11 +212,11 @@ declare namespace uPlot {
Vertical = 1,
}

export type TypedArray = Int8Array | Uint8Array | Int16Array | Uint16Array | Int32Array | Uint32Array | Uint8ClampedArray | Float32Array | Float64Array;
export type serieData = (number | null | undefined)[]

export type AlignedData = [
xValues: number[] | TypedArray,
...yValues: ((number | null | undefined)[] | TypedArray)[],
xValues: number[],
...yValues: serieData[],
]

export interface DateNames {
Expand Down Expand Up @@ -558,6 +558,9 @@ declare namespace uPlot {

/** lock cursor on mouse click in plotting area */
lock?: boolean; // false

/** runtime - current lock of cursor in plotting area */
_lock?: boolean;
}

export namespace Scale {
Expand Down Expand Up @@ -642,7 +645,7 @@ declare namespace uPlot {
export interface SteppedPathBuilderOpts {
align?: -1 | 1; // 1

alignGaps?: -1 | 0 | 1; // 0
alignGaps?: -1 | 0 | 1; // align

// whether to draw ascenders/descenders at null/gap boundaries
ascDesc?: boolean; // false
Expand Down Expand Up @@ -722,9 +725,9 @@ declare namespace uPlot {
points?: PointsPathBuilderFactory;
}

export type Stroke = CanvasRenderingContext2D['strokeStyle'] | ((self: uPlot, seriesIdx: number) => CanvasRenderingContext2D['strokeStyle']);
export type Stroke = CanvasRenderingContext2D['strokeStyle'] | (() => CanvasRenderingContext2D['strokeStyle']);

export type Fill = CanvasRenderingContext2D['fillStyle'] | ((self: uPlot, seriesIdx: number) => CanvasRenderingContext2D['fillStyle']);
export type Fill = CanvasRenderingContext2D['fillStyle'] | (() => CanvasRenderingContext2D['fillStyle']);

export type Cap = CanvasRenderingContext2D['lineCap'];

Expand Down Expand Up @@ -864,9 +867,15 @@ declare namespace uPlot {
/** line & legend color */
stroke?: Series.Stroke;

/** runtime - current line color */
_stroke?: string;

/** area fill & legend color */
fill?: Series.Fill;

/** runtime - current fill color */
_fill?: string;

/** area fill baseline (default: 0) */
fillTo?: Series.FillTo;

Expand Down
38 changes: 27 additions & 11 deletions dist/uPlot.esm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1686,13 +1686,21 @@ function clipGaps(gaps, ori, plotLft, plotTop, plotWid, plotHgt) {

for (let i = 0; i < gaps.length; i++) {
let g = gaps[i];
// begin gaps always at x=0
g[0] = Math.max(0, g[0]);
g[1] = Math.max(0, g[1]);

// do not ignore first gap if less then first Point on chart
if(i===0 && g[0] <= prevGapEnd){
prevGapEnd = g[1];
}

if (g[1] > g[0]) {
let w = g[0] - prevGapEnd;

w > 0 && rect(clip, prevGapEnd, plotTop, w, plotTop + plotHgt);

prevGapEnd = g[1];
prevGapEnd = Math.max(prevGapEnd, g[1]);
}
}

Expand Down Expand Up @@ -2002,7 +2010,7 @@ function stepped(opts) {
// whether to draw ascenders/descenders at null/gap bondaries
const ascDesc = ifNull(opts.ascDesc, false);

const alignGaps = ifNull(opts.alignGaps, 0);
const alignGaps = ifNull(opts.alignGaps, align);

return (u, seriesIdx, idx0, idx1) => {
return orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim) => {
Expand All @@ -2018,35 +2026,43 @@ function stepped(opts) {

const dir = scaleX.dir * (scaleX.ori == 0 ? 1 : -1);

idx0 = nonNullIdx(dataY, idx0, idx1, 1);
idx1 = nonNullIdx(dataY, idx0, idx1, -1);
let lftIdx = align === -1 ? idx0 : nonNullIdx(dataY, idx0, idx1, 1);
let rgtIdx = align === 1 ? idx1 : nonNullIdx(dataY, idx0, idx1, -1);

let prevYPos = pixelForY(dataY[dir == 1 ? idx0 : idx1]);
let firstXPos = pixelForX(dataX[dir == 1 ? idx0 : idx1]);
let prevYPos = pixelForY(dataY[dir == 1 ? lftIdx : rgtIdx]);
let firstXPos = pixelForX(dataX[dir == 1 ? lftIdx : rgtIdx]);
let prevXPos = firstXPos;

lineTo(stroke, firstXPos, yDim + yOff);
lineTo(stroke, firstXPos, prevYPos);

for (let i = dir == 1 ? idx0 : idx1; i >= idx0 && i <= idx1; i += dir) {
for (let i = dir == 1 ? lftIdx : rgtIdx; i >= lftIdx && i <= rgtIdx; i += dir) {
let yVal1 = dataY[i];

if (yVal1 == null)
if (yVal1 == null && i < rgtIdx)
continue;

let x1 = pixelForX(dataX[i]);
let y1 = pixelForY(yVal1);

if (align == 1)
lineTo(stroke, x1, prevYPos);
else
lineTo(stroke, prevXPos, y1);

else {
if(yVal1 !== undefined){
lineTo(stroke, prevXPos, y1);
}else {
x1 = prevXPos;
y1 = prevYPos;
}
}
lineTo(stroke, x1, y1);

prevYPos = y1;
prevXPos = x1;
}

lineTo(stroke, prevXPos, yDim + yOff);

let [ bandFillDir, bandClipDir ] = bandFillClipDirs(u, seriesIdx);

if (series.fill != null || bandFillDir != 0) {
Expand Down
Loading