Um gráfico de barras é uma representação visual de um conjunto de dados categóricos onde uma barra é um mapeamento direto de uma categoria e cujo tamanho (a altura das barras verticais) é proporcional aos valores representar.

Se um eixo tem uma escala linear (para coincidir com o tamanho das barras), a posição das barras em relação ao outro eixo (as categorias) geralmente não importa muito e elas simplesmente ocupam o espaço de maneira uniforme.

Neste artigo, vamos cobrir como construir uma biblioteca de gráfico de barras usando componentes da web.

Criação de unidades de segmento em uma biblioteca de gráfico de barras

Para primeiro calcular as proporções de uma barra, precisamos de uma função simples para projetar um valor contra um segmento de uma unidade que representa o domínio de valores possíveis que queremos exibir:

 const createScale=({domainMin, domainMax})=> (valor)=> (valor-domainMin)/(domainMax-domainMin);

Por exemplo, se um segmento de uma unidade vai de 0 a 100, o valor 50 estará bem no meio do segmento, enquanto 25 estará no trimestre.

 const scale=createScale ({domainMin: 0, domainMax: 100}); escala (50)//> 0,5 escala (25)//> 0,25

O que você deseja que a unidade do segmento seja fisicamente é com você (900px, 4cm, etc). Também precisamos cuidar dos valores fora do intervalo definido pelo domínio (ou seja, os valores que você não pode caber no segmento).

Normalmente, se o valor for maior, ele é superior no final do segmento, enquanto se for menor, a proporção relativa será simplesmente nula.

//um utilitário para compor funções juntas
const compose=(... fns)=> (arg)=> fns.reduceRight ((acc, cfn)=> cfn (acc), arg); const maiorOrEqual=(min)=> (valor)=> Math.max (min, valor); const lowerOrEqual=(max)=> (value)=> Math.min (max, value); const createProjection=({domainMin, domainMax})=> compose ( lowerOrEqual (1), maiorOrEqual (0), createScale ({ domainMin, domainMax })
); //exemplo
projeto const=createProjection ({domainMin: 0, domainMax: 100}); projeto (50);//> 0,5"unidade" projeto (120);//> 1"unidade" projeto (-40);//> unidade de 0"

O que são componentes da web?

Componentes da web é um conjunto de três tecnologias que fornecem ao desenvolvedor a capacidade de criar controles de IU compartilháveis ​​como elementos DOM regulares:

  • Elementos personalizados fornecem uma API de baixo nível para criar novos elementos HTML
  • Shadow DOM nos permitirá encapsular uma subárvore DOM privada e ocultá-la do resto do documento
  • Modelos HTML (