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



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

package demo.pie;

import java.util.Map;

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


public class PieDonutComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;

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

		chart.setSubtitle("Source: <a href=\"http://statcounter.com\" target=\"_blank\">statcounter.com</a>");

		PiePlotOptions piePlotOptions = chart.getPlotOptions().getPie();
		piePlotOptions.setShadow(false);
		piePlotOptions.setCenter("50%", "50%");
		chart.getTooltip().setValueSuffix("%");

		initSeries();

		Responsive.Rule rule = chart.getResponsive().getRule();
		rule.getCondition().setMaxWidth(500);
		Series series1 = rule.getChartOptions().getSeries(1);
		series1.setId("versions");
		DataLabels dataLabels = series1.getDataLabels();
		dataLabels.setDistance(10);
		dataLabels.setFormat("{point.custom.version}");
		DataLabelsFilter filter = dataLabels.getFilter();
		filter.setProperty("percentage");
		filter.setOperator(">");
		filter.setValue(2);
	}
	
	private void initSeries() {
		Series browser = chart.getSeries();
		Series version = chart.getSeries(1);
		browser.setName("Browsers");
		int i = 0;
		for (Map.Entry<String, PieDonutData.DonutData> browserEntry: PieDonutData.getBrowsers().entrySet()) {
			String key = browserEntry.getKey();
			PieDonutData.DonutData browserValue = browserEntry.getValue();
			Point browserPoint = new Point(key, browserValue.getData());
			browserPoint.setColor(browserValue.getColor());
			if (browserValue.getData() < 5)
				browserPoint.getDataLabels().setEnabled(false);
			browser.addPoint(browserPoint);
			for (PieDonutData.DonutData versionEntry: PieDonutData.getVersions(key)) {
				double versionValue = versionEntry.getData();
				Point versionPoint = new Point(versionEntry.getName(), versionValue);
				versionPoint.setColor(versionEntry.getColor());
				if (versionValue < 1) {
					versionPoint.getDataLabels().setEnabled(false);
				}
				version.addPoint(versionPoint);
			}
			i += 1;
		}
		PiePlotOptions browserPlotOptions = new PiePlotOptions();
		browserPlotOptions.setSize("45%");
		browser.setPlotOptions(browserPlotOptions);
		DataLabels browserLabels = browser.getDataLabels();
		browserLabels.setFormat("{point.name}");
		browserLabels.setColor("#ffffff");
		browserLabels.setDistance("-50%");
		PiePlotOptions versionPlotOptions = new PiePlotOptions();
		versionPlotOptions.setSize("80%");
		versionPlotOptions.setInnerSize("60%");
		versionPlotOptions.getDataLabels().setFormat("<b>{point.name}:</b> <span style=\"opacity: 0.5\">{y}%</span>");
		versionPlotOptions.getDataLabels().getFilter().setProperty("y");
		versionPlotOptions.getDataLabels().getFilter().setOperator(">");
		versionPlotOptions.getDataLabels().getFilter().setValue(1);
		versionPlotOptions.getDataLabels().setStyle("fontWeight: 'normal'");
		version.setPlotOptions(versionPlotOptions);
    }
}

package demo.pie;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;



public class PieDonutData {
	private static final Map<String, DonutData> browsers;
	private static final Map<String, List<DonutData>> versions;
	static {
		browsers = new LinkedHashMap<>();
		versions = new LinkedHashMap<>();
		browsers.put("Chrome", new DonutData("Chrome", 61.04, "#00e272"));
		List<DonutData> chrome = new ArrayList<>();
		chrome.add(new DonutData("Chrome v97.0",36.89, "rgb(51,255,165)"));
		chrome.add(new DonutData("Chrome v96.0",18.16, "rgb(48,255,162)"));
		chrome.add(new DonutData("Chrome v95.0",0.54, "rgb(46,255,160)"));
		chrome.add(new DonutData("Chrome v94.0",0.7, "rgb(44,255,158)"));
		chrome.add(new DonutData("Chrome v93.0",0.8, "rgb(42,255,156)"));
		chrome.add(new DonutData("Chrome v92.0",0.41, "rgb(40,255,154)"));
		chrome.add(new DonutData("Chrome v91.0",0.31, "rgb(38,255,152)"));
		chrome.add(new DonutData("Chrome v90.0",0.13, "rgb(36,255,150)"));
		chrome.add(new DonutData("Chrome v89.0",0.14, "rgb(34,255,148)"));
		chrome.add(new DonutData("Chrome v88.0",0.1, "rgb(32,255,146)"));
		chrome.add(new DonutData("Chrome v87.0",0.35, "rgb(30,255,144)"));
		chrome.add(new DonutData("Chrome v86.0",0.17, "rgb(28,254,142)"));
		chrome.add(new DonutData("Chrome v85.0",0.18, "rgb(26,252,140)"));
		chrome.add(new DonutData("Chrome v84.0",0.17, "rgb(24,250,138)"));
		chrome.add(new DonutData("Chrome v83.0",0.21, "rgb(22,248,136)"));
		chrome.add(new DonutData("Chrome v81.0",0.1, "rgb(20,246,134)"));
		chrome.add(new DonutData("Chrome v89.0",0.16, "rgb(18,244,132)"));
		chrome.add(new DonutData("Chrome v79.0",0.43, "rgb(16,242,130)"));
		chrome.add(new DonutData("Chrome v78.0",0.11, "rgb(14,240,128)"));
		chrome.add(new DonutData("Chrome v76.0",0.16, "rgb(12,238,126)"));
		chrome.add(new DonutData("Chrome v75.0",0.15, "rgb(10,236,124)"));
		chrome.add(new DonutData("Chrome v72.0",0.14, "rgb(8,234,122)"));
		chrome.add(new DonutData("Chrome v70.0",0.11, "rgb(6,232,120)"));
		chrome.add(new DonutData("Chrome v69.0",0.13, "rgb(4,230,118)"));
		chrome.add(new DonutData("Chrome v56.0",0.12, "rgb(2,228,116)"));
		versions.put("Chrome", chrome);

		List<DonutData> safari = new ArrayList<>();
		safari.add(new DonutData("Safari v15.3", 0.1, "rgb(255,157,104)"));
		safari.add(new DonutData("Safari v15.2", 2.01, "rgb(255,151,98)"));
		safari.add(new DonutData("Safari v15.1", 2.29, "rgb(255,145,92)"));
		safari.add(new DonutData("Safari v15.0", 0.49, "rgb(255,140,87)"));
		safari.add(new DonutData("Safari v14.1", 2.48, "rgb(255,134,81)"));
		safari.add(new DonutData("Safari v14.0", 0.64, "rgb(255,128,75)"));
		safari.add(new DonutData("Safari v13.1", 1.17, "rgb(255,123,70)"));
		safari.add(new DonutData("Safari v13.0", 0.13, "rgb(255,117,64)"));
		safari.add(new DonutData("Safari v12.1", 0.16, "rgb(255,111,58)"));
		versions.put("Safari", safari);
		browsers.put("Safari", new DonutData("Safari", 9.47, "#fe6a35"));

		List<DonutData> edge = new ArrayList<>();
		versions.put("Edge", edge);
		browsers.put("Edge", new DonutData("Edge", 9.32, "#d568fb"));
		edge.add(new DonutData("Edge v97", 6.62, "rgb(255,155,255)"));
		edge.add(new DonutData("Edge v96", 2.55, "rgb(247,138,255)"));
		edge.add(new DonutData("Edge v95", 0.15, "rgb(230,121,255)"));

		List<DonutData> firefox = new ArrayList<>();
		versions.put("Firefox", firefox);
		browsers.put("Firefox", new DonutData("Firefox", 8.15, "#544fc5"));
		firefox.add(new DonutData("Firefox v96.0", 4.17, "rgb(135,130,248)"));
		firefox.add(new DonutData("Firefox v95.0", 3.33, "rgb(126,121,239)"));
		firefox.add(new DonutData("Firefox v94.0", 0.11, "rgb(118,113,231)"));
		firefox.add(new DonutData("Firefox v91.0", 0.23, "rgb(109,104,222)"));
		firefox.add(new DonutData("Firefox v78.0", 0.16, "rgb(101,96,214)"));
		firefox.add(new DonutData("Firefox v52.0", 0.15, "rgb(92,87,205)"));

		List<DonutData> other = new ArrayList<>();
		versions.put("Other", other);
		browsers.put("Other", new DonutData("Other", 11.02, "#2ee0ca"));
		other.add(new DonutData("Other", 11.02, "rgb(97,255,253)"));

	}
	
	public static Map<String, DonutData> getBrowsers() {
		return browsers;
	}
	
	public static List<DonutData> getVersions(String browser) {
		return versions.get(browser);
	}

	public static class DonutData {
		private double data;
		private String name;
		private String color;
		private Map<String, String> custom;

		public DonutData(String name, double data, String color) {
			this.data = data;
			this.name = name;
			this.color = color;
			this.custom = new HashMap<>();
			this.custom.put("version", name.contains(" ") ? name.split(" ")[1] : name);
		}

		public double getData() {
			return data;
		}

		public String getName() {
			return name;
		}

		public String getColor() {
			return color;
		}

		public Map<String, String> getCustom() {
			return custom;
		}
	}
}