tslab-widgets 1.0.0 → 1.2.0

package/dist/index.d.ts

@@ -1,8 +1,16 @@
+export type { BarchartVariation, IBarConfig, IBarchartConfig, IYAxisConfig, } from "./barchart/barchart";
+export { barchart } from "./barchart/barchart";
 export { chart } from "./chart/chart";
 export type { IPoint } from "./chart/plugins/trendLine";
 export type { IVertLineOptions } from "./chart/plugins/verticalLine";
 export type { IVolumeProfileData } from "./chart/plugins/volumeProfile";
-export { csv } from "./csv/csv";
 export { gauge } from "./gauge/gauge";
 export { json } from "./json/json";
+export type { IRowOptions, IRowWidget } from "./layout/row";
+export { row } from "./layout/row";
+export type { IPieConfig, IPieDataItem } from "./pie/pie";
+export { pie } from "./pie/pie";
+export type { IScatterConfig, IScatterSeriesConfig } from "./scatter/scatter";
+export { scatter } from "./scatter/scatter";
+export { table } from "./table/table";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACxD,YAAY,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACrE,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACX,iBAAiB,EACjB,UAAU,EACV,eAAe,EACf,YAAY,GACZ,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACxD,YAAY,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACrE,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -1,12 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.json = exports.gauge = exports.csv = exports.chart = void 0;
+exports.table = exports.scatter = exports.pie = exports.row = exports.json = exports.gauge = exports.chart = exports.barchart = void 0;
+var barchart_1 = require("./barchart/barchart");
+Object.defineProperty(exports, "barchart", { enumerable: true, get: function () { return barchart_1.barchart; } });
 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; } });
+var row_1 = require("./layout/row");
+Object.defineProperty(exports, "row", { enumerable: true, get: function () { return row_1.row; } });
+var pie_1 = require("./pie/pie");
+Object.defineProperty(exports, "pie", { enumerable: true, get: function () { return pie_1.pie; } });
+var scatter_1 = require("./scatter/scatter");
+Object.defineProperty(exports, "scatter", { enumerable: true, get: function () { return scatter_1.scatter; } });
+var table_1 = require("./table/table");
+Object.defineProperty(exports, "table", { enumerable: true, get: function () { return table_1.table; } });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,uCAAsC;AAA7B,8FAAA,KAAK,OAAA;AAId,iCAAgC;AAAvB,0FAAA,GAAG,OAAA;AACZ,uCAAsC;AAA7B,8FAAA,KAAK,OAAA;AACd,oCAAmC;AAA1B,4FAAA,IAAI,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAMA,gDAA+C;AAAtC,oGAAA,QAAQ,OAAA;AACjB,uCAAsC;AAA7B,8FAAA,KAAK,OAAA;AAId,uCAAsC;AAA7B,8FAAA,KAAK,OAAA;AACd,oCAAmC;AAA1B,4FAAA,IAAI,OAAA;AAEb,oCAAmC;AAA1B,0FAAA,GAAG,OAAA;AAEZ,iCAAgC;AAAvB,0FAAA,GAAG,OAAA;AAEZ,6CAA4C;AAAnC,kGAAA,OAAO,OAAA;AAChB,uCAAsC;AAA7B,8FAAA,KAAK,OAAA"}

package/dist/json/json.d.ts

@@ -3,5 +3,12 @@ declare function json<T extends object>(opts: {
     height?: number;
     width?: number;
 }): void;
+declare namespace json {
+    var html: <T extends object>(opts: {
+        data: T;
+        height?: number | undefined;
+        width?: number | undefined;
+    }) => string;
+}
 export { json };
 //# sourceMappingURL=json.d.ts.map

package/dist/json/json.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"json.d.ts","sourceRoot":"","sources":["../../src/json/json.ts"],"names":[],"mappings":"AAIA,iBAAS,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,IAAI,EAAE;IACrC,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,QAyBA;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"json.d.ts","sourceRoot":"","sources":["../../src/json/json.ts"],"names":[],"mappings":"AA+CA,iBAAS,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,IAAI,EAAE;IACrC,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAGP;kBAPQ,IAAI;;;;;;;AAeb,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/json/json.js

@@ -4,31 +4,48 @@ exports.json = void 0;
 const tslib_1 = require("tslib");
 const tslab = tslib_1.__importStar(require("tslab"));
 const versions_1 = require("../config/versions");
-function json(opts) {
+function generateJsonHtml(opts) {
     const width = opts.width || 400;
-    const height = opts.height || 200;
+    const height = opts.height || 150;
     const reactComponentId = `_json_widget${Math.random().toString(36).substring(2, 9)}`;
-    const html = `
+    return `
     <div
       id="${reactComponentId}"
-      style="width:${width + 50}px;height:${height + 50}px;margin:auto;max-height:${height + 50}px;overflow:scroll;">
+      style="width:${width + 20}px;height:${height + 20}px;max-height:${height + 20}px;overflow:scroll;padding: 8px;margin: auto;">
     </div>
     <script type="module">
       import React from "${versions_1.CDN_URLS.react}";
       import ReactDOM from "${versions_1.CDN_URLS.reactDom}";
-      import ReactJsonTree from "${versions_1.CDN_URLS.reactJsonTree}";
+      import {JSONTree} from "${versions_1.CDN_URLS.reactJsonTree}";
 
       const reactJupyterLabComponentId = "${reactComponentId}";
       const jupyterLabReactComponentContainer = document.getElementById("${reactComponentId}");
       const args = JSON.parse('${JSON.stringify(opts.data)}');
-      ReactDOM.render(React.createElement(
-        ReactJsonTree,
-        { data: args },
-      ), jupyterLabReactComponentContainer);
+      const h = React.createElement;
+
+      if (jupyterLabReactComponentContainer) {
+        const root = ReactDOM.createRoot(jupyterLabReactComponentContainer);
+        root.render(
+          h(
+            'div',
+            { style: { display: 'flex', flex: 1, flexDirection: 'column', alignSelf: 'flex-start' } },
+            [
+              h(
+                JSONTree,
+                { data: args },
+              )
+            ]
+          ),
+        );
+      }
 
     </script>
   `;
+}
+function json(opts) {
+    const html = generateJsonHtml(opts);
     tslab.display.html(html);
 }
 exports.json = json;
+json.html = (opts) => generateJsonHtml(opts);
 //# sourceMappingURL=json.js.map

package/dist/json/json.js.map

@@ -1 +1 @@
-{"version":3,"file":"json.js","sourceRoot":"","sources":["../../src/json/json.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,iDAA8C;AAE9C,SAAS,IAAI,CAAmB,IAI/B;IACA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC;IAChC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC;IAClC,MAAM,gBAAgB,GAAG,eAAe,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACrF,MAAM,IAAI,GAAG;;YAEF,gBAAgB;qBACP,KAAK,GAAG,EAAE,aAAa,MAAM,GAAG,EAAE,6BAA6B,MAAM,GAAG,EAAE;;;2BAGpE,mBAAQ,CAAC,KAAK;8BACX,mBAAQ,CAAC,QAAQ;mCACZ,mBAAQ,CAAC,aAAa;;4CAEb,gBAAgB;2EACe,gBAAgB;iCAC1D,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;;;GAOvD,CAAC;IACH,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAEQ,oBAAI"}
+{"version":3,"file":"json.js","sourceRoot":"","sources":["../../src/json/json.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,iDAA8C;AAE9C,SAAS,gBAAgB,CAAmB,IAI3C;IACA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC;IAChC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC;IAClC,MAAM,gBAAgB,GAAG,eAAe,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACrF,OAAO;;YAEI,gBAAgB;qBACP,KAAK,GAAG,EAAE,aAAa,MAAM,GAAG,EAAE,iBAAiB,MAAM,GAAG,EAAE;;;2BAGxD,mBAAQ,CAAC,KAAK;8BACX,mBAAQ,CAAC,QAAQ;gCACf,mBAAQ,CAAC,aAAa;;4CAEV,gBAAgB;2EACe,gBAAgB;iCAC1D,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;GAoBvD,CAAC;AACJ,CAAC;AAED,SAAS,IAAI,CAAmB,IAI/B;IACA,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACpC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAQQ,oBAAI;AANb,IAAI,CAAC,IAAI,GAAG,CAAmB,IAI9B,EAAU,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC"}

package/dist/layout/row.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Widget renderer function type - returns HTML string instead of calling tslab.display.html
+ */
+export type WidgetRenderer = () => string;
+/**
+ * Widget configuration for row layout
+ */
+export interface IRowWidget {
+    /** HTML content to render */
+    html: string;
+    /** Optional flex grow factor (default: 1) */
+    flex?: number;
+    /** Optional width constraint */
+    width?: string;
+    /** Optional minimum width */
+    minWidth?: string;
+    /** Optional maximum width */
+    maxWidth?: string;
+}
+/**
+ * Row layout options
+ */
+export interface IRowOptions {
+    /** Vertical alignment of widgets (default: "flex-start") */
+    alignItems?: "flex-start" | "center" | "flex-end" | "stretch";
+    /** Horizontal alignment when widgets don't fill row (default: "flex-start") */
+    justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+    /** Minimum height for the row */
+    minHeight?: string;
+    /** Allow wrapping to multiple lines (default: false) */
+    wrap?: boolean;
+}
+/**
+ * Renders multiple widgets in a horizontal row layout
+ *
+ * @example
+ * ```typescript
+ * import { row } from 'tslab-widgets';
+ * import { gauge, table } from 'tslab-widgets';
+ *
+ * row([
+ *   { html: gauge.html({ value: 75, size: 'M' }) },
+ *   { html: table.html({ options: { rowData: [...] } }), flex: 2 }
+ * ]);
+ * ```
+ */
+export declare function row(widgets: IRowWidget[], options?: IRowOptions): void;
+//# sourceMappingURL=row.d.ts.map

package/dist/layout/row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../src/layout/row.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,MAAM,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,UAAU;IAC1B,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC3B,4DAA4D;IAC5D,UAAU,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;IAC9D,+EAA+E;IAC/E,cAAc,CAAC,EACZ,YAAY,GACZ,QAAQ,GACR,UAAU,GACV,eAAe,GACf,cAAc,GACd,cAAc,CAAC;IAClB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,GAAG,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAqD1E"}

package/dist/layout/row.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.row = void 0;
+const tslib_1 = require("tslib");
+const tslab = tslib_1.__importStar(require("tslab"));
+/**
+ * Renders multiple widgets in a horizontal row layout
+ *
+ * @example
+ * ```typescript
+ * import { row } from 'tslab-widgets';
+ * import { gauge, table } from 'tslab-widgets';
+ *
+ * row([
+ *   { html: gauge.html({ value: 75, size: 'M' }) },
+ *   { html: table.html({ options: { rowData: [...] } }), flex: 2 }
+ * ]);
+ * ```
+ */
+function row(widgets, options = {}) {
+    const { alignItems = "center", justifyContent = "center", minHeight, wrap = false, } = options;
+    // Generate unique container ID
+    const containerId = `_row_layout${Math.random().toString(36).substring(2, 9)}`;
+    // Build individual widget containers with flex properties
+    const widgetContainers = widgets
+        .map((widget, idx) => {
+        const widgetId = `${containerId}_widget_${idx}`;
+        const styles = [
+            widget.minWidth ? `min-width: ${widget.minWidth}` : "",
+            widget.maxWidth ? `max-width: ${widget.maxWidth}` : "",
+            widget.flex ? "flex: 1" : "",
+            "display: flex",
+            "flex-direction: row",
+            "align-items: center",
+            "justify-content: center",
+            "min-height: 150px",
+        ]
+            .filter(Boolean)
+            .join("; ");
+        return `
+      <div id="${widgetId}" style="${styles}">
+        ${widget.html}
+      </div>
+    `;
+    })
+        .join("");
+    // Compose final HTML with flexbox row
+    const html = `
+    <div id="${containerId}" style="
+      display: flex;
+      flex-direction: row;
+      align-items: ${alignItems};
+      justify-content: ${justifyContent};
+      ${wrap ? "flex-wrap: wrap;" : "flex-wrap: nowrap;"}
+      ${minHeight ? `min-height: ${minHeight};` : ""}
+      width: 100%;
+      gap: 20px;
+    ">
+      ${widgetContainers}
+    </div>
+  `;
+    tslab.display.html(html);
+}
+exports.row = row;
+//# sourceMappingURL=row.js.map

package/dist/layout/row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../src/layout/row.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AA2C/B;;;;;;;;;;;;;GAaG;AACH,SAAgB,GAAG,CAAC,OAAqB,EAAE,UAAuB,EAAE;IACnE,MAAM,EACL,UAAU,GAAG,QAAQ,EACrB,cAAc,GAAG,QAAQ,EACzB,SAAS,EACT,IAAI,GAAG,KAAK,GACZ,GAAG,OAAO,CAAC;IAEZ,+BAA+B;IAC/B,MAAM,WAAW,GAAG,cAAc,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IAE/E,0DAA0D;IAC1D,MAAM,gBAAgB,GAAG,OAAO;SAC9B,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE;QACpB,MAAM,QAAQ,GAAG,GAAG,WAAW,WAAW,GAAG,EAAE,CAAC;QAChD,MAAM,MAAM,GAAG;YACd,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE;YACtD,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE;YACtD,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;YAC5B,eAAe;YACf,qBAAqB;YACrB,qBAAqB;YACrB,yBAAyB;YACzB,mBAAmB;SACnB;aACC,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,IAAI,CAAC,CAAC;QAEb,OAAO;iBACO,QAAQ,YAAY,MAAM;UACjC,MAAM,CAAC,IAAI;;KAEhB,CAAC;IACJ,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAC;IAEX,sCAAsC;IACtC,MAAM,IAAI,GAAG;eACC,WAAW;;;qBAGL,UAAU;yBACN,cAAc;QAC/B,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,oBAAoB;QAChD,SAAS,CAAC,CAAC,CAAC,eAAe,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE;;;;QAI5C,gBAAgB;;GAErB,CAAC;IAEH,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AArDD,kBAqDC"}

package/dist/pie/pie.d.ts

@@ -0,0 +1,25 @@
+export type IPieDataItem = {
+    name: string;
+    value: number;
+    fill?: string;
+};
+export type IPieConfig = {
+    data: IPieDataItem[];
+    innerData?: IPieDataItem[];
+    innerRadius?: number;
+    outerRadius?: number;
+    showLabels?: boolean;
+    useCustomLabels?: boolean;
+    showLabelLines?: boolean;
+    animate?: boolean;
+    width?: number;
+    height?: number;
+    title?: string;
+    colors?: string[];
+};
+declare function pie(config: IPieConfig): void;
+declare namespace pie {
+    var html: (config: IPieConfig) => string;
+}
+export { pie };
+//# sourceMappingURL=pie.d.ts.map

package/dist/pie/pie.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie.d.ts","sourceRoot":"","sources":["../../src/pie/pie.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,YAAY,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1E,MAAM,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,YAAY,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AA+KF,iBAAS,GAAG,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,CAGrC;kBAHQ,GAAG;;;AAOZ,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/pie/pie.js

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pie = void 0;
+const tslib_1 = require("tslib");
+const tslab = tslib_1.__importStar(require("tslab"));
+const versions_1 = require("../config/versions");
+function generatePieHtml(config) {
+    const reactComponentId = `_pie_widget${Math.random().toString(36).substring(2, 9)}`;
+    const { data, innerData, innerRadius = 0, outerRadius = 80, showLabels = false, useCustomLabels = false, showLabelLines = true, animate = true, width = 500, height = 500, title = "", colors = [
+        "#0088FE",
+        "#00C49F",
+        "#FFBB28",
+        "#FF8042",
+        "#8884d8",
+        "#82ca9d",
+        "#ffc658",
+        "#ff7c7c",
+    ], } = config;
+    return `
+    <div id="${reactComponentId}" />
+    <script type="module">
+      import React from "${versions_1.CDN_URLS.react}";
+      import ReactDOM from "${versions_1.CDN_URLS.reactDom}";
+      import { Cell, Pie, PieChart } from "${versions_1.CDN_URLS.recharts}";
+
+      const h = React.createElement;
+
+      const RADIAN = Math.PI / 180;
+      const DEFAULT_COLORS = ${JSON.stringify(colors)};
+
+      // Custom label renderer for percentage display
+      function renderCustomizedLabel({ cx, cy, midAngle, innerRadius, outerRadius, percent }) {
+        if (cx == null || cy == null || innerRadius == null || outerRadius == null) {
+          return null;
+        }
+        const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+        const ncx = Number(cx);
+        const x = ncx + radius * Math.cos(-(midAngle ?? 0) * RADIAN);
+        const ncy = Number(cy);
+        const y = ncy + radius * Math.sin(-(midAngle ?? 0) * RADIAN);
+
+        return h(
+          "text",
+          {
+            x: x,
+            y: y,
+            fill: "white",
+            textAnchor: x > ncx ? "start" : "end",
+            dominantBaseline: "central",
+            style: { fontSize: "14px", fontWeight: "600" }
+          },
+          ((percent ?? 1) * 100).toFixed(0) + "%"
+        );
+      }
+
+      function PieChartComponent() {
+        const data = ${JSON.stringify(data)};
+        const innerData = ${JSON.stringify(innerData || null)};
+        const hasInnerData = innerData && innerData.length > 0;
+        const showLabels = ${showLabels};
+        const useCustomLabels = ${useCustomLabels};
+        const showLabelLines = ${showLabelLines};
+        const animate = ${animate};
+        const innerRadiusPercent = ${innerRadius};
+        const outerRadiusPercent = ${outerRadius};
+        const title = "${title}";
+
+        return h(
+          "div",
+          {
+            style: {
+              width: "100%",
+              maxWidth: "${width}px",
+              margin: "8px auto",
+              backgroundColor: "#1F1826",
+              padding: title ? "20px" : "10px",
+              borderRadius: "8px",
+            }
+          },
+          [
+            title && h(
+              "h3",
+              {
+                style: {
+                  margin: "0 0 15px 0",
+                  color: "#fff",
+                  textAlign: "center",
+                  fontSize: "18px",
+                  fontWeight: "600",
+                }
+              },
+              title
+            ),
+            h(
+              PieChart,
+              {
+                width: ${width},
+                height: ${height},
+                style: {
+                  width: "100%",
+                  maxWidth: "${width}px",
+                  maxHeight: "${height}px",
+                  aspectRatio: 1,
+                }
+              },
+              [
+                // Outer pie (or main pie if no inner data)
+                h(
+                  Pie,
+                  {
+                    data: data,
+                    dataKey: "value",
+                    cx: "50%",
+                    cy: "50%",
+                    innerRadius: hasInnerData ? innerRadiusPercent + "%" : innerRadiusPercent + "%",
+                    outerRadius: hasInnerData ? "50%" : outerRadiusPercent + "%",
+                    fill: "#8884d8",
+                    isAnimationActive: animate,
+                    label: showLabels && !hasInnerData ? (useCustomLabels ? renderCustomizedLabel : true) : false,
+                    labelLine: showLabelLines && showLabels && !hasInnerData,
+                  },
+                  data.map((entry, index) =>
+                    h(Cell, {
+                      key: "cell-" + index,
+                      fill: entry.fill || DEFAULT_COLORS[index % DEFAULT_COLORS.length],
+                    })
+                  )
+                ),
+                // Inner pie (for two-level charts)
+                hasInnerData && h(
+                  Pie,
+                  {
+                    data: innerData,
+                    dataKey: "value",
+                    cx: "50%",
+                    cy: "50%",
+                    innerRadius: "60%",
+                    outerRadius: outerRadiusPercent + "%",
+                    fill: "#82ca9d",
+                    isAnimationActive: animate,
+                    label: showLabels ? (useCustomLabels ? renderCustomizedLabel : true) : false,
+                    labelLine: showLabelLines && showLabels,
+                  },
+                  innerData.map((entry, index) =>
+                    h(Cell, {
+                      key: "cell-inner-" + index,
+                      fill: entry.fill || DEFAULT_COLORS[index % DEFAULT_COLORS.length],
+                    })
+                  )
+                ),
+              ]
+            ),
+          ]
+        );
+      }
+
+      const reactJupyterLabComponentId = "${reactComponentId}";
+      const jupyterLabReactComponentContainer = document.getElementById("${reactComponentId}");
+      const root = ReactDOM.createRoot(jupyterLabReactComponentContainer);
+
+      root.render(h(PieChartComponent));
+    </script>
+  `;
+}
+function pie(config) {
+    const html = generatePieHtml(config);
+    tslab.display.html(html);
+}
+exports.pie = pie;
+pie.html = (config) => generatePieHtml(config);
+//# sourceMappingURL=pie.js.map

package/dist/pie/pie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie.js","sourceRoot":"","sources":["../../src/pie/pie.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,iDAA8C;AAmB9C,SAAS,eAAe,CAAC,MAAkB;IAC1C,MAAM,gBAAgB,GAAG,cAAc,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACpF,MAAM,EACL,IAAI,EACJ,SAAS,EACT,WAAW,GAAG,CAAC,EACf,WAAW,GAAG,EAAE,EAChB,UAAU,GAAG,KAAK,EAClB,eAAe,GAAG,KAAK,EACvB,cAAc,GAAG,IAAI,EACrB,OAAO,GAAG,IAAI,EACd,KAAK,GAAG,GAAG,EACX,MAAM,GAAG,GAAG,EACZ,KAAK,GAAG,EAAE,EACV,MAAM,GAAG;QACR,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACT,GACD,GAAG,MAAM,CAAC;IAEX,OAAO;eACO,gBAAgB;;2BAEJ,mBAAQ,CAAC,KAAK;8BACX,mBAAQ,CAAC,QAAQ;6CACF,mBAAQ,CAAC,QAAQ;;;;;+BAK/B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA4B9B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;4BACf,IAAI,CAAC,SAAS,CAAC,SAAS,IAAI,IAAI,CAAC;;6BAEhC,UAAU;kCACL,eAAe;iCAChB,cAAc;0BACrB,OAAO;qCACI,WAAW;qCACX,WAAW;yBACvB,KAAK;;;;;;;2BAOH,KAAK;;;;;;;;;;;;;;;;;;;;;;;;yBAwBP,KAAK;0BACJ,MAAM;;;+BAGD,KAAK;gCACJ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAuDM,gBAAgB;2EACe,gBAAgB;;;;;GAKxF,CAAC;AACJ,CAAC;AAED,SAAS,GAAG,CAAC,MAAkB;IAC9B,MAAM,IAAI,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAIQ,kBAAG;AAFZ,GAAG,CAAC,IAAI,GAAG,CAAC,MAAkB,EAAU,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC"}

package/dist/scatter/scatter.d.ts

@@ -0,0 +1,36 @@
+export interface IScatterSeriesConfig {
+    title?: string;
+    data: Record<string, string | number>[];
+    xKey: string;
+    xName?: string;
+    yKey: string;
+    yName?: string;
+    fill?: string;
+    size?: number;
+    shape?: "circle" | "square" | "diamond" | "cross" | "plus" | "triangle";
+}
+export interface IScatterConfig {
+    series: IScatterSeriesConfig[];
+    width?: number;
+    height?: number;
+    title?: string;
+    subtitle?: string;
+    showLegend?: boolean;
+    showTooltip?: boolean;
+    xAxisTitle?: string;
+    yAxisTitle?: string;
+    xAxisFormatter?: string;
+    yAxisFormatter?: string;
+    margin?: {
+        top?: number;
+        right?: number;
+        left?: number;
+        bottom?: number;
+    };
+}
+declare function scatter(config: IScatterConfig): void;
+declare namespace scatter {
+    var html: (config: IScatterConfig) => string;
+}
+export { scatter };
+//# sourceMappingURL=scatter.d.ts.map

package/dist/scatter/scatter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scatter.d.ts","sourceRoot":"","sources":["../../src/scatter/scatter.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,oBAAoB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;CACxE;AAED,MAAM,WAAW,cAAc;IAC9B,MAAM,EAAE,oBAAoB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE;QACR,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACF;AAoMD,iBAAS,OAAO,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI,CAG7C;kBAHQ,OAAO;;;AAOhB,OAAO,EAAE,OAAO,EAAE,CAAC"}