MIXED USE

venn = require("@upsetjs/venn.js");

// bring the data in
satGroupData =
  await FileAttachment("data/sat-user-overlap-data.csv")
    .csv({ typed: true });

// bring the country list in as an array
countries =
  await FileAttachment("data/sat-user-overlap-countries.csv")
  .csv({ typed: true });
countryList = countries.map(d => d.country);

// here's our colour map
allColours = ({
  "Civil": "#a6cee3",
  "Government": "#1f78b4",
  "Military": "goldenrod",
  "Commercial": "#33a02c"
});

// filter the data based on selected country
// then split joint user groups into arrays
viewof countrySelect = Inputs.select(countryList,
  {
    label: "Country",
    value: "Italy"
  });

filteredData = satGroupData
  .filter(function(row) {
    return row.country_owner == countrySelect;
  })
  .map(d => ({
    sets: d.sets.split("/"),
    label: d.overlapped == "TRUE" ?
      " " :
      d.sets.includes("/") ?
        `${d.sets.split('/').map(d => d.substring(0,3)).join('/')}: ${d.size}` :
        `${d.sets}: ${d.size}`,    // unsure why htl isn't working here!
    color: d.sets.includes("/") ?
      null :
      allColours[d.sets],
    size: d.size,
    overlapped: d.overlapped
  }));

overlapChart = filteredData.length > 0 ?
  userOverlapChart(filteredData) :
  html`<div style="width:100%;height:280px;padding-top:25px;display:flex;"><p style="margin:auto;">There are no satellite launches controlled by organizations in <strong>${countrySelect}</strong> in this dataset.</p></div>`;

function userOverlapChart(data, {
  width = 500,
  height = 500
} = {}) {
  
  // create the chart here!
  
  const svg = d3.create("svg") 
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", [0, 0, width, height])
    .attr("style", "max-width: 100%; height: auto; height: intrinsic;");

  svg.datum(data)
     .call(venn.VennDiagram().width(width).height(height));

  // light circles; dark text
  svg.selectAll(".venn-circle path").style("fill-opacity", 0.3);
  svg.selectAll(".venn-circle text.label")
    .style("fill", "#333333")
    .style("fill-opacity", 0.5);;
  svg.selectAll(".venn-intersection text")
    .style("fill", "#333333")
    .style("font-weight", "bold")
    .style("font-size", "smaller");

  return svg.node();
}

micro = require("micromodal@0.4.10")
micro.init({
  awaitOpenAnimation: true,
  awaitCloseAnimation: true
});