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

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

@@ -1,4 +1,147 @@
-import type { BlokkliChartData } from '../../types.js';
-declare const __VLS_export: import("vue").DefineComponent<BlokkliChartData, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlokkliChartData> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+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>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -21,17 +21,17 @@
 
 <script setup>
 import { computed, defineAsyncComponent, useTemplateRef } from "#imports";
-import { resolveChartColor, applyFootnotes, SUPERSCRIPTS } from "../../types";
+import { resolveChartColor, applyFootnotes, SUPERSCRIPTS } from "../../helpers";
 import { getChartTypeRuntime, getDefaultTypeOptions } from "../../chartTypes";
 import { COLORS } from "#blokkli-build/charts-config";
 const ApexChart = defineAsyncComponent(() => import("vue3-apexcharts"));
 const props = defineProps({
   title: { type: String, required: true },
-  type: { 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 }
 });
 const rootEl = useTemplateRef("rootEl");

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

@@ -1,4 +1,147 @@
-import type { BlokkliChartData } from '../../types.js';
-declare const __VLS_export: import("vue").DefineComponent<BlokkliChartData, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlokkliChartData> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+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>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1 @@
+export { default as ChartRenderer } from './ChartRenderer/index.vue.js';

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

@@ -0,0 +1 @@
+export { default as ChartRenderer } from "./ChartRenderer/index.vue";

package/dist/modules/charts/runtime/features/charts/Editor/ChartTypeOptions/index.d.vue.ts

@@ -1,7 +1,8 @@
-import type { BlockOptionDefinition } from '#blokkli/types/blockOptions';
+import type { ChartTypeDefinition } from '../../../../chartTypes/types.js';
+type ChartOption = ChartTypeDefinition['editor']['options'][string];
 type __VLS_Props = {
     title: string;
-    options: Record<string, BlockOptionDefinition>;
+    options: Record<string, ChartOption>;
     typeOptions: Record<string, unknown>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/modules/charts/runtime/features/charts/Editor/ChartTypeOptions/index.vue.d.ts

@@ -1,7 +1,8 @@
-import type { BlockOptionDefinition } from '#blokkli/types/blockOptions';
+import type { ChartTypeDefinition } from '../../../../chartTypes/types.js';
+type ChartOption = ChartTypeDefinition['editor']['options'][string];
 type __VLS_Props = {
     title: string;
-    options: Record<string, BlockOptionDefinition>;
+    options: Record<string, ChartOption>;
     typeOptions: Record<string, unknown>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/modules/charts/runtime/features/charts/Editor/CsvImport/index.vue

@@ -17,8 +17,7 @@
 
 <script setup>
 import { useTemplateRef, useBlokkli } from "#imports";
-import { getColorIdAtIndex } from "../../../../types";
-import { parseNumericInput } from "../../../../helpers";
+import { getColorIdAtIndex, parseNumericInput } from "../../../../helpers";
 const props = defineProps({
   colors: { type: Object, required: true }
 });

package/dist/modules/charts/runtime/features/charts/Editor/FootnoteEditor/index.vue

@@ -34,7 +34,7 @@
 
 <script setup>
 import { useBlokkli } from "#imports";
-import { SUPERSCRIPTS } from "../../../../types";
+import { SUPERSCRIPTS } from "../../../../helpers";
 import { Icon } from "#blokkli/editor/components";
 const { $t } = useBlokkli();
 const props = defineProps({

package/dist/modules/charts/runtime/features/charts/Editor/Preview/index.d.vue.ts

@@ -1,5 +1,7 @@
 import type { BlokkliChartData } from '../../../../types.js';
 type __VLS_Props = {
+    uuid: string;
+    optionKey: string;
     data: BlokkliChartData | null;
     stale: boolean;
 };

package/dist/modules/charts/runtime/features/charts/Editor/Preview/index.vue

@@ -1,23 +1,45 @@
 <template>
   <div :class="{ 'bk-is-stale': stale }">
-    <ChartRenderer v-if="data" v-bind="data" />
-    <div v-else class="bk-chart-preview-placeholder">
-      {{
-        $t(
-  "chartsPreviewPlaceholder",
-  'Click "Refresh Preview" to see the chart.'
-)
-      }}
-    </div>
+    <BlokkliItem
+      v-if="item"
+      v-bind="item"
+      :options="mergedOptions"
+      :is-editing="false"
+    />
   </div>
 </template>
 
 <script setup>
-import { useBlokkli } from "#imports";
-import ChartRenderer from "../../../../components/ChartRenderer/index.vue";
-const { $t } = useBlokkli();
-defineProps({
+import { computed, provide, useBlokkli } from "#imports";
+import {
+  INJECT_EDIT_CONTEXT,
+  INJECT_FIELD_LIST_BLOCKS,
+  INJECT_FIELD_LIST_TYPE,
+  INJECT_IS_EDITING,
+  INJECT_IS_IN_REUSABLE,
+  INJECT_PROVIDER_BLOCKS
+} from "#blokkli/helpers/injections";
+const { state } = useBlokkli();
+const props = defineProps({
+  uuid: { type: String, required: true },
+  optionKey: { type: String, required: true },
   data: { type: [Object, null], required: true },
   stale: { type: Boolean, required: true }
 });
+const item = computed(() => state.getFieldListItem(props.uuid));
+const mergedOptions = computed(() => {
+  const base = item.value?.options || {};
+  return {
+    ...base,
+    [props.optionKey]: JSON.stringify(props.data)
+  };
+});
+const blocks = computed(() => []);
+const fieldListType = computed(() => "default");
+provide(INJECT_IS_IN_REUSABLE, true);
+provide(INJECT_IS_EDITING, false);
+provide(INJECT_FIELD_LIST_BLOCKS, blocks);
+provide(INJECT_PROVIDER_BLOCKS, blocks);
+provide(INJECT_FIELD_LIST_TYPE, fieldListType);
+provide(INJECT_EDIT_CONTEXT, null);
 </script>

package/dist/modules/charts/runtime/features/charts/Editor/Preview/index.vue.d.ts

@@ -1,5 +1,7 @@
 import type { BlokkliChartData } from '../../../../types.js';
 type __VLS_Props = {
+    uuid: string;
+    optionKey: string;
     data: BlokkliChartData | null;
     stale: boolean;
 };

package/dist/modules/charts/runtime/features/charts/Editor/index.d.vue.ts

@@ -1,6 +1,7 @@
 import type { BlokkliChartData } from '../../../types.js';
 type __VLS_Props = {
     uuid: string;
+    optionKey: string;
 };
 declare function getData(): BlokkliChartData;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {

package/dist/modules/charts/runtime/features/charts/Editor/index.vue

@@ -44,7 +44,12 @@
             />
           </div>
         </div>
-        <Preview :data="previewData" :stale="isStale" />
+        <Preview
+          :uuid
+          :option-key="optionKey"
+          :data="previewData"
+          :stale="isStale"
+        />
       </div>
 
       <div class="bk-chart-editor-section">
@@ -93,7 +98,7 @@
 
 <script setup>
 import { ref, computed, watch, useBlokkli, onBeforeUnmount } from "#imports";
-import { getDefaultChartData, getFirstColorId } from "../../../types";
+import { getDefaultChartData, getFirstColorId } from "../../../helpers";
 import { getChartType, getDefaultTypeOptions } from "../../../chartTypes";
 import { COLORS } from "#blokkli-build/charts-config";
 import { useChartEditorState } from "./useChartEditorState";
@@ -106,7 +111,8 @@ import Preview from "./Preview/index.vue";
 import ChartTypeOptions from "./ChartTypeOptions/index.vue";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
 const props = defineProps({
-  uuid: { type: String, required: true }
+  uuid: { type: String, required: true },
+  optionKey: { type: String, required: true }
 });
 const { $t, state } = useBlokkli();
 function getCurrentData() {

package/dist/modules/charts/runtime/features/charts/Editor/index.vue.d.ts

@@ -1,6 +1,7 @@
 import type { BlokkliChartData } from '../../../types.js';
 type __VLS_Props = {
     uuid: string;
+    optionKey: string;
 };
 declare function getData(): BlokkliChartData;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {

package/dist/modules/charts/runtime/features/charts/Editor/useChartEditorState.js

@@ -1,5 +1,5 @@
 import { ref, watch, nextTick, computed } from "#imports";
-import { getColorIdAtIndex } from "../../../types.js";
+import { getColorIdAtIndex } from "../../../helpers/index.js";
 const MAX_HISTORY = 50;
 function clone(v) {
   return JSON.parse(JSON.stringify(v));

package/dist/modules/charts/runtime/features/charts/index.vue

@@ -9,7 +9,7 @@
     @submit="onSubmit"
     @close="onSubmit"
   >
-    <ChartsEditor ref="editorRef" :uuid />
+    <ChartsEditor ref="editorRef" :uuid :option-key="optionKey" />
   </NestedEditorOverlay>
 </template>
 
@@ -33,6 +33,7 @@ defineBlokkliFeature({
 });
 const { $t, state, adapter, dom, blocks } = useBlokkli();
 const uuid = ref(null);
+const optionKey = ref("data");
 const element = computed(() => {
   if (!uuid.value) {
     return null;
@@ -53,7 +54,7 @@ async function onSubmit() {
     () => adapter.updateOptions([
       {
         uuid: uuid.value,
-        key: "data",
+        key: optionKey.value,
         value: JSON.stringify(chartData)
       }
     ]),
@@ -62,11 +63,10 @@ async function onSubmit() {
   isLoading.value = false;
   uuid.value = null;
 }
-onBlokkliEvent("fragment:edit", (data) => {
-  if (data.name === "blokkli_chart") {
+onBlokkliEvent("option:edit-complex", (data) => {
+  if (data.dataType === "chart") {
     uuid.value = data.uuid;
-  } else {
-    uuid.value = null;
+    optionKey.value = data.key;
   }
 });
 </script>

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

@@ -1 +1,26 @@
+import type { BlokkliChartData, ChartColor } from '../types.js';
+export declare const SUPERSCRIPTS: Record<string, string>;
+/**
+ * Replace `{1}`, `{2}`, etc. with Unicode superscript characters.
+ */
+export declare function applyFootnotes(text: string): string;
+/**
+ * Resolve a color ID to a concrete CSS color value that ApexCharts can use.
+ *
+ * Plain values like '#ff0000' or 'rgb(255, 0, 0)' are returned as-is.
+ * Values containing 'var(' (e.g. 'rgb(var(--theme-primary))') are resolved
+ * by setting the value on a DOM element and reading the computed color.
+ *
+ * Falls back to the first defined color if the ID is not found.
+ */
+export declare function resolveChartColor(colorId: string, colors: Record<string, ChartColor>, el?: HTMLElement | null): string;
+/**
+ * Get the fallback color ID (first defined color).
+ */
+export declare function getFirstColorId(colors: Record<string, ChartColor>): string;
+/**
+ * Get a color ID for the given index, cycling through available colors.
+ */
+export declare function getColorIdAtIndex(index: number, colors: Record<string, ChartColor>): string;
+export declare function getDefaultChartData(colors: Record<string, ChartColor>): BlokkliChartData;
 export declare function parseNumericInput(raw: string): number;

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

@@ -1,3 +1,66 @@
+export const SUPERSCRIPTS = {
+  "1": "\xB9",
+  "2": "\xB2",
+  "3": "\xB3",
+  "4": "\u2074",
+  "5": "\u2075",
+  "6": "\u2076",
+  "7": "\u2077",
+  "8": "\u2078",
+  "9": "\u2079",
+  "0": "\u2070"
+};
+export function applyFootnotes(text) {
+  return text.replace(
+    /\{(\d)\}/g,
+    (_, d) => SUPERSCRIPTS[d] || `{${d}}`
+  );
+}
+export function resolveChartColor(colorId, colors, el) {
+  const ids = Object.keys(colors);
+  const entry = colors[colorId] || colors[ids[0] || ""];
+  if (!entry) {
+    return "#888888";
+  }
+  const value = entry.color;
+  if (!value.includes("var(")) {
+    return value;
+  }
+  const target = el || document.documentElement;
+  const prev = target.style.color;
+  target.style.color = value;
+  const resolved = getComputedStyle(target).color;
+  target.style.color = prev;
+  return resolved || value;
+}
+export function getFirstColorId(colors) {
+  return Object.keys(colors)[0] || "";
+}
+export function getColorIdAtIndex(index, colors) {
+  const ids = Object.keys(colors);
+  return ids[index % ids.length] || ids[0] || "";
+}
+export function getDefaultChartData(colors) {
+  return {
+    title: "",
+    type: "bar",
+    categories: ["Category 1", "Category 2", "Category 3"],
+    series: [
+      {
+        name: "Series 1",
+        color: getColorIdAtIndex(0, colors),
+        data: [30, 40, 35]
+      }
+    ],
+    categoryColors: [
+      getColorIdAtIndex(0, colors),
+      getColorIdAtIndex(1, colors),
+      getColorIdAtIndex(2, colors)
+    ],
+    footnotes: [],
+    typeOptions: {}
+  };
+}
 export function parseNumericInput(raw) {
   let str = raw.trim();
   if (!str) return 0;