@katlux/block-charts 0.1.0-beta.0

package/src/runtime/components/KBarChart/KBarChart.vue

@@ -0,0 +1,427 @@
+<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="plotLeft"
+						:y="plotTop"
+						:width="plotWidth.value"
+						:height="plotHeight.value"
+					)
+			g.k-chart-hits
+				// Hit detection is now handled by calculation in onMouseMove
+			
+			// Dynamic Interaction Layer
+			g.k-chart-interaction(v-if="hoveredIndex !== -1 && hoveredBar" clip-path="url(#plot-clip)")
+				rect.k-chart-hit-proxy(
+					:x="hoveredBar.x"
+					:y="hoveredBar.y"
+					:width="hoveredBar.w"
+					:height="hoveredBar.h"
+					fill="transparent"
+					style="cursor: pointer"
+					@click="emit('click-point', hoveredBar.item, hoveredIndex)"
+				)
+				rect(
+					:x="hoveredBar.x - 2"
+					:y="hoveredBar.y - 2"
+					:width="hoveredBar.w + 4"
+					:height="hoveredBar.h + 4"
+					fill="transparent"
+					stroke="#fff"
+					stroke-width="2"
+					rx="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 { useChartViewport } from '../../composables/useChartViewport'
+import { useChartAnimation, easeOut } from '../../composables/useChartAnimation'
+import { useChartExport } from '../../composables/useChartExport'
+
+const props = withDefaults(defineProps<{
+	dataProvider?: any
+	categoryField?: string
+	valueField?: string
+	groupField?: string
+	orientation?: 'vertical' | 'horizontal'
+	mode?: 'simple' | 'clustered' | 'stacked'
+	animated?: boolean
+	zoomable?: boolean
+	maxZoom?: number
+	colors?: string[]
+	backgroundColor?: string
+	showLegend?: boolean
+	xAxisTitle?: string
+	yAxisTitle?: string
+}>(), {
+	categoryField: 'category',
+	valueField: 'value',
+	groupField: 'group',
+	orientation: 'vertical',
+	mode: 'clustered',
+	animated: true,
+	zoomable: true,
+	maxZoom: 8,
+	colors: () => ['#6366f1', '#22d3ee', '#f59e0b', '#10b981', '#f43f5e', '#a855f7'],
+	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 {
+	scale, panOffset, isDragging, canPan,
+	zoomIn, zoomOut, resetZoom,
+	onWheel, onMouseDown, onMouseMove: onViewportMouseMove, onMouseUp, onMouseLeave: onViewportMouseLeave
+} = viewport
+
+const PAD = { top: 20, right: 20, bottom: 50, left: 55 }
+
+const plotLeft = PAD.left
+const plotTop = PAD.top
+const plotWidth = computed(() => Math.max(0, width.value - PAD.left - PAD.right))
+const plotHeight = computed(() => Math.max(0, height.value - PAD.top - PAD.bottom))
+
+// Gather unique categories and groups
+const categories = computed(() => [...new Set(items.value.map(r => String(r[props.categoryField])))])
+const groups = computed(() => [...new Set(items.value.map(r => String(r[props.groupField] ?? 'default')))])
+
+const maxValue = computed(() => {
+	if (props.mode === 'stacked') {
+		const sums = categories.value.map(cat =>
+			items.value.filter(r => String(r[props.categoryField]) === cat)
+				.reduce((acc, r) => acc + Math.max(0, Number(r[props.valueField])), 0)
+		)
+		return Math.max(...sums, 10)
+	}
+	const vals = items.value.map(r => Number(r[props.valueField]))
+	return vals.length ? Math.max(...vals, 10) : 10
+})
+
+// Apply zoom/pan to visible categories
+const visibleCatCount = computed(() => Math.max(1, Math.ceil(categories.value.length / scale.value)))
+const panCatOffset = computed(() => {
+	const maxPan = categories.value.length - visibleCatCount.value
+	const ratio = panOffset.value.x / (plotWidth.value || 1)
+	return Math.round(Math.min(Math.max(ratio * categories.value.length, 0), maxPan))
+})
+const visibleCategories = computed(() =>
+	categories.value.slice(panCatOffset.value, panCatOffset.value + visibleCatCount.value)
+)
+
+interface IBarRect { x: number; y: number; w: number; h: number; item: any; label: string }
+const hitBars = ref<IBarRect[]>([])
+
+const hoveredBar = computed(() => {
+	if (hoveredIndex.value === -1) return null
+	return hitBars.value[hoveredIndex.value]
+})
+
+const draw = () => {
+	if (!ctx.value) return
+	clear(props.backgroundColor)
+	const c = ctx.value
+	const p = easeOut(progress.value)
+	const bars: IBarRect[] = []
+
+	const catCount = visibleCategories.value.length
+	const gCount = groups.value.length || 1
+	const catWidth = plotWidth.value / (catCount || 1)
+	
+	let barWidth = catWidth * 0.7
+	if (props.mode === 'clustered' && gCount > 1) {
+		barWidth = (catWidth * 0.8) / gCount
+	}
+
+	// Grid & Y labels
+	c.save()
+	c.strokeStyle = 'rgba(100,100,120,0.1)'
+	c.lineWidth = 1
+	c.fillStyle = 'rgba(150,150,170,0.8)'
+	c.font = '11px system-ui, sans-serif'
+	c.textAlign = 'right'
+	for (let i = 0; i <= 5; i++) {
+		const val = (maxValue.value / 5) * i
+		const y = plotTop + plotHeight.value - (val / maxValue.value) * plotHeight.value
+		c.beginPath(); c.moveTo(plotLeft, y); c.lineTo(plotLeft + plotWidth.value, y); c.stroke()
+		c.fillText(val.toFixed(0), plotLeft - 8, y + 4)
+	}
+	
+	// Vertical grid (optional for bar charts, but let's add thin lines between categories)
+	c.strokeStyle = 'rgba(100,100,120,0.05)'
+	for (let i = 0; i <= catCount; i++) {
+		const x = plotLeft + i * catWidth
+		c.beginPath(); c.moveTo(x, plotTop); c.lineTo(x, plotTop + plotHeight.value); c.stroke()
+	}
+
+	// Lines
+	c.strokeStyle = 'rgba(150,150,170,0.5)'
+	c.beginPath(); c.moveTo(plotLeft, plotTop + plotHeight.value); c.lineTo(plotLeft + plotWidth.value, plotTop + plotHeight.value); c.stroke()
+	c.beginPath(); c.moveTo(plotLeft, plotTop); c.lineTo(plotLeft, plotTop + plotHeight.value); c.stroke()
+	c.restore()
+
+	// Clipping for plot area
+	c.save()
+	c.beginPath()
+	c.rect(plotLeft, plotTop, plotWidth.value, plotHeight.value)
+	c.clip()
+
+	// Draw bars per visible category
+	visibleCategories.value.forEach((cat, catIdx) => {
+		const catItems = items.value.filter(r => String(r[props.categoryField]) === cat)
+		const catX = plotLeft + catIdx * catWidth
+
+		if (props.mode === 'stacked') {
+			let yOffset = 0
+			groups.value.forEach((group, gIdx) => {
+				const item = catItems.find(r => String(r[props.groupField] ?? 'default') === group)
+				if (!item) return
+				const val = Number(item[props.valueField]) * p
+				const bh = (val / maxValue.value) * plotHeight.value
+				const bx = catX + (catWidth - barWidth) / 2
+				const by = plotTop + plotHeight.value - (yOffset + val) / maxValue.value * plotHeight.value
+				const isHovered = hoveredIndex.value === bars.length
+				const color = props.colors[gIdx % props.colors.length]
+				c.fillStyle = isHovered ? color : color + 'dd'
+				c.fillRect(bx, by, barWidth, bh)
+				
+				// Stroke for separation
+				c.strokeStyle = 'rgba(255,255,255,0.3)'
+				c.lineWidth = 1
+				c.strokeRect(bx, by, barWidth, bh)
+				
+				bars.push({ x: bx, y: by, w: barWidth, h: bh, item, label: `${cat} (${group}): ${item[props.valueField]}` })
+				yOffset += Number(item[props.valueField])
+			})
+		} else if (props.mode === 'simple') {
+			const item = catItems[0]
+			if (item) {
+				const isHovered = hoveredIndex.value === bars.length
+				const val = Number(item[props.valueField]) * p
+				const bh = (val / maxValue.value) * plotHeight.value
+				const bx = catX + (catWidth - barWidth) / 2
+				const by = plotTop + plotHeight.value - bh
+				const color = props.colors[0] || '#6366f1'
+				c.fillStyle = isHovered ? color : color + 'dd'
+				c.fillRect(bx, by, barWidth, bh)
+				bars.push({ x: bx, y: by, w: barWidth, h: bh, item, label: `${cat}: ${item[props.valueField]}` })
+			}
+		} else {
+			// clustered
+			groups.value.forEach((group, gIdx) => {
+				const item = catItems.find(r => String(r[props.groupField] ?? 'default') === group)
+				if (!item) return
+				const isHovered = hoveredIndex.value === bars.length
+				const val = Number(item[props.valueField]) * p
+				const bh = (val / maxValue.value) * plotHeight.value
+				
+				const gCountTotal = groups.value.length
+				const totalBarsW = gCountTotal * barWidth + (gCountTotal - 1) * 2
+				const startX = catX + (catWidth - totalBarsW) / 2
+				const bx = startX + gIdx * (barWidth + 2)
+				const by = plotTop + plotHeight.value - bh
+				
+				const color = props.colors[gIdx % props.colors.length]
+				c.fillStyle = isHovered ? color : color + 'dd'
+				c.fillRect(bx, by, barWidth, bh)
+				bars.push({ x: bx, y: by, w: barWidth, h: bh, item, label: `${cat} (${group}): ${item[props.valueField]}` })
+			})
+		}
+
+	})
+	c.restore()
+
+	// X labels - Draw AFTER clipping so they are visible
+	c.save()
+	c.fillStyle = 'rgba(150,150,170,0.9)'
+	c.font = '11px system-ui, sans-serif'
+	c.textAlign = 'center'
+	visibleCategories.value.forEach((cat, catIdx) => {
+		const catX = plotLeft + catIdx * catWidth
+		const label = cat.length > 10 ? cat.slice(0, 10) + '…' : cat
+		c.fillText(label, catX + catWidth / 2, plotTop + plotHeight.value + 18)
+	})
+	c.restore()
+
+	// Axis Titles
+	c.save()
+	c.fillStyle = 'rgba(120,120,140,0.8)'
+	if (props.xAxisTitle) {
+		c.textAlign = 'center'
+		c.fillText(props.xAxisTitle, plotLeft + plotWidth.value / 2, plotTop + plotHeight.value + 38)
+	}
+	if (props.yAxisTitle) {
+		c.translate(plotLeft - 40, plotTop + plotHeight.value / 2)
+		c.rotate(-Math.PI / 2)
+		c.textAlign = 'center'
+		c.fillText(props.yAxisTitle, 0, 0)
+	}
+	c.restore()
+
+	hitBars.value = bars
+	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 = plotLeft
+	const yPos = plotTop + plotHeight.value + 35
+
+	groups.value.forEach((group, i) => {
+		const color = props.colors[i % props.colors.length]
+		c.fillStyle = color
+		c.fillRect(xOffset, yPos - 4, 10, 8)
+		
+		c.fillStyle = 'rgba(150,150,170,0.9)'
+		const label = group === 'default' ? 'Series' : group
+		c.fillText(label, xOffset + 15, yPos)
+		xOffset += c.measureText(label).width + 35
+	})
+	c.restore()
+}
+
+watch([items, scale, panOffset, hoveredIndex, progress, () => props.mode, () => props.orientation], 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()
+	}
+})
+
+const onMouseMove = (e: MouseEvent) => {
+	onViewportMouseMove(e)
+	if (isDragging.value) {
+		setHovered(-1)
+		hideTooltip()
+		return
+	}
+
+	const rect = containerRef.value?.getBoundingClientRect()
+	if (!rect) return
+	const mouseX = e.clientX - rect.left
+	const mouseY = e.clientY - rect.top
+
+	// Find if mouse is within a bar
+	const hovered = hitBars.value.find(b => 
+		mouseX >= b.x && mouseX <= b.x + b.w && 
+		mouseY >= b.y && mouseY <= b.y + b.h
+	)
+
+	if (hovered) {
+		const idx = hitBars.value.indexOf(hovered)
+		setHovered(idx)
+		showTooltip(mouseX + 10, mouseY - 10, hovered.label, hovered.item, idx)
+		emit('hover-point', hovered.item, idx)
+	} 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, 'bar-chart.png'),
+	exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, 'bar-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>