namirasoft-site-react 1.4.559 → 1.4.561

package/src/main.ts

@@ -38,6 +38,7 @@ export * from "./components/NSBoxMoney";
 export * from "./components/NSBoxSensitive";
 export * from "./components/NSBoxPhone";
 export * from "./components/NSBoxRadio";
+export * from "./components/NSBoxOptions";
 export * from "./components/NSBoxSchemaBase";
 export * from "./components/NSBoxSchemaVariable";
 export * from "./components/NSBoxSearch";
@@ -60,11 +61,13 @@ export * from "./components/NSCard";
 export * from "./components/NSCardScreenshot"
 
 // Chart
-export * from "./components/NSChartColumn";
+export * from "./components/NSChartBar";
+export * from "./components/NSChartLine";
 export * from "./components/NSChartDoughnut";
 export * from "./components/NSChartPie";
 export * from "./components/NSChartRange";
-export * from "./components/NSChartTable";
+export * from "./components/NSTableChart";
+export * from "./ColorOperation";
 
 // Copy
 export * from "./components/NSCopyBox";

package/dist/components/NSChartColumn.js

@@ -1,95 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Bar } from 'react-chartjs-2';
-import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
-import Styles from "./NSChartColumn.module.css";
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
-const prepareDatasets = (dataset) => {
-    const colors = [
-        "#7583E6",
-        "#C3406C",
-        "#3AA498",
-        "#8C4BCB",
-        "#DB7E46",
-        "#2962AA",
-        "#95274A",
-        "#95274A",
-        "#95274A",
-        "#977E19",
-    ];
-    return dataset.map((item, index) => {
-        var _a;
-        return ({
-            label: item.label,
-            data: item.data,
-            backgroundColor: (_a = item.color) !== null && _a !== void 0 ? _a : colors[index % colors.length],
-            stack: "stack",
-        });
-    });
-};
-;
-export function NSChartColumn(props) {
-    var _a, _b, _c, _d, _e;
-    const data = {
-        labels: props.labels,
-        datasets: prepareDatasets(props.dataset)
-    };
-    const options = {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-            legend: {
-                display: true,
-                position: "bottom"
-            },
-            tooltip: {
-                enabled: true,
-                callbacks: {
-                    label: ({ dataset, raw }) => `${dataset.label}: ${props.formatValue ? props.formatValue(raw) : 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) : value;
-                    },
-                    font: {
-                        size: 12,
-                        weight: 400,
-                    },
-                    color: '#141B5C',
-                },
-                grid: {
-                    display: props.yGrid,
-                    color: "#E6EEF5"
-                },
-                border: {
-                    display: false,
-                },
-            },
-        },
-    };
-    return (_jsx("div", { style: Object.assign(Object.assign({}, props.style), { height: (_a = props.height) !== null && _a !== void 0 ? _a : 250 }), className: `${Styles.chart_column_container} ${(_c = (_b = props.classList) === null || _b === void 0 ? void 0 : _b.join(" ")) !== null && _c !== void 0 ? _c : ""}`, children: _jsx(Bar, { data: data, options: options, width: (_d = props.width) !== null && _d !== void 0 ? _d : 320, height: (_e = props.height) !== null && _e !== void 0 ? _e : 250 }) }));
-}
-;
-//# sourceMappingURL=NSChartColumn.js.map

package/dist/components/NSChartColumn.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NSChartColumn.js","sourceRoot":"","sources":["../../src/components/NSChartColumn.tsx"],"names":[],"mappings":"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"}

package/dist/components/NSChartColumn.module.css

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

package/dist/components/NSChartTable.d.ts

@@ -1,15 +0,0 @@
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-interface DataType {
-    key: string;
-    job: string;
-    totalHours: number;
-    percentage: number;
-    cost: number;
-    income: number;
-    benefit: number;
-}
-interface CustomTableProps extends IBaseComponentProps {
-    data: DataType[];
-}
-export declare function NSChartTable(props: CustomTableProps): import("react").JSX.Element;
-export {};

package/dist/components/NSChartTable.js

@@ -1,63 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Table, Progress } from 'antd';
-import Styles from "./NSChartTable.module.css";
-export function NSChartTable(props) {
-    var _a, _b;
-    const getColor = (percentage) => {
-        if (percentage >= 75)
-            return '#368F01';
-        if (percentage >= 60)
-            return ' #44B400';
-        if (percentage >= 50)
-            return '#56E500';
-        if (percentage >= 25)
-            return '#FAFF00';
-        return 'red';
-    };
-    const columns = [
-        {
-            title: '',
-            dataIndex: 'job',
-            key: 'job',
-        },
-        {
-            title: 'Total Hours',
-            dataIndex: 'totalHours',
-            key: 'totalHours',
-            render: (text) => _jsx("div", { children: text }),
-        },
-        {
-            title: 'Percentage',
-            dataIndex: 'percentage',
-            key: 'percentage',
-            render: (text) => _jsxs("div", { children: [text, "%"] }),
-        },
-        {
-            title: 'Cost',
-            dataIndex: 'cost',
-            key: 'cost',
-            render: (text) => _jsxs("div", { children: ["$", text] }),
-        },
-        {
-            title: 'Income',
-            dataIndex: 'income',
-            key: 'income',
-            render: (text) => _jsxs("div", { children: ["$", text] }),
-        },
-        {
-            title: 'Benefit',
-            dataIndex: 'benefit',
-            key: 'benefit',
-            render: (text) => _jsxs("div", { children: ["$", text] }),
-        },
-        {
-            title: '',
-            dataIndex: 'totalHours',
-            key: 'chart',
-            render: (totalHours, record) => (_jsx(Progress, { percent: (totalHours / 8) * 100, showInfo: false, strokeColor: getColor(record.percentage), size: { width: 310, height: 16 } })),
-        },
-    ];
-    return (_jsx("div", { className: `${(_b = (_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")) !== null && _b !== void 0 ? _b : ""}`, style: props.style, children: _jsx(Table, { columns: columns, dataSource: props.data, pagination: false, scroll: { x: 800 }, rowClassName: () => Styles.custom_row }) }));
-}
-;
-//# sourceMappingURL=NSChartTable.js.map

package/dist/components/NSChartTable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NSChartTable.js","sourceRoot":"","sources":["../../src/components/NSChartTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAGvC,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAkB9C,MAAM,UAAU,YAAY,CAAC,KAAuB;;IAEnD,MAAM,QAAQ,GAAG,CAAC,UAAkB,EAAE,EAAE;QAEvC,IAAI,UAAU,IAAI,EAAE;YAAE,OAAO,SAAS,CAAC;QACvC,IAAI,UAAU,IAAI,EAAE;YAAE,OAAO,UAAU,CAAC;QACxC,IAAI,UAAU,IAAI,EAAE;YAAE,OAAO,SAAS,CAAC;QACvC,IAAI,UAAU,IAAI,EAAE;YAAE,OAAO,SAAS,CAAC;QACvC,OAAO,KAAK,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,OAAO,GAA2B;QACvC;YACC,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,KAAK;YAChB,GAAG,EAAE,KAAK;SACV;QACD;YACC,KAAK,EAAE,aAAa;YACpB,SAAS,EAAE,YAAY;YACvB,GAAG,EAAE,YAAY;YACjB,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,wBAAM,IAAI,GAAO;SAC3C;QACD;YACC,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE,YAAY;YACvB,GAAG,EAAE,YAAY;YACjB,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,0BAAM,IAAI,SAAQ;SAC5C;QACD;YACC,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,MAAM;YACjB,GAAG,EAAE,MAAM;YACX,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,+BAAO,IAAI,IAAO;SAC5C;QACD;YACC,KAAK,EAAE,QAAQ;YACf,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,QAAQ;YACb,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,+BAAO,IAAI,IAAO;SAC5C;QACD;YACC,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE,SAAS;YACpB,GAAG,EAAE,SAAS;YACd,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,+BAAO,IAAI,IAAO;SAC5C;QACD;YACC,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,YAAY;YACvB,GAAG,EAAE,OAAO;YACZ,MAAM,EAAE,CAAC,UAAkB,EAAE,MAAgB,EAAE,EAAE,CAAC,CACjD,KAAC,QAAQ,IACR,OAAO,EAAE,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,GAAG,EAC/B,QAAQ,EAAE,KAAK,EACf,WAAW,EAAE,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,EACxC,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,GAC/B,CACF;SACD;KACD,CAAC;IAEF,OAAO,CACN,cAAK,SAAS,EAAE,GAAG,MAAA,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,mCAAI,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,YACxE,KAAC,KAAK,IACL,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,KAAK,CAAC,IAAI,EACtB,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,EAClB,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,GACpC,GACG,CACN,CAAC;AACH,CAAC;AAAA,CAAC"}

package/dist/components/NSChartTable.module.css

@@ -1,22 +0,0 @@
-.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/NSChartColumn.module.css

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

package/src/components/NSChartColumn.tsx

@@ -1,131 +0,0 @@
-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/NSChartTable.module.css

@@ -1,22 +0,0 @@
-.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 +0,0 @@
-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>
-	);
-};