Widgets
Pre-built widget components that you can integrate with your dashboards or social feeds.
Pages comes with 24 pre-built widget components that you can easily integrate with your dashboards in no time. These can be found in
dashboard/widgetsfolder and each widget folder is named after its @Component's selector.Widgets are based off pgcard component Widgets are available throughout all the pre-built dashboards via
dashboard.module.ts. But if you are planning use them outside you will have to import them as below. // Using ImageWidgetComponent as an example. Same steps apply to other widgets
import { ImageWidgetComponent } from './widgets/image-widget/image-widget.component';
@NgModule({
declarations: [ImageWidgetComponent,...]
})
export class AppModule(){}
Features a stacked bar chart made with
echarts component:<bar-tile-widget></bar-tile-widget>
Features a looping vertical slider with stock market updates.
<graph-live-widget></graph-live-widget>
Features a line chart with toggle buttons.
<graph-options-widget></graph-options-widget>
Features a line chart with sales stats.
<graph-tile-flat-widget></graph-tile-flat-widget>
Features a line chart with area filled in.
<graph-tile-widget></graph-tile-widget>
Features a line chart with multiple series of data.
<graph-widget></graph-widget>
Property | Description | Type | Default |
IsAlt | Toggles three boxes with stock trading highlights and a search bar | boolean | false |
Default view
Features a background image and an text overlay.
<image-widget></image-widget>
Features a background image and a text overlay. Intended to use for showing minimal content.
<image-widget-basic></image-widget-basic>
Features a rotating text
<plain-live-widget></plain-live-widget>
Features quick weather info
<plain-widget></plain-widget>
Features a large title text and a progress bar
<progress-tile-flat-widget></progress-tile-flat-widget>
Features multiple progress bars in a tab view.
<project-progress-widget></project-progress-widget>
Features quick stats in extra large text and a progress bar.
<quick-stats-widget></quick-stats-widget>
Designed to show live streaming data in a line chart. Demo widget represents sample data updated using a timer.
<realtime-widget></realtime-widget>
Shows an image in the style of a social feed post.
<social-image-tile-widget></social-image-tile-widget>
Shows a social post with text and an image.
<social-post-tile-widget></social-post-tile-widget>
Features a pg-tabset component with stacked bar charts representing multiple data sources for quick comparison.
<stacked-bar-widget></stacked-bar-widget>
This is also another mini widget similar to
quick-stats-widget and progress-tile-flat widget. Sample widget illustrates stock trading stats <stat-tile-widget></stat-tile-widget>
Features a basic table layout.
<table-basic-widget></table-basic-widget>
This is another variation of
table-basic-widget. <table-widget></table-widget>
Show todo-list items with checkboxes.
<todo-list-widget></todo-list-widget>
<todo-list-widget></todo-list-widget>
Property | Description | Type | Default |
Type | By default weather widget shows two highlighted columns with weather data to the right in extra large screens. Set this to "compact" to disable them. | string | undefined |
With Type option set to "compact"
Default widget
This is also another mini widget showing weekly sales data.
<weekly-sales-widget></weekly-sales-widget>
Last modified 4yr ago