@blokkli/editor 2.0.0-alpha.35 → 2.0.0-alpha.37

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,39 @@
+import type { TranslateFunction, ChartTypeDefinition } from './types.js';
+import type { TypeOptions as BarTypeOptions } from './bar.js';
+import type { TypeOptions as LineTypeOptions } from './line.js';
+import type { TypeOptions as AreaTypeOptions } from './area.js';
+import type { TypeOptions as PieTypeOptions } from './pie.js';
+import type { TypeOptions as DonutTypeOptions } from './donut.js';
+import type { TypeOptions as HeatmapTypeOptions } from './heatmap.js';
+import type { TypeOptions as RadialBarTypeOptions } from './radialBar.js';
+import type { TypeOptions as RadarTypeOptions } from './radar.js';
+export type ChartTypeOptionsMap = {
+    bar: BarTypeOptions;
+    line: LineTypeOptions;
+    area: AreaTypeOptions;
+    pie: PieTypeOptions;
+    donut: DonutTypeOptions;
+    heatmap: HeatmapTypeOptions;
+    radialBar: RadialBarTypeOptions;
+    radar: RadarTypeOptions;
+};
+/**
+ * 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,7 @@
+import type { XAxisTypeOptions, DataLabelsTypeOptions, LegendTypeOptions, GridTypeOptions, StrokeWidthTypeOptions } from './shared.js';
+export type TypeOptions = {
+    curved: boolean;
+    markers: boolean;
+} & XAxisTypeOptions & DataLabelsTypeOptions & LegendTypeOptions & GridTypeOptions & StrokeWidthTypeOptions;
+declare const _default: import("./types.js").ChartTypeFactory<TypeOptions>;
+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,5 @@
+export type TypeOptions = {
+    showLabels: boolean;
+};
+declare const _default: import("./types.js").ChartTypeFactory<TypeOptions>;
+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,7 @@
+import type { DataLabelsTypeOptions, LegendTypeOptions } from './shared.js';
+export type TypeOptions = {
+    markers: boolean;
+    fillOpacity: string;
+} & DataLabelsTypeOptions & LegendTypeOptions;
+declare const _default: import("./types.js").ChartTypeFactory<TypeOptions>;
+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,6 @@
+export type TypeOptions = {
+    showLabels: boolean;
+    showTotal: boolean;
+};
+declare const _default: import("./types.js").ChartTypeFactory<TypeOptions>;
+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"
+      }
+    }
+  }
+}));

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

@@ -0,0 +1,67 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { BlockOptionDefinitionBase } from '../../../../global/types/blockOptions.js';
+import type { TranslateFunction } from './types.js';
+type SharedOptions = {
+    options: Record<string, BlockOptionDefinitionBase<BlokkliIcon>>;
+};
+export type XAxisTypeOptions = {
+    xaxisRotation: string;
+};
+export type DataLabelsTypeOptions = {
+    dataLabels: boolean;
+};
+export type LegendTypeOptions = {
+    legendPosition: string;
+};
+export type GridTypeOptions = {
+    gridLines: boolean;
+};
+export type StrokeWidthTypeOptions = {
+    strokeWidth: string;
+};
+/**
+ * Shared x-axis label options for chart types that display an x-axis.
+ */
+export declare function xAxisOptions($t: TranslateFunction): SharedOptions;
+/**
+ * Build x-axis label config from type options.
+ * Returns properties to merge into the xaxis config object.
+ */
+export declare function buildXAxisLabelOptions(typeOptions: XAxisTypeOptions): Record<string, any>;
+/**
+ * Data labels option — show values directly on chart elements.
+ */
+export declare function dataLabelsOptions($t: TranslateFunction): SharedOptions;
+/**
+ * Build data labels config from type options.
+ */
+export declare function buildDataLabelsOptions(typeOptions: DataLabelsTypeOptions): Record<string, any>;
+/**
+ * Legend position option for multi-series chart types.
+ */
+export declare function legendOptions($t: TranslateFunction): SharedOptions;
+/**
+ * Build legend config from type options.
+ */
+export declare function buildLegendOptions(typeOptions: LegendTypeOptions): Record<string, any>;
+/**
+ * Grid lines option for chart types with axes.
+ */
+export declare function gridOptions($t: TranslateFunction): SharedOptions;
+/**
+ * Build grid config from type options.
+ */
+export declare function buildGridOptions(typeOptions: GridTypeOptions): Record<string, any>;
+/**
+ * Stroke width option for line-based chart types.
+ */
+export declare function strokeWidthOptions($t: TranslateFunction): SharedOptions;
+/**
+ * Build stroke width config from type options.
+ */
+export declare function buildStrokeWidthOptions(typeOptions: StrokeWidthTypeOptions): Record<string, any>;
+/**
+ * Merge multiple shared option sets into one.
+ */
+export declare function mergeShared(...sets: SharedOptions[]): SharedOptions;
+export {};

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

@@ -0,0 +1,103 @@
+export function xAxisOptions($t) {
+  return {
+    options: {
+      xaxisRotation: {
+        type: "radios",
+        label: $t("chartsXAxisRotation", "Label rotation"),
+        default: "auto",
+        options: {
+          auto: $t("chartsRotationAuto", "Auto"),
+          "-45": "-45\xB0",
+          "-90": "-90\xB0"
+        }
+      }
+    }
+  };
+}
+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: {
+      dataLabels: {
+        type: "checkbox",
+        label: $t("chartsDataLabels", "Data labels"),
+        default: false,
+        group: "labels"
+      }
+    }
+  };
+}
+export function buildDataLabelsOptions(typeOptions) {
+  return { dataLabels: { enabled: !!typeOptions.dataLabels } };
+}
+export function legendOptions($t) {
+  return {
+    options: {
+      legendPosition: {
+        type: "radios",
+        label: $t("chartsLegendPosition", "Legend position"),
+        default: "bottom",
+        options: {
+          bottom: $t("chartsPositionBottom", "Bottom"),
+          top: $t("chartsPositionTop", "Top"),
+          right: $t("chartsPositionRight", "Right")
+        }
+      }
+    }
+  };
+}
+export function buildLegendOptions(typeOptions) {
+  return { legend: { position: typeOptions.legendPosition || "bottom" } };
+}
+export function gridOptions($t) {
+  return {
+    options: {
+      gridLines: {
+        type: "checkbox",
+        label: $t("chartsGridLines", "Grid lines"),
+        default: true,
+        group: "display"
+      }
+    }
+  };
+}
+export function buildGridOptions(typeOptions) {
+  return { grid: { show: !!typeOptions.gridLines } };
+}
+export function strokeWidthOptions($t) {
+  return {
+    options: {
+      strokeWidth: {
+        type: "radios",
+        label: $t("chartsStrokeWidth", "Line thickness"),
+        default: "2",
+        options: {
+          "2": $t("chartsStrokeThin", "Thin"),
+          "4": $t("chartsStrokeMedium", "Medium"),
+          "6": $t("chartsStrokeThick", "Thick")
+        }
+      }
+    }
+  };
+}
+export function buildStrokeWidthOptions(typeOptions) {
+  return { stroke: { width: Number(typeOptions.strokeWidth) || 2 } };
+}
+export function mergeShared(...sets) {
+  const options = {};
+  for (const set of sets) {
+    Object.assign(options, set.options);
+  }
+  return { options };
+}

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

@@ -0,0 +1,29 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { BlockOptionDefinitionBase } from '../../../../global/types/blockOptions.js';
+export type TranslateFunction = (key: string, fallback: string) => string;
+export type ChartBuildContext<T extends Record<string, unknown> = Record<string, unknown>> = {
+    title: string;
+    categories: string[];
+    series: Array<{
+        name: string;
+        color: string;
+        data: number[];
+    }>;
+    seriesColors: string[];
+    categoryColors: string[];
+    typeOptions: T;
+};
+export type ChartTypeDefinition<T extends Record<string, unknown> = Record<string, unknown>> = {
+    id: string;
+    hasMultipleSeries: boolean;
+    hasSeriesColors: boolean;
+    hasCategoryColors: boolean;
+    buildChartOptions: (ctx: ChartBuildContext<T>) => Record<string, any>;
+    buildSeries: (ctx: ChartBuildContext<T>) => any;
+    editor: {
+        label: string;
+        icon: BlokkliIcon;
+        options: Record<string, BlockOptionDefinitionBase<BlokkliIcon>>;
+    };
+};
+export type ChartTypeFactory<T extends Record<string, unknown> = Record<string, unknown>> = ($t: TranslateFunction) => ChartTypeDefinition<T>;