@stellar-expert/ui-framework 1.19.1 → 1.20.0

package/charts/chart-default-options.js

@@ -0,0 +1,158 @@
+//StellarExpert explorer chart theme — colors, fonts and per-type defaults applied on top of the
+//engine baseline via setOptions, plus the custom logarithmic axis scaling used by balance/distribution charts.
+import ChartEngine from './globals'
+
+//allow negative values on the logarithmic axis
+ChartEngine.Axis.prototype.allowNegativeLog = true
+
+//override conversions (custom log scaling used by account-balance / distribution charts)
+ChartEngine.Axis.prototype.log2lin = function (num) {
+    let adjustedNum = Math.abs(num)
+    if (adjustedNum < 10) {
+        adjustedNum += (10 - adjustedNum) / 10
+    }
+    const result = Math.log(adjustedNum) / Math.LN10
+    return num < 0 ? -result : result
+}
+ChartEngine.Axis.prototype.lin2log = function (num) {
+    let result = Math.pow(10, Math.abs(num))
+    if (result < 10) {
+        result = (10 * (result - 1)) / (10 - 1)
+    }
+    return num < 0 ? -result : result
+}
+
+const defaultTextStyle = {
+    fontSize: '12px',
+    fontFamily: 'Roboto Condensed,sans-serif',
+    fontWeight: 400,
+    color: 'var(--color-text)'
+}
+
+const primaryColor = '#08B5E5'
+
+const theme = ChartEngine.theme = {
+    colors: ['hsl(193,93%,46%)', 'hsl(27,93%,66%)', 'hsl(130,60%,46%)', 'hsl(290,40%,46%)',
+        'hsl(180,93%,46%)', 'hsl(13,40%,46%)', 'hsl(115,40%,46%)', 'hsl(270,40%,66%)',
+        'hsl(155,60%,46%)', 'hsl(0,40%,66%)', 'hsl(100,43%,66%)', 'hsl(250,50%,66%)',
+        'hsl(143,40%,66%)', 'hsl(340,40%,46%)', 'hsl(212,40%,46%)', 'hsl(235,40%,46%)',
+        'hsl(135,60%,40%)', 'hsl(320,50%,66%)'
+    ],
+    title: {
+        text: '',
+        style: {...defaultTextStyle, fontSize: '17px'}
+    },
+    chart: {
+        backgroundColor: null,
+        zoomType: 'x',
+        spacing: [2, 2, 2, 2],
+        style: {
+            fontFamily: 'sans-serif'
+        }
+    },
+    scrollbar: {
+        enabled: false
+    },
+    tooltip: {
+        shared: true,
+        split: false,
+        borderWidth: 0,
+        headerFormat: '<span>{point.key}</span><br/>',
+        shadow: false
+    },
+    legend: {
+        itemStyle: defaultTextStyle,
+        itemHoverStyle: {color: 'var(--color-highlight)'},
+        itemDisabledStyle: {color: 'var(--color-dimmed)'}
+    },
+    navigator: {
+        enabled: false
+    },
+    credits: {
+        enabled: false
+    },
+    navigation: {
+        buttonOptions: {
+            symbolFill: 'var(--color-border-shadow)'
+        }
+    },
+    xAxis: {
+        type: 'datetime',
+        crosshair: true,
+        ordinal: false,
+        minPadding: 0,
+        maxPadding: 0,
+        gridLineWidth: 1,
+        lineColor: 'var(--color-border-shadow)',
+        gridLineColor: 'var(--color-border-shadow)',
+        minorGridLineColor: 'var(--color-border-shadow)',
+        minorTickColor: 'var(--color-border-shadow)',
+        tickColor: 'var(--color-border-shadow)',
+        title: {
+            style: defaultTextStyle,
+            margin: 4
+        },
+        labels: {
+            style: defaultTextStyle
+        }
+    },
+    yAxis: {
+        minorTickInterval: 'auto',
+        lineColor: 'var(--color-border-shadow)',
+        gridLineColor: 'var(--color-border-shadow)',
+        minorGridLineColor: 'var(--color-border-shadow)',
+        minorTickColor: 'var(--color-border-shadow)',
+        tickColor: 'var(--color-border-shadow)',
+        title: {
+            style: defaultTextStyle
+        },
+        labels: {
+            style: defaultTextStyle
+        }
+    },
+    plotOptions: {
+        candlestick: {
+            upColor: 'var(--color-price-up)',
+            color: 'var(--color-price-down)',
+            lineColor: 'var(--color-dimmed)',
+            lineWidth: 0.6
+        },
+        area: {
+            fillColor: {
+                linearGradient: {
+                    x1: 0,
+                    y1: 0,
+                    x2: 0,
+                    y2: 1
+                },
+                stops: [
+                    [0, ChartEngine.Color(primaryColor).setOpacity(0.8).get('rgba')],
+                    [1, ChartEngine.Color(primaryColor).setOpacity(0).get('rgba')]
+                ]
+            },
+            lineWidth: 2,
+            states: {
+                hover: {
+                    lineWidth: 2
+                }
+            }
+        },
+        series: {
+            pointPadding: 0.1,
+            groupPadding: 0.1
+        }
+    },
+    time: {
+        useUTC: true
+    },
+    background2: '#F0F0EA',
+    lang: {
+        decimalPoint: '.',
+        thousandsSep: ','
+    }
+}
+
+//apply the theme
+ChartEngine.setOptions(theme)
+
+export {ChartEngine}

package/charts/chart-loader.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import cn from 'classnames'
+
+const placeholderBars = [30, 60, 42, 40, 70, 62, 80, 83]
+
+export function ChartLoader({title, unavailable = false, container}) {
+    return <div className={cn('chart', container !== undefined ? container : 'segment blank')}>
+        {!!title && <>
+            <h3>{title}</h3>
+            <hr className="flare"/>
+        </>}
+        <div className="chart-placeholder">
+            {placeholderBars.map(v => <div key={v} style={{height: v + '%'}}/>)}
+        </div>
+        <div className="v-center-block">
+            {unavailable ?
+                <div className="text-center dimmed">
+                    <span className="icon icon-minus-circle"/> Data unavailable
+                </div> :
+                <div className="text-center">
+                    <div className="loader"/>
+                    <div className="text-small dimmed text-center" style={{marginTop: '-2em'}}>Loading chart data...</div>
+                </div>}
+        </div>
+    </div>
+}

package/charts/chart-options-builder.js

@@ -0,0 +1,81 @@
+//Normalizes per-chart options before they reach the engine: applies grouping/range/legend flags and
+//registers optional engine modules. Uses the engine's own merge (no deepmerge dependency).
+import {merge} from './core/utilities'
+import {ChartEngine} from './chart-default-options'
+
+const rangeSelectorOptions = {
+    //the in-house range selector renders span controls styled via chart.scss (.chart-zoom-btn);
+    //only the button definitions are consumed by the engine
+    buttons: [
+        {type: 'month', count: 1, text: '1m'},
+        {type: 'month', count: 3, text: '3m'},
+        {type: 'month', count: 6, text: '6m'},
+        {type: 'year', count: 1, text: '1y'},
+        {type: 'all', text: 'All'}
+    ]
+}
+
+const groupingUnits = [
+    ['day', [1, 3]],
+    ['week', [1, 2]],
+    ['month', [1, 2, 6]]
+]
+
+const groupedPlotOptions = {
+    series: {
+        dataGrouping: {
+            units: groupingUnits,
+            //17 (not 16) so the bucket interval clears the weekly/bi-weekly rounding boundary at the 1y
+            //view — keeps the 1y window on monthly buckets instead of tipping to weekly
+            groupPixelWidth: 17
+        }
+    }
+}
+
+const activeModules = new Set()
+
+function extendWithModules(modules) {
+    if (!modules)
+        return
+    for (const module of modules)
+        if (!activeModules.has(module)) {
+            module(ChartEngine)
+            activeModules.add(module)
+        }
+}
+
+export function prepareChartOptions(externalOptions, {modules, noLegend, grouped, range, inline}) {
+    extendWithModules(modules)
+    const extraOptions = {}
+    extraOptions.legend = {enabled: !noLegend}
+    //inline sparklines have no axis margins, so give both axes a little fractional padding: vertical keeps
+    //the line stroke off the top/bottom edges, horizontal insets the line so it isn't flush against the
+    //surrounding label/edges (deep-merged, so per-chart axis settings are preserved)
+    if (inline) {
+        extraOptions.xAxis = {minPadding: 0.1, maxPadding: 0.05}
+        extraOptions.yAxis = {minPadding: 0.12, maxPadding: 0.12}
+    }
+    if (grouped) {
+        extraOptions.plotOptions = groupedPlotOptions
+    }
+    if (range) {
+        extraOptions.rangeSelector = rangeSelectorOptions
+        if (typeof range === 'string') {
+            const now = new Date()
+            const period = new Date(now.valueOf())
+            switch (range) {
+                case 'year':
+                    period.setUTCFullYear(period.getUTCFullYear() - 1)
+                    extraOptions.xAxis = {range: now - period}
+                    break
+                case 'month':
+                    period.setUTCMonth(period.getUTCMonth() - 1)
+                    extraOptions.xAxis = {range: now - period}
+                    break
+                default:
+                    throw new TypeError('Invalid date range for a chart: ' + range)
+            }
+        }
+    }
+    return merge(externalOptions, extraOptions)
+}

package/charts/chart.js

@@ -0,0 +1,99 @@
+import React, {useRef} from 'react'
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+import {useDeepEffect} from '../state/state-hooks'
+import {withErrorBoundary} from '../errors/error-boundary'
+import {ChartEngine} from './chart-default-options'
+import {prepareChartOptions} from './chart-options-builder'
+import {ChartLoader} from './chart-loader'
+import './chart.scss'
+
+export {ChartEngine, ChartLoader}
+
+/**
+ * Pure-JS SVG charting component (zero external dependencies)
+ * @param {Object} props
+ * @param {{}} props.options - Chart data and options
+ * @param {'Chart'|'StockChart'} [props.type] - Chart type (`StockChart` adds navigator/range-selector support)
+ * @param {String|JSX.Element} [props.title] - Chart title rendered above the plot
+ * @param {Boolean} [props.inline] - Render the chart as inline-block (for sparkline charts)
+ * @param {Boolean} [props.grouped] - Apply data grouping (downsample dense series into time buckets)
+ * @param {true|false|'year'|'month'} [props.range] - Enable the range selector / initial visible window
+ * @param {Boolean} [props.noLegend] - Hide the legend section
+ * @param {String} [props.container] - Container CSS class (defaults to `segment blank`)
+ * @param {String} [props.className] - Additional CSS classes
+ * @param {{}} [props.style] - Additional inline styles
+ * @param {Function[]} [props.modules] - Additional engine modules to register (`module(engine)`)
+ * @param {*} [props.children] - Optional content added to the chart header
+ * @constructor
+ */
+export default function Chart({
+                                 options,
+                                 type = 'Chart',
+                                 title,
+                                 inline,
+                                 grouped,
+                                 range,
+                                 noLegend,
+                                 container = 'segment blank',
+                                 className,
+                                 style,
+                                 modules,
+                                 children
+                             }) {
+    const chart = useRef(null)
+    const chartIdRef = useRef(`ixchart${Math.floor(Math.random() * 0x10000000000000)}`)
+
+    //deep-compare deps so a re-render with a freshly-built (but equal) options object doesn't tear down
+    //and recreate the chart — only real option/type changes rebuild it
+    useDeepEffect(() => {
+        if (chart.current) {
+            chart.current.destroy()
+            chart.current = null
+        }
+        if (!options)
+            return
+        const mergedOptions = prepareChartOptions(options, {grouped, range, noLegend, modules, inline})
+        chart.current = new ChartEngine[type](chartIdRef.current, mergedOptions)
+        return () => {
+            if (chart.current) {
+                chart.current.destroy()
+                chart.current = null
+            }
+        }
+    }, [options, modules, type, inline, title])
+
+    if (!options)
+        return <ChartLoader title={title}/>
+
+    const containerStyle = {...style}
+    if (inline) {
+        containerStyle.display = 'inline-block'
+        return <div id={chartIdRef.current} style={containerStyle}/>
+    }
+    return <div className={cn('chart', container, className)} style={containerStyle}>
+        {!!title && <h3>{title}</h3>}
+        {children}
+        <hr className="flare"/>
+        <div className="v-center-block">
+            <div id={chartIdRef.current}/>
+        </div>
+    </div>
+}
+
+Chart.propTypes = {
+    options: PropTypes.object,
+    type: PropTypes.oneOf(['StockChart', 'Chart']),
+    title: PropTypes.any,
+    noLegend: PropTypes.bool,
+    grouped: PropTypes.bool,
+    range: PropTypes.oneOf([true, false, 'year', 'month']),
+    inline: PropTypes.bool,
+    container: PropTypes.string,
+    className: PropTypes.string,
+    style: PropTypes.object,
+    modules: PropTypes.arrayOf(PropTypes.func)
+}
+
+Chart.Loader = ChartLoader
+Chart.withErrorBoundary = withErrorBoundary

package/charts/chart.scss

@@ -0,0 +1,80 @@
+.chart {
+  position: relative;
+  z-index: 0;
+  min-height: 30em;
+
+  .v-center-block {
+    min-height: 26em;
+  }
+}
+
+//floating zoom/range selector — self-contained styling owned by the charts lib. Controls are spans
+//(not <button>/.button) so they never inherit the global project button look; only the overlay's
+//horizontal offset (dynamic plotLeft) is set inline in range-selector.js
+.chart-range-selector {
+  position: absolute;
+  top: 2px;
+  z-index: 5;
+  display: flex;
+  gap: 3px;
+  align-items: center;
+  font: 11px 'Roboto Condensed', sans-serif;
+
+  .zoom-label {
+    opacity: 0.6;
+    margin-right: 3px;
+  }
+
+  .chart-zoom-btn {
+    display: inline-block;
+    border-radius: 3px;
+    padding: 2px 8px;
+    font: 12px 'Roboto Condensed', sans-serif;
+    line-height: 1.4;
+    background: rgba(176, 185, 189, 0.1);
+    color: var(--color-text);
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      background: rgba(176, 185, 189, 0.25);
+    }
+
+    &.selected {
+      background: rgb(83, 87, 89);
+      font-weight: 700;
+    }
+
+    &.disabled {
+      color: var(--color-dimmed);
+      opacity: 0.5;
+      cursor: default;
+      background: rgba(176, 185, 189, 0.1);
+    }
+  }
+}
+
+@media (max-width: 420px) {
+  .chart-range-selector .chart-zoom-btn {
+    padding: 1px 6px;
+    font-size: 11px;
+  }
+}
+
+.chart-placeholder {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0.04;
+  display: flex;
+  align-items: flex-end;
+  padding: $space-standard;
+
+  & > * {
+    background: #000;
+    margin: $space-micro;
+    width: 100%;
+  }
+}

package/charts/core/animate.js

@@ -0,0 +1,99 @@
+//Load/draw animations for the initial chart render (a per-series-type entrance).
+//Only runs once, on first paint — redraws (zoom, legend toggle, resize) skip it.
+import {uniqueId} from './utilities'
+
+export const DEFAULT_DURATION = 1500
+
+//easeOutCubic — fast start, gentle settle
+function easeOut(t) {
+    return 1 - Math.pow(1 - t, 3)
+}
+
+const raf = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : (cb => setTimeout(() => cb(now()), 16))
+const now = () => (typeof performance !== 'undefined' && performance.now ? performance.now() : new Date().getTime())
+
+/**
+ * Drive a 0→1 eased progress value over `duration` ms.
+ * @param {number} duration
+ * @param {(progress: number) => void} onStep called each frame with eased progress in [0,1]
+ * @param {() => void} [onDone]
+ */
+export function animate(duration, onStep, onDone) {
+    const start = now()
+    onStep(0)
+    function frame() {
+        let t = (now() - start) / duration
+        if (t > 1) t = 1
+        onStep(easeOut(t))
+        if (t < 1)
+            raf(frame)
+        else if (onDone)
+            onDone()
+    }
+    raf(frame)
+}
+
+/**
+ * Fill columns from the chart baseline as a single rising level. For a stacked column the whole stack
+ * grows from 0: the lower segment reaches its final size first and stops, the upper one keeps rising.
+ * @param {{el: import('./svg-renderer').SvgElement, topY: number, botY: number, baselineY: number, colTopY: number}[]} bars
+ *   topY/botY = this segment's final top/bottom pixel; colTopY = the whole column's top pixel (stack total)
+ */
+export function animateColumns(bars, duration = DEFAULT_DURATION) {
+    if (!bars.length)
+        return
+    animate(duration, k => {
+        for (const b of bars) {
+            //the fill level rises from the baseline up to the full column top
+            const levelY = b.baselineY - (b.baselineY - b.colTopY) * k
+            //clamp it into this segment's own [topY, botY] band
+            const visibleTop = Math.min(b.botY, Math.max(b.topY, levelY))
+            b.el.attr({y: visibleTop, height: Math.max(0, b.botY - visibleTop)})
+        }
+    })
+}
+
+/**
+ * Reveal a series group left→right by growing a clip rectangle (used for line/area "drawing").
+ * @param {import('./chart').Chart} chart
+ * @param {import('./svg-renderer').SvgElement} group
+ */
+export function revealLeftToRight(chart, group, duration = DEFAULT_DURATION) {
+    const r = chart.renderer
+    const id = uniqueId('anim-clip')
+    const clip = r.element('clipPath').attr('id', id)
+    const rect = r.rect(chart.plotLeft, chart.plotTop - 4, 0, chart.plotHeight + 8)
+    rect.add(clip)
+    clip.add(r.defs)
+    group.attr('clip-path', `url(#${id})`)
+    animate(duration, k => rect.attr('width', chart.plotWidth * k))
+}
+
+/**
+ * Draw a line path on left→right by animating its stroke dash offset (used by the navigator overview).
+ * @param {import('./svg-renderer').SvgElement} pathEl
+ */
+export function animateLineDraw(pathEl, duration = DEFAULT_DURATION) {
+    let len
+    try {
+        len = pathEl.element.getTotalLength()
+    } catch (e) {
+        return
+    }
+    if (!len)
+        return
+    pathEl.attr({'stroke-dasharray': len, 'stroke-dashoffset': len})
+    animate(duration, k => pathEl.attr('stroke-dashoffset', len * (1 - k)),
+        () => pathEl.attr({'stroke-dasharray': 'none', 'stroke-dashoffset': 0}))
+}
+
+/**
+ * Grow a group out from a centre point (radar/polar entrance).
+ */
+export function animateFromCenter(group, cx, cy, duration = DEFAULT_DURATION) {
+    animate(duration, k => {
+        const s = Math.max(0.0001, k)
+        group.attr('transform', `translate(${cx * (1 - s)} ${cy * (1 - s)}) scale(${s})`)
+    }, () => group.attr('transform', ''))
+}
+