Table of contents

• Getting started
• Use cases
• API
• Services
• Credits

Required

• [x] Angular Material installed and imported
• [x] ngx-echarts installed (Check compatibility with your angular version)
• [x] @juggle/resize-observer
• [x] echarts
• [x] @egjs/infinitegrid (MasonryInfiniteGrid layout engine)
• [x] @angular-material-components/datetime-picker (v2.0.4)
• [x] @angular-material-components/moment-adapter
• [x] Moment.js

Getting started

This package allows the creation of a flexible dashboard with different types of widgets. Each widget may contain various information such as graphs, statistics or entire external components. Widgets are laid out using a responsive masonry grid (via @egjs/infinitegrid) that automatically adjusts to content height. Widget size and visibility preferences are persisted to localStorage keyed by the current window.location.origin.

Step 1: Install eqp-dashboard:

NPM

npm install --save @eqproject/eqp-dashboard

Step 2: Import the EqpDashboardModule :

import { EqpDashboardModule } from '@eqproject/eqp-dashboard';

@NgModule({
  declarations: [AppComponent],
  imports: [EqpDashboardModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

API

Inputs

| Input | Type | Default | Required | Description | | ------------- | ------------- | ------------- | ------------- | ------------- | | [configs] | Array<WidgetConfig> | - | yes | Array of WidgetConfig Objects| | [saveConfigs] | bool | True | no | If TRUE then save the widget configuration (size and visibility) in the localStorage. If FALSE the localStorage entry for this dashboard is cleared on init. | | [hideTooltipLabel] | string | Hide | no | Set tooltip label of top left eye icon widget | | [showTooltipLabel] | string | Show | no | Set tooltip label of eye icon row in modal hidden items list | | [resizeTooltipLabel] | string | Resize Widget | no | Set tooltip label of top right tree dots icon widget | | [resizeDisabledTooltipLabel] | string | Widget not resizable for this size | no | Set tooltip label shown when the widget cannot be resized at the current size | | [showAllHiddenItemsLabel] | string | Show all hidden elements | no | Set label of settings button that shows all hidden items | | [showListHiddenItemsLabel] | string | Show hidden elements list | no | Set label of settings button that shows modal of hidden items list | | [settingsLabel] | string | Settings | no | Set tooltip label of top left settings icon | | [smallLabel] | string | Small | no | Set label of small widget resize option | | [mediumLabel] | string | Medium | no | Set label of medium widget resize option | | [LargeLabel] | string | Large | no | Set label of large widget resize option | | [showSpinnerLabel] | bool | True | no | If TRUE then it shows the label in the widget spinner configured for an endpoint | | [spinnerLabel] | string | Loading... | no | Set the spinner label | | [dashboardSettingsLabel] | string | null | no | Set label for the dashboard settings button | | [hiddenWidgetModalTitle] | string | Hidden widget list | no | Set label for the hidden widget list modal | | [RechargeLabel] | string | Reload | no | Set label for reload tooltip button | | [searchTooltipLabel] | string | Search | no | Set label for endpoint search button | | [emptyChartMessage] | string | No data to show for this chart | no | Set message to show when the chart is empty |

Outputs

| Output | Event Arguments | Required | Description | | ------------- | ------------- | ------------- | ------------- | | (widgetSizeChange) | EventEmitter<WidgetConfig> | no | Invoked when resizing the widget. Returns the full WidgetConfig of the resized widget |

Public methods

The following methods are exposed on EqpDashboardComponent and can be accessed via @ViewChild:

| Method | Parameters | Description | | ------------- | ------------- | ------------- | | runEndPointCall(config) | config: WidgetConfig | Triggers an HTTP call for the given endpoint widget and refreshes its chart data. Use this to programmatically reload a widget after modifying its EndPointData.Params. | | reRenderChart(config) | config: WidgetConfig | Forces a full re-render of the widget chart by toggling isVisible. Useful after programmatic changes to ChartOptions. | | removeUserConfigFromLocalStorage() | — | Removes the persisted widget settings (sizes and visibility) from localStorage. Call this when the application context changes (e.g. company switch) to reset the dashboard to its default state. |

@ViewChild(EqpDashboardComponent) dashboard: EqpDashboardComponent;

reloadWidget() {
  const config = this.chartConfigs.find(c => c.WidgetID === 'MY_WIDGET');
  config.EndPointData.Params.find(p => p.PropertyName === 'StartDate').PropertyValue = new Date();
  this.dashboard.runEndPointCall(config);
}

resetDashboardSettings() {
  this.dashboard.removeUserConfigFromLocalStorage();
}

Models used

WidgetConfig Model: class for configure each individual widget

| Property | Description | Type | Examples | | ------------- | ------------- | ------------- | ------------- | | WidgetID | Unique Widget ID string. Must be unique across the entire configs array — a duplicate will throw an error and prevent dashboard initialization. | string | - | | WidgetTitle | Displayed widget title string | string | - | | WidgetTitleColor | Set Widget title color | string | 'red' or '#ff0000' | | WidgetSizeClass | WidgetSizeEnum - defines the initial widget size. If WidgetSizeTypes is also defined, the value must be included in that array, otherwise the first element of WidgetSizeTypes is used. | WidgetSizeEnum | XS, MD, XL | | WidgetSizeTypes | Restricts the resize options available for this widget to the specified subset of sizes. If empty or undefined all three sizes are available. | Array<WidgetSizeEnum> | [WidgetSizeEnum.XS, WidgetSizeEnum.MD] | | WidgetType | WidgetTypeEnum - define with enumerator the widget type | WidgetTypeEnum | PIE_CHART = 1, BARS_CHART = 2, LINE_CHART = 3, RADAR_CHART = 4, GAUGE_CHART = 5, STATISTIC_CHART = 6, CUSTOM_CHART = 7 | | ChartOptions | If CustomComponent and StatisticWidget are not defined, allows to define the specific chart configuration. Accepts one of: LineChartOption, BarChartOption, PieChartOption, RadarChartOption, GaugeChartOption, or any plain ECharts option object (for CUSTOM_CHART). | LineChartOption \| BarChartOption \| PieChartOption \| RadarChartOption \| GaugeChartOption \| any | - | | EndPointData | Configures an HTTP endpoint to call to retrieve the chart data dynamically | EndPointData | - | | CustomComponent | Defines a dynamic component to be rendered inside the widget. Uses DynamicDirectiveData which contains the component class reference and optional input params. Must be registered first via ComponentMapperService.register(). | DynamicDirectiveData | - | | StatisticWidget | Used to configure a statistical widget that displays numerical data with progress bars | Array<StatisticItem> | - | | Currency | Used to determine the currency formatting to use in chart labels and tooltips | CurrencyEnum | CurrencyEnum.EUR, CurrencyEnum.USD | | isHidden | If TRUE the widget is hidden from the dashboard. Managed internally and persisted to localStorage. | boolean | Default: false |

EndPointData Model

| Property | Description | Type | Required | Examples | | ------------- | ------------- | ------------- | ------------- | ------------- | | Url | URL of endpoint | string | yes | http://localhost:5000/api/test | | Token | Bearer token sent as Authorization header | string | no | - | | RequestMethod | HTTP verb to use for the endpoint call | RequestMethodEnum | yes | GET, POST, PUT | | Params | Parameters to pass to the endpoint. For GET requests they are appended as query string; for POST/PUT they are serialized into the request body. | EndPointDataParams[] | no | An array of EndPointDataParams objects | | ReloadDataOnParamsChange | If TRUE any change to any parameter value automatically triggers a new endpoint call and refreshes the chart | boolean | no | Default: null |

EndPointDataParams Model

| Property | Description | Type | Required | Examples | | ------------- | ------------- | ------------- | ------------- | ------------- | | PropertyLabel | Label shown for the parameter filter in the widget header | string | yes | Start date | | PropertyName | Name of the property sent to the endpoint | string | yes | StartDate | | PropertyValue | Current value of the parameter (default: null) | any | no | - | | PropertyType | Type of the filter control to render | EndPointDataParamType | yes | TEXT=1, NUMBER=2, DATE=3, DATETIME=4, CVL=5, EXTERNAL_TEMPLATE=6 | | CvlConfig | Configuration for CVL (controlled vocabulary list) type filters | EndpointParamCvlConfig | no | - | | isHidden | If TRUE the parameter is used with its default value without showing a filter control in the UI | boolean | no | Default: false | | ExternalTemplateConfig | TemplateRef to render for EXTERNAL_TEMPLATE type params. The template receives widget and parameter context variables. | TemplateRef<any> | no | - | | ParamClass | Bootstrap grid class applied to the parameter container | string | no | Default: "col-md-4 col-lg-4 col-sm-6" |

EndpointParamCvlConfig Model

| Property | Description | Type | Examples | | ------------- | ------------- | ------------- | ------------- | | EnumData | If the CVL is based on an enumerator then in this property the type of the enumerator to be used must be defined. In this way the data source of the CVL will be the set of values defined for the enumerator. | any | - | | ArrayData | If the CVL is based on an array then in this property the array to be shown as the data source of the CVL must be defined | any[] | - | | ArrayKeyProperty | In the case of ArrayData defined it allows to indicate the property of the objects of the array to bind to the filter | string | - | | ArrayValueProperty | In the case of ArrayData defined, it allows you to indicate the property of the objects to be displayed in the filter | string | - | | IsSearchable | If TRUE then it shows the search field within the CVL (default: false) | boolean | - | | ShowCancelButton | If TRUE then it shows the button to clear the CVL selection (default: true) | boolean | - | | SearchText | Allows you to define the label for the search field (default: 'Cerca') | string | - | | IsMultiSelect | Allows multi-selection of CVL values (default: false) | boolean | - | | BindFullObject | If TRUE the CVL binding considers the whole object rather than only the ArrayKeyProperty value (default: true) | boolean | - |

Static exposed functions

| Name | Returned Type | Parameters | Description | | ------------- | ------------- | ------------- | ------------- | | CreateEndpointParamCVLConfig | EndpointParamCvlConfig | enumData?, arrayData?, arrayKeyProperty?, arrayValueProperty?, isMultiSelect?, isSearchable?, showCancelButton?, searchText?, bindFullObject? | Factory method. Throws if both enumData and arrayData are null/undefined. |

DynamicDirectiveData Model

Used as the value of WidgetConfig.CustomComponent to render an arbitrary Angular component inside a widget.

| Property | Description | Type | Required | | ------------- | ------------- | ------------- | ------------- | | componentSelector | The component class (not the selector string — see ComponentMapperService) | Type<any> | yes | | inputParams | Key-value map of inputs to assign to the loaded component instance | any | no |

The component must be registered in the COMPONENT_MAPPER pool before the dashboard initializes (see Case 7).

StatisticItem Model

| Property | Description | Type | Required | Examples | | ------------- | ------------- | ------------- | ------------- | ------------- | | Icon | Material icon tag name or FontAwesome class | string | no | check_circle or fa fa-check | | IsFontAwesomeIcon | TRUE if you want to use font-awesome (default: FALSE — use material icons) | boolean | no | - | | IconClass | A style class to apply to the icon | string | no | - | | LabelClass | A style class to apply to the label | string | no | - | | Label | Label of the statistic value | string | yes | - | | ProgressBarColor | Color to apply to the progress bar (default: '#000000') | string | no | 'red' or '#FFFFFF' | | Value | The value to show on the statistic line | number | yes | - | | MaxValue | The max value of the bar (required for percentage calculations). If 0, no percentage is computed. | number | no | - | | Percentage | Auto-calculated from Value/MaxValue (first 2 significant digits). Can be overridden manually. | string | no | - |

LineChartOption Model

Describes the model for configuring LINE type charts | Property | Description | Type | Required | Examples | | ------------- | ------------- | ------------- | ------------- | ------------- | | xAxis | The data configuration for the X Axis of the chart | XAxisConfig \| XAxisConfig[] | yes | View use cases 1 | | yAxis | The data configuration for the Y Axis of the chart | YAxisConfig \| YAxisConfig[] | yes | View use cases 1 | | series | The data configuration for the chart series | LineSeriesData \| LineSeriesData[] | yes | View use cases 1 | | legend | The data configuration for chart legend (automatically set to show the legend) | LineLegend | no | - | | tooltip | The data configuration for chart tooltip (automatically set to show tooltips on hover) | LineTooltip | no | - |

Static exposed functions | Name | Returned Type | Parameters | Description | | ------------- | ------------- | ------------- | ------------- | | CreateLineChartModel | LineChartOptions | labels: string[], seriesData: Map<string, number[]>, yAxisPosition?: string, seriesColors?: string[] | labels: labels for the X axis; seriesData: Map keyed by series name, value is an array of numbers; yAxisPosition: 'left' or 'right'; seriesColors: positional color array for each series |

BarChartOption Model

Describes the model for configuring BAR type charts | Property | Description | Type | Required | Examples | | ------------- | ------------- | ------------- | ------------- | ------------- | | xAxis | The data configuration for the X Axis of the chart | XAxisConfig \| XAxisConfig[] | yes | View use cases 2 | | yAxis | The data configuration for the Y Axis of the chart | YAxisConfig \| YAxisConfig[] | yes | View use cases 2 | | series | The data configuration for the chart series | LineSeriesData \| LineSeriesData[] | yes | View use cases 2 | | legend | The data configuration for chart legend (automatically set to show the legend) | LineLegend | no | - | | tooltip | The data configuration for chart tooltip (automatically set to show tooltips on hover) | LineTooltip | no | - |

Static exposed functions | Name | Returned Type | Parameters | Description | | ------------- | ------------- | ------------- | ------------- | | CreateBarChartModel | BarChartOptions | labels: string[], seriesData: Map<string, number[]>, yAxisPosition?: string, seriesColors?: string[] | Same signature as CreateLineChartModel. Each bar series automatically receives showBackground: true with a light grey background. |

LineSeriesData Model

| Property | Description | Type | | ------------- | ------------- | ------------- | | name | Series name shown in the tooltip and legend | string | | data | Array of numeric data points | any | | type | Set automatically to 'line' or 'bar' | string | | showBackground | Auto-set to true for bar charts | boolean | | backgroundStyle | Auto-set to { color: 'rgba(180,180,180,0.2)' } for bar charts | { color: string } |

XAxisConfig / YAxisConfig Models

| Property | Description | Type | Default | | ------------- | ------------- | ------------- | ------------- | | XAxisConfig.type | Axis type — do not change | string | 'category' | | XAxisConfig.data | Array of label strings for the X axis | string[] | - | | YAxisConfig.type | Axis type — do not change | string | 'value' | | YAxisConfig.position | Y axis position: 'left' or 'right' | string | 'left' |

Note on Y-axis label rotation: When WidgetSizeClass is XS or the device is mobile, the Y-axis labels are automatically rotated 90° and formatted with compact notation (k, M, G…) to prevent truncation. Switching from XS to a larger size restores horizontal labels with full locale-aware formatting.

PieChartOption Model

Describes the model for configuring PIE type charts | Property | Description | Type | Required | Examples | | ------------- | ------------- | ------------- | ------------- | ------------- | | tooltip | Tooltip configuration object (trigger defaults to 'item') | PieTooltipData | no | View use cases 3 | | legend | Legend configuration object (orient defaults to 'vertical', left defaults to 'left') | PieLegendData | no | View use cases 3 | | series | Defines the series data for the chart | PieSeries[] | no | View use cases 3 | | isDoughnut | If TRUE then show a Doughnut chart (radius ['40%','70%']) else show a Pie chart (radius '50%') | boolean | no | Default: false |

Static exposed functions | Name | Returned Type | Parameters | Description | | ------------- | ------------- | ------------- | ------------- | | CreatePieChartModel | PieChartOptions | seriesData: Map<string, PieSeriesValue[]>, isDoughnut?: boolean | seriesData: Map keyed by series name; each value is an array of PieSeriesValue objects defining the slices |

PieSeries Model

| Property | Description | Type | Required | | ------------- | ------------- | ------------- | ------------- | | name | Name of the pie chart series | string | yes | | type | Set automatically to 'pie' | string | yes | | data | Array of PieSeriesValue objects | PieSeriesValue[] | yes | | radius | Default '50%' for pie, ['40%','70%'] for doughnut | string \| string[] | yes |

PieSeriesValue Model

| Property | Description | Type | Required | | ------------- | ------------- | ------------- | ------------- | | name | Label for this slice | string | yes | | value | Numeric value of this slice | number | yes | | itemStyle | Optional color override for this slice | PieSeriesValueColor | no |

PieSeriesValueColor has a single color: string property accepting any CSS color value (hex, rgb, rgba).

RadarChartOption Model

Describes the model for configuring RADAR type charts | Property | Description | Type | Required | Examples | | ------------- | ------------- | ------------- | ------------- | ------------- | | legend | Chart legend configuration | RadarLegendData | no | View use cases 4 | | tooltip | Tooltip configuration (trigger auto-set to 'axis') | RadarTooltip | no | View use cases 4 | | radar | Array of RadarIndicator objects, one per radar in the chart | RadarIndicator[] | yes | View use cases 4 | | series | Array of series, one per data set to plot | RadarSeries[] | yes | View use cases 4 |

Static exposed functions | Name | Returned Type | Parameters | Description | | ------------- | ------------- | ------------- | ------------- | | CreateRadarChartModel | RadarChartOption | legendLabels: string[], radars: Map<string, RadarIndicatorData[]>, seriesData: Map<string, RadarSeriesData[]>, radiusChartPercentage?: string, showTooltip?: boolean, fillChartArea?: boolean | legendLabels: one per radar; radars: Map keyed by radar name to its indicator array; seriesData: Map keyed by series name to its values array; radiusChartPercentage: default '75%'; showTooltip: default true; fillChartArea: default true (fills the polygon area) |

RadarLegendData Model

| Property | Description | Type | Default | | ------------- | ------------- | ------------- | ------------- | | data | Legend labels array | string[] | - | | left | Legend position | string | 'center' |

RadarIndicator Model

| Property | Description | Type | | ------------- | ------------- | ------------- | | indicator | Array of RadarIndicatorData defining the radar vertices | RadarIndicatorData[] | | radius | Scaling percentage of the radar shape | string |

RadarIndicatorData Model

| Property | Description | Type | Required | | ------------- | ------------- | ------------- | ------------- | | text | Label shown at the radar vertex | string | yes | | max | Maximum reference value for this indicator | number | yes |

RadarSeries Model

| Property | Description | Type | | ------------- | ------------- | ------------- | | name | Series name | string | | type | Set automatically to 'radar' | string | | data | Array of RadarSeriesData | RadarSeriesData[] | | areaStyle | Set to {} when fillChartArea = true, null otherwise | any | | tooltip | Per-series tooltip (trigger set to 'item') | RadarTooltip |

RadarSeriesData Model

| Property | Description | Type | Required | | ------------- | ------------- | ------------- | ------------- | | name | Series label | string | no | | value | Array of values. Length must match the number of indicators in the corresponding RadarIndicator. | any[] | yes |

GaugeChartOption Model

| Property | Description | Type | Required | Examples | | ------------- | ------------- | ------------- | ------------- | ------------- | | tooltip | Tooltip configuration. The formatter property formats the informative tooltip (default: "{a} <br/> {b}: {c}") | any | no | View use cases 5 | | series | The chart series data | GaugeChartSeries[] | yes | View use cases 5 |

Static exposed functions | Name | Returned Type | Parameters | Description | | ------------- | ------------- | ------------- | ------------- | | CreateGaugeChartModel | GaugeChartOptions | seriesData: Map<string, GaugeChartData[]> | Map keyed by series name, value is an array of GaugeChartData objects |

GaugeChartSeries Model

| Property | Description | Type | Required | | ------------- | ------------- | ------------- | ------------- | | name | Series name | string | yes | | type | Set automatically to 'gauge' | string | yes | | detail | Gauge detail configuration | GaugeChartDetailData | yes | | data | Series data points | GaugeChartData[] | yes |

GaugeChartDetailData Model

| Property | Description | Type | | ------------- | ------------- | ------------- | | formatter | Gauge label formatter (default: "{a} <br/>{b} : {c}") | string |

GaugeChartData Model

| Property | Description | Type | Required | | ------------- | ------------- | ------------- | ------------- | | value | Numeric value to display | number | yes | | name | Label for this data point | string | yes |

Services

EqpDashboardService

Injectable service (providedIn: 'root') for global dashboard configuration and number formatting utilities.

| Method | Type | Description | | ------------- | ------------- | ------------- | | setLocale(locale: string) | instance | Sets the locale string used for all number and currency formatting across all chart tooltips and Y-axis labels. Default: 'it-IT'. | | getLocale() | instance | Returns the currently set locale string. | | EqpDashboardService.formatTooltip(params, currency, widgetType, indicators?) | static | Generates the HTML string for an ECharts tooltip. Handles BARS_CHART, LINE_CHART, PIE_CHART, and RADAR_CHART differently. Numbers are formatted using the current locale and optional currency. | | EqpDashboardService.formatNumbers(data, currency) | static | Formats a number using toLocaleString with the current locale and optional currency style. Used for Y-axis labels on non-XS widgets. | | EqpDashboardService.nFormatter(num, digits) | static | Formats a number using compact notation: k (thousands), M (millions), G (billions), T, P, E. Used for Y-axis labels on XS widgets and mobile devices. |

constructor(private eqpDashboardService: EqpDashboardService) {}

ngOnInit(): void {
  this.eqpDashboardService.setLocale('en-US');
}

CurrencyEnum

| Value | Description | | ------------- | ------------- | | EUR | Euro — uses € symbol and locale-aware formatting | | USD | US Dollar — uses $ symbol and locale-aware formatting |

DashboardHelperService

Injectable service (providedIn: 'root') for programmatic control of widget loading spinners from outside the dashboard component. Useful when a custom component rendered inside a widget performs async operations.

| Member | Type | Description | | ------------- | ------------- | ------------- | | checkWidgetLoading | EventEmitter<WidgetLoadingStatus> | Emit a WidgetLoadingStatus to show or hide the loading spinner for a specific widget by its WidgetID. |

WidgetLoadingStatus Model

| Property | Description | Type | | ------------- | ------------- | ------------- | | WidgetID | The ID of the widget to update | string | | IsLoading | If true the spinner is shown; if false it is hidden | boolean |

constructor(private dashboardHelper: DashboardHelperService) {}

startLoading() {
  this.dashboardHelper.checkWidgetLoading.emit({ WidgetID: 'MY_WIDGET', IsLoading: true });
}

stopLoading() {
  this.dashboardHelper.checkWidgetLoading.emit({ WidgetID: 'MY_WIDGET', IsLoading: false });
}

ComponentMapperService

Static registry for dynamic components loaded inside widgets via WidgetConfig.CustomComponent. Components must be registered before the dashboard initializes — typically in the root AppComponent.

| Method | Description | | ------------- | ------------- | | ComponentMapperService.register(key: string, value: Type<any>) | Adds a component to the registry under the given key. The key is then used as the componentSelector in DynamicDirectiveData. |

The underlying COMPONENT_MAPPER.get(key) will throw a descriptive error if the key is not found, helping catch missing registrations early.

// app.component.ts
ComponentMapperService.register('app-my-widget-component', MyWidgetComponent);

Use cases

Use Example in class :

Define selector in html

<eqp-dashboard [configs]="chartConfigs"></eqp-dashboard>

Define locale in the app.component.ts in order to set it for all the charts (the default value is 'it-IT')

    constructor(private eqpDashboardService : EqpDashboardService) { }

    ngOnInit(): void { }

    this.eqpDashboardService.setLocale('en-US')

CASE 1: Define variables and object to use to display a basic Line Chart Widget

    chartConfigs: WidgetConfig[];

    let lineChartConfig: WidgetConfig = new WidgetConfig();
    lineChartConfig.WidgetID = "Dashboard_LineChart";
    lineChartConfig.WidgetTitle = "Line Chart"
    lineChartConfig.WidgetSizeClass = WidgetSizeEnum.XS;
    lineChartConfig.WidgetType = WidgetTypeEnum.LINE_CHART;
    let lineSeriesData: Map<string, number[]> = new Map<string,number[]>();
    lineSeriesData.set("Serie 1", [10,25,35]);
    lineChartConfig.ChartOptions = LineChartOption.CreateLineChartModel(["Valore 1", "Valore 2", "Valore 3"], lineSeriesData);

    this.chartConfigs.push(lineChartConfig);

CASE 2: Define variables and object to use to display a basic Bar Chart Widget

    chartConfigs: WidgetConfig[];

    let barChartConfig: WidgetConfig = new WidgetConfig();
    barChartConfig.WidgetID = "Dashboard_BarChart";
    barChartConfig.WidgetTitle = "Bar Chart"
    barChartConfig.WidgetSizeClass = WidgetSizeEnum.XS;
    barChartConfig.WidgetType = WidgetTypeEnum.BARS_CHART;
    let barSeriesData: Map<string, number[]> = new Map<string,number[]>();
    barSeriesData.set("Serie 1", [10,25,35]);
    barChartConfig.ChartOptions = BarChartOption.CreateBarChartModel(["Valore 1", "Valore 2", "Valore 3"], barSeriesData);

    this.chartConfigs.push(barChartConfig);

CASE 3: Define variables and object to use to display a basic Pie Chart Widget

    chartConfigs: WidgetConfig[];

    let pieChartConfig: WidgetConfig = new WidgetConfig();
    pieChartConfig.WidgetID = "Dashboard_Pie";
    pieChartConfig.WidgetTitle = "Pie Chart"
    pieChartConfig.WidgetSizeClass = WidgetSizeEnum.XS;
    pieChartConfig.WidgetType = WidgetTypeEnum.PIE_CHART;
    let pieSeries: Map<string, PieSeriesValue[]> = new Map<string, PieSeriesValue[]>();
    pieSeries.set("Serie 1", [{name: "A", value: 10},{name: "B", value: 25},{name: "C", value: 37},{name: "D", value: 42}]);
    pieChartConfig.ChartOptions = PieChartOption.CreatePieChartModel(pieSeries);

    this.chartConfigs.push(pieChartConfig);

CASE 4: Define variables and object to use to display a basic Radar Chart Widget

    chartConfigs: WidgetConfig[];

    let radarChartConfig: WidgetConfig = new WidgetConfig();
    radarChartConfig.WidgetID = "Dashboard_Radar";
    radarChartConfig.WidgetTitle = "Radar chart"
    radarChartConfig.WidgetSizeClass = WidgetSizeEnum.XS;
    radarChartConfig.WidgetType = WidgetTypeEnum.RADAR_CHART;

    let seriesName: string = "Serie 1";
    let indicators: Map<string, RadarIndicatorData[]> = new Map<string,RadarIndicatorData[]>();
    indicators.set(seriesName, [{ text: "Valore 1", max: 100}, { text: "Valore 2", max: 100}, { text: "Valore 3", max: 100}, { text: "Valore 4", max: 100}, { text: "Valore 5", max: 100}]);

    let seriesData: Map<string, RadarSeriesData[]> = new Map<string,RadarSeriesData[]>();
    seriesData.set(seriesName, [{ name: "Serie 1", value: [10,25,35,40,80] }]);
    radarChartConfig.ChartOptions = RadarChartOption.CreateRadarChartModel([seriesName], indicators, seriesData);

    this.chartConfigs.push(radarChartConfig);

CASE 5: Define variables and object to use to display a basic Gauge Chart Widget

    chartConfigs: WidgetConfig[];

    let gaugeChartConfig: WidgetConfig = new WidgetConfig();
    gaugeChartConfig.WidgetID = "Dashboard_Gauge";
    gaugeChartConfig.WidgetTitle = "Gauge chart"
    gaugeChartConfig.WidgetSizeClass = WidgetSizeEnum.XS;
    gaugeChartConfig.WidgetType = WidgetTypeEnum.GAUGE_CHART;

    let gaugeSeries: Map<string, GaugeChartData[]> = new Map<string, GaugeChartData[]>();
    gaugeSeries.set("Valore 1", [ { name: "Km/h", value: 50}])
    gaugeChartConfig.ChartOptions = GaugeChartOption.CreateGaugeChartModel(gaugeSeries)

    this.chartConfigs.push(gaugeChartConfig);

CASE 6: Define the variables and object to use to display Chart Widget by calling a custom endpoint to fetch Chart Data

    @ViewChild('externalTemplate', { static: true }) externalTemplate: TemplateRef<any>;

    constructor() {

    }

    ngOnInit() {
      this.configureWidget();
    }

    configureWidget() {
      endPointChart: WidgetConfig = new WidgetConfig();
      chartConfigs: WidgetConfig[];

      this.endPointChart.WidgetTitle = "EndPoint Chart";
      this.endPointChart.WidgetType = WidgetTypeEnum.BARS_CHART;
      this.endPointChart.WidgetSizeClass = WidgetSizeEnum.XS;
      this.endPointChart.WidgetID = 'ID_EndPointChartTest002';

      this.endPointChart.EndPointData = {
        Url: "YOUR_ENDPOINT_URL",
        Token: "TOKEN",
        RequestMethod: RequestMethodEnum.GET,
        Params: {
          {
            PropertyLabel: "Company",
            PropertyName: "FK_Company",
            PropertyValue: null,
            PropertyType: EndPointDataParamType.CVL,
            CvlConfig: EndpointParamCvlConfig.CreateEndpointParamCVLConfig(null, [{ID:1, Label: "Azienda 1"}, {ID:2, Label: "Azienda 2"}], "ID","Label", false, true, true, null, false),
          },
          { PropertyLabel: "Data inizio", PropertyName: "StartDate", PropertyValue: data1, PropertyType: EndPointDataParamType.DATE },
          { PropertyLabel: "Data fine", PropertyName: "EndDate", PropertyValue: date2, PropertyType: EndPointDataParamType.DATE },
          { PropertyLabel: "Filtro testuale", PropertyName: "Text", PropertyValue: null, PropertyType: EndPointDataParamType.TEXT },
          { PropertyLabel: "Filtro numerico", PropertyName: "Number", PropertyValue: null, PropertyType: EndPointDataParamType.NUMBER },
          { PropertyLabel: "External", PropertyName: "ExternalInput", PropertyValue: null, PropertyType: EndPointDataParamType.EXTERNAL_TEMPLATE, ExternalTemplateConfig: this.externalTemplate, ParamClass: "col-12" }
        }
      }

      this.chartConfigs = [
        this.endPointChart
      ];
    }

    testExternalTemplate(widget: WidgetConfig) {
      //DO SOMETHING
      //IF YOU NEED TO UPDATE THE WIDGET YOU NEED TO INVOKE runEndPointCall METHOD FROM EqpDashboardComponent (use ViewChild to access it)
    }

  <ng-template #externalTemplate let-widget="widget" let-parameter="parameter">
      <button (click)="testExternalTemplate(widget)">Click me</button>
  </ng-template>

CASE 7: Define a WidgetConfig to display a component dynamically

The CustomComponent property replaces the deprecated CustomComponentSelector / CustomComponentInputs approach. The component class must be registered with ComponentMapperService before the dashboard initializes.

    config: WidgetConfig = new WidgetConfig();
    chartConfigs: WidgetConfig[];

    // Register the component class in app.component.ts (or before dashboard init)
    ComponentMapperService.register("app-my-component", MyComponent);

    // Then configure the widget using DynamicDirectiveData
    let dynamicData = new DynamicDirectiveData();
    dynamicData.componentSelector = COMPONENT_MAPPER.get("app-my-component");
    dynamicData.inputParams = { myInput: 'someValue', anotherInput: 42 };

    this.config.CustomComponent = dynamicData;
    this.config.WidgetSizeClass = WidgetSizeEnum.XS;
    this.config.WidgetTitle = 'Test Component 001';
    this.config.WidgetID = 'ID_TestComponent003';

    this.chartConfigs = [
      this.config
    ];

Note: Input params are assigned directly on the component instance (componentRef.instance[key] = value), so property names in inputParams must match the component's @Input() property names exactly.

CASE 8: Define a WidgetConfig to display simple statistical data

    chartConfigs: WidgetConfig[];

    let statisticConfig: WidgetConfig = new WidgetConfig();
    statisticConfig.WidgetTitle = "Statistic Widget";
    statisticConfig.WidgetSizeClass = WidgetSizeEnum.XS;
    statisticConfig.WidgetID = 'StatisticWidget_Dashboard';
    statisticConfig.WidgetType = WidgetTypeEnum.STATISTIC_CHART;
    statisticConfig.StatisticWidget = [
      { Icon: "check_circle", Label: "Completati", Value: 70, MaxValue: 100 }
    ]

    this.chartConfigs.push(statisticConfig);

CASE 9: Define a WidgetConfig to display CUSTOM_CHART

    chartConfigs: WidgetConfig[];

    let customConfig: WidgetConfig = new WidgetConfig();
    customConfig.WidgetTitle = "Custom Widget";
    customConfig.WidgetSizeClass = WidgetSizeEnum.XS;
    customConfig.WidgetID = 'CustomWidget_Dashboard';
    customConfig.WidgetType = WidgetTypeEnum.CUSTOM_CHART;

    //According to the echarts library, it is possible to configure the chart option object with the information of the desired chart.
    //If an endpoint is used, the json ChartOption will be returned by the server.
    customConfig.ChartOptions = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
      }]
    }

    this.chartConfigs.push(customConfig);

CASE 10: Restrict available resize options per widget using WidgetSizeTypes

    let restrictedConfig: WidgetConfig = new WidgetConfig();
    restrictedConfig.WidgetID = 'Dashboard_Restricted';
    restrictedConfig.WidgetTitle = 'Only Small or Medium';
    restrictedConfig.WidgetType = WidgetTypeEnum.BARS_CHART;

    // Only XS and MD will appear in the resize dropdown; XL is not available for this widget
    restrictedConfig.WidgetSizeTypes = [WidgetSizeEnum.XS, WidgetSizeEnum.MD];
    restrictedConfig.WidgetSizeClass = WidgetSizeEnum.XS; // must be one of WidgetSizeTypes

    let data: Map<string, number[]> = new Map();
    data.set('Q1', [10, 20, 30]);
    restrictedConfig.ChartOptions = BarChartOption.CreateBarChartModel(['Jan', 'Feb', 'Mar'], data);

    this.chartConfigs.push(restrictedConfig);

CASE 11: Programmatically control widget spinner from a custom component using DashboardHelperService

    // Inside the component rendered in the widget (MyWidgetComponent):
    constructor(private dashboardHelper: DashboardHelperService) {}

    loadData() {
      this.dashboardHelper.checkWidgetLoading.emit({ WidgetID: 'ID_TestComponent003', IsLoading: true });

      this.myService.fetchData().subscribe(data => {
        this.data = data;
        this.dashboardHelper.checkWidgetLoading.emit({ WidgetID: 'ID_TestComponent003', IsLoading: false });
      });
    }

Credits

This library has been developed by EqProject SRL, for more info contact: [email protected]