@primeui/vue-chart 0.0.1-alpha.1

package/dist/chunk-42J32DPD.mjs

@@ -0,0 +1,70 @@
+import { useChartMethods } from './chunk-HANSF33Z.mjs';
+import { defineComponent, computed, onMounted, watch, onUnmounted } from 'vue';
+
+var referenceLineIdCounter = 0;
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ChartReferenceLine",
+  props: {
+    id: {},
+    render: { type: Function },
+    x: {},
+    y: {},
+    stroke: {},
+    lineStrokeWidth: {},
+    strokeDasharray: {},
+    label: {},
+    labelPosition: {},
+    labelAngle: {},
+    labelColor: {},
+    labelFontSize: {},
+    labelFontWeight: {},
+    labelBackground: {},
+    labelBackgroundOpacity: {},
+    labelPadding: {},
+    labelBorderRadius: {},
+    yAxisId: {},
+    placement: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const methods = useChartMethods();
+    const lineId = props.id || `rl-vue-${++referenceLineIdCounter}`;
+    const featureKey = `referenceLine:${lineId}`;
+    const config = computed(() => ({
+      referenceLineId: lineId,
+      x: props.x,
+      y: props.y,
+      stroke: props.stroke,
+      lineStrokeWidth: props.lineStrokeWidth,
+      strokeDasharray: props.strokeDasharray,
+      label: props.label,
+      labelPosition: props.labelPosition,
+      labelAngle: props.labelAngle,
+      labelColor: props.labelColor,
+      labelFontSize: props.labelFontSize,
+      labelFontWeight: props.labelFontWeight,
+      labelBackground: props.labelBackground,
+      labelBackgroundOpacity: props.labelBackgroundOpacity,
+      labelPadding: props.labelPadding,
+      labelBorderRadius: props.labelBorderRadius,
+      yAxisId: props.yAxisId,
+      placement: props.placement,
+      render: props.render
+    }));
+    onMounted(() => {
+      methods.registerCustomization(featureKey, config.value);
+    });
+    watch(config, (cfg) => {
+      methods.registerCustomization(featureKey, cfg);
+    });
+    onUnmounted(() => {
+      methods.unregisterCustomization(featureKey);
+    });
+    return (_ctx, _cache) => {
+      return null;
+    };
+  }
+});
+var ChartReferenceLine_default = _sfc_main;
+
+export { ChartReferenceLine_default };

package/dist/chunk-44BAFHPK.mjs

@@ -0,0 +1,51 @@
+import { Chart_default } from './chunk-372K2BMN.mjs';
+import { defineComponent, ref, openBlock, createBlock, mergeProps, withCtx, renderSlot } from 'vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ChartSvg",
+  props: {
+    width: {},
+    height: {},
+    class: {},
+    style: {},
+    theme: {},
+    plugins: {},
+    responsive: {
+      type: Boolean,
+      default: true
+    },
+    aspectRatio: {},
+    debounceDelay: {},
+    sync: { type: [Boolean, Object] },
+    dir: {},
+    fontFamily: {},
+    fontSize: {},
+    locale: {},
+    animation: {
+      type: [Object, Boolean],
+      default: void 0
+    },
+    animations: {},
+    transitions: {}
+  },
+  emits: ["resize"],
+  setup(__props, { expose: __expose }) {
+    const chartRef = ref(null);
+    __expose({ redraw: () => chartRef.value?.redraw() });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Chart_default, mergeProps({
+        ref_key: "chartRef",
+        ref: chartRef
+      }, _ctx.$props, {
+        renderer: "svg",
+        onResize: _cache[0] || (_cache[0] = (w, h) => _ctx.$emit("resize", w, h))
+      }), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+var ChartSvg_default = _sfc_main;
+
+export { ChartSvg_default };

package/dist/chunk-4CRHCZV3.mjs

@@ -0,0 +1,142 @@
+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';
+
+var _hoisted_1 = ["clip-path"];
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LineLayer",
+  setup(__props) {
+    const frame = useCartesianFrame();
+    const methods = useChartMethods();
+    const state = useChartState();
+    const hoverCtx = useChartHover();
+    const features = computed(() => state.value.features);
+    const line = useLineRenderer({
+      chartArea: frame.cartesianArea,
+      renderer: methods.renderer,
+      canvasEl: frame.canvasEl,
+      datasets: computed(() => state.value.datasets),
+      datasetVisibility: computed(() => state.value.datasetVisibility),
+      hover: computed(() => hoverCtx.value.hover),
+      hoverConfig: frame.hoverConfig,
+      chartId: methods.chartId,
+      width: frame.width,
+      height: frame.height,
+      categoryScale: computed(() => frame.layoutData.value?.sharedCategoryScale),
+      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"),
+      lineStackBasesMap: computed(() => frame.layoutData.value?.lineStackBasesMap),
+      lineTransformedValues: computed(() => frame.layoutData.value?.lineTransformedValues),
+      rangeGroups: computed(() => frame.layoutData.value?.rangeGroups),
+      features,
+      labelConfig: frame.labelConfig,
+      layoutData: frame.layoutData,
+      compositor: frame.compositor,
+      dir: computed(() => methods.dir),
+      theme: computed(() => methods.theme)
+    });
+    const dataLabelVNodes = computed(() => {
+      const lc = frame.labelConfig.value;
+      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) {
+        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({
+            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
+          });
+          if (result != null) {
+            nodes.push(h("g", {
+              key: `line-${dsId}-${lbl.dataIndex}`,
+              transform: `translate(${lbl.x},${lbl.y})`,
+              "text-anchor": lbl.textAnchor,
+              "dominant-baseline": lbl.baseline
+            }, [result]));
+          }
+        }
+      }
+      return nodes;
+    });
+    useCartesianFrameRegistration({
+      type: "line",
+      hitTest: (x, y) => {
+        const lnHit = line.hitTest(x, y);
+        if (!lnHit) return null;
+        let fmtVal = String(lnHit.value);
+        const ld = frame.layoutData.value;
+        if (ld?.axisLayouts) {
+          for (const [key, info] of ld.axisLayouts) {
+            if (key.startsWith("y:")) {
+              const fmt = info.props?.tickFormat;
+              if (typeof fmt === "function") {
+                fmtVal = String(fmt(lnHit.value));
+                break;
+              }
+            }
+          }
+        }
+        return {
+          datasetId: lnHit.datasetId,
+          index: lnHit.index,
+          label: lnHit.label,
+          value: lnHit.value,
+          color: lnHit.color,
+          snapX: lnHit.x,
+          snapY: lnHit.y,
+          formattedValue: fmtVal,
+          cursorFormattedValue: ""
+        };
+      },
+      findAllNearest: (x, y) => line.findAllNearest(x, y),
+      applyPropertyAnimations: (store) => line.applyPropertyAnimations(store),
+      renderFrameCycle: () => line.renderFrameCycle(),
+      syncWithAnimatedScale: (categoryScale, valueScales) => line.syncWithAnimatedScale(categoryScale, valueScales),
+      dataLabelVNodes,
+      markerOverlays: line.markerOverlays,
+      getPointPosition: (datasetId, index) => {
+        const lineLayout = line.lineLayouts.value.get(datasetId);
+        if (lineLayout) {
+          const found = lineLayout.visiblePoints.find((p) => p.dataIndex === index);
+          if (found) {
+            const r = 6;
+            return {
+              x: found.x - r,
+              y: found.y - r,
+              width: r * 2,
+              height: r * 2,
+              shape: "circle"
+            };
+          }
+        }
+        return null;
+      }
+    });
+    return (_ctx, _cache) => {
+      return unref(methods).renderer === "svg" && unref(line).hasLineData.value ? (openBlock(), createElementBlock("g", {
+        key: 0,
+        ref: (el) => {
+          unref(line).groupRef.value = el;
+        },
+        class: "line-chart",
+        "clip-path": unref(frame).layoutData.value?.cartesianArea ? `url(#${unref(frame).plotClipId})` : void 0
+      }, null, 8, _hoisted_1)) : createCommentVNode("", true);
+    };
+  }
+});
+var LineLayer_default = _sfc_main;
+
+export { LineLayer_default };

package/dist/chunk-4NJ2PSHV.mjs

@@ -0,0 +1,230 @@
+import { provideRadialFrame, useChartLayers, usePropertyAnimations } from './chunk-CQHNYT2V.mjs';
+import { useChartMethods, useChartState } from './chunk-HANSF33Z.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';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "RadialRenderer",
+  props: {
+    chartArea: {},
+    width: {},
+    height: {},
+    canvasEl: {},
+    containerEl: {},
+    adaptiveDataLabelFontSize: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const methods = useChartMethods();
+    const state = useChartState();
+    const frame = provideRadialFrame();
+    const chartLayers = useChartLayers();
+    const gridLayers = computed(() => collectRadialLayers("grid"));
+    const framelessLayers = computed(() => collectRadialLayers(null));
+    function collectRadialLayers(frameKind) {
+      if (!chartLayers) return [];
+      const out = [];
+      for (const [type, entry] of chartLayers) {
+        if (entry.family === "radial" && entry.frameKind === frameKind && entry.layer) out.push({
+          type,
+          layer: entry.layer
+        });
+      }
+      return out;
+    }
+    const isCombo = computed(() => {
+      const vals = Array.from(state.value.datasets.values());
+      return vals.some((ds) => ds.type === "radar") && vals.some((ds) => ds.type === "polar");
+    });
+    const sharedContext = computed(() => {
+      if (!isCombo.value) return null;
+      const sortedDatasets = Array.from(state.value.datasets.entries()).sort(([, a], [, b]) => a.order - b.order);
+      const { radar: radarEntries, polar: polarEntries } = collectItems(sortedDatasets, state.value.datasetVisibility);
+      return computeRadialComboContext(radarEntries, polarEntries);
+    });
+    let _stickyGridLayout = null;
+    function buildGridLayout() {
+      const radarRaw = frame.handles.get("radar")?.layout?.value;
+      const polarRaw = frame.handles.get("polar")?.layout?.value;
+      const src = radarRaw ? {
+        ...radarRaw,
+        radius: radarRaw.radius
+      } : polarRaw ? {
+        ...polarRaw,
+        radius: polarRaw.maxRadius
+      } : null;
+      if (!src) return _stickyGridLayout ? withReferenceFeatures(_stickyGridLayout, state.value.features) : null;
+      const xAxisProps = [...state.value.axes.x.values()][0]?.props;
+      let defaultYAxisProps;
+      const yAxesByCategory = /* @__PURE__ */ new Map();
+      for (const axis of state.value.axes.y.values()) {
+        const yProps = axis.props;
+        const cat = yProps.category;
+        if (cat) yAxesByCategory.set(cat, yProps);
+        else if (!defaultYAxisProps) defaultYAxisProps = yProps;
+      }
+      const layout = buildRadialGridLayout(src, xAxisProps, defaultYAxisProps, yAxesByCategory.size > 0 ? yAxesByCategory : void 0, radarRaw ? "radar" : "polar");
+      _stickyGridLayout = layout;
+      return withReferenceFeatures(layout, state.value.features);
+    }
+    function redrawCanvas() {
+      if (methods.renderer !== "canvas") return;
+      const canvas = props.canvasEl;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      redrawRadialCanvas(ctx, canvas, buildGridLayout(), frame.handles.get("polar")?.renderCanvasContent ?? null, frame.handles.get("radar")?.renderCanvasContent ?? null, methods.theme);
+    }
+    const radialAxes = computed(() => ({
+      x: state.value.axes.x,
+      y: state.value.axes.y
+    }));
+    const gridLayerLayouts = computed(() => [frame.handles.get("radar")?.layout?.value ?? null, frame.handles.get("polar")?.layout?.value ?? null]);
+    const sharedGridGroupRef = ref(null);
+    watch([
+      gridLayerLayouts,
+      sharedGridGroupRef,
+      () => state.value.features,
+      radialAxes
+    ], () => {
+      const group = sharedGridGroupRef.value;
+      if (!group) return;
+      while (group.firstChild) {
+        group.removeChild(group.firstChild);
+      }
+      const gridLayout = buildGridLayout();
+      if (gridLayout) {
+        group.appendChild(materializeSvgGroup(renderRadialGridSvg(gridLayout, methods.theme)));
+      }
+    }, { flush: "post" });
+    function hitTest(x, y) {
+      return frame.handles.get("polar")?.hitTest(x, y) ?? frame.handles.get("radar")?.hitTest(x, y) ?? frame.handles.get("pie")?.hitTest(x, y) ?? null;
+    }
+    function findAllNearest(x, y) {
+      const polar = frame.handles.get("polar")?.findAllNearest?.(x, y) ?? null;
+      const radar = frame.handles.get("radar")?.findAllNearest?.(x, y) ?? null;
+      if (polar && radar) {
+        const c = getCenter();
+        const cursorR = Math.hypot(x - c.x, y - c.y);
+        const snapOf = (res) => res.allSeries.find((s) => s.datasetId === res.primary.datasetId)?.snapPixel ?? 0;
+        const primary = Math.abs(snapOf(polar) - cursorR) <= Math.abs(snapOf(radar) - cursorR) ? polar.primary : radar.primary;
+        return {
+          primary,
+          allSeries: [...polar.allSeries, ...radar.allSeries]
+        };
+      }
+      return polar ?? radar ?? null;
+    }
+    function getPointPosition(datasetId, index) {
+      return frame.handles.get("radar")?.getPointPosition(datasetId, index) ?? frame.handles.get("pie")?.getPointPosition(datasetId, index) ?? frame.handles.get("polar")?.getPointPosition(datasetId, index) ?? null;
+    }
+    function getCenter() {
+      const ca = props.chartArea;
+      return frame.handles.get("pie")?.getCenter?.() ?? frame.handles.get("radar")?.getCenter?.() ?? frame.handles.get("polar")?.getCenter?.() ?? {
+        x: ca.x + ca.width / 2,
+        y: ca.y + ca.height / 2
+      };
+    }
+    function handleDrilldownClick(_hit) {
+      return false;
+    }
+    function getPlotArea() {
+      return props.chartArea ?? null;
+    }
+    function getColorScaleInfo() {
+      return null;
+    }
+    const mergedPropertyAnimations = computed(() => {
+      const f = state.value.features;
+      const animProps = f.get("animation")?.props;
+      if (animProps?.enabled === false) {
+        return void 0;
+      }
+      const merged = [];
+      if (animProps?.propertyAnimations) merged.push(...animProps.propertyAnimations);
+      f.forEach((entry, key) => {
+        if (typeof key !== "string" || !key.startsWith("animation:")) return;
+        const p = entry.props;
+        if (p.propertyAnimations) merged.push(...p.propertyAnimations);
+      });
+      if (!merged.length) {
+        return void 0;
+      }
+      return merged;
+    });
+    const animStoreRef = shallowRef(new AnimatedPropertyStore());
+    const animRegistry = new AnimationRegistry();
+    animRegistry.setRepaintCallback(() => {
+      const store = animStoreRef.value;
+      if (!store) return;
+      for (const handle of frame.handles.values()) handle.applyPropertyAnimations?.(store);
+    });
+    function onPropertyComplete() {
+      for (const handle of frame.handles.values()) handle.renderFrameCycle?.();
+    }
+    usePropertyAnimations(mergedPropertyAnimations, animRegistry, animStoreRef.value, onPropertyComplete);
+    onUnmounted(() => {
+      animRegistry.destroy();
+      animStoreRef.value?.destroy();
+      animStoreRef.value = null;
+    });
+    __expose({
+      hitTest,
+      findAllNearest,
+      handleDrilldownClick,
+      getPointPosition,
+      getCenter,
+      getPlotArea,
+      getColorScaleInfo
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        unref(methods).renderer === "svg" ? (openBlock(), createElementBlock("g", {
+          key: 0,
+          ref_key: "sharedGridGroupRef",
+          ref: sharedGridGroupRef
+        }, null, 512)) : createCommentVNode("", true),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(gridLayers.value, (layer) => {
+          return openBlock(), createBlock(resolveDynamicComponent(layer.layer), {
+            key: layer.type,
+            "chart-area": __props.chartArea,
+            width: __props.width,
+            height: __props.height,
+            "canvas-el": __props.canvasEl,
+            "adaptive-data-label-font-size": __props.adaptiveDataLabelFontSize,
+            "shared-context": sharedContext.value,
+            "request-redraw": redrawCanvas
+          }, null, 8, [
+            "chart-area",
+            "width",
+            "height",
+            "canvas-el",
+            "adaptive-data-label-font-size",
+            "shared-context"
+          ]);
+        }), 128)),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(framelessLayers.value, (layer) => {
+          return openBlock(), createBlock(resolveDynamicComponent(layer.layer), {
+            key: layer.type,
+            "chart-area": __props.chartArea,
+            width: __props.width,
+            height: __props.height,
+            "canvas-el": __props.canvasEl,
+            "container-el": __props.containerEl,
+            "adaptive-data-label-font-size": __props.adaptiveDataLabelFontSize
+          }, null, 8, [
+            "chart-area",
+            "width",
+            "height",
+            "canvas-el",
+            "container-el",
+            "adaptive-data-label-font-size"
+          ]);
+        }), 128))
+      ], 64);
+    };
+  }
+});
+var RadialRenderer_default = _sfc_main;
+
+export { RadialRenderer_default };

package/dist/chunk-4THCGGER.mjs

@@ -0,0 +1,53 @@
+import { useCustomizationRegistration } from './chunk-PQV55JYI.mjs';
+import { CHART_METHODS_KEY, CHART_GROUP_TEXT_KEY } from './chunk-FZ3PZ66C.mjs';
+import { defineComponent, inject, computed, onMounted, watch, onUnmounted } from 'vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ChartCaption",
+  props: {
+    fontWeight: {},
+    padding: {},
+    text: {},
+    position: {},
+    alignment: {},
+    offsetX: {},
+    offsetY: {},
+    fontSize: {},
+    fontFamily: {},
+    fontStyle: {},
+    lineHeight: {},
+    color: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const chartMethods = inject(CHART_METHODS_KEY, null);
+    const groupText = inject(CHART_GROUP_TEXT_KEY, null);
+    if (chartMethods) {
+      const registrationProps = computed(() => ({
+        text: props.text,
+        position: props.position,
+        alignment: props.alignment,
+        offsetX: props.offsetX,
+        offsetY: props.offsetY,
+        fontSize: props.fontSize,
+        fontWeight: props.fontWeight,
+        fontFamily: props.fontFamily,
+        fontStyle: props.fontStyle,
+        lineHeight: props.lineHeight,
+        color: props.color,
+        padding: props.padding
+      }));
+      useCustomizationRegistration("caption", registrationProps);
+    } else if (groupText) {
+      onMounted(() => groupText.setCaption(props.text));
+      watch(() => props.text, (t) => groupText.setCaption(t));
+      onUnmounted(() => groupText.setCaption(void 0));
+    }
+    return (_ctx, _cache) => {
+      return null;
+    };
+  }
+});
+var ChartCaption_default = _sfc_main;
+
+export { ChartCaption_default };

package/dist/chunk-4UVPCLJ7.mjs

@@ -0,0 +1,70 @@
+import { useChartMethods } from './chunk-HANSF33Z.mjs';
+import { defineComponent, computed, onMounted, watch, onUnmounted } from 'vue';
+
+var referenceBandIdCounter = 0;
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ChartReferenceBand",
+  props: {
+    id: {},
+    render: { type: Function },
+    x1: {},
+    x2: {},
+    y1: {},
+    y2: {},
+    fill: {},
+    fillOpacity: {},
+    stroke: {},
+    label: {},
+    labelPosition: {},
+    labelAngle: {},
+    labelColor: {},
+    labelFontSize: {},
+    labelFontWeight: {},
+    bracket: { type: [Boolean, Object] },
+    separator: { type: [Boolean, Object] },
+    yAxisId: {},
+    placement: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const methods = useChartMethods();
+    const bandId = props.id || `rb-vue-${++referenceBandIdCounter}`;
+    const featureKey = `referenceBand:${bandId}`;
+    const config = computed(() => ({
+      referenceBandId: bandId,
+      x1: props.x1,
+      x2: props.x2,
+      y1: props.y1,
+      y2: props.y2,
+      fill: props.fill,
+      fillOpacity: props.fillOpacity,
+      stroke: props.stroke,
+      label: props.label,
+      labelPosition: props.labelPosition,
+      labelAngle: props.labelAngle,
+      labelColor: props.labelColor,
+      labelFontSize: props.labelFontSize,
+      labelFontWeight: props.labelFontWeight,
+      bracket: props.bracket,
+      separator: props.separator,
+      yAxisId: props.yAxisId,
+      render: props.render,
+      placement: props.placement
+    }));
+    onMounted(() => {
+      methods.registerCustomization(featureKey, config.value);
+    });
+    watch(config, (cfg) => {
+      methods.registerCustomization(featureKey, cfg);
+    });
+    onUnmounted(() => {
+      methods.unregisterCustomization(featureKey);
+    });
+    return (_ctx, _cache) => {
+      return null;
+    };
+  }
+});
+var ChartReferenceBand_default = _sfc_main;
+
+export { ChartReferenceBand_default };