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

package/src/core/fetch/vfetch.js

@@ -1,42 +1,42 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-21 16:49:22
- * @FilePath     : /visualifyjs/src/core/fetch/vfetch.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-const fetchApi = async (
-	url,
-	method = 'GET',
-	body = null,
-	headers = {},
-	debug = false,
-) => {
-	// Setup for CORS and headers
-	let fetchOptions = {
-		method: method,
-		headers: {
-			'Content-Type': 'application/json',
-			...headers,
-		},
-		mode: debug ? 'cors' : 'same-origin',
-	};
-
-	// Add body for POST request
-	if (method === 'POST' && body) {
-		fetchOptions.body = JSON.stringify(body);
-	}
-
-	try {
-		const response = await fetch(url, fetchOptions);
-		if (!response.ok) {
-			throw new Error(`HTTP error! status: ${response.status}`);
-		}
-		return await response.json();
-	} catch (err) {
-		console.error('Fetch API Error:', err);
-		throw err;
-	}
-};
-
-export default fetchApi;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-21 16:49:22
+ * @FilePath     : /visualifyjs/src/core/fetch/vfetch.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+const fetchApi = async (
+	url,
+	method = 'GET',
+	body = null,
+	headers = {},
+	debug = false,
+) => {
+	// Setup for CORS and headers
+	let fetchOptions = {
+		method: method,
+		headers: {
+			'Content-Type': 'application/json',
+			...headers,
+		},
+		mode: debug ? 'cors' : 'same-origin',
+	};
+
+	// Add body for POST request
+	if (method === 'POST' && body) {
+		fetchOptions.body = JSON.stringify(body);
+	}
+
+	try {
+		const response = await fetch(url, fetchOptions);
+		if (!response.ok) {
+			throw new Error(`HTTP error! status: ${response.status}`);
+		}
+		return await response.json();
+	} catch (err) {
+		console.error('Fetch API Error:', err);
+		throw err;
+	}
+};
+
+export default fetchApi;

package/src/core/liveEditor.js

@@ -1,44 +1,44 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-01 22:51:45
- * @FilePath     : /visualifyjs/src/core/liveEditor.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React from 'react';
-import Recharts from './recharts';
-import { createRoot } from 'react-dom/client';
-import CodeEditorWithPreview from './modules/codeEditorWithPreview';
-import { VisualifyProvider } from './appContext';
-class LiveEditor extends Recharts {
-	constructor(config) {
-		super();
-		this.config = config;
-	}
-
-	mount(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>
-					<CodeEditorWithPreview config={this.config} />
-				</VisualifyProvider>,
-			);
-			console.log('mounted ' + selector, el);
-		} catch (e) {
-			console.error('Error mounting chart:', e);
-		}
-	}
-}
-
-export default LiveEditor;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-01 22:51:45
+ * @FilePath     : /visualifyjs/src/core/liveEditor.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React from 'react';
+import Recharts from './recharts';
+import { createRoot } from 'react-dom/client';
+import CodeEditorWithPreview from './modules/codeEditorWithPreview';
+import { VisualifyProvider } from './appContext';
+class LiveEditor extends Recharts {
+	constructor(config) {
+		super();
+		this.config = config;
+	}
+
+	mount(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>
+					<CodeEditorWithPreview config={this.config} />
+				</VisualifyProvider>,
+			);
+			console.log('mounted ' + selector, el);
+		} catch (e) {
+			console.error('Error mounting chart:', e);
+		}
+	}
+}
+
+export default LiveEditor;

package/src/core/modules/codeEditorWithPreview.js

@@ -1,104 +1,104 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-01 22:17:15
- * @FilePath     : /visualifyjs/src/core/modules/codeEditorWithPreview.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React, { useState } from 'react';
-import AceEditor from 'react-ace';
-import EChartSwitcher from './echartswitcher';
-import 'ace-builds/src-noconflict/mode-javascript';
-import 'ace-builds/src-noconflict/theme-monokai';
-
-const CodeEditorWithPreview = ({ config }) => {
-	const supportedThemes = ['', 'monokai'];
-	const supportedMode = ['javascript'];
-
-	const {
-		theme = '',
-		mode = 'javascript',
-		width,
-		height = '400px',
-		title = 'Rechart Preview',
-		editorProps = { $blockScrolling: true },
-	} = config;
-
-	if (!supportedThemes.includes(theme)) {
-		throw new Error(
-			`Theme '${theme}' not supported. Supported themes are: ${supportedThemes.join(
-				', ',
-			)}`,
-		);
-	}
-
-	if (!supportedMode.includes(mode)) {
-		throw new Error(
-			`Mode '${mode}' not supported. Supported modes are: ${supportedMode.join(
-				', ',
-			)}`,
-		);
-	}
-
-	const [code, setCode] = useState(config.code);
-
-	// Function to evaluate the code and return the chart options
-	const getChartOptions = () => {
-		try {
-			// eslint-disable-next-line no-new-func
-			const func = new Function(code);
-			return func()();
-		} catch (error) {
-			console.error('Error evaluating chart options:', error);
-			return {};
-		}
-	};
-
-	const blockStyles = {
-		display: 'flex',
-		justifyContent: 'space-between',
-	};
-	if (width) blockStyles.width = width;
-
-	const editorStyles = {
-		flexGrow: 1,
-		border: '1px solid #ddd',
-		borderRadius: '4px',
-		marginBottom: '10px',
-		width: '50%',
-	};
-
-	const editorTitleStyles = {
-		backgroundColor: '#f4f4f4',
-		padding: '10px',
-		borderBottom: '1px solid #ddd',
-		width: '100%',
-	};
-
-	return (
-		<div style={blockStyles}>
-			<div style={editorStyles}>
-				<div style={editorTitleStyles}>{title}</div>
-				<AceEditor
-					mode={mode}
-					theme={theme}
-					value={code}
-					onChange={setCode}
-					name={title}
-					editorProps={editorProps}
-					width='100%'
-					height={height}
-					setOptions={{
-						wrap: true,
-						useWorker: false,
-					}}
-				/>
-			</div>
-			<div style={{ width: '50%' }}>
-				<EChartSwitcher props={{ config: getChartOptions() }} />
-			</div>
-		</div>
-	);
-};
-
-export default CodeEditorWithPreview;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-01 22:17:15
+ * @FilePath     : /visualifyjs/src/core/modules/codeEditorWithPreview.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React, { useState } from 'react';
+import AceEditor from 'react-ace';
+import EChartSwitcher from './echartswitcher';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/theme-monokai';
+
+const CodeEditorWithPreview = ({ config }) => {
+	const supportedThemes = ['', 'monokai'];
+	const supportedMode = ['javascript'];
+
+	const {
+		theme = '',
+		mode = 'javascript',
+		width,
+		height = '400px',
+		title = 'Rechart Preview',
+		editorProps = { $blockScrolling: true },
+	} = config;
+
+	if (!supportedThemes.includes(theme)) {
+		throw new Error(
+			`Theme '${theme}' not supported. Supported themes are: ${supportedThemes.join(
+				', ',
+			)}`,
+		);
+	}
+
+	if (!supportedMode.includes(mode)) {
+		throw new Error(
+			`Mode '${mode}' not supported. Supported modes are: ${supportedMode.join(
+				', ',
+			)}`,
+		);
+	}
+
+	const [code, setCode] = useState(config.code);
+
+	// Function to evaluate the code and return the chart options
+	const getChartOptions = () => {
+		try {
+			// eslint-disable-next-line no-new-func
+			const func = new Function(code);
+			return func()();
+		} catch (error) {
+			console.error('Error evaluating chart options:', error);
+			return {};
+		}
+	};
+
+	const blockStyles = {
+		display: 'flex',
+		justifyContent: 'space-between',
+	};
+	if (width) blockStyles.width = width;
+
+	const editorStyles = {
+		flexGrow: 1,
+		border: '1px solid #ddd',
+		borderRadius: '4px',
+		marginBottom: '10px',
+		width: '50%',
+	};
+
+	const editorTitleStyles = {
+		backgroundColor: '#f4f4f4',
+		padding: '10px',
+		borderBottom: '1px solid #ddd',
+		width: '100%',
+	};
+
+	return (
+		<div style={blockStyles}>
+			<div style={editorStyles}>
+				<div style={editorTitleStyles}>{title}</div>
+				<AceEditor
+					mode={mode}
+					theme={theme}
+					value={code}
+					onChange={setCode}
+					name={title}
+					editorProps={editorProps}
+					width='100%'
+					height={height}
+					setOptions={{
+						wrap: true,
+						useWorker: false,
+					}}
+				/>
+			</div>
+			<div style={{ width: '50%' }}>
+				<EChartSwitcher props={{ config: getChartOptions() }} />
+			</div>
+		</div>
+	);
+};
+
+export default CodeEditorWithPreview;

package/src/core/modules/echarts/common.js

@@ -1,20 +1,20 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-01 21:43:02
- * @FilePath     : /visualifyjs/src/core/modules/echarts/common.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-const minimumPreset = {
-	title: {},
-	tooltip: {},
-	legend: {
-		top: 25,
-	},
-	xAxis: {},
-	yAxis: {},
-	series: [],
-	// ... other default settings for charts
-};
-
-export default minimumPreset;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-01 21:43:02
+ * @FilePath     : /visualifyjs/src/core/modules/echarts/common.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+const minimumPreset = {
+	title: {},
+	tooltip: {},
+	legend: {
+		top: 25,
+	},
+	xAxis: {},
+	yAxis: {},
+	series: [],
+	// ... other default settings for charts
+};
+
+export default minimumPreset;

package/src/core/modules/echarts/presetHandler.js

@@ -1,41 +1,41 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-02 21:36:01
- * @FilePath     : /visualifyjs/src/core/modules/echarts/presetHandler.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-// presetHandler.js
-import minimumPreset from './common';
-import mmtrbc from './presets/mmtrbc';
-import esodev_chromium from './presets/esodev.chromium';
-import esodev_codex from './presets/esodev.codex';
-import esodev_visium from './presets/esodev.visium';
-
-// Example embedded presets
-const embeddedPresets = {
-	mmtrbc: mmtrbc,
-	esodev_chromium: esodev_chromium,
-	esodev_codex: esodev_codex,
-	esodev_visium: esodev_visium,
-	// 'presetName': { ...preset data... }
-	// Define embedded presets here
-};
-
-// Function to fetch preset data from a URL
-export const fetchPresetFromURL = async (url) => {
-	try {
-		const response = await fetch(url);
-		const data = await response.json();
-		return data;
-	} catch (error) {
-		console.error('Error fetching preset from URL:', error);
-		return null; // Return null or appropriate error handling
-	}
-};
-
-// Function to get an embedded preset based on a string key
-export const getEmbeddedPreset = (presetKey) => {
-	// Return minimumPreset if preset not found
-	return embeddedPresets[presetKey] || minimumPreset;
-};
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-02 21:36:01
+ * @FilePath     : /visualifyjs/src/core/modules/echarts/presetHandler.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+// presetHandler.js
+import minimumPreset from './common';
+import mmtrbc from './presets/mmtrbc';
+import esodev_chromium from './presets/esodev.chromium';
+import esodev_codex from './presets/esodev.codex';
+import esodev_visium from './presets/esodev.visium';
+
+// Example embedded presets
+const embeddedPresets = {
+	mmtrbc: mmtrbc,
+	esodev_chromium: esodev_chromium,
+	esodev_codex: esodev_codex,
+	esodev_visium: esodev_visium,
+	// 'presetName': { ...preset data... }
+	// Define embedded presets here
+};
+
+// Function to fetch preset data from a URL
+export const fetchPresetFromURL = async (url) => {
+	try {
+		const response = await fetch(url);
+		const data = await response.json();
+		return data;
+	} catch (error) {
+		console.error('Error fetching preset from URL:', error);
+		return null; // Return null or appropriate error handling
+	}
+};
+
+// Function to get an embedded preset based on a string key
+export const getEmbeddedPreset = (presetKey) => {
+	// Return minimumPreset if preset not found
+	return embeddedPresets[presetKey] || minimumPreset;
+};