From 3a84c6ff3728583a9de164803186623508d47400 Mon Sep 17 00:00:00 2001 From: Carlos Alberto Date: Sun, 31 Oct 2021 17:53:23 -0300 Subject: [PATCH 1/2] implement horizontalPanZoomScrollerPlugin and demo to horizontal mouse whell & click to pan and +/- zoom control in plugin --- demos/candlestick-ohlc-pan-zoom-scroller.html | 531 ++++++++++++++++++ demos/index.html | 1 + 2 files changed, 532 insertions(+) create mode 100644 demos/candlestick-ohlc-pan-zoom-scroller.html diff --git a/demos/candlestick-ohlc-pan-zoom-scroller.html b/demos/candlestick-ohlc-pan-zoom-scroller.html new file mode 100644 index 00000000..97e4cf89 --- /dev/null +++ b/demos/candlestick-ohlc-pan-zoom-scroller.html @@ -0,0 +1,531 @@ + + + + + + Candlestick Chart + + + + + + + + + + + + +

Notes

+ + This demo use horizontalPanZoomScrollerPlugin() function. + +

+ Features include: +

+ + + + + + + + + + + \ No newline at end of file diff --git a/demos/index.html b/demos/index.html index dd6a80b2..86d376af 100644 --- a/demos/index.html +++ b/demos/index.html @@ -85,6 +85,7 @@

μPlot Demos

Drawing

Trendlines from zoomed range & zoom snapping OHLC plugin + legend-as-tooltip plugin + OHLC plugin + legend-as-tooltip with horizontal scroller and +/- key zoom & pan plugin Box & whisker plugin + legend-as-tooltip plugin Draw hooks & (custom points) Multi-series bars plugin From 67a35b32e08e4ac3a6480336563bc9428942b49d Mon Sep 17 00:00:00 2001 From: Carlos Alberto Date: Tue, 2 Nov 2021 15:43:07 -0300 Subject: [PATCH 2/2] added y re-scale --- demos/candlestick-ohlc-pan-zoom-scroller.html | 54 +++++++++++++++++++ demos/candlestick-ohlc.html | 2 +- 2 files changed, 55 insertions(+), 1 deletion(-) diff --git a/demos/candlestick-ohlc-pan-zoom-scroller.html b/demos/candlestick-ohlc-pan-zoom-scroller.html index 97e4cf89..b969f900 100644 --- a/demos/candlestick-ohlc-pan-zoom-scroller.html +++ b/demos/candlestick-ohlc-pan-zoom-scroller.html @@ -6,6 +6,7 @@ Candlestick Chart + @@ -163,6 +164,55 @@ }, false); + + + /* left axis scale */ + + let leftAxisScale = u.root.querySelectorAll(".u-axis")[1]; + let valYscaleBefore = 0; + + let clientYMove = 0; + + + function move() { + rafPending = false; + + let diff = 0; + + lftx = u.valToPos(u.scales.x.min, 'x'); + widx = u.valToPos(u.scales.x.max, 'x'); + + lfty = u.valToPos(u.scales.y.min, 'y'); + widy = u.valToPos(u.scales.y.max, 'y') + (valYscaleBefore - clientYMove) ; + + zoomed(lftx, widx, lfty, widy); + }; + + let animateMove = function(e){ + clientYMove = e.clientY; + + if (!rafPending) { + rafPending = true; + + requestAnimationFrame(move); + } + } + + + + + leftAxisScale.addEventListener("mousedown", (e) => { + valYscaleBefore = e.clientY; + leftAxisScale.addEventListener("mousemove", animateMove, { passive: true }); + }, false); + + leftAxisScale.addEventListener("mouseup", (e) => { + leftAxisScale.removeEventListener("mousemove", animateMove, { passive: true }); + }, false); + + /* end: left axis scale */ + + } return { @@ -504,6 +554,10 @@ + + + + diff --git a/demos/candlestick-ohlc.html b/demos/candlestick-ohlc.html index 5e4b98f9..28b7bc95 100644 --- a/demos/candlestick-ohlc.html +++ b/demos/candlestick-ohlc.html @@ -227,7 +227,7 @@ }); opts.series.forEach(series => { - series.paths = () => null; + //series.paths = () => null; series.points = {show: false}; }); },