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

package/dist/runtime/components/KLineChart/KLineChart.vue

@@ -0,0 +1,407 @@
+<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 setup>
+import { ref, watch, computed, onMounted, onUnmounted, 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 = defineProps({
+  dataProvider: { type: null, required: false },
+  xField: { type: String, required: false, default: "x" },
+  yField: { type: String, required: false, default: "y" },
+  seriesField: { type: String, required: false, default: "series" },
+  animated: { type: Boolean, required: false, default: true },
+  zoomable: { type: Boolean, required: false, default: true },
+  maxZoom: { type: Number, required: false, default: 10 },
+  colors: { type: Array, required: false, default: () => ["#6366f1", "#22d3ee", "#f59e0b", "#10b981", "#f43f5e", "#a855f7", "#14b8a6", "#fb923c"] },
+  backgroundColor: { type: String, required: false, default: "#ffffff" },
+  showLegend: { type: Boolean, required: false, default: true },
+  xAxisTitle: { type: String, required: false, default: "" },
+  yAxisTitle: { type: String, required: false, default: "" }
+});
+const emit = defineEmits(["click-point", "hover-point", "zoom-change", "pan-change"]);
+const wrapperRef = ref(null);
+const containerRef = ref(null);
+const canvasRef = ref(null);
+const svgRef = ref(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?.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 = /* @__PURE__ */ new Map();
+  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 }
+});
+const draw = () => {
+  if (!ctx.value) return;
+  clear(props.backgroundColor);
+  const c = ctx.value;
+  const p = easeOut(progress.value);
+  drawGrid(c);
+  drawAxes(c);
+  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) => {
+  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.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);
+    xOffset += c.measureText(label).width + 35;
+  });
+  c.restore();
+};
+const drawGrid = (c) => {
+  c.save();
+  c.strokeStyle = "rgba(100,100,120,0.1)";
+  c.lineWidth = 1;
+  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();
+  }
+  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) => {
+  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";
+  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);
+  }
+  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 (val > 1e12) 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 + 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(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, data, color, progress2) => {
+  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 * progress2));
+  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();
+  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();
+};
+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();
+  }
+});
+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 = [];
+  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) => {
+  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) {
+    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) => {
+  onViewportMouseLeave(e);
+  setHovered(-1);
+  hideTooltip();
+};
+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 scoped>
+.k-chart-wrapper {
+  position: relative;
+  user-select: none;
+}
+.k-chart-wrapper .k-chart-controls {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  display: flex;
+  gap: 4px;
+}
+.k-chart-wrapper .k-chart-inner {
+  width: 100%;
+  height: 400px;
+  position: relative;
+}
+.k-chart-wrapper .k-chart-inner canvas, .k-chart-wrapper .k-chart-inner .k-chart-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.k-chart-wrapper .k-chart-inner .k-chart-svg {
+  overflow: visible;
+}
+.k-chart-wrapper .k-chart-svg {
+  pointer-events: none;
+}
+.k-chart-wrapper .k-chart-svg .k-chart-hit-proxy {
+  pointer-events: all;
+  cursor: pointer;
+}
+.k-chart-wrapper .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/dist/runtime/components/KLineChart/KLineChart.vue.d.ts

@@ -0,0 +1,51 @@
+type __VLS_Props = {
+    dataProvider?: any;
+    xField?: string;
+    yField?: string;
+    seriesField?: string;
+    animated?: boolean;
+    zoomable?: boolean;
+    maxZoom?: number;
+    colors?: string[];
+    backgroundColor?: string;
+    showLegend?: boolean;
+    xAxisTitle?: string;
+    yAxisTitle?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+    exportPng: () => void | null;
+    exportSvg: () => void | null;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "click-point": (item: any, index: number) => any;
+    "hover-point": (item: any, index: number) => any;
+    "zoom-change": (scale: number) => any;
+    "pan-change": (offset: {
+        x: number;
+        y: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onClick-point"?: ((item: any, index: number) => any) | undefined;
+    "onHover-point"?: ((item: any, index: number) => any) | undefined;
+    "onZoom-change"?: ((scale: number) => any) | undefined;
+    "onPan-change"?: ((offset: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
+}>, {
+    xField: string;
+    yField: string;
+    seriesField: string;
+    animated: boolean;
+    zoomable: boolean;
+    maxZoom: number;
+    colors: string[];
+    backgroundColor: string;
+    showLegend: boolean;
+    xAxisTitle: string;
+    yAxisTitle: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KPieChart/KPieChart.d.vue.ts

@@ -0,0 +1,32 @@
+type __VLS_Props = {
+    dataProvider?: any;
+    labelField?: string;
+    valueField?: string;
+    donut?: boolean;
+    animated?: boolean;
+    colors?: string[];
+    backgroundColor?: string;
+    showLegend?: boolean;
+    title?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    exportPng: () => void | null;
+    exportSvg: () => void | null;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "click-point": (item: any, index: number) => any;
+    "hover-point": (item: any, index: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onClick-point"?: ((item: any, index: number) => any) | undefined;
+    "onHover-point"?: ((item: any, index: number) => any) | undefined;
+}>, {
+    title: string;
+    animated: boolean;
+    colors: string[];
+    backgroundColor: string;
+    showLegend: boolean;
+    valueField: string;
+    labelField: string;
+    donut: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;