Dashboard js update and datatable tranlate texts

covid19/static/covid19/js/dashboard.js

@@ -0,0 +1,68 @@
+// State selector EventListner
+document.querySelector("#state-select").addEventListener("change", function (e) {
+    e.target.value ? window.location = e.target.value : false;
+});
+
+// Getting all necessary django template vars
+const dashVars = {};
+document.querySelectorAll("script[type='application/json']").forEach(el => {
+    dashVars[`${el.id}`] = JSON.parse(document.getElementById(el.id).textContent);
+})
+
+const dataURL = {
+    cities: dashVars.citiesCases,
+    stateGeoJSON: dashVars.statesGeo,
+    cityGeoJSON: dashVars.citiesGeo,
+    historicalDaily: dashVars.historicalDaily,
+    historicalWeekly: dashVars.historicalWeekly,
+},
+    selectedStateId = dashVars.stateId ? dashVars.stateId : undefined,
+    selectedStateAcronym = dashVars.stateId ? dashVars.state : undefined,
+    selectedCitySlug = dashVars.cityId != "" ? dashVars.citySlug : undefined;
+
+// Putting ?state=StateAcronym if necessary in dataURLs
+for (const el in dataURL) {
+    const state = dashVars.state;
+    dataURL[el] = state && state != "" ? dataURL[el] + "?state=" + state : dataURL[el];
+}
+
+function skeletonsGenerator(gridClass, templateId, quantity) {
+    const grid = document.querySelector(gridClass);
+    const template = document.querySelector(templateId);
+
+    for (let i = 0; i < quantity; i++) {
+        grid.append(template.content.cloneNode(true));
+    }
+
+    return [grid, template];
+}
+
+[gridCards, cardTemplate] = skeletonsGenerator('.grid-cards', '#card-template', 6);
+
+const endPoint = "/covid19/country-state/";
+const request = dashVars.state ? (endPoint + dashVars.state) : endPoint;
+
+const formatter = new Intl.NumberFormat('pt-BR', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+});
+
+fetch(request)
+    .then(res => res.json())
+    .then(data => {
+        gridCards.innerHTML = ''
+        data.country_aggregate.forEach(res => {
+            const div = cardTemplate.content.cloneNode(true)
+            div.querySelector('[data-title]').textContent = res.title ? res.title : "";
+            div.querySelector('[data-value]').textContent = res.value ? res.value.toLocaleString('pt-BR') : "";
+            div.querySelector('[data-percent]').textContent = res.value_percent ? formatter.format(res.value_percent) + " %" : "";
+            div.querySelector('[data-bs-toggle]').title = res.tooltip ? res.tooltip : "";
+            gridCards.append(div)
+        })
+
+        // Activating tolltips
+        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+        const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+            return new bootstrap.Tooltip(tooltipTriggerEl)
+        })
+    })

covid19/static/covid19/js/table.js

@@ -1,42 +1,38 @@
-var dt;
+$(document).ready(function () {
 
-jQuery(document).ready(function() {
-  if (selectedStateId === undefined) {
-    var columns = [
-      { "width": "14%" },
-      { "width": "22%" },
-      { "width": "14%" },
-      { "width": "10%" },
-      { "width": "10%" },
-      { "width": "10%" },
-      { "width": "10%" },
-      { "width": "10%" }
-    ];
-  }
-  else {
-    var columns = [
-      { "width": "20%" },
-      { "width": "30%" },
-      { "width": "10%" },
-      { "width": "10%" },
-      { "width": "10%" },
-      { "width": "10%" },
-      { "width": "10%" }
-    ];
-  }
-  dt = jQuery('.mdl-data-table').DataTable({
-    "autoWidth": false,
-    "columns": columns,
-    "scrollY":        "600px",
-    "scrollX": true,
-    "scrollCollapse": true,
-    "paging":         false,
-    "searching":      true,
-    "bInfo":          false,
-    "order": [3, "desc"],
-    "language": {
-      search: "  Buscar:",
-      searchPlaceholder: "Digite seu município aqui",
-    },
-  });
-});
+  $('.table').DataTable(
+    {
+      language: {
+        url: dashVars.dataTablesPtBR
+      },
+      ajax: {
+        url: request,
+        dataSrc: "city_data"
+      },
+      columns: [
+        { title: "Data", data: "date", type: "date" },
+        { title: "Munincípio", data: "city" },
+        { title: "UF", data: "state", visible: state != "None" ? false : true },
+        { title: "Confirmados", data: "confirmed" },
+        { title: "Confirmado por 100k hab.", data: "confirmed_per_100k_inhabitants" },
+        { title: "Óbitos", data: "deaths" },
+        { title: "Letalidade", data: "death_rate_percent", },
+        { title: "Óbitos por 100k hab.", data: "deaths_per_100k_inhabitants" },
+      ],
+      "columnDefs": [
+        {
+          "targets": [6],
+          "render": function (data, type, row, meta) {
+            return formatter.format(data) + "%";
+          }
+        },
+        {
+          "targets": [4, 3, 5, 7],
+          "render": function (data, type, row, meta) {
+            return data.toLocaleString("pt-BR");
+          }
+        }
+      ]
+    }
+  );
+});

static/dataTables-ptBR.json

@@ -0,0 +1,244 @@
+{
+    "emptyTable": "Nenhum registro encontrado",
+    "info": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
+    "infoEmpty": "Mostrando 0 até 0 de 0 registros",
+    "infoFiltered": "(Filtrados de _MAX_ registros)",
+    "infoThousands": ".",
+    "loadingRecords": "Carregando...",
+    "processing": "Processando...",
+    "zeroRecords": "Nenhum registro encontrado",
+    "search": "Pesquisar",
+    "paginate": {
+        "next": "Próximo",
+        "previous": "Anterior",
+        "first": "Primeiro",
+        "last": "Último"
+    },
+    "aria": {
+        "sortAscending": ": Ordenar colunas de forma ascendente",
+        "sortDescending": ": Ordenar colunas de forma descendente"
+    },
+    "select": {
+        "rows": {
+            "_": "Selecionado %d linhas",
+            "1": "Selecionado 1 linha"
+        },
+        "cells": {
+            "1": "1 célula selecionada",
+            "_": "%d células selecionadas"
+        },
+        "columns": {
+            "1": "1 coluna selecionada",
+            "_": "%d colunas selecionadas"
+        }
+    },
+    "buttons": {
+        "copySuccess": {
+            "1": "Uma linha copiada com sucesso",
+            "_": "%d linhas copiadas com sucesso"
+        },
+        "collection": "Coleção  <span class=\"ui-button-icon-primary ui-icon ui-icon-triangle-1-s\"><\/span>",
+        "colvis": "Visibilidade da Coluna",
+        "colvisRestore": "Restaurar Visibilidade",
+        "copy": "Copiar",
+        "copyKeys": "Pressione ctrl ou u2318 + C para copiar os dados da tabela para a área de transferência do sistema. Para cancelar, clique nesta mensagem ou pressione Esc..",
+        "copyTitle": "Copiar para a Área de Transferência",
+        "csv": "CSV",
+        "excel": "Excel",
+        "pageLength": {
+            "-1": "Mostrar todos os registros",
+            "_": "Mostrar %d registros"
+        },
+        "pdf": "PDF",
+        "print": "Imprimir",
+        "createState": "Criar estado",
+        "removeAllStates": "Remover todos os estados",
+        "removeState": "Remover",
+        "renameState": "Renomear",
+        "savedStates": "Estados salvos",
+        "stateRestore": "Estado %d",
+        "updateState": "Atualizar"
+    },
+    "autoFill": {
+        "cancel": "Cancelar",
+        "fill": "Preencher todas as células com",
+        "fillHorizontal": "Preencher células horizontalmente",
+        "fillVertical": "Preencher células verticalmente"
+    },
+    "lengthMenu": "Exibir _MENU_ resultados por página",
+    "searchBuilder": {
+        "add": "Adicionar Condição",
+        "button": {
+            "0": "Construtor de Pesquisa",
+            "_": "Construtor de Pesquisa (%d)"
+        },
+        "clearAll": "Limpar Tudo",
+        "condition": "Condição",
+        "conditions": {
+            "date": {
+                "after": "Depois",
+                "before": "Antes",
+                "between": "Entre",
+                "empty": "Vazio",
+                "equals": "Igual",
+                "not": "Não",
+                "notBetween": "Não Entre",
+                "notEmpty": "Não Vazio"
+            },
+            "number": {
+                "between": "Entre",
+                "empty": "Vazio",
+                "equals": "Igual",
+                "gt": "Maior Que",
+                "gte": "Maior ou Igual a",
+                "lt": "Menor Que",
+                "lte": "Menor ou Igual a",
+                "not": "Não",
+                "notBetween": "Não Entre",
+                "notEmpty": "Não Vazio"
+            },
+            "string": {
+                "contains": "Contém",
+                "empty": "Vazio",
+                "endsWith": "Termina Com",
+                "equals": "Igual",
+                "not": "Não",
+                "notEmpty": "Não Vazio",
+                "startsWith": "Começa Com",
+                "notContains": "Não contém",
+                "notStarts": "Não começa com",
+                "notEnds": "Não termina com"
+            },
+            "array": {
+                "contains": "Contém",
+                "empty": "Vazio",
+                "equals": "Igual à",
+                "not": "Não",
+                "notEmpty": "Não vazio",
+                "without": "Não possui"
+            }
+        },
+        "data": "Data",
+        "deleteTitle": "Excluir regra de filtragem",
+        "logicAnd": "E",
+        "logicOr": "Ou",
+        "title": {
+            "0": "Construtor de Pesquisa",
+            "_": "Construtor de Pesquisa (%d)"
+        },
+        "value": "Valor",
+        "leftTitle": "Critérios Externos",
+        "rightTitle": "Critérios Internos"
+    },
+    "searchPanes": {
+        "clearMessage": "Limpar Tudo",
+        "collapse": {
+            "0": "Painéis de Pesquisa",
+            "_": "Painéis de Pesquisa (%d)"
+        },
+        "count": "{total}",
+        "countFiltered": "{shown} ({total})",
+        "emptyPanes": "Nenhum Painel de Pesquisa",
+        "loadMessage": "Carregando Painéis de Pesquisa...",
+        "title": "Filtros Ativos",
+        "showMessage": "Mostrar todos",
+        "collapseMessage": "Fechar todos"
+    },
+    "thousands": ".",
+    "datetime": {
+        "previous": "Anterior",
+        "next": "Próximo",
+        "hours": "Hora",
+        "minutes": "Minuto",
+        "seconds": "Segundo",
+        "amPm": [
+            "am",
+            "pm"
+        ],
+        "unknown": "-",
+        "months": {
+            "0": "Janeiro",
+            "1": "Fevereiro",
+            "10": "Novembro",
+            "11": "Dezembro",
+            "2": "Março",
+            "3": "Abril",
+            "4": "Maio",
+            "5": "Junho",
+            "6": "Julho",
+            "7": "Agosto",
+            "8": "Setembro",
+            "9": "Outubro"
+        },
+        "weekdays": [
+            "Domingo",
+            "Segunda-feira",
+            "Terça-feira",
+            "Quarta-feira",
+            "Quinte-feira",
+            "Sexta-feira",
+            "Sábado"
+        ]
+    },
+    "editor": {
+        "close": "Fechar",
+        "create": {
+            "button": "Novo",
+            "submit": "Criar",
+            "title": "Criar novo registro"
+        },
+        "edit": {
+            "button": "Editar",
+            "submit": "Atualizar",
+            "title": "Editar registro"
+        },
+        "error": {
+            "system": "Ocorreu um erro no sistema (<a target=\"\\\" rel=\"nofollow\" href=\"\\\">Mais informações<\/a>)."
+        },
+        "multi": {
+            "noMulti": "Essa entrada pode ser editada individualmente, mas não como parte do grupo",
+            "restore": "Desfazer alterações",
+            "title": "Multiplos valores",
+            "info": "Os itens selecionados contêm valores diferentes para esta entrada. Para editar e definir todos os itens para esta entrada com o mesmo valor, clique ou toque aqui, caso contrário, eles manterão seus valores individuais."
+        },
+        "remove": {
+            "button": "Remover",
+            "confirm": {
+                "_": "Tem certeza que quer deletar %d linhas?",
+                "1": "Tem certeza que quer deletar 1 linha?"
+            },
+            "submit": "Remover",
+            "title": "Remover registro"
+        }
+    },
+    "decimal": ",",
+    "stateRestore": {
+        "creationModal": {
+            "button": "Criar",
+            "columns": {
+                "search": "Busca de colunas",
+                "visible": "Visibilidade da coluna"
+            },
+            "name": "Nome:",
+            "order": "Ordernar",
+            "paging": "Paginação",
+            "scroller": "Posição da barra de rolagem",
+            "search": "Busca",
+            "searchBuilder": "Mecanismo de busca",
+            "select": "Selecionar",
+            "title": "Criar novo estado",
+            "toggleLabel": "Inclui:"
+        },
+        "duplicateError": "Já existe um estado com esse nome",
+        "emptyError": "Não pode ser vazio",
+        "emptyStates": "Nenhum estado salvo",
+        "removeConfirm": "Confirma remover %s?",
+        "removeError": "Falha ao remover estado",
+        "removeJoiner": "e",
+        "removeSubmit": "Remover",
+        "removeTitle": "Remover estado",
+        "renameButton": "Renomear",
+        "renameLabel": "Novo nome para %s:",
+        "renameTitle": "Renomear estado"
+    }
+}