@operato/scene-scichart 7.0.7 → 7.1.0

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

@@ -0,0 +1,334 @@
+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'
+
+@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 isInitializing: boolean = false
+  private overviewChart: any = null
+  private overviewDataSeries: any[] = []
+  private groupCharts: {
+    dataKey: string
+    sciChartSurface: any
+    dataSeries: any[]
+  }[] = []
+
+  /*
+  [주의]
+   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()
+
+    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: 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
+    }
+
+    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('data')) {
+      needDataUpdate = true
+    }
+
+    if (needDataUpdate) {
+      await this.updateDataSeries()
+    }
+  }
+
+  private async ensureInitialization() {
+    while (this.isInitializing) {
+      await new Promise(resolve => setTimeout(resolve, 100)) // Check every 100ms
+    }
+  }
+
+  cleanup() {
+    this.cleanupGroup()
+
+    if (this.overviewChart) {
+      this.overviewChart.sciChartSurface?.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() {
+    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 }) => {
+      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)
+        )
+      }
+    })
+
+    this.overviewChart?.sciChartSurface.zoomExtents()
+    this.overviewChart?.sciChartSurface.invalidateElement()
+  }
+
+  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">
+        ${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?.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[]) {
+    /* 기존 시리즈와 새로운 시리즈의 차이를 비교해서, 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: string) {
+    const groupedChart = {
+      dataKey: '',
+      sciChartSurface: undefined,
+      dataSeries: [] as any[]
+    }
+
+    const { data } = this
+    const { datasets = [] } = this.config?.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: string) {
+    const index = this.groupCharts.findIndex((chart: any) => 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: any[]) {
+    return group.sort(
+      (a, b) =>
+        this.visibleSeries.findIndex((s: any) => s.dataKey == a.dataKey) -
+        this.visibleSeries.findIndex((s: any) => s.dataKey == b.dataKey)
+    )
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ox-scichart-multiple': OxSciChartMultiple
+  }
+}

package/src/charts/ox-scichart.ts

@@ -7,7 +7,7 @@ export class OxSciChart extends LitElement {
   @property({ type: Object }) config: OperatoChart.ChartConfig | null = null
   @property({ type: Array }) data: { [attr: string]: any }[] = []
 
-  private chart: any = null
+  public chart: any = null
   private dataSeries: any[] = []
   /*
   [주의]

package/src/charts/scichart-builder.ts

@@ -1,5 +1,4 @@
 import { TinyColor } from '@ctrl/tinycolor'
-import { format as formatText } from '@operato/utils/format.js'
 import {
   SciChartSurface,
   SciChartJSLightTheme,
@@ -16,6 +15,7 @@ import {
   DateTimeNumericAxis,
   EAutoRange,
   EAxisAlignment,
+  EExecuteOn,
   ECoordinateMode,
   EHorizontalAnchorPoint,
   EVerticalAnchorPoint,
@@ -41,8 +41,11 @@ import {
   LineAnnotation,
   BoxAnnotation,
   HorizontalLineAnnotation,
-  VerticalLineAnnotation
+  VerticalLineAnnotation,
+  OverviewRangeSelectionModifier,
+  ENumericFormat
 } from 'scichart'
+import { AxisSynchroniser } from './axis-synchronizer'
 
 SciChartSurface.UseCommunityLicense()
 
@@ -57,6 +60,11 @@ 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?: 'light' | 'dark' | 'auto') {
   return new TinyColor(theme == 'dark' ? '#fff' : '#000')
 }
@@ -106,7 +114,8 @@ function createAxis(
   isXAxis: boolean,
   fontColor: string,
   fontFamily?: string,
-  fontSize?: number
+  fontSize?: number,
+  options?: any
 ) {
   const { axisTitle, ticks } = axis
   const {
@@ -136,11 +145,24 @@ function createAxis(
       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 })
 }
 
@@ -212,7 +234,8 @@ function createSeries(
 export async function buildSciChart(
   config: OperatoChart.ChartConfig | undefined | null,
   container: any,
-  { fontSize, fontFamily, fontColor }: { fontSize?: number; fontFamily?: string; fontColor?: string }
+  { fontSize, fontFamily, fontColor }: { fontSize?: number; fontFamily?: string; fontColor?: string },
+  grouped?: string
 ): Promise<{ chart: any; dataSeries: any[] } | undefined> {
   if (!config) return
 
@@ -269,7 +292,8 @@ export async function buildSciChart(
     if (tooltip) {
       const rolloverModifier = new RolloverModifier({
         showTooltip: true,
-        showAxisLabel: true
+        showAxisLabel: true,
+        modifierGroup: grouped
       })
 
       sciChartSurface.chartModifiers.add(rolloverModifier)
@@ -377,7 +401,7 @@ export async function buildSciChart(
 
   // 줌인/줌아웃 모디파이어 추가
   sciChartSurface.chartModifiers.add(
-    // new RubberBandXyZoomModifier(),
+    new RubberBandXyZoomModifier({ executeOn: EExecuteOn.MouseRightButton, modifierGroup: grouped }),
     // new ZoomPanModifier({ xyDirection: EXyDirection.XDirection }),
     new ZoomPanModifier(),
     new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }),
@@ -406,3 +430,80 @@ export async function buildSciChart(
 
   return { chart, dataSeries: dataSeriesArray }
 }
+
+export async 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> {
+  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)
+  })
+
+  // Y 축 설정
+  ;(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?: NumberRange) => {
+    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 }: any) => {
+    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 }
+}

package/src/index.ts

@@ -1 +1,2 @@
 export { default as scichartTimeseries } from './scichart-timeseries'
+export { default as scichartMultipleTimeseries } from './scichart-multiple-timeseries'

package/src/scichart-multiple-timeseries.ts

@@ -0,0 +1,74 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'boolean',
+      label: 'show-overview',
+      name: 'showOverview'
+    },
+    {
+      type: 'scichart',
+      label: '',
+      name: 'chart'
+    }
+  ],
+  'value-property': 'visibleSeries',
+  help: 'scene/component/scichart-multiple-timeseries'
+}
+
+import './charts/ox-scichart-multiple'
+
+import { Component, HTMLOverlayContainer, Properties, ComponentNature, error } from '@hatiolab/things-scene'
+
+import { OxSciChartMultiple } from './charts/ox-scichart-multiple'
+
+export default class ScichartMultipleTimeseries extends HTMLOverlayContainer {
+  static get nature() {
+    return NATURE
+  }
+
+  async oncreate_element(scichart: OxSciChartMultiple) {}
+
+  dispose() {
+    super.dispose()
+  }
+
+  setElementProperties(scichart: OxSciChartMultiple) {
+    const { data, chart, showOverview, visibleSeries } = this.state
+
+    scichart.config = chart
+    scichart.data = data
+    scichart.showOverview = showOverview
+    scichart.visibleSeries = visibleSeries || []
+  }
+
+  reposition() {
+    super.reposition()
+  }
+
+  get tagName() {
+    return 'ox-scichart-multiple'
+  }
+
+  get visibleSeries() {
+    const { visibleSeries } = this.state
+    return visibleSeries || []
+  }
+
+  set visibleSeries(visibleSeries: string[]) {
+    this.setState('visibleSeries', visibleSeries)
+    ;(this.element as OxSciChartMultiple).visibleSeries = visibleSeries
+  }
+
+  async onchangeData(after: Properties, before: Properties): Promise<void> {
+    ;(this.element as OxSciChartMultiple).data = this.data
+  }
+}
+
+Component.register('scichart-multiple-timeseries', ScichartMultipleTimeseries)

package/src/scichart-timeseries.ts

@@ -2,7 +2,7 @@
  * Copyright © HatioLab Inc. All rights reserved.
  */
 
-const NATURE = {
+const NATURE: ComponentNature = {
   mutable: false,
   resizable: true,
   rotatable: true,
@@ -12,7 +12,8 @@ const NATURE = {
       label: '',
       name: 'chart'
     }
-  ]
+  ],
+  help: 'scene/component/scichart-timeseries'
 }
 
 import './charts/ox-scichart'
@@ -43,58 +44,6 @@ export default class ScichartTimeSeries extends HTMLOverlayContainer {
     super.reposition()
   }
 
-  // get dataSet(): { xValue: number; yValue: number }[] {
-  //   var { attrX, attrY, data } = this.state
-
-  //   if (!(data instanceof Array)) {
-  //     return []
-  //   }
-
-  //   return data
-  //     .map((item, i) => {
-  //       if (!item || typeof item !== 'object') {
-  //         return
-  //       }
-
-  //       console.log('Data item:', item) // 데이터 항목을 로그로 출력
-  //       const xValue = new Date(item[attrX])
-  //       console.log('Parsed Date:', xValue) // 파싱된 날짜를 로그로 출력
-  //       if (isNaN(xValue.getTime())) {
-  //         console.error('Invalid date:', item[attrX]) // 유효하지 않은 날짜를 로그로 출력
-  //         return
-  //       }
-
-  //       return {
-  //         xValue: xValue.getTime() / 1000, // 타임스탬프를 초 단위로 변환
-  //         yValue: item[attrY]
-  //       }
-  //     })
-  //     .filter(Boolean) as { xValue: number; yValue: number }[]
-  // }
-
-  // async onchangeData(after: Properties, before: Properties): Promise<void> {
-  //   console.log('onchangeData called') // 데이터 변경 시 로그 출력
-  //   this.updateDataSeries()
-  //   this.surface?.sciChartSurface.zoomExtents()
-  // }
-
-  // updateDataSeries() {
-  //   if (!this.dataSeries) return
-
-  //   this.dataSeries.clear()
-  //   const newData = this.dataSet
-
-  //   console.log('Updating data series with:', newData) // 새 데이터 로그 출력
-
-  //   this.dataSeries.appendRange(
-  //     newData.map(d => d.xValue), // Date 객체를 타임스탬프로 변환
-  //     newData.map(d => d.yValue)
-  //   )
-
-  //   this.surface?.sciChartSurface.zoomExtents() // 데이터 변경 후 영역 조정
-  //   this.surface?.sciChartSurface.invalidateElement() // 차트를 다시 그리도록 요청
-  // }
-
   get tagName() {
     return 'ox-scichart'
   }

package/src/templates/index.ts

@@ -1,3 +1,4 @@
 import scichartTimeseries from './scichart-timeseries'
+import scichartMultipleTimeseries from './scichart-multiple-timeseries'
 
-export default [scichartTimeseries]
+export default [scichartTimeseries, scichartMultipleTimeseries]