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

resize for pie inner label

This commit is contained in:
Nate Kelley 2025-03-12 11:49:21 -06:00
parent 08dd7179c2
commit 059c1c18ba
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
2 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/app/test/page.tsx
View File

@ -25,9 +25,9 @@ export default function TestPage() {
<div className="flex h-screen w-screen items-center justify-center">
<BusterChart
data={[
{ segment: 'A', value1: 30, value2: 45 },
{ segment: 'B', value1: 20, value2: 25 },
{ segment: 'C', value1: 50, value2: 30 }
{ segment: 'A', value1: 302323, value2: 45 },
{ segment: 'B', value1: 20340, value2: 25 },
{ segment: 'C', value1: 5777770, value2: 30 }
]}
selectedChartType={ChartType.Pie}
pieChartAxis={{

19
web/src/components/ui/charts/BusterChartJS/hooks/useChartSpecificOptions/pieChartOptions.ts
View File

@ -1,3 +1,5 @@
'use client';
import type { ChartProps } from '../../core';
import type { ChartSpecificOptionsProps } from './interfaces';
import type { ChartType as ChartJSChartType } from 'chart.js';
@ -40,6 +42,13 @@ export const piePluginsHandler = ({
}: ChartSpecificOptionsProps): DeepPartial<PluginChartOptions<ChartJSChartType>>['plugins'] => {
let returnValue: DeepPartial<PluginChartOptions<ChartJSChartType>>['plugins'] = {};
const titleColor = getComputedStyle(document.documentElement).getPropertyValue(
'--color-text-secondary'
);
const valueColor = getComputedStyle(document.documentElement).getPropertyValue(
'--color-text-default'
);
if (pieShowInnerLabel && pieDonutWidth !== 0) {
const annotation: AnnotationPluginOptions = {
annotations: {
@ -61,8 +70,14 @@ export const piePluginsHandler = ({
)
];
},
font: [{ size: 14 }, { size: 22 }],
color: ['var(--color-text-tertiary)', 'var(--color-text-default)']
font: ({ chart }) => {
const minDimension = Math.min(chart.width, chart.height);
return [
{ size: Math.max(20, minDimension * 0.02) }, // title font
{ size: Math.max(42, minDimension * 0.042) } // value font
];
},
color: [titleColor, valueColor]
}
}
};