@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/modules/charts/runtime/features/charts/Editor/index.vue

@@ -1,144 +1,316 @@
 <template>
-  <div class="bk-chart-editor" @wheel.capture.stop>
-    <div class="bk-chart-editor-top">
-      <div class="bk-chart-editor-top-actions">
-        <div class="bk-chart-editor-actions">
-          <button type="button" :disabled="!canUndo" @click="undo">
-            <Icon name="bk_mdi_undo" />
-          </button>
-          <button type="button" :disabled="!canRedo" @click="redo">
-            <Icon name="bk_mdi_redo" />
-          </button>
-        </div>
-
-        <ChartTypePicker v-model="chartData.type" />
+  <ResizableEditorView
+    id="chart-editor"
+    :min-width-right="600"
+    :min-width-left="400"
+    @after-resize="refreshPreview"
+  >
+    <template #toolbar>
+      <div class="_bk_flex _bk_items-center _bk_border-r _bk_border-r-mono-600">
+        <button
+          type="button"
+          class="bk-toolbar-button"
+          :disabled="!canUndo"
+          @click="undo"
+        >
+          <Icon name="bk_mdi_undo" />
+        </button>
+        <button
+          type="button"
+          :disabled="!canRedo"
+          class="bk-toolbar-button"
+          @click="redo"
+        >
+          <Icon name="bk_mdi_redo" />
+        </button>
       </div>
+      <FormToggle
+        v-model="autoUpdate"
+        :label="$t('chartsAutoUpdate', 'Auto-update')"
+        color-scheme="dark"
+        stretch
+        class="_bk_pl-15"
+      />
+      <button
+        v-if="!autoUpdate"
+        type="button"
+        class="bk-button bk-scheme-mono bk-is-small"
+        @click="refreshPreview"
+      >
+        {{ $t("chartsRefreshPreview", "Refresh Preview") }}
+      </button>
+    </template>
 
-      <ChartTypeOptions
-        v-if="chartDef"
-        v-model:title="chartData.title"
-        :options="chartDef.editor.options"
-        :type-options="chartData.typeOptions || {}"
-        @update:type-options="chartData.typeOptions = $event"
+    <template #left>
+      <Preview
+        :uuid
+        :option-key="optionKey"
+        :data="previewData"
+        :dynamic-data="previewDynamicData"
+        :stale="isStale"
       />
-    </div>
+    </template>
 
-    <div class="bk-chart-editor-main">
-      <div class="bk-chart-editor-section">
-        <div class="bk-chart-editor-preview-header">
-          <label class="bk-form-label">{{
-            $t("chartsPreview", "Preview")
-          }}</label>
-          <div class="bk-chart-editor-preview-actions">
-            <button
-              v-if="!autoUpdate"
-              type="button"
-              class="bk-button bk-is-small"
-              @click="refreshPreview"
-            >
-              {{ $t("chartsRefreshPreview", "Refresh Preview") }}
-            </button>
-            <FormToggle
-              v-model="autoUpdate"
-              :label="$t('chartsAutoUpdate', 'Auto-update')"
+    <template #right>
+      <template v-if="!isTranslation">
+        <PanelSection :title="$t('chartsType', 'Chart Type')">
+          <ChartTypePicker
+            :model-value="chartData.type"
+            @update:model-value="onChangeType"
+          />
+        </PanelSection>
+        <AdvancedConfigPanel v-if="isAdvanced" v-model="advancedConfig" />
+        <PanelSection v-if="!isAdvanced" :title="$t('data', 'Data')">
+          <template v-if="capabilities" #tabs>
+            <PanelTabs v-model="dataTab" :tabs="dataTabs" />
+          </template>
+
+          <template v-if="dataTab === 'dynamic' && capabilities">
+            <DataSourcePicker
+              :capabilities
+              :selected="selectedDataSource"
+              @select="onSelectDataSource"
+              @clear="onClearDataSource"
+              @update:known-ids="onKnownIdsUpdated"
             />
-          </div>
-        </div>
-        <Preview
-          :uuid
-          :option-key="optionKey"
-          :data="previewData"
-          :stale="isStale"
-        />
-      </div>
+            <template v-if="chartData.dataSource">
+              <DynamicPreviewStatus
+                :status="previewStatus"
+                :error="previewError ?? null"
+                :missing="sourceMissing"
+                :missing-label="chartData.dataSource.label"
+                :empty="previewEmpty"
+              />
+              <OrphanOverridesWarning
+                v-if="previewPayload"
+                :series-override-names="seriesOverrideNames"
+                :category-override-names="categoryOverrideNames"
+                :known-series="previewSeriesNames"
+                :known-categories="previewPayload.categories"
+                @remove="onRemoveOrphan"
+              />
+              <SeriesOverridesPanel
+                v-if="previewPayload"
+                :series-names="previewSeriesNames"
+                :overrides="chartData.dataSource.seriesOverrides ?? {}"
+                :has-series-colors="caps.hasSeriesColors"
+                @update:overrides="onUpdateSeriesOverrides"
+              />
+              <CategoryColorOverridesPanel
+                v-if="previewPayload && caps.hasCategoryColors"
+                :categories="previewPayload.categories"
+                :overrides="chartData.dataSource.categoryColorOverrides ?? {}"
+                @update:overrides="onUpdateCategoryOverrides"
+              />
+            </template>
+          </template>
+
+          <template v-else-if="dataTab === 'custom'">
+            <div v-if="dataTooLarge" class="_bk_p-panel-gap">
+              <InfoBox
+                small
+                :text="
+  $t(
+    'chartsDataTableHidden',
+    'Data table hidden because the dataset is too large to edit cell-by-cell (@cells cells, max @max). Re-import a smaller CSV to edit values inline.'
+  ).replace('@cells', String(cellCount)).replace('@max', String(MAX_DATA_TABLE_CELLS))
+"
+              />
+            </div>
+            <template v-else>
+              <div class="_bk_overflow-auto bk-scrollbar-light _bk_relative _bk_z-50">
+                <DataTable
+                  :categories="chartData.categories"
+                  :series="chartData.series"
+                  :category-colors="chartData.categoryColors"
+                  :has-series-colors="caps.hasSeriesColors"
+                  :has-category-colors="caps.hasCategoryColors"
+                  :remove-row="removeRow"
+                  :remove-series="removeSeries"
+                  @update:categories="chartData.categories = $event"
+                  @update:series="chartData.series = $event"
+                  @update:category-colors="chartData.categoryColors = $event"
+                  @add-column="addSeries"
+                />
+              </div>
+              <PanelAddButton
+                :label="$t('chartsAddRow', 'Add row')"
+                icon="bk_mdi_add_row_below"
+                @click.prevent="addRow"
+              />
+            </template>
+          </template>
+
+          <template v-if="dataTab === 'custom'" #actions>
+            <CsvImport @import="importData" />
+            <CsvExport
+              v-if="!chartData.dataSource"
+              :title="chartData.title"
+              :categories="chartData.categories"
+              :series="chartData.series"
+            />
+            <PanelAction
+              :title="$t('chartsReverseRows', 'Reverse rows')"
+              icon="bk_mdi_table_convert"
+              @click="reverseRows"
+            />
+          </template>
+        </PanelSection>
 
-      <div class="bk-chart-editor-section">
-        <label class="bk-form-label">{{ $t("chartsData", "Data") }}</label>
-        <DataTable
-          :categories="chartData.categories"
-          :series="chartData.series"
-          :category-colors="chartData.categoryColors"
-          :has-multiple-series="caps.hasMultipleSeries"
-          :has-series-colors="caps.hasSeriesColors"
-          :has-category-colors="caps.hasCategoryColors"
-          :colors="COLORS"
-          :remove-row="removeRow"
-          :remove-series="removeSeries"
-          @update:categories="chartData.categories = $event"
-          @update:series="chartData.series = $event"
-          @update:category-colors="chartData.categoryColors = $event"
-        />
-        <div class="bk-chart-data-table-actions">
-          <button type="button" class="bk-button bk-is-small" @click="addRow">
-            <Icon name="bk_mdi_add_row_below" />
-            {{ $t("chartsAddRow", "Add row") }}
-          </button>
-          <button
-            v-if="caps.hasMultipleSeries"
-            type="button"
-            class="bk-button bk-is-small"
-            @click="addSeries"
+        <template v-if="!isAdvanced">
+          <FootnoteEditor
+            :footnotes="chartData.footnotes"
+            :add-footnote="addFootnote"
+            :remove-footnote="removeFootnote"
+            :update-footnote="updateFootnote"
+          />
+
+          <NumberFormatEditor
+            :format="chartData.numberFormat ?? {}"
+            @update:format="
+  chartData.numberFormat = Object.keys($event).length > 0 ? $event : void 0
+"
           >
-            <Icon name="bk_mdi_add_column_right" />
-            {{ $t("chartsAddColumn", "Add column") }}
-          </button>
-          <CsvImport :colors="COLORS" @import="importData" />
-        </div>
-      </div>
+            <DateFormatEditor
+              v-if="hasDateFormattedCategories"
+              :format="chartData.dateFormat ?? {}"
+              :categories="chartData.categories"
+              :locale="chartData.numberFormat?.locale"
+              @update:format="
+  chartData.dateFormat = Object.keys($event).filter(
+    (k) => $event[k] !== void 0
+  ).length > 0 ? $event : void 0
+"
+            />
+          </NumberFormatEditor>
 
-      <div class="bk-chart-editor-section">
-        <FootnoteEditor
-          :footnotes="chartData.footnotes"
-          @update:footnotes="chartData.footnotes = $event"
-        />
-      </div>
-    </div>
-  </div>
+          <PanelSection
+            v-if="chartDef"
+            :title="$t('settings', 'Settings')"
+            padded
+          >
+            <ChartTypeOptions
+              v-model:title="chartData.title"
+              :options="chartDef.editor.options"
+              :type-options="chartData.typeOptions || {}"
+              @update:type-options="chartData.typeOptions = $event"
+            />
+          </PanelSection>
+        </template>
+      </template>
+      <TranslationsEditor
+        v-if="!isAdvanced"
+        v-model:translations="chartData.translations"
+        :chart-data="effectiveChartData"
+        :has-numeric-categories
+        :has-date-formatted-categories="hasDateFormattedCategories"
+      />
+      <PanelSection
+        v-else-if="isTranslation"
+        :title="$t('translate', 'Translate')"
+      >
+        <div class="_bk_p-panel-gap _bk_text-mono-700">
+          {{
+            $t(
+  "chartsAdvancedNoTranslations",
+  "Advanced charts have no translatable strings \u2014 the ECharts configuration is stored as-is."
+)
+          }}
+        </div>
+      </PanelSection>
+    </template>
+  </ResizableEditorView>
 </template>
 
 <script setup>
-import { ref, computed, watch, useBlokkli, onBeforeUnmount } from "#imports";
-import { getDefaultChartData, getFirstColorId } from "../../../helpers";
-import { getChartType, getDefaultTypeOptions } from "../../../chartTypes";
-import { COLORS } from "#blokkli-build/charts-config";
+import {
+  ref,
+  computed,
+  watch,
+  useAsyncData,
+  useBlokkli,
+  onBeforeUnmount
+} from "#imports";
+import {
+  ADVANCED_DEFAULT_PARSED,
+  ADVANCED_DEFAULT_SOURCE
+} from "../../../blokkli/chart-types/advanced/definition";
+import "#blokkli/charts/adapter";
+import {
+  categoriesAreDates,
+  categoriesAreNumeric,
+  getDefaultChartData,
+  getFirstColorId
+} from "../../../helpers";
+import { getChartType, getDefaultTypeOptions } from "../../../chart-types";
 import { useChartEditorState } from "./useChartEditorState";
-import { Icon, FormToggle } from "#blokkli/editor/components";
+import { useChartDataSourcePreview } from "./useChartDataSourcePreview";
+import { Icon, FormToggle, InfoBox } from "#blokkli/editor/components";
 import ChartTypePicker from "./ChartTypePicker/index.vue";
 import DataTable from "./DataTable/index.vue";
 import CsvImport from "./CsvImport/index.vue";
+import CsvExport from "./CsvExport/index.vue";
 import FootnoteEditor from "./FootnoteEditor/index.vue";
+import NumberFormatEditor from "./NumberFormatEditor/index.vue";
+import DateFormatEditor from "./DateFormatEditor/index.vue";
+import TranslationsEditor from "./TranslationsEditor/index.vue";
 import Preview from "./Preview/index.vue";
 import ChartTypeOptions from "./ChartTypeOptions/index.vue";
+import DataSourcePicker from "./DataSourcePicker/index.vue";
+import DynamicPreviewStatus from "./DynamicPreviewStatus/index.vue";
+import SeriesOverridesPanel from "./SeriesOverridesPanel/index.vue";
+import CategoryColorOverridesPanel from "./CategoryColorOverridesPanel/index.vue";
+import OrphanOverridesWarning from "./OrphanOverridesWarning/index.vue";
+import AdvancedConfigPanel from "./AdvancedConfigPanel/index.vue";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
+import PanelTabs from "#blokkli/editor/components/Panel/Tabs/index.vue";
+import PanelAction from "#blokkli/editor/components/Panel/Action/index.vue";
+import PanelAddButton from "#blokkli/editor/components/Panel/AddButton/index.vue";
+import ResizableEditorView from "#blokkli/editor/components/ResizableEditorView/index.vue";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
 const props = defineProps({
   data: { type: [Object, null], required: true },
   uuid: { type: String, required: true },
   optionKey: { type: String, required: true }
 });
-const { $t } = useBlokkli();
+const { $t, config, state, adapter } = useBlokkli();
+const isTranslation = computed(() => state.editMode.value === "translating");
+const colorOptions = config.colorOptions.value;
 function getCurrentData() {
   if (props.data) {
     const parsed = JSON.parse(JSON.stringify(props.data));
-    if (parsed && Array.isArray(parsed.series) && parsed.series.length > 0) {
-      const fallbackId = getFirstColorId(COLORS);
-      for (const series of parsed.series) {
-        if (!COLORS[series.color]) {
-          series.color = fallbackId;
+    const isAdvanced2 = parsed?.type === "advanced";
+    const hasSeries = Array.isArray(parsed?.series) && parsed.series.length > 0;
+    if (parsed && (isAdvanced2 || hasSeries)) {
+      if (!isAdvanced2) {
+        const validIds = new Set(colorOptions.map((c) => c.id));
+        const fallbackId = getFirstColorId(colorOptions);
+        for (const series of parsed.series) {
+          if (!validIds.has(series.color)) {
+            series.color = fallbackId;
+          }
         }
-      }
-      if (Array.isArray(parsed.categoryColors)) {
-        for (let i = 0; i < parsed.categoryColors.length; i++) {
-          if (!COLORS[parsed.categoryColors[i]]) {
-            parsed.categoryColors[i] = fallbackId;
+        if (Array.isArray(parsed.categoryColors)) {
+          for (let i = 0; i < parsed.categoryColors.length; i++) {
+            if (!validIds.has(parsed.categoryColors[i])) {
+              parsed.categoryColors[i] = fallbackId;
+            }
           }
+        } else {
+          parsed.categoryColors = parsed.categories.map(
+            (_, i) => {
+              return colorOptions[i % colorOptions.length]?.id || fallbackId;
+            }
+          );
         }
       } else {
-        parsed.categoryColors = parsed.categories.map(
-          (_, i) => {
-            const ids = Object.keys(COLORS);
-            return ids[i % ids.length] || fallbackId;
-          }
-        );
+        if (!Array.isArray(parsed.series)) parsed.series = [];
+        if (!Array.isArray(parsed.categories)) parsed.categories = [];
+        if (!Array.isArray(parsed.categoryColors)) parsed.categoryColors = [];
+        const ac = parsed.advancedConfig;
+        const parsedObj = ac && typeof ac.parsed === "object" && ac.parsed !== null ? ac.parsed : { ...ADVANCED_DEFAULT_PARSED };
+        const source = ac && typeof ac.source === "string" ? ac.source : JSON.stringify(parsedObj, null, 2);
+        parsed.advancedConfig = { parsed: parsedObj, source };
       }
       if (!Array.isArray(parsed.footnotes)) {
         parsed.footnotes = [];
@@ -146,10 +318,46 @@ function getCurrentData() {
       if (!parsed.typeOptions || typeof parsed.typeOptions !== "object") {
         parsed.typeOptions = getDefaultTypeOptions(parsed.type);
       }
+      normalizeTranslations(parsed);
+      if (!parsed.translations) {
+        parsed.translations = {};
+      }
       return parsed;
     }
   }
-  return getDefaultChartData(COLORS);
+  const fresh = getDefaultChartData(colorOptions);
+  if (!fresh.translations) {
+    fresh.translations = {};
+  }
+  return fresh;
+}
+function padOrTrim(arr, length) {
+  const source = Array.isArray(arr) ? arr : [];
+  const out = [];
+  for (let i = 0; i < length; i++) {
+    const v = source[i];
+    out.push(typeof v === "string" ? v : "");
+  }
+  return out;
+}
+function normalizeTranslations(parsed) {
+  if (!parsed.translations || typeof parsed.translations !== "object") {
+    return;
+  }
+  const cleaned = {};
+  for (const lang of Object.keys(parsed.translations)) {
+    const t = parsed.translations[lang];
+    if (!t || typeof t !== "object") continue;
+    cleaned[lang] = {
+      title: typeof t.title === "string" ? t.title : "",
+      categories: padOrTrim(t.categories, parsed.categories.length),
+      seriesNames: padOrTrim(t.seriesNames, parsed.series.length),
+      footnotes: padOrTrim(t.footnotes, parsed.footnotes.length),
+      prefix: typeof t.prefix === "string" ? t.prefix : "",
+      suffix: typeof t.suffix === "string" ? t.suffix : ""
+    };
+  }
+  parsed.translations = cleaned;
 }
 const {
   data: chartData,
@@ -161,25 +369,51 @@ const {
   addSeries,
   removeRow,
   removeSeries,
-  importData
-} = useChartEditorState(getCurrentData(), COLORS);
+  importData,
+  reverseRows,
+  addFootnote,
+  removeFootnote,
+  updateFootnote,
+  setType
+} = useChartEditorState(getCurrentData(), colorOptions);
+const dataTab = ref(
+  chartData.value.dataSource ? "dynamic" : "custom"
+);
+const effectiveChartData = computed(() => {
+  if (dataTab.value === "custom" && chartData.value.dataSource) {
+    return { ...chartData.value, dataSource: void 0 };
+  }
+  return chartData.value;
+});
+function getData() {
+  const data = effectiveChartData.value;
+  if (data.type === "advanced" && data.advancedConfig?.source !== void 0) {
+    return {
+      ...data,
+      advancedConfig: { parsed: data.advancedConfig.parsed }
+    };
+  }
+  return data;
+}
+defineExpose({ getData });
 const autoUpdate = ref(true);
 const previewData = ref(
-  JSON.parse(JSON.stringify(chartData.value))
+  JSON.parse(JSON.stringify(effectiveChartData.value))
 );
 const isStale = ref(false);
 let debounceTimer = null;
 function refreshPreview() {
-  previewData.value = JSON.parse(JSON.stringify(chartData.value));
+  previewData.value = JSON.parse(JSON.stringify(effectiveChartData.value));
   isStale.value = false;
 }
 watch(
-  chartData,
+  effectiveChartData,
   () => {
     if (autoUpdate.value) {
       if (debounceTimer) clearTimeout(debounceTimer);
       isStale.value = true;
-      debounceTimer = setTimeout(refreshPreview, 500);
+      const delay = isAdvanced.value ? 1500 : 500;
+      debounceTimer = setTimeout(refreshPreview, delay);
     } else {
       isStale.value = true;
     }
@@ -194,40 +428,143 @@ watch(autoUpdate, (enabled) => {
 onBeforeUnmount(() => {
   if (debounceTimer) clearTimeout(debounceTimer);
 });
+const isAdvanced = computed(() => chartData.value.type === "advanced");
+function onChangeType(next) {
+  setType(next);
+  if (next === "advanced" && !chartData.value.advancedConfig) {
+    chartData.value.advancedConfig = {
+      parsed: { ...ADVANCED_DEFAULT_PARSED },
+      source: ADVANCED_DEFAULT_SOURCE
+    };
+  }
+}
+const advancedConfig = computed({
+  get: () => chartData.value.advancedConfig ?? {
+    parsed: { ...ADVANCED_DEFAULT_PARSED },
+    source: ADVANCED_DEFAULT_SOURCE
+  },
+  set: (next) => {
+    chartData.value.advancedConfig = next;
+  }
+});
 const chartDef = computed(() => getChartType(chartData.value.type, $t));
 const caps = computed(() => {
   const def = chartDef.value;
   return {
-    hasMultipleSeries: def?.hasMultipleSeries ?? true,
     hasSeriesColors: def?.hasSeriesColors ?? true,
     hasCategoryColors: def?.hasCategoryColors ?? false
   };
 });
-const typeOptionsCache = {
-  ...chartData.value.typeOptions
-};
-watch(
-  () => chartData.value.type,
-  (type) => {
-    const defaults = getDefaultTypeOptions(type);
-    const merged = {};
-    for (const key of Object.keys(defaults)) {
-      merged[key] = key in typeOptionsCache ? typeOptionsCache[key] : defaults[key];
-    }
-    chartData.value.typeOptions = merged;
-  }
+const MAX_DATA_TABLE_CELLS = 200;
+const cellCount = computed(
+  () => chartData.value.categories.length * chartData.value.series.length
 );
-watch(
-  () => chartData.value.typeOptions,
-  (opts) => {
-    if (opts) {
-      Object.assign(typeOptionsCache, opts);
-    }
-  },
-  { deep: true }
+const dataTooLarge = computed(() => cellCount.value > MAX_DATA_TABLE_CELLS);
+const hasNumericCategories = computed(
+  () => categoriesAreNumeric(chartData.value.categories)
 );
-function getData() {
-  return chartData.value;
+const hasDateFormattedCategories = computed(
+  () => categoriesAreDates(chartData.value.categories)
+);
+const { data: capabilities } = await useAsyncData(
+  () => adapter.getChartDataSourceCapabilities ? Promise.resolve(adapter.getChartDataSourceCapabilities()) : Promise.resolve(null),
+  { default: () => null }
+);
+if (!capabilities.value && dataTab.value === "dynamic") {
+  dataTab.value = "custom";
+}
+const dataTabs = computed(() => [
+  { id: "custom", label: $t("chartsDataTabCustom", "Custom data") },
+  { id: "dynamic", label: $t("chartsDataTabDynamic", "Dynamic data") }
+]);
+const knownSourceIds = ref(/* @__PURE__ */ new Set());
+const currentSourceId = computed(() => chartData.value.dataSource?.id);
+const {
+  status: previewStatus,
+  error: previewError,
+  payload: previewPayload
+} = useChartDataSourcePreview(currentSourceId);
+const sourceMissing = computed(() => {
+  const id = chartData.value.dataSource?.id;
+  if (!id) return false;
+  if (knownSourceIds.value.size === 0) return false;
+  return !knownSourceIds.value.has(id);
+});
+const selectedDataSource = computed(() => {
+  const ref2 = chartData.value.dataSource;
+  if (!ref2) return null;
+  return {
+    id: ref2.id,
+    label: ref2.label
+  };
+});
+const previewSeriesNames = computed(() => {
+  return previewPayload.value?.series.map((s) => s.name) ?? [];
+});
+const previewEmpty = computed(() => {
+  const p = previewPayload.value;
+  if (!p) return false;
+  return p.categories.length === 0 || p.series.length === 0;
+});
+const seriesOverrideNames = computed(
+  () => Object.keys(chartData.value.dataSource?.seriesOverrides ?? {})
+);
+const categoryOverrideNames = computed(
+  () => Object.keys(chartData.value.dataSource?.categoryColorOverrides ?? {})
+);
+const previewDynamicData = computed(() => {
+  if (!previewData.value.dataSource) return null;
+  return previewPayload.value;
+});
+function onSelectDataSource(source) {
+  chartData.value.dataSource = {
+    id: source.id,
+    label: source.label
+  };
+}
+function onClearDataSource() {
+  chartData.value.dataSource = void 0;
+}
+function onKnownIdsUpdated(ids) {
+  knownSourceIds.value = ids;
+}
+function onUpdateSeriesOverrides(overrides) {
+  if (!chartData.value.dataSource) return;
+  chartData.value.dataSource = {
+    ...chartData.value.dataSource,
+    seriesOverrides: Object.keys(overrides).length === 0 ? void 0 : overrides
+  };
+}
+function onUpdateCategoryOverrides(overrides) {
+  if (!chartData.value.dataSource) return;
+  chartData.value.dataSource = {
+    ...chartData.value.dataSource,
+    categoryColorOverrides: Object.keys(overrides).length === 0 ? void 0 : overrides
+  };
+}
+function withoutKey(source, key) {
+  const next = {};
+  if (source) {
+    for (const k of Object.keys(source)) {
+      if (k !== key) next[k] = source[k];
+    }
+  }
+  return next;
+}
+function onRemoveOrphan(orphan) {
+  if (!chartData.value.dataSource) return;
+  if (orphan.scope === "series") {
+    onUpdateSeriesOverrides(
+      withoutKey(chartData.value.dataSource.seriesOverrides, orphan.name)
+    );
+  } else {
+    onUpdateCategoryOverrides(
+      withoutKey(
+        chartData.value.dataSource.categoryColorOverrides,
+        orphan.name
+      )
+    );
+  }
 }
 onBlokkliEvent("keyPressed", (e) => {
   if (e.code === "z" && e.meta) {
@@ -242,5 +579,4 @@ onBlokkliEvent("keyPressed", (e) => {
     }
   }
 });
-defineExpose({ getData });
 </script>