@stellar-expert/ui-framework 1.19.2 → 1.20.0

package/charts/interaction/tooltip.js

@@ -0,0 +1,185 @@
+import {dateFormat} from '../core/time'
+import {isNumber, addThousandsSep} from '../core/utilities'
+
+function formatValue(v, tooltipOpts) {
+    if (!isNumber(v))
+        return '—'
+    let s
+    if (tooltipOpts && isNumber(tooltipOpts.valueDecimals)) {
+        s = v.toFixed(tooltipOpts.valueDecimals)
+    } else {
+        s = String(Math.round(v * 1000) / 1000)
+    }
+    s = addThousandsSep(s)
+    if (tooltipOpts && tooltipOpts.valuePrefix)
+        s = tooltipOpts.valuePrefix + s
+    if (tooltipOpts && tooltipOpts.valueSuffix)
+        s += tooltipOpts.valueSuffix
+    return s
+}
+
+const DAY = 24 * 3600 * 1000
+
+//Header for a hovered point: a single instant, or the grouped bucket range ("September-October 2021")
+//when data grouping carries a unit/multiple on the point.
+function pointHeader(point, key, xAxis) {
+    if (xAxis.type !== 'datetime')
+        return xAxis.categories ? xAxis.categories[key] : key
+    const unit = point && point.groupUnit
+    const mult = (point && point.groupMult) || 1
+    const d = new Date(key)
+    if (unit === 'year')
+        return mult > 1 ? `${d.getUTCFullYear()}-${d.getUTCFullYear() + mult - 1}` : `${d.getUTCFullYear()}`
+    if (unit === 'month') {
+        if (mult <= 1)
+            return dateFormat('%B %Y', key)
+        const end = Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + mult - 1, 1)
+        return `${dateFormat('%B', key)}-${dateFormat('%B', end)} ${new Date(end).getUTCFullYear()}`
+    }
+    if ((unit === 'week' || unit === 'day') && mult * (unit === 'week' ? 7 : 1) > 1) {
+        const span = (unit === 'week' ? 7 : 1) * mult
+        return `${dateFormat('%b %e', key)} - ${dateFormat('%b %e, %Y', key + (span - 1) * DAY)}`
+    }
+    //single day / sub-day instant
+    return dateFormat('%b %e, %Y', key)
+}
+
+export class Tooltip {
+    constructor(chart) {
+        this.chart = chart
+    }
+
+    bind() {
+        const chart = this.chart
+        if (!chart.options.tooltip.enabled)
+            return
+        this.overlay = chart.renderer.group('ix-tooltip-overlay').add(chart.renderer.root)
+        this.box = document.createElement('div')
+        Object.assign(this.box.style, {
+            position: 'absolute',
+            pointerEvents: 'none',
+            zIndex: 20,
+            display: 'none',
+            background: 'rgba(247,247,247,0.85)',
+            border: '1px solid var(--color-border-shadow)',
+            borderRadius: '3px',
+            padding: '5px 8px',
+            font: '12px Roboto Condensed,sans-serif',
+            color: '#15171a',
+            whiteSpace: 'nowrap',
+            boxShadow: '0 1px 6px rgba(0,0,0,0.3)'
+        })
+        chart.container.appendChild(this.box)
+        this.svg = chart.renderer.root.element
+        this.moveHandler = e => this.onMove(e)
+        this.leaveHandler = () => this.hide()
+        this.svg.addEventListener('mousemove', this.moveHandler)
+        this.svg.addEventListener('mouseleave', this.leaveHandler)
+    }
+
+    onMove(e) {
+        const chart = this.chart
+        const rect = this.svg.getBoundingClientRect()
+        const scaleX = chart.chartWidth / rect.width
+        const mx = (e.clientX - rect.left) * scaleX
+        const my = (e.clientY - rect.top) * (chart.chartHeight / rect.height)
+        if (mx < chart.plotLeft || mx > chart.plotLeft + chart.plotWidth ||
+            my < chart.plotTop || my > chart.plotTop + chart.plotHeight) {
+            this.hide()
+            return
+        }
+        const xAxis = chart.xAxis[0]
+        const span = (xAxis.max - xAxis.min) || 1
+        const xVal = xAxis.min + ((mx - xAxis.left) / xAxis.len) * span
+
+        //snap to the nearest DRAWN point (grouped buckets / columns), so the crosshair jumps column-to-column
+        //and the tooltip reports the group value — not the raw ungrouped sample
+        let key = null
+        for (const s of chart.series) {
+            if (!s.visible || !s.plotPoints.length) continue
+            let best = null, bd = Infinity
+            for (const p of s.plotPoints) {
+                const d = Math.abs(p.x - xVal)
+                if (d < bd) { bd = d; best = p }
+            }
+            if (best) { key = best.x; break }
+        }
+        if (key === null) { this.hide(); return }
+
+        const rows = []
+        const markers = []
+        for (const s of chart.series) {
+            if (!s.visible) continue
+            let best = null, bd = Infinity
+            for (const p of s.plotPoints) {
+                const d = Math.abs(p.x - key)
+                if (d < bd) { bd = d; best = p }
+            }
+            if (best && isNumber(best.y)) {
+                //series-level tooltip wins; fall back to the chart-level tooltip (e.g. OHLC pointFormatter)
+                const tOpts = s.options.tooltip || chart.options.tooltip
+                if (tOpts && typeof tOpts.pointFormatter === 'function') {
+                    rows.push(`<div><span style="color:${s.getColor()}">●</span> ${tOpts.pointFormatter.call(best)}</div>`)
+                } else {
+                    rows.push(`<div><span style="color:${s.getColor()}">●</span> ${s.name || ''}: <b>${formatValue(best.y, tOpts)}</b></div>`)
+                }
+                markers.push({s, p: best})
+            }
+        }
+        if (!rows.length) { this.hide(); return }
+
+        //crosshair
+        const cx = xAxis.toPixels(key)
+        this.overlay.element.innerHTML = ''
+        if (chart.options.tooltip.crosshairs !== false && xAxis.options.crosshair !== false) {
+            chart.renderer.line(cx, chart.plotTop, cx, chart.plotTop + chart.plotHeight, {'stroke-width': 1})
+                .css({stroke: 'var(--color-text)', 'stroke-opacity': 0.55}).add(this.overlay)
+        }
+        //highlight the hovered point — only on line/area series (columns show via the crosshair),
+        //a single point marker
+        for (const {s, p} of markers) {
+            if (/^(column|bar)$/.test(s.type))
+                continue
+            if (!isNumber(p.plotX) || !isNumber(p.plotY))
+                continue
+            const color = s.getColor()
+            //translucent halo behind the point
+            chart.renderer.circle(p.plotX, p.plotY, 8, {})
+                .css({fill: color, 'fill-opacity': 0.25, stroke: 'none'})
+                .add(this.overlay)
+            //the point marker: series-color fill with a white ring
+            chart.renderer.circle(p.plotX, p.plotY, 4, {})
+                .css({fill: color, stroke: '#fff', 'stroke-width': 2})
+                .add(this.overlay)
+        }
+
+        const header = pointHeader(markers[0] && markers[0].p, key, xAxis)
+        this.box.innerHTML = `<div style="opacity:.7;margin-bottom:2px">${header}</div>` + rows.join('')
+        this.box.style.display = 'block'
+
+        //position relative to container, flip side past mid-plot
+        const boxRect = this.box.getBoundingClientRect()
+        const pxCss = cx / scaleX
+        const left = pxCss > rect.width / 2 ? pxCss - boxRect.width - 14 : pxCss + 14
+        const top = Math.max(4, (e.clientY - rect.top) - boxRect.height / 2)
+        this.box.style.left = left + 'px'
+        this.box.style.top = top + 'px'
+    }
+
+    hide() {
+        if (this.box)
+            this.box.style.display = 'none'
+        if (this.overlay)
+            this.overlay.element.innerHTML = ''
+    }
+
+    destroy() {
+        if (this.svg) {
+            this.svg.removeEventListener('mousemove', this.moveHandler)
+            this.svg.removeEventListener('mouseleave', this.leaveHandler)
+        }
+        if (this.box && this.box.parentNode)
+            this.box.parentNode.removeChild(this.box)
+        this.box = null
+    }
+}

package/charts/pie/pie-chart.js

@@ -0,0 +1,269 @@
+//Pie / variable-pie rendering path (contract users chart).
+//variable-pie: slice ANGLE scales with y, slice OUTER RADIUS scales with z.
+import {pick, relativeLength, isNumber, addThousandsSep} from '../core/utilities'
+import {animate, DEFAULT_DURATION} from '../core/animate'
+
+const TEXT_STYLE = {
+    fontSize: '12px',
+    fontFamily: 'Roboto Condensed,sans-serif',
+    fill: 'var(--color-text)',
+    color: 'var(--color-text)'
+}
+const LEGEND_LINE = 18
+
+function sectorPath(cx, cy, rInner, rOuter, a0, a1) {
+    const cos0 = Math.cos(a0)
+    const sin0 = Math.sin(a0)
+    const cos1 = Math.cos(a1)
+    const sin1 = Math.sin(a1)
+    const large = (a1 - a0) > Math.PI ? 1 : 0
+    const xo0 = cx + rOuter * cos0
+    const yo0 = cy + rOuter * sin0
+    const xo1 = cx + rOuter * cos1
+    const yo1 = cy + rOuter * sin1
+    const xi1 = cx + rInner * cos1
+    const yi1 = cy + rInner * sin1
+    const xi0 = cx + rInner * cos0
+    const yi0 = cy + rInner * sin0
+    return `M ${xo0} ${yo0} A ${rOuter} ${rOuter} 0 ${large} 1 ${xo1} ${yo1} ` +
+        `L ${xi1} ${yi1} A ${rInner} ${rInner} 0 ${large} 0 ${xi0} ${yi0} Z`
+}
+
+//just the outer curved edge of a sector (used for the hover band — outside only, not around the slice)
+function outerArcPath(cx, cy, rOuter, a0, a1) {
+    const large = (a1 - a0) > Math.PI ? 1 : 0
+    const xo0 = cx + rOuter * Math.cos(a0)
+    const yo0 = cy + rOuter * Math.sin(a0)
+    const xo1 = cx + rOuter * Math.cos(a1)
+    const yo1 = cy + rOuter * Math.sin(a1)
+    return `M ${xo0} ${yo0} A ${rOuter} ${rOuter} 0 ${large} 1 ${xo1} ${yo1}`
+}
+
+//reused HTML tooltip for pie slices (light, like the cartesian tooltip)
+function ensurePieTooltip(chart) {
+    if (chart.pieTooltipEl && chart.pieTooltipEl.parentNode)
+        return chart.pieTooltipEl
+    const el = document.createElement('div')
+    Object.assign(el.style, {
+        position: 'absolute', pointerEvents: 'none', zIndex: 20, display: 'none',
+        background: 'rgba(247,247,247,0.92)', border: '1px solid var(--color-border-shadow)',
+        borderRadius: '3px', padding: '5px 8px', font: '12px Roboto Condensed,sans-serif',
+        color: '#15171a', whiteSpace: 'nowrap', boxShadow: '0 1px 6px rgba(0,0,0,0.3)'
+    })
+    chart.container.appendChild(el)
+    chart.pieTooltipEl = el
+    return el
+}
+
+function showPieTip(tip, chart, e, point, color, pct, isVariable) {
+    const seriesName = chart.series[0].name || ''
+    let html = `<div style="opacity:.7;margin-bottom:2px">${point.name || ''}</div>`
+    html += `<div><span style="color:${color}">●</span> ${seriesName}</div>`
+    html += `<div>Value: <b>${addThousandsSep(point.y)}</b> (${pct.toFixed(1)}%)</div>`
+    if (isVariable && isNumber(point.z))
+        html += `<div>Size: <b>${addThousandsSep(point.z)}</b></div>`
+    tip.innerHTML = html
+    tip.style.display = 'block'
+    const rect = chart.renderer.root.element.getBoundingClientRect()
+    const bx = tip.getBoundingClientRect()
+    let left = e.clientX - rect.left + 12
+    if (left + bx.width > rect.width)
+        left = e.clientX - rect.left - bx.width - 12
+    const top = Math.max(2, e.clientY - rect.top - bx.height - 6)
+    tip.style.left = left + 'px'
+    tip.style.top = top + 'px'
+}
+
+//estimated vertical space the bottom legend needs (so the pie shrinks to make room)
+function pieLegendHeight(points, chartWidth) {
+    const availW = chartWidth - 20
+    let rows = 1, curW = 0
+    for (const p of points) {
+        const w = 10 + 6 + Math.ceil(String(p.name || '').length * 12 * 0.5)
+        const add = (curW ? 16 : 0) + w
+        if (curW && curW + add > availW) {
+            rows++
+            curW = w
+        } else {
+            curW += add
+        }
+    }
+    return 12 + rows * LEGEND_LINE
+}
+
+//per-point legend (color circle + name) under the pie — wrapped, left-aligned within a centred block
+function renderPieLegend(chart, renderer, points, colorFor) {
+    const w = chart.chartWidth
+    const symbolW = 10, gap = 6, itemGap = 16
+    const group = renderer.group('ix-pie-legend').add(renderer.root)
+    const built = points.map((p, i) => {
+        const itemGroup = renderer.group('ix-legend-item').add(group)
+        renderer.circle(symbolW / 2, -4, 4, {}).css({fill: colorFor(i)}).add(itemGroup)
+        const label = renderer.label(p.name || '', symbolW + gap, 0, {'text-anchor': 'start'}).css(TEXT_STYLE).add(itemGroup)
+        let tw
+        try {
+            tw = label.getBBox().width
+        } catch (e) {
+            tw = Math.ceil(String(p.name || '').length * 12 * 0.5)
+        }
+        return {itemGroup, w: symbolW + gap + tw}
+    })
+    //wrap into rows that fit the chart width
+    const availW = w - 20
+    const rows = []
+    let cur = [], curW = 0
+    for (const b of built) {
+        const add = (cur.length ? itemGap : 0) + b.w
+        if (cur.length && curW + add > availW) {
+            rows.push({items: cur, w: curW})
+            cur = []
+            curW = 0
+        }
+        curW += (cur.length ? itemGap : 0) + b.w
+        cur.push(b)
+    }
+    if (cur.length)
+        rows.push({items: cur, w: curW})
+    //left-align rows to a common left edge, block centred, stacked upward from the bottom
+    const maxRowW = rows.reduce((m, r) => Math.max(m, r.w), 0)
+    const blockLeft = Math.max(10, (w - maxRowW) / 2)
+    const bottomBaseline = chart.chartHeight - 8
+    rows.forEach((row, ri) => {
+        const baseline = bottomBaseline - (rows.length - 1 - ri) * LEGEND_LINE
+        let x = blockLeft
+        for (const b of row.items) {
+            b.itemGroup.attr('transform', `translate(${x}, ${baseline})`)
+            x += b.w + itemGap
+        }
+    })
+}
+
+/**
+ * Render a pie/variable-pie chart.
+ * @param {import('../core/chart').Chart} chart
+ */
+export function renderPie(chart) {
+    const renderer = chart.renderer
+    const series = chart.series[0]
+    if (!series || !series.points.length)
+        return
+    const w = chart.chartWidth
+    const h = chart.chartHeight
+    const opts = series.options
+    const isVariable = series.type === 'variablepie'
+    //slice labels off by default → use the bottom legend instead; both are config-toggleable
+    const dataLabelsEnabled = !!(opts.dataLabels && opts.dataLabels.enabled)
+    //legend off by default for pie/variable-pie — opt in with series.showInLegend: true
+    const legendEnabled = opts.showInLegend === true
+
+    const points = series.points.filter(p => isNumber(p.y) && p.y > 0)
+    const total = points.reduce((sum, p) => sum + p.y, 0) || 1
+    const colors = chart.options.colors || []
+    const colorFor = i => colors[i % colors.length] || '#08B5E5'
+
+    const legendH = legendEnabled ? pieLegendHeight(points, w) : 0
+    const cx = w / 2
+    const cy = (h - legendH) / 2
+    const labelPad = dataLabelsEnabled ? 34 : 10 //room for outside labels only when shown
+    const maxRadius = Math.min(w, h - legendH) / 2 - labelPad
+    const innerSize = relativeLength(pick(opts.innerSize, 0), maxRadius * 2) / 2
+
+    //z-range for variable radius
+    let zMin = pick(opts.zMin, Infinity)
+    let zMax = pick(opts.zMax, -Infinity)
+    if (isVariable) {
+        for (const p of points) {
+            if (isNumber(p.z)) {
+                if (p.z < zMin) zMin = p.z
+                if (p.z > zMax) zMax = p.z
+            }
+        }
+        if (!isNumber(zMin)) zMin = 0
+        if (!isNumber(zMax) || zMax === zMin) zMax = zMin + 1
+    }
+    const minPointSize = relativeLength(pick(opts.minPointSize, 10), maxRadius * 2) / 2
+
+    const tip = ensurePieTooltip(chart)
+    const group = renderer.group('ix-pie').add(renderer.root)
+    const labelGroup = renderer.group('ix-pie-labels').add(renderer.root)
+
+    //overlay (drawn on top) holds the hover highlight: a solid same-colour band only OUTSIDE the
+    //segment (a wide stroke whose inner half is covered by a redrawn copy of the slice).
+    const SHADOW_W = 10
+    const slicePaths = []
+    const sliceDefs = []
+    const sweepSlices = [] //geometry for the angular entrance sweep
+    const overlay = renderer.group('ix-pie-hover').add(renderer.root)
+    let hoverEls = []
+    const clearHover = () => {
+        hoverEls.forEach(el => el.destroy())
+        hoverEls = []
+    }
+    let angle = -Math.PI / 2
+    points.forEach((p, i) => {
+        const slice = (p.y / total) * Math.PI * 2
+        const a0 = angle
+        const a1 = angle + slice
+        let rOuter = maxRadius
+        if (isVariable) {
+            const zFrac = (pick(p.z, zMin) - zMin) / (zMax - zMin || 1)
+            rOuter = innerSize + minPointSize + (maxRadius - innerSize - minPointSize) * zFrac
+        }
+        const color = colorFor(i)
+        const pct = p.y / total * 100
+        const d = sectorPath(cx, cy, innerSize, rOuter, a0, a1)
+        const arc = outerArcPath(cx, cy, rOuter, a0, a1)
+        sliceDefs.push({d, arc, color})
+        const path = renderer.path(d, {'stroke-width': 1.5})
+            .css({fill: color, stroke: '#fff', cursor: 'pointer', opacity: 1})
+            .add(group)
+        slicePaths.push(path)
+        sweepSlices.push({el: path, a0, a1, rOuter})
+        //hover: dim the others, draw a solid outer band + white outline over this slice
+        path.on('mouseover', () => {
+            slicePaths.forEach((sp, j) => sp.css({opacity: j === i ? 1 : 0.35}))
+            clearHover()
+            //wide solid band along the OUTER edge only, centred on the arc → outer half stays visible,
+            //inner half is overdrawn by the redrawn slice (so the band hugs only the outside curve)
+            const band = renderer.path(arc, {'stroke-width': SHADOW_W * 2, fill: 'none'})
+                .css({stroke: color, 'stroke-opacity': 0.5, 'stroke-linecap': 'butt', 'pointer-events': 'none'}).add(overlay)
+            //redraw the slice on top so the band shows only outside, plus the white outline
+            const top = renderer.path(d, {'stroke-width': 1.5})
+                .css({fill: color, stroke: '#fff', 'pointer-events': 'none'}).add(overlay)
+            hoverEls.push(band, top)
+        })
+        path.on('mousemove', e => showPieTip(tip, chart, e, p, color, pct, isVariable))
+        path.on('mouseout', () => {
+            slicePaths.forEach(sp => sp.css({opacity: 1}))
+            clearHover()
+            tip.style.display = 'none'
+        })
+        //optional data label (name) outside the slice
+        if (dataLabelsEnabled) {
+            const mid = (a0 + a1) / 2
+            const lx = cx + (maxRadius + 10) * Math.cos(mid)
+            const ly = cy + (maxRadius + 10) * Math.sin(mid)
+            const anchor = Math.cos(mid) < -0.2 ? 'end' : (Math.cos(mid) > 0.2 ? 'start' : 'middle')
+            renderer.label(p.name || '', lx, ly + 4, {'text-anchor': anchor}).css(TEXT_STYLE).add(labelGroup)
+        }
+        angle = a1
+    })
+
+    if (legendEnabled)
+        renderPieLegend(chart, renderer, points, colorFor)
+
+    //entrance: every sector grows its angular width at the same time, each from its own start edge,
+    //all reaching full width together to close the circle (no rotation, full radius throughout)
+    if (chart.animateThisRender && sweepSlices.length) {
+        const fullDraw = s => sectorPath(cx, cy, innerSize, s.rOuter, s.a0, s.a1)
+        animate(DEFAULT_DURATION, k => {
+            for (const s of sweepSlices) {
+                const end = s.a0 + k * (s.a1 - s.a0)
+                s.el.attr('d', end > s.a0 ? sectorPath(cx, cy, innerSize, s.rOuter, s.a0, end) : '')
+            }
+        }, () => {
+            for (const s of sweepSlices)
+                s.el.attr('d', fullDraw(s))
+        })
+    }
+}

package/charts/polar/polar-chart.js

@@ -0,0 +1,99 @@
+//Polar/radar rendering path (asset rating chart): categories around a circle, radial value axis,
+//polygon gridlines (gridLineInterpolation: 'polygon').
+import {pick, relativeLength} from '../core/utilities'
+import {animateFromCenter} from '../core/animate'
+
+const TEXT_STYLE = {
+    fontSize: '12px',
+    fontFamily: 'Roboto Condensed,sans-serif',
+    fill: 'var(--color-text)',
+    color: 'var(--color-text)'
+}
+const GRID_COLOR = 'var(--color-border-shadow)'
+
+/**
+ * Render a chart in polar coordinates.
+ * @param {import('../core/chart').Chart} chart
+ */
+export function renderPolar(chart) {
+    const renderer = chart.renderer
+    const w = chart.chartWidth
+    const h = chart.chartHeight
+    const pane = chart.options.pane || {}
+    const radius = relativeLength(pane.size || '85%', Math.min(w, h)) / 2
+    const cx = w / 2
+    const cy = h / 2
+    const xAxis = chart.xAxis[0]
+    const yAxis = chart.yAxis[0]
+    const cats = xAxis.categories || []
+    const series0 = chart.series[0]
+    const n = cats.length || (series0 ? series0.points.length : 0)
+    if (!n)
+        return
+
+    const yMin = pick(yAxis.options.min, 0)
+    let yMax = pick(yAxis.options.max, undefined)
+    if (yMax === undefined) {
+        yMax = 1
+        for (const s of chart.series)
+            for (const p of s.points)
+                if (p.y > yMax) yMax = p.y
+    }
+
+    const angleFor = i => -Math.PI / 2 + (i / n) * Math.PI * 2
+    const pointAt = (i, value) => {
+        const r = ((value - yMin) / ((yMax - yMin) || 1)) * radius
+        const a = angleFor(i)
+        return [cx + r * Math.cos(a), cy + r * Math.sin(a)]
+    }
+
+    const gridGroup = renderer.group('ix-polar-grid').add(renderer.root)
+    const axisGroup = renderer.group('ix-polar-axis').add(renderer.root)
+    const seriesGroup = renderer.group('ix-polar-series').add(renderer.root)
+
+    //polygon rings (gridlines only — no per-ring value labels)
+    const rings = 5
+    for (let k = 1; k <= rings; k++) {
+        const v = yMin + (yMax - yMin) * k / rings
+        let d = ''
+        for (let i = 0; i < n; i++) {
+            const [x, y] = pointAt(i, v)
+            d += (i === 0 ? 'M' : 'L') + x.toFixed(2) + ' ' + y.toFixed(2) + ' '
+        }
+        renderer.path(d + 'Z', {'stroke-width': 1, fill: 'none'}).css({stroke: GRID_COLOR}).add(gridGroup)
+    }
+    //single "0" label at the centre (only the origin value is shown)
+    renderer.label('0', cx + 4, cy + 4, {'text-anchor': 'start'}).css(TEXT_STYLE).add(axisGroup)
+
+    //spokes + category labels
+    for (let i = 0; i < n; i++) {
+        const [ex, ey] = pointAt(i, yMax)
+        renderer.line(cx, cy, ex, ey, {'stroke-width': 1}).css({stroke: GRID_COLOR}).add(gridGroup)
+        const [lx, ly] = pointAt(i, yMax * 1.13)
+        const anchor = Math.abs(lx - cx) < 6 ? 'middle' : (lx > cx ? 'start' : 'end')
+        renderer.label(cats[i] || '', lx, ly + 4, {'text-anchor': anchor}).css(TEXT_STYLE).add(axisGroup)
+    }
+
+    //series — closed radar polygons
+    for (const s of chart.series) {
+        const color = s.getColor()
+        const filled = /area/.test(s.type)
+        let d = ''
+        const verts = []
+        s.points.forEach((p, i) => {
+            const [x, y] = pointAt(i, p.y)
+            verts.push([x, y])
+            d += (i === 0 ? 'M' : 'L') + x.toFixed(2) + ' ' + y.toFixed(2) + ' '
+        })
+        renderer.path(d + 'Z', {'stroke-width': 2, fill: filled ? color : 'none'})
+            .css({stroke: color, 'fill-opacity': filled ? 0.25 : 0})
+            .add(seriesGroup)
+        //vertex markers
+        for (const [x, y] of verts)
+            renderer.circle(x, y, 3, {}).css({fill: color}).add(seriesGroup)
+    }
+
+    //entrance: the data polygons grow out from the centre to their actual positions
+    if (chart.animateThisRender)
+        animateFromCenter(seriesGroup, cx, cy)
+}

package/charts/series/area-series.js

@@ -0,0 +1,57 @@
+import {pick, uniqueId, isNumber, clamp} from '../core/utilities'
+import {revealLeftToRight} from '../core/animate'
+import {LineSeries} from './line-series'
+
+export class AreaSeries extends LineSeries {
+    resolveFill() {
+        const seriesFill = this.options.fillColor
+        const areaDefaults = (this.chart.options.plotOptions.area) || {}
+        const fc = seriesFill !== undefined ? seriesFill : areaDefaults.fillColor
+        //fillColor: null -> tint of the series color (used by stacked-percent distribution)
+        if (fc === null || fc === undefined)
+            return {fill: this.getColor(), opacity: 0.5}
+        //gradient object {linearGradient:{x1,y1,x2,y2}, stops:[[off,col],...]}
+        if (typeof fc === 'object' && fc.stops) {
+            const v = fc.linearGradient || {x1: 0, y1: 0, x2: 0, y2: 1}
+            const ref = this.chart.renderer.linearGradient(v, fc.stops, uniqueId('grad'))
+            return {fill: ref, opacity: 1}
+        }
+        return {fill: fc, opacity: 1}
+    }
+
+    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)
+
+        //area fill — line path closed down to the axis baseline
+        const lineD = this.linePath()
+        const step = this.resolveOption('step')
+        if (lineD && this.segments.length) {
+            const tVal = isNumber(this.threshold) ? this.threshold : this.yAxis.min
+            const baselineY = this.yAxis.toPixels(clamp(tVal, this.yAxis.min, this.yAxis.max))
+            let areaD = ''
+            for (const seg of this.segments) {
+                const first = seg[0]
+                const last = seg[seg.length - 1]
+                areaD += `M ${first.plotX} ${baselineY} `
+                seg.forEach((pt, i) => {
+                    if (step === 'left' && i > 0) {
+                        areaD += `L ${pt.plotX} ${seg[i - 1].plotY} `
+                    } else if (step === 'right' && i > 0) {
+                        areaD += `L ${seg[i - 1].plotX} ${pt.plotY} `
+                    }
+                    areaD += `L ${pt.plotX} ${pt.plotY} `
+                })
+                areaD += `L ${last.plotX} ${baselineY} Z `
+            }
+            const {fill, opacity} = this.resolveFill()
+            renderer.path(areaD.trim(), {'stroke-width': 0}).css({fill, 'fill-opacity': opacity}).add(group)
+            //line on top
+            renderer.path(lineD, {'stroke-width': lineWidth, fill: 'none', 'stroke-linejoin': 'round'}).css({stroke: color}).add(group)
+            if (this.chart.animateThisRender)
+                revealLeftToRight(this.chart, group)
+        }
+    }
+}

package/charts/series/candlestick-series.js

@@ -0,0 +1,60 @@
+import {isNumber, pick} from '../core/utilities'
+import {Series} from './series'
+
+export class CandlestickSeries extends Series {
+    //candlesticks plot OHLC, not a single y; expose extremes from high/low for the axis
+    yExtremes(point) {
+        return [point.low, point.high]
+    }
+
+    render(group) {
+        this.group = group
+        const renderer = this.chart.renderer
+        const xAxis = this.xAxis
+        const yAxis = this.yAxis
+        const theme = this.chart.options.plotOptions.candlestick || {}
+        const upColor = pick(theme.upColor, 'var(--color-price-up)')
+        const downColor = pick(theme.color, 'var(--color-price-down)')
+        const lineColor = pick(theme.lineColor, 'var(--color-dimmed)')
+        const lineWidth = pick(theme.lineWidth, 0.6)
+
+        //local point range — smallest gap between adjacent DRAWN candles. Ignore points without a close
+        //(e.g. the trailing [now, null…] marker the price view appends to extend the axis), which would
+        //otherwise be a sub-day gap that shrinks the slot and renders thin candles with wide spacing.
+        let pr = Infinity
+        let prevX = null
+        for (const pt of this.plotPoints) {
+            if (!isNumber(pt.close))
+                continue
+            if (prevX !== null) {
+                const d = pt.x - prevX
+                if (d > 0 && d < pr) pr = d
+            }
+            prevX = pt.x
+        }
+        if (pr === Infinity)
+            pr = (xAxis.max - xAxis.min) / 100
+
+        for (const p of this.plotPoints) {
+            if (!isNumber(p.close))
+                continue
+            const cx = xAxis.toPixels(p.x)
+            const catW = Math.abs(xAxis.toPixels(p.x + pr) - xAxis.toPixels(p.x))
+            const w = Math.max(1, catW * 0.6)
+            const up = p.close >= p.open
+            const color = up ? upColor : downColor
+            const yHigh = yAxis.toPixels(p.high)
+            const yLow = yAxis.toPixels(p.low)
+            const yOpen = yAxis.toPixels(p.open)
+            const yClose = yAxis.toPixels(p.close)
+            //wick
+            renderer.line(cx, yHigh, cx, yLow, {'stroke-width': 1}).css({stroke: lineColor}).add(group)
+            //body
+            const top = Math.min(yOpen, yClose)
+            const h = Math.max(1, Math.abs(yClose - yOpen))
+            renderer.rect(cx - w / 2, top, w, h, {'stroke-width': lineWidth})
+                .css({fill: color, stroke: lineColor})
+                .add(group)
+        }
+    }
+}