pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge pull request #3 from owncast/gek/replace-charts 

Replace recharts with Chartkick
pull/1886/head
Gabe Kangas 5 years ago committed by GitHub
parent
4bcc60369a e3d6c2872e
commit
b4b140b609
7 changed files with 83 additions and 345 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 273
      web/package-lock.json
  2. 5
      web/package.json
  3. 128
      web/pages/components/chart.tsx
  4. 7
      web/pages/components/log-table.tsx
  5. 1
      web/pages/components/main-layout.tsx
  6. 3
      web/pages/hardware-info.tsx
  7. 11
      web/pages/viewer-info.tsx

273
web/package-lock.json generated
Unescape View File

@ -2741,6 +2741,37 @@ @@ -2741,6 +2741,37 @@
"resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
"integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg=="
},
"chart.js": {
"version": "2.9.4",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
"integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
"requires": {
"chartjs-color": "^2.1.0",
"moment": "^2.10.2"
}
},
"chartjs-color": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
"integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
"requires": {
"chartjs-color-string": "^0.6.0",
"color-convert": "^1.9.3"
}
},
"chartjs-color-string": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
"integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
"requires": {
"color-name": "^1.0.0"
}
},
"chartkick": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/chartkick/-/chartkick-3.2.1.tgz",
"integrity": "sha512-zV0kUeZNqrX28AmPt10QEDXHKadbVFOTAFkCMyJifHzGFkKzGCDXxVR8orZ0fC1HbePzRn5w6kLCOVxDQbMUCg=="
},
"chokidar": {
"version": "2.1.8",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
@ -2982,11 +3013,6 @@ @@ -2982,11 +3013,6 @@
"toggle-selection": "^1.0.6"
}
},
"core-js": {
"version": "2.6.11",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
"integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
},
"core-js-compat": {
"version": "3.6.5",
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.6.5.tgz",
@ -3211,72 +3237,6 @@ @@ -3211,72 +3237,6 @@
"type": "^1.0.1"
}
},
"d3-array": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.8.0.tgz",
"integrity": "sha512-6V272gsOeg7+9pTW1jSYOR1QE37g95I3my1hBmY+vOUNHRrk9yt4OTz/gK7PMkVAVDrYYq4mq3grTiZ8iJdNIw=="
},
"d3-collection": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
"integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
},
"d3-color": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
"integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
},
"d3-format": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
"integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
},
"d3-interpolate": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
"integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
"requires": {
"d3-color": "1 - 2"
}
},
"d3-path": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
"integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
},
"d3-scale": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.3.tgz",
"integrity": "sha512-8E37oWEmEzj57bHcnjPVOBS3n4jqakOeuv1EDdQSiSrYnMCBdMd3nc4HtKk7uia8DUHcY/CGuJ42xxgtEYrX0g==",
"requires": {
"d3-array": "^2.3.0",
"d3-format": "1 - 2",
"d3-interpolate": "1.2.0 - 2",
"d3-time": "1 - 2",
"d3-time-format": "2 - 3"
}
},
"d3-shape": {
"version": "1.3.7",
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
"integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
"requires": {
"d3-path": "1"
}
},
"d3-time": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.0.0.tgz",
"integrity": "sha512-2mvhstTFcMvwStWd9Tj3e6CEqtOivtD8AUiHT8ido/xmzrI9ijrUUihZ6nHuf/vsScRBonagOdj0Vv+SEL5G3Q=="
},
"d3-time-format": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
"integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
"requires": {
"d3-time": "1 - 2"
}
},
"damerau-levenshtein": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
@ -3309,11 +3269,6 @@ @@ -3309,11 +3269,6 @@
"ms": "2.1.2"
}
},
"decimal.js-light": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
"integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
},
"decode-uri-component": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
@ -3446,14 +3401,6 @@ @@ -3446,14 +3401,6 @@
"resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.0.tgz",
"integrity": "sha512-YkoezQuhp3SLFGdOlr5xkqZ640iXrnHAwVYcDg8ZKRUtO7mSzSC2BA5V0VuyAwPSJA4CLIc6EDDJh4bEsD2+zA=="
},
"dom-helpers": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
"integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
"requires": {
"@babel/runtime": "^7.1.2"
}
},
"dom-serializer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.0.1.tgz",
@ -5492,21 +5439,11 @@ @@ -5492,21 +5439,11 @@
"resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
"integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
},
"lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
},
"lodash.sortby": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
"integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
},
"lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
},
"loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@ -5551,11 +5488,6 @@ @@ -5551,11 +5488,6 @@
"object-visit": "^1.0.0"
}
},
"math-expression-evaluator": {
"version": "1.2.22",
"resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.22.tgz",
"integrity": "sha512-L0j0tFVZBQQLeEjmWOvDLoRciIY8gQGWahvkztXUal8jH8R5Rlqo9GCvgqvXcy9LQhEWdQCVvzqAbxgYNt4blQ=="
},
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@ -7299,6 +7231,14 @@ @@ -7299,6 +7231,14 @@
"prop-types": "^15.6.2"
}
},
"react-chartkick": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/react-chartkick/-/react-chartkick-0.4.1.tgz",
"integrity": "sha512-ydShYzYGCkphlUUMaN6gHHyS+Na9hRj1nvkSvB+cIU3E9JkGkj0Eiin7Y/NJ5165uiQtIbvuWvrPq2vbZHQmCA==",
"requires": {
"chartkick": "^3.2.0"
}
},
"react-dom": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
@ -7351,39 +7291,6 @@ @@ -7351,39 +7291,6 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
"integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
},
"react-resize-detector": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-2.3.0.tgz",
"integrity": "sha512-oCAddEWWeFWYH5FAcHdBYcZjAw9fMzRUK9sWSx6WvSSOPVRxcHd5zTIGy/mOus+AhN/u6T4TMiWxvq79PywnJQ==",
"requires": {
"lodash.debounce": "^4.0.8",
"lodash.throttle": "^4.1.1",
"prop-types": "^15.6.0",
"resize-observer-polyfill": "^1.5.0"
}
},
"react-smooth": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-1.0.5.tgz",
"integrity": "sha512-eW057HT0lFgCKh8ilr0y2JaH2YbNcuEdFpxyg7Gf/qDKk9hqGMyXryZJ8iMGJEuKH0+wxS0ccSsBBB3W8yCn8w==",
"requires": {
"lodash": "~4.17.4",
"prop-types": "^15.6.0",
"raf": "^3.4.0",
"react-transition-group": "^2.5.0"
}
},
"react-transition-group": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
"integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
"requires": {
"dom-helpers": "^3.4.0",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2",
"react-lifecycles-compat": "^3.0.4"
}
},
"read-pkg": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@ -7497,108 +7404,6 @@ @@ -7497,108 +7404,6 @@
"readable-stream": "^2.0.2"
}
},
"recharts": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-1.8.5.tgz",
"integrity": "sha512-tM9mprJbXVEBxjM7zHsIy6Cc41oO/pVYqyAsOHLxlJrbNBuLs0PHB3iys2M+RqCF0//k8nJtZF6X6swSkWY3tg==",
"requires": {
"classnames": "^2.2.5",
"core-js": "^2.6.10",
"d3-interpolate": "^1.3.0",
"d3-scale": "^2.1.0",
"d3-shape": "^1.2.0",
"lodash": "^4.17.5",
"prop-types": "^15.6.0",
"react-resize-detector": "^2.3.0",
"react-smooth": "^1.0.5",
"recharts-scale": "^0.4.2",
"reduce-css-calc": "^1.3.0"
},
"dependencies": {
"d3-array": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
"integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
},
"d3-color": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
"integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
},
"d3-format": {
"version": "1.4.5",
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
"integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
},
"d3-interpolate": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
"integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
"requires": {
"d3-color": "1"
}
},
"d3-scale": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
"integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
"requires": {
"d3-array": "^1.2.0",
"d3-collection": "1",
"d3-format": "1",
"d3-interpolate": "1",
"d3-time": "1",
"d3-time-format": "2"
}
},
"d3-time": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
"integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
},
"d3-time-format": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.3.0.tgz",
"integrity": "sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==",
"requires": {
"d3-time": "1"
}
}
}
},
"recharts-scale": {
"version": "0.4.3",
"resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.3.tgz",
"integrity": "sha512-t8p5sccG9Blm7c1JQK/ak9O8o95WGhNXD7TXg/BW5bYbVlr6eCeRBNpgyigD4p6pSSMehC5nSvBUPj6F68rbFA==",
"requires": {
"decimal.js-light": "^2.4.1"
}
},
"reduce-css-calc": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz",
"integrity": "sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=",
"requires": {
"balanced-match": "^0.4.2",
"math-expression-evaluator": "^1.2.14",
"reduce-function-call": "^1.0.1"
},
"dependencies": {
"balanced-match": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
"integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg="
}
}
},
"reduce-function-call": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/reduce-function-call/-/reduce-function-call-1.0.3.tgz",
"integrity": "sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ==",
"requires": {
"balanced-match": "^1.0.0"
}
},
"regenerate": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz",

5
web/package.json
Unescape View File

@ -10,17 +10,16 @@ @@ -10,17 +10,16 @@
"dependencies": {
"@ant-design/icons": "^4.2.2",
"antd": "^4.6.6",
"chart.js": "^2.9.4",
"classnames": "^2.2.6",
"d3-scale": "^3.2.3",
"d3-time-format": "^3.0.0",
"date-fns": "^2.16.1",
"next": "^10.0.0",
"prop-types": "^15.7.2",
"react": "16.13.1",
"react-chartkick": "^0.4.1",
"react-dom": "16.13.1",
"react-linkify": "^1.0.0-alpha",
"react-markdown": "^5.0.2",
"recharts": "^1.8.5",
"sass": "^1.26.11"
},
"devDependencies": {

128
web/pages/components/chart.tsx
Unescape View File

@ -1,13 +1,6 @@ @@ -1,13 +1,6 @@
import { LineChart, XAxis, YAxis, Line, Tooltip, Legend } from "recharts";
import { timeFormat } from "d3-time-format";
import useWindowSize from '../../utils/hook-windowresize';
import { LineChart } from 'react-chartkick'
import styles from '../../styles/styles.module.css';
interface ToolTipProps {
active?: boolean,
payload?: {name: string, payload: {value: string, time: Date}}[],
unit?: string
}
import 'chart.js'
const defaultProps = {
active: false,
@ -28,102 +21,45 @@ interface ChartProps { @@ -28,102 +21,45 @@ interface ChartProps {
dataCollections?: any[],
}
function CustomizedTooltip(props: ToolTipProps) {
const { active, payload, unit } = props;
if (active && payload && payload[0]) {
const time = payload[0].payload ? timeFormat("%I:%M")(new Date(payload[0].payload.time)) : "";
const tooltipDetails = payload.map(data => {
return <div className="label" key={data.name}>
{data.payload.value}{unit} {data.name}
</div>
});
return (
<span className="custom-tooltip">
<strong>{time}</strong>
{tooltipDetails}
</span>
);
}
return null;
function createGraphDataset(dataArray) {
const dataValues = {};
dataArray.forEach(item => {
const dateObject = new Date(item.time);
const dateString = `${dateObject.getFullYear() }-${ dateObject.getMonth() }-${ dateObject.getDay() } ${ dateObject.getHours() }:${ dateObject.getMinutes()}`;
dataValues[dateString] = item.value;
})
return dataValues;
}
CustomizedTooltip.defaultProps = defaultProps;
export default function Chart({ data, title, color, unit, dataCollections }: ChartProps) {
if (!data && !dataCollections) {
return null;
}
const windowSize = useWindowSize();
const chartWidth = windowSize.width * .68;
const chartHeight = chartWidth * .333;
const timeFormatter = (tick: string) => {
return timeFormat("%I:%M")(new Date(tick));
};
const renderData = [];
let ticks = [];
if (dataCollections.length > 0) {
ticks = dataCollections[0].data?.map((collection) => {
return collection?.time;
})
} else if (data?.length > 0){
ticks = data?.map(item => {
return item?.time;
if (data && data.length > 0) {
renderData.push({
name: title,
color,
data: createGraphDataset(data)
});
}
const line = data && data?.length > 0 ? (
<Line
key="line"
type="basis"
dataKey="value"
stroke={color}
dot={null}
strokeWidth={3}
legendType="square"
name={title}
data={data}
/>
) : null;
dataCollections.forEach(collection => {
renderData.push(
{name: collection.name, data: createGraphDataset(collection.data), color: collection.color}
)
});
return (
<div className={styles.lineChartContainer}>
<LineChart width={chartWidth} height={chartHeight}>
<XAxis
dataKey="time"
tickFormatter={timeFormatter}
interval="preserveStartEnd"
tickCount={5}
minTickGap={15}
domain={["dataMin", "dataMax"]}
ticks={ticks}
/>
<YAxis
dataKey="value"
interval="preserveStartEnd"
unit={unit}
domain={["dataMin", "dataMax"]}
/>
<Tooltip content={<CustomizedTooltip unit={unit} />} />
<Legend />
{line}
{dataCollections?.map((s) => (
<Line
dataKey="value"
data={s.data}
name={s.name}
key={s.name}
type="basis"
stroke={s.color}
dot={null}
strokeWidth={3}
legendType="square"
/>
))}
</LineChart>
</div>
);
<LineChart
className={styles.lineChartContainer}
xtitle="Time"
ytitle={title}
suffix={unit}
legend="bottom"
color={color}
data={renderData}
download={title}
/>
)
}
Chart.defaultProps = {

7
web/pages/components/log-table.tsx
Unescape View File

@ -1,5 +1,4 @@ @@ -1,5 +1,4 @@
import React from "react";
import { timeFormat } from "d3-time-format";
import { Table, Tag, Typography } from "antd";
import Linkify from "react-linkify";
import { SortOrder } from "antd/lib/table/interface";
@ -59,8 +58,10 @@ export default function LogTable({ logs, pageSize }: Props) { @@ -59,8 +58,10 @@ export default function LogTable({ logs, pageSize }: Props) {
title: "Timestamp",
dataIndex: "time",
key: "time",
render: (timestamp) =>
timeFormat("%H:%M:%S %m/%d/%Y")(new Date(timestamp)),
render: (timestamp) => {
const dateObject = new Date(timestamp);
return dateObject.getHours() + ":" + dateObject.getMinutes() + ":" + dateObject.getSeconds() + ' ' + dateObject.getFullYear() + "-" + (dateObject.getMonth() + 1) + "-" + dateObject.getDate();
},
sorter: (a, b) => new Date(a.time).getTime() - new Date(b.time).getTime(),
sortDirections: ["descend", "ascend"] as SortOrder[],
defaultSortOrder: "descend" as SortOrder,

1
web/pages/components/main-layout.tsx
Unescape View File

@ -60,7 +60,6 @@ export default function MainLayout(props) { @@ -60,7 +60,6 @@ export default function MainLayout(props) {
useEffect(() => {
if (!performedUpgradeCheck && !context.disableUpgradeChecks) {
checkForUpgrade();
console.log('checking')
performedUpgradeCheck = true
}
});

3
web/pages/hardware-info.tsx
Unescape View File

@ -73,7 +73,6 @@ const series = [ @@ -73,7 +73,6 @@ const series = [
return (
<div>
<div>
<h2>Hardware Info</h2>
<Row gutter={[16, 16]} justify="space-around">
<StatisticItem
title={series[0].name}
@ -102,7 +101,7 @@ const series = [ @@ -102,7 +101,7 @@ const series = [
</Row>
<div className="chart-container">
<Chart dataCollections={series} color="#FF7700" unit="%" />
<Chart title="% used" dataCollections={series} color="#FF7700" unit="%" />
</div>
</div>
</div>

11
web/pages/viewer-info.tsx
Unescape View File

@ -15,12 +15,12 @@ import { @@ -15,12 +15,12 @@ import {
fetchData,
} from "../utils/apis";
const FETCH_INTERVAL = 5 * 60 * 1000; // 5 mins
const FETCH_INTERVAL = 60 * 1000; // 1 min
export default function ViewersOverTime() {
const context = useContext(ServerStatusContext);
const {
broadcastActive,
online,
viewerCount,
overallPeakViewerCount,
sessionPeakViewerCount,
@ -49,7 +49,7 @@ export default function ViewersOverTime() { @@ -49,7 +49,7 @@ export default function ViewersOverTime() {
let getStatusIntervalId = null;
getInfo();
if (broadcastActive) {
if (online) {
getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
// returned function will be called on component unmount
return () => {
@ -58,7 +58,7 @@ export default function ViewersOverTime() { @@ -58,7 +58,7 @@ export default function ViewersOverTime() {
}
return () => [];
}, []);
}, [online]);
// todo - check to see if broadcast active has changed. if so, start polling.
@ -103,7 +103,6 @@ export default function ViewersOverTime() { @@ -103,7 +103,6 @@ export default function ViewersOverTime() {
return (
<div>
<h2>Current Viewers</h2>
<Row gutter={[16, 16]} justify="space-around">
<StatisticItem
title="Current viewers"
@ -124,7 +123,7 @@ export default function ViewersOverTime() { @@ -124,7 +123,7 @@ export default function ViewersOverTime() {
<div className="chart-container">
<Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="" />
</div>
<Table dataSource={clients} columns={columns} />
<Table dataSource={clients} columns={columns} rowKey={(row) => row.userAgent} />
</div>
);
}

Write Preview
Loading…
Cancel
Save