<?xml version="1.0" encoding="UTF-8"?>



<window apply="demo.pie.PieDrilldownComposer">
	<charts id="chart" type="pie" title="Browser market shares. January, 2022"/>
</window>

package demo.pie;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Map.Entry;

import org.zkoss.chart.Accessibility;
import org.zkoss.chart.Charts;
import org.zkoss.chart.Point;
import org.zkoss.chart.Series;
import org.zkoss.chart.plotOptions.DataLabels;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;

import demo.data.Browser;
import demo.data.PieBrowserMarketShare;


public class PieDrilldownComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;

	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);

		chart.setSubtitle("Click the slices to view versions. Source: <a href=\"http://statcounter.com\" target=\"_blank\">statcounter.com</a>");

		Accessibility accessibility = chart.getAccessibility();
		accessibility.getAnnounceNewData().setEnabled(true);
		accessibility.getPoint().setValueSuffix("%");

		chart.getPlotOptions().getSeries().setBorderRadius(5);
		List<DataLabels> dataLabels = new ArrayList<>();
		dataLabels.add(new DataLabels());
		dataLabels.get(0).setEnabled(true);
		dataLabels.get(0).setDistance(15);
		dataLabels.get(0).setFormat("{point.name}");
		dataLabels.add(new DataLabels());
		dataLabels.get(1).setEnabled(true);
		dataLabels.get(1).setDistance("-30%");
		dataLabels.get(1).getFilter().setProperty("percentage");
		dataLabels.get(1).getFilter().setOperator(">");
		dataLabels.get(1).getFilter().setValue(5);
		dataLabels.get(1).setFormat("{point.y:.1f}%");
		dataLabels.get(1).setStyle("fontSize: '0.9em'; textOutline: 'none'");
		chart.getPlotOptions().getSeries().setDataLabels(dataLabels);
		
		chart.getTooltip().setHeaderFormat("<span style=\"font-size:11px\">{series.name}</span><br>");
		chart.getTooltip().setPointFormat("<span style=\"color:{point.color}\">{point.name}" +
			"</span>: <b>{point.y:.2f}%</b> of total<br/>");

		Map<String, Object> style = new HashMap<>();
		style.put("color", "var(--highcharts-highlight-color-100)");
		Map<String, Object> buttonTheme = new HashMap<>();
		buttonTheme.put("style", style);
		chart.getDrilldown().getBreadcrumbs().setButtonTheme(buttonTheme);
		
		initSeries();
	}
	
	private void initSeries() {
		Series series = chart.getSeries();
		List<Series> drilldowns = new ArrayList<Series>();
		series.setName("Browsers");
		series.setColorByPoint(true);
		;
		Iterator<Entry<Browser.GROUP, Double>> iterator =
				PieBrowserMarketShare.getBrands().entrySet().iterator();
		while (iterator.hasNext()) {
			Map.Entry<Browser.GROUP, Double> entry = iterator.next();
			String label = entry.getKey().getLabel();
			Point point = new Point(label, entry.getValue());
			if (!"Other".equals(label)) {
				point.setDrilldown(label);
				List<Browser> browsers = PieBrowserMarketShare.getVersions(entry.getKey());
				if (!browsers.isEmpty()) {
					Series s = new Series();
					s.setId(label);
					for (Browser browser: browsers) {
						Point p = new Point(browser.getVersion(), browser.getPercentage());
						s.addPoint(p);
					}
					drilldowns.add(s);
				}
			}
			series.addPoint(point);
		}
		chart.getDrilldown().setSeries(drilldowns);
	}
}

package demo.data;

import java.util.LinkedHashMap;
import java.util.LinkedList;
import java.util.List;
import java.util.Map;


public class PieBrowserMarketShare {
	private static Map<Browser.GROUP, Double> brands;
	private static List<Browser> browsers;
	static {
		
		brands = new LinkedHashMap<Browser.GROUP, Double>();
		brands.put(Browser.CHROME, 61.04);
		brands.put(Browser.SAFARI, 9.47);
		brands.put(Browser.EDGE, 9.32);
		brands.put(Browser.FIREFOX, 8.15);
		brands.put(Browser.OTHER, 11.02);
		
		browsers = new LinkedList<Browser>();

		browsers.add(new Browser(Browser.CHROME, "v97.0", 36.89));
		browsers.add(new Browser(Browser.CHROME, "v96.0", 18.16));
		browsers.add(new Browser(Browser.CHROME, "v95.0", 0.54));
		browsers.add(new Browser(Browser.CHROME, "v94.0", 0.7));
		browsers.add(new Browser(Browser.CHROME, "v93.0", 0.8));
		browsers.add(new Browser(Browser.CHROME, "v92.0", 0.41));
		browsers.add(new Browser(Browser.CHROME, "v91.0", 0.31));
		browsers.add(new Browser(Browser.CHROME, "v90.0", 0.13));
		browsers.add(new Browser(Browser.CHROME, "v89.0", 0.14));
		browsers.add(new Browser(Browser.CHROME, "v88.0", 0.1));
		browsers.add(new Browser(Browser.CHROME, "v87.0", 0.35));
		browsers.add(new Browser(Browser.CHROME, "v86.0", 0.17));
		browsers.add(new Browser(Browser.CHROME, "v85.0", 0.18));
		browsers.add(new Browser(Browser.CHROME, "v84.0", 0.17));
		browsers.add(new Browser(Browser.CHROME, "v83.0", 0.21));
		browsers.add(new Browser(Browser.CHROME, "v81.0", 0.1));
		browsers.add(new Browser(Browser.CHROME, "v80.0", 0.16));
		browsers.add(new Browser(Browser.CHROME, "v79.0", 0.43));
		browsers.add(new Browser(Browser.CHROME, "v78.0", 0.11));
		browsers.add(new Browser(Browser.CHROME, "v76.0", 0.16));
		browsers.add(new Browser(Browser.CHROME, "v75.0", 0.15));
		browsers.add(new Browser(Browser.CHROME, "v72.0", 0.14));
		browsers.add(new Browser(Browser.CHROME, "v70.0", 0.11));
		browsers.add(new Browser(Browser.CHROME, "v69.0", 0.13));
		browsers.add(new Browser(Browser.CHROME, "v56.0", 0.12));
		browsers.add(new Browser(Browser.CHROME, "v49.0", 0.17));

		browsers.add(new Browser(Browser.SAFARI, "v15.3", 0.1));
		browsers.add(new Browser(Browser.SAFARI, "v15.2", 2.01));
		browsers.add(new Browser(Browser.SAFARI, "v15.1", 2.29));
		browsers.add(new Browser(Browser.SAFARI, "v15.0", 0.49));
		browsers.add(new Browser(Browser.SAFARI, "v14.1", 2.48));
		browsers.add(new Browser(Browser.SAFARI, "v14.0", 0.64));
		browsers.add(new Browser(Browser.SAFARI, "v13.1", 1.17));
		browsers.add(new Browser(Browser.SAFARI, "v13.0", 0.13));
		browsers.add(new Browser(Browser.SAFARI, "v12.1", 0.16));

		browsers.add(new Browser(Browser.EDGE, "v97", 6.62));
		browsers.add(new Browser(Browser.EDGE, "v96", 2.55));
		browsers.add(new Browser(Browser.EDGE, "v95", 0.15));

		browsers.add(new Browser(Browser.FIREFOX, "v96.0", 4.17));
		browsers.add(new Browser(Browser.FIREFOX, "v95.0", 3.33));
		browsers.add(new Browser(Browser.FIREFOX, "v94.0", 0.11));
		browsers.add(new Browser(Browser.FIREFOX, "v91.0", 0.23));
		browsers.add(new Browser(Browser.FIREFOX, "v78.0", 0.16));
		browsers.add(new Browser(Browser.FIREFOX, "v52.0", 0.15));

	}

	static public  Map<Browser.GROUP, Double> getBrands() {
		return brands;
	}

	static public List<Browser> getVersions(Browser.GROUP group) {
		List<Browser> result = new LinkedList<Browser>();
		for (Browser browser: browsers) {
			if(browser.getGroup() == group) {
				result.add(browser);
			}
		}
		return result;
	}
}