@katlux/block-charts 0.1.0-beta.0

package/src/runtime/components/KLineChart/KLineChart.vue

@@ -0,0 +1,493 @@
+<template lang="pug">
+.k-chart-wrapper(
+	ref="wrapperRef"
+	: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 Zoom") ↺
+	.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"
+					)
+			// Dynamic Interaction Layer: Repositions one set of circles to the nearest point
+			g.k-chart-interaction(v-if="hoveredIndex !== -1" clip-path="url(#plot-clip)")
+				circle.k-chart-hit-proxy(
+					v-for="(pt, i) in hoveredPoints"
+					:key="i"
+					:cx="pt.x"
+					:cy="pt.y"
+					:r="10"
+					fill="transparent"
+					style="cursor: pointer"
+					@click="emit('click-point', pt.item, pt.index)"
+				)
+				// Visible indicators
+				circle(
+					v-for="(pt, i) in hoveredPoints"
+					:key="'v' + i"
+					:cx="pt.x"
+					:cy="pt.y"
+					:r="5"
+					:fill="pt.color"
+					stroke="#fff"
+					stroke-width="2"
+					pointer-events="none"
+				)
+		// Tooltip
+		.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, onUnmounted, nextTick, type Ref } from 'vue'
+import { useChartCanvas } from '../../composables/useChartCanvas'
+import { useChartSvg } from '../../composables/useChartSvg'
+import { useChartData } from '../../composables/useChartData'
+import { useChartAxes, parseValue } from '../../composables/useChartAxes'
+import { useChartViewport } from '../../composables/useChartViewport'
+import { useChartAnimation, easeOut } from '../../composables/useChartAnimation'
+import { useChartExport } from '../../composables/useChartExport'
+import { useChartHitTest } from '../../composables/useChartHitTest'
+
+interface ILinePoint { x: number; y: number; item: any }
+
+const props = withDefaults(defineProps<{
+	dataProvider?: any
+	xField?: string
+	yField?: string
+	seriesField?: string
+	animated?: boolean
+	zoomable?: boolean
+	maxZoom?: number
+	colors?: string[]
+	backgroundColor?: string
+	showLegend?: boolean
+	xAxisTitle?: string
+	yAxisTitle?: string
+}>(), {
+	xField: 'x',
+	yField: 'y',
+	seriesField: 'series',
+	animated: true,
+	zoomable: true,
+	maxZoom: 10,
+	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 wrapperRef = ref<HTMLElement | null>(null)
+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, loading } = 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 { findNearestX } = 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)
+
+// 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 axes = useChartAxes({
+	items,
+	xField: xFieldRef,
+	yField: yFieldRef,
+	width,
+	height,
+	scale,
+	panOffset,
+	padding: { top: 20, right: 20, bottom: 40, left: 55 }
+})
+
+// hitPoints is no longer needed for SVG, but we'll keep the logic if needed for something else, 
+// or just remove it to save memory. I'll remove it.
+
+const draw = () => {
+	if (!ctx.value) return
+	clear(props.backgroundColor)
+	const c = ctx.value
+	const p = easeOut(progress.value)
+
+	drawGrid(c)
+	drawAxes(c)
+
+	// Clipping for plot area
+	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]
+		drawLine(c, seriesItems, color, p)
+		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'
+	
+	const keys = Array.from(seriesMap.value.keys())
+	let xOffset = axes.plotLeft
+	const yPos = axes.plotTop + axes.plotHeight.value + 28
+
+	keys.forEach((key, i) => {
+		const color = props.colors[i % props.colors.length]
+		
+		// Icon
+		c.fillStyle = color
+		c.beginPath()
+		c.arc(xOffset + 5, yPos, 4, 0, Math.PI * 2)
+		c.fill()
+		
+		// Text
+		c.fillStyle = 'rgba(150,150,170,0.9)'
+		const label = key === 'default' ? 'Series' : key
+		c.fillText(label, xOffset + 15, yPos)
+		
+		xOffset += c.measureText(label).width + 35
+	})
+	c.restore()
+}
+
+const drawGrid = (c: CanvasRenderingContext2D) => {
+	c.save()
+	c.strokeStyle = 'rgba(100,100,120,0.1)'
+	c.lineWidth = 1
+	
+	// Horizontal grid
+	const ySteps = 6
+	for (let i = 0; i <= ySteps; i++) {
+		const y = axes.plotTop + (axes.plotHeight.value / ySteps) * i
+		c.beginPath()
+		c.moveTo(axes.plotLeft, y)
+		c.lineTo(axes.plotLeft + axes.plotWidth.value, y)
+		c.stroke()
+	}
+
+	// Vertical grid
+	const xSteps = 6
+	for (let i = 0; i <= xSteps; i++) {
+		const x = axes.plotLeft + (axes.plotWidth.value / xSteps) * i
+		c.beginPath()
+		c.moveTo(x, axes.plotTop)
+		c.lineTo(x, axes.plotTop + axes.plotHeight.value)
+		c.stroke()
+	}
+	c.restore()
+}
+
+const drawAxes = (c: CanvasRenderingContext2D) => {
+	c.save()
+	c.strokeStyle = 'rgba(150,150,170,0.5)'
+	c.lineWidth = 1
+	c.fillStyle = 'rgba(150,150,170,0.8)'
+	c.font = '11px system-ui, sans-serif'
+
+	// Y axis labels
+	c.textAlign = 'right'
+	const ySteps = 5
+	for (let i = 0; i <= ySteps; i++) {
+		const val = axes.yMin.value + (axes.yMax.value - axes.yMin.value) * (i / ySteps)
+		const y = axes.toY(val)
+		c.fillText(val.toFixed(1), axes.plotLeft - 8, y + 4)
+	}
+
+	// X axis labels
+	c.textAlign = 'center'
+	const xSteps = 5
+	for (let i = 0; i <= xSteps; i++) {
+		const val = axes.xMin.value + (axes.xMax.value - axes.xMin.value) * (i / xSteps)
+		const x = axes.toX(val)
+		
+		let label = val.toFixed(1)
+		// If it's a large number (like a timestamp), format it briefly
+		if (val > 1000000000000) label = new Date(val).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+		
+		c.fillText(label, x, axes.plotTop + axes.plotHeight.value + 16)
+	}
+
+	// X axis line
+	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()
+	
+	// Y axis line
+	c.beginPath()
+	c.moveTo(axes.plotLeft, axes.plotTop)
+	c.lineTo(axes.plotLeft, axes.plotTop + axes.plotHeight.value)
+	c.stroke()
+	
+	// Axis Titles
+	c.fillStyle = 'rgba(120,120,140,0.8)'
+	if (props.xAxisTitle) {
+		c.textAlign = 'center'
+		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()
+}
+
+const drawLine = (c: CanvasRenderingContext2D, data: any[], color: string, progress: number) => {
+	if (!data.length) return
+	const sorted = [...data].sort((a, b) => parseValue(a[props.xField]) - parseValue(b[props.xField]))
+	const totalPts = sorted.length
+	const drawCount = Math.max(1, Math.floor(totalPts * progress))
+
+	c.save()
+	c.strokeStyle = color
+	c.lineWidth = 2.5
+	c.lineJoin = 'round'
+	c.lineCap = 'round'
+	c.beginPath()
+	sorted.slice(0, drawCount).forEach((item, i) => {
+		const x = axes.toX(parseValue(item[props.xField]))
+		const y = axes.toY(parseValue(item[props.yField]))
+		if (i === 0) c.moveTo(x, y)
+		else c.lineTo(x, y)
+	})
+	c.stroke()
+
+	// Draw dots
+	for (let i = 0; i < drawCount; i++) {
+		const item = sorted[i]
+		const x = axes.toX(parseValue(item[props.xField]))
+		const y = axes.toY(parseValue(item[props.yField]))
+		const isHovered = hoveredIndex.value === items.value.indexOf(item)
+		c.beginPath()
+		c.arc(x, y, isHovered ? 5 : 3, 0, Math.PI * 2)
+		c.fillStyle = isHovered ? '#fff' : color
+		c.strokeStyle = color
+		c.lineWidth = 2
+		c.fill()
+		c.stroke()
+	}
+	c.restore()
+}
+
+// React to data, pan, scale, hover
+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) {
+		setupCanvas(canvasRef.value)
+		if (props.animated) animate()
+		else draw()
+	}
+})
+
+// Points for all series at the current hovered X
+const hoveredPoints = computed(() => {
+	if (hoveredIndex.value === -1) return []
+	
+	const item = items.value[hoveredIndex.value]
+	const xVal = parseValue(item[props.xField])
+	const xPx = axes.toX(xVal)
+	
+	const pts: any[] = []
+	let seriesIdx = 0
+	for (const [key, seriesItems] of seriesMap.value) {
+		const seriesItem = seriesItems.find(it => parseValue(it[props.xField]) === xVal)
+		if (seriesItem) {
+			pts.push({
+				x: xPx,
+				y: axes.toY(parseValue(seriesItem[props.yField])),
+				color: props.colors[seriesIdx % props.colors.length],
+				item: seriesItem,
+				index: items.value.indexOf(seriesItem)
+			})
+		}
+		seriesIdx++
+	}
+	return pts
+})
+
+const onMouseMove = (e: MouseEvent) => {
+	onViewportMouseMove(e)
+	
+	if (isDragging.value) {
+		setHovered(-1)
+		hideTooltip()
+		return
+	}
+
+	const rect = wrapperRef.value?.getBoundingClientRect()
+	if (!rect) return
+
+	const mouseX = e.clientX - rect.left
+	const mouseY = e.clientY - rect.top
+	const nearest = findNearestX(items.value, mouseX, props.xField, axes)
+	
+	if (nearest) {
+		// Position tooltip near mouse cursor
+		setHovered(nearest.index)
+		showTooltip(mouseX + 10, mouseY - 20, `${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()
+}
+
+// Exposed methods
+defineExpose({
+	zoomIn: viewport.zoomIn,
+	zoomOut: viewport.zoomOut,
+	resetZoom: viewport.resetZoom,
+	exportPng: () => canvasRef.value && exportPng(canvasRef.value, 'line-chart.png'),
+	exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, 'line-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-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>