visualifyjs 2.5.3-2.dev → 2.5.3-9-dev

package/src/core/pages/error.js

@@ -1,27 +1,27 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-23 13:22:50
- * @FilePath     : /visualifyjs/src/core/pages/error.js
- * @Description  : 
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React from 'react';
-
-function Error({ message, style }) {
-	return (
-		<div
-			style={{
-				display: 'flex',
-				alignItems: 'center',
-				justifyContent: 'center',
-				height: '100%',
-				color: 'red',
-				...style,
-			}}>
-			{/* Display the error message */}
-			<p>{message}</p>
-		</div>
-	);
-}
-
-export default Error;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-23 13:22:50
+ * @FilePath     : /visualifyjs/src/core/pages/error.js
+ * @Description  : 
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React from 'react';
+
+function Error({ message, style }) {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				height: '100%',
+				color: 'red',
+				...style,
+			}}>
+			{/* Display the error message */}
+			<p>{message}</p>
+		</div>
+	);
+}
+
+export default Error;

package/src/core/pages/jsonPage.js

@@ -1,62 +1,62 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-11-29 21:20:55
- * @FilePath     : /visualifyjs/src/core/pages/jsonPage.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React, { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import NotFoundPage from './404';
-import fetchJson from '../fetch/json';
-import LayoutParser from '../widgets/layout';
-import Vcontroller from '../widgets/controller';
-
-const JsonPage = () => {
-	const [jsonData, setJsonData] = useState(null);
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState(null);
-	const location = useLocation();
-
-	useEffect(() => {
-		const routerpath = location.pathname.replace(/^\/|\.json$/g, '');
-		const jsonurl =
-			routerpath === ''
-				? 'home'
-				: routerpath.endsWith('/')
-				? routerpath + 'home'
-				: routerpath;
-		//console.log('JsonPage jsonurl:', jsonurl);
-		if (jsonurl) {
-			setLoading(true);
-			setError(null);
-
-			fetchJson(jsonurl)
-				.then((data) => {
-					setJsonData(data);
-					setLoading(false);
-				})
-				.catch((err) => {
-					setError(err);
-					setLoading(false);
-				});
-		}
-	}, [location.pathname]); // React to changes in pathname
-
-	if (loading) {
-		return <div>Loading...</div>;
-	}
-	if (error || !jsonData) {
-		return <NotFoundPage page={location.pathname} />;
-	}
-
-	return (
-		<>
-			<LayoutParser config={jsonData.layout}>
-				<Vcontroller components={jsonData.components} />
-			</LayoutParser>
-		</>
-	);
-};
-
-export default JsonPage;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-11-29 21:20:55
+ * @FilePath     : /visualifyjs/src/core/pages/jsonPage.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React, { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import NotFoundPage from './404';
+import fetchJson from '../fetch/json';
+import LayoutParser from '../widgets/layout';
+import Vcontroller from '../widgets/controller';
+
+const JsonPage = () => {
+	const [jsonData, setJsonData] = useState(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const location = useLocation();
+
+	useEffect(() => {
+		const routerpath = location.pathname.replace(/^\/|\.json$/g, '');
+		const jsonurl =
+			routerpath === ''
+				? 'home'
+				: routerpath.endsWith('/')
+				? routerpath + 'home'
+				: routerpath;
+		//console.log('JsonPage jsonurl:', jsonurl);
+		if (jsonurl) {
+			setLoading(true);
+			setError(null);
+
+			fetchJson(jsonurl)
+				.then((data) => {
+					setJsonData(data);
+					setLoading(false);
+				})
+				.catch((err) => {
+					setError(err);
+					setLoading(false);
+				});
+		}
+	}, [location.pathname]); // React to changes in pathname
+
+	if (loading) {
+		return <div>Loading...</div>;
+	}
+	if (error || !jsonData) {
+		return <NotFoundPage page={location.pathname} />;
+	}
+
+	return (
+		<>
+			<LayoutParser config={jsonData.layout}>
+				<Vcontroller components={jsonData.components} />
+			</LayoutParser>
+		</>
+	);
+};
+
+export default JsonPage;

package/src/core/pages/loading.js

@@ -1,44 +1,44 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-23 13:22:33
- * @FilePath     : /visualifyjs/src/core/pages/Loading.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React from 'react';
-import Error from './error';
-import CircularProgress from '../widgets/circularProgress';
-
-function Loading({
-	message,
-	style,
-	msgStyle,
-	ProgressColor = 'primary',
-	error = false,
-}) {
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column', // Added to stack elements vertically
-				alignItems: 'center',
-				justifyContent: 'center',
-				height: '100%',
-				...style,
-			}}>
-			<CircularProgress color={ProgressColor} />
-			<div style={{ marginTop: '10px', ...msgStyle }}>
-				{error ? (
-					<Error
-						message={message}
-						style={msgStyle}
-					/>
-				) : (
-					<p>{message}</p>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default Loading;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-23 13:22:33
+ * @FilePath     : /visualifyjs/src/core/pages/Loading.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React from 'react';
+import Error from './error';
+import CircularProgress from '../widgets/circularProgress';
+
+function Loading({
+	message,
+	style,
+	msgStyle,
+	ProgressColor = 'primary',
+	error = false,
+}) {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column', // Added to stack elements vertically
+				alignItems: 'center',
+				justifyContent: 'center',
+				height: '100%',
+				...style,
+			}}>
+			<CircularProgress color={ProgressColor} />
+			<div style={{ marginTop: '10px', ...msgStyle }}>
+				{error ? (
+					<Error
+						message={message}
+						style={msgStyle}
+					/>
+				) : (
+					<p>{message}</p>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default Loading;

package/src/core/parser/echart.data.js

@@ -1,183 +1,183 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-02 16:52:58
- * @FilePath     : /visualifyjs/src/core/parser/echart.data.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import { getArrayEl, _handleSeries } from './echart.series';
-import {
-	_parsePeakvalley,
-	_parseMarkArea,
-	_parseMarkLine,
-} from './echart.features';
-
-const _parser_data = (options = {}, preset = {}) => {
-	// Parse the custom options
-	const parsedOptions = {
-		...preset,
-		yAxis: { ...preset.yAxis },
-		xAxis: { ...preset.xAxis },
-		legend: { ...preset.legend },
-		title: { ...preset.title },
-		tooltip: { ...preset.tooltip },
-		// ... other default settings for charts
-		series: [],
-	};
-
-	// Initialize totalValues array if percentage mode is active
-	let totalValues = options.percentage
-		? new Array(options.xAxis.length).fill(0)
-		: [];
-
-	// calculate total values if in percentage mode
-	if (options.percentage && options.data) {
-		Object.entries(options.data).forEach(([_, data]) => {
-			data.forEach((value, idx) => {
-				totalValues[idx] += value;
-			});
-		});
-	}
-
-	if (options.data && typeof options.data === 'object') {
-		parsedOptions.series = Object.entries(options.data).map(
-			([name, data], index) => {
-				let seriesObject = {
-					name,
-					type: getArrayEl(options.type, index),
-					data,
-					...(options.markArea && {
-						markArea: _parseMarkArea(options.markArea, index),
-					}),
-					...(options.markLine && {
-						markLine: _parseMarkLine(options.markLine, index),
-					}),
-					...(options.symbol && {
-						symbol: getArrayEl(options.symbol, index),
-					}),
-					...(options.symbolSize && {
-						symbolSize: getArrayEl(options.symbolSize, index),
-					}),
-					...(options.stack && {
-						stack: options.stack.includes(name)
-							? 'total'
-							: getArrayEl(options.stack, index),
-					}),
-					...(options.emphasis && {
-						emphasis: getArrayEl(options.emphasis, index),
-					}),
-				};
-
-				if (
-					options.percentage &&
-					(options.type === 'bar' || options.type === 'line')
-				) {
-					seriesObject.data = seriesObject.data.map(
-						(value, idx) => (value / totalValues[idx]) * 100,
-					);
-					seriesObject.stack = 'total';
-				}
-
-				if (options.waterfall) {
-					if (name === 'Placeholder' || name === options.waterfall) {
-						seriesObject.itemStyle = {
-							borderColor: 'transparent',
-							color: 'transparent',
-						};
-						seriesObject = {
-							...seriesObject,
-							emphasis: {
-								...seriesObject?.emphasis,
-								itemStyle: {
-									borderColor: 'transparent',
-									color: 'transparent',
-								},
-							},
-						};
-					}
-				}
-
-				_parsePeakvalley(options, seriesObject);
-
-				_handleSeries(options, seriesObject, index);
-
-				return seriesObject;
-			},
-		);
-	}
-
-	if (
-		(Array.isArray(options.type) && options.type.includes('radar')) ||
-		options.type === 'radar'
-	)
-		parsedOptions.radar = options.radar;
-
-	// Modify yAxis for percentage display
-	if (options.percentage) {
-		parsedOptions.yAxis = {
-			...parsedOptions.yAxis,
-			axisLabel: { formatter: '{value}%' },
-			max: 100,
-		};
-
-		parsedOptions.tooltip = {
-			trigger: 'axis',
-			formatter: percentageTooltipFormatter,
-		};
-	}
-
-	if (options.markArea || options.markLine) {
-		parsedOptions.tooltip = {
-			trigger: 'axis',
-			axisPointer: {
-				type: 'cross',
-			},
-		};
-	}
-
-	if (options.waterfall) {
-		parsedOptions.legend = {
-			...parsedOptions.legend,
-			data: parsedOptions.series
-				.map((series) => series.name)
-				.filter((name) => name !== 'Placeholder'),
-		};
-		parsedOptions.xAxis = {
-			...parsedOptions.xAxis,
-			splitLine: { show: false },
-		};
-
-		parsedOptions.tooltip = {
-			trigger: 'axis',
-			axisPointer: {
-				type: 'shadow',
-			},
-			formatter: function (params) {
-				var tar = params[1];
-				return (
-					tar.name +
-					'<br/>' +
-					tar.marker +
-					tar.seriesName +
-					' : ' +
-					tar.value
-				);
-			},
-		};
-	}
-
-	return parsedOptions;
-};
-
-export default _parser_data;
-
-export function percentageTooltipFormatter(params) {
-	let total = params.reduce((sum, item) => sum + item.value, 0);
-	let tooltipContent = params
-		.map((item) => {
-			let percentage = ((item.value / total) * 100).toFixed(2);
-			return `${item.marker}${item.seriesName}: ${percentage}%`;
-		})
-		.join('<br/>');
-	return `${params[0].axisValueLabel}<br/>${tooltipContent}`;
-}
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-02 16:52:58
+ * @FilePath     : /visualifyjs/src/core/parser/echart.data.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import { getArrayEl, _handleSeries } from './echart.series';
+import {
+	_parsePeakvalley,
+	_parseMarkArea,
+	_parseMarkLine,
+} from './echart.features';
+
+const _parser_data = (options = {}, preset = {}) => {
+	// Parse the custom options
+	const parsedOptions = {
+		...preset,
+		yAxis: { ...preset.yAxis },
+		xAxis: { ...preset.xAxis },
+		legend: { ...preset.legend },
+		title: { ...preset.title },
+		tooltip: { ...preset.tooltip },
+		// ... other default settings for charts
+		series: [],
+	};
+
+	// Initialize totalValues array if percentage mode is active
+	let totalValues = options.percentage
+		? new Array(options.xAxis.length).fill(0)
+		: [];
+
+	// calculate total values if in percentage mode
+	if (options.percentage && options.data) {
+		Object.entries(options.data).forEach(([_, data]) => {
+			data.forEach((value, idx) => {
+				totalValues[idx] += value;
+			});
+		});
+	}
+
+	if (options.data && typeof options.data === 'object') {
+		parsedOptions.series = Object.entries(options.data).map(
+			([name, data], index) => {
+				let seriesObject = {
+					name,
+					type: getArrayEl(options.type, index),
+					data,
+					...(options.markArea && {
+						markArea: _parseMarkArea(options.markArea, index),
+					}),
+					...(options.markLine && {
+						markLine: _parseMarkLine(options.markLine, index),
+					}),
+					...(options.symbol && {
+						symbol: getArrayEl(options.symbol, index),
+					}),
+					...(options.symbolSize && {
+						symbolSize: getArrayEl(options.symbolSize, index),
+					}),
+					...(options.stack && {
+						stack: options.stack.includes(name)
+							? 'total'
+							: getArrayEl(options.stack, index),
+					}),
+					...(options.emphasis && {
+						emphasis: getArrayEl(options.emphasis, index),
+					}),
+				};
+
+				if (
+					options.percentage &&
+					(options.type === 'bar' || options.type === 'line')
+				) {
+					seriesObject.data = seriesObject.data.map(
+						(value, idx) => (value / totalValues[idx]) * 100,
+					);
+					seriesObject.stack = 'total';
+				}
+
+				if (options.waterfall) {
+					if (name === 'Placeholder' || name === options.waterfall) {
+						seriesObject.itemStyle = {
+							borderColor: 'transparent',
+							color: 'transparent',
+						};
+						seriesObject = {
+							...seriesObject,
+							emphasis: {
+								...seriesObject?.emphasis,
+								itemStyle: {
+									borderColor: 'transparent',
+									color: 'transparent',
+								},
+							},
+						};
+					}
+				}
+
+				_parsePeakvalley(options, seriesObject);
+
+				_handleSeries(options, seriesObject, index);
+
+				return seriesObject;
+			},
+		);
+	}
+
+	if (
+		(Array.isArray(options.type) && options.type.includes('radar')) ||
+		options.type === 'radar'
+	)
+		parsedOptions.radar = options.radar;
+
+	// Modify yAxis for percentage display
+	if (options.percentage) {
+		parsedOptions.yAxis = {
+			...parsedOptions.yAxis,
+			axisLabel: { formatter: '{value}%' },
+			max: 100,
+		};
+
+		parsedOptions.tooltip = {
+			trigger: 'axis',
+			formatter: percentageTooltipFormatter,
+		};
+	}
+
+	if (options.markArea || options.markLine) {
+		parsedOptions.tooltip = {
+			trigger: 'axis',
+			axisPointer: {
+				type: 'cross',
+			},
+		};
+	}
+
+	if (options.waterfall) {
+		parsedOptions.legend = {
+			...parsedOptions.legend,
+			data: parsedOptions.series
+				.map((series) => series.name)
+				.filter((name) => name !== 'Placeholder'),
+		};
+		parsedOptions.xAxis = {
+			...parsedOptions.xAxis,
+			splitLine: { show: false },
+		};
+
+		parsedOptions.tooltip = {
+			trigger: 'axis',
+			axisPointer: {
+				type: 'shadow',
+			},
+			formatter: function (params) {
+				var tar = params[1];
+				return (
+					tar.name +
+					'<br/>' +
+					tar.marker +
+					tar.seriesName +
+					' : ' +
+					tar.value
+				);
+			},
+		};
+	}
+
+	return parsedOptions;
+};
+
+export default _parser_data;
+
+export function percentageTooltipFormatter(params) {
+	let total = params.reduce((sum, item) => sum + item.value, 0);
+	let tooltipContent = params
+		.map((item) => {
+			let percentage = ((item.value / total) * 100).toFixed(2);
+			return `${item.marker}${item.seriesName}: ${percentage}%`;
+		})
+		.join('<br/>');
+	return `${params[0].axisValueLabel}<br/>${tooltipContent}`;
+}