@sybilion/uilib 1.2.26 → 1.3.1

package/dist/esm/components/ui/Chart/lightweight/lightweightForecastChart.helpers.js

@@ -0,0 +1,114 @@
+import { ColorType } from 'lightweight-charts';
+import { applyQuantileBandConeToChartData } from '../quantileBandConeChartData.js';
+import { chartDateToUtcTimestamp } from './chartTime.js';
+
+function buildLightweightChartOptions(args) {
+    const { isDarkTheme, width, height, autoSize = false } = args;
+    return {
+        autoSize,
+        width: Math.max(1, Math.floor(width)),
+        height: Math.max(1, Math.floor(height)),
+        layout: {
+            background: {
+                type: ColorType.Solid,
+                color: 'transparent',
+            },
+            textColor: isDarkTheme ? '#d8dee9' : '#191919',
+        },
+        grid: {
+            vertLines: {
+                color: isDarkTheme ? '#2f3440' : '#e6edf3',
+            },
+            horzLines: {
+                color: isDarkTheme ? '#2f3440' : '#e6edf3',
+            },
+        },
+        rightPriceScale: {
+            borderVisible: false,
+            scaleMargins: {
+                top: 0.08,
+                bottom: 0.08,
+            },
+        },
+        timeScale: {
+            borderVisible: false,
+            timeVisible: true,
+            secondsVisible: false,
+            fixLeftEdge: true,
+            fixRightEdge: true,
+        },
+        localization: {
+            locale: typeof navigator !== 'undefined' && navigator.language
+                ? navigator.language
+                : 'en-US',
+        },
+    };
+}
+function buildHistoricalLineData(rows) {
+    const out = [];
+    for (const row of rows) {
+        const v = row.historical;
+        if (typeof v !== 'number' || !Number.isFinite(v))
+            continue;
+        out.push({
+            time: chartDateToUtcTimestamp(row.date),
+            value: v,
+        });
+    }
+    out.sort((a, b) => Number(a.time) - Number(b.time));
+    return out;
+}
+function buildForecastLineData(rows, forecastKey) {
+    const out = [];
+    for (const row of rows) {
+        const v = row[forecastKey];
+        if (typeof v !== 'number' || !Number.isFinite(v))
+            continue;
+        out.push({
+            time: chartDateToUtcTimestamp(row.date),
+            value: v,
+        });
+    }
+    out.sort((a, b) => Number(a.time) - Number(b.time));
+    return out;
+}
+function buildQuantileBandCustomData(rows, bandKey) {
+    const coned = applyQuantileBandConeToChartData(rows, bandKey);
+    const out = [];
+    for (const row of coned) {
+        const v = row[bandKey];
+        if (!Array.isArray(v) ||
+            v.length !== 2 ||
+            typeof v[0] !== 'number' ||
+            typeof v[1] !== 'number' ||
+            !Number.isFinite(v[0]) ||
+            !Number.isFinite(v[1])) {
+            continue;
+        }
+        out.push({
+            time: chartDateToUtcTimestamp(row.date),
+            lower: v[0],
+            upper: v[1],
+        });
+    }
+    out.sort((a, b) => Number(a.time) - Number(b.time));
+    return out;
+}
+function findNearestChartRow(rows, time) {
+    if (!rows.length)
+        return null;
+    const target = Number(time) * 1000;
+    let best = null;
+    let bestDist = Infinity;
+    for (const row of rows) {
+        const t = Number(chartDateToUtcTimestamp(row.date)) * 1000;
+        const dist = Math.abs(t - target);
+        if (dist < bestDist) {
+            bestDist = dist;
+            best = row;
+        }
+    }
+    return best;
+}
+
+export { buildForecastLineData, buildHistoricalLineData, buildLightweightChartOptions, buildQuantileBandCustomData, findNearestChartRow };

package/dist/esm/components/ui/Chart/lightweight/quantileBandCustomSeries.js

@@ -0,0 +1,147 @@
+import { customSeriesDefaultOptions } from 'lightweight-charts';
+
+/** Catmull–Rom segment chain → cubic Béziers (matches curved line feel). */
+function appendCatmullRomBezierChain(ctx, pts, startWithMoveTo) {
+    if (pts.length < 2)
+        return;
+    if (pts.length === 2) {
+        if (startWithMoveTo)
+            ctx.moveTo(pts[0].x, pts[0].y);
+        ctx.lineTo(pts[1].x, pts[1].y);
+        return;
+    }
+    if (startWithMoveTo) {
+        ctx.moveTo(pts[0].x, pts[0].y);
+    }
+    for (let i = 0; i < pts.length - 1; i += 1) {
+        const p0 = pts[Math.max(0, i - 1)];
+        const p1 = pts[i];
+        const p2 = pts[i + 1];
+        const p3 = pts[Math.min(pts.length - 1, i + 2)];
+        const cp1x = p1.x + (p2.x - p0.x) / 6;
+        const cp1y = p1.y + (p2.y - p0.y) / 6;
+        const cp2x = p2.x - (p3.x - p1.x) / 6;
+        const cp2y = p2.y - (p3.y - p1.y) / 6;
+        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y);
+    }
+}
+class QuantileBandPaneRenderer {
+    getData;
+    getStyle;
+    isWhitespaceFn;
+    constructor(getData, getStyle, isWhitespaceFn) {
+        this.getData = getData;
+        this.getStyle = getStyle;
+        this.isWhitespaceFn = isWhitespaceFn;
+    }
+    draw(target, priceConverter) {
+        const pane = this.getData();
+        if (!pane?.bars?.length) {
+            return;
+        }
+        const style = this.getStyle();
+        const segments = [];
+        for (const bar of pane.bars) {
+            const d = bar.originalData;
+            if (this.isWhitespaceFn(d)) {
+                continue;
+            }
+            const p = d;
+            const yU = priceConverter(p.upper);
+            const yL = priceConverter(p.lower);
+            if (yU === null || yL === null) {
+                continue;
+            }
+            segments.push({ x: bar.x, yU, yL });
+        }
+        if (segments.length < 2) {
+            return;
+        }
+        target.useMediaCoordinateSpace(({ context }) => {
+            const opacity = typeof style.strokeOpacity === 'number'
+                ? style.strokeOpacity
+                : undefined;
+            const prevAlpha = context.globalAlpha;
+            const upper = segments.map(s => ({ x: s.x, y: s.yU }));
+            const lowerRev = segments
+                .map(s => ({ x: s.x, y: s.yL }))
+                .reverse();
+            context.beginPath();
+            appendCatmullRomBezierChain(context, upper, true);
+            const last = segments[segments.length - 1];
+            context.lineTo(last.x, last.yL);
+            appendCatmullRomBezierChain(context, lowerRev, false);
+            context.closePath();
+            context.fillStyle = style.fill;
+            context.fill();
+            const sw = style.strokeWidth;
+            if (sw > 0) {
+                if (opacity !== undefined)
+                    context.globalAlpha = opacity;
+                context.lineWidth = sw;
+                context.strokeStyle = style.stroke ?? style.fill;
+                if (style.strokeDasharray) {
+                    const parts = style.strokeDasharray
+                        .split(/[\s,]+/)
+                        .map(Number)
+                        .filter(n => Number.isFinite(n));
+                    if (parts.length)
+                        context.setLineDash(parts);
+                    else
+                        context.setLineDash([]);
+                }
+                else {
+                    context.setLineDash([]);
+                }
+                context.stroke();
+                context.setLineDash([]);
+            }
+            context.globalAlpha = prevAlpha;
+        });
+    }
+}
+class QuantileBandPaneView {
+    _paneData;
+    _style;
+    constructor(initialStyle) {
+        this._style = initialStyle;
+    }
+    updateStyle(style) {
+        this._style = style;
+    }
+    renderer() {
+        return new QuantileBandPaneRenderer(() => this._paneData, () => this._style, (d) => this.isWhitespace(d));
+    }
+    update(paneData, seriesOptions) {
+        this._paneData = paneData;
+        const c = seriesOptions.color;
+        if (typeof c === 'string') {
+            this._style = { ...this._style, fill: c };
+        }
+    }
+    priceValueBuilder(plotRow) {
+        if (this.isWhitespace(plotRow)) {
+            return [];
+        }
+        const p = plotRow;
+        return [p.lower, p.upper, (p.lower + p.upper) / 2];
+    }
+    isWhitespace(data) {
+        const row = data;
+        if (typeof row.lower !== 'number' ||
+            typeof row.upper !== 'number' ||
+            !Number.isFinite(row.lower) ||
+            !Number.isFinite(row.upper)) {
+            return true;
+        }
+        return false;
+    }
+    defaultOptions() {
+        return customSeriesDefaultOptions;
+    }
+    destroy() {
+        this._paneData = undefined;
+    }
+}
+
+export { QuantileBandPaneView };

package/dist/esm/components/ui/Chart/quantileBandConeChartData.js

@@ -0,0 +1,131 @@
+function isFiniteBandTuple(v) {
+    return (Array.isArray(v) &&
+        v.length === 2 &&
+        typeof v[0] === 'number' &&
+        typeof v[1] === 'number' &&
+        Number.isFinite(v[0]) &&
+        Number.isFinite(v[1]));
+}
+/**
+ * Matches ChartAreaInteractive `mode="intervals"`: cone / fan chart hand-off — collapse the
+ * interval to a point at the historical→forecast boundary, then expand along forecast anchors.
+ * (Same rules as `useQuantileBands`, without requiring `ForecastData` — reads tuples from each row.)
+ */
+function applyQuantileBandConeToChartData(chartData, bandKey) {
+    if (!chartData.length)
+        return chartData;
+    const originalBandByDate = new Map();
+    for (const p of chartData) {
+        const t = p[bandKey];
+        if (isFiniteBandTuple(t))
+            originalBandByDate.set(p.date, [t[0], t[1]]);
+    }
+    const forecastDateList = [...originalBandByDate.keys()].sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
+    if (forecastDateList.length === 0)
+        return chartData;
+    const forecastDatesSet = new Set(forecastDateList);
+    const dateToQuantileIndex = new Map();
+    forecastDateList.forEach((d, i) => dateToQuantileIndex.set(d, i));
+    const clonedData = [...chartData];
+    const historicalPoints = clonedData.filter(p => p.historical !== undefined &&
+        p.historical !== null &&
+        typeof p.historical === 'number' &&
+        Number.isFinite(p.historical));
+    const lastHistoricalPoint = historicalPoints.length > 0
+        ? historicalPoints[historicalPoints.length - 1]
+        : null;
+    const lastHistoricalDate = lastHistoricalPoint?.date;
+    const lastHistoricalValue = lastHistoricalPoint?.historical;
+    const firstForecastDate = forecastDateList[0];
+    const firstForecastDateObj = firstForecastDate
+        ? new Date(firstForecastDate)
+        : null;
+    const lastHistoricalDateObj = lastHistoricalDate
+        ? new Date(lastHistoricalDate)
+        : null;
+    const hasGap = !!lastHistoricalDate &&
+        !!firstForecastDate &&
+        lastHistoricalValue !== undefined &&
+        firstForecastDateObj &&
+        lastHistoricalDateObj &&
+        firstForecastDateObj.getTime() > lastHistoricalDateObj.getTime();
+    const needsBridgePoint = !!lastHistoricalDate &&
+        !!firstForecastDate &&
+        lastHistoricalValue !== undefined &&
+        firstForecastDateObj &&
+        lastHistoricalDateObj &&
+        firstForecastDateObj.getTime() <= lastHistoricalDateObj.getTime();
+    let bridgePoint = null;
+    let pointBeforeForecast = null;
+    if (needsBridgePoint && historicalPoints.length > 0) {
+        bridgePoint =
+            firstForecastDateObj &&
+                lastHistoricalDateObj &&
+                firstForecastDateObj.getTime() === lastHistoricalDateObj.getTime()
+                ? lastHistoricalPoint
+                : [...historicalPoints]
+                    .reverse()
+                    .find(p => firstForecastDateObj &&
+                    new Date(p.date).getTime() < firstForecastDateObj.getTime()) || lastHistoricalPoint;
+        if (firstForecastDateObj) {
+            pointBeforeForecast =
+                historicalPoints.findLast(p => new Date(p.date).getTime() < firstForecastDateObj.getTime()) ?? null;
+        }
+    }
+    return clonedData.map(point => {
+        const newPoint = { ...point };
+        if (hasGap &&
+            point.date === lastHistoricalDate &&
+            lastHistoricalValue !== undefined) {
+            newPoint[bandKey] = [lastHistoricalValue, lastHistoricalValue];
+        }
+        const isBridgePointDate = needsBridgePoint &&
+            bridgePoint &&
+            bridgePoint.historical !== undefined &&
+            point.date === bridgePoint.date;
+        const isPointBeforeForecast = needsBridgePoint &&
+            pointBeforeForecast &&
+            pointBeforeForecast.historical !== undefined &&
+            point.date === pointBeforeForecast.date;
+        const isAlsoForecastDate = forecastDatesSet.has(point.date);
+        if (isPointBeforeForecast && !isAlsoForecastDate) {
+            newPoint[bandKey] = [
+                pointBeforeForecast.historical,
+                pointBeforeForecast.historical,
+            ];
+        }
+        else if (isBridgePointDate && !isAlsoForecastDate) {
+            newPoint[bandKey] = [
+                bridgePoint.historical,
+                bridgePoint.historical,
+            ];
+        }
+        if (forecastDatesSet.has(point.date)) {
+            const quantileIndex = dateToQuantileIndex.get(point.date);
+            if (quantileIndex !== undefined) {
+                const bandValues = originalBandByDate.get(point.date);
+                if (bandValues) {
+                    const isBridgePointDateForecast = needsBridgePoint &&
+                        bridgePoint &&
+                        point.date === bridgePoint.date &&
+                        bridgePoint.historical !== undefined;
+                    if (isBridgePointDateForecast && quantileIndex === 0) {
+                        newPoint[bandKey] = [
+                            bridgePoint.historical,
+                            bandValues[1],
+                        ];
+                    }
+                    else {
+                        newPoint[bandKey] = bandValues;
+                    }
+                }
+                else {
+                    delete newPoint[bandKey];
+                }
+            }
+        }
+        return newPoint;
+    });
+}
+
+export { applyQuantileBandConeToChartData };

package/dist/esm/components/ui/Chart/tools/chartPlotGeometry.js

@@ -0,0 +1,65 @@
+/**
+ * Shared Recharts plot / margin math (DOM-agnostic except measurement entry points).
+ * Keeps BaseChartWrapper tooltip clamp and ChartAreaInteractive brush in sync.
+ */
+const DEFAULT_CHART_MARGIN = {
+    top: 5,
+    right: 5,
+    bottom: 5,
+    left: 5,
+};
+function resolveChartMargin(margin) {
+    return {
+        top: margin?.top ?? DEFAULT_CHART_MARGIN.top,
+        right: margin?.right ?? DEFAULT_CHART_MARGIN.right,
+        bottom: margin?.bottom ?? DEFAULT_CHART_MARGIN.bottom,
+        left: margin?.left ?? DEFAULT_CHART_MARGIN.left,
+    };
+}
+/** Plot box inside `.recharts-wrapper` (Recharts cartesian convention). */
+function getPlotViewBox(wrapper, m) {
+    const w = wrapper.clientWidth;
+    const h = wrapper.clientHeight;
+    return {
+        x: m.left,
+        y: m.top,
+        width: Math.max(0, w - m.left - m.right),
+        height: Math.max(0, h - m.top - m.bottom),
+    };
+}
+const GRID_BOUNDS_MIN_PX = 2;
+/**
+ * Plot area in `host` local px: prefer painted `.recharts-cartesian-grid`, else
+ * last `.recharts-wrapper` + margins. One `hostRect` read; grid/wrapper rects as needed.
+ */
+function measureHostRelativePlotRect(host, margin) {
+    const hostRect = host.getBoundingClientRect();
+    const grid = host.querySelector('.recharts-cartesian-grid');
+    if (grid) {
+        const gr = grid.getBoundingClientRect();
+        if (gr.width > GRID_BOUNDS_MIN_PX && gr.height > GRID_BOUNDS_MIN_PX) {
+            return {
+                left: gr.left - hostRect.left,
+                top: gr.top - hostRect.top,
+                width: gr.width,
+                height: gr.height,
+            };
+        }
+    }
+    const wrappers = host.querySelectorAll('.recharts-wrapper');
+    const wrapper = wrappers[wrappers.length - 1];
+    if (!(wrapper instanceof HTMLElement))
+        return null;
+    const vb = getPlotViewBox(wrapper, margin);
+    if (vb.width <= 0 || vb.height <= 0)
+        return null;
+    const wrapRect = wrapper.getBoundingClientRect();
+    return {
+        left: wrapRect.left - hostRect.left + vb.x,
+        top: wrapRect.top - hostRect.top + vb.y,
+        width: vb.width,
+        height: vb.height,
+    };
+}
+
+export { DEFAULT_CHART_MARGIN, getPlotViewBox, measureHostRelativePlotRect, resolveChartMargin };

package/dist/esm/components/ui/ChartAreaInteractive/ChartAreaInteractive.helpers.js

@@ -6,6 +6,30 @@ const timeRangeToMonths = {
     '5y': 60,
     All: 12,
 };
+const DRAG_TIME_RANGE_PREFIX = '__drag:';
+function encodeDragTimeRange(a, b) {
+    const t0 = Math.min(a.getTime(), b.getTime());
+    const t1 = Math.max(a.getTime(), b.getTime());
+    return `${DRAG_TIME_RANGE_PREFIX}${t0},${t1}`;
+}
+function parseDragTimeRange(s) {
+    if (!s.startsWith(DRAG_TIME_RANGE_PREFIX))
+        return null;
+    const body = s.slice(DRAG_TIME_RANGE_PREFIX.length);
+    const comma = body.indexOf(',');
+    if (comma === -1)
+        return null;
+    const a = Number(body.slice(0, comma));
+    const b = Number(body.slice(comma + 1));
+    if (!Number.isFinite(a) || !Number.isFinite(b))
+        return null;
+    const t0 = Math.min(a, b);
+    const t1 = Math.max(a, b);
+    return { start: new Date(t0), end: new Date(t1) };
+}
+function isTimeRangePreset(s) {
+    return Object.prototype.hasOwnProperty.call(timeRangeToMonths, s);
+}
 function isPlottableNumber(value) {
     return typeof value === 'number' && Number.isFinite(value);
 }
@@ -76,8 +100,20 @@ function computeLatestPlottableDate(data, options) {
     return latest;
 }
 const filterDataForTimeRange = (data, currentTimeRange, options) => {
+    const dragRange = parseDragTimeRange(currentTimeRange);
+    if (dragRange) {
+        const { start, end } = dragRange;
+        return data.filter(item => {
+            if (!item.date)
+                return false;
+            const d = new Date(item.date);
+            return d >= start && d <= end;
+        });
+    }
     if (currentTimeRange === 'All')
         return data;
+    if (!isTimeRangePreset(currentTimeRange))
+        return data;
     const latestDate = computeLatestPlottableDate(data, options);
     // Pre-compute start date based on latest date in data
     let startDate = null;
@@ -112,4 +148,4 @@ const longDateFormatter = (value) => {
     });
 };
 
-export { filterDataForTimeRange, longDateFormatter, shortDateFormatter };
+export { DRAG_TIME_RANGE_PREFIX, encodeDragTimeRange, filterDataForTimeRange, isTimeRangePreset, longDateFormatter, parseDragTimeRange, shortDateFormatter };

package/dist/esm/components/ui/ChartAreaInteractive/ChartAreaInteractive.js

@@ -8,6 +8,7 @@ import { ensureChartForecastBridge } from '../../../utils/chartConnectionPoint.j
 import { CHART_MARGINS } from './ChartAreaInteractive.constants.js';
 import { filterDataForTimeRange, shortDateFormatter, longDateFormatter } from './ChartAreaInteractive.helpers.js';
 import S from './ChartAreaInteractive.styl.js';
+import { TimeRangeBrushHost } from './TimeRangeBrushLayer.js';
 import { PinOverlay } from './overlays/PinOverlay/PinOverlay.js';
 import { IntervalsOverlay } from './overlays/IntervalsOverlay/IntervalsOverlay.js';
 import { ThresholdsOverlay } from './overlays/ThresholdsOverlay/ThresholdsOverlay.js';
@@ -15,7 +16,7 @@ import { ThresholdsOverlay } from './overlays/ThresholdsOverlay/ThresholdsOverla
 const chartConfig = {
 // Chart now supports light/dark themes with dynamic colors
 };
-function ChartAreaInteractive({ className, chartContainerClassName, legendClassName, xAxisClassName, yAxisClassName, timeRange, onTimeRangeChange, pinMonth, onPinMonthChange, onPreviewMonthChange, chartData, forecastData, error, loading = false, isDarkTheme = false, footerActions, mode, selectedForecast, upperQuantiles, lowerQuantiles, selectedLowerQuantile, selectedUpperQuantile, onLowerQuantileChange, onUpperQuantileChange, lowerThreshold, upperThreshold, onLowerThresholdChange, onUpperThresholdChange, discreteThresholdValues, headerActions, excludeLegendIds, loadingAnalyses, onLegendClick, onAnalysisSelect, disableTimeRangeSelector, forecastLineStyle = 'dashed', selectedAnalysisId, chartRenderId, toggleLegendSeries, ensureAnalysisSeriesVisible, overlayForecastData = {}, hiddenSeries, disableForecastHistoricalBridge, ...restProps }) {
+function ChartAreaInteractive({ className, chartContainerClassName, legendClassName, xAxisClassName, yAxisClassName, timeRange, onTimeRangeChange, pinMonth, onPinMonthChange, onPreviewMonthChange, chartData, forecastData, error, loading = false, isDarkTheme = false, footerActions, mode, selectedForecast, upperQuantiles, lowerQuantiles, selectedLowerQuantile, selectedUpperQuantile, onLowerQuantileChange, onUpperQuantileChange, lowerThreshold, upperThreshold, onLowerThresholdChange, onUpperThresholdChange, discreteThresholdValues, headerActions, excludeLegendIds, loadingAnalyses, onLegendClick, onAnalysisSelect, disableTimeRangeSelector, forecastLineStyle = 'dashed', selectedAnalysisId, chartRenderId, toggleLegendSeries, ensureAnalysisSeriesVisible, overlayForecastData = {}, hiddenSeries, disableForecastHistoricalBridge, overlayElements: overlayElementsProp, ...restProps }) {
     const seriesHidden = hiddenSeries ?? new Set();
     const hiddenSeriesRef = useRef(seriesHidden);
     const prevSelectedAnalysisIdRef = useRef(selectedAnalysisId);
@@ -90,9 +91,11 @@ function ChartAreaInteractive({ className, chartContainerClassName, legendClassN
         loadingMessage,
         excludeLegendIds,
         forecastLineStyle,
+        overlayElements: overlayElementsProp,
         // loadingAnalyses,
         ...restProps,
     };
+    const brushEnabled = !disableTimeRangeSelector && !loading && bridgedChartData.length > 1;
     const renderChart = () => {
         const overlayClassName = cn(chartContainerClassName);
         switch (mode) {
@@ -106,7 +109,7 @@ function ChartAreaInteractive({ className, chartContainerClassName, legendClassN
                 return (jsx(BaseChartWrapper, { ...baseChartProps, chartClassName: cn(S.chartContainer, chartContainerClassName) }));
         }
     };
-    return (jsxs(InteractionOverlay, { className: cn(className, loading && S.loading), children: [(!disableTimeRangeSelector || headerActions) && (jsxs("div", { className: S.chartHeaderContainer, children: [!disableTimeRangeSelector && (jsx(TimeRangeControls, { timeRange: timeRange, onTimeRangeChange: onTimeRangeChange, loading: loading })), headerActions] })), renderChart()] }));
+    return (jsxs(InteractionOverlay, { className: cn(className, loading && S.loading), children: [(!disableTimeRangeSelector || headerActions) && (jsxs("div", { className: S.chartHeaderContainer, children: [!disableTimeRangeSelector && (jsx(TimeRangeControls, { timeRange: timeRange, onTimeRangeChange: onTimeRangeChange, loading: loading })), headerActions] })), jsx(TimeRangeBrushHost, { chartData: bridgedChartData, onTimeRangeChange: onTimeRangeChange, enabled: brushEnabled, layoutKey: chartRenderId ?? null, children: renderChart() })] }));
 }
 
 export { ChartAreaInteractive, chartConfig };