Kustomisasi tampilan dashboard dengan Theme Design - Quick BI

Anda dapat menyesuaikan tampilan dasbor melalui desain tema, termasuk templat tema, gaya global, tata letak halaman, gaya widget, dan elemen lainnya. Topik ini menjelaskan pengaturan tema yang tersedia di pengaturan halaman dasbor.

Prasyarat

Anda telah masuk ke Konsol Quick BI dan mengakses halaman pengeditan dasbor. Untuk informasi selengkapnya, lihat Buat Dasbor.

Prosedur

Pada halaman pengeditan dasbor, klik Page Settings di bilah menu atas.
Anda dapat mengklik ikon untuk memperluas atau menciutkan panel pengaturan halaman.
Pada panel Page Settings, klik tab Theme untuk mengonfigurasi Dashboard Theme, Template, Global Style, Page Layout, dan pengaturan lainnya.
Untuk menemukan item konfigurasi tertentu dengan cepat, masukkan kata kunci di search box di bagian atas untuk menampilkan opsi konfigurasi.
Untuk collapse all kategori konfigurasi sekaligus, klik ikon di sebelah kanan search box dan pilih Collapse all categories.
Atur parameter berikut:

Pada bagian Dashboard Theme, Anda dapat memilih tema dasbor yang sesuai dari tema resmi atau memilih tema kustom yang telah dibuat.
- Official Themes: Tersedia tema Default, Deep Blue, Starry Sky, Technology, Activity, Minimalist, dan Indigo.
- Custom Themes: Anda dapat memilih tema kustom yang sudah ada.
  Administrator organisasi dapat mengklik Customize untuk mengakses halaman Report Theme Management guna mengelola templat tema kustom.
  Catatan
  Quick BI Professional Edition mendukung custom dashboard themes:
  - Jika Anda adalah administrator organisasi, Anda dapat memilih tema resmi yang direkomendasikan atau menambahkan tema kustom.
  - Jika Anda bukan administrator organisasi, Anda dapat memilih tema resmi yang direkomendasikan atau tema kustom yang sudah ada, tetapi tidak dapat menambahkan tema kustom.

Pada bagian Global Style, atur gaya global tema tersebut.

Chart configuration item	Deskripsi Parameter
Theme Mode	Dukungan untuk Light Mode dan Dark Mode. Saat Light Mode dipilih, warna latar belakang dasbor menjadi putih. Skin default adalah Light Mode. Saat Dark Mode dipilih, warna latar belakang dasbor menjadi hitam.
Chart Color Scheme	Mendukung Template Color Schemes yang dikonfigurasi sistem dan Custom Color Schemes. Saat Chart Color Scheme diatur ke Template Color Scheme, Anda dapat memilih skema warna dari daftar dropdown. Sebagai contoh, ketika skema warna diatur ke Advanced Gray, tampilan grafik akan seperti di bawah ini setelah beralih. Saat Chart Color Scheme diatur ke Custom, Anda dapat mengubah warna tiap blok warna. Catatan Gaya Warna Gradien berlaku untuk grafik Indicator, Trend, dan Comparison.
Page Font	Konfigurasikan tipe font untuk halaman grafik.
Card Border Radius	Konfigurasikan radius sudut kartu grafik, dengan opsi tanpa radius, radius kecil, atau radius besar.
Spacing	Mendukung opsi Compact, Regular, dan Custom.
Card Spacing	Hanya tersedia saat opsi Custom spacing dipilih, memungkinkan Anda menyesuaikan jarak baris dan kolom antar kartu.
Card Padding	Hanya tersedia saat opsi Custom spacing dipilih, memungkinkan Anda menyesuaikan jarak dari tepi atas, bawah, kiri, dan kanan di dalam kartu.
Semantic Colors	Pada fitur seperti conditional formatting dan tampilan metrik sekunder, warna sering digunakan untuk menyampaikan informasi visual mengenai data yang naik, datar, turun, dan sebagainya. Dalam konfigurasi Semantic Colors, sistem akan secara otomatis mencocokkan warna semantik default yang berbeda berdasarkan tema yang dipilih di Chart Color Scheme. Anda juga dapat menyesuaikan skema warna global untuk tren data, nilai positif/negatif, status, dan makna lainnya agar lebih sesuai dengan kebiasaan melihat data bisnis Anda. Konfigurasi ini akan diterapkan ke seluruh dasbor.

Pada bagian Page Layout, konfigurasikan parameter berikut.

Chart configuration item	Deskripsi Item Konfigurasi
Page layout	Pilih tata letak untuk konten dasbor. Mendukung opsi Fit to content dan Fit to window. Fit to content: Menyesuaikan ukuran dasbor agar muat dengan 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 pada dasbor, termasuk: Title area, Storyline, dan Footer. Title area: Atur apakah area judul dasbor ditampilkan. Jika area judul ditampilkan, klik ikon untuk mengonfigurasi item berikut. Display main title: Tampilkan atau sembunyikan judul utama dasbor. Jika judul utama ditampilkan, sesuaikan gaya teksnya serta konfigurasikan logo dan penyelarasan konten. Notes: Atur apakah catatan ditampilkan di area judul utama. Jika catatan ditampilkan, klik 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: Tentukan apakah garis besar cerita disisipkan di bawah area judul. Saat dipilih, sistem akan secara otomatis menghasilkan garis besar cerita berdasarkan urutan tata letak grafik yang ada di dasbor saat ini. Anda dapat mengklik ikon di samping Story Node untuk menyesuaikan dan mengedit garis besar cerita di kotak dialog Story Node Edit sesuai kebutuhan. Footer: Atur apakah area footer dasbor ditampilkan. Jika footer ditampilkan, klik ikon untuk mengonfigurasi item berikut. Footer text content: Atur teks yang akan ditampilkan di area footer sesuai kebutuhan. Footer area background: Atur warna latar belakang, gambar overlay, dan tinggi area footer.
Page Background	Konfigurasikan warna latar belakang, mendukung metode Solid Color, Gradient, serta pilihan untuk menambahkan gambar latar belakang.
Page Width	Mendukung metode Automatic Rotation, Fixed. Catatan Saat metode Fixed dipilih, Anda perlu mengatur ukuran piksel margin kiri dan kanan. Setelah diatur, margin kiri dan kanan akan tetap dan tidak dapat disesuaikan.
Page Margin	Mendukung opsi Regular, Extra Wide Page, dan Custom.

Pada bagian Dashboard Background, konfigurasikan parameter berikut.

Chart configuration item	Deskripsi
Top Image dan Bottom Image	Saat memilih gambar, Anda dapat memilih Existing Images atau Custom Images. Catatan Saat memilih custom image, Anda dapat mengunggah gambar lokal atau mengunggah melalui tautan gambar target.

Pada bagian Dashboard Widgets, konfigurasikan parameter berikut.

Chart configuration item		Deskripsi Item Konfigurasi
Title	Text	Atur ukuran font dan penyelarasan judul grafik.
	Line Separator	Atur warna dan lebar garis pemisah judul.
	Custom Title Background	Pilih opsi ini untuk menyesuaikan latar belakang judul agar lebih sesuai dengan tema keseluruhan laporan. Item konfigurasi sebagai berikut. Background color: Pilih warna isian untuk latar belakang judul. Opsi yang tersedia: Solid color dan Gradient. Overlay background image: Pilih opsi ini untuk menambahkan gambar overlay pada latar belakang judul. Anda dapat menggunakan material latar belakang default yang disediakan sistem 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. Opsi yang tersedia: Inside chart dan Above chart. Apply title background settings to charts within tabs: Tentukan apakah pengaturan latar belakang judul diterapkan ke grafik dalam tab. Jika Anda memilih opsi ini, semua grafik dalam komponen tab akan mewarisi pengaturan yang ada untuk warna latar belakang, gambar overlay, dan posisi area judul. Saat Anda mengaktifkan pengaturan Title Background Configuration Applies to Charts in Tabs dalam skenario di mana tab bersarang di dalam tab, hanya judul tab utama yang mewarisi gaya tersebut. Judul sub-tab tetap tidak berubah.
	Status Icon	Anda dapat mengatur Status Icon agar ditampilkan saat diarahkan (hover) atau selalu ditampilkan, serta mengatur warna Status Icon.
	Hide More Operations Entry in Preview Mode	Setelah mencentang item konfigurasi ini, entri More Operations akan disembunyikan dalam mode pratinjau.
Background Style	Fill	Atur apakah warna isian latar belakang ditampilkan.
	Overlay Background Image	Tambahkan material gambar atau gambar kustom ke latar belakang grafik.
	Border	Atur apakah border latar belakang ditampilkan dan warna bordernya.
	Show Shadow	Atur apakah bayangan latar belakang ditampilkan.
Empty Data Style	Text Content	Mendukung penyesuaian prompt teks untuk data kosong, prompt default: Data returned is empty.
	Icon Style	Mendukung penyesuaian gaya ikon data kosong. Catatan Saat memilih Custom Image, Anda dapat mengunggah gambar lokal atau mengunggah melalui tautan gambar target.
	Jump Link	Setelah mengonfigurasi tautan lompatan, mengklik ikon atau teks akan mengarahkan ke alamat tautan tersebut.

Pada bagian Common Content Style, konfigurasikan parameter berikut.

Chart configuration item		Deskripsi Item Konfigurasi
Graph Style	Axis Title	Atur ukuran font, gaya warna, dan lainnya untuk judul sumbu.
	Axis Label	Atur ukuran font, gaya warna, dan lainnya untuk label sumbu.
	Data Label	Atur ukuran font, gaya warna, dan lainnya untuk label data.
	Tooltip	Atur ukuran font, gaya warna, dan lainnya untuk tooltip.
	Legend	Atur ukuran font, gaya warna, dan lainnya untuk legenda.
Table Style	Style Settings	Anda dapat mengatur gaya di sini, mendukung empat gaya: Zebra Stripes, Wireframe, Simplified, Minimalist.
	Main Color Scheme	Anda dapat mengatur skema warna utama di sini, mendukung skema warna tema, abu-abu, dan skema warna kustom.
	Table Header	Atur ukuran font, warna, dan lainnya untuk header tabel.
	Content	Atur ukuran font, warna, dan lainnya untuk konten.

Pada bagian TAB Widget, konfigurasikan parameter berikut.

Icon Configuration Item	Deskripsi
TAB Selected Style	Anda dapat mengatur gaya TAB terpilih di sini, mendukung gaya garis bawah, garis pemisah, dan blok terpilih.
Tab Label Style	Anda dapat mengatur ukuran font label tab, gaya keadaan default, dan gaya keadaan terpilih di sini.
Show TAB Internal Visualization Card Border	Atur apakah border kartu visualisasi di dalam TAB ditampilkan, mendukung pemilihan warna.
Custom spacing for components in a tab	Pilih opsi ini untuk menentukan nilai kustom untuk jarak antar komponen dalam sebuah tab. Jika opsi ini tidak dipilih, jarak ditentukan oleh konfigurasi jarak baris dan kolom dasbor. Catatan Nilai pitch yang valid adalah -32 px di PC dan rentang 0 hingga 20 px di perangkat mobile.

Pada bagian Query Control Area, konfigurasikan parameter berikut.

Icon configuration item	Deskripsi
Border	Atur apakah query control border ditampilkan, mendukung pemilihan warna.
Interactive Button	Mendukung pengaturan warna interactive button.
Button Border Radius	Mendukung pengaturan button border radius.
Condition Spacing	Mendukung pengaturan condition spacing.
Condition Name	Mendukung pengaturan gaya teks untuk condition name.
Selection Box Style	Mendukung pengaturan selection box style.
Background Color	Mendukung pengaturan background color kotak seleksi.
Border	Mendukung pengaturan ketebalan dan warna border kotak seleksi.
Border Radius	Mendukung pengaturan border radius kotak seleksi.
Text	Mendukung pengaturan warna text dan ukuran font kotak seleksi.

Catatan

Item konfigurasi di Query Control Area berlaku untuk semua kontrol global. Namun, jika suatu query control individual memiliki konfigurasi gaya kustom, konfigurasi di sini tidak akan berlaku. Sebagai contoh, jika selection box style di Query Control Area diatur ke fill, tetapi query control A memiliki selection box style yang diatur ke wireframe dalam pengaturan gayanya, maka selection box style untuk query control A akan tetap wireframe, dan item konfigurasi selection box style di Query Control Area tidak akan diterapkan pada query control A.

Setelah menyelesaikan konfigurasi, klik Save.