Series methods added to apexcharts-wrapper.js: toggleSeries, hideSeri…

…es, showSeries, resetSeries. (#97)

Co-authored-by: Vitaly Repetenko <vrepetenko@gmail.com>

src/main/java/com/github/appreciated/apexcharts/ApexCharts.java

@@ -156,7 +156,7 @@ public void setYaxis(YAxis yaxis) {
     public void render() {
         getElement().callJsFunction("render");
     }
-    
+
     public PendingJavaScriptResult dataURI() {
         return getElement().callJsFunction("dataURI");
     }
@@ -215,6 +215,39 @@ public void setSeries(Double... series) {
         }
     }
 
+    /**
+    * Method to toggle the visibility of series programmatically. Useful when you have a custom legend.
+    * @param seriesName the series name which you want to toggle visibility for
+    */
+    public PendingJavaScriptResult toggleSeries(String seriesName) {
+        return getElement().callJsFunction("toggleSeries", seriesName);
+    }
+
+    /**
+    * Method  to show the hidden series. If the series is already visible, this doesn’t affect it.
+    * @param seriesName the series name which you want to show
+    */
+    public void showSeries(String seriesName) {
+        getElement().callJsFunction("showSeries", seriesName);
+    }
+
+    /**
+    * Method to hide the visible series. If the series is already hidden, this method doesn’t affect it.
+    * @param seriesName the series name which you want to hide
+    */
+    public void hideSeries(String seriesName) {
+        getElement().callJsFunction("hideSeries", seriesName);
+    }
+
+    /**
+    * Method to resets all toggled series and bring back the chart to its original state.
+    * @param shouldUpdateChart after resetting the series, the chart data should update and return to it’s original series
+    * @param shouldResetZoom if the user has zoomed in when this method is called, the zoom level should also reset.
+    */
+    public void resetSeries(Boolean shouldUpdateChart, Boolean shouldResetZoom) {
+        getElement().callJsFunction("resetSeries", shouldUpdateChart, shouldResetZoom);
+    }
+
     /**
      * Method to set a custom {@link ObjectMapper} used for customizing object serialization.
      * Usually, this objectMapper should set {@link JsonInclude.Include#NON_NULL}.

src/main/resources/META-INF/resources/frontend/com/github/appreciated/apexcharts/apexcharts-wrapper.js

@@ -281,6 +281,36 @@ class ApexChartsWrapper extends PolymerElement {
             return this.chartComponent.dataURI();
         }
     }
+
+    toggleSeries(seriesName) {
+        if (this.chartComponent) {
+            this.updateConfig();
+            return this.chartComponent.toggleSeries(seriesName);
+        }
+    }
+
+    hideSeries(seriesName) {
+        if (this.chartComponent) {
+            this.updateConfig();
+            return this.chartComponent.hideSeries(seriesName);
+        }
+    }
+
+    showSeries(seriesName) {
+        if (this.chartComponent) {
+            this.updateConfig();
+            return this.chartComponent.showSeries(seriesName);
+        }
+    }
+
+    resetSeries(shouldUpdateChart, shouldResetZoom)
+    {
+        if (this.chartComponent) {
+            this.updateConfig();
+            return this.chartComponent.resetSeries(shouldUpdateChart, shouldResetZoom);
+        }
+    }
+
 }
 
 customElements.define(ApexChartsWrapper.is, ApexChartsWrapper);

src/test/java/com/github/appreciated/apexcharts/DemoView.java

@@ -1,6 +1,12 @@
 package com.github.appreciated.apexcharts;
 
+import com.github.appreciated.apexcharts.config.builder.TitleSubtitleBuilder;
 import com.github.appreciated.apexcharts.examples.ExampleChartGenerator;
+import com.github.appreciated.apexcharts.examples.bar.RangedVerticalBarChartExample;
+import com.github.appreciated.apexcharts.examples.bar.VerticalBarChartExample;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.router.Route;
@@ -15,6 +21,26 @@ public class DemoView extends HorizontalLayout {
     public DemoView() {
         Arrays.stream(ExampleChartGenerator.getCharts()).map(ApexChartsBuilder::build).forEach(left::add);
         Arrays.stream(ExampleChartGenerator.getColoredCharts()).map(ApexChartsBuilder::build).forEach(right::add);
+
+        ApexChartsBuilder  verticalBarChartBuilder = new RangedVerticalBarChartExample();
+        ApexCharts verticalBarChartExample = verticalBarChartBuilder
+                .withTitle(TitleSubtitleBuilder.get().withText(verticalBarChartBuilder.getClass().getSimpleName()).build())
+                .build();
+
+        Button toggleButton = new Button("Toggle", click -> {verticalBarChartExample.toggleSeries("Revenue");});
+        Button hideButton = new Button("Hide", click -> {verticalBarChartExample.hideSeries("Revenue");});
+        Button showButton = new Button("Show", click -> {verticalBarChartExample.showSeries("Revenue");});
+        Button resetButton = new Button("Reset", click -> {verticalBarChartExample.resetSeries(true, true);});
+
+        Div div = new Div();
+        HorizontalLayout hl = new HorizontalLayout();
+
+        hl.add(toggleButton, hideButton, showButton, resetButton);
+        div.add(verticalBarChartExample, new Span("Revenue series control: "), hl);
+        left.add(div);
+
+        div.setWidthFull();
+
         setSizeFull();
         getStyle()
                 .set("overflow", "auto");
@@ -24,6 +50,7 @@ public DemoView() {
         left.setWidth("50%");
         right.setWidth("50%");
         right.setHeight("unset");
+
     }
 
 }