@stellar-expert/ui-framework 1.21.3 → 1.21.4

package/charts/axis/axis.js

@@ -161,9 +161,8 @@ export class Axis {
         if (isNumber(this.options.ceiling))
             max = Math.min(max, this.options.ceiling)
 
-        //tick density: x adapts to width (denser, ~one per 42px → more labels when there's room),
-        //y ~one gridline per 72px
-        const targetCount = this.horiz ? Math.max(2, Math.round(this.lenForTicks() / 42))
+        const xTickSpacing = this.type === 'datetime' ? 100 : 42
+        const targetCount = this.horiz ? Math.max(2, Math.round(this.lenForTicks() / xTickSpacing))
             : Math.max(3, Math.round(this.lenForTicks() / 72))
 
         if (this.isLog) {

package/charts/chart-options-builder.js

@@ -25,9 +25,9 @@ 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
+            //grouping is width-dependent: wider plots get proportionally finer buckets. 16.5px per
+            //bucket puts the 2-month↔6-month transition of a ~10y daily series at a ~540px plot area
+            groupPixelWidth: 16.5
         }
     }
 }

package/charts/chart.scss

@@ -61,6 +61,27 @@
   }
 }
 
+//floating "Reset zoom" control shown over the plot top-right corner after a drag-zoom selection
+//on charts without the range-selector row; positioned inline by zoom.js (top/right from plot box)
+.chart-reset-zoom {
+  position: absolute;
+  z-index: 5;
+  display: inline-block;
+  border: 1px solid var(--color-contrast-border);
+  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);
+  }
+}
+
 .chart-placeholder {
   position: absolute;
   width: 100%;

package/charts/core/chart.js

@@ -3,7 +3,8 @@ import {niceAlignedTicks} from '../axis/tick-positioner'
 import {createSeries} from '../series'
 import {Legend} from '../interaction/legend'
 import {Tooltip} from '../interaction/tooltip'
-import {groupSeriesData} from '../stock/data-grouping'
+import {ZoomSelection} from '../interaction/zoom'
+import {groupSeriesData, defaultGroupPixelWidth} from '../stock/data-grouping'
 import {RangeSelector} from '../stock/range-selector'
 import {renderPolar} from '../polar/polar-chart'
 import {renderPie} from '../pie/pie-chart'
@@ -24,6 +25,7 @@ export class Chart {
             return
         this.legend = new Legend(this)
         this.tooltip = new Tooltip(this)
+        this.zoomSelection = new ZoomSelection(this)
         this.init()
     }
 
@@ -297,16 +299,59 @@ export class Chart {
         const baseGrouping = this.chartType === 'StockChart' &&
             this.options.plotOptions && this.options.plotOptions.series && this.options.plotOptions.series.dataGrouping
         const xAxis = this.xAxis[0]
-        for (const s of this.series) {
+        const groupings = this.series.map(s => {
             const seriesGrouping = s.options.dataGrouping
-            if (baseGrouping || seriesGrouping) {
-                const grouping = merge(baseGrouping || {}, seriesGrouping || {})
+            if (!baseGrouping && !seriesGrouping)
+                return null
+            const grouping = merge(baseGrouping || {}, seriesGrouping || {})
+            if (!isNumber(grouping.groupPixelWidth))
+                grouping.groupPixelWidth = defaultGroupPixelWidth(s.type)
+            return grouping
+        })
+        //bucket density follows the VIEWPORT width rather than the (possibly column-constrained)
+        //container: a chart squeezed into a half-width dashboard column keeps the same bucket size
+        //it would get in a single-column layout, so side-by-side and full-width charts read alike.
+        //SINGLE_COLUMN_CHROME ≈ page paddings + axis margins around a full-width plot; the cap keeps
+        //very wide monitors from over-refining charts that are themselves capped by the page container
+        const SINGLE_COLUMN_CHROME = 238
+        const VIRTUAL_WIDTH_CAP = 1100
+        const virtualWidth = typeof window === 'undefined'
+            ? 0
+            : Math.min(window.innerWidth - SINGLE_COLUMN_CHROME, VIRTUAL_WIDTH_CAP)
+        const groupingWidth = Math.max(this.plotWidth, virtualWidth)
+        let sharedPixelWidth = 0
+        let doGrouping = false
+        this.series.forEach((s, i) => {
+            const grouping = groupings[i]
+            if (!grouping || !s.visible)
+                return
+            sharedPixelWidth = Math.max(sharedPixelWidth, grouping.groupPixelWidth)
+            if (grouping.forced || this.countVisiblePoints(s, xAxis) > groupingWidth / grouping.groupPixelWidth)
+                doGrouping = true
+        })
+        this.series.forEach((s, i) => {
+            const grouping = groupings[i]
+            if (grouping && doGrouping) {
                 const defApprox = /column|bar/.test(s.type) ? 'sum' : 'average'
-                s.plotPoints = groupSeriesData(s.points, grouping, xAxis.min, xAxis.max, this.plotWidth, defApprox)
+                s.plotPoints = groupSeriesData(s.points, {...grouping, groupPixelWidth: sharedPixelWidth},
+                    xAxis.min, xAxis.max, groupingWidth, defApprox)
             } else {
                 s.plotPoints = s.points
             }
-        }
+        })
+    }
+
+    //number of points inside the currently visible x-window (grouping density is decided on what's
+    //on screen, not the full dataset — so zooming into a sparse period turns grouping off)
+    countVisiblePoints(s, xAxis) {
+        const {min, max} = xAxis
+        if (!isNumber(min) || !isNumber(max))
+            return s.points.length
+        let count = 0
+        for (const p of s.points)
+            if (p.x >= min && p.x <= max)
+                count++
+        return count
     }
 
     getStacking(s) {
@@ -355,8 +400,6 @@ export class Chart {
         this.pointRange = pr === Infinity ? (this.xAxis[0].max - this.xAxis[0].min) / 50 : pr
     }
 
-    //breathing room on both x-edges so data doesn't sit flush against the axes; at least half a
-    //point-width (so edge columns/candles aren't clipped) and at least ~2% of the range
     //draw a white separator at the boundary between stacked y-axis panes (e.g. Total XLM over Fee Pool)
     renderPaneSeparators() {
         const tops = new Set()
@@ -384,8 +427,11 @@ export class Chart {
         const range = xa.max - xa.min
         if (!(range > 0))
             return
-        const slotPad = (this.hasSlottedSeries && this.pointRange > 0) ? this.pointRange / 2 : 0
-        const pad = Math.max(slotPad, range * 0.02)
+        //pad only charts with slotted series (columns/candles), so their edge bars aren't clipped in half;
+        //pure line/area charts render flush to the plot edges
+        if (!this.hasSlottedSeries || !(this.pointRange > 0))
+            return
+        const pad = Math.max(this.pointRange / 2, range * 0.02)
         xa.min -= pad
         xa.max += pad
     }
@@ -504,6 +550,7 @@ export class Chart {
             this.navigator.render(navGroup, navTop, 32)
         }
         this.tooltip.bind()
+        this.zoomSelection.bind()
         if (this.rangeSelector)
             this.rangeSelector.reposition()
     }
@@ -511,6 +558,7 @@ export class Chart {
     redraw() {
         //clear and re-render into the same container
         this.tooltip.destroy()
+        this.zoomSelection.destroy()
         this.renderer.destroy()
         this.renderer = new SvgRenderer(this.container, this.chartWidth, this.chartHeight)
         this.render()
@@ -558,6 +606,8 @@ export class Chart {
             this.rangeSelector.destroy()
         if (this.tooltip)
             this.tooltip.destroy()
+        if (this.zoomSelection)
+            this.zoomSelection.destroy()
         if (this.renderer)
             this.renderer.destroy()
         this.container = null

package/charts/core/time.js

@@ -56,16 +56,20 @@ const UNITS = [
 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
+    //pick the unit + multiple NEAREST to the target interval —
+    //not the first one >= target, which over-coarsens (e.g. 5-year ticks where 2-year fit better)
+    const candidates = []
+    for (const unit of UNITS)
+        for (const mult of unit.multiples)
+            candidates.push({unit, mult, ms: unit.ms * mult})
     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
-            }
+    for (let i = 0; i < candidates.length; i++) {
+        const next = candidates[i + 1]
+        if (!next || approx <= (candidates[i].ms + next.ms) / 2) {
+            chosen = candidates[i].unit
+            chosenCount = candidates[i].mult
+            break
         }
     }
 

package/charts/interaction/zoom.js

@@ -0,0 +1,157 @@
+import {isNumber} from '../core/utilities'
+
+//same tint as the navigator selection window, so both "selected range" visuals read as one
+const SELECTION_FILL = 'rgba(102,133,194,0.25)'
+//clicks and sub-threshold jitters don't zoom
+const MIN_SELECTION_PX = 10
+
+//Drag-to-zoom over the plot area: press → drag to highlight an x-range →
+//release to zoom into it. Enabled on stock charts and any chart with chart.zoomType === 'x'.
+export class ZoomSelection {
+    constructor(chart) {
+        this.chart = chart
+    }
+
+    get enabled() {
+        const c = this.chart
+        const zoomType = c.options.chart && c.options.chart.zoomType
+        return zoomType === 'x' || c.chartType === 'StockChart'
+    }
+
+    bind() {
+        if (!this.enabled)
+            return
+        this.svg = this.chart.renderer.root.element
+        this.downHandler = e => this.onDown(e)
+        this.svg.addEventListener('mousedown', this.downHandler)
+        //charts without the range-selector button row get a floating "Reset zoom" control while
+        //a drag-selected range is active (the control survives redraws since bind() re-runs on each)
+        if (this.isZoomed())
+            this.showResetButton()
+    }
+
+    //user-driven extremes are active and there is no range selector to reset them with
+    isZoomed() {
+        const chart = this.chart
+        const xa = chart.xAxis && chart.xAxis[0]
+        return !chart.rangeSelector && !!xa && (xa.userMin !== undefined || xa.userMax !== undefined)
+    }
+
+    showResetButton() {
+        if (this.resetBtn)
+            return
+        const chart = this.chart
+        const btn = document.createElement('span')
+        btn.className = 'chart-reset-zoom'
+        btn.setAttribute('role', 'button')
+        btn.tabIndex = 0
+        btn.textContent = 'Reset zoom'
+        btn.style.top = (chart.plotTop + 6) + 'px'
+        btn.style.right = (Math.max(0, chart.chartWidth - chart.plotLeft - chart.plotWidth) + 6) + 'px'
+        const reset = () => chart.xAxis[0].setExtremes(null, null)
+        btn.addEventListener('click', reset)
+        btn.addEventListener('keydown', e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                reset()
+            }
+        })
+        chart.container.appendChild(btn)
+        this.resetBtn = btn
+    }
+
+    removeResetButton() {
+        if (this.resetBtn && this.resetBtn.parentNode)
+            this.resetBtn.parentNode.removeChild(this.resetBtn)
+        this.resetBtn = null
+    }
+
+    toChartX(e) {
+        const rect = this.svg.getBoundingClientRect()
+        return (e.clientX - rect.left) * (this.chart.chartWidth / rect.width)
+    }
+
+    onDown(e) {
+        if (e.button !== 0)
+            return
+        const chart = this.chart
+        const rect = this.svg.getBoundingClientRect()
+        const mx = (e.clientX - rect.left) * (chart.chartWidth / rect.width)
+        const my = (e.clientY - rect.top) * (chart.chartHeight / rect.height)
+        //react only on the plot area itself — the navigator strip and axis labels live outside it
+        //and keep their own interactions
+        if (mx < chart.plotLeft || mx > chart.plotLeft + chart.plotWidth ||
+            my < chart.plotTop || my > chart.plotTop + chart.plotHeight)
+            return
+        e.preventDefault()
+        this.startX = mx
+        this.overlay = chart.renderer.rect(mx, chart.plotTop, 0, chart.plotHeight, {})
+            .css({fill: SELECTION_FILL, 'pointer-events': 'none'})
+            .add(chart.renderer.root)
+        this.moveHandler = ev => this.onMove(ev)
+        this.upHandler = ev => this.onUp(ev)
+        document.addEventListener('mousemove', this.moveHandler)
+        document.addEventListener('mouseup', this.upHandler)
+    }
+
+    selectionBounds(ev) {
+        const chart = this.chart
+        const x = Math.max(chart.plotLeft, Math.min(this.toChartX(ev), chart.plotLeft + chart.plotWidth))
+        return [Math.min(this.startX, x), Math.max(this.startX, x)]
+    }
+
+    onMove(ev) {
+        const [x0, x1] = this.selectionBounds(ev)
+        if (this.overlay)
+            this.overlay.attr({x: x0, width: x1 - x0})
+        //the tooltip's svg-level listener fired before this document-level one — hide what it drew,
+        //so the selection band isn't obscured while dragging
+        if (this.chart.tooltip)
+            this.chart.tooltip.hide()
+    }
+
+    onUp(ev) {
+        const chart = this.chart
+        const [x0, x1] = this.selectionBounds(ev)
+        this.cancel()
+        if (x1 - x0 < MIN_SELECTION_PX)
+            return
+        const xAxis = chart.xAxis[0]
+        const span = (xAxis.max - xAxis.min) || 1
+        const toValue = px => xAxis.min + ((px - xAxis.left) / xAxis.len) * span
+        let vMin = toValue(x0)
+        let vMax = toValue(x1)
+        //respect the axis' minimum zoom window (e.g. 1h on the price chart): widen around the center
+        const minRange = xAxis.options.minRange
+        if (isNumber(minRange) && vMax - vMin < minRange) {
+            const mid = (vMin + vMax) / 2
+            vMin = mid - minRange / 2
+            vMax = mid + minRange / 2
+        }
+        //a manually selected range doesn't correspond to any period button
+        if (chart.rangeSelector)
+            chart.rangeSelector.clearSelection()
+        xAxis.setExtremes(vMin, vMax)
+    }
+
+    //abort an in-flight drag and remove the selection band
+    cancel() {
+        if (this.moveHandler) {
+            document.removeEventListener('mousemove', this.moveHandler)
+            document.removeEventListener('mouseup', this.upHandler)
+            this.moveHandler = this.upHandler = null
+        }
+        if (this.overlay) {
+            this.overlay.destroy()
+            this.overlay = null
+        }
+    }
+
+    destroy() {
+        this.cancel()
+        this.removeResetButton()
+        if (this.svg && this.downHandler)
+            this.svg.removeEventListener('mousedown', this.downHandler)
+        this.svg = null
+    }
+}

package/charts/stock/data-grouping.js

@@ -1,6 +1,20 @@
 //Downsample raw series points into calendar-aligned time buckets (stock data grouping).
 import {isNumber} from '../core/utilities'
 
+/**
+ * Default bucket pixel size per series type: columns/candles need room for a
+ * readable bar, lines/areas keep near-raw resolution
+ * @param {string} type - series type
+ * @return {number}
+ */
+export function defaultGroupPixelWidth(type) {
+    if (/^(column|bar|candlestick)$/.test(type))
+        return 10
+    if (/^(ohlc|hlc)$/.test(type))
+        return 5
+    return 2
+}
+
 const day = 24 * 3600 * 1000
 const week = 7 * day
 

package/charts/stock/range-selector.js

@@ -136,6 +136,13 @@ export class RangeSelector {
         this.reposition()
     }
 
+    //deselect all period buttons — the current extremes were set manually (e.g. drag-to-zoom)
+    //and don't correspond to any predefined period
+    clearSelection() {
+        this.selected = null
+        this.highlight()
+    }
+
     highlight() {
         if (!this.buttons)
             return

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.21.3",
+  "version": "1.21.4",
   "description": "StellarExpert shared UI components library",
   "author": "orbitlens <orbit@stellar.expert>",
   "license": "MIT",