Widgets

Pages UI
Search…
Pages UI
v5.0.1 - Pages Angular
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 
Importing
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. 
1
// Using ImageWidgetComponent as an example. Same steps apply to other widgets
2
import { ImageWidgetComponent } from './widgets/image-widget/image-widget.component';
3
@NgModule({
4
  declarations: [ImageWidgetComponent,...]
5
})
6
export class AppModule(){}
Copied!
bar-tile-widget
Features a stacked bar chart made with echarts component:
1
<bar-tile-widget></bar-tile-widget>
Copied!
graph-live-widget
Features a looping vertical slider with stock market updates. 
1
<graph-live-widget></graph-live-widget>
Copied!
graph-options-widget
Features a line chart with toggle buttons. 
1
<graph-options-widget></graph-options-widget>
Copied!
graph-tile-flat-widget
Features a line chart with sales stats. 
1
<graph-tile-flat-widget></graph-tile-flat-widget>
Copied!
graph-tile-widget
Features a line chart with area filled in. 
1
<graph-tile-widget></graph-tile-widget>
Copied!
graph-widget
Features a line chart with multiple series of data.
1
<graph-widget></graph-widget>
Copied!
Property
Description
Type
Default
IsAlt
Toggles three boxes with stock trading highlights and a search bar
boolean
false
Default view
image-widget
Features a background image and an text overlay. 
1
<image-widget></image-widget>
Copied!
image-widget-basic
Features a background image and a text overlay. Intended to use for showing minimal content. 
1
<image-widget-basic></image-widget-basic>
Copied!
plain-live-widget
Features a rotating text
1
<plain-live-widget></plain-live-widget>
Copied!
plain-widget
Features quick weather info 
1
<plain-widget></plain-widget>
Copied!
progress-tile-flat-widget
Features a large title text and a progress bar
1
<progress-tile-flat-widget></progress-tile-flat-widget>
Copied!
project-progress-widget
Features multiple progress bars in a tab view. 
1
<project-progress-widget></project-progress-widget>
Copied!
quick-stats-widget
Features quick stats in extra large text and a progress bar.
1
<quick-stats-widget></quick-stats-widget>
Copied!
realtime-widget
Designed to show live streaming data in a line chart. Demo widget represents sample data updated using a timer. 
1
<realtime-widget></realtime-widget>
Copied!
social-image-tile-widget
Shows an image in the style of a social feed post. 
1
<social-image-tile-widget></social-image-tile-widget>
Copied!
social-post-tile-widget
Shows a social post with text and an image. 
1
<social-post-tile-widget></social-post-tile-widget>
Copied!
stacked-bar-widget
Features a pg-tabset component with stacked bar charts representing multiple data sources for quick comparison.  
1
<stacked-bar-widget></stacked-bar-widget>
Copied!
stat-tile-widget
This is also another mini widget similar to quick-stats-widget and progress-tile-flat widget. Sample widget illustrates stock trading stats  
1
<stat-tile-widget></stat-tile-widget>
Copied!
table-basic-widget
Features a basic table layout.  
1
<table-basic-widget></table-basic-widget>
Copied!
table-widget
This is another variation of table-basic-widget. 
1
<table-widget></table-widget>
Copied!
todo-list-widget
Show todo-list items with checkboxes. 
1
<todo-list-widget></todo-list-widget>
Copied!
weather-widget
Shows weekly weather data together with animated weather icons from Skycons. 
1
<todo-list-widget></todo-list-widget>
Copied!
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
weekly-sales-widget
This is also another mini widget showing weekly sales data.  
1
<weekly-sales-widget></weekly-sales-widget>
Copied!
Dashboards
Charts
Last modified 4yr ago