@primeui/vue-chart 0.0.1-alpha.1

package/dist/chunk-54DLUFIA.mjs

@@ -0,0 +1,96 @@
+import { useCartesianFrame, useHeatmapRenderer, useCartesianFrameRegistration } from './chunk-CQHNYT2V.mjs';
+import { useChartMethods, useChartState, useChartHover } from './chunk-HANSF33Z.mjs';
+import { defineComponent, computed, unref, openBlock, createElementBlock, Fragment, createElementVNode, renderList, createBlock, createCommentVNode } from 'vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HeatmapLayer",
+  setup(__props) {
+    const VNodeRenderer = defineComponent({
+      props: { node: {
+        type: Object,
+        required: true
+      } },
+      render() {
+        return this.node;
+      }
+    });
+    const frame = useCartesianFrame();
+    const methods = useChartMethods();
+    const state = useChartState();
+    const hoverCtx = useChartHover();
+    const features = computed(() => state.value.features);
+    const heatmap = useHeatmapRenderer({
+      chartArea: frame.cartesianArea,
+      renderer: methods.renderer,
+      canvasEl: frame.canvasEl,
+      datasets: computed(() => state.value.datasets),
+      axes: computed(() => state.value.axes),
+      datasetVisibility: computed(() => state.value.datasetVisibility),
+      hover: computed(() => hoverCtx.value.hover),
+      hoverConfig: frame.hoverConfig,
+      chartId: methods.chartId,
+      width: frame.width,
+      height: frame.height,
+      features,
+      compositor: frame.compositor,
+      globalFont: methods.font,
+      locale: computed(() => methods.locale),
+      theme: computed(() => methods.theme)
+    });
+    useCartesianFrameRegistration({
+      type: "heatmap",
+      getColorScaleInfo: () => heatmap.getColorScaleInfo(),
+      scaleResult: heatmap.scaleResult,
+      getPointPosition: (datasetId, index) => heatmap.getPointPosition(datasetId, index),
+      applyPropertyAnimations: (store) => heatmap.applyPropertyAnimations(store),
+      renderFrameCycle: () => heatmap.renderFrameCycle(),
+      hitTest: (x, y) => {
+        const hmHit = heatmap.hitTest(x, y);
+        if (!hmHit) return null;
+        return {
+          datasetId: hmHit.datasetId,
+          index: hmHit.index,
+          col: hmHit.col,
+          label: `${hmHit.xLabel}, ${hmHit.yLabel}`,
+          value: hmHit.value ?? 0,
+          color: hmHit.color,
+          snapX: hmHit.x + hmHit.width / 2,
+          snapY: hmHit.y + hmHit.height / 2,
+          formattedValue: hmHit.value != null ? String(hmHit.value) : "",
+          cursorFormattedValue: ""
+        };
+      }
+    });
+    return (_ctx, _cache) => {
+      return unref(methods).renderer === "svg" && unref(heatmap).hasHeatmapData.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        createElementVNode("g", {
+          ref: (el) => {
+            unref(heatmap).gridGroupRef.value = el;
+          },
+          class: "heatmap-grid"
+        }, null, 512),
+        createElementVNode("g", {
+          ref: (el) => {
+            unref(heatmap).groupRef.value = el;
+          },
+          class: "heatmap-chart"
+        }, null, 512),
+        createElementVNode("g", {
+          ref: (el) => {
+            unref(heatmap).axisGroupRef.value = el;
+          },
+          class: "heatmap-axes"
+        }, null, 512),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(heatmap).svgContent.value, (el) => {
+          return openBlock(), createBlock(unref(VNodeRenderer), {
+            key: el.key ?? el.props?.key,
+            node: el
+          }, null, 8, ["node"]);
+        }), 128))
+      ], 64)) : createCommentVNode("", true);
+    };
+  }
+});
+var HeatmapLayer_default = _sfc_main;
+
+export { HeatmapLayer_default };

package/dist/chunk-56NMBNNX.mjs

@@ -0,0 +1,52 @@
+import { registerNavigatorRenderer } from './chunk-CQHNYT2V.mjs';
+import { useCustomizationRegistration } from './chunk-PQV55JYI.mjs';
+import { NavigatorRenderer_default } from './chunk-NLXOJSKK.mjs';
+import { defineComponent, getCurrentInstance, computed } from 'vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ChartNavigator",
+  props: {
+    height: {},
+    series: {},
+    color: {},
+    opacity: {},
+    selectionColor: {},
+    selectionFill: {},
+    maskColor: {},
+    enabled: { type: Boolean },
+    gap: {},
+    backgroundColor: {},
+    gridColor: {},
+    labelColor: {},
+    handleWidth: {},
+    gripLineGap: {},
+    padding: {},
+    animation: { type: [Boolean, Object] }
+  },
+  setup(__props) {
+    const props = __props;
+    registerNavigatorRenderer(NavigatorRenderer_default);
+    const vnodeProps = getCurrentInstance()?.vnode.props || {};
+    const registrationProps = computed(() => ({
+      height: props.height,
+      gap: props.gap,
+      series: props.series,
+      color: props.color,
+      opacity: props.opacity,
+      enabled: "enabled" in vnodeProps ? props.enabled : void 0,
+      selectionColor: props.selectionColor,
+      selectionFill: props.selectionFill,
+      maskColor: props.maskColor,
+      backgroundColor: props.backgroundColor,
+      gridColor: props.gridColor,
+      labelColor: props.labelColor
+    }));
+    useCustomizationRegistration("navigator", registrationProps);
+    return (_ctx, _cache) => {
+      return null;
+    };
+  }
+});
+var ChartNavigator_default = _sfc_main;
+
+export { ChartNavigator_default };

package/dist/chunk-5DWO3G33.mjs

@@ -0,0 +1,276 @@
+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 { defineComponent, useSlots, computed, onMounted, watch, onUnmounted, renderSlot, createCommentVNode } from 'vue';
+import { scatterRenderer, resolveAccessor } from '@primeui/chart-core';
+
+var scatterIdCounter = 0;
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ChartScatter",
+  props: {
+    id: {},
+    data: {},
+    categoryField: { type: [
+      String,
+      Function,
+      Array
+    ] },
+    valueField: { type: [
+      String,
+      Function,
+      Number,
+      null,
+      Array
+    ] },
+    name: {},
+    color: { type: [
+      String,
+      Function,
+      Array
+    ] },
+    xAxisId: {},
+    yAxisId: {},
+    order: {},
+    stackId: {},
+    xField: { type: [
+      String,
+      Function,
+      Number,
+      Array
+    ] },
+    yField: { type: [
+      String,
+      Function,
+      Number,
+      Array
+    ] },
+    sizeField: { type: [
+      String,
+      Function,
+      Number,
+      Array
+    ] },
+    markerSize: { type: [
+      String,
+      Function,
+      Number,
+      Array
+    ] },
+    markerShape: { type: [
+      String,
+      Function,
+      Array
+    ] },
+    minSize: {},
+    maxSize: {},
+    connectNulls: { type: [Boolean, String] },
+    opacity: { type: [
+      String,
+      Function,
+      Number,
+      Array
+    ] },
+    pointFillOpacity: {},
+    pointHitRadius: {},
+    hoverPointRadius: {},
+    pointHoverBackgroundColor: { type: [
+      String,
+      Function,
+      Array
+    ] },
+    pointHoverBorderColor: { type: [
+      String,
+      Function,
+      Array
+    ] },
+    pointHoverBorderStrokeWidth: { type: [
+      String,
+      Function,
+      Number,
+      Array
+    ] },
+    hoverColor: {},
+    hoverBorderColor: {},
+    renderMarker: { type: Function },
+    keyField: {},
+    pointRadius: {},
+    pointBackgroundColor: { type: [
+      String,
+      Function,
+      Array
+    ] },
+    pointBorderColor: { type: [
+      String,
+      Function,
+      Array
+    ] },
+    pointBorderStrokeWidth: { type: [
+      String,
+      Function,
+      Number,
+      Array
+    ] },
+    pointBorderDash: { type: [
+      Array,
+      String,
+      Function
+    ] },
+    pointBorderDashOffset: { type: [
+      String,
+      Function,
+      Number,
+      Array
+    ] },
+    pointBorderJoinStyle: {},
+    pointBorderRadius: { type: [
+      String,
+      Function,
+      Number,
+      Array
+    ] },
+    pointRotation: { type: [
+      String,
+      Function,
+      Number,
+      Array
+    ] },
+    animations: {}
+  },
+  setup(__props) {
+    useRendererHint("cartesian");
+    registerFamilyRenderer("cartesian", CartesianRenderer_default);
+    registerChartLayer("scatter", {
+      family: "cartesian",
+      frameKind: "grid",
+      layer: ScatterLayer_default,
+      axisHints: scatterRenderer
+    });
+    const props = __props;
+    function generateScatterId() {
+      return `scatter-auto-${++scatterIdCounter}`;
+    }
+    const slots = useSlots();
+    const hasChildren = computed(() => !!slots.default);
+    const autoId = props.id || generateScatterId();
+    useDatasetAnimationRegistration(() => autoId, () => props.animations);
+    if (!hasChildren.value) {
+      const datasetId = computed(() => autoId);
+      const datasetProps = computed(() => ({
+        id: autoId,
+        data: props.data,
+        xField: props.xField,
+        yField: props.yField,
+        sizeField: props.sizeField,
+        color: props.color,
+        name: props.name,
+        order: props.order,
+        markerSize: props.markerSize,
+        markerShape: props.markerShape,
+        minSize: props.minSize,
+        maxSize: props.maxSize,
+        pointBorderColor: props.pointBorderColor,
+        pointBorderStrokeWidth: props.pointBorderStrokeWidth,
+        pointBorderDash: props.pointBorderDash,
+        pointBorderDashOffset: props.pointBorderDashOffset,
+        pointBorderJoinStyle: props.pointBorderJoinStyle,
+        pointBorderRadius: props.pointBorderRadius,
+        pointRotation: props.pointRotation,
+        pointHitRadius: props.pointHitRadius,
+        hoverPointRadius: props.hoverPointRadius,
+        pointHoverBackgroundColor: props.pointHoverBackgroundColor,
+        pointHoverBorderColor: props.pointHoverBorderColor,
+        pointHoverBorderStrokeWidth: props.pointHoverBorderStrokeWidth,
+        hoverColor: props.hoverColor,
+        hoverBorderColor: props.hoverBorderColor,
+        xAxisId: props.xAxisId,
+        yAxisId: props.yAxisId,
+        connectNulls: props.connectNulls,
+        renderMarker: props.renderMarker
+      }));
+      useDatasetRegistration({
+        id: datasetId,
+        type: "scatter",
+        props: datasetProps
+      });
+    }
+    if (hasChildren.value) {
+      let buildSynthesizedProps2 = function() {
+        const items = getItems();
+        return {
+          id: autoId,
+          data: items,
+          xField: (ctx) => ctx.datum.x ?? 0,
+          yField: (ctx) => ctx.datum.y ?? 0,
+          color: ((ctx) => ctx.datum.color ?? resolveAccessor(props.color, ctx)),
+          name: props.name,
+          markerSize: props.markerSize,
+          markerShape: props.markerShape,
+          minSize: props.minSize,
+          maxSize: props.maxSize,
+          pointBorderColor: props.pointBorderColor,
+          pointBorderStrokeWidth: props.pointBorderStrokeWidth,
+          pointBorderDash: props.pointBorderDash,
+          pointBorderDashOffset: props.pointBorderDashOffset,
+          pointBorderJoinStyle: props.pointBorderJoinStyle,
+          pointBorderRadius: props.pointBorderRadius,
+          pointRotation: props.pointRotation,
+          pointHitRadius: props.pointHitRadius,
+          hoverPointRadius: props.hoverPointRadius,
+          pointHoverBackgroundColor: props.pointHoverBackgroundColor,
+          pointHoverBorderColor: props.pointHoverBorderColor,
+          pointHoverBorderStrokeWidth: props.pointHoverBorderStrokeWidth,
+          hoverColor: props.hoverColor,
+          hoverBorderColor: props.hoverBorderColor,
+          xAxisId: props.xAxisId,
+          yAxisId: props.yAxisId,
+          order: props.order,
+          sizeField: (ctx) => ctx.datum.size,
+          connectNulls: props.connectNulls,
+          renderMarker: props.renderMarker
+        };
+      };
+      const methods = useChartMethods();
+      const { getItems } = useItemCollector();
+      let isRegistered = false;
+      onMounted(() => {
+        methods.registerDataset(autoId, "scatter", buildSynthesizedProps2());
+        isRegistered = true;
+      });
+      watch([
+        () => props.name,
+        () => props.color,
+        () => props.markerSize,
+        () => props.markerShape,
+        () => props.order,
+        () => props.pointBorderColor,
+        () => props.pointBorderStrokeWidth,
+        () => props.pointBorderDash,
+        () => props.pointBorderDashOffset,
+        () => props.pointBorderJoinStyle,
+        () => props.pointBorderRadius,
+        () => props.pointRotation,
+        () => props.pointHitRadius,
+        () => props.hoverPointRadius,
+        () => props.pointHoverBackgroundColor,
+        () => props.pointHoverBorderColor,
+        () => props.pointHoverBorderStrokeWidth,
+        () => props.connectNulls,
+        () => props.renderMarker
+      ], () => {
+        if (!isRegistered) return;
+        methods.updateDataset(autoId, buildSynthesizedProps2());
+      }, { flush: "post" });
+      onUnmounted(() => {
+        methods.unregisterDataset(autoId);
+        isRegistered = false;
+      });
+    }
+    return (_ctx, _cache) => {
+      return hasChildren.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true);
+    };
+  }
+});
+var ChartScatter_default = _sfc_main;
+
+export { ChartScatter_default };

package/dist/chunk-5FTUGKPC.mjs

@@ -0,0 +1,167 @@
+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';
+
+var _hoisted_1 = ["dir"];
+var _hoisted_2 = {
+  key: 0,
+  style: { "display": "contents" }
+};
+var _hoisted_3 = [
+  "role",
+  "aria-checked",
+  "aria-label",
+  "onClick",
+  "onMouseenter"
+];
+var _hoisted_4 = ["data-chart-gradient"];
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LegendRenderer",
+  props: {
+    legendConfig: {},
+    legendArea: {},
+    legendItems: {},
+    onLegendClick: { type: Function },
+    onLegendHover: { type: Function },
+    adaptiveFontSize: {},
+    effectivePosition: {},
+    globalFontFamily: {},
+    dir: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const hoveredItem = ref(null);
+    const UNITLESS = /* @__PURE__ */ new Set([
+      "opacity",
+      "zIndex",
+      "fontWeight",
+      "lineHeight",
+      "order",
+      "flex",
+      "flexGrow",
+      "flexShrink",
+      "transform"
+    ]);
+    function toCssStyle(raw) {
+      const out = {};
+      for (const [k, v] of Object.entries(raw)) {
+        out[k] = typeof v === "number" && !UNITLESS.has(k) ? `${v}px` : String(v);
+      }
+      return out;
+    }
+    const legendStyle = computed(() => {
+      if (!props.legendConfig || !props.legendArea) return {};
+      const lc = props.legendConfig;
+      const result = computeLegendStyle({
+        position: props.effectivePosition ?? lc.position,
+        layout: lc.layout,
+        align: lc.align,
+        verticalAlign: lc.verticalAlign,
+        width: lc.width,
+        height: lc.height,
+        maxWidth: lc.maxWidth,
+        maxHeight: lc.maxHeight,
+        itemGap: lc.itemGap
+      }, props.legendArea);
+      return toCssStyle(result);
+    });
+    function handleHover(item) {
+      hoveredItem.value = item;
+      props.onLegendHover(item);
+    }
+    function handleClick(item) {
+      if (!props.legendConfig.interactive) return;
+      props.onLegendClick(item);
+      nextTick(() => {
+        if (hoveredItem.value === null) return;
+        const fresh = props.legendItems.find((i) => i.datasetId === hoveredItem.value?.datasetId && i.index === hoveredItem.value?.index);
+        handleHover(fresh?.visible ? fresh : null);
+      });
+    }
+    function itemKey(item, idx) {
+      return `${item.datasetId}-${item.index ?? "header"}-${idx}`;
+    }
+    function getItemStyle(item) {
+      const isHovered = hoveredItem.value === item;
+      const lc = props.legendConfig;
+      const baseFontSize = item.type === "dataset" ? (props.adaptiveFontSize ?? 12) + 1 : props.adaptiveFontSize ?? 12;
+      return {
+        ...LEGEND_ITEM_BASE_STYLE,
+        background: "none",
+        border: "none",
+        font: "inherit",
+        padding: "0",
+        cursor: lc.interactive ? "pointer" : "default",
+        opacity: item.visible ? "1" : "0.4",
+        fontWeight: lc.fontWeight !== void 0 ? String(lc.fontWeight) : item.type === "dataset" ? "600" : "400",
+        fontSize: `${lc.fontSize ?? baseFontSize}px`,
+        fontFamily: lc.fontFamily ?? props.globalFontFamily ?? void 0,
+        ...lc.color ? { color: lc.color } : {},
+        backgroundColor: isHovered ? "var(--p-chart-legend-hover-background, rgba(0,0,0,0.05))" : "transparent"
+      };
+    }
+    function getSwatchStyle(item) {
+      const lc = props.legendConfig;
+      const iconSize = lc.iconSize ?? 12;
+      const iconShape = lc.iconShape;
+      const base = {
+        ...LEGEND_SWATCH_STYLE,
+        width: `${iconSize}px`,
+        height: iconShape === "line" ? "2px" : `${iconSize}px`,
+        borderRadius: iconShape === "circle" ? "50%" : iconShape === "line" ? "1px" : "2px",
+        backgroundColor: item.color,
+        ...item.colorGradient ? { backgroundImage: gradientToCssBackground(item.colorGradient) } : {}
+      };
+      if (item.hasBorder && item.borderColor) {
+        base.border = `2px solid ${item.borderColor}`;
+        base.boxSizing = "border-box";
+      }
+      if (item.borderRadius !== void 0) {
+        base.borderRadius = `${Math.min(item.borderRadius, 6)}px`;
+      }
+      return base;
+    }
+    return (_ctx, _cache) => {
+      return __props.legendConfig && __props.legendArea && __props.legendItems.length > 0 ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        style: normalizeStyle(legendStyle.value),
+        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({
+          type: item.type,
+          datasetId: item.datasetId,
+          index: item.index,
+          label: item.label,
+          color: item.color,
+          colorGradient: item.colorGradient,
+          visible: item.visible,
+          borderColor: item.borderColor,
+          hasBorder: item.hasBorder,
+          borderRadius: item.borderRadius,
+          isHovered: hoveredItem.value === item,
+          onClick: () => handleClick(item),
+          onMouseEnter: () => handleHover(item),
+          onMouseLeave: () => handleHover(null)
+        }))))])) : (openBlock(), createElementBlock("button", {
+          key: 1,
+          type: "button",
+          role: __props.legendConfig.interactive ? "switch" : void 0,
+          "aria-checked": __props.legendConfig.interactive ? item.visible : void 0,
+          "aria-label": `${item.label}. ${item.visible ? "Shown" : "Hidden"}.${__props.legendConfig.interactive ? " Click to toggle." : ""}`,
+          style: normalizeStyle(getItemStyle(item)),
+          onClick: () => handleClick(item),
+          onMouseenter: ($event) => handleHover(item),
+          onMouseleave: _cache[0] || (_cache[0] = ($event) => handleHover(null))
+        }, [item.color ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          style: normalizeStyle(getSwatchStyle(item)),
+          "data-chart-gradient": item.colorGradient ? JSON.stringify(item.colorGradient) : void 0
+        }, null, 12, _hoisted_4)) : createCommentVNode("", true), createElementVNode("span", null, toDisplayString(item.label), 1)], 44, _hoisted_3))], 64);
+      }), 128))], 12, _hoisted_1)) : createCommentVNode("", true);
+    };
+  }
+});
+var LegendRenderer_default = _sfc_main;
+
+export { LegendRenderer_default };

package/dist/chunk-5SRBQVU5.mjs

@@ -0,0 +1,6 @@
+// src/components/customizations/axisGroupKeys.ts
+var AXIS_GROUP_COLLECTOR_KEY = /* @__PURE__ */ Symbol.for("axis-category-collector");
+var AXIS_GROUP_REGISTRY_KEY = /* @__PURE__ */ Symbol.for("axis-group-registry");
+var AXIS_GROUP_DEPTH_KEY = /* @__PURE__ */ Symbol.for("axis-group-depth");
+
+export { AXIS_GROUP_COLLECTOR_KEY, AXIS_GROUP_DEPTH_KEY, AXIS_GROUP_REGISTRY_KEY };

package/dist/chunk-62NGBLQ7.mjs

@@ -0,0 +1,28 @@
+import { useCustomizationRegistration } from './chunk-PQV55JYI.mjs';
+import { defineComponent, computed } from 'vue';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ChartBreadcrumb",
+  props: {
+    separator: {},
+    renderItem: { type: Function },
+    class: {},
+    style: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const registrationProps = computed(() => ({
+      separator: props.separator,
+      renderItem: props.renderItem,
+      class: props.class,
+      style: props.style
+    }));
+    useCustomizationRegistration("breadcrumb", registrationProps);
+    return (_ctx, _cache) => {
+      return null;
+    };
+  }
+});
+var ChartBreadcrumb_default = _sfc_main;
+
+export { ChartBreadcrumb_default };