namirasoft-site-react 1.4.1 → 1.4.2

package/src/components/NSChartColumn.tsx

@@ -1,107 +1,107 @@
-import { Bar } from 'react-chartjs-2';
-import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ChartOptions, } from 'chart.js';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import Styles from "./NSChartColumn.module.css"
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
-
-export interface NSChartColumnProps extends IBaseComponentProps
-{
-	labels: string[];
-	datasets: number[];
-	range: {
-		min: number,
-		max: number,
-	}
-	yGrid?: boolean;
-	height?: number;
-	width?: number;
-}
-
-export function NSChartColumn(props: NSChartColumnProps)
-{
-	const data = {
-		labels: props.labels,
-		datasets: [
-			{
-				label: 'Dataset 1',
-				data: props.datasets,
-				backgroundColor: '#3354F4',
-				borderRadius: 10,
-				barThickness: 12,
-				borderSkipped: false,
-			},
-		],
-	};
-
-	const options: ChartOptions<'bar'> = {
-		responsive: true,
-		maintainAspectRatio: false,
-		plugins: {
-			legend: {
-				display: false,
-			},
-			tooltip: {
-				enabled: true,
-				callbacks: {
-					label: function (context)
-					{
-						return `$${context.raw}`;
-					},
-				},
-			},
-		},
-		scales: {
-			x: {
-				ticks: {
-					font: {
-						size: 8,
-						weight: 700
-					},
-					color: '#141B5C',
-					maxRotation: 554,
-					minRotation: 0,
-				},
-				grid: {
-					display: false,
-				},
-				border: {
-					display: false,
-				}
-			},
-			y: {
-				min: props.range.min,
-				max: props.range.max,
-				ticks: {
-					callback: function (value)
-					{
-						return `$${value}`;
-					},
-					font: {
-						size: 8,
-						weight: 700,
-					},
-					color: '#141B5C',
-				},
-				grid: {
-					display: props.yGrid,
-					color: "#E6EEF5"
-				},
-				border: {
-					display: false,
-				},
-			},
-		},
-	};
-
-	return (
-		<div style={props.style} className={`${Styles.chart_column_container} ${props.classList?.join(" ")}`}>
-			<Bar
-				data={data}
-				options={options}
-				height={props.height ? props.height : 250}
-				width={props.width ? props.width : 320}
-			/>
-		</div>
-	);
+import { Bar } from 'react-chartjs-2';
+import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ChartOptions, } from 'chart.js';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from "./NSChartColumn.module.css"
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+
+export interface NSChartColumnProps extends IBaseComponentProps
+{
+	labels: string[];
+	datasets: number[];
+	range: {
+		min: number,
+		max: number,
+	}
+	yGrid?: boolean;
+	height?: number;
+	width?: number;
+}
+
+export function NSChartColumn(props: NSChartColumnProps)
+{
+	const data = {
+		labels: props.labels,
+		datasets: [
+			{
+				label: 'Dataset 1',
+				data: props.datasets,
+				backgroundColor: '#3354F4',
+				borderRadius: 10,
+				barThickness: 12,
+				borderSkipped: false,
+			},
+		],
+	};
+
+	const options: ChartOptions<'bar'> = {
+		responsive: true,
+		maintainAspectRatio: false,
+		plugins: {
+			legend: {
+				display: false,
+			},
+			tooltip: {
+				enabled: true,
+				callbacks: {
+					label: function (context)
+					{
+						return `$${context.raw}`;
+					},
+				},
+			},
+		},
+		scales: {
+			x: {
+				ticks: {
+					font: {
+						size: 8,
+						weight: 700
+					},
+					color: '#141B5C',
+					maxRotation: 554,
+					minRotation: 0,
+				},
+				grid: {
+					display: false,
+				},
+				border: {
+					display: false,
+				}
+			},
+			y: {
+				min: props.range.min,
+				max: props.range.max,
+				ticks: {
+					callback: function (value)
+					{
+						return `$${value}`;
+					},
+					font: {
+						size: 8,
+						weight: 700,
+					},
+					color: '#141B5C',
+				},
+				grid: {
+					display: props.yGrid,
+					color: "#E6EEF5"
+				},
+				border: {
+					display: false,
+				},
+			},
+		},
+	};
+
+	return (
+		<div style={props.style} className={`${Styles.chart_column_container} ${props.classList?.join(" ")}`}>
+			<Bar
+				data={data}
+				options={options}
+				height={props.height ? props.height : 250}
+				width={props.width ? props.width : 320}
+			/>
+		</div>
+	);
 };

package/src/components/NSChartPie.tsx

@@ -1,105 +1,105 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-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';
-
-ChartJS.register(
-    ArcElement, Tooltip, Legend, Title,
-    SubTitle,
-    CategoryScale,
-    LinearScale,
-    BarElement,
-    PointElement,
-    LineElement
-);
-
-
-
-export interface NSChartPieProps extends IBaseComponentProps
-{
-    title: string;
-    data: number[];
-    backgroundColor: string[];
-    labels: string[]
-}
-
-const options = {
-    responsive: true,
-    plugins: {
-        legend: {
-            position: 'left' as 'top',
-            labels: {
-                color: 'hsla(250, 87%, 29%, 1)',
-            },
-        },
-        title: {
-            display: true,
-        },
-    },
-    animation: {
-        animateScale: true,
-    }
-};
-
-export function NSChartPie(props: NSChartPieProps)
-{
-    const data: ChartData<'doughnut'> = {
-        labels: props.labels,
-        datasets: [
-            {
-                data: props.data,
-                backgroundColor: props.backgroundColor,
-                borderWidth: 0,
-            }
-        ]
-    };
-    const centerTitlePlugin: Plugin<'doughnut'> = {
-        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();
-            //todo
-            // const fontSize = arc.innerRadius / 3;
-            ctx.font = `40px sans-serif`;
-            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}>
-            <Doughnut
-                data={data}
-                options={options}
-                plugins={[centerTitlePlugin]}
-            />
-        </div>
-    );
+/* eslint-disable @typescript-eslint/no-unused-vars */
+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';
+
+ChartJS.register(
+    ArcElement, Tooltip, Legend, Title,
+    SubTitle,
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    PointElement,
+    LineElement
+);
+
+
+
+export interface NSChartPieProps extends IBaseComponentProps
+{
+    title: string;
+    data: number[];
+    backgroundColor: string[];
+    labels: string[]
+}
+
+const options = {
+    responsive: true,
+    plugins: {
+        legend: {
+            position: 'left' as 'top',
+            labels: {
+                color: 'hsla(250, 87%, 29%, 1)',
+            },
+        },
+        title: {
+            display: true,
+        },
+    },
+    animation: {
+        animateScale: true,
+    }
+};
+
+export function NSChartPie(props: NSChartPieProps)
+{
+    const data: ChartData<'doughnut'> = {
+        labels: props.labels,
+        datasets: [
+            {
+                data: props.data,
+                backgroundColor: props.backgroundColor,
+                borderWidth: 0,
+            }
+        ]
+    };
+    const centerTitlePlugin: Plugin<'doughnut'> = {
+        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();
+            //todo
+            // const fontSize = arc.innerRadius / 3;
+            ctx.font = `40px sans-serif`;
+            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}>
+            <Doughnut
+                data={data}
+                options={options}
+                plugins={[centerTitlePlugin]}
+            />
+        </div>
+    );
 }

package/src/components/NSChartRange.tsx

@@ -1,17 +1,17 @@
-import Styles from './NSChartRange.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-
-export interface INSNSChartRangeProps extends IBaseComponentProps
-{
-}
-
-export function NSChartRange(props: INSNSChartRangeProps)
-{
-    console.log(props)
-    return (
-        <div className={Styles.ns_parent}>
-
-        </div>
-    );
+import Styles from './NSChartRange.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+
+export interface INSNSChartRangeProps extends IBaseComponentProps
+{
+}
+
+export function NSChartRange(props: INSNSChartRangeProps)
+{
+    console.log(props)
+    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>
+	);
 };