Comércio do G20 em números

viewof type_evol = Inputs.radio(
  new Map([
    ["Exportações", "EXP"],
    ["Importações", "IMP"]
  ]),
  {label: "Fluxo", value: "EXP"},
)

viewof cat_evol = Inputs.radio(
  new Map([
    ["Bens", "goods"],
    ["Serviços", "services"]
  ]),
  {label: "Tipo", value: "goods"},
)

{
  if (type_evol === "EXP" & cat_evol === "goods") {
    return html`<p></p><p>Em 2005, o total exportado pelo G20 foi de US$ 8,2 trilhões. Já em 2021, o total exportado por esse grupo de países chegou a US$ 17 trilhões, o que representa um crescimento de 107%. A participação do G20 no comércio mundial foi de aproximadamente 80% durante esse período.</p>`
  }

  if (type_evol === "IMP" & cat_evol === "goods") {
    return html`<p></p><p>Em 2005, o total importado pelo G20 foi de US$ 8,7 trilhões. Já em 2021, o total importado por esse grupo de países chegou a US$ 17,5 trilhões, o que representa um crescimento de 101%. A participação do G20 no comércio mundial foi de aproximadamente 80% durante esse período.</p>`
  }

  if (type_evol === "EXP" & cat_evol === "services") {
    return html`<p></p><p>Em 2005, o total exportado pelo G20 foi de US$ 2,3 trilhões. Já em 2021, o total exportado por esse grupo de países chegou a US$ 5,1 trilhões, o que representa um crescimento de 157%. A participação do G20 no comércio mundial foi de aproximadamente 80% durante esse período.</p>`
  }

  if (type_evol === "IMP" & cat_evol === "services") {
    return html`<p></p><p>Em 2005, o total importado pelo G20 foi de US$ 2,1 trilhões. Já em 2021, o total importado por esse grupo de países chegou a US$ 4,6 trilhões, o que representa um crescimento de 115%. A participação do G20 no comércio mundial foi de aproximadamente 80% durante esse período.</p>`
  }

}

{
  const type_title = type_evol === "EXP" ? "Exportações" : "Importações";
  const cat_title = cat_evol === "goods" ? "Bens" : "Serviços";
  return html`<span class="title-chart">${type_title} de ${cat_title}`
}

plot_evolucao = {

  const chart_start = d3.select("#chart-evol").classed("start");
    
  if(chart_start) {
    await visibility();
  }

  const type = type_evol;
  const category = cat_evol;
  let data_plot = transpose(dados_evol);
  data_plot = data_plot.filter(d => d.flow === type && d.type === category);

  const margin = {top: 40, right: 30, bottom: 40, left: 80};
  const height = 350;
  width; // monitora o tamanho da tela
  const plot_width = d3.select("#chart-evol").node().getBoundingClientRect().width;

  let range_color;
  if (cat_evol === "goods") {
    range_color = ["#2c3e50", "#a6a6a6"];
  } else {
    range_color = ["#7a5195", "#a6a6a6"];
  }

  const plot = Plot.plot({
    marginLeft: margin.left,
    marginTop: margin.top,
    marginRight: margin.right,
    marginBottom: margin.bottom,
    width: plot_width,
    height: height,
    aspectRatio: 1,
    color: {legend: false, range: range_color, className: "legend"},
    y: {
      grid: true,
      label: "↑ US$ Bilhões",
      tickFormat: (d) => locale.format(",.0f")(d),
      ticks: 6
    },
    x: {
      label: "Ano",
      tickFormat: "d"
    },
    style: {
      fontFamily: "Poppins",
      fontSize: "14px",
      fontWeight: "normal",
      backgroundColor: "#f7f7f7"
    },
    marks: [
      Plot.areaY(data_plot, {
        x: "year",
        y: "total",
        fill: "group",
        stroke: "white",
        strokeWidth: 3
      }),
      Plot.ruleY([0])
    ]
  })

  const color = plot.scale("color");
  const x_scale = plot.scale("x");
  const chart = d3.select(plot);

  // Workaround if there's a legend....
  // Source: https://observablehq.com/@mkfreeman/plot-tooltipobs
  const type_plot = d3.select(plot).node().tagName;
  let wrapper =
    type_plot === "FIGURE" ? d3.select(plot).select("svg") : d3.select(plot);

  const svgs = d3.select(plot).selectAll("svg");
  if (svgs.size() > 1) wrapper = d3.select([...svgs].pop());
  // wrapper.style("overflow", "visible"); // to avoid clipping at the edges

  // Recupera as áreas
  const areas = chart.select('[aria-label="area"]')
    .selectAll("path");

  const polygons = areas
      .nodes()
      .map(d => d3plus.path2polygon(d.getAttribute('d')));

  // Recupera os grupos únicos (set)
  const keys = Array.from(d3.union(d3.map(data_plot, d => d.group)));

  let largest_recs = polygons
      .map(d => d3plus.largestRect(d, {nTries: 40}));

  largest_recs.forEach((d, i) => d.group = keys[i])

  // Adiciona o texto com tamanhos dinâmicos
  wrapper.attr("id", "textResize");
  setTimeout(() => {
  new d3plus.TextBox()
      .data(largest_recs)
      .select('#textResize')
      .height(d => d.height)
      .width(d => d.width)
      .x(d => d.cx - d.width / 2)
      .y(d => d.cy - d.height / 2)
      .text(d => d.group)
      .fontResize(true)
      .fontMax(28)
      // .fontColor(d => d3plus.colorContrast(color.apply(d.group)))
      .fontColor("#ffffff")
      .textAnchor('middle')
      .verticalAlign('middle')
      .fontWeight("bold")
      .fontFamily("Poppins")
      .rotate(d => d.angle)
      .render();
  }, 700);

  // Tooltip 
  
  areas
    .on("pointerenter pointermove", function(event, data) {
      const [x, y] = d3.pointer(event);
      const group = data_plot[data[0]].group;
      const  area_data = data_plot.filter(d => d.group == group);
  
      const years = area_data.map(d => d.year);
      const pointer_year = x_scale.invert(x + 3);
      const index = d3.bisect(years, pointer_year) - 1;
  
      tip
        .data([area_data[index]])      
        .position([event.clientX, event.clientY])
        .title(d => d.group + `<span style='margin-left: 5px; padding-left: 20px; background-color: ${color.apply(d.group)}'></span>`)
        .background("#fff")
        .tbody([
          ["Ano", d => d.year],
          ["Valor (US$ Bilhões)", d => locale.format(",.0f")(d.total)],
          ["Participação", d => locale.format(".1%")(d.share)]
        ])
        .render();
      
    })
    .on("pointerout", function() {
      tip
        .position([-200, -200])
        .title(d => d.group)        
        .render();
    })

  // Animation: https://observablehq.com/@giorgi-ghviniashvili/animating-d3-area
  const defs = chart.append('defs')
    .append('clipPath')
    .attr('id', 'clipEvol')
    .append('rect')
    .attr('height', height)
    .attr('width', 0);

  areas
    .attr('clip-path', `url(#clipEvol)`);

  defs.transition()
    .duration(1000)
    .attr('width', plot_width)

  d3.select("#chart-evol")
    .classed("start", false)
    .html("")
    .append(() => plot);
}

{
  const type_title = type_evol2 === "EXP" ? "Exportações" : "Importações";
  const cat_title = cat_evol2 === "goods" ? "Bens" : "Serviços";
  return html`<span class="title-chart">${type_title} de ${cat_title}</span>`
}

viewof type_evol2 = Inputs.radio(
  new Map([
    ["Exportações", "EXP"],
    ["Importações", "IMP"]
  ]),
  {label: "Fluxo", value: "EXP"},
)

viewof cat_evol2 = Inputs.radio(
  new Map([
    ["Bens", "goods"],
    ["Serviços", "services"]
  ]),
  {label: "Tipo", value: "goods"},
)

{
  if (type_evol2 === "EXP" & cat_evol2 === "goods") {
    return html`<p></p><p>Analisando o período entre 2006 e 2021, observa-se a ascensão da China como o maior exportador de bens dentro do G20. Em 2006, este país estava na 3ª posição entre os membros do G20, mas, em 2011, a China já ocupava a 1ª posição. A Alemanha, que ocupava a 1ª posição em 2006, caiu para a 3ª posição em 2021. A Coreia do Sul apresenta o crescimento relativo mais considerável. Em 2006, a Coreia do Sul estava na 9ª posição, mas, em 2021, já ocupava a 5ª posição.</p>`
  }

  if (type_evol2 === "IMP" & cat_evol2 === "goods") {
    return html`<p></p><p>Analisando o período entre 2006 e 2021, observa-se a permanência dos Estados Unidos como o maior importador de bens dentro do G20. A China, que ocupava a 3ª posição em 2006, passou a ocupar na 2ª posição em 2021. No período, Coreia do Sul, Índia, Rússia e  Indonésia foram os membros que ganharam pelo menos duas posições neste ranking. A Índia apresentou o crescimento relativo mais considerável dentre todos os membros do G20.</p>`    
  }

  if (type_evol2 === "EXP" & cat_evol2 === "services") {
    return html`<p></p><p>Analisando o período entre 2006 e 2021, os Estados Unidos permaneceram como o maior exportador de serviços dentro do G20. O Reino Unido também apareceu de forma constante na 2ª posição. A China, que ocupava a 7ª posição em 2006, passou a estar na 3ª posição em 2021. Além da China, pode-se destacar os ganhos de posições da Índia, da Coreia do Sul e do México.</p>`
  }

  if (type_evol2 === "IMP" & cat_evol2 === "services") {
    return html`<p></p><p>Analisando o período entre 2006 e 2021, os Estados Unidos permaneceram como o maior importador de serviços dentro do G20. A Alemanha, que ocupava a 2ª posição em 2006, passou a estar na 3ª posição em 2021. A China, que em 2021 ocupava a 2ª posição, saiu da 7ª posição em 2006.</p>`
  }
}

viewof tipo_fluxo_bens_part_g20 = Inputs.radio(
  new Map([
    ["Exportações", "X"],
    ["Importações", "M"]
  ]),
  {label: "Fluxo", value: "X"},
)

{
  if (tipo_fluxo_bens_part_g20 == "X") {
    const title = html`<span class="title-chart">Participação do G20 como destino das exportações</span>`;
    return title
  }

  if (tipo_fluxo_bens_part_g20 == "M") {
    const title = html`<span class="title-chart">Participação do G20 como origem nas importações</span>`
    return title
  }
}

plot_share_g20 = {

  const chart_start = d3.select("#chart-share-g20").classed("start");    
  if(chart_start) {
    await visibility();
  }

  let data_plot =  transpose(dados_share_g20)
    .filter(d => d.flow_code === "X")

  const margin = ({top: 20, right: 30, bottom: 60, left: 60});
  width;
  const plot_width = d3.select("#chart-share-g20").node().getBoundingClientRect().width;
  const height = 500;

  // create a horizontal bar chart
  const plot = Plot.plot({
    marks: [
      Plot.barX(data_plot, {
        x: "share",
        y: "reporter_name_agg",
        fill: "#2c3e50",
        sort: {"y": null}
      }),
      Plot.image(data_plot, {
        x: 0,
        y: "reporter_name_agg",
        src: "flag_file",
        r: 12,
        dx: -20
      }),
      Plot.ruleY(data_plot, Plot.selectLast({y: "reporter_name_agg", dy: 20}))
    ],
    x: {
      label: "Participação do G20 (%)",
      grid: true,
      tickFormat: (d) => locale.format(".1%")(d),
      domain: [0, 1]
    },
    y: {label: "Membro do G20", axis: null},
    style: {
      fontFamily: "Poppins",
      fontSize: "14px",
      fontWeight: "normal",
      backgroundColor: "#eeeeee"
    },
    marginLeft: margin.left,
    marginRight: margin.right,
    marginTop: margin.top,
    marginBottom: margin.bottom,
    width: plot_width,
    height: height
  })

  const type_plot = d3.select(plot).node().tagName;
  let wrapper =
    type_plot === "FIGURE" ? d3.select(plot).select("svg") : d3.select(plot);

  const svgs = d3.select(plot).selectAll("svg");
  if (svgs.size() > 1) wrapper = d3.select([...svgs].pop());

  // Escalas
  const yScale = plot.scale("y");
  const y = d3.scaleBand()
    .domain(yScale.domain)
    .range(yScale.range)
    .padding(0.4);

  const xScale = plot.scale("x");

  // Seleciona bars
  const bars = wrapper
    .selectAll("[aria-label='bar']")
    .selectAll("rect");

  // Seleciona images
  const images = wrapper
    .selectAll("[aria-label='image']")
    .selectAll("image");

  // Animação das barras
  bars
    .data(data_plot)
    .attr("width", 0)
    .transition()
    .duration(500)
    .attr("width", d => xScale.apply(d.share) - margin.left);

  function updatePlot(type) {
    let data_plot = aq.from(transpose(dados_share_g20));

    const data_plot_new = data_plot
      .filter(aq.escape(d => d.flow_code == type))
      .orderby(aq.desc("share"))
      .objects();

    const data_plot_exp = data_plot
      .filter(aq.escape(d => d.flow_code == "X"))
      .orderby(aq.desc("share"))
      .objects();

    const order_new = data_plot_new.map(d => d.reporter_name_agg);
    const order_orig = data_plot_exp.map(d => d.reporter_name_agg);

    y.domain(order_new);
    data_plot_new.sort((a, b) => order_orig.indexOf(a.reporter_name_agg) - order_orig.indexOf(b.reporter_name_agg));

    bars
      .data(data_plot_new)
      .transition()
      .duration(500)
      .attr("width", d => xScale.apply(d.share) - margin.left)
      .attr("y", d => y(d.reporter_name_agg));

    images
      .data(data_plot_new)
      .transition()
      .duration(500)
      .attr("y", d => y(d.reporter_name_agg) - 12);

    // Tooltips
    bars.on("pointerenter pointermove", function(event, data) {
      const [x, y] = d3.pointer(event);
      tip
        .data([data])      
        .position([event.clientX, event.clientY])
        .title(d => d.reporter_name_agg + `<img src="${d.flag_file}" width="40" style="padding-left: 10px;">`)
        .background("#fff")
        .tbody([
          ["Ano", d => d.period],
          ["Valor Mundo (US$ Bilhões)", d => locale.format(",.2f")(d.value)],
          ["Valor G20 (US$ Bilhões)", d => locale.format(",.2f")(d.value * d.share)],
          ["Participação G20", d => locale.format(".1%")(d.share)]
        ])
        .width(300)
        .render();
    })
    .on("pointerout lostpointercapture", function() {
      tip
        .position([-200, -200])
        .title(d => d.reporter_name_agg)        
        .render();
    })

  }

  d3.select("#chart-share-g20")
  .classed("start", false)
  .html("")
  .append(() => plot);

  return Object.assign(plot, {updatePlot});

}

plot_share_g20_upd = plot_share_g20.updatePlot(tipo_fluxo_bens_part_g20);

{
  const type_title2 = tipo_fluxo_parceiros === "X" ? "Exportações de Bens" : "Importações de Bens";
  return html`<span class="title-chart"> Comércio bilateral</span>`
}

plot_parceiros_comerciais = {  
  
  const chart_start = d3.select("#chart-parceiros-comerciais").classed("start");    
  if(chart_start) {
    await visibility();
  }
  const sankey_data = ({
    nodes: transpose(nodes_sankey),
    links: transpose(links_sankey).filter(d => d.fluxo == tipo_fluxo_parceiros)
  })

    console.log("AQUI!")
    console.log(transpose(links_sankey).filter(d => d.fluxo == tipo_fluxo_parceiros))
    console.log(tipo_fluxo_parceiros)

  width; // monitora mudanças no tamanho da janela
  const plot_width = d3.select("#chart-parceiros-comerciais").node().getBoundingClientRect().width;
  const height = 600;

  sankeyModule
    .sankey()
    .nodeWidth(20)
    .nodeSort(null)
    .iterations(3)
    // .nodePadding(height / sankey_data.nodes.length)
    .nodeAlign(sankeyModule.sankeyRight)
    .size([plot_width, height])(sankey_data);

  const links = sankey_data.links.map((l) => [
    { x: l.source.x1, y0: l.y0 + l.width / 2, y1: l.y0 - l.width / 2, source_name: l.source.name, target_name: l.target.name, value: l.value },
    { x: l.target.x0, y0: l.y1 + l.width / 2, y1: l.y1 - l.width / 2, source_name: l.source.name, target_name: l.target.name, value: l.value}
  ]);


  const plot = Plot.plot({
    marks: [
      links.map((link) =>
        Plot.areaY(link, {
          x: "x",
          y1: "y0",
          y2: "y1",
          curve: "bump-x",
          fill: "#2c3e50",
          fillOpacity: 0.2,
          title: (d) => `${d.source_name} → ${d.target_name}: ${locale.format(",.0f")(d.value)}`,
          order: "value"
        })
      ),
      Plot.rect(sankey_data.nodes, {
        x1: "x0",
        x2: "x1",
        y1: "y0",
        y2: "y1",
        fill: (d) => d.node > 21 ? "#16a085" : "#d35400"
      }),
      Plot.text(sankey_data.nodes, {
        x: "x0",
        dx: -5,
        y: (d) => (d.y1 + d.y0) / 2,
        text: "name",
        textAnchor: "end",
        lineWidth: 10
      }),
      Plot.text([[0,600]], {text: ["Exportador"], dy: -20, fontWeight: "bold"}),
      Plot.text([[plot_width, 600]], {text: ["Importador"], dy: -20, textAnchor: "end", fontWeight: "bold"}),
    ],
    x: { axis: null },
    y: { axis: null },
    color: {
      range: ["#5e5d5d", "#2c3e50", "#424b6f", "#6d5286", "#a0548d", "#d15682", "#f56268", "#ff7f43", "#ffa600", "#ffe600", "#79bd57", "#529530"]
    },
    style: {
      fontFamily: "Poppins",
      fontSize: "12px",
      fontWeight: "normal",
      backgroundColor: "#eeeeee"
    },
    width: plot_width,
    height: height,
    marginTop: 40,
    marginBottom: 40,
    marginRight: 0,
    marginLeft: 120
  })

  const color = plot.scale("color");

  const type_plot = d3.select(plot).node().tagName;
  let wrapper =
    type_plot === "FIGURE" ? d3.select(plot).select("svg") : d3.select(plot);

  const svgs = d3.select(plot).selectAll("svg");
  if (svgs.size() > 1) wrapper = d3.select([...svgs].pop());

  // Seleciona areas
  const areas = wrapper
    .selectAll('path')
    .data(sankey_data.links);   

  areas.on("pointerenter pointermove", function(event, data) {
    
    const path = d3.select(this);
    path.attr("fill-opacity", 0.5);
    
  })
  .on("pointerout lostpointercapture", function() {
    const path = d3.select(this);
    path.attr("fill-opacity", 0.2);
  })

  // Seleciona rects
  const rects = wrapper
    .selectAll("[aria-label='rect']")
    .selectAll('rect');

  rects.on("pointerenter pointermove", function(event, data) {    

    const [x, y] = d3.pointer(event);

    areas
      .attr("fill-opacity", d => (d.source.node == data | d.target.node == data) ? 0.5 : 0.01);

    tip
      .data([sankey_data.nodes[data]])      
      .position([event.clientX, event.clientY])
      .title(
        d => d.flag_file != undefined ? 
          d.name + `<img src="${d.flag_file}" width="40" style="padding-left: 10px;">` :
          `<span style='text-wrap: wrap;'>${d.name}</span>`
      )
      .tbody([
        ["Ano", d => d.year],
        ["Valor (US$ Bilhões)", d => locale.format(",.0f")(d3.sum(d.sourceLinks, d => d.value) + d3.sum(d.targetLinks, d => d.value))]
      ])
      .background("#fff")
      .width(300)
      .render();

  })
  .on("pointerout lostpointercapture", function() {
    areas
      .attr("fill-opacity", 0.2);

    tip
      .position([-200, -200])
      .title(d => d.name)        
      .render();
   
  })

  // Animação
  const chart = d3.select(plot);
  const defs = chart.append('defs')
    .append('clipPath')
    .attr('id', 'clipSankeyParceiros')
    .append('rect')
    .attr('height', height)
    .attr('width', 0);

  areas
    .attr('clip-path', `url(#clipSankeyParceiros)`);

  defs.transition()
    .duration(1000)
    .attr('width', plot_width)

  d3.select("#chart-parceiros-comerciais")
    .classed("start", false)
    .html("")
    .append(() => plot);
}

viewof tipo_fluxo_parceiros = Inputs.radio(
  new Map([
    ["Exportador", "X"],
    ["Importador", "M"]
  ]),
  {label: "Informação reportada pelo", value: "X"},
)

reporters = {
  const data = transpose(dados_visao_parceiros)
  let reporters = Array.from(new Set(data.map(d => d.reporter_name_agg)));
  
  return reporters;
  
}

viewof tipo_fluxo_visao_parceiros = Inputs.radio(
  new Map([
    ["Exportações", "X"],
    ["Importações", "M"]
  ]),
  {label: "Fluxo", value: "X"},
)

viewof reporter_visao_parceiros = Inputs.select(
  reporters,
  {label: "Membro do G20", value: "Brasil"}
)

{
  const type_title2 = tipo_fluxo_visao_parceiros === "X" ? "Exportações de Bens - " + reporter_visao_parceiros : "Importações de Bens - " + reporter_visao_parceiros;
  return html`<span class="title-chart">${type_title2}</span>`
}

plot_treemap_parceiros = {
  const chart_start = d3.select("#chart-treemap-parceiros").classed("start");

    
  if(chart_start) {
    await visibility();
  }

  let data_plot = transpose(dados_visao_parceiros)
    .filter(d => d.flow_code === tipo_fluxo_visao_parceiros & d.reporter_name_agg === reporter_visao_parceiros);

  data_plot = aq.from(data_plot)
    .derive({share: d => d.value / op.sum(d.value)})
    .objects();

  const treemap_data = { name: "root", children: [] };

  const grupos = Array.from(new Set(data_plot.map(d => d.partner_is_g20)));
  
  for (const g in grupos) {

    const data_grupos = data_plot.filter(d => d.partner_is_g20 == grupos[g]);

    const children = []
    data_grupos.forEach(d => {
      children.push({
        name: d.partner_name_agg,
        value: d.value,
        share: d.share,
        year: d.period,
        flag_file: d.flag_file
      });
    });

    treemap_data.children.push({
      name: grupos[g],
      children: children
    });
  }

  width; // monitora mudanças no tamanho da janela
  const plot_width = d3.select("#chart-treemap-parceiros").node().getBoundingClientRect().width;
  const height = 400;

  const hierarchy = d3.hierarchy(treemap_data)
    .sum((d) => d.value)
    .sort((a, b) => b.value - a.value);
    
  d3.treemap()
    .size([plot_width, height])
    .padding(2)
    .tile(d3.treemapBinary)
    (hierarchy);
  const leaves =  hierarchy.leaves();
  
  const plot = Plot.plot({
    marks: [
      Plot.rect(leaves, {
        x1: "x0",
        x2: "x1",
        y1: "y0",
        y2: "y1",
        fill: (d) => d.parent.data.name
      }),
    ],
    color: {
      legend: true,
      range: ["#2c3e50", "#a6a6a6"],
      className: "legend"      
    },
    x: { axis: null },
    y: { axis: null },
    style: {
      fontFamily: "Poppins",
      fontSize: "14px",
      fontWeight: "normal",
      backgroundColor: "#eeeeee"
    },
    width: plot_width,
    height: height,
    marginTop: 20
  })

  const type_plot = d3.select(plot).node().tagName;
  let wrapper =
    type_plot === "FIGURE" ? d3.select(plot).select("svg") : d3.select(plot);

  const svgs = d3.select(plot).selectAll("svg");
  if (svgs.size() > 1) wrapper = d3.select([...svgs].pop());

  // Seleciona os rects
  const rects = wrapper
    .selectAll("[aria-label='rect']")
    .selectAll("rect");

  // get nodes attributes from rects as an array of objects
  const nodes = rects.nodes().map((d, i) => {
    return {
      x: Math.round(d.getAttribute("x") * 1e9) / 1e9,
      y: Math.round(d.getAttribute("y") * 1e9) / 1e9,
      width: d.getAttribute("width"),
      height: d.getAttribute("height"),
      fill: d.getAttribute("fill"),
      data: leaves[i].data
    };
  });

  // Adiciona o texto com tamanhos dinâmicos
  wrapper.attr("id", "textResizeParceiros");
  setTimeout(() => {
  new d3plus.TextBox()
      .data(nodes)
      .select('#textResizeParceiros')
      .height(d => d.height - 8)
      .width(d => d.width - 8)
      .x(d => d.x + 5)
      .y(d => d.y + 5)
      .text(d => d.data.name + "\n(" + locale.format(".1%")(d.data.share) + ")")
      .fontResize(true)
      .fontMin(6)
      .fontMax(18)
      .fontColor(d => d3plus.colorContrast(d.fill, {"light": "#cccccc", "dark": "#6e6e6e"}))
      // .fontColor("#cfcfcf")
      // .textAnchor('middle')
      // .verticalAlign('middle')
      // .fontWeight("bold")
      .fontFamily("Poppins")
      .rotate(0)
      .render();
  }, 700);

  // Animação
  rects
    .data(nodes)
    .attr("height", 0)
    .attr("width", 0)
    .transition()
    .duration(1000)
    .attr("width", d => d.width)
    .attr("height", d => d.height);

  // Tooltips
  rects.on("pointerenter pointermove", function(event, data) {
    const [x, y] = d3.pointer(event);

    tip
      .data([data])      
      .position([event.clientX, event.clientY])
      .title(
        d => d.data.flag_file != undefined ? 
          d.data.name + `<img src="${d.data.flag_file}" width="40" style="padding-left: 10px;">` :
          `<span style='text-wrap: wrap;'>${d.data.name}</span>`
      )
      .background("#fff")
      .tbody([
        ["Ano", d => d.data.year],
        ["Valor (US$ bilhões)", d => locale.format(",.2f")(d.data.value)],
        ["Participação", d => locale.format(".1%")(d.data.share)]
      ])
      .width(300)
      .render();
  })
  .on("pointerout lostpointercapture", function() {
    tip
      .position([-200, -200])
      .title(d => d.data.period)        
      .render();
  })

  d3.select("#chart-treemap-parceiros")
    .classed("start", false)
    .html("")
    .append(() => plot);

}

{
  const type_title = tipo_fluxo_bens === "X" ? "exportados" : "importados";
  return html`<span class="title-chart"> Principais bens ${type_title} pelos membros do G20 </span>`
}

viewof tipo_fluxo_bens = Inputs.radio(
  new Map([
    ["Exportações", "X"],
    ["Importações", "M"]
  ]),
  {label: "Fluxo", value: "X"},
)

viewof tipo_fluxo_bens_detalhado = Inputs.radio(
  new Map([
    ["Exportações", "X"],
    ["Importações", "M"]
  ]),
  {label: "Fluxo", value: "X"},
)

reporters_produtos = {
  const data = transpose(dados_g20_bens)
  let reporters = Array.from(new Set(data.map(d => d.name_agg_pt)));
  
  return reporters;
  
}

viewof reporter_visao_produtos = Inputs.select(
  reporters_produtos,
  {label: "Membro do G20", value: "Brasil"}
)