Buat Dasbor Responsif Dengan Bahan Sudut Dan ng2-Charts

Membuat dasbor dari awal seringkali cukup rumit. Anda harus membuat alat untuk mengumpulkan data tentang item yang menarik. Setelah dikumpulkan, data ini harus disajikan dengan cara yang mudah dipahami dan bermakna bagi pengguna Anda. Ini melibatkan perencanaan yang rumit tentang data apa yang akan dimasukkan dan bagaimana menampilkannya secara efektif. Setelah Anda memiliki rencana, menerapkan desain adalah tugas besar terutama karena melibatkan membangun banyak komponen.

Dengan Angular Material dan ng2-charts, Anda dapat memanfaatkan skema untuk mengurangi upaya dan waktu yang mungkin Anda habiskan untuk membangun dasbor. Angular Material dikirimkan dengan sejumlah skema yang dapat Anda gunakan untuk membuat dasbor. Demikian pula, ng2-charts menyediakan skema untuk menghasilkan beberapa komponen bagan. Dalam artikel ini, saya akan mengilustrasikan cara menggunakan ng2-charts dan Angular Material untuk menyiapkan dasbor dengan cukup cepat.

Sebuah contoh

Untuk mengilustrasikan cara membuat dashboard, kita akan mengambil contoh toko online yang menjual barang-barang kulit seperti tas, dompet, gantungan kunci, dan lain sebagainya. Pemilik toko ingin melacak informasi seperti dari mana pelanggan datang ke toko online mereka, bagaimana produk mereka dijual, bagaimana sumber lalu lintas berhubungan dengan penjualan, dan lain-lain.

Kami akan membuat dasbor untuk menampilkan informasi ini dan membantu pemilik toko menganalisisnya. Dasbor akan berisi empat kartu ringkasan kecil, empat jenis bagan yang berbeda, dan tabel yang mencantumkan pesanan terbaru yang dibuat. Keempat kartu ringkasan akan menampilkan informasi seperti total pendapatan dari penjualan, nilai pesanan rata-rata, jumlah pesanan, dan jumlah pelanggan yang kembali. Grafik akan menampilkan jumlah unit yang terjual untuk setiap produk, penjualan berdasarkan sumber lalu lintas, sesi toko online dari waktu ke waktu, dan penjualan selama seminggu.

Prasyarat

Untuk mengikuti, Anda harus menginstal Angular CLI. Jika Anda belum menginstalnya, Anda dapat mengetahui cara mendapatkannya di cli.angular.io. Jika Anda tidak memulai dari proyek Angular yang sudah ada sebelumnya, Anda perlu membuatnya dengan menjalankan ng new <your project name> . Misalnya, untuk membuat panel admin untuk toko yang disebutkan di atas, kita akan menjalankan:

 ng new store-admin-panel

Proyek Anda juga perlu memiliki rute yang dikonfigurasi untuk itu. Jika Anda memulai dari aplikasi baru, pilih ya saat ditanya apakah akan menambahkan modul Perutean Sudut selama penyiapan proyek Anda di atas.

Tambahkan Bahan Sudut Dan Bagan Ng2 Ke Proyek Anda

Angular Material dikirimkan dengan berbagai skema untuk menghasilkan berbagai komponen yang berguna seperti buku alamat, pohon, tabel, navigasi, dan sebagainya. Untuk menambahkan Bahan Sudut ke proyek Anda, jalankan:

 ng add @angular/material

Pilih tema dari opsi yang disediakan di petunjuk berikutnya. Selanjutnya, Anda akan diminta untuk memilih apakah akan menambahkan gaya tipografi Material Sudut dan animasi browser. Anda tidak membutuhkan ini dan hanya bisa menjawab tidak.

Selanjutnya, Anda harus menginstal ng2-charts. ng2-charts membutuhkan charts.js sebagai ketergantungan. Untuk menginstal ng2-chart, jalankan:

 npm install ng2-charts --save

Kemudian instal charts.js:

 npm install chart.js --save

Untuk mengakses bagan, tambahkan ChartsModule ke impor AppModule .

 import { ChartsModule } from 'ng2-charts'; @NgModule({ imports: [ … ChartsModule, … ] })

Terakhir, instal skema ng2-charts sebagai dependensi dev karena skema tersebut tidak dikirimkan bersama ng2-charts secara default.

 npm install --save-dev ng2-charts-schematics

Menghasilkan Komponen Navigasi

Pertama, kita perlu menambahkan komponen navigasi untuk membantu pengguna bermanuver melalui aplikasi dengan nyaman. Navigasi harus berisi tautan ke dasbor dan halaman lain yang akan menjadi bagian dari panel admin. Bahan sudut menyediakan skema yang menghasilkan komponen navigasi. Kami akan menamai komponen ini nav . Menambahkan navigasi samping ke aplikasi dilakukan dengan menjalankan:

 ng generate @angular/material:navigation nav

Untuk menautkan rute lain di navigasi, gunakan arahan routerLink dan ubah nama halaman di bilah alat tergantung pada rute mana pengguna berada.

 // nav.component.ts ... menuItems = ['dashboard', 'sales', 'orders', 'customers', 'products'];

 <!--nav.component.html--> ... <mat-nav-list> <a *ngFor="let item of menuItems" mat-list-item [routerLink]="'/'+item"> {{item | titlecase}} </a> ...

Untuk melihat komponen ini, tambahkan ke app.component.html .

 <!--app.component.html--> <app-nav></app-nav>

Seperti inilah tampilan NavComponent .

Karena nav akan ditampilkan bersama komponen lain, menambahkan router-outlet ke dalamnya akan membantu beralih di antara komponen lain yang berbeda. Pada template nav.component.html , tepat setelah penutup </mat-toolbar> , ganti komentar <!-- Add Content Here --> dengan <router-outlet></router-outlet> .

 <!--nav.component.html--> <mat-sidenav-container> ... <mat-sidenav-content> <mat-toolbar> ... </mat-toolbar> <router-outlet></router-outlet> </mat-sidenav-content> </mat-sidenav-container>

Pada tangkapan layar yang mengikuti artikel ini, komponen navigasi ini akan dihilangkan untuk lebih menyorot dasbor yang akan kita hasilkan demi tutorial. Jika Anda mengikuti saat membuat dasbor ini, navigasi akan tetap muncul seperti gambar di atas di browser Anda dengan dasbor di dalamnya.

Buat Dasbor

Bagian terpenting dari dashboard adalah tata letaknya. Itu perlu menampung semua komponen yang disebutkan sebelumnya dan responsif ketika ditampilkan di perangkat yang berbeda. Untuk menghasilkan tata letak dasbor, Anda harus menjalankan skema @angular/material:dashboard . Ini akan menghasilkan komponen dasbor yang responsif. Berikan nama pilihan untuk dasbor Anda ke skema. Dalam contoh ini, beri nama dash .

 ng generate @angular/material:dashboard dash

Untuk melihat dasbor yang baru dibuat dalam komponen nav, tambahkan rute untuknya ke router.

 // app-routing.module.ts import { DashComponent } from './dash/dash.component'; const routes: Routes = [{ path: 'dashboard', component: DashComponent }]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] })

Setelah selesai, untuk melihat hasilnya, jalankan npm start dan buka localhost:4200/dashboard . Anda harus melihat ini:

Skema menghasilkan empat kartu dalam template dan menampilkannya dalam kotak responsif. CDK Bahan Sudut menggunakan paket Layout untuk menata kisi kartu responsif ini. Utilitas BreakpointObserver dari paket Layout menilai kueri media dan membuat perubahan UI berdasarkan kueri tersebut. Ada berbagai breakpoint yang tersedia tetapi dalam komponen yang dihasilkan, hanya dua kategori yang dipenuhi. Breakpoints.Handset dan kueri lain yang tidak cocok. Paket Layout menetapkan 14 status breakpoint yang dapat Anda gunakan untuk menyesuaikan responsivitas dasbor Anda.

 // dashboard.component.js ... cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe( map(({ matches }) => { if (matches) { ... } ... }) );

Kembali ke dasbor, karena empat kartu ringkasan, empat bagan, dan sebuah tabel akan ada di dasbor, kita membutuhkan total sembilan kartu. Kecocokan Breakpoints.Handset dan Breakpoints.Tablet akan ditampilkan dalam kisi satu kolom di mana:

• Empat kartu ringkasan akan mencakup satu baris.
• Grafik akan mencakup dua baris.
• Tabel akan mencakup empat baris.

Kecocokan Non- Breakpoints.Handset dan non- Breakpoints.Tablet akan ditampilkan dalam empat kolom di mana:

• Empat kartu ringkasan akan mencakup satu baris dan satu kolom.
• Bagan akan mencakup dua baris dan dua kolom.
• Tabel akan mencakup empat baris dan empat kolom.

Ini akan terlihat seperti tangkapan layar di bawah dalam kecocokan non- Breakpoints.Handset dan non- Breakpoints.Tablet . Pada pertandingan Breakpoints.Handset dan Breakpoints.Tablet , semuanya hanya akan ditampilkan dalam satu kolom.

Buat Komponen Kartu

Di komponen dasbor, semua kartu dihasilkan melalui iterasi. Untuk mencegah pengulangan, saat menambahkan semua komponen baru, kami akan membuat komponen kartu yang dapat digunakan kembali. Komponen kartu akan menerima judul sebagai masukan dan menggunakan ng-content lainnya secara dinamis. Untuk membuat komponen kartu, jalankan:

 ng gc card -m app --style css

Dari templat komponen dasbor, kami hanya akan mengambil markup yang disertakan di dalam <mat-card> dan menempatkannya di templat kartu:

 <!--card.component.html--> <mat-card class="dashboard-card"> <mat-card-header> <mat-card-title> {{title}} <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu"> <mat-icon>more_vert</mat-icon> </button> <mat-menu #menu="matMenu" xPosition="before"> <button mat-menu-item>Expand</button> <button mat-menu-item>Remove</button> </mat-menu> </mat-card-title> </mat-card-header> <mat-card-content class="dashboard-card-content"> <ng-content></ng-content> </mat-card-content> </mat-card>

Untuk menambahkan judul sebagai masukan ke kartu:

 // card.component.ts import { Component, Input } from '@angular/core'; ... export class CardComponent{ @Input() title: string; ... }

Untuk menata kartu:

 /*card.component.css*/ .more-button { position: absolute; top: 5px; right: 10px; } .dashboard-card { position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; } .dashboard-card-content { text-align: center; flex-grow: 1; display: flex; flex-direction: column; align-items: center; max-height: 100%; justify-content: center; align-items: stretch; } mat-card { display: flex; flex-direction: column; }

Menambahkan Kartu Ke Dasbor

Karena elemen dasbor akan ditambahkan satu per satu dan tidak melalui iterasi, komponen dasbor perlu dimodifikasi untuk memperhitungkan hal ini. Di dashboard.component.ts , hapus properti cards dan ganti dengan properti cardLayout sebagai gantinya. Variabel cardLayout akan menentukan jumlah kolom untuk daftar kisi materi dan berapa banyak baris dan kolom yang akan direntangkan oleh masing-masing kartu dasbor. Kecocokan kueri Breakpoints.Handset dan Breakpoints.Tablet akan ditampilkan dalam 1 kolom dan yang tidak cocok akan ditampilkan dalam 4 kolom.

 // dashboard.component.js ... cardLayout = this.breakpointObserver.observe(Breakpoints.Handset).pipe( map(({ matches }) => { if (matches) { return { columns: 1, miniCard: { cols: 1, rows: 1 }, chart: { cols: 1, rows: 2 }, table: { cols: 1, rows: 4 }, }; } return { columns: 4, miniCard: { cols: 1, rows: 1 }, chart: { cols: 2, rows: 2 }, table: { cols: 4, rows: 4 }, }; }) ); ...

Di template dash.component.html , ganti nilai colspan dan rowspan dari elemen mat-grid-tile dan properti cols dari elemen mat-grid-list .

 <!--dash.component.html--> <div class="grid-container"> <h1 class="mat-h1">Dashboard</h1> <mat-grid-list cols="{{ ( cardLayout | async )?.columns }}" rowHeight="200px"> <!--Mini Cards--> <mat-grid-tile *ngFor="let i of [1, 2, 3, 4]" [colspan]="( cardLayout | async )?.miniCard.cols" [rowspan]="( cardLayout | async )?.miniCard.rows"> <app-card title="Card {{i}}"><div>Mini Card Content Here</div></app-card> </mat-grid-tile> <!--Charts--> <mat-grid-tile *ngFor="let i of [5, 6, 7, 8]" [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows"> <app-card title="Card {{i}}"><div>Chart Content Here</div></app-card> </mat-grid-tile> <!--Table--> <mat-grid-tile [colspan]="( cardLayout | async )?.table.cols" [rowspan]="( cardLayout | async )?.table.rows"> <app-card title="Card 9"><div>Table Content Here</div></app-card> </mat-grid-tile> </mat-grid-list> </div>

Dasbor akan terlihat persis seperti tangkapan layar terbaru yang ditautkan di atas.

Menghasilkan Grafik

Empat grafik yang kita butuhkan untuk dashboard adalah:

• Bagan radar produk berdasarkan unit yang terjual.
• Diagram lingkaran penjualan menurut sumber lalu lintas.
• Bagan batang sesi toko online.
• Bagan garis penjualan sepanjang tahun.

Mirip dengan membuat dasbor, menghasilkan komponen bagan melibatkan menjalankan skema. Dengan menggunakan skema ng2-charts, buat empat grafik yang berbeda. Kami akan menempatkannya di folder bernama charts. Jalankan ng generate ng2-charts-schematics:<chart type> <chart name> .

 ng generate ng2-charts-schematics:radar charts/product-sales-chart ng generate ng2-charts-schematics:pie charts/sales-traffic-chart ng generate ng2-charts-schematics:line charts/annual-sales-chart ng generate ng2-charts-schematics:bar charts/store-sessions-chart

Setelah menjalankan perintah ini, keempat komponen bagan dihasilkan dan diisi dengan data sampel yang siap ditampilkan. Bergantung pada data yang ingin Anda tampilkan, pilih bagan yang paling sesuai dengan kebutuhan visualisasi data Anda. Untuk setiap bagan yang dihasilkan di atas, tambahkan kelas chartContainer ke div s yang menyertakan elemen canvas di templat bagan.

 <div class="chartContainer"> <canvas baseChart width="400" height="400"> ...

Selanjutnya, tambahkan gaya ini ke styles.css sehingga dapat diakses oleh semua komponen bagan.

 /*styles.css*/ ... .chartContainer canvas { max-height: 250px; width: auto; } .chartContainer{ height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }

Menambahkan Data Ke Bagan

Komponen bagan yang dihasilkan dilengkapi dengan data sampel yang sudah terpasang. Jika Anda memiliki layanan yang sudah ada sebelumnya yang menyediakan data Anda sendiri, Anda dapat menambahkan data ini dari mereka ke komponen bagan. Bagan mengambil label untuk sumbu x, data atau kumpulan data, tipe bagan, warna, legenda, serta opsi penyesuaian lainnya. Untuk memberikan data dan label ke diagram, buat layanan yang akan mengambil data dari sumber pilihan Anda dan mengembalikannya dalam bentuk yang diterima diagram. Misalnya, AnnualSalesChartComponent menerima kumpulan data dan labelnya dari metode SalesService getSalesByMonth yang mengembalikan larik penjualan untuk setiap bulan untuk tahun berjalan. Anda dapat menemukan layanan ini di sini dan data yang dikembalikan di sini. Suntikkan layanan sebagai properti pribadi ke konstruktor AnnualSalesChartComponent . Panggil metode yang mengembalikan data bagan yang diperlukan dari layanan dalam kait siklus hidup ngOnInit .

 // annual-sales-chart.component.ts import { SalesService } from 'src/app/sales/sales.service'; ... export class AnnualSalesChartComponent implements OnInit { public salesChartData: ChartDataSets[] = [ { data: [], label: 'Total Sales' }, ]; public salesChartLabels: Label[] = []; ... constructor(private salesService: SalesService) { } ngOnInit() { this.salesService.getSalesByMonth().subscribe({ next: salesItems => { salesItems.forEach(li => { this.salesChartData[0].data.push(li.revenue); this.salesChartLabels.push(li.month); }); }, ... }); } }

Menambahkan Bagan Ke Dasbor

Langkah selanjutnya melibatkan menambahkan bagan ke dasbor, di dash.component.html . Berikut tampilannya:

 <!--dash.component.html--> ... <!--Charts--> <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows"> <app-card title="Monthly Revenue"> <app-annual-sale-chart></app-annual-sale-chart> </app-card> </mat-grid-tile> <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows"> <app-card title="Product Sales"> <app-product-sales-chart></app-product-sales-chart> </app-card> </mat-grid-tile> <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows"> <app-card title="Sales by Traffic Source"> <app-sales-traffic-chart></app-sales-traffic-chart> </app-card> </mat-grid-tile> <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows"> <app-card title="Online Store Sessions by Traffic Source"> <app-store-sessions-chart></app-store-sessions-chart> </app-card> </mat-grid-tile> ...

Seperti inilah tampilan dasbor responsif yang dihasilkan.

Membuat Tabel

Kami akan menambahkan tabel pesanan untuk memberi pemilik toko gambaran umum tentang pesanan terbaru yang dilakukan dan statusnya. Untuk menghasilkan komponen tabel pesanan, jalankan skema:

 ng generate @angular/material:table orders-table

Ini akan menghasilkan komponen tabel yang akan terlihat seperti ini.

Tabel dengan banyak kolom mungkin sulit dibuat responsif untuk tampilan handset dan tablet. Saat menambahkan tabel ke kartu, buat tabel dapat digulir secara horizontal sehingga semua data dapat dilihat dengan baik dan tidak terhalang. Anda dapat melakukan ini dengan menambahkan gaya di bawah ini ke komponen tabel Anda:

 <!--table.component.html--> <div class="mat-elevation-z8 small-table"> <table mat-table class="full-width-table" matSort aria-label="Elements"> ...

 /*table.component.css*/ ... .small-table{ overflow-x: scroll !important; }

Untuk menambahkan tabel ke komponen tanda hubung:

 <!-- dashboard.component.html> ... <mat-grid-tile [colspan]="( cardLayout | async )?.table.cols" [rowspan]="( cardLayout | async )?.table.rows"> <app-card title="Latest Orders"> <app-orders-table></app-orders-table> </app-card> </mat-grid-tile> ...

Menambahkan Data Ke Tabel

Seperti halnya bagan, Anda dapat menambahkan data ke tabel dalam metode ngOnInit dari sebuah layanan. Selain itu, Anda perlu memodifikasi sumber data yang dihasilkan tabel Anda untuk menggunakan data dari layanan. Untuk memulai, masukkan layanan di konstruktor kelas tabel. Mari kita ambil contoh tabel yang mencantumkan pesanan terbaru untuk dasbor ini. Untuk mendapatkan data untuk tabel, mari OrderService di konstruktor OrdersTableComponent , ubah pernyataan tipe MatTable dari turunan tampilan tabel, dan ubah daftar kolom yang ditampilkan untuk mencerminkan antarmuka pesanan. Jika Anda tertarik dengan data yang ditambahkan ke tabel, Anda dapat menemukannya di sini. Hal terakhir melibatkan mendapatkan panjang total item data yang tersedia untuk digunakan untuk mengatur total dalam tabel <mat-paginator> .

 // orders-table.component.ts import { OrderService } from '../orders.service'; import { Order } from '../order'; ... export class OrdersTableComponent implements AfterViewInit, OnInit { ... @ViewChild(MatTable) table: MatTable ; dataLength: number; displayedColumns = [ "id", "date", "name", "status", "orderTotal", "paymentMode", ]; ... constructor(private orderService: OrderService){} ngOnInit() { this.datasource = new OrdersTableDataSource(this.orderService); this.orderService.getOrderCount().subscribe({ next: orderCount => { this.dataLength = orderCount; }, ... }); } ... } // orders-table.component.ts import { OrderService } from '../orders.service'; import { Order } from '../order'; ... export class OrdersTableComponent implements AfterViewInit, OnInit { ... @ViewChild(MatTable) table: MatTable ; dataLength: number; displayedColumns = [ "id", "date", "name", "status", "orderTotal", "paymentMode", ]; ... constructor(private orderService: OrderService){} ngOnInit() { this.datasource = new OrdersTableDataSource(this.orderService); this.orderService.getOrderCount().subscribe({ next: orderCount => { this.dataLength = orderCount; }, ... }); } ... }

Selanjutnya, kita perlu memodifikasi kelas OrdersTableDataSource untuk menerima OrderService sebagai parameter dalam konstruktornya. Kita juga harus memodifikasi metode connect dan destroy . Metode connect menghubungkan sumber data ke tabel dan memperbarui tabel saat item data baru dipancarkan dari aliran yang dikembalikannya, dalam hal ini, array pesanan yang dapat diamati. Konstanta dataMutations menggabungkan pemuatan data pertama, pagination, dan peristiwa pengurutan ke dalam satu aliran untuk dikonsumsi tabel. Pagination dan pengurutan ditangani oleh sisi server OrderService . Jadi kita perlu meneruskan offset dan ukuran halaman dari paginator dan bidang sortir aktif dan arah sortir dari properti sort ke metode getOrders dari OrderService . Metode disconnect harus digunakan untuk menutup koneksi yang dibuat dan melepaskan sumber daya yang tertahan dalam metode koneksi.

 // orders-table.datasource.ts ... export class OrdersTableDataSource extends DataSource<Order> { paginator: MatPaginator; sort: MatSort; constructor(private orderService: OrderService) { super(); } connect(): Observable<Order[]> { const dataMutations = [ of('Initial load'), this.paginator.page, this.sort.sortChange ]; return merge(...dataMutations).pipe(mergeMap(() => { return this.orderService.getOrders( this.paginator.pageIndex * this.paginator.pageSize, this.paginator.pageSize, this.sort.active, this.sort.direction ); })); } disconnect() {} }

Dalam templat tabel pesanan, sisipkan kolom baru dan ikat properti length <mat-paginator> ke properti dataLength . Untuk kolom status, gunakan elemen <mat-chip> untuk visualisasi status pesanan yang lebih baik. Untuk memiliki akses ke <mat-chip> , tambahkan MatChipsModule sebagai impor ke AppModule .

 <!-- orders-table.component.html --> <div class="mat-elevation-z8"> <table mat-table class="full-width-table" matSort aria-label="Elements"> <!-- Id Column --> <ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th> <td mat-cell *matCellDef="let row">{{row.id}}</td> </ng-container> <!-- Date Column --> <ng-container matColumnDef="date"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th> <td mat-cell *matCellDef="let row">{{row.date | date }}</td> </ng-container> <!-- Name Column --> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th> <td mat-cell *matCellDef="let row">{{row.name}}</td> </ng-container> <!-- Order Total Column --> <ng-container matColumnDef="orderTotal"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Order Total</th> <td mat-cell *matCellDef="let row">{{row.orderTotal | currency}}</td> </ng-container> <!-- Payment Mode Column --> <ng-container matColumnDef="paymentMode"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Payment Mode</th> <td mat-cell *matCellDef="let row">{{row.paymentMode}}</td> </ng-container> <!-- Status Column --> <ng-container matColumnDef="status"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th> <td mat-cell *matCellDef="let row"> <mat-chip-list> <mat-chip color="{{ row.status == 'delivered' ? 'primary' : ( row.status == 'shipped' ? 'accent' : 'warn' ) }}" selected> {{row.status}} </mat-chip> </mat-chip-list> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> <mat-paginator #paginator [length]="dataLength" [pageIndex]="0" [pageSize]="5" [pageSizeOptions]="[5, 10, 15, 20]"> </mat-paginator> </div>

Setelah data ditambahkan ke tabel, dasbor akan terlihat seperti ini:

Membuat Komponen Kartu Mini

Yang tersisa untuk melengkapi dasbor adalah mengisi empat kartu kecil yang ada di bagian atas. Memiliki kartu ringkasan yang lebih kecil sebagai bagian dari dasbor memudahkan untuk menyorot potongan informasi singkat yang tidak memerlukan seluruh bagan atau tabel. Dalam contoh ini, keempat kartu mini akan menampilkan total penjualan, nilai pesanan rata-rata, jumlah total pesanan, dan jumlah pelanggan kembali yang mengunjungi toko pada hari itu. Ini hanya sebuah contoh. Kartu mini ini tidak dapat dibuat seperti dengan navigasi, tata letak dasbor, bagan, dan tabel. Mereka tidak memiliki skema. Di bawah ini kita akan membahas secara singkat cara membuatnya. Meskipun kami akan menambahkan data khusus untuk contoh, Anda dapat menambahkan apa pun yang Anda inginkan atau memutuskan untuk menghapusnya sama sekali. Untuk memulai, buat komponen mini-card , jalankan:

 ng gc mini-card -m app --style css

Anda dapat menemukan template untuk komponen yang ditautkan di sini dan gayanya di sini. Komponen ini memiliki delapan properti input yang dapat Anda temukan cara menambahkannya di sini. Untuk mendapatkan data ke komponen kartu mini, masukkan layanan yang menyediakan data ke komponen tersebut di konstruktor DashComponent . Tetapkan data yang diterima dari layanan ke properti DashComponent . Dalam contoh ini, kita akan mendapatkan data dari StoreSummaryService dan menetapkannya ke properti miniCardData . Berikut caranya:

 // dash.component.ts export class DashComponent implements OnInit{ ... miniCardData: StoreSummary[]; constructor(private breakpointObserver: BreakpointObserver, private summaryService: StoreSummaryService) {} ngOnInit() { this.summaryService.getStoreSummary().subscribe({ next: summaryData => { this.miniCardData = summaryData; } }); } }

Untuk menambahkan mini-cards ke komponen tanda hubung dan mengisinya dengan data dari layanan:

 <!--dash.component.html--> ... <!--Mini Cards--> <mat-grid-tile *ngFor="let mc of miniCardData" [colspan]="( cardLayout | async )?.miniCard.cols" [rowspan]="( cardLayout | async )?.miniCard.rows"> <app-mini-card [title]="mc.title" [textValue]="mc.textValue" [value]="mc.value" [color]="mc.color" [percentValue]="mc.percentValue"></app-mini-card> </mat-grid-tile> ...

Tangkapan layar di bawah ini adalah tampilan dasbor dengan kartu mini yang terisi.

Menyatukan Semua

Pada akhirnya, templat komponen dasbor harus berisi:

 <!-- dashboard.component.html --> <div class="grid-container"> <h1 class="mat-h1">Dashboard</h1> <mat-grid-list cols="{{ ( cardLayout | async )?.columns }}" rowHeight="200px"> <!--Mini Cards--> <mat-grid-tile *ngFor="let mc of miniCardData" [colspan]="( cardLayout | async )?.miniCard.cols" [rowspan]="( cardLayout | async )?.miniCard.rows"> <app-mini-card [icon]="mc.icon" [title]="mc.title" [value]="mc.value" [color]="mc.color" [isIncrease]="mc.isIncrease" duration="since last month" [percentValue]="mc.percentValue" [isCurrency]="mc. isCurrency"></app-mini-card> </mat-grid-tile> <!--Charts--> <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows"> <app-card title="Monthly Revenue"> <app-annual-sale-chart></app-annual-sale-chart> </app-card> </mat-grid-tile> <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows"> <app-card title="Product Sales"> <app-product-sales-chart></app-product-sales-chart> </app-card> </mat-grid-tile> <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows"> <app-card title="Sales by Traffic Source"> <app-sales-traffic-chart></app-sales-traffic-chart> </app-card> </mat-grid-tile> <mat-grid-tile [colspan]="( cardLayout | async )?.chart.cols" [rowspan]="( cardLayout | async )?.chart.rows"> <app-card title="Online Store Sessions by Traffic Source"> <app-store-sessions-chart></app-store-sessions-chart> </app-card> </mat-grid-tile> <!--Table--> <mat-grid-tile [colspan]="( cardLayout | async )?.table.cols" [rowspan]="( cardLayout | async )?.table.rows"> <app-card title="Latest Orders"> <app-orders-table></app-orders-table> </app-card> </mat-grid-tile> </mat-grid-list> </div>

Inilah isi dasbor yang dihasilkan.

Kesimpulan

Membuat dasbor melibatkan cukup banyak pekerjaan dan perencanaan. Cara untuk membuatnya lebih cepat adalah dengan menggunakan berbagai skema yang disediakan oleh Angular Material dan ng2-charts. Dengan skema ini, menjalankan perintah akan menghasilkan komponen yang sepenuhnya lengkap dan dapat menghasilkan dasbor yang aktif dan berjalan dengan cukup cepat. Ini memberi Anda lebih banyak waktu untuk fokus membuat layanan data dan menambahkannya ke komponen dasbor Anda.

Jika Anda ingin mempelajari lebih lanjut tentang beberapa skema yang disediakan oleh Angular Material, kunjungi material.angular.io, dan untuk skema yang disediakan oleh ng2-charts, kunjungi situs mereka yang tertaut di sini.