test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

style(工作台): 调整工作台图表tooltip暗黑模式Style

This commit is contained in:
xinxin.wu 2024-12-18 17:40:05 +08:00 committed by 刘瑞斌
parent 656036fa79
commit aee3732db6
2 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/config/testPlan.ts
View File

@ -151,20 +151,21 @@ export const toolTipConfig: TooltipOption = {
color: '#959598', color: '#959598',
}, },
position: 'top', position: 'top',
backgroundColor: '#fff', backgroundColor: 'transparent',
padding: 16, padding: 0,
borderWidth: 0, borderWidth: 0,
appendTo: 'body', appendTo: 'body',
formatter(params: any) { formatter(params: any) {
const html = ` const html = `
<div class="w-[144px] flex items-center justify-between"> <div class="w-[144px] p-[16px] rounded flex items-center justify-between bg-[var(--color-bg-5)]">
<div class=" flex items-center"> <div class=" flex items-center">
<div class="mb-[2px] mr-[8px] h-[6px] w-[6px] rounded-full bg-[${params.color}]" style="background:${ <div class="mb-[2px] mr-[8px] h-[6px] w-[6px] rounded-full bg-[${params.color}]" style="background:${
params.color params.color
}"></div> }">
<div style="color:#959598">${params.name}</div>
</div> </div>
<div class="text-[#323233] font-medium">${addCommasToNumber(params.value)}</div> <div class="text-[var(--color-text-2)]">${params.name}</div>
</div>
<div class="text-[var(--color-text-1)] font-medium">${addCommasToNumber(params.value)}</div>
</div> </div>
`; `;
return html; return html;

14
frontend/src/views/workbench/homePage/utils.ts
View File

@ -107,6 +107,7 @@ export function getCommonBarOptions(
type: 'shadow', type: 'shadow',
axis: 'auto', axis: 'auto',
}, },
backgroundColor: 'transparent',
formatter(params: any) { formatter(params: any) {
let testPlanHtml = ''; let testPlanHtml = '';
// 如果是测试计划未分配 // 如果是测试计划未分配
@ -130,7 +131,7 @@ export function getCommonBarOptions(
paramsList = params; paramsList = params;
} }
const html = ` const html = `
<div class="w-[186px] rounded ms-scroll-bar max-h-[236px] overflow-y-auto p-[16px] gap-[8px] flex flex-col bg-[var(--color-text-fff)]"> <div class="w-[186px] rounded ms-scroll-bar max-h-[236px] overflow-y-auto p-[16px] gap-[8px] flex flex-col bg-[var(--color-bg-5)]">
<div class="font-medium max-w-[150px] text-[var(--color-text-1)] one-line-text"> <div class="font-medium max-w-[150px] text-[var(--color-text-1)] one-line-text">
${params[0].axisValueLabel} ${params[0].axisValueLabel}
</div> </div>
@ -270,10 +271,16 @@ export function getCommonBarOptions(
}, },
tooltip: { tooltip: {
show: true, show: true,
padding: 16, padding: 0,
position(point: any) { position(point: any) {
return [point[0], '10%']; return [point[0], '10%'];
}, },
backgroundColor: 'transparent',
formatter(params: any) {
return `
<div class="p-[8px] rounded bg-[var(--color-bg-5)] text-[var(--color-text-1)]">${params.name}</div>
`;
},
extraCssText: 'max-width: 300px; white-space: normal; word-wrap: break-word; word-break: break-all;', extraCssText: 'max-width: 300px; white-space: normal; word-wrap: break-word; word-break: break-all;',
textStyle: { textStyle: {
width: 300, width: 300,
@ -750,9 +757,10 @@ export function getSeriesData(
show: true, show: true,
trigger: 'item', trigger: 'item',
enterable: true, enterable: true,
backgroundColor: 'transparent',
formatter(params: any) { formatter(params: any) {
const html = ` const html = `
<div class="w-[186px] h-[50px] p-[16px] flex items-center justify-between bg-[var(--color-text-fff)]"> <div class="w-[186px] rounded h-[50px] p-[16px] flex items-center justify-between bg-[var(--color-bg-5)]">
<div class=" flex items-center"> <div class=" flex items-center">
<div class="mb-[2px] mr-[8px] h-[8px] w-[8px] rounded-sm bg-[${params.color}]" style="background:${ <div class="mb-[2px] mr-[8px] h-[8px] w-[8px] rounded-sm bg-[${params.color}]" style="background:${
params.color params.color