AddressForAll / site-v2

New AddressForAll website, version 3 of attempts to make it better
Apache License 2.0
1 stars 0 forks source link

Graficos padronizados por VegaLite React-plugin #38

Open ppKrauss opened 2 years ago

ppKrauss commented 2 years ago

Gráficos do site sempre produzidos/especificados a partir de React-Vega, http://vega.github.io/react-vega/ que tem como subset VegaLite, react-vega-vegalite.

Para testar com NodeJS ver https://www.npmjs.com/package/react-vega

A especificação típica fica no JSON do código-fonte do template da página, permitindo rotulação multilingue. Em casos onde webdesigner estabelece um template SVG a partir do gráfico, o seu "fonte inspiração" precisa ainda ser registrado neste git, junto da documentação ou "páginas escondidas".

Dados de input sempre proveniente de API PostgREST, por exemplo https://osm.codes/_sql/stats_donors_prospection testada inicialmente com digital-guard/stats/docs/pt/report-public.

Por exemplo um gráfico de barras, "Bar chart with text labels" de stats_donors_prospection, usaria

"data": { "url": "https://osm.codes/_sql/stats_donors_prospection" },
"transform": [{"filter": "datum.donor_status > 0"}],
"encoding": {
  "y": {"field": "donor_status", "type": "nominal", "title": "donor_status"},
  "x": {
    "field": "accumulated_amount",
    "type": "quantitative", 
    "scale": {"domain": [0,150]},
    "title": "number of donors"
  }
}