@stellar-expert/ui-framework 1.19.2 → 1.20.0

package/charts/core/svg-renderer.js

@@ -0,0 +1,155 @@
+//Low-level SVG drawing layer — the single place that touches the DOM.
+//Everything above this works in abstract element wrappers.
+
+const SVG_NS = 'http://www.w3.org/2000/svg'
+
+export class SvgElement {
+    constructor(nodeName) {
+        this.element = document.createElementNS(SVG_NS, nodeName)
+    }
+
+    attr(key, value) {
+        if (typeof key === 'object') {
+            for (const k of Object.keys(key))
+                this.attr(k, key[k])
+            return this
+        }
+        if (value === undefined || value === null)
+            return this
+        //colors and fonts go through the style channel so CSS custom properties (var(--x)) resolve
+        if ((key === 'fill' || key === 'stroke') && /var\(|inherit|currentColor/.test(String(value))) {
+            this.element.style[key] = value
+        } else {
+            this.element.setAttribute(key, value)
+        }
+        return this
+    }
+
+    css(styles) {
+        Object.assign(this.element.style, styles)
+        return this
+    }
+
+    addClass(name) {
+        this.element.setAttribute('class', ((this.element.getAttribute('class') || '') + ' ' + name).trim())
+        return this
+    }
+
+    text(content) {
+        this.element.textContent = content
+        return this
+    }
+
+    html(content) {
+        this.element.innerHTML = content
+        return this
+    }
+
+    on(event, handler) {
+        this.element.addEventListener(event, handler)
+        return this
+    }
+
+    add(parent) {
+        (parent ? parent.element : null)?.appendChild(this.element)
+        return this
+    }
+
+    getBBox() {
+        try {
+            return this.element.getBBox()
+        } catch (e) {
+            return {x: 0, y: 0, width: 0, height: 0}
+        }
+    }
+
+    destroy() {
+        if (this.element.parentNode)
+            this.element.parentNode.removeChild(this.element)
+        this.element = null
+    }
+}
+
+export class SvgRenderer {
+    constructor(container, width, height) {
+        this.container = container
+        this.root = new SvgElement('svg')
+        this.root.attr({version: '1.1', class: 'ix-chart-root'})
+        this.root.css({display: 'block', overflow: 'visible'})
+        this.setSize(width, height)
+        container.appendChild(this.root.element)
+        this.defs = this.element('defs').add(this.root)
+    }
+
+    setSize(width, height) {
+        this.width = width
+        this.height = height
+        this.root.attr({width, height, viewBox: `0 0 ${width} ${height}`})
+    }
+
+    element(nodeName) {
+        return new SvgElement(nodeName)
+    }
+
+    group(className) {
+        const g = this.element('g')
+        if (className)
+            g.attr('class', className)
+        return g
+    }
+
+    path(d, attrs) {
+        const p = this.element('path').attr('d', Array.isArray(d) ? d.join(' ') : d)
+        p.attr({fill: 'none', ...attrs})
+        return p
+    }
+
+    rect(x, y, width, height, attrs) {
+        return this.element('rect').attr({x, y, width: Math.max(0, width), height: Math.max(0, height), ...attrs})
+    }
+
+    line(x1, y1, x2, y2, attrs) {
+        return this.element('line').attr({x1, y1, x2, y2, ...attrs})
+    }
+
+    circle(cx, cy, r, attrs) {
+        return this.element('circle').attr({cx, cy, r, ...attrs})
+    }
+
+    label(content, x, y, attrs) {
+        const t = this.element('text').attr({x, y, ...attrs})
+        t.text(content)
+        return t
+    }
+
+    /**
+     * Create a linear gradient in <defs> and return a `url(#id)` reference.
+     * @param {{x1,y1,x2,y2}} vector - direction in object bounding box units (0..1)
+     * @param {[number, string][]} stops - [offset, color] pairs
+     * @param {string} id
+     */
+    linearGradient(vector, stops, id) {
+        const grad = this.element('linearGradient').attr({
+            id,
+            x1: vector.x1, y1: vector.y1, x2: vector.x2, y2: vector.y2
+        })
+        for (const [offset, col] of stops) {
+            this.element('stop').attr({offset, 'stop-color': col}).add(grad)
+        }
+        grad.add(this.defs)
+        return `url(#${id})`
+    }
+
+    clipRect(x, y, width, height, id) {
+        const clip = this.element('clipPath').attr('id', id)
+        this.rect(x, y, width, height).add(clip)
+        clip.add(this.defs)
+        return `url(#${id})`
+    }
+
+    destroy() {
+        if (this.root && this.root.element && this.root.element.parentNode)
+            this.root.element.parentNode.removeChild(this.root.element)
+        this.root = null
+    }
+}

package/charts/core/time.js

@@ -0,0 +1,129 @@
+//UTC date math, datetime tick generation and label formatting.
+//The explorer theme uses time.useUTC = true, so everything here is UTC-based.
+
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+const MONTHS_FULL = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+
+const sec = 1000
+const min = 60 * sec
+const hour = 60 * min
+const day = 24 * hour
+const week = 7 * day
+
+function pad(n, len = 2) {
+    return String(n).padStart(len, '0')
+}
+
+/**
+ * Minimal time-style formatter (UTC) covering the tokens the explorer uses.
+ */
+export function dateFormat(format, timestamp) {
+    const d = new Date(timestamp)
+    const replacements = {
+        Y: d.getUTCFullYear(),
+        y: pad(d.getUTCFullYear() % 100),
+        m: pad(d.getUTCMonth() + 1),
+        b: MONTHS[d.getUTCMonth()],
+        B: MONTHS_FULL[d.getUTCMonth()],
+        d: pad(d.getUTCDate()),
+        e: d.getUTCDate(),
+        H: pad(d.getUTCHours()),
+        M: pad(d.getUTCMinutes()),
+        S: pad(d.getUTCSeconds())
+    }
+    return format.replace(/%([A-Za-z])/g, (m, t) => (replacements[t] !== undefined ? replacements[t] : m))
+}
+
+//candidate time units with their length in ms and allowed multiples
+const UNITS = [
+    {name: 'millisecond', ms: 1, multiples: [1, 2, 5, 10, 20, 50, 100, 200, 500]},
+    {name: 'second', ms: sec, multiples: [1, 2, 5, 10, 15, 30]},
+    {name: 'minute', ms: min, multiples: [1, 2, 5, 10, 15, 30]},
+    {name: 'hour', ms: hour, multiples: [1, 2, 3, 4, 6, 8, 12]},
+    {name: 'day', ms: day, multiples: [1, 2]},
+    {name: 'week', ms: week, multiples: [1, 2]},
+    {name: 'month', ms: 30 * day, multiples: [1, 2, 3, 4, 6]},
+    {name: 'year', ms: 365 * day, multiples: [1, 2, 5, 10, 25, 50, 100]}
+]
+
+/**
+ * Choose an appropriate datetime tick unit and produce calendar-aligned UTC tick positions.
+ * @param {number} minTs
+ * @param {number} maxTs
+ * @param {number} targetCount - desired number of ticks
+ * @return {{positions: number[], unitName: string, count: number}}
+ */
+export function getDateTimeTickPositions(minTs, maxTs, targetCount) {
+    const range = maxTs - minTs
+    const approx = range / Math.max(1, targetCount)
+    //pick unit + multiple whose interval is closest to (>=) approx
+    let chosen = UNITS[UNITS.length - 1]
+    let chosenCount = chosen.multiples[chosen.multiples.length - 1]
+    outer: for (const unit of UNITS) {
+        for (const mult of unit.multiples) {
+            if (unit.ms * mult >= approx) {
+                chosen = unit
+                chosenCount = mult
+                break outer
+            }
+        }
+    }
+
+    const positions = []
+    const unitName = chosen.name
+
+    if (unitName === 'year') {
+        const startYear = new Date(minTs).getUTCFullYear()
+        const endYear = new Date(maxTs).getUTCFullYear()
+        const step = chosenCount
+        let y = Math.floor(startYear / step) * step
+        for (; y <= endYear + step; y += step) {
+            positions.push(Date.UTC(y, 0, 1))
+        }
+    } else if (unitName === 'month') {
+        const start = new Date(minTs)
+        let y = start.getUTCFullYear()
+        let m = Math.floor(start.getUTCMonth() / chosenCount) * chosenCount
+        let ts = Date.UTC(y, m, 1)
+        while (ts <= maxTs + chosen.ms * chosenCount) {
+            positions.push(ts)
+            m += chosenCount
+            ts = Date.UTC(y, m, 1)
+        }
+    } else {
+        const interval = chosen.ms * chosenCount
+        //align to the unit boundary (start of day for day/week, etc.)
+        let start = Math.floor(minTs / interval) * interval
+        if (unitName === 'week') {
+            //align to Monday
+            const d = new Date(start)
+            const dow = (d.getUTCDay() + 6) % 7
+            start -= dow * day
+        }
+        for (let ts = start; ts <= maxTs + interval; ts += interval) {
+            positions.push(ts)
+        }
+    }
+
+    return {positions, unitName, count: chosenCount}
+}
+
+//default label format per unit
+export function dateTimeLabelFormat(unitName) {
+    switch (unitName) {
+        case 'year':
+            return '%Y'
+        case 'month':
+            return "%b '%y"
+        case 'week':
+        case 'day':
+            return '%e %b'
+        case 'hour':
+        case 'minute':
+            return '%H:%M'
+        case 'second':
+            return '%H:%M:%S'
+        default:
+            return '%H:%M:%S'
+    }
+}

package/charts/core/utilities.js

@@ -0,0 +1,92 @@
+//Small shared helpers. Zero-dependency.
+
+export function isObject(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value)
+}
+
+export function isNumber(value) {
+    return typeof value === 'number' && !isNaN(value)
+}
+
+export function defined(value) {
+    return value !== undefined && value !== null
+}
+
+export function pick(...args) {
+    for (const arg of args)
+        if (defined(arg))
+            return arg
+    return undefined
+}
+
+/**
+ * Deep merge: plain objects are merged recursively,
+ * everything else (arrays, class instances, primitives) is copied by assignment (replaced).
+ * Pass `true` as the first argument to merge into a fresh object (deep clone of sources).
+ * @param {...*} sources
+ * @return {{}}
+ */
+export function merge(...sources) {
+    let i = 0
+    if (sources[0] === true) {
+        i = 1
+    }
+    const result = {}
+    function doMerge(target, source) {
+        if (!isObject(source))
+            return target
+        for (const key of Object.keys(source)) {
+            const val = source[key]
+            if (isObject(val)) {
+                target[key] = doMerge(isObject(target[key]) ? target[key] : {}, val)
+            } else {
+                target[key] = Array.isArray(val) ? val.slice() : val
+            }
+        }
+        return target
+    }
+    for (; i < sources.length; i++) {
+        doMerge(result, sources[i])
+    }
+    return result
+}
+
+/**
+ * Clamp a number into the [min, max] range.
+ */
+export function clamp(value, min, max) {
+    return value < min ? min : (value > max ? max : value)
+}
+
+/**
+ * Resolve a percentage/absolute value against a total ('80%' -> 0.8*total, 40 -> 40).
+ */
+export function relativeLength(value, total, offset = 0) {
+    if (typeof value === 'string' && value.endsWith('%'))
+        return parseFloat(value) / 100 * total + offset
+    return (parseFloat(value) || 0) + offset
+}
+
+/**
+ * Insert thousands separators into the integer part of a number/string ('1234.5' -> '1,234.5').
+ */
+export function addThousandsSep(value) {
+    const parts = String(value).split('.')
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    return parts.join('.')
+}
+
+let idCounter = 0
+
+export function uniqueId(prefix = 'svg') {
+    return prefix + (++idCounter)
+}
+
+/**
+ * Resolve a DOM element from an id string or an element reference.
+ */
+export function resolveContainer(renderTo) {
+    if (typeof renderTo === 'string')
+        return document.getElementById(renderTo)
+    return renderTo
+}

package/charts/globals.js

@@ -0,0 +1,32 @@
+//The engine namespace exposed to consumers and to the theme/options-builder — the small public
+//surface (chart constructors, options, Color, Axis, merge) that views and modules touch.
+import {Chart} from './core/chart'
+import {getOptions, setOptions} from './core/options'
+import {Color} from './core/color'
+import {Axis} from './axis/axis'
+import {merge} from './core/utilities'
+
+function ChartCtor(renderTo, options) {
+    return new Chart(renderTo, options, 'Chart')
+}
+
+function StockChartCtor(renderTo, options) {
+    return new Chart(renderTo, options, 'StockChart')
+}
+
+const ChartEngine = {
+    Chart: ChartCtor,
+    StockChart: StockChartCtor,
+    chart: (renderTo, options) => new Chart(renderTo, options, 'Chart'),
+    stockChart: (renderTo, options) => new Chart(renderTo, options, 'StockChart'),
+    setOptions,
+    getOptions,
+    Color: input => new Color(input),
+    Axis,
+    merge,
+    //module-extension hook — a module is a `module(engine)` function that augments this namespace
+    win: typeof window !== 'undefined' ? window : undefined
+}
+
+export {ChartEngine}
+export default ChartEngine

package/charts/index.js

@@ -0,0 +1,4 @@
+//Pure-JS SVG charting library — public entry point.
+//Props: options/type/title/grouped/range/noLegend/inline/modules/children.
+export {default} from './chart'
+export {ChartEngine, ChartLoader} from './chart'

package/charts/interaction/legend.js

@@ -0,0 +1,125 @@
+//Bottom-centered horizontal legend with click-to-toggle series visibility; wraps to multiple rows when narrow.
+const FONT = 12
+const LINE_HEIGHT = 16
+
+export class Legend {
+    constructor(chart) {
+        this.chart = chart
+    }
+
+    //estimated height reserved during layout — grows when the row wraps on narrow charts
+    getHeight() {
+        if (!this.chart.options.legend.enabled)
+            return 0
+        const items = this.chart.series.filter(s => s.name)
+        if (!items.length)
+            return 0
+        const symbolW = 12, gap = 8, itemGap = 20
+        //estimate available width (plotWidth not final on first layout → fall back to chartWidth)
+        const availW = (this.chart.plotWidth || (this.chart.chartWidth || 600) - 90)
+        const widths = items.map(s => symbolW + gap + Math.ceil(String(s.name).length * FONT * 0.5))
+        let rows = 1, curW = 0
+        for (const w of widths) {
+            const add = (curW ? itemGap : 0) + w
+            if (curW && curW + add > availW) {
+                rows++
+                curW = w
+            } else {
+                curW += add
+            }
+        }
+        return 24 + rows * LINE_HEIGHT
+    }
+
+    render(group) {
+        const chart = this.chart
+        if (!chart.options.legend.enabled)
+            return
+        const items = chart.series.filter(s => s.name).slice().sort((a, b) => a.zIndex - b.zIndex)
+        if (!items.length)
+            return
+        const renderer = chart.renderer
+        const symbolW = 12
+        const gap = 8
+        const itemGap = 20
+
+        //pass 1 — build each item (symbol + label) at local origin (baseline y=0) and measure the REAL
+        //text width via getBBox. A char-count estimate over-shoots for the condensed font.
+        const built = items.map(s => {
+            const color = s.getColor()
+            const itemGroup = renderer.group('ix-legend-item').add(group)
+            itemGroup.element.style.cursor = 'pointer'
+            renderer.circle(symbolW / 2, -FONT / 2 + 1, 5, {})
+                .css({fill: color, opacity: s.visible ? 1 : 0.35}).add(itemGroup)
+            const label = renderer.label(s.name, symbolW + gap, 0, {'text-anchor': 'start'})
+                .css({
+                    fontSize: FONT + 'px',
+                    fontFamily: 'Roboto Condensed,sans-serif',
+                    fill: 'var(--color-text)',
+                    color: 'var(--color-text)',
+                    'text-decoration': s.visible ? 'none' : 'line-through',
+                    opacity: s.visible ? 1 : 0.5
+                }).add(itemGroup)
+            let textW
+            try {
+                textW = label.getBBox().width
+            } catch (e) {
+                textW = Math.ceil(String(s.name).length * FONT * 0.5)
+            }
+            itemGroup.on('click', () => {
+                s.visible = !s.visible
+                chart.redraw()
+            })
+            //hover highlights this series (dims the others) and tints the hovered legend text —
+            //but only for visible series: hovering a hidden item must not dim/hide the visible ones
+            itemGroup.on('mouseover', () => {
+                if (!s.visible)
+                    return
+                label.css({fill: 'var(--color-primary)', color: 'var(--color-primary)'})
+                for (const other of chart.series)
+                    if (other.group)
+                        other.group.element.style.opacity = other === s ? '1' : '0.25'
+            })
+            itemGroup.on('mouseout', () => {
+                if (!s.visible)
+                    return
+                label.css({fill: 'var(--color-text)', color: 'var(--color-text)'})
+                for (const other of chart.series)
+                    if (other.group)
+                        other.group.element.style.opacity = '1'
+            })
+            return {itemGroup, w: symbolW + gap + textW}
+        })
+
+        //pass 2 — wrap items into rows that fit the plot width (flexible / responsive)
+        const availW = chart.plotWidth
+        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})
+
+        //pass 3 — rows are LEFT-aligned to a common left edge, and the whole block is
+        //centred under the plot by its widest row; rows stack upward from the bottom baseline
+        const bottomBaseline = chart.chartHeight - chart.spacing[2] - 6
+        const maxRowW = rows.reduce((m, r) => Math.max(m, r.w), 0)
+        const blockLeft = chart.plotLeft + Math.max(0, (chart.plotWidth - maxRowW) / 2)
+        rows.forEach((row, ri) => {
+            const baseline = bottomBaseline - (rows.length - 1 - ri) * LINE_HEIGHT
+            let x = blockLeft
+            for (const b of row.items) {
+                b.itemGroup.attr('transform', `translate(${x}, ${baseline})`)
+                x += b.w + itemGap
+            }
+        })
+    }
+}