colour settings start
This commit is contained in:
@@ -62,6 +62,26 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Helper function to get computed CSS variable value
|
||||
function getCssVar(varName) {
|
||||
return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
|
||||
}
|
||||
|
||||
// Get all chart colors
|
||||
const chartColors = {
|
||||
primary: getCssVar('--chart-primary'),
|
||||
secondary: getCssVar('--chart-secondary'),
|
||||
warning: getCssVar('--chart-warning'),
|
||||
primaryLight: getCssVar('--chart-primary-light'),
|
||||
primaryLighter: getCssVar('--chart-primary-lighter'),
|
||||
primaryLightest: getCssVar('--chart-primary-lightest'),
|
||||
primaryPale: getCssVar('--chart-primary-pale'),
|
||||
secondaryLight: getCssVar('--chart-secondary-light'),
|
||||
secondaryLighter: getCssVar('--chart-secondary-lighter'),
|
||||
secondaryLightest: getCssVar('--chart-secondary-lightest'),
|
||||
secondaryPale: getCssVar('--chart-secondary-pale')
|
||||
};
|
||||
|
||||
// Contact Status Chart
|
||||
const statusCtx = document.getElementById('statusChart');
|
||||
if (statusCtx) {
|
||||
@@ -71,7 +91,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
labels: ['Active', 'Inactive'],
|
||||
datasets: [{
|
||||
data: [{{ active_count }}, {{ inactive_count }}],
|
||||
backgroundColor: ['#16767b', '#741b5f'],
|
||||
backgroundColor: [chartColors.primary, chartColors.secondary],
|
||||
borderWidth: 0,
|
||||
hoverOffset: 4
|
||||
}]
|
||||
@@ -98,7 +118,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
labels: ['Starred', 'Unstarred'],
|
||||
datasets: [{
|
||||
data: [{{ starred_count }}, {{ file_count - starred_count }}],
|
||||
backgroundColor: ['#ffd700', '#16767b'],
|
||||
backgroundColor: [chartColors.warning, chartColors.primary],
|
||||
borderWidth: 0,
|
||||
hoverOffset: 4
|
||||
}]
|
||||
@@ -124,8 +144,16 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
datasets: [{
|
||||
data: [{% for type in storage_by_type %}{{ type.total_size }}{% if not loop.last %}, {% endif %}{% endfor %}],
|
||||
backgroundColor: [
|
||||
'#16767b', '#2c9da9', '#43c4d3', '#5ad9e8', '#71eefd',
|
||||
'#741b5f', '#8a2b73', '#a03b87', '#b64b9b', '#cc5baf'
|
||||
chartColors.primary,
|
||||
chartColors.primaryLight,
|
||||
chartColors.primaryLighter,
|
||||
chartColors.primaryLightest,
|
||||
chartColors.primaryPale,
|
||||
chartColors.secondary,
|
||||
chartColors.secondaryLight,
|
||||
chartColors.secondaryLighter,
|
||||
chartColors.secondaryLightest,
|
||||
chartColors.secondaryPale
|
||||
],
|
||||
borderWidth: 0,
|
||||
hoverOffset: 4
|
||||
@@ -156,8 +184,16 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
datasets: [{
|
||||
data: [{% for type in trash_by_type %}{{ type.count }}{% if not loop.last %}, {% endif %}{% endfor %}],
|
||||
backgroundColor: [
|
||||
'#16767b', '#2c9da9', '#43c4d3', '#5ad9e8', '#71eefd',
|
||||
'#741b5f', '#8a2b73', '#a03b87', '#b64b9b', '#cc5baf'
|
||||
chartColors.primary,
|
||||
chartColors.primaryLight,
|
||||
chartColors.primaryLighter,
|
||||
chartColors.primaryLightest,
|
||||
chartColors.primaryPale,
|
||||
chartColors.secondary,
|
||||
chartColors.secondaryLight,
|
||||
chartColors.secondaryLighter,
|
||||
chartColors.secondaryLightest,
|
||||
chartColors.secondaryPale
|
||||
],
|
||||
borderWidth: 0,
|
||||
hoverOffset: 4
|
||||
|
||||
Reference in New Issue
Block a user