@dou-ui/dashboard 0.0.0-stage → 0.1.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 daidr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,11 @@
-# Temporary Holding Version
+# @dou-ui/dashboard
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[DouUI](https://github.com/daidr/dou-ui) 的仪表盘：可拖动、可缩放的网格布局，以及带数据源、筛选联动和协同编辑的仪表盘设计器。
+
+```sh
+bun add @dou-ui/dashboard dou-ui @dou-ui/chart @dou-ui/pivot
+```
+
+用法见 [文档](https://ui.daidr.me/dashboard/)。
+
+许可证：MIT

package/dist/chart/chart-settings.js

@@ -0,0 +1,6 @@
+import chart_settings_vue_vue_type_script_setup_true_lang_default from "./chart-settings.vue_vue_type_script_setup_true_lang.js";
+// src/chart/chart-settings.vue
+var chart_settings_default = chart_settings_vue_vue_type_script_setup_true_lang_default;
+export { chart_settings_default as default };
+
+//# sourceMappingURL=chart-settings.js.map

package/dist/chart/chart-settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-settings.js","names":["_sfc_main"],"sources":["../../src/chart/chart-settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouInput, DouSegmentedControl, DouSwitch } from 'dou-ui'\nimport { computed } from 'vue'\nimport { useDashboardMessages } from '../locale'\nimport { useDashboardWidget } from '../widget/context'\nimport FieldSelect from '../widgets/field-select.vue'\nimport SettingsField from '../widgets/settings-field.vue'\nimport { fieldsOf, numberFieldsOf, rowsOf } from '../widgets/shared'\nimport SourceField from '../widgets/source-field.vue'\nimport type { ChartWidgetProps } from './types'\n\ndefineOptions({ name: 'DouDashboardChartSettings' })\n\nconst model = defineModel<ChartWidgetProps>({ required: true })\nconst messages = useDashboardMessages()\nconst { data } = useDashboardWidget()\nconst rows = computed(() => rowsOf(data.value, model.value.path))\nconst set = (patch: Partial<ChartWidgetProps>) => (model.value = { ...model.value, ...patch })\nconst kind = computed(() => model.value.kind ?? 'line')\n</script>\n\n<template>\n  <div class=\"dou-dashboard__settings\">\n    <SourceField :model-value=\"model.source\" @update:model-value=\"(source) => set({ source })\" />\n    <SettingsField :label=\"messages.chartKind\">\n      <DouSegmentedControl\n        :model-value=\"kind\"\n        :options=\"[\n          { value: 'line', label: messages.chartLine },\n          { value: 'area', label: messages.chartArea },\n          { value: 'bar', label: messages.chartBar },\n          { value: 'pie', label: messages.chartPie },\n        ]\"\n        :aria-label=\"messages.chartKind\"\n        @update:model-value=\"(value) => set({ kind: value as ChartWidgetProps['kind'] })\"\n      />\n    </SettingsField>\n    <FieldSelect\n      :model-value=\"model.x\"\n      :label=\"messages.xField\"\n      :fields=\"fieldsOf(rows)\"\n      @update:model-value=\"(x) => set({ x: x as string | undefined })\"\n    />\n    <FieldSelect\n      :model-value=\"kind === 'pie' ? (model.y ?? []).slice(0, 1) : model.y\"\n      :label=\"messages.yFields\"\n      :fields=\"numberFieldsOf(rows)\"\n      :multiple=\"kind !== 'pie'\"\n      @update:model-value=\"\n        (y) => set({ y: y === undefined ? undefined : Array.isArray(y) ? y : [y] })\n      \"\n    />\n    <div v-if=\"kind === 'bar' || kind === 'area'\" class=\"dou-dashboard__field-row\">\n      <DouSwitch\n        :model-value=\"!!model.stacked\"\n        @update:model-value=\"(stacked) => set({ stacked: stacked || undefined })\"\n      >\n        {{ messages.stacked }}\n      </DouSwitch>\n      <DouSwitch\n        v-if=\"kind === 'bar'\"\n        :model-value=\"!!model.horizontal\"\n        @update:model-value=\"(horizontal) => set({ horizontal: horizontal || undefined })\"\n      >\n        {{ messages.horizontal }}\n      </DouSwitch>\n    </div>\n    <SettingsField :label=\"messages.chartFilter\" :hint=\"messages.chartFilterHint\">\n      <DouInput\n        :model-value=\"model.filter ?? ''\"\n        :aria-label=\"messages.chartFilter\"\n        @update:model-value=\"(key) => set({ filter: key.trim() || undefined })\"\n      />\n    </SettingsField>\n  </div>\n</template>\n"],"mappings":""}

package/dist/chart/chart-settings.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,122 @@
+import { useDashboardMessages } from "../locale.js";
+import { useDashboardWidget } from "../widget/context.js";
+import { fieldsOf, numberFieldsOf, rowsOf } from "../widgets/shared.js";
+import settings_field_default from "../widgets/settings-field.js";
+import field_select_default from "../widgets/field-select.js";
+import source_field_default from "../widgets/source-field.js";
+import { DouInput, DouSegmentedControl, DouSwitch } from "dou-ui";
+import { computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, useModel, withCtx } from "vue";
+// src/chart/chart-settings.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "dou-dashboard__settings" };
+var _hoisted_2 = {
+	key: 0,
+	class: "dou-dashboard__field-row"
+};
+var chart_settings_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouDashboardChartSettings",
+	__name: "chart-settings",
+	props: {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const messages = useDashboardMessages();
+		const { data } = useDashboardWidget();
+		const rows = computed(() => rowsOf(data.value, model.value.path));
+		const set = (patch) => model.value = {
+			...model.value,
+			...patch
+		};
+		const kind = computed(() => model.value.kind ?? "line");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createVNode(source_field_default, {
+					"model-value": model.value.source,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = (source) => set({ source }))
+				}, null, 8, ["model-value"]),
+				createVNode(settings_field_default, { label: unref(messages).chartKind }, {
+					default: withCtx(() => [createVNode(unref(DouSegmentedControl), {
+						"model-value": kind.value,
+						options: [
+							{
+								value: "line",
+								label: unref(messages).chartLine
+							},
+							{
+								value: "area",
+								label: unref(messages).chartArea
+							},
+							{
+								value: "bar",
+								label: unref(messages).chartBar
+							},
+							{
+								value: "pie",
+								label: unref(messages).chartPie
+							}
+						],
+						"aria-label": unref(messages).chartKind,
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = (value) => set({ kind: value }))
+					}, null, 8, [
+						"model-value",
+						"options",
+						"aria-label"
+					])]),
+					_: 1
+				}, 8, ["label"]),
+				createVNode(field_select_default, {
+					"model-value": model.value.x,
+					label: unref(messages).xField,
+					fields: unref(fieldsOf)(rows.value),
+					"onUpdate:modelValue": _cache[2] || (_cache[2] = (x) => set({ x }))
+				}, null, 8, [
+					"model-value",
+					"label",
+					"fields"
+				]),
+				createVNode(field_select_default, {
+					"model-value": kind.value === "pie" ? (model.value.y ?? []).slice(0, 1) : model.value.y,
+					label: unref(messages).yFields,
+					fields: unref(numberFieldsOf)(rows.value),
+					multiple: kind.value !== "pie",
+					"onUpdate:modelValue": _cache[3] || (_cache[3] = (y) => set({ y: y === void 0 ? void 0 : Array.isArray(y) ? y : [y] }))
+				}, null, 8, [
+					"model-value",
+					"label",
+					"fields",
+					"multiple"
+				]),
+				kind.value === "bar" || kind.value === "area" ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(DouSwitch), {
+					"model-value": !!model.value.stacked,
+					"onUpdate:modelValue": _cache[4] || (_cache[4] = (stacked) => set({ stacked: stacked || void 0 }))
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).stacked), 1)]),
+					_: 1
+				}, 8, ["model-value"]), kind.value === "bar" ? (openBlock(), createBlock(unref(DouSwitch), {
+					key: 0,
+					"model-value": !!model.value.horizontal,
+					"onUpdate:modelValue": _cache[5] || (_cache[5] = (horizontal) => set({ horizontal: horizontal || void 0 }))
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).horizontal), 1)]),
+					_: 1
+				}, 8, ["model-value"])) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				createVNode(settings_field_default, {
+					label: unref(messages).chartFilter,
+					hint: unref(messages).chartFilterHint
+				}, {
+					default: withCtx(() => [createVNode(unref(DouInput), {
+						"model-value": model.value.filter ?? "",
+						"aria-label": unref(messages).chartFilter,
+						"onUpdate:modelValue": _cache[6] || (_cache[6] = (key) => set({ filter: key.trim() || void 0 }))
+					}, null, 8, ["model-value", "aria-label"])]),
+					_: 1
+				}, 8, ["label", "hint"])
+			]);
+		};
+	}
+});
+export { chart_settings_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=chart-settings.vue_vue_type_script_setup_true_lang.js.map

package/dist/chart/chart-settings.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-settings.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","SourceField","SettingsField","_unref","_withCtx","FieldSelect","_createTextVNode","_toDisplayString","_createBlock","_createCommentVNode"],"sources":["../../src/chart/chart-settings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouInput, DouSegmentedControl, DouSwitch } from 'dou-ui'\nimport { computed } from 'vue'\nimport { useDashboardMessages } from '../locale'\nimport { useDashboardWidget } from '../widget/context'\nimport FieldSelect from '../widgets/field-select.vue'\nimport SettingsField from '../widgets/settings-field.vue'\nimport { fieldsOf, numberFieldsOf, rowsOf } from '../widgets/shared'\nimport SourceField from '../widgets/source-field.vue'\nimport type { ChartWidgetProps } from './types'\n\ndefineOptions({ name: 'DouDashboardChartSettings' })\n\nconst model = defineModel<ChartWidgetProps>({ required: true })\nconst messages = useDashboardMessages()\nconst { data } = useDashboardWidget()\nconst rows = computed(() => rowsOf(data.value, model.value.path))\nconst set = (patch: Partial<ChartWidgetProps>) => (model.value = { ...model.value, ...patch })\nconst kind = computed(() => model.value.kind ?? 'line')\n</script>\n\n<template>\n  <div class=\"dou-dashboard__settings\">\n    <SourceField :model-value=\"model.source\" @update:model-value=\"(source) => set({ source })\" />\n    <SettingsField :label=\"messages.chartKind\">\n      <DouSegmentedControl\n        :model-value=\"kind\"\n        :options=\"[\n          { value: 'line', label: messages.chartLine },\n          { value: 'area', label: messages.chartArea },\n          { value: 'bar', label: messages.chartBar },\n          { value: 'pie', label: messages.chartPie },\n        ]\"\n        :aria-label=\"messages.chartKind\"\n        @update:model-value=\"(value) => set({ kind: value as ChartWidgetProps['kind'] })\"\n      />\n    </SettingsField>\n    <FieldSelect\n      :model-value=\"model.x\"\n      :label=\"messages.xField\"\n      :fields=\"fieldsOf(rows)\"\n      @update:model-value=\"(x) => set({ x: x as string | undefined })\"\n    />\n    <FieldSelect\n      :model-value=\"kind === 'pie' ? (model.y ?? []).slice(0, 1) : model.y\"\n      :label=\"messages.yFields\"\n      :fields=\"numberFieldsOf(rows)\"\n      :multiple=\"kind !== 'pie'\"\n      @update:model-value=\"\n        (y) => set({ y: y === undefined ? undefined : Array.isArray(y) ? y : [y] })\n      \"\n    />\n    <div v-if=\"kind === 'bar' || kind === 'area'\" class=\"dou-dashboard__field-row\">\n      <DouSwitch\n        :model-value=\"!!model.stacked\"\n        @update:model-value=\"(stacked) => set({ stacked: stacked || undefined })\"\n      >\n        {{ messages.stacked }}\n      </DouSwitch>\n      <DouSwitch\n        v-if=\"kind === 'bar'\"\n        :model-value=\"!!model.horizontal\"\n        @update:model-value=\"(horizontal) => set({ horizontal: horizontal || undefined })\"\n      >\n        {{ messages.horizontal }}\n      </DouSwitch>\n    </div>\n    <SettingsField :label=\"messages.chartFilter\" :hint=\"messages.chartFilterHint\">\n      <DouInput\n        :model-value=\"model.filter ?? ''\"\n        :aria-label=\"messages.chartFilter\"\n        @update:model-value=\"(key) => set({ filter: key.trim() || undefined })\"\n      />\n    </SettingsField>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/chart/chart.js

@@ -0,0 +1,6 @@
+import chart_vue_vue_type_script_setup_true_lang_default from "./chart.vue_vue_type_script_setup_true_lang.js";
+// src/chart/chart.vue
+var chart_default = chart_vue_vue_type_script_setup_true_lang_default;
+export { chart_default as default };
+
+//# sourceMappingURL=chart.js.map

package/dist/chart/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","names":["_sfc_main"],"sources":["../../src/chart/chart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  DouChart,\n  DouChartArea,\n  DouChartBar,\n  DouChartLine,\n  DouChartPie,\n  DouChartTooltip,\n} from '@dou-ui/chart'\nimport type { ChartPointEvent } from '@dou-ui/chart'\nimport { computed, watch } from 'vue'\nimport { useDashboardWidget } from '../widget/context'\nimport { filterValueOf, rowsOf, rowsToWorkbook } from '../widgets/shared'\nimport type { ChartWidgetProps } from './types'\n\ndefineOptions({ name: 'DouDashboardChartWidget' })\n\nconst { props, data, size, setFilter, ownFilters, widget, setWorkbook } =\n  useDashboardWidget<ChartWidgetProps>()\nconst rows = computed(() => rowsOf(data.value, props.value.path))\nconst kind = computed(() => props.value.kind ?? 'line')\nconst ys = computed(() => props.value.y ?? [])\nconst nameOf = (key: string) => props.value.labels?.[key] ?? key\n/** The x this widget filters by, if any: the other bars fade. */\nconst picked = computed(() =>\n  props.value.filter ? ownFilters.value[props.value.filter] : undefined,\n)\n/** Bars other than the picked one turn gray; a new function when the pick changes, so they draw again. */\nconst barColor = computed(() => {\n  const value = picked.value\n  const x = props.value.x ?? ''\n  if (!props.value.filter || value === undefined) return undefined\n  return (row: Record<string, unknown>) =>\n    filterValueOf(row[x]) === value ? undefined : 'var(--dou-color-border-strong)'\n})\n\n// the export menu writes the chart's data: a column for x, one for each series;\n// a chart without its fields has no menu\nconst seriesKeys = computed(() => (kind.value === 'pie' ? ys.value.slice(0, 1) : ys.value))\nconst exportable = computed(() => !!props.value.x && seriesKeys.value.length > 0)\nwatch(\n  exportable,\n  (ok) =>\n    setWorkbook(\n      ok\n        ? () => {\n            const x = props.value.x!\n            return rowsToWorkbook(\n              '',\n              [\n                { key: x, title: nameOf(x) },\n                ...seriesKeys.value.map((key) => ({ key, title: nameOf(key) })),\n              ],\n              rows.value,\n            )\n          }\n        : null,\n    ),\n  { immediate: true },\n)\n\nfunction onSelect(event: ChartPointEvent) {\n  const key = props.value.filter\n  if (!key) return\n  const value = filterValueOf(event.x)\n  if (value === picked.value) setFilter(key, undefined)\n  else setFilter(key, value, { label: event.title ?? String(value) })\n}\n</script>\n\n<template>\n  <DouChart\n    class=\"dou-dashboard-chart\"\n    :data=\"rows\"\n    :x=\"props.x\"\n    :height=\"size.height.value || 160\"\n    :horizontal=\"kind === 'bar' && props.horizontal\"\n    :legend=\"kind === 'pie' || ys.length > 1\"\n    :aria-label=\"widget.title\"\n    v-on=\"props.filter ? { select: onSelect } : {}\"\n  >\n    <DouChartPie\n      v-if=\"kind === 'pie'\"\n      :value=\"ys[0] ?? ''\"\n      :name=\"ys[0] ? nameOf(ys[0]) : undefined\"\n      :inner-radius=\"0.6\"\n    />\n    <template v-else>\n      <template v-for=\"y in ys\" :key=\"y\">\n        <DouChartBar\n          v-if=\"kind === 'bar'\"\n          :y=\"y\"\n          :name=\"nameOf(y)\"\n          :stack=\"props.stacked || undefined\"\n          :color=\"barColor\"\n        />\n        <DouChartArea\n          v-else-if=\"kind === 'area'\"\n          :y=\"y\"\n          :name=\"nameOf(y)\"\n          :stack=\"props.stacked || undefined\"\n        />\n        <DouChartLine v-else :y=\"y\" :name=\"nameOf(y)\" />\n      </template>\n    </template>\n    <DouChartTooltip />\n  </DouChart>\n</template>\n"],"mappings":""}

package/dist/chart/chart.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,99 @@
+import { useDashboardWidget } from "../widget/context.js";
+import { filterValueOf, rowsOf, rowsToWorkbook } from "../widgets/shared.js";
+import { Fragment, computed, createBlock, createElementBlock, createVNode, defineComponent, mergeProps, openBlock, renderList, toHandlers, unref, watch, withCtx } from "vue";
+import { DouChart, DouChartArea, DouChartBar, DouChartLine, DouChartPie, DouChartTooltip } from "@dou-ui/chart";
+// src/chart/chart.vue?vue&type=script&setup=true&lang.ts
+var chart_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouDashboardChartWidget",
+	__name: "chart",
+	setup(__props) {
+		const { props, data, size, setFilter, ownFilters, widget, setWorkbook } = useDashboardWidget();
+		const rows = computed(() => rowsOf(data.value, props.value.path));
+		const kind = computed(() => props.value.kind ?? "line");
+		const ys = computed(() => props.value.y ?? []);
+		const nameOf = (key) => props.value.labels?.[key] ?? key;
+		/** The x this widget filters by, if any: the other bars fade. */
+		const picked = computed(() => props.value.filter ? ownFilters.value[props.value.filter] : void 0);
+		/** Bars other than the picked one turn gray; a new function when the pick changes, so they draw again. */
+		const barColor = computed(() => {
+			const value = picked.value;
+			const x = props.value.x ?? "";
+			if (!props.value.filter || value === void 0) return void 0;
+			return (row) => filterValueOf(row[x]) === value ? void 0 : "var(--dou-color-border-strong)";
+		});
+		const seriesKeys = computed(() => kind.value === "pie" ? ys.value.slice(0, 1) : ys.value);
+		const exportable = computed(() => !!props.value.x && seriesKeys.value.length > 0);
+		watch(exportable, (ok) => setWorkbook(ok ? () => {
+			const x = props.value.x;
+			return rowsToWorkbook("", [{
+				key: x,
+				title: nameOf(x)
+			}, ...seriesKeys.value.map((key) => ({
+				key,
+				title: nameOf(key)
+			}))], rows.value);
+		} : null), { immediate: true });
+		function onSelect(event) {
+			const key = props.value.filter;
+			if (!key) return;
+			const value = filterValueOf(event.x);
+			if (value === picked.value) setFilter(key, void 0);
+			else setFilter(key, value, { label: event.title ?? String(value) });
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DouChart), mergeProps({
+				class: "dou-dashboard-chart",
+				data: rows.value,
+				x: unref(props).x,
+				height: unref(size).height.value || 160,
+				horizontal: kind.value === "bar" && unref(props).horizontal,
+				legend: kind.value === "pie" || ys.value.length > 1,
+				"aria-label": unref(widget).title
+			}, toHandlers(unref(props).filter ? { select: onSelect } : {})), {
+				default: withCtx(() => [kind.value === "pie" ? (openBlock(), createBlock(unref(DouChartPie), {
+					key: 0,
+					value: ys.value[0] ?? "",
+					name: ys.value[0] ? nameOf(ys.value[0]) : void 0,
+					"inner-radius": .6
+				}, null, 8, ["value", "name"])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(ys.value, (y) => {
+					return openBlock(), createElementBlock(Fragment, { key: y }, [kind.value === "bar" ? (openBlock(), createBlock(unref(DouChartBar), {
+						key: 0,
+						y,
+						name: nameOf(y),
+						stack: unref(props).stacked || void 0,
+						color: barColor.value
+					}, null, 8, [
+						"y",
+						"name",
+						"stack",
+						"color"
+					])) : kind.value === "area" ? (openBlock(), createBlock(unref(DouChartArea), {
+						key: 1,
+						y,
+						name: nameOf(y),
+						stack: unref(props).stacked || void 0
+					}, null, 8, [
+						"y",
+						"name",
+						"stack"
+					])) : (openBlock(), createBlock(unref(DouChartLine), {
+						key: 2,
+						y,
+						name: nameOf(y)
+					}, null, 8, ["y", "name"]))], 64);
+				}), 128)), createVNode(unref(DouChartTooltip))]),
+				_: 1
+			}, 16, [
+				"data",
+				"x",
+				"height",
+				"horizontal",
+				"legend",
+				"aria-label"
+			]);
+		};
+	}
+});
+export { chart_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=chart.vue_vue_type_script_setup_true_lang.js.map

package/dist/chart/chart.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_mergeProps","_toHandlers","_withCtx","_createElementBlock","_Fragment","_renderList","_createVNode"],"sources":["../../src/chart/chart.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  DouChart,\n  DouChartArea,\n  DouChartBar,\n  DouChartLine,\n  DouChartPie,\n  DouChartTooltip,\n} from '@dou-ui/chart'\nimport type { ChartPointEvent } from '@dou-ui/chart'\nimport { computed, watch } from 'vue'\nimport { useDashboardWidget } from '../widget/context'\nimport { filterValueOf, rowsOf, rowsToWorkbook } from '../widgets/shared'\nimport type { ChartWidgetProps } from './types'\n\ndefineOptions({ name: 'DouDashboardChartWidget' })\n\nconst { props, data, size, setFilter, ownFilters, widget, setWorkbook } =\n  useDashboardWidget<ChartWidgetProps>()\nconst rows = computed(() => rowsOf(data.value, props.value.path))\nconst kind = computed(() => props.value.kind ?? 'line')\nconst ys = computed(() => props.value.y ?? [])\nconst nameOf = (key: string) => props.value.labels?.[key] ?? key\n/** The x this widget filters by, if any: the other bars fade. */\nconst picked = computed(() =>\n  props.value.filter ? ownFilters.value[props.value.filter] : undefined,\n)\n/** Bars other than the picked one turn gray; a new function when the pick changes, so they draw again. */\nconst barColor = computed(() => {\n  const value = picked.value\n  const x = props.value.x ?? ''\n  if (!props.value.filter || value === undefined) return undefined\n  return (row: Record<string, unknown>) =>\n    filterValueOf(row[x]) === value ? undefined : 'var(--dou-color-border-strong)'\n})\n\n// the export menu writes the chart's data: a column for x, one for each series;\n// a chart without its fields has no menu\nconst seriesKeys = computed(() => (kind.value === 'pie' ? ys.value.slice(0, 1) : ys.value))\nconst exportable = computed(() => !!props.value.x && seriesKeys.value.length > 0)\nwatch(\n  exportable,\n  (ok) =>\n    setWorkbook(\n      ok\n        ? () => {\n            const x = props.value.x!\n            return rowsToWorkbook(\n              '',\n              [\n                { key: x, title: nameOf(x) },\n                ...seriesKeys.value.map((key) => ({ key, title: nameOf(key) })),\n              ],\n              rows.value,\n            )\n          }\n        : null,\n    ),\n  { immediate: true },\n)\n\nfunction onSelect(event: ChartPointEvent) {\n  const key = props.value.filter\n  if (!key) return\n  const value = filterValueOf(event.x)\n  if (value === picked.value) setFilter(key, undefined)\n  else setFilter(key, value, { label: event.title ?? String(value) })\n}\n</script>\n\n<template>\n  <DouChart\n    class=\"dou-dashboard-chart\"\n    :data=\"rows\"\n    :x=\"props.x\"\n    :height=\"size.height.value || 160\"\n    :horizontal=\"kind === 'bar' && props.horizontal\"\n    :legend=\"kind === 'pie' || ys.length > 1\"\n    :aria-label=\"widget.title\"\n    v-on=\"props.filter ? { select: onSelect } : {}\"\n  >\n    <DouChartPie\n      v-if=\"kind === 'pie'\"\n      :value=\"ys[0] ?? ''\"\n      :name=\"ys[0] ? nameOf(ys[0]) : undefined\"\n      :inner-radius=\"0.6\"\n    />\n    <template v-else>\n      <template v-for=\"y in ys\" :key=\"y\">\n        <DouChartBar\n          v-if=\"kind === 'bar'\"\n          :y=\"y\"\n          :name=\"nameOf(y)\"\n          :stack=\"props.stacked || undefined\"\n          :color=\"barColor\"\n        />\n        <DouChartArea\n          v-else-if=\"kind === 'area'\"\n          :y=\"y\"\n          :name=\"nameOf(y)\"\n          :stack=\"props.stacked || undefined\"\n        />\n        <DouChartLine v-else :y=\"y\" :name=\"nameOf(y)\" />\n      </template>\n    </template>\n    <DouChartTooltip />\n  </DouChart>\n</template>\n"],"mappings":"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"}

package/dist/chart/index.js

@@ -0,0 +1,33 @@
+import { defineDashboardWidget } from "../widget/define.js";
+import chart_default from "./chart.js";
+import chart_settings_default from "./chart-settings.js";
+import { BarChartIcon } from "@dou-ui/icons";
+// src/chart/index.ts
+/**
+* A chart of a source's rows (line, area, bar or pie), drawn with
+* `@dou-ui/chart`; clicking an x can filter the other widgets. Needs
+* `@dou-ui/chart` and its styles.
+*/
+function chartWidget(overrides = {}) {
+	return defineDashboardWidget({
+		type: "chart",
+		label: "图表",
+		icon: BarChartIcon,
+		size: {
+			w: 6,
+			h: 4,
+			minW: 3,
+			minH: 3
+		},
+		defaultProps: {
+			kind: "line",
+			y: []
+		},
+		component: chart_default,
+		settings: chart_settings_default,
+		...overrides
+	});
+}
+export { chartWidget };
+
+//# sourceMappingURL=index.js.map

package/dist/chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Chart","ChartSettings"],"sources":["../../src/chart/index.ts"],"sourcesContent":["import { BarChartIcon } from '@dou-ui/icons'\nimport { defineDashboardWidget } from '../widget/define'\nimport type { WidgetOverrides } from '../widgets'\nimport Chart from './chart.vue'\nimport ChartSettings from './chart-settings.vue'\nimport type { ChartWidgetProps } from './types'\n\nexport type { ChartWidgetProps } from './types'\n\n/**\n * A chart of a source's rows (line, area, bar or pie), drawn with\n * `@dou-ui/chart`; clicking an x can filter the other widgets. Needs\n * `@dou-ui/chart` and its styles.\n */\nexport function chartWidget(overrides: WidgetOverrides<ChartWidgetProps> = {}) {\n  return defineDashboardWidget<ChartWidgetProps>({\n    type: 'chart',\n    label: '图表',\n    icon: BarChartIcon,\n    size: { w: 6, h: 4, minW: 3, minH: 3 },\n    defaultProps: { kind: 'line', y: [] },\n    component: Chart,\n    settings: ChartSettings,\n    ...overrides,\n  })\n}\n"],"mappings":";;;;;;;;;;AAcA,SAAgB,YAAY,YAA+C,CAAC,GAAG;CAC7E,OAAO,sBAAwC;EAC7C,MAAM;EACN,OAAO;EACP,MAAM;EACN,MAAM;GAAE,GAAG;GAAG,GAAG;GAAG,MAAM;GAAG,MAAM;EAAE;EACrC,cAAc;GAAE,MAAM;GAAQ,GAAG,CAAC;EAAE;EACpC,WAAWA;EACX,UAAUC;EACV,GAAG;CACL,CAAC;AACH"}

package/dist/collaboration/index.js

@@ -0,0 +1,281 @@
+import { orderKeys } from "./order.js";
+import { collaborationColors } from "dou-ui";
+import { shallowRef } from "vue";
+import * as Y from "yjs";
+// src/collaboration/index.ts
+/** A widget's place among the others, kept beside its keys. */
+var ORDER = "$order";
+/** The places by breakpoint, a map of their own, so places on two breakpoints don't overwrite each other. */
+var PLACE = "place";
+var same = (a, b) => a === b || typeof a === "object" && typeof b === "object" && JSON.stringify(a) === JSON.stringify(b);
+/** Where in `value` something JSON can't carry sits, e.g. a component or a function. */
+function unshareable(value, path) {
+	if (value === null || [
+		"string",
+		"number",
+		"boolean",
+		"undefined"
+	].includes(typeof value)) return null;
+	if (typeof value !== "object") return path;
+	const proto = Object.getPrototypeOf(value);
+	if (!Array.isArray(value) && proto !== Object.prototype && proto !== null) return path;
+	for (const [key, item] of Object.entries(value)) {
+		const found = unshareable(item, Array.isArray(value) ? `${path}[${key}]` : `${path}.${key}`);
+		if (found) return found;
+	}
+	return null;
+}
+var warned = /* @__PURE__ */ new Set();
+/** Others would get a broken copy of such a value while this dashboard shows it fine. */
+function warnUnshareable(id, key, value) {
+	if (process.env.NODE_ENV === "production") return;
+	const path = unshareable(value, key);
+	if (!path || warned.has(`${id}:${path}`)) return;
+	warned.add(`${id}:${path}`);
+	console.warn(`[@dou-ui/dashboard] "${id}" has ${path}, which can't be shared: only JSON values reach the others.`);
+}
+/** Writes the places that changed into a widget's place map. */
+function writePlace(fields, place) {
+	const shared = fields.get(PLACE);
+	if (!(shared instanceof Y.Map)) {
+		const map = new Y.Map();
+		for (const [name, value] of Object.entries(place)) if (value) map.set(name, { ...value });
+		fields.set(PLACE, map);
+		return;
+	}
+	for (const [name, value] of Object.entries(place)) if (value && !same(shared.get(name), value)) shared.set(name, { ...value });
+	for (const name of Array.from(shared.keys())) if (!place[name]) shared.delete(name);
+}
+/** Writes a widget's keys besides its order, only those that changed; `keys` limits which. */
+function writeWidget(map, widget, keys) {
+	const existing = map.get(widget.id);
+	const item = widget;
+	if (!(existing instanceof Y.Map)) {
+		const fields = new Y.Map();
+		for (const [key, value] of Object.entries(item)) {
+			if (key === "id" || value === void 0) continue;
+			if (key === PLACE) {
+				const places = new Y.Map();
+				for (const [name, place] of Object.entries(value)) if (place) places.set(name, { ...place });
+				fields.set(PLACE, places);
+				continue;
+			}
+			warnUnshareable(widget.id, key, value);
+			fields.set(key, value);
+		}
+		map.set(widget.id, fields);
+		return;
+	}
+	for (const [key, value] of Object.entries(item)) {
+		if (key === "id" || value === void 0 || keys && !keys.has(key)) continue;
+		if (key === PLACE) writePlace(existing, value);
+		else if (!same(existing.get(key), value)) {
+			warnUnshareable(widget.id, key, value);
+			existing.set(key, value);
+		}
+	}
+	for (const key of Array.from(existing.keys())) if (key[0] !== "$" && item[key] === void 0 && (!keys || keys.has(key))) existing.delete(key);
+}
+/** Writes each widget's order key, giving new keys only where it must. */
+function writeOrder(map, widgets) {
+	const shared = widgets.map((widget) => {
+		const fields = map.get(widget.id);
+		return fields instanceof Y.Map ? fields : null;
+	});
+	const keys = orderKeys(shared.map((fields) => fields?.get(ORDER) ?? null));
+	shared.forEach((fields, index) => {
+		if (fields && fields.get(ORDER) !== keys[index]) fields.set(ORDER, keys[index]);
+	});
+}
+/**
+* Writes a dashboard into an empty map, e.g. when a dashboard so far saved
+* as JSON starts being edited together. Do it once, where the shared
+* document is created; otherwise the first person to open the dashboard
+* brings theirs.
+*/
+function fillMap(map, document) {
+	const fill = () => {
+		for (const widget of document.widgets) writeWidget(map, widget);
+		writeOrder(map, document.widgets);
+	};
+	if (map.doc) map.doc.transact(fill);
+	else fill();
+}
+/** The dashboard the map holds: its widgets by their order keys (then ids, the same for everyone). */
+function readMap(map) {
+	const list = [];
+	map.forEach((value, id) => {
+		if (!(value instanceof Y.Map)) return;
+		const { [ORDER]: order, ...rest } = value.toJSON();
+		if (typeof rest.type !== "string") return;
+		const place = rest[PLACE];
+		list.push({
+			widget: {
+				...rest,
+				id,
+				place: place && typeof place === "object" ? place : {}
+			},
+			order: typeof order === "string" ? order : ""
+		});
+	});
+	list.sort((a, b) => a.order < b.order ? -1 : a.order > b.order ? 1 : a.widget.id < b.widget.id ? -1 : 1);
+	return {
+		version: 1,
+		widgets: list.map((entry) => entry.widget)
+	};
+}
+/** The widgets and keys a transaction changed, written to the map. */
+function writeChanges(map, tr) {
+	const after = new Map(tr.doc.widgets.map((widget) => [widget.id, widget]));
+	const touched = /* @__PURE__ */ new Map();
+	let added = false;
+	let removed = false;
+	for (const step of tr.steps) if (step.type === "add") {
+		touched.set(step.widget.id, true);
+		added = true;
+	} else if (step.type === "remove") {
+		removed = true;
+		touched.delete(step.id);
+	} else {
+		const current = touched.get(step.id);
+		if (current === true) continue;
+		const keys = current ?? /* @__PURE__ */ new Set();
+		for (const key of Object.keys(step.patch)) keys.add(key);
+		touched.set(step.id, keys);
+	}
+	if (removed) {
+		for (const widget of tr.before.widgets) if (!after.has(widget.id)) map.delete(widget.id);
+	}
+	for (const [id, keys] of touched) {
+		const widget = after.get(id);
+		if (!widget) continue;
+		if (keys === true && map.get(id) instanceof Y.Map && removed) map.delete(id);
+		writeWidget(map, widget, keys === true ? void 0 : keys);
+	}
+	if (added) writeOrder(map, tr.doc.widgets);
+}
+var NO_PEERS = [];
+/**
+* Edit a dashboard together through a Yjs document: pass the result to
+* `DouDashboard` as `collaboration`. Each widget lives in `widgets` as its
+* own `Y.Map`, each key on its own and each breakpoint's place on its own,
+* so two people changing different widgets, or different settings of one,
+* both keep their change. When two people move widgets at once, everyone
+* lays the places out the same way, so the dashboards agree. While a widget
+* is dragged, changes from others wait until it is let go. The dashboard's
+* `v-model` only mirrors the shared document: a document set through
+* `v-model` from outside is not written back. Undo only takes back this
+* user's own changes. With `awareness`, each person sees which widget the
+* others are at, outlined in their colors, and whether they are moving,
+* resizing or changing its settings.
+*/
+function collaboration(options) {
+	const { widgets: map, awareness, user } = options;
+	const ydoc = map.doc;
+	if (!ydoc) throw new Error("[@dou-ui/dashboard] widgets must be a map of a Y.Doc");
+	if (awareness && user) {
+		const color = user.color ?? collaborationColors[ydoc.clientID % collaborationColors.length];
+		awareness.setLocalStateField("user", {
+			name: user.name,
+			color
+		});
+	}
+	/** This dashboard's own changes, which undo can take back. */
+	const tracked = { dashboard: "tracked" };
+	/** Changes undo leaves alone, e.g. filling the map. */
+	const untracked = { dashboard: "untracked" };
+	const undoManager = new Y.UndoManager([map], {
+		trackedOrigins: /* @__PURE__ */ new Set([tracked]),
+		captureTimeout: 500
+	});
+	/** Bumped when the undo stacks change, so `canUndo` and `canRedo` update. */
+	const stacks = shallowRef(0);
+	const bump = () => stacks.value++;
+	undoManager.on("stack-item-added", bump);
+	undoManager.on("stack-item-popped", bump);
+	undoManager.on("stack-cleared", bump);
+	let host;
+	/** What undo or redo is running, to name the change. */
+	let travelling = null;
+	let lastGroup;
+	/** Brings the dashboard in line with the map. */
+	function pull() {
+		host?.apply(readMap(map), travelling ?? "remote");
+	}
+	function run(action) {
+		if (!(action === "undo" ? undoManager.undoStack : undoManager.redoStack).length) return false;
+		travelling = action;
+		try {
+			undoManager[action]();
+		} finally {
+			travelling = null;
+		}
+		return true;
+	}
+	/** The others at each widget. */
+	const peersByWidget = shallowRef(/* @__PURE__ */ new Map());
+	function readPeers() {
+		if (!awareness) return;
+		const next = /* @__PURE__ */ new Map();
+		awareness.getStates().forEach((state, client) => {
+			if (client === awareness.clientID) return;
+			const who = state.user;
+			const presence = state.dashboard;
+			if (!who || !presence?.widget) return;
+			const peer = {
+				client,
+				name: who.name ?? "",
+				color: who.color ?? "currentColor",
+				action: presence.action
+			};
+			const list = next.get(presence.widget);
+			if (list) list.push(peer);
+			else next.set(presence.widget, [peer]);
+		});
+		peersByWidget.value = next;
+	}
+	return {
+		setup(dashboard) {
+			host = dashboard;
+			if (!map.size) ydoc.transact(() => fillMap(map, dashboard.document()), untracked);
+			pull();
+			let dirty = false;
+			const observe = (_events, transaction) => {
+				if (transaction.origin !== tracked && transaction.origin !== untracked) dirty = true;
+			};
+			const flush = () => {
+				if (!dirty) return;
+				dirty = false;
+				pull();
+			};
+			map.observeDeep(observe);
+			ydoc.on("afterTransaction", flush);
+			if (awareness) {
+				readPeers();
+				awareness.on("change", readPeers);
+			}
+			return () => {
+				map.unobserveDeep(observe);
+				ydoc.off("afterTransaction", flush);
+				if (awareness) awareness.off("change", readPeers);
+				host = void 0;
+			};
+		},
+		transaction(tr) {
+			const tracking = tr.meta.history !== false;
+			if (tracking && (!tr.meta.group || tr.meta.group !== lastGroup)) undoManager.stopCapturing();
+			if (tracking) lastGroup = tr.meta.group;
+			ydoc.transact(() => writeChanges(map, tr), tracking ? tracked : untracked);
+		},
+		sync: pull,
+		undo: () => run("undo"),
+		redo: () => run("redo"),
+		canUndo: () => (stacks.value, undoManager.undoStack.length > 0),
+		canRedo: () => (stacks.value, undoManager.redoStack.length > 0),
+		presence: awareness ? (presence) => awareness.setLocalStateField("dashboard", presence) : void 0,
+		peers: awareness ? (id) => peersByWidget.value.get(id) ?? NO_PEERS : void 0
+	};
+}
+export { collaboration, collaborationColors, fillMap, readMap };
+
+//# sourceMappingURL=index.js.map