recharts#Label JavaScript Examples
The following examples show how to use
recharts#Label.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: MonitoringDistributionDay.js From SaraAlert with Apache License 2.0 | 6 votes |
|
render() {
const data = this.props.stats.monitoring_distribution_by_day;
return (
<React.Fragment>
<Card className="card-square">
<Card.Header as="h5">Monitoring Distribution by Day</Card.Header>
<Card.Body>
<h5 className="pb-4">DISTRIBUTION OF MONITOREES UNDER MONITORING</h5>
<div style={{ width: '100%', height: '286px' }} className="recharts-wrapper">
<ResponsiveContainer>
<BarChart data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="day">
<Label value="Day of Monitoring" position="insideBottom" offset={-3} />
</XAxis>
<YAxis
label={
<Text x={-30} y={60} dx={50} dy={150} offset={0} angle={-90}>
Number of Monitorees
</Text>
}
/>
<Bar dataKey="cases" fill="#0E4F6D" />
</BarChart>
</ResponsiveContainer>
</div>
</Card.Body>
</Card>
</React.Fragment>
);
}
Example #2
| Source File: ivSkewChart.jsx From GraphVega with MIT License | 6 votes |
|
IVSkewChart = (props) => {
return(
<LineChart
width={900}
height={500}
data={props.data}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="strike">
<Label value="Strike price" offset={0} position="insideBottom"/>
</XAxis>
<YAxis label={{ value: 'Implied Volatility', angle: -90, position: 'insideLeft', textAnchor: 'middle' }}/>
<Tooltip />
<Legend />
<Line type="monotone" dataKey="iv" stroke="#002366" />
</LineChart>
)
}
Example #3
| Source File: SubjectStatus.js From SaraAlert with Apache License 2.0 | 6 votes |
|
render() {
const data = [...this.props.stats.subject_status];
const COLORS = ['#39CC7D', '#FCDA4B', '#FF6868', '#6C757D'];
return (
<React.Fragment>
<Card className="card-square">
<Card.Header as="h5">Monitoree Status</Card.Header>
<Card.Body>
<div style={{ width: '100%', height: 260 }} className="recharts-wrapper">
<ResponsiveContainer>
<PieChart onMouseEnter={this.onPieEnter}>
<Pie data={data} innerRadius={70} outerRadius={100} fill="#8884d8" paddingAngle={2} dataKey="value" label>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
<Label className="display-5" value={this.props.stats.system_subjects} position="center" />
</Pie>
<Legend layout="vertical" align="right" verticalAlign="middle" />
<Tooltip />
</PieChart>
</ResponsiveContainer>
</div>
</Card.Body>
</Card>
</React.Fragment>
);
}
Example #4
| Source File: SystemStatisticsPie.js From SaraAlert with Apache License 2.0 | 6 votes |
|
render() {
return (
<React.Fragment>
<Card className="card-square">
<Card.Header as="h5">System Statistics</Card.Header>
<Card.Body className="pb-1">
<Row className="text-center">
<Col className="">
<h4 className="mb-0"> Total Monitorees </h4>
<div style={{ width: '100%', height: 250 }} className="recharts-wrapper">
<ResponsiveContainer>
<PieChart onMouseEnter={this.onPieEnter}>
<Pie data={this.data} innerRadius={55} outerRadius={85} fill="#8884d8" paddingAngle={2} dataKey="value">
{this.data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={this.getColorForType(entry)} />
))}
<Label className="display-5" value={this.props.stats.system_subjects} position="center" />
</Pie>
<Legend layout="vertical" align="right" verticalAlign="middle">
{' '}
</Legend>
<Tooltip />
</PieChart>
</ResponsiveContainer>
</div>
<div className="text-muted">
{this.percentageChange > 0
? `Count is up ${this.props.stats.system_subjects_last_24} (${this.percentageChange}%) within last 24 hours`
: null}
</div>
</Col>
</Row>
</Card.Body>
</Card>
</React.Fragment>
);
}
Example #5
| Source File: greeksChart.jsx From GraphVega with MIT License | 6 votes |
|
GreeksChart = (props) => {
return(
<LineChart
width={900}
height={500}
data={props.data}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="strike">
<Label value="Strike price" offset={0} position="insideBottom"/>
</XAxis>
<YAxis label={{ value: 'Value', angle: -90, position: 'insideLeft', textAnchor: 'middle' }}/>
<Tooltip />
<Legend />
<Line type="monotone" dataKey="delta" stroke="rgba(0, 123, 255, 1)" />
<Line type="monotone" dataKey="gamma" stroke="rgba(255, 230, 70, 1)" />
<Line type="monotone" dataKey="theta" stroke="rgba(40, 167, 69, 1)" />
<Line type="monotone" dataKey="vega" stroke="rgba(255, 7, 58, 1)" />
</LineChart>
)
}
Example #6
| Source File: TodayWidget.js From module-federation-examples with MIT License | 6 votes |
|
export default function TodayWidget() {
const theme = useTheme();
return (
<Box display="flex" flexDirection="column" flex={1}>
<Typography component="h2" variant="h6" color="primary" gutterBottom>
Today
</Typography>
<ResponsiveContainer>
<LineChart
data={data}
margin={{
top: 16,
right: 16,
bottom: 0,
left: 24,
}}
>
<XAxis dataKey="time" stroke={theme.palette.text.secondary} />
<YAxis stroke={theme.palette.text.secondary}>
<Label
angle={270}
position="left"
style={{ textAnchor: 'middle', fill: theme.palette.text.primary }}
>
Sales ($)
</Label>
</YAxis>
<Line type="monotone" dataKey="amount" stroke={theme.palette.primary.main} dot={false} />
</LineChart>
</ResponsiveContainer>
</Box>
);
}
Example #7
| Source File: RatingsChart.js From willow-grandstack with Apache License 2.0 | 6 votes |
|
export default function RatingsChart() {
const theme = useTheme()
const { loading, error, data } = useQuery(GET_DATA_QUERY)
if (error) return <p>Sign in to view</p>
if (loading) return <p>Loading</p>
return (
<React.Fragment>
<Title>Average City Property Value</Title>
<ResponsiveContainer>
<BarChart
data={data.cityValues}
margin={{
top: 16,
right: 16,
bottom: 0,
left: 24,
}}
>
<XAxis dataKey="city" stroke={theme.palette.text.secondary} />
<YAxis stroke={theme.palette.text.secondary}>
<Label
angle={270}
position="left"
style={{ textAnchor: 'middle', fill: theme.palette.text.primary }}
>
City
</Label>
</YAxis>
<Bar dataKey="average" fill={theme.palette.primary.main}></Bar>
</BarChart>
</ResponsiveContainer>
</React.Fragment>
)
}
Example #8
| Source File: CoreView.js From Rover-Mission-Control with MIT License | 6 votes |
|
renderGraph(gridKey, title, dataKeys) {
return (
<div key={gridKey} style={ styles.gridCard }>
<ResponsiveContainer>
<LineChart
data={this.state.data}
dot={false}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis tick={false} >
<Label value={title} offset={0} style={{fill: 'green', fontSize: '1.4em'}} position="insideLeft" />
</XAxis>
<YAxis axisLine={false} tickLine={false} />
<Tooltip />
{dataKeys.map((dataKey, i) => {
return <Line dot={false} isAnimationActive={false} key={dataKey} type="monotone" dataKey={dataKey} stroke={lineColors[i % lineColors.length]} fill={lineColors[i % lineColors.length]} />
})}
</LineChart >
</ResponsiveContainer>
</div>
);
}
Example #9
| Source File: ApiCallMetricsView.jsx From amazon-connect-snippets with MIT No Attribution | 5 votes |
|
render() {
const {
classes, className: classNameProp, log, indexedLogs,
} = this.props;
// filtering out the following APIs for a better representation of the latency
const apiFilter = new Set([
'getAgentSnapshot',
]);
const latencies = log
.filter((event) => (indexedLogs.has(event._key)))
.flatMap((event) => ({
_localTimestamp: event._ts,
localTimestamp: event.time,
_type: 'LATENCY',
...indexedLogs.get(event._key),
}))
.filter((event) => !(apiFilter.has(event.apiName) || event.type === 'SEND'));
return (
<div className={clsx(classes.root, classNameProp)}>
<Container
title="API Call Metrics"
gutters={false}
>
<div className={classes.content}>
<ResponsiveContainer width="100%" height={300}>
<ComposedChart
data={latencies}
margin={{
top: 5, right: 20, bottom: 5, left: 20,
}}
>
<YAxis>
<Label angle={270} position="left" style={{ textAnchor: 'middle' }}>
Latency (ms)
</Label>
</YAxis>
<XAxis dataKey="_localTimestamp" type="number" scale="time" domain={['auto', 'auto']} tick={this.renderCustomAxisTick} />
<CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
{/* eslint-disable-next-line max-len */}
<Line type="linear" dataKey="latency" stroke="#8884d8" strokeWidth={2} dot={this.renderDots} activeDot={this.renderActiveDots} connectNulls isAnimationActive={false} />
<Tooltip content={this.renderCustomTooltip} />
</ComposedChart>
</ResponsiveContainer>
</div>
</Container>
</div>
);
}
Example #10
| Source File: lineChart.jsx From GraphVega with MIT License | 5 votes |
|
LineChart = (props) => {
const data = props.data || [];
const gradientOffset = () => {
const dataMax = Math.max(...data.map((i) => i.profit));
const dataMin = Math.min(...data.map((i) => i.profit));
if (dataMax <= 0){
return 0
}
else if (dataMin >= 0){
return 1
}
else{
return dataMax / (dataMax - dataMin);
}
}
const off = gradientOffset();
return(
<Card>
<CardContent>
<Row>
<Col sm={{span:12}}>
<Typography variant="h6" display="block" gutterBottom>
Profit & Loss Chart
</Typography>
</Col>
</Row>
<Row>
<Col sm={{span:12}} >
<AreaChart
height={520}
width={860}
data={data}
margin={{ top: 20, right: 0, left: 0, bottom: 0 }}
>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="label">
<Label value="Stock price" offset={0} position="insideBottom"/>
</XAxis>
<YAxis label={{ value: 'Profit', angle: -90, position: 'insideLeft', textAnchor: 'middle' }}/>
<Tooltip/>
<defs>
<linearGradient id="splitColor" x1="0" y1="0" x2="0" y2="1">
<stop offset={off} stopColor="green" stopOpacity={1}/>
<stop offset={off} stopColor="red" stopOpacity={1}/>
</linearGradient>
</defs>
<Area type="monotone" dataKey="profit" stroke="#000" fill="url(#splitColor)" />
</AreaChart>
</Col>
</Row>
</CardContent>
</Card>
)
}
Example #11
| Source File: Chart.js From whaticket with MIT License | 5 votes |
|
Chart = () => {
const theme = useTheme();
const date = useRef(new Date().toISOString());
const { tickets } = useTickets({ date: date.current });
const [chartData, setChartData] = useState([
{ time: "08:00", amount: 0 },
{ time: "09:00", amount: 0 },
{ time: "10:00", amount: 0 },
{ time: "11:00", amount: 0 },
{ time: "12:00", amount: 0 },
{ time: "13:00", amount: 0 },
{ time: "14:00", amount: 0 },
{ time: "15:00", amount: 0 },
{ time: "16:00", amount: 0 },
{ time: "17:00", amount: 0 },
{ time: "18:00", amount: 0 },
{ time: "19:00", amount: 0 },
]);
useEffect(() => {
setChartData(prevState => {
let aux = [...prevState];
aux.forEach(a => {
tickets.forEach(ticket => {
format(startOfHour(parseISO(ticket.createdAt)), "HH:mm") === a.time &&
a.amount++;
});
});
return aux;
});
}, [tickets]);
return (
<React.Fragment>
<Title>{`${i18n.t("dashboard.charts.perDay.title")}${
tickets.length
}`}</Title>
<ResponsiveContainer>
<BarChart
data={chartData}
barSize={40}
width={730}
height={250}
margin={{
top: 16,
right: 16,
bottom: 0,
left: 24,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="time" stroke={theme.palette.text.secondary} />
<YAxis
type="number"
allowDecimals={false}
stroke={theme.palette.text.secondary}
>
<Label
angle={270}
position="left"
style={{ textAnchor: "middle", fill: theme.palette.text.primary }}
>
Tickets
</Label>
</YAxis>
<Bar dataKey="amount" fill={theme.palette.primary.main} />
</BarChart>
</ResponsiveContainer>
</React.Fragment>
);
}
Example #12
| Source File: PlotLinReg.js From Otto with MIT License | 5 votes |
|
export default function PlotLinReg() {
const { model_state } = useModelState();
const { linreg_test_result, linreg_test_set } = model_state;
const { state } = useState();
const data = [];
linreg_test_set.map((point, index) => {
if (linreg_test_result[index][1] >= 0) {
data.push({
x: point[0],
scatter: point[1],
line: linreg_test_result[index][1],
});
}
});
data.sort(compareX);
return (
<>
{!model_state.viz_loading ? (
<ResponsiveContainer
className="graph-wrapper"
width="100%"
height="100%"
>
<ComposedChart
data={data}
margin={{
top: 20,
right: 20,
bottom: 20,
left: 20,
}}
>
<CartesianGrid />
<XAxis dataKey="x" name={model_state.linreg_x_name} type="number">
<Label
value={model_state.linreg_x_name}
position="insideBottom"
offset={-12}
/>
</XAxis>
<YAxis
unit={state.sample_dataset === SampleDataset.BOSTON ? "k$" : ""}
name={model_state.linreg_y_name}
type="number"
>
<Label
value={model_state.linreg_y_name}
angle={-90}
position="insideLeft"
/>
</YAxis>
<Tooltip cursor={{ strokeDasharray: "3 3" }} />
<Legend verticalAlign="top" height={36} />
<Scatter name="Test Data" dataKey="scatter" fill="#e06aa6" />
<Line
dataKey="line"
name="Line of Best Fit (Train Data)"
stroke="#5D5DE1"
dot={false}
/>
</ComposedChart>
</ResponsiveContainer>
) : (
<LoadingComponent />
)}
</>
);
}
Example #13
| Source File: PlotKNN.js From Otto with MIT License | 5 votes |
|
export default function PlotKNN() {
const { model_state } = useModelState();
const data = createPlotData(model_state);
const columns = model_state.knn_columns;
const columnMap = model_state.knn_columns_map;
const xAxisColumn = columnMap[columns[model_state.knn_column1_index]];
const yAxisColumn = columnMap[columns[model_state.knn_column2_index]];
return (
<>
{!model_state.viz_loading ? (
<ResponsiveContainer
className="graph-wrapper"
width="100%"
height="100%"
>
<ScatterChart
margin={{
top: 20,
right: 20,
bottom: 20,
left: 20,
}}
>
<CartesianGrid />
<XAxis
type="number"
dataKey="x"
name={xAxisColumn}
unit={
model_state.knn_column_units
? model_state.knn_column_units[model_state.knn_column1_index]
: ""
}
>
<Label value={xAxisColumn} position="insideBottom" offset={-12} />
</XAxis>
<YAxis
type="number"
dataKey="y"
name={yAxisColumn}
unit={
model_state.knn_column_units
? model_state.knn_column_units[model_state.knn_column2_index]
: ""
}
>
<Label value={yAxisColumn} angle={-90} position="insideLeft" />
</YAxis>
<Tooltip cursor={{ strokeDasharray: "3 3" }} />
<Legend verticalAlign="top" height={36} />
{model_state.knn_labels.map((label, index) => (
<Scatter
name={label}
data={data[index]}
fill={fillColors[index]}
shape={shapeTypes[index]}
key={index}
/>
))}
</ScatterChart>
</ResponsiveContainer>
) : (
<LoadingComponent />
)}
</>
);
}
Example #14
| Source File: ReportingSummary.js From SaraAlert with Apache License 2.0 | 5 votes |
|
render() {
const COLORS = ['#0088FE', '#00C49F'];
const data = [...this.props.stats.reporting_summmary];
const perc = Math.round((this.props.stats.reporting_summmary[0]['value'] / this.props.stats.system_subjects) * 100 * 10) / 10;
return (
<React.Fragment>
<Card className="card-square">
<Card.Header as="h5">Today's Reporting Summary</Card.Header>
<Card.Body>
<Row className="mx-4 mt-3">
<Col md="12">
<Row>
<h5>REPORTED TODAY</h5>
</Row>
<Row>
<h1 className="display-1" style={{ color: '#0088FE' }}>
{data[0]['value']}
</h1>
</Row>
<Row>
<h5>NOT YET REPORTED</h5>
</Row>
<Row>
<h1 className="display-1" style={{ color: '#00C49F' }}>
{data[1]['value']}
</h1>
</Row>
</Col>
<Col md="12">
<div style={{ width: '100%', height: '100%' }} className="recharts-wrapper">
<ResponsiveContainer>
<PieChart onMouseEnter={this.onPieEnter}>
<Pie data={data} innerRadius={90} outerRadius={120} fill="#8884d8" paddingAngle={2} dataKey="value">
<Label className="display-5" value={perc + '%'} position="center" />
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip />
</PieChart>
</ResponsiveContainer>
</div>
</Col>
</Row>
</Card.Body>
</Card>
</React.Fragment>
);
}
Example #15
| Source File: Data.js From FRCScout2020 with MIT License | 4 votes |
|
render() {
const competitionItems = this.state.competitions.map(competition => (
<Dropdown.Item
eventKey={competition.shortname}
key={competition.competitionid}
style={{ fontFamily: 'Helvetica, Arial' }}
>
{competition.shortname}
</Dropdown.Item>
));
const tableSectionItems = this.state.tableSections.map(section => (
<Dropdown.Item
eventKey={section.name}
key={section.id}
style={{ fontFamily: 'Helvetica, Arial' }}
>
{section.name}
</Dropdown.Item>
));
const tableColumnSpecifics = this.state.tableColumnSpecifics.map(type => (
<Dropdown.Item
eventKey={type.name}
key={type.id}
style={{ fontFamily: 'Helvetica, Arial' }}
>
{type.name}
</Dropdown.Item>
));
const tableColumnSpecificsMin = this.state.tableColumnSpecificsMin.map(
type => (
<Dropdown.Item
eventKey={type.name}
key={type.id}
style={{ fontFamily: 'Helvetica, Arial' }}
>
{type.name}
</Dropdown.Item>
)
);
let compColumns = [
{
headerStyle: {
width: '25%',
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
dataField: 'teamNum',
text: 'Team',
sort: true,
filter: textFilter({
className: 'customtextbar'
})
},
{
headerStyle: {
width: '25%',
fontSize: '100%',
outline: 'none'
},
dataField: 'matchesPlayed',
text: 'Matches Played'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Auto Cells',
dataField: 'autoBottom' + this.state.autoBottomDataField,
text: 'Bottom (' + this.state.autoBottomDataField + ')'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Auto Cells',
dataField: 'autoOuter' + this.state.autoOuterDataField,
text: 'Outer (' + this.state.autoOuterDataField + ')'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Auto Cells',
dataField: 'autoInner' + this.state.autoInnerDataField,
text: 'Inner (' + this.state.autoInnerDataField + ')'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Baseline Cross',
dataField: 'crossLine',
text: 'Baseline Cross'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Teleop Cells',
dataField: 'teleBottom' + this.state.teleBottomDataField,
text: 'Bottom (' + this.state.teleBottomDataField + ')'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Teleop Cells',
dataField: 'teleOuter' + this.state.teleOuterDataField,
text: 'Outer (' + this.state.teleOuterDataField + ')'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Teleop Cells',
dataField: 'teleInner' + this.state.teleInnerDataField,
text: 'Inner (' + this.state.teleInnerDataField + ')'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Rotation Control',
dataField: 'rotationControl',
text: 'Rotation(s)'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Rotation Control',
dataField: 'rotationTimer' + this.state.rotationTimerDataField,
text: 'Timer (' + this.state.rotationTimerDataField + ')'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Position Control',
dataField: 'positionControl',
text: 'Position(s)'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Position Control',
dataField: 'positionTimer' + this.state.positionTimerDataField,
text: 'Timer (' + this.state.positionTimerDataField + ')'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Park',
dataField: 'park',
text: 'Park(s)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Climb',
dataField: 'climb',
text: 'Climb(s)'
},
{
headerStyle: {
fontSize: '75%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Climb',
dataField: 'climbTimer' + this.state.climbTimerDataField,
text: 'Timer (' + this.state.climbTimerDataField + ')'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Climb',
dataField: 'buddyClimb',
text: 'Buddy Climb(s)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Level',
dataField: 'level',
text: 'Levels(s)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Penalties',
dataField: 'penalties',
text: 'Penalties'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Penalties',
dataField: 'yellowCards',
text: 'Yellow Cards'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Penalties',
dataField: 'redCards',
text: 'Red Cards'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Break/Comm.',
dataField: 'break',
text: 'Break(s)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none',
wordBreak: 'break-all'
},
sortCaret: (order, column) => {
return '';
},
sort: true,
hidden: this.state.tableSection !== 'Break/Comm.',
dataField: 'communication',
text: 'Communication'
}
];
let teamColumns = [
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'matchNum',
text: 'Match #'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'crossLine',
text: 'Baseline Cross'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'bottomAutoScore',
text: 'Bottom (Auto)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'outerAutoScore',
text: 'Outer (Auto)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'innerAutoScore',
text: 'Inner (Auto)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'bottomTeleopScore',
text: 'Bottom (Teleop)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'outerTeleopScore',
text: 'Outer (Teleop)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'innerTeleopScore',
text: 'Inner (Teleop)'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'rotationControl',
text: 'Rotation Control'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'rotationTimer',
text: 'Rotation Timer'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'positionControl',
text: 'Position Control'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'positionTimer',
text: 'Position Timer'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'park',
text: 'Park'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'climb',
text: 'Climb'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'endGameTimer',
text: 'End Game Timer'
},
{
headerStyle: {
fontSize: '100%',
outline: 'none'
},
dataField: 'level',
text: 'Level'
}
];
if (this.state.competition === '') {
return null;
}
if (this.state.retrieved === '') {
return null;
} else if (this.state.retrieved === 'teamMatchInvalid') {
return (
<div className='div-main' style={{ minHeight: this.state.heightSize }}>
<div className='justify-content-center'>
<img
alt='Logo'
src={Logo}
style={{
width: this.state.widthSize === '90%' ? '70%' : '30%',
marginTop: '20px',
marginLeft: '10px'
}}
/>
</div>
<div style={{ width: this.state.widthSize }} className='div-second'>
<div className='div-form'>
<Form.Group
style={{
width: '100%',
margin: '0 auto',
marginBottom: '10px'
}}
as={Row}
>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
margin: '0 auto'
}}
>
Competition:
</Form.Label>
</Form.Group>
<Dropdown
style={{
marginBottom: '10px'
}}
focusFirstItemOnShow={false}
onSelect={this.getData}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='lg'
variant='success'
id='dropdown-basic'
>
{this.state.competition}
</Dropdown.Toggle>
<Dropdown.Menu style={{ minWidth: '3%' }}>
{competitionItems}
</Dropdown.Menu>
</Dropdown>
<Form.Control
value={this.state.teamNum}
autoComplete='off'
type='number'
max={9999}
min={1}
placeholder='Team Number'
onChange={this.handleTeamNum}
className='mb-1'
style={{
background: 'none',
fontFamily: 'Helvetica, Arial',
display: 'inline-block',
width: '50%'
}}
onKeyDown={this.checkKeyTeamGo}
/>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '4%',
display: 'inline-block'
}}
onClick={this.handleTeamGo}
className='btn-xs'
>
Go
</Button>
</div>
<div>
<Button
size='xs'
onClick={this.changeToMatchData}
variant={
this.state.teamDataType === 'match'
? 'success'
: 'outline-success'
}
style={{ display: 'inline-block', marginRight: '2%' }}
>
Match Data
</Button>
<Button
size='xs'
onClick={this.changeToPitData}
variant={
this.state.teamDataType === 'pit'
? 'success'
: 'outline-success'
}
style={{ display: 'inline-block', marginLeft: '2%' }}
>
Pit Data
</Button>
</div>
<h1 className='pt-4'>No match data available</h1>
</div>
</div>
);
} else if (this.state.retrieved === 'teamPitInvalid') {
return (
<div className='div-main' style={{ minHeight: this.state.heightSize }}>
<div className='justify-content-center'>
<img
alt='Logo'
src={Logo}
style={{
width: this.state.widthSize === '90%' ? '70%' : '30%',
marginTop: '20px',
marginLeft: '10px'
}}
/>
</div>
<div style={{ width: this.state.widthSize }} className='div-second'>
<div className='div-form'>
<Form.Group
style={{
width: '100%',
margin: '0 auto',
marginBottom: '10px'
}}
as={Row}
>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
margin: '0 auto'
}}
>
Competition:
</Form.Label>
</Form.Group>
<Dropdown
style={{
marginBottom: '10px'
}}
focusFirstItemOnShow={false}
onSelect={this.getData}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='lg'
variant='success'
id='dropdown-basic'
>
{this.state.competition}
</Dropdown.Toggle>
<Dropdown.Menu style={{ minWidth: '3%' }}>
{competitionItems}
</Dropdown.Menu>
</Dropdown>
<Form.Control
value={this.state.teamNum}
autoComplete='off'
type='number'
max={9999}
min={1}
placeholder='Team Number'
onChange={this.handleTeamNum}
className='mb-1'
style={{
background: 'none',
fontFamily: 'Helvetica, Arial',
display: 'inline-block',
width: '50%'
}}
onKeyDown={this.checkKeyTeamGo}
/>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '4%',
display: 'inline-block'
}}
onClick={this.handleTeamGo}
className='btn-xs'
>
Go
</Button>
</div>
<div>
<Button
size='xs'
onClick={this.changeToMatchData}
variant={
this.state.teamDataType === 'match'
? 'success'
: 'outline-success'
}
style={{ display: 'inline-block', marginRight: '2%' }}
>
Match Data
</Button>
<Button
size='xs'
onClick={this.changeToPitData}
variant={
this.state.teamDataType === 'pit'
? 'success'
: 'outline-success'
}
style={{ display: 'inline-block', marginLeft: '2%' }}
>
Pit Data
</Button>
</div>
<h1 className='pt-4'>No pit data available</h1>
</div>
</div>
);
} else if (this.state.retrieved === 'compValid') {
return (
<div className='div-main' style={{ minHeight: this.state.heightSize }}>
<div className='justify-content-center'>
<img
alt='Logo'
src={Logo}
style={{
width: this.state.widthSize === '90%' ? '70%' : '30%',
marginTop: '20px',
marginLeft: '10px'
}}
/>
</div>
<div style={{ width: this.state.widthSize }} className='div-second'>
<div className='div-form'>
<Form.Group
style={{
width: '100%',
margin: '0 auto',
marginBottom: '10px'
}}
as={Row}
>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
margin: '0 auto'
}}
>
Competition:
</Form.Label>
</Form.Group>
<Dropdown
style={{
marginBottom: '10px'
}}
focusFirstItemOnShow={false}
onSelect={this.getData}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='lg'
variant='success'
id='dropdown-basic'
>
{this.state.competition}
</Dropdown.Toggle>
<Dropdown.Menu style={{ minWidth: '3%' }}>
{competitionItems}
</Dropdown.Menu>
</Dropdown>
<Form.Control
value={this.state.teamNum}
autoComplete='off'
type='number'
max={9999}
min={1}
placeholder='Team Number'
onChange={this.handleTeamNum}
className='mb-1'
style={{
background: 'none',
fontFamily: 'Helvetica, Arial',
display: 'inline-block',
width: '50%'
}}
onKeyDown={this.checkKeyTeamGo}
/>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '4%',
display: 'inline-block'
}}
onClick={this.handleTeamGo}
className='btn-xs'
>
Go
</Button>
</div>
<div style={{ textAlign: 'middle', marginBottom: '3%' }}>
<Dropdown
style={{ display: 'inline-block' }}
focusFirstItemOnShow={false}
onSelect={this.changeTable}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='xs'
variant='success'
id='dropdown-basic'
>
{this.state.tableSection}
</Dropdown.Toggle>
<Dropdown.Menu>{tableSectionItems}</Dropdown.Menu>
</Dropdown>
</div>
{this.state.tableSection === 'Auto Cells' ? (
<React.Fragment>
<Dropdown
style={{ display: 'inline-block' }}
focusFirstItemOnShow={false}
onSelect={this.changeAutoBottomColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.autoBottomDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecifics}</Dropdown.Menu>
</Dropdown>
<Dropdown
style={{
display: 'inline-block',
marginLeft: '3%',
marginRight: '3%'
}}
focusFirstItemOnShow={false}
onSelect={this.changeAutoOuterColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.autoOuterDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecifics}</Dropdown.Menu>
</Dropdown>
<Dropdown
style={{ display: 'inline-block' }}
focusFirstItemOnShow={false}
onSelect={this.changeAutoInnerColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.autoInnerDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecifics}</Dropdown.Menu>
</Dropdown>
</React.Fragment>
) : null}
{this.state.tableSection === 'Teleop Cells' ? (
<React.Fragment>
<Dropdown
style={{ display: 'inline-block' }}
focusFirstItemOnShow={false}
onSelect={this.changeTeleBottomColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.teleBottomDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecifics}</Dropdown.Menu>
</Dropdown>
<Dropdown
style={{
display: 'inline-block',
marginLeft: '3%',
marginRight: '3%'
}}
focusFirstItemOnShow={false}
onSelect={this.changeTeleOuterColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.teleOuterDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecifics}</Dropdown.Menu>
</Dropdown>
<Dropdown
style={{ display: 'inline-block' }}
focusFirstItemOnShow={false}
onSelect={this.changeTeleInnerColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.teleInnerDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecifics}</Dropdown.Menu>
</Dropdown>
</React.Fragment>
) : null}
{this.state.tableSection === 'Rotation Control' ? (
<Dropdown
style={{ display: 'inline-block' }}
focusFirstItemOnShow={false}
onSelect={this.changeRotationTimerColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.rotationTimerDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecificsMin}</Dropdown.Menu>
</Dropdown>
) : null}
{this.state.tableSection === 'Position Control' ? (
<Dropdown
style={{ display: 'inline-block' }}
focusFirstItemOnShow={false}
onSelect={this.changePositionTimerColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.positionTimerDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecificsMin}</Dropdown.Menu>
</Dropdown>
) : null}
{this.state.tableSection === 'Climb' ? (
<Dropdown
style={{ display: 'inline-block' }}
focusFirstItemOnShow={false}
onSelect={this.changeClimbTimerColumn}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='sm'
variant='success'
id='dropdown-basic'
>
{this.state.climbTimerDataField}
</Dropdown.Toggle>
<Dropdown.Menu>{tableColumnSpecificsMin}</Dropdown.Menu>
</Dropdown>
) : null}
</div>
<BootstrapTable
striped
hover
keyField='teamNum'
//rowStyle={this.state.style}
bordered
bootstrap4
// defaultSorted={defaultSorted}
data={this.state.competitionData}
columns={compColumns}
filter={filterFactory()}
/>
</div>
);
} else if (this.state.retrieved === 'teamMatchValid') {
return (
<React.Fragment>
<div className='div-main'>
<div className='justify-content-center'>
<img
alt='Logo'
src={Logo}
style={{
width: this.state.widthSize === '90%' ? '70%' : '30%',
marginTop: '20px',
marginLeft: '10px'
}}
/>
</div>
<div style={{ width: this.state.widthSize }} className='div-second'>
<div className='div-form'>
<Form.Group
style={{
width: '100%',
margin: '0 auto',
marginBottom: '10px'
}}
as={Row}
>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
margin: '0 auto'
}}
>
Competition:
</Form.Label>
</Form.Group>
<Dropdown
style={{
marginBottom: '10px'
}}
focusFirstItemOnShow={false}
onSelect={this.getData}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='lg'
variant='success'
id='dropdown-basic'
>
{this.state.competition}
</Dropdown.Toggle>
<Dropdown.Menu style={{ minWidth: '3%' }}>
{competitionItems}
</Dropdown.Menu>
</Dropdown>
<Form.Control
value={this.state.teamNum}
autoComplete='off'
type='number'
max={9999}
min={1}
placeholder='Team Number'
onChange={this.handleTeamNum}
className='mb-1'
style={{
background: 'none',
fontFamily: 'Helvetica, Arial',
display: 'inline-block',
width: '50%'
}}
onKeyDown={this.checkKeyTeamGo}
/>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '4%',
display: 'inline-block'
}}
onClick={this.handleTeamGo}
className='btn-xs'
>
Go
</Button>
</div>
<div>
<Button
size='xs'
onClick={this.changeToMatchData}
variant={
this.state.teamDataType === 'match'
? 'success'
: 'outline-success'
}
style={{ display: 'inline-block', marginRight: '2%' }}
>
Match Data
</Button>
<Button
size='xs'
onClick={this.changeToPitData}
variant={
this.state.teamDataType === 'pit'
? 'success'
: 'outline-success'
}
style={{ display: 'inline-block', marginLeft: '2%' }}
>
Pit Data
</Button>
</div>
</div>
{this.state.widthSize === '90%' ? (
<div className='graph-holder'>
<div className='graph-wrap'>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '15%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Auto - Bottom Cells'
dataKey={'bottomAutoScore'}
fill='#8884d8'
>
<LabelList
dataKey={'bottomAutoScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '15%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Teleop - Bottom Cells'
dataKey={'bottomTeleopScore'}
fill='#8884d8'
>
<LabelList
dataKey={'bottomTeleopScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '15%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Auto - Outer Cells'
dataKey={'outerAutoScore'}
fill='#8884d8'
>
<LabelList
dataKey={'outerAutoScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '15%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Teleop - Outer Cells'
dataKey={'outerTeleopScore'}
fill='#8884d8'
>
<LabelList
dataKey={'outerTeleopScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '15%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Auto - Inner Cells'
dataKey={'innerAutoScore'}
fill='#8884d8'
>
<LabelList
dataKey={'innerAutoScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '15%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Teleop - Inner Cells'
dataKey={'innerTeleopScore'}
fill='#8884d8'
>
<LabelList
dataKey={'innerTeleopScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
</div>
) : (
<React.Fragment>
<div>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '90%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Auto - Bottom Cells'
dataKey={'bottomAutoScore'}
fill='#8884d8'
>
<LabelList
dataKey={'bottomAutoScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '90%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Teleop - Bottom Cells'
dataKey={'bottomTeleopScore'}
fill='#8884d8'
>
<LabelList
dataKey={'bottomTeleopScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
<div>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '90%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Auto - Outer Cells'
dataKey={'outerAutoScore'}
fill='#8884d8'
>
<LabelList
dataKey={'outerAutoScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '90%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Teleop - Outer Cells'
dataKey={'outerTeleopScore'}
fill='#8884d8'
>
<LabelList
dataKey={'outerTeleopScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
<div>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '90%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Auto - Inner Cells'
dataKey={'innerAutoScore'}
fill='#8884d8'
>
<LabelList
dataKey={'innerAutoScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
<ResponsiveContainer
width={this.state.widthSize === '90%' ? '90%' : '50%'}
height={300}
>
<BarChart data={this.state.graphData}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='matchNum'></XAxis>
<YAxis padding={{ top: 25 }} />
<Legend verticalAlign='top' height={36} iconSize={0} />
<Bar
name='Teleop - Inner Cells'
dataKey={'innerTeleopScore'}
fill='#8884d8'
>
<LabelList
dataKey={'innerTeleopScore'}
position='insideTop'
offset={-20}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
</React.Fragment>
)}
</div>
<div className='table-holder'>
<div className='table-wrap'>
<BootstrapTable
striped
hover
keyField='matchNum'
//rowStyle={this.state.style}
bordered
bootstrap4
// defaultSorted={defaultSorted}
data={this.state.matchData}
columns={teamColumns}
/>
</div>
</div>
</React.Fragment>
);
} else if (this.state.retrieved === 'teamPitValid') {
return (
<div className='div-main'>
<div className='justify-content-center'>
<img
alt='Logo'
src={Logo}
style={{
width: this.state.widthSize === '90%' ? '70%' : '30%',
marginTop: '20px',
marginLeft: '10px'
}}
/>
</div>
<div style={{ width: this.state.widthSize }} className='div-second'>
<div className='div-form'>
<Form.Group
style={{
width: '100%',
margin: '0 auto',
marginBottom: '10px'
}}
as={Row}
>
<Form.Label
className='mb-1'
style={{
fontFamily: 'Helvetica, Arial',
fontSize: '110%',
margin: '0 auto'
}}
>
Competition:
</Form.Label>
</Form.Group>
<Dropdown
style={{
marginBottom: '10px'
}}
focusFirstItemOnShow={false}
onSelect={this.getData}
>
<Dropdown.Toggle
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'center'
}}
size='lg'
variant='success'
id='dropdown-basic'
>
{this.state.competition}
</Dropdown.Toggle>
<Dropdown.Menu style={{ minWidth: '3%' }}>
{competitionItems}
</Dropdown.Menu>
</Dropdown>
<Form.Control
value={this.state.teamNum}
autoComplete='off'
type='number'
max={9999}
min={1}
placeholder='Team Number'
onChange={this.handleTeamNum}
className='mb-1'
style={{
background: 'none',
fontFamily: 'Helvetica, Arial',
display: 'inline-block',
width: '50%'
}}
onKeyDown={this.checkKeyTeamGo}
/>
<Button
variant='success'
type='btn'
style={{
fontFamily: 'Helvetica, Arial',
boxShadow: '-3px 3px black, -2px 2px black, -1px 1px black',
border: '1px solid black',
marginLeft: '4%',
display: 'inline-block'
}}
onClick={this.handleTeamGo}
className='btn-xs'
>
Go
</Button>
</div>
<div>
<Button
size='xs'
onClick={this.changeToMatchData}
variant={
this.state.teamDataType === 'match'
? 'success'
: 'outline-success'
}
style={{ display: 'inline-block', marginRight: '2%' }}
>
Match Data
</Button>
<Button
size='xs'
onClick={this.changeToPitData}
variant={
this.state.teamDataType === 'pit'
? 'success'
: 'outline-success'
}
style={{ display: 'inline-block', marginLeft: '2%' }}
>
Pit Data
</Button>
</div>
<div
className='div-form'
style={{ textAlign: 'center', marginTop: '20px' }}
>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Group: ' + this.state.pitData.groupName}
</p>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Weight: ' + this.state.pitData.weight + ' lbs'}
</p>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Height: ' + this.state.pitData.height + ' inches'}
</p>
</div>
<div
className='div-form'
style={{ textAlign: 'center', marginTop: '20px' }}
>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Drive Train: ' + this.state.pitData.driveTrain}
</p>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Motors: ' + this.state.pitData.motors}
</p>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Wheels: ' + this.state.pitData.wheels}
</p>
<p
style={{
textAlign: 'left',
fontSize: '100%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Drive Comments: ' +
(this.state.pitData.driveComments === ''
? 'No comments'
: this.state.pitData.driveComments)}
</p>
</div>
<div
className='div-form'
style={{ textAlign: 'center', marginTop: '20px' }}
>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Code Language: ' + this.state.pitData.codeLanguage}
</p>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Starting Position (Pref.): ' +
this.state.pitData.startingPosition}
</p>
<p
style={{
textAlign: 'left',
fontSize: '100%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Auto Comments: ' +
(this.state.pitData.autoComments === ''
? 'No comments'
: this.state.pitData.autoComments)}
</p>
</div>
<div
className='div-form'
style={{ textAlign: 'center', marginTop: '20px' }}
>
<p
style={{
fontSize: '150%',
fontFamily: 'Helvetica, Arial'
}}
>
Abilities:
</p>
<ul>
{this.state.pitData.abilities.map(ability =>
ability.value ? (
<li
key={ability.id}
style={{
fontFamily: 'Helvetica, Arial',
textAlign: 'left'
}}
>
{ability.label}
</li>
) : null
)}
</ul>
</div>
<div
className='div-form'
style={{ textAlign: 'center', marginTop: '20px' }}
>
<p
style={{
textAlign: 'left',
fontSize: '100%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Working On Comments: ' +
(this.state.pitData.workingOnComments === ''
? 'No comments'
: this.state.pitData.workingOnComments)}
</p>
<p
style={{
textAlign: 'left',
fontSize: '100%',
fontFamily: 'Helvetica, Arial'
}}
>
{'Closing Comments: ' +
(this.state.pitData.closingComments === ''
? 'No comments'
: this.state.pitData.closingComments)}
</p>
</div>
{this.state.pitData.image === null ? (
<p>No Image</p>
) : (
<ImagePreview
dataUri={this.state.pitData.image}
isFullscreen={false}
/>
)}
</div>
</div>
);
}
}
Example #16
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function DashboardPage(props) {
const {
userId,
firstName,
metrics,
getUserMetrics,
getUserMembership,
} = props;
const organization = useSelector((state) => state.organization);
const { permission } = organization;
const [showModal, setShowModal] = useState(false);
const [modalSection, setModalSection] = useState(null);
const storageData = [
{
name: 'Used',
value: metrics.used_storage,
color: '#66ddaa',
},
{
name: 'Free',
value: metrics.total_storage - metrics.used_storage,
color: '#607a9b',
},
];
const bandwidthData = [
{
name: 'Used',
value: (metrics.total_bandwidth === 0) ? 0 : metrics.used_bandwidth,
color: '#66ddaa',
},
{
name: 'Free',
value: (metrics.total_bandwidth === 0) ? 1 : (metrics.total_bandwidth - metrics.used_bandwidth),
color: '#607a9b',
},
];
const usedStoragePercentage = `${Math.round((metrics.used_storage * 100) / metrics.total_storage)}%`;
const usedBandwidthPercentage = (metrics.total_bandwidth === 0) ? '0%' : `${Math.round((metrics.used_bandwidth * 100) / metrics.total_bandwidth)}%`;
useEffect(() => {
if (!userId) return;
getUserMetrics(userId);
getUserMembership(userId);
}, [getUserMembership, getUserMetrics, userId]);
const handleUpgradeClick = () => {
Swal.fire({
icon: 'info',
title: 'WHAT DO I GET WITH MY FREE ACCOUNT?',
confirmButtonText: 'Sign Up',
html: '<ul>'
+ '<li>Free access to CurrikiStudio, designed for the individual user building experiences for their classes</li>'
+ '<li>1GB of Hosting and Services</li>'
+ '<li>Build a portfolio of more than 10 Projects and 100 Playlists</li>'
+ '<li>No loss of work – transfer any or all projects from your demo account</li>'
+ '<li>Publish your projects to Certified LMS Providers, Google Classroom, CMS platforms and websites via CurrikiGo</li>'
+ '<li>Share and access Projects and Playlists with the Curriki Community via CurrikiLibrary</li>'
+ '<ul>',
preConfirm: () => metricsService.redeemOffer('linodeFREE')
.catch((error) => { Swal.showValidationMessage(`Request failed: ${error}`); }),
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
title: 'Conragtulations!',
text: 'Account upgrade successful.',
}).then(() => {
getUserMetrics(userId);
getUserMembership(userId);
});
}
});
};
const handleCounterClick = (section) => {
setModalSection(section);
setShowModal(true);
};
const humanFileSize = (bytes, si = false, dp = 1) => {
const thresh = si ? 1000 : 1024;
if (Math.abs(bytes) < thresh) {
return `${bytes} B`;
}
const units = si
? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
let u = -1;
const r = 10 ** dp;
do {
// eslint-disable-next-line no-param-reassign
bytes /= thresh;
u += 1;
} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
return `${bytes.toFixed(dp)} ${units[u]}`;
};
return (
<>
<div className="dashboard-page">
<div className="content-wrapper">
{permission?.Dashboard?.includes('dashboard:view') ? (
<div className="content">
<div className="row">
<div className="col-md-12">
<h1 className="title">
{(metrics.membership_type) ? `${metrics.membership_type} Account - ` : ''}
Dashboard
</h1>
</div>
</div>
<div className="row">
<div className={(metrics.membership_type_name === 'demo') ? 'col-8 dashboard-panel m-3' : 'col dashboard-panel m-3'}>
<div className="row dashboard-panel-header-row">
<div className="col">
<h1 className="title">
{`Hello, ${firstName}`}
</h1>
</div>
</div>
<div className="row m-3">
<div className="col">
Welcome to the CurrikiStudio Dashboard. Here you will find metrics and general information about your account.
</div>
</div>
<div className="row m-3">
<div className="col">
<div className="row">
<div className="col">
<PieChart width={200} height={200}>
<Pie data={storageData} innerRadius={50} outerRadius={75}>
{storageData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.color} />
))}
<Label value={usedStoragePercentage} position="center" />
</Pie>
</PieChart>
</div>
<div className="col">
<h1 className="title">Storage</h1>
<p>
<label>Total Available:</label>
{humanFileSize(metrics.total_storage)}
<br />
<label>Total Used:</label>
{humanFileSize(metrics.used_storage)}
</p>
</div>
</div>
</div>
<div className="col">
<div className="row">
<div className="col">
<PieChart width={200} height={200}>
<Pie data={bandwidthData} innerRadius={50} outerRadius={75}>
{bandwidthData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.color} />
))}
<Label value={usedBandwidthPercentage} position="center" />
</Pie>
</PieChart>
</div>
<div className="col">
<h1 className="title">Bandwidth</h1>
<p>
<label>Total Available:</label>
{humanFileSize(metrics.total_bandwidth)}
<br />
<label>Total Used:</label>
{humanFileSize(metrics.used_bandwidth)}
</p>
</div>
</div>
</div>
</div>
<div className="row mb-3">
<div className="col">
<label>Current Plan:</label>
{metrics.membership_type}
</div>
<div className="col text-right">
{metrics.membership_type_name === 'demo' && (
<a className="btn btn-primary submit mr-5" onClick={handleUpgradeClick}>Upgrade Now</a>
)}
</div>
</div>
</div>
{metrics.membership_type_name === 'demo' && (
<div className="col">
<div className="row">
<div className="col dashboard-panel m-3 text-center offer-panel">
<div className="row">
<div className="col">
<h1 className="title">Need more storage, views or publishing options?</h1>
</div>
</div>
<div className="row">
<div className="col">
We offer you unlimited storage space for all your needs. You can always upgrade to get more space.
</div>
</div>
<div className="row mt-3">
<div className="col">
<a className="btn btn-primary submit" onClick={handleUpgradeClick}>Upgrade to Basic Account</a>
</div>
</div>
<div className="row mt-1 mb-3">
<div className="col">
It's FREE. Courtesy of Linode.com
</div>
</div>
</div>
</div>
</div>
)}
</div>
<div className="row metrics-counters">
<div className="col dashboard-panel m-3">
<div className="row dashboard-panel-header-row">
<div className="col">
<h1 className="title">Projects</h1>
</div>
</div>
<div className="row text-center">
<div className="col">
<span className="count" onClick={() => handleCounterClick('project-count')}>{metrics.project_count}</span>
<label>COUNT</label>
</div>
<div className="col">
<span>{metrics.project_views}</span>
<label>VIEWS</label>
</div>
<div className="col">
<span className="count" onClick={() => handleCounterClick('project-shared-count')}>{metrics.project_shares}</span>
<label>SHARED</label>
</div>
</div>
</div>
<div className="col dashboard-panel m-3">
<div className="row dashboard-panel-header-row">
<div className="col">
<h1 className="title">Playlists</h1>
</div>
</div>
<div className="row text-center">
<div className="col">
<span className="count" onClick={() => handleCounterClick('playlist-count')}>{metrics.playlist_count}</span>
<label>COUNT</label>
</div>
<div className="col">
<span>{metrics.playlist_views}</span>
<label>VIEWS</label>
</div>
<div className="col">
<span>{metrics.playlist_shares}</span>
<label>SHARED</label>
</div>
</div>
</div>
<div className="col dashboard-panel m-3">
<div className="row dashboard-panel-header-row">
<div className="col">
<h1 className="title">Activities</h1>
</div>
</div>
<div className="row text-center">
<div className="col">
<span className="count" onClick={() => handleCounterClick('activity-count')}>{metrics.activity_count}</span>
<label>COUNT</label>
</div>
<div className="col">
<span>{metrics.activity_views}</span>
<label>VIEWS</label>
</div>
<div className="col" onClick={() => handleCounterClick('activity-shared-count')}>
<span className="count">{metrics.activity_shares}</span>
<label>SHARED</label>
</div>
</div>
</div>
</div>
</div>
) : <Alert variant="danger">You are not authorized to access Dashboard.</Alert>}
</div>
</div>
{(showModal) && (
<SlideModal modalSection={modalSection} closeModal={() => setShowModal(false)} />
)}
</>
);
}
Example #17
| Source File: SkewMetricsView.jsx From amazon-connect-snippets with MIT No Attribution | 4 votes |
|
render() {
const {
classes, className: classNameProp, log,
} = this.props;
const {
skewThreshold,
hideReferenceArea,
referenceAreaOpacities,
} = this.state;
const snapshots = log
.filter((event) => (event.text === 'GET_AGENT_SNAPSHOT succeeded.'))
.flatMap((event) => event.objects.map((object, idx) => ({
...object.snapshot,
_event: event,
_key: `${event._key}-${idx}`,
_date: object.snapshot.snapshotTimestamp.substring(0, 10),
_time: object.snapshot.snapshotTimestamp.substring(11, 23),
_timezone: object.snapshot.snapshotTimestamp.substring(23),
_snapshotTimestamp: dayjs(object.snapshot.snapshotTimestamp).valueOf(),
_localTimestamp: event._ts,
localTimestamp: dayjs(event._ts).toISOString(),
_type: 'SNAPSHOT',
})))
.map((snapshot, idx, arr) => {
const eventKeyFrom = snapshot._event._key;
// eslint-disable-next-line max-len
const eventKeyTo = (idx !== arr.length - 1) ? arr[idx + 1]._event._key : log[log.length - 1]._key;
return {
...snapshot,
// eslint-disable-next-line max-len
_targetEventKeys: Array.from(Array(eventKeyTo - eventKeyFrom), (v, k) => (k + eventKeyFrom)),
};
});
const seqSnapshots = snapshots // removing the duplications in states.
.reduce((acc, x) => {
if (acc.length > 0 && acc[acc.length - 1][0].state.name === x.state.name) {
acc[acc.length - 1].push(x);
} else {
acc.push([x]);
}
return acc;
}, []);
const gradientOffset = () => {
const dataMax = Math.max(...snapshots.map((s) => s.skew));
const dataMin = Math.min(...snapshots.map((s) => s.skew));
const y0 = Math.min(1, Math.max(0, (skewThreshold - dataMin) / (dataMax - dataMin)));
const y1 = Math.min(1, Math.max(0, (-skewThreshold - dataMin) / (dataMax - dataMin)));
return [
1 - y0,
1 - y1,
];
};
const off = gradientOffset();
const data = () => snapshots;
return (
<div className={clsx(classes.root, classNameProp)}>
<Container
title="Skew Metrics"
gutters={false}
actionGroup={(
<>
{hideReferenceArea
? (
<Button
className={classes.toggleReferenceArea}
onClick={() => this.handleToggleReferenceArea()}
>
Show Reference Area
</Button>
)
: (
<Button
className={classes.toggleReferenceArea}
onClick={() => this.handleToggleReferenceArea()}
>
Hide Reference Area
</Button>
)}
</>
)}
>
<div className={classes.content}>
<ResponsiveContainer width="100%" height={300}>
<ComposedChart
data={data()}
margin={{
top: 5, right: 20, bottom: 5, left: 20,
}}
>
<YAxis>
<Label angle={270} position="left" style={{ textAnchor: 'middle' }}>
Skew (ms)
</Label>
</YAxis>
<XAxis dataKey="_localTimestamp" type="number" scale="time" domain={['auto', 'auto']} tick={this.renderCustomAxisTick} />
<CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
{/* eslint-disable-next-line max-len */}
<Area type="monotone" dataKey="skew" stroke="#000" fill="url(#splitColor)" connectNulls isAnimationActive={false} />
<Tooltip content={this.renderCustomTooltip} />
<defs>
<linearGradient id="splitColor" x1="0" y1="0" x2="0" y2="1">
<stop offset={off[0]} stopColor="red" stopOpacity={1} />
<stop offset={off[0]} stopColor="green" stopOpacity={1} />
<stop offset={off[1]} stopColor="green" stopOpacity={1} />
<stop offset={off[1]} stopColor="red" stopOpacity={1} />
</linearGradient>
</defs>
{!hideReferenceArea && seqSnapshots.map((s, i, arr) => {
const s0 = s[0];
const s1 = (i < arr.length - 1)
? arr[i + 1][0] : s[s.length - 1];
const stateHits = Object.keys(colorMap)
.filter((name) => s0.state.name.includes(name));
const color = (stateHits.length > 0)
? colorMap[stateHits[0]] : colorMap.__other;
// eslint-disable-next-line max-len
const opacity = (stateHits.length > 0) ? referenceAreaOpacities[stateHits[0]] : referenceAreaOpacities.__other;
return (
<ReferenceArea
key={s0._key}
className={classes.referenceArea}
x1={s0._localTimestamp}
x2={s1._localTimestamp}
ifOverflow="extendDomain"
opacity={opacity}
fill={color}
/>
);
})}
{!hideReferenceArea && <Legend content={this.renderCustomLegend} />}
</ComposedChart>
</ResponsiveContainer>
</div>
</Container>
</div>
);
}
Example #18
| Source File: CountryTestCase.js From covid-19 with MIT License | 4 votes |
|
CountryTestCase = () => {
const countryNameFromStorage = reactLocalStorage.getObject('country_selection');
const MY_COUNTRY = Object.keys(countryNameFromStorage).length > 0 ?
countryNameFromStorage :
'India';
const SUCCESS_COLOR_SHADES = randomColor({
count: 11,
luminosity: 'bright',
hue: 'random'
});
const covid19Data = useSelector(state => state.covid19);
let countryData = covid19Data.map(({ country, tests, cases, perct }) => ({ country, tests, cases })).filter(elem => {
return (elem.tests > 0 || elem.country === 'World')
});
countryData.map(elem => {
let calc = elem['cases'] * 100 / elem['tests'];
elem['perct'] = calc.toFixed(2);
return elem;
});
let sortedData = countryData.sort((a, b) => b.cases - a.cases);
let cloned = JSON.parse(JSON.stringify(sortedData));
let topNData = cloned.splice(0, 9);
const foundMyCountry = topNData.filter(elem => {
return elem.country === MY_COUNTRY;
});
if (foundMyCountry.length === 0) {
topNData.push(countryData.filter(elem => {
return elem.country === MY_COUNTRY
})[0]);
}
let refinedData = [];
topNData.forEach(element => {
let obj = {};
obj['country'] = element['country'];
obj['% Positive'] = element['perct'];
obj['cases'] = element['cases'];
obj['tests'] = element['tests'];
refinedData.push(obj);
});
const maxDomain = Math.round(topNData.sort((a, b) => b.perct - a.perct)[0]['perct']) + 20
const CustomTooltip = ({ active, payload, label }) => {
if (active) {
return (
<div className="custom-tooltip">
<p className="label">{`${payload[0].payload.country}`}</p>
<div className="intro">
<CurrencyFormat
value={payload[0].payload.tests}
displayType={'text'}
thousandSeparator={true}
renderText={value =>
<div className="value">
{`Total Tests Done: ${value}`}
</div>}
/>
<CurrencyFormat
value={payload[0].payload.cases}
displayType={'text'}
thousandSeparator={true}
renderText={value =>
<div className="value">
{`Total Cases: ${value}`}
</div>}
/>
<CurrencyFormat
value={payload[0].payload['% Positive']}
displayType={'text'}
thousandSeparator={true}
renderText={value =>
<div className="value">
{`Cases vs Tests (%Positive): ${value}%`}
</div>}
/>
</div>
</div>
);
}
return null;
};
const renderCustomizedLabel = (props) => {
const { x, y, width, height, value } = props;
const radius = 23;
return (
<g>
<circle cx={x + width / 2} cy={y - radius} r={radius} fill="#FFF" />
<text x={x + width / 2} y={y - radius} fill="#000" textAnchor="middle" dominantBaseline="middle">
{value}%
</text>
</g>
);
};
return (
<div className="country-test-cases-widget">
<Card >
<Card.Body>
<Card.Title>Country Tests vs Positive</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Percentage of Postive Cases Compared to the Test done.</Card.Subtitle>
<div>
<ResponsiveContainer width='100%' height={330}>
<BarChart
data={refinedData}
margin={{
top: 30, right: 0, left: 0, bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="country" >
<Label value="Country" offset={-3} position="insideBottom" />
</XAxis>
<YAxis type="number" domain={[0, maxDomain]} label={{ value: '% Positive over Tests', angle: -90, position: 'insideLeft' }}/>
<Tooltip content={<CustomTooltip />} />
<Bar dataKey="% Positive">
{
refinedData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={SUCCESS_COLOR_SHADES[index % 20]} />
))
}
<LabelList dataKey="% Positive" position="top" content={renderCustomizedLabel} />
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
</Card.Body>
</Card>
</div>
)
}
Example #19
| Source File: profile.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout className="layout-style">
{this.state.loading && (
<div style={{ position: "absolute", left: "55%", transform: "translate(-55%, 0%)", zIndex: 10 }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>
)}
{
!this.state.targetUser && !this.state.loading && (
<div style={{ height: "100%", width: "100%" }}>
<br /><br /><br />
<Empty
image={<FrownOutlined />}
imageStyle={{ fontSize: "500%", color: "#177ddc" }}
description={<h1>We were unable to find the user "{this.props.match.params.user}"</h1>}
/>
</div>
)
}
{
this.state.targetUser && !this.state.loading && (
<Layout style={{ height: "100%", width: "100%", padding: "3%", backgroundColor: "rgba(0, 0, 0, 0)" }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ display: "flex" }}>
<div style={{ display: "flex", marginRight: "5ch", alignItems: "center", justifyItems: "center" }}>
<Avatar style={{ backgroundColor: "transparent", marginRight: "3ch", width: "10ch", height: "10ch" }} size='large' src={"/static/profile/" + this.state.targetUser + ".webp"} />
<h1 style={{ fontSize: "5ch" }}>{this.state.targetUser}</h1>
</div>
<div>
<h1 style={{ fontSize: "5ch", color: "#faad14" }}><span style={{ color: "#d48806", fontSize: "1.5ch" }}><u>Score:</u> </span>{this.state.userScore}</h1>
</div>
</div>
</div>
<Divider />
<h1 style={{ fontSize: "3ch" }}>Score History</h1>
<div style={{ height: 375, width: "100%", backgroundColor: "rgba(0, 0, 0, 0.3)", border: "5px solid transparent", borderRadius: "20px", padding: "10px", margin: "10px" }}>
<ResponsiveContainer width="90%" height={350}>
<AreaChart height={350} data={this.state.graphData}
margin={{ top: 10, right: 15, left: 15, bottom: 15 }}>
<defs>
<linearGradient id="color1" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#791a1f" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f89f9a" stopOpacity={0.1} />
</linearGradient>
</defs>
<XAxis dataKey="Time">
<Label offset={-5} position="insideBottom" style={{ fill: 'rgba(207, 207, 207, 1)' }}>
Time
</Label>
</XAxis>
<YAxis >
<Label offset={-10} position='insideLeft' style={{ fill: 'rgba(207, 207, 207, 1)' }}>
Score
</Label>
</YAxis>
<CartesianGrid strokeDasharray="3 3" />
<Tooltip labelStyle={{ backgroundColor: "#1c2b3e" }} contentStyle={{ backgroundColor: "#1c2b3e" }} wrapperStyle={{ backgroundColor: "#1c2b3e" }} />
<Area isAnimationActive={false} type="monotone" dataKey="Score" stroke="#d32029" fillOpacity={1} fill="url(#color1)" />
</AreaChart>
</ResponsiveContainer>
</div>
<Table style={{ marginTop: "2vh" }} dataSource={this.state.scores} pagination={{ pageSize: 10 }} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>{this.state.targetUser} has not completed any challenges/bought any hints</h1>
</div>
)
}}>
<Column width={1} title="Challenge/Hint" dataIndex="challenge" key="challenge"
render={(text, row, index) => {
if (row.challengeID !== "") return <Link to={"/Challenges/" + row.challengeID}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
else return (<span>{text}</span>);
}} />
<Column width={30} title="Score Change" dataIndex="score" key="score" />
<Column width={30} title="Solved Timestamp" dataIndex="time" key="time" />
</Table>
</Layout>
)
}
</Layout>
)
}
Example #20
| Source File: Teams.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout className="layout-style">
<Modal
title={<span>Create New Team <UsergroupAddOutlined /></span>}
visible={this.state.createTeamModal}
footer={null}
onCancel={() => { this.setState({ createTeamModal: false }) }}
>
<CreateTeamForm setState={this.setState.bind(this)} obtainScore={this.props.obtainScore.bind(this)} loadTeamDetails={this.loadTeamDetails.bind(this)} setTeam={this.props.setTeam.bind(this)} />
</Modal>
{this.state.loading ? (
<div style={{ position: "absolute", left: "55%", transform: "translate(-55%, 0%)", zIndex: 10 }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>
) : (
<div>
{this.props.team === "teams-disabled" ? (
<div style={{ display: "flex", placeContent: "center center", textAlign: "center", fontSize: "130%", width: "100%", height: "100%" }}>
<div>
<TeamOutlined style={{ fontSize: "600%", color: "#177ddc" }} />
<div>
<h1>It seem's like teams are disabled.</h1>
<p>If you believe this is an error, please contact the admins.</p>
</div>
</div>
</div>
) : (
<div>
{this.state.notFound ? (
<div style={{ display: "flex", placeContent: "center center", textAlign: "center", fontSize: "130%", width: "100%", height: "100%" }}>
<div>
<TeamOutlined style={{ fontSize: "600%", color: "#177ddc" }} />
<div>
<h1>We were unable to find this team.</h1>
</div>
</div>
</div>
) : (
<div>
{this.state.teamName ?
(
<Layout style={{ height: "100%", width: "100%", padding: "3%", backgroundColor: "rgba(0, 0, 0, 0)" }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "2ch" }}>
<div style={{ display: "flex" }}>
<div style={{ display: "flex", marginRight: "5ch", alignItems: "center", justifyItems: "center" }}>
<Avatar.Group
maxCount={3}
>
{this.state.members.map((member) => {
return (
<Avatar style={{ backgroundColor: "transparent", marginRight: "3ch", width: "10ch", height: "10ch" }} size='large' src={"/static/profile/" + member + ".webp"} />
)
})}
</ Avatar.Group>
<h1 style={{ fontSize: "5ch" }}>{this.state.teamName}</h1>
</div>
<div>
<h1 style={{ fontSize: "5ch", color: "#faad14" }}><span style={{ color: "#d48806", fontSize: "1.5ch" }}><u>Team Score:</u> </span>{this.state.teamScore}</h1>
</div>
</div>
</div>
{this.state.teamName === this.props.team && (
<div style={{ backgroundColor: "rgba(0, 0, 0, 0.3)", border: "5px solid transparent", borderRadius: "20px", width: "fit-content", padding: "20px" }}>
<h4 style={{ fontSize: "2ch", color: "#49aa19" }}>You are part of this team</h4>
<div style={{ marginTop: "2ch" }}>
<div style={{ display: "flex", marginBottom: "2ch" }}>
<Input value={window.location.origin + "/Team/Join/" + this.state.code} />
<Button type="primary" style={{ marginLeft: "1ch" }} icon={<LinkOutlined />} onClick={async () => {
await navigator.clipboard.writeText(window.location.origin + "/Team/Join/" + this.state.code);
message.success("Invite link copied to clipboard.")
}}>Copy Invite Link</Button>
</div>
<Button style={{ marginRight: "1ch" }} danger type="primary" onClick={() => {
confirm({
title: "Leave Team?",
content: <span>Are you sure you want to leave: <b><u>{this.state.teamName}</u></b>?</span>,
icon: <WarningOutlined />,
maskClosable: true,
okText: "Leave Team",
confirmLoading: this.state.joinLoading,
onOk: (close) => { this.leaveTeam(close) },
onCancel: () => { },
});
}}>Leave Team</Button>
</div>
</div>
)}
<Divider />
<h1 style={{ fontSize: "3ch" }}>Individual Member's Scoring</h1>
<Table style={{ marginTop: "2vh" }} dataSource={this.state.userScores} pagination={{ pageSize: 10 }} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>{this.state.teamName} has not completed any challenges/bought any hints</h1>
</div>
)
}}>
<Column width={30} title="Username" dataIndex="username" key="username"
render={(text, row, index) => {
return <Link to={"/Profile/" + text}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
}}
/>
<Column width={30} title="Total Score" dataIndex="score" key="score" />
</Table>
<Divider />
<h1 style={{ fontSize: "3ch" }}>Team Score History</h1>
<div style={{ height: 375, width: "100%", backgroundColor: "rgba(0, 0, 0, 0.3)", border: "5px solid transparent", borderRadius: "20px", padding: "10px", margin: "10px" }}>
<ResponsiveContainer width="90%" height={350}>
<AreaChart height={350} data={this.state.graphData}
margin={{ top: 10, right: 15, left: 15, bottom: 15 }}>
<defs>
<linearGradient id="color1" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#791a1f" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f89f9a" stopOpacity={0.1} />
</linearGradient>
</defs>
<XAxis dataKey="Time">
<Label offset={-5} position="insideBottom" style={{ fill: 'rgba(207, 207, 207, 1)' }}>
Time
</Label>
</XAxis>
<YAxis >
<Label offset={-10} position='insideLeft' style={{ fill: 'rgba(207, 207, 207, 1)' }}>
Score
</Label>
</YAxis>
<CartesianGrid strokeDasharray="3 3" />
<Tooltip labelStyle={{ backgroundColor: "#1c2b3e" }} contentStyle={{ backgroundColor: "#1c2b3e" }} wrapperStyle={{ backgroundColor: "#1c2b3e" }} />
<Area isAnimationActive={false} type="monotone" dataKey="Score" stroke="#d32029" fillOpacity={1} fill="url(#color1)" />
</AreaChart>
</ResponsiveContainer>
</div>
<Table style={{ marginTop: "2vh" }} dataSource={this.state.scores} pagination={{ pageSize: 10 }} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>{this.state.teamName} has not completed any challenges/bought any hints</h1>
</div>
)
}}>
<Column width={30} title="Username" dataIndex="username" key="username"
render={(text, row, index) => {
return <Link to={"/Profile/" + text}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
}}
/>
<Column width={1} title="Challenge/Hint" dataIndex="challenge" key="challenge"
render={(text, row, index) => {
if (row.challengeID !== "") return <Link to={"/Challenges/" + row.challengeID}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
else return (<span>{text}</span>);
}} />
<Column width={30} title="Score Change" dataIndex="score" key="score" />
<Column width={30} title="Solved Timestamp" dataIndex="time" key="time" />
</Table>
</Layout>
) :
(
<div style={{ display: "flex", placeContent: "center center", textAlign: "center", fontSize: "130%", width: "100%", height: "100%" }}>
<div>
<TeamOutlined style={{ fontSize: "600%", color: "#177ddc" }} />
<div>
<h1>The world's a dangerous place</h1> <h2>Don't go alone, join/create a team today!</h2>
</div>
<Button icon={<UsergroupAddOutlined />} type="primary" size="large" onClick={() => { this.setState({ createTeamModal: true }) }}>Create a Team</Button>
<div style={{ marginTop: "3ch" }}>
<span>Got an <b>invite link <LinkOutlined />?</b></span>
<div>
<Button style={{ marginTop: "1ch" }} size="large" type="primary" icon={<LinkOutlined />} onClick={() => {
navigator.clipboard.readText().then(text => {
if (!(/^.*\/Team\/Join\/[0-9a-fA-F]{32}$/.test(text))) message.error("Invalid link. Please check that you have copied the link correctly.", 3)
else {
const code = text.split("/Team/Join/")
this.getCodeDetails(code[1])
}
}).catch(err => {
console.log(err)
message.error("Failed to read link from your clipboard.", 5)
message.info("Please ensure that you have allowed permissions for reading of clipboard text.", 5)
})
}}>Paste & Use Link</Button>
</div>
</div>
</div>
</div>
)
}
</div>
)}
</div>
)}
</div>
)}
</Layout>
)
}
Example #21
| Source File: Scoreboard.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout className="layout-style">
<div style={{ height: 375, width: "100%", backgroundColor: "rgba(0, 0, 0, 0.3)", border: "5px solid transparent", borderRadius: "20px", padding: "10px", margin: "10px" }}>
<ResponsiveContainer width="90%" height={350} debounce={200}>
<AreaChart height={350} data={this.state.graphData}
margin={{ top: 10, right: 15, left: 15, bottom: 15 }}>
<defs>
<linearGradient id="color1" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#791a1f" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f89f9a" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color2" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#7c4a15" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f8cf8d" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color3" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#7c5914" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f8df8b" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color4" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#536d13" stopOpacity={0.3} />
<stop offset="95%" stopColor="#e4f88b" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color5" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#306317" stopOpacity={0.3} />
<stop offset="95%" stopColor="#b2e58b" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color6" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#146262" stopOpacity={0.3} />
<stop offset="95%" stopColor="#84e2d8" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color7" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#164c7e" stopOpacity={0.3} />
<stop offset="95%" stopColor="#8dcff8" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color8" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#203175" stopOpacity={0.3} />
<stop offset="95%" stopColor="#a8c1f8" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color9" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#3e2069" stopOpacity={0.3} />
<stop offset="95%" stopColor="#cda8f0" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color10" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#75204f" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f8a8cc" stopOpacity={0.1} />
</linearGradient>
</defs>
<XAxis dataKey="Time">
<Label offset={-5} position="insideBottom" style={{ fill: 'rgba(207, 207, 207, 1)' }}>
Time
</Label>
</XAxis>
<YAxis >
<Label offset={-10} position='insideLeft' style={{ fill: 'rgba(207, 207, 207, 1)' }}>
Score
</Label>
</YAxis>
<CartesianGrid strokeDasharray="3 3" />
<Tooltip labelStyle={{ backgroundColor: "#1c2b3e" }} contentStyle={{ backgroundColor: "#1c2b3e" }} wrapperStyle={{ backgroundColor: "#1c2b3e" }} />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[0]} stroke="#d32029" fillOpacity={1} fill="url(#color1)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[1]} stroke="#d87a16" fillOpacity={1} fill="url(#color2)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[2]} stroke="#d89614" fillOpacity={1} fill="url(#color3)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[3]} stroke="#8bbb11" fillOpacity={1} fill="url(#color4)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[4]} stroke="#49aa19" fillOpacity={1} fill="url(#color5)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[5]} stroke="#13a8a8" fillOpacity={1} fill="url(#color6)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[6]} stroke="#177ddc" fillOpacity={1} fill="url(#color7)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[7]} stroke="#2b4acb" fillOpacity={1} fill="url(#color8)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[8]} stroke="#642ab5" fillOpacity={1} fill="url(#color9)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[9]} stroke="#cb2b83" fillOpacity={1} fill="url(#color10)" />
<Area isAnimationActive={false} type="monotone" dataKey="Hi" stroke="#8884d8" fillOpacity={1} fill="url(#colorPv)" />
</AreaChart>
</ResponsiveContainer>
{this.state.loadingGraph && (
<div style={{ position: "absolute", left: "55%", transform: "translate(-55%, 0%)", zIndex: 10 }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>
)}
</div>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
{this.state.liveUpdates ?
<div style={{ display: "flex", alignItems: "center", flexDirection: "row", justifyContent: "flex-end" }}><h4>Live Scoreboard </h4> <Ripple color="#a61d24" size={40} /></div> :
<div style={{ display: "flex", alignItems: "center", flexDirection: "row", justifyContent: "flex-end" }}><h4>Connecting Live Scoreboard </h4> <Ellipsis color="#177ddc" size={40} /></div>
}
<div style={{ display: "flex", alignContent: "center" }}>
<h1><ApartmentOutlined /> Category: </h1>
<Select loading={this.state.loadingGraph || this.state.loadingTable} defaultValue="none" style={{ width: "20ch", backgroundColor: "#1f1f1f", marginLeft: "1ch" }} onChange={(value) => { this.handleCategoryChange(value) }}>
{this.state.categoryListOptions}
</Select>
</div>
</div>
{!this.state.loadingTable && (
<div style={{ height: "70%", width: "100%", minWidth: "70vw" }}>
<Table style={{ marginTop: "2vh" }} dataSource={this.state.scores} pagination={{ pageSize: 20 }} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>There are no users created/There are no users in this category</h1>
</div>
)
}}>
<Column title="Position" dataIndex="position" key="position" />
<Column title="Username" dataIndex="username" key="username"
render={(text, row, index) => {
if (row.isTeam) {
return (
<Link to={"/Team/" + text}><a style={{ fontSize: "110%", fontWeight: 700, display: "flex", alignItems: "center" }}>
<Avatar.Group
maxCount={3}
maxStyle={{ marginRight: "1ch" }}
>
{row.members.map((member) => {
return (<Avatar src={"/static/profile/" + member + ".webp"} style={{ marginRight: "1ch" }} />)
})}
</Avatar.Group>
<span>{text} <TeamOutlined /></span>
</a>
</Link>);
}
else {
return <Link to={"/Profile/" + text}><a style={{ fontSize: "110%", fontWeight: 700 }}><Avatar src={"/static/profile/" + text + ".webp"} style={{ marginRight: "1ch" }} /><span>{text}</span></a></Link>;
}
}}
/>
<Column title="Score" dataIndex="score" key="score" />
<Column title="Last Solve" dataIndex="time" key="time" />
</Table>
</div>
)}
</Layout>
);
}
Example #22
| Source File: MainLineChart.js From covid with GNU General Public License v3.0 | 4 votes |
|
MainLineChart = () => {
const chartData = useSelector(state => state.chartData.data);
const maximums = useSelector(state => state.chartData.maximums);
const dataParams = useSelector(state => state.dataParams);
const nType = useSelector(state => state.dataParams.nType);
const dType = useSelector(state => state.dataParams.dType);
const currentVariable = useSelector(state => state.currentVariable);
const currentData = useSelector(state => state.currentData);
const selectionKeys = useSelector(state => state.selectionKeys);
const selectionNames = useSelector(state => state.selectionNames);
const storedData = useSelector(state => state.storedData);
const currentTable = useSelector(state => state.currentTable);
const populationNormalized = useSelector(state => state.chartParams.populationNormalized);
const [logChart, setLogChart] = useState(false);
const [showSummarized, setShowSummarized] = useState(true);
const [activeLine, setActiveLine] = useState(false);
const dispatch = useDispatch();
const handleSwitch = () => setLogChart(prev => !prev)
const handlePopSwitch = () => dispatch(setChartParams({populationNormalized: !populationNormalized}))
const handleSummarizedSwitch = () => setShowSummarized(prev => !prev)
const handleChange = (newValue) => {
if (nType === "time-series" && dType === "time-series") {
dispatch(setVariableParams({nIndex: newValue, dIndex: newValue}))
} else if (nType === "time-series") {
dispatch(setVariableParams({nIndex: newValue}))
} else if (dType === "time-series") {
dispatch(setVariableParams({dIndex: newValue}))
} else if (currentVariable.includes('Testing')){
dispatch(setVariableParams({nIndex: newValue}))
}
};
const chartSetDate = (e) => {
if (e?.activeTooltipIndex !== undefined) {
if (storedData[currentTable.numerator].dates.indexOf(e.activeTooltipIndex) !== -1) {
handleChange(e.activeTooltipIndex)
} else {
handleChange(storedData[currentTable.numerator].dates.reduce((a, b) => {return Math.abs(b - e.activeTooltipIndex) < Math.abs(a - e.activeTooltipIndex) ? b : a}))
}
}
}
const rangeIncrement = ( maximum ) => {
let returnArray = []
const increment = 2*10**(`${maximum}`.length-1);
for (let i=0; i<maximum; i+=increment) {
returnArray.push(i)
}
return returnArray;
}
const handleLegendHover = (o) => {
setActiveLine(o.dataKey)
}
const handleLegendLeave = () => {
setActiveLine(false)
}
if (maximums && chartData) {
return (
<ChartContainer id="lineChart">
{(selectionNames.length < 2) ?
<ChartTitle>Total Cases and 7-Day Average New Cases {selectionNames.length ? `: ${selectionNames[0]}` : ''}</ChartTitle>
:
<ChartTitle>7-Day Average New Cases</ChartTitle>
}
<ResponsiveContainer width="100%" height="80%">
<LineChart
data={chartData}
margin={{
top: 0, right: 10, left: 10, bottom: 20,
}}
onClick={nType === 'characteristic' ? '' : chartSetDate}
>
<XAxis
dataKey="date"
ticks={dateRange}
minTickGap={-50}
tick={
<CustomTick
style={{
fill: `${colors.white}88`,
fontSize: "10px",
fontFamily: "Lato",
fontWeight: 600,
transform:'translateY(10px)'
}}
labelFormatter={dateFormatter}
/>
}
/>
<YAxis yAxisId="left" type="number" scale={logChart ? "log" : "linear"} domain={[0.01, 'dataMax']} allowDataOverflow
ticks={selectionKeys.length === 0 ? rangeIncrement({maximum: maximums.sum}) : []}
minTickGap={1}
tick={
<CustomTick
style={{
fill: colors.lightgray,
fontSize: "10px",
fontFamily: "Lato",
fontWeight: 600
}}
labelFormatter={numberFormatter}
/>
}
>
<Label value="Total Cases" position='insideLeft' style={{marginTop:10, fill:colors.lightgray, fontFamily: 'Lato', fontWeight: 600}} angle={-90} />
</YAxis>
<YAxis yAxisId="right" orientation="right" scale={logChart ? "log" : "linear"} domain={[0.01, 'dataMax']} allowDataOverflow
ticks={selectionKeys.length === 0 ? rangeIncrement({maximum: maximums.count}) : []}
minTickGap={1}
tick={
<CustomTick
style={{
fill: colors.yellow,
fontSize: "10px",
fontFamily: "Lato",
fontWeight: 600,
}}
labelFormatter={numberFormatter}
/>
}
>
<Label value="7-Day Average New Cases" position='insideTopRight' style={{marginTop:10, fill:(selectionKeys.length < 2 ? colors.yellow : colors.lightgray), fontFamily: 'Lato', fontWeight: 600}} angle={-90} />
</YAxis>
<Tooltip
content={CustomTooltip}
/>
<ReferenceArea
yAxisId="left"
x1={dataParams.nRange === null ?
dataParams.variableName.indexOf('Testing') !== -1 ? dataParams.nIndex - 7 : 0
: dataParams.nIndex-dataParams.nRange}
x2={dataParams.nIndex}
fill="white"
fillOpacity={0.15}
isAnimationActive={false}
/>
{selectionKeys.length < 2 && <Line type="monotone" yAxisId="left" dataKey={"sum"} name="Total Cases" stroke={colors.lightgray} dot={false} isAnimationActive={false} /> }
{selectionKeys.length < 2 && <Line type="monotone" yAxisId="right" dataKey={selectionKeys.length > 0 ? selectionNames[0] : "count"} name="7-Day Average New Cases" stroke={colors.yellow} dot={false} isAnimationActive={false} /> }
{(selectionKeys.length > 1 && showSummarized) &&
<Line
type='monotone'
yAxisId='right'
dataKey='sum'
name='Total For Selection'
stroke={colors.lightgray}
strokeWidth={3}
dot={false}
isAnimationActive={false}
/>
}
{selectionKeys.length > 1 &&
selectionNames.map((key,index) => {
return <Line
type='monotone'
yAxisId='left'
dataKey={key}
name={key + ' 7-Day Ave'}
stroke={selectionKeys.length > colors.qualtitiveScale.length ? 'white' : colors.qualtitiveScale[index]}
dot={false}
isAnimationActive={false}
strokeOpacity={activeLine === key ? 1 : 0.7}
strokeWidth={activeLine === key ? 3 : 1}
/>}
)
}
{selectionKeys.length < colors.qualtitiveScale.length && <Legend
onMouseEnter={handleLegendHover}
onMouseLeave={handleLegendLeave}
/>}
</LineChart>
</ResponsiveContainer>
<SwitchesContainer>
<StyledSwitch>
<Switch
checked={logChart}
onChange={handleSwitch}
name='log chart switch'
inputProps={{ 'aria-label': 'secondary checkbox' }}
/>
<p>{logChart ? 'Log Scale' : 'Linear Scale'}</p>
</StyledSwitch>
<StyledSwitch>
<Switch
checked={populationNormalized}
onChange={handlePopSwitch}
name='population normalized chart switch'
inputProps={{ 'aria-label': 'secondary checkbox' }}
/>
<p>{populationNormalized ? 'Per 100k' : 'Counts'}</p>
</StyledSwitch>
{selectionKeys.length > 1 && <StyledSwitch>
<Switch
checked={showSummarized}
onChange={handleSummarizedSwitch}
name='show summarized chart switch'
inputProps={{ 'aria-label': 'secondary checkbox' }}
/>
<p>{showSummarized ? `Show ${populationNormalized ? 'Average' : 'Total'} For Selection` : `Show ${currentData.includes('state') ? 'States' : 'Counties'}` }</p>
</StyledSwitch>}
</SwitchesContainer>
</ChartContainer>
);
} else {
return <div></div>
}
}
Example #23
| Source File: AdvancedGraph.js From covid-19 with MIT License | 4 votes |
|
Chart = (props) => {
const ordered = (props.specs || []).sort((a, b) => {
if (a.derived && !b.derived) {
return -1;
} else if (!a.derived && b.derived) {
return 1;
} else {
return a.label < b.label ? -1 : 1;
}
});
let YAxis0Color = "black";
let YAxis1Color = undefined;
for (const s of ordered) {
if (s.rightAxis) {
YAxis1Color = s.color;
} else {
YAxis0Color = s.color;
}
}
function getvRefLines(lines) {
let result = (lines || []).map((l, idx) => {
return <ReferenceLine key={`vrefline${idx}`}
x={l.date}
stroke="#e3e3e3"
strokeWidth={1}
>
<Label value={l.label} position={"insideTop"} fill="#b3b3b3" />
</ReferenceLine>
}
);
return result;
}
function getvRefAreas(lines) {
let result = (lines || []).map((l, idx) => {
const startdate = l.date;
const today = moment().unix();
let enddate = startdate + 14 * 24 * 60 * 60;
while (enddate > today) {
enddate -= 24 * 60 * 60;
}
return <ReferenceArea key={`vrefarea${idx}`}
x1={startdate} x2={enddate}
// stroke="red"
// strokeOpacity={0.3}
fillOpacity={0.15}
/>
}
);
return result;
}
function gethRefLines(lines) {
let result = (lines || []).map((l, idx) => {
return <ReferenceLine key={`hrefline${idx}`}
y={l.value}
stroke="#e3e3e3"
strokeWidth={1}
>
<Label value={l.label} position={"insideLeft"} ></Label>
</ReferenceLine>
}
);
return result;
}
let vRefLines = getvRefLines(props.vRefLines);
let hRefLines = gethRefLines(props.hRefLines);
return (
<ResponsiveContainer height={300}>
<LineChart data={props.data} margin={{ left: -4, right: 8 }}>
{vRefLines}
{hRefLines}
{getvRefAreas(props.vRefLines)}
<Tooltip
formatter={valueFormatter}
labelFormatter={props.timestampFormatter}
/>
<XAxis
dataKey="timestamp"
tickFormatter={props.timestampFormatter}
/>
<YAxis
yAxisId={0}
tick={{ fill: YAxis0Color }}
scale={props.scale === 'Log' ? logScale : props.scale}
width={50}
tickFormatter={props.yAxisFormatter}
/>
{YAxis1Color &&
<YAxis
yAxisId={1}
tickFormatter={props.yAxisFormatter}
width={35}
tick={{ fill: YAxis1Color }}
orientation="right"
/>
}
<CartesianGrid stroke="#d5d5d5" strokeDasharray="5 5" />
{ordered.flatMap(spec => specToElements(spec))}
</LineChart>
</ResponsiveContainer>
);
}
Example #24
| Source File: RtcMetricsView.jsx From amazon-connect-snippets with MIT No Attribution | 3 votes |
|
render() {
const {
classes, className: classNameProp,
type, timeRange, indexRange: [startIndex, endIndex],
} = this.props;
const {
data, originalData,
brushHovering, refAreaLeft, refAreaRight,
} = this.state;
return (
<div className={clsx(classes.root, classNameProp)}>
<Container
title={`WebRTC Metrics - ${type}`}
gutters={false}
actionGroup={(
<Button
className={classes.zoomResetButton}
onClick={this.handleZoomReset}
>
Zoom Reset
</Button>
)}
>
<div className={classes.content}>
{/* Audio Level */}
<ResponsiveContainer width="100%" height={200}>
<LineChart
data={data}
margin={{
top: 5, right: 20, bottom: 5, left: 20,
}}
onMouseDown={this.handleMouseDown}
onMouseMove={this.handleMouseMove}
onMouseUp={this.handleZoom}
>
<YAxis allowDataOverflow type="number">
<Label angle={270} position="left" style={{ textAnchor: 'middle' }}>
Audio Level
</Label>
</YAxis>
<XAxis allowDataOverflow dataKey={TIMESTAMP_KEY} tick={this.renderCustomAxisTick} type="number" domain={timeRange} />
<CartesianGrid />
<Line
type="linear"
dataKey="audioLevel"
stroke={colorMap.audioLevel}
strokeWidth={2}
dot={false}
activeDot
connectNulls={false}
isAnimationActive={false}
/>
<Tooltip content={this.renderCustomTooltip(['audioLevel'])} />
<Legend verticalAlign="bottom" />
{ (refAreaLeft && refAreaRight) && (
<ReferenceArea
x1={refAreaLeft}
x2={refAreaRight}
strokeOpacity={0.3}
/>
)}
</LineChart>
</ResponsiveContainer>
{/* Packets */}
<ResponsiveContainer width="100%" height={200}>
<ComposedChart
data={data}
margin={{
top: 5, right: 20, bottom: 5, left: 20,
}}
onMouseDown={this.handleMouseDown}
onMouseMove={this.handleMouseMove}
onMouseUp={this.handleZoom}
>
<YAxis allowDataOverflow type="number">
<Label angle={270} position="left" style={{ textAnchor: 'middle' }}>
Packets
</Label>
</YAxis>
<XAxis allowDataOverflow dataKey={TIMESTAMP_KEY} tick={this.renderCustomAxisTick} type="number" domain={timeRange} />
<CartesianGrid />
<Line
type="linear"
dataKey="packetsLost"
stroke={colorMap.packetsLost}
strokeWidth={2}
dot={false}
activeDot
connectNulls={false}
isAnimationActive={false}
/>
<Line
type="linear"
dataKey="packetsCount"
stroke={colorMap.packetsCount}
strokeWidth={2}
dot={false}
activeDot
connectNulls={false}
isAnimationActive={false}
/>
<Tooltip content={this.renderCustomTooltip(['packetsLost', 'packetsCount'])} />
<Legend verticalAlign="bottom" />
{ (refAreaLeft && refAreaRight) && (
<ReferenceArea
x1={refAreaLeft}
x2={refAreaRight}
strokeOpacity={0.3}
/>
)}
</ComposedChart>
</ResponsiveContainer>
{/* Jitter Buffer and RTT */}
<ResponsiveContainer width="100%" height={200}>
<ComposedChart
data={data}
margin={{
top: 5, right: 20, bottom: 5, left: 20,
}}
onMouseDown={this.handleMouseDown}
onMouseMove={this.handleMouseMove}
onMouseUp={this.handleZoom}
>
<YAxis allowDataOverflow type="number">
{ type === 'audio_input' && (
<Label angle={270} position="left" style={{ textAnchor: 'middle' }}>
Jitter Buffer (ms)
</Label>
)}
{ type === 'audio_output' && (
<Label angle={270} position="left" style={{ textAnchor: 'middle' }}>
Jitter Buffer & RTT (ms)
</Label>
)}
</YAxis>
<XAxis allowDataOverflow dataKey={TIMESTAMP_KEY} tick={this.renderCustomAxisTick} type="number" domain={timeRange} />
<CartesianGrid />
<Line
type="linear"
dataKey="jitterBufferMillis"
stroke={colorMap.jitterBufferMillis}
strokeWidth={2}
dot={false}
activeDot
connectNulls={false}
isAnimationActive={false}
/>
{ type === 'audio_output' && (
<Line
type="linear"
dataKey="roundTripTimeMillis"
stroke={colorMap.roundTripTimeMillis}
strokeWidth={2}
dot={false}
activeDot
connectNulls={false}
isAnimationActive={false}
/>
)}
<Tooltip
content={
type === 'audio_output'
? this.renderCustomTooltip(['jitterBufferMillis', 'roundTripTimeMillis'])
: this.renderCustomTooltip(['jitterBufferMillis'])
}
/>
<Legend verticalAlign="bottom" />
{ (refAreaLeft && refAreaRight) && (
<ReferenceArea
x1={refAreaLeft}
x2={refAreaRight}
strokeOpacity={0.3}
/>
)}
</ComposedChart>
</ResponsiveContainer>
{/* Brush */}
<ResponsiveContainer width="100%" height={60}>
<ComposedChart
// update data to force re-rendering
data={brushHovering ? originalData : [...originalData]}
margin={{
top: 5, right: 20, bottom: 5, left: 20,
}}
onMouseEnter={() => this.setState({ brushHovering: true })}
onMouseLeave={() => this.setState({ brushHovering: false })}
>
<Brush
className="TimeLineChart-brush"
dataKey={TIMESTAMP_KEY}
stroke="#666666"
startIndex={startIndex || 0}
endIndex={endIndex || originalData.length - 1}
onChange={this.handleChangeBrush}
tickFormatter={this.formatBrushTick}
/>
</ComposedChart>
</ResponsiveContainer>
</div>
</Container>
</div>
);
}
