zoriya/flood
1
0
Fork 0
mirror of https://github.com/zoriya/flood.git synced 2026-06-02 11:06:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

d3: import its functions by module

Browse Source
This commit is contained in:
Jesse Chan
2020-10-04 20:17:45 +08:00
parent b9b9530386
commit 4bd090d0bb
3 changed files with 24 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/javascript/components/sidebar/TransferRateGraph.tsx
+20 -23
View File
@@ -1,4 +1,7 @@
import * as d3 from 'd3';
import {area, curveMonotoneX, line} from 'd3-shape';
import {max} from 'd3-array';
import {ScaleLinear, scaleLinear} from 'd3-scale';
import {Selection, select} from 'd3-selection';
import React from 'react';
import type {TransferDirection} from '@shared/types/TransferData';
@@ -37,8 +40,8 @@ class TransferRateGraph extends React.Component<TransferRateGraphProps> {
}
lastMouseX?: number;
xScale?: d3.ScaleLinear<number, number>;
yScale?: d3.ScaleLinear<number, number>;
xScale?: ScaleLinear<number, number>;
yScale?: ScaleLinear<number, number>;
graphRefs: {
graph: SVGSVGElement | null;
areDefined: boolean;
@@ -46,9 +49,9 @@ class TransferRateGraph extends React.Component<TransferRateGraphProps> {
} & Record<
TransferDirection,
{
area?: d3.Selection<SVGPathElement, unknown, HTMLElement, unknown>;
inspectPoint?: d3.Selection<SVGCircleElement, unknown, HTMLElement, unknown>;
rateLine?: d3.Selection<SVGPathElement, unknown, HTMLElement, unknown>;
graphArea?: Selection<SVGPathElement, unknown, HTMLElement, unknown>;
inspectPoint?: Selection<SVGCircleElement, unknown, HTMLElement, unknown>;
rateLine?: Selection<SVGPathElement, unknown, HTMLElement, unknown>;
}
> = {graph: null, areDefined: false, isHovered: false, download: {}, upload: {}};
@@ -120,10 +123,10 @@ class TransferRateGraph extends React.Component<TransferRateGraphProps> {
return;
}
const graph = d3.select(`#${this.props.id}`);
const graph = select(`#${this.props.id}`);
TRANSFER_DIRECTIONS.forEach(<T extends TransferDirection>(direction: T) => {
// appendEmptyGraphShapes
this.graphRefs[direction].area = graph
this.graphRefs[direction].graphArea = graph
.append('path')
.attr('class', 'graph__area')
.attr('fill', `url('#graph__gradient--${direction}')`);
@@ -181,45 +184,39 @@ class TransferRateGraph extends React.Component<TransferRateGraphProps> {
const {height, width} = this.props;
const margin = {bottom: 10, top: 10};
this.xScale = d3
.scaleLinear()
this.xScale = scaleLinear()
.domain([0, historicalData.download.length - 1])
.range([0, width]);
this.yScale = d3
.scaleLinear()
this.yScale = scaleLinear()
.domain([
0,
d3.max(historicalData.download, (dataPoint, index) =>
Math.max(dataPoint, historicalData.upload[index]),
) as number,
max(historicalData.download, (dataPoint, index) => Math.max(dataPoint, historicalData.upload[index])) as number,
])
.range([height - margin.top, margin.bottom]);
this.initGraph();
const interpolation = d3.curveMonotoneX;
const interpolation = curveMonotoneX;
TRANSFER_DIRECTIONS.forEach(<T extends TransferDirection>(direction: T) => {
const {xScale, yScale} = this;
const {area, rateLine} = this.graphRefs[direction];
const {graphArea, rateLine} = this.graphRefs[direction];
if (rateLine == null || area == null || xScale == null || yScale == null) {
if (rateLine == null || graphArea == null || xScale == null || yScale == null) {
return;
}
this.graphRefs[direction].rateLine = rateLine.attr(
'd',
d3
.line<number>()
line<number>()
.x((_dataPoint, index) => xScale(index))
.y((dataPoint) => yScale(dataPoint))
.curve(interpolation)(historicalData[direction]) as string,
);
this.graphRefs[direction].area = area.attr(
this.graphRefs[direction].graphArea = graphArea.attr(
'd',
d3
.area<number>()
area<number>()
.x((dataPoint, index) => xScale(index))
.y0(height)
.y1((dataPoint) => yScale(dataPoint))
package-lock.json
Generated
-241
View File
@@ -5508,184 +5508,24 @@
"integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
"dev": true
},
"d3": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/d3/-/d3-6.2.0.tgz",
"integrity": "sha512-aH+kx55J8vRBh4K4k9GN4EbNO3QnZsXy4XBfrnr4fL2gQuszUAPQU3fV2oObO2iSpreRH/bG/wfvO+hDu2+e9w==",
"dev": true,
"requires": {
"d3-array": "2",
"d3-axis": "2",
"d3-brush": "2",
"d3-chord": "2",
"d3-color": "2",
"d3-contour": "2",
"d3-delaunay": "5",
"d3-dispatch": "2",
"d3-drag": "2",
"d3-dsv": "2",
"d3-ease": "2",
"d3-fetch": "2",
"d3-force": "2",
"d3-format": "2",
"d3-geo": "2",
"d3-hierarchy": "2",
"d3-interpolate": "2",
"d3-path": "2",
"d3-polygon": "2",
"d3-quadtree": "2",
"d3-random": "2",
"d3-scale": "3",
"d3-scale-chromatic": "2",
"d3-selection": "2",
"d3-shape": "2",
"d3-time": "2",
"d3-time-format": "3",
"d3-timer": "2",
"d3-transition": "2",
"d3-zoom": "2"
}
},
"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==",
"dev": true
},
"d3-axis": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-2.0.0.tgz",
"integrity": "sha512-9nzB0uePtb+u9+dWir+HTuEAKJOEUYJoEwbJPsZ1B4K3iZUgzJcSENQ05Nj7S4CIfbZZ8/jQGoUzGKFznBhiiQ==",
"dev": true
},
"d3-brush": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-2.1.0.tgz",
"integrity": "sha512-cHLLAFatBATyIKqZOkk/mDHUbzne2B3ZwxkzMHvFTCZCmLaXDpZRihQSn8UNXTkGD/3lb/W2sQz0etAftmHMJQ==",
"dev": true,
"requires": {
"d3-dispatch": "1 - 2",
"d3-drag": "2",
"d3-interpolate": "1 - 2",
"d3-selection": "2",
"d3-transition": "2"
}
},
"d3-chord": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-2.0.0.tgz",
"integrity": "sha512-D5PZb7EDsRNdGU4SsjQyKhja8Zgu+SHZfUSO5Ls8Wsn+jsAKUUGkcshLxMg9HDFxG3KqavGWaWkJ8EpU8ojuig==",
"dev": true,
"requires": {
"d3-path": "1 - 2"
}
},
"d3-color": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
"integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==",
"dev": true
},
"d3-contour": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-2.0.0.tgz",
"integrity": "sha512-9unAtvIaNk06UwqBmvsdHX7CZ+NPDZnn8TtNH1myW93pWJkhsV25JcgnYAu0Ck5Veb1DHiCv++Ic5uvJ+h50JA==",
"dev": true,
"requires": {
"d3-array": "2"
}
},
"d3-delaunay": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-5.3.0.tgz",
"integrity": "sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==",
"dev": true,
"requires": {
"delaunator": "4"
}
},
"d3-dispatch": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
"integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA==",
"dev": true
},
"d3-drag": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-2.0.0.tgz",
"integrity": "sha512-g9y9WbMnF5uqB9qKqwIIa/921RYWzlUDv9Jl1/yONQwxbOfszAWTCm8u7HOTgJgRDXiRZN56cHT9pd24dmXs8w==",
"dev": true,
"requires": {
"d3-dispatch": "1 - 2",
"d3-selection": "2"
}
},
"d3-dsv": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-2.0.0.tgz",
"integrity": "sha512-E+Pn8UJYx9mViuIUkoc93gJGGYut6mSDKy2+XaPwccwkRGlR+LO97L2VCCRjQivTwLHkSnAJG7yo00BWY6QM+w==",
"dev": true,
"requires": {
"commander": "2",
"iconv-lite": "0.4",
"rw": "1"
},
"dependencies": {
"commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true
}
}
},
"d3-ease": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-2.0.0.tgz",
"integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ==",
"dev": true
},
"d3-fetch": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-2.0.0.tgz",
"integrity": "sha512-TkYv/hjXgCryBeNKiclrwqZH7Nb+GaOwo3Neg24ZVWA3MKB+Rd+BY84Nh6tmNEMcjUik1CSUWjXYndmeO6F7sw==",
"dev": true,
"requires": {
"d3-dsv": "1 - 2"
}
},
"d3-force": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/d3-force/-/d3-force-2.1.1.tgz",
"integrity": "sha512-nAuHEzBqMvpFVMf9OX75d00OxvOXdxY+xECIXjW6Gv8BRrXu6gAWbv/9XKrvfJ5i5DCokDW7RYE50LRoK092ew==",
"dev": true,
"requires": {
"d3-dispatch": "1 - 2",
"d3-quadtree": "1 - 2",
"d3-timer": "1 - 2"
}
},
"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==",
"dev": true
},
"d3-geo": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-2.0.1.tgz",
"integrity": "sha512-M6yzGbFRfxzNrVhxDJXzJqSLQ90q1cCyb3EWFZ1LF4eWOBYxFypw7I/NFVBNXKNqxv1bqLathhYvdJ6DC+th3A==",
"dev": true,
"requires": {
"d3-array": ">=2.5"
}
},
"d3-hierarchy": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-2.0.0.tgz",
"integrity": "sha512-SwIdqM3HxQX2214EG9GTjgmCc/mbSx4mQBn+DuEETubhOw6/U3fmnji4uCVrmzOydMHSO1nZle5gh6HB/wdOzw==",
"dev": true
},
"d3-interpolate": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
@@ -5701,24 +5541,6 @@
"integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA==",
"dev": true
},
"d3-polygon": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-2.0.0.tgz",
"integrity": "sha512-MsexrCK38cTGermELs0cO1d79DcTsQRN7IWMJKczD/2kBjzNXxLUWP33qRF6VDpiLV/4EI4r6Gs0DAWQkE8pSQ==",
"dev": true
},
"d3-quadtree": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-2.0.0.tgz",
"integrity": "sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw==",
"dev": true
},
"d3-random": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/d3-random/-/d3-random-2.2.2.tgz",
"integrity": "sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw==",
"dev": true
},
"d3-scale": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.3.tgz",
@@ -5732,16 +5554,6 @@
"d3-time-format": "2 - 3"
}
},
"d3-scale-chromatic": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz",
"integrity": "sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==",
"dev": true,
"requires": {
"d3-color": "1 - 2",
"d3-interpolate": "1 - 2"
}
},
"d3-selection": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
@@ -5772,38 +5584,6 @@
"d3-time": "1 - 2"
}
},
"d3-timer": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
"integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==",
"dev": true
},
"d3-transition": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-2.0.0.tgz",
"integrity": "sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==",
"dev": true,
"requires": {
"d3-color": "1 - 2",
"d3-dispatch": "1 - 2",
"d3-ease": "1 - 2",
"d3-interpolate": "1 - 2",
"d3-timer": "1 - 2"
}
},
"d3-zoom": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-2.0.0.tgz",
"integrity": "sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==",
"dev": true,
"requires": {
"d3-dispatch": "1 - 2",
"d3-drag": "2",
"d3-interpolate": "1 - 2",
"d3-selection": "2",
"d3-transition": "2"
}
},
"damerau-levenshtein": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
@@ -6010,12 +5790,6 @@
}
}
},
"delaunator": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/delaunator/-/delaunator-4.0.1.tgz",
"integrity": "sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==",
"dev": true
},
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -8974,15 +8748,6 @@
"integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
"dev": true
},
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
"dev": true,
"requires": {
"safer-buffer": ">= 2.1.2 < 3"
}
},
"icss-replace-symbols": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
@@ -15731,12 +15496,6 @@
"aproba": "^1.1.1"
}
},
"rw": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
"integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=",
"dev": true
},
"rxjs": {
"version": "6.6.3",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz",
package.json
+4 -1
View File
@@ -89,7 +89,10 @@
"compression": "^1.7.4",
"cookie-parser": "^1.4.5",
"css-loader": "^4.3.0",
"d3": "^6.2.0",
"d3-array": "^2.8.0",
"d3-scale": "^3.2.3",
"d3-selection": "^2.0.0",
"d3-shape": "^2.0.0",
"dayjs": "^1.8.36",
"debug": "^4.2.0",
"eslint": "^7.10.0",