GitHub/trunk-server
1
0
Fork 0
mirror of https://github.com/openmhz/trunk-server.git synced 2026-11-12 08:47:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

mostly seems to be working!

Browse Source
This commit is contained in:
Luke Berndt
2021-01-24 14:08:53 -05:00
parent 2035855a77
commit 11eed81e80
50 changed files with 723 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
admin/src/System/ErrorChart.js
View File

@@ -1,18 +1,15 @@
import React, { Component } from "react";
import { Group } from '@vx/group';
import { GlyphCircle } from '@vx/glyph';
import { scaleLinear, scaleBand, scaleTime, scaleOrdinal } from '@vx/scale';
import { Group } from '@visx/group';
import { GlyphCircle } from '@visx/glyph';
import { scaleLinear, scaleTime, scaleOrdinal } from '@visx/scale';
import { timeParse, timeFormat } from 'd3-time-format';
import { AxisBottom, AxisLeft } from '@vx/axis';
import { Dimmer, Loader } from "semantic-ui-react";
import {
LegendOrdinal
} from '@vx/legend';
import { AxisBottom, AxisLeft } from '@visx/axis';
import { Loader } from "semantic-ui-react";
import { LegendOrdinal} from '@visx/legend';
class ErrorChart extends Component {
constructor(props) {
super(props);
}
constructor(props) {
super(props);
}
render() {
var errorData = this.props.data;
@@ -54,58 +51,58 @@ constructor(props) {
});
var xScale, yScale, xPoint, yPoint;
if (errorData) {
// We'll use some mock data from `@vx/mock-data` for this.
data = errorData.data;
// scales
xScale = scaleTime({
range: [0, xMax],
domain: [errorData.minDate, errorData.maxDate],
tickFormat: () => (val) => formatDate(val)
});
yScale = scaleLinear({
range: [yMax, 0],
domain: [0, errorData.maxValue],
});
zScale = scaleOrdinal({
domain: errorData.legend,
range: ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"]
});
xPoint = compose(xScale, x);
yPoint = compose(yScale, y);
// We'll use some mock data from `@vx/mock-data` for this.
data = errorData.data;
// scales
xScale = scaleTime({
range: [0, xMax],
domain: [errorData.minDate, errorData.maxDate],
tickFormat: () => (val) => formatDate(val)
});
yScale = scaleLinear({
range: [yMax, 0],
domain: [0, errorData.maxValue],
});
zScale = scaleOrdinal({
domain: errorData.legend,
range: ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"]
});
xPoint = compose(xScale, x);
yPoint = compose(yScale, y);
}
return (
<div style={{
width: 900
}}>
<svg width={width} height={height} style={{
float: "left"
}}>
<Group left={margin.left} top={margin.top} >
<AxisBottom top={yMax} scale={xScale} numTicks={width > 520 ? 10 : 5} />
<AxisLeft scale={yScale} />
{data.map((band, i) => {
return (
<Group key={`band-${i}`}>
{band.data.map((point, j) => {
return (
<GlyphCircle
className="dot"
key={`point-${point.x}-${j}`}
fill={dotColor(i)}
left={xScale(x(point))}
top={yScale(y(point))}
size={6.0}
/>
);
})}
</Group>
);
})}
</Group>
</svg>
<div
return (
<div style={{
width: 900
}}>
<svg width={width} height={height} style={{
float: "left"
}}>
<Group left={margin.left} top={margin.top} >
<AxisBottom top={yMax} scale={xScale} numTicks={width > 520 ? 10 : 5} />
<AxisLeft scale={yScale} />
{data.map((band, i) => {
return (
<Group key={`band-${i}`}>
{band.data.map((point, j) => {
return (
<GlyphCircle
className="dot"
key={`point-${point.x}-${j}`}
fill={dotColor(i)}
left={xScale(x(point))}
top={yScale(y(point))}
size={6.0}
/>
);
})}
</Group>
);
})}
</Group>
</svg>
<div
style={{
float: "right"
}}
@@ -114,19 +111,19 @@ return (
scale={zScale}
labelMargin="0 15px 0 0"
onMouseOver={data => event => {
console.log(
`mouse over: ${data.text}`,
`index: ${data.index}`,
);
}}
console.log(
`mouse over: ${data.text}`,
`index: ${data.index}`,
);
}}
/>
</div>
</div>
</div>
);
}
);
}
}