recharts#LabelList JavaScript Examples
The following examples show how to use
recharts#LabelList.
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: miniBarPlot.jsx From CovidIndiaStats with MIT License | 5 votes |
|
MiniBarPlot = ({ barDailyData, type, fill }) => {
const renderCustomizedLabel = (props) => {
const { x, y, width, value } = props;
const radius = 11;
return (
<g>
<circle cx={x + width / 2} cy={y - radius} r={radius} fill={fill} />
<text
x={x + width / 2}
y={y - radius}
fill="#fff"
textAnchor="middle"
dominantBaseline="middle"
>
{value}
</text>
</g>
);
};
return (
<ResponsiveContainer aspect={1} width="100%" height="100%">
<BarChart
data={barDailyData.slice(barDailyData.length - 7, barDailyData.length)}
margin={{
top: 53,
bottom: -15,
}}
>
<XAxis
dataKey="date"
tick={{
stroke: fill,
fill: fill,
strokeWidth: 0.2,
}}
interval={0}
axisLine={{ color: "rgba(255,255,255,0)", strokeWidth: 0 }}
style={{ fontSize: "0.5rem", fontFamily: "notosans" }}
tickSize={5}
tickLine={{ stroke: fill }}
/>
<YAxis hide={true} />
<Tooltip
contentStyle={{
background: "rgba(255,255,255,0)",
color: "rgba(62, 77, 163, 1)",
border: "none",
borderRadius: "5px",
fontSize: "10px",
fontFamily: "notosans",
textTransform: "uppercase",
textAlign: "left",
lineHeight: 0.8,
}}
active={true}
cursor={{ fill: "transparent" }}
position={{ x: -5, y: 0 }}
/>
<Bar
dataKey="stateid"
name={type}
fill={fill}
radius={[5, 5, 0, 0]}
barSize={20}
>
{type !== "active" && (
<LabelList dataKey="label" content={renderCustomizedLabel} />
)}
</Bar>
</BarChart>
</ResponsiveContainer>
);
}
Example #2
| Source File: DisksChart.js From admin-web with GNU Affero General Public License v3.0 | 5 votes |
|
function MemoryChart(props) {
const { classes, disks } = props;
const DiskTooltip = tooltipProps => {
if (tooltipProps && tooltipProps.payload && tooltipProps.payload.length > 0) {
const { percent, device, filesystem } = tooltipProps.payload[0].payload;
const newPayload = [
{ name: 'Percentage', value: percent },
{ name: 'Device', value: device },
{ name: 'Filesystem', value: filesystem },
];
return <DefaultTooltipContent
labelStyle={{ color: 'black', fontSize: 18, paddingBottom: 4 }}
payload={newPayload}
/>;
}
return <DefaultTooltipContent {...tooltipProps} />;
};
return (
<div className={classes.root}>
<Typography className={classes.chartTitle}>Disks</Typography>
<ResponsiveContainer width="100%" height={200}>
<BarChart
data={disks}
margin={{ top: 0, right: 32, left: 40, bottom: 4 }}
>
<defs>
<linearGradient id="gradientGreen" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={"#56ab2f"} stopOpacity={1}/>
<stop offset="95%" stopColor={"#a8e063"} stopOpacity={1}/>
</linearGradient>
</defs>
<XAxis type="category" dataKey="mountpoint" tick={{ fontSize: 12, wordBreak: 'break-all' }}/>
<YAxis type="number"/>
<Tooltip
isAnimationActive={false}
content={<DiskTooltip />}
/>
<Bar
dataKey="percent"
stackId="a"
isAnimationActive={false}
>
{disks.map((entry, index) =>
<Cell
key={`cell-${index}`}
fill={entry.percent > 90 ? red['500'] : entry.percent > 80 ? orange['500'] : "url(#gradientGreen)"}
/>
)}
<LabelList
dataKey="label"
position="insideBottom"
angle={-90}
offset={100}
style={{ fill: "black", fontWeight: 500 }}
/>
</Bar>
<Bar
dataKey="freePercent"
stackId="a"
fill={"rgba(0, 0, 0, 0)"}
isAnimationActive={false}
/>
</BarChart>
</ResponsiveContainer>
</div>
);
}
Example #3
| 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 #4
| 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 #5
| Source File: StateIndiaRecoveryProgress.js From covid-19 with MIT License | 4 votes |
|
StateIndiaRecoveryProgress = props => {
const data = props.data;
let topNData = data.filter((elem) => {
return elem.confirmed > 100 && elem.state != 'State Unassigned';
});
let refinedData = [];
topNData.forEach(element => {
let obj = {};
obj['State'] = element['state'];
obj['% Recovered'] = element['perctRecoverd'];
obj['% Deaths'] = element['perctDeaths'];
obj['active'] = element['active'];
obj['% Active'] = element['perctActive'];
obj['confirmed'] = element['confirmed'];
obj['recovered'] = element['recovered'];
obj['deaths'] = element['deaths'];
obj['State Code'] = INDIA_STATE_CODES[element['state']];
refinedData.push(obj);
});
const CustomTooltip = ({ active, payload, label }) => {
if (active) {
return (
<div className="custom-tooltip">
<p className="label">
<span>{payload[0].payload.State}({`Cases: ${payload[0].payload.confirmed}`})</span>
</p>
<p className="intro">
<span style={{color: '#FFC107'}}>
{`Acive Cases: ${payload[0].payload.active}(${payload[0].payload['% Active']}%)`}
</span> <br />
<span style={{color: '#28A745'}}>
{`Recovered Cases: ${payload[0].payload.recovered}(${payload[0].payload['% Recovered']}%)`}
</span> <br />
<span style={{color: '#DC3545'}}>
{`Death Cases: ${payload[0].payload.deaths}(${payload[0].payload['% Deaths']}%)`}
</span>
</p>
</div>
);
}
return null;
};
const renderCustomizedLabel = (props) => {
const { x, y, width, height, value } = props;
const radius = 18;
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 (
<Card>
<Card.Body>
<Card.Title>State: Recovery Progress(Min. 100 Cases)</Card.Title>
<Card.Subtitle className="mb-2 text-muted">
State with the Active, Recovery and Death percentages
</Card.Subtitle>
<ResponsiveContainer width='100%' height={330}>
<ComposedChart data={refinedData}
margin={{
top: 30, right: 0, left: 0, bottom: 5,
}}>
<XAxis dataKey="State Code" />
<YAxis/>
<Tooltip content={<CustomTooltip />} />
<Legend/>
<CartesianGrid strokeDasharray="3 3" />
<Bar dataKey="% Recovered" fill="rgba(40, 167, 69, 1.0)">
<LabelList dataKey="% Recovered" position="top" content={renderCustomizedLabel} />
</Bar>
<Area type='monotone' dataKey='% Active' fill='#FFC107' stroke='#FFC107'/>
<Line type='monotone' dataKey='% Deaths' stroke='#DC3545'/>
</ComposedChart>
</ResponsiveContainer>
</Card.Body>
</Card>
);
}
Example #6
| Source File: Stats.js From datapass with GNU Affero General Public License v3.0 | 4 votes |
|
Stats = () => {
const [stats, setStats] = useState(null);
const { targetApi } = useParams();
const dataProviderKeyList = useMemo(
() =>
Object.keys(DATA_PROVIDER_PARAMETERS).filter(
(dataProviderKey) =>
!HIDDEN_DATA_PROVIDER_KEYS.includes(dataProviderKey)
),
[]
);
async function getTargetAPIList(targetApi) {
let targetApiList;
switch (targetApi) {
case 'allApi':
const ApiTargetConfiguration = pickBy(
DATA_PROVIDER_PARAMETERS,
(dataProviderConfig) => dataProviderConfig.type === 'api'
);
targetApiList = Object.keys(ApiTargetConfiguration);
break;
case 'allServices':
const serviceTargetConfiguration = pickBy(
DATA_PROVIDER_PARAMETERS,
(dataProviderConfig) => dataProviderConfig.type === 'service'
);
targetApiList = Object.keys(serviceTargetConfiguration);
break;
case undefined:
targetApiList = [];
break;
default:
targetApiList = [targetApi];
}
return getAPIStats(targetApiList);
}
useEffect(() => {
async function fetchStats() {
const result = await getTargetAPIList(targetApi);
setStats({
...result.data,
enrollment_by_target_api: stackLowUseAndUnpublishedApi(
dataProviderKeyList,
result.data.enrollment_by_target_api,
10
),
});
}
fetchStats();
}, [targetApi, dataProviderKeyList]);
if (!stats) {
return (
<section className="full-page">
<Loader />
</section>
);
}
return (
<main>
<ListHeader title="Statistiques d’utilisation">
<TagContainer>
<NavLink end to="/stats">
{({ isActive }) => (
<Tag type={isActive ? 'info' : ''}>Toutes les habilitations</Tag>
)}
</NavLink>
<NavLink end to={`/stats/allApi`}>
{({ isActive }) => (
<Tag type={isActive ? 'info' : ''}>Toutes les API</Tag>
)}
</NavLink>
<NavLink end to={`/stats/allServices`}>
{({ isActive }) => (
<Tag type={isActive ? 'info' : ''}>Tous les services</Tag>
)}
</NavLink>
{dataProviderKeyList.map((targetApi) => (
<NavLink key={targetApi} end to={`/stats/${targetApi}`}>
{({ isActive }) => (
<Tag type={isActive ? 'info' : ''}>
{DATA_PROVIDER_PARAMETERS[targetApi]?.label}
</Tag>
)}
</NavLink>
))}
</TagContainer>
</ListHeader>
<div className="table-container">
<CardContainer>
<Card className="stat_card">
<div className="stat_card_head">
<h3>Habilitations déposées</h3>
</div>
<div className="stat_card_number">{stats.enrollment_count}</div>
</Card>
<Card className="stat_card">
<div className="stat_card_head">
<h3>Habilitations validées</h3>
<div className="card__meta">
<Link
inline
href={`/public${targetApi ? `/${targetApi}` : ''}`}
>
voir la liste détaillée
</Link>
</div>
</div>
<div className="stat_card_number">
<div>{stats.validated_enrollment_count}</div>
</div>
</Card>
</CardContainer>
<CardContainer>
<Card className="stat_card">
<div className="stat_card_head">
<h3>
Temps moyen de traitement des demandes d’habilitation
<Helper title="temps moyen entre la première soumission d’une demande d’habilitation jusqu’à la première réponse d'un instructeur sur les 6 derniers mois" />
</h3>
<div className="card__meta">(en jours)</div>
</div>
<div className="stat_card_number">
{stats.average_processing_time_in_days}
</div>
</Card>
<Card className="stat_card">
<div className="stat_card_head">
<h3>
Pourcentage des habilitations nécessitant un aller retour
<Helper title="sur les 6 derniers mois" />
</h3>
<div className="card__meta">(en % des habilitations totales)</div>
</div>
<div className="stat_card_number">{stats.go_back_ratio}</div>
</Card>
</CardContainer>
<CardContainer>
<Card className="stat_card">
<div className="stat_card_head">
<h3>Habilitations déposées</h3>
</div>
<div className="stat_card_graph">
<ResponsiveContainer width={'100%'} height={250}>
<BarChart data={stats.monthly_enrollment_count}>
<XAxis
dataKey="month"
tickFormatter={(value) => moment(value).format('MMM YY')}
/>
<YAxis />
<Tooltip
formatter={(value, name, props) => [
value,
USER_STATUS_LABELS[name],
props,
]}
labelFormatter={(value) => moment(value).format('MMM YYYY')}
/>
<Legend formatter={(value) => USER_STATUS_LABELS[value]} />
<CartesianGrid vertical={false} />
{Object.keys(EnrollmentStatus).map((status, index, array) => (
<Bar
key={status}
stackId="count"
dataKey={status}
fill={USER_STATUS_COLORS[status]}
>
{index === array.length - 1 && (
<LabelList dataKey="total" position="top" />
)}
</Bar>
))}
</BarChart>
</ResponsiveContainer>
</div>
</Card>
</CardContainer>
<CardContainer>
<Card className="stat_card">
<div className="stat_card_head">
<h3>Répartition des habilitations par statut</h3>
</div>
<div className="stat_card_graph">
<ResponsiveContainer width={'100%'} height={250}>
<PieChart>
<Pie data={stats.enrollment_by_status} dataKey="count" label>
{stats.enrollment_by_status.map((entry, index) => (
<Cell key={index} fill={USER_STATUS_COLORS[entry.name]} />
))}
</Pie>
<Legend
layout={'vertical'}
align={'right'}
verticalAlign={'middle'}
formatter={(value) => USER_STATUS_LABELS[value]}
/>
<Tooltip
formatter={(value, name, props) => [
value,
USER_STATUS_LABELS[name],
props,
]}
/>
</PieChart>
</ResponsiveContainer>
</div>
</Card>
</CardContainer>
<CardContainer>
<Card className="stat_card">
<div className="stat_card_head">
<h3>Répartition des habilitations par API</h3>
</div>
<div className="stat_card_graph">
<ResponsiveContainer width={'100%'} height={450}>
<PieChart>
<Pie
data={stats.enrollment_by_target_api}
dataKey="count"
label
>
{stats.enrollment_by_target_api.map((entry, index) => (
<Cell key={index} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip
formatter={(value, name, props) => [
value,
name === 'others'
? 'Autres'
: DATA_PROVIDER_PARAMETERS[name]?.label,
props,
]}
/>
<Legend
layout={'vertical'}
align={'right'}
verticalAlign={'middle'}
formatter={(value) =>
(value === 'others'
? 'Autres'
: DATA_PROVIDER_PARAMETERS[value]?.label
).substring(0, 32)
}
/>
</PieChart>
</ResponsiveContainer>
</div>
</Card>
</CardContainer>
</div>
</main>
);
}
