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

package/docs/CLI.md

@@ -0,0 +1,15 @@
+# CLI tools for Visualify
+
+## Installation
+
+```bash
+npm install -g @visualify/cli
+```
+
+## Usage
+
+```bash
+visualify --help
+```
+
+## Commands

package/docs/{docs/README.md → README.md}

@@ -1,65 +1,41 @@
-## 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](quickstart.md) 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
+
+> 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](quickstart) guide, which providing detailed
+instructions to help you begin.
+
+## 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.
+
+    

package/docs/{docs/Rechart → Rechart}/bar.md

@@ -1,190 +1,190 @@
-<script defers>
-
-const Basic_Bar = {
-    code: `const getOption = () => {
-    return {
-        type: 'bar',
-        data: {
-            'PV': [256, 767, 1356, 2087, 803, 582, 432],
-        },
-		xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-	}
-};
-return getOption;`
-};
-
-const Group_Bar = {
-    code: `const getOption = () => {
-    return {
-        type: 'bar',
-        data: {
-            'PV': [256, 767, 1356, 2087, 803, 582, 432],
-            'UV': [287, 707, 1756, 1822, 987, 432, 322],
-        },
-		xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-	}
-};
-return getOption;`
-};
-
-const Stacked_Bar = {
-    code: `const getOption = () => {
-    return {
-        type: 'bar',
-        data: {
-            'PV': [256, 767, 1356, 2087, 803, 582, 432],
-            'UV': [287, 707, 1756, 1822, 987, 432, 322],
-        },
-		xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        areaStyle: [{color: 'red'}, {color: 'blue'}],
-        stack: [ 'PV', 'UV' ],
-	}
-};
-return getOption;`
-};
-
-
-const Percentage_Stacked_Bar = {
-    code: `const getOption = () => {
-    return {
-        type: 'bar',
-        data: {
-            'PV': [256, 767, 1356, 2087, 803, 582, 432],
-            'UV': [287, 707, 1756, 1822, 987, 432, 322],
-        },
-		xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        percentage: true,
-	}
-};
-return getOption;`
-};
-
-const Stacked_Horizontal_Bar = {
-    code: `const getOption = () => {
-    return {
-        type: 'bar',
-        data: {
-            'PV': [256, 767, 1356, 2087, 803, 582, 432],
-            'UV': [287, 707, 1756, 1822, 987, 432, 322].reverse(),
-        },
-		yAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        stack: [ 'PV', 'UV' ],
-	}
-};
-return getOption;`
-};
-
-const waterfall = {
-    code: `const getOption = () => {
-    return {
-        type: 'bar',
-        data: {
-            'Placeholder': [0, 1700, 1400, 1200, 300, 0],
-            'Life Cost': [2900, 1200, 300, 200, 900, 300],
-        },
-        xAxis: ['Total', 'Rent', 'Utility', 'Transport', 'Meals', 'Other'],
-        stack: 'total',
-        waterfall: true,
-    }
-};
-return getOption;`
-};
-
-const Basic_Area_bar = {
-    code: `const getOption = () => {
-    return {
-        title: 'Daily Electricity Usage',
-        type: 'bar',
-        data: {
-            'usage': [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
-            'usage2': [125, 280, 223, 260, 270, 300, 550, 343, 400, 390, 553, 213, 400, 223, 123, 750, 321, 123, 542, 135],
-        },
-		xAxis: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45'],
-        markArea: [
-            {
-                'xAxis': [{start:'06:15', end:'08:45', name: "High Demanding Period"}],
-                'yAxis': {start: 400, end: 600},
-            },
-            {
-                'xAxis': [{start:'00:00', end:'02:30', name: "Low Demanding Period"}, {start:'05:00',end:'06:15'}],
-                'data': [[{ name: 'avg to max', type: 'average'},{ type: 'max' }]],
-            }
-        ],
-	}
-};
-return getOption;`};
-
-const ex1 = new $visualify.LiveEditor(Basic_Bar).mount('#ex1');
-const ex2 = new $visualify.LiveEditor(Group_Bar).mount('#ex2');
-const ex3 = new $visualify.LiveEditor(Stacked_Bar).mount('#ex3');
-const ex4 = new $visualify.LiveEditor(Percentage_Stacked_Bar).mount('#ex4');
-const ex5 = new $visualify.LiveEditor(Stacked_Horizontal_Bar).mount('#ex5');
-const ex6 = new $visualify.LiveEditor(waterfall).mount('#ex6');
-const ex7 = new $visualify.LiveEditor(Basic_Area_bar).mount('#ex7');
-</script>
-
-# Line Chart
-
-## Basic Bar Chart
-
-<div id="ex1"></div>
-
-## Group Bar Chart
-
-<div id="ex2"></div>
-
-## Stacked Bar Chart
-
-<div id="ex3"></div>
-
-## Percentage Stacked Bar Chart
-
-<div id="ex4"></div>
-
-## Stacked Horizontal Bar Chart
-
-<div id="ex5"></div>
-
-## Waterfall Chart
-
-<div id="ex6"></div>
-
-## Basic Area Bar Chart
-
-<div id="ex7"></div>
-
-## Overall Configuration
-
-### Basic Configuration
-
-The basic configuration includes:
-
-| Attribute       | Type        | Description             | Choice                     | Default |
-| --------------- | ----------- | ----------------------- | -------------------------- | ------- |
-| title           | string      | The main title          | User-defined title         | -       |
-| subtitle        | string      | A secondary title       | User-defined subtitle      | -       |
-| width           | string      | The width dimension     | Any valid CSS width value  | -       |
-| height          | string      | The height dimension    | Any valid CSS height value | 400px   |
-| legend          | bool/object | show or hide legend     | False, User-defined legend | {}      |
-| xAxis           | array/false | The xAxis               | User-defined xAxis Data    | []      |
-| yAxis           | array/false | The yAxis               | User-defined yAxis Data    | []      |
-| label           | object      | The label               | User-defined label         | {}      |
-| labelLine       | object      | The labelLine           | User-defined labelLine     | {}      |
-| tooltip         | object      | The tooltip             | User-defined tooltip       | {}      |
-| xAxisLineshow   | bool        | show or hide xAxisLines | True, False                | true    |
-| yAxisLineshow   | bool        | show or hide yAxisLines | True, False                | true    |
-| xAxisLabelShow  | bool        | show or hide xAxisLabel | True, False                | true    |
-| yAxisLabelShow  | bool        | show or hide yAxisLabel | True, False                | true    |
-| xAxisLabelColor | string      | The xAxisLabelColor     | Any valid CSS color value  | -       |
-| yAxisLabelColor | string      | The yAxisLabelColor     | Any valid CSS color value  | -       |
-
-### Data Configuration
-
-| Attribute  | Type         | Description                 | Choice                              | Default   |
-| ---------- | ------------ | --------------------------- | ----------------------------------- | --------- |
-| data       | string       | The data                    | User-defined data                   | {}        |
-| type       | string/array | The type                    | 'line', 'bar'                       | undefined |
-| areaStyle  | object       | The area style              | {},[{color: 'red'},{color: 'blue'}] | {}        |
-| stack      | string/array | The stack                   | 'total',['x','y']                   | -         |
-| percentage | bool         | The percentage stacked mode | True, False                         | false     |
-| areaStyle  | object       | The area style              | {},[{color: 'red'},{color: 'blue'}] | {}        |
+<script defers>
+
+const Basic_Bar = {
+    code: `const getOption = () => {
+    return {
+        type: 'bar',
+        data: {
+            'PV': [256, 767, 1356, 2087, 803, 582, 432],
+        },
+		xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+	}
+};
+return getOption;`
+};
+
+const Group_Bar = {
+    code: `const getOption = () => {
+    return {
+        type: 'bar',
+        data: {
+            'PV': [256, 767, 1356, 2087, 803, 582, 432],
+            'UV': [287, 707, 1756, 1822, 987, 432, 322],
+        },
+		xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+	}
+};
+return getOption;`
+};
+
+const Stacked_Bar = {
+    code: `const getOption = () => {
+    return {
+        type: 'bar',
+        data: {
+            'PV': [256, 767, 1356, 2087, 803, 582, 432],
+            'UV': [287, 707, 1756, 1822, 987, 432, 322],
+        },
+		xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        areaStyle: [{color: 'red'}, {color: 'blue'}],
+        stack: [ 'PV', 'UV' ],
+	}
+};
+return getOption;`
+};
+
+
+const Percentage_Stacked_Bar = {
+    code: `const getOption = () => {
+    return {
+        type: 'bar',
+        data: {
+            'PV': [256, 767, 1356, 2087, 803, 582, 432],
+            'UV': [287, 707, 1756, 1822, 987, 432, 322],
+        },
+		xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        percentage: true,
+	}
+};
+return getOption;`
+};
+
+const Stacked_Horizontal_Bar = {
+    code: `const getOption = () => {
+    return {
+        type: 'bar',
+        data: {
+            'PV': [256, 767, 1356, 2087, 803, 582, 432],
+            'UV': [287, 707, 1756, 1822, 987, 432, 322].reverse(),
+        },
+		yAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        stack: [ 'PV', 'UV' ],
+	}
+};
+return getOption;`
+};
+
+const waterfall = {
+    code: `const getOption = () => {
+    return {
+        type: 'bar',
+        data: {
+            'Placeholder': [0, 1700, 1400, 1200, 300, 0],
+            'Life Cost': [2900, 1200, 300, 200, 900, 300],
+        },
+        xAxis: ['Total', 'Rent', 'Utility', 'Transport', 'Meals', 'Other'],
+        stack: 'total',
+        waterfall: true,
+    }
+};
+return getOption;`
+};
+
+const Basic_Area_bar = {
+    code: `const getOption = () => {
+    return {
+        title: 'Daily Electricity Usage',
+        type: 'bar',
+        data: {
+            'usage': [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
+            'usage2': [125, 280, 223, 260, 270, 300, 550, 343, 400, 390, 553, 213, 400, 223, 123, 750, 321, 123, 542, 135],
+        },
+		xAxis: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45'],
+        markArea: [
+            {
+                'xAxis': [{start:'06:15', end:'08:45', name: "High Demanding Period"}],
+                'yAxis': {start: 400, end: 600},
+            },
+            {
+                'xAxis': [{start:'00:00', end:'02:30', name: "Low Demanding Period"}, {start:'05:00',end:'06:15'}],
+                'data': [[{ name: 'avg to max', type: 'average'},{ type: 'max' }]],
+            }
+        ],
+	}
+};
+return getOption;`};
+
+const ex1 = new $visualify.LiveEditor(Basic_Bar).mount('#ex1');
+const ex2 = new $visualify.LiveEditor(Group_Bar).mount('#ex2');
+const ex3 = new $visualify.LiveEditor(Stacked_Bar).mount('#ex3');
+const ex4 = new $visualify.LiveEditor(Percentage_Stacked_Bar).mount('#ex4');
+const ex5 = new $visualify.LiveEditor(Stacked_Horizontal_Bar).mount('#ex5');
+const ex6 = new $visualify.LiveEditor(waterfall).mount('#ex6');
+const ex7 = new $visualify.LiveEditor(Basic_Area_bar).mount('#ex7');
+</script>
+
+# Line Chart
+
+## Basic Bar Chart
+
+<div id="ex1"></div>
+
+## Group Bar Chart
+
+<div id="ex2"></div>
+
+## Stacked Bar Chart
+
+<div id="ex3"></div>
+
+## Percentage Stacked Bar Chart
+
+<div id="ex4"></div>
+
+## Stacked Horizontal Bar Chart
+
+<div id="ex5"></div>
+
+## Waterfall Chart
+
+<div id="ex6"></div>
+
+## Basic Area Bar Chart
+
+<div id="ex7"></div>
+
+## Overall Configuration
+
+### Basic Configuration
+
+The basic configuration includes:
+
+| Attribute       | Type        | Description             | Choice                     | Default |
+| --------------- | ----------- | ----------------------- | -------------------------- | ------- |
+| title           | string      | The main title          | User-defined title         | -       |
+| subtitle        | string      | A secondary title       | User-defined subtitle      | -       |
+| width           | string      | The width dimension     | Any valid CSS width value  | -       |
+| height          | string      | The height dimension    | Any valid CSS height value | 400px   |
+| legend          | bool/object | show or hide legend     | False, User-defined legend | {}      |
+| xAxis           | array/false | The xAxis               | User-defined xAxis Data    | []      |
+| yAxis           | array/false | The yAxis               | User-defined yAxis Data    | []      |
+| label           | object      | The label               | User-defined label         | {}      |
+| labelLine       | object      | The labelLine           | User-defined labelLine     | {}      |
+| tooltip         | object      | The tooltip             | User-defined tooltip       | {}      |
+| xAxisLineshow   | bool        | show or hide xAxisLines | True, False                | true    |
+| yAxisLineshow   | bool        | show or hide yAxisLines | True, False                | true    |
+| xAxisLabelShow  | bool        | show or hide xAxisLabel | True, False                | true    |
+| yAxisLabelShow  | bool        | show or hide yAxisLabel | True, False                | true    |
+| xAxisLabelColor | string      | The xAxisLabelColor     | Any valid CSS color value  | -       |
+| yAxisLabelColor | string      | The yAxisLabelColor     | Any valid CSS color value  | -       |
+
+### Data Configuration
+
+| Attribute  | Type         | Description                 | Choice                              | Default   |
+| ---------- | ------------ | --------------------------- | ----------------------------------- | --------- |
+| data       | string       | The data                    | User-defined data                   | {}        |
+| type       | string/array | The type                    | 'line', 'bar'                       | undefined |
+| areaStyle  | object       | The area style              | {},[{color: 'red'},{color: 'blue'}] | {}        |
+| stack      | string/array | The stack                   | 'total',['x','y']                   | -         |
+| percentage | bool         | The percentage stacked mode | True, False                         | false     |
+| areaStyle  | object       | The area style              | {},[{color: 'red'},{color: 'blue'}] | {}        |