npm - @operato/scene-scichart - Versions diffs - 7.2.4 → 7.2.6 - Mend

@operato/scene-scichart 7.2.4 → 7.2.6

Files changed (25) hide show

package/CHANGELOG.md +18 -0
package/db.sqlite +0 -0
package/dist/charts/ox-scichart-multiple.js +42 -27
package/dist/charts/ox-scichart-multiple.js.map +1 -1
package/dist/charts/ox-scichart.js +8 -4
package/dist/charts/ox-scichart.js.map +1 -1
package/dist/charts/scichart-builder.js +51 -28
package/dist/charts/scichart-builder.js.map +1 -1
package/logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json +25 -0
package/logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json +25 -0
package/logs/application-2024-08-03-02.log +105 -0
package/logs/application-2024-08-03-11.log +105 -0
package/logs/application-2024-08-03-13.log +105 -0
package/logs/application-2024-08-03-14.log +105 -0
package/logs/application-2024-08-03-15.log +210 -0
package/logs/connections-2024-08-03-02.log +50 -0
package/logs/connections-2024-08-03-11.log +50 -0
package/logs/connections-2024-08-03-13.log +50 -0
package/logs/connections-2024-08-03-14.log +50 -0
package/logs/connections-2024-08-03-15.log +100 -0
package/package.json +2 -2
package/src/charts/ox-scichart-multiple.ts +53 -30
package/src/charts/ox-scichart.ts +7 -3
package/src/charts/scichart-builder.ts +63 -39
package/tsconfig.tsbuildinfo +1 -1

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [7.2.6](https://github.com/things-scene/operato-scene/compare/v7.2.5...v7.2.6) (2024-08-03)
+### :bug: Bug Fix
+* grouped multiple-timeseries ([747c7eb](https://github.com/things-scene/operato-scene/commit/747c7ebb46691ba7f7cebd3246dd520405aa036b))
+## [7.2.5](https://github.com/things-scene/operato-scene/compare/v7.2.4...v7.2.5) (2024-08-03)
+### :bug: Bug Fix
+* scichart yAxis precision ([07bfb65](https://github.com/things-scene/operato-scene/commit/07bfb65812a861951c255e42824d6be3f9817c2d))
 ## [7.2.4](https://github.com/things-scene/operato-scene/compare/v7.2.3...v7.2.4) (2024-08-02)

package/db.sqlite CHANGED Viewed

Binary file

package/dist/charts/ox-scichart-multiple.js CHANGED Viewed

@@ -30,8 +30,14 @@ let OxSciChartMultiple = OxSciChartMultiple_1 = class OxSciChartMultiple extends
         this.containerId = 'ox-scichart-multiple' + ++OxSciChartMultiple_1.idx;
     }
     async initializeSciChart() {
+        var _a;
         this.cleanup();
-        const { chart, dataSeries } = (await buildSciChartOverview(this.config, this.overviewContainer, {}, this.synchronizer)) || {};
+        // Overview 차트는 정확히 일치하는 시리즈 이름만 포함
+        const overviewDatasets = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.data.datasets.filter(dataset => this.visibleSeries.includes(dataset.dataKey))) || [];
+        const { chart, dataSeries } = (await buildSciChartOverview({
+            ...this.config,
+            data: { datasets: overviewDatasets }
+        }, this.overviewContainer, {}, this.synchronizer)) || {};
         this.verticalGroup.addSurfaceToGroup(chart.sciChartSurface);
         this.overviewChart = chart;
         this.overviewDataSeries = dataSeries;
@@ -82,31 +88,39 @@ let OxSciChartMultiple = OxSciChartMultiple_1 = class OxSciChartMultiple extends
         this.groupCharts.length = 0;
     }
     async updateDataSeries() {
-        var _a, _b;
         const { config, data } = this;
         const { datasets = [], labelDataKey: attrX } = (config === null || config === void 0 ? void 0 : config.data) || {};
         if (!(data instanceof Array) || !attrX) {
             return [];
         }
         const newData = this.dataSet;
-        (this.groupCharts || []).forEach(({ dataKey, sciChartSurface, dataSeries }) => {
+        this.groupCharts.forEach(({ dataKey, sciChartSurface, dataSeries }) => {
             try {
-                dataSeries.forEach(ds => ds.clear());
-                const dataSet = newData.filter((data, index) => dataKey == datasets[index].dataKey);
-                dataSet.forEach((data, index) => {
-                    const filteredData = data.filter(d => typeof d.yValue === 'number');
-                    if (filteredData.length > 0) {
-                        dataSeries[index].appendRange(filteredData.map(d => d.xValue), filteredData.map(d => d.yValue));
+                // dataKey로 시작하는 모든 시리즈를 업데이트
+                const relatedDatasets = datasets.filter(dataset => { var _a; return (_a = dataset.dataKey) === null || _a === void 0 ? void 0 : _a.startsWith(dataKey); });
+                // 각 relatedDatasets에 대해 해당하는 dataSeries를 업데이트
+                dataSeries.forEach((ds, index) => {
+                    ds.clear();
+                    const relatedDataset = relatedDatasets[index];
+                    if (relatedDataset) {
+                        const filteredData = newData[datasets.findIndex(ds => ds.dataKey === relatedDataset.dataKey)].filter(d => typeof d.yValue === 'number');
+                        if (filteredData.length > 0) {
+                            ds.appendRange(filteredData.map(d => d.xValue), filteredData.map(d => d.yValue));
+                        }
                     }
                 });
+                // Zoom 및 리렌더링
+                setTimeout(() => {
+                    sciChartSurface.zoomExtents();
+                    sciChartSurface.invalidateElement();
+                }, 200);
             }
             catch (error) {
-                console.log(error);
+                console.error('Error updating data series:', error);
             }
-            sciChartSurface.zoomExtents();
-            sciChartSurface.invalidateElement();
         });
         try {
+            // Overview 차트 데이터 업데이트
             this.overviewDataSeries.forEach(ds => ds.clear());
             newData.forEach((data, index) => {
                 if (this.visibleSeries.includes(datasets[index].dataKey)) {
@@ -116,11 +130,9 @@ let OxSciChartMultiple = OxSciChartMultiple_1 = class OxSciChartMultiple extends
                     }
                 }
             });
-            (_a = this.overviewChart) === null || _a === void 0 ? void 0 : _a.sciChartSurface.zoomExtents();
-            (_b = this.overviewChart) === null || _b === void 0 ? void 0 : _b.sciChartSurface.invalidateElement();
         }
         catch (error) {
-            console.log(error);
+            console.error('Error updating overview data series:', error);
         }
     }
     get dataSet() {
@@ -154,7 +166,7 @@ let OxSciChartMultiple = OxSciChartMultiple_1 = class OxSciChartMultiple extends
         return html `
       <div id=${this.containerId + '-overview'} class="overview" ?hidden=${!this.showOverview}></div>
       <div id="chart-group">
-        ${datasets.map(({ dataKey }) => keyed(dataKey, html `
+        ${this.visibleSeries.map(dataKey => keyed(dataKey, html `
               <div
                 id=${this.containerId + '-' + dataKey}
                 class="grouped-chart"
@@ -190,6 +202,7 @@ let OxSciChartMultiple = OxSciChartMultiple_1 = class OxSciChartMultiple extends
         }
     }
     async addChart(dataKey) {
+        var _a, _b;
         const groupedChart = {
             dataKey: '',
             sciChartSurface: undefined,
@@ -197,35 +210,37 @@ let OxSciChartMultiple = OxSciChartMultiple_1 = class OxSciChartMultiple extends
         };
         const { data = {}, options = {} } = this.config || {};
         const { datasets = [] } = data;
-        const dataset = datasets.find(dataset => dataset.dataKey == dataKey);
-        if (!dataset) {
+        const primaryDataset = datasets.find(dataset => dataset.dataKey == dataKey);
+        if (!primaryDataset) {
             return;
         }
-        const { scales } = options;
-        const { yAxes = [] } = scales || {};
-        const { valueFormat } = dataset;
+        // 해당 dataKey로 시작하는 모든 시리즈를 함께 그룹화하여 차트를 구성
+        const relatedDatasets = datasets.filter(dataset => { var _a; return (_a = dataset.dataKey) === null || _a === void 0 ? void 0 : _a.startsWith(dataKey); });
         const yAxis = {
-            ...yAxes[0],
-            axisTitle: dataset === null || dataset === void 0 ? void 0 : dataset.label
+            ...(_b = (_a = options.scales) === null || _a === void 0 ? void 0 : _a.yAxes) === null || _b === void 0 ? void 0 : _b[0],
+            axisTitle: primaryDataset === null || primaryDataset === void 0 ? void 0 : primaryDataset.label
         };
         const config = {
             ...this.config,
             data: {
-                datasets: [dataset]
+                datasets: relatedDatasets // 이 차트에 포함될 모든 관련 시리즈들
             },
             options: {
                 ...options,
                 scales: {
-                    ...scales,
+                    ...options.scales,
                     yAxes: [yAxis]
                 }
             }
         };
         const container = this.renderRoot.querySelector(`#${this.containerId + '-' + dataKey}`);
-        var { chart, dataSeries } = (await buildSciChart(config, container, { fontSize: 14, fontFamily: 'Roboto', fontColor: undefined }, { precision: valueFormat ? calculatePrecision(valueFormat) : undefined, grouped: this.containerId }));
+        var { chart, dataSeries } = (await buildSciChart(config, container, { fontSize: 14, fontFamily: 'Roboto', fontColor: undefined }, {
+            precision: primaryDataset.valueFormat ? calculatePrecision(primaryDataset.valueFormat) : undefined,
+            grouped: this.containerId
+        }));
         this.verticalGroup.addSurfaceToGroup(chart.sciChartSurface);
         this.synchronizer.addAxis(chart.sciChartSurface.xAxes.get(0));
-        groupedChart.dataKey = config.data.datasets[0].dataKey;
+        groupedChart.dataKey = primaryDataset.dataKey;
         groupedChart.sciChartSurface = chart.sciChartSurface;
         groupedChart.dataSeries = dataSeries;
         this.groupCharts = this.groupSorter([...this.groupCharts, groupedChart]);

package/dist/charts/ox-scichart-multiple.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-scichart-multiple.js","sourceRoot":"","sources":["../../src/charts/ox-scichart-multiple.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { property, query, customElement } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { calculatePrecision, buildSciChart, buildSciChartOverview } from './scichart-builder'\nimport { AxisSynchroniser } from './axis-synchronizer'\nimport { NumberRange, scaleAxes, SciChartVerticalGroup } from 'scichart'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-scichart-multiple')\nexport class OxSciChartMultiple extends LitElement {\n @property({ type: Object }) config: OperatoChart.ChartConfig \| null = null\n @property({ type: Array }) data: { [attr: string]: any }[] = []\n @property({ type: Array }) visibleSeries: string[] = []\n @property({ type: Boolean, attribute: 'show-overview' }) showOverview: boolean = true\n\n private synchronizer: AxisSynchroniser = new AxisSynchroniser(new NumberRange(200, 500))\n private verticalGroup: SciChartVerticalGroup = new SciChartVerticalGroup()\n\n private isInitializing: boolean = false\n private overviewChart: any = null\n private overviewDataSeries: any[] = []\n private groupCharts: {\n dataKey: string\n sciChartSurface: any\n dataSeries: any[]\n }[] = []\n\n /\n [주의]\n ox-scichart container의 id를 글로벌 유니크하게 해야한다. \n SciChart가 특별히 container의 id를 기반으로 하위 컴포넌트를 구성하고 있기 때문이다.\n shadowDom 안에 있는 container 이더라도, 글로벌 유니크한 id를 제공해야 한다.\n 그렇지 않으면, 단 하나의 차트만 제대로 렌더링된다.\n /\n private containerId: string = 'ox-scichart-multiple' + ++OxSciChartMultiple.idx\n\n @query('.overview') overviewContainer!: HTMLDivElement\n\n static idx: number = 0\n\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n width: 100%;\n height: 100%;\n }\n\n .overview {\n height: 80px;\n }\n\n #chart-group {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n }\n\n .grouped-chart {\n flex: 1;\n\n min-height: 25%;\n }\n\n [hidden] {\n display: none;\n }\n `\n ]\n\n async initializeSciChart() {\n this.cleanup()\n\n const { chart, dataSeries } =\n (await buildSciChartOverview(this.config, this.overviewContainer, {}, this.synchronizer)) \|\| {}\n\n this.verticalGroup.addSurfaceToGroup(chart.sciChartSurface)\n\n this.overviewChart = chart\n this.overviewDataSeries = dataSeries!\n }\n\n async updated(changedProperties: Map<string \| number \| symbol, unknown>) {\n var needDataUpdate = false\n\n if (changedProperties.has('config') && this.config) {\n this.isInitializing = true\n await this.initializeSciChart()\n this.isInitializing = false\n needDataUpdate = true\n }\n\n if (changedProperties.has('visibleSeries')) {\n if (this.isInitializing) {\n await this.ensureInitialization()\n }\n await this.updateSeries(this.visibleSeries, changedProperties.get('visibleSeries') as string[])\n needDataUpdate = true\n }\n\n if (changedProperties.has('data')) {\n needDataUpdate = true\n }\n\n if (needDataUpdate) {\n await this.updateDataSeries()\n }\n }\n\n private async ensureInitialization() {\n while (this.isInitializing) {\n await new Promise(resolve => setTimeout(resolve, 100)) // Check every 100ms\n }\n }\n\n cleanup() {\n this.cleanupGroup()\n\n if (this.overviewChart) {\n this.overviewChart.sciChartSurface?.delete()\n this.overviewChart = null\n }\n }\n\n cleanupGroup() {\n this.groupCharts.forEach(chart => {\n if (chart.sciChartSurface) {\n this.synchronizer.removeAxis(chart.sciChartSurface.xAxes.get(0))\n this.verticalGroup.removeSurface(chart.sciChartSurface)\n chart.sciChartSurface.delete()\n }\n })\n\n this.groupCharts.length = 0\n }\n\n async updateDataSeries() {\n const { config, data } = this\n const { datasets = [], labelDataKey: attrX } = config?.data \|\| {}\n\n if (!(data instanceof Array) \|\| !attrX) {\n return []\n }\n\n const newData = this.dataSet\n\n ;(this.groupCharts \|\| []).forEach(({ dataKey, sciChartSurface, dataSeries }) => {\n try {\n dataSeries.forEach(ds => ds.clear())\n const dataSet = newData.filter((data, index) => dataKey == datasets[index].dataKey!)\n\n dataSet.forEach((data, index) => {\n const filteredData = data.filter(d => typeof d.yValue === 'number')\n\n if (filteredData.length > 0) {\n dataSeries[index].appendRange(\n filteredData.map(d => d.xValue),\n filteredData.map(d => d.yValue)\n )\n }\n })\n } catch (error) {\n console.log(error)\n }\n\n sciChartSurface.zoomExtents()\n sciChartSurface.invalidateElement()\n })\n\n try {\n this.overviewDataSeries.forEach(ds => ds.clear())\n\n newData.forEach((data, index) => {\n if (this.visibleSeries.includes(datasets[index].dataKey!)) {\n const filteredData = data.filter(d => typeof d.yValue === 'number')\n if (filteredData.length > 0) {\n this.overviewDataSeries[index].appendRange(\n filteredData.map(d => d.xValue),\n filteredData.map(d => d.yValue)\n )\n }\n }\n })\n\n this.overviewChart?.sciChartSurface.zoomExtents()\n this.overviewChart?.sciChartSurface.invalidateElement()\n } catch (error) {\n console.log(error)\n }\n }\n\n get dataSet(): { xValue: number; yValue: number }[][] {\n const { config, data } = this\n const { datasets = [], labelDataKey: attrX } = config?.data \|\| {}\n\n if (!(data instanceof Array) \|\| !attrX) {\n return []\n }\n\n return datasets.map(dataset => {\n return data\n .map(item => {\n if (!item \|\| typeof item !== 'object') {\n return\n }\n\n const xValue = new Date(item[attrX])\n if (isNaN(xValue.getTime())) {\n console.error('Invalid date:', item[attrX])\n return\n }\n\n return {\n xValue: xValue.getTime() / 1000,\n yValue: item[dataset.dataKey!]\n }\n })\n .filter(Boolean) as { xValue: number; yValue: number }[]\n })\n }\n\n render() {\n const { datasets = [] } = this.config?.data \|\| {}\n\n return html`\n <div id=${this.containerId + '-overview'} class=\"overview\" ?hidden=${!this.showOverview}></div>\n <div id=\"chart-group\">\n ${datasets.map(({ dataKey }) =>\n keyed(\n dataKey,\n html`\n <div\n id=${this.containerId + '-' + dataKey}\n class=\"grouped-chart\"\n ?hidden=${!this.visibleSeries.includes(dataKey!)}\n ></div>\n `\n )\n )}\n </div>\n `\n }\n\n async buildChartGroup() {\n this.cleanupGroup()\n\n const { config } = this\n const { datasets = [] } = config?.data \|\| {}\n\n await Promise.all(\n datasets\n .filter(dataset => this.visibleSeries.includes(dataset.dataKey!))\n .map(async dataset => {\n await this.addChart(dataset.dataKey!)\n })\n )\n }\n\n async updateSeries(after: string[], before: string[]) {\n /* 기존 시리즈와 새로운 시리즈의 차이를 비교해서, before에는 있는데, after에는 없으면 await removeChart(string)를 호출하고, after에는 있는데, before에는 없으면, addChart(string) 한다. */\n // before에는 있는데 after에는 없는 시리즈를 제거합니다.\n for (const series of before \|\| []) {\n if (!after.includes(series)) {\n await this.removeChart(series)\n }\n }\n\n // after에는 있는데 before에는 없는 시리즈를 추가합니다.\n for (const series of after \|\| []) {\n if (!before \|\| !before.includes(series)) {\n await this.addChart(series)\n }\n }\n }\n\n async addChart(dataKey: string) {\n const groupedChart = {\n dataKey: '',\n sciChartSurface: undefined,\n dataSeries: [] as any[]\n }\n\n const { data = {}, options = {} } = this.config \|\| {}\n const { datasets = [] } = data as OperatoChart.ChartData\n const dataset = datasets.find(dataset => dataset.dataKey == dataKey)\n\n if (!dataset) {\n return\n }\n\n const { scales } = options\n const { yAxes = [] } = scales \|\| {}\n const { valueFormat } = dataset\n\n const yAxis = {\n ...yAxes[0],\n axisTitle: dataset?.label\n }\n\n const config = {\n ...this.config,\n data: {\n datasets: [dataset]\n },\n options: {\n ...options,\n scales: {\n ...scales,\n yAxes: [yAxis]\n }\n }\n }\n\n const container = this.renderRoot.querySelector(`#${this.containerId + '-' + dataKey}`)\n var { chart, dataSeries } = (await buildSciChart(\n config,\n container,\n { fontSize: 14, fontFamily: 'Roboto', fontColor: undefined },\n { precision: valueFormat ? calculatePrecision(valueFormat) : undefined, grouped: this.containerId }\n ))!\n\n this.verticalGroup.addSurfaceToGroup(chart.sciChartSurface)\n this.synchronizer.addAxis(chart.sciChartSurface.xAxes.get(0))\n\n groupedChart.dataKey = config.data.datasets[0]!.dataKey!\n groupedChart.sciChartSurface = chart.sciChartSurface\n groupedChart.dataSeries = dataSeries\n\n this.groupCharts = this.groupSorter([...this.groupCharts, groupedChart])\n }\n\n removeChart(dataKey: string) {\n const index = this.groupCharts.findIndex((chart: any) => chart.dataKey == dataKey)\n const [groupedChart] = this.groupCharts.splice(index, 1)\n\n if (!groupedChart) {\n return\n }\n\n this.verticalGroup.removeSurface(groupedChart.sciChartSurface)\n this.synchronizer.removeAxis(groupedChart.sciChartSurface.xAxes.get(0))\n\n groupedChart.sciChartSurface.delete()\n groupedChart.sciChartSurface = undefined\n\n this.groupCharts = this.groupSorter(this.groupCharts)\n }\n\n groupSorter(group: any[]) {\n return group.sort(\n (a, b) =>\n this.visibleSeries.findIndex((s: any) => s.dataKey == a.dataKey) -\n this.visibleSeries.findIndex((s: any) => s.dataKey == b.dataKey)\n )\n }\n\n async appendData(appendum: { [attr: string]: any }[]) {}\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ox-scichart-multiple': OxSciChartMultiple\n }\n}\n"]}
1	+ {"version":3,"file":"ox-scichart-multiple.js","sourceRoot":"","sources":["../../src/charts/ox-scichart-multiple.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { property, query, customElement } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { calculatePrecision, buildSciChart, buildSciChartOverview } from './scichart-builder'\nimport { AxisSynchroniser } from './axis-synchronizer'\nimport { NumberRange, scaleAxes, SciChartVerticalGroup } from 'scichart'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-scichart-multiple')\nexport class OxSciChartMultiple extends LitElement {\n @property({ type: Object }) config: OperatoChart.ChartConfig \| null = null\n @property({ type: Array }) data: { [attr: string]: any }[] = []\n @property({ type: Array }) visibleSeries: string[] = []\n @property({ type: Boolean, attribute: 'show-overview' }) showOverview: boolean = true\n\n private synchronizer: AxisSynchroniser = new AxisSynchroniser(new NumberRange(200, 500))\n private verticalGroup: SciChartVerticalGroup = new SciChartVerticalGroup()\n\n private isInitializing: boolean = false\n private overviewChart: any = null\n private overviewDataSeries: any[] = []\n private groupCharts: {\n dataKey: string\n sciChartSurface: any\n dataSeries: any[]\n }[] = []\n\n /\n [주의]\n ox-scichart container의 id를 글로벌 유니크하게 해야한다. \n SciChart가 특별히 container의 id를 기반으로 하위 컴포넌트를 구성하고 있기 때문이다.\n shadowDom 안에 있는 container 이더라도, 글로벌 유니크한 id를 제공해야 한다.\n 그렇지 않으면, 단 하나의 차트만 제대로 렌더링된다.\n /\n private containerId: string = 'ox-scichart-multiple' + ++OxSciChartMultiple.idx\n\n @query('.overview') overviewContainer!: HTMLDivElement\n\n static idx: number = 0\n\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n width: 100%;\n height: 100%;\n }\n\n .overview {\n height: 80px;\n }\n\n #chart-group {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n }\n\n .grouped-chart {\n flex: 1;\n\n min-height: 25%;\n }\n\n [hidden] {\n display: none;\n }\n `\n ]\n\n async initializeSciChart() {\n this.cleanup()\n\n // Overview 차트는 정확히 일치하는 시리즈 이름만 포함\n const overviewDatasets =\n this.config?.data.datasets.filter(dataset => this.visibleSeries.includes(dataset.dataKey!)) \|\| []\n\n const { chart, dataSeries } =\n (await buildSciChartOverview(\n {\n ...this.config,\n data: { datasets: overviewDatasets }\n },\n this.overviewContainer,\n {},\n this.synchronizer\n )) \|\| {}\n\n this.verticalGroup.addSurfaceToGroup(chart.sciChartSurface)\n\n this.overviewChart = chart\n this.overviewDataSeries = dataSeries!\n }\n\n async updated(changedProperties: Map<string \| number \| symbol, unknown>) {\n var needDataUpdate = false\n\n if (changedProperties.has('config') && this.config) {\n this.isInitializing = true\n await this.initializeSciChart()\n this.isInitializing = false\n needDataUpdate = true\n }\n\n if (changedProperties.has('visibleSeries')) {\n if (this.isInitializing) {\n await this.ensureInitialization()\n }\n await this.updateSeries(this.visibleSeries, changedProperties.get('visibleSeries') as string[])\n needDataUpdate = true\n }\n\n if (changedProperties.has('data')) {\n needDataUpdate = true\n }\n\n if (needDataUpdate) {\n await this.updateDataSeries()\n }\n }\n\n private async ensureInitialization() {\n while (this.isInitializing) {\n await new Promise(resolve => setTimeout(resolve, 100)) // Check every 100ms\n }\n }\n\n cleanup() {\n this.cleanupGroup()\n\n if (this.overviewChart) {\n this.overviewChart.sciChartSurface?.delete()\n this.overviewChart = null\n }\n }\n\n cleanupGroup() {\n this.groupCharts.forEach(chart => {\n if (chart.sciChartSurface) {\n this.synchronizer.removeAxis(chart.sciChartSurface.xAxes.get(0))\n this.verticalGroup.removeSurface(chart.sciChartSurface)\n chart.sciChartSurface.delete()\n }\n })\n\n this.groupCharts.length = 0\n }\n\n async updateDataSeries() {\n const { config, data } = this\n const { datasets = [], labelDataKey: attrX } = config?.data \|\| {}\n\n if (!(data instanceof Array) \|\| !attrX) {\n return []\n }\n\n const newData = this.dataSet\n\n this.groupCharts.forEach(({ dataKey, sciChartSurface, dataSeries }) => {\n try {\n // dataKey로 시작하는 모든 시리즈를 업데이트\n const relatedDatasets = datasets.filter(dataset => dataset.dataKey?.startsWith(dataKey))\n\n // 각 relatedDatasets에 대해 해당하는 dataSeries를 업데이트\n dataSeries.forEach((ds, index) => {\n ds.clear()\n\n const relatedDataset = relatedDatasets[index]\n if (relatedDataset) {\n const filteredData = newData[datasets.findIndex(ds => ds.dataKey === relatedDataset.dataKey)].filter(\n d => typeof d.yValue === 'number'\n )\n\n if (filteredData.length > 0) {\n ds.appendRange(\n filteredData.map(d => d.xValue),\n filteredData.map(d => d.yValue)\n )\n }\n }\n })\n\n // Zoom 및 리렌더링\n setTimeout(() => {\n sciChartSurface.zoomExtents()\n sciChartSurface.invalidateElement()\n }, 200)\n } catch (error) {\n console.error('Error updating data series:', error)\n }\n })\n\n try {\n // Overview 차트 데이터 업데이트\n this.overviewDataSeries.forEach(ds => ds.clear())\n\n newData.forEach((data, index) => {\n if (this.visibleSeries.includes(datasets[index].dataKey!)) {\n const filteredData = data.filter(d => typeof d.yValue === 'number')\n if (filteredData.length > 0) {\n this.overviewDataSeries[index].appendRange(\n filteredData.map(d => d.xValue),\n filteredData.map(d => d.yValue)\n )\n }\n }\n })\n } catch (error) {\n console.error('Error updating overview data series:', error)\n }\n }\n\n get dataSet(): { xValue: number; yValue: number }[][] {\n const { config, data } = this\n const { datasets = [], labelDataKey: attrX } = config?.data \|\| {}\n\n if (!(data instanceof Array) \|\| !attrX) {\n return []\n }\n\n return datasets.map(dataset => {\n return data\n .map(item => {\n if (!item \|\| typeof item !== 'object') {\n return\n }\n\n const xValue = new Date(item[attrX])\n if (isNaN(xValue.getTime())) {\n console.error('Invalid date:', item[attrX])\n return\n }\n\n return {\n xValue: xValue.getTime() / 1000,\n yValue: item[dataset.dataKey!]\n }\n })\n .filter(Boolean) as { xValue: number; yValue: number }[]\n })\n }\n\n render() {\n const { datasets = [] } = this.config?.data \|\| {}\n\n return html`\n <div id=${this.containerId + '-overview'} class=\"overview\" ?hidden=${!this.showOverview}></div>\n <div id=\"chart-group\">\n ${this.visibleSeries.map(dataKey =>\n keyed(\n dataKey,\n html`\n <div\n id=${this.containerId + '-' + dataKey}\n class=\"grouped-chart\"\n ?hidden=${!this.visibleSeries.includes(dataKey!)}\n ></div>\n `\n )\n )}\n </div>\n `\n }\n\n async buildChartGroup() {\n this.cleanupGroup()\n\n const { config } = this\n const { datasets = [] } = config?.data \|\| {}\n\n await Promise.all(\n datasets\n .filter(dataset => this.visibleSeries.includes(dataset.dataKey!))\n .map(async dataset => {\n await this.addChart(dataset.dataKey!)\n })\n )\n }\n\n async updateSeries(after: string[], before: string[]) {\n /* 기존 시리즈와 새로운 시리즈의 차이를 비교해서, before에는 있는데, after에는 없으면 await removeChart(string)를 호출하고, after에는 있는데, before에는 없으면, addChart(string) 한다. */\n // before에는 있는데 after에는 없는 시리즈를 제거합니다.\n for (const series of before \|\| []) {\n if (!after.includes(series)) {\n await this.removeChart(series)\n }\n }\n\n // after에는 있는데 before에는 없는 시리즈를 추가합니다.\n for (const series of after \|\| []) {\n if (!before \|\| !before.includes(series)) {\n await this.addChart(series)\n }\n }\n }\n\n async addChart(dataKey: string) {\n const groupedChart = {\n dataKey: '',\n sciChartSurface: undefined,\n dataSeries: [] as any[]\n }\n\n const { data = {}, options = {} } = this.config \|\| {}\n const { datasets = [] } = data as OperatoChart.ChartData\n const primaryDataset = datasets.find(dataset => dataset.dataKey == dataKey)\n\n if (!primaryDataset) {\n return\n }\n\n // 해당 dataKey로 시작하는 모든 시리즈를 함께 그룹화하여 차트를 구성\n const relatedDatasets = datasets.filter(dataset => dataset.dataKey?.startsWith(dataKey))\n\n const yAxis = {\n ...options.scales?.yAxes?.[0],\n axisTitle: primaryDataset?.label\n }\n\n const config = {\n ...this.config,\n data: {\n datasets: relatedDatasets // 이 차트에 포함될 모든 관련 시리즈들\n },\n options: {\n ...options,\n scales: {\n ...options.scales,\n yAxes: [yAxis]\n }\n }\n }\n\n const container = this.renderRoot.querySelector(`#${this.containerId + '-' + dataKey}`)\n var { chart, dataSeries } = (await buildSciChart(\n config,\n container,\n { fontSize: 14, fontFamily: 'Roboto', fontColor: undefined },\n {\n precision: primaryDataset.valueFormat ? calculatePrecision(primaryDataset.valueFormat) : undefined,\n grouped: this.containerId\n }\n ))!\n\n this.verticalGroup.addSurfaceToGroup(chart.sciChartSurface)\n this.synchronizer.addAxis(chart.sciChartSurface.xAxes.get(0))\n\n groupedChart.dataKey = primaryDataset.dataKey!\n groupedChart.sciChartSurface = chart.sciChartSurface\n groupedChart.dataSeries = dataSeries\n\n this.groupCharts = this.groupSorter([...this.groupCharts, groupedChart])\n }\n\n removeChart(dataKey: string) {\n const index = this.groupCharts.findIndex((chart: any) => chart.dataKey == dataKey)\n const [groupedChart] = this.groupCharts.splice(index, 1)\n\n if (!groupedChart) {\n return\n }\n\n this.verticalGroup.removeSurface(groupedChart.sciChartSurface)\n this.synchronizer.removeAxis(groupedChart.sciChartSurface.xAxes.get(0))\n\n groupedChart.sciChartSurface.delete()\n groupedChart.sciChartSurface = undefined\n\n this.groupCharts = this.groupSorter(this.groupCharts)\n }\n\n groupSorter(group: any[]) {\n return group.sort(\n (a, b) =>\n this.visibleSeries.findIndex((s: any) => s.dataKey == a.dataKey) -\n this.visibleSeries.findIndex((s: any) => s.dataKey == b.dataKey)\n )\n }\n\n async appendData(appendum: { [attr: string]: any }[]) {}\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ox-scichart-multiple': OxSciChartMultiple\n }\n}\n"]}

package/dist/charts/ox-scichart.js CHANGED Viewed

@@ -43,9 +43,10 @@ let OxSciChart = OxSciChart_1 = class OxSciChart extends LitElement {
         }
     }
     updateDataSeries() {
-        var _a, _b, _c;
-        if (!((_a = this.dataSeries) === null || _a === void 0 ? void 0 : _a.length))
+        var _a;
+        if (!((_a = this.dataSeries) === null || _a === void 0 ? void 0 : _a.length)) {
             return;
+        }
         this.dataSeries.forEach(ds => ds.clear());
         const newData = this.dataSet;
         newData.forEach((data, index) => {
@@ -54,8 +55,11 @@ let OxSciChart = OxSciChart_1 = class OxSciChart extends LitElement {
                 this.dataSeries[index].appendRange(filteredData.map(d => d.xValue), filteredData.map(d => d.yValue));
             }
         });
-        (_b = this.chart) === null || _b === void 0 ? void 0 : _b.sciChartSurface.zoomExtents();
-        (_c = this.chart) === null || _c === void 0 ? void 0 : _c.sciChartSurface.invalidateElement();
+        setTimeout(() => {
+            var _a, _b;
+            (_a = this.chart) === null || _a === void 0 ? void 0 : _a.sciChartSurface.zoomExtents();
+            (_b = this.chart) === null || _b === void 0 ? void 0 : _b.sciChartSurface.invalidateElement();
+        }, 200);
     }
     get dataSet() {
         const { config, data } = this;

package/dist/charts/ox-scichart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-scichart.js","sourceRoot":"","sources":["../../src/charts/ox-scichart.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAG3C,IAAM,UAAU,kBAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QACuB,WAAM,GAAoC,IAAI,CAAA;QAC/C,SAAI,GAA8B,EAAE,CAAA;QAExD,UAAK,GAAQ,IAAI,CAAA;QAChB,eAAU,GAAU,EAAE,CAAA;QAC9B;;;;;;WAMG;QACK,gBAAW,GAAW,cAAc,GAAG,EAAE,YAAU,CAAC,GAAG,CAAA;~~IA8GjE~~,CAAC;~~IArFC~~,KAAK,CAAC,kBAAkB;;QACtB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,MAAA,IAAI,CAAC,KAAK,CAAC,eAAe,0CAAE,MAAM,EAAE,CAAA;YACpC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;QACnB,CAAC;QAED,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,CAAC,MAAM,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAA;QAE9F,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAClB,IAAI,CAAC,UAAU,GAAG,UAAW,CAAA;IAC/B,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,iBAAyD;QACrE,IAAI,cAAc,GAAG,KAAK,CAAA;QAE1B,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACnD,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAA;YAC/B,cAAc,GAAG,IAAI,CAAA;QACvB,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAClC,cAAc,GAAG,IAAI,CAAA;QACvB,CAAC;QAED,IAAI,cAAc,EAAE,CAAC;YACnB,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAA;QAC/B,CAAC;IACH,CAAC;IAED,gBAAgB;;QACd,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,CAAA;~~YAAE~~,OAAM;~~QAEpC~~,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAA;QACzC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA;QAE5B,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAA;YAEnE,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC5B,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,WAAW,CAChC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAC/B,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAChC,CAAA;YACH,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,MAAA,IAAI,CAAC,KAAK,0CAAE,eAAe,CAAC,WAAW,EAAE,CAAA;~~QACzC~~,MAAA,IAAI,CAAC,KAAK,0CAAE,eAAe,CAAC,iBAAiB,EAAE,CAAA;~~IACjD~~,CAAC;IAED,IAAI,OAAO;QACT,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAA;QAC7B,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,EAAE,CAAA;QAEjE,IAAI,CAAC,CAAC,IAAI,YAAY,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACvC,OAAO,EAAE,CAAA;QACX,CAAC;QAED,OAAO,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YAC5B,OAAO,IAAI;iBACR,GAAG,CAAC,IAAI,CAAC,EAAE;gBACV,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;oBACtC,OAAM;gBACR,CAAC;gBAED,MAAM,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;gBACpC,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC;oBAC5B,OAAO,CAAC,KAAK,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;oBAC3C,OAAM;gBACR,CAAC;gBAED,OAAO;oBACL,MAAM,EAAE,MAAM,CAAC,OAAO,EAAE,GAAG,IAAI;oBAC/B,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,OAAQ,CAAC;iBAC/B,CAAA;YACH,CAAC,CAAC;iBACD,MAAM,CAAC,OAAO,CAAyC,CAAA;QAC5D,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,CAAC,UAAU,CAAC,QAAmC,IAAG,CAAC;IAExD,MAAM;QACJ,OAAO,IAAI,CAAA,YAAY,IAAI,CAAC,WAAW,kCAAkC,CAAA;IAC3E,CAAC;;~~AAzGM~~,cAAG,GAAW,CAAC,AAAZ,CAAY;AAEf,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;GAiBlB,AAjBY,CAiBZ;AAnC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA+C;AAC/C;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wCAAqC;AAapC;IAA1B,KAAK,CAAC,kBAAkB,CAAC;6CAA2B;AAf1C,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,~~CA2HtB~~","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { property, query, customElement } from 'lit/decorators.js'\nimport { buildSciChart } from './scichart-builder'\n\n@customElement('ox-scichart')\nexport class OxSciChart extends LitElement {\n @property({ type: Object }) config: OperatoChart.ChartConfig \| null = null\n @property({ type: Array }) data: { [attr: string]: any }[] = []\n\n public chart: any = null\n private dataSeries: any[] = []\n /\n [주의]\n ox-scichart container의 id를 글로벌 유니크하게 해야한다. \n SciChart가 특별히 container의 id를 기반으로 하위 컴포넌트를 구성하고 있기 때문이다.\n shadowDom 안에 있는 container 이더라도, 글로벌 유니크한 id를 제공해야 한다.\n 그렇지 않으면, 단 하나의 차트만 제대로 렌더링된다.\n /\n private containerId: string = 'ox-sci-chart' + ++OxSciChart.idx\n\n @query('.chart-container') container!: HTMLDivElement\n\n static idx: number = 0\n\n static styles = css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n .chart-container {\n display: flex;\n width: 100%;\n height: 100%;\n }\n\n .chart-content {\n flex: 1;\n position: relative;\n }\n `\n\n async initializeSciChart() {\n if (this.chart) {\n this.chart.sciChartSurface?.delete()\n this.chart = null\n }\n\n const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {}, {})) \|\| {}\n\n this.chart = chart\n this.dataSeries = dataSeries!\n }\n\n async updated(changedProperties: Map<string \| number \| symbol, unknown>) {\n var needDataUpdate = false\n\n if (changedProperties.has('config') && this.config) {\n await this.initializeSciChart()\n needDataUpdate = true\n }\n\n if (changedProperties.has('data')) {\n needDataUpdate = true\n }\n\n if (needDataUpdate) {\n await this.updateDataSeries()\n }\n }\n\n updateDataSeries() {\n if (!this.dataSeries?.length) return\n\n this.dataSeries.forEach(ds => ds.clear())\n const newData = this.dataSet\n\n newData.forEach((data, index) => {\n const filteredData = data.filter(d => typeof d.yValue === 'number')\n\n if (filteredData.length > 0) {\n this.dataSeries[index].appendRange(\n filteredData.map(d => d.xValue),\n filteredData.map(d => d.yValue)\n )\n }\n })\n\n this.chart?.sciChartSurface.zoomExtents()\n this.chart?.sciChartSurface.invalidateElement()\n }\n\n get dataSet(): { xValue: number; yValue: number }[][] {\n const { config, data } = this\n const { datasets = [], labelDataKey: attrX } = config?.data \|\| {}\n\n if (!(data instanceof Array) \|\| !attrX) {\n return []\n }\n\n return datasets.map(dataset => {\n return data\n .map(item => {\n if (!item \|\| typeof item !== 'object') {\n return\n }\n\n const xValue = new Date(item[attrX])\n if (isNaN(xValue.getTime())) {\n console.error('Invalid date:', item[attrX])\n return\n }\n\n return {\n xValue: xValue.getTime() / 1000,\n yValue: item[dataset.dataKey!]\n }\n })\n .filter(Boolean) as { xValue: number; yValue: number }[]\n })\n }\n\n async appendData(appendum: { [attr: string]: any }[]) {}\n\n render() {\n return html` <div id=${this.containerId} class=\"chart-container\"></div> `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ox-scichart': OxSciChart\n }\n}\n"]}
1	+ {"version":3,"file":"ox-scichart.js","sourceRoot":"","sources":["../../src/charts/ox-scichart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { property, query, customElement } from 'lit/decorators.js'\nimport { buildSciChart } from './scichart-builder'\n\n@customElement('ox-scichart')\nexport class OxSciChart extends LitElement {\n @property({ type: Object }) config: OperatoChart.ChartConfig \| null = null\n @property({ type: Array }) data: { [attr: string]: any }[] = []\n\n public chart: any = null\n private dataSeries: any[] = []\n /\n [주의]\n ox-scichart container의 id를 글로벌 유니크하게 해야한다. \n SciChart가 특별히 container의 id를 기반으로 하위 컴포넌트를 구성하고 있기 때문이다.\n shadowDom 안에 있는 container 이더라도, 글로벌 유니크한 id를 제공해야 한다.\n 그렇지 않으면, 단 하나의 차트만 제대로 렌더링된다.\n /\n private containerId: string = 'ox-sci-chart' + ++OxSciChart.idx\n\n @query('.chart-container') container!: HTMLDivElement\n\n static idx: number = 0\n\n static styles = css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n .chart-container {\n display: flex;\n width: 100%;\n height: 100%;\n }\n\n .chart-content {\n flex: 1;\n position: relative;\n }\n `\n\n async initializeSciChart() {\n if (this.chart) {\n this.chart.sciChartSurface?.delete()\n this.chart = null\n }\n\n const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {}, {})) \|\| {}\n\n this.chart = chart\n this.dataSeries = dataSeries!\n }\n\n async updated(changedProperties: Map<string \| number \| symbol, unknown>) {\n var needDataUpdate = false\n\n if (changedProperties.has('config') && this.config) {\n await this.initializeSciChart()\n needDataUpdate = true\n }\n\n if (changedProperties.has('data')) {\n needDataUpdate = true\n }\n\n if (needDataUpdate) {\n await this.updateDataSeries()\n }\n }\n\n updateDataSeries() {\n if (!this.dataSeries?.length) {\n return\n }\n\n this.dataSeries.forEach(ds => ds.clear())\n const newData = this.dataSet\n\n newData.forEach((data, index) => {\n const filteredData = data.filter(d => typeof d.yValue === 'number')\n\n if (filteredData.length > 0) {\n this.dataSeries[index].appendRange(\n filteredData.map(d => d.xValue),\n filteredData.map(d => d.yValue)\n )\n }\n })\n\n setTimeout(() => {\n this.chart?.sciChartSurface.zoomExtents()\n this.chart?.sciChartSurface.invalidateElement()\n }, 200)\n }\n\n get dataSet(): { xValue: number; yValue: number }[][] {\n const { config, data } = this\n const { datasets = [], labelDataKey: attrX } = config?.data \|\| {}\n\n if (!(data instanceof Array) \|\| !attrX) {\n return []\n }\n\n return datasets.map(dataset => {\n return data\n .map(item => {\n if (!item \|\| typeof item !== 'object') {\n return\n }\n\n const xValue = new Date(item[attrX])\n if (isNaN(xValue.getTime())) {\n console.error('Invalid date:', item[attrX])\n return\n }\n\n return {\n xValue: xValue.getTime() / 1000,\n yValue: item[dataset.dataKey!]\n }\n })\n .filter(Boolean) as { xValue: number; yValue: number }[]\n })\n }\n\n async appendData(appendum: { [attr: string]: any }[]) {}\n\n render() {\n return html` <div id=${this.containerId} class=\"chart-container\"></div> `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ox-scichart': OxSciChart\n }\n}\n"]}

package/dist/charts/scichart-builder.js CHANGED Viewed

@@ -58,10 +58,10 @@ function createPointMarker(wasmContext, dataset, color = DEFAULT_COLOR) {
 }
 function createAxis(wasmContext, axis, index, isXAxis, fontColor, fontFamily, fontSize, precision, options) {
     const { axisTitle, ticks } = axis;
-    const { autoMax, autoMin, min, max, stepSize, beginAtZero, color = fontColor, textStrokeColor = fontColor, display } = ticks || {};
+    const { autoMax, autoMin, min, max, stepSize, beginAtZero, color = fontColor, textStrokeColor = fontColor, display = false } = ticks || {};
     const axisOptions = {
         axisTitle,
-        autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,
+        autoRange: autoMin || autoMax ? EAutoRange.Always : EAutoRange.Once,
         axisAlignment: isXAxis ? EAxisAlignment.Bottom : index === 0 ? EAxisAlignment.Left : EAxisAlignment.Right,
         visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,
         majorDelta: stepSize,
@@ -76,7 +76,8 @@ function createAxis(wasmContext, axis, index, isXAxis, fontColor, fontFamily, fo
             fontSize,
             color: textStrokeColor
         },
-        ...options
+        ...options,
+        drawLabels: display
     };
     const labelProvider = isXAxis
         ? new SmartDateLabelProvider({
@@ -167,7 +168,7 @@ export async function buildSciChart(config, container, { fontSize = 14, fontFami
     var { theme, tooltip = true, animation = true, legend = {
         display: true,
         position: 'top'
-    }, scales: fromScales, xGridLine = true, yGridLine = true, y2ndGridLine = false, stacked = false, multiAxis = false, annotations = [] } = options || {};
+    }, scales: fromScales, xGridLine = false, yGridLine = false, y2ndGridLine = false, stacked = false, multiAxis = false, annotations = [] } = options || {};
     var baseColor = getBaseColorFromTheme(theme);
     if (theme === 'auto') {
         theme = getThemeFromBrowser();
@@ -178,16 +179,24 @@ export async function buildSciChart(config, container, { fontSize = 14, fontFami
         theme: theme == 'dark' ? new SciChartJSDarkv2Theme() : new SciChartJSLightTheme()
     });
     const { sciChartSurface, wasmContext } = chart;
-    // X 축 설정
     xAxes.forEach((axis, index) => {
-        const xAxis = createAxis(wasmContext, axis, index, true, fontColor, fontFamily, fontSize);
+        const xAxis = createAxis(wasmContext, axis, index, true, fontColor, fontFamily, fontSize, undefined, {
+            drawMajorTickLines: true,
+            drawMinorTickLines: true,
+            drawMajorGridLines: xGridLine,
+            drawMinorGridLines: xGridLine
+        });
         sciChartSurface.xAxes.add(xAxis);
     });
     (multiAxis ? yAxes : [yAxes[0]]).forEach((axis, index) => {
-        const yAxis = createAxis(wasmContext, axis, index, false, fontColor, fontFamily, fontSize, precision);
+        const yAxis = createAxis(wasmContext, axis, index, false, fontColor, fontFamily, fontSize, precision, {
+            drawMajorTickLines: true,
+            drawMinorTickLines: true,
+            drawMajorGridLines: index == 0 ? yGridLine : y2ndGridLine,
+            drawMinorGridLines: index == 0 ? yGridLine : y2ndGridLine
+        });
         sciChartSurface.yAxes.add(yAxis);
     });
-    // 시리즈 설정
     const dataSeriesArray = datasets.map((dataset, index) => {
         const yAxisId = dataset.yAxisID == 'right' && multiAxis ? 'yAxis1' : undefined;
         const { series, dataSeries } = createSeries(wasmContext, dataset, index, !!stacked, !!animation, yAxisId);
@@ -195,14 +204,19 @@ export async function buildSciChart(config, container, { fontSize = 14, fontFami
         if (tooltip) {
             const rolloverModifier = new RolloverModifier({
                 showTooltip: true,
-                showAxisLabel: true /* 한글의 크기를 잘 계산하지 못하므로 false */,
-                modifierGroup: grouped
+                showAxisLabel: true /* show x-axis label for cursor */,
+                modifierGroup: grouped,
+                tooltipDataTemplate: (seriesInfo) => {
+                    const valuesWithLabels = [];
+                    const xySeriesInfo = seriesInfo;
+                    valuesWithLabels.push(xySeriesInfo.formattedYValue);
+                    return valuesWithLabels;
+                }
             });
             sciChartSurface.chartModifiers.add(rolloverModifier);
         }
         return dataSeries;
     });
-    // Stacked collections 추가
     if (stacked) {
         const stackedColumnCollection = new StackedColumnCollection(wasmContext);
         const stackedMountainCollection = new StackedMountainCollection(wasmContext);
@@ -300,10 +314,9 @@ export async function buildSciChart(config, container, { fontSize = 14, fontFami
             }
         });
     }
-    // 줌인/줌아웃 모디파이어 추가
     sciChartSurface.chartModifiers.add(new RubberBandXyZoomModifier({ executeOn: EExecuteOn.MouseRightButton, modifierGroup: grouped }),
     // new ZoomPanModifier({ xyDirection: EXyDirection.XDirection }),
-    new ZoomPanModifier(), new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }), new ZoomExtentsModifier(), new XAxisDragModifier(), new YAxisDragModifier());
+    new ZoomPanModifier({ xyDirection: EXyDirection.XDirection }), new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }), new ZoomExtentsModifier(), new XAxisDragModifier(), new YAxisDragModifier());
     if (legend === null || legend === void 0 ? void 0 : legend.display) {
         const legendModifier = new LegendModifier({
             showCheckboxes: true,
@@ -333,28 +346,45 @@ export async function buildSciChartOverview(config, container, { fontSize = 14,
     }
     fontColor = fontColor || baseColor.clone().toString();
     const { xAxes = [], yAxes = [] } = fromScales || {};
-    // Instead we create a normal chart and then manually add the OverviewRangeSelectionModifier and bind it to the axisSynchroniser
     const chart = await SciChartSurface.create(container, {
         theme: theme == 'dark' ? new SciChartJSDarkv2Theme() : new SciChartJSLightTheme()
     });
     const { sciChartSurface, wasmContext } = chart;
-    // X 축 설정
     xAxes.forEach((axis, index) => {
-        const xAxis = createAxis(wasmContext, axis, index, true, fontColor, fontFamily, fontSize);
+        const xAxis = createAxis(wasmContext, axis, index, true, fontColor, fontFamily, fontSize, undefined, {
+            drawMajorTickLines: false,
+            drawMinorTickLines: false,
+            drawMajorGridLines: false,
+            drawMinorGridLines: false
+        });
         sciChartSurface.xAxes.add(xAxis);
     });
-    (multiAxis ? yAxes : [yAxes[0]]).forEach((axis, index) => {
-        const yAxis = createAxis(wasmContext, axis, index, false, fontColor, fontFamily, fontSize, undefined, {
+    const dataSeriesArray = datasets.map((dataset, index) => {
+        const yAxisId = `yAxis${index}`;
+        const dataSeries = new XyDataSeries(wasmContext, {
+            dataSeriesName: dataset.label,
+            containsNaN: false
+        });
+        const yAxis = new NumericAxis(wasmContext, {
+            id: yAxisId,
+            autoRange: EAutoRange.Always,
             drawLabels: false,
-            drawMajorTicks: false,
-            drawMinorTicks: false,
+            drawMajorTickLines: false,
+            drawMinorTickLines: false,
             drawMajorGridLines: false,
             drawMinorGridLines: false
         });
         sciChartSurface.yAxes.add(yAxis);
+        const series = new FastLineRenderableSeries(wasmContext, {
+            dataSeries,
+            strokeThickness: 1,
+            stroke: convertColor(dataset.color, DEFAULT_COLOR),
+            yAxisId: yAxisId
+        });
+        sciChartSurface.renderableSeries.add(series);
+        return dataSeries;
     });
     const rangeSelectionModifier = new OverviewRangeSelectionModifier();
-    // When the range selection is moved, updated the linked charts
     rangeSelectionModifier.onSelectedAreaChanged = (selectedRange) => {
         if (!selectedRange.equals(axisSynchroniser.visibleRange)) {
             axisSynchroniser.publishChange({ visibleRange: selectedRange });
@@ -362,7 +392,6 @@ export async function buildSciChartOverview(config, container, { fontSize = 14,
     };
     rangeSelectionModifier.selectedArea = axisSynchroniser.visibleRange;
     sciChartSurface.chartModifiers.add(rangeSelectionModifier);
-    // When charts are moved, update the range selection
     axisSynchroniser.visibleRangeChanged.subscribe(({ visibleRange }) => {
         const updatedSelectedRange = visibleRange.clip(sciChartSurface.xAxes.get(0).visibleRange);
         const shouldUpdateSelectedRange = !updatedSelectedRange.equals(rangeSelectionModifier.selectedArea);
@@ -370,12 +399,6 @@ export async function buildSciChartOverview(config, container, { fontSize = 14,
             rangeSelectionModifier.selectedArea = updatedSelectedRange;
         }
     });
-    const dataSeriesArray = datasets.map((dataset, index) => {
-        const yAxisId = dataset.yAxisID == 'right' && multiAxis ? 'yAxis1' : undefined;
-        const { series, dataSeries } = createSeries(wasmContext, dataset, index, !!stacked, !!animation, yAxisId);
-        sciChartSurface.renderableSeries.add(series);
-        return dataSeries;
-    });
     return { chart, dataSeries: dataSeriesArray };
 }
 //# sourceMappingURL=scichart-builder.js.map