...
| Code Block | ||||
|---|---|---|---|---|
| ||||
abstract class Filter<T> {
data: T[];
config: IFilterConfig[];
filteredDataEventEmitter: EventEmitter<T[]>
abstract init(config: IFilterConfig); //Get the initialisation options to render the filters;
abstract filterData(data: T, config): object[];
}
interface IFilterConfig {
reference: string;
label: string;
placeholder: string;
controlType: "single-select" | "multi-select" | "date";
searchable?: boolean;
filters: IFilterConfig[];
default?: string;
}
/* Questions
Nested Filter Capability..
*/ |
🧐
...
Implemenation Approach <WIP>
Dashlet Main Component Proposed Structure
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<sb-dashlet [type]="string" [optionsconfig]="optionsconfig" [dataSourcePathdata]?="url"data , [data]?="data| IDataLocation" , [apiInfo]?="apiInfo" [id]="string | uuid" [height]="string" [width]="string" [title]="string | html" [subTitle]?="string | html" [description]?="description" (...anyOtherEvent)="eventListener($event)"> <some-title-element> <div>{{title}}</div> <div>{{subTitle}}</div> <div>{{description}}</div> </some-title-element> <some-action-buttons-component> </some-action-buttons-component> <dashlet-filter [data]="data" , [filtersconfig]="filtersIFilterConfig[]" , (filteredData)="..."> </dashlet-filter> <container-element [ngSwitch]="reportType" [height]="height" [width]="width" [id]="id"> <chart-element switchCase="chart" (chartClick)="eventListener($event)" (chartHover)="eventListener($event)" (afterChartLoaded)="eventListener($event)"> <container-element [ngSwitch]="libraryType" default="chartjs"> <chartJs-element switchCase="chartjs" [options]="options" [chartType]="chartType" (events)=""> </chartJs-element> <highCharts-element switchCase="highCharts" [options]="options" [chartType]="chartType" (events)=""> </highCharts-element> <d3-element switchCase="d3" [options]="options" [chartType]="chartType" (events)=""> </d3-element> <custom-chartTypes switchCase="custom"> <container-element [ngSwitch]="reportSubType"> <map-element switchCase="map" [options]="options" [chartType]="chartType" (events)=""> </map-element> <bigNumber switchCase="bigNumber" [options]="chartOptions"></bigNumber> <other switchCase="others" [options]="chartOptions"></other> </container-element> </custom-chartTypes> </container-element> </chart-element> <table-element switchCase="table" (rowClicked)="eventListener($event)"> <container-element [ngSwitch]="libraryType" default="datatables"> <dataTable-component switchCase="datatables" [...options]="tableOptions"> </dataTable-component> <custom-table switchCase="custom"> <container-element [ngSwitch]="reportSubType"> <stripped-table switchCase="stripped-table" [...options]="tableOptions"></stripped-table> </container-element> </custom-table> </container-element> </table-element> <dataset-element switchCase="dataset" (events)="eventListener($event)"> </dataset-element> <new-reportType-element switchCase="newReportType"> <container-element [ngSwitch]="libraryType" default="datatables"> <custom-table switchCase="custom"> <container-element [ngSwitch]="reportSubType"> <custom-element switchCase="type1" [...options]="customOptions"></custom-element> </container-element> </custom-table> </container-element> </new-reportType-element> </container-element> </sb-dashlet> |
...