visualifyjs 2.5.3-2.dev

package/src/core/modules/replotly.js

@@ -0,0 +1,71 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2024-01-14 14:39:52
+ * @FilePath     : /visualifyjs/src/core/modules/replotly.js
+ * @Description  :
+ * Copyright (c) 2024 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React, { useEffect, useState } from 'react';
+import Plot from 'react-plotly.js';
+import { getPreset } from './replotly/presetHandler';
+import { useAppContext } from '../appContext';
+import handle_Data, { __process_fetched_data } from '../parser/plotly.data';
+import { handle_violin_plot } from '../parser/plotly.violin';
+
+const RePlotly = ({ props, style }) => {
+	const [data, setData] = useState(props.data ?? []);
+	const [layout, setLayout] = useState(props.layout ?? {});
+	const [config, setConfig] = useState(props.config ?? {});
+	const { sharedData } = useAppContext();
+
+	useEffect(() => {
+		const updatePlot = async () => {
+			const { settings, parser } = props;
+			let preset = getPreset(settings?.preset);
+			if (parser) {
+				try {
+					// fetch data from api
+					const fetched_data = await handle_Data(
+						parser,
+						preset.layout,
+						sharedData,
+					);
+					const processed_data = __process_fetched_data(
+						fetched_data,
+						parser,
+						preset.visualify,
+					);
+
+					if (parser.type === 'violin') {
+						preset.data = handle_violin_plot(processed_data);
+						setData(() => preset.data);
+					}
+				} catch (err) {
+					if (
+						err.message === 'No data fetched from api' &&
+						settings?.ignoreEmptyData
+					) {
+					} else console.log(err.message);
+				}
+			}
+
+			setData((data) => [...preset.data]);
+			setLayout((layout) => ({ ...preset.layout }));
+			setConfig((config) => ({ ...preset.config }));
+		};
+
+		updatePlot();
+	}, [props, sharedData]);
+
+	return (
+		<div style={style}>
+			<Plot
+				data={data}
+				layout={layout}
+				config={config}
+			/>
+		</div>
+	);
+};
+
+export default RePlotly;

package/src/core/pages/404.js

@@ -0,0 +1,50 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-11-30 21:58:47
+ * @FilePath     : /visualifyjs/src/core/pages/404.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React from 'react';
+import '../../_css/404.css';
+
+const NotFoundPage = ({ page, config = {} }) => {
+	const {
+		heading = (
+			<span>
+				Oops! This Page <span style={{ color: 'red' }}>{page}</span>{' '}
+				Could Not Be Found
+			</span>
+		),
+		content = 'SORRY BUT THE PAGE YOU ARE LOOKING FOR DOES NOT EXIST, HAVE BEEN REMOVED, NAME CHANGED, OR IS TEMPORARILY UNAVAILABLE',
+		button_text = 'BACK TO HOME',
+	} = config;
+
+	return (
+		<div id='colorlib-notfound'>
+			<div className='colorlib-notfound'>
+				<div className='colorlib-notfound-404'>
+					<h1>404</h1>
+				</div>
+				<h2 id='colorlib_404_customizer_page_heading'>{heading}</h2>
+				<div id='colorlib_404_customizer_content'>{content}</div>
+				<a
+					href={window.location.origin}
+					id='colorlib_404_customizer_button_text'>
+					{button_text}
+				</a>
+			</div>
+			<p className='colorlib-copyrigh'>
+				<span>404 Page Template designed by </span>
+				<a
+					href='https://colorlib.com/'
+					target='_blank'
+					rel='noopener noreferrer'>
+					Colorlib.
+				</a>
+			</p>
+		</div>
+	);
+};
+
+export default NotFoundPage;

package/src/core/pages/error.js

@@ -0,0 +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;

package/src/core/pages/jsonPage.js

@@ -0,0 +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;

package/src/core/pages/loading.js

@@ -0,0 +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;

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

@@ -0,0 +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}`;
+}

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

@@ -0,0 +1,125 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-03 13:01:48
+ * @FilePath     : /visualifyjs/src/core/parser/echart.features.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+
+export function _parsePeakvalley(options, seriesObject) {
+	if (options.valley || options.peak) {
+		seriesObject.markPoint = {};
+		seriesObject.markPoint.data = [];
+		if (options.peak) {
+			seriesObject.markPoint.data.push({
+				type: 'max',
+				name: 'Max',
+				label: {
+					formatter:
+						typeof options.peak === 'string' ? options.peak : 'Max',
+				},
+			});
+		}
+		if (options.valley) {
+			seriesObject.markPoint.data.push({
+				type: 'min',
+				name: 'Min',
+				label: {
+					formatter:
+						typeof options.valley === 'string'
+							? options.valley
+							: 'Min',
+				},
+			});
+		}
+	}
+}
+
+export function _parseMarkArea(markAreaOption, seriesIndex) {
+	const markAreaOptions = {};
+
+	const formatAreaData = (option) => {
+		let areas = [];
+
+		const processAxis = (axisData, axisName) => {
+			if (Array.isArray(axisData)) {
+				axisData.forEach((data) =>
+					areas.push([
+						{ [axisName]: data.start, name: data.name },
+						{ [axisName]: data.end },
+					]),
+				);
+			} else {
+				areas.push([
+					{ [axisName]: axisData.start, name: axisData.name },
+					{ [axisName]: axisData.end },
+				]);
+			}
+		};
+
+		if (option.xAxis) {
+			processAxis(option.xAxis, 'xAxis');
+		}
+		if (option.yAxis) {
+			processAxis(option.yAxis, 'yAxis');
+		}
+
+		return areas;
+	};
+
+	let areaData = [];
+	let selectedOption =
+		Array.isArray(markAreaOption) && seriesIndex < markAreaOption.length
+			? markAreaOption[seriesIndex]
+			: markAreaOption;
+
+	areaData = formatAreaData(selectedOption);
+	markAreaOptions.data = areaData;
+
+	// Add emphasis and other additional properties
+	Object.keys(selectedOption).forEach((key) => {
+		if (key === 'data') {
+			markAreaOptions[key] = markAreaOptions[key].concat(
+				selectedOption[key],
+			);
+		} else if (key !== 'xAxis' && key !== 'yAxis') {
+			markAreaOptions[key] = selectedOption[key];
+		}
+	});
+
+	return markAreaOptions;
+}
+
+export function _parseMarkLine(markLineOption, seriesIndex) {
+	const markLineOptions = {};
+
+	let selectedOption =
+		Array.isArray(markLineOption) && seriesIndex < markLineOption.length
+			? markLineOption[seriesIndex]
+			: markLineOption;
+
+	markLineOptions.emphasis = {
+		lineStyle: {
+			width: 5,
+			type: 'solid',
+		},
+	};
+
+	markLineOptions.blur = {
+		lineStyle: {
+			opacity: 0.5, // Example blur style
+		},
+	};
+
+	markLineOptions.lineStyle = {
+		type: 'dashed', // 'solid','dashed'
+		width: 3,
+	};
+
+	// Add additional properties from markLineOption
+	Object.keys(selectedOption).forEach((key) => {
+		markLineOptions[key] = selectedOption[key];
+	});
+
+	return markLineOptions;
+}

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

@@ -0,0 +1,147 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-02 11:56:41
+ * @FilePath     : /visualify.js/src/core/parser/echart.general.js
+ * @Description  :
+ *
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import { handle_alltypes_chart } from './echart.types';
+import { getArrayEl } from './echart.series';
+
+const _parser_gereral = (options = {}, preset = {}) => {
+	// Parse the custom options
+	const parsedOptions = handle_alltypes_chart(getArrayEl(options.type), {
+		...preset,
+	});
+
+	// Parse the common options
+	if ('title' in options) {
+		if (typeof options.title === 'string')
+			parsedOptions.title = {
+				...parsedOptions?.title,
+				text: options.title,
+			};
+		else parsedOptions.title = options.title;
+	}
+
+	if ('subtitle' in options) parsedOptions.title.subtext = options.subtitle;
+
+	if (options.legend === false) parsedOptions.legend = { show: false };
+	else if ('legend' in options)
+		parsedOptions.legend = { ...options.legend, ...options.legend };
+
+	if ('xAxis' in options) {
+		if (options.xAxis === false) parsedOptions.xAxis = { show: false };
+		else if (Array.isArray(options.xAxis)) {
+			parsedOptions.xAxis = {
+				...parsedOptions?.xAxis,
+				data: options.xAxis,
+			};
+		} else {
+			parsedOptions.xAxis = options.xAxis;
+		}
+	}
+
+	if ('yAxis' in options) {
+		if (options.yAxis === false) parsedOptions.yAxis = { show: false };
+		else if (Array.isArray(options.yAxis))
+			parsedOptions.yAxis = {
+				...parsedOptions?.yAxis,
+				data: options.yAxis,
+			};
+		else parsedOptions.yAxis = options.yAxis;
+	}
+
+	if ('xAxisLabel' in options) {
+		parsedOptions.xAxis = {
+			...parsedOptions?.xAxis,
+			name: options.xAxisLabel,
+		};
+	}
+
+	if ('yAxisLabel' in options) {
+		parsedOptions.yAxis = {
+			...parsedOptions?.yAxis,
+			name: options.yAxisLabel,
+		};
+	}
+
+	if ('xAxisLineshow' in options) {
+		parsedOptions.xAxis = {
+			...parsedOptions?.xAxis,
+			axisLine: {
+				...parsedOptions.xAxis?.axisLine,
+				show: options.xAxisLineshow,
+			},
+		};
+	}
+
+	if ('yAxisLineshow' in options) {
+		parsedOptions.yAxis = {
+			...parsedOptions?.yAxis,
+			axisLine: {
+				...parsedOptions.yAxis?.axisLine,
+				show: options.yAxisLineshow,
+			},
+		};
+	}
+
+	if ('xAxisLabelShow' in options) {
+		parsedOptions.xAxis = {
+			...parsedOptions?.xAxis,
+			axisLabel: {
+				...parsedOptions.xAxis?.axisLabel,
+				show: options.xAxisLabelShow,
+			},
+		};
+	}
+
+	if ('yAxisLabelShow' in options) {
+		parsedOptions.yAxis = {
+			...parsedOptions.yAxis,
+			axisLabel: {
+				...parsedOptions.yAxis?.axisLabel,
+				show: options.yAxisLabelShow,
+			},
+		};
+	}
+
+	if ('xAxisLabelColor' in options) {
+		parsedOptions.xAxis = {
+			...parsedOptions?.xAxis, // Copy existing xAxis properties
+			axisLabel: {
+				...parsedOptions.xAxis?.axisLabel, // Copy existing axisLabel properties
+				color: options.xAxisLabelColor,
+			},
+		};
+	}
+
+	if ('yAxisLabelColor' in options) {
+		parsedOptions.yAxis = {
+			...parsedOptions?.yAxis, // Copy existing yAxis properties
+			axisLabel: {
+				...parsedOptions.yAxis?.axisLabel, // Copy existing axisLabel properties
+				color: options.yAxisLabelColor,
+			},
+		};
+	}
+
+	if ('tooltip' in options) {
+		parsedOptions.tooltip = {
+			...parsedOptions?.tooltip,
+			...options.tooltip,
+		};
+	}
+
+	if ('toolbox' in options) {
+		parsedOptions.toolbox = {
+			...parsedOptions?.toolbox,
+			...options.toolbox,
+		};
+	}
+
+	return parsedOptions;
+};
+
+export default _parser_gereral;