@katlux/block-charts 0.1.0-beta.0 → 0.1.0-beta.2

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

@@ -1,301 +0,0 @@
-<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>