diff --git a/src/main/java/com/github/appreciated/apexcharts/ApexCharts.java b/src/main/java/com/github/appreciated/apexcharts/ApexCharts.java index 3ab1383..251ea56 100644 --- a/src/main/java/com/github/appreciated/apexcharts/ApexCharts.java +++ b/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}. diff --git a/src/main/resources/META-INF/resources/frontend/com/github/appreciated/apexcharts/apexcharts-wrapper.js b/src/main/resources/META-INF/resources/frontend/com/github/appreciated/apexcharts/apexcharts-wrapper.js index 36ff40c..cf11d83 100755 --- a/src/main/resources/META-INF/resources/frontend/com/github/appreciated/apexcharts/apexcharts-wrapper.js +++ b/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); diff --git a/src/test/java/com/github/appreciated/apexcharts/DemoView.java b/src/test/java/com/github/appreciated/apexcharts/DemoView.java index 962dcd4..bd121c8 100644 --- a/src/test/java/com/github/appreciated/apexcharts/DemoView.java +++ b/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"); + } }