namirasoft-site-react 1.4.560 → 1.4.562

package/src/components/NSTableChart.module.css

@@ -0,0 +1,120 @@
+.ns_chart_overlay {
+	position: fixed;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	z-index: 950;
+	background-color: #ffffff;
+	display: flex;
+}
+
+.ns_chart_modal {
+	background-color: #ffffff;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	color: #141b5c;
+}
+
+.ns_chart_header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 12px 16px;
+	border-bottom: 1px solid #e6eef5;
+}
+
+.ns_chart_title {
+	font-size: 16px;
+	font-weight: 700;
+}
+
+.ns_chart_close {
+	cursor: pointer;
+}
+
+.ns_chart_body {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+}
+
+.ns_chart_canvas {
+	position: relative;
+	flex: none;
+	width: 100%;
+	padding: 16px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+}
+
+.ns_chart_message {
+	color: #6b73a8;
+	font-size: 16px;
+	text-align: center;
+}
+
+.ns_chart_panel {
+	width: 100%;
+	border-top: 1px solid #e6eef5;
+	padding: 16px;
+	align-items: center;
+	flex-wrap: nowrap;
+}
+
+.ns_chart_field {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.ns_chart_label {
+	font-size: 13px;
+	font-weight: 700;
+	color: #141b5c;
+}
+
+.ns_chart_hint {
+	font-size: 12px;
+	color: #8a90bb;
+}
+
+@media only screen and (min-width: 992px) {
+	.ns_chart_header {
+		padding: 16px 20px;
+	}
+
+	.ns_chart_title {
+		font-size: 18px;
+	}
+
+	.ns_chart_body {
+		flex-direction: row;
+		overflow: hidden;
+	}
+
+	.ns_chart_canvas {
+		flex: 1;
+		min-width: 0;
+		min-height: 0;
+		padding: 48px;
+	}
+
+	.ns_chart_panel {
+		flex: 0 0 400px;
+		width: 400px;
+		border-top: none;
+		border-left: 1px solid #e6eef5;
+		padding: 20px;
+		align-items: center;
+		min-height: 0;
+		overflow-y: auto;
+	}
+}

package/src/components/NSTableChart.tsx

@@ -0,0 +1,588 @@
+"use client";
+import { IStorageLocal } from "namirasoft-core";
+import { Component, createRef } from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { NSBoxBoolean } from "./NSBoxBoolean";
+import { NSBoxCombo } from "./NSBoxCombo";
+import { NSBoxOptions } from "./NSBoxOptions";
+import { NSButton } from "./NSButton";
+import { NSButtonBlue } from "./NSButtonBlue";
+import { NSChartBar, NSChartBarMode } from "./NSChartBar";
+import { NSChartDoughnut } from "./NSChartDoughnut";
+import { NSChartLine } from "./NSChartLine";
+import { NSColumn } from "./NSColumn";
+import { NSNoData } from "./NSNoData";
+import { TableColumnInfo } from "./NSTable";
+import Styles from "./NSTableChart.module.css";
+
+export type NSTableChartType = "bar" | "hbar" | "line" | "area" | "doughnut";
+export type NSTableChartRowSource = "page" | "selected";
+export type NSTableChartAggregate = "sum" | "average" | "count" | "min" | "max";
+
+const CHART_TYPES: { type: NSTableChartType, text: string }[] = [
+    { type: "bar", text: "Bar" },
+    { type: "hbar", text: "Horizontal Bar" },
+    { type: "line", text: "Line" },
+    { type: "area", text: "Area" },
+    { type: "doughnut", text: "Doughnut" },
+];
+
+const BAR_MODES: { mode: NSChartBarMode, text: string }[] = [
+    { mode: "grouped", text: "Grouped" },
+    { mode: "stacked", text: "Stacked" },
+    { mode: "percent", text: "Percent" },
+];
+
+const AGGREGATES: { value: NSTableChartAggregate, text: string }[] = [
+    { value: "sum", text: "Sum" },
+    { value: "average", text: "Average" },
+    { value: "count", text: "Count" },
+    { value: "min", text: "Min" },
+    { value: "max", text: "Max" },
+];
+
+const NUMERIC_TYPES = ["number", "integer", "int", "float", "double", "decimal", "long", "money", "percent", "percentage", "bytes", "duration"];
+
+export interface NSTableChartProps<RowType> extends IBaseComponentProps
+{
+    name: string;
+    columns: TableColumnInfo[];
+    rows: RowType[];
+    selectedRows: RowType[];
+    onClose: () => void;
+}
+
+interface NSTableChartState
+{
+    chartType: NSTableChartType;
+    barMode: NSChartBarMode;
+    aggregate: NSTableChartAggregate;
+    rowSource: NSTableChartRowSource;
+    xColumn: string;
+    yColumns: string[];
+}
+
+interface NSTableChartSettings
+{
+    chartType?: NSTableChartType;
+    barMode?: NSChartBarMode;
+    aggregate?: NSTableChartAggregate;
+    rowSource?: NSTableChartRowSource;
+    xColumn?: string;
+    yColumns?: string[];
+}
+
+export class NSTableChart<RowType> extends Component<NSTableChartProps<RowType>, NSTableChartState>
+{
+    private chartContainer = createRef<HTMLDivElement>();
+    private previousBodyOverflow = "";
+    private Storage = new IStorageLocal();
+
+    constructor(props: NSTableChartProps<RowType>)
+    {
+        super(props);
+        let numeric = this.getNumericColumns();
+        let nonNumeric = props.columns.filter(column => !this.isNumericColumn(column));
+        let defaultX = (nonNumeric[0] ?? props.columns[0])?.name ?? "";
+        let defaultY = numeric.length > 0 ? [numeric[0].name] : [];
+
+        let saved = this.loadSettings();
+        let chartType: NSTableChartType = CHART_TYPES.some(item => item.type === saved?.chartType) ? saved!.chartType! : "bar";
+        let barMode: NSChartBarMode = BAR_MODES.some(item => item.mode === saved?.barMode) ? saved!.barMode! : "grouped";
+        let aggregate: NSTableChartAggregate = AGGREGATES.some(item => item.value === saved?.aggregate) ? saved!.aggregate! : "sum";
+        let rowSource: NSTableChartRowSource = saved?.rowSource === "selected" ? "selected" : "page";
+        let xColumn = (saved?.xColumn && this.getColumn(saved.xColumn)) ? saved.xColumn : defaultX;
+        let savedY = (saved?.yColumns ?? []).filter((name: string) => numeric.some(column => column.name === name));
+        let yColumns = savedY.length > 0 ? savedY : defaultY;
+        if (chartType === "doughnut" && yColumns.length > 1)
+            yColumns = [yColumns[0]];
+
+        this.state = {
+            chartType,
+            barMode,
+            aggregate,
+            rowSource,
+            xColumn,
+            yColumns,
+        };
+        this.download = this.download.bind(this);
+    }
+
+    override componentDidMount()
+    {
+        this.previousBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+    }
+
+    override componentWillUnmount()
+    {
+        document.body.style.overflow = this.previousBodyOverflow;
+    }
+
+    override componentDidUpdate(_prevProps: NSTableChartProps<RowType>, prevState: NSTableChartState)
+    {
+        if (
+            prevState.chartType !== this.state.chartType ||
+            prevState.barMode !== this.state.barMode ||
+            prevState.aggregate !== this.state.aggregate ||
+            prevState.rowSource !== this.state.rowSource ||
+            prevState.xColumn !== this.state.xColumn ||
+            prevState.yColumns !== this.state.yColumns
+        )
+            this.saveSettings();
+    }
+
+    private settingsKey(): string
+    {
+        return `ns_table_chart_${this.props.name}`;
+    }
+
+    private loadSettings(): NSTableChartSettings | null
+    {
+        try
+        {
+            let raw = this.Storage.get(this.settingsKey(), "");
+            return raw ? JSON.parse(raw) as NSTableChartSettings : null;
+        }
+        catch (e)
+        {
+            return null;
+        }
+    }
+
+    private saveSettings(): void
+    {
+        try
+        {
+            let { chartType, barMode, aggregate, rowSource, xColumn, yColumns } = this.state;
+            this.Storage.set(this.settingsKey(), JSON.stringify({ chartType, barMode, aggregate, rowSource, xColumn, yColumns }));
+        }
+        catch (e) { }
+    }
+
+    private isNumericColumn(column: TableColumnInfo): boolean
+    {
+        return NUMERIC_TYPES.includes((column.type ?? "").toLowerCase());
+    }
+
+    private getNumericColumns(): TableColumnInfo[]
+    {
+        return this.props.columns.filter(column => this.isNumericColumn(column));
+    }
+
+    private getColumn(name: string): TableColumnInfo | undefined
+    {
+        return this.props.columns.find(column => column.name === name);
+    }
+
+    private getTableTitle(): string
+    {
+        return this.props.columns[0]?.table?.text ?? this.props.name;
+    }
+
+    private getActiveRows(): RowType[]
+    {
+        return this.state.rowSource === "selected" ? this.props.selectedRows : this.props.rows;
+    }
+
+    private toNumber(value: any): number
+    {
+        let n = Number(value);
+        return isFinite(n) ? n : 0;
+    }
+
+    private labelOf(row: RowType, column: TableColumnInfo | undefined): string
+    {
+        if (!column)
+            return "";
+        let value = (row as any)[column.name];
+        if (value === null || value === undefined)
+            return "";
+        return String(value);
+    }
+
+    private aggregate(rows: RowType[], xCol: TableColumnInfo | undefined, yCols: TableColumnInfo[]): { labels: string[], series: number[][] }
+    {
+        let labels: string[] = [];
+        let indexByLabel = new Map<string, number>();
+        let stats: { sum: number, count: number, min: number, max: number }[][] = yCols.map(() => []);
+        rows.forEach(row =>
+        {
+            let label = this.labelOf(row, xCol);
+            let index = indexByLabel.get(label);
+            if (index === undefined)
+            {
+                index = labels.length;
+                indexByLabel.set(label, index);
+                labels.push(label);
+                stats.forEach(serie => serie[index as number] = { sum: 0, count: 0, min: Infinity, max: -Infinity });
+            }
+            yCols.forEach((column, s) =>
+            {
+                let raw = (row as any)[column.name];
+                if (raw === null || raw === undefined || raw === "")
+                    return;
+                let value = this.toNumber(raw);
+                let cell = stats[s][index as number];
+                cell.sum += value;
+                cell.count += 1;
+                cell.min = Math.min(cell.min, value);
+                cell.max = Math.max(cell.max, value);
+            });
+        });
+
+        let series = stats.map(serie => serie.map(cell => this.applyAggregate(cell)));
+
+        let order = labels.map((_, index) => index);
+        order.sort((a, b) => this.compareLabels(labels[a], labels[b], xCol));
+        return {
+            labels: order.map(index => labels[index]),
+            series: series.map(serie => order.map(index => serie[index])),
+        };
+    }
+
+    private applyAggregate(cell: { sum: number, count: number, min: number, max: number }): number
+    {
+        switch (this.state.aggregate)
+        {
+            case "sum":
+                return cell.sum;
+            case "count":
+                return cell.count;
+            case "average":
+                return cell.count ? cell.sum / cell.count : 0;
+            case "min":
+                return cell.count ? cell.min : 0;
+            case "max":
+                return cell.count ? cell.max : 0;
+            default:
+                return cell.sum;
+        }
+    }
+
+    private formatValueFor(yCols: TableColumnInfo[]): (value: number) => string
+    {
+        let aggregate = this.state.aggregate;
+        let formatter = yCols[0]?.formatter;
+        return (value: number) =>
+        {
+            if (aggregate === "count")
+                return Math.round(value).toLocaleString();
+            try
+            {
+                let out = (formatter as any)?.format(value);
+                if (typeof out === "string")
+                    return out;
+            }
+            catch (e) { }
+            return value.toLocaleString();
+        };
+    }
+
+    private compareLabels(a: string, b: string, xCol: TableColumnInfo | undefined): number
+    {
+        if (xCol && this.isNumericColumn(xCol))
+            return this.toNumber(a) - this.toNumber(b);
+        if (xCol && /(date|time)/.test((xCol.type ?? "").toLowerCase()))
+        {
+            let da = Date.parse(a);
+            let db = Date.parse(b);
+            if (!isNaN(da) && !isNaN(db))
+                return da - db;
+        }
+        return a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" });
+    }
+
+    private download()
+    {
+        let container = this.chartContainer.current;
+        if (!container)
+            return;
+        let canvas = container.querySelector("canvas");
+        if (!canvas)
+            return;
+        let link = document.createElement("a");
+        link.href = canvas.toDataURL("image/png");
+        link.download = this.props.name + "_chart.png";
+        link.click();
+    }
+
+    private renderChart()
+    {
+        let { chartType, xColumn, yColumns } = this.state;
+        let rows = this.getActiveRows();
+
+        let xCol = this.getColumn(xColumn);
+        let yCols = yColumns.map(name => this.getColumn(name)).filter(Boolean) as TableColumnInfo[];
+
+        if (rows.length === 0)
+            return <NSNoData lable={this.state.rowSource === "selected" ? "No selected rows" : "No Data"} />;
+        if (yCols.length === 0)
+            return <div className={Styles.ns_chart_message}>Select at least one numeric series for the Y-axis.</div>;
+
+        let { labels, series } = this.aggregate(rows, xCol, yCols);
+
+        let dataset = yCols.map((column, s) => ({ label: column.text, data: series[s] }));
+        let formatValue = this.formatValueFor(yCols);
+
+        if (chartType === "bar" || chartType === "hbar")
+        {
+            let max = 0;
+            labels.forEach((_, index) =>
+            {
+                if (this.state.barMode === "stacked")
+                {
+                    let sum = 0;
+                    dataset.forEach(item => sum += item.data[index] ?? 0);
+                    max = Math.max(max, sum);
+                }
+                else
+                    dataset.forEach(item => max = Math.max(max, item.data[index] ?? 0));
+            });
+            max = max <= 0 ? 1 : Math.ceil(max * 1.1);
+            return (
+                <NSChartBar
+                    labels={labels}
+                    dataset={dataset}
+                    range={{ min: 0, max }}
+                    mode={this.state.barMode}
+                    horizontal={chartType === "hbar"}
+                    xTitle={xCol?.text}
+                    formatValue={formatValue}
+                    yGrid
+                    style={{ width: "100%" }}
+                />
+            );
+        }
+
+        if (chartType === "line" || chartType === "area")
+        {
+            let max = 0;
+            dataset.forEach(item => item.data.forEach(value => max = Math.max(max, value)));
+            max = max <= 0 ? 1 : Math.ceil(max * 1.1);
+            return (
+                <NSChartLine
+                    labels={labels}
+                    dataset={dataset}
+                    range={{ min: 0, max }}
+                    area={chartType === "area"}
+                    xTitle={xCol?.text}
+                    formatValue={formatValue}
+                    yGrid
+                    style={{ width: "100%" }}
+                />
+            );
+        }
+
+        let datas = series[0];
+        
+        return (
+            <NSChartDoughnut
+                title={yCols[0]?.text ?? ""}
+                labels={labels}
+                datas={datas}
+                labelTitle={xCol?.text}
+                valueTitle={yCols[0]?.text}
+                formatValue={formatValue}
+                style={{ width: "100%", height: "100%", display: "flex", justifyContent: "center" }}
+            />
+        );
+    }
+
+    override render()
+    {
+        let { chartType, barMode, xColumn, yColumns } = this.state;
+        let numericColumns = this.getNumericColumns();
+        let isSingleSeries = chartType === "doughnut";
+
+        return (
+            <div
+                id={this.props.id}
+                className={[Styles.ns_chart_overlay, ...(this.props.classList ?? [])].join(" ")}
+                style={this.props.style}
+            >
+                <div className={Styles.ns_chart_modal}>
+                    <div className={Styles.ns_chart_header}>
+                        <span className={Styles.ns_chart_title}>
+                            Chart{this.getTableTitle() ? ` - ${this.getTableTitle()}` : ""}
+                        </span>
+                        <NSButton
+                            icon={{ src: "https://static.namirasoft.com/image/concept/close/blue.svg", alt: "close" }}
+                            onClick={{
+                                action: this.props.onClose,
+                                showLoading: false
+                            }}
+                            style={{ width: 24, height: 24, boxShadow: "none" }}
+                        />
+                    </div>
+                    <div className={Styles.ns_chart_body}>
+                        <div className={Styles.ns_chart_canvas} ref={this.chartContainer}>
+                            {this.renderChart()}
+                        </div>
+                        <NSColumn classList={[Styles.ns_chart_panel]}>
+                            <NSBoxCombo
+                                title="Chart Type"
+                                required={false}
+                                multiple={false}
+                                searchable={false}
+                                clearable={false}
+                                reloadable={false}
+                                defaultValue={chartType}
+                                getOptions={() => CHART_TYPES.map(item => ({ value: item.type, title: item.text }))}
+                                onChanged={(box) =>
+                                {
+                                    let value = box.getValue(false) as string | null;
+                                    if (!value)
+                                        return;
+                                    let nextType = value as NSTableChartType;
+                                    let nextY = nextType === "doughnut" && yColumns.length > 1
+                                        ? [yColumns[0]]
+                                        : yColumns;
+                                    this.setState({ chartType: nextType, yColumns: nextY });
+                                }}
+                                menu={{
+                                    builtin: {
+                                        copy: { enabled: false, getValue: () => "" },
+                                        delete: { enabled: false, onDelete: () => { } },
+                                    },
+                                    items: []
+                                }}
+                            />
+
+                            {
+                                (chartType === "bar" || chartType === "hbar") && yColumns.length > 1 &&
+                                <NSBoxOptions
+                                    key="bar-mode"
+                                    title="Bar Mode"
+                                    multiple={false}
+                                    required={false}
+                                    defaultValue={barMode}
+                                    options={BAR_MODES.map(item => ({ value: item.mode, title: item.text }))}
+                                    onChanged={(box) =>
+                                    {
+                                        let value = box.getValue(false) as string | null;
+                                        if (value)
+                                            this.setState({ barMode: value as NSChartBarMode });
+                                    }}
+                                    menu={{
+                                        builtin: {
+                                            copy: { enabled: false, getValue: () => "" },
+                                            delete: { enabled: false, onDelete: () => { } },
+                                        },
+                                        items: []
+                                    }}
+                                    input={{ style: { minHeight: "auto", border: "none", padding: "8px 0 0" } }}
+                                />
+                            }
+
+                            <NSBoxCombo
+                                title="Label (X-Axis)"
+                                multiple={false}
+                                required={false}
+                                reloadable={false}
+                                clearable={false}
+                                defaultValue={xColumn}
+                                getOptions={() => this.props.columns.map(column => ({ value: column.name, title: column.text }))}
+                                onChanged={(box) =>
+                                {
+                                    let value = box.getValue(false) as string | null;
+                                    if (value)
+                                        this.setState({ xColumn: value });
+                                }}
+                                menu={{
+                                    builtin: {
+                                        copy: { enabled: false, getValue: () => "" },
+                                        delete: { enabled: false, onDelete: () => { } },
+                                    },
+                                    items: []
+                                }}
+                            />
+
+                            <NSBoxCombo
+                                key={isSingleSeries ? "y-single" : "y-multi"}
+                                title={"Series (Y-Axis)"}
+                                multiple={!isSingleSeries}
+                                required={false}
+                                clearable={false}
+                                reloadable={false}
+                                defaultValue={isSingleSeries ? yColumns[0] : yColumns}
+                                getOptions={() => numericColumns.map(column => ({ value: column.name, title: column.text }))}
+                                onChanged={(box) =>
+                                {
+                                    let value = box.getValue(false);
+                                    let next = Array.isArray(value) ? value : (value ? [value] : []);
+                                    this.setState({ yColumns: next });
+                                }}
+                                menu={{
+                                    builtin: {
+                                        copy: { enabled: false, getValue: () => "" },
+                                        delete: { enabled: false, onDelete: () => { } },
+                                    },
+                                    items: []
+                                }}
+                            />
+
+                            <NSBoxOptions
+                                title="Aggregate"
+                                multiple={false}
+                                required={false}
+                                defaultValue={this.state.aggregate}
+                                options={AGGREGATES.map(item => ({ value: item.value, title: item.text }))}
+                                onChanged={(box) =>
+                                {
+                                    let value = box.getValue(false) as string | null;
+                                    if (value)
+                                        this.setState({ aggregate: value as NSTableChartAggregate });
+                                }}
+                                menu={{
+                                    builtin: {
+                                        copy: { enabled: false, getValue: () => "" },
+                                        delete: { enabled: false, onDelete: () => { } },
+                                    },
+                                    items: []
+                                }}
+                                input={{ style: { border: "none", padding: "8px 0 0" } }}
+                            />
+
+                            {
+                                numericColumns.length === 0 &&
+                                <div className={Styles.ns_chart_hint}>No numeric columns available.</div>
+                            }
+
+                            {
+                                isSingleSeries &&
+                                <div className={Styles.ns_chart_hint}>Doughnut charts use a single series.</div>
+                            }
+
+                            <NSBoxBoolean
+                                title="Only selected rows "
+                                required={false}
+                                defaultValue={false}
+                                hideHeader={true}
+                                onChanged={(box) =>
+                                {
+                                    let nextSource: NSTableChartRowSource = box.getValue(false) === true ? "selected" : "page";
+                                    if (nextSource !== this.state.rowSource)
+                                        this.setState({ rowSource: nextSource });
+                                }}
+                            />
+
+                            <NSButtonBlue
+                                title="Download PNG"
+                                onClick={{
+                                    action: (onFinished) =>
+                                    {
+                                        this.download();
+                                        onFinished();
+                                    },
+                                    showLoading: false,
+                                }}
+                                style={{ minHeight: 48, marginTop: "auto" }}
+                            />
+                        </NSColumn>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}