@operato/scene-scichart 7.0.5 → 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,10 @@ import {
   DateTimeNumericAxis,
   EAutoRange,
   EAxisAlignment,
+  EExecuteOn,
+  ECoordinateMode,
+  EHorizontalAnchorPoint,
+  EVerticalAnchorPoint,
   NumberRange,
   MouseWheelZoomModifier,
   RubberBandXyZoomModifier,
@@ -33,8 +36,16 @@ import {
   ELegendPlacement,
   EXyDirection,
   XAxisDragModifier,
-  YAxisDragModifier
+  YAxisDragModifier,
+  TextAnnotation,
+  LineAnnotation,
+  BoxAnnotation,
+  HorizontalLineAnnotation,
+  VerticalLineAnnotation,
+  OverviewRangeSelectionModifier,
+  ENumericFormat
 } from 'scichart'
+import { AxisSynchroniser } from './axis-synchronizer'
 
 SciChartSurface.UseCommunityLicense()
 
@@ -49,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')
 }
@@ -98,7 +114,8 @@ function createAxis(
   isXAxis: boolean,
   fontColor: string,
   fontFamily?: string,
-  fontSize?: number
+  fontSize?: number,
+  options?: any
 ) {
   const { axisTitle, ticks } = axis
   const {
@@ -128,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 })
 }
 
@@ -204,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
 
@@ -219,7 +250,9 @@ export async function buildSciChart(
     xGridLine,
     yGridLine,
     y2ndGridLine,
-    stacked
+    stacked,
+    multiAxis,
+    annotations
   } = options || {}
 
   var baseColor = getBaseColorFromTheme(theme)
@@ -244,14 +277,14 @@ export async function buildSciChart(
   })
 
   // Y 축 설정
-  yAxes.forEach((axis, index) => {
+  ;(multiAxis ? yAxes : [yAxes[0]]).forEach((axis, index) => {
     const yAxis = createAxis(wasmContext, axis, index, false, fontColor, fontFamily, fontSize)
     sciChartSurface.yAxes.add(yAxis)
   })
 
   // 시리즈 설정
   const dataSeriesArray = datasets.map((dataset, index) => {
-    const yAxisId = dataset.yAxisID == 'right' ? 'yAxis1' : undefined
+    const yAxisId = dataset.yAxisID == 'right' && multiAxis ? 'yAxis1' : undefined
     const { series, dataSeries } = createSeries(wasmContext, dataset, index, !!stacked, !!animation, yAxisId)
 
     sciChartSurface.renderableSeries.add(series)
@@ -259,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)
@@ -290,9 +324,84 @@ export async function buildSciChart(
     }
   }
 
+  if (annotations) {
+    annotations.forEach(annotation => {
+      let sciAnnotation: any
+      let horizontalAnchorPoint: EHorizontalAnchorPoint =
+        annotation.horizontalAnchorPoint == 'Right'
+          ? EHorizontalAnchorPoint.Right
+          : annotation.horizontalAnchorPoint == 'Left'
+          ? EHorizontalAnchorPoint.Left
+          : EHorizontalAnchorPoint.Center
+      let verticalAnchorPoint: EVerticalAnchorPoint =
+        annotation.verticalAnchorPoint == 'Top'
+          ? EVerticalAnchorPoint.Top
+          : annotation.verticalAnchorPoint == 'Bottom'
+          ? EVerticalAnchorPoint.Bottom
+          : EVerticalAnchorPoint.Center
+
+      switch (annotation.type) {
+        case 'text':
+          sciAnnotation = new TextAnnotation({
+            x1: annotation.x1,
+            y1: annotation.y1,
+            text: annotation.text,
+            horizontalAnchorPoint,
+            verticalAnchorPoint,
+            fontSize: annotation.fontSize,
+            fontFamily: annotation.fontFamily,
+            textColor: convertColor(annotation.stroke, fontColor)
+          })
+          break
+        case 'line':
+          sciAnnotation = new LineAnnotation({
+            x1: annotation.x1,
+            y1: annotation.y1,
+            x2: annotation.x2,
+            y2: annotation.y2,
+            stroke: convertColor(annotation.stroke, '#FF0000'),
+            strokeThickness: annotation.strokeThickness,
+            xCoordinateMode: ECoordinateMode.Relative,
+            yCoordinateMode: ECoordinateMode.DataValue
+          })
+          break
+        case 'box':
+          sciAnnotation = new BoxAnnotation({
+            x1: annotation.x1,
+            y1: annotation.y1,
+            x2: annotation.x2,
+            y2: annotation.y2,
+            fill: convertColor(annotation.fill, '#FF0000'),
+            stroke: convertColor(annotation.stroke, '#FF0000'),
+            strokeThickness: annotation.strokeThickness
+          })
+          break
+        case 'horizontalLine':
+          sciAnnotation = new HorizontalLineAnnotation({
+            y1: annotation.y1,
+            stroke: convertColor(annotation.stroke, '#FF0000'),
+            strokeThickness: annotation.strokeThickness
+          })
+          break
+        case 'verticalLine':
+          sciAnnotation = new VerticalLineAnnotation({
+            x1: annotation.x1,
+            stroke: convertColor(annotation.stroke, '#FF0000'),
+            strokeThickness: annotation.strokeThickness
+          })
+          break
+        default:
+          break
+      }
+      if (sciAnnotation) {
+        sciChartSurface.annotations.add(sciAnnotation)
+      }
+    })
+  }
+
   // 줌인/줌아웃 모디파이어 추가
   sciChartSurface.chartModifiers.add(
-    // new RubberBandXyZoomModifier(),
+    new RubberBandXyZoomModifier({ executeOn: EExecuteOn.MouseRightButton, modifierGroup: grouped }),
     // new ZoomPanModifier({ xyDirection: EXyDirection.XDirection }),
     new ZoomPanModifier(),
     new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }),
@@ -321,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'