namirasoft-site-react 1.4.111 → 1.4.113

package/src/components/NSCardScreenshot.tsx

@@ -1,32 +1,32 @@
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import Styles from "./NSCardScreenshot.module.css"
-
-export interface NSCardScreenshotProps extends IBaseComponentProps
-{
-	key: number;
-	screenshot: string;
-	timeSpent: string;
-	onDelete: () => void;
-};
-
-export function NSCardScreenshot(props: NSCardScreenshotProps)
-{
-	return (
-		<div className={`${Styles.card_screenshot} ${props.classList?.join(' ')}`} style={props.style}>
-			<div className={Styles.card_screenshot_header}>
-				<span className={Styles.timeSpent}>{props.timeSpent}</span>
-				<div onClick={() =>
-				{
-					if (props.onDelete)
-						props.onDelete()
-				}}
-					className={Styles.deleteButton}>
-					<img src="https://static.namirasoft.com/image/concept/delete/blue.svg" alt="" width={24} height={24} />
-				</div>
-			</div>
-			<div className={Styles.screenshot_imageSection}>
-				<img src={props.screenshot} alt="Screenshot" className={Styles.image} />
-			</div>
-		</div>
-	);
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import Styles from "./NSCardScreenshot.module.css"
+
+export interface NSCardScreenshotProps extends IBaseComponentProps
+{
+	key: number;
+	screenshot: string;
+	timeSpent: string;
+	onDelete: () => void;
+};
+
+export function NSCardScreenshot(props: NSCardScreenshotProps)
+{
+	return (
+		<div className={`${Styles.card_screenshot} ${props.classList?.join(' ')}`} style={props.style}>
+			<div className={Styles.card_screenshot_header}>
+				<span className={Styles.timeSpent}>{props.timeSpent}</span>
+				<div onClick={() =>
+				{
+					if (props.onDelete)
+						props.onDelete()
+				}}
+					className={Styles.deleteButton}>
+					<img src="https://static.namirasoft.com/image/concept/delete/blue.svg" alt="" width={24} height={24} />
+				</div>
+			</div>
+			<div className={Styles.screenshot_imageSection}>
+				<img src={props.screenshot} alt="Screenshot" className={Styles.image} />
+			</div>
+		</div>
+	);
 };

package/src/components/NSChartColumn.module.css

@@ -1,8 +1,8 @@
-.chart_column_container {
-    max-width: 620px;
-    width: 100%;
-}
-
-.chart_column_container canvas {
-    height: 100% !important;
+.chart_column_container {
+    max-width: 620px;
+    width: 100%;
+}
+
+.chart_column_container canvas {
+    height: 100% !important;
 }

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

@@ -1,109 +1,109 @@
-/* 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 NSChartDoughnutProps extends IBaseComponentProps
-{
-	title: string;
-	datas: number[];
-	labels: string[]
-	backgroundColors?: string[];
-	borderWidth?: number;
-}
-
-
-export function NSChartDoughnut(props: NSChartDoughnutProps)
-{
-	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)',
-				},
-			},
-			title: {
-				display: true,
-			},
-			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<'doughnut'> = {
-		labels: props.labels,
-		datasets: [
-			{
-				data: props.datas,
-				backgroundColor: props.backgroundColors ?? setRandomColor(),
-				borderWidth: props.borderWidth ?? 1
-			}
-		]
-	};
-	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();
-			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}>
-			<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 NSChartDoughnutProps extends IBaseComponentProps
+{
+	title: string;
+	datas: number[];
+	labels: string[]
+	backgroundColors?: string[];
+	borderWidth?: number;
+}
+
+
+export function NSChartDoughnut(props: NSChartDoughnutProps)
+{
+	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)',
+				},
+			},
+			title: {
+				display: true,
+			},
+			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<'doughnut'> = {
+		labels: props.labels,
+		datasets: [
+			{
+				data: props.datas,
+				backgroundColor: props.backgroundColors ?? setRandomColor(),
+				borderWidth: props.borderWidth ?? 1
+			}
+		]
+	};
+	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();
+			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}>
+			<Doughnut
+				data={data}
+				options={options}
+				plugins={[centerTitlePlugin]}
+			/>
+		</div>
+	);
 }