namirasoft-site-react 1.5.13 → 1.5.15

package/src/components/NSChartLine.tsx

@@ -1,111 +1,111 @@
-import { Line } from 'react-chartjs-2';
-import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Filler, Title, Tooltip, Legend, ChartOptions, ChartData } from 'chart.js';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import { ColorOperation } from 'namirasoft-core';
-
-ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler, Title, Tooltip, Legend);
-
-export interface NSChartLineDataSetItem
-{
-	label: string;
-	color?: string;
-	data: number[];
-}
-
-export interface NSChartLineProps extends IBaseComponentProps
-{
-	labels: string[];
-	dataset: NSChartLineDataSetItem[];
-	range: {
-		min: number,
-		max: number,
-	}
-	xTitle?: string;
-	area?: boolean;
-	yGrid?: boolean;
-	height?: number;
-	width?: number;
-	formatValue?: (value: number) => string;
-}
-
-export function NSChartLine(props: NSChartLineProps)
-{
-	let area = props.area ?? false;
-
-	const data: ChartData<"line", number[], string> = {
-		labels: props.labels,
-		datasets: props.dataset.map((item, index) =>
-		{
-			let color = item.color ?? ColorOperation.at(index);
-			return {
-				label: item.label,
-				data: item.data,
-				borderColor: color,
-				backgroundColor: area ? color + "44" : color,
-				pointBackgroundColor: color,
-				pointRadius: 3,
-				pointHoverRadius: 5,
-				borderWidth: 2,
-				tension: 0.3,
-				fill: area,
-			};
-		})
-	};
-
-	const options: ChartOptions<'line'> = {
-		responsive: true,
-		maintainAspectRatio: false,
-		plugins: {
-			legend: {
-				display: true,
-				position: "bottom"
-			},
-			tooltip: {
-				enabled: true,
-				callbacks: {
-					title: (items) =>
-					{
-						let label = items[0]?.label ?? "";
-						return props.xTitle ? `${props.xTitle}: ${label}` : label;
-					},
-					label: ({ dataset, raw }) => `${dataset.label}: ${props.formatValue ? props.formatValue(raw as number) : raw}`,
-				},
-			},
-		},
-		scales: {
-			x: {
-				ticks: {
-					font: { size: 12, weight: 400 },
-					color: '#141B5C',
-					maxRotation: 45,
-					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 (
-		<Line
-			data={data}
-			options={options}
-			width={props.width ?? 320}
-			height={props.height ?? 240}
-		/>
-	);
+import { Line } from 'react-chartjs-2';
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Filler, Title, Tooltip, Legend, ChartOptions, ChartData } from 'chart.js';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { ColorOperation } from 'namirasoft-core';
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler, Title, Tooltip, Legend);
+
+export interface NSChartLineDataSetItem
+{
+	label: string;
+	color?: string;
+	data: number[];
+}
+
+export interface NSChartLineProps extends IBaseComponentProps
+{
+	labels: string[];
+	dataset: NSChartLineDataSetItem[];
+	range: {
+		min: number,
+		max: number,
+	}
+	xTitle?: string;
+	area?: boolean;
+	yGrid?: boolean;
+	height?: number;
+	width?: number;
+	formatValue?: (value: number) => string;
+}
+
+export function NSChartLine(props: NSChartLineProps)
+{
+	let area = props.area ?? false;
+
+	const data: ChartData<"line", number[], string> = {
+		labels: props.labels,
+		datasets: props.dataset.map((item, index) =>
+		{
+			let color = item.color ?? ColorOperation.at(index);
+			return {
+				label: item.label,
+				data: item.data,
+				borderColor: color,
+				backgroundColor: area ? color + "44" : color,
+				pointBackgroundColor: color,
+				pointRadius: 3,
+				pointHoverRadius: 5,
+				borderWidth: 2,
+				tension: 0.3,
+				fill: area,
+			};
+		})
+	};
+
+	const options: ChartOptions<'line'> = {
+		responsive: true,
+		maintainAspectRatio: false,
+		plugins: {
+			legend: {
+				display: true,
+				position: "bottom"
+			},
+			tooltip: {
+				enabled: true,
+				callbacks: {
+					title: (items) =>
+					{
+						let label = items[0]?.label ?? "";
+						return props.xTitle ? `${props.xTitle}: ${label}` : label;
+					},
+					label: ({ dataset, raw }) => `${dataset.label}: ${props.formatValue ? props.formatValue(raw as number) : raw}`,
+				},
+			},
+		},
+		scales: {
+			x: {
+				ticks: {
+					font: { size: 12, weight: 400 },
+					color: '#141B5C',
+					maxRotation: 45,
+					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 (
+		<Line
+			data={data}
+			options={options}
+			width={props.width ?? 320}
+			height={props.height ?? 240}
+		/>
+	);
 }

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';
-import { ColorOperation } from 'namirasoft-core';
-
-ChartJS.register(ArcElement, Tooltip, Legend, Title, SubTitle, CategoryScale, LinearScale, BarElement, PointElement, LineElement);
-
-export interface NSChartPieProps extends IBaseComponentProps
-{
-	title?: string;
-	datas: number[];
-	labels: string[];
-	labelTitle?: string;
-	valueTitle?: string;
-	formatValue?: (value: number) => string;
-	backgroundColors?: string[];
-	borderWidth?: number;
-}
-export function NSChartPie(props: NSChartPieProps)
-{
-	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)',
-				},
-			},
-			tooltip: {
-				enabled: true,
-				titleFont: {
-					size: 12
-				},
-				bodyFont: {
-					size: 12
-				},
-				callbacks: {
-					title: (items: any[]) =>
-					{
-						let label = items[0]?.label ?? "";
-						return props.labelTitle ? `${props.labelTitle}: ${label}` : label;
-					},
-					label: (item: any) =>
-					{
-						let value = props.formatValue ? props.formatValue(item.raw as number) : item.raw;
-						return props.valueTitle ? `${props.valueTitle}: ${value}` : `${value}`;
-					},
-				},
-			},
-		},
-		animation: {
-			animateScale: true,
-		}
-	};
-
-	const data: ChartData<'pie'> = {
-		labels: props.labels,
-		datasets: [
-			{
-				data: props.datas,
-				backgroundColor: props.backgroundColors ?? ColorOperation.generate(props.datas.length),
-				borderColor: "#ffffff",
-				borderWidth: props.borderWidth ?? 2
-			}
-		]
-	};
-	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 = Math.max(12, arc.innerRadius / 3);
-			ctx.font = `${fontSize}px 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}>
-			<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';
+import { ColorOperation } from 'namirasoft-core';
+
+ChartJS.register(ArcElement, Tooltip, Legend, Title, SubTitle, CategoryScale, LinearScale, BarElement, PointElement, LineElement);
+
+export interface NSChartPieProps extends IBaseComponentProps
+{
+	title?: string;
+	datas: number[];
+	labels: string[];
+	labelTitle?: string;
+	valueTitle?: string;
+	formatValue?: (value: number) => string;
+	backgroundColors?: string[];
+	borderWidth?: number;
+}
+export function NSChartPie(props: NSChartPieProps)
+{
+	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)',
+				},
+			},
+			tooltip: {
+				enabled: true,
+				titleFont: {
+					size: 12
+				},
+				bodyFont: {
+					size: 12
+				},
+				callbacks: {
+					title: (items: any[]) =>
+					{
+						let label = items[0]?.label ?? "";
+						return props.labelTitle ? `${props.labelTitle}: ${label}` : label;
+					},
+					label: (item: any) =>
+					{
+						let value = props.formatValue ? props.formatValue(item.raw as number) : item.raw;
+						return props.valueTitle ? `${props.valueTitle}: ${value}` : `${value}`;
+					},
+				},
+			},
+		},
+		animation: {
+			animateScale: true,
+		}
+	};
+
+	const data: ChartData<'pie'> = {
+		labels: props.labels,
+		datasets: [
+			{
+				data: props.datas,
+				backgroundColor: props.backgroundColors ?? ColorOperation.generate(props.datas.length),
+				borderColor: "#ffffff",
+				borderWidth: props.borderWidth ?? 2
+			}
+		]
+	};
+	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 = Math.max(12, arc.innerRadius / 3);
+			ctx.font = `${fontSize}px 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}>
+			<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/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>
+    );
 }