visualifyjs 2.5.3-2.dev

package/docs/docs/CLI.md

@@ -0,0 +1,34 @@
+# CLI tools for Visualify
+
+## Description
+
+The Visualify.CLI command line interface organizes spatial data using R-tree, 
+for efficient data searching and loading. 
+By this means, data portals created by Visualifyjs are able to handle large-scale databases.
+
+## Installation
+
+```bash
+npm install -g @visualify/cli
+```
+
+## Usage
+
+To use Visualify.CLI, you can run the following command:
+
+-   init [path] - Create new documentation
+-   serve [path] - Run local server to preview site
+-   start [path] - Start a web server to serve the specified path
+-   load-json <path> - Load points from JSON file
+-   mapping [options] <path> - Create a mapping with optional keys
+-   rtree2d [options] <path> - Create a 2D R-tree
+-   help [command] - display help for command
+
+```bash
+visualify --help
+
+visualify init --help
+visualify serve --help
+visualify start --help
+visualify load-json --help
+```

package/docs/docs/README.md

@@ -0,0 +1,65 @@
+## 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.

package/docs/docs/Rechart/bar.md

@@ -0,0 +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'}] | {}        |

package/docs/docs/Rechart/funnel.md

@@ -0,0 +1,241 @@
+<script defers>
+
+const Basic_Funnel = {
+    code: `const getOption = () => {
+    return {
+        type: 'funnel',
+        data: {
+            'Funnel': [
+                { value: 60, name: 'APP' },
+                { value: 40, name: 'PC' },
+                { value: 20, name: 'Mobile' },
+                { value: 80, name: 'Wechat' },
+                { value: 100, name: 'Mini App' }
+            ],
+        },
+	}
+};
+return getOption;`
+};
+
+const Pyramid_Funnel = {
+    code: `const getOption = () => {
+    return {
+        type: 'funnel',
+        data: {
+            'Funnel': [
+                { value: 60, name: 'APP' },
+                { value: 40, name: 'PC' },
+                { value: 20, name: 'Mobile' },
+                { value: 80, name: 'Wechat' },
+                { value: 100, name: 'Mini App' }
+            ],
+        },
+        sort: 'ascending',
+        gap: 5,
+	}
+};
+return getOption;`
+};
+
+const More_Funnel = {
+    code: `const getOption = () => {
+    return {
+        type: 'funnel',
+        data: {
+            'Funnel': [
+                { value: 60, name: 'APP' },
+                { value: 40, name: 'PC' },
+                { value: 20, name: 'Mobile' },
+                { value: 80, name: 'Wechat' },
+                { value: 100, name: 'Mini App' }
+            ],
+        },
+        funnelAlign: 'left',
+        max: 99,
+        min: 5,
+        label: {
+            show: true,
+            position: 'outside',
+            fontSize: 12,
+        },
+        width: '70%',
+	}
+};
+return getOption;`
+};
+
+const Contrast_funnel = {
+    code: `const getOption = () => {
+    return {
+        type: 'funnel',
+        data: {
+            'Funnel 1': [
+                { value: 60, name: 'APP' },
+                { value: 40, name: 'PC' },
+                { value: 20, name: 'Mobile' },
+                { value: 80, name: 'Wechat' },
+                { value: 100, name: 'Mini App' }
+            ],
+            'Funnel 2': [
+                { value: 30, name: 'APP' },
+                { value: 10, name: 'PC' },
+                { value: 5, name: 'Mobile' },
+                { value: 50, name: 'Wechat' },
+                { value: 80, name: 'Mini App' }
+            ],
+        },
+        width: '80%',
+        z: [undefined, 100],
+        emphasis: [
+            {
+                label: {
+                    position: 'inside',
+                    formatter: '{b}Expected: {c}%'
+                }
+            },
+            {
+                label: {
+                    position: 'inside',
+                    formatter: '{b}Actual: {c}%'
+                }
+            }
+        ],
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c}%'
+        },
+        toolbox: {
+            feature: {
+                dataView: { readOnly: false },
+                restore: {},
+                saveAsImage: {}
+            }
+        }
+    }
+};
+return getOption;`
+};
+
+const Multiple_funnel = {
+    code: `const getOption = () => {
+    return {
+        type: 'funnel',
+        data: {
+            'Funnel 1': [
+                { value: 60, name: 'APP' },
+                { value: 40, name: 'PC' },
+                { value: 20, name: 'Mobile' },
+                { value: 80, name: 'Wechat' },
+                { value: 100, name: 'Mini App' }
+            ],
+            'Funnel 2': [
+                { value: 60, name: 'APP' },
+                { value: 40, name: 'PC' },
+                { value: 20, name: 'Mobile' },
+                { value: 80, name: 'Wechat' },
+                { value: 100, name: 'Mini App' }
+            ],
+        },
+        width: ['35%','35%'],
+        left: ['10%','55%'],
+        sort: [ 'descending', 'ascending'],
+        label: [
+            {
+                position: 'left',
+            },
+            {
+                position: 'right',
+            }
+        ],
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c}%'
+        },
+        toolbox: {
+            feature: {
+                dataView: { readOnly: false },
+                restore: {},
+                saveAsImage: {}
+            }
+        }
+    }
+};
+return getOption;`
+};
+
+const ex1 = new $visualify.LiveEditor(Basic_Funnel).mount('#ex1');
+const ex2 = new $visualify.LiveEditor(Pyramid_Funnel).mount('#ex2');
+const ex3 = new $visualify.LiveEditor(More_Funnel).mount('#ex3');
+const ex4 = new $visualify.LiveEditor(Contrast_funnel).mount('#ex4');
+const ex5 = new $visualify.LiveEditor(Multiple_funnel).mount('#ex5');
+</script>
+
+# Radar Chart
+
+## Basic Radar Chart
+
+<div id="ex1"></div>
+
+## Pyramid Funnel Chart
+
+<div id="ex2"></div>
+
+## More Attribute for Funnel Chart
+
+<div id="ex3"></div>
+
+## Contrast Funnel Chart
+
+<div id="ex4"></div>
+
+## Multiple Funnel Chart
+
+<div id="ex5"></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    |
+| sort        | string       | The sort        | 'ascending','descending'   | 'descending' |
+| gap         | number       | The gap         | Any valid number           | 0            |
+| funnelAlign | string       | The funnelAlign | 'left', 'right', 'center'  | 'center'     |
+| max         | number       | The max         | Any valid number           | 0            |
+| min         | number       | The min         | Any valid number           | 100          |
+| width       | string       | The width       | Any valid CSS width value  | '80%'        |
+| height      | string       | The height      | Any valid CSS height value | -            |
+| top         | string       | The top         | Any valid CSS height value | 60           |
+| bottom      | string       | The bottom      | Any valid CSS height value | 60           |
+| left        | string       | The left        | Any valid CSS height value | 10%          |
+| right       | string       | The right       | Any valid CSS height value | -            |
+| label       | object       | The label       | User-defined label         | {}           |
+| labelLine   | object       | The labelLine   | User-defined labelLine     | {}           |
+| itemStyle   | object       | The itemStyle   | User-defined itemStyle     | {}           |
+| emphasis    | object       | The emphasis    | User-defined emphasis      | {}           |