Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

move to specific name in chartjstheme

This commit is contained in:
Nate Kelley 2025-07-10 09:37:29 -06:00
parent 834d75674a
commit 9c1d5495c5
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
2 changed files with 18 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/web/src/components/ui/charts/BusterChartJS/ChartJSTheme.ts
View File

@ -34,17 +34,17 @@ import './core/plugins/chartjs-plugin-dayjs';
import './core/plugins/chartjs-scale-tick-duplicate'; import './core/plugins/chartjs-scale-tick-duplicate';
import './core/plugins/chartjs-plugin-trendlines'; import './core/plugins/chartjs-plugin-trendlines';
const fontFamily = isServer const chartJSThemefontFamily = isServer
? 'Roobert_Pro' ? 'Roobert_Pro'
: getComputedStyle(document.documentElement).getPropertyValue('--font-sans'); : getComputedStyle(document.documentElement).getPropertyValue('--font-sans');
const color = isServer const chartJSThemecolor = isServer
? '#575859' ? '#575859'
: getComputedStyle(document.documentElement).getPropertyValue('--color-text-secondary'); : getComputedStyle(document.documentElement).getPropertyValue('--color-text-secondary');
const backgroundColor = isServer const chartJSThemebackgroundColor = isServer
? '#ffffff' ? '#ffffff'
: getComputedStyle(document.documentElement).getPropertyValue('--color-background'); : getComputedStyle(document.documentElement).getPropertyValue('--color-background');
console.log('backgroundColor', backgroundColor); console.log('chartJSThemebackgroundColor', chartJSThemebackgroundColor);
ChartJS.register( ChartJS.register(
LineController, LineController,
@ -81,11 +81,11 @@ ChartJS.defaults.responsive = true;
ChartJS.defaults.clip = false; ChartJS.defaults.clip = false;
ChartJS.defaults.resizeDelay = 7; ChartJS.defaults.resizeDelay = 7;
ChartJS.defaults.maintainAspectRatio = false; ChartJS.defaults.maintainAspectRatio = false;
ChartJS.defaults.color = color; ChartJS.defaults.color = chartJSThemecolor;
ChartJS.defaults.backgroundColor = DEFAULT_CHART_THEME; ChartJS.defaults.backgroundColor = DEFAULT_CHART_THEME;
ChartJS.defaults.font = { ChartJS.defaults.font = {
...ChartJS.defaults.font, ...ChartJS.defaults.font,
family: fontFamily, family: chartJSThemefontFamily,
size: 11, size: 11,
weight: 'normal' weight: 'normal'
}; };
@ -114,7 +114,7 @@ ChartJS.defaults.font = {
scale.ticks.showLabelBackdrop = true; scale.ticks.showLabelBackdrop = true;
scale.ticks.z = 10; scale.ticks.z = 10;
scale.ticks.includeBounds = true; scale.ticks.includeBounds = true;
scale.ticks.backdropColor = backgroundColor; scale.ticks.backdropColor = chartJSThemebackgroundColor;
scale.ticks.autoSkipPadding = 4; scale.ticks.autoSkipPadding = 4;
scale.ticks.align = 'center'; scale.ticks.align = 'center';
scale.ticks.callback = function (value, index, values) { scale.ticks.callback = function (value, index, values) {
@ -128,7 +128,7 @@ for (const scale of [
ChartJS.defaults.scales.logarithmic ChartJS.defaults.scales.logarithmic
]) { ]) {
scale.ticks.z = 0; //this used to be a 100, but I changed it for datalabels sake scale.ticks.z = 0; //this used to be a 100, but I changed it for datalabels sake
scale.ticks.backdropColor = backgroundColor; scale.ticks.backdropColor = chartJSThemebackgroundColor;
scale.ticks.showLabelBackdrop = true; scale.ticks.showLabelBackdrop = true;
scale.ticks.autoSkipPadding = 2; scale.ticks.autoSkipPadding = 2;
} }
@ -162,7 +162,7 @@ ChartJS.defaults.plugins = {
font: { font: {
weight: 'normal', weight: 'normal',
size: 10, size: 10,
family: fontFamily family: chartJSThemefontFamily
} }
}, },
tooltipHoverBar: { tooltipHoverBar: {

24
apps/web/src/components/ui/charts/BusterChartJS/hooks/useChartSpecificOptions/labelOptionConfig.ts
View File

@ -3,22 +3,14 @@
import { isServer } from '@tanstack/react-query'; import { isServer } from '@tanstack/react-query';
import type { ChartProps } from '../../core'; import type { ChartProps } from '../../core';
const backgroundColor = isServer
? '#e6e6e6'
: getComputedStyle(document.documentElement).getPropertyValue('--color-page-background');
const borderColor = isServer
? '#e0e0e0'
: getComputedStyle(document.documentElement).getPropertyValue('--color-border');
const textColor = isServer
? '#575859'
: getComputedStyle(document.documentElement).getPropertyValue('--color-text-secondary');
export const defaultLabelOptionConfig = { export const defaultLabelOptionConfig = {
backgroundColor: backgroundColor, backgroundColor: isServer
? '#e6e6e6'
: getComputedStyle(document.documentElement).getPropertyValue('--color-page-background'),
borderWidth: 0.5, borderWidth: 0.5,
borderColor: borderColor, borderColor: isServer
? '#e0e0e0'
: getComputedStyle(document.documentElement).getPropertyValue('--color-border'),
borderRadius: 6, borderRadius: 6,
padding: { padding: {
top: 3, top: 3,
@ -26,7 +18,9 @@ export const defaultLabelOptionConfig = {
left: 6, left: 6,
right: 6 right: 6
}, },
color: textColor, color: isServer
? '#575859'
: getComputedStyle(document.documentElement).getPropertyValue('--color-text-secondary'),
font: { font: {
size: 10, size: 10,
weight: 'normal' as const weight: 'normal' as const