vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/chart/Heatmap.mjs

@@ -0,0 +1,319 @@
+import { toFiniteNumber } from "../utils/validate.mjs";
+import { useTrackedData } from "../hooks/useTrackedData.mjs";
+import { seriesColor } from "../utils/theme.mjs";
+import { Layer } from "../container/Layer.mjs";
+import { getValueByDataKey } from "../utils/chart.mjs";
+import { cellGridEmits, cellGridListeners, chartEmits, chartListeners } from "../events/componentEvents.mjs";
+import { chartSizeProps } from "../hooks/useResponsiveSize.mjs";
+import { cellGridSharedProps, useValueText, valueFormatProps } from "./cellGridProps.mjs";
+import { MovingLabels } from "../animation/MovingLabels.mjs";
+import { standaloneChartOptions } from "./shell.mjs";
+import { ChartShell, useChartShell } from "./ChartShell.mjs";
+import { CellGridLayer } from "./CellGridLayer.mjs";
+import { cellColorScale } from "./cellGridUtils.mjs";
+import { computed, createVNode, defineComponent, mergeProps, reactive } from "vue";
+//#region src/chart/Heatmap.tsx
+var LABEL_GAP = 6;
+var BOTTOM_BAND = 18;
+/** Row height used when neither `height` nor `aspect` is given. */
+var DEFAULT_ROW = 28;
+/** Rough width of one label character at 10 px, to size the label column without measuring. */
+var CHAR_WIDTH = 6;
+var HeatmapVueProps = {
+	...cellGridSharedProps,
+	data: {
+		type: Array,
+		required: true
+	},
+	/** Field for the column. */
+	xKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: "x"
+	},
+	/** Field for the row. */
+	yKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: "y"
+	},
+	/** Field with the number to color by. Rows with the same x and y are summed. */
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: "value"
+	},
+	/** Column order. Defaults to the order of first appearance in `data`. */
+	xDomain: {
+		type: Array,
+		default: void 0
+	},
+	/** Row order, top to bottom. Defaults to the order of first appearance in `data`. */
+	yDomain: {
+		type: Array,
+		default: void 0
+	},
+	/** Full-intensity color; lower values mix it with `emptyColor`. */
+	color: {
+		type: String,
+		default: seriesColor(0)
+	},
+	emptyColor: {
+		type: String,
+		default: "var(--v-charts-muted, #eef2f7)"
+	},
+	/** Steps above empty; `0` mixes continuously. */
+	levels: {
+		type: Number,
+		default: 0
+	},
+	/** Explicit fill per level, from empty to full; overrides `color`, `emptyColor` and `levels`. */
+	colors: {
+		type: Array,
+		default: void 0
+	},
+	/** Value that reaches full color. Defaults to the largest value. */
+	max: {
+		type: Number,
+		default: void 0
+	},
+	/** Draw x and y pairs without data as empty cells; `false` leaves holes (cohort triangles). */
+	fillMissing: {
+		type: Boolean,
+		default: true
+	},
+	/** Draw each value on its cell when it fits. */
+	showValues: {
+		type: Boolean,
+		default: false
+	},
+	...valueFormatProps,
+	xTickFormatter: {
+		type: Function,
+		default: void 0
+	},
+	yTickFormatter: {
+		type: Function,
+		default: void 0
+	},
+	xLabels: {
+		type: Boolean,
+		default: true
+	},
+	yLabels: {
+		type: Boolean,
+		default: true
+	},
+	gap: {
+		type: Number,
+		default: 2
+	},
+	desc: String,
+	title: {
+		type: String,
+		default: "Heatmap"
+	},
+	/** Internal: the domain object a derived chart exposes per cell, e.g. CohortChart's `CohortCell`. */
+	cellPayload: {
+		type: Function,
+		default: void 0
+	}
+};
+var _Heatmap = /* @__PURE__ */ defineComponent({
+	name: "Heatmap",
+	props: {
+		...HeatmapVueProps,
+		...chartSizeProps
+	},
+	inheritAttrs: false,
+	emits: {
+		...chartEmits,
+		...cellGridEmits
+	},
+	slots: Object,
+	setup(props, { emit, slots, attrs }) {
+		const valueText = useValueText(props);
+		const rows = useTrackedData(() => props.data);
+		const matrix = computed(() => {
+			const xs = [];
+			const ys = [];
+			const seenX = /* @__PURE__ */ new Set();
+			const seenY = /* @__PURE__ */ new Set();
+			const cells = /* @__PURE__ */ new Map();
+			for (const row of rows.value ?? []) {
+				const x = getValueByDataKey(row, props.xKey);
+				const y = getValueByDataKey(row, props.yKey);
+				if (x == null || y == null) continue;
+				if (!seenX.has(x)) {
+					seenX.add(x);
+					xs.push(x);
+				}
+				if (!seenY.has(y)) {
+					seenY.add(y);
+					ys.push(y);
+				}
+				const key = cellKey(x, y);
+				const cell = cells.get(key) ?? {
+					x,
+					y,
+					value: null,
+					rows: []
+				};
+				const value = toFiniteNumber(getValueByDataKey(row, props.dataKey));
+				if (value !== void 0) cell.value = (cell.value ?? 0) + value;
+				cell.rows.push(row);
+				cells.set(key, cell);
+			}
+			return {
+				xs: props.xDomain ?? xs,
+				ys: props.yDomain ?? ys,
+				cells
+			};
+		});
+		const xText = (x) => props.xTickFormatter ? props.xTickFormatter(x) : String(x);
+		const yText = (y) => props.yTickFormatter ? props.yTickFormatter(y) : String(y);
+		const left = computed(() => props.yLabels && matrix.value.ys.length ? Math.min(160, Math.max(...matrix.value.ys.map((y) => yText(y).length)) * CHAR_WIDTH + 12) : 0);
+		const bottom = computed(() => props.xLabels ? BOTTOM_BAND : 0);
+		const size = useChartShell(reactive({
+			width: computed(() => props.width),
+			height: computed(() => props.height ?? (props.aspect ? void 0 : Math.max(1, matrix.value.ys.length) * DEFAULT_ROW + bottom.value)),
+			aspect: computed(() => props.aspect),
+			initialDimension: computed(() => props.initialDimension)
+		}), standaloneChartOptions("Heatmap"));
+		const layout = computed(() => {
+			const { xs, ys, cells: byKey } = matrix.value;
+			const width = size.effectiveWidth.value;
+			const height = size.effectiveHeight.value;
+			if (xs.length === 0 || ys.length === 0 || !(width > 0) || !(height > 0)) return {
+				cells: [],
+				xLabels: [],
+				yLabels: [],
+				gap: 0
+			};
+			const stepX = Math.max(0, (width - left.value) / xs.length);
+			const stepY = Math.max(0, (height - bottom.value) / ys.length);
+			const gap = Math.min(props.gap, stepX / 3, stepY / 3);
+			let max = props.max;
+			if (max === void 0) {
+				max = 0;
+				for (const cell of byKey.values()) if ((cell.value ?? 0) > max) max = cell.value;
+			}
+			const scale = cellColorScale({
+				color: props.color,
+				empty: props.emptyColor,
+				levels: props.levels,
+				colors: props.colors,
+				max
+			});
+			const cells = [];
+			ys.forEach((y, row) => {
+				xs.forEach((x, column) => {
+					const cell = byKey.get(cellKey(x, y));
+					if (!cell && !props.fillMissing) return;
+					const data = cell ?? {
+						x,
+						y,
+						value: null,
+						rows: []
+					};
+					const fill = scale.fill(data.value);
+					const text = data.value === null ? void 0 : valueText(data.value, data);
+					cells.push({
+						key: cellKey(x, y),
+						x: left.value + column * stepX,
+						y: row * stepY,
+						width: Math.max(0, stepX - gap),
+						height: Math.max(0, stepY - gap),
+						fill,
+						row,
+						column,
+						label: `${yText(y)}, ${xText(x)}`,
+						value: data.value,
+						valueText: text,
+						text: props.showValues ? text : void 0,
+						payload: props.cellPayload ? props.cellPayload(data) : data
+					});
+				});
+			});
+			const widest = Math.max(...xs.map((x) => xText(x).length)) * CHAR_WIDTH + LABEL_GAP;
+			const every = Math.max(1, Math.ceil(widest / Math.max(stepX, 1)));
+			return {
+				cells,
+				xLabels: props.xLabels ? xs.flatMap((x, column) => column % every === 0 ? [{
+					key: `${typeof x}:${x}`,
+					x: left.value + column * stepX + (stepX - gap) / 2,
+					y: height - 4,
+					text: xText(x)
+				}] : []) : [],
+				yLabels: props.yLabels ? ys.map((y, row) => ({
+					key: `${typeof y}:${y}`,
+					x: left.value - LABEL_GAP,
+					y: row * stepY + (stepY - gap) / 2,
+					text: yText(y)
+				})) : [],
+				gap
+			};
+		});
+		return () => createVNode(ChartShell, mergeProps(attrs, chartListeners(emit), {
+			"size": size,
+			"title": props.title,
+			"desc": props.desc,
+			"overflow": "visible"
+		}), {
+			svg: () => createVNode(Layer, { "class": "v-charts-heatmap" }, { default: () => [
+				createVNode(MovingLabels, {
+					"class": "v-charts-heatmap-y-labels",
+					"labels": layout.value.yLabels,
+					"isAnimationActive": props.isAnimationActive,
+					"transition": props.transition,
+					"textAnchor": "end",
+					"centered": true
+				}, null),
+				createVNode(MovingLabels, {
+					"class": "v-charts-heatmap-x-labels",
+					"labels": layout.value.xLabels,
+					"isAnimationActive": props.isAnimationActive,
+					"transition": props.transition,
+					"textAnchor": "middle"
+				}, null),
+				createVNode(CellGridLayer, mergeProps({
+					"cells": layout.value.cells,
+					"gap": layout.value.gap,
+					"activeIndex": props.activeIndex,
+					"radius": props.radius,
+					"activeStyle": "ring",
+					"grow": "center",
+					"title": props.title,
+					"isAnimationActive": props.isAnimationActive,
+					"transition": props.transition
+				}, cellGridListeners(emit)), { cell: slots.cell })
+			] }),
+			default: slots.default
+		});
+	}
+});
+function cellKey(x, y) {
+	return `${typeof x}:${x}\u0001${typeof y}:${y}`;
+}
+/**
+* Matrix heatmap: rows and columns from two fields, color from a third, e.g. visits by
+* weekday and hour.
+*
+* ```vue
+* <Heatmap :data="visits" x-key="hour" y-key="day" data-key="count"><Tooltip /></Heatmap>
+* ```
+*/
+/** The untyped component, for charts derived from a heatmap that expose their own cell payload. */
+var HeatmapView = _Heatmap;
+var Heatmap = _Heatmap;
+//#endregion
+export { Heatmap, HeatmapView };