30:T767,----- #### 3. Gerando o SVG Você pode utilizar uma função `document.write` para escrever o `svg` diretamente em um ponto específico do seu documento, ou pode usar a função `document.getElementById("IDdoElemento").innerHTML` para inserir o `svg` dentro de um elemento `html` específico no `DOM`. As funções `timelinerMeses(json)` e `timelineAnos(json)` geram o código `svg` a partir dos dados do `json` que for fornecido. ---- #### 4. Estilizando o diagrama Algumas classes `css` podem ser usadas para mudar as características do diagrama: `.timeliner`
Classe de todos os elementos `svg`s gerados pela ferramenta. `.timelinerlinhasano`
Propriedades das linhas separando meses ou anos no diagrama. `.timelinelabels`
Propriedades do texto das atividades no diagrama. `.timelinemarks`
Propriedades da marcação de anos ou meses grafados no diagrama. `.timelinebox`
Propriedade do bloco desenhado ao longo do tempo. `.timelinerfundoA`
Cor de fundo para variações entre os agrupamentos. `.timelinerfundoB`
Segunda cor de fundo para variações entre os agrupamentos. `.timelinercategoria`
Propriedades dos labels dos agrupamentos `.timeliner_hoje`
Propriedades do mês ou ano atual no diagrama ----- #### 5. Agrupamentos e sintaxe completa da função É possível incluir elementos do `json` contendo *tags* separadas por vírgula para agrupamento da visualização: ```json [ {"Atividade":"Nome da atividade 1", "Inicio":"01/02/2022", "Fim":"01/07/2022", "Categoria": "grupoA,grupoB" }, {"Atividade":"Nome da atividade 2", "Inicio":"01/05/2023", "Fim":"01/08/2023", "Categoria": "grupoA,grupoC" }, {"Atividade":"Nome da atividade 3", "Inicio":"01/10/2022", "Fim":"01/05/2023", "Estado": "realizado", "Categoria": "grupoB" } ] ``` ```js let meusvg = timelinerMeses(json,"Categoria"); ```31:T15be,timelinerMeses = function (arr, taxo, esp) { let whitsp = 25; let hoje = extraidata(new Date()); let vazios = 0; for (let c = 0; c < arr.length; c++) { if (arr[c].Atividade == "") { vazios++; } } let totalY = (arr.length - vazios) * whitsp + 60; let agrupa = []; if (typeof esp != "undefined") { whitsp = esp; } let paddingtop = (whitsp - 20) / 2; let colunas = contames(menordata(arr), maiordata(arr)); let nomemeses = [ "", "JAN", "FEV", "MAR", "ABR", "MAI", "JUN", "JUL", "AGO", "SET", "OUT", "NOV", "DEZ" ]; if (taxo != "" && typeof taxo != "undefined") { agrupa = taxoarr(arr, taxo); totalY = (agrupa.length - vazios) * whitsp + 60; } // identifica o tamanho em pixels do primeiro texto escrito let primeirotermo = -5000; for (let f = 0; f < arr.length; f++) { if (extraiano(arr[f].Inicio) == deltaanos(arr).inicial) { if (arr[f].Atividade.length > primeirotermo) { primeirotermo = arr[f].Atividade.length / 1.75; } } } if (primeirotermo > 30) { primeirotermo = 30; } let html = `"; return html; }32:T14f1,timelinerAnos = function (arr, taxo, esp) { let whitsp = 25; let hoje = extraidata(new Date()); if (typeof esp != "undefined") { whitsp = esp; } let vazios = 0; for (let c = 0; c < arr.length; c++) { if (arr[c].Atividade == "") { vazios++; } } let paddingtop = (whitsp - 20) / 2; let agrupa = []; let totalY = (arr.length - vazios) * whitsp + 50; let colunas = deltaanos(arr).final - deltaanos(arr).inicial; if (taxo != "" && typeof taxo != "undefined") { agrupa = taxoarr(arr, taxo); totalY = (agrupa.length - vazios) * whitsp + 60; } // identifica o tamanho em pixels do primeiro texto escrito let primeirotermo = -5000; for (let f = 0; f < arr.length; f++) { if (extraiano(arr[f].Inicio) == deltaanos(arr).inicial) { if (arr[f].Atividade.length > primeirotermo) { primeirotermo = arr[f].Atividade.length / 1.75; } } } if (primeirotermo > 30) { primeirotermo = 30; } let html = `"; return html; }33:T5c7,timeliner_listaAnos = function (arr) { let myhtml = "

"; let todosanos = listanos(arr); let pontoatual = 1; for (let i = todosanos.length - 1; i >= 0; i--) { let quantaslinhas = 0; let estado = []; let atividade = []; let caractere = ""; for (let k = 0; k < arr.length; k++) { if ( extraiano(arr[k].Inicio) == todosanos[i] && arr[k].Atividade != "" && typeof arr[k].Atividade != "undefined" ) { estado[quantaslinhas] = arr[k].Estado; atividade[quantaslinhas] = arr[k].Atividade; quantaslinhas++; } } if (quantaslinhas > 0) { myhtml += `

${todosanos[i]}

`; } pontoatual += quantaslinhas; for (let a = 0; a < atividade.length; a++) { if (estado[a].match("andamento")) { caractere = "❯❯"; } if (estado[a].match("feito")) { caractere = "✓"; } if (estado[a].match("fazer")) { caractere = "⟲"; } myhtml += `

${caractere}

${atividade[a]}

`; } } myhtml += "

●

"; return myhtml; }34:Td4c,timeliner_resume = function (arr) { let myhtml = "

"; let jafoi = ""; for (let z = 0; z < arr.length; z++) { if (typeof arr[z].Fim == "undefined" || arr[z].Fim == "") { let qualano1 = extraiano(arr[z].Inicio); if (qualano1 == jafoi) { qualano1 = "

●

"; } jafoi = extraiano(arr[z].Inicio); let inserelinks = ""; if ( typeof arr[z].ProdutosLinksAcoes != "undefined" && typeof arr[z].ProdutosLinksAcoes != "" ) { inserelinks = "Produtos elaborados no período" + arr[z].ProdutosLinksAcoes + "

"; } let insereevidencias = ""; let evidencias = ""; if (typeof arr[z].Produtos != "undefined" && arr[z].Produtos != "") { evidencias = arr[z].Produtos.split(","); if (evidencias.length > 0) { insereevidencias += `

`; for (let n = 0; n < evidencias.length; n++) { insereevidencias += ``; } insereevidencias += `

`; } } myhtml += `

${qualano1}

${arr[z].Titulo}

${arr[z].Atividade}${insereevidencias}${inserelinks}

`; } } let jafoi1 = ""; let jafoi2 = ""; for (let z = 0; z < arr.length; z++) { if (typeof arr[z].Fim != "undefined" && arr[z].Fim != "") { let qualano1 = extraiano(arr[z].Inicio); let qualano2 = "➟ " + extraiano(arr[z].Fim); if (qualano1 == jafoi1 && qualano2 == jafoi2) { qualano1 = "

●

"; qualano2 = ""; } jafoi1 = extraiano(arr[z].Inicio); jafoi2 = "➟ " + extraiano(arr[z].Fim); let inserelinks = ""; if ( typeof arr[z].ProdutosLinksAcoes != "undefined" && typeof arr[z].ProdutosLinksAcoes != "" ) { inserelinks = "Produtos elaborados no período" + arr[z].ProdutosLinksAcoes + "

"; } let insereevidencias = ""; let evidencias = ""; if (typeof arr[z].Produtos != "undefined" && arr[z].Produtos != "") { evidencias = arr[z].Produtos.toString().split(","); if (evidencias.length > 0) { insereevidencias += `

`; for (let n = 0; n < evidencias.length; n++) { insereevidencias += ``; } insereevidencias += `

`; } } myhtml += `

${qualano1}

${qualano2}

${arr[z].Titulo}

${arr[z].Atividade}${insereevidencias}${inserelinks}

`; } } myhtml += "

●

"; return myhtml; }35:Te33,timeliner_cronologia = function (arr) { let conta = 0; let myhtml = "

"; let jafoi = ""; for (let z = 0; z < arr.length; z++) { if (typeof arr[z].Fim == "undefined" || arr[z].Fim == "") { let qualano1 = arr[z].Inicio; // extraiano if (qualano1 == jafoi) { qualano1 = "

●

"; } jafoi = arr[z].Inicio; // extraiano let inserelinks = ""; if ( typeof arr[z].ProdutosLinksAcoes != "undefined" && typeof arr[z].ProdutosLinksAcoes != "" ) { inserelinks = arr[z].ProdutosLinksAcoes + "

"; } let insereevidencias = ""; let evidencias = ""; if (typeof arr[z].Produtos != "undefined" && arr[z].Produtos != "") { evidencias = arr[z].Produtos.split(","); if (evidencias.length > 0) { insereevidencias += `

`; for (let n = 0; n < evidencias.length; n++) { insereevidencias += ``; } insereevidencias += `

`; } } myhtml += `

●

${bolddata( qualano1 )}

${arr[z].Titulo}

${ arr[z].Atividade }${insereevidencias}${inserelinks}

`; conta++; } } let jafoi1 = ""; let jafoi2 = ""; for (let z = 0; z < arr.length; z++) { if (typeof arr[z].Fim != "undefined" && arr[z].Fim != "") { let qualano1 = arr[z].Inicio; //extraiano let qualano2 = arr[z].Fim; // extraiano if (qualano1 == jafoi1 && qualano2 == jafoi2) { qualano1 = ""; qualano2 = ""; } jafoi1 = arr[z].Inicio; // extraiano jafoi2 = arr[z].Fim; // extraiano let inserelinks = ""; if ( typeof arr[z].ProdutosLinksAcoes != "undefined" && typeof arr[z].ProdutosLinksAcoes != "" ) { inserelinks = arr[z].ProdutosLinksAcoes + "

"; } let insereevidencias = ""; let evidencias = ""; if (typeof arr[z].Produtos != "undefined" && arr[z].Produtos != "") { evidencias = arr[z].Produtos.toString().split(","); if (evidencias.length > 0) { insereevidencias += `

`; for (let n = 0; n < evidencias.length; n++) { insereevidencias += ``; } insereevidencias += `

`; } } myhtml += `

●

${bolddata( qualano2 )} ⊢⊣ ${bolddata( qualano1 )}

${arr[z].Titulo}

${ arr[z].Atividade }${insereevidencias}${inserelinks}

`; conta++; } } myhtml += "

●

"; return myhtml; }36:Td62,37:[] 2e:{"title":"Componente Timeliner","cells":[{"id":0,"value":"# Componente Timeliner","pinned":false,"hidden":false,"mode":"md"},{"id":829,"value":"## O que é?\n\nTimeliner é uma ferramenta em javascript que cria um elemento `

${timelinerMeses(\n atividades\n)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"## Como usar?\n\n-------\n#### 1. Carregue a ferramenta\nPara carregar a ferramenta no seu documento `html`, basta incluir esta linha no seu ``:\n\n```html\n\n```\n\nA instrução acima carregará a ferramenta para que possa ser usada.\n\n-------\n#### 2. Criando ou carregando um `json`\nPara gerar a imagem do diagrama, é necessário criar ou carregar um arquivo externo contendo um objeto `json`.\n\nEste objeto deverá ter os seguintes elementos/estrutura:\n\n```json\n[\n {\"Atividade\":\"Nome da atividade 1\",\n \"Inicio\":\"01/02/2022\",\n \"Fim\":\"01/07/2022\"\n },\n \n {\"Atividade\":\"Nome da atividade 2\",\n \"Inicio\":\"01/05/2023\",\n \"Fim\":\"01/08/2023\"\n }\n]\n```","pinned":false,"hidden":false,"mode":"md"},{"id":848,"value":"html`${timelinerMeses([\n { Atividade: \"Nome da atividade 1\", Inicio: \"01/02/2022\", Fim: \"01/07/2022\" },\n { Atividade: \"Nome da atividade 2\", Inicio: \"01/05/2023\", Fim: \"01/08/2023\" }\n])}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"Ao não incluir uma informação na propriedade \"Atividade\", a ferramenta entenderá que se trata da mesma atividade em um outro espaço de tempo:\n\n```json\n[\n {\"Atividade\":\"Nome da atividade 1\",\n \"Inicio\":\"01/02/2022\",\n \"Fim\":\"01/07/2022\"\n },\n\n {\"Atividade\": \"\",\n \"Inicio\":\"01/05/2023\",\n \"Fim\":\"01/08/2023\"\n }\n]\n```","pinned":false,"hidden":false,"mode":"md"},{"id":899,"value":"html`${timelinerMeses([\n { Atividade: \"Nome da atividade 1\", Inicio: \"01/02/2022\", Fim: \"01/07/2022\" },\n { Atividade: \"\", Inicio: \"01/05/2023\", Fim: \"01/08/2023\" }\n])}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"\nA existência de um elemento `\"Estado\"` incluirá o que estiver registrado na atividade como uma classe `css` para que os elementos apresentados no diagrama possam ter variações dependendo da condição em que se encontram. Exemplo:\n\n```html\n\n```\n\n```json\n {\"Atividade\":\"Nome da atividade 3\",\n \"Inicio\":\"01/10/2022\",\n \"Fim\":\"01/05/2023\",\n \"Estado\": \"realizado\"\n }\n```","pinned":false,"hidden":false,"mode":"md"},{"id":862,"value":"html`\n\n\n${timelinerMeses([\n { Atividade: \"Nome da atividade 1\", Inicio: \"01/02/2022\", Fim: \"01/07/2022\" },\n { Atividade: \"Nome da atividade 2\", Inicio: \"01/05/2023\", Fim: \"01/08/2023\" },\n {\n Atividade: \"Nome da atividade 3\",\n Inicio: \"01/10/2022\",\n Fim: \"01/05/2023\",\n Estado: \"realizado\"\n }\n])}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"Para carregar um `json` externo, você pode utilizar a função `timl_getdata`:\n\n```js\nfunction escreve_svg_aqui(dados) {\n console.table(dados);\n document.write(timelinerMeses(dados));\n}\n\ntiml_getdata('https://urldoarquivo.json', escreve_svg_aqui);\n```","pinned":false,"hidden":false,"mode":"md"},{"id":885,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":894,"value":"html`${timelinerMeses(\n [\n {\n Atividade: \"Nome da atividade 1\",\n Inicio: \"01/02/2022\",\n Fim: \"01/07/2022\",\n Categoria: \"grupoA,grupoB\"\n },\n\n {\n Atividade: \"Nome da atividade 2\",\n Inicio: \"01/05/2023\",\n Fim: \"01/08/2023\",\n Categoria: \"grupoA,grupoC\"\n },\n\n {\n Atividade: \"Nome da atividade 3\",\n Inicio: \"01/10/2022\",\n Fim: \"01/05/2023\",\n Estado: \"realizado\",\n Categoria: \"grupoB\"\n }\n ],\n \"Categoria\"\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":906,"value":"É possível aumentar o espaçamento entre as linhas do diagrama, incluíndo um valor como último dado de entrada para as funções:\n\n```js\nlet meusvg = timelinerMeses(json, \"\", 35);\n````","pinned":false,"hidden":false,"mode":"md"},{"id":912,"value":"html`${timelinerMeses(\n [\n {\n Atividade: \"Nome da atividade 1\",\n Inicio: \"01/02/2022\",\n Fim: \"01/07/2022\",\n Categoria: \"grupoA,grupoB\"\n },\n\n {\n Atividade: \"Nome da atividade 2\",\n Inicio: \"01/05/2023\",\n Fim: \"01/08/2023\",\n Categoria: \"grupoA,grupoC\"\n },\n\n {\n Atividade: \"Nome da atividade 3\",\n Inicio: \"01/10/2022\",\n Fim: \"01/05/2023\",\n Estado: \"realizado\",\n Categoria: \"grupoB\"\n }\n ],\n \"\",\n 35\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":919,"value":"-----\n#### 6. Uso com outras bibliotecas e recursos\n\nÉ recomendável o uso da ferramenta [opensheet](https://benborgers.com/posts/google-sheets-json), que captura dados de uma planilha no *Google Sheet* e os transforma em `json` em tempo-real, ou da biblioteca [DataT](https://observablehq.com/@ranoya/datat) para manipular, filtrar, ou criar outros dados à partir do `json` obtido.\n\nUm exemplo funcional do **Timeliner**, implementado fora do Observable, pode ser visto [neste link](https://www.ranoya.com/Assets/JSLibs/timeliner/example.html).","pinned":false,"hidden":false,"mode":"md"},{"id":924,"value":"
\n## Outros exemplos e aplicações\n-------\n### Uso do Timeliner com filtros e categorias para parametrizar a visualização:","pinned":false,"hidden":false,"mode":"md"},{"id":469,"value":"viewof filtra = Inputs.text({\n placeholder: \"Algum filtro específico?\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"viewof Agrupamento = Inputs.select([\"Estado\", \"Ação\"], {\n label: \"Agrupamento\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"
\n### Visualização sem aplicação de categorizações/agrupamentos","pinned":false,"hidden":false,"mode":"md"},{"id":616,"value":"linhadotempo2 = html`

${timelinerMeses(\n atividades,\n Agrupamento,\n 25\n)}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":933,"value":"
\n### Diagrama anual sem agrupamento","pinned":false,"hidden":false,"mode":"md"},{"id":396,"value":"linhadotempo3 = html`

${timelinerAnos(\n atividades,\n \"\",\n 40\n)}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":935,"value":"
\n### Visualização anual com agrupamentos","pinned":false,"hidden":false,"mode":"md"},{"id":978,"value":"html`${timeliner_listaAnos(dadosoriginais)}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"

\n### Apêndice","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"-------\n#### Ferramentas","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"getdata = function (url) {\n let dados = fetch(url).then((response) => {\n return response.json();\n });\n\n return dados;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"deltaanos = function (arr) {\n let anos = [];\n\n for (let a = 0; a < arr.length; a++) {\n anos[extraiano(arr[a].Inicio)] = true;\n anos[extraiano(arr[a].Fim)] = true;\n }\n\n let listano = [];\n\n let i = 0;\n\n for (let k in anos) {\n listano[i] = k;\n i++;\n }\n\n return { inicial: Math.min(...listano), final: Math.max(...listano) };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"extraiano = function (valor) {\n let patt = /\\d\\d\\d\\d/gi;\n let arr = valor.match(patt);\n return arr[0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"extraimes = function (valor) {\n let patt = /\\d{1,2}/gi;\n let arr = valor.match(patt);\n return arr[1];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"extraidata = function (dt) {\n let patt = /(\\d\\d\\d\\d)/i;\n\n let hoje = \"01/\" + (parseInt(dt.getMonth()) + 1) + \"/\" + dt.getFullYear();\n\n return hoje;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"contames = function (dataA, dataB) {\n let anoI = extraiano(dataA);\n let anoF = extraiano(dataB);\n let mesI = extraimes(dataA);\n let mesF = extraimes(dataB);\n\n let conta = 0;\n let mescomeca = mesI;\n\n for (let an = anoI; an <= anoF; an++) {\n while (mescomeca < 12) {\n if (an < anoF || (an == anoF && mescomeca <= mesF)) {\n mescomeca++;\n conta++;\n } else {\n mescomeca = 50;\n }\n }\n\n mescomeca = 0;\n }\n\n return conta;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"menordata = function (arr) {\n let menorano = deltaanos(arr).inicial;\n\n let menormes = 12;\n\n for (let i = 0; i < arr.length; i++) {\n if (extraiano(arr[i].Inicio) == menorano) {\n if (extraimes(arr[i].Inicio) <= menormes) {\n menormes = extraimes(arr[i].Inicio);\n }\n }\n }\n\n return \"01/\" + menormes + \"/\" + menorano;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"maiordata = function (arr) {\n let maiorano = deltaanos(arr).final;\n\n let menormes = 1;\n\n for (let i = 0; i < arr.length; i++) {\n if (extraiano(arr[i].Fim) == maiorano) {\n if (extraimes(arr[i].Fim) >= menormes) {\n menormes = extraimes(arr[i].Fim);\n }\n }\n }\n\n return \"01/\" + menormes + \"/\" + maiorano;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"adicionames = function (dataI, meses) {\n let anoI = extraiano(dataI);\n let mesI = extraimes(dataI);\n\n let mesA = mesI;\n let anoA = anoI;\n\n for (let i = 0; i < meses; i++) {\n mesA++;\n if (mesA > 12) {\n mesA = 1;\n anoA++;\n }\n }\n\n return \"01/\" + mesA + \"/\" + anoA;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"levantataxos = function (arr, grupo) {\n let newarr = [];\n for (let i = 0; i < arr.length; i++) {\n let separa = arr[i][grupo].split(\",\");\n\n for (let k = 0; k < separa.length; k++) {\n if (separa[k] != \"\") {\n newarr[separa[k].trim()] = true;\n }\n }\n }\n\n let resultarray = [];\n let c = 0;\n\n for (let t in newarr) {\n resultarray[c] = t;\n c++;\n }\n\n return resultarray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"taxoarr = function (arr, taxo) {\n let newarr = [];\n let na = 0;\n\n let listacriterios = levantataxos(arr, taxo);\n\n for (let i = 0; i < listacriterios.length; i++) {\n for (let r = 0; r < arr.length; r++) {\n let patt = listacriterios[i];\n if (arr[r][taxo].match(listacriterios[i]) && listacriterios[i] != \"\") {\n newarr[na] = arr[r];\n na++;\n }\n }\n }\n\n return newarr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"quantosnataxo = function (arr, grupo, qualtaxo) {\n let quantos = 0;\n\n for (let i = 0; i < arr.length; i++) {\n if (arr[i][grupo].match(qualtaxo) && arr[i].Atividade != \"\") {\n quantos++;\n }\n }\n\n return quantos;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"listanos = function (arr) {\n let datas = levantataxos(arr, \"Inicio\");\n let anos = [];\n for (let i = 0; i < datas.length; i++) {\n anos[i] = {};\n anos[i].registro = extraiano(datas[i]);\n }\n\n let relacao = levantataxos(anos, \"registro\");\n\n return relacao;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"------\n#### Dados","pinned":false,"hidden":false,"mode":"md"},{"id":947,"value":"cronoAnos = function (arr, label) {\n let colunas = deltaanos(arr).final - deltaanos(arr).inicial + 1;\n\n return colunas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":955,"value":"cronoMeses = function (arr, label) {\n let colunas = contames(menordata(arr), maiordata(arr)) + 1;\n\n return colunas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1304,"value":"dadoscarregados = gsdata(\n \"https://docs.google.com/spreadsheets/d/1DwFrWE_8oLFejn_zXzU1Fl9HbyOJG3PoarlaDuH2Tc8/edit#gid=444640757\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1306,"value":"separaoqueimporta = function (arr) {\n let narr = [];\n let c = 0;\n\n for (let i = 0; i < arr.length; i++) {\n if (\n typeof arr[i].Inicio != \"undefined\" &&\n arr[i].Inicio != \"\" &&\n arr[i].Inicio != null &&\n typeof arr[i].Fim != \"undefined\" &&\n arr[i].Fim != \"\" &&\n arr[i].Fim != null\n ) {\n narr[c] = arr[i];\n c++;\n }\n }\n\n return narr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"dadosoriginais = separaoqueimporta(dadoscarregados)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1052,"value":"dadosprioridades = await getdata(\n \"https://opensheet.elk.sh/1Gya-umpS7Zh3v8qA8OUCFsb0yXG9DjnnYEmyiwF4a3Y/Prioridades\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1301,"value":"import { gsdata } from \"@ranoya/datat\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"dadoslideranca = await getdata(\n \"https://opensheet.elk.sh/1Gya-umpS7Zh3v8qA8OUCFsb0yXG9DjnnYEmyiwF4a3Y/Lideranca\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"viewof atividades = Inputs.search(dadosoriginais, {\n label: \"atividades\",\n placeholder: \"Nenhum filtro\",\n query: filtra,\n disabled: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"viewof listaprioridades = Inputs.search(dadosprioridades, {\n label: \"listaprioridades\",\n placeholder: \"Nenhum filtro\",\n query: filtra,\n disabled: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1083,"value":"viewof listalideranca = Inputs.search(dadoslideranca, {\n label: \"listalideranca\",\n placeholder: \"Nenhum filtro\",\n query: filtra,\n disabled: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1172,"value":"viewof ProjAnda = Inputs.search(dadosoriginais, {\n label: \"ProjAnda\",\n placeholder: \"Nenhum filtro\",\n query: \"projetos\",\n disabled: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"grupos = levantataxos(atividades, \"Estado\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"acoes = levantataxos(atividades, \"Ação\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1062,"value":"gruposdeprioridades = levantataxos(listaprioridades, \"Grupo\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"-------\n#### Blocos HTML","pinned":false,"hidden":false,"mode":"md"},{"id":679,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1086,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"tes = html`${timeliner_resume(listalideranca)}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1217,"value":"tes3 = html`${timeliner_cronologia(listalideranca)}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1065,"value":"prioridades_vis = function (arr, g) {\n let myhtml = `

`;\n let grupos = levantataxos(arr, g);\n\n for (let i = 0; i < grupos.length; i++) {\n let temafazer = false;\n\n for (let k = 0; k < arr.length; k++) {\n if (arr[k][g] == grupos[i] && arr[k].Estado != \"feito\") {\n temafazer = true;\n }\n }\n\n if (temafazer) {\n myhtml += `

${grupos[i]}

`;\n for (let k = 0; k < arr.length; k++) {\n if (arr[k][g] == grupos[i] && arr[k].Estado != \"feito\") {\n myhtml += `${arr[k].Atividade}
`;\n }\n }\n myhtml += `

`;\n }\n }\n\n myhtml += `

`;\n return myhtml;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"prioridades_vis_res = function (arr, g) {\n let myhtml = `

${grupos[i]}

`;\n for (let k = 0; k < arr.length; k++) {\n if (arr[k][g] == grupos[i] && arr[k].Estado != \"feito\") {\n myhtml += `

${arr[k].Keywords}

${arr[k].Atividade}

`;\n }\n }\n myhtml += `

`;\n }\n }\n\n myhtml += `

`;\n return myhtml;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1069,"value":"teste = html`${prioridades_vis(listaprioridades, \"Grupo\")}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1269,"value":"bolddata = function (data) {\n let xpto = data.replace(/\\//gi, \" / \");\n\n return xpto;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1212,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"$36","pinned":false,"hidden":false,"mode":"html"},{"id":1200,"value":"codprioridades = `${prioridades_vis(listaprioridades, \"Grupo\")}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1323,"value":"

\n## Dependências\n
\nEste documento oferece componentes para:\n\n- página de Hub de Pesquisa (Estética da Interação) no ranoya.com\n- Relatório completo de Pesquisa no ranoya.com\n- Página de Projetos do VISSE\n- página de Planejamento do VISSE\n- Projeto de pesquisa \"A formação do designer para a elaboração de artefatos de visualização\" no ranoya.com\n- página no PPGDesign no VISSE\n- Página de bolsas do PPGDesign\n- Plugin POE de bolsas do PPGDesign","pinned":false,"hidden":false,"mode":"md"}],"files":"$W37","stdlib":"1","titling":"auto"}