Add parameters options

config/plugins_sidebar.ts

@@ -76,7 +76,15 @@ const sidebars: SidebarsConfig = {
           id: "business-charts/index",
           label: "Introduction",
         },
-        "business-charts/options",
+        {
+          items: ["business-charts/code/panel"],
+          label: "Options & JavaScript Code",
+          type: "category",
+          link: {
+            type: "doc",
+            id: "business-charts/options",
+          },
+        },
         "business-charts/visualeditor",
         "business-charts/examples",
         {
@@ -385,10 +393,18 @@ const sidebars: SidebarsConfig = {
           id: "business-text/index",
           label: "Introduction",
         },
+        {
+          items: ["business-text/code/panel"],
+          label: "JavaScript Code",
+          type: "category",
+          link: {
+            type: "doc",
+            id: "business-text/code/index",
+          },
+        },
         {
           items: [
             "business-text/rendering-content",
-            "business-text/code",
             "business-text/external",
             "business-text/styles",
           ],

docs/business-charts/code/panel.mdx

@@ -0,0 +1,308 @@
+---
+tags:
+  - Business Charts
+image: /img/plugins/business-charts/schema.png
+---
+
+import Image from "@theme/Image";
+
+# Panel Parameters
+
+### context.echarts
+
+Apache ECharts library.
+
+#### Usage
+
+```javascript
+context.echarts;
+```
+
+#### Example
+
+```javascript
+const libraryECharts = context.echarts;
+```
+
+### context.ecStat
+
+A statistical and data mining tool for Apache ECharts.
+
+#### Usage
+
+```javascript
+context.ecStat;
+```
+
+#### Example
+
+```javascript
+context.echarts.registerTransform(context.ecStat.transform.regression);
+```
+
+## Editor
+
+### editor.dataset
+
+ECharts dataset. Visual mode
+
+#### Usage
+
+```javascript
+context.editor.dataset;
+```
+
+#### Example
+
+```javascript
+return {
+  dataset: context.editor.dataset,
+  series: context.editor.series,
+  grid: {
+    bottom: "3%",
+    containLabel: true,
+    left: "3%",
+    right: "4%",
+    top: "4%",
+  },
+  toolbox: {
+    left: "center",
+    feature: {
+      dataZoom: {
+        yAxisIndex: "none",
+      },
+      restore: {},
+    },
+  },
+  xAxis: {
+    type: "category",
+  },
+  yAxis: {
+    type: "value",
+  },
+};
+```
+
+### editor.series
+
+ECharts series. Visual mode
+
+#### Usage
+
+```javascript
+context.editor.series;
+```
+
+#### Example
+
+```javascript
+return {
+  dataset: context.editor.dataset,
+  series: context.editor.series,
+  grid: {
+    bottom: "3%",
+    containLabel: true,
+    left: "3%",
+    right: "4%",
+    top: "4%",
+  },
+  toolbox: {
+    left: "center",
+    feature: {
+      dataZoom: {
+        yAxisIndex: "none",
+      },
+      restore: {},
+    },
+  },
+  xAxis: {
+    type: "category",
+  },
+  yAxis: {
+    type: "value",
+  },
+};
+```
+
+## Panel
+
+### panel.chart
+
+Instance of the Apache ECharts library.
+
+#### Usage
+
+```javascript
+context.panel.chart;
+```
+
+#### Example
+
+```javascript
+context.panel.chart.on("brushSelected", function (params) {
+  var brushed = [];
+  var brushComponent = params.batch[0];
+  for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
+    var rawIndices = brushComponent.selected[sIdx].dataIndex;
+    brushed.push("[Series " + sIdx + "] " + rawIndices.join(", "));
+  }
+  context.panel.chart.setOption({
+    title: {
+      backgroundColor: "#333",
+      text: "SELECTED DATA INDICES: \n" + brushed.join("\n"),
+      bottom: 0,
+      right: "10%",
+      width: 100,
+      textStyle: {
+        fontSize: 12,
+        color: "#fff",
+      },
+    },
+  });
+});
+```
+
+### panel.data
+
+Object containing a time range, series, and request information.
+
+#### Usage
+
+```javascript
+context.panel.data;
+```
+
+#### Example
+
+```javascript
+context.panel.data.series.map((s) => {
+  categories = s.fields.find((f) => f.name === "Category").values;
+  values = s.fields.find((f) => f.name === "Value").values;
+});
+```
+
+## Grafana
+
+### grafana.eventBus
+
+Publish and subscribe to application events.
+
+#### Usage
+
+```javascript
+context.grafana.eventBus;
+```
+
+#### Example
+
+```javascript
+const subscriber = eventBus.getStream(RefreshEvent).subscribe(() => {
+  // to do
+});
+```
+
+### grafana.locationService
+
+The `locationService` works with the browser location and history.
+
+#### Usage
+
+```javascript
+context.grafana.locationService;
+```
+
+#### Example
+
+```javascript
+context.grafana.locationService.reload();
+
+//
+const history = context.grafana.locationService.history;
+```
+
+### grafana.replaceVariables()
+
+The `replaceVariables()` function to interpolate variables.
+
+#### Usage
+
+```javascript
+context.grafana.replaceVariables();
+```
+
+#### Example
+
+```javascript
+const variable = context.grafana.replaceVariables("${variable}");
+console.log(variable.toUpperCase());
+```
+
+### grafana.notifyError([header, message])
+
+Displays an error.
+
+#### Usage
+
+```javascript
+context.grafana.notifyError([header, message]);
+```
+
+#### Example
+
+```javascript
+//
+context.grafana.notifyError(["Error Title", `Show error message`]);
+```
+
+#### Arguments
+
+- `header` _string_. Error title
+- `message` _string_. Error message
+
+### grafana.notifySuccess([header, message])
+
+Displays a success notification.
+
+#### Usage
+
+```javascript
+context.grafana.notifySuccess([header, message]);
+```
+
+#### Example
+
+```javascript
+context.grafana.notifySuccess(["Success Title", `Success message`]);
+```
+
+#### Arguments
+
+- `header` _string_. Success title
+- `message` _string_. Success message
+
+### grafana.theme
+
+Contains grafana theme object.
+
+#### Usage
+
+```javascript
+context.grafana.theme;
+```
+
+#### Example
+
+```javascript
+const theme = context.grafana.theme;
+console.log(theme);
+```
+
+### grafana.refresh()
+
+Function to refresh dashboard panels using application events.
+
+#### Usage
+
+```javascript
+context.grafana.refresh();
+```

docs/business-charts/options.mdx

@@ -44,21 +44,21 @@ The `return` clause is where you need to specify the `options` parameter to be p
 
 ## Parameters
 
-| Parameter                                                  | Description                                                                      |
-| ---------------------------------------------------------- | -------------------------------------------------------------------------------- |
-| `context.echarts`                                          | Apache ECharts library.                                                          |
-| `context.ecStat`                                           | A statistical and data mining tool for Apache ECharts.                           |
-| `context.editor.dataset`                                   | **[Visual mode]** ECharts dataset.                                               |
-| `context.editor.series`                                    | **[Visual mode]** ECharts series.                                                |
-| `context.grafana.eventBus`                                 | Publish and subscribe to application events.                                     |
-| `context.grafana.locationService`                          | Works with browser location and history.                                         |
-| `context.grafana.notifyError(['Header', 'Error Message'])` | Display error notifications.                                                     |
-| `context.grafana.notifySuccess(['Header', 'Message'])`     | Display success notifications.                                                   |
-| `context.grafana.refresh()`                                | Function to refresh dashboard panels using application events.                   |
-| `context.grafana.replaceVariables()`                       | Function to interpolate variables.                                               |
-| `context.grafana.theme`                                    | Theme object.                                                                    |
-| `context.panel.chart`                                      | Instance of the Apache ECharts library. See the example in the screenshot above. |
-| `context.panel.data`                                       | Object containing a time range, series, and request information.                 |
+| Parameter                                                                                                                           | Description                                                                      |
+| ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
+| [`context.echarts`](/plugins/business-charts/code/panel/#contextecharts)                                                            | Apache ECharts library.                                                          |
+| [`context.ecStat`](/plugins/business-charts/code/panel/#contextecstat)                                                              | A statistical and data mining tool for Apache ECharts.                           |
+| [`context.editor.dataset`](/plugins/business-charts/code/panel/#editordataset)                                                      | **[Visual mode]** ECharts dataset.                                               |
+| [`context.editor.series`](/plugins/business-charts/code/panel/#editorseries)                                                        | **[Visual mode]** ECharts series.                                                |
+| [`context.grafana.eventBus`](/plugins/business-charts/code/panel/#grafanaeventbus)                                                  | Publish and subscribe to application events.                                     |
+| [`context.grafana.locationService`](/plugins/business-charts/code/panel/#grafanalocationservice)                                    | Works with browser location and history.                                         |
+| [`context.grafana.notifyError(['Header', 'Error Message'])`](/plugins/business-charts/code/panel/#grafananotifyerrorheader-message) | Display error notifications.                                                     |
+| [`context.grafana.notifySuccess(['Header', 'Message'])`](/plugins/business-charts/code/panel/#grafananotifysuccessheader-message)   | Display success notifications.                                                   |
+| [`context.grafana.refresh()`](/plugins/business-charts/code/panel/#grafanarefresh)                                                  | Function to refresh dashboard panels using application events.                   |
+| [`context.grafana.replaceVariables()`](/plugins/business-charts/code/panel/#grafanareplacevariables)                                | Function to interpolate variables.                                               |
+| [`context.grafana.theme`](/plugins/business-charts/code/panel/#grafanatheme)                                                        | Theme object.                                                                    |
+| [`context.panel.chart`](/plugins/business-charts/code/panel/#panelchart)                                                            | Instance of the Apache ECharts library. See the example in the screenshot above. |
+| [`context.panel.data`](/plugins/business-charts/code/panel/#paneldata)                                                              | Object containing a time range, series, and request information.                 |
 
 ### Inspect