{"__symbolic":"module","version":4,"metadata":{"DashboardService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"getBlankChart":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"DashboardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"lib-dashboard","template":"\n  <style>\n    gridster {\n      height: 100%;\n      margin: 0;\n      padding: 0;\n      background-color: rgb(179, 177, 177);\n    /* position: inherit !important; */\n  }\n\n  * /deep/ .ui-messages {\n    margin: 0em !important;\n    padding: 0.6em !important;\n    font-size: 1em !important;\n  }\n\n  * /deep/ .ui-messages-summary {\n    font-weight: normal;\n  }\n\n  :host {\n    width: 100%;\n    /* height: 120vh; */\n    display: flex;\n    flex-direction: column;\n  }\n\n  .gridster-container {\n    margin-top: 10px;\n    margin-left: 10px;\n    margin-right: 10px;\n  }\n\n  .top-btn-left {\n    width: 150px;\n    margin: 5px;\n  }\n\n  .top-btn-right {\n    width: 350px;\n    margin: 5px;\n  }\n\n  .widget-header {\n    background-color: #012e64;\n  }\n\n  .widget-move {\n    cursor: move;\n  }\n\n  .widget-header-btn {\n    cursor: default;\n  }\n\n  .header-margin-left {\n    margin-left: 5px;\n  }\n\n  .header-margin-right {\n    margin-right: 5px;\n  }\n\n  .widget-header-buttons {\n    display: inline-block;\n  }\n\n  app-nomination-widget {\n    height: 100%;\n  }\n\n  .section {\n    height: 100%;\n  }\n\n  .section2 {\n    height: 100%;\n  }\n\n  .row {\n    margin-right: 0px !important;\n  }\n\n  .loading {\n    color: black;\n    position: absolute;\n    left: 50%;\n    top: 30%;\n    z-index: 2\n  }\n  </style>\n<div *ngIf=\"availableDashboards && availableDashboards.length > 0\" class=\"row\" style=\"height: 100%; flex: 1\">\n  <div class=\"col-md-12\" [ngStyle]=\"hideHeader ? {'display' : 'none'} : {}\">\n    <!-- <span *ngIf=\"!dashboardEditMode\" style=\"font-size: 24px;\" class=\"pull-left\">{{activeDashboard.name}}</span> -->\n    <select *ngIf=\"!dashboardEditMode\" [disabled]=\"panelEditMode\" class=\"form-control input-sm pull-left\"  style=\"font-size: 16px; width: 200px; height: 30px\"\n      [(ngModel)]=\"activeDashboardName\" (change)=\"onDashboardChange()\">\n      <option *ngFor=\"let dashboard of availableDashboards\" [ngValue]=\"dashboard.name\">{{dashboard.name}}</option>\n    </select>\n    <input *ngIf=\"dashboardEditMode\" [disabled]=\"panelEditMode\" type=\"text\" class=\"form-control input-sm pull-left\"\n      style=\"font-size: 16px; width: 200px; height: 30px\" maxlength=\"20\" [(ngModel)]=\"activeDashboard.name\">\n\n    <button *ngIf=\"!dashboardEditMode\" [disabled]=\"panelEditMode\" title=\"Edit dashboard\" class=\"btn btn-link pull-left\" (click)=\"onEdit()\" style=\"padding-right: 0px\">\n      <span class=\"glyphicon glyphicon-pencil highlight-hover\"></span>\n    </button>\n    <button *ngIf=\"!dashboardEditMode && (activeDashboard.options && !activeDashboard.options['default'])\"\n      [disabled]=\"panelEditMode\" class=\"btn btn-link pull-left\" title=\"Delete dashboard\" (click)=\"onDelete()\">\n      <span class=\"glyphicon glyphicon-trash highlight-hover\"></span>\n    </button>\n    <button *ngIf=\"!dashboardEditMode\" class=\"btn btn-link pull-left\" [disabled]=\"panelEditMode\" title=\"Create new dashboard\" (click)=\"onDashboardAdd()\">\n      <span class=\"glyphicon glyphicon-th-large highlight-hover\"></span>\n    </button>\n    <button *ngIf=\"dashboardEditMode\" class=\"btn btn-link pull-left\" [disabled]=\"panelEditMode\" title=\"Save\" (click)=\"onSave()\" style=\"padding-right: 0px\">\n      <span class=\"glyphicon glyphicon-floppy-disk highlight-hover\"></span>\n    </button>\n    <button *ngIf=\"dashboardEditMode\" class=\"btn btn-link pull-left\" [disabled]=\"panelEditMode\" title=\"Cancel\" (click)=\"onCancel()\" style=\"padding-right: 0px\">\n      <span class=\"glyphicon glyphicon-remove highlight-hover\"></span>\n    </button>\n    <button *ngIf=\"dashboardEditMode\" class=\"btn btn-link pull-left\" [disabled]=\"panelEditMode\" title=\"Add chart\" (click)=\"onPanelAdd()\">\n      <span class=\"fa fa-bar-chart highlight-hover\"></span>\n    </button>\n  </div>\n</div>\n<div *ngIf=\"activeDashboard\" class=\"row\" style=\"display: flex; height: 100%; flex-direction: column;\">\n  <div class=\"col-12\" style=\"height: 100%\">\n    <div class=\"gridster-container\" [ngStyle]=\"{'display': panelEditMode ? 'none': 'inherit', 'flex': 1, 'height': '100%', 'margin': '0 -5px'}\">\n      <gridster [options]=\"options\" style=\"background: transparent; padding: 0px\">\n        <gridster-item [item]=\"item\" *ngFor=\"let item of activeDashboard.data; let i= index;\" style=\"background: white; border-radius: 3px;\">\n          <div [ngStyle]=\"!item.chartOptions.showHeader && !dashboardEditMode ? {'display': 'none'} : {'display': ''}\" [ngClass]=\"dashboardEditMode ? 'drag-handler widget-header widget-move' : 'drag-handler widget-header'\">\n            <div class=\"item-buttons widget-header-buttons\">\n              <div class=\"float-left header-margin-left\"></div>\n               <h4 *ngIf=\"item.name\" style=\"margin-left: 10px;\">{{item.name}}</h4>\n            </div>\n            <div *ngIf=\"dashboardEditMode\" class=\"pull-right \">\n            <!-- <button class=\"btn btn-link\" style=\"padding: 0px;\" (click)=\"onEditDataBinding(item, i)\">\n                <span class=\"fa fa-database\"></span>\n              </button> -->\n              <button class=\"btn btn-link\" style=\"padding: 0px;\" (click)=\"onEditPanel(item, i)\">\n                <span class=\"glyphicon glyphicon-pencil\"></span>\n              </button>\n              <button class=\"btn btn-link\" (click)=\"removeItem(item)\">\n                <span class=\"glyphicon glyphicon-trash\"></span>\n              </button>\n            </div>\n           <!-- <div *ngIf=\"item.chartOptions.showHeader && item.chartOptions.realtime && item.chartOptions.loadStatus !== 'Completed'\" class=\"pull-right\">\n              <i class=\"fa fa-spinner fa-spin fa-2x\" title=\"Loading\"></i>\n            </div> -->\n          </div>\n          <div *ngIf=\"item.chartOptions.realtime && item.chartOptions.loadStatus !== 'Completed'\" class=\"pull-right\">\n            <i class=\"fa fa-spinner fa-spin fa-2x loading\" title=\"Loading\"></i>\n          </div>\n          <div class=\"section\" [ngStyle]=\"{'color': 'black', 'height': '100%', 'opacity': item.chartOptions.realtime && item.chartOptions.loadStatus !== 'Completed' ? '0.3' : ''}\" [ngSwitch]=\"item.chartLibrary\">\n            <p-messages *ngIf=\"item.chartOptions.showError && item.chartOptions.errorMessage\" [(value)]=\"item.chartOptions.errorMessage\"></p-messages>\n            <lib-dashboard-echarts *ngSwitchCase=\"'echarts'\" [chartConfig]=\"item.chartOptions.chartConfig\"\n              [dataset]=\"item.chartOptions.datasetCopy ? item.chartOptions.datasetCopy : item.chartOptions.dataset\"></lib-dashboard-echarts>\n            <lib-dashboard-primeng *ngSwitchCase=\"'primeng'\"\n              [chartConfig]=\"item.chartOptions.chartConfig\"\n              [(searchQuery)]=\"item.chartOptions.searchQuery\" [(timeWindow)]=\"item.chartOptions.timeWindow\"\n              (onEvent)=\"processEvent(item, $event)\"\n              [dataset]=\"item.chartOptions.datasetCopy ? item.chartOptions.datasetCopy : item.chartOptions.dataset\"></lib-dashboard-primeng>\n          </div>\n        </gridster-item>\n      </gridster>\n    </div>\n    <div *ngIf=\"panelToBeEdited\" class=\"gridster-container\" [ngStyle]=\"{'display': panelEditMode ? 'inherit': 'none', 'flex': 1, 'height': '100%'}\">\n      <gridster [options]=\"resetOptions\" style=\"background: transparent;\">\n        <gridster-item [item]=\"panelToBeEdited\" style=\"background: white; border-radius: 3px;\">\n          <div class=\"panel panel-default\" style=\"width: 100%;\">\n            <div matDialogTitle class=\"panel-heading panel-dark-background\">\n              <b>{{panelToBeEdited.name}}</b>\n            </div>\n            <div class=\"panel-body\" style=\"height: 50vh; padding: 0px\">\n              <div [ngStyle]=\"{'float': 'left', 'width': '80%', 'height': '100%'}\">\n                <div [ngStyle]=\"{'height': '100%'}\" [ngSwitch]=\"panelToBeEdited.chartLibrary\">\n                  <lib-dashboard-echarts *ngSwitchCase=\"'echarts'\" [chartConfig]=\"panelToBeEdited.chartOptions.chartConfig\" [dataset]=\"panelToBeEdited.chartOptions.datasetCopy ? panelToBeEdited.chartOptions.datasetCopy : panelToBeEdited.chartOptions.dataset\"></lib-dashboard-echarts>\n                  <lib-dashboard-primeng *ngSwitchCase=\"'primeng'\" [chartConfig]=\"panelToBeEdited.chartOptions.chartConfig\" [dataset]=\"panelToBeEdited.chartOptions.datasetCopy ? panelToBeEdited.chartOptions.datasetCopy : panelToBeEdited.chartOptions.dataset\"></lib-dashboard-primeng>\n                </div>\n              </div>\n              <div *ngIf=\"panelToBeEdited.chartOptions.chartConfig\" style=\"float: left; width: 20%; height: 50%; border-left: 5px solid darkgrey;\">\n              <div class=\"panel panel-default\" style=\"min-height: 100%; max-height: 100%; overflow: auto\">\n                  <div class=\"panel-heading\"><label>Chart Configuration</label></div>\n                  <div class=\"panel-body\" style=\"color: black\">\n                    <p-accordion [multiple]=\"true\">\n                      <p-accordionTab header=\"Legend\" [selected]=\"true\">\n                        <div *ngIf=\"panelToBeEdited.chartOptions.chartConfig.legend\" class=\"row\">\n                          <div class=\"col-md-12\">\n                            <div *ngIf=\"panelToBeEdited.chartOptions.chartConfig.legend.top\" class=\" row\">\n                              <div class=\"col-md-12\">\n                                <label>Padding top</label>\n                                <input class=\"form-control\" type=\"text\" [(ngModel)]=\"panelToBeEdited.chartOptions.chartConfig.legend.top\" (change)=\"publishChange()\">\n                              </div>\n                            </div>\n                            <div *ngIf=\"panelToBeEdited.chartOptions.chartConfig.legend.left\" class=\" row\">\n                              <div class=\"col-md-12\">\n                                <label>Position</label>\n                                <select class=\"form-control\" [(ngModel)]=\"panelToBeEdited.chartOptions.chartConfig.legend.left\" (change)=\"publishChange()\">\n                                  <option [value]=\"'center'\">Center</option>\n                                  <option [value]=\"'left'\">Left</option>\n                                  <option [value]=\"'right'\">Right</option>\n                                </select>\n                              </div>\n                            </div>\n                          </div>\n                        </div>\n                      </p-accordionTab>\n                      <p-accordionTab header=\"X axis\">\n                        <div *ngIf=\"panelToBeEdited.chartOptions.chartConfig.xAxis\" class=\"row\">\n                          <div class=\"col-md-12\">\n                            <label>Type</label>\n                            <input class=\"form-control\" [(ngModel)]=\"panelToBeEdited.chartOptions.chartConfig.xAxis.type\">\n                          </div>\n                        </div>\n                      </p-accordionTab>\n                      <p-accordionTab header=\"Y axis\">\n                        <div *ngIf=\"panelToBeEdited.chartOptions.chartConfig.yAxis\" class=\"row\">\n                          <div class=\"col-md-12\">\n                            <label>Type</label>\n                            <input class=\"form-control\" [(ngModel)]=\"panelToBeEdited.chartOptions.chartConfig.yAxis.type\">\n                          </div>\n                        </div>\n                      </p-accordionTab>\n                    </p-accordion>\n                  </div>\n                </div>\n              </div>\n              <div style=\"float: left; width: 20%; height: 50%; border-left: 5px solid darkgrey;\">\n                <div class=\"panel panel-default\" style=\"min-height: 100%; max-height: 100%; overflow: auto\">\n                  <div class=\"panel-heading\"><label>Series Configuration</label></div>\n                  <div class=\"panel-body\" style=\"color: black\">\n                    <p-accordion [multiple]=\"true\">\n                      <ng-container *ngFor=\"let series of panelToBeEdited.chartOptions.chartConfig.series; index as i\">\n                        <p-accordionTab header=\"Series {{i + 1}}\" [selected]=\"i === 0 ? true: false\">\n                          <div class=\"row\">\n                            <div class=\"col-md-12\">\n                              <label>Type</label>\n                              <select class=\"form-control\" [(ngModel)]=\"series.type\" (change)=\"publishChange()\">\n                                <option [value]=\"'pie'\">Pie</option>\n                                <option [value]=\"'gauge'\">Gauge</option>\n                                <option [value]=\"'line'\">Line</option>\n                                <option [value]=\"'bar'\">Bar</option>\n                                <option [value]=\"'heatmap'\">Heatmap</option>\n                              </select>\n                            </div>\n                          </div>\n                        </p-accordionTab>\n                      </ng-container>\n                    </p-accordion>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"panel-footer panel-dark-background\" style=\"position:relative; overflow:auto;\">\n              <div class=\"pull-left\" style=\"margin-left: 10px;\">\n                <button class=\"btn btn-primary\" (click)=\"onSavePanelEdit()\">Save</button>\n              </div>\n              <div class=\"pull-right\">\n                <button class=\"btn btn-primary\" (click)=\"onCancelPanelEdit()\">Cancel</button>\n              </div>\n            </div>\n          </div>\n        </gridster-item>\n      </gridster>\n    </div>\n  </div>\n</div>\n  ","styles":[]}]}],"members":{"dashboards":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":275,"character":3}}]}],"hideHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":278,"character":3}}]}],"rowHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":281,"character":3}}]}],"dashboardChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":284,"character":3}}]}],"onEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":287,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"DashboardService"},{"__symbolic":"reference","module":"@angular/core","name":"IterableDiffers","line":291,"character":29}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"processEvent":[{"__symbolic":"method"}],"updatePanel":[{"__symbolic":"method"}],"changedOptions":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"onEdit":[{"__symbolic":"method"}],"onPanelAdd":[{"__symbolic":"method"}],"onEditPanel":[{"__symbolic":"method"}],"onSavePanelEdit":[{"__symbolic":"method"}],"onCancelPanelEdit":[{"__symbolic":"method"}],"onEditDataBinding":[{"__symbolic":"method"}],"onDashboardAdd":[{"__symbolic":"method"}],"onDashboardChange":[{"__symbolic":"method"}],"onSave":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"onDelete":[{"__symbolic":"method"}],"publishChange":[{"__symbolic":"method"}]}},"DashboardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"DashboardComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":15,"character":4},{"__symbolic":"reference","module":"angular-gridster2","name":"GridsterModule","line":16,"character":4},{"__symbolic":"reference","module":"@bolt-analytics/ngx-dashboard-echarts","name":"NgxDashboardEchartsModule","line":17,"character":4},{"__symbolic":"reference","module":"@bolt-analytics/ngx-dashboard-primeng","name":"LibDashboardPrimengModule","line":18,"character":4},{"__symbolic":"reference","module":"primeng/accordion","name":"AccordionModule","line":19,"character":4},{"__symbolic":"reference","module":"primeng/message","name":"MessageModule","line":20,"character":4},{"__symbolic":"reference","module":"primeng/messages","name":"MessagesModule","line":21,"character":4}],"exports":[{"__symbolic":"reference","name":"DashboardComponent"}]}]}],"members":{}}},"origins":{"DashboardService":"./lib/dashboard.service","DashboardComponent":"./lib/dashboard.component","DashboardModule":"./lib/dashboard.module"},"importAs":"@bolt-analytics/ngx-dashboard"}