@stellar-expert/ui-framework 1.21.1 → 1.21.3

package/account/account-address.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import cn from 'classnames'
 import {shortenString} from '@stellar-expert/formatter'
-import {AccountIdenticon} from './identicon.js'
-import {InfoTooltip} from '../controls/info-tooltip.js'
-import {useDirectory} from '../directory/directory-hooks.js'
-import {formatExplorerLink} from '../ledger/ledger-entry-href-formatter.js'
-import {useStellarNetwork} from '../state/stellar-network-hooks.js'
-import {decodeKeyType} from '../stellar/key-type.js'
+import {AccountIdenticon} from './identicon'
+import {InfoTooltip} from '../controls/info-tooltip'
+import {useDirectory} from '../directory/directory-hooks'
+import {formatExplorerLink} from '../ledger/ledger-entry-href-formatter'
+import {useStellarNetwork} from '../state/stellar-network-hooks'
+import {decodeKeyType} from '../stellar/key-type'
 import './account-address.scss'
 
 

package/account/signer-key.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import {StrKey} from '@stellar/stellar-sdk'
-import {AccountAddress} from './account-address.js'
+import {AccountAddress} from './account-address'
 
 /**
  * Decode a Stellar signer object (XDR or parsed) into a StrKey-encoded key and weight

package/api/explorer-api-hooks.js

@@ -1,10 +1,10 @@
 import {useEffect, useState} from 'react'
 import isEqual from 'react-fast-compare'
 import {stringifyQuery} from '@stellar-expert/navigation'
-import {addVisibilityChangeListener, isDocumentVisible} from '../state/page-visibility-helpers.js'
-import {useStellarNetwork} from '../state/stellar-network-hooks.js'
-import {fetchExplorerApi} from './explorer-api-call.js'
-import apiCache from './api-cache.js'
+import {addVisibilityChangeListener, isDocumentVisible} from '../state/page-visibility-helpers'
+import {useStellarNetwork} from '../state/stellar-network-hooks'
+import {fetchExplorerApi} from './explorer-api-call'
+import apiCache from './api-cache'
 
 export class ExplorerApiResult {
     constructor(apiEndpoint, data, ts) {

package/api/explorer-api-paginated-list-hooks.js

@@ -1,10 +1,10 @@
 import {useRef} from 'react'
 import isEqual from 'react-fast-compare'
 import {parseQuery, stringifyQuery, navigation} from '@stellar-expert/navigation'
-import {useStellarNetwork} from '../state/stellar-network-hooks.js'
-import {useDependantState} from '../state/state-hooks.js'
-import {fetchExplorerApi} from './explorer-api-call.js'
-import apiCache from './api-cache.js'
+import {useStellarNetwork} from '../state/stellar-network-hooks'
+import {useDependantState} from '../state/state-hooks'
+import {fetchExplorerApi} from './explorer-api-call'
+import apiCache from './api-cache'
 
 function inverseOrder(order) {
     return order === 'desc' ? 'asc' : 'desc'

package/api/explorer-tx-api.js

@@ -1,6 +1,6 @@
-import {parseStellarGenericId} from '../stellar/ledger-generic-id.js'
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks.js'
-import {fetchExplorerApi} from './explorer-api-call.js'
+import {parseStellarGenericId} from '../stellar/ledger-generic-id'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
+import {fetchExplorerApi} from './explorer-api-call'
 
 /**
  * Load transaction from API

package/api/ledger-stream.js

@@ -1,5 +1,5 @@
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks.js'
-import {fetchExplorerApi} from './explorer-api-call.js'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
+import {fetchExplorerApi} from './explorer-api-call'
 
 /**
  * Long-polling stream that notifies listeners about new ledgers

package/asset/amount.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import {formatWithPrecision, formatWithAutoPrecision, fromStroops} from '@stellar-expert/formatter'
 import {AssetDescriptor, isAssetValid, isValidPoolId} from '@stellar-expert/asset-descriptor'
-import {useAssetMeta} from './asset-meta-hooks.js'
-import {AssetLink} from './asset-link.js'
+import {useAssetMeta} from './asset-meta-hooks'
+import {AssetLink} from './asset-link'
 
 /**
  * Formatted tokens amount

package/asset/asset-icon.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
-import {drawIdenticon} from '../account/identicon.js'
-import {useAssetMeta} from './asset-meta-hooks.js'
+import {drawIdenticon} from '../account/identicon'
+import {useAssetMeta} from './asset-meta-hooks'
 
 /**
  * Inline asset icon

package/asset/asset-issuer.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
-import {AccountAddress} from '../account/account-address.js'
-import {useAssetMeta} from './asset-meta-hooks.js'
+import {AccountAddress} from '../account/account-address'
+import {useAssetMeta} from './asset-meta-hooks'
 
 /**
  * Inline asset issuer

package/asset/asset-link.js

@@ -2,12 +2,12 @@ import React from 'react'
 import cn from 'classnames'
 import {shortenString} from '@stellar-expert/formatter'
 import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
-import {useStellarNetwork} from '../state/stellar-network-hooks.js'
-import {formatExplorerLink} from '../ledger/ledger-entry-href-formatter.js'
-import {AccountAddress} from '../account/account-address.js'
-import {useAssetMeta} from './asset-meta-hooks.js'
-import {AssetIcon} from './asset-icon.js'
-import {AssetIssuer} from './asset-issuer.js'
+import {useStellarNetwork} from '../state/stellar-network-hooks'
+import {formatExplorerLink} from '../ledger/ledger-entry-href-formatter'
+import {AccountAddress} from '../account/account-address'
+import {useAssetMeta} from './asset-meta-hooks'
+import {AssetIcon} from './asset-icon'
+import {AssetIssuer} from './asset-issuer'
 import './asset-link.scss'
 
 /**

package/asset/asset-list-hooks.js

@@ -2,9 +2,9 @@ import React, {useState} from 'react'
 import {throttle} from 'throttle-debounce'
 import equal from 'react-fast-compare'
 import {stringifyQuery} from '@stellar-expert/navigation'
-import {fetchExplorerApi} from '../api/explorer-api-call.js'
-import {useDeepEffect} from '../state/state-hooks.js'
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks.js'
+import {fetchExplorerApi} from '../api/explorer-api-call'
+import {useDeepEffect} from '../state/state-hooks'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
 
 const defaults = {
     limit: 20,

package/asset/asset-meta-hooks.js

@@ -2,9 +2,9 @@ import {useEffect, useState} from 'react'
 import {AssetDescriptor} from '@stellar-expert/asset-descriptor'
 import {stringifyQuery} from '@stellar-expert/navigation'
 import {InMemoryClientCache} from '@stellar-expert/client-cache'
-import {fetchExplorerApi} from '../api/explorer-api-call.js'
-import {ExplorerBatchInfoLoader} from '../api/explorer-batch-info-loader.js'
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks.js'
+import {fetchExplorerApi} from '../api/explorer-api-call'
+import {ExplorerBatchInfoLoader} from '../api/explorer-batch-info-loader'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
 
 /**
  * @typedef AssetBasicTomlInfo

package/asset/asset-selector.js

@@ -1,7 +1,7 @@
 import React, {useCallback, useRef, useState} from 'react'
-import {Dropdown} from '../controls/dropdown.js'
-import {AssetLink} from './asset-link.js'
-import {useAssetList} from './asset-list-hooks.js'
+import {Dropdown} from '../controls/dropdown'
+import {AssetLink} from './asset-link'
+import {useAssetList} from './asset-list-hooks'
 import './asset-selector.scss'
 
 /**

package/charts/axis/axis.js

@@ -1,6 +1,6 @@
-import {isNumber, pick, relativeLength, defined} from '../core/utilities.js'
-import {getDateTimeTickPositions, dateTimeLabelFormat, dateFormat} from '../core/time.js'
-import {getLinearTickPositions, niceAlignedTicks, zeroBasedGridTicks, formatAxisNumber, axisNumberUnit} from './tick-positioner.js'
+import {isNumber, pick, relativeLength, defined} from '../core/utilities'
+import {getDateTimeTickPositions, dateTimeLabelFormat, dateFormat} from '../core/time'
+import {getLinearTickPositions, niceAlignedTicks, zeroBasedGridTicks, formatAxisNumber, axisNumberUnit} from './tick-positioner'
 
 const LABEL_FONT = 12
 const LABEL_FONT_CSS = LABEL_FONT + 'px "Roboto Condensed",sans-serif'
@@ -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/axis/tick-positioner.js

@@ -1,5 +1,5 @@
 //Linear "nice number" tick interval + positions.
-import {addThousandsSep} from '../core/utilities.js'
+import {addThousandsSep} from '../core/utilities'
 
 /**
  * Round an interval to a human-friendly value (1, 2, 2.5, 5, 10 * 10^n).

package/charts/chart-default-options.js

@@ -1,6 +1,6 @@
 //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.js'
+import ChartEngine from './globals'
 
 //allow negative values on the logarithmic axis
 ChartEngine.Axis.prototype.allowNegativeLog = true

package/charts/chart-options-builder.js

@@ -1,7 +1,7 @@
 //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.js'
-import {ChartEngine} from './chart-default-options.js'
+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);

package/charts/chart.js

@@ -1,11 +1,11 @@
 import React, {useRef} from 'react'
 import cn from 'classnames'
 import PropTypes from 'prop-types'
-import {useDeepEffect} from '../state/state-hooks.js'
-import {withErrorBoundary} from '../errors/error-boundary.js'
-import {ChartEngine} from './chart-default-options.js'
-import {prepareChartOptions} from './chart-options-builder.js'
-import {ChartLoader} from './chart-loader.js'
+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}

package/charts/core/animate.js

@@ -1,6 +1,6 @@
 //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.js'
+import {uniqueId} from './utilities'
 
 export const DEFAULT_DURATION = 1500
 

package/charts/core/chart.js

@@ -1,16 +1,16 @@
-import {Axis} from '../axis/axis.js'
-import {niceAlignedTicks} from '../axis/tick-positioner.js'
-import {createSeries} from '../series/index.js'
-import {Legend} from '../interaction/legend.js'
-import {Tooltip} from '../interaction/tooltip.js'
-import {groupSeriesData} from '../stock/data-grouping.js'
-import {RangeSelector} from '../stock/range-selector.js'
-import {renderPolar} from '../polar/polar-chart.js'
-import {renderPie} from '../pie/pie-chart.js'
-import {Navigator} from '../stock/navigator.js'
-import {merge, resolveContainer, pick, relativeLength, uniqueId, defined, isNumber} from './utilities.js'
-import {getOptions} from './options.js'
-import {SvgRenderer} from './svg-renderer.js'
+import {Axis} from '../axis/axis'
+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 {RangeSelector} from '../stock/range-selector'
+import {renderPolar} from '../polar/polar-chart'
+import {renderPie} from '../pie/pie-chart'
+import {Navigator} from '../stock/navigator'
+import {merge, resolveContainer, pick, relativeLength, uniqueId, defined, isNumber} from './utilities'
+import {getOptions} from './options'
+import {SvgRenderer} from './svg-renderer'
 
 const X_LABEL_HEIGHT = 22
 
@@ -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/core/options.js

@@ -1,4 +1,4 @@
-import {merge} from './utilities.js'
+import {merge} from './utilities'
 
 //Engine baseline defaults. The explorer theme (applied via setOptions in chart-default-options.js)
 //deep-merges on top of this, and per-chart options on top of that.

package/charts/globals.js

@@ -1,10 +1,10 @@
 //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.js'
-import {getOptions, setOptions} from './core/options.js'
-import {Color} from './core/color.js'
-import {Axis} from './axis/axis.js'
-import {merge} from './core/utilities.js'
+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')

package/charts/index.js

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

package/charts/interaction/tooltip.js

@@ -1,5 +1,5 @@
-import {dateFormat} from '../core/time.js'
-import {isNumber, addThousandsSep} from '../core/utilities.js'
+import {dateFormat} from '../core/time'
+import {isNumber, addThousandsSep} from '../core/utilities'
 
 function formatValue(v, tooltipOpts) {
     if (!isNumber(v))

package/charts/pie/pie-chart.js

@@ -1,7 +1,7 @@
 //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.js'
-import {animate, DEFAULT_DURATION} from '../core/animate.js'
+import {pick, relativeLength, isNumber, addThousandsSep} from '../core/utilities'
+import {animate, DEFAULT_DURATION} from '../core/animate'
 
 const TEXT_STYLE = {
     fontSize: '12px',

package/charts/polar/polar-chart.js

@@ -1,7 +1,7 @@
 //Polar/radar rendering path (asset rating chart): categories around a circle, radial value axis,
 //polygon gridlines (gridLineInterpolation: 'polygon').
-import {pick, relativeLength} from '../core/utilities.js'
-import {animateFromCenter} from '../core/animate.js'
+import {pick, relativeLength} from '../core/utilities'
+import {animateFromCenter} from '../core/animate'
 
 const TEXT_STYLE = {
     fontSize: '12px',

package/charts/series/area-series.js

@@ -1,6 +1,6 @@
-import {pick, uniqueId, isNumber, clamp} from '../core/utilities.js'
-import {revealLeftToRight} from '../core/animate.js'
-import {LineSeries} from './line-series.js'
+import {pick, uniqueId, isNumber, clamp} from '../core/utilities'
+import {revealLeftToRight} from '../core/animate'
+import {LineSeries} from './line-series'
 
 export class AreaSeries extends LineSeries {
     resolveFill() {

package/charts/series/candlestick-series.js

@@ -1,5 +1,5 @@
-import {isNumber, pick} from '../core/utilities.js'
-import {Series} from './series.js'
+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
@@ -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/series/column-series.js

@@ -1,6 +1,6 @@
-import {Series} from './series.js'
-import {pick, isNumber, clamp} from '../core/utilities.js'
-import {animateColumns} from '../core/animate.js'
+import {Series} from './series'
+import {pick, isNumber, clamp} from '../core/utilities'
+import {animateColumns} from '../core/animate'
 
 export class ColumnSeries extends Series {
     render(group) {

package/charts/series/index.js

@@ -1,7 +1,7 @@
-import {LineSeries} from './line-series.js'
-import {AreaSeries} from './area-series.js'
-import {ColumnSeries} from './column-series.js'
-import {CandlestickSeries} from './candlestick-series.js'
+import {LineSeries} from './line-series'
+import {AreaSeries} from './area-series'
+import {ColumnSeries} from './column-series'
+import {CandlestickSeries} from './candlestick-series'
 
 //series type registry — extended in later phases (spline-smoothing, candlestick, variablepie, ...)
 export const seriesTypes = {

package/charts/series/line-series.js

@@ -1,6 +1,6 @@
-import {pick} from '../core/utilities.js'
-import {revealLeftToRight} from '../core/animate.js'
-import {Series} from './series.js'
+import {pick} from '../core/utilities'
+import {revealLeftToRight} from '../core/animate'
+import {Series} from './series'
 
 export class LineSeries extends Series {
     render(group) {

package/charts/series/series.js

@@ -1,4 +1,4 @@
-import {pick, isNumber} from '../core/utilities.js'
+import {pick, isNumber} from '../core/utilities'
 
 //Catmull-Rom -> cubic bezier smoothing for spline series
 function smoothSegmentPath(pts) {

package/charts/stock/data-grouping.js

@@ -1,5 +1,5 @@
 //Downsample raw series points into calendar-aligned time buckets (stock data grouping).
-import {isNumber} from '../core/utilities.js'
+import {isNumber} from '../core/utilities'
 
 const day = 24 * 3600 * 1000
 const week = 7 * day

package/charts/stock/navigator.js

@@ -1,6 +1,6 @@
-import {isNumber, clamp} from '../core/utilities.js'
-import {animateLineDraw} from '../core/animate.js'
-import {getDateTimeTickPositions, dateTimeLabelFormat, dateFormat} from '../core/time.js'
+import {isNumber, clamp} from '../core/utilities'
+import {animateLineDraw} from '../core/animate'
+import {getDateTimeTickPositions, dateTimeLabelFormat, dateFormat} from '../core/time'
 
 //Navigator look: a thin red overview line, the SELECTED window masked with a light fill,
 //a light outline, and small grip handles centred vertically on each edge.
@@ -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

@@ -1,4 +1,4 @@
-import {isNumber} from '../core/utilities.js'
+import {isNumber} from '../core/utilities'
 
 const DAY = 24 * 3600 * 1000
 
@@ -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/claimable-balance/claimable-balance-claimants.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import {xdrParseClaimant} from '@stellar-expert/claimable-balance-utils'
-import {AccountAddress} from '../account/account-address.js'
-import {CodeBlock} from '../controls/code-block.js'
+import {AccountAddress} from '../account/account-address'
+import {CodeBlock} from '../controls/code-block'
 
 /**
  * Displays a list of claimable balance claimants with their addresses and predicates

package/claimable-balance/claimable-balance-id.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import {shortenString} from '@stellar-expert/formatter'
-import {formatExplorerLink} from '../ledger/ledger-entry-href-formatter.js'
+import {formatExplorerLink} from '../ledger/ledger-entry-href-formatter'
 
 export function ClaimableBalanceId({balance}) {
     if (!balance)

package/contract/contract-api.js

@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react'
-import {useExplorerApi} from '../api/explorer-api-hooks.js'
-import {getCurrentStellarNetwork} from '../state/stellar-network-hooks.js'
+import {useExplorerApi} from '../api/explorer-api-hooks'
+import {getCurrentStellarNetwork} from '../state/stellar-network-hooks'
 
 /**
  * React hook that fetches contract information from the Explorer API