@ocelescope/core 0.6.0 → 0.8.0

package/dist/SqlChart-bwDArK2l.js

@@ -0,0 +1,101 @@
+import { t as AreaChart } from "./AreaChart-DoD3LM50.js";
+import { t as BarChart } from "./BarChart-Cixo5Okd.js";
+import { t as LineChart } from "./LineChart-CVz-dkJI.js";
+import { t as PieChart } from "./PieChart-DBiASngC.js";
+import { t as ScatterChart } from "./ScatterChart-jIQOjQes.js";
+import { t as SunburstChart } from "./SunburstChart-D6FhYBHI.js";
+import { Group, SegmentedControl, Text } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EmptyState, useViewSetting, useViewerConfig } from "@r4pm/components";
+//#region src/components/charts/SqlChart.tsx
+/**
+* A query's result, drawn.
+*
+* This is the r4pm viewer: it reads the result's own column types to decide
+* what goes across and what goes up, takes colours and selection from the
+* ambient `ViewerConfig`, and hands the rows to one of the charts.
+*/
+const SqlChart = ({ data, type: initialType = "bar", types = [], x, y, series, path, stacked = false, horizontal = false, yAxes = "shared", colorScope, title, height = "100%", ...config }) => {
+	const { colorOf, onSelect } = useViewerConfig(config);
+	const [type, setType] = useViewSetting(`chartType:${title ?? ""}`, initialType);
+	const { category, measures } = columns(data, {
+		x,
+		y,
+		series
+	});
+	const chart = {
+		rows: data.rows,
+		x: category,
+		y: measures,
+		series,
+		...colorScope && { colorOf: (name) => colorOf?.(colorScope, name) ?? "#888888" },
+		onSelect: (name, point) => onSelect?.({
+			scope: colorScope ?? category,
+			key: name,
+			data: point
+		})
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			width: "100%",
+			height
+		},
+		children: [(title || types.length > 1) && /* @__PURE__ */ jsxs(Group, {
+			gap: "xs",
+			mb: "xs",
+			pr: 48,
+			justify: "flex-start",
+			wrap: "wrap",
+			children: [title && /* @__PURE__ */ jsx(Text, {
+				size: "sm",
+				fw: 600,
+				truncate: true,
+				children: title
+			}), types.length > 1 && /* @__PURE__ */ jsx(SegmentedControl, {
+				"data-export-ignore": true,
+				size: "xs",
+				radius: "xl",
+				value: type,
+				onChange: (value) => setType(value),
+				data: types.map((option) => ({
+					value: option,
+					label: option[0]?.toUpperCase() + option.slice(1)
+				}))
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				flex: 1,
+				minHeight: 0
+			},
+			children: data.rows.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+				title: "No data",
+				description: "The query returned no rows."
+			}) : type === "bar" ? /* @__PURE__ */ jsx(BarChart, {
+				...chart,
+				stacked,
+				horizontal
+			}) : type === "line" ? /* @__PURE__ */ jsx(LineChart, {
+				...chart,
+				yAxes
+			}) : type === "area" ? /* @__PURE__ */ jsx(AreaChart, { ...chart }) : type === "scatter" ? /* @__PURE__ */ jsx(ScatterChart, { ...chart }) : type === "pie" ? /* @__PURE__ */ jsx(PieChart, { ...chart }) : /* @__PURE__ */ jsx(SunburstChart, {
+				...chart,
+				path
+			})
+		})]
+	});
+};
+const NUMERIC = /INT|DEC|DOUBLE|FLOAT|REAL|NUMERIC|HUGEINT/;
+/** What to draw: the first non-numeric column across, the numbers up. */
+const columns = (result, { x, y, series }) => {
+	const numeric = (name) => NUMERIC.test(result.columns.find((column) => column.name === name)?.type.toUpperCase() ?? "");
+	const category = x ?? result.columns.find((column) => !numeric(column.name))?.name ?? result.columns[0]?.name ?? "";
+	const named = y == null ? [] : Array.isArray(y) ? y : [y];
+	return {
+		category,
+		measures: (named.length > 0 ? named : result.columns.map((column) => column.name).filter((name) => numeric(name) && name !== category)).filter((name) => name !== series)
+	};
+};
+//#endregion
+export { SqlChart };

package/dist/SunburstChart-D6FhYBHI.js

@@ -0,0 +1,73 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { i as measureOf, r as label, t as Plot } from "./Plot-CxHHyXot.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/charts/SunburstChart.tsx
+var SunburstChart_exports = /* @__PURE__ */ __exportAll({ SunburstChart: () => SunburstChart });
+/** A hierarchy as rings, each one a column of the path. */
+const SunburstChart = ({ path, ...props }) => {
+	const rings = path ?? [props.x, props.series].filter(named);
+	return /* @__PURE__ */ jsx(Plot, {
+		traces: [nest(props.rows, rings, measureOf(props.y), props.colorOf)],
+		onSelect: props.onSelect,
+		layout: {
+			margin: {
+				t: 12,
+				r: 12,
+				b: 12,
+				l: 12
+			},
+			uniformtext: {
+				mode: "hide",
+				minsize: 10
+			}
+		}
+	});
+};
+/**
+* The rows as a tree: a node's value is the sum of the rows beneath it.
+*
+* Ids keep the rings apart where two of them carry the same name - an activity
+* and an object type both called "order".
+*/
+const nest = (rows, path, measure, colorOf) => {
+	const nodes = /* @__PURE__ */ new Map();
+	for (const row of rows) {
+		const value = Number(row[measure] ?? 0);
+		let parent = "";
+		for (const column of path) {
+			const name = label(row[column]);
+			const id = parent ? `${parent}/${name}` : name;
+			const node = nodes.get(id) ?? {
+				label: name,
+				parent,
+				value: 0
+			};
+			node.value += value;
+			nodes.set(id, node);
+			parent = id;
+		}
+	}
+	const entries = [...nodes];
+	return {
+		type: "sunburst",
+		ids: entries.map(([id]) => id),
+		labels: entries.map(([, node]) => node.label),
+		parents: entries.map(([, node]) => node.parent),
+		values: entries.map(([, node]) => node.value),
+		branchvalues: "total",
+		sort: false,
+		insidetextorientation: "radial",
+		hovertemplate: "<b>%{label}</b><br>%{value}<br>%{percentParent:.1%} of parent<extra></extra>",
+		maxdepth: path.length,
+		marker: {
+			line: {
+				color: "rgba(128,128,128,0.28)",
+				width: 1.25
+			},
+			...colorOf && { colors: entries.map(([, node]) => colorOf(node.label)) }
+		}
+	};
+};
+const named = (column) => Boolean(column);
+//#endregion
+export { SunburstChart_exports as n, SunburstChart as t };

package/dist/cartesian-5TPNWjl_.js

@@ -0,0 +1,41 @@
+import { n as toSeries, t as paint } from "./series-BBXVjHHY.js";
+//#region src/components/charts/internal/cartesian.ts
+/**
+* Traces for the charts drawn against two axes.
+*
+* Bars, lines, areas and points differ by a handful of Plotly fields and
+* nothing else, so they share the shape of their traces and each chart says
+* what makes it itself.
+*/
+const cartesian = ({ rows, x, y, series, colorOf }, mark, horizontal = false, colorByPoint = true) => {
+	const groups = toSeries({
+		rows,
+		x,
+		y,
+		series
+	});
+	return groups.map((group) => {
+		const color = paint(group, colorOf, colorByPoint && groups.length === 1);
+		const line = mark.line ?? {};
+		const marker = mark.marker ?? {};
+		return {
+			...mark,
+			name: group.name,
+			orientation: horizontal ? "h" : "v",
+			x: horizontal ? group.values : group.labels,
+			y: horizontal ? group.labels : group.values,
+			marker: {
+				...marker,
+				...color && { color }
+			},
+			...typeof color === "string" && mark.line ? { line: {
+				...line,
+				color
+			} } : {}
+		};
+	});
+};
+/** How many traces a chart will draw, which decides whether it needs a legend. */
+const traceCount = (props) => toSeries(props).length;
+//#endregion
+export { traceCount as n, cartesian as t };