grist static
1.0.0
Esta é uma forma de visualizar e interagir com arquivos .grist (planilhas Grist) em sites normais, sem necessidade de suporte especial de back-end. A ideia aqui é que seria ótimo para fazer relatórios se pudéssemos colocar planilhas em um site como fazemos com PDFs, com boas opções de formatação e navegação e sem muito barulho.
Se você pode executar um back-end especial, o Grist-core é a maneira mais testada em batalha de hospedar planilhas do Grist. E para muitos propósitos, a incorporação do Grist pode ser adequada, onde você incorpora uma planilha do Grist de uma instalação externa do Grist (como o serviço hospedado oferecido pelo Grist Labs). Mas se você não pode hospedar seus dados externamente e não deseja o fardo operacional de montar sua própria instalação do Grist, grist-static oferece uma maneira de renderizar facilmente planilhas do Grist em sites regulares. Assim como um PDF, as pessoas poderão visualizar a planilha, navegar nela e pesquisar nela. Melhor do que um PDF, eles poderão alterar as seleções e experimentar alterar os números para ver o que acontece. Cada visualizador tem sua própria cópia e suas alterações não serão vistas por outras pessoas nem armazenadas. Essa também seria uma forma escalável de mostrar um documento Grist para milhões de usuários simultâneos.
https://gristlabs.github.io/grist-static mostra alguns exemplos de documentos do Grist hospedados nas páginas do GitHub:
Hoje em dia, os PDFs podem ser colocados em um site e você pode criar um link para eles com a expectativa de que os navegadores os mostrem bem. Os navegadores não têm suporte nativo para Grist [ainda :-)], mas você pode criar uma pequena página wrapper como esta:
<!doctype html >
< html >
< head >
< meta charset =" utf8 " >
< script src =" https://grist-static.com/latest.js " > </ script >
</ head >
< body >
< script >
bootstrapGrist ( {
initialFile : 'investment-research.grist' ,
name : 'Investment Research' ,
} ) ;
</ script >
</ body >
</ html >.grist em seu servidor ao lado deste arquivo .html e preencher as opções para bootstrapGrist .initialData: 'path/to/data.csv' para importar um arquivo CSV para uma nova tabela. Neste caso, initialFile é opcional.initialContent . Você pode usá-lo para passar o conteúdo de um arquivo CSV.elementId: 'element-id para abrir o Grist dentro de um elemento da sua página.singlePage: true para um layout de página única menos ocupado. Grist pode lidar com dados em vários formatos, incluindo CSV. Como CSV é um formato tão comum e interagir com ele on-line continua sendo uma tarefa árdua, empacotamos grist-static em um utilitário csv-viewer.js simplificado especificamente para visualizar, classificar, filtrar qualquer cópia/colar de CSV, diretamente em uma página da web.
Basta adicionar o visualizador na área head de uma página da web:
< head >
< script src =" https://grist-static.com/csv-viewer.js " > </ script >
</ head >Então você pode criar um botão para abrir CSV a partir de uma URL:
< button data-grist-csv-open =" transactions.csv " > View CSV </ button >O CSV pode ser um arquivo ou uma URL de dados CSV que seu site gera para um usuário dinamicamente.
Se você estiver trabalhando com links em vez de botões, a mesma abordagem funciona:
< a data-grist-csv-open =" transactions.csv " href =" # " > View CSV </ a >É claro que você pode estilizar os botões e links como desejar.
O CSV Viewer também pode ser usado como um componente web chamado csv-viewer :
< html >
< head >
< script src =" https://grist-static.com/csv-viewer.js " > </ script >
</ head >
< body >
< csv-viewer initial-data =" path/to/data.csv " style =" height: 500px; border: 1px solid green " >
</ csv-viewer >
</ body >
</ html > Na verdade, o componente aceita o mesmo conjunto de opções que a função bootstrapGrist , então você pode configurá-lo para mostrar um arquivo CSV ou (apesar do nome) um documento Grist de sua escolha. Lista completa de opções disponíveis:
initial-file : o documento inicial do Grist a ser carregado.initial-data : um arquivo CSV para importar.initial-content : o conteúdo de um arquivo CSV a ser importado.name : O nome do documento Grist a ser usado.single-page : um atributo booleano que, quando presente, exibe o documento em um layout de página única menos movimentado.loader : um atributo booleano que, quando presente, exibe um botão giratório de carregamento enquanto o documento está sendo carregado. Vimos que com csv-viewer.js , qualquer elemento pode ser convertido em um link que abre um pop-up com um arquivo CSV. Tudo que você precisa fazer é adicionar o atributo data-grist-csv-open a ele.
Existem outras opções disponíveis.
data-grist-doc-open permite abrir um documento Grist em vez de um CSV (apesar do nome do utilitário).data-single-page como true para um layout de página única ou false para um layout de várias páginas.data-name para substituir o nome do documento padrão mostrado no layout de várias páginas.data-loader para mostrar um botão giratório de carregamento enquanto o documento está sendo carregado. Isso está habilitado por padrão, passe data-loader="false" para desativá-lo. Existem também algumas classes de botões predefinidas, especificamente grist e grist-large , que oferecem o estilo padrão do Grist.
Para um controle mais preciso, há uma função global previewInGrist com a mesma API que bootstrapGrist , mas em vez de renderizar inline, ela abre uma visualização em um pop-up. Isso pode ser útil para qualquer conteúdo ou arquivo criado dinamicamente que não esteja disponível no momento do carregamento da página.
As planilhas Grist, por padrão, armazenam muito histórico no arquivo .grist . Você pode limpar esse histórico construindo grist-core e então, no diretório grist-core , fazendo:
yarn run cli history prune PATH/TO/YOUR/doc.grist
Desculpe, isso é estranho.
git submodule update --init
make requirements
make build
make serve
# now visit http://localhost:3030/page/
A sequência acima coloca vários links no diretório page , para maior comodidade durante o desenvolvimento. Para coletar arquivos para upload, use:
make package
# everything you need is in dist/
Todos os exemplos de HTML até agora usaram https://grist-static.com/ , um domínio operado pela Grist Labs que serve apenas arquivos estáticos. Este domínio registra o tráfego para medir o uso, mas não define nem rastreia cookies. Você pode copiar todos os arquivos necessários para seu próprio site ou CDN para manter seu tráfego totalmente privado.
Você pode obter os arquivos necessários:
npm pack grist-static para buscar o tarball mais recente do registro NPM. Tarballs (arquivos .tgz ) são um formato de arquivo comum, com muitas ferramentas gratuitas disponíveis para descompactá-los. Seja como for, no final você terá um diretório dist/ contendo csv-viewer.js , latest.js e muitos outros arquivos que compõem o Grist. Coloque esse material onde desejar e atualize seus URLs de forma adequada.
O CDN jsdelivr espelha automaticamente os pacotes colocados no NPM, então vamos usá-lo como exemplo. Poderíamos substituir:
< script src =" https://grist-static.com/csv-viewer.js " > </ script >com:
< script src =" https://cdn.jsdelivr.net/npm/grist-static@latest/dist/csv-viewer.js " > </ script > É claro que essa mudança específica simplesmente moveria as informações de uso para jsdelivr.net em vez de grist-static.com , mas essa é a ideia. Basta usar o mesmo padrão para onde você escolher colocar os arquivos.
Seria interessante fazer com que as alterações do usuário persistissem em seu navegador - o OPFS pode ser uma boa opção para isso, uma vez que possui amplo suporte ao navegador. Outras etapas:
grist-core . 
