Usando Javascript para controlar o Componente HTML

A dica dessa semana demonstra como usar o componente HTML para incorporar um gráfico em uma página. Essa é apenas uma das muitas coisas que você pode incorporar em seu site usando o componente HTML.

Aqui nós incorporamos um gráfico Chart.js. O código HTML do gráfico é inserido no componente HTML usando o botão Editar Código. A página e o componente HTML se comunicam entre si usando as funções postMessage e onMessage.

Quando a página é carregada e cada vez que um ano é selecionado usando o elemento dropdown, a página envia uma mensagem para o componente HTML usando a função postMessage. A mensagem contém os valores a serem exibidos no gráfico. O componente HTML recebe a mensagem usando sua função onMessage e atualiza o gráfico de acordo com o conteúdo da mensagem.

Quando um usuário clica em uma barra no gráfico, o componente HTML envia uma mensagem para a página usando sua função postMessage. A mensagem contém dados sobre o item que foi clicado. A página recebe a mensagem usando a função onMessage e exibe seu conteúdo para os usuários usando o elemento de texto abaixo do gráfico.

Código de exemplo:

let year = 2017;
let flights = {
	2014: [6.3, 2.4, 7.6, 5.4, 9.9, 7.8],
	2015: [6.7, 2.2, 11.2, 5.5, 10.1, 7.9],
	2016: [7.2, 3.1, 8.2, 5.6, 9.2, 10.2],
	2017: [7.4, 3.9, 8.8, 6.1, 8.7, 9.8]
};

$w.onReady(() =>{
	$w("#html1").postMessage(flights[year]);
	$w("#html1").onMessage((event)=>{

		if(event.data.type === 'ready'){
			$w("#html1").postMessage(flights[year]);
		}
		
		if(event.data.type === 'click'){
			$w("#clickedMessage").text = `The number of flights to ${event.data.label} in ${year} is ${event.data.value} million.`;
			$w("#clickedMessage").show();
		}
	});	
});

export function year_onChange(event) {
	year = $w('#year').value;
	$w("#html1").postMessage(flights[year]);
}

Link para o site de exemplo: https://www.wix.com/code-examples/v2-embed_chart Link para o editor (ative as ferramentas de desenvolvedor para poder ver o código): http://editor.wix.com/html/editor/web/renderer/new?siteId=b4662007-17e0-4fca-a4e6-2b774b16871a&metaSiteId=775c65bf-60ee-49aa-97dd-a171e369e3b1

O gráfico é baseado no chartjs.org. Você pode encontrar seu repositório e licença no GitHub. Espero que essa dica seja útil para todos ;)