@operato/scene-scichart 7.0.2 → 7.0.3

package/dist/templates/scichart.d.ts

@@ -1,14 +0,0 @@
-declare const _default: {
-    type: string;
-    description: string;
-    group: string;
-    icon: string;
-    model: {
-        type: string;
-        left: number;
-        top: number;
-        width: number;
-        height: number;
-    };
-};
-export default _default;

package/dist/templates/scichart.js

@@ -1,16 +0,0 @@
-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
-    }
-};
-//# sourceMappingURL=scichart.js.map

package/dist/templates/scichart.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"scichart.js","sourceRoot":"","sources":["../../src/templates/scichart.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,0BAA0B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEtE,eAAe;IACb,IAAI,EAAE,UAAU;IAChB,WAAW,EAAE,UAAU;IACvB,gGAAgG;IAChG,KAAK,EAAE,eAAe;IACtB,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,EAAE;QACR,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;KACZ;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/scichart.png', import.meta.url).href\n\nexport default {\n  type: 'scichart',\n  description: 'scichart',\n  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */\n  group: 'chartAndGauge',\n  icon,\n  model: {\n    type: 'scichart',\n    left: 10,\n    top: 10,\n    width: 400,\n    height: 300\n  }\n}\n"]}

package/dist/themes/app-theme.d.ts

@@ -1,56 +0,0 @@
-import { IThemeProvider, SciChartJsNavyTheme } from 'scichart';
-export interface AppThemeBase {
-    SciChartJsTheme: IThemeProvider;
-    ForegroundColor: string;
-    Background: string;
-    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 declare class SciChartAppTheme implements AppThemeBase {
-    SciChartJsTheme: SciChartJsNavyTheme;
-    ForegroundColor: string;
-    Background: string;
-    VividSkyBlue: string;
-    VividPink: string;
-    VividTeal: string;
-    VividOrange: string;
-    VividBlue: string;
-    VividPurple: string;
-    VividGreen: string;
-    VividRed: string;
-    DarkIndigo: string;
-    Indigo: 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 declare const appTheme: SciChartAppTheme;

package/dist/themes/app-theme.js

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

package/dist/themes/app-theme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"app-theme.js","sourceRoot":"","sources":["../../src/themes/app-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAmC9D,MAAM,OAAO,gBAAgB;IAA7B;QACE,oBAAe,GAAG,IAAI,mBAAmB,EAAE,CAAA;QAE3C,iBAAiB;QACjB,oBAAe,GAAG,SAAS,CAAA;QAC3B,eAAU,GAAG,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAA;QAEpD,gBAAgB;QAChB,iBAAY,GAAG,SAAS,CAAA;QACxB,cAAS,GAAG,SAAS,CAAA;QACrB,cAAS,GAAG,SAAS,CAAA;QACrB,gBAAW,GAAG,SAAS,CAAA;QACvB,cAAS,GAAG,SAAS,CAAA;QACrB,gBAAW,GAAG,SAAS,CAAA;QACvB,eAAU,GAAG,SAAS,CAAA;QACtB,aAAQ,GAAG,SAAS,CAAA;QAEpB,eAAU,GAAG,SAAS,CAAA;QACtB,WAAM,GAAG,SAAS,CAAA;QAElB,iBAAY,GAAG,SAAS,CAAA;QACxB,cAAS,GAAG,SAAS,CAAA;QACrB,cAAS,GAAG,SAAS,CAAA;QACrB,gBAAW,GAAG,SAAS,CAAA;QACvB,cAAS,GAAG,SAAS,CAAA;QACrB,gBAAW,GAAG,SAAS,CAAA;QACvB,aAAQ,GAAG,SAAS,CAAA;QAEpB,gBAAW,GAAG,SAAS,CAAA;QACvB,aAAQ,GAAG,SAAS,CAAA;QACpB,aAAQ,GAAG,SAAS,CAAA;QACpB,eAAU,GAAG,SAAS,CAAA;QACtB,aAAQ,GAAG,SAAS,CAAA;QACpB,eAAU,GAAG,SAAS,CAAA;IACxB,CAAC;CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,gBAAgB,EAAE,CAAA","sourcesContent":["import { IThemeProvider, SciChartJsNavyTheme } from 'scichart'\n\nexport interface AppThemeBase {\n  SciChartJsTheme: IThemeProvider\n\n  // general colors\n  ForegroundColor: string\n  Background: string\n\n  // Series colors\n  VividSkyBlue: string\n  VividPink: string\n  VividTeal: string\n  VividOrange: string\n  VividBlue: string\n  VividPurple: string\n  VividGreen: string\n  VividRed: string\n\n  MutedSkyBlue: string\n  MutedPink: string\n  MutedTeal: string\n  MutedOrange: string\n  MutedBlue: string\n  MutedPurple: string\n  MutedRed: string\n\n  PaleSkyBlue: string\n  PalePink: string\n  PaleTeal: string\n  PaleOrange: string\n  PaleBlue: string\n  PalePurple: string\n}\n\nexport class SciChartAppTheme implements AppThemeBase {\n  SciChartJsTheme = new SciChartJsNavyTheme()\n\n  // General colors\n  ForegroundColor = '#FFFFFF'\n  Background = this.SciChartJsTheme.sciChartBackground\n\n  // Series colors\n  VividSkyBlue = '#50C7E0'\n  VividPink = '#EC0F6C'\n  VividTeal = '#30BC9A'\n  VividOrange = '#F48420'\n  VividBlue = '#364BA0'\n  VividPurple = '#882B91'\n  VividGreen = '#67BDAF'\n  VividRed = '#C52E60'\n\n  DarkIndigo = '#14233C'\n  Indigo = '#264B93'\n\n  MutedSkyBlue = '#83D2F5'\n  MutedPink = '#DF69A8'\n  MutedTeal = '#7BCAAB'\n  MutedOrange = '#E7C565'\n  MutedBlue = '#537ABD'\n  MutedPurple = '#A16DAE'\n  MutedRed = '#DC7969'\n\n  PaleSkyBlue = '#E4F5FC'\n  PalePink = '#EEB3D2'\n  PaleTeal = '#B9E0D4'\n  PaleOrange = '#F1CFB5'\n  PaleBlue = '#B5BEDF'\n  PalePurple = '#CFB4D5'\n}\n\nexport const appTheme = new SciChartAppTheme()\n"]}

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

@@ -1,306 +0,0 @@
-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.UseCommunityLicense()
-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

@@ -1,41 +0,0 @@
-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

@@ -1,74 +0,0 @@
-/**
- * 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/scichart-candle-stick.ts

@@ -1,60 +0,0 @@
-/*
- * 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)