@pitcher/canvas-ui 2025.12.9-123521-beta → 2025.12.9-130331-beta

package/canvas-ui.js

@@ -94572,52 +94572,54 @@ const _hoisted_37$4 = {
 };
 const _hoisted_38$4 = { class: "flex-1 min-w-0" };
 const _hoisted_39$4 = { class: "text-sm font-bold text-gray-900 truncate mb-1" };
-const _hoisted_40$4 = { class: "text-xs text-gray-500" };
-const _hoisted_41$4 = { class: "text-xs text-gray-400" };
-const _hoisted_42$4 = {
+const _hoisted_40$4 = ["innerHTML"];
+const _hoisted_41$4 = { class: "text-xs text-gray-500" };
+const _hoisted_42$4 = { class: "text-xs text-gray-400" };
+const _hoisted_43$4 = {
   key: 0,
   class: "px-0 py-0"
 };
-const _hoisted_43$4 = { key: 1 };
-const _hoisted_44$4 = { class: "flex items-center px-0 pt-2 pb-1" };
-const _hoisted_45$4 = { class: "text-m font-semibold text-gray-900" };
-const _hoisted_46$4 = { class: "ml-2 text-sm text-gray-500" };
-const _hoisted_47$4 = ["data-result-selected", "onClick"];
-const _hoisted_48$4 = { class: "w-18 h-14 border-rounded-1 mr-4 flex-shrink-0 bg-gray-200 flex items-center justify-center" };
-const _hoisted_49$4 = { class: "flex-1 min-w-0" };
-const _hoisted_50$4 = { class: "text-sm font-bold text-gray-900 truncate mb-1" };
-const _hoisted_51$3 = { class: "text-xs text-gray-500" };
-const _hoisted_52$3 = { class: "text-xs text-gray-400" };
-const _hoisted_53$3 = {
+const _hoisted_44$4 = { key: 1 };
+const _hoisted_45$4 = { class: "flex items-center px-0 pt-2 pb-1" };
+const _hoisted_46$4 = { class: "text-m font-semibold text-gray-900" };
+const _hoisted_47$4 = { class: "ml-2 text-sm text-gray-500" };
+const _hoisted_48$4 = ["data-result-selected", "onClick"];
+const _hoisted_49$4 = { class: "w-18 h-14 border-rounded-1 mr-4 flex-shrink-0 bg-gray-200 flex items-center justify-center" };
+const _hoisted_50$4 = { class: "flex-1 min-w-0" };
+const _hoisted_51$2 = { class: "text-sm font-bold text-gray-900 truncate mb-1" };
+const _hoisted_52$2 = { class: "text-xs text-gray-500" };
+const _hoisted_53$2 = { class: "text-xs text-gray-400" };
+const _hoisted_54$1 = {
   key: 0,
   class: "px-0 py-0"
 };
-const _hoisted_54$2 = {
+const _hoisted_55$1 = {
   key: 0,
   class: "flex flex-col items-center justify-center text-center p-8 gap-4"
 };
-const _hoisted_55$2 = {
+const _hoisted_56$1 = {
   key: 2,
   class: "flex-1 overflow-y-auto bg-white w-full"
 };
-const _hoisted_56$2 = { class: "w-full px-0" };
-const _hoisted_57$2 = { class: "flex items-center px-0 pt-2 pb-1" };
-const _hoisted_58$2 = { class: "text-m font-semibold text-gray-900" };
-const _hoisted_59$2 = { class: "ml-2 text-sm text-gray-500" };
-const _hoisted_60$2 = ["data-result-selected", "onClick"];
-const _hoisted_61$2 = {
+const _hoisted_57$1 = { class: "w-full px-0" };
+const _hoisted_58$1 = { class: "flex items-center px-0 pt-2 pb-1" };
+const _hoisted_59$1 = { class: "text-m font-semibold text-gray-900" };
+const _hoisted_60$1 = { class: "ml-2 text-sm text-gray-500" };
+const _hoisted_61$1 = ["data-result-selected", "onClick"];
+const _hoisted_62$1 = {
   key: 1,
   class: "w-18 h-14 border-rounded-1 mr-4 flex-shrink-0 bg-gray-200 flex items-center justify-center"
 };
-const _hoisted_62$2 = { class: "flex-1 min-w-0" };
-const _hoisted_63$2 = { class: "text-sm font-bold text-gray-900 truncate mb-1" };
-const _hoisted_64$2 = { class: "text-xs text-gray-500" };
-const _hoisted_65$2 = { class: "text-xs text-gray-400" };
-const _hoisted_66$2 = {
+const _hoisted_63$1 = { class: "flex-1 min-w-0" };
+const _hoisted_64$1 = { class: "text-sm font-bold text-gray-900 truncate mb-1" };
+const _hoisted_65$1 = ["innerHTML"];
+const _hoisted_66$1 = { class: "text-xs text-gray-500" };
+const _hoisted_67$1 = { class: "text-xs text-gray-400" };
+const _hoisted_68$1 = {
   key: 0,
   class: "flex flex-col items-center justify-center text-center p-8 gap-4"
 };
-const _hoisted_67$2 = {
+const _hoisted_69 = {
   key: 0,
   class: "flex flex-wrap line-height-6 pt-4 pb-2 px-6 border-t border-gray-200 gap-y-4 gap-x-4"
 };
@@ -95141,6 +95143,18 @@ const _sfc_main$5I = /* @__PURE__ */ defineComponent({
           return t("canvasUI.CAlgoliaSearch.canvasFilters.saved");
       }
     };
+    const getSnippet = (item) => {
+      if (!searchQuery.value || searchQuery.value.trim() === "/") {
+        return "";
+      }
+      if (!item._snippetResult?.searchable_content?.value) {
+        return "";
+      }
+      if (item._highlightResult?.name?.matchLevel !== "none") {
+        return "";
+      }
+      return item._snippetResult.searchable_content.value;
+    };
     const toggleCanvasFilter = (filterType) => {
       if (selectedCanvasFilters.value.includes(filterType)) {
         selectedCanvasFilters.value.splice(selectedCanvasFilters.value.indexOf(filterType), 1);
@@ -95712,7 +95726,7 @@ const _sfc_main$5I = /* @__PURE__ */ defineComponent({
                         }, [
                           item.type === "file" ? (openBlock(), createBlock(_sfc_main$6I, {
                             key: 0,
-                            class: "h-14 border-rounded-1 overflow-hidden flex-0 mr-4",
+                            class: "w-18 h-14 border-rounded-1 overflow-hidden flex-shrink-0 mr-4",
                             cover: "",
                             "file-data": item,
                             "object-fit": "cover",
@@ -95727,13 +95741,18 @@ const _sfc_main$5I = /* @__PURE__ */ defineComponent({
                           ])),
                           createElementVNode("div", _hoisted_38$4, [
                             createElementVNode("h3", _hoisted_39$4, toDisplayString(item.name), 1),
-                            createElementVNode("p", _hoisted_40$4, toDisplayString(item.type === "folder" ? "Folder" : item.content_type || "PDF"), 1)
+                            item.type === "file" && getSnippet(item) ? (openBlock(), createElementBlock("p", {
+                              key: 0,
+                              class: "text-xs text-gray-600 mb-1",
+                              innerHTML: getSnippet(item)
+                            }, null, 8, _hoisted_40$4)) : createCommentVNode("", true),
+                            createElementVNode("p", _hoisted_41$4, toDisplayString(item.type === "folder" ? "Folder" : item.content_type || "PDF"), 1)
                           ]),
-                          createElementVNode("div", _hoisted_41$4, toDisplayString(item.type === "folder" ? item.parent_folder?.name || "" : item.folder?.name || ""), 1)
+                          createElementVNode("div", _hoisted_42$4, toDisplayString(item.type === "folder" ? item.parent_folder?.name || "" : item.folder?.name || ""), 1)
                         ], 10, _hoisted_36$4);
                       }), 128))
                     ]),
-                    filteredContentFiles.value.length > 5 ? (openBlock(), createElementBlock("div", _hoisted_42$4, [
+                    filteredContentFiles.value.length > 5 ? (openBlock(), createElementBlock("div", _hoisted_43$4, [
                       createElementVNode("span", {
                         class: "text-sm text-gray-600 hover:text-gray-800 font-bold flex items-center cursor-pointer",
                         onClick: _cache[13] || (_cache[13] = ($event) => searchType.value = "content")
@@ -95747,16 +95766,16 @@ const _sfc_main$5I = /* @__PURE__ */ defineComponent({
                       ])
                     ])) : createCommentVNode("", true)
                   ])) : createCommentVNode("", true),
-                  filteredCanvasFiles.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_43$4, [
-                    createElementVNode("div", _hoisted_44$4, [
+                  filteredCanvasFiles.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_44$4, [
+                    createElementVNode("div", _hoisted_45$4, [
                       createVNode(CIcon, {
                         class: "mr-2",
                         color: "var(--p-text2)",
                         icon: "presentation",
                         size: "16"
                       }),
-                      createElementVNode("span", _hoisted_45$4, toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.sections.pitchDecks")), 1),
-                      createElementVNode("span", _hoisted_46$4, "(" + toDisplayString(filteredCanvasFiles.value.length) + ")", 1)
+                      createElementVNode("span", _hoisted_46$4, toDisplayString(unref(t)("canvasUI.CAlgoliaSearch.sections.pitchDecks")), 1),
+                      createElementVNode("span", _hoisted_47$4, "(" + toDisplayString(filteredCanvasFiles.value.length) + ")", 1)
                     ]),
                     createElementVNode("div", null, [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(filteredCanvasFiles.value.slice(0, 5), (item) => {
@@ -95770,22 +95789,22 @@ const _sfc_main$5I = /* @__PURE__ */ defineComponent({
                           "data-result-selected": isResultSelected(item),
                           onClick: ($event) => handleResultClick(item, "canvas")
                         }, [
-                          createElementVNode("div", _hoisted_48$4, [
+                          createElementVNode("div", _hoisted_49$4, [
                             createVNode(CIcon, {
                               color: "var(--p-text2)",
                               icon: "presentation",
                               size: "32"
                             })
                           ]),
-                          createElementVNode("div", _hoisted_49$4, [
-                            createElementVNode("h3", _hoisted_50$4, toDisplayString(item.name), 1),
-                            createElementVNode("p", _hoisted_51$3, toDisplayString(formatCanvasType(item.content_type)), 1)
+                          createElementVNode("div", _hoisted_50$4, [
+                            createElementVNode("h3", _hoisted_51$2, toDisplayString(item.name), 1),
+                            createElementVNode("p", _hoisted_52$2, toDisplayString(formatCanvasType(item.content_type)), 1)
                           ]),
-                          createElementVNode("div", _hoisted_52$3, toDisplayString(item.folder?.name || ""), 1)
-                        ], 10, _hoisted_47$4);
+                          createElementVNode("div", _hoisted_53$2, toDisplayString(item.folder?.name || ""), 1)
+                        ], 10, _hoisted_48$4);
                       }), 128))
                     ]),
-                    filteredCanvasFiles.value.length > 5 ? (openBlock(), createElementBlock("div", _hoisted_53$3, [
+                    filteredCanvasFiles.value.length > 5 ? (openBlock(), createElementBlock("div", _hoisted_54$1, [
                       createElementVNode("span", {
                         class: "text-sm text-gray-600 hover:text-gray-800 font-bold flex items-center cursor-pointer",
                         onClick: _cache[14] || (_cache[14] = ($event) => searchType.value = "canvases")
@@ -95800,7 +95819,7 @@ const _sfc_main$5I = /* @__PURE__ */ defineComponent({
                     ])) : createCommentVNode("", true)
                   ])) : createCommentVNode("", true)
                 ]),
-                searchError.value || shouldShowNoResults.value ? (openBlock(), createElementBlock("div", _hoisted_54$2, [
+                searchError.value || shouldShowNoResults.value ? (openBlock(), createElementBlock("div", _hoisted_55$1, [
                   createVNode(CIcon, {
                     class: "text-6xl",
                     color: searchError.value ? "var(--p-error)" : "var(--p-text3)",
@@ -95811,9 +95830,9 @@ const _sfc_main$5I = /* @__PURE__ */ defineComponent({
                     class: normalizeClass(searchError.value ? "text-error font-semibold" : "text-text2")
                   }, toDisplayString(searchError.value || unref(t)("canvasUI.CGlobalSearch.noResults")), 3)
                 ])) : createCommentVNode("", true)
-              ])) : (openBlock(), createElementBlock("div", _hoisted_55$2, [
-                createElementVNode("div", _hoisted_56$2, [
-                  createElementVNode("div", _hoisted_57$2, [
+              ])) : (openBlock(), createElementBlock("div", _hoisted_56$1, [
+                createElementVNode("div", _hoisted_57$1, [
+                  createElementVNode("div", _hoisted_58$1, [
                     searchType.value === "content" ? (openBlock(), createBlock(CIcon, {
                       key: 0,
                       class: "mr-2",
@@ -95827,8 +95846,8 @@ const _sfc_main$5I = /* @__PURE__ */ defineComponent({
                       icon: "presentation",
                       size: "16"
                     })),
-                    createElementVNode("span", _hoisted_58$2, toDisplayString(searchType.value === "content" ? unref(t)("canvasUI.CAlgoliaSearch.sections.content") : unref(t)("canvasUI.CAlgoliaSearch.sections.pitchDecks")), 1),
-                    createElementVNode("span", _hoisted_59$2, " (" + toDisplayString(searchType.value === "content" ? filteredContentFiles.value.length : filteredCanvasFiles.value.length) + ") ", 1)
+                    createElementVNode("span", _hoisted_59$1, toDisplayString(searchType.value === "content" ? unref(t)("canvasUI.CAlgoliaSearch.sections.content") : unref(t)("canvasUI.CAlgoliaSearch.sections.pitchDecks")), 1),
+                    createElementVNode("span", _hoisted_60$1, " (" + toDisplayString(searchType.value === "content" ? filteredContentFiles.value.length : filteredCanvasFiles.value.length) + ") ", 1)
                   ]),
                   createElementVNode("div", null, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(searchType.value === "content" ? filteredContentFiles.value : filteredCanvasFiles.value, (item) => {
@@ -95847,13 +95866,13 @@ const _sfc_main$5I = /* @__PURE__ */ defineComponent({
                       }, [
                         searchType.value === "content" && item.type === "file" ? (openBlock(), createBlock(_sfc_main$6I, {
                           key: 0,
-                          class: "h-14 border-rounded-1 overflow-hidden flex-0 mr-4",
+                          class: "w-18 h-14 border-rounded-1 overflow-hidden flex-shrink-0 mr-4",
                           cover: "",
                           "file-data": item,
                           "object-fit": "cover",
                           src: item.picture_url || "",
                           width: "72"
-                        }, null, 8, ["file-data", "src"])) : (openBlock(), createElementBlock("div", _hoisted_61$2, [
+                        }, null, 8, ["file-data", "src"])) : (openBlock(), createElementBlock("div", _hoisted_62$1, [
                           searchType.value === "content" ? (openBlock(), createBlock(CIcon, {
                             key: 0,
                             color: "var(--p-text2)",
@@ -95866,15 +95885,20 @@ const _sfc_main$5I = /* @__PURE__ */ defineComponent({
                             size: "32"
                           }))
                         ])),
-                        createElementVNode("div", _hoisted_62$2, [
-                          createElementVNode("h3", _hoisted_63$2, toDisplayString(item.name), 1),
-                          createElementVNode("p", _hoisted_64$2, toDisplayString(searchType.value === "content" ? item.type === "folder" ? "Folder" : item.content_type || "PDF" : formatCanvasType(item.content_type)), 1)
+                        createElementVNode("div", _hoisted_63$1, [
+                          createElementVNode("h3", _hoisted_64$1, toDisplayString(item.name), 1),
+                          searchType.value === "content" && item.type === "file" && getSnippet(item) ? (openBlock(), createElementBlock("p", {
+                            key: 0,
+                            class: "text-xs text-gray-600 mb-1",
+                            innerHTML: getSnippet(item)
+                          }, null, 8, _hoisted_65$1)) : createCommentVNode("", true),
+                          createElementVNode("p", _hoisted_66$1, toDisplayString(searchType.value === "content" ? item.type === "folder" ? "Folder" : item.content_type || "PDF" : formatCanvasType(item.content_type)), 1)
                         ]),
-                        createElementVNode("div", _hoisted_65$2, toDisplayString(searchType.value === "content" && item.type === "folder" ? item.parent_folder?.name || "" : item.folder?.name || ""), 1)
-                      ], 10, _hoisted_60$2);
+                        createElementVNode("div", _hoisted_67$1, toDisplayString(searchType.value === "content" && item.type === "folder" ? item.parent_folder?.name || "" : item.folder?.name || ""), 1)
+                      ], 10, _hoisted_61$1);
                     }), 128))
                   ]),
-                  searchError.value || shouldShowNoResults.value ? (openBlock(), createElementBlock("div", _hoisted_66$2, [
+                  searchError.value || shouldShowNoResults.value ? (openBlock(), createElementBlock("div", _hoisted_68$1, [
                     createVNode(CIcon, {
                       class: "text-6xl",
                       color: searchError.value ? "var(--p-error)" : "var(--p-text3)",
@@ -95888,7 +95912,7 @@ const _sfc_main$5I = /* @__PURE__ */ defineComponent({
                 ])
               ]))
             ]),
-            !showRecentView.value ? (openBlock(), createElementBlock("div", _hoisted_67$2, [
+            !showRecentView.value ? (openBlock(), createElementBlock("div", _hoisted_69, [
               createVNode(CShortcut, null, {
                 default: withCtx(() => [
                   createVNode(CShortcutIcon, { icon: "arrow-up" }),
@@ -95930,7 +95954,7 @@ const _sfc_main$5I = /* @__PURE__ */ defineComponent({
   }
 });
 
-const CAlgoliaSearch = /* @__PURE__ */ _export_sfc(_sfc_main$5I, [["__scopeId", "data-v-b3a9f0d5"]]);
+const CAlgoliaSearch = /* @__PURE__ */ _export_sfc(_sfc_main$5I, [["__scopeId", "data-v-d96d349f"]]);
 
 const BulletListExtended = BulletList.extend({
   addOptions() {
@@ -140765,96 +140789,17 @@ const _sfc_main$2G = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$24 = {
-  key: 0,
-  class: "cb-data-charts-raw__controls"
-};
+const _hoisted_1$24 = { class: "cb-data-charts-raw" };
 const _sfc_main$2F = /* @__PURE__ */ defineComponent({
   __name: "DataCharts.raw",
   props: {
-    data: {},
-    isPreview: { type: Boolean },
-    isEditMode: { type: Boolean }
+    data: {}
   },
   setup(__props) {
-    const { t } = useI18n();
     const chartRef = ref(null);
-    const containerRef = ref(null);
     let chart = null;
     const isChartLoaded = ref(false);
-    const isFullscreen = ref(false);
-    const currentChartType = ref("");
     const props = __props;
-    const showViewControls = computed(() => {
-      if (props.isPreview || props.isEditMode) return false;
-      return props.data?.view_controls?.enable_fullscreen_btn || props.data?.view_controls?.enable_chart_type_switcher;
-    });
-    const containerStyle = computed(() => {
-      if (isFullscreen.value || props.isPreview) {
-        return {};
-      }
-      return {
-        height: props.data?.chart_height ? `${props.data.chart_height}px` : void 0,
-        width: props.data?.chart_width ? `${props.data.chart_width}%` : void 0,
-        minHeight: props.data?.chart_height ? `${props.data.chart_height}px` : void 0,
-        maxHeight: props.data?.chart_height ? `${props.data.chart_height}px` : void 0
-      };
-    });
-    const originalChartType = computed(() => {
-      return props.data?.type || props.data?._primary_chart_type || "bar";
-    });
-    const isScatterChart = computed(() => originalChartType.value === "scatter");
-    const isBubbleChart = computed(() => originalChartType.value === "bubble");
-    const labelValueChartTypes = [
-      { label: t("canvasUI.canvasBuilder.dataCharts.types.bar"), key: "bar" },
-      { label: t("canvasUI.canvasBuilder.dataCharts.types.line"), key: "line" },
-      { label: t("canvasUI.canvasBuilder.dataCharts.types.area"), key: "area" },
-      { label: t("canvasUI.canvasBuilder.dataCharts.types.pie"), key: "pie" },
-      { label: t("canvasUI.canvasBuilder.dataCharts.types.doughnut"), key: "doughnut" },
-      { label: t("canvasUI.canvasBuilder.dataCharts.types.polarArea"), key: "polarArea" },
-      { label: t("canvasUI.canvasBuilder.dataCharts.types.radar"), key: "radar" }
-    ];
-    const scatterChartTypes = [{ label: t("canvasUI.canvasBuilder.dataCharts.types.scatter"), key: "scatter" }];
-    const bubbleChartTypes = [{ label: t("canvasUI.canvasBuilder.dataCharts.types.bubble"), key: "bubble" }];
-    const chartTypeSwitcherOptions = computed(() => {
-      if (isBubbleChart.value) return bubbleChartTypes;
-      if (isScatterChart.value) return scatterChartTypes;
-      return labelValueChartTypes;
-    });
-    function toggleFullscreen() {
-      if (!containerRef.value) return;
-      if (!isFullscreen.value) {
-        isFullscreen.value = true;
-      } else {
-        isFullscreen.value = false;
-      }
-      nextTick(() => {
-        if (chart) {
-          chart.resize();
-        }
-      });
-    }
-    function handleChartTypeChange(newType) {
-      if (!chart || !props.data) return;
-      currentChartType.value = newType;
-      initChart(newType);
-    }
-    function handleKeydown(e) {
-      if (e.key === "Escape" && isFullscreen.value) {
-        isFullscreen.value = false;
-        nextTick(() => {
-          if (chart) {
-            chart.resize();
-          }
-        });
-      }
-    }
-    onMounted(() => {
-      window.addEventListener("keydown", handleKeydown);
-    });
-    onUnmounted(() => {
-      window.removeEventListener("keydown", handleKeydown);
-    });
     const sectionListSectionInfo = inject(
       "sectionListSectionInfo",
       computed(() => null)
@@ -140885,191 +140830,41 @@ const _sfc_main$2F = /* @__PURE__ */ defineComponent({
       }
       return window._chartJsPromise;
     }
-    function normalizeRValues(values, minRadius = 5, maxRadius = 40) {
-      if (values.length === 0) return [];
-      const rValues = values.map((v) => v.r);
-      const minR = Math.min(...rValues);
-      const maxR = Math.max(...rValues);
-      if (minR === maxR) {
-        return values.map((v) => ({
-          ...v,
-          r: (minRadius + maxRadius) / 2,
-          originalR: v.r
-        }));
-      }
-      return values.map((v) => ({
-        ...v,
-        r: minRadius + (v.r - minR) / (maxR - minR) * (maxRadius - minRadius),
-        originalR: v.r
-      }));
-    }
-    function processSeriesDataPoints(dataPoints, chartType, context) {
-      const isScatterChart2 = chartType === "scatter";
-      const isBubbleChart2 = chartType === "bubble";
-      const isXYChart = isScatterChart2 || isBubbleChart2;
+    function processChartData(chartData, context) {
       const processedData = {
         labels: [],
         values: []
       };
-      const rawBubbleData = [];
-      dataPoints?.forEach((point) => {
+      chartData.data_points?.forEach((point) => {
         let label = point.label;
+        let value = point.value;
         try {
           if (typeof label === "string") {
             label = renderTemplate(label, context);
           }
-          if (isXYChart) {
-            let xValue = point.x_value ?? "0";
-            let yValue = point.y_value ?? "0";
-            let rValue = point.r_value ?? "10";
-            if (typeof xValue === "string") {
-              xValue = renderTemplate(xValue, context);
-            }
-            if (typeof yValue === "string") {
-              yValue = renderTemplate(yValue, context);
-            }
-            if (typeof rValue === "string") {
-              rValue = renderTemplate(rValue, context);
-            }
-            if (typeof label === "string" && label.includes(",") && typeof xValue === "string" && xValue.includes(",") && typeof yValue === "string" && yValue.includes(",")) {
-              const labels = label.split(",");
-              const xValues = xValue.split(",");
-              const yValues = yValue.split(",");
-              const rValues = typeof rValue === "string" && rValue.includes(",") ? rValue.split(",") : [];
-              labels.forEach((l, idx) => {
-                const x = Number(xValues[idx]) || 0;
-                const y = Number(yValues[idx]) || 0;
-                if (isBubbleChart2) {
-                  const r = rValues[idx] ? Number(rValues[idx]) || 10 : 10;
-                  rawBubbleData.push({ label: l, x, y, r: Math.abs(r) });
-                } else {
-                  processedData.labels.push(l);
-                  processedData.values.push({ x, y });
-                }
-              });
-            } else {
-              const x = Number(xValue) || 0;
-              const y = Number(yValue) || 0;
-              if (isBubbleChart2) {
-                const r = Number(rValue) || 10;
-                rawBubbleData.push({ label, x, y, r: Math.abs(r) });
-              } else {
-                processedData.labels.push(label);
-                processedData.values.push({ x, y });
+          if (typeof value === "string") {
+            value = renderTemplate(value, context);
+          }
+          if (typeof label === "string" && label.includes(",") && typeof value === "string" && value.includes(",")) {
+            const labels = label.split(",");
+            const values = value.split(",");
+            labels.forEach((l, idx) => {
+              const v = values[idx];
+              if (v !== void 0) {
+                processedData.labels.push(l);
+                processedData.values.push(Number(v) || 0);
               }
-            }
+            });
           } else {
-            let value = point.value;
-            if (typeof value === "string") {
-              value = renderTemplate(value, context);
-            }
-            if (typeof label === "string" && label.includes(",") && typeof value === "string" && value.includes(",")) {
-              const labels = label.split(",");
-              const values = value.split(",");
-              labels.forEach((l, idx) => {
-                const v = values[idx];
-                if (v !== void 0) {
-                  processedData.labels.push(l);
-                  processedData.values.push(Number(v) || 0);
-                }
-              });
-            } else {
-              processedData.labels.push(label);
-              processedData.values.push(Number(value) || 0);
-            }
+            processedData.labels.push(label);
+            processedData.values.push(Number(value) || 0);
           }
         } catch (err) {
           console.warn("Error processing chart data point:", err);
-          if (isBubbleChart2) {
-            rawBubbleData.push({ label, x: 0, y: 0, r: 10 });
-          } else if (isXYChart) {
-            processedData.labels.push(label);
-            processedData.values.push({ x: 0, y: 0 });
-          } else {
-            processedData.labels.push(label);
-            processedData.values.push(0);
-          }
+          processedData.labels.push(label);
+          processedData.values.push(Number(value) || 0);
         }
       });
-      if (isBubbleChart2 && rawBubbleData.length > 0) {
-        const bubbleValues = rawBubbleData.map((d) => ({ x: d.x, y: d.y, r: d.r }));
-        const normalizedValues = normalizeRValues(bubbleValues);
-        rawBubbleData.forEach((d, idx) => {
-          processedData.labels.push(d.label);
-          processedData.values.push(normalizedValues[idx]);
-        });
-      }
-      return processedData;
-    }
-    function processChartData(chartData, context, overrideType) {
-      if (chartData.series && Array.isArray(chartData.series) && chartData.series.length > 0) {
-        const datasets = [];
-        let allLabels = [];
-        const isSingleSeries = chartData.series.length === 1;
-        chartData.series.forEach((series, index) => {
-          const seriesChartType = overrideType || series.chart_type || chartData.type || "bar";
-          const processedData2 = processSeriesDataPoints(series.data_points || [], seriesChartType, context);
-          if (processedData2.labels.length > allLabels.length) {
-            allLabels = processedData2.labels;
-          }
-          const preBuiltDataset = chartData.data?.datasets?.[index];
-          let backgroundColor2 = preBuiltDataset?.background_color || preBuiltDataset?.backgroundColor;
-          let borderColor2 = preBuiltDataset?.border_color || preBuiltDataset?.borderColor;
-          if (isSingleSeries && Array.isArray(backgroundColor2)) {
-            const resolvedColors = backgroundColor2.map((color, i) => {
-              if (typeof color === "string" && color.startsWith("palette")) {
-                const paletteIndex = parseInt(color.replace("palette", ""));
-                const validIndex = paletteIndex >= 0 ? paletteIndex % palette.value.length : i;
-                return palette.value[validIndex];
-              }
-              return color;
-            });
-            const dataPointsCount = processedData2.values.length;
-            backgroundColor2 = Array.from({ length: dataPointsCount }, (_, i) => resolvedColors[i % resolvedColors.length]);
-            borderColor2 = [...backgroundColor2];
-          } else if (typeof backgroundColor2 === "string" && backgroundColor2.startsWith("palette")) {
-            const paletteIndex = parseInt(backgroundColor2.replace("palette", ""));
-            const validIndex = paletteIndex >= 0 ? paletteIndex % palette.value.length : index;
-            backgroundColor2 = palette.value[validIndex];
-            borderColor2 = backgroundColor2;
-          }
-          const datasetOptions = {
-            label: series.name,
-            data: processedData2.values,
-            backgroundColor: backgroundColor2 || palette.value[index % palette.value.length],
-            borderColor: borderColor2 || palette.value[index % palette.value.length],
-            borderWidth: 1
-          };
-          if (!isSingleSeries) {
-            if (series.chart_type === "area") {
-              datasetOptions.type = "line";
-              datasetOptions.fill = true;
-              datasetOptions.tension = 0.4;
-            } else {
-              datasetOptions.type = series.chart_type;
-            }
-          }
-          if (series.chart_type === "area") {
-            datasetOptions.fill = true;
-            datasetOptions.tension = 0.4;
-          }
-          if (["line", "area"].includes(series.chart_type)) {
-            datasetOptions.tension = 0.4;
-          }
-          datasets.push(datasetOptions);
-        });
-        return {
-          ...chartData,
-          type: chartData.type || chartData._primary_chart_type || "bar",
-          data: {
-            ...chartData.data,
-            labels: allLabels,
-            datasets
-          }
-        };
-      }
-      const chartType = overrideType || chartData.type || "bar";
-      const processedData = processSeriesDataPoints(chartData.data_points || [], chartType, context);
       let backgroundColor = chartData.data?.datasets?.[0]?.background_color || [];
       let borderColor = chartData.data?.datasets?.[0]?.border_color || [];
       if (chartData.color_scheme_type === "theme" && Array.isArray(backgroundColor)) {
@@ -141115,7 +140910,7 @@ const _sfc_main$2F = /* @__PURE__ */ defineComponent({
         }
       };
     }
-    function initChart(overrideType) {
+    function initChart() {
       if (!props.data || !chartRef.value || !isChartLoaded.value) {
         return;
       }
@@ -141123,85 +140918,25 @@ const _sfc_main$2F = /* @__PURE__ */ defineComponent({
         chart.destroy();
       }
       const context = props.data.context ?? (!isEmpty(activeCanvas.value?.context) || isCanvas.value ? { ...crmShape.value, ...activeCanvas.value?.context } : crmShape.value);
-      const processedChartData = processChartData(props.data, context, overrideType);
-      let chartType = overrideType || currentChartType.value || processedChartData.type || "bar";
-      const isAreaChart = chartType === "area";
-      if (isAreaChart) {
-        chartType = "line";
-      }
+      const processedChartData = processChartData(props.data, context);
       if (processedChartData.data?.datasets) {
         processedChartData.data.datasets = processedChartData.data.datasets.map((dataset) => {
-          const { background_color, border_color, point_style, fill, tension, show_line, ...rest } = dataset;
+          const { background_color, border_color, point_style, ...rest } = dataset;
           return {
             ...rest,
             backgroundColor: dataset.backgroundColor || background_color || ["#000000"],
             borderColor: dataset.borderColor || border_color || ["#000000"],
-            pointStyle: point_style,
-            fill: isAreaChart ? true : fill,
-            tension: isAreaChart ? tension ?? 0.4 : tension,
-            showLine: show_line
+            pointStyle: point_style
           };
         });
       }
-      let scales = processedChartData.options?.scales;
-      if (scales) {
-        const convertedScales = {};
-        if (scales.x) {
-          convertedScales.x = { ...scales.x };
-        }
-        if (scales.y) {
-          convertedScales.y = {
-            ...scales.y,
-            beginAtZero: scales.y.begin_at_zero
-          };
-          delete convertedScales.y.begin_at_zero;
-        }
-        if (scales.r) {
-          convertedScales.r = {
-            ...scales.r,
-            beginAtZero: scales.r.begin_at_zero,
-            ticks: scales.r.ticks ? {
-              stepSize: scales.r.ticks.step_size
-            } : void 0
-          };
-        }
-        scales = convertedScales;
-      }
-      if (["pie", "doughnut", "polarArea"].includes(chartType)) {
-        scales = void 0;
-      }
-      const tooltipCallbacks = {};
-      const isBubble = chartType === "bubble";
-      if (props.data.percent_display || isBubble) {
-        tooltipCallbacks.label = function(context2) {
-          const label = context2.dataset.label || "";
-          const value = context2.raw;
-          if (isBubble && typeof value === "object" && value !== null) {
-            const x = value.x;
-            const y = value.y;
-            const r = value.originalR !== void 0 ? value.originalR : value.r;
-            return `${label}${label ? ": " : ""}(${x}, ${y}, ${r})`;
-          }
-          if (props.data?.percent_display && typeof value === "number" && value >= 0 && value <= 1) {
-            return `${label}${label ? ": " : ""}${(value * 100).toFixed(2)}%`;
-          }
-          return `${label}${label ? ": " : ""}${value}`;
-        };
-      }
       const chartConfig = {
         ...processedChartData,
-        type: chartType,
+        type: processedChartData.type,
         options: merge$1({}, processedChartData.options, {
           responsive: true,
           maintainAspectRatio: false,
-          indexAxis: processedChartData.options?.index_axis,
-          scales,
-          plugins: {
-            ...processedChartData.options?.plugins,
-            tooltip: props.data.percent_display || isBubble ? {
-              callbacks: tooltipCallbacks
-            } : void 0
-          }
+          indexAxis: processedChartData.options?.index_axis
         })
       };
       chart = new window.Chart(chartRef.value, chartConfig);
@@ -141221,172 +140956,84 @@ const _sfc_main$2F = /* @__PURE__ */ defineComponent({
       isChartLoaded.value = true;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "containerRef",
-        ref: containerRef,
-        class: normalizeClass(["cb-data-charts-raw", { "is-fullscreen": isFullscreen.value }]),
-        style: normalizeStyle(containerStyle.value)
-      }, [
-        showViewControls.value ? (openBlock(), createElementBlock("div", _hoisted_1$24, [
-          props.data?.view_controls?.enable_chart_type_switcher ? (openBlock(), createBlock(unref(NDropdown), {
-            key: 0,
-            options: chartTypeSwitcherOptions.value,
-            trigger: "click",
-            onSelect: handleChartTypeChange
-          }, {
-            default: withCtx(() => [
-              createVNode(CButton, {
-                quaternary: "",
-                size: "small"
-              }, {
-                icon: withCtx(() => [
-                  createVNode(CIcon, { icon: "chart-bar" })
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }, 8, ["options"])) : createCommentVNode("", true),
-          props.data?.view_controls?.enable_fullscreen_btn ? (openBlock(), createBlock(CButton, {
-            key: 1,
-            quaternary: "",
-            size: "small",
-            onClick: toggleFullscreen
-          }, {
-            icon: withCtx(() => [
-              createVNode(CIcon, {
-                icon: isFullscreen.value ? "compress" : "expand"
-              }, null, 8, ["icon"])
-            ]),
-            _: 1
-          })) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true),
+      return openBlock(), createElementBlock("div", _hoisted_1$24, [
         createElementVNode("canvas", {
           ref_key: "chartRef",
           ref: chartRef,
           class: "w-full h-full"
         }, null, 512)
-      ], 6);
+      ]);
     };
   }
 });
 
-const RawDataCharts = /* @__PURE__ */ _export_sfc(_sfc_main$2F, [["__scopeId", "data-v-7078dc66"]]);
-
-const STANDALONE_CHART_TYPES = ["pie", "doughnut", "radar", "polarArea"];
-const ONE_D_CHART_TYPES = ["bar", "line", "area"];
-const TWO_D_CHART_TYPES = ["scatter"];
-const THREE_D_CHART_TYPES = ["bubble"];
-const XY_CHART_TYPES = ["scatter"];
-const XYR_CHART_TYPES = ["bubble"];
+const RawDataCharts = /* @__PURE__ */ _export_sfc(_sfc_main$2F, [["__scopeId", "data-v-e71330a8"]]);
 
 const _hoisted_1$23 = { class: "flex gap-4 h-[calc(80vh-120px)] w-full" };
 const _hoisted_2$1t = { class: "cb-data-charts-settings__card overflow-auto flex-1" };
 const _hoisted_3$17 = { class: "flex flex-col h-full" };
 const _hoisted_4$X = { class: "flex-grow overflow-y-auto overflow-x-hidden" };
-const _hoisted_5$O = { class: "text-sm font-semibold mb-3 text-gray-600 dark:text-gray-400 uppercase tracking-wide" };
-const _hoisted_6$H = { class: "flex items-end border-b border-gray-200 dark:border-gray-700 mb-4 -mx-4 px-4" };
-const _hoisted_7$v = ["onClick"];
-const _hoisted_8$q = { class: "text-sm font-medium truncate max-w-24" };
-const _hoisted_9$m = ["onClick"];
-const _hoisted_10$h = ["title"];
-const _hoisted_11$f = {
+const _hoisted_5$O = { class: "mb-4" };
+const _hoisted_6$H = { class: "block mb-2" };
+const _hoisted_7$v = { class: "mb-4" };
+const _hoisted_8$q = { class: "block mb-2" };
+const _hoisted_9$m = { class: "mb-4" };
+const _hoisted_10$h = { class: "block mb-2" };
+const _hoisted_11$f = { class: "mb-4" };
+const _hoisted_12$b = { class: "block mb-2" };
+const _hoisted_13$a = {
   key: 0,
   class: "mb-4"
 };
-const _hoisted_12$b = { class: "block mb-2" };
-const _hoisted_13$a = { class: "mb-4" };
 const _hoisted_14$9 = { class: "block mb-2" };
 const _hoisted_15$8 = { class: "mb-4" };
-const _hoisted_16$8 = { class: "flex justify-between items-center mb-2" };
-const _hoisted_17$7 = { class: "block" };
-const _hoisted_18$6 = ["onClick"];
-const _hoisted_19$6 = { class: "p-4 min-w-[400px] max-h-[400px]" };
-const _hoisted_20$5 = { class: "flex gap-4 h-full" };
-const _hoisted_21$5 = { class: "flex-1 flex flex-col" };
-const _hoisted_22$3 = { class: "text-sm mb-2" };
-const _hoisted_23$3 = { class: "overflow-auto" };
-const _hoisted_24$3 = {
+const _hoisted_16$8 = { class: "block mb-2" };
+const _hoisted_17$7 = {
+  key: 1,
+  class: "mb-4"
+};
+const _hoisted_18$6 = { class: "block mb-2" };
+const _hoisted_19$6 = { class: "mb-4" };
+const _hoisted_20$5 = { class: "flex justify-between items-center mb-2" };
+const _hoisted_21$5 = { class: "block" };
+const _hoisted_22$3 = { class: "flex gap-2 flex-1" };
+const _hoisted_23$3 = ["onClick"];
+const _hoisted_24$3 = { class: "p-4 min-w-[400px] max-h-[400px]" };
+const _hoisted_25$3 = { class: "flex gap-4 h-full" };
+const _hoisted_26$3 = { class: "flex-1 flex flex-col" };
+const _hoisted_27$3 = { class: "text-sm mb-2" };
+const _hoisted_28$3 = { class: "overflow-auto" };
+const _hoisted_29$3 = {
   key: 0,
   class: "flex-1 border-l pl-4"
 };
-const _hoisted_25$3 = { class: "text-sm font-medium mb-2" };
-const _hoisted_26$3 = { class: "flex flex-col gap-2" };
-const _hoisted_27$3 = { class: "block mb-1 text-sm" };
-const _hoisted_28$3 = { class: "block mb-1 text-sm" };
-const _hoisted_29$3 = ["onClick"];
-const _hoisted_30$3 = { class: "p-4 min-w-[400px] max-h-[400px]" };
-const _hoisted_31$3 = { class: "flex gap-4 h-full" };
-const _hoisted_32$3 = { class: "flex-1 flex flex-col" };
-const _hoisted_33$3 = { class: "text-sm mb-2" };
-const _hoisted_34$3 = { class: "overflow-auto" };
-const _hoisted_35$3 = {
+const _hoisted_30$3 = { class: "text-sm font-medium mb-2" };
+const _hoisted_31$3 = { class: "flex flex-col gap-2" };
+const _hoisted_32$3 = { class: "block mb-1 text-sm" };
+const _hoisted_33$3 = { class: "block mb-1 text-sm" };
+const _hoisted_34$3 = ["onClick"];
+const _hoisted_35$3 = { class: "p-4 min-w-[400px] max-h-[400px]" };
+const _hoisted_36$3 = { class: "flex gap-4 h-full" };
+const _hoisted_37$3 = { class: "flex-1 flex flex-col" };
+const _hoisted_38$3 = { class: "text-sm mb-2" };
+const _hoisted_39$3 = { class: "overflow-auto" };
+const _hoisted_40$3 = {
   key: 0,
   class: "flex-1 border-l pl-4"
 };
-const _hoisted_36$3 = { class: "text-sm font-medium mb-2" };
-const _hoisted_37$3 = { class: "flex flex-col gap-2" };
-const _hoisted_38$3 = { class: "block mb-1 text-sm" };
-const _hoisted_39$3 = { class: "block mb-1 text-sm" };
-const _hoisted_40$3 = { class: "block mb-1 text-sm" };
-const _hoisted_41$3 = { key: 0 };
-const _hoisted_42$3 = { class: "block mb-1 text-sm" };
-const _hoisted_43$3 = ["onClick"];
-const _hoisted_44$3 = { class: "p-4 min-w-[400px] max-h-[400px] overflow-auto" };
-const _hoisted_45$3 = { class: "text-sm mb-2" };
-const _hoisted_46$3 = ["onClick"];
-const _hoisted_47$3 = { class: "p-4 min-w-[400px] max-h-[400px] overflow-auto" };
-const _hoisted_48$3 = { class: "text-sm mb-2" };
-const _hoisted_49$3 = { class: "flex justify-center mt-2" };
-const _hoisted_50$3 = { class: "text-sm font-semibold mb-3 mt-6 text-gray-600 dark:text-gray-400 uppercase tracking-wide border-t border-gray-200 dark:border-gray-700 pt-6" };
-const _hoisted_51$2 = { class: "mb-4" };
-const _hoisted_52$2 = { class: "block mb-2" };
-const _hoisted_53$2 = { class: "mb-4" };
-const _hoisted_54$1 = { class: "block mb-2" };
-const _hoisted_55$1 = { class: "mb-4" };
-const _hoisted_56$1 = { class: "block mb-2" };
-const _hoisted_57$1 = { class: "mb-4" };
-const _hoisted_58$1 = { class: "block mb-2" };
-const _hoisted_59$1 = {
-  key: 2,
-  class: "mb-4"
-};
-const _hoisted_60$1 = { class: "block mb-2" };
-const _hoisted_61$1 = {
-  key: 3,
-  class: "mb-4"
-};
-const _hoisted_62$1 = { class: "block mb-2" };
-const _hoisted_63$1 = { class: "mb-4" };
-const _hoisted_64$1 = { class: "block mb-2" };
-const _hoisted_65$1 = { class: "mb-4" };
-const _hoisted_66$1 = { class: "block mb-2" };
-const _hoisted_67$1 = { class: "mb-4" };
-const _hoisted_68$1 = { class: "block mb-2" };
-const _hoisted_69 = { class: "flex items-center gap-2" };
-const _hoisted_70 = { class: "text-sm text-gray-500" };
-const _hoisted_71 = { class: "mb-4" };
-const _hoisted_72 = { class: "block mb-2" };
-const _hoisted_73 = { class: "flex flex-col gap-2" };
-const _hoisted_74 = { class: "flex items-center gap-2" };
-const _hoisted_75 = { class: "text-sm" };
-const _hoisted_76 = { class: "text-sm" };
-const _hoisted_77 = { class: "flex items-center gap-2" };
-const _hoisted_78 = { class: "text-sm" };
-const _hoisted_79 = { class: "mb-4" };
-const _hoisted_80 = { class: "block mb-2" };
-const _hoisted_81 = { class: "flex flex-col gap-3" };
-const _hoisted_82 = { class: "flex items-center gap-2" };
-const _hoisted_83 = { class: "text-sm w-16" };
-const _hoisted_84 = { class: "flex items-center gap-2" };
-const _hoisted_85 = { class: "text-sm w-16" };
-const _hoisted_86 = { class: "cb-data-charts-settings__preview flex-1 border-l border-[#eee] pl-4" };
-const _hoisted_87 = { class: "text-sm font-medium mb-4" };
-const _hoisted_88 = {
+const _hoisted_41$3 = { class: "flex flex-col gap-2" };
+const _hoisted_42$3 = { class: "flex justify-center mt-2" };
+const _hoisted_43$3 = { class: "mb-4" };
+const _hoisted_44$3 = { class: "block mb-2" };
+const _hoisted_45$3 = { class: "mb-4" };
+const _hoisted_46$3 = { class: "block mb-2" };
+const _hoisted_47$3 = { class: "cb-data-charts-settings__preview flex-1 border-l border-[#eee] pl-4" };
+const _hoisted_48$3 = { class: "text-sm font-medium mb-4" };
+const _hoisted_49$3 = {
   class: "preview-container",
   style: { "height": "300px" }
 };
-const _hoisted_89 = { class: "flex justify-between gap-4" };
+const _hoisted_50$3 = { class: "flex justify-between gap-4" };
 const _sfc_main$2E = /* @__PURE__ */ defineComponent({
   __name: "DataCharts.settings",
   props: {
@@ -141400,91 +141047,7 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
     const { setComponentEditMode, updateNodeDataById } = useCanvas$1();
     const { crmShape } = useCrmShape();
     const { palette } = useCanvasTheme$1();
-    let seriesIdCounter = 0;
-    function generateSeriesId() {
-      return `series_${Date.now()}_${seriesIdCounter++}`;
-    }
-    function convertSavedSeriesToRuntime(savedSeries) {
-      return {
-        id: savedSeries.id || generateSeriesId(),
-        name: savedSeries.name || "Series 1",
-        chartType: savedSeries.chart_type || "bar",
-        dataPoints: (savedSeries.data_points || []).map((dp) => ({
-          label: dp.label || "",
-          value: dp.value || "",
-          xValue: dp.x_value ?? "",
-          yValue: dp.y_value ?? "",
-          rValue: dp.r_value ?? "",
-          dynamicValue: dp.dynamic_value,
-          dynamicXValue: dp.dynamic_x_value,
-          dynamicYValue: dp.dynamic_y_value,
-          dynamicRValue: dp.dynamic_r_value,
-          arrayConfig: dp.array_config
-        }))
-      };
-    }
-    function convertLegacyToSeries() {
-      const chartTypeValue = props.data?.type ?? props.data?._primary_chart_type ?? "bar";
-      const dataPoints = props.data?.data_points && Array.isArray(props.data.data_points) ? props.data.data_points.map((dp) => ({
-        label: dp.label,
-        value: dp.value,
-        xValue: dp.x_value ?? "",
-        yValue: dp.y_value ?? "",
-        dynamicValue: dp.dynamic_value,
-        dynamicXValue: dp.dynamic_x_value,
-        dynamicYValue: dp.dynamic_y_value,
-        arrayConfig: dp.array_config
-      })) : props.data?.data?.labels ? props.data.data.labels.map((label, index) => ({
-        label: String(label),
-        value: String(props.data?.data?.datasets?.[0]?.data?.[index] ?? 0),
-        xValue: "",
-        yValue: ""
-      })) : [];
-      return [
-        {
-          id: generateSeriesId(),
-          name: t("canvasUI.canvasBuilder.dataCharts.series") + " 1",
-          chartType: chartTypeValue,
-          dataPoints
-        }
-      ];
-    }
-    const seriesList = ref(
-      props.data?.series && Array.isArray(props.data.series) && props.data.series.length > 0 ? props.data.series.map((s) => convertSavedSeriesToRuntime(s)) : convertLegacyToSeries()
-    );
-    const activeSeriesIndex = ref(0);
-    const activeSeries = computed(() => seriesList.value[activeSeriesIndex.value]);
-    const isActiveSeriesXYChart = computed(() => XY_CHART_TYPES.includes(activeSeries.value?.chartType));
-    const isActiveSeriesXYRChart = computed(() => XYR_CHART_TYPES.includes(activeSeries.value?.chartType));
-    const isPrimaryStandalone = computed(() => STANDALONE_CHART_TYPES.includes(seriesList.value[0]?.chartType));
-    const isMultiSeries = computed(() => seriesList.value.length > 1);
-    const canAddSeries = computed(() => !isPrimaryStandalone.value);
-    const availableChartTypeOptions = computed(() => {
-      const allOptions = [
-        { label: t("canvasUI.canvasBuilder.dataCharts.types.bar"), value: "bar" },
-        { label: t("canvasUI.canvasBuilder.dataCharts.types.line"), value: "line" },
-        { label: t("canvasUI.canvasBuilder.dataCharts.types.pie"), value: "pie" },
-        { label: t("canvasUI.canvasBuilder.dataCharts.types.doughnut"), value: "doughnut" },
-        { label: t("canvasUI.canvasBuilder.dataCharts.types.polarArea"), value: "polarArea" },
-        { label: t("canvasUI.canvasBuilder.dataCharts.types.radar"), value: "radar" },
-        { label: t("canvasUI.canvasBuilder.dataCharts.types.scatter"), value: "scatter" },
-        { label: t("canvasUI.canvasBuilder.dataCharts.types.bubble"), value: "bubble" },
-        { label: t("canvasUI.canvasBuilder.dataCharts.types.area"), value: "area" }
-      ];
-      const primaryType = seriesList.value[0]?.chartType;
-      if (seriesList.value.length > 1 || activeSeriesIndex.value > 0) {
-        if (THREE_D_CHART_TYPES.includes(primaryType)) {
-          return allOptions.filter((opt) => THREE_D_CHART_TYPES.includes(opt.value));
-        }
-        if (TWO_D_CHART_TYPES.includes(primaryType)) {
-          return allOptions.filter((opt) => TWO_D_CHART_TYPES.includes(opt.value));
-        }
-        return allOptions.filter((opt) => ONE_D_CHART_TYPES.includes(opt.value));
-      }
-      return allOptions;
-    });
-    const chartType = computed(() => seriesList.value[0]?.chartType ?? "bar");
-    const primaryChartType = computed(() => seriesList.value[0]?.chartType ?? "bar");
+    const chartType = ref(props.data?.type ?? "bar");
     const backgroundColor = props.data?.data?.datasets?.[0]?.background_color;
     const colorSchemeType = ref(props.data?.color_scheme_type ?? "theme");
     const chartColors = ref([]);
@@ -141513,16 +141076,24 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
     const chartTitle = ref(props.data?.options?.plugins?.title?.text ?? "");
     const legendPosition = ref(props.data?.options?.plugins?.legend?.position ?? "top");
     const enableAnimation = ref((props.data?.options?.animation?.duration ?? 0) > 0);
+    const dataPoints = ref(
+      props.data?.data_points && Array.isArray(props.data.data_points) ? [...props.data.data_points] : props.data?.data?.labels ? props.data.data.labels.map((label, index) => ({
+        label: String(label),
+        value: String(props.data?.data?.datasets?.[0]?.data?.[index] ?? 0)
+      })) : []
+    );
     const xAxisLabel = ref(props.data?.options?.scales?.x?.title?.text ?? "");
     const yAxisLabel = ref(props.data?.options?.scales?.y?.title?.text ?? "");
     const orientation = ref(props.data?.options?.index_axis ?? "x");
     const pointStyle = ref(props.data?.data?.datasets?.[0]?.point_style ?? "circle");
-    const percentDisplay = ref(props.data?.percent_display ?? false);
-    const enableFullscreenBtn = ref(props.data?.view_controls?.enable_fullscreen_btn ?? false);
-    const enableChartTypeSwitcher = ref(props.data?.view_controls?.enable_chart_type_switcher ?? false);
-    const enableDataEntry = ref(props.data?.view_controls?.enable_data_entry ?? false);
-    const chartHeight = ref(props.data?.chart_height ?? 800);
-    const chartWidth = ref(props.data?.chart_width ?? 100);
+    const chartTypeOptions = [
+      { label: t("canvasUI.canvasBuilder.dataCharts.types.bar"), value: "bar" },
+      { label: t("canvasUI.canvasBuilder.dataCharts.types.line"), value: "line" },
+      { label: t("canvasUI.canvasBuilder.dataCharts.types.pie"), value: "pie" },
+      { label: t("canvasUI.canvasBuilder.dataCharts.types.doughnut"), value: "doughnut" },
+      { label: t("canvasUI.canvasBuilder.dataCharts.types.polarArea"), value: "polarArea" },
+      { label: t("canvasUI.canvasBuilder.dataCharts.types.radar"), value: "radar" }
+    ];
     const legendPositionOptions = [
       { label: t("canvasUI.canvasBuilder.dataCharts.legendPositions.none"), value: "none" },
       { label: t("canvasUI.canvasBuilder.dataCharts.legendPositions.top"), value: "top" },
@@ -141531,8 +141102,8 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
       { label: t("canvasUI.canvasBuilder.dataCharts.legendPositions.right"), value: "right" }
     ];
     const orientationOptions = [
-      { label: t("canvasUI.canvasBuilder.dataCharts.orientations.horizontal"), value: "y" },
-      { label: t("canvasUI.canvasBuilder.dataCharts.orientations.vertical"), value: "x" }
+      { label: t("canvasUI.canvasBuilder.dataCharts.orientations.horizontal"), value: "x" },
+      { label: t("canvasUI.canvasBuilder.dataCharts.orientations.vertical"), value: "y" }
     ];
     const pointStyleOptions = [
       { label: t("canvasUI.canvasBuilder.dataCharts.pointStyles.circle"), value: "circle" },
@@ -141542,18 +141113,12 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
       { label: t("canvasUI.canvasBuilder.dataCharts.pointStyles.star"), value: "star" },
       { label: t("canvasUI.canvasBuilder.dataCharts.pointStyles.triangle"), value: "triangle" }
     ];
-    const deleteButtonStyle = computed(() => ({
-      "--n-border": "1px solid transparent",
-      "--n-border-disabled": "1px solid transparent",
-      "--n-border-focus": "1px solid transparent",
-      "--n-border-hover": "1px solid transparent",
-      "--n-border-pressed": "1px solid transparent",
-      "--n-color-focus": themeVars.value.error2,
-      "--n-color-hover": themeVars.value.error2,
-      "--n-color-disabled": themeVars.value.error2,
-      "--n-color-pressed": themeVars.value.error2
-    }));
-    const activePopoverField = ref(null);
+    function getColors() {
+      if (colorSchemeType.value === "theme") {
+        return chartColors.value.map((index) => `palette${index}`);
+      }
+      return chartColors.value;
+    }
     function updateChartColors(newColors) {
       if (colorSchemeType.value === "theme") {
         chartColors.value = newColors.map((color, i) => {
@@ -141581,55 +141146,17 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
         }
       }
     );
-    function closePopover() {
-      activePopoverPoint.value = null;
-      activePopoverField.value = null;
-    }
-    function addSeries() {
-      if (!canAddSeries.value) return;
-      const newIndex = seriesList.value.length;
-      const newSeries = {
-        id: generateSeriesId(),
-        name: `${t("canvasUI.canvasBuilder.dataCharts.series")} ${newIndex + 1}`,
-        chartType: seriesList.value[0].chartType,
-        // Default to same type as first series
-        dataPoints: []
-      };
-      seriesList.value.push(newSeries);
-      activeSeriesIndex.value = newIndex;
-      updatePreview();
-    }
-    function removeSeries(index) {
-      if (index === 0 || index >= seriesList.value.length) return;
-      seriesList.value.splice(index, 1);
-      if (activeSeriesIndex.value >= seriesList.value.length) {
-        activeSeriesIndex.value = seriesList.value.length - 1;
-      }
-      updatePreview();
-    }
-    function onChartTypeChange(newType) {
-      if (activeSeriesIndex.value === 0 && STANDALONE_CHART_TYPES.includes(newType)) {
-        seriesList.value = [seriesList.value[0]];
-      }
-      updatePreview();
-    }
     function addDataPoint() {
-      activeSeries.value.dataPoints.push({
+      dataPoints.value.push({
         label: "",
-        xValue: "",
-        yValue: "",
-        rValue: "",
         value: ""
       });
     }
     function removeDataPoint(index) {
-      activeSeries.value.dataPoints.splice(index, 1);
+      dataPoints.value.splice(index, 1);
     }
     function removeAllDataPoints() {
-      activeSeries.value.dataPoints = [];
-    }
-    function isArrayOrObject(value) {
-      return Array.isArray(value) || typeof value === "object" && value !== null;
+      dataPoints.value = [];
     }
     function getFieldOptions(data) {
       if (!data || typeof data !== "object") return [];
@@ -141640,54 +141167,6 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
         value: field
       }));
     }
-    function updateDynamicValueExpression(point) {
-      if (!point.selectedValue || !point.arrayConfig?.labelField || !point.arrayConfig?.valueField) {
-        return;
-      }
-      const path = point.dynamicValue?.path;
-      if (!path) {
-        return;
-      }
-      point.label = `{{#each ${path}}}{{lookup this "${point.arrayConfig.labelField}"}}{{#unless @last}},{{/unless}}{{/each}}`;
-      point.value = `{{#each ${path}}}{{lookup this "${point.arrayConfig.valueField}"}}{{#unless @last}},{{/unless}}{{/each}}`;
-      point.dynamicValue = {
-        path,
-        value: point.value
-      };
-      closePopover();
-    }
-    function updateXYDynamicValueExpression(point) {
-      if (!point.selectedXValue || !point.arrayConfig?.labelField || !point.arrayConfig?.xField || !point.arrayConfig?.yField) {
-        return;
-      }
-      const isBubble = isActiveSeriesXYRChart.value;
-      if (isBubble && !point.arrayConfig?.rField) {
-        return;
-      }
-      const path = point.dynamicXValue?.path;
-      if (!path) {
-        return;
-      }
-      point.label = `{{#each ${path}}}{{lookup this "${point.arrayConfig.labelField}"}}{{#unless @last}},{{/unless}}{{/each}}`;
-      point.xValue = `{{#each ${path}}}{{lookup this "${point.arrayConfig.xField}"}}{{#unless @last}},{{/unless}}{{/each}}`;
-      point.yValue = `{{#each ${path}}}{{lookup this "${point.arrayConfig.yField}"}}{{#unless @last}},{{/unless}}{{/each}}`;
-      point.dynamicXValue = {
-        path,
-        value: point.xValue
-      };
-      point.dynamicYValue = {
-        path,
-        value: point.yValue
-      };
-      if (isBubble && point.arrayConfig.rField) {
-        point.rValue = `{{#each ${path}}}{{lookup this "${point.arrayConfig.rField}"}}{{#unless @last}},{{/unless}}{{/each}}`;
-        point.dynamicRValue = {
-          path,
-          value: point.rValue
-        };
-      }
-      closePopover();
-    }
     const dynamicValueTreeData = computed(() => {
       function processObject(obj, path = []) {
         const result = [];
@@ -141738,59 +141217,24 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
       return h("span", { class: "text-sm" }, { default: () => info.option.label || "" });
     }
     const activePopoverPoint = ref(null);
-    function handleDynamicValueClick(point, field = "value") {
-      if (activePopoverPoint.value === point && activePopoverField.value === field) {
-        closePopover();
+    function handleDynamicValueClick(point) {
+      if (activePopoverPoint.value === point) {
+        activePopoverPoint.value = null;
       } else {
-        if (field === "value") {
-          point.selectedValue = void 0;
-          point.dynamicValue = void 0;
-          point.arrayConfig = void 0;
-          point.value = "";
-        } else if (field === "x") {
-          point.selectedXValue = void 0;
-          point.dynamicXValue = void 0;
-          point.dynamicYValue = void 0;
-          point.dynamicRValue = void 0;
-          point.arrayConfig = void 0;
-          point.xValue = "";
-          point.yValue = "";
-          point.rValue = "";
-          point.label = "";
-        } else if (field === "y") {
-          point.selectedYValue = void 0;
-          point.dynamicYValue = void 0;
-          point.yValue = "";
-        } else if (field === "r") {
-          point.selectedRValue = void 0;
-          point.dynamicRValue = void 0;
-          point.rValue = "";
-        }
+        point.selectedValue = void 0;
+        point.dynamicValue = void 0;
+        point.arrayConfig = void 0;
+        point.value = "";
         activePopoverPoint.value = point;
-        activePopoverField.value = field;
       }
     }
-    function handleDynamicValueSelect(keys, point, field = "value") {
+    function handleDynamicValueSelect(keys, point) {
       const selectedKey = keys[0];
       if (!selectedKey) {
-        if (field === "value") {
-          point.dynamicValue = void 0;
-          point.selectedValue = void 0;
-          point.value = "";
-        } else if (field === "x") {
-          point.dynamicXValue = void 0;
-          point.selectedXValue = void 0;
-          point.xValue = "";
-        } else if (field === "y") {
-          point.dynamicYValue = void 0;
-          point.selectedYValue = void 0;
-          point.yValue = "";
-        } else if (field === "r") {
-          point.dynamicRValue = void 0;
-          point.selectedRValue = void 0;
-          point.rValue = "";
-        }
-        closePopover();
+        point.dynamicValue = void 0;
+        point.selectedValue = void 0;
+        point.value = "";
+        activePopoverPoint.value = null;
         return;
       }
       const pathParts = selectedKey.split(/\.(?![^[]*])/) || [];
@@ -141805,80 +141249,6 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
           currentValue = currentValue?.[part];
         }
       }
-      if (field === "x") {
-        point.selectedXValue = currentValue;
-        if (Array.isArray(currentValue) || typeof currentValue === "object" && currentValue !== null) {
-          point.arrayConfig = {
-            labelField: "",
-            valueField: "",
-            xField: "",
-            yField: "",
-            rField: ""
-          };
-          point.dynamicXValue = {
-            path: selectedKey,
-            value: ""
-          };
-          return;
-        }
-        const rootPart = pathParts[0];
-        let expression = "";
-        if (pathParts.length === 1) {
-          expression = `{{${rootPart}}}`;
-        } else {
-          const restOfPath = pathParts.slice(1).map((part) => {
-            if (part.includes("[") && part.includes("]")) {
-              return part.split("[")[1].split("]")[0];
-            }
-            return part;
-          });
-          expression = `{{lookup (lookup ${rootPart} ${restOfPath[0]}) "${restOfPath[1]}"}}`;
-        }
-        point.dynamicXValue = { path: selectedKey, value: expression };
-        point.xValue = expression;
-        closePopover();
-        return;
-      }
-      if (field === "y") {
-        point.selectedYValue = currentValue;
-        const rootPart = pathParts[0];
-        let expression = "";
-        if (pathParts.length === 1) {
-          expression = `{{${rootPart}}}`;
-        } else {
-          const restOfPath = pathParts.slice(1).map((part) => {
-            if (part.includes("[") && part.includes("]")) {
-              return part.split("[")[1].split("]")[0];
-            }
-            return part;
-          });
-          expression = `{{lookup (lookup ${rootPart} ${restOfPath[0]}) "${restOfPath[1]}"}}`;
-        }
-        point.dynamicYValue = { path: selectedKey, value: expression };
-        point.yValue = expression;
-        closePopover();
-        return;
-      }
-      if (field === "r") {
-        point.selectedRValue = currentValue;
-        const rootPart = pathParts[0];
-        let expression = "";
-        if (pathParts.length === 1) {
-          expression = `{{${rootPart}}}`;
-        } else {
-          const restOfPath = pathParts.slice(1).map((part) => {
-            if (part.includes("[") && part.includes("]")) {
-              return part.split("[")[1].split("]")[0];
-            }
-            return part;
-          });
-          expression = `{{lookup (lookup ${rootPart} ${restOfPath[0]}) "${restOfPath[1]}"}}`;
-        }
-        point.dynamicRValue = { path: selectedKey, value: expression };
-        point.rValue = expression;
-        closePopover();
-        return;
-      }
       point.selectedValue = currentValue;
       if (Array.isArray(currentValue) || typeof currentValue === "object" && currentValue !== null) {
         point.arrayConfig = {
@@ -141908,189 +141278,79 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
           value: expression
         };
         point.value = expression;
-        closePopover();
-      }
-    }
-    function normalizeRValues(values, minRadius = 5, maxRadius = 40) {
-      if (values.length === 0) return [];
-      const rValues = values.map((v) => v.r);
-      const minR = Math.min(...rValues);
-      const maxR = Math.max(...rValues);
-      if (minR === maxR) {
-        return values.map((v) => ({
-          ...v,
-          r: (minRadius + maxRadius) / 2,
-          originalR: v.r
-        }));
+        activePopoverPoint.value = null;
       }
-      return values.map((v) => ({
-        ...v,
-        r: minRadius + (v.r - minR) / (maxR - minR) * (maxRadius - minRadius),
-        originalR: v.r
-      }));
     }
-    function processSeriesData(series) {
-      const isXY = XY_CHART_TYPES.includes(series.chartType);
-      const isXYR = XYR_CHART_TYPES.includes(series.chartType);
-      if (isXY || isXYR) {
-        const processedData2 = {
-          labels: [],
-          values: []
-        };
-        const rawBubbleData = [];
-        series.dataPoints.forEach((point) => {
-          const x = !isNaN(Number(point.xValue)) ? Number(point.xValue) : 0;
-          const y = !isNaN(Number(point.yValue)) ? Number(point.yValue) : 0;
-          if (series.chartType === "bubble") {
-            const r = point.rValue && !isNaN(Number(point.rValue)) ? Math.abs(Number(point.rValue)) : 10;
-            rawBubbleData.push({ label: point.label, x, y, r });
-          } else {
-            processedData2.labels.push(point.label);
-            processedData2.values.push({ x, y });
-          }
-        });
-        if (series.chartType === "bubble" && rawBubbleData.length > 0) {
-          const bubbleValues = rawBubbleData.map((d) => ({ x: d.x, y: d.y, r: d.r }));
-          const normalizedValues = normalizeRValues(bubbleValues);
-          rawBubbleData.forEach((d, idx) => {
-            processedData2.labels.push(d.label);
-            processedData2.values.push(normalizedValues[idx]);
-          });
-        }
-        return processedData2;
+    function updateDynamicValueExpression(point) {
+      if (!point.selectedValue || !point.arrayConfig?.labelField || !point.arrayConfig?.valueField) {
+        return;
       }
+      const path = point.dynamicValue?.path;
+      if (!path) {
+        return;
+      }
+      point.label = `{{#each ${path}}}{{lookup this "${point.arrayConfig.labelField}"}}{{#unless @last}},{{/unless}}{{/each}}`;
+      point.value = `{{#each ${path}}}{{lookup this "${point.arrayConfig.valueField}"}}{{#unless @last}},{{/unless}}{{/each}}`;
+      point.dynamicValue = {
+        path,
+        value: point.value
+      };
+      activePopoverPoint.value = null;
+    }
+    function processChartData() {
       const processedData = {
         labels: [],
         values: []
       };
-      series.dataPoints.forEach((point) => {
+      dataPoints.value.forEach((point) => {
         processedData.labels.push(point.label);
         processedData.values.push(!isNaN(Number(point.value)) ? Number(point.value) : 0);
       });
       return processedData;
     }
-    function getSeriesColors(forStorage = false) {
-      if (colorSchemeType.value === "theme") {
-        if (forStorage) {
-          return chartColors.value.map((index) => `palette${index}`);
-        }
-        return chartColors.value.map((index) => {
-          const idx = parseInt(index);
-          return palette.value[idx % palette.value.length];
-        });
-      }
-      return chartColors.value;
-    }
     function createChartConfig() {
-      const datasets = [];
-      let allLabels = [];
-      const colorsForStorage = getSeriesColors(true);
-      const isSingleSeries = seriesList.value.length === 1;
-      seriesList.value.forEach((series, index) => {
-        const processedData = processSeriesData(series);
-        let backgroundColor2;
-        let borderColor;
-        if (isSingleSeries) {
-          backgroundColor2 = colorsForStorage;
-          borderColor = [...colorsForStorage];
-        } else {
-          const seriesColor = colorsForStorage[index % colorsForStorage.length];
-          backgroundColor2 = seriesColor;
-          borderColor = seriesColor;
-        }
-        const datasetOptions = {
-          label: series.name,
-          data: processedData.values,
-          background_color: backgroundColor2,
-          border_color: borderColor,
-          borderWidth: 1
-        };
-        if (!isSingleSeries) {
-          if (series.chartType === "area") {
-            datasetOptions.type = "line";
-            datasetOptions.fill = true;
-            datasetOptions.tension = 0.4;
-          } else {
-            datasetOptions.type = series.chartType;
-          }
-        }
-        if (series.chartType === "area") {
-          datasetOptions.fill = true;
-          datasetOptions.tension = 0.4;
-        }
-        if (["line", "scatter", "area"].includes(series.chartType)) {
-          datasetOptions.pointStyle = pointStyle.value;
-        }
-        if (["line", "area"].includes(series.chartType)) {
-          datasetOptions.tension = 0.4;
-        }
-        if (processedData.labels.length > allLabels.length) {
-          allLabels = processedData.labels;
-        }
-        datasets.push(datasetOptions);
-      });
-      const primaryType = seriesList.value[0].chartType;
-      let actualPrimaryType = primaryType;
-      if (primaryType === "area") {
-        actualPrimaryType = "line";
-      }
-      let scales = void 0;
-      const chartTypesWithScales = ["bar", "line", "scatter", "bubble", "area"];
-      if (chartTypesWithScales.includes(primaryType)) {
-        scales = {
-          x: {
-            title: {
-              display: !!xAxisLabel.value,
-              text: xAxisLabel.value
-            }
-          },
-          y: {
-            title: {
-              display: !!yAxisLabel.value,
-              text: yAxisLabel.value
-            },
-            begin_at_zero: true
-          }
-        };
-      } else if (["radar", "polarArea"].includes(primaryType)) {
-        scales = {
-          r: {
-            begin_at_zero: true,
-            ticks: {
-              step_size: 1
-            }
-          }
-        };
-      }
-      const showLegend = seriesList.value.length > 1 || legendPosition.value !== "none";
       const config = {
-        type: actualPrimaryType,
+        type: chartType.value,
         color_scheme_type: colorSchemeType.value,
-        percent_display: percentDisplay.value,
-        chart_height: chartHeight.value,
-        chart_width: chartWidth.value,
-        view_controls: {
-          enable_fullscreen_btn: enableFullscreenBtn.value,
-          enable_chart_type_switcher: enableChartTypeSwitcher.value,
-          enable_data_entry: enableDataEntry.value
-        },
         data: {
-          labels: allLabels,
-          datasets
+          labels: [],
+          datasets: [
+            {
+              label: "Data Series",
+              data: [],
+              background_color: getColors(),
+              border_color: getColors(),
+              border_width: 1,
+              point_style: ["line"].includes(chartType.value) ? pointStyle.value : void 0
+            }
+          ]
         },
         options: {
           responsive: true,
           maintainAspectRatio: false,
-          index_axis: ["bar", "line"].includes(primaryType) ? orientation.value : void 0,
-          scales,
+          index_axis: ["bar", "line"].includes(chartType.value) ? orientation.value : void 0,
+          scales: ["bar", "line"].includes(chartType.value) ? {
+            x: {
+              title: {
+                display: !!xAxisLabel.value,
+                text: xAxisLabel.value
+              }
+            },
+            y: {
+              title: {
+                display: !!yAxisLabel.value,
+                text: yAxisLabel.value
+              }
+            }
+          } : void 0,
           plugins: {
             title: {
               display: !!chartTitle.value,
               text: chartTitle.value
             },
             legend: {
-              display: showLegend,
-              position: legendPosition.value !== "none" ? legendPosition.value : "top",
+              display: legendPosition.value !== "none",
+              position: legendPosition.value,
               labels: {
                 usePointStyle: true
               }
@@ -142100,27 +141360,14 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
             duration: enableAnimation.value ? 1e3 : 0
           }
         },
-        // Save series data for editing
-        series: seriesList.value.map((series) => ({
-          id: series.id,
-          name: series.name,
-          chart_type: series.chartType,
-          data_points: series.dataPoints.map((point) => ({
-            label: point.label,
-            value: point.value,
-            x_value: point.xValue,
-            y_value: point.yValue,
-            r_value: point.rValue,
-            dynamic_value: point.dynamicValue,
-            dynamic_x_value: point.dynamicXValue,
-            dynamic_y_value: point.dynamicYValue,
-            dynamic_r_value: point.dynamicRValue,
-            array_config: point.arrayConfig
-          }))
-        })),
-        // Store the primary chart type for reference
-        _primary_chart_type: primaryType
+        data_points: dataPoints.value.map((point) => ({
+          label: point.label,
+          value: point.value
+        }))
       };
+      const processedData = processChartData();
+      config.data.labels = processedData.labels;
+      config.data.datasets[0].data = processedData.values;
       return config;
     }
     function onCancel() {
@@ -142148,14 +141395,9 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
       },
       { immediate: true }
     );
-    watch(isMultiSeries, (multiSeries) => {
-      if (multiSeries) {
-        enableChartTypeSwitcher.value = false;
-      }
-    });
     watch(
       [
-        seriesList,
+        chartType,
         chartColors,
         colorSchemeType,
         chartTitle,
@@ -142164,13 +141406,7 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
         yAxisLabel,
         orientation,
         pointStyle,
-        percentDisplay,
-        enableAnimation,
-        enableFullscreenBtn,
-        enableChartTypeSwitcher,
-        enableDataEntry,
-        chartHeight,
-        chartWidth
+        dataPoints
       ],
       () => {
         updatePreview();
@@ -142196,10 +141432,10 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
           "--n-padding-left": "16px"
         }]),
         title: unref(t)("canvasUI.canvasBuilder.dataCharts.editDataChartsComponent"),
-        onClose: _cache[16] || (_cache[16] = ($event) => unref(setComponentEditMode)(false))
+        onClose: _cache[11] || (_cache[11] = ($event) => unref(setComponentEditMode)(false))
       }, {
         footer: withCtx(() => [
-          createElementVNode("div", _hoisted_89, [
+          createElementVNode("div", _hoisted_50$3, [
             createVNode(CButton, { onClick: onCancel }, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString(unref(t)("canvasUI.common.cancel")), 1)
@@ -142237,66 +141473,69 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", _hoisted_2$1t, [
                   createElementVNode("div", _hoisted_3$17, [
                     createElementVNode("div", _hoisted_4$X, [
-                      createElementVNode("div", _hoisted_5$O, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.dataSettings")), 1),
-                      createElementVNode("div", _hoisted_6$H, [
-                        (openBlock(true), createElementBlock(Fragment, null, renderList(seriesList.value, (series, index) => {
-                          return openBlock(), createElementBlock("div", {
-                            key: series.id,
-                            class: normalizeClass(["series-tab flex items-center gap-1 px-3 py-2 h-9 cursor-pointer border border-b-0 rounded-t-lg mr-1 transition-colors", [
-                              activeSeriesIndex.value === index ? "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 -mb-px" : "bg-gray-100 dark:bg-gray-900 border-transparent hover:bg-gray-200 dark:hover:bg-gray-700"
-                            ]]),
-                            onClick: ($event) => activeSeriesIndex.value = index
-                          }, [
-                            createElementVNode("span", _hoisted_8$q, toDisplayString(series.name), 1),
-                            index > 0 ? (openBlock(), createElementBlock("div", {
-                              key: 0,
-                              class: "ml-1 p-0.5 rounded hover:bg-gray-300 dark:hover:bg-gray-600",
-                              onClick: withModifiers(($event) => removeSeries(index), ["stop"])
-                            }, [
-                              createVNode(CIcon, {
-                                class: "text-gray-500",
-                                icon: "times",
-                                size: 10
-                              })
-                            ], 8, _hoisted_9$m)) : createCommentVNode("", true)
-                          ], 10, _hoisted_7$v);
-                        }), 128)),
-                        canAddSeries.value ? (openBlock(), createElementBlock("button", {
-                          key: 0,
-                          class: "flex items-center justify-center w-8 h-8 mb-1 rounded bg-transparent border-none hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors cursor-pointer",
-                          title: unref(t)("canvasUI.canvasBuilder.dataCharts.addSeries"),
-                          onClick: addSeries
-                        }, [
-                          createVNode(CIcon, {
-                            icon: "plus",
-                            size: 14
-                          })
-                        ], 8, _hoisted_10$h)) : createCommentVNode("", true)
+                      createElementVNode("div", _hoisted_5$O, [
+                        createElementVNode("label", _hoisted_6$H, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.chartType")), 1),
+                        createVNode(unref(NSelect), {
+                          value: chartType.value,
+                          "onUpdate:value": _cache[0] || (_cache[0] = ($event) => chartType.value = $event),
+                          options: chartTypeOptions
+                        }, null, 8, ["value"])
                       ]),
-                      seriesList.value.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_11$f, [
-                        createElementVNode("label", _hoisted_12$b, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.seriesName")), 1),
+                      ["bar", "line"].includes(chartType.value) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                        createElementVNode("div", _hoisted_7$v, [
+                          createElementVNode("label", _hoisted_8$q, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.xAxisLabel")), 1),
+                          createVNode(unref(NInput), {
+                            value: xAxisLabel.value,
+                            "onUpdate:value": _cache[1] || (_cache[1] = ($event) => xAxisLabel.value = $event),
+                            type: "text"
+                          }, null, 8, ["value"])
+                        ]),
+                        createElementVNode("div", _hoisted_9$m, [
+                          createElementVNode("label", _hoisted_10$h, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.yAxisLabel")), 1),
+                          createVNode(unref(NInput), {
+                            value: yAxisLabel.value,
+                            "onUpdate:value": _cache[2] || (_cache[2] = ($event) => yAxisLabel.value = $event),
+                            type: "text"
+                          }, null, 8, ["value"])
+                        ]),
+                        createElementVNode("div", _hoisted_11$f, [
+                          createElementVNode("label", _hoisted_12$b, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.orientation")), 1),
+                          createVNode(unref(NSelect), {
+                            value: orientation.value,
+                            "onUpdate:value": _cache[3] || (_cache[3] = ($event) => orientation.value = $event),
+                            options: orientationOptions
+                          }, null, 8, ["value"])
+                        ]),
+                        ["line", "radar"].includes(chartType.value) ? (openBlock(), createElementBlock("div", _hoisted_13$a, [
+                          createElementVNode("label", _hoisted_14$9, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.pointStyle")), 1),
+                          createVNode(unref(NSelect), {
+                            value: pointStyle.value,
+                            "onUpdate:value": _cache[4] || (_cache[4] = ($event) => pointStyle.value = $event),
+                            options: pointStyleOptions
+                          }, null, 8, ["value"])
+                        ])) : createCommentVNode("", true)
+                      ], 64)) : createCommentVNode("", true),
+                      createElementVNode("div", _hoisted_15$8, [
+                        createElementVNode("label", _hoisted_16$8, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.chartTitle")), 1),
                         createVNode(unref(NInput), {
-                          value: activeSeries.value.name,
-                          "onUpdate:value": _cache[0] || (_cache[0] = ($event) => activeSeries.value.name = $event),
+                          value: chartTitle.value,
+                          "onUpdate:value": _cache[5] || (_cache[5] = ($event) => chartTitle.value = $event),
                           type: "text"
                         }, null, 8, ["value"])
-                      ])) : createCommentVNode("", true),
-                      createElementVNode("div", _hoisted_13$a, [
-                        createElementVNode("label", _hoisted_14$9, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.chartType")), 1),
-                        createVNode(unref(NSelect), {
-                          value: activeSeries.value.chartType,
-                          "onUpdate:value": [
-                            _cache[1] || (_cache[1] = ($event) => activeSeries.value.chartType = $event),
-                            onChartTypeChange
-                          ],
-                          options: availableChartTypeOptions.value
-                        }, null, 8, ["value", "options"])
                       ]),
-                      createElementVNode("div", _hoisted_15$8, [
-                        createElementVNode("div", _hoisted_16$8, [
-                          createElementVNode("label", _hoisted_17$7, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.dataPoints")), 1),
+                      ["pie", "doughnut", "polarArea"].includes(chartType.value) ? (openBlock(), createElementBlock("div", _hoisted_17$7, [
+                        createElementVNode("label", _hoisted_18$6, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.legendPosition")), 1),
+                        createVNode(unref(NSelect), {
+                          value: legendPosition.value,
+                          "onUpdate:value": _cache[6] || (_cache[6] = ($event) => legendPosition.value = $event),
+                          options: legendPositionOptions
+                        }, null, 8, ["value"])
+                      ])) : createCommentVNode("", true),
+                      createElementVNode("div", _hoisted_19$6, [
+                        createElementVNode("div", _hoisted_20$5, [
+                          createElementVNode("label", _hoisted_21$5, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.dataPoints")), 1),
                           createVNode(unref(Button), {
-                            disabled: !activeSeries.value.dataPoints.length,
+                            disabled: !dataPoints.value.length,
                             size: "small",
                             onClick: removeAllDataPoints
                           }, {
@@ -142306,301 +141545,205 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
                             _: 1
                           }, 8, ["disabled"])
                         ]),
-                        !isActiveSeriesXYChart.value && !isActiveSeriesXYRChart.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(activeSeries.value.dataPoints, (point, index) => {
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(dataPoints.value, (point, index) => {
                           return openBlock(), createElementBlock("div", {
                             key: index,
                             class: "flex gap-2 mb-2"
                           }, [
-                            createVNode(unref(NInput), {
-                              value: point.label,
-                              "onUpdate:value": ($event) => point.label = $event,
-                              class: "flex-1",
-                              disabled: !!point.arrayConfig,
-                              placeholder: "Label"
-                            }, null, 8, ["value", "onUpdate:value", "disabled"]),
-                            createVNode(unref(NInput), {
-                              value: point.value,
-                              "onUpdate:value": ($event) => point.value = $event,
-                              class: "flex-1",
-                              disabled: !!point.dynamicValue,
-                              placeholder: "Value",
-                              type: "text"
+                            point.selectedValue && (Array.isArray(point.selectedValue) || typeof point.selectedValue === "object" && point.selectedValue !== null) ? (openBlock(), createBlock(unref(NTooltip), {
+                              key: 0,
+                              trigger: "hover"
                             }, {
-                              suffix: withCtx(() => [
-                                createVNode(unref(NPopover), {
-                                  placement: "bottom",
-                                  show: activePopoverPoint.value === point && activePopoverField.value === "value",
-                                  trigger: "manual",
-                                  onClickoutside: closePopover
-                                }, {
-                                  trigger: withCtx(() => [
-                                    createElementVNode("div", {
-                                      class: "cursor-pointer flex items-center",
-                                      onClick: ($event) => handleDynamicValueClick(point, "value")
-                                    }, [
-                                      createVNode(CIcon, {
-                                        class: normalizeClass(point.dynamicValue ? "text-blue-500" : ""),
-                                        icon: "caret-down"
-                                      }, null, 8, ["class"])
-                                    ], 8, _hoisted_18$6)
-                                  ]),
-                                  default: withCtx(() => [
-                                    createElementVNode("div", _hoisted_19$6, [
-                                      createElementVNode("div", _hoisted_20$5, [
-                                        createElementVNode("div", _hoisted_21$5, [
-                                          createElementVNode("div", _hoisted_22$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.selectDynamicValue")), 1),
-                                          createElementVNode("div", _hoisted_23$3, [
-                                            createVNode(unref(NTree), {
-                                              "block-line": "",
-                                              class: "max-h-[300px]",
-                                              data: dynamicValueTreeData.value,
-                                              "render-label": renderDynamicValueTreeLabel,
-                                              "selected-keys": [point.dynamicValue?.path ?? ""],
-                                              "onUpdate:selectedKeys": (keys) => handleDynamicValueSelect(keys, point, "value")
-                                            }, null, 8, ["data", "selected-keys", "onUpdate:selectedKeys"])
-                                          ])
-                                        ]),
-                                        point.selectedValue && point.arrayConfig && isArrayOrObject(point.selectedValue) ? (openBlock(), createElementBlock("div", _hoisted_24$3, [
-                                          createElementVNode("div", _hoisted_25$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.configureArrayObjectFields")), 1),
-                                          createElementVNode("div", _hoisted_26$3, [
-                                            createElementVNode("div", null, [
-                                              createElementVNode("label", _hoisted_27$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.labelField")), 1),
-                                              createVNode(unref(NSelect), {
-                                                value: point.arrayConfig.labelField,
-                                                "onUpdate:value": [($event) => point.arrayConfig.labelField = $event, ($event) => updateDynamicValueExpression(point)],
-                                                options: getFieldOptions(point.selectedValue)
-                                              }, null, 8, ["value", "onUpdate:value", "options"])
-                                            ]),
-                                            createElementVNode("div", null, [
-                                              createElementVNode("label", _hoisted_28$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.valueField")), 1),
-                                              createVNode(unref(NSelect), {
-                                                value: point.arrayConfig.valueField,
-                                                "onUpdate:value": [($event) => point.arrayConfig.valueField = $event, ($event) => updateDynamicValueExpression(point)],
-                                                options: getFieldOptions(point.selectedValue)
-                                              }, null, 8, ["value", "onUpdate:value", "options"])
-                                            ])
-                                          ])
-                                        ])) : createCommentVNode("", true)
-                                      ])
-                                    ])
-                                  ]),
-                                  _: 2
-                                }, 1032, ["show"])
+                              trigger: withCtx(() => [
+                                createVNode(unref(NInput), {
+                                  value: point.label,
+                                  "onUpdate:value": ($event) => point.label = $event,
+                                  class: "flex-1",
+                                  disabled: true,
+                                  placeholder: "Label"
+                                }, null, 8, ["value", "onUpdate:value"])
                               ]),
-                              _: 2
-                            }, 1032, ["value", "onUpdate:value", "disabled"]),
-                            createVNode(CButton, {
-                              circle: "",
-                              class: "bg-error2 self-center",
-                              size: "small",
-                              style: normalizeStyle(deleteButtonStyle.value),
-                              type: "error",
-                              onClick: ($event) => removeDataPoint(index)
-                            }, {
-                              icon: withCtx(() => [
-                                createVNode(CIcon, {
-                                  class: "color-error",
-                                  "fa-type": "far",
-                                  icon: "trash",
-                                  size: 12
-                                })
+                              default: withCtx(() => [
+                                createTextVNode(" " + toDisplayString(point.label), 1)
                               ]),
                               _: 2
-                            }, 1032, ["style", "onClick"])
-                          ]);
-                        }), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(activeSeries.value.dataPoints, (point, index) => {
-                          return openBlock(), createElementBlock("div", {
-                            key: index,
-                            class: "flex gap-2 mb-2"
-                          }, [
-                            createVNode(unref(NInput), {
+                            }, 1024)) : (openBlock(), createBlock(unref(NInput), {
+                              key: 1,
                               value: point.label,
                               "onUpdate:value": ($event) => point.label = $event,
                               class: "flex-1",
-                              disabled: !!point.arrayConfig,
                               placeholder: "Label"
-                            }, null, 8, ["value", "onUpdate:value", "disabled"]),
-                            createVNode(unref(NInput), {
-                              value: point.xValue,
-                              "onUpdate:value": ($event) => point.xValue = $event,
-                              class: "flex-1",
-                              disabled: !!point.dynamicXValue,
-                              placeholder: "X Value",
-                              type: "text"
-                            }, {
-                              suffix: withCtx(() => [
-                                createVNode(unref(NPopover), {
-                                  placement: "bottom",
-                                  show: activePopoverPoint.value === point && activePopoverField.value === "x",
-                                  trigger: "manual",
-                                  onClickoutside: closePopover
-                                }, {
-                                  trigger: withCtx(() => [
-                                    createElementVNode("div", {
-                                      class: "cursor-pointer flex items-center",
-                                      onClick: ($event) => handleDynamicValueClick(point, "x")
-                                    }, [
-                                      createVNode(CIcon, {
-                                        class: normalizeClass(point.dynamicXValue ? "text-blue-500" : ""),
-                                        icon: "caret-down"
-                                      }, null, 8, ["class"])
-                                    ], 8, _hoisted_29$3)
-                                  ]),
-                                  default: withCtx(() => [
-                                    createElementVNode("div", _hoisted_30$3, [
-                                      createElementVNode("div", _hoisted_31$3, [
-                                        createElementVNode("div", _hoisted_32$3, [
-                                          createElementVNode("div", _hoisted_33$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.selectDynamicValue")), 1),
-                                          createElementVNode("div", _hoisted_34$3, [
-                                            createVNode(unref(NTree), {
-                                              "block-line": "",
-                                              class: "max-h-[300px]",
-                                              data: dynamicValueTreeData.value,
-                                              "render-label": renderDynamicValueTreeLabel,
-                                              "selected-keys": [point.dynamicXValue?.path ?? ""],
-                                              "onUpdate:selectedKeys": (keys) => handleDynamicValueSelect(keys, point, "x")
-                                            }, null, 8, ["data", "selected-keys", "onUpdate:selectedKeys"])
+                            }, null, 8, ["value", "onUpdate:value"])),
+                            createElementVNode("div", _hoisted_22$3, [
+                              point.dynamicValue ? (openBlock(), createBlock(unref(NTooltip), {
+                                key: 0,
+                                trigger: "hover"
+                              }, {
+                                trigger: withCtx(() => [
+                                  createVNode(unref(NInput), {
+                                    value: point.value,
+                                    "onUpdate:value": ($event) => point.value = $event,
+                                    class: "flex-1",
+                                    disabled: !!point.dynamicValue,
+                                    placeholder: "Value",
+                                    type: "text"
+                                  }, {
+                                    suffix: withCtx(() => [
+                                      createVNode(unref(NPopover), {
+                                        placement: "bottom",
+                                        show: activePopoverPoint.value === point,
+                                        trigger: "manual",
+                                        onClickoutside: _cache[7] || (_cache[7] = ($event) => activePopoverPoint.value = null)
+                                      }, {
+                                        trigger: withCtx(() => [
+                                          createElementVNode("div", {
+                                            class: "cursor-pointer flex items-center",
+                                            onClick: ($event) => handleDynamicValueClick(point)
+                                          }, [
+                                            createVNode(CIcon, {
+                                              class: normalizeClass(point.dynamicValue ? "text-blue-500" : ""),
+                                              icon: "caret-down"
+                                            }, null, 8, ["class"])
+                                          ], 8, _hoisted_23$3)
+                                        ]),
+                                        default: withCtx(() => [
+                                          createElementVNode("div", _hoisted_24$3, [
+                                            createElementVNode("div", _hoisted_25$3, [
+                                              createElementVNode("div", _hoisted_26$3, [
+                                                createElementVNode("div", _hoisted_27$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.selectDynamicValue")), 1),
+                                                createElementVNode("div", _hoisted_28$3, [
+                                                  createVNode(unref(NTree), {
+                                                    "block-line": "",
+                                                    class: "max-h-[300px]",
+                                                    data: dynamicValueTreeData.value,
+                                                    "render-label": renderDynamicValueTreeLabel,
+                                                    "selected-keys": [point.dynamicValue?.path ?? ""],
+                                                    "onUpdate:selectedKeys": (keys) => handleDynamicValueSelect(keys, point)
+                                                  }, null, 8, ["data", "selected-keys", "onUpdate:selectedKeys"])
+                                                ])
+                                              ]),
+                                              point.selectedValue && point.arrayConfig && (Array.isArray(point.selectedValue) || typeof point.selectedValue === "object" && point.selectedValue !== null) ? (openBlock(), createElementBlock("div", _hoisted_29$3, [
+                                                createElementVNode("div", _hoisted_30$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.configureArrayObjectFields")), 1),
+                                                createElementVNode("div", _hoisted_31$3, [
+                                                  createElementVNode("div", null, [
+                                                    createElementVNode("label", _hoisted_32$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.labelField")), 1),
+                                                    createVNode(unref(NSelect), {
+                                                      value: point.arrayConfig.labelField,
+                                                      "onUpdate:value": [($event) => point.arrayConfig.labelField = $event, ($event) => updateDynamicValueExpression(point)],
+                                                      options: getFieldOptions(point.selectedValue)
+                                                    }, null, 8, ["value", "onUpdate:value", "options"])
+                                                  ]),
+                                                  createElementVNode("div", null, [
+                                                    createElementVNode("label", _hoisted_33$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.valueField")), 1),
+                                                    createVNode(unref(NSelect), {
+                                                      value: point.arrayConfig.valueField,
+                                                      "onUpdate:value": [($event) => point.arrayConfig.valueField = $event, ($event) => updateDynamicValueExpression(point)],
+                                                      options: getFieldOptions(point.selectedValue)
+                                                    }, null, 8, ["value", "onUpdate:value", "options"])
+                                                  ])
+                                                ])
+                                              ])) : createCommentVNode("", true)
+                                            ])
                                           ])
                                         ]),
-                                        point.selectedXValue && point.arrayConfig && isArrayOrObject(point.selectedXValue) ? (openBlock(), createElementBlock("div", _hoisted_35$3, [
-                                          createElementVNode("div", _hoisted_36$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.configureArrayObjectFields")), 1),
+                                        _: 2
+                                      }, 1032, ["show"])
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["value", "onUpdate:value", "disabled"])
+                                ]),
+                                default: withCtx(() => [
+                                  createTextVNode(" " + toDisplayString(point.value), 1)
+                                ]),
+                                _: 2
+                              }, 1024)) : (openBlock(), createBlock(unref(NInput), {
+                                key: 1,
+                                value: point.value,
+                                "onUpdate:value": ($event) => point.value = $event,
+                                class: "flex-1",
+                                disabled: !!point.dynamicValue,
+                                placeholder: "Value",
+                                type: "text"
+                              }, {
+                                suffix: withCtx(() => [
+                                  createVNode(unref(NPopover), {
+                                    placement: "bottom",
+                                    show: activePopoverPoint.value === point,
+                                    trigger: "manual",
+                                    onClickoutside: _cache[8] || (_cache[8] = ($event) => activePopoverPoint.value = null)
+                                  }, {
+                                    trigger: withCtx(() => [
+                                      createElementVNode("div", {
+                                        class: "cursor-pointer flex items-center",
+                                        onClick: ($event) => handleDynamicValueClick(point)
+                                      }, [
+                                        createVNode(CIcon, {
+                                          class: normalizeClass(point.dynamicValue ? "text-blue-500" : ""),
+                                          icon: "caret-down"
+                                        }, null, 8, ["class"])
+                                      ], 8, _hoisted_34$3)
+                                    ]),
+                                    default: withCtx(() => [
+                                      createElementVNode("div", _hoisted_35$3, [
+                                        createElementVNode("div", _hoisted_36$3, [
                                           createElementVNode("div", _hoisted_37$3, [
-                                            createElementVNode("div", null, [
-                                              createElementVNode("label", _hoisted_38$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.labelField")), 1),
-                                              createVNode(unref(NSelect), {
-                                                value: point.arrayConfig.labelField,
-                                                "onUpdate:value": [($event) => point.arrayConfig.labelField = $event, ($event) => updateXYDynamicValueExpression(point)],
-                                                options: getFieldOptions(point.selectedXValue)
-                                              }, null, 8, ["value", "onUpdate:value", "options"])
-                                            ]),
-                                            createElementVNode("div", null, [
-                                              createElementVNode("label", _hoisted_39$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.xValueField")), 1),
-                                              createVNode(unref(NSelect), {
-                                                value: point.arrayConfig.xField,
-                                                "onUpdate:value": [($event) => point.arrayConfig.xField = $event, ($event) => updateXYDynamicValueExpression(point)],
-                                                options: getFieldOptions(point.selectedXValue)
-                                              }, null, 8, ["value", "onUpdate:value", "options"])
-                                            ]),
-                                            createElementVNode("div", null, [
-                                              createElementVNode("label", _hoisted_40$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.yValueField")), 1),
-                                              createVNode(unref(NSelect), {
-                                                value: point.arrayConfig.yField,
-                                                "onUpdate:value": [($event) => point.arrayConfig.yField = $event, ($event) => updateXYDynamicValueExpression(point)],
-                                                options: getFieldOptions(point.selectedXValue)
-                                              }, null, 8, ["value", "onUpdate:value", "options"])
-                                            ]),
-                                            isActiveSeriesXYRChart.value ? (openBlock(), createElementBlock("div", _hoisted_41$3, [
-                                              createElementVNode("label", _hoisted_42$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.rValueField")), 1),
-                                              createVNode(unref(NSelect), {
-                                                value: point.arrayConfig.rField,
-                                                "onUpdate:value": [($event) => point.arrayConfig.rField = $event, ($event) => updateXYDynamicValueExpression(point)],
-                                                options: getFieldOptions(point.selectedXValue)
-                                              }, null, 8, ["value", "onUpdate:value", "options"])
-                                            ])) : createCommentVNode("", true)
-                                          ])
-                                        ])) : createCommentVNode("", true)
+                                            createElementVNode("div", _hoisted_38$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.selectDynamicValue")), 1),
+                                            createElementVNode("div", _hoisted_39$3, [
+                                              createVNode(unref(NTree), {
+                                                "block-line": "",
+                                                class: "max-h-[300px]",
+                                                data: dynamicValueTreeData.value,
+                                                "render-label": renderDynamicValueTreeLabel,
+                                                "selected-keys": [point.dynamicValue?.path ?? ""],
+                                                "onUpdate:selectedKeys": (keys) => handleDynamicValueSelect(keys, point)
+                                              }, null, 8, ["data", "selected-keys", "onUpdate:selectedKeys"])
+                                            ])
+                                          ]),
+                                          point.selectedValue && point.arrayConfig && (Array.isArray(point.selectedValue) || typeof point.selectedValue === "object" && point.selectedValue !== null) ? (openBlock(), createElementBlock("div", _hoisted_40$3, [
+                                            _cache[14] || (_cache[14] = createElementVNode("div", { class: "text-sm font-medium mb-2" }, "Configure Array/Object Fields", -1)),
+                                            createElementVNode("div", _hoisted_41$3, [
+                                              createElementVNode("div", null, [
+                                                _cache[12] || (_cache[12] = createElementVNode("label", { class: "block mb-1 text-sm" }, "Label Field", -1)),
+                                                createVNode(unref(NSelect), {
+                                                  value: point.arrayConfig.labelField,
+                                                  "onUpdate:value": [($event) => point.arrayConfig.labelField = $event, ($event) => updateDynamicValueExpression(point)],
+                                                  options: getFieldOptions(point.selectedValue)
+                                                }, null, 8, ["value", "onUpdate:value", "options"])
+                                              ]),
+                                              createElementVNode("div", null, [
+                                                _cache[13] || (_cache[13] = createElementVNode("label", { class: "block mb-1 text-sm" }, "Value Field", -1)),
+                                                createVNode(unref(NSelect), {
+                                                  value: point.arrayConfig.valueField,
+                                                  "onUpdate:value": [($event) => point.arrayConfig.valueField = $event, ($event) => updateDynamicValueExpression(point)],
+                                                  options: getFieldOptions(point.selectedValue)
+                                                }, null, 8, ["value", "onUpdate:value", "options"])
+                                              ])
+                                            ])
+                                          ])) : createCommentVNode("", true)
+                                        ])
                                       ])
-                                    ])
-                                  ]),
-                                  _: 2
-                                }, 1032, ["show"])
-                              ]),
-                              _: 2
-                            }, 1032, ["value", "onUpdate:value", "disabled"]),
-                            createVNode(unref(NInput), {
-                              value: point.yValue,
-                              "onUpdate:value": ($event) => point.yValue = $event,
-                              class: "flex-1",
-                              disabled: !!point.dynamicYValue,
-                              placeholder: "Y Value",
-                              type: "text"
-                            }, {
-                              suffix: withCtx(() => [
-                                createVNode(unref(NPopover), {
-                                  placement: "bottom",
-                                  show: activePopoverPoint.value === point && activePopoverField.value === "y",
-                                  trigger: "manual",
-                                  onClickoutside: closePopover
-                                }, {
-                                  trigger: withCtx(() => [
-                                    createElementVNode("div", {
-                                      class: "cursor-pointer flex items-center",
-                                      onClick: ($event) => handleDynamicValueClick(point, "y")
-                                    }, [
-                                      createVNode(CIcon, {
-                                        class: normalizeClass(point.dynamicYValue ? "text-blue-500" : ""),
-                                        icon: "caret-down"
-                                      }, null, 8, ["class"])
-                                    ], 8, _hoisted_43$3)
-                                  ]),
-                                  default: withCtx(() => [
-                                    createElementVNode("div", _hoisted_44$3, [
-                                      createElementVNode("div", _hoisted_45$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.selectDynamicValue")), 1),
-                                      createVNode(unref(NTree), {
-                                        "block-line": "",
-                                        class: "max-h-[300px]",
-                                        data: dynamicValueTreeData.value,
-                                        "render-label": renderDynamicValueTreeLabel,
-                                        "selected-keys": [point.dynamicYValue?.path ?? ""],
-                                        "onUpdate:selectedKeys": (keys) => handleDynamicValueSelect(keys, point, "y")
-                                      }, null, 8, ["data", "selected-keys", "onUpdate:selectedKeys"])
-                                    ])
-                                  ]),
-                                  _: 2
-                                }, 1032, ["show"])
-                              ]),
-                              _: 2
-                            }, 1032, ["value", "onUpdate:value", "disabled"]),
-                            isActiveSeriesXYRChart.value ? (openBlock(), createBlock(unref(NInput), {
-                              key: 0,
-                              value: point.rValue,
-                              "onUpdate:value": ($event) => point.rValue = $event,
-                              class: "flex-1",
-                              disabled: !!point.dynamicRValue,
-                              placeholder: "Size (R)",
-                              type: "text"
-                            }, {
-                              suffix: withCtx(() => [
-                                createVNode(unref(NPopover), {
-                                  placement: "bottom",
-                                  show: activePopoverPoint.value === point && activePopoverField.value === "r",
-                                  trigger: "manual",
-                                  onClickoutside: closePopover
-                                }, {
-                                  trigger: withCtx(() => [
-                                    createElementVNode("div", {
-                                      class: "cursor-pointer flex items-center",
-                                      onClick: ($event) => handleDynamicValueClick(point, "r")
-                                    }, [
-                                      createVNode(CIcon, {
-                                        class: normalizeClass(point.dynamicRValue ? "text-blue-500" : ""),
-                                        icon: "caret-down"
-                                      }, null, 8, ["class"])
-                                    ], 8, _hoisted_46$3)
-                                  ]),
-                                  default: withCtx(() => [
-                                    createElementVNode("div", _hoisted_47$3, [
-                                      createElementVNode("div", _hoisted_48$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.selectDynamicValue")), 1),
-                                      createVNode(unref(NTree), {
-                                        "block-line": "",
-                                        class: "max-h-[300px]",
-                                        data: dynamicValueTreeData.value,
-                                        "render-label": renderDynamicValueTreeLabel,
-                                        "selected-keys": [point.dynamicRValue?.path ?? ""],
-                                        "onUpdate:selectedKeys": (keys) => handleDynamicValueSelect(keys, point, "r")
-                                      }, null, 8, ["data", "selected-keys", "onUpdate:selectedKeys"])
-                                    ])
-                                  ]),
-                                  _: 2
-                                }, 1032, ["show"])
-                              ]),
-                              _: 2
-                            }, 1032, ["value", "onUpdate:value", "disabled"])) : createCommentVNode("", true),
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["show"])
+                                ]),
+                                _: 2
+                              }, 1032, ["value", "onUpdate:value", "disabled"]))
+                            ]),
                             createVNode(CButton, {
                               circle: "",
                               class: "bg-error2 self-center",
                               size: "small",
-                              style: normalizeStyle(deleteButtonStyle.value),
+                              style: normalizeStyle({
+                                "--n-border": "1px solid transparent",
+                                "--n-border-disabled": "1px solid transparent",
+                                "--n-border-focus": "1px solid transparent",
+                                "--n-border-hover": "1px solid transparent",
+                                "--n-border-pressed": "1px solid transparent",
+                                "--n-color-focus": unref(themeVars).error2,
+                                "--n-color-hover": unref(themeVars).error2,
+                                "--n-color-disabled": unref(themeVars).error2,
+                                "--n-color-pressed": unref(themeVars).error2
+                              }),
                               type: "error",
                               onClick: ($event) => removeDataPoint(index)
                             }, {
@@ -142616,7 +141759,7 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
                             }, 1032, ["style", "onClick"])
                           ]);
                         }), 128)),
-                        createElementVNode("div", _hoisted_49$3, [
+                        createElementVNode("div", _hoisted_42$3, [
                           createVNode(CButton, {
                             class: "mt-2",
                             "icon-placement": "left",
@@ -142636,62 +141779,11 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
                           })
                         ])
                       ]),
-                      createElementVNode("div", _hoisted_50$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.chartSettings")), 1),
-                      createElementVNode("div", _hoisted_51$2, [
-                        createElementVNode("label", _hoisted_52$2, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.chartTitle")), 1),
-                        createVNode(unref(NInput), {
-                          value: chartTitle.value,
-                          "onUpdate:value": _cache[2] || (_cache[2] = ($event) => chartTitle.value = $event),
-                          type: "text"
-                        }, null, 8, ["value"])
-                      ]),
-                      ["bar", "line"].includes(primaryChartType.value) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                        createElementVNode("div", _hoisted_53$2, [
-                          createElementVNode("label", _hoisted_54$1, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.xAxisLabel")), 1),
-                          createVNode(unref(NInput), {
-                            value: xAxisLabel.value,
-                            "onUpdate:value": _cache[3] || (_cache[3] = ($event) => xAxisLabel.value = $event),
-                            type: "text"
-                          }, null, 8, ["value"])
-                        ]),
-                        createElementVNode("div", _hoisted_55$1, [
-                          createElementVNode("label", _hoisted_56$1, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.yAxisLabel")), 1),
-                          createVNode(unref(NInput), {
-                            value: yAxisLabel.value,
-                            "onUpdate:value": _cache[4] || (_cache[4] = ($event) => yAxisLabel.value = $event),
-                            type: "text"
-                          }, null, 8, ["value"])
-                        ]),
-                        createElementVNode("div", _hoisted_57$1, [
-                          createElementVNode("label", _hoisted_58$1, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.orientation")), 1),
-                          createVNode(unref(NSelect), {
-                            value: orientation.value,
-                            "onUpdate:value": _cache[5] || (_cache[5] = ($event) => orientation.value = $event),
-                            options: orientationOptions
-                          }, null, 8, ["value"])
-                        ])
-                      ], 64)) : createCommentVNode("", true),
-                      ["pie", "doughnut", "polarArea"].includes(primaryChartType.value) ? (openBlock(), createElementBlock("div", _hoisted_59$1, [
-                        createElementVNode("label", _hoisted_60$1, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.legendPosition")), 1),
-                        createVNode(unref(NSelect), {
-                          value: legendPosition.value,
-                          "onUpdate:value": _cache[6] || (_cache[6] = ($event) => legendPosition.value = $event),
-                          options: legendPositionOptions
-                        }, null, 8, ["value"])
-                      ])) : createCommentVNode("", true),
-                      ["line", "scatter", "area"].includes(primaryChartType.value) ? (openBlock(), createElementBlock("div", _hoisted_61$1, [
-                        createElementVNode("label", _hoisted_62$1, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.pointStyle")), 1),
-                        createVNode(unref(NSelect), {
-                          value: pointStyle.value,
-                          "onUpdate:value": _cache[7] || (_cache[7] = ($event) => pointStyle.value = $event),
-                          options: pointStyleOptions
-                        }, null, 8, ["value"])
-                      ])) : createCommentVNode("", true),
-                      createElementVNode("div", _hoisted_63$1, [
-                        createElementVNode("label", _hoisted_64$1, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.colorScheme")), 1),
+                      createElementVNode("div", _hoisted_43$3, [
+                        createElementVNode("label", _hoisted_44$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.colorScheme")), 1),
                         createVNode(unref(NSelect), {
                           value: colorSchemeType.value,
-                          "onUpdate:value": _cache[8] || (_cache[8] = ($event) => colorSchemeType.value = $event),
+                          "onUpdate:value": _cache[9] || (_cache[9] = ($event) => colorSchemeType.value = $event),
                           class: "mb-2",
                           options: [
                             { label: unref(t)("canvasUI.canvasBuilder.dataCharts.useThemeColors"), value: "theme" },
@@ -142708,106 +141800,19 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
                           "onUpdate:palette": updateChartColors
                         }, null, 8, ["allow-add", "allow-delete", "allow-edit", "initial-palette"]))
                       ]),
-                      createElementVNode("div", _hoisted_65$1, [
-                        createElementVNode("label", _hoisted_66$1, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.animation")), 1),
+                      createElementVNode("div", _hoisted_45$3, [
+                        createElementVNode("label", _hoisted_46$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.animation")), 1),
                         createVNode(unref(NSwitch), {
                           value: enableAnimation.value,
-                          "onUpdate:value": _cache[9] || (_cache[9] = ($event) => enableAnimation.value = $event)
+                          "onUpdate:value": _cache[10] || (_cache[10] = ($event) => enableAnimation.value = $event)
                         }, null, 8, ["value"])
-                      ]),
-                      createElementVNode("div", _hoisted_67$1, [
-                        createElementVNode("label", _hoisted_68$1, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.percentDisplay")), 1),
-                        createElementVNode("div", _hoisted_69, [
-                          createVNode(unref(NSwitch), {
-                            value: percentDisplay.value,
-                            "onUpdate:value": _cache[10] || (_cache[10] = ($event) => percentDisplay.value = $event)
-                          }, null, 8, ["value"]),
-                          createElementVNode("span", _hoisted_70, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.percentDisplayHint")), 1)
-                        ])
-                      ]),
-                      createElementVNode("div", _hoisted_71, [
-                        createElementVNode("label", _hoisted_72, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.viewModeControls")), 1),
-                        createElementVNode("div", _hoisted_73, [
-                          createElementVNode("div", _hoisted_74, [
-                            createVNode(unref(NSwitch), {
-                              value: enableFullscreenBtn.value,
-                              "onUpdate:value": _cache[11] || (_cache[11] = ($event) => enableFullscreenBtn.value = $event)
-                            }, null, 8, ["value"]),
-                            createElementVNode("span", _hoisted_75, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.enableFullscreenBtn")), 1)
-                          ]),
-                          createVNode(unref(NTooltip), {
-                            disabled: !isMultiSeries.value,
-                            trigger: "hover"
-                          }, {
-                            trigger: withCtx(() => [
-                              createElementVNode("div", {
-                                class: normalizeClass(["flex items-center gap-2", { "opacity-50 cursor-not-allowed": isMultiSeries.value }])
-                              }, [
-                                createVNode(unref(NSwitch), {
-                                  value: enableChartTypeSwitcher.value,
-                                  "onUpdate:value": _cache[12] || (_cache[12] = ($event) => enableChartTypeSwitcher.value = $event),
-                                  disabled: isMultiSeries.value
-                                }, null, 8, ["value", "disabled"]),
-                                createElementVNode("span", _hoisted_76, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.enableChartTypeSwitcher")), 1)
-                              ], 2)
-                            ]),
-                            default: withCtx(() => [
-                              createTextVNode(" " + toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.chartTypeSwitcherMultiSeriesDisabled")), 1)
-                            ]),
-                            _: 1
-                          }, 8, ["disabled"]),
-                          createElementVNode("div", _hoisted_77, [
-                            createVNode(unref(NSwitch), {
-                              value: enableDataEntry.value,
-                              "onUpdate:value": _cache[13] || (_cache[13] = ($event) => enableDataEntry.value = $event)
-                            }, null, 8, ["value"]),
-                            createElementVNode("span", _hoisted_78, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.enableDataEntry")), 1)
-                          ])
-                        ])
-                      ]),
-                      createElementVNode("div", _hoisted_79, [
-                        createElementVNode("label", _hoisted_80, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.chartSize")), 1),
-                        createElementVNode("div", _hoisted_81, [
-                          createElementVNode("div", _hoisted_82, [
-                            createElementVNode("label", _hoisted_83, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.height")), 1),
-                            createVNode(unref(NInputNumber), {
-                              value: chartHeight.value,
-                              "onUpdate:value": _cache[14] || (_cache[14] = ($event) => chartHeight.value = $event),
-                              class: "flex-1",
-                              max: 1e3,
-                              min: 100,
-                              step: 10
-                            }, {
-                              suffix: withCtx(() => _cache[17] || (_cache[17] = [
-                                createTextVNode("px")
-                              ])),
-                              _: 1
-                            }, 8, ["value"])
-                          ]),
-                          createElementVNode("div", _hoisted_84, [
-                            createElementVNode("label", _hoisted_85, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.width")), 1),
-                            createVNode(unref(NInputNumber), {
-                              value: chartWidth.value,
-                              "onUpdate:value": _cache[15] || (_cache[15] = ($event) => chartWidth.value = $event),
-                              class: "flex-1",
-                              max: 100,
-                              min: 10,
-                              step: 5
-                            }, {
-                              suffix: withCtx(() => _cache[18] || (_cache[18] = [
-                                createTextVNode("%")
-                              ])),
-                              _: 1
-                            }, 8, ["value"])
-                          ])
-                        ])
                       ])
                     ])
                   ])
                 ]),
-                createElementVNode("div", _hoisted_86, [
-                  createElementVNode("div", _hoisted_87, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.preview")), 1),
-                  createElementVNode("div", _hoisted_88, [
+                createElementVNode("div", _hoisted_47$3, [
+                  createElementVNode("div", _hoisted_48$3, toDisplayString(unref(t)("canvasUI.canvasBuilder.dataCharts.preview")), 1),
+                  createElementVNode("div", _hoisted_49$3, [
                     createVNode(unref(NCard), { bordered: false }, {
                       default: withCtx(() => [
                         (openBlock(), createBlock(RawDataCharts, {
@@ -142815,8 +141820,7 @@ const _sfc_main$2E = /* @__PURE__ */ defineComponent({
                           data: {
                             ...previewData.value,
                             context: unref(crmShape)
-                          },
-                          "is-preview": ""
+                          }
                         }, null, 8, ["data"]))
                       ]),
                       _: 1
@@ -142873,12 +141877,6 @@ const _sfc_main$2D = /* @__PURE__ */ defineComponent({
       usedInSectionId,
       when_used_in_section
     });
-    const canEditChart = computed(() => {
-      if (mode.value === CanvasBuilderMode.ADMIN) {
-        return true;
-      }
-      return props.data?.view_controls?.enable_data_entry ?? false;
-    });
     onMounted(() => {
       if (justAddedComponentId.value === props.id) {
         setComponentEditMode(ComponentTypes.DataCharts, props.id);
@@ -142890,7 +141888,7 @@ const _sfc_main$2D = /* @__PURE__ */ defineComponent({
         unref(shouldDisplayPlaceholderComponent)(unref(isEditMode), unref(mode), _ctx.visible) ? (openBlock(), createBlock(PlaceholderComponent, {
           key: 0,
           name: _ctx.tracking_id
-        }, null, 8, ["name"])) : unref(isEditMode) && !unref(isViewOnlyMode) && unref(componentPermissions).hasSomethingEditable && canEditChart.value ? (openBlock(), createBlock(_sfc_main$34, {
+        }, null, 8, ["name"])) : unref(isEditMode) && !unref(isViewOnlyMode) && unref(componentPermissions).hasSomethingEditable ? (openBlock(), createBlock(_sfc_main$34, {
           key: 1,
           id: unref(id),
           active: unref(componentEditMode) && unref(componentEditMode)?.id === unref(id),
@@ -142912,7 +141910,6 @@ const _sfc_main$2D = /* @__PURE__ */ defineComponent({
               key: key.value,
               class: "ma-1",
               data: _ctx.data,
-              "is-edit-mode": "",
               style: normalizeStyle(_ctx.style)
             }, null, 8, ["data", "style"])) : (openBlock(), createBlock(_sfc_main$2G, {
               key: 1,
@@ -142924,9 +141921,8 @@ const _sfc_main$2D = /* @__PURE__ */ defineComponent({
         }, 8, ["id", "active", "duplicate", "edit", "remove", "selected", "settings", "stylable"])) : (openBlock(), createBlock(RawDataCharts, {
           key: 2,
           data: _ctx.data,
-          "is-edit-mode": unref(isEditMode),
           style: normalizeStyle(_ctx.style)
-        }, null, 8, ["data", "is-edit-mode", "style"])),
+        }, null, 8, ["data", "style"])),
         unref(componentEditMode) && unref(componentEditMode).id === unref(id) ? (openBlock(), createBlock(_sfc_main$2E, {
           key: 3,
           id: unref(id),