Battery Level Pie Chart
Description
This example shows how to retrieve entities and display their battery level as a Pie Chart within the table row.
Code
var builder = $api.entitiesSearchBuilder().limit(100).flattened();
// Handle generic filter if present
if (filters && filters.generic) {
builder.filter({
like: {
'provision.administration.identifier': filters.generic
}
});
}
var response = await builder.build().execute();
var results = [];
if (response && response.data && response.data.entities) {
response.data.entities.forEach(function(entity) {
// Get identifier
var id = entity['provision.administration.identifier'] ? entity['provision.administration.identifier']._value._current.value : "Unknown";
// Get battery charge (default to 0 if not present)
var charge = 0;
if (entity['device.powersupply.battery.charge']) {
charge = entity['device.powersupply.battery.charge']._value._current.value;
}
// Create the chart configuration
var pieOption = {
color: ['#91c7ae', '#c23531'],
series: [
{
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '10',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: charge, name: 'Charge' },
{ value: 100 - charge, name: 'Empty' }
]
}
]
};
results.push({
identifier: id,
battery: {
"_chart": pieOption,
"_style": "height: 50px; width: 50px;" // Optional styling for the cell
}
});
});
}
return results;