@burdenoff/microfe-theglobalfuel 2026.705.2 → 2026.705.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/theglobalfuel/TheGlobalFuelRoot.js +54 -46
- package/dist/theglobalfuel/TheGlobalFuelRoot.js.map +1 -1
- package/dist/theglobalfuel/TheGlobalFuelRoutes.js +10 -6
- package/dist/theglobalfuel/TheGlobalFuelRoutes.js.map +1 -1
- package/dist/theglobalfuel/components/DataTable.js +126 -58
- package/dist/theglobalfuel/components/DataTable.js.map +1 -1
- package/dist/theglobalfuel/components/EmptyState.js +4 -4
- package/dist/theglobalfuel/components/EmptyState.js.map +1 -1
- package/dist/theglobalfuel/components/MetricsCard.js +2 -2
- package/dist/theglobalfuel/components/MetricsCard.js.map +1 -1
- package/dist/theglobalfuel/components/WorldMap.js +115 -0
- package/dist/theglobalfuel/components/WorldMap.js.map +1 -0
- package/dist/theglobalfuel/components/index.js +9 -0
- package/dist/theglobalfuel/components/viz/AllocationBar.js +68 -0
- package/dist/theglobalfuel/components/viz/AllocationBar.js.map +1 -0
- package/dist/theglobalfuel/components/viz/AreaChart.js +102 -0
- package/dist/theglobalfuel/components/viz/AreaChart.js.map +1 -0
- package/dist/theglobalfuel/components/viz/AvatarStack.js +2 -0
- package/dist/theglobalfuel/components/viz/BarChart.js +4 -0
- package/dist/theglobalfuel/components/viz/CertificateCard.js +4 -0
- package/dist/theglobalfuel/components/viz/DonutChart.js +109 -0
- package/dist/theglobalfuel/components/viz/DonutChart.js.map +1 -0
- package/dist/theglobalfuel/components/viz/HBarFunnel.js +3 -0
- package/dist/theglobalfuel/components/viz/Heatmap.js +3 -0
- package/dist/theglobalfuel/components/viz/KanbanBoard.js +2 -0
- package/dist/theglobalfuel/components/viz/LineChart.js +4 -0
- package/dist/theglobalfuel/components/viz/OrgTree.js +2 -0
- package/dist/theglobalfuel/components/viz/PathSteps.js +68 -0
- package/dist/theglobalfuel/components/viz/PathSteps.js.map +1 -0
- package/dist/theglobalfuel/components/viz/ProgressRing.js +6 -0
- package/dist/theglobalfuel/components/viz/ProgressRing.js.map +1 -0
- package/dist/theglobalfuel/components/viz/RatingStars.js +3 -0
- package/dist/theglobalfuel/components/viz/SegmentedTabs.js +3 -0
- package/dist/theglobalfuel/components/viz/SkillBar.js +3 -0
- package/dist/theglobalfuel/components/viz/Sparkline.js +74 -0
- package/dist/theglobalfuel/components/viz/Sparkline.js.map +1 -0
- package/dist/theglobalfuel/components/viz/StatCard.js +3 -0
- package/dist/theglobalfuel/components/viz/StepProgress.js +64 -0
- package/dist/theglobalfuel/components/viz/StepProgress.js.map +1 -0
- package/dist/theglobalfuel/components/viz/Timeline.js +66 -0
- package/dist/theglobalfuel/components/viz/Timeline.js.map +1 -0
- package/dist/theglobalfuel/components/viz/index.js +23 -0
- package/dist/theglobalfuel/components/viz/lib/Avatar.js +1 -0
- package/dist/theglobalfuel/components/viz/lib/CartesianFrame.js +119 -0
- package/dist/theglobalfuel/components/viz/lib/CartesianFrame.js.map +1 -0
- package/dist/theglobalfuel/components/viz/lib/ResponsiveSvg.js +35 -0
- package/dist/theglobalfuel/components/viz/lib/ResponsiveSvg.js.map +1 -0
- package/dist/theglobalfuel/components/viz/lib/format.js +17 -0
- package/dist/theglobalfuel/components/viz/lib/format.js.map +1 -0
- package/dist/theglobalfuel/components/viz/lib/geometry.js +61 -0
- package/dist/theglobalfuel/components/viz/lib/geometry.js.map +1 -0
- package/dist/theglobalfuel/components/viz/lib/hooks.js +39 -0
- package/dist/theglobalfuel/components/viz/lib/hooks.js.map +1 -0
- package/dist/theglobalfuel/components/viz/lib/palette.js +27 -0
- package/dist/theglobalfuel/components/viz/lib/palette.js.map +1 -0
- package/dist/theglobalfuel/hooks/useCursorPager.js +6 -15
- package/dist/theglobalfuel/hooks/useCursorPager.js.map +1 -1
- package/dist/theglobalfuel/pages/assets/AssetDetailPage.js +431 -316
- package/dist/theglobalfuel/pages/assets/AssetDetailPage.js.map +1 -1
- package/dist/theglobalfuel/pages/assets/AssetsPage.js +99 -99
- package/dist/theglobalfuel/pages/assets/AssetsPage.js.map +1 -1
- package/dist/theglobalfuel/pages/compliance/CompliancePage.js +250 -250
- package/dist/theglobalfuel/pages/compliance/CompliancePage.js.map +1 -1
- package/dist/theglobalfuel/pages/contracts/ContractsPage.js +2 -2
- package/dist/theglobalfuel/pages/contracts/ContractsPage.js.map +1 -1
- package/dist/theglobalfuel/pages/dashboard/DashboardPage.js +525 -227
- package/dist/theglobalfuel/pages/dashboard/DashboardPage.js.map +1 -1
- package/dist/theglobalfuel/pages/emissions/EmissionsPage.js +255 -206
- package/dist/theglobalfuel/pages/emissions/EmissionsPage.js.map +1 -1
- package/dist/theglobalfuel/pages/inventory/InventoryPage.js +60 -60
- package/dist/theglobalfuel/pages/inventory/InventoryPage.js.map +1 -1
- package/dist/theglobalfuel/pages/production/ProductionPage.js +2 -2
- package/dist/theglobalfuel/pages/production/ProductionPage.js.map +1 -1
- package/dist/theglobalfuel/pages/provenance/ProvenancePage.js +465 -0
- package/dist/theglobalfuel/pages/provenance/ProvenancePage.js.map +1 -0
- package/dist/theglobalfuel/pages/reserves/ReservesPage.js +152 -152
- package/dist/theglobalfuel/pages/reserves/ReservesPage.js.map +1 -1
- package/dist/theglobalfuel/pages/shipments/ShipmentsPage.js +356 -227
- package/dist/theglobalfuel/pages/shipments/ShipmentsPage.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PathSteps.js","names":[],"sources":["../../../../src/theglobalfuel/components/viz/PathSteps.tsx"],"sourcesContent":["import { Check, Lock } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { ACCENT } from './lib/palette';\n\nexport type PathStepState = 'done' | 'active' | 'todo' | 'locked';\n\nexport interface PathStep {\n label: string;\n meta?: string;\n state?: PathStepState;\n}\n\nexport interface PathStepsProps {\n steps: PathStep[];\n className?: string;\n}\n\n/**\n * A sequence of course nodes (circles + labels + connectors) for a learning\n * path. Each node carries its own state; the connector into a node is filled\n * once that node is complete. Scrolls horizontally on narrow screens.\n */\nexport function PathSteps({ steps, className }: PathStepsProps) {\n if (steps.length === 0) {\n return null;\n }\n return (\n <ol\n className={cn('flex items-start overflow-x-auto pb-1', className)}\n aria-label=\"Learning path\"\n >\n {steps.map((step, i) => {\n const state = step.state ?? 'todo';\n const connectorFilled = state === 'done';\n return (\n <li\n key={`${step.label}-${i}`}\n className=\"flex min-w-[5.5rem] flex-1 flex-col items-center\"\n aria-current={state === 'active' ? 'step' : undefined}\n >\n <div className=\"flex w-full items-center\">\n {i > 0 ? (\n <span\n aria-hidden=\"true\"\n className=\"h-0.5 flex-1 rounded-full\"\n style={{\n backgroundColor: connectorFilled ? ACCENT : 'var(--color-border-subtle)',\n }}\n />\n ) : (\n <span className=\"flex-1\" aria-hidden=\"true\" />\n )}\n <span\n className={cn(\n 'flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-xs font-semibold transition-colors',\n state === 'done' && 'border-transparent text-text-inverse',\n state === 'active' && 'bg-bg-surface shadow-elevation-1',\n state === 'todo' && 'border-border-default bg-bg-surface text-text-secondary',\n state === 'locked' && 'border-border-subtle bg-bg-sunken text-text-muted'\n )}\n style={\n state === 'done'\n ? { backgroundColor: ACCENT }\n : state === 'active'\n ? { borderColor: ACCENT, color: ACCENT }\n : undefined\n }\n >\n {state === 'done' ? (\n <Check aria-hidden=\"true\" className=\"h-4 w-4\" />\n ) : state === 'locked' ? (\n <Lock aria-hidden=\"true\" className=\"h-3.5 w-3.5\" />\n ) : (\n i + 1\n )}\n </span>\n {i < steps.length - 1 ? (\n <span\n aria-hidden=\"true\"\n className=\"h-0.5 flex-1 rounded-full\"\n style={{\n backgroundColor: state === 'done' ? ACCENT : 'var(--color-border-subtle)',\n }}\n />\n ) : (\n <span className=\"flex-1\" aria-hidden=\"true\" />\n )}\n </div>\n <span\n className={cn(\n 'mt-2 max-w-[7rem] truncate px-1 text-center text-xs',\n state === 'locked' ? 'text-text-muted' : 'font-medium text-text-primary'\n )}\n title={step.label}\n >\n {step.label}\n </span>\n {step.meta ? (\n <span className=\"mt-0.5 px-1 text-center text-[11px] text-text-muted\">\n {step.meta}\n </span>\n ) : null}\n </li>\n );\n })}\n </ol>\n );\n}\n"],"mappings":";;;;;AAsBA,SAAgB,EAAU,EAAE,UAAO,gBAA6B;AAI9D,QAHI,EAAM,WAAW,IACZ,OAGP,kBAAC,MAAD;EACE,WAAW,EAAG,yCAAyC,EAAU;EACjE,cAAW;YAEV,EAAM,KAAK,GAAM,MAAM;GACtB,IAAM,IAAQ,EAAK,SAAS;AAE5B,UACE,kBAAC,MAAD;IAEE,WAAU;IACV,gBAAc,MAAU,WAAW,SAAS,KAAA;cAH9C;KAKE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACG,IAAI,IACH,kBAAC,QAAD;QACE,eAAY;QACZ,WAAU;QACV,OAAO,EACL,iBAbY,MAAU,SAaa,IAAS,8BAC7C;QACD,CAAA,GAEF,kBAAC,QAAD;QAAM,WAAU;QAAS,eAAY;QAAS,CAAA;OAEhD,kBAAC,QAAD;QACE,WAAW,EACT,mHACA,MAAU,UAAU,wCACpB,MAAU,YAAY,oCACtB,MAAU,UAAU,2DACpB,MAAU,YAAY,oDACvB;QACD,OACE,MAAU,SACN,EAAE,iBAAiB,GAAQ,GAC3B,MAAU,WACR;SAAE,aAAa;SAAQ,OAAO;SAAQ,GACtC,KAAA;kBAGP,MAAU,SACT,kBAAC,GAAD;SAAO,eAAY;SAAO,WAAU;SAAY,CAAA,GAC9C,MAAU,WACZ,kBAAC,GAAD;SAAM,eAAY;SAAO,WAAU;SAAgB,CAAA,GAEnD,IAAI;QAED,CAAA;OACN,IAAI,EAAM,SAAS,IAClB,kBAAC,QAAD;QACE,eAAY;QACZ,WAAU;QACV,OAAO,EACL,iBAAiB,MAAU,SAAS,IAAS,8BAC9C;QACD,CAAA,GAEF,kBAAC,QAAD;QAAM,WAAU;QAAS,eAAY;QAAS,CAAA;OAE5C;;KACN,kBAAC,QAAD;MACE,WAAW,EACT,uDACA,MAAU,WAAW,oBAAoB,gCAC1C;MACD,OAAO,EAAK;gBAEX,EAAK;MACD,CAAA;KACN,EAAK,OACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAK;MACD,CAAA,GACL;KACD;MAlEE,GAAG,EAAK,MAAM,GAAG,IAkEnB;IAEP;EACC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProgressRing.js","names":[],"sources":["../../../../src/theglobalfuel/components/viz/ProgressRing.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport { ACCENT } from './lib/palette';\nimport { clamp } from './lib/geometry';\nimport { useMounted, usePrefersReducedMotion } from './lib/hooks';\n\nexport interface ProgressRingProps {\n value: number;\n max?: number;\n /** Center content. Defaults to the rounded value (e.g. \"4.6\" or \"72%\"). */\n label?: ReactNode;\n /** Small caption under the center label. */\n caption?: ReactNode;\n size?: number;\n /** Stroke thickness in viewBox units. */\n thickness?: number;\n /** Tokenized arc color; defaults to the product accent. */\n color?: string;\n title?: string;\n className?: string;\n}\n\nconst VIEW = 100;\nconst CENTER = VIEW / 2;\n\n/** Circular gauge for a score or percentage, with an animated sweep. */\nexport function ProgressRing({\n value,\n max = 100,\n label,\n caption,\n size = 132,\n thickness = 10,\n color = ACCENT,\n title,\n className,\n}: ProgressRingProps) {\n const mounted = useMounted();\n const reduced = usePrefersReducedMotion();\n\n const radius = CENTER - thickness / 2;\n const circumference = 2 * Math.PI * radius;\n const fraction = clamp(max === 0 ? 0 : value / max, 0, 1);\n const target = circumference * (1 - fraction);\n const offset = mounted || reduced ? target : circumference;\n const ringTitle = title ?? `Progress: ${Math.round(fraction * 100)} percent`;\n\n return (\n <div\n className={cn('relative inline-flex shrink-0', className)}\n style={{ width: size, height: size, maxWidth: '100%' }}\n >\n <svg\n viewBox={`0 0 ${VIEW} ${VIEW}`}\n width={size}\n height={size}\n role=\"img\"\n aria-label={ringTitle}\n style={{ display: 'block', maxWidth: '100%', height: 'auto' }}\n >\n <title>{ringTitle}</title>\n <circle\n cx={CENTER}\n cy={CENTER}\n r={radius}\n fill=\"none\"\n stroke=\"var(--color-chart-grid)\"\n strokeWidth={thickness}\n opacity={0.7}\n />\n <circle\n cx={CENTER}\n cy={CENTER}\n r={radius}\n fill=\"none\"\n stroke={color}\n strokeWidth={thickness}\n strokeLinecap=\"round\"\n strokeDasharray={circumference}\n strokeDashoffset={offset}\n transform={`rotate(-90 ${CENTER} ${CENTER})`}\n style={{\n transition: reduced ? undefined : 'stroke-dashoffset 900ms cubic-bezier(0.22,1,0.36,1)',\n }}\n />\n </svg>\n <div className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center\">\n <span className=\"text-2xl font-semibold leading-none text-text-primary\">\n {label ?? Math.round(fraction * 100)}\n </span>\n {caption !== undefined ? (\n <span className=\"mt-1 text-xs text-text-muted\">{caption}</span>\n ) : null}\n </div>\n </div>\n );\n}\n"],"mappings":""}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { ACCENT as e } from "./lib/palette.js";
|
|
2
|
+
import { useMounted as t, usePrefersReducedMotion as n, useVizId as r } from "./lib/hooks.js";
|
|
3
|
+
import { ResponsiveSvg as i } from "./lib/ResponsiveSvg.js";
|
|
4
|
+
import { buildAreaPath as a, buildLinePath as o, pointsFromValues as s } from "./lib/geometry.js";
|
|
5
|
+
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
6
|
+
//#region src/theglobalfuel/components/viz/Sparkline.tsx
|
|
7
|
+
var u = 3;
|
|
8
|
+
function d({ data: d, variant: f = "line", height: p = 36, label: m, className: h }) {
|
|
9
|
+
let g = r("spark-grad"), _ = t(), v = n();
|
|
10
|
+
return d.length === 0 ? null : /* @__PURE__ */ c(i, {
|
|
11
|
+
height: p,
|
|
12
|
+
title: m ?? `Trend of ${d.length} points`,
|
|
13
|
+
minWidth: 96,
|
|
14
|
+
className: h,
|
|
15
|
+
children: ({ width: t }) => {
|
|
16
|
+
let n = s(d, t, p, u), r = o(n), i = a(n, p - u), m = n[n.length - 1];
|
|
17
|
+
return /* @__PURE__ */ l("g", {
|
|
18
|
+
style: { color: e },
|
|
19
|
+
children: [
|
|
20
|
+
/* @__PURE__ */ c("defs", { children: /* @__PURE__ */ l("linearGradient", {
|
|
21
|
+
id: g,
|
|
22
|
+
x1: "0",
|
|
23
|
+
y1: "0",
|
|
24
|
+
x2: "0",
|
|
25
|
+
y2: "1",
|
|
26
|
+
children: [/* @__PURE__ */ c("stop", {
|
|
27
|
+
offset: "0%",
|
|
28
|
+
stopColor: "currentColor",
|
|
29
|
+
stopOpacity: .28
|
|
30
|
+
}), /* @__PURE__ */ c("stop", {
|
|
31
|
+
offset: "100%",
|
|
32
|
+
stopColor: "currentColor",
|
|
33
|
+
stopOpacity: 0
|
|
34
|
+
})]
|
|
35
|
+
}) }),
|
|
36
|
+
f === "area" ? /* @__PURE__ */ c("path", {
|
|
37
|
+
d: i,
|
|
38
|
+
fill: `url(#${g})`,
|
|
39
|
+
stroke: "none",
|
|
40
|
+
style: {
|
|
41
|
+
opacity: _ || v ? 1 : 0,
|
|
42
|
+
transition: v ? void 0 : "opacity 700ms ease"
|
|
43
|
+
}
|
|
44
|
+
}) : null,
|
|
45
|
+
/* @__PURE__ */ c("path", {
|
|
46
|
+
d: r,
|
|
47
|
+
fill: "none",
|
|
48
|
+
stroke: "currentColor",
|
|
49
|
+
strokeWidth: 2,
|
|
50
|
+
strokeLinecap: "round",
|
|
51
|
+
strokeLinejoin: "round",
|
|
52
|
+
vectorEffect: "non-scaling-stroke",
|
|
53
|
+
pathLength: 1,
|
|
54
|
+
style: {
|
|
55
|
+
strokeDasharray: 1,
|
|
56
|
+
strokeDashoffset: _ || v ? 0 : 1,
|
|
57
|
+
transition: v ? void 0 : "stroke-dashoffset 900ms ease"
|
|
58
|
+
}
|
|
59
|
+
}),
|
|
60
|
+
/* @__PURE__ */ c("circle", {
|
|
61
|
+
cx: m.x,
|
|
62
|
+
cy: m.y,
|
|
63
|
+
r: 2.6,
|
|
64
|
+
fill: "currentColor"
|
|
65
|
+
})
|
|
66
|
+
]
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
//#endregion
|
|
72
|
+
export { d as Sparkline };
|
|
73
|
+
|
|
74
|
+
//# sourceMappingURL=Sparkline.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sparkline.js","names":[],"sources":["../../../../src/theglobalfuel/components/viz/Sparkline.tsx"],"sourcesContent":["import { ACCENT } from './lib/palette';\nimport { ResponsiveSvg } from './lib/ResponsiveSvg';\nimport { buildAreaPath, buildLinePath, pointsFromValues } from './lib/geometry';\nimport { useMounted, usePrefersReducedMotion, useVizId } from './lib/hooks';\n\nexport interface SparklineProps {\n /** Ordered trend values (oldest first). */\n data: number[];\n variant?: 'line' | 'area';\n /** Pixel height of the sparkline. */\n height?: number;\n /** Accessible label; defaults to a generic trend description. */\n label?: string;\n className?: string;\n}\n\nconst PAD = 3;\n\n/**\n * Tiny inline trend line/area for KPI cards. Draws itself in on mount\n * (unless reduced-motion is requested) and emphasizes the final point.\n */\nexport function Sparkline({\n data,\n variant = 'line',\n height = 36,\n label,\n className,\n}: SparklineProps) {\n const gradientId = useVizId('spark-grad');\n const mounted = useMounted();\n const reduced = usePrefersReducedMotion();\n\n if (data.length === 0) {\n return null;\n }\n\n const title = label ?? `Trend of ${data.length} points`;\n\n return (\n <ResponsiveSvg height={height} title={title} minWidth={96} className={className}>\n {({ width }) => {\n const points = pointsFromValues(data, width, height, PAD);\n const linePath = buildLinePath(points);\n const areaPath = buildAreaPath(points, height - PAD);\n const last = points[points.length - 1];\n return (\n <g style={{ color: ACCENT }}>\n <defs>\n <linearGradient id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity={0.28} />\n <stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity={0} />\n </linearGradient>\n </defs>\n {variant === 'area' ? (\n <path\n d={areaPath}\n fill={`url(#${gradientId})`}\n stroke=\"none\"\n style={{\n opacity: mounted || reduced ? 1 : 0,\n transition: reduced ? undefined : 'opacity 700ms ease',\n }}\n />\n ) : null}\n <path\n d={linePath}\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={2}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n vectorEffect=\"non-scaling-stroke\"\n pathLength={1}\n style={{\n strokeDasharray: 1,\n strokeDashoffset: mounted || reduced ? 0 : 1,\n transition: reduced ? undefined : 'stroke-dashoffset 900ms ease',\n }}\n />\n <circle cx={last.x} cy={last.y} r={2.6} fill=\"currentColor\" />\n </g>\n );\n }}\n </ResponsiveSvg>\n );\n}\n"],"mappings":";;;;;;AAgBA,IAAM,IAAM;AAMZ,SAAgB,EAAU,EACxB,SACA,aAAU,QACV,YAAS,IACT,UACA,gBACiB;CACjB,IAAM,IAAa,EAAS,aAAa,EACnC,IAAU,GAAY,EACtB,IAAU,GAAyB;AAQzC,QANI,EAAK,WAAW,IACX,OAMP,kBAAC,GAAD;EAAuB;EAAe,OAH1B,KAAS,YAAY,EAAK,OAAO;EAGA,UAAU;EAAe;aAClE,EAAE,eAAY;GACd,IAAM,IAAS,EAAiB,GAAM,GAAO,GAAQ,EAAI,EACnD,IAAW,EAAc,EAAO,EAChC,IAAW,EAAc,GAAQ,IAAS,EAAI,EAC9C,IAAO,EAAO,EAAO,SAAS;AACpC,UACE,kBAAC,KAAD;IAAG,OAAO,EAAE,OAAO,GAAQ;cAA3B;KACE,kBAAC,QAAD,EAAA,UACE,kBAAC,kBAAD;MAAgB,IAAI;MAAY,IAAG;MAAI,IAAG;MAAI,IAAG;MAAI,IAAG;gBAAxD,CACE,kBAAC,QAAD;OAAM,QAAO;OAAK,WAAU;OAAe,aAAa;OAAQ,CAAA,EAChE,kBAAC,QAAD;OAAM,QAAO;OAAO,WAAU;OAAe,aAAa;OAAK,CAAA,CAChD;SACZ,CAAA;KACN,MAAY,SACX,kBAAC,QAAD;MACE,GAAG;MACH,MAAM,QAAQ,EAAW;MACzB,QAAO;MACP,OAAO;OACL,SAAS,KAAW,IAAU,IAAI;OAClC,YAAY,IAAU,KAAA,IAAY;OACnC;MACD,CAAA,GACA;KACJ,kBAAC,QAAD;MACE,GAAG;MACH,MAAK;MACL,QAAO;MACP,aAAa;MACb,eAAc;MACd,gBAAe;MACf,cAAa;MACb,YAAY;MACZ,OAAO;OACL,iBAAiB;OACjB,kBAAkB,KAAW,IAAU,IAAI;OAC3C,YAAY,IAAU,KAAA,IAAY;OACnC;MACD,CAAA;KACF,kBAAC,UAAD;MAAQ,IAAI,EAAK;MAAG,IAAI,EAAK;MAAG,GAAG;MAAK,MAAK;MAAiB,CAAA;KAC5D;;;EAGM,CAAA"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { cn as e } from "../../utils/cn.js";
|
|
2
|
+
import { ACCENT as t } from "./lib/palette.js";
|
|
3
|
+
import { Check as n } from "lucide-react";
|
|
4
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
5
|
+
//#region src/theglobalfuel/components/viz/StepProgress.tsx
|
|
6
|
+
function a({ steps: a, current: o, className: s }) {
|
|
7
|
+
return a.length === 0 ? null : /* @__PURE__ */ r("ol", {
|
|
8
|
+
className: e("flex items-start overflow-x-auto pb-1", s),
|
|
9
|
+
"aria-label": "Progress",
|
|
10
|
+
children: a.map((s, c) => {
|
|
11
|
+
let l = c < o ? "complete" : c === o ? "current" : "upcoming";
|
|
12
|
+
return /* @__PURE__ */ i("li", {
|
|
13
|
+
className: "flex min-w-[5rem] flex-1 flex-col items-center",
|
|
14
|
+
"aria-current": l === "current" ? "step" : void 0,
|
|
15
|
+
children: [
|
|
16
|
+
/* @__PURE__ */ i("div", {
|
|
17
|
+
className: "flex w-full items-center",
|
|
18
|
+
children: [
|
|
19
|
+
c > 0 ? /* @__PURE__ */ r("span", {
|
|
20
|
+
"aria-hidden": "true",
|
|
21
|
+
className: "h-0.5 flex-1 rounded-full",
|
|
22
|
+
style: { backgroundColor: c <= o ? t : "var(--color-border-subtle)" }
|
|
23
|
+
}) : /* @__PURE__ */ r("span", {
|
|
24
|
+
className: "flex-1",
|
|
25
|
+
"aria-hidden": "true"
|
|
26
|
+
}),
|
|
27
|
+
/* @__PURE__ */ r("span", {
|
|
28
|
+
className: e("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-xs font-semibold tabular-nums transition-colors", l === "complete" && "border-transparent text-text-inverse", l === "current" && "bg-bg-surface", l === "upcoming" && "border-border-subtle bg-bg-sunken text-text-muted"),
|
|
29
|
+
style: l === "complete" ? { backgroundColor: t } : l === "current" ? {
|
|
30
|
+
borderColor: t,
|
|
31
|
+
color: t
|
|
32
|
+
} : void 0,
|
|
33
|
+
children: l === "complete" ? /* @__PURE__ */ r(n, {
|
|
34
|
+
"aria-hidden": "true",
|
|
35
|
+
className: "h-4 w-4"
|
|
36
|
+
}) : c + 1
|
|
37
|
+
}),
|
|
38
|
+
c < a.length - 1 ? /* @__PURE__ */ r("span", {
|
|
39
|
+
"aria-hidden": "true",
|
|
40
|
+
className: "h-0.5 flex-1 rounded-full",
|
|
41
|
+
style: { backgroundColor: c < o ? t : "var(--color-border-subtle)" }
|
|
42
|
+
}) : /* @__PURE__ */ r("span", {
|
|
43
|
+
className: "flex-1",
|
|
44
|
+
"aria-hidden": "true"
|
|
45
|
+
})
|
|
46
|
+
]
|
|
47
|
+
}),
|
|
48
|
+
/* @__PURE__ */ r("span", {
|
|
49
|
+
className: e("mt-2 px-1 text-center text-xs", l === "upcoming" ? "text-text-muted" : "font-medium text-text-primary"),
|
|
50
|
+
children: s.label
|
|
51
|
+
}),
|
|
52
|
+
s.description ? /* @__PURE__ */ r("span", {
|
|
53
|
+
className: "mt-0.5 px-1 text-center text-[11px] text-text-muted",
|
|
54
|
+
children: s.description
|
|
55
|
+
}) : null
|
|
56
|
+
]
|
|
57
|
+
}, `${s.label}-${c}`);
|
|
58
|
+
})
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
//#endregion
|
|
62
|
+
export { a as StepProgress };
|
|
63
|
+
|
|
64
|
+
//# sourceMappingURL=StepProgress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StepProgress.js","names":[],"sources":["../../../../src/theglobalfuel/components/viz/StepProgress.tsx"],"sourcesContent":["import { Check } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { ACCENT } from './lib/palette';\n\nexport interface StepProgressStep {\n label: string;\n description?: string;\n}\n\nexport interface StepProgressProps {\n steps: StepProgressStep[];\n /** Zero-based index of the current (in-progress) step. */\n current: number;\n className?: string;\n}\n\ntype StepState = 'complete' | 'current' | 'upcoming';\n\n/**\n * Horizontal stage tracker (e.g. Offer → Paperwork → IT → Training → Day 1).\n * Completed steps are filled with a check, the current step is highlighted and\n * future steps are muted. Scrolls horizontally on narrow screens.\n */\nexport function StepProgress({ steps, current, className }: StepProgressProps) {\n if (steps.length === 0) {\n return null;\n }\n return (\n <ol className={cn('flex items-start overflow-x-auto pb-1', className)} aria-label=\"Progress\">\n {steps.map((step, i) => {\n const state: StepState = i < current ? 'complete' : i === current ? 'current' : 'upcoming';\n const connectorFilled = i <= current;\n return (\n <li\n key={`${step.label}-${i}`}\n className=\"flex min-w-[5rem] flex-1 flex-col items-center\"\n aria-current={state === 'current' ? 'step' : undefined}\n >\n <div className=\"flex w-full items-center\">\n {i > 0 ? (\n <span\n aria-hidden=\"true\"\n className=\"h-0.5 flex-1 rounded-full\"\n style={{\n backgroundColor: connectorFilled ? ACCENT : 'var(--color-border-subtle)',\n }}\n />\n ) : (\n <span className=\"flex-1\" aria-hidden=\"true\" />\n )}\n <span\n className={cn(\n 'flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-xs font-semibold tabular-nums transition-colors',\n state === 'complete' && 'border-transparent text-text-inverse',\n state === 'current' && 'bg-bg-surface',\n state === 'upcoming' && 'border-border-subtle bg-bg-sunken text-text-muted'\n )}\n style={\n state === 'complete'\n ? { backgroundColor: ACCENT }\n : state === 'current'\n ? { borderColor: ACCENT, color: ACCENT }\n : undefined\n }\n >\n {state === 'complete' ? <Check aria-hidden=\"true\" className=\"h-4 w-4\" /> : i + 1}\n </span>\n {i < steps.length - 1 ? (\n <span\n aria-hidden=\"true\"\n className=\"h-0.5 flex-1 rounded-full\"\n style={{ backgroundColor: i < current ? ACCENT : 'var(--color-border-subtle)' }}\n />\n ) : (\n <span className=\"flex-1\" aria-hidden=\"true\" />\n )}\n </div>\n <span\n className={cn(\n 'mt-2 px-1 text-center text-xs',\n state === 'upcoming' ? 'text-text-muted' : 'font-medium text-text-primary'\n )}\n >\n {step.label}\n </span>\n {step.description ? (\n <span className=\"mt-0.5 px-1 text-center text-[11px] text-text-muted\">\n {step.description}\n </span>\n ) : null}\n </li>\n );\n })}\n </ol>\n );\n}\n"],"mappings":";;;;;AAuBA,SAAgB,EAAa,EAAE,UAAO,YAAS,gBAAgC;AAI7E,QAHI,EAAM,WAAW,IACZ,OAGP,kBAAC,MAAD;EAAI,WAAW,EAAG,yCAAyC,EAAU;EAAE,cAAW;YAC/E,EAAM,KAAK,GAAM,MAAM;GACtB,IAAM,IAAmB,IAAI,IAAU,aAAa,MAAM,IAAU,YAAY;AAEhF,UACE,kBAAC,MAAD;IAEE,WAAU;IACV,gBAAc,MAAU,YAAY,SAAS,KAAA;cAH/C;KAKE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACG,IAAI,IACH,kBAAC,QAAD;QACE,eAAY;QACZ,WAAU;QACV,OAAO,EACL,iBAbY,KAAK,IAakB,IAAS,8BAC7C;QACD,CAAA,GAEF,kBAAC,QAAD;QAAM,WAAU;QAAS,eAAY;QAAS,CAAA;OAEhD,kBAAC,QAAD;QACE,WAAW,EACT,gIACA,MAAU,cAAc,wCACxB,MAAU,aAAa,iBACvB,MAAU,cAAc,oDACzB;QACD,OACE,MAAU,aACN,EAAE,iBAAiB,GAAQ,GAC3B,MAAU,YACR;SAAE,aAAa;SAAQ,OAAO;SAAQ,GACtC,KAAA;kBAGP,MAAU,aAAa,kBAAC,GAAD;SAAO,eAAY;SAAO,WAAU;SAAY,CAAA,GAAG,IAAI;QAC1E,CAAA;OACN,IAAI,EAAM,SAAS,IAClB,kBAAC,QAAD;QACE,eAAY;QACZ,WAAU;QACV,OAAO,EAAE,iBAAiB,IAAI,IAAU,IAAS,8BAA8B;QAC/E,CAAA,GAEF,kBAAC,QAAD;QAAM,WAAU;QAAS,eAAY;QAAS,CAAA;OAE5C;;KACN,kBAAC,QAAD;MACE,WAAW,EACT,iCACA,MAAU,aAAa,oBAAoB,gCAC5C;gBAEA,EAAK;MACD,CAAA;KACN,EAAK,cACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAK;MACD,CAAA,GACL;KACD;MAxDE,GAAG,EAAK,MAAM,GAAG,IAwDnB;IAEP;EACC,CAAA"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { cn as e } from "../../utils/cn.js";
|
|
2
|
+
import { ACCENT as t, STATUS as n } from "./lib/palette.js";
|
|
3
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
4
|
+
//#region src/theglobalfuel/components/viz/Timeline.tsx
|
|
5
|
+
function a(e) {
|
|
6
|
+
switch (e) {
|
|
7
|
+
case "success":
|
|
8
|
+
case "warning":
|
|
9
|
+
case "danger":
|
|
10
|
+
case "info": return n[e];
|
|
11
|
+
case "muted": return "var(--color-text-muted)";
|
|
12
|
+
default: return t;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
function o({ items: t, className: n }) {
|
|
16
|
+
return t.length === 0 ? null : /* @__PURE__ */ r("ol", {
|
|
17
|
+
className: e("flex flex-col", n),
|
|
18
|
+
children: t.map((n, o) => {
|
|
19
|
+
let s = o === t.length - 1, c = a(n.tone ?? "accent");
|
|
20
|
+
return /* @__PURE__ */ i("li", {
|
|
21
|
+
className: "flex gap-3",
|
|
22
|
+
children: [/* @__PURE__ */ i("div", {
|
|
23
|
+
className: "flex flex-col items-center",
|
|
24
|
+
children: [/* @__PURE__ */ r("span", {
|
|
25
|
+
className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2",
|
|
26
|
+
style: {
|
|
27
|
+
borderColor: c,
|
|
28
|
+
color: c
|
|
29
|
+
},
|
|
30
|
+
children: n.icon ?? /* @__PURE__ */ r("span", {
|
|
31
|
+
"aria-hidden": "true",
|
|
32
|
+
className: "h-2 w-2 rounded-full",
|
|
33
|
+
style: { backgroundColor: c }
|
|
34
|
+
})
|
|
35
|
+
}), s ? null : /* @__PURE__ */ r("span", {
|
|
36
|
+
"aria-hidden": "true",
|
|
37
|
+
className: "w-px flex-1",
|
|
38
|
+
style: {
|
|
39
|
+
backgroundColor: "var(--color-border-subtle)",
|
|
40
|
+
minHeight: 12
|
|
41
|
+
}
|
|
42
|
+
})]
|
|
43
|
+
}), /* @__PURE__ */ i("div", {
|
|
44
|
+
className: e("flex-1", s ? "pb-0" : "pb-5"),
|
|
45
|
+
children: [/* @__PURE__ */ i("div", {
|
|
46
|
+
className: "flex flex-wrap items-baseline justify-between gap-x-3",
|
|
47
|
+
children: [/* @__PURE__ */ r("p", {
|
|
48
|
+
className: "text-sm font-medium text-text-primary",
|
|
49
|
+
children: n.title
|
|
50
|
+
}), n.time ? /* @__PURE__ */ r("span", {
|
|
51
|
+
className: "shrink-0 text-xs text-text-muted",
|
|
52
|
+
children: n.time
|
|
53
|
+
}) : null]
|
|
54
|
+
}), n.meta ? /* @__PURE__ */ r("div", {
|
|
55
|
+
className: "mt-0.5 text-sm text-text-secondary",
|
|
56
|
+
children: n.meta
|
|
57
|
+
}) : null]
|
|
58
|
+
})]
|
|
59
|
+
}, n.id ?? o);
|
|
60
|
+
})
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
//#endregion
|
|
64
|
+
export { o as Timeline };
|
|
65
|
+
|
|
66
|
+
//# sourceMappingURL=Timeline.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Timeline.js","names":[],"sources":["../../../../src/theglobalfuel/components/viz/Timeline.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport { ACCENT, STATUS, type StatusTone } from './lib/palette';\n\nexport type TimelineTone = 'accent' | StatusTone | 'muted';\n\nexport interface TimelineItem {\n id?: string;\n title: ReactNode;\n meta?: ReactNode;\n time?: ReactNode;\n /** Colors the node dot. Defaults to accent. */\n tone?: TimelineTone;\n /** Optional icon rendered inside the node. */\n icon?: ReactNode;\n}\n\nexport interface TimelineProps {\n items: TimelineItem[];\n className?: string;\n}\n\nfunction dotColor(tone: TimelineTone): string {\n switch (tone) {\n case 'success':\n case 'warning':\n case 'danger':\n case 'info':\n return STATUS[tone];\n case 'muted':\n return 'var(--color-text-muted)';\n default:\n return ACCENT;\n }\n}\n\n/** Vertical activity feed: node dot + connector + title, meta and time. */\nexport function Timeline({ items, className }: TimelineProps) {\n if (items.length === 0) {\n return null;\n }\n return (\n <ol className={cn('flex flex-col', className)}>\n {items.map((item, i) => {\n const isLast = i === items.length - 1;\n const color = dotColor(item.tone ?? 'accent');\n return (\n <li key={item.id ?? i} className=\"flex gap-3\">\n <div className=\"flex flex-col items-center\">\n <span\n className=\"mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2\"\n style={{ borderColor: color, color }}\n >\n {item.icon ?? (\n <span\n aria-hidden=\"true\"\n className=\"h-2 w-2 rounded-full\"\n style={{ backgroundColor: color }}\n />\n )}\n </span>\n {isLast ? null : (\n <span\n aria-hidden=\"true\"\n className=\"w-px flex-1\"\n style={{ backgroundColor: 'var(--color-border-subtle)', minHeight: 12 }}\n />\n )}\n </div>\n <div className={cn('flex-1', isLast ? 'pb-0' : 'pb-5')}>\n <div className=\"flex flex-wrap items-baseline justify-between gap-x-3\">\n <p className=\"text-sm font-medium text-text-primary\">{item.title}</p>\n {item.time ? (\n <span className=\"shrink-0 text-xs text-text-muted\">{item.time}</span>\n ) : null}\n </div>\n {item.meta ? (\n <div className=\"mt-0.5 text-sm text-text-secondary\">{item.meta}</div>\n ) : null}\n </div>\n </li>\n );\n })}\n </ol>\n );\n}\n"],"mappings":";;;;AAsBA,SAAS,EAAS,GAA4B;AAC5C,SAAQ,GAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK,OACH,QAAO,EAAO;EAChB,KAAK,QACH,QAAO;EACT,QACE,QAAO;;;AAKb,SAAgB,EAAS,EAAE,UAAO,gBAA4B;AAI5D,QAHI,EAAM,WAAW,IACZ,OAGP,kBAAC,MAAD;EAAI,WAAW,EAAG,iBAAiB,EAAU;YAC1C,EAAM,KAAK,GAAM,MAAM;GACtB,IAAM,IAAS,MAAM,EAAM,SAAS,GAC9B,IAAQ,EAAS,EAAK,QAAQ,SAAS;AAC7C,UACE,kBAAC,MAAD;IAAuB,WAAU;cAAjC,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MACE,WAAU;MACV,OAAO;OAAE,aAAa;OAAO;OAAO;gBAEnC,EAAK,QACJ,kBAAC,QAAD;OACE,eAAY;OACZ,WAAU;OACV,OAAO,EAAE,iBAAiB,GAAO;OACjC,CAAA;MAEC,CAAA,EACN,IAAS,OACR,kBAAC,QAAD;MACE,eAAY;MACZ,WAAU;MACV,OAAO;OAAE,iBAAiB;OAA8B,WAAW;OAAI;MACvE,CAAA,CAEA;QACN,kBAAC,OAAD;KAAK,WAAW,EAAG,UAAU,IAAS,SAAS,OAAO;eAAtD,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,KAAD;OAAG,WAAU;iBAAyC,EAAK;OAAU,CAAA,EACpE,EAAK,OACJ,kBAAC,QAAD;OAAM,WAAU;iBAAoC,EAAK;OAAY,CAAA,GACnE,KACA;SACL,EAAK,OACJ,kBAAC,OAAD;MAAK,WAAU;gBAAsC,EAAK;MAAW,CAAA,GACnE,KACA;OACH;MAjCI,EAAK,MAAM,EAiCf;IAEP;EACC,CAAA"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import "./lib/palette.js";
|
|
2
|
+
import "./lib/geometry.js";
|
|
3
|
+
import "./Sparkline.js";
|
|
4
|
+
import "./lib/format.js";
|
|
5
|
+
import "./AreaChart.js";
|
|
6
|
+
import "./LineChart.js";
|
|
7
|
+
import "./BarChart.js";
|
|
8
|
+
import "./HBarFunnel.js";
|
|
9
|
+
import "./DonutChart.js";
|
|
10
|
+
import "./ProgressRing.js";
|
|
11
|
+
import "./StatCard.js";
|
|
12
|
+
import "./KanbanBoard.js";
|
|
13
|
+
import "./Heatmap.js";
|
|
14
|
+
import "./Timeline.js";
|
|
15
|
+
import "./OrgTree.js";
|
|
16
|
+
import "./AllocationBar.js";
|
|
17
|
+
import "./StepProgress.js";
|
|
18
|
+
import "./PathSteps.js";
|
|
19
|
+
import "./AvatarStack.js";
|
|
20
|
+
import "./RatingStars.js";
|
|
21
|
+
import "./SkillBar.js";
|
|
22
|
+
import "./CertificateCard.js";
|
|
23
|
+
import "./SegmentedTabs.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "react/jsx-runtime";
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { cn as e } from "../../../utils/cn.js";
|
|
2
|
+
import { CHART_AXIS as t, CHART_GRID as n } from "./palette.js";
|
|
3
|
+
import { useElementWidth as r } from "./hooks.js";
|
|
4
|
+
import { clamp as i, scaleLinear as a } from "./geometry.js";
|
|
5
|
+
import { useState as o } from "react";
|
|
6
|
+
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
7
|
+
//#region src/theglobalfuel/components/viz/lib/CartesianFrame.tsx
|
|
8
|
+
var l = {
|
|
9
|
+
left: 40,
|
|
10
|
+
right: 14,
|
|
11
|
+
top: 14,
|
|
12
|
+
bottom: 26
|
|
13
|
+
}, u = 7;
|
|
14
|
+
function d({ labels: d, domain: f, height: p, title: m, desc: h, formatValue: g, yTicks: _ = 4, padding: v, tooltip: y, className: b, children: x }) {
|
|
15
|
+
let [S, C] = r(), [w, T] = o(null), E = C > 0 ? C : 480, D = {
|
|
16
|
+
...l,
|
|
17
|
+
...v
|
|
18
|
+
}, O = d.length, [k, A] = f, j = D.left, M = E - D.right, N = D.top, P = p - D.bottom, F = (e) => O <= 1 ? (j + M) / 2 : j + (M - j) * e / (O - 1), I = (e) => P - a(e, k, A, 0, P - N), L = Array.from({ length: _ + 1 }, (e, t) => k + (A - k) * t / _), R = Math.max(1, Math.ceil(O / u)), z = d.map((e, t) => t).filter((e) => e % R === 0 || e === O - 1), B = (e) => {
|
|
19
|
+
let t = S.current;
|
|
20
|
+
if (!t || O === 0) return;
|
|
21
|
+
let n = e - t.getBoundingClientRect().left, r = 0, i = Infinity;
|
|
22
|
+
for (let e = 0; e < O; e += 1) {
|
|
23
|
+
let t = Math.abs(F(e) - n);
|
|
24
|
+
t < i && (i = t, r = e);
|
|
25
|
+
}
|
|
26
|
+
T(r);
|
|
27
|
+
}, V = (e) => B(e.clientX), H = () => T(null), U = (e) => {
|
|
28
|
+
O !== 0 && (e.key === "ArrowRight" || e.key === "ArrowLeft" ? (e.preventDefault(), T(i((w ?? (e.key === "ArrowRight" ? -1 : O)) + (e.key === "ArrowRight" ? 1 : -1), 0, O - 1))) : e.key === "Home" ? (e.preventDefault(), T(0)) : e.key === "End" ? (e.preventDefault(), T(O - 1)) : e.key === "Escape" && T(null));
|
|
29
|
+
}, W = {
|
|
30
|
+
width: E,
|
|
31
|
+
height: p,
|
|
32
|
+
plotLeft: j,
|
|
33
|
+
plotRight: M,
|
|
34
|
+
plotTop: N,
|
|
35
|
+
plotBottom: P,
|
|
36
|
+
activeIndex: w,
|
|
37
|
+
px: F,
|
|
38
|
+
py: I
|
|
39
|
+
};
|
|
40
|
+
return /* @__PURE__ */ c("div", {
|
|
41
|
+
ref: S,
|
|
42
|
+
className: e("relative w-full rounded-[var(--radius-card)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", b),
|
|
43
|
+
tabIndex: 0,
|
|
44
|
+
role: "img",
|
|
45
|
+
"aria-label": m,
|
|
46
|
+
onMouseMove: V,
|
|
47
|
+
onMouseLeave: H,
|
|
48
|
+
onBlur: H,
|
|
49
|
+
onKeyDown: U,
|
|
50
|
+
children: [/* @__PURE__ */ c("svg", {
|
|
51
|
+
viewBox: `0 0 ${E} ${p}`,
|
|
52
|
+
width: "100%",
|
|
53
|
+
height: p,
|
|
54
|
+
preserveAspectRatio: "none",
|
|
55
|
+
style: {
|
|
56
|
+
display: "block",
|
|
57
|
+
overflow: "visible"
|
|
58
|
+
},
|
|
59
|
+
"aria-hidden": "true",
|
|
60
|
+
focusable: "false",
|
|
61
|
+
children: [
|
|
62
|
+
/* @__PURE__ */ s("title", { children: m }),
|
|
63
|
+
h ? /* @__PURE__ */ s("desc", { children: h }) : null,
|
|
64
|
+
L.map((e, t) => /* @__PURE__ */ s("line", {
|
|
65
|
+
x1: j,
|
|
66
|
+
x2: M,
|
|
67
|
+
y1: I(e),
|
|
68
|
+
y2: I(e),
|
|
69
|
+
stroke: n,
|
|
70
|
+
strokeWidth: 1,
|
|
71
|
+
vectorEffect: "non-scaling-stroke",
|
|
72
|
+
opacity: .6
|
|
73
|
+
}, `grid-${t}`)),
|
|
74
|
+
L.map((e, n) => /* @__PURE__ */ s("text", {
|
|
75
|
+
x: j - 7,
|
|
76
|
+
y: I(e),
|
|
77
|
+
textAnchor: "end",
|
|
78
|
+
dominantBaseline: "central",
|
|
79
|
+
fontSize: 10,
|
|
80
|
+
fill: t,
|
|
81
|
+
children: g(e)
|
|
82
|
+
}, `ylabel-${n}`)),
|
|
83
|
+
z.map((e) => /* @__PURE__ */ s("text", {
|
|
84
|
+
x: F(e),
|
|
85
|
+
y: p - 8,
|
|
86
|
+
textAnchor: "middle",
|
|
87
|
+
fontSize: 10,
|
|
88
|
+
fill: t,
|
|
89
|
+
children: d[e]
|
|
90
|
+
}, `xlabel-${e}`)),
|
|
91
|
+
w === null ? null : /* @__PURE__ */ s("line", {
|
|
92
|
+
x1: F(w),
|
|
93
|
+
x2: F(w),
|
|
94
|
+
y1: N,
|
|
95
|
+
y2: P,
|
|
96
|
+
stroke: t,
|
|
97
|
+
strokeWidth: 1,
|
|
98
|
+
strokeDasharray: "3 3",
|
|
99
|
+
vectorEffect: "non-scaling-stroke",
|
|
100
|
+
opacity: .7
|
|
101
|
+
}),
|
|
102
|
+
x(W)
|
|
103
|
+
]
|
|
104
|
+
}), w !== null && y ? /* @__PURE__ */ s("div", {
|
|
105
|
+
role: "status",
|
|
106
|
+
"aria-live": "polite",
|
|
107
|
+
className: "pointer-events-none absolute z-10 -translate-x-1/2 rounded-[var(--radius-input)] border border-border-subtle bg-bg-elevated px-2 py-1 text-xs text-text-primary shadow-elevation-2",
|
|
108
|
+
style: {
|
|
109
|
+
left: i(F(w), 48, Math.max(48, E - 48)),
|
|
110
|
+
top: N + 2
|
|
111
|
+
},
|
|
112
|
+
children: y(w)
|
|
113
|
+
}) : null]
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
//#endregion
|
|
117
|
+
export { d as CartesianFrame };
|
|
118
|
+
|
|
119
|
+
//# sourceMappingURL=CartesianFrame.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CartesianFrame.js","names":[],"sources":["../../../../../src/theglobalfuel/components/viz/lib/CartesianFrame.tsx"],"sourcesContent":["import { type KeyboardEvent, type MouseEvent, type ReactNode, useState } from 'react';\nimport { cn } from '../../../utils/cn';\nimport { CHART_AXIS, CHART_GRID } from './palette';\nimport { clamp, scaleLinear } from './geometry';\nimport { useElementWidth } from './hooks';\n\nexport interface CartesianContext {\n width: number;\n height: number;\n plotLeft: number;\n plotRight: number;\n plotTop: number;\n plotBottom: number;\n activeIndex: number | null;\n /** X pixel for a data index. */\n px: (index: number) => number;\n /** Y pixel for a data value. */\n py: (value: number) => number;\n}\n\ninterface Padding {\n left: number;\n right: number;\n top: number;\n bottom: number;\n}\n\nexport interface CartesianFrameProps {\n labels: string[];\n /** Y domain [low, high]. */\n domain: [number, number];\n height: number;\n title: string;\n desc?: string;\n formatValue: (value: number) => string;\n /** Number of grid intervals (lines = intervals + 1). */\n yTicks?: number;\n padding?: Partial<Padding>;\n tooltip?: (index: number) => ReactNode;\n className?: string;\n children: (ctx: CartesianContext) => ReactNode;\n}\n\nconst DEFAULT_PADDING: Padding = { left: 40, right: 14, top: 14, bottom: 26 };\nconst MAX_X_LABELS = 7;\n\n/**\n * Shared cartesian chart chrome: faint grid, tokenized axes, and pointer +\n * keyboard driven hover with an accessible tooltip. The series marks are\n * supplied via the render-prop `children`, which receives pixel scales.\n */\nexport function CartesianFrame({\n labels,\n domain,\n height,\n title,\n desc,\n formatValue,\n yTicks = 4,\n padding,\n tooltip,\n className,\n children,\n}: CartesianFrameProps) {\n const [ref, measured] = useElementWidth<HTMLDivElement>();\n const [activeIndex, setActiveIndex] = useState<number | null>(null);\n const width = measured > 0 ? measured : 480;\n\n const pad = { ...DEFAULT_PADDING, ...padding };\n const n = labels.length;\n const [lo, hi] = domain;\n const plotLeft = pad.left;\n const plotRight = width - pad.right;\n const plotTop = pad.top;\n const plotBottom = height - pad.bottom;\n\n const px = (index: number): number =>\n n <= 1 ? (plotLeft + plotRight) / 2 : plotLeft + ((plotRight - plotLeft) * index) / (n - 1);\n const py = (value: number): number =>\n plotBottom - scaleLinear(value, lo, hi, 0, plotBottom - plotTop);\n\n const gridValues = Array.from({ length: yTicks + 1 }, (_, k) => lo + ((hi - lo) * k) / yTicks);\n const xStep = Math.max(1, Math.ceil(n / MAX_X_LABELS));\n const xLabelIndexes = labels.map((_, i) => i).filter((i) => i % xStep === 0 || i === n - 1);\n\n const setNearest = (clientX: number): void => {\n const el = ref.current;\n if (!el || n === 0) {\n return;\n }\n const rect = el.getBoundingClientRect();\n const x = clientX - rect.left;\n let best = 0;\n let bestDistance = Infinity;\n for (let i = 0; i < n; i += 1) {\n const distance = Math.abs(px(i) - x);\n if (distance < bestDistance) {\n bestDistance = distance;\n best = i;\n }\n }\n setActiveIndex(best);\n };\n\n const handleMove = (event: MouseEvent<HTMLDivElement>): void => setNearest(event.clientX);\n const handleLeave = (): void => setActiveIndex(null);\n const handleKey = (event: KeyboardEvent<HTMLDivElement>): void => {\n if (n === 0) {\n return;\n }\n if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n event.preventDefault();\n const base = activeIndex ?? (event.key === 'ArrowRight' ? -1 : n);\n setActiveIndex(clamp(base + (event.key === 'ArrowRight' ? 1 : -1), 0, n - 1));\n } else if (event.key === 'Home') {\n event.preventDefault();\n setActiveIndex(0);\n } else if (event.key === 'End') {\n event.preventDefault();\n setActiveIndex(n - 1);\n } else if (event.key === 'Escape') {\n setActiveIndex(null);\n }\n };\n\n const ctx: CartesianContext = {\n width,\n height,\n plotLeft,\n plotRight,\n plotTop,\n plotBottom,\n activeIndex,\n px,\n py,\n };\n\n return (\n <div\n ref={ref}\n className={cn(\n 'relative w-full rounded-[var(--radius-card)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]',\n className\n )}\n tabIndex={0}\n role=\"img\"\n aria-label={title}\n onMouseMove={handleMove}\n onMouseLeave={handleLeave}\n onBlur={handleLeave}\n onKeyDown={handleKey}\n >\n <svg\n viewBox={`0 0 ${width} ${height}`}\n width=\"100%\"\n height={height}\n preserveAspectRatio=\"none\"\n style={{ display: 'block', overflow: 'visible' }}\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <title>{title}</title>\n {desc ? <desc>{desc}</desc> : null}\n {gridValues.map((value, k) => (\n <line\n key={`grid-${k}`}\n x1={plotLeft}\n x2={plotRight}\n y1={py(value)}\n y2={py(value)}\n stroke={CHART_GRID}\n strokeWidth={1}\n vectorEffect=\"non-scaling-stroke\"\n opacity={0.6}\n />\n ))}\n {gridValues.map((value, k) => (\n <text\n key={`ylabel-${k}`}\n x={plotLeft - 7}\n y={py(value)}\n textAnchor=\"end\"\n dominantBaseline=\"central\"\n fontSize={10}\n fill={CHART_AXIS}\n >\n {formatValue(value)}\n </text>\n ))}\n {xLabelIndexes.map((i) => (\n <text\n key={`xlabel-${i}`}\n x={px(i)}\n y={height - 8}\n textAnchor=\"middle\"\n fontSize={10}\n fill={CHART_AXIS}\n >\n {labels[i]}\n </text>\n ))}\n {activeIndex !== null ? (\n <line\n x1={px(activeIndex)}\n x2={px(activeIndex)}\n y1={plotTop}\n y2={plotBottom}\n stroke={CHART_AXIS}\n strokeWidth={1}\n strokeDasharray=\"3 3\"\n vectorEffect=\"non-scaling-stroke\"\n opacity={0.7}\n />\n ) : null}\n {children(ctx)}\n </svg>\n {activeIndex !== null && tooltip ? (\n <div\n role=\"status\"\n aria-live=\"polite\"\n className=\"pointer-events-none absolute z-10 -translate-x-1/2 rounded-[var(--radius-input)] border border-border-subtle bg-bg-elevated px-2 py-1 text-xs text-text-primary shadow-elevation-2\"\n style={{\n left: clamp(px(activeIndex), 48, Math.max(48, width - 48)),\n top: plotTop + 2,\n }}\n >\n {tooltip(activeIndex)}\n </div>\n ) : null}\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { cn as e } from "../../../utils/cn.js";
|
|
2
|
+
import { useElementWidth as t } from "./hooks.js";
|
|
3
|
+
import { jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
4
|
+
//#region src/theglobalfuel/components/viz/lib/ResponsiveSvg.tsx
|
|
5
|
+
function i({ height: i, title: a, desc: o, className: s, minWidth: c = 320, overflowVisible: l = !0, children: u }) {
|
|
6
|
+
let [d, f] = t(), p = f > 0 ? f : c;
|
|
7
|
+
return /* @__PURE__ */ n("div", {
|
|
8
|
+
ref: d,
|
|
9
|
+
className: e("w-full", s),
|
|
10
|
+
children: /* @__PURE__ */ r("svg", {
|
|
11
|
+
viewBox: `0 0 ${p} ${i}`,
|
|
12
|
+
width: "100%",
|
|
13
|
+
height: i,
|
|
14
|
+
preserveAspectRatio: "none",
|
|
15
|
+
role: "img",
|
|
16
|
+
"aria-label": a,
|
|
17
|
+
style: {
|
|
18
|
+
display: "block",
|
|
19
|
+
overflow: l ? "visible" : "hidden"
|
|
20
|
+
},
|
|
21
|
+
children: [
|
|
22
|
+
/* @__PURE__ */ n("title", { children: a }),
|
|
23
|
+
o ? /* @__PURE__ */ n("desc", { children: o }) : null,
|
|
24
|
+
u({
|
|
25
|
+
width: p,
|
|
26
|
+
height: i
|
|
27
|
+
})
|
|
28
|
+
]
|
|
29
|
+
})
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
//#endregion
|
|
33
|
+
export { i as ResponsiveSvg };
|
|
34
|
+
|
|
35
|
+
//# sourceMappingURL=ResponsiveSvg.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ResponsiveSvg.js","names":[],"sources":["../../../../../src/theglobalfuel/components/viz/lib/ResponsiveSvg.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '../../../utils/cn';\nimport { useElementWidth } from './hooks';\n\nexport interface ResponsiveSvgDims {\n width: number;\n height: number;\n}\n\nexport interface ResponsiveSvgProps {\n /** Fixed pixel height; width is measured from the container. */\n height: number;\n /** Accessible name announced for the chart. */\n title: string;\n /** Optional longer description linked via <desc>. */\n desc?: string;\n className?: string;\n /** Width assumed before the container has been measured. */\n minWidth?: number;\n /** Allow marks (endpoint halos, labels) to paint outside the viewBox. */\n overflowVisible?: boolean;\n children: (dims: ResponsiveSvgDims) => ReactNode;\n}\n\n/**\n * A width-measuring SVG frame. Because the viewBox matches the rendered pixel\n * box 1:1, circles stay circular and strokes stay crisp at any width, while the\n * chart still fills its container and reflows on resize.\n */\nexport function ResponsiveSvg({\n height,\n title,\n desc,\n className,\n minWidth = 320,\n overflowVisible = true,\n children,\n}: ResponsiveSvgProps) {\n const [ref, measured] = useElementWidth<HTMLDivElement>();\n const width = measured > 0 ? measured : minWidth;\n return (\n <div ref={ref} className={cn('w-full', className)}>\n <svg\n viewBox={`0 0 ${width} ${height}`}\n width=\"100%\"\n height={height}\n preserveAspectRatio=\"none\"\n role=\"img\"\n aria-label={title}\n style={{ display: 'block', overflow: overflowVisible ? 'visible' : 'hidden' }}\n >\n <title>{title}</title>\n {desc ? <desc>{desc}</desc> : null}\n {children({ width, height })}\n </svg>\n </div>\n );\n}\n"],"mappings":";;;;AA6BA,SAAgB,EAAc,EAC5B,WACA,UACA,SACA,cACA,cAAW,KACX,qBAAkB,IAClB,eACqB;CACrB,IAAM,CAAC,GAAK,KAAY,GAAiC,EACnD,IAAQ,IAAW,IAAI,IAAW;AACxC,QACE,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAG,UAAU,EAAU;YAC/C,kBAAC,OAAD;GACE,SAAS,OAAO,EAAM,GAAG;GACzB,OAAM;GACE;GACR,qBAAoB;GACpB,MAAK;GACL,cAAY;GACZ,OAAO;IAAE,SAAS;IAAS,UAAU,IAAkB,YAAY;IAAU;aAP/E;IASE,kBAAC,SAAD,EAAA,UAAQ,GAAc,CAAA;IACrB,IAAO,kBAAC,QAAD,EAAA,UAAO,GAAY,CAAA,GAAG;IAC7B,EAAS;KAAE;KAAO;KAAQ,CAAC;IACxB;;EACF,CAAA"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
//#region src/theglobalfuel/components/viz/lib/format.ts
|
|
2
|
+
function e(e) {
|
|
3
|
+
return (Math.round(e * 10) / 10).toString();
|
|
4
|
+
}
|
|
5
|
+
function t(t) {
|
|
6
|
+
let n = Math.abs(t);
|
|
7
|
+
return n >= 1e9 ? `${e(t / 1e9)}B` : n >= 1e6 ? `${e(t / 1e6)}M` : n >= 1e3 ? `${e(t / 1e3)}k` : String(t);
|
|
8
|
+
}
|
|
9
|
+
function n(e, t, n = 0) {
|
|
10
|
+
if (t === 0) return 0;
|
|
11
|
+
let r = 10 ** n;
|
|
12
|
+
return Math.round(e / t * 100 * r) / r;
|
|
13
|
+
}
|
|
14
|
+
//#endregion
|
|
15
|
+
export { t as formatCompact, n as toPercent };
|
|
16
|
+
|
|
17
|
+
//# sourceMappingURL=format.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"format.js","names":[],"sources":["../../../../../src/theglobalfuel/components/viz/lib/format.ts"],"sourcesContent":["/**\n * Pure formatting helpers for the visualization kit. No React / DOM.\n */\n\nfunction trimDecimal(n: number): string {\n return (Math.round(n * 10) / 10).toString();\n}\n\n/** Compact number formatting: 1200 -> \"1.2k\", 3_400_000 -> \"3.4M\". */\nexport function formatCompact(value: number): string {\n const abs = Math.abs(value);\n if (abs >= 1_000_000_000) {\n return `${trimDecimal(value / 1_000_000_000)}B`;\n }\n if (abs >= 1_000_000) {\n return `${trimDecimal(value / 1_000_000)}M`;\n }\n if (abs >= 1_000) {\n return `${trimDecimal(value / 1_000)}k`;\n }\n return String(value);\n}\n\n/** Value as a percentage of a total, rounded to `digits` decimals (0 when total is 0). */\nexport function toPercent(value: number, total: number, digits = 0): number {\n if (total === 0) {\n return 0;\n }\n const factor = 10 ** digits;\n return Math.round((value / total) * 100 * factor) / factor;\n}\n\n/** Up-to-two-letter initials from a display name. */\nexport function getInitials(name: string): string {\n const parts = name.trim().split(/\\s+/).filter(Boolean);\n if (parts.length === 0) {\n return '?';\n }\n if (parts.length === 1) {\n return parts[0].slice(0, 2).toUpperCase();\n }\n return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();\n}\n"],"mappings":";AAIA,SAAS,EAAY,GAAmB;AACtC,SAAQ,KAAK,MAAM,IAAI,GAAG,GAAG,IAAI,UAAU;;AAI7C,SAAgB,EAAc,GAAuB;CACnD,IAAM,IAAM,KAAK,IAAI,EAAM;AAU3B,QATI,KAAO,MACF,GAAG,EAAY,IAAQ,IAAc,CAAC,KAE3C,KAAO,MACF,GAAG,EAAY,IAAQ,IAAU,CAAC,KAEvC,KAAO,MACF,GAAG,EAAY,IAAQ,IAAM,CAAC,KAEhC,OAAO,EAAM;;AAItB,SAAgB,EAAU,GAAe,GAAe,IAAS,GAAW;AAC1E,KAAI,MAAU,EACZ,QAAO;CAET,IAAM,IAAS,MAAM;AACrB,QAAO,KAAK,MAAO,IAAQ,IAAS,MAAM,EAAO,GAAG"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
//#region src/theglobalfuel/components/viz/lib/geometry.ts
|
|
2
|
+
function e(e, t, n) {
|
|
3
|
+
return Math.min(n, Math.max(t, e));
|
|
4
|
+
}
|
|
5
|
+
function t(e) {
|
|
6
|
+
if (e.length === 0) return [0, 0];
|
|
7
|
+
let t = e[0], n = e[0];
|
|
8
|
+
for (let r of e) r < t && (t = r), r > n && (n = r);
|
|
9
|
+
return [t, n];
|
|
10
|
+
}
|
|
11
|
+
function n(e) {
|
|
12
|
+
let [n, r] = t(e);
|
|
13
|
+
return [Math.min(0, n), Math.max(0, r)];
|
|
14
|
+
}
|
|
15
|
+
function r(e, t, n, r, i) {
|
|
16
|
+
return n === t ? (r + i) / 2 : r + (e - t) / (n - t) * (i - r);
|
|
17
|
+
}
|
|
18
|
+
function i(e) {
|
|
19
|
+
return Math.round(e * 100) / 100;
|
|
20
|
+
}
|
|
21
|
+
function a(e, t, a, o = 0, s) {
|
|
22
|
+
let c = e.length;
|
|
23
|
+
if (c === 0) return [];
|
|
24
|
+
let [l, u] = s ?? n(e), d = Math.max(0, t - o * 2), f = Math.max(0, a - o * 2);
|
|
25
|
+
return e.map((e, t) => {
|
|
26
|
+
let n = o + (c === 1 ? d / 2 : d * t / (c - 1)), a = o + f - r(e, l, u, 0, f);
|
|
27
|
+
return {
|
|
28
|
+
x: i(n),
|
|
29
|
+
y: i(a)
|
|
30
|
+
};
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
function o(e) {
|
|
34
|
+
return e.length === 0 ? "" : e.map((e, t) => `${t === 0 ? "M" : "L"}${i(e.x)},${i(e.y)}`).join(" ");
|
|
35
|
+
}
|
|
36
|
+
function s(e, t) {
|
|
37
|
+
if (e.length === 0) return "";
|
|
38
|
+
let n = o(e), r = e[0], a = e[e.length - 1];
|
|
39
|
+
return `${n} L${i(a.x)},${i(t)} L${i(r.x)},${i(t)} Z`;
|
|
40
|
+
}
|
|
41
|
+
function c(e, t, n, r) {
|
|
42
|
+
let a = (r - 90) * Math.PI / 180;
|
|
43
|
+
return {
|
|
44
|
+
x: i(e + n * Math.cos(a)),
|
|
45
|
+
y: i(t + n * Math.sin(a))
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
function l(e, t, n, r, i, a) {
|
|
49
|
+
let o = c(e, t, n, a), s = c(e, t, n, i), l = c(e, t, r, a), u = c(e, t, r, i), d = +(a - i > 180);
|
|
50
|
+
return [
|
|
51
|
+
`M${o.x},${o.y}`,
|
|
52
|
+
`A${n},${n} 0 ${d} 0 ${s.x},${s.y}`,
|
|
53
|
+
`L${u.x},${u.y}`,
|
|
54
|
+
`A${r},${r} 0 ${d} 1 ${l.x},${l.y}`,
|
|
55
|
+
"Z"
|
|
56
|
+
].join(" ");
|
|
57
|
+
}
|
|
58
|
+
//#endregion
|
|
59
|
+
export { s as buildAreaPath, o as buildLinePath, e as clamp, l as donutSegmentPath, t as extent, n as extentWithZero, a as pointsFromValues, c as polarToCartesian, r as scaleLinear };
|
|
60
|
+
|
|
61
|
+
//# sourceMappingURL=geometry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"geometry.js","names":[],"sources":["../../../../../src/theglobalfuel/components/viz/lib/geometry.ts"],"sourcesContent":["/**\n * Pure geometry / scaling helpers for the CrewFoundry visualization kit.\n * No React, no DOM, no side effects — safe to unit test in isolation.\n */\n\nexport interface Point {\n x: number;\n y: number;\n}\n\n/** Clamp a value into an inclusive range. */\nexport function clamp(value: number, min: number, max: number): number {\n return Math.min(max, Math.max(min, value));\n}\n\n/** Sum of a numeric list (0 for empty). */\nexport function sum(values: readonly number[]): number {\n return values.reduce((acc, v) => acc + v, 0);\n}\n\n/** Min/max of a list. Returns [0, 0] for an empty list. */\nexport function extent(values: readonly number[]): [number, number] {\n if (values.length === 0) {\n return [0, 0];\n }\n let min = values[0];\n let max = values[0];\n for (const v of values) {\n if (v < min) {\n min = v;\n }\n if (v > max) {\n max = v;\n }\n }\n return [min, max];\n}\n\n/** Extent that always includes a zero baseline, so bars/areas anchor sensibly. */\nexport function extentWithZero(values: readonly number[]): [number, number] {\n const [min, max] = extent(values);\n return [Math.min(0, min), Math.max(0, max)];\n}\n\n/**\n * Linear map of `value` from a domain onto a range. Degenerate domains\n * (min === max) map to the range midpoint instead of dividing by zero.\n */\nexport function scaleLinear(\n value: number,\n domainMin: number,\n domainMax: number,\n rangeMin: number,\n rangeMax: number\n): number {\n if (domainMax === domainMin) {\n return (rangeMin + rangeMax) / 2;\n }\n const t = (value - domainMin) / (domainMax - domainMin);\n return rangeMin + t * (rangeMax - rangeMin);\n}\n\n/** Round to 2 decimals — keeps generated path strings compact. */\nfunction round(n: number): number {\n return Math.round(n * 100) / 100;\n}\n\n/**\n * Evenly space a list of y-values across a box and invert Y (SVG origin is\n * top-left, so larger values render higher).\n */\nexport function pointsFromValues(\n values: readonly number[],\n width: number,\n height: number,\n padding = 0,\n domain?: [number, number]\n): Point[] {\n const n = values.length;\n if (n === 0) {\n return [];\n }\n const [dMin, dMax] = domain ?? extentWithZero(values);\n const innerW = Math.max(0, width - padding * 2);\n const innerH = Math.max(0, height - padding * 2);\n return values.map((v, i) => {\n const x = padding + (n === 1 ? innerW / 2 : (innerW * i) / (n - 1));\n const y = padding + innerH - scaleLinear(v, dMin, dMax, 0, innerH);\n return { x: round(x), y: round(y) };\n });\n}\n\n/** Build an SVG polyline `d` from points. */\nexport function buildLinePath(points: readonly Point[]): string {\n if (points.length === 0) {\n return '';\n }\n return points.map((p, i) => `${i === 0 ? 'M' : 'L'}${round(p.x)},${round(p.y)}`).join(' ');\n}\n\n/** Build a closed area `d` (line dropped to a baseline and closed). */\nexport function buildAreaPath(points: readonly Point[], baselineY: number): string {\n if (points.length === 0) {\n return '';\n }\n const line = buildLinePath(points);\n const first = points[0];\n const last = points[points.length - 1];\n return `${line} L${round(last.x)},${round(baselineY)} L${round(first.x)},${round(baselineY)} Z`;\n}\n\n/** SVG path for an n-pointed star centered at (cx, cy). */\nexport function starPath(\n cx: number,\n cy: number,\n outerRadius: number,\n innerRadius: number,\n points = 5\n): string {\n const total = points * 2;\n const coords: Point[] = [];\n for (let i = 0; i < total; i += 1) {\n const radius = i % 2 === 0 ? outerRadius : innerRadius;\n coords.push(polarToCartesian(cx, cy, radius, (i * 360) / total));\n }\n return `${coords.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ')} Z`;\n}\n\n/** Convert a polar coordinate (degrees, clockwise from 12 o'clock) to cartesian. */\nexport function polarToCartesian(cx: number, cy: number, radius: number, angleDeg: number): Point {\n const a = ((angleDeg - 90) * Math.PI) / 180;\n return { x: round(cx + radius * Math.cos(a)), y: round(cy + radius * Math.sin(a)) };\n}\n\n/**\n * Annular (donut) segment path between two angles, clockwise from 12 o'clock.\n * For a full 360° sweep the caller should draw a ring instead (this path\n * degenerates when start and end coincide).\n */\nexport function donutSegmentPath(\n cx: number,\n cy: number,\n rOuter: number,\n rInner: number,\n startAngle: number,\n endAngle: number\n): string {\n const startOuter = polarToCartesian(cx, cy, rOuter, endAngle);\n const endOuter = polarToCartesian(cx, cy, rOuter, startAngle);\n const startInner = polarToCartesian(cx, cy, rInner, endAngle);\n const endInner = polarToCartesian(cx, cy, rInner, startAngle);\n const largeArc = endAngle - startAngle > 180 ? 1 : 0;\n return [\n `M${startOuter.x},${startOuter.y}`,\n `A${rOuter},${rOuter} 0 ${largeArc} 0 ${endOuter.x},${endOuter.y}`,\n `L${endInner.x},${endInner.y}`,\n `A${rInner},${rInner} 0 ${largeArc} 1 ${startInner.x},${startInner.y}`,\n 'Z',\n ].join(' ');\n}\n"],"mappings":"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"}
|