@sybilion/uilib 1.2.26 → 1.3.1

package/dist/esm/types/src/components/widgets/DriverCard/DriverPerformanceChart.d.ts

@@ -0,0 +1,5 @@
+import type { DriverData } from '../DriverMap/driverMapGeography';
+export interface DriverPerformanceChartProps {
+    driver: DriverData;
+}
+export declare function DriverPerformanceChart({ driver, }: DriverPerformanceChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/widgets/DriverCard/driverPerformanceChartData.d.ts

@@ -0,0 +1,7 @@
+import type { DriverData } from '../DriverMap/driverMapGeography';
+export type DriverPerformanceChartPoint = {
+    date: Date;
+    value: number;
+};
+/** Last non-null points from `normalized_series`, or deterministic fallback sample. */
+export declare function generateDriverChartData(driver: DriverData, precision?: number): DriverPerformanceChartPoint[];

package/dist/esm/types/src/components/widgets/DriverCard/index.d.ts

@@ -0,0 +1 @@
+export { DriverCard, type DriverCardProps } from './DriverCard';

package/dist/esm/types/src/components/widgets/DriverMap/index.d.ts

@@ -3,6 +3,4 @@ export type { DriverData } from './driverMapGeography';
 export { getCategoryIcon } from './driverCategoryIcon';
 export { getDriverImportance, getHighestImportanceDriver, } from './driverMapSelection';
 export { geographicCoordinates, geographicToSVG, getContinentFromRegion, getPreciseCoordinates, getResponsiveCoordinates, svgToPercentage, } from './driverMapGeography';
-export { MapBackground } from './MapBackground/MapBackground';
-export { LoadingSpinner } from './LoadingSpinner/LoadingSpinner';
 export type { BadgeSize } from './DriverIcon/DriverIcon';

package/dist/esm/types/src/docs/pages/LightweightChartPage.d.ts

@@ -0,0 +1 @@
+export default function LightweightChartPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/docs/pages/PageColumnsPage.d.ts

@@ -0,0 +1 @@
+export default function PageColumnsPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/docs/pages/WorldMapPage.d.ts

@@ -0,0 +1 @@
+export default function WorldMapPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/index.d.ts

@@ -58,8 +58,10 @@ export * from './components/ui/Toggle';
 export * from './components/ui/ToggleGroup';
 export * from './components/ui/Tooltip';
 export * from './components/ui/VimeoEmbed';
+export * from './components/ui/WorldMap';
 export * from './components/ui/WorkspaceAppSwitcher';
 export * from './components/widgets/SidebarDatasetsItemsGrouped';
+export * from './components/widgets/DriverCard';
 export * from './components/widgets/DriverMap';
 export * from './components/widgets/SybilionAppHeader';
 export * from './components/widgets/SybilionAuthLayout';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.2.26",
+  "version": "1.3.1",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",
@@ -100,6 +100,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@vimeo/player": "^2.29.3",
     "classnames": "^2.3.2",
+    "lightweight-charts": "^5.0.9",
     "lucide-react": "^0.546.0",
     "motion": "^12.23.12",
     "recharts": "^3.2.1",
@@ -130,7 +131,7 @@
   },
   "devDependencies": {
     "@auth0/auth0-react": "^2.3.1",
-    "@sybilion/platform-sdk": "file:../sdk",
+    "@sybilion/platform-sdk": "file:../platform-sdk",
     "@babel/core": "^7.20.12",
     "@babel/preset-typescript": "^7.21.0",
     "@homecode/ui": "^4.30.6",

package/src/components/ui/Chart/Chart.tsx

@@ -21,3 +21,12 @@ export {
   ChartStyle,
   BaseChartWrapper,
 };
+export {
+  LightweightForecastChart,
+  type LightweightForecastChartProps,
+} from './lightweight/LightweightForecastChart';
+export {
+  ChartEmptyState,
+  type ChartEmptyStateProps,
+  type ChartEmptyStatusTone,
+} from './components/ChartEmptyState/ChartEmptyState';

package/src/components/ui/Chart/components/BaseChartWrapper.tsx

@@ -9,15 +9,7 @@ import {
   useState,
 } from 'react';
 
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  CustomChartLegend,
-} from '#uilib/components/ui/Chart/Chart';
 import type { QuantileBandConfig } from '#uilib/components/ui/Chart/chartForecastVisualization.types';
-import { QuantileBands } from '#uilib/components/ui/Chart/components/QuantileBands';
 import { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
 import {
   ChartLines,
@@ -26,47 +18,22 @@ import {
 } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
 import { Skeleton } from '#uilib/components/ui/Skeleton';
 import { chartRenderQueue } from '#uilib/utils/chartRenderQueue';
-import { ComposedChart, LineChart } from 'recharts';
+import { ComposedChart, LineChart, Tooltip as ChartTooltip } from 'recharts';
+
+import type { ChartConfig } from '../Chart.types';
+import { ChartContainer } from './ChartContainer';
+import { ChartTooltipContent } from './ChartTooltipContent';
+import { CustomChartLegend } from './CustomChartLegend/CustomChartLegend';
+import { QuantileBands } from './QuantileBands';
 import { LegendPayload } from 'recharts/types/component/DefaultLegendContent';
 
+import { getPlotViewBox, resolveChartMargin } from '../tools/chartPlotGeometry';
 import { formatDate } from '../tools/formatters';
 import S from './BaseChartWrapper.styl';
 import { ChartAxes } from './ChartAxes';
 import { ChartGrid } from './ChartGrid';
 import { LegendSvg } from './LegendSvg/LegendSvg';
 
-type ChartMargin = { top: number; right: number; bottom: number; left: number };
-
-const DEFAULT_CHART_MARGIN: ChartMargin = {
-  top: 5,
-  right: 5,
-  bottom: 5,
-  left: 5,
-};
-
-function resolveChartMargin(
-  margin: Partial<ChartMargin> | undefined,
-): ChartMargin {
-  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`, same convention as Recharts cartesian viewBox. */
-function getPlotViewBox(wrapper: HTMLElement, m: ChartMargin) {
-  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),
-  };
-}
-
 function clampTooltipTranslate(args: {
   coordinate: { x: number; y: number };
   viewBox: { x: number; y: number; width: number; height: number };

package/src/components/ui/Chart/components/ChartEmptyState/ChartEmptyState.styl

@@ -0,0 +1,60 @@
+@import '../../../../../lib/theme.styl'
+
+.root
+  display flex
+  flex-direction column
+  gap var(--p-1)
+  max-width 42rem
+  padding 0 var(--p-3)
+
+  border-radius var(--p-4)
+  backdrop-filter blur(4px)
+  box-shadow 0 0 0 2px var(--page-color)
+  pointer-events auto
+
+.rootPanel
+  width 100%
+  min-height var(--chart-height)
+  justify-content center
+  padding var(--p-6)
+  border-radius var(--radius-md)
+  background var(--muted) / 0.35
+
+.rootInline
+  width fit-content
+  max-width 100%
+
+.rootAlignCenter
+  align-items center
+  text-align center
+
+.rootAlignStart
+  align-items flex-start
+  text-align left
+
+.hint
+  font-size 14px
+  line-height 1.5
+  font-weight 400
+  color var(--muted-foreground)
+  margin 0
+
+  a
+    color var(--sb-cyan-400)
+    text-decoration underline
+    font-weight 500
+
+    &:hover
+      opacity 0.9
+
+.status
+  font-size 14px
+  line-height 1.5
+  font-weight 400
+  margin 0
+
+.statusMuted
+  color var(--muted-foreground)
+
+.statusDestructive
+  color var(--destructive)

package/src/components/ui/Chart/components/ChartEmptyState/ChartEmptyState.styl.d.ts

@@ -0,0 +1,15 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'hint': string;
+  'root': string;
+  'rootAlignCenter': string;
+  'rootAlignStart': string;
+  'rootInline': string;
+  'rootPanel': string;
+  'status': string;
+  'statusDestructive': string;
+  'statusMuted': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Chart/components/ChartEmptyState/ChartEmptyState.tsx

@@ -0,0 +1,66 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import S from './ChartEmptyState.styl';
+
+export type ChartEmptyStatusTone = 'muted' | 'destructive';
+
+export interface ChartEmptyStateProps {
+  className?: string;
+  /** Primary guidance (muted). */
+  hint?: ReactNode;
+  /** Status / technical detail. */
+  status?: ReactNode;
+  statusTone?: ChartEmptyStatusTone;
+  /** `panel`: chart-sized block with light fill. `inline`: text only (e.g. above chart). */
+  variant?: 'panel' | 'inline';
+  align?: 'center' | 'start';
+}
+
+function isNonEmpty(node: ReactNode): boolean {
+  if (node == null || node === false) return false;
+  if (typeof node === 'string') return node.trim().length > 0;
+  return true;
+}
+
+export function ChartEmptyState({
+  className,
+  hint,
+  status,
+  statusTone = 'muted',
+  variant = 'panel',
+  align = 'center',
+}: ChartEmptyStateProps) {
+  const hasHint = isNonEmpty(hint);
+  const hasStatus = isNonEmpty(status);
+
+  if (!hasHint && !hasStatus) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        S.root,
+        variant === 'panel' && S.rootPanel,
+        variant === 'inline' && S.rootInline,
+        align === 'start' && S.rootAlignStart,
+        align === 'center' && S.rootAlignCenter,
+        className,
+      )}
+    >
+      {hasHint && <div className={S.hint}>{hint}</div>}
+      {hasStatus && (
+        <div
+          className={cn(
+            S.status,
+            statusTone === 'destructive' && S.statusDestructive,
+            statusTone === 'muted' && S.statusMuted,
+          )}
+        >
+          {status}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/Chart/lightweight/LightweightForecastChart.styl

@@ -0,0 +1,25 @@
+.root
+  display flex
+  flex-direction column
+  gap 12px
+  width 100%
+
+.shell
+  position relative
+  width 100%
+
+.host
+  display block
+  width 100%
+  box-sizing border-box
+
+  :global(#tv-attr-logo)
+    display none
+
+.tooltipMove
+  position absolute
+  z-index 5
+  pointer-events none
+
+.footer
+  width 100%

package/src/components/ui/Chart/lightweight/LightweightForecastChart.styl.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'footer': string;
+  'host': string;
+  'root': string;
+  'shell': string;
+  'tooltipMove': string;
+}
+export const cssExports: CssExports;
+export default cssExports;