@operato/scene-scichart 7.0.7 → 7.1.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.1.0](https://github.com/things-scene/operato-scene/compare/v7.0.12...v7.1.0) (2024-07-28)
+
+
+### :rocket: New Features
+
+* scichart-multiple-timeseries ([d8c6f99](https://github.com/things-scene/operato-scene/commit/d8c6f997bb7118f0400c0f114a42fa1040ebe0d5))
+
+
+
 ## [7.0.7](https://github.com/things-scene/operato-scene/compare/v7.0.6...v7.0.7) (2024-07-13)
 
 

package/dist/charts/axis-synchronizer.d.ts

@@ -0,0 +1,10 @@
+import { AxisBase2D, EventHandler, NumberRange, VisibleRangeChangedArgs } from 'scichart';
+export declare class AxisSynchroniser {
+    visibleRange: NumberRange;
+    private axes;
+    visibleRangeChanged: EventHandler<VisibleRangeChangedArgs>;
+    constructor(initialRange: NumberRange, axes?: AxisBase2D[]);
+    publishChange(data?: VisibleRangeChangedArgs): void;
+    addAxis(axis: AxisBase2D): void;
+    removeAxis(axis: AxisBase2D): void;
+}

package/dist/charts/axis-synchronizer.js

@@ -0,0 +1,32 @@
+import { EventHandler } from 'scichart';
+export class AxisSynchroniser {
+    constructor(initialRange, axes) {
+        this.axes = [];
+        this.visibleRangeChanged = new EventHandler();
+        this.visibleRange = initialRange;
+        this.publishChange = this.publishChange.bind(this);
+        if (axes) {
+            axes.forEach(a => this.addAxis(a));
+        }
+    }
+    publishChange(data) {
+        this.visibleRange = data.visibleRange;
+        this.axes.forEach(a => (a.visibleRange = this.visibleRange));
+        this.visibleRangeChanged.raiseEvent(data);
+    }
+    addAxis(axis) {
+        if (!this.axes.includes(axis)) {
+            this.axes.push(axis);
+            axis.visibleRange = this.visibleRange;
+            axis.visibleRangeChanged.subscribe(this.publishChange);
+        }
+    }
+    removeAxis(axis) {
+        const index = this.axes.findIndex(a => a === axis);
+        if (index >= 0) {
+            this.axes.splice(index, 1);
+            axis.visibleRangeChanged.unsubscribe(this.publishChange);
+        }
+    }
+}
+//# sourceMappingURL=axis-synchronizer.js.map

package/dist/charts/axis-synchronizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"axis-synchronizer.js","sourceRoot":"","sources":["../../src/charts/axis-synchronizer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,YAAY,EAAwC,MAAM,UAAU,CAAA;AAEzF,MAAM,OAAO,gBAAgB;IAK3B,YAAmB,YAAyB,EAAE,IAAmB;QAHzD,SAAI,GAAiB,EAAE,CAAA;QACxB,wBAAmB,GAA0C,IAAI,YAAY,EAA2B,CAAA;QAG7G,IAAI,CAAC,YAAY,GAAG,YAAY,CAAA;QAChC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAClD,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;QACpC,CAAC;IACH,CAAC;IAEM,aAAa,CAAC,IAA8B;QACjD,IAAI,CAAC,YAAY,GAAG,IAAK,CAAC,YAAY,CAAA;QACtC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAA;QAC5D,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;IAC3C,CAAC;IAEM,OAAO,CAAC,IAAgB;QAC7B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACpB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAA;YACrC,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QACxD,CAAC;IACH,CAAC;IAEM,UAAU,CAAC,IAAgB;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAA;QAClD,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;YACf,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;YAC1B,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QAC1D,CAAC;IACH,CAAC;CACF","sourcesContent":["import { AxisBase2D, EventHandler, NumberRange, VisibleRangeChangedArgs } from 'scichart'\n\nexport class AxisSynchroniser {\n  public visibleRange: NumberRange\n  private axes: AxisBase2D[] = []\n  public visibleRangeChanged: EventHandler<VisibleRangeChangedArgs> = new EventHandler<VisibleRangeChangedArgs>()\n\n  public constructor(initialRange: NumberRange, axes?: AxisBase2D[]) {\n    this.visibleRange = initialRange\n    this.publishChange = this.publishChange.bind(this)\n    if (axes) {\n      axes.forEach(a => this.addAxis(a))\n    }\n  }\n\n  public publishChange(data?: VisibleRangeChangedArgs) {\n    this.visibleRange = data!.visibleRange\n    this.axes.forEach(a => (a.visibleRange = this.visibleRange))\n    this.visibleRangeChanged.raiseEvent(data)\n  }\n\n  public addAxis(axis: AxisBase2D) {\n    if (!this.axes.includes(axis)) {\n      this.axes.push(axis)\n      axis.visibleRange = this.visibleRange\n      axis.visibleRangeChanged.subscribe(this.publishChange)\n    }\n  }\n\n  public removeAxis(axis: AxisBase2D) {\n    const index = this.axes.findIndex(a => a === axis)\n    if (index >= 0) {\n      this.axes.splice(index, 1)\n      axis.visibleRangeChanged.unsubscribe(this.publishChange)\n    }\n  }\n}\n"]}

package/dist/charts/ox-scichart-multiple.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+export declare class OxSciChartMultiple extends LitElement {
+    config: OperatoChart.ChartConfig | null;
+    data: {
+        [attr: string]: any;
+    }[];
+    visibleSeries: string[];
+    showOverview: boolean;
+    private synchronizer;
+    private verticalGroup;
+    private isInitializing;
+    private overviewChart;
+    private overviewDataSeries;
+    private groupCharts;
+    private containerId;
+    overviewContainer: HTMLDivElement;
+    static idx: number;
+    static styles: import("lit").CSSResult[];
+    initializeSciChart(): Promise<void>;
+    updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void>;
+    private ensureInitialization;
+    cleanup(): void;
+    cleanupGroup(): void;
+    updateDataSeries(): Promise<never[] | undefined>;
+    get dataSet(): {
+        xValue: number;
+        yValue: number;
+    }[][];
+    render(): import("lit-html").TemplateResult<1>;
+    buildChartGroup(): Promise<void>;
+    updateSeries(after: string[], before: string[]): Promise<void>;
+    addChart(dataKey: string): Promise<void>;
+    removeChart(dataKey: string): void;
+    groupSorter(group: any[]): any[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ox-scichart-multiple': OxSciChartMultiple;
+    }
+}

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

@@ -0,0 +1,272 @@
+var OxSciChartMultiple_1;
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { property, query, customElement } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { buildSciChart, buildSciChartOverview } from './scichart-builder';
+import { AxisSynchroniser } from './axis-synchronizer';
+import { NumberRange, SciChartVerticalGroup } from 'scichart';
+import { ScrollbarStyles } from '@operato/styles';
+let OxSciChartMultiple = OxSciChartMultiple_1 = class OxSciChartMultiple extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.config = null;
+        this.data = [];
+        this.visibleSeries = [];
+        this.showOverview = true;
+        this.synchronizer = new AxisSynchroniser(new NumberRange(200, 500));
+        this.verticalGroup = new SciChartVerticalGroup();
+        this.isInitializing = false;
+        this.overviewChart = null;
+        this.overviewDataSeries = [];
+        this.groupCharts = [];
+        /*
+        [주의]
+         ox-scichart container의 id를 글로벌 유니크하게 해야한다.
+         SciChart가 특별히 container의 id를 기반으로 하위 컴포넌트를 구성하고 있기 때문이다.
+         shadowDom 안에 있는 container 이더라도, 글로벌 유니크한 id를 제공해야 한다.
+         그렇지 않으면, 단 하나의 차트만 제대로 렌더링된다.
+         */
+        this.containerId = 'ox-scichart-multiple' + ++OxSciChartMultiple_1.idx;
+    }
+    async initializeSciChart() {
+        this.cleanup();
+        const { chart, dataSeries } = (await buildSciChartOverview(this.config, this.overviewContainer, {}, this.synchronizer)) || {};
+        this.verticalGroup.addSurfaceToGroup(chart.sciChartSurface);
+        this.overviewChart = chart;
+        this.overviewDataSeries = dataSeries;
+    }
+    async updated(changedProperties) {
+        var needDataUpdate = false;
+        if (changedProperties.has('config') && this.config) {
+            this.isInitializing = true;
+            await this.initializeSciChart();
+            this.isInitializing = false;
+            needDataUpdate = true;
+        }
+        if (changedProperties.has('visibleSeries')) {
+            if (this.isInitializing) {
+                await this.ensureInitialization();
+            }
+            await this.updateSeries(this.visibleSeries, changedProperties.get('visibleSeries'));
+            needDataUpdate = true;
+        }
+        if (changedProperties.has('data')) {
+            needDataUpdate = true;
+        }
+        if (needDataUpdate) {
+            await this.updateDataSeries();
+        }
+    }
+    async ensureInitialization() {
+        while (this.isInitializing) {
+            await new Promise(resolve => setTimeout(resolve, 100)); // Check every 100ms
+        }
+    }
+    cleanup() {
+        var _a;
+        this.cleanupGroup();
+        if (this.overviewChart) {
+            (_a = this.overviewChart.sciChartSurface) === null || _a === void 0 ? void 0 : _a.delete();
+            this.overviewChart = null;
+        }
+    }
+    cleanupGroup() {
+        this.groupCharts.forEach(chart => {
+            if (chart.sciChartSurface) {
+                this.synchronizer.removeAxis(chart.sciChartSurface.xAxes.get(0));
+                this.verticalGroup.removeSurface(chart.sciChartSurface);
+                chart.sciChartSurface.delete();
+            }
+        });
+        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 }) => {
+            dataSeries.forEach(ds => ds.clear());
+            const dataSet = newData.filter((data, index) => dataKey == datasets[index].dataKey);
+            dataSet.forEach((data, index) => {
+                dataSeries[index].appendRange(data.map(d => d.xValue), data.map(d => d.yValue));
+            });
+            sciChartSurface.zoomExtents();
+            sciChartSurface.invalidateElement();
+        });
+        this.overviewDataSeries.forEach(ds => ds.clear());
+        newData.forEach((data, index) => {
+            if (this.visibleSeries.includes(datasets[index].dataKey)) {
+                this.overviewDataSeries[index].appendRange(data.map(d => d.xValue), data.map(d => d.yValue));
+            }
+        });
+        (_a = this.overviewChart) === null || _a === void 0 ? void 0 : _a.sciChartSurface.zoomExtents();
+        (_b = this.overviewChart) === null || _b === void 0 ? void 0 : _b.sciChartSurface.invalidateElement();
+    }
+    get dataSet() {
+        const { config, data } = this;
+        const { datasets = [], labelDataKey: attrX } = (config === null || config === void 0 ? void 0 : config.data) || {};
+        if (!(data instanceof Array) || !attrX) {
+            return [];
+        }
+        return datasets.map(dataset => {
+            return data
+                .map(item => {
+                if (!item || typeof item !== 'object') {
+                    return;
+                }
+                const xValue = new Date(item[attrX]);
+                if (isNaN(xValue.getTime())) {
+                    console.error('Invalid date:', item[attrX]);
+                    return;
+                }
+                return {
+                    xValue: xValue.getTime() / 1000,
+                    yValue: item[dataset.dataKey]
+                };
+            })
+                .filter(Boolean);
+        });
+    }
+    render() {
+        var _a;
+        const { datasets = [] } = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.data) || {};
+        return html `
+      <div id=${this.containerId + '-overview'} class="overview" ?hidden=${!this.showOverview}></div>
+      <div id="chart-group">
+        ${datasets.map(({ dataKey }) => keyed(dataKey, html `
+              <div
+                id=${this.containerId + '-' + dataKey}
+                class="grouped-chart"
+                ?hidden=${!this.visibleSeries.includes(dataKey)}
+              ></div>
+            `))}
+      </div>
+    `;
+    }
+    async buildChartGroup() {
+        this.cleanupGroup();
+        const { config } = this;
+        const { datasets = [] } = (config === null || config === void 0 ? void 0 : config.data) || {};
+        await Promise.all(datasets
+            .filter(dataset => this.visibleSeries.includes(dataset.dataKey))
+            .map(async (dataset) => {
+            await this.addChart(dataset.dataKey);
+        }));
+    }
+    async updateSeries(after, before) {
+        /* 기존 시리즈와 새로운 시리즈의 차이를 비교해서, before에는 있는데, after에는 없으면 await removeChart(string)를 호출하고, after에는 있는데, before에는 없으면, addChart(string) 한다. */
+        // before에는 있는데 after에는 없는 시리즈를 제거합니다.
+        for (const series of before || []) {
+            if (!after.includes(series)) {
+                await this.removeChart(series);
+            }
+        }
+        // after에는 있는데 before에는 없는 시리즈를 추가합니다.
+        for (const series of after || []) {
+            if (!before || !before.includes(series)) {
+                await this.addChart(series);
+            }
+        }
+    }
+    async addChart(dataKey) {
+        var _a;
+        const groupedChart = {
+            dataKey: '',
+            sciChartSurface: undefined,
+            dataSeries: []
+        };
+        const { data } = this;
+        const { datasets = [] } = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.data) || {};
+        const config = {
+            ...this.config,
+            data: {
+                ...data,
+                datasets: datasets.filter(dataset => dataset.dataKey == dataKey)
+            }
+        };
+        const container = this.renderRoot.querySelector(`#${this.containerId + '-' + dataKey}`);
+        var { chart, dataSeries } = (await buildSciChart(config, container, { fontSize: undefined, fontFamily: undefined, fontColor: undefined }, this.containerId));
+        this.verticalGroup.addSurfaceToGroup(chart.sciChartSurface);
+        this.synchronizer.addAxis(chart.sciChartSurface.xAxes.get(0));
+        groupedChart.dataKey = config.data.datasets[0].dataKey;
+        groupedChart.sciChartSurface = chart.sciChartSurface;
+        groupedChart.dataSeries = dataSeries;
+        this.groupCharts = this.groupSorter([...this.groupCharts, groupedChart]);
+    }
+    removeChart(dataKey) {
+        const index = this.groupCharts.findIndex((chart) => chart.dataKey == dataKey);
+        const [groupedChart] = this.groupCharts.splice(index, 1);
+        if (!groupedChart) {
+            return;
+        }
+        this.verticalGroup.removeSurface(groupedChart.sciChartSurface);
+        this.synchronizer.removeAxis(groupedChart.sciChartSurface.xAxes.get(0));
+        groupedChart.sciChartSurface.delete();
+        groupedChart.sciChartSurface = undefined;
+        this.groupCharts = this.groupSorter(this.groupCharts);
+    }
+    groupSorter(group) {
+        return group.sort((a, b) => this.visibleSeries.findIndex((s) => s.dataKey == a.dataKey) -
+            this.visibleSeries.findIndex((s) => s.dataKey == b.dataKey));
+    }
+};
+OxSciChartMultiple.idx = 0;
+OxSciChartMultiple.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+        height: 100%;
+      }
+
+      .overview {
+        height: 80px;
+      }
+
+      #chart-group {
+        flex: 1;
+
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+      }
+
+      .grouped-chart {
+        flex: 1;
+
+        min-height: 25%;
+      }
+
+      [hidden] {
+        display: none;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], OxSciChartMultiple.prototype, "config", void 0);
+__decorate([
+    property({ type: Array })
+], OxSciChartMultiple.prototype, "data", void 0);
+__decorate([
+    property({ type: Array })
+], OxSciChartMultiple.prototype, "visibleSeries", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-overview' })
+], OxSciChartMultiple.prototype, "showOverview", void 0);
+__decorate([
+    query('.overview')
+], OxSciChartMultiple.prototype, "overviewContainer", void 0);
+OxSciChartMultiple = OxSciChartMultiple_1 = __decorate([
+    customElement('ox-scichart-multiple')
+], OxSciChartMultiple);
+export { OxSciChartMultiple };
+//# sourceMappingURL=ox-scichart-multiple.js.map

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

@@ -0,0 +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 { buildSciChart, buildSciChartOverview } from './scichart-builder'\nimport { AxisSynchroniser } from './axis-synchronizer'\nimport { NumberRange, 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      dataSeries.forEach(ds => ds.clear())\n      const dataSet = newData.filter((data, index) => dataKey == datasets[index].dataKey!)\n\n      dataSet.forEach((data, index) => {\n        dataSeries[index].appendRange(\n          data.map(d => d.xValue),\n          data.map(d => d.yValue)\n        )\n      })\n\n      sciChartSurface.zoomExtents()\n      sciChartSurface.invalidateElement()\n    })\n\n    this.overviewDataSeries.forEach(ds => ds.clear())\n\n    newData.forEach((data, index) => {\n      if (this.visibleSeries.includes(datasets[index].dataKey!)) {\n        this.overviewDataSeries[index].appendRange(\n          data.map(d => d.xValue),\n          data.map(d => d.yValue)\n        )\n      }\n    })\n\n    this.overviewChart?.sciChartSurface.zoomExtents()\n    this.overviewChart?.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  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 } = this\n    const { datasets = [] } = this.config?.data || {}\n\n    const config = {\n      ...this.config,\n      data: {\n        ...data,\n        datasets: datasets.filter(dataset => dataset.dataKey == dataKey)\n      }\n    }\n\n    const container = this.renderRoot.querySelector(`#${this.containerId + '-' + dataKey}`)\n    var { chart, dataSeries } = (await buildSciChart(\n      config,\n      container,\n      { fontSize: undefined, fontFamily: undefined, fontColor: undefined },\n      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\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ox-scichart-multiple': OxSciChartMultiple\n  }\n}\n"]}

package/dist/charts/ox-scichart.d.ts

@@ -4,7 +4,7 @@ export declare class OxSciChart extends LitElement {
     data: {
         [attr: string]: any;
     }[];
-    private chart;
+    chart: any;
     private dataSeries;
     private containerId;
     container: HTMLDivElement;

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

@@ -1 +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  private 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      this.dataSeries[index].appendRange(\n        data.map(d => d.xValue),\n        data.map(d => d.yValue)\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  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"]}
+{"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) return\n\n    this.dataSeries.forEach(ds => ds.clear())\n    const newData = this.dataSet\n\n    newData.forEach((data, index) => {\n      this.dataSeries[index].appendRange(\n        data.map(d => d.xValue),\n        data.map(d => d.yValue)\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  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.d.ts

@@ -1,8 +1,17 @@
+import { AxisSynchroniser } from './axis-synchronizer';
 export declare function buildSciChart(config: OperatoChart.ChartConfig | undefined | null, container: any, { fontSize, fontFamily, fontColor }: {
     fontSize?: number;
     fontFamily?: string;
     fontColor?: string;
-}): Promise<{
+}, grouped?: string): Promise<{
+    chart: any;
+    dataSeries: any[];
+} | undefined>;
+export declare function buildSciChartOverview(config: OperatoChart.ChartConfig | undefined | null, container: any, { fontSize, fontFamily, fontColor }: {
+    fontSize?: number;
+    fontFamily?: string;
+    fontColor?: string;
+}, axisSynchroniser: AxisSynchroniser): Promise<{
     chart: any;
     dataSeries: any[];
 } | undefined>;

package/dist/charts/scichart-builder.js

@@ -1,5 +1,5 @@
 import { TinyColor } from '@ctrl/tinycolor';
-import { SciChartSurface, SciChartJSLightTheme, SciChartJSDarkv2Theme, XyDataSeries, FastLineRenderableSeries, SplineLineRenderableSeries, FastColumnRenderableSeries, StackedColumnRenderableSeries, StackedMountainRenderableSeries, StackedColumnCollection, StackedMountainCollection, NumericAxis, DateTimeNumericAxis, EAutoRange, EAxisAlignment, ECoordinateMode, EHorizontalAnchorPoint, EVerticalAnchorPoint, NumberRange, MouseWheelZoomModifier, ZoomPanModifier, ZoomExtentsModifier, RolloverModifier, SmartDateLabelProvider, EllipsePointMarker, SquarePointMarker, TrianglePointMarker, CrossPointMarker, XPointMarker, WaveAnimation, LegendModifier, ELegendPlacement, EXyDirection, XAxisDragModifier, YAxisDragModifier, TextAnnotation, LineAnnotation, BoxAnnotation, HorizontalLineAnnotation, VerticalLineAnnotation } from 'scichart';
+import { SciChartSurface, SciChartJSLightTheme, SciChartJSDarkv2Theme, XyDataSeries, FastLineRenderableSeries, SplineLineRenderableSeries, FastColumnRenderableSeries, StackedColumnRenderableSeries, StackedMountainRenderableSeries, StackedColumnCollection, StackedMountainCollection, NumericAxis, DateTimeNumericAxis, EAutoRange, EAxisAlignment, EExecuteOn, ECoordinateMode, EHorizontalAnchorPoint, EVerticalAnchorPoint, NumberRange, MouseWheelZoomModifier, RubberBandXyZoomModifier, ZoomPanModifier, ZoomExtentsModifier, RolloverModifier, SmartDateLabelProvider, EllipsePointMarker, SquarePointMarker, TrianglePointMarker, CrossPointMarker, XPointMarker, WaveAnimation, LegendModifier, ELegendPlacement, EXyDirection, XAxisDragModifier, YAxisDragModifier, TextAnnotation, LineAnnotation, BoxAnnotation, HorizontalLineAnnotation, VerticalLineAnnotation, OverviewRangeSelectionModifier, ENumericFormat } from 'scichart';
 SciChartSurface.UseCommunityLicense();
 SciChartSurface.configure({
     dataUrl: `/node_modules/scichart/_wasm/scichart2d.data`,
@@ -10,6 +10,10 @@ const DEFAULT_STROKE = '#000000';
 const POINT_MARKER_SIZE = 10;
 const STROKE_THICKNESS = 2;
 const ANIMATION_DURATION = 1000;
+function getLocalTimeOffset() {
+    const now = new Date();
+    return now.getTimezoneOffset() * -60;
+}
 function getBaseColorFromTheme(theme) {
     return new TinyColor(theme == 'dark' ? '#fff' : '#000');
 }
@@ -45,7 +49,7 @@ function createPointMarker(wasmContext, dataset, color = DEFAULT_COLOR) {
             return new EllipsePointMarker(wasmContext, pointMarkerOptions);
     }
 }
-function createAxis(wasmContext, axis, index, isXAxis, fontColor, fontFamily, fontSize) {
+function createAxis(wasmContext, axis, index, isXAxis, fontColor, fontFamily, fontSize, options) {
     const { axisTitle, ticks } = axis;
     const { autoMax, autoMin, min, max, stepSize, beginAtZero, color = fontColor, textStrokeColor = fontColor } = ticks || {};
     const axisOptions = {
@@ -64,10 +68,21 @@ function createAxis(wasmContext, axis, index, isXAxis, fontColor, fontFamily, fo
             fontFamily,
             fontSize,
             color: textStrokeColor
-        }
+        },
+        ...options
     };
+    const labelProvider = new SmartDateLabelProvider({
+        labelFormat: ENumericFormat.Date_HHMMSS,
+        showWiderDateOnFirstLabel: true,
+        showYearOnWiderDate: true,
+        dateOffset: getLocalTimeOffset()
+    });
+    labelProvider.cursorNumericFormat = ENumericFormat.Date_DDMMHHMM;
     return isXAxis
-        ? new DateTimeNumericAxis(wasmContext, { ...axisOptions, labelProvider: new SmartDateLabelProvider() })
+        ? new DateTimeNumericAxis(wasmContext, {
+            ...axisOptions,
+            labelProvider
+        })
         : new NumericAxis(wasmContext, { ...axisOptions, id: index !== 0 ? `yAxis${index}` : undefined });
 }
 function createSeries(wasmContext, dataset, index, stacked, animation, yAxisId) {
@@ -125,7 +140,7 @@ function createSeries(wasmContext, dataset, index, stacked, animation, yAxisId)
     }
     return { series, dataSeries };
 }
-export async function buildSciChart(config, container, { fontSize, fontFamily, fontColor }) {
+export async function buildSciChart(config, container, { fontSize, fontFamily, fontColor }, grouped) {
     if (!config)
         return;
     const { type: chartType, options, data: fromData } = config;
@@ -158,7 +173,8 @@ export async function buildSciChart(config, container, { fontSize, fontFamily, f
         if (tooltip) {
             const rolloverModifier = new RolloverModifier({
                 showTooltip: true,
-                showAxisLabel: true
+                showAxisLabel: true,
+                modifierGroup: grouped
             });
             sciChartSurface.chartModifiers.add(rolloverModifier);
         }
@@ -255,8 +271,7 @@ export async function buildSciChart(config, container, { fontSize, fontFamily, f
         });
     }
     // 줌인/줌아웃 모디파이어 추가
-    sciChartSurface.chartModifiers.add(
-    // new RubberBandXyZoomModifier(),
+    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());
     if (legend === null || legend === void 0 ? void 0 : legend.display) {
@@ -276,4 +291,61 @@ export async function buildSciChart(config, container, { fontSize, fontFamily, f
     }
     return { chart, dataSeries: dataSeriesArray };
 }
+export async function buildSciChartOverview(config, container, { fontSize, fontFamily, fontColor }, axisSynchroniser) {
+    if (!config)
+        return;
+    const { type: chartType, options, data: fromData } = config;
+    const { datasets = [] } = fromData || {};
+    var { theme, animation, scales: fromScales, stacked, multiAxis } = options || {};
+    var baseColor = getBaseColorFromTheme(theme);
+    if (theme === 'auto') {
+        theme = getThemeFromBrowser();
+    }
+    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);
+        sciChartSurface.xAxes.add(xAxis);
+    });
+    (multiAxis ? yAxes : [yAxes[0]]).forEach((axis, index) => {
+        const yAxis = createAxis(wasmContext, axis, index, false, fontColor, fontFamily, fontSize, {
+            drawLabels: false,
+            drawMajorTicks: false,
+            drawMinorTicks: false,
+            drawMajorGridLines: false,
+            drawMinorGridLines: false
+        });
+        sciChartSurface.yAxes.add(yAxis);
+    });
+    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 });
+        }
+    };
+    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);
+        if (shouldUpdateSelectedRange) {
+            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