@mwater/visualization 5.4.4 → 5.5.0

package/lib/widgets/charts/pivot/SegmentDesignerComponent.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import * as ui from "@mwater/react-library/lib/bootstrap";
 import { DataSource, Schema } from "@mwater/expressions";
 import { PivotChartSegment } from "./PivotChartDesign";
 export interface SegmentDesignerComponentProps {
@@ -27,73 +26,13 @@ export default class SegmentDesignerComponent extends React.Component<SegmentDes
     handleFilterChange: (filter: any) => any;
     handleOrderExprChange: (orderExpr: any) => any;
     handleOrderDirChange: (orderDir: any) => any;
-    renderMode(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean;
-        hasSuccess?: boolean;
-        hasWarnings?: boolean;
-        hasErrors?: boolean;
-        horizontal?: boolean;
-    }, ui.FormGroup>;
-    renderLabel(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean;
-        hasSuccess?: boolean;
-        hasWarnings?: boolean;
-        hasErrors?: boolean;
-        horizontal?: boolean;
-    }, ui.FormGroup>;
+    renderMode(): React.JSX.Element;
+    renderLabel(): React.JSX.Element;
     renderValueAxis(): React.JSX.Element;
-    renderFilter(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean;
-        hasSuccess?: boolean;
-        hasWarnings?: boolean;
-        hasErrors?: boolean;
-        horizontal?: boolean;
-    }, ui.FormGroup>;
-    renderStyling(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean;
-        hasSuccess?: boolean;
-        hasWarnings?: boolean;
-        hasErrors?: boolean;
-        horizontal?: boolean;
-    }, ui.FormGroup>;
-    renderBorders(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean;
-        hasSuccess?: boolean;
-        hasWarnings?: boolean;
-        hasErrors?: boolean;
-        horizontal?: boolean;
-    }, ui.FormGroup>;
-    renderOrderExpr(): React.CElement<{
-        label: React.ReactNode;
-        labelMuted?: boolean;
-        hint?: React.ReactNode;
-        help?: React.ReactNode;
-        required?: boolean;
-        hasSuccess?: boolean;
-        hasWarnings?: boolean;
-        hasErrors?: boolean;
-        horizontal?: boolean;
-    }, ui.FormGroup>;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderFilter(): React.JSX.Element;
+    renderStyling(): React.JSX.Element;
+    renderBorders(): React.JSX.Element;
+    renderOrderExpr(): React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/lib/widgets/charts/pivot/SegmentDesignerComponent.js

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
 const ColorComponent_1 = __importDefault(require("../../../ColorComponent"));
@@ -78,32 +77,22 @@ class SegmentDesignerComponent extends react_1.default.Component {
         return this.update({ orderDir });
     };
     renderMode() {
-        return R(ui.FormGroup, {
-            labelMuted: true,
-            label: T `Type`
-        }, react_1.default.createElement(ui.Radio, { key: "single", value: this.state.mode, radioValue: "single", onChange: this.handleMode },
-            T `Single ${this.props.segmentType}`,
-            react_1.default.createElement("span", { className: "text-muted" },
-                ` - `,
-                T `used for summary ${this.props.segmentType}s and empty ${this.props.segmentType}s`)), react_1.default.createElement(ui.Radio, { key: "multiple", value: this.state.mode, radioValue: "multiple", onChange: this.handleMode },
-            T `Multiple ${this.props.segmentType}s`,
-            " - ",
-            react_1.default.createElement("span", { className: "text-muted" }, T `disaggregate data by a field`)));
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `Type` },
+            react_1.default.createElement(ui.Radio, { key: "single", value: this.state.mode, radioValue: "single", onChange: this.handleMode },
+                T `Single ${this.props.segmentType}`,
+                react_1.default.createElement("span", { className: "text-muted" },
+                    ` - `,
+                    T `used for summary ${this.props.segmentType}s and empty ${this.props.segmentType}s`)),
+            react_1.default.createElement(ui.Radio, { key: "multiple", value: this.state.mode, radioValue: "multiple", onChange: this.handleMode },
+                T `Multiple ${this.props.segmentType}s`,
+                " - ",
+                react_1.default.createElement("span", { className: "text-muted" }, T `disaggregate data by a field`))));
     }
     renderLabel() {
-        return R(ui.FormGroup, {
-            labelMuted: true,
-            label: T `Label`,
-            help: this.state.mode === "multiple" ? T `Optional label for the ${this.props.segmentType}s` : undefined
-        }, R("input", {
-            ref: (elem) => {
-                this.labelElem = elem;
-            },
-            type: "text",
-            className: "form-control",
-            value: this.props.segment.label || "",
-            onChange: this.handleLabelChange
-        }));
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `Label`, help: this.state.mode === "multiple" ? T `Optional label for the ${this.props.segmentType}s` : undefined },
+            react_1.default.createElement("input", { ref: (elem) => {
+                    this.labelElem = elem;
+                }, type: "text", className: "form-control", value: this.props.segment.label || "", onChange: this.handleLabelChange })));
     }
     renderValueAxis() {
         // Get type of axis
@@ -112,18 +101,7 @@ class SegmentDesignerComponent extends react_1.default.Component {
         const allowValueAxisOnlyValuesPresent = axisType == "enum" || axisType == "enumset" || axisType == "date";
         return react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `Field`, help: T `Field to disaggregate data by` },
             react_1.default.createElement("div", { style: { marginLeft: 8 } },
-                R(AxisComponent_1.default, {
-                    schema: this.props.schema,
-                    dataSource: this.props.dataSource,
-                    table: this.props.table,
-                    types: ["enum", "enumset", "text", "boolean", "date"],
-                    aggrNeed: "none",
-                    value: this.props.segment.valueAxis,
-                    onChange: this.handleValueAxisChange,
-                    allowExcludedValues: true,
-                    filters: this.props.filters,
-                    collapseCategories: true
-                }),
+                react_1.default.createElement(AxisComponent_1.default, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.props.table, types: ["enum", "enumset", "text", "boolean", "date"], aggrNeed: "none", value: this.props.segment.valueAxis, onChange: this.handleValueAxisChange, allowExcludedValues: true, filters: this.props.filters, collapseCategories: true }),
                 allowValueAxisOnlyValuesPresent ?
                     react_1.default.createElement(ui.Checkbox, { value: this.props.segment.valueAxisOnlyValuesPresent, onChange: this.handleValueAxisOnlyValuesPresentChange },
                         T `Only show values actually present`,
@@ -133,82 +111,52 @@ class SegmentDesignerComponent extends react_1.default.Component {
                     : null));
     }
     renderFilter() {
-        return R(ui.FormGroup, {
-            labelMuted: true,
-            label: [R(ui.Icon, { id: "glyphicon-filter" }), " ", T `Filters`],
-            hint: T `Filters all data associated with this ${this.props.segmentType}`
-        }, R(expressions_ui_2.FilterExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            onChange: this.handleFilterChange,
-            table: this.props.table,
-            value: this.props.segment.filter
-        }));
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(ui.Icon, { id: "glyphicon-filter" }),
+                " ",
+                T `Filters`), hint: T `Filters all data associated with this ${this.props.segmentType}` },
+            react_1.default.createElement(expressions_ui_2.FilterExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, onChange: this.handleFilterChange, table: this.props.table, value: this.props.segment.filter })));
     }
     renderStyling() {
-        return R(ui.FormGroup, {
-            labelMuted: true,
-            label: T `Styling`
-        }, react_1.default.createElement("div", null,
-            react_1.default.createElement(ui.Checkbox, { key: "bold", inline: true, value: this.props.segment.bold === true, onChange: (value) => this.update({ bold: value }) }, T `Bold`),
-            react_1.default.createElement(ui.Checkbox, { key: "italic", inline: true, value: this.props.segment.italic === true, onChange: (value) => this.update({ italic: value }) }, T `Italic`),
-            this.props.segment.valueAxis && this.props.segment.label ?
-                react_1.default.createElement(ui.Checkbox, { key: "valueLabelBold", inline: true, value: this.props.segment.valueLabelBold === true, onChange: (value) => this.update({ valueLabelBold: value }) }, T `Header Bold`)
-                : undefined,
-            this.props.segment.valueAxis && this.props.segment.label
-                ? R("div", { style: { paddingTop: 5 } }, T `Shade filler cells: `, R(ColorComponent_1.default, {
-                    color: this.props.segment.fillerColor,
-                    onChange: (color) => this.update({ fillerColor: color })
-                }))
-                : undefined));
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `Styling` },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(ui.Checkbox, { key: "bold", inline: true, value: this.props.segment.bold === true, onChange: (value) => this.update({ bold: value }) }, T `Bold`),
+                react_1.default.createElement(ui.Checkbox, { key: "italic", inline: true, value: this.props.segment.italic === true, onChange: (value) => this.update({ italic: value }) }, T `Italic`),
+                this.props.segment.valueAxis && this.props.segment.label ?
+                    react_1.default.createElement(ui.Checkbox, { key: "valueLabelBold", inline: true, value: this.props.segment.valueLabelBold === true, onChange: (value) => this.update({ valueLabelBold: value }) }, T `Header Bold`)
+                    : undefined,
+                this.props.segment.valueAxis && this.props.segment.label ? (react_1.default.createElement("div", { style: { paddingTop: 5 } },
+                    T `Shade filler cells: `,
+                    react_1.default.createElement(ColorComponent_1.default, { color: this.props.segment.fillerColor, onChange: (color) => this.update({ fillerColor: color }) }))) : undefined)));
     }
     renderBorders() {
-        return R(ui.FormGroup, {
-            labelMuted: true,
-            label: T `Borders`
-        }, R("div", { key: "before" }, this.props.segmentType === "row" ? T `Top: ` : T `Left: `), R(BorderComponent, {
-            value: this.props.segment.borderBefore,
-            defaultValue: 2,
-            onChange: (value) => this.update({ borderBefore: value })
-        }), R("div", { key: "within" }, T `Within: `), R(BorderComponent, {
-            value: this.props.segment.borderWithin,
-            defaultValue: 1,
-            onChange: (value) => this.update({ borderWithin: value })
-        }), R("div", { key: "after" }, this.props.segmentType === "row" ? T `Bottom: ` : T `Right: `), R(BorderComponent, {
-            value: this.props.segment.borderAfter,
-            defaultValue: 2,
-            onChange: (value) => this.update({ borderAfter: value })
-        }));
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: T `Borders` },
+            react_1.default.createElement("div", { key: "before" }, this.props.segmentType === "row" ? T `Top: ` : T `Left: `),
+            react_1.default.createElement(BorderComponent, { value: this.props.segment.borderBefore, defaultValue: 2, onChange: (value) => this.update({ borderBefore: value }) }),
+            react_1.default.createElement("div", { key: "within" }, T `Within: `),
+            react_1.default.createElement(BorderComponent, { value: this.props.segment.borderWithin, defaultValue: 1, onChange: (value) => this.update({ borderWithin: value }) }),
+            react_1.default.createElement("div", { key: "after" }, this.props.segmentType === "row" ? T `Bottom: ` : T `Right: `),
+            react_1.default.createElement(BorderComponent, { value: this.props.segment.borderAfter, defaultValue: 2, onChange: (value) => this.update({ borderAfter: value }) })));
     }
     renderOrderExpr() {
-        return R(ui.FormGroup, {
-            labelMuted: true,
-            label: [R(ui.Icon, { id: "fa-sort-amount-asc" }), " ", T `Sort`],
-            hint: T `Sorts the display of this ${this.props.segmentType}`
-        }, R(expressions_ui_1.ExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            onChange: this.handleOrderExprChange,
-            table: this.props.table,
-            types: ["enum", "text", "boolean", "date", "datetime", "number"],
-            aggrStatuses: ["aggregate"],
-            value: this.props.segment.orderExpr ?? null
-        }), this.props.segment.orderExpr
-            ? R("div", null, R(ui.Radio, {
-                value: this.props.segment.orderDir || "asc",
-                radioValue: "asc",
-                onChange: this.handleOrderDirChange,
-                inline: true
-            }, T `Ascending`), R(ui.Radio, {
-                value: this.props.segment.orderDir || "asc",
-                radioValue: "desc",
-                onChange: this.handleOrderDirChange,
-                inline: true
-            }, T `Descending`))
-            : undefined);
+        return (react_1.default.createElement(ui.FormGroup, { labelMuted: true, label: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(ui.Icon, { id: "fa-sort-amount-asc" }),
+                " ",
+                T `Sort`), hint: T `Sorts the display of this ${this.props.segmentType}` },
+            react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, onChange: this.handleOrderExprChange, table: this.props.table, types: ["enum", "text", "boolean", "date", "datetime", "number"], aggrStatuses: ["aggregate"], value: this.props.segment.orderExpr ?? null }),
+            this.props.segment.orderExpr ? (react_1.default.createElement("div", null,
+                react_1.default.createElement(ui.Radio, { value: this.props.segment.orderDir || "asc", radioValue: "asc", onChange: this.handleOrderDirChange, inline: true }, T `Ascending`),
+                react_1.default.createElement(ui.Radio, { value: this.props.segment.orderDir || "asc", radioValue: "desc", onChange: this.handleOrderDirChange, inline: true }, T `Descending`))) : undefined));
     }
     render() {
-        return R("div", null, this.renderMode(), this.state.mode ? this.renderLabel() : undefined, this.state.mode === "multiple" ? this.renderValueAxis() : undefined, this.state.mode ? this.renderFilter() : undefined, this.state.mode === "multiple" ? this.renderOrderExpr() : undefined, this.state.mode ? this.renderStyling() : undefined, this.state.mode ? this.renderBorders() : undefined);
+        return (react_1.default.createElement("div", null,
+            this.renderMode(),
+            this.state.mode ? this.renderLabel() : undefined,
+            this.state.mode === "multiple" ? this.renderValueAxis() : undefined,
+            this.state.mode ? this.renderFilter() : undefined,
+            this.state.mode === "multiple" ? this.renderOrderExpr() : undefined,
+            this.state.mode ? this.renderStyling() : undefined,
+            this.state.mode ? this.renderBorders() : undefined));
     }
 }
 exports.default = SegmentDesignerComponent;
@@ -216,6 +164,10 @@ exports.default = SegmentDesignerComponent;
 class BorderComponent extends react_1.default.Component {
     render() {
         const value = this.props.value != null ? this.props.value : this.props.defaultValue;
-        return R("span", null, react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 0, onChange: () => this.props.onChange(0) }, T `None`), react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 1, onChange: () => this.props.onChange(1) }, T `Light`), react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 2, onChange: () => this.props.onChange(2) }, T `Medium`), react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 3, onChange: () => this.props.onChange(3) }, T `Heavy`));
+        return (react_1.default.createElement("span", null,
+            react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 0, onChange: () => this.props.onChange(0) }, T `None`),
+            react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 1, onChange: () => this.props.onChange(1) }, T `Light`),
+            react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 2, onChange: () => this.props.onChange(2) }, T `Medium`),
+            react_1.default.createElement(bootstrap_1.Radio, { inline: true, value: value, radioValue: 3, onChange: () => this.props.onChange(3) }, T `Heavy`)));
     }
 }

package/lib/widgets/charts/table/TableChart.d.ts

@@ -55,4 +55,6 @@ export default class TableChart extends Chart {
     getFilterableTables(design: any, schema: Schema): any[];
     getPlaceholderIcon(): string;
     translateDesign(design: TableChartDesign, translate: (input: string) => string): TableChartDesign;
+    supportsXlsxExport(): boolean;
+    createXlsxWorkbook(design: TableChartDesign, schema: Schema, dataSource: DataSource, data: any, locale: string): any;
 }

package/lib/widgets/charts/table/TableChart.js

@@ -1,11 +1,33 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const uuid_1 = __importDefault(require("uuid"));
 const immer_1 = __importDefault(require("immer"));
 const immer_2 = require("immer");
@@ -16,6 +38,8 @@ const expressions_3 = require("@mwater/expressions");
 const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
 const TableChartViewComponent_1 = __importDefault(require("./TableChartViewComponent"));
 const expressions_4 = require("@mwater/expressions");
+const XLSX = __importStar(require("xlsx-js-style"));
+const color_1 = __importDefault(require("color"));
 /**
  * Table control
  */
@@ -336,5 +360,152 @@ class TableChart extends Chart_1.default {
             }
         });
     }
+    // Override to indicate this chart supports XLSX export
+    supportsXlsxExport() {
+        return true;
+    }
+    // Creates a SheetJS workbook for the chart data
+    createXlsxWorkbook(design, schema, dataSource, data, locale) {
+        const exprUtils = new expressions_2.ExprUtils(schema);
+        const axisBuilder = new AxisBuilder_1.default({ schema });
+        const workbook = XLSX.utils.book_new();
+        // Create array for headers
+        const headers = design.columns.map(column => column.headerText || exprUtils.summarizeExpr(column.textAxis?.expr || null, locale));
+        // Create arrays for data
+        const rows = data.main.map((record) => {
+            return design.columns.map((column, columnIndex) => {
+                const value = record[`c${columnIndex}`];
+                if (value == null) {
+                    return "";
+                }
+                const exprType = exprUtils.getExprType(column.textAxis?.expr);
+                // Handle images as URLs
+                if (exprType === "image" && value) {
+                    return dataSource.getImageUrl(value.id);
+                }
+                if (exprType === "imagelist" && value) {
+                    return value.map((img) => dataSource.getImageUrl(img.id)).join(", ");
+                }
+                // Handle dates properly for Excel
+                if (exprType === "date" && value) {
+                    // Convert date string to JavaScript Date object
+                    const date = new Date(value);
+                    // Return a date that Excel can properly handle
+                    return date;
+                }
+                // Handle datetime properly for Excel
+                if (exprType === "datetime" && value) {
+                    // Convert datetime string to JavaScript Date object
+                    const date = new Date(value);
+                    // Return a date that Excel can properly handle
+                    return date;
+                }
+                return exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, locale);
+            });
+        });
+        // Add summary row if exists
+        if (data.summary) {
+            const summaryRow = design.columns.map((column, columnIndex) => {
+                if (data.summary[`c${columnIndex}`] != null) {
+                    return data.summary[`c${columnIndex}`];
+                }
+                return "";
+            });
+            rows.push(summaryRow);
+        }
+        // Create worksheet from data
+        const worksheet = XLSX.utils.aoa_to_sheet([headers, ...rows]);
+        // Set column widths based on content
+        const colWidths = headers.map((header, colIndex) => {
+            // Start with header width
+            let maxWidth = header.length;
+            // Check data rows
+            rows.forEach((row) => {
+                const cellValue = row[colIndex];
+                if (cellValue) {
+                    maxWidth = Math.max(maxWidth, String(cellValue).length);
+                }
+            });
+            // Add some padding and cap at 50 characters
+            return Math.min(maxWidth + 2, 50);
+        });
+        worksheet['!cols'] = colWidths.map(width => ({ wch: width }));
+        // Apply cell styles and background colors
+        const range = XLSX.utils.decode_range(worksheet['!ref']);
+        for (let rowIndex = 0; rowIndex <= range.e.r; rowIndex++) {
+            for (let colIndex = 0; colIndex <= range.e.c; colIndex++) {
+                const cellAddress = XLSX.utils.encode_cell({ r: rowIndex, c: colIndex });
+                const cell = worksheet[cellAddress];
+                // Skip empty cells
+                if (!cell)
+                    continue;
+                // Initialize style object if needed
+                if (!cell.s)
+                    cell.s = {};
+                // Apply header styles
+                if (rowIndex === 0) {
+                    cell.s = {
+                        ...cell.s,
+                        font: { bold: true },
+                        alignment: { horizontal: "center" },
+                        border: {
+                            bottom: { style: "thin" }
+                        }
+                    };
+                }
+                // Apply background colors for data cells
+                if (rowIndex > 0 && rowIndex <= data.main.length && colIndex < design.columns.length) {
+                    const record = data.main[rowIndex - 1];
+                    const column = design.columns[colIndex];
+                    // Check if this column has a background color axis and the bc property exists
+                    if (column?.backgroundColorAxis && record[`bc${colIndex}`] !== undefined) {
+                        // Use the Color library to handle the color value safely
+                        try {
+                            // Call getValueColor to get the actual color
+                            const axisBuilder = new AxisBuilder_1.default({ schema });
+                            const bgColor = axisBuilder.getValueColor(column.backgroundColorAxis, record[`bc${colIndex}`]);
+                            if (bgColor) {
+                                const color = (0, color_1.default)(bgColor);
+                                const hex = color.hex().substring(1); // Remove #
+                                // Apply the background color
+                                cell.s.fill = {
+                                    patternType: "solid",
+                                    fgColor: { rgb: hex },
+                                    bgColor: { rgb: hex }
+                                };
+                                // Adjust text color based on background lightness
+                                const lightness = color.luminosity();
+                                cell.s.font = {
+                                    ...cell.s.font,
+                                    color: { rgb: lightness < 0.3 ? "CCCCCC" : "000000" }
+                                };
+                            }
+                        }
+                        catch (e) {
+                            // Silently ignore color errors
+                            console.error("Error applying background color", e);
+                        }
+                    }
+                }
+                // Apply summary row styling
+                if (data.summary && rowIndex === rows.length) {
+                    cell.s = {
+                        ...cell.s,
+                        font: { bold: true },
+                        border: {
+                            top: { style: "thin" }
+                        }
+                    };
+                }
+            }
+        }
+        console.log(worksheet);
+        // Add the worksheet to the workbook
+        XLSX.utils.book_append_sheet(workbook, worksheet, "Data");
+        // Convert workbook to blob
+        const workbookBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+        const blob = new Blob([workbookBuffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
+        return blob;
+    }
 }
 exports.default = TableChart;

package/lib/widgets/charts/table/TableChartDesignerComponent.d.ts

@@ -17,25 +17,15 @@ export default class TableChartDesignerComponent extends React.Component<TableCh
     handleColumnChange: (index: any, column: any) => void;
     handleRemoveColumn: (index: any) => void;
     handleAddColumn: () => void;
-    renderTable(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement>;
-    renderTitle(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement>;
+    renderTable(): React.JSX.Element;
+    renderTitle(): React.JSX.Element;
     renderColumn: (column: any, index: any, connectDragSource: any, connectDragPreview: any, connectDropTarget: any) => any;
     handleReorder: (map: any) => void;
-    renderColumns(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | undefined;
-    renderOrderings(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | null;
-    renderFilter(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | null;
-    renderLimit(): React.DetailedReactHTMLElement<{
-        className: string;
-    }, HTMLElement> | null;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    renderColumns(): React.JSX.Element | undefined;
+    renderOrderings(): React.JSX.Element | null;
+    renderFilter(): React.JSX.Element | null;
+    renderLimit(): React.JSX.Element | null;
+    render(): React.JSX.Element;
 }
 export interface TableChartColumnDesignerComponentProps {
     design: TableChartDesign;