Scripts do Widget

Os scripts são códigos no formato escitos na linguagem JavaScript que a plataforma executa em em deteminadas situações. Normalmente utilizamos scripts para definir os elementos do tipo Gráfico, HTML e em qualquer outro elemento quando é necessário executar algum processamento mais complexo para chegar ao valor do dado que será exibido pelo elemento.

Criando um novo Script

Para criar um script basta definir um código e um título e depois colar o código no padrão JavaScript no campo de Script. Clique em salvar para que o sistema grave esse novo script.

É possível criar quantos scripts forem necessários e eles estarão todos acessiveis nos elementos utilizando a função js e o objeto scripts junto com o código do script que foi criado.

Acessando dados no Script

Para acessar os dados dinâmicos do Widget pelo script temos todas as opções tal qual utilizamos nos elementos, para saber mais clique aqui.

Scripts para Gráficos

No caso de executarmos um script que vai gerar um gráfico temos que consultar a biblioteca gráfica que a plataforma utiliza para poder saber qual código JavaScript teremos que colocar no script para que ele consiga renderizar o gráfico desejado. Para saber mais sobre as configurações dos gráficos clique aqui.

Ao acessar um dos gráficos da Biblioteca basta navegar para a seção com o código de demonstração, clicar na aba "TypeScript / ES6" e copiar todo o código. Com o código de demonstração copiado volte a plataforma e crie um novo script com esse conteúdo, a plataforma vai atualizar o código para que ele passe a funcionar dentro da plataforma.

Para ter acesso aos dados da plataforma dentro do script teremos que utiizar a variável hrzChartData que vai possuir os dados que foram passados no atributo de data do elemento de gráfico.

let root = am5.Root.new(hrzChartId);

root.setThemes([am5themes_Animated.new(root)]);

let chart = root.container.children.push(
  am5xy.XYChart.new(root, {
    panX: false,
    panY: false,
    paddingLeft: 0,
    wheelX: "panX",
    wheelY: "zoomX",
    layout: root.verticalLayout,
  })
);

let legend = chart.children.push(
  am5.Legend.new(root, {
    centerX: am5.p50,
    x: am5.p50,
  })
);

let data = hrzChartData;

let xRenderer = am5xy.AxisRendererX.new(root, {
  cellStartLocation: 0.1,
  cellEndLocation: 0.9,
  minorGridEnabled: true,
});

let xAxis = chart.xAxes.push(
  am5xy.CategoryAxis.new(root, {
    categoryField: "year",
    renderer: xRenderer,
    tooltip: am5.Tooltip.new(root, {}),
  })
);

xRenderer.grid.template.setAll({
  location: 1,
});

xAxis.data.setAll(data);

let yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {
      strokeOpacity: 0.1,
    }),
  })
);

function makeSeries(name, fieldName) {
  let series = chart.series.push(
    am5xy.ColumnSeries.new(root, {
      name: name,
      xAxis: xAxis,
      yAxis: yAxis,
      valueYField: fieldName,
      categoryXField: "year",
    })
  );

  series.columns.template.setAll({
    tooltipText: "{name}, {categoryX}:{valueY}",
    width: am5.percent(90),
    tooltipY: 0,
    strokeOpacity: 0,
  });

  series.data.setAll(data);
  series.appear();

  series.bullets.push(function () {
    return am5.Bullet.new(root, {
      locationY: 0,
      sprite: am5.Label.new(root, {
        text: "{valueY}",
        fill: root.interfaceColors.get("alternativeText"),
        centerY: 0,
        centerX: am5.p50,
        populateText: true,
      }),
    });
  });

  legend.data.push(series);
}

makeSeries("Europe", "europe");
makeSeries("North America", "namerica");
makeSeries("Asia", "asia");
makeSeries("Latin America", "lamerica");
makeSeries("Middle East", "meast");
makeSeries("Africa", "africa");

chart.appear(1000, 100);

Scripts HTML

Um caso de uso comum na utilização da funcionalidade de script é a de criar um que retorne um código HTML. Para isso basta retornar no script uma string que representa o HTML que será exibido pelo elemento.

const dataAreas = data?.areas || [];

let maxProjetos =
  dataAreas.length === 0 ? 0 : Math.max(...dataAreas.map((a) => a.projetos));

let html = "<div style='display:flex;gap:10px;'>";
for (let i = 1; i <= 7; i++) {
  const code = `A00${i}`;
  const areas = dataAreas.find((o) => o.code === code);
  const areasProjetos = areas?.projetos || 0;
  const opt = datasetResult("area-atuacao-principal", code);
  let height =
    maxProjetos === 0
      ? 100
      : ((maxProjetos - areasProjetos) / maxProjetos) * 100;
  html += `
    <div style="position: relative">
      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="111" viewBox="0 0 22 111" fill="none">
        <path d="M0 0H22V111H0V0Z" fill="${opt.elementColor}" />
        <path d="M0 100H22L22 111H5.74817e-06L0 100Z" fill="white" />
        <path
          d="M0 100H22V100C22 106.075 17.0751 111 11 111V111C4.92487 111 3.17462e-06 106.075 0 100V100Z"
          fill="${opt.elementColor}"
        />
        <rect width="22" height="${height}" fill="#E9E9E9" />
      </svg>
    </div>
  `;
}
html += "</div>";
return html;