themePies = (inData) => { const width = 300; const height = 300; const margin = { top: 20, right: 30, bottom: 30, left: 100 }; //console.log("START THEME PIES ====================================="); const outerRadius = width / 4; const innerRadius = 0; const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius); let pie = d3.pie().sort(null); let color = d3 .scaleOrdinal() .domain(["metal", "leather", "cloth", "fur"]) .range(["silver", "#876442", "#FFFBDE", "#CD9575"]); let svg = d3.create("svg").attr("width", width).attr("height", height); let slots = [ d3 .create("svg") .attr("width", width / 2) .attr("height", height / 2) .attr("class", ".\\0"), d3 .create("svg") .attr("width", width / 2) .attr("height", height / 2) .attr("class", ".\\1"), d3 .create("svg") .attr("width", width / 2) .attr("height", height / 2) .attr("class", ".\\2"), d3 .create("svg") .attr("width", width / 2) .attr("height", height / 2) .attr("class", ".\\3") ]; let hoverTable = Inputs.table([{ Name: "", Mount: "", Set: "", Theme: "" }]); //remove click functionality from row headers d3.select(hoverTable) .select("thead") .select("tr") .selectAll("th") .on("click", null); update("All"); //for each mount function update(mountType) { let data = themeSlotsSums(mountType); for (let slot in slots) { let slotData = data[slot]; //x and y offset for mount dye slot group let x = outerRadius * (slot % 2) * 2; let y = Math.floor(slot / 2) * outerRadius * 2; //make slices var arcs = slots[slot] .selectAll("path") .data(pie(Object.values(slotData))) .join( (enter) => { return enter .append("path") .attr("class", "" + slot) .attr( "transform", "translate(" + outerRadius + ", " + outerRadius + ")" ) .attr("fill", (d, i) => color(i)) .transition() .duration(500) .attrTween("d", arcTween); //.attr("d", arc) }, (update) => { return update .attr("fill", (d, i) => color(i)) .transition() .duration(500) .ease(d3.easeCubic) .attrTween("d", arcTween); //.attr("d", arc) } ) .exit() .remove(); //end arcs //https://d3-graph-gallery.com/graph/pie_annotation.html //labels slots[slot] .selectAll("text") .data(pie(Object.values(slotData))) .join( (enter) => enter .append("text") .text((d) => (d.data == 0 ? "" : d.data)) .attr("font-family", "sans-serif") .attr("font-weight", (d) => d.data == d3.max(Object.values(slotData)) ? "bold" : "" ) .attr( "transform", (d) => "translate(" + arc.centroid(d).map((a) => a + outerRadius) + ")" ) .style("text-anchor", "middle"), (update) => update .transition() .duration(500) .ease(d3.easeCubic) .text((d) => (d.data == 0 ? "" : d.data)) .attr( "transform", (d) => "translate(" + arc.centroid(d).map((a) => a + outerRadius) + ")" ) .attr("font-weight", (d) => d.data == d3.max(Object.values(slotData)) ? "bold" : "" ) .style("text-anchor", "middle") ); //end text join //hover table //let hoverTable = Inputs.table(data); slots[slot].selectAll("path").on("mouseover", (d, i) => { let mountListItems = mountsOfThemeWithSlot( themeFilter.value, slot, ["metal", "leather", "cloth", "fur"][i.index] ); //delete old rows d3.select(hoverTable).selectAll("tbody tr").remove(); //adds new rows let trs = d3 .select(hoverTable) .select("tbody") .selectAll("tr") .data(mountListItems) .enter() .append("tr"); trs.append("td").append("input").attr("type", "checkbox"); trs.append("td").html((d) => d.name); trs.append("td").html((d) => d.mount); trs.append("td").html((d) => d.set); trs.append("td").html((d) => d.theme); /*for(let row of mountListItems) { d3.select(hoverTable).select("tbody").append("tr") .append("td").append("input").attr("type", "checkbox") .append("td").html("abanana") .append("td").html("theme"); }*/ update(themeFilter.value); }); } //end for loop //https://bl.ocks.org/mbostock/1346410 // comment from site: "Store the displayed angles in _current. // Then, interpolate from _current to the new angles. // During the transition, _current is updated in-place by d3.interpolate." function arcTween(a) { var i = d3.interpolate(this._current, a); this._current = i(0); return function (t) { return arc(i(t)); }; } } //end update function const legend = makeLegend( false, ["metal", "leather", "cloth", "fur"], ["silver", "#876442", "#FFFBDE", "#CD9575"] ); const themeFilter = html` `; const themeCount = html`Skins in ${ THEMES().includes(themeFilter.value) ? "Theme" : "Set" }: ${getMountsOfTheme(themeFilter.value).length} `; const hiddenSlotSelector = html``; const hiddenSlotMaterialSelector = html``; d3.select(themeFilter).on("change", () => { let theme = themeFilter.value; let mounts = getMountsOfTheme(theme); update(theme); d3.select(themeCount).html( `Skins in ${THEMES().includes(theme) ? "Theme" : "Set"}: ` + mounts.length ); d3.select(sampleImg).attr( "src", mounts[Math.floor(Math.random() * mounts.length)].icon ); d3.select(sampleImg).attr("style", "width:50px"); }); //d3.select(selectTheme).on("change", ()=>update(selectTheme.value)); const sampleImg = html`

`; const mountList = html`

`; //console.log("END THEME PIES ============================="); return html`

Select Theme/Set: ${themeFilter} Mount Sample: ${sampleImg}
${themeCount}
${legend}
${slots[0].node()} ${slots[1].node()}
${slots[2].node()} ${slots[3].node()} ${hiddenSlotSelector} ${hiddenSlotMaterialSelector} ${hoverTable}

`; }