grist static Download - grist static Quellcode herunterladen

grist static

Andere Kategorien

1.0.0

Herunterladen

grist-static: Grist auf statischen Websites ohne Einbettungen

Dies ist eine Möglichkeit, .grist Dateien (Grist-Tabellen) auf regulären Websites anzuzeigen und mit ihnen zu interagieren, ohne dass eine spezielle Back-End-Unterstützung erforderlich ist. Die Idee hier ist, dass es für die Erstellung von Berichten großartig wäre, wenn wir Tabellen wie PDFs auf einer Website platzieren könnten, mit schönen Formatierungs- und Navigationsoptionen und ohne viel Aufwand.

Wenn Sie ein spezielles Back-End ausführen können , ist Grist-Core die bewährteste Methode zum Hosten von Grist-Tabellen. Und für viele Zwecke kann die Einbettung von Grist ausreichend sein, wenn Sie eine Grist-Tabelle aus einer externen Grist-Installation einbetten (z. B. den von Grist Labs angebotenen gehosteten Dienst). Wenn Sie Ihre Daten jedoch nicht extern hosten können und sich die betriebliche Belastung durch die Bereitstellung einer eigenen Grist-Installation ersparen möchten, bietet Ihnen grist-static eine Möglichkeit, Grist-Tabellen einfach auf regulären Websites darzustellen. Wie bei einer PDF-Datei können Benutzer die Tabelle anzeigen, darin navigieren und darin suchen. Besser als bei einer PDF-Datei können sie ihre Auswahl ändern und mit sich ändernden Zahlen experimentieren, um zu sehen, was passiert. Jeder Betrachter hat seine eigene Kopie und seine Änderungen werden von anderen nicht gesehen oder gespeichert. Dies wäre auch eine skalierbare Möglichkeit, ein Grist-Dokument Millionen gleichzeitigen Benutzern anzuzeigen.

Sehen Sie sich ein Beispiel an

https://gristlabs.github.io/grist-static zeigt einige Beispiele für Grist-Dokumente, die auf GitHub-Seiten gehostet werden:

Beispiele.mp4

Bereitstellung eines Grist-Dokuments auf einer statischen Website

Heutzutage können PDFs auf einer Website platziert werden und Sie können darauf verlinken, in der Erwartung, dass Browser sie gut anzeigen. Browser unterstützen Grist [noch :-)] nicht nativ, aber Sie können eine kleine Wrapper-Seite wie diese erstellen:

 <!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 >

Der Code in diesem Repository ist unter https://grist-static.com/ als CDN verfügbar; Mit diesem Repo können Sie alles selbst erstellen.
Danach müssen Sie nur noch eine .grist Datei neben dieser .html Datei auf Ihrem Server ablegen und die Optionen für bootstrapGrist eingeben.
Sie können auch initialData: 'path/to/data.csv' übergeben, um eine CSV-Datei in eine neue Tabelle zu importieren. In diesem Fall ist initialFile optional.
Es gibt auch die Option initialContent . Sie können damit den Inhalt einer CSV-Datei übergeben.
Sie können auch elementId: 'element-id übergeben, um Grist innerhalb eines Elements auf Ihrer Seite zu öffnen.
- In diesem Fall können Sie wie oben beschrieben eine kleine Wrapper-Seite für Ihr Dokument einfügen und diese selbst als Iframe einbetten.
Sie können singlePage: true für ein weniger ausgelastetes, einseitiges Layout festlegen.

Grist CSV-Viewer

Grist kann Daten in mehreren Formaten verarbeiten, einschließlich CSV. Da CSV ein so verbreitetes Format ist und die Online-Interaktion damit eine lästige Pflicht bleibt, haben wir grist-static in ein optimiertes Dienstprogramm csv-viewer.js gepackt, das sich speziell zum Anzeigen, Sortieren, Filtern und Kopieren/Einfügen aus CSV direkt eignet eine Webseite.

Fügen Sie den Viewer einfach im head einer Webseite hinzu:

 < head >
  < script src =" https://grist-static.com/csv-viewer.js " > </ script >
</ head >

Dann können Sie eine Schaltfläche zum Öffnen von CSV über eine URL erstellen:

 < button data-grist-csv-open =" transactions.csv " > View CSV </ button >

Bei der CSV-Datei kann es sich um eine Datei oder eine URL mit CSV-Daten handeln, die Ihre Website dynamisch für einen Benutzer generiert.

Wenn Sie mit Links statt mit Schaltflächen arbeiten, funktioniert der gleiche Ansatz:

 < a data-grist-csv-open =" transactions.csv " href =" # " > View CSV </ a >

Natürlich können Sie die Schaltflächen und Links nach Ihren Wünschen gestalten.

Grist CSV Viewer als Webkomponente

Der CSV-Viewer kann auch als Webkomponente namens csv-viewer verwendet werden:

 < 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 >

Die Komponente akzeptiert tatsächlich die gleichen Optionen wie die bootstrapGrist -Funktion, sodass Sie sie so konfigurieren können, dass entweder eine CSV-Datei oder (trotz des Namens) ein Grist-Dokument Ihrer Wahl angezeigt wird. Vollständige Liste der verfügbaren Optionen:

initial-file : Das erste zu ladende Grist-Dokument.
initial-data : Eine CSV-Datei zum Importieren.
initial-content : Ein Inhalt einer zu importierenden CSV-Datei.
name : Der Name des zu verwendenden Grist-Dokuments.
single-page : Ein boolesches Attribut, das, sofern vorhanden, das Dokument in einem weniger aufwendigen, einseitigen Layout anzeigt.
loader : Ein boolesches Attribut, das, sofern vorhanden, einen Lade-Spinner anzeigt, während das Dokument geladen wird.

Weitere Viewer-Optionen

Wir haben gesehen, dass mit csv-viewer.js jedes Element in einen Link umgewandelt werden kann, der ein Popup mit einer CSV-Datei öffnet. Sie müssen lediglich das Attribut data-grist-csv-open hinzufügen.

Es stehen weitere Optionen zur Verfügung.

Wenn Sie data-grist-doc-open festlegen, können Sie (trotz des Namens des Dienstprogramms) ein Grist-Dokument anstelle einer CSV-Datei öffnen.
Setzen Sie data-single-page für ein Einzelseitenlayout auf true oder für ein mehrseitiges Layout auf false .
Verwenden Sie data-name um den im mehrseitigen Layout angezeigten Standarddokumentnamen zu überschreiben.
Verwenden Sie data-loader um einen Lade-Spinner anzuzeigen, während das Dokument geladen wird. Dies ist standardmäßig aktiviert. Übergeben Sie data-loader="false" um es zu deaktivieren.

Es gibt auch einige vordefinierte Schaltflächenklassen, insbesondere grist und grist-large , die den Standardstil von Grist bieten.

Für eine genauere Steuerung gibt es eine globale Funktion previewInGrist mit derselben API wie bootstrapGrist , die jedoch nicht inline rendert, sondern eine Vorschau in einem Popup öffnet. Dies kann für dynamisch erstellte Inhalte oder Dateien nützlich sein, die zum Zeitpunkt des Ladens der Seite nicht verfügbar sind.

Unterschiede zum regulären Grist

Änderungen werden nicht gespeichert.
Änderungen werden nicht mit anderen Betrachtern geteilt.
Keine besondere Zugangskontrolle.
Sehr unausgereift, einige Funktionen noch nicht portiert, wie zum Beispiel:
- Anhänge
  - Sollte machbar sein (z. B. über Servicemitarbeiter)
- Importieren und Exportieren
  - Wieder machbar, nur „anders“
- Messung der Datengröße
  - Eine erforderliche Konfigurationsoption beim Kompilieren von SQLite.

Tipps für kleine .grist-Dateien

Grist-Tabellen speichern standardmäßig einen Großteil des Verlaufs in der .grist Datei. Sie können diesen Verlauf bereinigen, indem Sie grist-core erstellen und dann im Verzeichnis grist-core Folgendes tun:

 yarn run cli history prune PATH/TO/YOUR/doc.grist

Tut mir leid, das ist umständlich.

Bauen aus der Quelle

 git submodule update --init
make requirements
make build
make serve
# now visit http://localhost:3030/page/

Die obige Sequenz platziert zur Vereinfachung während der Entwicklung viele Links im page . Um Dateien zum Hochladen zu sammeln, verwenden Sie stattdessen:

 make package
# everything you need is in dist/

Bereitstellung aller Dateien von Ihrer eigenen Website oder Ihrem CDN

Alle bisherigen HTML-Beispiele verwendeten https://grist-static.com/ , eine von Grist Labs betriebene Domain, die nur statische Dateien bereitstellt. Diese Domain protokolliert den Datenverkehr, um die Nutzung zu messen, setzt oder verfolgt jedoch keine Cookies. Sie können alle benötigten Dateien auf Ihre eigene Website oder Ihr CDN kopieren, um Ihren Datenverkehr vollständig privat zu halten.

Sie können die benötigten Dateien erhalten von:

Bauen aus der Quelle.
Oder indem Sie npm pack grist-static ausführen, um den neuesten Tarball aus der NPM-Registrierung abzurufen.
Oder indem Sie https://registry.npmjs.org/grist-static/latest besuchen, einen Link zum neuesten Tarball finden und ihn dann herunterladen.

Tarballs ( .tgz Dateien) sind ein gängiges Archivformat, für dessen Entpacken viele kostenlose Tools verfügbar sind. Wie auch immer Sie dorthin gelangen, am Ende haben Sie ein dist/ -Verzeichnis, das csv-viewer.js , latest.js und viele andere Dateien enthält, aus denen Grist besteht. Platzieren Sie das Material an der gewünschten Stelle und aktualisieren Sie Ihre URLs entsprechend.

Das jsdelivr CDN spiegelt automatisch Pakete wider, die auf NPM platziert sind. Nehmen wir es also als Beispiel. Wir könnten ersetzen:

 < script src =" https://grist-static.com/csv-viewer.js " > </ script >

mit:

 < script src =" https://cdn.jsdelivr.net/npm/grist-static@latest/dist/csv-viewer.js " > </ script >

Natürlich würde diese spezielle Änderung die Nutzungsinformationen einfach nach jsdelivr.net und nicht nach grist-static.com verschieben, aber Sie verstehen, worauf es ankommt. Verwenden Sie einfach dasselbe Muster für den Ort, an dem Sie die Dateien platzieren möchten.

Roadmap

Es könnte sinnvoll sein, Benutzeränderungen im Browser dauerhaft zu speichern – OPFS könnte dafür eine gute Option sein, sobald es über eine breite Browserunterstützung verfügt. Weitere Schritte: