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/widgets
folder 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.
bar-tile-widget
Features a stacked bar chart made with echarts
component:
graph-live-widget
Features a looping vertical slider with stock market updates.
graph-options-widget
Features a line chart with toggle buttons.
graph-tile-flat-widget
Features a line chart with sales stats.
graph-tile-widget
Features a line chart with area filled in.
graph-widget
Features a line chart with multiple series of data.
Property | Description | Type | Default |
| Toggles three boxes with stock trading highlights and a search bar | boolean | false |
image-widget
Features a background image and an text overlay.
image-widget-basic
Features a background image and a text overlay. Intended to use for showing minimal content.
plain-live-widget
Features a rotating text
plain-widget
Features quick weather info
progress-tile-flat-widget
Features a large title text and a progress bar
project-progress-widget
Features multiple progress bars in a tab view.
quick-stats-widget
Features quick stats in extra large text and a progress bar.
realtime-widget
Designed to show live streaming data in a line chart. Demo widget represents sample data updated using a timer.
social-image-tile-widget
Shows an image in the style of a social feed post.
social-post-tile-widget
Shows a social post with text and an image.
stacked-bar-widget
Features a pg-tabset component with stacked bar charts representing multiple data sources for quick comparison.
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
table-basic-widget
Features a basic table layout.
table-widget
This is another variation of table-basic-widget.
todo-list-widget
Show todo-list items with checkboxes.
weather-widget
Shows weekly weather data together with animated weather icons from Skycons.
Property | Description | Type | Default |
| 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 |
weekly-sales-widget
This is also another mini widget showing weekly sales data.
Last updated