-
HTML
{{#each items}}<div class="card col-50 no-margin margin-bottom bg-purple-light"> <div class="card-header justify-content-center bg-{{this.EngineStatus}} font-bold"> {{this.AssetName}}</div> <div class="card-content no-padding text-align-center border-white-top bg-{{this.DeviceStatus}}"> <div class="date">Updated: {{this.DateTime}}</div> </div> <div class="card-content card-content-padding text-align-center border-white-top"> <div class="row"> <div class="col-60">Fuel Level<br /><b>{{this.FuelValue}} Ltrs.</b></div> <div class="col-40"> <div class="gauge demo-gauge-{{@index}}"></div> </div> </div> </div> </div> {{/each}}
-
SCRIPT
return {
data: function () {
return {
items: null,
loading: true
}
},
on: {
pageAfterIn: function (e, page) {
var items = [];
var self = this;
app.request({
url: url,
async: false,
success: function (data) {
var dashboard_data = JSON.parse(data)
dashboard_data.map((newData, index) => {
var newDate = formatDateTime(newData.DateTime)
items.push({
AssetName: newData.AssetName,
DateTime: newDate,
EngineStatus: newData.EngineStatus,
DeviceStatus: newData.DeviceStatus,
FuelPercentage: newData.FuelPercentage,
FuelValue: newData.FuelValue,
})
})
},
error: function (xhr, status) {
self.$setState({
items: null,
loading: false
});
if (status == 502) {
createToast(‘No Internet Connection’);
}
},
});
// init gauge
// update component state with new state
self.$setState({
items: items,
loading: false
});
this.items.map((newData, index) => {
var demoGauge = app.gauge.create({
el: ‘.demo-gauge-’ + index,
// type: ‘circle’,
value: 100,
size: 50,
borderColor: ‘#8f44ad’,
borderBgColor: ‘#f8e7fe’,
bgColor: ‘#f8e7fe’,
borderWidth: 6,
valueFontWeight: 500,
valueText: ‘100%’,
valueFontSize: 14,
valueTextColor: ‘#000000’,
})
})
},
}
}
- ISSUE: unabble to generate gauge on ‘col-40’ class= “demo-gauge-{{@index}}”
please help …