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

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

@@ -0,0 +1,273 @@
+<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")
+			g.k-chart-hits
+				// Hit detection now handled via angle calculation in onMouseMove
+			
+			// Dynamic Interaction Layer
+			g.k-chart-interaction(v-if="hoveredIndex !== -1 && hoveredSeg")
+				path.k-chart-hit-proxy(
+					:d="hoveredSeg.d"
+					fill="transparent"
+					style="cursor: pointer"
+					@click="emit('click-point', hoveredSeg.item, hoveredIndex)"
+				)
+				path(
+					:d="hoveredSeg.d"
+					fill="transparent"
+					stroke="#fff"
+					stroke-width="3"
+					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 { useChartAnimation, easeOut } from "../../composables/useChartAnimation";
+import { useChartExport } from "../../composables/useChartExport";
+const props = defineProps({
+  dataProvider: { type: null, required: false },
+  labelField: { type: String, required: false, default: "label" },
+  valueField: { type: String, required: false, default: "value" },
+  donut: { type: Boolean, required: false, default: false },
+  animated: { type: Boolean, required: false, default: true },
+  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 },
+  title: { 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 { progress, animate } = useChartAnimation();
+const { exportPng, exportSvg: exportSvgFile } = useChartExport();
+const isLoading = computed(() => {
+  return props.dataProvider?.loading?.value || props.dataProvider?.initialLoad?.value || false;
+});
+const hitSegments = ref([]);
+const total = computed(() => items.value.reduce((s, r) => s + Number(r[props.valueField]), 0));
+const hoveredSeg = computed(() => {
+  if (hoveredIndex.value === -1) return null;
+  return hitSegments.value[hoveredIndex.value];
+});
+const arcPath = (cx, cy, r, startAngle, endAngle) => {
+  const x1 = cx + r * Math.cos(startAngle);
+  const y1 = cy + r * Math.sin(startAngle);
+  const x2 = cx + r * Math.cos(endAngle);
+  const y2 = cy + r * Math.sin(endAngle);
+  const large = endAngle - startAngle > Math.PI ? 1 : 0;
+  if (props.donut) {
+    const ri = r * 0.5;
+    const xi1 = cx + ri * Math.cos(endAngle);
+    const yi1 = cy + ri * Math.sin(endAngle);
+    const xi2 = cx + ri * Math.cos(startAngle);
+    const yi2 = cy + ri * Math.sin(startAngle);
+    return `M ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} L ${xi1} ${yi1} A ${ri} ${ri} 0 ${large} 0 ${xi2} ${yi2} Z`;
+  }
+  return `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`;
+};
+const draw = () => {
+  if (!ctx.value) return;
+  clear(props.backgroundColor);
+  const c = ctx.value;
+  const p = easeOut(progress.value);
+  const segs = [];
+  const cx = width.value / 2;
+  const cy = props.showLegend ? (height.value - 50) / 2 : height.value / 2;
+  const r = Math.min(width.value - 40, props.showLegend ? height.value - 100 : height.value - 40) / 2;
+  let startAngle = -Math.PI / 2;
+  const tot = total.value || 1;
+  items.value.forEach((item, i) => {
+    const slice = Number(item[props.valueField]) / tot * Math.PI * 2 * p;
+    const endAngle = startAngle + slice;
+    const color = props.colors[i % props.colors.length];
+    const isHovered = hoveredIndex.value === i;
+    const rr = isHovered ? r + 8 : r;
+    c.save();
+    c.beginPath();
+    c.moveTo(cx, cy);
+    c.arc(cx, cy, rr, startAngle, endAngle);
+    c.closePath();
+    c.fillStyle = color;
+    c.fill();
+    c.restore();
+    const midAngle = startAngle + slice / 2;
+    const lr = r * 0.7;
+    const lx = cx + lr * Math.cos(midAngle);
+    const ly = cy + lr * Math.sin(midAngle);
+    if (p > 0.5) {
+      c.save();
+      c.fillStyle = "#fff";
+      c.font = "bold 11px system-ui, sans-serif";
+      c.textAlign = "center";
+      c.textBaseline = "middle";
+      const pct = (Number(item[props.valueField]) / tot * 100).toFixed(0) + "%";
+      c.fillText(pct, lx, ly);
+      c.restore();
+    }
+    segs.push({
+      d: arcPath(cx, cy, rr, startAngle, endAngle),
+      cx: cx + r * 0.75 * Math.cos(startAngle + slice / 2),
+      cy: cy + r * 0.75 * Math.sin(startAngle + slice / 2),
+      item,
+      label: `${item[props.labelField]}: ${item[props.valueField]}`,
+      startAngle,
+      endAngle
+    });
+    startAngle = endAngle;
+  });
+  if (props.donut) {
+    c.save();
+    c.beginPath();
+    c.arc(cx, cy, r * 0.5, 0, Math.PI * 2);
+    c.fillStyle = "#000";
+    c.globalCompositeOperation = "destination-out";
+    c.fill();
+    c.globalCompositeOperation = "source-over";
+    c.restore();
+  }
+  hitSegments.value = segs;
+  if (props.showLegend) {
+    drawLegend(c);
+  }
+  if (props.title) {
+    c.save();
+    c.fillStyle = "rgba(120,120,140,0.9)";
+    c.font = "bold 16px system-ui, sans-serif";
+    c.textAlign = "center";
+    c.fillText(props.title, width.value / 2, 30);
+    c.restore();
+  }
+};
+const drawLegend = (c) => {
+  c.save();
+  c.font = "11px system-ui, sans-serif";
+  c.textAlign = "left";
+  c.textBaseline = "middle";
+  const keys = items.value.map((it) => String(it[props.labelField]));
+  let xOffset = 20;
+  let yOffset = height.value - 25;
+  keys.forEach((key, i) => {
+    const color = props.colors[i % props.colors.length];
+    c.fillStyle = color;
+    c.fillRect(xOffset, yOffset - 4, 10, 8);
+    c.fillStyle = "rgba(150,150,170,0.9)";
+    c.fillText(key, xOffset + 15, yOffset);
+    const textWidth = c.measureText(key).width;
+    xOffset += textWidth + 35;
+    if (xOffset > width.value - 50) {
+      xOffset = 20;
+      yOffset -= 15;
+    }
+  });
+  c.restore();
+};
+watch([items, hoveredIndex, progress, () => props.donut], draw, { deep: true });
+watch(items, () => {
+  if (props.animated) animate();
+}, { deep: true });
+onMounted(async () => {
+  await nextTick();
+  if (containerRef.value && canvasRef.value) {
+    setupCanvas(canvasRef.value);
+    if (props.animated) animate();
+    else draw();
+  }
+});
+const onMouseMove = (e) => {
+  const rect = containerRef.value?.getBoundingClientRect();
+  if (!rect) return;
+  const cx = width.value / 2;
+  const cy = props.showLegend ? (height.value - 50) / 2 : height.value / 2;
+  const r = Math.min(width.value - 40, props.showLegend ? height.value - 100 : height.value - 40) / 2;
+  const mx = e.clientX - rect.left;
+  const my = e.clientY - rect.top;
+  const dx = mx - cx;
+  const dy = my - cy;
+  const dist = Math.sqrt(dx * dx + dy * dy);
+  const inRadius = dist <= r + 10 && (!props.donut || dist >= r * 0.5 - 5);
+  if (inRadius) {
+    let angle = Math.atan2(dy, dx);
+    if (angle < -Math.PI / 2) angle += Math.PI * 2;
+    const idx = hitSegments.value.findIndex((seg) => angle >= seg.startAngle && angle < seg.endAngle);
+    if (idx !== -1) {
+      const seg = hitSegments.value[idx];
+      setHovered(idx);
+      showTooltip(mx + 10, my - 10, seg.label, seg.item, idx);
+      emit("hover-point", seg.item, idx);
+      return;
+    }
+  }
+  setHovered(-1);
+  hideTooltip();
+};
+const onMouseLeave = () => {
+  setHovered(-1);
+  hideTooltip();
+};
+defineExpose({
+  exportPng: () => canvasRef.value && exportPng(canvasRef.value, "pie-chart.png"),
+  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "pie-chart.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;
+}
+.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/KPieChart/KPieChart.vue.d.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;

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

@@ -0,0 +1,55 @@
+type __VLS_Props = {
+    dataProvider?: any;
+    xField?: string;
+    yField?: string;
+    seriesField?: string;
+    sizeField?: string;
+    labelField?: 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;
+    labelField: string;
+    sizeField: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;