Updated to 1.0.7

- Updated ApexCharts library to 3.33.1 - Added showSeries and hideSeries functions - Function toggleSeries now returns true/false - Fixed browser resizing issue - Fixed animation issue
Kyvis-Labs · Feb 12, 2022 · 273c294 · 273c294
1 parent 63b8692
commit 273c294
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 80 deletions.
diff --git a/README.md b/README.md
@@ -223,10 +223,24 @@ Component Scripting Functions
 ---------------
 
 The Apex Chart component provides the following scripting functions you can interface with in Python:
-- toggleSeries(String seriesName)
+- toggleSeries(String seriesName) returns Boolean
+- showSeries(String seriesName)
+- hideSeries(String seriesName)
 
-```json
+### `toggleSeries`
+This method allows you to toggle the visibility of series programmatically. Useful when you have a custom legend. You can learn more about the toggleSeries function [here](https://apexcharts.com/docs/methods/#toggleSeries).
+```
 self.getSibling("apexchart").toggleSeries("SeriesA")
 ```
 
-You can learn more about the toggleSeries function [here](https://apexcharts.com/docs/methods/#toggleSeries).
+### `showSeries`
+This method allows you to show the hidden series. If the series is already visible, this doesn’t affect it. You can learn more about the toggleSeries function [here](https://apexcharts.com/docs/methods/#showSeries).
+```
+self.getSibling("apexchart").showSeries("SeriesA")
+```
+
+### `hideSeries`
+This method allows you to hide the visible series. If the series is already hidden, this method doesn’t affect it. You can learn more about the toggleSeries function [here](https://apexcharts.com/docs/methods/#hideSeries).
+```
+self.getSibling("apexchart").hideSeries("SeriesA")
+```
diff --git a/build.gradle b/build.gradle
@@ -24,7 +24,7 @@ plugins {
     id "base"
 }
 
-version "1.0.6"
+version "1.0.7"
 group "com.kyvislabs"
 
 

diff --git a/gateway/src/main/java/com/kyvislabs/apexcharts/gateway/ApexChartModelDelegate.java b/gateway/src/main/java/com/kyvislabs/apexcharts/gateway/ApexChartModelDelegate.java
@@ -10,8 +10,14 @@
 import org.python.core.Py;
 import org.python.core.PyObject;
 
+import java.util.concurrent.atomic.AtomicBoolean;
+
 public class ApexChartModelDelegate extends ComponentModelDelegate {
     public static final String OUTBOUND_EVENT_NAME = "apexchart-response-event";
+    public static final String INBOUND_EVENT_NAME = "apexchart-request-event";
+
+    private AtomicBoolean toggleSeriesWaiting = new AtomicBoolean(false);
+    private AtomicBoolean toggleSeriesReturn = new AtomicBoolean(false);
 
     public ApexChartModelDelegate(Component component) {
         super(component);
@@ -32,7 +38,7 @@ protected void onShutdown() {
 
     @ScriptCallable
     @KeywordArgs(names = {"seriesName"}, types = {String.class})
-    public void toggleSeries(PyObject[] pyArgs, String[] keywords) {
+    public boolean toggleSeries(PyObject[] pyArgs, String[] keywords) throws Exception {
         PyArgumentMap argumentMap =
                 PyArgumentMap.interpretPyArgs(pyArgs, keywords, ApexChartModelDelegate.class, "toggleSeries");
         String seriesName = argumentMap.getStringArg("seriesName");
@@ -41,8 +47,60 @@ public void toggleSeries(PyObject[] pyArgs, String[] keywords) {
             throw Py.ValueError("toggleSeries argument 'seriesName' cannot be None");
         }
 
+        toggleSeriesWaiting.set(true);
         log.debugf("Calling toggleSeries with '%s'", seriesName);
         JsonObject payload = new JsonObject();
+        payload.addProperty("functionToCall", "toggleSeries");
+        payload.addProperty("seriesName", seriesName);
+        fireEvent(OUTBOUND_EVENT_NAME, payload);
+
+        int maxTryCount = 20;
+        int tryCount = 0;
+        while (toggleSeriesWaiting.get()) {
+            tryCount += 1;
+            if (tryCount >= maxTryCount) {
+                toggleSeriesWaiting.set(false);
+                throw new Exception("No message received from ApexChart, failing");
+            }
+            Thread.sleep(100);
+        }
+
+        toggleSeriesWaiting.set(false);
+        return toggleSeriesReturn.get();
+    }
+
+    @ScriptCallable
+    @KeywordArgs(names = {"seriesName"}, types = {String.class})
+    public void showSeries(PyObject[] pyArgs, String[] keywords) throws Exception {
+        PyArgumentMap argumentMap =
+                PyArgumentMap.interpretPyArgs(pyArgs, keywords, ApexChartModelDelegate.class, "showSeries");
+        String seriesName = argumentMap.getStringArg("seriesName");
+
+        if (seriesName == null) {
+            throw Py.ValueError("showSeries argument 'seriesName' cannot be None");
+        }
+
+        log.debugf("Calling showSeries with '%s'", seriesName);
+        JsonObject payload = new JsonObject();
+        payload.addProperty("functionToCall", "showSeries");
+        payload.addProperty("seriesName", seriesName);
+        fireEvent(OUTBOUND_EVENT_NAME, payload);
+    }
+
+    @ScriptCallable
+    @KeywordArgs(names = {"seriesName"}, types = {String.class})
+    public void hideSeries(PyObject[] pyArgs, String[] keywords) throws Exception {
+        PyArgumentMap argumentMap =
+                PyArgumentMap.interpretPyArgs(pyArgs, keywords, ApexChartModelDelegate.class, "hideSeries");
+        String seriesName = argumentMap.getStringArg("seriesName");
+
+        if (seriesName == null) {
+            throw Py.ValueError("hideSeries argument 'seriesName' cannot be None");
+        }
+
+        log.debugf("Calling hideSeries with '%s'", seriesName);
+        JsonObject payload = new JsonObject();
+        payload.addProperty("functionToCall", "hideSeries");
         payload.addProperty("seriesName", seriesName);
         fireEvent(OUTBOUND_EVENT_NAME, payload);
     }
@@ -51,5 +109,11 @@ public void toggleSeries(PyObject[] pyArgs, String[] keywords) {
     @Override
     public void handleEvent(EventFiredMsg message) {
         log.debugf("Received EventFiredMessage of type: %s", message.getEventName());
+
+        if (message.getEventName().equals(INBOUND_EVENT_NAME)) {
+            JsonObject payload = message.getEvent();
+            toggleSeriesReturn.set(payload.get("result").getAsBoolean());
+            toggleSeriesWaiting.set(false);
+        }
     }
 }
diff --git a/gateway/src/main/resources/mounted/Components.js b/gateway/src/main/resources/mounted/Components.js
diff --git a/web/packages/client/package.json b/web/packages/client/package.json
@@ -18,7 +18,7 @@
         "axios": "^0.19.0",
         "react": "16.8.4",
         "react-dom": "16.8.4",
-        "apexcharts": "3.28.3",
+        "apexcharts": "3.33.1",
         "object-scan": "13.9.0"
     },
     "devDependencies": {

diff --git a/web/packages/client/typescript/components/ApexChart.tsx b/web/packages/client/typescript/components/ApexChart.tsx
@@ -14,7 +14,7 @@ import {
 } from '@inductiveautomation/perspective-client';
 import { bind } from 'bind-decorator';
 const objectScan = require('object-scan');
-import ApexCharts from 'apexcharts/dist/apexcharts.common';
+import ApexCharts from 'apexcharts/dist/apexcharts.min';
 
 export const COMPONENT_TYPE = "kyvislabs.display.apexchart";
 
@@ -28,7 +28,8 @@ export interface ApexChartProps {
 
 // These match events in the Gateway side component delegate.
 enum MessageEvents {
-    MESSAGE_RESPONSE_EVENT = "apexchart-response-event"
+    MESSAGE_RESPONSE_EVENT = "apexchart-response-event",
+    MESSAGE_REQUEST_EVENT = "apexchart-request-event"
 }
 
 export class ApexChartGatewayDelegate extends ComponentStoreDelegate {
@@ -50,16 +51,24 @@ export class ApexChartGatewayDelegate extends ComponentStoreDelegate {
         if (this.chart) {
             logger.debug(() => `Received '${eventName}' event!`);
             const {
-                MESSAGE_RESPONSE_EVENT
+                MESSAGE_RESPONSE_EVENT,
+                MESSAGE_REQUEST_EVENT
             } = MessageEvents;
 
             const {
+                functionToCall,
                 seriesName
             } = eventObject;
 
             switch (eventName) {
                 case MESSAGE_RESPONSE_EVENT:
-                    this.chart.toggleSeries(seriesName);
+                    if (functionToCall == "toggleSeries") {
+                        this.fireEvent(MESSAGE_REQUEST_EVENT, { result: this.chart.toggleSeries(seriesName) });
+                    } else if (functionToCall == "showSeries") {
+                        this.chart.showSeries(seriesName);
+                    } else if (functionToCall == "hideSeries") {
+                        this.chart.hideSeries(seriesName);
+                    }
                     break;
                 default:
                     logger.warn(() => `No delegate event handler found for event: ${eventName} in ApexChartGatewayDelegate`);
@@ -75,6 +84,7 @@ export class ApexChart extends Component<ComponentProps<ApexChartProps>, any> {
     private lastZoom: Array<any> = [];
 
     componentDidMount () {
+        logger.debug(() => `Creating new chart`);
         this.chart = new ApexCharts(this.chartRef.current, this.getConfig());
         this.initDelegate();
         this.chart.render();
@@ -96,22 +106,22 @@ export class ApexChart extends Component<ComponentProps<ApexChartProps>, any> {
         const currentOptions = JSON.stringify(this.props.props.options);
         const currentSeries = JSON.stringify(this.props.props.series);
 
-        if (prevOptions !== currentOptions || prevSeries !== currentSeries) {
-            if (prevOptions === currentOptions) {
-                // options are not changed, just the series is changed
-                this.chart.updateSeries(this.prepareSeries(this.props.props.type, this.props.props.series));
+        if (prevOptions === currentOptions && prevSeries !== currentSeries) {
+            // options are not changed, just the series is changed
+            logger.debug(() => `Updating series`);
+            this.chart.updateSeries(this.prepareSeries(this.props.props.type, this.props.props.series));
 
-                if (this.lastZoom.length > 0) {
-                    this.chart.zoomX(this.lastZoom[0], this.lastZoom[1]);
-                }
-            } else {
-                // both might be changed
-                logger.debug(() => `Destroying chart`);
-                this.chart.destroy();
-                this.chart = new ApexCharts(this.chartRef.current, this.getConfig());
-                this.initDelegate();
-                this.chart.render();
+            if (this.lastZoom.length > 0) {
+                this.chart.zoomX(this.lastZoom[0], this.lastZoom[1]);
             }
+        } else {
+            // both might be changed
+            logger.debug(() => `Destroying chart`);
+            this.chart.destroy();
+            logger.debug(() => `Creating new chart`);
+            this.chart = new ApexCharts(this.chartRef.current, this.getConfig());
+            this.initDelegate();
+            this.chart.render();
         }
     }
 
@@ -163,7 +173,11 @@ export class ApexChart extends Component<ComponentProps<ApexChartProps>, any> {
                 options.chart.events.beforeMount = undefined;
             }
 
-            options.chart.events.mounted = this.mountedHandler;
+            if (options.chart.events.mounted) {
+                options.chart.events.mounted = this.mountedHandler;
+            } else {
+                options.chart.events.mounted = undefined;
+            }
 
             if (options.chart.events.updated) {
                 options.chart.events.updated = this.updatedHandler;
@@ -294,15 +308,9 @@ export class ApexChart extends Component<ComponentProps<ApexChartProps>, any> {
 
     @bind
     mountedHandler(chartContext, config) {
-        if (this.chart) {
-            this.chart.windowResizeHandler();
-        }
-
-        if (this.props.props.options.chart.events.mounted) {
-            const e = {
-            };
-            this.props.componentEvents.fireComponentEvent("mountedHandler", e);
-        }
+        const e = {
+        };
+        this.props.componentEvents.fireComponentEvent("mountedHandler", e);
     }
 
     @bind

diff --git a/web/yarn.lock b/web/yarn.lock
@@ -1951,10 +1951,10 @@ anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-apexcharts@3.28.3:
-  version "3.28.3"
-  resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.28.3.tgz#22a6d9b234c82f6c2e1dd4aebba05b7603e2b1d2"
-  integrity sha512-EhghB2P27/Gjhwct8sSS0V63mdpRMx/ikH34dwUTqZQnkAEyOS/RKDmYjXBNA7zsAKBE/pThOdoTya6ADyk6zQ==
+apexcharts@3.33.1:
+  version "3.33.1"
+  resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.33.1.tgz#7159f45e7d726a548e5135a327c03e7894d0bf13"
+  integrity sha512-5aVzrgJefd8EH4w7oRmuOhA3+cxJxQg27cYg3ANVGvPCOB4AY3mVVNtFHRFaIq7bv8ws4GRaA9MWfzoWQw3MPQ==
   dependencies:
     svg.draggable.js "^2.2.2"
     svg.easing.js "^2.0.0"