Apa itu desain tema, cara mendesain tema - Quick BI - Alibaba Cloud Documentation Center

Gunakan fitur desain tema untuk mengubah tema, gaya global, tata letak halaman, dan gaya komponen dashboard. Topik ini menjelaskan pengaturan tema di panel Pengaturan Halaman.

Prasyarat

Anda telah masuk ke Konsol Quick BI dan berada di halaman pengeditan dashboard. Untuk informasi selengkapnya, lihat Buat dashboard.

Prosedur

Pada halaman pengeditan dashboard, klik Page Settings di bilah menu atas.
Anda dapat mengklik ikon untuk membuka atau menutup panel Page Settings.
Di Page Settings, pada tab Theme, konfigurasikan pengaturan seperti Dashboard Theme, Template, Global Styles, dan Page Layout.
Untuk menemukan pengaturan dengan cepat, masukkan kata kunci di search box yang terletak di bagian atas.
Untuk menutup semua kategori konfigurasi, klik ikon di sebelah kanan search box dan pilih Collapse all categories.
Tabel berikut menjelaskan parameter-parameter tersebut.

Pada bagian Dashboard theme, Anda dapat memilih tema resmi atau tema kustom.
- Official themes: Default, Deep Blue, Starry Sky, Technology, Event, Minimal, dan Indigo.
- Custom themes: Anda dapat memilih tema kustom yang sudah ada.
  Administrator organisasi dapat mengklik Custom untuk membuka halaman Report Theme Management dan mengelola tema kustom.
  Catatan
  Quick BI Professional Edition mendukung custom themes:
  - Jika Anda adalah administrator organisasi, Anda dapat memilih dari tema resmi atau membuat tema kustom baru.
  - Jika Anda bukan administrator organisasi, Anda dapat memilih dari tema resmi atau tema kustom yang sudah ada, tetapi tidak dapat membuat yang baru.

Pada bagian Global styles, konfigurasikan gaya global tema.

Parameter	Deskripsi
Theme Mode	Anda dapat memilih light mode atau dark mode. Jika Anda memilih light mode, latar belakang dashboard berwarna putih. Mode default adalah light mode. Jika Anda memilih dark mode, latar belakang dashboard berwarna hitam.
Chart color scheme	Anda dapat menggunakan template color schemes yang disediakan sistem atau custom color schemes. Saat Anda mengatur Chart color scheme ke Template color scheme, Anda dapat memilih skema dari daftar drop-down. Misalnya, jika Anda memilih skema warna Advanced Gray, grafik akan diperbarui seperti pada gambar berikut. Jika Anda mengatur chart color scheme ke Custom, Anda dapat mengubah warna setiap swatch. Catatan Gradient color style berlaku untuk grafik indicator, trend, dan comparison.
Page font	Konfigurasikan font type untuk halaman dashboard.
Card corner radius	Konfigurasikan corner radius kartu grafik. Anda dapat memilih tanpa radius, radius kecil, atau radius besar.
Spacing	Anda dapat memilih antara Compact, Normal, dan Custom.
Spacing between cards	Pengaturan ini hanya tersedia saat Spacing diatur ke Custom. Sesuaikan jarak baris dan kolom antar kartu.
Card padding	Pengaturan ini hanya tersedia saat Spacing diatur ke Custom. Sesuaikan padding di sisi atas, bawah, kiri, dan kanan kartu.
Semantic colors	Pada fitur seperti conditional formatting dan tampilan indikator sekunder, warna secara visual menyampaikan informasi seperti peningkatan, tidak ada perubahan, atau penurunan data. Di pengaturan Semantic colors, sistem secara otomatis mencocokkan warna semantik default berbeda berdasarkan tema yang dipilih di chart color scheme. Anda juga dapat menyesuaikan skema warna global untuk makna data seperti naik/turun, positif/negatif, dan status agar lebih sesuai dengan kebutuhan analisis bisnis Anda. Pengaturan ini berlaku untuk seluruh dashboard.

Pada bagian Page layout, konfigurasikan parameter berikut.

Parameter	Deskripsi
Page layout	Pilih tata letak konten dashboard. Anda dapat memilih Fit to Content atau Fit to Window. Fit to Content: Menyesuaikan ukuran agar muat semua komponen, seperti grafik dan query controls, berdasarkan ukuran dan posisi aktualnya. Fit to Window: Secara otomatis menyesuaikan ukuran berdasarkan jendela browser saat ini. Anda juga dapat mengonfigurasi tata letak kolom halaman.
Page information	Konfigurasikan informasi halaman yang ditampilkan di dashboard, termasuk Title area, story outline, dan Footer. Title area: Tampilkan atau sembunyikan area judul dashboard. Jika area judul ditampilkan, Anda dapat mengklik ikon untuk mengonfigurasi item berikut. Show main title: Tampilkan atau sembunyikan judul utama dashboard. Jika ditampilkan, Anda dapat menyesuaikan gaya teksnya serta mengonfigurasi logo dan penyelarasan konten. Note: Tampilkan atau sembunyikan catatan di area judul utama. Jika catatan ditampilkan, Anda dapat mengklik ikon untuk menyesuaikan konten catatan. Content area bottom margin: Sesuaikan margin bawah area judul utama. Cover background: Atur warna latar belakang, gambar overlay, dan tinggi area judul utama. Story outline: Tambahkan garis besar cerita di bawah area judul. Saat dipilih, sistem secara otomatis menghasilkan garis besar cerita berdasarkan urutan tata letak grafik yang ada di dashboard. Anda dapat mengklik ikon di samping story node untuk menyesuaikan garis besar di kotak dialog Edit Story Node. Footer: Tampilkan atau sembunyikan area footer dashboard. Jika footer ditampilkan, Anda dapat mengklik ikon untuk mengonfigurasi pengaturan berikut. Footer text content: Atur konten teks untuk area footer. Footer background: Atur warna latar belakang, gambar overlay, dan tinggi area footer.
Page background	Konfigurasikan warna latar belakang. Anda dapat memilih Solid color atau Gradient, serta memilih apakah akan menambahkan gambar latar belakang.
Page width	Anda dapat memilih Adaptive atau Fixed. Catatan Jika Anda memilih Fixed, Anda harus mengatur margin kiri dan kanan halaman dalam piksel. Setelah diatur, margin kiri dan kanan menjadi tetap dan tidak dapat disesuaikan lagi di pengaturan margin halaman.
Page margin	Anda dapat memilih antara Normal, Ultra-wide page, dan Custom.

Pada bagian Dashboard background, konfigurasikan parameter berikut.

Parameter	Deskripsi
Top image dan Bottom image	Saat memilih gambar, Anda dapat memilih Existing image atau Custom image. Catatan Saat memilih custom image, Anda dapat mengunggah gambar lokal atau mengunggah gambar dari URL.

Pada bagian Dashboard components, konfigurasikan parameter berikut.

Parameter		Deskripsi
Title	Text	Atur font size dan alignment judul grafik.
	Separator	Atur warna dan lebar garis pemisah judul.
	Custom title background	Menyesuaikan latar belakang judul agar sesuai dengan tema laporan. Pengaturan berikut tersedia. Background color: Pilih warna isian untuk latar belakang judul. Anda dapat mengaturnya ke Solid color atau Gradient. Overlay background image: Pilih opsi ini untuk menambahkan gambar overlay pada latar belakang judul. Anda dapat menggunakan gambar latar belakang default atau mengunggah gambar kustom. Catatan Saat memilih custom image, Anda dapat mengunggah gambar lokal atau mengunggah gambar dari URL. Title area position: Atur posisi area judul. Anda dapat memilih Inside chart atau Above chart. Apply title background to charts in Tab: Pengaturan ini menerapkan konfigurasi latar belakang judul ke grafik dalam komponen Tab. Jika dipilih, semua grafik dalam komponen Tab akan mewarisi pengaturan warna latar belakang, gambar overlay, dan posisi area judul. Dalam skenario dengan tab bersarang, jika Apply title background to charts in Tab diaktifkan, hanya judul tab utama yang akan menyinkronkan gayanya. Judul sub-tab akan mempertahankan pengaturan aslinya.
	Status icon	Anda dapat mengatur status icon agar ditampilkan saat diarahkan (hover) atau selalu ditampilkan, serta mengatur warna status icon.
	Hide More actions entry point in preview mode	Memilih opsi ini akan menyembunyikan menu More actions dalam preview mode.
Background style	Fill	Tampilkan atau sembunyikan warna isian untuk latar belakang.
	Overlay background image	Tambahkan gambar latar belakang atau gambar kustom pada latar belakang grafik.
	Border	Tampilkan atau sembunyikan border dan atur warnanya.
	Show shadow	Tampilkan atau sembunyikan bayangan untuk latar belakang.
Empty data style	Text content	Menyesuaikan pesan prompt untuk data kosong. Pesan default-nya adalah "No data returned."
	Icon style	Menyesuaikan gaya ikon untuk data kosong. Catatan Jika Anda memilih Custom image, Anda dapat mengunggah gambar lokal atau mengunggah gambar dari URL.
	Jump link	Setelah mengonfigurasi jump link, mengklik ikon atau teks akan mengarahkan ke alamat yang ditentukan.

Pada bagian General content styles, konfigurasikan parameter berikut.

Parameter		Deskripsi
Chart styles	Axis title	Atur ukuran font, warna, dan gaya judul sumbu.
	Axis label	Atur ukuran font, warna, dan gaya label sumbu.
	Data label	Atur ukuran font, warna, dan gaya label data.
	Tooltip	Atur ukuran font, warna, dan gaya tooltip.
	Legend	Atur ukuran font, warna, dan gaya legenda, serta atur apakah simbol legenda diskalakan seiring teks. Jika dipilih: Untuk grafik garis, ketebalan garis simbol legenda disesuaikan secara proporsional dengan ketebalan garis grafik. Untuk grafik lainnya, ukuran simbol legenda disesuaikan secara proporsional dengan ukuran font legenda.
Table styles	Style settings	Mengatur gaya tabel. Opsi termasuk Zebra, Bordered, Simple, dan Minimal.
	Primary color scheme	Mengatur skema warna utama. Opsi termasuk Theme color, Gray, dan Custom.
	Header	Atur ukuran font, warna, dan properti lain header tabel.
	Content	Atur ukuran font, warna, dan properti lain konten tabel.

Pada bagian Tab component, konfigurasikan parameter berikut.

Parameter	Deskripsi
Selected tab style	Atur gaya untuk tab yang dipilih. Opsi termasuk Underline, Separator, dan Selected block.
Tab label style	Atur ukuran font label tab serta gaya untuk kondisi default dan terpilih.
Show border of visualization cards in Tab	Tampilkan atau sembunyikan border untuk kartu visualisasi di dalam komponen Tab dan atur warnanya.
Customize spacing between components in Tab	Pilih opsi ini untuk memasukkan nilai jarak kustom antar komponen dalam satu tab. Jika tidak, jarak mengikuti pengaturan jarak baris dan kolom global dashboard. Catatan Kisaran jarak yang dapat diedit adalah -32px hingga 32px untuk PC dan 0px hingga 20px untuk perangkat seluler.

Pada area Query control, konfigurasikan parameter berikut.

Parameter	Deskripsi
Border	Tampilkan atau sembunyikan query control border dan atur warnanya.
Interaction buttons	Atur warna interaction buttons.
Button corner radius	Atur button corner radius untuk tombol interaksi.
Condition spacing	Atur spacing between conditions.
Condition name	Atur gaya teks condition name.
Selection box style	Atur style of the selection box.
Background color	Atur background color kotak seleksi.
Border	Atur ketebalan dan warna border untuk kotak seleksi.
Corner radius	Atur corner radius kotak seleksi.
Text	Atur warna text dan ukuran font kotak seleksi.

Catatan

Pengaturan di area query control berlaku untuk semua query control secara global. Namun, jika suatu query control individual memiliki style settings kustom, pengaturan global ini akan ditimpa. Misalnya, jika style selection box di area query control diatur ke Fill, tetapi query control A memiliki stylenya diatur ke Border di pengaturannya sendiri, maka style selection box untuk query control A akan menjadi Border.

Setelah mengonfigurasi pengaturan, klik Save.