tslab-widgets 0.1.0

package/dist/chart/plugins/volumeProfile.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VolumeProfileSeries = exports.VolumeProfilePaneView = exports.VolumeProfileRenderer = void 0;
+class VolumeProfileRenderer {
+    constructor(_data) {
+        this._data = _data;
+    }
+    positionsBox(position1Media, position2Media, pixelRatio) {
+        const scaledPosition1 = Math.round(pixelRatio * position1Media);
+        const scaledPosition2 = Math.round(pixelRatio * position2Media);
+        return {
+            length: Math.abs(scaledPosition2 - scaledPosition1) + 1,
+            position: Math.min(scaledPosition1, scaledPosition2),
+        };
+    }
+    draw(target) {
+        target.useBitmapCoordinateSpace(scope => {
+            if (this._data.top === null)
+                return;
+            this._data.items.forEach(row => {
+                if (row.y === null)
+                    return;
+                const itemVerticalPos = this.positionsBox(row.y, row.y - this._data.columnHeight, scope.verticalPixelRatio);
+                scope.context.fillStyle = 'rgba(40, 98, 255, 0.55)';
+                const itemHorizontalPosP = this.positionsBox(this._data.position === 'left' ? 0 : scope.mediaSize.width, this._data.position === 'left' ? row.widthPositive : (scope.mediaSize.width - row.widthPositive), scope.horizontalPixelRatio);
+                scope.context.fillRect(itemHorizontalPosP.position, itemVerticalPos.position, itemHorizontalPosP.length, itemVerticalPos.length - 2);
+                scope.context.fillStyle = 'rgba(251, 191, 44, 0.55)';
+                const itemHorizontalPosN = this.positionsBox(this._data.position === 'left' ? row.widthPositive : (scope.mediaSize.width - row.widthPositive), this._data.position === 'left' ? (row.widthNegative + row.widthPositive) : (scope.mediaSize.width - (row.widthNegative + row.widthPositive)), scope.horizontalPixelRatio);
+                scope.context.fillRect(itemHorizontalPosN.position, itemVerticalPos.position, itemHorizontalPosN.length, itemVerticalPos.length - 2);
+            });
+        });
+    }
+}
+exports.VolumeProfileRenderer = VolumeProfileRenderer;
+class VolumeProfilePaneView {
+    constructor(_source) {
+        this._source = _source;
+        this._columnHeight = 0;
+        this._items = [];
+        this._top = null;
+        this._widthNegative = 0;
+        this._widthPositive = 0;
+    }
+    renderer() {
+        return new VolumeProfileRenderer({
+            columnHeight: this._columnHeight,
+            items: this._items,
+            position: this._source.getContext().vpData.position,
+            top: this._top,
+            widthNegative: this._widthNegative,
+            widthPositive: this._widthPositive,
+        });
+    }
+    update() {
+        var _a, _b;
+        const ctx = this._source.getContext();
+        const data = ctx.vpData;
+        const series = ctx.series;
+        const timeScale = ctx.chart.timeScale();
+        const vr = timeScale.getVisibleRange();
+        if (!vr || data.fromTime > vr.to) { // hide visible range when context initial time is after chart visible time
+            this._items = [];
+            return { widthNegative: 0, widthPositive: 0 };
+        }
+        const _width = timeScale.width() * 0.33;
+        const y1 = (_a = series.priceToCoordinate(data.profile[0].price)) !== null && _a !== void 0 ? _a : 0;
+        const y2 = (_b = series.priceToCoordinate(data.profile[1].price)) !== null && _b !== void 0 ? _b : timeScale.height();
+        this._columnHeight = Math.max(1, y1 - y2);
+        const maxVolume = data.profile.reduce((acc, item) => Math.max(acc, item.positiveVolume + item.negativeVolume), 0);
+        this._top = y1;
+        this._items = data.profile.map(row => {
+            return {
+                widthNegative: (_width * row.positiveVolume) / maxVolume,
+                widthPositive: (_width * row.negativeVolume) / maxVolume,
+                y: series.priceToCoordinate(row.price),
+            };
+        });
+    }
+}
+exports.VolumeProfilePaneView = VolumeProfilePaneView;
+class VolumeProfileSeries {
+    constructor(_chart, _series, _vpData) {
+        this._chart = _chart;
+        this._series = _series;
+        this._vpData = _vpData;
+        this._vpIndex = null;
+        this._paneViews = [new VolumeProfilePaneView(this)];
+    }
+    getContext() { return { chart: this._chart, series: this._series, vpData: this._vpData }; }
+    paneViews() { return this._paneViews; }
+    updateAllViews() { this._paneViews.forEach(pw => { pw.update(); }); }
+}
+exports.VolumeProfileSeries = VolumeProfileSeries;

package/dist/csv/csv.d.ts

@@ -0,0 +1,5 @@
+declare function csv(data: string[], options?: {
+    customCss?: string;
+    maxHeight?: number;
+}): void;
+export { csv };

package/dist/csv/csv.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.csv = void 0;
+const tslib_1 = require("tslib");
+const tslab = tslib_1.__importStar(require("tslab"));
+// https://github.com/marudhupandiyang/react-csv-to-table
+function csv(data, options) {
+    const reactComponentId = `_csv_widget${Math.random().toString(36).substring(2, 9)}`;
+    const html = `
+    <style type="text/css">
+      table.widget-csv-table {
+        margin: auto !important;
+        margin-bottom: 10px !important;
+        > thead {
+          background-color: #000;
+          border: 1px solid #888 !important;
+        }
+        > tbody {
+          border: 1px solid #888 !important;
+          border-top: 0 !important;
+          > tr:hover {
+            background-color: #172F3F !important;
+          }
+        }
+      }
+      ${(options === null || options === void 0 ? void 0 : options.customCss) || ''}
+    </style>
+    <div id="${reactComponentId}" style="margin:auto;" />
+    <script type="module">
+      import React from "https://esm.sh/react@18.3.1";
+      import ReactDOM from "https://esm.sh/react-dom@18.3.1";
+      import { CsvToHtmlTable } from "https://esm.sh/react-csv-to-table@0.0.4";
+      const h = React.createElement;
+
+      const reactJupyterLabComponentId = "${reactComponentId}";
+      const jupyterLabReactComponentContainer = document.getElementById("${reactComponentId}");
+
+      const data = [${data.map((d) => JSON.stringify(d)).join(',')}];
+      const csvWidgets = groupArrayIntoPairs(data);
+      const rows = csvWidgets.map((rowDataPair, idx) => {
+        const cid1 = reactJupyterLabComponentId + '-0';
+        const cid2 = reactJupyterLabComponentId + '-1';
+        const csvTableRowStyle = {
+          display: 'flex',
+          flexDirection: 'column',
+          alignSelf: 'baseline',
+          ${(options === null || options === void 0 ? void 0 : options.maxHeight) ? `maxHeight:${options.maxHeight},overflowY: "scroll"` : ''}
+        };
+        const key = 'row-' + idx;
+        return (
+
+          h('div', { key, className: 'csv-' + key, style: { display: 'flex', flexDirection: 'row', margin: 'auto' }}, [
+            h('div', { className: 'csv-col-0', style: csvTableRowStyle },
+              h(CsvToHtmlTable, { data: rowDataPair[0], csvDelimiter: ',', tableClassName: 'widget-csv-table' })
+            ),
+            h('div', { className: 'csv-col-1', style: csvTableRowStyle },
+              rowDataPair[1]
+                ? h(CsvToHtmlTable, { data: rowDataPair[1], csvDelimiter: ',', tableClassName: 'widget-csv-table' })
+                : null,
+            ),
+          ])
+        );
+      });
+      
+      ReactDOM.render(
+        h('div', { style: { display: 'flex', flexDirection: 'column' }}, rows),
+        jupyterLabReactComponentContainer
+      );
+
+      function groupArrayIntoPairs(arr) {
+        const pairs = [];
+        for (let i = 0; i < arr.length; i += 2) {
+            const pair = [arr[i], arr[i + 1]];
+            pairs.push(pair);
+        }
+        return pairs;
+      }
+    
+    </script>
+  `;
+    tslab.display.html(html);
+}
+exports.csv = csv;

package/dist/gauge/gauge.d.ts

@@ -0,0 +1,9 @@
+declare function gauge(width: number | undefined, props: {
+    colors?: string[];
+    legend?: string;
+    nrOfLevels?: number;
+    percent: number;
+    score?: string;
+    title?: string;
+}): void;
+export { gauge };

package/dist/gauge/gauge.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gauge = void 0;
+const tslib_1 = require("tslib");
+const tslab = tslib_1.__importStar(require("tslab"));
+// https://www.npmjs.com/package/react-gauge-chart
+function gauge(width = 200, props) {
+    var _a;
+    const reactComponentId = `_gauge_widget${Math.random().toString(36).substring(2, 9)}`;
+    const html = `
+    <div id="${reactComponentId}"></div>
+    <style type="text/css">
+      g.text-group {
+        text-shadow: 5px 5px 5px #000;
+      }
+    </style>
+    <script type="module">
+      import React from "https://esm.sh/react@18.3.1";
+      import ReactDOM from "https://esm.sh/react-dom@18.3.1";
+      import GaugeChart from "https://esm.sh/react-gauge-chart@0.5.1";
+      const h = React.createElement;
+
+      const reactJupyterLabComponentId = "${reactComponentId}";
+      const jupyterLabReactComponentContainer = document.getElementById("${reactComponentId}");
+      const props = JSON.parse('${JSON.stringify(props)}');
+      const styles = {
+        wrapper: { 
+          width: '${width}px',
+          margin: 'auto',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          backgroundColor: '#000',
+          border: '1px solid #ccc',
+          color: '#fff',
+        },
+        title: { fontWeight: 'bold', fontSize: 13, marginBottom: '5px', paddingTop: '8px', whiteSpace: 'pre', color: '#fff' },
+        legend: { fontWeight: 'normal', fontSize: 12, marginBottom: '5px', whiteSpace: 'pre', color: '#dcdcdc' },
+      };
+      ReactDOM.render(
+        h('div', { style: styles.wrapper }, [
+          h('div', { style: styles.title }, '${(_a = props.title) !== null && _a !== void 0 ? _a : ''}'),
+          h(GaugeChart, {
+            id: 'rg-${reactComponentId}',
+            colors: ['#D10363', '#4CCD99'],
+            needleColor: '#888',
+            ${props.score ? `formatTextValue: value => '${props.score}',` : ''}
+            ...props,
+          }),
+          h('div', { style: styles.legend }, '${props.legend}'),
+        ]),
+        jupyterLabReactComponentContainer
+      );
+
+    </script>
+  `;
+    tslab.display.html(html);
+}
+exports.gauge = gauge;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { chart } from './chart/chart';
+export { csv } from './csv/csv';
+export { gauge } from './gauge/gauge';
+export { json } from './json/json';
+export type { IPoint } from './chart/plugins/trendLine';
+export type { IVertLineOptions } from './chart/plugins/verticalLine';
+export type { IVolumeProfileData } from './chart/plugins/volumeProfile';

package/dist/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.json = exports.gauge = exports.csv = exports.chart = void 0;
+var chart_1 = require("./chart/chart");
+Object.defineProperty(exports, "chart", { enumerable: true, get: function () { return chart_1.chart; } });
+var csv_1 = require("./csv/csv");
+Object.defineProperty(exports, "csv", { enumerable: true, get: function () { return csv_1.csv; } });
+var gauge_1 = require("./gauge/gauge");
+Object.defineProperty(exports, "gauge", { enumerable: true, get: function () { return gauge_1.gauge; } });
+var json_1 = require("./json/json");
+Object.defineProperty(exports, "json", { enumerable: true, get: function () { return json_1.json; } });

package/dist/json/json.d.ts

@@ -0,0 +1,6 @@
+declare function json<T extends object>(opts: {
+    data: T;
+    height?: number;
+    width?: number;
+}): void;
+export { json };

package/dist/json/json.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.json = void 0;
+const tslib_1 = require("tslib");
+const tslab = tslib_1.__importStar(require("tslab"));
+function json(opts) {
+    const width = opts.width || 400;
+    const height = opts.height || 200;
+    const reactComponentId = `_json_widget${Math.random().toString(36).substring(2, 9)}`;
+    const html = `
+    <div
+      id="${reactComponentId}"
+      style="width:${width + 50}px;height:${height + 50}px;margin:auto;max-height:${height + 50}px;overflow:scroll;">
+    </div>
+    <script type="module">
+      import React from "https://esm.sh/react@18.3.1";
+      import ReactDOM from "https://esm.sh/react-dom@18.3.1";
+      import ReactJsonTree from "https://esm.sh/react-json-tree@0.15.0";
+
+      const reactJupyterLabComponentId = "${reactComponentId}";
+      const jupyterLabReactComponentContainer = document.getElementById("${reactComponentId}");
+      const args = JSON.parse('${JSON.stringify(opts.data)}');
+      ReactDOM.render(React.createElement(
+        ReactJsonTree,
+        { data: args },
+      ), jupyterLabReactComponentContainer);
+
+    </script>
+  `;
+    tslab.display.html(html);
+}
+exports.json = json;

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "tslab-widgets",
+  "version": "0.1.0",
+  "description": "A set of widgets for ts-lab environment including financial charts",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "npx tsc",
+    "lint": "npx eslint",
+    "reset": "rm -rf node_modules && rm -rf dist && npm install"
+  },
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
+  "keywords": [
+    "tslab",
+    "jupyter",
+    "widgets",
+    "chart",
+    "candlesticks",
+    "json",
+    "csv",
+    "typescript",
+    "ipynb",
+    "data science",
+    "jupyter-lab",
+    "notebook",
+    "lightweight-charts"
+  ],
+  "author": "Rodrigo P. (https://github.com/rodrigopivi)",
+  "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rodrigopivi/tslab-widgets"
+  },
+  "bugs": {
+    "url": "https://github.com/rodrigopivi/tslab-widgets/issues"
+  },
+  "homepage": "https://github.com/rodrigopivi/tslab-widgets#readme",
+  "private": false,
+  "dependencies": {
+    "tslab": "1.0.22"
+  },
+  "devDependencies": {
+    "@babel/core": "7.25.2",
+    "@babel/preset-react": "7.24.7",
+    "@types/node": "22.4.1",
+    "@types/react": "18.3.4",
+    "@typescript-eslint/eslint-plugin": "7.16.0",
+    "@typescript-eslint/parser": "7.16.0",
+    "cspell": "8.14.2",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-deprecation": "3.0.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-perfectionist": "2.11.0",
+    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-simple-import-sort": "12.1.1",
+    "eslint-plugin-unicorn": "54.0.0",
+    "eslint-plugin-unused-imports": "3.2.0",
+    "lightweight-charts": "4.2.0",
+    "prettier": "3.3.3",
+    "react": "18.3.1",
+    "tslib": "2.6.3",
+    "typescript": "5.5.4",
+    "webpack-cli": "5.1.4"
+  }
+}

package/readme.md

@@ -0,0 +1,29 @@
+<center>
+<h2>⚙️📟📈 tslab-widgets 📈📟⚙️</h1>
+</center>
+
+<blockquote>
+  A set of widgets for tslab (the interactive programming environment on top of jupyter lab that supports typescript and javascript).
+</blockquote>
+<hr />
+<br>
+
+### Setup:
+
+- Install [tslab](https://github.com/yunabe/tslab)
+- `npm i tslab-widgets`
+
+### Widget list:
+
+- Chart (thanks to `lightweight-charts`)
+- CSV
+- Gauge
+- JSON
+
+Review the [example jupyter notebook](https://github.com/rodrigopivi/tslab-widgets/blob/main/exampmle.ipynb).
+
+### Author
+
+Rodrigo P.
+
+[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/rodrigopivi)