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

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

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

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

@ -107,6 +107,7 @@ export function getCommonBarOptions(
type: 'shadow',
axis: 'auto',
},
backgroundColor: 'transparent',
formatter(params: any) {
let testPlanHtml = '';
// 如果是测试计划未分配
@ -130,7 +131,7 @@ export function getCommonBarOptions(
paramsList = params;
}
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">
${params[0].axisValueLabel}
</div>
@ -270,10 +271,16 @@ export function getCommonBarOptions(
},
tooltip: {
show: true,
padding: 16,
padding: 0,
position(point: any) {
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;',
textStyle: {
width: 300,
@ -750,9 +757,10 @@ export function getSeriesData(
show: true,
trigger: 'item',
enterable: true,
backgroundColor: 'transparent',
formatter(params: any) {
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="mb-[2px] mr-[8px] h-[8px] w-[8px] rounded-sm bg-[${params.color}]" style="background:${
params.color