@operato/scene-scichart 8.0.0-beta.1 → 9.0.0-beta.0

package/src/charts/axis-synchronizer.ts

@@ -1,37 +0,0 @@
-import { AxisBase2D, EventHandler, NumberRange, VisibleRangeChangedArgs } from 'scichart'
-
-export class AxisSynchroniser {
-  public visibleRange: NumberRange
-  private axes: AxisBase2D[] = []
-  public visibleRangeChanged: EventHandler<VisibleRangeChangedArgs> = new EventHandler<VisibleRangeChangedArgs>()
-
-  public constructor(initialRange: NumberRange, axes?: AxisBase2D[]) {
-    this.visibleRange = initialRange
-    this.publishChange = this.publishChange.bind(this)
-    if (axes) {
-      axes.forEach(a => this.addAxis(a))
-    }
-  }
-
-  public publishChange(data?: VisibleRangeChangedArgs) {
-    this.visibleRange = data!.visibleRange
-    this.axes.forEach(a => (a.visibleRange = this.visibleRange))
-    this.visibleRangeChanged.raiseEvent(data)
-  }
-
-  public addAxis(axis: AxisBase2D) {
-    if (!this.axes.includes(axis)) {
-      this.axes.push(axis)
-      axis.visibleRange = this.visibleRange
-      axis.visibleRangeChanged.subscribe(this.publishChange)
-    }
-  }
-
-  public removeAxis(axis: AxisBase2D) {
-    const index = this.axes.findIndex(a => a === axis)
-    if (index >= 0) {
-      this.axes.splice(index, 1)
-      axis.visibleRangeChanged.unsubscribe(this.publishChange)
-    }
-  }
-}

package/src/charts/ox-scichart-multiple.ts

@@ -1,579 +0,0 @@
-import { LitElement, html, css } from 'lit'
-import { property, query, customElement } from 'lit/decorators.js'
-import { keyed } from 'lit/directives/keyed.js'
-
-import {
-  calculatePrecision,
-  buildSciChart,
-  buildSciChartOverview,
-  convertColor,
-  DEFAULT_COLOR
-} from './scichart-builder'
-import { AxisSynchroniser } from './axis-synchronizer'
-import {
-  EAutoRange,
-  FastLineRenderableSeries,
-  NumberRange,
-  NumericAxis,
-  scaleAxes,
-  SciChartVerticalGroup,
-  XyDataSeries
-} from 'scichart'
-
-import { ScrollbarStyles } from '@operato/styles'
-
-@customElement('ox-scichart-multiple')
-export class OxSciChartMultiple extends LitElement {
-  @property({ type: Object }) config: OperatoChart.ChartConfig | null = null
-  @property({ type: Array }) data: { [attr: string]: any }[] = []
-  @property({ type: Array }) visibleSeries: string[] = []
-  @property({ type: Boolean, attribute: 'show-overview' }) showOverview: boolean = true
-
-  private synchronizer: AxisSynchroniser = new AxisSynchroniser(new NumberRange(200, 500))
-  private verticalGroup: SciChartVerticalGroup = new SciChartVerticalGroup()
-
-  private overviewChart: any = null
-  private overviewDataSeries: any[] = []
-  private groupCharts: {
-    dataKey: string
-    sciChartSurface: any
-    dataSeries: any[]
-  }[] = []
-
-  private initializationQueue: Promise<void> = Promise.resolve()
-
-  /*
-  [주의]
-   ox-scichart container의 id를 글로벌 유니크하게 해야한다. 
-   SciChart가 특별히 container의 id를 기반으로 하위 컴포넌트를 구성하고 있기 때문이다.
-   shadowDom 안에 있는 container 이더라도, 글로벌 유니크한 id를 제공해야 한다.
-   그렇지 않으면, 단 하나의 차트만 제대로 렌더링된다.
-   */
-  private containerId: string = 'ox-scichart-multiple' + ++OxSciChartMultiple.idx
-
-  @query('.overview') overviewContainer!: HTMLDivElement
-
-  static idx: number = 0
-
-  static 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;
-      }
-    `
-  ]
-
-  async initializeSciChart() {
-    this.cleanup()
-    await this.createOverviewChart()
-  }
-
-  dispose() {
-    // 그룹 차트 자원 해제
-    this.groupCharts.forEach(chart => {
-      if (chart.sciChartSurface) {
-        this.synchronizer.removeAxis(chart.sciChartSurface.xAxes.get(0))
-        this.verticalGroup.removeSurface(chart.sciChartSurface)
-
-        // 각 데이터 시리즈 명시적으로 해제
-        chart.dataSeries.forEach(ds => ds.delete())
-
-        // 차트 삭제
-        chart.sciChartSurface.delete()
-      }
-    })
-
-    // 오버뷰 차트 자원 해제
-    if (this.overviewChart) {
-      this.overviewChart.sciChartSurface.renderableSeries.clear()
-      this.overviewDataSeries.forEach(ds => ds.delete())
-      this.overviewChart.sciChartSurface.delete()
-      this.overviewDataSeries.length = 0
-    }
-
-    // 사용된 그룹, 오버뷰 데이터 초기화
-    this.groupCharts.length = 0
-    this.overviewChart = null
-  }
-
-  async createOverviewChart() {
-    const { chart, dataSeries } =
-      (await buildSciChartOverview(
-        {
-          ...this.config,
-          data: { datasets: [] }
-        },
-        this.overviewContainer,
-        {},
-        this.synchronizer
-      )) || {}
-
-    this.verticalGroup.addSurfaceToGroup(chart.sciChartSurface)
-
-    this.overviewChart = chart
-    this.overviewDataSeries = dataSeries!
-  }
-
-  async updated(changedProperties: Map<string | number | symbol, unknown>) {
-    this.initializationQueue = this.initializationQueue
-      .then(async () => {
-        let needUpdateDataSeries = false
-        let needBuildChartGroup = false
-
-        if (changedProperties.has('config') && this.config) {
-          await this.initializeSciChart()
-          needBuildChartGroup = true
-          needUpdateDataSeries = true
-        }
-
-        if (changedProperties.has('visibleSeries')) {
-          await this.updateSeries(this.visibleSeries, changedProperties.get('visibleSeries') as string[])
-          /* [중요] buildChartGroup 을 visibleSeries 수정때마다 하는 이유는, render() 의 캐시 컨트롤이 안되기 때문이다. 가급적 시도하지 말라. */
-          needBuildChartGroup = true
-          needUpdateDataSeries = true
-        }
-
-        if (changedProperties.has('data')) {
-          needUpdateDataSeries = true
-        }
-
-        if (needBuildChartGroup) {
-          await this.buildChartGroup()
-        }
-
-        if (needUpdateDataSeries) {
-          await this.updateDataSeries()
-        }
-      })
-      .catch((error: any) => {
-        console.error('Error in updated queue:', error)
-      })
-  }
-
-  cleanup() {
-    this.cleanupGroup()
-    this.cleanupOverview()
-  }
-
-  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
-  }
-
-  cleanupOverview() {
-    if (this.overviewChart) {
-      this.overviewChart.sciChartSurface.renderableSeries.clear()
-      this.overviewDataSeries.forEach(ds => ds.delete())
-      this.overviewDataSeries.length = 0
-    }
-
-    this.overviewChart = null
-  }
-
-  async updateDataSeries() {
-    const { config, data } = this
-    const { datasets = [], labelDataKey: attrX } = config?.data || {}
-
-    if (!(data instanceof Array) || !attrX) {
-      return []
-    }
-
-    const newData = this.dataSet
-
-    this.groupCharts.forEach(({ dataKey, sciChartSurface, dataSeries }) => {
-      try {
-        // dataKey로 시작하는 모든 시리즈를 업데이트
-        const relatedDatasets = datasets.filter(dataset => dataset.dataKey?.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)
-              )
-            }
-          }
-        })
-
-        sciChartSurface.zoomExtents()
-        sciChartSurface.invalidateElement()
-      } catch (error) {
-        console.error('Error updating data series:', error)
-      }
-    })
-
-    try {
-      // Overview 차트 데이터 업데이트
-      this.overviewDataSeries.forEach((ds, index) => {
-        const visibleKey = this.visibleSeries[index]
-        const dataset = datasets.find(dataset => dataset.dataKey === visibleKey)
-        if (!dataset) {
-          return
-        }
-
-        const dataIndex = datasets.findIndex(ds => ds.dataKey === dataset.dataKey)
-        const filteredData = newData[dataIndex]?.filter(d => typeof d.yValue === 'number') || []
-
-        ds.clear()
-        if (filteredData.length > 0) {
-          ds.appendRange(
-            filteredData.map(d => d.xValue),
-            filteredData.map(d => d.yValue)
-          )
-        }
-      })
-
-      // this.overviewDataSeries.forEach(ds => ds.clear())
-
-      // newData.forEach((data, index) => {
-      //   if (this.visibleSeries.includes(datasets[index].dataKey!)) {
-      //     const filteredData = data.filter(d => typeof d.yValue === 'number')
-      //     if (filteredData.length > 0) {
-      //       this.overviewDataSeries[index].appendRange(
-      //         filteredData.map(d => d.xValue),
-      //         filteredData.map(d => d.yValue)
-      //       )
-      //     }
-      //   }
-      // })
-    } catch (error) {
-      console.error('Error updating overview data series:', error)
-    }
-  }
-
-  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 }[]
-    })
-  }
-
-  render() {
-    const { datasets = [] } = this.config?.data || {}
-
-    return html`
-      <div id=${this.containerId + '-overview'} class="overview" ?hidden=${!this.showOverview}></div>
-      <div id="chart-group">
-        ${this.visibleSeries.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?.data || {}
-
-    await Promise.all(
-      datasets
-        .filter(dataset => this.visibleSeries.includes(dataset.dataKey!))
-        .map(async dataset => {
-          await this.addChart(dataset.dataKey!)
-        })
-    )
-  }
-
-  async updateSeries(after: string[], before: string[]) {
-    const addSeries = after?.filter(series => !before?.includes(series)) || []
-    const removeSeries = before?.filter(series => !after?.includes(series)) || []
-
-    for (const series of removeSeries) {
-      await this.removeChart(series)
-    }
-
-    for (const series of addSeries) {
-      await this.addChart(series)
-    }
-  }
-
-  async addChart(dataKey: string) {
-    const chartData = await this.createChart(dataKey)
-
-    if (chartData) {
-      const { chart, dataSeries, dataKey } = chartData
-      this.verticalGroup.addSurfaceToGroup(chart.sciChartSurface)
-
-      this.groupCharts = this.groupSorter([
-        ...this.groupCharts,
-        { dataKey, sciChartSurface: chart.sciChartSurface, dataSeries }
-      ])
-
-      await this.addSeriesToOverviewChart(dataKey)
-    }
-  }
-
-  async removeChart(dataKey: string) {
-    const index = this.groupCharts.findIndex(chart => chart.dataKey == dataKey)
-    if (index === -1) return
-
-    const [groupedChart] = this.groupCharts.splice(index, 1)
-    this.destroyChart(groupedChart)
-
-    this.groupCharts = this.groupSorter(this.groupCharts)
-
-    await this.removeSeriesFromOverviewChart(dataKey)
-  }
-
-  groupSorter(group: any[]) {
-    return group.sort(
-      (a, b) =>
-        this.visibleSeries.findIndex((s: any) => s.dataKey == a.dataKey) -
-        this.visibleSeries.findIndex((s: any) => s.dataKey == b.dataKey)
-    )
-  }
-
-  async appendData(appendum: { [attr: string]: any }[]) {}
-
-  private async createChart(dataKey: string) {
-    const { data = {}, options = {} } = this.config || {}
-    const { datasets = [] } = data as OperatoChart.ChartData
-    const primaryDataset = datasets.find(dataset => dataset.dataKey == dataKey)
-
-    if (!primaryDataset) {
-      return null
-    }
-
-    const relatedDatasets = datasets.filter(dataset => dataset.dataKey?.startsWith(dataKey))
-
-    const yAxis = {
-      ...options.scales?.yAxes?.[0],
-      axisTitle: primaryDataset?.label
-    }
-
-    const config = {
-      ...this.config,
-      data: {
-        datasets: relatedDatasets
-      },
-      options: {
-        ...options,
-        scales: {
-          ...options.scales,
-          yAxes: [yAxis]
-        }
-      }
-    }
-
-    const container = this.renderRoot.querySelector(`#${this.containerId + '-' + dataKey}`)
-    const { chart, dataSeries } = (await buildSciChart(
-      config,
-      container,
-      { fontSize: 14, fontFamily: 'Roboto', fontColor: undefined },
-      {
-        precision: primaryDataset.valueFormat ? calculatePrecision(primaryDataset.valueFormat) : undefined,
-        grouped: this.containerId
-      }
-    ))!
-
-    this.synchronizer.addAxis(chart.sciChartSurface.xAxes.get(0))
-
-    // 각 시리즈에 대해 올바른 데이터를 추가
-    const newData = this.dataSet
-    dataSeries.forEach((ds, seriesIndex) => {
-      const dataset = relatedDatasets[seriesIndex]
-      const filteredData = newData[seriesIndex]?.filter(d => typeof d.yValue === 'number') || []
-      if (filteredData.length > 0) {
-        ds.appendRange(
-          filteredData.map(d => d.xValue),
-          filteredData.map(d => d.yValue)
-        )
-      }
-    })
-
-    return { chart, dataSeries, dataKey }
-  }
-
-  private destroyChart(groupedChart: { dataKey: string; sciChartSurface: any; dataSeries: any[] }) {
-    this.verticalGroup.removeSurface(groupedChart.sciChartSurface)
-    this.synchronizer.removeAxis(groupedChart.sciChartSurface.xAxes.get(0))
-    groupedChart.sciChartSurface.delete()
-  }
-
-  private async addSeriesToOverviewChart(dataKey: string) {
-    if (!this.overviewChart || !this.overviewDataSeries) {
-      console.error('Overview chart is not initialized.')
-      return
-    }
-
-    // Check if the series already exists in the overview chart
-    const existingSeries = this.overviewChart.sciChartSurface.renderableSeries.asArray().find((series: any) => {
-      return series.dataSeries.dataSeriesName === dataKey
-    })
-
-    if (existingSeries) {
-      console.warn(`Series for dataKey ${dataKey} already exists in the overview chart.`)
-      return // Exit the function without adding the series again
-    }
-
-    const dataset = this.config?.data.datasets.find(dataset => dataset.dataKey === dataKey)
-    if (!dataset) {
-      console.error('Dataset not found for dataKey:', dataKey)
-      return
-    }
-
-    const newSeries = await this.createSeriesForOverview(dataset)
-
-    if (newSeries) {
-      this.overviewChart.sciChartSurface.renderableSeries.add(newSeries.series)
-      this.overviewDataSeries.push(newSeries.dataSeries)
-    }
-  }
-
-  private async removeSeriesFromOverviewChart(dataKey: string) {
-    if (!this.overviewChart || !this.overviewDataSeries) {
-      console.error('Overview chart is not initialized.')
-      return
-    }
-
-    const { sciChartSurface } = this.overviewChart
-
-    // 오버뷰 차트의 renderableSeries에서 해당 시리즈 제거
-    const seriesIndex = sciChartSurface.renderableSeries.asArray().findIndex((series: any) => {
-      return series.dataSeries.dataSeriesName === dataKey
-    })
-
-    if (seriesIndex !== -1) {
-      const series = sciChartSurface.renderableSeries.get(seriesIndex)
-      const yAxisId = series.yAxisId
-
-      // 시리즈 제거
-      sciChartSurface.renderableSeries.removeAt(seriesIndex)
-      this.overviewDataSeries.splice(seriesIndex, 1) // 데이터 시리즈도 제거
-
-      // 고유 Y축 제거
-      if (yAxisId) {
-        const yAxisIndex = sciChartSurface.yAxes.asArray().findIndex((axis: any) => axis.id === yAxisId)
-        if (yAxisIndex !== -1) {
-          sciChartSurface.yAxes.removeAt(yAxisIndex)
-        }
-      }
-    } else {
-      console.error('Series not found in overview chart for dataKey:', dataKey)
-    }
-  }
-
-  private async createSeriesForOverview(dataset: any) {
-    if (!this.overviewChart) return null
-
-    const { sciChartSurface, wasmContext } = this.overviewChart
-    const dataSeries = new XyDataSeries(wasmContext, {
-      dataSeriesName: dataset.dataKey,
-      containsNaN: false
-    })
-
-    // 새로운 Y축을 추가하여 노멀라이즈 효과를 제공
-    const yAxisId = `yAxis_${dataset.dataKey}`
-    const yAxis = new NumericAxis(wasmContext, {
-      id: yAxisId,
-      autoRange: EAutoRange.Always,
-      drawLabels: 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
-    })
-
-    // 초기 데이터 추가
-    const newData = this.dataSet.find((data, index) => this.config?.data.datasets[index].dataKey === dataset.dataKey)
-    if (newData && newData.length > 0) {
-      const filteredData = newData.filter(d => typeof d.yValue === 'number')
-      if (filteredData.length > 0) {
-        dataSeries.appendRange(
-          filteredData.map(d => d.xValue),
-          filteredData.map(d => d.yValue)
-        )
-      } else {
-        console.warn('No valid yValues found for dataset:', dataset.dataKey)
-      }
-    }
-
-    return { series, dataSeries }
-  }
-}