<?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.List;
import java.util.Map;

import org.zkoss.chart.Charts;
import org.zkoss.chart.Color;
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.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(400);
		Series series1 = rule.getChartOptions().getSeries(1);
		series1.setId("versions");
		series1.getDataLabels().setEnabled(false);
	}
	
	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("60%");
		browser.setPlotOptions(browserPlotOptions);
		DataLabels browserLabels = browser.getDataLabels();
		browserLabels.setFormat("{point.name}");
		browserLabels.setColor("#ffffff");
		browserLabels.setDistance(-30);
		PiePlotOptions versionPlotOptions = new PiePlotOptions();
		versionPlotOptions.setSize("80%");
		versionPlotOptions.setInnerSize("60%");
		version.setPlotOptions(versionPlotOptions);
		version.getDataLabels().setFormat("<b>{point.name}:</b> {point.y}%");
    }
}

package demo.pie;

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

import org.zkoss.chart.Color;
import org.zkoss.chart.Theme;
import org.zkoss.chart.ThemeColors;



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, "#90ed7d"));
		List<DonutData> chrome = new ArrayList<>();
		chrome.add(new DonutData("Chrome v97.0",36.89, "rgb(195,255,176)"));
		chrome.add(new DonutData("Chrome v96.0",18.16, "rgb(192,255,173)"));
		chrome.add(new DonutData("Chrome v95.0",0.54, "rgb(190,255,171)"));
		chrome.add(new DonutData("Chrome v94.0",0.7, "rgb(188,255,169)"));
		chrome.add(new DonutData("Chrome v93.0",0.8, "rgb(186,255,167)"));
		chrome.add(new DonutData("Chrome v92.0",0.41, "rgb(184,255,165)"));
		chrome.add(new DonutData("Chrome v91.0",0.31, "rgb(182,255,163)"));
		chrome.add(new DonutData("Chrome v90.0",0.13, "rgb(180,255,161)"));
		chrome.add(new DonutData("Chrome v89.0",0.14, "rgb(178,255,159)"));
		chrome.add(new DonutData("Chrome v88.0",0.1, "rgb(176,255,157)"));
		chrome.add(new DonutData("Chrome v87.0",0.35, "rgb(174,255,155)"));
		chrome.add(new DonutData("Chrome v86.0",0.17, "rgb(172,255,153)"));
		chrome.add(new DonutData("Chrome v85.0",0.18, "rgb(170,255,151)"));
		chrome.add(new DonutData("Chrome v84.0",0.17, "rgb(168,255,149)"));
		chrome.add(new DonutData("Chrome v83.0",0.21, "rgb(166,255,147)"));
		chrome.add(new DonutData("Chrome v81.0",0.1, "rgb(164,255,145)"));
		chrome.add(new DonutData("Chrome v89.0",0.16, "rgb(162,255,143)"));
		chrome.add(new DonutData("Chrome v79.0",0.43, "rgb(160,253,141)"));
		chrome.add(new DonutData("Chrome v78.0",0.11, "rgb(158,251,139)"));
		chrome.add(new DonutData("Chrome v76.0",0.16, "rgb(156,249,137)"));
		chrome.add(new DonutData("Chrome v75.0",0.15, "rgb(154,247,135)"));
		chrome.add(new DonutData("Chrome v72.0",0.14, "rgb(152,245,133)"));
		chrome.add(new DonutData("Chrome v70.0",0.11, "rgb(150,243,131)"));
		chrome.add(new DonutData("Chrome v69.0",0.13, "rgb(148,241,129)"));
		chrome.add(new DonutData("Chrome v56.0",0.12, "rgb(146,239,127)"));
		versions.put("Chrome", chrome);

		List<DonutData> safari = new ArrayList<>();
		safari.add(new DonutData("Safari v15.3", 0.1, "rgb(255,214,143)"));
		safari.add(new DonutData("Safari v15.2", 2.01, "rgb(255,208,137)"));
		safari.add(new DonutData("Safari v15.1", 2.29, "rgb(255,202,131)"));
		safari.add(new DonutData("Safari v15.0", 0.49, "rgb(255,197,126)"));
		safari.add(new DonutData("Safari v14.1", 2.48, "rgb(255,191,120)"));
		safari.add(new DonutData("Safari v14.0", 0.64, "rgb(255,185,114)"));
		safari.add(new DonutData("Safari v13.1", 1.17, "rgb(255,180,109)"));
		safari.add(new DonutData("Safari v13.0", 0.13, "rgb(255,174,103)"));
		safari.add(new DonutData("Safari v12.1", 0.16, "rgb(252,168,97)"));
		versions.put("Safari", safari);
		browsers.put("Safari", new DonutData("Safari", 9.47, "#f7a35c"));

		List<DonutData> edge = new ArrayList<>();
		versions.put("Edge", edge);
		browsers.put("Edge", new DonutData("Edge", 9.32, "#f15c80"));
		edge.add(new DonutData("Edge v97", 6.62, "rgb(255,143,179)"));
		edge.add(new DonutData("Edge v96", 2.55, "rgb(255,126,162)"));
		edge.add(new DonutData("Edge v95", 0.15, "rgb(255,109,145)"));

		List<DonutData> firefox = new ArrayList<>();
		versions.put("Firefox", firefox);
		browsers.put("Firefox", new DonutData("Firefox", 8.15, "#434348"));
		firefox.add(new DonutData("Firefox v96.0", 4.17, "rgb(118,118,123)"));
		firefox.add(new DonutData("Firefox v95.0", 3.33, "rgb(109,109,114)"));
		firefox.add(new DonutData("Firefox v94.0", 0.11, "rgb(101,101,106)"));
		firefox.add(new DonutData("Firefox v91.0", 0.23, "rgb(92,92,97)"));
		firefox.add(new DonutData("Firefox v78.0", 0.16, "rgb(84,84,89)"));
		firefox.add(new DonutData("Firefox v52.0", 0.15, "rgb(75,75,80)"));

		List<DonutData> other = new ArrayList<>();
		versions.put("Other", other);
		browsers.put("Other", new DonutData("Other", 11.02, "#e4d354"));
		other.add(new DonutData("Other", 11.02, "rgb(255,255,135)"));

	}
	
	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;

		public DonutData(String name, double data, String color) {
			this.data = data;
			this.name = name;
			this.color = color;
		}

		public double getData() {
			return data;
		}

		public String getName() {
			return name;
		}

		public String getColor() {
			return color;
		}
	}
}