Upgraded ApexCharts and fixed bugs

- Upgraded to ApexCharts 3.49.0 - Added mouseLeave, xAxisLabelClick, and beforeZoom events - Fixed chart width issue on mobile devices - Fixed issue with chart not updating after changing type - Fixed bug on 8.1.39, removed refresh rate on ReactResizeDetector
Kyvis-Labs · Apr 22, 2024 · 5a75c50 · 5a75c50
1 parent 0b52127
commit 5a75c50
Show file tree

Hide file tree

Showing 11 changed files with 292 additions and 111 deletions.
diff --git a/build.gradle b/build.gradle
@@ -24,7 +24,7 @@ plugins {
     id "base"
 }
 
-version "1.0.16"
+version "1.0.17"
 group "com.kyvislabs"
 
 

diff --git a/common/src/main/java/com/kyvislabs/apexcharts/common/component/display/ApexChart.java b/common/src/main/java/com/kyvislabs/apexcharts/common/component/display/ApexChart.java
@@ -34,13 +34,16 @@ public class ApexChart {
     public static ComponentEventDescriptor UPDATED_HANDLER = new ComponentEventDescriptor("updatedHandler", "Fires when the chart has been dynamically updated either with updateOptions() or updateSeries() functions", JsonSchema.parse(Components.class.getResourceAsStream("/apexcharts.event.empty.props.json")));
     public static ComponentEventDescriptor CLICK_HANDLER = new ComponentEventDescriptor("clickHandler", "Fires when user clicks on any area of the chart.", JsonSchema.parse(Components.class.getResourceAsStream("/apexcharts.event.mouse.props.json")));
     public static ComponentEventDescriptor MOUSE_MOVE_HANDLER = new ComponentEventDescriptor("mouseMoveHandler", "Fires when user moves mouse on any area of the chart.", JsonSchema.parse(Components.class.getResourceAsStream("/apexcharts.event.mouse.props.json")));
+    public static ComponentEventDescriptor MOUSE_LEAVE_HANDLER = new ComponentEventDescriptor("mouseLeaveHandler", "Fires when user moves mouse outside chart area (exclusing axis).", JsonSchema.parse(Components.class.getResourceAsStream("/apexcharts.event.mouse.props.json")));
     public static ComponentEventDescriptor LEGEND_CLICK_HANDLER = new ComponentEventDescriptor("legendClickHandler", "Fires when user clicks on legend.", JsonSchema.parse(Components.class.getResourceAsStream("/apexcharts.event.seriesindex.props.json")));
     public static ComponentEventDescriptor MARKER_CLICK_HANDLER = new ComponentEventDescriptor("markerClickHandler", "Fires when user clicks on the markers.", JsonSchema.parse(Components.class.getResourceAsStream("/apexcharts.event.mouse.props.json")));
+    public static ComponentEventDescriptor X_AXIS_LABEL_CLICK_HANDLER = new ComponentEventDescriptor("xAxisLabelClickHandler", "Fires when user clicks on the x-axis labels.", JsonSchema.parse(Components.class.getResourceAsStream("/apexcharts.event.mouse.props.json")));
     public static ComponentEventDescriptor SELECTION_HANDLER = new ComponentEventDescriptor("selectionHandler", "Fires when user selects rect using the selection tool.", JsonSchema.parse(Components.class.getResourceAsStream("/apexcharts.event.xaxis.props.json")));
     public static ComponentEventDescriptor DATA_POINT_SELECTION_HANDLER = new ComponentEventDescriptor("dataPointSelectionHandler", "Fires when user clicks on a datapoint (bar/column/marker/bubble/donut-slice).", JsonSchema.parse(Components.class.getResourceAsStream("/apexcharts.event.mouse.props.json")));
     public static ComponentEventDescriptor DATA_POINT_MOUSE_ENTER_HANDLER = new ComponentEventDescriptor("dataPointMouseEnterHandler", "Fires when user’s mouse enter on a datapoint (bar/column/marker/bubble/donut-slice).", JsonSchema.parse(Components.class.getResourceAsStream("/apexcharts.event.mouse.props.json")));
     public static ComponentEventDescriptor DATA_POINT_MOUSE_LEAVE_HANDLER = new ComponentEventDescriptor("dataPointMouseLeaveHandler", "MouseLeave event for a datapoint (bar/column/marker/bubble/donut-slice).", JsonSchema.parse(Components.class.getResourceAsStream("/apexcharts.event.mouse.props.json")));
     public static ComponentEventDescriptor ZOOMED_HANDLER = new ComponentEventDescriptor("zoomedHandler", "Fires when user zooms in/out the chart using either the selection zooming tool or zoom in/out buttons.", JsonSchema.parse(Components.class.getResourceAsStream("/apexcharts.event.xaxis.props.json")));
+    public static ComponentEventDescriptor BEFORE_ZOOM_HANDLER = new ComponentEventDescriptor("beforeZoomHandler", "This function, if defined, runs just before zooming in/out of the chart allowing you to set a custom range for zooming in/out.", JsonSchema.parse(Components.class.getResourceAsStream("/apexcharts.event.xaxis.props.json")));
     public static ComponentEventDescriptor SCROLLED_HANDLER = new ComponentEventDescriptor("scrolledHandler", "Fires when user scrolls using the pan tool.", JsonSchema.parse(Components.class.getResourceAsStream("/apexcharts.event.xaxis.props.json")));
     public static ComponentEventDescriptor BRUSH_SCROLLED_HANDLER = new ComponentEventDescriptor("brushScrolledHandler", "Fires when user drags the brush in a brush chart.", JsonSchema.parse(Components.class.getResourceAsStream("/apexcharts.event.xaxis.props.json")));
 
@@ -53,7 +56,7 @@ public class ApexChart {
             .setId(COMPONENT_ID)
             .setModuleId(Components.MODULE_ID)
             .setSchema(SCHEMA) //  this could alternatively be created purely in Java if desired
-            .setEvents(Arrays.asList(ANIMATION_END_HANDLER, BEFORE_MOUNT_HANDLER, MOUNTED_HANDLER, UPDATED_HANDLER, CLICK_HANDLER, MOUSE_MOVE_HANDLER, LEGEND_CLICK_HANDLER, MARKER_CLICK_HANDLER, SELECTION_HANDLER, DATA_POINT_SELECTION_HANDLER, DATA_POINT_MOUSE_ENTER_HANDLER, DATA_POINT_MOUSE_LEAVE_HANDLER, ZOOMED_HANDLER, SCROLLED_HANDLER, BRUSH_SCROLLED_HANDLER))
+            .setEvents(Arrays.asList(ANIMATION_END_HANDLER, BEFORE_MOUNT_HANDLER, MOUNTED_HANDLER, UPDATED_HANDLER, CLICK_HANDLER, MOUSE_MOVE_HANDLER, MOUSE_LEAVE_HANDLER, LEGEND_CLICK_HANDLER, MARKER_CLICK_HANDLER, X_AXIS_LABEL_CLICK_HANDLER, SELECTION_HANDLER, DATA_POINT_SELECTION_HANDLER, DATA_POINT_MOUSE_ENTER_HANDLER, DATA_POINT_MOUSE_LEAVE_HANDLER, BEFORE_ZOOM_HANDLER, ZOOMED_HANDLER, SCROLLED_HANDLER, BRUSH_SCROLLED_HANDLER))
             .setName("ApexChart")
             .setIcon(new ImageIcon(Components.class.getResource("/icons/apexcharts.png")))
             .addPaletteEntry("", "ApexChart", "An ApexChart component.", null, null)

diff --git a/common/src/main/resources/apexcharts.event.mouse.props.json b/common/src/main/resources/apexcharts.event.mouse.props.json
@@ -13,6 +13,10 @@
                     "type": "number",
                     "description": "The series index"
                 },
+                "labelIndex": {
+                    "type": "number",
+                    "description": "The label index"
+                },
                 "mouseEvent": {
                     "type": "object",
                     "description": "The mouse event",

diff --git a/common/src/main/resources/variants/apexchart.line.props.json b/common/src/main/resources/variants/apexchart.line.props.json
@@ -25,12 +25,14 @@
                 "click": false,
                 "legendClick": false,
                 "markerClick": false,
+                "xAxisLabelClick": false,
                 "selection": false,
                 "dataPointSelection": false,
                 "dataPointMouseEnter": false,
                 "dataPointMouseLeave": false,
                 "beforeZoom": false,
                 "beforeResetZoom": false,
+                "beforeZoom": false,
                 "zoomed": false,
                 "scrolled": false,
                 "brushScrolled": false

diff --git a/common/src/main/resources/variants/apexchart.pie.props.json b/common/src/main/resources/variants/apexchart.pie.props.json
@@ -14,12 +14,14 @@
                 "click": false,
                 "legendClick": false,
                 "markerClick": false,
+                "xAxisLabelClick": false,
                 "selection": false,
                 "dataPointSelection": false,
                 "dataPointMouseEnter": false,
                 "dataPointMouseLeave": false,
                 "beforeZoom": false,
                 "beforeResetZoom": false,
+                "beforeZoom": false,
                 "zoomed": false,
                 "scrolled": false,
                 "brushScrolled": false

diff --git a/common/src/main/resources/variants/apexchart.radar.props.json b/common/src/main/resources/variants/apexchart.radar.props.json
@@ -14,12 +14,14 @@
                 "click": false,
                 "legendClick": false,
                 "markerClick": false,
+                "xAxisLabelClick": false,
                 "selection": false,
                 "dataPointSelection": false,
                 "dataPointMouseEnter": false,
                 "dataPointMouseLeave": false,
                 "beforeZoom": false,
                 "beforeResetZoom": false,
+                "beforeZoom": false,
                 "zoomed": false,
                 "scrolled": false,
                 "brushScrolled": false

diff --git a/common/src/main/resources/variants/apexchart.timeseries.props.json b/common/src/main/resources/variants/apexchart.timeseries.props.json
@@ -7,7 +7,29 @@
             "toolbar": {
                 "show": true
             },
-            "type": "line"
+            "type": "line",
+            "events": {
+                "animationEnd": false,
+                "beforeMount": false,
+                "mounted": false,
+                "updated": false,
+                "mouseMove": false,
+                "mouseLeave": false,
+                "click": false,
+                "legendClick": false,
+                "markerClick": false,
+                "xAxisLabelClick": false,
+                "selection": false,
+                "dataPointSelection": false,
+                "dataPointMouseEnter": false,
+                "dataPointMouseLeave": false,
+                "beforeZoom": false,
+                "beforeResetZoom": false,
+                "beforeZoom": false,
+                "zoomed": false,
+                "scrolled": false,
+                "brushScrolled": false
+            }
         },
         "dataLabels": {
             "enabled": false
@@ -33,86 +55,86 @@
     "series": [
         {
             "data": [
-                {
-                    "t_stamp": 1698098270040,
-                    "realistic0": 92.31973208860755
-                },
-                {
-                    "t_stamp": 1698098285040,
-                    "realistic0": 98.83574167869062
-                },
-                {
-                    "t_stamp": 1698098300040,
-                    "realistic0": 99.40744245366106
-                },
-                {
-                    "t_stamp": 1698098315040,
-                    "realistic0": 99.66981950013765
-                },
-                {
-                    "t_stamp": 1698098330040,
-                    "realistic0": 100.09892017618496
-                },
-                {
-                    "t_stamp": 1698098345040,
-                    "realistic0": 120.14773680171291
-                },
-                {
-                    "t_stamp": 1698098360040,
-                    "realistic0": 93.34921995339401
-                },
-                {
-                    "t_stamp": 1698098375040,
-                    "realistic0": 92.79367299375417
-                },
-                {
-                    "t_stamp": 1698098390040,
-                    "realistic0": 96.63583224666358
-                },
-                {
-                    "t_stamp": 1698098405040,
-                    "realistic0": 98.19833138153473
-                },
-                {
-                    "t_stamp": 1698098420040,
-                    "realistic0": 99.3663180104998
-                },
-                {
-                    "t_stamp": 1698098435040,
-                    "realistic0": 99.58241316401697
-                },
-                {
-                    "t_stamp": 1698098450040,
-                    "realistic0": 99.96153788007325
-                },
-                {
-                    "t_stamp": 1698098465040,
-                    "realistic0": 99.82900750014512
-                },
-                {
-                    "t_stamp": 1698098480040,
-                    "realistic0": 99.83112520906994
-                },
-                {
-                    "t_stamp": 1698098495040,
-                    "realistic0": 99.85872443002602
-                },
-                {
-                    "t_stamp": 1698098510040,
-                    "realistic0": 100.1508205345365
-                },
-                {
-                    "t_stamp": 1698098525040,
-                    "realistic0": 99.96632714360595
-                },
-                {
-                    "t_stamp": 1698098540040,
-                    "realistic0": 100.12634413881872
-                },
-                {
-                    "t_stamp": 1698098555040,
-                    "realistic0": 99.84604752053646
-                }
+                [
+                    1698098270040,
+                    92.3197320886076
+                ],
+                [
+                    1698098285040,
+                    98.8357416786906
+                ],
+                [
+                    1698098300040,
+                    99.4074424536611
+                ],
+                [
+                    1698098315040,
+                    99.6698195001376
+                ],
+                [
+                    1698098330040,
+                    100.098920176185
+                ],
+                [
+                    1698098345040,
+                    120.147736801713
+                ],
+                [
+                    1698098360040,
+                    93.349219953394
+                ],
+                [
+                    1698098375040,
+                    92.7936729937542
+                ],
+                [
+                    1698098390040,
+                    96.6358322466636
+                ],
+                [
+                    1698098405040,
+                    98.1983313815347
+                ],
+                [
+                    1698098420040,
+                    99.3663180104998
+                ],
+                [
+                    1698098435040,
+                    99.582413164017
+                ],
+                [
+                    1698098450040,
+                    99.9615378800733
+                ],
+                [
+                    1698098465040,
+                    99.8290075001451
+                ],
+                [
+                    1698098480040,
+                    99.8311252090699
+                ],
+                [
+                    1698098495040,
+                    99.858724430026
+                ],
+                [
+                    1698098510040,
+                    100.150820534537
+                ],
+                [
+                    1698098525040,
+                    99.966327143606
+                ],
+                [
+                    1698098540040,
+                    100.126344138819
+                ],
+                [
+                    1698098555040,
+                    99.8460475205365
+                ]
             ]
         }
     ]

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.44.0",
+        "apexcharts": "3.49.0",
         "object-scan": "13.9.0",
         "clean-deep": "3.4.0"
     },