@ultraviolet/ui 3.24.2 → 3.25.0

package/dist/components/Data Display/Chart/BarChart/Tooltip.js

@@ -0,0 +1,37 @@
+'use client';
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Text, init_Text } from "../../../Typography/Text/index.js";
+import { barChartStyle, colorBar, init_styles_css } from "./styles.css.js";
+import { cn } from "@ultraviolet/utils";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Data Display/Chart/BarChart/Tooltip.tsx
+var BarChartTooltip;
+function init_Tooltip() {
+	return (init_Tooltip = __esmMin(() => {
+		init_Text();
+		init_styles_css();
+		BarChartTooltip = ({ formattedValue, indexValue, color, className, "data-testid": dataTestId }) => /* @__PURE__ */ jsxs("div", {
+			className: cn(className, barChartStyle.tooltipContainer),
+			"data-testid": dataTestId,
+			children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", {
+				className: barChartStyle.tooltipContainer,
+				style: assignInlineVars({ [colorBar]: color })
+			}) }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Text, {
+				as: "p",
+				sentiment: "primary",
+				variant: "bodyStronger",
+				children: formattedValue
+			}), /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				variant: "bodySmall",
+				children: indexValue
+			})] })]
+		});
+	}))();
+}
+
+//#endregion
+init_Tooltip();
+export { BarChartTooltip, init_Tooltip };

package/dist/components/Data Display/Chart/BarChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data Display/Chart/BarChart/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AACvE,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAI9D,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAG1D,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAE3C,KAAK,SAAS,GAAG,WAAW,CAAC,UAAU,CAAC,CAAA;AAExC,KAAK,QAAQ,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAA;AAE7F,KAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,EAAE,SAAS,CAAC,CAAC,CAAA;IAChF,eAAe,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,SAAS,CAAC,CAAC,CAAA;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAA;IAC3E,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;IAC9F,UAAU,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,GAAG;QAC5C,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;IACD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;iCAYwB,EACvB,MAAgB,EAAE,+DAA+D;AACjF,MAAuB,EACvB,IAAmB,EACnB,cAAsC,EACtC,UAAU,EACV,IAAmB,EACnB,eAAe,EACf,UAAU,EACV,SAAS,EACT,aAAa,EAAE,UAAU,EACzB,KAAK,GACN,EAAE,aAAa"}

package/dist/components/Data Display/Chart/BarChart/index.js

@@ -0,0 +1,80 @@
+'use client';
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import _objectSpread2, { init_objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectSpread2.js";
+import { getLegendColor, init_legend } from "../../../../helpers/legend.js";
+import { getNivoTheme, init_nivoTheme } from "../../../../helpers/nivoTheme.js";
+import { BarChartTooltip, init_Tooltip } from "./Tooltip.js";
+import { useCallback } from "react";
+import { useTheme } from "@ultraviolet/themes";
+import { jsx } from "react/jsx-runtime";
+import { ResponsiveBar } from "@nivo/bar";
+
+//#region src/components/Data Display/Chart/BarChart/index.tsx
+var DEFAULT_MARGIN, DEFAULT_DATA, DEFAULT_AXISFORMATTER, DEFAULT_KEYS, BarChart;
+function init_BarChart() {
+	return (init_BarChart = __esmMin(() => {
+		init_legend();
+		init_nivoTheme();
+		init_Tooltip();
+		init_objectSpread2();
+		DEFAULT_MARGIN = {
+			bottom: 50,
+			left: 60,
+			right: 25,
+			top: 50
+		};
+		DEFAULT_DATA = [];
+		DEFAULT_AXISFORMATTER = {};
+		DEFAULT_KEYS = ["value"];
+		BarChart = ({ height = "537px", margin = DEFAULT_MARGIN, data = DEFAULT_DATA, axisFormatters = DEFAULT_AXISFORMATTER, tickValues, keys = DEFAULT_KEYS, tooltipFunction, chartProps, className, "data-testid": dataTestId, style }) => {
+			var _chartProps$valueScal;
+			const theme = useTheme();
+			const tooltip = useCallback((props) => {
+				const { indexValue, formattedValue, color } = tooltipFunction ? tooltipFunction(props) : props;
+				return /* @__PURE__ */ jsx(BarChartTooltip, {
+					color,
+					formattedValue,
+					indexValue: indexValue.toString()
+				});
+			}, [tooltipFunction]);
+			return /* @__PURE__ */ jsx("div", {
+				className,
+				"data-testid": dataTestId,
+				style: _objectSpread2({ height }, style),
+				children: /* @__PURE__ */ jsx(ResponsiveBar, _objectSpread2({
+					axisBottom: {
+						format: axisFormatters === null || axisFormatters === void 0 ? void 0 : axisFormatters.bottom,
+						tickPadding: 5,
+						tickRotation: 0,
+						tickSize: 5,
+						tickValues: tickValues === null || tickValues === void 0 ? void 0 : tickValues.bottom
+					},
+					axisLeft: {
+						format: axisFormatters === null || axisFormatters === void 0 ? void 0 : axisFormatters.left,
+						tickPadding: 5,
+						tickRotation: 0,
+						tickSize: 5,
+						tickValues: tickValues === null || tickValues === void 0 ? void 0 : tickValues.left
+					},
+					colors: getLegendColor(theme),
+					data,
+					enableLabel: false,
+					keys,
+					margin,
+					theme: getNivoTheme(theme),
+					tooltip,
+					valueScale: (_chartProps$valueScal = chartProps === null || chartProps === void 0 ? void 0 : chartProps.valueScale) !== null && _chartProps$valueScal !== void 0 ? _chartProps$valueScal : {
+						type: "linear",
+						min: chartProps === null || chartProps === void 0 ? void 0 : chartProps.minValue,
+						max: chartProps === null || chartProps === void 0 ? void 0 : chartProps.maxValue
+					}
+				}, chartProps))
+			});
+		};
+		BarChart.displayName = "BarChart";
+	}))();
+}
+
+//#endregion
+init_BarChart();
+export { BarChart, init_BarChart };

package/dist/components/Data Display/Chart/BarChart/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data Display/Chart/BarChart/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,oBAAc,CAAA;AAmBnC,eAAO,MAAM,aAAa;;;CAGzB,CAAA"}

package/dist/components/Data Display/Chart/BarChart/styles.css.js

@@ -0,0 +1,19 @@
+import { __esmMin } from "../../../../_virtual/_rolldown/runtime.js";
+import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
+
+//#region src/components/Data Display/Chart/BarChart/styles.css.ts
+var colorBar, barChartStyle;
+function init_styles_css() {
+	return (init_styles_css = __esmMin(() => {
+		/* @__PURE__ */ init_styles_css_ts_vanilla();
+		colorBar = "var(--uv_161ek2v0)";
+		barChartStyle = {
+			tooltipContainer: "uv_161ek2v1",
+			colorSquare: "uv_161ek2v2"
+		};
+	}))();
+}
+
+//#endregion
+init_styles_css();
+export { barChartStyle, colorBar, init_styles_css };

package/dist/components/Data Display/Chart/BarChart/styles.css.ts.vanilla.js

@@ -0,0 +1,10 @@
+import { __esmMin } from "../../../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/Data Display/Chart/BarChart/styles.css.ts.vanilla.css
+function init_styles_css_ts_vanilla() {
+	return (init_styles_css_ts_vanilla = __esmMin(() => {}))();
+}
+
+//#endregion
+init_styles_css_ts_vanilla();
+export { init_styles_css_ts_vanilla };

package/dist/components/Data Display/Chart/LineChart/CustomLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomLegend.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data Display/Chart/LineChart/CustomLegend.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAQ5C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAItC,KAAK,WAAW,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,MAAM,CAAA;AAIhD,KAAK,iBAAiB,GAAG;IACvB,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,IAAI,CAAC,EAAE,KAAK,EAAE,CAAA;IACd,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,YAAY,4FAOtB,iBAAiB,gCA8CnB,CAAA"}

package/dist/components/Data Display/Chart/LineChart/CustomLegend.js

@@ -0,0 +1,108 @@
+'use client';
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Text, init_Text } from "../../../Typography/Text/index.js";
+import { Checkbox, init_Checkbox } from "../../../Data Entry/Checkbox/index.js";
+import { backgroundColorLegend, init_styles_css, lineChartStyle } from "./styles.css.js";
+import { getLegendColor, init_legend } from "../../../../helpers/legend.js";
+import { getAverage, getCurrent, getMax, getMin, getSelected, init_helpers } from "./helpers.js";
+import { Cell, init_LegendCell } from "./LegendCell.js";
+import { theme } from "@ultraviolet/themes";
+import { cn } from "@ultraviolet/utils";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Data Display/Chart/LineChart/CustomLegend.tsx
+var noop, CustomLegend;
+function init_CustomLegend() {
+	return (init_CustomLegend = __esmMin(() => {
+		init_legend();
+		init_Checkbox();
+		init_Text();
+		init_helpers();
+		init_LegendCell();
+		init_styles_css();
+		noop = (value) => value.toString();
+		CustomLegend = ({ axisTransformer = noop, data, selected, setSelected, className, "data-testid": dataTestId }) => /* @__PURE__ */ jsxs("div", {
+			className: cn(className, lineChartStyle.container),
+			"data-testid": dataTestId,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: lineChartStyle.head,
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: cn(lineChartStyle.longContainer, lineChartStyle.headTitle),
+						children: "Legend"
+					}),
+					/* @__PURE__ */ jsx(Cell, {
+						value: "Minimum",
+						variant: "body"
+					}),
+					/* @__PURE__ */ jsx(Cell, {
+						value: "Maximum",
+						variant: "body"
+					}),
+					/* @__PURE__ */ jsx(Cell, {
+						value: "Average",
+						variant: "body"
+					}),
+					/* @__PURE__ */ jsx(Cell, {
+						value: "Current",
+						variant: "body"
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: lineChartStyle.body,
+				children: data === null || data === void 0 ? void 0 : data.map((row, index) => {
+					const values = row.data.map((val) => val.y).filter((val) => typeof val === "number");
+					const labelIndexed = `${row.id}${index}`;
+					const id = row.id.toString();
+					return /* @__PURE__ */ jsxs("div", {
+						className: lineChartStyle.row,
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: cn(lineChartStyle.longContainer, lineChartStyle.content),
+								children: /* @__PURE__ */ jsx(Checkbox, {
+									checked: selected.includes(labelIndexed),
+									name: id,
+									onChange: () => setSelected([...getSelected(id, index, selected)]),
+									children: /* @__PURE__ */ jsxs("div", {
+										className: lineChartStyle.cellValueContainer,
+										children: [/* @__PURE__ */ jsx(Text, {
+											as: "span",
+											sentiment: "neutral",
+											variant: "bodySmall",
+											children: row === null || row === void 0 ? void 0 : row["label"]
+										}), /* @__PURE__ */ jsx("div", {
+											className: lineChartStyle.legend,
+											"data-testid": `label-${id}`,
+											style: assignInlineVars({ [backgroundColorLegend]: getLegendColor(theme)[index] })
+										})]
+									})
+								})
+							}),
+							/* @__PURE__ */ jsx(Cell, {
+								value: axisTransformer(getMin(values)),
+								variant: "bodySmall"
+							}),
+							/* @__PURE__ */ jsx(Cell, {
+								value: axisTransformer(getMax(values)),
+								variant: "bodySmall"
+							}),
+							/* @__PURE__ */ jsx(Cell, {
+								value: axisTransformer(getAverage(values)),
+								variant: "bodySmall"
+							}),
+							/* @__PURE__ */ jsx(Cell, {
+								value: axisTransformer(getCurrent(values)),
+								variant: "bodySmall"
+							})
+						]
+					}, labelIndexed);
+				})
+			})]
+		});
+	}))();
+}
+
+//#endregion
+init_CustomLegend();
+export { CustomLegend, init_CustomLegend };

package/dist/components/Data Display/Chart/LineChart/LegendCell.d.ts

@@ -0,0 +1,10 @@
+import type { DatumValue } from '@nivo/core';
+import type { ComponentProps } from 'react';
+import { Text } from '../../../Typography/Text';
+type CellProps = {
+    value?: DatumValue;
+    variant: ComponentProps<typeof Text>['variant'];
+};
+export declare const Cell: ({ value, variant }: CellProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=LegendCell.d.ts.map

package/dist/components/Data Display/Chart/LineChart/LegendCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LegendCell.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data Display/Chart/LineChart/LegendCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAG/C,KAAK,SAAS,GAAG;IACf,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,OAAO,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,SAAS,CAAC,CAAA;CAChD,CAAA;AAED,eAAO,MAAM,IAAI,uBAAwB,SAAS,gCASjD,CAAA"}

package/dist/components/Data Display/Chart/LineChart/LegendCell.js

@@ -0,0 +1,25 @@
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Text, init_Text } from "../../../Typography/Text/index.js";
+import { init_styles_css, lineChartStyle } from "./styles.css.js";
+import { cn } from "@ultraviolet/utils";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Data Display/Chart/LineChart/LegendCell.tsx
+var Cell;
+function init_LegendCell() {
+	return (init_LegendCell = __esmMin(() => {
+		init_Text();
+		init_styles_css();
+		Cell = ({ value, variant }) => /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			className: cn(lineChartStyle.textLegend, lineChartStyle.headTitle),
+			sentiment: "neutral",
+			variant,
+			children: value === null || value === void 0 ? void 0 : value.toString()
+		});
+	}))();
+}
+
+//#endregion
+init_LegendCell();
+export { Cell, init_LegendCell };

package/dist/components/Data Display/Chart/LineChart/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data Display/Chart/LineChart/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAKnD,KAAK,qBAAqB,GAAG;IAC3B,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,gBAAgB,sCAAuC,qBAAqB,gCAmBxF,CAAA"}

package/dist/components/Data Display/Chart/LineChart/Tooltip.js

@@ -0,0 +1,38 @@
+'use client';
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Text, init_Text } from "../../../Typography/Text/index.js";
+import { colorLine, init_styles_css, lineChartStyle } from "./styles.css.js";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Data Display/Chart/LineChart/Tooltip.tsx
+var LineChartTooltip;
+function init_Tooltip() {
+	return (init_Tooltip = __esmMin(() => {
+		init_Text();
+		init_styles_css();
+		LineChartTooltip = ({ point, xFormatted, yFormatted }) => /* @__PURE__ */ jsxs("div", {
+			className: lineChartStyle.lineTooltipContainer,
+			children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", {
+				className: lineChartStyle.lineColorSquare,
+				style: assignInlineVars({ [colorLine]: point.seriesColor })
+			}) }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Text, {
+				as: "div",
+				prominence: "stronger",
+				sentiment: "neutral",
+				variant: "bodyStronger",
+				children: yFormatted !== null && yFormatted !== void 0 ? yFormatted : point.data.yFormatted
+			}), /* @__PURE__ */ jsx(Text, {
+				as: "div",
+				prominence: "stronger",
+				sentiment: "neutral",
+				variant: "bodySmall",
+				children: xFormatted !== null && xFormatted !== void 0 ? xFormatted : point.data.xFormatted
+			})] })]
+		});
+	}))();
+}
+
+//#endregion
+init_Tooltip();
+export { LineChartTooltip, init_Tooltip };

package/dist/components/Data Display/Chart/LineChart/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data Display/Chart/LineChart/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAgB1D,eAAO,MAAM,MAAM,YAAY,YAAY,EAAE,KAAQ,MACiB,CAAA;AAEtE,eAAO,MAAM,MAAM,YAAY,YAAY,EAAE,KAAQ,MACiB,CAAA;AAEtE,eAAO,MAAM,UAAU,YAAY,YAAY,EAAE,KAAQ,MAGlD,CAAA;AAEP,eAAO,MAAM,gBAAgB,iBAAkB,UAAU,EAAE,KAAG,MAQ7D,CAAA;AAED,eAAO,MAAM,gBAAgB,iBAAkB,UAAU,EAAE,KAAG,MAQ7D,CAAA;AAED,eAAO,MAAM,UAAU,YAAY,MAAM,EAAE,KAAQ,MAIlD,CAAA;AAED,eAAO,MAAM,WAAW,UAAW,MAAM,SAAS,MAAM,aAAY,MAAM,EAAE,KAAQ,MAAM,EAWzF,CAAA;AAED,MAAM,MAAM,KAAK,GAAG,UAAU,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB,CAAA"}

package/dist/components/Data Display/Chart/LineChart/helpers.js

@@ -0,0 +1,42 @@
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/Data Display/Chart/LineChart/helpers.ts
+var parse, getMin, getMax, getAverage, getMaxChartValue, getMinChartValue, getCurrent, getSelected;
+function init_helpers() {
+	return (init_helpers = __esmMin(() => {
+		parse = (data) => {
+			if (typeof data === "number") return data || 0;
+			if (typeof data === "string") return Number.parseFloat(data) || 0;
+			if (data instanceof Date) return data.getTime();
+			return 0;
+		};
+		getMin = (values = []) => values.length > 0 ? Math.min(...values.map((data) => parse(data))) : 0;
+		getMax = (values = []) => values.length > 0 ? Math.max(...values.map((data) => parse(data))) : 0;
+		getAverage = (values = []) => values.length > 0 ? Math.round(values.reduce((sum, curr) => sum + parse(curr), 0) / values.length * 100) / 100 : 0;
+		getMaxChartValue = (preppedData) => {
+			if (!(preppedData === null || preppedData === void 0 ? void 0 : preppedData.length)) return 0;
+			const maximum = Math.max(...preppedData.map(({ data }) => getMax(data.map(({ y }) => y !== null && y !== void 0 ? y : 0))));
+			return Math.ceil(maximum + maximum * .1);
+		};
+		getMinChartValue = (preppedData) => {
+			if (!(preppedData === null || preppedData === void 0 ? void 0 : preppedData.length)) return 0;
+			const minimum = Math.min(...preppedData.map(({ data }) => getMin(data.map(({ y }) => y !== null && y !== void 0 ? y : 0))));
+			return Math.floor(minimum - minimum * .1);
+		};
+		getCurrent = (values = []) => {
+			const val = values.at(-1);
+			return val !== null && val !== void 0 ? val : 0;
+		};
+		getSelected = (label, index, selected = []) => {
+			const labelIndexed = label + index.toString();
+			const found = selected.indexOf(labelIndexed);
+			if (found === -1) selected.push(labelIndexed);
+			else selected.splice(found, 1);
+			return selected;
+		};
+	}))();
+}
+
+//#endregion
+init_helpers();
+export { getAverage, getCurrent, getMax, getMaxChartValue, getMin, getMinChartValue, getSelected, init_helpers };

package/dist/components/Data Display/Chart/LineChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data Display/Chart/LineChart/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,IAAI,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7D,OAAO,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAC/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAI7C,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAG1D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAE5C,KAAK,cAAc,GAAG;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,EAAE,CAAA;IACd,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAA;KACzB,KAAK,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,EAAE,YAAY,GAAG,YAAY,CAAC,CAAC,CAAA;IACzF,cAAc,CAAC,EAAE,OAAO,CACtB,MAAM,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAAC,CACpG,CAAA;IACD,eAAe,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,CAAA;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAA;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;kCA0ByB,EACxB,MAAgB,EAAE,8DAA8D;AAChF,MAAuB,EACvB,MAAuB,EACvB,MAAuB,EACvB,IAAI,EACJ,UAAkB,EAClB,eAAe,EACf,cAAc,EACd,eAAe,EACf,UAAU,EACV,UAA+B,EAC/B,KAAK,EACL,aAAa,EAAE,UAAU,GAC1B,EAAE,cAAc"}

package/dist/components/Data Display/Chart/LineChart/index.js

@@ -0,0 +1,111 @@
+'use client';
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import _objectSpread2, { init_objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectSpread2.js";
+import { getLegendColor, init_legend } from "../../../../helpers/legend.js";
+import { getNivoTheme, init_nivoTheme } from "../../../../helpers/nivoTheme.js";
+import { getMaxChartValue, getMinChartValue, init_helpers } from "./helpers.js";
+import { CustomLegend, init_CustomLegend } from "./CustomLegend.js";
+import { LineChartTooltip, init_Tooltip } from "./Tooltip.js";
+import { useEffect, useState } from "react";
+import { useTheme } from "@ultraviolet/themes";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ResponsiveLine } from "@nivo/line";
+
+//#region src/components/Data Display/Chart/LineChart/index.tsx
+var DEFAULT_MARGIN, DEFAULT_XSCALE, DEFAULT_YSCALE, DEFAULT_CHARTPROPS, createCustomTooltip, LineChart;
+function init_LineChart() {
+	return (init_LineChart = __esmMin(() => {
+		init_legend();
+		init_nivoTheme();
+		init_CustomLegend();
+		init_helpers();
+		init_Tooltip();
+		init_objectSpread2();
+		DEFAULT_MARGIN = {
+			bottom: 50,
+			left: 60,
+			right: 25,
+			top: 50
+		};
+		DEFAULT_XSCALE = {
+			format: "%Y-%m-%dT%H:%M:%S%Z",
+			precision: "minute",
+			type: "time",
+			useUTC: false
+		};
+		DEFAULT_YSCALE = { type: "linear" };
+		DEFAULT_CHARTPROPS = {};
+		createCustomTooltip = (tooltipFunction) => (props) => {
+			const customProps = tooltipFunction ? tooltipFunction(props) : {};
+			return /* @__PURE__ */ jsx(LineChartTooltip, {
+				point: props.point,
+				xFormatted: customProps.xFormatted,
+				yFormatted: customProps.yFormatted
+			});
+		};
+		LineChart = ({ height = "537px", margin = DEFAULT_MARGIN, xScale = DEFAULT_XSCALE, yScale = DEFAULT_YSCALE, data, withLegend = false, tooltipFunction, axisFormatters, pointFormatters, tickValues, chartProps = DEFAULT_CHARTPROPS, style, "data-testid": dataTestId }) => {
+			var _dataset$datasets;
+			var _dataset$datasets2;
+			const theme = useTheme();
+			const dataset = { datasets: data === null || data === void 0 ? void 0 : data.map((d) => ({
+				data: d.data,
+				id: d.id,
+				label: d === null || d === void 0 ? void 0 : d["label"]
+			})) };
+			const [selected, setSelected] = useState((_dataset$datasets = dataset.datasets) === null || _dataset$datasets === void 0 ? void 0 : _dataset$datasets.map(({ id }, index) => `${id}${index}`));
+			const finalData = (_dataset$datasets2 = dataset.datasets) === null || _dataset$datasets2 === void 0 ? void 0 : _dataset$datasets2.filter(({ id }, index) => selected ? selected.includes(`${id}${index}`) : false);
+			useEffect(() => {
+				var _dataset$datasets3;
+				if (selected !== void 0) return;
+				setSelected((_dataset$datasets3 = dataset.datasets) === null || _dataset$datasets3 === void 0 ? void 0 : _dataset$datasets3.map(({ id }, index) => `${id}${index}`));
+			}, [dataset.datasets, selected]);
+			const localColors = getLegendColor(theme);
+			const CustomTooltip = createCustomTooltip(tooltipFunction);
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+				style: _objectSpread2({ height }, style),
+				children: /* @__PURE__ */ jsx(ResponsiveLine, _objectSpread2({
+					axisBottom: {
+						format: axisFormatters === null || axisFormatters === void 0 ? void 0 : axisFormatters.bottom,
+						tickPadding: 5,
+						tickRotation: 0,
+						tickSize: 5,
+						tickValues: tickValues === null || tickValues === void 0 ? void 0 : tickValues.bottom
+					},
+					axisLeft: {
+						format: axisFormatters === null || axisFormatters === void 0 ? void 0 : axisFormatters.left,
+						tickPadding: 5,
+						tickRotation: 0,
+						tickSize: 5,
+						tickValues: tickValues === null || tickValues === void 0 ? void 0 : tickValues.left
+					},
+					colors: localColors,
+					curve: "monotoneX",
+					data: finalData !== null && finalData !== void 0 ? finalData : [],
+					"data-testid": dataTestId,
+					margin,
+					pointSize: 10,
+					theme: getNivoTheme(theme),
+					tooltip: CustomTooltip,
+					useMesh: true,
+					xFormat: pointFormatters === null || pointFormatters === void 0 ? void 0 : pointFormatters.x,
+					xScale,
+					yFormat: pointFormatters === null || pointFormatters === void 0 ? void 0 : pointFormatters.y,
+					yScale: _objectSpread2({
+						max: getMaxChartValue(finalData),
+						min: getMinChartValue(finalData)
+					}, yScale)
+				}, chartProps))
+			}), withLegend && /* @__PURE__ */ jsx(CustomLegend, {
+				axisTransformer: axisFormatters === null || axisFormatters === void 0 ? void 0 : axisFormatters.left,
+				data,
+				selected: selected !== null && selected !== void 0 ? selected : [],
+				setSelected
+			})] });
+		};
+		LineChart.displayName = "LineChart";
+	}))();
+}
+
+//#endregion
+init_LineChart();
+export { LineChart, init_LineChart };

package/dist/components/Data Display/Chart/LineChart/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data Display/Chart/LineChart/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,oBAAc,CAAA;AACpC,eAAO,MAAM,qBAAqB,oBAAc,CAAA;AAiFhD,eAAO,MAAM,cAAc;;;;;;;;;;;;;CAa1B,CAAA"}

package/dist/components/Data Display/Chart/LineChart/styles.css.js

@@ -0,0 +1,30 @@
+import { __esmMin } from "../../../../_virtual/_rolldown/runtime.js";
+import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
+
+//#region src/components/Data Display/Chart/LineChart/styles.css.ts
+var colorLine, backgroundColorLegend, lineChartStyle;
+function init_styles_css() {
+	return (init_styles_css = __esmMin(() => {
+		/* @__PURE__ */ init_styles_css_ts_vanilla();
+		colorLine = "var(--uv_13m2i2h0)";
+		backgroundColorLegend = "var(--uv_13m2i2h1)";
+		lineChartStyle = {
+			textLegend: "uv_13m2i2h2",
+			cellValueContainer: "uv_13m2i2h3",
+			longContainer: "uv_13m2i2h4",
+			container: "uv_13m2i2h5",
+			lineTooltipContainer: "uv_13m2i2h6",
+			row: "uv_13m2i2hc",
+			lineColorSquare: "uv_13m2i2h7",
+			body: "uv_13m2i2h8",
+			head: "uv_13m2i2h9",
+			headTitle: "uv_13m2i2ha",
+			legend: "uv_13m2i2hb",
+			content: "uv_13m2i2hd"
+		};
+	}))();
+}
+
+//#endregion
+init_styles_css();
+export { backgroundColorLegend, colorLine, init_styles_css, lineChartStyle };

package/dist/components/Data Display/Chart/LineChart/styles.css.ts.vanilla.js

@@ -0,0 +1,10 @@
+import { __esmMin } from "../../../../_virtual/_rolldown/runtime.js";
+
+//#region src/components/Data Display/Chart/LineChart/styles.css.ts.vanilla.css
+function init_styles_css_ts_vanilla() {
+	return (init_styles_css_ts_vanilla = __esmMin(() => {}))();
+}
+
+//#endregion
+init_styles_css_ts_vanilla();
+export { init_styles_css_ts_vanilla };

package/dist/components/Data Display/Chart/PieChart/Legends.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Legends.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data Display/Chart/PieChart/Legends.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAGnC,KAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,IAAI,EAAE,CAAA;IACb,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,MAAM,EAAE,MAAM,EAAE,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,OAAO,2DAA4D,YAAY,gCAoD3F,CAAA"}

package/dist/components/Data Display/Chart/PieChart/Legends.js

@@ -0,0 +1,72 @@
+'use client';
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Tooltip, init_Tooltip } from "../../../Overlay/Tooltip/index.js";
+import { Text, init_Text } from "../../../Typography/Text/index.js";
+import { colorBullet, init_styles_css, pieChartStyle } from "./styles.css.js";
+import { TooltipContent, init_Tooltip as init_Tooltip$1 } from "./Tooltip.js";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Data Display/Chart/PieChart/Legends.tsx
+var Legends;
+function init_Legends() {
+	return (init_Legends = __esmMin(() => {
+		init_Tooltip();
+		init_Text();
+		init_Tooltip$1();
+		init_styles_css();
+		Legends = ({ focused, data, legendHeader, onFocusChange, colors }) => /* @__PURE__ */ jsxs("div", {
+			className: pieChartStyle.legendContainer,
+			children: [legendHeader ? /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				variant: "captionStrong",
+				sentiment: "neutral",
+				prominence: "weak",
+				className: pieChartStyle.legendHeader,
+				children: legendHeader
+			}) : null, /* @__PURE__ */ jsx("ul", {
+				className: pieChartStyle.list,
+				children: data === null || data === void 0 ? void 0 : data.map((item, index) => {
+					const isSegmentFocused = focused !== void 0 && item.id === focused;
+					const id = `chart-legend-${item.id}`;
+					return /* @__PURE__ */ jsx(Tooltip, {
+						text: /* @__PURE__ */ jsx(TooltipContent, { data: item }),
+						visible: isSegmentFocused,
+						children: /* @__PURE__ */ jsxs("li", {
+							className: pieChartStyle.listItem({ isFocused: isSegmentFocused }),
+							onBlur: () => onFocusChange(),
+							onFocus: () => onFocusChange(item.id),
+							onMouseOut: () => onFocusChange(),
+							onMouseOver: () => onFocusChange(item.id),
+							"data-testid": id,
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: pieChartStyle.bullet,
+									color: colors[index],
+									id,
+									style: assignInlineVars({ [colorBullet]: colors[index] })
+								}),
+								/* @__PURE__ */ jsx(Text, {
+									as: "span",
+									variant: isSegmentFocused ? "bodySmallStrong" : "bodySmall",
+									oneLine: true,
+									children: item.name
+								}),
+								/* @__PURE__ */ jsx("span", { className: pieChartStyle.line }),
+								/* @__PURE__ */ jsx(Text, {
+									as: "span",
+									variant: "bodySmallStrong",
+									children: item.value
+								})
+							]
+						})
+					}, item.id);
+				})
+			})]
+		});
+	}))();
+}
+
+//#endregion
+init_Legends();
+export { Legends, init_Legends };

package/dist/components/Data Display/Chart/PieChart/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Data Display/Chart/PieChart/Tooltip.tsx"],"names":[],"mappings":"AAKA,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE;QACJ,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;QACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;QACrB,OAAO,CAAC,EACJ;YACE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;YACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;SACtB,EAAE,GACH,IAAI,CAAA;KACT,CAAA;CACF,CAAA;AAED,eAAO,MAAM,cAAc,aAAc,YAAY,gCAqBpD,CAAA"}