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

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({

package/dist/{chunk-4CRHCZV3.mjs → chunks/chunk-CMJXLIEY.mjs}

@@ -1,8 +1,118 @@
-import { useCartesianFrame, useLineRenderer, useCartesianFrameRegistration } from './chunk-CQHNYT2V.mjs';
-import { useChartMethods, useChartState, useChartHover } from './chunk-HANSF33Z.mjs';
-import { defineComponent, computed, h, unref, openBlock, createElementBlock, createCommentVNode } from 'vue';
-import { resolvePointLabels } from '@primeui/chart-core';
+import { useControllerLifecycle } from './chunk-KNNYJD4D.mjs';
+import { useCartesianFrame, useCartesianFrameRegistration } from './chunk-I2BWSDNR.mjs';
+import { useChartMethods, useChartState, useChartHover } from './chunk-QOWKMWNO.mjs';
+import { defineComponent, computed, h, unref, openBlock, createElementBlock, createCommentVNode, ref, shallowRef, watch } from 'vue';
+import { resolvePointLabels, safeRenderProp } from '@primeui/chart-core';
+import { createLineRendererCanvas } from '@primeui/chart-core/series/line/controller-canvas';
+import { createLineRendererSvg } from '@primeui/chart-core/series/line/controller-svg';
 
+function useLineRenderer(options) {
+  const {
+    chartArea,
+    renderer,
+    canvasEl,
+    datasets,
+    datasetVisibility,
+    hover,
+    hoverConfig,
+    chartId,
+    width,
+    height,
+    categoryScale,
+    valueScales,
+    firstValueAxisId,
+    axisIdProp,
+    orientation,
+    lineStackBasesMap,
+    lineTransformedValues,
+    rangeGroups,
+    features,
+    compositor,
+    layoutData,
+    dir,
+    theme
+  } = options;
+  const groupRef = ref(null);
+  const controller = renderer === "canvas" ? createLineRendererCanvas() : createLineRendererSvg();
+  const layoutCacheRef = shallowRef(/* @__PURE__ */ new Map());
+  const liveLayoutsRef = shallowRef(controller.renderedLayouts);
+  const renderPropsCacheRef = shallowRef(/* @__PURE__ */ new Map());
+  const markerOverlaysRef = ref([]);
+  controller.onFrame = () => {
+    markerOverlaysRef.value = controller.markerOverlays;
+    liveLayoutsRef.value = controller.renderedLayouts;
+  };
+  watch(
+    [datasets, datasetVisibility, chartArea, categoryScale, valueScales, firstValueAxisId, axisIdProp, lineStackBasesMap, lineTransformedValues, rangeGroups, features, groupRef, width, height, dir, theme],
+    () => {
+      if (renderer === "svg" && !groupRef.value) return;
+      controller.update({
+        datasets: datasets.value,
+        datasetVisibility: datasetVisibility.value,
+        chartArea: chartArea.value,
+        chartId,
+        width: width.value,
+        height: height.value,
+        renderer,
+        categoryScale: categoryScale.value,
+        valueXScales: layoutData?.value?.valueXScales,
+        valueScales: valueScales.value,
+        firstValueAxisId: firstValueAxisId.value,
+        axisIdProp: axisIdProp.value,
+        orientation: orientation?.value,
+        lineStackBasesMap: lineStackBasesMap.value,
+        lineTransformedValues: lineTransformedValues.value,
+        groupedDataOverride: layoutData?.value?.groupedDataOverride,
+        layoutData: layoutData?.value ?? null,
+        rangeGroups: rangeGroups.value,
+        features: features.value,
+        hover: hover.value,
+        hoverConfig: hoverConfig.value,
+        compositor,
+        canvasEl: canvasEl.value,
+        svgGroup: groupRef.value,
+        labelConfig: options.labelConfig?.value,
+        dir: dir.value,
+        theme: theme.value
+      });
+      layoutCacheRef.value = controller.layouts;
+      liveLayoutsRef.value = controller.renderedLayouts;
+      renderPropsCacheRef.value = controller.renderProps;
+      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);
+  }
+  function findAllNearest(x, y) {
+    return controller.findAllNearest(x, y);
+  }
+  function syncWithAnimatedScale(categoryScale2, valueScales2) {
+    controller.syncWithAnimatedScale(categoryScale2, valueScales2);
+    markerOverlaysRef.value = controller.markerOverlays;
+    liveLayoutsRef.value = controller.renderedLayouts;
+  }
+  return {
+    groupRef,
+    hitTest,
+    findAllNearest,
+    lineLayouts: layoutCacheRef,
+    liveLayouts: liveLayoutsRef,
+    lineRenderProps: renderPropsCacheRef,
+    subscribeTipPositions: (cb) => controller.subscribeTipPositions(cb),
+    markerOverlays: markerOverlaysRef,
+    syncWithAnimatedScale,
+    applyPropertyAnimations,
+    renderFrameCycle
+  };
+}
+
+// src/components/renderers/layers/LineLayer.vue
 var _hoisted_1 = ["clip-path"];
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LineLayer",
@@ -27,6 +137,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       valueScales: computed(() => frame.layoutData.value?.valueScales),
       firstValueAxisId: computed(() => frame.layoutData.value?.valueScales?.keys().next().value ?? "default"),
       axisIdProp: computed(() => frame.layoutData.value?.orientation === "horizontal" ? "xAxisId" : "yAxisId"),
+      orientation: computed(() => frame.layoutData.value?.orientation ?? "vertical"),
       lineStackBasesMap: computed(() => frame.layoutData.value?.lineStackBasesMap),
       lineTransformedValues: computed(() => frame.layoutData.value?.lineTransformedValues),
       rangeGroups: computed(() => frame.layoutData.value?.rangeGroups),
@@ -42,14 +153,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       if (methods.renderer !== "svg" || !frame.layoutData.value || !lc?.render) return [];
       const visibility = state.value.datasetVisibility;
       const nodes = [];
-      for (const [dsId, lineLayout] of line.lineLayouts.value) {
+      for (const [dsId, lineLayout] of line.liveLayouts.value) {
         if (visibility?.get(dsId) === false) continue;
         const lineProps = line.lineRenderProps.value.get(dsId);
         const seriesColor = typeof lineProps?.color === "string" ? lineProps.color : typeof lineLayout.lineColor === "string" ? lineLayout.lineColor : lc.color ?? "";
         const dsTotal = lineLayout.visiblePoints.reduce((sum, pt) => sum + Math.abs(pt.value ?? 0), 0);
         const resolved = resolvePointLabels(lineLayout.visiblePoints, seriesColor, dsTotal, lc, lineProps?.name);
         for (const lbl of resolved) {
-          const result = lc.render({
+          const result = safeRenderProp(() => lc.render({
             index: lbl.dataIndex,
             value: lbl.value,
             percentage: lbl.percentage,
@@ -58,7 +169,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             color: lbl.color,
             x: lbl.x,
             y: lbl.y
-          });
+          }), "data label");
           if (result != null) {
             nodes.push(h("g", {
               key: `line-${dsId}-${lbl.dataIndex}`,
@@ -98,7 +209,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           snapX: lnHit.x,
           snapY: lnHit.y,
           formattedValue: fmtVal,
-          cursorFormattedValue: ""
+          cursorFormattedValue: "",
+          independentIsCategory: lnHit.independentIsCategory,
+          xValue: lnHit.xValue,
+          yValue: lnHit.yValue,
+          xAxisTitle: lnHit.xAxisTitle,
+          yAxisTitle: lnHit.yAxisTitle
         };
       },
       findAllNearest: (x, y) => line.findAllNearest(x, y),
@@ -126,7 +242,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return unref(methods).renderer === "svg" && unref(line).hasLineData.value ? (openBlock(), createElementBlock("g", {
+      return unref(methods).renderer === "svg" ? (openBlock(), createElementBlock("g", {
         key: 0,
         ref: (el) => {
           unref(line).groupRef.value = el;

package/dist/{chunk-42J32DPD.mjs → chunks/chunk-CRIB3I3L.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 referenceLineIdCounter = 0;

package/dist/{chunk-WKSQR6L5.mjs → chunks/chunk-CW2KYVYO.mjs}

@@ -1,9 +1,9 @@
-import { CandlestickLayer_default } from './chunk-FFBK7Q3W.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 { CandlestickLayer_default } from './chunk-YI3GLQYF.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 { candlestickRenderer } from '@primeui/chart-core';
+import { candlestickRenderer } from '@primeui/chart-core/series/candlestick';
 
 var candlestickIdCounter = 0;
 var _sfc_main = /* @__PURE__ */ defineComponent({
@@ -12,10 +12,28 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     id: {},
     name: {},
     data: {},
-    timeField: { type: [
+    categoryXField: { type: [
+      String,
+      Function,
+      Array
+    ] },
+    categoryYField: { type: [
+      String,
+      Function,
+      Array
+    ] },
+    valueXField: { type: [
+      String,
+      Function,
+      Number,
+      null,
+      Array
+    ] },
+    valueYField: { type: [
       String,
       Function,
       Number,
+      null,
       Array
     ] },
     openField: { type: [
@@ -136,7 +154,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       const datasetProps = computed(() => ({
         id: autoId,
         data: props.data,
-        timeField: props.timeField,
+        categoryXField: props.categoryXField,
+        categoryYField: props.categoryYField,
+        valueXField: props.valueXField,
+        valueYField: props.valueYField,
         openField: props.openField,
         highField: props.highField,
         lowField: props.lowField,
@@ -172,10 +193,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     if (hasChildren.value) {
       let buildSynthesizedProps2 = function() {
         const items = getItems();
+        const horizontal = items.some((it) => it.categoryY != null);
+        const axisBinding = horizontal ? { categoryYField: (ctx) => ctx.datum.categoryY ?? "" } : { categoryXField: (ctx) => ctx.datum.categoryX ?? "" };
         return {
           id: autoId,
           data: items,
-          timeField: (ctx) => ctx.datum.time ?? ctx.datum.label ?? "",
+          ...axisBinding,
           openField: (ctx) => ctx.datum.open ?? 0,
           highField: (ctx) => ctx.datum.high ?? 0,
           lowField: (ctx) => ctx.datum.low ?? 0,

package/dist/{chunk-644ROAHU.mjs → chunks/chunk-DDRSIMLE.mjs}

@@ -1,10 +1,10 @@
-import { CartesianRenderer_default } from './chunk-HTZVV6VV.mjs';
-import { LineLayer_default } from './chunk-4CRHCZV3.mjs';
-import { registerFamilyRenderer, registerChartLayer, useDatasetAnimationRegistration, useDatasetRegistration, useItemCollector } from './chunk-CQHNYT2V.mjs';
-import { STACKED_CONTEXT_KEY, RANGE_CONTEXT_KEY } from './chunk-TEOO4OLV.mjs';
-import { useRendererHint, useChartMethods } from './chunk-HANSF33Z.mjs';
+import { CartesianRenderer_default } from './chunk-YZQS2YBK.mjs';
+import { LineLayer_default } from './chunk-CMJXLIEY.mjs';
+import { registerFamilyRenderer, registerChartLayer, useDatasetAnimationRegistration, useDatasetRegistration, useItemCollector } from './chunk-I2BWSDNR.mjs';
+import { STACKED_CONTEXT_KEY, RANGE_CONTEXT_KEY } from './chunk-L6N5IYAJ.mjs';
+import { useRendererHint, useChartMethods } from './chunk-QOWKMWNO.mjs';
 import { defineComponent, useSlots, computed, inject, onMounted, watch, onUnmounted, renderSlot, createCommentVNode } from 'vue';
-import { lineRenderer } from '@primeui/chart-core';
+import { lineRenderer } from '@primeui/chart-core/series/line';
 
 var lineIdCounter = 0;
 var _sfc_main = /* @__PURE__ */ defineComponent({
@@ -13,12 +13,24 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     id: {},
     boost: { type: [Boolean, String] },
     data: {},
-    categoryField: { type: [
+    categoryXField: { type: [
       String,
       Function,
       Array
     ] },
-    valueField: { type: [
+    categoryYField: { type: [
+      String,
+      Function,
+      Array
+    ] },
+    valueXField: { type: [
+      String,
+      Function,
+      Number,
+      null,
+      Array
+    ] },
+    valueYField: { type: [
       String,
       Function,
       Number,
@@ -193,8 +205,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         const p = {
           id: autoId,
           data: props.data,
-          categoryField: props.categoryField,
-          valueField: props.valueField,
+          categoryXField: props.categoryXField,
+          categoryYField: props.categoryYField,
+          valueXField: props.valueXField,
+          valueYField: props.valueYField,
           color: props.color,
           name: props.name,
           order: effectiveOrder,
@@ -254,11 +268,18 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     if (hasChildren.value) {
       let buildSynthesizedProps2 = function() {
         const items = getItems();
+        const horizontal = items.some((it) => it.categoryY != null);
+        const axisBinding = horizontal ? {
+          categoryYField: (ctx) => ctx.datum.categoryY ?? "",
+          valueXField: (ctx) => ctx.datum.valueX
+        } : {
+          categoryXField: (ctx) => ctx.datum.categoryX ?? "",
+          valueYField: (ctx) => ctx.datum.valueY
+        };
         return {
           id: autoId,
           data: items,
-          categoryField: (ctx) => ctx.datum.label ?? "",
-          valueField: (ctx) => ctx.datum.value,
+          ...axisBinding,
           pointColors: items.some((i) => i.color != null) ? items.map((i) => i.color) : void 0,
           name: props.name,
           color: props.color,

package/dist/{chunk-32XIRBZ7.mjs → chunks/chunk-DXKAPWMO.mjs}

@@ -1,5 +1,5 @@
-import { AXIS_GROUP_REGISTRY_KEY } from './chunk-5SRBQVU5.mjs';
-import { useAxisComponentBase } from './chunk-CQHNYT2V.mjs';
+import { AXIS_GROUP_REGISTRY_KEY } from './chunk-EHSDNH7K.mjs';
+import { useAxisComponentBase } from './chunk-I2BWSDNR.mjs';
 import { defineComponent, useSlots, computed, provide, renderSlot } from 'vue';
 
 var __default__ = { inheritAttrs: false };

package/dist/{chunk-44BAFHPK.mjs → chunks/chunk-EWDMF46D.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({
@@ -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