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

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

@@ -1,4 +1,5 @@
 import type { BlokkliChartData } from '../../../types.js';
+import '#blokkli/charts/adapter';
 type __VLS_Props = {
     data: BlokkliChartData | null;
     uuid: string;

package/dist/modules/charts/runtime/features/charts/Editor/useChartDataSourcePreview.d.ts

@@ -0,0 +1,6 @@
+import type { ComputedRef } from 'vue';
+export declare function useChartDataSourcePreview(sourceId: ComputedRef<string | undefined>): {
+    payload: any;
+    status: any;
+    error: any;
+};

package/dist/modules/charts/runtime/features/charts/Editor/useChartDataSourcePreview.js

@@ -0,0 +1,17 @@
+import { useAsyncData, useBlokkli } from "#imports";
+export function useChartDataSourcePreview(sourceId) {
+  const { adapter } = useBlokkli();
+  const { data, status, error } = useAsyncData(
+    async () => {
+      const id = sourceId.value;
+      if (!id) return null;
+      if (!adapter.getChartDataSourceData) return null;
+      return await adapter.getChartDataSourceData({ id });
+    },
+    {
+      watch: [sourceId],
+      default: () => null
+    }
+  );
+  return { payload: data, status, error };
+}

package/dist/modules/charts/runtime/features/charts/Editor/useChartEditorState.d.ts

@@ -1,5 +1,6 @@
-import type { BlokkliChartData, ChartColor, ChartSeries } from '../../../types.js';
-export declare function useChartEditorState(initial: BlokkliChartData, colors: Record<string, ChartColor>): {
+import type { BlokkliChartData, ChartSeries, ChartType } from '../../../types.js';
+import type { ColorOption } from '#blokkli/editor/types/config';
+export declare function useChartEditorState(initial: BlokkliChartData, options: ColorOption[]): {
     data: any;
     canUndo: any;
     canRedo: any;
@@ -14,4 +15,9 @@ export declare function useChartEditorState(initial: BlokkliChartData, colors: R
         series: ChartSeries[];
         categoryColors: string[];
     }) => void;
+    reverseRows: () => void;
+    addFootnote: () => void;
+    removeFootnote: (index: number) => void;
+    updateFootnote: (index: number, value: string) => void;
+    setType: (type: ChartType) => void;
 };

package/dist/modules/charts/runtime/features/charts/Editor/useChartEditorState.js

@@ -1,10 +1,12 @@
 import { ref, watch, nextTick, computed } from "#imports";
 import { getColorIdAtIndex } from "../../../helpers/index.js";
+import { nextCategoryValue } from "../../../helpers/nextCategoryValue.js";
+import { getDefaultTypeOptions } from "../../../chart-types/index.js";
 const MAX_HISTORY = 50;
 function clone(v) {
   return JSON.parse(JSON.stringify(v));
 }
-export function useChartEditorState(initial, colors) {
+export function useChartEditorState(initial, options) {
   const data = ref(clone(initial));
   const stack = ref([clone(initial)]);
   const index = ref(0);
@@ -42,23 +44,37 @@ export function useChartEditorState(initial, colors) {
       isApplying = false;
     });
   }
+  function forEachTranslation(fn) {
+    const translations = data.value.translations;
+    if (!translations) return;
+    for (const lang of Object.keys(translations)) {
+      const t = translations[lang];
+      if (t) fn(t);
+    }
+  }
   function addRow() {
-    data.value.categories.push(`Category ${data.value.categories.length + 1}`);
+    data.value.categories.push(nextCategoryValue(data.value.categories));
     for (const s of data.value.series) {
       s.data.push(0);
     }
     data.value.categoryColors.push(
-      getColorIdAtIndex(data.value.categoryColors.length, colors)
+      getColorIdAtIndex(data.value.categoryColors.length, options)
     );
+    forEachTranslation((t) => {
+      if (t.categories) t.categories.push("");
+    });
   }
   function addSeries() {
     data.value.series.push({
       name: `Series ${data.value.series.length + 1}`,
-      color: getColorIdAtIndex(data.value.series.length, colors),
+      color: getColorIdAtIndex(data.value.series.length, options),
       data: Array.from({ length: data.value.categories.length }).fill(
         0
       )
     });
+    forEachTranslation((t) => {
+      if (t.seriesNames) t.seriesNames.push("");
+    });
   }
   function removeRow(index2) {
     data.value.categories.splice(index2, 1);
@@ -66,14 +82,73 @@ export function useChartEditorState(initial, colors) {
       s.data.splice(index2, 1);
     }
     data.value.categoryColors.splice(index2, 1);
+    forEachTranslation((t) => {
+      if (t.categories) t.categories.splice(index2, 1);
+    });
   }
   function removeSeries(index2) {
     data.value.series.splice(index2, 1);
+    forEachTranslation((t) => {
+      if (t.seriesNames) t.seriesNames.splice(index2, 1);
+    });
   }
   function importData(payload) {
     data.value.categories = payload.categories;
     data.value.series = payload.series;
     data.value.categoryColors = payload.categoryColors;
+    forEachTranslation((t) => {
+      if (t.categories) {
+        t.categories = Array.from({
+          length: payload.categories.length
+        }).fill("");
+      }
+      if (t.seriesNames) {
+        t.seriesNames = Array.from({
+          length: payload.series.length
+        }).fill("");
+      }
+    });
+  }
+  function reverseRows() {
+    data.value.categories = [...data.value.categories].reverse();
+    data.value.categoryColors = [...data.value.categoryColors].reverse();
+    data.value.series = data.value.series.map((s) => ({
+      ...s,
+      data: [...s.data].reverse()
+    }));
+    forEachTranslation((t) => {
+      if (t.categories) t.categories = [...t.categories].reverse();
+    });
+  }
+  function addFootnote() {
+    data.value.footnotes.push("");
+    forEachTranslation((t) => {
+      if (t.footnotes) t.footnotes.push("");
+    });
+  }
+  function removeFootnote(index2) {
+    data.value.footnotes.splice(index2, 1);
+    forEachTranslation((t) => {
+      if (t.footnotes) t.footnotes.splice(index2, 1);
+    });
+  }
+  function updateFootnote(index2, value) {
+    data.value.footnotes[index2] = value;
+  }
+  const typeOptionsByType = {};
+  function setType(type) {
+    if (data.value.type === type) return;
+    if (data.value.typeOptions) {
+      typeOptionsByType[data.value.type] = { ...data.value.typeOptions };
+    }
+    const defaults = getDefaultTypeOptions(type);
+    const saved = typeOptionsByType[type] ?? {};
+    const merged = {};
+    for (const key of Object.keys(defaults)) {
+      merged[key] = key in saved ? saved[key] : defaults[key];
+    }
+    data.value.type = type;
+    data.value.typeOptions = merged;
   }
   return {
     data,
@@ -85,6 +160,11 @@ export function useChartEditorState(initial, colors) {
     addSeries,
     removeRow,
     removeSeries,
-    importData
+    importData,
+    reverseRows,
+    addFootnote,
+    removeFootnote,
+    updateFootnote,
+    setType
   };
 }

package/dist/modules/charts/runtime/helpers/adapterTypes.d.ts

@@ -0,0 +1,38 @@
+import type { BlokkliAdapterSearchResults } from '#blokkli/editor/adapter';
+import type { ChartDataSource, ChartDataSourceCapabilities, ChartDataSourcePayload } from '../types.js';
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Return the capabilities of the chart data sources system. If this
+         * method is implemented, the chart editor enables the "Dynamic Data"
+         * tab in the Data panel.
+         *
+         * Reserved for future flags (realtime updates, filtering, etc.).
+         */
+        getChartDataSourceCapabilities?: () => Promise<ChartDataSourceCapabilities> | ChartDataSourceCapabilities;
+        /**
+         * Return the list of available chart data sources.
+         *
+         * - When capabilities.supportsSearch is `false`: called once with no
+         *   args, expected to return the full list as `ChartDataSource[]`.
+         *   The editor performs fuzzy filtering client-side.
+         * - When `true`: called with `text` + `page`, expected to return
+         *   `BlokkliAdapterSearchResults<ChartDataSource>` for backend search +
+         *   pagination.
+         */
+        getChartDataSources?: (args: {
+            text?: string;
+            page?: number;
+        }) => Promise<ChartDataSource[] | BlokkliAdapterSearchResults<ChartDataSource>>;
+        /**
+         * Fetch the actual data for a source ID. Used by the chart editor for
+         * preview rendering only. The runtime is not aware of the adapter and
+         * uses its own fetching mechanism (passed via the `dynamicData` prop
+         * on `ChartRenderer`).
+         */
+        getChartDataSourceData?: (args: {
+            id: string;
+        }) => Promise<ChartDataSourcePayload>;
+    }
+}
+export {};

package/dist/modules/charts/runtime/helpers/adapterTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/modules/charts/runtime/helpers/dateFormat.d.ts

@@ -0,0 +1,20 @@
+import type { ChartDateFormat, ChartDateFormatStyle } from '../types.js';
+export type DateSourceFormat = 'mm/yyyy' | 'yyyy-mm' | 'yyyy-mm-dd' | 'dd.mm.yyyy';
+export type DateGranularity = 'month' | 'day';
+export type DetectedDateSource = {
+    format: DateSourceFormat;
+    granularity: DateGranularity;
+};
+/**
+ * Detect a single shared source date format across all non-empty categories.
+ * Returns `null` if any category fails to match the format picked from the
+ * first non-empty entry.
+ */
+export declare function detectDateFormat(categories: string[]): DetectedDateSource | null;
+export declare function parseDateCategory(value: string, source: DetectedDateSource): Date | null;
+export declare function defaultStyleFor(granularity: DateGranularity): ChartDateFormatStyle;
+/**
+ * Format a single category string. Returns the original string if it does not
+ * match the source format, so partially-bad data still renders something.
+ */
+export declare function formatDateCategory(value: string, source: DetectedDateSource, format: ChartDateFormat | undefined, locale: string | undefined): string;

package/dist/modules/charts/runtime/helpers/dateFormat.js

@@ -0,0 +1,121 @@
+const SOURCE_PATTERNS = [
+  { format: "yyyy-mm-dd", regex: /^(\d{4})-(\d{1,2})-(\d{1,2})$/ },
+  { format: "dd.mm.yyyy", regex: /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/ },
+  { format: "mm/yyyy", regex: /^(\d{1,2})\/(\d{4})$/ },
+  { format: "yyyy-mm", regex: /^(\d{4})-(\d{1,2})$/ }
+];
+const GRANULARITY = {
+  "mm/yyyy": "month",
+  "yyyy-mm": "month",
+  "yyyy-mm-dd": "day",
+  "dd.mm.yyyy": "day"
+};
+function isValidYMD(year, month, day) {
+  if (year < 1 || month < 1 || month > 12 || day < 1 || day > 31) return false;
+  const d = new Date(Date.UTC(year, month - 1, day));
+  return d.getUTCFullYear() === year && d.getUTCMonth() === month - 1 && d.getUTCDate() === day;
+}
+function matchSource(value) {
+  for (const { format, regex } of SOURCE_PATTERNS) {
+    const m = value.match(regex);
+    if (!m) continue;
+    let year = 0;
+    let month = 0;
+    let day = 1;
+    if (format === "yyyy-mm-dd") {
+      year = Number(m[1]);
+      month = Number(m[2]);
+      day = Number(m[3]);
+    } else if (format === "dd.mm.yyyy") {
+      day = Number(m[1]);
+      month = Number(m[2]);
+      year = Number(m[3]);
+    } else if (format === "mm/yyyy") {
+      month = Number(m[1]);
+      year = Number(m[2]);
+    } else if (format === "yyyy-mm") {
+      year = Number(m[1]);
+      month = Number(m[2]);
+    }
+    if (!isValidYMD(year, month, day)) continue;
+    return {
+      source: { format, granularity: GRANULARITY[format] },
+      date: new Date(Date.UTC(year, month - 1, day))
+    };
+  }
+  return null;
+}
+export function detectDateFormat(categories) {
+  let detected = null;
+  for (const raw of categories) {
+    const value = raw.trim();
+    if (!value) continue;
+    const match = matchSource(value);
+    if (!match) return null;
+    if (!detected) {
+      detected = match.source;
+    } else if (match.source.format !== detected.format) {
+      return null;
+    }
+  }
+  return detected;
+}
+export function parseDateCategory(value, source) {
+  const match = matchSource(value.trim());
+  if (!match) return null;
+  if (match.source.format !== source.format) return null;
+  return match.date;
+}
+function createIntl(locale, opts) {
+  try {
+    return new Intl.DateTimeFormat(locale || void 0, opts);
+  } catch {
+    return new Intl.DateTimeFormat(void 0, opts);
+  }
+}
+export function defaultStyleFor(granularity) {
+  return granularity === "day" ? "dateShort" : "monthYearShort";
+}
+function intlOptionsFor(style, granularity) {
+  const effective = style === "auto" ? defaultStyleFor(granularity) : style;
+  switch (effective) {
+    case "monthYearShort":
+      return { year: "numeric", month: "short" };
+    case "monthYearLong":
+      return { year: "numeric", month: "long" };
+    case "monthOnly":
+      return { month: "long" };
+    case "monthYearNumeric":
+      return { year: "numeric", month: "numeric" };
+    case "dateShort":
+      return { year: "numeric", month: "2-digit", day: "2-digit" };
+    case "dateLong":
+      return { year: "numeric", month: "long", day: "numeric" };
+    case "yearOnly":
+      return { year: "numeric" };
+    case "iso":
+    case "none":
+    case "auto":
+      return null;
+  }
+}
+function formatIso(date, granularity) {
+  const y = date.getUTCFullYear().toString().padStart(4, "0");
+  const m = (date.getUTCMonth() + 1).toString().padStart(2, "0");
+  if (granularity === "month") return `${y}-${m}`;
+  const d = date.getUTCDate().toString().padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+export function formatDateCategory(value, source, format, locale) {
+  const style = format?.style ?? "auto";
+  if (style === "none") return value;
+  const date = parseDateCategory(value, source);
+  if (!date) return value;
+  const effective = style === "auto" ? defaultStyleFor(source.granularity) : style;
+  if (effective === "iso") {
+    return formatIso(date, source.granularity);
+  }
+  const opts = intlOptionsFor(effective, source.granularity);
+  if (!opts) return value;
+  return createIntl(locale, { ...opts, timeZone: "UTC" }).format(date);
+}

package/dist/modules/charts/runtime/helpers/echarts.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Map our editor-facing legend-position option to ECharts's legend object.
+ * Used by built-in render.vue files for chart types that expose
+ * `legendPosition` as a user-configurable option.
+ */
+export declare function legendPositionToEcharts(pos: string): Record<string, string | number>;

package/dist/modules/charts/runtime/helpers/echarts.js

@@ -0,0 +1,5 @@
+export function legendPositionToEcharts(pos) {
+  if (pos === "top") return { left: "center", top: 5, orient: "horizontal" };
+  if (pos === "right") return { right: 0, top: "middle", orient: "vertical" };
+  return { left: "center", bottom: 0, orient: "horizontal" };
+}

package/dist/modules/charts/runtime/helpers/index.d.ts

@@ -1,26 +1,29 @@
-import type { BlokkliChartData, ChartColor } from '../types.js';
+import type { BlokkliChartData } from '../types.js';
+import type { ColorOption } from '#blokkli/editor/types/config';
 export declare const SUPERSCRIPTS: Record<string, string>;
 /**
  * Replace `{1}`, `{2}`, etc. with Unicode superscript characters.
  */
 export declare function applyFootnotes(text: string): string;
-/**
- * Resolve a color ID to a concrete CSS color value that ApexCharts can use.
- *
- * Plain values like '#ff0000' or 'rgb(255, 0, 0)' are returned as-is.
- * Values containing 'var(' (e.g. 'rgb(var(--theme-primary))') are resolved
- * by setting the value on a DOM element and reading the computed color.
- *
- * Falls back to the first defined color if the ID is not found.
- */
-export declare function resolveChartColor(colorId: string, colors: Record<string, ChartColor>, el?: HTMLElement | null): string;
 /**
  * Get the fallback color ID (first defined color).
  */
-export declare function getFirstColorId(colors: Record<string, ChartColor>): string;
+export declare function getFirstColorId(options: ColorOption[]): string;
 /**
  * Get a color ID for the given index, cycling through available colors.
  */
-export declare function getColorIdAtIndex(index: number, colors: Record<string, ChartColor>): string;
-export declare function getDefaultChartData(colors: Record<string, ChartColor>): BlokkliChartData;
+export declare function getColorIdAtIndex(index: number, options: ColorOption[]): string;
+export declare function getDefaultChartData(options: ColorOption[]): BlokkliChartData;
+/**
+ * Whether all (non-empty) category labels look like numbers — e.g. years
+ * (2012, 2013, …) or plain numeric values. Used to decide whether categories
+ * should be exposed for translation. Empty arrays return `false`.
+ */
+export declare function categoriesAreNumeric(categories: string[]): boolean;
+/**
+ * Whether all (non-empty) category labels match a known date source format
+ * (MM/YYYY, YYYY-MM, YYYY-MM-DD, DD.MM.YYYY). Used to decide whether to apply
+ * date formatting and to gate categories from being translatable.
+ */
+export declare function categoriesAreDates(categories: string[]): boolean;
 export declare function parseNumericInput(raw: string): number;

package/dist/modules/charts/runtime/helpers/index.js

@@ -1,3 +1,4 @@
+import { detectDateFormat } from "./dateFormat.js";
 export const SUPERSCRIPTS = {
   "1": "\xB9",
   "2": "\xB2",
@@ -16,31 +17,14 @@ export function applyFootnotes(text) {
     (_, d) => SUPERSCRIPTS[d] || `{${d}}`
   );
 }
-export function resolveChartColor(colorId, colors, el) {
-  const ids = Object.keys(colors);
-  const entry = colors[colorId] || colors[ids[0] || ""];
-  if (!entry) {
-    return "#888888";
-  }
-  const value = entry.color;
-  if (!value.includes("var(")) {
-    return value;
-  }
-  const target = el || document.documentElement;
-  const prev = target.style.color;
-  target.style.color = value;
-  const resolved = getComputedStyle(target).color;
-  target.style.color = prev;
-  return resolved || value;
-}
-export function getFirstColorId(colors) {
-  return Object.keys(colors)[0] || "";
+export function getFirstColorId(options) {
+  return options[0]?.id || "";
 }
-export function getColorIdAtIndex(index, colors) {
-  const ids = Object.keys(colors);
-  return ids[index % ids.length] || ids[0] || "";
+export function getColorIdAtIndex(index, options) {
+  if (options.length === 0) return "";
+  return options[index % options.length]?.id || options[0]?.id || "";
 }
-export function getDefaultChartData(colors) {
+export function getDefaultChartData(options) {
   return {
     title: "",
     type: "bar",
@@ -48,19 +32,32 @@ export function getDefaultChartData(colors) {
     series: [
       {
         name: "Series 1",
-        color: getColorIdAtIndex(0, colors),
+        color: getColorIdAtIndex(0, options),
         data: [30, 40, 35]
       }
     ],
     categoryColors: [
-      getColorIdAtIndex(0, colors),
-      getColorIdAtIndex(1, colors),
-      getColorIdAtIndex(2, colors)
+      getColorIdAtIndex(0, options),
+      getColorIdAtIndex(1, options),
+      getColorIdAtIndex(2, options)
     ],
     footnotes: [],
     typeOptions: {}
   };
 }
+export function categoriesAreNumeric(categories) {
+  let hasAny = false;
+  for (const c of categories) {
+    const trimmed = c.trim();
+    if (!trimmed) continue;
+    if (!Number.isFinite(Number(trimmed))) return false;
+    hasAny = true;
+  }
+  return hasAny;
+}
+export function categoriesAreDates(categories) {
+  return detectDateFormat(categories) !== null;
+}
 export function parseNumericInput(raw) {
   let str = raw.trim();
   if (!str) return 0;

package/dist/modules/charts/runtime/helpers/nextCategoryValue.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Detect a deterministic series in `categories` and return the next value.
+ *
+ * Conservative: any ambiguity (mixed formats, fewer than 2 entries, no constant
+ * step, non-monotonic) falls back to `Category N+1`. Wrong guesses are worse
+ * than no guess.
+ *
+ * Footnote markers (`{1}`, `{2}`, …) are stripped before detection, since they
+ * are display-only annotations and the raw category drives the pattern.
+ *
+ * Detector order — most specific first, generic last:
+ *   1. `MM/YYYY` — month/year with year carry-over
+ *   2. `YYYY-MM` — ISO-ish year-month
+ *   3. Month names in en/de/fr/it (with cyclic wrap-around)
+ *   4. Integer arithmetic progression (any constant step ≠ 0)
+ *
+ * Returns a single string suitable for the new category cell.
+ */
+export declare function nextCategoryValue(categories: string[]): string;