Skip to content

Commit

Permalink
feat: allow to select only color metric in TopN
Browse files Browse the repository at this point in the history
  • Loading branch information
yaojiping committed Jan 11, 2025
1 parent 0077f72 commit b264ab9
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 171 deletions.
10 changes: 7 additions & 3 deletions web/src/pages/Platform/Overview/components/MetricChart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,10 @@ export default (props) => {
firstFetchRef.current = false
}
}

const fixFormat = (formatType, format) => {
return formatType === 'num' && format ? `${format}a` : format
}

useEffect(() => {
observerRef.current.deps = cloneDeep([queryParams, fetchUrl, metricKey, timeInterval, refresh])
Expand Down Expand Up @@ -235,11 +239,11 @@ export default (props) => {
ticks={item.ticks}
labelFormat={getFormatter(
item.formatType,
item.labelFormat
fixFormat(item.formatType, item.labelFormat)
)}
tickFormat={getFormatter(
item.formatType,
item.tickFormat
fixFormat(item.formatType, item.tickFormat)
)}
/>
);
Expand Down Expand Up @@ -291,7 +295,7 @@ export default (props) => {
xAccessor={0}
tickFormat={getFormatter(
item.metric.formatType,
item.metric.tickFormat,
fixFormat(item.metric.formatType, item.metric.formatType),
item.metric.units
)}
yAccessors={[1]}
Expand Down
5 changes: 3 additions & 2 deletions web/src/pages/Platform/Overview/components/TopN/Table.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Treemap } from "@ant-design/charts";
import { Table } from "antd";
import { useMemo } from "react";
import { formatMessage } from "umi/locale";
import { fixFormatter } from "./Treemap";

export default (props) => {

Expand All @@ -23,7 +24,7 @@ export default (props) => {
}];
if (sourceArea) {
const { format: formatArea, unit: unitArea } = sourceArea || {}
const formatterArea = getFormatter(formatArea)
const formatterArea = fixFormatter(formatArea)
newColumns.push({
title: unitArea ? `${sourceArea.name}(${unitArea})` : sourceArea.name,
dataIndex: 'value',
Expand All @@ -35,7 +36,7 @@ export default (props) => {
}
if (sourceColor) {
const { format: formatColor, unit: unitColor } = sourceColor
const formatterColor = getFormatter(formatColor)
const formatterColor = fixFormatter(formatColor)
newColumns.push({
title: unitColor ? `${sourceColor.name}(${unitColor})` : sourceColor.name,
dataIndex: 'valueColor',
Expand Down
22 changes: 14 additions & 8 deletions web/src/pages/Platform/Overview/components/TopN/Treemap.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,10 @@ const generateColors = (colors, data) => {
return newColors
}

export const fixFormatter = (formatType) => {
return getFormatter(formatType === 'number' ? 'num' : formatType, formatType === 'number' ? '0,0.[00]a' : '')
}

export default (props) => {

const { config = {}, data = [] } = props
Expand Down Expand Up @@ -108,22 +112,24 @@ export default (props) => {
customContent: (title, items) => {
if (!items[0]) return;
const { color, data } = items[0];
const { displayName, value, metricArea, nameArea, metricColor, nameColor, valueColor } = data;
const { format: formatArea, unit: unitArea } = sourceArea || {}
const formatterArea = getFormatter(formatArea)
const { displayName, value, metricArea, nameArea, tooltipArea, metricColor, nameColor, valueColor } = data;

const markers = []

const markers = [
{
if (metricArea && tooltipArea !== false) {
const { format: formatArea, unit: unitArea } = sourceArea || {}
const formatterArea = fixFormatter(formatArea)
markers.push({
name: nameArea,
value: formatterArea ? formatterArea(value) : value,
unit: unitArea,
marker: <span style={{ position: 'absolute', left: 0, top: 0, fontSize: 12 }}><svg t="1735902367048" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15719" width="1em" height="1em"><path d="M525.649872 2.562499l-4.199999-2.499999c8.862498 12.062497 8.862498 6.424998 4.199999 2.562499z m467.062386 236.662443A31.862492 31.862492 0 0 0 1024.73725 207.499949V39.53749a31.862492 31.862492 0 0 0-31.962492-31.687492H823.462299a31.862492 31.862492 0 0 0-31.962492 31.687492v52.162488h-103.937475a31.349992 31.349992 0 0 0-9.787497 0H233.237443V39.53749A31.849992 31.849992 0 0 0 201.249951 7.849998H31.974992A31.862492 31.862492 0 0 0 0 39.53749v167.824959a31.849992 31.849992 0 0 0 31.974992 31.687493h52.624987v553.749864h-52.624987A31.862492 31.862492 0 0 0 0 824.487299v167.824959a31.849992 31.849992 0 0 0 31.974992 31.687492H201.249951a31.837492 31.837492 0 0 0 31.962492-31.737492v-52.174988H791.374807v52.174988a31.862492 31.862492 0 0 0 31.974992 31.737492h169.299959a31.862492 31.862492 0 0 0 31.974992-31.737492V824.599799a31.862492 31.862492 0 0 0-31.974992-31.737493H939.999771V347.299915a15.574996 15.574996 0 0 0 0-3.237499v-104.899974h52.749987zM148.749964 462.499887a34.024992 34.024992 0 0 0 5.412498-4.312499l305.212426-302.874926H604.999852L148.749964 607.912352z m52.624987-223.337445A31.849992 31.849992 0 0 0 233.299943 207.499949v-52.249987h135.512467L148.649964 373.749909V239.162442zM148.749964 697.68733L695.46233 155.249962h95.974977v38.974991L187.787454 792.862306h-39.24999v-95.174976zM876.087286 564.999862L569.399861 869.149788a32.349992 32.349992 0 0 0-5.687499 7.624998H418.012398l458.074888-454.374889z m-52.624987 227.899944a31.862492 31.862492 0 0 0-31.962492 31.737493v52.174987H652.399841l223.749945-221.987446v138.037466z m52.624987-460.287387L327.39992 876.774786h-94.162477v-39.137491l603.362353-598.474853h39.48749z" p-id="15720" fill="#666"></path></svg></span>
}
]
})
}

if (metricColor) {
const { format: formatColor, unit: unitColor } = sourceColor || {}
const formatterColor = getFormatter(formatColor)
const formatterColor = fixFormatter(formatColor)
markers.push({
name: nameColor,
value: formatterColor ? formatterColor(valueColor) : valueColor,
Expand Down
200 changes: 42 additions & 158 deletions web/src/pages/Platform/Overview/components/TopN/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { cloneDeep } from "lodash";
import request from "@/utils/request";
import { formatTimeRange } from "@/lib/elasticsearch/util";
import { CopyToClipboard } from "react-copy-to-clipboard";
import * as uuid from 'uuid';

export default (props) => {

Expand Down Expand Up @@ -56,13 +57,14 @@ export default (props) => {
}

const fetchData = async (type, clusterID, timeRange, formData, shouldLoading = true) => {
if (!clusterID || !timeRange || !formData.sourceArea) return;
if (!clusterID || !timeRange || (!formData.sourceArea && !formData.sourceColor)) return;
if (shouldLoading) {
setLoading(true)
}
const { top, sourceArea = {}, statisticArea, statisticColor, sourceColor = {} } = formData
const newTimeRange = formatTimeRange(timeRange);
searchParamsRef.current = { type, clusterID, formData }
const sortKey = sourceArea?.items?.[0]?.name || sourceColor?.items?.[0]?.name
const body = {
"index_pattern": ".infini_metrics*",
"time_field": "timestamp",
Expand Down Expand Up @@ -121,10 +123,10 @@ export default (props) => {
"field": type === 'shard' ? `metadata.labels.shard_id` : `metadata.labels.${type}_name`,
"limit": top
}],
"sort": [{
"sort": sortKey ? [{
"direction": "desc",
"key": sourceArea?.items[0].name
}]
"key": sortKey
}] : undefined
}
if (statisticArea !== 'rate' && statisticColor !== 'rate') {
delete body['time_field']
Expand Down Expand Up @@ -178,8 +180,9 @@ export default (props) => {
const formatData = useMemo(() => {

const { data = [] } = result || {};
if (!data || data.length === 0 || !sourceArea) return []
return data.filter((item) => !!(item.groups && item.groups[0])).map((item) => {
if (!data || data.length === 0) return []
let sortKey;
const newData = data.filter((item) => !!(item.groups && item.groups[0])).map((item) => {
const { groups = [], value } = item;
let name = groups[0];
if (type === 'shard') {
Expand All @@ -191,17 +194,32 @@ export default (props) => {
const object = {
name: name,
displayName: name,
value: value?.[sourceArea.formula] || 0,
metricArea: sourceArea.key,
nameArea: sourceArea.name,
}
if (sourceColor?.formula) {

if (sourceArea) {
object['metricArea'] = sourceArea.key
object['value'] = value?.[sourceArea?.formula] || 0
object['nameArea'] = sourceArea.name
sortKey = 'value'
} else {
if (sourceColor) {
const key = uuid.v4();
object['metricArea'] = `metric_${key}`
object['value'] = 1
object['nameArea'] = `name_${key}`
object['tooltipArea'] = false
}
}

if (sourceColor) {
object['metricColor'] = sourceColor.key
object['valueColor'] = value?.[sourceColor.formula] || 0
object['nameColor'] = sourceColor.name
sortKey = 'valueColor'
}
return object
})
return sortKey ? newData.sort((a, b) => b[sortKey] - a[sortKey]) : newData
}, [result, sourceArea, sourceColor, type])

useEffect(() => {
Expand Down Expand Up @@ -266,12 +284,21 @@ export default (props) => {
style={{ width: "150px", marginBottom: 12 }}
value={formData.sourceArea?.key}
onChange={(value, option) => {
const { items = [] } = option?.props?.metric || {}
onFormDataChange({
statisticArea: items[0]?.statistic === 'derivative' ? 'rate' : items[0]?.statistic,
sourceArea: option?.props?.metric
})

if (value) {
const { items = [] } = option?.props?.metric || {}
onFormDataChange({
statisticArea: items[0]?.statistic === 'derivative' ? 'rate' : items[0]?.statistic,
sourceArea: option?.props?.metric
})
} else {
onFormDataChange({
statisticArea: undefined,
sourceArea: undefined
})
}
}}
allowClear
>
{
metrics.map((item) => (
Expand Down Expand Up @@ -358,149 +385,6 @@ export default (props) => {
}}/>
<Button style={{ marginBottom: 12 }} className={styles.borderRadiusLeft} type="primary" onClick={() => fetchData(type, clusterID, timeRange, formData)}>{formatMessage({ id: "form.button.search" })}</Button>
</Input.Group>
{/* <Radio.Group
value={currentMode}
onChange={(e) => setCurrentMode(e.target.value)}
className={styles.mode}
>
<Radio.Button value="treemap">
<Icon
component={TreemapSvg}
style={{
fontSize: 16,
color: isTreemap ? "#1890ff" : "",
verticalAlign: '-3px'
}}
/>
</Radio.Button>
<Radio.Button value="table">
<Icon
type="table"
style={{
color: !isTreemap ? "#1890ff" : "",
}}
/>
</Radio.Button>
</Radio.Group>
<Input.Group compact style={{ width: 'auto '}}>
<Input
style={{ width: "60px" }}
disabled
defaultValue={"Top"}
/>
<InputNumber
style={{ width: "80px" }}
value={formData.top}
min={1}
step={1}
precision={0}
onChange={(value) => onFormDataChange({ top: value })}
/>
</Input.Group>
<Input.Group compact style={{ width: 'auto '}}>
<Input
style={{ width: "80px" }}
disabled
defaultValue={"面积指标"}
/>
<Select
style={{ width: "150px" }}
value={formData.sourceArea?.key}
onChange={(value, option) => {
const { items = [] } = option?.props?.metric || {}
onFormDataChange({
statisticArea: items[0]?.statistic === 'derivative' ? 'rate' : items[0]?.statistic,
sourceArea: option?.props?.metric
})
}}
>
{
metrics.map((item) => (
<Select.Option key={item.key} metric={item}>
{item.name}
</Select.Option>
))
}
</Select>
<Select
style={{ width: "88px" }}
value={formData.statisticArea}
onChange={(value) => onFormDataChange({ statisticArea: value })}
>
{
formData.sourceArea?.statistics?.filter((item) => !!item).map((item) => (
<Select.Option key={item}>
{item.toUpperCase()}
</Select.Option>
))
}
</Select>
</Input.Group>
<Button style={{ width: 32, padding: 0 }} onClick={() => onMetricExchange()}><Icon style={{ fontSize: 16 }} component={ConvertSvg}/></Button>
<Input.Group compact style={{ width: 'auto'}}>
<Input
style={{ width: "80px" }}
disabled
defaultValue={"颜色指标"}
/>
<Select
style={{ width: "150px" }}
value={formData.sourceColor?.key}
onChange={(value, option) => {
if (value) {
const { items = [] } = option?.props?.metric || {}
onFormDataChange({
statisticColor: items[0]?.statistic === 'derivative' ? 'rate' : items[0]?.statistic,
sourceColor: option?.props?.metric
})
} else {
onFormDataChange({
statisticColor: undefined,
sourceColor: undefined
})
}
}}
allowClear
>
{
metrics.map((item) => (
<Select.Option key={item.key} metric={item}>
{item.name}
</Select.Option>
))
}
</Select>
<Select
style={{ width: "88px" }}
value={formData.statisticColor}
onChange={(value) => onFormDataChange({ statisticColor: value })}
>
{
formData.sourceColor?.statistics?.filter((item) => !!item).map((item) => (
<Select.Option key={item}>
{item.toUpperCase()}
</Select.Option>
))
}
</Select>
<Input.Group compact style={{ width: 'auto '}}>
<Input
style={{ width: "60px" }}
disabled
defaultValue={"主题"}
/>
<GradientColorPicker value={formData.colors || []} onChange={(value) => {
onFormDataChange({ colors: value })
setConfig({
...cloneDeep(config),
colors: value
})
}}/>
</Input.Group>
</Input.Group>
<Button type="primary" onClick={() => fetchData(type, clusterID, timeRange, formData)}>{formatMessage({ id: "form.button.search" })}</Button> */}
</div>

<div className={styles.content}>
Expand Down

0 comments on commit b264ab9

Please sign in to comment.