@katlux/block-charts 0.1.0-beta.0

package/src/runtime/components/KPieChart/KPieChart.vue

@@ -0,0 +1,307 @@
+<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")
+			g.k-chart-hits
+				// Hit detection now handled via angle calculation in onMouseMove
+			
+			// Dynamic Interaction Layer
+			g.k-chart-interaction(v-if="hoveredIndex !== -1 && hoveredSeg")
+				path.k-chart-hit-proxy(
+					:d="hoveredSeg.d"
+					fill="transparent"
+					style="cursor: pointer"
+					@click="emit('click-point', hoveredSeg.item, hoveredIndex)"
+				)
+				path(
+					:d="hoveredSeg.d"
+					fill="transparent"
+					stroke="#fff"
+					stroke-width="3"
+					pointer-events="none"
+				)
+		.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 { useChartCanvas } from '../../composables/useChartCanvas'
+import { useChartSvg } from '../../composables/useChartSvg'
+import { useChartData } from '../../composables/useChartData'
+import { useChartAnimation, easeOut } from '../../composables/useChartAnimation'
+import { useChartExport } from '../../composables/useChartExport'
+
+const props = withDefaults(defineProps<{
+	dataProvider?: any
+	labelField?: string
+	valueField?: string
+	donut?: boolean
+	animated?: boolean
+	colors?: string[]
+	backgroundColor?: string
+	showLegend?: boolean
+	title?: string
+}>(), {
+	labelField: 'label',
+	valueField: 'value',
+	donut: false,
+	animated: true,
+	colors: () => ['#6366f1', '#22d3ee', '#f59e0b', '#10b981', '#f43f5e', '#a855f7', '#14b8a6', '#fb923c'],
+	backgroundColor: '#ffffff',
+	showLegend: true,
+	title: ''
+})
+
+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 { progress, animate } = useChartAnimation()
+const { exportPng, exportSvg: exportSvgFile } = useChartExport()
+
+const isLoading = computed(() => {
+	return props.dataProvider?.loading?.value || (props.dataProvider as any)?.initialLoad?.value || false
+})
+
+interface ISegment { d: string; cx: number; cy: number; item: any; label: string; startAngle: number; endAngle: number }
+const hitSegments = ref<ISegment[]>([])
+
+const total = computed(() => items.value.reduce((s, r) => s + Number(r[props.valueField]), 0))
+
+const hoveredSeg = computed(() => {
+	if (hoveredIndex.value === -1) return null
+	return hitSegments.value[hoveredIndex.value]
+})
+
+const arcPath = (cx: number, cy: number, r: number, startAngle: number, endAngle: number): string => {
+	const x1 = cx + r * Math.cos(startAngle)
+	const y1 = cy + r * Math.sin(startAngle)
+	const x2 = cx + r * Math.cos(endAngle)
+	const y2 = cy + r * Math.sin(endAngle)
+	const large = endAngle - startAngle > Math.PI ? 1 : 0
+	if (props.donut) {
+		const ri = r * 0.5
+		const xi1 = cx + ri * Math.cos(endAngle)
+		const yi1 = cy + ri * Math.sin(endAngle)
+		const xi2 = cx + ri * Math.cos(startAngle)
+		const yi2 = cy + ri * Math.sin(startAngle)
+		return `M ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} L ${xi1} ${yi1} A ${ri} ${ri} 0 ${large} 0 ${xi2} ${yi2} Z`
+	}
+	return `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`
+}
+
+const draw = () => {
+	if (!ctx.value) return
+	clear(props.backgroundColor)
+	const c = ctx.value
+	const p = easeOut(progress.value)
+	const segs: ISegment[] = []
+
+	const cx = width.value / 2
+	const cy = props.showLegend ? (height.value - 50) / 2 : height.value / 2
+	const r = Math.min(width.value - 40, props.showLegend ? height.value - 100 : height.value - 40) / 2
+
+	let startAngle = -Math.PI / 2
+	const tot = total.value || 1
+
+	items.value.forEach((item, i) => {
+		const slice = (Number(item[props.valueField]) / tot) * Math.PI * 2 * p
+		const endAngle = startAngle + slice
+		const color = props.colors[i % props.colors.length]
+		const isHovered = hoveredIndex.value === i
+		const rr = isHovered ? r + 8 : r
+
+		c.save()
+		c.beginPath()
+		c.moveTo(cx, cy)
+		c.arc(cx, cy, rr, startAngle, endAngle)
+		c.closePath()
+		c.fillStyle = color
+		c.fill()
+		c.restore()
+
+		// Label
+		const midAngle = startAngle + slice / 2
+		const lr = r * 0.7
+		const lx = cx + lr * Math.cos(midAngle)
+		const ly = cy + lr * Math.sin(midAngle)
+		if (p > 0.5) {
+			c.save()
+			c.fillStyle = '#fff'
+			c.font = 'bold 11px system-ui, sans-serif'
+			c.textAlign = 'center'
+			c.textBaseline = 'middle'
+			const pct = ((Number(item[props.valueField]) / tot) * 100).toFixed(0) + '%'
+			c.fillText(pct, lx, ly)
+			c.restore()
+		}
+
+		segs.push({
+			d: arcPath(cx, cy, rr, startAngle, endAngle),
+			cx: cx + r * 0.75 * Math.cos(startAngle + slice / 2),
+			cy: cy + r * 0.75 * Math.sin(startAngle + slice / 2),
+			item, label: `${item[props.labelField]}: ${item[props.valueField]}`,
+			startAngle, endAngle
+		})
+		startAngle = endAngle
+	})
+	
+	if (props.donut) {
+		c.save()
+		c.beginPath()
+		c.arc(cx, cy, r * 0.5, 0, Math.PI * 2)
+		c.fillStyle = '#000'
+		c.globalCompositeOperation = 'destination-out'
+		c.fill()
+		c.globalCompositeOperation = 'source-over'
+		c.restore()
+	}
+
+	hitSegments.value = segs
+
+	if (props.showLegend) {
+		drawLegend(c)
+	}
+
+	if (props.title) {
+		c.save()
+		c.fillStyle = 'rgba(120,120,140,0.9)'
+		c.font = 'bold 16px system-ui, sans-serif'
+		c.textAlign = 'center'
+		c.fillText(props.title, width.value / 2, 30)
+		c.restore()
+	}
+}
+
+const drawLegend = (c: CanvasRenderingContext2D) => {
+	c.save()
+	c.font = '11px system-ui, sans-serif'
+	c.textAlign = 'left'
+	c.textBaseline = 'middle'
+	
+	const keys = items.value.map(it => String(it[props.labelField]))
+	let xOffset = 20
+	let yOffset = height.value - 25
+
+	keys.forEach((key, i) => {
+		const color = props.colors[i % props.colors.length]
+		c.fillStyle = color
+		c.fillRect(xOffset, yOffset - 4, 10, 8)
+		
+		c.fillStyle = 'rgba(150,150,170,0.9)'
+		c.fillText(key, xOffset + 15, yOffset)
+		
+		const textWidth = c.measureText(key).width
+		xOffset += textWidth + 35
+		if (xOffset > width.value - 50) {
+			xOffset = 20
+			yOffset -= 15
+		}
+	})
+	c.restore()
+}
+
+watch([items, hoveredIndex, progress, () => props.donut], draw, { deep: true })
+watch(items, () => { if (props.animated) animate() }, { deep: true })
+
+onMounted(async () => {
+	await nextTick()
+	if (containerRef.value && canvasRef.value) {
+		setupCanvas(canvasRef.value)
+		if (props.animated) animate(); else draw()
+	}
+})
+
+const onMouseMove = (e: MouseEvent) => {
+	const rect = containerRef.value?.getBoundingClientRect()
+	if (!rect) return
+	
+	const cx = width.value / 2
+	const cy = props.showLegend ? (height.value - 50) / 2 : height.value / 2
+	const r = Math.min(width.value - 40, props.showLegend ? height.value - 100 : height.value - 40) / 2
+
+	const mx = e.clientX - rect.left
+	const my = e.clientY - rect.top
+	
+	const dx = mx - cx
+	const dy = my - cy
+	const dist = Math.sqrt(dx * dx + dy * dy)
+	
+	// Check if within outer radius and (if donut) outside inner radius
+	const inRadius = dist <= r + 10 && (!props.donut || dist >= r * 0.5 - 5)
+	
+	if (inRadius) {
+		let angle = Math.atan2(dy, dx)
+		if (angle < -Math.PI / 2) angle += Math.PI * 2
+		
+		const idx = hitSegments.value.findIndex(seg => angle >= seg.startAngle && angle < seg.endAngle)
+		if (idx !== -1) {
+			const seg = hitSegments.value[idx]
+			setHovered(idx)
+			showTooltip(mx + 10, my - 10, seg.label, seg.item, idx)
+			emit('hover-point', seg.item, idx)
+			return
+		}
+	}
+	
+	setHovered(-1)
+	hideTooltip()
+}
+
+const onMouseLeave = () => {
+	setHovered(-1)
+	hideTooltip()
+}
+
+defineExpose({
+	exportPng: () => canvasRef.value && exportPng(canvasRef.value, 'pie-chart.png'),
+	exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, 'pie-chart.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;
+		}
+	}
+	.k-chart-svg {
+		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>

package/src/runtime/components/KScatterChart/KScatterChart.vue

@@ -0,0 +1,375 @@
+<template lang="pug">
+.k-chart-wrapper(
+	:class="{ 'k-chart--grabbing': isDragging, 'k-chart--pannable': canPan }"
+	:style="{ cursor: isDragging ? 'grabbing' : canPan ? 'grab' : 'default' }"
+	@wheel.prevent="onWheel"
+	@mousedown="onMouseDown"
+	@mousemove="onMouseMove"
+	@mouseup="onMouseUp"
+	@mouseleave="onMouseLeave"
+)
+	.k-chart-controls(v-if="zoomable")
+		KButton(size="small" @click="zoomIn" title="Zoom In") +
+		KButton(size="small" @click="zoomOut" title="Zoom Out") −
+		KButton(size="small" @click="resetZoom" title="Reset") ↺
+	.k-chart-inner(ref="containerRef")
+		KLoader(:loading="isLoading" overlay)
+		canvas(ref="canvasRef" v-show="!isLoading")
+		svg.k-chart-svg(v-show="!isLoading" ref="svgRef" :width="width" :height="height")
+			defs
+				clipPath(id="plot-clip")
+					rect(
+						:x="axes.plotLeft"
+						:y="axes.plotTop"
+						:width="axes.plotWidth.value"
+						:height="axes.plotHeight.value"
+					)
+			g.k-chart-hits
+				// No circles here! Distance-based hit testing now.
+			
+			// Dynamic Interaction Layer
+			g.k-chart-interaction(v-if="hoveredIndex !== -1 && !isLoading" clip-path="url(#plot-clip)")
+				circle.k-chart-hit-proxy(
+					:cx="hoveredPoint.x"
+					:cy="hoveredPoint.y"
+					:r="20"
+					fill="transparent"
+					style="cursor: pointer"
+					@click="emit('click-point', hoveredPoint.item, hoveredPoint.index)"
+				)
+				circle(
+					:cx="hoveredPoint.x"
+					:cy="hoveredPoint.y"
+					:r="hoveredPoint.r + 3"
+					fill="transparent"
+					:stroke="hoveredPoint.color"
+					stroke-width="2"
+					pointer-events="none"
+				)
+		.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 { useChartCanvas } from '../../composables/useChartCanvas'
+import { useChartSvg } from '../../composables/useChartSvg'
+import { useChartData } from '../../composables/useChartData'
+import { useChartAxes } from '../../composables/useChartAxes'
+import { useChartViewport } from '../../composables/useChartViewport'
+import { useChartAnimation, easeOut } from '../../composables/useChartAnimation'
+import { useChartExport } from '../../composables/useChartExport'
+import { useChartHitTest } from '../../composables/useChartHitTest'
+
+const props = withDefaults(defineProps<{
+	dataProvider?: any
+	xField?: string
+	yField?: string
+	seriesField?: string
+	sizeField?: string
+	labelField?: string
+	animated?: boolean
+	zoomable?: boolean
+	maxZoom?: number
+	colors?: string[]
+	backgroundColor?: string
+	showLegend?: boolean
+	xAxisTitle?: string
+	yAxisTitle?: string
+}>(), {
+	xField: 'x',
+	yField: 'y',
+	seriesField: 'series',
+	sizeField: 'size',
+	labelField: 'label',
+	animated: true,
+	zoomable: true,
+	maxZoom: 20,
+	colors: () => ['#6366f1', '#22d3ee', '#f59e0b', '#10b981', '#f43f5e', '#a855f7', '#14b8a6', '#fb923c'],
+	backgroundColor: '#ffffff',
+	showLegend: true,
+	xAxisTitle: '',
+	yAxisTitle: ''
+})
+
+const emit = defineEmits<{
+	'click-point': [item: any, index: number]
+	'hover-point': [item: any, index: number]
+	'zoom-change': [scale: number]
+	'pan-change': [offset: { x: number; y: 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 { progress, animate } = useChartAnimation()
+const { exportPng, exportSvg: exportSvgFile } = useChartExport()
+
+const isLoading = computed(() => {
+	return props.dataProvider?.loading?.value || (props.dataProvider as any)?.initialLoad?.value || false
+})
+
+const maxZoomRef = computed(() => props.maxZoom)
+const plotWidthRef = computed(() => Math.max(0, width.value - 75))
+const plotLeftRef = computed(() => 55)
+const viewport = useChartViewport({ maxZoom: maxZoomRef, plotWidth: plotWidthRef, plotLeft: plotLeftRef })
+const { findNearestEuclidean } = useChartHitTest()
+
+const {
+	scale, panOffset, isDragging, canPan,
+	zoomIn, zoomOut, resetZoom,
+	onWheel, onMouseDown, onMouseMove: onViewportMouseMove, onMouseUp, onMouseLeave: onViewportMouseLeave
+} = viewport
+
+const xFieldRef = computed(() => props.xField)
+const yFieldRef = computed(() => props.yField)
+const axes = useChartAxes({ items, xField: xFieldRef, yField: yFieldRef, width, height, scale, panOffset, padding: { top: 20, right: 20, bottom: 40, left: 55 } })
+
+// hitPoints removed to save memory and DOM nodes
+
+const maxSize = computed(() => Math.max(...items.value.map(r => Number(r[props.sizeField] ?? 1)), 1))
+
+// Group items by series
+const seriesMap = computed(() => {
+	const map = new Map<string, any[]>()
+	for (const item of items.value) {
+		const key = String(item[props.seriesField] ?? 'default')
+		if (!map.has(key)) map.set(key, [])
+		map.get(key)!.push(item)
+	}
+	return map
+})
+
+const hoveredPoint = computed(() => {
+	if (hoveredIndex.value === -1) return null
+	const item = items.value[hoveredIndex.value]
+	const sizeRaw = Number(item[props.sizeField] ?? 1)
+	const r = 4 + (sizeRaw / maxSize.value) * 16
+
+	// Find color for this item
+	const seriesKey = String(item[props.seriesField] ?? 'default')
+	const seriesKeys = Array.from(seriesMap.value.keys())
+	const seriesIdx = seriesKeys.indexOf(seriesKey)
+	const color = props.colors[seriesIdx % props.colors.length]
+
+	return {
+		x: axes.toX(Number(item[props.xField])),
+		y: axes.toY(Number(item[props.yField])),
+		r,
+		color,
+		item,
+		index: hoveredIndex.value
+	}
+})
+
+const draw = () => {
+	if (!ctx.value) return
+	clear(props.backgroundColor)
+	const c = ctx.value
+	const p = easeOut(progress.value)
+
+	// Grid & axes
+	c.save()
+	c.strokeStyle = 'rgba(100,100,120,0.1)'; c.lineWidth = 1
+	// Horizontal grid
+	for (let i = 0; i <= 6; i++) {
+		const y = axes.plotTop + (axes.plotHeight.value / 6) * i
+		c.beginPath(); c.moveTo(axes.plotLeft, y); c.lineTo(axes.plotLeft + axes.plotWidth.value, y); c.stroke()
+	}
+	// Vertical grid
+	for (let i = 0; i <= 6; i++) {
+		const x = axes.plotLeft + (axes.plotWidth.value / 6) * i
+		c.beginPath(); c.moveTo(x, axes.plotTop); c.lineTo(x, axes.plotTop + axes.plotHeight.value); c.stroke()
+	}
+
+	c.strokeStyle = 'rgba(150,150,170,0.5)'
+	c.beginPath(); c.moveTo(axes.plotLeft, axes.plotTop + axes.plotHeight.value); c.lineTo(axes.plotLeft + axes.plotWidth.value, axes.plotTop + axes.plotHeight.value); c.stroke()
+	c.beginPath(); c.moveTo(axes.plotLeft, axes.plotTop); c.lineTo(axes.plotLeft, axes.plotTop + axes.plotHeight.value); c.stroke()
+
+	c.fillStyle = 'rgba(150,150,170,0.8)'; c.font = '11px system-ui, sans-serif'
+	
+	// Y labels
+	c.textAlign = 'right'
+	for (let i = 0; i <= 5; i++) {
+		const val = axes.yMin.value + (axes.yMax.value - axes.yMin.value) * (i / 5)
+		c.fillText(val.toFixed(1), axes.plotLeft - 8, axes.toY(val) + 4)
+	}
+	
+	// X labels
+	c.textAlign = 'center'
+	for (let i = 0; i <= 5; i++) {
+		const val = axes.xMin.value + (axes.xMax.value - axes.xMin.value) * (i / 5)
+		c.fillText(val.toFixed(1), axes.toX(val), axes.plotTop + axes.plotHeight.value + 16)
+	}
+
+	// Titles
+	c.fillStyle = 'rgba(120,120,140,0.8)'
+	if (props.xAxisTitle) {
+		c.fillText(props.xAxisTitle, axes.plotLeft + axes.plotWidth.value / 2, axes.plotTop + axes.plotHeight.value + 34)
+	}
+	if (props.yAxisTitle) {
+		c.save()
+		c.translate(axes.plotLeft - 40, axes.plotTop + axes.plotHeight.value / 2)
+		c.rotate(-Math.PI / 2)
+		c.textAlign = 'center'
+		c.fillText(props.yAxisTitle, 0, 0)
+		c.restore()
+	}
+	c.restore()
+
+	c.save()
+	c.beginPath()
+	c.rect(axes.plotLeft, axes.plotTop, axes.plotWidth.value, axes.plotHeight.value)
+	c.clip()
+
+	let seriesIdx = 0
+	for (const [, seriesItems] of seriesMap.value) {
+		const color = props.colors[seriesIdx % props.colors.length]
+		
+		seriesItems.forEach((item) => {
+			const x = axes.toX(Number(item[props.xField]))
+			const y = axes.toY(Number(item[props.yField]))
+			const sizeRaw = Number(item[props.sizeField] ?? 1)
+			const r = 4 + (sizeRaw / maxSize.value) * 16
+			
+			// Global index if needed for hover, but findNearestEuclidean uses full items array
+			// We need to know if THIS specific item is the one hovered
+			const isHovered = items.value[hoveredIndex.value] === item
+			const alpha = p
+
+			c.save()
+			c.globalAlpha = alpha * (isHovered ? 1 : 0.75)
+			c.beginPath()
+			c.arc(x, y, isHovered ? r + 3 : r, 0, Math.PI * 2)
+			c.fillStyle = color
+			c.fill()
+			c.strokeStyle = '#fff'
+			c.lineWidth = 1.5
+			c.stroke()
+			c.restore()
+		})
+		seriesIdx++
+	}
+
+	c.restore()
+
+	if (props.showLegend) {
+		drawLegend(c)
+	}
+}
+
+const drawLegend = (c: CanvasRenderingContext2D) => {
+	c.save()
+	c.font = '11px system-ui, sans-serif'
+	c.textAlign = 'left'
+	c.textBaseline = 'middle'
+	
+	let xOffset = axes.plotLeft
+	const yPos = axes.plotTop + axes.plotHeight.value + 28
+
+	let seriesIdx = 0
+	for (const [key] of seriesMap.value) {
+		const color = props.colors[seriesIdx % props.colors.length]
+		
+		c.fillStyle = color
+		c.beginPath(); c.arc(xOffset + 5, yPos, 4, 0, Math.PI * 2); c.fill()
+		
+		c.fillStyle = 'rgba(150,150,170,0.9)'
+		const label = key === 'default' ? 'Series' : key
+		c.fillText(label, xOffset + 15, yPos)
+		
+		const metrics = c.measureText(label)
+		xOffset += metrics.width + 35
+		seriesIdx++
+	}
+	c.restore()
+}
+
+watch([items, scale, panOffset, hoveredIndex, progress], draw, { deep: true })
+watch(items, () => { if (props.animated) animate() }, { deep: true })
+watch(scale, v => emit('zoom-change', v))
+watch(panOffset, v => emit('pan-change', v), { deep: true })
+
+onMounted(async () => {
+	await nextTick()
+	if (containerRef.value && canvasRef.value) {
+		containerRef.value.style.position = 'relative'
+		setupCanvas(canvasRef.value)
+		if (props.animated) animate(); else draw()
+	}
+})
+
+const onMouseMove = (e: MouseEvent) => {
+	onViewportMouseMove(e)
+	if (isDragging.value) {
+		setHovered(-1)
+		hideTooltip()
+		return
+	}
+
+	const rect = containerRef.value?.getBoundingClientRect()
+	if (!rect) return
+	const mx = e.clientX - rect.left
+	const my = e.clientY - rect.top
+
+	const nearest = findNearestEuclidean(items.value, mx, my, axes, props.xField, props.yField, 20)
+	if (nearest) {
+		setHovered(nearest.index)
+		showTooltip(mx + 10, my - 10, `${nearest.item[props.xField]}: ${nearest.item[props.yField]}`, nearest.item, nearest.index)
+		emit('hover-point', nearest.item, nearest.index)
+	} else {
+		setHovered(-1)
+		hideTooltip()
+	}
+}
+
+const onMouseLeave = (e: MouseEvent) => {
+	onViewportMouseLeave(e)
+	setHovered(-1)
+	hideTooltip()
+}
+
+defineExpose({
+	zoomIn: viewport.zoomIn, zoomOut: viewport.zoomOut, resetZoom: viewport.resetZoom,
+	exportPng: () => canvasRef.value && exportPng(canvasRef.value, 'scatter-chart.png'),
+	exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, 'scatter-chart.svg')
+})
+</script>
+
+<style lang="scss" scoped>
+.k-chart-wrapper {
+	position: relative; user-select: none;
+	.k-chart-controls { position: absolute; top: 8px; right: 8px; z-index: 10; display: flex; gap: 4px; }
+	.k-chart-btn { display: 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;
+		}
+	}
+	.k-chart-svg {
+		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>