npm - @plumile/ui - Versions diffs - 0.1.122 → 0.1.130 - Mend

@plumile/ui 0.1.122 → 0.1.130

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.

Files changed (67) hide show

package/lib/esm/__tests__/reactDomTestUtils.js ADDED Viewed

@@ -0,0 +1,48 @@
+import { afterAll as e, afterEach as t } from "../node_modules/@vitest/runner/dist/chunk-artifact.js";
+import { act as n } from "react";
+import { createRoot as r } from "react-dom/client";
+//#region src/__tests__/reactDomTestUtils.tsx
+var i = /* @__PURE__ */ new Map(), a, o = !1, s = async () => {
+	let e = [...i.keys()];
+	for (let t of e) await n(async () => {
+		t.unmount();
+	}), i.get(t)?.remove(), i.delete(t);
+	document.body.innerHTML = "";
+}, c = () => {
+	o || (o = !0, a = Object.getOwnPropertyDescriptor(globalThis, "IS_REACT_ACT_ENVIRONMENT"), Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", {
+		value: !0,
+		configurable: !0
+	}), t(async () => {
+		await s();
+	}), e(() => {
+		if (a == null) {
+			Reflect.deleteProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT");
+			return;
+		}
+		Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", a);
+	}));
+}, l = async (e, t) => {
+	let a = t?.container ?? document.createElement("div");
+	document.body.contains(a) || document.body.append(a);
+	let o = r(a);
+	i.set(o, a);
+	let s = async (e) => {
+		await n(async () => {
+			o.render(e);
+		});
+	};
+	return await s(e), {
+		container: a,
+		root: o,
+		rerender: s,
+		unmount: async () => {
+			i.has(o) && (await n(async () => {
+				o.unmount();
+			}), a.remove(), i.delete(o));
+		}
+	};
+};
+//#endregion
+export { n as act, s as cleanupReactDomTests, l as renderReactDom, c as setupReactDomTests };
+//# sourceMappingURL=reactDomTestUtils.js.map

package/lib/esm/__tests__/reactDomTestUtils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"reactDomTestUtils.js","names":[],"sources":["../../../src/__tests__/reactDomTestUtils.tsx"],"sourcesContent":["import { act, type ReactNode } from 'react';\nimport { createRoot, type Root } from 'react-dom/client';\nimport { afterAll, afterEach } from 'vitest';\n\ntype RenderReactDomResult = {\n container: HTMLDivElement;\n root: Root;\n rerender: (node: ReactNode) => Promise<void>;\n unmount: () => Promise<void>;\n};\n\nconst mountedRoots = new Map<Root, HTMLDivElement>();\n\nlet previousActEnvironmentDescriptor: PropertyDescriptor | null | undefined;\nlet isSetup = false;\n\nexport { act };\n\nexport const cleanupReactDomTests = async (): Promise<void> => {\n const roots = [...mountedRoots.keys()];\n for (const root of roots) {\n await act(async () => {\n root.unmount();\n });\n\n const container = mountedRoots.get(root);\n container?.remove();\n mountedRoots.delete(root);\n }\n\n document.body.innerHTML = '';\n};\n\nexport const setupReactDomTests = (): void => {\n if (isSetup) {\n return;\n }\n\n isSetup = true;\n previousActEnvironmentDescriptor = Object.getOwnPropertyDescriptor(\n globalThis,\n 'IS_REACT_ACT_ENVIRONMENT',\n );\n\n Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', {\n value: true,\n configurable: true,\n });\n\n afterEach(async () => {\n await cleanupReactDomTests();\n });\n\n afterAll(() => {\n if (previousActEnvironmentDescriptor == null) {\n Reflect.deleteProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT');\n return;\n }\n\n Object.defineProperty(\n globalThis,\n 'IS_REACT_ACT_ENVIRONMENT',\n previousActEnvironmentDescriptor,\n );\n });\n};\n\nexport const renderReactDom = async (\n node: ReactNode,\n options?: {\n container?: HTMLDivElement;\n },\n): Promise<RenderReactDomResult> => {\n const container = options?.container ?? document.createElement('div');\n if (!document.body.contains(container)) {\n document.body.append(container);\n }\n\n const root = createRoot(container);\n mountedRoots.set(root, container);\n\n const rerender = async (nextNode: ReactNode): Promise<void> => {\n await act(async () => {\n root.render(nextNode);\n });\n };\n\n const unmount = async (): Promise<void> => {\n if (!mountedRoots.has(root)) {\n return;\n }\n\n await act(async () => {\n root.unmount();\n });\n container.remove();\n mountedRoots.delete(root);\n };\n\n await rerender(node);\n\n return {\n container,\n root,\n rerender,\n unmount,\n };\n};\n"],"mappings":";;;;AAWA,IAAM,oBAAe,IAAI,KAA2B,EAEhD,GACA,IAAU,IAID,IAAuB,YAA2B;CAC7D,IAAM,IAAQ,CAAC,GAAG,EAAa,MAAM,CAAC;CACtC,KAAK,IAAM,KAAQ,GAOjB,AANA,MAAM,EAAI,YAAY;EACpB,EAAK,SAAS;GACd,EAGF,EAD+B,IAAI,EACnC,EAAW,QAAQ,EACnB,EAAa,OAAO,EAAK;CAG3B,SAAS,KAAK,YAAY;GAGf,UAAiC;CACxC,MAIJ,IAAU,IACV,IAAmC,OAAO,yBACxC,YACA,2BACD,EAED,OAAO,eAAe,YAAY,4BAA4B;EAC5D,OAAO;EACP,cAAc;EACf,CAAC,EAEF,EAAU,YAAY;EACpB,MAAM,GAAsB;GAC5B,EAEF,QAAe;EACb,IAAI,KAAoC,MAAM;GAC5C,QAAQ,eAAe,YAAY,2BAA2B;GAC9D;;EAGF,OAAO,eACL,YACA,4BACA,EACD;GACD;GAGS,IAAiB,OAC5B,GACA,MAGkC;CAClC,IAAM,IAAY,GAAS,aAAa,SAAS,cAAc,MAAM;CACrE,AAAK,SAAS,KAAK,SAAS,EAAU,IACpC,SAAS,KAAK,OAAO,EAAU;CAGjC,IAAM,IAAO,EAAW,EAAU;CAClC,EAAa,IAAI,GAAM,EAAU;CAEjC,IAAM,IAAW,OAAO,MAAuC;EAC7D,MAAM,EAAI,YAAY;GACpB,EAAK,OAAO,EAAS;IACrB;;CAiBJ,OAFA,MAAM,EAAS,EAAK,EAEb;EACL;EACA;EACA;EACA,qBAlByC;GACpC,EAAa,IAAI,EAAK,KAI3B,MAAM,EAAI,YAAY;IACpB,EAAK,SAAS;KACd,EACF,EAAU,QAAQ,EAClB,EAAa,OAAO,EAAK;;EAU1B"}

package/lib/esm/admin/organisms/admin_sidebar/adminSidebar.css.js CHANGED Viewed

@@ -4,7 +4,6 @@
 /* empty css                                        */
 /* empty css                                       */
 /* empty css                                  */
-/* empty css                                         */
 /* empty css                            */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/admin/organisms/admin_sidebar/adminSidebar.css.ts

package/lib/esm/admin/theme/adminSurface.css.js CHANGED Viewed

@@ -6,6 +6,7 @@
 /* empty css                               */
 /* empty css                            */
 /* empty css                            */
+/* empty css                                      */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/admin/theme/adminSurface.css.ts
 var t = e({

package/lib/esm/atomic/molecules/markdown/components/MarkdownTable.css.js CHANGED Viewed

@@ -1,6 +1,5 @@
 /* empty css                                         */
 /* empty css                             */
-/* empty css                             */
 //#region src/atomic/molecules/markdown/components/MarkdownTable.css.ts
 var e = "tr18yy0 txvbqb196b txvbqb17h txvbqb2gm txvbqb2et txvbqb1uy txvbqbn8h txvbqbusr txvbqbuvn", t = "tr18yy2 tr18yy1 txvbqbbl8 txvbqbana txvbqbtqh txvbqb17w0";
 //#endregion

package/lib/esm/atomic/molecules/markdown/markdownVars.css.js CHANGED Viewed

@@ -1,3 +1,4 @@
+/* empty css                            */
 //#region src/atomic/molecules/markdown/markdownVars.css.ts
 var e = "var(--_1pjotr20)", t = "var(--_1pjotr21)", n = "var(--_1pjotr22)", r = "var(--_1pjotr23)", i = "var(--_1pjotr24)", a = "var(--_1pjotr25)";
 //#endregion

package/lib/esm/backoffice/atoms/tag/Tag.js CHANGED Viewed

@@ -5,14 +5,14 @@ import { useId as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { useTranslation as s } from "react-i18next";
 //#region src/backoffice/atoms/tag/Tag.tsx
-var c = ({ children: c, tone: l = "neutral", className: u, onRemove: d, removeLabel: f }) => {
-	let { t: p } = s("ui", { useSuspense: !1 }), m = i(), h = typeof d == "function", g = f ?? p("backoffice.tag.remove", { defaultValue: "Remove" }), _ = null;
-	return h && (_ = /* @__PURE__ */ a("button", {
+var c = ({ children: c, tone: l = "neutral", className: u, title: d, onRemove: f, removeLabel: p }) => {
+	let { t: m } = s("ui", { useSuspense: !1 }), h = i(), g = typeof f == "function", _ = p ?? m("backoffice.tag.remove", { defaultValue: "Remove" }), v = null;
+	return g && (v = /* @__PURE__ */ a("button", {
 		type: "button",
 		className: n,
-		onClick: d,
-		"aria-label": g,
-		"aria-describedby": m,
+		onClick: f,
+		"aria-label": _,
+		"aria-describedby": h,
 		children: /* @__PURE__ */ a(t, {
 			width: 14,
 			height: 14,
@@ -20,10 +20,11 @@ var c = ({ children: c, tone: l = "neutral", className: u, onRemove: d, removeLa
 		})
 	})), /* @__PURE__ */ o("span", {
 		className: e(r({ tone: l }), u),
+		title: d,
 		children: [/* @__PURE__ */ a("span", {
-			id: m,
+			id: h,
 			children: c
-		}), _]
+		}), v]
 	});
 };
 //#endregion

package/lib/esm/backoffice/atoms/tag/Tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.js","names":[],"sources":["../../../../../src/backoffice/atoms/tag/Tag.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useId } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { ModalCloseSvg } from '../../../icons/ModalCloseSvg.js';\n\nimport * as styles from './tag.css.js';\nimport { cx } from '../../../theme/tools.js';\n\nexport type TagTone = NonNullable<\n NonNullable<RecipeVariants<typeof styles.rootRecipe>>['tone']\n>;\n\nexport type TagProps = {\n children: ReactNode;\n tone?: TagTone;\n className?: string;\n onRemove?: () => void;\n removeLabel?: string;\n};\n\nexport const Tag = ({\n children,\n tone = 'neutral',\n className,\n onRemove,\n removeLabel,\n}: TagProps): JSX.Element => {\n const { t } = useTranslation('ui', { useSuspense: false });\n const labelId = useId();\n const isRemovable = typeof onRemove === 'function';\n const resolvedRemoveLabel =\n removeLabel ?? t('backoffice.tag.remove', { defaultValue: 'Remove' });\n\n let removeButtonNode: JSX.Element \| null = null;\n if (isRemovable) {\n removeButtonNode = (\n <button\n type=\"button\"\n className={styles.removeButton}\n onClick={onRemove}\n aria-label={resolvedRemoveLabel}\n aria-describedby={labelId}\n >\n <ModalCloseSvg width={14} height={14} aria-hidden=\"true\" />\n </button>\n );\n }\n\n return (\n <span className={cx(styles.rootRecipe({ tone }), className)}>\n <span id={labelId}>{children}</span>\n {removeButtonNode}\n </span>\n );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;~~AAqBA~~,IAAa,KAAO,EAClB,aACA,UAAO,WACP,cACA,aACA,qBAC2B;CAC3B,IAAM,EAAE,SAAM,EAAe,MAAM,EAAE,aAAa,IAAO,CAAC,EACpD,IAAU,GAAO,EACjB,IAAc,OAAO,KAAa,YAClC,IACJ,KAAe,EAAE,yBAAyB,EAAE,cAAc,UAAU,CAAC,EAEnE,IAAuC;CAe3C,OAdI,MACF,IACE,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,SAAS;EACT,cAAY;EACZ,oBAAkB;YAElB,kBAAC,GAAD;GAAe,OAAO;GAAI,QAAQ;GAAI,eAAY;GAAS,CAAA;EACpD,CAAA,GAKX,kBAAC,QAAD;EAAM,WAAW,EAAG,EAAkB,EAAE,SAAM,CAAC,EAAE,EAAU;~~YAA3D~~,CACE,kBAAC,QAAD;GAAM,IAAI;GAAU;GAAgB,CAAA,EACnC,EACI"}
1	+ {"version":3,"file":"Tag.js","names":[],"sources":["../../../../../src/backoffice/atoms/tag/Tag.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useId } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { ModalCloseSvg } from '../../../icons/ModalCloseSvg.js';\n\nimport * as styles from './tag.css.js';\nimport { cx } from '../../../theme/tools.js';\n\nexport type TagTone = NonNullable<\n NonNullable<RecipeVariants<typeof styles.rootRecipe>>['tone']\n>;\n\nexport type TagProps = {\n children: ReactNode;\n tone?: TagTone;\n className?: string;\n title?: string;\n onRemove?: () => void;\n removeLabel?: string;\n};\n\nexport const Tag = ({\n children,\n tone = 'neutral',\n className,\n title,\n onRemove,\n removeLabel,\n}: TagProps): JSX.Element => {\n const { t } = useTranslation('ui', { useSuspense: false });\n const labelId = useId();\n const isRemovable = typeof onRemove === 'function';\n const resolvedRemoveLabel =\n removeLabel ?? t('backoffice.tag.remove', { defaultValue: 'Remove' });\n\n let removeButtonNode: JSX.Element \| null = null;\n if (isRemovable) {\n removeButtonNode = (\n <button\n type=\"button\"\n className={styles.removeButton}\n onClick={onRemove}\n aria-label={resolvedRemoveLabel}\n aria-describedby={labelId}\n >\n <ModalCloseSvg width={14} height={14} aria-hidden=\"true\" />\n </button>\n );\n }\n\n return (\n <span className={cx(styles.rootRecipe({ tone }), className)} title={title}>\n <span id={labelId}>{children}</span>\n {removeButtonNode}\n </span>\n );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;AAsBA,IAAa,KAAO,EAClB,aACA,UAAO,WACP,cACA,UACA,aACA,qBAC2B;CAC3B,IAAM,EAAE,SAAM,EAAe,MAAM,EAAE,aAAa,IAAO,CAAC,EACpD,IAAU,GAAO,EACjB,IAAc,OAAO,KAAa,YAClC,IACJ,KAAe,EAAE,yBAAyB,EAAE,cAAc,UAAU,CAAC,EAEnE,IAAuC;CAe3C,OAdI,MACF,IACE,kBAAC,UAAD;EACE,MAAK;EACL,WAAW;EACX,SAAS;EACT,cAAY;EACZ,oBAAkB;YAElB,kBAAC,GAAD;GAAe,OAAO;GAAI,QAAQ;GAAI,eAAY;GAAS,CAAA;EACpD,CAAA,GAKX,kBAAC,QAAD;EAAM,WAAW,EAAG,EAAkB,EAAE,SAAM,CAAC,EAAE,EAAU;EAAS;YAApE,CACE,kBAAC,QAAD;GAAM,IAAI;GAAU;GAAgB,CAAA,EACnC,EACI"}

package/lib/esm/components/charts/MetricHistoryChart.js CHANGED Viewed

@@ -1,30 +1,12 @@
 import { vars as e } from "../../theme/themeContract.js";
 import { chartContainer as t, emptyState as n, tooltip as r, tooltipDate as i, tooltipRow as a, tooltipRowLabel as o, tooltipSwatch as s } from "./metricHistoryChart.css.js";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { ResponsiveLine as u } from "@nivo/line";
+import { formatAxisTimestamp as c, formatDefaultTimestamp as l, formatDefaultValue as u } from "../../internal/charts/metricHistoryChartHelpers.js";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { ResponsiveLine as p } from "@nivo/line";
 //#region src/components/charts/MetricHistoryChart.tsx
-function d(e, t) {
-	let n = new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }).format(e);
-	return t == null || t.length === 0 ? n : `${n} ${t}`;
-}
-function f(e) {
-	let t = new Date(e);
-	return Number.isNaN(t.getTime()) ? e : t.toLocaleString(void 0, {
-		month: "short",
-		day: "2-digit",
-		hour: "2-digit",
-		minute: "2-digit"
-	});
-}
-function p(e) {
-	return e.toLocaleTimeString(void 0, {
-		hour: "2-digit",
-		minute: "2-digit"
-	});
-}
-var m = ({ ariaLabel: m, emptyMessage: h = "No data", formatTimestamp: g = f, formatValue: _ = d, series: v }) => {
+var m = ({ ariaLabel: m, emptyMessage: h = "No data", formatTimestamp: g = l, formatValue: _ = u, series: v }) => {
 	let y = v.filter((e) => e.data.length > 0);
-	if (y.length === 0) return /* @__PURE__ */ c("div", {
+	if (y.length === 0) return /* @__PURE__ */ d("div", {
 		className: n,
 		children: h
 	});
@@ -33,9 +15,9 @@ var m = ({ ariaLabel: m, emptyMessage: h = "No data", formatTimestamp: g = f, fo
 		label: e.label,
 		unit: e.unit
 	}]));
-	return /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ d("div", {
 		className: t,
-		children: /* @__PURE__ */ c(u, {
+		children: /* @__PURE__ */ d(p, {
 			data: y.map((e) => ({
 				id: e.id,
 				data: e.data.map((e) => ({
@@ -77,7 +59,7 @@ var m = ({ ariaLabel: m, emptyMessage: h = "No data", formatTimestamp: g = f, fo
 			axisTop: null,
 			axisRight: null,
 			axisBottom: {
-				format: (e) => e instanceof Date ? p(e) : "",
+				format: (e) => e instanceof Date ? c(e) : "",
 				tickSize: 0,
 				tickPadding: 10,
 				tickValues: "every 15 minutes"
@@ -129,7 +111,7 @@ var m = ({ ariaLabel: m, emptyMessage: h = "No data", formatTimestamp: g = f, fo
 			sliceTooltip: ({ slice: e }) => {
 				let t = e.points[0], n = String(e.id);
 				t?.data.x instanceof Date && (n = t.data.x.toISOString());
-				let u = [...e.points].map((e) => {
+				let c = [...e.points].map((e) => {
 					let t = Number(e.data.y);
 					if (typeof e.data.y == "number" && (t = e.data.y), Number.isNaN(t)) return null;
 					let n = String(e.seriesId), r = b[n];
@@ -141,21 +123,21 @@ var m = ({ ariaLabel: m, emptyMessage: h = "No data", formatTimestamp: g = f, fo
 						unit: r?.unit
 					};
 				}).filter((e) => e != null);
-				return /* @__PURE__ */ l("div", {
+				return /* @__PURE__ */ f("div", {
 					className: r,
-					children: [/* @__PURE__ */ c("p", {
+					children: [/* @__PURE__ */ d("p", {
 						className: i,
 						children: g(n)
-					}), u.map((e) => /* @__PURE__ */ l("div", {
+					}), c.map((e) => /* @__PURE__ */ f("div", {
 						className: a,
-						children: [/* @__PURE__ */ l("span", {
+						children: [/* @__PURE__ */ f("span", {
 							className: o,
-							children: [/* @__PURE__ */ c("span", {
+							children: [/* @__PURE__ */ d("span", {
 								className: s,
 								style: { backgroundColor: e.color },
 								"aria-hidden": !0
-							}), /* @__PURE__ */ c("span", { children: e.label })]
-						}), /* @__PURE__ */ c("strong", { children: _(e.value, e.unit) })]
+							}), /* @__PURE__ */ d("span", { children: e.label })]
+						}), /* @__PURE__ */ d("strong", { children: _(e.value, e.unit) })]
 					}, `${e.seriesId}-${n}`))]
 				});
 			},
@@ -164,12 +146,8 @@ var m = ({ ariaLabel: m, emptyMessage: h = "No data", formatTimestamp: g = f, fo
 			ariaLabel: m
 		})
 	});
-}, h = {
-	formatDefaultValue: d,
-	formatDefaultTimestamp: f,
-	formatAxisTimestamp: p
 };
 //#endregion
-export { m as MetricHistoryChart, m as default, h as __test };
+export { m as MetricHistoryChart, m as default };
 //# sourceMappingURL=MetricHistoryChart.js.map

package/lib/esm/components/charts/MetricHistoryChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MetricHistoryChart.js","names":[],"sources":["../../../../src/components/charts/MetricHistoryChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './metricHistoryChart.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport type MetricHistoryChartPoint = {\n x: string;\n y: number;\n};\n\nexport type MetricHistoryChartSerie = {\n id: string;\n label: string;\n color: string;\n unit?: string;\n data: readonly MetricHistoryChartPoint[];\n};\n\ntype SlicePointPayload = {\n seriesId: string;\n label: string;\n value: number;\n color: string;\n unit?: string;\n};\n\nexport type MetricHistoryChartProps = {\n series: readonly MetricHistoryChartSerie[];\n ariaLabel: string;\n formatValue?: (value: number, unit?: string) => string;\n formatTimestamp?: (value: string) => string;\n emptyMessage?: string;\n};\n\n/*\n Formats metric values with an optional unit suffix.\n /\nfunction formatDefaultValue(value: number, unit?: string): string {\n const formatted = new Intl.NumberFormat(undefined, {\n maximumFractionDigits: 2,\n }).format(value);\n\n if (unit == null \|\| unit.length === 0) {\n return formatted;\n }\n\n return `${formatted} ${unit}`;\n}\n\n/\n Formats an ISO timestamp for tooltip display.\n /\nfunction formatDefaultTimestamp(value: string): string {\n const parsed = new Date(value);\n if (Number.isNaN(parsed.getTime())) {\n return value;\n }\n\n return parsed.toLocaleString(undefined, {\n month: 'short',\n day: '2-digit',\n hour: '2-digit',\n minute: '2-digit',\n });\n}\n\n/\n Formats chart axis ticks as localized times.\n */\nfunction formatAxisTimestamp(value: Date): string {\n return value.toLocaleTimeString(undefined, {\n hour: '2-digit',\n minute: '2-digit',\n });\n}\n\nexport const MetricHistoryChart = ({\n ariaLabel,\n emptyMessage = 'No data',\n formatTimestamp = formatDefaultTimestamp,\n formatValue = formatDefaultValue,\n series,\n}: MetricHistoryChartProps): JSX.Element => {\n const visibleSeries = series.filter((serie) => {\n return serie.data.length > 0;\n });\n\n if (visibleSeries.length === 0) {\n return <div className={styles.emptyState}>{emptyMessage}</div>;\n }\n\n const metadataById = Object.fromEntries(\n visibleSeries.map((serie) => {\n return [\n serie.id,\n {\n color: serie.color,\n label: serie.label,\n unit: serie.unit,\n },\n ];\n }),\n );\n\n const data = visibleSeries.map((serie) => {\n return {\n id: serie.id,\n data: serie.data.map((point) => {\n return {\n x: new Date(point.x),\n y: point.y,\n };\n }),\n };\n });\n\n const legends = [\n {\n anchor: 'bottom' as const,\n direction: 'row' as const,\n translateY: 56,\n itemWidth: 110,\n itemHeight: 16,\n itemsSpacing: 8,\n symbolSize: 10,\n symbolShape: 'circle' as const,\n itemTextColor: vars.colors.textSecondary,\n data: visibleSeries.map((serie) => {\n return {\n id: serie.id,\n label: serie.label,\n color: serie.color,\n };\n }),\n },\n ];\n\n const sliceTooltip = ({\n slice,\n }: SliceTooltipProps<(typeof data)[number]>): JSX.Element => {\n const firstPoint = slice.points[0];\n let timestampValue = String(slice.id);\n if (firstPoint?.data.x instanceof Date) {\n timestampValue = firstPoint.data.x.toISOString();\n }\n\n const points = [...slice.points]\n .map((point): SlicePointPayload \| null => {\n let value = Number(point.data.y);\n if (typeof point.data.y === 'number') {\n value = point.data.y;\n }\n\n if (Number.isNaN(value)) {\n return null;\n }\n\n const seriesId = String(point.seriesId);\n const metadata = metadataById[seriesId];\n\n return {\n seriesId,\n label: metadata?.label ?? seriesId,\n value,\n color: point.seriesColor,\n unit: metadata?.unit,\n };\n })\n .filter((point): point is SlicePointPayload => {\n return point != null;\n });\n\n return (\n <div className={styles.tooltip}>\n <p className={styles.tooltipDate}>{formatTimestamp(timestampValue)}</p>\n {points.map((point) => {\n return (\n <div\n key={`${point.seriesId}-${timestampValue}`}\n className={styles.tooltipRow}\n >\n <span className={styles.tooltipRowLabel}>\n <span\n className={styles.tooltipSwatch}\n style={{ backgroundColor: point.color }}\n aria-hidden\n />\n <span>{point.label}</span>\n </span>\n <strong>{formatValue(point.value, point.unit)}</strong>\n </div>\n );\n })}\n </div>\n );\n };\n\n return (\n <div className={styles.chartContainer}>\n <ResponsiveLine\n data={data}\n margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n colors={(serie) => {\n return metadataById[String(serie.id)]?.color ?? vars.colors.primary;\n }}\n xScale={{\n type: 'time',\n format: 'native',\n precision: 'minute',\n useUTC: false,\n }}\n xFormat=\"time:%Y-%m-%dT%H:%M:%S.%LZ\"\n yScale={{ type: 'linear', min: 'auto', max: 'auto' }}\n curve=\"monotoneX\"\n lineWidth={2.5}\n pointSize={4}\n pointBorderWidth={2}\n pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n enableArea\n areaOpacity={0.1}\n enableGridX={false}\n enableGridY\n axisTop={null}\n axisRight={null}\n axisBottom={{\n format: (value) => {\n if (!(value instanceof Date)) {\n return '';\n }\n\n return formatAxisTimestamp(value);\n },\n tickSize: 0,\n tickPadding: 10,\n tickValues: 'every 15 minutes',\n }}\n axisLeft={{\n tickSize: 0,\n tickPadding: 8,\n tickValues: 5,\n format: (value) => {\n if (typeof value !== 'number') {\n return '';\n }\n\n return new Intl.NumberFormat(undefined, {\n notation: 'compact',\n maximumFractionDigits: 1,\n }).format(value);\n },\n }}\n enablePoints\n useMesh\n legends={legends}\n theme={{\n grid: {\n line: {\n stroke: vars.colors.borderLight,\n },\n },\n axis: {\n ticks: {\n text: {\n fill: vars.colors.textMuted,\n fontSize: 12,\n },\n },\n },\n crosshair: {\n line: {\n stroke: vars.colors.border,\n strokeWidth: 1,\n strokeDasharray: '4 4',\n },\n },\n tooltip: {\n container: {\n background: 'transparent',\n boxShadow: 'none',\n padding: 0,\n },\n },\n }}\n sliceTooltip={sliceTooltip}\n enableSlices=\"x\"\n role=\"img\"\n ariaLabel={ariaLabel}\n />\n </div>\n );\n};\n\nexport default MetricHistoryChart;\n\nexport const __test = {\n formatDefaultValue,\n formatDefaultTimestamp,\n formatAxisTimestamp,\n} as const;\n"],"mappings":"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"}
1	+ {"version":3,"file":"MetricHistoryChart.js","names":[],"sources":["../../../../src/components/charts/MetricHistoryChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './metricHistoryChart.css.js';\nimport {\n formatAxisTimestamp,\n formatDefaultTimestamp,\n formatDefaultValue,\n} from '../../internal/charts/metricHistoryChartHelpers.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport type MetricHistoryChartPoint = {\n x: string;\n y: number;\n};\n\nexport type MetricHistoryChartSerie = {\n id: string;\n label: string;\n color: string;\n unit?: string;\n data: readonly MetricHistoryChartPoint[];\n};\n\ntype SlicePointPayload = {\n seriesId: string;\n label: string;\n value: number;\n color: string;\n unit?: string;\n};\n\nexport type MetricHistoryChartProps = {\n series: readonly MetricHistoryChartSerie[];\n ariaLabel: string;\n formatValue?: (value: number, unit?: string) => string;\n formatTimestamp?: (value: string) => string;\n emptyMessage?: string;\n};\n\nexport const MetricHistoryChart = ({\n ariaLabel,\n emptyMessage = 'No data',\n formatTimestamp = formatDefaultTimestamp,\n formatValue = formatDefaultValue,\n series,\n}: MetricHistoryChartProps): JSX.Element => {\n const visibleSeries = series.filter((serie) => {\n return serie.data.length > 0;\n });\n\n if (visibleSeries.length === 0) {\n return <div className={styles.emptyState}>{emptyMessage}</div>;\n }\n\n const metadataById = Object.fromEntries(\n visibleSeries.map((serie) => {\n return [\n serie.id,\n {\n color: serie.color,\n label: serie.label,\n unit: serie.unit,\n },\n ];\n }),\n );\n\n const data = visibleSeries.map((serie) => {\n return {\n id: serie.id,\n data: serie.data.map((point) => {\n return {\n x: new Date(point.x),\n y: point.y,\n };\n }),\n };\n });\n\n const legends = [\n {\n anchor: 'bottom' as const,\n direction: 'row' as const,\n translateY: 56,\n itemWidth: 110,\n itemHeight: 16,\n itemsSpacing: 8,\n symbolSize: 10,\n symbolShape: 'circle' as const,\n itemTextColor: vars.colors.textSecondary,\n data: visibleSeries.map((serie) => {\n return {\n id: serie.id,\n label: serie.label,\n color: serie.color,\n };\n }),\n },\n ];\n\n const sliceTooltip = ({\n slice,\n }: SliceTooltipProps<(typeof data)[number]>): JSX.Element => {\n const firstPoint = slice.points[0];\n let timestampValue = String(slice.id);\n if (firstPoint?.data.x instanceof Date) {\n timestampValue = firstPoint.data.x.toISOString();\n }\n\n const points = [...slice.points]\n .map((point): SlicePointPayload \| null => {\n let value = Number(point.data.y);\n if (typeof point.data.y === 'number') {\n value = point.data.y;\n }\n\n if (Number.isNaN(value)) {\n return null;\n }\n\n const seriesId = String(point.seriesId);\n const metadata = metadataById[seriesId];\n\n return {\n seriesId,\n label: metadata?.label ?? seriesId,\n value,\n color: point.seriesColor,\n unit: metadata?.unit,\n };\n })\n .filter((point): point is SlicePointPayload => {\n return point != null;\n });\n\n return (\n <div className={styles.tooltip}>\n <p className={styles.tooltipDate}>{formatTimestamp(timestampValue)}</p>\n {points.map((point) => {\n return (\n <div\n key={`${point.seriesId}-${timestampValue}`}\n className={styles.tooltipRow}\n >\n <span className={styles.tooltipRowLabel}>\n <span\n className={styles.tooltipSwatch}\n style={{ backgroundColor: point.color }}\n aria-hidden\n />\n <span>{point.label}</span>\n </span>\n <strong>{formatValue(point.value, point.unit)}</strong>\n </div>\n );\n })}\n </div>\n );\n };\n\n return (\n <div className={styles.chartContainer}>\n <ResponsiveLine\n data={data}\n margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n colors={(serie) => {\n return metadataById[String(serie.id)]?.color ?? vars.colors.primary;\n }}\n xScale={{\n type: 'time',\n format: 'native',\n precision: 'minute',\n useUTC: false,\n }}\n xFormat=\"time:%Y-%m-%dT%H:%M:%S.%LZ\"\n yScale={{ type: 'linear', min: 'auto', max: 'auto' }}\n curve=\"monotoneX\"\n lineWidth={2.5}\n pointSize={4}\n pointBorderWidth={2}\n pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n enableArea\n areaOpacity={0.1}\n enableGridX={false}\n enableGridY\n axisTop={null}\n axisRight={null}\n axisBottom={{\n format: (value) => {\n if (!(value instanceof Date)) {\n return '';\n }\n\n return formatAxisTimestamp(value);\n },\n tickSize: 0,\n tickPadding: 10,\n tickValues: 'every 15 minutes',\n }}\n axisLeft={{\n tickSize: 0,\n tickPadding: 8,\n tickValues: 5,\n format: (value) => {\n if (typeof value !== 'number') {\n return '';\n }\n\n return new Intl.NumberFormat(undefined, {\n notation: 'compact',\n maximumFractionDigits: 1,\n }).format(value);\n },\n }}\n enablePoints\n useMesh\n legends={legends}\n theme={{\n grid: {\n line: {\n stroke: vars.colors.borderLight,\n },\n },\n axis: {\n ticks: {\n text: {\n fill: vars.colors.textMuted,\n fontSize: 12,\n },\n },\n },\n crosshair: {\n line: {\n stroke: vars.colors.border,\n strokeWidth: 1,\n strokeDasharray: '4 4',\n },\n },\n tooltip: {\n container: {\n background: 'transparent',\n boxShadow: 'none',\n padding: 0,\n },\n },\n }}\n sliceTooltip={sliceTooltip}\n enableSlices=\"x\"\n role=\"img\"\n ariaLabel={ariaLabel}\n />\n </div>\n );\n};\n\nexport default MetricHistoryChart;\n"],"mappings":"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"}

package/lib/esm/components/charts/TimeSeriesLineChart.js CHANGED Viewed

@@ -1,23 +1,13 @@
 import { vars as e } from "../../theme/themeContract.js";
 import { chartContainer as t, tooltip as n, tooltipDate as r, tooltipRow as i, tooltipRowLabel as a, tooltipSwatch as o } from "./timeSeriesLineChart.css.js";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { ResponsiveLine as l } from "@nivo/line";
+import { formatDayTick as s, formatYAxisTick as c, getVisibleDayTicks as l, resolveYAxisState as u } from "../../internal/charts/timeSeriesLineChartHelpers.js";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { ResponsiveLine as p } from "@nivo/line";
 //#region src/components/charts/TimeSeriesLineChart.tsx
-var u = 6;
-function d(e) {
-	let t = e[0];
-	if (t == null || t.data.length <= u) return t == null ? [] : t.data.map((e) => e.x);
-	let n = Math.ceil(t.data.length / u), r = t.data.filter((e, t) => t % n === 0).map((e) => e.x), i = t.data.at(-1);
-	return i != null && r.at(-1) !== i.x && r.push(i.x), r;
-}
-function f(e) {
-	return (/* @__PURE__ */ new Date(`${e}T00:00:00Z`)).toLocaleDateString(void 0, {
-		month: "short",
-		day: "2-digit"
-	});
-}
-var p = (u) => {
-	let { ariaLabel: p, categoryColorById: m, categoryLabel: h, categoryOrder: g, formatValue: _, series: v } = u, y = d(v), b = g, x = (e) => b.includes(e), S = [{
+var m = (m) => {
+	let { ariaLabel: h, categoryColorById: g, categoryLabel: _, categoryOrder: v, formatValue: y, series: b, yAxis: x } = m, S = l(b), C = null;
+	x != null && (C = u(b, x));
+	let w = v, T = (e) => w.includes(e), E = [{
 		anchor: "bottom",
 		direction: "row",
 		translateY: 56,
@@ -27,28 +17,28 @@ var p = (u) => {
 		symbolSize: 10,
 		symbolShape: "circle",
 		itemTextColor: e.colors.textSecondary,
-		data: g.map((e) => ({
+		data: v.map((e) => ({
 			id: e,
-			label: h(e),
-			color: m[e]
+			label: _(e),
+			color: g[e]
 		}))
 	}];
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ d("div", {
 		className: t,
-		children: /* @__PURE__ */ s(l, {
-			data: v,
+		children: /* @__PURE__ */ d(p, {
+			data: b,
 			margin: {
 				top: 14,
 				right: 16,
 				bottom: 74,
 				left: 52
 			},
-			colors: (t) => typeof t.id != "string" || !x(t.id) ? e.colors.primary : m[t.id],
+			colors: (t) => typeof t.id != "string" || !T(t.id) ? e.colors.primary : g[t.id],
 			xScale: { type: "point" },
 			yScale: {
 				type: "linear",
-				min: 0,
-				max: "auto"
+				min: C?.min ?? 0,
+				max: C?.max ?? "auto"
 			},
 			curve: "monotoneX",
 			lineWidth: 2.5,
@@ -62,26 +52,24 @@ var p = (u) => {
 			areaOpacity: .1,
 			enableGridX: !1,
 			enableGridY: !0,
+			gridYValues: C?.tickValues,
 			axisTop: null,
 			axisRight: null,
 			axisBottom: {
-				tickValues: y,
-				format: (e) => f(String(e)),
+				tickValues: S,
+				format: (e) => s(String(e)),
 				tickSize: 0,
 				tickPadding: 10
 			},
 			axisLeft: {
 				tickSize: 0,
 				tickPadding: 8,
-				tickValues: 5,
-				format: (e) => typeof e == "number" ? new Intl.NumberFormat("en-US", {
-					notation: "compact",
-					maximumFractionDigits: 1
-				}).format(e) : ""
+				tickValues: C?.tickValues ?? 5,
+				format: (e) => typeof e == "number" ? x?.formatValue?.(e) ?? c(e) : ""
 			},
 			enablePoints: !0,
 			useMesh: !0,
-			legends: S,
+			legends: E,
 			theme: {
 				grid: { line: { stroke: e.colors.borderLight } },
 				axis: { ticks: { text: {
@@ -100,41 +88,41 @@ var p = (u) => {
 				} }
 			},
 			sliceTooltip: ({ slice: e }) => {
-				let t = String(e.id), l = g[0] ?? null, u = [...e.points].map((e) => {
+				let t = String(e.id), c = v[0] ?? null, l = [...e.points].map((e) => {
 					let t = 0;
 					typeof e.data.y == "number" && (t = e.data.y);
-					let n = l;
-					return typeof e.seriesId == "string" && x(e.seriesId) && (n = e.seriesId), n == null ? null : {
+					let n = c;
+					return typeof e.seriesId == "string" && T(e.seriesId) && (n = e.seriesId), n == null ? null : {
 						seriesId: n,
 						data: { y: t },
 						color: e.seriesColor
 					};
-				}).filter((e) => e != null).sort((e, t) => g.indexOf(e.seriesId) - g.indexOf(t.seriesId));
-				return /* @__PURE__ */ c("div", {
+				}).filter((e) => e != null).sort((e, t) => v.indexOf(e.seriesId) - v.indexOf(t.seriesId));
+				return /* @__PURE__ */ f("div", {
 					className: n,
-					children: [/* @__PURE__ */ s("p", {
+					children: [/* @__PURE__ */ d("p", {
 						className: r,
-						children: f(t)
-					}), u.map((e) => /* @__PURE__ */ c("div", {
+						children: s(t)
+					}), l.map((e) => /* @__PURE__ */ f("div", {
 						className: i,
-						children: [/* @__PURE__ */ c("span", {
+						children: [/* @__PURE__ */ f("span", {
 							className: a,
-							children: [/* @__PURE__ */ s("span", {
+							children: [/* @__PURE__ */ d("span", {
 								className: o,
 								style: { backgroundColor: e.color },
 								"aria-hidden": !0
-							}), /* @__PURE__ */ s("span", { children: h(e.seriesId) })]
-						}), /* @__PURE__ */ s("strong", { children: _(e.data.y) })]
+							}), /* @__PURE__ */ d("span", { children: _(e.seriesId) })]
+						}), /* @__PURE__ */ d("strong", { children: y(e.data.y) })]
 					}, `${t}-${e.seriesId}`))]
 				});
 			},
 			enableSlices: "x",
 			role: "img",
-			ariaLabel: p
+			ariaLabel: h
 		})
 	});
-}, m = { formatDayTick: f };
+};
 //#endregion
-export { p as TimeSeriesLineChart, p as default, m as __test };
+export { m as TimeSeriesLineChart, m as default };
 //# sourceMappingURL=TimeSeriesLineChart.js.map

package/lib/esm/components/charts/TimeSeriesLineChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimeSeriesLineChart.js","names":[],"sources":["../../../../src/components/charts/TimeSeriesLineChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './timeSeriesLineChart.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport type TimeSeriesLineChartPoint = {\n x: string;\n y: number;\n};\n\nexport type TimeSeriesLineChartSerie<Category extends string> = {\n id: Category;\n data: readonly TimeSeriesLineChartPoint[];\n};\n\ntype SlicePointPayload<Category extends string> = {\n seriesId: Category;\n data: {\n y: number;\n };\n color: string;\n};\n\nexport type TimeSeriesLineChartProps<Category extends string> = {\n series: readonly TimeSeriesLineChartSerie<Category>[];\n categoryOrder: readonly Category[];\n categoryColorById: Readonly<Record<Category, string>>;\n categoryLabel: (category: Category) => string;\n formatValue: (value: number) => string;\n ariaLabel: string;\n};\n\nconst MAX_X_TICKS = 6;\n\n/*\n Limits the number of visible day ticks while always keeping the last point.\n /\nfunction getVisibleDayTicks<Category extends string>(\n series: readonly TimeSeriesLineChartSerie<Category>[],\n): readonly string[] {\n const firstSerie = series[0];\n if (firstSerie == null \|\| firstSerie.data.length <= MAX_X_TICKS) {\n if (firstSerie == null) {\n return [];\n }\n\n return firstSerie.data.map((point) => {\n return point.x;\n });\n }\n\n const step = Math.ceil(firstSerie.data.length / MAX_X_TICKS);\n const visibleTicks = firstSerie.data\n .filter((_, index) => {\n return index % step === 0;\n })\n .map((point) => {\n return point.x;\n });\n\n const lastPoint = firstSerie.data.at(-1);\n if (lastPoint != null && visibleTicks.at(-1) !== lastPoint.x) {\n visibleTicks.push(lastPoint.x);\n }\n\n return visibleTicks;\n}\n\n/\n Formats a `YYYY-MM-DD` key into a short month/day label for the x-axis.\n */\nfunction formatDayTick(dayKey: string): string {\n const parsed = new Date(`${dayKey}T00:00:00Z`);\n return parsed.toLocaleDateString(undefined, {\n month: 'short',\n day: '2-digit',\n });\n}\n\nexport const TimeSeriesLineChart = <Category extends string>(\n props: TimeSeriesLineChartProps<Category>,\n): JSX.Element => {\n const {\n ariaLabel,\n categoryColorById,\n categoryLabel,\n categoryOrder,\n formatValue,\n series,\n } = props;\n\n const visibleTicks = getVisibleDayTicks(series);\n const categoryOrderString = categoryOrder as readonly string[];\n const isCategory = (value: string): value is Category => {\n return categoryOrderString.includes(value);\n };\n\n const legends = [\n {\n anchor: 'bottom' as const,\n direction: 'row' as const,\n translateY: 56,\n itemWidth: 90,\n itemHeight: 16,\n itemsSpacing: 8,\n symbolSize: 10,\n symbolShape: 'circle' as const,\n itemTextColor: vars.colors.textSecondary,\n data: categoryOrder.map((category) => {\n return {\n id: category,\n label: categoryLabel(category),\n color: categoryColorById[category],\n };\n }),\n },\n ];\n\n const colorById = (serie: { id: string \| number }): string => {\n if (typeof serie.id !== 'string' \|\| !isCategory(serie.id)) {\n return vars.colors.primary;\n }\n\n return categoryColorById[serie.id];\n };\n\n const sliceTooltip = ({\n slice,\n }: SliceTooltipProps<TimeSeriesLineChartSerie<Category>>): JSX.Element => {\n const dayKey = String(slice.id);\n const fallbackCategory = categoryOrder[0] ?? null;\n const points = [...slice.points]\n .map((point): SlicePointPayload<Category> \| null => {\n let credits = 0;\n if (typeof point.data.y === 'number') {\n credits = point.data.y;\n }\n\n let seriesId = fallbackCategory;\n if (typeof point.seriesId === 'string' && isCategory(point.seriesId)) {\n seriesId = point.seriesId;\n }\n if (seriesId == null) {\n return null;\n }\n\n return {\n seriesId,\n data: { y: credits },\n color: point.seriesColor,\n };\n })\n .filter((point): point is SlicePointPayload<Category> => {\n return point != null;\n })\n .sort((left, right) => {\n const leftIndex = categoryOrder.indexOf(left.seriesId);\n const rightIndex = categoryOrder.indexOf(right.seriesId);\n\n return leftIndex - rightIndex;\n });\n\n return (\n <div className={styles.tooltip}>\n <p className={styles.tooltipDate}>{formatDayTick(dayKey)}</p>\n {points.map((point) => {\n return (\n <div\n key={`${dayKey}-${point.seriesId}`}\n className={styles.tooltipRow}\n >\n <span className={styles.tooltipRowLabel}>\n <span\n className={styles.tooltipSwatch}\n style={{ backgroundColor: point.color }}\n aria-hidden\n />\n <span>{categoryLabel(point.seriesId)}</span>\n </span>\n <strong>{formatValue(point.data.y)}</strong>\n </div>\n );\n })}\n </div>\n );\n };\n\n return (\n <div className={styles.chartContainer}>\n <ResponsiveLine\n data={series}\n margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n colors={colorById}\n xScale={{ type: 'point' }}\n yScale={{ type: 'linear', min: 0, max: 'auto' }}\n curve=\"monotoneX\"\n lineWidth={2.5}\n pointSize={4}\n pointBorderWidth={2}\n pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n enableArea\n areaOpacity={0.1}\n enableGridX={false}\n enableGridY\n axisTop={null}\n axisRight={null}\n axisBottom={{\n tickValues: visibleTicks,\n format: (value) => {\n return formatDayTick(String(value));\n },\n tickSize: 0,\n tickPadding: 10,\n }}\n axisLeft={{\n tickSize: 0,\n tickPadding: 8,\n tickValues: 5,\n format: (value) => {\n if (typeof value !== 'number') {\n return '';\n }\n\n return new Intl.NumberFormat('en-US', {\n notation: 'compact',\n maximumFractionDigits: 1,\n }).format(value);\n },\n }}\n enablePoints\n useMesh\n legends={legends}\n theme={{\n grid: {\n line: {\n stroke: vars.colors.borderLight,\n },\n },\n axis: {\n ticks: {\n text: {\n fill: vars.colors.textMuted,\n fontSize: 12,\n },\n },\n },\n crosshair: {\n line: {\n stroke: vars.colors.border,\n strokeWidth: 1,\n strokeDasharray: '4 4',\n },\n },\n tooltip: {\n container: {\n background: 'transparent',\n boxShadow: 'none',\n padding: 0,\n },\n },\n }}\n sliceTooltip={sliceTooltip}\n enableSlices=\"x\"\n role=\"img\"\n ariaLabel={ariaLabel}\n />\n </div>\n );\n};\n\nexport default TimeSeriesLineChart;\n\nexport const __test = {\n formatDayTick,\n} as const;\n"],"mappings":"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"}
1	+ {"version":3,"file":"TimeSeriesLineChart.js","names":[],"sources":["../../../../src/components/charts/TimeSeriesLineChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './timeSeriesLineChart.css.js';\nimport {\n formatDayTick,\n formatYAxisTick,\n getVisibleDayTicks,\n resolveYAxisState,\n type TimeSeriesYAxisConfig,\n} from '../../internal/charts/timeSeriesLineChartHelpers.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport type TimeSeriesLineChartPoint = {\n x: string;\n y: number;\n};\n\nexport type TimeSeriesLineChartSerie<Category extends string> = {\n id: Category;\n data: readonly TimeSeriesLineChartPoint[];\n};\n\ntype SlicePointPayload<Category extends string> = {\n seriesId: Category;\n data: {\n y: number;\n };\n color: string;\n};\n\nexport type TimeSeriesLineChartProps<Category extends string> = {\n series: readonly TimeSeriesLineChartSerie<Category>[];\n categoryOrder: readonly Category[];\n categoryColorById: Readonly<Record<Category, string>>;\n categoryLabel: (category: Category) => string;\n formatValue: (value: number) => string;\n ariaLabel: string;\n yAxis?: TimeSeriesYAxisConfig;\n};\n\nexport const TimeSeriesLineChart = <Category extends string>(\n props: TimeSeriesLineChartProps<Category>,\n): JSX.Element => {\n const {\n ariaLabel,\n categoryColorById,\n categoryLabel,\n categoryOrder,\n formatValue,\n series,\n yAxis,\n } = props;\n\n const visibleTicks = getVisibleDayTicks(series);\n let yAxisState = null;\n if (yAxis != null) {\n yAxisState = resolveYAxisState(series, yAxis);\n }\n const categoryOrderString = categoryOrder as readonly string[];\n const isCategory = (value: string): value is Category => {\n return categoryOrderString.includes(value);\n };\n\n const legends = [\n {\n anchor: 'bottom' as const,\n direction: 'row' as const,\n translateY: 56,\n itemWidth: 90,\n itemHeight: 16,\n itemsSpacing: 8,\n symbolSize: 10,\n symbolShape: 'circle' as const,\n itemTextColor: vars.colors.textSecondary,\n data: categoryOrder.map((category) => {\n return {\n id: category,\n label: categoryLabel(category),\n color: categoryColorById[category],\n };\n }),\n },\n ];\n\n const colorById = (serie: { id: string \| number }): string => {\n if (typeof serie.id !== 'string' \|\| !isCategory(serie.id)) {\n return vars.colors.primary;\n }\n\n return categoryColorById[serie.id];\n };\n\n const sliceTooltip = ({\n slice,\n }: SliceTooltipProps<TimeSeriesLineChartSerie<Category>>): JSX.Element => {\n const dayKey = String(slice.id);\n const fallbackCategory = categoryOrder[0] ?? null;\n const points = [...slice.points]\n .map((point): SlicePointPayload<Category> \| null => {\n let credits = 0;\n if (typeof point.data.y === 'number') {\n credits = point.data.y;\n }\n\n let seriesId = fallbackCategory;\n if (typeof point.seriesId === 'string' && isCategory(point.seriesId)) {\n seriesId = point.seriesId;\n }\n if (seriesId == null) {\n return null;\n }\n\n return {\n seriesId,\n data: { y: credits },\n color: point.seriesColor,\n };\n })\n .filter((point): point is SlicePointPayload<Category> => {\n return point != null;\n })\n .sort((left, right) => {\n const leftIndex = categoryOrder.indexOf(left.seriesId);\n const rightIndex = categoryOrder.indexOf(right.seriesId);\n\n return leftIndex - rightIndex;\n });\n\n return (\n <div className={styles.tooltip}>\n <p className={styles.tooltipDate}>{formatDayTick(dayKey)}</p>\n {points.map((point) => {\n return (\n <div\n key={`${dayKey}-${point.seriesId}`}\n className={styles.tooltipRow}\n >\n <span className={styles.tooltipRowLabel}>\n <span\n className={styles.tooltipSwatch}\n style={{ backgroundColor: point.color }}\n aria-hidden\n />\n <span>{categoryLabel(point.seriesId)}</span>\n </span>\n <strong>{formatValue(point.data.y)}</strong>\n </div>\n );\n })}\n </div>\n );\n };\n\n return (\n <div className={styles.chartContainer}>\n <ResponsiveLine\n data={series}\n margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n colors={colorById}\n xScale={{ type: 'point' }}\n yScale={{\n type: 'linear',\n min: yAxisState?.min ?? 0,\n max: yAxisState?.max ?? 'auto',\n }}\n curve=\"monotoneX\"\n lineWidth={2.5}\n pointSize={4}\n pointBorderWidth={2}\n pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n enableArea\n areaOpacity={0.1}\n enableGridX={false}\n enableGridY\n gridYValues={yAxisState?.tickValues}\n axisTop={null}\n axisRight={null}\n axisBottom={{\n tickValues: visibleTicks,\n format: (value) => {\n return formatDayTick(String(value));\n },\n tickSize: 0,\n tickPadding: 10,\n }}\n axisLeft={{\n tickSize: 0,\n tickPadding: 8,\n tickValues: yAxisState?.tickValues ?? 5,\n format: (value) => {\n if (typeof value !== 'number') {\n return '';\n }\n\n return yAxis?.formatValue?.(value) ?? formatYAxisTick(value);\n },\n }}\n enablePoints\n useMesh\n legends={legends}\n theme={{\n grid: {\n line: {\n stroke: vars.colors.borderLight,\n },\n },\n axis: {\n ticks: {\n text: {\n fill: vars.colors.textMuted,\n fontSize: 12,\n },\n },\n },\n crosshair: {\n line: {\n stroke: vars.colors.border,\n strokeWidth: 1,\n strokeDasharray: '4 4',\n },\n },\n tooltip: {\n container: {\n background: 'transparent',\n boxShadow: 'none',\n padding: 0,\n },\n },\n }}\n sliceTooltip={sliceTooltip}\n enableSlices=\"x\"\n role=\"img\"\n ariaLabel={ariaLabel}\n />\n </div>\n );\n};\n\nexport default TimeSeriesLineChart;\n"],"mappings":"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"}