Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 08:58:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 111

Website: Downgrade to chart.js 2.9.4 (#6133)

Browse source
This commit is contained in:
Eric 2022-06-07 23:07:58 -05:00 committed by GitHub
parent 5bf1f58a3c
commit a6fcb6a9e0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 76 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
website/assets/dependencies/chart.min.js vendored
View file

File diff suppressed because one or more lines are too long

96
website/assets/js/pages/reports/state-of-device-management.page.js vendored
View file

@ -349,7 +349,7 @@ parasails.registerPage('state-of-device-management', {
methods: {
scrollSideNavigationWithHeader: function () {
var navBar = document.querySelector('div[purpose="report-sidebar"');
var navBar = document.querySelector('div[purpose="report-sidebar"]');
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if(navBar) {
if (scrollTop > this.scrollDistance && scrollTop > window.innerHeight * 1.5) {
@ -382,42 +382,39 @@ parasails.registerPage('state-of-device-management', {
type: 'doughnut',
data: clonedChartData,
options: {
cutout: '40%',
aspectRatio: chartHasLegendOnBottom ? 1 : 2,
cutoutPercentage: 40,
responsive: true,
aspectRatio: chartHasLegendOnBottom ? .8 : 1.25,
maintainAspectRatio: false,
layout: {
autoPadding: true,
padding: {
left: 0,
bottom: 0,
top: 16,
// setting right padding if a legend postion was specified
right: chartHasLegendOnBottom ? 0 : 50,
}
},
},
plugins: {
legend: {
fullSize: true,
position: chartHasLegendOnBottom ? 'bottom' : 'right',
// removing the default onClick event from the chart's legend
onClick: ()=>{},
labels: {
padding: 16,
generateLabels: (chart) => {
const datasets = chart.data.datasets;
return datasets[0].data.map((data, i) => ({
text: `${chart.data.labels[i]} (${data}%)`,
fillStyle: datasets[0].backgroundColor[i],
pointStyle: 'rectRounded',
fontColor: '#000000',
lineWidth: 0,
}));
},
usePointStyle: true,
font: {
size: 14,
family: 'Nunito Sans',
}
}
legend: {
fullWidth: false,
position: chartHasLegendOnBottom ? 'bottom' : 'right',
// removing the default onClick event from the chart's legend
onClick: (click)=>{console.log(click);},
labels: {
padding: 16,
generateLabels: (chart) => {
const datasets = chart.data.datasets;
return datasets[0].data.map((data, i) => ({
text: `${chart.data.labels[i]} (${data}%)`,
fillStyle: datasets[0].backgroundColor[i],
pointStyle: 'rectRounded',
lineWidth: 0,
}));
},
fontColor: '#000',
usePointStyle: true,
fontSize: 14,
fontFamily: '"Nunito Sans"',
}
}
}
@ -426,48 +423,57 @@ parasails.registerPage('state-of-device-management', {
}
},
updateChartsOnPage: function() {
updateChartsOnPage: async function() {
if(this.redrawnCharts.length < 1) {
// Iterating through charts drawn on the page. If the window width is below 768px, we'll change the configuration and update the charts.
for(let index in this.chartsDrawnOnPage) {
console.log(this.chartsDrawnOnPage[index]);
// If a bottom legend position was specified, we'll ignore it.
let chartHasLegendOnBottomAtAllWidths = this.chartsDrawnOnPage[index]._aspectRatio === 1;
let chartHasLegendOnBottomAtAllWidths = this.chartsDrawnOnPage[index].aspectRatio === 0.8;
console.log(this.chartsDrawnOnPage[index] + ' ' + 'chartHasLegendOnBottomAtAllWidths: '+ chartHasLegendOnBottomAtAllWidths);
if(window.innerWidth < 768 && !chartHasLegendOnBottomAtAllWidths){
this.redrawnCharts.push(this.chartsDrawnOnPage[index]);
this.chartsDrawnOnPage[index].options.aspectRatio = .90;
this.chartsDrawnOnPage[index].aspectRatio = 1;
this.chartsDrawnOnPage[index].options.legend.position = 'bottom';
this.chartsDrawnOnPage[index].options.legend.fontSize = 13;
this.chartsDrawnOnPage[index].options.legend.labels.padding = 8;
this.chartsDrawnOnPage[index].options.layout.padding.right = 0;
this.chartsDrawnOnPage[index].options.plugins.legend.position = 'bottom';
this.chartsDrawnOnPage[index].options.plugins.legend.labels.font.size = 13;
this.chartsDrawnOnPage[index].options.plugins.legend.labels.padding = 8;
this.chartsDrawnOnPage[index].update();
this.chartsDrawnOnPage[index].resize();
} else if(!chartHasLegendOnBottomAtAllWidths) {
this.redrawnCharts.push(this.chartsDrawnOnPage[index]);
this.chartsDrawnOnPage[index].options.aspectRatio = 2;
this.chartsDrawnOnPage[index].aspectRatio = 2;
this.chartsDrawnOnPage[index].options.layout.padding.right = 50;
this.chartsDrawnOnPage[index].options.plugins.legend.position = 'right';
this.chartsDrawnOnPage[index].options.legend.position = 'right';
this.chartsDrawnOnPage[index].update();
this.chartsDrawnOnPage[index].resize();
}
}
console.log(this.chartsDrawnOnPage);
} else {
// Iterating through the charts that have been redrawn and changing them back to their original configuration.
for(let index in this.redrawnCharts) {
if(window.innerWidth < 768){
this.redrawnCharts[index].options.aspectRatio = .90;
this.redrawnCharts[index].aspectRatio = 1;
this.redrawnCharts[index].canvas.attributes.style.height = '340px';
this.redrawnCharts[index].options.legend.position = 'bottom';
this.redrawnCharts[index].options.legend.fontSize = 13;
this.redrawnCharts[index].options.legend.labels.padding = 8;
this.redrawnCharts[index].options.layout.padding.right = 0;
this.redrawnCharts[index].options.plugins.legend.position = 'bottom';
this.chartsDrawnOnPage[index].options.plugins.legend.labels.font.size = 13;
this.chartsDrawnOnPage[index].options.plugins.legend.labels.padding = 8;
this.redrawnCharts[index].update();
this.redrawnCharts[index].resize();
} else {
this.redrawnCharts[index].options.aspectRatio = 2;
this.redrawnCharts[index].aspectRatio = 1.25;
this.redrawnCharts[index].options.layout.padding.right = 50;
this.redrawnCharts[index].options.plugins.legend.position = 'right';
this.chartsDrawnOnPage[index].options.plugins.legend.labels.font.size = 14;
this.chartsDrawnOnPage[index].options.plugins.legend.labels.padding = 16;
this.redrawnCharts[index].options.legend.position = 'right';
this.redrawnCharts[index].options.legend.fontSize = 14;
this.redrawnCharts[index].options.legend.labels.padding = 16;
this.redrawnCharts[index].update();
this.redrawnCharts[index].resize();
}
}
console.log(this.redrawnCharts);
}
},

35
website/assets/styles/pages/reports/state-of-device-management.less vendored
View file

@ -204,12 +204,20 @@
border-radius: 24px;
margin-top: 40px;
margin-bottom: 40px;
[purpose='chart-title'] {
display: inline-block;
font-weight: 700;
font-size: 16px;
line-height: 20px;
}
}
[purpose='chart-title'] {
display: inline-block;
font-weight: 700;
font-size: 16px;
line-height: 20px;
}
[purpose='chart-container'] {
height: 266px;
max-height: fit-content;
}
[purpose='chart-with-large-legend-container'] {
height: 266px;
max-height: fit-content;
}
}
@ -314,11 +322,13 @@
[purpose='report-note'] {
text-align: center;
}
[purpose='chart-card'] {
[purpose='chart-container'] {
max-width: 400px;
margin: auto;
}
[purpose='chart-container'] {
max-height: fit-content;
max-width: fit-content;
margin: auto;
}
[purpose='chart-with-large-legend-container'] {
height: 350px;
}
}
@ -349,9 +359,6 @@
margin-left: -16px;
margin-right: -16px;
border-radius: 16px;
[purpose='chart-container'] {
max-width: 60vw;
}
}
}
}

2
website/views/pages/reports/state-of-device-management.ejs vendored
View file

@ -282,7 +282,7 @@
<p>The largest segment (22.2%) reported that deploying and implementing their MDM took over a year. However, for 18.7%, it took four weeks or less. For 15.7%, it took one to three months, and for 13.1%, it took three to six months. For 16.2%, it took six to nine months, and for 14.1%, it took nine to twelve months.</p>
<div purpose="chart-card">
<span purpose="chart-title">How long do you estimate it took to completely deploy and implement your MDM?</span>
<div purpose="chart-container">
<div purpose="chart-with-large-legend-container">
<canvas id="mdm-deployment-time-chart"></canvas>
</div>
</div>