grist static
1.0.0
Esta es una forma de ver e interactuar con archivos .grist (hojas de cálculo Grist) en sitios web normales, sin necesidad de soporte de back-end especial. La idea aquí es que sería genial para hacer informes si pudiéramos colocar hojas de cálculo en un sitio web como lo hacemos con los PDF, con buenas opciones de formato y navegación y sin mucho problema.
Si puede ejecutar un back-end especial, grist-core es la forma más probada de alojar hojas de cálculo de Grist. Y para muchos propósitos, la incrustación de Grist puede ser adecuada, donde se incrusta una hoja de cálculo de Grist desde una instalación externa de Grist (como el servicio alojado ofrecido por Grist Labs). Pero si no puede alojar sus datos externamente y no quiere la carga operativa de instalar su propia instalación de Grist, grist-static le ofrece una manera de representar fácilmente hojas de cálculo de Grist en sitios web normales. Al igual que un PDF, las personas podrán ver la hoja de cálculo, navegar en ella y buscar en ella. Mejor que un PDF, podrán cambiar selecciones y experimentar cambiando números para ver qué sucede. Cada espectador tiene su propia copia y sus cambios no serán vistos por otros ni almacenados. Esta también sería una forma escalable de mostrar un documento Grist a millones de usuarios simultáneos.
https://gristlabs.github.io/grist-static muestra un par de ejemplos de documentos Grist alojados en páginas de GitHub:
Hoy en día, los archivos PDF se pueden colocar en un sitio web y puedes vincularlos con la expectativa de que los navegadores los muestren bien. Los navegadores no tienen soporte nativo para Grist [todavía :-)] pero puedes crear una pequeña página contenedora 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 en su servidor al lado de este archivo .html y completar las opciones para bootstrapGrist .initialData: 'path/to/data.csv' para importar un archivo CSV a una nueva tabla. En este caso, initialFile es opcional.initialContent . Puede usarlo para pasar el contenido de un archivo CSV.elementId: 'element-id para abrir Grist dentro de un elemento de tu página.singlePage: true para un diseño de página única menos ocupado. Grist puede manejar datos en múltiples formatos, incluido CSV. Dado que CSV es un formato tan común e interactuar con él en línea sigue siendo una tarea ardua, hemos empaquetado grist-static en una utilidad csv-viewer.js optimizada específicamente para ver, ordenar, filtrar y copiar y pegar desde CSV, directamente en una página web.
Simplemente agregue el visor en el área head de una página web:
< head >
< script src =" https://grist-static.com/csv-viewer.js " > </ script >
</ head >Luego puedes crear un botón para abrir CSV desde una URL:
< button data-grist-csv-open =" transactions.csv " > View CSV </ button >El CSV podría ser un archivo o una URL de datos CSV que su sitio genera dinámicamente para un usuario.
Si trabaja con enlaces en lugar de botones, el mismo enfoque funciona:
< a data-grist-csv-open =" transactions.csv " href =" # " > View CSV </ a >Por supuesto, puedes diseñar los botones y enlaces como desees.
El visor CSV también se puede utilizar como un componente web llamado 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 > De hecho, el componente acepta el mismo conjunto de opciones que la función bootstrapGrist , por lo que puede configurarlo para que muestre un archivo CSV o (a pesar de su nombre) un documento Grist de su elección. Lista completa de opciones disponibles:
initial-file : el documento Grist inicial que se cargará.initial-data : un archivo CSV para importar.initial-content : contenido de un archivo CSV para importar.name : el nombre del documento Grist que se utilizará.single-page : atributo booleano que, cuando está presente, muestra el documento en un diseño de página única menos ocupado.loader : un atributo booleano que, cuando está presente, muestra un control giratorio de carga mientras se carga el documento. Hemos visto que con csv-viewer.js , cualquier elemento se puede convertir en un enlace que abre una ventana emergente con un archivo CSV. Todo lo que necesita hacer es agregarle el atributo data-grist-csv-open .
Hay otras opciones disponibles.
data-grist-doc-open permite abrir un documento Grist en lugar de un CSV (a pesar del nombre de la utilidad).data-single-page en true para un diseño de una sola página o false para un diseño de varias páginas.data-name para anular el nombre del documento predeterminado que se muestra en el diseño de varias páginas.data-loader para mostrar una rueda giratoria de carga mientras se carga el documento. Esto está habilitado de forma predeterminada, pase data-loader="false" para deshabilitarlo. También hay algunas clases de botones predefinidos, específicamente grist y grist-large , que ofrecen el estilo predeterminado de Grist.
Para un control más preciso, existe una función previewInGrist con la misma API que bootstrapGrist , pero en lugar de renderizar en línea, abre una vista previa en una ventana emergente. Esto puede resultar útil para cualquier contenido o archivos creados dinámicamente que no estén disponibles en el momento de cargar la página.
Las hojas de cálculo de Grist almacenan de forma predeterminada una gran cantidad de historial en el archivo .grist . Puedes podar ese historial construyendo grist-core y luego, en el directorio grist-core , haciendo:
yarn run cli history prune PATH/TO/YOUR/doc.grist
Lo siento, esto es incómodo.
git submodule update --init
make requirements
make build
make serve
# now visit http://localhost:3030/page/
La secuencia anterior coloca muchos enlaces en el directorio page , para mayor comodidad durante el desarrollo. Para recopilar archivos para cargar, utilice en su lugar:
make package
# everything you need is in dist/
Todos los ejemplos HTML hasta ahora han utilizado https://grist-static.com/ , un dominio operado por Grist Labs que solo sirve archivos estáticos. Este dominio registra el tráfico para medir el uso, pero no establece ni rastrea cookies. Puede copiar todos los archivos necesarios a su propio sitio web o CDN para mantener su tráfico completamente privado.
Puede obtener los archivos necesarios mediante:
npm pack grist-static para obtener el archivo tar más reciente del registro de NPM. Los archivos tarball (archivos .tgz ) son un formato de archivo común, con muchas herramientas gratuitas disponibles para descomprimirlos. Independientemente de cómo llegue allí, al final tendrá un directorio dist/ que contiene csv-viewer.js , latest.js y muchos otros archivos que componen Grist. Coloque ese material donde desee y actualice sus URL de forma adecuada.
La CDN jsdelivr refleja automáticamente los paquetes colocados en NPM, así que usémoslo como ejemplo. Podríamos reemplazar:
< script src =" https://grist-static.com/csv-viewer.js " > </ script >con:
< script src =" https://cdn.jsdelivr.net/npm/grist-static@latest/dist/csv-viewer.js " > </ script > Por supuesto, este cambio en particular simplemente movería la información de uso a jsdelivr.net en lugar de grist-static.com , pero ya se entiende la idea. Simplemente use el mismo patrón dondequiera que elija colocar los archivos.
Podría ser interesante hacer que los cambios del usuario persistan en su navegador; OPFS puede ser una buena opción para eso, una vez que tenga un amplio soporte para el navegador. Otros pasos:
grist-core . 
