Move Composite logs to uPlot (#334)
This commit is contained in:
Piotr Rogowski
GitHub
parent
e27db357ce
commit
f94eded413
|
|
@ -24,7 +24,6 @@
|
|||
"react-scripts": "^4.0.3",
|
||||
"react-table-drag-select": "^0.3.1",
|
||||
"recharts": "^2.1.8",
|
||||
"timechart": "^1.0.0-beta.4",
|
||||
"uplot": "^1.6.18",
|
||||
"uplot-react": "^1.1.1"
|
||||
},
|
||||
|
|
@ -32,7 +31,7 @@
|
|||
"@craco/craco": "^6.4.3",
|
||||
"@speedy-tuner/eslint-config": "^0.1.3",
|
||||
"@types/d3": "^7.0.0",
|
||||
"@types/node": "^17.0.1",
|
||||
"@types/node": "^17.0.2",
|
||||
"@types/pako": "^1.0.2",
|
||||
"@types/react": "^17.0.37",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
|
|
@ -3759,9 +3758,9 @@
|
|||
"integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "17.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.1.tgz",
|
||||
"integrity": "sha512-NXKvBVUzIbs6ylBwmOwHFkZS2EXCcjnqr8ZCRNaXBkHAf+3mn/rPcJxwrzuc6movh8fxQAsUUfYklJ/EG+hZqQ=="
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.2.tgz",
|
||||
"integrity": "sha512-JepeIUPFDARgIs0zD/SKPgFsJEAF0X5/qO80llx59gOxFTboS9Amv3S+QfB7lqBId5sFXJ99BN0J6zFRvL9dDA=="
|
||||
},
|
||||
"node_modules/@types/normalize-package-data": {
|
||||
"version": "2.4.1",
|
||||
|
|
@ -7068,97 +7067,6 @@
|
|||
"type": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-array": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.1.1.tgz",
|
||||
"integrity": "sha512-33qQ+ZoZlli19IFiQx4QEpf2CBEayMRzhlisJHSCsSUbDXv6ZishqS1x7uFVClKG4Wr7rZVHvaAttoLow6GqdQ==",
|
||||
"dependencies": {
|
||||
"internmap": "1 - 2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-axis": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
|
||||
"integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-color": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.0.1.tgz",
|
||||
"integrity": "sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-format": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
|
||||
"integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-interpolate": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
|
||||
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
|
||||
"dependencies": {
|
||||
"d3-color": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-scale": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
|
||||
"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
|
||||
"dependencies": {
|
||||
"d3-array": "2.10.0 - 3",
|
||||
"d3-format": "1 - 3",
|
||||
"d3-interpolate": "1.2.0 - 3",
|
||||
"d3-time": "2.1.1 - 3",
|
||||
"d3-time-format": "2 - 4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-selection": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
|
||||
"integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.0.0.tgz",
|
||||
"integrity": "sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==",
|
||||
"dependencies": {
|
||||
"d3-array": "2 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time-format": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
|
||||
"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
|
||||
"dependencies": {
|
||||
"d3-time": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/damerau-levenshtein": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
|
||||
|
|
@ -10008,11 +9916,6 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/gl-matrix": {
|
||||
"version": "3.4.3",
|
||||
"resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
|
||||
"integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
|
||||
},
|
||||
"node_modules/glob": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
|
||||
|
|
@ -11001,14 +10904,6 @@
|
|||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/internmap": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
|
||||
"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/ip": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
|
||||
|
|
@ -20920,24 +20815,6 @@
|
|||
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
|
||||
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
|
||||
},
|
||||
"node_modules/timechart": {
|
||||
"version": "1.0.0-beta.4",
|
||||
"resolved": "https://registry.npmjs.org/timechart/-/timechart-1.0.0-beta.4.tgz",
|
||||
"integrity": "sha512-mWziioRsw9ClrqGV4UhqbXTCYTSHkQLWNn77P4LSLI1jKw/UN/RR/jwE8TerjcWOWz/rHVgZsKbu01UKTCmWQQ==",
|
||||
"dependencies": {
|
||||
"d3-axis": "^3.0.0",
|
||||
"d3-color": "^3.0.1",
|
||||
"d3-scale": "^4.0.2",
|
||||
"d3-selection": "^3.0.0",
|
||||
"gl-matrix": "^3.3.0",
|
||||
"tslib": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/timechart/node_modules/tslib": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
|
||||
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
|
||||
},
|
||||
"node_modules/timers-browserify": {
|
||||
"version": "2.0.12",
|
||||
"resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
|
||||
|
|
@ -26394,9 +26271,9 @@
|
|||
"integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "17.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.1.tgz",
|
||||
"integrity": "sha512-NXKvBVUzIbs6ylBwmOwHFkZS2EXCcjnqr8ZCRNaXBkHAf+3mn/rPcJxwrzuc6movh8fxQAsUUfYklJ/EG+hZqQ=="
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.2.tgz",
|
||||
"integrity": "sha512-JepeIUPFDARgIs0zD/SKPgFsJEAF0X5/qO80llx59gOxFTboS9Amv3S+QfB7lqBId5sFXJ99BN0J6zFRvL9dDA=="
|
||||
},
|
||||
"@types/normalize-package-data": {
|
||||
"version": "2.4.1",
|
||||
|
|
@ -29071,70 +28948,6 @@
|
|||
"type": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"d3-array": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.1.1.tgz",
|
||||
"integrity": "sha512-33qQ+ZoZlli19IFiQx4QEpf2CBEayMRzhlisJHSCsSUbDXv6ZishqS1x7uFVClKG4Wr7rZVHvaAttoLow6GqdQ==",
|
||||
"requires": {
|
||||
"internmap": "1 - 2"
|
||||
}
|
||||
},
|
||||
"d3-axis": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
|
||||
"integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="
|
||||
},
|
||||
"d3-color": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.0.1.tgz",
|
||||
"integrity": "sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw=="
|
||||
},
|
||||
"d3-format": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
|
||||
"integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="
|
||||
},
|
||||
"d3-interpolate": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
|
||||
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
|
||||
"requires": {
|
||||
"d3-color": "1 - 3"
|
||||
}
|
||||
},
|
||||
"d3-scale": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
|
||||
"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
|
||||
"requires": {
|
||||
"d3-array": "2.10.0 - 3",
|
||||
"d3-format": "1 - 3",
|
||||
"d3-interpolate": "1.2.0 - 3",
|
||||
"d3-time": "2.1.1 - 3",
|
||||
"d3-time-format": "2 - 4"
|
||||
}
|
||||
},
|
||||
"d3-selection": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
|
||||
"integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
|
||||
},
|
||||
"d3-time": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.0.0.tgz",
|
||||
"integrity": "sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==",
|
||||
"requires": {
|
||||
"d3-array": "2 - 3"
|
||||
}
|
||||
},
|
||||
"d3-time-format": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
|
||||
"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
|
||||
"requires": {
|
||||
"d3-time": "1 - 3"
|
||||
}
|
||||
},
|
||||
"damerau-levenshtein": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
|
||||
|
|
@ -31292,11 +31105,6 @@
|
|||
"resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
|
||||
"integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg="
|
||||
},
|
||||
"gl-matrix": {
|
||||
"version": "3.4.3",
|
||||
"resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
|
||||
"integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
|
||||
},
|
||||
"glob": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
|
||||
|
|
@ -32050,11 +31858,6 @@
|
|||
"side-channel": "^1.0.4"
|
||||
}
|
||||
},
|
||||
"internmap": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
|
||||
"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="
|
||||
},
|
||||
"ip": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
|
||||
|
|
@ -39727,26 +39530,6 @@
|
|||
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
|
||||
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
|
||||
},
|
||||
"timechart": {
|
||||
"version": "1.0.0-beta.4",
|
||||
"resolved": "https://registry.npmjs.org/timechart/-/timechart-1.0.0-beta.4.tgz",
|
||||
"integrity": "sha512-mWziioRsw9ClrqGV4UhqbXTCYTSHkQLWNn77P4LSLI1jKw/UN/RR/jwE8TerjcWOWz/rHVgZsKbu01UKTCmWQQ==",
|
||||
"requires": {
|
||||
"d3-axis": "^3.0.0",
|
||||
"d3-color": "^3.0.1",
|
||||
"d3-scale": "^4.0.2",
|
||||
"d3-selection": "^3.0.0",
|
||||
"gl-matrix": "^3.3.0",
|
||||
"tslib": "^2.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
|
||||
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"timers-browserify": {
|
||||
"version": "2.0.12",
|
||||
"resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@
|
|||
"react-scripts": "^4.0.3",
|
||||
"react-table-drag-select": "^0.3.1",
|
||||
"recharts": "^2.1.8",
|
||||
"timechart": "^1.0.0-beta.4",
|
||||
"uplot": "^1.6.18",
|
||||
"uplot-react": "^1.1.1"
|
||||
},
|
||||
|
|
@ -53,7 +52,7 @@
|
|||
"@craco/craco": "^6.4.3",
|
||||
"@speedy-tuner/eslint-config": "^0.1.3",
|
||||
"@types/d3": "^7.0.0",
|
||||
"@types/node": "^17.0.1",
|
||||
"@types/node": "^17.0.2",
|
||||
"@types/pako": "^1.0.2",
|
||||
"@types/react": "^17.0.37",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
import {
|
||||
Popover,
|
||||
Space,
|
||||
Typography,
|
||||
} from 'antd';
|
||||
import { QuestionCircleOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Text, Title } = Typography;
|
||||
|
||||
const CanvasHelp = () => (
|
||||
<div style={{ marginTop: -20, marginBottom: 10, textAlign: 'left', marginLeft: 20 }}>
|
||||
<Popover
|
||||
placement="bottom"
|
||||
content={
|
||||
<Space direction="vertical">
|
||||
<Title level={5}>Navigation</Title>
|
||||
<Text>Pinch to zoom</Text>
|
||||
<Text>Drag to pan</Text>
|
||||
<Text>Ctrl + wheel scroll to zoom X axis</Text>
|
||||
<Text>Hold Shift to speed up zoom 5 times</Text>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<QuestionCircleOutlined />
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default CanvasHelp;
|
||||
|
|
@ -66,8 +66,15 @@ const Diagnose = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loa
|
|||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
const margin = 30;
|
||||
const [canvasWidth, setCanvasWidth] = useState(0);
|
||||
const [canvasHeight, setCanvasHeight] = useState(0);
|
||||
const sidebarWidth = 250;
|
||||
const calculateCanvasWidth = useCallback(() => setCanvasWidth((contentRef.current?.clientWidth || 0) - margin), []);
|
||||
const calculateCanvasSize = useCallback(() => {
|
||||
setCanvasWidth((contentRef.current?.clientWidth || 0) - margin);
|
||||
|
||||
if (window.innerHeight > 600) {
|
||||
setCanvasHeight(Math.round((window.innerHeight - 250) / 2));
|
||||
}
|
||||
}, []);
|
||||
const siderProps = {
|
||||
width: sidebarWidth,
|
||||
collapsible: true,
|
||||
|
|
@ -75,7 +82,6 @@ const Diagnose = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loa
|
|||
collapsed: ui.sidebarCollapsed,
|
||||
onCollapse: (collapsed: boolean) => {
|
||||
store.dispatch({ type: 'ui/sidebarCollapsed', payload: collapsed });
|
||||
setTimeout(calculateCanvasWidth, 1);
|
||||
},
|
||||
};
|
||||
const [logs, setLogs] = useState<CompositeLogEntry[]>();
|
||||
|
|
@ -113,15 +119,15 @@ const Diagnose = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loa
|
|||
};
|
||||
|
||||
loadData();
|
||||
calculateCanvasWidth();
|
||||
calculateCanvasSize();
|
||||
|
||||
window.addEventListener('resize', calculateCanvasWidth);
|
||||
window.addEventListener('resize', calculateCanvasSize);
|
||||
|
||||
return () => {
|
||||
controller.abort();
|
||||
window.removeEventListener('resize', calculateCanvasWidth);
|
||||
window.removeEventListener('resize', calculateCanvasSize);
|
||||
};
|
||||
}, [calculateCanvasWidth, loadedLogs]);
|
||||
}, [calculateCanvasSize, loadedLogs, ui.sidebarCollapsed]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -146,18 +152,18 @@ const Diagnose = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loa
|
|||
{toothLogs && logs
|
||||
?
|
||||
(
|
||||
<>
|
||||
<Space direction="vertical" size="large">
|
||||
<ToothCanvas
|
||||
data={toothLogs!}
|
||||
width={canvasWidth}
|
||||
height={canvasWidth * 0.3}
|
||||
height={canvasHeight}
|
||||
/>
|
||||
<CompositeCanvas
|
||||
data={logs!}
|
||||
width={canvasWidth}
|
||||
height={canvasWidth * 0.3}
|
||||
height={canvasHeight}
|
||||
/>
|
||||
</>
|
||||
</Space>
|
||||
)
|
||||
:
|
||||
<Space
|
||||
|
|
|
|||
|
|
@ -1,16 +1,13 @@
|
|||
import {
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { Grid } from 'antd';
|
||||
import TimeChart from 'timechart';
|
||||
import { EventsPlugin } from 'timechart/dist/lib/plugins_extra/events';
|
||||
import UplotReact from 'uplot-react';
|
||||
import uPlot from 'uplot';
|
||||
import touchZoomPlugin from '../../utils/uPlot/touchZoomPlugin';
|
||||
import LandscapeNotice from '../Dialog/LandscapeNotice';
|
||||
import {
|
||||
CompositeLogEntry,
|
||||
EntryType,
|
||||
} from '../../utils/logs/TriggerLogsParser';
|
||||
import CanvasHelp from '../CanvasHelp';
|
||||
import { CompositeLogEntry } from '../../utils/logs/TriggerLogsParser';
|
||||
import { Colors } from '../../utils/colors';
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
|
@ -21,108 +18,94 @@ interface Props {
|
|||
height: number;
|
||||
};
|
||||
|
||||
interface DataPoint {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
const CompositeCanvas = ({ data, width, height }: Props) => {
|
||||
const { sm } = useBreakpoint();
|
||||
const canvasRef = useRef<HTMLDivElement | null>(null);
|
||||
const [options, setOptions] = useState<uPlot.Options>();
|
||||
const [plotData, setPlotData] = useState<uPlot.AlignedData>();
|
||||
|
||||
useEffect(() => {
|
||||
let chart: TimeChart;
|
||||
const markers: { x: number, name: string }[] = [];
|
||||
const primary: DataPoint[] = [];
|
||||
const secondary: DataPoint[] = [];
|
||||
const sync: DataPoint[] = [];
|
||||
const xData: number[] = [];
|
||||
const secondary: (number | null)[] = [];
|
||||
const primary: (number | null)[] = [];
|
||||
const sync: (number | null)[] = [];
|
||||
|
||||
data.forEach((entry, index) => {
|
||||
if (entry.type === EntryType.MARKER) {
|
||||
markers.push({
|
||||
x: index,
|
||||
name: '',
|
||||
});
|
||||
}
|
||||
const prevSecondary = data[index - 1] ? data[index - 1].secondaryLevel : 0;
|
||||
const currentSecondary = (entry.secondaryLevel + 3) * 2; // apply scale
|
||||
|
||||
if (entry.type === EntryType.TRIGGER) {
|
||||
const prevSecondary = data[index - 1] ? data[index - 1].secondaryLevel : 0;
|
||||
const currentSecondary = (entry.secondaryLevel + 3) * 2; // apply scale
|
||||
const prevPrimary = data[index - 1] ? data[index - 1].primaryLevel : 0;
|
||||
const currentPrimary = (entry.primaryLevel + 1) * 2;
|
||||
|
||||
const prevPrimary = data[index - 1] ? data[index - 1].primaryLevel : 0;
|
||||
const currentPrimary = (entry.primaryLevel + 1) * 2; // apply scale
|
||||
const prevSync = data[index - 1] ? data[index - 1].sync : 0;
|
||||
const currentSync = entry.sync;
|
||||
|
||||
const prevSync = data[index - 1] ? data[index - 1].sync : 0;
|
||||
const currentSync = entry.sync;
|
||||
// base data
|
||||
xData.push(index);
|
||||
secondary.push(currentSecondary);
|
||||
primary.push(currentPrimary);
|
||||
sync.push(currentSync);
|
||||
|
||||
// make it square
|
||||
if (prevSecondary !== currentSecondary) {
|
||||
secondary.push({
|
||||
x: index - 1,
|
||||
y: currentSecondary,
|
||||
});
|
||||
}
|
||||
secondary.push({
|
||||
x: index,
|
||||
y: currentSecondary,
|
||||
});
|
||||
|
||||
if (prevPrimary !== currentPrimary) {
|
||||
primary.push({
|
||||
x: index - 1,
|
||||
y: currentPrimary,
|
||||
});
|
||||
}
|
||||
primary.push({
|
||||
x: index,
|
||||
y: currentPrimary,
|
||||
});
|
||||
|
||||
if (prevSync !== currentSync) {
|
||||
sync.push({
|
||||
x: index - 1,
|
||||
y: currentSync,
|
||||
});
|
||||
}
|
||||
sync.push({
|
||||
x: index,
|
||||
y: currentSync,
|
||||
});
|
||||
// make it square
|
||||
if (prevSecondary !== currentSecondary || prevPrimary !== currentPrimary || prevSync !== currentSync) {
|
||||
secondary.push(currentSecondary);
|
||||
primary.push(currentPrimary);
|
||||
sync.push(currentSync);
|
||||
xData.push(index + 1);
|
||||
}
|
||||
});
|
||||
|
||||
const series = [{
|
||||
name: 'Secondary',
|
||||
color: Colors.GREEN,
|
||||
data: secondary,
|
||||
}, {
|
||||
name: 'Primary',
|
||||
color: Colors.BLUE,
|
||||
data: primary,
|
||||
}, {
|
||||
name: 'Sync',
|
||||
color: Colors.RED,
|
||||
data: sync,
|
||||
}];
|
||||
setPlotData([
|
||||
xData,
|
||||
[...secondary],
|
||||
[...primary],
|
||||
[...sync],
|
||||
]);
|
||||
|
||||
if (canvasRef.current && sm) {
|
||||
chart = new TimeChart(canvasRef.current, {
|
||||
series,
|
||||
lineWidth: 2,
|
||||
tooltip: true,
|
||||
legend: false,
|
||||
zoom: {
|
||||
x: { autoRange: true },
|
||||
setOptions({
|
||||
width,
|
||||
height,
|
||||
scales: {
|
||||
x: { time: false },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
label: 'Event',
|
||||
},
|
||||
yRange: { min: -1, max: 9 },
|
||||
tooltipXLabel: 'Event',
|
||||
plugins: {
|
||||
events: new EventsPlugin(markers),
|
||||
{
|
||||
label: 'Secondary',
|
||||
points: { show: false },
|
||||
stroke: Colors.GREEN,
|
||||
scale: '',
|
||||
value: (_self, rawValue) => (rawValue / 2) - 3,
|
||||
width: 2,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return () => chart && chart.dispose();
|
||||
{
|
||||
label: 'Primary',
|
||||
points: { show: false },
|
||||
stroke: Colors.ACCENT,
|
||||
scale: '',
|
||||
value: (_self, rawValue) => (rawValue / 2) - 1,
|
||||
width: 2,
|
||||
},
|
||||
{
|
||||
label: 'Sync',
|
||||
points: { show: false },
|
||||
stroke: Colors.RED,
|
||||
scale: '',
|
||||
width: 2,
|
||||
},
|
||||
],
|
||||
axes: [
|
||||
{
|
||||
stroke: Colors.TEXT,
|
||||
grid: { stroke: Colors.MAIN_LIGHT },
|
||||
},
|
||||
],
|
||||
cursor: {
|
||||
drag: { y: false },
|
||||
},
|
||||
plugins: [touchZoomPlugin()],
|
||||
});
|
||||
}, [data, width, height, sm]);
|
||||
|
||||
if (!sm) {
|
||||
|
|
@ -130,14 +113,10 @@ const CompositeCanvas = ({ data, width, height }: Props) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<CanvasHelp />
|
||||
<div
|
||||
ref={canvasRef}
|
||||
style={{ width, height }}
|
||||
className="log-canvas"
|
||||
/>
|
||||
</>
|
||||
<UplotReact
|
||||
options={options!}
|
||||
data={plotData!}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ import {
|
|||
ToothLogEntry,
|
||||
EntryType,
|
||||
} from '../../utils/logs/TriggerLogsParser';
|
||||
import CanvasHelp from '../CanvasHelp';
|
||||
import { Colors } from '../../utils/colors';
|
||||
|
||||
import 'uplot/dist/uPlot.min.css';
|
||||
|
|
@ -47,7 +46,6 @@ const ToothCanvas = ({ data, width, height }: Props) => {
|
|||
]);
|
||||
|
||||
setOptions({
|
||||
title: 'Tooth logs',
|
||||
width,
|
||||
height,
|
||||
scales: {
|
||||
|
|
@ -91,13 +89,10 @@ const ToothCanvas = ({ data, width, height }: Props) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<CanvasHelp />
|
||||
<UplotReact
|
||||
options={options!}
|
||||
data={plotData!}
|
||||
/>
|
||||
</>
|
||||
<UplotReact
|
||||
options={options!}
|
||||
data={plotData!}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue