var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } return new (P || (P = Promise))(function (resolve, reject) { function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } step((generator = generator.apply(thisArg, _arguments || [])).next()); }); }; var Unibase; (function (Unibase) { let Platform; (function (Platform) { let Analytics; (function (Analytics) { let Components; (function (Components) { class _Chart extends Platform.Core.BaseComponent { constructor() { super(); this.IsChartBuilder = true; this.ChartAxis = { Horizontal: 'XAxis', Vertical: 'YAxis', GroupBy: 'GroupBy', LineChart: 'LineChart' }; this.xaxisColumns = []; this.yaxisColumns = []; this.groupColumns = []; this.chartBaseColumns = []; this.yaxisColors = []; this.groupColors = []; this.XaxisData = []; this.YaxisData = []; this.XaxisStackData = []; this.stackedDataSet = []; this.groupedStackedDataSet = []; this.Dataset = []; this.DataSetColors = []; this.paletteColors = []; this.DatasetTooltips = []; this.colorAppliedOn = 1; this.ColumnColors = []; this.RowColors = []; this.IsColorPalette = false; this.defaultColor = false; this.barThikness = 40; this.appliedColumnColor = []; this.appliedColumnValueColor = []; this.Colors = []; this.toolTipArray = []; this.isColumnRename = false; this.ChartSelectedColumns = []; this.SelectedValueColorColumns = []; this.CoordinateDisplayText = ""; this.displayLegend = false; this.isFilterable = []; this.chartContainerId = ""; this.lineChartColumns = []; this.xAxisLables = []; this.isDataLabel = false; this.isTooltipHeader = true; this._reportManager = Analytics.Managers.ReportManager.Instance(); this._reportBuilder = Analytics.Reports.ReportBuilder.Instance(); } selected_Coordinate(obj) { return __awaiter(this, void 0, void 0, function* () { var instance = this; let Chart = []; let html = ""; let XAxis = false, YAxis = false, GroupBy = false, LineChart = false, isBaseColumn = false; var isFill = instance.isFilterable[obj.ColumnName]; if (obj.CoordinateTypeId == instance.ChartAxis.Horizontal) { Chart = instance.xaxisColumns; XAxis = true; if (instance._reportBuilder.isEdit == true || instance._reportBuilder.reportid == 0) { html = instance._reportBuilderTemplate.loadSelect2Column(obj.ColumnId, obj.ColumnName, obj.DataType); instance._reportBuilder.setSelectOption("xaxis_select"); } } else if (obj.CoordinateTypeId == instance.ChartAxis.Vertical) { Chart = instance.yaxisColumns; YAxis = true; if (instance._reportBuilder.isEdit == true || instance._reportBuilder.reportid == 0) { html = instance._reportBuilderTemplate.loadSelect2Column(obj.ColumnId, obj.ColumnName, obj.DataType); instance._reportBuilder.setSelectOption("yaxis_select"); } } else if (obj.CoordinateTypeId == instance.ChartAxis.LineChart) { Chart = instance.lineChartColumns; LineChart = true; if (instance._reportBuilder.isEdit == true || instance._reportBuilder.reportid == 0) { html = instance._reportBuilderTemplate.loadSelect2Column(obj.ColumnId, obj.ColumnName, obj.DataType); instance._reportBuilder.setSelectOption("line_chart_select"); } } else if (obj.CoordinateTypeId == instance.ChartAxis.BaseColumn) { Chart = instance.chartBaseColumns; isBaseColumn = true; if (instance._reportBuilder.isEdit == true || instance._reportBuilder.reportid == 0) { html = instance._reportBuilderTemplate.loadSelect2Column(obj.ColumnId, obj.ColumnName, obj.DataType); instance._reportBuilder.setSelectOption("base_column_select"); } } else { Chart = instance.groupColumns; GroupBy = true; if (instance._reportBuilder.isEdit == true || instance._reportBuilder.reportid == 0) { html = instance._reportBuilderTemplate.loadSelect2Column(obj.ColumnId, obj.ColumnName, obj.DataType); instance._reportBuilder.setSelectOption("groupby_select"); } } Chart.push({ ChartColumnId: 0, ColumnId: obj.ColumnId, ColumnName: obj.ColumnName, AliasName: obj.AliasName, DataType: obj.DataType, IsHidden: true, Aggregation: Analytics.Reports.Enums.AggregationType.none, SortOrder: "none", DisplayText: obj.DisplayText, XAxis: XAxis, YAxis: YAxis, GroupBy: GroupBy, IsLineChart: LineChart, IsFilterable: (isFill) ? isFill.IsFilterable : false, YearComparisonType: 0, ColorType: obj.ColorType, IsBaseColumn: isBaseColumn, IsNumAbb: obj.IsNumAbb !== undefined ? obj.IsNumAbb : true }); if (obj.divId != undefined && obj.divId != "") { $("#" + obj.divId).append(html); } var len = instance._reportBuilder.selectedColumns.length; var reportid = instance._reportBuilder.reportid; if ((len > 0 && reportid != 0) || (reportid == 0)) { let Index = instance._reportBuilder.getIndexByAliasName_selectedColumnsArray(obj.DisplayText); if (Index == -1) { var selCol = new SelectedColumns(); selCol.ColumnId = obj.ColumnId; selCol.ColumnName = obj.ColumnName; selCol.AliasName = obj.AliasName; selCol.DisplayText = obj.DisplayText; selCol.DataType = obj.DataType; selCol.GroupBy = GroupBy; selCol.IsLineChart = LineChart; selCol.Isvisible = true; instance._reportBuilder._selectedColumns(selCol); yield instance._reportBuilder.load_data(instance._reportBuilder.table); } else { yield instance.chart_dataSet(); } } if (instance.IsChartBuilder == true) { instance._chartBuilder.coordinate_DropDown(obj.CoordinateTypeId); instance._chartBuilder.CoordinateDisplayText = ""; } instance.enableOrDisableChartIcons(); }); } clearChart(id) { let containerid = id.replace("-chart-canvas", ""); let html = document.getElementById(id).outerHTML; if (id == "myChart_FullScreen") { document.getElementById("ChartCanvasDiv_FullScreen").innerHTML = ' '; document.getElementById("ChartCanvasDiv_FullScreen").innerHTML = html; } else if (id == "myChart") { document.getElementById("ChartCanvasDiv").innerHTML = ' '; document.getElementById("ChartCanvasDiv").innerHTML = html; $("#legend").empty(); } else { document.getElementById("ChartCanvasDiv" + containerid).innerHTML = ' '; document.getElementById("ChartCanvasDiv" + containerid).innerHTML = html; } } groupedPivotRows(data, pivotRows) { var instance = this; let grouped = []; let pivotCol = instance._reportBuilder.pivot.ColumnName; var colId = instance.groupColumns[0].ColumnId; instance.addGroupColors(data, pivotCol, instance.ChartAxis.GroupBy); pivotRows.map(function (i) { let grpobj = grouped.find(x => x.Field == i) ? true : false; if (grpobj != true) { var grpcolor = instance.groupColors[pivotCol]; grouped.push({ Field: i, Color: grpcolor ? grpcolor.c : null }); } }); return { groupeddata: grouped, pivotdata: data }; } PivotData_Old() { var instance = this; let data = instance.ChartData; let xaxiscols = instance.xaxisColumns[0]; let grpcols = instance.groupColumns[0]; instance.addGroupColors(data, grpcols.DisplayText, instance.ChartAxis.GroupBy); var colvalwithcolors = ""; let pivotdata = [], grouped = [], stackedDataSetLabels = []; instance.XaxisStackData = []; instance.Colors = []; let index = 0; for (var i = 0; i < data.length; i++) { let dataitem = data[i]; let grpobj = grouped.find(x => x.Field == dataitem[grpcols.DisplayText]) ? true : false; if (grpobj != true) { var grpcolor = instance.groupColors[dataitem[grpcols.DisplayText]]; grouped.push({ Field: dataitem[grpcols.DisplayText], Color: grpcolor ? grpcolor.c : null }); index++; } for (let k = 0; k < instance.yaxisColumns.length; k++) { var yaxiscols = instance.yaxisColumns[k]; let dataobj = pivotdata.find(x => x[xaxiscols.DisplayText] == dataitem[xaxiscols.DisplayText] && x.stack == "stack" + k); ; if (dataobj == null || dataobj == undefined) { let obj = {}; obj[xaxiscols.DisplayText] = dataitem[xaxiscols.DisplayText]; obj[dataitem[grpcols.DisplayText]] = dataitem[yaxiscols.DisplayText]; obj["stack"] = "stack" + k; pivotdata.push(obj); instance.XaxisStackData.push(dataitem[xaxiscols.DisplayText]); } else { dataobj[dataitem[grpcols.DisplayText]] = dataitem[yaxiscols.DisplayText]; } } } if (instance.defaultColor || instance.IsColorPalette) instance.Colors[grpcols.DisplayText] = { colors: colvalwithcolors, columnName: grpcols.DisplayText }; return { groupeddata: grouped, pivotdata: pivotdata }; } PivotData() { var instance = this; let data = instance.ChartData; let xaxiscols = instance.xaxisColumns[0]; let grpcols = instance.groupColumns[0]; instance.addGroupColors(data, grpcols.DisplayText, instance.ChartAxis.GroupBy); var colvalwithcolors = ""; let pivotdata = [], grouped = [], stackedDataSetLabels = []; instance.XaxisStackData = []; instance.Colors = []; let index = 0; var groupedStackedData = []; for (let k = 0; k < instance.yaxisColumns.length; k++) { var yaxiscols = instance.yaxisColumns[k]; for (var i = 0; i < data.length; i++) { let dataitem = data[i]; let grpobj = grouped.find(x => x.Field == dataitem[grpcols.DisplayText]) ? true : false; if (grpobj != true) { var grpcolor = instance.groupColors[dataitem[grpcols.DisplayText]]; grouped.push({ Field: dataitem[grpcols.DisplayText], Color: grpcolor ? grpcolor.c : null }); index++; } let dataobj = pivotdata.find(x => x[xaxiscols.DisplayText] == dataitem[xaxiscols.DisplayText]); if (dataobj == null || dataobj == undefined) { let obj = {}; obj[xaxiscols.DisplayText] = dataitem[xaxiscols.DisplayText]; obj[dataitem[grpcols.DisplayText]] = dataitem[yaxiscols.DisplayText]; pivotdata.push(obj); instance.XaxisStackData.push(dataitem[xaxiscols.DisplayText]); } else { dataobj[dataitem[grpcols.DisplayText]] = dataitem[yaxiscols.DisplayText]; } } groupedStackedData[yaxiscols.DisplayText] = { Data: pivotdata, Stack: "stack" + k }; groupedStackedData.length = groupedStackedData.length + 1; pivotdata = []; } if (instance.defaultColor || instance.IsColorPalette) instance.Colors[grpcols.DisplayText] = { colors: colvalwithcolors, columnName: grpcols.DisplayText }; return { groupeddata: grouped, pivotdata: pivotdata, groupedStackedData: groupedStackedData }; } groupedStackDataSet() { var instance = this; var data = instance.PivotData(); let grpdata = [], DataSet = []; for (var y = 0; y < instance.yaxisColumns.length; y++) { var pivotdata = data.groupedStackedData[instance.yaxisColumns[y].AliasName]; for (var g = 0; g < data.groupeddata.length; g++) { pivotdata.Data.map(function (p) { if (p[data.groupeddata[g].Field]) grpdata.push(p[data.groupeddata[g].Field]); else grpdata.push(0); }); var color = ""; if (instance.paletteColors.length > 0) { color = instance.paletteColors[g]; } else { color = instance.getRandomColor(); } DataSet.push({ label: data.groupeddata[g].Field, data: grpdata, backgroundColor: color, stack: pivotdata.Stack, }); grpdata = []; instance.PivotDataSet = DataSet; } } function removeDuplicates(arr) { return arr.filter((item, index) => arr.indexOf(item) === index); } instance.XaxisStackData = removeDuplicates(instance.XaxisStackData); } groupedStackDataSet_Old() { var instance = this; var data = instance.PivotData(); let grpdata = [], DataSet = []; for (var i = 0; i < data.groupeddata.length; i++) { let stack = ""; data.pivotdata.map(function (p) { if (p[data.groupeddata[i].Field]) grpdata.push(p[data.groupeddata[i].Field]); else grpdata.push(0); stack = p.stack; }); DataSet.push({ label: data.groupeddata[i].Field, data: grpdata, backgroundColor: data.groupeddata[i].Color, stack: stack, }); grpdata = []; } DataSet.push(); instance.PivotDataSet = DataSet; } groupedStackDataSet_New() { var instance = this; instance.XaxisData = []; instance.groupedStackedDataSet = []; let data = instance.ChartData; let xaxiscols = instance.xaxisColumns[0]; let grpcols = instance.groupColumns[0]; for (var i = 0; i < data.length; i++) { var dataItem = data[i]; var XData = dataItem[xaxiscols.DisplayText]; instance.XaxisData.push(XData); for (var y = 0; y < instance.yaxisColumns.length; y++) { var yCol = instance.yaxisColumns[y]; var gData = []; for (var g = 0; g < instance.ChartData.length; g++) { var gVal = instance.ChartData[g][grpcols.DisplayText]; if (gVal == dataItem[grpcols.DisplayText]) gData.push(dataItem[yCol.DisplayText]); else gData.push(0); } var color = ""; if (instance.paletteColors.length > 0) { color = instance.paletteColors[i]; } else { color = instance.getRandomColor(); } var dataSet = { label: dataItem[grpcols.DisplayText], type: "bar", stack: "stack " + y, backgroundColor: color, data: gData, }; instance.groupedStackedDataSet.push(dataSet); } } function removeDuplicates(arr) { return arr.filter((item, index) => arr.indexOf(item) === index); } instance.XaxisStackData = removeDuplicates(instance.XaxisStackData); } stackedBar() { var instance = this; instance.stackedDataSet = []; let xaxiscols = instance.xaxisColumns[0]; let data = instance.ChartData; for (var i = 0; i < data.length; i++) { let dataitem = data[i]; var color = ""; if (instance.paletteColors.length > 0) { color = instance.paletteColors[i]; } else { color = instance.getRandomColor(); } for (let y = 0; y < instance.yaxisColumns.length; y++) { var yaxiscols = instance.yaxisColumns[y]; var ydata = []; for (var x = 0; x < instance.XaxisData.length; x++) { if (instance.XaxisData[x] == dataitem[xaxiscols.DisplayText]) ydata.push(dataitem[yaxiscols.DisplayText]); else ydata.push(0); } var obj = { label: dataitem[xaxiscols.DisplayText], type: "bar", stack: "stack " + y, backgroundColor: color, data: ydata, }; instance.stackedDataSet.push(obj); } } } test(id) { let canvas = document.getElementById(id); let ctx = canvas.getContext("2d"); var chart = new Chart(ctx, { type: 'bar', data: { labels: [2017, 2018, 2019, 2020, 2021, 2022, 2023], datasets: [{ label: "Income - Base", type: "bar", stack: "stack 0", backgroundColor: "#eece01", data: [30, 31, 32, 33, 34, 35, 36], }, { label: "Tax - Base", type: "bar", stack: "stack 0", backgroundColor: "#87d84d", data: [-15, -16, -17, -18, -19, -20, -21], }, { label: "Income - Base", type: "bar", stack: "stack 1", backgroundColor: "#f8981f", data: [20, 21, 22, 23, 24, 25, 26], }, { label: "Tax - Sensitivity", type: "bar", stack: "stack 1", backgroundColor: "#00b300", data: [-10, -11, -12, -13, -14, -15, -16] }] }, options: { scales: { xAxes: [{ stacked: true, ticks: { beginAtZero: true, maxRotation: 0, minRotation: 0 } }], yAxes: [{ stacked: true, }] }, } }); } pivotDataSet() { var instance = this; let colors = ""; var chartdata; var data; let pivotRows; instance.XaxisStackData = []; if (instance.IsChartBuilder) { chartdata = JSON.parse(instance._reportBuilder.tableData); } else { chartdata = instance.ChartData; } if (instance._reportBuilder.pivot.PivotRows.length != 0) { pivotRows = instance._reportBuilder.pivot.PivotRows; } data = instance.groupedPivotRows(chartdata, pivotRows); for (var i = 0; i < chartdata.length; i++) { let dataitem = chartdata[i]; let xaxiscols = instance.xaxisColumns[0]; instance.XaxisStackData.push(dataitem[xaxiscols.DisplayText]); } let grpdata = [], DataSet = []; for (var i = 0; i < data.groupeddata.length; i++) { data.pivotdata.map(function (p) { if (p[data.groupeddata[i].Field]) grpdata.push(p[data.groupeddata[i].Field]); else grpdata.push(0); }); DataSet.push({ label: data.groupeddata[i].Field, data: grpdata, backgroundColor: data.groupeddata[i].Color }); grpdata = []; } DataSet.push(); instance.PivotDataSet = DataSet; instance.ValueColors = colors; } toolTip() { var instance = this; instance.DatasetTooltips = []; if (instance.toolTipArray.length > 0) { instance.toolTipArray.sort((x, y) => Number(x.Index) - Number(y.Index)); for (var i = 0; i < instance.toolTipArray.length; i++) { var tooltiparr = instance.toolTipArray[i]; let Labelarr = []; instance.ChartData.map(function (v) { Labelarr.push(v[tooltiparr.ColumnName]); }); instance.DatasetTooltips.push({ ColumnName: tooltiparr.AliasName, DisplayText: tooltiparr.DisplayText, labels: Labelarr }); } } } toolTipDataItem(tooltipItem, data) { var instance = this; let chartType = Unibase.Platform.Analytics.Charts.Enums.ChartType; if (instance.ChartTypeId == chartType.doughnut || instance.ChartTypeId == chartType.pie) { if (instance.DatasetTooltips.length != 0) { let labels = []; for (var i = 0; i < instance.DatasetTooltips.length; i++) { var label; label = instance.DatasetTooltips[i].DisplayText || ''; if (label) { label += ': '; } label += instance.DatasetTooltips[i].labels[tooltipItem.dataIndex]; labels.push(this.convertLabelToPascalCase(label).toString()); } return labels; } else { let labels; labels = tooltipItem.dataset && tooltipItem.dataset.label && this.convertLabelToPascalCase(tooltipItem.dataset.label.toString().trim()) || ''; if (labels) { labels += ': '; } labels += data[tooltipItem.dataIndex]; return labels; } } else { if (instance.DatasetTooltips.length != 0) { let labels = []; for (var i = 0; i < instance.DatasetTooltips.length; i++) { var label; label = instance.DatasetTooltips[i].DisplayText || ''; if (label) { label += ': '; } if (instance.ChartTypeId == chartType.bubble) label += instance.DatasetTooltips[i].labels[tooltipItem.dataIndex - 1]; else label += instance.DatasetTooltips[i].labels[tooltipItem.dataIndex]; labels.push(this.convertLabelToPascalCase(label.toString())); } return labels; } else { let labels; labels = tooltipItem.dataset && tooltipItem.dataset.label && tooltipItem.dataset.label.toString().trim() || ''; if (labels) { labels += ': '; } labels = this.convertLabelToPascalCase(labels.toString()); labels += (instance.ChartTypeId == chartType.horizontalBar || instance.ChartTypeId == chartType.stackedHorizontalBar || instance.ChartTypeId == chartType.groupedstackedHorizontalBar) ? tooltipItem.parsed.x : tooltipItem.parsed.y; return labels; } } } addColumnColors() { var instance = this; let html = ""; let HasColors = 1; if (instance.appliedColumnColor.length == 0) { HasColors = 0; } $("#lstDatalists").empty(); var columns = []; instance.appliedColumnColor = []; instance.ChartSelectedColumns = []; let ChartColorPickerColumns; instance.ChartSelectedColumns = instance._chartBuilder.coordinate_Elements(true, true, true, true, true, true); if (instance.groupColumns.length != 0) ChartColorPickerColumns = instance._chartBuilder.coordinate_Elements(false, false, true, false, false, false); else ChartColorPickerColumns = instance._chartBuilder.coordinate_Elements(true, false, false, false, false, false); for (var i = 0; i < ChartColorPickerColumns.length; i++) { let ColumnId = ChartColorPickerColumns[i].ColumnId; let ColumnName = ChartColorPickerColumns[i].ColumnName; let DisplayText = ChartColorPickerColumns[i].DisplayText; if (jQuery.inArray(DisplayText, columns) == -1) { if (!instance.IsColorPalette) { let randomcolor = instance.getRandomColor(); instance.appliedColumnColor[DisplayText] = { "ColumnId": ColumnId, "ColumnName": ColumnName, "DisplayText": DisplayText, "Color": randomcolor }; var Color_len = instance.appliedColumnColor.length; instance.appliedColumnColor.length = Color_len + 1; } else { instance.appliedColumnColor[DisplayText] = { "ColumnId": ColumnId, "ColumnName": ColumnName, "DisplayText": DisplayText, "Color": instance.ColumnColors[0] }; var Color_len = instance.appliedColumnColor.length; instance.appliedColumnColor.length = Color_len + 1; } columns.push(DisplayText); } } } addColumnColors_new(tabledata) { var instance = this; instance.appliedColumnColor = []; instance.ChartSelectedColumns = []; instance.ChartSelectedColumns = instance._chartBuilder.coordinate_Elements(true, true, true, true, true, true); for (var i = 0; i < tabledata.length; i++) { var xaxiscol = instance.xaxisColumns[0]; let ColumnId = xaxiscol.ColumnId; let ColumnName = xaxiscol.ColumnName; let DisplayText = xaxiscol.DisplayText; let xcolumnValueColor = tabledata[i][DisplayText]; var isValExist = instance.appliedColumnColor[xcolumnValueColor + '_' + i]; if (isValExist == undefined) { if (!instance.IsColorPalette) { let randomcolor = instance.getRandomColor(); instance.appliedColumnColor[xcolumnValueColor + '_' + i] = { "ColumnId": ColumnId, "ColumnName": ColumnName, "DisplayText": DisplayText, "Value": xcolumnValueColor, "Color": randomcolor }; var Color_len = instance.appliedColumnColor.length; instance.appliedColumnColor.length = Color_len + 1; } else { instance.appliedColumnColor[xcolumnValueColor + '_' + i] = { "ColumnId": ColumnId, "ColumnName": ColumnName, "DisplayText": DisplayText, "Value": xcolumnValueColor, "Color": instance.ColumnColors[0] }; var Color_len = instance.appliedColumnColor.length; instance.appliedColumnColor.length = Color_len + 1; } } } } addValueColors(ColumnId, DisplayText, data) { var instance = this; let Color = ""; let tabledata = ""; let IsPivot = false; instance.ChartSelectedColumns = []; instance.appliedColumnValueColor = []; tabledata = data; if ((Unibase.Platform.Analytics.Reports.ReportBuilder.Instance().pivot.PivotRows)) { if (instance._reportBuilder.pivot.PivotRows.length != 0) { tabledata = instance._reportBuilder.pivot.PivotRows; IsPivot = true; } } var columnValues = []; for (var i = 0; i < tabledata.length; i++) { let Value = (IsPivot) ? tabledata[i] : tabledata[i][DisplayText]; if (Value != null) { Value = Value.toString(); } else { Value = ""; } let OrgValue = Value; if (jQuery.inArray(OrgValue, columnValues) == -1) { if (!instance.IsColorPalette) { Color = instance.getRandomColor(); instance.appliedColumnValueColor[DisplayText + '_' + OrgValue] = { "ColumnId": ColumnId, "DisplayText": DisplayText, "ColumnValue": OrgValue, "Color": Color }; var Values_len = instance.appliedColumnValueColor.length; instance.appliedColumnValueColor.length = Values_len + 1; } else { instance.appliedColumnValueColor[DisplayText + '_' + OrgValue] = { "ColumnId": ColumnId, "DisplayText": DisplayText, "ColumnValue": OrgValue, "Color": instance.RowColors[i] }; var Values_len = instance.appliedColumnValueColor.length; instance.appliedColumnValueColor.length = Values_len + 1; } columnValues.push(OrgValue); } } } addValueColors_new(data, displaytext, chartAxis) { var instance = this; let tabledata = ""; let IsPivot = false; instance.ChartSelectedColumns = []; instance.appliedColumnValueColor = []; instance.ChartSelectedColumns = instance._chartBuilder.coordinate_Elements(true, true, true, true, true, true); tabledata = data; if ((Unibase.Platform.Analytics.Reports.ReportBuilder.Instance().pivot.PivotRows)) { if (instance._reportBuilder.pivot.PivotRows.length != 0) { tabledata = instance._reportBuilder.pivot.PivotRows; IsPivot = true; } } instance.valueColors_new(tabledata, displaytext, instance.yaxisColumns, chartAxis); } valueColors(tabledata, displaytext, ycolumns, chartAxis) { var instance = this; let Color = ""; var groupvalues = []; let color_index = 0; for (var y = 0; y < ycolumns.length; y++) { var yaxiscol = ycolumns[y]; let index = 0; for (var i = 0; i < tabledata.length; i++) { if (chartAxis == instance.ChartAxis.GroupBy) { var grpVal = groupvalues.find(g => g == tabledata[i][displaytext]) ? true : false; if (grpVal) { continue; } groupvalues.push(tabledata[i][displaytext]); } var xyaxiscolvals = index; if (!instance.IsColorPalette) { Color = instance.getRandomColor(); instance.appliedColumnValueColor[xyaxiscolvals] = { "DisplayText": displaytext, "Value": xyaxiscolvals, "Color": Color }; var Values_len = instance.appliedColumnValueColor.length; instance.appliedColumnValueColor.length = Values_len + 1; } else { instance.appliedColumnValueColor[xyaxiscolvals] = { "DisplayText": displaytext, "Value": xyaxiscolvals, "Color": instance.RowColors[color_index] }; var Values_len = instance.appliedColumnValueColor.length; instance.appliedColumnValueColor.length = Values_len + 1; color_index++; } index++; } } } valueColors_new(tabledata, displaytext, ycolumns, chartAxis) { var instance = this; instance.yaxisColors = []; var groupvalues = [], valueColors = []; let color_index = 0; let color = "", colorwithpipe = ""; for (var y = 0; y < ycolumns.length; y++) { var yaxiscol = ycolumns[y]; let index = 0; colorwithpipe = ""; for (var i = 0; i < tabledata.length; i++) { if (chartAxis == instance.ChartAxis.GroupBy) { var grpVal = groupvalues.find(g => g == tabledata[i][displaytext]) ? true : false; if (grpVal) { continue; } groupvalues.push(tabledata[i][displaytext]); } if (!instance.IsColorPalette) { color = instance.getRandomColor(); valueColors.push(color); } else { color = instance.RowColors[color_index]; valueColors.push(color); color_index++; } colorwithpipe += "" + color + "|"; index++; } let yindex = true; if (instance.yaxisColors.length > 0) yindex = instance.yaxisColors.find(y => y.columnName != yaxiscol.ColumnName) ? true : false; if (yindex) { instance.yaxisColors.push({ columnName: yaxiscol.DisplayText, colors: valueColors, colorwithpipesymb: colorwithpipe }); valueColors = []; } } } getRandomColor() { let randomcolor = '#' + Math.floor(Math.random() * 16777215).toString(16); if (randomcolor == '#000000') { randomcolor = '#' + Math.floor(Math.random() * 16777215).toString(16); } if (randomcolor.length == 6) { randomcolor = randomcolor.replace("#", "#0"); } return randomcolor; } chartViewer_Colors(color, columnId, columnName) { var instance = this; if (color != "") { var Val = color.split("|"); for (var i = 0; i < Val.length; i++) { instance.DataSetColors.push(Val[i]); instance.appliedColumnValueColor[i] = { "Value": i, "Color": Val[i] }; var Values_len = instance.appliedColumnValueColor.length; instance.appliedColumnValueColor.length = Values_len + 1; } } } _dataSetColors_old(xdisplayText, displaytext, colorType) { var instance = this; var data = instance.ChartData; var colvalwithcolors = ""; instance.DataSetColors = []; for (var i = 0; i < data.length; i++) { var dataValue = data[i]; var ColumnColors = instance.appliedColumnValueColor[i]; if (ColumnColors) { instance.DataSetColors.push(ColumnColors.Color); colvalwithcolors += "" + ColumnColors.Color + "|"; } } instance.Colors[displaytext] = { colors: colvalwithcolors, columnName: displaytext }; } addyAxisColors(tabledata, ycolumns, chartAxis) { var instance = this; instance.yaxisColors = []; var groupvalues = []; let color_index = 0, paletteindex = 0; var color = ""; var colcolors = [], rowcolors = []; for (var y = 0; y < ycolumns.length; y++) { var yaxiscol = ycolumns[y]; colcolors = []; rowcolors = []; if (instance.colorAppliedOn == Unibase.Platform.Analytics.Enums.ColorType.column) { if (instance.paletteColors.length > 0) { color = instance.paletteColors[y]; } else { color = instance.getRandomColor(); } colcolors.push(color); instance.yaxisColors.push({ columnName: yaxiscol.AliasName, colors: colcolors }); } else { for (var i = 0; i < tabledata.length; i++) { if (instance.paletteColors.length > 0) { color = instance.paletteColors[paletteindex]; paletteindex++; } else { color = instance.getRandomColor(); } rowcolors.push(color); } instance.yaxisColors.push({ columnName: yaxiscol.AliasName, colors: rowcolors }); } } } addGroupColors(tabledata, displaytext, chartAxis) { var instance = this; instance.groupColors = []; var color = ""; if (chartAxis == instance.ChartAxis.GroupBy) { for (var i = 0; i < tabledata.length; i++) { var grpVal = instance.groupColors.find(g => g == tabledata[i][displaytext]) ? true : false; if (grpVal) { continue; } if (instance.paletteColors.length > 0) { color = instance.paletteColors[i]; } else { color = instance.getRandomColor(); } instance.groupColors[tabledata[i][displaytext]] = { c: color }; } } } _dataSetColors(displaytext) { var instance = this; instance.DataSetColors = []; var ycol = instance.yaxisColors.find(y => y.columnName.toLowerCase() == displaytext); if (ycol) { instance.DataSetColors = ycol.colors; } } chart_dataSet() { return __awaiter(this, void 0, void 0, function* () { var instance = this; !this._chartBuilder && (this._chartBuilder = Analytics.Charts.ChartBuilder.Instance()); var chartType = Unibase.Platform.Analytics.Charts.Enums.ChartType; if (instance.ChartTypeId != chartType.stackedBar && instance.ChartTypeId != chartType.stackedHorizontalBar) { instance.XaxisData = [], instance.XaxisStackData = [], instance.Dataset = []; instance.DataSetColors = []; var xaxisCols = instance.xaxisColumns; var yaxisCols = instance.yaxisColumns; if (yaxisCols.length > 0) instance.addyAxisColors(instance.ChartData, yaxisCols, instance.ChartAxis.Vertical); for (var x = 0; x < xaxisCols.length; x++) { var xColumn = xaxisCols[x]; let AliasName = xColumn.DisplayText.toLowerCase(); let ColumnName = xColumn.ColumnName.toLowerCase(); let xColumnId = xColumn.ColumnId; if (instance.ChartData) { for (var i = 0; i < instance.ChartData.length; i++) { var XData = instance.ChartData[i][AliasName]; XData = this.convertLabelToPascalCase((XData && XData.toString()) || ""); instance.XaxisData.push(XData); } } } if (instance.groupColumns.length == 0 || instance.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.bubble) { for (var y = 0; y < yaxisCols.length; y++) { var yColumns = yaxisCols[y]; let displayName = this.getReportColumnDisplayTextByAliasName(yColumns.AliasName); let AliasName = yColumns.AliasName.toLowerCase(); instance._dataSetColors(AliasName); if (instance.ChartData) { for (var j = 0; j < instance.ChartData.length; j++) { var YData = instance.ChartData[j][AliasName]; instance.YaxisData.push(YData); } } var Data = []; let chartType = Unibase.Platform.Analytics.Charts.Enums.ChartType; if (instance.ChartTypeId == chartType.bubble) { Data = instance.bubbleData(); } else { Data = instance.YaxisData; } var color = instance.getDataSetColors(); var ydata = { label: this.convertLabelToPascalCase(displayName || ""), data: Data, borderColor: color.boarderColor, backgroundColor: color.backgroundColor, borderWidth: 1, fill: instance.IsFill, }; if (instance.ChartTypeId == chartType.barWithLine) ydata["type"] = "bar"; if (instance.chartBaseColumns && instance.chartBaseColumns.length && instance.chartBaseColumns[0].AliasName) { ydata["base"] = instance.ChartData.map(x => x[instance.chartBaseColumns[0].AliasName])[0]; this.chartBaseValue = ydata["base"]; } else { this.chartBaseValue = 0; } instance.Dataset.push(ydata); instance.YaxisData = []; } } } let id = instance.ChartDivId ? instance.ChartDivId : 'myChart'; instance.chartType(id); }); } getDataSetColors() { var instance = this; var chartType = Unibase.Platform.Analytics.Charts.Enums.ChartType; let backgroundColor = []; if (instance.colorAppliedOn == Unibase.Platform.Analytics.Enums.ColorType.column) backgroundColor = instance.DataSetColors[0]; else backgroundColor = instance.DataSetColors; if (instance.ChartTypeId == chartType.area) { instance.IsFill = true; backgroundColor = instance.DataSetColors; } else { instance.IsFill = false; } let boarderColor = 'white'; if (instance.ChartTypeId == chartType.line || instance.ChartTypeId == chartType.barWithLine) boarderColor = backgroundColor; return { boarderColor: boarderColor, backgroundColor: backgroundColor }; } pivotTable() { return __awaiter(this, void 0, void 0, function* () { var instance = this; if (instance._reportBuilder.reportid == 0) { yield instance._reportBuilder.load_data(instance._reportBuilder.table); } }); } chartType(id) { var instance = this; let displayMode; var width = $(window).width(); if (width <= 576) { displayMode = Analytics.Reports.Enums.DisplayModeType.Mobile; } else { displayMode = Analytics.Reports.Enums.DisplayModeType.DeskTop; } if (instance.xaxisColumns.length > 1) { if (displayMode == Analytics.Reports.Enums.DisplayModeType.DeskTop) instance.barThikness = 30; else instance.barThikness = 5; } else { if (displayMode == Analytics.Reports.Enums.DisplayModeType.DeskTop) instance.barThikness = 40; else instance.barThikness = 30; } if (instance.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.bar) { instance.ChartTypeName = 'bar'; return instance.chart(id); } else if (instance.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.horizontalBar) { instance.ChartTypeName = 'horizontalBar'; return instance.chart(id); } else if (instance.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.area) { instance.ChartTypeName = 'line'; return instance.chart(id); } else if (instance.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.doughnut) { instance.ChartTypeName = 'doughnut'; return instance.pieanddoughnutchart(id); } else if (instance.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.line) { instance.ChartTypeName = 'line'; return instance.chart(id); } else if (instance.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.pie) { instance.ChartTypeName = 'pie'; return instance.pieanddoughnutchart(id); } else if (instance.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.stackedBar) { instance.ChartTypeName = 'bar'; return instance.stackChart(id); } else if (instance.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.stackedHorizontalBar) { instance.ChartTypeName = 'horizontalBar'; return instance.stackChart(id); } else if (instance.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.bubble) { instance.ChartTypeName = 'bubble'; return instance.bubbleChart(id); } else if (instance.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.barWithLine) { $("#linechart").removeClass("hidden"); instance.ChartTypeName = 'bar'; return instance.chart(id); } } chart(id) { return __awaiter(this, void 0, void 0, function* () { var instance = this; let DataSet; let xaxisData; let isStack = false; let indexAxis = 'x'; this.updateDatasetForDataLabel(); if (instance.groupColumns.length != 0) { if (instance._reportBuilder.pivot.ColumnName) { yield instance.pivotTable(); instance.pivotDataSet(); } else { instance.groupedStackDataSet(); } if (instance.PivotDataSet && instance.PivotDataSet.length != 0) DataSet = JSON.stringify(instance.PivotDataSet); xaxisData = JSON.stringify(instance.XaxisStackData); } else { if (instance.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.barWithLine) instance.barWithLine(); DataSet = JSON.stringify(instance.Dataset); xaxisData = JSON.stringify(instance.XaxisData); } instance.clearChart(id); if (instance.ChartTypeName == "horizontalBar") { instance.ChartTypeName = 'bar'; indexAxis = 'y'; } const horizontalDottedLine = { id: 'horizontalDottedLine', afterDraw: function (chart, args, options) { const { ctx, _metasets, chartArea: { top, right, bottom, left, width, height }, scales: { xAxes, yAxes } } = chart; if (instance.chartBaseColumns && instance.chartBaseColumns.length) { let baseValue = Math.round(_metasets[0]._dataset.base); ctx.save(); ctx.setLineDash([10, 10]); ctx.strokeStyle = 'blue'; ctx.strokeRect(left, yAxes.getPixelForValue(baseValue), width, 0); ctx.font = ctx.font; ctx.fontStyle = _metasets[0]._dataset.borderColor; ctx.textBaseLine = 'middle'; ctx.fillText(baseValue.toLocaleString('en'), right + 10, yAxes.getPixelForValue(baseValue) + 5); ctx.restore(); } } }; const { isXAxisNumAbb, isYAxisNumAbb } = instance.isNumberAbbr(); let canvas = document.getElementById(id); let ctx = canvas.getContext("2d"); var chart = `new Chart(ctx, { type:'` + instance.ChartTypeName + `', data: { labels:` + xaxisData + `, datasets:` + DataSet + ` }, options: { layout:{ padding:{ right:${instance.chartBaseColumns && instance.chartBaseColumns.length ? 80 : instance.isDataLabel && 20}, top:${instance.isDataLabel && 20}, bottom:${instance.isDataLabel && 20}, }, }, plugins:{ tooltip: { displayColors: false, callbacks: { label: function (tooltipItem, data) { data = tooltipItem.dataset.data; instance.toolTip(); var label = instance.toolTipDataItem(tooltipItem, data); return label; }, ${!instance.isTooltipHeader ? 'title: function() { }, ' : ''} }, }, legend: { display:` + instance.displayLegend + `, position:'` + instance.legendType + `', labels:{ boxWidth:13, }, }, }, responsive: true, maintainAspectRatio: false, scales: { yAxes: { stacked: ` + isStack + `, barPercentage:0.3, categoryPercentage: 1, ticks: { beginAtZero: true, callback: function(value, index, ticks) { if (instance.tickLabelLength > 0){ if ('${indexAxis.toString().toLowerCase()}' == 'y' ){ var text = this.getLabelForValue(value); ${instance.tickLabelLength ? 'return text && text.toString().slice(0,instance.tickLabelLength) || 0;' : 'return text;'} } else{ return value; } }else{ return instance.abbreviateNumber(value,this,isYAxisNumAbb); } }, } }, xAxes: { stacked: ` + isStack + `, barPercentage:0.3, categoryPercentage: 1, ticks: { beginAtZero: true, callback: function(value, index, ticks) { if (instance.tickLabelLength > 0){ if ('${indexAxis.toString().toLowerCase()}'== 'x' ){ var text = this.getLabelForValue(value); ${instance.tickLabelLength ? 'return text && text.toString().slice(0,instance.tickLabelLength) || 0;' : 'return text;'} } else{ return value; } }else{ return instance.abbreviateNumber(value,this,isXAxisNumAbb); } }, } } }, onClick: onChartClick.bind(this), indexAxis: '${indexAxis}', }, plugins:[horizontalDottedLine ${instance.isDataLabel ? ',ChartDataLabels' : ''}], })`; var c = eval(chart); function onChartClick(evt, items) { this.onChartClickHandler(evt, items, c, false); } }); } pieanddoughnutchart(id) { return __awaiter(this, void 0, void 0, function* () { var instance = this; let DataSet; let xaxisData; this.updateDatasetForDataLabel(); if (instance.groupColumns.length != 0) { if (instance._reportBuilder.pivot.ColumnName) { yield instance.pivotTable(); instance.pivotDataSet(); } else { instance.groupedStackDataSet(); } if (instance.PivotDataSet && instance.PivotDataSet.length != 0) DataSet = JSON.stringify(instance.PivotDataSet); xaxisData = JSON.stringify(instance.XaxisStackData); } else { DataSet = JSON.stringify(instance.Dataset); xaxisData = JSON.stringify(instance.XaxisData); } instance.clearChart(id); let canvas = document.getElementById(id); let ctx = canvas.getContext("2d"); var chart = `new Chart(ctx, { type:'` + instance.ChartTypeName + `', data: { labels:` + xaxisData + `, datasets:` + DataSet + ` }, options: { layout:{ padding:${instance.isDataLabel && 20}, }, plugins:{ legend: { display:` + instance.displayLegend + `, position:'` + instance.legendType + `', labels:{ boxWidth:13, }, }, tooltip: { displayColors: false, callbacks: { label: function (tooltipItem, data) { data = tooltipItem.dataset.data; instance.toolTip(); var label = instance.toolTipDataItem(tooltipItem, data); return label; }, ${!instance.isTooltipHeader ? 'title: function() { }, ' : ''} }, }, }, responsive: true, maintainAspectRatio: false, onClick: onChartClick.bind(this), }, ${instance.isDataLabel ? 'plugins:[ChartDataLabels],' : ''} })`; var c = eval(chart); function onChartClick(evt, items) { this.onChartClickHandler(evt, items, c, false, false); } return c; }); } onChartClickHandler(evt, items, c, isBubbleChart, isStackedChart) { var activePoint = c.getElementsAtEventForMode(evt, 'index', { intersect: true }, false)[0]; if (activePoint) { let rv_instance = Unibase.Platform.Analytics.Components.ReportViewer.Instance().getReportViewerInstance(this.chartContainerId); if (this._reportBuilder.isEdit) return ""; let reportInfo = rv_instance.reportResponse.result.ReportInfo; let filters = []; if (reportInfo.IsLinkReport) { this._reportManager.getSubReports(reportInfo.ReportId).then((response) => { if (response.status == Unibase.Data.Status.Success && response.result.length) { let subReport = response.result[0]; var filters = []; if (subReport.SubReportTypeId == Unibase.Platform.Analytics.Reports.Enums.SubReportType.Report) { let subReportParams = JSON.parse(subReport.Filters); for (var i = 0; i < subReportParams.length; i++) { var param = subReportParams[i]; if (param.Isvalue) { filters.push({ ParameterName: param.ParameterValue, ParameterValue: param.ParameterName, ExpOp: 1 }); } else { if (this.xaxisColumns[0] && this.xaxisColumns[0].AliasName == param.ParameterName) { filters.push({ ParameterName: param.ParameterValue, ParameterValue: this.XaxisData[activePoint.index], ExpOp: 1 }); } else { if (rv_instance.reportResponse.result.ReportJsonData && rv_instance.reportResponse.result.ReportJsonData.Result.Data) { var reportData = JSON.parse(rv_instance.reportResponse.result.ReportJsonData.Result.Data); let idx = isBubbleChart ? activePoint.index - 1 : activePoint.index; var rowData; if (!isStackedChart) { rowData = reportData.find(x => x[this.xaxisColumns[0].AliasName].toLowerCase() == this.XaxisData[idx].toLowerCase()); } else { rowData = reportData[items[0].datasetIndex]; } if (rowData) { if (rowData[param.ParameterValue]) { filters.push({ ParameterName: param.ParameterValue, ParameterValue: rowData[param.ParameterValue].toString(), ExpOp: 1 }); } } } } } } this.linkReport(subReport.ChildReportId, filters, this.chartContainerId + "_viewall"); } else { if (rv_instance.reportResponse.result.ReportJsonData && rv_instance.reportResponse.result.ReportJsonData.Result.Data) { var reportData = JSON.parse(rv_instance.reportResponse.result.ReportJsonData.Result.Data); var rowData = reportData.find(x => x[this.xaxisColumns[0].AliasName] == this.XaxisData[activePoint.index]); Unibase.Platform.Helpers.NavigationHelper.Instance().loadDetail(rowData[subReport.PrimaryKeyColumn], subReport.InstalledAppId, null, null); } } } }); } } } barWithLine() { var instance = this; for (var l = 0; l < instance.lineChartColumns.length; l++) { var lineCol = instance.lineChartColumns[l]; var data = []; for (var bl = 0; bl < instance.ChartData.length; bl++) { var bLData = instance.ChartData[bl][lineCol.AliasName]; data.push(bLData); } var color = instance.getDataSetColors(); var bldata = { label: lineCol.AliasName, data: data, borderColor: color.boarderColor, backgroundColor: color.backgroundColor, borderWidth: 1, fill: instance.IsFill, type: "line" }; instance.Dataset.push(bldata); } } stackChart(id) { return __awaiter(this, void 0, void 0, function* () { var instance = this; let indexAxis = 'x'; if (instance._reportBuilder.pivot.ColumnName) { yield instance.pivotTable(); instance.pivotDataSet(); } else { instance.groupedStackDataSet(); } this.updateDatasetForDataLabel(); instance.clearChart(id); let canvas = document.getElementById(id); let ctx = canvas.getContext("2d"); let legendItems = {}; if (instance.ChartTypeName == "horizontalBar") { instance.ChartTypeName = 'bar'; indexAxis = 'y'; } const { isXAxisNumAbb, isYAxisNumAbb } = instance.isNumberAbbr(); var chart = `new Chart(ctx, { type:'` + instance.ChartTypeName + `', data: { labels:` + JSON.stringify(instance.XaxisStackData) + `, datasets:` + JSON.stringify(instance.PivotDataSet) + ` }, options: { layout:{ padding:${instance.isDataLabel && 20}, }, plugins: { tooltip: { displayColors: false, callbacks: { label: function (tooltipItem, data) { data = tooltipItem.dataset.data; instance.toolTip(); var label = instance.toolTipDataItem(tooltipItem, data); return label; }, ${!instance.isTooltipHeader ? 'title: function() { }, ' : ''} }, }, legend: { display:` + instance.displayLegend + `, position:'` + instance.legendType + `', onClick: legendClick, align: 'center', labels: { boxWidth:13, //filter: function(legendItem) { // if(legendItems[legendItem.text] == undefined){ // legendItems[legendItem.text] = true; // return legendItem.text; // } //} }, }, }, responsive: true, maintainAspectRatio: false, indexAxis: '${indexAxis}', scales: { xAxes: { barPercentage:0.3, stacked: true, ticks: { callback: function(value) { if (instance.tickLabelLength > 0){ if ('${indexAxis.toString().toLowerCase()}' == 'x'){ var value = instance.abbreviateNumber(value,this,isXAxisNumAbb); ${instance.tickLabelLength ? 'value = value && typeof(value) ==\'string\' && value.toString().slice(0,instance.tickLabelLength);' : ''} return value; } else{ return value; } }else{ return instance.abbreviateNumber(value,this,isXAxisNumAbb); } } } }, yAxes: { barPercentage:0.3, stacked: true, ticks: { beginAtZero: true, callback: function(value) { if (instance.tickLabelLength > 0){ if ('${indexAxis.toString().toLowerCase()}' == 'y'){ var value = instance.abbreviateNumber(value,this,isYAxisNumAbb); ${instance.tickLabelLength ? 'value = value && typeof(value) ==\'string\' && value.toString().slice(0,instance.tickLabelLength);' : ''} return value; } else{ return value; } }else{ return instance.abbreviateNumber(value,this,isYAxisNumAbb); } } } } }, onClick: onChartClick.bind(instance), legendCallback: legendCallBack, onResize:function(){ legendItems = {}; }, }, ${instance.isDataLabel ? 'plugins:[ChartDataLabels],' : ''} })`; var c = eval(chart); function legendCallBack(chart) { var legendItems = []; if (instance.legendTitleTypeId == Unibase.Platform.Analytics.Enums.LegendTitleType.Column && (instance.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.stackedBar || instance.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.stackedHorizontalBar)) { legendItems = []; for (var i = 0; i < instance.yaxisColumns.length; i++) { if (chart.legend.legendItems[i]) { chart.legend.legendItems[i].text = instance.yaxisColumns[i].AliasName; legendItems.push(chart.legend.legendItems[i]); } } chart.legend.legendItems = legendItems; } return chart.legend; } function legendClick(e, legendItem) { var index = legendItem.datasetIndex; var ci = this.chart; var alreadyHidden = (ci.getDatasetMeta(index).hidden === null) ? false : ci.getDatasetMeta(index).hidden; if (instance.legendTitleTypeId == Unibase.Platform.Analytics.Enums.LegendTitleType.Column) { var legendItems = []; instance.yaxisColumns.forEach(function (e, i) { var meta = ci.getDatasetMeta(i); if (e.AliasName == legendItem.text) { if (!alreadyHidden) meta.hidden = true; else meta.hidden = null; } }); ci.update(); if (instance.legendTitleTypeId == Unibase.Platform.Analytics.Enums.LegendTitleType.Column && (instance.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.stackedBar || instance.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.stackedHorizontalBar)) { legendItems = []; for (var i = 0; i < instance.yaxisColumns.length; i++) { if (ci.legend.legendItems[i]) { ci.legend.legendItems[i].text = instance.yaxisColumns[i].AliasName; legendItems.push(ci.legend.legendItems[i]); } } ci.legend.legendItems = legendItems; } return ci.legend; } else { ci.data.datasets.forEach(function (e, i) { var meta = ci.getDatasetMeta(i); if (e.label == legendItem.text) { if (!alreadyHidden) meta.hidden = true; else meta.hidden = null; } }); ci.update(); } } function onChartClick(evt, items) { this.onChartClickHandler(evt, items, c, false, true); } return c; }); } stackChart_old(id) { return __awaiter(this, void 0, void 0, function* () { var instance = this; if (instance._reportBuilder.pivot.ColumnName) { yield instance.pivotTable(); instance.pivotDataSet(); } else { instance.groupedStackDataSet(); } instance.clearChart(id); const { isXAxisNumAbb, isYAxisNumAbb } = instance.isNumberAbbr(); let canvas = document.getElementById(id); let ctx = canvas.getContext("2d"); var chart = new Chart(ctx, { type: instance.ChartTypeName, data: { labels: instance.XaxisStackData, datasets: instance.PivotDataSet }, options: { tooltips: { displayColors: false, callbacks: { label: function (tooltipItem, data) { instance.toolTip(); var label = instance.toolTipDataItem(tooltipItem, data); return label; }, }, }, legend: { display: instance.displayLegend, position: instance.legendType, labels: { boxWidth: 13, }, }, responsive: true, maintainAspectRatio: false, scales: { xAxes: [{ stacked: true, ticks: { callback: function (value) { return instance.abbreviateNumber(value, this, isXAxisNumAbb); } } }], yAxes: [{ stacked: true, ticks: { beginAtZero: true, callback: function (value) { return instance.abbreviateNumber(value, this, isYAxisNumAbb); } } }] } } }); return chart; }); } bubbleData() { var instance = this; var bubbleData = []; let orginalIdx = -1; this.xAxisLables = []; instance.xAxisDataWithIndexes = []; let index = 0; instance.XaxisData.map(x => { instance.xAxisDataWithIndexes.push({ Index: index, Name: instance.XaxisData[index] }); index++; }); var xArray = instance.XaxisData; var yArray = instance.YaxisData; bubbleData.push({ x: 0, y: 0, r: 0 }); xArray.forEach(function (e, i) { let idx = instance.xAxisDataWithIndexes[i].Index; let existingData = instance.xAxisLables.find(x => x.toString().toLowerCase() == e.toString().toLowerCase()); if (existingData) { idx = instance.xAxisLables.indexOf(existingData); } else { idx = ++orginalIdx; instance.xAxisLables.push(instance.xAxisDataWithIndexes[i].Name); } bubbleData.push({ x: idx + 1, y: parseFloat(yArray[i]), r: 6, }); }); return bubbleData; } bubbleChart(id) { var instance = this; var rv_instance; let containterid = id.split("-ch")[0]; this.updateDatasetForDataLabel(); if (Unibase.Platform.Helpers.NavigationHelper.reportViewerInstance.length > 0) { let reportviewerInstance = Unibase.Platform.Helpers.NavigationHelper.reportViewerInstance.find(x => x.childcontainerid == containterid); if (reportviewerInstance != undefined) rv_instance = reportviewerInstance.instance; } instance.clearChart(id); const { isXAxisNumAbb, isYAxisNumAbb } = instance.isNumberAbbr(); let canvas = document.getElementById(id); let ctx = canvas.getContext("2d"); var chart_str = `new Chart(ctx, { type: '${instance.ChartTypeName}', data: { datasets: ${JSON.stringify(instance.Dataset)}, }, options: { responsive: true, // Instruct chart js to respond nicely. maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height scaleShowValues: true, layout:{ padding:${instance.isDataLabel && 20}, }, scales: { // options to replace x axis with strings xAxes: { beganAtZero: true, ticks: { callback: function (label, index, labels) { if (!label) return ""; label = instance.xAxisLables[label-1]; ${instance.tickLabelLength ? 'label = label && typeof(label) == \'string\' && label.toString().slice(0, instance.tickLabelLength) || 0; ' : ''} return label; }, stepSize: 1, } }, yAxes: { ticks: { callback: function(value) { return instance.abbreviateNumber(value,this,isYAxisNumAbb); } } } }, plugins: { tooltip: { displayColors: false, callbacks: { label: function (tooltipItem, data) { data = tooltipItem.dataset.data; instance.toolTip(); var label = instance.toolTipDataItem(tooltipItem, data); return label; }, ${!instance.isTooltipHeader ? 'title: function() { },' : ''} }, }, legend: { display: ${instance.displayLegend}, position: '${instance.legendType}', labels: { boxWidth: 13, }, }, }, onClick: onChartClick.bind(instance), }, ${instance.isDataLabel ? 'plugins:[ChartDataLabels],' : ''} })`; var chart = eval(chart_str); function onChartClick(evt, items) { this.onChartClickHandler(evt, items, chart, true); } return chart; } bubbleChart_old(id) { var instance = this; instance.clearChart(id); let canvas = document.getElementById(id); let ctx = canvas.getContext("2d"); var chart = new Chart(ctx, { type: instance.ChartTypeName, data: { datasets: instance.Dataset, }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true, min: -30, max: 30 } }], } } }); return chart; } tenureChart(id, reportid) { return __awaiter(this, void 0, void 0, function* () { var instance = this; instance.Dataset = []; instance.YaxisData = []; var intervels = instance._reportBuilder.timeIntervels(instance._reportBuilder.tenureTimeIntervalCol); instance.XaxisData = intervels; var x = instance.XaxisData; let tenureTableData; if (reportid != 0 && instance.IsChartBuilder == false) { instance._reportBuilder.tableData = ""; var repObj = { ReportId: reportid, IsJson: true }; yield instance._reportManager.getReportViewerData(repObj).then(function (response) { let res = JSON.parse(response.result); tenureTableData = res.Data; }); } else { tenureTableData = instance._reportBuilder.tableData; } if (tenureTableData) { var j = JSON.parse(tenureTableData); for (var i = 0; i < x.length; i++) { let randomcolor = instance.getRandomColor(); instance.DataSetColors.push(randomcolor); var a = x[i]; instance.YaxisData.push(j[0][a]); } var ydata = { label: instance.XaxisData, data: instance.YaxisData, borderColor: 'white', backgroundColor: instance.DataSetColors, borderWidth: 1, fill: instance.IsFill, }; instance.Dataset.push(ydata); instance.ChartTypeName = 'doughnut'; instance.ChartTypeId = Unibase.Platform.Analytics.Charts.Enums.ChartType.doughnut; instance.chart(id); } }); } clearSelectedChartFields() { var instance = this; instance.xaxisColumns = [], instance.yaxisColumns = []; instance.groupColumns = [], instance.ChartData = [], instance.ChartSelectedColumns = [], instance.SelectedValueColorColumns = [], instance.Dataset = [], instance.appliedColumnColor = [], instance.appliedColumnValueColor = []; instance.Dataset = [], instance.YaxisData = [], instance.DataSetColors = []; instance.defaultColor = false; instance.toolTipArray = []; instance._reportBuilder.ChartColumns = []; instance._chartBuilder.SelectedValueColorColumns = []; instance._reportBuilder.paletteId = 0; instance._chartBuilder.colorAppliedOn = Unibase.Platform.Analytics.Enums.ColorType.column; instance.paletteColors = []; Unibase.Platform.Analytics.Components.LinkReport.Instance().linkreportid = 0; } getIndexByDisplayText(DisplayText, Select2Type) { var instance = this; if (Select2Type == instance.ChartAxis.Horizontal) { return instance.xaxisColumns.findIndex(x => x.DisplayText == DisplayText); } else if (Select2Type == instance.ChartAxis.Vertical) { return instance.yaxisColumns.findIndex(x => x.DisplayText == DisplayText); } else if (Select2Type == instance.ChartAxis.LineChart) { return instance.lineChartColumns.findIndex(x => x.DisplayText == DisplayText); } else if (Select2Type == instance.ChartAxis.BaseColumn) { return instance.chartBaseColumns.findIndex(x => x.DisplayText == DisplayText); } else { return instance.groupColumns.findIndex(x => x.DisplayText == DisplayText); } } getIndexByAliasName_ChartSelectedColumns(AliasName) { var instance = this; return instance.ChartSelectedColumns.findIndex(x => x.AliasName == AliasName); } getIndexByDisplayText_ChartSelectedColumns(DisplayText) { var instance = this; return instance.ChartSelectedColumns.findIndex(x => x.DisplayText == DisplayText); } getIndexByDisplayText_tooltipColumnsArray(AliasName) { var instance = this; return instance.toolTipArray.findIndex(x => x.AliasName == AliasName); } getIndexByDisplayText_BaseColumnsArray(AliasName) { var instance = this; return instance.chartBaseColumns.findIndex(x => x.AliasName == AliasName); } enableOrDisableChartIcons() { let instance = this; if (instance.groupColumns.length) { $("#chart_type").find('.stackedbar-icon').closest('label').removeClass('in-active'); } else { $("#chart_type").find('.stackedbar-icon').closest('label').addClass('in-active'); } } loadSelectedLegend(id, ischartview) { var instance = this; instance.displayLegend = true; if (id == 0) id = Number($("#legend-select").val()); if (id == Unibase.Platform.Analytics.Enums.LegendType.top) { instance.legendType = 'top'; } else if (id == Unibase.Platform.Analytics.Enums.LegendType.right) { instance.legendType = 'right'; } else if (id == Unibase.Platform.Analytics.Enums.LegendType.bottom) { instance.legendType = 'bottom'; } else if (id == Unibase.Platform.Analytics.Enums.LegendType.left) { instance.legendType = 'left'; } else { instance.displayLegend = false; } if (ischartview) { if (instance._reportBuilder.TenureReport.length != 0) { Unibase.Platform.Analytics.Reports.Tenure.Instance().CheckedTenure(); instance.tenureChart('myChart', instance._reportBuilder.reportid); } else { instance.chart_dataSet(); } } } loadPalettes() { var instance = this; instance.fileCacheHelper.loadJsFile("apps/crm/palettes/managers/palettemanager.js", function () { let _pallettemanager = Bizgaze.Apps.Crm.Palettes.Managers.PaletteManager.Instance(); _pallettemanager.getPallettes().then(function (pallresponse) { var pallettedata = []; if (pallresponse.result) { for (var p = 0; p < pallresponse.result.length; p++) { pallettedata.push({ id: pallresponse.result[p].paletteid, text: pallresponse.result[p].name }); } } if (instance._reportBuilder.isEdit) { let pallete = pallettedata.find(p => p.id == instance._reportBuilder.paletteId); if (pallete) { $("#pallettes_select").append(""); } } $("#pallettes_select").off('select2:select').off('select2:unselect').off('select2:selecting'); $("#pallettes_select").select2({ placeholder: 'Select GroupBy columns', data: pallettedata, }).on('select2:select', function (e) { }).on('select2:selecting', function (e) { var data = e.params.args.data; let id = Number(data.id); instance.paletteColors = []; instance._reportBuilder.paletteId = id; instance.getpaletteColors(id, true); }); }); }); } getpaletteColors(id, ischartview) { return __awaiter(this, void 0, void 0, function* () { var instance = this; let navigationhelper = Unibase.Platform.Helpers.NavigationHelper; if (navigationhelper.palettes.length > 0) { var pale = navigationhelper.palettes[id]; if (pale && pale.paletteColors) { for (var p = 0; p < pale.paletteColors.length; p++) { instance.paletteColors.push(pale.paletteColors[p].colorcode); } } else { yield instance.getColors(id, ischartview); } } else { yield instance.getColors(id, ischartview); } }); } getColors(id, ischartview) { return __awaiter(this, void 0, void 0, function* () { var instance = this; let navigationhelper = Unibase.Platform.Helpers.NavigationHelper; let _pallettemanager = Bizgaze.Apps.Crm.Palettes.Managers.PaletteManager.Instance(); yield _pallettemanager.getPalletteColors(id).then(function (pcresponse) { return __awaiter(this, void 0, void 0, function* () { if (pcresponse.result && pcresponse.result.length) { pcresponse.result.sort((x, y) => { return Number(x.paletteindex) - Number(y.paletteindex); }); var palette = navigationhelper.palettes[id] ? true : false; if (!palette) { navigationhelper.palettes[id] = { paletteColors: pcresponse.result }; var Values_len = navigationhelper.palettes.length; navigationhelper.palettes.length = Values_len + 1; } for (var pc = 0; pc < pcresponse.result.length; pc++) { let pcres = pcresponse.result[pc]; instance.paletteColors.push(pcres.colorcode); } if (ischartview) { if (instance._reportBuilder.TenureReport.length != 0) { Unibase.Platform.Analytics.Reports.Tenure.Instance().CheckedTenure(); instance.tenureChart('myChart', instance._reportBuilder.reportid); } else { instance.chart_dataSet(); } } } else { var palette = navigationhelper.palettes[id]; if (!palette) { navigationhelper.palettes[id] = { paletteColors: pcresponse.result }; var Values_len = navigationhelper.palettes.length; navigationhelper.palettes.length = Values_len + 1; } } }); }); }); } linkReport(reportId, dynamicFilters, containerId) { var instance = this; if (reportId != 0) { var rv_obj = Unibase.Platform.Analytics.Components.ReportViewer.Instance(); rv_obj.dynamicFilters = dynamicFilters; rv_obj.isTable = true; let reportViewerInstance = Unibase.Platform.Helpers.NavigationHelper.reportViewerInstance; reportViewerInstance.push({ instance: rv_obj, childcontainerid: containerId, parentcontainerid: "" }); instance.navigationHelper.popup(reportId, containerId, Unibase.Platform.Analytics.Components.ReportViewer.Instance(), function () { rv_obj.reportViewAllCallBack(containerId); }, Unibase.Platform.Helpers.Size.Large); } } getReportColumnDisplayTextByAliasName(aliasName) { if (this.chartContainerId) { let rv_ins = Unibase.Platform.Analytics.Components.ReportViewer.Instance().getReportViewerInstance(this.chartContainerId); let idx = rv_ins.reportColumns.findIndex(x => x.AliasName == aliasName); if (idx > -1) { return rv_ins.reportColumns[idx].DisplayText; } } else { let idx = this._reportBuilder.selectedColumns.findIndex(x => x.AliasName == aliasName); if (idx > -1) { return this._reportBuilder.selectedColumns[idx].DisplayText; } } } updateDatasetForDataLabel() { if (this.isDataLabel && this.Dataset) { let offset = 5; let align = 'top'; if (this.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.horizontalBar || this.ChartTypeId == Unibase.Platform.Analytics.Charts.Enums.ChartType.pie || Unibase.Platform.Analytics.Charts.Enums.ChartType.doughnut) { offset = 2; align = 'end'; } this.Dataset.forEach(dataset => dataset.datalabels = { anchor: 'end', align: align, offset: offset, }); } } convertLabelToPascalCase(name) { if (name) { let splited = name.split(" "); for (var i = 0; i < splited.length; i++) { splited[i] = this.converStringToPascalCase(splited[i]); } return splited.join(" "); } } converStringToPascalCase(name) { if (name) { return name[0].toUpperCase() + name.slice(1); } } getReportColumns() { let cols; if (this._reportBuilder.isEdit) { cols = this._reportBuilder.res.ReportColumns; } else { let rv_ins = Unibase.Platform.Analytics.Components.ReportViewer.Instance().getReportViewerInstance(this.chartContainerId); cols = rv_ins.reportColumns; } return cols; } prepareAndBindToolTipColumns(ChartColumns) { let tooltipColumns = ChartColumns.filter(x => x.IsToolTip); let cols = this.getReportColumns(); var tCols = tooltipColumns.sort((x, y) => Number(x.ToolTipIndex) - Number(y.ToolTipIndex)); for (var i = 0; i < tCols.length; i++) { let idx = cols.findIndex(x => x.AliasName == tooltipColumns[i].AliasName); if (idx > -1) { let col = cols[idx]; this.toolTipArray.push({ ColumnValue: col.ColumnValue, ColumnName: col.ReportColumnName, DisplayText: col.DisplayText, AliasName: col.AliasName, Index: tooltipColumns[i].ToolTipIndex }); if (this._reportBuilder.isEdit) { var html = this._reportBuilderTemplate.loadToolTipColumn(col.ReportColumnId, col.AliasName, col.DataType, col.DisplayText); $("#tab_tooltip #tooltip_selected_columns").append(html); } } } this.toolTipArray = this.toolTipArray.sort((x, y) => Number(x.Index) - Number(y.Index)); this._reportBuilder.setSelectOption("tooltip_select"); } prepareYAxisColumnsForBinding(chartColumns) { let yAxisCols; let rpCols; if (chartColumns) { yAxisCols = chartColumns.filter((y) => y.IsYaxis); } rpCols = this.getReportColumns(); yAxisCols.forEach((col) => { let idx = chartColumns.findIndex((x) => { return x.AliasName == col.AliasName; }); if (idx > -1) { chartColumns.splice(idx, 1); } yAxisCols.forEach((col) => { let idx = rpCols.findIndex(x => x.AliasName == col.AliasName); if (idx > -1) { col.Index = idx; } }); }); yAxisCols = yAxisCols.sort((x, y) => Number(x.Index) - Number(y.Index)); yAxisCols.forEach(x => delete x.Index); return yAxisCols; } isNumberAbbr() { const instance = this; let isXAxisNumAbb = false; let isYAxisNumAbb = false; if (instance.xaxisColumns.length) { for (let i = 0; i < instance.xaxisColumns.length; i++) { if (instance.xaxisColumns[i].IsNumAbb) { isXAxisNumAbb = true; break; } } } if (instance.yaxisColumns.length) { for (let i = 0; i < instance.yaxisColumns.length; i++) { if (instance.yaxisColumns[i].IsNumAbb) { isYAxisNumAbb = true; break; } } } return { isXAxisNumAbb, isYAxisNumAbb }; } abbreviateNumber(val, scaleObj, isNumAbb) { const label = scaleObj.getLabelForValue(val) && scaleObj.getLabelForValue(val).toString().replaceAll(',', ''); if (isNumAbb && $.isNumeric(label)) { val = +label; if (val >= 10000000) { val = (val / 10000000); if (val % 1 != 0) { val = val.toFixed(1); } val = val + 'Cr'; } else if (val >= 100000) { val = (val / 100000); if (val % 1 != 0) { val = val.toFixed(1); } val = val + 'L'; } else if (val >= 1000) { val = (val / 1000); if (val % 1 != 0) { val = val.toFixed(1); } val = val + 'K'; } return val; } else { return scaleObj.getLabelForValue(val); } } } Components._Chart = _Chart; })(Components = Analytics.Components || (Analytics.Components = {})); })(Analytics = Platform.Analytics || (Platform.Analytics = {})); })(Platform = Unibase.Platform || (Unibase.Platform = {})); })(Unibase || (Unibase = {}));