mirror of
https://github.com/apricote/Listory.git
synced 2026-01-13 21:21:02 +00:00
fix(frontend): improve reporting charts
This commit is contained in:
parent
8c5f495ce5
commit
bdbe5f574a
3 changed files with 179 additions and 340 deletions
282
frontend/package-lock.json
generated
282
frontend/package-lock.json
generated
|
|
@ -1933,34 +1933,16 @@
|
|||
"@babel/types": "^7.3.0"
|
||||
}
|
||||
},
|
||||
"@types/classnames": {
|
||||
"version": "2.2.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.10.tgz",
|
||||
"integrity": "sha512-1UzDldn9GfYYEsWWnn/P4wkTlkZDH7lDb0wBMGbtIQc9zXEQq7FlKBdZUn6OBqD8sKZZ2RQO2mAjGpXiDGoRmQ=="
|
||||
},
|
||||
"@types/color-name": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
|
||||
"integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
|
||||
},
|
||||
"@types/d3-array": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-2.0.0.tgz",
|
||||
"integrity": "sha512-rGqfPVowNDTszSFvwoZIXvrPG7s/qKzm9piCRIH6xwTTRu7pPZ3ootULFnPkTt74B6i5lN0FpLQL24qGOw1uZA=="
|
||||
},
|
||||
"@types/d3-path": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.8.tgz",
|
||||
"integrity": "sha512-AZGHWslq/oApTAHu9+yH/Bnk63y9oFOMROtqPAtxl5uB6qm1x2lueWdVEjsjjV3Qc2+QfuzKIwIR5MvVBakfzA=="
|
||||
},
|
||||
"@types/d3-scale": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-2.2.0.tgz",
|
||||
"integrity": "sha512-oQFanN0/PiR2oySHfj+zAAkK1/p4LD32Nt1TMVmzk+bYHk7vgIg/iTXQWitp1cIkDw4LMdcgvO63wL+mNs47YA==",
|
||||
"requires": {
|
||||
"@types/d3-time": "*"
|
||||
}
|
||||
},
|
||||
"@types/d3-shape": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.2.tgz",
|
||||
|
|
@ -1969,11 +1951,6 @@
|
|||
"@types/d3-path": "*"
|
||||
}
|
||||
},
|
||||
"@types/d3-time": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.0.10.tgz",
|
||||
"integrity": "sha512-aKf62rRQafDQmSiv1NylKhIMmznsjRN+MnXRXTqHoqm0U/UZzVpdrtRnSIfdiLS616OuC1soYeX1dBg2n1u8Xw=="
|
||||
},
|
||||
"@types/eslint-visitor-keys": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
|
||||
|
|
@ -2137,11 +2114,6 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
|
||||
"integrity": "sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA=="
|
||||
},
|
||||
"@types/lodash": {
|
||||
"version": "4.14.150",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.150.tgz",
|
||||
"integrity": "sha512-kMNLM5JBcasgYscD9x/Gvr6lTAv2NVgsKtet/hm93qMyf/D1pt+7jeEZklKJKxMVmXjxbRVQQGfqDSfipYCO6w=="
|
||||
},
|
||||
"@types/minimatch": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
|
||||
|
|
@ -2203,6 +2175,21 @@
|
|||
"@types/react-router": "*"
|
||||
}
|
||||
},
|
||||
"@types/recharts": {
|
||||
"version": "1.8.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/recharts/-/recharts-1.8.10.tgz",
|
||||
"integrity": "sha512-XHVagR/eJFTTeYGygNuZIiMhNpwGjjf5+8clc6ST27sReecEZN7YTRWlZVvMyN0sJRIhABTLnhoIU+5Gts9+yQ==",
|
||||
"requires": {
|
||||
"@types/d3-shape": "*",
|
||||
"@types/react": "*",
|
||||
"@types/recharts-scale": "*"
|
||||
}
|
||||
},
|
||||
"@types/recharts-scale": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/recharts-scale/-/recharts-scale-1.0.0.tgz",
|
||||
"integrity": "sha512-HR/PrCcxYb2YHviTqH7CMdL1TUhUZLTUKzfrkMhxm1HTa5mg/QtP8XMiuSPz6dZ6wecazAOu8aYZ5DqkNlgHHQ=="
|
||||
},
|
||||
"@types/stack-utils": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
|
||||
|
|
@ -2463,126 +2450,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"@vx/axis": {
|
||||
"version": "0.0.196",
|
||||
"resolved": "https://registry.npmjs.org/@vx/axis/-/axis-0.0.196.tgz",
|
||||
"integrity": "sha512-AtVjoDXCmecKRp671ATV9Qky/MpQY1pV/O1VWULxhq5dujKXWPj0GtnuRR7I7VgB0XCoKpEh12gVTi7dUq2FhQ==",
|
||||
"requires": {
|
||||
"@types/classnames": "^2.2.9",
|
||||
"@types/react": "*",
|
||||
"@vx/group": "0.0.196",
|
||||
"@vx/point": "0.0.196",
|
||||
"@vx/shape": "0.0.196",
|
||||
"@vx/text": "0.0.196",
|
||||
"classnames": "^2.2.5",
|
||||
"prop-types": "^15.6.0"
|
||||
}
|
||||
},
|
||||
"@vx/curve": {
|
||||
"version": "0.0.196",
|
||||
"resolved": "https://registry.npmjs.org/@vx/curve/-/curve-0.0.196.tgz",
|
||||
"integrity": "sha512-uGucJuuAOa0ezrSTqQE8BHkyNPAwGV1bNB8BP1V5Ln1GA7o0LBkqwHOdzShkFzsVoeDadRRGy2mNga6gHDGh8A==",
|
||||
"requires": {
|
||||
"@types/d3-shape": "^1.3.1",
|
||||
"d3-shape": "^1.0.6"
|
||||
}
|
||||
},
|
||||
"@vx/gradient": {
|
||||
"version": "0.0.196",
|
||||
"resolved": "https://registry.npmjs.org/@vx/gradient/-/gradient-0.0.196.tgz",
|
||||
"integrity": "sha512-euz0GRKIMXil7cx3Bx9lVmgfncz3M2Yv2+AEMyRiBe3Ln3Y04rTP2W6o94bvQ+TXWRD5U18LPQQg7Myr6cnFDA==",
|
||||
"requires": {
|
||||
"@types/react": "*",
|
||||
"prop-types": "^15.5.7"
|
||||
}
|
||||
},
|
||||
"@vx/grid": {
|
||||
"version": "0.0.196",
|
||||
"resolved": "https://registry.npmjs.org/@vx/grid/-/grid-0.0.196.tgz",
|
||||
"integrity": "sha512-u9zqpRA+k2qfickspWHCAgpqg/Sq55T3e3crPUvuAOsqiX/7doOd+LKbJJv0LRq6PVufdVRUBthTsW5F5qffrg==",
|
||||
"requires": {
|
||||
"@types/classnames": "^2.2.9",
|
||||
"@types/react": "*",
|
||||
"@vx/group": "0.0.196",
|
||||
"@vx/point": "0.0.196",
|
||||
"@vx/shape": "0.0.196",
|
||||
"classnames": "^2.2.5",
|
||||
"prop-types": "^15.6.2"
|
||||
}
|
||||
},
|
||||
"@vx/group": {
|
||||
"version": "0.0.196",
|
||||
"resolved": "https://registry.npmjs.org/@vx/group/-/group-0.0.196.tgz",
|
||||
"integrity": "sha512-neWYucGoyrWloEali12yEn//5pRVwSBtKpuzKlQ43yYTav8OLa869DtCSVeRlDG8TIcPvg9YWfWKKhGWKXRCtg==",
|
||||
"requires": {
|
||||
"@types/classnames": "^2.2.9",
|
||||
"@types/react": "*",
|
||||
"classnames": "^2.2.5",
|
||||
"prop-types": "^15.6.2"
|
||||
}
|
||||
},
|
||||
"@vx/point": {
|
||||
"version": "0.0.196",
|
||||
"resolved": "https://registry.npmjs.org/@vx/point/-/point-0.0.196.tgz",
|
||||
"integrity": "sha512-dya1cwMwqQtRP+oQwC5x0N2bCiKENGqDd6Y4IuAKwkWMvxpjOAPoOlglZ9QKLDPzftUqLFxrjrsT5RlHTxyKnw=="
|
||||
},
|
||||
"@vx/scale": {
|
||||
"version": "0.0.196",
|
||||
"resolved": "https://registry.npmjs.org/@vx/scale/-/scale-0.0.196.tgz",
|
||||
"integrity": "sha512-s3lVbwEni0F9AGACaJG3m071uXVryoOgogiU6+yXv1O1gUoZMMm6AjzCndcz9jq1sCFDNcIrxyf5LomOA2tQaQ==",
|
||||
"requires": {
|
||||
"@types/d3-scale": "^2.1.1",
|
||||
"d3-scale": "^2.2.2"
|
||||
}
|
||||
},
|
||||
"@vx/shape": {
|
||||
"version": "0.0.196",
|
||||
"resolved": "https://registry.npmjs.org/@vx/shape/-/shape-0.0.196.tgz",
|
||||
"integrity": "sha512-09s4yv0IKmUrB/z/bRLW936DzbhbsxExHv0ocowh2Zv3zgObAaeyf0MkkLyr1nDTqKDCZlfwOEM+1moOyBFQBA==",
|
||||
"requires": {
|
||||
"@types/classnames": "^2.2.9",
|
||||
"@types/d3-path": "^1.0.8",
|
||||
"@types/d3-shape": "^1.3.1",
|
||||
"@types/react": "*",
|
||||
"@vx/curve": "0.0.196",
|
||||
"@vx/group": "0.0.196",
|
||||
"classnames": "^2.2.5",
|
||||
"d3-path": "^1.0.5",
|
||||
"d3-shape": "^1.2.0",
|
||||
"prop-types": "^15.5.10"
|
||||
}
|
||||
},
|
||||
"@vx/text": {
|
||||
"version": "0.0.196",
|
||||
"resolved": "https://registry.npmjs.org/@vx/text/-/text-0.0.196.tgz",
|
||||
"integrity": "sha512-KhhOtQyzqcZvO/cgYdMrsLLf0LYFT0u1cqJ4j8RVD8JcmTrhHmzFvL9lE6OXADroZxTSOFY3mNIbAPlshIabpw==",
|
||||
"requires": {
|
||||
"@types/classnames": "^2.2.9",
|
||||
"@types/lodash": "^4.14.146",
|
||||
"@types/react": "*",
|
||||
"classnames": "^2.2.5",
|
||||
"lodash": "^4.17.15",
|
||||
"prop-types": "^15.7.2",
|
||||
"reduce-css-calc": "^1.3.0"
|
||||
},
|
||||
"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-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"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@webassemblyjs/ast": {
|
||||
"version": "1.8.5",
|
||||
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
|
||||
|
|
@ -4769,11 +4636,6 @@
|
|||
"type": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"d3-array": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.4.0.tgz",
|
||||
"integrity": "sha512-KQ41bAF2BMakf/HdKT865ALd4cgND6VcIztVQZUTt0+BH3RWy6ZYnHghVXf6NFjt2ritLr8H1T8LreAAlfiNcw=="
|
||||
},
|
||||
"d3-collection": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
|
||||
|
|
@ -4896,6 +4758,11 @@
|
|||
"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
|
||||
"integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
|
||||
},
|
||||
"decimal.js-light": {
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.0.tgz",
|
||||
"integrity": "sha512-b3VJCbd2hwUpeRGG3Toob+CRo8W22xplipNhP3tN7TSVB/cyMX71P1vM2Xjc9H74uV6dS2hDDmo/rHq8L87Upg=="
|
||||
},
|
||||
"decode-uri-component": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
|
||||
|
|
@ -5182,6 +5049,14 @@
|
|||
"utila": "~0.4"
|
||||
}
|
||||
},
|
||||
"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": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
|
||||
|
|
@ -9798,6 +9673,11 @@
|
|||
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
|
||||
"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
|
||||
},
|
||||
"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.memoize": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
|
||||
|
|
@ -9825,6 +9705,11 @@
|
|||
"lodash._reinterpolate": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"lodash.throttle": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
|
||||
"integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
|
||||
},
|
||||
"lodash.toarray": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
|
||||
|
|
@ -12899,6 +12784,22 @@
|
|||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"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-router": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz",
|
||||
|
|
@ -13034,6 +12935,28 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"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-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
|
|
@ -13134,6 +13057,54 @@
|
|||
"util.promisify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"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": {
|
||||
"balanced-match": {
|
||||
"version": "0.4.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
|
||||
"integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg="
|
||||
},
|
||||
"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=="
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"recursive-readdir": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
|
||||
|
|
@ -13395,6 +13366,11 @@
|
|||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
|
||||
},
|
||||
"resize-observer-polyfill": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
|
||||
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.17.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
|
||||
|
|
|
|||
|
|
@ -12,21 +12,13 @@
|
|||
"@testing-library/jest-dom": "5.5.0",
|
||||
"@testing-library/react": "10.0.4",
|
||||
"@testing-library/user-event": "10.1.0",
|
||||
"@types/d3-array": "2.0.0",
|
||||
"@types/jest": "25.2.1",
|
||||
"@types/node": "12.12.38",
|
||||
"@types/react": "16.9.34",
|
||||
"@types/react-dom": "16.9.7",
|
||||
"@types/react-router-dom": "5.1.5",
|
||||
"@vx/axis": "0.0.196",
|
||||
"@vx/curve": "0.0.196",
|
||||
"@vx/gradient": "0.0.196",
|
||||
"@vx/grid": "0.0.196",
|
||||
"@vx/group": "0.0.196",
|
||||
"@vx/scale": "0.0.196",
|
||||
"@vx/shape": "0.0.196",
|
||||
"@types/recharts": "1.8.10",
|
||||
"autoprefixer": "9.7.6",
|
||||
"d3-array": "2.4.0",
|
||||
"date-fns": "2.13.0",
|
||||
"npm-run-all": "4.1.5",
|
||||
"postcss-cli": "7.1.1",
|
||||
|
|
@ -35,6 +27,7 @@
|
|||
"react-dom": "16.13.1",
|
||||
"react-router-dom": "5.1.2",
|
||||
"react-scripts": "3.4.1",
|
||||
"recharts": "1.8.5",
|
||||
"tailwindcss": "1.4.5",
|
||||
"typescript": "3.8.3"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
import { AxisBottom, AxisLeft } from "@vx/axis";
|
||||
import { curveBasis } from "@vx/curve";
|
||||
import { GradientLightgreenGreen } from "@vx/gradient";
|
||||
import { Grid } from "@vx/grid";
|
||||
import { Group } from "@vx/group";
|
||||
import { scaleLinear, scaleTime } from "@vx/scale";
|
||||
import { Area, Line, LinePath } from "@vx/shape";
|
||||
import { extent } from "d3-array";
|
||||
import { format, getTime } from "date-fns";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Redirect } from "react-router-dom";
|
||||
import {
|
||||
Area,
|
||||
AreaChart,
|
||||
CartesianGrid,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import { getListensReport } from "../api/api";
|
||||
import { ListenReportItem } from "../api/entities/listen-report-item";
|
||||
import { ListenReportOptions } from "../api/entities/listen-report-options";
|
||||
|
|
@ -74,179 +76,47 @@ export const ReportListens: React.FC = () => {
|
|||
const ReportGraph: React.FC<{
|
||||
options: ListenReportOptions;
|
||||
data: ListenReportItem[];
|
||||
width?: number;
|
||||
height?: number;
|
||||
margin?: {
|
||||
top: number;
|
||||
right: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
};
|
||||
}> = ({
|
||||
options,
|
||||
data,
|
||||
width = 900,
|
||||
height = 500,
|
||||
margin = { left: 70, right: 70, top: 20, bottom: 80 },
|
||||
}) => {
|
||||
// Then we'll create some bounds
|
||||
const xMax = width - margin.left - margin.right;
|
||||
const yMax = height - margin.top - margin.bottom;
|
||||
|
||||
// We'll make some helpers to get at the data we want
|
||||
const x = (d: ListenReportItem) => d.date;
|
||||
const y = (d: ListenReportItem) => d.count;
|
||||
|
||||
// responsive utils for axis ticks
|
||||
const numTicksForHeight = (heightT: number): number => {
|
||||
if (heightT <= 300) return 3;
|
||||
if (300 < heightT && heightT <= 600) return 5;
|
||||
return 10;
|
||||
};
|
||||
|
||||
const numTicksForWidth = (widthT: number): number => {
|
||||
if (widthT <= 300) return 2;
|
||||
if (300 < widthT && widthT <= 400) return 5;
|
||||
return 10;
|
||||
};
|
||||
|
||||
// And then scale the graph by our data
|
||||
const xScaleTime = scaleTime<number>({
|
||||
range: [0, xMax],
|
||||
domain: extent(data, x) as [Date, Date],
|
||||
});
|
||||
|
||||
/*
|
||||
const xScaleBand = scaleBand({
|
||||
range: [0, xMax],
|
||||
domain: extent(data, x) as [Date, Date],
|
||||
padding: 0.2,
|
||||
});
|
||||
*/
|
||||
const yScale = scaleLinear({
|
||||
range: [yMax, 0],
|
||||
domain: [0, Math.max(...data.map(y))],
|
||||
nice: true,
|
||||
});
|
||||
|
||||
// Compose together the scale and accessor functions to get point functions
|
||||
const compose = (scale: any, accessor: any) => (d: ListenReportItem) =>
|
||||
scale(accessor(d));
|
||||
const xPoint = compose(xScaleTime, x);
|
||||
const yPoint = compose(yScale, y);
|
||||
}> = ({ options, data }) => {
|
||||
const dataLocal = data.map(({ date, ...other }) => ({
|
||||
...other,
|
||||
date: getTime(date),
|
||||
}));
|
||||
|
||||
return (
|
||||
<svg width={width} height={height}>
|
||||
<GradientLightgreenGreen
|
||||
id="linear"
|
||||
vertical={false}
|
||||
fromOpacity={0.8}
|
||||
toOpacity={0.8}
|
||||
/>
|
||||
<Grid
|
||||
top={margin.top}
|
||||
left={margin.left}
|
||||
xScale={xScaleTime}
|
||||
yScale={yScale}
|
||||
stroke="rgba(142, 32, 95, 0.9)"
|
||||
width={xMax}
|
||||
height={yMax}
|
||||
numTicksRows={numTicksForHeight(height)}
|
||||
numTicksColumns={numTicksForWidth(width)}
|
||||
/>
|
||||
<Group top={margin.top} left={margin.left}>
|
||||
<ResponsiveContainer width="90%" height={400}>
|
||||
<AreaChart
|
||||
data={dataLocal}
|
||||
margin={{
|
||||
top: 5,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#48bb78" stopOpacity={0.8} />
|
||||
<stop offset="90%" stopColor="#48bb78" stopOpacity={0.1} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
scale="time"
|
||||
type="number"
|
||||
domain={["auto", "auto"]}
|
||||
dataKey="date"
|
||||
tickFormatter={(date) => format(date, "P")}
|
||||
/>
|
||||
<YAxis />
|
||||
<Tooltip separator=": " formatter={(value) => [value, "Listens"]} />
|
||||
<Area
|
||||
data={data}
|
||||
x={(d) => xScaleTime(x(d))}
|
||||
y0={(d) => yScale.range()[0]}
|
||||
y1={(d) => yScale(y(d))}
|
||||
strokeWidth={2}
|
||||
stroke={"transparent"}
|
||||
fill={"url(#linear)"}
|
||||
curve={curveBasis}
|
||||
type="monotone"
|
||||
dataKey="count"
|
||||
stroke="#48bb78"
|
||||
fillOpacity={1}
|
||||
fill="url(#colorPv)"
|
||||
/>
|
||||
<LinePath
|
||||
data={data}
|
||||
x={(d) => xScaleTime(x(d))}
|
||||
y={(d) => yScale(y(d))}
|
||||
stroke={"url('#linear')"}
|
||||
strokeWidth={2}
|
||||
curve={curveBasis}
|
||||
/>
|
||||
</Group>
|
||||
<Group left={margin.left}>
|
||||
<AxisLeft
|
||||
top={margin.top}
|
||||
left={0}
|
||||
scale={yScale}
|
||||
hideZero
|
||||
numTicks={numTicksForHeight(height)}
|
||||
label="Axis Left Label"
|
||||
labelProps={{
|
||||
fill: "#8e205f",
|
||||
textAnchor: "middle",
|
||||
fontSize: 12,
|
||||
}}
|
||||
stroke="#1b1a1e"
|
||||
tickStroke="#8e205f"
|
||||
tickLabelProps={(value, index) => ({
|
||||
fill: "#8e205f",
|
||||
textAnchor: "end",
|
||||
fontSize: 10,
|
||||
dx: "-0.25em",
|
||||
dy: "0.25em",
|
||||
})}
|
||||
tickComponent={({ formattedValue, ...tickProps }) => (
|
||||
<text {...tickProps}>{formattedValue}</text>
|
||||
)}
|
||||
/>
|
||||
/>
|
||||
<AxisBottom
|
||||
top={height - margin.bottom}
|
||||
left={0}
|
||||
scale={xScaleTime}
|
||||
numTicks={numTicksForWidth(width)}
|
||||
label="Time"
|
||||
>
|
||||
{(axis) => {
|
||||
const tickLabelSize = 10;
|
||||
const tickRotate = 45;
|
||||
const tickColor = "#8e205f";
|
||||
const axisCenter = (axis.axisToPoint.x - axis.axisFromPoint.x) / 2;
|
||||
return (
|
||||
<g className="my-custom-bottom-axis">
|
||||
{axis.ticks.map((tick, i) => {
|
||||
const tickX = tick.to.x;
|
||||
const tickY = tick.to.y + tickLabelSize + axis.tickLength;
|
||||
return (
|
||||
<Group
|
||||
key={`vx-tick-${tick.value}-${i}`}
|
||||
className={"vx-axis-tick"}
|
||||
>
|
||||
<Line from={tick.from} to={tick.to} stroke={tickColor} />
|
||||
<text
|
||||
transform={`translate(${tickX}, ${tickY}) rotate(${tickRotate})`}
|
||||
fontSize={tickLabelSize}
|
||||
textAnchor="middle"
|
||||
fill={tickColor}
|
||||
>
|
||||
{tick.formattedValue}
|
||||
</text>
|
||||
</Group>
|
||||
);
|
||||
})}
|
||||
<text
|
||||
textAnchor="middle"
|
||||
transform={`translate(${axisCenter}, 50)`}
|
||||
fontSize="8"
|
||||
>
|
||||
{axis.label}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
}}
|
||||
</AxisBottom>
|
||||
</Group>
|
||||
</svg>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue