From 9c8a96bb7c2b0cb5591695cdf2d8bc9730d62e41 Mon Sep 17 00:00:00 2001 From: jsers Date: Wed, 10 Dec 2025 20:51:22 +0800 Subject: [PATCH] feat: add HoneycombChart --- package-lock.json | 96 ++ package.json | 1 + src/components/HoneycombChart/index.tsx | 175 +++ .../utils/calculateHexCoordinates.ts | 130 ++ .../utils/getRoundedHexagonPath.ts | 61 + src/pages/demo/data.js | 1374 ----------------- src/pages/demo/index.tsx | 76 +- 7 files changed, 512 insertions(+), 1401 deletions(-) create mode 100644 src/components/HoneycombChart/index.tsx create mode 100644 src/components/HoneycombChart/utils/calculateHexCoordinates.ts create mode 100644 src/components/HoneycombChart/utils/getRoundedHexagonPath.ts delete mode 100644 src/pages/demo/data.js diff --git a/package-lock.json b/package-lock.json index 8969d848a..55a820308 100644 --- a/package-lock.json +++ b/package-lock.json @@ -84,6 +84,7 @@ "react-draggable": "^4.4.5", "react-fast-compare": "^3.2.0", "react-grid-layout": "^1.2.5", + "react-hexgrid": "^2.0.1", "react-highlight-words": "^0.17.0", "react-hooks-global-state": "^2.0.0", "react-i18next": "^14.0.0", @@ -8137,6 +8138,15 @@ "node": ">=8" } }, + "node_modules/bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "optional": true, + "dependencies": { + "file-uri-to-path": "1.0.0" + } + }, "node_modules/bl": { "version": "4.1.0", "resolved": "https://registry.npmmirror.com/bl/-/bl-4.1.0.tgz", @@ -10851,6 +10861,12 @@ "resolved": "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz", "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==" }, + "node_modules/file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "optional": true + }, "node_modules/fill-range": { "version": "4.0.0", "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-4.0.0.tgz", @@ -16072,6 +16088,12 @@ "thenify-all": "^1.0.0" } }, + "node_modules/nan": { + "version": "2.24.0", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.24.0.tgz", + "integrity": "sha512-Vpf9qnVW1RaDkoNKFUvfxqAbtI8ncb8OJlqZ9wwpXzWPEsvsB1nvdUi6oYrHIkQ1Y/tMDnr1h4nczS0VB9Xykg==", + "optional": true + }, "node_modules/nano-css": { "version": "5.6.1", "resolved": "https://registry.npmmirror.com/nano-css/-/nano-css-5.6.1.tgz", @@ -17835,6 +17857,38 @@ "react-dom": ">= 16.3.0" } }, + "node_modules/react-hexgrid": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/react-hexgrid/-/react-hexgrid-2.0.1.tgz", + "integrity": "sha512-5yBYUAhagw3SNeqgyzcRblxtQQHZFabCaNHufX1q6eXwaGHQx2wEaX+gNgBjB4RpC6VIMOBCjGE7AUK43k2rkg==", + "dependencies": { + "classnames": "^2.3.1" + }, + "optionalDependencies": { + "fsevents": "^1.2.13" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/react-hexgrid/node_modules/fsevents": { + "version": "1.2.13", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", + "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", + "deprecated": "Upgrade to fsevents v2 to mitigate potential security issues", + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "dependencies": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + }, + "engines": { + "node": ">= 4.0" + } + }, "node_modules/react-highlight-words": { "version": "0.17.0", "resolved": "https://registry.npmmirror.com/react-highlight-words/-/react-highlight-words-0.17.0.tgz", @@ -29198,6 +29252,15 @@ "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", "dev": true }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "bl": { "version": "4.1.0", "resolved": "https://registry.npmmirror.com/bl/-/bl-4.1.0.tgz", @@ -31405,6 +31468,12 @@ "resolved": "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz", "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==" }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "optional": true + }, "fill-range": { "version": "4.0.0", "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-4.0.0.tgz", @@ -35985,6 +36054,12 @@ "thenify-all": "^1.0.0" } }, + "nan": { + "version": "2.24.0", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.24.0.tgz", + "integrity": "sha512-Vpf9qnVW1RaDkoNKFUvfxqAbtI8ncb8OJlqZ9wwpXzWPEsvsB1nvdUi6oYrHIkQ1Y/tMDnr1h4nczS0VB9Xykg==", + "optional": true + }, "nano-css": { "version": "5.6.1", "resolved": "https://registry.npmmirror.com/nano-css/-/nano-css-5.6.1.tgz", @@ -37287,6 +37362,27 @@ "resize-observer-polyfill": "^1.5.1" } }, + "react-hexgrid": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/react-hexgrid/-/react-hexgrid-2.0.1.tgz", + "integrity": "sha512-5yBYUAhagw3SNeqgyzcRblxtQQHZFabCaNHufX1q6eXwaGHQx2wEaX+gNgBjB4RpC6VIMOBCjGE7AUK43k2rkg==", + "requires": { + "classnames": "^2.3.1", + "fsevents": "^1.2.13" + }, + "dependencies": { + "fsevents": { + "version": "1.2.13", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", + "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } + } + } + }, "react-highlight-words": { "version": "0.17.0", "resolved": "https://registry.npmmirror.com/react-highlight-words/-/react-highlight-words-0.17.0.tgz", diff --git a/package.json b/package.json index da59fbd4f..d049f2e7a 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,7 @@ "react-draggable": "^4.4.5", "react-fast-compare": "^3.2.0", "react-grid-layout": "^1.2.5", + "react-hexgrid": "^2.0.1", "react-highlight-words": "^0.17.0", "react-hooks-global-state": "^2.0.0", "react-i18next": "^14.0.0", diff --git a/src/components/HoneycombChart/index.tsx b/src/components/HoneycombChart/index.tsx new file mode 100644 index 000000000..87872168c --- /dev/null +++ b/src/components/HoneycombChart/index.tsx @@ -0,0 +1,175 @@ +import React, { useState, useCallback } from 'react'; +import _ from 'lodash'; +import { HexGrid, Layout, Hexagon } from 'react-hexgrid'; + +import getRoundedHexagonPath from './utils/getRoundedHexagonPath'; + +interface Props { + data: Array<{ + q: number; + r: number; + s: number; + color: string; + title: string; + subtitle: string; + tooltip?: string; + }>; + hexSize: number; + viewBoxWidth: number; + viewBoxHeight: number; + minX: number; + minY: number; + options: { + width: number; + height: number; + spacing?: number; + enableRounded?: boolean; + }; +} + +export default function HoneycombChart(props: Props) { + const { data, hexSize, viewBoxWidth, viewBoxHeight, minX, minY, options } = props; + const { width, height, spacing = 1.02, enableRounded = true } = options; + const roundedPath = getRoundedHexagonPath(hexSize, enableRounded); + const padding = 2; + const viewBox = `${minX - padding} ${minY - padding} ${viewBoxWidth + padding * 2} ${viewBoxHeight + padding * 2}`; + + // 基于六边形尺寸计算文字容器区域（居中且不触碰边缘） + const hexWidth = Math.sqrt(3) * hexSize; + const hexHeight = 2 * hexSize; + const textBoxWidth = hexWidth * 0.84; + const textBoxHeight = hexHeight * 0.48; + + const [tooltipInfo, setTooltipInfo] = useState<{ visible: boolean; x: number; y: number; content: string }>({ + visible: false, + x: 0, + y: 0, + content: '', + }); + const [hoveredIndex, setHoveredIndex] = useState(null); + + const handleHexMouseEnter = useCallback((e: React.MouseEvent, hex: any, index: number) => { + setHoveredIndex(index); + setTooltipInfo({ + visible: true, + x: e.clientX, + y: e.clientY, + content: hex.tooltip || `${hex.title} - ${hex.subtitle}`, + }); + }, []); + + const handleHexMouseMove = useCallback((e: React.MouseEvent) => { + setTooltipInfo((prev) => ({ + ...prev, + x: e.clientX, + y: e.clientY, + })); + }, []); + + const handleHexMouseLeave = useCallback(() => { + setHoveredIndex(null); + setTooltipInfo((prev) => ({ ...prev, visible: false })); + }, []); + + return ( + <> +
+ + + {data.map((hex, i) => ( + + {(() => { + const isActive = hoveredIndex === i; + return ( + <> + handleHexMouseEnter(e, hex, i)} + onMouseMove={handleHexMouseMove} + onMouseLeave={handleHexMouseLeave} + /> + +
+
+ {hex.title} +
+
+ {hex.subtitle} +
+
+ + + ); + })()} + + ))} + + +
+ + {/* 自定义提示框 */} + {tooltipInfo.visible && ( +
+ {tooltipInfo.content} +
+ )} + + ); +} diff --git a/src/components/HoneycombChart/utils/calculateHexCoordinates.ts b/src/components/HoneycombChart/utils/calculateHexCoordinates.ts new file mode 100644 index 000000000..bce476433 --- /dev/null +++ b/src/components/HoneycombChart/utils/calculateHexCoordinates.ts @@ -0,0 +1,130 @@ +/** + * 计算蜂窝图中每个六边形的立方体坐标和合适的尺寸 + * @param {number} count - 输入数据集数量 + * @param {number} spacing - 六边形之间的间距 + * @param {number} containerWidth - 容器宽度 + * @param {number} containerHeight - 容器高度 + * @returns {{ + * coordinates: Array<{q: number, r: number, s: number}>, + * hexSize: number, + * rows: number, + * cols: number, + * viewBoxWidth: number, + * viewBoxHeight: number, + * minX: number, + * minY: number + * }} 立方体坐标数组和六边形尺寸 + */ + +export default function calculateHexCoordinates( + count: number, + spacing = 1, + containerWidth: number, + containerHeight: number, +): { + coordinates: { q: number; r: number; s: number }[]; + hexSize: number; + rows: number; + cols: number; + viewBoxWidth: number; + viewBoxHeight: number; + minX: number; + minY: number; +} { + const n = count; + if (n === 0) + return { + coordinates: [], + hexSize: 10, + rows: 0, + cols: 0, + viewBoxWidth: 0, + viewBoxHeight: 0, + minX: 0, + minY: 0, + }; + + // 容器宽高比 + const aspectRatio = containerWidth / containerHeight; + + // 1. 初始化最佳布局参数 + let bestRows = 0; + let bestCols = 0; + let bestSize = 0; + let bestScore = -Infinity; + + // 2. 遍历所有可能的行数布局,找到最优布局 + for (let rows = 1; rows <= n; rows++) { + const cols = Math.ceil(n / rows); + + // 3. 根据行列数计算合适的六边形尺寸（pointy 方向） + // pointy 方向：宽度 = cols * sqrt(3) * hexSize，高度 = rows * 1.5 * hexSize + const widthPerHex = containerWidth / (cols * Math.sqrt(3) * spacing); + const heightPerHex = containerHeight / (rows * 1.5 * spacing); + const hexSize = Math.min(widthPerHex, heightPerHex); + + // 4. 计算布局的宽高比与容器宽高比的匹配度 + const layoutAspectRatio = (cols * Math.sqrt(3)) / (rows * 1.5); + const aspectRatioDiff = Math.abs(layoutAspectRatio - aspectRatio) / aspectRatio; + + // 优先选择宽高比匹配的布局，然后再选尺寸大的 + // 权重：宽高比匹配度权重大，尺寸权重小 + const score = -aspectRatioDiff + hexSize * 0.01; + + if (score > bestScore) { + bestScore = score; + bestSize = hexSize; + bestRows = rows; + bestCols = cols; + } + } + + // 5. 生成立方体坐标系 + const coordinates: { q: number; r: number; s: number }[] = []; + for (let i = 0; i < bestRows; i++) { + for (let j = 0; j < bestCols; j++) { + const index = i * bestCols + j; + if (index >= n) break; + + const q = j - Math.floor(i / 2); + const r = i; + const s = -q - r; + coordinates.push({ q, r, s }); + } + } + + // 6. 计算实际的六边形范围，用于正确显示 + // 根据 react-hexgrid 的布局，六边形的实际坐标会受到 spacing 的影响 + let minX = Infinity, + maxX = -Infinity; + let minY = Infinity, + maxY = -Infinity; + + coordinates.forEach(({ q, r }) => { + // react-hexgrid 在计算位置时会应用 spacing + const x = bestSize * Math.sqrt(3) * (q + r / 2) * spacing; + const y = bestSize * 1.5 * r * spacing; + const hw = (bestSize * Math.sqrt(3)) / 2; + const hh = bestSize; + + minX = Math.min(minX, x - hw); + maxX = Math.max(maxX, x + hw); + minY = Math.min(minY, y - hh); + maxY = Math.max(maxY, y + hh); + }); + + // 计算实际的宽高 + const actualWidth = maxX - minX; + const actualHeight = maxY - minY; + + return { + coordinates, + hexSize: bestSize, + rows: bestRows, + cols: bestCols, + viewBoxWidth: actualWidth, + viewBoxHeight: actualHeight, + minX, + minY, + }; +} diff --git a/src/components/HoneycombChart/utils/getRoundedHexagonPath.ts b/src/components/HoneycombChart/utils/getRoundedHexagonPath.ts new file mode 100644 index 000000000..d572cec9d --- /dev/null +++ b/src/components/HoneycombChart/utils/getRoundedHexagonPath.ts @@ -0,0 +1,61 @@ +/** + * 生成圆角六边形的 SVG 路径 + * @param {number} size - 六边形大小 + * @param {boolean} enableRounded - 是否启用圆角 + * @returns {string} SVG 路径字符串 + */ + +export default function getRoundedHexagonPath(size: number, enableRounded: boolean): string { + // pointy 方向六边形的6个顶点坐标 + const points = [ + { x: 0, y: -size }, // 顶部 + { x: (size * Math.sqrt(3)) / 2, y: -size / 2 }, // 右上 + { x: (size * Math.sqrt(3)) / 2, y: size / 2 }, // 右下 + { x: 0, y: size }, // 底部 + { x: (-size * Math.sqrt(3)) / 2, y: size / 2 }, // 左下 + { x: (-size * Math.sqrt(3)) / 2, y: -size / 2 }, // 左上 + ]; + + let path = ''; + + // 如果启用圆角，计算合适的圆角半径（边长的 1/10） + const r = enableRounded ? (Math.sqrt(3) * size) / 2 / 10 : 0; + + for (let i = 0; i < points.length; i++) { + const current = points[i]; + const next = points[(i + 1) % points.length]; + const prev = points[(i - 1 + points.length) % points.length]; + + // 计算从前一个点到当前点的向量 + const dx1 = current.x - prev.x; + const dy1 = current.y - prev.y; + const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1); + + // 计算从当前点到下一个点的向量 + const dx2 = next.x - current.x; + const dy2 = next.y - current.y; + const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2); + + // 计算圆角的起点和终点 + const startX = current.x - (dx1 / len1) * r; + const startY = current.y - (dy1 / len1) * r; + const endX = current.x + (dx2 / len2) * r; + const endY = current.y + (dy2 / len2) * r; + + if (i === 0) { + path += `M ${startX} ${startY}`; + } else { + path += ` L ${startX} ${startY}`; + } + + // 使用二次贝塞尔曲线绘制圆角 + if (enableRounded) { + path += ` Q ${current.x} ${current.y} ${endX} ${endY}`; + } else { + path += ` L ${endX} ${endY}`; + } + } + + path += ' Z'; + return path; +} diff --git a/src/pages/demo/data.js b/src/pages/demo/data.js deleted file mode 100644 index 23eae8591..000000000 --- a/src/pages/demo/data.js +++ /dev/null @@ -1,1374 +0,0 @@ -export const data01 = { - dat: [ - { - ref: 'A', - data: [ - { - ref: 'A', - metric: { - ident: 'dev-backup-01', - service: 'mon', - }, - values: [ - [1733817600, 16260.166214834895], - [1733817615, 16173.221348264675], - [1733817630, 17040.482591596865], - [1733817645, 17277.64569955785], - [1733817660, 16967.15774503922], - [1733817675, 16160.255982934472], - [1733817690, 16610.11488123014], - [1733817705, 16733.001510976806], - [1733817720, 16473.168455436306], - [1733817735, 15808.141860361762], - [1733817750, 16474.567231839294], - [1733817765, 16558.975156659704], - [1733817780, 16603.262077241012], - [1733817795, 15903.293186969468], - [1733817810, 16581.120419546234], - [1733817825, 16880.78042710162], - [1733817840, 16868.894715790408], - [1733817855, 16296.542375894403], - [1733817870, 16615.47007977246], - [1733817885, 17107.24206128753], - [1733817900, 17029.243144749125], - [1733817915, 16617.3725612195], - [1733817930, 16664.79267588107], - [1733817945, 17353.91760366206], - [1733817960, 17207.67965868184], - [1733817975, 16866.872583440738], - [1733817990, 16606.586520299552], - [1733818005, 16938.46803404369], - [1733818020, 16637.630274882784], - [1733818035, 16255.660985311439], - [1733818050, 15973.977777777776], - [1733818065, 16574.431679296016], - [1733818080, 16406.524299460012], - [1733818095, 16377.90271327304], - [1733818110, 16299.682229283795], - [1733818125, 16795.42676829404], - [1733818140, 16573.17452557664], - [1733818155, 16300.037776938292], - [1733818170, 16245.744633571841], - [1733818185, 16811.359747561168], - [1733818200, 16442.5358872939], - [1733818215, 16057.997422336784], - [1733818230, 15910.539297380175], - [1733818245, 16534.865117105906], - [1733818260, 16905.6041953691], - [1733818275, 16705.050998866693], - [1733818290, 16579.96488966912], - [1733818305, 16529.74378347148], - [1733818320, 16280.631971912358], - [1733818335, 15931.425269988], - [1733818350, 16080.020443990135], - [1733818365, 16628.097153396593], - [1733818380, 16670.65176329415], - [1733818395, 16181.307082064845], - [1733818410, 16267.14961889736], - [1733818425, 16815.470767316285], - [1733818440, 16778.14319363584], - [1733818455, 16368.383627394338], - [1733818470, 16075.99493367109], - [1733818485, 16843.965957825036], - [1733818500, 16747.8612536942], - [1733818515, 16810.71952357673], - [1733818530, 16548.153415403758], - [1733818545, 17501.76662740828], - [1733818560, 17410.946423412814], - [1733818575, 17445.434545898977], - [1733818590, 16785.64920779538], - [1733818605, 17386.480300437768], - [1733818620, 17064.02079953779], - [1733818635, 16796.3823026155], - [1733818650, 16218.945824630016], - [1733818665, 16792.00462211951], - [1733818680, 16862.20612417226], - [1733818695, 16575.231661518632], - [1733818710, 16102.06439856892], - [1733818725, 16710.250883313707], - [1733818740, 16707.635216212613], - [1733818755, 16555.451858764973], - [1733818770, 15969.268032531887], - [1733818785, 16831.696369050263], - [1733818800, 16658.94849117817], - [1733818815, 16740.744855784185], - [1733818830, 16092.462557219678], - [1733818845, 16915.24632785938], - [1733818860, 16636.179810234873], - [1733818875, 17043.998044531352], - [1733818890, 16379.952447614605], - [1733818905, 17106.686518077375], - [1733818920, 16470.03399924446], - [1733818935, 16498.211150863317], - [1733818950, 15865.42521277305], - [1733818965, 16707.47966757033], - [1733818980, 16488.200524421136], - [1733818995, 16700.124438913826], - [1733819010, 15962.511944179018], - [1733819025, 16760.377777777776], - [1733819040, 16432.634830337105], - [1733819055, 16489.40047109017], - [1733819070, 15829.140927069908], - [1733819085, 16719.4791342607], - [1733819100, 16589.662681658592], - [1733819115, 16810.652859872895], - [1733819130, 16197.440056887626], - [1733819145, 17130.955555555553], - [1733819160, 16817.381835959204], - [1733819175, 16847.09568463624], - [1733819190, 16312.630549753343], - [1733819205, 17047.464557130792], - [1733819220, 16970.42287949157], - [1733819235, 16600.351095506867], - [1733819250, 16074.285587307231], - [1733819265, 16125.902717596606], - [1733819280, 16469.112483889603], - [1733819295, 16367.005910848406], - [1733819310, 16393.226967690323], - [1733819325, 16099.884449580019], - [1733819340, 16556.96540076887], - [1733819355, 16088.953578809362], - [1733819370, 16419.803564286034], - [1733819385, 16002.110970379754], - [1733819400, 16864.672681214168], - [1733819415, 16535.584935007217], - [1733819430, 16707.257455224215], - [1733819445, 16256.76066040042], - [1733819460, 16874.90833129625], - [1733819475, 16576.75214434914], - [1733819490, 16575.152215457092], - [1733819505, 16316.497044575799], - [1733819520, 17180.103106528597], - [1733819535, 17098.820026221638], - [1733819550, 16734.056264166036], - [1733819565, 16060.887535832539], - [1733819580, 16704.873225039446], - [1733819595, 16690.584653674363], - [1733819610, 16780.804871002867], - [1733819625, 16163.351925512769], - [1733819640, 16715.25077220506], - [1733819655, 16512.666103728723], - [1733819670, 16617.99475578863], - [1733819685, 16150.74885560642], - [1733819700, 16759.627563831917], - [1733819715, 16629.349806675258], - [1733819730, 16742.56127641608], - [1733819745, 16249.411137282787], - [1733819760, 17068.263632727438], - [1733819775, 16947.22574050619], - [1733819790, 16940.82485222879], - [1733819805, 16161.77418279594], - [1733819820, 17042.15461878625], - [1733819835, 17006.644149148928], - [1733819850, 17066.284469924227], - [1733819865, 16361.450602195457], - [1733819880, 16879.40535976179], - [1733819895, 16798.897826763256], - [1733819910, 16463.290520421317], - [1733819925, 16037.953868716946], - [1733819940, 16460.945312326396], - [1733819955, 16724.51723295038], - [1733819970, 16378.058265371883], - [1733819985, 16070.776204973225], - [1733820000, 16498.81113753028], - [1733820015, 16683.7181395969], - [1733820030, 16431.18083640727], - [1733820045, 16042.286069817568], - [1733820060, 16685.22098526765], - [1733820075, 17095.771393018244], - [1733820090, 16695.96906804142], - [1733820105, 16214.368250299985], - [1733820120, 16161.481711923916], - [1733820135, 17062.884696575784], - [1733820150, 16770.343540287096], - [1733820165, 16712.235011777255], - [1733820180, 16216.34594018044], - [1733820195, 16750.65552642105], - [1733820210, 16356.058754249907], - [1733820225, 16388.791360191997], - [1733820240, 16121.286193640142], - [1733820255, 16714.19048042309], - [1733820270, 16469.21179529344], - [1733820285, 16599.706679703126], - [1733820300, 16513.921912846385], - [1733820315, 17049.620016888137], - [1733820330, 16813.6749477801], - [1733820345, 16804.413039130726], - [1733820360, 16551.97546775699], - [1733820375, 16999.222256788587], - [1733820390, 16643.274593897913], - [1733820405, 16449.824452246565], - [1733820420, 16247.172285060333], - [1733820435, 16758.544064708236], - [1733820450, 17050.575529976446], - [1733820465, 16922.825652193234], - [1733820480, 16692.042752705376], - [1733820495, 16756.388604950895], - [1733820510, 16627.247072417395], - [1733820525, 16598.00893313482], - [1733820540, 16398.937824985554], - [1733820555, 16620.20843981245], - [1733820570, 16450.179992000358], - [1733820585, 16368.516954802008], - [1733820600, 16376.361050619971], - [1733820615, 16658.27426057199], - [1733820630, 16595.742316837404], - [1733820645, 16329.985333985156], - [1733820660, 16158.833855520745], - [1733820675, 16573.196746811253], - [1733820690, 16492.311452824317], - [1733820705, 16623.60311923752], - [1733820720, 16353.650948846718], - [1733820735, 16932.580774187812], - [1733820750, 16520.070234708393], - [1733820765, 16728.9009377361], - [1733820780, 16329.585351762144], - [1733820795, 17108.55073107862], - [1733820810, 16787.449167796272], - [1733820825, 16847.358947578945], - [1733820840, 16330.65197102351], - [1733820855, 16953.9808457214], - [1733820870, 16904.028620314202], - [1733820885, 16995.62241678148], - [1733820900, 16247.833429625349], - [1733820915, 16652.8077153841], - [1733820930, 16982.200791075953], - [1733820945, 17137.39694673452], - [1733820960, 16944.69011799738], - [1733820975, 16707.25094997889], - [1733820990, 16992.311452824317], - [1733821005, 16830.02977645438], - [1733821020, 16623.43895826852], - [1733821035, 16498.511177281012], - [1733821050, 16647.667933248897], - [1733821065, 16718.707641712776], - [1733821080, 16777.3210079552], - [1733821095, 16722.7394946779], - [1733821110, 16905.824315015223], - [1733821125, 16777.38767165904], - [1733821140, 16578.672532942248], - [1733821155, 16685.998711197033], - [1733821170, 16683.087794147057], - [1733821185, 16821.45237989423], - [1733821200, 16411.715034887337], - ], - query: '', - }, - ], - }, - { - ref: 'B', - data: [ - { - ref: 'B', - metric: { - ident: 'dev-backup-01', - service: 'mon', - }, - values: [ - [1733817600, 8913.114972667881], - [1733817615, 8941.096742656535], - [1733817630, 9303.75274957229], - [1733817645, 9280.423045304064], - [1733817660, 9072.106304024177], - [1733817675, 8721.929649134503], - [1733817690, 8953.758638313002], - [1733817705, 9013.532130477293], - [1733817720, 8884.407706152924], - [1733817735, 8592.684769565796], - [1733817750, 8844.825670540655], - [1733817765, 8862.206124172259], - [1733817780, 8879.472023465623], - [1733817795, 8606.750811075062], - [1733817810, 8889.713561920847], - [1733817825, 8994.489011355305], - [1733817840, 8937.447224567797], - [1733817855, 8751.966579263144], - [1733817870, 8885.118769859788], - [1733817885, 9104.175462767495], - [1733817900, 9007.444113594953], - [1733817915, 8846.606817474778], - [1733817930, 8825.785520643527], - [1733817945, 9175.503310963957], - [1733817960, 9129.949780009778], - [1733817975, 8998.088973823387], - [1733817990, 8866.780738205818], - [1733818005, 9035.976978289373], - [1733818020, 8991.311304193241], - [1733818035, 8810.204217684053], - [1733818050, 8670.822222222221], - [1733818065, 8864.358569809561], - [1733818080, 8818.73736139197], - [1733818095, 8784.649230017112], - [1733818110, 8831.448190040222], - [1733818125, 9040.399102242174], - [1733818140, 8986.26727700991], - [1733818155, 8838.203595475657], - [1733818170, 8772.543442513666], - [1733818185, 8986.955845425658], - [1733818200, 8870.49464468246], - [1733818215, 8768.365850406648], - [1733818230, 8747.261293691532], - [1733818245, 8972.02346562375], - [1733818260, 9150.63774943336], - [1733818275, 9046.665629652674], - [1733818290, 8986.933623697252], - [1733818305, 8954.178796026756], - [1733818320, 8890.115994844673], - [1733818335, 8784.387360561752], - [1733818350, 8781.538188040267], - [1733818365, 8946.712295282328], - [1733818380, 8917.468500699986], - [1733818395, 8754.027688273594], - [1733818410, 8773.471700628876], - [1733818425, 8967.422946156754], - [1733818440, 8922.025687747211], - [1733818455, 8736.211723923381], - [1733818470, 8693.131569006511], - [1733818485, 8990.778392551609], - [1733818500, 9175.077217074419], - [1733818515, 9353.762055019777], - [1733818530, 9306.897471223501], - [1733818545, 9594.03124375014], - [1733818560, 9364.258572031733], - [1733818575, 9393.569031799292], - [1733818590, 9049.66556298749], - [1733818605, 9323.08170929535], - [1733818620, 9127.419390680208], - [1733818635, 9052.843270149553], - [1733818650, 8798.186747255677], - [1733818665, 9032.79927112731], - [1733818680, 9007.55521976801], - [1733818695, 8853.514366347414], - [1733818710, 8691.006866514077], - [1733818725, 8905.690984644787], - [1733818740, 8927.60321763477], - [1733818755, 8871.25302757594], - [1733818770, 8741.744811341718], - [1733818785, 9053.930936402827], - [1733818800, 9011.132838540509], - [1733818815, 9068.59695124661], - [1733818830, 8865.18376961024], - [1733818845, 9166.551854403235], - [1733818860, 9025.131657889475], - [1733818875, 9183.680725301097], - [1733818890, 8949.047841255027], - [1733818905, 9216.417412946379], - [1733818920, 8976.756072087286], - [1733818935, 8950.312215284106], - [1733818950, 8718.161818626253], - [1733818965, 8983.000755521976], - [1733818980, 8904.737567219234], - [1733818995, 8940.780409759565], - [1733819010, 8731.517077398279], - [1733819025, 8975.11111111111], - [1733819040, 8855.892091286862], - [1733819055, 8728.678725389982], - [1733819070, 8510.91062619439], - [1733819085, 8776.876583262965], - [1733819100, 8822.47455668637], - [1733819115, 8880.449757788543], - [1733819130, 8708.406479856005], - [1733819145, 9012.599999999999], - [1733819160, 8977.444945667876], - [1733819175, 8966.179280920847], - [1733819190, 8930.291987022798], - [1733819205, 9188.502733211857], - [1733819220, 9221.728406035423], - [1733819235, 8989.156037509443], - [1733819250, 8780.209768454735], - [1733819265, 8788.880741283914], - [1733819280, 8939.647126794365], - [1733819295, 8893.226967690325], - [1733819310, 8878.983156304164], - [1733819325, 8746.166837029465], - [1733819340, 8923.979467122952], - [1733819355, 8980.533765916314], - [1733819370, 9221.901248833386], - [1733819385, 9170.944159278271], - [1733819400, 9351.784365139327], - [1733819415, 9183.024108432395], - [1733819430, 9130.816408159639], - [1733819445, 8945.292536053154], - [1733819460, 9069.223760528012], - [1733819475, 8965.490422647883], - [1733819490, 8871.427936536154], - [1733819505, 8893.560286209504], - [1733819520, 9177.103239856006], - [1733819535, 9157.285393657918], - [1733819550, 8965.357095240211], - [1733819565, 8763.760805315438], - [1733819580, 9010.688651363304], - [1733819595, 8984.555898757806], - [1733819610, 9005.799871113975], - [1733819625, 8857.892046843404], - [1733819640, 9014.466345192328], - [1733819655, 8912.292786987246], - [1733819670, 8879.07204124261], - [1733819685, 8717.36811697258], - [1733819700, 8951.445523432814], - [1733819715, 8884.694013599395], - [1733819730, 8923.49058909802], - [1733819745, 8698.168970267989], - [1733819760, 9015.932625216657], - [1733819775, 8943.781525676066], - [1733819790, 8990.000444424692], - [1733819805, 8730.583764805227], - [1733819820, 9191.773516144087], - [1733819835, 9193.59139593796], - [1733819850, 9222.318512099195], - [1733819865, 8862.672770099107], - [1733819880, 9058.041864806008], - [1733819895, 8987.267232567443], - [1733819910, 8880.094218034756], - [1733819925, 8662.748322296786], - [1733819940, 8819.337348058933], - [1733819955, 8920.75731650408], - [1733819970, 8847.314504122132], - [1733819985, 8767.027399391125], - [1733820000, 8913.024155018778], - [1733820015, 9002.199951112198], - [1733820030, 8891.160392871428], - [1733820045, 8726.90709508255], - [1733820060, 8943.448214563474], - [1733820075, 9049.574472812925], - [1733820090, 8953.602062130572], - [1733820105, 8821.230167548109], - [1733820120, 8852.939869339141], - [1733820135, 9247.272404061952], - [1733820150, 9098.551175503311], - [1733820165, 9036.020621305719], - [1733820180, 8758.366294831341], - [1733820195, 8918.64806008622], - [1733820210, 8869.825114997446], - [1733820225, 8900.557765382993], - [1733820240, 8827.003844359015], - [1733820255, 8889.760455090885], - [1733820270, 8775.560543099044], - [1733820285, 8761.43282520777], - [1733820300, 8800.782204839894], - [1733820315, 8994.355806408605], - [1733820330, 8932.558552953202], - [1733820345, 8865.720063106904], - [1733820360, 8799.097817874763], - [1733820375, 8919.78134305142], - [1733820390, 8927.97937823604], - [1733820405, 8831.62970534643], - [1733820420, 8845.047887824716], - [1733820435, 8931.469712457225], - [1733820450, 9151.126616594818], - [1733820465, 9155.326429936447], - [1733820480, 9120.080883496656], - [1733820495, 9045.397982311899], - [1733820510, 8939.404039730685], - [1733820525, 8877.424946112309], - [1733820540, 8835.162881649705], - [1733820555, 8891.402413279706], - [1733820570, 8884.027376561044], - [1733820585, 8849.96222390116], - [1733820600, 8906.53748722279], - [1733820615, 9039.57689829115], - [1733820630, 8992.15572987267], - [1733820645, 8867.516999244477], - [1733820660, 8780.836833100017], - [1733820675, 8956.490822630105], - [1733820690, 9230.034220701302], - [1733820705, 9344.515785030326], - [1733820720, 9290.942624772231], - [1733820735, 9270.521310163993], - [1733820750, 9096.506045519203], - [1733820765, 9186.969468023643], - [1733820780, 8996.64459357362], - [1733820795, 9205.679747566775], - [1733820810, 9050.776649407791], - [1733820825, 9038.221372858381], - [1733820840, 8842.829207590774], - [1733820855, 8935.226540452859], - [1733820870, 8908.806079594695], - [1733820885, 8939.891560375096], - [1733820900, 9078.218745833517], - [1733820915, 9360.05866536299], - [1733820930, 9484.756233056309], - [1733820945, 9228.194929001578], - [1733820960, 9034.843670140664], - [1733820975, 8965.111886402525], - [1733820990, 9013.510510643971], - [1733821005, 8971.801253277632], - [1733821020, 8933.180747522332], - [1733821035, 8939.424914448247], - [1733821050, 8959.091616114481], - [1733821065, 8942.670488634092], - [1733821080, 9076.663259410692], - [1733821095, 9091.620186218084], - [1733821110, 9140.485766982956], - [1733821125, 8945.691302608773], - [1733821140, 8874.297269070952], - [1733821155, 8916.338910739285], - [1733821170, 8952.98091238362], - [1733821185, 8989.956001955468], - [1733821200, 8897.8934269588], - ], - query: '', - }, - ], - }, - ], - err: '', - success: true, -}; - -export const data02 = { - dat: [ - { - ref: 'A', - data: [ - { - ref: 'A', - metric: { - comm: 'categraf', - pid: '1205', - username: 'aceadm', - }, - values: [ - [1733908173, 127754240], - [1733908533, 127778816], - [1733908713, 127778816], - [1733909073, 127266816], - [1733909793, 127332352], - [1733909973, 127332352], - [1733910153, 127598592], - [1733910693, 128360448], - [1733911233, 128122880], - [1733911413, 127860736], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'fc-alert', - pid: '47970', - username: 'aceadm', - }, - values: [ - [1733907993, 262561792], - [1733908173, 261726208], - [1733908353, 251621376], - [1733908533, 243417088], - [1733908713, 263380992], - [1733908893, 281403392], - [1733909073, 248897536], - [1733909253, 268959744], - [1733909433, 254078976], - [1733909613, 245706752], - [1733909793, 249421824], - [1733909973, 269565952], - [1733910153, 260808704], - [1733910333, 251944960], - [1733910513, 265945088], - [1733910693, 253087744], - [1733910873, 251957248], - [1733911053, 248786944], - [1733911233, 264028160], - [1733911413, 248258560], - [1733911593, 262070272], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'fc-dqueue', - pid: '47974', - username: 'aceadm', - }, - values: [ - [1733907993, 38891520], - [1733908173, 38645760], - [1733908353, 38961152], - [1733908533, 38608896], - [1733908713, 39358464], - [1733908893, 39149568], - [1733909073, 37994496], - [1733909253, 38289408], - [1733909433, 38146048], - [1733909613, 38182912], - [1733909793, 38539264], - [1733909973, 38502400], - [1733910153, 38940672], - [1733910333, 38526976], - [1733910513, 38416384], - [1733910693, 38416384], - [1733910873, 38739968], - [1733911053, 38547456], - [1733911233, 38670336], - [1733911413, 38150144], - [1733911593, 38256640], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'fc-insight', - pid: '47973', - username: 'aceadm', - }, - values: [ - [1733907993, 223735808], - [1733908173, 197881856], - [1733908353, 200183808], - [1733908533, 200990720], - [1733908713, 199864320], - [1733908893, 199725056], - [1733909073, 197771264], - [1733909253, 197251072], - [1733909433, 198332416], - [1733909613, 199139328], - [1733909793, 199409664], - [1733909973, 197656576], - [1733910153, 199426048], - [1733910333, 197648384], - [1733910513, 198836224], - [1733910693, 198483968], - [1733910873, 198340608], - [1733911053, 199159808], - [1733911233, 199258112], - [1733911413, 199393280], - [1733911593, 213712896], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'fc-scrape', - pid: '47972', - username: 'aceadm', - }, - values: [ - [1733907993, 181444608], - [1733908173, 184541184], - [1733908353, 178540544], - [1733908533, 178954240], - [1733908713, 185131008], - [1733908893, 183914496], - [1733909073, 180125696], - [1733909253, 177905664], - [1733909433, 185548800], - [1733909613, 184991744], - [1733909793, 181276672], - [1733909973, 183078912], - [1733910153, 183517184], - [1733910333, 178716672], - [1733910513, 178008064], - [1733910693, 181604352], - [1733910873, 181391360], - [1733911053, 187465728], - [1733911233, 186187776], - [1733911413, 181579776], - [1733911593, 187584512], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'filebeat', - pid: '48008', - username: 'aceadm', - }, - values: [ - [1733907993, 519237632], - [1733908173, 519237632], - [1733908353, 519213056], - [1733908533, 519147520], - [1733908713, 519127040], - [1733908893, 519127040], - [1733909073, 519127040], - [1733909253, 519127040], - [1733909433, 519127040], - [1733909613, 519127040], - [1733909793, 519127040], - [1733909973, 519127040], - [1733910153, 519127040], - [1733910333, 519127040], - [1733910513, 519127040], - [1733910693, 519127040], - [1733910873, 519127040], - [1733911053, 519127040], - [1733911233, 519127040], - [1733911413, 519127040], - [1733911593, 519127040], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'java', - pid: '32268', - username: 'aceadm', - }, - values: [ - [1733907993, 10750296064], - [1733908173, 10736246784], - [1733908353, 10736246784], - [1733908533, 10736246784], - [1733908713, 11030962176], - [1733908893, 11296890880], - [1733909073, 10627710976], - [1733909253, 10627710976], - [1733909433, 10627710976], - [1733909613, 10627710976], - [1733909793, 10418184192], - [1733909973, 11242459136], - [1733910153, 11629322240], - [1733910333, 10881150976], - [1733910513, 10881990656], - [1733910693, 10881990656], - [1733910873, 10913394688], - [1733911053, 11193946112], - [1733911233, 11013091328], - [1733911413, 11013079040], - [1733911593, 11013079040], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'java', - pid: '32935', - username: 'aceadm', - }, - values: [ - [1733907993, 730365952], - [1733908173, 730365952], - [1733908353, 730365952], - [1733908533, 730365952], - [1733908713, 730365952], - [1733908893, 730365952], - [1733909073, 730365952], - [1733909253, 730365952], - [1733909433, 730365952], - [1733909613, 730365952], - [1733909793, 730365952], - [1733909973, 730365952], - [1733910153, 730365952], - [1733910333, 730365952], - [1733910513, 730365952], - [1733910693, 730365952], - [1733910873, 730365952], - [1733911053, 730365952], - [1733911233, 730370048], - [1733911413, 730370048], - [1733911593, 730370048], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'java', - pid: '38859', - username: '1018502', - }, - values: [ - [1733907993, 3247951872], - [1733908173, 3247951872], - [1733908353, 3247951872], - [1733908533, 3247951872], - [1733908713, 3247951872], - [1733908893, 3247951872], - [1733909073, 3247951872], - [1733909253, 3247951872], - [1733909433, 3247951872], - [1733909613, 3247951872], - [1733909793, 3247964160], - [1733909973, 3247964160], - [1733910153, 3247951872], - [1733910333, 3247951872], - [1733910513, 3247964160], - [1733910693, 3247964160], - [1733910873, 3247984640], - [1733911053, 3247984640], - [1733911233, 3247984640], - [1733911413, 3247984640], - [1733911593, 3247984640], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'jbd2/dm-32-8', - pid: '2495', - username: 'root', - }, - values: [ - [1733907993, 0], - [1733908173, 0], - [1733908353, 0], - [1733908533, 0], - [1733908713, 0], - [1733908893, 0], - [1733909073, 0], - [1733909253, 0], - [1733909433, 0], - [1733909613, 0], - [1733909793, 0], - [1733909973, 0], - [1733910153, 0], - [1733910333, 0], - [1733910513, 0], - [1733910693, 0], - [1733910873, 0], - [1733911053, 0], - [1733911233, 0], - [1733911413, 0], - [1733911593, 0], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'metricbeat', - pid: '30804', - username: 'aceadm', - }, - values: [ - [1733907993, 152182784], - [1733908173, 153112576], - [1733908353, 154603520], - [1733908533, 155648000], - [1733908713, 144912384], - [1733908893, 152006656], - [1733909073, 154243072], - [1733909253, 153030656], - [1733909433, 152743936], - [1733909613, 154472448], - [1733909793, 154574848], - [1733909973, 155979776], - [1733910153, 150913024], - [1733910333, 149753856], - [1733910513, 152649728], - [1733910693, 156389376], - [1733910873, 150003712], - [1733911053, 155164672], - [1733911233, 156528640], - [1733911413, 155430912], - [1733911593, 156401664], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'mongod', - pid: '57038', - username: 'aceadm', - }, - values: [ - [1733907993, 200286208], - [1733908173, 200368128], - [1733908353, 200376320], - [1733908533, 200372224], - [1733908713, 200523776], - [1733908893, 200597504], - [1733909073, 200597504], - [1733909253, 200597504], - [1733909433, 200601600], - [1733909613, 200503296], - [1733909793, 200503296], - [1733909973, 200503296], - [1733910153, 200507392], - [1733910333, 200507392], - [1733910513, 200232960], - [1733910693, 200032256], - [1733910873, 200179712], - [1733911053, 200826880], - [1733911233, 200826880], - [1733911413, 200826880], - [1733911593, 200282112], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'mysqld', - pid: '33849', - username: 'aceadm', - }, - values: [ - [1733907993, 1053753344], - [1733908173, 1053753344], - [1733908353, 1053753344], - [1733908533, 1053753344], - [1733908713, 1053753344], - [1733908893, 1053753344], - [1733909073, 1053753344], - [1733909253, 1053753344], - [1733909433, 1053753344], - [1733909613, 1053753344], - [1733909793, 1053753344], - [1733909973, 1053753344], - [1733910153, 1053753344], - [1733910333, 1053753344], - [1733910513, 1053753344], - [1733910693, 1053753344], - [1733910873, 1053753344], - [1733911053, 1053753344], - [1733911233, 1053753344], - [1733911413, 1053753344], - [1733911593, 1053753344], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'n9e-plus', - pid: '17291', - username: 'aceadm', - }, - values: [ - [1733907993, 224100352], - [1733908173, 253988864], - [1733908353, 245837824], - [1733908533, 252854272], - [1733908713, 245010432], - [1733908893, 272252928], - [1733909073, 227254272], - [1733909253, 304939008], - [1733909433, 284127232], - [1733909613, 233472000], - [1733909793, 260710400], - [1733909973, 243716096], - [1733910153, 278085632], - [1733910333, 262234112], - [1733910513, 276750336], - [1733910693, 229335040], - [1733910873, 287727616], - [1733911053, 264765440], - [1733911233, 263446528], - [1733911413, 279912448], - [1733911593, 267087872], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'nginx', - pid: '21680', - username: 'aceadm', - }, - values: [ - [1733908173, 11370496], - [1733908713, 11345920], - [1733909073, 11612160], - [1733909433, 11350016], - [1733909613, 11345920], - [1733909973, 13512704], - [1733910153, 14172160], - [1733910513, 11993088], - [1733910693, 11345920], - [1733910873, 11350016], - [1733911233, 11345920], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'nginx', - pid: '21682', - username: 'aceadm', - }, - values: [ - [1733908173, 9871360], - [1733910873, 11255808], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'redis-server', - pid: '11022', - username: 'aceadm', - }, - values: [ - [1733909073, 17985253376], - [1733909253, 17995292672], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'redis-server', - pid: '14745', - username: 'aceadm', - }, - values: [ - [1733909433, 17985769472], - [1733909613, 18007924736], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'redis-server', - pid: '19034', - username: 'aceadm', - }, - values: [[1733909793, 17988210688]], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'redis-server', - pid: '22848', - username: 'aceadm', - }, - values: [ - [1733909973, 17986564096], - [1733910153, 17996353536], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'redis-server', - pid: '26311', - username: 'aceadm', - }, - values: [[1733910333, 17987457024]], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'redis-server', - pid: '30010', - username: 'aceadm', - }, - values: [[1733910693, 17989185536]], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'redis-server', - pid: '33392', - username: 'aceadm', - }, - values: [ - [1733907993, 17977507840], - [1733908173, 17979219968], - [1733908353, 17980813312], - [1733908533, 17983012864], - [1733908713, 17984942080], - [1733908893, 17984319488], - [1733909073, 17985417216], - [1733909253, 17985323008], - [1733909433, 17985687552], - [1733909613, 17986211840], - [1733909793, 17986555904], - [1733909973, 17986691072], - [1733910153, 17986854912], - [1733910333, 17986895872], - [1733910513, 17986887680], - [1733910693, 17986887680], - [1733910873, 17987239936], - [1733911053, 17989316608], - [1733911233, 17989402624], - [1733911413, 17989533696], - [1733911593, 17989971968], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'redis-server', - pid: '33860', - username: 'aceadm', - }, - values: [ - [1733910873, 17987395584], - [1733911053, 17997832192], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'redis-server', - pid: '37370', - username: 'aceadm', - }, - values: [ - [1733911233, 17989369856], - [1733911413, 18013339648], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'redis-server', - pid: '3947', - username: 'aceadm', - }, - values: [ - [1733908533, 17982984192], - [1733908713, 18003898368], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'redis-server', - pid: '42300', - username: 'aceadm', - }, - values: [[1733911593, 17991716864]], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'redis-server', - pid: '61547', - username: 'aceadm', - }, - values: [[1733907993, 17975582720]], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'redis-server', - pid: '65029', - username: 'aceadm', - }, - values: [ - [1733908173, 17979191296], - [1733908353, 17986555904], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'redis-server', - pid: '7364', - username: 'aceadm', - }, - values: [[1733908893, 17986936832]], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'systemd-journald', - pid: '1146', - username: 'root', - }, - values: [ - [1733910513, 173506560], - [1733911413, 178139136], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'vminsert-prod', - pid: '33442', - username: 'aceadm', - }, - values: [ - [1733907993, 342716416], - [1733908173, 385515520], - [1733908353, 370872320], - [1733908533, 342278144], - [1733908713, 372363264], - [1733908893, 330096640], - [1733909073, 361627648], - [1733909253, 347701248], - [1733909433, 382902272], - [1733909613, 356552704], - [1733909793, 376356864], - [1733909973, 380227584], - [1733910153, 395960320], - [1733910333, 375136256], - [1733910513, 384389120], - [1733910693, 374820864], - [1733910873, 393404416], - [1733911053, 369954816], - [1733911233, 392773632], - [1733911413, 362995712], - [1733911593, 382976000], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'vmselect-prod', - pid: '33161', - username: 'aceadm', - }, - values: [ - [1733907993, 1833590784], - [1733908173, 1846403072], - [1733908353, 1838170112], - [1733908533, 1888661504], - [1733908713, 1936453632], - [1733908893, 1885122560], - [1733909073, 2071605248], - [1733909253, 2071162880], - [1733909433, 1813905408], - [1733909613, 1912815616], - [1733909793, 1937133568], - [1733909973, 1822666752], - [1733910153, 1852719104], - [1733910333, 1817497600], - [1733910513, 1805922304], - [1733910693, 1879588864], - [1733910873, 1826246656], - [1733911053, 1865060352], - [1733911233, 1886199808], - [1733911413, 1890480128], - [1733911593, 1983197184], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'vmstorage-prod', - pid: '53325', - username: 'aceadm', - }, - values: [ - [1733907993, 19067498496], - [1733908173, 20798611456], - [1733908353, 20963864576], - [1733908533, 20969877504], - [1733908713, 20972986368], - [1733908893, 20880322560], - [1733909073, 20395913216], - [1733909253, 19844276224], - [1733909433, 19351752704], - [1733909613, 19018641408], - [1733909793, 18753605632], - [1733909973, 20265996288], - [1733910153, 20396568576], - [1733910333, 20541669376], - [1733910513, 20624130048], - [1733910693, 20393111552], - [1733910873, 19771133952], - [1733911053, 19372077056], - [1733911233, 19090444288], - [1733911413, 18559422464], - [1733911593, 18691977216], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'wdavdaemon', - pid: '15279', - username: 'mdatp', - }, - values: [ - [1733908173, 172662784], - [1733908713, 173084672], - [1733909073, 173047808], - [1733909613, 172945408], - [1733909973, 172904448], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'wdavdaemon', - pid: '2505', - username: 'root', - }, - values: [ - [1733907993, 166658048], - [1733908173, 166658048], - [1733908353, 166658048], - [1733908533, 166653952], - [1733908713, 166653952], - [1733908893, 166653952], - [1733909073, 166653952], - [1733909253, 166653952], - [1733909433, 166653952], - [1733909613, 166653952], - [1733909793, 167223296], - [1733909973, 167223296], - [1733910153, 167223296], - [1733910333, 167223296], - [1733910513, 167223296], - [1733910693, 167223296], - [1733910873, 167223296], - [1733911053, 167223296], - [1733911233, 167223296], - [1733911413, 167227392], - [1733911593, 167227392], - ], - query: '', - }, - { - ref: 'A', - metric: { - comm: 'wdavdaemon', - pid: '2802', - username: 'root', - }, - values: [ - [1733907993, 116383744], - [1733908173, 116338688], - [1733908353, 116350976], - [1733908533, 116400128], - [1733908713, 116375552], - [1733908893, 116207616], - [1733909073, 116424704], - [1733909253, 116154368], - [1733909433, 116342784], - [1733909613, 116293632], - [1733909793, 116236288], - [1733909973, 116260864], - [1733910153, 116269056], - [1733910333, 116318208], - [1733910513, 116355072], - [1733910693, 116183040], - [1733910873, 116617216], - [1733911053, 116350976], - [1733911233, 116363264], - [1733911413, 116330496], - [1733911593, 116252672], - ], - query: '', - }, - ], - }, - ], - err: '', - success: true, -}; diff --git a/src/pages/demo/index.tsx b/src/pages/demo/index.tsx index 4416fb820..abaec18b8 100644 --- a/src/pages/demo/index.tsx +++ b/src/pages/demo/index.tsx @@ -1,37 +1,59 @@ -/* - * Copyright 2022 Nightingale Team - * - * Licensed 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 React from 'react'; import _ from 'lodash'; +import HoneycombChart from '@/components/HoneycombChart'; +import calculateHexCoordinates from '@/components/HoneycombChart/utils/calculateHexCoordinates'; + import './style.less'; +const config = { + width: 800, + height: 400, + spacing: 1.02, + enableRounded: true, // 是否启用圆角 +}; + +const dataGenerator = () => { + const count = 100; + const colors = ['#FFB6C1', '#87CEFA', '#90EE90', '#FFD700', '#FFA500', '#DA70D6']; + const data: any[] = []; + for (let i = 0; i < count; i++) { + data.push({ + color: colors[i % colors.length], + title: `Title Title Title Title Title ${i + 1}`, + subtitle: `Subtitle Subtitle Subtitle Subtitle Subtitle Subtitle Subtitle ${i + 1}`, + tooltip: `This is hexagon ${i + 1}`, + }); + } + return data; +}; + export default function Demo() { + const data = dataGenerator(); + const coordinates = calculateHexCoordinates(data.length, config.spacing, config.width, config.height); + const currentData = _.map(data, (item, index) => ({ + ...item, + ...coordinates.coordinates[index], + })); + return ( -
-
+
+
+ +
); }