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

package/dist/modules/charts/runtime/blokkli/chart-types/radar/illustration.vue

@@ -0,0 +1,60 @@
+<template>
+  <svg viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
+    <polygon
+      :points="toPoints(innerGrid)"
+      fill="none"
+      stroke-width="1"
+      class="_bk_stroke-accent-200"
+    />
+    <polygon
+      :points="toPoints(outerGrid)"
+      fill="none"
+      stroke-width="1.5"
+      class="_bk_stroke-accent-400"
+    />
+    <line
+      v-for="([x, y], i) in outerGrid"
+      :key="i"
+      x1="60"
+      y1="40"
+      :x2="x"
+      :y2="y"
+      stroke-width="1"
+      class="_bk_stroke-accent-300"
+    />
+    <polygon
+      :points="toPoints(data)"
+      fill-opacity="0.45"
+      stroke-width="2"
+      stroke-linejoin="round"
+      class="_bk_fill-accent-500 _bk_stroke-accent-800"
+    />
+  </svg>
+</template>
+
+<script setup>
+const outerGrid = [
+  [60, 12],
+  [86.6, 31.35],
+  [76.5, 62.65],
+  [43.5, 62.65],
+  [33.4, 31.35]
+];
+const innerGrid = [
+  [60, 26],
+  [78.6, 32.8],
+  [71.5, 53.2],
+  [48.5, 53.2],
+  [41.4, 32.8]
+];
+const data = [
+  [60, 18],
+  [77.1, 34.4],
+  [74.1, 59.4],
+  [52.9, 49.7],
+  [41, 33.8]
+];
+function toPoints(points) {
+  return points.map((p) => p.join(",")).join(" ");
+}
+</script>

package/dist/modules/charts/runtime/blokkli/chart-types/radar/illustration.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/blokkli/chart-types/radar/render.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<any, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/blokkli/chart-types/radar/render.vue

@@ -0,0 +1,95 @@
+<template>
+  <VChart :option="option" autoresize style="height: 550px; width: 100%" />
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import VChart from "vue-echarts";
+import { use } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import { RadarChart } from "echarts/charts";
+import {
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent
+} from "echarts/components";
+import { legendPositionToEcharts } from "../../../helpers/echarts";
+import { createNumberFormatter } from "../../../helpers/numberFormat";
+use([
+  CanvasRenderer,
+  RadarChart,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent
+]);
+const props = defineProps({
+  title: { type: String, required: true },
+  categories: { type: Array, required: true },
+  series: { type: Array, required: true },
+  seriesHexColors: { type: Array, required: true },
+  categoryHexColors: { type: Array, required: true },
+  typeOptions: { type: Object, required: true },
+  numberFormat: { type: Object, required: false },
+  isEditing: { type: Boolean, required: true },
+  advancedConfig: { type: Object, required: false }
+});
+const opts = computed(() => {
+  const t = props.typeOptions;
+  return {
+    markers: t.markers ?? false,
+    fillOpacity: Number(t.fillOpacity ?? 0.2) || 0.2,
+    dataLabels: t.dataLabels ?? false,
+    legendPosition: t.legendPosition ?? "bottom"
+  };
+});
+const option = computed(() => {
+  const o = opts.value;
+  const valueFormatter = createNumberFormatter(props.numberFormat);
+  const indicators = props.categories.map((name, i) => {
+    let max = 0;
+    for (const s of props.series) {
+      const v = s.data[i] ?? 0;
+      if (v > max) max = v;
+    }
+    return { name, max: max > 0 ? max : 1 };
+  });
+  return {
+    title: props.title ? { text: props.title, left: "left" } : void 0,
+    animation: !props.isEditing,
+    tooltip: {
+      trigger: "item",
+      valueFormatter: (v) => valueFormatter(v)
+    },
+    legend: {
+      ...legendPositionToEcharts(o.legendPosition),
+      data: props.series.map((s) => s.name)
+    },
+    radar: {
+      indicator: indicators,
+      center: ["50%", "52%"],
+      radius: "65%"
+    },
+    series: [
+      {
+        type: "radar",
+        symbol: o.markers ? "circle" : "none",
+        symbolSize: 5,
+        data: props.series.map((s, i) => ({
+          name: s.name,
+          value: s.data,
+          itemStyle: { color: props.seriesHexColors[i] },
+          lineStyle: { color: props.seriesHexColors[i] },
+          areaStyle: {
+            color: props.seriesHexColors[i],
+            opacity: o.fillOpacity
+          },
+          label: {
+            show: o.dataLabels,
+            formatter: (p) => valueFormatter(p.value)
+          }
+        }))
+      }
+    ]
+  };
+});
+</script>

package/dist/modules/charts/runtime/blokkli/chart-types/radar/render.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<any, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/blokkli/chart-types/radialBar/definition.d.ts

@@ -0,0 +1,6 @@
+import type { CategoryFilterTypeOptions } from '#blokkli/charts/types';
+export type TypeOptions = {
+    showLabels: boolean;
+} & CategoryFilterTypeOptions;
+declare const _default: any;
+export default _default;

package/dist/modules/charts/runtime/blokkli/chart-types/radialBar/definition.js

@@ -0,0 +1,29 @@
+import { defineChartType } from "#blokkli/charts/definition";
+import {
+  categoryFilterOptions,
+  mergeShared
+} from "#blokkli/charts/definition/options";
+export default defineChartType("radialBar", ($t) => {
+  const shared = mergeShared(categoryFilterOptions($t));
+  return {
+    hasSeriesColors: false,
+    hasCategoryColors: true,
+    editor: {
+      label: $t("chartsTypeRadialBar", "Radial Bar"),
+      description: $t(
+        "chartsTypeRadialBarDescription",
+        "Shows values as concentric circular bars on a polar grid \u2014 suited to KPIs and progress indicators."
+      ),
+      icon: "bk_mdi_track_changes",
+      options: {
+        showLabels: {
+          type: "checkbox",
+          label: $t("showLabels", "Show labels"),
+          default: true,
+          group: "labels"
+        },
+        ...shared.options
+      }
+    }
+  };
+});

package/dist/modules/charts/runtime/blokkli/chart-types/radialBar/illustration.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/blokkli/chart-types/radialBar/illustration.vue

@@ -0,0 +1,32 @@
+<template>
+  <svg viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
+    <circle
+      v-for="r in [12, 20, 28]"
+      :key="r"
+      cx="60"
+      cy="40"
+      :r="r"
+      fill="none"
+      stroke-width="4"
+      class="_bk_stroke-accent-200"
+    />
+    <path
+      v-for="(a, i) in arcs"
+      :key="i"
+      :d="a.d"
+      fill="none"
+      stroke-width="4"
+      stroke-linecap="round"
+      :class="a.color"
+    />
+  </svg>
+</template>
+
+<script setup>
+import { tw } from "#blokkli/helpers/tw";
+const arcs = [
+  { d: "M 60 28 A 12 12 0 1 1 48 40", color: tw("_bk_stroke-accent-800") },
+  { d: "M 60 20 A 20 20 0 0 1 60 60", color: tw("_bk_stroke-accent-500") },
+  { d: "M 60 12 A 28 28 0 0 1 88 40", color: tw("_bk_stroke-accent-300") }
+];
+</script>

package/dist/modules/charts/runtime/blokkli/chart-types/radialBar/illustration.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/blokkli/chart-types/radialBar/render.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<any, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/blokkli/chart-types/radialBar/render.vue

@@ -0,0 +1,77 @@
+<template>
+  <VChart :option="option" autoresize style="height: 550px; width: 100%" />
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import VChart from "vue-echarts";
+import { use } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import { BarChart } from "echarts/charts";
+import {
+  PolarComponent,
+  TooltipComponent,
+  TitleComponent
+} from "echarts/components";
+import { createNumberFormatter } from "../../../helpers/numberFormat";
+use([
+  CanvasRenderer,
+  BarChart,
+  PolarComponent,
+  TooltipComponent,
+  TitleComponent
+]);
+const props = defineProps({
+  title: { type: String, required: true },
+  categories: { type: Array, required: true },
+  series: { type: Array, required: true },
+  seriesHexColors: { type: Array, required: true },
+  categoryHexColors: { type: Array, required: true },
+  typeOptions: { type: Object, required: true },
+  numberFormat: { type: Object, required: false },
+  isEditing: { type: Boolean, required: true },
+  advancedConfig: { type: Object, required: false }
+});
+const option = computed(() => {
+  const t = props.typeOptions;
+  const showLabels = t.showLabels ?? true;
+  const values = props.series[0]?.data ?? [];
+  const valueFormatter = createNumberFormatter(props.numberFormat);
+  const max = Math.max(0, ...values.map((v) => v ?? 0));
+  const data = props.categories.map((name, i) => ({
+    name,
+    value: values[i] ?? 0,
+    itemStyle: { color: props.categoryHexColors[i] }
+  }));
+  return {
+    title: props.title ? { text: props.title, left: "left" } : void 0,
+    animation: !props.isEditing,
+    polar: { radius: ["20%", "70%"] },
+    tooltip: {
+      trigger: "item",
+      formatter: (p) => `${p.name}: ${valueFormatter(p.value)}`
+    },
+    angleAxis: { max: max || 1, startAngle: 90, show: false },
+    radiusAxis: {
+      type: "category",
+      data: props.categories,
+      axisLabel: { show: showLabels },
+      axisLine: { show: false },
+      axisTick: { show: false }
+    },
+    series: [
+      {
+        type: "bar",
+        coordinateSystem: "polar",
+        data,
+        roundCap: true,
+        label: {
+          show: showLabels,
+          position: "middle",
+          formatter: (p) => valueFormatter(p.value)
+        }
+      }
+    ]
+  };
+});
+</script>

package/dist/modules/charts/runtime/blokkli/chart-types/radialBar/render.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<any, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/blokkli/skills/charts.js

@@ -7,7 +7,10 @@ export default defineBlokkliAgentSkill({
     "create_chart",
     "update_chart",
     "get_chart_data",
-    "get_chart_type_options"
+    "get_chart_type_options",
+    "create_advanced_chart",
+    "update_advanced_chart",
+    "get_advanced_chart_config"
   ],
   getContents: () => `
 # Charts
@@ -37,15 +40,46 @@ A "chart block" is any block whose definition has a JSON option with \`dataType:
 
 ## Chart types
 
-bar, line, pie, area, donut, heatmap, radialBar, radar.
+bar, line, pie, area, donut, heatmap, radialBar, radar, agePyramid.
 
 - pie, donut, radialBar: Single-series charts where each category gets its own color (categoryColors).
 - bar, line, area, heatmap, radar: Multi-series charts where each series has its own color.
+- agePyramid: Back-to-back horizontal bars by category. The \`splitIndex\` typeOption picks which series index starts on the right; series before it render on the left. Defaults to half the number of series.
 
 Each chart type has different options!
 
+## Advanced charts (raw ECharts)
+
+There is also an \`advanced\` chart type that stores a raw ECharts option object instead of structured categories/series. It is **not** in the type enum used by \`create_chart\` / \`update_chart\` / \`get_chart_data\` \u2014 use the dedicated tools:
+
+- **create_advanced_chart**: Create a new advanced chart from a full ECharts option object.
+- **update_advanced_chart**: Replace the ECharts option on an existing advanced chart. The config is a full replacement, not a partial merge \u2014 call \`get_advanced_chart_config\` first if you need to read-then-edit. Refuses if the chart is structured.
+- **get_advanced_chart_config**: Read the current ECharts option. Refuses if the chart is structured.
+
+Use the advanced tools only when the user needs a chart type or layout not covered by the structured types. The agent **cannot** convert between structured and advanced \u2014 to swap, delete the chart and create a new one.
+
 ## Colors
 
 Series colors and category colors use color IDs defined in the project configuration. They are auto-assigned if omitted. The valid color IDs are part of the tool schemas (enum values).
+
+## Dynamic data sources
+
+A chart can be bound to a dynamic data source (e.g. a backend-provided dataset). When \`get_chart_data\` returns a \`dataSource\` field, the chart's inline \`categories\` and \`series\` are ignored at render time and replaced with the live data. In this state:
+
+- \`update_chart\` refuses changes to \`categories\` or \`series\` and returns an error \u2014 the user has to unbind the data source in the editor first.
+- Other fields (title, type, typeOptions, footnotes, numberFormat, dateFormat) remain editable.
+
+## Filterable categories
+
+Many chart types (bar, line, area, heatmap, radar, pie, donut, radialBar) support a \`categoryFilter\` typeOption. When enabled, the chart wrapper renders a category picker so viewers can show one category at a time. The companion \`categoryFilterLabel\` typeOption is a string shown next to the picker.
+
+## Formatting
+
+- \`numberFormat\`: Controls axes, data labels and tooltips. Fields: \`locale\` (BCP-47), \`decimals\` (0-4), \`prefix\`, \`suffix\`, \`notation\` ('standard' | 'compact').
+- \`dateFormat.style\`: Applied to category labels that look like dates. Use 'auto' to let the chart pick. Locale is reused from \`numberFormat.locale\`.
+
+## Nullable typeOptions
+
+Some typeOptions (e.g. \`yaxisMin\`, agePyramid's \`splitIndex\`) can be cleared back to "auto" by passing \`null\` for that key in \`typeOptions\`.
 `
 });

package/dist/modules/charts/runtime/blokkli/tools/chart_schemas.d.ts

@@ -1,15 +1,9 @@
 import { z } from 'zod';
-import type { BlokkliChartData, ChartColor } from '#blokkli/charts/types';
+import type { BlokkliChartData } from '#blokkli/charts/types';
 import type { McpToolContext } from '#blokkli/agent/app/types';
+import type { ColorOption } from '#blokkli/editor/types/config';
 export declare const chartTypeEnum: z.ZodEnum<{
-    bar: "bar";
-    line: "line";
-    area: "area";
-    pie: "pie";
-    donut: "donut";
-    heatmap: "heatmap";
-    radialBar: "radialBar";
-    radar: "radar";
+    [x: string]: string;
 }>;
 export declare const chartColorEnum: z.ZodEnum<{
     [x: string]: string;
@@ -21,17 +15,42 @@ export declare const chartSeriesSchema: z.ZodObject<{
     }>>;
     data: z.ZodArray<z.ZodNumber>;
 }, z.core.$strip>;
+export declare const chartTranslationSchema: z.ZodObject<{
+    title: z.ZodOptional<z.ZodString>;
+    categories: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    seriesNames: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    footnotes: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    prefix: z.ZodOptional<z.ZodString>;
+    suffix: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+export declare const numberFormatSchema: z.ZodObject<{
+    locale: z.ZodOptional<z.ZodString>;
+    decimals: z.ZodOptional<z.ZodNumber>;
+    prefix: z.ZodOptional<z.ZodString>;
+    suffix: z.ZodOptional<z.ZodString>;
+    notation: z.ZodOptional<z.ZodEnum<{
+        standard: "standard";
+        compact: "compact";
+    }>>;
+}, z.core.$strip>;
+export declare const dateFormatSchema: z.ZodObject<{
+    style: z.ZodOptional<z.ZodEnum<{
+        auto: "auto";
+        none: "none";
+        monthYearShort: "monthYearShort";
+        monthYearLong: "monthYearLong";
+        monthOnly: "monthOnly";
+        monthYearNumeric: "monthYearNumeric";
+        iso: "iso";
+        dateShort: "dateShort";
+        dateLong: "dateLong";
+        yearOnly: "yearOnly";
+    }>>;
+}, z.core.$strip>;
 export declare const chartDataSchema: z.ZodObject<{
     title: z.ZodDefault<z.ZodOptional<z.ZodString>>;
     type: z.ZodEnum<{
-        bar: "bar";
-        line: "line";
-        area: "area";
-        pie: "pie";
-        donut: "donut";
-        heatmap: "heatmap";
-        radialBar: "radialBar";
-        radar: "radar";
+        [x: string]: string;
     }>;
     categories: z.ZodArray<z.ZodString>;
     series: z.ZodArray<z.ZodObject<{
@@ -45,8 +64,51 @@ export declare const chartDataSchema: z.ZodObject<{
         [x: string]: string;
     }>>>;
     footnotes: z.ZodDefault<z.ZodOptional<z.ZodArray<z.ZodString>>>;
-    typeOptions: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodBoolean, z.ZodNumber]>>>;
+    typeOptions: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodBoolean, z.ZodNumber, z.ZodNull]>>>;
+    numberFormat: z.ZodOptional<z.ZodObject<{
+        locale: z.ZodOptional<z.ZodString>;
+        decimals: z.ZodOptional<z.ZodNumber>;
+        prefix: z.ZodOptional<z.ZodString>;
+        suffix: z.ZodOptional<z.ZodString>;
+        notation: z.ZodOptional<z.ZodEnum<{
+            standard: "standard";
+            compact: "compact";
+        }>>;
+    }, z.core.$strip>>;
+    dateFormat: z.ZodOptional<z.ZodObject<{
+        style: z.ZodOptional<z.ZodEnum<{
+            auto: "auto";
+            none: "none";
+            monthYearShort: "monthYearShort";
+            monthYearLong: "monthYearLong";
+            monthOnly: "monthOnly";
+            monthYearNumeric: "monthYearNumeric";
+            iso: "iso";
+            dateShort: "dateShort";
+            dateLong: "dateLong";
+            yearOnly: "yearOnly";
+        }>>;
+    }, z.core.$strip>>;
+    translations: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodObject<{
+        title: z.ZodOptional<z.ZodString>;
+        categories: z.ZodOptional<z.ZodArray<z.ZodString>>;
+        seriesNames: z.ZodOptional<z.ZodArray<z.ZodString>>;
+        footnotes: z.ZodOptional<z.ZodArray<z.ZodString>>;
+        prefix: z.ZodOptional<z.ZodString>;
+        suffix: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>>;
 }, z.core.$strip>;
+export declare const advancedConfigSchema: z.ZodRecord<z.ZodString, z.ZodUnknown>;
+/**
+ * Structural validation for an `advanced` chart's ECharts config. ECharts
+ * itself ships no validator and is permissive at runtime, so this mirrors
+ * the editor's textarea check: non-null object, not an array, non-empty.
+ */
+export declare function validateAdvancedConfig(value: unknown): {
+    error: string;
+} | {
+    value: Record<string, unknown>;
+};
 /**
  * Validate and normalize chart data.
  *
@@ -57,7 +119,7 @@ export declare const chartDataSchema: z.ZodObject<{
  * - Validates typeOptions keys against the chart type definition
  * - Fills typeOptions defaults
  */
-export declare function validateChartData(data: BlokkliChartData, colors: Record<string, ChartColor>): {
+export declare function validateChartData(data: BlokkliChartData, options: ColorOption[]): {
     error: string;
 } | {
     data: BlokkliChartData;