@operato/scene-scichart 2.0.0-beta.0

package/src/scichart.ts

@@ -0,0 +1,88 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'textarea',
+      label: 'config',
+      name: 'config'
+    }
+  ]
+}
+
+import { Component, HTMLOverlayContainer, Properties, ComponentNature, error } from '@hatiolab/things-scene'
+
+import { SciChartSurface } from 'scichart/Charting/Visuals/SciChartSurface'
+import { NumericAxis } from 'scichart/Charting/Visuals/Axis/NumericAxis'
+
+SciChartSurface.configure({
+  dataUrl: `/node_modules/scichart/_wasm/scichart2d.data`,
+  wasmUrl: `/node_modules/scichart/_wasm/scichart2d.wasm`
+})
+
+export default class Scichart extends HTMLOverlayContainer {
+  static get nature() {
+    return NATURE
+  }
+
+  _anchor?: HTMLDivElement
+
+  async oncreate_element(div: HTMLDivElement) {
+    const { sciChartSurface, wasmContext } = await SciChartSurface.create(div)
+
+    // SciChartSurface.setRuntimeLicenseKey('YOUR_RUNTIME_KEY')
+
+    const xAxis = new NumericAxis(wasmContext)
+    const yAxis = new NumericAxis(wasmContext)
+
+    sciChartSurface.xAxes.add(xAxis)
+    sciChartSurface.yAxes.add(yAxis)
+  }
+
+  dispose() {
+    super.dispose()
+
+    delete this._anchor
+  }
+
+  /*
+   * 컴포넌트의 생성 또는 속성 변화 시에 호출되며,
+   * 그에 따른 html element의 반영이 필요한 부분을 구현한다.
+   *
+   * ThingsComponent state => HTML element properties
+   */
+  setElementProperties(div: HTMLDivElement) {}
+
+  /*
+   * 컴포넌트가 ready 상태가 되거나, 컴포넌트의 속성이 변화될 시 setElementProperties 뒤에 호출된다.
+   * 변화에 따른 기본적인 html 속성이 super.reposition()에서 진행되고, 그 밖의 작업이 필요할 때, 오버라이드 한다.
+   */
+  reposition() {
+    super.reposition()
+  }
+
+  get config() {
+    var { config, data } = this.state
+
+    if (typeof config !== 'object') {
+      try {
+        eval(`config = ${config}`)
+      } catch (e) {
+        error(e)
+      }
+    }
+
+    return config
+  }
+
+  get tagName() {
+    return 'div'
+  }
+}
+
+Component.register('scichart', Scichart)

package/src/templates/index.ts

@@ -0,0 +1,4 @@
+import scichart from './scichart'
+import scichartCandleStick from './scichart-candle-stick'
+
+export default [scichart, scichartCandleStick]

package/src/templates/scichart-candle-stick.ts

@@ -0,0 +1,16 @@
+const icon = new URL('../../icons/scichart-candle-stick.png', import.meta.url).href
+
+export default {
+  type: 'scichart-candle-stick',
+  description: 'scichart-candle-stick',
+  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+  group: 'chartAndGauge',
+  icon,
+  model: {
+    type: 'scichart-candle-stick',
+    left: 10,
+    top: 10,
+    width: 400,
+    height: 300
+  }
+}

package/src/templates/scichart.ts

@@ -0,0 +1,16 @@
+const icon = new URL('../../icons/scichart.png', import.meta.url).href
+
+export default {
+  type: 'scichart',
+  description: 'scichart',
+  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+  group: 'chartAndGauge',
+  icon,
+  model: {
+    type: 'scichart',
+    left: 10,
+    top: 10,
+    width: 400,
+    height: 300
+  }
+}

package/src/themes/app-theme.ts

@@ -0,0 +1,72 @@
+import { IThemeProvider, SciChartJsNavyTheme } from 'scichart'
+
+export interface AppThemeBase {
+  SciChartJsTheme: IThemeProvider
+
+  // general colors
+  ForegroundColor: string
+  Background: string
+
+  // Series colors
+  VividSkyBlue: string
+  VividPink: string
+  VividTeal: string
+  VividOrange: string
+  VividBlue: string
+  VividPurple: string
+  VividGreen: string
+  VividRed: string
+
+  MutedSkyBlue: string
+  MutedPink: string
+  MutedTeal: string
+  MutedOrange: string
+  MutedBlue: string
+  MutedPurple: string
+  MutedRed: string
+
+  PaleSkyBlue: string
+  PalePink: string
+  PaleTeal: string
+  PaleOrange: string
+  PaleBlue: string
+  PalePurple: string
+}
+
+export class SciChartAppTheme implements AppThemeBase {
+  SciChartJsTheme = new SciChartJsNavyTheme()
+
+  // General colors
+  ForegroundColor = '#FFFFFF'
+  Background = this.SciChartJsTheme.sciChartBackground
+
+  // Series colors
+  VividSkyBlue = '#50C7E0'
+  VividPink = '#EC0F6C'
+  VividTeal = '#30BC9A'
+  VividOrange = '#F48420'
+  VividBlue = '#364BA0'
+  VividPurple = '#882B91'
+  VividGreen = '#67BDAF'
+  VividRed = '#C52E60'
+
+  DarkIndigo = '#14233C'
+  Indigo = '#264B93'
+
+  MutedSkyBlue = '#83D2F5'
+  MutedPink = '#DF69A8'
+  MutedTeal = '#7BCAAB'
+  MutedOrange = '#E7C565'
+  MutedBlue = '#537ABD'
+  MutedPurple = '#A16DAE'
+  MutedRed = '#DC7969'
+
+  PaleSkyBlue = '#E4F5FC'
+  PalePink = '#EEB3D2'
+  PaleTeal = '#B9E0D4'
+  PaleOrange = '#F1CFB5'
+  PaleBlue = '#B5BEDF'
+  PalePurple = '#CFB4D5'
+}
+
+export const appTheme = new SciChartAppTheme()

package/things-scene.config.js

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

package/translations/en.json

@@ -0,0 +1,3 @@
+{
+  "keyword": "keyword"
+}

package/translations/ja.json

@@ -0,0 +1,3 @@
+{
+  "keyword": "キーワード"
+}

package/translations/ko.json

@@ -0,0 +1,3 @@
+{
+  "keyword": "키워드"
+}

package/translations/ms.json

@@ -0,0 +1,3 @@
+{
+  "keyword": "[ms] keyword"
+}

package/translations/zh.json

@@ -0,0 +1,3 @@
+{
+  "keyword": "关键词"
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2019", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "src",
+    "declaration": true,
+    "incremental": true
+  },
+  "include": ["**/*.ts", "*.d.ts"]
+}