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

package/dist/{chunk-DYVFVVTO.mjs → chunks/chunk-LJZCE7LQ.mjs}

@@ -1,7 +1,99 @@
-import { useCartesianFrame, useScatterRenderer, useCartesianFrameRegistration } from './chunk-CQHNYT2V.mjs';
-import { useChartMethods, useChartState, useChartHover } from './chunk-HANSF33Z.mjs';
-import { defineComponent, computed, unref, openBlock, createElementBlock, createCommentVNode } from 'vue';
+import { useControllerLifecycle } from './chunk-KNNYJD4D.mjs';
+import { useCartesianFrame, useCartesianFrameRegistration } from './chunk-I2BWSDNR.mjs';
+import { useChartMethods, useChartState, useChartHover } from './chunk-QOWKMWNO.mjs';
+import { defineComponent, computed, unref, openBlock, createElementBlock, createCommentVNode, ref, watch } from 'vue';
+import { createScatterRendererCanvas } from '@primeui/chart-core/series/scatter/controller-canvas';
+import { createScatterRendererSvg } from '@primeui/chart-core/series/scatter/controller-svg';
 
+function useScatterRenderer(options) {
+  const {
+    chartArea,
+    renderer,
+    canvasEl,
+    datasets,
+    datasetVisibility,
+    hover,
+    hoverConfig,
+    chartId,
+    width,
+    height,
+    valueXScales,
+    categoryScale,
+    valueScales,
+    firstCategoryAxisId,
+    firstValueAxisId,
+    scatterStackBasesMap,
+    compositor,
+    decimationConfig,
+    zoomState,
+    orientation,
+    labelConfig,
+    features,
+    dir,
+    theme
+  } = options;
+  const groupRef = ref(null);
+  const markerOverlaysRef = ref([]);
+  const controller = renderer === "canvas" ? createScatterRendererCanvas() : createScatterRendererSvg();
+  watch(
+    [datasets, datasetVisibility, chartArea, valueXScales, valueScales, firstCategoryAxisId, firstValueAxisId, scatterStackBasesMap, hoverConfig, width, height, groupRef, features, dir, theme],
+    () => {
+      controller.update({
+        datasets: datasets.value,
+        datasetVisibility: datasetVisibility.value,
+        chartArea: chartArea.value,
+        chartId,
+        width: width.value,
+        height: height.value,
+        renderer,
+        valueXScales: valueXScales.value,
+        categoryScale: categoryScale?.value,
+        valueScales: valueScales.value,
+        firstCategoryAxisId: firstCategoryAxisId.value,
+        firstValueAxisId: firstValueAxisId.value,
+        scatterStackBasesMap: scatterStackBasesMap.value,
+        hover: hover.value,
+        hoverConfig: hoverConfig.value,
+        compositor,
+        canvasEl: canvasEl.value,
+        svgGroup: groupRef.value,
+        decimationConfig: decimationConfig?.value,
+        zoomState: zoomState?.value,
+        orientation: orientation?.value,
+        labelConfig: labelConfig?.value,
+        dir: dir.value,
+        features: features.value,
+        theme: theme.value
+      });
+      markerOverlaysRef.value = controller.markerOverlays;
+    },
+    { immediate: true, flush: "post" }
+  );
+  watch(hover, () => {
+    controller.applyHover(hover.value);
+  });
+  const { applyPropertyAnimations, renderFrameCycle } = useControllerLifecycle(controller);
+  function hitTest(x, y) {
+    return controller.hitTest(x, y);
+  }
+  return {
+    groupRef,
+    hitTest,
+    boostActive: computed(() => controller.boostActive),
+    markerOverlays: markerOverlaysRef,
+    applyPropertyAnimations,
+    renderFrameCycle,
+    syncWithAnimatedScale: (categoryScale2, valueScales2, valueXScales2) => {
+      controller.syncWithAnimatedScale(categoryScale2, valueScales2, valueXScales2);
+      markerOverlaysRef.value = controller.markerOverlays;
+    },
+    get scatterLayouts() {
+      return controller.layouts;
+    }
+  };
+}
+
+// src/components/renderers/layers/ScatterLayer.vue
 var _hoisted_1 = ["clip-path"];
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ScatterLayer",
@@ -23,9 +115,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       chartId: methods.chartId,
       width: frame.width,
       height: frame.height,
-      scatterXScales: computed(() => frame.layoutData.value?.scatterXScales),
+      valueXScales: computed(() => frame.layoutData.value?.valueXScales),
+      categoryScale: computed(() => frame.layoutData.value?.sharedCategoryScale),
       valueScales: computed(() => frame.layoutData.value?.valueScales),
-      firstCategoryAxisId: computed(() => frame.layoutData.value?.scatterXScales?.keys().next().value ?? "default"),
+      firstCategoryAxisId: computed(() => frame.layoutData.value?.valueXScales?.keys().next().value ?? "default"),
       firstValueAxisId: computed(() => frame.layoutData.value?.valueScales?.keys().next().value ?? "default"),
       scatterStackBasesMap: computed(() => frame.layoutData.value?.scatterStackBasesMap),
       compositor: frame.compositor,
@@ -54,6 +147,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           value: scHit.yValue,
           xValue: scHit.xValue,
           yValue: scHit.yValue,
+          independentIsCategory: scHit.independentIsCategory,
+          xAxisTitle: scHit.xAxisTitle,
+          yAxisTitle: scHit.yAxisTitle,
           ...scHit.bubbleValue != null ? { bubbleValue: scHit.bubbleValue } : {},
           color: scHit.color,
           snapX: scHit.x,
@@ -81,7 +177,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return unref(methods).renderer === "svg" && unref(scatter).hasScatterData.value ? (openBlock(), createElementBlock("g", {
+      return unref(methods).renderer === "svg" ? (openBlock(), createElementBlock("g", {
         key: 0,
         ref: (el) => {
           unref(scatter).groupRef.value = el;

package/dist/{chunk-YGHWUR7K.mjs → chunks/chunk-LP2YESP6.mjs}

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

package/dist/{chunk-WA735Y26.mjs → chunks/chunk-MGUGO3RV.mjs}

@@ -1,4 +1,4 @@
-import { AXIS_GROUP_DEPTH_KEY, AXIS_GROUP_COLLECTOR_KEY, AXIS_GROUP_REGISTRY_KEY } from './chunk-5SRBQVU5.mjs';
+import { AXIS_GROUP_DEPTH_KEY, AXIS_GROUP_COLLECTOR_KEY, AXIS_GROUP_REGISTRY_KEY } from './chunk-EHSDNH7K.mjs';
 import { defineComponent, inject, provide, ref, watch, onMounted, onUnmounted, renderSlot } from 'vue';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{chunk-DOOXGOOB.mjs → chunks/chunk-OJHEN5FG.mjs}

@@ -1,8 +1,99 @@
-import { useRadarRenderer, useRadialFrameRegistration } from './chunk-CQHNYT2V.mjs';
-import { useChartMethods, useChartState, useChartHover } from './chunk-HANSF33Z.mjs';
-import { defineComponent, computed, toRef, unref, openBlock, createElementBlock, Fragment, createElementVNode, renderList, createBlock, resolveDynamicComponent, createCommentVNode } from 'vue';
-import { buildMarkerRenderItems, DEFAULT_HOVER_DIM_OPACITY } from '@primeui/chart-core';
+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, Fragment, createElementVNode, renderList, createBlock, resolveDynamicComponent, createCommentVNode, ref, watch } from 'vue';
+import { buildMarkerRenderItems, safeRenderProp, DEFAULT_HOVER_DIM_OPACITY } from '@primeui/chart-core';
+import { createRadarRendererCanvas } from '@primeui/chart-core/series/radar/controller-canvas';
+import { createRadarRendererSvg } from '@primeui/chart-core/series/radar/controller-svg';
 
+function useRadarRenderer(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 markerData = ref(null);
+  const controller = renderer === "canvas" ? createRadarRendererCanvas() : createRadarRendererSvg();
+  controller.onMarkerDataChange = (data) => {
+    markerData.value = data;
+  };
+  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,
+        renderer,
+        features: features.value,
+        hover: hover.value,
+        hoverConfig: hc,
+        globalFont,
+        adaptiveDataLabelFontSize: adaptiveDataLabelFontSize?.value,
+        chartId,
+        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 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,
+    findAllNearest,
+    active,
+    markerData,
+    layout: layoutRef,
+    renderCanvasContent,
+    applyPropertyAnimations,
+    renderFrameCycle
+  };
+}
+
+// src/components/renderers/layers/RadarLayer.vue
 var _hoisted_1 = { class: "radar-markers" };
 var _hoisted_2 = ["transform", "opacity"];
 var _sfc_main = /* @__PURE__ */ defineComponent({
@@ -113,7 +204,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           key: item.key,
           transform: `translate(${item.x}, ${item.y})`,
           opacity: item.opacity !== 1 ? item.opacity : void 0
-        }, [(openBlock(), createBlock(resolveDynamicComponent(() => item.renderMarker(item.context))))], 8, _hoisted_2);
+        }, [(openBlock(), createBlock(resolveDynamicComponent(() => unref(safeRenderProp)(() => item.renderMarker(item.context), "marker"))))], 8, _hoisted_2);
       }), 128))])], 64)) : createCommentVNode("", true);
     };
   }

package/dist/{chunk-ZNINPVG7.mjs → chunks/chunk-ON2FAZTD.mjs}

@@ -1,4 +1,4 @@
-import { useChartMethods } from './chunk-HANSF33Z.mjs';
+import { useChartMethods } from './chunk-QOWKMWNO.mjs';
 import { defineComponent, onMounted, watch, onUnmounted } from 'vue';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{chunk-DLUFOM5K.mjs → chunks/chunk-PCBF6FSQ.mjs}

@@ -1,9 +1,9 @@
-import { HeatmapLayer_default } from './chunk-54DLUFIA.mjs';
-import { CartesianRenderer_default } from './chunk-HTZVV6VV.mjs';
-import { registerFamilyRenderer, registerChartLayer, useDatasetAnimationRegistration, useDatasetRegistration, useItemCollector } from './chunk-CQHNYT2V.mjs';
-import { useRendererHint, useChartMethods } from './chunk-HANSF33Z.mjs';
+import { HeatmapLayer_default } from './chunk-3X27K5XC.mjs';
+import { CartesianRenderer_default } from './chunk-YZQS2YBK.mjs';
+import { registerFamilyRenderer, registerChartLayer, useDatasetAnimationRegistration, useDatasetRegistration, useItemCollector } from './chunk-I2BWSDNR.mjs';
+import { useRendererHint, useChartMethods } from './chunk-QOWKMWNO.mjs';
 import { defineComponent, useSlots, computed, onMounted, watch, onUnmounted, renderSlot, createCommentVNode } from 'vue';
-import { heatmapRenderer } from '@primeui/chart-core';
+import { heatmapRenderer } from '@primeui/chart-core/series/heatmap';
 
 var heatmapIdCounter = 0;
 var _sfc_main = /* @__PURE__ */ defineComponent({
@@ -13,8 +13,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     data: {},
     valueField: {},
     name: {},
-    columnField: {},
-    rowField: {},
+    categoryXField: {},
+    categoryYField: {},
     color: {},
     colorScale: {},
     colorRange: {},
@@ -105,8 +105,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       const datasetProps = computed(() => ({
         id: autoId,
         data: props.data,
-        columnField: props.columnField,
-        rowField: props.rowField,
+        categoryXField: props.categoryXField,
+        categoryYField: props.categoryYField,
         valueField: props.valueField,
         name: props.name,
         color: props.color,
@@ -146,8 +146,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         return {
           id: autoId,
           data: items,
-          columnField: (ctx) => ctx.datum.column ?? "",
-          rowField: (ctx) => ctx.datum.row ?? "",
+          categoryXField: (ctx) => ctx.datum.categoryX ?? "",
+          categoryYField: (ctx) => ctx.datum.categoryY ?? "",
           valueField: (ctx) => ctx.datum.value,
           name: props.name,
           color: props.color,

package/dist/{chunk-72KINEJ6.mjs → chunks/chunk-PR6MTWPJ.mjs}

@@ -1,4 +1,4 @@
-import { Chart_default } from './chunk-372K2BMN.mjs';
+import { Chart_default } from './chunk-4EU72IBK.mjs';
 import { defineComponent, ref, openBlock, createBlock, mergeProps, withCtx, renderSlot } from 'vue';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({
@@ -26,10 +26,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() });
@@ -39,7 +42,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         ref: chartRef
       }, _ctx.$props, {
         renderer: "canvas",
-        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-FQTWLAVA.mjs → chunks/chunk-QJCMFAHB.mjs}

@@ -1,4 +1,4 @@
-import { AXIS_GROUP_COLLECTOR_KEY } from './chunk-5SRBQVU5.mjs';
+import { AXIS_GROUP_COLLECTOR_KEY } from './chunk-EHSDNH7K.mjs';
 import { defineComponent, inject, onMounted, onUnmounted } from 'vue';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{chunk-62NGBLQ7.mjs → chunks/chunk-QONZ3SCZ.mjs}

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

package/dist/{chunk-HANSF33Z.mjs → chunks/chunk-QOWKMWNO.mjs}

@@ -1,4 +1,4 @@
-import { CHART_METHODS_KEY, CHART_STATE_KEY, CHART_HOVER_KEY, RENDERER_HINT_KEY, CHART_REFRESH_NONCE_KEY, CHART_CORE_INSTANCE_KEY } from './chunk-FZ3PZ66C.mjs';
+import { CHART_METHODS_KEY, CHART_STATE_KEY, CHART_HOVER_KEY, RENDERER_HINT_KEY, CHART_REFRESH_NONCE_KEY, CHART_CORE_INSTANCE_KEY } from './chunk-4Q3QUNX6.mjs';
 import { createChart, defaultLightTheme } from '@primeui/chart-core';
 import { inject, shallowRef, ref, computed, watch, provide } from 'vue';
 

package/dist/{chunk-GA4VV5V4.mjs → chunks/chunk-R4AZOPXC.mjs}

@@ -1,4 +1,4 @@
-import { useChartMethods } from './chunk-HANSF33Z.mjs';
+import { useChartMethods } from './chunk-QOWKMWNO.mjs';
 import { defineComponent, onMounted, onUnmounted, renderSlot } from 'vue';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{chunk-5DWO3G33.mjs → chunks/chunk-SGLTVJUA.mjs}

@@ -1,9 +1,10 @@
-import { CartesianRenderer_default } from './chunk-HTZVV6VV.mjs';
-import { ScatterLayer_default } from './chunk-DYVFVVTO.mjs';
-import { registerFamilyRenderer, registerChartLayer, useDatasetAnimationRegistration, useDatasetRegistration, useItemCollector } from './chunk-CQHNYT2V.mjs';
-import { useRendererHint, useChartMethods } from './chunk-HANSF33Z.mjs';
+import { CartesianRenderer_default } from './chunk-YZQS2YBK.mjs';
+import { ScatterLayer_default } from './chunk-LJZCE7LQ.mjs';
+import { registerFamilyRenderer, registerChartLayer, useDatasetAnimationRegistration, useDatasetRegistration, useItemCollector } from './chunk-I2BWSDNR.mjs';
+import { useRendererHint, useChartMethods } from './chunk-QOWKMWNO.mjs';
 import { defineComponent, useSlots, computed, onMounted, watch, onUnmounted, renderSlot, createCommentVNode } from 'vue';
-import { scatterRenderer, resolveAccessor } from '@primeui/chart-core';
+import { resolveAccessor } from '@primeui/chart-core/utils';
+import { scatterRenderer } from '@primeui/chart-core/series/scatter';
 
 var scatterIdCounter = 0;
 var _sfc_main = /* @__PURE__ */ defineComponent({
@@ -11,38 +12,38 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     id: {},
     data: {},
-    categoryField: { type: [
+    name: {},
+    color: { type: [
       String,
       Function,
       Array
     ] },
-    valueField: { type: [
+    xAxisId: {},
+    yAxisId: {},
+    order: {},
+    stackId: {},
+    categoryXField: { type: [
       String,
       Function,
-      Number,
-      null,
       Array
     ] },
-    name: {},
-    color: { type: [
+    categoryYField: { type: [
       String,
       Function,
       Array
     ] },
-    xAxisId: {},
-    yAxisId: {},
-    order: {},
-    stackId: {},
-    xField: { type: [
+    valueXField: { type: [
       String,
       Function,
       Number,
+      null,
       Array
     ] },
-    yField: { type: [
+    valueYField: { type: [
       String,
       Function,
       Number,
+      null,
       Array
     ] },
     sizeField: { type: [
@@ -159,8 +160,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       const datasetProps = computed(() => ({
         id: autoId,
         data: props.data,
-        xField: props.xField,
-        yField: props.yField,
+        categoryXField: props.categoryXField,
+        categoryYField: props.categoryYField,
+        valueXField: props.valueXField,
+        valueYField: props.valueYField,
         sizeField: props.sizeField,
         color: props.color,
         name: props.name,
@@ -197,11 +200,22 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     if (hasChildren.value) {
       let buildSynthesizedProps2 = function() {
         const items = getItems();
+        const categorical = items.some((it) => it.categoryX != null || it.categoryY != null);
+        const horizontal = items.some((it) => it.categoryY != null);
+        const axisBinding = categorical ? horizontal ? {
+          categoryYField: (ctx) => ctx.datum.categoryY ?? "",
+          valueXField: (ctx) => ctx.datum.valueX ?? 0
+        } : {
+          categoryXField: (ctx) => ctx.datum.categoryX ?? "",
+          valueYField: (ctx) => ctx.datum.valueY ?? 0
+        } : {
+          valueXField: (ctx) => ctx.datum.valueX ?? 0,
+          valueYField: (ctx) => ctx.datum.valueY ?? 0
+        };
         return {
           id: autoId,
           data: items,
-          xField: (ctx) => ctx.datum.x ?? 0,
-          yField: (ctx) => ctx.datum.y ?? 0,
+          ...axisBinding,
           color: ((ctx) => ctx.datum.color ?? resolveAccessor(props.color, ctx)),
           name: props.name,
           markerSize: props.markerSize,

package/dist/{chunk-5FTUGKPC.mjs → chunks/chunk-TRGN3ZMM.mjs}

@@ -1,6 +1,6 @@
-import { LEGEND_ITEM_BASE_STYLE, LEGEND_SWATCH_STYLE } from './chunk-J43KLCZF.mjs';
-import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeStyle, Fragment, renderList, createBlock, resolveDynamicComponent, createCommentVNode, createElementVNode, toDisplayString, nextTick } from 'vue';
-import { computeLegendStyle, gradientToCssBackground } from '@primeui/chart-core';
+import { LEGEND_ITEM_BASE_STYLE, LEGEND_SWATCH_STYLE } from './chunk-ZH4A4L6W.mjs';
+import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeStyle, Fragment, renderList, createBlock, resolveDynamicComponent, unref, createCommentVNode, createElementVNode, toDisplayString, nextTick } from 'vue';
+import { computeLegendStyle, safeRenderProp, gradientToCssBackground } from '@primeui/chart-core';
 
 var _hoisted_1 = ["dir"];
 var _hoisted_2 = {
@@ -128,7 +128,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         class: "chart-legend",
         dir: __props.dir ?? "ltr"
       }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.legendItems, (item, idx) => {
-        return openBlock(), createElementBlock(Fragment, { key: itemKey(item, idx) }, [__props.legendConfig.render ? (openBlock(), createElementBlock("div", _hoisted_2, [(openBlock(), createBlock(resolveDynamicComponent(() => __props.legendConfig.render({
+        return openBlock(), createElementBlock(Fragment, { key: itemKey(item, idx) }, [__props.legendConfig.render ? (openBlock(), createElementBlock("div", _hoisted_2, [(openBlock(), createBlock(resolveDynamicComponent(() => unref(safeRenderProp)(() => __props.legendConfig.render({
           type: item.type,
           datasetId: item.datasetId,
           index: item.index,
@@ -143,7 +143,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           onClick: () => handleClick(item),
           onMouseEnter: () => handleHover(item),
           onMouseLeave: () => handleHover(null)
-        }))))])) : (openBlock(), createElementBlock("button", {
+        }), "legend"))))])) : (openBlock(), createElementBlock("button", {
           key: 1,
           type: "button",
           role: __props.legendConfig.interactive ? "switch" : void 0,

package/dist/{chunk-RSAZ7V5Z.mjs → chunks/chunk-TZ23VBFU.mjs}

@@ -1,5 +1,5 @@
-import { DECIMATION_CONTEXT_KEY } from './chunk-TEOO4OLV.mjs';
-import { useChartMethods } from './chunk-HANSF33Z.mjs';
+import { DECIMATION_CONTEXT_KEY } from './chunk-L6N5IYAJ.mjs';
+import { useChartMethods } from './chunk-QOWKMWNO.mjs';
 import { defineComponent, watch, onBeforeUnmount, computed, provide, renderSlot } from 'vue';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{chunk-4UVPCLJ7.mjs → chunks/chunk-U6X3GVJ3.mjs}

@@ -1,4 +1,4 @@
-import { useChartMethods } from './chunk-HANSF33Z.mjs';
+import { useChartMethods } from './chunk-QOWKMWNO.mjs';
 import { defineComponent, computed, onMounted, watch, onUnmounted } from 'vue';
 
 var referenceBandIdCounter = 0;

package/dist/{chunk-J2P5JBHC.mjs → chunks/chunk-UOMQNZMT.mjs}

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

package/dist/{chunk-4THCGGER.mjs → chunks/chunk-UOZFNTVQ.mjs}

@@ -1,5 +1,5 @@
-import { useCustomizationRegistration } from './chunk-PQV55JYI.mjs';
-import { CHART_METHODS_KEY, CHART_GROUP_TEXT_KEY } from './chunk-FZ3PZ66C.mjs';
+import { useCustomizationRegistration } from './chunk-ZLD5VNMP.mjs';
+import { CHART_METHODS_KEY, CHART_GROUP_TEXT_KEY } from './chunk-4Q3QUNX6.mjs';
 import { defineComponent, inject, computed, onMounted, watch, onUnmounted } from 'vue';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{chunk-TIV2FI4S.mjs → chunks/chunk-WVNDZNMV.mjs}

@@ -1,5 +1,5 @@
-import { STACKED_CONTEXT_KEY } from './chunk-TEOO4OLV.mjs';
-import { useChartMethods } from './chunk-HANSF33Z.mjs';
+import { STACKED_CONTEXT_KEY } from './chunk-L6N5IYAJ.mjs';
+import { useChartMethods } from './chunk-QOWKMWNO.mjs';
 import { defineComponent, onMounted, reactive, watch, onUnmounted, provide, renderSlot } from 'vue';
 
 var stackIdCounter = 0;

package/dist/{chunk-GFC24374.mjs → chunks/chunk-X4NWFK7L.mjs}

@@ -1,7 +1,7 @@
-import { useCustomizationRegistration } from './chunk-PQV55JYI.mjs';
-import { useChartMethods, useChartState } from './chunk-HANSF33Z.mjs';
+import { useCustomizationRegistration } from './chunk-ZLD5VNMP.mjs';
+import { useChartMethods, useChartState } from './chunk-QOWKMWNO.mjs';
 import { defineComponent, computed, ref, onMounted, nextTick, onBeforeUnmount, openBlock, createBlock, Teleport, createElementVNode, withModifiers, normalizeStyle, normalizeClass, resolveDynamicComponent, createElementBlock, unref, Fragment, renderList, toDisplayString, createCommentVNode } from 'vue';
-import { resolveExportMenuProps, filterExportMenuItems, EXPORT_MENU_CONSTANTS, resolveExportMenuPlacement, estimateExportMenuHeight, HAMBURGER_ICON_PATH, isExportMenuSeparator, createChartExporter, getExportAction, buildChartDataTable, dataTableToCsv, EXPORT_MENU_LABELS } from '@primeui/chart-core';
+import { resolveExportMenuProps, filterExportMenuItems, EXPORT_MENU_CONSTANTS, resolveExportMenuPlacement, estimateExportMenuHeight, HAMBURGER_ICON_PATH, isExportMenuSeparator, safeRenderProp, createChartExporter, getExportAction, buildChartDataTable, dataTableToCsv, EXPORT_MENU_LABELS } from '@primeui/chart-core';
 
 var _hoisted_1 = ["aria-expanded"];
 var _hoisted_2 = {
@@ -210,12 +210,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             background: "var(--p-chart-export-menu-separator-color, #dee2e6)",
             margin: "4px 8px"
           })
-        }, null, 4)) : __props.render ? (openBlock(), createBlock(resolveDynamicComponent(() => __props.render({
+        }, null, 4)) : __props.render ? (openBlock(), createBlock(resolveDynamicComponent(() => unref(safeRenderProp)(() => __props.render({
           item,
           label: getItemLabel(item),
           onClick: () => handleExport(item),
           isHovered: hoveredItem.value === item
-        })), { key: 1 })) : (openBlock(), createElementBlock("button", {
+        }), "export menu item")), { key: 1 })) : (openBlock(), createElementBlock("button", {
           key: 2,
           type: "button",
           role: "menuitem",