namirasoft-site-react 1.5.27 → 1.5.28

package/src/components/NSChartBar.tsx

@@ -1,135 +1,135 @@
-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 { ColorOperation } from 'namirasoft-core';
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
-
-export type NSChartBarMode = "grouped" | "stacked" | "percent";
-
-const toPercentDatasets = (dataset: DataSetItem[]): DataSetItem[] =>
-{
-    let totals: number[] = [];
-    dataset.forEach(item => item.data.forEach((value, index) => totals[index] = (totals[index] ?? 0) + (value || 0)));
-    return dataset.map(item => ({
-        ...item,
-        data: item.data.map((value, index) => totals[index] ? (value / totals[index]) * 100 : 0),
-    }));
-};
-
-const prepareDatasets = (dataset: DataSetItem[], mode: NSChartBarMode) =>
-{
-    let stacked = mode === "stacked" || mode === "percent";
-    let source = mode === "percent" ? toPercentDatasets(dataset) : dataset;
-    return source.map((item, index) => ({
-        label: item.label,
-        data: item.data,
-        backgroundColor: item.color ?? ColorOperation.at(index),
-        stack: stacked ? "stack" : `stack-${index}`,
-    }));
-};
-
-export interface DataSetItem
-{
-    label: string;
-    color?: string;
-    data: number[]
-};
-
-
-export interface NSChartBarProps extends IBaseComponentProps
-{
-    labels: string[];
-    dataset: DataSetItem[];
-    range: {
-        min: number,
-        max: number,
-    }
-    xTitle?: string;
-    mode?: NSChartBarMode;
-    horizontal?: boolean;
-    yGrid?: boolean;
-    height?: number;
-    width?: number;
-    formatValue?: (value: number) => string;
-}
-
-export function NSChartBar(props: NSChartBarProps)
-{
-    let mode: NSChartBarMode = props.mode ?? "grouped";
-    let stacked = mode === "stacked" || mode === "percent";
-    let percent = mode === "percent";
-    let horizontal = props.horizontal ?? false;
-
-    const data: ChartData<"bar", number[], string> = {
-        labels: props.labels,
-        datasets: prepareDatasets(props.dataset, mode)
-    };
-
-    const categoryScale: any = {
-        stacked: stacked,
-        ticks: {
-            font: { size: 12, weight: 400 },
-            color: '#141B5C',
-            maxRotation: horizontal ? 0 : 45,
-            minRotation: 0,
-        },
-        grid: { display: false },
-        border: { display: false },
-    };
-    const valueScale: any = {
-        stacked: stacked,
-        min: percent ? 0 : props.range.min,
-        max: percent ? 100 : props.range.max,
-        ticks: {
-            callback: function (value: any)
-            {
-                if (percent)
-                    return 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 },
-    };
-
-    const options: ChartOptions<'bar'> = {
-        indexAxis: horizontal ? "y" : "x",
-        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 }) => percent
-                        ? `${dataset.label}: ${(raw as number).toFixed(1)}%`
-                        : `${dataset.label}: ${props.formatValue ? props.formatValue(raw as number) : raw}`,
-                },
-            },
-        },
-        scales: {
-            x: horizontal ? valueScale : categoryScale,
-            y: horizontal ? categoryScale : valueScale,
-        },
-    };
-
-    return (
-        <Bar
-            data={data}
-            options={options}
-            width={props.width ?? 320}
-            height={props.height ?? 240}
-        />
-    );
+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 { ColorOperation } from 'namirasoft-core';
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+
+export type NSChartBarMode = "grouped" | "stacked" | "percent";
+
+const toPercentDatasets = (dataset: DataSetItem[]): DataSetItem[] =>
+{
+    let totals: number[] = [];
+    dataset.forEach(item => item.data.forEach((value, index) => totals[index] = (totals[index] ?? 0) + (value || 0)));
+    return dataset.map(item => ({
+        ...item,
+        data: item.data.map((value, index) => totals[index] ? (value / totals[index]) * 100 : 0),
+    }));
+};
+
+const prepareDatasets = (dataset: DataSetItem[], mode: NSChartBarMode) =>
+{
+    let stacked = mode === "stacked" || mode === "percent";
+    let source = mode === "percent" ? toPercentDatasets(dataset) : dataset;
+    return source.map((item, index) => ({
+        label: item.label,
+        data: item.data,
+        backgroundColor: item.color ?? ColorOperation.at(index),
+        stack: stacked ? "stack" : `stack-${index}`,
+    }));
+};
+
+export interface DataSetItem
+{
+    label: string;
+    color?: string;
+    data: number[]
+};
+
+
+export interface NSChartBarProps extends IBaseComponentProps
+{
+    labels: string[];
+    dataset: DataSetItem[];
+    range: {
+        min: number,
+        max: number,
+    }
+    xTitle?: string;
+    mode?: NSChartBarMode;
+    horizontal?: boolean;
+    yGrid?: boolean;
+    height?: number;
+    width?: number;
+    formatValue?: (value: number) => string;
+}
+
+export function NSChartBar(props: NSChartBarProps)
+{
+    let mode: NSChartBarMode = props.mode ?? "grouped";
+    let stacked = mode === "stacked" || mode === "percent";
+    let percent = mode === "percent";
+    let horizontal = props.horizontal ?? false;
+
+    const data: ChartData<"bar", number[], string> = {
+        labels: props.labels,
+        datasets: prepareDatasets(props.dataset, mode)
+    };
+
+    const categoryScale: any = {
+        stacked: stacked,
+        ticks: {
+            font: { size: 12, weight: 400 },
+            color: '#141B5C',
+            maxRotation: horizontal ? 0 : 45,
+            minRotation: 0,
+        },
+        grid: { display: false },
+        border: { display: false },
+    };
+    const valueScale: any = {
+        stacked: stacked,
+        min: percent ? 0 : props.range.min,
+        max: percent ? 100 : props.range.max,
+        ticks: {
+            callback: function (value: any)
+            {
+                if (percent)
+                    return 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 },
+    };
+
+    const options: ChartOptions<'bar'> = {
+        indexAxis: horizontal ? "y" : "x",
+        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 }) => percent
+                        ? `${dataset.label}: ${(raw as number).toFixed(1)}%`
+                        : `${dataset.label}: ${props.formatValue ? props.formatValue(raw as number) : raw}`,
+                },
+            },
+        },
+        scales: {
+            x: horizontal ? valueScale : categoryScale,
+            y: horizontal ? categoryScale : valueScale,
+        },
+    };
+
+    return (
+        <Bar
+            data={data}
+            options={options}
+            width={props.width ?? 320}
+            height={props.height ?? 240}
+        />
+    );
 };

package/src/components/NSChartDoughnut.tsx

@@ -1,115 +1,115 @@
-/* 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';
-import { ColorOperation } from 'namirasoft-core';
-
-ChartJS.register(ArcElement, Tooltip, Legend, Title, SubTitle, CategoryScale, LinearScale, BarElement, PointElement, LineElement);
-
-export interface NSChartDoughnutProps extends IBaseComponentProps
-{
-	title: string;
-	datas: number[];
-	labels: string[]
-	labelTitle?: string;
-	valueTitle?: string;
-	formatValue?: (value: number) => string;
-	backgroundColors?: string[];
-	borderWidth?: number;
-}
-
-
-export function NSChartDoughnut(props: NSChartDoughnutProps)
-{
-	const options = {
-		responsive: true,
-		plugins: {
-			legend: {
-				display: true,
-				responsive: true,
-				position: "left" as "top",
-				labels: {
-					useBorderRadius: false,
-					borderRadius: 100,
-					boxWidth: 16,
-					color: '#141b5c',
-				},
-			},
-			title: {
-				display: false,
-				text: props.title,
-			},
-			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<'doughnut'> = {
-		labels: props.labels,
-		datasets: [
-			{
-				data: props.datas,
-				backgroundColor: props.backgroundColors ?? ColorOperation.generate(props.datas.length),
-				borderColor: "#ffffff",
-				borderWidth: props.borderWidth ?? 2
-			}
-		]
-	};
-	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 = 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 = (chart.options?.plugins?.title?.text as string) ?? "";
-			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';
+import { ColorOperation } from 'namirasoft-core';
+
+ChartJS.register(ArcElement, Tooltip, Legend, Title, SubTitle, CategoryScale, LinearScale, BarElement, PointElement, LineElement);
+
+export interface NSChartDoughnutProps extends IBaseComponentProps
+{
+	title: string;
+	datas: number[];
+	labels: string[]
+	labelTitle?: string;
+	valueTitle?: string;
+	formatValue?: (value: number) => string;
+	backgroundColors?: string[];
+	borderWidth?: number;
+}
+
+
+export function NSChartDoughnut(props: NSChartDoughnutProps)
+{
+	const options = {
+		responsive: true,
+		plugins: {
+			legend: {
+				display: true,
+				responsive: true,
+				position: "left" as "top",
+				labels: {
+					useBorderRadius: false,
+					borderRadius: 100,
+					boxWidth: 16,
+					color: '#141b5c',
+				},
+			},
+			title: {
+				display: false,
+				text: props.title,
+			},
+			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<'doughnut'> = {
+		labels: props.labels,
+		datasets: [
+			{
+				data: props.datas,
+				backgroundColor: props.backgroundColors ?? ColorOperation.generate(props.datas.length),
+				borderColor: "#ffffff",
+				borderWidth: props.borderWidth ?? 2
+			}
+		]
+	};
+	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 = 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 = (chart.options?.plugins?.title?.text as string) ?? "";
+			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>
+	);
 }