92 lines
3.2 KiB
Plaintext
92 lines
3.2 KiB
Plaintext
- const { fontColor, borderColor, scale_ticks_backdropColor } = theme.chartjs
|
|
|
|
script.
|
|
(() => {
|
|
const applyThemeDefaultsConfig = theme => {
|
|
if (theme === 'dark-mode') {
|
|
Chart.defaults.color = "!{fontColor.dark}"
|
|
Chart.defaults.borderColor = "!{borderColor.dark}"
|
|
Chart.defaults.scale.ticks.backdropColor = "!{scale_ticks_backdropColor.dark}"
|
|
} else {
|
|
Chart.defaults.color = "!{fontColor.light}"
|
|
Chart.defaults.borderColor = "!{borderColor.light}"
|
|
Chart.defaults.scale.ticks.backdropColor = "!{scale_ticks_backdropColor.light}"
|
|
}
|
|
}
|
|
|
|
// Recursively traverse the config object and automatically apply theme-specific color schemes
|
|
const applyThemeConfig = (obj, theme) => {
|
|
if (typeof obj !== 'object' || obj === null) return
|
|
|
|
Object.keys(obj).forEach(key => {
|
|
const value = obj[key]
|
|
// If the property is an object and has theme-specific options, apply them
|
|
if (typeof value === 'object' && value !== null) {
|
|
if (value[theme]) {
|
|
obj[key] = value[theme] // Apply the value for the current theme
|
|
} else {
|
|
// Recursively process child objects
|
|
applyThemeConfig(value, theme)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
const runChartJS = ele => {
|
|
window.loadChartJS = true
|
|
|
|
Array.from(ele).forEach((item, index) => {
|
|
const chartSrc = item.firstElementChild
|
|
const chartID = item.getAttribute('data-chartjs-id') || ('chartjs-' + index) // Use custom ID or default ID
|
|
const width = item.getAttribute('data-width')
|
|
const existingCanvas = document.getElementById(chartID)
|
|
|
|
// If a canvas already exists, remove it to avoid rendering duplicates
|
|
if (existingCanvas) {
|
|
existingCanvas.parentNode.remove()
|
|
}
|
|
|
|
const chartDefinition = chartSrc.textContent
|
|
const canvas = document.createElement('canvas')
|
|
canvas.id = chartID
|
|
|
|
const div = document.createElement('div')
|
|
div.className = 'chartjs-wrap'
|
|
|
|
if (width) {
|
|
div.style.width = width
|
|
}
|
|
|
|
div.appendChild(canvas)
|
|
chartSrc.insertAdjacentElement('afterend', div)
|
|
|
|
const ctx = document.getElementById(chartID).getContext('2d')
|
|
|
|
const config = JSON.parse(chartDefinition)
|
|
|
|
const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark-mode' : 'light-mode'
|
|
|
|
// Set default styles (initial setup)
|
|
applyThemeDefaultsConfig(theme)
|
|
|
|
// Automatically traverse the config and apply dual-mode color schemes
|
|
applyThemeConfig(config, theme)
|
|
|
|
new Chart(ctx, config)
|
|
})
|
|
}
|
|
|
|
const loadChartJS = () => {
|
|
const chartJSEle = document.querySelectorAll('#article-container .chartjs-container')
|
|
if (chartJSEle.length === 0) return
|
|
|
|
window.loadChartJS ? runChartJS(chartJSEle) : btf.getScript('!{url_for(theme.asset.chartjs)}').then(() => runChartJS(chartJSEle))
|
|
}
|
|
|
|
// Listen for theme change events
|
|
btf.addGlobalFn('themeChange', loadChartJS, 'chartjs')
|
|
btf.addGlobalFn('encrypt', loadChartJS, 'chartjs')
|
|
|
|
window.pjax ? loadChartJS() : document.addEventListener('DOMContentLoaded', loadChartJS)
|
|
})()
|