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

package/dist/modules/charts/runtime/chart-types/definition/options/index.d.ts

@@ -0,0 +1,43 @@
+import type { ChartOption, TranslateFunction } from '../../../types.js';
+type SharedOptions = {
+    options: Record<string, ChartOption>;
+};
+/**
+ * Shared x-axis label options for chart types that display an x-axis.
+ */
+export declare function xAxisOptions($t: TranslateFunction): SharedOptions;
+/**
+ * Data labels option — show values directly on chart elements.
+ */
+export declare function dataLabelsOptions($t: TranslateFunction): SharedOptions;
+/**
+ * Y-axis manual start value option.
+ *
+ * When unset (`undefined`) the chart auto-scales from the data minimum.
+ * When set, chart types may force the Y axis to start at the given value.
+ */
+export declare function yAxisMinOptions($t: TranslateFunction): SharedOptions;
+/**
+ * Legend position option for multi-series chart types.
+ */
+export declare function legendOptions($t: TranslateFunction): SharedOptions;
+/**
+ * Grid lines option for chart types with axes.
+ */
+export declare function gridOptions($t: TranslateFunction): SharedOptions;
+/**
+ * Runtime category filter — when enabled, the chart wrapper renders a
+ * `<select>` above the chart so viewers can pick one category at a time.
+ * The wrapper pivots the payload to a 1-series × N-bar shape and passes
+ * the original series colors as per-bar colors via `categoryHexColors`.
+ */
+export declare function categoryFilterOptions($t: TranslateFunction): SharedOptions;
+/**
+ * Stroke width option for line-based chart types.
+ */
+export declare function strokeWidthOptions($t: TranslateFunction): SharedOptions;
+/**
+ * Merge multiple shared option sets into one.
+ */
+export declare function mergeShared(...sets: SharedOptions[]): SharedOptions;
+export {};

package/dist/modules/charts/runtime/{chartTypes/shared.js → chart-types/definition/options/index.js}

@@ -6,7 +6,7 @@ export function xAxisOptions($t) {
         label: $t("chartsXAxisRotation", "Label rotation"),
         default: "auto",
         options: {
-          auto: $t("chartsRotationAuto", "Auto"),
+          auto: $t("auto", "Auto"),
           "-45": "-45\xB0",
           "-90": "-90\xB0"
         }
@@ -14,18 +14,6 @@ export function xAxisOptions($t) {
     }
   };
 }
-export function buildXAxisLabelOptions(typeOptions) {
-  const rotation = typeOptions.xaxisRotation;
-  if (rotation && rotation !== "auto") {
-    return {
-      labels: {
-        rotate: Number(rotation),
-        rotateAlways: true
-      }
-    };
-  }
-  return {};
-}
 export function dataLabelsOptions($t) {
   return {
     options: {
@@ -38,8 +26,17 @@ export function dataLabelsOptions($t) {
     }
   };
 }
-export function buildDataLabelsOptions(typeOptions) {
-  return { dataLabels: { enabled: !!typeOptions.dataLabels } };
+export function yAxisMinOptions($t) {
+  return {
+    options: {
+      yaxisMin: {
+        type: "number",
+        nullable: true,
+        label: $t("chartsYAxisMin", "Y-axis start"),
+        group: "display"
+      }
+    }
+  };
 }
 export function legendOptions($t) {
   return {
@@ -57,9 +54,6 @@ export function legendOptions($t) {
     }
   };
 }
-export function buildLegendOptions(typeOptions) {
-  return { legend: { position: typeOptions.legendPosition || "bottom" } };
-}
 export function gridOptions($t) {
   return {
     options: {
@@ -72,8 +66,24 @@ export function gridOptions($t) {
     }
   };
 }
-export function buildGridOptions(typeOptions) {
-  return { grid: { show: !!typeOptions.gridLines } };
+export function categoryFilterOptions($t) {
+  return {
+    options: {
+      categoryFilter: {
+        type: "checkbox",
+        label: $t("chartsCategoryFilter", "Filterable category axis"),
+        default: false,
+        group: "filter"
+      },
+      categoryFilterLabel: {
+        type: "text",
+        label: $t("chartsCategoryFilterLabel", "Filter label"),
+        default: "",
+        group: "filter",
+        shouldRender: ({ options }) => options.categoryFilter === true
+      }
+    }
+  };
 }
 export function strokeWidthOptions($t) {
   return {
@@ -91,9 +101,6 @@ export function strokeWidthOptions($t) {
     }
   };
 }
-export function buildStrokeWidthOptions(typeOptions) {
-  return { stroke: { width: Number(typeOptions.strokeWidth) || 2 } };
-}
 export function mergeShared(...sets) {
   const options = {};
   for (const set of sets) {

package/dist/modules/charts/runtime/chart-types/index.d.ts

@@ -0,0 +1,21 @@
+import type { ChartTypeDefinition, TranslateFunction } from '../types.js';
+export type { ChartTypeOptionsMap, ChartTypeId, } from '#blokkli-build/charts-definitions';
+/**
+ * Get a chart type definition using fallback labels (no real translations).
+ * Used by agent tools that don't have access to `$t`.
+ */
+export declare function getChartTypeRuntime(id: string): ChartTypeDefinition | undefined;
+/**
+ * Get all chart type definitions with translated labels.
+ * Used by editor components only.
+ */
+export declare function getChartTypes($t: TranslateFunction): ChartTypeDefinition[];
+/**
+ * Get a single chart type definition with translated labels.
+ * Used by editor components only.
+ */
+export declare function getChartType(id: string, $t: TranslateFunction): ChartTypeDefinition | undefined;
+/**
+ * Get the default type options for a chart type.
+ */
+export declare function getDefaultTypeOptions(id: string): Record<string, unknown>;

package/dist/modules/charts/runtime/chart-types/index.js

@@ -0,0 +1,25 @@
+import { definitions } from "#blokkli-build/charts-definitions";
+const noopT = (_key, fallback) => fallback;
+function resolve(entry, $t) {
+  return { id: entry.id, ...entry.factory($t) };
+}
+export function getChartTypeRuntime(id) {
+  const entry = definitions.find((d) => d.id === id);
+  return entry ? resolve(entry, noopT) : void 0;
+}
+export function getChartTypes($t) {
+  return definitions.map((entry) => resolve(entry, $t));
+}
+export function getChartType(id, $t) {
+  const entry = definitions.find((d) => d.id === id);
+  return entry ? resolve(entry, $t) : void 0;
+}
+export function getDefaultTypeOptions(id) {
+  const def = getChartTypeRuntime(id);
+  if (!def) return {};
+  const defaults = {};
+  for (const [key, opt] of Object.entries(def.editor.options)) {
+    defaults[key] = opt.default;
+  }
+  return defaults;
+}

package/dist/modules/charts/runtime/components/ChartRenderer/index.d.vue.ts

@@ -1,147 +1,21 @@
-declare const __VLS_export: import("vue").DefineComponent<({
-    title: string;
-    categories: string[];
-    series: import("../../types.js").ChartSeries[];
-    categoryColors: string[];
-    footnotes: string[];
-} & {
-    type: "bar";
-    typeOptions?: Partial<import("../../chartTypes/bar.js").TypeOptions> | undefined;
-}) | ({
-    title: string;
-    categories: string[];
-    series: import("../../types.js").ChartSeries[];
-    categoryColors: string[];
-    footnotes: string[];
-} & {
-    type: "line";
-    typeOptions?: Partial<import("../../chartTypes/line.js").TypeOptions> | undefined;
-}) | ({
-    title: string;
-    categories: string[];
-    series: import("../../types.js").ChartSeries[];
-    categoryColors: string[];
-    footnotes: string[];
-} & {
-    type: "area";
-    typeOptions?: Partial<import("../../chartTypes/area.js").TypeOptions> | undefined;
-}) | ({
-    title: string;
-    categories: string[];
-    series: import("../../types.js").ChartSeries[];
-    categoryColors: string[];
-    footnotes: string[];
-} & {
-    type: "pie";
-    typeOptions?: Partial<import("../../chartTypes/pie.js").TypeOptions> | undefined;
-}) | ({
-    title: string;
-    categories: string[];
-    series: import("../../types.js").ChartSeries[];
-    categoryColors: string[];
-    footnotes: string[];
-} & {
-    type: "donut";
-    typeOptions?: Partial<import("../../chartTypes/donut.js").TypeOptions> | undefined;
-}) | ({
-    title: string;
-    categories: string[];
-    series: import("../../types.js").ChartSeries[];
-    categoryColors: string[];
-    footnotes: string[];
-} & {
-    type: "heatmap";
-    typeOptions?: Partial<import("../../chartTypes/heatmap.js").TypeOptions> | undefined;
-}) | ({
-    title: string;
-    categories: string[];
-    series: import("../../types.js").ChartSeries[];
-    categoryColors: string[];
-    footnotes: string[];
-} & {
-    type: "radialBar";
-    typeOptions?: Partial<import("../../chartTypes/radialBar.js").TypeOptions> | undefined;
-}) | ({
-    title: string;
-    categories: string[];
-    series: import("../../types.js").ChartSeries[];
-    categoryColors: string[];
-    footnotes: string[];
-} & {
-    type: "radar";
-    typeOptions?: Partial<import("../../chartTypes/radar.js").TypeOptions> | undefined;
-}), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<({
-    title: string;
-    categories: string[];
-    series: import("../../types.js").ChartSeries[];
-    categoryColors: string[];
-    footnotes: string[];
-} & {
-    type: "bar";
-    typeOptions?: Partial<import("../../chartTypes/bar.js").TypeOptions> | undefined;
-}) | ({
-    title: string;
-    categories: string[];
-    series: import("../../types.js").ChartSeries[];
-    categoryColors: string[];
-    footnotes: string[];
-} & {
-    type: "line";
-    typeOptions?: Partial<import("../../chartTypes/line.js").TypeOptions> | undefined;
-}) | ({
-    title: string;
-    categories: string[];
-    series: import("../../types.js").ChartSeries[];
-    categoryColors: string[];
-    footnotes: string[];
-} & {
-    type: "area";
-    typeOptions?: Partial<import("../../chartTypes/area.js").TypeOptions> | undefined;
-}) | ({
-    title: string;
-    categories: string[];
-    series: import("../../types.js").ChartSeries[];
-    categoryColors: string[];
-    footnotes: string[];
-} & {
-    type: "pie";
-    typeOptions?: Partial<import("../../chartTypes/pie.js").TypeOptions> | undefined;
-}) | ({
-    title: string;
-    categories: string[];
-    series: import("../../types.js").ChartSeries[];
-    categoryColors: string[];
-    footnotes: string[];
-} & {
-    type: "donut";
-    typeOptions?: Partial<import("../../chartTypes/donut.js").TypeOptions> | undefined;
-}) | ({
-    title: string;
-    categories: string[];
-    series: import("../../types.js").ChartSeries[];
-    categoryColors: string[];
-    footnotes: string[];
-} & {
-    type: "heatmap";
-    typeOptions?: Partial<import("../../chartTypes/heatmap.js").TypeOptions> | undefined;
-}) | ({
-    title: string;
-    categories: string[];
-    series: import("../../types.js").ChartSeries[];
-    categoryColors: string[];
-    footnotes: string[];
-} & {
-    type: "radialBar";
-    typeOptions?: Partial<import("../../chartTypes/radialBar.js").TypeOptions> | undefined;
-}) | ({
-    title: string;
-    categories: string[];
-    series: import("../../types.js").ChartSeries[];
-    categoryColors: string[];
-    footnotes: string[];
-} & {
-    type: "radar";
-    typeOptions?: Partial<import("../../chartTypes/radar.js").TypeOptions> | undefined;
-})> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+import type { BlokkliChartData, ChartDataSourcePayload } from '../../types.js';
+type __VLS_Props = BlokkliChartData & {
+    /**
+     * Override the language used to resolve translated strings. When unset,
+     * the language comes from the surrounding BlokkliProvider context.
+     */
+    languageOverride?: string;
+    /**
+     * Data fetched at runtime for a dynamic data source. Required when
+     * `props.dataSource` is set; otherwise ignored.
+     *
+     * The integrator's chart block component is responsible for fetching
+     * (e.g. via `useFetch` / `useLazyFetch`) and passing the result here.
+     * For large payloads, prefer `useLazyFetch` or `useAsyncData` with
+     * `server: false` to avoid bloating SSR HTML.
+     */
+    dynamicData?: ChartDataSourcePayload | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/modules/charts/runtime/components/ChartRenderer/index.vue

@@ -1,17 +1,24 @@
 <template>
-  <div ref="rootEl">
+  <div>
+    <div v-if="showCategoryFilter" class="_bk_blokkli-chart-category-filter">
+      <label>
+        <span v-if="categoryFilterLabel">{{ categoryFilterLabel }}:</span>
+        <select v-model.number="selectedCategoryIndex">
+          <option v-for="(c, i) in formattedCategories" :key="i" :value="i">
+            {{ c }}
+          </option>
+        </select>
+      </label>
+    </div>
     <ClientOnly>
       <component
-        :is="ApexChart"
-        v-if="ApexChart"
-        :type="type"
-        :options="chartOptions"
-        :series="chartSeries"
-        height="350"
+        :is="typeComponent"
+        v-if="typeComponent && finalRenderProps"
+        v-bind="finalRenderProps"
       />
-      <ol v-if="footnotes?.length" class="bk-chart-footnotes">
-        <li v-for="(note, i) in footnotes" :key="i">
-          <span class="bk-chart-footnote-marker">{{
+      <ol v-if="resolvedFootnotes.length" class="_bk_blokkli-chart-footnotes">
+        <li v-for="(note, i) in resolvedFootnotes" :key="i">
+          <span class="_bk_blokkli-chart-footnote-marker">{{
             superscriptFor(i + 1)
           }}</span>
           {{ note }}
@@ -22,115 +29,202 @@
 </template>
 
 <script setup>
-import { computed, defineAsyncComponent, useTemplateRef } from "#imports";
-import { resolveChartColor, applyFootnotes, SUPERSCRIPTS } from "../../helpers";
-import { getChartTypeRuntime, getDefaultTypeOptions } from "../../chartTypes";
-import { COLORS } from "#blokkli-build/charts-config";
-const ApexChart = import.meta.client ? defineAsyncComponent(() => import("vue3-apexcharts")) : void 0;
+import { computed, inject, ref, useAppConfig } from "#imports";
+import { applyFootnotes, SUPERSCRIPTS } from "../../helpers";
+import { detectDateFormat, formatDateCategory } from "../../helpers/dateFormat";
+import { INJECT_CHART_PREVIEW_DYNAMIC_DATA } from "../../helpers/previewInjection";
+import { chartTypeComponents } from "#blokkli-build/charts-components";
+import {
+  INJECT_IS_EDITING,
+  INJECT_PROVIDER_CONTEXT
+} from "#blokkli/helpers/injections";
 const props = defineProps({
   title: { type: String, required: true },
   categories: { type: Array, required: true },
   series: { type: Array, required: true },
   categoryColors: { type: Array, required: true },
   footnotes: { type: Array, required: true },
-  type: { type: null, required: true },
-  typeOptions: { type: Object, required: false }
+  numberFormat: { type: Object, required: false },
+  dateFormat: { type: Object, required: false },
+  translations: { type: Object, required: false },
+  dataSource: { type: Object, required: false },
+  advancedConfig: { type: Object, required: false },
+  type: { type: String, required: true },
+  typeOptions: { type: Object, required: false },
+  languageOverride: { type: String, required: false },
+  dynamicData: { type: [Object, null], required: false }
 });
-const rootEl = useTemplateRef("rootEl");
-const chartDef = computed(
-  () => import.meta.client ? getChartTypeRuntime(props.type) : void 0
+const isEditing = inject(INJECT_IS_EDITING, false);
+const appConfig = useAppConfig();
+const providerEntity = inject(INJECT_PROVIDER_CONTEXT, null);
+const previewDynamicData = inject(INJECT_CHART_PREVIEW_DYNAMIC_DATA, null);
+const currentLanguage = computed(
+  () => props.languageOverride ?? providerEntity?.value.language ?? ""
 );
-function superscriptFor(n) {
-  if (import.meta.server) {
-    return "";
-  }
-  return String(n).split("").map((d) => SUPERSCRIPTS[d] || d).join("");
-}
-function deepMerge(target, source) {
-  const result = { ...target };
-  for (const key of Object.keys(source)) {
-    if (result[key] && typeof result[key] === "object" && !Array.isArray(result[key]) && typeof source[key] === "object" && !Array.isArray(source[key])) {
-      result[key] = deepMerge(result[key], source[key]);
-    } else {
-      result[key] = source[key];
-    }
-  }
-  return result;
-}
-const resolvedColors = computed(() => {
-  if (import.meta.server) {
-    return [];
-  }
-  const def = chartDef.value;
-  if (!def) return [];
-  if (def.hasCategoryColors) {
-    return props.categoryColors.map(
-      (id) => resolveChartColor(id, COLORS, rootEl.value)
-    );
-  }
-  if (def.hasSeriesColors) {
-    return props.series.map(
-      (s) => resolveChartColor(s.color, COLORS, rootEl.value)
-    );
+const colorPalette = computed(() => {
+  const map = appConfig.blokkli?.colorOptions;
+  if (!map) return [];
+  return Object.keys(map).map((id) => ({ id, hex: map[id] }));
+});
+const hasDynamicSource = computed(() => !!props.dataSource);
+const effectiveDynamicPayload = computed(() => {
+  if (props.dynamicData !== void 0 && props.dynamicData !== null) {
+    return props.dynamicData;
   }
-  return [];
+  return previewDynamicData?.value ?? null;
 });
-const chartOptions = computed(() => {
-  if (import.meta.server) {
-    return {};
+const effectiveData = computed(() => {
+  if (hasDynamicSource.value) {
+    const payload = effectiveDynamicPayload.value;
+    if (!payload) return null;
+    const overrides = props.dataSource?.seriesOverrides ?? {};
+    const categoryOverrides = props.dataSource?.categoryColorOverrides ?? {};
+    const palette = colorPalette.value;
+    const fallback = palette[0]?.id ?? "";
+    const visibleSeries = payload.series.filter(
+      (s) => overrides[s.name]?.hidden !== true
+    );
+    const series = visibleSeries.map((s, i) => ({
+      name: s.name,
+      color: overrides[s.name]?.color ?? palette[i % Math.max(palette.length, 1)]?.id ?? fallback,
+      data: s.data
+    }));
+    const categoryColors = payload.categories.map((label, i) => {
+      return categoryOverrides[label] ?? palette[i % Math.max(palette.length, 1)]?.id ?? fallback;
+    });
+    return {
+      categories: payload.categories,
+      series,
+      categoryColors
+    };
   }
-  const def = chartDef.value;
-  if (!def) return {};
-  const base = {
-    chart: {
-      toolbar: { show: false }
-    }
+  return {
+    categories: props.categories,
+    series: props.series,
+    categoryColors: props.categoryColors
   };
-  if (resolvedColors.value.length) {
-    base.colors = resolvedColors.value;
-  }
-  if (props.title) {
-    base.title = { text: applyFootnotes(props.title), align: "left" };
+});
+const resolvedTitle = computed(() => {
+  const t = props.translations?.[currentLanguage.value];
+  return t?.title || props.title;
+});
+const resolvedCategories = computed(() => {
+  const data = effectiveData.value;
+  if (!data) return [];
+  if (hasDynamicSource.value) return data.categories;
+  const t = props.translations?.[currentLanguage.value];
+  if (!t?.categories) return data.categories;
+  return data.categories.map((c, i) => t.categories?.[i] || c);
+});
+const resolvedSeries = computed(() => {
+  const data = effectiveData.value;
+  if (!data) return [];
+  if (hasDynamicSource.value) return data.series;
+  const t = props.translations?.[currentLanguage.value];
+  if (!t?.seriesNames) return data.series;
+  return data.series.map((s, i) => ({
+    ...s,
+    name: t.seriesNames?.[i] || s.name
+  }));
+});
+const resolvedFootnotes = computed(() => {
+  const t = props.translations?.[currentLanguage.value];
+  if (!t?.footnotes) return props.footnotes;
+  return props.footnotes.map((f, i) => t.footnotes?.[i] || f);
+});
+const formattedCategories = computed(() => {
+  const cats = resolvedCategories.value;
+  const detected = detectDateFormat(cats);
+  if (!detected) return cats;
+  const locale = props.numberFormat?.locale;
+  return cats.map(
+    (c) => formatDateCategory(c, detected, props.dateFormat, locale)
+  );
+});
+const resolvedNumberFormat = computed(() => {
+  if (!props.numberFormat) return void 0;
+  const t = props.translations?.[currentLanguage.value];
+  if (!t || t.prefix === void 0 && t.suffix === void 0) {
+    return props.numberFormat;
   }
-  const ctx = {
-    title: props.title,
-    categories: props.categories.map(applyFootnotes),
-    series: props.series.map((s) => ({
-      name: applyFootnotes(s.name),
-      color: s.color,
-      data: s.data
-    })),
-    seriesColors: resolvedColors.value,
-    categoryColors: resolvedColors.value,
-    typeOptions: {
-      ...getDefaultTypeOptions(props.type),
-      ...props.typeOptions
-    }
+  return {
+    ...props.numberFormat,
+    prefix: t.prefix || props.numberFormat.prefix,
+    suffix: t.suffix || props.numberFormat.suffix
   };
-  const typeOpts = def.buildChartOptions(ctx);
-  return deepMerge(base, typeOpts);
 });
-const chartSeries = computed(() => {
+function superscriptFor(n) {
   if (import.meta.server) {
-    return [];
+    return "";
   }
-  const def = chartDef.value;
-  if (!def) return [];
-  const ctx = {
-    title: props.title,
-    categories: props.categories.map(applyFootnotes),
-    series: props.series.map((s) => ({
+  return String(n).split("").map((d) => SUPERSCRIPTS[d] || d).join("");
+}
+function resolveHex(id) {
+  const map = appConfig.blokkli?.colorOptions;
+  return map?.[id] || "#888888";
+}
+const typeComponent = computed(
+  () => chartTypeComponents[props.type]
+);
+const renderProps = computed(() => {
+  const data = effectiveData.value;
+  if (!data) return null;
+  return {
+    title: applyFootnotes(resolvedTitle.value),
+    categories: formattedCategories.value.map(applyFootnotes),
+    series: resolvedSeries.value.map((s) => ({
       name: applyFootnotes(s.name),
-      color: s.color,
       data: s.data
     })),
-    seriesColors: resolvedColors.value,
-    categoryColors: resolvedColors.value,
-    typeOptions: {
-      ...getDefaultTypeOptions(props.type),
-      ...props.typeOptions
-    }
+    seriesHexColors: data.series.map((s) => resolveHex(s.color)),
+    categoryHexColors: data.categoryColors.map(resolveHex),
+    typeOptions: props.typeOptions ?? {},
+    numberFormat: resolvedNumberFormat.value,
+    isEditing,
+    advancedConfig: props.advancedConfig?.parsed
+  };
+});
+const typeOptionsBag = computed(
+  () => props.typeOptions ?? {}
+);
+const categoryFilterEnabled = computed(
+  () => typeOptionsBag.value.categoryFilter === true
+);
+const categoryFilterLabel = computed(
+  () => typeOptionsBag.value.categoryFilterLabel ?? ""
+);
+const selectedCategoryIndex = ref(0);
+const clampedSelectedIndex = computed(() => {
+  const max = (renderProps.value?.categories.length ?? 0) - 1;
+  if (max < 0) return -1;
+  return Math.min(Math.max(selectedCategoryIndex.value, 0), max);
+});
+const showCategoryFilter = computed(() => {
+  if (!categoryFilterEnabled.value) return false;
+  const base = renderProps.value;
+  if (!base) return false;
+  return base.categories.length > 1 && base.series.length > 0;
+});
+const finalRenderProps = computed(() => {
+  const base = renderProps.value;
+  if (!base) return null;
+  if (!categoryFilterEnabled.value) return base;
+  const idx = clampedSelectedIndex.value;
+  if (idx < 0) return base;
+  return {
+    ...base,
+    categories: base.series.map((s) => s.name),
+    series: [
+      {
+        name: base.categories[idx] ?? "",
+        data: base.series.map((s) => s.data[idx] ?? 0)
+      }
+    ],
+    // The original series colors become per-bar colors via the
+    // category-color slot — types that natively colour per category
+    // (bar in filter mode, donut, pie) pick them up automatically.
+    categoryHexColors: base.seriesHexColors,
+    seriesHexColors: [base.seriesHexColors[0] ?? "#888888"]
   };
-  return def.buildSeries(ctx);
 });
 </script>