@operato/scene-scichart 7.3.10 → 7.3.19

package/src/charts/ox-scichart.ts

@@ -1,157 +0,0 @@
-import { LitElement, html, css } from 'lit'
-import { property, query, customElement } from 'lit/decorators.js'
-import { buildSciChart } from './scichart-builder'
-
-@customElement('ox-scichart')
-export class OxSciChart extends LitElement {
-  @property({ type: Object }) config: OperatoChart.ChartConfig | null = null
-  @property({ type: Array }) data: { [attr: string]: any }[] = []
-
-  public chart: any = null
-  private dataSeries: any[] = []
-  /*
-  [주의]
-   ox-scichart container의 id를 글로벌 유니크하게 해야한다. 
-   SciChart가 특별히 container의 id를 기반으로 하위 컴포넌트를 구성하고 있기 때문이다.
-   shadowDom 안에 있는 container 이더라도, 글로벌 유니크한 id를 제공해야 한다.
-   그렇지 않으면, 단 하나의 차트만 제대로 렌더링된다.
-   */
-  private containerId: string = 'ox-sci-chart' + ++OxSciChart.idx
-
-  @query('.chart-container') container!: HTMLDivElement
-
-  static idx: number = 0
-
-  static styles = css`
-    :host {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-
-    .chart-container {
-      display: flex;
-      width: 100%;
-      height: 100%;
-    }
-
-    .chart-content {
-      flex: 1;
-      position: relative;
-    }
-  `
-
-  async initializeSciChart() {
-    if (this.chart) {
-      this.chart.sciChartSurface?.delete()
-      this.chart = null
-    }
-
-    const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {}, {})) || {}
-
-    this.chart = chart
-    this.dataSeries = dataSeries!
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-
-    // 데이터 시리즈 해제
-    this.dataSeries.forEach(ds => ds.delete())
-    this.dataSeries = []
-
-    // SciChartSurface 해제
-    if (this.chart?.sciChartSurface) {
-      this.chart.sciChartSurface.renderableSeries.clear() // 렌더러 시리즈 제거
-      this.chart.sciChartSurface.xAxes.clear() // X축 제거
-      this.chart.sciChartSurface.yAxes.clear() // Y축 제거
-      this.chart.sciChartSurface.delete() // SciChartSurface 삭제
-    }
-
-    this.chart = null // chart 객체 초기화
-  }
-
-  async updated(changedProperties: Map<string | number | symbol, unknown>) {
-    var needDataUpdate = false
-
-    if (changedProperties.has('config') && this.config) {
-      await this.initializeSciChart()
-      needDataUpdate = true
-    }
-
-    if (changedProperties.has('data')) {
-      needDataUpdate = true
-    }
-
-    if (needDataUpdate) {
-      await this.updateDataSeries()
-    }
-  }
-
-  updateDataSeries() {
-    if (!this.dataSeries?.length) {
-      return
-    }
-
-    this.dataSeries.forEach(ds => ds.clear())
-    const newData = this.dataSet
-
-    newData.forEach((data, index) => {
-      const filteredData = data.filter(d => typeof d.yValue === 'number')
-
-      if (filteredData.length > 0) {
-        this.dataSeries[index].appendRange(
-          filteredData.map(d => d.xValue),
-          filteredData.map(d => d.yValue)
-        )
-      }
-    })
-
-    setTimeout(() => {
-      this.chart?.sciChartSurface.zoomExtents()
-      this.chart?.sciChartSurface.invalidateElement()
-    }, 200)
-  }
-
-  get dataSet(): { xValue: number; yValue: number }[][] {
-    const { config, data } = this
-    const { datasets = [], labelDataKey: attrX } = 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) as { xValue: number; yValue: number }[]
-    })
-  }
-
-  async appendData(appendum: { [attr: string]: any }[]) {}
-
-  render() {
-    return html` <div id=${this.containerId} class="chart-container"></div> `
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ox-scichart': OxSciChart
-  }
-}