Some Values (Negative values and some other also) are not displaying on heatmap cells.
Hi,
On heatmap negative values are not displaying and some other values are also not displaying why?
I am changing value mapping as per the user selects the x axis values from the drop down.
Here is my code,
ts file code
heapDataObservableData$!: Subscription;
@ViewChild('heatmap', { static: false })
heatmap!: HeatMapComponent;
public paletteSettings: Object = {
palette: [{ color: '#f3aca2' }, { color: '#711d9a' }, { color: '#250840' }],
type: 'Gradient',
};
titleSettings: Object = {
text: 'Percentage Change In MDRM Values',
};
public xAxisValuesList: any = [
{id: 'diff_pcts_prior', name: "Absolute change (% of prior)"},
{id: 'diff_pcts_later', name: "Absolute change (% of later)"},
{id: 'z_scores', name: "Z-Score"},
{id: 'modified_z_scores', name: "Modified Z-Score"}
];
public xAxisValuesListFields: Object = { text: 'name', value: 'id' };
public defaultXAxisValues = this.xAxisValuesList[0]['id'];
this.heapDataObservableData$ =
this._trendDemoService.heatMapDataObservable$.subscribe({
next: (heatMapData) => {
if (heatMapData !== undefined && heatMapData !== null) {
this.inputArrayFromAPI = heatMapData;
// Extract all MDRMs and range labels
if (
this.inputArrayFromAPI !== undefined &&
this.inputArrayFromAPI !== null &&
this.inputArrayFromAPI.variations !== undefined &&
this.inputArrayFromAPI.variations !== null
) {
const allMDRMs = this.inputArrayFromAPI.variations.map(
(variation: any) => variation.mdrm
);
const allRangeLabels = this.inputArrayFromAPI.range_labels;
console.log(this.defaultXAxisValues, 'defaultXAxisValues');
// Create the expected outcome array
this.manipulatedArray =
this._trendDemoService.manipulateHeatMapData(
this.inputArrayFromAPI,
allRangeLabels,
this.defaultXAxisValues
);
console.log(this.manipulatedArray, 'ma');
// Set xAxis and yAxis labels
if (allRangeLabels.length > 0) {
this.xAxis = {
labels: allRangeLabels,
labelIntersectAction: 'None',
labelRotation: 45,
};
}
if (allMDRMs.length > 0) {
this.yAxis = {
title: { text: 'MDRM' },
labels: allMDRMs,
};
}
if (this.defaultXAxisValues === 'diff_pcts_prior') {
this.dataSourceSettings = {
isJsonData: true,
adaptorType: 'Cell',
xDataMapping: 'range',
yDataMapping: 'mdrm',
valueMapping: 'diff_pcts_prior',
};
}
if (this.defaultXAxisValues === 'diff_pcts_later') {
this.dataSourceSettings = {
isJsonData: true,
adaptorType: 'Cell',
xDataMapping: 'range',
yDataMapping: 'mdrm',
valueMapping: 'diff_pcts_later',
};
}
if (this.defaultXAxisValues === 'z_scores') {
this.dataSourceSettings = {
isJsonData: true,
adaptorType: 'Cell',
xDataMapping: 'range',
yDataMapping: 'mdrm',
valueMapping: 'z_scores',
};
} if (this.defaultXAxisValues === 'modified_z_scores') {
this.dataSourceSettings = {
isJsonData: true,
adaptorType: 'Cell',
xDataMapping: 'range',
yDataMapping: 'mdrm',
valueMapping: 'modified_z_scores',
};
}
}
}
},
});
service file code
getHeatMapDataVariations(
reportName: string,
rssdId: any,
priorPeriodId: any,
laterPeriodId: any,
step: number,
mdrms: any[]
) {
let queryParams: any = {};
if (reportName !== undefined && reportName !== null && reportName !== '') {
queryParams['report_name'] = reportName;
}
if (rssdId !== undefined && rssdId !== null && rssdId !== '') {
queryParams['rssd_id'] = rssdId;
}
if (
priorPeriodId !== undefined &&
priorPeriodId !== null &&
priorPeriodId !== ''
) {
queryParams['prior_period_id'] = priorPeriodId;
}
if (
laterPeriodId !== undefined &&
laterPeriodId !== null &&
laterPeriodId !== ''
) {
queryParams['later_period_id'] = laterPeriodId;
}
if (step !== undefined && step !== null) {
queryParams['step'] = step;
}
if (mdrms !== undefined && mdrms !== null && mdrms.length > 0) {
queryParams['mdrms'] = mdrms;
}
let queryString = this._sharedService.combineQueryString(queryParams);
this._communicatorService
.getData(apiBaseUrl + 'variations-over-time' + queryString)
.subscribe({
next: data => {
if (data !== undefined && data !== null) {
this.heatMapData = data;
this.heatMapDataObservable.next(this.heatMapData);
}
}, error: error => {
console.log(error, 'e');
}
});
}
manipulateHeatMapData(inputArrayFromAPI: any, allRangeLabels: any, defaultXAxisValues: string) {
let manipulatedArray: any[] = [];
inputArrayFromAPI.variations.forEach((variation: any) => {
const mdrm = variation.mdrm;
const schedule = variation.schedule;
const line_item_code = variation.line_item_code;
const description = variation.description;
if (defaultXAxisValues === 'diff_pcts_prior') {
variation.diff_pcts_prior.forEach((diff_pcts_prior: any, index: number) => {
const range = allRangeLabels[index];
manipulatedArray.push({
mdrm,
range,
diff_pcts_prior,
schedule,
line_item_code,
description,
});
});
}
if (defaultXAxisValues === 'diff_pcts_later') {
variation.diff_pcts_later.forEach((diff_pcts_later: any, index: number) => {
const range = allRangeLabels[index];
manipulatedArray.push({
mdrm,
range,
diff_pcts_later,
schedule,
line_item_code,
description,
});
});
}
if (defaultXAxisValues === 'z_scores') {
variation.z_scores.forEach((z_scores: any, index: number) => {
const range = allRangeLabels[index];
manipulatedArray.push({
mdrm,
range,
z_scores,
schedule,
line_item_code,
description,
});
});
}
if (defaultXAxisValues === 'modified_z_scores') {
variation.modified_z_scores.forEach((modified_z_scores: any, index: number) => {
const range = allRangeLabels[index];
manipulatedArray.push({
mdrm,
range,
modified_z_scores,
schedule,
line_item_code,
description,
});
});
}
});
manipulatedArray.forEach((item) => {
if (defaultXAxisValues === 'diff_pcts_prior') {
item.diff_pcts_prior = Math.abs(item.diff_pcts_prior);
} else if (defaultXAxisValues === 'diff_pcts_later') {
item.diff_pcts_later = Math.abs(item.diff_pcts_later);
} else if (defaultXAxisValues === 'z_scores') {
item.z_scores = item.z_scores;
} else if (defaultXAxisValues === 'modified_z_scores') {
item.modified_z_scores = item.modified_z_scores;
}
});
return manipulatedArray;
}
HTML file code
<ejs-dropdownlist [width]="'220px'" [fields]='xAxisValuesListFields'
[dataSource]='xAxisValuesList' placeholder='Period Interval'
[floatLabelType]="'Always'" allowFiltering="true" filterType="Contains"
[value]="defaultXAxisValues"
(select)="getSelectedXAxisValueForHeatMap($event)"></ejs-dropdownlist>
<ejs-heatmap #heatmap [dataSource]='manipulatedArray' [dataSourceSettings]='dataSourceSettings'
[xAxis]='xAxis' [yAxis]='yAxis' (tooltipRender)="tooltipRenderHeatMap($event)"
[paletteSettings]='paletteSettings' [titleSettings]='titleSettings' [tooltipSettings]="heatmaptooltip">
</ejs-heatmap>
Getting some cells empty even they are having data in it (negative and positive both values are there)
manipulated array structure is like this:
{
"mdrm": "BHCAA223",
"range": "Q4 2016 - Q1 2017",
"z_scores": 0.5533,
"schedule": "Unavailable in Form",
"line_item_code": "",
"description": "RISK-WEIGHTED ASSETS (NET OF ALLOWANCES AND OTHER DEDUCTIONS)"
}
SIGN IN To post a reply.
3 Replies
SIGN IN To post a reply.
