@operato/scene-scichart 2.0.0-beta.0

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [2.0.0-beta.0](https://github.com/things-scene/operato-scene/compare/v2.0.0-alpha.12...v2.0.0-beta.0) (2024-06-01)
+
+
+### :rocket: New Features
+
+* 2.0.0-beta.0 ([a2e2869](https://github.com/things-scene/operato-scene/commit/a2e28694eedf5bab0c54bcab5432d54ec59edd7f))
+* gantt and scichart ([e1c43d3](https://github.com/things-scene/operato-scene/commit/e1c43d30ad65b7d9d2d4a1f9679561339bac3db2))
+* sci-chart ([25d8f98](https://github.com/things-scene/operato-scene/commit/25d8f987cd03525f6fa940a70a31e050ab71c0a4))
+
+
+### :bug: Bug Fix
+
+* allowJs in tsconfig option ([fa77174](https://github.com/things-scene/operato-scene/commit/fa771742188f21f177f0a85281570f59f0c478cf))
+* scichart-candle-stick ([853dbeb](https://github.com/things-scene/operato-scene/commit/853dbeb952580f205dd321ae6b09f0337775b106))

package/README.md

@@ -0,0 +1,13 @@
+## build
+
+`$ yarn build`
+
+| type | filename                                   | for            | tested |
+| ---- | ------------------------------------------ | -------------- | ------ |
+| UMD  | things-scene-scichart.js    | modern browser | O      |
+| UMD  | things-scene-scichart-ie.js | ie 11          | O      |
+| ESM  | things-scene-scichart.mjs   | modern browser | O      |
+
+## publish
+
+`$ yarn publish`

package/dist/charts/sci-candle-stick-chart.d.ts

@@ -0,0 +1,19 @@
+import { LitElement, PropertyValues, PropertyValueMap } from 'lit';
+import { SciChartSurface, FastCandlestickRenderableSeries, SciChartOverview, FastOhlcRenderableSeries } from 'scichart';
+export declare class SciCandleStockChart extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+    seriesType: 'candle-stick' | 'ohlc';
+    candlestickChartSeries: FastCandlestickRenderableSeries;
+    ohlcChartSeries: FastOhlcRenderableSeries;
+    sciChartSurface?: SciChartSurface;
+    sciChartOverview?: SciChartOverview;
+    chart: HTMLDivElement;
+    overview: HTMLDivElement;
+    disconnectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void>;
+    updated(changes: PropertyValues<this>): void;
+    private getOverviewSeries;
+    private getTooltipLegendTemplate;
+    private build;
+}

package/dist/charts/sci-candle-stick-chart.js

@@ -0,0 +1,248 @@
+import { __decorate } from "tslib";
+import { LitElement, 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, EDataSeriesType, ESeriesType, FastMountainRenderableSeries, GradientParams, Point, 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`
+});
+let SciCandleStockChart = class SciCandleStockChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.seriesType = 'candle-stick';
+    }
+    render() {
+        return html `
+      <div id="chart"></div>
+      <div id="overview"></div>
+    `;
+    }
+    disconnectedCallback() {
+        if (this.sciChartSurface) {
+            this.sciChartSurface.delete();
+            this.sciChartOverview.delete();
+            this.sciChartSurface = undefined;
+            this.sciChartOverview = undefined;
+            return;
+        }
+    }
+    async firstUpdated(_changedProperties) {
+        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) {
+        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
+    getOverviewSeries(defaultSeries) {
+        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
+    getTooltipLegendTemplate(seriesInfos, svgAnnotation) {
+        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;
+                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>`;
+    }
+    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 = [];
+        const openValues = [];
+        const highValues = [];
+        const lowValues = [];
+        const closeValues = [];
+        const volumeValues = [];
+        priceBars.forEach((priceBar) => {
+            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
+        });
+        return { sciChartSurface, overview, candlestickSeries, ohlcSeries };
+    }
+};
+SciCandleStockChart.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+      }
+
+      #chart {
+        flex: 8;
+      }
+
+      #overview {
+        flex: 2;
+      }
+    `
+];
+__decorate([
+    property({ type: String, attribute: 'series-type' })
+], SciCandleStockChart.prototype, "seriesType", void 0);
+__decorate([
+    state()
+], SciCandleStockChart.prototype, "candlestickChartSeries", void 0);
+__decorate([
+    state()
+], SciCandleStockChart.prototype, "ohlcChartSeries", void 0);
+__decorate([
+    state()
+], SciCandleStockChart.prototype, "sciChartSurface", void 0);
+__decorate([
+    state()
+], SciCandleStockChart.prototype, "sciChartOverview", void 0);
+__decorate([
+    query('#chart')
+], SciCandleStockChart.prototype, "chart", void 0);
+__decorate([
+    query('#overview')
+], SciCandleStockChart.prototype, "overview", void 0);
+SciCandleStockChart = __decorate([
+    customElement('sci-candle-stock-chart')
+], SciCandleStockChart);
+export { SciCandleStockChart };
+//# sourceMappingURL=sci-candle-stick-chart.js.map

package/dist/charts/sci-candle-stick-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sci-candle-stick-chart.js","sourceRoot":"","sources":["../../src/charts/sci-candle-stick-chart.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAoC,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC7E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EACL,eAAe,EACf,WAAW,EACX,WAAW,EACX,cAAc,EACd,+BAA+B,EAC/B,eAAe,EACf,mBAAmB,EACnB,sBAAsB,EACtB,cAAc,EACd,mBAAmB,EACnB,UAAU,EACV,wBAAwB,EACxB,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EAGd,eAAe,EACf,WAAW,EAEX,4BAA4B,EAC5B,cAAc,EACd,KAAK,EAEL,0BAA0B,EAC1B,YAAY,EACZ,wBAAwB,EACzB,MAAM,UAAU,CAAA;AAEjB,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AAErE,MAAM,gBAAgB,GAAG,kBAAkB,CAAA;AAE3C,eAAe,CAAC,SAAS,CAAC;IACxB,OAAO,EAAE,8CAA8C;IACvD,OAAO,EAAE,8CAA8C;CACxD,CAAC,CAAA;AAGK,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QA2BiD,eAAU,GAA4B,cAAc,CAAA;IAwO5G,CAAC;IA/OC,MAAM;QACJ,OAAO,IAAI,CAAA;;;KAGV,CAAA;IACH,CAAC;IAYD,oBAAoB;QAClB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,CAAA;YAC7B,IAAI,CAAC,gBAAiB,CAAC,MAAM,EAAE,CAAA;YAC/B,IAAI,CAAC,eAAe,GAAG,SAAS,CAAA;YAChC,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAA;YACjC,OAAM;QACR,CAAC;IACH,CAAC;IAES,KAAK,CAAC,YAAY,CAAC,kBAAqE;QAChG,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU,EAAE,GAAG,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;QAEvF,IAAI,CAAC,sBAAsB,GAAG,iBAAiB,CAAA;QAC/C,IAAI,CAAC,eAAe,GAAG,UAAU,CAAA;QACjC,IAAI,CAAC,eAAe,GAAG,eAAe,CAAA;QACtC,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAA;QAEhC,IAAI,CAAC,sBAAsB,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,cAAc,CAAA;QACzE,IAAI,CAAC,eAAe,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,MAAM,CAAA;IAC5D,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC7D,IAAI,CAAC,sBAAsB,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,cAAc,CAAA;YACzE,IAAI,CAAC,eAAe,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,MAAM,CAAA;QAC5D,CAAC;IACH,CAAC;IAED,oEAAoE;IAC5D,iBAAiB,CAAC,aAAgC;QACxD,IAAI,aAAa,CAAC,IAAI,KAAK,WAAW,CAAC,iBAAiB,EAAE,CAAC;YACzD,6FAA6F;YAC7F,OAAO,IAAI,4BAA4B,CAAC,aAAa,CAAC,aAAa,CAAC,oBAAoB,EAAE;gBACxF,UAAU,EAAE,aAAa,CAAC,UAAU;gBACpC,kBAAkB,EAAE,IAAI,cAAc,CAAC,IAAI,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;oBACvE,EAAE,KAAK,EAAE,QAAQ,CAAC,YAAY,GAAG,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;oBAClD,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,EAAE;iBACpC,CAAC;gBACF,MAAM,EAAE,QAAQ,CAAC,YAAY;aAC9B,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAED,4DAA4D;IACpD,wBAAwB,CAAC,WAAyB,EAAE,aAAyC;QACnG,IAAI,eAAe,GAAG,EAAE,CAAA;QAExB,sHAAsH;QACtH,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE;YACxC,MAAM,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,EAAE,CAAA;YACzB,MAAM,SAAS,GAAG,UAAU,CAAC,MAAM,CAAA;YACnC,IAAI,UAAU,GAAG,UAAU,CAAC,eAAe,CAAA;YAC3C,IAAI,UAAU,CAAC,cAAc,KAAK,eAAe,CAAC,IAAI,EAAE,CAAC;gBACvD,MAAM,CAAC,GAAG,UAA4B,CAAA;gBACtC,UAAU,GAAG,QAAQ,CAAC,CAAC,kBAAkB,SAAS,CAAC,CAAC,kBAAkB,QAAQ,CAAC,CAAC,iBAAiB,UAAU,CAAC,CAAC,mBAAmB,EAAE,CAAA;YACpI,CAAC;YACD,eAAe,IAAI,kBAAkB,CAAC,gDAAgD,SAAS;cACvF,UAAU,CAAC,UAAU,KAAK,UAAU;gBAClC,CAAA;QACZ,CAAC,CAAC,CAAA;QAEF,OAAO;kBACO,eAAe;mBACd,CAAA;IACjB,CAAC;IAEO,KAAK,CAAC,KAAK;QACjB,2BAA2B;QAC3B,MAAM,EAAE,eAAe,EAAE,WAAW,EAAE,GAAG,MAAM,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE;YAChF,KAAK,EAAE,QAAQ,CAAC,eAAe;SAChC,CAAC,CAAA;QAEF,oCAAoC;QACpC,6HAA6H;QAC7H,yIAAyI;QACzI,MAAM,KAAK,GAAG,IAAI,mBAAmB,CAAC,WAAW,EAAE;YACjD,+GAA+G;YAC/G,SAAS,EAAE,UAAU,CAAC,KAAK;SAC5B,CAAC,CAAA;QACF,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QAEhC,0DAA0D;QAC1D,eAAe,CAAC,KAAK,CAAC,GAAG,CACvB,IAAI,WAAW,CAAC,WAAW,EAAE;YAC3B,MAAM,EAAE,IAAI,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC;YACjC,WAAW,EAAE,cAAc,CAAC,OAAO;YACnC,cAAc,EAAE,CAAC;YACjB,WAAW,EAAE,GAAG;YAChB,SAAS,EAAE,UAAU,CAAC,MAAM;SAC7B,CAAC,CACH,CAAA;QAED,gEAAgE;QAChE,eAAe,CAAC,KAAK,CAAC,GAAG,CACvB,IAAI,WAAW,CAAC,WAAW,EAAE;YAC3B,EAAE,EAAE,gBAAgB;YACpB,MAAM,EAAE,IAAI,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC;YAC7B,SAAS,EAAE,KAAK;YAChB,SAAS,EAAE,UAAU,CAAC,MAAM;SAC7B,CAAC,CACH,CAAA;QAED,6CAA6C;QAC7C,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAA;QACpC,MAAM,SAAS,GAAG,IAAI,IAAI,EAAE,CAAA;QAC5B,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC,CAAA;QAC5C,MAAM,SAAS,GAAG,MAAM,uBAAuB,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,CAAA;QAE/F,qGAAqG;QACrG,MAAM,OAAO,GAAa,EAAE,CAAA;QAC5B,MAAM,UAAU,GAAa,EAAE,CAAA;QAC/B,MAAM,UAAU,GAAa,EAAE,CAAA;QAC/B,MAAM,SAAS,GAAa,EAAE,CAAA;QAC9B,MAAM,WAAW,GAAa,EAAE,CAAA;QAChC,MAAM,YAAY,GAAa,EAAE,CAAA;QACjC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAa,EAAE,EAAE;YAClC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YAC3B,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YAC9B,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YAC9B,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;YAC5B,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YAChC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;QACpC,CAAC,CAAC,CAAA;QAEF,iCAAiC;QACjC,MAAM,kBAAkB,GAAG,IAAI,IAAI,EAAE,CAAA;QACrC,kBAAkB,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC,CAAA;QACvD,KAAK,CAAC,YAAY,GAAG,IAAI,WAAW,CAAC,kBAAkB,CAAC,OAAO,EAAE,GAAG,IAAI,EAAE,OAAO,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,CAAA;QAEnG,wCAAwC;QACxC,+GAA+G;QAC/G,MAAM,gBAAgB,GAAG,IAAI,cAAc,CAAC,WAAW,EAAE;YACvD,OAAO;YACP,UAAU;YACV,UAAU;YACV,SAAS;YACT,WAAW;YACX,cAAc,EAAE,UAAU;SAC3B,CAAC,CAAA;QACF,MAAM,iBAAiB,GAAG,IAAI,+BAA+B,CAAC,WAAW,EAAE;YACzE,UAAU,EAAE,gBAAgB;YAC5B,MAAM,EAAE,QAAQ,CAAC,eAAe,EAAE,+BAA+B;YACjE,eAAe,EAAE,CAAC;YAClB,OAAO,EAAE,QAAQ,CAAC,UAAU,GAAG,IAAI;YACnC,SAAS,EAAE,QAAQ,CAAC,QAAQ,GAAG,IAAI;YACnC,QAAQ,EAAE,QAAQ,CAAC,UAAU;YAC7B,UAAU,EAAE,QAAQ,CAAC,QAAQ;SAC9B,CAAC,CAAA;QACF,eAAe,CAAC,gBAAgB,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;QAEvD,0DAA0D;QAC1D,MAAM,UAAU,GAAG,IAAI,wBAAwB,CAAC,WAAW,EAAE;YAC3D,UAAU,EAAE,gBAAgB;YAC5B,MAAM,EAAE,QAAQ,CAAC,eAAe,EAAE,+BAA+B;YACjE,eAAe,EAAE,CAAC;YAClB,cAAc,EAAE,GAAG;YACnB,QAAQ,EAAE,QAAQ,CAAC,UAAU;YAC7B,UAAU,EAAE,QAAQ,CAAC,QAAQ;YAC7B,SAAS,EAAE,KAAK;SACjB,CAAC,CAAA;QACF,eAAe,CAAC,gBAAgB,CAAC,GAAG,CAAC,UAAU,CAAC,CAAA;QAEhD,mEAAmE;QACnE,gFAAgF;QAChF,eAAe,CAAC,gBAAgB,CAAC,GAAG,CAClC,IAAI,wBAAwB,CAAC,WAAW,EAAE;YACxC,UAAU,EAAE,IAAI,qBAAqB,CAAC,gBAAgB,EAAE;gBACtD,cAAc,EAAE,qBAAqB;gBACrC,MAAM,EAAE,EAAE;aACX,CAAC;YACF,MAAM,EAAE,QAAQ,CAAC,YAAY;SAC9B,CAAC,CACH,CAAA;QAED,eAAe,CAAC,gBAAgB,CAAC,GAAG,CAClC,IAAI,wBAAwB,CAAC,WAAW,EAAE;YACxC,UAAU,EAAE,IAAI,qBAAqB,CAAC,gBAAgB,EAAE;gBACtD,cAAc,EAAE,qBAAqB;gBACrC,MAAM,EAAE,EAAE;aACX,CAAC;YACF,MAAM,EAAE,QAAQ,CAAC,SAAS;SAC3B,CAAC,CACH,CAAA;QAED,iCAAiC;QACjC,eAAe,CAAC,gBAAgB,CAAC,GAAG,CAClC,IAAI,0BAA0B,CAAC,WAAW,EAAE;YAC1C,UAAU,EAAE,IAAI,YAAY,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC;YACvG,eAAe,EAAE,CAAC;YAClB,yDAAyD;YACzD,OAAO,EAAE,gBAAgB;YACzB,iDAAiD;YACjD,eAAe,EAAE,IAAI,qBAAqB,CACxC,gBAAgB,EAChB,QAAQ,CAAC,UAAU,GAAG,IAAI,EAC1B,QAAQ,CAAC,QAAQ,GAAG,IAAI,CACzB;SACF,CAAC,CACH,CAAA;QAED,6CAA6C;QAC7C,eAAe,CAAC,cAAc,CAAC,GAAG,CAChC,IAAI,mBAAmB,EAAE,EACzB,IAAI,eAAe,EAAE,EACrB,IAAI,sBAAsB,EAAE,EAC5B,IAAI,cAAc,CAAC;YACjB,eAAe,EAAE,QAAQ,CAAC,WAAW;YACrC,aAAa,EAAE,QAAQ,CAAC,WAAW;YACnC,qBAAqB,EAAE,IAAI,CAAC,wBAAwB;SACrD,CAAC,CACH,CAAA;QAED,yEAAyE;QACzE,iFAAiF;QACjF,MAAM,QAAQ,GAAG,MAAM,gBAAgB,CAAC,MAAM,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,EAAE;YAC7E,KAAK,EAAE,QAAQ,CAAC,eAAe;YAC/B,yBAAyB,EAAE,IAAI,CAAC,iBAAwB;SACzD,CAAC,CAAA;QAEF,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAA;IACrE,CAAC;;AAjQM,0BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;KAeF;CACF,AAjBY,CAiBZ;AASqD;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;uDAAqD;AAEjG;IAAR,KAAK,EAAE;mEAAyD;AACxD;IAAR,KAAK,EAAE;4DAA2C;AAC1C;IAAR,KAAK,EAAE;4DAAkC;AACjC;IAAR,KAAK,EAAE;6DAAoC;AAE3B;IAAhB,KAAK,CAAC,QAAQ,CAAC;kDAAuB;AACnB;IAAnB,KAAK,CAAC,WAAW,CAAC;qDAA0B;AAnClC,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAmQ/B","sourcesContent":["import { LitElement, PropertyValues, PropertyValueMap, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport {\n  SciChartSurface,\n  NumberRange,\n  NumericAxis,\n  OhlcDataSeries,\n  FastCandlestickRenderableSeries,\n  ZoomPanModifier,\n  ZoomExtentsModifier,\n  MouseWheelZoomModifier,\n  ENumericFormat,\n  DateTimeNumericAxis,\n  EAutoRange,\n  FastLineRenderableSeries,\n  XyMovingAverageFilter,\n  SciChartOverview,\n  CursorModifier,\n  CursorTooltipSvgAnnotation,\n  SeriesInfo,\n  EDataSeriesType,\n  ESeriesType,\n  IRenderableSeries,\n  FastMountainRenderableSeries,\n  GradientParams,\n  Point,\n  OhlcSeriesInfo,\n  FastColumnRenderableSeries,\n  XyDataSeries,\n  FastOhlcRenderableSeries\n} from 'scichart'\n\nimport { appTheme } from '../themes/app-theme'\nimport { VolumePaletteProvider } from './volume-pallette-provider'\nimport { simpleBinanceRestClient } from '../data/binance-rest-client'\n\nconst Y_AXIS_VOLUME_ID = 'Y_AXIS_VOLUME_ID'\n\nSciChartSurface.configure({\n  dataUrl: `/node_modules/scichart/_wasm/scichart2d.data`,\n  wasmUrl: `/node_modules/scichart/_wasm/scichart2d.wasm`\n})\n\n@customElement('sci-candle-stock-chart')\nexport class SciCandleStockChart extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        width: 100%;\n      }\n\n      #chart {\n        flex: 8;\n      }\n\n      #overview {\n        flex: 2;\n      }\n    `\n  ]\n\n  render() {\n    return html`\n      <div id=\"chart\"></div>\n      <div id=\"overview\"></div>\n    `\n  }\n\n  @property({ type: String, attribute: 'series-type' }) seriesType: 'candle-stick' | 'ohlc' = 'candle-stick'\n\n  @state() candlestickChartSeries!: FastCandlestickRenderableSeries\n  @state() ohlcChartSeries!: FastOhlcRenderableSeries\n  @state() sciChartSurface?: SciChartSurface\n  @state() sciChartOverview?: SciChartOverview\n\n  @query('#chart') chart!: HTMLDivElement\n  @query('#overview') overview!: HTMLDivElement\n\n  disconnectedCallback(): void {\n    if (this.sciChartSurface) {\n      this.sciChartSurface.delete()\n      this.sciChartOverview!.delete()\n      this.sciChartSurface = undefined\n      this.sciChartOverview = undefined\n      return\n    }\n  }\n\n  protected async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void> {\n    const { sciChartSurface, overview, candlestickSeries, ohlcSeries } = await this.build()\n\n    this.candlestickChartSeries = candlestickSeries\n    this.ohlcChartSeries = ohlcSeries\n    this.sciChartSurface = sciChartSurface\n    this.sciChartOverview = overview\n\n    this.candlestickChartSeries.isVisible = this.seriesType == 'candle-stick'\n    this.ohlcChartSeries.isVisible = this.seriesType == 'ohlc'\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('seriesType') && this.candlestickChartSeries) {\n      this.candlestickChartSeries.isVisible = this.seriesType == 'candle-stick'\n      this.ohlcChartSeries.isVisible = this.seriesType == 'ohlc'\n    }\n  }\n\n  // Override the Renderableseries to display on the scichart overview\n  private getOverviewSeries(defaultSeries: IRenderableSeries) {\n    if (defaultSeries.type === ESeriesType.CandlestickSeries) {\n      // Swap the default candlestick series on the overview chart for a mountain series. Same data\n      return new FastMountainRenderableSeries(defaultSeries.parentSurface.webAssemblyContext2D, {\n        dataSeries: defaultSeries.dataSeries,\n        fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [\n          { color: appTheme.VividSkyBlue + '77', offset: 0 },\n          { color: 'Transparent', offset: 1 }\n        ]),\n        stroke: appTheme.VividSkyBlue\n      })\n    }\n  }\n\n  // Override the standard tooltip displayed by CursorModifier\n  private getTooltipLegendTemplate(seriesInfos: SeriesInfo[], svgAnnotation: CursorTooltipSvgAnnotation) {\n    let outputSvgString = ''\n\n    // Foreach series there will be a seriesInfo supplied by SciChart. This contains info about the series under the house\n    seriesInfos.forEach((seriesInfo, index) => {\n      const y = 20 + index * 20\n      const textColor = seriesInfo.stroke\n      let legendText = seriesInfo.formattedYValue\n      if (seriesInfo.dataSeriesType === EDataSeriesType.Ohlc) {\n        const o = seriesInfo as OhlcSeriesInfo\n        legendText = `Open=${o.formattedOpenValue} High=${o.formattedHighValue} Low=${o.formattedLowValue} Close=${o.formattedCloseValue}`\n      }\n      outputSvgString += `<text x=\"8\" y=\"${y}\" font-size=\"13\" font-family=\"Verdana\" fill=\"${textColor}\">\n            ${seriesInfo.seriesName}: ${legendText}\n        </text>`\n    })\n\n    return `<svg width=\"100%\" height=\"100%\">\n                ${outputSvgString}\n            </svg>`\n  }\n\n  private async build() {\n    // Create a SciChartSurface\n    const { sciChartSurface, wasmContext } = await SciChartSurface.create(this.chart, {\n      theme: appTheme.SciChartJsTheme\n    })\n\n    // Add an XAxis of type DateTimeAxis\n    // Note for crypto data this is fine, but for stocks/forex you will need to use CategoryAxis which collapses gaps at weekends\n    // In future we have a hybrid IndexDateAxis which 'magically' solves problems of different # of points in stock market datasetd with gaps\n    const xAxis = new DateTimeNumericAxis(wasmContext, {\n      // autoRange.never as we're setting visibleRange explicitly below. If you dont do this, leave this flag default\n      autoRange: EAutoRange.Never\n    })\n    sciChartSurface.xAxes.add(xAxis)\n\n    // Create a NumericAxis on the YAxis with 2 Decimal Places\n    sciChartSurface.yAxes.add(\n      new NumericAxis(wasmContext, {\n        growBy: new NumberRange(0.1, 0.1),\n        labelFormat: ENumericFormat.Decimal,\n        labelPrecision: 2,\n        labelPrefix: '$',\n        autoRange: EAutoRange.Always\n      })\n    )\n\n    // Create a secondary YAxis to host volume data on its own scale\n    sciChartSurface.yAxes.add(\n      new NumericAxis(wasmContext, {\n        id: Y_AXIS_VOLUME_ID,\n        growBy: new NumberRange(0, 4),\n        isVisible: false,\n        autoRange: EAutoRange.Always\n      })\n    )\n\n    // Fetch data from now to 300 1hr candles ago\n    const endDate = new Date(Date.now())\n    const startDate = new Date()\n    startDate.setHours(endDate.getHours() - 300)\n    const priceBars = await simpleBinanceRestClient.getCandles('BTCUSDT', '1h', startDate, endDate)\n\n    // Maps PriceBar { date, open, high, low, close, volume } to structure-of-arrays expected by scichart\n    const xValues: number[] = []\n    const openValues: number[] = []\n    const highValues: number[] = []\n    const lowValues: number[] = []\n    const closeValues: number[] = []\n    const volumeValues: number[] = []\n    priceBars.forEach((priceBar: any) => {\n      xValues.push(priceBar.date)\n      openValues.push(priceBar.open)\n      highValues.push(priceBar.high)\n      lowValues.push(priceBar.low)\n      closeValues.push(priceBar.close)\n      volumeValues.push(priceBar.volume)\n    })\n\n    // Zoom to the latest 100 candles\n    const startViewportRange = new Date()\n    startViewportRange.setHours(startDate.getHours() - 100)\n    xAxis.visibleRange = new NumberRange(startViewportRange.getTime() / 1000, endDate.getTime() / 1000)\n\n    // Create and add the Candlestick series\n    // The Candlestick Series requires a special dataseries type called OhlcDataSeries with o,h,l,c and date values\n    const candleDataSeries = new OhlcDataSeries(wasmContext, {\n      xValues,\n      openValues,\n      highValues,\n      lowValues,\n      closeValues,\n      dataSeriesName: 'BTC/USDT'\n    })\n    const candlestickSeries = new FastCandlestickRenderableSeries(wasmContext, {\n      dataSeries: candleDataSeries,\n      stroke: appTheme.ForegroundColor, // used by cursorModifier below\n      strokeThickness: 1,\n      brushUp: appTheme.VividGreen + '77',\n      brushDown: appTheme.MutedRed + '77',\n      strokeUp: appTheme.VividGreen,\n      strokeDown: appTheme.MutedRed\n    })\n    sciChartSurface.renderableSeries.add(candlestickSeries)\n\n    // Add an Ohlcseries. this will be invisible to begin with\n    const ohlcSeries = new FastOhlcRenderableSeries(wasmContext, {\n      dataSeries: candleDataSeries,\n      stroke: appTheme.ForegroundColor, // used by cursorModifier below\n      strokeThickness: 1,\n      dataPointWidth: 0.9,\n      strokeUp: appTheme.VividGreen,\n      strokeDown: appTheme.MutedRed,\n      isVisible: false\n    })\n    sciChartSurface.renderableSeries.add(ohlcSeries)\n\n    // Add some moving averages using SciChart's filters/transforms API\n    // when candleDataSeries updates, XyMovingAverageFilter automatically recomputes\n    sciChartSurface.renderableSeries.add(\n      new FastLineRenderableSeries(wasmContext, {\n        dataSeries: new XyMovingAverageFilter(candleDataSeries, {\n          dataSeriesName: 'Moving Average (20)',\n          length: 20\n        }),\n        stroke: appTheme.VividSkyBlue\n      })\n    )\n\n    sciChartSurface.renderableSeries.add(\n      new FastLineRenderableSeries(wasmContext, {\n        dataSeries: new XyMovingAverageFilter(candleDataSeries, {\n          dataSeriesName: 'Moving Average (50)',\n          length: 50\n        }),\n        stroke: appTheme.VividPink\n      })\n    )\n\n    // Add volume data onto the chart\n    sciChartSurface.renderableSeries.add(\n      new FastColumnRenderableSeries(wasmContext, {\n        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues: volumeValues, dataSeriesName: 'Volume' }),\n        strokeThickness: 0,\n        // This is how we get volume to scale - on a hidden YAxis\n        yAxisId: Y_AXIS_VOLUME_ID,\n        // This is how we colour volume bars red or green\n        paletteProvider: new VolumePaletteProvider(\n          candleDataSeries,\n          appTheme.VividGreen + '77',\n          appTheme.MutedRed + '77'\n        )\n      })\n    )\n\n    // Optional: Add some interactivity modifiers\n    sciChartSurface.chartModifiers.add(\n      new ZoomExtentsModifier(),\n      new ZoomPanModifier(),\n      new MouseWheelZoomModifier(),\n      new CursorModifier({\n        crosshairStroke: appTheme.VividOrange,\n        axisLabelFill: appTheme.VividOrange,\n        tooltipLegendTemplate: this.getTooltipLegendTemplate\n      })\n    )\n\n    // Add Overview chart. This will automatically bind to the parent surface\n    // displaying its series. Zooming the chart will zoom the overview and vice versa\n    const overview = await SciChartOverview.create(sciChartSurface, this.overview, {\n      theme: appTheme.SciChartJsTheme,\n      transformRenderableSeries: this.getOverviewSeries as any\n    })\n\n    return { sciChartSurface, overview, candlestickSeries, ohlcSeries }\n  }\n}\n"]}

package/dist/charts/volume-pallette-provider.d.ts

@@ -0,0 +1,12 @@
+import { OhlcDataSeries, IRenderableSeries, EFillPaletteMode, IFillPaletteProvider, IPointMetadata } from 'scichart';
+export declare class VolumePaletteProvider implements IFillPaletteProvider {
+    fillPaletteMode: EFillPaletteMode;
+    private ohlcDataSeries;
+    private upColorArgb;
+    private downColorArgb;
+    constructor(masterData: OhlcDataSeries, upColor: string, downColor: string);
+    onAttached(parentSeries: IRenderableSeries): void;
+    onDetached(): void;
+    overrideFillArgb(xValue: number, yValue: number, index: number, opacity?: number, metadata?: IPointMetadata): number;
+    overrideStrokeArgb(xValue: number, yValue: number, index: number, opacity?: number, metadata?: IPointMetadata): number;
+}

package/dist/charts/volume-pallette-provider.js

@@ -0,0 +1,21 @@
+import { EFillPaletteMode, parseColorToUIntArgb } from 'scichart';
+export class VolumePaletteProvider {
+    constructor(masterData, upColor, downColor) {
+        this.fillPaletteMode = EFillPaletteMode.SOLID;
+        this.upColorArgb = parseColorToUIntArgb(upColor);
+        this.downColorArgb = parseColorToUIntArgb(downColor);
+        this.ohlcDataSeries = masterData;
+    }
+    onAttached(parentSeries) { }
+    onDetached() { }
+    // Return up or down color for the volume bars depending on Ohlc data
+    overrideFillArgb(xValue, yValue, index, opacity, metadata) {
+        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, yValue, index, opacity, metadata) {
+        return this.overrideFillArgb(xValue, yValue, index, opacity, metadata);
+    }
+}
+//# sourceMappingURL=volume-pallette-provider.js.map

package/dist/charts/volume-pallette-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-pallette-provider.js","sourceRoot":"","sources":["../../src/charts/volume-pallette-provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,gBAAgB,EAGhB,oBAAoB,EACrB,MAAM,UAAU,CAAA;AAEjB,MAAM,OAAO,qBAAqB;IAMhC,YAAY,UAA0B,EAAE,OAAe,EAAE,SAAiB;QAL1E,oBAAe,GAAqB,gBAAgB,CAAC,KAAK,CAAA;QAMxD,IAAI,CAAC,WAAW,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAA;QAChD,IAAI,CAAC,aAAa,GAAG,oBAAoB,CAAC,SAAS,CAAC,CAAA;QACpD,IAAI,CAAC,cAAc,GAAG,UAAU,CAAA;IAClC,CAAC;IACD,UAAU,CAAC,YAA+B,IAAS,CAAC;IACpD,UAAU,KAAU,CAAC;IAErB,qEAAqE;IACrE,gBAAgB,CAAC,MAAc,EAAE,MAAc,EAAE,KAAa,EAAE,OAAgB,EAAE,QAAyB;QACzG,MAAM,UAAU,GACd,IAAI,CAAC,cAAc,CAAC,mBAAmB,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,oBAAoB,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QAC/G,OAAO,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAA;IAC3D,CAAC;IAED,mHAAmH;IACnH,kBAAkB,CAChB,MAAc,EACd,MAAc,EACd,KAAa,EACb,OAAgB,EAChB,QAAyB;QAEzB,OAAO,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAA;IACxE,CAAC;CACF","sourcesContent":["import {\n  OhlcDataSeries,\n  IRenderableSeries,\n  EFillPaletteMode,\n  IFillPaletteProvider,\n  IPointMetadata,\n  parseColorToUIntArgb\n} from 'scichart'\n\nexport class VolumePaletteProvider implements IFillPaletteProvider {\n  fillPaletteMode: EFillPaletteMode = EFillPaletteMode.SOLID\n  private ohlcDataSeries: OhlcDataSeries\n  private upColorArgb: number\n  private downColorArgb: number\n\n  constructor(masterData: OhlcDataSeries, upColor: string, downColor: string) {\n    this.upColorArgb = parseColorToUIntArgb(upColor)\n    this.downColorArgb = parseColorToUIntArgb(downColor)\n    this.ohlcDataSeries = masterData\n  }\n  onAttached(parentSeries: IRenderableSeries): void {}\n  onDetached(): void {}\n\n  // Return up or down color for the volume bars depending on Ohlc data\n  overrideFillArgb(xValue: number, yValue: number, index: number, opacity?: number, metadata?: IPointMetadata): number {\n    const isUpCandle =\n      this.ohlcDataSeries.getNativeOpenValues().get(index) >= this.ohlcDataSeries.getNativeCloseValues().get(index)\n    return isUpCandle ? this.upColorArgb : this.downColorArgb\n  }\n\n  // Override stroke as well, even though strokethickness is 0, because stroke is used if column thickness goes to 0.\n  overrideStrokeArgb(\n    xValue: number,\n    yValue: number,\n    index: number,\n    opacity?: number,\n    metadata?: IPointMetadata\n  ): number {\n    return this.overrideFillArgb(xValue, yValue, index, opacity, metadata)\n  }\n}\n"]}

package/dist/data/binance-rest-client.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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;
+};
+export declare const simpleBinanceRestClient: {
+    getCandles: (symbol: string, interval: string, startTime?: Date, endTime?: Date, limit?: number) => Promise<TPriceBar[]>;
+};

package/dist/data/binance-rest-client.js

@@ -0,0 +1,53 @@
+/**
+ * Parses JSON candles into TPriceBar array
+ * @param candles
+ */
+const parseCandles = (candles) => {
+    const priceBars = [];
+    candles.forEach((candle) => {
+        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, interval, startTime, endTime, limit = 500) => {
+    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
+};
+//# sourceMappingURL=binance-rest-client.js.map

package/dist/data/binance-rest-client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"binance-rest-client.js","sourceRoot":"","sources":["../../src/data/binance-rest-client.ts"],"names":[],"mappings":"AAYA;;;GAGG;AACH,MAAM,YAAY,GAAG,CAAC,OAAc,EAAe,EAAE;IACnD,MAAM,SAAS,GAAgB,EAAE,CAAA;IAEjC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAW,EAAE,EAAE;QAC9B,MAAM,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;QAC1D,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;QAClC,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;QAClC,MAAM,QAAQ,GAAG,UAAU,CAAC,GAAG,CAAC,CAAA;QAChC,MAAM,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC,CAAA;QACpC,MAAM,WAAW,GAAG,UAAU,CAAC,MAAM,CAAC,CAAA;QAEtC,SAAS,CAAC,IAAI,CAAC;YACb,IAAI,EAAE,SAAS,GAAG,IAAI;YACtB,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,SAAS;YACf,GAAG,EAAE,QAAQ;YACb,KAAK,EAAE,UAAU;YACjB,MAAM,EAAE,WAAW;SACpB,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AAED;;GAEG;AACH,MAAM,UAAU,GAAG,KAAK,EACtB,MAAc,EACd,QAAgB,EAChB,SAAgB,EAChB,OAAc,EACd,QAAgB,GAAG,EACG,EAAE;IACxB,IAAI,GAAG,GAAG,+CAA+C,MAAM,aAAa,QAAQ,EAAE,CAAA;IACtF,IAAI,SAAS,EAAE,CAAC;QACd,GAAG,IAAI,cAAc,SAAS,CAAC,OAAO,EAAE,EAAE,CAAA;IAC5C,CAAC;IACD,IAAI,OAAO,EAAE,CAAC;QACZ,GAAG,IAAI,YAAY,OAAO,CAAC,OAAO,EAAE,EAAE,CAAA;IACxC,CAAC;IACD,IAAI,KAAK,EAAE,CAAC;QACV,GAAG,IAAI,UAAU,KAAK,EAAE,CAAA;IAC1B,CAAC;IACD,IAAI,CAAC;QACH,OAAO,CAAC,GAAG,CAAC,iCAAiC,MAAM,IAAI,QAAQ,SAAS,SAAS,OAAO,OAAO,EAAE,CAAC,CAAA;QAClG,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;QACjC,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;QAClC,OAAO,YAAY,CAAC,IAAI,CAAC,CAAA;IAC3B,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAClB,OAAO,EAAE,CAAA;IACX,CAAC;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,UAAU;CACX,CAAA","sourcesContent":["/**\n * Defines a price bar with Open, High, Low, Close and Date encoded as number\n */\nexport type TPriceBar = {\n  date: number\n  open: number\n  high: number\n  low: number\n  close: number\n  volume: number\n}\n\n/**\n * Parses JSON candles into TPriceBar array\n * @param candles\n */\nconst parseCandles = (candles: any[]): TPriceBar[] => {\n  const priceBars: TPriceBar[] = []\n\n  candles.forEach((candle: any) => {\n    const [timestamp, open, high, low, close, volume] = candle\n    const openValue = parseFloat(open)\n    const highValue = parseFloat(high)\n    const lowValue = parseFloat(low)\n    const closeValue = parseFloat(close)\n    const volumeValue = parseFloat(volume)\n\n    priceBars.push({\n      date: timestamp / 1000,\n      open: openValue,\n      high: highValue,\n      low: lowValue,\n      close: closeValue,\n      volume: volumeValue\n    })\n  })\n\n  return priceBars\n}\n\n/**\n * Fetches candles from Binance Rest API\n */\nconst getCandles = async (\n  symbol: string,\n  interval: string,\n  startTime?: Date,\n  endTime?: Date,\n  limit: number = 500\n): Promise<TPriceBar[]> => {\n  let url = `https://api.binance.us/api/v3/klines?symbol=${symbol}&interval=${interval}`\n  if (startTime) {\n    url += `&startTime=${startTime.getTime()}`\n  }\n  if (endTime) {\n    url += `&endTime=${endTime.getTime()}`\n  }\n  if (limit) {\n    url += `&limit=${limit}`\n  }\n  try {\n    console.log(`SimpleBinanceClient: Fetching ${symbol} ${interval} from ${startTime} to ${endTime}`)\n    const response = await fetch(url)\n    const data = await response.json()\n    return parseCandles(data)\n  } catch (err) {\n    console.error(err)\n    return []\n  }\n}\n\nexport const simpleBinanceRestClient = {\n  getCandles\n}\n"]}

package/dist/editors/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.js.map

package/dist/editors/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/editors/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist/groups/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.js.map

package/dist/groups/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/groups/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as Scichart } from './scichart';
+export { default as ScichartCandleStick } from './scichart-candle-stick';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAA","sourcesContent":["export { default as Scichart } from './scichart'\nexport { default as ScichartCandleStick } from './scichart-candle-stick'\n"]}

package/dist/scichart-candle-stick.d.ts

@@ -0,0 +1,10 @@
+import './charts/sci-candle-stick-chart';
+import { HTMLOverlayContainer, ComponentNature } from '@hatiolab/things-scene';
+import { SciCandleStockChart } from './charts/sci-candle-stick-chart';
+export default class ScichartCandleStick extends HTMLOverlayContainer {
+    static get nature(): ComponentNature;
+    dispose(): void;
+    setElementProperties(chart: SciCandleStockChart): void;
+    reposition(): void;
+    get tagName(): string;
+}

package/dist/scichart-candle-stick.js

@@ -0,0 +1,50 @@
+/*
+ * 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 } from '@hatiolab/things-scene';
+export default class ScichartCandleStick extends HTMLOverlayContainer {
+    static get nature() {
+        return NATURE;
+    }
+    dispose() {
+        super.dispose();
+    }
+    /*
+     * 컴포넌트의 생성 또는 속성 변화 시에 호출되며,
+     * 그에 따른 html element의 반영이 필요한 부분을 구현한다.
+     *
+     * ThingsComponent state => HTML element properties
+     */
+    setElementProperties(chart) {
+        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);
+//# sourceMappingURL=scichart-candle-stick.js.map

package/dist/scichart-candle-stick.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scichart-candle-stick.js","sourceRoot":"","sources":["../src/scichart-candle-stick.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE;gBACR,OAAO,EAAE,CAAC,EAAE,EAAE,cAAc,EAAE,MAAM,CAAC;aACtC;SACF;KACF;CACF,CAAA;AAED,OAAO,iCAAiC,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAsC,MAAM,wBAAwB,CAAA;AAI5G,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,oBAAoB;IACnE,MAAM,KAAK,MAAM;QACf,OAAO,MAAM,CAAA;IACf,CAAC;IAED,OAAO;QACL,KAAK,CAAC,OAAO,EAAE,CAAA;IACjB,CAAC;IAED;;;;;OAKG;IACH,oBAAoB,CAAC,KAA0B;QAC7C,MAAM,EAAE,MAAM,GAAG,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAE9C,KAAK,CAAC,UAAU,GAAG,MAAM,CAAA;IAC3B,CAAC;IAED;;;OAGG;IACH,UAAU;QACR,KAAK,CAAC,UAAU,EAAE,CAAA;IACpB,CAAC;IAED,IAAI,OAAO;QACT,OAAO,wBAAwB,CAAA;IACjC,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,uBAAuB,EAAE,mBAAmB,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'select',\n      label: 'series',\n      name: 'series',\n      property: {\n        options: ['', 'candle-stick', 'ohlc']\n      }\n    }\n  ]\n}\n\nimport './charts/sci-candle-stick-chart'\nimport { Component, HTMLOverlayContainer, Properties, ComponentNature, error } from '@hatiolab/things-scene'\n\nimport { SciCandleStockChart } from './charts/sci-candle-stick-chart'\n\nexport default class ScichartCandleStick extends HTMLOverlayContainer {\n  static get nature(): ComponentNature {\n    return NATURE\n  }\n\n  dispose() {\n    super.dispose()\n  }\n\n  /*\n   * 컴포넌트의 생성 또는 속성 변화 시에 호출되며,\n   * 그에 따른 html element의 반영이 필요한 부분을 구현한다.\n   *\n   * ThingsComponent state => HTML element properties\n   */\n  setElementProperties(chart: SciCandleStockChart) {\n    const { series = 'candle-stick' } = this.state\n\n    chart.seriesType = series\n  }\n\n  /*\n   * 컴포넌트가 ready 상태가 되거나, 컴포넌트의 속성이 변화될 시 setElementProperties 뒤에 호출된다.\n   * 변화에 따른 기본적인 html 속성이 super.reposition()에서 진행되고, 그 밖의 작업이 필요할 때, 오버라이드 한다.\n   */\n  reposition() {\n    super.reposition()\n  }\n\n  get tagName() {\n    return 'sci-candle-stock-chart'\n  }\n}\n\nComponent.register('scichart-candle-stick', ScichartCandleStick)\n"]}

package/dist/scichart-timeseries.d.ts

@@ -0,0 +1,23 @@
+import { HTMLOverlayContainer } from '@hatiolab/things-scene';
+export default class ScichartTimeSeries extends HTMLOverlayContainer {
+    static get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: {
+            type: string;
+            label: string;
+            name: string;
+        }[];
+    };
+    _anchor?: HTMLDivElement;
+    oncreate_element(div: HTMLDivElement): Promise<void>;
+    dispose(): void;
+    setElementProperties(div: HTMLDivElement): void;
+    reposition(): void;
+    get dataSet(): {
+        xValue: number;
+        yValue: number;
+    }[];
+    get tagName(): string;
+}