mirror of
https://github.com/getnamingo/registry.git
synced 2025-07-21 10:06:05 +02:00
Improved dashboard charts in CP
This commit is contained in:
Pinga
parent
5b39a7fc19
commit
9c9c2ef2dc
1 changed files with 110 additions and 227 deletions
|
|
@ -114,26 +114,26 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-6 col-xl-4">
|
<div class="col-lg-6 col-xl-4">
|
||||||
<div class="card">
|
<div class="card h-100">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h3 class="card-title">{{ __('Last 7 Days: Domain Registrations') }}</h3>
|
<h3 class="card-title">{{ __('Last 7 Days: Domain Registrations') }}</h3>
|
||||||
<div id="last-7-days"></div>
|
<div id="last-7-days" class="flex-grow-1"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-6 col-xl-4">
|
<div class="col-lg-6 col-xl-4">
|
||||||
<div class="card">
|
<div class="card h-100">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h3 class="card-title">{{ __('Top Registrars by Domains') }}</h3>
|
<h3 class="card-title">{{ __('Top Registrars by Domains') }}</h3>
|
||||||
<div id="top-registrars"></div>
|
<div id="top-registrars" class="flex-grow-1"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-6 col-xl-4">
|
<div class="col-lg-6 col-xl-4">
|
||||||
<div class="card">
|
<div class="card h-100">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h3 class="card-title">{{ __('Support Tickets: Last Week') }}</h3>
|
<h3 class="card-title">{{ __('Support Tickets: Last Week') }}</h3>
|
||||||
<div id="support-tickets"></div>
|
<div id="support-tickets" class="flex-grow-1"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -316,229 +316,112 @@
|
||||||
</div>
|
</div>
|
||||||
{% if registrars %}
|
{% if registrars %}
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
var dates = JSON.parse('{{ dates|raw }}');
|
const parse = (str) => {
|
||||||
var counts = JSON.parse('{{ counts|raw }}');
|
try {
|
||||||
|
const val = JSON.parse(str);
|
||||||
var labels = JSON.parse('{{ labels|raw }}');
|
return Array.isArray(val) ? val : [];
|
||||||
var series = JSON.parse('{{ series|raw }}');
|
} catch {
|
||||||
|
return [];
|
||||||
var labels3 = JSON.parse('{{ labels3|raw }}');
|
}
|
||||||
var answeredData = JSON.parse('{{ answeredData|raw }}');
|
};
|
||||||
var unansweredData = JSON.parse('{{ unansweredData|raw }}');
|
|
||||||
|
|
||||||
window.ApexCharts && (new ApexCharts(document.getElementById('last-7-days'), {
|
|
||||||
chart: {
|
|
||||||
type: "bar",
|
|
||||||
fontFamily: 'inherit',
|
|
||||||
height: 240,
|
|
||||||
parentHeightOffset: 0,
|
|
||||||
toolbar: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
animations: {
|
|
||||||
enabled: false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plotOptions: {
|
|
||||||
bar: {
|
|
||||||
columnWidth: '50%',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
fill: {
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
series: counts.some(count => count > 0) ? [{
|
|
||||||
name: "Domain Registrations",
|
|
||||||
data: counts
|
|
||||||
}] : [],
|
|
||||||
tooltip: {
|
|
||||||
theme: 'dark'
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
padding: {
|
|
||||||
top: -20,
|
|
||||||
right: 0,
|
|
||||||
left: -4,
|
|
||||||
bottom: -4
|
|
||||||
},
|
|
||||||
strokeDashArray: 4,
|
|
||||||
},
|
|
||||||
xaxis: {
|
|
||||||
labels: {
|
|
||||||
padding: 0,
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
enabled: false
|
|
||||||
},
|
|
||||||
axisBorder: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
type: 'category',
|
|
||||||
categories: dates,
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
labels: {
|
|
||||||
padding: 4,
|
|
||||||
formatter: function (value) {
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
noData: {
|
|
||||||
text: "No data available",
|
|
||||||
align: 'center',
|
|
||||||
verticalAlign: 'middle',
|
|
||||||
style: {
|
|
||||||
color: '#888',
|
|
||||||
fontSize: '14px',
|
|
||||||
fontFamily: 'inherit'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
colors: ["color-mix(in srgb, transparent, var(--tblr-primary) 100%)",],
|
|
||||||
legend: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
})).render();
|
|
||||||
|
|
||||||
window.ApexCharts && (new ApexCharts(document.getElementById('top-registrars'), {
|
let dates = parse('{{ dates|raw }}');
|
||||||
chart: {
|
let counts = parse('{{ counts|raw }}');
|
||||||
type: "donut",
|
let labels = parse('{{ labels|raw }}');
|
||||||
fontFamily: 'inherit',
|
let series = parse('{{ series|raw }}');
|
||||||
height: 245,
|
let labels3 = parse('{{ labels3|raw }}');
|
||||||
sparkline: {
|
let answeredData = parse('{{ answeredData|raw }}');
|
||||||
enabled: true
|
let unansweredData = parse('{{ unansweredData|raw }}');
|
||||||
},
|
|
||||||
animations: {
|
|
||||||
enabled: false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fill: {
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
series: series.some(val => val > 0) ? series : [],
|
|
||||||
labels: labels,
|
|
||||||
tooltip: {
|
|
||||||
theme: 'dark'
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
strokeDashArray: 4,
|
|
||||||
},
|
|
||||||
noData: {
|
|
||||||
text: "No data to display",
|
|
||||||
align: 'center',
|
|
||||||
verticalAlign: 'middle',
|
|
||||||
style: {
|
|
||||||
color: '#888',
|
|
||||||
fontSize: '14px',
|
|
||||||
fontFamily: 'inherit'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
colors: [
|
|
||||||
"color-mix(in srgb, transparent, var(--tblr-primary) 100%)",
|
|
||||||
"color-mix(in srgb, transparent, var(--tblr-primary) 80%)",
|
|
||||||
"color-mix(in srgb, transparent, var(--tblr-primary) 60%)",
|
|
||||||
"color-mix(in srgb, transparent, var(--tblr-gray-300) 100%)"
|
|
||||||
],
|
|
||||||
legend: {
|
|
||||||
show: true,
|
|
||||||
position: 'bottom',
|
|
||||||
markers: {
|
|
||||||
width: 10,
|
|
||||||
height: 10,
|
|
||||||
radius: 100,
|
|
||||||
},
|
|
||||||
itemMargin: {
|
|
||||||
horizontal: 8,
|
|
||||||
vertical: 8
|
|
||||||
},
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
fillSeriesColor: false
|
|
||||||
},
|
|
||||||
})).render();
|
|
||||||
|
|
||||||
window.ApexCharts && (new ApexCharts(document.getElementById('support-tickets'), {
|
// Domains: last 7 days
|
||||||
chart: {
|
if (counts.length > 0 && dates.length > 0 && counts.length === dates.length && counts.some(v => v > 0)) {
|
||||||
type: "bar",
|
new ApexCharts(document.getElementById('last-7-days'), {
|
||||||
fontFamily: 'inherit',
|
chart: { type: "bar", height: 240, fontFamily: 'inherit', animations: { enabled: false }, toolbar: { show: false }, parentHeightOffset: 0 },
|
||||||
height: 240,
|
plotOptions: { bar: { columnWidth: '50%' } },
|
||||||
parentHeightOffset: 0,
|
dataLabels: { enabled: false },
|
||||||
toolbar: {
|
fill: { opacity: 1 },
|
||||||
show: false,
|
series: [{ name: "Domain Registrations", data: counts }],
|
||||||
},
|
xaxis: { categories: dates, type: 'category', labels: { padding: 0 }, tooltip: { enabled: false }, axisBorder: { show: false } },
|
||||||
animations: {
|
yaxis: { labels: { padding: 4 } },
|
||||||
enabled: false
|
tooltip: { theme: 'dark' },
|
||||||
},
|
grid: { padding: { top: -20, right: 0, bottom: -4, left: -4 }, strokeDashArray: 4 },
|
||||||
stacked: true,
|
colors: ["color-mix(in srgb, transparent, var(--tblr-primary) 100%)"],
|
||||||
},
|
legend: { show: false }
|
||||||
plotOptions: {
|
}).render();
|
||||||
bar: {
|
} else {
|
||||||
columnWidth: '50%',
|
document.getElementById('last-7-days').innerHTML = `
|
||||||
}
|
<div class="d-flex align-items-center justify-content-center" style="height: 240px;">
|
||||||
},
|
<div class="text-muted text-center">
|
||||||
dataLabels: {
|
<strong>No data available</strong>
|
||||||
enabled: false,
|
</div>
|
||||||
},
|
</div>
|
||||||
fill: {
|
`;
|
||||||
opacity: 1,
|
}
|
||||||
},
|
|
||||||
series: (answeredData.some(val => val > 0) || unansweredData.some(val => val > 0)) ? [
|
// Top Registrars
|
||||||
{ name: "Answered", data: answeredData },
|
if (series.length > 0 && labels.length === series.length && series.some(v => v > 0)) {
|
||||||
{ name: "Pending", data: unansweredData }
|
new ApexCharts(document.getElementById('top-registrars'), {
|
||||||
] : [],
|
chart: { type: "donut", height: 245, fontFamily: 'inherit', animations: { enabled: false }, sparkline: { enabled: true } },
|
||||||
tooltip: {
|
fill: { opacity: 1 },
|
||||||
theme: 'dark'
|
series: series,
|
||||||
},
|
labels: labels,
|
||||||
grid: {
|
tooltip: { theme: 'dark', fillSeriesColor: false },
|
||||||
padding: {
|
grid: { strokeDashArray: 4 },
|
||||||
top: -20,
|
colors: [
|
||||||
right: 0,
|
"color-mix(in srgb, transparent, var(--tblr-primary) 100%)",
|
||||||
left: -4,
|
"color-mix(in srgb, transparent, var(--tblr-primary) 80%)",
|
||||||
bottom: -4
|
"color-mix(in srgb, transparent, var(--tblr-primary) 60%)",
|
||||||
},
|
"color-mix(in srgb, transparent, var(--tblr-gray-300) 100%)"
|
||||||
strokeDashArray: 4,
|
],
|
||||||
},
|
legend: { show: true, position: 'bottom', markers: { width: 10, height: 10, radius: 100 }, itemMargin: { horizontal: 8, vertical: 8 } }
|
||||||
xaxis: {
|
}).render();
|
||||||
labels: {
|
} else {
|
||||||
padding: 0,
|
document.getElementById('top-registrars').innerHTML = `
|
||||||
},
|
<div class="d-flex align-items-center justify-content-center" style="height: 240px;">
|
||||||
tooltip: {
|
<div class="text-muted text-center">
|
||||||
enabled: false
|
<strong>No data available</strong>
|
||||||
},
|
</div>
|
||||||
axisBorder: {
|
</div>
|
||||||
show: false,
|
`;
|
||||||
},
|
}
|
||||||
type: 'category',
|
|
||||||
categories: labels3,
|
// Support Tickets
|
||||||
},
|
if (
|
||||||
yaxis: {
|
labels3.length > 0 &&
|
||||||
labels: {
|
answeredData.length === unansweredData.length &&
|
||||||
padding: 4,
|
answeredData.length === labels3.length &&
|
||||||
formatter: function (value) {
|
(answeredData.some(v => v > 0) || unansweredData.some(v => v > 0))
|
||||||
return value;
|
) {
|
||||||
}
|
new ApexCharts(document.getElementById('support-tickets'), {
|
||||||
},
|
chart: { type: "bar", height: 240, fontFamily: 'inherit', animations: { enabled: false }, toolbar: { show: false }, parentHeightOffset: 0, stacked: true },
|
||||||
},
|
plotOptions: { bar: { columnWidth: '50%' } },
|
||||||
noData: {
|
dataLabels: { enabled: false },
|
||||||
text: "No support ticket data available",
|
fill: { opacity: 1 },
|
||||||
align: 'center',
|
series: [
|
||||||
verticalAlign: 'middle',
|
{ name: "Answered", data: answeredData },
|
||||||
style: {
|
{ name: "Pending", data: unansweredData }
|
||||||
color: '#888',
|
],
|
||||||
fontSize: '14px',
|
xaxis: { categories: labels3, type: 'category', labels: { padding: 0 }, tooltip: { enabled: false }, axisBorder: { show: false } },
|
||||||
fontFamily: 'inherit'
|
yaxis: { labels: { padding: 4 } },
|
||||||
}
|
tooltip: { theme: 'dark' },
|
||||||
},
|
grid: { padding: { top: -20, right: 0, bottom: -4, left: -4 }, strokeDashArray: 4 },
|
||||||
colors: ["color-mix(in srgb, transparent, var(--tblr-primary) 100%)", "color-mix(in srgb, transparent, var(--tblr-red) 100%)",],
|
colors: [
|
||||||
legend: {
|
"color-mix(in srgb, transparent, var(--tblr-primary) 100%)",
|
||||||
show: false,
|
"color-mix(in srgb, transparent, var(--tblr-red) 100%)"
|
||||||
},
|
],
|
||||||
})).render();
|
legend: { show: false }
|
||||||
});
|
}).render();
|
||||||
|
} else {
|
||||||
|
document.getElementById('support-tickets').innerHTML = `
|
||||||
|
<div class="d-flex align-items-center justify-content-center" style="height: 240px;">
|
||||||
|
<div class="text-muted text-center">
|
||||||
|
<strong>No support ticket data available</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue