Hi there,
Just done a few tests:
Have been working on my own version of this widget, with its own logic to sum the values, as the donut and pie charts does not work as intended.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<style>
.customDonutWrapper {
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
margin: auto;
box-sizing: border-box;
}
#chart {
width:85%;
height: 85%;
}
.loadingCustomChart {
display: none;
}
</style>
</head>
<body>
<div class="customDonutWrapper">
<div id="chart">
</div>
<div class="loadingCustomChart">
<img class="LoadingDoorActivityIcon" src="https://...loading.gif">
</div>
</div>
</body>
</html>
angular.module('donutAccChart', [])
.directive('donutAccChart', function () {
return {
restrict: 'EA',
scope: {
source : "=",
ts: "=",
value: "="
},
templateUrl: function(){
let url = document.querySelector("script[src*='donutAccChart.js']");
return url.src.replace('.js','.html');
},
controller: ["$scope", function($scope){
var AccController = 0, AccSocket = 0;
var options = {
series: [AccController, AccSocket],
chart: {
type: 'donut',
},
labels: ["Smart Light Controller", "Portable Socket"],
colors: ['#40acb4','#1E313E'],
legend: {
show: false
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
$scope.$watch('value', function(newVal, oldVal) {
document.querySelector("#chart").style.display = "none";
document.querySelector(".loadingCustomChart").style.display = "block";
setTimeout(function() {
AccController = 0;
AccSocket = 0;
for(const element in newVal)
{
for(const property in newVal[element])
{
if(new RegExp("Portable Socket").test(property))
{
AccSocket = AccSocket + newVal[element][property];
}
if(new RegExp("Smart Light Controller").test(property))
{
AccController = AccController + newVal[element][property];
}
}
}
document.querySelector("#chart").style.display = "block";
document.querySelector(".loadingCustomChart").style.display = "none";
chart.updateSeries([AccController, AccSocket], true);
}, 2500);
});
}]
};
});
Also, I could not find a way to scale the widget in the same way as the default one:
(Left → Default, Right → Custom)
Also, I think I need to destroy the graph before leaving this page to avoid the console error:
Either way, I need this to work!
Thanks in advance,
