namirasoft-site-react 1.4.553 → 1.4.554

package/src/components/NSChartColumn.tsx

@@ -1,131 +1,131 @@
-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 Styles from "./NSChartColumn.module.css"
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
-
-const prepareDatasets = (dataset: DataSetItem[]) =>
-{
-	const colors = [
-		"#7583E6",
-		"#C3406C",
-		"#3AA498",
-		"#8C4BCB",
-		"#DB7E46",
-		"#2962AA",
-		"#95274A",
-		"#95274A",
-		"#95274A",
-		"#977E19",
-	];
-
-	return dataset.map((item, index) => ({
-		label: item.label,
-		data: item.data,
-		backgroundColor: item.color ?? colors[index % colors.length],
-		stack: "stack",
-	}));
-};
-
-export interface DataSetItem
-{
-	label: string;
-	color?: string;
-	data: number[]
-};
-
-
-export interface NSChartColumnProps extends IBaseComponentProps
-{
-	labels: string[];
-	dataset: DataSetItem[];
-	range: {
-		min: number,
-		max: number,
-	}
-	yGrid?: boolean;
-	height?: number;
-	width?: number;
-	formatValue?: (value: number) => string;
-}
-
-export function NSChartColumn(props: NSChartColumnProps)
-{
-	const data: ChartData<"bar", number[], string> = {
-		labels: props.labels,
-		datasets: prepareDatasets(props.dataset)
-	};
-
-	const options: ChartOptions<'bar'> = {
-		responsive: true,
-		maintainAspectRatio: false,
-		plugins: {
-			legend: {
-				display: true,
-				position: "bottom"
-			},
-			tooltip: {
-				enabled: true,
-				callbacks: {
-					label: ({ dataset, raw }) => `${dataset.label}: ${props.formatValue ? props.formatValue(raw as number) : raw}`,
-				},
-			},
-		},
-		scales: {
-			x: {
-				ticks: {
-					font: {
-						size: 12,
-						weight: 400,
-					},
-					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 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 (
-		<div
-			style={{ ...props.style, height: props.height ?? 250 }}
-			className={`${Styles.chart_column_container} ${props.classList?.join(" ") ?? ""}`}
-		>
-			<Bar
-				data={data}
-				options={options}
-				width={props.width ?? 320}
-				height={props.height ?? 250}
-			/>
-		</div>
-	);
+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 Styles from "./NSChartColumn.module.css"
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+
+const prepareDatasets = (dataset: DataSetItem[]) =>
+{
+	const colors = [
+		"#7583E6",
+		"#C3406C",
+		"#3AA498",
+		"#8C4BCB",
+		"#DB7E46",
+		"#2962AA",
+		"#95274A",
+		"#95274A",
+		"#95274A",
+		"#977E19",
+	];
+
+	return dataset.map((item, index) => ({
+		label: item.label,
+		data: item.data,
+		backgroundColor: item.color ?? colors[index % colors.length],
+		stack: "stack",
+	}));
+};
+
+export interface DataSetItem
+{
+	label: string;
+	color?: string;
+	data: number[]
+};
+
+
+export interface NSChartColumnProps extends IBaseComponentProps
+{
+	labels: string[];
+	dataset: DataSetItem[];
+	range: {
+		min: number,
+		max: number,
+	}
+	yGrid?: boolean;
+	height?: number;
+	width?: number;
+	formatValue?: (value: number) => string;
+}
+
+export function NSChartColumn(props: NSChartColumnProps)
+{
+	const data: ChartData<"bar", number[], string> = {
+		labels: props.labels,
+		datasets: prepareDatasets(props.dataset)
+	};
+
+	const options: ChartOptions<'bar'> = {
+		responsive: true,
+		maintainAspectRatio: false,
+		plugins: {
+			legend: {
+				display: true,
+				position: "bottom"
+			},
+			tooltip: {
+				enabled: true,
+				callbacks: {
+					label: ({ dataset, raw }) => `${dataset.label}: ${props.formatValue ? props.formatValue(raw as number) : raw}`,
+				},
+			},
+		},
+		scales: {
+			x: {
+				ticks: {
+					font: {
+						size: 12,
+						weight: 400,
+					},
+					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 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 (
+		<div
+			style={{ ...props.style, height: props.height ?? 250 }}
+			className={`${Styles.chart_column_container} ${props.classList?.join(" ") ?? ""}`}
+		>
+			<Bar
+				data={data}
+				options={options}
+				width={props.width ?? 320}
+				height={props.height ?? 250}
+			/>
+		</div>
+	);
 };

package/src/components/NSChartDoughnut.tsx

@@ -1,113 +1,113 @@
-/* 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: false,
-					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
-			id={props.id}
-			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: false,
+					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
+			id={props.id}
+			className={`${props.classList?.join(" ") ?? ""}`}
+			style={props.style}
+		>
+			<Doughnut
+				data={data}
+				options={options}
+				plugins={[centerTitlePlugin]}
+			/>
+		</div>
+	);
 }