visualifyjs 2.5.3-2.dev

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

@@ -0,0 +1,57 @@
+import hilbert from 'hilbert';
+
+const selectPointsForDownsampling = (
+	points,
+	hilbertValues,
+	threshold = 1000,
+) => {
+	// Pair each point with its Hilbert value
+	const pointsWithHilbert = points.map((point, index) => ({
+		point,
+		hilbert: hilbertValues[index],
+	}));
+
+	// Sort by Hilbert value
+	pointsWithHilbert.sort((a, b) => a.hilbert - b.hilbert);
+
+	// Calculate the step size to achieve the target number of points
+	const step = Math.ceil(points.length / threshold);
+
+	// Select a subset of points
+	const downsampled = [];
+	for (let i = 0; i < points.length; i += step) {
+		downsampled.push(pointsWithHilbert[i].point);
+	}
+
+	return downsampled;
+};
+
+const calculateHilbertValue = (point, order = 16) => {
+	// Create a Hilbert curve instance
+	const hilbertInstance = new hilbert.Hilbert2d(); // Replace with the actual class name if different
+	return hilbertInstance.xy2d(point.x, point.y, order);
+};
+
+const downsampleSeries = (series, hilbertSettings) => {
+	const { order = 16, threshold } = hilbertSettings;
+
+	const downsampledSeries = series.map((data) => {
+		const hilbertValues = data.data.map((point) =>
+			calculateHilbertValue(point, order),
+		);
+		const downsampledData = selectPointsForDownsampling(
+			data.data,
+			hilbertValues,
+			threshold,
+		);
+
+		return {
+			...data,
+			data: downsampledData,
+		};
+	});
+
+	return downsampledSeries;
+};
+
+export default downsampleSeries;

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

@@ -0,0 +1,210 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-23 23:27:45
+ * @FilePath     : /visualifyjs/src/core/parser/echart.parser.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import conditionalFetch from '../fetch/condfetch';
+import { isEmpty } from 'lodash';
+
+const enableVisualMap = (series) => {
+	if (!series || series.length === 0) return false;
+	const seriesData = series[0].data;
+	if (!seriesData) return false;
+	// Check if the series data has z values (indicating 3D data)
+	return seriesData.some((dataPoint) => dataPoint.value.length === 3);
+};
+
+const _fetch_data = async (parser = {}, Options = {}, sharedData) => {
+	const { sources } = parser;
+
+	let fetched_data = {}; // response from api
+
+	const processSource = async (source) => {
+		let resp = await conditionalFetch(
+			source,
+			sharedData,
+			Options.title,
+			Options.visualify,
+		);
+		if (resp) fetched_data[source.name] = resp;
+	};
+
+	if (Array.isArray(sources)) {
+		await Promise.all(sources.map(processSource));
+	} else if (typeof sources === 'object') {
+		await processSource(sources);
+	}
+
+	if (isEmpty(fetched_data))
+		throw new Error(parser?.startup_msg ?? 'No data fetched from api');
+
+	return fetched_data;
+};
+
+export const _process_fetched_data = (
+	fetched_data,
+	parser = {},
+	Options = {},
+) => {
+	Options.series = __process_fetched_data(
+		fetched_data,
+		parser,
+		Options.visualify,
+	);
+	Options.legend.data = Options.series.map((item) => item.name);
+
+	if (!enableVisualMap(Options.series)) {
+		//console.log('disable visual map');
+		Options.visualMap = [];
+	}
+	return Options;
+};
+
+const __process_fetched_data = (
+	fetched_data,
+	parser_config,
+	visualify = {},
+) => {
+	//console.log('visualify', visualify);
+	const {
+		seriesBy = visualify?.seriesBy ?? null,
+		mapping = visualify?.mapping ?? {},
+		exclude = visualify?.exclude ?? [],
+		symbol = visualify?.symbol ?? null,
+		symbolSize = visualify?.symbolSize ?? null,
+		merger = visualify?.merger ?? null,
+		filter = visualify?.filter ?? null,
+	} = parser_config;
+	const { x = 'x', y = 'y', z = 'z', extra = [] } = mapping;
+	const aggregatedData = {};
+
+	for (const [key, data] of Object.entries(fetched_data)) {
+		//console.log('processing data from api', key, data);
+		if (!data) {
+			return Object.values(aggregatedData);
+		} else if (data && merger && merger[key]) {
+			/*
+			console.log(
+				`processing data from merger:`,
+				key,
+				`merger`,
+				merger[key],
+				`data`,
+				data,
+				`with`,
+				aggregatedData,
+			);
+			*/
+			// add extra properties to aggregatedData.data
+			Object.values(aggregatedData).forEach((item) => {
+				item.data.forEach((value) => {
+					if (merger[key].item in value) {
+						let tag = value[merger[key].item];
+						let val = data[tag];
+						if (merger[key].label) value[merger[key].label] = val;
+						if (merger[key].visualMap) value.value.push(val);
+					}
+				});
+			});
+		} else {
+			// if seriesBy is not defined, get the first key of data as the series
+			const seriesKey = seriesBy ?? Object.keys(data)[0];
+
+			if (data[seriesKey] === undefined || data === undefined) continue;
+			data[seriesKey].forEach((item, index) => {
+				if (exclude && exclude.includes(item)) return;
+
+				const extraProperties = {};
+				for (const property in mapping.extra) {
+					if (data[extra[property]]) {
+						extraProperties[property] =
+							data[extra[property]][index];
+					}
+				}
+
+				if (!data[x] || !data[y] || !parser_config.type) return;
+
+				const point = data[z]
+					? [data[x][index], data[y][index], data[z][index]]
+					: [data[x][index], data[y][index]];
+
+				if (!aggregatedData[item]) {
+					aggregatedData[item] = {
+						name: item,
+						type: parser_config.type,
+						data: [],
+					};
+					if (symbol) aggregatedData[item].symbol = symbol;
+					if (symbolSize)
+						aggregatedData[item].symbolSize = symbolSize;
+				}
+
+				aggregatedData[item].data.push({
+					value: point,
+					...extraProperties,
+				});
+			});
+		}
+	}
+
+	let processed_data = Object.values(aggregatedData);
+
+	if (filter) {
+		for (let filter_key of Object.keys(filter)) {
+			const filter_expression = filter[filter_key];
+			//console.log('filter', filter_key, filter_expression);
+			processed_data = processed_data.map((item) => {
+				const filteredData = item.data.filter((dataPoint) => {
+					try {
+						const value = dataPoint[filter_key];
+						if (value === undefined || value === null) return true;
+
+						const match =
+							filter_expression.match(/([><]=?)\s*(-?\d+)/);
+						if (!match)
+							throw new Error(
+								'Invalid filter expression for filter',
+							);
+
+						// Extract the operator and threshold value
+						const operator = match[1];
+						const threshold = parseInt(match[2]);
+						// Evaluate the filter expression using the function
+						return eval_filter(value, operator, threshold);
+					} catch (err) {
+						console.warn('error in filter', err);
+						return false;
+					}
+				});
+				return {
+					...item,
+					data: filteredData,
+				};
+			});
+		}
+	}
+
+	return processed_data;
+};
+
+// Define a function to evaluate filter expressions
+function eval_filter(value, operator, threshold) {
+	switch (operator) {
+		case '<':
+			return value < threshold;
+		case '<=':
+			return value <= threshold;
+		case '>':
+			return value > threshold;
+		case '>=':
+			return value >= threshold;
+		case '=':
+			return value === threshold;
+		default:
+			throw new Error('Invalid operator in filter expression');
+	}
+}
+
+export default _fetch_data;

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

@@ -0,0 +1,67 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-02 22:53:11
+ * @FilePath     : /visualifyjs/src/core/parser/echart.series.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+export function _handleSeries(options, seriesObject, index) {
+	setArrayEl(seriesObject, options, 'label', index);
+	setArrayEl(seriesObject, options, 'labelLine', index);
+	setArrayEl(seriesObject, options, 'itemStyle', index);
+	setArrayEl(seriesObject, options, 'emphasis', index);
+	// Handle Line Chart options
+	if (seriesObject.type === 'line') {
+		setArrayEl(seriesObject, options, 'smooth', index);
+		setArrayEl(seriesObject, options, 'step', index);
+		setArrayEl(seriesObject, options, 'areaStyle', index);
+	} else if (seriesObject.type === 'pie') {
+		setArrayEl(seriesObject, options, 'selectedMode', index);
+		setArrayEl(seriesObject, options, 'roseType', index);
+		if ('center' in options)
+			seriesObject.center = getArray(options.center, index);
+		if ('radius' in options)
+			seriesObject.radius = getArray(options.radius, index);
+	} else if (seriesObject.type === 'radar') {
+		if ('radar' in options && Array.isArray(options.radar))
+			seriesObject.radarIndex = index;
+	} else if (seriesObject.type === 'funnel') {
+		seriesObject.top = getArrayEl(options.top, index) ?? 60;
+		seriesObject.bottom = getArrayEl(options.bottom, index) ?? 60;
+		seriesObject.left = getArrayEl(options.left, index) ?? '10%';
+		setArrayEl(seriesObject, options, 'right', index);
+		seriesObject.width = getArrayEl(options.width, index) ?? '80%';
+		setArrayEl(seriesObject, options, 'height', index);
+		seriesObject.min = getArrayEl(options.min, index) ?? 0;
+		seriesObject.max = getArrayEl(options.max, index) ?? 100;
+		seriesObject.minSize = getArrayEl(options.minSize, index) ?? '0%';
+		seriesObject.maxSize = getArrayEl(options.maxSize, index) ?? '100%';
+		seriesObject.sort = getArrayEl(options.sort, index) ?? 'descending';
+		seriesObject.gap = getArrayEl(options.gap, index) ?? 0;
+		seriesObject.funnelAlign =
+			getArrayEl(options.funnelAlign, index) ?? 'center';
+		setArrayEl(seriesObject, options, 'z', index);
+	}
+}
+
+function setArrayEl(sereis, options, param, index) {
+	let val = getArrayEl(options[param], index);
+	if (param in options && val) sereis[param] = val;
+}
+
+// Helper function to get the type for each series
+export function getArrayEl(value, index) {
+	return Array.isArray(value)
+		? value[Math.min(index, value.length - 1)]
+		: value;
+}
+
+function getArray(value, index) {
+	let _inedx = Math.min(index, value.length - 1);
+	if (Array.isArray(value) && Array.isArray(value[_inedx]))
+		return value[_inedx];
+	else if (Array.isArray(value)) return value;
+	else return getArrayEl(value, index);
+}
+
+export default _handleSeries;

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

@@ -0,0 +1,76 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2024-01-21 19:18:05
+ * @FilePath     : /visualifyjs/src/core/parser/echart.types.js
+ * @Description  :
+ * Copyright (c) 2024 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+export function handle_alltypes_chart(type, Options) {
+	if (type === 'pie') return handle_pie_chart(Options);
+	if (type === 'radar') return handle_radar_chart(Options);
+	if (type === 'funnel') return handle_funnel_chart(Options);
+	return Options;
+}
+
+function handle_pie_chart(Options) {
+	const newOptions = {
+		...Options,
+		legend: {
+			...Options?.legend,
+			orient: 'vertical',
+			left: 'left',
+		},
+		emphasis: {
+			...Options?.emphasis,
+			itemStyle: {
+				shadowBlur: 10,
+				shadowOffsetX: 0,
+				shadowColor: 'rgba(0, 0, 0, 0.5)',
+			},
+		},
+		xAxis: {
+			show: false,
+		},
+		yAxis: {
+			show: false,
+		},
+	};
+	return newOptions;
+}
+
+function handle_radar_chart(Options) {
+	const newOptions = {
+		...Options,
+		radar: {
+			...Options?.radar,
+		},
+		xAxis: {
+			show: false,
+		},
+		yAxis: {
+			show: false,
+		},
+		legend: {
+			top: 0,
+		},
+	};
+	return newOptions;
+}
+
+
+function handle_funnel_chart(Options) {
+	const newOptions = {
+		...Options,
+		xAxis: {
+			show: false,
+		},
+		yAxis: {
+			show: false,
+		},
+		legend: {
+			top: 0,
+		},
+	};
+	return newOptions;
+}
+

package/src/core/parser/plotly.config.js

@@ -0,0 +1,10 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2024-01-14 14:43:20
+ * @FilePath     : /visualifyjs/src/core/parser/plotly.config.js
+ * @Description  : 
+ * Copyright (c) 2024 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+const handle_Config = async () => {};
+
+export default handle_Config;

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

@@ -0,0 +1,132 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2024-01-14 14:43:45
+ * @FilePath     : /visualifyjs/src/core/parser/plotly.data.js
+ * @Description  :
+ * Copyright (c) 2024 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import conditionalFetch from '../fetch/condfetch';
+import { isEmpty } from 'lodash';
+
+const handle_Data = async (parser = {}, Options = {}, sharedData) => {
+	const { sources } = parser;
+
+	let fetched_data = {}; // response from api
+
+	const processSource = async (source) => {
+		let resp = await conditionalFetch(
+			source,
+			sharedData,
+			Options.title,
+			Options.visualify,
+		);
+		if (resp) fetched_data[source.name] = resp;
+	};
+
+	if (Array.isArray(sources)) {
+		await Promise.all(sources.map(processSource));
+	} else if (typeof sources === 'object') {
+		await processSource(sources);
+	}
+
+	if (isEmpty(fetched_data))
+		throw new Error(parser?.startup_msg ?? 'No data fetched from api');
+
+	return fetched_data;
+};
+
+export default handle_Data;
+
+export const __process_fetched_data = (
+	fetched_data,
+	parser_config,
+	visualify = {},
+) => {
+	//console.log('visualify', visualify);
+	const {
+		seriesBy = visualify?.seriesBy ?? null,
+		mapping = visualify?.mapping ?? {},
+		exclude = visualify?.exclude ?? [],
+		symbol = visualify?.symbol ?? null,
+		symbolSize = visualify?.symbolSize ?? null,
+		merger = visualify?.merger ?? null,
+	} = parser_config;
+	const { x = 'x', y = 'y', z = 'z', extra = [] } = mapping;
+	const aggregatedData = {};
+
+	for (const [key, data] of Object.entries(fetched_data)) {
+		//console.log('processing data from api', key, data);
+		if (!data) {
+			return Object.values(aggregatedData);
+		} else if (data && merger && merger[key]) {
+            /*
+			console.log(
+				`Plotly processing data from merger:`,
+				key,
+				`merger`,
+				merger[key],
+				`data`,
+				data,
+				`with`,
+				aggregatedData,
+			);*/
+			// add extra properties to aggregatedData.data
+			Object.values(aggregatedData).forEach((item) => {
+				item.data.forEach((value) => {
+					if (merger[key].item in value) {
+						let tag = value[merger[key].item];
+						let val = data[tag];
+						if (merger[key].label) value[merger[key].label] = val;
+						if (merger[key].visualMap) value.value.push(val);
+					}
+				});
+			});
+		} else {
+			// if seriesBy is not defined, get the first key of data as the series
+			const seriesKey = seriesBy ?? Object.keys(data)[0];
+			if (
+				data[seriesKey] === undefined ||
+				data === undefined ||
+				!Array.isArray(data[seriesKey])
+			)
+				continue;
+			data[seriesKey].forEach((item, index) => {
+				if (exclude && exclude.includes(item)) return;
+
+				const extraProperties = {};
+				for (const property in mapping.extra) {
+					if (data[extra[property]]) {
+						extraProperties[property] =
+							data[extra[property]][index];
+					}
+				}
+
+				if (!data[x] || !data[y] || !parser_config.type) return;
+
+				const point = data[z]
+					? [data[x][index], data[y][index], data[z][index]]
+					: [data[x][index], data[y][index]];
+
+				if (!aggregatedData[item]) {
+					aggregatedData[item] = {
+						name: item,
+						type: parser_config.type,
+						data: [],
+					};
+					if (symbol) aggregatedData[item].symbol = symbol;
+					if (symbolSize)
+						aggregatedData[item].symbolSize = symbolSize;
+				}
+
+				aggregatedData[item].data.push({
+					value: point,
+					...extraProperties,
+				});
+			});
+		}
+	}
+
+	let processed_data = Object.values(aggregatedData);
+
+	return processed_data;
+};

package/src/core/parser/plotly.layout.js

@@ -0,0 +1,10 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2024-01-14 14:44:10
+ * @FilePath     : /visualifyjs/src/core/parser/plotly.layout.js
+ * @Description  : 
+ * Copyright (c) 2024 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+const handle_Layour = async () => {};
+
+export default handle_Layour;

package/src/core/parser/plotly.violin.js

@@ -0,0 +1,18 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2024-01-14 16:20:14
+ * @FilePath     : /visualifyjs/src/core/parser/plotly.violin.js
+ * @Description  :
+ * Copyright (c) 2024 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+
+export const handle_violin_plot = (processed_data) => {
+	const plotlyData = processed_data.map((item) => {
+		return {
+			type: item.type,
+			y: item.data.map((d) => d.value[2]),
+			name: item.name,
+		};
+	});
+	return plotlyData;
+};

package/src/core/recharts.js

@@ -0,0 +1,62 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-11-29 16:02:42
+ * @FilePath     : /visualifyjs/src/core/recharts.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import EChartSwitcher from './modules/echartswitcher';
+import { VisualifyProvider } from './appContext';
+
+class Recharts {
+	constructor(config = {}) {
+		//console.log('config', config);
+		const { el = null } = config;
+		// Default to empty object if nothing is passed
+		if (typeof el === 'string') {
+			this.selector = document.querySelector(el);
+			if (!this.selector) {
+				throw new Error(`Element not found with selector: ${el}`);
+			}
+		} else {
+			this.selector = el;
+		}
+		const { parser = null, advanced = null, ...rest } = config;
+		this.config = rest;
+		this.parser = parser;
+		this.advanced = advanced;
+	}
+
+	mount(selector = this.selector) {
+		const el =
+			typeof selector === 'string'
+				? document.querySelector(selector)
+				: selector;
+
+		if (!el)
+			throw new Error(`Element not found with selector: ${selector}`);
+
+		try {
+			// Assuming createRoot is imported from 'react-dom/client'
+			const charts = createRoot(el);
+			charts.render(
+				<VisualifyProvider>
+					<EChartSwitcher
+						props={{
+							config: this.config,
+							parser: this.parser,
+							advanced: this.advanced,
+						}}
+					/>
+				</VisualifyProvider>,
+			);
+			//console.log('mounted ' + selector, el);
+		} catch (e) {
+			console.error('Error mounting chart:', e);
+		}
+	}
+}
+
+export default Recharts;

package/src/core/router/alias.js

@@ -0,0 +1,49 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-04 12:47:02
+ * @FilePath     : /visualifyjs/src/core/router/alias.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import { Navigate, useLocation } from 'react-router-dom';
+
+const AliasRoute = ({ alias, children }) => {
+	const location = useLocation();
+
+	for (const pattern in alias) {
+		const regex = new RegExp(pattern);
+		if (regex.test(location.pathname)) {
+			const target = alias[pattern];
+
+			// Check if the target is defined and is a string
+			if (typeof target === 'string') {
+				// Check if target is a URL or a path
+				if (
+					target.startsWith('http://') ||
+					target.startsWith('https://')
+				) {
+					window.location.href = target;
+					return null;
+				}
+
+				// Redirect to the matched route
+				const newPath = location.pathname.replace(regex, target);
+				return (
+					<Navigate
+						to={newPath}
+						replace
+					/>
+				);
+			} else {
+				console.error(
+					`Alias target for pattern '${pattern}' is not defined or not a string.`,
+				);
+				continue; // Skip to the next pattern
+			}
+		}
+	}
+
+	return children;
+};
+
+export default AliasRoute;