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

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-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/chunks/chunk-4VWFG6HM.mjs

@@ -0,0 +1,86 @@
+import { ChartBar_default } from './chunk-L74BEYTD.mjs';
+import { ChartTreemap_default } from './chunk-HVLFOABV.mjs';
+import { ChartScatter_default } from './chunk-SGLTVJUA.mjs';
+import { ChartRadar_default } from './chunk-F7EK5D6J.mjs';
+import { ChartPolar_default } from './chunk-GIDIMIWE.mjs';
+import { ChartPie_default } from './chunk-GE2Y2FHS.mjs';
+import { ChartLine_default } from './chunk-DDRSIMLE.mjs';
+import { ChartHeatmap_default } from './chunk-PCBF6FSQ.mjs';
+import { ChartCandlestick_default } from './chunk-CW2KYVYO.mjs';
+import { ChartAnnotation_default } from './chunk-ON2FAZTD.mjs';
+import { ChartAccessibility_default } from './chunk-6Z4MZIJI.mjs';
+import { ChartWaterfall_default } from './chunk-GV3CY6CQ.mjs';
+import { ChartStacked_default } from './chunk-WVNDZNMV.mjs';
+import { ChartRange_default } from './chunk-HHZFGQN2.mjs';
+import { ChartOverlap_default } from './chunk-R4AZOPXC.mjs';
+import { ChartGroup_default } from './chunk-3JA5JAHF.mjs';
+import { ChartDecimation_default } from './chunk-TZ23VBFU.mjs';
+import { ChartHover_default } from './chunk-3DINEX6C.mjs';
+import { ChartExportMenu_default } from './chunk-X4NWFK7L.mjs';
+import { ChartDataLabels_default } from './chunk-HH5FUUXX.mjs';
+import { ChartColorLegend_default } from './chunk-CGFPDWB4.mjs';
+import { ChartCaption_default } from './chunk-UOZFNTVQ.mjs';
+import { ChartBreadcrumb_default } from './chunk-QONZ3SCZ.mjs';
+import { ChartAxisGroup_default } from './chunk-MGUGO3RV.mjs';
+import { ChartAxisCategory_default } from './chunk-QJCMFAHB.mjs';
+import { ChartXAxis_default } from './chunk-DXKAPWMO.mjs';
+import { ChartTooltip_default } from './chunk-LP2YESP6.mjs';
+import { ChartTitle_default } from './chunk-2NZ3PUWW.mjs';
+import { ChartResponsive_default } from './chunk-UOMQNZMT.mjs';
+import { ChartReferenceLine_default } from './chunk-CRIB3I3L.mjs';
+import { ChartReferenceBand_default } from './chunk-U6X3GVJ3.mjs';
+import { ChartNavigator_default } from './chunk-JPKNWLLP.mjs';
+import { ChartLegend_default } from './chunk-4SLSYRNY.mjs';
+import { ChartTreemapGroup_default } from './chunk-L73MEG22.mjs';
+import { ChartItem_default } from './chunk-3PJULFR5.mjs';
+import { ChartZoom_default } from './chunk-BSROML7P.mjs';
+import { ChartYAxis_default } from './chunk-JVH4MDKX.mjs';
+import { ChartSvg_default } from './chunk-5HLEKAY2.mjs';
+import { ChartCanvas_default } from './chunk-IUGMS7ND.mjs';
+import { __export } from './chunk-VIHIR2BE.mjs';
+
+// src/Chart.parts.ts
+var Chart_parts_exports = {};
+__export(Chart_parts_exports, {
+  Accessibility: () => ChartAccessibility_default,
+  Annotation: () => ChartAnnotation_default,
+  AxisCategory: () => ChartAxisCategory_default,
+  AxisGroup: () => ChartAxisGroup_default,
+  Bar: () => ChartBar_default,
+  Breadcrumb: () => ChartBreadcrumb_default,
+  Candlestick: () => ChartCandlestick_default,
+  Canvas: () => ChartCanvas_default,
+  Caption: () => ChartCaption_default,
+  ColorLegend: () => ChartColorLegend_default,
+  DataLabels: () => ChartDataLabels_default,
+  Decimation: () => ChartDecimation_default,
+  ExportMenu: () => ChartExportMenu_default,
+  Group: () => ChartGroup_default,
+  Heatmap: () => ChartHeatmap_default,
+  Hover: () => ChartHover_default,
+  Item: () => ChartItem_default,
+  Legend: () => ChartLegend_default,
+  Line: () => ChartLine_default,
+  Navigator: () => ChartNavigator_default,
+  Overlap: () => ChartOverlap_default,
+  Pie: () => ChartPie_default,
+  Polar: () => ChartPolar_default,
+  Radar: () => ChartRadar_default,
+  Range: () => ChartRange_default,
+  ReferenceBand: () => ChartReferenceBand_default,
+  ReferenceLine: () => ChartReferenceLine_default,
+  Responsive: () => ChartResponsive_default,
+  Scatter: () => ChartScatter_default,
+  Stacked: () => ChartStacked_default,
+  Svg: () => ChartSvg_default,
+  Title: () => ChartTitle_default,
+  Tooltip: () => ChartTooltip_default,
+  Treemap: () => ChartTreemap_default,
+  TreemapGroup: () => ChartTreemapGroup_default,
+  Waterfall: () => ChartWaterfall_default,
+  XAxis: () => ChartXAxis_default,
+  YAxis: () => ChartYAxis_default,
+  Zoom: () => ChartZoom_default
+});
+
+export { Chart_parts_exports };

package/dist/{chunk-44BAFHPK.mjs → chunks/chunk-5HLEKAY2.mjs}

@@ -1,4 +1,4 @@
-import { Chart_default } from './chunk-372K2BMN.mjs';
+import { Chart_default } from './chunk-EKGCPOZJ.mjs';
 import { defineComponent, ref, openBlock, createBlock, mergeProps, withCtx, renderSlot } from 'vue';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({
@@ -25,10 +25,13 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       type: [Object, Boolean],
       default: void 0
     },
-    animations: {},
-    transitions: {}
+    animations: {}
   },
-  emits: ["resize"],
+  emits: [
+    "resize",
+    "point-click",
+    "point-hover"
+  ],
   setup(__props, { expose: __expose }) {
     const chartRef = ref(null);
     __expose({ redraw: () => chartRef.value?.redraw() });
@@ -38,7 +41,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         ref: chartRef
       }, _ctx.$props, {
         renderer: "svg",
-        onResize: _cache[0] || (_cache[0] = (w, h) => _ctx.$emit("resize", w, h))
+        onResize: _cache[0] || (_cache[0] = (w, h) => _ctx.$emit("resize", w, h)),
+        onPointClick: _cache[1] || (_cache[1] = (e) => _ctx.$emit("point-click", e)),
+        onPointHover: _cache[2] || (_cache[2] = (e) => _ctx.$emit("point-hover", e))
       }), {
         default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
         _: 3

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 };

package/dist/chunks/chunk-ADAGGXFG.mjs

@@ -0,0 +1,166 @@
+import { useControllerLifecycle } from './chunk-KNNYJD4D.mjs';
+import { normalizeDataLabelConfig } from './chunk-ZH4A4L6W.mjs';
+import { useRadialFrameRegistration } from './chunk-7EZEZMGG.mjs';
+import { useChartMethods, useChartState, useChartHover } from './chunk-QOWKMWNO.mjs';
+import { defineComponent, computed, toRef, unref, openBlock, createElementBlock, createCommentVNode, ref, watch } from 'vue';
+import { createPolarRendererCanvas } from '@primeui/chart-core/series/polar/controller-canvas';
+import { createPolarRendererSvg } from '@primeui/chart-core/series/polar/controller-svg';
+
+function usePolarRenderer(options) {
+  const { chartArea, renderer, datasets, features, hover, datasetVisibility, globalFont, adaptiveDataLabelFontSize, chartId, width, height, sharedContext, requestRedraw, dir, xAxes, yAxes, theme } = options;
+  const groupRef = ref(null);
+  const layoutRef = ref(null);
+  const controller = renderer === "canvas" ? createPolarRendererCanvas() : createPolarRendererSvg();
+  controller.onFrame = () => {
+    layoutRef.value = controller.layout;
+  };
+  const active = computed(() => controller.hasData);
+  function getLabelConfig() {
+    const dlProps = features.value.get("dataLabels")?.props;
+    return normalizeDataLabelConfig(dlProps, adaptiveDataLabelFontSize?.value, void 0, globalFont);
+  }
+  watch(
+    [datasets, chartArea, datasetVisibility, features, groupRef, xAxes, yAxes, dir, theme],
+    () => {
+      const area = chartArea.value;
+      if (!area) {
+        layoutRef.value = null;
+        return;
+      }
+      const hc = features.value.get("hover")?.props;
+      controller.update({
+        datasets: datasets.value,
+        datasetVisibility: datasetVisibility.value,
+        chartArea: area,
+        width: width.value,
+        height: height.value,
+        chartId,
+        renderer,
+        features: features.value,
+        hover: hover.value,
+        hoverConfig: hc,
+        globalFont,
+        adaptiveDataLabelFontSize: adaptiveDataLabelFontSize?.value,
+        sharedContext: sharedContext?.value,
+        svgGroup: groupRef.value,
+        requestRedraw,
+        labelConfig: getLabelConfig(),
+        dir: dir.value,
+        xAxes: xAxes?.value,
+        yAxes: yAxes?.value,
+        theme: theme.value
+      });
+      layoutRef.value = controller.layout;
+    },
+    { immediate: true, flush: "post" }
+  );
+  watch([hover, () => features.value.get("hover")?.props], () => {
+    controller.applyHover(hover.value);
+  });
+  const { applyPropertyAnimations, renderFrameCycle } = useControllerLifecycle(controller);
+  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, color: hit.color };
+  }
+  function getPointPosition(datasetId, index) {
+    const layout = layoutRef.value;
+    const bar = layout?.bars.find((b) => b.datasetId === datasetId && b.dataIndex === index);
+    if (!layout || !bar) return null;
+    const midAngle = (bar.startAngle + bar.endAngle) / 2;
+    const midRadius = (bar.innerRadius + bar.outerRadius) / 2;
+    const rad = midAngle * Math.PI / 180;
+    const cx = layout.center.x + Math.cos(rad) * midRadius;
+    const cy = layout.center.y + Math.sin(rad) * midRadius;
+    const r = 6;
+    return { x: cx - r, y: cy - r, width: r * 2, height: r * 2, shape: "circle" };
+  }
+  function findAllNearest(x, y) {
+    const result = controller.findAllNearest(x, y);
+    if (!result) return null;
+    const { primary, allSeries } = result;
+    return {
+      primary: { datasetId: primary.datasetId, index: primary.index, label: primary.label, value: primary.value, color: primary.color },
+      allSeries
+    };
+  }
+  function renderCanvasContent(ctx, _canvas) {
+    controller.renderCanvasContent(ctx);
+  }
+  return {
+    groupRef,
+    hitTest,
+    getPointPosition,
+    findAllNearest,
+    active,
+    get center() {
+      return layoutRef.value?.center ?? controller.center;
+    },
+    layout: layoutRef,
+    renderCanvasContent,
+    applyPropertyAnimations,
+    renderFrameCycle
+  };
+}
+
+// src/components/renderers/layers/PolarLayer.vue
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PolarLayer",
+  props: {
+    chartArea: {},
+    width: {},
+    height: {},
+    canvasEl: {},
+    adaptiveDataLabelFontSize: {},
+    sharedContext: {},
+    requestRedraw: { type: Function }
+  },
+  setup(__props) {
+    const props = __props;
+    const methods = useChartMethods();
+    const state = useChartState();
+    const hoverCtx = useChartHover();
+    const polar = usePolarRenderer({
+      chartArea: computed(() => props.chartArea),
+      renderer: methods.renderer,
+      canvasEl: toRef(props, "canvasEl"),
+      datasets: computed(() => state.value.datasets),
+      features: computed(() => state.value.features),
+      hover: computed(() => hoverCtx.value.hover),
+      datasetVisibility: computed(() => state.value.datasetVisibility),
+      globalFont: methods.font,
+      adaptiveDataLabelFontSize: computed(() => props.adaptiveDataLabelFontSize),
+      chartId: methods.chartId,
+      width: computed(() => props.width),
+      height: computed(() => props.height),
+      sharedContext: computed(() => props.sharedContext),
+      requestRedraw: () => props.requestRedraw(),
+      dir: computed(() => methods.dir),
+      xAxes: computed(() => state.value.axes.x),
+      yAxes: computed(() => state.value.axes.y),
+      theme: computed(() => methods.theme)
+    });
+    useRadialFrameRegistration({
+      type: "polar",
+      layout: polar.layout,
+      renderCanvasContent: polar.renderCanvasContent,
+      hitTest: (x, y) => polar.hitTest(x, y),
+      findAllNearest: (x, y) => polar.findAllNearest(x, y),
+      getCenter: () => polar.center ?? null,
+      getPointPosition: (datasetId, index) => polar.getPointPosition(datasetId, index),
+      applyPropertyAnimations: (store) => polar.applyPropertyAnimations(store),
+      renderFrameCycle: () => polar.renderFrameCycle()
+    });
+    return (_ctx, _cache) => {
+      return unref(methods).renderer === "svg" ? (openBlock(), createElementBlock("g", {
+        key: 0,
+        ref: (el) => {
+          unref(polar).groupRef.value = el;
+        }
+      }, null, 512)) : createCommentVNode("", true);
+    };
+  }
+});
+var PolarLayer_default = _sfc_main;
+
+export { PolarLayer_default };

package/dist/{chunk-YRKAI2R2.mjs → chunks/chunk-AKMQHU5T.mjs}

@@ -1,7 +1,7 @@
-import { useCartesianFrame, useCartesianFrameRegistration } from './chunk-CQHNYT2V.mjs';
-import { useChartMethods, useChartState, useChartHover } from './chunk-HANSF33Z.mjs';
-import { resolveBarLabels } from '@primeui/chart-core';
-import { computed, h, ref, watch, onUnmounted } from 'vue';
+import { useCartesianFrame, useCartesianFrameRegistration } from './chunk-I2BWSDNR.mjs';
+import { useChartMethods, useChartState, useChartHover } from './chunk-QOWKMWNO.mjs';
+import { resolveBarLabels, safeRenderProp } from '@primeui/chart-core';
+import { computed, h, ref, shallowRef, watch, onUnmounted } from 'vue';
 
 function useBarLayer(useBarRenderer) {
   const frame = useCartesianFrame();
@@ -33,12 +33,15 @@ function useBarLayer(useBarRenderer) {
     if (methods.renderer !== "svg" || !layout || !lc?.render) return [];
     const visibility = state.value.datasetVisibility;
     const nodes = [];
-    for (const [dsId, barLayout] of bar.barLayouts) {
+    for (const [dsId, barLayout] of bar.liveLayouts.value) {
       if (visibility?.get(dsId) === false) continue;
       const dsTotal = layout.datasetTotals.get(dsId) ?? 0;
       const resolved = resolveBarLabels(barLayout.visibleBars, barLayout.colors, dsTotal, layout.orientation, lc, layout.isPercentStacked, bar.barRenderProps.get(dsId)?.name, bar.barRenderProps.get(dsId)?.data);
       for (const lbl of resolved) {
-        const result = lc.render({ index: lbl.dataIndex, value: lbl.value, percentage: lbl.percentage, formattedText: lbl.text, label: lbl.seriesName ?? lbl.category, color: lbl.color, x: lbl.x, y: lbl.y });
+        const result = safeRenderProp(
+          () => lc.render({ index: lbl.dataIndex, value: lbl.value, percentage: lbl.percentage, formattedText: lbl.text, label: lbl.seriesName ?? lbl.category, color: lbl.color, x: lbl.x, y: lbl.y }),
+          "data label"
+        );
         if (result != null) {
           nodes.push(h("g", { key: `bar-${dsId}-${lbl.dataIndex}`, transform: `translate(${lbl.x},${lbl.y})`, "text-anchor": lbl.textAnchor, "dominant-baseline": lbl.baseline }, [result]));
         }
@@ -68,13 +71,10 @@ function useBarLayer(useBarRenderer) {
 function useBarRendererBase(controller, options) {
   const { renderer, canvasEl, datasets, datasetVisibility, hover, hoverConfig, chartId, layoutData, features, labelConfig, isZoomed, compositor, dir, theme } = options;
   const groupRef = ref(null);
-  const hasBarData = computed(() => {
-    const visibility = datasetVisibility.value;
-    for (const [id, ds] of datasets.value) {
-      if (ds.type === "bar" && visibility.get(id) !== false) return true;
-    }
-    return false;
-  });
+  const liveLayoutsRef = shallowRef(controller.renderedLayouts);
+  controller.onFrame = () => {
+    liveLayoutsRef.value = controller.renderedLayouts;
+  };
   watch(
     [layoutData, datasetVisibility, features, groupRef, hoverConfig, theme, dir],
     () => {
@@ -107,6 +107,7 @@ function useBarRendererBase(controller, options) {
         svgGroup: groupRef.value,
         theme: theme.value
       });
+      liveLayoutsRef.value = controller.renderedLayouts;
     },
     { immediate: true, flush: "post" }
   );
@@ -136,12 +137,12 @@ function useBarRendererBase(controller, options) {
     hitTest,
     findNearest,
     findAllNearest,
-    hasBarData,
     applyPropertyAnimations,
     renderFrameCycle,
     get barLayouts() {
       return controller.layouts;
     },
+    liveLayouts: liveLayoutsRef,
     get barRenderProps() {
       return controller.renderProps;
     }

package/dist/{chunk-ZRCOVQQM.mjs → chunks/chunk-BSROML7P.mjs}

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

package/dist/{chunk-WYV2MHP6.mjs → chunks/chunk-CGFPDWB4.mjs}

@@ -1,4 +1,4 @@
-import { useCustomizationRegistration } from './chunk-PQV55JYI.mjs';
+import { useCustomizationRegistration } from './chunk-ZLD5VNMP.mjs';
 import { defineComponent, computed, renderSlot } from 'vue';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({