@qtsurfer/sveltecharts 0.2.12 → 0.4.0

package/dist/SVECharts.svelte

@@ -1,88 +1,158 @@
-<script context="module">import { init, use } from "echarts/core";
-import { LineChart } from "echarts/charts";
-import {
-  DataZoomComponent,
-  LegendComponent,
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  DatasetComponent
-} from "echarts/components";
-import { LabelLayout } from "echarts/features";
-import { CanvasRenderer } from "echarts/renderers";
-use([
-  LineChart,
-  DataZoomComponent,
-  LegendComponent,
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  DatasetComponent,
-  LabelLayout,
-  CanvasRenderer
-]);
-const DEFAULT_CONFIG = {
-  theme: void 0,
-  renderer: "canvas"
-};
+<script lang="ts" module>
+	import { init, use } from 'echarts/core';
+	import { LineChart, BarChart } from 'echarts/charts';
+	import {
+		DataZoomComponent,
+		LegendComponent,
+		TitleComponent,
+		TooltipComponent,
+		GridComponent,
+		DatasetComponent,
+		MarkLineComponent,
+		MarkPointComponent,
+		MarkAreaComponent
+	} from 'echarts/components';
+	import { LabelLayout } from 'echarts/features';
+	import { CanvasRenderer } from 'echarts/renderers';
+	import type { ECharts, EChartsOption } from './types';
+	import 'echarts/theme/dark.js';
+
+	// Register the required components
+	use([
+		LineChart,
+		BarChart,
+		DataZoomComponent,
+		LegendComponent,
+		TitleComponent,
+		TooltipComponent,
+		GridComponent,
+		DatasetComponent,
+		LabelLayout,
+		CanvasRenderer,
+		MarkLineComponent,
+		MarkPointComponent,
+		MarkAreaComponent
+	]);
+
+	export type EChartsTheme = string | object;
+	export type EChartsRenderer = 'canvas' | 'svg';
+
+	export type EChartsConfig = {
+		theme?: EChartsTheme;
+		renderer?: EChartsRenderer;
+		option: EChartsOption;
+	};
+
+	export type DataRange = { start: number; end: number };
+	export type DataZoomEventSingle = { batch?: never } & DataRange;
+	export type DataZoomEventBatch = { batch: DataRange[]; start?: never; end?: never };
+
+	export type DataZoomEvent = DataZoomEventBatch | DataZoomEventSingle;
+
+	const DEFAULT_CONFIG: EChartsConfig = {
+		theme: undefined,
+		renderer: 'canvas',
+		option: {}
+	};
 </script>
 
-<script>import { createEventDispatcher } from "svelte";
-export let option;
-export let { theme, renderer } = DEFAULT_CONFIG;
-let instance;
-const dispatch = createEventDispatcher();
-const handleDataZoom = (event) => {
-  let start, end;
-  if (event.batch) {
-    const [info] = event.batch;
-    start = info.start;
-    end = info.end;
-  } else {
-    start = event.start;
-    end = event.end;
-  }
-  dispatch("datazoom", { event, start, end });
-};
-export function chartAction(element, echartsConfig) {
-  const { theme: theme2, renderer: renderer2, option: option2 } = {
-    ...DEFAULT_CONFIG,
-    ...echartsConfig
-  };
-  instance = init(element, theme2, { renderer: renderer2 });
-  const handleResize = () => {
-    instance.resize();
-  };
-  window.addEventListener("resize", handleResize);
-  instance.setOption(option2);
-  instance.on("datazoom", handleDataZoom);
-  return {
-    destroy() {
-      instance.off("datazoom", handleDataZoom);
-      window.removeEventListener("resize", handleResize);
-      instance.dispose();
-    },
-    update(config) {
-      instance.setOption({
-        ...echartsConfig.option,
-        ...config.option
-      });
-    }
-  };
-}
-export function showLoading(text) {
-  instance.showLoading({ text: text || "" });
-}
-export function hideLoading() {
-  instance.hideLoading();
-}
+<script lang="ts">
+	let {
+		onLoad,
+		config,
+		onDataZoom,
+		loading = $bindable(false),
+		onClear = $bindable(),
+		isDark = false
+	}: {
+		onLoad: (instance: ECharts) => Promise<void>;
+		config?: Partial<EChartsConfig>;
+		onDataZoom?: (event: DataZoomEventSingle) => void;
+		loading?: boolean;
+		onClear?: () => void;
+		isDark?: boolean;
+	} = $props();
+
+	let instance: ECharts;
+
+	const { theme, renderer, option } = {
+		...DEFAULT_CONFIG,
+		...config
+	};
+
+	const handleDataZoom = (zoomEvent: unknown) => {
+		if (!onDataZoom) {
+			return;
+		}
+
+		const event = zoomEvent as DataZoomEvent;
+		let start: number, end: number;
+
+		if (event.batch) {
+			const [info] = event.batch;
+			start = info.start;
+			end = info.end;
+		} else {
+			start = event.start;
+			end = event.end;
+		}
+
+		onDataZoom({ start, end });
+	};
+
+	function chartAction(element: HTMLElement) {
+		instance = init(element, isDark ? 'dark' : undefined, { renderer });
+
+		const handleResize = () => {
+			instance.resize();
+		};
+		window.addEventListener('resize', handleResize);
+		instance.on('datazoom', handleDataZoom);
+
+		if (Object.keys(option).length) {
+			instance.setOption(option);
+		}
+
+		onClear = () => instance.clear();
+
+		onLoad(instance);
+
+		return {
+			destroy() {
+				instance.off('datazoom', handleDataZoom);
+				window.removeEventListener('resize', handleResize);
+				instance.dispose();
+			}
+			/**
+			 * @todo
+			 * Limiting option assignment. Review implementation
+			 */
+			// update(config: EChartsConfig) {
+			// 	instance.setOption({
+			// 		...echartsConfig.option,
+			// 		...config.option
+			// 	});
+			// }
+		};
+	}
+
+	$effect(() => {
+		if (instance) {
+			instance.setTheme({ backgroundColor: isDark ? '#100c2a' : '#fff' });
+		}
+	});
 </script>
 
-<div id="chart" class="echarts" use:chartAction={{ renderer, theme, option }}></div>
+<div style="position: relative; width: 100%; height: 100%;">
+	<div id="chart" class="echarts" use:chartAction></div>
+</div>
 
 <style>
 	.echarts {
 		width: 100%;
-		height: 75vh;
+		height: 100%;
+		min-height: 300px;
+		position: relative;
+		z-index: 1;
 	}
 </style>

package/dist/SVECharts.svelte.d.ts

@@ -1,5 +1,5 @@
-import { SvelteComponent } from "svelte";
-import type { EChartsOption } from './types';
+import type { ECharts, EChartsOption } from './types';
+import 'echarts/theme/dark.js';
 export type EChartsTheme = string | object;
 export type EChartsRenderer = 'canvas' | 'svg';
 export type EChartsConfig = {
@@ -11,38 +11,24 @@ export type DataRange = {
     start: number;
     end: number;
 };
-export type DataZoomEvent = CustomEvent<DataRange>;
-declare const __propDef: {
-    props: {
-        option: EChartsOption;
-        theme?: EChartsTheme | undefined;
-        renderer?: EChartsRenderer | undefined;
-        chartAction?: (element: HTMLElement, echartsConfig: EChartsConfig) => {
-            destroy(): void;
-            update(config: EChartsConfig): void;
-        };
-        showLoading?: (text?: string) => void;
-        hideLoading?: () => void;
-    };
-    events: {
-        datazoom: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+export type DataZoomEventSingle = {
+    batch?: never;
+} & DataRange;
+export type DataZoomEventBatch = {
+    batch: DataRange[];
+    start?: never;
+    end?: never;
 };
-export type SveChartsProps = typeof __propDef.props;
-export type SveChartsEvents = typeof __propDef.events;
-export type SveChartsSlots = typeof __propDef.slots;
-export default class SveCharts extends SvelteComponent<SveChartsProps, SveChartsEvents, SveChartsSlots> {
-    get chartAction(): (element: HTMLElement, echartsConfig: EChartsConfig) => {
-        destroy(): void;
-        update(config: EChartsConfig): void;
-    };
-    get showLoading(): (text?: string) => void;
-    get hideLoading(): () => void;
-}
-export {};
+export type DataZoomEvent = DataZoomEventBatch | DataZoomEventSingle;
+type $$ComponentProps = {
+    onLoad: (instance: ECharts) => Promise<void>;
+    config?: Partial<EChartsConfig>;
+    onDataZoom?: (event: DataZoomEventSingle) => void;
+    loading?: boolean;
+    onClear?: () => void;
+    isDark?: boolean;
+};
+declare const SVECharts: import("svelte").Component<$$ComponentProps, {}, "loading" | "onClear">;
+type SVECharts = ReturnType<typeof SVECharts>;
+export default SVECharts;
 //# sourceMappingURL=SVECharts.svelte.d.ts.map

package/dist/SVECharts.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SVECharts.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SVECharts.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAaA,OAAO,KAAK,EAAW,aAAa,EAAE,MAAM,SAAS,CAAC;AActD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;AAC3C,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG;IAC3B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,MAAM,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACZ,CAAC;AACF,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AA4EpD,QAAA,MAAM,SAAS;;gBADmJ,aAAa;;;gCA5C/I,WAAW,iBAAiB,aAAa;;2BAoBvD,aAAa;;8BAQD,MAAM;;;;;;;;;;;CAiBmB,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,eAAe,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;IACnG,IAAI,WAAW,cAnDa,WAAW,iBAAiB,aAAa;;uBAoBvD,aAAa;MA+BuD;IAClF,IAAI,WAAW,YAxBW,MAAM,UAwBkD;IAClF,IAAI,WAAW,eAAmE;CACrF"}
+{"version":3,"file":"SVECharts.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SVECharts.svelte.ts"],"names":[],"mappings":"AAkBC,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACtD,OAAO,uBAAuB,CAAC;AAmB/B,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;AAC3C,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG;IAC3B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,MAAM,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AACvD,MAAM,MAAM,mBAAmB,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG,SAAS,CAAC;AAChE,MAAM,MAAM,kBAAkB,GAAG;IAAE,KAAK,EAAE,SAAS,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,GAAG,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEpF,MAAM,MAAM,aAAa,GAAG,kBAAkB,GAAG,mBAAmB,CAAC;AAQrE,KAAK,gBAAgB,GAAI;IACxB,MAAM,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AA2FH,QAAA,MAAM,SAAS,yEAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/TimeSeriesChartBuilder.d.ts

@@ -0,0 +1,131 @@
+import { type LineSeriesOption, type DataZoomComponentOption } from 'echarts';
+import { type ECharts } from './';
+import type { GridOption } from 'echarts/types/dist/shared';
+import type { ZRColor } from 'echarts/types/src/util/types.js';
+type IconType = 'circle' | 'rect' | 'roundRect' | 'triangle' | 'diamond' | 'pin' | 'arrowUp' | 'arrowDown' | 'none';
+type LabelPosition = 'top' | 'left' | 'right' | 'bottom' | 'inside' | 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom' | 'insideTopLeft' | 'insideBottomLeft' | 'insideTopRight' | 'insideBottomRight';
+type MarkerPointOption = {
+    icon: IconType;
+    color: ZRColor;
+    position: LabelPosition;
+    symbolSize: number;
+};
+type DatasetFormatSimpleObject = Record<string, number[]>;
+type DatasetFormatObject = Record<string, any>[];
+type DatasetFormatArray = number[][];
+/**
+ *
+ * ConfigBuilder:
+ * externalManagerLegend: Hides EChart legends to allow external management
+ *
+ */
+type ConfigBuilder = {
+    externalManagerLegend?: boolean;
+};
+export type MarkerEvent = {
+    name?: string;
+    xAxis: number[];
+    icon?: IconType;
+    color?: ZRColor;
+    position?: 'aboveBar' | 'belowBar';
+};
+export type MarkArea = {
+    name?: string;
+    xAxis: [number, number];
+    color?: ZRColor;
+};
+export declare class TimeSeriesChartBuilder {
+    ECharts: ECharts;
+    private builderConfig;
+    private option;
+    private yDimensions;
+    private yDimensionNames?;
+    private _tsColumn;
+    constructor(instance: ECharts, builderConfig?: ConfigBuilder);
+    /**
+     * Accepts data as rows: [timestamp, v1, v2, ...]
+     * Automatically generates line series for each value column (>=1).
+     */
+    setDataset(data: DatasetFormatArray | DatasetFormatObject | DatasetFormatSimpleObject, yDimensionsNames?: string[]): this;
+    toggleLegend(column: string): this;
+    goToZoom(start: number, end: number): this;
+    /**
+     * data: [1658870400, 823, 95.8, ...]
+     * dimensionsNames: ['_ts', 'price', 'otherColumn', ...]
+     */
+    private setDatasetByArray;
+    /**
+     * Data is an array of objects.
+     * [
+     *	{_ts: 1658870400, price: 823, otherColumn: 95.8},
+     *  {...}
+     * ]
+     */
+    private setDataByObject;
+    private setDataByObjectSimple;
+    addDimension(data: DatasetFormatSimpleObject, dimName: string): this;
+    private getColumnsSelected;
+    addSeries(dim: string, dimName: string, isSelected: boolean): void;
+    /**
+     * Tooltip bound to axis with a crosshair pointer.
+     */
+    setAxisTooltip(): this;
+    /**
+     * Legend with a custom icon (e.g., 'circle', 'rect').
+     */
+    setLegendIcon(icon: IconType): this;
+    /**
+     * Adds both inside and slider dataZoom.
+     */
+    setDataZoom(zoomOptions: DataZoomComponentOption): this;
+    setGrid(gridOption: GridOption): this;
+    /**
+     * Sets chart title and optional subtitle, centered.
+     */
+    setTitle(text: string, subtext?: string): this;
+    /**
+     * Applies a partial style to all existing series (e.g., { smooth: true, symbol: 'none' }).
+     */
+    setSeriesStyle(style: Partial<LineSeriesOption>): this;
+    /**
+     * Adds a marker event to the chart.
+     */
+    addMarkerEvents(data: MarkerEvent[], widthLine?: number): this;
+    /**
+     * Adds a marker area event to the chart.
+     */
+    addMarkArea(data: MarkArea[]): this;
+    private getIcon;
+    addMarkerPoint(id: number, data: {
+        dimName: string;
+        timestamp: number;
+        name?: string;
+    }, options?: Partial<MarkerPointOption>): this;
+    private isNumberArray;
+    /**
+     * Creates the series data
+     */
+    private createSeriesData;
+    /**
+     * Search for the dimension key and timestamp
+     */
+    private searchValueByDimensionKeyAndTimestamp;
+    /**
+     * Return the percentage fields in the dataset
+     */
+    private detectPercentageFields;
+    build(): this;
+    getDimensionKeys(): {
+        y: string[];
+        x: string;
+    };
+    getLegendStatus(): Record<string, boolean>;
+    getTotalRows(): number;
+    private isSimpleObject;
+    private isRecordArray;
+    private isNumberMatrix;
+    getRangeValues(): any[];
+    toggleMarkers(id: number, dimName: string, shape: string): this | undefined;
+}
+export {};
+//# sourceMappingURL=TimeSeriesChartBuilder.d.ts.map

package/dist/TimeSeriesChartBuilder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeSeriesChartBuilder.d.ts","sourceRoot":"","sources":["../src/lib/TimeSeriesChartBuilder.ts"],"names":[],"mappings":"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"}

package/dist/TimeSeriesChartBuilder.js

@@ -0,0 +1,699 @@
+import {} from 'echarts';
+import {} from './';
+export class TimeSeriesChartBuilder {
+    ECharts;
+    builderConfig = {
+        externalManagerLegend: false
+    };
+    option = {};
+    yDimensions;
+    yDimensionNames;
+    _tsColumn = '_ts';
+    constructor(instance, builderConfig) {
+        this.ECharts = instance;
+        this.builderConfig = { ...this.builderConfig, ...builderConfig };
+        this.option.animation = false;
+        this.option.legend = this.builderConfig.externalManagerLegend
+            ? {
+                show: false,
+                selected: {}
+            }
+            : {
+                top: '5%',
+                selected: {}
+            };
+        this.option.grid = {
+            top: '10%',
+            left: '3%',
+            right: '4%',
+            bottom: '15%',
+            containLabel: true
+        };
+        this.option.dataZoom = [
+            {
+                type: 'inside',
+                filterMode: 'filter',
+                zoomOnMouseWheel: true,
+                moveOnMouseMove: true,
+                realtime: true,
+                start: 45,
+                end: 55
+            },
+            {
+                top: '86%',
+                left: '8%',
+                right: '8%',
+                bottom: '5%',
+                type: 'slider',
+                show: true,
+                filterMode: 'filter',
+                realtime: false
+            }
+        ];
+        this.option.tooltip = {
+            trigger: 'axis',
+            axisPointer: { type: 'cross' }
+        };
+        this.option.xAxis = {
+            type: 'time',
+            axisLine: { show: true }
+        };
+        this.option.yAxis = [
+            {
+                type: 'value',
+                scale: true,
+                splitLine: { show: false },
+                axisLine: { show: true, lineStyle: { type: 'dashed' } }
+            },
+            {
+                type: 'value',
+                scale: true,
+                splitLine: { show: false },
+                axisLine: { show: true, lineStyle: { type: 'dashed' } },
+                axisLabel: {
+                    formatter: (value) => `${value.toFixed(2)}%`
+                },
+                name: '%'
+            }
+        ];
+        this.option.dataset = {
+            dimensions: [],
+            source: []
+        };
+        this.option.series = [];
+    }
+    /**
+     * Accepts data as rows: [timestamp, v1, v2, ...]
+     * Automatically generates line series for each value column (>=1).
+     */
+    setDataset(data, yDimensionsNames) {
+        if (!Array.isArray(data)) {
+            this.setDataByObjectSimple(data, yDimensionsNames);
+        }
+        else {
+            if (data.length < 2) {
+                throw new Error('Minimum data length is 2.');
+            }
+            if (this.isNumberArray(data)) {
+                if (!yDimensionsNames?.length) {
+                    throw new Error('Requires yDimensionsNames. e.g. ["v1", "v2", "v3"]');
+                }
+                this.setDatasetByArray(data, yDimensionsNames);
+            }
+            else if (this.isRecordArray(data)) {
+                this.setDataByObject(data, yDimensionsNames);
+            }
+            else {
+                throw new Error('Data must be an array');
+            }
+        }
+        return this.build();
+    }
+    toggleLegend(column) {
+        if (!column || !this.ECharts)
+            return this;
+        const selected = this.getColumnsSelected();
+        selected[column] = !selected[column];
+        this.ECharts.dispatchAction({
+            type: 'legendToggleSelect',
+            name: column
+        });
+        return this;
+    }
+    goToZoom(start, end) {
+        this.ECharts.dispatchAction({
+            type: 'dataZoom',
+            dataZoomIndex: 0,
+            start,
+            end
+        });
+        return this;
+    }
+    /**
+     * data: [1658870400, 823, 95.8, ...]
+     * dimensionsNames: ['_ts', 'price', 'otherColumn', ...]
+     */
+    setDatasetByArray(data, dimensionsNames, xAxisName) {
+        // Build series based on number of columns (minus the time column).
+        const columns = Array.isArray(data) && data.length > 0 ? data[0].length : 0;
+        const totalCol = Math.max(0, columns);
+        if (totalCol !== dimensionsNames?.length) {
+            throw new Error(`Dimensions length ${dimensionsNames?.length} does not match total columns ${totalCol}.`);
+        }
+        /**
+         * First column is the time dimension.
+         * ------
+         * _ts  |
+         * ------
+         */
+        const timeDimensionKey = dimensionsNames.shift();
+        if (timeDimensionKey === undefined) {
+            throw new Error('No time dimension found.');
+        }
+        this._tsColumn = timeDimensionKey;
+        /**
+         * TimeDimensionName is the name of the time dimension.
+         */
+        const timeDimensionName = xAxisName || this._tsColumn;
+        /**
+         * YDimensions are the column names.
+         * --------------------------------------------------------
+         * Column 1 | Column 2 | Column 3 | Column 4 | Column 5
+         * --------------------------------------------------------
+         */
+        this.yDimensions = dimensionsNames;
+        this.yDimensionNames = dimensionsNames;
+        /**
+         * Dataset is an array of rows.
+         * --------------------------------------------------------------------------------
+         * Dimensions |    TIME    | Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
+         * --------------------------------------------------------------------------------
+         * Source     | 1658870400 |  32.4    |  32.7    |  32.8    |  32.9    |  32.5    |
+         * --------------------------------------------------------------------------------
+         */
+        if (this.option.dataset && !Array.isArray(this.option.dataset)) {
+            this.option.dataset.dimensions = [timeDimensionKey, ...this.yDimensions];
+            this.option.dataset.source = data;
+        }
+        this.createSeriesData(this._tsColumn, timeDimensionName);
+    }
+    /**
+     * Data is an array of objects.
+     * [
+     *	{_ts: 1658870400, price: 823, otherColumn: 95.8},
+     *  {...}
+     * ]
+     */
+    setDataByObject(data, dimensionsNames) {
+        if (data.length < 2) {
+            throw new Error('Minimum data length is 2.');
+        }
+        // All dimensions are obtained based on the keys of the first element in the array.
+        // The first dimension, corresponding to time, is separated.
+        const dimensionKeys = Object.keys(data[0]);
+        const timeDimensionKey = dimensionKeys.shift();
+        if (timeDimensionKey === undefined) {
+            throw new Error('No time dimension found.');
+        }
+        this._tsColumn = timeDimensionKey;
+        // If custom dimension names are specified, those values will be used.
+        // By default, the dimensions will keep the same names as the original keys.
+        const timeDimensionName = dimensionsNames ? dimensionsNames.shift() : this._tsColumn;
+        /**
+         * `yDimensions` represents all data keys except the time dimension.
+         * -------------------
+         * price | otherColumn
+         * -------------------
+         */
+        this.yDimensions = dimensionKeys;
+        // If custom dimension names are specified, those values will be used.
+        // By default, the dimensions will keep the same names as the original keys.
+        this.yDimensionNames = dimensionsNames || dimensionKeys;
+        if (this.option.dataset && !Array.isArray(this.option.dataset)) {
+            this.option.dataset.dimensions = [this._tsColumn, ...this.yDimensions];
+            this.option.dataset.source = data;
+        }
+        this.createSeriesData(this._tsColumn, timeDimensionName);
+    }
+    setDataByObjectSimple(data, dimensionsNames) {
+        // All dimensions are obtained based on the keys of the first element in the array.
+        // The first dimension, corresponding to time, is separated.
+        const dimensionKeys = Object.keys(data);
+        const timeDimensionKey = dimensionKeys.shift();
+        if (timeDimensionKey === undefined) {
+            throw new Error('No time dimension found.');
+        }
+        this._tsColumn = timeDimensionKey;
+        // If custom dimension names are specified, those values will be used.
+        // By default, the dimensions will keep the same names as the original keys.
+        const timeDimensionName = dimensionsNames ? dimensionsNames.shift() : this._tsColumn;
+        /**
+         * `yDimensions` represents all data keys except the time dimension.
+         * -------------------
+         * price | otherColumn
+         * -------------------
+         */
+        this.yDimensions = dimensionKeys;
+        // If custom dimension names are specified, those values will be used.
+        // By default, the dimensions will keep the same names as the original keys.
+        this.yDimensionNames = dimensionsNames || dimensionKeys;
+        if (this.option.dataset && !Array.isArray(this.option.dataset)) {
+            this.option.dataset.dimensions = [this._tsColumn, ...this.yDimensions];
+            this.option.dataset.source = data;
+        }
+        this.createSeriesData(this._tsColumn, timeDimensionName);
+    }
+    addDimension(data, dimName) {
+        this.yDimensions.push(dimName);
+        this.yDimensionNames?.push(dimName);
+        if (this.option.dataset && !Array.isArray(this.option.dataset) && this.option.dataset.source) {
+            this.option.dataset.dimensions?.push(dimName);
+            Object.assign(this.option.dataset.source, data);
+        }
+        Object.keys(data).forEach((key) => this.addSeries(key, dimName, true));
+        this.build();
+        return this;
+    }
+    getColumnsSelected() {
+        const selected = this.option.legend.selected;
+        return selected;
+    }
+    addSeries(dim, dimName, isSelected) {
+        const percentageFields = this.detectPercentageFields();
+        const isPercentage = percentageFields.includes(dim);
+        const selected = this.getColumnsSelected();
+        Object.assign(selected, { [dimName]: isSelected });
+        const series = this.option.series;
+        series.push({
+            type: 'line',
+            animation: false,
+            id: dim,
+            name: dimName,
+            encode: { x: this._tsColumn, y: dim },
+            emphasis: {
+                focus: 'none',
+                disabled: true
+            },
+            connectNulls: false,
+            smooth: false,
+            sampling: 'lttb',
+            showSymbol: false,
+            progressive: 4000,
+            progressiveThreshold: 3000,
+            progressiveChunkMode: 'mod',
+            silent: true,
+            clip: true,
+            lineStyle: { width: 1 },
+            yAxisIndex: isPercentage ? 1 : 0,
+            label: {
+                show: true,
+                backgroundColor: '#000000ff',
+                color: '#fff',
+                fontSize: 10,
+                fontWeight: 'bold',
+                borderRadius: 3,
+                padding: [5, 5, 5, 5],
+                position: 'inside',
+                formatter(params) {
+                    if (!params.seriesId || !params.data)
+                        return '';
+                    const value = params.data;
+                    if (value[params.seriesId]) {
+                        return `${value[params.seriesId].toFixed(2)}${isPercentage ? '%' : ''}`;
+                    }
+                    const idx = params.componentIndex + 1;
+                    if (value[idx]) {
+                        return `${value[idx].toFixed(2)}${isPercentage ? '%' : ''}`;
+                    }
+                    return '-';
+                }
+            }
+        });
+    }
+    /**
+     * Tooltip bound to axis with a crosshair pointer.
+     */
+    setAxisTooltip() {
+        this.option.tooltip = {
+            ...this.option.tooltip
+        };
+        return this;
+    }
+    /**
+     * Legend with a custom icon (e.g., 'circle', 'rect').
+     */
+    setLegendIcon(icon) {
+        this.option.legend = {
+            ...this.option.legend,
+            icon
+        };
+        return this;
+    }
+    /**
+     * Adds both inside and slider dataZoom.
+     */
+    setDataZoom(zoomOptions) {
+        this.option.dataZoom = zoomOptions;
+        return this;
+    }
+    setGrid(gridOption) {
+        this.option.grid = {
+            ...this.option.grid,
+            ...gridOption
+        };
+        return this;
+    }
+    /**
+     * Sets chart title and optional subtitle, centered.
+     */
+    setTitle(text, subtext) {
+        this.option.title = {
+            ...this.option.title,
+            text,
+            subtext
+        };
+        return this;
+    }
+    /**
+     * Applies a partial style to all existing series (e.g., { smooth: true, symbol: 'none' }).
+     */
+    setSeriesStyle(style) {
+        if (Array.isArray(this.option.series)) {
+            this.option.series = this.option.series.map((s) => ({
+                ...s,
+                ...style
+            }));
+        }
+        return this;
+    }
+    /**
+     * Adds a marker event to the chart.
+     */
+    addMarkerEvents(data, widthLine = 1) {
+        if (!Array.isArray(this.option.series)) {
+            throw new Error('Series must be an array');
+        }
+        for (const event of data) {
+            const position = event.position || 'aboveBar';
+            this.option.series.push({
+                type: 'line',
+                data: [],
+                markLine: {
+                    symbol: this.getIcon(event.icon || 'none'),
+                    symbolSize: [15, 15],
+                    symbolOffset: [
+                        [0, 15],
+                        [0, 15]
+                    ],
+                    label: {
+                        position: position === 'aboveBar' ? 'insideEnd' : 'insideStart',
+                        offset: position === 'aboveBar' ? [-35, 0] : [35, 0],
+                        distance: 0,
+                        color: 'white',
+                        formatter: event.name || '',
+                        fontSize: 12,
+                        fontFamily: 'Arial',
+                        fontStyle: 'normal',
+                        padding: 8,
+                        backgroundColor: event.name ? (event.color?.toString() ?? 'white') : undefined,
+                        borderRadius: 4
+                    },
+                    emphasis: {
+                        disabled: true
+                    },
+                    lineStyle: {
+                        color: event.color,
+                        width: widthLine,
+                        type: 'dashed'
+                    },
+                    data: event.xAxis.map((x) => ({ xAxis: x }))
+                }
+            });
+        }
+        return this.build();
+    }
+    /**
+     * Adds a marker area event to the chart.
+     */
+    addMarkArea(data) {
+        if (!Array.isArray(this.option.series)) {
+            throw new Error('Series must be an array');
+        }
+        for (const event of data) {
+            this.option.series.push({
+                type: 'line',
+                data: [],
+                markArea: {
+                    itemStyle: {
+                        color: event.color || 'rgba(0, 17, 255, 0.1)'
+                    },
+                    label: {
+                        position: 'top',
+                        formatter: event.name || '',
+                        fontWeight: 'bold',
+                        fontSize: 11
+                    },
+                    data: [
+                        [
+                            {
+                                xAxis: event.xAxis[0]
+                            },
+                            {
+                                xAxis: event.xAxis[1]
+                            }
+                        ]
+                    ]
+                }
+            });
+        }
+        this.addMarkerEvents(data.map((e) => ({ ...e, name: undefined })), 1);
+        return this.build();
+    }
+    getIcon(icon) {
+        const arrowUpPath = 'path://M7.414 27.414l16.586-16.586v7.172c0 1.105 0.895 2 2 2s2-0.895 2-2v-12c0-0.809-0.487-1.538-1.235-1.848-0.248-0.103-0.508-0.151-0.765-0.151v-0.001h-12c-1.105 0-2 0.895-2 2s0.895 2 2 2h7.172l-16.586 16.586c-0.391 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z';
+        const arrowDownPath = 'path://M4.586 7.414l16.586 16.586h-7.171c-1.105 0-2 0.895-2 2s0.895 2 2 2h12c0.809 0 1.538-0.487 1.848-1.235 0.103-0.248 0.151-0.508 0.151-0.765h0.001v-12c0-1.105-0.895-2-2-2s-2 0.895-2 2v7.172l-16.586-16.586c-0.391-0.391-0.902-0.586-1.414-0.586s-1.024 0.195-1.414 0.586c-0.781 0.781-0.781 2.047 0 2.828z';
+        const circlePath = 'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 28c-6.627 0-12-5.373-12-12s5.373-12 12-12c6.627 0 12 5.373 12 12s-5.373 12-12 12z';
+        if (icon === 'arrowDown') {
+            return arrowDownPath;
+        }
+        if (icon === 'arrowUp') {
+            return arrowUpPath;
+        }
+        if (icon === 'circle') {
+            return circlePath;
+        }
+        return icon;
+    }
+    addMarkerPoint(id, data, options) {
+        try {
+            const opt = {
+                icon: 'none',
+                position: 'inside',
+                symbolSize: 18,
+                color: 'black',
+                ...options
+            };
+            if (!Array.isArray(this.option.series)) {
+                throw new Error('Series must be an array');
+            }
+            if (Array.isArray(this.option.dataset)) {
+                throw new Error('Series must be an array');
+            }
+            // Search for the dimension
+            const seriesDimension = this.option.series
+                .filter((s) => s.encode && s.encode.y)
+                .find((s) => {
+                return s.encode.y === data.dimName;
+            });
+            if (!seriesDimension)
+                throw new Error(`Dimension ${data.dimName} not found`);
+            let value = this.searchValueByDimensionKeyAndTimestamp(data.dimName, data.timestamp);
+            /**
+             * Creates a data point for the marker
+             */
+            const dataPoint = () => {
+                return {
+                    name: `markerpoint-${id}`,
+                    coord: [data.timestamp, value],
+                    symbol: this.getIcon(opt.icon),
+                    symbolSize: opt.symbolSize,
+                    symbolOffset: [0, -1 * (opt.symbolSize * 3)],
+                    itemStyle: {
+                        color: opt.color,
+                        borderColor: opt.color,
+                        borderWidth: 2
+                    },
+                    label: {
+                        show: true,
+                        offset: [0, 30],
+                        formatter: data.name && Number(data.name)
+                            ? Number(data.name).toFixed(2)
+                            : (data.name ?? value.toFixed(2)),
+                        fontSize: 12,
+                        fontWeight: 'bold',
+                        color: 'white',
+                        backgroundColor: opt.color,
+                        padding: 4,
+                        borderRadius: 4
+                    },
+                    z: 11
+                };
+            };
+            // Create markPoint if it doesn't exist
+            if (!seriesDimension.markPoint) {
+                seriesDimension.markPoint = {
+                    data: [dataPoint()]
+                };
+            }
+            else {
+                seriesDimension.markPoint.data.push(dataPoint());
+            }
+        }
+        catch (error) {
+            console.error(error.message);
+        }
+        return this;
+    }
+    isNumberArray(arr) {
+        return Array.isArray(arr[0]);
+    }
+    /**
+     * Creates the series data
+     */
+    createSeriesData(timeDimensionKey, timeDimensionName) {
+        if (!this.yDimensions?.length || !this.yDimensionNames?.length) {
+            throw new Error('No dimensions found.');
+        }
+        if (this.yDimensions.length !== this.yDimensionNames.length) {
+            throw new Error(`Dimensions length ${this.yDimensionNames.length} does not match total columns ${this.yDimensions.length}.`);
+        }
+        this.option.xAxis = { type: 'time', name: timeDimensionName };
+        this.yDimensions.map((dim, inx) => this.addSeries(dim, this.yDimensionNames[inx], (this.yDimensions.length > 1 && dim === 'price') || this.yDimensions.length === 1));
+    }
+    /**
+     * Search for the dimension key and timestamp
+     */
+    searchValueByDimensionKeyAndTimestamp(yDimKey, timestamp) {
+        const dataset = this.option.dataset;
+        if (!dataset.dimensions.find((d) => d === yDimKey)) {
+            throw new Error('No source data or dimensions found. Before loading data');
+        }
+        if (Array.isArray(dataset.source)) {
+            if (this.isNumberArray(dataset.source)) {
+                const dataFind = dataset.source.find((row) => {
+                    return row[0] === timestamp;
+                });
+                if (!dataFind) {
+                    throw new Error(`No data found in timestamp ${timestamp}`);
+                }
+                const yDimensionKey = dataset.dimensions.findIndex((d) => d === yDimKey);
+                return dataFind[yDimensionKey];
+            }
+            else if (this.isRecordArray(dataset.source)) {
+                const dataFind = dataset.source.find((row) => {
+                    return row[this._tsColumn] === timestamp;
+                });
+                if (!dataFind) {
+                    throw new Error(`No data found in timestamp ${timestamp}`);
+                }
+                return dataFind[yDimKey];
+            }
+        }
+        else {
+            const dataFind = dataset.source[this._tsColumn].indexOf(timestamp);
+            if (dataFind === -1) {
+                throw new Error(`No data found in timestamp ${timestamp}`);
+            }
+            return dataset.source[yDimKey][dataFind];
+        }
+    }
+    /**
+     * Return the percentage fields in the dataset
+     */
+    detectPercentageFields() {
+        if (!this.yDimensions?.length) {
+            throw new Error('No dimensions found.');
+        }
+        const percentFields = this.yDimensions.filter((key) => !key.startsWith('_') && key.endsWith('%'));
+        return percentFields;
+    }
+    build() {
+        const option = this.ECharts.getOption();
+        if (option &&
+            option.dataZoom &&
+            Array.isArray(option.dataZoom) &&
+            Array.isArray(this.option.dataZoom)) {
+            this.option.dataZoom[0].start = option.dataZoom[0].start;
+            this.option.dataZoom[0].end = option.dataZoom[0].end;
+        }
+        this.ECharts.setOption(this.option, {
+            lazyUpdate: true,
+            notMerge: false,
+            replaceMerge: ['dataset']
+        });
+        return this;
+    }
+    getDimensionKeys() {
+        return {
+            y: this.yDimensionNames,
+            x: this._tsColumn
+        };
+    }
+    getLegendStatus() {
+        return this.getColumnsSelected();
+    }
+    getTotalRows() {
+        const dataset = this.option.dataset;
+        if (Array.isArray(dataset.source)) {
+            return dataset.source.length;
+        }
+        else {
+            return dataset.source[this._tsColumn].length;
+        }
+    }
+    isSimpleObject(s) {
+        return !Array.isArray(s) && typeof s === 'object' && s !== null;
+    }
+    isRecordArray(source) {
+        return Array.isArray(source) && (source.length === 0 || !Array.isArray(source[0]));
+    }
+    isNumberMatrix(source) {
+        return Array.isArray(source) && (source.length === 0 || Array.isArray(source[0]));
+    }
+    getRangeValues() {
+        const dataset = this.option.dataset;
+        const source = dataset.source;
+        // ---- Record<string, any>[] ----
+        if (this.isRecordArray(source)) {
+            if (!source.length)
+                return [0, 0];
+            const objSource = source;
+            const firstRow = objSource[0];
+            const lastRow = objSource[objSource.length - 1];
+            const first = firstRow[this._tsColumn];
+            const last = lastRow[this._tsColumn];
+            return [first, last];
+        }
+        // ---- number[][] ----
+        if (this.isNumberMatrix(source)) {
+            if (!source.length)
+                return [0, 0];
+            const matrixSource = source;
+            const tsIndex = dataset.dimensions.indexOf(this._tsColumn);
+            const idx = tsIndex === -1 ? 0 : tsIndex;
+            const firstRow = matrixSource[0];
+            const lastRow = matrixSource[matrixSource.length - 1];
+            const first = firstRow[idx];
+            const last = lastRow[idx];
+            return [first, last];
+        }
+        // ---- Record<string, number[]> ----
+        if (this.isSimpleObject(source)) {
+            const col = source[this._tsColumn];
+            if (!col?.length)
+                return [0, 0];
+            return [col[0], col[col.length - 1]];
+        }
+        return [0, 0];
+    }
+    toggleMarkers(id, dimName, shape) {
+        if (!Array.isArray(this.option.series)) {
+            throw new Error('Series must be an array');
+        }
+        if (Array.isArray(this.option.dataset)) {
+            throw new Error('Series must be an array');
+        }
+        // Search for the dimension
+        const seriesDimension = this.option.series.find((s) => {
+            return s.encode && s.encode.y && s.encode.y === dimName;
+        });
+        const markerPoints = seriesDimension?.markPoint.data;
+        const point = markerPoints.find((mp) => mp.name === `markerpoint-${id}`);
+        if (!point) {
+            return;
+        }
+        point.symbol = point.symbol === 'none' ? this.getIcon(shape) : 'none';
+        this.build();
+        return this;
+    }
+}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { default as SVECharts } from './SVECharts.svelte';
+export { TimeSeriesChartBuilder } from './TimeSeriesChartBuilder';
 export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -1,2 +1,3 @@
 export { default as SVECharts } from './SVECharts.svelte';
+export { TimeSeriesChartBuilder } from './TimeSeriesChartBuilder';
 export * from './types';

package/dist/mockDataSet.d.ts

@@ -0,0 +1,5 @@
+export declare function createDataSet<T>(hours: number, type: 'object' | 'array'): {
+    data: T[];
+    yDimensionsNames: string[];
+};
+//# sourceMappingURL=mockDataSet.d.ts.map

package/dist/mockDataSet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mockDataSet.d.ts","sourceRoot":"","sources":["../src/lib/mockDataSet.ts"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO;UA8BxD,CAAC,EAAE;;EAGlB"}

package/dist/mockDataSet.js

@@ -0,0 +1,32 @@
+export function createDataSet(hours, type) {
+    // Create random number between min and max
+    const random = (min = 45, max = 50) => Math.random() * max + min;
+    const rows = [];
+    const YDimensionsName = ['_ts', 'price', 'Column 2', 'Column 3', 'Column 4', 'Column 5 %'];
+    // Create a date range
+    let startDate = new Date(2025, 9, 28, 14, 0, 0).getTime();
+    // Create random data per hour
+    for (let i = 0; i < hours; i++) {
+        // Add 1 hour
+        const ts = new Date(startDate + i * 60000).getTime();
+        if (type === 'object') {
+            rows.push({
+                _ts: ts,
+                price: random(),
+                col2: random(),
+                col3: random(),
+                col4: random(),
+                'col5%': random(0, 5)
+            });
+            continue;
+        }
+        else {
+            rows.push([ts, random(), random(), random(), random(), random()]);
+            continue;
+        }
+    }
+    return {
+        data: rows,
+        yDimensionsNames: YDimensionsName
+    };
+}

package/package.json

@@ -1,10 +1,10 @@
 {
+  "private": false,
   "name": "@qtsurfer/sveltecharts",
-  "version": "0.2.12",
-  "author": {
-    "name": "QTSurfer",
-    "url": "https://github.com/QTSurfer"
-  },
+  "version": "0.4.0",
+  "license": "Apache-2.0",
+  "author": "QTSurfer (https://github.com/QTSurfer)",
+  "homepage": "https://github.com/QTSurfer/svelte-timeseries/tree/main/packages/sveltecharts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/QTSurfer/svelte-timeseries.git",
@@ -13,8 +13,7 @@
   "bugs": {
     "url": "https://github.com/QTSurfer/svelte-timeseries/issues"
   },
-  "license": "Apache-2.0",
-  "homepage": "https://github.com/QTSurfer/svelte-timeseries",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -22,58 +21,59 @@
     }
   },
   "files": [
-    "package.json",
-    "README.md",
-    "LICENSE",
     "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
+    "!dist/**/*.spec.*",
+    "!dist/**/*.test.*"
   ],
+  "types": "./dist/index.d.ts",
   "peerDependencies": {
-    "echarts": "^5.6.0",
-    "svelte": "^4.0.0"
+    "echarts": "^6.0.0",
+    "svelte": "^5.43.14"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.20.0",
-    "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.17.1",
-    "@sveltejs/package": "^2.3.10",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.39.1",
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.48.6",
+    "@sveltejs/package": "^2.5.6",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^22.13.1",
-    "@typescript-eslint/eslint-plugin": "^8.23.0",
-    "@typescript-eslint/parser": "^8.23.0",
-    "eslint": "^9.20.0",
-    "eslint-config-prettier": "^10.0.0",
-    "eslint-plugin-svelte": "^2.46.1",
-    "globals": "^15.14.0",
-    "prettier": "^3.5.0",
-    "prettier-plugin-svelte": "^3.3.3",
-    "publint": "^0.3.4",
-    "svelte": "^4.2.19",
-    "svelte-check": "^3.8.6",
-    "typescript": "^5.7.3",
-    "vite": "^5.4.14",
-    "vitest": "^1.6.1"
+    "@types/node": "^24.10.1",
+    "@typescript-eslint/eslint-plugin": "^8.47.0",
+    "@typescript-eslint/parser": "^8.47.0",
+    "echarts": "^6.0.0",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.13.0",
+    "globals": "^16.5.0",
+    "npm-run-all2": "^8.0.4",
+    "prettier": "^3.6.2",
+    "prettier-plugin-svelte": "^3.4.0",
+    "publint": "^0.3.15",
+    "svelte": "^5.43.14",
+    "svelte-check": "^4.3.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4",
+    "vitest": "^4.0.12"
   },
-  "dependencies": {
-    "echarts": "^5.6.0"
+  "publishConfig": {
+    "access": "public"
   },
   "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "type": "module",
   "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
+    "build": "run-s vite:build package",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test": "vitest",
+    "dev": "vite dev",
+    "format": "run-p format:all format:package",
+    "format:all": "prettier -l --write .",
+    "format:package": "npx prettier-package-json --write ./package.json",
+    "knip": "pnpm dlx knip",
     "lint": "prettier --check . && eslint .",
-    "format": "prettier --write .",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "preview": "vite preview",
     "publishd": "pnpm publish --dry-run --no-git-checks",
-    "knip": "pnpm dlx knip"
+    "test": "vitest",
+    "vite:build": "vite build"
   }
 }