@sybilion/uilib 1.3.0 → 1.3.2

package/src/components/ui/ChartAreaInteractive/overlays/useQuantileBands.ts

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 
 import type { QuantileBandConfig } from '#uilib/components/ui/Chart/chartForecastVisualization.types';
+import { applyQuantileBandConeToChartData } from '#uilib/components/ui/Chart/quantileBandConeChartData';
 import { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
 import type { ForecastData } from '#uilib/types/forecast-data';
 
@@ -45,126 +46,17 @@ export function useQuantileBands({
     const allQuantilesData = forecastDataForSelected.allQuantiles;
     const clonedData = [...chartData];
 
-    // Get forecast dates to map quantile array indices correctly
     const forecastDates = forecastDataForSelected.dates || [];
     const forecastDatesSet = new Set(forecastDates);
 
-    // Find the last historical point for connection
-    const historicalPoints = clonedData.filter(
-      point => point.historical !== undefined,
-    );
-    const lastHistoricalPoint =
-      historicalPoints.length > 0
-        ? historicalPoints[historicalPoints.length - 1]
-        : null;
-    const lastHistoricalDate = lastHistoricalPoint?.date;
-    const lastHistoricalValue = lastHistoricalPoint?.historical;
-
-    // Get first forecast date
-    const firstForecastDate = forecastDates[0];
-    const firstForecastDateObj = firstForecastDate
-      ? new Date(firstForecastDate)
-      : null;
-    const lastHistoricalDateObj = lastHistoricalDate
-      ? new Date(lastHistoricalDate)
-      : null;
-
-    // Check if there's a gap between historical and forecast data (forecast starts after historical)
-    const hasGap =
-      lastHistoricalDate &&
-      firstForecastDate &&
-      lastHistoricalValue !== undefined &&
-      firstForecastDateObj &&
-      lastHistoricalDateObj &&
-      firstForecastDateObj.getTime() > lastHistoricalDateObj.getTime();
-
-    // Check if forecast starts before or at last historical point (need bridge point)
-    const needsBridgePoint =
-      lastHistoricalDate &&
-      firstForecastDate &&
-      lastHistoricalValue !== undefined &&
-      firstForecastDateObj &&
-      lastHistoricalDateObj &&
-      firstForecastDateObj.getTime() <= lastHistoricalDateObj.getTime();
-
-    // Find bridge point when forecast starts before or at last historical point
-    let bridgePoint = null;
-    let pointBeforeForecast = null;
-    if (needsBridgePoint && historicalPoints.length > 0) {
-      // Find the last historical point before or at the first forecast date
-      // If dates are equal, use lastHistoricalPoint; otherwise find the point before
-      bridgePoint =
-        firstForecastDateObj &&
-        lastHistoricalDateObj &&
-        firstForecastDateObj.getTime() === lastHistoricalDateObj.getTime()
-          ? lastHistoricalPoint
-          : [...historicalPoints]
-              .reverse()
-              .find(
-                p =>
-                  firstForecastDateObj &&
-                  new Date(p.date).getTime() < firstForecastDateObj.getTime(),
-              ) || lastHistoricalPoint;
-
-      // Find the actual point BEFORE the first forecast date for connection
-      if (firstForecastDateObj) {
-        pointBeforeForecast = [...historicalPoints].findLast(
-          p => new Date(p.date).getTime() < firstForecastDateObj.getTime(),
-        );
-      }
-    }
-
-    // Create a map from date to quantile array index
     const dateToQuantileIndex = new Map<string, number>();
     forecastDates.forEach((date, index) => {
       dateToQuantileIndex.set(date, index);
     });
 
-    const result = clonedData.map(point => {
+    const withRawBands = clonedData.map(point => {
       const newPoint = { ...point };
 
-      // If there's a gap and this is the last historical point, add band data for connection
-      if (
-        hasGap &&
-        point.date === lastHistoricalDate &&
-        lastHistoricalValue !== undefined
-      ) {
-        // Set zero-width band at the last historical value for visual connection
-        newPoint[bandKey] = [lastHistoricalValue, lastHistoricalValue] as [
-          number,
-          number,
-        ];
-      }
-
-      // If forecast starts before or at last historical point, add bridge point connection
-      // Set connection band at the point BEFORE the first forecast date (if exists)
-      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);
-
-      // Set zero-width connection band at the point BEFORE forecast starts
-      if (isPointBeforeForecast && !isAlsoForecastDate) {
-        newPoint[bandKey] = [
-          pointBeforeForecast.historical,
-          pointBeforeForecast.historical,
-        ] as [number, number];
-      } else if (isBridgePointDate && !isAlsoForecastDate) {
-        // Fallback: if no point before forecast, use bridge point
-        newPoint[bandKey] = [
-          bridgePoint.historical,
-          bridgePoint.historical,
-        ] as [number, number];
-      }
-
-      // Only update band data for forecast dates
       if (forecastDatesSet.has(point.date)) {
         const quantileIndex = dateToQuantileIndex.get(point.date);
 
@@ -176,35 +68,17 @@ export function useQuantileBands({
           );
 
           if (bandValues) {
-            // If this is also the bridge point (forecast starts at same date as last historical),
-            // start the band from the historical value for smooth connection
-            const isBridgePointDate =
-              needsBridgePoint &&
-              bridgePoint &&
-              point.date === bridgePoint.date &&
-              bridgePoint.historical !== undefined;
-
-            if (isBridgePointDate && quantileIndex === 0) {
-              // Start from historical value, expand to forecast upper bound
-              newPoint[bandKey] = [bridgePoint.historical, bandValues[1]] as [
-                number,
-                number,
-              ];
-            } else {
-              newPoint[bandKey] = bandValues;
-            }
+            newPoint[bandKey] = bandValues;
           } else {
-            // Remove band data if values don't exist
             delete newPoint[bandKey];
           }
         }
       }
-      // For non-forecast dates, preserve existing band data if it exists
-      // This ensures continuity of the band visualization
 
       return newPoint;
     });
-    return result;
+
+    return applyQuantileBandConeToChartData(withRawBands, bandKey);
   }, [chartData, selectedForecastId, forecastData, bandKey, getBandValues]);
 
   const quantileBands: QuantileBandConfig[] = useMemo(() => {

package/src/declarations.d.ts

@@ -1,4 +1,6 @@
 declare const VERSION: string;
+/** Base URL path for docs Router (empty at site root; e.g. `/uilib` on GitHub Pages project site). */
+declare const DOCS_ROUTER_BASENAME: string;
 
 declare module '*.png';
 declare module '*.json';

package/src/docs/config/webpack.config.js

@@ -22,9 +22,27 @@ const pkg = require('../../../package.json');
 const themeStyl = pathResolve(paths.src, 'theme.styl');
 const logoSvgPath = pathResolve(paths.assets, 'logo.svg');
 
+/** GitHub Pages project sites live at /<repo>/; set PUBLIC_PATH=/repo-name/ for production deploy. */
+function normalizePublicPath(raw) {
+  const v = (raw && String(raw).trim()) || '/';
+  if (v === '/') {
+    return '/';
+  }
+  const withLeading = v.startsWith('/') ? v : `/${v}`;
+  return withLeading.endsWith('/') ? withLeading : `${withLeading}/`;
+}
+
+function routerBasenameFromPublicPath(publicPath) {
+  if (publicPath === '/') {
+    return '';
+  }
+  return publicPath.replace(/\/$/, '');
+}
+
 export default (env, argv) => {
   const isDev = argv.mode === 'development';
-  const analyticsPath = `${paths.assets}/analytics.html`;
+  const publicPath = normalizePublicPath(process.env.PUBLIC_PATH);
+  const docsRouterBasename = routerBasenameFromPublicPath(publicPath);
   const alias = {
     '#uilib': paths.src,
     uilib: paths.src,
@@ -38,6 +56,7 @@ export default (env, argv) => {
     entry: [paths.docs],
     output: {
       path: paths.build,
+      publicPath,
     },
 
     resolve: {
@@ -152,6 +171,7 @@ export default (env, argv) => {
       new webpack.DefinePlugin({
         isDEV: JSON.stringify(isDev),
         VERSION: JSON.stringify(pkg.version),
+        DOCS_ROUTER_BASENAME: JSON.stringify(docsRouterBasename),
       }),
       new CopyWebpackPlugin({
         patterns: [
@@ -174,7 +194,7 @@ export default (env, argv) => {
 
       new HtmlWebpackPlugin({
         lang: 'en',
-        baseUrl: '/',
+        baseUrl: publicPath,
         filename: 'index.html',
         template: `${paths.assets}/index.html`,
         minify: isDev
@@ -221,6 +241,9 @@ export default (env, argv) => {
         hot: true,
         port: process.env.PORT || 8181,
         historyApiFallback: true,
+        ...(publicPath !== '/' && {
+          devMiddleware: { publicPath },
+        }),
       },
     });
   }

package/src/docs/index.tsx

@@ -10,7 +10,7 @@ const elem = document.getElementById('app-root') as HTMLElement;
 const root = createRoot(elem);
 
 root.render(
-  <BrowserRouter>
+  <BrowserRouter basename={DOCS_ROUTER_BASENAME || undefined}>
     <ThemeProvider activeColor={DEFAULT_THEME_ACTIVE_COLOR}>
       <App />
     </ThemeProvider>

package/src/docs/pages/LightweightChartPage.styl

@@ -0,0 +1,18 @@
+.sectionTitle
+  font-size var(--font-size-heading-5, 14px)
+  font-weight 600
+  margin 0 0 8px
+
+.caption
+  margin 0 0 10px
+  color var(--muted-foreground, #71717a)
+  font-size var(--font-size-body-5, 12px)
+
+.demo
+  width 100%
+  max-width 56rem
+
+.stack
+  display flex
+  flex-direction column
+  gap 28px

package/src/docs/pages/LightweightChartPage.styl.d.ts

@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'caption': string;
+  'demo': string;
+  'sectionTitle': string;
+  'stack': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/docs/pages/LightweightChartPage.tsx

@@ -0,0 +1,195 @@
+import { useMemo } from 'react';
+
+import { LightweightForecastChart } from '#uilib/components/ui/Chart';
+import type { QuantileBandConfig } from '#uilib/components/ui/Chart/chartForecastVisualization.types';
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import type { ForecastItemData } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { useTheme } from '#uilib/contexts/theme-context';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+import S from './LightweightChartPage.styl';
+
+const DEMO_FORECAST_ID = 1;
+
+const DEMO_FORECAST_DATES = ['2023-06-01', '2023-07-01', '2023-08-01'] as const;
+
+const DEMO_OVERLAY_QUANTILES = {
+  '0.1': [12.5, 13.2, 14],
+  '0.25': [13, 13.6, 14.5],
+  '0.5': [13.5, 14, 15],
+  '0.75': [14, 14.5, 15.5],
+  '0.9': [14.5, 15, 16.2],
+} as const;
+
+const DEMO_BASE: ChartDataPoint[] = [
+  { date: '2021-01-01', historical: 6 },
+  { date: '2021-02-01', historical: 8 },
+  { date: '2021-03-01', historical: 7 },
+  { date: '2021-04-01', historical: 10 },
+  { date: '2021-05-01', historical: 9 },
+  { date: '2021-06-01', historical: 10 },
+  { date: '2021-07-01', historical: 11 },
+  { date: '2021-08-01', historical: 10 },
+  { date: '2021-09-01', historical: 12 },
+  { date: '2021-10-01', historical: 11 },
+  { date: '2021-11-01', historical: 13 },
+  { date: '2021-12-01', historical: 12 },
+  { date: '2022-01-01', historical: 8 },
+  { date: '2022-02-01', historical: 10 },
+  { date: '2022-03-01', historical: 9 },
+  { date: '2022-04-01', historical: 12 },
+  { date: '2022-05-01', historical: 11 },
+  { date: '2022-06-01', historical: 12 },
+  { date: '2022-07-01', historical: 13 },
+  { date: '2022-08-01', historical: 12 },
+  { date: '2022-09-01', historical: 14 },
+  { date: '2022-10-01', historical: 13 },
+  { date: '2022-11-01', historical: 15 },
+  { date: '2022-12-01', historical: 14 },
+  { date: '2023-01-01', historical: 10 },
+  { date: '2023-02-01', historical: 12 },
+  { date: '2023-03-01', historical: 11 },
+  { date: '2023-04-01', historical: 14 },
+  { date: '2023-05-01', historical: 13 },
+  { date: '2023-06-01', [`forecast_${DEMO_FORECAST_ID}`]: 13.5 },
+  { date: '2023-07-01', [`forecast_${DEMO_FORECAST_ID}`]: 14 },
+  { date: '2023-08-01', [`forecast_${DEMO_FORECAST_ID}`]: 15 },
+];
+
+const DEMO_FORECAST_ITEMS: ForecastItemData[] = [
+  { id: DEMO_FORECAST_ID, name: 'My custom forecast' },
+];
+
+function withDemoBands(data: ChartDataPoint[]): ChartDataPoint[] {
+  return data.map(row => {
+    const idx = (DEMO_FORECAST_DATES as readonly string[]).indexOf(row.date);
+    if (idx === -1) return row;
+    const lowerWide = DEMO_OVERLAY_QUANTILES['0.1'][idx];
+    const upperWide = DEMO_OVERLAY_QUANTILES['0.9'][idx];
+    const lowerMid = DEMO_OVERLAY_QUANTILES['0.25'][idx];
+    const upperMid = DEMO_OVERLAY_QUANTILES['0.75'][idx];
+    return {
+      ...row,
+      demo_band_wide: [lowerWide, upperWide],
+      demo_band_mid: [lowerMid, upperMid],
+    };
+  });
+}
+
+const DEMO_QUANTILE_BANDS: QuantileBandConfig[] = [
+  {
+    key: 'demo_band_wide',
+    quantiles: ['0.1', '0.9'],
+    opacity: 0.35,
+    name: 'P10–P90',
+    type: 'monotone',
+    color: 'rgba(100,190,220,0.35)',
+    strokeWidth: 0,
+  },
+  {
+    key: 'demo_band_mid',
+    quantiles: ['0.25', '0.75'],
+    opacity: 0.45,
+    name: 'P25–P75',
+    type: 'monotone',
+    color: 'rgba(65,165,238,0.45)',
+    strokeWidth: 0,
+  },
+];
+
+export default function LightweightChartPage() {
+  const { isDarkMode } = useTheme();
+  const historicalOnlyData = useMemo(
+    () => DEMO_BASE.filter(r => r.date <= '2023-05-01'),
+    [],
+  );
+  const bandsData = useMemo(() => withDemoBands(DEMO_BASE), []);
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'LightweightForecastChart' }]}
+        title="LightweightForecastChart"
+        subheader={
+          <>
+            TradingView{' '}
+            <a href="https://www.tradingview.com/lightweight-charts/">
+              Lightweight Charts
+            </a>{' '}
+            with historical + forecast lines, quantile fills, tooltip, legend,
+            and shared <code>ensureChartForecastBridge</code> preprocessing.
+          </>
+        }
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <div className={S.stack}>
+          <div>
+            <h3 className={S.sectionTitle}>Historical line</h3>
+            <p className={S.caption}>Subset of demo months through May 2023.</p>
+            <div className={S.demo}>
+              <LightweightForecastChart
+                chartData={historicalOnlyData}
+                forecastData={[]}
+                isDarkTheme={isDarkMode}
+                height={320}
+                showLegend={false}
+                formatNumber={v =>
+                  Number.isFinite(v) ? v.toFixed(2) : String(v)
+                }
+              />
+            </div>
+          </div>
+
+          <div>
+            <h3 className={S.sectionTitle}>
+              Historical + dashed forecast + bridge helper
+            </h3>
+            <p className={S.caption}>
+              Rows use raw forecast anchors; the chart applies{' '}
+              <code>ensureChartForecastBridge</code> internally (same defaults
+              as <code>ChartAreaInteractive</code>).
+            </p>
+            <div className={S.demo}>
+              <LightweightForecastChart
+                chartData={DEMO_BASE}
+                forecastData={DEMO_FORECAST_ITEMS}
+                isDarkTheme={isDarkMode}
+                height={320}
+                forecastLineStyle="dashed"
+                formatNumber={v =>
+                  Number.isFinite(v) ? v.toFixed(2) : String(v)
+                }
+              />
+            </div>
+          </div>
+
+          <div>
+            <h3 className={S.sectionTitle}>
+              Forecast lines + stacked quantile bands
+            </h3>
+            <p className={S.caption}>
+              Each band key maps to tuples on forecast months; overlays from{' '}
+              <code>ChartAreaInteractive</code> are intentionally omitted here.
+            </p>
+            <div className={S.demo}>
+              <LightweightForecastChart
+                chartData={bandsData}
+                forecastData={DEMO_FORECAST_ITEMS}
+                quantileBands={DEMO_QUANTILE_BANDS}
+                isDarkTheme={isDarkMode}
+                height={360}
+                forecastLineStyle="dashed"
+                formatNumber={v =>
+                  Number.isFinite(v) ? v.toFixed(2) : String(v)
+                }
+              />
+            </div>
+          </div>
+        </div>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/registry.ts

@@ -91,6 +91,12 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Charts',
     load: () => import('./pages/ChartAreaInteractivePage'),
   },
+  {
+    slug: 'lightweight-forecast-chart',
+    title: 'LightweightForecastChart',
+    section: 'Charts',
+    load: () => import('./pages/LightweightChartPage'),
+  },
   {
     slug: 'chat',
     title: 'Chat',