nuxt-charts 2.2.1 → 3.0.0-beta.1

package/dist/runtime/components/internal/CartesianFrame.d.vue.ts

@@ -0,0 +1,40 @@
+/**
+ * Shared scaffolding for the cartesian charts (area, bar, line, bubble).
+ *
+ * Renders the responsive container, the supplied `vccs` chart container, the
+ * grid, axes, tooltip and legend from the v2 config props — leaving the series
+ * (`<Area>` / `<Bar>` / `<Line>` / `<Scatter>`) to the default slot. This keeps
+ * every chart adapter small and the axis/legend/tooltip wiring in one place.
+ */
+import { type Component } from "vue";
+import type { CartesianChartBaseProps } from "../../types/charts.js";
+import type { Orientation } from "../../enums.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<CartesianChartBaseProps<T> & {
+        /** The `vccs` chart container component to render (AreaChart, BarChart, …). */
+        container: Component;
+        /** Extra props forwarded to the `vccs` chart container. */
+        containerProps?: Record<string, unknown>;
+        /** Data key for the category (x) axis. */
+        xAxisKey?: string;
+        /** Bar/area orientation; drives the container `layout`. */
+        orientation?: Orientation;
+    }> & (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/internal/CartesianFrame.vue

@@ -0,0 +1,321 @@
+<script setup>
+import { computed, h } from "vue";
+import {
+  CartesianGrid,
+  Legend,
+  ReferenceLine,
+  Tooltip,
+  XAxis,
+  YAxis
+} from "vccs";
+import ChartContainer from "./ChartContainer";
+import { legendPositionToLegendProps, resolveLegendWrapperStyle } from "../../utils/legend";
+import {
+  AXIS_TICK_MARGIN,
+  resolveAxisProps,
+  resolveYAxes,
+  resolveXAxisHeight,
+  resolveYAxisWidth,
+  toAxisLabel,
+  toTickFormatter,
+  toTickProp
+} from "../../utils/axis";
+import { categoriesToSeries } from "../../utils/categories";
+import { toAxisDomain, toCssProperties } from "../../utils/style";
+import { axisTickVars, resolveHoverRadius, resolveHoverVisible, themeToVars } from "../../utils/theme";
+import ChartTooltip from "./ChartTooltip.vue";
+import ChartLegend from "./ChartLegend.vue";
+const props = defineProps({
+  data: { type: Array, required: true },
+  height: { type: Number, required: true },
+  xLabel: { type: String, required: false },
+  yLabel: { type: String, required: false },
+  padding: { type: Object, required: false },
+  categories: { type: Object, required: true },
+  xFormatter: { type: Function, required: false },
+  yFormatter: { type: Function, required: false },
+  tooltipTitleFormatter: { type: Function, required: false },
+  xNumTicks: { type: Number, required: false },
+  yNumTicks: { type: Number, required: false },
+  hideLegend: { type: Boolean, required: false },
+  hideTooltip: { type: Boolean, required: false },
+  legendPosition: { type: String, required: false },
+  legendStyle: { type: [String, Object], required: false },
+  xDomainLine: { type: Boolean, required: false },
+  yDomainLine: { type: Boolean, required: false },
+  xTickLine: { type: Boolean, required: false },
+  yTickLine: { type: Boolean, required: false },
+  xGridLine: { type: Boolean, required: false },
+  yGridLine: { type: Boolean, required: false },
+  hideXAxis: { type: Boolean, required: false },
+  hideYAxis: { type: Boolean, required: false },
+  xDomain: { type: Array, required: false },
+  yDomain: { type: Array, required: false },
+  duration: { type: Number, required: false },
+  xAxisConfig: { type: Object, required: false },
+  yAxisConfig: { type: Object, required: false },
+  yAxes: { type: Object, required: false },
+  tooltip: { type: Object, required: false },
+  referenceLines: { type: Array, required: false },
+  syncId: { type: String, required: false },
+  minMaxTicksOnly: { type: Boolean, required: false },
+  xExplicitTicks: { type: Array, required: false },
+  yExplicitTicks: { type: Array, required: false },
+  crosshairConfig: { type: Object, required: false },
+  theme: { type: Object, required: false },
+  container: { type: null, required: true },
+  containerProps: { type: Object, required: false },
+  xAxisKey: { type: String, required: false },
+  orientation: { type: String, required: false }
+});
+const legend = computed(() => legendPositionToLegendProps(props.legendPosition));
+const showXGrid = computed(() => props.xGridLine ?? true);
+const showYGrid = computed(() => props.yGridLine ?? true);
+const categoryIndexByValue = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  if (props.xAxisKey === void 0) return map;
+  props.data.forEach((row, i) => {
+    map.set(row[props.xAxisKey], i);
+  });
+  return map;
+});
+function withCategoryIndex(fn) {
+  if (!fn || props.xAxisKey === void 0) return fn;
+  return (value, index) => {
+    const i = categoryIndexByValue.value.get(value);
+    return fn(i ?? value, i ?? index);
+  };
+}
+const layout = computed(
+  () => props.orientation === "horizontal" ? "vertical" : "horizontal"
+);
+const rawXFormatter = computed(
+  () => toTickFormatter(props.xFormatter ?? props.xAxisConfig?.tickFormat)
+);
+const rawYFormatter = computed(
+  () => toTickFormatter(props.yFormatter ?? props.yAxisConfig?.tickFormat)
+);
+const categoryFormatter = computed(
+  () => withCategoryIndex(layout.value === "vertical" ? rawYFormatter.value : rawXFormatter.value)
+);
+const valueFormatter = computed(
+  () => layout.value === "vertical" ? rawXFormatter.value : rawYFormatter.value
+);
+const xAxisDomain = computed(() => toAxisDomain(props.xDomain));
+const yAxisDomain = computed(() => toAxisDomain(props.yDomain));
+const legendWrapperStyle = computed(
+  () => resolveLegendWrapperStyle(props.legendPosition, toCssProperties(props.legendStyle))
+);
+const xAxis = computed(
+  () => resolveAxisProps(props.xExplicitTicks, props.xAxisConfig, props.minMaxTicksOnly)
+);
+const yAxis = computed(
+  () => resolveAxisProps(props.yExplicitTicks, props.yAxisConfig, props.minMaxTicksOnly)
+);
+const showXTickLine = computed(() => props.xAxisConfig?.tickLine ?? props.xTickLine ?? false);
+const showYTickLine = computed(() => props.yAxisConfig?.tickLine ?? props.yTickLine ?? false);
+const xAxisTitle = computed(
+  () => toAxisLabel(layout.value === "vertical" ? props.yLabel : props.xLabel, "insideBottom")
+);
+const yAxisTitle = computed(
+  () => toAxisLabel(layout.value === "vertical" ? props.xLabel : props.yLabel, "insideLeft", {
+    angle: -90
+  })
+);
+const isCategoryYAxis = computed(
+  () => layout.value === "vertical" && props.xAxisKey !== void 0
+);
+const xAxisHeight = computed(() => resolveXAxisHeight({ hasTitle: !!xAxisTitle.value }));
+const yAxisWidth = computed(
+  () => resolveYAxisWidth({ hasTitle: !!yAxisTitle.value, isCategoryAxis: isCategoryYAxis.value })
+);
+const rootStyle = computed(() => ({
+  ...themeToVars(props.theme),
+  ...axisTickVars("x", xAxis.value.tick),
+  ...axisTickVars("y", yAxis.value.tick)
+}));
+const xTickProp = computed(() => toTickProp(xAxis.value.tick));
+const yTickProp = computed(() => toTickProp(yAxis.value.tick));
+const gridStroke = "var(--vc-grid-color)";
+const axisLineStyle = { stroke: "var(--vc-axis-line-color)" };
+const tickLineStyle = { stroke: "var(--vc-axis-line-color)" };
+const cursor = computed(
+  () => resolveHoverVisible(props.theme) ? {
+    fill: "var(--vc-hover-fill)",
+    stroke: "var(--vc-hover-stroke)",
+    radius: resolveHoverRadius(props.theme)
+  } : false
+);
+const xAxisLine = computed(() => props.xDomainLine ?? true ? axisLineStyle : false);
+const yAxisLine = computed(() => props.yDomainLine ?? true ? axisLineStyle : false);
+const xTickLineProp = computed(() => showXTickLine.value ? tickLineStyle : false);
+const yTickLineProp = computed(() => showYTickLine.value ? tickLineStyle : false);
+const mergedContainerProps = computed(() => ({
+  data: props.data,
+  layout: layout.value,
+  syncId: props.syncId,
+  ...props.containerProps
+}));
+const referenceLines = computed(() => props.referenceLines ?? []);
+const SMALL_CATEGORY_AXIS_MAX = 12;
+function resolveCategoryAxisInterval(configured, isCategoryAxis) {
+  if (configured !== void 0) return configured;
+  if (isCategoryAxis && props.data.length <= SMALL_CATEGORY_AXIS_MAX) return 0;
+  return void 0;
+}
+const xAxisInterval = computed(
+  () => resolveCategoryAxisInterval(
+    layout.value === "vertical" ? yAxis.value.interval : xAxis.value.interval,
+    layout.value !== "vertical" && props.xAxisKey !== void 0
+  )
+);
+const yAxisInterval = computed(
+  () => resolveCategoryAxisInterval(
+    layout.value === "vertical" ? xAxis.value.interval : yAxis.value.interval,
+    layout.value === "vertical" && props.xAxisKey !== void 0
+  )
+);
+const tooltipContent = computed(() => {
+  const formatLabel = categoryFormatter.value;
+  const titleFormatter = props.tooltipTitleFormatter;
+  return (tooltipProps) => {
+    let label = tooltipProps.label;
+    const row = tooltipProps.payload?.[0]?.payload;
+    if (titleFormatter && row != null) {
+      label = titleFormatter(row);
+    } else if (formatLabel != null && label !== void 0 && label !== "") {
+      const rowIndex = row != null ? props.data.indexOf(row) : -1;
+      const index = rowIndex >= 0 ? rowIndex : typeof label === "number" ? label : Number(label);
+      label = formatLabel(label, Number.isNaN(index) ? 0 : index);
+    }
+    return h(ChartTooltip, { ...tooltipProps, label });
+  };
+});
+const resolvedYAxes = computed(() => {
+  if (props.hideYAxis || layout.value === "vertical") return [];
+  return resolveYAxes({
+    series: categoriesToSeries(props.categories),
+    yAxes: props.yAxes,
+    minMaxTicksOnly: props.minMaxTicksOnly,
+    primary: {
+      ...yAxis.value,
+      label: props.yLabel,
+      domain: yAxisDomain.value,
+      tickCount: props.yNumTicks,
+      tickFormatter: valueFormatter.value,
+      tickLine: showYTickLine.value,
+      hide: false
+    }
+  });
+});
+</script>
+
+<template>
+  <div class="vue-chrts" :style="rootStyle">
+  <ChartContainer width="100%" :height="height">
+    <component :is="container" v-bind="mergedContainerProps">
+      <CartesianGrid
+        v-if="showXGrid || showYGrid"
+        :horizontal="showYGrid"
+        :vertical="showXGrid"
+        :stroke="gridStroke"
+        stroke-dasharray="var(--vc-grid-dash)"
+        :stroke-width="'var(--vc-grid-width)'"
+      />
+      <!--
+        Horizontal orientation: vccs uses layout="vertical" which swaps the axes.
+        The category (dataKey) axis becomes YAxis; the value axis becomes XAxis.
+      -->
+      <XAxis
+        v-if="!hideXAxis"
+        :data-key="layout === 'vertical' ? void 0 : xAxisKey"
+        :hide="hideXAxis"
+        :height="xAxisHeight"
+        :tick="xTickProp"
+        :tick-margin="AXIS_TICK_MARGIN.x"
+        :tick-line="xTickLineProp"
+        :axis-line="xAxisLine"
+        :tick-count="layout === 'vertical' ? yNumTicks : xNumTicks"
+        :tick-formatter="layout === 'vertical' ? valueFormatter : categoryFormatter"
+        :domain="layout === 'vertical' ? yAxisDomain : xAxisDomain"
+        :ticks="layout === 'vertical' ? yAxis.ticks : xAxis.ticks"
+        :interval="layout === 'vertical' ? yAxisInterval : xAxisInterval"
+        :label="xAxisTitle"
+        :type="layout === 'vertical' ? 'number' : 'category'"
+      />
+      <!--
+        Horizontal orientation keeps the single swapped category y-axis; only
+        the standard layout supports several value axes (one per `yAxes` id).
+      -->
+      <!-- Horizontal orientation (layout="vertical"): the single swapped category y-axis. -->
+      <YAxis
+        v-if="!hideYAxis && layout === 'vertical'"
+        :data-key="xAxisKey"
+        :width="yAxisWidth"
+        :tick="yTickProp"
+        :tick-margin="AXIS_TICK_MARGIN.y"
+        :tick-line="yTickLineProp"
+        :axis-line="yAxisLine"
+        :tick-count="xNumTicks"
+        :tick-formatter="categoryFormatter"
+        :domain="xAxisDomain"
+        :ticks="xAxis.ticks"
+        :interval="xAxisInterval"
+        :label="yAxisTitle"
+        type="category"
+      />
+      <!-- Standard layout: one value axis per resolved `yAxes` id (shared cutover styling). -->
+      <YAxis
+        v-for="axis in resolvedYAxes"
+        :key="axis.id"
+        :y-axis-id="axis.id"
+        :orientation="axis.orientation"
+        :hide="axis.hide"
+        :width="yAxisWidth"
+        :tick="toTickProp(axis.tick)"
+        :tick-margin="AXIS_TICK_MARGIN.y"
+        :tick-line="axis.tickLine ? yTickLineProp : false"
+        :axis-line="yAxisLine"
+        :tick-count="axis.tickCount"
+        :tick-formatter="axis.tickFormatter"
+        :domain="axis.domain"
+        :ticks="axis.ticks"
+        :interval="axis.interval"
+        :label="toAxisLabel(axis.label, axis.orientation === 'right' ? 'insideRight' : 'insideLeft', { angle: axis.orientation === 'right' ? 90 : -90 })"
+        type="number"
+      />
+
+      <slot />
+
+      <ReferenceLine
+        v-for="(line, i) in referenceLines"
+        :key="i"
+        :x="line.x"
+        :y="line.y"
+        :stroke="line.color ?? '#888'"
+        :stroke-width="line.strokeWidth ?? 1"
+        :stroke-dasharray="line.strokeDasharray"
+        :label="line.label"
+      />
+
+      <Tooltip
+        v-if="!hideTooltip"
+        :content="tooltipContent"
+        :cursor="cursor"
+        :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>
+    </component>
+  </ChartContainer>
+  </div>
+</template>

package/dist/runtime/components/internal/CartesianFrame.vue.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Shared scaffolding for the cartesian charts (area, bar, line, bubble).
+ *
+ * Renders the responsive container, the supplied `vccs` chart container, the
+ * grid, axes, tooltip and legend from the v2 config props — leaving the series
+ * (`<Area>` / `<Bar>` / `<Line>` / `<Scatter>`) to the default slot. This keeps
+ * every chart adapter small and the axis/legend/tooltip wiring in one place.
+ */
+import { type Component } from "vue";
+import type { CartesianChartBaseProps } from "../../types/charts.js";
+import type { Orientation } from "../../enums.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<CartesianChartBaseProps<T> & {
+        /** The `vccs` chart container component to render (AreaChart, BarChart, …). */
+        container: Component;
+        /** Extra props forwarded to the `vccs` chart container. */
+        containerProps?: Record<string, unknown>;
+        /** Data key for the category (x) axis. */
+        xAxisKey?: string;
+        /** Bar/area orientation; drives the container `layout`. */
+        orientation?: Orientation;
+    }> & (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/internal/ChartContainer.d.ts

@@ -0,0 +1,91 @@
+import { type PropType, type VNode } from "vue";
+type Size = number | string;
+/**
+ * Drop-in replacement for `vccs`' `ResponsiveContainer`.
+ *
+ * Upstream renders children through `resolveDynamicComponent(() => renderChildren())`,
+ * which produces a new component type every render and so unmounts + remounts the
+ * whole chart subtree. Charts that dispatch on `mouseenter` (radial bar, radar) then
+ * loop forever — remount recreates the `<path>` under the cursor, which refires
+ * `mouseenter` — and freeze the tab. Rendering the cloned children directly keeps
+ * the subtree stable.
+ */
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    width: {
+        type: PropType<Size>;
+        default: string;
+    };
+    height: {
+        type: PropType<Size>;
+        default: string;
+    };
+    aspect: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    minWidth: {
+        type: PropType<Size>;
+        default: number;
+    };
+    minHeight: {
+        type: PropType<Size>;
+        default: undefined;
+    };
+    maxHeight: {
+        type: PropType<Size>;
+        default: undefined;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onResize: {
+        type: PropType<(width: number, height: number) => void>;
+        default: undefined;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    width: {
+        type: PropType<Size>;
+        default: string;
+    };
+    height: {
+        type: PropType<Size>;
+        default: string;
+    };
+    aspect: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    minWidth: {
+        type: PropType<Size>;
+        default: number;
+    };
+    minHeight: {
+        type: PropType<Size>;
+        default: undefined;
+    };
+    maxHeight: {
+        type: PropType<Size>;
+        default: undefined;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onResize: {
+        type: PropType<(width: number, height: number) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    width: Size;
+    height: Size;
+    aspect: number;
+    minWidth: Size;
+    minHeight: Size;
+    maxHeight: Size;
+    id: string;
+    onResize: (width: number, height: number) => void;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/internal/ChartContainer.js

@@ -0,0 +1,111 @@
+import {
+  cloneVNode,
+  computed,
+  defineComponent,
+  Fragment,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref
+} from "vue";
+const isPercent = (value) => typeof value === "string" && value.endsWith("%");
+const toCssSize = (value) => value == null ? void 0 : typeof value === "number" ? `${value}px` : value;
+function flatten(vnodes) {
+  const result = [];
+  for (const vnode of vnodes) {
+    if (vnode.type === Fragment && Array.isArray(vnode.children))
+      result.push(...flatten(vnode.children));
+    else result.push(vnode);
+  }
+  return result;
+}
+export default defineComponent({
+  name: "ChartContainer",
+  inheritAttrs: false,
+  props: {
+    width: { type: [Number, String], default: "100%" },
+    height: { type: [Number, String], default: "100%" },
+    aspect: { type: Number, default: void 0 },
+    minWidth: { type: [Number, String], default: 0 },
+    minHeight: { type: [Number, String], default: void 0 },
+    maxHeight: { type: [Number, String], default: void 0 },
+    id: { type: String, default: void 0 },
+    onResize: { type: Function, default: void 0 }
+  },
+  setup(props, { slots }) {
+    const containerRef = ref();
+    const sizes = ref({ width: -1, height: -1 });
+    const calculatedWidth = computed(
+      () => isPercent(props.width) ? sizes.value.width : Number(props.width)
+    );
+    const calculatedHeight = computed(() => {
+      if (props.aspect && props.aspect > 0 && (props.height == null || props.height === "auto"))
+        return calculatedWidth.value / props.aspect;
+      return isPercent(props.height) ? sizes.value.height : Number(props.height);
+    });
+    const finalWidth = computed(() => {
+      if (props.aspect && props.aspect > 0 && (props.width == null || props.width === "auto"))
+        return calculatedHeight.value * props.aspect;
+      return calculatedWidth.value;
+    });
+    const isReady = computed(() => sizes.value.width >= 0 && sizes.value.height >= 0);
+    const containerStyle = computed(() => ({
+      width: toCssSize(props.width),
+      height: toCssSize(props.height),
+      minWidth: toCssSize(props.minWidth),
+      minHeight: toCssSize(props.minHeight),
+      maxHeight: toCssSize(props.maxHeight)
+    }));
+    function setSize(width, height) {
+      const next = { width: Math.round(width), height: Math.round(height) };
+      if (next.width === sizes.value.width && next.height === sizes.value.height) return;
+      sizes.value = next;
+      props.onResize?.(next.width, next.height);
+    }
+    let observer = null;
+    onMounted(() => {
+      const el = containerRef.value;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      setSize(rect.width, rect.height);
+      observer = new ResizeObserver((entries) => {
+        const { width, height } = entries[0].contentRect;
+        setSize(width, height);
+      });
+      observer.observe(el);
+    });
+    onBeforeUnmount(() => {
+      observer?.disconnect();
+      observer = null;
+    });
+    function renderChildren() {
+      if (!isReady.value) return [];
+      const raw = slots.default?.();
+      if (!raw) return [];
+      return flatten(raw).map(
+        (child, index) => cloneVNode(child, {
+          width: finalWidth.value,
+          height: calculatedHeight.value,
+          key: child.key || `chart-container-child-${index}`,
+          style: {
+            maxWidth: `${sizes.value.width}px`,
+            maxHeight: `${sizes.value.height}px`,
+            width: "100%",
+            height: "100%",
+            ...child.props?.style
+          }
+        })
+      );
+    }
+    return () => h(
+      "div",
+      {
+        id: props.id,
+        ref: containerRef,
+        class: "vcharts-responsive-container",
+        style: containerStyle.value
+      },
+      renderChildren()
+    );
+  }
+});

package/dist/runtime/components/internal/ChartLegend.d.vue.ts

@@ -0,0 +1,11 @@
+interface LegendItem {
+    value: string;
+    color?: string;
+    inactive?: boolean;
+}
+type __VLS_Props = {
+    payload?: LegendItem[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/internal/ChartLegend.vue

@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  payload: { type: Array, required: false }
+});
+</script>
+
+<template>
+  <ul class="vc-legend">
+    <li
+      v-for="item in payload"
+      :key="item.value"
+      class="vc-legend__item"
+      :class="{ 'vc-legend__item--inactive': item.inactive }"
+    >
+      <span
+        class="vc-legend__dot"
+        :style="{ background: item.color }"
+      />
+      <span class="vc-legend__label">{{ item.value }}</span>
+    </li>
+  </ul>
+</template>

package/dist/runtime/components/internal/ChartLegend.vue.d.ts

@@ -0,0 +1,11 @@
+interface LegendItem {
+    value: string;
+    color?: string;
+    inactive?: boolean;
+}
+type __VLS_Props = {
+    payload?: LegendItem[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/internal/ChartTooltip.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;