namirasoft-site-react 1.4.560 → 1.4.561

package/src/components/NSChartBar.tsx

@@ -0,0 +1,135 @@
+import { Bar } from 'react-chartjs-2';
+import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ChartOptions, ChartData } from 'chart.js';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { ColorOperation } from '../ColorOperation';
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+
+export type NSChartBarMode = "grouped" | "stacked" | "percent";
+
+const toPercentDatasets = (dataset: DataSetItem[]): DataSetItem[] =>
+{
+    let totals: number[] = [];
+    dataset.forEach(item => item.data.forEach((value, index) => totals[index] = (totals[index] ?? 0) + (value || 0)));
+    return dataset.map(item => ({
+        ...item,
+        data: item.data.map((value, index) => totals[index] ? (value / totals[index]) * 100 : 0),
+    }));
+};
+
+const prepareDatasets = (dataset: DataSetItem[], mode: NSChartBarMode) =>
+{
+    let stacked = mode === "stacked" || mode === "percent";
+    let source = mode === "percent" ? toPercentDatasets(dataset) : dataset;
+    return source.map((item, index) => ({
+        label: item.label,
+        data: item.data,
+        backgroundColor: item.color ?? ColorOperation.at(index),
+        stack: stacked ? "stack" : `stack-${index}`,
+    }));
+};
+
+export interface DataSetItem
+{
+    label: string;
+    color?: string;
+    data: number[]
+};
+
+
+export interface NSChartBarProps extends IBaseComponentProps
+{
+    labels: string[];
+    dataset: DataSetItem[];
+    range: {
+        min: number,
+        max: number,
+    }
+    xTitle?: string;
+    mode?: NSChartBarMode;
+    horizontal?: boolean;
+    yGrid?: boolean;
+    height?: number;
+    width?: number;
+    formatValue?: (value: number) => string;
+}
+
+export function NSChartBar(props: NSChartBarProps)
+{
+    let mode: NSChartBarMode = props.mode ?? "grouped";
+    let stacked = mode === "stacked" || mode === "percent";
+    let percent = mode === "percent";
+    let horizontal = props.horizontal ?? false;
+
+    const data: ChartData<"bar", number[], string> = {
+        labels: props.labels,
+        datasets: prepareDatasets(props.dataset, mode)
+    };
+
+    const categoryScale: any = {
+        stacked: stacked,
+        ticks: {
+            font: { size: 12, weight: 400 },
+            color: '#141B5C',
+            maxRotation: horizontal ? 0 : 45,
+            minRotation: 0,
+        },
+        grid: { display: false },
+        border: { display: false },
+    };
+    const valueScale: any = {
+        stacked: stacked,
+        min: percent ? 0 : props.range.min,
+        max: percent ? 100 : props.range.max,
+        ticks: {
+            callback: function (value: any)
+            {
+                if (percent)
+                    return value + "%";
+                return props.formatValue ? props.formatValue(value as number) : value;
+            },
+            font: { size: 12, weight: 400 },
+            color: '#141B5C',
+        },
+        grid: { display: props.yGrid, color: "#E6EEF5" },
+        border: { display: false },
+    };
+
+    const options: ChartOptions<'bar'> = {
+        indexAxis: horizontal ? "y" : "x",
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: true,
+                position: "bottom"
+            },
+            tooltip: {
+                enabled: true,
+                callbacks: {
+                    title: (items) =>
+                    {
+                        let label = items[0]?.label ?? "";
+                        return props.xTitle ? `${props.xTitle}: ${label}` : label;
+                    },
+                    label: ({ dataset, raw }) => percent
+                        ? `${dataset.label}: ${(raw as number).toFixed(1)}%`
+                        : `${dataset.label}: ${props.formatValue ? props.formatValue(raw as number) : raw}`,
+                },
+            },
+        },
+        scales: {
+            x: horizontal ? valueScale : categoryScale,
+            y: horizontal ? categoryScale : valueScale,
+        },
+    };
+
+    return (
+        <Bar
+            data={data}
+            options={options}
+            width={props.width ?? 320}
+            height={props.height ?? 240}
+        />
+    );
+};

package/src/components/NSChartDoughnut.tsx

@@ -2,13 +2,18 @@
 import { Doughnut } from 'react-chartjs-2';
 import { Chart as ChartJS, ArcElement, Tooltip, Legend, Title, SubTitle, CategoryScale, LinearScale, BarElement, PointElement, LineElement, ChartData, Plugin, ArcElement as ArcElementType } from 'chart.js';
 import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { ColorOperation } from '../ColorOperation';
 
 ChartJS.register(ArcElement, Tooltip, Legend, Title, SubTitle, CategoryScale, LinearScale, BarElement, PointElement, LineElement);
+
 export interface NSChartDoughnutProps extends IBaseComponentProps
 {
 	title: string;
 	datas: number[];
 	labels: string[]
+	labelTitle?: string;
+	valueTitle?: string;
+	formatValue?: (value: number) => string;
 	backgroundColors?: string[];
 	borderWidth?: number;
 }
@@ -16,7 +21,6 @@ export interface NSChartDoughnutProps extends IBaseComponentProps
 
 export function NSChartDoughnut(props: NSChartDoughnutProps)
 {
-	let backgroundColors: string[] = [""];
 	const options = {
 		responsive: true,
 		plugins: {
@@ -28,11 +32,12 @@ export function NSChartDoughnut(props: NSChartDoughnutProps)
 					useBorderRadius: false,
 					borderRadius: 100,
 					boxWidth: 16,
-					color: 'hsla(250, 87%, 29%, 1)',
+					color: '#141b5c',
 				},
 			},
 			title: {
-				display: true,
+				display: false,
+				text: props.title,
 			},
 			tooltip: {
 				enabled: true,
@@ -42,6 +47,18 @@ export function NSChartDoughnut(props: NSChartDoughnutProps)
 				bodyFont: {
 					size: 12
 				},
+				callbacks: {
+					title: (items: any[]) =>
+					{
+						let label = items[0]?.label ?? "";
+						return props.labelTitle ? `${props.labelTitle}: ${label}` : label;
+					},
+					label: (item: any) =>
+					{
+						let value = props.formatValue ? props.formatValue(item.raw as number) : item.raw;
+						return props.valueTitle ? `${props.valueTitle}: ${value}` : `${value}`;
+					},
+				},
 			},
 		},
 		animation: {
@@ -49,29 +66,14 @@ export function NSChartDoughnut(props: NSChartDoughnutProps)
 		}
 	};
 
-	const generateRandomColor = (): string =>
-	{
-		let maxVal = 0xFFFFFF;
-		let randomNumber: number = Math.random() * maxVal;
-		randomNumber = Math.floor(randomNumber);
-		let X: string = randomNumber.toString(16);
-		let randomColor: string = X.padStart(6, "0");
-		return `#${randomColor.toUpperCase()}`
-	}
-
-	const setRandomColor = (): string[] =>
-	{
-		props.datas.forEach(() => backgroundColors?.push(generateRandomColor()))
-		return backgroundColors;
-	}
-
 	const data: ChartData<'doughnut'> = {
 		labels: props.labels,
 		datasets: [
 			{
 				data: props.datas,
-				backgroundColor: props.backgroundColors ?? setRandomColor(),
-				borderWidth: props.borderWidth ?? 1
+				backgroundColor: props.backgroundColors ?? ColorOperation.generate(props.datas.length),
+				borderColor: "#ffffff",
+				borderWidth: props.borderWidth ?? 2
 			}
 		]
 	};
@@ -83,13 +85,13 @@ export function NSChartDoughnut(props: NSChartDoughnutProps)
 			const meta = chart.getDatasetMeta(0);
 			const arc = meta.data[0] as unknown as ArcElementType;
 			ctx.save();
-			const fontSize = arc.innerRadius / 3;
-			ctx.font = fontSize.toString() + "px";
+			const fontSize = Math.max(12, arc.innerRadius / 3);
+			ctx.font = `${fontSize}px sans-serif`;
 			ctx.fillStyle = 'hsla(234, 64%, 22%, 1)';
 			ctx.textBaseline = 'middle';
 			ctx.textAlign = 'center';
 
-			const text = props.title;
+			const text = (chart.options?.plugins?.title?.text as string) ?? "";
 			const centerX = (arc.x || width / 2);
 			const centerY = (arc.y || height / 2);
 

package/src/components/NSChartLine.tsx

@@ -0,0 +1,111 @@
+import { Line } from 'react-chartjs-2';
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Filler, Title, Tooltip, Legend, ChartOptions, ChartData } from 'chart.js';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { ColorOperation } from '../ColorOperation';
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler, Title, Tooltip, Legend);
+
+export interface NSChartLineDataSetItem
+{
+	label: string;
+	color?: string;
+	data: number[];
+}
+
+export interface NSChartLineProps extends IBaseComponentProps
+{
+	labels: string[];
+	dataset: NSChartLineDataSetItem[];
+	range: {
+		min: number,
+		max: number,
+	}
+	xTitle?: string;
+	area?: boolean;
+	yGrid?: boolean;
+	height?: number;
+	width?: number;
+	formatValue?: (value: number) => string;
+}
+
+export function NSChartLine(props: NSChartLineProps)
+{
+	let area = props.area ?? false;
+
+	const data: ChartData<"line", number[], string> = {
+		labels: props.labels,
+		datasets: props.dataset.map((item, index) =>
+		{
+			let color = item.color ?? ColorOperation.at(index);
+			return {
+				label: item.label,
+				data: item.data,
+				borderColor: color,
+				backgroundColor: area ? color + "44" : color,
+				pointBackgroundColor: color,
+				pointRadius: 3,
+				pointHoverRadius: 5,
+				borderWidth: 2,
+				tension: 0.3,
+				fill: area,
+			};
+		})
+	};
+
+	const options: ChartOptions<'line'> = {
+		responsive: true,
+		maintainAspectRatio: false,
+		plugins: {
+			legend: {
+				display: true,
+				position: "bottom"
+			},
+			tooltip: {
+				enabled: true,
+				callbacks: {
+					title: (items) =>
+					{
+						let label = items[0]?.label ?? "";
+						return props.xTitle ? `${props.xTitle}: ${label}` : label;
+					},
+					label: ({ dataset, raw }) => `${dataset.label}: ${props.formatValue ? props.formatValue(raw as number) : raw}`,
+				},
+			},
+		},
+		scales: {
+			x: {
+				ticks: {
+					font: { size: 12, weight: 400 },
+					color: '#141B5C',
+					maxRotation: 45,
+					minRotation: 0,
+				},
+				grid: { display: false },
+				border: { display: false },
+			},
+			y: {
+				min: props.range.min,
+				max: props.range.max,
+				ticks: {
+					callback: function (value)
+					{
+						return props.formatValue ? props.formatValue(value as number) : value;
+					},
+					font: { size: 12, weight: 400 },
+					color: '#141B5C',
+				},
+				grid: { display: props.yGrid, color: "#E6EEF5" },
+				border: { display: false },
+			},
+		},
+	};
+
+	return (
+		<Line
+			data={data}
+			options={options}
+			width={props.width ?? 320}
+			height={props.height ?? 240}
+		/>
+	);
+}

package/src/components/NSChartPie.tsx

@@ -2,19 +2,23 @@
 import { Pie } from 'react-chartjs-2';
 import { Chart as ChartJS, ArcElement, Tooltip, Legend, Title, SubTitle, CategoryScale, LinearScale, BarElement, PointElement, LineElement, ChartData, Plugin, ArcElement as ArcElementType } from 'chart.js';
 import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { ColorOperation } from '../ColorOperation';
 
 ChartJS.register(ArcElement, Tooltip, Legend, Title, SubTitle, CategoryScale, LinearScale, BarElement, PointElement, LineElement);
+
 export interface NSChartPieProps extends IBaseComponentProps
 {
 	title?: string;
 	datas: number[];
 	labels: string[];
+	labelTitle?: string;
+	valueTitle?: string;
+	formatValue?: (value: number) => string;
 	backgroundColors?: string[];
 	borderWidth?: number;
 }
 export function NSChartPie(props: NSChartPieProps)
 {
-	let backgroundColors: string[] = [""];
 	const options = {
 		responsive: true,
 		plugins: {
@@ -23,7 +27,7 @@ export function NSChartPie(props: NSChartPieProps)
 				responsive: true,
 				position: 'left' as 'top',
 				labels: {
-					useBorderRadius: true,
+					useBorderRadius: false,
 					borderRadius: 100,
 					boxWidth: 16,
 					color: 'hsla(250, 87%, 29%, 1)',
@@ -37,6 +41,18 @@ export function NSChartPie(props: NSChartPieProps)
 				bodyFont: {
 					size: 12
 				},
+				callbacks: {
+					title: (items: any[]) =>
+					{
+						let label = items[0]?.label ?? "";
+						return props.labelTitle ? `${props.labelTitle}: ${label}` : label;
+					},
+					label: (item: any) =>
+					{
+						let value = props.formatValue ? props.formatValue(item.raw as number) : item.raw;
+						return props.valueTitle ? `${props.valueTitle}: ${value}` : `${value}`;
+					},
+				},
 			},
 		},
 		animation: {
@@ -44,30 +60,14 @@ export function NSChartPie(props: NSChartPieProps)
 		}
 	};
 
-	const generateRandomColor = (): string =>
-	{
-		let maxVal = 0xFFFFFF;
-		let randomNumber: number = Math.random() * maxVal;
-		randomNumber = Math.floor(randomNumber);
-		let X: string = randomNumber.toString(16);
-		let randomColor: string = X.padStart(6, "0");
-		return `#${randomColor.toUpperCase()}`
-	}
-
-	const setRandomColor = (): string[] =>
-	{
-		props.datas.forEach(() => backgroundColors?.push(generateRandomColor()))
-		return backgroundColors;
-	}
-
 	const data: ChartData<'pie'> = {
 		labels: props.labels,
 		datasets: [
 			{
 				data: props.datas,
-				backgroundColor: props.backgroundColors ?? setRandomColor(),
-				borderColor: props.backgroundColors ?? setRandomColor(),
-				borderWidth: props.borderWidth ?? 1
+				backgroundColor: props.backgroundColors ?? ColorOperation.generate(props.datas.length),
+				borderColor: "#ffffff",
+				borderWidth: props.borderWidth ?? 2
 			}
 		]
 	};
@@ -80,8 +80,8 @@ export function NSChartPie(props: NSChartPieProps)
 			const arc = meta.data[0] as unknown as ArcElementType;
 
 			ctx.save();
-			const fontSize = arc.innerRadius / 3;
-			ctx.font = fontSize.toString() + "px";
+			const fontSize = Math.max(12, arc.innerRadius / 3);
+			ctx.font = `${fontSize}px sans-serif`;
 			ctx.fillStyle = 'hsla(234, 64%, 22%, 1)';
 			ctx.textBaseline = 'middle';
 			ctx.textAlign = 'center';

package/src/components/NSPagination.module.css

@@ -76,6 +76,7 @@
 	align-items: center;
 	color: rgba(20, 27, 200, 1);
 	text-align: center;
+    white-space: nowrap;
 }
 
 @media only screen and (min-width: 480px) {

package/src/components/NSPagination.tsx

@@ -3,6 +3,7 @@ import { IBaseComponentProps } from '../props/IBaseComponentProps';
 import Styles from './NSPagination.module.css';
 import React from "react";
 import { NSBoxCombo } from './NSBoxCombo';
+import { NSRow } from './NSRow';
 
 export interface NSPaginationProps extends IBaseComponentProps
 {
@@ -143,16 +144,16 @@ export class NSPagination extends Component<NSPaginationProps, NSPaginationState
             }
         });
         return (
-            <>
-                <div
-                    id={this.props.id}
-                    className={`${Styles.ns_pagination_container} ${this.props.classList?.join(' ')}`}
-                    style={this.props.style}
-                >
-                    <div className={Styles.ns_pagination_buttons_container}>
-                        {pages}
-                    </div>
+            <div
+                id={this.props.id}
+                className={`${Styles.ns_pagination_container} ${this.props.classList?.join(' ')}`}
+                style={this.props.style}
+            >
+                <div className={Styles.ns_pagination_buttons_container}>
+                    {pages}
+                </div>
 
+                <NSRow classList={["flex-nowrap"]}>
                     <NSBoxCombo
                         ref={this.PageSize}
                         title=''
@@ -161,7 +162,7 @@ export class NSPagination extends Component<NSPaginationProps, NSPaginationState
                         multiple={false}
                         defaultValue="25"
                         hideHeader
-                        getOptions={() => pageSizes.map(pagesize => { return { value: pagesize.toString(), title: pagesize.toString() } })}
+                        getOptions={() => pageSizes.map(pagesize => ({ value: pagesize.toString(), title: pagesize.toString() }))}
                         onChanged={() =>
                         {
                             let currentPage = this.state.currentPage;
@@ -171,13 +172,13 @@ export class NSPagination extends Component<NSPaginationProps, NSPaginationState
                                 onPageChange(currentPage, pageSize);
                             });
                         }}
-                        style={{ width: "70px" }}
+                        style={{ width: "72px" }}
                     />
                     <p className={Styles.ns_pagination_info}>
                         {`(${current_min.toLocaleString()} - ${current_max.toLocaleString()}) of ${totalItems.toLocaleString()}`}
                     </p>
-                </div>
-            </>
+                </NSRow>
+            </div>
         );
     }
 }

package/src/components/NSTable.tsx

@@ -10,6 +10,7 @@ import { NSDialogPageSelection } from './NSDialogPageSelection';
 import { NSLoading } from './NSLoading';
 import { NSNoData } from './NSNoData';
 import { NSPagination } from './NSPagination';
+import { NSTableChart } from './NSTableChart';
 import Styles from './NSTable.module.css';
 
 export interface TableInfo
@@ -93,6 +94,7 @@ interface NSTableState<RowType>
 	sortItems: SortItem[] | null;
 	columnWidths: { [key: string]: number };
 	fullscreen: boolean;
+	showChart: boolean;
 }
 
 enum PageSelectionMode
@@ -127,6 +129,7 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 			sortItems: this.getSortItems(),
 			columnWidths: this.loadColumnWidths(),
 			fullscreen: false,
+			showChart: false,
 		};
 		this.getSortItemsKey = this.getSortItemsKey.bind(this);
 		this.getSortItems = this.getSortItems.bind(this);
@@ -950,7 +953,10 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 					onClick={{
 						action: () =>
 						{
-							this.showModal(" ", "This feature will be available soon in upcoming versions.");
+							if (!this.state.rows || this.state.rows.length === 0)
+								this.showModal(" ", "There is no data to display as a chart.");
+							else
+								this.setState({ showChart: true });
 						},
 						showLoading: false
 					}}
@@ -1094,6 +1100,16 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
 						<></>
 					</NSDialogInfo>
 				}
+				{
+					this.state.showChart &&
+					<NSTableChart<RowType>
+						name={this.props.name}
+						columns={this.getColumns(true)}
+						rows={this.state.rows ?? []}
+						selectedRows={this.state.selectedRows}
+						onClose={() => this.setState({ showChart: false })}
+					/>
+				}
 			</div>
 		);
 	}

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;
+	}
+}