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-plugin-trendlines';
const fontFamily = isServer
const chartJSThemefontFamily = isServer
? 'Roobert_Pro'
: getComputedStyle(document.documentElement).getPropertyValue('--font-sans');
const color = isServer
const chartJSThemecolor = isServer
? '#575859'
: getComputedStyle(document.documentElement).getPropertyValue('--color-text-secondary');
const backgroundColor = isServer
const chartJSThemebackgroundColor = isServer
? '#ffffff'
: getComputedStyle(document.documentElement).getPropertyValue('--color-background');
console.log('backgroundColor', backgroundColor);
console.log('chartJSThemebackgroundColor', chartJSThemebackgroundColor);
ChartJS.register(
LineController,
@ -81,11 +81,11 @@ ChartJS.defaults.responsive = true;
ChartJS.defaults.clip = false;
ChartJS.defaults.resizeDelay = 7;
ChartJS.defaults.maintainAspectRatio = false;
ChartJS.defaults.color = color;
ChartJS.defaults.color = chartJSThemecolor;
ChartJS.defaults.backgroundColor = DEFAULT_CHART_THEME;
ChartJS.defaults.font = {
...ChartJS.defaults.font,
family: fontFamily,
family: chartJSThemefontFamily,
size: 11,
weight: 'normal'
};
@ -114,7 +114,7 @@ ChartJS.defaults.font = {
scale.ticks.showLabelBackdrop = true;
scale.ticks.z = 10;
scale.ticks.includeBounds = true;
scale.ticks.backdropColor = backgroundColor;
scale.ticks.backdropColor = chartJSThemebackgroundColor;
scale.ticks.autoSkipPadding = 4;
scale.ticks.align = 'center';
scale.ticks.callback = function (value, index, values) {
@ -128,7 +128,7 @@ for (const scale of [
ChartJS.defaults.scales.logarithmic
]) {
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.autoSkipPadding = 2;
}
@ -162,7 +162,7 @@ ChartJS.defaults.plugins = {
font: {
weight: 'normal',
size: 10,
family: fontFamily
family: chartJSThemefontFamily
}
},
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 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 = {
backgroundColor: backgroundColor,
backgroundColor: isServer
? '#e6e6e6'
: getComputedStyle(document.documentElement).getPropertyValue('--color-page-background'),
borderWidth: 0.5,
borderColor: borderColor,
borderColor: isServer
? '#e0e0e0'
: getComputedStyle(document.documentElement).getPropertyValue('--color-border'),
borderRadius: 6,
padding: {
top: 3,
@ -26,7 +18,9 @@ export const defaultLabelOptionConfig = {
left: 6,
right: 6
},
color: textColor,
color: isServer
? '#575859'
: getComputedStyle(document.documentElement).getPropertyValue('--color-text-secondary'),
font: {
size: 10,
weight: 'normal' as const