@sybilion/uilib 1.2.26 → 1.3.0

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;

package/src/components/widgets/DriverCard/DriverCard.tsx

@@ -0,0 +1,219 @@
+import React, { useMemo } from 'react';
+
+import { CoffeeIcon, TrendDownIcon, TrendUpIcon } from '@phosphor-icons/react';
+
+import { Badge } from '../../ui/Badge';
+import { Card, CardContent } from '../../ui/Card';
+import { LabelWithId } from '../../ui/LabelWithId';
+import { Skeleton } from '../../ui/Skeleton';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/Tooltip';
+import { getCategoryIcon } from '../DriverMap/driverCategoryIcon';
+import type { DriverData } from '../DriverMap/driverMapGeography';
+import S from './DriverCard.styl';
+import { DriverPerformanceChart } from './DriverPerformanceChart';
+
+export interface DriverCardProps {
+  selectedDriver: DriverData | null;
+  isLoading: boolean;
+  inQueue?: boolean;
+  driverSelector?: React.ReactNode;
+}
+
+export function DriverCard({
+  selectedDriver,
+  isLoading,
+  inQueue = false,
+  driverSelector,
+}: DriverCardProps) {
+  const importanceDisplay = useMemo(() => {
+    if (!selectedDriver) return '';
+
+    let importance = 0;
+    if (
+      selectedDriver.rawImportance &&
+      typeof selectedDriver.rawImportance === 'object'
+    ) {
+      const importanceObj = selectedDriver.rawImportance as any;
+      if (importanceObj.overall && typeof importanceObj.overall === 'object') {
+        const overall = importanceObj.overall as any;
+        if (typeof overall.mean === 'number') {
+          importance = Math.round(overall.mean);
+        }
+      }
+    }
+
+    return importance > 0
+      ? `${importance}%`
+      : `${selectedDriver.importance.toFixed(1)}%`;
+  }, [selectedDriver]);
+
+  const regionDisplay = React.useMemo(() => {
+    if (!selectedDriver) return '';
+
+    // Check for src_region and tgt_region properties first
+    const driver = selectedDriver as any;
+    const srcRegion = driver.src_region;
+    const tgtRegion = driver.tgt_region;
+    const srcName = srcRegion?.name;
+    const tgtName = tgtRegion?.name;
+
+    // If both src_region and tgt_region have valid names
+    if (srcName && tgtName) {
+      // If source and target are the same, just show one
+      if (srcName === tgtName) {
+        return srcName;
+      }
+      return `${srcName} → ${tgtName}`;
+    }
+
+    // If only src_region has a valid name
+    if (srcName) {
+      if (srcName === 'World') {
+        return 'World';
+      }
+      return `${srcName} → World`;
+    }
+
+    // If only tgt_region has a valid name
+    if (tgtName) {
+      if (tgtName === 'World') {
+        return 'World';
+      }
+      return `World → ${tgtName}`;
+    }
+
+    if (selectedDriver.region.length === 1) return selectedDriver.region[0];
+
+    if (selectedDriver.region.length > 1) {
+      return (
+        selectedDriver.region
+          // .filter(region => region !== 'World')
+          .join(' → ')
+      );
+    }
+
+    // Fallback to "World" when no region information is available
+    return 'World';
+  }, [selectedDriver]);
+
+  if (inQueue) {
+    return (
+      <Card className={S.root}>
+        <CardContent centered fullHeight noScroll>
+          <div className={S.queueMessage}>
+            <CoffeeIcon size={24} weight="regular" />
+            <div>
+              <p>Retrieving drivers data.</p>
+              <p>This may take a while.</p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Card className={S.root}>
+        <CardContent noScroll>
+          <div className={S.skeletonContainer}>
+            <Skeleton className={`${S.skeletonItem} ${S.hs} ${S.w75}`} />
+            <Skeleton className={`${S.skeletonItem} ${S.hm} ${S.w50}`} />
+            <Skeleton className={`${S.skeletonItem} ${S.hs} ${S.w33}`} />
+            <div className={S.skeletonGroup}>
+              <Skeleton className={`${S.skeletonItem} ${S.hs} ${S.wFull}`} />
+              <Skeleton className={`${S.skeletonItem} ${S.hs} ${S.w75}`} />
+              <Skeleton className={`${S.skeletonItem} ${S.hs} ${S.w50}`} />
+            </div>
+            <Skeleton className={`${S.skeletonItem} ${S.hl} ${S.wFull}`} />
+            <div className={S.skeletonGroup}>
+              <Skeleton className={`${S.skeletonItem} ${S.hs} ${S.wFull}`} />
+              <Skeleton className={`${S.skeletonItem} ${S.hs} ${S.w75}`} />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!selectedDriver) {
+    return (
+      <Card className={S.root}>
+        <CardContent centered fullHeight noScroll>
+          <span className={S.noDriverSelected}>No driver selected</span>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const { id, name, category, direction, lag, summary } = selectedDriver;
+  const directionText = direction > 0 ? 'Positive' : 'Negative';
+  const DirectionIcon = direction > 0 ? TrendUpIcon : TrendDownIcon;
+
+  const nameElem = (
+    <h4 className={`${S.driverTitle} ${S.truncated}`}>{name}</h4>
+  );
+
+  return (
+    <Card className={S.root} paddingSize="l">
+      <CardContent noScroll>
+        <div className={S.cardContent}>
+          {/* Driver Header */}
+          <div className={S.driverHeader}>
+            <div className={S.headerContent}>
+              <div className={S.topHeader}>
+                <p className={S.categoryInfo}>
+                  <span className={S.categoryIcon}>
+                    {getCategoryIcon(category)}
+                  </span>
+                  <span className={S.categoryText}>{category}</span>
+                </p>
+
+                {driverSelector}
+              </div>
+              {name.length > 60 ? (
+                <Tooltip>
+                  <LabelWithId
+                    id={id}
+                    label={<TooltipTrigger asChild>{nameElem}</TooltipTrigger>}
+                  />
+                  <TooltipContent side="left" className={S.tooltipContent}>
+                    <div className={S.tooltipTitle}>{name}</div>
+                  </TooltipContent>
+                </Tooltip>
+              ) : (
+                <LabelWithId id={id} label={nameElem} />
+              )}
+
+              <p className={S.regionDisplay}>{regionDisplay}</p>
+            </div>
+          </div>
+
+          {/* Key Metrics */}
+          <div className={S.metricsSection}>
+            <div className={S.importanceScore}>{importanceDisplay}</div>
+          </div>
+
+          {/* Direction and Lag Information */}
+          <div className={S.directionLagSection}>
+            <Badge
+              variant={direction > 0 ? 'green' : 'red'}
+              className={S.directionBadge}
+            >
+              <DirectionIcon className={S.trendIcon} />
+              {directionText} correlation
+            </Badge>
+
+            <span className={S.lagInfo}>Lag: {lag}</span>
+          </div>
+
+          {/* Driver Performance Chart */}
+          <DriverPerformanceChart driver={selectedDriver} />
+
+          {/* Description */}
+          <p className={S.description}>{summary ?? ''}</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,43 @@
+// Driver performance chart (normalized series)
+.driverChartContainer
+  width 100%
+  position relative
+
+  svg
+    overflow visible
+
+.chartContainer
+  height 214px
+  width 100%
+  margin-left -0.5rem
+  padding var(--p-4) 0
+
+.chartContainerDisabled
+  opacity 0.1
+
+.noDataMessage
+  position absolute
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+  font-size 0.875rem
+  font-weight 500
+  color var(--foreground)
+  pointer-events none
+  z-index 10
+
+.chartTooltip
+  background-color var(--popover)
+  border 1px solid var(--border)
+  border-radius 0.5rem
+  padding 0.75rem
+  box-shadow 0 10px 15px -3px rgba(0, 0, 0, 0.1)
+
+.tooltipDate
+  font-size 0.875rem
+  font-weight 500
+  color var(--popover-foreground)
+
+.tooltipPerformance
+  font-size 0.875rem
+  color var(--muted-foreground)

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

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'chartContainer': string;
+  'chartContainerDisabled': string;
+  'chartTooltip': string;
+  'driverChartContainer': string;
+  'noDataMessage': string;
+  'tooltipDate': string;
+  'tooltipPerformance': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/widgets/DriverCard/DriverPerformanceChart.tsx

@@ -0,0 +1,150 @@
+import cn from 'classnames';
+import { useMemo } from 'react';
+
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  Tooltip as RechartsTooltip,
+  type TooltipContentProps,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartEmptyState,
+} from '../../ui/Chart/Chart';
+import type { DriverData } from '../DriverMap/driverMapGeography';
+import S from './DriverPerformanceChart.styl';
+import { generateDriverChartData } from './driverPerformanceChartData';
+
+const driverChartConfig = {
+  value: {
+    label: 'Performance',
+    color: 'var(--primary)',
+  },
+} satisfies ChartConfig;
+
+export interface DriverPerformanceChartProps {
+  driver: DriverData;
+}
+
+export function DriverPerformanceChart({
+  driver,
+}: DriverPerformanceChartProps) {
+  const precision = useMemo(() => {
+    if (!driver.normalized_series) return 7;
+
+    const values = Object.values(driver.normalized_series).filter(
+      (v): v is number => typeof v === 'number' && v !== null,
+    );
+
+    if (values.length === 0) return 7;
+
+    const absoluteValues = values.map(Math.abs).filter(v => v > 0);
+    if (absoluteValues.length === 0) return 7;
+
+    const minAbs = Math.min(...absoluteValues);
+
+    if (minAbs < 0.0001) return 7;
+    if (minAbs < 0.001) return 6;
+    if (minAbs < 0.01) return 5;
+    if (minAbs < 0.1) return 4;
+    if (minAbs < 1) return 3;
+    return 2;
+  }, [driver.normalized_series]);
+
+  const chartData = useMemo(
+    () => generateDriverChartData(driver, precision),
+    [driver, precision],
+  );
+
+  const noSeriesData = useMemo(() => {
+    if (!driver.normalized_series) return false;
+    return Object.values(driver.normalized_series).every(
+      value => value === null,
+    );
+  }, [driver.normalized_series]);
+
+  const renderTooltipContent = ({
+    active,
+    payload,
+  }: TooltipContentProps<number, string>) => {
+    if (active && payload?.length) {
+      const dataPoint = payload[0];
+      const row = dataPoint?.payload as
+        | { date?: Date; value?: number }
+        | undefined;
+      const date = row?.date;
+      const value = dataPoint?.value;
+
+      return (
+        <div className={S.chartTooltip}>
+          <div className={S.tooltipDate}>
+            {date instanceof Date
+              ? date.toLocaleDateString('en-US', {
+                  month: 'long',
+                  year: 'numeric',
+                })
+              : 'Unknown Date'}
+          </div>
+          <div className={S.tooltipPerformance}>
+            Performance:{' '}
+            {typeof value === 'number'
+              ? value.toFixed(precision)
+              : String(value ?? '')}
+          </div>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className={S.driverChartContainer}>
+      <ChartContainer
+        config={driverChartConfig}
+        className={cn(
+          S.chartContainer,
+          noSeriesData && S.chartContainerDisabled,
+        )}
+      >
+        <LineChart
+          data={chartData}
+          margin={{ left: 8, right: 8, top: 8, bottom: -20 }}
+        >
+          <CartesianGrid vertical={false} />
+          <XAxis
+            dataKey="date"
+            tickLine={false}
+            axisLine={false}
+            tick={false}
+            tickMargin={0}
+            minTickGap={0}
+          />
+          <YAxis
+            tickLine={false}
+            axisLine={false}
+            tick={false}
+            tickMargin={0}
+            minTickGap={0}
+            width={0}
+            domain={['dataMin', 'dataMax']}
+          />
+          <RechartsTooltip cursor={false} content={renderTooltipContent} />
+          <Line dataKey="value" type="natural" stroke="var(--color-value)" />
+        </LineChart>
+      </ChartContainer>
+      {noSeriesData && (
+        <ChartEmptyState
+          variant="inline"
+          align="center"
+          status="No series data"
+          className={S.noDataMessage}
+        />
+      )}
+    </div>
+  );
+}