visualifyjs 2.5.3-2.dev

package/docs/docs/configuration.md

@@ -0,0 +1,121 @@
+# Configuration
+
+You can configure Visualify by defining `window.$visualify` or `$visualify` as
+an object:
+
+```js
+<script>
+window.$visualify = {
+    mode: 'pages',
+    // ...
+}
+</script>
+```
+
+Or you can initialize `$visualify` as a **Chart Module**:
+
+```js
+<script>
+$visualify = {
+    mode: 'charts',
+}
+
+new $visualify.Recharts({...}).mount('#chart')
+new $visualify.LiveEditor({...}).mount('#ex11');
+</script>
+```
+
+## el
+
+-   Type: `String`
+-   Default: `'#root'`
+
+The DOM element to be mounted on initialization. It can be a CSS selector string
+or an actual
+[HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).
+
+```js
+window.$visualify = {
+  el: '#root',
+};
+```
+
+## mode
+
+-   Type: `String`
+-   Default: `'pages'`
+-   Options: `'pages'`, `'charts'`
+
+The mode of Visualify. If you want to use Visualify as a chart module, you can
+set `mode` to `'charts'`.
+
+```js
+window.$visualify = {
+  mode: 'charts',
+};
+```
+
+## theme
+
+-   Type: `String`
+-   Default: `'modern'`
+-   Options: `'modern'`, `'classic'`
+
+The theme of Visualify. The default theme is `'modern'`. Themes usually make
+changes to the layout and components of the page. Built-in different themes
+provide different typesetting and functions, please choose different themes
+according to different needs, you can also replace a single css to change the
+style.
+
+```js
+window.$visualify = {
+  theme: 'modern',
+};
+```
+
+For more themes, please refer to [Themes](themes.md)
+
+## homepage
+
+-   Type: `String`
+-   Default: `'home.json'`
+
+The `home.json` in your docs folder will be treated as the homepage for your
+website, but sometimes you may need to serve another file as your homepage.
+
+```js
+window.$visualify = {
+    homepage: 'home',
+
+    // Or use the json in your repo
+    homepage: 'https://raw.githubusercontent.com/leolihao/visualify/master/docs/home.json',
+}
+```
+
+## repo
+
+-   Type: `String`
+
+Configure the repository url, or a string of `username/repo`, to add the
+[GitHub Corner](http://tholman.com/github-corners/) widget in the top right
+corner of the site.
+
+```js
+window.$docsify = {
+  repo: 'https://github.com/visualify',
+};
+```
+
+## alias
+
+-   Type: `Object`
+
+Set the route alias. You can freely manage `routing` rules. Supports `RegExp`.
+
+```js
+window.$visualify = {
+  alias: {
+    '/docsify': 'https://docsify.js.org/#/configuration?id=alias',
+  },
+};
+```

package/docs/docs/deploy.md

@@ -0,0 +1,31 @@
+# Deploy
+
+## On Your Local Machine
+
+You can deploy Visualify on your local machine by running a simple HTTP server.
+For example, you can use the `http-server` package from npm:
+
+```bash
+npm install -g http-server
+http-server ./docs
+```
+
+Then open your browser and navigate to `http://localhost:8080`.
+
+## On GitHub Pages
+
+There are three places to populate your docs for your GitHub repository:
+
+-   `docs/` folder
+-   main branch
+-   gh-pages branch
+
+It is recommended that you save your files to the `./docs` subfolder of the
+`main` branch of your repository. Then select `main branch /docs folder` as your
+GitHub Pages source in your repository's settings page.
+
+![GitHub Pages](./static/_images/deploy-github-pages.png)
+
+!> You can also save files in the root directory and select `main branch`.
+You'll need to place a `.nojekyll` file in the deploy location (such as `/docs`
+or the gh-pages branch)

package/docs/docs/log.md

@@ -0,0 +1,9 @@
+# log
+
+## 2.5.3-1(2024-02-24)
+
+### Features
+1. Scatter examples added.
+2. xAxis and yAxis now support Object type data.
+
+

package/docs/docs/more-pages.md

@@ -0,0 +1,23 @@
+# More pages
+
+If you need more pages, you can simply create more `json` configuration files in
+your visualify directory. If you create a file named `scatter`, then it is
+accessible via `/scatter`.
+
+For example, the directory structure is as follows:
+
+```text
+.
+└── docs
+    ├── index.html
+    ├── scatter.json
+    └── honme.json
+```
+
+Matching routes
+
+```text
+docs/home.json        => http://domain.com
+                      => http://domain.com/home
+docs/scatter.json     => http://domain.com/scatter
+```

package/docs/docs/quickstart.md

@@ -0,0 +1,124 @@
+# Quick start
+
+It is highly recommended to use `Docisfy` as a document framework and imports
+`visualify` to quickly present various diagrams.
+
+Insert the `visualify` script in your `index.html` file.
+
+```html
+<head>
+  ...
+  <script src="https://cdn.jsdelivr.net/npm/visualifyjs"></script>
+  
+  <!-- or -->
+          <!-- <script src="https://visualify.pharmacy.arizona.edu/dist/visualify.js"></script -->
+  <!-- or -->
+      <!-- script src="https://cdn.jsdelivr.net/gh/visualify/visualify.js@release/dist/visualify.js"></script> -->
+</head>
+```
+
+Or install `visualify.cli` globally, which helps initializing and previewing the
+website locally.
+
+```bash
+npm i visualify.cli -g
+```
+
+## Initialize
+
+If you want to write the documentation in the `./docs` subdirectory, you can use
+the `init` command.
+
+```bash
+visualify init ./docs
+```
+
+or simply run `visualify init`
+
+```bash
+visualify init
+```
+
+or anywhere you like.
+
+```bash
+visualify init <path>
+```
+
+## Writing content
+
+After the `init` is complete, you can see the file list in the `./docs`
+subdirectory.
+
+-   `index.html` as the entry file
+-   `home.jsom` as the home page
+-   `.nojekyll` prevents GitHub Pages from ignoring files that begin with an
+    underscore
+
+You can easily update the documentation in `./docs/home.json`, of course you can
+add [more pages](more-pages.md).
+
+## Preview your site
+
+Run the local server with `visualify serve <docs-path>`. You can preview your
+site in your browser on `http://localhost:3000`.
+
+```bash
+visualify serve docs
+```
+
+?> For more use cases of `visualify.cli`, head over to the
+[CLI documentation](CLI.md).
+
+## Manual initialization
+
+If you don't like `npm` or have trouble installing the tool, you can manually
+create `index.html`:
+
+```html
+<!-- index.html -->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>
+      $visualify = {
+        //...
+      };
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/visualifyjs"></script>
+    <!-- or -->
+      <!-- <script src="https://visualify.pharmacy.arizona.edu/dist/visualify.js"></script> -->
+    <!-- or -->
+      <!-- script src="https://cdn.jsdelivr.net/gh/visualify/visualify.js@release/dist/visualify.js"></script> -->
+  </body>
+</html>
+
+```
+
+### Manually preview your site
+
+If you have `Node.js` installed on your system, you can easily use it to run a
+static server to preview your site.
+
+```bash
+# install corresponding dependencies
+npm install -g serve
+serve -s ./docs
+```
+
+If you have Python installed on your system, you can easily use it to run a
+static server to preview your site.
+
+```python2
+cd docs && python -m SimpleHTTPServer 3000
+```
+
+```python3
+cd docs && python -m http.server 3000
+```

package/docs/docs/rechart-attributes.md

@@ -0,0 +1,74 @@
+# Recharts Attributes
+
+`Rechart` is primarily composed of 4 attribute groups:
+
+-   **Basic** configuration
+-   **Data** configuration
+-   **Plugins** configuration
+-   **Override** 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         | show or hide legend     | True, False                | true    |
+| xAxis           | string/false | The xAxis               | User-defined xAxis         | {}      |
+| yAxis           | string/false | The yAxis               | User-defined yAxis         | {}      |
+| 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
+
+The data configuration includes:
+
+| Attribute | Type         | Description        | Choice                                                                                    | Default   |
+| --------- | ------------ | ------------------ | ----------------------------------------------------------------------------------------- | --------- |
+| data      | string       | The data           | User-defined data                                                                         | {}        |
+| type      | string/array | The type           | 'line', 'bar'                                                                             | undefined |
+| smooth    | bool/array   | The smooth         | True, False, [true, false]                                                                | false     |
+| areaStyle | object       | The area style     | {},[{color: 'red'},{color: 'blue'}]                                                       | {}        |
+| stack     | string/array | The stack          | {}, ['Vue', 'React', 'Angular'],{lang: ['Vue', 'React', 'Angular']}                       | -         |
+| markArea  | object/array | The mark area      | {XAxis: [{start: '...', end:'...', name: "..."}, ... ], YAxis: ..., props: ..}, [{}, ...] | -         |
+| markLine  | object/array | The mark line      | {data: { name: 'average', type: 'average'}, props: .. }, [{ data: {}, props: ..}, ...]    | -         |
+| peak      | bool/string  | name of the peak   | True, False, user-defined name of the peak                                                | false     |
+| valley    | bool/string  | name of the valley | True, False, user-defined name of the valley                                              | false     |
+
+### Specific Data Configuration for Line Charts
+
+| Attribute  | Type              | Description                 | Choice                                                            | Default |
+| ---------- | ----------------- | --------------------------- | ----------------------------------------------------------------- | ------- |
+| smooth     | bool/array        | The smooth                  | True, False, [true, false]                                        | false   |
+| areaStyle  | object            | The area style              | {},[{color: 'red'},{color: 'blue'}]                               | {}      |
+| stack      | string/array      | The stack                   | {}, ['x', 'y'],{lang: ['x', 'y', 'z']}                            | -       |
+| percentage | bool              | The percentage stacked mode | True, False                                                       | false   |
+| steps      | bool/string/array | The steps                   | True, False, 'start', 'middle', 'end', ['start', 'middle', 'end'] | false   |
+
+### Specific Data Configuration for Bar Charts
+
+| Attribute  | Type | Description                 | Choice      | Default |
+| ---------- | ---- | --------------------------- | ----------- | ------- |
+| percentage | bool | The percentage stacked mode | True, False | false   |
+
+## Plugins Configuration
+
+The plgins configuration includes:
+
+| Attribute | Type   | Description | Choice               | Default |
+| --------- | ------ | ----------- | -------------------- | ------- |
+| plugins   | string | The plugins | User-defined plugins | -       |
+
+## Override Configuration
+
+configuration to override the encapsulated preset configurations in order to
+achieve custom effects.

package/docs/docs/rechart-basic-usage.md

@@ -0,0 +1,162 @@
+<script defers>
+let ex1 = {
+                title: 'The Popular Web frameworks Before 2017',
+                subtitle: 'GitHub New Star Number',
+                type: 'bar',
+                data: {
+                    'Vue': [3000, 3500, 3900, 3100, 3200, 3100, 3600, 3300, 3600, 3400, 3100, 3000],
+                    'React': [4000, 4500, 4900, 4300, 4400, 4300, 4800, 4500, 4800, 4600, 4300, 4000],
+                    'Angular': [827, 949, 1400, 1000, 884, 911, 983, 989, 925, 1100, 1200, 930, ],
+                },
+                xAxis: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
+            };
+const app = new $visualify.Recharts(ex1).mount('#example1');
+let ex2 = structuredClone(ex1);
+ex2.overrides= {
+                series: [{
+                        type: 'line',
+                        smooth: true
+                    }, ]
+                };
+const app2 = new $visualify.Recharts(ex2).mount('#example2');
+</script>
+
+# Visualify.Recharts
+
+`Visualify.Recharts` is a component library built on `React` and `ECharts` to solve
+the hassle of complex ECharts configuration items and data conversion. When
+generating an ECharts chart, users only need to care about **data** and
+**configuration items**, or even no configuration items, to generate a default
+chart. `ReCharts` helps you build charts **quickly** and **efficiently**.
+
+## Quick Start
+
+<details open>
+
+<summary>Recharts stands for React-Echarts, in order to use Recharts, you can follow
+these steps.</summary>
+
+Insert the `visualify` script in your `index.html` file.
+
+```html
+<head>
+  ...
+  <script src="https://visualify.pharmacy.arizona.edu/dist/visualify.js"></script>
+</head>
+```
+
+Initilaize the `visualify` object in your `index.html` file.
+
+```html
+$visualify = {
+    mode: 'charts',
+}
+```
+
+Use the `Recharts` object in your `index.html` file.
+
+```html
+<div id="example1"></div>
+<script>
+new $visualify.Recharts( config... ).mount('#example1');
+</script>
+```
+
+</details>
+
+## Example of Recharts
+
+<!-- tabs:start -->
+
+#### **Output**
+
+<div id="example1">Here is the example of bar chart by using Recharts to show 2017 top popular frames. </div>
+
+#### **HTML**
+
+<pre data-lang="html">
+<code class="lang-html">
+&lt;div id=&quot;example1&quot;&gt;Example 1&lt;/div&gt;
+const app = new $visualify.Recharts({
+                title: 'The Popular Web frameworks Before 2017',
+                subtitle: 'GitHub New Star Number',
+                type: 'bar',
+                data: {
+                    'Vue': [3000, 3500, 3900, 3100, 3200, 3100, 3600, 3300, 3600, 3400, 3100, 3000],
+                    'React': [4000, 4500, 4900, 4300, 4400, 4300, 4800, 4500, 4800, 4600, 4300, 4000],
+                    'Angular': [827, 949, 1400, 1000, 884, 911, 983, 989, 925, 1100, 1200, 930, ],
+                },
+                xAxis: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
+            });
+app.mount('#example1');
+</code>
+</pre>
+
+<!-- tabs:end -->
+
+## Advanced Usage
+
+### Hybird Types & Smooth & More options
+
+'Rechart' support hybird types such as `line` , `bar` , `scatter` , and more
+types by setting `type` as array of types, also for the `smooth`.
+
+```html
+{
+  ...
+  type: ['line', 'bar']
+  smooth: [true, false]
+}
+```
+
+More options can be found in the [Attributes](rechart-attributes).
+
+### Overrides Configuration
+
+The **preset** configuration in `Recharts` can be overridden to match the
+original `Echarts` configuration. For example, we can set `smooth` to `true` in
+`series`.
+
+```html
+{
+  ...
+  overrides: {
+        series: [{
+        type: 'line',
+        smooth: true
+    }, ]
+  },
+}
+```
+
+More advanced usage can be found in the
+[Echarts documentation](https://echarts.apache.org/en/index.html).
+
+<!-- tabs:start -->
+
+#### **Output**
+
+<div id="example2">Example 2</div>
+
+#### **HTML**
+
+<pre data-lang="html">
+    <code class="lang-html">
+        const app = new $visualify.Recharts({
+                        ...
+                        overrides: {
+                            series: [{
+                                type: 'line',
+                                smooth: true
+                            }, ]
+                        },
+                    }).mount('#example1');
+    </code>
+     <button class="docsify-copy-code-button">
+        <span class="label">Copy to clipboard</span>
+        <span class="error">Error</span>
+        <span class="success">Copied</span>
+    </button>
+</pre>
+
+<!-- tabs:end -->

package/docs/docs/theme.md

@@ -0,0 +1,5 @@
+# Theme
+
+## Modern
+
+The modern theme is a modern, responsive theme that is based on the [Bootstrap](https://getbootstrap.com/) framework. It is a clean, modern and professional theme that is suitable for a wide range of applications.

package/docs/index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>visualify.js official site</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="description" content="Description" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" type="image/x-icon" href="static/logo/favicon.ico" />
+    <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.css" />
+    <link rel="stylesheet" href="./static/css/font-awesome.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css" />
+    <link rel="stylesheet" href="./static/css/fluff-stuff.css" />
+    <script src="./static/js/configuration.js"></script>
+    <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+    <!-- Docsify siderbarbar -->
+    <script src="https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js"></script>
+</head>
+
+<body>
+    <div id="docsify"></div>
+    <script>
+        // Set html "lang" attribute based on URL
+        var lang = location.hash.match(/#\/(zh-cn)\//);
+        if (lang) {
+            document.documentElement.setAttribute("lang", lang[1]);
+        }
+
+        window.$docsify = config;
+        $visualify = {
+            mode: 'charts',
+        }
+
+        /*
+        const custom_buttons = [
+            ["MmTrBC", "./MmTrBC/", 1],
+            ["Esodev", "./EsoDev/", 3],
+        ];
+        */
+    </script>
+    <!-- Docsify v4 -->
+    <script src="https://cdn.jsdelivr.net/npm/docsify@4"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+    <script src="./static/js/fluff.js" defer></script>
+    <!-- Plugins -->
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.normalize"></script>
+    <script src="https://cdn.jsdelivr.net/npm/docsify/lib/plugins/external-script.js"></script>
+    <!-- Copy to Clipboard -->
+    <script src="https://unpkg.com/docsify-copy-code@2/dist/docsify-copy-code.min.js"></script>
+    <!-- docsify-tabs (latest v1.x.x) -->
+    <script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1/dist/docsify-tabs.min.js"></script>
+    <!-- LaTeX display engine script Here -->
+    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" />
+    <script src="https://unpkg.com/docsify-latex@0.5.2/dist/docsify-latex.min.js"></script>
+    <!-- flexible-alerts -->
+    <script src="https://unpkg.com/docsify-plugin-flexible-alerts@1.1.1/dist/docsify-plugin-flexible-alerts.min.js"></script>
+    <!-- Mermaid -->
+    <script type="module">
+        import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs"; mermaid.initialize({ startOnLoad: true }); window.mermaid = mermaid;
+    </script>
+    <!-- Prism -->
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-python.min.js"></script>
+    <!-- Visualify -->
+    <script src="./static/js/visualify.js"></script>
+</body>
+
+</html>

package/docs/manifest.json

@@ -0,0 +1,24 @@
+{
+    "short_name": "visualifyjs",
+    "name": "Create Your Data Portal Simple",
+    "icons": [{
+            "src": "https://lgcyaxi.net/visualify/static/logo/favicon.ico",
+            "sizes": "64x64 32x32 24x24 16x16",
+            "type": "image/x-icon"
+        },
+        {
+            "src": "https://lgcyaxi.net/visualify/static/logo/logo192.png",
+            "type": "image/png",
+            "sizes": "192x192"
+        },
+        {
+            "src": "https://lgcyaxi.net/visualify/static/logo/logo512.png",
+            "type": "image/png",
+            "sizes": "512x512"
+        }
+    ],
+    "start_url": ".",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#ffffff"
+}