namirasoft-site-react 1.5.46 → 1.5.48

package/src/components/NSTableChart.tsx

@@ -1,761 +1,761 @@
-"use client";
-import { IStorageLocal, TimeOperation } 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";
-export type NSTableChartDateGroup = "exact" | "hourly" | "daily" | "weekly" | "monthly" | "yearly";
-
-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 DATE_GROUPS: { value: NSTableChartDateGroup, text: string }[] = [
-    { value: "exact", text: "Exact" },
-    { value: "hourly", text: "Hourly" },
-    { value: "daily", text: "Daily" },
-    { value: "weekly", text: "Weekly" },
-    { value: "monthly", text: "Monthly" },
-    { value: "yearly", text: "Yearly" },
-];
-
-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;
-    dateGroup: NSTableChartDateGroup;
-    rowSource: NSTableChartRowSource;
-    xColumn: string;
-    yColumns: string[];
-    includeUndatedRows: boolean;
-}
-
-interface NSTableChartSettings
-{
-    chartType?: NSTableChartType;
-    barMode?: NSChartBarMode;
-    aggregate?: NSTableChartAggregate;
-    dateGroup?: NSTableChartDateGroup;
-    rowSource?: NSTableChartRowSource;
-    xColumn?: string;
-    yColumns?: string[];
-    includeUndatedRows?: boolean;
-}
-
-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 dateGroup: NSTableChartDateGroup = DATE_GROUPS.some(item => item.value === saved?.dateGroup) ? saved!.dateGroup! : "exact";
-        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]];
-
-        let includeUndatedRows = typeof saved?.includeUndatedRows === "boolean" ? saved.includeUndatedRows : true;
-
-        this.state = {
-            chartType,
-            barMode,
-            aggregate,
-            dateGroup,
-            rowSource,
-            xColumn,
-            yColumns,
-            includeUndatedRows,
-        };
-        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.dateGroup !== this.state.dateGroup ||
-            prevState.rowSource !== this.state.rowSource ||
-            prevState.xColumn !== this.state.xColumn ||
-            prevState.yColumns !== this.state.yColumns ||
-            prevState.includeUndatedRows !== this.state.includeUndatedRows
-        )
-            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, dateGroup, rowSource, xColumn, yColumns, includeUndatedRows } = this.state;
-            this.Storage.set(this.settingsKey(), JSON.stringify({ chartType, barMode, aggregate, dateGroup, rowSource, xColumn, yColumns, includeUndatedRows }));
-        }
-        catch (e) { }
-    }
-
-    private isNumericColumn(column: TableColumnInfo): boolean
-    {
-        return NUMERIC_TYPES.includes((column.type ?? "").toLowerCase());
-    }
-
-    private isDateColumn(column: TableColumnInfo | undefined): boolean
-    {
-        return !!column && /date/.test((column.type ?? "").toLowerCase());
-    }
-
-    private isDateTimeColumn(column: TableColumnInfo | undefined): boolean
-    {
-        return !!column && (column.type ?? "").toLowerCase().includes("datetime");
-    }
-
-    private dateBucket(date: Date, group: NSTableChartDateGroup): Date
-    {
-        switch (group)
-        {
-            case "hourly": return TimeOperation.beginningOfHour(date);
-            case "daily": return TimeOperation.beginningOfDay(date);
-            case "weekly":
-            {
-                let start = TimeOperation.beginningOfDay(date);
-                let offset = (start.getDay() + 6) % 7;
-                return TimeOperation.daysAgo(offset, start);
-            }
-            case "monthly": return TimeOperation.beginningOfMonth(date);
-            case "yearly": return TimeOperation.beginningOfYear(date);
-            default: return date;
-        }
-    }
-
-    private formatBucket(date: Date, group: NSTableChartDateGroup): string
-    {
-        switch (group)
-        {
-            case "hourly": return TimeOperation.format(date, "YYYY/MM/DD HH:00");
-            case "daily": return TimeOperation.format(date, "YYYY/MM/DD");
-            case "weekly":
-            {
-                let { year, week } = this.isoWeek(date);
-                return `${year}-W${String(week).padStart(2, "0")}`;
-            }
-            case "monthly": return TimeOperation.format(date, "YYYY/MM");
-            case "yearly": return TimeOperation.format(date, "YYYY");
-            default: return TimeOperation.format(date, "YYYY/MM/DD HH:mm:ss");
-        }
-    }
-
-    private isoWeek(monday: Date): { year: number, week: number }
-    {
-        let thursday = new Date(monday.getTime());
-        thursday.setDate(thursday.getDate() + 3);
-        let year = thursday.getFullYear();
-        let firstThursday = new Date(year, 0, 4);
-        let firstThursdayOffset = (firstThursday.getDay() + 6) % 7;
-        firstThursday.setDate(firstThursday.getDate() - firstThursdayOffset + 3);
-        let week = 1 + Math.round((thursday.getTime() - firstThursday.getTime()) / (7 * 86400000));
-        return { year, week };
-    }
-
-    private getLabelParts(row: RowType, xCol: TableColumnInfo | undefined): { key: string, display: string } | null
-    {
-        if (this.isDateColumn(xCol))
-        {
-            let raw = (row as any)[xCol!.name];
-            let date = raw !== null && raw !== undefined && raw !== "" ? new Date(raw) : null;
-            let valid = date !== null && !isNaN(date.getTime());
-            if (!valid)
-                return this.state.includeUndatedRows ? { key: "__undated__", display: "(No Date)" } : null;
-            if (this.state.dateGroup !== "exact")
-            {
-                let bucket = this.dateBucket(date!, this.state.dateGroup);
-                return { key: String(bucket.getTime()), display: this.formatBucket(bucket, this.state.dateGroup) };
-            }
-        }
-        return { key: this.labelOf(row, xCol), display: this.formatLabel(row, xCol) };
-    }
-
-    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 keys: string[] = [];
-        let displays: string[] = [];
-        let indexByKey = new Map<string, number>();
-        let stats: { sum: number, count: number, min: number, max: number }[][] = yCols.map(() => []);
-        rows.forEach(row =>
-        {
-            let parts = this.getLabelParts(row, xCol);
-            if (parts === null)
-                return;
-            let { key, display } = parts;
-            let index = indexByKey.get(key);
-            if (index === undefined)
-            {
-                index = keys.length;
-                indexByKey.set(key, index);
-                keys.push(key);
-                displays.push(display);
-                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 = keys.map((_, index) => index);
-        order.sort((a, b) => this.compareLabels(keys[a], keys[b], xCol));
-        return {
-            labels: order.map(index => displays[index]),
-            series: series.map(serie => order.map(index => serie[index])),
-        };
-    }
-
-    private formatLabel(row: RowType, column: TableColumnInfo | undefined): string
-    {
-        if (!column)
-            return "";
-        let value = (row as any)[column.name];
-        if (value === null || value === undefined || value === "")
-            return "";
-        try
-        {
-            let out = (column.formatter as any)?.format(value);
-            if (typeof out === "string")
-                return out;
-        }
-        catch (e)
-        {
-        }
-        return String(value);
-    }
-
-    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 xCol = this.getColumn(xColumn);
-        let yCols = yColumns.map(name => this.getColumn(name)).filter(Boolean) as TableColumnInfo[];
-
-        let rows = this.getActiveRows();
-
-        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 mode: NSChartBarMode = yCols.length > 1 ? this.state.barMode : "grouped";
-            let max = 0;
-            labels.forEach((_, index) =>
-            {
-                if (mode === "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={mode}
-                    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, dateGroup, xColumn, yColumns } = this.state;
-        let numericColumns = this.getNumericColumns();
-        let isSingleSeries = chartType === "doughnut";
-        let xCol = this.getColumn(xColumn);
-        let xColIsDate = this.isDateColumn(xCol);
-        let xColIsDateTime = this.isDateTimeColumn(xCol);
-        let dateGroupOptions = DATE_GROUPS.filter(item => item.value !== "hourly" || xColIsDateTime);
-
-        let labelAxisTitle = chartType === "doughnut" ? "Category" : chartType === "hbar" ? "Label (Y-Axis)" : "Label (X-Axis)";
-        let seriesAxisTitle = chartType === "doughnut" ? "Value" : chartType === "hbar" ? "Series (X-Axis)" : "Series (Y-Axis)";
-
-        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=""
-                                    hideHeader={true}
-                                    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: "0" } }}
-                                />
-                            }
-
-                            <NSBoxCombo
-                                title={labelAxisTitle}
-                                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: []
-                                }}
-                            />
-
-                            {
-                                xColIsDate &&
-                                <NSBoxOptions
-                                    key="date-group"
-                                    title=""
-                                    hideHeader={true}
-                                    multiple={false}
-                                    required={false}
-                                    defaultValue={dateGroup}
-                                    options={dateGroupOptions.map(item => ({ value: item.value, title: item.text }))}
-                                    onChanged={(box) =>
-                                    {
-                                        let value = box.getValue(false) as string | null;
-                                        if (value)
-                                            this.setState({ dateGroup: value as NSTableChartDateGroup });
-                                    }}
-                                    menu={{
-                                        builtin: {
-                                            copy: { enabled: false, getValue: () => "" },
-                                            delete: { enabled: false, onDelete: () => { } },
-                                        },
-                                        items: []
-                                    }}
-                                    input={{ style: { minHeight: "auto", border: "none", padding: "0" } }}
-                                />
-                            }
-
-                            <NSBoxCombo
-                                key={isSingleSeries ? "y-single" : "y-multi"}
-                                title={seriesAxisTitle}
-                                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 });
-                                }}
-                            />
-
-                            {
-                                xColIsDate &&
-                                <NSBoxBoolean
-                                    key="include-undated"
-                                    title="Include rows without a date"
-                                    required={false}
-                                    defaultValue={this.state.includeUndatedRows}
-                                    hideHeader={true}
-                                    onChanged={(box) =>
-                                    {
-                                        let next = box.getValue(false) === true;
-                                        if (next !== this.state.includeUndatedRows)
-                                            this.setState({ includeUndatedRows: next });
-                                    }}
-                                />
-                            }
-
-                            <NSButtonBlue
-                                title="Download PNG"
-                                onClick={{
-                                    action: (onFinished) =>
-                                    {
-                                        this.download();
-                                        onFinished();
-                                    },
-                                    showLoading: false,
-                                }}
-                                style={{ minHeight: 48, marginTop: "auto" }}
-                            />
-                        </NSColumn>
-                    </div>
-                </div>
-            </div>
-        );
-    }
+"use client";
+import { IStorageLocal, TimeOperation } 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";
+export type NSTableChartDateGroup = "exact" | "hourly" | "daily" | "weekly" | "monthly" | "yearly";
+
+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 DATE_GROUPS: { value: NSTableChartDateGroup, text: string }[] = [
+    { value: "exact", text: "Exact" },
+    { value: "hourly", text: "Hourly" },
+    { value: "daily", text: "Daily" },
+    { value: "weekly", text: "Weekly" },
+    { value: "monthly", text: "Monthly" },
+    { value: "yearly", text: "Yearly" },
+];
+
+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;
+    dateGroup: NSTableChartDateGroup;
+    rowSource: NSTableChartRowSource;
+    xColumn: string;
+    yColumns: string[];
+    includeUndatedRows: boolean;
+}
+
+interface NSTableChartSettings
+{
+    chartType?: NSTableChartType;
+    barMode?: NSChartBarMode;
+    aggregate?: NSTableChartAggregate;
+    dateGroup?: NSTableChartDateGroup;
+    rowSource?: NSTableChartRowSource;
+    xColumn?: string;
+    yColumns?: string[];
+    includeUndatedRows?: boolean;
+}
+
+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 dateGroup: NSTableChartDateGroup = DATE_GROUPS.some(item => item.value === saved?.dateGroup) ? saved!.dateGroup! : "exact";
+        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]];
+
+        let includeUndatedRows = typeof saved?.includeUndatedRows === "boolean" ? saved.includeUndatedRows : true;
+
+        this.state = {
+            chartType,
+            barMode,
+            aggregate,
+            dateGroup,
+            rowSource,
+            xColumn,
+            yColumns,
+            includeUndatedRows,
+        };
+        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.dateGroup !== this.state.dateGroup ||
+            prevState.rowSource !== this.state.rowSource ||
+            prevState.xColumn !== this.state.xColumn ||
+            prevState.yColumns !== this.state.yColumns ||
+            prevState.includeUndatedRows !== this.state.includeUndatedRows
+        )
+            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, dateGroup, rowSource, xColumn, yColumns, includeUndatedRows } = this.state;
+            this.Storage.set(this.settingsKey(), JSON.stringify({ chartType, barMode, aggregate, dateGroup, rowSource, xColumn, yColumns, includeUndatedRows }));
+        }
+        catch (e) { }
+    }
+
+    private isNumericColumn(column: TableColumnInfo): boolean
+    {
+        return NUMERIC_TYPES.includes((column.type ?? "").toLowerCase());
+    }
+
+    private isDateColumn(column: TableColumnInfo | undefined): boolean
+    {
+        return !!column && /date/.test((column.type ?? "").toLowerCase());
+    }
+
+    private isDateTimeColumn(column: TableColumnInfo | undefined): boolean
+    {
+        return !!column && (column.type ?? "").toLowerCase().includes("datetime");
+    }
+
+    private dateBucket(date: Date, group: NSTableChartDateGroup): Date
+    {
+        switch (group)
+        {
+            case "hourly": return TimeOperation.beginningOfHour(date);
+            case "daily": return TimeOperation.beginningOfDay(date);
+            case "weekly":
+            {
+                let start = TimeOperation.beginningOfDay(date);
+                let offset = (start.getDay() + 6) % 7;
+                return TimeOperation.daysAgo(offset, start);
+            }
+            case "monthly": return TimeOperation.beginningOfMonth(date);
+            case "yearly": return TimeOperation.beginningOfYear(date);
+            default: return date;
+        }
+    }
+
+    private formatBucket(date: Date, group: NSTableChartDateGroup): string
+    {
+        switch (group)
+        {
+            case "hourly": return TimeOperation.format(date, "YYYY/MM/DD HH:00");
+            case "daily": return TimeOperation.format(date, "YYYY/MM/DD");
+            case "weekly":
+            {
+                let { year, week } = this.isoWeek(date);
+                return `${year}-W${String(week).padStart(2, "0")}`;
+            }
+            case "monthly": return TimeOperation.format(date, "YYYY/MM");
+            case "yearly": return TimeOperation.format(date, "YYYY");
+            default: return TimeOperation.format(date, "YYYY/MM/DD HH:mm:ss");
+        }
+    }
+
+    private isoWeek(monday: Date): { year: number, week: number }
+    {
+        let thursday = new Date(monday.getTime());
+        thursday.setDate(thursday.getDate() + 3);
+        let year = thursday.getFullYear();
+        let firstThursday = new Date(year, 0, 4);
+        let firstThursdayOffset = (firstThursday.getDay() + 6) % 7;
+        firstThursday.setDate(firstThursday.getDate() - firstThursdayOffset + 3);
+        let week = 1 + Math.round((thursday.getTime() - firstThursday.getTime()) / (7 * 86400000));
+        return { year, week };
+    }
+
+    private getLabelParts(row: RowType, xCol: TableColumnInfo | undefined): { key: string, display: string } | null
+    {
+        if (this.isDateColumn(xCol))
+        {
+            let raw = (row as any)[xCol!.name];
+            let date = raw !== null && raw !== undefined && raw !== "" ? new Date(raw) : null;
+            let valid = date !== null && !isNaN(date.getTime());
+            if (!valid)
+                return this.state.includeUndatedRows ? { key: "__undated__", display: "(No Date)" } : null;
+            if (this.state.dateGroup !== "exact")
+            {
+                let bucket = this.dateBucket(date!, this.state.dateGroup);
+                return { key: String(bucket.getTime()), display: this.formatBucket(bucket, this.state.dateGroup) };
+            }
+        }
+        return { key: this.labelOf(row, xCol), display: this.formatLabel(row, xCol) };
+    }
+
+    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 keys: string[] = [];
+        let displays: string[] = [];
+        let indexByKey = new Map<string, number>();
+        let stats: { sum: number, count: number, min: number, max: number }[][] = yCols.map(() => []);
+        rows.forEach(row =>
+        {
+            let parts = this.getLabelParts(row, xCol);
+            if (parts === null)
+                return;
+            let { key, display } = parts;
+            let index = indexByKey.get(key);
+            if (index === undefined)
+            {
+                index = keys.length;
+                indexByKey.set(key, index);
+                keys.push(key);
+                displays.push(display);
+                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 = keys.map((_, index) => index);
+        order.sort((a, b) => this.compareLabels(keys[a], keys[b], xCol));
+        return {
+            labels: order.map(index => displays[index]),
+            series: series.map(serie => order.map(index => serie[index])),
+        };
+    }
+
+    private formatLabel(row: RowType, column: TableColumnInfo | undefined): string
+    {
+        if (!column)
+            return "";
+        let value = (row as any)[column.name];
+        if (value === null || value === undefined || value === "")
+            return "";
+        try
+        {
+            let out = (column.formatter as any)?.format(value);
+            if (typeof out === "string")
+                return out;
+        }
+        catch (e)
+        {
+        }
+        return String(value);
+    }
+
+    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 xCol = this.getColumn(xColumn);
+        let yCols = yColumns.map(name => this.getColumn(name)).filter(Boolean) as TableColumnInfo[];
+
+        let rows = this.getActiveRows();
+
+        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 mode: NSChartBarMode = yCols.length > 1 ? this.state.barMode : "grouped";
+            let max = 0;
+            labels.forEach((_, index) =>
+            {
+                if (mode === "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={mode}
+                    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, dateGroup, xColumn, yColumns } = this.state;
+        let numericColumns = this.getNumericColumns();
+        let isSingleSeries = chartType === "doughnut";
+        let xCol = this.getColumn(xColumn);
+        let xColIsDate = this.isDateColumn(xCol);
+        let xColIsDateTime = this.isDateTimeColumn(xCol);
+        let dateGroupOptions = DATE_GROUPS.filter(item => item.value !== "hourly" || xColIsDateTime);
+
+        let labelAxisTitle = chartType === "doughnut" ? "Category" : chartType === "hbar" ? "Label (Y-Axis)" : "Label (X-Axis)";
+        let seriesAxisTitle = chartType === "doughnut" ? "Value" : chartType === "hbar" ? "Series (X-Axis)" : "Series (Y-Axis)";
+
+        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=""
+                                    hideHeader={true}
+                                    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: "0" } }}
+                                />
+                            }
+
+                            <NSBoxCombo
+                                title={labelAxisTitle}
+                                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: []
+                                }}
+                            />
+
+                            {
+                                xColIsDate &&
+                                <NSBoxOptions
+                                    key="date-group"
+                                    title=""
+                                    hideHeader={true}
+                                    multiple={false}
+                                    required={false}
+                                    defaultValue={dateGroup}
+                                    options={dateGroupOptions.map(item => ({ value: item.value, title: item.text }))}
+                                    onChanged={(box) =>
+                                    {
+                                        let value = box.getValue(false) as string | null;
+                                        if (value)
+                                            this.setState({ dateGroup: value as NSTableChartDateGroup });
+                                    }}
+                                    menu={{
+                                        builtin: {
+                                            copy: { enabled: false, getValue: () => "" },
+                                            delete: { enabled: false, onDelete: () => { } },
+                                        },
+                                        items: []
+                                    }}
+                                    input={{ style: { minHeight: "auto", border: "none", padding: "0" } }}
+                                />
+                            }
+
+                            <NSBoxCombo
+                                key={isSingleSeries ? "y-single" : "y-multi"}
+                                title={seriesAxisTitle}
+                                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 });
+                                }}
+                            />
+
+                            {
+                                xColIsDate &&
+                                <NSBoxBoolean
+                                    key="include-undated"
+                                    title="Include rows without a date"
+                                    required={false}
+                                    defaultValue={this.state.includeUndatedRows}
+                                    hideHeader={true}
+                                    onChanged={(box) =>
+                                    {
+                                        let next = box.getValue(false) === true;
+                                        if (next !== this.state.includeUndatedRows)
+                                            this.setState({ includeUndatedRows: next });
+                                    }}
+                                />
+                            }
+
+                            <NSButtonBlue
+                                title="Download PNG"
+                                onClick={{
+                                    action: (onFinished) =>
+                                    {
+                                        this.download();
+                                        onFinished();
+                                    },
+                                    showLoading: false,
+                                }}
+                                style={{ minHeight: 48, marginTop: "auto" }}
+                            />
+                        </NSColumn>
+                    </div>
+                </div>
+            </div>
+        );
+    }
 }