@primeui/vue-chart 0.0.1-alpha.1 → 1.0.0-rc.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/chunks/chunk-JBWL3G7O.mjs

@@ -0,0 +1,86 @@
+import { ChartBar_default } from './chunk-L74BEYTD.mjs';
+import { ChartTreemap_default } from './chunk-HVLFOABV.mjs';
+import { ChartScatter_default } from './chunk-SGLTVJUA.mjs';
+import { ChartRadar_default } from './chunk-F7EK5D6J.mjs';
+import { ChartPolar_default } from './chunk-GIDIMIWE.mjs';
+import { ChartPie_default } from './chunk-GE2Y2FHS.mjs';
+import { ChartLine_default } from './chunk-DDRSIMLE.mjs';
+import { ChartHeatmap_default } from './chunk-PCBF6FSQ.mjs';
+import { ChartCandlestick_default } from './chunk-CW2KYVYO.mjs';
+import { ChartAnnotation_default } from './chunk-ON2FAZTD.mjs';
+import { ChartAccessibility_default } from './chunk-6Z4MZIJI.mjs';
+import { ChartWaterfall_default } from './chunk-GV3CY6CQ.mjs';
+import { ChartStacked_default } from './chunk-WVNDZNMV.mjs';
+import { ChartRange_default } from './chunk-HHZFGQN2.mjs';
+import { ChartOverlap_default } from './chunk-R4AZOPXC.mjs';
+import { ChartGroup_default } from './chunk-3JA5JAHF.mjs';
+import { ChartDecimation_default } from './chunk-TZ23VBFU.mjs';
+import { ChartHover_default } from './chunk-3DINEX6C.mjs';
+import { ChartExportMenu_default } from './chunk-X4NWFK7L.mjs';
+import { ChartDataLabels_default } from './chunk-HH5FUUXX.mjs';
+import { ChartColorLegend_default } from './chunk-CGFPDWB4.mjs';
+import { ChartCaption_default } from './chunk-UOZFNTVQ.mjs';
+import { ChartBreadcrumb_default } from './chunk-QONZ3SCZ.mjs';
+import { ChartAxisGroup_default } from './chunk-MGUGO3RV.mjs';
+import { ChartAxisCategory_default } from './chunk-QJCMFAHB.mjs';
+import { ChartXAxis_default } from './chunk-DXKAPWMO.mjs';
+import { ChartTooltip_default } from './chunk-LP2YESP6.mjs';
+import { ChartTitle_default } from './chunk-2NZ3PUWW.mjs';
+import { ChartResponsive_default } from './chunk-UOMQNZMT.mjs';
+import { ChartReferenceLine_default } from './chunk-CRIB3I3L.mjs';
+import { ChartReferenceBand_default } from './chunk-U6X3GVJ3.mjs';
+import { ChartNavigator_default } from './chunk-JPKNWLLP.mjs';
+import { ChartLegend_default } from './chunk-4SLSYRNY.mjs';
+import { ChartTreemapGroup_default } from './chunk-L73MEG22.mjs';
+import { ChartItem_default } from './chunk-3PJULFR5.mjs';
+import { ChartZoom_default } from './chunk-BSROML7P.mjs';
+import { ChartYAxis_default } from './chunk-JVH4MDKX.mjs';
+import { ChartSvg_default } from './chunk-EWDMF46D.mjs';
+import { ChartCanvas_default } from './chunk-PR6MTWPJ.mjs';
+import { __export } from './chunk-VIHIR2BE.mjs';
+
+// src/Chart.parts.ts
+var Chart_parts_exports = {};
+__export(Chart_parts_exports, {
+  Accessibility: () => ChartAccessibility_default,
+  Annotation: () => ChartAnnotation_default,
+  AxisCategory: () => ChartAxisCategory_default,
+  AxisGroup: () => ChartAxisGroup_default,
+  Bar: () => ChartBar_default,
+  Breadcrumb: () => ChartBreadcrumb_default,
+  Candlestick: () => ChartCandlestick_default,
+  Canvas: () => ChartCanvas_default,
+  Caption: () => ChartCaption_default,
+  ColorLegend: () => ChartColorLegend_default,
+  DataLabels: () => ChartDataLabels_default,
+  Decimation: () => ChartDecimation_default,
+  ExportMenu: () => ChartExportMenu_default,
+  Group: () => ChartGroup_default,
+  Heatmap: () => ChartHeatmap_default,
+  Hover: () => ChartHover_default,
+  Item: () => ChartItem_default,
+  Legend: () => ChartLegend_default,
+  Line: () => ChartLine_default,
+  Navigator: () => ChartNavigator_default,
+  Overlap: () => ChartOverlap_default,
+  Pie: () => ChartPie_default,
+  Polar: () => ChartPolar_default,
+  Radar: () => ChartRadar_default,
+  Range: () => ChartRange_default,
+  ReferenceBand: () => ChartReferenceBand_default,
+  ReferenceLine: () => ChartReferenceLine_default,
+  Responsive: () => ChartResponsive_default,
+  Scatter: () => ChartScatter_default,
+  Stacked: () => ChartStacked_default,
+  Svg: () => ChartSvg_default,
+  Title: () => ChartTitle_default,
+  Tooltip: () => ChartTooltip_default,
+  Treemap: () => ChartTreemap_default,
+  TreemapGroup: () => ChartTreemapGroup_default,
+  Waterfall: () => ChartWaterfall_default,
+  XAxis: () => ChartXAxis_default,
+  YAxis: () => ChartYAxis_default,
+  Zoom: () => ChartZoom_default
+});
+
+export { Chart_parts_exports };

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,