visualifyjs 2.5.3-2.dev → 3.0.0

package/README.md

@@ -1,59 +1,94 @@
-## Visualify
-
-> The magical data portal generator
->
-> Best mate for [Docsify](https://docsify.js.org/) to be deployed on GitHub
-> Pages
-
-## What it is
-
-Visualify takes the complexity out of generating data portal websites, which is
-inspired by [docsify](https://docsify.js.org/). Forget about manually writing
-React components or generating static HTML files. Visualify smartly loads and
-parses your configuration and data API, allowing you to provide the information
-directly in a JavaScript file. The result? Your data is beautifully displayed
-and visualized as a website, all with minimal effort on your part.
-
-To get started, simply create an `index.html` file and deploy it on GitHub Pages
-or your personal server.
-
-Here is the [Quick Start](https://visualify.pharmacy.arizona.edu/#/quickstart) guide, which providing detailed
-instructions to help you begin.
-
-## Pages Mode Vs. Reacharts Mode
-
-Visualify supports two modes: `pages` and `reacharts`. The `pages` mode is
-designed for creating a data portal website as the front router, while the
-`reacharts` mode is designed for creating a single page with multiple plots. The
-`reacharts` mode is the best mate for [Docsify](https://docsify.js.org/) to show
-the plots of your data.
-
-Pages mode will be the default mode if you don't specify the mode in the
-configuration. You can specify the mode in the configuration file by setting the
-`mode` field to `pages` or `reacharts`.
-
-```json
-{
-    "mode": "pages"
-}
-```
-
-## Features
-
--   **No Manual React Components**: Automatically handles the creation of React
-    components without the need for manual coding.
--   **Smart Configuration and Data Parsing**: Loads and parses your
-    configuration and data API, even if provided directly in a JavaScript file.
--   **Dynamic Website Visualization**: Transforms your data into a visually
-    appealing website on the fly.
--   **Easy Deployment**: Just create an `index.html` file with `*.json`
-    configuration and deploy it on GitHub Pages or your personal server.
--   **Best Mate for Docsify**: Visualify is the best mate for
-    [Docsify](https://docsify.js.org/) to show the plots of your data.
-
-## Showcases
-
--   [MmTrBC](https://visualify.pharmacy.arizona.edu/MmTrBC/): Zhou, Yizhuo, Ying Yang, Lihao Guo, Jun Qian, Jian Ge, Debora Sinner, Hongxu Ding, Andrea Califano, and Wellington V. Cardoso. "Airway basal cells show regionally distinct potential to undergo metaplastic differentiation." Elife 11 (2022): e80083.
--   [EsoDev](https://visualify.pharmacy.arizona.edu/EsoDev/): Yang, Ying, Carmel Grace McCullough, Lucas Seninge, Lihao Guo, Woo-Joo Kwon, Yongchun Z. Zhang, Nancy Yanzhe Li et al. "A Spatiotemporal and Machine-Learning Platform Accelerates the Manufacturing of hPSC-derived Esophageal Mucosa." bioRxiv (2023): 2023-10.
-
-    
+## Visualify.js
+
+> The magical data portal generator — best mate for [Docsify](https://docsify.js.org/)
+
+Visualify takes the complexity out of generating data portal websites. Forget about manually writing React components or generating static HTML files. Visualify smartly loads and parses your configuration and data API, allowing you to provide the information directly in a JavaScript file.
+
+[Quick Start](https://visualify.pharmacy.arizona.edu/#/quickstart) | [Documentation](https://visualify.pharmacy.arizona.edu/) | [Changelog](docs/CHANGELOG.md)
+
+## Usage
+
+### Charts Mode (Docsify integration)
+
+Embed interactive charts in your Docsify documentation:
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/visualify/visualify.js@release/dist/visualify-loader.js"></script>
+<script>
+  $visualify = { mode: 'charts' }
+
+  // Mount a chart
+  new $visualify.Recharts({
+    type: 'line',
+    title: 'Example',
+    data: { 'series1': [300, 280, 250, 260, 270] },
+  }).mount('#chart')
+</script>
+```
+
+### Pages Mode (Data portal)
+
+Build a full data portal website from JSON configuration:
+
+```html
+<script>
+  $visualify = {
+    el: '#root',
+    mode: 'pages',
+    name: 'My Data Portal',
+    nav: true,
+  }
+</script>
+<script src="https://cdn.jsdelivr.net/gh/visualify/visualify.js@release/dist/visualify-loader.js"></script>
+```
+
+### CLI
+
+```bash
+npm i -g visualifyjs
+
+visualify init my-project        # Initialize a new project
+visualify dev                    # Start dev server (auto-detect mode)
+visualify docs build             # Build static documentation
+visualify portal dev             # Start portal dev server
+visualify edit                   # Open visual editor
+```
+
+## Installation
+
+### Stable (npm)
+
+```bash
+npm install visualifyjs
+```
+
+### Beta (dev branch)
+
+Get the latest development build directly from GitHub:
+
+```bash
+npm install github:visualify/visualify.js#dev
+```
+
+Or via CDN (beta):
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/visualify/visualify.js@dev/dist/visualify-loader.js"></script>
+```
+
+> Beta builds are updated daily on the `dev` branch. For production use, install from npm.
+
+## Features
+
+- **Two modes**: Charts mode for Docsify integration, Pages mode for full data portals
+- **3D Visualization**: Scatter3D, Bar3D, Surface3D, Line3D via ECharts GL and Three.js
+- **Smart Configuration**: JSON-based configuration with TypeScript validation
+- **CDN Auto-loader**: Single `<script>` tag loads all dependencies automatically
+- **Internationalization**: 6 languages with RTL support
+- **Accessibility**: Keyboard navigation, ARIA labels, screen reader support
+- **Easy Deployment**: Deploy on GitHub Pages, personal server, or any static host
+
+## Showcases
+
+- [MmTrBC](https://visualify.pharmacy.arizona.edu/MmTrBC/) - Airway basal cells metaplastic differentiation (Zhou et al., Elife 2022)
+- [EsoDev](https://visualify.pharmacy.arizona.edu/EsoDev/) - Esophageal mucosa spatiotemporal platform (Yang et al., bioRxiv 2023)

package/config-overrides.js

@@ -1,31 +1,31 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-11-29 15:39:38
- * @FilePath     : /visualifyjs/config-overrides.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-let jsChunkCounter = -1;
-let cssChunkCounter = -1;
-
-module.exports = function override(config, env) {
-	if (env === 'production') {
-		// Change output filenames for the production build
-		config.output.filename = 'static/js/visualify.js';
-		config.output.chunkFilename = () =>
-			`static/js/visualify.chunk${jsChunkCounter++}.js`;
-
-		// Update MiniCssExtractPlugin filename and chunkFilename
-		const miniCssExtractPlugin = config.plugins.find(
-			(plugin) => plugin.constructor.name === 'MiniCssExtractPlugin',
-		);
-		if (miniCssExtractPlugin) {
-			miniCssExtractPlugin.options.filename = 'static/css/visualify.css';
-			miniCssExtractPlugin.options.chunkFilename = () =>
-				`static/css/visualify.chunk${cssChunkCounter++}.css`;
-		}
-	}
-	return config;
-};
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-11-29 15:39:38
+ * @FilePath     : /visualifyjs/config-overrides.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+let jsChunkCounter = -1;
+let cssChunkCounter = -1;
+
+module.exports = function override(config, env) {
+	if (env === 'production') {
+		// Change output filenames for the production build
+		config.output.filename = 'static/js/visualify.js';
+		config.output.chunkFilename = () =>
+			`static/js/visualify.chunk${jsChunkCounter++}.js`;
+
+		// Update MiniCssExtractPlugin filename and chunkFilename
+		const miniCssExtractPlugin = config.plugins.find(
+			(plugin) => plugin.constructor.name === 'MiniCssExtractPlugin',
+		);
+		if (miniCssExtractPlugin) {
+			miniCssExtractPlugin.options.filename = 'static/css/visualify.css';
+			miniCssExtractPlugin.options.chunkFilename = () =>
+				`static/css/visualify.chunk${cssChunkCounter++}.css`;
+		}
+	}
+	return config;
+};