@primeui/vue-chart 0.0.1-alpha.1

package/dist/chunk-DLUFOM5K.mjs

@@ -0,0 +1,218 @@
+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 { defineComponent, useSlots, computed, onMounted, watch, onUnmounted, renderSlot, createCommentVNode } from 'vue';
+import { heatmapRenderer } from '@primeui/chart-core';
+
+var heatmapIdCounter = 0;
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ChartHeatmap",
+  props: {
+    id: {},
+    data: {},
+    valueField: {},
+    name: {},
+    columnField: {},
+    rowField: {},
+    color: {},
+    colorScale: {},
+    colorRange: {},
+    nullColor: {},
+    spacing: {},
+    borderRadius: {},
+    yAxisId: {},
+    min: {},
+    max: {},
+    showLabels: { type: Boolean },
+    labelFormat: { type: Function },
+    labelColor: { type: [
+      String,
+      Function,
+      Array
+    ] },
+    hoverColor: { type: [
+      String,
+      Function,
+      Array
+    ] },
+    hoverBorderColor: { type: [
+      String,
+      Function,
+      Array
+    ] },
+    showEmptyCells: { type: Boolean },
+    opacity: { type: [
+      String,
+      Function,
+      Number,
+      Array
+    ] },
+    order: {},
+    renderContent: { type: Function },
+    keyField: {},
+    borderColor: { type: [
+      String,
+      Function,
+      Array
+    ] },
+    borderStrokeWidth: { type: [
+      String,
+      Function,
+      Number,
+      Array
+    ] },
+    borderDash: { type: [
+      Array,
+      String,
+      Function
+    ] },
+    borderDashOffset: { type: [
+      String,
+      Function,
+      Number,
+      Array
+    ] },
+    borderJoinStyle: {},
+    borderAlign: {},
+    borderSkipped: { type: [
+      String,
+      Function,
+      Boolean,
+      Array
+    ] },
+    animations: {}
+  },
+  setup(__props) {
+    useRendererHint("heatmap");
+    registerFamilyRenderer("cartesian", CartesianRenderer_default);
+    registerChartLayer("heatmap", {
+      family: "cartesian",
+      frameKind: null,
+      layer: HeatmapLayer_default,
+      axisHints: heatmapRenderer
+    });
+    const props = __props;
+    function generateHeatmapId() {
+      return `heatmap-auto-${++heatmapIdCounter}`;
+    }
+    const slots = useSlots();
+    const hasChildren = computed(() => !!slots.default);
+    const autoId = props.id || generateHeatmapId();
+    useDatasetAnimationRegistration(() => autoId, () => props.animations);
+    if (!hasChildren.value) {
+      const datasetId = computed(() => autoId);
+      const datasetProps = computed(() => ({
+        id: autoId,
+        data: props.data,
+        columnField: props.columnField,
+        rowField: props.rowField,
+        valueField: props.valueField,
+        name: props.name,
+        color: props.color,
+        colorScale: props.colorScale,
+        colorRange: props.colorRange,
+        nullColor: props.nullColor,
+        spacing: props.spacing,
+        borderRadius: props.borderRadius,
+        borderColor: props.borderColor,
+        borderStrokeWidth: props.borderStrokeWidth,
+        borderDash: props.borderDash,
+        borderDashOffset: props.borderDashOffset,
+        borderJoinStyle: props.borderJoinStyle,
+        borderAlign: props.borderAlign,
+        borderSkipped: props.borderSkipped,
+        yAxisId: props.yAxisId,
+        min: props.min,
+        max: props.max,
+        showLabels: props.showLabels,
+        labelFormat: props.labelFormat,
+        labelColor: props.labelColor,
+        showEmptyCells: props.showEmptyCells,
+        opacity: props.opacity,
+        renderContent: props.renderContent,
+        order: props.order,
+        keyField: props.keyField
+      }));
+      useDatasetRegistration({
+        id: datasetId,
+        type: "heatmap",
+        props: datasetProps
+      });
+    }
+    if (hasChildren.value) {
+      let buildSynthesizedProps2 = function() {
+        const items = getItems();
+        return {
+          id: autoId,
+          data: items,
+          columnField: (ctx) => ctx.datum.column ?? "",
+          rowField: (ctx) => ctx.datum.row ?? "",
+          valueField: (ctx) => ctx.datum.value,
+          name: props.name,
+          color: props.color,
+          colorScale: props.colorScale,
+          colorRange: props.colorRange,
+          nullColor: props.nullColor,
+          spacing: props.spacing,
+          borderRadius: props.borderRadius,
+          borderColor: props.borderColor,
+          borderStrokeWidth: props.borderStrokeWidth,
+          borderDash: props.borderDash,
+          borderDashOffset: props.borderDashOffset,
+          borderJoinStyle: props.borderJoinStyle,
+          borderAlign: props.borderAlign,
+          borderSkipped: props.borderSkipped,
+          yAxisId: props.yAxisId,
+          min: props.min,
+          max: props.max,
+          showLabels: props.showLabels,
+          labelFormat: props.labelFormat,
+          labelColor: props.labelColor,
+          showEmptyCells: props.showEmptyCells,
+          opacity: props.opacity,
+          renderContent: props.renderContent,
+          order: props.order,
+          keyField: props.keyField
+        };
+      };
+      const methods = useChartMethods();
+      const { getItems } = useItemCollector();
+      let isRegistered = false;
+      onMounted(() => {
+        methods.registerDataset(autoId, "heatmap", buildSynthesizedProps2());
+        isRegistered = true;
+      });
+      watch([
+        () => props.name,
+        () => props.color,
+        () => props.opacity,
+        () => props.colorScale,
+        () => props.colorRange,
+        () => props.order,
+        () => props.renderContent,
+        () => props.borderColor,
+        () => props.borderStrokeWidth,
+        () => props.borderDash,
+        () => props.borderDashOffset,
+        () => props.borderJoinStyle,
+        () => props.borderAlign,
+        () => props.borderRadius,
+        () => props.borderSkipped
+      ], () => {
+        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 ChartHeatmap_default = _sfc_main;
+
+export { ChartHeatmap_default };

package/dist/chunk-DOOXGOOB.mjs

@@ -0,0 +1,123 @@
+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';
+
+var _hoisted_1 = { class: "radar-markers" };
+var _hoisted_2 = ["transform", "opacity"];
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "RadarLayer",
+  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 radar = useRadarRenderer({
+      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: "radar",
+      layout: radar.layout,
+      renderCanvasContent: radar.renderCanvasContent,
+      hitTest: (x, y) => radar.hitTest(x, y),
+      findAllNearest: (x, y) => radar.findAllNearest(x, y),
+      getCenter: () => radar.markerData.value?.layout?.center ?? null,
+      getPointPosition: (datasetId, index) => {
+        if (!radar.markerData.value) return null;
+        const { layout } = radar.markerData.value;
+        for (const sd of layout.series) {
+          if (sd.id === datasetId) {
+            const pt = sd.points[index];
+            if (pt) {
+              const r = 6;
+              return {
+                x: pt.x - r,
+                y: pt.y - r,
+                width: r * 2,
+                height: r * 2,
+                shape: "circle"
+              };
+            }
+          }
+        }
+        return null;
+      },
+      applyPropertyAnimations: (store) => radar.applyPropertyAnimations(store),
+      renderFrameCycle: () => radar.renderFrameCycle()
+    });
+    function buildRadarMarkerEntries() {
+      if (!radar.markerData.value) return [];
+      const { layout, entries: radarEntries } = radar.markerData.value;
+      const result = [];
+      const hc = state.value.features.get("hover")?.props;
+      for (let si = 0; si < layout.series.length; si++) {
+        const sd = layout.series[si];
+        const ds = radarEntries[si];
+        if (!ds || !sd.visible) continue;
+        const dsProps = ds.props;
+        const renderMarkerFn = dsProps.renderMarker;
+        if (!renderMarkerFn || dsProps.showMarkers === false) continue;
+        result.push({
+          dsId: ds.id,
+          renderMarker: renderMarkerFn,
+          visiblePoints: sd.points.map((pt, pi) => ({
+            x: pt.x,
+            y: pt.y,
+            dataIndex: pi,
+            value: pt.value,
+            category: layout.categories[pt.categoryIndex]
+          })),
+          data: dsProps.data,
+          color: sd.color ?? "",
+          markerSize: typeof dsProps.markerSize === "number" ? dsProps.markerSize : 4,
+          effects: hc ? { dimOpacity: hc.dimOpacity ?? methods.theme?.dimOpacity ?? DEFAULT_HOVER_DIM_OPACITY } : void 0
+        });
+      }
+      return result;
+    }
+    const radarMarkerRenderItems = computed(() => {
+      if (methods.renderer !== "svg") return [];
+      return buildMarkerRenderItems(buildRadarMarkerEntries(), hoverCtx.value.hover);
+    });
+    return (_ctx, _cache) => {
+      return unref(methods).renderer === "svg" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("g", { ref: (el) => {
+        unref(radar).groupRef.value = el;
+      } }, null, 512), createElementVNode("g", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(radarMarkerRenderItems.value, (item) => {
+        return openBlock(), createElementBlock("g", {
+          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);
+      }), 128))])], 64)) : createCommentVNode("", true);
+    };
+  }
+});
+var RadarLayer_default = _sfc_main;
+
+export { RadarLayer_default };

package/dist/chunk-DYVFVVTO.mjs

@@ -0,0 +1,97 @@
+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';
+
+var _hoisted_1 = ["clip-path"];
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ScatterLayer",
+  setup(__props) {
+    const frame = useCartesianFrame();
+    const methods = useChartMethods();
+    const state = useChartState();
+    const hoverCtx = useChartHover();
+    const features = computed(() => state.value.features);
+    const decimationFeature = computed(() => features.value.get("decimation")?.props);
+    const scatter = useScatterRenderer({
+      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,
+      scatterXScales: computed(() => frame.layoutData.value?.scatterXScales),
+      valueScales: computed(() => frame.layoutData.value?.valueScales),
+      firstCategoryAxisId: computed(() => frame.layoutData.value?.scatterXScales?.keys().next().value ?? "default"),
+      firstValueAxisId: computed(() => frame.layoutData.value?.valueScales?.keys().next().value ?? "default"),
+      scatterStackBasesMap: computed(() => frame.layoutData.value?.scatterStackBasesMap),
+      compositor: frame.compositor,
+      decimationConfig: decimationFeature,
+      zoomState: frame.zoomState,
+      orientation: computed(() => frame.layoutData.value?.orientation ?? "vertical"),
+      labelConfig: frame.labelConfig,
+      features,
+      dir: computed(() => methods.dir),
+      theme: computed(() => methods.theme)
+    });
+    useCartesianFrameRegistration({
+      type: "scatter",
+      boostActive: scatter.boostActive,
+      markerOverlays: scatter.markerOverlays,
+      applyPropertyAnimations: (store) => scatter.applyPropertyAnimations(store),
+      renderFrameCycle: () => scatter.renderFrameCycle(),
+      syncWithAnimatedScale: (categoryScale, valueScales, valueXScales) => scatter.syncWithAnimatedScale(categoryScale, valueScales, valueXScales),
+      hitTest: (x, y) => {
+        const scHit = scatter.hitTest(x, y);
+        if (!scHit) return null;
+        return {
+          datasetId: scHit.datasetId,
+          index: scHit.index,
+          label: scHit.label,
+          value: scHit.yValue,
+          xValue: scHit.xValue,
+          yValue: scHit.yValue,
+          ...scHit.bubbleValue != null ? { bubbleValue: scHit.bubbleValue } : {},
+          color: scHit.color,
+          snapX: scHit.x,
+          snapY: scHit.y,
+          formattedValue: "",
+          cursorFormattedValue: ""
+        };
+      },
+      getPointPosition: (datasetId, index) => {
+        const scatterLayout = scatter.scatterLayouts.get(datasetId);
+        if (scatterLayout) {
+          const found = scatterLayout.visiblePoints?.find((p) => p.dataIndex === index);
+          if (found) {
+            const r = found.radius || 6;
+            return {
+              x: found.px - r,
+              y: found.py - r,
+              width: r * 2,
+              height: r * 2,
+              shape: "circle"
+            };
+          }
+        }
+        return null;
+      }
+    });
+    return (_ctx, _cache) => {
+      return unref(methods).renderer === "svg" && unref(scatter).hasScatterData.value ? (openBlock(), createElementBlock("g", {
+        key: 0,
+        ref: (el) => {
+          unref(scatter).groupRef.value = el;
+        },
+        class: "scatter-chart",
+        "clip-path": unref(frame).layoutData.value?.cartesianArea ? `url(#${unref(frame).plotClipId})` : void 0
+      }, null, 8, _hoisted_1)) : createCommentVNode("", true);
+    };
+  }
+});
+var ScatterLayer_default = _sfc_main;
+
+export { ScatterLayer_default };