visualifyjs 2.5.3

package/docs/docs/Rechart/radar.md

@@ -0,0 +1,253 @@
+<script defers>
+
+const Basic_Radar = {
+    code: `const getOption = () => {
+    return {
+        type: 'radar',
+        data: {
+            'Referer of a Websit': [
+                {
+                    name: '2018', 
+                    value: [5000, 7000, 12000, 11000, 15000, 14000]
+                }
+            ],
+        },
+        radar:{
+            indicator: [
+                        { name: 'APP', max: 6000 },
+                        { name: 'PC', max: 16000 },
+                        { name: 'Mobile', max: 30000 },
+                        { name: 'Wechat', max: 35000 },
+                        { name: 'Mobile QQ', max: 50000 },
+                        { name: 'Mini App', max: 25000 }
+            ]
+        },
+	}
+};
+return getOption;`
+};
+
+const Circular_radar = {
+    code: `const getOption = () => {
+    return {
+        type: 'radar',
+        data: {
+            'Referer of a Websit': [
+                {
+                    name: '2018', 
+                    value: [5000, 7000, 12000, 11000, 15000, 14000]
+                }
+            ],
+        },
+        radar:{
+            indicator: [
+                        { name: 'APP', max: 6000 },
+                        { name: 'PC', max: 16000 },
+                        { name: 'Mobile', max: 30000 },
+                        { name: 'Wechat', max: 35000 },
+                        { name: 'Mobile QQ', max: 50000 },
+                        { name: 'Mini App', max: 25000 }
+            ],
+            radius: 120,
+            splitNumber: 3,
+            shape: 'circle', 
+            splitArea: {
+                areaStyle: {
+                        color: ['rgba(114, 172, 209, 0.2)','rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)','rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
+                        shadowColor: 'rgba(0, 0, 0, 0.3)',
+                        shadowBlur: 10
+                }
+            }
+        },
+	}
+};
+return getOption;`
+};
+
+
+const Indicator_radar = {
+    code: `const getOption = () => {
+    return {
+        type: 'radar',
+        data: {
+            'Referer of a Websit': [
+                {
+                    name: '2018', 
+                    value: [5000, 7000, 12000, 11000, 15000, 14000]
+                },
+                {
+                    name: '2019', 
+                    value: [4000, 9000, 15000, 15000, 13000, 11000],
+                    symbol: 'rect',
+                    symbolSize: 12,
+                    lineStyle: {
+                        type: 'dashed'
+                    },
+                    label: {
+                        show: true,
+                        formatter: function (params) {
+                        return params.value;
+                        }
+                    }
+                }
+            ],
+        },
+        radar:{
+            indicator: [
+                        { name: 'APP', max: 6000 },
+                        { name: 'PC', max: 16000 },
+                        { name: 'Mobile', max: 30000 },
+                        { name: 'Wechat', max: 35000 },
+                        { name: 'Mobile QQ', max: 50000 },
+                        { name: 'Mini App', max: 25000 }
+            ],
+            radius: 120,
+            splitNumber: 3,
+            shape: 'circle',
+            name: {
+                fontSize: 20,
+                color: 'rgba(185, 11, 220, 1)'
+            }
+        },
+	}
+};
+return getOption;`
+};
+
+const Multiple_radar = {
+    code: `const getOption = () => {
+    return {
+        type: 'radar',
+        data: {
+            'First': [
+                {
+                value: [60, 73, 85, 40],
+                name: 'A Software'
+                }
+            ],
+            "Second": [
+                {
+                    value: [85, 90, 90, 95, 95],
+                    name: 'A Phone'
+                },
+                {
+                    value: [95, 80, 95, 90, 93],
+                    name: 'Another Phone'
+                }
+            ],
+            'Third': [
+                {
+                    name: 'Precipitation',
+                    value: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3]
+                },
+                {
+                    name: 'Evaporation',
+                    value: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3]
+                }
+            ],
+        },
+        radar: [
+            {
+                indicator: [
+                    { text: 'Brand', max: 100 },
+                    { text: 'Content', max: 100 },
+                    { text: 'Usability', max: 100 },
+                    { text: 'Function', max: 100 }
+                ],
+                center: ['25%', '40%'],
+                radius: 80
+            },
+            {
+                indicator: [
+                    { text: 'Look', max: 100 },
+                    { text: 'Photo', max: 100 },
+                    { text: 'System', max: 100 },
+                    { text: 'Performance', max: 100 },
+                    { text: 'Screen', max: 100 }
+                ],
+                radius: 80,
+                center: ['50%', '60%']
+            },
+            {
+                indicator: (function () {
+                    var res = [];
+                    for (var i = 1; i <= 12; i++) {
+                    res.push({ text: i + '月', max: 100 });
+                    }
+                    return res;
+                })(),
+                center: ['75%', '40%'],
+                radius: 80
+            }
+        ],
+	}
+};
+return getOption;`
+};
+
+const ex1 = new $visualify.LiveEditor(Basic_Radar).mount('#ex1');
+const ex2 = new $visualify.LiveEditor(Circular_radar).mount('#ex2');
+const ex3 = new $visualify.LiveEditor(Indicator_radar).mount('#ex3');
+const ex4 = new $visualify.LiveEditor(Multiple_radar).mount('#ex4');
+</script>
+
+# Radar Chart
+
+## Basic Radar Chart
+
+<div id="ex1"></div>
+
+## Circular Radar Chart
+
+<div id="ex2"></div>
+
+## Indicator Radar Chart
+
+<div id="ex3"></div>
+
+## Multiple Radar Chart
+
+<div id="ex4"></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 |
+| radar     | object       | The radar   | User-defined data | {}        |
+
+### Radar Configuration
+
+| Attribute   | Type   | Description     | Choice                   | Default   |
+| ----------- | ------ | --------------- | ------------------------ | --------- |
+| indicator   | array  | The indicator   | User-defined indicator   | []        |
+| radius      | number | The radius      | User-defined radius      | 75        |
+| splitNumber | number | The splitNumber | User-defined splitNumber | 5         |
+| shape       | string | The shape       | 'polygon', 'circle'      | 'polygon' |
+| splitArea   | object | The splitArea   | User-defined splitArea   | {}        |

package/docs/docs/_404.md

@@ -0,0 +1,52 @@
+<style>
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+    }
+    
+    .container {
+      text-align: center;
+      background-color: #ffffff;
+      padding: 50px;
+      margin-top: 5vh;
+      border-radius: 10px;
+      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    }
+    
+    .container h1 {
+      font-size: 72px;
+      margin-bottom: 20px;
+      color: #ff5252;
+    }
+    
+    .container p {
+      font-size: 24px;
+      margin-bottom: 30px;
+    }
+    
+    .container a {
+      font-size: 18px;
+      text-decoration: none;
+      color: #2196f3;
+      border: 1px solid #2196f3;
+      padding: 10px 15px;
+      border-radius: 5px;
+      transition: background-color 0.3s, color 0.3s;
+    }
+    
+    .container a:hover {
+      background-color: #2196f3;
+      color: #ffffff;
+    }
+
+</style>
+
+<div class="container">
+    <h1>404</h1>
+    <p>Oops! The page you're looking for doesn't exist.</p>
+    <a href="/">Go Home</a>
+</div>

package/docs/docs/_coverpage.md

@@ -0,0 +1,11 @@
+<!-- _coverpage.md -->
+
+![logo](./static/logo/logo_256x256.png)
+
+# visualify.js <small>2.5.3</small>
+
+> A magical data portal generator
+
+[GitHub](https://github.com/usleolihao)
+[Getting Started](#visualify)
+

package/docs/docs/_sidebar.md

@@ -0,0 +1,43 @@
+-   Getting started
+
+    -   [Introduction](/README.md)
+    -   [Quick start](/quickstart.md)
+    -   [More pages](/more-pages.md)
+
+-   Visualify.Recharts
+    
+    -   [Usage](/rechart-basic-usage.md)
+    -   [Attributes](/rechart-attributes.md)
+    -   [Line Chart](/Rechart/line.md)
+    -   [Bar Chart](/Rechart/bar.md)
+    -   [Pie Chart](/Rechart/pie.md)
+    -   [Radar Chart](/Rechart/radar.md)
+    -   [Funnel Chart](/Rechart/funnel.md)
+    
+  
+-   Page Mode
+
+    -   [ScatterL](/components/scatterL.md)
+    -   [Visium](/components/visium.md)
+    -   [DotBio](/components/dotBio.md)
+    -   [Echart](/components/echart.md)
+    -   [Plotly](/components/plotly.md)
+    -   [Macaron](/components/macaron.md)
+    -   [More...](/components/more.md)
+
+-   Customization
+
+    -   [Configuration](/configuration.md)
+    -   [Theme](/theme.md)
+
+-   Guide
+
+    -   [CLI](/CLI.md)
+    -   [Deploy](/deploy.md)
+
+-   Showcase
+
+    -   [MmTrBC](https://visualify.pharmacy.arizona.edu/MmTrBC/)
+    -   [EsoDev](https://visualify.pharmacy.arizona.edu/EsoDev/)
+
+-   [UpdateLog](/log.md)

package/docs/docs/components/dotBio.md

@@ -0,0 +1,34 @@
+# DotBio Component
+
+The DotBio component is a dot plot that
+displays the expression of genes in different cell types. 
+
+
+## Properties
+
+The DotBio component has the following properties:
+
+-   `type` (string): The type of the component, in this case `DotBio`.
+-   `id` (string): The unique identifier of the component.
+-   `row` (int): The row in which the component is to be displayed.
+-   `col` (int): The column in which the component is to be displayed.
+-   `rowspan` (int): The number of rows the component is to span.
+-   `colspan` (int): The number of columns the component is to span.
+-   `settings` (object): The settings of the component.
+-   `meta` (object): The metadata API of the component.
+    -   `name` (string): The name of the metadata.
+    -   `url` (string): The URL of the metadata.
+-   `exclude_celltype` (array): The cell types to be excluded.
+-   `gene` (string): The gene API.
+-   `genelist` (string): The genelist variable name we want to use.
+
+### settings Properties
+
+The `settings` object has the following properties:
+
+-   `preset` (string): The preset of the component.
+-   `ignoreEmptyData` (boolean): Whether to ignore empty data or not.
+-   `showscale` (boolean): Whether to show the scale or not.
+-   `showlegend` (boolean): Whether to show the legend or not.
+        
+

package/docs/docs/components/echart.md

@@ -0,0 +1,82 @@
+# Echart Component
+
+The Echart component is a wrapper around the
+[Apache ECharts](https://echarts.apache.org/en/index.html) library. It is used
+to create a variety of visualizations including scatter plots, line charts, bar
+charts, and more.
+
+This Echart Component is same as the Rechart Component, but it is used for the
+page mode, which enable the user to create a page with multiple components. And
+it also **support the API to fetch the data**.
+
+## Properties
+
+The Echart component has the following properties:
+
+-   `type` (string): The type of the component, in this case `Echart`.
+-   `id` (string): The unique identifier of the component.
+-   `row` (int): The row in which the component is to be displayed.
+-   `col` (int): The column in which the component is to be displayed.
+-   `rowspan` (int): The number of rows the component is to span.
+-   `colspan` (int): The number of columns the component is to span.
+-   `config` (object): The configuration of the component.
+-   `parser` (object): The parser of the component.
+-   `trigger` (object): The trigger of the component.
+
+### config Properties
+
+The `config` object has the following properties:
+
+-   `width` (int): The width of the component.
+-   `height` (int): The height of the component.
+-   `preset` (string): The preset of the component.
+-   `title` (string): The title of the component.
+-   `xAxis` (string): The x-axis of the component.
+-   `yAxis` (string): The y-axis of the component.
+-   `legend` (string): The legend of the component.
+-   `tooltip` (string): The tooltip of the component.
+-   `data` (string): The data of the component.
+
+### parser Properties
+
+The `parser` object has the following properties:
+
+-   `sources` (array): The sources of the component.
+    -   `name` (string): The name of the trigger.
+    -   `url` (string): The URL of the data.
+    -   `type` (string): The type of the component.
+    -   `responseKey` (string): The response key of the component.
+    -   `trigger` (object): The trigger of the component.
+        -   `title` (boolean): set the title to the triiger value.
+
+### Example
+
+```json
+        {
+            "id": "mmtrbc_tsne",
+            "type": "Echart",
+            "col": 2,
+            "rowspan": 3,
+            "config": {
+                "width": 600,
+                "height": 600,
+                "preset": "mmtrbc",
+                "title": " "
+            },
+            "parser": {
+                "sources": [{
+                    "name": "metadata",
+                    "url": "<your-backend-url>"
+                }, {
+                    "name": "gene",
+                    "url": "<your-backend-url>",
+                    "responseKey": "gene",
+                    "trigger": {
+                        "name": "mmtrbc_gene",
+                        "title": true
+                    }
+                }],
+                "type": "scatter"
+            }
+        }
+```

package/docs/docs/components/html.md

@@ -0,0 +1,34 @@
+# HTML Component
+
+The HTML component is used to display HTML content on the page.
+
+## Properties
+
+The HTML component has the following properties:
+
+-   `type` (string): The type of the component, in this case `HTML`.
+-   `id` (string): The unique identifier of the component.
+-   `row` (int): The row in which the component is to be displayed.
+-   `col` (int): The column in which the component is to be displayed.
+-   `colspan` (int): The number of columns the component is to span.
+-   `html` (string): The HTML content to be displayed.
+
+## Future Work
+
+We will add the ability to fetch the HTML content from an API.
+
+- `script` (string): The script to be executed.
+- `style` (string): The style to be applied.
+
+### Example
+
+```json
+{
+    "type": "HTML",
+    "row": 1,
+    "col": 2,
+    "colspan": 3,
+    "html": "<img style='width: 100%' src='./mainpage.png' alt='Abstract'>"
+}
+```
+

package/docs/docs/components/macaron.md

@@ -0,0 +1,145 @@
+# Macaron Component
+
+The Macaron component is used to display a macaron plot for relation of nodes on
+the page.
+
+The Macaron component also has interactive features, such as the ability to drag
+and drop nodes, and the ability to select nodes.
+
+## Properties
+
+The Macaron component has the following properties:
+
+-   `type` (string): The type of the component, in this case `Macaron`.
+-   `id` (string): The unique identifier of the component.
+-   `row` (int): The row in which the component is to be displayed.
+-   `col` (int): The column in which the component is to be displayed.
+-   `config` (object): The configuration of the component.
+-   `data` (object): The data of the component.
+
+### config Properties
+
+The `config` object has the following properties:
+
+-   `animation` (boolean): Whether to animate the component or not.
+-   `draggable` (boolean): Whether to make the component draggable or not.
+-   `height` (int): The height of the component.
+-   `unclickable` (array): The nodes that are unclickable.
+-   `symbolSize` (string): The size of the symbols in the component.
+-   `color` (object): The color of the component.
+    -   `selected` (string): The color of the selected nodes.
+    -   `unselectable` (string): The color of the unselectable nodes.
+
+### data Properties
+
+The `data` object has the following properties:
+
+-   `nodes` (array): The nodes of the component.
+    -   `name` (string): The name of the node.
+    -   `category` (int): The category of the node.
+    -   `value` (int): The value of the node.
+-   `edges` (array): The edges of the component.
+-   `categories` (array): The categories of the component.
+
+### Example
+
+```json
+{
+            "id": "celltype",
+            "type": "Macaron",
+            "title": "Select Cell Type",
+            "style": {
+                "height": "350px",
+                "width": "350px",
+                "font": "Arial, sans-serif",
+                "border": ""
+            },
+            "data": {
+                "nodes": [{
+                        "name": "Esophagus",
+                        "category": 1,
+                        "value": 216229
+                    },
+                    {
+                        "name": "Epithelium",
+                        "category": 2,
+                        "value": 108800
+                    },
+                    {
+                        "name": "Stroma",
+                        "category": 2,
+                        "value": 107429
+                    },
+                    {
+                        "name": "EPI (E)",
+                        "category": 3,
+                        "value": 97799
+                    },
+                    {
+                        "name": "ST (E)",
+                        "category": 3,
+                        "value": 1760
+                    }
+                ],
+                "edges": [{
+                        "source": "Esophagus",
+                        "target": "Epithelium",
+                        "level": 1
+                    },
+                    {
+                        "source": "Esophagus",
+                        "target": "Stroma",
+                        "level": 1
+                    },
+                    {
+                        "source": "Epithelium",
+                        "target": "IM (E)",
+                        "level": 2
+                    },
+                    {
+                        "source": "Epithelium",
+                        "target": "ERY (E)",
+                        "level": 2
+                    },
+                    {
+                        "source": "Stroma",
+                        "target": "MES (S)",
+                        "level": 2
+                    },
+                    {
+                        "source": "Stroma",
+                        "target": "ENS (S)",
+                        "level": 2
+                    },
+                    {
+                        "source": "Stroma",
+                        "target": "ENDO (S)",
+                        "level": 2
+                    }
+                ],
+                "categories": [{
+                        "name": "Category 1"
+                    },
+                    {
+                        "name": "Category 2"
+                    },
+                    {
+                        "name": "Category 3"
+                    }
+                ]
+            },
+            "config": {
+                "animation": false,
+                "draggable": true,
+                "height": "88%",
+                "unclickable": ["EPI (S)", "Esophagus"],
+                "symbolSize": "value",
+                "color": {
+                    "selected": "skyblue",
+                    "unselectable": "black"
+                }
+            },
+            "row": 1,
+            "col": 1
+        }
+```