@primeui/vue-chart 0.0.1-alpha.1 → 1.0.0-rc.1

package/dist/chunks/chunk-3X27K5XC.mjs

@@ -0,0 +1,236 @@
+import { useCartesianFrame, useCartesianFrameRegistration } from './chunk-I2BWSDNR.mjs';
+import { useChartMethods, useChartState, useChartHover } from './chunk-QOWKMWNO.mjs';
+import { defineComponent, computed, unref, openBlock, createElementBlock, Fragment, createElementVNode, renderList, createBlock, createCommentVNode, ref, watch, onUnmounted, createVNode } from 'vue';
+import { renderHeatmapAxesSvg } from '@primeui/chart-core';
+import { createHeatmapRendererCanvas } from '@primeui/chart-core/series/heatmap/controller-canvas';
+import { createHeatmapRendererSvg } from '@primeui/chart-core/series/heatmap/controller-svg';
+
+function useHeatmapRenderer(options) {
+  const { chartArea, renderer, canvasEl, datasets, axes, datasetVisibility, hover, hoverConfig, chartId, width, height, features, compositor, globalFont, theme } = options;
+  const groupRef = ref(null);
+  const gridGroupRef = ref(null);
+  const axisGroupRef = ref(null);
+  const controller = renderer === "canvas" ? createHeatmapRendererCanvas() : createHeatmapRendererSvg();
+  const versionRef = ref(0);
+  controller.onFrame = () => {
+    versionRef.value++;
+  };
+  const scaleResult = computed(() => {
+    void versionRef.value;
+    return controller.scaleResult;
+  });
+  const axisLayoutsComputed = computed(() => {
+    void versionRef.value;
+    return controller.axisLayouts;
+  });
+  watch(
+    [datasets, datasetVisibility, chartArea, axes, features, width, height, groupRef, gridGroupRef, axisGroupRef, options.locale, theme],
+    () => {
+      controller.update({
+        datasets: datasets.value,
+        datasetVisibility: datasetVisibility.value,
+        chartArea: chartArea.value,
+        chartId,
+        width: width.value,
+        height: height.value,
+        renderer,
+        axes: axes.value,
+        features: features.value,
+        hover: hover.value,
+        hoverConfig: hoverConfig.value,
+        compositor,
+        canvasEl: canvasEl.value,
+        svgGroup: groupRef.value,
+        globalFont,
+        locale: options.locale?.value,
+        theme: theme.value,
+        resolveDatasetProps: (dsId) => {
+          const dsReg = datasets.value.get(dsId);
+          return dsReg?.props;
+        }
+      });
+      if (renderer === "svg") {
+        renderHeatmapAxesSvg(gridGroupRef.value, axisGroupRef.value, controller.axisLayouts, theme.value);
+      }
+    },
+    { immediate: true, flush: "post" }
+  );
+  watch(hover, () => {
+    controller.applyHover(hover.value);
+  });
+  onUnmounted(() => {
+    controller.destroy();
+  });
+  function hitTest(x, y) {
+    return controller.hitTest(x, y);
+  }
+  function getPointPosition(datasetId, index) {
+    const lr = controller.layoutResult;
+    if (!lr) return null;
+    const hmLayout = lr.layouts.get(datasetId);
+    const cell = hmLayout?.cells.find((c) => c.index === index && !c.isEmpty);
+    if (!cell) return null;
+    return { x: cell.x, y: cell.y, width: cell.width, height: cell.height, shape: "rect" };
+  }
+  function getColorScaleInfo() {
+    return controller.getColorScaleInfo();
+  }
+  function applyPropertyAnimations(store) {
+    controller.applyPropertyAnimations(store);
+  }
+  function renderFrameCycle() {
+    controller.renderFrameCycle();
+  }
+  const svgContent = computed(() => {
+    if (renderer !== "svg") return [];
+    void versionRef.value;
+    const lr = controller.layoutResult;
+    if (!lr) return [];
+    const elements = [];
+    for (const [datasetId, hmLayout] of lr.layouts) {
+      const dsReg = datasets.value.get(datasetId);
+      const hmProps = dsReg?.props;
+      const renderFn = hmProps?.renderContent;
+      const data = hmProps?.data;
+      if (!renderFn || !data) continue;
+      for (const cell of hmLayout.cells) {
+        if (cell.isEmpty) continue;
+        const dataItem = data[cell.index];
+        if (!dataItem) continue;
+        const result = renderFn({
+          data: dataItem,
+          index: cell.index,
+          value: cell.value,
+          xLabel: cell.xLabel,
+          yLabel: cell.yLabel,
+          color: cell.color,
+          x: cell.x,
+          y: cell.y,
+          width: cell.width,
+          height: cell.height,
+          row: cell.row,
+          col: cell.col,
+          isEmpty: cell.isEmpty
+        });
+        if (result != null) {
+          const clipId = `hm-clip-${datasetId}-${cell.index}`;
+          elements.push(
+            createVNode("g", { key: `${datasetId}-${cell.index}`, "clip-path": `url(#${clipId})` }, [
+              createVNode("defs", null, [createVNode("clipPath", { id: clipId }, [createVNode("rect", { x: cell.x, y: cell.y, width: cell.width, height: cell.height })])]),
+              result
+            ])
+          );
+        }
+      }
+    }
+    return elements;
+  });
+  return {
+    groupRef,
+    gridGroupRef,
+    axisGroupRef,
+    hitTest,
+    getPointPosition,
+    axisLayouts: axisLayoutsComputed,
+    plotArea: chartArea,
+    getColorScaleInfo,
+    scaleResult,
+    svgContent,
+    applyPropertyAnimations,
+    renderFrameCycle
+  };
+}
+
+// src/components/renderers/layers/HeatmapLayer.vue
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HeatmapLayer",
+  setup(__props) {
+    const VNodeRenderer = defineComponent({
+      props: { node: {
+        type: Object,
+        required: true
+      } },
+      render() {
+        return this.node;
+      }
+    });
+    const frame = useCartesianFrame();
+    const methods = useChartMethods();
+    const state = useChartState();
+    const hoverCtx = useChartHover();
+    const features = computed(() => state.value.features);
+    const heatmap = useHeatmapRenderer({
+      chartArea: frame.cartesianArea,
+      renderer: methods.renderer,
+      canvasEl: frame.canvasEl,
+      datasets: computed(() => state.value.datasets),
+      axes: computed(() => state.value.axes),
+      datasetVisibility: computed(() => state.value.datasetVisibility),
+      hover: computed(() => hoverCtx.value.hover),
+      hoverConfig: frame.hoverConfig,
+      chartId: methods.chartId,
+      width: frame.width,
+      height: frame.height,
+      features,
+      compositor: frame.compositor,
+      globalFont: methods.font,
+      locale: computed(() => methods.locale),
+      theme: computed(() => methods.theme)
+    });
+    useCartesianFrameRegistration({
+      type: "heatmap",
+      getColorScaleInfo: () => heatmap.getColorScaleInfo(),
+      scaleResult: heatmap.scaleResult,
+      getPointPosition: (datasetId, index) => heatmap.getPointPosition(datasetId, index),
+      applyPropertyAnimations: (store) => heatmap.applyPropertyAnimations(store),
+      renderFrameCycle: () => heatmap.renderFrameCycle(),
+      hitTest: (x, y) => {
+        const hmHit = heatmap.hitTest(x, y);
+        if (!hmHit) return null;
+        return {
+          datasetId: hmHit.datasetId,
+          index: hmHit.index,
+          col: hmHit.col,
+          label: `${hmHit.xLabel}, ${hmHit.yLabel}`,
+          value: hmHit.value ?? 0,
+          color: hmHit.color,
+          snapX: hmHit.x + hmHit.width / 2,
+          snapY: hmHit.y + hmHit.height / 2,
+          formattedValue: hmHit.value != null ? String(hmHit.value) : "",
+          cursorFormattedValue: ""
+        };
+      }
+    });
+    return (_ctx, _cache) => {
+      return unref(methods).renderer === "svg" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        createElementVNode("g", {
+          ref: (el) => {
+            unref(heatmap).gridGroupRef.value = el;
+          },
+          class: "heatmap-grid"
+        }, null, 512),
+        createElementVNode("g", {
+          ref: (el) => {
+            unref(heatmap).groupRef.value = el;
+          },
+          class: "heatmap-chart"
+        }, null, 512),
+        createElementVNode("g", {
+          ref: (el) => {
+            unref(heatmap).axisGroupRef.value = el;
+          },
+          class: "heatmap-axes"
+        }, null, 512),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(heatmap).svgContent.value, (el) => {
+          return openBlock(), createBlock(unref(VNodeRenderer), {
+            key: el.key ?? el.props?.key,
+            node: el
+          }, null, 8, ["node"]);
+        }), 128))
+      ], 64)) : createCommentVNode("", true);
+    };
+  }
+});
+var HeatmapLayer_default = _sfc_main;
+
+export { HeatmapLayer_default };

package/dist/chunks/chunk-3XOLEGDL.mjs

@@ -0,0 +1,182 @@
+import { useControllerLifecycle } from './chunk-KNNYJD4D.mjs';
+import { useRadialFrameRegistration } from './chunk-7EZEZMGG.mjs';
+import { useChartMethods, useChartState, useChartHover } from './chunk-QOWKMWNO.mjs';
+import { defineComponent, computed, toRef, unref, openBlock, createElementBlock, Fragment, createElementVNode, renderList, createBlock, createCommentVNode, ref, watch, h } from 'vue';
+import { buildPieSliceContentItems } from '@primeui/chart-core';
+import { createPieRendererCanvas } from '@primeui/chart-core/series/pie/controller-canvas';
+import { createPieRendererSvg } from '@primeui/chart-core/series/pie/controller-svg';
+
+function usePieRenderer(options) {
+  const { renderer, chartId, globalFont, adaptiveDataLabelFontSize, theme, dir } = options;
+  const groupRef = ref(null);
+  const labelGroupRef = ref(null);
+  const centerRef = ref(null);
+  const versionRef = ref(0);
+  const controller = renderer === "canvas" ? createPieRendererCanvas() : createPieRendererSvg();
+  controller.onFrame = () => {
+    versionRef.value++;
+    centerRef.value = controller.center;
+  };
+  watch(
+    [options.datasets, options.chartArea, options.datasetVisibility, options.hiddenItems, options.features, options.width, options.height, groupRef, dir, theme],
+    () => {
+      if (options.datasets.value.size === 0) return;
+      if (renderer === "svg" && !groupRef.value) return;
+      const hoverConfig = options.features.value.get("hover")?.props;
+      controller.update({
+        datasets: options.datasets.value,
+        datasetVisibility: options.datasetVisibility.value,
+        hiddenItems: options.hiddenItems.value,
+        chartArea: options.chartArea.value,
+        renderer,
+        width: options.width.value,
+        height: options.height.value,
+        chartId,
+        features: options.features.value,
+        hover: options.hover.value,
+        hoverConfig,
+        globalFont,
+        adaptiveDataLabelFontSize: adaptiveDataLabelFontSize?.value,
+        svgGroup: groupRef.value ?? void 0,
+        canvasEl: options.canvasEl.value ?? void 0,
+        dir: dir.value,
+        theme: theme.value
+      });
+      controller.registerLabelGroup(labelGroupRef.value);
+      centerRef.value = controller.center;
+    },
+    { immediate: true, flush: "post" }
+  );
+  watch([options.hover, () => options.features.value.get("hover")?.props], () => {
+    controller.applyHover(options.hover.value);
+  });
+  const { applyPropertyAnimations, renderFrameCycle } = useControllerLifecycle(controller);
+  const svgContent = computed(() => {
+    if (renderer !== "svg") return [];
+    void versionRef.value;
+    const content = [];
+    for (const item of buildPieSliceContentItems(controller.entries, controller.lastRenderedSlices, controller.ringRadii, controller.animationLayout, options.hiddenItems.value, options.globalFont?.family, theme.value)) {
+      const result = item.renderFn(item.context);
+      if (result != null) {
+        content.push(
+          h(
+            "g",
+            {
+              key: item.datasetKey,
+              class: "slice-custom-content",
+              "data-dataset": item.datasetId,
+              "data-index": item.index,
+              transform: `translate(${item.contentX}, ${item.contentY})`,
+              onVnodeMounted: (vnode) => controller.registerCustomContent(item.key, vnode.el),
+              onVnodeUnmounted: () => controller.registerCustomContent(item.key, null)
+            },
+            [result]
+          )
+        );
+      }
+    }
+    return content;
+  });
+  function hitTest(x, y) {
+    const hit = controller.hitTest(x, y);
+    if (!hit) return null;
+    return { datasetId: hit.datasetId, index: hit.index, label: hit.label, value: hit.value, percentage: hit.percentage, color: hit.color };
+  }
+  function getSlicePosition(datasetId, index) {
+    return controller.getSlicePosition(datasetId, index);
+  }
+  return {
+    groupRef,
+    labelGroupRef,
+    hitTest,
+    getSlicePosition,
+    center: centerRef,
+    svgContent,
+    applyPropertyAnimations,
+    renderFrameCycle
+  };
+}
+
+// src/components/renderers/layers/PieLayer.vue
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PieLayer",
+  props: {
+    chartArea: {},
+    width: {},
+    height: {},
+    canvasEl: {},
+    containerEl: {},
+    adaptiveDataLabelFontSize: {}
+  },
+  setup(__props) {
+    const VNodeRenderer = defineComponent({
+      props: { node: {
+        type: Object,
+        required: true
+      } },
+      render() {
+        return this.node;
+      }
+    });
+    const props = __props;
+    const methods = useChartMethods();
+    const state = useChartState();
+    const hoverCtx = useChartHover();
+    const pie = usePieRenderer({
+      chartArea: computed(() => props.chartArea),
+      renderer: methods.renderer,
+      canvasEl: toRef(props, "canvasEl"),
+      containerEl: toRef(props, "containerEl"),
+      datasets: computed(() => state.value.datasets),
+      features: computed(() => state.value.features),
+      hover: computed(() => hoverCtx.value.hover),
+      datasetVisibility: computed(() => state.value.datasetVisibility),
+      hiddenItems: computed(() => state.value.hiddenItems),
+      chartId: methods.chartId,
+      width: computed(() => props.width),
+      height: computed(() => props.height),
+      globalFont: methods.font,
+      adaptiveDataLabelFontSize: computed(() => props.adaptiveDataLabelFontSize),
+      dir: computed(() => methods.dir),
+      theme: computed(() => methods.theme)
+    });
+    useRadialFrameRegistration({
+      type: "pie",
+      hitTest: (x, y) => pie.hitTest(x, y),
+      getPointPosition: (datasetId, index) => {
+        const pos = pie.getSlicePosition(datasetId, index);
+        if (!pos) return null;
+        const r = 6;
+        return {
+          x: pos.x - r,
+          y: pos.y - r,
+          width: r * 2,
+          height: r * 2,
+          shape: "circle"
+        };
+      },
+      getCenter: () => pie.center.value,
+      applyPropertyAnimations: (store) => pie.applyPropertyAnimations(store),
+      renderFrameCycle: () => pie.renderFrameCycle()
+    });
+    return (_ctx, _cache) => {
+      return unref(methods).renderer === "svg" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        createElementVNode("g", { ref: (el) => {
+          unref(pie).groupRef.value = el;
+        } }, null, 512),
+        createElementVNode("g", { ref: (el) => {
+          unref(pie).labelGroupRef.value = el;
+        } }, null, 512),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pie).svgContent.value, (el) => {
+          return openBlock(), createBlock(unref(VNodeRenderer), {
+            key: el.key ?? el.props?.key,
+            node: el
+          }, null, 8, ["node"]);
+        }), 128))
+      ], 64)) : createCommentVNode("", true);
+    };
+  }
+});
+var PieLayer_default = _sfc_main;
+
+export { PieLayer_default };

package/dist/{chunk-372K2BMN.mjs → chunks/chunk-4EU72IBK.mjs}

@@ -1,17 +1,17 @@
-import { LegendRenderer_default } from './chunk-5FTUGKPC.mjs';
-import { ColorLegendRenderer_default } from './chunk-E4ROAOPT.mjs';
-import { TooltipRenderer_default } from './chunk-GX2MK6VT.mjs';
-import { useResponsiveDimensions, useAnimationProps, useDrilldownState, useResponsiveConfig, provideFamilyRenderers, provideChartLayers, useZoomPan, useKeyboardNavigation, useChartSync, useChartContext, useChartSyncCoordinator } from './chunk-CQHNYT2V.mjs';
-import { NavigatorRenderer_default } from './chunk-NLXOJSKK.mjs';
-import { provideChartContext } from './chunk-HANSF33Z.mjs';
-import { CHART_SYNC_INFO_KEY } from './chunk-LD57I4SY.mjs';
-import { TOOLTIP_CONTEXT_KEY } from './chunk-FZ3PZ66C.mjs';
-import { defineComponent, computed, ref, onMounted, watch, onBeforeUnmount, toRef, shallowRef, provide, nextTick, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, renderSlot, unref, createBlock, resolveDynamicComponent, withCtx, createTextVNode, Fragment, renderList, withModifiers } from 'vue';
+import { LegendRenderer_default } from './chunk-TRGN3ZMM.mjs';
+import { ColorLegendRenderer_default } from './chunk-S4YR4YK7.mjs';
+import { TooltipRenderer_default } from './chunk-36DHPBYP.mjs';
+import { useResponsiveDimensions, useAnimationProps, useDrilldownState, useResponsiveConfig, provideFamilyRenderers, provideChartLayers, useZoomPan, useKeyboardNavigation, useChartSync, useChartContext, useChartSyncCoordinator } from './chunk-I2BWSDNR.mjs';
+import { NavigatorRenderer_default } from './chunk-GLFXRR7N.mjs';
+import { provideChartContext } from './chunk-QOWKMWNO.mjs';
+import { CHART_SYNC_INFO_KEY } from './chunk-H4HLHGUW.mjs';
+import { TOOLTIP_CONTEXT_KEY } from './chunk-4Q3QUNX6.mjs';
+import { defineComponent, computed, ref, onMounted, watch, onBeforeUnmount, toRef, shallowRef, nextTick, provide, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, renderSlot, unref, createBlock, resolveDynamicComponent, withCtx, createTextVNode, Fragment, renderList, withModifiers } from 'vue';
 import { resolveTheme, ChartStateController, buildChartDataTable, themeToCssVars, configureCanvasHiDPI, computeCrosshairLayout, buildAnnotationContext, DEFAULT_FONT_FAMILY, renderAnnotationsCanvas, resolveDirFromElement, observeDocumentDir } from '@primeui/chart-core';
 import { verifyLicense } from '@primeui/license-manager';
 
 // src/release-date.ts
-var RELEASE_DATE = "2026-06-20";
+var RELEASE_DATE = "2026-06-28";
 
 // src/Chart.vue
 var _hoisted_1 = {
@@ -224,10 +224,13 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     locale: {},
     animation: { type: [Object, Boolean] },
     animations: {},
-    transitions: {},
     renderer: {}
   },
-  emits: ["resize"],
+  emits: [
+    "resize",
+    "point-click",
+    "point-hover"
+  ],
   setup(__props, { expose: __expose, emit: __emit }) {
     const VNodeRenderer = defineComponent({
       props: { node: {
@@ -312,8 +315,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     });
     useAnimationProps(() => ({
       animation: props.animation,
-      animations: props.animations,
-      transitions: props.transitions
+      animations: props.animations
     }), methods);
     const containerRef = ref(null);
     const mainCanvasRef = ref(null);
@@ -444,12 +446,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       });
     });
     const autoColorScale = shallowRef(null);
-    watch([
-      () => state.value.datasets,
-      () => state.value.datasetVisibility,
-      () => coreState.value.chartArea,
-      rendererDelegate
-    ], () => {
+    function syncAutoColorScale() {
       const info = rendererDelegate.value?.getColorScaleInfo?.() ?? null;
       const prev = autoColorScale.value;
       if (prev === null && info === null) return;
@@ -457,6 +454,18 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       }
       autoColorScale.value = info;
+    }
+    watch([
+      () => state.value.datasets,
+      () => state.value.datasetVisibility,
+      () => coreState.value.chartArea,
+      rendererDelegate
+    ], () => {
+      syncAutoColorScale();
+      if (autoColorScale.value === null) {
+        const hasColorScaleSeries = [...state.value.datasets.values()].some((d) => d.type === "heatmap" || d.type === "treemap");
+        if (hasColorScaleSeries) nextTick(syncAutoColorScale);
+      }
     }, {
       immediate: true,
       flush: "post"
@@ -588,11 +597,38 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         processMouseMove(evt);
       });
     }
+    function resolvePointEvent(hit) {
+      const index = hit.index ?? 0;
+      const data = state.value.datasets.get(hit.datasetId)?.props?.data;
+      return {
+        datasetId: hit.datasetId,
+        index,
+        label: hit.label ?? "",
+        value: hit.value ?? 0,
+        color: hit.color ?? "",
+        datum: data?.[index]
+      };
+    }
+    function hitForPointEvent(x, y) {
+      try {
+        return rendererDelegate.value?.hitTest(x, y) ?? null;
+      } catch {
+        return null;
+      }
+    }
+    let _lastHoverKey = null;
     function processMouseMove(e) {
       if (zoomIsDragging.value) return;
       const rect = containerRef.value?.getBoundingClientRect();
       if (!rect) return;
-      coreMouseMove(e.clientX - rect.left, e.clientY - rect.top);
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      coreMouseMove(x, y);
+      const hit = hitForPointEvent(x, y);
+      const key = hit ? `${hit.datasetId}:${hit.index}` : null;
+      if (key === _lastHoverKey) return;
+      _lastHoverKey = key;
+      emit("point-hover", hit ? resolvePointEvent(hit) : null);
     }
     function handleMouseMoveWithKeyboard(e) {
       keyboardNav.onMouseMove();
@@ -614,12 +650,20 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function handleMouseLeave() {
       coreMouseLeave();
+      if (_lastHoverKey !== null) {
+        _lastHoverKey = null;
+        emit("point-hover", null);
+      }
     }
     function handleClick(e) {
-      if (!hoverConfig.value && !isRect.value && !drilldownState.enabled.value) return;
       const rect = containerRef.value?.getBoundingClientRect();
       if (!rect) return;
-      coreClick(e.clientX - rect.left, e.clientY - rect.top);
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const hit = hitForPointEvent(x, y);
+      if (hit) emit("point-click", resolvePointEvent(hit));
+      if (!hoverConfig.value && !isRect.value && !drilldownState.enabled.value) return;
+      coreClick(x, y);
     }
     function handleLegendClick(item) {
       coreLegendClick(item);
@@ -994,6 +1038,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               height: unref(height),
               "canvas-el": mainCanvasRef.value,
               "zoom-state": unref(zoomState),
+              "is-dragging": unref(zoomIsDragging),
               "adaptive-data-label-font-size": unref(adaptive).dataLabelFontSize,
               "adaptive-data-label-rotation": unref(adaptive).dataLabelRotation,
               "rule-overrides": unref(ruleOverrides)
@@ -1003,6 +1048,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               "height",
               "canvas-el",
               "zoom-state",
+              "is-dragging",
               "adaptive-data-label-font-size",
               "adaptive-data-label-rotation",
               "rule-overrides"
@@ -1142,6 +1188,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             "canvas-el": mainCanvasRef.value,
             "overlay-canvas-el": overlayCanvasRef.value,
             "zoom-state": unref(zoomState),
+            "is-dragging": unref(zoomIsDragging),
             "adaptive-data-label-font-size": unref(adaptive).dataLabelFontSize,
             "adaptive-data-label-rotation": unref(adaptive).dataLabelRotation,
             "rule-overrides": unref(ruleOverrides)
@@ -1152,6 +1199,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             "canvas-el",
             "overlay-canvas-el",
             "zoom-state",
+            "is-dragging",
             "adaptive-data-label-font-size",
             "adaptive-data-label-rotation",
             "rule-overrides"

package/dist/{chunk-PSSXPTLQ.mjs → chunks/chunk-4SLSYRNY.mjs}

@@ -1,8 +1,8 @@
-import { useCustomizationRegistration } from './chunk-PQV55JYI.mjs';
-import { SYNC_BUS_KEY } from './chunk-LD57I4SY.mjs';
-import { CHART_METHODS_KEY } from './chunk-FZ3PZ66C.mjs';
+import { useCustomizationRegistration } from './chunk-ZLD5VNMP.mjs';
+import { SYNC_BUS_KEY } from './chunk-H4HLHGUW.mjs';
+import { CHART_METHODS_KEY } from './chunk-4Q3QUNX6.mjs';
 import { defineComponent, inject, computed, ref, onMounted, onBeforeUnmount, openBlock, createElementBlock, Fragment, unref, normalizeStyle, normalizeClass, renderList, createBlock, resolveDynamicComponent, createElementVNode, toDisplayString, createCommentVNode } from 'vue';
-import { gradientToCssBackground, buildSharedLegendItems } from '@primeui/chart-core';
+import { safeRenderProp, gradientToCssBackground, buildSharedLegendItems } from '@primeui/chart-core';
 
 var _hoisted_1 = ["onClick", "onMouseenter"];
 var _hoisted_2 = ["data-chart-gradient"];
@@ -151,7 +151,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         class: normalizeClass(props.class),
         style: normalizeStyle([containerStyle.value, props.style])
       }, [(openBlock(true), createElementBlock(Fragment, null, renderList(sharedItems.value, (item) => {
-        return openBlock(), createElementBlock(Fragment, { key: getItemKey(item) }, [__props.render ? (openBlock(), createBlock(resolveDynamicComponent(() => __props.render({
+        return openBlock(), createElementBlock(Fragment, { key: getItemKey(item) }, [__props.render ? (openBlock(), createBlock(resolveDynamicComponent(() => unref(safeRenderProp)(() => __props.render({
           type: item.type,
           datasetId: item.datasetId,
           label: item.label,
@@ -166,7 +166,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           onMouseLeave: () => {
             hoveredId.value = null;
           }
-        })), { key: 0 })) : (openBlock(), createElementBlock("button", {
+        }), "legend")), { key: 0 })) : (openBlock(), createElementBlock("button", {
           key: 1,
           type: "button",
           style: normalizeStyle({

package/dist/{chunk-4NJ2PSHV.mjs → chunks/chunk-5ZLVNQ2L.mjs}

@@ -1,5 +1,6 @@
-import { provideRadialFrame, useChartLayers, usePropertyAnimations } from './chunk-CQHNYT2V.mjs';
-import { useChartMethods, useChartState } from './chunk-HANSF33Z.mjs';
+import { useChartLayers, usePropertyAnimations } from './chunk-I2BWSDNR.mjs';
+import { provideRadialFrame } from './chunk-7EZEZMGG.mjs';
+import { useChartMethods, useChartState } from './chunk-QOWKMWNO.mjs';
 import { defineComponent, computed, ref, watch, shallowRef, onUnmounted, openBlock, createElementBlock, Fragment, unref, createCommentVNode, renderList, createBlock, resolveDynamicComponent } from 'vue';
 import { collectItems, computeRadialComboContext, materializeSvgGroup, renderRadialGridSvg, AnimatedPropertyStore, AnimationRegistry, buildRadialGridLayout, withReferenceFeatures, redrawRadialCanvas } from '@primeui/chart-core';
 
@@ -48,10 +49,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       const polarRaw = frame.handles.get("polar")?.layout?.value;
       const src = radarRaw ? {
         ...radarRaw,
-        radius: radarRaw.radius
+        radius: radarRaw.radius,
+        innerRadius: 0
       } : polarRaw ? {
         ...polarRaw,
-        radius: polarRaw.maxRadius
+        radius: polarRaw.maxRadius,
+        innerRadius: polarRaw.innerRadiusRatio * polarRaw.maxRadius
       } : null;
       if (!src) return _stickyGridLayout ? withReferenceFeatures(_stickyGridLayout, state.value.features) : null;
       const xAxisProps = [...state.value.axes.x.values()][0]?.props;

package/dist/{chunk-O6L3PNFC.mjs → chunks/chunk-6Z4MZIJI.mjs}

@@ -1,5 +1,5 @@
-import { registerKeyboardController } from './chunk-CQHNYT2V.mjs';
-import { useCustomizationRegistration } from './chunk-PQV55JYI.mjs';
+import { registerKeyboardController } from './chunk-I2BWSDNR.mjs';
+import { useCustomizationRegistration } from './chunk-ZLD5VNMP.mjs';
 import { defineComponent, getCurrentInstance, computed } from 'vue';
 import { KeyboardNavigationController } from '@primeui/chart-core';
 

package/dist/chunks/chunk-7EZEZMGG.mjs

@@ -0,0 +1,22 @@
+import { shallowReactive, provide, inject, onBeforeUnmount } from 'vue';
+
+// src/composables/useRadialFrame.ts
+var RADIAL_FRAME_KEY = /* @__PURE__ */ Symbol.for("primeui-chart-radial-frame");
+function provideRadialFrame() {
+  const handles = shallowReactive(/* @__PURE__ */ new Map());
+  const frame = {
+    handles,
+    register: (h) => handles.set(h.type, h),
+    unregister: (type) => handles.delete(type)
+  };
+  provide(RADIAL_FRAME_KEY, frame);
+  return frame;
+}
+function useRadialFrameRegistration(handle) {
+  const frame = inject(RADIAL_FRAME_KEY, null);
+  if (!frame) return;
+  frame.register(handle);
+  onBeforeUnmount(() => frame.unregister(handle.type));
+}
+
+export { provideRadialFrame, useRadialFrameRegistration };