@stellar-expert/ui-framework 1.19.2 → 1.20.0

package/charts/series/column-series.js

@@ -0,0 +1,55 @@
+import {Series} from './series'
+import {pick, isNumber, clamp} from '../core/utilities'
+import {animateColumns} from '../core/animate'
+
+export class ColumnSeries extends Series {
+    render(group) {
+        this.group = group
+        const bars = []
+        const renderer = this.chart.renderer
+        const color = this.getColor()
+        const xAxis = this.xAxis
+        const yAxis = this.yAxis
+        const colOpts = this.chart.options.plotOptions.column || {}
+        const groupPadding = pick(colOpts.groupPadding, this.chart.options.plotOptions.series.groupPadding, 0.1)
+        const pointPadding = pick(colOpts.pointPadding, this.chart.options.plotOptions.series.pointPadding, 0.1)
+        const count = this.columnCount || 1
+        const idx = this.columnIndex || 0
+        const pointRange = this.chart.pointRange || ((xAxis.max - xAxis.min) / 50)
+
+        //baseline (threshold) pixel for un-stacked columns
+        const tVal = isNumber(this.threshold) ? this.threshold : yAxis.min
+        const baselineY = yAxis.toPixels(clamp(tVal, yAxis.min, yAxis.max))
+
+        const onCategory = !!xAxis.categories
+        for (const p of this.plotPoints) {
+            if (!isNumber(p.y))
+                continue
+            //column centered on the point x (slot spans [x-pointRange/2, x+pointRange/2]) so columns
+            //line up with the line/area plotted at x and with the axis tick at x
+            const center = xAxis.toPixels(p.x)
+            const categoryWidth = Math.abs(xAxis.toPixels(p.x + (onCategory ? 1 : pointRange)) - xAxis.toPixels(p.x))
+            const groupWidth = categoryWidth * (1 - 2 * groupPadding)
+            const offsetWidth = groupWidth / count
+            const colWidth = Math.max(1, offsetWidth * (1 - 2 * pointPadding))
+            const groupLeft = center - groupWidth / 2
+            const colX = groupLeft + idx * offsetWidth + (offsetWidth - colWidth) / 2
+
+            const top = isNumber(p.stackY) ? yAxis.toPixels(p.stackY) : yAxis.toPixels(p.y)
+            const bottom = isNumber(p.stackLow) ? yAxis.toPixels(p.stackLow) : baselineY
+            const y = Math.min(top, bottom)
+            const h = Math.max(0, Math.abs(bottom - top))
+            const rect = renderer.rect(colX, y, colWidth, h, {})
+                .css({fill: color})
+                .add(group)
+            //colTopY = pixel of the WHOLE column's top (stack total) so a stacked column fills as one unit.
+            //toPixels already applies the (log) transform — don't clamp the data value against the axis'
+            //internal min/max, which are in transformed space on a log axis
+            const total = isNumber(p.stackTotal) ? p.stackTotal : p.y
+            const colTopY = yAxis.toPixels(total)
+            bars.push({el: rect, topY: y, botY: y + h, baselineY, colTopY})
+        }
+        if (this.chart.animateThisRender)
+            animateColumns(bars)
+    }
+}

package/charts/series/index.js

@@ -0,0 +1,21 @@
+import {LineSeries} from './line-series'
+import {AreaSeries} from './area-series'
+import {ColumnSeries} from './column-series'
+import {CandlestickSeries} from './candlestick-series'
+
+//series type registry — extended in later phases (spline-smoothing, candlestick, variablepie, ...)
+export const seriesTypes = {
+    line: LineSeries,
+    spline: LineSeries,
+    area: AreaSeries,
+    areaspline: AreaSeries,
+    column: ColumnSeries,
+    bar: ColumnSeries,
+    candlestick: CandlestickSeries,
+    ohlc: CandlestickSeries
+}
+
+export function createSeries(chart, options) {
+    const Ctor = seriesTypes[options.type] || LineSeries
+    return new Ctor(chart, options)
+}

package/charts/series/line-series.js

@@ -0,0 +1,21 @@
+import {pick} from '../core/utilities'
+import {revealLeftToRight} from '../core/animate'
+import {Series} from './series'
+
+export class LineSeries extends Series {
+    render(group) {
+        this.group = group
+        const renderer = this.chart.renderer
+        const color = this.getColor()
+        const lineWidth = pick(this.options.lineWidth,
+            this.chart.options.plotOptions.series.lineWidth, 2)
+        const d = this.linePath()
+        if (d) {
+            this.graph = renderer.path(d, {'stroke-width': lineWidth, fill: 'none', 'stroke-linejoin': 'round', 'stroke-linecap': 'round'})
+                .css({stroke: color})
+                .add(group)
+            if (this.chart.animateThisRender)
+                revealLeftToRight(this.chart, group)
+        }
+    }
+}

package/charts/series/series.js

@@ -0,0 +1,161 @@
+import {pick, isNumber} from '../core/utilities'
+
+//Catmull-Rom -> cubic bezier smoothing for spline series
+function smoothSegmentPath(pts) {
+    let d = `M ${pts[0].plotX} ${pts[0].plotY} `
+    for (let i = 0; i < pts.length - 1; i++) {
+        const p0 = pts[i - 1] || pts[i]
+        const p1 = pts[i]
+        const p2 = pts[i + 1]
+        const p3 = pts[i + 2] || pts[i + 1]
+        const c1x = p1.plotX + (p2.plotX - p0.plotX) / 6
+        const c1y = p1.plotY + (p2.plotY - p0.plotY) / 6
+        const c2x = p2.plotX - (p3.plotX - p1.plotX) / 6
+        const c2y = p2.plotY - (p3.plotY - p1.plotY) / 6
+        d += `C ${c1x} ${c1y} ${c2x} ${c2y} ${p2.plotX} ${p2.plotY} `
+    }
+    return d
+}
+
+export class Series {
+    constructor(chart, options) {
+        this.chart = chart
+        this.options = options
+        this.type = options.type || 'line'
+        this.name = options.name
+        this.visible = options.visible !== false
+        this.index = 0 //creation order, assigned by chart
+        //area/column rest on a zero baseline by default (the series `threshold`), pulling the axis to 0
+        this.threshold = options.threshold !== undefined ? options.threshold
+            : (/^(area|areaspline|column|bar)$/.test(this.type) ? 0 : null)
+        this.setData(options.data || [])
+    }
+
+    setData(data) {
+        this.xData = []
+        this.yData = []
+        this.points = []
+        for (const p of data) {
+            let x, y, point
+            if (Array.isArray(p)) {
+                if (p.length >= 5) {
+                    //OHLC tuple [x, open, high, low, close]
+                    x = p[0]
+                    y = p[4]
+                    point = {x, y, open: p[1], high: p[2], low: p[3], close: p[4]}
+                } else {
+                    x = p[0]
+                    y = p[1]
+                    point = {x, y}
+                }
+            } else if (p && typeof p === 'object') {
+                x = pick(p.x, this.points.length)
+                y = p.y
+                point = {...p, x, y}
+            } else {
+                x = this.points.length
+                y = p
+                point = {x, y}
+            }
+            this.xData.push(x)
+            this.yData.push(y)
+            point.series = this
+            this.points.push(point)
+        }
+        //points actually drawn — replaced by the grouped set when data grouping is active
+        this.plotPoints = this.points
+        //live data update (e.g. lazy-loaded finer candles on zoom) — repaint. Skipped during the initial
+        //series construction, when the chart hasn't rendered yet.
+        if (this.chart && this.chart.hasRendered)
+            this.chart.redraw()
+    }
+
+    bindAxes() {
+        this.xAxis = this.chart.xAxis[0]
+        const yIdx = isNumber(this.options.yAxis) ? this.options.yAxis : 0
+        this.yAxis = this.chart.yAxis[yIdx] || this.chart.yAxis[0]
+        this.xAxis.series.push(this)
+        this.yAxis.series.push(this)
+    }
+
+    get colorIndex() {
+        return pick(this.options.colorIndex, this.index)
+    }
+
+    get zIndex() {
+        return pick(this.options.index, this.index)
+    }
+
+    //resolve a plot option through the option cascade: per-series → plotOptions[type] → plotOptions.series
+    //(e.g. `step`/`connectNulls` are commonly set once on plotOptions.series and inherited by every series)
+    resolveOption(name, fallback) {
+        const po = this.chart.options.plotOptions || {}
+        return pick(this.options[name], (po[this.type] || {})[name], (po.series || {})[name], fallback)
+    }
+
+    getColor() {
+        if (this.options.color)
+            return this.options.color
+        const colors = this.chart.options.colors || []
+        return colors[this.colorIndex % colors.length] || '#08B5E5'
+    }
+
+    translate() {
+        for (const pt of this.plotPoints) {
+            pt.plotX = this.xAxis.toPixels(pt.x)
+            pt.plotY = isNumber(pt.y) ? this.yAxis.toPixels(isNumber(pt.stackY) ? pt.stackY : pt.y) : null
+            pt.plotBottom = isNumber(pt.stackLow) ? this.yAxis.toPixels(pt.stackLow) : null
+        }
+    }
+
+    //build an SVG path "d" from plotted points (M/L), breaking on nulls unless connectNulls
+    linePath(closePathToBaseline) {
+        const connectNulls = this.resolveOption('connectNulls', false)
+        const step = this.resolveOption('step')
+        const segments = []
+        let current = []
+        for (const pt of this.plotPoints) {
+            if (pt.plotY === null) {
+                if (!connectNulls) {
+                    if (current.length) segments.push(current)
+                    current = []
+                    continue
+                }
+                continue
+            }
+            current.push(pt)
+        }
+        if (current.length) segments.push(current)
+        this.segments = segments
+
+        const smooth = this.type === 'spline' || this.type === 'areaspline'
+        let d = ''
+        for (const seg of segments) {
+            if (smooth && seg.length > 2) {
+                d += smoothSegmentPath(seg)
+            } else {
+                seg.forEach((pt, i) => {
+                    if (i === 0) {
+                        d += `M ${pt.plotX} ${pt.plotY} `
+                    } else if (step === 'left') {
+                        d += `L ${pt.plotX} ${seg[i - 1].plotY} L ${pt.plotX} ${pt.plotY} `
+                    } else if (step === 'right') {
+                        d += `L ${seg[i - 1].plotX} ${pt.plotY} L ${pt.plotX} ${pt.plotY} `
+                    } else {
+                        d += `L ${pt.plotX} ${pt.plotY} `
+                    }
+                })
+            }
+        }
+        return d.trim()
+    }
+
+    render() {
+        //overridden by subclasses
+    }
+
+    destroy() {
+        if (this.group)
+            this.group.destroy()
+    }
+}

package/charts/stock/data-grouping.js

@@ -0,0 +1,141 @@
+//Downsample raw series points into calendar-aligned time buckets (stock data grouping).
+import {isNumber} from '../core/utilities'
+
+const day = 24 * 3600 * 1000
+const week = 7 * day
+
+const UNIT_MS = {
+    millisecond: 1,
+    second: 1000,
+    minute: 60000,
+    hour: 3600000,
+    day,
+    week,
+    month: 30 * day,
+    year: 365 * day
+}
+
+function chooseInterval(units, approxInterval) {
+    //flatten the unit/multiple options into ascending candidate intervals
+    const candidates = []
+    for (const [unitName, multiples] of units)
+        for (const mult of multiples)
+            candidates.push({unitName, mult, ms: UNIT_MS[unitName] * mult})
+    candidates.sort((a, b) => a.ms - b.ms)
+    if (!candidates.length)
+        return {unitName: 'day', mult: 1, ms: day}
+    //pick the candidate NEAREST to the target (midpoint threshold) — not the first one >= target,
+    //which over-coarsens (e.g. picks a 6-month bucket where 2-month fits better)
+    for (let i = 0; i < candidates.length; i++) {
+        const next = candidates[i + 1]
+        if (!next || approxInterval <= (candidates[i].ms + next.ms) / 2)
+            return candidates[i]
+    }
+    return candidates[candidates.length - 1]
+}
+
+function bucketStart(x, unitName, mult) {
+    if (unitName === 'month') {
+        const d = new Date(x)
+        const m = Math.floor(d.getUTCMonth() / mult) * mult
+        return Date.UTC(d.getUTCFullYear(), m, 1)
+    }
+    if (unitName === 'year') {
+        const d = new Date(x)
+        const y = Math.floor(d.getUTCFullYear() / mult) * mult
+        return Date.UTC(y, 0, 1)
+    }
+    const ms = UNIT_MS[unitName] * mult
+    if (unitName === 'week') {
+        //epoch (1970-01-01) is a Thursday, so a plain floor would start weeks on Thursday. Weeks start
+        //on Monday — anchor to 1970-01-05 (the first Monday) so buckets align to week boundaries.
+        const MONDAY_ANCHOR = 4 * day
+        return Math.floor((x - MONDAY_ANCHOR) / ms) * ms + MONDAY_ANCHOR
+    }
+    return Math.floor(x / ms) * ms
+}
+
+function aggregate(values, approximation) {
+    if (!values.length)
+        return null
+    switch (approximation) {
+        case 'sum':
+            return values.reduce((a, b) => a + b, 0)
+        case 'high':
+            return Math.max(...values)
+        case 'low':
+            return Math.min(...values)
+        case 'open':
+            return values[0]
+        case 'close':
+            return values[values.length - 1]
+        case 'average':
+        default:
+            return values.reduce((a, b) => a + b, 0) / values.length
+    }
+}
+
+/**
+ * @param {{x:number,y:number}[]} rawPoints - chronological raw points
+ * @param {{units:Array, groupPixelWidth:number, approximation:string}} grouping
+ * @param {number} xMin
+ * @param {number} xMax
+ * @param {number} plotWidth
+ * @param {string} defaultApproximation
+ * @return {{x:number,y:number}[]}
+ */
+export function groupSeriesData(rawPoints, grouping, xMin, xMax, plotWidth, defaultApproximation) {
+    if (!rawPoints.length)
+        return rawPoints
+    const groupPixelWidth = grouping.groupPixelWidth || 16
+    const groupCount = Math.max(1, Math.floor(plotWidth / groupPixelWidth))
+    const approxInterval = (xMax - xMin) / groupCount
+    const units = grouping.units || [['millisecond', [1]], ['second', [1]], ['minute', [1]], ['hour', [1]], ['day', [1]], ['week', [1]], ['month', [1]], ['year', [1]]]
+    const {unitName, mult} = chooseInterval(units, approxInterval)
+    const approximation = grouping.approximation || defaultApproximation || 'average'
+
+    //OHLC series (candlestick/ohlc) aggregate open=first, high=max, low=min, close=last per bucket
+    //instead of a single value — detect it from the point shape
+    const isOHLC = rawPoints.some(p => isNumber(p.open) && isNumber(p.close))
+
+    const grouped = []
+    let curStart = null
+    let bucketPts = []
+    let bucketFirst = null
+
+    const flush = () => {
+        if (!bucketPts.length)
+            return
+        //carry the bucket unit/multiple so the tooltip can show the group range (e.g. "September-October 2021")
+        const meta = {x: curStart, series: bucketFirst.series, groupUnit: unitName, groupMult: mult}
+        if (isOHLC) {
+            const open = bucketPts[0].open
+            const close = bucketPts[bucketPts.length - 1].close
+            grouped.push({
+                ...meta,
+                open,
+                high: Math.max(...bucketPts.map(p => p.high)),
+                low: Math.min(...bucketPts.map(p => p.low)),
+                close,
+                y: close
+            })
+        } else {
+            grouped.push({...meta, y: aggregate(bucketPts.map(p => p.y), approximation)})
+        }
+    }
+
+    for (const p of rawPoints) {
+        if (isOHLC ? !isNumber(p.close) : !isNumber(p.y))
+            continue
+        const start = bucketStart(p.x, unitName, mult)
+        if (curStart === null || start !== curStart) {
+            flush()
+            curStart = start
+            bucketPts = []
+            bucketFirst = p
+        }
+        bucketPts.push(p)
+    }
+    flush()
+    return grouped
+}

package/charts/stock/navigator.js

@@ -0,0 +1,205 @@
+import {isNumber, clamp} from '../core/utilities'
+import {animateLineDraw} from '../core/animate'
+import {getDateTimeTickPositions, dateTimeLabelFormat, dateFormat} from '../core/time'
+
+//Navigator look: a thin red overview line, the SELECTED window masked with a light fill,
+//a light outline, and small grip handles centred vertically on each edge.
+const NAV_LINE = '#df0000'
+const MASK_FILL = 'rgba(102,133,194,0.3)'
+const OUTLINE = 'rgba(204,204,204,0.6)'
+const HANDLE_FILL = '#f2f2f2'
+const HANDLE_STROKE = '#999'
+const HANDLE_W = 8
+const HANDLE_H = 15
+
+//logical (pre display-padding) axis extremes — what the user actually selected
+const viewMin = xAxis => isNumber(xAxis.logicalMin) ? xAxis.logicalMin : xAxis.min
+const viewMax = xAxis => isNumber(xAxis.logicalMax) ? xAxis.logicalMax : xAxis.max
+
+//Bottom navigator strip: a mini overview of the full series with a draggable selection window
+//that drives the main x-axis extremes.
+export class Navigator {
+    constructor(chart) {
+        this.chart = chart
+    }
+
+    render(group, top, height) {
+        const chart = this.chart
+        const renderer = chart.renderer
+        const xAxis = chart.xAxis[0]
+        const series = chart.series.find(s => s.points.length)
+        if (!series)
+            return
+        const left = chart.plotLeft
+        const width = chart.plotWidth
+        this.top = top
+        this.height = height
+        this.left = left
+        this.width = width
+
+        const navSeries = chart.options.navigator && chart.options.navigator.series
+        const pts = (navSeries && navSeries.data) ? toPoints(navSeries.data) : series.points
+        const dMin = pts[0].x
+        const dMax = pts[pts.length - 1].x
+        this.dataMin = dMin
+        this.dataMax = dMax
+        const xToPx = v => left + ((v - dMin) / ((dMax - dMin) || 1)) * width
+
+        let yMin = Infinity
+        let yMax = -Infinity
+        for (const p of pts) {
+            const v = isNumber(p.close) ? p.close : p.y
+            if (isNumber(v)) {
+                if (v < yMin) yMin = v
+                if (v > yMax) yMax = v
+            }
+        }
+        const yToPx = v => top + height - ((v - yMin) / ((yMax - yMin) || 1)) * (height - 4) - 2
+
+        //faint background
+        renderer.rect(left, top, width, height, {}).css({fill: 'var(--color-border-shadow)', 'fill-opacity': 0.15}).add(group)
+        //time breakpoints across the full overview range, so it's clear where the selected window sits
+        this.renderTimeAxis(group, top, height, dMin, dMax, xToPx)
+        //overview as a thin line (no fill)
+        let d = ''
+        let started = false
+        for (const p of pts) {
+            const v = isNumber(p.close) ? p.close : p.y
+            if (isNumber(v)) {
+                d += `${started ? 'L' : 'M'} ${xToPx(p.x).toFixed(1)} ${yToPx(v).toFixed(1)} `
+                started = true
+            }
+        }
+        const lineEl = renderer.path(d.trim(), {'stroke-width': 1, fill: 'none'}).css({stroke: NAV_LINE}).add(group)
+
+        //selection window edges (clamped into the strip) — use the LOGICAL extremes (pre display-padding)
+        const x0 = clamp(xToPx(viewMin(xAxis)), left, left + width)
+        const x1 = clamp(xToPx(viewMax(xAxis)), left, left + width)
+        //mask the SELECTED region with a light fill, leave the outside clear
+        renderer.rect(x0, top, Math.max(0, x1 - x0), height, {}).css({fill: MASK_FILL, 'pointer-events': 'none'}).add(group)
+        //outline around the whole strip and the selected window
+        renderer.rect(left, top, width, height, {}).css({fill: 'none', stroke: OUTLINE, 'stroke-width': 1, 'pointer-events': 'none'}).add(group)
+        renderer.rect(x0, top, Math.max(0, x1 - x0), height, {}).css({fill: 'none', stroke: OUTLINE, 'stroke-width': 1, 'pointer-events': 'none'}).add(group)
+
+        //draggable selection band (pan) — drawn under the handles so edge drags still resize
+        const band = renderer.rect(x0, top, Math.max(0, x1 - x0), height, {}).css({fill: 'transparent', cursor: 'grab'}).add(group)
+        this.bindBand(band)
+        //grip handles, centred vertically on each edge
+        const hy = top + (height - HANDLE_H) / 2
+        const h0 = this.drawHandle(group, x0, hy)
+        const h1 = this.drawHandle(group, x1, hy)
+        this.bindHandle(h0, 'min')
+        this.bindHandle(h1, 'max')
+
+        //entrance: draw the overview line left→right on the first paint
+        if (chart.animateThisRender)
+            animateLineDraw(lineEl)
+    }
+
+    //faint calendar gridlines spanning the full overview, with dimmed labels below the strip — the same
+    //datetime tick logic as the main x-axis, so the navigator reads as a miniature timeline
+    renderTimeAxis(group, top, height, dMin, dMax, xToPx) {
+        const renderer = this.chart.renderer
+        const targetCount = Math.max(2, Math.round(this.width / 90))
+        const {positions, unitName} = getDateTimeTickPositions(dMin, dMax, targetCount)
+        const fmt = dateTimeLabelFormat(unitName)
+        const gridColor = 'var(--color-border-shadow)'
+        const labelStyle = {
+            fontSize: '11px',
+            fontFamily: 'Roboto Condensed,sans-serif',
+            fill: 'var(--color-dimmed)',
+            color: 'var(--color-dimmed)'
+        }
+        for (const pos of positions) {
+            if (pos < dMin - 1e-6 || pos > dMax + 1e-6)
+                continue
+            const x = xToPx(pos)
+            renderer.line(x, top, x, top + height, {'stroke-width': 1}).css({stroke: gridColor, 'pointer-events': 'none'}).add(group)
+            renderer.label(dateFormat(fmt, pos), x, top + height + 13, {'text-anchor': 'middle'}).css(labelStyle).add(group)
+        }
+    }
+
+    //a grip handle: rounded rect with two vertical grip lines
+    drawHandle(group, cx, hy) {
+        const renderer = this.chart.renderer
+        const rect = renderer.rect(cx - HANDLE_W / 2, hy, HANDLE_W, HANDLE_H, {rx: 2})
+            .css({fill: HANDLE_FILL, stroke: HANDLE_STROKE, 'stroke-width': 1, cursor: 'ew-resize'}).add(group)
+        renderer.line(cx - 1.5, hy + 4, cx - 1.5, hy + HANDLE_H - 4, {'stroke-width': 1})
+            .css({stroke: HANDLE_STROKE, 'pointer-events': 'none'}).add(group)
+        renderer.line(cx + 1.5, hy + 4, cx + 1.5, hy + HANDLE_H - 4, {'stroke-width': 1})
+            .css({stroke: HANDLE_STROKE, 'pointer-events': 'none'}).add(group)
+        return rect
+    }
+
+    bindBand(band) {
+        const chart = this.chart
+        const xAxis = chart.xAxis[0]
+        band.on('mousedown', e => {
+            e.preventDefault()
+            const svg = chart.renderer.root.element
+            const rect = svg.getBoundingClientRect()
+            const scaleX = chart.chartWidth / rect.width
+            const startPx = (e.clientX - rect.left) * scaleX
+            const startMin = viewMin(xAxis)
+            const startMax = viewMax(xAxis)
+            const span = startMax - startMin
+            const dataSpan = this.dataMax - this.dataMin
+            const move = ev => {
+                const px = (ev.clientX - rect.left) * scaleX
+                const delta = ((px - startPx) / this.width) * dataSpan
+                let min = startMin + delta
+                let max = startMax + delta
+                if (min < this.dataMin) {
+                    min = this.dataMin
+                    max = min + span
+                }
+                if (max > this.dataMax) {
+                    max = this.dataMax
+                    min = max - span
+                }
+                xAxis.setExtremes(min, max)
+            }
+            const up = () => {
+                document.removeEventListener('mousemove', move)
+                document.removeEventListener('mouseup', up)
+            }
+            document.addEventListener('mousemove', move)
+            document.addEventListener('mouseup', up)
+        })
+    }
+
+    bindHandle(handle, which) {
+        const chart = this.chart
+        const xAxis = chart.xAxis[0]
+        handle.on('mousedown', e => {
+            e.preventDefault()
+            const svg = chart.renderer.root.element
+            const rect = svg.getBoundingClientRect()
+            const scaleX = chart.chartWidth / rect.width
+            const move = ev => {
+                const px = (ev.clientX - rect.left) * scaleX
+                const v = this.dataMin + ((px - this.left) / this.width) * (this.dataMax - this.dataMin)
+                let min = viewMin(xAxis)
+                let max = viewMax(xAxis)
+                const minSpan = (this.dataMax - this.dataMin) / 500
+                if (which === 'min')
+                    min = Math.max(this.dataMin, Math.min(v, max - minSpan))
+                else
+                    max = Math.min(this.dataMax, Math.max(v, min + minSpan))
+                xAxis.setExtremes(min, max)
+            }
+            const up = () => {
+                document.removeEventListener('mousemove', move)
+                document.removeEventListener('mouseup', up)
+            }
+            document.addEventListener('mousemove', move)
+            document.addEventListener('mouseup', up)
+        })
+    }
+}
+
+function toPoints(data) {
+    return data.map(p => Array.isArray(p)
+        ? {x: p[0], y: p[p.length >= 5 ? 4 : 1], close: p.length >= 5 ? p[4] : undefined}
+        : p)
+}