grist static
1.0.0
Ini adalah cara untuk melihat dan berinteraksi dengan file .grist (spreadsheet Grist) di situs web biasa, tanpa memerlukan dukungan back-end khusus. Idenya di sini adalah akan sangat bagus untuk membuat laporan jika kita dapat meletakkan spreadsheet di situs web seperti yang kita lakukan pada PDF, dengan opsi format dan navigasi yang bagus dan tidak banyak keributan.
Jika Anda dapat menjalankan back-end khusus, grist-core adalah cara yang paling teruji untuk menghosting spreadsheet Grist. Dan untuk banyak tujuan, penyematan Grist mungkin memadai, jika Anda menyematkan spreadsheet Grist dari instalasi Grist eksternal (seperti layanan yang dihosting yang ditawarkan oleh Grist Labs). Namun jika Anda tidak dapat menghosting data Anda secara eksternal, dan tidak ingin beban operasional untuk menjalankan instalasi Grist sendiri, grist-static memberi Anda cara untuk merender spreadsheet Grist dengan mudah di situs web biasa. Seperti PDF, orang akan dapat melihat spreadsheet, menavigasi di dalamnya, dan mencari di dalamnya. Lebih baik daripada PDF, mereka dapat mengubah pilihan, dan bereksperimen dengan mengubah angka untuk melihat apa yang terjadi. Setiap pemirsa memiliki salinannya sendiri, dan perubahannya tidak akan dilihat atau disimpan oleh orang lain. Ini juga akan menjadi cara yang terukur untuk menampilkan dokumen Grist kepada jutaan pengguna secara bersamaan.
https://gristlabs.github.io/grist-static menunjukkan beberapa contoh dokumen Grist yang dihosting di Halaman GitHub:
Saat ini, PDF dapat ditempatkan di situs web, dan Anda dapat menautkannya dengan harapan browser akan menampilkannya dengan baik. Browser belum memiliki dukungan asli untuk Grist [belum :-)] tetapi Anda dapat membuat halaman pembungkus kecil seperti ini:
<!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 di server Anda di samping file .html ini, dan memasukkan opsi ke bootstrapGrist .initialData: 'path/to/data.csv' untuk mengimpor file CSV ke tabel baru. Dalam hal ini initialFile bersifat opsional.initialContent . Anda dapat menggunakannya untuk meneruskan konten file CSV.elementId: 'element-id untuk membuka Grist dalam elemen di halaman Anda.singlePage: true untuk tata letak satu halaman yang tidak terlalu sibuk. Grist dapat menangani data dalam berbagai format, termasuk CSV. Karena CSV adalah format yang umum, dan berinteraksi dengannya secara online tetap menjadi sebuah tugas, kami telah mengemas grist-static ke dalam utilitas csv-viewer.js yang disederhanakan khusus untuk melihat, mengurutkan, memfilter, setiap salinan/tempel dari CSV, langsung di sebuah halaman web.
Cukup tambahkan penampil di area head halaman web:
< head >
< script src =" https://grist-static.com/csv-viewer.js " > </ script >
</ head >Kemudian Anda dapat membuat tombol untuk membuka CSV dari URL:
< button data-grist-csv-open =" transactions.csv " > View CSV </ button >CSV dapat berupa file, atau URL data CSV yang dibuat situs Anda untuk pengguna secara dinamis.
Jika Anda bekerja dengan tautan dan bukan tombol, pendekatan yang sama akan berhasil:
< a data-grist-csv-open =" transactions.csv " href =" # " > View CSV </ a >Tentu saja Anda dapat menata tombol dan tautan sesuai keinginan.
CSV Viewer juga dapat digunakan sebagai komponen web yang disebut 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 > Komponen ini sebenarnya menerima rangkaian opsi yang sama dengan fungsi bootstrapGrist , sehingga Anda dapat mengonfigurasinya untuk menampilkan file CSV atau (terlepas dari namanya) dokumen Grist pilihan Anda. Daftar lengkap opsi yang tersedia:
initial-file : Dokumen Grist awal yang akan dimuat.initial-data : File CSV yang akan diimpor.initial-content : Konten file CSV yang akan diimpor.name : Nama dokumen Grist yang akan digunakan.single-page : Atribut boolean yang, jika ada, menampilkan dokumen dalam tata letak satu halaman yang tidak terlalu sibuk.loader : Atribut boolean yang, jika ada, menampilkan spinner pemuatan saat dokumen sedang dimuat. Kita telah melihat bahwa dengan csv-viewer.js , elemen apa pun dapat dikonversi menjadi tautan yang membuka popup dengan file CSV. Yang perlu Anda lakukan adalah menambahkan atribut data-grist-csv-open ke dalamnya.
Ada opsi lain yang tersedia.
data-grist-doc-open memungkinkan pembukaan dokumen Grist daripada CSV (terlepas dari nama utilitasnya).data-single-page ke true untuk tata letak satu halaman, atau false untuk tata letak multi-halaman.data-name untuk mengganti nama dokumen default yang ditampilkan dalam tata letak multi-halaman.data-loader untuk menampilkan spinner pemuatan saat dokumen sedang dimuat. Ini diaktifkan secara default, teruskan data-loader="false" untuk menonaktifkannya. Ada juga beberapa kelas tombol yang telah ditentukan sebelumnya, khususnya grist dan grist-large , yang menawarkan gaya default Grist.
Untuk kontrol yang lebih baik, terdapat fungsi global previewInGrist dengan API yang sama dengan bootstrapGrist , namun alih-alih merender inline, fungsi ini akan membuka pratinjau dalam popup. Ini mungkin berguna untuk konten atau file apa pun yang dibuat secara dinamis yang tidak tersedia pada saat pemuatan halaman.
Spreadsheet gandum secara default menyimpan banyak riwayat dalam file .grist . Anda dapat memangkas riwayat tersebut dengan membangun grist-core dan kemudian, di direktori grist-core , melakukan:
yarn run cli history prune PATH/TO/YOUR/doc.grist
Maaf ini canggung.
git submodule update --init
make requirements
make build
make serve
# now visit http://localhost:3030/page/
Urutan di atas menempatkan banyak link di direktori page , untuk kenyamanan selama pengembangan. Untuk mengumpulkan file untuk diunggah, gunakan:
make package
# everything you need is in dist/
Semua contoh HTML sejauh ini menggunakan https://grist-static.com/ , domain yang dioperasikan oleh Grist Labs yang hanya menyajikan file statis. Domain ini mencatat lalu lintas untuk mengukur penggunaan, namun tidak menyetel atau melacak cookie. Anda dapat menyalin semua file yang diperlukan ke situs web atau CDN Anda sendiri untuk menjaga privasi lalu lintas Anda sepenuhnya.
Anda bisa mendapatkan file-file yang dibutuhkan dengan cara:
npm pack grist-static untuk mengambil tarball terbaru dari registri NPM. Tarball (file .tgz ) adalah format arsip yang umum, dengan banyak alat gratis tersedia untuk membongkarnya. Bagaimana pun Anda sampai di sana, pada akhirnya Anda akan memiliki direktori dist/ yang berisi csv-viewer.js , latest.js , dan banyak file lain yang membentuk Grist. Tempatkan materi tersebut di tempat yang Anda inginkan, dan perbarui URL Anda dengan tepat.
CDN jsdelivr secara otomatis mencerminkan paket yang ditempatkan di NPM, jadi mari kita gunakan sebagai contoh. Kami dapat mengganti:
< script src =" https://grist-static.com/csv-viewer.js " > </ script >dengan:
< script src =" https://cdn.jsdelivr.net/npm/grist-static@latest/dist/csv-viewer.js " > </ script > Tentu saja, perubahan khusus ini hanya akan memindahkan informasi penggunaan ke jsdelivr.net daripada grist-static.com , tetapi Anda mengerti maksudnya. Cukup gunakan pola yang sama di mana pun Anda memilih untuk meletakkan file.
Akan lebih baik jika perubahan pengguna tetap ada di browser mereka - OPFS mungkin merupakan pilihan yang baik untuk itu, setelah memiliki dukungan browser yang luas. Langkah lainnya:
grist-core . 
