@operato/scene-scichart 2.0.0-beta.0

package/src/charts/sci-candle-stick-chart.ts

@@ -0,0 +1,305 @@
+import { LitElement, PropertyValues, PropertyValueMap, css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import {
+  SciChartSurface,
+  NumberRange,
+  NumericAxis,
+  OhlcDataSeries,
+  FastCandlestickRenderableSeries,
+  ZoomPanModifier,
+  ZoomExtentsModifier,
+  MouseWheelZoomModifier,
+  ENumericFormat,
+  DateTimeNumericAxis,
+  EAutoRange,
+  FastLineRenderableSeries,
+  XyMovingAverageFilter,
+  SciChartOverview,
+  CursorModifier,
+  CursorTooltipSvgAnnotation,
+  SeriesInfo,
+  EDataSeriesType,
+  ESeriesType,
+  IRenderableSeries,
+  FastMountainRenderableSeries,
+  GradientParams,
+  Point,
+  OhlcSeriesInfo,
+  FastColumnRenderableSeries,
+  XyDataSeries,
+  FastOhlcRenderableSeries
+} from 'scichart'
+
+import { appTheme } from '../themes/app-theme'
+import { VolumePaletteProvider } from './volume-pallette-provider'
+import { simpleBinanceRestClient } from '../data/binance-rest-client'
+
+const Y_AXIS_VOLUME_ID = 'Y_AXIS_VOLUME_ID'
+
+SciChartSurface.configure({
+  dataUrl: `/node_modules/scichart/_wasm/scichart2d.data`,
+  wasmUrl: `/node_modules/scichart/_wasm/scichart2d.wasm`
+})
+
+@customElement('sci-candle-stock-chart')
+export class SciCandleStockChart extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+      }
+
+      #chart {
+        flex: 8;
+      }
+
+      #overview {
+        flex: 2;
+      }
+    `
+  ]
+
+  render() {
+    return html`
+      <div id="chart"></div>
+      <div id="overview"></div>
+    `
+  }
+
+  @property({ type: String, attribute: 'series-type' }) seriesType: 'candle-stick' | 'ohlc' = 'candle-stick'
+
+  @state() candlestickChartSeries!: FastCandlestickRenderableSeries
+  @state() ohlcChartSeries!: FastOhlcRenderableSeries
+  @state() sciChartSurface?: SciChartSurface
+  @state() sciChartOverview?: SciChartOverview
+
+  @query('#chart') chart!: HTMLDivElement
+  @query('#overview') overview!: HTMLDivElement
+
+  disconnectedCallback(): void {
+    if (this.sciChartSurface) {
+      this.sciChartSurface.delete()
+      this.sciChartOverview!.delete()
+      this.sciChartSurface = undefined
+      this.sciChartOverview = undefined
+      return
+    }
+  }
+
+  protected async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void> {
+    const { sciChartSurface, overview, candlestickSeries, ohlcSeries } = await this.build()
+
+    this.candlestickChartSeries = candlestickSeries
+    this.ohlcChartSeries = ohlcSeries
+    this.sciChartSurface = sciChartSurface
+    this.sciChartOverview = overview
+
+    this.candlestickChartSeries.isVisible = this.seriesType == 'candle-stick'
+    this.ohlcChartSeries.isVisible = this.seriesType == 'ohlc'
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('seriesType') && this.candlestickChartSeries) {
+      this.candlestickChartSeries.isVisible = this.seriesType == 'candle-stick'
+      this.ohlcChartSeries.isVisible = this.seriesType == 'ohlc'
+    }
+  }
+
+  // Override the Renderableseries to display on the scichart overview
+  private getOverviewSeries(defaultSeries: IRenderableSeries) {
+    if (defaultSeries.type === ESeriesType.CandlestickSeries) {
+      // Swap the default candlestick series on the overview chart for a mountain series. Same data
+      return new FastMountainRenderableSeries(defaultSeries.parentSurface.webAssemblyContext2D, {
+        dataSeries: defaultSeries.dataSeries,
+        fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
+          { color: appTheme.VividSkyBlue + '77', offset: 0 },
+          { color: 'Transparent', offset: 1 }
+        ]),
+        stroke: appTheme.VividSkyBlue
+      })
+    }
+  }
+
+  // Override the standard tooltip displayed by CursorModifier
+  private getTooltipLegendTemplate(seriesInfos: SeriesInfo[], svgAnnotation: CursorTooltipSvgAnnotation) {
+    let outputSvgString = ''
+
+    // Foreach series there will be a seriesInfo supplied by SciChart. This contains info about the series under the house
+    seriesInfos.forEach((seriesInfo, index) => {
+      const y = 20 + index * 20
+      const textColor = seriesInfo.stroke
+      let legendText = seriesInfo.formattedYValue
+      if (seriesInfo.dataSeriesType === EDataSeriesType.Ohlc) {
+        const o = seriesInfo as OhlcSeriesInfo
+        legendText = `Open=${o.formattedOpenValue} High=${o.formattedHighValue} Low=${o.formattedLowValue} Close=${o.formattedCloseValue}`
+      }
+      outputSvgString += `<text x="8" y="${y}" font-size="13" font-family="Verdana" fill="${textColor}">
+            ${seriesInfo.seriesName}: ${legendText}
+        </text>`
+    })
+
+    return `<svg width="100%" height="100%">
+                ${outputSvgString}
+            </svg>`
+  }
+
+  private async build() {
+    // Create a SciChartSurface
+    const { sciChartSurface, wasmContext } = await SciChartSurface.create(this.chart, {
+      theme: appTheme.SciChartJsTheme
+    })
+
+    // Add an XAxis of type DateTimeAxis
+    // Note for crypto data this is fine, but for stocks/forex you will need to use CategoryAxis which collapses gaps at weekends
+    // In future we have a hybrid IndexDateAxis which 'magically' solves problems of different # of points in stock market datasetd with gaps
+    const xAxis = new DateTimeNumericAxis(wasmContext, {
+      // autoRange.never as we're setting visibleRange explicitly below. If you dont do this, leave this flag default
+      autoRange: EAutoRange.Never
+    })
+    sciChartSurface.xAxes.add(xAxis)
+
+    // Create a NumericAxis on the YAxis with 2 Decimal Places
+    sciChartSurface.yAxes.add(
+      new NumericAxis(wasmContext, {
+        growBy: new NumberRange(0.1, 0.1),
+        labelFormat: ENumericFormat.Decimal,
+        labelPrecision: 2,
+        labelPrefix: '$',
+        autoRange: EAutoRange.Always
+      })
+    )
+
+    // Create a secondary YAxis to host volume data on its own scale
+    sciChartSurface.yAxes.add(
+      new NumericAxis(wasmContext, {
+        id: Y_AXIS_VOLUME_ID,
+        growBy: new NumberRange(0, 4),
+        isVisible: false,
+        autoRange: EAutoRange.Always
+      })
+    )
+
+    // Fetch data from now to 300 1hr candles ago
+    const endDate = new Date(Date.now())
+    const startDate = new Date()
+    startDate.setHours(endDate.getHours() - 300)
+    const priceBars = await simpleBinanceRestClient.getCandles('BTCUSDT', '1h', startDate, endDate)
+
+    // Maps PriceBar { date, open, high, low, close, volume } to structure-of-arrays expected by scichart
+    const xValues: number[] = []
+    const openValues: number[] = []
+    const highValues: number[] = []
+    const lowValues: number[] = []
+    const closeValues: number[] = []
+    const volumeValues: number[] = []
+    priceBars.forEach((priceBar: any) => {
+      xValues.push(priceBar.date)
+      openValues.push(priceBar.open)
+      highValues.push(priceBar.high)
+      lowValues.push(priceBar.low)
+      closeValues.push(priceBar.close)
+      volumeValues.push(priceBar.volume)
+    })
+
+    // Zoom to the latest 100 candles
+    const startViewportRange = new Date()
+    startViewportRange.setHours(startDate.getHours() - 100)
+    xAxis.visibleRange = new NumberRange(startViewportRange.getTime() / 1000, endDate.getTime() / 1000)
+
+    // Create and add the Candlestick series
+    // The Candlestick Series requires a special dataseries type called OhlcDataSeries with o,h,l,c and date values
+    const candleDataSeries = new OhlcDataSeries(wasmContext, {
+      xValues,
+      openValues,
+      highValues,
+      lowValues,
+      closeValues,
+      dataSeriesName: 'BTC/USDT'
+    })
+    const candlestickSeries = new FastCandlestickRenderableSeries(wasmContext, {
+      dataSeries: candleDataSeries,
+      stroke: appTheme.ForegroundColor, // used by cursorModifier below
+      strokeThickness: 1,
+      brushUp: appTheme.VividGreen + '77',
+      brushDown: appTheme.MutedRed + '77',
+      strokeUp: appTheme.VividGreen,
+      strokeDown: appTheme.MutedRed
+    })
+    sciChartSurface.renderableSeries.add(candlestickSeries)
+
+    // Add an Ohlcseries. this will be invisible to begin with
+    const ohlcSeries = new FastOhlcRenderableSeries(wasmContext, {
+      dataSeries: candleDataSeries,
+      stroke: appTheme.ForegroundColor, // used by cursorModifier below
+      strokeThickness: 1,
+      dataPointWidth: 0.9,
+      strokeUp: appTheme.VividGreen,
+      strokeDown: appTheme.MutedRed,
+      isVisible: false
+    })
+    sciChartSurface.renderableSeries.add(ohlcSeries)
+
+    // Add some moving averages using SciChart's filters/transforms API
+    // when candleDataSeries updates, XyMovingAverageFilter automatically recomputes
+    sciChartSurface.renderableSeries.add(
+      new FastLineRenderableSeries(wasmContext, {
+        dataSeries: new XyMovingAverageFilter(candleDataSeries, {
+          dataSeriesName: 'Moving Average (20)',
+          length: 20
+        }),
+        stroke: appTheme.VividSkyBlue
+      })
+    )
+
+    sciChartSurface.renderableSeries.add(
+      new FastLineRenderableSeries(wasmContext, {
+        dataSeries: new XyMovingAverageFilter(candleDataSeries, {
+          dataSeriesName: 'Moving Average (50)',
+          length: 50
+        }),
+        stroke: appTheme.VividPink
+      })
+    )
+
+    // Add volume data onto the chart
+    sciChartSurface.renderableSeries.add(
+      new FastColumnRenderableSeries(wasmContext, {
+        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: volumeValues, dataSeriesName: 'Volume' }),
+        strokeThickness: 0,
+        // This is how we get volume to scale - on a hidden YAxis
+        yAxisId: Y_AXIS_VOLUME_ID,
+        // This is how we colour volume bars red or green
+        paletteProvider: new VolumePaletteProvider(
+          candleDataSeries,
+          appTheme.VividGreen + '77',
+          appTheme.MutedRed + '77'
+        )
+      })
+    )
+
+    // Optional: Add some interactivity modifiers
+    sciChartSurface.chartModifiers.add(
+      new ZoomExtentsModifier(),
+      new ZoomPanModifier(),
+      new MouseWheelZoomModifier(),
+      new CursorModifier({
+        crosshairStroke: appTheme.VividOrange,
+        axisLabelFill: appTheme.VividOrange,
+        tooltipLegendTemplate: this.getTooltipLegendTemplate
+      })
+    )
+
+    // Add Overview chart. This will automatically bind to the parent surface
+    // displaying its series. Zooming the chart will zoom the overview and vice versa
+    const overview = await SciChartOverview.create(sciChartSurface, this.overview, {
+      theme: appTheme.SciChartJsTheme,
+      transformRenderableSeries: this.getOverviewSeries as any
+    })
+
+    return { sciChartSurface, overview, candlestickSeries, ohlcSeries }
+  }
+}

package/src/charts/volume-pallette-provider.ts

@@ -0,0 +1,41 @@
+import {
+  OhlcDataSeries,
+  IRenderableSeries,
+  EFillPaletteMode,
+  IFillPaletteProvider,
+  IPointMetadata,
+  parseColorToUIntArgb
+} from 'scichart'
+
+export class VolumePaletteProvider implements IFillPaletteProvider {
+  fillPaletteMode: EFillPaletteMode = EFillPaletteMode.SOLID
+  private ohlcDataSeries: OhlcDataSeries
+  private upColorArgb: number
+  private downColorArgb: number
+
+  constructor(masterData: OhlcDataSeries, upColor: string, downColor: string) {
+    this.upColorArgb = parseColorToUIntArgb(upColor)
+    this.downColorArgb = parseColorToUIntArgb(downColor)
+    this.ohlcDataSeries = masterData
+  }
+  onAttached(parentSeries: IRenderableSeries): void {}
+  onDetached(): void {}
+
+  // Return up or down color for the volume bars depending on Ohlc data
+  overrideFillArgb(xValue: number, yValue: number, index: number, opacity?: number, metadata?: IPointMetadata): number {
+    const isUpCandle =
+      this.ohlcDataSeries.getNativeOpenValues().get(index) >= this.ohlcDataSeries.getNativeCloseValues().get(index)
+    return isUpCandle ? this.upColorArgb : this.downColorArgb
+  }
+
+  // Override stroke as well, even though strokethickness is 0, because stroke is used if column thickness goes to 0.
+  overrideStrokeArgb(
+    xValue: number,
+    yValue: number,
+    index: number,
+    opacity?: number,
+    metadata?: IPointMetadata
+  ): number {
+    return this.overrideFillArgb(xValue, yValue, index, opacity, metadata)
+  }
+}

package/src/data/binance-rest-client.ts

@@ -0,0 +1,74 @@
+/**
+ * Defines a price bar with Open, High, Low, Close and Date encoded as number
+ */
+export type TPriceBar = {
+  date: number
+  open: number
+  high: number
+  low: number
+  close: number
+  volume: number
+}
+
+/**
+ * Parses JSON candles into TPriceBar array
+ * @param candles
+ */
+const parseCandles = (candles: any[]): TPriceBar[] => {
+  const priceBars: TPriceBar[] = []
+
+  candles.forEach((candle: any) => {
+    const [timestamp, open, high, low, close, volume] = candle
+    const openValue = parseFloat(open)
+    const highValue = parseFloat(high)
+    const lowValue = parseFloat(low)
+    const closeValue = parseFloat(close)
+    const volumeValue = parseFloat(volume)
+
+    priceBars.push({
+      date: timestamp / 1000,
+      open: openValue,
+      high: highValue,
+      low: lowValue,
+      close: closeValue,
+      volume: volumeValue
+    })
+  })
+
+  return priceBars
+}
+
+/**
+ * Fetches candles from Binance Rest API
+ */
+const getCandles = async (
+  symbol: string,
+  interval: string,
+  startTime?: Date,
+  endTime?: Date,
+  limit: number = 500
+): Promise<TPriceBar[]> => {
+  let url = `https://api.binance.us/api/v3/klines?symbol=${symbol}&interval=${interval}`
+  if (startTime) {
+    url += `&startTime=${startTime.getTime()}`
+  }
+  if (endTime) {
+    url += `&endTime=${endTime.getTime()}`
+  }
+  if (limit) {
+    url += `&limit=${limit}`
+  }
+  try {
+    console.log(`SimpleBinanceClient: Fetching ${symbol} ${interval} from ${startTime} to ${endTime}`)
+    const response = await fetch(url)
+    const data = await response.json()
+    return parseCandles(data)
+  } catch (err) {
+    console.error(err)
+    return []
+  }
+}
+
+export const simpleBinanceRestClient = {
+  getCandles
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as Scichart } from './scichart'
+export { default as ScichartCandleStick } from './scichart-candle-stick'

package/src/scichart-candle-stick.ts

@@ -0,0 +1,60 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'select',
+      label: 'series',
+      name: 'series',
+      property: {
+        options: ['', 'candle-stick', 'ohlc']
+      }
+    }
+  ]
+}
+
+import './charts/sci-candle-stick-chart'
+import { Component, HTMLOverlayContainer, Properties, ComponentNature, error } from '@hatiolab/things-scene'
+
+import { SciCandleStockChart } from './charts/sci-candle-stick-chart'
+
+export default class ScichartCandleStick extends HTMLOverlayContainer {
+  static get nature(): ComponentNature {
+    return NATURE
+  }
+
+  dispose() {
+    super.dispose()
+  }
+
+  /*
+   * 컴포넌트의 생성 또는 속성 변화 시에 호출되며,
+   * 그에 따른 html element의 반영이 필요한 부분을 구현한다.
+   *
+   * ThingsComponent state => HTML element properties
+   */
+  setElementProperties(chart: SciCandleStockChart) {
+    const { series = 'candle-stick' } = this.state
+
+    chart.seriesType = series
+  }
+
+  /*
+   * 컴포넌트가 ready 상태가 되거나, 컴포넌트의 속성이 변화될 시 setElementProperties 뒤에 호출된다.
+   * 변화에 따른 기본적인 html 속성이 super.reposition()에서 진행되고, 그 밖의 작업이 필요할 때, 오버라이드 한다.
+   */
+  reposition() {
+    super.reposition()
+  }
+
+  get tagName() {
+    return 'sci-candle-stock-chart'
+  }
+}
+
+Component.register('scichart-candle-stick', ScichartCandleStick)

package/src/scichart-timeseries.ts

@@ -0,0 +1,156 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'number',
+      label: 'sample-count',
+      name: 'sampleCount'
+    },
+    {
+      type: 'number',
+      label: 'max-value',
+      name: 'maxValue'
+    },
+    {
+      type: 'string',
+      label: 'attr-x',
+      name: 'attrX'
+    },
+    {
+      type: 'string',
+      label: 'attr-y',
+      name: 'attrY'
+    }
+  ]
+}
+
+import { Component, HTMLOverlayContainer, Properties, ComponentNature, error } from '@hatiolab/things-scene'
+
+import {
+  MouseWheelZoomModifier,
+  FastLineRenderableSeries,
+  XyDataSeries,
+  ZoomExtentsModifier,
+  ZoomPanModifier,
+  NumberRange,
+  EAxisAlignment,
+  EAutoRange
+} from 'scichart'
+
+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 ScichartTimeSeries extends HTMLOverlayContainer {
+  static get nature() {
+    return NATURE
+  }
+
+  _anchor?: HTMLDivElement
+
+  async oncreate_element(div: HTMLDivElement) {
+    const { sciChartSurface, wasmContext } = await SciChartSurface.create(div)
+    var { sampleCount, maxValue } = this.state
+
+    // SciChartSurface.setRuntimeLicenseKey('YOUR_RUNTIME_KEY')
+
+    const xAxis = new NumericAxis(wasmContext, {
+      axisTitle: 'X Axis',
+      autoRange: EAutoRange.Never,
+      axisAlignment: EAxisAlignment.Bottom,
+      visibleRange: new NumberRange(0, sampleCount)
+    })
+    const yAxis = new NumericAxis(wasmContext, {
+      axisTitle: 'Y Axis',
+      autoRange: EAutoRange.Never,
+      visibleRange: new NumberRange(0, maxValue)
+    })
+
+    sciChartSurface.xAxes.add(xAxis)
+    sciChartSurface.yAxes.add(yAxis)
+
+    const dataSeries = new XyDataSeries(wasmContext, {
+      xValues: this.dataSet.map(d => d.xValue),
+      yValues: this.dataSet.map(d => d.yValue)
+    })
+
+    const lineSeries = new FastLineRenderableSeries(wasmContext, {
+      dataSeries: dataSeries,
+      xAxisId: sciChartSurface.xAxes.get(0).id,
+      yAxisId: sciChartSurface.yAxes.get(0).id,
+      stroke: '#FF6600',
+      strokeThickness: 2
+    })
+
+    sciChartSurface.renderableSeries.add(lineSeries)
+
+    // ZoomPanModifier, MouseWheelZoomModifier, ZoomExtentsModifier 추가
+    // ZoomPanModifier: Chart를 드래그하여 이동
+    // MouseWheelZoomModifier: 마우스 휠로 Chart Zoom
+    // ZoomExtentsModifier: Chart의 전체 범위로 Zoom
+    sciChartSurface.chartModifiers.add(
+      new ZoomPanModifier({ enableZoom: true }),
+      new MouseWheelZoomModifier(),
+      new ZoomExtentsModifier()
+    )
+  }
+
+  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 dataSet(): { xValue: number; yValue: number }[] {
+    var { attrX, attrY, data } = this.state
+
+    if (!(data instanceof Array)) {
+      return []
+    }
+
+    return data
+      .map(item => {
+        if (!item || typeof item !== 'object') {
+          return
+        }
+
+        return {
+          xValue: item[attrX],
+          yValue: item[attrY]
+        }
+      })
+      .filter(Boolean) as { xValue: number; yValue: number }[]
+  }
+
+  get tagName() {
+    return 'div'
+  }
+}
+
+Component.register('scichart-timeseries', ScichartTimeSeries)