From e13796bd72898e4696a36864ea85b31ac1462213 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sun, 17 Oct 2021 12:21:42 +0300 Subject: [PATCH] don't show bubble chart if no data --- modules/ui/burgs-overview.js | 2 + modules/ui/states-editor.js | 101 ++++++++++++++++++++++++++++------- 2 files changed, 85 insertions(+), 18 deletions(-) diff --git a/modules/ui/burgs-overview.js b/modules/ui/burgs-overview.js index f9bb8eff..ea8b2dec 100644 --- a/modules/ui/burgs-overview.js +++ b/modules/ui/burgs-overview.js @@ -295,6 +295,7 @@ function overviewBurgs() { const name = s.fullName ? s.fullName : s.name; return {id: s.i, state: s.i ? 0 : null, color, name}; }); + const burgs = pack.burgs .filter(b => b.i && !b.removed) .map(b => { @@ -306,6 +307,7 @@ function overviewBurgs() { return {id, i: b.i, state: b.state, culture: b.culture, province, parent, name: b.name, population, capital, x: b.x, y: b.y}; }); const data = states.concat(burgs); + if (data.length < 2) return tip("No burgs to show", false, "error"); const root = d3 .stratify() diff --git a/modules/ui/states-editor.js b/modules/ui/states-editor.js index 68b35a77..ba0d28a6 100644 --- a/modules/ui/states-editor.js +++ b/modules/ui/states-editor.js @@ -126,9 +126,15 @@ function editStates() { const capital = pack.burgs[s.capital].name; COArenderer.trigger("stateCOA" + s.i, s.coa); - lines += `
- + lines += `
+ @@ -143,7 +149,9 @@ function editStates() {
${si(population)}
- +
${s.cells}
@@ -200,7 +208,15 @@ function editStates() { if (customization || !state) return; const d = regions.select("#state" + state).attr("d"); - const path = debug.append("path").attr("class", "highlight").attr("d", d).attr("fill", "none").attr("stroke", "red").attr("stroke-width", 1).attr("opacity", 1).attr("filter", "url(#blur1)"); + const path = debug + .append("path") + .attr("class", "highlight") + .attr("d", d) + .attr("fill", "none") + .attr("stroke", "red") + .attr("stroke-width", 1) + .attr("opacity", 1) + .attr("filter", "url(#blur1)"); const l = path.node().getTotalLength(), dur = (l + 5000) / 2; @@ -564,19 +580,20 @@ function editStates() { function showStatesChart() { // build hierarchy tree - const data = pack.states.filter(s => !s.removed); + const statesData = pack.states.filter(s => !s.removed); + if (statesData.length < 2) return tip("There are no states to show", false, "error"); + const root = d3 .stratify() .id(d => d.i) - .parentId(d => (d.i ? 0 : null))(data) + .parentId(d => (d.i ? 0 : null))(statesData) .sum(d => d.area) .sort((a, b) => b.value - a.value); - const width = 150 + 200 * uiSizeOutput.value, - height = 150 + 200 * uiSizeOutput.value; + const size = 150 + 200 * uiSizeOutput.value; const margin = {top: 0, right: -50, bottom: 0, left: -50}; - const w = width - margin.left - margin.right; - const h = height - margin.top - margin.bottom; + const w = size - margin.left - margin.right; + const h = size - margin.top - margin.bottom; const treeLayout = d3.pack().size([w, h]).padding(3); // prepare svg @@ -588,7 +605,16 @@ function editStates() { `; alertMessage.innerHTML += `
‍
`; - const svg = d3.select("#alertMessage").insert("svg", "#statesInfo").attr("id", "statesTree").attr("width", width).attr("height", height).style("font-family", "Almendra SC").attr("text-anchor", "middle").attr("dominant-baseline", "central"); + + const svg = d3 + .select("#alertMessage") + .insert("svg", "#statesInfo") + .attr("id", "statesTree") + .attr("width", size) + .attr("height", size) + .style("font-family", "Almendra SC") + .attr("text-anchor", "middle") + .attr("dominant-baseline", "central"); const graph = svg.append("g").attr("transform", `translate(-50, 0)`); document.getElementById("statesTreeType").addEventListener("change", updateChart); @@ -632,7 +658,16 @@ function editStates() { const urban = rn(d.data.urban * populationRate * urbanization); const option = statesTreeType.value; - const value = option === "area" ? "Area: " + area : option === "rural" ? "Rural population: " + si(rural) : option === "urban" ? "Urban population: " + si(urban) : option === "burgs" ? "Burgs number: " + d.data.burgs : "Population: " + si(rural + urban); + const value = + option === "area" + ? "Area: " + area + : option === "rural" + ? "Rural population: " + si(rural) + : option === "urban" + ? "Urban population: " + si(urban) + : option === "burgs" + ? "Burgs number: " + d.data.burgs + : "Population: " + si(rural + urban); statesInfo.innerHTML = `${state}. ${value}`; stateHighlightOn(ev); @@ -646,7 +681,16 @@ function editStates() { } function updateChart() { - const value = this.value === "area" ? d => d.area : this.value === "rural" ? d => d.rural : this.value === "urban" ? d => d.urban : this.value === "burgs" ? d => d.burgs : d => d.rural + d.urban; + const value = + this.value === "area" + ? d => d.area + : this.value === "rural" + ? d => d.rural + : this.value === "urban" + ? d => d.urban + : this.value === "burgs" + ? d => d.burgs + : d => d.rural + d.urban; root.sum(value); node.data(treeLayout(root).leaves()); @@ -731,7 +775,11 @@ function editStates() { $("#statesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}}); tip("Click on state to select, drag the circle to change state", true); - viewbox.style("cursor", "crosshair").on("click", selectStateOnMapClick).call(d3.drag().on("start", dragStateBrush)).on("touchmove mousemove", moveStateBrush); + viewbox + .style("cursor", "crosshair") + .on("click", selectStateOnMapClick) + .call(d3.drag().on("start", dragStateBrush)) + .on("touchmove mousemove", moveStateBrush); body.querySelector("div").classList.add("selected"); } @@ -881,7 +929,8 @@ function editStates() { const center = burgCell ? burgCell : provCells[0]; const burg = burgCell ? cells.burg[burgCell] : 0; - const name = burgCell && P(0.7) ? getAdjective(pack.burgs[burg].name) : getAdjective(states[state].name) + " " + provinces[initProv].name.split(" ").slice(-1)[0]; + const name = + burgCell && P(0.7) ? getAdjective(pack.burgs[burg].name) : getAdjective(states[state].name) + " " + provinces[initProv].name.split(" ").slice(-1)[0]; const formName = name.split(" ").length > 1 ? provinces[initProv].formName : rw(form); const fullName = name + " " + formName; const color = getMixedColor(states[state].color); @@ -985,7 +1034,22 @@ function editStates() { cells.state[center] = newState; cells.province[center] = 0; - states.push({i: newState, name, diplomacy, provinces: [], color, expansionism: 0.5, capital: burg, type: "Generic", center, culture, military: [], alert: 1, coa, pole}); + states.push({ + i: newState, + name, + diplomacy, + provinces: [], + color, + expansionism: 0.5, + capital: burg, + type: "Generic", + center, + culture, + military: [], + alert: 1, + coa, + pole + }); BurgsAndStates.collectStatistics(); BurgsAndStates.defineStateForms([newState]); adjustProvinces([cells.province[center]]); @@ -1028,7 +1092,8 @@ function editStates() { function downloadStatesData() { const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value; - let data = "Id,State,Full Name,Form,Color,Capital,Culture,Type,Expansionism,Cells,Burgs,Area " + unit + ",Total Population,Rural Population,Urban Population\n"; // headers + let data = + "Id,State,Full Name,Form,Color,Capital,Culture,Type,Expansionism,Cells,Burgs,Area " + unit + ",Total Population,Rural Population,Urban Population\n"; // headers body.querySelectorAll(":scope > div").forEach(function (el) { const key = parseInt(el.dataset.id); const statePack = pack.states[key];