github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-15 12:49:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: add tooltips for list graphs (#47)

Browse Source
This commit is contained in:
Fine0830
2022-03-30 21:19:06 +08:00
committed by GitHub
parent 767c92c60d
commit ee06546c20
38 changed files with 138 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/views/dashboard/graphs/EndpointList.vue
View File

@@ -53,7 +53,12 @@ limitations under the License. -->
v-if="config.metricTypes[index] === 'readMetricsValues'"
:data="{ [metric]: scope.row[metric] }"
:intervalTime="intervalTime"
:config="{ showXAxis: false, showYAxis: false }"
:config="{
showXAxis: false,
showYAxis: false,
smallTips: true,
showSymbol: true,
}"
/>
<Card
v-else
@@ -204,7 +209,7 @@ watch(
@import "./style.scss";
.chart {
height: 39px;
height: 60px;
}
.inputs {

7
src/views/dashboard/graphs/HeatMap.vue
View File

@@ -36,8 +36,11 @@ const props = defineProps({
const option = computed(() => getOption());
function getOption() {
const metric = props.config.metrics[0];
const nodes = (props.data[metric] && props.data[metric].nodes) || [];
const metric = props.config.metrics && props.config.metrics[0];
let nodes: any = [];
if (metric) {
nodes = (props.data[metric] && props.data[metric].nodes) || [];
}
const source = (nodes || []).map((d: number[]) => d[2]);
const maxItem = Math.max(...source);
const minItem = Math.min(...source);

9
src/views/dashboard/graphs/InstanceList.vue
View File

@@ -53,7 +53,12 @@ limitations under the License. -->
v-if="config.metricTypes[index] === 'readMetricsValues'"
:data="metric ? { [metric]: scope.row[metric] } : {}"
:intervalTime="intervalTime"
:config="{ showXAxis: false, showYAxis: false }"
:config="{
showXAxis: false,
showYAxis: false,
smallTips: true,
showSymbol: true,
}"
/>
<Card
v-else
@@ -255,7 +260,7 @@ watch(
@import "./style.scss";
.chart {
height: 40px;
height: 60px;
}
.inputs {

38
src/views/dashboard/graphs/Line.vue
View File

@@ -39,6 +39,7 @@ const props = defineProps({
opacity: 0.4,
showXAxis: true,
showYAxis: true,
smallTips: false,
}),
},
});
@@ -79,7 +80,7 @@ function getOption() {
name: i,
type: "line",
symbol: "circle",
symbolSize: 8,
symbolSize: 6,
showSymbol: props.config.showSymbol,
step: props.config.step,
smooth: props.config.smooth,
@@ -141,20 +142,31 @@ function getOption() {
];
break;
}
const tooltip = {
trigger: "axis",
backgroundColor: "rgb(50,50,50)",
textStyle: {
fontSize: 12,
color: "#ccc",
},
enterable: true,
extraCssText: "max-height: 300px; overflow: auto; border: none;",
};
const tips = {
formatter(params: any) {
return `${params[0].value[1]}`;
},
extraCssText: `height: 20px; padding:0 2px;`,
trigger: "axis",
textStyle: {
fontSize: 12,
color: "#333",
},
};
return {
color,
tooltip: {
trigger: "axis",
zlevel: 1000,
z: 60,
backgroundColor: "rgb(50,50,50)",
textStyle: {
fontSize: 13,
color: "#ccc",
},
enterable: true,
extraCssText: "max-height: 300px; overflow: auto; border: none",
},
tooltip: props.config.smallTips ? tips : tooltip,
legend: {
type: "scroll",
show: keys.length === 1 ? false : true,

9
src/views/dashboard/graphs/ServiceList.vue
View File

@@ -65,7 +65,12 @@ limitations under the License. -->
v-if="config.metricTypes[index] === 'readMetricsValues'"
:data="{ [metric]: scope.row[metric] }"
:intervalTime="intervalTime"
:config="{ showXAxis: false, showYAxis: false }"
:config="{
showXAxis: false,
showYAxis: false,
smallTips: true,
showSymbol: true,
}"
/>
<Card
v-else
@@ -288,7 +293,7 @@ watch(
@import "./style.scss";
.chart {
height: 39px;
height: 60px;
}
.inputs {