From e8ceaab3040f78d9329517e2f89d71222947e700 Mon Sep 17 00:00:00 2001 From: rivery Date: Fri, 23 Dec 2022 18:50:23 +0800 Subject: [PATCH] feat: fix some issues --- src/components/Charts/LineChart.tsx | 124 +-------------------- src/components/DashboardCard/LineCard.tsx | 6 +- src/utils/metric.ts | 130 +++++++++++++++++++++- 3 files changed, 132 insertions(+), 128 deletions(-) diff --git a/src/components/Charts/LineChart.tsx b/src/components/Charts/LineChart.tsx index e5e37b2d..2f4a6275 100644 --- a/src/components/Charts/LineChart.tsx +++ b/src/components/Charts/LineChart.tsx @@ -1,11 +1,12 @@ import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'; import { Chart, registerInteraction } from '@antv/g2'; -import { ChartCfg, Options } from '@antv/g2/lib/interface'; +import { ChartCfg } from '@antv/g2/lib/interface'; import dayjs from 'dayjs'; import { VALUE_TYPE } from '@/utils/promQL'; import { LINE_CHART_COLORS } from '@/utils/chart/chart'; import { getProperByteDesc } from '@/utils/dashboard'; import { ServiceName } from '@/utils/interface'; +import { updateChartByValueType } from '@/utils/metric'; export interface IProps { baseLine?: number; @@ -181,126 +182,7 @@ function LineChart(props: IProps, ref) { .position('time*value') .color('type', LINE_CHART_COLORS); - const tooltipTitle = time => - dayjs(Number(time) * 1000).format('YYYY-MM-DD HH:mm:ss'); - - switch (options.valueType) { - case VALUE_TYPE.percentage: - chartInstanceRef.current.axis('value', { - label: { - formatter: percent => `${percent}%`, - }, - }); - chartInstanceRef.current.tooltip({ - customItems: items => - items.map(item => { - const value = `${Number(item.value).toFixed(2)}%`; - return { - ...item, - value, - }; - }), - showCrosshairs: true, - shared: true, - title: tooltipTitle, - }); - chartInstanceRef.current.scale({ - value: { - min: 0, - max: options.maxNum || 100, - tickInterval: options.maxNum ? (options.maxNum % 10 + 10) / 5 : 25, - }, - }); - break; - case VALUE_TYPE.byte: - case VALUE_TYPE.byteSecond: - chartInstanceRef.current.axis('value', { - label: { - formatter: bytes => { - const { value, unit } = getProperByteDesc(Number(bytes)); - let _unit = unit; - if (options.valueType === VALUE_TYPE.byteSecond) { - _unit = `${unit}/s`; - } - - return `${value} ${_unit}`; - }, - }, - }); - chartInstanceRef.current.tooltip({ - customItems: items => - items.map(item => { - const { value, unit } = getProperByteDesc(Number(item.value)); - let _unit = unit; - if (options.valueType === VALUE_TYPE.byteSecond) { - _unit = `${unit}/s`; - } - return { - ...item, - value: `${value} ${_unit}`, - }; - }), - showCrosshairs: true, - shared: true, - title: tooltipTitle, - }); - break; - case VALUE_TYPE.byteSecondNet: - chartInstanceRef.current.axis('value', { - label: { - formatter: bytes => { - const { value, unit } = getProperByteDesc(Number(bytes)); - const _unit = `${unit}/s`; - return `${value} ${_unit}`; - }, - }, - }); - chartInstanceRef.current.tooltip({ - customItems: items => - items.map(item => { - const { value, unit } = getProperByteDesc(Number(item.value)); - const _unit = `${unit}/s`; - return { - ...item, - value: `${value} ${_unit}`, - }; - }), - showCrosshairs: true, - shared: true, - title: tooltipTitle, - }); - break; - case VALUE_TYPE.number: - case VALUE_TYPE.numberSecond: - chartInstanceRef.current.axis('value', { - label: { - formatter: processNum => { - if (options.valueType === VALUE_TYPE.numberSecond) { - return `${processNum}/s`; - } - return processNum; - }, - }, - }); - chartInstanceRef.current.tooltip({ - customItems: items => - items.map(item => { - let value = item.value; - if (options.valueType === VALUE_TYPE.numberSecond) { - value = `${Math.round(+value * 100) / 100}/s`; - } - return { - ...item, - value, - }; - }), - showCrosshairs: true, - shared: true, - title: tooltipTitle, - }); - break; - default: - } + updateChartByValueType(options, chartInstanceRef.current) // autoAdjustPadding(options.valueType!); return chartInstanceRef.current; }; diff --git a/src/components/DashboardCard/LineCard.tsx b/src/components/DashboardCard/LineCard.tsx index 5004bf01..9a24c067 100644 --- a/src/components/DashboardCard/LineCard.tsx +++ b/src/components/DashboardCard/LineCard.tsx @@ -9,15 +9,14 @@ import { getMaxNum, getMaxNumAndLength, getMinNum, getProperStep, getTickInterva interface IProps { data: ILineChartMetric[]; valueType: VALUE_TYPE; - sizes?: IStatSingleItem[]; - loading: boolean; + loading?: boolean; baseLine?: number; } function LineCard(props: IProps) { const chartRef = useRef(); - const { loading, data = [], valueType, sizes, baseLine } = props; + const { loading, data = [], valueType, baseLine } = props; useEffect(() => { if (!loading && chartRef.current) { updateChart(); @@ -33,7 +32,6 @@ function LineCard(props: IProps) { const renderLineChart = () => { chartRef.current.configDetailChart({ valueType, - sizes, isCard: true, }); updateChart(); diff --git a/src/utils/metric.ts b/src/utils/metric.ts index 55fc0831..07b6caef 100644 --- a/src/utils/metric.ts +++ b/src/utils/metric.ts @@ -2,8 +2,9 @@ import _ from 'loadsh'; import { VALUE_TYPE } from '@/utils/promQL'; import { INTERVAL_FREQUENCY_LIST, SERVICE_QUERY_PERIOD } from './service'; -import { AggregationType, AGGREGATION_OPTIONS, TIME_OPTION_TYPE } from './dashboard'; +import { AggregationType, AGGREGATION_OPTIONS, getProperByteDesc, TIME_OPTION_TYPE } from './dashboard'; import { IServiceMetricItem, ServiceName } from './interface'; +import dayjs from 'dayjs'; export const METRICS_DESCRIPTION: any = { num_queries: 'num_queries description', @@ -112,7 +113,7 @@ export const calcMetricInfo = (rawMetric: string) => { const calcServiceMetricValueType = (metricName: string): VALUE_TYPE => { let valueType = VALUE_TYPE.number; const valueTypes = Object.keys(ServiceMetricValueTypeMap) as VALUE_TYPE[]; - for(let i = 0; i < valueTypes.length; i++) { + for (let i = 0; i < valueTypes.length; i++) { const curValueType = valueTypes[i]; if (ServiceMetricValueTypeMap[curValueType].includes(metricName)) { valueType = curValueType as VALUE_TYPE; @@ -198,7 +199,7 @@ export const getRawQueryByAggregation = (aggregation: AggregationType, metric: s case AggregationType.P99: return `quantile(0.99, sum(rate(${metric}[1m])) by (instance))` case AggregationType.P999: - return`quantile(0.999, sum(rate(${metric}[1m])) by (instance))` + return `quantile(0.999, sum(rate(${metric}[1m])) by (instance))` } } @@ -248,4 +249,127 @@ export const getQueryByMetricType = (metricItem: IServiceMetricItem, metricType: return `${metricItem.prefixMetric}_${metricItem.metric}_${metricType}_${period}` } } +} + +export const tooltipTitle = time => + dayjs(Number(time) * 1000).format('YYYY-MM-DD HH:mm:ss'); + +export const updateChartByValueType = (options, chartInstance) => { + switch (options.valueType) { + case VALUE_TYPE.percentage: + chartInstance.axis('value', { + label: { + formatter: percent => `${percent}%`, + }, + }); + chartInstance.tooltip({ + customItems: items => + items.map(item => { + const value = `${Number(item.value).toFixed(2)}%`; + return { + ...item, + value, + }; + }), + showCrosshairs: true, + shared: true, + title: tooltipTitle, + }); + chartInstance.scale({ + value: { + min: 0, + max: options.maxNum || 100, + tickInterval: options.maxNum ? (options.maxNum % 10 + 10) / 5 : 25, + }, + }); + break; + case VALUE_TYPE.byte: + case VALUE_TYPE.byteSecond: + chartInstance.axis('value', { + label: { + formatter: bytes => { + const { value, unit } = getProperByteDesc(Number(bytes)); + let _unit = unit; + if (options.valueType === VALUE_TYPE.byteSecond) { + _unit = `${unit}/s`; + } + + return `${value} ${_unit}`; + }, + }, + }); + chartInstance.tooltip({ + customItems: items => + items.map(item => { + const { value, unit } = getProperByteDesc(Number(item.value)); + let _unit = unit; + if (options.valueType === VALUE_TYPE.byteSecond) { + _unit = `${unit}/s`; + } + return { + ...item, + value: `${value} ${_unit}`, + }; + }), + showCrosshairs: true, + shared: true, + title: tooltipTitle, + }); + break; + case VALUE_TYPE.byteSecondNet: + chartInstance.axis('value', { + label: { + formatter: bytes => { + const { value, unit } = getProperByteDesc(Number(bytes)); + const _unit = `${unit}/s`; + return `${value} ${_unit}`; + }, + }, + }); + chartInstance.tooltip({ + customItems: items => + items.map(item => { + const { value, unit } = getProperByteDesc(Number(item.value)); + const _unit = `${unit}/s`; + return { + ...item, + value: `${value} ${_unit}`, + }; + }), + showCrosshairs: true, + shared: true, + title: tooltipTitle, + }); + break; + case VALUE_TYPE.number: + case VALUE_TYPE.numberSecond: + chartInstance.axis('value', { + label: { + formatter: processNum => { + if (options.valueType === VALUE_TYPE.numberSecond) { + return `${processNum}/s`; + } + return processNum; + }, + }, + }); + chartInstance.tooltip({ + customItems: items => + items.map(item => { + let value = item.value; + if (options.valueType === VALUE_TYPE.numberSecond) { + value = `${Math.round(+value * 100) / 100}/s`; + } + return { + ...item, + value, + }; + }), + showCrosshairs: true, + shared: true, + title: tooltipTitle, + }); + break; + default: + } } \ No newline at end of file