@katlux/block-charts 0.1.0-beta.0

package/src/runtime/components/KHeatMap/KHeatMap.vue

@@ -0,0 +1,301 @@
+<template lang="pug">
+.k-chart-wrapper
+	.k-chart-inner(
+		ref="containerRef"
+		@mousemove="onMouseMove"
+		@mouseleave="onMouseLeave"
+	)
+		KLoader(:loading="isLoading" overlay)
+		canvas(ref="canvasRef" v-show="!isLoading")
+		svg.k-chart-svg(
+			v-show="!isLoading"
+			ref="svgRef"
+			:width="width"
+			:height="height"
+		)
+			// Dynamic Interaction Layer
+			g.k-chart-interaction(v-if="hoveredIndex !== -1 && hoveredCell")
+				rect.k-chart-hit-proxy(
+					:x="hoveredCell.x"
+					:y="hoveredCell.y"
+					:width="hoveredCell.w"
+					:height="hoveredCell.h"
+					fill="transparent"
+					style="cursor: pointer"
+					@click="emit('click-point', hoveredCell.item, hoveredIndex)"
+				)
+				rect(
+					:x="hoveredCell.x - 1"
+					:y="hoveredCell.y - 1"
+					:width="hoveredCell.w + 2"
+					:height="hoveredCell.h + 2"
+					fill="transparent"
+					stroke="#fff"
+					stroke-width="1.5"
+					rx="2"
+					pointer-events="none"
+				)
+			
+			// Labels remain in SVG for sharpness and easy styling
+		.k-chart-tooltip(v-if="tooltipState.visible && !isLoading" :style="{ left: tooltipState.x + 'px', top: tooltipState.y + 'px' }")
+			slot(name="tooltip" :item="tooltipState.item" :index="tooltipState.index")
+				span {{ tooltipState.content }}
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, computed, onMounted, nextTick } from 'vue'
+import { useChartSvg } from '../../composables/useChartSvg'
+import { useChartData } from '../../composables/useChartData'
+import { useChartCanvas } from '../../composables/useChartCanvas'
+import { useChartExport } from '../../composables/useChartExport'
+
+const props = withDefaults(defineProps<{
+	dataProvider?: any
+	rowField?: string
+	columnField?: string
+	valueField?: string
+	colorLow?: string
+	colorHigh?: string
+	colors?: string[]
+	backgroundColor?: string
+	showLegend?: boolean
+	xAxisTitle?: string
+	yAxisTitle?: string
+}>(), {
+	rowField: 'row',
+	columnField: 'column',
+	valueField: 'value',
+	colorLow: '#1e1e2e',
+	colorHigh: '#6366f1',
+	colors: () => ['#1e1e2e', '#313244', '#45475a', '#585b70', '#cba6f7', '#f5c2e7', '#eba0ac', '#f38ba8'],
+	backgroundColor: '#ffffff',
+	showLegend: true,
+	xAxisTitle: '',
+	yAxisTitle: ''
+})
+
+const emit = defineEmits<{
+	'click-point': [item: any, index: number]
+	'hover-point': [item: any, index: number]
+}>()
+
+const containerRef = ref<HTMLElement | null>(null)
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+const svgRef = ref<SVGSVGElement | null>(null)
+
+const { ctx, width, height, clear, setupCanvas } = useChartCanvas()
+
+const { hoveredIndex, tooltipState, showTooltip, hideTooltip, setHovered } = useChartSvg()
+const dataRef = computed(() => props.dataProvider)
+const { items } = useChartData(dataRef)
+const { exportPng, exportSvg: exportSvgFile } = useChartExport()
+
+const isLoading = computed(() => {
+	return props.dataProvider?.loading?.value || (props.dataProvider as any)?.initialLoad?.value || false
+})
+
+const padLeft = 80
+const padTop = 30
+const padRight = 20
+const padBottom = 20
+
+const rows = computed(() => [...new Set(items.value.map(r => String(r[props.rowField])))])
+const cols = computed(() => [...new Set(items.value.map(r => String(r[props.columnField])))])
+
+const cellW = computed(() => Math.max(8, (width.value - padLeft - padRight) / (cols.value.length || 1)))
+const cellH = computed(() => Math.max(8, (height.value - padTop - padBottom) / (rows.value.length || 1)))
+
+const maxVal = computed(() => Math.max(...items.value.map(r => Number(r[props.valueField])), 1))
+
+const hoveredCell = computed(() => {
+	if (hoveredIndex.value === -1) return null
+	return renderedCells.value[hoveredIndex.value]
+})
+
+const minVal = computed(() => Math.min(...items.value.map(r => Number(r[props.valueField])), 0))
+
+const lerp = (t: number) => {
+	const low = parseInt((props.colorLow || '#1e1e2e').replace('#', ''), 16)
+	const high = parseInt((props.colorHigh || '#6366f1').replace('#', ''), 16)
+	const lr = (low >> 16) & 0xff; const lg = (low >> 8) & 0xff; const lb = low & 0xff
+	const hr = (high >> 16) & 0xff; const hg = (high >> 8) & 0xff; const hb = high & 0xff
+	const r = Math.round(lr + (hr - lr) * t)
+	const g = Math.round(lg + (hg - lg) * t)
+	const b = Math.round(lb + (hb - lb) * t)
+	return `rgb(${r},${g},${b})`
+}
+
+interface ICell { x: number; y: number; w: number; h: number; color: string; item: any; label: string }
+
+const renderedCells = computed<ICell[]>(() => {
+	const range = maxVal.value - minVal.value || 1
+	return items.value.map(item => {
+		const ri = rows.value.indexOf(String(item[props.rowField]))
+		const ci = cols.value.indexOf(String(item[props.columnField]))
+		const t = (Number(item[props.valueField]) - minVal.value) / range
+		return {
+			x: padLeft + ci * cellW.value,
+			y: padTop + ri * cellH.value,
+			w: cellW.value - 1,
+			h: cellH.value - 1,
+			color: lerp(t),
+			item,
+			label: `${item[props.rowField]} × ${item[props.columnField]}: ${item[props.valueField]}`
+		}
+	})
+})
+
+const draw = () => {
+	if (!ctx.value) return
+	clear(props.backgroundColor)
+	const c = ctx.value
+
+	drawAxes(c)
+
+	renderedCells.value.forEach((cell, i) => {
+		const isHovered = hoveredIndex.value === i
+		c.fillStyle = cell.color
+		c.beginPath()
+		c.rect(cell.x, cell.y, cell.w, cell.h)
+		c.fill()
+		
+		if (isHovered) {
+			c.strokeStyle = '#fff'
+			c.lineWidth = 2
+			c.strokeRect(cell.x + 1, cell.y + 1, cell.w - 2, cell.h - 2)
+		}
+	})
+
+	if (props.showLegend) drawLegend(c)
+}
+
+const drawAxes = (c: CanvasRenderingContext2D) => {
+	c.save()
+	c.fillStyle = 'rgba(120,120,140,0.8)'
+	c.font = '11px system-ui, sans-serif'
+	
+	const plotW = width.value - padLeft - padRight
+	const plotH = height.value - padTop - padBottom
+
+	// Row labels (Y)
+	c.textAlign = 'right'
+	rows.value.forEach((label, i) => {
+		const y = padTop + i * cellH.value + cellH.value / 2 + 4
+		c.fillText(label, padLeft - 8, y)
+	})
+
+	// Col labels (X)
+	c.textAlign = 'center'
+	cols.value.forEach((label, i) => {
+		const x = padLeft + i * cellW.value + cellW.value / 2
+		c.fillText(label, x, padTop + plotH + 16)
+	})
+
+	// Titles
+	if (props.xAxisTitle) {
+		c.fillText(props.xAxisTitle, padLeft + plotW / 2, padTop + plotH + 34)
+	}
+	if (props.yAxisTitle) {
+		c.save()
+		c.translate(padLeft - 55, padTop + plotH / 2)
+		c.rotate(-Math.PI / 2)
+		c.textAlign = 'center'
+		c.fillText(props.yAxisTitle, 0, 0)
+		c.restore()
+	}
+	c.restore()
+}
+
+const drawLegend = (c: CanvasRenderingContext2D) => {
+	c.save()
+	const gradW = 120
+	const gradH = 10
+	const x = width.value - padRight - gradW
+	const y = height.value - padBottom + 10
+	
+	const grad = c.createLinearGradient(x, 0, x + gradW, 0)
+	grad.addColorStop(0, props.colorLow || '#1e1e2e')
+	grad.addColorStop(1, props.colorHigh || '#6366f1')
+	
+	c.fillStyle = grad
+	c.fillRect(x, y, gradW, gradH)
+	
+	c.fillStyle = 'rgba(150,150,170,0.9)'
+	c.font = '10px system-ui, sans-serif'
+	c.textAlign = 'left'
+	c.fillText(minVal.value.toString(), x, y + gradH + 10)
+	c.textAlign = 'right'
+	c.fillText(maxVal.value.toString(), x + gradW, y + gradH + 10)
+	c.restore()
+}
+
+watch([renderedCells, hoveredIndex, width, height], draw)
+
+onMounted(async () => {
+	await nextTick()
+	if (containerRef.value && canvasRef.value) {
+		setupCanvas(canvasRef.value)
+		draw()
+	}
+})
+
+const onMouseMove = (e: MouseEvent) => {
+	const rect = containerRef.value?.getBoundingClientRect()
+	if (!rect) return
+	const mx = e.clientX - rect.left
+	const my = e.clientY - rect.top
+
+	const idx = renderedCells.value.findIndex(c => 
+		mx >= c.x && mx <= c.x + c.w && 
+		my >= c.y && my <= c.y + c.h
+	)
+
+	if (idx !== -1) {
+		const cell = renderedCells.value[idx]
+		setHovered(idx)
+		showTooltip(mx + 10, my - 10, cell.label, cell.item, idx)
+		emit('hover-point', cell.item, idx)
+	} else {
+		setHovered(-1)
+		hideTooltip()
+	}
+}
+
+const onMouseLeave = () => {
+	setHovered(-1)
+	hideTooltip()
+}
+
+defineExpose({
+	exportPng: () => canvasRef.value && exportPng(canvasRef.value, 'heatmap.png'),
+	exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, 'heatmap.svg')
+})
+</script>
+
+<style lang="scss" scoped>
+.k-chart-wrapper {
+	position: relative; user-select: none;
+	.k-chart-inner {
+		width: 100%;
+		height: 400px;
+		position: relative;
+		canvas, .k-chart-svg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			display: block;
+		}
+		.k-chart-svg {
+			overflow: visible;
+			pointer-events: none;
+			.k-chart-hit-proxy {
+				pointer-events: all;
+				cursor: pointer;
+			}
+		}
+	}
+	.k-chart-tooltip { position: absolute; background: var(--bg-color-elevated, #1e1e2e); color: var(--text-color-primary, #cdd6f4); border: 1px solid var(--border-color-medium, #45475a); border-radius: 8px; padding: 6px 10px; font-size: 12px; pointer-events: none; z-index: 20; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
+}
+</style>