namirasoft-site-react 1.4.554 → 1.4.556

package/src/components/NSChartPie.tsx

@@ -1,106 +1,106 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-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';
-
-ChartJS.register(ArcElement, Tooltip, Legend, Title, SubTitle, CategoryScale, LinearScale, BarElement, PointElement, LineElement);
-export interface NSChartPieProps extends IBaseComponentProps
-{
-	title?: string;
-	datas: number[];
-	labels: string[];
-	backgroundColors?: string[];
-	borderWidth?: number;
-}
-export function NSChartPie(props: NSChartPieProps)
-{
-	let backgroundColors: string[] = [""];
-	const options = {
-		responsive: true,
-		plugins: {
-			legend: {
-				display: true,
-				responsive: true,
-				position: 'left' as 'top',
-				labels: {
-					useBorderRadius: true,
-					borderRadius: 100,
-					boxWidth: 16,
-					color: 'hsla(250, 87%, 29%, 1)',
-				},
-			},
-			tooltip: {
-				enabled: true,
-				titleFont: {
-					size: 12
-				},
-				bodyFont: {
-					size: 12
-				},
-			},
-		},
-		animation: {
-			animateScale: true,
-		}
-	};
-
-	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
-			}
-		]
-	};
-	const centerTitlePlugin: Plugin<'pie'> = {
-		id: 'centerTitle',
-		afterDraw(chart)
-		{
-			const { ctx, chartArea: { width, height } } = chart;
-			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";
-			ctx.fillStyle = 'hsla(234, 64%, 22%, 1)';
-			ctx.textBaseline = 'middle';
-			ctx.textAlign = 'center';
-
-			const text = props.title ?? "";
-			const centerX = (arc.x || width / 2);
-			const centerY = (arc.y || height / 2);
-
-			ctx.fillText(text, centerX, centerY);
-			ctx.restore();
-		}
-	};
-	return (
-		<div className={`${props.classList?.join(" ") ?? ""} `} style={props.style}>
-			<Pie
-				data={data}
-				options={options}
-				plugins={[centerTitlePlugin]}
-			/>
-		</div>
-	);
+/* eslint-disable @typescript-eslint/no-unused-vars */
+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';
+
+ChartJS.register(ArcElement, Tooltip, Legend, Title, SubTitle, CategoryScale, LinearScale, BarElement, PointElement, LineElement);
+export interface NSChartPieProps extends IBaseComponentProps
+{
+	title?: string;
+	datas: number[];
+	labels: string[];
+	backgroundColors?: string[];
+	borderWidth?: number;
+}
+export function NSChartPie(props: NSChartPieProps)
+{
+	let backgroundColors: string[] = [""];
+	const options = {
+		responsive: true,
+		plugins: {
+			legend: {
+				display: true,
+				responsive: true,
+				position: 'left' as 'top',
+				labels: {
+					useBorderRadius: true,
+					borderRadius: 100,
+					boxWidth: 16,
+					color: 'hsla(250, 87%, 29%, 1)',
+				},
+			},
+			tooltip: {
+				enabled: true,
+				titleFont: {
+					size: 12
+				},
+				bodyFont: {
+					size: 12
+				},
+			},
+		},
+		animation: {
+			animateScale: true,
+		}
+	};
+
+	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
+			}
+		]
+	};
+	const centerTitlePlugin: Plugin<'pie'> = {
+		id: 'centerTitle',
+		afterDraw(chart)
+		{
+			const { ctx, chartArea: { width, height } } = chart;
+			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";
+			ctx.fillStyle = 'hsla(234, 64%, 22%, 1)';
+			ctx.textBaseline = 'middle';
+			ctx.textAlign = 'center';
+
+			const text = props.title ?? "";
+			const centerX = (arc.x || width / 2);
+			const centerY = (arc.y || height / 2);
+
+			ctx.fillText(text, centerX, centerY);
+			ctx.restore();
+		}
+	};
+	return (
+		<div className={`${props.classList?.join(" ") ?? ""} `} style={props.style}>
+			<Pie
+				data={data}
+				options={options}
+				plugins={[centerTitlePlugin]}
+			/>
+		</div>
+	);
 }

package/src/components/NSChartRange.tsx

@@ -1,15 +1,15 @@
-import Styles from './NSChartRange.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-
-export interface NSChartRangeProps extends IBaseComponentProps
-{ }
-
-export function NSChartRange(_: NSChartRangeProps)
-{
-    return (
-        <div className={Styles.ns_parent}>
-
-        </div>
-    );
+import Styles from './NSChartRange.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+
+export interface NSChartRangeProps extends IBaseComponentProps
+{ }
+
+export function NSChartRange(_: NSChartRangeProps)
+{
+    return (
+        <div className={Styles.ns_parent}>
+
+        </div>
+    );
 }

package/src/components/NSChartTable.module.css

@@ -1,22 +1,22 @@
-.custom_row td {
-    border: none;
-}
-
-.custom_row td:nth-child(2),
-.custom_row td:nth-child(3),
-.custom_row td:nth-child(4),
-.custom_row td:nth-child(5),
-.custom_row td:nth-child(6) {
-    border-bottom: 1px dashed #d9d9d9;
-}
-
-/* Override default Ant Design row borders */
-.ant-table-tbody>tr>td {
-    border-bottom: none !important;
-}
-
-/* Increase progress bar height */
-.ant-progress {
-    height: 16px !important;
-    /* Adjust as needed */
+.custom_row td {
+    border: none;
+}
+
+.custom_row td:nth-child(2),
+.custom_row td:nth-child(3),
+.custom_row td:nth-child(4),
+.custom_row td:nth-child(5),
+.custom_row td:nth-child(6) {
+    border-bottom: 1px dashed #d9d9d9;
+}
+
+/* Override default Ant Design row borders */
+.ant-table-tbody>tr>td {
+    border-bottom: none !important;
+}
+
+/* Increase progress bar height */
+.ant-progress {
+    height: 16px !important;
+    /* Adjust as needed */
 }

package/src/components/NSChartTable.tsx

@@ -1,95 +1,95 @@
-import { Table, Progress } from 'antd';
-import { ColumnType } from 'antd/es/table';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import Styles from "./NSChartTable.module.css"
-
-interface DataType
-{
-	key: string;
-	job: string;
-	totalHours: number;
-	percentage: number;
-	cost: number;
-	income: number;
-	benefit: number;
-}
-
-interface CustomTableProps extends IBaseComponentProps
-{
-	data: DataType[];
-}
-
-export function NSChartTable(props: CustomTableProps)
-{
-	const getColor = (percentage: number) =>
-	{
-		if (percentage >= 75) return '#368F01';
-		if (percentage >= 60) return ' #44B400';
-		if (percentage >= 50) return '#56E500';
-		if (percentage >= 25) return '#FAFF00';
-		return 'red';
-	};
-
-	const columns: ColumnType<DataType>[] = [
-		{
-			title: '',
-			dataIndex: 'job',
-			key: 'job',
-		},
-		{
-			title: 'Total Hours',
-			dataIndex: 'totalHours',
-			key: 'totalHours',
-			render: (text: number) => <div>{text}</div>,
-		},
-		{
-			title: 'Percentage',
-			dataIndex: 'percentage',
-			key: 'percentage',
-			render: (text: number) => <div>{text}%</div>,
-		},
-		{
-			title: 'Cost',
-			dataIndex: 'cost',
-			key: 'cost',
-			render: (text: number) => <div>${text}</div>,
-		},
-		{
-			title: 'Income',
-			dataIndex: 'income',
-			key: 'income',
-			render: (text: number) => <div>${text}</div>,
-		},
-		{
-			title: 'Benefit',
-			dataIndex: 'benefit',
-			key: 'benefit',
-			render: (text: number) => <div>${text}</div>,
-		},
-		{
-			title: '',
-			dataIndex: 'totalHours',
-			key: 'chart',
-			render: (totalHours: number, record: DataType) => (
-				<Progress
-					percent={(totalHours / 8) * 100}
-					showInfo={false}
-					strokeColor={getColor(record.percentage)}
-					size={{ width: 310, height: 16 }}
-				/>
-			),
-		},
-	];
-
-	return (
-		<div className={`${props.classList?.join(" ") ?? ""}`} style={props.style}>
-			<Table
-				columns={columns}
-				dataSource={props.data}
-				pagination={false}
-				scroll={{ x: 800 }}
-				rowClassName={() => Styles.custom_row}
-			/>
-		</div>
-	);
+import { Table, Progress } from 'antd';
+import { ColumnType } from 'antd/es/table';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from "./NSChartTable.module.css"
+
+interface DataType
+{
+	key: string;
+	job: string;
+	totalHours: number;
+	percentage: number;
+	cost: number;
+	income: number;
+	benefit: number;
+}
+
+interface CustomTableProps extends IBaseComponentProps
+{
+	data: DataType[];
+}
+
+export function NSChartTable(props: CustomTableProps)
+{
+	const getColor = (percentage: number) =>
+	{
+		if (percentage >= 75) return '#368F01';
+		if (percentage >= 60) return ' #44B400';
+		if (percentage >= 50) return '#56E500';
+		if (percentage >= 25) return '#FAFF00';
+		return 'red';
+	};
+
+	const columns: ColumnType<DataType>[] = [
+		{
+			title: '',
+			dataIndex: 'job',
+			key: 'job',
+		},
+		{
+			title: 'Total Hours',
+			dataIndex: 'totalHours',
+			key: 'totalHours',
+			render: (text: number) => <div>{text}</div>,
+		},
+		{
+			title: 'Percentage',
+			dataIndex: 'percentage',
+			key: 'percentage',
+			render: (text: number) => <div>{text}%</div>,
+		},
+		{
+			title: 'Cost',
+			dataIndex: 'cost',
+			key: 'cost',
+			render: (text: number) => <div>${text}</div>,
+		},
+		{
+			title: 'Income',
+			dataIndex: 'income',
+			key: 'income',
+			render: (text: number) => <div>${text}</div>,
+		},
+		{
+			title: 'Benefit',
+			dataIndex: 'benefit',
+			key: 'benefit',
+			render: (text: number) => <div>${text}</div>,
+		},
+		{
+			title: '',
+			dataIndex: 'totalHours',
+			key: 'chart',
+			render: (totalHours: number, record: DataType) => (
+				<Progress
+					percent={(totalHours / 8) * 100}
+					showInfo={false}
+					strokeColor={getColor(record.percentage)}
+					size={{ width: 310, height: 16 }}
+				/>
+			),
+		},
+	];
+
+	return (
+		<div className={`${props.classList?.join(" ") ?? ""}`} style={props.style}>
+			<Table
+				columns={columns}
+				dataSource={props.data}
+				pagination={false}
+				scroll={{ x: 800 }}
+				rowClassName={() => Styles.custom_row}
+			/>
+		</div>
+	);
 };

package/src/components/NSColumn.module.css

@@ -1,17 +1,17 @@
-.ns_column {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-    margin: 0;
-    justify-content: flex-start;
-    width: max-content;
-    max-width: 100%;
-    width: 100%;
-}
-
-@media only screen and (min-width: 768px) {
-    .ns_column {
-        flex-wrap: wrap;
-    }
+.ns_column {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    margin: 0;
+    justify-content: flex-start;
+    width: max-content;
+    max-width: 100%;
+    width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+    .ns_column {
+        flex-wrap: wrap;
+    }
 }

package/src/components/NSColumn.tsx

@@ -1,25 +1,25 @@
-import { ReactNode } from "react";
-import Styles from './NSColumn.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface NSColumnProps extends IBaseComponentProps
-{
-    children: ReactNode;
-    onEnterPressed?: () => void;
-}
-export function NSColumn(props: NSColumnProps)
-{
-    return (
-        <div id={props.id}
-            className={`${Styles.ns_column} ${props.classList?.join(" ") ?? ""}`}
-            style={props.style}
-            onKeyUp={e =>
-            {
-                if (e.key === "Enter")
-                    props.onEnterPressed?.();
-            }}
-        >
-            {props.children}
-        </div>
-    );
+import { ReactNode } from "react";
+import Styles from './NSColumn.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface NSColumnProps extends IBaseComponentProps
+{
+    children: ReactNode;
+    onEnterPressed?: () => void;
+}
+export function NSColumn(props: NSColumnProps)
+{
+    return (
+        <div id={props.id}
+            className={`${Styles.ns_column} ${props.classList?.join(" ") ?? ""}`}
+            style={props.style}
+            onKeyUp={e =>
+            {
+                if (e.key === "Enter")
+                    props.onEnterPressed?.();
+            }}
+        >
+            {props.children}
+        </div>
+    );
 }

package/src/components/NSCopy.tsx

@@ -1,59 +1,59 @@
-import React, { useRef, useState } from "react";
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { SetTimeouService } from "namirasoft-core";
-
-export interface NSCopyProps extends IBaseComponentProps
-{
-	children: React.ReactNode;
-	value?: string;
-}
-
-export interface NSCopyState
-{
-	copied: boolean;
-}
-
-export function NSCopy(props: NSCopyProps)
-{
-	let NSCopyParent_ref = useRef<HTMLDivElement>(null);
-	const service = useRef<SetTimeouService>(new SetTimeouService());
-
-	let [state, setState] = useState<NSCopyState>({ copied: false });
-
-	function onCopy(e: React.MouseEvent<HTMLImageElement>): void
-	{
-		e.stopPropagation();
-
-		if (NSCopyParent_ref.current)
-		{
-			let value = props.value ?? NSCopyParent_ref.current?.innerText;
-			navigator.clipboard.writeText(value);
-
-			setState({ copied: true });
-			service.current?.setTimeoutIfNotCalledAgain(() => { setState({ copied: false }) }, 3000);
-		}
-	}
-
-	return (
-		<div
-			ref={NSCopyParent_ref}
-			id={props.id}
-			className={`d-flex align-items-center ${props.classList?.join(" ") ?? ""}`}
-			style={props.style}
-		>
-			<div>
-				{props.children}
-			</div>
-			<img src={state.copied ? "https://static.namirasoft.com/image/concept/check/on/blue.svg" : "https://static.namirasoft.com/image/concept/copy/blue.svg"}
-				alt='Copy'
-				width={16}
-				height={16}
-				onClick={onCopy}
-				style={{
-					cursor: "pointer",
-					marginLeft: "4px"
-				}}
-			/>
-		</div>
-	);
+import React, { useRef, useState } from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { SetTimeouService } from "namirasoft-core";
+
+export interface NSCopyProps extends IBaseComponentProps
+{
+	children: React.ReactNode;
+	value?: string;
+}
+
+export interface NSCopyState
+{
+	copied: boolean;
+}
+
+export function NSCopy(props: NSCopyProps)
+{
+	let NSCopyParent_ref = useRef<HTMLDivElement>(null);
+	const service = useRef<SetTimeouService>(new SetTimeouService());
+
+	let [state, setState] = useState<NSCopyState>({ copied: false });
+
+	function onCopy(e: React.MouseEvent<HTMLImageElement>): void
+	{
+		e.stopPropagation();
+
+		if (NSCopyParent_ref.current)
+		{
+			let value = props.value ?? NSCopyParent_ref.current?.innerText;
+			navigator.clipboard.writeText(value);
+
+			setState({ copied: true });
+			service.current?.setTimeoutIfNotCalledAgain(() => { setState({ copied: false }) }, 3000);
+		}
+	}
+
+	return (
+		<div
+			ref={NSCopyParent_ref}
+			id={props.id}
+			className={`d-flex align-items-center ${props.classList?.join(" ") ?? ""}`}
+			style={props.style}
+		>
+			<div>
+				{props.children}
+			</div>
+			<img src={state.copied ? "https://static.namirasoft.com/image/concept/check/on/blue.svg" : "https://static.namirasoft.com/image/concept/copy/blue.svg"}
+				alt='Copy'
+				width={16}
+				height={16}
+				onClick={onCopy}
+				style={{
+					cursor: "pointer",
+					marginLeft: "4px"
+				}}
+			/>
+		</div>
+	);
 }