@qtsurfer/sveltecharts 0.5.0 → 0.7.0

package/dist/LightweightTimeSeriesChartBuilder.d.ts

@@ -0,0 +1,58 @@
+import { type IChartApi } from 'lightweight-charts';
+import type { ChartDataset, ChartDatasetFormatSimpleObject, ChartMarkerPointOptions, TimeSeriesChartAdapter } from './chartAdapter';
+type ConfigBuilder = {
+    externalManagerLegend?: boolean;
+};
+export declare function getPricePrecision(values: number[]): number;
+export declare function formatPreciseValue(value: number): string;
+export declare class LightweightTimeSeriesChartBuilder implements TimeSeriesChartAdapter {
+    LightweightChart: IChartApi;
+    private builderConfig;
+    private dataset;
+    private yDimensions;
+    private yDimensionNames;
+    private _tsColumn;
+    private selected;
+    private series;
+    private markersPlugins;
+    private markers;
+    private _dataDirty;
+    private _building;
+    private _timeRangeForced;
+    constructor(instance: IChartApi, builderConfig?: ConfigBuilder);
+    setLegendIcon(_icon: string): this;
+    setDataset(data: ChartDataset, yDimensionsNames?: string[]): this;
+    addDimension(data: ChartDatasetFormatSimpleObject, dimName: string): this;
+    addMarkerPoint(id: number, data: {
+        dimName: string;
+        timestamp: number;
+        name?: string;
+    }, options?: ChartMarkerPointOptions): this;
+    build(): this;
+    getLegendStatus(): Record<string, boolean>;
+    toggleLegend(column: string): this;
+    goToZoom(start: number, end: number): this;
+    scrollToTime(timestamp: number): this;
+    getTotalRows(): number;
+    getRangeValues(): [number, number];
+    toggleMarkers(id: number, dimName: string, shape: string): this;
+    clearMarkers(): this;
+    private normalizeDataset;
+    private normalizeSimpleObject;
+    private normalizeObjectArray;
+    private normalizeMatrix;
+    private createSeriesData;
+    private addSeries;
+    private syncSeriesMarkers;
+    private expandTimeRangeForMarkers;
+    private clearSeries;
+    private toLineData;
+    private toChartTime;
+    private forceTimeRangeToDataset;
+    private isPercentageDimension;
+    private syncPriceScales;
+    private mapMarkerShape;
+    private mapMarkerPosition;
+}
+export {};
+//# sourceMappingURL=LightweightTimeSeriesChartBuilder.d.ts.map

package/dist/LightweightTimeSeriesChartBuilder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightweightTimeSeriesChartBuilder.d.ts","sourceRoot":"","sources":["../src/lib/LightweightTimeSeriesChartBuilder.ts"],"names":[],"mappings":"AAAA,OAAO,EAGN,KAAK,SAAS,EASd,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACX,YAAY,EAGZ,8BAA8B,EAC9B,uBAAuB,EACvB,sBAAsB,EACtB,MAAM,gBAAgB,CAAC;AAExB,KAAK,aAAa,GAAG;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AA6BF,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,UAWjD;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,UAW/C;AAED,qBAAa,iCAAkC,YAAW,sBAAsB;IACxE,gBAAgB,EAAE,SAAS,CAAC;IACnC,OAAO,CAAC,aAAa,CAEnB;IACF,OAAO,CAAC,OAAO,CAAsC;IACrD,OAAO,CAAC,WAAW,CAAgB;IACnC,OAAO,CAAC,eAAe,CAAgB;IACvC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,MAAM,CAA+C;IAC7D,OAAO,CAAC,cAAc,CAAoD;IAC1E,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,gBAAgB,CAAS;gBAErB,QAAQ,EAAE,SAAS,EAAE,aAAa,CAAC,EAAE,aAAa;IAK9D,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIlC,UAAU,CAAC,IAAI,EAAE,YAAY,EAAE,gBAAgB,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI;IAejE,YAAY,CAAC,IAAI,EAAE,8BAA8B,EAAE,OAAO,EAAE,MAAM;IAclE,cAAc,CACb,EAAE,EAAE,MAAM,EACV,IAAI,EAAE;QACL,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;KACd,EACD,OAAO,CAAC,EAAE,uBAAuB,GAC/B,IAAI;IAmBP,KAAK;IAqCL,eAAe;IAIf,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAWlC,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAuB1C,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAqBrC,YAAY;IAIZ,cAAc,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC;IAQlC,aAAa,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAmBxD,YAAY,IAAI,IAAI;IAQpB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,qBAAqB;IAqB7B,OAAO,CAAC,oBAAoB;IA2B5B,OAAO,CAAC,eAAe;IAsCvB,OAAO,CAAC,gBAAgB;IAmBxB,OAAO,CAAC,SAAS;IAuBjB,OAAO,CAAC,iBAAiB;IAoCzB,OAAO,CAAC,yBAAyB;IA4BjC,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,uBAAuB;IA4B/B,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,iBAAiB;CAWzB"}

package/dist/LightweightTimeSeriesChartBuilder.js

@@ -0,0 +1,465 @@
+import { LineSeries, createSeriesMarkers } from 'lightweight-charts';
+const SERIES_COLORS = ['#2563eb', '#16a34a', '#dc2626', '#7c3aed', '#d97706', '#0891b2'];
+const DEFAULT_PRICE_PRECISION = 2;
+const MAX_PRICE_PRECISION = 12;
+function getDecimalPrecision(value) {
+    if (!Number.isFinite(value) || value === 0) {
+        return 0;
+    }
+    const [mantissa, exponentValue] = Math.abs(value).toExponential(MAX_PRICE_PRECISION).split('e');
+    const exponent = Number(exponentValue);
+    const significantDecimals = (mantissa.split('.')[1] ?? '').replace(/0+$/, '').length;
+    return Math.max(0, Math.min(MAX_PRICE_PRECISION, significantDecimals - exponent));
+}
+export function getPricePrecision(values) {
+    let precision = DEFAULT_PRICE_PRECISION;
+    for (const value of values) {
+        precision = Math.max(precision, getDecimalPrecision(value));
+        if (precision >= MAX_PRICE_PRECISION) {
+            return MAX_PRICE_PRECISION;
+        }
+    }
+    return precision;
+}
+export function formatPreciseValue(value) {
+    if (!Number.isFinite(value)) {
+        return String(value);
+    }
+    const precision = getDecimalPrecision(value);
+    if (precision === 0) {
+        return value.toString();
+    }
+    return value.toFixed(precision).replace(/\.?0+$/, '');
+}
+export class LightweightTimeSeriesChartBuilder {
+    LightweightChart;
+    builderConfig = {
+        externalManagerLegend: false
+    };
+    dataset = {};
+    yDimensions = [];
+    yDimensionNames = [];
+    _tsColumn = '_ts';
+    selected = {};
+    series = new Map();
+    markersPlugins = new Map();
+    markers = new Map();
+    _dataDirty = false;
+    _building = false;
+    _timeRangeForced = false;
+    constructor(instance, builderConfig) {
+        this.LightweightChart = instance;
+        this.builderConfig = { ...this.builderConfig, ...builderConfig };
+    }
+    setLegendIcon(_icon) {
+        return this;
+    }
+    setDataset(data, yDimensionsNames) {
+        const normalized = this.normalizeDataset(data, yDimensionsNames);
+        this.clearSeries();
+        this.dataset = normalized.dataset;
+        this.yDimensions = normalized.yDimensions;
+        this.yDimensionNames = normalized.yDimensionNames;
+        this._tsColumn = normalized.tsColumn;
+        this.selected = {};
+        this._dataDirty = true;
+        this.createSeriesData();
+        return this.build();
+    }
+    addDimension(data, dimName) {
+        if (!this.dataset[this._tsColumn]?.length) {
+            throw new Error('No source data or dimensions found. Before loading data');
+        }
+        this.dataset[dimName] = data[dimName];
+        this.yDimensions.push(dimName);
+        this.yDimensionNames.push(dimName);
+        this._dataDirty = true;
+        this.addSeries(dimName, dimName, true);
+        return this.build();
+    }
+    addMarkerPoint(id, data, options) {
+        const markerState = {
+            id,
+            time: this.toChartTime(data.timestamp),
+            color: options?.color ?? '#000000',
+            shape: this.mapMarkerShape(options?.icon),
+            position: this.mapMarkerPosition(options?.position),
+            text: data.name,
+            visible: true,
+            size: options?.symbolSize ?? 4
+        };
+        const markers = this.markers.get(data.dimName) ?? [];
+        markers.push(markerState);
+        this.markers.set(data.dimName, markers);
+        this.syncSeriesMarkers(data.dimName);
+        return this;
+    }
+    build() {
+        if (this._building) {
+            return this;
+        }
+        this._building = true;
+        const visibleLogicalRange = this.LightweightChart.timeScale().getVisibleLogicalRange();
+        const rebuildData = this._dataDirty;
+        this._dataDirty = false;
+        if (rebuildData) {
+            for (const dim of this.yDimensions) {
+                const series = this.series.get(dim);
+                if (!series) {
+                    continue;
+                }
+                const lineData = this.toLineData(dim);
+                series.setData(lineData);
+                series.applyOptions({ visible: this.selected[dim] ?? false });
+            }
+            if (visibleLogicalRange) {
+                this.LightweightChart.timeScale().setVisibleLogicalRange(visibleLogicalRange);
+            }
+            else {
+                this.LightweightChart.timeScale().fitContent();
+                this.forceTimeRangeToDataset();
+            }
+        }
+        for (const dim of this.yDimensions) {
+            this.syncSeriesMarkers(dim);
+        }
+        this._building = false;
+        return this;
+    }
+    getLegendStatus() {
+        return this.selected;
+    }
+    toggleLegend(column) {
+        if (!column || !this.series.has(column)) {
+            return this;
+        }
+        const nextVisible = !(this.selected[column] ?? false);
+        this.selected[column] = nextVisible;
+        this.series.get(column)?.applyOptions({ visible: nextVisible });
+        return this;
+    }
+    goToZoom(start, end) {
+        const [min, max] = this.getRangeValues();
+        if (!min && !max) {
+            return this;
+        }
+        if (start <= 0 && end >= 100) {
+            this.LightweightChart.timeScale().fitContent();
+            return this;
+        }
+        const width = max - min;
+        const from = min + width * (start / 100);
+        const to = min + width * (end / 100);
+        this.LightweightChart.timeScale().setVisibleRange({
+            from: this.toChartTime(from),
+            to: this.toChartTime(to)
+        });
+        return this;
+    }
+    scrollToTime(timestamp) {
+        const timeSec = this.toChartTime(timestamp);
+        const timeScale = this.LightweightChart.timeScale();
+        const visibleRange = timeScale.getVisibleRange();
+        if (!visibleRange) {
+            timeScale.setVisibleRange({ from: timeSec, to: (timeSec + 60) });
+            return this;
+        }
+        const width = Number(visibleRange.to) - Number(visibleRange.from);
+        const halfWidth = Math.max(width / 2, 30);
+        timeScale.setVisibleRange({
+            from: (timeSec - halfWidth),
+            to: (timeSec + halfWidth)
+        });
+        return this;
+    }
+    getTotalRows() {
+        return this.dataset[this._tsColumn]?.length ?? 0;
+    }
+    getRangeValues() {
+        const timestamps = this.dataset[this._tsColumn] ?? [];
+        if (!timestamps.length) {
+            return [0, 0];
+        }
+        return [timestamps[0], timestamps[timestamps.length - 1]];
+    }
+    toggleMarkers(id, dimName, shape) {
+        const markers = this.markers.get(dimName);
+        if (!markers) {
+            return this;
+        }
+        const marker = markers.find((item) => item.id === id);
+        if (!marker) {
+            return this;
+        }
+        marker.visible = !marker.visible;
+        if (marker.visible) {
+            marker.shape = this.mapMarkerShape(shape);
+        }
+        this.syncSeriesMarkers(dimName);
+        return this;
+    }
+    clearMarkers() {
+        this.markers.clear();
+        for (const plugin of this.markersPlugins.values()) {
+            plugin.setMarkers([]);
+        }
+        return this;
+    }
+    normalizeDataset(data, yDimensionsNames) {
+        if (Array.isArray(data)) {
+            if (!data.length || Array.isArray(data[0])) {
+                return this.normalizeMatrix(data, yDimensionsNames);
+            }
+            return this.normalizeObjectArray(data, yDimensionsNames);
+        }
+        return this.normalizeSimpleObject(data, yDimensionsNames);
+    }
+    normalizeSimpleObject(data, yDimensionsNames) {
+        const keys = Object.keys(data);
+        const tsColumn = keys.shift();
+        if (!tsColumn) {
+            throw new Error('No time dimension found.');
+        }
+        if (yDimensionsNames?.length && yDimensionsNames.length !== keys.length + 1) {
+            throw new Error(`Dimensions length ${yDimensionsNames.length} does not match total columns ${keys.length + 1}.`);
+        }
+        return {
+            tsColumn,
+            dataset: data,
+            yDimensions: keys,
+            yDimensionNames: yDimensionsNames?.length ? yDimensionsNames.slice(1) : keys
+        };
+    }
+    normalizeObjectArray(data, yDimensionsNames) {
+        if (data.length < 2) {
+            throw new Error('Minimum data length is 2.');
+        }
+        const keys = Object.keys(data[0]);
+        const tsColumn = keys.shift();
+        if (!tsColumn) {
+            throw new Error('No time dimension found.');
+        }
+        const dataset = {
+            [tsColumn]: data.map((row) => Number(row[tsColumn]))
+        };
+        for (const key of keys) {
+            dataset[key] = data.map((row) => Number(row[key]));
+        }
+        return {
+            tsColumn,
+            dataset,
+            yDimensions: keys,
+            yDimensionNames: yDimensionsNames?.length ? yDimensionsNames.slice(1) : keys
+        };
+    }
+    normalizeMatrix(data, yDimensionsNames) {
+        if (data.length < 2) {
+            throw new Error('Minimum data length is 2.');
+        }
+        if (!yDimensionsNames?.length) {
+            throw new Error('Requires yDimensionsNames. e.g. ["v1", "v2", "v3"]');
+        }
+        const keys = [...yDimensionsNames];
+        const tsColumn = keys.shift();
+        if (!tsColumn) {
+            throw new Error('No time dimension found.');
+        }
+        const totalCol = data[0]?.length ?? 0;
+        if (totalCol !== yDimensionsNames.length) {
+            throw new Error(`Dimensions length ${yDimensionsNames.length} does not match total columns ${totalCol}.`);
+        }
+        const dataset = {
+            [tsColumn]: data.map((row) => Number(row[0]))
+        };
+        keys.forEach((key, index) => {
+            dataset[key] = data.map((row) => Number(row[index + 1]));
+        });
+        return {
+            tsColumn,
+            dataset,
+            yDimensions: keys,
+            yDimensionNames: keys
+        };
+    }
+    createSeriesData() {
+        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.syncPriceScales();
+        this.yDimensions.forEach((dim, index) => {
+            const isSelected = (this.yDimensions.length > 1 && dim === 'price') || this.yDimensions.length === 1;
+            this.addSeries(dim, this.yDimensionNames[index], isSelected, index);
+        });
+    }
+    addSeries(dim, dimName, isSelected, index) {
+        const pricePrecision = getPricePrecision(this.dataset[dim] ?? []);
+        const series = this.LightweightChart.addSeries(LineSeries, {
+            color: SERIES_COLORS[(index ?? this.series.size) % SERIES_COLORS.length],
+            lineWidth: 1,
+            title: dimName,
+            priceScaleId: this.isPercentageDimension(dim) ? 'left' : 'right',
+            visible: isSelected,
+            crosshairMarkerVisible: false,
+            lastValueVisible: true,
+            priceFormat: {
+                type: 'price',
+                precision: pricePrecision,
+                minMove: 10 ** -pricePrecision
+            }
+        });
+        this.series.set(dim, series);
+        this.selected[dim] = isSelected;
+        this.markersPlugins.set(dim, createSeriesMarkers(series, []));
+    }
+    syncSeriesMarkers(dimName) {
+        const plugin = this.markersPlugins.get(dimName);
+        if (!plugin) {
+            return;
+        }
+        // Lightweight Charts requires unique timestamps per series — duplicate UTCTimestamps
+        // within the same second are collapsed, keeping only the first marker at that time.
+        const seenTimes = new Set();
+        const markers = (this.markers.get(dimName) ?? [])
+            .filter((marker) => marker.visible)
+            .sort((a, b) => a.time - b.time)
+            .filter((marker) => {
+            const t = marker.time;
+            if (seenTimes.has(t))
+                return false;
+            seenTimes.add(t);
+            return true;
+        })
+            .map((marker) => ({
+            time: marker.time,
+            color: marker.color || '#888888',
+            shape: marker.shape,
+            position: marker.position,
+            size: marker.size,
+            ...(marker.text ? { text: marker.text } : {})
+        }));
+        plugin.setMarkers(markers);
+        if (markers.length > 0) {
+            this.expandTimeRangeForMarkers();
+        }
+    }
+    expandTimeRangeForMarkers() {
+        const timeScale = this.LightweightChart.timeScale();
+        const visibleRange = timeScale.getVisibleRange();
+        if (!visibleRange) {
+            return;
+        }
+        let minTime = visibleRange.from;
+        let maxTime = visibleRange.to;
+        for (const [, markerList] of this.markers) {
+            for (const m of markerList) {
+                const t = m.time;
+                if (t < minTime)
+                    minTime = t;
+                if (t > maxTime)
+                    maxTime = t;
+            }
+        }
+        if (minTime < visibleRange.from || maxTime > visibleRange.to) {
+            const padding = (maxTime - minTime) * 0.1;
+            timeScale.setVisibleRange({
+                from: (minTime - padding),
+                to: (maxTime + padding)
+            });
+        }
+    }
+    clearSeries() {
+        for (const plugin of this.markersPlugins.values()) {
+            plugin.detach();
+        }
+        for (const series of this.series.values()) {
+            this.LightweightChart.removeSeries(series);
+        }
+        this.series.clear();
+        this.markersPlugins.clear();
+        this.markers.clear();
+        this._timeRangeForced = false;
+        this._building = false;
+    }
+    toLineData(dim) {
+        const timestamps = this.dataset[this._tsColumn] ?? [];
+        const values = this.dataset[dim] ?? [];
+        if (timestamps.length === 0) {
+            return [];
+        }
+        const seen = new Set();
+        const result = [];
+        for (let i = 0; i < timestamps.length; i++) {
+            const t = this.toChartTime(timestamps[i]);
+            const tNum = t;
+            if (seen.has(tNum))
+                continue;
+            seen.add(tNum);
+            result.push({ time: t, value: values[i] });
+        }
+        return result;
+    }
+    toChartTime(timestamp) {
+        return Math.floor(timestamp / 1000);
+    }
+    forceTimeRangeToDataset() {
+        if (this._timeRangeForced) {
+            return;
+        }
+        this._timeRangeForced = true;
+        const timestamps = this.dataset[this._tsColumn] ?? [];
+        if (timestamps.length === 0) {
+            return;
+        }
+        let minMs = timestamps[0];
+        let maxMs = timestamps[0];
+        for (let i = 1; i < timestamps.length; i++) {
+            const t = timestamps[i];
+            if (t < minMs)
+                minMs = t;
+            if (t > maxMs)
+                maxMs = t;
+        }
+        const minSec = this.toChartTime(minMs);
+        const maxSec = this.toChartTime(maxMs);
+        this.LightweightChart.timeScale().setVisibleRange({
+            from: minSec,
+            to: maxSec
+        });
+    }
+    isPercentageDimension(dim) {
+        return !dim.startsWith('_') && dim.endsWith('%');
+    }
+    syncPriceScales() {
+        const hasPercentageSeries = this.yDimensions.some((dim) => this.isPercentageDimension(dim));
+        const hasValueSeries = this.yDimensions.some((dim) => !this.isPercentageDimension(dim));
+        this.LightweightChart.applyOptions({
+            leftPriceScale: {
+                visible: hasPercentageSeries
+            },
+            rightPriceScale: {
+                visible: hasValueSeries
+            }
+        });
+    }
+    mapMarkerShape(shape) {
+        if (shape === 'circle' || shape === 'arrowUp' || shape === 'arrowDown') {
+            return shape;
+        }
+        if (shape === 'none') {
+            return 'circle';
+        }
+        return 'square';
+    }
+    mapMarkerPosition(position) {
+        if (position === 'inside') {
+            return 'inBar';
+        }
+        if (position === 'aboveBar' || position === 'belowBar' || position === 'inBar') {
+            return position;
+        }
+        return 'aboveBar';
+    }
+}

package/dist/SVELightweightCharts.svelte

@@ -0,0 +1,250 @@
+<script lang="ts">
+	import {
+		createChart,
+		type ChartOptions,
+		type DeepPartial,
+		type IChartApi,
+		type ISeriesApi,
+		type SeriesType,
+		type MouseEventParams,
+		type Time
+	} from 'lightweight-charts';
+	import { formatPreciseValue } from './LightweightTimeSeriesChartBuilder';
+
+	type LightweightChartsConfig = {
+		options?: DeepPartial<ChartOptions>;
+	};
+
+	type TooltipRow = { label: string; value: string };
+
+	let {
+		onLoad,
+		config,
+		loading = $bindable(false),
+		onClear = $bindable(),
+		isDark = false
+	}: {
+		onLoad: (instance: IChartApi) => Promise<void>;
+		config?: LightweightChartsConfig;
+		loading?: boolean;
+		onClear?: () => void;
+		isDark?: boolean;
+	} = $props();
+
+	let chart: IChartApi | undefined;
+
+	// Tooltip state
+	let tooltipVisible = $state(false);
+	let tooltipX = $state(0);
+	let tooltipY = $state(0);
+	let tooltipTime = $state('');
+	let tooltipRows = $state<TooltipRow[]>([]);
+
+	const baseOptions = $derived<DeepPartial<ChartOptions>>({
+		layout: {
+			background: {
+				color: isDark ? '#100c2a' : '#ffffff'
+			},
+			textColor: isDark ? '#f8fafc' : '#0f172a'
+		},
+		grid: {
+			vertLines: {
+				color: isDark ? 'rgba(148, 163, 184, 0.12)' : 'rgba(148, 163, 184, 0.2)'
+			},
+			horzLines: {
+				color: isDark ? 'rgba(148, 163, 184, 0.12)' : 'rgba(148, 163, 184, 0.2)'
+			}
+		},
+		rightPriceScale: {
+			borderColor: isDark ? '#334155' : '#cbd5e1'
+		},
+		leftPriceScale: {
+			borderColor: isDark ? '#334155' : '#cbd5e1'
+		},
+		timeScale: {
+			borderColor: isDark ? '#334155' : '#cbd5e1',
+			timeVisible: true
+		},
+		crosshair: {
+			vertLine: {
+				color: isDark ? '#64748b' : '#94a3b8'
+			},
+			horzLine: {
+				color: isDark ? '#64748b' : '#94a3b8'
+			}
+		}
+	});
+
+	const chartOptions = $derived({
+		...baseOptions,
+		...(config?.options ?? {})
+	});
+
+	function formatTime(time: Time): string {
+		const ts = (time as number) * 1000;
+		const d = new Date(ts);
+		return d.toISOString().replace('T', ' ').slice(0, 19);
+	}
+
+	function handleCrosshairMove(param: MouseEventParams<Time>, container: HTMLElement) {
+		if (!param.point || !param.time || param.seriesData.size === 0) {
+			tooltipVisible = false;
+			return;
+		}
+
+		const rows: TooltipRow[] = [];
+		for (const [series, data] of param.seriesData as Map<
+			ISeriesApi<SeriesType, Time>,
+			{ value?: number }
+		>) {
+			if (!series.options().visible) continue;
+			const value = data?.value;
+			if (value === undefined || value === null) continue;
+			const label = (series.options() as { title?: string }).title ?? '';
+			rows.push({ label, value: formatPreciseValue(value) });
+		}
+
+		if (rows.length === 0) {
+			tooltipVisible = false;
+			return;
+		}
+
+		tooltipRows = rows;
+		tooltipTime = formatTime(param.time);
+
+		// Position tooltip near cursor, avoiding overflow
+		const containerRect = container.getBoundingClientRect();
+		const TOOLTIP_WIDTH = 160;
+		const TOOLTIP_OFFSET = 12;
+
+		let x = param.point.x + TOOLTIP_OFFSET;
+		if (x + TOOLTIP_WIDTH > containerRect.width) {
+			x = param.point.x - TOOLTIP_WIDTH - TOOLTIP_OFFSET;
+		}
+
+		tooltipX = x;
+		tooltipY = Math.max(0, param.point.y - 20);
+		tooltipVisible = true;
+	}
+
+	function chartAction(element: HTMLElement) {
+		chart = createChart(element, chartOptions);
+
+		const handleResize = () => {
+			chart?.applyOptions({
+				width: element.clientWidth,
+				height: element.clientHeight
+			});
+		};
+
+		const resizeObserver =
+			typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(handleResize);
+
+		if (resizeObserver) {
+			resizeObserver.observe(element);
+		} else {
+			window.addEventListener('resize', handleResize);
+		}
+
+		const onCrosshairMove = (param: MouseEventParams<Time>) => handleCrosshairMove(param, element);
+		chart.subscribeCrosshairMove(onCrosshairMove);
+
+		handleResize();
+		onClear = () => undefined;
+		onLoad(chart);
+
+		return {
+			destroy() {
+				chart?.unsubscribeCrosshairMove(onCrosshairMove);
+				if (resizeObserver) {
+					resizeObserver.disconnect();
+				} else {
+					window.removeEventListener('resize', handleResize);
+				}
+				chart?.remove();
+			}
+		};
+	}
+
+	$effect(() => {
+		chart?.applyOptions(chartOptions);
+	});
+</script>
+
+<div style="position: relative; width: 100%; height: 100%;">
+	<div class="lightweight-charts" use:chartAction></div>
+
+	{#if tooltipVisible}
+		<div
+			class="lw-tooltip"
+			class:lw-tooltip--dark={isDark}
+			style="left: {tooltipX}px; top: {tooltipY}px;"
+		>
+			<div class="lw-tooltip__time">{tooltipTime}</div>
+			{#each tooltipRows as row (row.label)}
+				<div class="lw-tooltip__row">
+					{#if row.label}<span class="lw-tooltip__label">{row.label}</span>{/if}
+					<span class="lw-tooltip__value">{row.value}</span>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.lightweight-charts {
+		width: 100%;
+		height: 100%;
+		min-height: 100px;
+		position: relative;
+		z-index: 1;
+	}
+
+	.lw-tooltip {
+		position: absolute;
+		z-index: 10;
+		pointer-events: none;
+		background: rgba(255, 255, 255, 0.95);
+		border: 1px solid #cbd5e1;
+		border-radius: 6px;
+		padding: 6px 10px;
+		font-size: 12px;
+		color: #0f172a;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+		min-width: 120px;
+		max-width: 200px;
+	}
+
+	.lw-tooltip--dark {
+		background: rgba(20, 16, 50, 0.95);
+		border-color: #334155;
+		color: #f8fafc;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+	}
+
+	.lw-tooltip__time {
+		font-size: 11px;
+		opacity: 0.6;
+		margin-bottom: 4px;
+		white-space: nowrap;
+	}
+
+	.lw-tooltip__row {
+		display: flex;
+		justify-content: space-between;
+		gap: 8px;
+		line-height: 1.6;
+	}
+
+	.lw-tooltip__label {
+		opacity: 0.75;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.lw-tooltip__value {
+		font-weight: 600;
+		white-space: nowrap;
+	}
+</style>

package/dist/SVELightweightCharts.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type ChartOptions, type DeepPartial, type IChartApi } from 'lightweight-charts';
+type LightweightChartsConfig = {
+    options?: DeepPartial<ChartOptions>;
+};
+type $$ComponentProps = {
+    onLoad: (instance: IChartApi) => Promise<void>;
+    config?: LightweightChartsConfig;
+    loading?: boolean;
+    onClear?: () => void;
+    isDark?: boolean;
+};
+declare const SVELightweightCharts: import("svelte").Component<$$ComponentProps, {}, "loading" | "onClear">;
+type SVELightweightCharts = ReturnType<typeof SVELightweightCharts>;
+export default SVELightweightCharts;
+//# sourceMappingURL=SVELightweightCharts.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SVELightweightCharts.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SVELightweightCharts.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,SAAS,EAKd,MAAM,oBAAoB,CAAC;AAI5B,KAAK,uBAAuB,GAAG;IAC9B,OAAO,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;CACpC,CAAC;AAGF,KAAK,gBAAgB,GAAI;IACxB,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AA+KH,QAAA,MAAM,oBAAoB,yEAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/TimeSeriesChartBuilder.d.ts

@@ -1,15 +1,9 @@
 import { type LineSeriesOption, type DataZoomComponentOption } from 'echarts';
 import { type ECharts } from './';
+import type { ChartMarkerPointOptions } from './chartAdapter';
 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[][];
@@ -49,6 +43,8 @@ export declare class TimeSeriesChartBuilder {
     setDataset(data: DatasetFormatArray | DatasetFormatObject | DatasetFormatSimpleObject, yDimensionsNames?: string[]): this;
     toggleLegend(column: string): this;
     goToZoom(start: number, end: number): this;
+    scrollToTime(timestamp: number): this;
+    private findClosestDataIndex;
     /**
      * data: [1658870400, 823, 95.8, ...]
      * dimensionsNames: ['_ts', 'price', 'otherColumn', ...]
@@ -100,7 +96,7 @@ export declare class TimeSeriesChartBuilder {
         dimName: string;
         timestamp: number;
         name?: string;
-    }, options?: Partial<MarkerPointOption>): this;
+    }, options?: ChartMarkerPointOptions): this;
     private isNumberArray;
     /**
      * Creates the series data
@@ -124,8 +120,9 @@ export declare class TimeSeriesChartBuilder {
     private isSimpleObject;
     private isRecordArray;
     private isNumberMatrix;
-    getRangeValues(): any[];
-    toggleMarkers(id: number, dimName: string, shape: string): this | undefined;
+    getRangeValues(): [number, number];
+    toggleMarkers(id: number, dimName: string, shape: string): this;
+    clearMarkers(): this;
 }
 export {};
 //# sourceMappingURL=TimeSeriesChartBuilder.d.ts.map

package/dist/TimeSeriesChartBuilder.d.ts.map

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

package/dist/TimeSeriesChartBuilder.js

@@ -12,6 +12,7 @@ export class TimeSeriesChartBuilder {
     constructor(instance, builderConfig) {
         this.ECharts = instance;
         this.builderConfig = { ...this.builderConfig, ...builderConfig };
+        this.option.useUTC = true;
         this.option.animation = false;
         this.option.legend = this.builderConfig.externalManagerLegend
             ? {
@@ -56,7 +57,13 @@ export class TimeSeriesChartBuilder {
         };
         this.option.xAxis = {
             type: 'time',
-            axisLine: { show: true }
+            axisLine: { show: true },
+            axisLabel: {
+                formatter: (value) => {
+                    const d = new Date(value);
+                    return d.toTimeString().slice(0, 8);
+                }
+            }
         };
         this.option.yAxis = [
             {
@@ -129,6 +136,45 @@ export class TimeSeriesChartBuilder {
         });
         return this;
     }
+    scrollToTime(timestamp) {
+        const [min, max] = this.getRangeValues();
+        if (!min || !max)
+            return this;
+        const range = max - min;
+        const targetPercent = ((timestamp - min) / range) * 100;
+        const windowSize = 5;
+        const start = Math.max(0, targetPercent - windowSize / 2);
+        const end = Math.min(100, targetPercent + windowSize / 2);
+        this.ECharts.dispatchAction({
+            type: 'dataZoom',
+            start,
+            end
+        });
+        setTimeout(() => {
+            this.ECharts.dispatchAction({
+                type: 'showTip',
+                seriesIndex: 0,
+                dataIndex: this.findClosestDataIndex(timestamp)
+            });
+        }, 100);
+        return this;
+    }
+    findClosestDataIndex(timestamp) {
+        const dataset = this.option.dataset;
+        const ts = dataset?.source?.[this._tsColumn] ?? [];
+        if (!ts.length)
+            return 0;
+        let closest = 0;
+        let minDiff = Math.abs(ts[0] - timestamp);
+        for (let i = 1; i < ts.length; i++) {
+            const diff = Math.abs(ts[i] - timestamp);
+            if (diff < minDiff) {
+                minDiff = diff;
+                closest = i;
+            }
+        }
+        return closest;
+    }
     /**
      * data: [1658870400, 823, 95.8, ...]
      * dimensionsNames: ['_ts', 'price', 'otherColumn', ...]
@@ -547,7 +593,6 @@ export class TimeSeriesChartBuilder {
         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));
     }
     /**
@@ -690,10 +735,22 @@ export class TimeSeriesChartBuilder {
         const markerPoints = seriesDimension?.markPoint.data;
         const point = markerPoints.find((mp) => mp.name === `markerpoint-${id}`);
         if (!point) {
-            return;
+            return this;
         }
         point.symbol = point.symbol === 'none' ? this.getIcon(shape) : 'none';
         this.build();
         return this;
     }
+    clearMarkers() {
+        if (!Array.isArray(this.option.series)) {
+            return this;
+        }
+        for (const s of this.option.series) {
+            if (s.markPoint) {
+                s.markPoint.data = [];
+            }
+        }
+        this.build();
+        return this;
+    }
 }

package/dist/chartAdapter.d.ts

@@ -0,0 +1,31 @@
+export type ChartDatasetFormatSimpleObject = Record<string, number[]>;
+export type ChartDatasetFormatObject = Record<string, any>[];
+export type ChartDatasetFormatArray = number[][];
+export type ChartDataset = ChartDatasetFormatArray | ChartDatasetFormatObject | ChartDatasetFormatSimpleObject;
+export type ChartMarkerPoint = {
+    dimName: string;
+    timestamp: number;
+    name?: string;
+};
+export type ChartMarkerPointOptions = {
+    icon?: string;
+    color?: string;
+    position?: string;
+    symbolSize?: number;
+};
+export interface TimeSeriesChartAdapter {
+    setLegendIcon(icon: string): this;
+    setDataset(data: ChartDataset, yDimensionsNames?: string[]): this;
+    build(): this;
+    addDimension(data: ChartDatasetFormatSimpleObject, dimName: string): this;
+    addMarkerPoint(id: number, data: ChartMarkerPoint, options?: ChartMarkerPointOptions): this;
+    getLegendStatus(): Record<string, boolean>;
+    toggleLegend(column: string): this;
+    getRangeValues(): [number, number];
+    goToZoom(start: number, end: number): this;
+    scrollToTime(timestamp: number): this;
+    getTotalRows(): number;
+    toggleMarkers(id: number, dimName: string, shape: string): this;
+    clearMarkers(): this;
+}
+//# sourceMappingURL=chartAdapter.d.ts.map

package/dist/chartAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartAdapter.d.ts","sourceRoot":"","sources":["../src/lib/chartAdapter.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,8BAA8B,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;AACtE,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;AAC7D,MAAM,MAAM,uBAAuB,GAAG,MAAM,EAAE,EAAE,CAAC;AAEjD,MAAM,MAAM,YAAY,GACrB,uBAAuB,GACvB,wBAAwB,GACxB,8BAA8B,CAAC;AAElC,MAAM,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACtC,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,UAAU,CAAC,IAAI,EAAE,YAAY,EAAE,gBAAgB,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAClE,KAAK,IAAI,IAAI,CAAC;IACd,YAAY,CAAC,IAAI,EAAE,8BAA8B,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1E,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC5F,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC3C,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,cAAc,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,YAAY,IAAI,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAChE,YAAY,IAAI,IAAI,CAAC;CACrB"}

package/dist/chartAdapter.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,4 +1,7 @@
 export { default as SVECharts } from './SVECharts.svelte';
+export { default as SVELightweightCharts } from './SVELightweightCharts.svelte';
+export type { TimeSeriesChartAdapter } from './chartAdapter';
+export { LightweightTimeSeriesChartBuilder } from './LightweightTimeSeriesChartBuilder';
 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,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,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,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,YAAY,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,iCAAiC,EAAE,MAAM,qCAAqC,CAAC;AACxF,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,SAAS,CAAC"}

package/dist/index.js

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

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 export type { DataRange, DataZoomEvent } from './SVECharts.svelte';
 export type { ECharts } from 'echarts/types/dist/core';
 export type { EChartsOption } from 'echarts';
+export type { IChartApi as LightweightChartApi, Time as LightweightChartTime } from 'lightweight-charts';
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/lib/types.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnE,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvD,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/lib/types.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnE,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvD,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,YAAY,EACX,SAAS,IAAI,mBAAmB,EAChC,IAAI,IAAI,oBAAoB,EAC5B,MAAM,oBAAoB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@qtsurfer/sveltecharts",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "license": "Apache-2.0",
   "author": "QTSurfer (https://github.com/QTSurfer)",
   "homepage": "https://github.com/QTSurfer/svelte-timeseries/tree/main/packages/sveltecharts",
@@ -28,6 +28,7 @@
   "types": "./dist/index.d.ts",
   "peerDependencies": {
     "echarts": "^6.0.0",
+    "lightweight-charts": "^5.1.0",
     "svelte": "^5.43.14"
   },
   "devDependencies": {
@@ -52,6 +53,7 @@
     "publint": "^0.3.18",
     "svelte": "^5.55.0",
     "svelte-check": "^4.4.5",
+    "svelte-eslint-parser": "^1.6.0",
     "typescript": "^5.9.3",
     "vite": "^7.2.4",
     "vitest": "^4.1.0"