gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-3499 fix: Chart Legend 统计值展示不全

Browse Source
This commit is contained in:
zyh
2024-08-15 11:43:10 +08:00
parent 5c49e55d95
commit 32296ad401
1 changed files with 228 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
nezha-fronted/src/assets/css/components/chart/chart.scss
View File

@@ -217,8 +217,9 @@
tr { tr {
background: $--background-color-empty; background: $--background-color-empty;
//border-bottom: 1px solid $--border-color-light !important; //border-bottom: 1px solid $--border-color-light !important;
th,td { th,
border-bottom: 1px solid $--border-color-light td {
border-bottom: 1px solid $--border-color-light;
} }
} }
} }
@@ -235,7 +236,8 @@
height: 100%; height: 100%;
} }
.nz-chart__tooltip { .nz-chart__tooltip {
.row__label,.row__value { .row__label,
.row__value {
color: $--color-text-regular; color: $--color-text-regular;
} }
} }
@@ -295,7 +297,7 @@
margin-left: calc(50% - 10px); margin-left: calc(50% - 10px);
transform-origin: center center; transform-origin: center center;
font-size: 12px; font-size: 12px;
color:#6E7079; color: #6e7079;
pointer-events: none; pointer-events: none;
span { span {
transform: rotate(90deg); transform: rotate(90deg);
@@ -331,7 +333,8 @@
margin-left: 3px; margin-left: 3px;
.basic-info-table-list { .basic-info-table-list {
display: flex; display: flex;
.basic-info-table-title,.basic-info-table-value { .basic-info-table-title,
.basic-info-table-value {
display: inline-flex; display: inline-flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 50%; width: 50%;
@@ -374,6 +377,7 @@
} }
} }
.legend-container { .legend-container {
overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
flex: 1; flex: 1;
display: flex; display: flex;
@@ -403,12 +407,16 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
.legend--table-cell,.legend-item { .legend--table-cell,
.legend-item {
color: $--color-text-primary; color: $--color-text-primary;
} }
.legend-item, .legend--table-row { .legend-item,
&.legend-item--inactive, &.row--inactive { .legend--table-row {
.legend--table-cell,.legend-item { &.legend-item--inactive,
&.row--inactive {
.legend--table-cell,
.legend-item {
color: $--color-text-secondary !important; color: $--color-text-secondary !important;
} }
.legend-shape { .legend-shape {
@@ -455,7 +463,7 @@
margin-right: 6px; margin-right: 6px;
} }
&.legendSelect-disabled { &.legendSelect-disabled {
opacity: .6; opacity: 0.6;
cursor: default; cursor: default;
color: $--color-text-secondary !important; color: $--color-text-secondary !important;
} }
@@ -472,7 +480,7 @@
.legend--table { .legend--table {
width: 100%; width: 100%;
display: table; display: table;
table-layout: fixed; // table-layout: fixed;
.legend--table-body { .legend--table-body {
display: table-row-group; display: table-row-group;
@@ -481,9 +489,9 @@
.legend--table-row { .legend--table-row {
display: table-row; display: table-row;
width: 100%; width: 100%;
.legend--table-cell:not(:first-of-type){ // .legend--table-cell:not(:first-of-type){
width: 48px; // width: 48px;
} // }
} }
.legend--table-row:not(:first-of-type):hover { .legend--table-row:not(:first-of-type):hover {
background-color: $--background-color-1; background-color: $--background-color-1;
@@ -519,6 +527,7 @@
align-items: center; align-items: center;
} }
.legend-name { .legend-name {
max-width: 600px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -562,7 +571,8 @@
} }
} }
.endpoint-query-metrics.chart-fullscreen.nz-dialog,.recordRules-query-metrics.chart-fullscreen.nz-dialog { .endpoint-query-metrics.chart-fullscreen.nz-dialog,
.recordRules-query-metrics.chart-fullscreen.nz-dialog {
.chart-screen-header .chart-header__tools #browser-go { .chart-screen-header .chart-header__tools #browser-go {
margin-left: 5px; margin-left: 5px;
} }
@@ -699,7 +709,7 @@
} }
.no-animation { .no-animation {
.vue-grid-item { .vue-grid-item {
transition: none transition: none;
} }
} }
.chart-canvas-tooltip { .chart-canvas-tooltip {
@@ -709,7 +719,9 @@
white-space: nowrap; white-space: nowrap;
will-change: transform; will-change: transform;
//box-shadow: rgba(0,0,0,0.2) 1px 2px 10px; //box-shadow: rgba(0,0,0,0.2) 1px 2px 10px;
transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s,
visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s,
transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
border-width: 1px; border-width: 1px;
border-radius: 4px; border-radius: 4px;
font: 14px / 21px "Microsoft YaHei"; font: 14px / 21px "Microsoft YaHei";
@@ -780,7 +792,9 @@
white-space: nowrap; white-space: nowrap;
will-change: transform; will-change: transform;
box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px; box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s,
visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s,
transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
background-color: $--background-color-empty; background-color: $--background-color-empty;
border-width: 1px; border-width: 1px;
border-radius: 4px; border-radius: 4px;
@@ -826,15 +840,14 @@
display: none; display: none;
} }
.mapboxgl-ctrl-attrib-inner { .mapboxgl-ctrl-attrib-inner {
color: hsla(0,0%,69.8%,.77) !important; color: hsla(0, 0%, 69.8%, 0.77) !important;
background: unset; background: unset;
a { a {
color: hsla(0,0%,69.8%,.77) !important; color: hsla(0, 0%, 69.8%, 0.77) !important;
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
} }
} }
} }
.chart-label { .chart-label {
@@ -851,7 +864,7 @@
stroke: $--background-color-empty; stroke: $--background-color-empty;
} }
.tickLineFirst { .tickLineFirst {
stroke: $--color-text-primary;; stroke: $--color-text-primary;
} }
.no-events { .no-events {
@@ -877,7 +890,8 @@
line-height: 16px; line-height: 16px;
color: $--color-text-primary; color: $--color-text-primary;
} }
.doughnut-label,.rose-label{ .doughnut-label,
.rose-label {
cursor: pointer; cursor: pointer;
pointer-events: auto; pointer-events: auto;
font-size: 12px; font-size: 12px;
@@ -972,7 +986,6 @@
} }
} }
.bar-basic-horizontal { .bar-basic-horizontal {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -1189,7 +1202,11 @@
} }
} }
.uplot-toolbox { .uplot-toolbox {
position: absolute;right: 10px;top: 0;z-index: 999; font-size: 20px; position: absolute;
right: 10px;
top: 0;
z-index: 999;
font-size: 20px;
display: none; display: none;
} }
.panel-chart:hover .uplot-toolbox { .panel-chart:hover .uplot-toolbox {
@@ -1225,7 +1242,6 @@
visibility: visible; visibility: visible;
} }
} }
} }
.nz-chart__component--bottom { .nz-chart__component--bottom {
@@ -1321,4 +1337,3 @@
} }
} }
} }