@barchart/chart-lib 2.106.1 → 2.183.2

chart-lib/chart.def.json

@@ -0,0 +1,132 @@
+{
+    "data": {
+        "aggregation": {
+            "unit": "Day",
+            "size": 1
+        },
+        "maxDataPoints": 300
+    },
+    "display": {
+        "density": 92,
+        "chart": {
+            "backgroundColor": "#111",
+            "fontFamily": "Open Sans",
+            "previous": {
+                "color": "#b0b0b0",
+                "dashStyle": "LongDashDot",
+                "forceVisible": true
+            },
+            "exportUrl": "/export/image",
+            "newPaneHeight": 1
+        },
+        "scrollbar": {
+            "barColor": "#808083",
+            "buttonColor": "#606063",
+            "trackColor": "#404043",
+            "visible": true
+        },
+        "scrollBehavior": "wheel",
+        "tooltip": {
+            "mode": "standard",
+            "visible": true,
+            "backgroundColor": "#000",
+            "showMainPlot": true
+        },
+        "xAxis": {
+            "visible": true,
+            "gridLines": {
+                "visible": true,
+                "color": "#1f1f1f"
+            },
+            "textColor": "#fff",
+            "crosshair": {
+                "enabled": true,
+                "showValue": true,
+                "color": "#494949",
+                "dashStyle": "Solid",
+                "snap": true,
+                "format": "{value:%m/%d/%Y}"
+            },
+            "minTickInterval": 0,
+            "equidistant": true,
+            "marginBars": 5
+        },
+        "yAxis": {
+            "visible": true,
+            "gridLines": {
+                "visible": true,
+                "color": "#1f1f1f"
+            },
+            "textColor": "#fff",
+            "showLastValue": "All",
+            "crosshair": {
+                "enabled": true,
+                "showValue": true,
+                "color": "#494949",
+                "dashStyle": "Solid",
+                "snap": false
+            },
+            "preventLabelOverlap": false,
+            "maxPadding": 0.1,
+            "snapAnnotationsToPrices": true
+        },
+        "annotationTraits": {
+            "line": {
+                "width": 1,
+                "color": "#888",
+                "dashStyle": "Solid"
+            },
+            "fill": {
+                "color": "rgba(136,136,136,0.3)"
+            },
+            "zIndex": 8
+        }
+    },
+    "panes": [
+        {
+            "axes": [
+                {
+                    "plots": [
+                        {
+                            "curves": [
+                                {
+                                    "attributes": ["OpenVsClose"],
+                                    "colors": ["#b63400", "#007f3e", "#1664db", "#333", "#777"],
+                                    "fields": ["Open", "High", "Low", "Close", "Change"],
+                                    "style": "Candlestick",
+                                    "varyColorPerBar": true,
+                                    "lineWidth": 1
+                                }
+                            ],
+                            "main": true,
+                            "symbol": "PLACEHOLDER",
+                            "type": "Symbol",
+                            "showPrevious": false,
+                            "events": {
+                                "earnings": {
+                                    "show": true
+                                }
+                            }
+                        }
+                    ],
+                    "comparison": "None",
+                    "scale": "Linear"
+                }
+            ],
+            "height": 4
+        },
+        {
+            "axes": [
+                {
+                    "plots": [
+                        {
+                            "type": "Study",
+                            "study": "VOL"
+                        }
+                    ]
+                }
+            ]
+        }
+    ],
+    "version": 21
+}

chart-lib/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+
+<html lang="en">
+    <head>
+        <title>Demo Barchart Chart SDK</title>
+        <link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css" />
+        <link
+            href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i"
+            rel="stylesheet"
+            type="text/css"
+        />
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body style="overflow: hidden">
+        <div class="root">
+            <div id="root"></div>
+        </div>
+        <script type="module" src="./index.js"></script>
+    </body>
+</html>

chart-lib/index.js

@@ -0,0 +1,195 @@
+import {
+    initFeed,
+    BaseDataFeed,
+    BaseRecordSource,
+    TimeSeriesContainer,
+    Fields,
+    formatPriceWithDecimals,
+    asyncReady,
+    PubSub,
+    ChunkPart,
+    Topics,
+    SeriesKind,
+} from "./barchart.chart.js";
+
+const ohlcFields = [
+    Fields.DateTime,
+    Fields.Open,
+    Fields.High,
+    Fields.Low,
+    Fields.Close,
+    Fields.Volume,
+    Fields.Change,
+];
+
+const chunkSize = 180;
+let _jsonData = {};
+
+const dailyFileName = "AMZN_Daily.json";
+const eventsFileName = "AMZN_Events.json";
+
+async function getData(fileName) {
+    if (_jsonData[fileName] == null) {
+        const resp = await fetch(`./${fileName}`);
+        _jsonData[fileName] = await resp.json();
+    }
+    return _jsonData[fileName];
+}
+
+class ExampleTimeSeries {
+    constructor(query) {
+        this.query = query;
+        this.container = null;
+        this.canLoadMoreData = true;
+        this.isLoading = false;
+    }
+    get hasData() {
+        return this.container !== null;
+    }
+
+    async loadMoreData(headChunk = true) {
+        if (this.isLoading) return Promise.resolve();
+        this.isLoading = true;
+        const data = await getData(dailyFileName);
+
+        const loaded = this.container !== null ? this.container.size : 0;
+        if (data.length === loaded) {
+            this.canLoadMoreData = false;
+            return;
+        }
+
+        const container = new TimeSeriesContainer(ohlcFields);
+        let precedingClose = null;
+        const to = data.length - loaded;
+        const from = Math.max(0, to - chunkSize);
+        for (let i = from; i < to; ++i) {
+            const row = data[i];
+            container.addDataPoint(Fields.DateTime, new Date(row.date));
+            container.addDataPoint(Fields.Open, row.open);
+            container.addDataPoint(Fields.High, row.high);
+            container.addDataPoint(Fields.Low, row.low);
+            container.addDataPoint(Fields.Close, row.close);
+            container.addDataPoint(Fields.Volume, row.volume);
+            container.addDataPoint(Fields.Change, precedingClose != null ? row.close - precedingClose : null);
+            precedingClose = row.close;
+        }
+
+        if (!headChunk) this.container = container;
+        else this.container.prepend(container);
+        this.isLoading = false;
+        if (headChunk) {
+            // the first chunk is loaded implicitly during the call to ready method below
+            // so there's no need for notification
+            PubSub.publish(Topics.TS_MANYCHANGED, {
+                series: this,
+                part: ChunkPart.Head,
+            });
+        }
+    }
+    async ready() {
+        return asyncReady.call(this, async () => {
+            await this.loadMoreData(false);
+            return true;
+        });
+    }
+}
+
+class ExampleEventsSeries {
+    constructor(query) {
+        this.query = query;
+        this.container = null;
+    }
+    get hasData() {
+        return this.container !== null;
+    }
+    async loadAndParse() {
+        const data = await getData(eventsFileName);
+        const suffix = "T00:00:00";
+        this.container = new TimeSeriesContainer([
+            Fields.DateTime,
+            Fields.Dividends,
+            Fields.Earnings,
+            Fields.Splits,
+        ]);
+        const addValue = (field, row) => {
+            const matching = field.id === row.kind ? row.value : null;
+            this.container.addDataPoint(field, matching);
+        };
+        data.forEach(row => {
+            this.container.addDataPoint(Fields.DateTime, new Date(Date.parse(row.date + suffix)));
+            this.container.fields.filter(f => f !== Fields.DateTime).forEach(f => addValue(f, row));
+        });
+        return Promise.resolve(true);
+    }
+    async ready() {
+        return asyncReady.call(this, this.loadAndParse);
+    }
+}
+
+class ExampleTimeSeriesSource {
+    getTimeSeries(query) {
+        const kind = query.seriesKind || SeriesKind.Normal;
+        const isAmazon = query.symbol === "AMZN";
+        if (kind === SeriesKind.Normal) return isAmazon ? new ExampleTimeSeries(query) : null;
+        else if (kind === SeriesKind.Events) return isAmazon ? new ExampleEventsSeries(query) : null;
+        return null;
+    }
+}
+
+class ExampleMetaData {
+    constructor(decimals) {
+        this._decimals = decimals;
+    }
+    async ready() {
+        return true;
+    }
+    format(price, _field, _options) {
+        return formatPriceWithDecimals(price, this._decimals);
+    }
+}
+
+class ExampleMetaDataSource {
+    getMetaData(symbol) {
+        return new ExampleMetaData(symbol === "AMZN" ? 2 : 0);
+    }
+}
+
+class ExampleRecord {
+    async ready() {
+        return true;
+    }
+    hasField(_field) {
+        return false;
+    }
+    getValue(_field) {
+        return null;
+    }
+}
+
+class ExampleRecordSource extends BaseRecordSource {
+    getRecord(symbol) {
+        return symbol === "AMZN" ? new ExampleRecord() : null;
+    }
+}
+
+class ExampleFeed extends BaseDataFeed {
+    constructor(config) {
+        super(config);
+        this.timeSeriesSource = new ExampleTimeSeriesSource();
+        this.metaDataSource = new ExampleMetaDataSource();
+        this.recordSource = new ExampleRecordSource();
+    }
+}
+
+const feed = initFeed(ExampleFeed, {
+    throttleMillis: 250,
+    apiKey: "<YOUR_API_KEY>",
+});
+
+feed.ready().then(done => {
+    if (done) {
+        feed.addChart("root", {
+            symbol: `AMZN`,
+        });
+    }
+});

{package → chart-lib}/package.json

@@ -1,11 +1,17 @@
 {
     "name": "@barchart/chart-lib",
-    "version": "2.106.1",
+    "version": "2.183.2",
     "description": "Barchart HTML5 Streaming Chart",
     "main": "barchart.chart.js",
     "types": "barchart.chart.d.ts",
     "license": "UNLICENSED",
     "files": [
-        "barchart.chart.d.ts"
+        "AMZN_Daily.json",
+        "AMZN_Events.json",
+        "barchart.chart.d.ts",
+        "chart.def.json",
+        "index.html",
+        "index.js",
+        "style.css"
     ]
 }

chart-lib/style.css

@@ -0,0 +1,171 @@
+html {
+    font-family: "Open Sans", serif;
+    font-size: 14px;
+}
+
+.root {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    width: 100vw;
+}
+
+.root * {
+    box-sizing: inherit;
+}
+
+.bcharts-tooltip {
+    background-color: #222;
+    color: #ccc;
+    cursor: default;
+    font-size: 12px;
+    pointer-events: none;
+    white-space: nowrap;
+    box-shadow: 1px 1px 3px darkgray;
+    z-index: 4;
+}
+
+.bcharts-tooltip table tr td {
+    padding: 0 5px !important;
+    border-bottom: none;
+}
+
+.bcharts-tooltip .field-value {
+    text-align: right;
+}
+
+.bcharts-card {
+    z-index: 4;
+    background: rgba(0, 0, 0, 0);
+    line-height: 1.6;
+    font-size: 13px;
+    padding: 3px;
+    vertical-align: center;
+}
+
+.bcharts-card-first {
+    margin-top: 0px;
+}
+
+.bcharts-card .plot {
+    vertical-align: middle;
+    margin-left: 5px;
+}
+
+.bcharts-card .plot:first-of-type {
+    display: inline;
+    margin-left: 5px;
+}
+
+.bcharts-card .value-title {
+    color: #fff;
+    cursor: pointer;
+}
+
+.bcharts-card .value-subtitle {
+    color: #888;
+}
+
+.bcharts-card .field-name {
+    color: #777;
+}
+
+.bcharts-card .field-value {
+    font-weight: 500;
+}
+
+.bcharts-card .field-up-value {
+    color: #1c4;
+}
+
+.bcharts-card .field-down-value {
+    color: #f03;
+}
+
+.bcharts-card .field-same-value {
+    color: #58f;
+}
+
+.bcharts-card .curve-color {
+    padding-right: 2px;
+}
+
+.bcharts-card .move-pane {
+    padding: 3px;
+    fill: #ffd1dc;
+    cursor: pointer;
+}
+
+.bcharts-card .delete-plot {
+    padding: 3px;
+    fill: #999;
+    cursor: pointer;
+}
+
+.bcharts-card .delete-plot:hover {
+    fill: #f00;
+}
+
+.bubble-box {
+    background-color: #272e32;
+    box-shadow: 0px 0px 0px 1px #3a4850, 0px 2px 3px rgba(#000, 0.6);
+    border-radius: 1px 1px 0 1px;
+    padding: 8px 10px;
+    line-height: 18px;
+}
+
+.bubble-box-date {
+    color: rgba(200, 201, 201, 0.8);
+}
+
+.bubble-box-last {
+    font-size: 18px;
+    font-weight: 700;
+    color: #fff;
+    margin-bottom: 2px;
+    margin-top: 1px;
+}
+
+.bubble-box-values {
+    padding-left: 15px;
+}
+
+.bubble-box-volume {
+    color: rgba(200, 201, 201, 0.8);
+}
+
+.bubble-box-label {
+    padding-right: 5px;
+    color: rgba(200, 201, 201, 0.8);
+}
+
+.bubble-box-value {
+    padding-left: 5px;
+    color: #fff;
+    font-weight: 400;
+}
+
+.bcharts-logo {
+    opacity: 0.15;
+}
+
+.bcharts-logo .minor {
+    opacity: 0.55;
+    fill: #ccc;
+}
+
+.bcharts-logo .major {
+    fill: #ccc;
+}
+
+.go-to-latest {
+    cursor: pointer;
+    background-color: rgba(255, 255, 255, 0.9);
+    outline: none;
+    border: none;
+    padding: 0;
+    width: 24px;
+    height: 24px;
+    fill: #eee;
+}