namirasoft-site-react 1.4.135 → 1.4.136

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/NSCopy.tsx

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