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

package/dist/runtime/components/KBarChart/KBarChart.vue

@@ -0,0 +1,398 @@
+<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 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 = defineProps({
+  dataProvider: { type: null, required: false },
+  categoryField: { type: String, required: false, default: "category" },
+  valueField: { type: String, required: false, default: "value" },
+  groupField: { type: String, required: false, default: "group" },
+  orientation: { type: String, required: false, default: "vertical" },
+  mode: { type: String, required: false, default: "clustered" },
+  animated: { type: Boolean, required: false, default: true },
+  zoomable: { type: Boolean, required: false, default: true },
+  maxZoom: { type: Number, required: false, default: 8 },
+  colors: { type: Array, required: false, default: () => ["#6366f1", "#22d3ee", "#f59e0b", "#10b981", "#f43f5e", "#a855f7"] },
+  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 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 } = 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 {
+  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));
+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;
+});
+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)
+);
+const hitBars = ref([]);
+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 = [];
+  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;
+  }
+  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);
+  }
+  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();
+  }
+  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();
+  c.save();
+  c.beginPath();
+  c.rect(plotLeft, plotTop, plotWidth.value, plotHeight.value);
+  c.clip();
+  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);
+        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 {
+      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();
+  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) + "\u2026" : cat;
+    c.fillText(label, catX + catWidth / 2, plotTop + plotHeight.value + 18);
+  });
+  c.restore();
+  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) => {
+  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) => {
+  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;
+  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) => {
+  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 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-btn {
+  display: none;
+}
+.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/KBarChart/KBarChart.vue.d.ts

@@ -0,0 +1,55 @@
+type __VLS_Props = {
+    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;
+};
+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;
+}>, {
+    animated: boolean;
+    zoomable: boolean;
+    maxZoom: number;
+    colors: string[];
+    backgroundColor: string;
+    showLegend: boolean;
+    xAxisTitle: string;
+    yAxisTitle: string;
+    categoryField: string;
+    valueField: string;
+    groupField: string;
+    orientation: "vertical" | "horizontal";
+    mode: "simple" | "clustered" | "stacked";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,36 @@
+type __VLS_Props = {
+    dataProvider?: any;
+    rowField?: string;
+    columnField?: string;
+    valueField?: string;
+    colorLow?: string;
+    colorHigh?: string;
+    colors?: string[];
+    backgroundColor?: string;
+    showLegend?: boolean;
+    xAxisTitle?: string;
+    yAxisTitle?: 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;
+}>, {
+    colors: string[];
+    backgroundColor: string;
+    showLegend: boolean;
+    xAxisTitle: string;
+    yAxisTitle: string;
+    valueField: string;
+    rowField: string;
+    columnField: string;
+    colorLow: string;
+    colorHigh: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;