@stellar-expert/ui-framework 1.21.2 → 1.21.3

package/charts/axis/axis.js

@@ -131,6 +131,21 @@ export class Axis {
         this.dataMax = dataMax
     }
 
+    //pixels at the top of the pane that must stay clear of drawn data — the floating range-selector
+    //buttons overlay the top ~26px of the plot, so the pane that starts at the plot top scales its
+    //max up until the tallest point (incl. candle wicks) renders below the controls
+    reservedTopPixels() {
+        const c = this.chart
+        if (this.isXAxis || c.chartType !== 'StockChart' || !c.options.rangeSelector)
+            return 0
+        if (!isNumber(this.len) || !isNumber(this.top) || !isNumber(c.plotTop))
+            return 0
+        //only the top pane sits under the controls; lower panes (e.g. a volume strip) are unaffected
+        if (this.top > c.plotTop + 1)
+            return 0
+        return 26
+    }
+
     setScale() {
         this.getSeriesExtremes()
         let min = pick(this.userMin, this.dataMin)
@@ -226,7 +241,12 @@ export class Axis {
                     drawn = drawn.slice(0, -1)
                 const nIntervals = drawn.length - 1
                 const dataSteps = r.interval > 0 ? (max - r.min) / r.interval : nIntervals
-                const M = Math.max(nIntervals + 0.7, dataSteps + 0.15)
+                let M = Math.max(nIntervals + 0.7, dataSteps + 0.15)
+                //widen the headroom so the data top maps below the reserved zoom-controls band:
+                //(M - dataSteps)/M of the pane height must be at least reserve/len
+                const reserve = this.reservedTopPixels()
+                if (reserve && this.len > reserve * 2)
+                    M = Math.max(M, dataSteps / (1 - reserve / this.len))
                 this.tickInterval = r.interval
                 this.tickPositions = drawn
                 this.labelledPositions = null

package/charts/core/chart.js

@@ -62,9 +62,15 @@ export class Chart {
         this.hideLoading()
         const el = document.createElement('div')
         el.className = 'ix-chart-loading'
-        el.textContent = text || 'Loading…'
+        if (text)
+            el.textContent = text
         Object.assign(el.style, {
-            position: 'absolute', inset: '0', display: 'flex', alignItems: 'center',
+            position: 'absolute',
+            left: (this.plotLeft || 0) + 'px',
+            top: (this.plotTop || 0) + 'px',
+            width: (this.plotWidth || 0) + 'px',
+            height: (this.plotHeight || 0) + 'px',
+            display: 'flex', alignItems: 'center',
             justifyContent: 'center', background: 'rgba(0,0,0,0.25)', color: 'var(--color-text)', zIndex: 15
         })
         this.container.appendChild(el)
@@ -266,6 +272,10 @@ export class Chart {
                 const nIntervals = s.drawn.length - 1
                 const dataSteps = s.interval > 0 ? (s.dataMax - s.base) / s.interval : nIntervals
                 M = Math.max(M, nIntervals + STEP_HEAD, dataSteps + 0.15)
+                //keep the data top below the reserved zoom-controls band (see Axis.reservedTopPixels)
+                const reserve = s.a.reservedTopPixels()
+                if (reserve && s.a.len > reserve * 2)
+                    M = Math.max(M, dataSteps / (1 - reserve / s.a.len))
             }
             for (const s of specs) {
                 s.a.tickInterval = s.interval

package/charts/series/candlestick-series.js

@@ -40,7 +40,7 @@ export class CandlestickSeries extends Series {
                 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 w = Math.max(1.5, catW * 0.8 - 0.5)
             const up = p.close >= p.open
             const color = up ? upColor : downColor
             const yHigh = yAxis.toPixels(p.high)

package/charts/stock/navigator.js

@@ -57,7 +57,8 @@ export class Navigator {
         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)
+        const bg = renderer.rect(left, top, width, height, {}).css({fill: 'var(--color-border-shadow)', 'fill-opacity': 0.15, cursor: 'pointer'}).add(group)
+        this.bindBackground(bg)
         //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)
@@ -70,7 +71,7 @@ export class Navigator {
                 started = true
             }
         }
-        const lineEl = renderer.path(d.trim(), {'stroke-width': 1, fill: 'none'}).css({stroke: NAV_LINE}).add(group)
+        const lineEl = renderer.path(d.trim(), {'stroke-width': 1, fill: 'none'}).css({stroke: NAV_LINE, 'pointer-events': 'none'}).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)
@@ -131,6 +132,33 @@ export class Navigator {
         return rect
     }
 
+    //click on the unselected part of the strip: move the selection window (same span) so it centers
+    //on the clicked date, clamped to the data edges
+    bindBackground(bg) {
+        const chart = this.chart
+        const xAxis = chart.xAxis[0]
+        bg.on('mousedown', e => {
+            e.preventDefault()
+            const svg = chart.renderer.root.element
+            const rect = svg.getBoundingClientRect()
+            const scaleX = chart.chartWidth / rect.width
+            const px = (e.clientX - rect.left) * scaleX
+            const v = this.dataMin + ((px - this.left) / this.width) * (this.dataMax - this.dataMin)
+            const span = viewMax(xAxis) - viewMin(xAxis)
+            let min = v - span / 2
+            let max = v + span / 2
+            if (min < this.dataMin) {
+                min = this.dataMin
+                max = min + span
+            }
+            if (max > this.dataMax) {
+                max = this.dataMax
+                min = max - span
+            }
+            xAxis.setExtremes(min, max)
+        })
+    }
+
     bindBand(band) {
         const chart = this.chart
         const xAxis = chart.xAxis[0]

package/charts/stock/range-selector.js

@@ -88,18 +88,40 @@ export class RangeSelector {
             this.zoomLabel.style.display = compact ? 'none' : ''
     }
 
+    //full data range, unioned with the navigator's own series. Views that lazy-load data on zoom replace
+    //the main series with just the visible sub-window (keeping the full lifespan only in navigator.series),
+    //so the axis' dataMin/dataMax shrink to the loaded slice — anchoring the buttons on those would make
+    //'All' re-select the current window instead of the whole history
+    getUnionExtremes() {
+        const xAxis = this.chart.xAxis[0]
+        let {dataMin, dataMax} = xAxis
+        const navSeries = this.chart.options.navigator && this.chart.options.navigator.series
+        const navData = navSeries && navSeries.data
+        if (navData && navData.length) {
+            for (const p of navData) {
+                const x = Array.isArray(p) ? p[0] : p && p.x
+                if (!isNumber(x))
+                    continue
+                if (!isNumber(dataMin) || x < dataMin) dataMin = x
+                if (!isNumber(dataMax) || x > dataMax) dataMax = x
+            }
+        }
+        return {dataMin, dataMax}
+    }
+
     apply(b, i) {
         const xAxis = this.chart.xAxis[0]
+        const {dataMin, dataMax} = this.getUnionExtremes()
         if (b.type === 'all') {
             this.selected = 'all'
             //explicit full extremes so the initial xAxis.range window doesn't re-apply
-            xAxis.setExtremes(xAxis.dataMin, xAxis.dataMax)
+            xAxis.setExtremes(dataMin, dataMax)
         } else {
             const count = b.count || 1
             //the window always ENDS at the last data point; going back a calendar
             //month/year/day for the start. Anchoring the end on dataMax keeps the right edge flush with the
             //data instead of snapping forward to the next month boundary (which left a gap on the right).
-            const max = xAxis.dataMax
+            const max = dataMax
             const d = new Date(max)
             if (b.type === 'year')
                 d.setUTCFullYear(d.getUTCFullYear() - count)

package/package.json

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