diff --git a/demos/bars-grouped-stacked.html b/demos/bars-grouped-stacked.html index 54bc29e1..ed3181de 100644 --- a/demos/bars-grouped-stacked.html +++ b/demos/bars-grouped-stacked.html @@ -75,7 +75,7 @@ ori, dir, stacked, - }), + },data), ], }; diff --git a/demos/grouped-bars.js b/demos/grouped-bars.js index 9b1cd512..3a9bc282 100644 --- a/demos/grouped-bars.js +++ b/demos/grouped-bars.js @@ -1,4 +1,4 @@ -function seriesBarsPlugin(opts) { +function seriesBarsPlugin(opts,data) { let pxRatio; let font; @@ -115,6 +115,62 @@ function seriesBarsPlugin(opts) { let qt; return { + init: [ + (u) => { + u.over.ondblclick = () => { + u.setData(data); + }; + }, + ], + setSelect: [ + (u) => { + if (u.select.width > 0) { + const min = u.posToVal(u.select.left, "x"); + const max = u.posToVal(u.select.left + u.select.width, "x"); + const roundedMin = Object.is(Math.ceil(min), -0) + ? 0 + : Math.ceil(min); + + const roundedMax = Math.ceil(max); + + const newData = []; + + data.forEach((singleData) => { + newData.push( + singleData?.slice(roundedMin, roundedMax + 1) + ); + }); + let minM = newData[0][0]; + let maxM = newData[0][newData[0].length - 1]; + + u.setData(newData, false); + let pctOffset = 0; + + distr( + u.data[0].length, + groupWidth, + groupDistr, + 0, + (di, lftPct, widPct) => { + pctOffset = lftPct + widPct / 2; + } + ); + + const rn = maxM - minM; + + if (pctOffset === 0.5) minM -= rn; + else { + const upScale = 1 / (1 - pctOffset * 2); + const offset = (upScale * rn - rn) / 2; + + minM -= offset; + maxM += offset; + } + u.setScale("x", { minM, maxM }); + u.setSelect({ width: 0, height: 0 }, false); + } + }, + ], hooks: { drawClear: u => { qt = qt || new Quadtree(0, 0, u.bbox.width, u.bbox.height); @@ -151,7 +207,6 @@ function seriesBarsPlugin(opts) { let hRect; uPlot.assign(opts, { - select: {show: false}, cursor: { x: false, y: false, @@ -192,8 +247,8 @@ function seriesBarsPlugin(opts) { dir, // auto: true, range: (u, min, max) => { - min = 0; - max = Math.max(1, u.data[0].length - 1); + min = u.data[0][0]; + max = u.data[0][u.data[0].length - 1]; let pctOffset = 0; diff --git a/demos/multi-bars.html b/demos/multi-bars.html index df8dd308..aea04139 100644 --- a/demos/multi-bars.html +++ b/demos/multi-bars.html @@ -116,7 +116,7 @@ ignore: [7], ori, dir, - }), + },d), ], }; @@ -232,7 +232,7 @@ ), } } - }), + },d), ], };