nuxt-charts 2.2.1 → 3.0.0-beta.0

package/dist/runtime/components/internal/DitherDefs.d.ts

@@ -0,0 +1,98 @@
+import { type PropType } from "vue";
+import { type DitherVariant } from "../../utils/dither.js";
+import type { GradientStop } from "../../utils/gradient.js";
+type SeriesItem = {
+    dataKey: string;
+    color: string;
+};
+/**
+ * Renders one tiling `<pattern>` of dots per series inside a `<defs>` block,
+ * for the dithered (halftone) area fill.
+ *
+ * When `fadeStops` is set, also emits a shared vertical opacity mask (and a
+ * scoped style that applies it only to `.v-charts-area-area`) so the dither
+ * dissolves toward the baseline the same way a gradient fill does — without
+ * fading the stroke, which shares attrs with the fill path in `vccs`.
+ *
+ * Like `GradientDefs`, this is a render-function component on purpose: SVG
+ * elements written in an SFC `<template>` that is not lexically nested inside
+ * an `<svg>` tag are parsed in the HTML namespace and silently dropped when
+ * placed via a component slot. Building them with `h()` sets the correct SVG
+ * namespace so `fill="url(#…)"` resolves.
+ */
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    series: {
+        type: PropType<SeriesItem[]>;
+        required: true;
+    };
+    variant: {
+        type: PropType<DitherVariant>;
+        required: true;
+    };
+    scope: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** Tile edge length in px. Smaller tiles read as a finer texture. */
+    tile: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * When set, compose the dither with a vertical opacity fade (same stops
+     * shape as `gradientStops`). Omit for a flat, full-opacity dither.
+     */
+    fadeStops: {
+        type: PropType<GradientStop[]>;
+        default: undefined;
+    };
+    /**
+     * Plot height in px. Used to size the wash gradient so it spans the chart
+     * rather than repeating with the dot tile.
+     */
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    series: {
+        type: PropType<SeriesItem[]>;
+        required: true;
+    };
+    variant: {
+        type: PropType<DitherVariant>;
+        required: true;
+    };
+    scope: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** Tile edge length in px. Smaller tiles read as a finer texture. */
+    tile: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * When set, compose the dither with a vertical opacity fade (same stops
+     * shape as `gradientStops`). Omit for a flat, full-opacity dither.
+     */
+    fadeStops: {
+        type: PropType<GradientStop[]>;
+        default: undefined;
+    };
+    /**
+     * Plot height in px. Used to size the wash gradient so it spans the chart
+     * rather than repeating with the dot tile.
+     */
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    height: number;
+    tile: number;
+    fadeStops: GradientStop[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,158 @@
+import { defineComponent, h } from "vue";
+import {
+  buildDitherPattern,
+  ditherFadeMaskId,
+  ditherId,
+  dotsId
+} from "../../utils/dither.js";
+export default defineComponent({
+  name: "DitherDefs",
+  props: {
+    series: {
+      type: Array,
+      required: true
+    },
+    variant: { type: String, required: true },
+    scope: { type: String, required: true },
+    /** Tile edge length in px. Smaller tiles read as a finer texture. */
+    tile: { type: Number, default: 8 },
+    /**
+     * When set, compose the dither with a vertical opacity fade (same stops
+     * shape as `gradientStops`). Omit for a flat, full-opacity dither.
+     */
+    fadeStops: { type: Array, default: void 0 },
+    /**
+     * Plot height in px. Used to size the wash gradient so it spans the chart
+     * rather than repeating with the dot tile.
+     */
+    height: { type: Number, default: 0 }
+  },
+  setup: (props) => () => {
+    const pattern = buildDitherPattern(props.variant, props.tile);
+    const stops = props.fadeStops;
+    const dotPatterns = props.series.map(
+      (series) => h(
+        "pattern",
+        {
+          id: dotsId(series.dataKey, props.scope),
+          key: `dots-${series.dataKey}`,
+          width: pattern.tile,
+          height: pattern.tile,
+          patternUnits: "userSpaceOnUse"
+        },
+        pattern.dots.map(
+          (dot, index) => h("circle", {
+            key: index,
+            cx: dot.cx * pattern.tile,
+            cy: dot.cy * pattern.tile,
+            r: dot.r * pattern.tile,
+            fill: series.color
+          })
+        )
+      )
+    );
+    if (!stops?.length) {
+      const aliases = props.series.map(
+        (series) => h("pattern", {
+          id: ditherId(series.dataKey, props.scope),
+          key: `alias-${series.dataKey}`,
+          width: pattern.tile,
+          height: pattern.tile,
+          patternUnits: "userSpaceOnUse",
+          href: `#${dotsId(series.dataKey, props.scope)}`
+        })
+      );
+      return h("defs", {}, [...dotPatterns, ...aliases]);
+    }
+    const height = props.height || 1;
+    const fadeMaskId = `${ditherFadeMaskId(props.scope)}-dots`;
+    const fadeGradId = `${fadeMaskId}-grad`;
+    const fadeDefs = [
+      h(
+        "linearGradient",
+        { id: fadeGradId, key: "dot-fade-grad", x1: 0, y1: 0, x2: 0, y2: 1 },
+        stops.map(
+          (stop, index) => h("stop", {
+            key: index,
+            offset: stop.offset,
+            "stop-color": "#fff",
+            // Normalise so the texture starts fully opaque and only the *shape*
+            // of the ramp is taken from the caller's stops.
+            "stop-opacity": stop.stopOpacity / (stops[0]?.stopOpacity || 1)
+          })
+        )
+      ),
+      h(
+        "mask",
+        { id: fadeMaskId, key: "dot-fade-mask", maskUnits: "userSpaceOnUse" },
+        [
+          h("rect", {
+            x: 0,
+            y: 0,
+            width: pattern.tile,
+            height,
+            fill: `url(#${fadeGradId})`
+          })
+        ]
+      )
+    ];
+    const combos = props.series.map((series) => {
+      const gradId = `${ditherId(series.dataKey, props.scope)}-wash`;
+      return h(
+        "pattern",
+        {
+          id: ditherId(series.dataKey, props.scope),
+          key: `combo-${series.dataKey}`,
+          x: 0,
+          y: 0,
+          width: pattern.tile,
+          height,
+          patternUnits: "userSpaceOnUse"
+        },
+        [
+          h("rect", {
+            key: "wash",
+            x: 0,
+            y: 0,
+            width: pattern.tile,
+            height,
+            fill: `url(#${gradId})`
+          }),
+          h("rect", {
+            key: "dots",
+            x: 0,
+            y: 0,
+            width: pattern.tile,
+            height,
+            fill: `url(#${dotsId(series.dataKey, props.scope)})`,
+            // Fade the texture on the same ramp as the wash, otherwise the dots
+            // stay at full strength and the fill never reaches the baseline.
+            mask: `url(#${fadeMaskId})`
+          })
+        ]
+      );
+    });
+    const washGradients = props.series.map(
+      (series) => h(
+        "linearGradient",
+        {
+          id: `${ditherId(series.dataKey, props.scope)}-wash`,
+          key: `wash-grad-${series.dataKey}`,
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: 1
+        },
+        stops.map(
+          (stop, index) => h("stop", {
+            key: index,
+            offset: stop.offset,
+            "stop-color": series.color,
+            "stop-opacity": stop.stopOpacity
+          })
+        )
+      )
+    );
+    return h("defs", {}, [...dotPatterns, ...washGradients, ...fadeDefs, ...combos]);
+  }
+});

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

@@ -0,0 +1,42 @@
+export type FunnelLayeredDatum = {
+    name: string;
+    value: number;
+    color: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    payload?: FunnelLayeredDatum & {
+        stageIndex: number;
+        stageCount: number;
+        maxValue: number;
+        nextValue: number;
+    };
+    parentViewBox?: {
+        x?: number;
+        y?: number;
+        width?: number;
+        height?: number;
+    };
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    mouseenter: (event: MouseEvent, payload: FunnelLayeredDatum) => any;
+    mouseleave: () => any;
+    mousemove: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    payload?: FunnelLayeredDatum & {
+        stageIndex: number;
+        stageCount: number;
+        maxValue: number;
+        nextValue: number;
+    };
+    parentViewBox?: {
+        x?: number;
+        y?: number;
+        width?: number;
+        height?: number;
+    };
+}> & Readonly<{
+    onMouseenter?: ((event: MouseEvent, payload: FunnelLayeredDatum) => any) | undefined;
+    onMouseleave?: (() => any) | undefined;
+    onMousemove?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,124 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  payload: { type: Object, required: false },
+  parentViewBox: { type: Object, required: false }
+});
+const emit = defineEmits(["mouseenter", "mousemove", "mouseleave"]);
+const geometry = computed(() => {
+  if (!props.payload) return null;
+  const { x = 0, y = 0, width = 0, height = 0 } = props.parentViewBox ?? {};
+  const segmentWidth = width / props.payload.stageCount;
+  const startX = x + segmentWidth * props.payload.stageIndex;
+  const endX = startX + segmentWidth;
+  const centerY = y + height * 0.54;
+  const maxHalfHeight = height * 0.31;
+  const startRatio = props.payload.maxValue > 0 ? props.payload.value / props.payload.maxValue : 0;
+  const endRatio = props.payload.stageIndex === props.payload.stageCount - 1 ? startRatio : Math.max(0, props.payload.nextValue / props.payload.maxValue);
+  const percentage = Math.round(startRatio * 100);
+  const path = (scale) => {
+    const startHalfHeight = maxHalfHeight * startRatio * scale;
+    const endHalfHeight = maxHalfHeight * endRatio * scale;
+    const controlOffset = segmentWidth * 0.55;
+    return [
+      `M ${startX} ${centerY - startHalfHeight}`,
+      `C ${startX + controlOffset} ${centerY - startHalfHeight}`,
+      `${endX - controlOffset} ${centerY - endHalfHeight}`,
+      `${endX} ${centerY - endHalfHeight}`,
+      `L ${endX} ${centerY + endHalfHeight}`,
+      `C ${endX - controlOffset} ${centerY + endHalfHeight}`,
+      `${startX + controlOffset} ${centerY + startHalfHeight}`,
+      `${startX} ${centerY + startHalfHeight}`,
+      "Z"
+    ].join(" ");
+  };
+  return {
+    badgeWidth: percentage === 100 ? 70 : 58,
+    bottomLabelY: y + height - 16,
+    centerY,
+    dividerStartY: centerY - maxHalfHeight * startRatio * 1.14,
+    dividerEndY: centerY + maxHalfHeight * startRatio * 1.14,
+    middleX: startX + segmentWidth / 2,
+    path,
+    percentage,
+    startX,
+    topLabelY: y + 30
+  };
+});
+function handleMouseenter(event) {
+  if (props.payload) emit("mouseenter", event, props.payload);
+}
+</script>
+
+<script>
+export default { name: "FunnelLayeredShape" };
+</script>
+
+<template>
+  <g
+    v-if="payload && geometry"
+    class="vc-funnel-layered-shape"
+    @mouseenter="handleMouseenter"
+    @mousemove="emit('mousemove', $event)"
+    @mouseleave="emit('mouseleave')"
+  >
+    <path :d="geometry.path(1.14)" :fill="payload.color" opacity="0.22" />
+    <path :d="geometry.path(1.07)" :fill="payload.color" opacity="0.5" />
+    <path :d="geometry.path(1)" :fill="payload.color" opacity="0.9" />
+
+    <line
+      v-if="payload.stageIndex > 0"
+      :x1="geometry.startX"
+      :x2="geometry.startX"
+      :y1="geometry.dividerStartY"
+      :y2="geometry.dividerEndY"
+      :stroke="`hsl(var(--background, 0 0% 100%))`"
+      :stroke-width="5"
+    />
+
+    <text
+      :x="geometry.middleX"
+      :y="geometry.topLabelY"
+      :fill="`hsl(var(--foreground, 222.2 84% 4.9%))`"
+      :font-size="16"
+      :font-weight="700"
+      text-anchor="middle"
+    >
+      {{ payload.value.toLocaleString() }}
+    </text>
+
+    <rect
+      :x="geometry.middleX - geometry.badgeWidth / 2"
+      :y="geometry.centerY - 15"
+      :width="geometry.badgeWidth"
+      :height="30"
+      :rx="15"
+      :fill="`hsl(var(--background, 0 0% 100%))`"
+      fill-opacity="0.82"
+      :stroke="`hsl(var(--border, 214.3 31.8% 91.4%))`"
+      stroke-opacity="0.7"
+      :stroke-width="1"
+    />
+    <text
+      :x="geometry.middleX"
+      :y="geometry.centerY + 5"
+      :fill="`hsl(var(--foreground, 222.2 84% 4.9%))`"
+      :font-size="14"
+      :font-weight="600"
+      text-anchor="middle"
+    >
+      {{ geometry.percentage }}%
+    </text>
+
+    <text
+      :x="geometry.middleX"
+      :y="geometry.bottomLabelY"
+      :fill="`hsl(var(--muted-foreground, 215.4 16.3% 46.9%))`"
+      :font-size="15"
+      :font-weight="500"
+      text-anchor="middle"
+    >
+      {{ payload.name }}
+    </text>
+  </g>
+</template>

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

@@ -0,0 +1,42 @@
+export type FunnelLayeredDatum = {
+    name: string;
+    value: number;
+    color: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    payload?: FunnelLayeredDatum & {
+        stageIndex: number;
+        stageCount: number;
+        maxValue: number;
+        nextValue: number;
+    };
+    parentViewBox?: {
+        x?: number;
+        y?: number;
+        width?: number;
+        height?: number;
+    };
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    mouseenter: (event: MouseEvent, payload: FunnelLayeredDatum) => any;
+    mouseleave: () => any;
+    mousemove: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    payload?: FunnelLayeredDatum & {
+        stageIndex: number;
+        stageCount: number;
+        maxValue: number;
+        nextValue: number;
+    };
+    parentViewBox?: {
+        x?: number;
+        y?: number;
+        width?: number;
+        height?: number;
+    };
+}> & Readonly<{
+    onMouseenter?: ((event: MouseEvent, payload: FunnelLayeredDatum) => any) | undefined;
+    onMouseleave?: (() => any) | undefined;
+    onMousemove?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/internal/GradientDefs.d.ts

@@ -0,0 +1,46 @@
+import { type PropType } from "vue";
+import { type GradientStop } from "../../utils/gradient.js";
+type SeriesItem = {
+    dataKey: string;
+    color: string;
+};
+/**
+ * Renders one vertical `<linearGradient>` per series inside a `<defs>` block.
+ *
+ * This is a render-function component on purpose: SVG elements like
+ * `<linearGradient>` / `<stop>` written in an SFC `<template>` that is *not*
+ * lexically nested inside an `<svg>` tag are parsed in the HTML namespace and
+ * silently dropped when placed via a component slot. Building them with `h()`
+ * sets the correct SVG namespace so the gradient — and therefore the
+ * `fill="url(#…)"` reference on each area — resolves.
+ */
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    series: {
+        type: PropType<SeriesItem[]>;
+        required: true;
+    };
+    stops: {
+        type: PropType<GradientStop[]>;
+        required: true;
+    };
+    scope: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    series: {
+        type: PropType<SeriesItem[]>;
+        required: true;
+    };
+    stops: {
+        type: PropType<GradientStop[]>;
+        required: true;
+    };
+    scope: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,38 @@
+import { defineComponent, h } from "vue";
+import { gradientId } from "../../utils/gradient.js";
+export default defineComponent({
+  name: "GradientDefs",
+  props: {
+    series: {
+      type: Array,
+      required: true
+    },
+    stops: { type: Array, required: true },
+    scope: { type: String, required: true }
+  },
+  setup: (props) => () => h(
+    "defs",
+    {},
+    props.series.map(
+      (series) => h(
+        "linearGradient",
+        {
+          id: gradientId(series.dataKey, props.scope),
+          key: series.dataKey,
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: 1
+        },
+        props.stops.map(
+          (stop, index) => h("stop", {
+            key: index,
+            offset: stop.offset,
+            "stop-color": series.color,
+            "stop-opacity": stop.stopOpacity
+          })
+        )
+      )
+    )
+  )
+});

package/dist/runtime/enums.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Public enums, preserved from `nuxt-charts` v2 for API compatibility.
+ *
+ * These are real TS `enum`s so the IDE surfaces member options on `.` and
+ * string-literal completion in templates. Each value maps to a `vccs`
+ * primitive via the typed lookup tables in `./utils`.
+ */
+/**
+ * Position of the chart legend.
+ *
+ * Translated to `vccs` `<Legend>` `align` / `verticalAlign` / `layout`
+ * via {@link import('./utils/legend').legendPositionToLegendProps}.
+ */
+export declare enum LegendPosition {
+    TopLeft = "top-left",
+    TopCenter = "top-center",
+    TopRight = "top-right",
+    BottomLeft = "bottom-left",
+    BottomCenter = "bottom-center",
+    BottomRight = "bottom-right"
+}
+/**
+ * Curve interpolation used to connect data points in line / area charts.
+ *
+ * Translated to the `vccs` curve `type` string union via
+ * {@link import('./utils/curve').curveTypeToVccs}.
+ */
+export declare enum CurveType {
+    Basis = "basis",
+    BasisClosed = "basisClosed",
+    BasisOpen = "basisOpen",
+    Bundle = "bundle",
+    Cardinal = "cardinal",
+    CardinalClosed = "cardinalClosed",
+    CardinalOpen = "cardinalOpen",
+    CatmullRom = "catmullRom",
+    CatmullRomClosed = "catmullRomClosed",
+    CatmullRomOpen = "catmullRomOpen",
+    Linear = "linear",
+    LinearClosed = "linearClosed",
+    MonotoneX = "monotoneX",
+    MonotoneY = "monotoneY",
+    Natural = "natural",
+    Step = "step",
+    StepAfter = "stepAfter",
+    StepBefore = "stepBefore"
+}
+/**
+ * Orientation of a bar chart's bars.
+ *
+ * Maps to the `vccs` chart container `layout` prop.
+ */
+export declare enum Orientation {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+/**
+ * Shape of a donut / pie chart.
+ *
+ * `Full` renders a complete ring; `Half` renders a semicircle gauge.
+ */
+export declare enum DonutType {
+    Half = "half",
+    Full = "full"
+}

package/dist/runtime/enums.js

@@ -0,0 +1,40 @@
+export var LegendPosition = /* @__PURE__ */ ((LegendPosition2) => {
+  LegendPosition2["TopLeft"] = "top-left";
+  LegendPosition2["TopCenter"] = "top-center";
+  LegendPosition2["TopRight"] = "top-right";
+  LegendPosition2["BottomLeft"] = "bottom-left";
+  LegendPosition2["BottomCenter"] = "bottom-center";
+  LegendPosition2["BottomRight"] = "bottom-right";
+  return LegendPosition2;
+})(LegendPosition || {});
+export var CurveType = /* @__PURE__ */ ((CurveType2) => {
+  CurveType2["Basis"] = "basis";
+  CurveType2["BasisClosed"] = "basisClosed";
+  CurveType2["BasisOpen"] = "basisOpen";
+  CurveType2["Bundle"] = "bundle";
+  CurveType2["Cardinal"] = "cardinal";
+  CurveType2["CardinalClosed"] = "cardinalClosed";
+  CurveType2["CardinalOpen"] = "cardinalOpen";
+  CurveType2["CatmullRom"] = "catmullRom";
+  CurveType2["CatmullRomClosed"] = "catmullRomClosed";
+  CurveType2["CatmullRomOpen"] = "catmullRomOpen";
+  CurveType2["Linear"] = "linear";
+  CurveType2["LinearClosed"] = "linearClosed";
+  CurveType2["MonotoneX"] = "monotoneX";
+  CurveType2["MonotoneY"] = "monotoneY";
+  CurveType2["Natural"] = "natural";
+  CurveType2["Step"] = "step";
+  CurveType2["StepAfter"] = "stepAfter";
+  CurveType2["StepBefore"] = "stepBefore";
+  return CurveType2;
+})(CurveType || {});
+export var Orientation = /* @__PURE__ */ ((Orientation2) => {
+  Orientation2["Horizontal"] = "horizontal";
+  Orientation2["Vertical"] = "vertical";
+  return Orientation2;
+})(Orientation || {});
+export var DonutType = /* @__PURE__ */ ((DonutType2) => {
+  DonutType2["Half"] = "half";
+  DonutType2["Full"] = "full";
+  return DonutType2;
+})(DonutType || {});