update line

This commit is contained in:
Qiuxia Fan 2022-04-13 17:15:40 +08:00
parent 5bca58b00d
commit 6cb20aa301
7 changed files with 55 additions and 15 deletions

View 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 };
}

View File

@ -318,16 +318,21 @@ export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {
return { queryStr, conditions };
}
function calculateExp(
arr: number[],
arr: any[],
config: { calculation: string }
): (number | string)[] {
let data: (number | string)[] = arr;
let data: (number | string)[] = [];
switch (config.calculation) {
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;
default:
data = arr.map((d) => aggregation(d, config));
data = arr.map((d) => aggregation(d.value, config));
break;
}
return data;
@ -341,19 +346,19 @@ function aggregation(
switch (config.calculation) {
case Calculations.Percentage:
data = val / 100;
data = (val / 100).toFixed(2);
break;
case Calculations.ByteToKB:
data = val / 1024;
data = (val / 1024).toFixed(2);
break;
case Calculations.ByteToMB:
data = val / 1024 / 1024;
data = (val / 1024 / 1024).toFixed(2);
break;
case Calculations.ByteToGB:
data = val / 1024 / 1024 / 1024;
data = (val / 1024 / 1024 / 1024).toFixed(2);
break;
case Calculations.Apdex:
data = val / 10000;
data = (val / 10000).toFixed(2);
break;
case Calculations.ConvertSeconds:
data = dayjs(val).format("YYYY-MM-DD HH:mm:ss");
@ -365,7 +370,7 @@ function aggregation(
data = data.toFixed(2);
break;
case Calculations.MsTos:
data = val / 1000;
data = (val / 1000).toFixed(2);
break;
default:
data;

View File

@ -52,6 +52,7 @@ const { t } = useI18n();
const metricConfig = computed(() => props.config.metricConfig || []);
const key = computed(() => Object.keys(props.data)[0]);
const singleVal = computed(() => Number(props.data[key.value]));
console.log(props.data);
const unit = computed(
() => metricConfig.value[0] && encodeURIComponent(metricConfig.value[0].unit)
);

View File

@ -52,7 +52,7 @@ limitations under the License. -->
<template #default="scope">
<div class="chart">
<Line
v-if="config.metricTypes[index] === 'readMetricsValues'"
v-if="useListConfig(config, index).isLinear"
:data="{ [metric]: scope.row[metric] }"
:intervalTime="intervalTime"
:config="{
@ -83,6 +83,7 @@ import { EndpointListConfig } from "@/types/dashboard";
import { Endpoint } from "@/types/selector";
import { useDashboardStore } from "@/store/modules/dashboard";
import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
import { useListConfig } from "@/hooks/useListConfig";
import Line from "./Line.vue";
import Card from "./Card.vue";
import { EntityType } from "../data";

View File

@ -53,7 +53,7 @@ limitations under the License. -->
<template #default="scope">
<div class="chart">
<Line
v-if="config.metricTypes[index] === 'readMetricsValues'"
v-if="useListConfig(config, index).isLinear"
:data="metric ? { [metric]: scope.row[metric] } : {}"
:intervalTime="intervalTime"
:config="{
@ -121,6 +121,7 @@ import { EntityType } from "../data";
import router from "@/router";
import getDashboard from "@/hooks/useDashboardsSession";
import { MetricConfigOpt } from "@/types/dashboard";
import { useListConfig } from "@/hooks/useListConfig";
/*global defineProps */
const props = defineProps({

View File

@ -40,6 +40,7 @@ const props = defineProps({
showXAxis: true,
showYAxis: true,
smallTips: false,
showlabels: true,
}),
},
});
@ -185,7 +186,8 @@ function getOption() {
left: 0,
right: 10,
bottom: 5,
containLabel: true,
containLabel:
props.config.showlabels === undefined ? true : props.config.showlabels,
},
xAxis: {
type: "category",
@ -199,6 +201,7 @@ function getOption() {
axisLabel: { color: "#9da5b2", fontSize: "11" },
},
yAxis: {
show: props.config.showYAxis,
type: "value",
axisLine: { show: false },
axisTick: { show: false },

View File

@ -64,14 +64,14 @@ limitations under the License. -->
<template #default="scope">
<div class="chart">
<Line
v-if="config.metricTypes[index] === 'readMetricsValues'"
v-if="useListConfig(config, index).isLinear"
:data="{ [metric]: scope.row[metric] }"
:intervalTime="intervalTime"
:config="{
showXAxis: false,
showYAxis: false,
smallTips: true,
showSymbol: true,
showlabels: false,
}"
/>
<Card
@ -108,6 +108,7 @@ import { useSelectorStore } from "@/store/modules/selectors";
import { useDashboardStore } from "@/store/modules/dashboard";
import { Service } from "@/types/selector";
import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
import { useListConfig } from "@/hooks/useListConfig";
import { EntityType } from "../data";
import router from "@/router";
import getDashboard from "@/hooks/useDashboardsSession";