mostly seems to be working!

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

View File

@@ -1,10 +1,10 @@
import React, { Component } from "react";
import { Group } from '@vx/group';
import { curveStep} from '@vx/curve';
import { LinePath } from '@vx/shape';
import { scaleLinear, scaleBand, scaleTime } from '@vx/scale';
import { Group } from '@visx/group';
import { curveStep} from '@visx/curve';
import { LinePath } from '@visx/shape';
import { scaleLinear, scaleBand, scaleTime } from '@visx/scale';
import { timeParse, timeFormat } from 'd3-time-format';
import { AxisBottom, AxisLeft } from '@vx/axis';
import { AxisBottom, AxisLeft } from '@visx/axis';
import { Dimmer, Loader } from "semantic-ui-react";
@@ -29,6 +29,9 @@ constructor(props) {
const width = this.props.width;
const height = 500;
const margin = { top: 20, bottom: 40, left: 40, right: 20 };
const parseDate = timeParse("%Y%m%d");
const format = timeFormat("%b %d");
const formatDate = (date) => format(parseDate(date));
// Then we'll create some bounds
const xMax = width - margin.left - margin.right;

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>
);
}
);
}
}

View File

@@ -1,6 +1,6 @@
import React, { Component } from "react"
import CallChart from "./CallChart"
import { ParentSize } from "@vx/responsive";
import { ParentSize } from "@visx/responsive";
class ResponsiveCallChart extends Component {
constructor(props) {

View File

@@ -1,6 +1,6 @@
import React, { Component } from "react"
import ErrorChart from "./ErrorChart"
import { ParentSize } from "@vx/responsive";
import { ParentSize } from "@visx/responsive";
class ResponsiveErrorChart extends Component {
constructor(props) {

View File

@@ -1,7 +1,7 @@
import React, {Component} from "react";
import {Link} from "react-router-dom";
import ListTalkgroups from "../Talkgroups/ListTalkgroups.js";
import MessageBox from "../components/pure/Message.js";
import MessageBox from "../Components/Message.js";
import ListGroups from "../Group/ListGroups.js";
import GroupModal from "../Group/GroupModalContainer.js";
import UpdatePermissionModal from "../Permission/UpdatePermissionModalContainer.js";
@@ -24,14 +24,6 @@ import {
Label
} from "semantic-ui-react";
function planName(planType) {
switch (planType) {
case freePlanValue:
return "Free";
case proPlanValue:
return "Pro";
}
}
class System extends Component {
constructor(props) {
@@ -55,7 +47,6 @@ class System extends Component {
);
this.handleSystemDeleteConfirm = this.handleSystemDeleteConfirm.bind(this);
this.handleSystemDeleteCancel = this.handleSystemDeleteCancel.bind(this);
this.handleUpgradePlan = this.handleUpgradePlan.bind(this);
this.handleUpdatePermissionClose = this.handleUpdatePermissionClose.bind(
this
);
@@ -259,9 +250,6 @@ class System extends Component {
});
}
handleUpgradePlan() {
window.location = process.env.REACT_APP_ACCOUNT_SERVER + "/update-plans";
}
handleUpload(file) {
this.props.talkgroupActions
@@ -319,7 +307,6 @@ class System extends Component {
let fileInput = null;
var location = "";
var example = "";
var plan = "";
var groupRender = () => {};
if (system) {
@@ -348,25 +335,6 @@ class System extends Component {
);
}
switch (system.planType) {
case freePlanValue:
const tempPlan = planName(system.planType) + " plan";
plan = (
<div>
{tempPlan}
<Label as="a" onClick={this.handleUpgradePlan}>
{" "}
<Icon name="plus" />
Upgrade Plan
</Label>
</div>
);
break;
case proPlanValue:
plan = planName(system.planType) + " plan";
break;
}
example =
'{\n\t"systems": [\n\t\t{\n\t\t\t"shortName": "' +
@@ -655,7 +623,6 @@ class System extends Component {
<Header as="h1">
<Header.Content>
{this.props.system.name}
{/* <Header.Subheader>{plan}</Header.Subheader> */}
</Header.Content>
</Header>

View File

@@ -103,7 +103,7 @@ export function updateSystem(data) {
return dispatch => {
dispatch(beginUpdateSystem());
return makeUserRequest("post", data, process.env.REACT_APP_BACKEND_SERVER + "/systems/" + data.shortName)
return makeUserRequest("post", data, process.env.REACT_APP_ADMIN_SERVER + "/systems/" + data.shortName, {withCredentials: true})
.then(response => {
if (response.data.success) {
dispatch(updateSystemSuccess(response.data.system));
@@ -162,7 +162,7 @@ export function fetchSystems() {
dispatch(beginFetchSystem());
return axios
.get(process.env.REACT_APP_ADMIN_SERVER + "/systems")
.get(process.env.REACT_APP_ADMIN_SERVER + "/systems", {withCredentials: true})
.then(response => {
if (response.data.success) {
dispatch(fetchSystemSuccess(response.data.systems));
@@ -187,7 +187,7 @@ export function deleteSystem(shortName) {
return dispatch => {
dispatch(beginDeleteSystem());
return makeUserRequest("delete", null, process.env.REACT_APP_BACKEND_SERVER + "/systems/"+shortName)
return makeUserRequest("delete", null, process.env.REACT_APP_ADMIN_SERVER + "/systems/"+shortName, {withCredentials: true})
.then(response => {
if (response.data.success) {
dispatch(deleteSystemSuccess({shortName: shortName}));
@@ -211,7 +211,7 @@ export function createSystem(data) {
return dispatch => {
dispatch(beginCreateSystem());
return makeUserRequest("post", data, process.env.REACT_APP_BACKEND_SERVER + "/systems")
return makeUserRequest("post", data, process.env.REACT_APP_ADMIN_SERVER + "/systems", {withCredentials: true})
.then(response => {
if (response.data.success) {
dispatch(createSystemSuccess(response.data.system));