@qtsurfer/sveltecharts 0.3.5 → 0.4.3

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