gamma-app-controller 1.1.28 → 1.1.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/shared/advanced-component/gamma-advance-chart/gamma-advance-chart.component.mjs +46 -13
- package/fesm2015/gamma-app-controller.mjs +45 -11
- package/fesm2015/gamma-app-controller.mjs.map +1 -1
- package/fesm2020/gamma-app-controller.mjs +43 -11
- package/fesm2020/gamma-app-controller.mjs.map +1 -1
- package/lib/shared/advanced-component/gamma-advance-chart/gamma-advance-chart.component.d.ts +7 -3
- package/package.json +1 -1
|
@@ -8852,25 +8852,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
8852
8852
|
}] } });
|
|
8853
8853
|
|
|
8854
8854
|
class GammaAdvanceChartComponent {
|
|
8855
|
-
constructor(commonService, toastr, kpiService, renderer, el, cdr) {
|
|
8855
|
+
constructor(commonService, toastr, kpiService, renderer, el, cdr, environment) {
|
|
8856
8856
|
this.commonService = commonService;
|
|
8857
8857
|
this.toastr = toastr;
|
|
8858
8858
|
this.kpiService = kpiService;
|
|
8859
8859
|
this.renderer = renderer;
|
|
8860
8860
|
this.el = el;
|
|
8861
8861
|
this.cdr = cdr;
|
|
8862
|
+
this.environment = environment;
|
|
8862
8863
|
this.chartConfig = {};
|
|
8863
8864
|
this.page_config = {};
|
|
8864
8865
|
this.isLoader = true;
|
|
8865
8866
|
this.creatChartDataSource = undefined;
|
|
8866
8867
|
this.finalChartDataSource = [];
|
|
8867
8868
|
this.isFullScreen = false;
|
|
8869
|
+
this.onChartPointClick = new EventEmitter();
|
|
8868
8870
|
this.customizeTooltip = (info) => ({
|
|
8869
8871
|
html: `<table width=100% height=30 border=0 style=\'font-size: 13px\'>
|
|
8870
|
-
|
|
8871
|
-
|
|
8872
|
-
|
|
8873
|
-
|
|
8872
|
+
<tr><td style=\'text-align: left; color: white\'> ${this.commonService.convertToTitleCase(this.chartConfig.argumentField)} : ${info.argumentText} </td></tr>
|
|
8873
|
+
<tr><td style=\'text-align: left; color: white; padding-top: 5px\'> ${info.seriesName} :
|
|
8874
|
+
${this.getValue(info.seriesName, info.value)} </td></tr>
|
|
8875
|
+
</table>`,
|
|
8874
8876
|
});
|
|
8875
8877
|
this.customizeText = ({ percentText, item: { argument } }) => `<span style='font-size: 28px'>${percentText}</span><br/>${argument}`;
|
|
8876
8878
|
}
|
|
@@ -8883,6 +8885,7 @@ class GammaAdvanceChartComponent {
|
|
|
8883
8885
|
else {
|
|
8884
8886
|
this.isLoader = true;
|
|
8885
8887
|
this.page_config = value;
|
|
8888
|
+
this.page_parms = value.titleParams;
|
|
8886
8889
|
this.chartOrderBy = (value.kpiConfig.descendingOrder) ? value.kpiConfig.descendingOrder : false;
|
|
8887
8890
|
this.chartDisplayDateFormat = (value.kpiConfig.displayDateFormat) ? value.kpiConfig.displayDateFormat : "MM-DD";
|
|
8888
8891
|
if (value.kpiConfig.dataSource && value.kpiConfig.dataSource.length !== 0) {
|
|
@@ -8930,7 +8933,6 @@ class GammaAdvanceChartComponent {
|
|
|
8930
8933
|
this.isLoader = false;
|
|
8931
8934
|
}
|
|
8932
8935
|
else if (value.kpiConfig.formate == "hourly") {
|
|
8933
|
-
debugger;
|
|
8934
8936
|
if (value.kpiConfig.dataSource && value.kpiConfig.dataSource.length !== 0) {
|
|
8935
8937
|
const sortedData = value.kpiConfig.dataSource
|
|
8936
8938
|
.filter(record => record.hour)
|
|
@@ -8939,7 +8941,6 @@ class GammaAdvanceChartComponent {
|
|
|
8939
8941
|
const filteredObjects = sortedData.filter(data => data.recordDate === mostRecentRecord.recordDate);
|
|
8940
8942
|
this.getHourChart(filteredObjects, value.kpiConfig.dataConfig);
|
|
8941
8943
|
this.isChartvisible == true;
|
|
8942
|
-
this.chartConfig.caption = sortedData[0].recordDate;
|
|
8943
8944
|
}
|
|
8944
8945
|
else {
|
|
8945
8946
|
this.cdr.detectChanges();
|
|
@@ -9059,6 +9060,32 @@ class GammaAdvanceChartComponent {
|
|
|
9059
9060
|
pointClickHandler(arg) {
|
|
9060
9061
|
arg.target.select();
|
|
9061
9062
|
}
|
|
9063
|
+
getAllChartPointClick(event) {
|
|
9064
|
+
let title = this.page_config.kpiConfig.dataConfig.commonConfig['title'];
|
|
9065
|
+
let title_datafield = this.page_config.kpiConfig.dataConfig.commonConfig['dataField'];
|
|
9066
|
+
const title_params = (title_datafield) ? event.target.data[title_datafield] : "";
|
|
9067
|
+
let widget_title = (title) ? title + title_params : title_params;
|
|
9068
|
+
if ('recordDate' in event.target.data) {
|
|
9069
|
+
const recordDate = event.target.data.recordDate;
|
|
9070
|
+
if (this.chartDisplayDateFormat == "MM-DD") {
|
|
9071
|
+
const fullDate = moment$1(recordDate, "MM-DD")
|
|
9072
|
+
.year(moment$1().year())
|
|
9073
|
+
.format(this.environment.dataFormat);
|
|
9074
|
+
event.target.data.recordDate = fullDate;
|
|
9075
|
+
}
|
|
9076
|
+
}
|
|
9077
|
+
let obj = {
|
|
9078
|
+
data: event.target.data,
|
|
9079
|
+
keyToPass: this.page_config.kpiConfig.keyToPass,
|
|
9080
|
+
tableTitle: (this.page_parms) ? this.page_parms + widget_title : widget_title,
|
|
9081
|
+
viewId: this.page_config.viewId,
|
|
9082
|
+
drillDownType: "natural",
|
|
9083
|
+
drilldownFrom: this.page_config.viewId,
|
|
9084
|
+
drilldownTo: "",
|
|
9085
|
+
};
|
|
9086
|
+
this.onChartPointClick.emit(obj);
|
|
9087
|
+
console.log("onchart click", obj);
|
|
9088
|
+
}
|
|
9062
9089
|
getValue(contextKey, value) {
|
|
9063
9090
|
let context_data;
|
|
9064
9091
|
const sml_key = contextKey.toLowerCase();
|
|
@@ -9201,15 +9228,20 @@ class GammaAdvanceChartComponent {
|
|
|
9201
9228
|
return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
|
|
9202
9229
|
}
|
|
9203
9230
|
}
|
|
9204
|
-
GammaAdvanceChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAdvanceChartComponent, deps: [{ token: CommonService }, { token: i3$1.ToastrService }, { token: kpicommonService$1 }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9205
|
-
GammaAdvanceChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaAdvanceChartComponent, selector: "app-gamma-advance-chart", inputs: { componentId: "componentId", kpi_name: "kpi_name", chartDataSource: "chartDataSource" }, ngImport: i0, template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n [displayType]=\"'chart'\"></app-title>\n </ng-container>\n <div class=\"mx-2 p-2 bg-gray-800\">\n <app-loader *ngIf=\"isLoader\"></app-loader>\n <ng-container\n *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'pie' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'bubble'\">\n \n <dx-chart id=\"chart\" [dataSource]=\"finalChartDataSource\"\n [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n [valueAxis]=\"chartConfig.valueAxisConfig\">\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item && item.axis\">\n <dxi-value-axis name=\"{{item.axis}}\" position=\"{{item.position}}\">\n <dxo-title text=\"{{item.name}}\"></dxo-title>\n </dxi-value-axis>\n </ng-container>\n\n </ng-container>\n <dxo-argument-axis>\n <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n </dxo-argument-axis>\n <dxo-tooltip [enabled]=\"true\" [shared]=\"true\" [customizeTooltip]=\"customizeTooltip\">\n </dxo-tooltip>\n <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n </dxo-common-series-settings>\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item && item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\" color=\"{{item.color}}\">\n </dxi-series>\n </ng-container>\n <ng-container *ngIf=\"item && !item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\">\n </dxi-series>\n </ng-container>\n\n </ng-container>\n <dxo-size [height]=\"chartHeight\">\n </dxo-size>\n <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n </dxo-legend>\n </dx-chart>\n </ng-container>\n\n\n\n <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n [dataSource]=\"finalChartDataSource\" centerTemplate=\"centerTemplate\"\n (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item.color\">\n <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n name=\"{{item.name}}\" color=\"{{item.color}}\">\n <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n <dxo-connector [visible]=\"true\"></dxo-connector>\n </dxo-label>\n </dxi-series>\n </ng-container>\n <ng-container *ngIf=\"!item.color\">\n <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n name=\"{{item.name}}\">\n <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n <dxo-connector [visible]=\"true\"></dxo-connector>\n </dxo-label>\n </dxi-series>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"currency\">\n </dxo-tooltip>\n <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n </circle>\n \n <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\n <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n <!-- display: inline -->\n <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n </text>\n </svg>\n </ng-container>\n </dx-pie-chart>\n </ng-container>\n\n <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n palette=\"Soft Pastel\">\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n <dxo-export [enabled]=\"false\"></dxo-export>\n <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n <dxo-item>\n <dxo-border [visible]=\"true\"> </dxo-border>\n </dxo-item>\n <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n [customizeText]=\"customizeText\"></dxo-label>\n </dx-funnel>\n\n </ng-container>\n\n <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n <div class=\"mx-5 overflow-x-auto\">\n <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n <div class=\"flex flex-row\">\n <div class=\"h-10 text-sm items-center min-w-12 max-w-[30%] justify-center flex\">\n {{item.datasource}}\n </div>\n <div class=\"inline-block \">\n <div class=\"flex flex-nowrap justify-center \">\n <ng-container *ngFor=\"let box of item.dataset\">\n <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n matTooltipClass=\"custom-tooltip\">\n <div class=\"rounded-full\" [ngStyle]=\"{\n 'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n 'width.px': box.size,\n 'hover': box.hover,\n 'height.px': box.size\n }\" (mouseenter)=\"box.isHovered = true\"\n (mouseleave)=\"box.isHovered = false\">\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"inline-block\">\n <div class=\"flex flex-nowrap justify-center\">\n <div class=\"flex-shrink-0 w-12 max-w-[20%] h-full flex items-center justify-center\"></div>\n <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n [ngStyle]=\"{'height': 'auto'}\">\n <span class=\"text-rotate\">\n {{item}}\n </span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n </div>\n\n <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>", dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { kind: "component", type: i6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { kind: "component", type: i6.DxoLegendComponent, selector: "dxo-legend", inputs: ["backgroundColor", "border", "columnCount", "columnItemSpacing", "customizeHint", "customizeItems", "customizeText", "font", "horizontalAlignment", "itemsAlignment", "itemTextFormat", "itemTextPosition", "margin", "markerSize", "markerTemplate", "orientation", "paddingLeftRight", "paddingTopBottom", "rowCount", "rowItemSpacing", "title", "verticalAlignment", "visible", "hoverMode", "position"] }, { kind: "component", type: i6.DxoBorderComponent, selector: "dxo-border", inputs: ["color", "cornerRadius", "dashStyle", "opacity", "visible", "width", "bottom", "left", "right", "top"] }, { kind: "component", type: i6.DxoTitleComponent, selector: "dxo-title", inputs: ["font", "horizontalAlignment", "margin", "placeholderSize", "subtitle", "text", "verticalAlignment", "textOverflow", "wordWrap", "alignment"] }, { kind: "component", type: i6.DxoSizeComponent, selector: "dxo-size", inputs: ["height", "width"] }, { kind: "component", type: i6.DxoTooltipComponent, selector: "dxo-tooltip", inputs: ["arrowLength", "border", "color", "container", "contentTemplate", "cornerRadius", "customizeTooltip", "enabled", "font", "format", "interactive", "opacity", "paddingLeftRight", "paddingTopBottom", "shadow", "zIndex", "argumentFormat", "location", "shared", "isShown", "text", "position", "showMode", "customizeLinkTooltip", "customizeNodeTooltip", "linkTooltipTemplate", "nodeTooltipTemplate"] }, { kind: "component", type: i7$1.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: i8$3.DxFunnelComponent, selector: "dx-funnel", inputs: ["adaptiveLayout", "algorithm", "argumentField", "colorField", "dataSource", "disabled", "elementAttr", "export", "hoverEnabled", "inverted", "item", "label", "legend", "loadingIndicator", "margin", "neckHeight", "neckWidth", "palette", "paletteExtensionMode", "pathModified", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "selectionMode", "size", "sortData", "theme", "title", "tooltip", "valueField"], outputs: ["onDisposing", "onDrawn", "onExported", "onExporting", "onFileSaving", "onHoverChanged", "onIncidentOccurred", "onInitialized", "onItemClick", "onLegendClick", "onOptionChanged", "onSelectionChanged", "adaptiveLayoutChange", "algorithmChange", "argumentFieldChange", "colorFieldChange", "dataSourceChange", "disabledChange", "elementAttrChange", "exportChange", "hoverEnabledChange", "invertedChange", "itemChange", "labelChange", "legendChange", "loadingIndicatorChange", "marginChange", "neckHeightChange", "neckWidthChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "selectionModeChange", "sizeChange", "sortDataChange", "themeChange", "titleChange", "tooltipChange", "valueFieldChange"] }, { kind: "component", type: i6.DxoItemComponent, selector: "dxo-item", inputs: ["border", "hoverStyle", "selectionStyle"] }, { kind: "component", type: i10.DxPieChartComponent, selector: "dx-pie-chart", inputs: ["adaptiveLayout", "animation", "annotations", "centerTemplate", "commonAnnotationSettings", "commonSeriesSettings", "customizeAnnotation", "customizeLabel", "customizePoint", "dataSource", "diameter", "disabled", "elementAttr", "export", "innerRadius", "legend", "loadingIndicator", "margin", "minDiameter", "palette", "paletteExtensionMode", "pathModified", "pointSelectionMode", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "segmentsDirection", "series", "seriesTemplate", "size", "sizeGroup", "startAngle", "theme", "title", "tooltip", "type"], outputs: ["onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onTooltipHidden", "onTooltipShown", "adaptiveLayoutChange", "animationChange", "annotationsChange", "centerTemplateChange", "commonAnnotationSettingsChange", "commonSeriesSettingsChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataSourceChange", "diameterChange", "disabledChange", "elementAttrChange", "exportChange", "innerRadiusChange", "legendChange", "loadingIndicatorChange", "marginChange", "minDiameterChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "segmentsDirectionChange", "seriesChange", "seriesTemplateChange", "sizeChange", "sizeGroupChange", "startAngleChange", "themeChange", "titleChange", "tooltipChange", "typeChange"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTitleComponent, selector: "app-title", inputs: ["title", "multiple", "isFilterDisplay", "icon", "iconName", "displayType", "keyToPass", "fixOperationLevles", "operators"], outputs: ["onOperatorClick"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
|
|
9231
|
+
GammaAdvanceChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAdvanceChartComponent, deps: [{ token: CommonService }, { token: i3$1.ToastrService }, { token: kpicommonService$1 }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
9232
|
+
GammaAdvanceChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaAdvanceChartComponent, selector: "app-gamma-advance-chart", inputs: { componentId: "componentId", kpi_name: "kpi_name", chartDataSource: "chartDataSource" }, outputs: { onChartPointClick: "onChartPointClick" }, ngImport: i0, template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n [displayType]=\"'chart'\"></app-title>\n </ng-container>\n <div class=\"mx-2 p-2 bg-gray-800\">\n <app-loader *ngIf=\"isLoader\"></app-loader>\n <ng-container\n *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'pie' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'bubble'\">\n \n <dx-chart id=\"chart\" [dataSource]=\"finalChartDataSource\" (onPointClick)=\"getAllChartPointClick($event)\"\n [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n [valueAxis]=\"chartConfig.valueAxisConfig\">\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item && item.axis\">\n <dxi-value-axis name=\"{{item.axis}}\" position=\"{{item.position}}\">\n <dxo-title text=\"{{item.name}}\"></dxo-title>\n </dxi-value-axis>\n </ng-container>\n\n </ng-container>\n <dxo-argument-axis>\n <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n </dxo-argument-axis>\n <dxo-tooltip [enabled]=\"true\" [shared]=\"true\" [customizeTooltip]=\"customizeTooltip\">\n </dxo-tooltip>\n <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n </dxo-common-series-settings>\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item && item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\" color=\"{{item.color}}\">\n </dxi-series>\n </ng-container>\n <ng-container *ngIf=\"item && !item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\">\n </dxi-series>\n </ng-container>\n\n </ng-container>\n <dxo-size [height]=\"chartHeight\">\n </dxo-size>\n <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n </dxo-legend>\n </dx-chart>\n </ng-container>\n\n\n\n <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n [dataSource]=\"finalChartDataSource\" centerTemplate=\"centerTemplate\"\n (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item.color\">\n <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n name=\"{{item.name}}\" color=\"{{item.color}}\">\n <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n <dxo-connector [visible]=\"true\"></dxo-connector>\n </dxo-label>\n </dxi-series>\n </ng-container>\n <ng-container *ngIf=\"!item.color\">\n <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n name=\"{{item.name}}\">\n <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n <dxo-connector [visible]=\"true\"></dxo-connector>\n </dxo-label>\n </dxi-series>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"currency\">\n </dxo-tooltip>\n <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n </circle>\n \n <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\n <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n <!-- display: inline -->\n <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n </text>\n </svg>\n </ng-container>\n </dx-pie-chart>\n </ng-container>\n\n <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n palette=\"Soft Pastel\">\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n <dxo-export [enabled]=\"false\"></dxo-export>\n <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n <dxo-item>\n <dxo-border [visible]=\"true\"> </dxo-border>\n </dxo-item>\n <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n [customizeText]=\"customizeText\"></dxo-label>\n </dx-funnel>\n\n </ng-container>\n\n <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n <div class=\"mx-5 overflow-x-auto\">\n <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n <div class=\"flex flex-row\">\n <div class=\"h-10 text-sm items-center min-w-12 max-w-[30%] justify-center flex\">\n {{item.datasource}}\n </div>\n <div class=\"inline-block \">\n <div class=\"flex flex-nowrap justify-center \">\n <ng-container *ngFor=\"let box of item.dataset\">\n <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n matTooltipClass=\"custom-tooltip\">\n <div class=\"rounded-full\" [ngStyle]=\"{\n 'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n 'width.px': box.size,\n 'hover': box.hover,\n 'height.px': box.size\n }\" (mouseenter)=\"box.isHovered = true\"\n (mouseleave)=\"box.isHovered = false\">\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"inline-block\">\n <div class=\"flex flex-nowrap justify-center\">\n <div class=\"flex-shrink-0 w-12 max-w-[20%] h-full flex items-center justify-center\"></div>\n <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n [ngStyle]=\"{'height': 'auto'}\">\n <span class=\"text-rotate\">\n {{item}}\n </span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n </div>\n\n <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>", dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { kind: "component", type: i6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { kind: "component", type: i6.DxoLegendComponent, selector: "dxo-legend", inputs: ["backgroundColor", "border", "columnCount", "columnItemSpacing", "customizeHint", "customizeItems", "customizeText", "font", "horizontalAlignment", "itemsAlignment", "itemTextFormat", "itemTextPosition", "margin", "markerSize", "markerTemplate", "orientation", "paddingLeftRight", "paddingTopBottom", "rowCount", "rowItemSpacing", "title", "verticalAlignment", "visible", "hoverMode", "position"] }, { kind: "component", type: i6.DxoBorderComponent, selector: "dxo-border", inputs: ["color", "cornerRadius", "dashStyle", "opacity", "visible", "width", "bottom", "left", "right", "top"] }, { kind: "component", type: i6.DxoTitleComponent, selector: "dxo-title", inputs: ["font", "horizontalAlignment", "margin", "placeholderSize", "subtitle", "text", "verticalAlignment", "textOverflow", "wordWrap", "alignment"] }, { kind: "component", type: i6.DxoSizeComponent, selector: "dxo-size", inputs: ["height", "width"] }, { kind: "component", type: i6.DxoTooltipComponent, selector: "dxo-tooltip", inputs: ["arrowLength", "border", "color", "container", "contentTemplate", "cornerRadius", "customizeTooltip", "enabled", "font", "format", "interactive", "opacity", "paddingLeftRight", "paddingTopBottom", "shadow", "zIndex", "argumentFormat", "location", "shared", "isShown", "text", "position", "showMode", "customizeLinkTooltip", "customizeNodeTooltip", "linkTooltipTemplate", "nodeTooltipTemplate"] }, { kind: "component", type: i7$1.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: i8$3.DxFunnelComponent, selector: "dx-funnel", inputs: ["adaptiveLayout", "algorithm", "argumentField", "colorField", "dataSource", "disabled", "elementAttr", "export", "hoverEnabled", "inverted", "item", "label", "legend", "loadingIndicator", "margin", "neckHeight", "neckWidth", "palette", "paletteExtensionMode", "pathModified", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "selectionMode", "size", "sortData", "theme", "title", "tooltip", "valueField"], outputs: ["onDisposing", "onDrawn", "onExported", "onExporting", "onFileSaving", "onHoverChanged", "onIncidentOccurred", "onInitialized", "onItemClick", "onLegendClick", "onOptionChanged", "onSelectionChanged", "adaptiveLayoutChange", "algorithmChange", "argumentFieldChange", "colorFieldChange", "dataSourceChange", "disabledChange", "elementAttrChange", "exportChange", "hoverEnabledChange", "invertedChange", "itemChange", "labelChange", "legendChange", "loadingIndicatorChange", "marginChange", "neckHeightChange", "neckWidthChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "selectionModeChange", "sizeChange", "sortDataChange", "themeChange", "titleChange", "tooltipChange", "valueFieldChange"] }, { kind: "component", type: i6.DxoItemComponent, selector: "dxo-item", inputs: ["border", "hoverStyle", "selectionStyle"] }, { kind: "component", type: i10.DxPieChartComponent, selector: "dx-pie-chart", inputs: ["adaptiveLayout", "animation", "annotations", "centerTemplate", "commonAnnotationSettings", "commonSeriesSettings", "customizeAnnotation", "customizeLabel", "customizePoint", "dataSource", "diameter", "disabled", "elementAttr", "export", "innerRadius", "legend", "loadingIndicator", "margin", "minDiameter", "palette", "paletteExtensionMode", "pathModified", "pointSelectionMode", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "segmentsDirection", "series", "seriesTemplate", "size", "sizeGroup", "startAngle", "theme", "title", "tooltip", "type"], outputs: ["onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onTooltipHidden", "onTooltipShown", "adaptiveLayoutChange", "animationChange", "annotationsChange", "centerTemplateChange", "commonAnnotationSettingsChange", "commonSeriesSettingsChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataSourceChange", "diameterChange", "disabledChange", "elementAttrChange", "exportChange", "innerRadiusChange", "legendChange", "loadingIndicatorChange", "marginChange", "minDiameterChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "segmentsDirectionChange", "seriesChange", "seriesTemplateChange", "sizeChange", "sizeGroupChange", "startAngleChange", "themeChange", "titleChange", "tooltipChange", "typeChange"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTitleComponent, selector: "app-title", inputs: ["title", "multiple", "isFilterDisplay", "icon", "iconName", "displayType", "keyToPass", "fixOperationLevles", "operators"], outputs: ["onOperatorClick"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
|
|
9206
9233
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAdvanceChartComponent, decorators: [{
|
|
9207
9234
|
type: Component,
|
|
9208
|
-
args: [{ selector: 'app-gamma-advance-chart', template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n [displayType]=\"'chart'\"></app-title>\n </ng-container>\n <div class=\"mx-2 p-2 bg-gray-800\">\n <app-loader *ngIf=\"isLoader\"></app-loader>\n <ng-container\n *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'pie' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'bubble'\">\n \n <dx-chart id=\"chart\" [dataSource]=\"finalChartDataSource\"\n [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n [valueAxis]=\"chartConfig.valueAxisConfig\">\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item && item.axis\">\n <dxi-value-axis name=\"{{item.axis}}\" position=\"{{item.position}}\">\n <dxo-title text=\"{{item.name}}\"></dxo-title>\n </dxi-value-axis>\n </ng-container>\n\n </ng-container>\n <dxo-argument-axis>\n <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n </dxo-argument-axis>\n <dxo-tooltip [enabled]=\"true\" [shared]=\"true\" [customizeTooltip]=\"customizeTooltip\">\n </dxo-tooltip>\n <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n </dxo-common-series-settings>\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item && item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\" color=\"{{item.color}}\">\n </dxi-series>\n </ng-container>\n <ng-container *ngIf=\"item && !item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\">\n </dxi-series>\n </ng-container>\n\n </ng-container>\n <dxo-size [height]=\"chartHeight\">\n </dxo-size>\n <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n </dxo-legend>\n </dx-chart>\n </ng-container>\n\n\n\n <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n [dataSource]=\"finalChartDataSource\" centerTemplate=\"centerTemplate\"\n (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item.color\">\n <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n name=\"{{item.name}}\" color=\"{{item.color}}\">\n <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n <dxo-connector [visible]=\"true\"></dxo-connector>\n </dxo-label>\n </dxi-series>\n </ng-container>\n <ng-container *ngIf=\"!item.color\">\n <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n name=\"{{item.name}}\">\n <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n <dxo-connector [visible]=\"true\"></dxo-connector>\n </dxo-label>\n </dxi-series>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"currency\">\n </dxo-tooltip>\n <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n </circle>\n \n <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\n <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n <!-- display: inline -->\n <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n </text>\n </svg>\n </ng-container>\n </dx-pie-chart>\n </ng-container>\n\n <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n palette=\"Soft Pastel\">\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n <dxo-export [enabled]=\"false\"></dxo-export>\n <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n <dxo-item>\n <dxo-border [visible]=\"true\"> </dxo-border>\n </dxo-item>\n <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n [customizeText]=\"customizeText\"></dxo-label>\n </dx-funnel>\n\n </ng-container>\n\n <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n <div class=\"mx-5 overflow-x-auto\">\n <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n <div class=\"flex flex-row\">\n <div class=\"h-10 text-sm items-center min-w-12 max-w-[30%] justify-center flex\">\n {{item.datasource}}\n </div>\n <div class=\"inline-block \">\n <div class=\"flex flex-nowrap justify-center \">\n <ng-container *ngFor=\"let box of item.dataset\">\n <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n matTooltipClass=\"custom-tooltip\">\n <div class=\"rounded-full\" [ngStyle]=\"{\n 'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n 'width.px': box.size,\n 'hover': box.hover,\n 'height.px': box.size\n }\" (mouseenter)=\"box.isHovered = true\"\n (mouseleave)=\"box.isHovered = false\">\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"inline-block\">\n <div class=\"flex flex-nowrap justify-center\">\n <div class=\"flex-shrink-0 w-12 max-w-[20%] h-full flex items-center justify-center\"></div>\n <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n [ngStyle]=\"{'height': 'auto'}\">\n <span class=\"text-rotate\">\n {{item}}\n </span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n </div>\n\n <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>" }]
|
|
9209
|
-
}], ctorParameters: function () { return [{ type: CommonService }, { type: i3$1.ToastrService }, { type: kpicommonService$1 }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }
|
|
9235
|
+
args: [{ selector: 'app-gamma-advance-chart', template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n [displayType]=\"'chart'\"></app-title>\n </ng-container>\n <div class=\"mx-2 p-2 bg-gray-800\">\n <app-loader *ngIf=\"isLoader\"></app-loader>\n <ng-container\n *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'pie' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'bubble'\">\n \n <dx-chart id=\"chart\" [dataSource]=\"finalChartDataSource\" (onPointClick)=\"getAllChartPointClick($event)\"\n [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n [valueAxis]=\"chartConfig.valueAxisConfig\">\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item && item.axis\">\n <dxi-value-axis name=\"{{item.axis}}\" position=\"{{item.position}}\">\n <dxo-title text=\"{{item.name}}\"></dxo-title>\n </dxi-value-axis>\n </ng-container>\n\n </ng-container>\n <dxo-argument-axis>\n <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n </dxo-argument-axis>\n <dxo-tooltip [enabled]=\"true\" [shared]=\"true\" [customizeTooltip]=\"customizeTooltip\">\n </dxo-tooltip>\n <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n </dxo-common-series-settings>\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item && item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\" color=\"{{item.color}}\">\n </dxi-series>\n </ng-container>\n <ng-container *ngIf=\"item && !item.color\">\n <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n name=\"{{item.name}}\">\n </dxi-series>\n </ng-container>\n\n </ng-container>\n <dxo-size [height]=\"chartHeight\">\n </dxo-size>\n <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n </dxo-legend>\n </dx-chart>\n </ng-container>\n\n\n\n <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n [dataSource]=\"finalChartDataSource\" centerTemplate=\"centerTemplate\"\n (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n <ng-container *ngIf=\"item.color\">\n <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n name=\"{{item.name}}\" color=\"{{item.color}}\">\n <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n <dxo-connector [visible]=\"true\"></dxo-connector>\n </dxo-label>\n </dxi-series>\n </ng-container>\n <ng-container *ngIf=\"!item.color\">\n <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n name=\"{{item.name}}\">\n <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n <dxo-connector [visible]=\"true\"></dxo-connector>\n </dxo-label>\n </dxi-series>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"currency\">\n </dxo-tooltip>\n <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n </circle>\n \n <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\n <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n <!-- display: inline -->\n <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n </text>\n </svg>\n </ng-container>\n </dx-pie-chart>\n </ng-container>\n\n <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n palette=\"Soft Pastel\">\n <ng-container *ngIf=\"chartConfig.size\">\n <dxo-size [height]=\"chartConfig.size\">\n </dxo-size>\n </ng-container>\n <dxo-export [enabled]=\"false\"></dxo-export>\n <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n <dxo-item>\n <dxo-border [visible]=\"true\"> </dxo-border>\n </dxo-item>\n <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n [customizeText]=\"customizeText\"></dxo-label>\n </dx-funnel>\n\n </ng-container>\n\n <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n <div class=\"mx-5 overflow-x-auto\">\n <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n <div class=\"flex flex-row\">\n <div class=\"h-10 text-sm items-center min-w-12 max-w-[30%] justify-center flex\">\n {{item.datasource}}\n </div>\n <div class=\"inline-block \">\n <div class=\"flex flex-nowrap justify-center \">\n <ng-container *ngFor=\"let box of item.dataset\">\n <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n matTooltipClass=\"custom-tooltip\">\n <div class=\"rounded-full\" [ngStyle]=\"{\n 'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n 'width.px': box.size,\n 'hover': box.hover,\n 'height.px': box.size\n }\" (mouseenter)=\"box.isHovered = true\"\n (mouseleave)=\"box.isHovered = false\">\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <div class=\"inline-block\">\n <div class=\"flex flex-nowrap justify-center\">\n <div class=\"flex-shrink-0 w-12 max-w-[20%] h-full flex items-center justify-center\"></div>\n <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n [ngStyle]=\"{'height': 'auto'}\">\n <span class=\"text-rotate\">\n {{item}}\n </span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n </div>\n\n <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>" }]
|
|
9236
|
+
}], ctorParameters: function () { return [{ type: CommonService }, { type: i3$1.ToastrService }, { type: kpicommonService$1 }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
9237
|
+
type: Inject,
|
|
9238
|
+
args: [APP_ENVIRONMENT]
|
|
9239
|
+
}] }]; }, propDecorators: { componentId: [{
|
|
9210
9240
|
type: Input
|
|
9211
9241
|
}], kpi_name: [{
|
|
9212
9242
|
type: Input
|
|
9243
|
+
}], onChartPointClick: [{
|
|
9244
|
+
type: Output
|
|
9213
9245
|
}], chartDataSource: [{
|
|
9214
9246
|
type: Input,
|
|
9215
9247
|
args: ['chartDataSource']
|