nuxt-charts 2.2.1 → 3.0.0-beta.0

package/dist/runtime/components/CandlestickChart.vue

@@ -0,0 +1,329 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from "vue";
+import CandlestickTooltip from "./internal/CandlestickTooltip.vue";
+const props = defineProps({
+  data: { type: Array, required: true },
+  height: { type: Number, required: true },
+  xAccessor: { type: null, required: false },
+  openAccessor: { type: null, required: false },
+  highAccessor: { type: null, required: false },
+  lowAccessor: { type: null, required: false },
+  closeAccessor: { type: null, required: false },
+  volumeAccessor: { type: null, required: false },
+  upColor: { type: String, required: false },
+  downColor: { type: String, required: false },
+  candleWidth: { type: Number, required: false },
+  wickWidth: { type: Number, required: false },
+  showVolume: { type: Boolean, required: false },
+  xLabel: { type: String, required: false },
+  yLabel: { type: String, required: false },
+  yFormatter: { type: Function, required: false },
+  xFormatter: { type: Function, required: false },
+  tooltipTitleFormatter: { type: Function, required: false },
+  yNumTicks: { type: Number, required: false },
+  yDomain: { type: Array, required: false },
+  xGridLine: { type: Boolean, required: false },
+  yGridLine: { type: Boolean, required: false },
+  hideXAxis: { type: Boolean, required: false },
+  hideYAxis: { type: Boolean, required: false },
+  hideTooltip: { type: Boolean, required: false },
+  tooltip: { type: Object, required: false }
+});
+const xKey = computed(() => String(props.xAccessor ?? "label"));
+const openKey = computed(() => String(props.openAccessor ?? "open"));
+const highKey = computed(() => String(props.highAccessor ?? "high"));
+const lowKey = computed(() => String(props.lowAccessor ?? "low"));
+const closeKey = computed(() => String(props.closeAccessor ?? "close"));
+const volumeKey = computed(() => String(props.volumeAccessor ?? "volume"));
+const upColor = computed(() => props.upColor ?? "#10b981");
+const downColor = computed(() => props.downColor ?? "#ef4444");
+const showVolume = computed(() => props.showVolume ?? false);
+const maxCandleWidth = computed(() => props.candleWidth ?? 18);
+const wickWidth = computed(() => props.wickWidth ?? 1.5);
+const yGridLine = computed(() => props.yGridLine ?? true);
+const xGridLine = computed(() => props.xGridLine ?? false);
+const yNumTicks = computed(() => props.yNumTicks ?? 5);
+const candles = computed(
+  () => props.data.map((row) => ({
+    label: row[xKey.value],
+    open: Number(row[openKey.value]),
+    high: Number(row[highKey.value]),
+    low: Number(row[lowKey.value]),
+    close: Number(row[closeKey.value]),
+    volume: props.volumeAccessor || volumeKey.value in row ? Number(row[volumeKey.value]) : void 0
+  }))
+);
+const containerRef = useTemplateRef("containerRef");
+const W = ref(600);
+const H = computed(() => props.height);
+const PAD = computed(() => ({
+  top: 12,
+  right: props.hideYAxis ? 4 : 12,
+  bottom: props.hideXAxis ? 4 : 36,
+  left: props.hideYAxis ? 4 : 56
+}));
+const chartW = computed(() => Math.max(W.value - PAD.value.left - PAD.value.right, 1));
+const VOL_GAP = 8;
+const volumeH = computed(() => showVolume.value ? H.value * 0.22 : 0);
+const chartH = computed(
+  () => Math.max(
+    H.value - PAD.value.top - PAD.value.bottom - volumeH.value - (showVolume.value ? VOL_GAP : 0),
+    1
+  )
+);
+const volumeTop = computed(() => PAD.value.top + chartH.value + VOL_GAP);
+const priceMin = computed(() => {
+  const dataMin = candles.value.length ? Math.min(...candles.value.map((c) => c.low)) : 0;
+  return props.yDomain?.[0] ?? dataMin;
+});
+const priceMax = computed(() => {
+  const dataMax = candles.value.length ? Math.max(...candles.value.map((c) => c.high)) : 1;
+  return props.yDomain?.[1] ?? dataMax;
+});
+const priceRange = computed(() => Math.max(priceMax.value - priceMin.value, Number.EPSILON));
+function priceToY(price) {
+  return PAD.value.top + (priceMax.value - price) / priceRange.value * chartH.value;
+}
+function indexToX(i) {
+  const n = candles.value.length || 1;
+  return PAD.value.left + (i + 0.5) * (chartW.value / n);
+}
+const volumeMax = computed(
+  () => showVolume.value ? Math.max(...candles.value.map((c) => c.volume ?? 0), 1) : 1
+);
+const layouts = computed(() => {
+  const n = candles.value.length || 1;
+  const step = chartW.value / n;
+  const halfW = Math.max(Math.min(maxCandleWidth.value, step * 0.7) / 2, 1);
+  return candles.value.map((c, i) => {
+    const rising = c.close >= c.open;
+    const color = rising ? upColor.value : downColor.value;
+    const centerX = indexToX(i);
+    const bodyTop = priceToY(Math.max(c.open, c.close));
+    const bodyBottom = priceToY(Math.min(c.open, c.close));
+    const volH = showVolume.value ? (c.volume ?? 0) / volumeMax.value * volumeH.value : 0;
+    return {
+      key: c.label,
+      x: centerX - halfW,
+      centerX,
+      halfW,
+      bodyTop,
+      bodyH: Math.max(bodyBottom - bodyTop, 1.5),
+      wickTop: priceToY(c.high),
+      wickBottom: priceToY(c.low),
+      color,
+      rising,
+      volH,
+      volY: volumeTop.value + volumeH.value - volH
+    };
+  });
+});
+const yTicks = computed(() => {
+  const count = Math.max(yNumTicks.value, 2);
+  return Array.from({ length: count }, (_, i) => {
+    const price = priceMin.value + priceRange.value / (count - 1) * i;
+    return { price, y: priceToY(price) };
+  });
+});
+const xTicks = computed(() => {
+  const n = candles.value.length;
+  const step = Math.max(1, Math.ceil(n / 8));
+  return candles.value.map((c, i) => ({
+    label: props.xFormatter ? props.xFormatter(i) : c.label,
+    x: indexToX(i),
+    i
+  })).filter((_, i) => i === 0 || i === n - 1 || i % step === 0);
+});
+function fmtPrice(value) {
+  return props.yFormatter ? props.yFormatter(value) : value.toLocaleString();
+}
+const activeIndex = ref(null);
+const pointer = ref({ x: 0, y: 0 });
+const activeCandle = computed(
+  () => activeIndex.value !== null ? candles.value[activeIndex.value] : null
+);
+const activeLayout = computed(
+  () => activeIndex.value !== null ? layouts.value[activeIndex.value] : null
+);
+function onMouseMove(e) {
+  if (props.hideTooltip) return;
+  const rect = containerRef.value.getBoundingClientRect();
+  const mx = e.clientX - rect.left;
+  const stepW = chartW.value / (candles.value.length || 1);
+  const idx = Math.floor((mx - PAD.value.left) / stepW);
+  if (idx >= 0 && idx < candles.value.length) {
+    activeIndex.value = idx;
+    pointer.value = { x: e.clientX, y: e.clientY };
+  } else {
+    activeIndex.value = null;
+  }
+}
+function onMouseLeave() {
+  activeIndex.value = null;
+}
+let ro;
+onMounted(() => {
+  if (!containerRef.value) return;
+  ro = new ResizeObserver((entries) => {
+    const cr = entries[0]?.contentRect;
+    if (cr?.width) W.value = cr.width;
+  });
+  ro.observe(containerRef.value);
+});
+onBeforeUnmount(() => ro?.disconnect());
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="vc-candlestick-chart vue-chrts"
+    @mousemove="onMouseMove"
+    @mouseleave="onMouseLeave"
+  >
+    <svg :width="W" :height="H" class="vc-candlestick-chart__svg">
+      <!-- Grid -->
+      <template v-if="yGridLine">
+        <line
+          v-for="tick in yTicks"
+          :key="`yg-${tick.price}`"
+          :x1="PAD.left"
+          :x2="PAD.left + chartW"
+          :y1="tick.y"
+          :y2="tick.y"
+          stroke="currentColor"
+          stroke-opacity="0.15"
+          stroke-dasharray="3 3"
+        />
+      </template>
+      <template v-if="xGridLine">
+        <line
+          v-for="tick in xTicks"
+          :key="`xg-${tick.i}`"
+          :x1="tick.x"
+          :x2="tick.x"
+          :y1="PAD.top"
+          :y2="PAD.top + chartH"
+          stroke="currentColor"
+          stroke-opacity="0.15"
+          stroke-dasharray="3 3"
+        />
+      </template>
+
+      <!-- Hover column highlight -->
+      <rect
+        v-if="activeLayout"
+        :x="activeLayout.x - 4"
+        :y="PAD.top"
+        :width="activeLayout.halfW * 2 + 8"
+        :height="chartH"
+        rx="4"
+        fill="currentColor"
+        fill-opacity="0.06"
+      />
+
+      <!-- Volume histogram -->
+      <template v-if="showVolume">
+        <rect
+          v-for="c in layouts"
+          :key="`vol-${c.key}`"
+          :x="c.x"
+          :y="c.volY"
+          :width="c.halfW * 2"
+          :height="c.volH"
+          :fill="c.color"
+          fill-opacity="0.25"
+          rx="1"
+        />
+      </template>
+
+      <!-- Candles -->
+      <g v-for="(c, i) in layouts" :key="c.key">
+        <line
+          :x1="c.centerX"
+          :x2="c.centerX"
+          :y1="c.wickTop"
+          :y2="c.wickBottom"
+          :stroke="c.color"
+          :stroke-width="activeIndex === i ? wickWidth + 1 : wickWidth"
+        />
+        <rect
+          :x="c.x"
+          :y="c.bodyTop"
+          :width="c.halfW * 2"
+          :height="c.bodyH"
+          :rx="Math.min(2, c.halfW / 2)"
+          :fill="c.rising ? c.color : 'var(--chart-bg, #ffffff)'"
+          :stroke="c.color"
+          :stroke-width="activeIndex === i ? 2.5 : 1.5"
+        />
+      </g>
+
+      <!-- Y axis -->
+      <template v-if="!hideYAxis">
+        <text
+          v-for="tick in yTicks"
+          :key="`yt-${tick.price}`"
+          :x="PAD.left - 8"
+          :y="tick.y"
+          text-anchor="end"
+          dominant-baseline="middle"
+          fill="currentColor"
+          opacity="0.6"
+          font-size="11"
+        >{{ fmtPrice(tick.price) }}</text>
+        <text
+          v-if="yLabel"
+          :transform="`translate(14,${PAD.top + chartH / 2}) rotate(-90)`"
+          text-anchor="middle"
+          fill="currentColor"
+          opacity="0.7"
+          font-size="12"
+        >{{ yLabel }}</text>
+      </template>
+
+      <!-- X axis -->
+      <template v-if="!hideXAxis">
+        <text
+          v-for="tick in xTicks"
+          :key="`xt-${tick.i}`"
+          :x="tick.x"
+          :y="PAD.top + chartH + (showVolume ? volumeH + VOL_GAP : 0) + 18"
+          text-anchor="middle"
+          fill="currentColor"
+          opacity="0.6"
+          font-size="11"
+        >{{ tick.label }}</text>
+        <text
+          v-if="xLabel"
+          :x="PAD.left + chartW / 2"
+          :y="H - 2"
+          text-anchor="middle"
+          fill="currentColor"
+          opacity="0.7"
+          font-size="12"
+        >{{ xLabel }}</text>
+      </template>
+    </svg>
+
+    <Teleport to="body">
+      <div
+        v-if="!hideTooltip && activeCandle"
+        class="candlestick-chart__tooltip"
+        :style="{
+  position: 'fixed',
+  left: `${pointer.x + 12}px`,
+  top: `${pointer.y}px`,
+  pointerEvents: 'none',
+  zIndex: 9999
+}"
+      >
+        <CandlestickTooltip
+          :row="activeCandle"
+          :up-color="upColor"
+          :down-color="downColor"
+          :value-formatter="yFormatter"
+        />
+      </div>
+    </Teleport>
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+import type { CandlestickChartProps } from "../types/charts.js";
+declare const __VLS_export: <T extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<CandlestickChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,21 @@
+import type { DonutChartProps } from "../types/charts.js";
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DonutChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/DonutChart.vue

@@ -0,0 +1,116 @@
+<script setup>
+import { computed } from "vue";
+import { Legend, Pie, PieChart, ResponsiveContainer, Tooltip } from "vccs";
+import ChartTooltip from "./internal/ChartTooltip.vue";
+import ChartLegend from "./internal/ChartLegend.vue";
+import { DonutType } from "../enums";
+import { categoriesToSeries } from "../utils/categories";
+import { legendPositionToLegendProps, resolveLegendWrapperStyle } from "../utils/legend";
+import { toCssProperties } from "../utils/style";
+import { themeToVars } from "../utils/theme";
+const props = defineProps({
+  data: { type: Array, required: true },
+  categories: { type: Object, required: true },
+  type: { type: String, required: false },
+  height: { type: Number, required: false },
+  radius: { type: Number, required: false },
+  arcWidth: { type: Number, required: false },
+  padAngle: { type: Number, required: false },
+  stroke: { type: String, required: false },
+  hideLegend: { type: Boolean, required: false },
+  legendPosition: { type: String, required: false },
+  legendStyle: { type: [String, Object], required: false },
+  hideTooltip: { type: Boolean, required: false },
+  tooltipTitleFormatter: { type: Function, required: false },
+  tooltip: { type: Object, required: false },
+  theme: { type: Object, required: false },
+  duration: { type: Number, required: false }
+});
+const themeVars = computed(() => themeToVars(props.theme));
+const segments = computed(() => {
+  const cats = categoriesToSeries(props.categories);
+  return props.data.map((value, i) => ({
+    name: cats[i]?.name ?? String(i),
+    value,
+    // vccs reads `fill` directly from the data entry to color each sector
+    fill: cats[i]?.color ?? `var(--chart-color-${i})`
+  }));
+});
+const DEFAULT_ARC_WIDTH = 40;
+const AUTO_OUTER_FRACTION = 0.9;
+const radii = computed(() => {
+  const arcWidth = props.arcWidth ?? DEFAULT_ARC_WIDTH;
+  if (props.radius && props.radius > 0) {
+    return {
+      outerRadius: props.radius,
+      innerRadius: Math.max(props.radius - arcWidth, 0)
+    };
+  }
+  if (props.height && props.height > 0) {
+    const bound = props.type === DonutType.Half ? props.height : props.height / 2;
+    const outerRadius2 = bound * AUTO_OUTER_FRACTION;
+    return {
+      outerRadius: outerRadius2,
+      innerRadius: Math.max(outerRadius2 - arcWidth, 0)
+    };
+  }
+  return { outerRadius: "90%", innerRadius: "60%" };
+});
+const outerRadius = computed(() => radii.value.outerRadius);
+const innerRadius = computed(() => radii.value.innerRadius);
+const angles = computed(
+  () => props.type === DonutType.Half ? { startAngle: 180, endAngle: 0 } : { startAngle: 0, endAngle: 360 }
+);
+const legend = computed(() => legendPositionToLegendProps(props.legendPosition));
+const legendWrapperStyle = computed(
+  () => resolveLegendWrapperStyle(props.legendPosition, toCssProperties(props.legendStyle))
+);
+</script>
+
+<template>
+  <div class="donut-chart vue-chrts" :style="{ position: 'relative', width: '100%', height: `${height ?? (radius ? radius * 2 : 200)}px`, ...themeVars }">
+    <ResponsiveContainer width="100%" height="100%">
+      <PieChart>
+        <Pie
+          :data="segments"
+          data-key="value"
+          name-key="name"
+          :inner-radius="innerRadius"
+          :outer-radius="outerRadius"
+          :start-angle="angles.startAngle"
+          :end-angle="angles.endAngle"
+          :padding-angle="padAngle ?? 0"
+          :stroke="stroke ?? 'none'"
+          :is-animation-active="duration !== void 0 && duration !== 0"
+        />
+        <Tooltip v-if="!hideTooltip" :content="ChartTooltip" :is-animation-active="false" />
+        <Legend
+          v-if="!hideLegend"
+          :align="legend.align"
+          :vertical-align="legend.verticalAlign"
+          :layout="legend.layout"
+          :wrapper-style="legendWrapperStyle"
+        >
+          <template #content="slotProps">
+            <ChartLegend v-bind="slotProps" />
+          </template>
+        </Legend>
+      </PieChart>
+    </ResponsiveContainer>
+
+    <!-- Centered overlay for custom content (v2 parity: default slot). -->
+    <div
+      v-if="$slots.default"
+      class="donut-chart__center"
+      :style="{
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  pointerEvents: 'none'
+}"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,21 @@
+import type { DonutChartProps } from "../types/charts.js";
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<DonutChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,19 @@
+import type { FunnelChartProps } from "../types/charts.js";
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<FunnelChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/FunnelChart.vue

@@ -0,0 +1,152 @@
+<script setup>
+import { computed, ref, useTemplateRef } from "vue";
+import {
+  Funnel,
+  FunnelChart as VccsFunnelChart,
+  LabelList,
+  Legend,
+  ResponsiveContainer,
+  Tooltip
+} from "vccs";
+import ChartTooltip from "./internal/ChartTooltip.vue";
+import ChartLegend from "./internal/ChartLegend.vue";
+import FunnelLayeredShape, {
+} from "./internal/FunnelLayeredShape.vue";
+import { categoriesToSeries } from "../utils/categories";
+import { legendPositionToLegendProps, resolveLegendWrapperStyle } from "../utils/legend";
+import { toCssProperties } from "../utils/style";
+import { themeToVars } from "../utils/theme";
+const props = defineProps({
+  data: { type: Array, required: true },
+  categories: { type: Object, required: true },
+  height: { type: Number, required: true },
+  variant: { type: String, required: false },
+  lastShapeType: { type: String, required: false },
+  showValueLabel: { type: Boolean, required: false },
+  hideLegend: { type: Boolean, required: false },
+  legendPosition: { type: String, required: false },
+  legendStyle: { type: [String, Object], required: false },
+  hideTooltip: { type: Boolean, required: false },
+  tooltipTitleFormatter: { type: Function, required: false },
+  tooltip: { type: Object, required: false },
+  theme: { type: Object, required: false },
+  duration: { type: Number, required: false }
+});
+const themeVars = computed(() => themeToVars(props.theme));
+const stages = computed(() => {
+  const cats = categoriesToSeries(props.categories);
+  return props.data.map((value, i) => ({
+    name: cats[i]?.name ?? String(i),
+    value,
+    fill: cats[i]?.color ?? `var(--chart-color-${i})`,
+    color: cats[i]?.color ?? `var(--chart-color-${i})`
+  }));
+});
+const isLayered = computed(() => props.variant === "layered");
+const layeredData = computed(() => {
+  const maxValue = stages.value[0]?.value ?? 0;
+  return stages.value.map((stage, stageIndex) => ({
+    ...stage,
+    stageIndex,
+    stageCount: stages.value.length,
+    maxValue,
+    nextValue: stages.value[stageIndex + 1]?.value ?? stage.value
+  }));
+});
+const showValueLabel = computed(() => props.showValueLabel ?? true);
+const legend = computed(() => legendPositionToLegendProps(props.legendPosition));
+const legendWrapperStyle = computed(
+  () => resolveLegendWrapperStyle(props.legendPosition, toCssProperties(props.legendStyle))
+);
+const chartContainer = useTemplateRef("chartContainer");
+const activeDatum = ref(null);
+const tooltipPosition = ref({ x: 0, y: 0 });
+function updateTooltipPosition(event) {
+  const bounds = chartContainer.value?.getBoundingClientRect();
+  if (!bounds) return;
+  tooltipPosition.value = {
+    x: Math.min(Math.max(event.clientX - bounds.left, 8), bounds.width - 8),
+    y: Math.min(Math.max(event.clientY - bounds.top, 8), bounds.height - 8)
+  };
+}
+function showTooltip(event, datum) {
+  activeDatum.value = datum;
+  updateTooltipPosition(event);
+}
+function hideTooltip() {
+  activeDatum.value = null;
+}
+</script>
+
+<template>
+  <div
+    v-if="isLayered"
+    ref="chartContainer"
+    class="vc-funnel-layered vue-chrts"
+    :style="{ height: `${height}px`, ...themeVars }"
+  >
+    <ResponsiveContainer width="100%" height="100%">
+      <VccsFunnelChart :margin="{ top: 16, right: 0, bottom: 8, left: 0 }">
+        <Funnel
+          :data="layeredData"
+          data-key="value"
+          name-key="name"
+          last-shape-type="rectangle"
+          :is-animation-active="duration !== void 0 && duration !== 0"
+        >
+          <template #shape="shapeProps">
+            <FunnelLayeredShape
+              v-bind="shapeProps"
+              @mouseenter="showTooltip"
+              @mousemove="updateTooltipPosition"
+              @mouseleave="hideTooltip"
+            />
+          </template>
+        </Funnel>
+      </VccsFunnelChart>
+    </ResponsiveContainer>
+
+    <div
+      v-if="!hideTooltip && activeDatum"
+      class="vc-funnel-layered__tooltip"
+      :style="{ left: `${tooltipPosition.x}px`, top: `${tooltipPosition.y}px` }"
+    >
+      <span
+        class="vc-funnel-layered__dot"
+        :style="{ background: activeDatum.color }"
+      />
+      <span class="vc-funnel-layered__name">{{ activeDatum.name }}</span>
+      <strong class="vc-funnel-layered__value">{{
+        activeDatum.value.toLocaleString()
+      }}</strong>
+    </div>
+  </div>
+
+  <div v-else class="vue-chrts" :style="themeVars">
+  <ResponsiveContainer width="100%" :height="height">
+    <VccsFunnelChart>
+      <Funnel
+        :data="stages"
+        data-key="value"
+        name-key="name"
+        :last-shape-type="lastShapeType ?? 'triangle'"
+        :is-animation-active="duration !== void 0 && duration !== 0"
+      >
+        <LabelList v-if="showValueLabel" data-key="value" position="right" />
+      </Funnel>
+      <Tooltip v-if="!hideTooltip" :content="ChartTooltip" :is-animation-active="false" />
+      <Legend
+        v-if="!hideLegend"
+        :align="legend.align"
+        :vertical-align="legend.verticalAlign"
+        :layout="legend.layout"
+        :wrapper-style="legendWrapperStyle"
+      >
+        <template #content="slotProps">
+          <ChartLegend v-bind="slotProps" />
+        </template>
+      </Legend>
+    </VccsFunnelChart>
+  </ResponsiveContainer>
+  </div>
+</template>