@ocelescope/core 0.7.0 → 0.8.0

package/README.md

@@ -27,14 +27,6 @@ for a complete setup.
 ```tsx
 // pages/_app.tsx
 
-// 1. Third-party global styles core relies on. Import these FIRST, in this
-//    order (@mantine/core must come before its extensions).
-import "@mantine/core/styles.css";
-import "@mantine/dropzone/styles.css";
-import "@mantine/notifications/styles.css";
-import "mantine-datatable/styles.css";
-
-// 2. core's own (scoped) styles — must come AFTER the above so its overrides win.
 import "@ocelescope/core/styles.css";
 
 import { OcelescopeApp } from "@ocelescope/core";
@@ -43,12 +35,13 @@ import config from "../ocelescope.config";
 export default OcelescopeApp(config);
 ```
 
-> **Styles.** `@ocelescope/core` ships only its own component styles in
-> `@ocelescope/core/styles.css`; it does **not** bundle its dependencies'
-> global CSS. Your app must import the Mantine / mantine-datatable stylesheets
-> above itself (and add those packages to its `dependencies`), in order, before
-> core's stylesheet. Each Ocelescope module documents any additional
-> stylesheets it needs.
+> **Styles.** `@ocelescope/core/styles.css` is the only stylesheet an app needs.
+> It inlines the third-party global CSS core and the Ocelescope modules rely on
+> (`@mantine/core` and its `dates` / `charts` / `dropzone` / `notifications`
+> extensions, `mantine-datatable`, `@xyflow/react`, `@r4pm/components`) ahead of
+> core's own component styles, in cascade order — so do not import those
+> stylesheets again. A module that ships its own stylesheet documents it; import
+> those after core's.
 
 ```tsx
 // pages/_document.tsx
@@ -105,6 +98,60 @@ export default defineModule({
 });
 ```
 
+### Charts
+
+`OcelChart` runs DuckDB SQL against the selected OCEL and draws the result. The
+query is usually the whole configuration: the first non-numeric column goes
+across, the numeric ones go up.
+
+```tsx
+import { OcelChart } from "@ocelescope/core";
+
+export const EventsByActivity = () => (
+  <OcelChart
+    title="Events per activity"
+    colorScope="activity"
+    sql={`SELECT "ocel:activity" AS activity, count(*) AS events
+          FROM events GROUP BY 1 ORDER BY 2 DESC`}
+  />
+);
+```
+
+Bar, line, area, scatter and pie; `series` unfolds a column into one series per
+value, `stacked` and `horizontal` change the shape, `types` offers the reader a
+switch between chart types, and `x`/`y` override the columns when the defaults
+guess wrong. Only a single `SELECT` runs, over the OCEL's stored tables
+(`events`, `objects`, `e2o`, `o2o`, `object_changes`); bind values through
+`parameters` rather than building SQL by hand. `SqlChart` is the same chart for
+a result you already have.
+
+Line charts can share a scale or overlay an independent scale per line. The
+second form is useful for measures with different units or very different
+ranges:
+
+```tsx
+<OcelChart
+  type="line"
+  x="time"
+  y="value"
+  series="measure"
+  yAxes="independent"
+  sql={measurements}
+/>
+```
+
+Charts are r4pm viewers. Colours come from the ambient `ViewerConfig` when a
+`colorScope` is given, so a category keeps the colour the graph viewers give it;
+clicks report a `ViewerTarget` to `onSelect`; and a chart inside a
+`<ViewerExportFrame>` exports with everything else in the frame:
+
+```tsx
+<ViewerExportFrame filename="activities">
+  <OcelChart title="Events per activity" sql={events} />
+  <OcelChart title="Objects per type" sql={objects} series="type" stacked />
+</ViewerExportFrame>
+```
+
 ## About
 
 Part of [Ocelescope](https://github.com/promi4s/ocelescope), a framework for

package/dist/ActivityPicker-DbrGeiC_.js

@@ -0,0 +1,18 @@
+import { t as useOcelId } from "./useOcelId-BSU0-Srk.js";
+import { NamePicker } from "./NamePicker-Be-qmr1x.js";
+import { useEventCounts } from "@ocelescope/api-base";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/pickers/ActivityPicker.tsx
+/** The log's activities, by how often they occur. */
+const ActivityPicker = ({ ocelId, ocelVersion = "filtered", ...picker }) => {
+	const id = useOcelId(ocelId);
+	const { data, isPending } = useEventCounts(id, { ocel_version: ocelVersion }, { query: { enabled: id != null } });
+	return /* @__PURE__ */ jsx(NamePicker, {
+		items: data ?? {},
+		scope: "activity",
+		loading: isPending,
+		...picker
+	});
+};
+//#endregion
+export { ActivityPicker };

package/dist/AreaChart-DoD3LM50.js

@@ -0,0 +1,36 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { i as measureOf, n as axis, t as Plot } from "./Plot-CxHHyXot.js";
+import { n as traceCount, t as cartesian } from "./cartesian-5TPNWjl_.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/charts/AreaChart.tsx
+var AreaChart_exports = /* @__PURE__ */ __exportAll({ AreaChart: () => AreaChart });
+/** A line with the ground beneath it filled in, for totals over time. */
+const AreaChart = ({ xRange, ...props }) => {
+	const measure = measureOf(props.y);
+	return /* @__PURE__ */ jsx(Plot, {
+		traces: cartesian(props, {
+			type: "scatter",
+			mode: "lines",
+			fill: "tozeroy",
+			line: {
+				width: 2,
+				shape: "spline",
+				smoothing: .35
+			},
+			opacity: .72,
+			connectgaps: false,
+			hovertemplate: "<b>%{fullData.name}</b><br>%{x}<br>%{y}<extra></extra>"
+		}, false, false),
+		legend: traceCount(props) > 1,
+		onSelect: props.onSelect,
+		layout: {
+			hovermode: "x unified",
+			hoverdistance: 40,
+			spikedistance: -1,
+			xaxis: axis(props.x, xRange),
+			yaxis: axis(measure)
+		}
+	});
+};
+//#endregion
+export { AreaChart_exports as n, AreaChart as t };

package/dist/BarChart-Cixo5Okd.js

@@ -0,0 +1,69 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { i as measureOf, n as axis, t as Plot } from "./Plot-CxHHyXot.js";
+import { n as traceCount, t as cartesian } from "./cartesian-5TPNWjl_.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/charts/BarChart.tsx
+var BarChart_exports = /* @__PURE__ */ __exportAll({ BarChart: () => BarChart });
+/** Counts as bars, one per category. */
+const BarChart = ({ stacked = false, horizontal = false, xRange, ...props }) => {
+	const measure = measureOf(props.y);
+	const count = props.rows.length;
+	const traces = cartesian(props, {
+		type: "bar",
+		marker: {
+			line: { width: 0 },
+			cornerradius: 4
+		},
+		...count <= 24 && {
+			texttemplate: horizontal ? "%{x:~s}" : "%{y:~s}",
+			textposition: "auto"
+		},
+		hovertemplate: horizontal ? `<b>%{y}</b><br>${measure}: %{x}<extra>%{fullData.name}</extra>` : `<b>%{x}</b><br>${measure}: %{y}<extra>%{fullData.name}</extra>`,
+		cliponaxis: false
+	}, horizontal);
+	return /* @__PURE__ */ jsx(Plot, {
+		traces: stacked ? withStackShare(traces, horizontal, measure) : traces,
+		legend: traceCount(props) > 1,
+		readName: (point) => String((horizontal ? point.y : point.x) ?? point.label ?? ""),
+		onSelect: props.onSelect,
+		layout: {
+			barmode: stacked ? "stack" : "group",
+			bargap: .22,
+			bargroupgap: .08,
+			hovermode: "closest",
+			uniformtext: {
+				mode: "hide",
+				minsize: 10
+			},
+			xaxis: axis(horizontal ? measure : props.x, xRange),
+			yaxis: axis(horizontal ? props.x : measure)
+		}
+	});
+};
+/** Add each segment's share of its complete bar to stacked-bar hover. */
+const withStackShare = (traces, horizontal, measure) => {
+	const totals = /* @__PURE__ */ new Map();
+	for (const trace of traces) {
+		const labels = horizontal ? trace.y : trace.x;
+		const values = horizontal ? trace.x : trace.y;
+		labels.forEach((label, index) => {
+			const key = String(label);
+			totals.set(key, (totals.get(key) ?? 0) + Number(values[index] ?? 0));
+		});
+	}
+	return traces.map((trace) => {
+		const labels = horizontal ? trace.y : trace.x;
+		const values = horizontal ? trace.x : trace.y;
+		const shares = labels.map((label, index) => {
+			const total = totals.get(String(label)) ?? 0;
+			return total > 0 ? Number(values[index] ?? 0) / total : 0;
+		});
+		return {
+			...trace,
+			customdata: shares,
+			hovertemplate: horizontal ? `<b>%{y}</b><br>${measure}: %{x}<br>Share: %{customdata:.1%}<extra>%{fullData.name}</extra>` : `<b>%{x}</b><br>${measure}: %{y}<br>Share: %{customdata:.1%}<extra>%{fullData.name}</extra>`
+		};
+	});
+};
+//#endregion
+export { BarChart_exports as n, BarChart as t };

package/dist/EventAttributePicker-Cf2vVKv5.js

@@ -0,0 +1,27 @@
+import { t as useOcelId } from "./useOcelId-BSU0-Srk.js";
+import { NamePicker } from "./NamePicker-Be-qmr1x.js";
+import { useEventAttributes } from "@ocelescope/api-base";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/pickers/EventAttributePicker.tsx
+/** The attributes events carry, counted by how many values each takes. */
+const EventAttributePicker = ({ activity, ocelId, ocelVersion = "filtered", ...picker }) => {
+	const id = useOcelId(ocelId);
+	const { data, isPending } = useEventAttributes(id, {
+		ocel_version: ocelVersion,
+		...activity ? { names: [activity] } : {}
+	}, { query: { enabled: id != null } });
+	return /* @__PURE__ */ jsx(NamePicker, {
+		items: (data ?? []).map((attribute) => ({
+			key: attribute.name,
+			count: attribute.distinct_values
+		})),
+		scope: "attribute",
+		loading: isPending,
+		bars: false,
+		cutoff: false,
+		sort: "name",
+		...picker
+	});
+};
+//#endregion
+export { EventAttributePicker };

package/dist/LineChart-CVz-dkJI.js

@@ -0,0 +1,64 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { i as measureOf, n as axis, t as Plot } from "./Plot-CxHHyXot.js";
+import { n as toSeries, t as paint } from "./series-BBXVjHHY.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/charts/LineChart.tsx
+var LineChart_exports = /* @__PURE__ */ __exportAll({ LineChart: () => LineChart });
+/** Lines through ordered values, optionally with one scale per line. */
+const LineChart = ({ step = false, yAxes = "shared", xRange, ...props }) => {
+	const groups = toSeries(props);
+	const independent = yAxes === "independent" && groups.length > 1;
+	const colors = groups.map((group) => {
+		const color = paint(group, props.colorOf, false);
+		return typeof color === "string" ? color : void 0;
+	});
+	const traces = groups.map((group, index) => ({
+		type: "scatter",
+		mode: step || group.values.length <= 40 ? "lines+markers" : "lines",
+		name: group.name,
+		x: group.labels,
+		y: group.values,
+		...independent && { yaxis: index === 0 ? "y" : `y${index + 1}` },
+		line: {
+			width: 2,
+			...step && { shape: "hv" },
+			...colors[index] && { color: colors[index] }
+		},
+		marker: {
+			size: 5,
+			...colors[index] && { color: colors[index] }
+		},
+		connectgaps: false,
+		hovertemplate: "<b>%{fullData.name}</b><br>%{x}<br>%{y}<extra></extra>"
+	}));
+	const yLayout = independent ? Object.fromEntries(groups.map((group, index) => [index === 0 ? "yaxis" : `yaxis${index + 1}`, {
+		...axis(group.name),
+		...index > 0 && {
+			overlaying: "y",
+			side: index % 2 === 0 ? "left" : "right",
+			anchor: "free",
+			autoshift: true,
+			showgrid: false,
+			zeroline: false
+		},
+		...colors[index] && {
+			tickfont: { color: colors[index] },
+			title: {
+				text: group.name,
+				font: { color: colors[index] }
+			}
+		}
+	}])) : { yaxis: axis(measureOf(props.y)) };
+	return /* @__PURE__ */ jsx(Plot, {
+		traces,
+		legend: groups.length > 1,
+		onSelect: props.onSelect,
+		layout: {
+			hovermode: "x unified",
+			xaxis: axis(props.x, xRange),
+			...yLayout
+		}
+	});
+};
+//#endregion
+export { LineChart_exports as n, LineChart as t };

package/dist/NamePicker-Be-qmr1x.js

@@ -0,0 +1,43 @@
+import { Stack, Text } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FrequencyPicker } from "@r4pm/components";
+//#region src/components/pickers/types.ts
+/** The names as a set, which is how the pickers themselves hold them. */
+const chosen = (selection) => new Set(selection.multiple ? selection.value : selection.value == null ? [] : [selection.value]);
+/** Report a set back as the one name, or the list, the caller asked for. */
+const report = (selection, names) => {
+	const list = [...names];
+	if (selection.multiple) selection.onChange(list);
+	else selection.onChange(list[0]);
+};
+//#endregion
+//#region src/components/pickers/NamePicker.tsx
+/**
+* Picking names out of a list, with what is known about how often each occurs.
+*
+* Presentational: it is handed the names and reports back what was picked.
+* `ActivityPicker` and the others wrap it around an endpoint.
+*/
+const NamePicker = ({ items, label, searchable = true, bars = true, counts = true, cutoff = false, sort = "count", scope = "name", loading = false, emptyText, disabled = false, autoFocus, ...selection }) => /* @__PURE__ */ jsxs(Stack, {
+	gap: 4,
+	children: [label && /* @__PURE__ */ jsx(Text, {
+		size: "xs",
+		c: "dimmed",
+		children: label
+	}), /* @__PURE__ */ jsx(FrequencyPicker, {
+		items,
+		mode: selection.multiple ? "multi" : "single",
+		value: chosen(selection),
+		onChange: (next) => !disabled && report(selection, next),
+		searchable,
+		showBars: bars,
+		showCounts: counts,
+		showCutoff: cutoff,
+		sort,
+		scope,
+		autoFocus,
+		emptyText: emptyText ?? (loading ? "Reading the OCEL…" : "Nothing here")
+	})]
+});
+//#endregion
+export { NamePicker };

package/dist/ObjectAttributePicker-CL43EsYt.js

@@ -0,0 +1,27 @@
+import { t as useOcelId } from "./useOcelId-BSU0-Srk.js";
+import { NamePicker } from "./NamePicker-Be-qmr1x.js";
+import { useObjectAttributes } from "@ocelescope/api-base";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/pickers/ObjectAttributePicker.tsx
+/** The attributes objects carry, counted by how many values each takes. */
+const ObjectAttributePicker = ({ objectType, ocelId, ocelVersion = "filtered", ...picker }) => {
+	const id = useOcelId(ocelId);
+	const { data, isPending } = useObjectAttributes(id, {
+		ocel_version: ocelVersion,
+		...objectType ? { names: [objectType] } : {}
+	}, { query: { enabled: id != null } });
+	return /* @__PURE__ */ jsx(NamePicker, {
+		items: (data ?? []).map((attribute) => ({
+			key: attribute.name,
+			count: attribute.distinct_values
+		})),
+		scope: "attribute",
+		loading: isPending,
+		bars: false,
+		cutoff: false,
+		sort: "name",
+		...picker
+	});
+};
+//#endregion
+export { ObjectAttributePicker };

package/dist/ObjectTypePicker-CKmszS0y.js

@@ -0,0 +1,18 @@
+import { t as useOcelId } from "./useOcelId-BSU0-Srk.js";
+import { NamePicker } from "./NamePicker-Be-qmr1x.js";
+import { useObjectCounts } from "@ocelescope/api-base";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/pickers/ObjectTypePicker.tsx
+/** The log's object types, by how often they occur. */
+const ObjectTypePicker = ({ ocelId, ocelVersion = "filtered", ...picker }) => {
+	const id = useOcelId(ocelId);
+	const { data, isPending } = useObjectCounts(id, { ocel_version: ocelVersion }, { query: { enabled: id != null } });
+	return /* @__PURE__ */ jsx(NamePicker, {
+		items: data ?? {},
+		scope: "objectType",
+		loading: isPending,
+		...picker
+	});
+};
+//#endregion
+export { ObjectTypePicker };

package/dist/OcelChart-DvGTjJXo.js

@@ -0,0 +1,41 @@
+import { t as useOcelQuery } from "./useOcelQuery-D1QM-Zgv.js";
+import { SqlChart } from "./SqlChart-bwDArK2l.js";
+import { jsx } from "react/jsx-runtime";
+import { AsyncBoundary, EmptyState } from "@r4pm/components";
+//#region src/components/charts/OcelChart.tsx
+/**
+* A chart of the current OCEL: give it SQL, get a chart.
+*
+* Loading, failure and emptiness are handled here, so the charts never have to
+* think about them; the failure shows the query's own error text, because that
+* is the part someone writing SQL can act on.
+*/
+const OcelChart = ({ sql, parameters, ocelVersion = "filtered", enabled = true, height = 320, ...chart }) => {
+	const query = useOcelQuery({
+		sql,
+		parameters,
+		ocelVersion,
+		enabled
+	});
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			height,
+			width: "100%"
+		},
+		children: query.ocelId ? /* @__PURE__ */ jsx(AsyncBoundary, {
+			status: query,
+			loadingLabel: "Querying the OCEL…",
+			errorTitle: "The query failed",
+			onRetry: () => void query.refetch(),
+			children: (data) => /* @__PURE__ */ jsx(SqlChart, {
+				...chart,
+				data
+			})
+		}) : /* @__PURE__ */ jsx(EmptyState, {
+			title: "No OCEL selected",
+			description: "Import or select an OCEL to run this chart's query."
+		})
+	});
+};
+//#endregion
+export { OcelChart };

package/dist/PieChart-DBiASngC.js

@@ -0,0 +1,62 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { t as Plot } from "./Plot-CxHHyXot.js";
+import { n as toSeries, t as paint } from "./series-BBXVjHHY.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/charts/PieChart.tsx
+var PieChart_exports = /* @__PURE__ */ __exportAll({ PieChart: () => PieChart });
+/** Shares of a whole, one slice per category. */
+const PieChart = ({ hole = .5, ...props }) => {
+	const [slices] = toSeries(props);
+	const colors = slices && paint(slices, props.colorOf, true);
+	const total = slices?.values.reduce((sum, value) => sum + (typeof value === "number" ? value : 0), 0);
+	const compact = new Intl.NumberFormat(void 0, {
+		notation: "compact",
+		maximumFractionDigits: 1
+	});
+	return /* @__PURE__ */ jsx(Plot, {
+		traces: slices ? [{
+			type: "pie",
+			labels: slices.labels,
+			values: slices.values,
+			hole,
+			sort: false,
+			direction: "clockwise",
+			rotation: -90,
+			textinfo: slices.labels.length <= 8 ? "label+percent" : "percent",
+			textposition: slices.labels.length <= 5 ? "inside" : "auto",
+			insidetextorientation: "horizontal",
+			hovertemplate: "<b>%{label}</b><br>%{value} · %{percent}<extra></extra>",
+			marker: {
+				...Array.isArray(colors) && { colors },
+				line: {
+					color: "rgba(128,128,128,0.28)",
+					width: 1.5
+				}
+			}
+		}] : [],
+		legend: true,
+		onSelect: props.onSelect,
+		layout: {
+			margin: {
+				t: 44,
+				r: 12,
+				b: 20,
+				l: 12
+			},
+			uniformtext: {
+				mode: "hide",
+				minsize: 11
+			},
+			...hole > 0 && total != null && { annotations: [{
+				text: `<b>${compact.format(total)}</b><br><span style="font-size:11px">total</span>`,
+				showarrow: false,
+				x: .5,
+				y: .5,
+				xanchor: "center",
+				yanchor: "middle"
+			}] }
+		}
+	});
+};
+//#endregion
+export { PieChart_exports as n, PieChart as t };

package/dist/Plot-CxHHyXot.js

@@ -0,0 +1,75 @@
+import { jsx } from "react/jsx-runtime";
+import { ThemedPlot } from "@r4pm/components/charts";
+//#region src/components/charts/types.ts
+/** How a cell reads once it is a label. */
+const label = (value) => value == null ? "∅" : String(value);
+/** A cell as the chart plots it: a number where it is one, else its text. */
+const plotted = (value) => {
+	if (typeof value === "number") return value;
+	if (value == null || value === "") return 0;
+	const number = Number(value);
+	return Number.isFinite(number) ? number : String(value);
+};
+/** The first, or only, column holding numbers. */
+const measureOf = (y) => (Array.isArray(y) ? y[0] : y) ?? "";
+//#endregion
+//#region src/components/charts/internal/Plot.tsx
+/**
+* The plot every chart draws on: r4pm's themed Plotly, with the parts that
+* should look the same everywhere - margins, legend, no mode bar - already set.
+*/
+const Plot = ({ traces, layout, legend = false, readName = (point) => String(point?.label ?? point?.x ?? ""), onSelect }) => /* @__PURE__ */ jsx(ThemedPlot, {
+	data: traces,
+	layout: {
+		autosize: true,
+		margin: {
+			t: legend ? 44 : 12,
+			r: 16,
+			b: 48,
+			l: 56,
+			pad: 2
+		},
+		showlegend: legend,
+		clickmode: onSelect ? "event+select" : "event",
+		legend: {
+			orientation: "h",
+			y: 1.02,
+			yref: "paper",
+			yanchor: "bottom",
+			x: 0,
+			xanchor: "left",
+			bgcolor: "rgba(0,0,0,0)"
+		},
+		hoverlabel: { namelength: -1 },
+		...layout
+	},
+	config: {
+		displaylogo: false,
+		displayModeBar: false,
+		responsive: true,
+		scrollZoom: false,
+		doubleClick: "reset"
+	},
+	style: {
+		width: "100%",
+		height: "100%"
+	},
+	useResizeHandler: true,
+	onClick: ({ points }) => points[0] && onSelect?.(readName(points[0]), points[0])
+});
+/** An axis that keeps its labels on screen, named after its column. */
+const axis = (title, range) => ({
+	automargin: true,
+	ticks: "outside",
+	ticklen: 4,
+	tickfont: { size: 11 },
+	zeroline: false,
+	...title && { title: {
+		text: title,
+		font: { size: 12 },
+		standoff: 10
+	} },
+	...range && { range: [...range] }
+});
+//#endregion
+export { plotted as a, measureOf as i, axis as n, label as r, Plot as t };

package/dist/ScatterChart-jIQOjQes.js

@@ -0,0 +1,36 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { i as measureOf, n as axis, t as Plot } from "./Plot-CxHHyXot.js";
+import { n as traceCount, t as cartesian } from "./cartesian-5TPNWjl_.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/charts/ScatterChart.tsx
+var ScatterChart_exports = /* @__PURE__ */ __exportAll({ ScatterChart: () => ScatterChart });
+/** A point per row, for values that have no order to follow. */
+const ScatterChart = ({ xRange, ...props }) => {
+	const measure = measureOf(props.y);
+	return /* @__PURE__ */ jsx(Plot, {
+		traces: cartesian(props, {
+			type: "scatter",
+			mode: "markers",
+			marker: {
+				size: props.rows.length > 500 ? 6 : 9,
+				opacity: props.rows.length > 500 ? .55 : .78,
+				line: {
+					color: "rgba(128,128,128,0.35)",
+					width: .75
+				}
+			},
+			hovertemplate: "<b>%{fullData.name}</b><br>%{x}<br>%{y}<extra></extra>"
+		}),
+		legend: traceCount(props) > 1,
+		onSelect: props.onSelect,
+		layout: {
+			hovermode: "closest",
+			hoverdistance: 24,
+			dragmode: "zoom",
+			xaxis: axis(props.x, xRange),
+			yaxis: axis(measure)
+		}
+	});
+};
+//#endregion
+export { ScatterChart_exports as n, ScatterChart as t };