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

package/dist/{chunk-MDA22SIZ.mjs → chunks/chunk-IFZSHQDZ.mjs}

@@ -1,4 +1,4 @@
-import { useBarLayer, useBarRendererBase } from './chunk-YRKAI2R2.mjs';
+import { useBarLayer, useBarRendererBase } from './chunk-AKMQHU5T.mjs';
 import { defineComponent, unref, openBlock, createElementBlock, createCommentVNode } from 'vue';
 import { createBarRendererCanvas } from '@primeui/chart-core/series/bar/controller-canvas';
 
@@ -13,7 +13,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const { bar, methods, frame } = useBarLayer(useBarRenderer);
     return (_ctx, _cache) => {
-      return unref(methods).renderer === "svg" && unref(bar).hasBarData.value ? (openBlock(), createElementBlock("g", {
+      return unref(methods).renderer === "svg" ? (openBlock(), createElementBlock("g", {
         key: 0,
         ref: (el) => {
           unref(bar).groupRef.value = el;

package/dist/chunks/chunk-IRGQNA5W.mjs

@@ -0,0 +1,289 @@
+import { usePropertyAnimations } from './chunk-I2BWSDNR.mjs';
+import { useChartMethods, useChartState, useChartHover } from './chunk-QOWKMWNO.mjs';
+import { defineComponent, computed, toRef, shallowRef, onUnmounted, unref, openBlock, createElementBlock, createElementVNode, Fragment, renderList, createBlock, createCommentVNode, ref, watch, createVNode } from 'vue';
+import { AnimatedPropertyStore, AnimationRegistry, renderTreemapGroupHoverOverlay } from '@primeui/chart-core';
+import { createTreemapRendererCanvas } from '@primeui/chart-core/series/treemap/controller-canvas';
+import { createTreemapRendererSvg } from '@primeui/chart-core/series/treemap/controller-svg';
+
+function useTreemapRenderer(options) {
+  const { chartArea, renderer, canvasEl, datasets, features, datasetVisibility, width, height, chartId, drilldownState, globalFont, hover, theme } = options;
+  const wrapperRef = ref(null);
+  const groupRef = ref(null);
+  const overlayRef = ref(null);
+  const controller = renderer === "canvas" ? createTreemapRendererCanvas() : createTreemapRendererSvg();
+  const versionRef = ref(0);
+  controller.onFrame = () => {
+    versionRef.value++;
+  };
+  controller.onImageLoad = () => {
+    if (renderer !== "canvas") return;
+    controller.update({
+      datasets: datasets.value,
+      datasetVisibility: datasetVisibility.value,
+      chartArea: chartArea.value,
+      renderer,
+      width: width.value,
+      height: height.value,
+      chartId,
+      features: features.value,
+      hover: { datasetId: null, index: null },
+      canvasEl: canvasEl.value,
+      svgGroup: groupRef.value,
+      svgWrapper: wrapperRef.value,
+      globalFont,
+      drilldownParentId: drilldownState.currentParentId.value,
+      drilldownEnabled: drilldownState.enabled.value,
+      theme: theme.value
+    });
+  };
+  watch(
+    [datasets, datasetVisibility, chartArea, features, width, height, groupRef, () => drilldownState.currentParentId.value, () => drilldownState.enabled.value, theme],
+    () => {
+      controller.update({
+        datasets: datasets.value,
+        datasetVisibility: datasetVisibility.value,
+        chartArea: chartArea.value,
+        renderer,
+        width: width.value,
+        height: height.value,
+        chartId,
+        features: features.value,
+        hover: { datasetId: null, index: null },
+        canvasEl: canvasEl.value,
+        svgGroup: groupRef.value,
+        svgWrapper: wrapperRef.value,
+        globalFont,
+        drilldownParentId: drilldownState.currentParentId.value,
+        drilldownEnabled: drilldownState.enabled.value,
+        theme: theme.value
+      });
+      versionRef.value++;
+    },
+    { immediate: true, flush: "post" }
+  );
+  watch(hover, () => {
+    controller.applyHover(hover.value);
+  });
+  onUnmounted(() => {
+    controller.destroy();
+  });
+  function handleDrilldownClick(hit) {
+    if (!drilldownState.enabled.value) return false;
+    const result = controller.buildDrillInto(hit, drilldownState.currentParentId.value);
+    if (!result) return false;
+    drilldownState.drillInto(result.nodeId, result.label, result.ancestors);
+    return true;
+  }
+  function prepareDrillOut() {
+    controller.prepareDrillOut(chartArea.value);
+  }
+  function hitTest(x, y) {
+    return controller.hitTest(x, y);
+  }
+  function getPointPosition(datasetId, index) {
+    const entry = controller.layouts.get(datasetId);
+    const cell = entry?.layout.cells.find((c) => c.index === index);
+    if (!cell) return null;
+    return { x: cell.x, y: cell.y, width: cell.width, height: cell.height, shape: "rect" };
+  }
+  function updateHoverOverlay(hit) {
+    if (renderer === "canvas") {
+      controller.updateHoverOverlayCanvas(hit);
+      return;
+    }
+    const groupNodeId = hit?.isGroupHit ? hit.nodeId ?? null : null;
+    const overlay = overlayRef.value;
+    if (!overlay) return;
+    renderTreemapGroupHoverOverlay(overlay, controller.layouts, groupNodeId);
+  }
+  const svgContent = computed(() => {
+    if (renderer !== "svg") return [];
+    void versionRef.value;
+    const elements = [];
+    for (const [datasetId, { props, layout }] of controller.layouts) {
+      const renderFn = props.renderContent;
+      if (!renderFn || !props.data) continue;
+      for (const cell of layout.cells) {
+        const dataItem = props.data[cell.index];
+        if (!dataItem) continue;
+        const result = renderFn({
+          data: dataItem,
+          index: cell.index,
+          label: cell.label,
+          secondaryLabel: cell.secondaryLabel,
+          value: cell.value,
+          color: cell.color,
+          x: cell.x,
+          y: cell.y,
+          width: cell.width,
+          height: cell.height,
+          nodeId: cell.nodeId,
+          parentId: cell.parentId,
+          hasChildren: cell.hasChildren,
+          depth: cell.depth,
+          drilldownParentId: props.drilldownParentId ?? null
+        });
+        if (result != null) {
+          const clipId = `tm-clip-${datasetId}-${cell.index}`;
+          elements.push(
+            createVNode("g", { key: `${datasetId}-${cell.index}` }, [
+              createVNode("clipPath", { id: clipId }, [createVNode("rect", { x: cell.x, y: cell.y, width: cell.width, height: cell.height })]),
+              createVNode("g", { "clip-path": `url(#${clipId})` }, [result])
+            ])
+          );
+        }
+      }
+    }
+    return elements;
+  });
+  function getColorScaleInfo() {
+    return controller.getColorScaleInfo();
+  }
+  function applyPropertyAnimations(store) {
+    controller.applyPropertyAnimations(store);
+  }
+  function renderFrameCycle() {
+    controller.renderFrameCycle();
+  }
+  return { wrapperRef, groupRef, overlayRef, svgContent, hitTest, getPointPosition, handleDrilldownClick, prepareDrillOut, updateHoverOverlay, getColorScaleInfo, applyPropertyAnimations, renderFrameCycle };
+}
+
+// src/components/renderers/RectRenderer.vue
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "RectRenderer",
+  props: {
+    chartArea: {},
+    width: {},
+    height: {},
+    canvasEl: {},
+    drilldownState: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const VNodeRenderer = defineComponent({
+      props: { node: {
+        type: Object,
+        required: true
+      } },
+      render() {
+        return this.node;
+      }
+    });
+    const props = __props;
+    const methods = useChartMethods();
+    const state = useChartState();
+    const hoverCtx = useChartHover();
+    const treemap = useTreemapRenderer({
+      chartArea: computed(() => props.chartArea),
+      renderer: methods.renderer,
+      canvasEl: toRef(props, "canvasEl"),
+      datasets: computed(() => state.value.datasets),
+      features: computed(() => state.value.features),
+      datasetVisibility: computed(() => state.value.datasetVisibility),
+      hover: computed(() => hoverCtx.value.hover),
+      width: computed(() => props.width),
+      height: computed(() => props.height),
+      chartId: methods.chartId,
+      drilldownState: props.drilldownState,
+      globalFont: methods.font,
+      theme: computed(() => methods.theme)
+    });
+    function hitTest(x, y) {
+      return treemap.hitTest(x, y);
+    }
+    function handleDrilldownClick(hit) {
+      return treemap.handleDrilldownClick(hit);
+    }
+    function prepareDrillOut() {
+      treemap.prepareDrillOut();
+    }
+    function updateHoverOverlay(hit) {
+      treemap.updateHoverOverlay(hit);
+    }
+    function getColorScaleInfo() {
+      return treemap.getColorScaleInfo();
+    }
+    const setWrapperRef = (el) => {
+      treemap.wrapperRef.value = el;
+    };
+    const setGroupRef = (el) => {
+      treemap.groupRef.value = el;
+    };
+    const setOverlayRef = (el) => {
+      treemap.overlayRef.value = el;
+    };
+    function getPlotArea() {
+      return props.chartArea ?? null;
+    }
+    function getPointPosition(datasetId, index) {
+      return treemap.getPointPosition(datasetId, index);
+    }
+    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();
+    const propertyAnimatableControllers = [];
+    for (const candidate of [treemap]) {
+      const partial = candidate;
+      if (typeof partial.applyPropertyAnimations === "function" && typeof partial.renderFrameCycle === "function") {
+        propertyAnimatableControllers.push(partial);
+      }
+    }
+    animRegistry.setRepaintCallback(() => {
+      const store = animStoreRef.value;
+      if (!store) return;
+      for (const c of propertyAnimatableControllers) c.applyPropertyAnimations(store);
+    });
+    function onPropertyComplete() {
+      for (const c of propertyAnimatableControllers) c.renderFrameCycle();
+    }
+    usePropertyAnimations(mergedPropertyAnimations, animRegistry, animStoreRef.value, onPropertyComplete);
+    onUnmounted(() => {
+      animRegistry.destroy();
+      animStoreRef.value?.destroy();
+      animStoreRef.value = null;
+    });
+    __expose({
+      hitTest,
+      handleDrilldownClick,
+      prepareDrillOut,
+      updateHoverOverlay,
+      getColorScaleInfo,
+      getPlotArea,
+      getPointPosition
+    });
+    return (_ctx, _cache) => {
+      return unref(methods).renderer === "svg" ? (openBlock(), createElementBlock("g", {
+        key: 0,
+        ref: setWrapperRef
+      }, [
+        createElementVNode("g", { ref: setGroupRef }),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(treemap).svgContent.value, (el) => {
+          return openBlock(), createBlock(unref(VNodeRenderer), {
+            key: el.key ?? el.props?.key,
+            node: el
+          }, null, 8, ["node"]);
+        }), 128)),
+        createElementVNode("g", { ref: setOverlayRef })
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+var RectRenderer_default = _sfc_main;
+
+export { RectRenderer_default };

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

@@ -1,4 +1,4 @@
-import { Chart_default } from './chunk-372K2BMN.mjs';
+import { Chart_default } from './chunk-EKGCPOZJ.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-56NMBNNX.mjs → chunks/chunk-JPKNWLLP.mjs}

@@ -1,6 +1,6 @@
-import { registerNavigatorRenderer } from './chunk-CQHNYT2V.mjs';
-import { useCustomizationRegistration } from './chunk-PQV55JYI.mjs';
-import { NavigatorRenderer_default } from './chunk-NLXOJSKK.mjs';
+import { registerNavigatorRenderer } from './chunk-I2BWSDNR.mjs';
+import { useCustomizationRegistration } from './chunk-ZLD5VNMP.mjs';
+import { NavigatorRenderer_default } from './chunk-GLFXRR7N.mjs';
 import { defineComponent, getCurrentInstance, computed } from 'vue';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{chunk-XBDNMPF7.mjs → chunks/chunk-JVH4MDKX.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/chunks/chunk-KNNYJD4D.mjs

@@ -0,0 +1,14 @@
+import { onUnmounted } from 'vue';
+
+// src/composables/useControllerLifecycle.ts
+function useControllerLifecycle(controller) {
+  onUnmounted(() => {
+    controller.destroy();
+  });
+  return {
+    applyPropertyAnimations: (store) => controller.applyPropertyAnimations(store),
+    renderFrameCycle: () => controller.renderFrameCycle()
+  };
+}
+
+export { useControllerLifecycle };

package/dist/{chunk-AUI5R4DA.mjs → chunks/chunk-L73MEG22.mjs}

@@ -1,4 +1,4 @@
-import { ITEM_COLLECTOR_KEY } from './chunk-FZ3PZ66C.mjs';
+import { ITEM_COLLECTOR_KEY } from './chunk-4Q3QUNX6.mjs';
 import { defineComponent, inject, ref, provide, onMounted, onUnmounted, renderSlot } from 'vue';
 import { shallowEqual } from '@primeui/chart-core';
 
@@ -45,7 +45,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       registeredIndices.value = [];
       const groupIndex = parentCollector.getNextIndex();
       parentCollector.registerItem(groupIndex, {
-        label: props.label,
+        category: props.label,
         secondaryLabel: props.secondaryLabel,
         value: 0,
         color: props.color,

package/dist/{chunk-K326BBF7.mjs → chunks/chunk-L74BEYTD.mjs}

@@ -1,9 +1,9 @@
-import { BarLayerSvg_default } from './chunk-RRHYGSK6.mjs';
-import { BarLayerCanvas_default } from './chunk-MDA22SIZ.mjs';
-import { CartesianRenderer_default } from './chunk-HTZVV6VV.mjs';
-import { registerFamilyRenderer, registerChartLayer, useDatasetAnimationRegistration, useDatasetRegistration, useItemCollector } from './chunk-CQHNYT2V.mjs';
-import { STACKED_CONTEXT_KEY } from './chunk-TEOO4OLV.mjs';
-import { useRendererHint, useChartMethods } from './chunk-HANSF33Z.mjs';
+import { BarLayerSvg_default } from './chunk-2TOEQNJ6.mjs';
+import { BarLayerCanvas_default } from './chunk-IFZSHQDZ.mjs';
+import { CartesianRenderer_default } from './chunk-YZQS2YBK.mjs';
+import { registerFamilyRenderer, registerChartLayer, useDatasetAnimationRegistration, useDatasetRegistration, useItemCollector } from './chunk-I2BWSDNR.mjs';
+import { STACKED_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 { resolveAccessor } from '@primeui/chart-core';
 import { getBarAxisHints } from '@primeui/chart-core/series/bar';
@@ -14,19 +14,31 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     id: {},
     data: {},
-    categoryField: { type: [
+    name: {},
+    categoryXField: { type: [
       String,
       Function,
       Array
     ] },
-    valueField: { type: [
+    categoryYField: { type: [
+      String,
+      Function,
+      Array
+    ] },
+    valueXField: { type: [
+      String,
+      Function,
+      Number,
+      null,
+      Array
+    ] },
+    valueYField: { type: [
       String,
       Function,
       Number,
       null,
       Array
     ] },
-    name: {},
     color: { type: [
       String,
       Function,
@@ -54,7 +66,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     stackId: {},
     barGap: {},
     categoryGap: {},
-    orientation: {},
     weightField: { type: [
       String,
       Function,
@@ -146,13 +157,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       const datasetProps = computed(() => ({
         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,
         stackId,
-        orientation: props.orientation,
         xAxisId: props.xAxisId,
         yAxisId: props.yAxisId,
         barGap: props.barGap,
@@ -188,17 +200,23 @@ 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
+        };
         const p = {
           id: autoId,
           data: items,
-          categoryField: (ctx) => ctx.datum.label ?? "",
-          valueField: (ctx) => ctx.datum.value,
+          ...axisBinding,
           color: ((ctx) => ctx.datum.color ?? resolveAccessor(props.color, ctx)),
           borderRadius: (ctx) => ctx.datum.borderRadius,
           borderColor: (ctx) => ctx.datum.borderColor,
           borderStrokeWidth: (ctx) => ctx.datum.borderStrokeWidth,
           name: props.name,
-          orientation: props.orientation,
           xAxisId: props.xAxisId,
           yAxisId: props.yAxisId,
           order: effectiveOrder,
@@ -233,7 +251,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       watch([
         () => props.name,
         () => props.color,
-        () => props.orientation,
+        () => props.categoryXField,
+        () => props.categoryYField,
+        () => props.valueXField,
+        () => props.valueYField,
         () => props.order,
         () => props.barGap,
         () => props.categoryGap,

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