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

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

@@ -0,0 +1,49 @@
+import { defineChartType } from "#blokkli/charts/definition";
+import {
+  xAxisOptions,
+  dataLabelsOptions,
+  legendOptions,
+  gridOptions,
+  strokeWidthOptions,
+  yAxisMinOptions,
+  categoryFilterOptions,
+  mergeShared
+} from "#blokkli/charts/definition/options";
+export default defineChartType("area", ($t) => {
+  const shared = mergeShared(
+    xAxisOptions($t),
+    dataLabelsOptions($t),
+    legendOptions($t),
+    gridOptions($t),
+    strokeWidthOptions($t),
+    yAxisMinOptions($t),
+    categoryFilterOptions($t)
+  );
+  return {
+    hasSeriesColors: true,
+    hasCategoryColors: false,
+    editor: {
+      label: $t("chartsTypeArea", "Area"),
+      description: $t(
+        "chartsTypeAreaDescription",
+        "Shows trends over time with filled regions, useful for emphasising volume or cumulative values."
+      ),
+      icon: "bk_mdi_area_chart",
+      options: {
+        curved: {
+          type: "checkbox",
+          label: $t("smoothCurves", "Smooth curves"),
+          default: false,
+          group: "display"
+        },
+        markers: {
+          type: "checkbox",
+          label: $t("showMarkers", "Show markers"),
+          default: false,
+          group: "display"
+        },
+        ...shared.options
+      }
+    }
+  };
+});

package/dist/modules/charts/runtime/blokkli/chart-types/area/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/area/illustration.vue

@@ -0,0 +1,56 @@
+<template>
+  <svg viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
+    <path
+      :d="toAreaPath(secondary)"
+      fill-opacity="0.6"
+      class="_bk_fill-accent-300"
+    />
+    <path :d="toAreaPath(primary)" fill-opacity="0.5" class="_bk_fill-accent-500" />
+    <polyline
+      :points="toPoints(primary)"
+      fill="none"
+      stroke-width="2.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="_bk_stroke-accent-500"
+    />
+    <line
+      x1="10"
+      y1="65"
+      x2="110"
+      y2="65"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      class="_bk_stroke-accent-900"
+    />
+  </svg>
+</template>
+
+<script setup>
+const BASELINE = 65;
+const primary = [
+  [15, 42],
+  [33, 22],
+  [51, 35],
+  [69, 15],
+  [87, 30],
+  [105, 12]
+];
+const secondary = [
+  [15, 52],
+  [33, 45],
+  [51, 50],
+  [69, 40],
+  [87, 46],
+  [105, 38]
+];
+function toPoints(points) {
+  return points.map((p) => p.join(",")).join(" ");
+}
+function toAreaPath(points) {
+  const first = points[0];
+  const last = points[points.length - 1];
+  const top = points.map(([x, y]) => `L ${x} ${y}`).join(" ");
+  return `M ${first[0]} ${first[1]} ${top} L ${last[0]} ${BASELINE} L ${first[0]} ${BASELINE} Z`;
+}
+</script>

package/dist/modules/charts/runtime/blokkli/chart-types/area/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/area/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/area/render.vue

@@ -0,0 +1,99 @@
+<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 { LineChart } from "echarts/charts";
+import {
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent
+} from "echarts/components";
+import { legendPositionToEcharts } from "../../../helpers/echarts";
+import { createNumberFormatter } from "../../../helpers/numberFormat";
+use([
+  CanvasRenderer,
+  LineChart,
+  GridComponent,
+  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 {
+    curved: t.curved ?? false,
+    markers: t.markers ?? false,
+    xaxisRotation: t.xaxisRotation ?? "auto",
+    dataLabels: t.dataLabels ?? false,
+    gridLines: t.gridLines ?? true,
+    legendPosition: t.legendPosition ?? "bottom",
+    strokeWidth: Number(t.strokeWidth ?? 2) || 2,
+    yaxisMin: typeof t.yaxisMin === "number" && Number.isFinite(t.yaxisMin) ? t.yaxisMin : void 0
+  };
+});
+const option = computed(() => {
+  const o = opts.value;
+  const valueFormatter = createNumberFormatter(props.numberFormat);
+  const xAxis = {
+    type: "category",
+    data: props.categories,
+    boundaryGap: false
+  };
+  if (o.xaxisRotation !== "auto") {
+    xAxis.axisLabel = { rotate: Number(o.xaxisRotation) };
+  }
+  const yAxis = {
+    type: "value",
+    axisLabel: { formatter: (v) => valueFormatter(v) },
+    splitLine: { show: o.gridLines }
+  };
+  if (o.yaxisMin !== void 0) yAxis.min = o.yaxisMin;
+  return {
+    title: props.title ? { text: props.title, left: "left" } : void 0,
+    animation: !props.isEditing,
+    tooltip: {
+      trigger: "axis",
+      valueFormatter: (v) => valueFormatter(v)
+    },
+    legend: {
+      ...legendPositionToEcharts(o.legendPosition),
+      data: props.series.map((s) => s.name)
+    },
+    grid: { containLabel: true, top: 50, left: 10, right: 10, bottom: 40 },
+    xAxis,
+    yAxis,
+    series: props.series.map((s, i) => ({
+      type: "line",
+      name: s.name,
+      data: s.data,
+      smooth: o.curved,
+      showSymbol: o.markers,
+      symbolSize: 6,
+      lineStyle: { width: o.strokeWidth, color: props.seriesHexColors[i] },
+      itemStyle: { color: props.seriesHexColors[i] },
+      areaStyle: { opacity: 0.4 },
+      label: {
+        show: o.dataLabels,
+        formatter: (p) => valueFormatter(p.value)
+      }
+    }))
+  };
+});
+</script>

package/dist/modules/charts/runtime/blokkli/chart-types/area/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/{chartTypes/bar.d.ts → blokkli/chart-types/bar/definition.d.ts}

@@ -1,8 +1,8 @@
-import type { XAxisTypeOptions, DataLabelsTypeOptions, LegendTypeOptions, GridTypeOptions } from './shared.js';
+import type { XAxisTypeOptions, DataLabelsTypeOptions, LegendTypeOptions, GridTypeOptions, YAxisMinTypeOptions, CategoryFilterTypeOptions } from '#blokkli/charts/types';
 export type TypeOptions = {
     stacked: boolean;
     horizontal: boolean;
     borderRadius: string;
-} & XAxisTypeOptions & DataLabelsTypeOptions & LegendTypeOptions & GridTypeOptions;
-declare const _default: import("./types.js").ChartTypeFactory<TypeOptions>;
+} & XAxisTypeOptions & DataLabelsTypeOptions & LegendTypeOptions & GridTypeOptions & YAxisMinTypeOptions & CategoryFilterTypeOptions;
+declare const _default: any;
 export default _default;

package/dist/modules/charts/runtime/{chartTypes/bar.js → blokkli/chart-types/bar/definition.js}

@@ -1,50 +1,31 @@
-import { defineChartType } from "./define.js";
+import { defineChartType } from "#blokkli/charts/definition";
 import {
   xAxisOptions,
-  buildXAxisLabelOptions,
   dataLabelsOptions,
-  buildDataLabelsOptions,
   legendOptions,
-  buildLegendOptions,
   gridOptions,
-  buildGridOptions,
+  yAxisMinOptions,
+  categoryFilterOptions,
   mergeShared
-} from "./shared.js";
-export default defineChartType(($t) => {
+} from "#blokkli/charts/definition/options";
+export default defineChartType("bar", ($t) => {
   const shared = mergeShared(
     xAxisOptions($t),
     dataLabelsOptions($t),
     legendOptions($t),
-    gridOptions($t)
+    gridOptions($t),
+    yAxisMinOptions($t),
+    categoryFilterOptions($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"),
+      description: $t(
+        "chartsTypeBarDescription",
+        "Compares values across categories using rectangular bars, best for ranking and side-by-side comparisons."
+      ),
       icon: "bk_mdi_bar_chart",
       options: {
         stacked: {

package/dist/modules/charts/runtime/blokkli/chart-types/bar/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/bar/illustration.vue

@@ -0,0 +1,34 @@
+<template>
+  <svg viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
+    <rect
+      v-for="(b, i) in bars"
+      :key="i"
+      :x="b.x"
+      :y="b.y"
+      width="10"
+      :height="65 - b.y"
+      rx="1.5"
+      :class="b.light ? '_bk_fill-accent-300' : '_bk_fill-accent-500'"
+    />
+    <line
+      x1="10"
+      y1="65"
+      x2="110"
+      y2="65"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      class="_bk_stroke-accent-900"
+    />
+  </svg>
+</template>
+
+<script setup>
+const bars = [
+  { x: 18, y: 42, light: false },
+  { x: 29, y: 32, light: true },
+  { x: 48, y: 25, light: false },
+  { x: 59, y: 40, light: true },
+  { x: 78, y: 38, light: false },
+  { x: 89, y: 18, light: true }
+];
+</script>

package/dist/modules/charts/runtime/blokkli/chart-types/bar/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/bar/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/bar/render.vue

@@ -0,0 +1,107 @@
+<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 {
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent
+} from "echarts/components";
+import { legendPositionToEcharts } from "../../../helpers/echarts";
+import { createNumberFormatter } from "../../../helpers/numberFormat";
+use([
+  CanvasRenderer,
+  BarChart,
+  GridComponent,
+  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 {
+    stacked: t.stacked ?? false,
+    horizontal: t.horizontal ?? false,
+    borderRadius: Number(t.borderRadius ?? 0) || 0,
+    xaxisRotation: t.xaxisRotation ?? "auto",
+    dataLabels: t.dataLabels ?? false,
+    gridLines: t.gridLines ?? true,
+    legendPosition: t.legendPosition ?? "bottom",
+    yaxisMin: typeof t.yaxisMin === "number" && Number.isFinite(t.yaxisMin) ? t.yaxisMin : void 0,
+    categoryFilter: t.categoryFilter === true
+  };
+});
+const option = computed(() => {
+  const o = opts.value;
+  const valueFormatter = createNumberFormatter(props.numberFormat);
+  const categoryAxis = {
+    type: "category",
+    data: props.categories
+  };
+  if (o.xaxisRotation !== "auto") {
+    categoryAxis.axisLabel = { rotate: Number(o.xaxisRotation) };
+  }
+  const valueAxis = {
+    type: "value",
+    axisLabel: { formatter: (v) => valueFormatter(v) },
+    splitLine: { show: o.gridLines }
+  };
+  if (o.yaxisMin !== void 0) {
+    valueAxis.min = o.yaxisMin;
+  }
+  return {
+    title: props.title ? { text: props.title, left: "left" } : void 0,
+    animation: !props.isEditing,
+    tooltip: {
+      trigger: "axis",
+      valueFormatter: (v) => valueFormatter(v)
+    },
+    legend: {
+      show: !o.categoryFilter,
+      ...legendPositionToEcharts(o.legendPosition),
+      data: props.series.map((s) => s.name)
+    },
+    grid: { containLabel: true, top: 50, left: 10, right: 10, bottom: 40 },
+    xAxis: o.horizontal ? valueAxis : categoryAxis,
+    yAxis: o.horizontal ? categoryAxis : valueAxis,
+    series: props.series.map((s, i) => {
+      const useCategoryColors = o.categoryFilter && props.series.length === 1 && props.categoryHexColors.length === s.data.length;
+      return {
+        type: "bar",
+        name: s.name,
+        data: useCategoryColors ? s.data.map((value, di) => ({
+          value,
+          itemStyle: { color: props.categoryHexColors[di] }
+        })) : s.data,
+        stack: o.stacked ? "total" : void 0,
+        itemStyle: useCategoryColors ? { borderRadius: o.borderRadius } : {
+          color: props.seriesHexColors[i],
+          borderRadius: o.borderRadius
+        },
+        label: {
+          show: o.dataLabels,
+          formatter: (p) => valueFormatter(p.value)
+        }
+      };
+    })
+  };
+});
+</script>

package/dist/modules/charts/runtime/blokkli/chart-types/bar/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/donut/definition.d.ts

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

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

@@ -0,0 +1,35 @@
+import { defineChartType } from "#blokkli/charts/definition";
+import {
+  categoryFilterOptions,
+  mergeShared
+} from "#blokkli/charts/definition/options";
+export default defineChartType("donut", ($t) => {
+  const shared = mergeShared(categoryFilterOptions($t));
+  return {
+    hasSeriesColors: false,
+    hasCategoryColors: true,
+    editor: {
+      label: $t("chartsTypeDonut", "Donut"),
+      description: $t(
+        "chartsTypeDonutDescription",
+        "Displays parts of a whole as a ring, leaving room in the centre for a total or summary value."
+      ),
+      icon: "bk_mdi_donut_large",
+      options: {
+        showTotal: {
+          type: "checkbox",
+          label: $t("chartsDonutShowTotal", "Show total"),
+          default: false,
+          group: "display"
+        },
+        showLabels: {
+          type: "checkbox",
+          label: $t("showLabels", "Show labels"),
+          default: true,
+          group: "labels"
+        },
+        ...shared.options
+      }
+    }
+  };
+});

package/dist/modules/charts/runtime/blokkli/chart-types/donut/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/donut/illustration.vue

@@ -0,0 +1,35 @@
+<template>
+  <svg viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
+    <path
+      v-for="(s, i) in slices"
+      :key="i"
+      :d="donutPath(s.start, s.end)"
+      :class="s.color"
+    />
+  </svg>
+</template>
+
+<script setup>
+import { tw } from "#blokkli/helpers/tw";
+const CX = 60;
+const CY = 40;
+const OUTER_R = 28;
+const INNER_R = 13;
+const slices = [
+  { start: 0, end: 100, color: tw("_bk_fill-accent-500") },
+  { start: 100, end: 180, color: tw("_bk_fill-accent-800") },
+  { start: 180, end: 270, color: tw("_bk_fill-accent-300") },
+  { start: 270, end: 360, color: tw("_bk_fill-accent-400") }
+];
+function polar(r, angleDeg) {
+  const a = angleDeg * Math.PI / 180;
+  return [CX + r * Math.cos(a), CY + r * Math.sin(a)];
+}
+function donutPath(start, end) {
+  const [ox1, oy1] = polar(OUTER_R, start);
+  const [ox2, oy2] = polar(OUTER_R, end);
+  const [ix1, iy1] = polar(INNER_R, end);
+  const [ix2, iy2] = polar(INNER_R, start);
+  return `M ${ox1} ${oy1} A ${OUTER_R} ${OUTER_R} 0 0 1 ${ox2} ${oy2} L ${ix1} ${iy1} A ${INNER_R} ${INNER_R} 0 0 0 ${ix2} ${iy2} Z`;
+}
+</script>

package/dist/modules/charts/runtime/blokkli/chart-types/donut/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/donut/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/donut/render.vue

@@ -0,0 +1,87 @@
+<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 { PieChart } from "echarts/charts";
+import {
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  GraphicComponent
+} from "echarts/components";
+import {
+  createNumberFormatter,
+  createPercentFormatter
+} from "../../../helpers/numberFormat";
+use([
+  CanvasRenderer,
+  PieChart,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  GraphicComponent
+]);
+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 showTotal = t.showTotal ?? false;
+  const values = props.series[0]?.data ?? [];
+  const valueFormatter = createNumberFormatter(props.numberFormat);
+  const percentFormatter = createPercentFormatter(props.numberFormat);
+  const total = values.reduce((sum, n) => sum + n, 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,
+    tooltip: {
+      trigger: "item",
+      valueFormatter: (v) => valueFormatter(v)
+    },
+    legend: { left: "center", bottom: 0, orient: "horizontal" },
+    graphic: showTotal ? {
+      type: "text",
+      left: "center",
+      top: "middle",
+      style: {
+        text: valueFormatter(total),
+        textAlign: "center",
+        fill: "#333",
+        fontSize: 18,
+        fontWeight: "bold"
+      }
+    } : void 0,
+    series: [
+      {
+        type: "pie",
+        radius: ["40%", "65%"],
+        center: ["50%", "50%"],
+        data,
+        label: {
+          show: showLabels,
+          formatter: (p) => percentFormatter(p.percent)
+        }
+      }
+    ]
+  };
+});
+</script>

package/dist/modules/charts/runtime/blokkli/chart-types/donut/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/{chartTypes/heatmap.d.ts → blokkli/chart-types/heatmap/definition.d.ts}

@@ -1,4 +1,4 @@
-import type { XAxisTypeOptions, LegendTypeOptions, GridTypeOptions } from './shared.js';
-export type TypeOptions = XAxisTypeOptions & LegendTypeOptions & GridTypeOptions;
-declare const _default: import("./types.js").ChartTypeFactory<TypeOptions>;
+import type { XAxisTypeOptions, LegendTypeOptions, GridTypeOptions, CategoryFilterTypeOptions } from '#blokkli/charts/types';
+export type TypeOptions = XAxisTypeOptions & LegendTypeOptions & GridTypeOptions & CategoryFilterTypeOptions;
+declare const _default: any;
 export default _default;