@operato/scene-scichart 7.2.6 → 7.2.8

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

@@ -2,9 +2,23 @@ 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 } from './scichart-builder'
+import {
+  calculatePrecision,
+  buildSciChart,
+  buildSciChartOverview,
+  convertColor,
+  DEFAULT_COLOR
+} from './scichart-builder'
 import { AxisSynchroniser } from './axis-synchronizer'
-import { NumberRange, scaleAxes, SciChartVerticalGroup } from 'scichart'
+import {
+  EAutoRange,
+  FastLineRenderableSeries,
+  NumberRange,
+  NumericAxis,
+  scaleAxes,
+  SciChartVerticalGroup,
+  XyDataSeries
+} from 'scichart'
 
 import { ScrollbarStyles } from '@operato/styles'
 
@@ -18,7 +32,6 @@ export class OxSciChartMultiple extends LitElement {
   private synchronizer: AxisSynchroniser = new AxisSynchroniser(new NumberRange(200, 500))
   private verticalGroup: SciChartVerticalGroup = new SciChartVerticalGroup()
 
-  private isInitializing: boolean = false
   private overviewChart: any = null
   private overviewDataSeries: any[] = []
   private groupCharts: {
@@ -27,6 +40,8 @@ export class OxSciChartMultiple extends LitElement {
     dataSeries: any[]
   }[] = []
 
+  private initializationQueue: Promise<void> = Promise.resolve()
+
   /*
   [주의]
    ox-scichart container의 id를 글로벌 유니크하게 해야한다. 
@@ -77,16 +92,15 @@ export class OxSciChartMultiple extends LitElement {
 
   async initializeSciChart() {
     this.cleanup()
+    await this.createOverviewChart()
+  }
 
-    // Overview 차트는 정확히 일치하는 시리즈 이름만 포함
-    const overviewDatasets =
-      this.config?.data.datasets.filter(dataset => this.visibleSeries.includes(dataset.dataKey!)) || []
-
+  async createOverviewChart() {
     const { chart, dataSeries } =
       (await buildSciChartOverview(
         {
           ...this.config,
-          data: { datasets: overviewDatasets }
+          data: { datasets: [] }
         },
         this.overviewContainer,
         {},
@@ -100,45 +114,44 @@ export class OxSciChartMultiple extends LitElement {
   }
 
   async updated(changedProperties: Map<string | number | symbol, unknown>) {
-    var needDataUpdate = false
-
-    if (changedProperties.has('config') && this.config) {
-      this.isInitializing = true
-      await this.initializeSciChart()
-      this.isInitializing = false
-      needDataUpdate = true
-    }
+    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')) {
-      if (this.isInitializing) {
-        await this.ensureInitialization()
-      }
-      await this.updateSeries(this.visibleSeries, changedProperties.get('visibleSeries') as string[])
-      needDataUpdate = 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')) {
-      needDataUpdate = true
-    }
+        if (changedProperties.has('data')) {
+          needUpdateDataSeries = true
+        }
 
-    if (needDataUpdate) {
-      await this.updateDataSeries()
-    }
-  }
+        if (needBuildChartGroup) {
+          await this.buildChartGroup()
+        }
 
-  private async ensureInitialization() {
-    while (this.isInitializing) {
-      await new Promise(resolve => setTimeout(resolve, 100)) // Check every 100ms
-    }
+        if (needUpdateDataSeries) {
+          await this.updateDataSeries()
+        }
+      })
+      .catch((error: any) => {
+        console.error('Error in updated queue:', error)
+      })
   }
 
   cleanup() {
     this.cleanupGroup()
-
-    if (this.overviewChart) {
-      this.overviewChart.sciChartSurface?.delete()
-      this.overviewChart = null
-    }
+    this.cleanupOverview()
   }
 
   cleanupGroup() {
@@ -153,6 +166,16 @@ export class OxSciChartMultiple extends LitElement {
     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 || {}
@@ -187,11 +210,8 @@ export class OxSciChartMultiple extends LitElement {
           }
         })
 
-        // Zoom 및 리렌더링
-        setTimeout(() => {
-          sciChartSurface.zoomExtents()
-          sciChartSurface.invalidateElement()
-        }, 200)
+        sciChartSurface.zoomExtents()
+        sciChartSurface.invalidateElement()
       } catch (error) {
         console.error('Error updating data series:', error)
       }
@@ -199,19 +219,38 @@ export class OxSciChartMultiple extends LitElement {
 
     try {
       // Overview 차트 데이터 업데이트
-      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)
-            )
-          }
+      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)
     }
@@ -285,38 +324,65 @@ export class OxSciChartMultiple extends LitElement {
   }
 
   async updateSeries(after: string[], before: string[]) {
-    /* 기존 시리즈와 새로운 시리즈의 차이를 비교해서, before에는 있는데, after에는 없으면 await removeChart(string)를 호출하고, after에는 있는데, before에는 없으면, addChart(string) 한다. */
-    // before에는 있는데 after에는 없는 시리즈를 제거합니다.
-    for (const series of before || []) {
-      if (!after.includes(series)) {
-        await this.removeChart(series)
-      }
+    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)
     }
 
-    // after에는 있는데 before에는 없는 시리즈를 추가합니다.
-    for (const series of after || []) {
-      if (!before || !before.includes(series)) {
-        await this.addChart(series)
-      }
+    for (const series of addSeries) {
+      await this.addChart(series)
     }
   }
 
   async addChart(dataKey: string) {
-    const groupedChart = {
-      dataKey: '',
-      sciChartSurface: undefined,
-      dataSeries: [] as any[]
+    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
+      return null
     }
 
-    // 해당 dataKey로 시작하는 모든 시리즈를 함께 그룹화하여 차트를 구성
     const relatedDatasets = datasets.filter(dataset => dataset.dataKey?.startsWith(dataKey))
 
     const yAxis = {
@@ -327,7 +393,7 @@ export class OxSciChartMultiple extends LitElement {
     const config = {
       ...this.config,
       data: {
-        datasets: relatedDatasets // 이 차트에 포함될 모든 관련 시리즈들
+        datasets: relatedDatasets
       },
       options: {
         ...options,
@@ -339,7 +405,7 @@ export class OxSciChartMultiple extends LitElement {
     }
 
     const container = this.renderRoot.querySelector(`#${this.containerId + '-' + dataKey}`)
-    var { chart, dataSeries } = (await buildSciChart(
+    const { chart, dataSeries } = (await buildSciChart(
       config,
       container,
       { fontSize: 14, fontFamily: 'Roboto', fontColor: undefined },
@@ -349,46 +415,137 @@ export class OxSciChartMultiple extends LitElement {
       }
     ))!
 
-    this.verticalGroup.addSurfaceToGroup(chart.sciChartSurface)
     this.synchronizer.addAxis(chart.sciChartSurface.xAxes.get(0))
 
-    groupedChart.dataKey = primaryDataset.dataKey!
-    groupedChart.sciChartSurface = chart.sciChartSurface
-    groupedChart.dataSeries = dataSeries
+    // 각 시리즈에 대해 올바른 데이터를 추가
+    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)
+        )
+      }
+    })
 
-    this.groupCharts = this.groupSorter([...this.groupCharts, groupedChart])
+    return { chart, dataSeries, dataKey }
   }
 
-  removeChart(dataKey: string) {
-    const index = this.groupCharts.findIndex((chart: any) => chart.dataKey == dataKey)
-    const [groupedChart] = this.groupCharts.splice(index, 1)
+  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()
+  }
 
-    if (!groupedChart) {
+  private async addSeriesToOverviewChart(dataKey: string) {
+    if (!this.overviewChart || !this.overviewDataSeries) {
+      console.error('Overview chart is not initialized.')
       return
     }
 
-    this.verticalGroup.removeSurface(groupedChart.sciChartSurface)
-    this.synchronizer.removeAxis(groupedChart.sciChartSurface.xAxes.get(0))
+    // 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
+    })
 
-    groupedChart.sciChartSurface.delete()
-    groupedChart.sciChartSurface = undefined
+    if (existingSeries) {
+      console.warn(`Series for dataKey ${dataKey} already exists in the overview chart.`)
+      return // Exit the function without adding the series again
+    }
 
-    this.groupCharts = this.groupSorter(this.groupCharts)
+    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)
+    }
   }
 
-  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)
-    )
+  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)
+    }
   }
 
-  async appendData(appendum: { [attr: string]: any }[]) {}
-}
+  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)
+      }
+    }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'ox-scichart-multiple': OxSciChartMultiple
+    return { series, dataSeries }
   }
 }

package/src/charts/scichart-builder.ts

@@ -56,7 +56,7 @@ SciChartSurface.configure({
   wasmUrl: `/node_modules/scichart/_wasm/scichart2d.wasm`
 })
 
-const DEFAULT_COLOR = '#FF6600'
+export const DEFAULT_COLOR = '#FF6600'
 const DEFAULT_STROKE = '#000000'
 const POINT_MARKER_SIZE = 10
 const STROKE_THICKNESS = 2
@@ -75,7 +75,7 @@ function getThemeFromBrowser() {
   return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
 }
 
-function convertColor(color: string | string[] | undefined, defaultColor?: string) {
+export function convertColor(color: string | string[] | undefined, defaultColor?: string) {
   const tinyColor = new TinyColor(color as string)
   return tinyColor.toHex8String() || defaultColor
 }
@@ -488,7 +488,7 @@ export async function buildSciChartOverview(
 
   const { type: chartType, options, data: fromData } = config
   const { datasets = [] } = fromData || {}
-  var { theme, animation, scales: fromScales, stacked, multiAxis } = options || {}
+  var { theme, scales: fromScales } = options || {}
 
   var baseColor = getBaseColorFromTheme(theme)
 
@@ -515,36 +515,38 @@ export async function buildSciChartOverview(
     sciChartSurface.xAxes.add(xAxis)
   })
 
-  const dataSeriesArray = datasets.map((dataset, index) => {
-    const yAxisId = `yAxis${index}`
-    const dataSeries = new XyDataSeries(wasmContext, {
-      dataSeriesName: dataset.label,
-      containsNaN: false
-    })
+  getDefaultYAxis(wasmContext, sciChartSurface)
 
-    const yAxis = new NumericAxis(wasmContext, {
-      id: yAxisId,
-      autoRange: EAutoRange.Always,
-      drawLabels: false,
-      drawMajorTickLines: false,
-      drawMinorTickLines: false,
-      drawMajorGridLines: false,
-      drawMinorGridLines: false
-    })
+  // const dataSeriesArray = datasets.map((dataset, index) => {
+  //   const yAxisId = `yAxis${index}`
+  //   const dataSeries = new XyDataSeries(wasmContext, {
+  //     dataSeriesName: dataset.label,
+  //     containsNaN: false
+  //   })
 
-    sciChartSurface.yAxes.add(yAxis)
+  //   const yAxis = new NumericAxis(wasmContext, {
+  //     id: yAxisId,
+  //     autoRange: EAutoRange.Always,
+  //     drawLabels: false,
+  //     drawMajorTickLines: false,
+  //     drawMinorTickLines: false,
+  //     drawMajorGridLines: false,
+  //     drawMinorGridLines: false
+  //   })
 
-    const series = new FastLineRenderableSeries(wasmContext, {
-      dataSeries,
-      strokeThickness: 1,
-      stroke: convertColor(dataset.color, DEFAULT_COLOR),
-      yAxisId: yAxisId
-    })
+  //   sciChartSurface.yAxes.add(yAxis)
 
-    sciChartSurface.renderableSeries.add(series)
+  //   const series = new FastLineRenderableSeries(wasmContext, {
+  //     dataSeries,
+  //     strokeThickness: 1,
+  //     stroke: convertColor(dataset.color, DEFAULT_COLOR),
+  //     yAxisId: yAxisId
+  //   })
 
-    return dataSeries
-  })
+  //   sciChartSurface.renderableSeries.add(series)
+
+  //   return dataSeries
+  // })
 
   const rangeSelectionModifier = new OverviewRangeSelectionModifier()
   rangeSelectionModifier.onSelectedAreaChanged = (selectedRange?: NumberRange) => {
@@ -557,12 +559,27 @@ export async function buildSciChartOverview(
   sciChartSurface.chartModifiers.add(rangeSelectionModifier)
 
   axisSynchroniser.visibleRangeChanged.subscribe(({ visibleRange }: any) => {
-    const updatedSelectedRange = visibleRange.clip(sciChartSurface.xAxes.get(0).visibleRange)
+    const xAxis = sciChartSurface.xAxes.get(0)
+    const updatedSelectedRange = visibleRange.clip(xAxis.visibleRange)
     const shouldUpdateSelectedRange = !updatedSelectedRange.equals(rangeSelectionModifier.selectedArea)
     if (shouldUpdateSelectedRange) {
       rangeSelectionModifier.selectedArea = updatedSelectedRange
     }
   })
 
-  return { chart, dataSeries: dataSeriesArray }
+  return { chart, dataSeries: [] }
+}
+
+function getDefaultYAxis(wasmContext: any, sciChartSurface: any): void {
+  const yAxis = new NumericAxis(wasmContext, {
+    id: 'DefaultAxisId',
+    autoRange: EAutoRange.Always,
+    drawLabels: false,
+    drawMajorTickLines: false,
+    drawMinorTickLines: false,
+    drawMajorGridLines: false,
+    drawMinorGridLines: false
+  })
+
+  sciChartSurface.yAxes.add(yAxis)
 }

package/src/templates/scichart-multiple-timeseries.ts

@@ -82,6 +82,6 @@ export default {
       }
     },
     showOverview: true,
-    visibleSeries: ['count', 'average']
+    visibleSeries: []
   }
 }