@operato/scene-chartjs 7.0.9 → 7.3.4

package/helps/scene/component/chartjs.ms.md

@@ -0,0 +1,365 @@
+# **Carta**
+
+## 1. Umum
+
+### 1.1. Ciri-ciri Umum
+
+- Tema - Tukar tema carta. Menyokong
+
+'light' dan 'dark'
+
+- Legenda - Paparkan legenda carta.
+- Kedudukan - Boleh diletakkan di empat arah: atas (top), bawah (bottom), kiri (left), kanan (right).
+- Paksi Dua - Pilihan untuk mewakili paksi Y sebagai dua paksi (kiri dan kanan). Apabila dipilih, paksi Y sekunder dan opsinya akan dipaparkan.
+
+### 1.2. Paksi X
+
+- Rujukan Data - Nama medan data yang akan diwakili pada carta. Masukkan nama medan yang akan dipaparkan pada paksi X. Sebagai contoh, 'Date' untuk data di bawah.  
+  ![Tema carta-bar][chart-bar-01]
+- Tajuk - Masukkan tajuk (label) yang diingini untuk paksi X
+- Garis Grid - Pilihan untuk memaparkan garis grid menegak
+  ![Grid Paksi X][chart-bar-08]
+- Tanda Tera - Pilihan untuk memaparkan tanda tera pada paksi X
+
+### 1.3. Paksi Y
+
+- Tajuk - Masukkan tajuk (label) yang diingini untuk paksi Y
+- Nilai Min Automatik - Pilihan untuk memilih nilai minimum secara automatik dan langkah untuk pengiraan tanda tera
+- Nilai Min - Tetapkan nilai minimum tanda tera apabila pilihan automatik dimatikan.
+- Nilai Max Automatik - Pilihan untuk memilih nilai maksimum secara automatik dan langkah untuk pengiraan tanda tera
+- Nilai Max - Tetapkan nilai maksimum tanda tera apabila pilihan automatik dimatikan.
+- Langkah - Tetapkan selang tanda tera
+- Garis Grid - Pilihan untuk memaparkan garis grid mendatar
+  ![Grid Paksi Y][chart-bar-12]
+- Tanda Tera - Pilihan untuk memaparkan tanda tera pada paksi Y
+
+---
+
+## 2. Carta Campuran (Bar Tegak/Baris)
+
+- Carta yang mencampurkan representasi data dalam bentuk bar dan baris. **(Ciri-ciri carta campuran adalah sama seperti carta bar dan baris.)**
+- Boleh mewakili data sebagai bar, baris, atau campuran keduanya. Jika terdapat banyak siri (medan), ia boleh dipaparkan sebagai bar selari atau bar bertindih.
+  ![Jenis carta-campuran][chart-mix-02]
+
+  [chart-mix-02]: ../images/chart-mix-02.png
+
+### 2.1. Siri
+
+- Gunakan butang "+" untuk menambah beberapa siri pada data.
+- **Umum**
+  - Rujukan Data - Definisikan nama medan data yang akan diwakili pada paksi Y untuk setiap siri. Sebagai contoh, 'Good' dan 'Bad' untuk data di bawah.  
+    ![Data Refer][chart-bar-01]
+  - Jenis - Definisikan sama ada siri akan diwakili sebagai carta baris atau bar.
+  - Label - Nama legenda
+  - Warna - Tetapkan warna siri pada carta
+  - Kumpulan Pengumpulan - Mengumpulkan nilai siri yang termasuk dalam kumpulan yang sama dan memaparkannya dalam graf.
+    ![Kumpulan Pengumpulan][chart-bar-02]
+  - Paksi Sasaran - Jika paksi dua digunakan, medan tetapan paksi sasaran akan muncul, menunjukkan paksi (tanda tera paksi) yang dirujuk oleh siri.
+    ![Paksi Sasaran][chart-bar-03]
+  - Format Nilai - Boleh menetapkan format nombor bagi nilai yang dipaparkan.
+  - Awalan - Karakter yang digunakan sebagai awalan semasa memaparkan nilai (contoh: data: 100, awalan: $ => hasil: $100)
+  - Akhiran - Karakter yang digunakan sebagai akhiran semasa memaparkan nilai (contoh: data: 100, akhiran: RM => hasil: 100RM)
+  - Paparan Nilai - Tentukan sama ada untuk memaparkan data siri pada skrin atau tidak.
+    Apabila paparan nilai dipilih, item berikut akan muncul.
+    - Warna Fon - Tetapkan warna label siri
+    - Saiz - Tetapkan saiz fon label siri
+    - Kedudukan - Tetapkan kedudukan label siri
+    - Ofset - Tetapkan kedudukan relatif label siri
+    - Putaran - Tetapkan sudut putaran label siri
+- **Untuk jenis line**
+  - Ketegangan - Menggunakan garis lurus (bersegi) atau garis licin (smooth)
+  - Lebar Sempadan - Tetapkan ketebalan garis
+  - Bentuk Titik - Definisikan bentuk titik pada setiap puncak garis
+  - Saiz Titik - Definisikan saiz titik pada setiap puncak garis
+  - Pengisian - Mengisi ruang di bawah garis dengan warna ciri umum
+
+### 2.2. Paksi X
+
+- Umum - Sama seperti yang ditakrifkan dalam [Ciri-ciri Umum](#1.2.-Paksi-X)
+- Jarak Bar - Jarak antara bar, mempengaruhi saiz bar
+- Jarak Tanda Tera - Jarak antara tanda tera, mempengaruhi saiz bar
+
+### 2.3. Paksi Y
+
+- Sama seperti yang ditakrifkan dalam [Ciri-ciri Umum](#1.3.-Paksi-Y)
+
+### 2.4. Paksi Y Sekunder (Dipaparkan apabila paksi dua dipilih)
+
+- Tetapan adalah sama seperti tetapan paksi Y.
+
+[chart-bar-01]: ../images/chart-bar-01.png
+[chart-bar-02]: ../images/chart-bar-02.png
+[chart-bar-03]: ../images/chart-bar-03.png
+[chart-bar-08]: ../images/chart-bar-08.png
+[chart-bar-12]: ../images/chart-bar-12.png
+
+---
+
+## 3. Carta Bar Mendatar
+
+Carta yang mewakili data dalam bentuk bar mendatar. Boleh dipaparkan sebagai bar selari atau bar bertindih jika terdapat banyak medan.
+
+### 3.1. Ciri-ciri Umum
+
+- Tema - Tukar tema carta. Menyokong 'light' dan 'dark'
+- Legenda - Paparkan legenda carta.
+- Kedudukan - Boleh diletakkan di empat arah: atas (top), bawah (bottom), kiri (left), kanan (right).
+- Paksi Dua - Pilihan untuk mewakili paksi Y sebagai dua paksi (kiri dan kanan). Apabila dipilih, paksi Y sekunder dan opsinya akan dipaparkan.
+
+### 3.2. Siri
+
+- Gunakan butang "+" untuk menambah beberapa siri pada data.
+- **Umum**
+  - Rujukan Data - Definisikan nama medan data yang akan diwakili pada paksi Y untuk setiap siri. Sebagai contoh, 'Good' dan 'Bad' untuk data di bawah.
+  - Label - Nama legenda
+  - Warna - Tetapkan warna siri pada carta
+  - Kumpulan Pengumpulan - Mengumpulkan nilai siri yang termasuk dalam kumpulan yang sama dan memaparkannya dalam graf.
+  - Paksi Sasaran - Jika paksi dua digunakan, medan tetapan paksi sasaran akan muncul, menunjukkan paksi (tanda tera paksi) yang dirujuk oleh siri.
+  - Format Nilai - Boleh menetapkan format nombor bagi nilai yang dipaparkan.
+  - Awalan - Karakter yang digunakan sebagai awalan semasa memaparkan nilai (contoh: data: 100, awalan: $ => hasil: $100)
+  - Akhiran - Karakter yang digunakan sebagai akhiran semasa memaparkan nilai (contoh: data: 100, akhiran: RM => hasil: 100RM)
+  - Paparan Nilai - Tentukan sama ada untuk memaparkan data siri pada skrin atau tidak.
+    Apabila paparan nilai dipilih, item berikut akan muncul.
+    - Warna Fon - Tetapkan warna label siri
+    - Saiz - Tetapkan saiz fon label siri
+    - Kedudukan - Tetapkan kedudukan label siri
+    - Ofset - Tetapkan kedudukan relatif label siri
+    - Putaran - Tetapkan sudut putaran label siri
+
+### 3.3. Paksi X
+
+- Rujukan Data - Nama medan data yang akan diwakili pada carta. Masukkan nama medan yang akan dipaparkan pada paksi X. Sebagai contoh, 'Date' untuk data di bawah.
+- Tajuk - Masukkan tajuk (label) yang diingini untuk paksi X
+- Garis Grid - Pilihan untuk memaparkan garis grid menegak
+- Tanda Tera - Pilihan untuk memaparkan tanda tera pada paksi X
+
+### 3.4. Paksi Y
+
+- Tajuk - Masukkan tajuk (label) yang diingini untuk paksi Y
+- Nilai Min Automatik - Pilihan untuk memilih nilai minimum secara automatik dan langkah untuk pengiraan tanda tera
+- Nilai Min - Tetapkan nilai minimum tanda tera apabila pilihan automatik dimatikan.
+- Nilai Max Automatik - Pilihan untuk memilih nilai maksimum secara automatik dan langkah untuk pengiraan tanda tera
+- Nilai Max - Tetapkan nilai maksimum tanda tera apabila pilihan automatik dimatikan.
+- Langkah - Tetapkan selang tanda tera
+- Garis Grid - Pilihan untuk memaparkan garis grid mendatar
+- Tanda Tera - Pilihan untuk memaparkan tanda tera pada paksi Y
+
+[chart-horizontal-bar-01]: ../
+
+images/chart-horizontal-bar-01.png
+
+---
+
+## 4. Carta Garisan
+
+Carta yang mewakili data dalam bentuk garis. (Untuk ciri-ciri bertindih, rujuk carta bar)
+
+### 4.1. Ciri-ciri
+
+- Tema - Tukar tema carta. Menyokong 'light' dan 'dark'
+- Legenda - Paparkan legenda carta.
+- Kedudukan - Boleh diletakkan di empat arah: atas (top), bawah (bottom), kiri (left), kanan (right).
+- Paksi Dua - Pilihan untuk mewakili paksi Y sebagai dua paksi (kiri dan kanan). Apabila dipilih, paksi Y sekunder dan opsinya akan dipaparkan.
+
+### 4.2. Siri
+
+- Gunakan butang "+" untuk menambah beberapa siri pada data.
+- **Umum**
+  - Rujukan Data - Definisikan nama medan data yang akan diwakili pada paksi Y untuk setiap siri. Sebagai contoh, 'Good' dan 'Bad' untuk data di bawah.  
+    ![Data Refer][chart-line-01]
+  - Ketegangan - Menggunakan garis lurus (bersegi) atau garis licin (smooth)
+  - Lebar Sempadan - Tetapkan ketebalan garis
+  - Label - Nama legenda
+  - Warna - Tetapkan warna siri pada carta
+  - Bentuk Titik - Definisikan bentuk titik pada setiap puncak garis
+  - Saiz Titik - Definisikan saiz titik pada setiap puncak garis
+  - Kumpulan Pengumpulan - Mengumpulkan nilai siri yang termasuk dalam kumpulan yang sama dan memaparkannya dalam graf.
+  - Pengisian - Mengisi ruang di bawah garis dengan warna ciri umum
+  - Paksi Sasaran - Jika paksi dua digunakan, medan tetapan paksi sasaran akan muncul, menunjukkan paksi (tanda tera paksi) yang dirujuk oleh siri.
+  - Format Nilai - Boleh menetapkan format nombor bagi nilai yang dipaparkan.
+  - Awalan - Karakter yang digunakan sebagai awalan semasa memaparkan nilai (contoh: data: 100, awalan: $ => hasil: $100)
+  - Akhiran - Karakter yang digunakan sebagai akhiran semasa memaparkan nilai (contoh: data: 100, akhiran: RM => hasil: 100RM)
+  - Paparan Nilai - Tentukan sama ada untuk memaparkan data siri pada skrin atau tidak.
+    Apabila paparan nilai dipilih, item berikut akan muncul.
+    - Warna Fon - Tetapkan warna label siri
+    - Saiz - Tetapkan saiz fon label siri
+    - Kedudukan - Tetapkan kedudukan label siri
+    - Ofset - Tetapkan kedudukan relatif label siri
+    - Putaran - Tetapkan sudut putaran label siri
+
+### 4.3. Paksi X
+
+- Rujukan Data - Nama medan data yang akan diwakili pada carta. Masukkan nama medan yang akan dipaparkan pada paksi X. Sebagai contoh, 'Date' untuk data di bawah.
+- Tajuk - Masukkan tajuk (label) yang diingini untuk paksi X
+- Garis Grid - Pilihan untuk memaparkan garis grid menegak
+- Tanda Tera - Pilihan untuk memaparkan tanda tera pada paksi X
+
+### 4.4. Paksi Y
+
+- Tajuk - Masukkan tajuk (label) yang diingini untuk paksi Y
+- Nilai Min Automatik - Pilihan untuk memilih nilai minimum secara automatik dan langkah untuk pengiraan tanda tera
+- Nilai Min - Tetapkan nilai minimum tanda tera apabila pilihan automatik dimatikan.
+- Nilai Max Automatik - Pilihan untuk memilih nilai maksimum secara automatik dan langkah untuk pengiraan tanda tera
+- Nilai Max - Tetapkan nilai maksimum tanda tera apabila pilihan automatik dimatikan.
+- Langkah - Tetapkan selang tanda tera
+- Garis Grid - Pilihan untuk memaparkan garis grid mendatar
+- Tanda Tera - Pilihan untuk memaparkan tanda tera pada paksi Y
+
+[chart-line-01]: ../images/chart-line-01.png
+
+---
+
+## 5. Carta Radar
+
+Carta yang mewakili data dalam bentuk radar, memaparkan data carta bulat dengan beberapa garis.
+
+### 5.1. Ciri-ciri Umum
+
+- Tema - Tukar tema carta. Menyokong 'light' dan 'dark'
+- Legenda - Paparkan legenda carta.
+- Kedudukan - Boleh diletakkan di empat arah: atas (top), bawah (bottom), kiri (left), kanan (right).
+
+### 5.2. Siri
+
+- Gunakan butang "+" untuk menambah beberapa siri pada data.
+- **Umum**
+  - Rujukan Data - Definisikan nama medan data yang akan diwakili pada paksi Y untuk setiap siri. Sebagai contoh, 'Good' dan 'Bad' untuk data di bawah.  
+    ![Data Refer][chart-radar-01]
+  - Label - Nama legenda
+  - Warna - Tetapkan warna siri pada carta
+  - Kumpulan Pengumpulan - Mengumpulkan nilai siri yang termasuk dalam kumpulan yang sama dan memaparkannya dalam graf.
+  - Format Nilai - Boleh menetapkan format nombor bagi nilai yang dipaparkan.
+  - Awalan - Karakter yang digunakan sebagai awalan semasa memaparkan nilai (contoh: data: 100, awalan: $ => hasil: $100)
+  - Akhiran - Karakter yang digunakan sebagai akhiran semasa memaparkan nilai (contoh: data: 100, akhiran: RM => hasil: 100RM)
+  - Paparan Nilai - Tentukan sama ada untuk memaparkan data siri pada skrin atau tidak.
+    Apabila paparan nilai dipilih, item berikut akan muncul.
+    - Warna Fon - Tetapkan warna label siri
+    - Saiz - Tetapkan saiz fon label siri
+    - Kedudukan - Tetapkan kedudukan label siri
+    - Ofset - Tetapkan kedudukan relatif label siri
+    - Putaran - Tetapkan sudut putaran label siri
+
+### 5.3. Paksi
+
+- Rujukan Data - Definisikan nama medan data yang akan diwakili pada paksi Y untuk setiap siri. Sebagai contoh, 'line' untuk data di bawah.
+  ![Data Refer][chart-radar-01]
+
+[chart-radar-01]: ../images/chart-radar-01.png
+
+---
+
+## 6. Carta Polar
+
+Carta yang mewakili data dalam bentuk koordinat polar.
+
+### 6.1. Ciri-ciri Umum
+
+- Tema - Tukar tema carta. Menyokong 'light' dan 'dark'
+- Legenda - Paparkan legenda carta.
+- Kedudukan - Boleh diletakkan di empat arah: atas (top), bawah (bottom), kiri (left), kanan (right).
+
+### 6.2. Siri
+
+- Gunakan butang "+" untuk menambah beberapa siri pada data.
+- **Umum**
+  - Rujukan Data - Definisikan nama medan data yang akan diwakili pada paksi Y untuk setiap siri. Sebagai contoh, 'Good' untuk data di bawah.  
+    ![Data Refer][chart-polar-01]
+  - Label - Nama legenda
+  - Warna - Tetapkan warna siri pada carta
+  - Format Nilai - Boleh menetapkan format nombor bagi nilai yang dipaparkan.
+  - Awalan - Karakter yang digunakan sebagai awalan semasa memaparkan nilai (contoh: data: 100, awalan: $ => hasil: $100)
+  - Akhiran - Karakter yang digunakan sebagai akhiran semasa memaparkan nilai (contoh: data: 100, akhiran: RM => hasil: 100RM)
+  - Paparan Nilai - Tentukan sama ada untuk memaparkan data siri pada skrin atau tidak.
+    Apabila paparan nilai dipilih, item berikut akan muncul.
+    - Warna Fon - Tetapkan warna label siri
+    - Saiz - Tetapkan saiz fon label siri
+    - Kedudukan - Tetapkan kedudukan label siri
+    - Ofset - Tetapkan kedudukan relatif label siri
+    - Putaran - Tetapkan sudut putaran label siri
+
+### 6.3. Paksi
+
+- Rujukan Data - Definisikan nama medan data yang akan diwakili pada paksi Y untuk setiap siri. Sebagai contoh, 'hobby' untuk data di bawah.
+  ![Data Refer][chart-polar-01]
+
+[chart-polar-01]: ../images/chart-polar-01.png
+
+---
+
+## 7. Carta Pai
+
+Carta yang mewakili data dalam bentuk bulat.
+
+### 7.1. Ciri-ciri Umum
+
+- Tema - Tukar tema carta. Menyokong 'light' dan 'dark'
+- Legenda - Paparkan legenda carta.
+- Kedudukan - Boleh diletakkan di empat arah: atas (top), bawah (bottom), kiri (left), kanan (right).
+
+### 7.2. Siri
+
+- Gunakan butang "+" untuk menambah beberapa siri pada data.
+- **Umum**
+
+  - Rujukan Data - Definisikan nama medan data yang akan diwakili pada paksi Y untuk setiap siri. Sebagai contoh, 'Good' untuk data di bawah.  
+    ![Data Refer][chart-pie-01]
+  - Label - Nama legenda
+
+- Warna - Tetapkan warna siri pada carta
+- Format Nilai - Boleh menetapkan format nombor bagi nilai yang dipaparkan.
+- Awalan - Karakter yang digunakan sebagai awalan semasa memaparkan nilai (contoh: data: 100, awalan: $ => hasil: $100)
+- Akhiran - Karakter yang digunakan sebagai akhiran semasa memaparkan nilai (contoh: data: 100, akhiran: RM => hasil: 100RM)
+- Paparan Nilai - Tentukan sama ada untuk memaparkan data siri pada skrin atau tidak.
+  Apabila paparan nilai dipilih, item berikut akan muncul.
+  - Warna Fon - Tetapkan warna label siri
+  - Saiz - Tetapkan saiz fon label siri
+  - Kedudukan - Tetapkan kedudukan label siri
+  - Ofset - Tetapkan kedudukan relatif label siri
+  - Putaran - Tetapkan sudut putaran label siri
+
+### 7.3. Paksi
+
+- Rujukan Data - Definisikan nama medan data yang akan diwakili pada paksi Y untuk setiap siri. Sebagai contoh, 'line' untuk data di bawah.
+  ![Data Refer][chart-pie-01]
+
+[chart-pie-01]: ../images/chart-pie-01.png
+
+---
+
+## 8. Carta Donat
+
+![Komponen-Chart-doughnut][chart-doughnut-01]
+
+Carta yang mewakili data dalam bentuk donat.
+
+### 8.1. Ciri-ciri Umum
+
+- Tema - Tukar tema carta. Menyokong 'light' dan 'dark'
+- Legenda - Paparkan legenda carta.
+- Kedudukan - Boleh diletakkan di empat arah: atas (top), bawah (bottom), kiri (left), kanan (right).
+
+### 8.2. Siri
+
+- Gunakan butang "+" untuk menambah beberapa siri pada data.
+- **Umum**
+  - Rujukan Data - Definisikan nama medan data yang akan diwakili pada paksi Y untuk setiap siri. Sebagai contoh, 'Good' untuk data di bawah.  
+    ![Data Refer][chart-doughnut-01]
+  - Label - Nama legenda
+  - Warna - Tetapkan warna siri pada carta
+  - Format Nilai - Boleh menetapkan format nombor bagi nilai yang dipaparkan.
+  - Awalan - Karakter yang digunakan sebagai awalan semasa memaparkan nilai (contoh: data: 100, awalan: $ => hasil: $100)
+  - Akhiran - Karakter yang digunakan sebagai akhiran semasa memaparkan nilai (contoh: data: 100, akhiran: RM => hasil: 100RM)
+  - Paparan Nilai - Tentukan sama ada untuk memaparkan data siri pada skrin atau tidak.
+    Apabila paparan nilai dipilih, item berikut akan muncul.
+    - Warna Fon - Tetapkan warna label siri
+    - Saiz - Tetapkan saiz fon label siri
+    - Kedudukan - Tetapkan kedudukan label siri
+    - Ofset - Tetapkan kedudukan relatif label siri
+    - Putaran - Tetapkan sudut putaran label siri
+
+### 8.3. Paksi
+
+- Rujukan Data - Definisikan nama medan data yang akan diwakili pada paksi Y untuk setiap siri. Sebagai contoh, 'line' untuk data di bawah.
+  ![Data Refer][chart-doughnut-01]
+
+[chart-doughnut-01]: ../images/chart-doughnut-01.png