tslab-widgets 1.0.0 → 1.2.0

package/dist/scatter/scatter.js

@@ -0,0 +1,193 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scatter = void 0;
+const tslib_1 = require("tslib");
+/** biome-ignore-all lint/style/useTemplate: custom render */
+const tslab = tslib_1.__importStar(require("tslab"));
+const versions_1 = require("../config/versions");
+function generateScatterHtml(config) {
+    const reactComponentId = `_scatter_widget${Math.random().toString(36).substring(2, 9)}`;
+    const { series, width, height = 400, title, subtitle, showLegend = true, showTooltip = true, xAxisTitle, yAxisTitle, xAxisFormatter, yAxisFormatter, } = config;
+    const serializedSeries = JSON.stringify(series);
+    return `
+    <div id="${reactComponentId}" style="display: flex; flex: 1;justify-content: center;">
+      <div style="padding: 20px; background: #2a2a2a; color: #fff; text-align: center; border-radius: 8px;">
+        <p style="margin: 0; font-size: 14px;">Loading chart...</p>
+        <p style="margin: 5px 0 0 0; font-size: 12px; color: #888;">If this message persists, there may be a module loading issue</p>
+      </div>
+    </div>
+    <script type="module">
+      import React from "${versions_1.CDN_URLS.react}";
+      import ReactDOM from "${versions_1.CDN_URLS.reactDom}";
+      import { AllCommunityModule, ModuleRegistry } from "https://esm.sh/ag-charts-community@13.0.0";
+      import { AgCharts } from "${versions_1.CDN_URLS.agChartsReact}";
+
+      const h = React.createElement;
+
+      ModuleRegistry.registerModules([AllCommunityModule]);
+
+      const seriesData = ${serializedSeries};
+      const showLegend = ${showLegend};
+      const showTooltip = ${showTooltip};
+      const title = "${title || ""}";
+      const subtitle = "${subtitle || ""}";
+      const xAxisTitle = "${xAxisTitle || ""}";
+      const yAxisTitle = "${yAxisTitle || ""}";
+      const maxWidth = ${width ? '"' + width.toString() + 'px"' : undefined};
+
+      // Default colors for series
+      const DEFAULT_COLORS = [
+        "#8884d8",
+        "#82ca9d",
+        "#ffc658",
+        "#ff7c7c",
+        "#8dd1e1",
+        "#d084d0",
+        "#ffb347",
+        "#a8e6cf"
+      ];
+
+      function getSeriesColor(series, index) {
+        return series.fill || DEFAULT_COLORS[index % DEFAULT_COLORS.length];
+      }
+
+      function buildSeries() {
+        return seriesData.map((series, index) => ({
+          type: 'scatter',
+          title: series.title,
+          data: series.data,
+          xKey: series.xKey,
+          xName: series.xName || series.xKey,
+          yKey: series.yKey,
+          yName: series.yName || series.yKey,
+          fill: getSeriesColor(series, index),
+          size: 6,
+          shape: series.shape || 'circle',
+        }));
+      }
+
+      function ScatterComponent() {
+        const series = buildSeries();
+
+        const chartOptions = {
+          theme: {
+            palette: {
+              fills: seriesData.map((s, index) => getSeriesColor(s, index)),
+              strokes: seriesData.map((s, index) => getSeriesColor(s, index)),
+            },
+            overrides: {
+              common: {
+                background: {
+                  fill: 'transparent',
+                },
+                title: {
+                  color: '#ffffff',
+                  fontSize: 16,
+                },
+                subtitle: {
+                  color: '#cccccc',
+                  fontSize: 14,
+                },
+                legend: {
+                  item: {
+                    label: {
+                      color: '#e0e0e0',
+                      fontSize: 12,
+                    },
+                  },
+                },
+              },
+              scatter: {
+                axes: {
+                  number: {
+                    label: {
+                      color: '#e0e0e0',
+                      fontSize: 12,
+                    },
+                    line: {
+                      color: '#555555',
+                    },
+                    gridLine: {
+                      style: [{
+                        stroke: '#444444',
+                        lineDash: [5, 5],
+                      }],
+                    },
+                    title: {
+                      color: '#ffffff',
+                      fontSize: 14,
+                    },
+                  },
+                },
+              },
+            },
+          },
+          title: title ? {
+            text: title,
+          } : undefined,
+          subtitle: subtitle ? {
+            text: subtitle,
+          } : undefined,
+          series: series,
+          axes: {
+            x: {
+              type: 'number',
+              position: 'bottom',
+              title: xAxisTitle ? {
+                text: xAxisTitle,
+              } : undefined,
+              label: ${xAxisFormatter ? `{ formatter: ${xAxisFormatter} }` : "undefined"},
+            },
+            y: {
+              type: 'number',
+              position: 'left',
+              title: yAxisTitle ? {
+                text: yAxisTitle,
+              } : undefined,
+              label: ${yAxisFormatter ? `{ formatter: ${yAxisFormatter} }` : "undefined"},
+            },
+          },
+          legend: {
+            enabled: showLegend,
+            position: 'bottom',
+          },
+        };
+
+        return h("div", {
+          style: {
+            textAlign: "center",
+            background: "#2a2a2a",
+            padding: "20px",
+            borderRadius: "8px",
+            width: "100%",
+            boxSizing: "border-box",
+            maxWidth,
+          }
+        }, [
+          h(AgCharts, {
+            options: chartOptions,
+            style: {
+              width: "100%",
+              maxWidth,
+              height: '${height}px',
+            },
+          })
+        ]);
+      }
+
+      const jupyterLabReactComponentContainer = document.getElementById("${reactComponentId}");
+
+      if (jupyterLabReactComponentContainer) {
+        const root = ReactDOM.createRoot(jupyterLabReactComponentContainer);
+        root.render(h(ScatterComponent));
+      }
+    </script>
+  `;
+}
+function scatter(config) {
+    const html = generateScatterHtml(config);
+    tslab.display.html(html);
+}
+exports.scatter = scatter;
+scatter.html = (config) => generateScatterHtml(config);
+//# sourceMappingURL=scatter.js.map

package/dist/scatter/scatter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scatter.js","sourceRoot":"","sources":["../../src/scatter/scatter.ts"],"names":[],"mappings":";;;;AAAA,6DAA6D;AAC7D,qDAA+B;AAC/B,iDAA8C;AAkC9C,SAAS,mBAAmB,CAAC,MAAsB;IAClD,MAAM,gBAAgB,GAAG,kBAAkB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACxF,MAAM,EACL,MAAM,EACN,KAAK,EACL,MAAM,GAAG,GAAG,EACZ,KAAK,EACL,QAAQ,EACR,UAAU,GAAG,IAAI,EACjB,WAAW,GAAG,IAAI,EAClB,UAAU,EACV,UAAU,EACV,cAAc,EACd,cAAc,GACd,GAAG,MAAM,CAAC;IAEX,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAEhD,OAAO;eACO,gBAAgB;;;;;;;2BAOJ,mBAAQ,CAAC,KAAK;8BACX,mBAAQ,CAAC,QAAQ;;kCAEb,mBAAQ,CAAC,aAAa;;;;;;2BAM7B,gBAAgB;2BAChB,UAAU;4BACT,WAAW;uBAChB,KAAK,IAAI,EAAE;0BACR,QAAQ,IAAI,EAAE;4BACZ,UAAU,IAAI,EAAE;4BAChB,UAAU,IAAI,EAAE;yBACnB,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,KAAK,CAAC,QAAQ,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAuGpD,cAAc,CAAC,CAAC,CAAC,gBAAgB,cAAc,IAAI,CAAC,CAAC,CAAC,WAAW;;;;;;;;uBAQjE,cAAc,CAAC,CAAC,CAAC,gBAAgB,cAAc,IAAI,CAAC,CAAC,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;yBAyB/D,MAAM;;;;;;2EAM4C,gBAAgB;;;;;;;GAOxF,CAAC;AACJ,CAAC;AAED,SAAS,OAAO,CAAC,MAAsB;IACtC,MAAM,IAAI,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACzC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAIQ,0BAAO;AAFhB,OAAO,CAAC,IAAI,GAAG,CAAC,MAAsB,EAAU,EAAE,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC"}

package/dist/table/table.d.ts

@@ -0,0 +1,16 @@
+import type { GridOptions } from "ag-grid-community";
+type RequiredFields<T, K extends keyof T> = T & Required<Pick<T, K>>;
+declare function table(params: {
+    options: RequiredFields<GridOptions, "rowData">;
+    height?: number;
+    width?: number;
+}): void;
+declare namespace table {
+    var html: (params: {
+        options: RequiredFields<GridOptions<any>, "rowData">;
+        height?: number | undefined;
+        width?: number | undefined;
+    }) => string;
+}
+export { table };
+//# sourceMappingURL=table.d.ts.map

package/dist/table/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD,KAAK,cAAc,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAsDrE,iBAAS,KAAK,CAAC,MAAM,EAAE;IACtB,OAAO,EAAE,cAAc,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAGP;kBAPQ,KAAK;;;;;;;AAed,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/table/table.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.table = void 0;
+const tslib_1 = require("tslib");
+const tslab = tslib_1.__importStar(require("tslab"));
+const versions_1 = require("../config/versions");
+function generateTableHtml(params) {
+    const width = params.width || 550;
+    const height = params.height || 330;
+    const reactComponentId = `_table_widget${Math.random().toString(36).substring(2, 9)}`;
+    if (!params.options.columnDefs &&
+        params.options.rowData &&
+        params.options.rowData.length > 0) {
+        params.options.columnDefs = Object.keys(params.options.rowData[0]).map((key) => ({ field: key, filter: true, sortable: true }));
+    }
+    return `
+    <div id="${reactComponentId}" />
+
+    <link rel="stylesheet" href="${versions_1.CDN_URLS.agGridStyles}" />
+    <link rel="stylesheet" href="${versions_1.CDN_URLS.agGridThemeAlpine}" />
+
+    <script type="module">
+      import React from "${versions_1.CDN_URLS.react}";
+      import ReactDOM from "${versions_1.CDN_URLS.reactDom}";
+
+      import { AllCommunityModule, ModuleRegistry, themeBalham, colorSchemeDarkBlue } from "${versions_1.CDN_URLS.agGridCommunity}";
+      ModuleRegistry.registerModules([AllCommunityModule]);
+
+      import { AgGridReact } from "${versions_1.CDN_URLS.agGridReact}";
+
+      const h = React.createElement;
+      const reactJupyterLabComponentId = "${reactComponentId}";
+      const jupyterLabReactComponentContainer = document.getElementById("${reactComponentId}");
+      const options = JSON.parse('${JSON.stringify(params.options)}');
+      const theme = themeBalham.withPart(colorSchemeDarkBlue);
+      const gridOptions = { theme, ...options };
+
+      if (jupyterLabReactComponentContainer) {
+        const root = ReactDOM.createRoot(jupyterLabReactComponentContainer);
+        root.render(
+          h('div', { style: { width: ${width}, height: ${height}, margin: 'auto' }}, [
+            h(AgGridReact, { gridOptions })
+          ])
+        );
+      }
+
+    </script>
+  `;
+}
+function table(params) {
+    const html = generateTableHtml(params);
+    tslab.display.html(html);
+}
+exports.table = table;
+table.html = (params) => generateTableHtml(params);
+//# sourceMappingURL=table.js.map

package/dist/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../src/table/table.ts"],"names":[],"mappings":";;;;AACA,qDAA+B;AAC/B,iDAA8C;AAI9C,SAAS,iBAAiB,CAAC,MAI1B;IACA,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,GAAG,CAAC;IAClC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC;IACpC,MAAM,gBAAgB,GAAG,gBAAgB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACtF,IACC,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU;QAC1B,MAAM,CAAC,OAAO,CAAC,OAAO;QACtB,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAChC;QACD,MAAM,CAAC,OAAO,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CACrE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CACvD,CAAC;KACF;IACD,OAAO;eACO,gBAAgB;;mCAEI,mBAAQ,CAAC,YAAY;mCACrB,mBAAQ,CAAC,iBAAiB;;;2BAGlC,mBAAQ,CAAC,KAAK;8BACX,mBAAQ,CAAC,QAAQ;;8FAE+C,mBAAQ,CAAC,eAAe;;;qCAGjF,mBAAQ,CAAC,WAAW;;;4CAGb,gBAAgB;2EACe,gBAAgB;oCACvD,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;;;;;;;uCAO3B,KAAK,aAAa,MAAM;;;;;;;GAO5D,CAAC;AACJ,CAAC;AAED,SAAS,KAAK,CAAC,MAId;IACA,MAAM,IAAI,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACvC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAQQ,sBAAK;AANd,KAAK,CAAC,IAAI,GAAG,CAAC,MAIb,EAAU,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tslab-widgets",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "A set of widgets for ts-lab environment including financial charts",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -61,12 +61,16 @@
     "@babel/preset-react": "7.28.5",
     "@biomejs/biome": "2.3.10",
     "@types/node": "25.0.3",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "ag-charts-react": "13.0.0",
+    "ag-grid-react": "35.0.0",
+    "ag-grid-community": "35.0.0",
     "cspell": "9.4.0",
     "lightweight-charts": "5.1.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "recharts": "3.6.0",
     "tslib": "2.8.1",
     "tsx": "^4.21.0",
     "typescript": "5.9.3"
@@ -84,4 +88,4 @@
       "optional": true
     }
   }
-}
+}

package/dist/csv/csv.d.ts

@@ -1,6 +0,0 @@
-declare function csv(data: string[], options?: {
-    customCss?: string;
-    maxHeight?: number;
-}): void;
-export { csv };
-//# sourceMappingURL=csv.d.ts.map

package/dist/csv/csv.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"csv.d.ts","sourceRoot":"","sources":["../../src/csv/csv.ts"],"names":[],"mappings":"AAKA,iBAAS,GAAG,CACX,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,CAAC,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,QA4EpD;AAED,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/csv/csv.js

@@ -1,85 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.csv = void 0;
-const tslib_1 = require("tslib");
-const tslab = tslib_1.__importStar(require("tslab"));
-const versions_1 = require("../config/versions");
-// 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 "${versions_1.CDN_URLS.react}";
-      import ReactDOM from "${versions_1.CDN_URLS.reactDom}";
-      import { CsvToHtmlTable } from "${versions_1.CDN_URLS.reactCsvToTable}";
-      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;
-//# sourceMappingURL=csv.js.map

package/dist/csv/csv.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"csv.js","sourceRoot":"","sources":["../../src/csv/csv.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,iDAA8C;AAE9C,yDAAyD;AACzD,SAAS,GAAG,CACX,IAAc,EACd,OAAoD;IAEpD,MAAM,gBAAgB,GAAG,cAAc,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACpF,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;;QAiBN,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,KAAI,EAAE;;eAEjB,gBAAgB;;2BAEJ,mBAAQ,CAAC,KAAK;8BACX,mBAAQ,CAAC,QAAQ;wCACP,mBAAQ,CAAC,eAAe;;;4CAGpB,gBAAgB;2EACe,gBAAgB;;sBAErE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;;;YAStD,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAAC,CAAC,CAAC,aAAa,OAAO,CAAC,SAAS,sBAAsB,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCvF,CAAC;IACH,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAEQ,kBAAG"}

package/readme.md

@@ -1,77 +0,0 @@
-<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>
-
-## Features
-
-✨ **Financial Charts** - Candlestick, line, area, bar charts with real-time sync
-📊 **Data Visualization** - CSV tables, JSON tree viewer, gauge charts
-🎯 **Chart Sync** - Automatic crosshair and time-scale synchronization across multiple charts
-🔧 **Type-Safe** - Full TypeScript support with comprehensive type definitions
-⚡ **Lightweight** - CDN-based dependencies for fast loading
-
-### Setup:
-
-- Install [tslab](https://github.com/yunabe/tslab)
-- `npm i -S tslab tslab-widgets`
-- Optional dev dependencies: `npm i -D lightweight-charts tslib react react-dom`
-- `npm install -g tslab`
-- `npm i -S tslab tslab-widgets`
-
-### Widget list:
-
-- **Chart** - Financial charts powered by `lightweight-charts` with plugins:
-  - Candlestick, Line, Area, Bar, Baseline, Histogram
-  - Tooltips, trend lines, volume profiles, vertical markers
-  - Multi-chart synchronization (crosshair + time scale)
-- **CSV** - Responsive table viewer with auto-pairing layout
-- **Gauge** - Circular progress/KPI indicators
-- **JSON** - Expandable tree view for objects
-
-Review the [example jupyter notebook](https://github.com/rodrigopivi/tslab-widgets/blob/main/example.ipynb).
-
-## CDN Strategy
-
-tslab-widgets uses a **CDN-based approach** for runtime dependencies (React, lightweight-charts, etc.). This means:
-
-- ✅ **No bundling overhead** - Dependencies loaded directly from esm.sh
-- ✅ **Faster notebook loading** - Browser caches shared dependencies
-- ✅ **Smaller package size** - No need to bundle React into the library
-- ✅ **Centralized version management** - All CDN versions managed in `src/config/versions.ts`
-
-### For Contributors: Updating CDN Versions
-
-```typescript
-// Edit src/config/versions.ts
-export const CDN_VERSIONS = {
-  react: "19.0.0", // Update version here
-  reactDom: "19.0.0",
-  lightweightCharts: "5.1.0",
-  // ...
-};
-```
-
-Then update corresponding versions in package.json devDependencies and run:
-
-```bash
-npm run validate  # Ensures versions match
-npm run build
-```
-
-### Screenshots
-
-<img width="1242" alt="Screenshot 2024-09-05 at 12 36 37 PM" src="https://github.com/user-attachments/assets/ab9a258c-059e-4bae-ac5b-6c753e885e70">
-
-<img width="1025" alt="Screenshot 2024-09-05 at 12 37 29 PM" src="https://github.com/user-attachments/assets/1a8cd079-ae49-4cd4-b629-069cc7a0bb61">
-
-### Author
-
-Rodrigo P.
-
-[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/rodrigopivi)