@blokkli/editor 2.0.0-alpha.34 → 2.0.0-alpha.36

package/dist/modules/charts/runtime/blokkli/tools/update_chart/index.js

@@ -0,0 +1,101 @@
+import { z } from "zod";
+import { defineBlokkliAgentTool } from "#blokkli/agent/app/composables";
+import { mutationResultSchema } from "#blokkli/agent/app/tools/schemas";
+import {
+  chartTypeEnum,
+  chartColorEnum,
+  chartSeriesSchema,
+  validateChartData
+} from "../chart_schemas.js";
+import { COLORS } from "#blokkli-build/charts-config";
+import { getDefaultChartData } from "#blokkli/charts/types";
+import { fragmentBlockBundle } from "#blokkli-build/config";
+const paramsSchema = z.object({
+  uuid: z.string().describe("UUID of the chart paragraph to update"),
+  title: z.string().optional().describe("Chart title"),
+  type: chartTypeEnum.optional().describe("Chart type"),
+  categories: z.array(z.string()).min(1).optional().describe(
+    "Category labels (x-axis or slice names). Replaces all existing categories."
+  ),
+  series: z.array(chartSeriesSchema).min(1).optional().describe("Data series. Replaces all existing series."),
+  categoryColors: z.array(chartColorEnum).optional().describe(
+    "Color IDs per category (for pie/donut/radialBar). Auto-assigned if omitted."
+  ),
+  footnotes: z.array(z.string()).optional().describe(
+    "Footnote texts. Reference in categories/series names as {1}, {2}, etc."
+  ),
+  typeOptions: z.record(z.string(), z.union([z.string(), z.boolean(), z.number()])).optional().describe(
+    "Type-specific rendering options. Use get_chart_type_options to see available keys."
+  )
+});
+export default defineBlokkliAgentTool({
+  name: "update_chart",
+  description: "Update an existing chart. Provide only the properties you want to change \u2014 they will be merged with the current chart data. Arrays (series, categories, footnotes) are replaced entirely when provided, not merged element-by-element.",
+  category: "mutation",
+  prunedSummary: (r) => r.success ? "updated chart" : "rejected",
+  modes: ["editing"],
+  lazy: true,
+  label($t) {
+    return $t("aiAgentUpdateChartRunning", "Updating chart...");
+  },
+  paramsSchema,
+  resultSchema: mutationResultSchema,
+  requiredAdapterMethods: ["updateOptions"],
+  execute(ctx, params) {
+    const { blocks, state } = ctx.app;
+    const block = blocks.getBlock(params.uuid);
+    if (!block) {
+      return { error: `Paragraph not found: ${params.uuid}` };
+    }
+    if (block.bundle !== fragmentBlockBundle) {
+      return {
+        error: `Paragraph "${params.uuid}" is a "${block.bundle}", not a "${fragmentBlockBundle}".`
+      };
+    }
+    if (block.fragment?.name !== "blokkli_chart") {
+      return {
+        error: `Fragment "${params.uuid}" is a "${block.fragment?.name}", not a "blokkli_chart".`
+      };
+    }
+    let current;
+    const item = state.getFieldListItem(params.uuid);
+    const rawData = item?.options?.data;
+    if (rawData) {
+      try {
+        current = JSON.parse(rawData);
+      } catch {
+        current = getDefaultChartData(COLORS);
+      }
+    } else {
+      current = getDefaultChartData(COLORS);
+    }
+    const merged = {
+      title: params.title !== void 0 ? params.title : current.title,
+      type: params.type !== void 0 ? params.type : current.type,
+      categories: params.categories !== void 0 ? params.categories : current.categories,
+      series: params.series !== void 0 ? params.series.map((s) => ({
+        name: s.name,
+        color: s.color || "",
+        data: s.data
+      })) : current.series,
+      categoryColors: params.categoryColors !== void 0 ? params.categoryColors : current.categoryColors,
+      footnotes: params.footnotes !== void 0 ? params.footnotes : current.footnotes,
+      typeOptions: params.typeOptions !== void 0 ? params.typeOptions : current.typeOptions || {}
+    };
+    const result = validateChartData(merged, COLORS);
+    if ("error" in result) return result;
+    const { $t } = ctx.app;
+    return {
+      type: "options",
+      label: $t("aiAgentUpdateChartDone", "Updated chart"),
+      affectedUuids: [params.uuid],
+      apply: (adapter) => adapter.updateOptions([
+        {
+          uuid: params.uuid,
+          key: "data",
+          value: JSON.stringify(result.data)
+        }
+      ])
+    };
+  }
+});

package/dist/modules/charts/runtime/chartTypes/area.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./types.js").ChartTypeFactory;
+export default _default;

package/dist/modules/charts/runtime/chartTypes/area.js

@@ -0,0 +1,68 @@
+import { defineChartType } from "./define.js";
+import {
+  xAxisOptions,
+  buildXAxisLabelOptions,
+  dataLabelsOptions,
+  buildDataLabelsOptions,
+  legendOptions,
+  buildLegendOptions,
+  gridOptions,
+  buildGridOptions,
+  strokeWidthOptions,
+  buildStrokeWidthOptions,
+  mergeShared
+} from "./shared.js";
+export default defineChartType(($t) => {
+  const shared = mergeShared(
+    xAxisOptions($t),
+    dataLabelsOptions($t),
+    legendOptions($t),
+    gridOptions($t),
+    strokeWidthOptions($t)
+  );
+  return {
+    id: "area",
+    hasMultipleSeries: true,
+    hasSeriesColors: true,
+    hasCategoryColors: false,
+    buildChartOptions(ctx) {
+      const strokeWidth = buildStrokeWidthOptions(ctx.typeOptions);
+      return {
+        stroke: {
+          curve: ctx.typeOptions.curved ? "smooth" : "straight",
+          ...strokeWidth.stroke
+        },
+        markers: { size: ctx.typeOptions.markers ? 5 : 0 },
+        xaxis: {
+          categories: ctx.categories,
+          ...buildXAxisLabelOptions(ctx.typeOptions)
+        },
+        ...buildDataLabelsOptions(ctx.typeOptions),
+        ...buildLegendOptions(ctx.typeOptions),
+        ...buildGridOptions(ctx.typeOptions)
+      };
+    },
+    buildSeries(ctx) {
+      return ctx.series.map((s) => ({ name: s.name, data: s.data }));
+    },
+    editor: {
+      label: $t("chartsTypeArea", "Area"),
+      icon: "bk_mdi_area_chart",
+      options: {
+        curved: {
+          type: "checkbox",
+          label: $t("chartsAreaCurved", "Smooth curves"),
+          default: false,
+          group: "display"
+        },
+        markers: {
+          type: "checkbox",
+          label: $t("chartsAreaMarkers", "Show markers"),
+          default: false,
+          group: "display"
+        },
+        ...shared.options
+      }
+    }
+  };
+});

package/dist/modules/charts/runtime/chartTypes/bar.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./types.js").ChartTypeFactory;
+export default _default;

package/dist/modules/charts/runtime/chartTypes/bar.js

@@ -0,0 +1,76 @@
+import { defineChartType } from "./define.js";
+import {
+  xAxisOptions,
+  buildXAxisLabelOptions,
+  dataLabelsOptions,
+  buildDataLabelsOptions,
+  legendOptions,
+  buildLegendOptions,
+  gridOptions,
+  buildGridOptions,
+  mergeShared
+} from "./shared.js";
+export default defineChartType(($t) => {
+  const shared = mergeShared(
+    xAxisOptions($t),
+    dataLabelsOptions($t),
+    legendOptions($t),
+    gridOptions($t)
+  );
+  return {
+    id: "bar",
+    hasMultipleSeries: true,
+    hasSeriesColors: true,
+    hasCategoryColors: false,
+    buildChartOptions(ctx) {
+      return {
+        chart: { stacked: !!ctx.typeOptions.stacked },
+        plotOptions: {
+          bar: {
+            horizontal: !!ctx.typeOptions.horizontal,
+            borderRadius: Number(ctx.typeOptions.borderRadius) || 0
+          }
+        },
+        xaxis: {
+          categories: ctx.categories,
+          ...buildXAxisLabelOptions(ctx.typeOptions)
+        },
+        ...buildDataLabelsOptions(ctx.typeOptions),
+        ...buildLegendOptions(ctx.typeOptions),
+        ...buildGridOptions(ctx.typeOptions)
+      };
+    },
+    buildSeries(ctx) {
+      return ctx.series.map((s) => ({ name: s.name, data: s.data }));
+    },
+    editor: {
+      label: $t("chartsTypeBar", "Bar"),
+      icon: "bk_mdi_bar_chart",
+      options: {
+        stacked: {
+          type: "checkbox",
+          label: $t("chartsBarStacked", "Stacked"),
+          default: false,
+          group: "display"
+        },
+        horizontal: {
+          type: "checkbox",
+          label: $t("chartsBarHorizontal", "Horizontal"),
+          default: false,
+          group: "display"
+        },
+        borderRadius: {
+          type: "radios",
+          label: $t("chartsBorderRadius", "Corner radius"),
+          default: "0",
+          options: {
+            "0": $t("chartsBorderRadiusNone", "None"),
+            "4": $t("chartsBorderRadiusSmall", "Small"),
+            "8": $t("chartsBorderRadiusLarge", "Large")
+          }
+        },
+        ...shared.options
+      }
+    }
+  };
+});

package/dist/modules/charts/runtime/chartTypes/define.d.ts

@@ -0,0 +1,2 @@
+import type { ChartTypeFactory } from './types.js';
+export declare function defineChartType(factory: ChartTypeFactory): ChartTypeFactory;

package/dist/modules/charts/runtime/chartTypes/define.js

@@ -0,0 +1,3 @@
+export function defineChartType(factory) {
+  return factory;
+}

package/dist/modules/charts/runtime/chartTypes/donut.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./types.js").ChartTypeFactory;
+export default _default;

package/dist/modules/charts/runtime/chartTypes/donut.js

@@ -0,0 +1,45 @@
+import { defineChartType } from "./define.js";
+export default defineChartType(($t) => ({
+  id: "donut",
+  hasMultipleSeries: false,
+  hasSeriesColors: false,
+  hasCategoryColors: true,
+  buildChartOptions(ctx) {
+    const show = !!ctx.typeOptions.showTotal;
+    return {
+      labels: ctx.categories,
+      dataLabels: { enabled: !!ctx.typeOptions.showLabels },
+      plotOptions: {
+        pie: {
+          donut: {
+            labels: {
+              show,
+              total: { show }
+            }
+          }
+        }
+      }
+    };
+  },
+  buildSeries(ctx) {
+    return ctx.series[0]?.data || [];
+  },
+  editor: {
+    label: $t("chartsTypeDonut", "Donut"),
+    icon: "bk_mdi_donut_large",
+    options: {
+      showTotal: {
+        type: "checkbox",
+        label: $t("chartsDonutShowTotal", "Show total"),
+        default: false,
+        group: "display"
+      },
+      showLabels: {
+        type: "checkbox",
+        label: $t("chartsDonutShowLabels", "Show labels"),
+        default: true,
+        group: "labels"
+      }
+    }
+  }
+}));

package/dist/modules/charts/runtime/chartTypes/heatmap.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./types.js").ChartTypeFactory;
+export default _default;

package/dist/modules/charts/runtime/chartTypes/heatmap.js

@@ -0,0 +1,54 @@
+import { defineChartType } from "./define.js";
+import {
+  xAxisOptions,
+  buildXAxisLabelOptions,
+  legendOptions,
+  buildLegendOptions,
+  gridOptions,
+  buildGridOptions,
+  mergeShared
+} from "./shared.js";
+export default defineChartType(($t) => {
+  const shared = mergeShared(
+    xAxisOptions($t),
+    legendOptions($t),
+    gridOptions($t)
+  );
+  return {
+    id: "heatmap",
+    hasMultipleSeries: true,
+    hasSeriesColors: false,
+    hasCategoryColors: false,
+    buildChartOptions(ctx) {
+      return {
+        dataLabels: { enabled: true },
+        plotOptions: {
+          heatmap: {
+            colorScale: { ranges: [] }
+          }
+        },
+        xaxis: {
+          ...buildXAxisLabelOptions(ctx.typeOptions)
+        },
+        ...buildLegendOptions(ctx.typeOptions),
+        ...buildGridOptions(ctx.typeOptions)
+      };
+    },
+    buildSeries(ctx) {
+      return ctx.series.map((s) => ({
+        name: s.name,
+        data: s.data.map((value, i) => ({
+          x: ctx.categories[i] || "",
+          y: value
+        }))
+      }));
+    },
+    editor: {
+      label: $t("chartsTypeHeatmap", "Heatmap"),
+      icon: "bk_mdi_grid_view",
+      options: {
+        ...shared.options
+      }
+    }
+  };
+});

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

@@ -0,0 +1,21 @@
+import type { TranslateFunction, ChartTypeDefinition } from './types.js';
+/**
+ * Get a chart type definition using fallback labels (no real translations).
+ * Used by ChartRenderer which runs in both edit mode and production.
+ */
+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>;
+export type { ChartTypeDefinition, ChartBuildContext, TranslateFunction, } from './types.js';

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

@@ -0,0 +1,47 @@
+import barFactory from "./bar.js";
+import lineFactory from "./line.js";
+import areaFactory from "./area.js";
+import pieFactory from "./pie.js";
+import donutFactory from "./donut.js";
+import heatmapFactory from "./heatmap.js";
+import radialBarFactory from "./radialBar.js";
+import radarFactory from "./radar.js";
+const factories = [
+  barFactory,
+  lineFactory,
+  pieFactory,
+  areaFactory,
+  donutFactory,
+  heatmapFactory,
+  radialBarFactory,
+  radarFactory
+];
+const noopT = (_key, fallback) => fallback;
+const runtimeCache = {};
+function ensureRuntimeCache() {
+  if (Object.keys(runtimeCache).length === 0) {
+    for (const factory of factories) {
+      const def = factory(noopT);
+      runtimeCache[def.id] = def;
+    }
+  }
+}
+export function getChartTypeRuntime(id) {
+  ensureRuntimeCache();
+  return runtimeCache[id];
+}
+export function getChartTypes($t) {
+  return factories.map((factory) => factory($t));
+}
+export function getChartType(id, $t) {
+  return getChartTypes($t).find((def) => def.id === id);
+}
+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/chartTypes/line.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./types.js").ChartTypeFactory;
+export default _default;

package/dist/modules/charts/runtime/chartTypes/line.js

@@ -0,0 +1,68 @@
+import { defineChartType } from "./define.js";
+import {
+  xAxisOptions,
+  buildXAxisLabelOptions,
+  dataLabelsOptions,
+  buildDataLabelsOptions,
+  legendOptions,
+  buildLegendOptions,
+  gridOptions,
+  buildGridOptions,
+  strokeWidthOptions,
+  buildStrokeWidthOptions,
+  mergeShared
+} from "./shared.js";
+export default defineChartType(($t) => {
+  const shared = mergeShared(
+    xAxisOptions($t),
+    dataLabelsOptions($t),
+    legendOptions($t),
+    gridOptions($t),
+    strokeWidthOptions($t)
+  );
+  return {
+    id: "line",
+    hasMultipleSeries: true,
+    hasSeriesColors: true,
+    hasCategoryColors: false,
+    buildChartOptions(ctx) {
+      const strokeWidth = buildStrokeWidthOptions(ctx.typeOptions);
+      return {
+        stroke: {
+          curve: ctx.typeOptions.curved ? "smooth" : "straight",
+          ...strokeWidth.stroke
+        },
+        markers: { size: ctx.typeOptions.markers ? 5 : 0 },
+        xaxis: {
+          categories: ctx.categories,
+          ...buildXAxisLabelOptions(ctx.typeOptions)
+        },
+        ...buildDataLabelsOptions(ctx.typeOptions),
+        ...buildLegendOptions(ctx.typeOptions),
+        ...buildGridOptions(ctx.typeOptions)
+      };
+    },
+    buildSeries(ctx) {
+      return ctx.series.map((s) => ({ name: s.name, data: s.data }));
+    },
+    editor: {
+      label: $t("chartsTypeLine", "Line"),
+      icon: "bk_mdi_show_chart",
+      options: {
+        curved: {
+          type: "checkbox",
+          label: $t("chartsLineCurved", "Smooth curves"),
+          default: false,
+          group: "display"
+        },
+        markers: {
+          type: "checkbox",
+          label: $t("chartsLineMarkers", "Show markers"),
+          default: false,
+          group: "display"
+        },
+        ...shared.options
+      }
+    }
+  };
+});

package/dist/modules/charts/runtime/chartTypes/pie.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./types.js").ChartTypeFactory;
+export default _default;

package/dist/modules/charts/runtime/chartTypes/pie.js

@@ -0,0 +1,28 @@
+import { defineChartType } from "./define.js";
+export default defineChartType(($t) => ({
+  id: "pie",
+  hasMultipleSeries: false,
+  hasSeriesColors: false,
+  hasCategoryColors: true,
+  buildChartOptions(ctx) {
+    return {
+      labels: ctx.categories,
+      dataLabels: { enabled: !!ctx.typeOptions.showLabels }
+    };
+  },
+  buildSeries(ctx) {
+    return ctx.series[0]?.data || [];
+  },
+  editor: {
+    label: $t("chartsTypePie", "Pie"),
+    icon: "bk_mdi_pie_chart",
+    options: {
+      showLabels: {
+        type: "checkbox",
+        label: $t("chartsPieShowLabels", "Show labels"),
+        default: true,
+        group: "labels"
+      }
+    }
+  }
+}));

package/dist/modules/charts/runtime/chartTypes/radar.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./types.js").ChartTypeFactory;
+export default _default;

package/dist/modules/charts/runtime/chartTypes/radar.js

@@ -0,0 +1,52 @@
+import { defineChartType } from "./define.js";
+import {
+  dataLabelsOptions,
+  buildDataLabelsOptions,
+  legendOptions,
+  buildLegendOptions,
+  mergeShared
+} from "./shared.js";
+export default defineChartType(($t) => {
+  const shared = mergeShared(dataLabelsOptions($t), legendOptions($t));
+  return {
+    id: "radar",
+    hasMultipleSeries: true,
+    hasSeriesColors: true,
+    hasCategoryColors: false,
+    buildChartOptions(ctx) {
+      return {
+        xaxis: { categories: ctx.categories },
+        markers: { size: ctx.typeOptions.markers ? 5 : 0 },
+        fill: { opacity: Number(ctx.typeOptions.fillOpacity) || 0.2 },
+        ...buildDataLabelsOptions(ctx.typeOptions),
+        ...buildLegendOptions(ctx.typeOptions)
+      };
+    },
+    buildSeries(ctx) {
+      return ctx.series.map((s) => ({ name: s.name, data: s.data }));
+    },
+    editor: {
+      label: $t("chartsTypeRadar", "Radar"),
+      icon: "bk_mdi_radar",
+      options: {
+        markers: {
+          type: "checkbox",
+          label: $t("chartsRadarMarkers", "Show markers"),
+          default: false,
+          group: "display"
+        },
+        fillOpacity: {
+          type: "radios",
+          label: $t("chartsRadarFillOpacity", "Fill opacity"),
+          default: "0.2",
+          options: {
+            "0.2": $t("chartsOpacityTransparent", "Transparent"),
+            "0.4": $t("chartsOpacityLight", "Light"),
+            "0.8": $t("chartsOpacitySolid", "Solid")
+          }
+        },
+        ...shared.options
+      }
+    }
+  };
+});

package/dist/modules/charts/runtime/chartTypes/radialBar.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("./types.js").ChartTypeFactory;
+export default _default;

package/dist/modules/charts/runtime/chartTypes/radialBar.js

@@ -0,0 +1,44 @@
+import { defineChartType } from "./define.js";
+export default defineChartType(($t) => ({
+  id: "radialBar",
+  hasMultipleSeries: false,
+  hasSeriesColors: false,
+  hasCategoryColors: true,
+  buildChartOptions(ctx) {
+    const showLabels = !!ctx.typeOptions.showLabels;
+    const showTotal = !!ctx.typeOptions.showTotal;
+    return {
+      labels: ctx.categories,
+      plotOptions: {
+        radialBar: {
+          dataLabels: {
+            name: { show: showLabels },
+            value: { show: showLabels },
+            total: { show: showTotal }
+          }
+        }
+      }
+    };
+  },
+  buildSeries(ctx) {
+    return ctx.series[0]?.data || [];
+  },
+  editor: {
+    label: $t("chartsTypeRadialBar", "Radial Bar"),
+    icon: "bk_mdi_track_changes",
+    options: {
+      showLabels: {
+        type: "checkbox",
+        label: $t("chartsRadialBarShowLabels", "Show labels"),
+        default: true,
+        group: "labels"
+      },
+      showTotal: {
+        type: "checkbox",
+        label: $t("chartsRadialBarShowTotal", "Show total"),
+        default: false,
+        group: "display"
+      }
+    }
+  }
+}));