@sybilion/uilib 1.2.26 → 1.3.1

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/components/ui/Page/PageColumns/PageColumns.tsx

@@ -8,7 +8,7 @@ export function PageColumns({
   className,
 }: {
   columns: React.ReactNode[];
-  fill: 'left' | 'right' | 'all';
+  fill?: 'left' | 'right' | 'all';
   className?: string;
 }) {
   return (

package/src/components/ui/TimeRangeControls/TimeRangeControls.tsx

@@ -14,22 +14,25 @@ import {
 
 import { TIME_RANGES } from './TimeRangeControls.constants';
 import S from './TimeRangeControls.styl';
-import { TimeRange } from './TimeRangeControls.types';
+
+function toggleValueForTimeRange(timeRange: string): string {
+  return (TIME_RANGES as readonly string[]).includes(timeRange)
+    ? timeRange
+    : '';
+}
+
+export type TimeRangeControlsProps = {
+  timeRange: string;
+  onTimeRangeChange: (range: string) => void;
+  loading?: boolean;
+};
 
 export const TimeRangeControls = memo(
-  ({
-    timeRange,
-    onTimeRangeChange,
-    loading,
-  }: {
-    timeRange: TimeRange;
-    onTimeRangeChange: (range: string) => void;
-    loading?: boolean;
-  }) => (
+  ({ timeRange, onTimeRangeChange, loading }: TimeRangeControlsProps) => (
     <div className={S.timeRangeContainer}>
       <ToggleGroup
         type="single"
-        value={timeRange}
+        value={toggleValueForTimeRange(timeRange)}
         onValueChange={onTimeRangeChange}
         variant="outline"
         disabled={loading}
@@ -56,13 +59,9 @@ export const TimeRangeSelect = memo(
     timeRange,
     onTimeRangeChange,
     loading,
-  }: {
-    timeRange: TimeRange;
-    onTimeRangeChange: (range: string) => void;
-    loading: boolean;
-  }) => (
+  }: TimeRangeControlsProps & { loading: boolean }) => (
     <Select
-      value={timeRange}
+      value={toggleValueForTimeRange(timeRange) || undefined}
       onValueChange={onTimeRangeChange}
       disabled={loading}
     >

package/src/components/{widgets/DriverMap/MapBackground/MapBackground.styl → ui/WorldMap/WorldMap.styl}

@@ -1,8 +1,6 @@
 @import './mapAspect.mixin.styl'
 
-// Map is <img src> from bundled URL (data URL or file). Avoids CSS url() resolving to broken relative paths in consumers.
-.mapBackground
-  position absolute
+.worldMap
   display block
   width 100%
   height 100%

package/src/components/{widgets/DriverMap/MapBackground/MapBackground.styl.d.ts → ui/WorldMap/WorldMap.styl.d.ts}

@@ -1,7 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  'mapBackground': string;
+  'worldMap': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

package/src/components/ui/WorldMap/WorldMap.tsx

@@ -0,0 +1,22 @@
+import cn from 'classnames';
+
+import S from './WorldMap.styl';
+import mapBgUrl from './map.svg';
+
+export type WorldMapProps = {
+  className?: string;
+};
+
+export function WorldMap({ className }: WorldMapProps) {
+  const src = mapBgUrl as unknown as string;
+
+  return (
+    <img
+      alt=""
+      className={cn(S.worldMap, className)}
+      decoding="async"
+      draggable={false}
+      src={src}
+    />
+  );
+}

package/src/components/ui/WorldMap/index.ts

@@ -0,0 +1,2 @@
+export { WorldMap } from './WorldMap';
+export type { WorldMapProps } from './WorldMap';

package/src/components/widgets/DriverCard/DriverCard.styl

@@ -0,0 +1,169 @@
+@import '../../../lib/theme.styl';
+
+.root
+  width 100%
+  height auto
+  min-height 500px
+
+  @media (min-width 640px)
+    min-height 25rem
+
+  @media (min-width 768px)
+    min-height 31.25rem
+    // width 20rem
+
+.cardContent
+  display flex
+  flex-direction column
+  gap 0.5rem
+
+.noDriverSelected
+  color var(--muted-foreground)
+
+.driverHeader
+  display flex
+  flex-direction column
+  align-items flex-start
+  gap 0.75rem
+  padding-bottom 0.25rem
+
+.headerContent
+  flex-grow 1
+  display flex
+  flex-direction column
+  width 100%
+  gap 0.5rem
+
+.topHeader
+  display flex
+  align-items center
+  justify-content space-between
+  min-height 36px
+  margin-top -12px
+
+.categoryInfo
+  font-size 0.75rem
+  color var(--muted-foreground)
+  display flex
+  align-items center
+  gap 0.25rem
+
+.categoryIcon
+  height 0.75rem
+  width 0.75rem
+  color var(--muted-foreground)
+
+.categoryText
+  line-clamp(1)
+  overflow hidden
+  text-transform lowercase
+  &::first-letter
+    text-transform uppercase
+
+.driverTitle
+  font-weight 500
+  color var(--foreground)
+  font-size 1.1rem
+  line-height 1.4
+  user-select text
+
+  &.truncated
+    line-clamp(2)
+    overflow hidden
+    cursor help
+
+.regionDisplay
+  font-size 0.75rem
+  color var(--muted-foreground)
+
+.metricsSection
+  text-align left
+  margin-bottom 0.5rem
+
+.importanceScore
+  font-size 2.25rem
+  font-weight 400
+  color var(--foreground)
+  display flex
+  align-items center
+  line-height 1
+  height auto
+  user-select text
+
+.directionLagSection
+  display flex
+  align-items center
+  justify-content space-between
+
+.directionBadge
+  display flex
+  align-items center
+  gap 0.5rem
+
+.trendIcon
+  height 0.75rem
+  width 0.75rem
+
+.lagInfo
+  font-size 0.75rem
+  color var(--muted-foreground)
+
+.description
+  font-size 0.875rem
+  line-height 1.625
+  user-select text
+
+.skeletonContainer
+  display flex
+  flex-direction column
+  gap 1rem
+
+.skeletonGroup
+  display flex
+  flex-direction column
+  gap 0.5rem
+
+.skeletonItem
+  &.hxs
+    height 0.75rem
+  &.hs
+    height 1rem
+  &.hm
+    height 2rem
+  &.hl
+    height 8rem
+
+  &.w33
+    width 33.333333%
+  &.w50
+    width 50%
+  &.w75
+    width 75%
+  &.w80
+    width 80%
+  &.wFull
+    width 100%
+
+.tooltipContent
+  max-width 20rem
+  font-size 0.75rem
+
+.tooltipTitle
+  font-weight normal
+  font-family var(--font-family-body)
+
+.queueMessage
+  display flex
+  flex-direction column
+  align-items center
+  gap var(--p-4)
+  padding var(--p-8) var(--p-4)
+  color var(--muted-foreground)
+  font-size 0.875rem
+  line-height 1.5
+  text-align center
+
+  svg
+    flex-shrink 0
+    color var(--muted-foreground)
+    opacity 0.8

package/src/components/widgets/DriverCard/DriverCard.styl.d.ts

@@ -0,0 +1,40 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'cardContent': string;
+  'categoryIcon': string;
+  'categoryInfo': string;
+  'categoryText': string;
+  'description': string;
+  'directionBadge': string;
+  'directionLagSection': string;
+  'driverHeader': string;
+  'driverTitle': string;
+  'headerContent': string;
+  'hl': string;
+  'hm': string;
+  'hs': string;
+  'hxs': string;
+  'importanceScore': string;
+  'lagInfo': string;
+  'metricsSection': string;
+  'noDriverSelected': string;
+  'queueMessage': string;
+  'regionDisplay': string;
+  'root': string;
+  'skeletonContainer': string;
+  'skeletonGroup': string;
+  'skeletonItem': string;
+  'tooltipContent': string;
+  'tooltipTitle': string;
+  'topHeader': string;
+  'trendIcon': string;
+  'truncated': string;
+  'w33': string;
+  'w50': string;
+  'w75': string;
+  'w80': string;
+  'wFull': string;
+}
+export const cssExports: CssExports;
+export default cssExports;