Skip to content

V
VisualDL

PaddlePaddle / VisualDL
大约 2 年 前同步成功

通知 89
Star 4655
Fork 642
V
VisualDL
未验证 提交 4a2b1b67 编写于 作者: R RotPublic 提交者： GitHub
浏览文件
操作

Add profiler frontend code

上级 b279127d
显示空白变更内容
内联 并排
Showing with 17988 addition and 200 deletion
frontend/.eslintrc.js
浏览文件 @ 4a2b1b67
...@@ -27,8 +27,8 @@ module.exports = { ...@@ -27,8 +27,8 @@ module.exports = {
}, },
plugins: ['license-header'], plugins: ['license-header'],
rules: { rules: {
'sort-imports': 'warn', // 'sort-imports': 'warn',
'no-console': 'warn' // 'no-console': 'warn'
// 'license-header/header': ['error', './license-header.js'] // 'license-header/header': ['error', './license-header.js']
}, },
overrides: [ overrides: [
...@@ -39,7 +39,7 @@ module.exports = { ...@@ -39,7 +39,7 @@ module.exports = {
rules: { rules: {
'@typescript-eslint/explicit-function-return-type': 'off', '@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off', '@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-explicit-any': 'error' '@typescript-eslint/no-explicit-any': 'off'
} }
}, },
{ {
...@@ -66,7 +66,7 @@ module.exports = { ...@@ -66,7 +66,7 @@ module.exports = {
rules: { rules: {
'@typescript-eslint/explicit-function-return-type': 'off', '@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off', '@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-explicit-any': 'error', '@typescript-eslint/no-explicit-any': 'off',
'react/prop-types': 'off', 'react/prop-types': 'off',
'react/react-in-jsx-scope': 'off' 'react/react-in-jsx-scope': 'off'
} }
......
frontend/packages/core/package.json
浏览文件 @ 4a2b1b67
...@@ -39,17 +39,19 @@ ...@@ -39,17 +39,19 @@
"dist" "dist"
], ],
"dependencies": { "dependencies": {
"@material-ui/core": "^4.12.4",
"@snowpack/plugin-sass": "^1.4.0",
"@tippyjs/react": "4.2.5", "@tippyjs/react": "4.2.5",
"@visualdl/icons": "2.2.1", "@visualdl/icons": "2.2.1",
"@visualdl/netron": "2.2.1", "@visualdl/netron": "2.2.1",
"@visualdl/wasm": "2.2.1", "@visualdl/wasm": "2.2.1",
"antd": "^4.21.0",
"bignumber.js": "9.0.1", "bignumber.js": "9.0.1",
"classnames": "2.3.1", "classnames": "2.3.1",
"d3": "7.0.1", "d3": "7.0.1",
"d3-format": "3.0.1", "d3-format": "3.0.1",
"echarts": "4.9.0", "echarts": "^5.3.3",
"echarts-gl": "1.1.2", "echarts-gl": "^2.0.9",
"eslint-plugin-simple-import-sort": "^7.0.0",
"eventemitter3": "4.0.7", "eventemitter3": "4.0.7",
"file-saver": "2.0.5", "file-saver": "2.0.5",
"i18next": "20.6.0", "i18next": "20.6.0",
...@@ -79,11 +81,13 @@ ...@@ -79,11 +81,13 @@
"react-table-sticky": "1.1.3", "react-table-sticky": "1.1.3",
"react-toastify": "8.0.2", "react-toastify": "8.0.2",
"redux": "4.1.1", "redux": "4.1.1",
"snowpack-plugin-less": "^1.0.7",
"styled-components": "5.3.1", "styled-components": "5.3.1",
"swr": "1.0.1", "swr": "1.0.1",
"three": "0.132.2", "three": "0.132.2",
"tippy.js": "6.3.1", "tippy.js": "6.3.1",
"umap-js": "1.3.3" "umap-js": "1.3.3",
"use-deep-compare-effect": "^1.8.1"
}, },
"devDependencies": { "devDependencies": {
"@baiducloud/sdk": "1.0.0-rc.31", "@baiducloud/sdk": "1.0.0-rc.31",
...@@ -97,7 +101,6 @@ ...@@ -97,7 +101,6 @@
"@types/chai": "4.2.21", "@types/chai": "4.2.21",
"@types/d3": "7.0.0", "@types/d3": "7.0.0",
"@types/d3-format": "3.0.1", "@types/d3-format": "3.0.1",
"@types/echarts": "4.9.10",
"@types/file-saver": "2.0.3", "@types/file-saver": "2.0.3",
"@types/lodash": "4.14.172", "@types/lodash": "4.14.172",
"@types/mime-types": "2.1.1", "@types/mime-types": "2.1.1",
......
frontend/packages/core/public/images/hover.svg 0 → 100644
浏览文件 @ 4a2b1b67
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill="#2932E1" d="M7,0 L7,0 C3.13400755,0 0,3.13400755 0,7 C0,7 0,7 0,7 L0,7 C0,10.8660098 3.13400755,14.0000173 7,14.0000173 L7,14.0000173 C10.8660084,14.0000173 14.000016,10.8660098 14.000016,7 L14.000016,7 C14.000016,3.13400861 10.8660084,0 7,0 L7,0 Z M6.88930852,9.94833549 C7.21622667,9.93576419 7.4914375,10.1905932 7.50400904,10.5175113 L7.50400904,10.5175113 L7.50400904,10.5630368 C7.49143774,10.889955 7.21622667,11.1447842 6.88930852,11.1322127 C6.56239037,11.1196414 6.30756117,10.8444303 6.32013266,10.5175122 L6.32013266,10.5175122 L6.33060888,10.4267388 C6.38223791,10.1609864 6.61095033,9.95903965 6.88930852,9.94833549 Z M6.9921336,2.8909989 C7.68252171,2.88978156 8.34332932,3.17117818 8.82088573,3.66975376 C9.26013624,4.1326293 9.4841365,4.72762999 9.45088646,5.34538071 C9.41763643,5.97800645 9.2233862,6.47763203 8.25213507,7.44800816 C7.80955955,7.89058367 7.51369546,8.23393407 7.43598487,8.5348303 L7.41825909,8.63363464 C7.39588787,8.85742952 7.22604721,9.0338123 7.01087397,9.07031116 L6.929,9.077 L6.88013332,9.07463556 C6.60994121,9.04746842 6.41268863,8.80677451 6.43913281,8.53650993 C6.50563288,7.85400914 7.00613347,7.3027585 7.55738411,6.75150786 C8.38667919,5.92221277 8.44786265,5.62462765 8.46532207,5.3451887 L8.4682602,5.29288053 C8.48225838,4.99167784 8.38830495,4.69712169 8.20611596,4.46089356 L8.10775983,4.34787949 C7.81734836,4.04532465 7.41588559,3.87462425 6.99650854,3.87537894 L6.99475857,3.87537894 C6.23199702,3.87764582 5.60604809,4.45989683 5.53424846,5.20405559 L5.52738186,5.34538065 C5.52738186,5.61720929 5.30702243,5.83756872 5.03519379,5.83756872 C4.76336515,5.83756872 4.54300572,5.61720929 4.54300572,5.34538065 C4.54300572,4.75554246 4.74854346,4.19830682 5.12708727,3.7553218 L5.25963149,3.6120037 C5.67192267,3.19623274 6.21843686,2.94437592 6.79789833,2.898576 L6.9921336,2.8909989 Z"/></svg>
\ No newline at end of file
frontend/packages/core/public/locales/en/common.json
浏览文件 @ 4a2b1b67
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"graphDynamic": "dynamic", "graphDynamic": "dynamic",
"graphStatic": "static", "graphStatic": "static",
"high-dimensional": "High Dimensional", "high-dimensional": "High Dimensional",
"profiler":"performance analysis",
"histogram": "Histogram", "histogram": "Histogram",
"hyper-parameter": "Hyper Parameters", "hyper-parameter": "Hyper Parameters",
"image": "Image", "image": "Image",
......
frontend/packages/core/public/locales/en/profiler.json 0 → 100644
浏览文件 @ 4a2b1b67
{
"Overview-view": "Overview",
"time-consuming": "Execution Summary",
"Expand-view": "Details",
"stage-view": "Details",
"training-step-time": "Execution Time Breakdown",
"performance-consumption": "Event Summary",
"consumption-distribution": "Event Time Breakdown",
"custom-events": "UserDefined Summary",
"Configuration-details": "Configuration",
"number-processes": "Number of Worker(s)",
"Equipment-type": "Device Type",
"Device-Details": "Device Summary",
"Process-utilization": "Process Utilization",
"system-utilization": "System Utilization",
"computing-power": "Compute Capability",
"Utilization": "Utilization",
"Traffic-Processor-Efficiency": "Est. SM Efficiency",
"Traffic-processor-occupancy": "Est. Achieved Occupancy",
"usage-time": "Kernel Time using Tensor Cores",
"step": "step",
"timeConsuming": "time consuming",
"Number-calls": "Calls",
"duration": "duration",
"Overall-proportion": "Overall proportion",
"stage": "Event Name",
"number-calls": "Calls",
"total-time": "Total Time",
"average-time": "Average Time",
"longest-time": "Max Time",
"shortest-time":"Min Time",
"percentage":"Percentage",
"Operator-view":"Operator View",
"Time-profile":"Operator Pie",
"Kernel-profile":"Kernel Pie",
"Time-details":"Operator Table",
"show-all-operators":"All operators",
"show-Top-operators":"Top operators to show",
"By-operator-name":"Operator Name",
"operator-shape":"Operator Name + Input Shape",
"input-shape":"input shape",
"call-volume":"Calls",
"operator":"Operator Name",
"CPU-time":"CPU",
"GPU-time":"GPU",
"nuclear-view":"Kernel View",
"show-all-kernels":"show all kernels",
"show-Top-kernels":"Show Top Kernels",
"group-by-core":"Kernel Name",
"Group-operator":"Kernel Name + Attributes",
"nuclear-name":"Kernel Name",
"sm-average":"Mean Blocks Per SM",
"average-occupancy":"Mean Achieved Occupancy",
"use-tensor-core":"Kernel Used Tensor Cores",
"Distribution-view":"Distributed View",
"Device-Information":"Device Information",
"comparisons":"Computation/Communication Overview",
"training-steps":"Step",
"memory-view":"Memory View",
"equipment":"Device",
"timestamp":"timestamp",
"memory-size":"memory size",
"event-name":"Event Name",
"memory-usage":"memory usage",
"storage-type":"Memory Type",
"MemorAddr":"Memory address",
"EventName":"Event Name",
"AllocationCount":"Allcation Counts",
"FreeCount":"Release Counts",
"AllocationSize":"Allocation Size",
"FreeSize":"Release Size",
"IncreasedSize":"Increased Size",
"AllocatedEvent":"Allocation Event",
"AllocatedTimestamp":"Allocation Time",
"FreeEvent":"Release Event",
"FreeTimestamp":"Release Time",
"Duration":"Duratrion",
"Size":"Size",
"search-event-name":"search event name",
"Search-Kernal":"Search kernel name",
"Search-operator":"Search operator name",
"data-flow":"Runs",
"view":"Views",
"process":"Workers",
"process-span":"Spans",
"time-unit":"Timeunit",
"Allocated":"Allocated",
"Reserved":"Reserved",
"PeakAllocated":"Peak Allocated",
"PeakReserved":"Peak Reserved",
"NoGPUdata":"No GPU data yet",
"Cor-operator":"Operator",
"thread-grid":"Grid",
"thread-block":"Block",
"Thread-registers":"Register Per Thread",
"Shared-memory":"Shared Memory",
"Yes":"Yes",
"No":"No",
"performance-analysis":"Profiler",
"Tensorcore-usage":"Tensor Cores Utilization",
"Kernel-details":"Kernel Table",
"proportion":"proportion"
}
\ No newline at end of file
frontend/packages/core/public/locales/zh/common.json
浏览文件 @ 4a2b1b67
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"graphDynamic": "动态", "graphDynamic": "动态",
"graphStatic": "静态", "graphStatic": "静态",
"high-dimensional": "数据降维", "high-dimensional": "数据降维",
"profiler": "性能分析",
"histogram": "直方图", "histogram": "直方图",
"hyper-parameter": "超参可视化", "hyper-parameter": "超参可视化",
"image": "图像", "image": "图像",
......
frontend/packages/core/public/locales/zh/profiler.json 0 → 100644
浏览文件 @ 4a2b1b67
{
"Overview-view": "总览视图",
"time-consuming": "运行耗时",
"Expand-view": "展开查看耗时详情",
"stage-view": "各阶段耗时详情",
"training-step-time": "训练步数耗时",
"performance-consumption": "性能消耗",
"consumption-distribution": "模型各阶段消耗分布",
"custom-events": "自定义事件耗时",
"Configuration-details": "配置详情",
"number-processes": "进程数",
"Equipment-type": "设备类型",
"Device-Details": "设备详情",
"Process-utilization": "进程利用率",
"system-utilization": "系统利用率",
"computing-power": "算力",
"Utilization": "利用率",
"Traffic-Processor-Efficiency": "流处理器效率",
"Traffic-processor-occupancy": "流处理器占用率",
"usage-time": "Tensor Cores使用时间占比",
"step": "步",
"timeConsuming": "耗时",
"Number-calls": "调用量（次)",
"duration": "持续时间",
"Overall-proportion": "整体占比",
"stage": "事件名称",
"number-calls": "调用次数",
"total-time": "总耗时",
"average-time": "平均耗时",
"longest-time": "最长耗时",
"shortest-time":"最短耗时",
"percentage":"百分比",
"Operator-view":"算子视图",
"Time-profile":"耗时概况",
"Kernel-profile":"耗时概况",
"Time-details":"算子详情",
"Kernel-details":"核详情",
"show-all-operators":"显示全部算子",
"show-Top-operators":"显示Top算子",
"By-operator-name":"按算子名称",
"operator-shape":"按算子名称+输入形状",
"input-shape":"输入形状",
"call-volume":"调用量",
"operator":"算子名称",
"CPU-time":"CPU耗时",
"GPU-time":"GPU耗时",
"nuclear-view":"核视图",
"show-all-kernels":"显示全部内核",
"show-Top-kernels":"显示Top内核",
"group-by-core":"按核名称分组",
"Group-operator":"按核名称+核属性分组",
"nuclear-name":"核名称",
"sm-average":"sm平均线程块数量",
"average-occupancy":"平均占用率",
"use-tensor-core":"是否使用Tensor Cores",
"Distribution-view":"分布式视图",
"Device-Information":"设备信息",
"comparisons":"Computation和communication的耗时对比",
"training-steps":"训练步数",
"memory-view":"显存视图",
"equipment":"设备",
"timestamp":"时间戳",
"memory-size":"内存大小",
"event-name":"事件名称",
"memory-usage":"内存使用量",
"storage-type":"存储类型",
"MemorAddr":"存储地址",
"EventName":"事件名",
"AllocationCount":"分配次数",
"FreeCount":"释放次数",
"AllocationSize":"分配大小",
"FreeSize":"释放大小",
"IncreasedSize":"净增量",
"AllocatedEvent":"分配事件",
"AllocatedTimestamp":"分配时间",
"FreeEvent":"释放事件",
"FreeTimestamp":"释放时间",
"Duration":"持续时间",
"Size":"大小",
"search-event-name":"搜素事件名",
"Search-operator":"搜索算子名称",
"Search-Kernal":"搜索核名称",
"performance-analysis":"性能分析",
"data-flow":"数据流",
"view":"视图",
"process":"进程",
"process-span":"数据索引",
"time-unit":"时间单位",
"Allocated":"已分配",
"Reserved":"已预留",
"PeakAllocated":"最大已分配",
"PeakReserved":"最大已预留",
"NoGPUdata":"暂无GPU数据",
"Cor-operator":"对应算子",
"thread-grid":"线程网格",
"thread-block":"线程块",
"Thread-registers":"线程平均寄存器数量",
"Shared-memory":"共享显存量",
"Yes":"是",
"No":"否",
"Tensorcore-usage":"Tensor core利用率",
"proportion":"占比"
}
\ No newline at end of file
frontend/packages/core/public/static/index.html 0 → 100644
浏览文件 @ 4a2b1b67
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
frontend/packages/core/public/static/index.js 0 → 100644
浏览文件 @ 4a2b1b67
export async function render() {
document.location.href = 'index.html';
}
frontend/packages/core/public/static/trace_embedding.html 0 → 100644
浏览文件 @ 4a2b1b67
<!DOCTYPE html>
<!--
Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents.min.js"></script>
<script>
'use strict';
function onTraceViewerImportFail() {
document.addEventListener('DOMContentLoaded', function () {
document.body.textContent =
'tracing/bin/trace_viewer_full.html is missing. ' +
'Run vulcanize_trace_viewer from $TRACE_VIEWER and reload.';
});
}
</script>
<link rel="import" href="trace_viewer_full.html" onerror="onTraceViewerImportFail(event)">
<style>
html,
body {
box-sizing: border-box;
overflow: hidden;
margin: 0px;
padding: 0;
width: 100%;
height: 100%;
}
#trace-viewer {
width: 100%;
height: 100%;
}
#trace-viewer:focus {
outline: none;
}
</style>
<script>
'use strict';
(function () {
let viewer;
let name;
let model;
// You can set this to true if you want to hide the WebComponentsV0 polyfill
// warning.
window.__hideTraceViewerPolyfillWarning = true;
window.addEventListener("message", event => {
const data = event.data || {}
// console.log(data)
// name = data.name || 'unknown'
console.log('datas',data)
// name = data.name || 'unknown'
name = 'traceViewers'
onResult(data.data)
})
function onResult(result) {
model = new tr.Model();
const i = new tr.importer.Import(model);
const p = i.importTracesWithProgressDialog([result]);
p.then(onModelLoaded, onImportFail);
}
function onModelLoaded() {
viewer.model = model;
viewer.viewTitle = name;
}
function onImportFail() {
const overlay = new tr.ui.b.Overlay();
overlay.textContent = `Import '${name}' failed`;
overlay.title = 'Import error';
overlay.visible = true;
}
document.addEventListener('WebComponentsReady', function () {
const container = document.createElement('track-view-container');
container.id = 'track_view_container';
viewer = document.createElement('tr-ui-timeline-view');
viewer.track_view_container = container;
Polymer.dom(viewer).appendChild(container);
viewer.id = 'trace-viewer';
viewer.globalMode = true;
Polymer.dom(document.body).appendChild(viewer);
if (window.parent) {
window.parent.postMessage({ msg: 'ready' }, '*')
}
});
}());
</script>
</head>
<body>
</body>
</html>
frontend/packages/core/public/static/trace_viewer_full.html 0 → 100644
浏览文件 @ 4a2b1b67
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
frontend/packages/core/snowpack.config.js
浏览文件 @ 4a2b1b67
...@@ -37,6 +37,7 @@ function isWorkspace() { ...@@ -37,6 +37,7 @@ function isWorkspace() {
const iconsPath = path.dirname(resolve.sync(cwd, '@visualdl/icons')); const iconsPath = path.dirname(resolve.sync(cwd, '@visualdl/icons'));
const netronPath = path.dirname(resolve.sync(cwd, '@visualdl/netron')); const netronPath = path.dirname(resolve.sync(cwd, '@visualdl/netron'));
const TracePath = path.dirname(resolve.sync(cwd, './public/static'));
const wasmPath = path.dirname(resolve.sync(cwd, '@visualdl/wasm')); const wasmPath = path.dirname(resolve.sync(cwd, '@visualdl/wasm'));
const dest = path.resolve(cwd, './dist/__snowpack__/link/packages'); const dest = path.resolve(cwd, './dist/__snowpack__/link/packages');
...@@ -65,6 +66,8 @@ export default { ...@@ -65,6 +66,8 @@ export default {
plugins: [ plugins: [
'@snowpack/plugin-react-refresh', '@snowpack/plugin-react-refresh',
'@snowpack/plugin-dotenv', '@snowpack/plugin-dotenv',
'snowpack-plugin-less',
'@snowpack/plugin-sass',
[ [
'@snowpack/plugin-typescript', '@snowpack/plugin-typescript',
{ {
...@@ -97,6 +100,10 @@ export default { ...@@ -97,6 +100,10 @@ export default {
source: [path.join(netronPath, '**/*')], source: [path.join(netronPath, '**/*')],
destination: path.join(dest, 'netron/dist') destination: path.join(dest, 'netron/dist')
}, },
{
source: [path.join(TracePath, '**/*')],
destination: path.join(dest, 'trace/dist')
},
{ {
source: [path.join(wasmPath, '*.{js,wasm}')], source: [path.join(wasmPath, '*.{js,wasm}')],
destination: path.join(dest, 'wasm/dist') destination: path.join(dest, 'wasm/dist')
...@@ -111,7 +118,8 @@ export default { ...@@ -111,7 +118,8 @@ export default {
}, },
packageOptions: { packageOptions: {
polyfillNode: true, polyfillNode: true,
knownEntrypoints: ['chai', '@testing-library/react', 'fetch-mock/esm/client', 'react-is'] // knownEntrypoints: ['chai', '@testing-library/react', 'fetch-mock/esm/client', 'react-is','rc-util/es/hooks/useId','rc-util/es/Portal','rc-util/es/Dom/contains','rc-util/es/Dom/css','rc-util/es/getScrollBarSize','rc-util/es/PortalWrapper','rc-select/es/hooks/useId','rc-util/es/Dom/isVisible','rc-util/es/Dom/focus','rc-util/es/Dom/focus']
knownEntrypoints: ['chai', '@testing-library/react', 'fetch-mock/esm/client', 'react-is', 'antd']
}, },
buildOptions: { buildOptions: {
out: 'dist', out: 'dist',
......
frontend/packages/core/src/App.tsx
浏览文件 @ 4a2b1b67
...@@ -15,12 +15,12 @@ ...@@ -15,12 +15,12 @@
*/ */
// cSpell:words pageview inited // cSpell:words pageview inited
import 'antd/dist/antd.css';
import React, {FunctionComponent, Suspense, useCallback, useEffect, useMemo} from 'react'; import React, {FunctionComponent, Suspense, useCallback, useEffect, useMemo} from 'react';
import {Redirect, Route, BrowserRouter as Router, Switch, useLocation} from 'react-router-dom'; import {Redirect, Route, BrowserRouter as Router, Switch, useLocation} from 'react-router-dom';
import {THEME, matchMedia} from '~/utils/theme'; import {THEME, matchMedia} from '~/utils/theme';
import {actions, selectors} from '~/store'; import {actions, selectors} from '~/store';
import {headerHeight, position, size, zIndexes} from '~/utils/style'; import {headerHeight, position, size, zIndexes, setRem} from '~/utils/style';
import {useDispatch, useSelector} from 'react-redux'; import {useDispatch, useSelector} from 'react-redux';
import ErrorBoundary from '~/components/ErrorBoundary'; import ErrorBoundary from '~/components/ErrorBoundary';
...@@ -93,7 +93,12 @@ const App: FunctionComponent = () => { ...@@ -93,7 +93,12 @@ const App: FunctionComponent = () => {
}, },
[dispatch, selectedTheme] [dispatch, selectedTheme]
); );
// useEffect(() => {
// setRem();
// window.onresize = function () {
// setRem();
// };
// }, []);
useEffect(() => { useEffect(() => {
if (!THEME) { if (!THEME) {
matchMedia.addEventListener('change', toggleTheme); matchMedia.addEventListener('change', toggleTheme);
......
frontend/packages/core/src/assets/images/hover.svg 0 → 100644
浏览文件 @ 4a2b1b67
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill="#2932E1" d="M7,0 L7,0 C3.13400755,0 0,3.13400755 0,7 C0,7 0,7 0,7 L0,7 C0,10.8660098 3.13400755,14.0000173 7,14.0000173 L7,14.0000173 C10.8660084,14.0000173 14.000016,10.8660098 14.000016,7 L14.000016,7 C14.000016,3.13400861 10.8660084,0 7,0 L7,0 Z M6.88930852,9.94833549 C7.21622667,9.93576419 7.4914375,10.1905932 7.50400904,10.5175113 L7.50400904,10.5175113 L7.50400904,10.5630368 C7.49143774,10.889955 7.21622667,11.1447842 6.88930852,11.1322127 C6.56239037,11.1196414 6.30756117,10.8444303 6.32013266,10.5175122 L6.32013266,10.5175122 L6.33060888,10.4267388 C6.38223791,10.1609864 6.61095033,9.95903965 6.88930852,9.94833549 Z M6.9921336,2.8909989 C7.68252171,2.88978156 8.34332932,3.17117818 8.82088573,3.66975376 C9.26013624,4.1326293 9.4841365,4.72762999 9.45088646,5.34538071 C9.41763643,5.97800645 9.2233862,6.47763203 8.25213507,7.44800816 C7.80955955,7.89058367 7.51369546,8.23393407 7.43598487,8.5348303 L7.41825909,8.63363464 C7.39588787,8.85742952 7.22604721,9.0338123 7.01087397,9.07031116 L6.929,9.077 L6.88013332,9.07463556 C6.60994121,9.04746842 6.41268863,8.80677451 6.43913281,8.53650993 C6.50563288,7.85400914 7.00613347,7.3027585 7.55738411,6.75150786 C8.38667919,5.92221277 8.44786265,5.62462765 8.46532207,5.3451887 L8.4682602,5.29288053 C8.48225838,4.99167784 8.38830495,4.69712169 8.20611596,4.46089356 L8.10775983,4.34787949 C7.81734836,4.04532465 7.41588559,3.87462425 6.99650854,3.87537894 L6.99475857,3.87537894 C6.23199702,3.87764582 5.60604809,4.45989683 5.53424846,5.20405559 L5.52738186,5.34538065 C5.52738186,5.61720929 5.30702243,5.83756872 5.03519379,5.83756872 C4.76336515,5.83756872 4.54300572,5.61720929 4.54300572,5.34538065 C4.54300572,4.75554246 4.74854346,4.19830682 5.12708727,3.7553218 L5.25963149,3.6120037 C5.67192267,3.19623274 6.21843686,2.94437592 6.79789833,2.898576 L6.9921336,2.8909989 Z"/></svg>
\ No newline at end of file
frontend/packages/core/src/assets/images/leftClick.svg 0 → 100644
浏览文件 @ 4a2b1b67
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 14 0)"><circle cx="7" cy="7" r="7" fill="#F3F8FE"/><polygon fill="#666" points="8.281 7 5 10 5.547 10.5 9.375 7 5.547 3.5 5 4"/></g></svg>
\ No newline at end of file
frontend/packages/core/src/assets/images/question-circle.svg 0 → 100644
浏览文件 @ 4a2b1b67
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path d="M14.45 24v0c-0.001 0.015-0.001 0.032-0.001 0.050 0 0.746 0.605 1.351 1.351 1.351 0.729 0 1.322-0.577 1.35-1.298l0-0.003v-0.1c0-0.746-0.604-1.35-1.35-1.35s-1.35 0.604-1.35 1.35v0zM15.84 20.71h-0.11c-0.568-0.060-1.006-0.536-1.006-1.114 0-0.041 0.002-0.081 0.006-0.121l-0 0.005c0.15-1.56 1.29-2.82 2.55-4.080 2-2 2.050-2.65 2.090-3.33 0.002-0.035 0.002-0.077 0.002-0.118 0-0.795-0.318-1.516-0.833-2.042l0 0.001c-0.639-0.648-1.527-1.050-2.508-1.050-0.011 0-0.022 0-0.034 0h0.002c-1.853 0.006-3.354 1.507-3.36 3.359v0.001c-0.056 0.577-0.538 1.024-1.125 1.024s-1.069-0.447-1.125-1.019l-0-0.005c-0-0.021-0-0.045-0-0.069 0-1.537 0.627-2.928 1.64-3.93l0-0c1.008-1.019 2.407-1.65 3.953-1.65 0.017 0 0.033 0 0.049 0l-0.003-0c0.002 0 0.005 0 0.008 0 1.639 0 3.119 0.682 4.17 1.778l0.002 0.002c0.895 0.917 1.447 2.171 1.447 3.555 0 0.097-0.003 0.193-0.008 0.288l0.001-0.013c-0.070 1.44-0.52 2.59-2.74 4.8-1.17 1.17-1.91 2.020-1.91 2.75-0.072 0.563-0.545 0.994-1.119 1h-0.001zM25.72 25.71v0c-2.476 2.472-5.895 4-9.671 4-0.017 0-0.035-0-0.052-0h0.003c-0.017 0-0.037 0-0.058 0-3.773 0-7.189-1.529-9.662-4l0 0c-2.472-2.482-4-5.906-4-9.687 0-0.015 0-0.030 0-0.045v0.002c0.031-7.57 6.175-13.695 13.75-13.695 3.781 0 7.205 1.526 9.691 3.996l-0.001-0.001c2.472 2.476 4 5.895 4 9.671 0 0.017-0 0.035-0 0.052v-0.003c0 0.021 0 0.045 0 0.070 0 3.769-1.529 7.181-4 9.65l-0 0zM16 0v0c-8.837 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163 16-16v0c0-8.837-7.163-16-16-16v0z"></path>
</svg>
frontend/packages/core/src/assets/images/rightClick.svg 0 → 100644
浏览文件 @ 4a2b1b67
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill="none" fill-rule="evenodd"><circle cx="7" cy="7" r="7" fill="#F3F8FE"/><polygon fill="#666" points="8.281 7 5 10 5.547 10.5 9.375 7 5.547 3.5 5 4"/></g></svg>
\ No newline at end of file
frontend/packages/core/src/assets/images/右-默认.svg 0 → 100644
浏览文件 @ 4a2b1b67
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill="none" fill-rule="evenodd"><circle cx="7" cy="7" r="7" fill="#F3F8FE"/><polygon fill="#DDD" points="8.281 7 5 10 5.547 10.5 9.375 7 5.547 3.5 5 4"/></g></svg>
\ No newline at end of file
frontend/packages/core/src/assets/images/左-默认.svg 0 → 100644
浏览文件 @ 4a2b1b67
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 14 0)"><circle cx="7" cy="7" r="7" fill="#F3F8FE"/><polygon fill="#DDD" points="8.281 7 5 10 5.547 10.5 9.375 7 5.547 3.5 5 4"/></g></svg>
\ No newline at end of file
frontend/packages/core/src/assets/images/默认.svg 0 → 100644
浏览文件 @ 4a2b1b67
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill="#999" d="M7,0 L7,0 C3.13400755,0 0,3.13400755 0,7 C0,7 0,7 0,7 L0,7 C0,10.8660098 3.13400755,14.0000173 7,14.0000173 L7,14.0000173 C10.8660084,14.0000173 14.000016,10.8660098 14.000016,7 L14.000016,7 C14.000016,3.13400861 10.8660084,0 7,0 L7,0 Z M11.2525134,11.2525131 L11.2525135,11.252513 C10.7048627,11.8023117 10.0555162,12.2403604 9.3406363,12.5422645 C8.59951044,12.8572648 7.81200953,13.0156582 7.00000858,13.0156582 L7.00000849,13.0156582 C5.40441679,13.0195737 3.8734111,12.3857487 2.74750354,11.255138 L2.74750336,11.2551378 C2.1976117,10.7072286 1.75955748,10.0575786 1.45775186,9.34238556 L1.45775216,9.34238626 C1.14368421,8.60148325 0.982666252,7.80472237 0.98435912,7.00000854 L0.98435912,6.9999854 C0.980679249,5.40427065 1.61483393,3.87323762 2.74576591,2.74748045 L2.74576566,2.7474807 C3.29341649,2.19768201 3.94276295,1.75963326 4.65764288,1.4577292 L4.65764309,1.45772911 C5.398542,1.14366937 6.19529332,0.982655511 7.00000714,0.98435248 L7.0000074,0.98435248 C8.59572214,0.980666565 10.1267552,1.61481504 11.2525123,2.74574565 L11.2525123,2.74574559 C11.802311,3.29339642 12.2403597,3.94274288 12.5422638,4.65762281 C12.8572642,5.40049868 13.0156535,6.18799959 13.0156535,7.00000054 L13.0156535,7.00011144 C13.0190805,8.59596291 12.384582,10.1269959 11.2533055,11.252589 L11.2525134,11.2525131 Z M6.93000837,9.07726056 L6.88013331,9.07463556 L6.88013332,9.07463556 C6.60994121,9.04746842 6.41268863,8.80677451 6.43913281,8.53650993 C6.50563288,7.85400914 7.00613347,7.3027585 7.55738411,6.75150786 C8.43851013,5.87038183 8.45251015,5.5895065 8.46826017,5.29288116 L8.4682602,5.29288053 C8.48459141,4.94147739 8.35398848,4.59912094 8.10775978,4.34787943 L8.10775983,4.34787949 C7.81734836,4.04532465 7.41588559,3.87462425 6.99650854,3.87537894 L6.99475854,3.87537894 L6.99475857,3.87537894 C6.18432442,3.8777875 5.52833889,4.53494377 5.52738186,5.34538065 L5.52738186,5.34538065 C5.52738186,5.61720929 5.30702243,5.83756872 5.03519379,5.83756872 C4.76336515,5.83756872 4.54300572,5.61720929 4.54300572,5.34538065 C4.54300572,4.69000489 4.79675601,4.07487917 5.25963155,3.61200363 L5.25963149,3.6120037 C5.7177328,3.15003597 6.34154154,2.89043137 6.9921335,2.8909989 L6.9921336,2.8909989 C7.68252171,2.88978156 8.34332932,3.17117818 8.82088573,3.66975376 C9.26013624,4.1326293 9.4841365,4.72762999 9.45088646,5.34538071 C9.41763643,5.97800645 9.2233862,6.47763203 8.25213507,7.44800816 C7.7603845,7.93975873 7.44975914,8.30900916 7.4182591,8.63363454 L7.41825909,8.63363464 C7.39309146,8.88540388 7.18128284,9.07716719 6.92825852,9.07726056 L6.93000837,9.07726056 Z M6.32013266,10.5175122 L6.32013266,10.5175122 C6.30756117,10.8444303 6.56239037,11.1196414 6.88930852,11.1322127 C7.21622667,11.1447842 7.49143774,10.889955 7.50400904,10.5630368 C7.50459238,10.5478673 7.50459238,10.532681 7.50400905,10.5175115 L7.50400904,10.5175113 C7.4914375,10.1905932 7.21622667,9.93576419 6.88930852,9.94833549 C6.58002164,9.960229 6.33202584,10.2082245 6.32013266,10.5175113 L6.32013266,10.5175122 Z"/></svg>
\ No newline at end of file
frontend/packages/core/src/components/BarChart.tsx
浏览文件 @ 4a2b1b67
...@@ -20,16 +20,16 @@ import React, {useEffect, useImperativeHandle} from 'react'; ...@@ -20,16 +20,16 @@ import React, {useEffect, useImperativeHandle} from 'react';
import {WithStyled, primaryColor} from '~/utils/style'; import {WithStyled, primaryColor} from '~/utils/style';
import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts'; import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts';
import type {EChartOption} from 'echarts'; import type {EChartsOption} from 'echarts';
import GridLoader from 'react-spinners/GridLoader'; import GridLoader from 'react-spinners/GridLoader';
import defaultsDeep from 'lodash/defaultsDeep'; import defaultsDeep from 'lodash/defaultsDeep';
type BarChartProps = { type BarChartProps = {
options?: EChartOption; options?: EChartsOption;
title?: string; title?: string;
direction?: 'vertical' | 'horizontal'; direction?: 'vertical' | 'horizontal';
categories?: string[]; categories?: string[];
data?: Partial<NonNullable<EChartOption<EChartOption.SeriesBar>['series']>>; data?: any;
loading?: boolean; loading?: boolean;
onInit?: Options['onInit']; onInit?: Options['onInit'];
}; };
...@@ -74,15 +74,7 @@ const BarChart = React.forwardRef<BarChartRef, BarChartProps & WithStyled>( ...@@ -74,15 +74,7 @@ const BarChart = React.forwardRef<BarChartRef, BarChartProps & WithStyled>(
formatter: null formatter: null
} }
}; };
const seriesData = data?.map((item: any, index: number) =>
const chartOptions: EChartOption = defaultsDeep(
{
title: {
text: title ?? ''
},
xAxis: isHorizontal ? valueAxis : categoryAxis,
yAxis: isHorizontal ? categoryAxis : valueAxis,
series: data?.map((item, index) =>
defaultsDeep( defaultsDeep(
item, item,
{ {
...@@ -92,7 +84,15 @@ const BarChart = React.forwardRef<BarChartRef, BarChartProps & WithStyled>( ...@@ -92,7 +84,15 @@ const BarChart = React.forwardRef<BarChartRef, BarChartProps & WithStyled>(
}, },
series series
) )
) );
const chartOptions: EChartsOption = defaultsDeep(
{
title: {
text: title ?? ''
},
xAxis: isHorizontal ? valueAxis : categoryAxis,
yAxis: isHorizontal ? categoryAxis : valueAxis,
series: seriesData
}, },
options, options,
theme, theme,
......
frontend/packages/core/src/components/BarsChart.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/* eslint-disable sort-imports */
/**
* Copyright 2020 Baidu Inc. All Rights Reserved.
*
* 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 * as chart from '~/utils/chart';
import React, {useEffect, useImperativeHandle} from 'react';
import {primaryColor} from '~/utils/style';
import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts';
import type {EChartsOption} from 'echarts';
import GridLoader from 'react-spinners/GridLoader';
import defaultsDeep from 'lodash/defaultsDeep';
import {useTranslation} from 'react-i18next';
interface Callingtimes {
key: string[];
value: number[];
}
type BarsChartProps = {
options?: EChartsOption;
title?: string;
data?: Callingtimes;
loading?: boolean;
zoom?: boolean;
onInit?: Options['onInit'];
className?: string;
units?: string;
isLegend?: boolean;
text?: number;
};
export enum XAxisType {
value = 'value',
log = 'log',
time = 'time'
}
export enum YAxisType {
value = 'value',
log = 'log'
}
export type BarChartRef = {
restore(): void;
saveAsImage(): void;
};
const Charts = React.forwardRef<BarChartRef, BarsChartProps>(
({options, data, title, loading, zoom, className, onInit, text, isLegend, units}, ref) => {
const {i18n} = useTranslation();
const {t} = useTranslation(['profiler', 'common']);
const {
ref: echartRef,
echart,
wrapper,
saveAsImage
} = useECharts<HTMLDivElement>({
loading: !!loading,
zoom,
autoFit: true,
onInit
});
const theme = useChartTheme();
useImperativeHandle(ref, () => ({
restore: () => {
echart?.dispatchAction({
type: 'restore'
});
},
saveAsImage: () => {
saveAsImage(title);
}
}));
useEffect(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
if (data) {
// const {} = chart;
const chartData = data;
const color = ['#2932E1', '#00CC88', '#981EFF', '#FF6D6D', '#25C9FF', '#E71ED5', '#FFAA00', '#00307D'];
const title =
text === 1
? t('Number-calls')
: text === 2
? t('duration') + `(${units})`
: t('Overall-proportion') + `(%)`;
const values = [];
for (let index = 0; index < chartData.value.length; index++) {
values.push({
value: chartData.value[index],
itemStyle: {
color: color[index]
}
});
}
const chartOptions: EChartsOption = defaultsDeep({
title: {
bottom: '5%',
left: 'center',
show: true,
text: title,
textStyle: {
color: '#666666',
fontStyle: 'PingFangSC-Regular',
fontWeight: '400',
fontSize: 12
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
extraCssText:
'padding:15px;padding-right:41px;line-height:30px;width:auto;height:auto;background:rgba(0,0,0,0.75);box-shadow:1px 5px 20px 0px rgba(1,11,19,0.2);border-radius:6px;border:none;',
formatter: function (params: any) {
let str = ''; //声明一个变量用来存储数据
str +=
'<div style="font-size:14px;color:#FFFFFF;font-weight:500;margin-left:17px;">' +
params[0].name +
'</div>';
str += '<div class="tooltipContent">';
for (let index = 0; index < params.length; index++) {
const element = params[index];
str += '<div class="tooltipitems">';
str +=
'<span style="font-size:12px;display:inline-block;margin-right:5px;width:12px;height:12px;border-radius:50%;background-color:' +
element.color +
';"></span>' +
'<span style="color: #FFFFFF;">' +
element.name +
'</span>' +
'</span> : <span style="color: #FFFFFF;">' +
element.data.value +
'</span>';
str += '</div>';
}
str += '</div>';
return str;
}
},
legend: {
show: isLegend,
data: ['Kernel', 'Memcpy', 'Memset', 'Communication', 'Runtime'],
top: 0,
right: 0,
itemGap: 20,
textStyle: {
fontSize: 14,
color: '#666666'
},
itemWidth: 17,
itemHeight: 5
},
grid: {
left: '0',
right: '0',
top: '4',
bottom: '50',
containLabel: true
},
xAxis: [
{
type: 'category',
data: chartData.key,
axisTick: {
alignWithLabel: false,
show: false
},
axisLabel: {
show: false
},
axisLine: {
lineStyle: {
color: '#CCCCCC'
}
}
}
],
yAxis: [
{
type: 'value',
axisTick: {
show: false
},
axisLabel: {
color: '#666666'
},
axisLine: {
lineStyle: {
color: '#CCCCCC'
}
}
}
],
series: [
{
type: 'bar',
barWidth: '30%',
data: values
}
]
});
echart?.setOption(chartOptions, {notMerge: true});
}
}, [options, data, title, theme, i18n.language, echart, isLegend, units, text]);
return (
<Wrapper ref={wrapper} className={className}>
{!echart && (
<div className="loading">
<GridLoader color={primaryColor} size="10px" />
</div>
)}
<div className="echarts" ref={echartRef}></div>
</Wrapper>
);
}
);
export default Charts;
frontend/packages/core/src/components/Content.tsx
浏览文件 @ 4a2b1b67
...@@ -22,6 +22,11 @@ import styled from 'styled-components'; ...@@ -22,6 +22,11 @@ import styled from 'styled-components';
const Section = styled.section` const Section = styled.section`
display: flex; display: flex;
font-family: PingFangSC-Regular;
aside {
position: static;
height: auto;
}
`; `;
const Article = styled.article` const Article = styled.article`
...@@ -40,18 +45,35 @@ const Aside = styled.aside` ...@@ -40,18 +45,35 @@ const Aside = styled.aside`
overflow-y: auto; overflow-y: auto;
${transitionProps('background-color')} ${transitionProps('background-color')}
`; `;
const ProfilerAside = styled.aside`
flex: none;
background-color: var(--background-color);
height: auto;
position: static;
overflow-x: hidden;
overflow-y: auto;
${transitionProps('background-color')}
`;
type ContentProps = { type ContentProps = {
aside?: React.ReactNode; aside?: React.ReactNode;
leftAside?: React.ReactNode; leftAside?: React.ReactNode;
loading?: boolean; loading?: boolean;
isProfiler?: boolean;
}; };
const Content: FunctionComponent<ContentProps & WithStyled> = ({children, aside, leftAside, loading, className}) => ( const Content: FunctionComponent<ContentProps & WithStyled> = ({
children,
aside,
leftAside,
loading,
className,
isProfiler
}) => (
<Section className={className}> <Section className={className}>
{leftAside && <Aside>{leftAside}</Aside>} {leftAside && <Aside>{leftAside}</Aside>}
<Article>{children}</Article> <Article>{children}</Article>
{aside && <Aside>{aside}</Aside>} {aside && isProfiler ? <ProfilerAside>{aside}</ProfilerAside> : aside ? <Aside>{aside}</Aside> : null}
{loading && <BodyLoading />} {loading && <BodyLoading />}
</Section> </Section>
); );
......
frontend/packages/core/src/components/CurvesPage/CurveChart.tsx
浏览文件 @ 4a2b1b67
...@@ -23,7 +23,7 @@ import {rem, size} from '~/utils/style'; ...@@ -23,7 +23,7 @@ import {rem, size} from '~/utils/style';
import Chart from '~/components/Chart'; import Chart from '~/components/Chart';
import {Chart as ChartLoader} from '~/components/Loader/ChartPage'; import {Chart as ChartLoader} from '~/components/Loader/ChartPage';
import ChartToolbox from '~/components/ChartToolbox'; import ChartToolbox from '~/components/ChartToolbox';
import type {EChartOption} from 'echarts'; import type {EChartsOption} from 'echarts';
import TooltipTable from '~/components/TooltipTable'; import TooltipTable from '~/components/TooltipTable';
import {cycleFetcher} from '~/utils/fetch'; import {cycleFetcher} from '~/utils/fetch';
import {format} from 'd3-format'; import {format} from 'd3-format';
...@@ -138,7 +138,7 @@ const PRCurveChart: FunctionComponent<PRCurveChartProps> = ({type, runs, tag, ru ...@@ -138,7 +138,7 @@ const PRCurveChart: FunctionComponent<PRCurveChartProps> = ({type, runs, tag, ru
); );
const formatter = useCallback( const formatter = useCallback(
(params: EChartOption.Tooltip.Format | EChartOption.Tooltip.Format[]) => { (params: any) => {
const series = Array.isArray(params) ? params[0].data : params.data; const series = Array.isArray(params) ? params[0].data : params.data;
const points = nearestPoint( const points = nearestPoint(
selectedData.map(s => s[2]), selectedData.map(s => s[2]),
......
frontend/packages/core/src/components/DistributedChart.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/**
* Copyright 2020 Baidu Inc. All Rights Reserved.
*
* 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 * as chart from '~/utils/chart';
import React, {useEffect, useCallback} from 'react';
import {primaryColor} from '~/utils/style';
import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts';
import {color} from '~/utils/chart';
import {renderToStaticMarkup} from 'react-dom/server';
import TooltipTable from '~/components/TooltipTable';
import type {EChartsOption} from 'echarts';
import GridLoader from 'react-spinners/GridLoader';
import defaultsDeep from 'lodash/defaultsDeep';
import {useTranslation} from 'react-i18next';
import type {curveType} from '~/components/ProfilerPage/MemoryView/type';
type DistributedChartProps = {
options?: EChartsOption;
titles?: string;
data?: curveType;
loading?: boolean;
zoom?: boolean;
className?: string;
onInit?: Options['onInit'];
};
type lineData = (number | string)[][];
export interface Run {
label: string;
colors: [string, string];
}
export enum XAxisType {
value = 'value',
log = 'log',
time = 'time'
}
export enum YAxisType {
value = 'value',
log = 'log'
}
export type LineChartRef = {
restore(): void;
saveAsImage(): void;
};
const DistributedChart = React.forwardRef<LineChartRef, DistributedChartProps>(
({options, data, titles, loading, zoom, className, onInit}, ref) => {
const {t} = useTranslation(['profiler', 'common']);
const {i18n} = useTranslation();
const {
ref: echartRef,
echart,
wrapper
} = useECharts<HTMLDivElement>({
loading: !!loading,
zoom,
autoFit: true,
onInit
});
const theme = useChartTheme();
const formatter = useCallback(
(params: any) => {
if (params.length) {
const n = params.length / 4 - 1;
let index = 0;
const datas: any = [];
const runs: any = [];
while (index < params.length) {
const element = params[index];
if (element) {
runs.push({label: element.seriesName, colors: [element.color]});
datas.push(element.value);
}
if (n >= 0) {
index += 1 + n;
} else {
index += 1;
}
}
const columns = [
{label: t('timestamp')},
{label: t('memory-size') + '（KB）'},
{label: t('event-name')}
];
return renderToStaticMarkup(
<TooltipTable run={t('common:runs')} runs={runs as Run[]} columns={columns} data={datas} />
);
}
},
[t]
);
useEffect(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
if (!data) {
return;
}
// debugger
const chartData = data;
const seriesData = Object.keys(data.name).map(items => {
const Data: any = data;
const series = Data[items] as lineData;
return {
name: t(items),
step: 'true',
type: 'line',
smooth: true,
showSymbol: false,
symbol: 'circle',
symbolSize: 4,
emphasis: {
focus: 'series',
itemStyle: {
opacity: 1,
borderWidth: 2,
borderColor: '#fff',
shadowColor: color[0],
shadowBlur: 2
}
},
animationDuration: 100,
data: series,
encode: {
x: [0],
y: [1]
}
};
});
if (chartData) {
const title = `Peak Memory Usage: ${titles}KB`;
const chartOptions: EChartsOption = defaultsDeep({
color: [
'#2932E1',
'#00CC88',
'#981EFF',
'#066BFF',
'#00E2FF',
'#FFAA00',
'#E71ED5',
'#FF6600',
'#0DEBB0',
'#D50505'
],
// backgroundColor: 'rgb(128, 128, 128, .04)',
title: {
top: '0',
left: '15',
show: true,
text: title,
textStyle: {
color: '#666666',
fontStyle: 'PingFangSC-Regular',
fontWeight: '400',
fontSize: 14
}
},
legend: {
type: 'plain',
top: 0,
right: 0,
itemGap: 14,
textStyle: {
fontSize: 14,
color: '#666666'
},
icon: 'path://M14.5,0h-12C1.1,0,0,1.1,0,2.5S1.1,5,2.5,5h12C15.9,5,17,3.9,17,2.5S15.9,0,14.5,0z',
itemWidth: 17,
itemHeight: 5
},
tooltip: {
trigger: 'axis',
formatter,
hideDelay: 300,
backgroundColor: 'rgba(0, 0, 0, 0.6)',
borderColor: 'rgba(0, 0, 0, 0.6)',
textStyle: {color: '#fff'},
enterable: true
},
grid: {
left: '0',
right: '20',
bottom: '0',
top: '62',
containLabel: true
},
xAxis: {
crossStyle: {
color: '#2932e1',
type: 'dashed'
},
label: {show: true},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#CCCCCC'
}
},
axisLabel: {
color: '#666666',
fontSize: 12
}
},
yAxis: {
type: 'value',
name: t('memory-usage') + '（kB)',
position: 'left',
// offset: 0,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#CCCCCC'
}
},
axisLabel: {
color: '#666666',
fontSize: 12
}
// splitNumber: 5
},
dataZoom: [
{
type: 'inside',
xAxisIndex: 0
}
],
// toolbox: {
// show: false,
// showTitle: false,
// itemSize: 0,
// feature: {
// dataZoom: {
// show: true,
// xAxisIndex: 0
// }
// }
// },
series: seriesData
});
echart?.setOption(chartOptions, {notMerge: true});
}
}, [options, data, titles, theme, i18n.language, echart, formatter, t]);
return (
<Wrapper ref={wrapper} className={className}>
{!echart && (
<div className="loading">
<GridLoader color={primaryColor} size="10px" />
</div>
)}
<div className="echarts" ref={echartRef}></div>
</Wrapper>
);
}
);
export default DistributedChart;
frontend/packages/core/src/components/HistogramPage/HistogramChart.tsx
浏览文件 @ 4a2b1b67
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
// cSpell:words npts // cSpell:words npts
import type {EChartOption, ECharts, EChartsConvertFinder} from 'echarts'; import type {EChartsOption, ECharts} from 'echarts';
import type {HistogramData, OffsetData, OverlayData, OverlayDataItem} from '~/resource/histogram'; import type {HistogramData, OffsetData, OverlayData, OverlayDataItem} from '~/resource/histogram';
import LineChart, {LineChartRef} from '~/components/LineChart'; import LineChart, {LineChartRef} from '~/components/LineChart';
import {Modes, options as chartOptions} from '~/resource/histogram'; import {Modes, options as chartOptions} from '~/resource/histogram';
...@@ -142,13 +142,13 @@ const HistogramChart: FunctionComponent<HistogramChartProps> = ({run, tag, mode, ...@@ -142,13 +142,13 @@ const HistogramChart: FunctionComponent<HistogramChartProps> = ({run, tag, mode,
const formatter = useMemo( const formatter = useMemo(
() => ({ () => ({
[Modes.Overlay]: (params: EChartOption.Tooltip.Format | EChartOption.Tooltip.Format[]) => { [Modes.Overlay]: (params: any) => {
if (!data || highlight == null) { if (!data || highlight == null) {
return ''; return '';
} }
const series = (params as EChartOption.Tooltip.Format[]).find( const series = params.find((s: any) => {
s => s.data[1] === (data as OverlayData).data[highlight][0][1] return s.data[1] === (data as OverlayData).data[highlight][0][1];
); });
return series?.seriesName ?? ''; return series?.seriesName ?? '';
}, },
[Modes.Offset]: (dot: [number, number, number]) => dot[2] [Modes.Offset]: (dot: [number, number, number]) => dot[2]
...@@ -210,15 +210,15 @@ const HistogramChart: FunctionComponent<HistogramChartProps> = ({run, tag, mode, ...@@ -210,15 +210,15 @@ const HistogramChart: FunctionComponent<HistogramChartProps> = ({run, tag, mode,
); );
const mousemove = useCallback((echarts: ECharts, {offsetX, offsetY}: {offsetX: number; offsetY: number}) => { const mousemove = useCallback((echarts: ECharts, {offsetX, offsetY}: {offsetX: number; offsetY: number}) => {
const series = echarts.getOption().series; const series: any = echarts.getOption().series;
const pt: [number, number] = [offsetX, offsetY]; const pt: [number, number] = [offsetX, offsetY];
if (series) { if (series) {
type Distance = number; type Distance = number;
type Index = number; type Index = number;
const npts: [number, number, Distance, Index][] = series.map((s, i) => const npts: [number, number, Distance, Index][] = series.map((s: any, i: number) =>
(s.data as OverlayDataItem[])?.reduce( (s.data as OverlayDataItem[])?.reduce(
(m, [, , x, y]) => { (m, [, , x, y]) => {
const px = echarts.convertToPixel('grid' as EChartsConvertFinder, [x, y]) as [number, number]; const px = echarts.convertToPixel('grid', [x, y]) as [number, number];
const d = distance(px, pt); const d = distance(px, pt);
if (d < m[2]) { if (d < m[2]) {
return [x, y, d, i]; return [x, y, d, i];
...@@ -257,8 +257,8 @@ const HistogramChart: FunctionComponent<HistogramChartProps> = ({run, tag, mode, ...@@ -257,8 +257,8 @@ const HistogramChart: FunctionComponent<HistogramChartProps> = ({run, tag, mode,
<StyledLineChart <StyledLineChart
ref={echart as React.RefObject<LineChartRef>} ref={echart as React.RefObject<LineChartRef>}
title={title} title={title}
data={chartData as EChartOption<EChartOption.SeriesLine>['series']} data={chartData}
options={options as EChartOption} options={options as EChartsOption}
loading={loading} loading={loading}
onInit={onInit} onInit={onInit}
/> />
...@@ -270,7 +270,7 @@ const HistogramChart: FunctionComponent<HistogramChartProps> = ({run, tag, mode, ...@@ -270,7 +270,7 @@ const HistogramChart: FunctionComponent<HistogramChartProps> = ({run, tag, mode,
ref={echart as React.RefObject<StackChartRef>} ref={echart as React.RefObject<StackChartRef>}
title={title} title={title}
data={chartData as StackChartProps['data']} data={chartData as StackChartProps['data']}
options={options as EChartOption} options={options as EChartsOption}
loading={loading} loading={loading}
/> />
); );
......
frontend/packages/core/src/components/HyperParameterPage/IndicatorFilter/NumberInput.tsx
浏览文件 @ 4a2b1b67
...@@ -54,6 +54,7 @@ const NumberInput: FunctionComponent<NumberInputProps & WithStyled> = ({ ...@@ -54,6 +54,7 @@ const NumberInput: FunctionComponent<NumberInputProps & WithStyled> = ({
if (Number.isNaN(v)) { if (Number.isNaN(v)) {
setInputValue(Number.isFinite(value) ? value + '' : ''); setInputValue(Number.isFinite(value) ? value + '' : '');
} else { } else {
debugger;
setInputValue(v + ''); setInputValue(v + '');
} }
}, [inputValue, value]); }, [inputValue, value]);
......
frontend/packages/core/src/components/LineChart.tsx
浏览文件 @ 4a2b1b67
/* eslint-disable sort-imports */
/** /**
* Copyright 2020 Baidu Inc. All Rights Reserved. * Copyright 2020 Baidu Inc. All Rights Reserved.
* *
...@@ -16,20 +17,20 @@ ...@@ -16,20 +17,20 @@
import * as chart from '~/utils/chart'; import * as chart from '~/utils/chart';
import React, {useEffect, useImperativeHandle} from 'react'; import React, {useEffect, useImperativeHandle, useState} from 'react';
import {WithStyled, primaryColor} from '~/utils/style'; import {WithStyled, primaryColor} from '~/utils/style';
import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts'; import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts';
import type {EChartOption} from 'echarts'; import type {EChartsOption, XAXisComponentOption, YAXisComponentOption} from 'echarts';
import GridLoader from 'react-spinners/GridLoader'; import GridLoader from 'react-spinners/GridLoader';
import defaultsDeep from 'lodash/defaultsDeep'; import defaultsDeep from 'lodash/defaultsDeep';
import {formatTime} from '~/utils'; import {formatTime} from '~/utils';
import {useTranslation} from 'react-i18next'; import {useTranslation} from 'react-i18next';
type LineChartProps = { type LineChartProps = {
options?: EChartOption; options?: EChartsOption;
title?: string; title?: string;
data?: Partial<NonNullable<EChartOption<EChartOption.SeriesLine>['series']>>; data?: any;
loading?: boolean; loading?: boolean;
zoom?: boolean; zoom?: boolean;
onInit?: Options['onInit']; onInit?: Options['onInit'];
...@@ -53,6 +54,7 @@ export type LineChartRef = { ...@@ -53,6 +54,7 @@ export type LineChartRef = {
const LineChart = React.forwardRef<LineChartRef, LineChartProps & WithStyled>( const LineChart = React.forwardRef<LineChartRef, LineChartProps & WithStyled>(
({options, data, title, loading, zoom, className, onInit}, ref) => { ({options, data, title, loading, zoom, className, onInit}, ref) => {
// const [chartOption, setchartOption] = useState<EChartsOption>();
const {i18n} = useTranslation(); const {i18n} = useTranslation();
const { const {
...@@ -79,12 +81,12 @@ const LineChart = React.forwardRef<LineChartRef, LineChartProps & WithStyled>( ...@@ -79,12 +81,12 @@ const LineChart = React.forwardRef<LineChartRef, LineChartProps & WithStyled>(
saveAsImage(title); saveAsImage(title);
} }
})); }));
useEffect(() => { useEffect(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars const {color, series, ...defaults} = chart;
const {color, colorAlt, series, ...defaults} = chart; if (!echart) {
return;
let chartOptions: EChartOption = defaultsDeep( }
let chartOptions: EChartsOption = defaultsDeep(
{ {
title: { title: {
text: title ?? '' text: title ?? ''
...@@ -98,7 +100,18 @@ const LineChart = React.forwardRef<LineChartRef, LineChartProps & WithStyled>( ...@@ -98,7 +100,18 @@ const LineChart = React.forwardRef<LineChartRef, LineChartProps & WithStyled>(
yAxis: { yAxis: {
splitNumber: 4 splitNumber: 4
}, },
series: data?.map((item, index) => toolbox: {
show: true,
showTitle: false,
itemSize: 0,
feature: {
dataZoom: {
show: true
// xAxisIndex: 0
}
}
},
series: data?.map((item: any, index: number) =>
defaultsDeep( defaultsDeep(
{ {
// show symbol if there is only one point // show symbol if there is only one point
...@@ -120,7 +133,7 @@ const LineChart = React.forwardRef<LineChartRef, LineChartProps & WithStyled>( ...@@ -120,7 +133,7 @@ const LineChart = React.forwardRef<LineChartRef, LineChartProps & WithStyled>(
theme, theme,
defaults defaults
); );
if ((chartOptions?.xAxis as EChartOption.XAxis).type === 'time') { if ((chartOptions?.xAxis as XAXisComponentOption)?.type === 'time') {
chartOptions = defaultsDeep( chartOptions = defaultsDeep(
{ {
xAxis: { xAxis: {
...@@ -132,7 +145,7 @@ const LineChart = React.forwardRef<LineChartRef, LineChartProps & WithStyled>( ...@@ -132,7 +145,7 @@ const LineChart = React.forwardRef<LineChartRef, LineChartProps & WithStyled>(
chartOptions chartOptions
); );
} }
if ((chartOptions?.yAxis as EChartOption.YAxis).type === 'time') { if ((chartOptions?.yAxis as YAXisComponentOption).type === 'time') {
chartOptions = defaultsDeep( chartOptions = defaultsDeep(
{ {
yAxis: { yAxis: {
...@@ -145,7 +158,14 @@ const LineChart = React.forwardRef<LineChartRef, LineChartProps & WithStyled>( ...@@ -145,7 +158,14 @@ const LineChart = React.forwardRef<LineChartRef, LineChartProps & WithStyled>(
); );
} }
echart?.setOption(chartOptions, {notMerge: true}); echart?.setOption(chartOptions, {notMerge: true});
}, [options, data, title, theme, i18n.language, echart]); echart?.dispatchAction({
type: 'takeGlobalCursor',
key: 'dataZoomSelect',
dataZoomSelectActive: true
});
// debugger
console.log('chartOptions', chartOptions);
}, [options, theme, data, title, i18n.language, echart]);
return ( return (
<Wrapper ref={wrapper} className={className}> <Wrapper ref={wrapper} className={className}>
......
frontend/packages/core/src/components/ProfilerPage/ComparedView/ComparedView.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable sort-imports */
/**
* Copyright 2020 Baidu Inc. All Rights Reserved.
*
* 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, {FunctionComponent, useState, useEffect, useMemo} from 'react';
import Inputs from '~/components/Input';
import type {RadioChangeEvent} from 'antd';
import PieChart from '~/components/pieChart';
import {Radio} from 'antd';
import {asideWidth, rem, primaryColor} from '~/utils/style';
import {
Configure,
EchartPie,
TableContent,
color,
Title,
Subtraction,
ViewWrapper,
RadioContent,
PieceContent,
FullWidthSelect
} from '../../components';
import styled from 'styled-components';
import {useTranslation} from 'react-i18next';
import {Table} from 'antd';
import type {ColumnsType} from 'antd/lib/table';
import {fetcher} from '~/utils/fetch';
import SearchInput from '~/components/searchInput2';
import GridLoader from 'react-spinners/GridLoader';
import type {tensorcorePie, kernelPie, tableDataType, tableEvent} from './type';
interface DataType {
key: React.Key;
name: string;
calls: number;
total_time: number;
avg_time: number;
max_time: number;
min_time: number;
ratio: number;
}
export type ComparedViewProps = {
runs: string;
views: string;
workers: string;
spans: string;
units: string;
};
asideWidth;
const Input = styled(Inputs)`
width: 100%;
height: 100%;
border: 1px solid #e0e0e0;
border-radius: 0;
text-align: center;
`;
const EchartPies = styled(EchartPie)`
height: ${rem(287)};
`;
const Titles = styled(Title)`
border-bottom: none;
margin-bottom: ${rem(0)};
`;
const TitleNav = styled.div`
display: flex;
border-bottom: 1px solid #dddddd;
`;
const PieceContents = styled(PieceContent)`
.tableContent {
position: relative;
padding-top: ${rem(0)};
border-top: 1px solid #dddddd;
.postions {
position: absolute;
top: ${rem(22)};
z-index: 10;
}
}
`;
type SelectListItem<T> = {
value: T;
label: string;
};
interface cpuData {
value: number;
name: string;
proportion: number;
}
interface tableType extends tableEvent {
key: string;
}
const ComparedView: FunctionComponent<ComparedViewProps> = ({runs, workers, spans, units}) => {
const {t} = useTranslation(['profiler', 'common']);
// const model = useRef<any>(null);
const [pieData, setPieData] = useState<cpuData[]>();
const [tensorcoreData, setTensorcoreData] = useState<cpuData[]>();
const [tableLoading, settableLoading] = useState(true);
const [tableData, setTableData] = useState<tableType[]>();
const [search, setSearch] = useState<string>('');
const [itemsList, setItemsList] = useState<SelectListItem<string>[]>();
const [group, setGroup] = useState<string>('kernel_name');
const [radioValue, setradioValue] = useState(1);
const [top, setTop] = useState(0);
useEffect(() => {
setItemsList([
{label: t('group-by-core'), value: 'kernel_name'},
{label: t('Group-operator'), value: 'kernel_name_attributes'}
]);
}, [t]);
useEffect(() => {
if (runs && workers && spans && units) {
fetcher(
'/profiler/kernel/tensorcore_pie' +
`?run=${runs}` +
`&worker=${workers}` +
`&span=${spans}` +
`&time_unit=${units}` +
`&topk=${top}`
).then((res: unknown) => {
const result = res as tensorcorePie;
const chartData: cpuData[] = [];
for (const item of result.events) {
chartData.push({
value: item.calls,
name: item.name,
proportion: item.ratio
});
}
setTensorcoreData(chartData);
});
fetcher(
'/profiler/kernel/pie' +
`?run=${runs}` +
`&worker=${workers}` +
`&span=${spans}` +
`&time_unit=${units}` +
`&topk=${top}`
).then((res: unknown) => {
const result = res as kernelPie;
const chartData: cpuData[] = [];
for (const item of result.events) {
chartData.push({
value: item.total_time,
name: item.name,
proportion: item.ratio
});
}
setPieData(chartData);
});
}
}, [runs, workers, spans, top, units]);
useEffect(() => {
if (runs && workers && spans) {
settableLoading(true);
fetcher(
'/profiler/kernel/table' +
`?run=${runs}` +
`&worker=${workers}` +
`&span=${spans}` +
`&time_unit=${units}` +
`&search_name=${search}` +
`&group_by=${group}`
).then((res: unknown) => {
const result = res as tableDataType;
const TableDatas = result.events.map((item: tableEvent) => {
if (group === 'kernel_name_attributes') {
return {
key: item.name + item.calls + item.operator + item.grid,
...item
};
} else {
return {
key: item.name,
...item
};
}
});
setTableData(TableDatas);
settableLoading(false);
});
}
}, [runs, workers, spans, search, group, units]);
const columns1 = useMemo(() => {
const columns: ColumnsType<DataType> = [
{
title: t('nuclear-name'),
dataIndex: 'name',
key: 'name',
width: 200
},
{
title: t('call-volume'),
dataIndex: 'calls',
key: 'calls',
width: 100
},
{
title: t('total-time') + `(${units})`,
dataIndex: 'total_time',
width: 130,
key: 'total_time',
sorter: (a, b) => {
return a.total_time - b.total_time;
}
},
{
title: t('average-time') + `(${units})`,
dataIndex: 'avg_time',
width: 100,
key: 'avg_time',
sorter: (a, b) => {
return a.avg_time - b.avg_time;
}
},
{
title: t('longest-time') + `(${units})`,
dataIndex: 'max_time',
width: 100,
key: 'max_time',
sorter: (a, b) => {
return a.max_time - b.max_time;
}
},
{
title: t('shortest-time') + `(${units})`,
dataIndex: 'min_time',
width: 100,
key: 'min_time',
sorter: (a, b) => {
return a.min_time - b.min_time;
}
},
{
title: t('sm-average'),
dataIndex: 'mean blocks per sm',
width: 100,
key: 'mean blocks per sm'
},
{
title: t('average-occupancy') + `%`,
dataIndex: 'mean est achieved occupancy',
width: 100,
key: 'mean est achieved occupancy'
},
{
title: t('use-tensor-core'),
dataIndex: 'tensor core used',
width: 100,
key: 'tensor core used',
render: (text: boolean) => {
if (text) {
return <div>{t('Yes')}</div>;
} else {
return <div>{t('No')}</div>;
}
}
},
{
title: t('percentage') + `%`,
dataIndex: 'ratio',
key: 'ratio',
sorter: (a, b) => {
return a.ratio - b.ratio;
}
}
];
return columns;
}, [t, units]);
const columns2: ColumnsType<DataType> = useMemo(() => {
const columns: ColumnsType<DataType> = [
{
title: t('nuclear-name'),
dataIndex: 'name',
width: 200,
key: 'name'
},
{
title: t('call-volume'),
dataIndex: 'calls',
width: 80,
key: 'calls',
sorter: (a, b) => {
return a.calls - b.calls;
}
},
{
title: t('Cor-operator'),
dataIndex: 'operator',
width: 130,
key: 'operator'
},
{
title: t('thread-grid'),
dataIndex: 'grid',
width: 130,
key: 'grid'
},
{
title: t('thread-block'),
dataIndex: 'block',
width: 130,
key: 'block'
},
{
title: t('Thread-registers'),
dataIndex: 'register per thread',
width: 130,
key: 'register per thread'
},
{
title: t('Shared-memory'),
dataIndex: 'shared memory',
width: 130,
key: 'shared memory'
},
{
title: t('total-time') + `(${units})`,
dataIndex: 'total_time',
width: 130,
key: 'total_time',
sorter: (a, b) => {
return a.total_time - b.total_time;
}
},
{
title: t('average-time') + `(${units})`,
dataIndex: 'avg_time',
width: 100,
key: 'avg_time',
sorter: (a, b) => {
return a.avg_time - b.avg_time;
}
},
{
title: t('longest-time') + `(${units})`,
dataIndex: 'max_time',
width: 100,
key: 'max_time',
sorter: (a, b) => {
return a.max_time - b.max_time;
}
},
{
title: t('shortest-time') + `(${units})`,
dataIndex: 'min_time',
width: 100,
key: 'min_time',
sorter: (a, b) => {
return a.min_time - b.min_time;
}
},
{
title: t('sm-average'),
dataIndex: 'mean blocks per sm',
width: 130,
key: 'mean blocks per sm'
},
{
title: t('average-occupancy') + `%`,
dataIndex: 'mean est achieved occupancy',
width: 100,
key: 'mean est achieved occupancy'
},
{
title: t('use-tensor-core'),
dataIndex: 'tensor core used',
width: 100,
key: 'tensor core used',
render: (text: boolean) => {
if (text) {
return <div>{t('Yes')}</div>;
} else {
return <div>{t('No')}</div>;
}
}
},
{
title: t('percentage') + `%`,
dataIndex: 'ratio',
key: 'ratio',
sorter: (a, b) => {
return a.ratio - b.ratio;
}
}
];
return columns;
}, [t, units]);
const onChange: (e: RadioChangeEvent) => void = (e: RadioChangeEvent) => {
setradioValue(e.target.value);
if (e.target.value === 1) {
setTop(0);
} else if (e.target.value === 2) {
setTop(10);
}
};
const getNAN = (val: any) => {
const t = val.charAt(0);
// 转化为数字形式--包含小数，负数
// 先把非数字的都替换掉，除了数字和.
let vals = val;
vals = vals.replace(/[^\d.]/g, '');
// 必须保证第一个为数字而不是.
vals = vals.replace(/^\./g, '');
// 保证只有出现一个.而没有多个.
vals = vals.replace(/\.{2,}/g, '.');
// 保证.只出现一次，而不能出现两次以上
vals = vals.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
// 如果第一位是负号，则允许添加
if (t === '-') {
vals = '-' + vals;
}
return vals;
};
const inputChange = (value: string) => {
const tops = getNAN(value);
console.log('tops', tops);
if (tops) {
setTop(tops);
} else {
setTop(0);
}
};
return (
<ViewWrapper>
<TitleNav>
<Titles>{t('nuclear-view')}</Titles>
<RadioContent>
<Radio.Group onChange={onChange} value={radioValue}>
<Radio value={1}>{t('show-all-kernels')}</Radio>
<Radio value={2}>{t('show-Top-kernels')}</Radio>
</Radio.Group>
{radioValue === 2 ? (
<div className="AdditionContent">
<div
className="Addition"
onClick={() => {
const tops = top + 1;
setTop(tops);
}}
>
+
</div>
<div className="input_wrapper">
{/* <Input placeholder="Basic usage" />; */}
<Input onChange={inputChange} value={top + ''} />
</div>
<Subtraction
disable={top > 1 ? true : false}
onClick={() => {
if (top > 1) {
const tops = top - 1;
setTop(tops);
}
}}
>
-
</Subtraction>
</div>
) : null}
</RadioContent>
</TitleNav>
<Configure style={{marginTop: `${rem(25)}`}}>
<div className="titleContent">
<div className="titles">
<div>{t('Kernel-profile')}</div>
</div>
</div>
<PieceContents>
<EchartPies>
<div className="wraper" style={{borderRight: '1px solid #dddddd'}}>
<PieChart
className={'Content'}
data={pieData}
color={color}
units={units}
option={{
series: [
{
right: '220',
name: 'Access From',
type: 'pie',
radius: ['63%', '88%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'center',
// textStyle: {
// fontSize: '14',
// color: '#666'
// },
formatter: function () {
const str = t('total-time'); //声明一个变量用来存储数据
return str;
}
},
labelLine: {
show: false
},
data: pieData
}
]
}}
/>
</div>
<div className="wraper">
<PieChart
className={'Content'}
data={tensorcoreData}
units={units}
option={{
series: [
{
right: '220',
name: 'Access From',
type: 'pie',
radius: ['63%', '90%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'center',
// textStyle: {
// fontSize: '14',
// color: '#666'
// },
formatter: function () {
const str = `Tensor Cores\n\n${t('Utilization')}`; //声明一个变量用来存储数据
return str;
}
},
labelLine: {
show: false
},
data: tensorcoreData
}
]
}}
color={color}
/>
</div>
</EchartPies>
</PieceContents>
</Configure>
<Configure>
<div className="titleContent" style={{marginBottom: rem(15)}}>
<div className="title">{t('Kernel-details')}</div>
<div className="searchContent">
<div className="select_wrapper">
<FullWidthSelect list={itemsList} value={group} onChange={setGroup} />
</div>
<div className="input_wrapper">
{/* <Input placeholder="Basic usage" />; */}
<SearchInput
className="search-input"
value={search}
onChange={setSearch}
placeholder={t('Search-Kernal')}
rounded
/>
</div>
</div>
</div>
<TableContent>
{tableLoading && (
<div className="loading">
<GridLoader color={primaryColor} size="10px" />
</div>
)}
{tableData && !tableLoading && (
<Table
columns={group === 'kernel_name' ? columns1 : columns2}
dataSource={tableData}
bordered
size="middle"
// pagination={false}
scroll={{x: group === 'kernel_name' ? 'calc(1200px)' : 'calc(1800px)', y: 900}}
></Table>
)}
</TableContent>
</Configure>
{/* <Model ref={model} runs={runs} views={views} workers={workers}></Model> */}
</ViewWrapper>
);
};
export default ComparedView;
frontend/packages/core/src/components/ProfilerPage/ComparedView/type.ts 0 → 100644
浏览文件 @ 4a2b1b67
export interface tensorcorePie {
column_name: string[];
events: Event[];
}
export interface Event {
name: string;
calls: number;
ratio: number;
}
export interface kernelPie {
column_name: string[];
events: kernelEvent[];
}
export interface kernelEvent {
name: string;
calls: number;
total_time: number;
avg_time: number;
max_time: number;
min_time: number;
'mean blocks per sm': number;
'mean est achieved occupancy': number;
'tensor core used': boolean;
ratio: number;
}
export interface tableDataType {
events: tableEvent[];
column_name: string[];
}
export interface tableEvent {
name: string;
calls: number;
total_time: number;
avg_time: number;
max_time: number;
min_time: number;
'mean blocks per sm': number;
'mean est achieved occupancy': number;
'tensor core used': boolean;
ratio: number;
operator?:string;
grid?:string;
}
frontend/packages/core/src/components/ProfilerPage/Distributed/Distributed.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/* eslint-disable sort-imports */
/**
* Copyright 2020 Baidu Inc. All Rights Reserved.
*
* 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, {FunctionComponent, useState, useEffect, useCallback} from 'react';
import StackColumnChart from '~/components/StackColumnChart';
import styled from 'styled-components';
import {useTranslation} from 'react-i18next';
import {fetcher} from '~/utils/fetch';
import {Configure, EchartPie, ArgumentOperation, Title, ViewWrapper, FullWidthSelect} from '../../components';
import {asideWidth, rem} from '~/utils/style';
import type {infoType, histogramType} from './type';
import {Popover} from 'antd';
import logo from '~/assets/images/question-circle.svg';
asideWidth;
const Configures = styled(Configure)`
.border {
border-top: none;
}
`;
const Card = styled.div`
width: 100%;
height: ${rem(142)};
border: 1px solid #dddddd;
font-family: PingFangSC-Regular;
font-size: ${rem(14)};
font-weight: 400;
display: flex;
.item_list {
flex: 1;
display: flex;
align-items: center;
div:nth-of-type(1) {
padding-left: ${rem(20)};
}
div:nth-of-type(3) {
border-right: none;
}
.items {
padding-left: ${rem(30)};
padding-right: ${rem(30)};
}
.items:nth-of-type(2) {
border-right: 1px solid #dddddd;
border-left: 1px solid #dddddd;
}
}
.info_list {
flex: 1;
.items:nth-of-type(1) {
margin-top: ${rem(14)};
}
.items {
display: flex;
margin-top: ${rem(8)};
justify-content: center;
.label {
width: ${rem(220)};
padding-right: ${rem(30)};
text-align: right;
color: #666666;
}
.info {
width: ${rem(220)};
text-align: left;
color: #000000;
}
}
}
`;
const EchartPies = styled(EchartPie)`
padding: ${rem(24)};
border: 1px solid #dddddd;
height: ${rem(366)};
`;
export type NuclearViewProps = {
runs: string;
views: string;
workers: string;
spans: string;
units: string;
descriptions: any;
};
type SelectListItem<T> = {
value: T;
label: string;
};
const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
const NuclearView: FunctionComponent<NuclearViewProps> = ({runs, views, workers, spans, units, descriptions}) => {
const {t} = useTranslation(['profiler', 'common']);
const [computation, setComputation] = useState<histogramType>();
const [distributedData, setDistributedData] = useState<infoType[]>();
const [stepsList, setStepsList] = useState<SelectListItem<string>[]>();
const [steps, setSteps] = useState<string>();
useEffect(() => {
if (runs && workers && spans) {
fetcher('/profiler/distributed/info' + `?run=${runs}` + `&worker=${workers}` + `&span=${spans}`).then(
(res: unknown) => {
const result = res as infoType[];
setDistributedData(result);
}
);
fetcher('/profiler/distributed/steps' + `?run=${runs}` + `&worker=${workers}` + `&span=${spans}`).then(
(res: unknown) => {
const stepData = res as string[] | number[];
const stepList = stepData.map(item => {
return {label: item + '', value: item + ''};
});
setStepsList(stepList);
setSteps(stepData[0] + '');
}
);
}
}, [runs, workers, spans]);
useEffect(() => {
if (runs && workers && spans && steps && units) {
fetcher(
'/profiler/distributed/histogram' +
`?run=${runs}` +
`&worker=${workers}` +
`&span=${spans}` +
`&step=${steps}` +
`&time_unit=${units}`
).then((res: unknown) => {
const Data = res as histogramType;
setComputation(Data);
});
}
}, [runs, workers, spans, views, steps, units]);
const gettTooltip: (name: string) => JSX.Element = useCallback(
(name: string) => {
const tooltips = (
<div
style={{
width: rem(700),
color: '#333333',
fontWeight: 400
}}
dangerouslySetInnerHTML={{__html: descriptions ? descriptions[name] : ''}}
></div>
);
return tooltips;
},
[descriptions]
);
const getPopupContainers = (trigger: any) => {
return trigger.parentElement;
};
return (
<ViewWrapper>
<Title>{t('Distribution-view')}</Title>
<Configures style={{marginTop: `${rem(24)}`}}>
<div className="titleContent">
<div className="titles">
<div>{t('Device-Information')}</div>
</div>
</div>
<div>
{distributedData &&
distributedData.map((items, index) => {
return (
<Card className={index === 1 ? 'border' : ''} key={index}>
<div className="item_list">
<div className="items">{items.worker_name}</div>
<div className="items">{items.process_id}</div>
<div className="items">{items.device_id}</div>
</div>
<div className="info_list">
<div className="items">
<div className="label">Name:</div>
<div className="info">{items.name}</div>
</div>
<div className="items">
<div className="label">Memory:</div>
<div className="info">{items.memory}</div>
</div>
<div className="items">
<div className="label">ComputeCapability:</div>
<div className="info">{items.computeCapability}</div>
</div>
<div className="items">
<div className="label">Utilization:</div>
<div className="info">{items.utilization}</div>
</div>
</div>
</Card>
);
})}
</div>
</Configures>
<Configure style={{marginBottom: `${rem(20)}`}}>
<div className="titleContent" style={{marginBottom: rem(15)}}>
<div className="titles" style={{marginBottom: `${rem(0)}`}}>
<div>{t('comparisons')}</div>
<Popover
content={gettTooltip('distributed_histogram')}
getPopupContainer={getPopupContainers}
placement="right"
>
<ArgumentOperation>
<img src={PUBLIC_PATH + logo} alt="" />
</ArgumentOperation>
</Popover>
</div>
<div className="searchContent">
<div className="select_label">{t('training-steps')}</div>
<div className="select_wrapper">
<FullWidthSelect list={stepsList} value={steps} onChange={setSteps} />
</div>
</div>
</div>
<EchartPies>
<StackColumnChart
className={'Content'}
data={computation}
isWorkerName={true}
units={units}
istotal={true}
></StackColumnChart>
</EchartPies>
</Configure>
</ViewWrapper>
);
};
export default NuclearView;
frontend/packages/core/src/components/ProfilerPage/Distributed/type.ts 0 → 100644
浏览文件 @ 4a2b1b67
export interface infoType {
worker_name: string;
process_id: string;
device_id: string;
name: string;
memory: string;
computeCapability: string;
utilization: string;
}
export interface histogramType {
order: string[];
worker_name: string[];
data: number[][];
}
frontend/packages/core/src/components/ProfilerPage/Empty.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/**
* Copyright 2020 Baidu Inc. All Rights Reserved.
*
* 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, {FunctionComponent} from 'react';
import {Trans, useTranslation} from 'react-i18next';
import Error from '~/components/Error';
const DocumentMap: Record<string, string> = {
zh: 'https://github.com/PaddlePaddle/VisualDL/blob/develop/docs/components/README_CN.md#Hparams--超参可视化',
en: 'https://github.com/PaddlePaddle/VisualDL/tree/develop/docs/components#Hparams--HyperParameters-Visualization'
};
const Empty: FunctionComponent = () => {
const {i18n} = useTranslation('hyper-parameter');
return (
<Error>
<Trans i18nKey="hyper-parameter:empty">
<h4>No Hparams Data was Found.</h4>
<p>You can try the following solutions:</p>
<ul>
<li>make sure that you have used `add_scalar` to record the metrics.</li>
<li>make sure that the `metrics_list` of `add_hparams` includes the `tag` of `add_scalar`.</li>
</ul>
<p>
For detailed tutorials, please refer to the&nbsp;
<a
href={DocumentMap[i18n.language || String(i18n.options.fallbackLng)] ?? DocumentMap.en}
target="_blank"
rel="noreferrer"
>
VisualDL Hparams Instructions
</a>
.
</p>
</Trans>
</Error>
);
};
export default Empty;
frontend/packages/core/src/components/ProfilerPage/MemoryView/MemoryView.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/**
* Copyright 2020 Baidu Inc. All Rights Reserved.
*
* 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, {FunctionComponent, useMemo, useState, useEffect} from 'react';
import DistributedChart from '~/components/DistributedChart';
import Inputs from '~/components/Input';
import {asideWidth, rem, primaryColor} from '~/utils/style';
import styled from 'styled-components';
import {useTranslation} from 'react-i18next';
import {Table} from 'antd';
import {Slider} from 'antd';
import type {ColumnsType} from 'antd/lib/table';
import {fetcher} from '~/utils/fetch';
import SearchInput from '~/components/searchInput2';
import GridLoader from 'react-spinners/GridLoader';
import {Wraper, Title, FullWidthSelect, Configure, EchartPie} from '../../components';
import type {devicesType, curveType, memory_events_type, Datum, op_memory_events_type, op_datum} from './type';
import {number} from 'echarts';
import NumberInput from '../NumberInput';
interface DataType {
key: React.Key;
MemoryType: string;
AllocatedEvent: string;
AllocatedTimestamp: number;
FreeEvent: string;
FreeTimestamp: number;
Duration: number;
Size: number;
}
interface op_table extends op_datum {
key: string;
}
interface op_DataType {
key: React.Key;
EventName: string;
MemoryType: string;
AllocationCount: number;
FreeCount: number;
AllocationSize: number;
FreeSize: number;
IncreasedSize: number;
}
export type MemoryViewProps = {
runs: string;
views: string;
workers: string;
spans: string;
units: string;
};
asideWidth;
const ViewWrapper = styled.div`
width: 100%;
height: 100%;
flex-grow: 1;
position: relative;
background-color: #fff;
`;
const TitleNav = styled.div`
display: flex;
align-items: center;
border-bottom: 1px solid #dddddd;
margin-bottom: ${rem(20)};
.searchContent {
display: flex;
align-items: center;
.select_label {
margin-right: ${rem(15)};
color: #000000;
font-size: ${rem(14)};
white-space: nowrap;
}
.select_wrapper {
width: auto;
height: ${rem(36)};
margin-right: ${rem(15)};
}
}
`;
const Titles = styled(Title)`
border-bottom: none;
margin-bottom: ${rem(0)};
`;
const Configures = styled(Configure)`
.titleContent {
margin-bottom: ${rem(15)};
.SliderContent {
display: flex;
.Slider_wrapper {
width: ${rem(160)};
align-items: center;
height: 100%;
padding-top: ${rem(12)};
.ant-slider {
margin: ${rem(0)};
}
.ant-slider-track {
background: #2932e1;
}
.ant-slider-handle {
border: solid ${rem(4)} #2932e1;
}
margin: ${rem(0)} ${rem(20)};
}
.Slider_input_content {
height: ${rem(36)};
display: flex;
border: 1px solid #dddddd;
border-radius: ${rem(4)};
padding-right: ${rem(10)};
justify-content: space-between;
// width: ${rem(88)};
.unit-number {
width: auto;
padding: ${rem(5)};
line-height: ${rem(36)};
display: flex;
align-items: center;
.wrappers {
max-width: ${rem(100)};
height: 100%;
border: none;
font-size: ${rem(14)};
}
}
.unit {
font-size: ${rem(14)};
color: #999999;
line-height: ${rem(36)};
}
}
}
}
`;
type SelectListItem<T> = {
value: T;
label: string;
};
interface tableType extends Datum {
key: string;
}
const MemoryView: FunctionComponent<MemoryViewProps> = ({runs, workers, spans, units}) => {
const {t} = useTranslation(['profiler', 'common']);
const [lineData, setLineData] = useState<curveType>();
const [search, setSearch] = useState<string>('');
const [search2, setSearch2] = useState<string>('');
const [Sliders1, setSliders1] = useState<number>(0);
const [Sliders2, setSliders2] = useState<number>(10000);
const [itemsList, setItemsList] = useState<SelectListItem<string>[]>();
const [envirements, setEnvirements] = useState<devicesType[]>();
const [tableData, settableData] = useState<tableType[]>();
const [tableLoading, settableLoading] = useState(true);
const [tableData2, settableData2] = useState<op_table[]>();
const [tableLoading2, settableLoading2] = useState(true);
const [items, setItems] = useState<string>();
const [range, setRange] = useState<number[]>([]);
const [allocation, setAllocation] = useState<string>();
useEffect(() => {
if (runs && workers && spans) {
fetcher('/profiler/memory/devices' + `?run=${runs}` + `&worker=${workers}` + `&span=${spans}`).then(
(res: unknown) => {
const result = res as devicesType[];
const itemsLists = result.map(element => {
const regex1 = /\((.+?)\)/g;
const label: string = element.device.match(regex1)![0];
const labels = label.substring(1, label.length - 1);
return {label: labels, value: element.device};
});
setEnvirements(result);
setItemsList(itemsLists);
setItems(result[0].device);
setAllocation(result[0].max_allocation_size);
}
);
}
}, [runs, workers, spans]);
useEffect(() => {
if (runs && workers && spans && items) {
fetcher(
'/profiler/memory/curve' +
`?run=${runs}` +
`&worker=${workers}` +
`&span=${spans}` +
`&device_type=${items}` +
`&time_unit=${units}`
).then((res: unknown) => {
const result = res as curveType;
setLineData(result);
});
}
}, [runs, workers, spans, units, items]);
useEffect(() => {
if (items && envirements) {
for (let index = 0; index < envirements.length; index++) {
const element = envirements[index];
if (items === element.device) {
setSliders1(element.min_size);
setSliders2(element.max_size);
setRange([element.min_size, element.max_size]);
setAllocation(element.max_allocation_size);
}
}
}
}, [items, envirements]);
useEffect(() => {
settableLoading(true);
if (runs && workers && spans && items) {
fetcher(
'/profiler/memory/memory_events' +
`?run=${runs}` +
`&worker=${workers}` +
`&span=${spans}` +
`&device_type=${items}` +
`&min_size=${Sliders1}` +
`&max_size=${Sliders2}` +
`&search_name=${search}` +
`&time_unit=${units}`
).then((res: unknown) => {
const Data = res as memory_events_type;
const result: tableType[] = Data.data.map((item, indexs) => {
return {
key: indexs + '',
...item
};
});
settableData(result);
settableLoading(false);
});
}
}, [runs, workers, spans, units, items, Sliders1, Sliders2, search]);
useEffect(() => {
settableLoading2(true);
if (runs && workers && spans && items) {
fetcher(
'/profiler/memory/op_memory_events' +
`?run=${runs}` +
`&worker=${workers}` +
`&span=${spans}` +
`&device_type=${items}` +
`&search_name=${search2}`
).then((res: unknown) => {
const Data = res as op_memory_events_type;
const result: op_table[] = Data.data.map((item, indexs) => {
return {
key: indexs + '',
...item
};
});
settableLoading2(false);
settableData2(result);
});
}
}, [runs, workers, spans, items, search2]);
const columns: ColumnsType<DataType> = useMemo(() => {
const columns: ColumnsType<DataType> = [
{
title: t('MemorAddr'),
dataIndex: 'MemoryAddr',
width: 150
},
{
title: t('storage-type'),
dataIndex: 'MemoryType',
width: 150
},
{
title: t('AllocatedEvent'),
dataIndex: 'AllocatedEvent',
width: 102,
render: text => {
if (text === 0 || text) {
return <div>{text}</div>;
} else {
return <div>{'-'}</div>;
}
}
},
{
title: t('AllocatedTimestamp') + `(${units})`,
dataIndex: 'AllocatedTimestamp',
sorter: (a, b) => {
return a.AllocatedTimestamp - b.AllocatedTimestamp;
},
width: 102,
render: text => {
if (text === 0 || text) {
return <div>{text}</div>;
} else {
return <div>{'-'}</div>;
}
}
},
{
title: t('FreeEvent'),
dataIndex: 'FreeEvent',
width: 102,
render: text => {
if (text === 0 || text) {
return <div>{text}</div>;
} else {
return <div>{'-'}</div>;
}
}
},
{
title: t('FreeTimestamp') + `(${units})`,
dataIndex: 'FreeTimestamp',
sorter: (a, b) => {
return a.FreeTimestamp - b.FreeTimestamp;
},
width: 102,
render: text => {
if (text === 0 || text) {
return <div>{text}</div>;
} else {
return <div>{'-'}</div>;
}
}
},
{
title: t('Duration') + `(${units})`,
dataIndex: 'Duration',
sorter: (a, b) => {
return a.Duration - b.Duration;
},
width: 102,
render: text => {
if (text === 0 || text) {
return <div>{text}</div>;
} else {
return <div>{'-'}</div>;
}
}
},
{
title: t('Size') + '（KB)',
dataIndex: 'Size',
sorter: (a, b) => {
return a.Size - b.Size;
},
width: 102,
render: text => {
return <div>{text}</div>;
}
}
];
return columns;
}, [t, units]);
const op_columns = useMemo(() => {
const op_columns: ColumnsType<op_DataType> = [
{
title: t('EventName'),
dataIndex: 'EventName',
width: 150
},
{
title: t('storage-type'),
dataIndex: 'MemoryType',
width: 102,
render: text => {
if (text === 0 || text) {
return <div>{text}</div>;
} else {
return <div>{'-'}</div>;
}
}
},
{
title: t('AllocationCount'),
dataIndex: 'AllocationCount',
sorter: (a, b) => {
return a.AllocationCount - b.AllocationCount;
},
width: 102,
render: text => {
if (text === 0 || text) {
return <div>{text}</div>;
} else {
return <div>{'-'}</div>;
}
}
},
{
title: t('FreeCount'),
dataIndex: 'FreeCount',
sorter: (a, b) => {
return a.FreeCount - b.FreeCount;
},
width: 102,
render: text => {
if (text === 0 || text) {
return <div>{text}</div>;
} else {
return <div>{'-'}</div>;
}
}
},
{
title: t('AllocationSize') + '(KB)',
dataIndex: 'AllocationSize',
sorter: (a, b) => {
return a.AllocationSize - b.AllocationSize;
},
width: 102,
render: text => {
if (text === 0 || text) {
return <div>{text}</div>;
} else {
return <div>{'-'}</div>;
}
}
},
{
title: t('FreeSize') + '(KB)',
dataIndex: 'FreeSize',
sorter: (a, b) => {
return a.FreeSize - b.FreeSize;
},
width: 102,
render: text => {
if (text === 0 || text) {
return <div>{text}</div>;
} else {
return <div>{'-'}</div>;
}
}
},
{
title: t('IncreasedSize') + '(KB)',
dataIndex: 'IncreasedSize',
sorter: (a, b) => {
return a.IncreasedSize - b.IncreasedSize;
},
width: 102,
render: text => {
if (text === 0 || text) {
return <div>{text}</div>;
} else {
return <div>{'-'}</div>;
}
}
}
];
return op_columns;
}, [t]);
const SliderChange = (value: number[]) => {
setSliders1(value[0]);
setSliders2(value[1]);
};
const getNAN = (val: any) => {
const t = val.charAt(0);
// 转化为数字形式--包含小数，负数
// 先把非数字的都替换掉，除了数字和.
let vals = val;
vals = vals.replace(/[^\d.]/g, '');
// 必须保证第一个为数字而不是.
vals = vals.replace(/^\./g, '');
// 保证只有出现一个.而没有多个.
vals = vals.replace(/\.{2,}/g, '.');
// 保证.只出现一次，而不能出现两次以上
vals = vals.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
// 如果第一位是负号，则允许添加
if (t === '-') {
vals = '-' + vals;
}
return vals;
};
const inputChange = (value: string) => {
const slider = getNAN(value);
console.log('slider', slider);
if (slider) {
setSliders1(slider);
} else {
setSliders1(0);
}
};
const inputChange2 = (value: string) => {
const slider = getNAN(value);
console.log('slider', slider);
if (slider) {
setSliders2(slider);
} else {
setSliders2(0);
}
};
console.log('max', Sliders1, Sliders2);
return (
<ViewWrapper>
<TitleNav>
<Titles>{t('memory-view')}</Titles>
<div className="searchContent">
<div className="select_label">{t('equipment')}</div>
<div className="select_wrapper">
<FullWidthSelect list={itemsList} value={items} onChange={setItems} />
</div>
</div>
</TitleNav>
<Configure>
<EchartPie>
<DistributedChart
className={'Content'}
data={lineData}
zoom={true}
titles={allocation}
></DistributedChart>
</EchartPie>
</Configure>
<Configures>
<div className="titleContent">
<div className="input_wrapper">
<SearchInput
className="search-input"
value={search}
onChange={setSearch}
placeholder={t('search-event-name')}
rounded
/>
</div>
<div className="SliderContent">
<div className="Slider_input_content">
<div className="unit-number">
<Inputs className="wrappers" onChange={inputChange} value={Sliders1 + ''} />
</div>
<div className="unit">KB</div>
</div>
<div className="Slider_wrapper">
<Slider
range
max={range.length && range[1]}
min={range.length && range[0]}
value={[Sliders1, Sliders2]}
onChange={SliderChange}
/>
</div>
<div className="Slider_input_content">
<div className="unit-number">
{/* {Sliders ? Sliders[1] : null} */}
<Inputs className="wrappers" onChange={inputChange2} value={Sliders2 + ''} />
</div>
<div className="unit">KB</div>
</div>
</div>
</div>
<Wraper>
{tableLoading && (
<div className="loading">
<GridLoader color={primaryColor} size="10px" />
</div>
)}
{tableData && !tableLoading && (
<Table
columns={columns}
dataSource={tableData}
bordered
size="middle"
pagination={{
showSizeChanger: true
}}
></Table>
)}
</Wraper>
</Configures>
<Configure style={{marginTop: '0px'}}>
<div className="titleContent" style={{marginBottom: rem(15)}}>
<div className="input_wrapper">
<SearchInput
className="search-input"
value={search2}
onChange={setSearch2}
placeholder={t('search-event-name')}
rounded
/>
</div>
</div>
<Wraper>
{tableLoading2 && (
<div className="loading">
<GridLoader color={primaryColor} size="10px" />
</div>
)}
{tableData2 && !tableLoading2 && (
<Table
columns={op_columns}
dataSource={tableData2}
bordered
size="middle"
pagination={{
showSizeChanger: true
}}
></Table>
)}
</Wraper>
</Configure>
</ViewWrapper>
);
};
export default MemoryView;
frontend/packages/core/src/components/ProfilerPage/MemoryView/type.ts 0 → 100644
浏览文件 @ 4a2b1b67
export interface devicesType {
device: string;
min_size: number;
max_size: number;
max_allocation_size: string;
}
export interface curveType {
name: Name;
Allocated: (number | string)[][];
Reserved: (number | string)[][];
PeakAllocated: (number | string)[][];
PeakReserved: (number | string)[][];
}
export interface Name {
Allocated: string;
Reserved: string;
PeakAllocated: string;
PeakReserved: string;
}
export interface memory_events_type {
column_name: string[];
data: Datum[];
}
export interface Datum {
MemoryType: string;
AllocatedEvent: string;
AllocatedTimestamp: number;
Duration: number;
Size: number;
FreeEvent: string;
FreeTimestamp: number;
}
export interface op_memory_events_type {
column_name: string[];
data: op_datum[];
}
export interface op_datum {
EventName: string;
MemoryType: string;
AllocationCount: number;
FreeCount: number;
AllocationSize: number;
FreeSize: number;
IncreasedSize: number;
}
frontend/packages/core/src/components/ProfilerPage/NumberInput.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/* eslint-disable react-hooks/exhaustive-deps */
/**
* Copyright 2020 Baidu Inc. All Rights Reserved.
*
* 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, {FunctionComponent, useCallback, useEffect, useState} from 'react';
import Input from '~/components/Input';
import type {WithStyled} from '~/utils/style';
interface NumberInputProps {
value?: number;
defaultValue: number;
placeholder?: string;
disabled?: boolean;
onChange?: (value: number) => unknown;
}
const NumberInput: FunctionComponent<NumberInputProps & WithStyled> = ({
value,
defaultValue,
placeholder,
className,
disabled,
onChange
}) => {
const [inputValue, setInputValue] = useState(Number.isFinite(defaultValue) ? defaultValue + '' : '');
useEffect(() => setInputValue(Number.isFinite(value) ? value + '' : ''), [value]);
useEffect(() => {
if (inputValue === '' && value !== defaultValue) {
debugger;
onChange?.(defaultValue);
return;
}
const v = inputValue;
if (!Number.isNaN(v)) {
onChange?.(Number(v));
debugger;
setInputValue(v + '');
}
}, [defaultValue, onChange, value, inputValue]);
// useEffect(()=>{
// },[inputValue])
const check = useCallback(() => {
const v = Number.parseFloat(inputValue);
if (Number.isNaN(v)) {
setInputValue(Number.isFinite(value) ? value + '' : '');
onChange?.(0);
} else {
setInputValue(v + '');
onChange?.(v);
}
}, [inputValue, onChange]);
return (
<Input
value={inputValue}
placeholder={placeholder}
disabled={disabled}
className={className}
onBlur={check}
onChange={setInputValue}
/>
);
};
export default NumberInput;
frontend/packages/core/src/components/ProfilerPage/OperatorView/OperatorView.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable sort-imports */
/**
* Copyright 2020 Baidu Inc. All Rights Reserved.
*
* 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, {FunctionComponent, useState, useEffect, useCallback} from 'react';
import type {ColumnsType} from 'antd/lib/table';
import type {RadioChangeEvent} from 'antd';
import Inputs from '~/components/Input';
import StackColumnChart from '~/components/StackColumnChart2';
import PieChart from '~/components/pieChart';
import {Radio} from 'antd';
// import Model from '~/components/ProfilerPage/model';
import Icon from '~/components/Icon';
import {primaryColor} from '~/utils/style';
import {asideWidth, rem} from '~/utils/style';
import styled from 'styled-components';
import {useTranslation} from 'react-i18next';
import {Table} from 'antd';
import GridLoader from 'react-spinners/GridLoader';
import {fetcher} from '~/utils/fetch';
import SearchInput from '~/components/searchInput2';
import {
Configure,
EchartPie,
ButtonsLeft,
ButtonsRight,
RadioButtons,
color,
Title,
Subtraction,
ViewWrapper,
RadioContent,
TableContent,
PieceContent,
FullWidthSelect
} from '../../components';
import type {operatorPie, tableType, Event, pie_expand} from './type';
interface tableTypes extends Event {
key: string;
}
export type OperatorViewProps = {
runs: string;
views: string;
workers: string;
spans: string;
units: string;
};
export interface DataType {
name: string;
calls: number;
cpu_total_time: number;
cpu_avg_time: number;
cpu_max_time: number;
cpu_min_time: number;
cpu_ratio: number;
gpu_total_time: number;
gpu_avg_time: number;
gpu_max_time: number;
gpu_min_time: number;
gpu_ratio: number;
}
asideWidth;
const Input = styled(Inputs)`
width: 100%;
height: 100%;
border: 1px solid #e0e0e0;
border-radius: 0;
text-align: center;
`;
const Titles = styled(Title)`
border-bottom: none;
margin-bottom: ${rem(0)};
`;
const TitleNav = styled.div`
display: flex;
border-bottom: 1px solid #dddddd;
`;
const PieceContents = styled(PieceContent)`
.expandChart {
position: relative;
padding-top: ${rem(0)};
border-top: 1px solid #dddddd;
.postions {
position: absolute;
top: 18px;
z-index: 10;
}
}
`;
const EchartPie4 = styled(EchartPie)`
height: ${rem(366)};
padding: ${rem(24)};
padding-bottom: ${rem(10)};
`;
type SelectListItem<T> = {
value: T;
label: string;
};
interface cpuData {
value: number;
name: string;
proportion: number;
}
const OperatorView: FunctionComponent<OperatorViewProps> = ({runs, workers, spans, units}) => {
const {t} = useTranslation(['profiler', 'common']);
// const model = useRef<any>(null);
const [cpuData, setCpuData] = useState<cpuData[]>();
const [gpuData, setGpuData] = useState<cpuData[]>();
const [tableData, setTableData] = useState<tableTypes[]>();
const [tableLoading, settableLoading] = useState(true);
const [distributed, setDistributed] = useState<pie_expand>();
const [isCPU, setIsCPU] = useState(true);
const [hasGpu, setHasGpu] = useState<boolean>(true);
const [search, setSearch] = useState<string>('');
const [isExpend, setIsExpend] = useState<boolean>(false);
const [itemsList, setItemsList] = useState<SelectListItem<string>[]>();
const [group, setGroup] = useState<string>('op_name');
const [radioValue, setradioValue] = useState(1);
const [top, setTop] = useState(0);
useEffect(() => {
setItemsList([
{label: t('By-operator-name'), value: 'op_name'},
{label: t('operator-shape'), value: 'op_name_input_shape'}
]);
}, [t]);
useEffect(() => {
if (runs && workers && spans) {
fetcher(
'/profiler/operator/pie' +
`?run=${runs}` +
`&worker=${workers}` +
`&span=${spans}` +
`&time_unit=${units}` +
`&topk=${top}`
).then((res: unknown) => {
const result = res as operatorPie;
const cpuChartData: cpuData[] = [];
const gpuChartData: cpuData[] = [];
for (const item of result.cpu) {
cpuChartData.push({
value: item.total_time,
name: item.name,
proportion: item.ratio
});
}
if (result.gpu) {
for (const item of result.gpu) {
gpuChartData.push({
value: item.total_time,
name: item.name,
proportion: item.ratio
});
}
} else {
setHasGpu(false);
}
setCpuData(cpuChartData);
setGpuData(gpuChartData);
});
}
}, [runs, workers, spans, top, units]);
useEffect(() => {
if (runs && workers && spans) {
settableLoading(true);
fetcher(
'/profiler/operator/table' +
`?run=${runs}` +
`&worker=${workers}` +
`&span=${spans}` +
`&time_unit=${units}` +
`&search_name=${search}` +
`&group_by=${group}`
).then((res: unknown) => {
const result = res as tableType;
const TableDatas: tableTypes[] = result.events.map(item => {
if (group === 'op_name_input_shape') {
return {
key: item.name + item.input_shape,
...item
};
} else {
return {
key: item.name,
...item
};
}
});
setTableData(TableDatas);
settableLoading(false);
});
}
}, [runs, workers, spans, search, group, units]);
useEffect(() => {
if (runs && workers && spans) {
const device_type = isCPU ? 'cpu' : 'gpu';
fetcher(
'/profiler/operator/pie_expand' +
`?run=${runs}` +
`&worker=${workers}` +
`&device_type=${device_type}` +
`&topk=${top}` +
`&time_unit=${units}` +
`&span=${spans}`
).then((res: unknown) => {
const Data = res as pie_expand;
setDistributed(Data);
});
}
}, [runs, workers, spans, isCPU, top, units]);
const onChange: (e: RadioChangeEvent) => void = (e: RadioChangeEvent) => {
setradioValue(e.target.value);
if (e.target.value === 1) {
setTop(0);
} else if (e.target.value === 2) {
setTop(10);
}
};
const baseColumns1: (units: string, hasGpu: boolean, group: string) => ColumnsType<DataType> = useCallback(
(units: string, hasGpu: boolean, group: string) => {
const columns: ColumnsType<DataType> = [
{
title: t('operator'),
dataIndex: 'name',
key: 'name',
render: (text: string) => <div>{text}</div>,
width: 144
},
{
title: t('call-volume'),
dataIndex: 'calls',
key: 'calls',
width: 80,
sorter: (a, b) => a.calls - b.calls
},
{
title: 'CPU',
children: [
{
title: t('total-time') + `(${units})`,
dataIndex: 'cpu_total_time',
width: 130,
key: 'cpu_total_time',
sorter: (a, b) => a.cpu_total_time - b.cpu_total_time
},
{
title: t('average-time') + `(${units})`,
dataIndex: 'cpu_avg_time',
width: 130,
key: 'cpu_avg_time',
sorter: (a, b) => {
return a.cpu_avg_time - b.cpu_avg_time;
}
},
{
title: t('longest-time') + `(${units})`,
dataIndex: 'cpu_max_time',
width: 130,
key: 'cpu_max_time',
sorter: (a, b) => a.cpu_max_time - b.cpu_max_time
},
{
title: t('shortest-time') + `(${units})`,
dataIndex: 'cpu_min_time',
width: 130,
key: 'cpu_min_time',
sorter: (a, b) => a.cpu_min_time - b.cpu_min_time
},
{
title: t('percentage') + `%`,
dataIndex: 'cpu_ratio',
key: 'cpu_ratio',
width: 130,
sorter: (a, b) => a.cpu_ratio - b.cpu_ratio
}
]
}
];
if (group === 'op_name_input_shape') {
columns.splice(1, 0, {
title: t('input-shape'),
dataIndex: 'input_shape',
width: 130,
key: 'input_shape',
// width: 150,
render: text => {
if (text?.length > 0) {
return text.map((item: string, index: number) => {
return <div key={item + index}>{item}</div>;
});
} else {
return <div>{'-'}</div>;
}
}
});
}
if (hasGpu) {
columns.push({
title: 'GPU',
children: [
{
title: t('total-time') + `(${units})`,
dataIndex: 'gpu_total_time',
width: 130,
key: 'gpu_total_time',
sorter: (a, b) => a.gpu_total_time - b.gpu_total_time
},
{
title: t('average-time') + `(${units})`,
dataIndex: 'gpu_avg_time',
width: 130,
key: 'gpu_avg_time',
sorter: (a, b) => a.gpu_avg_time - b.gpu_avg_time
},
{
title: t('longest-time') + `(${units})`,
dataIndex: 'gpu_max_time',
width: 130,
key: 'gpu_max_time',
sorter: (a, b) => a.gpu_max_time - b.gpu_max_time
},
{
title: t('shortest-time') + `(${units})`,
dataIndex: 'gpu_min_time',
width: 130,
key: 'gpu_min_time',
sorter: (a, b) => a.gpu_min_time - b.gpu_min_time
},
{
title: t('percentage') + `%`,
dataIndex: 'gpu_ratio',
key: 'gpu_ratio',
sorter: (a, b) => a.gpu_ratio - b.gpu_ratio
}
]
});
}
return columns;
},
[t]
);
const getNAN = (val: any) => {
const t = val.charAt(0);
// 转化为数字形式--包含小数，负数
// 先把非数字的都替换掉，除了数字和.
let vals = val;
vals = vals.replace(/[^\d.]/g, '');
// 必须保证第一个为数字而不是.
vals = vals.replace(/^\./g, '');
// 保证只有出现一个.而没有多个.
vals = vals.replace(/\.{2,}/g, '.');
// 保证.只出现一次，而不能出现两次以上
vals = vals.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
// 如果第一位是负号，则允许添加
if (t === '-') {
vals = '-' + vals;
}
return vals;
};
const inputChange = (value: string) => {
const tops = getNAN(value);
console.log('tops', tops);
if (tops) {
setTop(tops);
} else {
setTop(0);
}
};
return (
<ViewWrapper>
<TitleNav>
<Titles>{t('Operator-view')}</Titles>
<RadioContent>
<Radio.Group onChange={onChange} value={radioValue}>
<Radio value={1}>{t('show-all-operators')}</Radio>
<Radio value={2}>{t('show-Top-operators')}</Radio>
</Radio.Group>
{radioValue === 2 ? (
<div className="AdditionContent">
<Subtraction
disable={true}
className="Addition"
onClick={() => {
const tops = top + 1;
setTop(tops);
}}
>
+
</Subtraction>
<div className="input_wrapper">
<Input onChange={inputChange} value={top + ''} />
</div>
<Subtraction
disable={top > 1 ? true : false}
onClick={() => {
if (top > 1) {
const tops = top - 1;
setTop(tops);
}
}}
>
-
</Subtraction>
</div>
) : null}
</RadioContent>
</TitleNav>
<Configure style={{marginTop: `${rem(25)}`}}>
<div className="titleContent">
<div className="titles">
<div>{t('Time-profile')}</div>
</div>
</div>
<PieceContents>
<EchartPie style={{padding: `${rem(0)}`, paddingLeft: `${rem(0)}`}}>
<div className="wraper" style={{borderRight: '1px solid #dddddd'}}>
<PieChart className={'Content'} data={cpuData} isCpu={true} color={color} units={units} />
</div>
<div className="wraper">
<PieChart className={'Content'} data={gpuData} isCpu={false} color={color} units={units} />
</div>
</EchartPie>
<div
className={`expendContent ${isExpend ? 'is_expend' : ''}`}
onClick={() => {
setIsExpend(!isExpend);
}}
>
<div className="expendButton">{t('stage-view')}</div>
<Icon type={isExpend ? 'chevron-up' : 'chevron-down'} />
</div>
{isExpend ? (
<div className="expandChart">
{hasGpu ? (
<RadioButtons className="postions">
<ButtonsLeft
style={{borderRight: 'none'}}
onClick={() => {
setIsCPU(true);
}}
className={isCPU ? 'is_active' : ''}
>
{t('CPU-time')}
</ButtonsLeft>
<ButtonsRight
className={!isCPU ? 'is_active' : ''}
onClick={() => {
setIsCPU(false);
}}
>
{t('GPU-time')}
</ButtonsRight>
</RadioButtons>
) : (
<RadioButtons className="postions">
<ButtonsLeft>{t('CPU-time')}</ButtonsLeft>
</RadioButtons>
)}
<EchartPie4>
<StackColumnChart
className={'Content'}
data={distributed}
units={units}
></StackColumnChart>
</EchartPie4>
</div>
) : null}
</PieceContents>
</Configure>
<Configure>
<div className="titleContent" style={{marginBottom: rem(15)}}>
<div className="title">{t('Time-details')}</div>
<div className="searchContent">
<div className="select_wrapper">
<FullWidthSelect list={itemsList} value={group} onChange={setGroup} />
</div>
<div className="input_wrapper">
{/* <Input placeholder="Basic usage" />; */}
<SearchInput
className="search-input"
value={search}
onChange={setSearch}
placeholder={t('Search-operator')}
rounded
/>
</div>
</div>
</div>
<TableContent>
{tableLoading && (
<div className="loading">
<GridLoader color={primaryColor} size="10px" />
</div>
)}
{!tableLoading && (
<Table
columns={baseColumns1(units, hasGpu, group)}
dataSource={tableData}
bordered
size="middle"
scroll={{
x: group === 'op_name_input_shape' ? 'calc(700px + 63%)' : 'calc(700px + 35%)'
}}
></Table>
)}
</TableContent>
</Configure>
{/* <Model ref={model} runs={runs} views={views} workers={workers}></Model> */}
</ViewWrapper>
);
};
export default OperatorView;
frontend/packages/core/src/components/ProfilerPage/OperatorView/tools.tsx 0 → 100644
浏览文件 @ 4a2b1b67
import type {ColumnsType} from 'antd/lib/table';
import React from 'react';
import type {EChartsOption} from 'echarts';
export const options: EChartsOption = {
grid: {
left: '0',
right: '0',
bottom: '30',
top: '62',
containLabel: true
},
yAxis: {
name: ''
},
dataZoom: [
//给x轴设置滚动条
{
start: 0, //默认为0
end: 20, //默认为100
type: 'slider',
show: true,
xAxisIndex: [0],
handleSize: 0, //滑动条的 左右2个滑动条的大小
height: 8, //组件高度
left: 50, //左边的距离
right: 40, //右边的距离
bottom: 10, //右边的距离
// handleColor: '#ddd', //h滑动图标的颜色
handleStyle: {
borderColor: '#cacaca',
borderWidth: 1,
shadowBlur: 2,
// background: '#ddd',
shadowColor: '#ddd'
},
fillerColor: '#2932E1',
backgroundColor: '#ddd', //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
// handleIcon:
// 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
filterMode: 'filter'
}
]
};
frontend/packages/core/src/components/ProfilerPage/OperatorView/type.ts 0 → 100644
浏览文件 @ 4a2b1b67
export interface operatorPie {
column_name: string[];
cpu: Cpu[];
gpu: Cpu[];
}
export interface Cpu {
name: string;
calls: number;
total_time: number;
avg_time: number;
max_time: number;
min_time: number;
ratio: number;
}
export interface tableType {
events: Event[];
column_name: string[];
}
export interface Event {
name: string;
calls: number;
cpu_total_time: number;
cpu_avg_time: number;
cpu_max_time: number;
cpu_min_time: number;
cpu_ratio: number;
gpu_total_time: number;
gpu_avg_time: number;
gpu_max_time: number;
gpu_min_time: number;
gpu_ratio: number;
input_shape?: string[];
children?: Child[];
}
export interface Child {
name: string;
calls: number;
cpu_total_time: number;
cpu_avg_time: number;
cpu_max_time: number;
cpu_min_time: number;
cpu_ratio: number;
gpu_total_time: number;
gpu_avg_time: number;
gpu_max_time: number;
gpu_min_time: number;
gpu_ratio: number;
}
export interface pie_expand {
order: string[];
phase_type: string[];
data: number[][];
}
frontend/packages/core/src/components/ProfilerPage/TracingView.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
*--------------------------------------------------------------------------------------------*/
import React, {useRef, useEffect} from 'react';
import {fetcher} from '~/utils/fetch';
import {position, rem, size, primaryColor} from '~/utils/style';
import styled from 'styled-components';
import GridLoader from 'react-spinners/GridLoader';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
// import tracing from '/__snowpack__/link/packages/netron/dist/index.html';
const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
const toolboxHeight = rem(40);
const Content = styled.div`
position: relative;
height: calc(100% - ${toolboxHeight});
> .loading {
${size('100%')}
${position('absolute', 0, null, null, 0)}
display: flex;
justify-content: center;
align-items: center;
}
> iframe {
${size('100%', '100%')}
border: none;
}
> .powered-by {
display: block;
${position('absolute', null, null, rem(20), rem(30))}
color: var(--graph-copyright-color);
font-size: ${rem(14)};
user-select: none;
img {
height: 1em;
filter: var(--graph-copyright-logo-filter);
vertical-align: middle;
}
}
`;
export interface IProps {
runs: string;
workers: string;
spans: string;
views: string;
// iframeRef: React.RefObject<HTMLIFrameElement>;
}
const TracingView: React.FC<IProps> = props => {
const {runs, workers, spans, views} = props;
const iframeRef = useRef<HTMLIFrameElement>(null);
const [traceData, setTraceData] = React.useState<Promise<string> | null>(null);
const [traceViewReady, setTraceViewReady] = React.useState(false);
useEffect(() => {
if (runs && workers && spans) {
fetcher('/profiler/trace' + `?run=${runs}` + `&worker=${workers}` + `&span=${spans}`).then((res: any) => {
setTraceData(res);
});
}
}, [runs, workers, spans, views]);
React.useEffect(() => {
function callback(event: MessageEvent) {
const data = event.data || {};
if (data.msg === 'ready') {
setTraceViewReady(true);
}
}
window.addEventListener('message', callback);
return () => {
window.removeEventListener('message', callback);
};
}, []);
React.useEffect(() => {
if (traceData && traceViewReady) {
const data = JSON.stringify(traceData);
iframeRef.current?.contentWindow?.postMessage({msg: 'data', data}, '*');
iframeRef.current?.focus();
}
}, [traceData, traceViewReady]);
const SetIframeActive = () => {
iframeRef.current?.focus();
};
return (
<Content>
{!traceViewReady && (
<div className="loading">
<GridLoader color={primaryColor} size="10px" />
</div>
)}
<ClickAwayListener onClickAway={SetIframeActive}>
<iframe
ref={iframeRef}
src={PUBLIC_PATH + '/__snowpack__/link/packages/trace/dist/trace_embedding.html'}
frameBorder={0}
scrolling="no"
marginWidth={0}
marginHeight={0}
></iframe>
</ClickAwayListener>
</Content>
);
};
export default TracingView;
frontend/packages/core/src/components/ProfilerPage/overview/Environment.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/* eslint-disable sort-imports */
import React, {Fragment, FunctionComponent} from 'react';
import {rem} from '~/utils/style';
import {Configure, ArgumentOperation} from '../../components';
import {useTranslation} from 'react-i18next';
import styled from 'styled-components';
import logo from '~/assets/images/question-circle.svg';
const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
import {Popover} from 'antd';
import type {environmentType} from './types';
const Processes = styled.div`
background: #f3f8fe;
border-radius: ${rem(4)};
padding-left: ${rem(20)};
height: ${rem(60)};
display: flex;
align-items: center;
`;
const Processes_items = styled.div`
display: flex;
padding-right: ${rem(50)};
border-right: 1px solid #dddddd;
`;
const Processes_label = styled.div`
margin-right: ${rem(20)};
color: #666666;
font-size: 14px;
line-height: ${rem(30)};
`;
const Processes_content = styled.div`
font-size: 18px;
color: #333333;
line-height: ${rem(32)};
`;
const CPU = styled.div`
border: 1px solid #dddddd;
border-radius: ${rem(4)};
height: ${rem(150)};
width: 100%;
padding-top: ${rem(24)};
padding-left: ${rem(20)};
padding-bottom: ${rem(20)};
display: flex;
.CPU_content {
flex: 1;
padding-right: ${rem(30)};
border-right: 1px solid #dddddd;
}
.CPU_title {
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #333333;
text-align: left;
line-height: ${rem(16)};
font-weight: 600;
margin-bottom: ${rem(20)};
}
.GPU_content {
flex: 2;
padding-left: ${rem(20)};
padding-right: ${rem(20)};
.Gpudetail {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-family: PingFangSC-Medium;
font-size: 16px;
color: #999999;
text-align: left;
line-height: ${rem(24)};
font-weight: 500;
}
}
.GPU_title {
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #333333;
text-align: left;
line-height: ${rem(16)};
font-weight: 600;
margin-bottom: ${rem(20)};
margin-left: ${rem(49)};
display: flex;
justify-content: space-between;
.title_list {
font-size: 12px;
color: #666666;
display: flex;
.list_items {
padding-right: ${rem(10)};
padding-left: ${rem(10)};
border-right: 1px solid #dddddd;
}
}
}
.itemlist {
display: flex;
.items {
margin-right: ${rem(82)};
.percentage {
text-align: center;
font-size: 28px;
color: #333333;
}
.items_label {
font-size: 12px;
color: #999999;
text-align: center;
}
}
.items_last {
margin-right: 0px;
}
}
.GPU_itemlist {
display: flex;
.items {
flex: 1;
.percentage {
text-align: center;
font-size: 28px;
color: #333333;
}
.items_label {
font-size: ${rem(12)};
color: #999999;
text-align: center;
}
}
.itemt_last {
margin-right: 0px;
}
}
`;
export type EnvironmentProps = {
environment: environmentType;
hasGpu: boolean;
descriptions: string;
};
const Environment: FunctionComponent<EnvironmentProps> = ({environment, hasGpu, descriptions}) => {
const {t} = useTranslation(['profiler', 'common']);
const tooltips = (
<div
style={{
width: rem(700),
color: '#333333',
fontWeight: 400
}}
dangerouslySetInnerHTML={{__html: descriptions ? descriptions : ''}}
></div>
);
const getPopupContainers = (trigger: any) => {
return trigger.parentElement;
};
return (
<Fragment>
<Configure>
<div className="titleContent">
<div className="titles">
<div>{t('profiler:Configuration-details')}</div>
</div>
</div>
<Processes>
<Processes_items>
<Processes_label>{t('number-processes')}</Processes_label>
<Processes_content>{environment?.num_workers}</Processes_content>
</Processes_items>
<Processes_items style={{paddingLeft: `${rem(50)}`, borderRight: 'none'}}>
<Processes_label>{t('Equipment-type')}</Processes_label>
<Processes_content>{environment?.device_type}</Processes_content>
</Processes_items>
</Processes>
</Configure>
<Configure>
<div className="titleContent">
<div className="titles">
<div>{t('Device-Details')}</div>
<Popover
content={tooltips}
overlayClassName={'newTooltip'}
getPopupContainer={getPopupContainers}
placement="right"
>
<ArgumentOperation>
<img src={PUBLIC_PATH + logo} alt="" />
</ArgumentOperation>
</Popover>
</div>
</div>
<CPU>
<div className="CPU_content">
<div className="CPU_title">CPU</div>
<div className="itemlist">
<div className="items">
<div className="percentage">{environment?.CPU.process_utilization}%</div>
<div className="items_label">{t('Process-utilization')}</div>
</div>
<div className="items items_last">
<div className="percentage">{environment?.CPU.system_utilization}%</div>
<div className="items_label">{t('system-utilization')}</div>
</div>
</div>
</div>
{hasGpu ? (
<div className="GPU_content">
<div className="GPU_title">
<div>GPU</div>
<div className="title_list">
<div className="list_items">
{environment?.GPU?.name ? environment?.GPU?.name : '--'}
</div>
<div className="list_items">
{environment?.GPU?.memory ? environment?.GPU?.memory : '--'}
</div>
<div className="list_items" style={{borderRight: 'none'}}>
{t('computing-power')}
{environment?.GPU?.compute_capability !== undefined
? environment?.GPU?.compute_capability
: '--'}
</div>
</div>
</div>
<div className="GPU_itemlist">
<div className="items">
<div className="percentage">
{environment?.GPU?.utilization !== undefined
? environment?.GPU?.utilization + '%'
: '--'}
</div>
<div className="items_label">{t('Utilization')}</div>
</div>
<div className="items">
<div className="percentage">
{environment?.GPU?.sm_efficiency !== undefined
? environment?.GPU?.sm_efficiency + '%'
: '--'}
</div>
<div className="items_label">{t('Traffic-Processor-Efficiency')}</div>
</div>
<div className="items">
<div className="percentage">
{environment?.GPU?.achieved_occupancy !== undefined
? environment?.GPU?.achieved_occupancy + '%'
: '--'}
</div>
<div className="items_label">{t('Traffic-processor-occupancy')}</div>
</div>
<div className="items items_last">
<div className="percentage">
{environment?.GPU?.tensor_core_percentage !== undefined
? environment?.GPU?.tensor_core_percentage + '%'
: '--'}
</div>
<div className="items_label">{t('usage-time')}</div>
</div>
</div>
</div>
) : (
<div className="GPU_content">
<div className="Gpudetail">
<div>{t('NoGPUdata')}</div>
</div>
</div>
)}
</CPU>
</Configure>
</Fragment>
);
};
export default Environment;
frontend/packages/core/src/components/ProfilerPage/overview/PerformanceContent.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable sort-imports */
import React, {Fragment, FunctionComponent} from 'react';
import {rem} from '~/utils/style';
import {useTranslation} from 'react-i18next';
import styled from 'styled-components';
import BarsChart from '~/components/BarsChart';
import {Tabs} from 'antd';
import type {performanceType, Callingtimes} from './types';
const PerformanceContent = styled.div`
border: 1px solid #dddddd;
border-radius: ${rem(4)};
width: 100%;
height: ${rem(378)};
.titles {
height: ${rem(63)};
display: flex;
justify-content: flex-end;
padding-right: ${rem(30)};
.legend {
display: flex;
align-items: center;
margin-left: ${rem(20)};
.labels {
width: ${rem(17)};
height: ${rem(5)};
border-radius: ${rem(2.5)};
background: yellow;
line-height: ${rem(22)};
}
.legend_name {
margin-left: ${rem(8)};
font-family: PingFangSC-Regular;
font-size: 14px;
color: #666666;
letter-spacing: 0;
line-height: ${rem(14)};
font-weight: 400;
}
}
}
.chartContent {
width: 100%;
height: ${rem(315)};
display: flex;
padding: ${rem(0)} ${rem(24)};
.chart {
.Content {
height: 100%;
}
flex: 1;
margin-right: ${rem(43)};
}
}
`;
export type EnvironmentProps = {
performanceData: performanceType;
units: string;
};
const {TabPane} = Tabs;
const PerformanceContents: FunctionComponent<EnvironmentProps> = ({performanceData, units}) => {
const color = ['#2932E1', '#00CC88', '#981EFF', '#FF6D6D', '#25C9FF', '#E71ED5', '#FFAA00', '#00307D'];
return (
<Fragment>
<Tabs defaultActiveKey="1" centered>
{performanceData &&
performanceData.order.map((item: string, index: number) => {
return (
<TabPane tab={item} key={index}>
<PerformanceContent>
<div className="titles">
{(performanceData as any)[item]?.calling_times?.key.map(
(items: string, index: number) => {
return (
<div className="legend" key={index}>
<div
className="labels"
style={{background: `${color[index]}`}}
></div>
<div className="legend_name">{items}</div>
</div>
);
}
)}
</div>
<div className="chartContent">
<div className="chart">
<BarsChart
className={'Content'}
data={(performanceData as any)[item]?.calling_times as Callingtimes}
text={1}
isLegend={false}
></BarsChart>
</div>
<div className="chart">
<BarsChart
className={'Content'}
data={(performanceData as any)[item]?.durations as Callingtimes}
text={2}
isLegend={false}
units={units}
></BarsChart>
</div>
<div className="chart" style={{marginRight: `${rem(0)}`}}>
<BarsChart
className={'Content'}
data={(performanceData as any)[item]?.ratios as Callingtimes}
text={3}
isLegend={true}
></BarsChart>
</div>
</div>
</PerformanceContent>
</TabPane>
);
})}
</Tabs>
</Fragment>
);
};
export default PerformanceContents;
frontend/packages/core/src/components/ProfilerPage/overview/overview.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/**
* Copyright 2020 Baidu Inc. All Rights Reserved.
*
* 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, {FunctionComponent, useCallback, useEffect, useState} from 'react';
import type {ColumnsType} from 'antd/lib/table';
import PieChart from '~/components/pieChart';
import StackColumnChart from '~/components/StackColumnChart';
import Trainchart from '~/components/Trainchart';
import {fetcher} from '~/utils/fetch';
import {asideWidth, primaryColor, rem} from '~/utils/style';
import GridLoader from 'react-spinners/GridLoader';
import styled from 'styled-components';
const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
import {
Configure,
EchartPie,
ArgumentOperation,
ViewWrapper,
ButtonsLeft,
ButtonsRight,
RadioButtons,
TableContent,
Title,
PieceContent,
color2
} from '../../components';
import Environment from './Environment';
import PerformanceContent from './PerformanceContent';
import logo from '~/assets/images/question-circle.svg';
import {Popover} from 'antd';
import type {
Event,
Gpu,
Cpu,
consumingType,
distributedData,
environmentType,
performanceType,
perspectiveType,
tableType,
trainType,
DataType,
DataType2
} from './types';
import {useTranslation} from 'react-i18next';
import {Table} from 'antd';
import Icon from '~/components/Icon';
asideWidth;
const Configures = styled(Configure)`
.titleContent {
margin-bottom: ${rem(10)};
position: relative;
}
.ant-tabs-centered > .ant-tabs-nav .ant-tabs-nav-wrap:not([class*='ant-tabs-nav-wrap-ping']) {
justify-content: flex-start;
}
.ant-tabs-ink-bar {
display: none;
}
.ant-tabs-top > .ant-tabs-nav,
.ant-tabs-bottom > .ant-tabs-nav,
.ant-tabs-top > div > .ant-tabs-nav,
.ant-tabs-bottom > div > .ant-tabs-nav {
margin-bottom: 0px;
border: none;
}
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
color: #1527c2;
}
.ant-tabs-tab {
padding: ${rem(12)} 0px ${rem(23)} 0;
}
.is_active {
color: #ffffff;
background: #2932e1;
border: 1px solid rgba(41, 50, 225, 1);
}
.noGpu {
border: 1px solid rgba(221, 221, 221, 1);
border-radius: 0px ${rem(4)} ${rem(4)} 0px;
color: #cccccc;
cursor: not-allowed;
}
.postions {
position: absolute;
top: 42px;
right: 0;
z-index: 10;
}
`;
const EchartPie3 = styled(EchartPie)`
border: 1px solid #dddddd;
height: ${rem(444)};
padding: ${rem(24)};
`;
const EchartPie4 = styled(EchartPie3)`
height: ${rem(366)};
`;
export type overViewProps = {
runs: string;
views: string;
workers: string;
spans: string;
units: string;
descriptions: any;
};
interface cpuData {
value: number;
name: string;
proportion: number;
}
interface chartDataType {
gpu: cpuData[];
cpu: cpuData[];
}
type SelectListItem<T> = {
value: T;
label: string;
};
const OverView: FunctionComponent<overViewProps> = ({runs, views, workers, spans, units}) => {
const {t} = useTranslation(['profiler', 'common']);
const [environment, setEnvironment] = useState<environmentType>();
const [distributed, setDistributed] = useState<distributedData>();
const [chartData, setChartData] = useState<chartDataType>();
const [hasGpu, setHasGpu] = useState<boolean>(true);
const [performanceData, setPerformanceData] = useState<performanceType>();
const [isExpend, setIsExpend] = useState(false);
const [tableData, setTableData] = useState<tableType[] | Cpu[]>();
const [tableLoading, settableLoading] = useState(true);
const [stepsList, setStepsList] = useState<SelectListItem<string>[]>([
{label: 'cpu', value: 'cpu'},
{label: 'gpu', value: 'gpu'}
]);
const [TrainType, setTrainType] = useState<string>('cpu');
const [PerformanceType, setPerformanceType] = useState<string>('cpu');
const [tableData2, setTableData2] = useState<Event[]>();
const [tableLoading2, settableLoading2] = useState(true);
const [trainData, setTrainData] = useState<trainType>();
const [descriptions, setDescriptions] = useState<any>();
useEffect(() => {
settableLoading(true);
settableLoading2(true);
if (runs && workers && spans && units) {
// 设备详情
fetcher('/profiler/overview/environment' + `?run=${runs}` + `&worker=${workers}` + `&span=${spans}`).then(
(res: unknown) => {
const Data = res as environmentType;
setEnvironment(Data);
}
);
// 运行耗时
fetcher(
'/profiler/overview/model_perspective' +
`?run=${runs}` +
`&worker=${workers}` +
`&span=${spans}` +
`&time_unit=${units}`
).then((res: unknown) => {
const result = res as consumingType;
const tableDatas: tableType[] = [];
const data: Gpu[] = [];
const chartData: chartDataType = {
cpu: [],
gpu: []
};
if (result.gpu) {
setHasGpu(true);
for (const item of result.gpu) {
const DataTypeItem: {[key: string]: any} = {};
for (const key of result.column_name) {
if (key !== 'name' && key !== 'calls') {
const keys = 'GPU' + key;
const items = item;
DataTypeItem[keys] = items[key as keyof typeof item];
}
}
data.push(DataTypeItem as Gpu);
}
result.gpu.shift();
for (const item of result.gpu) {
chartData.gpu.push({
value: item.total_time,
name: item.name,
proportion: item.ratio
});
}
} else {
setHasGpu(false);
}
result.cpu.forEach((item: Cpu, index: number) => {
const DataTypeItem: tableType = item
? {
...item,
...data[index]
}
: item;
tableDatas.push(DataTypeItem);
});
setTableData(tableDatas);
settableLoading(false);
result.cpu.shift();
for (const item of result.cpu) {
chartData.cpu.push({
value: item.total_time,
name: item.name,
proportion: item.ratio
});
}
setChartData(chartData as chartDataType);
});
// 自定义事件耗时
fetcher(
'/profiler/overview/userdefined_perspective' +
`?run=${runs}` +
`&worker=${workers}` +
`&span=${spans}` +
`&time_unit=${units}`
).then((res: unknown) => {
const Data = res as perspectiveType;
const events = Data.events;
const TableDatas = events.map(item => {
return {
key: item.name,
...item
};
});
setTableData2(TableDatas);
settableLoading2(false);
});
// 模型各阶段消耗
fetcher(
'/profiler/overview/event_type_model_perspective' +
`?run=${runs}` +
`&worker=${workers}` +
`&span=${spans}` +
`&time_unit=${units}`
).then((res: unknown) => {
const Data = res as distributedData;
setDistributed(Data);
});
}
}, [runs, workers, spans, views, units]);
useEffect(() => {
if (runs && workers && spans && units) {
// 性能消耗
fetcher(
'/profiler/overview/event_type_perspective' +
`?run=${runs}` +
`&worker=${workers}` +
`&span=${spans}` +
`&device_type=${PerformanceType}` +
`&time_unit=${units}`
).then((res: unknown) => {
const result = res as performanceType;
setPerformanceData(result);
});
}
}, [runs, workers, spans, views, PerformanceType, units]);
useEffect(() => {
if (runs && workers && spans && units) {
// 训练步数耗时
fetcher(
'/profiler/overview/model_perspective_perstep' +
`?run=${runs}` +
`&worker=${workers}` +
`&span=${spans}` +
`&device_type=${TrainType}` +
`&time_unit=${units}`
).then((res: unknown) => {
const Data = res as trainType;
setTrainData(Data);
});
}
}, [runs, workers, spans, views, TrainType, units]);
const ConsumingColumns: (units: string, hasGpu: boolean) => ColumnsType<DataType> = useCallback(
(units: string, hasGpu: boolean) => {
const columns: ColumnsType<DataType> = [
{
title: t('stage'),
dataIndex: 'name',
key: 'name',
width: 100
// fixed: 'left',
},
{
title: t('number-calls'),
dataIndex: 'calls',
key: 'calls',
width: 100,
sorter: (a, b) => a.calls - b.calls
},
{
title: 'CPU',
children: [
{
title: t('total-time') + `(${units})`,
dataIndex: 'total_time',
key: 'total_time',
width: 150,
sorter: (a, b) => a.total_time - b.total_time
},
{
title: t('average-time') + `(${units})`,
dataIndex: 'avg_time',
key: 'avg_time',
width: 150,
sorter: (a, b) => a.avg_time - b.avg_time
},
{
title: t('longest-time') + `(${units})`,
dataIndex: 'max_time',
key: 'max_time',
width: 150,
sorter: (a, b) => a.max_time - b.max_time
},
{
title: t('shortest-time') + `(${units})`,
dataIndex: 'min_time',
key: 'min_time',
width: 150,
sorter: (a, b) => a.min_time - b.min_time
},
{
title: t('percentage') + `%`,
dataIndex: 'ratio',
key: 'ratio',
width: 150,
sorter: (a, b) => a.ratio - b.ratio
}
]
}
];
if (hasGpu) {
columns.push({
title: 'GPU',
children: [
{
title: t('total-time') + `(${units})`,
dataIndex: `GPUtotal_time`,
key: 'GPUtotal_time',
width: 150,
sorter: (a, b) => a.GPUtotal_time - b.GPUtotal_time
},
{
title: t('average-time') + `(${units})`,
dataIndex: 'GPUavg_time',
key: 'GPUavg_time',
width: 150,
sorter: (a, b) => a.GPUavg_time - b.GPUavg_time
},
{
title: t('longest-time') + `(${units})`,
dataIndex: 'GPUmax_time',
key: 'GPUmax_time',
width: 150,
sorter: (a, b) => a.GPUmax_time - b.GPUmax_time
},
{
title: t('shortest-time') + `(${units})`,
dataIndex: 'GPUmin_time',
key: 'GPUmin_time',
width: 150,
sorter: (a, b) => a.GPUmin_time - b.GPUmin_time
},
{
title: t('percentage') + `%`,
dataIndex: 'GPUratio',
key: 'GPUratio',
width: 150,
sorter: (a, b) => a.GPUratio - b.GPUratio
}
]
});
}
return columns;
},
[t]
);
const customizeColumns: (units: string, hasGpu: boolean) => ColumnsType<DataType2> = useCallback(
(units: string, hasGpu: boolean) => {
const columns2: ColumnsType<DataType2> = [
{
title: t('stage'),
dataIndex: 'name',
key: 'name',
width: 100
},
{
title: t('number-calls'),
dataIndex: 'calls',
key: 'calls',
width: 100,
sorter: (a, b) => a.calls - b.calls
},
{
title: 'CPU',
children: [
{
title: t('total-time') + `(${units})`,
dataIndex: 'cpu_total_time',
key: 'cpu_total_time',
width: 150,
sorter: (a, b) => a.cpu_total_time - b.cpu_total_time
},
{
title: t('average-time') + `(${units})`,
dataIndex: 'cpu_avg_time',
key: 'cpu_avg_time',
width: 150,
sorter: (a, b) => a.cpu_avg_time - b.cpu_avg_time
},
{
title: t('longest-time') + `(${units})`,
dataIndex: 'cpu_max_time',
key: 'cpu_max_time',
width: 150,
sorter: (a, b) => a.cpu_max_time - b.cpu_max_time
},
{
title: t('shortest-time') + `(${units})`,
dataIndex: 'cpu_min_time',
key: 'cpu_min_time',
width: 150,
sorter: (a, b) => a.cpu_min_time - b.cpu_min_time
},
{
title: t('percentage') + `%`,
dataIndex: 'cpu_ratio',
key: 'cpu_ratio',
width: 150,
sorter: (a, b) => a.cpu_ratio - b.cpu_ratio
}
]
}
];
if (hasGpu) {
columns2.push({
title: 'GPU',
children: [
{
title: t('total-time') + `(${units})`,
dataIndex: 'gpu_total_time',
key: 'gpu_total_time',
width: 150,
sorter: (a, b) => a.gpu_total_time - b.gpu_total_time
},
{
title: t('average-time') + `(${units})`,
dataIndex: 'gpu_avg_time',
key: 'gpu_avg_time',
width: 150,
sorter: (a, b) => a.gpu_avg_time - b.gpu_avg_time
},
{
title: t('longest-time') + `(${units})`,
dataIndex: 'gpu_max_time',
key: 'gpu_max_time',
width: 150,
sorter: (a, b) => a.gpu_max_time - b.gpu_max_time
},
{
title: t('shortest-time') + `(${units})`,
dataIndex: 'gpu_min_time',
key: 'gpu_min_time',
width: 150,
sorter: (a, b) => a.gpu_min_time - b.gpu_min_time
},
{
title: t('percentage') + `%`,
dataIndex: 'gpu_ratio',
key: 'gpu_ratio',
width: 150,
sorter: (a, b) => a.gpu_ratio - b.gpu_ratio
}
]
});
}
return columns2;
},
[t]
);
const gettTooltip: (name: string) => JSX.Element = useCallback(
(name: string) => {
const tooltips = (
<div
style={{
width: rem(700),
color: '#333333',
fontWeight: 400
}}
dangerouslySetInnerHTML={{__html: descriptions ? descriptions[name] : ''}}
></div>
);
return tooltips;
},
[descriptions]
);
const getPopupContainers = (trigger: any) => {
return trigger.parentElement;
};
return (
<ViewWrapper>
<Title>{t('profiler:Overview-view')}</Title>
{environment && (
<Environment
environment={environment}
hasGpu={hasGpu}
descriptions={descriptions ? descriptions['overview_environment'] : ''}
></Environment>
)}
<Configure>
<div className="titleContent">
<div className="titles">
<div>{t('profiler:time-consuming')}</div>
<Popover
content={gettTooltip('overview_model_perspective')}
getPopupContainer={getPopupContainers}
placement="right"
>
<ArgumentOperation>
<img src={PUBLIC_PATH + logo} alt="" />
</ArgumentOperation>
</Popover>
</div>
</div>
<PieceContent>
<EchartPie style={{paddingRight: `${rem(0)}`, paddingTop: `${rem(0)}`}}>
<div className="wraper" style={{borderRight: '1px solid #dddddd', marginRight: `${rem(10)}`}}>
<PieChart
className={'Content'}
data={chartData?.cpu}
isCpu={true}
color={color2}
units={units}
/>
</div>
<div className="wraper">
<PieChart
className={'Content'}
data={chartData?.gpu}
isCpu={false}
color={color2}
units={units}
/>
</div>
</EchartPie>
<div
className="expendContent"
onClick={() => {
setIsExpend(!isExpend);
}}
>
<div className="expendButton">{t('Expand-view')}</div>
<Icon type={isExpend ? 'chevron-up' : 'chevron-down'} />
</div>
{isExpend && tableData ? (
<TableContent>
{tableLoading && (
<div className="loading">
<GridLoader color={primaryColor} size="10px" />
</div>
)}
{!tableLoading && (
<Table
columns={ConsumingColumns(units, hasGpu)}
dataSource={tableData as tableType[]}
bordered
size="middle"
pagination={false}
scroll={{x: 'calc(700px + 50%)', y: 440}}
></Table>
)}
</TableContent>
) : null}
</PieceContent>
</Configure>
<Configures>
<div className="titleContent">
<div className="titles" style={{marginBottom: `${rem(0)}`}}>
<div>{t('training-step-time')}</div>
<Popover
content={gettTooltip('overview_model_perspective_perstep')}
getPopupContainer={getPopupContainers}
placement="right"
>
<ArgumentOperation>
<img src={PUBLIC_PATH + logo} alt="" />
</ArgumentOperation>
</Popover>
</div>
<RadioButtons>
<ButtonsLeft
style={{borderRight: 'none'}}
onClick={() => {
setTrainType('cpu');
}}
className={TrainType === 'cpu' ? 'is_active' : ''}
>
{t('CPU-time')}
</ButtonsLeft>
<ButtonsRight
className={hasGpu ? (TrainType === 'gpu' ? 'is_active' : '') : 'noGpu'}
onClick={() => {
if (hasGpu) {
setTrainType('gpu');
}
}}
>
{t('GPU-time')}
</ButtonsRight>
</RadioButtons>
</div>
<EchartPie3>
<Trainchart className={'Content'} data={trainData} units={units}></Trainchart>
</EchartPie3>
</Configures>
<Configures>
<div className="titleContent">
<div className="title">
<div>{t('performance-consumption')}</div>
<Popover
content={gettTooltip('overview_event_type_perspective')}
placement="right"
getPopupContainer={getPopupContainers}
>
<ArgumentOperation>
<img src={PUBLIC_PATH + logo} alt="" />
</ArgumentOperation>
</Popover>
</div>
<RadioButtons className="postions">
<ButtonsLeft
style={{borderRight: 'none'}}
onClick={() => {
setPerformanceType('cpu');
}}
className={PerformanceType === 'cpu' ? 'is_active' : ''}
>
{t('CPU-time')}
</ButtonsLeft>
<ButtonsRight
className={hasGpu ? (PerformanceType === 'gpu' ? 'is_active' : '') : 'noGpu'}
onClick={() => {
if (hasGpu) {
setPerformanceType('gpu');
}
}}
>
{t('GPU-time')}
</ButtonsRight>
</RadioButtons>
</div>
{performanceData && (
<PerformanceContent units={units} performanceData={performanceData}></PerformanceContent>
)}
</Configures>
<Configure>
<div className="titleContent">
<div className="titles">
<div>{t('consumption-distribution')}</div>
<Popover
content={gettTooltip('overview_event_type_model_perspective')}
placement="right"
getPopupContainer={getPopupContainers}
>
<ArgumentOperation>
<img src={PUBLIC_PATH + logo} alt="" />
</ArgumentOperation>
</Popover>
</div>
</div>
<EchartPie4>
<StackColumnChart className={'Content'} data={distributed} units={units}></StackColumnChart>
</EchartPie4>
</Configure>
<Configures style={{marginBottom: `${rem(20)}`}}>
<div className="titleContent">
<div className="title">{t('custom-events')}</div>
</div>
<TableContent>
{tableLoading2 && (
<div className="loading">
<GridLoader color={primaryColor} size="10px" />
</div>
)}
{!tableLoading2 && (
<Table
columns={customizeColumns(units, hasGpu)}
dataSource={tableData2}
bordered
size="middle"
pagination={false}
scroll={{x: 'calc(700px + 50%)', y: 240}}
></Table>
)}
</TableContent>
</Configures>
</ViewWrapper>
);
};
export default OverView;
frontend/packages/core/src/components/ProfilerPage/overview/tools.ts 0 → 100644
浏览文件 @ 4a2b1b67
import type {ColumnsType} from 'antd/lib/table';
import {useTranslation} from 'react-i18next';
export interface DataType {
name: string;
calls: number;
total_time: number;
max_time: number;
min_time: number;
avg_time: number;
ratio: number;
GPUtotal_time: number;
GPUmax_time: number;
GPUmin_time: number;
GPUavg_time: number;
GPUratio: number;
}
export interface DataType2 {
name: string;
calls: number;
cpu_total_time: number;
cpu_avg_time: number;
cpu_max_time: number;
cpu_min_time: number;
cpu_ratio: number;
gpu_total_time: number;
gpu_avg_time: number;
gpu_max_time: number;
gpu_min_time: number;
gpu_ratio: number;
}
export const ConsumingColumns = (units: string, hasGpu: boolean) => {
const {t} = useTranslation(['profiler', 'common']);
const columns: ColumnsType<DataType> = [
{
title: t('stage'),
dataIndex: 'name',
key: 'name',
width: 100
// fixed: 'left',
},
{
title: t('number-calls'),
dataIndex: 'calls',
key: 'calls',
width: 100,
sorter: (a, b) => a.calls - b.calls
},
{
title: 'CPU',
children: [
{
title: t('total-time') + `(${units})`,
dataIndex: 'total_time',
key: 'total_time',
width: 150,
sorter: (a, b) => a.total_time - b.total_time
},
{
title: t('average-time') + `(${units})`,
dataIndex: 'avg_time',
key: 'avg_time',
width: 150,
sorter: (a, b) => a.avg_time - b.avg_time
},
{
title: t('longest-time') + `(${units})`,
dataIndex: 'max_time',
key: 'max_time',
width: 150,
sorter: (a, b) => a.max_time - b.max_time
},
{
title: t('shortest-time') + `(${units})`,
dataIndex: 'min_time',
key: 'min_time',
width: 150,
sorter: (a, b) => a.min_time - b.min_time
},
{
title: t('percentage') + `%`,
dataIndex: 'ratio',
key: 'ratio',
width: 150,
sorter: (a, b) => a.ratio - b.ratio
}
]
}
];
if (hasGpu) {
columns.push({
title: 'GPU',
children: [
{
title: t('total-time') + `(${units})`,
dataIndex: `GPUtotal_time`,
key: 'GPUtotal_time',
width: 150,
sorter: (a, b) => a.GPUtotal_time - b.GPUtotal_time
},
{
title: t('average-time') + `(${units})`,
dataIndex: 'GPUavg_time',
key: 'GPUavg_time',
width: 150,
sorter: (a, b) => a.GPUavg_time - b.GPUavg_time
},
{
title: t('longest-time') + `(${units})`,
dataIndex: 'GPUmax_time',
key: 'GPUmax_time',
width: 150,
sorter: (a, b) => a.GPUmax_time - b.GPUmax_time
},
{
title: t('shortest-time') + `(${units})`,
dataIndex: 'GPUmin_time',
key: 'GPUmin_time',
width: 150,
sorter: (a, b) => a.GPUmin_time - b.GPUmin_time
},
{
title: t('percentage') + `%`,
dataIndex: 'GPUratio',
key: 'GPUratio',
width: 150,
sorter: (a, b) => a.GPUratio - b.GPUratio
}
]
});
}
return columns;
};
export const customizeColumns = (units: string, hasGpu: boolean) => {
const columns2: ColumnsType<DataType2> = [
{
title: '阶段',
dataIndex: 'name',
key: 'name',
width: 100
},
{
title: '调用次数',
dataIndex: 'calls',
key: 'calls',
width: 100,
sorter: (a, b) => a.calls - b.calls
},
{
title: 'CPU',
children: [
{
title: `总耗时(${units})`,
dataIndex: 'cpu_total_time',
key: 'cpu_total_time',
width: 150,
sorter: (a, b) => a.cpu_total_time - b.cpu_total_time
},
{
title: `平均耗时(${units})`,
dataIndex: 'cpu_avg_time',
key: 'cpu_avg_time',
width: 150,
sorter: (a, b) => a.cpu_avg_time - b.cpu_avg_time
},
{
title: `最长耗时(${units})`,
dataIndex: 'cpu_max_time',
key: 'cpu_max_time',
width: 150,
sorter: (a, b) => a.cpu_max_time - b.cpu_max_time
},
{
title: `最短耗时(${units})`,
dataIndex: 'cpu_min_time',
key: 'cpu_min_time',
width: 150,
sorter: (a, b) => a.cpu_min_time - b.cpu_min_time
},
{
title: '百分比%',
dataIndex: 'cpu_ratio',
key: 'cpu_ratio',
width: 150,
sorter: (a, b) => a.cpu_ratio - b.cpu_ratio
}
]
}
];
if (hasGpu) {
columns2.push({
title: 'GPU',
children: [
{
title: `总耗时(${units})`,
dataIndex: 'gpu_total_time',
key: 'gpu_total_time',
width: 150,
sorter: (a, b) => a.gpu_total_time - b.gpu_total_time
},
{
title: `平均耗时(${units})`,
dataIndex: 'gpu_avg_time',
key: 'gpu_avg_time',
width: 150,
sorter: (a, b) => a.gpu_avg_time - b.gpu_avg_time
},
{
title: `最长耗时(${units})`,
dataIndex: 'gpu_max_time',
key: 'gpu_max_time',
width: 150,
sorter: (a, b) => a.gpu_max_time - b.gpu_max_time
},
{
title: `最短耗时(${units})`,
dataIndex: 'gpu_min_time',
key: 'gpu_min_time',
width: 150,
sorter: (a, b) => a.gpu_min_time - b.gpu_min_time
},
{
title: '百分比%',
dataIndex: 'gpu_ratio',
key: 'gpu_ratio',
width: 150,
sorter: (a, b) => a.gpu_ratio - b.gpu_ratio
}
]
});
}
return columns2;
};
frontend/packages/core/src/components/ProfilerPage/overview/types.ts 0 → 100644
浏览文件 @ 4a2b1b67
export interface environmentType {
device_type: string;
CPU: CPU;
GPU: GPU;
num_workers: number;
}
interface GPU {
name: string;
memory: number;
compute_capability: string;
utilization: string;
sm_efficiency: string;
achieved_occupancy: string;
tensor_core_percentage: string;
}
interface CPU {
process_utilization: string;
system_utilization: string;
}
export interface consumingType {
column_name: string[];
cpu: Cpu[];
gpu: Cpu[];
}
export interface stringObj {
GPUname: string;
GPUcalls: number;
GPUtotal_time: string;
GPUavg_time: string;
GPUmax_time: string;
GPUmin_time: string;
GPUratio: string;
}
export interface tableType {
name: string;
calls: number;
total_time: number;
max_time: number;
min_time: number;
avg_time: number;
ratio: number;
GPUtotal_time: number;
GPUmax_time: number;
GPUmin_time: number;
GPUavg_time: number;
GPUratio: number;
}
export interface Cpu {
name: string;
calls: number;
total_time: number;
avg_time: number;
max_time: number;
min_time: number;
ratio: number;
}
export interface Gpu {
GPUtotal_time: number;
GPUmax_time: number;
GPUmin_time: number;
GPUavg_time: number;
GPUratio: number;
}
export interface trainType {
order: string[];
steps: number[];
data: number[][];
}
export interface perspectiveType {
column_name: string[];
events: Event[];
}
export interface Event {
name: string;
calls: number;
cpu_total_time: number;
cpu_avg_time: number;
cpu_max_time: number;
cpu_min_time: number;
cpu_ratio: number;
gpu_total_time: number;
gpu_avg_time: number;
gpu_max_time: number;
gpu_min_time: number;
gpu_ratio: number;
}
export interface performanceType {
order: string[];
Kernel: Kernel;
Memcpy: Kernel;
Memset: Kernel;
}
export interface Kernel {
calling_times: Callingtimes;
durations: Callingtimes;
ratios: Callingtimes;
}
export interface Callingtimes {
key: string[];
value: number[];
}
export interface distributedData {
order: string[];
phase_type: string[];
data: number[][];
}
export interface DataType {
name: string;
calls: number;
total_time: number;
max_time: number;
min_time: number;
avg_time: number;
ratio: number;
GPUtotal_time: number;
GPUmax_time: number;
GPUmin_time: number;
GPUavg_time: number;
GPUratio: number;
}
export interface DataType2 {
name: string;
calls: number;
cpu_total_time: number;
cpu_avg_time: number;
cpu_max_time: number;
cpu_min_time: number;
cpu_ratio: number;
gpu_total_time: number;
gpu_avg_time: number;
gpu_max_time: number;
gpu_min_time: number;
gpu_ratio: number;
}
frontend/packages/core/src/components/ScalarChart.tsx
浏览文件 @ 4a2b1b67
...@@ -21,7 +21,7 @@ import {rem, size} from '~/utils/style'; ...@@ -21,7 +21,7 @@ import {rem, size} from '~/utils/style';
import Chart from '~/components/Chart'; import Chart from '~/components/Chart';
import ChartToolbox from '~/components/ChartToolbox'; import ChartToolbox from '~/components/ChartToolbox';
import type {EChartOption} from 'echarts'; import type {EChartsOption, LineSeriesOption} from 'echarts';
import TooltipTable from '~/components/TooltipTable'; import TooltipTable from '~/components/TooltipTable';
import {format} from 'd3-format'; import {format} from 'd3-format';
import {renderToStaticMarkup} from 'react-dom/server'; import {renderToStaticMarkup} from 'react-dom/server';
...@@ -74,7 +74,7 @@ interface TooltipTableData { ...@@ -74,7 +74,7 @@ interface TooltipTableData {
interface ScalarChartProps { interface ScalarChartProps {
title: string; title: string;
data: EChartOption.SeriesLine[]; data: any;
loading: boolean; loading: boolean;
xAxisType?: XAxisType; xAxisType?: XAxisType;
xRange?: Range; xRange?: Range;
...@@ -105,7 +105,8 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({ ...@@ -105,7 +105,8 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({
}, [setYAxisType]); }, [setYAxisType]);
const formatter = useCallback( const formatter = useCallback(
(params: EChartOption.Tooltip.Format | EChartOption.Tooltip.Format[]) => { (params: any) => {
console.log('params', params);
const series: number[] = Array.isArray(params) ? params[0].data : params.data; const series: number[] = Array.isArray(params) ? params[0].data : params.data;
const value: number = (Array.isArray(params) ? params[0].axisValue : params.axisValue) as number; const value: number = (Array.isArray(params) ? params[0].axisValue : params.axisValue) as number;
return renderToStaticMarkup( return renderToStaticMarkup(
...@@ -115,8 +116,9 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({ ...@@ -115,8 +116,9 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({
[getTooltipTableData, t] [getTooltipTableData, t]
); );
const options = useMemo( const options: EChartsOption = useMemo(
() => ({ () =>
({
legend: { legend: {
data: [] data: []
}, },
...@@ -142,7 +144,7 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({ ...@@ -142,7 +144,7 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({
type: yAxisType, type: yAxisType,
...yRange ...yRange
} }
}), } as EChartsOption),
[formatter, xAxisType, xRange, yAxisType, yRange] [formatter, xAxisType, xRange, yAxisType, yRange]
); );
...@@ -196,7 +198,14 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({ ...@@ -196,7 +198,14 @@ const ScalarChart: FunctionComponent<ScalarChartProps> = ({
return ( return (
<Chart maximized={maximized} {...chartSizeInRem}> <Chart maximized={maximized} {...chartSizeInRem}>
<Wrapper> <Wrapper>
<StyledLineChart ref={echart} title={title} options={options} data={data} loading={loading} zoom /> <StyledLineChart
ref={echart}
title={title}
options={options}
data={data}
loading={loading}
zoom={true}
/>
<Toolbox items={toolbox} /> <Toolbox items={toolbox} />
</Wrapper> </Wrapper>
</Chart> </Chart>
......
frontend/packages/core/src/components/Select.tsx
浏览文件 @ 4a2b1b67
...@@ -36,7 +36,7 @@ import useClickOutside from '~/hooks/useClickOutside'; ...@@ -36,7 +36,7 @@ import useClickOutside from '~/hooks/useClickOutside';
import {useTranslation} from 'react-i18next'; import {useTranslation} from 'react-i18next';
import without from 'lodash/without'; import without from 'lodash/without';
export const padding = em(10); export const padding = em(8);
export const height = em(36); export const height = em(36);
const Wrapper = styled.div<{opened?: boolean}>` const Wrapper = styled.div<{opened?: boolean}>`
...@@ -78,9 +78,10 @@ const TriggerIcon = styled(Icon)<{opened?: boolean}>` ...@@ -78,9 +78,10 @@ const TriggerIcon = styled(Icon)<{opened?: boolean}>`
`; `;
const Label = styled.span` const Label = styled.span`
height:100%
flex-grow: 1; flex-grow: 1;
padding-right: ${em(10)}; padding-right: ${em(10)};
line-height: 1; line-height: ${em(18)};
${ellipsis()} ${ellipsis()}
`; `;
......
frontend/packages/core/src/components/StackChart.tsx
浏览文件 @ 4a2b1b67
...@@ -18,7 +18,16 @@ ...@@ -18,7 +18,16 @@
import * as chart from '~/utils/chart'; import * as chart from '~/utils/chart';
import type {EChartOption, ECharts, EChartsConvertFinder} from 'echarts'; import type {
EChartsOption,
ECharts,
CustomSeriesOption,
CustomSeriesRenderItem,
AxisPointerComponentOption,
TooltipComponentOption,
GridComponentOption,
Color as ZRColor
} from 'echarts';
import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
import {WithStyled, primaryColor, transitionProps} from '~/utils/style'; import {WithStyled, primaryColor, transitionProps} from '~/utils/style';
import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts'; import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts';
...@@ -27,6 +36,7 @@ import GridLoader from 'react-spinners/GridLoader'; ...@@ -27,6 +36,7 @@ import GridLoader from 'react-spinners/GridLoader';
import defaultsDeep from 'lodash/defaultsDeep'; import defaultsDeep from 'lodash/defaultsDeep';
import styled from 'styled-components'; import styled from 'styled-components';
import useThrottleFn from '~/hooks/useThrottleFn'; import useThrottleFn from '~/hooks/useThrottleFn';
import type {LinesSeriesOption} from 'echarts/charts';
const Tooltip = styled.div` const Tooltip = styled.div`
position: absolute; position: absolute;
...@@ -39,22 +49,14 @@ const Tooltip = styled.div` ...@@ -39,22 +49,14 @@ const Tooltip = styled.div`
${transitionProps(['color', 'background-color'])} ${transitionProps(['color', 'background-color'])}
`; `;
type RenderItem = EChartOption.SeriesCustom.RenderItem; type RenderItem = CustomSeriesRenderItem;
type GetValue = (i: number) => number; type GetValue = (i: number) => number;
type GetCoord = (p: [number, number]) => [number, number]; type GetCoord = (p: [number, number]) => [number, number];
export type StackChartProps = { export type StackChartProps = {
options?: EChartOption; options?: EChartsOption;
title?: string; title?: string;
data?: Partial<Omit<NonNullable<EChartOption<EChartOption.SeriesCustom>['series']>[number], 'data'>> & { data?: any;
minZ: number;
maxZ: number;
minX: number;
maxX: number;
minY: number;
maxY: number;
data: number[][];
};
loading?: boolean; loading?: boolean;
zoom?: boolean; zoom?: boolean;
onInit?: Options['onInit']; onInit?: Options['onInit'];
...@@ -114,11 +116,11 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -114,11 +116,11 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
[getPoint, rawData] [getPoint, rawData]
); );
const renderItem = useCallback<RenderItem>( const renderItem = useCallback(
(params, api) => { (params, api) => {
const points = makePolyPoints(params.dataIndex as number, api.value as GetValue, api.coord as GetCoord); const points = makePolyPoints(params.dataIndex as number, api.value as GetValue, api.coord as GetCoord);
return { return {
type: 'polygon', type: 'path',
silent: true, silent: true,
z: api.value?.(1), z: api.value?.(1),
shape: { shape: {
...@@ -146,7 +148,8 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -146,7 +148,8 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
dotsRef.current = dots; dotsRef.current = dots;
}, [dots]); }, [dots]);
const pointerLabelFormatter = options?.axisPointer?.label?.formatter; const AxisPointer = options?.axisPointer as AxisPointerComponentOption;
const pointerLabelFormatter = AxisPointer.label?.formatter;
// formatter change will cause echarts rerender axis pointer label // formatter change will cause echarts rerender axis pointer label
// so we need to use 2 refs instead of dots and highlight to get rid of dependencies of these two variables // so we need to use 2 refs instead of dots and highlight to get rid of dependencies of these two variables
...@@ -158,14 +161,15 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -158,14 +161,15 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
if ('string' === typeof pointerLabelFormatter) { if ('string' === typeof pointerLabelFormatter) {
return pointerLabelFormatter; return pointerLabelFormatter;
} }
return pointerLabelFormatter(params, dotsRef.current[highLightRef.current]); // return pointerLabelFormatter(params, dotsRef.current[highLightRef.current]);
return pointerLabelFormatter(params);
}, },
[pointerLabelFormatter] [pointerLabelFormatter]
); );
const theme = useChartTheme(); const theme = useChartTheme();
const chartOptions = useMemo<EChartOption>(() => { const chartOptions = useMemo<EChartsOption>(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
const {color, colorAlt, toolbox, series, ...defaults} = chart; const {color, colorAlt, toolbox, series, ...defaults} = chart;
...@@ -236,7 +240,8 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -236,7 +240,8 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
const mouseout = useCallback(() => { const mouseout = useCallback(() => {
setHighlight(null); setHighlight(null);
setDots([]); setDots([]);
if (chartOptions.tooltip?.formatter) { const formatters = chartOptions.tooltip as TooltipComponentOption;
if (formatters.formatter) {
setTooltip(''); setTooltip('');
if (tooltipRef.current) { if (tooltipRef.current) {
tooltipRef.current.style.display = 'none'; tooltipRef.current.style.display = 'none';
...@@ -252,15 +257,13 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -252,15 +257,13 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
} }
const {offsetX, offsetY} = e; const {offsetX, offsetY} = e;
if (offsetY < negativeY + ((chartOptions.grid as EChartOption.Grid).top as number) ?? 0) { if (offsetY < negativeY + ((chartOptions['grid'] as GridComponentOption)?.top as number) ?? 0) {
mouseout(); mouseout();
return; return;
} }
const [x, y] = echarts.convertFromPixel('grid' as EChartsConvertFinder, [offsetX, offsetY]) as [ const [x, y] = echarts.convertFromPixel('grid', [offsetX, offsetY]) as [number, number];
number, const seriesData = echart?.getOption().series as LinesSeriesOption;
number const data = (seriesData.data as number[][]) ?? [];
];
const data = (echarts.getOption().series?.[0].data as number[][]) ?? [];
// find right on top step // find right on top step
const steps = data.map(row => row[1]).sort((a, b) => a - b); const steps = data.map(row => row[1]).sort((a, b) => a - b);
...@@ -297,10 +300,11 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -297,10 +300,11 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
} }
// set tooltip // set tooltip
if (chartOptions.tooltip?.formatter) { const formatters = chartOptions.tooltip as TooltipComponentOption;
if (formatters.formatter) {
setTooltip( setTooltip(
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
highlight == null ? '' : (chartOptions.tooltip?.formatter as any)?.(dots[highlight]) highlight == null ? '' : (formatters.formatter as any)?.(dots[highlight])
); );
if (tooltipRef.current) { if (tooltipRef.current) {
if (step == null) { if (step == null) {
...@@ -380,9 +384,9 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -380,9 +384,9 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
} }
}); });
} else { } else {
const data = (echart.getOption().series?.[0].data as number[][]) ?? []; const seriesData = echart.getOption().series as LinesSeriesOption;
const getCoord: GetCoord = pt => const data = (seriesData.data as number[][]) ?? [];
echart.convertToPixel('grid' as EChartsConvertFinder, pt) as [number, number]; const getCoord: GetCoord = pt => echart.convertToPixel('grid', pt) as [number, number];
const getValue: GetValue = i => data[highlight][i]; const getValue: GetValue = i => data[highlight][i];
echart.setOption({ echart.setOption({
graphic: { graphic: {
...@@ -426,8 +430,7 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -426,8 +430,7 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
} }
}); });
} else { } else {
const getCoord: GetCoord = pt => const getCoord: GetCoord = pt => echart.convertToPixel('grid', pt) as [number, number];
echart.convertToPixel('grid' as EChartsConvertFinder, pt) as [number, number];
echart.setOption({ echart.setOption({
graphic: { graphic: {
elements: dots.map((dot, i) => { elements: dots.map((dot, i) => {
...@@ -446,7 +449,7 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled> ...@@ -446,7 +449,7 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
}, },
style: { style: {
fill: '#fff', fill: '#fff',
stroke: chartOptions.color?.[0], stroke: (chartOptions.color as ZRColor[])?.[0],
lineWidth: 2 lineWidth: 2
} }
}; };
......
frontend/packages/core/src/components/StackColumnChart.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/**
* Copyright 2020 Baidu Inc. All Rights Reserved.
*
* 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 * as chart from '~/utils/chart';
import React, {useEffect, useImperativeHandle} from 'react';
import {primaryColor} from '~/utils/style';
import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts';
import type {EChartsOption} from 'echarts';
import GridLoader from 'react-spinners/GridLoader';
import defaultsDeep from 'lodash/defaultsDeep';
import {useTranslation} from 'react-i18next';
type StackChartProps = {
options?: EChartsOption;
title?: string;
data?: any;
loading?: boolean;
zoom?: boolean;
onInit?: Options['onInit'];
isWorkerName?: boolean;
className?: string;
units?: string;
istotal?: boolean;
};
export enum XAxisType {
value = 'value',
log = 'log',
time = 'time'
}
export enum YAxisType {
value = 'value',
log = 'log'
}
export type LineChartRef = {
restore(): void;
saveAsImage(): void;
};
const StackColumnChart = React.forwardRef<LineChartRef, StackChartProps>(
({options, data, title, loading, zoom, className, onInit, isWorkerName, units, istotal}, ref) => {
const {i18n} = useTranslation();
const color = ['#2932E1', '#00CC88', '#981EFF', '#FF6D6D', '#25C9FF', '#E71ED5', '#FFAA00', '#00307D'];
const {
ref: echartRef,
echart,
wrapper,
saveAsImage
} = useECharts<HTMLDivElement>({
loading: !!loading,
zoom,
autoFit: true,
onInit
});
const theme = useChartTheme();
useImperativeHandle(ref, () => ({
restore: () => {
echart?.dispatchAction({
type: 'restore'
});
},
saveAsImage: () => {
saveAsImage(title);
}
}));
useEffect(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const {colorAlt, series, ...defaults} = chart;
if (data) {
const titles = isWorkerName ? data.worker_name : data.phase_type;
const order = data.order;
// debugger
const series: any = [];
for (let index = 0; index < data.order.length; index++) {
// debugger
series.push({
name: order[index],
type: 'bar',
stack: '数据',
barMaxWidth: 38,
itemStyle: {
color: color[index]
},
emphasis: {
focus: 'series'
},
data: data.data[index]
});
}
const chartOptions: EChartsOption = defaultsDeep(options, {
tooltip: {
trigger: 'axis',
extraCssText:
'padding:15px;padding-right:41px;line-height:30px;width:auto;height:auto;background:rgba(0,0,0,0.75);box-shadow:1px 5px 20px 0px rgba(1,11,19,0.2);border-radius:6px;border:none;',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params: any) {
let totals = 0;
for (let index = 0; index < params.length; index++) {
const element = params[index];
totals += element.data;
}
totals = Number(totals.toFixed(2));
let str = ''; //声明一个变量用来存储数据
str +=
'<div style="font-size:16px;color:#FFFFFF;font-weight:500;margin-left:17px;">' +
params[0].axisValue +
'</div>';
str += '<div class="tooltipContent">';
str += '<div class="tooltipitems" style=" display: flex;align-items:center;">';
if (!istotal) {
str +=
'<span style="display:inline-block;margin-right:5px;width:12px;height:12px;border-width:2px;background-color:' +
'#2932E1' +
';" class="ant-radio-inner ant-radio-checked"></span>' +
'<span style="color: #FFFFFF;">' +
'total' +
'</span>' +
'</span> : <span style="color: #FFFFFF;">' +
totals +
units +
'</span>';
}
str += '</div>';
str += '</div>';
for (let index = 0; index < params.length; index++) {
const element = params[index];
str += '<div class="tooltipitems">';
str +=
'<span style="font-size:12px;display:inline-block;margin-right:5px;width:12px;height:12px;border-radius:50%;background-color:' +
color[index] +
';"></span>' +
'<span style=" font-size:12px;color: #FFFFFF;">' +
order[index] +
'</span>' +
'</span> : <span style="font-size:12px; color: #FFFFFF;">' +
element.data +
units +
'</span>';
str += '</div>';
}
str += '</div>';
return str;
}
},
legend: {
data: order,
top: 0,
right: 0,
itemGap: 14,
textStyle: {
fontSize: 14,
color: '#666666'
},
icon: 'path://M14.5,0h-12C1.1,0,0,1.1,0,2.5S1.1,5,2.5,5h12C15.9,5,17,3.9,17,2.5S15.9,0,14.5,0z',
itemWidth: 17,
itemHeight: 5
},
grid: {
left: '0',
right: '0',
bottom: '0',
top: '62',
containLabel: true
},
xAxis: [
{
type: 'category',
// data: ['安徽战区', '江苏战区', '湖北战区', '上海战区', '广东战区', '特许直营', '浙江战区', '北京战区', '特许加盟'],
// max: 6,
data: titles,
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisTick: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
fontSize: 12,
color: '#666666'
}
}
],
yAxis: {
name: '',
nameTextStyle: {
fontSize: 12,
color: '#999999'
},
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#ccc'
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
opacity: 0.3
}
},
axisLabel: {
fontSize: 12,
color: '#666666'
}
},
series: series
});
echart?.setOption(chartOptions, {notMerge: true});
}
}, [options, data, color, title, theme, i18n.language, echart, isWorkerName, units]);
return (
<Wrapper ref={wrapper} className={className}>
{!echart && (
<div className="loading">
<GridLoader color={primaryColor} size="10px" />
</div>
)}
<div className="echarts" ref={echartRef}></div>
</Wrapper>
);
}
);
export default StackColumnChart;
frontend/packages/core/src/components/StackColumnChart2.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/**
* Copyright 2020 Baidu Inc. All Rights Reserved.
*
* 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 * as chart from '~/utils/chart';
import React, {useEffect, useImperativeHandle} from 'react';
import {primaryColor} from '~/utils/style';
import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts';
import type {EChartsOption} from 'echarts';
import GridLoader from 'react-spinners/GridLoader';
import defaultsDeep from 'lodash/defaultsDeep';
import {useTranslation} from 'react-i18next';
type StackChartProps = {
options?: EChartsOption;
title?: string;
data?: any;
loading?: boolean;
zoom?: boolean;
onInit?: Options['onInit'];
isWorkerName?: boolean;
className?: string;
units?: string;
};
export enum XAxisType {
value = 'value',
log = 'log',
time = 'time'
}
export enum YAxisType {
value = 'value',
log = 'log'
}
export type LineChartRef = {
restore(): void;
saveAsImage(): void;
};
const StackColumnChart = React.forwardRef<LineChartRef, StackChartProps>(
({options, data, title, loading, zoom, className, onInit, isWorkerName, units}, ref) => {
const {i18n} = useTranslation();
const color = ['#2932E1', '#00CC88', '#981EFF', '#FF6D6D', '#25C9FF', '#E71ED5', '#FFAA00', '#00307D'];
const {
ref: echartRef,
echart,
wrapper,
saveAsImage
} = useECharts<HTMLDivElement>({
loading: !!loading,
zoom,
autoFit: true,
onInit
});
const theme = useChartTheme();
useImperativeHandle(ref, () => ({
restore: () => {
echart?.dispatchAction({
type: 'restore'
});
},
saveAsImage: () => {
saveAsImage(title);
}
}));
useEffect(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const {colorAlt, series, ...defaults} = chart;
if (data) {
const titles = isWorkerName ? data.worker_name : data.phase_type;
const order = data.order;
// debugger
const series: any = [];
for (let index = 0; index < data.order.length; index++) {
// debugger
series.push({
name: order[index],
type: 'bar',
stack: '数据',
barMaxWidth: 38,
itemStyle: {
color: color[index]
},
emphasis: {
focus: 'series'
},
data: data.data[index]
});
}
const chartOptions: EChartsOption = defaultsDeep(options, {
tooltip: {
trigger: 'axis',
extraCssText:
'padding:15px;padding-right:41px;line-height:30px;width:auto;height:auto;background:rgba(0,0,0,0.75);box-shadow:1px 5px 20px 0px rgba(1,11,19,0.2);border-radius:6px;border:none;',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params: any) {
let totals = 0;
for (let index = 0; index < params.length; index++) {
const element = params[index];
totals += element.data;
}
totals = Number(totals.toFixed(2));
let str = ''; //声明一个变量用来存储数据
str +=
'<div style="font-size:16px;color:#FFFFFF;font-weight:500;margin-left:17px;">' +
params[0].axisValue +
'</div>';
str += '<div class="tooltipContent">';
str += '<div class="tooltipitems" style=" display: flex;align-items:center;">';
str +=
'<span style="display:inline-block;margin-right:5px;width:12px;height:12px;border-width:2px;background-color:' +
'#2932E1' +
';" class="ant-radio-inner ant-radio-checked"></span>' +
'<span style="color: #FFFFFF;">' +
'total' +
'</span>' +
'</span> : <span style="color: #FFFFFF;">' +
totals +
units +
'</span>';
str += '</div>';
str += '</div>';
for (let index = 0; index < params.length; index++) {
const element = params[index];
str += '<div class="tooltipitems">';
str +=
'<span style="font-size:12px;display:inline-block;margin-right:5px;width:12px;height:12px;border-radius:50%;background-color:' +
color[index] +
';"></span>' +
'<span style=" font-size:12px;color: #FFFFFF;">' +
order[index] +
'</span>' +
'</span> : <span style="font-size:12px; color: #FFFFFF;">' +
element.data +
units +
'</span>';
str += '</div>';
}
str += '</div>';
return str;
}
},
legend: {
data: order,
top: 0,
right: 0,
itemGap: 14,
textStyle: {
fontSize: 14,
color: '#666666'
},
icon: 'path://M14.5,0h-12C1.1,0,0,1.1,0,2.5S1.1,5,2.5,5h12C15.9,5,17,3.9,17,2.5S15.9,0,14.5,0z',
itemWidth: 17,
itemHeight: 5
},
grid: {
left: '0',
right: '0',
bottom: '30',
top: '62',
containLabel: true
},
xAxis: [
{
type: 'category',
// data: ['安徽战区', '江苏战区', '湖北战区', '上海战区', '广东战区', '特许直营', '浙江战区', '北京战区', '特许加盟'],
// max: 6,
data: titles,
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisTick: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
fontSize: 12,
color: '#666666'
}
}
],
yAxis: {
name: '',
nameTextStyle: {
fontSize: 12,
color: '#999999'
},
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#ccc'
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
opacity: 0.3
}
},
axisLabel: {
fontSize: 12,
color: '#666666'
}
},
dataZoom: [
//给x轴设置滚动条
{
start: 0, //默认为0
end: 20, //默认为100
type: 'slider',
show: true,
xAxisIndex: [0],
handleSize: 0, //滑动条的 左右2个滑动条的大小
height: 8, //组件高度
left: 50, //左边的距离
right: 40, //右边的距离
bottom: 10, //右边的距离
// handleColor: '#ddd', //h滑动图标的颜色
handleStyle: {
borderColor: '#cacaca',
borderWidth: 1,
shadowBlur: 2,
// background: '#ddd',
shadowColor: '#ddd'
},
fillerColor: '#2932E1',
backgroundColor: '#ddd', //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
// handleIcon:
// 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
filterMode: 'filter'
}
],
series: series
});
echart?.setOption(chartOptions, {notMerge: true});
}
}, [options, data, color, title, theme, i18n.language, echart, isWorkerName, units]);
return (
<Wrapper ref={wrapper} className={className}>
{!echart && (
<div className="loading">
<GridLoader color={primaryColor} size="10px" />
</div>
)}
<div className="echarts" ref={echartRef}></div>
</Wrapper>
);
}
);
export default StackColumnChart;
frontend/packages/core/src/components/TooltipTable.tsx
浏览文件 @ 4a2b1b67
...@@ -50,10 +50,9 @@ const Wrapper = styled.div` ...@@ -50,10 +50,9 @@ const Wrapper = styled.div`
font-weight: bold; font-weight: bold;
padding: 0 0.285714286em; padding: 0 0.285714286em;
} }
td { td {
padding: 0 0.333333333em; padding: 0 0.633333333em;
padding-bottom: ${rem(8)};
&.run-indicator > span { &.run-indicator > span {
${size(12, 12)} ${size(12, 12)}
border-radius: 6px; border-radius: 6px;
...@@ -84,7 +83,6 @@ const TooltipTable: FunctionComponent<TooltipTableProps> = ({run, runs, columns, ...@@ -84,7 +83,6 @@ const TooltipTable: FunctionComponent<TooltipTableProps> = ({run, runs, columns,
// because we use `ReactDOMServer.renderToStaticMarkup` to render this component into echarts tooltip // because we use `ReactDOMServer.renderToStaticMarkup` to render this component into echarts tooltip
// `ReactDOMServer.renderToStaticMarkup` WILL NOT call hydrate so translation will never be initialized // `ReactDOMServer.renderToStaticMarkup` WILL NOT call hydrate so translation will never be initialized
// const {t} = useTranslation('common'); // const {t} = useTranslation('common');
return ( return (
<Wrapper> <Wrapper>
<table> <table>
......
frontend/packages/core/src/components/Trainchart.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable sort-imports */
/**
* Copyright 2020 Baidu Inc. All Rights Reserved.
*
* 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 * as chart from '~/utils/chart';
import React, {useEffect, useImperativeHandle} from 'react';
import {primaryColor} from '~/utils/style';
import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts';
import type {EChartsOption} from 'echarts';
import GridLoader from 'react-spinners/GridLoader';
import defaultsDeep from 'lodash/defaultsDeep';
import {useTranslation} from 'react-i18next';
interface trainType {
order: string[];
steps: number[];
data: number[][];
}
type trainChartProps = {
options?: EChartsOption;
title?: string;
data?: trainType;
loading?: boolean;
zoom?: boolean;
className?: string;
onInit?: Options['onInit'];
units?: string;
};
export enum XAxisType {
value = 'value',
log = 'log',
time = 'time'
}
export enum YAxisType {
value = 'value',
log = 'log'
}
export type LineChartRef = {
restore(): void;
saveAsImage(): void;
};
const Trainchart = React.forwardRef<LineChartRef, trainChartProps>(
({options, data, title, loading, zoom, className, onInit, units}, ref) => {
const {i18n} = useTranslation();
const {t} = useTranslation(['profiler', 'common']);
const {
ref: echartRef,
echart,
wrapper,
saveAsImage
} = useECharts<HTMLDivElement>({
loading: !!loading,
zoom,
autoFit: true,
onInit
});
const theme = useChartTheme();
useImperativeHandle(ref, () => ({
restore: () => {
echart?.dispatchAction({
type: 'restore'
});
},
saveAsImage: () => {
saveAsImage(title);
}
}));
useEffect(() => {
if (!data) {
return;
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const {colorAlt, series, ...defaults} = chart;
const order = data.order;
const color = ['#2932E1', '#00CC88', '#981EFF', '#FF6D6D', '#25C9FF', '#E71ED5', '#FFAA00', '#00307D'];
const dataSeries = [];
const titles = data.steps;
for (let index = 0; index < data.order.length; index++) {
// debugger
dataSeries.push({
name: order[index],
type: 'bar',
stack: '数据',
barCategoryGap: '0%',
itemStyle: {
color: color[index]
},
emphasis: {
focus: 'series'
},
data: data.data[index]
});
}
const chartOptions: EChartsOption = defaultsDeep({
tooltip: {
trigger: 'axis',
extraCssText:
'padding:15px;padding-right:41px;line-height:30px;width:auto;height:auto;background:rgba(0,0,0,0.75);box-shadow:1px 5px 20px 0px rgba(1,11,19,0.2);border-radius:6px;border:none;',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params: any) {
let totals = 0;
for (let index = 0; index < params.length; index++) {
const element = params[index];
totals += Number(element.data);
}
totals = Number(totals.toFixed(2));
let str = ''; //声明一个变量用来存储数据
str +=
'<div style="font-size:16px;color:#FFFFFF;font-weight:500;margin-left:17px;">' +
'step' +
params[0].axisValue +
'</div>';
str += '<div class="tooltipContent">';
str += '<div class="tooltipitems">';
str +=
'<span style="display:inline-block;margin-right:5px;width:12px;height:12px;background-color:' +
'#2932E1' +
';" class="ant-radio-inner ant-radio-checked"></span>' +
'<span style="color: #FFFFFF;">' +
'total' +
'</span>' +
'</span> : <span style="color: #FFFFFF;">' +
totals +
units +
'</span>';
str += '</div>';
str += '</div>';
for (let index = 0; index < params.length; index++) {
const element = params[index];
str += '<div class="tooltipitems">';
str +=
'<span style="font-size:12px;display:inline-block;margin-right:5px;width:12px;height:12px;border-radius:50%;background-color:' +
element.color +
';"></span>' +
'<span style="color: #FFFFFF;">' +
element.seriesName +
'</span>' +
'</span> : <span style="color: #FFFFFF;">' +
element.data +
units +
'</span>';
str += '</div>';
}
str += '</div>';
return str;
}
},
legend: {
data: order,
top: 0,
right: 0,
itemGap: 14,
textStyle: {
fontSize: 14,
color: '#666666',
padding: [0, 0, 0, 8]
},
itemWidth: 17,
itemHeight: 5,
icon: 'path://M14.5,0h-12C1.1,0,0,1.1,0,2.5S1.1,5,2.5,5h12C15.9,5,17,3.9,17,2.5S15.9,0,14.5,0z'
},
grid: {
left: '0',
right: '0',
bottom: '0',
top: '62',
containLabel: true
},
xAxis: [
{
name: t('step'),
nameLocation: 'end',
nameTextStyle: {
fontSize: 12,
color: '#999999'
},
type: 'category',
data: titles,
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisTick: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
fontSize: 12,
color: '#666666'
}
}
],
yAxis: {
name: t('timeConsuming'),
nameTextStyle: {
fontSize: 12,
color: '#999999'
},
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#ccc'
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
opacity: 0.3
}
},
axisLabel: {
fontSize: 12,
color: '#666666'
}
},
series: dataSeries
});
echart?.setOption(chartOptions, {notMerge: true});
}, [options, data, title, theme, i18n.language, echart, t, units]);
return (
<Wrapper ref={wrapper} className={className}>
{!echart && (
<div className="loading">
<GridLoader color={primaryColor} size="10px" />
</div>
)}
<div className="echarts" ref={echartRef}></div>
</Wrapper>
);
}
);
export default Trainchart;
frontend/packages/core/src/components/components.ts 0 → 100644
浏览文件 @ 4a2b1b67
import {rem, em, transitionProps, position, size} from '~/utils/style';
import styled from 'styled-components';
import type {SelectProps} from '~/components/Select';
const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
import Select from '~/components/Select';
import Icon from '~/components/Icon';
import logo from '~/assets/images/question-circle.svg';
import hover from '~/assets/images/hover.svg';
export const color = [
'#2932E1',
'#00CC88',
'#981EFF',
'#066BFF',
'#00E2FF',
'#FFAA00',
'#E71ED5',
'#FF6600',
'#0DEBB0',
'#D50505'
];
export const color2 = ['#2932E1', '#00CC88', '#981EFF', '#FF6D6D', '#25C9FF', '#E71ED5', '#FFAA00', '#00307D'];
export const Configure = styled.div`
margin-top: ${rem(30)};
width: 100%;
font-family: PingFangSC-Medium;
font-size: 16px;
color: #333333;
font-weight: 500;
padding-left: ${rem(20)};
padding-right: ${rem(20)};
.titleContent {
display: flex;
justify-content: space-between;
.title {
display: flex;
align-items: center;
// div {
// line-height: 16px;
// }
}
.titles {
display: flex;
align-items: center;
margin-bottom: ${rem(15)};
}
.searchContent {
display: flex;
.input_wrapper {
width: auto;
height: ${rem(36)};
.ant-input-group-wrapper {
height: 100%;
width: 100%;
.ant-input-wrapper {
height: 100%;
.ant-input {
height: 100%;
}
.ant-btn {
height: 100%;
}
}
.ant-btn {
border-left: none;
}
}
}
.select_label {
margin-right: ${rem(15)};
line-height: ${rem(36)};
}
.select_wrapper {
width: auto;
height: ${rem(36)};
align-items: center;
margin-right: ${rem(15)};
.ant-select {
border-radius: ${rem(4)};
height: 100%;
.ant-select-selector {
height: 100%;
}
}
}
}
.bold {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
'Fira Sans', 'Droid Sans', 'Helvetica Neue';
font-size: 14px;
font-weight: 500;
color: #333333;
margin-bottom: ${rem(10)};
}
.indent {
text-indent: 2em;
margin-bottom: ${rem(10)};
}
.tooltipsContent {
width: ${rem(500)};
}
}
.preline {
white-space: pre-line;
white-space: pre-wrap;
}
`;
export const ArgumentOperation = styled.a`
flex: none;
cursor: pointer;
font-size: 14px;
margin-left: ${rem(8)};
color: var(--text-lighter-color);
${transitionProps('color')}
&:hover,
&:active {
color: #2932e1;
}
img {
width: 14px;
height: 14px;
}
img:hover {
content: url(${`${PUBLIC_PATH}/images/hover.svg`});
}
display: flex;
align-items: center;
`;
export const ButtonsRight = styled.div`
border: 1px solid #dddddd;
border-radius: 0 4px 4px 0;
width: ${rem(110)};
height: ${rem(36)};
font-family: PingFangSC-Regular;
font-size: 14px;
text-align: center;
line-height: ${rem(36)};
font-weight: 400;
`;
export const ButtonsLeft = styled.div`
border: 1px solid #dddddd;
width: ${rem(110)};
height: ${rem(36)};
font-family: PingFangSC-Regular;
font-size: 14px;
text-align: center;
line-height: ${rem(36)};
font-weight: 400;
border-radius: 4px 0 0 4px;
`;
export const RadioButtons = styled.div`
display: flex;
align-items: center;
border-radius: 4px;
margin-left: ${rem(20)};
.is_active {
color: #ffffff;
background: #2932e1;
border: 1px solid rgba(41, 50, 225, 1);
}
`;
export const Wraper = styled.div`
width: 100%;
min-height: ${rem(400)};
position: relative;
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table > thead > tr > th {
background: #f3f8fe;
}
.ant-table-pagination.ant-pagination {
margin: ${rem(20)} 0;
padding-right: ${rem(20)};
}
.ant-table.ant-table-bordered > .ant-table-container {
border: 1px solid #dddddd;
border-radius: 8px;
}
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-body > table > tbody .ant-table-row-level-1 {
background: #f0f0f0;
> td {
border: 1px solid #dddddd;
border-left: none;
border-top: none;
}
}
.ant-table-row-level-1 {
div {
text-align: right;
}
}
.whiteWrap {
margin-left: 25px;
}
> .loading {
${size('100%')}
${position('absolute', 0, null, null, 0)}
display: flex;
justify-content: center;
align-items: center;
}
`;
export const EchartPie = styled.div`
width: 100%;
height: ${rem(270)};
display: flex;
.wraper {
flex: 1;
.Content {
height: 100%;
}
}
.Content {
height: 100%;
width: 100%;
}
.ant-radio-inner {
background-color: #fff;
border-color: #ffffff;
border-style: solid;
border-width: 2px;
border-radius: 50%;
}
.tooltipContent {
padding-right: ${rem(30)};
.tooltipitems {
display: flex;
align-items: center;
}
}
`;
export const FullWidthSelect = styled<React.FunctionComponent<SelectProps<any>>>(Select)`
width: 100%;
height: 100%;
font-size: 14px;
`;
export const ViewWrapper = styled.div`
width: 100%;
height: 100%;
flex-grow: 1;
position: relative;
background-color: #fff;
`;
export const TableContent = styled.div`
min-height: ${rem(200)};
position: relative;
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table > thead > tr > th {
background: #f3f8fe;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > thead > tr > th {
background: #f3f8fe;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-body > table > tbody > tr > td {
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > tbody > tr > td {
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.ant-table.ant-table-bordered > .ant-table-container {
border: 1px solid #dddddd;
border-radius: ${rem(8)};
}
> .loading {
${size('100%')}
${position('absolute', 0, null, null, 0)}
display: flex;
justify-content: center;
align-items: center;
}
`;
export const PieceContent = styled.div`
border: 1px solid #dddddd;
border-radius: ${rem(4)};
width: 100%;
height: auto;
// padding-bottom: ${rem(20)};
.expendContent {
display: flex;
align-items: center;
.expendButton {
color: #a3a3a3;
margin-left: ${rem(20)};
margin-right: ${rem(10)};
}
margin-bottom: ${rem(20)};
}
`;
export const Subtraction = styled.div<{disable: boolean}>`
width: ${rem(32)};
height: ${rem(32)};
font-size: 16px;
line-height: ${rem(32)};
text-align: center;
border: 1px solid #e0e0e0;
border-left: none;
&:hover {
cursor: ${props => (props.disable ? 'auto' : 'not-allowed')};
}
`;
export const RadioContent = styled.div`
display: flex;
align-items: center;
padding-right: ${rem(20)};
.ant-radio-group {
display: flex;
}
.ant-radio-wrapper {
span {
white-space: nowrap;
}
.ant-radio-checked .ant-radio-inner {
border-color: #2932e1;
}
.ant-radio-inner::after {
background-color: #2932e1;
}
}
.AdditionContent {
display: flex;
align-items: center;
.input_wrapper {
width: ${rem(50)};
height: ${rem(32)};
}
.Addition {
width: ${rem(32)};
height: ${rem(32)};
line-height: ${rem(32)};
font-size: 16px;
text-align: center;
border: 1px solid #e0e0e0;
border-right: none;
}
}
`;
export const Title = styled.div`
width: 100%;
height: ${rem(50)};
font-family: PingFangSC-Medium;
font-size: 16px;
color: #333333;
line-height: ${rem(50)};
font-weight: 500;
padding-left: ${rem(20)};
border-bottom: 1px solid #dddddd;
margin-bottom: ${rem(20)};
`;
frontend/packages/core/src/components/pieChart.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/* eslint-disable sort-imports */
/**
* Copyright 2020 Baidu Inc. All Rights Reserved.
*
* 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 * as chart from '~/utils/chart';
import leftIcon from '~/assets/images/leftClick.svg';
import rightIcon from '~/assets/images/rightClick.svg';
const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
import React, {useEffect, useImperativeHandle} from 'react';
import {WithStyled, primaryColor} from '~/utils/style';
import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts';
import styled from 'styled-components';
import type {EChartsOption} from 'echarts';
import GridLoader from 'react-spinners/GridLoader';
import defaultsDeep from 'lodash/defaultsDeep';
import {useTranslation} from 'react-i18next';
// type LineChartProps = {
// options?: EChartsOption;
// title?: string;
// data?: Partial<NonNullable<EChartsOption<EChartsOption.SeriesLine>['series']>>;
// loading?: boolean;
// zoom?: boolean;
// onInit?: Options['onInit'];
// };
export enum XAxisType {
value = 'value',
log = 'log',
time = 'time'
}
export enum YAxisType {
value = 'value',
log = 'log'
}
export type LineChartRef = {
restore(): void;
saveAsImage(): void;
};
interface cpuData {
value: number;
name: string;
proportion: number;
}
type pieChartProps = {
option?: EChartsOption;
title?: string;
data?: cpuData[];
loading?: boolean;
zoom?: boolean;
onInit?: Options['onInit'];
className?: string;
isCpu?: boolean;
color?: string[];
units?: string;
};
const Content = styled.div`
height: 100%;
width: 100%;
.echarts {
height: 100%;
}
.tooltips {
display: flex;
.tooltipName {
font-size: 14px;
color: #ffffff;
font-weight: 500;
margin-left: 10px;
white-space: pre-wrap;
hegiht: auto;
max-width: 800px;
}
}
`;
const PieChart = React.forwardRef<LineChartRef, pieChartProps>(
({option, data, title, loading, zoom, className, onInit, isCpu, color, units}, ref) => {
const {i18n} = useTranslation();
const {t} = useTranslation(['profiler', 'common']);
const {
ref: echartRef,
echart,
wrapper,
saveAsImage
} = useECharts<HTMLDivElement>({
loading: !!loading,
zoom,
autoFit: true,
onInit
});
const theme = useChartTheme();
useImperativeHandle(ref, () => ({
restore: () => {
echart?.dispatchAction({
type: 'restore'
});
},
saveAsImage: () => {
saveAsImage(title);
}
}));
useEffect(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const {colorAlt, series, ...defaults} = chart;
if (data && color && units) {
// debugger
console.log('data', data);
const noData = [{value: '0', name: 'noData', proportion: '0'}];
const chartOptions: EChartsOption = defaultsDeep(option, {
center: [0, 0],
color: data.length ? color : ['#CCCCCC'],
tooltip: {
show: data.length ? true : false,
trigger: 'item',
extraCssText:
'padding:15px;padding-right:41px;line-height:30px;width:auto;height:auto;background:rgba(0,0,0,0.75);box-shadow:1px 5px 20px 0px rgba(1,11,19,0.2);border-radius:6px;border:none;',
axisPointer: {
type: 'none'
},
textStyle: {
fontSize: '14',
color: '#666'
},
position: ['50%', '0%'],
formatter: function (params: any) {
let str = ''; //声明一个变量用来存储数据
str += '<div class="tooltips">';
str += '<div class="tooltipName">' + params.data.name + '';
('</div>');
str += '<div>';
str += '<div style="display:flex; align-items:center;">';
str +=
'<span style="font-size:12px;margin-right:5px;width:12px;height:12px;border-radius:50%;background-color:' +
color[0] +
';"></span>' +
'<span style="color: #FFFFFF;">' +
`${t('timeConsuming')}` +
'</span>' +
'</span> : <span style="color: #FFFFFF;">' +
params.data.value +
units +
'</span>';
str += '</div>';
str += '<div style="display:flex; align-items:center;">';
str +=
'<span style="font-size:12px;margin-right:5px;width:12px;height:12px;border-radius:50%;background-color:' +
color[1] +
';"></span>' +
`${t('proportion')}` +
'</span> : <span style="color: #FFFFFF;">' +
params.data.proportion +
'%' +
'</span>';
str += '</div>';
str += '</div>';
str += '</div>';
str += '</div>';
return str;
}
},
legend: {
show: data.length ? true : false,
top: '20',
left: '62%',
width: '30%',
orient: 'vertical',
height: 238,
itemHeight: '8',
textStyle: {
fontSize: 14,
width: 20
},
formatter: function (name: string) {
console.log('name', name);
return name.length > 20 ? name.slice(0, 18) + '...' : name;
},
icon: 'circle',
type: 'scroll',
pageIcons: {
vertical: ['image://' + PUBLIC_PATH + leftIcon, 'image://' + PUBLIC_PATH + rightIcon]
},
tooltip: {
show: true,
formatter: function (params: any) {
let str = ''; //声明一个变量用来存储数据
str += '<div class="tooltips">';
str += '<div class="tooltipName">' + params.name + '';
('</div>');
str += '</div>';
return str;
}
},
pageIconInactiveColor: '#981EFF'
},
series: [
{
right: '220',
name: 'Access From',
type: 'pie',
radius: ['63%', '88%'],
center: ['52%', '50%'],
avoidLabelOverlap: false,
emphasis: {
disabled: data.length ? false : true
},
label: {
show: true,
position: 'center',
textStyle: {
fontSize: '14',
color: data.length ? '#666' : '#999999'
},
formatter: function () {
if (data.length) {
const str = isCpu ? 'CPU' : 'GPU'; //声明一个变量用来存储数据
return str;
} else {
const str = t('NoGPUdata');
return str;
}
}
},
labelLine: {
show: false
},
data: data.length ? data : noData
}
]
});
// debugger
echart?.setOption(chartOptions, {notMerge: true});
}
}, [option, data, title, theme, echart, color, isCpu, units, t]);
return (
<Wrapper ref={wrapper} className={className}>
{!echart && (
<div className="loading">
<GridLoader color={primaryColor} size="10px" />
</div>
)}
<Content>
<div className="echarts" ref={echartRef}></div>
</Content>
</Wrapper>
);
}
);
export default PieChart;
frontend/packages/core/src/components/searchInput2.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/**
* Copyright 2020 Baidu Inc. All Rights Reserved.
*
* 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 Input, {InputProps, padding} from '~/components/Input';
import React, {FunctionComponent, useCallback, useRef} from 'react';
import {WithStyled, math, position, transitionProps} from '~/utils/style';
import {rem} from '~/utils/style';
import Icon from '~/components/Icon';
import styled from 'styled-components';
const searchIconSize = '0.962857143';
const closeIconSize = '0.857142857';
const StyledInput = styled(Input)`
// padding-left: ${math(`1em * ${searchIconSize} + ${padding} * 2`)};
// padding-right: ${math(`1em * ${closeIconSize} + ${padding} * 2`)};
width: 100%;
font-size: ${rem('14px')};
border-radius: ${rem('4px')};
font-family: PingFangSC-Regular;
color: #999999;
letter-spacing: 0;
line-height: 14px;
font-weight: 400;
`;
const Control = styled.div`
position: relative;
`;
const SearchIcon = styled(Icon)`
display: block;
transform: translateY(-50%) scale(${searchIconSize});
transform-origin: center;
${position('absolute', '53%', `${math(`1em * ${searchIconSize}`)}`, null, null)}
pointer-events: none;
color: var(--text-lighter-color);
${transitionProps('color')}
`;
const CloseIcon = styled(Icon)`
display: block;
transform: translateY(-50%) scale(${closeIconSize});
transform-origin: center;
${position('absolute', '50%', padding, null, null)}
cursor: pointer;
color: var(--text-lighter-color);
${transitionProps('color')}
&:hover {
color: var(--text-light-color);
}
&:active {
color: var(--text-color);
}
`;
const SearchInput: FunctionComponent<InputProps & WithStyled> = ({className, value, onChange, ...props}) => {
const input = useRef<HTMLInputElement | null>(null);
const clear = useCallback(() => {
onChange?.('');
input.current?.focus();
}, [onChange]);
return (
<Control className={className}>
<StyledInput ref={input} value={value} onChange={onChange} {...props} />
{!!value && <CloseIcon type="close" onClick={clear} />}
{!value && <SearchIcon type="search" />}
</Control>
);
};
export default SearchInput;
frontend/packages/core/src/hooks/useECharts.ts
浏览文件 @ 4a2b1b67
...@@ -20,12 +20,13 @@ import {MutableRefObject, useCallback, useEffect, useLayoutEffect, useMemo, useR ...@@ -20,12 +20,13 @@ import {MutableRefObject, useCallback, useEffect, useLayoutEffect, useMemo, useR
import {position, primaryColor, size} from '~/utils/style'; import {position, primaryColor, size} from '~/utils/style';
import type {ECharts} from 'echarts'; import type {ECharts} from 'echarts';
import * as echarts from 'echarts';
// import * as echarts from 'echarts-gl';
import {dataURL2Blob} from '~/utils/image'; import {dataURL2Blob} from '~/utils/image';
import {saveFile} from '~/utils/saveFile'; import {saveFile} from '~/utils/saveFile';
import styled from 'styled-components'; import styled from 'styled-components';
import {themes} from '~/utils/theme'; import {themes} from '~/utils/theme';
import useTheme from '~/hooks/useTheme'; import useTheme from '~/hooks/useTheme';
export type Options = { export type Options = {
loading?: boolean; loading?: boolean;
gl?: boolean; gl?: boolean;
...@@ -57,14 +58,7 @@ const useECharts = <T extends HTMLElement, W extends HTMLElement = HTMLDivElemen ...@@ -57,14 +58,7 @@ const useECharts = <T extends HTMLElement, W extends HTMLElement = HTMLDivElemen
if (!ref.current) { if (!ref.current) {
return; return;
} }
const {default: echarts} = await import('echarts');
if (options.gl) {
await import('echarts-gl');
}
const echartInstance = echarts.init(ref.current as unknown as HTMLDivElement); const echartInstance = echarts.init(ref.current as unknown as HTMLDivElement);
ref.current.addEventListener('mouseleave', hideTip); ref.current.addEventListener('mouseleave', hideTip);
setTimeout(() => { setTimeout(() => {
...@@ -75,7 +69,6 @@ const useECharts = <T extends HTMLElement, W extends HTMLElement = HTMLDivElemen ...@@ -75,7 +69,6 @@ const useECharts = <T extends HTMLElement, W extends HTMLElement = HTMLDivElemen
dataZoomSelectActive: true dataZoomSelectActive: true
}); });
} }
if (echartInstance) { if (echartInstance) {
onInit.current?.(echartInstance); onInit.current?.(echartInstance);
} }
......
frontend/packages/core/src/pages/graphDynamic.tsx
浏览文件 @ 4a2b1b67
...@@ -20,7 +20,7 @@ import GraphComponent, {GraphRef} from '~/components/GraphPage/GraphDynamic'; ...@@ -20,7 +20,7 @@ import GraphComponent, {GraphRef} from '~/components/GraphPage/GraphDynamic';
import React, {FunctionComponent, useCallback, useEffect, useMemo, useRef, useState} from 'react'; import React, {FunctionComponent, useCallback, useEffect, useMemo, useRef, useState} from 'react';
import Select, {SelectProps} from '~/components/Select'; import Select, {SelectProps} from '~/components/Select';
import {actions, selectors} from '~/store'; import {actions, selectors} from '~/store';
import {primaryColor, rem, size} from '~/utils/style'; import {rem} from '~/utils/style';
import {useDispatch, useSelector} from 'react-redux'; import {useDispatch, useSelector} from 'react-redux';
import Check from '~/components/Check'; import Check from '~/components/Check';
import Button from '~/components/Button'; import Button from '~/components/Button';
......
frontend/packages/core/src/pages/hyper-parameter.tsx
浏览文件 @ 4a2b1b67
...@@ -198,13 +198,7 @@ const HyperParameter: FunctionComponent = () => { ...@@ -198,13 +198,7 @@ const HyperParameter: FunctionComponent = () => {
{loading ? <BodyLoading /> : null} {loading ? <BodyLoading /> : null}
<HPWrapper> <HPWrapper>
<Tab list={tabs} value={tabView} onChange={setTabView} /> <Tab list={tabs} value={tabView} onChange={setTabView} />
<ViewWrapper> <ViewWrapper>{isEmpty ? <Empty /> : view}</ViewWrapper>
{isEmpty ? <Empty /> : view}
{/* <HParamsImportanceDialog
visible={importanceDialogVisible}
onClickClose={() => setImportanceDialogVisible(false)}
/> */}
</ViewWrapper>
</HPWrapper> </HPWrapper>
</Content> </Content>
</> </>
......
frontend/packages/core/src/pages/profiler.tsx 0 → 100644
浏览文件 @ 4a2b1b67
/**
* Copyright 2020 Baidu Inc. All Rights Reserved.
*
* 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 Aside from '~/components/Aside';
import type {SelectProps} from '~/components/Select';
import React, {FunctionComponent, useEffect, useMemo, useState} from 'react';
import {asideWidth, rem} from '~/utils/style';
import Content from '~/components/Content';
import OverView from '~/components/ProfilerPage/overview/overview';
import OperatorView from '~/components/ProfilerPage/OperatorView/OperatorView';
// import DiffView from '~/components/ProfilerPage/DiffView';
import MemoryView from '~/components/ProfilerPage/MemoryView/MemoryView';
import TracingView from '~/components/ProfilerPage/TracingView';
import Distributed from '~/components/ProfilerPage/Distributed/Distributed';
import ComparedView from '~/components/ProfilerPage/ComparedView/ComparedView';
import Select from '~/components/Select';
import {fetcher} from '~/utils/fetch';
import Field from '~/components/Field';
import Title from '~/components/Title';
import styled from 'styled-components';
import {useTranslation} from 'react-i18next';
// const ImportanceButton = styled(Button)`
// width: 100%;
// `;
// const HParamsImportanceDialog = styled(ImportanceDialog)`
// position: fixed;
// right: calc(${asideWidth} + ${rem(20)});
// bottom: ${rem(20)};
// `;
// NOTICE: remove it!!!
asideWidth;
const TitleContent = styled.div`
padding: ${rem(20)};
border-bottom: 1px solid #dddddd;
`;
const FullWidthSelect = styled<React.FunctionComponent<SelectProps<any>>>(Select)`
width: 100%;
`;
const Titles = styled.div`
font-family: PingFangSC-Regular;
font-size: ${rem(14)};
color: #000000;
letter-spacing: 0;
line-height: ${rem(14)};
font-weight: 400;
// margin-bottom: ${rem(20)};
`;
const Selectlist = styled.div`
width: 100%;
border-radius: 4px;
padding: ${rem(20)};
`;
const AsideSection = styled.div`
margin-bottom: ${rem(20)};
`;
const CompareContent = styled.div`
padding: ${rem(0)} ${rem(20)};
padding-bottom: 0px;
.Groups {
.Selectlist {
width: 100%;
border-radius: ${rem(4)};
padding-bottom: ${rem(20)};
}
}
`;
const Grouptitle = styled.div`
border-top: 1px solid #dddddd;
padding-top: ${rem(20)};
margin-bottom: ${rem(20)};
font-family: PingFangSC-Regular;
font-size: ${rem(14)};
color: #999999;
-webkit-letter-spacing: 0;
-moz-letter-spacing: 0;
-ms-letter-spacing: 0;
letter-spacing: 0;
line-height: ${rem(14)};
font-weight: 400;
`;
const HPWrapper = styled.div`
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
`;
const ViewWrapper = styled.div`
width: 100%;
flex-grow: 1;
position: relative;
`;
type SelectListItem<T> = {
value: T;
label: string;
};
const Profiler: FunctionComponent = () => {
const {t, i18n} = useTranslation(['profiler', 'common']);
const [isCompared, setIsCompared] = useState(false);
const [runs, setRuns] = useState<string>('');
const [diffRuns1, setDiffRuns1] = useState<string>('');
const [diffRuns2, setDiffRuns2] = useState<string>('');
const [views, setViews] = useState<string>('');
const [workers, setWorkers] = useState<string>('');
const [diffWorker1, setDiffWorker1] = useState<string>('');
const [diffWorker2, setDiffWorker2] = useState<string>('');
const [spans, setSpans] = useState<string>('');
const [units, setUnits] = useState<string>('us');
const [diffSpan1, setDiffSpan1] = useState<string>('');
const [diffSpan2, setDiffSpan2] = useState<string>('');
const [runsList, setrunsList] = useState<SelectListItem<string>[]>();
const [viewsList, setViewsList] = useState<SelectListItem<string>[]>();
const [workersList, setWorkersList] = useState<SelectListItem<string>[]>();
const [spansList, setSpansList] = useState<SelectListItem<string>[]>();
const [unitsList, setUnitsList] = useState<SelectListItem<string>[]>();
const [descriptions, setDescriptions] = useState<any>();
useEffect(() => {
if (i18n.language) {
// 训练步数耗时
fetcher('/profiler/descriptions' + `?lang=${i18n.language}`).then((res: unknown) => {
const Data = res;
setDescriptions(Data);
});
}
}, [i18n.language]);
useEffect(() => {
fetcher('/profiler/runs').then((res: unknown) => {
const runsData = res as string[];
const runsList = runsData.map(item => {
return {label: item, value: item};
});
setrunsList(runsList);
setRuns(runsData[0]);
});
fetcher('/profiler/timeunits').then((res: unknown) => {
const runsData = res as string[];
const runsList = runsData.map(item => {
return {label: item, value: item};
});
setUnitsList(runsList);
});
}, []);
useEffect(() => {
fetcher('/profiler/timeunits').then((res: unknown) => {
const runsData = res as string[];
const runsList = runsData.map(item => {
return {label: item, value: item};
});
setUnitsList(runsList);
});
}, []);
useEffect(() => {
if (runs) {
fetcher('/profiler/views' + `?run=${runs}`).then((res: unknown) => {
const viewData = res as string[];
const viewList = viewData.map(item => {
return {label: item, value: item};
});
setViewsList(viewList);
setViews(viewData[0]);
});
}
}, [runs]);
useEffect(() => {
if (runs && views) {
fetcher('/profiler/workers' + `?run=${runs}` + `&view=${views}`).then((res: unknown) => {
const workerData = res as string[];
const workerList = workerData.map(item => {
return {label: item, value: item};
});
setWorkersList(workerList);
setWorkers(workerData[0]);
});
}
}, [runs, views]);
useEffect(() => {
if (runs && workers) {
fetcher('/profiler/spans' + `?run=${runs}` + `&worker=${workers}`).then((res: unknown) => {
const spanData = res as string[];
const spanList = spanData.map(item => {
return {label: item, value: item};
});
setSpansList(spanList);
setSpans(spanData[0]);
});
}
}, [runs, workers]);
// const diffView = useMemo(() => {
// if (diffWorker2 && diffSpan1 && diffRuns1 && diffWorker1 && diffSpan2 && diffRuns1) {
// return (
// <DiffView
// diffRuns1={diffRuns1}
// diffWorkers1={diffWorker1}
// diffSpans1={diffSpan1}
// diffRuns2={diffRuns2}
// diffWorkers2={diffWorker2}
// diffSpans2={diffSpan2}
// />
// );
// } else {
// return <Empty></Empty>;
// }
// }, [diffWorker2, diffSpan1, diffRuns2, diffWorker1, diffSpan2, diffRuns1]);
// const [importanceDialogVisible, setImportanceDialogVisible] = useState(false);
const aside = useMemo(
() => (
<Aside>
<TitleContent>
<Titles>{t('performance-analysis')}</Titles>
</TitleContent>
{!isCompared ? (
<Selectlist>
<AsideSection>
<Field label={t('data-flow')}>
<FullWidthSelect list={runsList} value={runs} onChange={setRuns} />
</Field>
</AsideSection>
<AsideSection>
<Field label={t('view')}>
<FullWidthSelect list={viewsList} value={views} onChange={setViews} />
</Field>
</AsideSection>
<AsideSection>
<Field label={t('process')}>
<FullWidthSelect list={workersList} value={workers} onChange={setWorkers} />
</Field>
</AsideSection>
<AsideSection>
<Field label={t('process-span')}>
<FullWidthSelect list={spansList} value={spans} onChange={setSpans} />
</Field>
</AsideSection>
{views !== 'Trace' ? (
<AsideSection>
<Field label={t('time-unit')}>
<FullWidthSelect list={unitsList} value={units} onChange={setUnits} />
</Field>
</AsideSection>
) : null}
</Selectlist>
) : (
<CompareContent>
<div className="Groups">
<Grouptitle style={{border: 'none'}}>基线组</Grouptitle>
<div className="Selectlist">
<AsideSection>
<Field label={'数据流'}>
<FullWidthSelect list={runsList} value={diffRuns1} onChange={setDiffRuns1} />
</Field>
</AsideSection>
<AsideSection>
<Field label={'进程'}>
<FullWidthSelect
list={workersList}
value={diffWorker1}
onChange={setDiffWorker1}
/>
</Field>
</AsideSection>
<AsideSection>
<Field label={'进程跨度'}>
<FullWidthSelect list={spansList} value={diffSpan1} onChange={setDiffSpan1} />
</Field>
</AsideSection>
</div>
</div>
<div className="Groups">
<Grouptitle>基线组</Grouptitle>
<div className="Selectlist">
<AsideSection>
<Field label={'数据流'}>
<FullWidthSelect list={runsList} value={diffRuns2} onChange={setDiffRuns2} />
</Field>
</AsideSection>
<AsideSection>
<Field label={'进程'}>
<FullWidthSelect
list={workersList}
value={diffWorker2}
onChange={setDiffWorker2}
/>
</Field>
</AsideSection>
<AsideSection>
<Field label={'进程跨度'}>
<FullWidthSelect list={spansList} value={diffSpan2} onChange={setDiffSpan2} />
</Field>
</AsideSection>
</div>
</div>
</CompareContent>
)}
</Aside>
),
[
spansList,
spans,
workersList,
workers,
viewsList,
views,
runsList,
runs,
isCompared,
diffWorker2,
diffRuns2,
diffWorker1,
diffRuns1,
diffSpan1,
diffSpan2,
units,
unitsList,
t
]
);
return (
<>
<Title>{t('common:hyper-parameter')}</Title>
<Content aside={aside} isProfiler={true}>
<HPWrapper>
<ViewWrapper>
{views === 'Overview' ? (
<OverView
runs={runs}
views={views}
workers={workers}
units={units}
spans={spans}
descriptions={descriptions}
/>
) : null}
{views === 'Operator' ? (
<OperatorView runs={runs} views={views} workers={workers} units={units} spans={spans} />
) : null}
{views === 'Distributed' ? (
<Distributed
runs={runs}
views={views}
workers={workers}
units={units}
spans={spans}
descriptions={descriptions}
/>
) : null}
{views === 'GPU Kernel' ? (
<ComparedView runs={runs} views={views} workers={workers} units={units} spans={spans} />
) : null}
{views === 'Memory' ? (
<MemoryView runs={runs} views={views} workers={workers} units={units} spans={spans} />
) : null}
{views === 'Trace' ? (
<TracingView runs={runs} views={views} workers={workers} spans={spans} />
) : null}
</ViewWrapper>
</HPWrapper>
</Content>
</>
);
};
export default Profiler;
frontend/packages/core/src/resource/histogram/chart.ts
浏览文件 @ 4a2b1b67
...@@ -14,17 +14,17 @@ ...@@ -14,17 +14,17 @@
* limitations under the License. * limitations under the License.
*/ */
import type {EChartOption, VisualMap} from 'echarts'; import type {EChartsOption,VisualMapComponentOption} from 'echarts';
import type {Modes} from './types'; import type {Modes} from './types';
const baseOptions: EChartOption = { const baseOptions: EChartsOption = {
legend: { legend: {
data: [] data: []
} }
}; };
export const options: Record<Modes, EChartOption> = { export const options: Record<Modes, EChartsOption> = {
overlay: { overlay: {
...baseOptions, ...baseOptions,
axisPointer: { axisPointer: {
...@@ -53,7 +53,8 @@ export const options: Record<Modes, EChartOption> = { ...@@ -53,7 +53,8 @@ export const options: Record<Modes, EChartOption> = {
colorLightness: [0.5, 0.8], colorLightness: [0.5, 0.8],
colorSaturation: [0.5, 0.8] colorSaturation: [0.5, 0.8]
} }
} as unknown as VisualMap.Continuous[], // Fix echarts type bug } as unknown as VisualMapComponentOption, // Fix echarts type bug
//['Continuous'][]
xAxis: { xAxis: {
axisLine: { axisLine: {
onZero: false onZero: false
......
frontend/packages/core/src/resource/hyper-parameter/metric.ts
浏览文件 @ 4a2b1b67
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
* limitations under the License. * limitations under the License.
*/ */
import type {EChartOption} from 'echarts'; import type {EChartsOption,LineSeriesOption} from 'echarts';
import type {MetricData} from './types'; import type {MetricData} from './types';
import type {Run} from '~/types'; import type {Run} from '~/types';
...@@ -30,7 +30,7 @@ export function calculateRelativeTime(data: MetricData[]) { ...@@ -30,7 +30,7 @@ export function calculateRelativeTime(data: MetricData[]) {
}); });
} }
export function chartData(data: number[][], run: Run): EChartOption.SeriesLine[] { export function chartData(data: number[][], run: Run): EChartsOption['line'] {
const name = run.label; const name = run.label;
const color = run.colors[0]; const color = run.colors[0];
return [ return [
......
frontend/packages/core/src/resource/scalar/chart.ts
浏览文件 @ 4a2b1b67
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
import type {Dataset, InvalidValue, Range, ScalarDataset, Step, TooltipData, Value, XAxis} from './types'; import type {Dataset, InvalidValue, Range, ScalarDataset, Step, TooltipData, Value, XAxis} from './types';
import {formatTime, humanizeDuration} from '~/utils'; import {formatTime, humanizeDuration} from '~/utils';
import type {EChartOption} from 'echarts'; import type {EChartsOption,LineSeriesOption} from 'echarts';
import type I18n from 'i18next'; import type I18n from 'i18next';
import type {Run} from '~/types'; import type {Run} from '~/types';
import {format} from 'd3-format'; import {format} from 'd3-format';
...@@ -53,7 +53,7 @@ export const chartData = ({ ...@@ -53,7 +53,7 @@ export const chartData = ({
runs: Run[]; runs: Run[];
xAxis: XAxis; xAxis: XAxis;
smoothedOnly?: boolean; smoothedOnly?: boolean;
}): EChartOption.SeriesLine[] => }): EChartsOption['line'] =>
data data
.map((dataset, i) => { .map((dataset, i) => {
// smoothed data: // smoothed data:
......
frontend/packages/core/src/routes/index.ts
浏览文件 @ 4a2b1b67
...@@ -28,6 +28,7 @@ export enum Pages { ...@@ -28,6 +28,7 @@ export enum Pages {
HighDimensional = 'high-dimensional', HighDimensional = 'high-dimensional',
PRCurve = 'pr-curve', PRCurve = 'pr-curve',
ROCCurve = 'roc-curve', ROCCurve = 'roc-curve',
Profiler = 'profiler',
HyperParameter = 'hyper-parameter' HyperParameter = 'hyper-parameter'
} }
...@@ -98,6 +99,11 @@ const routes: Route[] = [ ...@@ -98,6 +99,11 @@ const routes: Route[] = [
path: '/hyper-parameter', path: '/hyper-parameter',
component: React.lazy(() => import('~/pages/hyper-parameter')) component: React.lazy(() => import('~/pages/hyper-parameter'))
}, },
{
id: Pages.Profiler,
path: '/profiler',
component: React.lazy(() => import('~/pages/profiler'))
},
{ {
id: Pages.HighDimensional, id: Pages.HighDimensional,
path: '/high-dimensional', path: '/high-dimensional',
......
frontend/packages/core/src/utils/chart.ts
浏览文件 @ 4a2b1b67
...@@ -101,10 +101,11 @@ export const toolbox = { ...@@ -101,10 +101,11 @@ export const toolbox = {
saveAsImage: { saveAsImage: {
show: true, show: true,
type: 'png', type: 'png',
pixelRatio: 2 pixelRatio: 2,
}, },
dataZoom: { dataZoom: {
show: true show: false,
xAxisIndex: 0,
}, },
restore: { restore: {
show: true show: true
...@@ -185,6 +186,6 @@ export const yAxis = { ...@@ -185,6 +186,6 @@ export const yAxis = {
}; };
export const series = { export const series = {
hoverAnimation: false, // hoverAnimation: false,
animationDuration: 100 animationDuration: 100
}; };
frontend/packages/core/src/utils/style.ts
浏览文件 @ 4a2b1b67
...@@ -39,7 +39,20 @@ export { ...@@ -39,7 +39,20 @@ export {
const {math, size, normalize, transitions, border, position} = polished; const {math, size, normalize, transitions, border, position} = polished;
// sizes // sizes
const fontSize = '14px'; export const fontSize = '14px';
export const setRem = () => {
// PC端
// 基准大小
const baseSize = 14;
const scale = document.documentElement.clientWidth / 1220;
document.documentElement.style.fontSize = baseSize * scale + 'px';
};
// 初始化
// setRem(fontSize);
// 改变窗口大小时重新设置 rem
// window.onresize = function () {
// setRem(fontSize);
// };
export const rem = (pxval: string | number): string => polished.rem(pxval, fontSize); export const rem = (pxval: string | number): string => polished.rem(pxval, fontSize);
export const em = (pxval: string | number, base?: string | number): string => polished.em(pxval, base || fontSize); export const em = (pxval: string | number, base?: string | number): string => polished.em(pxval, base || fontSize);
export const half = (value: string | number): string => math(`(${value}) / 2`); export const half = (value: string | number): string => math(`(${value}) / 2`);
......
frontend/packages/core/tsconfig.json
浏览文件 @ 4a2b1b67
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
"src", "src",
"test", "test",
"types" "types"
], , "public/static" ],
"exclude": [ "exclude": [
"node_modules" "node_modules"
], ],
......
frontend/packages/icons/icons/defaultLeft.svg 0 → 100644
浏览文件 @ 4a2b1b67
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 14 0)"><circle cx="7" cy="7" r="7" fill="#F3F8FE"/><polygon fill="#DDD" points="8.281 7 5 10 5.547 10.5 9.375 7 5.547 3.5 5 4"/></g></svg>
\ No newline at end of file
frontend/packages/icons/icons/defaultRight.svg 0 → 100644
浏览文件 @ 4a2b1b67
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill="none" fill-rule="evenodd"><circle cx="7" cy="7" r="7" fill="#F3F8FE"/><polygon fill="#DDD" points="8.281 7 5 10 5.547 10.5 9.375 7 5.547 3.5 5 4"/></g></svg>
\ No newline at end of file
frontend/packages/icons/icons/hover.svg 0 → 100644
浏览文件 @ 4a2b1b67
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill="#2932E1" d="M7,0 L7,0 C3.13400755,0 0,3.13400755 0,7 C0,7 0,7 0,7 L0,7 C0,10.8660098 3.13400755,14.0000173 7,14.0000173 L7,14.0000173 C10.8660084,14.0000173 14.000016,10.8660098 14.000016,7 L14.000016,7 C14.000016,3.13400861 10.8660084,0 7,0 L7,0 Z M6.88930852,9.94833549 C7.21622667,9.93576419 7.4914375,10.1905932 7.50400904,10.5175113 L7.50400904,10.5175113 L7.50400904,10.5630368 C7.49143774,10.889955 7.21622667,11.1447842 6.88930852,11.1322127 C6.56239037,11.1196414 6.30756117,10.8444303 6.32013266,10.5175122 L6.32013266,10.5175122 L6.33060888,10.4267388 C6.38223791,10.1609864 6.61095033,9.95903965 6.88930852,9.94833549 Z M6.9921336,2.8909989 C7.68252171,2.88978156 8.34332932,3.17117818 8.82088573,3.66975376 C9.26013624,4.1326293 9.4841365,4.72762999 9.45088646,5.34538071 C9.41763643,5.97800645 9.2233862,6.47763203 8.25213507,7.44800816 C7.80955955,7.89058367 7.51369546,8.23393407 7.43598487,8.5348303 L7.41825909,8.63363464 C7.39588787,8.85742952 7.22604721,9.0338123 7.01087397,9.07031116 L6.929,9.077 L6.88013332,9.07463556 C6.60994121,9.04746842 6.41268863,8.80677451 6.43913281,8.53650993 C6.50563288,7.85400914 7.00613347,7.3027585 7.55738411,6.75150786 C8.38667919,5.92221277 8.44786265,5.62462765 8.46532207,5.3451887 L8.4682602,5.29288053 C8.48225838,4.99167784 8.38830495,4.69712169 8.20611596,4.46089356 L8.10775983,4.34787949 C7.81734836,4.04532465 7.41588559,3.87462425 6.99650854,3.87537894 L6.99475857,3.87537894 C6.23199702,3.87764582 5.60604809,4.45989683 5.53424846,5.20405559 L5.52738186,5.34538065 C5.52738186,5.61720929 5.30702243,5.83756872 5.03519379,5.83756872 C4.76336515,5.83756872 4.54300572,5.61720929 4.54300572,5.34538065 C4.54300572,4.75554246 4.74854346,4.19830682 5.12708727,3.7553218 L5.25963149,3.6120037 C5.67192267,3.19623274 6.21843686,2.94437592 6.79789833,2.898576 L6.9921336,2.8909989 Z"/></svg>
\ No newline at end of file
frontend/packages/icons/icons/left.svg 0 → 100644
浏览文件 @ 4a2b1b67
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 14 0)"><circle cx="7" cy="7" r="7" fill="#F3F8FE"/><polygon fill="#666" points="8.281 7 5 10 5.547 10.5 9.375 7 5.547 3.5 5 4"/></g></svg>
\ No newline at end of file
frontend/packages/icons/icons/leftClick.svg 0 → 100644
浏览文件 @ 4a2b1b67
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 14 0)"><circle cx="7" cy="7" r="7" fill="#F3F8FE"/><path fill="#666" d="M8.281 7 5 10l.547.5L9.375 7 5.547 3.5 5 4z"/></g></svg>
\ No newline at end of file
frontend/packages/icons/icons/right.svg 0 → 100644
浏览文件 @ 4a2b1b67
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill="none" fill-rule="evenodd"><circle cx="7" cy="7" r="7" fill="#F3F8FE"/><polygon fill="#666" points="8.281 7 5 10 5.547 10.5 9.375 7 5.547 3.5 5 4"/></g></svg>
\ No newline at end of file
frontend/packages/icons/icons/rightClick.svg 0 → 100644
浏览文件 @ 4a2b1b67
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><g fill="none" fill-rule="evenodd"><circle cx="7" cy="7" r="7" fill="#F3F8FE"/><path fill="#666" d="M8.281 7 5 10l.547.5L9.375 7 5.547 3.5 5 4z"/></g></svg>
\ No newline at end of file
frontend/packages/netron/src/index.js
浏览文件 @ 4a2b1b67
...@@ -132,12 +132,10 @@ host.BrowserHost = class { ...@@ -132,12 +132,10 @@ host.BrowserHost = class {
} }
selectNodeId(nodeInfo) { selectNodeId(nodeInfo) {
// 反传回去 // 反传回去
console.log('节点点击事件触发了', nodeInfo);
this.message('nodeId', nodeInfo); this.message('nodeId', nodeInfo);
} }
selectItems(item) { selectItems(item) {
// 反传回去 // 反传回去
console.log('节点点击事件触发了', item);
this.message('selectItem', item); this.message('selectItem', item);
} }
...@@ -198,7 +196,6 @@ host.BrowserHost = class { ...@@ -198,7 +196,6 @@ host.BrowserHost = class {
} }
_changeFiles(files) { _changeFiles(files) {
console.log('files', files);
if (files && files.length) { if (files && files.length) {
files = Array.from(files); files = Array.from(files);
const file = files.find(file => this._view.accept(file.name)); const file = files.find(file => this._view.accept(file.name));
...@@ -527,7 +524,6 @@ function getCaption(obj) { ...@@ -527,7 +524,6 @@ function getCaption(obj) {
return newObj; return newObj;
} }
const hash = getCaption(document.referrer); const hash = getCaption(document.referrer);
console.log('hash', hash);
if (hash === 'graphStatic') { if (hash === 'graphStatic') {
window.__view__ = new view2.View(new host.BrowserHost()); window.__view__ = new view2.View(new host.BrowserHost());
} else { } else {
......
frontend/packages/netron/src/view.js
浏览文件 @ 4a2b1b67
...@@ -396,14 +396,11 @@ view.View = class { ...@@ -396,14 +396,11 @@ view.View = class {
}); });
} }
jumpRoute(node) { jumpRoute(node) {
console.log('node', node);
if (node.is_leaf) { if (node.is_leaf) {
console.log('isCtrl', this.isCtrl);
if (this.isCtrl) { if (this.isCtrl) {
for (const nodes of this._allGraph.nodes) { for (const nodes of this._allGraph.nodes) {
if (nodes.name === node.name) { if (nodes.name === node.name) {
for (const type of this.non_graphMetadatas) { for (const type of this.non_graphMetadatas) {
console.log('type', type.name.toLowerCase(), node.type);
if (type.name.toLowerCase() === node.type) { if (type.name.toLowerCase() === node.type) {
if (this.Language === 'zh') { if (this.Language === 'zh') {
window.open( window.open(
......
frontend/packages/wasm/Cargo.toml
浏览文件 @ 4a2b1b67
...@@ -19,6 +19,7 @@ crate-type = ["cdylib"] ...@@ -19,6 +19,7 @@ crate-type = ["cdylib"]
# This makes the compiled code faster and smaller, but it makes compiling slower, # This makes the compiled code faster and smaller, but it makes compiling slower,
# so it's only enabled in release mode. # so it's only enabled in release mode.
lto = true lto = true
debug = true
[features] [features]
# If you uncomment this line, it will enable `wee_alloc`: # If you uncomment this line, it will enable `wee_alloc`:
......
frontend/packages/wasm/src/main.rs
浏览文件 @ 4a2b1b67
...@@ -8,13 +8,22 @@ mod utils; ...@@ -8,13 +8,22 @@ mod utils;
#[macro_use] #[macro_use]
extern crate serde_derive; extern crate serde_derive;
extern crate web_sys;
macro_rules! log {
( $( $t:tt )* ) => {
web_sys::console::log_1(&format!( $( $t )* ).into());
}
}
pub fn main() {} pub fn main() {}
#[wasm_bindgen] #[wasm_bindgen]
pub fn scalar_transform(js_datasets: &JsValue, smoothing: f64) -> JsValue { pub fn scalar_transform(js_datasets: &JsValue, smoothing: f64) -> JsValue {
// web_sys::console::log_1(&"Hello， world!".into());
utils::set_panic_hook(); utils::set_panic_hook();
let datasets: Vec<Vec<scalar::Dataset>> = js_datasets.into_serde().unwrap(); let datasets: Vec<Vec<scalar::Dataset>> = js_datasets.into_serde().unwrap();
let result: Vec<Vec<scalar::Smoothed>> = scalar::transform(&datasets, smoothing); let result: Vec<Vec<scalar::Smoothed>> = scalar::transform(&datasets, smoothing);
log!("js_datasets is {:?} ", js_datasets);
JsValue::from_serde(&result).unwrap() JsValue::from_serde(&result).unwrap()
} }
......
frontend/packages/wasm/src/scalar.rs
浏览文件 @ 4a2b1b67
...@@ -9,6 +9,15 @@ pub struct Range { ...@@ -9,6 +9,15 @@ pub struct Range {
min: f64, min: f64,
max: f64, max: f64,
} }
extern crate web_sys;
// 一个 macro(宏) 提供 `println!(..)`-形式 语法，给到 `console.log` 日志功能.
macro_rules! log {
( $( $t:tt )* ) => {
web_sys::console::log_1(&format!( $( $t )* ).into());
}
}
impl Range { impl Range {
pub fn new(min: f64, max: f64) -> Self { pub fn new(min: f64, max: f64) -> Self {
Range { min, max } Range { min, max }
...@@ -17,6 +26,7 @@ impl Range { ...@@ -17,6 +26,7 @@ impl Range {
fn quantile(values: &Vec<f64>, p: f64) -> f64 { fn quantile(values: &Vec<f64>, p: f64) -> f64 {
let n: usize = values.len(); let n: usize = values.len();
log!("n is {}", n);
if n == 0 { if n == 0 {
return std::f64::NAN; return std::f64::NAN;
} }
......
frontend/yarn.lock
浏览文件 @ 4a2b1b67
...@@ -2,6 +2,40 @@ ...@@ -2,6 +2,40 @@
# yarn lockfile v1 # yarn lockfile v1
"@ant-design/colors@^6.0.0":
version "6.0.0"
resolved "https://registry.npmmirror.com/@ant-design/colors/-/colors-6.0.0.tgz#9b9366257cffcc47db42b9d0203bb592c13c0298"
integrity sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==
dependencies:
"@ctrl/tinycolor" "^3.4.0"
"@ant-design/icons-svg@^4.2.1":
version "4.2.1"
resolved "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz#8630da8eb4471a4aabdaed7d1ff6a97dcb2cf05a"
integrity sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw==
"@ant-design/icons@^4.7.0":
version "4.7.0"
resolved "https://registry.npmmirror.com/@ant-design/icons/-/icons-4.7.0.tgz#8c3cbe0a556ba92af5dc7d1e70c0b25b5179af0f"
integrity sha512-aoB4Z7JA431rt6d4u+8xcNPPCrdufSRMUOpxa1ab6mz1JCQZOEVolj2WVs/tDFmN62zzK30mNelEsprLYsSF3g==
dependencies:
"@ant-design/colors" "^6.0.0"
"@ant-design/icons-svg" "^4.2.1"
"@babel/runtime" "^7.11.2"
classnames "^2.2.6"
rc-util "^5.9.4"
"@ant-design/react-slick@~0.29.1":
version "0.29.2"
resolved "https://registry.npmmirror.com/@ant-design/react-slick/-/react-slick-0.29.2.tgz#53e6a7920ea3562eebb304c15a7fc2d7e619d29c"
integrity sha512-kgjtKmkGHa19FW21lHnAfyyH9AAoh35pBdcJ53rHmQ3O+cfFHGHnUbj/HFrRNJ5vIts09FKJVAD8RpaC+RaWfA==
dependencies:
"@babel/runtime" "^7.10.4"
classnames "^2.2.5"
json2mq "^0.2.0"
lodash "^4.17.21"
resize-observer-polyfill "^1.5.1"
"@babel/code-frame@7.12.11": "@babel/code-frame@7.12.11":
version "7.12.11" version "7.12.11"
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
...@@ -441,6 +475,13 @@ ...@@ -441,6 +475,13 @@
dependencies: dependencies:
regenerator-runtime "^0.13.4" regenerator-runtime "^0.13.4"
"@babel/runtime@^7.10.1", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3":
version "7.18.3"
resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.12.13": "@babel/runtime@^7.12.13":
version "7.15.4" version "7.15.4"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
...@@ -455,6 +496,13 @@ ...@@ -455,6 +496,13 @@
dependencies: dependencies:
regenerator-runtime "^0.13.4" regenerator-runtime "^0.13.4"
"@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7":
version "7.18.9"
resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
dependencies:
regenerator-runtime "^0.13.4"
"@babel/template@^7.12.13": "@babel/template@^7.12.13":
version "7.12.13" version "7.12.13"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
...@@ -549,6 +597,11 @@ ...@@ -549,6 +597,11 @@
dependencies: dependencies:
"@cspotcode/source-map-consumer" "0.8.0" "@cspotcode/source-map-consumer" "0.8.0"
"@ctrl/tinycolor@^3.4.0":
version "3.4.1"
resolved "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz#75b4c27948c81e88ccd3a8902047bcd797f38d32"
integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==
"@discoveryjs/json-ext@^0.5.0": "@discoveryjs/json-ext@^0.5.0":
version "0.5.3" version "0.5.3"
resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz#90420f9f9c6d3987f176a19a7d8e764271a2f55d" resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz#90420f9f9c6d3987f176a19a7d8e764271a2f55d"
...@@ -1347,6 +1400,70 @@ ...@@ -1347,6 +1400,70 @@
npmlog "^4.1.2" npmlog "^4.1.2"
write-file-atomic "^3.0.3" write-file-atomic "^3.0.3"
"@material-ui/core@^4.12.4":
version "4.12.4"
resolved "https://registry.npmmirror.com/@material-ui/core/-/core-4.12.4.tgz#4ac17488e8fcaf55eb6a7f5efb2a131e10138a73"
integrity sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==
dependencies:
"@babel/runtime" "^7.4.4"
"@material-ui/styles" "^4.11.5"
"@material-ui/system" "^4.12.2"
"@material-ui/types" "5.1.0"
"@material-ui/utils" "^4.11.3"
"@types/react-transition-group" "^4.2.0"
clsx "^1.0.4"
hoist-non-react-statics "^3.3.2"
popper.js "1.16.1-lts"
prop-types "^15.7.2"
react-is "^16.8.0 || ^17.0.0"
react-transition-group "^4.4.0"
"@material-ui/styles@^4.11.5":
version "4.11.5"
resolved "https://registry.npmmirror.com/@material-ui/styles/-/styles-4.11.5.tgz#19f84457df3aafd956ac863dbe156b1d88e2bbfb"
integrity sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==
dependencies:
"@babel/runtime" "^7.4.4"
"@emotion/hash" "^0.8.0"
"@material-ui/types" "5.1.0"
"@material-ui/utils" "^4.11.3"
clsx "^1.0.4"
csstype "^2.5.2"
hoist-non-react-statics "^3.3.2"
jss "^10.5.1"
jss-plugin-camel-case "^10.5.1"
jss-plugin-default-unit "^10.5.1"
jss-plugin-global "^10.5.1"
jss-plugin-nested "^10.5.1"
jss-plugin-props-sort "^10.5.1"
jss-plugin-rule-value-function "^10.5.1"
jss-plugin-vendor-prefixer "^10.5.1"
prop-types "^15.7.2"
"@material-ui/system@^4.12.2":
version "4.12.2"
resolved "https://registry.npmmirror.com/@material-ui/system/-/system-4.12.2.tgz#f5c389adf3fce4146edd489bf4082d461d86aa8b"
integrity sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==
dependencies:
"@babel/runtime" "^7.4.4"
"@material-ui/utils" "^4.11.3"
csstype "^2.5.2"
prop-types "^15.7.2"
"@material-ui/types@5.1.0":
version "5.1.0"
resolved "https://registry.npmmirror.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
"@material-ui/utils@^4.11.3":
version "4.11.3"
resolved "https://registry.npmmirror.com/@material-ui/utils/-/utils-4.11.3.tgz#232bd86c4ea81dab714f21edad70b7fdf0253942"
integrity sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==
dependencies:
"@babel/runtime" "^7.4.4"
prop-types "^15.7.2"
react-is "^16.8.0 || ^17.0.0"
"@mrmlnc/readdir-enhanced@^2.2.1": "@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1" version "2.2.1"
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
...@@ -1849,6 +1966,16 @@ ...@@ -1849,6 +1966,16 @@
"@babel/plugin-syntax-class-properties" "^7.10.0" "@babel/plugin-syntax-class-properties" "^7.10.0"
react-refresh "^0.9.0" react-refresh "^0.9.0"
"@snowpack/plugin-sass@^1.4.0":
version "1.4.0"
resolved "https://registry.npmmirror.com/@snowpack/plugin-sass/-/plugin-sass-1.4.0.tgz#faccd5827e4badae3f5ba76cb8f947f15d3faa81"
integrity sha512-Hzz/TYt4IKcjrInv+FyujLohtJHadZCUdz5nnfh1N7MwplHFmxgLuKiT8tsiafHFAGsuR+4ZpFTqLeSyQTHAhQ==
dependencies:
execa "^5.0.0"
find-up "^5.0.0"
npm-run-path "^4.0.1"
sass "^1.3.0"
"@snowpack/plugin-typescript@1.2.1": "@snowpack/plugin-typescript@1.2.1":
version "1.2.1" version "1.2.1"
resolved "https://registry.yarnpkg.com/@snowpack/plugin-typescript/-/plugin-typescript-1.2.1.tgz#7170b039d16d41963cc61a714fe7c37f3fdd9d51" resolved "https://registry.yarnpkg.com/@snowpack/plugin-typescript/-/plugin-typescript-1.2.1.tgz#7170b039d16d41963cc61a714fe7c37f3fdd9d51"
...@@ -2329,13 +2456,6 @@ ...@@ -2329,13 +2456,6 @@
resolved "https://registry.yarnpkg.com/@types/debounce/-/debounce-1.2.0.tgz#9ee99259f41018c640b3929e1bb32c3dcecdb192" resolved "https://registry.yarnpkg.com/@types/debounce/-/debounce-1.2.0.tgz#9ee99259f41018c640b3929e1bb32c3dcecdb192"
integrity sha512-bWG5wapaWgbss9E238T0R6bfo5Fh3OkeoSt245CM7JJwVwpw6MEBCbIxLq5z8KzsE3uJhzcIuQkyiZmzV3M/Dw== integrity sha512-bWG5wapaWgbss9E238T0R6bfo5Fh3OkeoSt245CM7JJwVwpw6MEBCbIxLq5z8KzsE3uJhzcIuQkyiZmzV3M/Dw==
"@types/echarts@4.9.10":
version "4.9.10"
resolved "https://registry.yarnpkg.com/@types/echarts/-/echarts-4.9.10.tgz#a3dd598fbb3b36e797f3ce771be3fa8dc18a7da6"
integrity sha512-8xNCE5d+hUU5hZJxmxvngkkODIh19jQXpZ4X9EgfXkyyejGitm7lYdAssJLtUUEtMDD6C08Z4QPmNoezg7Y97g==
dependencies:
"@types/zrender" "*"
"@types/enhanced-resolve@3.0.7": "@types/enhanced-resolve@3.0.7":
version "3.0.7" version "3.0.7"
resolved "https://registry.yarnpkg.com/@types/enhanced-resolve/-/enhanced-resolve-3.0.7.tgz#3d24e24192a5e5a9cb012041013d2f950d1a0d7d" resolved "https://registry.yarnpkg.com/@types/enhanced-resolve/-/enhanced-resolve-3.0.7.tgz#3d24e24192a5e5a9cb012041013d2f950d1a0d7d"
...@@ -2688,6 +2808,13 @@ ...@@ -2688,6 +2808,13 @@
dependencies: dependencies:
"@types/react" "*" "@types/react" "*"
"@types/react-transition-group@^4.2.0":
version "4.4.5"
resolved "https://registry.npmmirror.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==
dependencies:
"@types/react" "*"
"@types/react@*": "@types/react@*":
version "17.0.9" version "17.0.9"
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.9.tgz#1147fb520024a62c9b3841f5cb4db89b73ddb87f" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.9.tgz#1147fb520024a62c9b3841f5cb4db89b73ddb87f"
...@@ -2801,11 +2928,6 @@ ...@@ -2801,11 +2928,6 @@
dependencies: dependencies:
"@types/node" "*" "@types/node" "*"
"@types/zrender@*":
version "4.0.0"
resolved "https://registry.yarnpkg.com/@types/zrender/-/zrender-4.0.0.tgz#a6806f12ec4eccaaebd9b0d816f049aca6188fbd"
integrity sha512-s89GOIeKFiod2KSqHkfd2rzx+T2DVu7ihZCBEBnhFrzvQPUmzvDSBot9Fi1DfMQm9Odg+rTqoMGC38RvrwJK2w==
"@typescript-eslint/eslint-plugin@4.30.0": "@typescript-eslint/eslint-plugin@4.30.0":
version "4.30.0" version "4.30.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.30.0.tgz#4a0c1ae96b953f4e67435e20248d812bfa55e4fb" resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.30.0.tgz#4a0c1ae96b953f4e67435e20248d812bfa55e4fb"
...@@ -3391,6 +3513,56 @@ ansi-styles@^5.0.0: ...@@ -3391,6 +3513,56 @@ ansi-styles@^5.0.0:
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA== integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
antd@^4.21.0:
version "4.21.3"
resolved "https://registry.npmmirror.com/antd/-/antd-4.21.3.tgz#a87a5936b3fbb92c0112a6b6fc8f1305ec6d4bdc"
integrity sha512-TETxAqqkgzpmQl/74kG2JiY6cd6E7LmrXjU7PN3Kxs8oPfQk7CGxez4smCMdpbTI2NU2qvOw0ugnvqzES82VJQ==
dependencies:
"@ant-design/colors" "^6.0.0"
"@ant-design/icons" "^4.7.0"
"@ant-design/react-slick" "~0.29.1"
"@babel/runtime" "^7.12.5"
"@ctrl/tinycolor" "^3.4.0"
classnames "^2.2.6"
copy-to-clipboard "^3.2.0"
lodash "^4.17.21"
memoize-one "^6.0.0"
moment "^2.29.2"
rc-cascader "~3.6.0"
rc-checkbox "~2.3.0"
rc-collapse "~3.3.0"
rc-dialog "~8.9.0"
rc-drawer "~4.4.2"
rc-dropdown "~4.0.0"
rc-field-form "~1.26.1"
rc-image "~5.7.0"
rc-input "~0.0.1-alpha.5"
rc-input-number "~7.3.0"
rc-mentions "~1.8.0"
rc-menu "~9.6.0"
rc-motion "^2.5.1"
rc-notification "~4.6.0"
rc-pagination "~3.1.16"
rc-picker "~2.6.8"
rc-progress "~3.3.2"
rc-rate "~2.9.0"
rc-resize-observer "^1.2.0"
rc-segmented "~2.1.0"
rc-select "~14.1.1"
rc-slider "~10.0.0"
rc-steps "~4.1.0"
rc-switch "~3.2.0"
rc-table "~7.24.0"
rc-tabs "~11.16.0"
rc-textarea "~0.3.0"
rc-tooltip "~5.1.1"
rc-tree "~5.6.5"
rc-tree-select "~5.4.0"
rc-trigger "^5.2.10"
rc-upload "~4.3.0"
rc-util "^5.20.0"
scroll-into-view-if-needed "^2.2.25"
any-promise@^1.1.0: any-promise@^1.1.0:
version "1.3.0" version "1.3.0"
resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f" resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
...@@ -3498,6 +3670,11 @@ array-includes@^3.1.2, array-includes@^3.1.3: ...@@ -3498,6 +3670,11 @@ array-includes@^3.1.2, array-includes@^3.1.3:
get-intrinsic "^1.1.1" get-intrinsic "^1.1.1"
is-string "^1.0.5" is-string "^1.0.5"
array-tree-filter@^2.1.0:
version "2.1.0"
resolved "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz#873ac00fec83749f255ac8dd083814b4f6329190"
integrity sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==
array-union@^1.0.2: array-union@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39" resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
...@@ -3595,6 +3772,11 @@ async-listener@^0.6.0: ...@@ -3595,6 +3772,11 @@ async-listener@^0.6.0:
semver "^5.3.0" semver "^5.3.0"
shimmer "^1.1.0" shimmer "^1.1.0"
async-validator@^4.1.0:
version "4.2.5"
resolved "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz#c96ea3332a521699d0afaaceed510a54656c6339"
integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==
async@^2.6.1, async@^2.6.2, async@^2.6.3, async@~2.6.1: async@^2.6.1, async@^2.6.2, async@^2.6.3, async@~2.6.1:
version "2.6.3" version "2.6.3"
resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff" resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
...@@ -4256,7 +4438,7 @@ class-utils@^0.3.5: ...@@ -4256,7 +4438,7 @@ class-utils@^0.3.5:
isobject "^3.0.0" isobject "^3.0.0"
static-extend "^0.1.1" static-extend "^0.1.1"
classnames@2.3.1, classnames@^2.2.3: classnames@2.3.1, classnames@2.x, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1:
version "2.3.1" version "2.3.1"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA== integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
...@@ -4350,6 +4532,11 @@ clone@^2.1.2: ...@@ -4350,6 +4532,11 @@ clone@^2.1.2:
resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f" resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18= integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
clsx@^1.0.4:
version "1.2.1"
resolved "https://registry.npmmirror.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
clsx@^1.1.1: clsx@^1.1.1:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
...@@ -4518,6 +4705,11 @@ compressible@^2.0.18: ...@@ -4518,6 +4705,11 @@ compressible@^2.0.18:
dependencies: dependencies:
mime-db ">= 1.43.0 < 2" mime-db ">= 1.43.0 < 2"
compute-scroll-into-view@^1.0.17:
version "1.0.17"
resolved "https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz#6a88f18acd9d42e9cf4baa6bec7e0522607ab7ab"
integrity sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg==
concat-map@0.0.1: concat-map@0.0.1:
version "0.0.1" version "0.0.1"
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
...@@ -4688,11 +4880,25 @@ cookies@~0.8.0: ...@@ -4688,11 +4880,25 @@ cookies@~0.8.0:
depd "~2.0.0" depd "~2.0.0"
keygrip "~1.1.0" keygrip "~1.1.0"
copy-anything@^2.0.1:
version "2.0.6"
resolved "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz#092454ea9584a7b7ad5573062b2a87f5900fc480"
integrity sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==
dependencies:
is-what "^3.14.1"
copy-descriptor@^0.1.0: copy-descriptor@^0.1.0:
version "0.1.1" version "0.1.1"
resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d" resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40= integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
copy-to-clipboard@^3.2.0:
version "3.3.1"
resolved "https://registry.npmmirror.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
dependencies:
toggle-selection "^1.0.6"
copy-webpack-plugin@9.0.1: copy-webpack-plugin@9.0.1:
version "9.0.1" version "9.0.1"
resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-9.0.1.tgz#b71d21991599f61a4ee00ba79087b8ba279bbb59" resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-9.0.1.tgz#b71d21991599f61a4ee00ba79087b8ba279bbb59"
...@@ -4868,6 +5074,14 @@ css-tree@^1.1.2, css-tree@^1.1.3: ...@@ -4868,6 +5074,14 @@ css-tree@^1.1.2, css-tree@^1.1.3:
mdn-data "2.0.14" mdn-data "2.0.14"
source-map "^0.6.1" source-map "^0.6.1"
css-vendor@^2.0.8:
version "2.0.8"
resolved "https://registry.npmmirror.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
dependencies:
"@babel/runtime" "^7.8.3"
is-in-browser "^1.0.2"
css-what@^3.2.1: css-what@^3.2.1:
version "3.4.2" version "3.4.2"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4" resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
...@@ -4890,6 +5104,11 @@ csso@^4.0.2, csso@^4.1.0, csso@^4.2.0: ...@@ -4890,6 +5104,11 @@ csso@^4.0.2, csso@^4.1.0, csso@^4.2.0:
dependencies: dependencies:
css-tree "^1.1.2" css-tree "^1.1.2"
csstype@^2.5.2:
version "2.6.20"
resolved "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
csstype@^3.0.2: csstype@^3.0.2:
version "3.0.8" version "3.0.8"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
...@@ -5424,11 +5643,21 @@ data-uri-to-buffer@3, data-uri-to-buffer@^3.0.1: ...@@ -5424,11 +5643,21 @@ data-uri-to-buffer@3, data-uri-to-buffer@^3.0.1:
resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636" resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636"
integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og== integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==
date-fns@2.x:
version "2.28.0"
resolved "https://registry.npmmirror.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
dateformat@^3.0.0: dateformat@^3.0.0:
version "3.0.3" version "3.0.3"
resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae" resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q== integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
dayjs@1.x:
version "1.11.3"
resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.3.tgz#4754eb694a624057b9ad2224b67b15d552589258"
integrity sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A==
dayjs@~1.8.24, dayjs@~1.8.25: dayjs@~1.8.24, dayjs@~1.8.25:
version "1.8.36" version "1.8.36"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.8.36.tgz#be36e248467afabf8f5a86bae0de0cdceecced50" resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.8.36.tgz#be36e248467afabf8f5a86bae0de0cdceecced50"
...@@ -5647,6 +5876,11 @@ dequal@2.0.2: ...@@ -5647,6 +5876,11 @@ dequal@2.0.2:
resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d" resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug== integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
dequal@^2.0.2:
version "2.0.3"
resolved "https://registry.npmmirror.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
destroy@^1.0.4, destroy@~1.0.4: destroy@^1.0.4, destroy@~1.0.4:
version "1.0.4" version "1.0.4"
resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80" resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
...@@ -5735,6 +5969,11 @@ dom-accessibility-api@^0.5.6: ...@@ -5735,6 +5969,11 @@ dom-accessibility-api@^0.5.6:
resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.7.tgz#8c2aa6325968f2933160a0b7dbb380893ddf3e7d" resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.7.tgz#8c2aa6325968f2933160a0b7dbb380893ddf3e7d"
integrity sha512-ml3lJIq9YjUfM9TUnEPvEYWFSwivwIGBPKpewX7tii7fwCazA8yCioGdqQcNsItPpfFvSJ3VIdMQPj60LJhcQA== integrity sha512-ml3lJIq9YjUfM9TUnEPvEYWFSwivwIGBPKpewX7tii7fwCazA8yCioGdqQcNsItPpfFvSJ3VIdMQPj60LJhcQA==
dom-align@^1.7.0:
version "1.12.3"
resolved "https://registry.npmmirror.com/dom-align/-/dom-align-1.12.3.tgz#a36d02531dae0eefa2abb0c4db6595250526f103"
integrity sha512-Gj9hZN3a07cbR6zviMUBOMPdWxYhbMI+x+WS0NAIu2zFZmbK8ys9R79g+iG9qLnlCwpFoaB+fKy8Pdv470GsPA==
dom-converter@^0.2.0: dom-converter@^0.2.0:
version "0.2.0" version "0.2.0"
resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768" resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
...@@ -5742,6 +5981,14 @@ dom-converter@^0.2.0: ...@@ -5742,6 +5981,14 @@ dom-converter@^0.2.0:
dependencies: dependencies:
utila "~0.4" utila "~0.4"
dom-helpers@^5.0.1:
version "5.2.1"
resolved "https://registry.npmmirror.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
dependencies:
"@babel/runtime" "^7.8.7"
csstype "^3.0.2"
dom-serializer@0: dom-serializer@0:
version "0.2.2" version "0.2.2"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
...@@ -5848,20 +6095,21 @@ ecc-jsbn@~0.1.1: ...@@ -5848,20 +6095,21 @@ ecc-jsbn@~0.1.1:
jsbn "~0.1.0" jsbn "~0.1.0"
safer-buffer "^2.1.0" safer-buffer "^2.1.0"
echarts-gl@1.1.2: echarts-gl@^2.0.9:
version "1.1.2" version "2.0.9"
resolved "https://registry.yarnpkg.com/echarts-gl/-/echarts-gl-1.1.2.tgz#fb38454031bb64c91afb84c57b1a99c370e4571e" resolved "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz#ee228a6c7520a6fb7bbb71ea94394f3637ade033"
integrity sha512-EVGx9RS2eMzaCgAMJSDCeLId4g8oFCFn78Fdh+0xIXASiZw/gPnJqr1vQgnQhmXhiUKixkIhIzfdc//qrct/Hg== integrity sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==
dependencies: dependencies:
claygl "^1.2.1" claygl "^1.2.1"
zrender "^4.0.4" zrender "^5.1.1"
echarts@4.9.0: echarts@^5.3.3:
version "4.9.0" version "5.3.3"
resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.9.0.tgz#a9b9baa03f03a2a731e6340c55befb57a9e1347d" resolved "https://registry.npmmirror.com/echarts/-/echarts-5.3.3.tgz#df97b09c4c0e2ffcdfb44acf518d50c50e0b838e"
integrity sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA== integrity sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==
dependencies: dependencies:
zrender "4.3.2" tslib "2.3.0"
zrender "5.3.2"
ee-first@1.1.1: ee-first@1.1.1:
version "1.1.1" version "1.1.1"
...@@ -5967,6 +6215,13 @@ err-code@^2.0.2: ...@@ -5967,6 +6215,13 @@ err-code@^2.0.2:
resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9" resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA== integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==
errno@^0.1.1:
version "0.1.8"
resolved "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
dependencies:
prr "~1.0.1"
error-ex@^1.2.0, error-ex@^1.3.1: error-ex@^1.2.0, error-ex@^1.3.1:
version "1.3.2" version "1.3.2"
resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf" resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
...@@ -6146,11 +6401,6 @@ eslint-plugin-react@7.25.1: ...@@ -6146,11 +6401,6 @@ eslint-plugin-react@7.25.1:
resolve "^2.0.0-next.3" resolve "^2.0.0-next.3"
string.prototype.matchall "^4.0.5" string.prototype.matchall "^4.0.5"
eslint-plugin-simple-import-sort@^7.0.0:
version "7.0.0"
resolved "https://registry.npmmirror.com/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-7.0.0.tgz#a1dad262f46d2184a90095a60c66fef74727f0f8"
integrity sha512-U3vEDB5zhYPNfxT5TYR7u01dboFZp+HNpnGhkDB2g/2E4wZ/g1Q9Ton8UwCLfRV9yAKyYqDh62oHOamvkFxsvw==
eslint-scope@5.1.1, eslint-scope@^5.1.1: eslint-scope@5.1.1, eslint-scope@^5.1.1:
version "5.1.1" version "5.1.1"
resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
...@@ -7458,6 +7708,11 @@ hypertag@^0.0.3: ...@@ -7458,6 +7708,11 @@ hypertag@^0.0.3:
resolved "https://registry.yarnpkg.com/hypertag/-/hypertag-0.0.3.tgz#2737f7a4ab885e0bb2b69a3319a11a92b035f96f" resolved "https://registry.yarnpkg.com/hypertag/-/hypertag-0.0.3.tgz#2737f7a4ab885e0bb2b69a3319a11a92b035f96f"
integrity sha512-Z/cAsLCihKj+QJGQt5X19L/YY8PW5l8/A9Ju7s4g1ty4kwDdSzGp2QdRoKb266kFglJw6+CSsR/zNpkrOEo54A== integrity sha512-Z/cAsLCihKj+QJGQt5X19L/YY8PW5l8/A9Ju7s4g1ty4kwDdSzGp2QdRoKb266kFglJw6+CSsR/zNpkrOEo54A==
hyphenate-style-name@^1.0.3:
version "1.0.4"
resolved "https://registry.npmmirror.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
i18next-browser-languagedetector@6.1.2: i18next-browser-languagedetector@6.1.2:
version "6.1.2" version "6.1.2"
resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.2.tgz#68565a28b929cbc98ab6a56826ef2faf0e927ff8" resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.2.tgz#68565a28b929cbc98ab6a56826ef2faf0e927ff8"
...@@ -7528,11 +7783,21 @@ ignore@^5.1.4: ...@@ -7528,11 +7783,21 @@ ignore@^5.1.4:
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw== integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
image-size@~0.5.0:
version "0.5.5"
resolved "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
immediate@~3.0.5: immediate@~3.0.5:
version "3.0.6" version "3.0.6"
resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b" resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps= integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
immutable@^4.0.0:
version "4.1.0"
resolved "https://registry.npmmirror.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==
import-fresh@^3.0.0, import-fresh@^3.2.1: import-fresh@^3.0.0, import-fresh@^3.2.1:
version "3.3.0" version "3.3.0"
resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
...@@ -7853,6 +8118,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1: ...@@ -7853,6 +8118,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
dependencies: dependencies:
is-extglob "^2.1.1" is-extglob "^2.1.1"
is-in-browser@^1.0.2, is-in-browser@^1.1.3:
version "1.1.3"
resolved "https://registry.npmmirror.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
integrity sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==
is-installed-globally@^0.3.1: is-installed-globally@^0.3.1:
version "0.3.2" version "0.3.2"
resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141" resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141"
...@@ -8018,6 +8288,11 @@ is-valid-identifier@^2.0.2: ...@@ -8018,6 +8288,11 @@ is-valid-identifier@^2.0.2:
dependencies: dependencies:
assert "^1.4.1" assert "^1.4.1"
is-what@^3.14.1:
version "3.14.1"
resolved "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
is-windows@^1.0.2: is-windows@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d" resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
...@@ -8194,6 +8469,13 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1: ...@@ -8194,6 +8469,13 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb" resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus= integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
json2mq@^0.2.0:
version "0.2.0"
resolved "https://registry.npmmirror.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
integrity sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==
dependencies:
string-convert "^0.2.0"
json5@^1.0.1: json5@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe" resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
...@@ -8244,6 +8526,76 @@ jsprim@^1.2.2: ...@@ -8244,6 +8526,76 @@ jsprim@^1.2.2:
json-schema "0.2.3" json-schema "0.2.3"
verror "1.10.0" verror "1.10.0"
jss-plugin-camel-case@^10.5.1:
version "10.9.2"
resolved "https://registry.npmmirror.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.2.tgz#76dddfa32f9e62d17daa4e3504991fd0933b89e1"
integrity sha512-wgBPlL3WS0WDJ1lPJcgjux/SHnDuu7opmgQKSraKs4z8dCCyYMx9IDPFKBXQ8Q5dVYij1FFV0WdxyhuOOAXuTg==
dependencies:
"@babel/runtime" "^7.3.1"
hyphenate-style-name "^1.0.3"
jss "10.9.2"
jss-plugin-default-unit@^10.5.1:
version "10.9.2"
resolved "https://registry.npmmirror.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.2.tgz#3e7f4a1506b18d8fe231554fd982439feb2a9c53"
integrity sha512-pYg0QX3bBEFtTnmeSI3l7ad1vtHU42YEEpgW7pmIh+9pkWNWb5dwS/4onSfAaI0kq+dOZHzz4dWe+8vWnanoSg==
dependencies:
"@babel/runtime" "^7.3.1"
jss "10.9.2"
jss-plugin-global@^10.5.1:
version "10.9.2"
resolved "https://registry.npmmirror.com/jss-plugin-global/-/jss-plugin-global-10.9.2.tgz#e7f2ad4a5e8e674fb703b04b57a570b8c3e5c2c2"
integrity sha512-GcX0aE8Ef6AtlasVrafg1DItlL/tWHoC4cGir4r3gegbWwF5ZOBYhx04gurPvWHC8F873aEGqge7C17xpwmp2g==
dependencies:
"@babel/runtime" "^7.3.1"
jss "10.9.2"
jss-plugin-nested@^10.5.1:
version "10.9.2"
resolved "https://registry.npmmirror.com/jss-plugin-nested/-/jss-plugin-nested-10.9.2.tgz#3aa2502816089ecf3981e1a07c49b276d67dca63"
integrity sha512-VgiOWIC6bvgDaAL97XCxGD0BxOKM0K0zeB/ECyNaVF6FqvdGB9KBBWRdy2STYAss4VVA7i5TbxFZN+WSX1kfQA==
dependencies:
"@babel/runtime" "^7.3.1"
jss "10.9.2"
tiny-warning "^1.0.2"
jss-plugin-props-sort@^10.5.1:
version "10.9.2"
resolved "https://registry.npmmirror.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.2.tgz#645f6c8f179309667b3e6212f66b59a32fb3f01f"
integrity sha512-AP1AyUTbi2szylgr+O0OB7gkIxEGzySLITZ2GpsaoX72YMCGI2jYAc+WUhPfvUnZYiauF4zTnN4V4TGuvFjJlw==
dependencies:
"@babel/runtime" "^7.3.1"
jss "10.9.2"
jss-plugin-rule-value-function@^10.5.1:
version "10.9.2"
resolved "https://registry.npmmirror.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.2.tgz#9afe07596e477123cbf11120776be6a64494541f"
integrity sha512-vf5ms8zvLFMub6swbNxvzsurHfUZ5Shy5aJB2gIpY6WNA3uLinEcxYyraQXItRHi5ivXGqYciFDRM2ZoVoRZ4Q==
dependencies:
"@babel/runtime" "^7.3.1"
jss "10.9.2"
tiny-warning "^1.0.2"
jss-plugin-vendor-prefixer@^10.5.1:
version "10.9.2"
resolved "https://registry.npmmirror.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.2.tgz#410a0f3b9f8dbbfba58f4d329134df4849aa1237"
integrity sha512-SxcEoH+Rttf9fEv6KkiPzLdXRmI6waOTcMkbbEFgdZLDYNIP9UKNHFy6thhbRKqv0XMQZdrEsbDyV464zE/dUA==
dependencies:
"@babel/runtime" "^7.3.1"
css-vendor "^2.0.8"
jss "10.9.2"
jss@10.9.2, jss@^10.5.1:
version "10.9.2"
resolved "https://registry.npmmirror.com/jss/-/jss-10.9.2.tgz#9379be1f195ef98011dfd31f9448251bd61b95a9"
integrity sha512-b8G6rWpYLR4teTUbGd4I4EsnWjg7MN0Q5bSsjKhVkJVjhQDy2KzkbD2AW3TuT0RYZVmZZHKIrXDn6kjU14qkUg==
dependencies:
"@babel/runtime" "^7.3.1"
csstype "^3.0.2"
is-in-browser "^1.1.3"
tiny-warning "^1.0.2"
"jsx-ast-utils@^2.4.1 || ^3.0.0": "jsx-ast-utils@^2.4.1 || ^3.0.0":
version "3.2.0" version "3.2.0"
resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz#41108d2cec408c3453c1bbe8a4aae9e1e2bd8f82" resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz#41108d2cec408c3453c1bbe8a4aae9e1e2bd8f82"
...@@ -8446,6 +8798,22 @@ lerna@4.0.0: ...@@ -8446,6 +8798,22 @@ lerna@4.0.0:
import-local "^3.0.2" import-local "^3.0.2"
npmlog "^4.1.2" npmlog "^4.1.2"
less@^3.12.2:
version "3.13.1"
resolved "https://registry.npmmirror.com/less/-/less-3.13.1.tgz#0ebc91d2a0e9c0c6735b83d496b0ab0583077909"
integrity sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==
dependencies:
copy-anything "^2.0.1"
tslib "^1.10.0"
optionalDependencies:
errno "^0.1.1"
graceful-fs "^4.1.2"
image-size "~0.5.0"
make-dir "^2.1.0"
mime "^1.4.1"
native-request "^1.0.5"
source-map "~0.6.0"
levn@^0.4.1: levn@^0.4.1:
version "0.4.1" version "0.4.1"
resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade" resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
...@@ -8869,6 +9237,11 @@ media-typer@0.3.0: ...@@ -8869,6 +9237,11 @@ media-typer@0.3.0:
resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g= integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
memoize-one@^6.0.0:
version "6.0.0"
resolved "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
meow@^3.3.0: meow@^3.3.0:
version "3.7.0" version "3.7.0"
resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb" resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
...@@ -8995,7 +9368,7 @@ mime-types@^2.1.12, mime-types@^2.1.18, mime-types@^2.1.27, mime-types@~2.1.19, ...@@ -8995,7 +9368,7 @@ mime-types@^2.1.12, mime-types@^2.1.18, mime-types@^2.1.27, mime-types@~2.1.19,
dependencies: dependencies:
mime-db "1.48.0" mime-db "1.48.0"
mime@1.6.0: mime@1.6.0, mime@^1.4.1:
version "1.6.0" version "1.6.0"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1" resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg== integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
...@@ -9222,6 +9595,11 @@ moment@2.29.1, "moment@>= 2.9.0": ...@@ -9222,6 +9595,11 @@ moment@2.29.1, "moment@>= 2.9.0":
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ== integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
moment@^2.24.0, moment@^2.29.2:
version "2.29.3"
resolved "https://registry.npmmirror.com/moment/-/moment-2.29.3.tgz#edd47411c322413999f7a5940d526de183c031f3"
integrity sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw==
moo@^0.5.1: moo@^0.5.1:
version "0.5.1" version "0.5.1"
resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.1.tgz#7aae7f384b9b09f620b6abf6f74ebbcd1b65dbc4" resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.1.tgz#7aae7f384b9b09f620b6abf6f74ebbcd1b65dbc4"
...@@ -9285,6 +9663,11 @@ nanomatch@^1.2.9: ...@@ -9285,6 +9663,11 @@ nanomatch@^1.2.9:
snapdragon "^0.8.1" snapdragon "^0.8.1"
to-regex "^3.0.1" to-regex "^3.0.1"
native-request@^1.0.5:
version "1.1.0"
resolved "https://registry.npmmirror.com/native-request/-/native-request-1.1.0.tgz#acdb30fe2eefa3e1bc8c54b3a6852e9c5c0d3cb0"
integrity sha512-uZ5rQaeRn15XmpgE0xoPL8YWqcX90VtCFglYwAgkvKM5e8fog+vePLAhHxuuv/gRkrQxIeh5U3q9sMNUrENqWw==
natural-compare@^1.4.0: natural-compare@^1.4.0:
version "1.4.0" version "1.4.0"
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
...@@ -10411,6 +10794,11 @@ polished@4.1.3: ...@@ -10411,6 +10794,11 @@ polished@4.1.3:
dependencies: dependencies:
"@babel/runtime" "^7.14.0" "@babel/runtime" "^7.14.0"
popper.js@1.16.1-lts:
version "1.16.1-lts"
resolved "https://registry.npmmirror.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
portfinder@^1.0.28: portfinder@^1.0.28:
version "1.0.28" version "1.0.28"
resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
...@@ -10655,6 +11043,11 @@ proxy-from-env@1.1.0, proxy-from-env@^1.0.0: ...@@ -10655,6 +11043,11 @@ proxy-from-env@1.1.0, proxy-from-env@^1.0.0:
resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
prr@~1.0.1:
version "1.0.1"
resolved "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
psl@^1.1.28: psl@^1.1.28:
version "1.8.0" version "1.8.0"
resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24" resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
...@@ -10797,6 +11190,373 @@ raw-body@^2.2.0, raw-body@^2.3.3: ...@@ -10797,6 +11190,373 @@ raw-body@^2.2.0, raw-body@^2.3.3:
iconv-lite "0.4.24" iconv-lite "0.4.24"
unpipe "1.0.0" unpipe "1.0.0"
rc-align@^4.0.0:
version "4.0.12"
resolved "https://registry.npmmirror.com/rc-align/-/rc-align-4.0.12.tgz#065b5c68a1cc92a00800c9239320d9fdf5f16207"
integrity sha512-3DuwSJp8iC/dgHzwreOQl52soj40LchlfUHtgACOUtwGuoFIOVh6n/sCpfqCU8kO5+iz6qR0YKvjgB8iPdE3aQ==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "2.x"
dom-align "^1.7.0"
lodash "^4.17.21"
rc-util "^5.3.0"
resize-observer-polyfill "^1.5.1"
rc-cascader@~3.6.0:
version "3.6.0"
resolved "https://registry.npmmirror.com/rc-cascader/-/rc-cascader-3.6.0.tgz#7db0d373edf4c276bba4b68b7de57fad1486c908"
integrity sha512-p9qwt8E8ZICzPIzyfXF5y7/lbJhRowFj8YhWpdytMomHUZ568duFNwA4H5QVqdC6hg/HIV1YEawOE5jlxSpeww==
dependencies:
"@babel/runtime" "^7.12.5"
array-tree-filter "^2.1.0"
classnames "^2.3.1"
rc-select "~14.1.0"
rc-tree "~5.6.3"
rc-util "^5.6.1"
rc-checkbox@~2.3.0:
version "2.3.2"
resolved "https://registry.npmmirror.com/rc-checkbox/-/rc-checkbox-2.3.2.tgz#f91b3678c7edb2baa8121c9483c664fa6f0aefc1"
integrity sha512-afVi1FYiGv1U0JlpNH/UaEXdh6WUJjcWokj/nUN2TgG80bfG+MDdbfHKlLcNNba94mbjy2/SXJ1HDgrOkXGAjg==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "^2.2.1"
rc-collapse@~3.3.0:
version "3.3.0"
resolved "https://registry.npmmirror.com/rc-collapse/-/rc-collapse-3.3.0.tgz#ecde33a06ca53c6c672c6a46c701052b88723950"
integrity sha512-nkxjhpYAAwEVbBvZ/qoatLecD0PpRtQ5ja9G+FP1QmsWhs/4VCruhjvRdSpMn9vfluKUnePe3PEy8eeqTeuE0g==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "2.x"
rc-motion "^2.3.4"
rc-util "^5.2.1"
shallowequal "^1.1.0"
rc-dialog@~8.9.0:
version "8.9.0"
resolved "https://registry.npmmirror.com/rc-dialog/-/rc-dialog-8.9.0.tgz#04dc39522f0321ed2e06018d4a7e02a4c32bd3ea"
integrity sha512-Cp0tbJnrvPchJfnwIvOMWmJ4yjX3HWFatO6oBFD1jx8QkgsQCR0p8nUWAKdd3seLJhEC39/v56kZaEjwp9muoQ==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "^2.2.6"
rc-motion "^2.3.0"
rc-util "^5.21.0"
rc-drawer@~4.4.2:
version "4.4.3"
resolved "https://registry.npmmirror.com/rc-drawer/-/rc-drawer-4.4.3.tgz#2094937a844e55dc9644236a2d9fba79c344e321"
integrity sha512-FYztwRs3uXnFOIf1hLvFxIQP9MiZJA+0w+Os8dfDh/90X7z/HqP/Yg+noLCIeHEbKln1Tqelv8ymCAN24zPcfQ==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "^2.2.6"
rc-util "^5.7.0"
rc-dropdown@~4.0.0:
version "4.0.1"
resolved "https://registry.npmmirror.com/rc-dropdown/-/rc-dropdown-4.0.1.tgz#f65d9d3d89750241057db59d5a75e43cd4576b68"
integrity sha512-OdpXuOcme1rm45cR0Jzgfl1otzmU4vuBVb+etXM8vcaULGokAKVpKlw8p6xzspG7jGd/XxShvq+N3VNEfk/l5g==
dependencies:
"@babel/runtime" "^7.18.3"
classnames "^2.2.6"
rc-trigger "^5.3.1"
rc-util "^5.17.0"
rc-field-form@~1.26.1:
version "1.26.7"
resolved "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-1.26.7.tgz#1794afa50f844170d8907cc575ab482d65db9926"
integrity sha512-CIb7Gw+DG9R+g4HxaDGYHhOjhjQoU2mGU4y+UM2+KQ3uRz9HrrNgTspGvNynn3UamsYcYcaPWZJmiJ6VklkT/w==
dependencies:
"@babel/runtime" "^7.18.0"
async-validator "^4.1.0"
rc-util "^5.8.0"
rc-image@~5.7.0:
version "5.7.0"
resolved "https://registry.npmmirror.com/rc-image/-/rc-image-5.7.0.tgz#e1a3b21099feb3fb9bf8ef3ce12c3fc11a8c1148"
integrity sha512-v6dzSgYfYrH4liKmOZKZZO+x21sJ9KPXNinBfkAoQg2Ihcd5QZ+P/JjB7v60X981XTPGjegy8U17Z8VUX4V36g==
dependencies:
"@babel/runtime" "^7.11.2"
classnames "^2.2.6"
rc-dialog "~8.9.0"
rc-util "^5.0.6"
rc-input-number@~7.3.0:
version "7.3.4"
resolved "https://registry.npmmirror.com/rc-input-number/-/rc-input-number-7.3.4.tgz#674aea98260250287d36e330a7e065b174486e9d"
integrity sha512-W9uqSzuvJUnz8H8vsVY4kx+yK51SsAxNTwr8SNH4G3XqQNocLVmKIibKFRjocnYX1RDHMND9FFbgj2h7E7nvGA==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "^2.2.5"
rc-util "^5.9.8"
rc-input@~0.0.1-alpha.5:
version "0.0.1-alpha.7"
resolved "https://registry.npmmirror.com/rc-input/-/rc-input-0.0.1-alpha.7.tgz#53e3f13871275c21d92b51f80b698f389ad45dd3"
integrity sha512-eozaqpCYWSY5LBMwlHgC01GArkVEP+XlJ84OMvdkwUnJBSv83Yxa15pZpn7vACAj84uDC4xOA2CoFdbLuqB08Q==
dependencies:
"@babel/runtime" "^7.11.1"
classnames "^2.2.1"
rc-util "^5.18.1"
rc-mentions@~1.8.0:
version "1.8.0"
resolved "https://registry.npmmirror.com/rc-mentions/-/rc-mentions-1.8.0.tgz#4c0c41605064303f7aedec47d4d07e0bbfcc2dc3"
integrity sha512-ch7yfMMvx2UXy+EvE4axm0Vp6VlVZ30WLrZtLtV/Eb1ty7rQQRzNzCwAHAMyw6tNKTMs9t9sF68AVjAzQ0rvJw==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "^2.2.6"
rc-menu "~9.6.0"
rc-textarea "^0.3.0"
rc-trigger "^5.0.4"
rc-util "^5.0.1"
rc-menu@~9.6.0:
version "9.6.0"
resolved "https://registry.npmmirror.com/rc-menu/-/rc-menu-9.6.0.tgz#3263a729a81ae49cfdadee112e97d3c702922829"
integrity sha512-d26waws42U/rVwW/+rOE2FN9pX6wUc9bDy38vVQYoie6gE85auWIpl5oChGlnW6nE2epnTwUsgWl8ipOPgmnUA==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "2.x"
rc-motion "^2.4.3"
rc-overflow "^1.2.0"
rc-trigger "^5.1.2"
rc-util "^5.12.0"
shallowequal "^1.1.0"
rc-motion@^2.0.0, rc-motion@^2.0.1, rc-motion@^2.2.0, rc-motion@^2.3.0, rc-motion@^2.3.4, rc-motion@^2.4.3, rc-motion@^2.4.4, rc-motion@^2.5.1:
version "2.6.0"
resolved "https://registry.npmmirror.com/rc-motion/-/rc-motion-2.6.0.tgz#c60c3e7f15257f55a8cd7794a539f0e2cc751399"
integrity sha512-1MDWA9+i174CZ0SIDenSYm2Wb9YbRkrexjZWR0CUFu7D6f23E8Y0KsTgk9NGOLJsGak5ELZK/Y5lOlf5wQdzbw==
dependencies:
"@babel/runtime" "^7.11.1"
classnames "^2.2.1"
rc-util "^5.21.0"
rc-notification@~4.6.0:
version "4.6.0"
resolved "https://registry.npmmirror.com/rc-notification/-/rc-notification-4.6.0.tgz#4e76fc2d0568f03cc93ac18c9e20763ebe29fa46"
integrity sha512-xF3MKgIoynzjQAO4lqsoraiFo3UXNYlBfpHs0VWvwF+4pimen9/H1DYLN2mfRWhHovW6gRpla73m2nmyIqAMZQ==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "2.x"
rc-motion "^2.2.0"
rc-util "^5.20.1"
rc-overflow@^1.0.0, rc-overflow@^1.2.0:
version "1.2.6"
resolved "https://registry.npmmirror.com/rc-overflow/-/rc-overflow-1.2.6.tgz#e99fabea04ce4fb13f0dd8835aef4e4cdd4c15a2"
integrity sha512-YqbocgzuQxfq2wZy72vdAgrgzzEuM/5d4gF9TBEodCpXPbUeXGrUXNm1J6G1MSkCU2N0ePIgCEu5qD/0Ldi63Q==
dependencies:
"@babel/runtime" "^7.11.1"
classnames "^2.2.1"
rc-resize-observer "^1.0.0"
rc-util "^5.19.2"
rc-pagination@~3.1.16:
version "3.1.16"
resolved "https://registry.npmmirror.com/rc-pagination/-/rc-pagination-3.1.16.tgz#b0082108cf027eded18ed61d818d31897c343e81"
integrity sha512-GFcHXJ7XxeJDf9B+ndP4PRDt46maSSgYhiwofBMiIGKIlBhJ0wfu8DMCEvaWJJLpI2u4Gb6zF1dHpiqPFrosPg==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "^2.2.1"
rc-picker@~2.6.8:
version "2.6.9"
resolved "https://registry.npmmirror.com/rc-picker/-/rc-picker-2.6.9.tgz#2f2f82c5340adbe3b30875a25e015c120eb88c9c"
integrity sha512-yH3UYXCADf7REtOAB5cwe1cyFKtB0p204RCN8JdZGG4uuSOZ1IPTkk/GJS6HOpxspZeJCLGzzajuQMDwck9dsw==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "^2.2.1"
date-fns "2.x"
dayjs "1.x"
moment "^2.24.0"
rc-trigger "^5.0.4"
rc-util "^5.4.0"
shallowequal "^1.1.0"
rc-progress@~3.3.2:
version "3.3.3"
resolved "https://registry.npmmirror.com/rc-progress/-/rc-progress-3.3.3.tgz#eb9bffbacab1534f2542f9f6861ce772254362b1"
integrity sha512-MDVNVHzGanYtRy2KKraEaWeZLri2ZHWIRyaE1a9MQ2MuJ09m+Wxj5cfcaoaR6z5iRpHpA59YeUxAlpML8N4PJw==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "^2.2.6"
rc-util "^5.16.1"
rc-rate@~2.9.0:
version "2.9.2"
resolved "https://registry.npmmirror.com/rc-rate/-/rc-rate-2.9.2.tgz#4a58965d1ecf91896ebae01d458b59056df0b4ea"
integrity sha512-SaiZFyN8pe0Fgphv8t3+kidlej+cq/EALkAJAc3A0w0XcPaH2L1aggM8bhe1u6GAGuQNAoFvTLjw4qLPGRKV5g==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "^2.2.5"
rc-util "^5.0.1"
rc-resize-observer@^1.0.0, rc-resize-observer@^1.1.0, rc-resize-observer@^1.2.0:
version "1.2.0"
resolved "https://registry.npmmirror.com/rc-resize-observer/-/rc-resize-observer-1.2.0.tgz#9f46052f81cdf03498be35144cb7c53fd282c4c7"
integrity sha512-6W+UzT3PyDM0wVCEHfoW3qTHPTvbdSgiA43buiy8PzmeMnfgnDeb9NjdimMXMl3/TcrvvWl5RRVdp+NqcR47pQ==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "^2.2.1"
rc-util "^5.15.0"
resize-observer-polyfill "^1.5.1"
rc-segmented@~2.1.0:
version "2.1.0"
resolved "https://registry.npmmirror.com/rc-segmented/-/rc-segmented-2.1.0.tgz#0e0afe646c1a0e44a0e18785f518c42633ec8efc"
integrity sha512-hUlonro+pYoZcwrH6Vm56B2ftLfQh046hrwif/VwLIw1j3zGt52p5mREBwmeVzXnSwgnagpOpfafspzs1asjGw==
dependencies:
"@babel/runtime" "^7.11.1"
classnames "^2.2.1"
rc-motion "^2.4.4"
rc-util "^5.17.0"
rc-select@~14.1.0, rc-select@~14.1.1:
version "14.1.7"
resolved "https://registry.npmmirror.com/rc-select/-/rc-select-14.1.7.tgz#665ec578ff9456688fdaf737badfff071884507a"
integrity sha512-mvALDI0Ih1Nehb2JhErNDh1tmxua4mSZtQW7poBkCFISLPjuOs+uy9LKRJwxHHtaH0PxcN+SbITrIXm4KiFUmg==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "2.x"
rc-motion "^2.0.1"
rc-overflow "^1.0.0"
rc-trigger "^5.0.4"
rc-util "^5.16.1"
rc-virtual-list "^3.2.0"
rc-slider@~10.0.0:
version "10.0.0"
resolved "https://registry.npmmirror.com/rc-slider/-/rc-slider-10.0.0.tgz#8ffe1dd3c8799c9d1f81ac808976f18af3dca206"
integrity sha512-Bk54UIKWW4wyhHcL8ehAxt+wX+n69dscnHTX6Uv0FMxSke/TGrlkZz1LSIWblCpfE2zr/dwR2Ca8nZGk3U+Tbg==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "^2.2.5"
rc-tooltip "^5.0.1"
rc-util "^5.18.1"
shallowequal "^1.1.0"
rc-steps@~4.1.0:
version "4.1.4"
resolved "https://registry.npmmirror.com/rc-steps/-/rc-steps-4.1.4.tgz#0ba82db202d59ca52d0693dc9880dd145b19dc23"
integrity sha512-qoCqKZWSpkh/b03ASGx1WhpKnuZcRWmvuW+ZUu4mvMdfvFzVxblTwUM+9aBd0mlEUFmt6GW8FXhMpHkK3Uzp3w==
dependencies:
"@babel/runtime" "^7.10.2"
classnames "^2.2.3"
rc-util "^5.0.1"
rc-switch@~3.2.0:
version "3.2.2"
resolved "https://registry.npmmirror.com/rc-switch/-/rc-switch-3.2.2.tgz#d001f77f12664d52595b4f6fb425dd9e66fba8e8"
integrity sha512-+gUJClsZZzvAHGy1vZfnwySxj+MjLlGRyXKXScrtCTcmiYNPzxDFOxdQ/3pK1Kt/0POvwJ/6ALOR8gwdXGhs+A==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "^2.2.1"
rc-util "^5.0.1"
rc-table@~7.24.0:
version "7.24.2"
resolved "https://registry.npmmirror.com/rc-table/-/rc-table-7.24.2.tgz#fbccf5ef4b84cdb38c8a0b416365de157483bf51"
integrity sha512-yefqhtc4V3BeWG2bnDhWYxWX1MOckvW2KU1J55pntZmIGrov5Hx8tQn2gcs6OM0fJ6NgEwUvVEknsCsWI24zUg==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "^2.2.5"
rc-resize-observer "^1.1.0"
rc-util "^5.14.0"
shallowequal "^1.1.0"
rc-tabs@~11.16.0:
version "11.16.0"
resolved "https://registry.npmmirror.com/rc-tabs/-/rc-tabs-11.16.0.tgz#12447069ea1dc480c729e1e40661cfbd46ac4efe"
integrity sha512-CIDPv3lHaXSHTJevmFP2eHoD3Hq9psfKbOZYf6D4FYPACloNGHpz44y3RGeJgataQ7omFLrGBm3dOBMUki87tA==
dependencies:
"@babel/runtime" "^7.11.2"
classnames "2.x"
rc-dropdown "~4.0.0"
rc-menu "~9.6.0"
rc-resize-observer "^1.0.0"
rc-util "^5.5.0"
rc-textarea@^0.3.0, rc-textarea@~0.3.0:
version "0.3.7"
resolved "https://registry.npmmirror.com/rc-textarea/-/rc-textarea-0.3.7.tgz#987142891efdedb774883c07e2f51b318fde5a11"
integrity sha512-yCdZ6binKmAQB13hc/oehh0E/QRwoPP1pjF21aHBxlgXO3RzPF6dUu4LG2R4FZ1zx/fQd2L1faktulrXOM/2rw==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "^2.2.1"
rc-resize-observer "^1.0.0"
rc-util "^5.7.0"
shallowequal "^1.1.0"
rc-tooltip@^5.0.1, rc-tooltip@~5.1.1:
version "5.1.1"
resolved "https://registry.npmmirror.com/rc-tooltip/-/rc-tooltip-5.1.1.tgz#94178ed162d0252bc4993b725f5dc2ac0fccf154"
integrity sha512-alt8eGMJulio6+4/uDm7nvV+rJq9bsfxFDCI0ljPdbuoygUscbsMYb6EQgwib/uqsXQUvzk+S7A59uYHmEgmDA==
dependencies:
"@babel/runtime" "^7.11.2"
rc-trigger "^5.0.0"
rc-tree-select@~5.4.0:
version "5.4.0"
resolved "https://registry.npmmirror.com/rc-tree-select/-/rc-tree-select-5.4.0.tgz#c94b961aca68689f5ee3a43e33881cf693d195ef"
integrity sha512-reRbOqC7Ic/nQocJAJeCl4n6nJUY3NoqiwRXKvhjgZJU7NGr9vIccXEsY+Lghkw5UMpPoxGsIJB0jiAvM18XYA==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "2.x"
rc-select "~14.1.0"
rc-tree "~5.6.1"
rc-util "^5.16.1"
rc-tree@~5.6.1, rc-tree@~5.6.3, rc-tree@~5.6.5:
version "5.6.5"
resolved "https://registry.npmmirror.com/rc-tree/-/rc-tree-5.6.5.tgz#1947337fc48f3fe20fabaafb1aed3e4ff1ce71b4"
integrity sha512-Bnyen46B251APyRZ9D/jYeTnSqbSEvK2AkU5B4vWkNYgUJNPrxO+VMgcDRedP/8N7YcsgdDT9hxqVvNOq7oCAQ==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "2.x"
rc-motion "^2.0.1"
rc-util "^5.16.1"
rc-virtual-list "^3.4.8"
rc-trigger@^5.0.0, rc-trigger@^5.0.4, rc-trigger@^5.1.2, rc-trigger@^5.2.10, rc-trigger@^5.3.1:
version "5.3.1"
resolved "https://registry.npmmirror.com/rc-trigger/-/rc-trigger-5.3.1.tgz#acafadf3eaf384e7f466c303bfa0f34c8137d7b8"
integrity sha512-5gaFbDkYSefZ14j2AdzucXzlWgU2ri5uEjkHvsf1ynRhdJbKxNOnw4PBZ9+FVULNGFiDzzlVF8RJnR9P/xrnKQ==
dependencies:
"@babel/runtime" "^7.18.3"
classnames "^2.2.6"
rc-align "^4.0.0"
rc-motion "^2.0.0"
rc-util "^5.19.2"
rc-upload@~4.3.0:
version "4.3.4"
resolved "https://registry.npmmirror.com/rc-upload/-/rc-upload-4.3.4.tgz#83ff7d3867631c37adbfd72ea3d1fd7e97ca84af"
integrity sha512-uVbtHFGNjHG/RyAfm9fluXB6pvArAGyAx8z7XzXXyorEgVIWj6mOlriuDm0XowDHYz4ycNK0nE0oP3cbFnzxiQ==
dependencies:
"@babel/runtime" "^7.18.3"
classnames "^2.2.5"
rc-util "^5.2.0"
rc-util@^5.0.1, rc-util@^5.0.6, rc-util@^5.12.0, rc-util@^5.14.0, rc-util@^5.15.0, rc-util@^5.16.1, rc-util@^5.17.0, rc-util@^5.18.1, rc-util@^5.19.2, rc-util@^5.2.0, rc-util@^5.2.1, rc-util@^5.20.0, rc-util@^5.20.1, rc-util@^5.21.0, rc-util@^5.3.0, rc-util@^5.4.0, rc-util@^5.5.0, rc-util@^5.6.1, rc-util@^5.7.0, rc-util@^5.8.0, rc-util@^5.9.4, rc-util@^5.9.8:
version "5.21.5"
resolved "https://registry.npmmirror.com/rc-util/-/rc-util-5.21.5.tgz#6e2a5699f820ba915f43f11a4b7dfb0b0672d0fa"
integrity sha512-ip7HqX37Cy/RDl9MlrFp+FbcKnsWZ22sF5MS5eSpYLtg5MpC0TMqGb5ukBatoOhgjnLL+eJGR6e7YAJ/dhK09A==
dependencies:
"@babel/runtime" "^7.18.3"
react-is "^16.12.0"
shallowequal "^1.1.0"
rc-virtual-list@^3.2.0, rc-virtual-list@^3.4.8:
version "3.4.8"
resolved "https://registry.npmmirror.com/rc-virtual-list/-/rc-virtual-list-3.4.8.tgz#c24c10c6940546b7e2a5e9809402c6716adfd26c"
integrity sha512-qSN+Rv4i/E7RCTvTMr1uZo7f3crJJg/5DekoCagydo9zsXrxj07zsFSxqizqW+ldGA16lwa8So/bIbV9Ofjddg==
dependencies:
classnames "^2.2.6"
rc-resize-observer "^1.0.0"
rc-util "^5.15.0"
rc@^1.2.8: rc@^1.2.8:
version "1.2.8" version "1.2.8"
resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed" resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
...@@ -10870,12 +11630,12 @@ react-input-range@1.3.0: ...@@ -10870,12 +11630,12 @@ react-input-range@1.3.0:
autobind-decorator "^1.3.4" autobind-decorator "^1.3.4"
prop-types "^15.5.8" prop-types "^15.5.8"
react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
version "16.13.1" version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
react-is@^17.0.1: "react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1:
version "17.0.2" version "17.0.2"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
...@@ -10963,6 +11723,16 @@ react-toastify@8.0.2: ...@@ -10963,6 +11723,16 @@ react-toastify@8.0.2:
dependencies: dependencies:
clsx "^1.1.1" clsx "^1.1.1"
react-transition-group@^4.4.0:
version "4.4.5"
resolved "https://registry.npmmirror.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
dependencies:
"@babel/runtime" "^7.5.5"
dom-helpers "^5.0.1"
loose-envify "^1.4.0"
prop-types "^15.6.2"
react@17.0.2: react@17.0.2:
version "17.0.2" version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
...@@ -11314,7 +12084,7 @@ requires-port@^1.0.0: ...@@ -11314,7 +12084,7 @@ requires-port@^1.0.0:
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8= integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
resize-observer-polyfill@^1.4.2: resize-observer-polyfill@^1.4.2, resize-observer-polyfill@^1.5.1:
version "1.5.1" version "1.5.1"
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg== integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
...@@ -11525,6 +12295,15 @@ sass@1.39.0: ...@@ -11525,6 +12295,15 @@ sass@1.39.0:
dependencies: dependencies:
chokidar ">=3.0.0 <4.0.0" chokidar ">=3.0.0 <4.0.0"
sass@^1.3.0:
version "1.52.3"
resolved "https://registry.npmmirror.com/sass/-/sass-1.52.3.tgz#b7cc7ffea2341ccc9a0c4fd372bf1b3f9be1b6cb"
integrity sha512-LNNPJ9lafx+j1ArtA7GyEJm9eawXN8KlA1+5dF6IZyoONg1Tyo/g+muOsENWJH/2Q1FHbbV4UwliU0cXMa/VIA==
dependencies:
chokidar ">=3.0.0 <4.0.0"
immutable "^4.0.0"
source-map-js ">=0.6.2 <2.0.0"
sax@^1.2.4, sax@~1.2.4: sax@^1.2.4, sax@~1.2.4:
version "1.2.4" version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
...@@ -11556,6 +12335,13 @@ schema-utils@^3.1.0: ...@@ -11556,6 +12335,13 @@ schema-utils@^3.1.0:
ajv "^6.12.5" ajv "^6.12.5"
ajv-keywords "^3.5.2" ajv-keywords "^3.5.2"
scroll-into-view-if-needed@^2.2.25:
version "2.2.29"
resolved "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.29.tgz#551791a84b7e2287706511f8c68161e4990ab885"
integrity sha512-hxpAR6AN+Gh53AdAimHM6C8oTN1ppwVZITihix+WqalywBeFcQ6LdQP5ABNl26nX8GTEL7VT+b8lKpdqq65wXg==
dependencies:
compute-scroll-into-view "^1.0.17"
semver-compare@^1.0.0: semver-compare@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc" resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
...@@ -11806,6 +12592,14 @@ snowpack-plugin-copy@1.0.1: ...@@ -11806,6 +12592,14 @@ snowpack-plugin-copy@1.0.1:
dependencies: dependencies:
cpy "^8.1.1" cpy "^8.1.1"
snowpack-plugin-less@^1.0.7:
version "1.0.7"
resolved "https://registry.npmmirror.com/snowpack-plugin-less/-/snowpack-plugin-less-1.0.7.tgz#5017446e7f2a684c5deb553c5e3438429645876a"
integrity sha512-cuFVPltfS9nf0EayN0uigoelbGrhZ6DlEAPqnIT4sv2v0mRE+f+06eHfk4J/9wKz/5E2bYsLFXED9hjnf11b4Q==
dependencies:
less "^3.12.2"
tslib "^2.1.0"
snowpack@3.8.8: snowpack@3.8.8:
version "3.8.8" version "3.8.8"
resolved "https://registry.yarnpkg.com/snowpack/-/snowpack-3.8.8.tgz#237f1c0ad49c68313864f3aa4438db3affee0806" resolved "https://registry.yarnpkg.com/snowpack/-/snowpack-3.8.8.tgz#237f1c0ad49c68313864f3aa4438db3affee0806"
...@@ -11896,6 +12690,11 @@ sort-keys@^4.0.0: ...@@ -11896,6 +12690,11 @@ sort-keys@^4.0.0:
dependencies: dependencies:
is-plain-obj "^2.0.0" is-plain-obj "^2.0.0"
"source-map-js@>=0.6.2 <2.0.0":
version "1.0.2"
resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
source-map-js@^0.6.2: source-map-js@^0.6.2:
version "0.6.2" version "0.6.2"
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
...@@ -12057,6 +12856,11 @@ string-argv@0.3.1: ...@@ -12057,6 +12856,11 @@ string-argv@0.3.1:
resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da" resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg== integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==
string-convert@^0.2.0:
version "0.2.1"
resolved "https://registry.npmmirror.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
string-hash@^1.1.1: string-hash@^1.1.1:
version "1.1.3" version "1.1.3"
resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b" resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
...@@ -12519,7 +13323,7 @@ tiny-invariant@^1.0.2: ...@@ -12519,7 +13323,7 @@ tiny-invariant@^1.0.2:
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875" resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw== integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
tiny-warning@^1.0.0, tiny-warning@^1.0.3: tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
version "1.0.3" version "1.0.3"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
...@@ -12580,6 +13384,11 @@ to-regex@^3.0.1, to-regex@^3.0.2: ...@@ -12580,6 +13384,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
regex-not "^1.0.2" regex-not "^1.0.2"
safe-regex "^1.1.0" safe-regex "^1.1.0"
toggle-selection@^1.0.6:
version "1.0.6"
resolved "https://registry.npmmirror.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
toidentifier@1.0.0: toidentifier@1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553" resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
...@@ -12657,7 +13466,12 @@ tslib@1.9.3: ...@@ -12657,7 +13466,12 @@ tslib@1.9.3:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ== integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
tslib@^1.8.1, tslib@^1.9.0: tslib@2.3.0:
version "2.3.0"
resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
version "1.14.1" version "1.14.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
...@@ -12667,6 +13481,11 @@ tslib@^2.0.1, tslib@^2.0.3: ...@@ -12667,6 +13481,11 @@ tslib@^2.0.1, tslib@^2.0.3:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w== integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
tslib@^2.1.0:
version "2.4.0"
resolved "https://registry.npmmirror.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
tslib@^2.2.0: tslib@^2.2.0:
version "2.3.1" version "2.3.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
...@@ -12992,6 +13811,14 @@ urlencode@^1.1.0: ...@@ -12992,6 +13811,14 @@ urlencode@^1.1.0:
dependencies: dependencies:
iconv-lite "~0.4.11" iconv-lite "~0.4.11"
use-deep-compare-effect@^1.8.1:
version "1.8.1"
resolved "https://registry.npmmirror.com/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz#ef0ce3b3271edb801da1ec23bf0754ef4189d0c6"
integrity sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==
dependencies:
"@babel/runtime" "^7.12.5"
dequal "^2.0.2"
use@^3.1.0: use@^3.1.0:
version "3.1.1" version "3.1.1"
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
...@@ -13519,7 +14346,9 @@ yocto-queue@^0.1.0: ...@@ -13519,7 +14346,9 @@ yocto-queue@^0.1.0:
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
zrender@4.3.2, zrender@^4.0.4: zrender@5.3.2, zrender@^5.1.1:
version "4.3.2" version "5.3.2"
resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.3.2.tgz#ec7432f9415c82c73584b6b7b8c47e1b016209c6" resolved "https://registry.npmmirror.com/zrender/-/zrender-5.3.2.tgz#f67b11d36d3d020d62411d3bb123eb1c93cccd69"
integrity sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g== integrity sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==
dependencies:
tslib "2.3.0"
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或