@operato/scene-scichart 7.0.5 → 7.1.0

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]

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

@@ -0,0 +1,87 @@
+const icon = new URL('../../icons/scichart-multiple-timeseries.png', import.meta.url).href
+
+function getRandomInRange(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+// 랜덤 데이터를 생성하는 함수
+function generateRandomData(count: number) {
+  const randomData = []
+  const startTimestamp = Math.floor(Date.now()) // 현재 시간을 Unix 타임스탬프로 설정
+
+  for (let i = 0; i < count; i++) {
+    const timestamp = startTimestamp + i * 360 * 30 * 1000 // 3초씩 증가하는 타임스탬프 설정
+    const randomCount = getRandomInRange(5, 35) // count 값을 5에서 35 사이로 랜덤 생성
+    const randomAverage = getRandomInRange(50, 150) // average 값을 50에서 150 사이로 랜덤 생성
+
+    randomData.push({
+      timestamp: timestamp,
+      count: randomCount,
+      average: randomAverage
+    })
+  }
+
+  return randomData
+}
+
+// 100개의 랜덤 데이터를 생성
+const data = generateRandomData(100)
+
+export default {
+  type: 'scichart-multiple-timeseries',
+  description: 'scichart-multiple-timeseries',
+  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+  group: 'chartAndGauge',
+  icon,
+  model: {
+    type: 'scichart-multiple-timeseries',
+    left: 10,
+    top: 10,
+    width: 600,
+    height: 60,
+    data,
+    chart: {
+      type: 'timeseries',
+      data: {
+        datasets: [
+          {
+            dataKey: 'count',
+            label: '',
+            type: 'line',
+            borderWidth: 1,
+            color: 'green'
+          },
+          {
+            dataKey: 'average',
+            label: '',
+            type: 'line',
+            borderWidth: 1,
+            color: 'red'
+          }
+        ],
+        labelDataKey: 'timestamp'
+      },
+      options: {
+        scales: {
+          xAxes: [
+            {
+              ticks: { beginAtZero: true }
+            }
+          ],
+          yAxes: [
+            {
+              ticks: { beginAtZero: true }
+            }
+          ]
+        },
+        legend: {
+          display: false
+        },
+        annotations: [],
+        tooltip: true
+      }
+    },
+    showOverview: true,
+    visibleSeries: ['count', 'average']
+  }
+}

package/src/templates/scichart-timeseries.ts

@@ -41,25 +41,14 @@ export default {
     height: 300,
     data,
     chart: {
-      type: 'line' /* TODO change to 'timeseries' */,
+      type: 'timeseries',
       data: {
         datasets: [
           {
             dataKey: 'count',
-            label: 'Line Series count',
+            label: '',
             type: 'line',
-            color: 'rgba(255, 99, 132, 1)',
             borderWidth: 1
-          },
-          {
-            dataKey: 'average',
-            label: 'Line Series average',
-            type: 'line',
-            color: 'rgba(54, 162, 235, 1)',
-            fill: false,
-            lineTension: 0.4,
-            pointStyle: 'circle',
-            pointRadius: 3
           }
         ],
         labelDataKey: 'timestamp'
@@ -68,17 +57,11 @@ export default {
         scales: {
           xAxes: [
             {
-              axisTitle: 'timestamp',
               ticks: { beginAtZero: true }
             }
           ],
           yAxes: [
             {
-              axisTitle: 'count',
-              ticks: { beginAtZero: true }
-            },
-            {
-              axisTitle: 'average',
               ticks: { beginAtZero: true }
             }
           ]

package/things-scene.config.js

@@ -1,9 +1,7 @@
 import editors from './dist/editors'
-// import groups from './dist/groups'
 import templates from './dist/templates'
 
 export default {
   templates,
   editors
-  // groups
 }

package/translations/en.json

@@ -1,3 +1,5 @@
 {
-  "component.scichart-timeseries": "timeseries scichart"
+  "component.scichart-timeseries": "timeseries",
+  "component.scichart-multiple-timeseries": "multiple timeseries",
+  "label.show-overview": "show overview"
 }

package/translations/ja.json

@@ -1,3 +1,5 @@
 {
-  "component.scichart-timeseries": "タイムシリーズ scichart"
+  "component.scichart-timeseries": "タイムシリーズ",
+  "component.scichart-multiple-timeseries": "マルチチャート タイムシリーズ",
+  "label.show-overview": "概要 表示"
 }

package/translations/ko.json

@@ -1,3 +1,5 @@
 {
-  "component.scichart-timeseries": "타임시리즈 scichart"
+  "component.scichart-timeseries": "타임시리즈",
+  "component.scichart-multiple-timeseries": "다중차트 타임시리즈",
+  "label.show-overview": "오버뷰 보이기"
 }

package/translations/ms.json

@@ -1,3 +1,5 @@
 {
-  "component.scichart-timeseries": "timeseries scichart"
+  "component.scichart-timeseries": "siri masa",
+  "component.scichart-multiple-timeseries": "masa siri berbilang carta",
+  "label.show-overview": "tunjukkan gambaran keseluruhan"
 }

package/translations/zh.json

@@ -1,3 +1,5 @@
 {
-  "component.scichart-timeseries": "时间序列 scichart"
+  "component.scichart-timeseries": "时间序列",
+  "component.scichart-multiple-timeseries": "多图表 时间序列",
+  "label.show-overview": "显示 概述"
 }