implement new device metrics chart
This commit is contained in:
liamcottle
@ -172,6 +172,8 @@ app.get('/api/v1/nodes/:nodeId/device-metrics', async (req, res) => {
|
|||||||
|
|
||||||
const nodeId = parseInt(req.params.nodeId);
|
const nodeId = parseInt(req.params.nodeId);
|
||||||
const count = req.query.count ? parseInt(req.query.count) : undefined;
|
const count = req.query.count ? parseInt(req.query.count) : undefined;
|
||||||
|
const timeFrom = req.query.time_from ? parseInt(req.query.time_from) : undefined;
|
||||||
|
const timeTo = req.query.time_to ? parseInt(req.query.time_to) : undefined;
|
||||||
|
|
||||||
// find node
|
// find node
|
||||||
const node = await prisma.node.findFirst({
|
const node = await prisma.node.findFirst({
|
||||||
@ -192,6 +194,10 @@ app.get('/api/v1/nodes/:nodeId/device-metrics', async (req, res) => {
|
|||||||
const deviceMetrics = await prisma.deviceMetric.findMany({
|
const deviceMetrics = await prisma.deviceMetric.findMany({
|
||||||
where: {
|
where: {
|
||||||
node_id: node.node_id,
|
node_id: node.node_id,
|
||||||
|
created_at: {
|
||||||
|
gte: timeFrom ? new Date(timeFrom) : undefined,
|
||||||
|
lte: timeTo ? new Date(timeTo) : undefined,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
orderBy: {
|
orderBy: {
|
||||||
id: 'desc',
|
id: 'desc',
|
||||||
|
|||||||
@ -0,0 +1,7 @@
|
|||||||
|
/*!
|
||||||
|
* chartjs-adapter-moment v1.0.1
|
||||||
|
* https://www.chartjs.org
|
||||||
|
* (c) 2022 chartjs-adapter-moment Contributors
|
||||||
|
* Released under the MIT license
|
||||||
|
*/
|
||||||
|
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("moment"),require("chart.js")):"function"==typeof define&&define.amd?define(["moment","chart.js"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).moment,e.Chart)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=n(e);const a={datetime:"MMM D, YYYY, h:mm:ss a",millisecond:"h:mm:ss.SSS a",second:"h:mm:ss a",minute:"h:mm a",hour:"hA",day:"MMM D",week:"ll",month:"MMM YYYY",quarter:"[Q]Q - YYYY",year:"YYYY"};t._adapters._date.override("function"==typeof f.default?{_id:"moment",formats:function(){return a},parse:function(e,t){return"string"==typeof e&&"string"==typeof t?e=f.default(e,t):e instanceof f.default||(e=f.default(e)),e.isValid()?e.valueOf():null},format:function(e,t){return f.default(e).format(t)},add:function(e,t,n){return f.default(e).add(t,n).valueOf()},diff:function(e,t,n){return f.default(e).diff(f.default(t),n)},startOf:function(e,t,n){return e=f.default(e),"isoWeek"===t?(n=Math.trunc(Math.min(Math.max(0,n),6)),e.isoWeekday(n).startOf("day").valueOf()):e.startOf(t).valueOf()},endOf:function(e,t){return f.default(e).endOf(t).valueOf()}}:{})}));
|
||||||
@ -46,6 +46,7 @@
|
|||||||
|
|
||||||
<!-- chart js -->
|
<!-- chart js -->
|
||||||
<script src="assets/js/chart.js@4.4.2/dist/chart.umd.js"></script>
|
<script src="assets/js/chart.js@4.4.2/dist/chart.umd.js"></script>
|
||||||
|
<script src="assets/js/chartjs-adapter-moment/chartjs-adapter-moment.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
@ -845,98 +846,76 @@
|
|||||||
<div class="bg-gray-200 p-2 font-semibold">Device Metrics</div>
|
<div class="bg-gray-200 p-2 font-semibold">Device Metrics</div>
|
||||||
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
||||||
|
|
||||||
|
<!-- device metrics chart -->
|
||||||
<li>
|
<li>
|
||||||
<div class="relative flex items-center">
|
<div class="px-4 py-2">
|
||||||
<div class="block flex-1 px-4 py-2">
|
<div class="w-full">
|
||||||
<div class="relative flex min-w-0 flex-1 items-center">
|
<canvas id="deviceMetricsChart" style="height:150px;"></canvas>
|
||||||
<div class="w-full">
|
<div class="flex">
|
||||||
<p class="truncate text-sm font-medium text-gray-900">Battery Level</p>
|
<div class="mx-auto flex space-x-2">
|
||||||
<p class="truncate text-sm text-gray-700">
|
<div class="flex mx-auto">
|
||||||
<span v-if="selectedNode.battery_level">
|
<div class="my-auto w-2 h-2 bg-blue-500 rounded-full"></div>
|
||||||
<span v-if="selectedNode.battery_level > 100">Plugged In</span>
|
<div class="my-auto ml-1 text-sm text-gray-500">Battery Level</div>
|
||||||
<span v-else>{{ selectedNode.battery_level }}%</span>
|
</div>
|
||||||
</span>
|
<div class="flex mx-auto">
|
||||||
<span v-else class="text-gray-500">???</span>
|
<div class="my-auto w-2 h-2 bg-green-500 rounded-full"></div>
|
||||||
</p>
|
<div class="my-auto ml-1 text-sm text-gray-500">Channel Utilization</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="flex mx-auto">
|
||||||
<canvas id="batteryLevelChart" style="width:150px;height:50px;"></canvas>
|
<div class="my-auto w-2 h-2 bg-orange-500 rounded-full"></div>
|
||||||
|
<div class="my-auto ml-1 text-sm text-gray-500">Air Util TX</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<!-- battery level -->
|
||||||
<div class="relative flex items-center">
|
<li class="flex p-3">
|
||||||
<div class="block flex-1 px-4 py-2">
|
<div class="text-sm font-medium text-gray-900">Battery Level</div>
|
||||||
<div class="relative flex min-w-0 flex-1 items-center">
|
<div class="ml-auto text-sm text-gray-700">
|
||||||
<div class="w-full">
|
<span v-if="selectedNode.battery_level">
|
||||||
<p class="truncate text-sm font-medium text-gray-900">Voltage</p>
|
<span v-if="selectedNode.battery_level > 100">Plugged In</span>
|
||||||
<p class="truncate text-sm text-gray-700">
|
<span v-else>{{ selectedNode.battery_level }}%</span>
|
||||||
<span v-if="selectedNode.voltage">{{ Number(selectedNode.voltage).toFixed(2) }}V</span>
|
</span>
|
||||||
<span v-else class="text-gray-500">???</span>
|
<span v-else>???</span>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<canvas id="voltageChart" style="width:150px;height:50px;"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<!-- voltage -->
|
||||||
<div class="relative flex items-center">
|
<li class="flex p-3">
|
||||||
<div class="block flex-1 px-4 py-2">
|
<div class="text-sm font-medium text-gray-900">Voltage</div>
|
||||||
<div class="relative flex min-w-0 flex-1 items-center">
|
<div class="ml-auto text-sm text-gray-700">
|
||||||
<div class="w-full">
|
<span v-if="selectedNode.voltage">{{ Number(selectedNode.voltage).toFixed(2) }}V</span>
|
||||||
<p class="truncate text-sm font-medium text-gray-900">Channel Utilization</p>
|
<span v-else>???</span>
|
||||||
<p class="truncate text-sm text-gray-700">
|
|
||||||
<span v-if="selectedNode.channel_utilization">{{ Number(selectedNode.channel_utilization).toFixed(2) }}%</span>
|
|
||||||
<span v-else class="text-gray-500">???</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<canvas id="channelUtilizationChart" style="width:150px;height:50px;"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<!-- channel utilization -->
|
||||||
<div class="relative flex items-center">
|
<li class="flex p-3">
|
||||||
<div class="block flex-1 px-4 py-2">
|
<div class="text-sm font-medium text-gray-900">Channel Utilization</div>
|
||||||
<div class="relative flex min-w-0 flex-1 items-center">
|
<div class="ml-auto text-sm text-gray-700">
|
||||||
<div class="w-full">
|
<span v-if="selectedNode.channel_utilization">{{ Number(selectedNode.channel_utilization).toFixed(2) }}%</span>
|
||||||
<p class="truncate text-sm font-medium text-gray-900">Air Util Tx</p>
|
<span v-else>???</span>
|
||||||
<p class="truncate text-sm text-gray-700">
|
|
||||||
<span v-if="selectedNode.air_util_tx">{{ Number(selectedNode.air_util_tx).toFixed(2) }}%</span>
|
|
||||||
<span v-else class="text-gray-500">???</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<canvas id="airUtilTxChart" style="width:150px;height:50px;"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<!-- air util tx -->
|
||||||
<div class="relative flex items-center">
|
<li class="flex p-3">
|
||||||
<div class="block flex-1 px-4 py-2">
|
<div class="text-sm font-medium text-gray-900">Air Util Tx</div>
|
||||||
<div class="relative flex min-w-0 flex-1 items-center">
|
<div class="ml-auto text-sm text-gray-700">
|
||||||
<div class="w-full">
|
<span v-if="selectedNode.air_util_tx">{{ Number(selectedNode.air_util_tx).toFixed(2) }}%</span>
|
||||||
<p class="truncate text-sm font-medium text-gray-900">Uptime</p>
|
<span v-else>???</span>
|
||||||
<p class="truncate text-sm text-gray-700">
|
</div>
|
||||||
<span v-if="selectedNode.uptime_seconds">{{ formatUptimeSeconds(selectedNode.uptime_seconds) }}</span>
|
</li>
|
||||||
<span v-else class="text-gray-500">???</span>
|
|
||||||
</p>
|
<!-- air util tx -->
|
||||||
</div>
|
<li class="flex p-3">
|
||||||
</div>
|
<div class="text-sm font-medium text-gray-900">Uptime</div>
|
||||||
</div>
|
<div class="ml-auto text-sm text-gray-700">
|
||||||
|
<span v-if="selectedNode.uptime_seconds">{{ formatUptimeSeconds(selectedNode.uptime_seconds) }}</span>
|
||||||
|
<span v-else>???</span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
@ -1980,9 +1959,11 @@
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
loadNodeDeviceMetrics: function(nodeId) {
|
loadNodeDeviceMetrics: function(nodeId) {
|
||||||
|
// load the last 3 days worth of device metrics
|
||||||
|
const threeDaysAgoInMilliseconds = new Date().getTime() - (259200 * 1000);
|
||||||
window.axios.get(`/api/v1/nodes/${nodeId}/device-metrics`, {
|
window.axios.get(`/api/v1/nodes/${nodeId}/device-metrics`, {
|
||||||
params: {
|
params: {
|
||||||
count: 100,
|
time_from: threeDaysAgoInMilliseconds,
|
||||||
},
|
},
|
||||||
}).then((response) => {
|
}).then((response) => {
|
||||||
// reverse response, as it's newest to oldest, but we want oldest to newest
|
// reverse response, as it's newest to oldest, but we want oldest to newest
|
||||||
@ -2061,259 +2042,100 @@
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
renderDeviceMetricCharts: function() {
|
renderDeviceMetricCharts: function() {
|
||||||
this.updateBatteryLevelChart();
|
try {
|
||||||
this.updateVoltageChart();
|
this.updateDeviceMetricsChart();
|
||||||
this.updateChannelUtilizationChart();
|
} catch(e) {
|
||||||
this.updateAirUtilTxChart();
|
console.log(e);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
updateBatteryLevelChart: function() {
|
updateDeviceMetricsChart: function() {
|
||||||
|
|
||||||
// get chart context
|
// get chart context
|
||||||
const ctx = window.document.getElementById('batteryLevelChart')?.getContext('2d');
|
const ctx = window.document.getElementById('deviceMetricsChart')?.getContext('2d');
|
||||||
if(!ctx){
|
if(!ctx){
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// get battery metrics
|
const labels = [];
|
||||||
const deviceMetrics = this.selectedNodeDeviceMetrics.filter((deviceMetric) => {
|
const batteryMetrics = [];
|
||||||
return deviceMetric.battery_level != null;
|
const channelUtilizationMetrics = [];
|
||||||
});
|
const airUtilTxMetrics = [];
|
||||||
|
for(const deviceMetric of this.selectedNodeDeviceMetrics){
|
||||||
|
labels.push(moment(deviceMetric.created_at));
|
||||||
|
batteryMetrics.push(deviceMetric.battery_level);
|
||||||
|
channelUtilizationMetrics.push(deviceMetric.channel_utilization);
|
||||||
|
airUtilTxMetrics.push(deviceMetric.air_util_tx);
|
||||||
|
}
|
||||||
|
|
||||||
new window.Chart(ctx, {
|
new window.Chart(ctx, {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: {
|
data: {
|
||||||
labels: deviceMetrics.map((deviceMetric) => {
|
labels: labels,
|
||||||
return new Date(deviceMetric.created_at).toLocaleTimeString();
|
datasets: [
|
||||||
}),
|
{
|
||||||
datasets: [{
|
label: 'Battery Level',
|
||||||
label: 'Battery Level',
|
borderColor: '#3b82f6',
|
||||||
data: deviceMetrics.map((deviceMetric) => {
|
backgroundColor: '#3b82f6',
|
||||||
return deviceMetric.battery_level;
|
pointStyle: false, // no points
|
||||||
}),
|
fill: false,
|
||||||
borderColor: '#22c55e',
|
data: batteryMetrics,
|
||||||
backgroundColor: '#e5e7eb',
|
},
|
||||||
fill: true,
|
{
|
||||||
}]
|
label: 'Channel Util',
|
||||||
|
borderColor: '#22c55e',
|
||||||
|
backgroundColor: '#22c55e',
|
||||||
|
showLine: false, // no lines between points
|
||||||
|
fill: false,
|
||||||
|
data: channelUtilizationMetrics,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Air Util TX',
|
||||||
|
borderColor: '#f97316',
|
||||||
|
backgroundColor: '#f97316',
|
||||||
|
showLine: false, // no lines between points
|
||||||
|
fill: false,
|
||||||
|
data: airUtilTxMetrics,
|
||||||
|
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
responsive: true,
|
responsive: true,
|
||||||
|
borderWidth: 2,
|
||||||
|
elements: {
|
||||||
|
point: {
|
||||||
|
radius: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
scales: {
|
scales: {
|
||||||
x: {
|
x: {
|
||||||
display: false, // Hide x-axis labels
|
type: 'time',
|
||||||
|
time: {
|
||||||
|
unit: 'day',
|
||||||
|
displayFormats: {
|
||||||
|
day: 'MMM DD', // Jan 01
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
display: false, // Hide y-axis labels
|
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 101, // 101 is "Plugged In", need to include for tooltip to work
|
max: 101, // 101 is "Plugged In", need to include for tooltip to work
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: {
|
plugins: {
|
||||||
legend: {
|
legend: {
|
||||||
display: false, // Hide the legend
|
display: false,
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
yAlign: 'top',
|
mode: "nearest",
|
||||||
intersect: false,
|
intersect: false,
|
||||||
displayColors: false,
|
|
||||||
callbacks: {
|
callbacks: {
|
||||||
label: (item) => item.formattedValue + "%",
|
label: (item) => {
|
||||||
|
return `${item.dataset.label}: ${item.formattedValue}%`;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
elements: {
|
|
||||||
point: {
|
|
||||||
radius: 0, // Set the radius to 0 to hide the dots
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
updateVoltageChart: function() {
|
|
||||||
|
|
||||||
// get chart context
|
|
||||||
const ctx = window.document.getElementById('voltageChart')?.getContext('2d');
|
|
||||||
if(!ctx){
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// get voltage metrics
|
|
||||||
const voltageMetrics = this.selectedNodeDeviceMetrics.filter((deviceMetric) => {
|
|
||||||
return deviceMetric.voltage != null;
|
|
||||||
});
|
|
||||||
|
|
||||||
new window.Chart(ctx, {
|
|
||||||
type: 'line',
|
|
||||||
data: {
|
|
||||||
labels: voltageMetrics.map((deviceMetric) => {
|
|
||||||
return new Date(deviceMetric.created_at).toLocaleTimeString();
|
|
||||||
}),
|
|
||||||
datasets: [{
|
|
||||||
label: 'Voltage',
|
|
||||||
data: voltageMetrics.map((deviceMetric) => {
|
|
||||||
return deviceMetric.voltage;
|
|
||||||
}),
|
|
||||||
borderColor: '#22c55e',
|
|
||||||
backgroundColor: '#e5e7eb',
|
|
||||||
fill: true,
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
responsive: true,
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
display: false, // Hide x-axis labels
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
display: false, // Hide y-axis labels
|
|
||||||
min: 2,
|
|
||||||
max: 5,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false, // Hide the legend
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
yAlign: 'top',
|
|
||||||
intersect: false,
|
|
||||||
displayColors: false,
|
|
||||||
callbacks: {
|
|
||||||
label: (item) => item.formattedValue + "V",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
point: {
|
|
||||||
radius: 0, // Set the radius to 0 to hide the dots
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
updateChannelUtilizationChart: function() {
|
|
||||||
|
|
||||||
// get chart context
|
|
||||||
const ctx = window.document.getElementById('channelUtilizationChart')?.getContext('2d');
|
|
||||||
if(!ctx){
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// get channel utilization metrics
|
|
||||||
const channelUtilizationMetrics = this.selectedNodeDeviceMetrics.filter((deviceMetric) => {
|
|
||||||
return deviceMetric.channel_utilization != null;
|
|
||||||
});
|
|
||||||
|
|
||||||
new window.Chart(ctx, {
|
|
||||||
type: 'line',
|
|
||||||
data: {
|
|
||||||
labels: channelUtilizationMetrics.map((deviceMetric) => {
|
|
||||||
return new Date(deviceMetric.created_at).toLocaleTimeString();
|
|
||||||
}),
|
|
||||||
datasets: [{
|
|
||||||
label: 'Channel Utilization',
|
|
||||||
data: channelUtilizationMetrics.map((deviceMetric) => {
|
|
||||||
return deviceMetric.channel_utilization;
|
|
||||||
}),
|
|
||||||
borderColor: '#22c55e',
|
|
||||||
backgroundColor: '#e5e7eb',
|
|
||||||
fill: true,
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
responsive: true,
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
display: false, // Hide x-axis labels
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
display: false, // Hide y-axis labels
|
|
||||||
min: -5,
|
|
||||||
max: 100,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false, // Hide the legend
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
yAlign: 'top',
|
|
||||||
intersect: false,
|
|
||||||
displayColors: false,
|
|
||||||
callbacks: {
|
|
||||||
label: (item) => item.formattedValue + "%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
point: {
|
|
||||||
radius: 0, // Set the radius to 0 to hide the dots
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
updateAirUtilTxChart: function() {
|
|
||||||
|
|
||||||
// get chart context
|
|
||||||
const ctx = window.document.getElementById('airUtilTxChart')?.getContext('2d');
|
|
||||||
if(!ctx){
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// get air util tx metrics
|
|
||||||
const airUtilTxMetrics = this.selectedNodeDeviceMetrics.filter((deviceMetric) => {
|
|
||||||
return deviceMetric.air_util_tx != null;
|
|
||||||
});
|
|
||||||
|
|
||||||
new window.Chart(ctx, {
|
|
||||||
type: 'line',
|
|
||||||
data: {
|
|
||||||
labels: airUtilTxMetrics.map((deviceMetric) => {
|
|
||||||
return new Date(deviceMetric.created_at).toLocaleTimeString();
|
|
||||||
}),
|
|
||||||
datasets: [{
|
|
||||||
label: 'Air Util Tx',
|
|
||||||
data: airUtilTxMetrics.map((deviceMetric) => {
|
|
||||||
return deviceMetric.air_util_tx;
|
|
||||||
}),
|
|
||||||
borderColor: '#22c55e',
|
|
||||||
backgroundColor: '#e5e7eb',
|
|
||||||
fill: true,
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
responsive: true,
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
display: false, // Hide x-axis labels
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
display: false, // Hide y-axis labels
|
|
||||||
min: -5,
|
|
||||||
max: 100,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false, // Hide the legend
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
yAlign: 'top',
|
|
||||||
intersect: false,
|
|
||||||
displayColors: false,
|
|
||||||
callbacks: {
|
|
||||||
label: (item) => item.formattedValue + "%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
point: {
|
|
||||||
radius: 0, // Set the radius to 0 to hide the dots
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user