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

package/dist/module.d.cts

@@ -0,0 +1,2 @@
+export * from "/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-block-charts/src/module";
+export { default } from "/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-block-charts/src/module";

package/dist/module.d.mts

@@ -0,0 +1,2 @@
+export * from "/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-block-charts/src/module";
+export { default } from "/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-block-charts/src/module";

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "@katlux/block-charts",
+  "configKey": "katluxCharts",
+  "compatibility": {
+    "nuxt": "^3.0.0"
+  },
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,18 @@
+import { createJiti } from "file:///home/cagatay/Desktop/projects/KatluxShowcase/node_modules/jiti/lib/jiti.mjs";
+
+const jiti = createJiti(import.meta.url, {
+  "interopDefault": true,
+  "alias": {
+    "@katlux/block-charts": "/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-block-charts"
+  },
+  "transformOptions": {
+    "babel": {
+      "plugins": []
+    }
+  }
+})
+
+/** @type {import("/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-block-charts/src/module")} */
+const _module = await jiti.import("/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-block-charts/src/module.ts");
+
+export default _module?.default ?? _module;

package/dist/types.d.mts

@@ -0,0 +1,13 @@
+import type { ModuleHooks, ModuleRuntimeHooks, ModuleRuntimeConfig, ModulePublicRuntimeConfig } from './module.mjs'
+
+declare module '#app' {
+  interface RuntimeNuxtHooks extends ModuleRuntimeHooks {}
+}
+
+declare module '@nuxt/schema' {
+  interface NuxtHooks extends ModuleHooks {}
+  interface RuntimeConfig extends ModuleRuntimeConfig {}
+  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
+}
+
+export * from "./module.mjs"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/block-charts",
-	"version": "0.1.0-beta.0",
+	"version": "0.1.0-beta.1",
 	"description": "Pre-built charting block components for Katlux toolkit",
 	"author": "Katlux",
 	"license": "MIT",
@@ -27,5 +27,8 @@
 		"@nuxt/kit": "^3.20.1",
 		"pug": "^3.0.0",
 		"sass": "^1.80.0"
-	}
+	},
+	"files": [
+		"dist"
+	]
 }

package/build.config.ts

@@ -1,4 +0,0 @@
-export default {
-	failOnWarn: false,
-	externals: ['#app', '@katlux/toolkit', '@katlux/providers']
-}

package/src/module.ts

@@ -1,25 +0,0 @@
-import { defineNuxtModule, createResolver, addComponentsDir } from '@nuxt/kit'
-
-export interface ModuleOptions { }
-
-export default defineNuxtModule<ModuleOptions>({
-	meta: {
-		name: '@katlux/block-charts',
-		configKey: 'katluxCharts',
-		compatibility: {
-			nuxt: '^3.0.0'
-		}
-	},
-	defaults: {},
-	async setup(options, nuxt) {
-		const resolver = createResolver(import.meta.url)
-
-		// Add components directory
-		addComponentsDir({
-			path: resolver.resolve('./runtime/components'),
-			pathPrefix: false,
-			prefix: '',
-			global: true
-		})
-	}
-})

package/src/runtime/components/KAreaChart/KAreaChart.vue

@@ -1,410 +0,0 @@
-<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 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"
-					)
-			g.k-chart-hits
-				// No more rect v-for here.
-			
-			// Dynamic Interaction Layer
-			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)"
-				)
-				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"
-				)
-		.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, 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'
-
-const props = withDefaults(defineProps<{
-	dataProvider?: any
-	xField?: string
-	yField?: string
-	seriesField?: string
-	animated?: boolean
-	zoomable?: boolean
-	maxZoom?: number
-	stacked?: boolean
-	colors?: string[]
-	backgroundColor?: string
-	showLegend?: boolean
-	xAxisTitle?: string
-	yAxisTitle?: string
-}>(), {
-	xField: 'x',
-	yField: 'y',
-	seriesField: 'series',
-	animated: true,
-	zoomable: true,
-	maxZoom: 10,
-	stacked: false,
-	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 { 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)
-
-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 removed to save memory and avoid DOM nodes
-
-const draw = () => {
-	if (!ctx.value) return
-	clear(props.backgroundColor)
-	const c = ctx.value
-	const p = easeOut(progress.value)
-
-	// Draw grid
-	c.save()
-	c.strokeStyle = 'rgba(100,100,120,0.1)'
-	c.lineWidth = 1
-	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()
-	}
-	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.restore()
-
-	// Axes labels & lines
-	c.save()
-	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 = axes.yMin.value + (axes.yMax.value - axes.yMin.value) * (i / 5)
-		c.fillText(val.toFixed(1), axes.plotLeft - 8, axes.toY(val) + 4)
-	}
-	c.textAlign = 'center'
-	for (let i = 0; i <= 5; i++) {
-		const val = axes.xMin.value + (axes.xMax.value - axes.xMin.value) * (i / 5)
-		const x = axes.toX(val)
-		let label = val.toFixed(1)
-		if (val > 1000000000000) label = new Date(val).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-		c.fillText(label, x, axes.plotTop + axes.plotHeight.value + 16)
-	}
-
-	c.beginPath()
-	c.moveTo(axes.plotLeft, axes.plotTop)
-	c.lineTo(axes.plotLeft, axes.plotTop + axes.plotHeight.value)
-	c.stroke()
-
-	if (props.xAxisTitle) {
-		c.fillStyle = 'rgba(120,120,140,0.8)'
-		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.fillStyle = 'rgba(120,120,140,0.8)'
-		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()
-
-	// Clipping for plot area
-	c.save()
-	c.beginPath()
-	c.rect(axes.plotLeft, axes.plotTop, axes.plotWidth.value, axes.plotHeight.value)
-	c.clip()
-
-	// Draw filled areas per series
-	let seriesIdx = 0
-	for (const [key, seriesItems] of seriesMap.value) {
-		const color = props.colors[seriesIdx % props.colors.length]
-		const sorted = [...seriesItems].sort((a, b) => parseValue(a[props.xField]) - parseValue(b[props.xField]))
-		const drawCount = Math.max(1, Math.floor(sorted.length * p))
-		const pts = sorted.slice(0, drawCount)
-
-		c.save()
-		// Fill
-		c.beginPath()
-		pts.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)
-		})
-		// Close to baseline
-		if (pts.length > 0) {
-			const lastX = axes.toX(parseValue(pts[pts.length - 1][props.xField]))
-			const firstX = axes.toX(parseValue(pts[0][props.xField]))
-			const baselineY = axes.plotTop + axes.plotHeight.value
-			c.lineTo(lastX, baselineY)
-			c.lineTo(firstX, baselineY)
-			c.closePath()
-		}
-		c.fillStyle = color + '33'
-		c.fill()
-
-		// Line stroke
-		c.beginPath()
-		pts.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.strokeStyle = color
-		c.lineWidth = 2
-		c.lineJoin = 'round'
-		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'
-	
-	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]
-		c.fillStyle = color
-		c.fillRect(xOffset, yPos - 4, 10, 8)
-		
-		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()
-}
-
-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 })
-
-// Points for all series at current 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
-})
-
-onMounted(async () => {
-	await nextTick()
-	if (containerRef.value && canvasRef.value) {
-		setupCanvas(canvasRef.value)
-		if (props.animated) animate()
-		else draw()
-	}
-})
-
-const onMouseMove = (e: MouseEvent) => {
-	viewport.onMouseMove(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
-	const nearest = findNearestX(items.value, mouseX, props.xField, axes)
-	if (nearest) {
-		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()
-}
-
-defineExpose({
-	zoomIn: viewport.zoomIn, zoomOut: viewport.zoomOut, resetZoom: viewport.resetZoom,
-	exportPng: () => canvasRef.value && exportPng(canvasRef.value, 'area-chart.png'),
-	exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, 'area-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>