mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-18 14:45:25 +00:00
update line
This commit is contained in:
parent
5bca58b00d
commit
6cb20aa301
28
src/hooks/useListConfig.ts
Normal file
28
src/hooks/useListConfig.ts
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
/**
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||||
|
* contributor license agreements. See the NOTICE file distributed with
|
||||||
|
* this work for additional information regarding copyright ownership.
|
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||||
|
* (the "License"); you may not use this file except in compliance with
|
||||||
|
* the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
import { MetricQueryTypes, Calculations } from "./data";
|
||||||
|
export function useListConfig(config: any, index: number) {
|
||||||
|
const calculation =
|
||||||
|
config.metricConfig &&
|
||||||
|
config.metricConfig[index] &&
|
||||||
|
config.metricConfig[index].calculation;
|
||||||
|
const line =
|
||||||
|
config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues &&
|
||||||
|
calculation !== Calculations.Average;
|
||||||
|
|
||||||
|
return { isLinear: line };
|
||||||
|
}
|
@ -318,16 +318,21 @@ export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {
|
|||||||
return { queryStr, conditions };
|
return { queryStr, conditions };
|
||||||
}
|
}
|
||||||
function calculateExp(
|
function calculateExp(
|
||||||
arr: number[],
|
arr: any[],
|
||||||
config: { calculation: string }
|
config: { calculation: string }
|
||||||
): (number | string)[] {
|
): (number | string)[] {
|
||||||
let data: (number | string)[] = arr;
|
let data: (number | string)[] = [];
|
||||||
switch (config.calculation) {
|
switch (config.calculation) {
|
||||||
case Calculations.Average:
|
case Calculations.Average:
|
||||||
data = [arr.reduce((a, b) => a + b) / arr.length];
|
data = [
|
||||||
|
(
|
||||||
|
arr.map((d: { value: number }) => d.value).reduce((a, b) => a + b) /
|
||||||
|
arr.length
|
||||||
|
).toFixed(2),
|
||||||
|
];
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
data = arr.map((d) => aggregation(d, config));
|
data = arr.map((d) => aggregation(d.value, config));
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
return data;
|
return data;
|
||||||
@ -341,19 +346,19 @@ function aggregation(
|
|||||||
|
|
||||||
switch (config.calculation) {
|
switch (config.calculation) {
|
||||||
case Calculations.Percentage:
|
case Calculations.Percentage:
|
||||||
data = val / 100;
|
data = (val / 100).toFixed(2);
|
||||||
break;
|
break;
|
||||||
case Calculations.ByteToKB:
|
case Calculations.ByteToKB:
|
||||||
data = val / 1024;
|
data = (val / 1024).toFixed(2);
|
||||||
break;
|
break;
|
||||||
case Calculations.ByteToMB:
|
case Calculations.ByteToMB:
|
||||||
data = val / 1024 / 1024;
|
data = (val / 1024 / 1024).toFixed(2);
|
||||||
break;
|
break;
|
||||||
case Calculations.ByteToGB:
|
case Calculations.ByteToGB:
|
||||||
data = val / 1024 / 1024 / 1024;
|
data = (val / 1024 / 1024 / 1024).toFixed(2);
|
||||||
break;
|
break;
|
||||||
case Calculations.Apdex:
|
case Calculations.Apdex:
|
||||||
data = val / 10000;
|
data = (val / 10000).toFixed(2);
|
||||||
break;
|
break;
|
||||||
case Calculations.ConvertSeconds:
|
case Calculations.ConvertSeconds:
|
||||||
data = dayjs(val).format("YYYY-MM-DD HH:mm:ss");
|
data = dayjs(val).format("YYYY-MM-DD HH:mm:ss");
|
||||||
@ -365,7 +370,7 @@ function aggregation(
|
|||||||
data = data.toFixed(2);
|
data = data.toFixed(2);
|
||||||
break;
|
break;
|
||||||
case Calculations.MsTos:
|
case Calculations.MsTos:
|
||||||
data = val / 1000;
|
data = (val / 1000).toFixed(2);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
data;
|
data;
|
||||||
|
@ -52,6 +52,7 @@ const { t } = useI18n();
|
|||||||
const metricConfig = computed(() => props.config.metricConfig || []);
|
const metricConfig = computed(() => props.config.metricConfig || []);
|
||||||
const key = computed(() => Object.keys(props.data)[0]);
|
const key = computed(() => Object.keys(props.data)[0]);
|
||||||
const singleVal = computed(() => Number(props.data[key.value]));
|
const singleVal = computed(() => Number(props.data[key.value]));
|
||||||
|
console.log(props.data);
|
||||||
const unit = computed(
|
const unit = computed(
|
||||||
() => metricConfig.value[0] && encodeURIComponent(metricConfig.value[0].unit)
|
() => metricConfig.value[0] && encodeURIComponent(metricConfig.value[0].unit)
|
||||||
);
|
);
|
||||||
|
@ -52,7 +52,7 @@ limitations under the License. -->
|
|||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<div class="chart">
|
<div class="chart">
|
||||||
<Line
|
<Line
|
||||||
v-if="config.metricTypes[index] === 'readMetricsValues'"
|
v-if="useListConfig(config, index).isLinear"
|
||||||
:data="{ [metric]: scope.row[metric] }"
|
:data="{ [metric]: scope.row[metric] }"
|
||||||
:intervalTime="intervalTime"
|
:intervalTime="intervalTime"
|
||||||
:config="{
|
:config="{
|
||||||
@ -83,6 +83,7 @@ import { EndpointListConfig } from "@/types/dashboard";
|
|||||||
import { Endpoint } from "@/types/selector";
|
import { Endpoint } from "@/types/selector";
|
||||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||||
import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
|
import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
|
||||||
|
import { useListConfig } from "@/hooks/useListConfig";
|
||||||
import Line from "./Line.vue";
|
import Line from "./Line.vue";
|
||||||
import Card from "./Card.vue";
|
import Card from "./Card.vue";
|
||||||
import { EntityType } from "../data";
|
import { EntityType } from "../data";
|
||||||
|
@ -53,7 +53,7 @@ limitations under the License. -->
|
|||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<div class="chart">
|
<div class="chart">
|
||||||
<Line
|
<Line
|
||||||
v-if="config.metricTypes[index] === 'readMetricsValues'"
|
v-if="useListConfig(config, index).isLinear"
|
||||||
:data="metric ? { [metric]: scope.row[metric] } : {}"
|
:data="metric ? { [metric]: scope.row[metric] } : {}"
|
||||||
:intervalTime="intervalTime"
|
:intervalTime="intervalTime"
|
||||||
:config="{
|
:config="{
|
||||||
@ -121,6 +121,7 @@ import { EntityType } from "../data";
|
|||||||
import router from "@/router";
|
import router from "@/router";
|
||||||
import getDashboard from "@/hooks/useDashboardsSession";
|
import getDashboard from "@/hooks/useDashboardsSession";
|
||||||
import { MetricConfigOpt } from "@/types/dashboard";
|
import { MetricConfigOpt } from "@/types/dashboard";
|
||||||
|
import { useListConfig } from "@/hooks/useListConfig";
|
||||||
|
|
||||||
/*global defineProps */
|
/*global defineProps */
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
@ -40,6 +40,7 @@ const props = defineProps({
|
|||||||
showXAxis: true,
|
showXAxis: true,
|
||||||
showYAxis: true,
|
showYAxis: true,
|
||||||
smallTips: false,
|
smallTips: false,
|
||||||
|
showlabels: true,
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@ -185,7 +186,8 @@ function getOption() {
|
|||||||
left: 0,
|
left: 0,
|
||||||
right: 10,
|
right: 10,
|
||||||
bottom: 5,
|
bottom: 5,
|
||||||
containLabel: true,
|
containLabel:
|
||||||
|
props.config.showlabels === undefined ? true : props.config.showlabels,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: "category",
|
type: "category",
|
||||||
@ -199,6 +201,7 @@ function getOption() {
|
|||||||
axisLabel: { color: "#9da5b2", fontSize: "11" },
|
axisLabel: { color: "#9da5b2", fontSize: "11" },
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
|
show: props.config.showYAxis,
|
||||||
type: "value",
|
type: "value",
|
||||||
axisLine: { show: false },
|
axisLine: { show: false },
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
|
@ -64,14 +64,14 @@ limitations under the License. -->
|
|||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<div class="chart">
|
<div class="chart">
|
||||||
<Line
|
<Line
|
||||||
v-if="config.metricTypes[index] === 'readMetricsValues'"
|
v-if="useListConfig(config, index).isLinear"
|
||||||
:data="{ [metric]: scope.row[metric] }"
|
:data="{ [metric]: scope.row[metric] }"
|
||||||
:intervalTime="intervalTime"
|
:intervalTime="intervalTime"
|
||||||
:config="{
|
:config="{
|
||||||
showXAxis: false,
|
showXAxis: false,
|
||||||
showYAxis: false,
|
showYAxis: false,
|
||||||
smallTips: true,
|
smallTips: true,
|
||||||
showSymbol: true,
|
showlabels: false,
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
<Card
|
<Card
|
||||||
@ -108,6 +108,7 @@ import { useSelectorStore } from "@/store/modules/selectors";
|
|||||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||||
import { Service } from "@/types/selector";
|
import { Service } from "@/types/selector";
|
||||||
import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
|
import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
|
||||||
|
import { useListConfig } from "@/hooks/useListConfig";
|
||||||
import { EntityType } from "../data";
|
import { EntityType } from "../data";
|
||||||
import router from "@/router";
|
import router from "@/router";
|
||||||
import getDashboard from "@/hooks/useDashboardsSession";
|
import getDashboard from "@/hooks/useDashboardsSession";
|
||||||
|
Loading…
Reference in New Issue
Block a user