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

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

@@ -0,0 +1,263 @@
+<template lang="pug">
+.k-chart-wrapper
+	.k-chart-inner(
+		ref="containerRef"
+		@mousemove="onMouseMove"
+		@mouseleave="onMouseLeave"
+	)
+		KLoader(:loading="isLoading" overlay)
+		canvas(ref="canvasRef" v-show="!isLoading")
+		svg.k-chart-svg(
+			v-show="!isLoading"
+			ref="svgRef"
+			:width="width"
+			:height="height"
+		)
+			// Dynamic Interaction Layer
+			g.k-chart-interaction(v-if="hoveredIndex !== -1 && hoveredCell")
+				rect.k-chart-hit-proxy(
+					:x="hoveredCell.x"
+					:y="hoveredCell.y"
+					:width="hoveredCell.w"
+					:height="hoveredCell.h"
+					fill="transparent"
+					style="cursor: pointer"
+					@click="emit('click-point', hoveredCell.item, hoveredIndex)"
+				)
+				rect(
+					:x="hoveredCell.x - 1"
+					:y="hoveredCell.y - 1"
+					:width="hoveredCell.w + 2"
+					:height="hoveredCell.h + 2"
+					fill="transparent"
+					stroke="#fff"
+					stroke-width="1.5"
+					rx="2"
+					pointer-events="none"
+				)
+			
+			// Labels remain in SVG for sharpness and easy styling
+		.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 { useChartSvg } from "../../composables/useChartSvg";
+import { useChartData } from "../../composables/useChartData";
+import { useChartCanvas } from "../../composables/useChartCanvas";
+import { useChartExport } from "../../composables/useChartExport";
+const props = defineProps({
+  dataProvider: { type: null, required: false },
+  rowField: { type: String, required: false, default: "row" },
+  columnField: { type: String, required: false, default: "column" },
+  valueField: { type: String, required: false, default: "value" },
+  colorLow: { type: String, required: false, default: "#1e1e2e" },
+  colorHigh: { type: String, required: false, default: "#6366f1" },
+  colors: { type: Array, required: false, default: () => ["#1e1e2e", "#313244", "#45475a", "#585b70", "#cba6f7", "#f5c2e7", "#eba0ac", "#f38ba8"] },
+  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"]);
+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 { exportPng, exportSvg: exportSvgFile } = useChartExport();
+const isLoading = computed(() => {
+  return props.dataProvider?.loading?.value || props.dataProvider?.initialLoad?.value || false;
+});
+const padLeft = 80;
+const padTop = 30;
+const padRight = 20;
+const padBottom = 20;
+const rows = computed(() => [...new Set(items.value.map((r) => String(r[props.rowField])))]);
+const cols = computed(() => [...new Set(items.value.map((r) => String(r[props.columnField])))]);
+const cellW = computed(() => Math.max(8, (width.value - padLeft - padRight) / (cols.value.length || 1)));
+const cellH = computed(() => Math.max(8, (height.value - padTop - padBottom) / (rows.value.length || 1)));
+const maxVal = computed(() => Math.max(...items.value.map((r) => Number(r[props.valueField])), 1));
+const hoveredCell = computed(() => {
+  if (hoveredIndex.value === -1) return null;
+  return renderedCells.value[hoveredIndex.value];
+});
+const minVal = computed(() => Math.min(...items.value.map((r) => Number(r[props.valueField])), 0));
+const lerp = (t) => {
+  const low = parseInt((props.colorLow || "#1e1e2e").replace("#", ""), 16);
+  const high = parseInt((props.colorHigh || "#6366f1").replace("#", ""), 16);
+  const lr = low >> 16 & 255;
+  const lg = low >> 8 & 255;
+  const lb = low & 255;
+  const hr = high >> 16 & 255;
+  const hg = high >> 8 & 255;
+  const hb = high & 255;
+  const r = Math.round(lr + (hr - lr) * t);
+  const g = Math.round(lg + (hg - lg) * t);
+  const b = Math.round(lb + (hb - lb) * t);
+  return `rgb(${r},${g},${b})`;
+};
+const renderedCells = computed(() => {
+  const range = maxVal.value - minVal.value || 1;
+  return items.value.map((item) => {
+    const ri = rows.value.indexOf(String(item[props.rowField]));
+    const ci = cols.value.indexOf(String(item[props.columnField]));
+    const t = (Number(item[props.valueField]) - minVal.value) / range;
+    return {
+      x: padLeft + ci * cellW.value,
+      y: padTop + ri * cellH.value,
+      w: cellW.value - 1,
+      h: cellH.value - 1,
+      color: lerp(t),
+      item,
+      label: `${item[props.rowField]} \xD7 ${item[props.columnField]}: ${item[props.valueField]}`
+    };
+  });
+});
+const draw = () => {
+  if (!ctx.value) return;
+  clear(props.backgroundColor);
+  const c = ctx.value;
+  drawAxes(c);
+  renderedCells.value.forEach((cell, i) => {
+    const isHovered = hoveredIndex.value === i;
+    c.fillStyle = cell.color;
+    c.beginPath();
+    c.rect(cell.x, cell.y, cell.w, cell.h);
+    c.fill();
+    if (isHovered) {
+      c.strokeStyle = "#fff";
+      c.lineWidth = 2;
+      c.strokeRect(cell.x + 1, cell.y + 1, cell.w - 2, cell.h - 2);
+    }
+  });
+  if (props.showLegend) drawLegend(c);
+};
+const drawAxes = (c) => {
+  c.save();
+  c.fillStyle = "rgba(120,120,140,0.8)";
+  c.font = "11px system-ui, sans-serif";
+  const plotW = width.value - padLeft - padRight;
+  const plotH = height.value - padTop - padBottom;
+  c.textAlign = "right";
+  rows.value.forEach((label, i) => {
+    const y = padTop + i * cellH.value + cellH.value / 2 + 4;
+    c.fillText(label, padLeft - 8, y);
+  });
+  c.textAlign = "center";
+  cols.value.forEach((label, i) => {
+    const x = padLeft + i * cellW.value + cellW.value / 2;
+    c.fillText(label, x, padTop + plotH + 16);
+  });
+  if (props.xAxisTitle) {
+    c.fillText(props.xAxisTitle, padLeft + plotW / 2, padTop + plotH + 34);
+  }
+  if (props.yAxisTitle) {
+    c.save();
+    c.translate(padLeft - 55, padTop + plotH / 2);
+    c.rotate(-Math.PI / 2);
+    c.textAlign = "center";
+    c.fillText(props.yAxisTitle, 0, 0);
+    c.restore();
+  }
+  c.restore();
+};
+const drawLegend = (c) => {
+  c.save();
+  const gradW = 120;
+  const gradH = 10;
+  const x = width.value - padRight - gradW;
+  const y = height.value - padBottom + 10;
+  const grad = c.createLinearGradient(x, 0, x + gradW, 0);
+  grad.addColorStop(0, props.colorLow || "#1e1e2e");
+  grad.addColorStop(1, props.colorHigh || "#6366f1");
+  c.fillStyle = grad;
+  c.fillRect(x, y, gradW, gradH);
+  c.fillStyle = "rgba(150,150,170,0.9)";
+  c.font = "10px system-ui, sans-serif";
+  c.textAlign = "left";
+  c.fillText(minVal.value.toString(), x, y + gradH + 10);
+  c.textAlign = "right";
+  c.fillText(maxVal.value.toString(), x + gradW, y + gradH + 10);
+  c.restore();
+};
+watch([renderedCells, hoveredIndex, width, height], draw);
+onMounted(async () => {
+  await nextTick();
+  if (containerRef.value && canvasRef.value) {
+    setupCanvas(canvasRef.value);
+    draw();
+  }
+});
+const onMouseMove = (e) => {
+  const rect = containerRef.value?.getBoundingClientRect();
+  if (!rect) return;
+  const mx = e.clientX - rect.left;
+  const my = e.clientY - rect.top;
+  const idx = renderedCells.value.findIndex(
+    (c) => mx >= c.x && mx <= c.x + c.w && my >= c.y && my <= c.y + c.h
+  );
+  if (idx !== -1) {
+    const cell = renderedCells.value[idx];
+    setHovered(idx);
+    showTooltip(mx + 10, my - 10, cell.label, cell.item, idx);
+    emit("hover-point", cell.item, idx);
+  } else {
+    setHovered(-1);
+    hideTooltip();
+  }
+};
+const onMouseLeave = () => {
+  setHovered(-1);
+  hideTooltip();
+};
+defineExpose({
+  exportPng: () => canvasRef.value && exportPng(canvasRef.value, "heatmap.png"),
+  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "heatmap.svg")
+});
+</script>
+
+<style scoped>
+.k-chart-wrapper {
+  position: relative;
+  user-select: 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;
+  pointer-events: none;
+}
+.k-chart-wrapper .k-chart-inner .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/KHeatMap/KHeatMap.vue.d.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;

package/dist/runtime/components/KLineChart/KLineChart.d.vue.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;