@chelone/vue 0.6.0 → 0.7.0

package/dist/components/charts/bar-chart.vue.d.ts

@@ -0,0 +1,22 @@
+import type { LooseRecord } from "@chelone/core";
+import type { SeriesChartProps } from "./series-chart.js";
+/** Props for {@link BarChart}. */
+export type BarChartProps<TRow extends object = LooseRecord, TX extends keyof TRow & string = keyof TRow & string> = SeriesChartProps<TRow, TX>;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <TRow extends object = LooseRecord, TX extends keyof TRow & string = keyof TRow & string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<BarChartProps<TRow, TX>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/charts/bar-chart.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,99 @@
+import chart_container_default from "../ui/chart/chart-container.js";
+import chart_frame_default from "./chart-frame.js";
+import { rowX, rowY, useSeriesRows } from "./series-chart.js";
+import { createBlock, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, unref, withCtx } from "vue";
+import { hasChartValues } from "@chelone/core";
+import { VisAxis, VisCrosshair, VisGroupedBar, VisTooltip, VisXYContainer } from "@unovis/vue";
+// src/components/charts/bar-chart.vue?vue&type=script&setup=true&lang.ts
+var bar_chart_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "bar-chart",
+	props: {
+		data: {},
+		xField: {},
+		yField: {},
+		title: {},
+		color: { default: "var(--primary)" },
+		height: { default: 200 },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		bare: {
+			type: Boolean,
+			default: false
+		},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<BarChart>` — one bar per row over one numeric field, the Vue twin of
+		* `@chelone/react`'s `charts/bar-chart.tsx`, drawn with unovis. x is the row
+		* index, so any x value keeps its order; the x axis maps each tick back to the
+		* row's own `x`. Needs the optional `@unovis/vue` and `@unovis/ts` peers.
+		*
+		* @example
+		* import { BarChart } from "@chelone/vue/charts";
+		*
+		* <BarChart :data="visits" x-field="day" y-field="count" title="Visits" />
+		*/
+		const props = __props;
+		const { rows, config, xAxis, tooltipFor } = useSeriesRows(props);
+		const color = () => props.color;
+		const tooltipTemplate = (row) => tooltipFor(row, row.y);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(chart_frame_default, {
+				"data-slot": "bar-chart",
+				title: props.title,
+				bare: props.bare,
+				loading: props.loading,
+				empty: !unref(hasChartValues)(unref(rows)),
+				height: props.height,
+				class: normalizeClass(props.class)
+			}, {
+				default: withCtx(() => [createVNode(unref(chart_container_default), {
+					config: unref(config),
+					class: "aspect-auto w-full",
+					style: normalizeStyle({ height: `${props.height}px` })
+				}, {
+					default: withCtx(() => [createVNode(unref(VisXYContainer), {
+						data: unref(rows),
+						height: props.height
+					}, {
+						default: withCtx(() => [
+							createVNode(unref(VisGroupedBar), {
+								x: unref(rowX),
+								y: unref(rowY),
+								color,
+								"rounded-corners": 4,
+								"bar-min-height": 0
+							}, null, 8, ["x", "y"]),
+							createVNode(unref(VisAxis), mergeProps({ type: "x" }, unref(xAxis)), null, 16),
+							createVNode(unref(VisAxis), {
+								type: "y",
+								"tick-line": false,
+								"domain-line": false
+							}),
+							createVNode(unref(VisCrosshair), {
+								x: unref(rowX),
+								y: unref(rowY),
+								template: tooltipTemplate
+							}, null, 8, ["x", "y"]),
+							createVNode(unref(VisTooltip))
+						]),
+						_: 1
+					}, 8, ["data", "height"])]),
+					_: 1
+				}, 8, ["config", "style"])]),
+				_: 1
+			}, 8, [
+				"title",
+				"bare",
+				"loading",
+				"empty",
+				"height",
+				"class"
+			]);
+		};
+	}
+});
+export { bar_chart_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/charts/chart-frame.js

@@ -0,0 +1,4 @@
+import chart_frame_vue_vue_type_script_lang_default from "./chart-frame.vue_vue_type_script_lang.js";
+// src/components/charts/chart-frame.vue
+var chart_frame_default = chart_frame_vue_vue_type_script_lang_default;
+export { chart_frame_default as default };

package/dist/components/charts/chart-frame.vue.d.ts

@@ -0,0 +1,73 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** The `data-slot` of the element that holds the chart, its skeleton or its empty text. */
+    dataSlot: {
+        type: StringConstructor;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    bare: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** No number to draw: shows the empty text in place of the chart. */
+    empty: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: NumberConstructor;
+        required: true;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** The `data-slot` of the element that holds the chart, its skeleton or its empty text. */
+    dataSlot: {
+        type: StringConstructor;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    bare: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** No number to draw: shows the empty text in place of the chart. */
+    empty: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: NumberConstructor;
+        required: true;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    title: string;
+    empty: boolean;
+    bare: boolean;
+    loading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/charts/chart-frame.vue_vue_type_script_lang.js

@@ -0,0 +1,64 @@
+import { useTranslate } from "../../i18n/use-translate.js";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card.js";
+import skeleton_default from "../ui/skeleton.js";
+import { defineComponent, h } from "vue";
+// src/components/charts/chart-frame.vue?vue&type=script&lang.ts
+/**
+* The shell the chart components share, the Vue twin of `@chelone/react`'s
+* `charts/chart-frame.tsx`: a card with an optional title, or none when
+* `bare`, around the chart, a skeleton while `loading` or the empty text.
+* A render function, so `bare` can drop the card without a second copy of the
+* body.
+*/
+var chart_frame_vue_vue_type_script_lang_default = defineComponent({
+	name: "ChartFrame",
+	props: {
+		/** The `data-slot` of the element that holds the chart, its skeleton or its empty text. */
+		dataSlot: {
+			type: String,
+			required: true
+		},
+		title: {
+			type: String,
+			default: void 0
+		},
+		bare: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		/** No number to draw: shows the empty text in place of the chart. */
+		empty: {
+			type: Boolean,
+			default: false
+		},
+		height: {
+			type: Number,
+			required: true
+		},
+		class: {
+			type: String,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const translate = useTranslate();
+		return () => {
+			const style = { height: `${props.height}px` };
+			const body = props.loading ? h(skeleton_default, { style }) : props.empty ? h("div", {
+				"data-slot": "chart-empty",
+				class: "flex items-center justify-center text-sm text-muted-foreground",
+				style
+			}, translate("chelone.chart.empty", { _: "No data" })) : slots.default?.();
+			if (props.bare) return h("div", {
+				"data-slot": props.dataSlot,
+				class: props.class
+			}, body);
+			return h(Card, { class: props.class }, () => [props.title ? h(CardHeader, null, () => h(CardTitle, null, () => props.title)) : null, h(CardContent, null, () => h("div", { "data-slot": props.dataSlot }, body))]);
+		};
+	}
+});
+export { chart_frame_vue_vue_type_script_lang_default as default };

package/dist/components/charts/donut-chart.js

@@ -0,0 +1,4 @@
+import donut_chart_vue_vue_type_script_setup_true_lang_default from "./donut-chart.vue_vue_type_script_setup_true_lang.js";
+// src/components/charts/donut-chart.vue
+var donut_chart_default = donut_chart_vue_vue_type_script_setup_true_lang_default;
+export { donut_chart_default as default };

package/dist/components/charts/donut-chart.vue.d.ts

@@ -0,0 +1,35 @@
+import type { LooseRecord } from "@chelone/core";
+/** Props for {@link DonutChart}. */
+export interface DonutChartProps<TRow extends object = LooseRecord> {
+    data: readonly TRow[];
+    labelField: keyof TRow & string;
+    /** A row whose value is not a number above zero draws no segment. */
+    valueField: keyof TRow & string;
+    title?: string;
+    /** Any CSS colors, cycled over the segments. Defaults to the theme's chart colors. */
+    colors?: readonly string[];
+    /** In pixels. Defaults to 200. */
+    height?: number;
+    loading?: boolean;
+    /** Leaves out the card and the title. */
+    bare?: boolean;
+    class?: string;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <TRow extends object = LooseRecord>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DonutChartProps<TRow>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/charts/donut-chart.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,93 @@
+import chart_container_default from "../ui/chart/chart-container.js";
+import chart_tooltip_content_default from "../ui/chart/chart-tooltip-content.js";
+import { componentToString } from "../ui/chart/utils.js";
+import chart_frame_default from "./chart-frame.js";
+import { computed, createBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, unref, withCtx } from "vue";
+import { DEFAULT_CHART_COLORS, chartColor, toDonutSlices } from "@chelone/core";
+import { VisDonut, VisSingleContainer, VisTooltip } from "@unovis/vue";
+import { Donut } from "@unovis/ts";
+// src/components/charts/donut-chart.vue?vue&type=script&setup=true&lang.ts
+var donut_chart_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "donut-chart",
+	props: {
+		data: {},
+		labelField: {},
+		valueField: {},
+		title: {},
+		colors: { default: () => DEFAULT_CHART_COLORS },
+		height: { default: 200 },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		bare: {
+			type: Boolean,
+			default: false
+		},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<DonutChart>` — one segment per row with a value above zero, the Vue twin
+		* of `@chelone/react`'s `charts/donut-chart.tsx`, drawn with unovis. Needs the
+		* optional `@unovis/vue` and `@unovis/ts` peers.
+		*
+		* @example
+		* import { DonutChart } from "@chelone/vue/charts";
+		*
+		* <DonutChart :data="plans" label-field="plan" value-field="seats" />
+		*/
+		const props = __props;
+		const slices = computed(() => toDonutSlices(props.data, props.labelField, props.valueField));
+		const config = { value: {} };
+		const value = (slice) => slice.value;
+		const color = (_slice, index) => chartColor(index, props.colors);
+		const arcWidth = computed(() => Math.round(props.height * .15));
+		const tooltipTemplate = (arc) => componentToString(config, chart_tooltip_content_default, {
+			nameKey: "label",
+			hideLabel: true,
+			color: color(arc.data, arc.index)
+		})?.(arc) ?? "";
+		const triggers = { [Donut.selectors.segment]: tooltipTemplate };
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(chart_frame_default, {
+				"data-slot": "donut-chart",
+				title: props.title,
+				bare: props.bare,
+				loading: props.loading,
+				empty: slices.value.length === 0,
+				height: props.height,
+				class: normalizeClass(props.class)
+			}, {
+				default: withCtx(() => [createVNode(unref(chart_container_default), {
+					config,
+					class: "aspect-auto w-full",
+					style: normalizeStyle({ height: `${props.height}px` })
+				}, {
+					default: withCtx(() => [createVNode(unref(VisSingleContainer), {
+						data: slices.value,
+						height: props.height
+					}, {
+						default: withCtx(() => [createVNode(unref(VisDonut), {
+							value,
+							color,
+							"arc-width": arcWidth.value,
+							"show-background": false
+						}, null, 8, ["arc-width"]), createVNode(unref(VisTooltip), { triggers })]),
+						_: 1
+					}, 8, ["data", "height"])]),
+					_: 1
+				}, 8, ["style"])]),
+				_: 1
+			}, 8, [
+				"title",
+				"bare",
+				"loading",
+				"empty",
+				"height",
+				"class"
+			]);
+		};
+	}
+});
+export { donut_chart_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/charts/series-chart.d.ts

@@ -0,0 +1,46 @@
+/**
+ * What the charts that plot one field of a row against another share: their
+ * props, and the rows, tooltip config and x axis labels drawn from them.
+ */
+import { type LooseRecord } from "@chelone/core";
+import { type ChartConfig } from "../ui/chart/index.js";
+/** The props `<TrendChart>` and `<BarChart>` share. */
+export interface SeriesChartProps<TRow extends object = LooseRecord, TX extends keyof TRow & string = keyof TRow & string> {
+    data: readonly TRow[];
+    xField: TX;
+    /** A row whose value is not a finite number draws no point or bar. */
+    yField: keyof TRow & string;
+    title?: string;
+    /** Any CSS color. Defaults to `var(--primary)`. */
+    color?: string;
+    /** In pixels. Defaults to 200. */
+    height?: number;
+    loading?: boolean;
+    /** Leaves out the card and the title. */
+    bare?: boolean;
+    class?: string;
+}
+type Point = {
+    index: number;
+    y: number | null;
+};
+/** x is the row index, so any x value keeps its order. */
+export declare const rowX: (row: Point) => number;
+export declare const rowY: (row: Point) => number | null;
+/** What `useSeriesRows` reads: the shared props, and `<TrendChart>`'s x tick formatter. */
+type SeriesSource<TRow extends object, TX extends keyof TRow & string> = SeriesChartProps<TRow, TX> & {
+    xTickFormatter?: (value: TRow[TX]) => string;
+};
+export declare function useSeriesRows<TRow extends object, TX extends keyof TRow & string>(props: SeriesSource<TRow, TX>): {
+    rows: import("vue").ComputedRef<import("@chelone/core").CartesianRow<TRow[TX]>[]>;
+    config: import("vue").ComputedRef<ChartConfig>;
+    xAxis: import("vue").ComputedRef<{
+        gridLine: boolean;
+        tickLine: boolean;
+        domainLine: boolean;
+        tickValues: number[];
+        tickFormat: (position: number | Date) => string;
+    }>;
+    tooltipFor: (row: import("@chelone/core").CartesianRow<TRow[TX]>, value: number | string | null) => string;
+};
+export {};

package/dist/components/charts/series-chart.js

@@ -0,0 +1,47 @@
+import chart_tooltip_content_default from "../ui/chart/chart-tooltip-content.js";
+import { componentToString } from "../ui/chart/utils.js";
+import { computed } from "vue";
+import { toCartesianRows } from "@chelone/core";
+// src/components/charts/series-chart.ts
+/**
+* What the charts that plot one field of a row against another share: their
+* props, and the rows, tooltip config and x axis labels drawn from them.
+*/
+/** x is the row index, so any x value keeps its order. */
+var rowX = (row) => row.index;
+var rowY = (row) => row.y;
+function useSeriesRows(props) {
+	const rows = computed(() => toCartesianRows(props.data, props.xField, props.yField));
+	const config = computed(() => ({ [props.yField]: {
+		label: props.yField,
+		color: props.color
+	} }));
+	/** The label of the row an axis tick or the crosshair stands on; between two rows there is none. */
+	function xLabel(position) {
+		const index = typeof position === "number" ? position : position.getTime();
+		const row = Number.isInteger(index) ? rows.value[index] : void 0;
+		if (!row) return "";
+		if (props.xTickFormatter) return props.xTickFormatter(row.x);
+		return row.x == null ? "" : String(row.x);
+	}
+	const xTicks = computed(() => {
+		const step = Math.max(1, Math.ceil(rows.value.length / 7));
+		return rows.value.filter((row) => row.index % step === 0).map(rowX);
+	});
+	const tooltip = computed(() => componentToString(config.value, chart_tooltip_content_default, { labelFormatter: xLabel }));
+	/** The crosshair's HTML for a row, with `value` shown in place of the row's y. */
+	const tooltipFor = (row, value) => tooltip.value?.({ [props.yField]: value }, row.index) ?? "";
+	return {
+		rows,
+		config,
+		xAxis: computed(() => ({
+			gridLine: false,
+			tickLine: false,
+			domainLine: false,
+			tickValues: xTicks.value,
+			tickFormat: xLabel
+		})),
+		tooltipFor
+	};
+}
+export { rowX, rowY, useSeriesRows };

package/dist/components/charts/trend-chart.js

@@ -0,0 +1,4 @@
+import trend_chart_vue_vue_type_script_setup_true_lang_default from "./trend-chart.vue_vue_type_script_setup_true_lang.js";
+// src/components/charts/trend-chart.vue
+var trend_chart_default = trend_chart_vue_vue_type_script_setup_true_lang_default;
+export { trend_chart_default as default };

package/dist/components/charts/trend-chart.vue.d.ts

@@ -0,0 +1,30 @@
+import type { LooseRecord } from "@chelone/core";
+import type { SeriesChartProps } from "./series-chart.js";
+/** Props for {@link TrendChart}. */
+export interface TrendChartProps<TRow extends object = LooseRecord, TX extends keyof TRow & string = keyof TRow & string> extends SeriesChartProps<TRow, TX> {
+    /** Fills the area under the line with a gradient. */
+    area?: boolean;
+    /** Draws a smooth curve instead of straight segments. */
+    smooth?: boolean;
+    xTickFormatter?: (value: TRow[TX]) => string;
+    yTickFormatter?: (value: number) => string;
+    tooltipFormatter?: (value: number, name: string) => string;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <TRow extends object = LooseRecord, TX extends keyof TRow & string = keyof TRow & string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TrendChartProps<TRow, TX>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};