Widgets

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.

// 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(){}

bar-tile-widget

Features a stacked bar chart made with echarts component:

<bar-tile-widget></bar-tile-widget>

graph-live-widget

Features a looping vertical slider with stock market updates.

<graph-live-widget></graph-live-widget>

graph-options-widget

Features a line chart with toggle buttons.

<graph-options-widget></graph-options-widget>

graph-tile-flat-widget

Features a line chart with sales stats.

<graph-tile-flat-widget></graph-tile-flat-widget>

graph-tile-widget

Features a line chart with area filled in.

<graph-tile-widget></graph-tile-widget>

graph-widget

Features a line chart with multiple series of data.

<graph-widget></graph-widget>

image-widget

Features a background image and an text overlay.

<image-widget></image-widget>

image-widget-basic

Features a background image and a text overlay. Intended to use for showing minimal content.

<image-widget-basic></image-widget-basic>

plain-live-widget

Features a rotating text

<plain-live-widget></plain-live-widget>

plain-widget

Features quick weather info

<plain-widget></plain-widget>

progress-tile-flat-widget

Features a large title text and a progress bar

<progress-tile-flat-widget></progress-tile-flat-widget>

project-progress-widget

Features multiple progress bars in a tab view.

<project-progress-widget></project-progress-widget>

quick-stats-widget

Features quick stats in extra large text and a progress bar.

<quick-stats-widget></quick-stats-widget>

realtime-widget

Designed to show live streaming data in a line chart. Demo widget represents sample data updated using a timer.

<realtime-widget></realtime-widget>

social-image-tile-widget

Shows an image in the style of a social feed post.

<social-image-tile-widget></social-image-tile-widget>

social-post-tile-widget

Shows a social post with text and an image.

<social-post-tile-widget></social-post-tile-widget>

stacked-bar-widget

Features a pg-tabset component with stacked bar charts representing multiple data sources for quick comparison.

<stacked-bar-widget></stacked-bar-widget>

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

<stat-tile-widget></stat-tile-widget>

table-basic-widget

Features a basic table layout.

<table-basic-widget></table-basic-widget>

table-widget

This is another variation of table-basic-widget.

<table-widget></table-widget>

todo-list-widget

Show todo-list items with checkboxes.

<todo-list-widget></todo-list-widget>

weather-widget

Shows weekly weather data together with animated weather icons from Skycons.

<todo-list-widget></todo-list-widget>

weekly-sales-widget

This is also another mini widget showing weekly sales data.

<weekly-sales-widget></weekly-sales-widget>