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

package/src/charts/scichart-builder.ts

@@ -1,630 +0,0 @@
-import { TinyColor } from '@ctrl/tinycolor'
-import {
-  SciChartSurface,
-  SciChartJSLightTheme,
-  SciChartJSDarkv2Theme,
-  XyDataSeries,
-  FastLineRenderableSeries,
-  SplineLineRenderableSeries,
-  FastColumnRenderableSeries,
-  StackedColumnRenderableSeries,
-  StackedMountainRenderableSeries,
-  StackedColumnCollection,
-  StackedMountainCollection,
-  NumericAxis,
-  DateTimeNumericAxis,
-  EAutoRange,
-  EAxisAlignment,
-  EExecuteOn,
-  ECoordinateMode,
-  EHorizontalAnchorPoint,
-  EVerticalAnchorPoint,
-  NumberRange,
-  MouseWheelZoomModifier,
-  RubberBandXyZoomModifier,
-  ZoomPanModifier,
-  ZoomExtentsModifier,
-  RolloverModifier,
-  NumericLabelProvider,
-  SmartDateLabelProvider,
-  EllipsePointMarker,
-  SquarePointMarker,
-  TrianglePointMarker,
-  CrossPointMarker,
-  XPointMarker,
-  WaveAnimation,
-  LegendModifier,
-  ELegendPlacement,
-  EXyDirection,
-  XAxisDragModifier,
-  YAxisDragModifier,
-  TextAnnotation,
-  LineAnnotation,
-  BoxAnnotation,
-  HorizontalLineAnnotation,
-  VerticalLineAnnotation,
-  OverviewRangeSelectionModifier,
-  ENumericFormat,
-  XySeriesInfo
-} from 'scichart'
-import { AxisSynchroniser } from './axis-synchronizer'
-
-SciChartSurface.configure({
-  dataUrl: `/node_modules/scichart/_wasm/scichart2d.data`,
-  wasmUrl: `/node_modules/scichart/_wasm/scichart2d.wasm`
-})
-
-var licenseInitialized: boolean = false
-
-// 커뮤니티 라이선스 적용 함수
-function useCommunityLicense() {
-  SciChartSurface.UseCommunityLicense()
-}
-
-// SciChart 라이선스 설정 함수
-async function fetchSciChartLicense() {
-  try {
-    const response = await fetch('/frontend-config/scichart')
-    if (response.ok) {
-      const { licenseKey = '' } = (await response.json()) || {}
-
-      if (licenseKey) {
-        SciChartSurface.setRuntimeLicenseKey(licenseKey)
-        console.log('SciChart license key setting complete')
-      } else {
-        console.warn('License key not found. Using community version.')
-        useCommunityLicense()
-      }
-    } else {
-      console.warn('License server response not found. Using community version.')
-      useCommunityLicense()
-    }
-  } catch (error) {
-    console.error('Error fetching license. Using community version:', error)
-    useCommunityLicense()
-  }
-}
-
-// SciChart 초기화 함수
-async function initializeSciChartLicense() {
-  if (!licenseInitialized) {
-    if (window.location.hostname === 'localhost') {
-      console.warn('Localhost detected. Using SciChart community license.')
-      useCommunityLicense() // localhost인 경우 커뮤니티 라이선스 적용
-    } else {
-      await fetchSciChartLicense() // 서버에서 라이선스 키 가져오기
-    }
-
-    licenseInitialized = true
-  }
-}
-
-export const DEFAULT_COLOR = '#FF6600'
-const DEFAULT_STROKE = '#000000'
-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')
-}
-
-function getThemeFromBrowser() {
-  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-}
-
-export function convertColor(color: string | string[] | undefined, defaultColor?: string) {
-  const tinyColor = new TinyColor(color as string)
-  return tinyColor.toHex8String() || defaultColor
-}
-
-export function calculatePrecision(format: string | number = '') {
-  const formatString = format.toString()
-
-  if (formatString.indexOf('.') !== -1) {
-    return formatString.split('.')[1].length
-  }
-
-  return 0
-}
-
-function createPointMarker(wasmContext: any, dataset: any, color: string = DEFAULT_COLOR) {
-  const { pointStyle, pointRadius = POINT_MARKER_SIZE } = dataset || {}
-
-  if (!pointStyle) {
-    return
-  }
-
-  const pointMarkerOptions = {
-    width: pointRadius,
-    height: pointRadius,
-    strokeThickness: STROKE_THICKNESS,
-    fill: color,
-    stroke: DEFAULT_STROKE
-  }
-
-  switch (pointStyle) {
-    case 'triangle':
-      return new TrianglePointMarker(wasmContext, pointMarkerOptions)
-    case 'rect':
-      return new SquarePointMarker(wasmContext, pointMarkerOptions)
-    case 'cross':
-      return new CrossPointMarker(wasmContext, pointMarkerOptions)
-    case 'crossRot':
-      return new XPointMarker(wasmContext, pointMarkerOptions)
-    default:
-      return new EllipsePointMarker(wasmContext, pointMarkerOptions)
-  }
-}
-
-function createAxis(
-  wasmContext: any,
-  axis: any,
-  index: number,
-  isXAxis: boolean,
-  fontColor: string,
-  fontFamily?: string,
-  fontSize?: number,
-  precision?: number,
-  options?: any
-) {
-  const { axisTitle, ticks } = axis
-  const {
-    autoMax,
-    autoMin,
-    min,
-    max,
-    stepSize,
-    beginAtZero,
-    color = fontColor,
-    textStrokeColor = fontColor,
-    display = false
-  } = ticks || {}
-
-  const axisOptions = {
-    axisTitle,
-    autoRange: autoMin || autoMax ? EAutoRange.Always : EAutoRange.Once,
-    axisAlignment: isXAxis ? EAxisAlignment.Bottom : index === 0 ? EAxisAlignment.Left : EAxisAlignment.Right,
-    visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,
-    majorDelta: stepSize,
-    growBy: beginAtZero ? new NumberRange(0.1, 0.1) : undefined,
-    labelStyle: {
-      fontFamily,
-      fontSize,
-      color
-    },
-    axisTitleStyle: {
-      fontFamily,
-      fontSize,
-      color: textStrokeColor
-    },
-    ...options,
-    drawLabels: display
-  }
-
-  const labelProvider = isXAxis
-    ? new SmartDateLabelProvider({
-        showWiderDateOnFirstLabel: true,
-        showYearOnWiderDate: false,
-        dateOffset: getLocalTimeOffset()
-      })
-    : new NumericLabelProvider()
-
-  if (isXAxis) {
-    labelProvider!.cursorNumericFormat = ENumericFormat.Date_HHMMSS
-  } else {
-    labelProvider!.numericFormat = ENumericFormat.Decimal
-    labelProvider!.precision = precision || calculatePrecision(stepSize || 0.1)
-    labelProvider!.cursorNumericFormat = ENumericFormat.NoFormat
-  }
-
-  return isXAxis
-    ? new DateTimeNumericAxis(wasmContext, {
-        ...axisOptions,
-        labelProvider
-      })
-    : new NumericAxis(wasmContext, {
-        ...axisOptions,
-        id: index !== 0 ? `yAxis${index}` : undefined,
-        labelProvider
-      })
-}
-
-function createSeries(
-  wasmContext: any,
-  dataset: any,
-  index: number,
-  stacked: boolean,
-  animation: boolean,
-  yAxisId: string | undefined
-) {
-  const dataSeries = new XyDataSeries(wasmContext, {
-    dataSeriesName: dataset.label,
-    containsNaN: false
-  })
-
-  const stackGroupId = dataset.stack || `__stack${index}__`
-  const color = convertColor(dataset.backgroundColor, DEFAULT_COLOR)
-  const strokeColor = convertColor(dataset.color, DEFAULT_COLOR)
-  const borderWidth = dataset.borderWidth || STROKE_THICKNESS
-  const pointMarker = createPointMarker(wasmContext, dataset, strokeColor)
-
-  let series
-  if (dataset.type === 'bar') {
-    series = stacked
-      ? new StackedColumnRenderableSeries(wasmContext, {
-          dataSeries,
-          strokeThickness: borderWidth,
-          fill: color,
-          stackedGroupId: stackGroupId
-        })
-      : new FastColumnRenderableSeries(wasmContext, {
-          dataSeries,
-          strokeThickness: borderWidth,
-          fill: color,
-          animation: animation ? new WaveAnimation({ duration: ANIMATION_DURATION, fadeEffect: true }) : undefined,
-          yAxisId
-        })
-  } else {
-    series = stacked
-      ? new StackedMountainRenderableSeries(wasmContext, {
-          dataSeries,
-          strokeThickness: borderWidth,
-          stroke: strokeColor,
-          fill: color
-        })
-      : dataset.lineTension && dataset.lineTension > 0
-      ? new SplineLineRenderableSeries(wasmContext, {
-          dataSeries,
-          strokeThickness: borderWidth,
-          stroke: strokeColor,
-          pointMarker,
-          animation: animation ? new WaveAnimation({ duration: ANIMATION_DURATION, fadeEffect: true }) : undefined,
-          yAxisId
-        })
-      : new FastLineRenderableSeries(wasmContext, {
-          dataSeries,
-          strokeThickness: borderWidth,
-          stroke: strokeColor,
-          pointMarker,
-          animation: animation ? new WaveAnimation({ duration: ANIMATION_DURATION, fadeEffect: true }) : undefined,
-          yAxisId
-        })
-  }
-
-  return { series, dataSeries }
-}
-
-export async function buildSciChart(
-  config: OperatoChart.ChartConfig | undefined | null,
-  container: any,
-  { fontSize = 14, fontFamily = 'Roboto', fontColor }: { fontSize?: number; fontFamily?: string; fontColor?: string },
-  { grouped, precision }: { grouped?: string; precision?: number }
-): Promise<{ chart: any; dataSeries: any[] } | undefined> {
-  if (!config) return
-
-  await initializeSciChartLicense()
-
-  const { type: chartType, options, data: fromData } = config
-  const { datasets = [] } = fromData || {}
-  var {
-    theme,
-    tooltip = true,
-    animation = true,
-    legend = {
-      display: true,
-      position: 'top'
-    },
-    scales: fromScales,
-    xGridLine = false,
-    yGridLine = false,
-    y2ndGridLine = false,
-    stacked = false,
-    multiAxis = false,
-    annotations = []
-  } = options || {}
-
-  var baseColor = getBaseColorFromTheme(theme)
-
-  if (theme === 'auto') {
-    theme = getThemeFromBrowser()
-  }
-
-  fontColor = fontColor || baseColor.clone().toString()
-
-  const { xAxes = [], yAxes = [] } = fromScales || {}
-
-  const chart = await SciChartSurface.create(container, {
-    theme: theme == 'dark' ? new SciChartJSDarkv2Theme() : new SciChartJSLightTheme()
-  })
-  const { sciChartSurface, wasmContext } = chart
-
-  xAxes.forEach((axis, index) => {
-    const xAxis = createAxis(wasmContext, axis, index, true, fontColor, fontFamily, fontSize, undefined, {
-      drawMajorTickLines: true,
-      drawMinorTickLines: true,
-      drawMajorGridLines: xGridLine,
-      drawMinorGridLines: xGridLine
-    })
-    sciChartSurface.xAxes.add(xAxis)
-  })
-  ;(multiAxis ? yAxes : [yAxes[0]]).forEach((axis, index) => {
-    const yAxis = createAxis(wasmContext, axis, index, false, fontColor, fontFamily, fontSize, precision, {
-      drawMajorTickLines: true,
-      drawMinorTickLines: true,
-      drawMajorGridLines: index == 0 ? yGridLine : y2ndGridLine,
-      drawMinorGridLines: index == 0 ? yGridLine : y2ndGridLine
-    })
-    sciChartSurface.yAxes.add(yAxis)
-  })
-
-  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)
-
-    if (tooltip) {
-      const rolloverModifier = new RolloverModifier({
-        showTooltip: true,
-        showAxisLabel: true /* show x-axis label for cursor */,
-        modifierGroup: grouped,
-        tooltipDataTemplate: (seriesInfo: XySeriesInfo): string[] => {
-          const valuesWithLabels: string[] = []
-          const xySeriesInfo = seriesInfo as XySeriesInfo
-          valuesWithLabels.push(xySeriesInfo.formattedYValue)
-          return valuesWithLabels
-        }
-      })
-
-      sciChartSurface.chartModifiers.add(rolloverModifier)
-    }
-
-    return dataSeries
-  })
-
-  if (stacked) {
-    const stackedColumnCollection = new StackedColumnCollection(wasmContext)
-    const stackedMountainCollection = new StackedMountainCollection(wasmContext)
-
-    sciChartSurface.renderableSeries.asArray().forEach((series: any) => {
-      if (series instanceof StackedColumnRenderableSeries) {
-        stackedColumnCollection.add(series)
-      } else if (series instanceof StackedMountainRenderableSeries) {
-        stackedMountainCollection.add(series)
-      }
-    })
-
-    if (stackedColumnCollection.size() > 0) {
-      sciChartSurface.renderableSeries.add(stackedColumnCollection)
-    }
-
-    if (stackedMountainCollection.size() > 0) {
-      sciChartSurface.renderableSeries.add(stackedMountainCollection)
-    }
-  }
-
-  if (annotations) {
-    annotations.forEach(annotation => {
-      let sciAnnotation
-      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),
-            xCoordinateMode: (annotation.xCoordinateMode || ECoordinateMode.DataValue) as ECoordinateMode,
-            yCoordinateMode: (annotation.yCoordinateMode || ECoordinateMode.DataValue) as ECoordinateMode
-          })
-          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: (annotation.xCoordinateMode || ECoordinateMode.DataValue) as ECoordinateMode,
-            yCoordinateMode: (annotation.yCoordinateMode || ECoordinateMode.DataValue) as ECoordinateMode
-          })
-          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,
-            xCoordinateMode: (annotation.xCoordinateMode || ECoordinateMode.DataValue) as ECoordinateMode,
-            yCoordinateMode: (annotation.yCoordinateMode || ECoordinateMode.DataValue) as ECoordinateMode
-          })
-          break
-        case 'horizontalLine':
-          sciAnnotation = new HorizontalLineAnnotation({
-            y1: annotation.y1,
-            stroke: convertColor(annotation.stroke, '#FF0000'),
-            strokeThickness: annotation.strokeThickness,
-            xCoordinateMode: (annotation.xCoordinateMode || ECoordinateMode.DataValue) as ECoordinateMode,
-            yCoordinateMode: (annotation.yCoordinateMode || ECoordinateMode.DataValue) as ECoordinateMode
-          })
-          break
-        case 'verticalLine':
-          sciAnnotation = new VerticalLineAnnotation({
-            x1: annotation.x1,
-            stroke: convertColor(annotation.stroke, '#FF0000'),
-            strokeThickness: annotation.strokeThickness,
-            xCoordinateMode: (annotation.xCoordinateMode || ECoordinateMode.DataValue) as ECoordinateMode,
-            yCoordinateMode: (annotation.yCoordinateMode || ECoordinateMode.DataValue) as ECoordinateMode
-          })
-          break
-        default:
-          break
-      }
-      if (sciAnnotation) {
-        sciChartSurface.annotations.add(sciAnnotation)
-      }
-    })
-  }
-
-  sciChartSurface.chartModifiers.add(
-    new RubberBandXyZoomModifier({ executeOn: EExecuteOn.MouseRightButton, modifierGroup: grouped }),
-    // new ZoomPanModifier({ xyDirection: EXyDirection.XDirection }),
-    new ZoomPanModifier({ xyDirection: EXyDirection.XDirection }),
-    new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }),
-    new ZoomExtentsModifier(),
-    new XAxisDragModifier(),
-    new YAxisDragModifier()
-  )
-
-  if (legend?.display) {
-    const legendModifier = new LegendModifier({
-      showCheckboxes: true,
-      showSeriesMarkers: true,
-      showLegend: true,
-      placement:
-        legend.position == 'top'
-          ? ELegendPlacement.TopLeft
-          : legend.position == 'left'
-          ? ELegendPlacement.BottomLeft
-          : legend.position == 'bottom'
-          ? ELegendPlacement.BottomRight
-          : ELegendPlacement.TopRight
-    })
-
-    sciChartSurface.chartModifiers.add(legendModifier)
-  }
-
-  return { chart, dataSeries: dataSeriesArray }
-}
-
-export async function buildSciChartOverview(
-  config: OperatoChart.ChartConfig | undefined | null,
-  container: any,
-  { fontSize = 14, fontFamily = 'Roboto', 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, scales: fromScales } = options || {}
-
-  var baseColor = getBaseColorFromTheme(theme)
-
-  if (theme === 'auto') {
-    theme = getThemeFromBrowser()
-  }
-
-  fontColor = fontColor || baseColor.clone().toString()
-
-  const { xAxes = [], yAxes = [] } = fromScales || {}
-
-  const chart = await SciChartSurface.create(container, {
-    theme: theme == 'dark' ? new SciChartJSDarkv2Theme() : new SciChartJSLightTheme()
-  })
-  const { sciChartSurface, wasmContext } = chart
-
-  xAxes.forEach((axis, index) => {
-    const xAxis = createAxis(wasmContext, axis, index, true, fontColor, fontFamily, fontSize, undefined, {
-      drawMajorTickLines: false,
-      drawMinorTickLines: false,
-      drawMajorGridLines: false,
-      drawMinorGridLines: false
-    })
-    sciChartSurface.xAxes.add(xAxis)
-  })
-
-  getDefaultYAxis(wasmContext, sciChartSurface)
-
-  // const dataSeriesArray = datasets.map((dataset, index) => {
-  //   const yAxisId = `yAxis${index}`
-  //   const dataSeries = new XyDataSeries(wasmContext, {
-  //     dataSeriesName: dataset.label,
-  //     containsNaN: false
-  //   })
-
-  //   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: yAxisId
-  //   })
-
-  //   sciChartSurface.renderableSeries.add(series)
-
-  //   return dataSeries
-  // })
-
-  const rangeSelectionModifier = new OverviewRangeSelectionModifier()
-  rangeSelectionModifier.onSelectedAreaChanged = (selectedRange?: NumberRange) => {
-    if (!selectedRange!.equals(axisSynchroniser.visibleRange)) {
-      axisSynchroniser.publishChange({ visibleRange: selectedRange! })
-    }
-  }
-
-  rangeSelectionModifier.selectedArea = axisSynchroniser.visibleRange
-  sciChartSurface.chartModifiers.add(rangeSelectionModifier)
-
-  axisSynchroniser.visibleRangeChanged.subscribe(({ visibleRange }: any) => {
-    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: [] }
-}
-
-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/editors/index.ts

@@ -1,8 +0,0 @@
-import '@operato/chart/ox-property-editor-chart.js'
-
-export default [
-  {
-    type: 'scichart',
-    element: 'ox-property-editor-chart'
-  }
-]

package/src/index.ts

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

package/src/scichart-multiple-timeseries.ts

@@ -1,69 +0,0 @@
-/*
- * 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
-  }
-
-  dispose() {
-    super.dispose()
-    ;(this.element as OxSciChartMultiple)?.dispose()
-  }
-
-  setElementProperties(scichart: OxSciChartMultiple) {
-    const { data, chart, showOverview, visibleSeries } = this.state
-
-    scichart.config = chart
-    scichart.data = data
-    scichart.showOverview = showOverview
-    scichart.visibleSeries = visibleSeries || []
-  }
-
-  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)