recharts#Cell JavaScript Examples
The following examples show how to use
recharts#Cell.
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: week.js From stacker.news with MIT License | 6 votes |
|
function GrowthPieChart ({ data }) {
return (
<ResponsiveContainer width='100%' height={250} minWidth={200}>
<PieChart margin={{ top: 5, right: 5, bottom: 5, left: 5 }}>
<Pie
dataKey='value'
isAnimationActive={false}
data={data}
cx='50%'
cy='50%'
outerRadius={80}
fill='var(--secondary)'
label
>
{
data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index]} />
))
}
</Pie>
<Tooltip />
</PieChart>
</ResponsiveContainer>
)
}
Example #2
| 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 #3
| 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 #4
| Source File: OrdersChart.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
OrdersChart = () => (
<ResponsiveContainer width="100%" height={350}>
<PieChart>
<Legend/>
<Pie dataKey="value"
data={data01} cx={200} cy={200} innerRadius={70} outerRadius={90} fill="#3367d6" label>
{
data01.map((entry, index) => <Cell key={index} fill={COLORS[index % COLORS.length]}/>)
}
</Pie>
</PieChart>
</ResponsiveContainer>
)
Example #5
| Source File: OftadehPieChart.jsx From oftadeh-react-admin with MIT License | 6 votes |
|
render() {
return (
<div style={{ width: "99%", height: 300 }}>
<ResponsiveContainer>
<PieChart>
<Pie
data={data}
// cx={200}
// cy={200}
labelLine={false}
label={renderCustomizedLabel}
outerRadius={80}
fill="#8884d8"
dataKey="value"
>
{data.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={COLORS[index % COLORS.length]}
/>
))}
</Pie>
</PieChart>
</ResponsiveContainer>
</div>
);
}
Example #6
| Source File: MainSurveyPie.js From front-app with MIT License | 6 votes |
|
MainSurveyPie = ({ datas, title }) => {
const sorted = datas.slice(0).sort(function (a, b) {
return a.count > b.count ? -1 : a.count < b.count ? 1 : 0
})
const getColor = (i) => {
return i > 4 ? COLORS[4] : COLORS[i]
}
return (
<div className="main-survey-pie">
<PieChart width={374} height={200}>
<text style={{ fontWeight: '700' }} x={105} y={105} textAnchor="middle" dominantBaseline="middle">
{title}
</text>
<Pie innerRadius={30} outerRadius={80} data={datas} cx={100} cy={100} labelLine={false} fill="#8884d8" dataKey="count" valueKey="name">
{datas.map((entry, index) => {
const color = getColor(sorted.indexOf(entry))
return <Cell name={entry.name} key={`cell-${index}`} fill={color} />
})}
</Pie>
<Tooltip />
<Legend />
</PieChart>
</div>
)
}
Example #7
| Source File: MainSurveyBar.js From front-app with MIT License | 6 votes |
|
MainSurveyBar = ({ datas, title, style }) => {
const sorted = datas.slice(0).sort(function (a, b) {
return a.count > b.count ? -1 : a.count < b.count ? 1 : 0
})
const getColor = (i) => {
return i > 4 ? COLORS[4] : COLORS[i]
}
return (
<div className="main-survey-bar" style={style}>
<div className="main-survey-bar-title">{title}</div>
<BarChart width={374} height={220} data={datas} barSize={15} margin={{ right: 5, left: -35 }} style={{ marginTop: 10, marginBottom: 30 }}>
<XAxis interval={0} dataKey="name" tick={<CustomizedAxisTick />} scale="point" padding={{ left: 10, right: 10 }} width={3} />
<YAxis valueKey="count" fontSize={10} />
<Tooltip />
<CartesianGrid strokeDasharray="3 3" />
<Bar dataKey="count" fill="#8884d8" background={{ fill: '#eee' }}>
{datas.map((entry, index) => {
const color = getColor(sorted.indexOf(entry))
return <Cell key={index} fill={color} />
})}
</Bar>
</BarChart>
</div>
)
}
Example #8
| Source File: AirlineFlightsInfo.js From dev-example-flights with MIT License | 6 votes |
|
render() {
const { airline_delays, delays_comparison } = this.state;
return (
<div className="charts-main">
<div className="form-sub-header">
{ !!(this.props.airline) ? this.props.airline.name : ''}
</div>
<div>
<div className="inline-div-50">
<p class="charts-title">Delay % By Type</p>
<PieChart className="form-content" width={400} height={300}>
<Pie isAnimationActive={false} data={airline_delays} cx={200} cy={125} outerRadius={80} fill="#8884d8" label>
{
airline_delays.map((entry, index) => (
<Cell key={`cell-${index}`} fill={this.colors[index]}/>
))
}
</Pie>
<Tooltip/>
<Legend align="center" />
</PieChart>
</div>
<div className="inline-div-50">
<p class="charts-title">Airline (avg minutes) delays vs. All (avg minutes) delays </p>
<BarChart className="Form-content" width={400} height={300} data={delays_comparison}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend align="center" />
<Bar dataKey="Target" fill="#96DDCF" />
<Bar dataKey="Average" fill="#0E6488" />
</BarChart>
</div>
</div>
</div>
);
}
Example #9
| Source File: Chart.js From dnd-builder with MIT License | 6 votes |
|
ChartPie = () => (
<ResponsiveContainer>
<PieChart
height={300}
width={400}
>
<Pie
data={data}
dataKey="value"
isAnimationActive={false}
>
{data.map((entry, index) => (
<Cell
key={`cell-${index.toString()}`}
fill={COLORS[index % COLORS.length]}
/>
))}
</Pie>
<Legend height={36} />
</PieChart>
</ResponsiveContainer>
)
Example #10
| Source File: RechartsPieChart.js From sofia-react-template with MIT License | 6 votes |
|
RechartsPieChart = () => {
return (
<div style={{ height: "316px" }}>
<ResponsiveContainer width="100%" height={200}>
<PieChart >
<Pie
data={chartsSettings.donut.data}
innerRadius={50}
outerRadius={80}
dataKey="value"
>
{chartsSettings.donut.data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.color} />
))}
</Pie>
</PieChart>
</ResponsiveContainer>
<div className={s.donutLabels}>
{chartsSettings.donut.data.map((entry, index) => (
<div key={uuidv4()} className={s.label}>
<Dot color={entry.color} />
<span className="body-3 ml-2">{entry.name}</span>
</div>
))}
</div>
</div>
)
}
Example #11
| 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 #12
| Source File: VulnerabilitiesByRiskStatsWidget.js From web-client with Apache License 2.0 | 5 votes |
|
VulnerabilitiesByRiskStatsWidget = ({ projectId = null }) => {
const RADIAN = Math.PI / 180;
const RISKS = {
'none': { label: 'None', color: '#f3f3f3' },
'low': { label: 'Low', color: 'var(--green)' },
'medium': { label: 'Medium', color: 'var(--yellow)' },
'high': { label: 'High', color: 'var(--purple)' },
'critical': { label: 'Critical', color: 'var(--primary-color)' }
};
const renderCustomLabel = ({
cx, cy, midAngle, innerRadius, outerRadius, percent, index,
}) => {
const radius = innerRadius + (outerRadius - innerRadius) * 1.2;
const x = cx + radius * Math.cos(-midAngle * RADIAN);
const y = cy + radius * Math.sin(-midAngle * RADIAN);
return (
<text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
{`${RISKS[vulnerabilitiesByRiskStats[index].risk].label} (${vulnerabilitiesByRiskStats[index].total})`}
</text>
);
};
const url = '/vulnerabilities/stats?groupBy=risk' + (null !== projectId ? '&projectId=' + encodeURIComponent(projectId) : '');
const [vulnerabilitiesByRiskStats] = useFetch(url)
return <DashboardWidget title="Vulnerabilities by risk">
{vulnerabilitiesByRiskStats && vulnerabilitiesByRiskStats.length > 0 ?
<PieChart width={400} height={320} >
<Pie
data={vulnerabilitiesByRiskStats}
dataKey="total"
cx={160}
cy={160}
labelLine={false}
outerRadius={100}
strokeOpacity='0'
strokeWidth='var(--borderWidth)'
color='var(--bg-color)'
fill="#8884d8"
label={renderCustomLabel}
>
{
vulnerabilitiesByRiskStats && vulnerabilitiesByRiskStats.map((entry, index) =>
<Cell key={index} fill={RISKS[entry.risk].color} />
)
}
</Pie>
</PieChart> :
<p>No enough data to generate the chart.</p>
}
</DashboardWidget>
}
Example #13
| Source File: index.js From bank-client with MIT License | 5 votes |
|
export default function Savings() {
const dispatch = useDispatch();
const { savings, savingsData, savingsColors, isLoading } = useSelector(
stateSelector,
);
const getSavings = () => dispatch(getAccountBalanceAction());
useEffect(() => {
if (!savings) getSavings();
}, []);
const pieChart = (
<PieChart margin={0} width={200} height={61}>
<Pie
data={savingsData}
dataKey="value"
innerRadius={75}
outerRadius={80}
paddingAngle={0}
>
{savingsData?.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={savingsColors[index % savingsColors.length]}
/>
))}
</Pie>
</PieChart>
);
return (
<FormattedMessage {...messages.savings}>
{(title) => (
<Widget
pie="true"
title={title}
unit="%"
content={savings}
isLoading={isLoading}
svg={pieChart}
/>
)}
</FormattedMessage>
);
}
Example #14
| Source File: SwapPieChart.js From admin-web with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
const { classes, swap, swapPercent } = this.props;
return (
<div>
<Typography className={classes.chartTitle}>
Swap: {swap.length > 0 && swap[1].value ? swapPercent + '%' : 'None'}
</Typography>
<ResponsiveContainer width="100%" height={180}>
<PieChart height={150}>
<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>
<linearGradient id="gradientBlue" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={"#2980B9"} stopOpacity={1}/>
<stop offset="95%" stopColor={"#6DD5FA"} stopOpacity={1}/>
</linearGradient>
<linearGradient id="gradientOrange" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={"#FFB75E"} stopOpacity={1}/>
<stop offset="95%" stopColor={"#ED8F03"} stopOpacity={1}/>
</linearGradient>
<linearGradient id="gradientGrey" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={"#8e9eab"} stopOpacity={1}/>
<stop offset="95%" stopColor={"#eef2f3"} stopOpacity={1}/>
</linearGradient>
</defs>
<Pie
data={swap}
dataKey="value"
nameKey="name"
startAngle={180}
endAngle={-180}
cx="50%"
cy="50%"
innerRadius={30}
outerRadius={50}
label={data => this.formatLabel(data.payload.value)}
minAngle={1}
stroke={"none"}
isAnimationActive={false}
>
{swap.map((entry, index) =>
<Cell
key={`cell-${index}`}
fill={`url(#${entry.color})`}
/>
)}
</Pie>
{swap.length > 0 && swap[1].value && <Tooltip
formatter={this.formatLabel}
isAnimationActive={true}
/>}
{swap.length > 0 && swap[1].value && <Legend />}
</PieChart>
</ResponsiveContainer>
</div>
);
}
Example #15
| Source File: MemoryPieChart.js From admin-web with GNU Affero General Public License v3.0 | 5 votes |
|
function MemoryPieChart(props) {
const { classes, memory } = props;
const formatLabel = (value, descimals) => {
if (value > 1000000000) return (value / 1000000000).toFixed(descimals) + 'GB';
if (value > 1000000) return (value / 1000000).toFixed(descimals) + 'MB';
if (value > 1000) return (value / 1000).toFixed(descimals) + 'KB';
return value + 'B';
};
const formatLastMemory = (unformatted) => {
return [
{ name: 'free', value: unformatted.free, color: "gradientBlue" },
{ name: 'used', value: unformatted.used, color: "gradientGreen" },
{ name: 'cache', value: unformatted.cache, color: "gradientOrange" },
{ name: 'buffer', value: unformatted.buffer, color: "gradientGrey" },
];
};
const lastMemory = memory.length > 0 ? formatLastMemory(memory[memory.length - 1]) : [];
return (
<div>
<Typography className={classes.chartTitle}>
{memory.length > 0 && `Memory: ${memory[memory.length - 1].percent}%`}
</Typography>
<ResponsiveContainer width="100%" height={180}>
<PieChart height={150}>
<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>
<linearGradient id="gradientBlue" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={"#2980B9"} stopOpacity={1}/>
<stop offset="95%" stopColor={"#6DD5FA"} stopOpacity={1}/>
</linearGradient>
<linearGradient id="gradientOrange" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={"#ED8F03"} stopOpacity={1}/>
<stop offset="95%" stopColor={"#FFB75E"} stopOpacity={1}/>
</linearGradient>
<linearGradient id="gradientGrey" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={"#8e9eab"} stopOpacity={1}/>
<stop offset="95%" stopColor={"#eef2f3"} stopOpacity={1}/>
</linearGradient>
</defs>
<Pie
data={lastMemory}
dataKey="value"
nameKey="name"
startAngle={180}
endAngle={540}
cx="50%"
cy="50%"
innerRadius={30}
outerRadius={50}
fill={green['500']}
stroke={"none"}
label={data => formatLabel(data.payload.value)}
isAnimationActive={false}
margin={{ top: 0, right: 32, left: 10, bottom: 16 }}
>
{lastMemory.map((entry, index) =>
<Cell
className={classes.test}
key={`cell-${index}`}
fill={`url(#${entry.color})`}
/>
)}
</Pie>
<Tooltip
formatter={formatLabel}
isAnimationActive={true}
/>
<Legend />
</PieChart>
</ResponsiveContainer>
</div>
);
}
Example #16
| Source File: PieChart.js From gitlab-lint-react with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
WalletPieChart = ({ data, outerRadius }) => {
const theme = useTheme();
const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({
cx,
cy,
midAngle,
innerRadius,
outerRadius,
index,
name,
}) => {
const radius = 25 + innerRadius + (outerRadius - innerRadius);
const x = cx + radius * Math.cos(-midAngle * RADIAN);
const y = cy + radius * Math.sin(-midAngle * RADIAN);
return (
<text
x={x}
y={y}
textAnchor={x > cx ? "start" : "end"}
dominantBaseline="central"
style={{ fill: theme.palette.secondary.main }}
>
{name}
</text>
);
};
return (
<ResponsiveContainer>
<PieChart>
<Pie
data={data}
cx="50%"
cy="50%"
outerRadius={outerRadius}
dataKey="value"
label={renderCustomizedLabel}
>
{data.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={chartColors[index % chartColors.length]}
/>
))}
</Pie>
<Tooltip content={<ChartTooltip />} />
</PieChart>
</ResponsiveContainer>
);
}
Example #17
| Source File: PieChart.jsx From cosmoscan-front with Apache License 2.0 | 5 votes |
|
PieChart = ({
isLoading,
data,
valFormatter,
labelFormatter,
height,
isAnimationActive,
minAngle,
displayLegend,
cellColors,
growOnMobile,
displayTooltip,
}) => (
<ChartWrapper defaultHeight={height} growOnMobile={growOnMobile}>
{/* eslint-disable-next-line no-nested-ternary */}
{isLoading ? (
<div className="d-flex justify-content-center align-items-center h-100">
<Spinner />
</div>
) : data && data.length ? (
<ResponsiveContainer>
<PieChartStyled>
{displayTooltip && <Tooltip formatter={valFormatter} />}
{displayLegend && (
<Legend
align="left"
iconType="circle"
verticalAlign="top"
wrapperStyle={{
fontWeight: 700,
textTransform: 'uppercase',
}}
/>
)}
<Pie
data={data}
dataKey="value"
nameKey="title"
minAngle={minAngle}
label={labelFormatter}
unit=" %"
isAnimationActive={isAnimationActive}
>
{data.map((entry, index) => (
<Cell
key={entry.title}
fill={cellColors[index % cellColors.length]}
/>
))}
</Pie>
</PieChartStyled>
</ResponsiveContainer>
) : (
<div className="d-flex justify-content-center align-items-center h-100">
No data
</div>
)}
</ChartWrapper>
)
Example #18
| Source File: index.js From tracker with MIT License | 5 votes |
|
//TWO LEVEL PIE Chart
export function TwoLevelPieChart(props)
{
const [COLORSONE, setCOLORSONE] = useState(props.colors01);
const [COLORSTWO, setCOLORSTWO] = useState(props.colors02);
const totalNumber = (data) =>
{
let count=0;
data.forEach((item, i) => {
count= count+item.value
});
return count;
}
const renderLegend = (legendName, data, colors) => {
return (
<div class="justify-center">
<div class="m-4 mb-0">
<div class="text-left">{legendName}</div>
<div class='flex'>
{data.map((legend, index) =>
index <= data.length &&
<div class="mr-4">
<div class="inline-block rounded-full h-3 w-3 items-center justify-center mr-2"
style={{backgroundColor : colors[index]}}></div>
<div class="inline-block">{legend.name}</div>
</div>)}
</div>
</div>
</div>
);}
return (
<div className='box-border shadow-lg bg-white w-full max-w-sm sm:max-w-sm md:max-w-md lg:max-w-sm xl:max-w-xl ml-auto mr-auto'>
<div className='bg-gray-100 p-4 text-lg font-serif text-blue-500 h-20'>
{props.heading}
</div>
<div className='justify-center'>
<div className='-mt-3'>
<PieChart width={400} height={350} style={{marginLeft:"auto", marginRight: "auto"}}>
<Pie data={props.data02} dataKey="value" cx={200} cy={200} innerRadius={70} outerRadius={90} fill="#82ca9d" label>
{props.data02.map((entry, index) =>
<Cell key={`cell-${index}`} fill={COLORSTWO[index % COLORSTWO.length]} />)}
</Pie>
<Tooltip />
<Legend content={renderLegend(props.legend02, props.data02, props.colors02)} verticalAlign="top" height={10}/>
</PieChart>
</div>
<div className='-mt-3'>
<PieChart width={400} height={350} style={{marginLeft:"auto", marginRight: "auto"}}>
<Pie data={props.data01} dataKey="value" cx={200} cy={200} innerRadius={70} outerRadius={90} fill="#82ca9d" label>
{props.data01.map((entry, index) =>
<Cell key={`cell-${index}`} fill={COLORSONE[index % COLORSONE.length]} />)}
</Pie>
<Tooltip />
<Legend content={renderLegend(props.legend01, props.data01, props.colors01)} verticalAlign="top" height={10}/>
</PieChart>
</div>
</div>
</div>
);}
Example #19
| Source File: TopNTodayDeath.js From covid-19 with MIT License | 5 votes |
|
TopNTodayDeath = props => {
const data = props.data;
const TOP_N = 5;
const DANGER_COLOR_SHADES = [
"rgba(255, 0, 0, 1.0)",
"rgba(255, 0, 0, 0.8)",
"rgba(255, 0, 0, 0.6)",
"rgba(255, 0, 0, 0.4)",
"rgba(255, 0, 0, 0.2)"
];
let refinedData = [];
let sortedData = data.sort((a, b) => b.todayDeaths - a.todayDeaths);
let cloned = JSON.parse(JSON.stringify(sortedData));
let topNData = cloned.splice(0, TOP_N);
topNData.forEach(element => {
let obj = {};
obj['country'] = element['country'];
obj['Today Deaths'] = element['todayDeaths'];
refinedData.push(obj);
});
return (
<div className="top-n-todays-death-widget">
<Card >
<Card.Body>
<Card.Title>Countries with maximum Deaths Today</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Number of Countries: <b>{TOP_N}</b></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" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="Today Deaths" fill="rgba(255, 0, 0, 1.0)" label={{ position: 'top' }}>
{
refinedData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={DANGER_COLOR_SHADES[index % 20]} />
))
}
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
</Card.Body>
</Card>
</div>
)
}
Example #20
| Source File: CPUPieChart.js From admin-web with GNU Affero General Public License v3.0 | 5 votes |
|
function CPUPieChart(props) {
const { classes, cpuPercent } = props;
const formatLastCPU = (unformatted) => {
return [
{ name: 'user', value: unformatted.user, color: "gradientGreen" },
{ name: 'system', value: unformatted.system, color: "gradientRed" },
{ name: 'io', value: unformatted.io, color: "gradientGrey" },
{ name: 'steal', value: unformatted.steal, color: "gradientBlue" },
{ name: 'interrupt', value: unformatted.interrupt, color: "gradientOrange" },
{ name: 'idle', value: unformatted.idle, color: "gradientBlue" },
].filter(obj => obj.value !== 0);
};
const lastCpu = cpuPercent.length > 0 ? formatLastCPU(cpuPercent[cpuPercent.length -1]) : [];
return (
<div>
<Typography className={classes.chartTitle}>
{cpuPercent.length > 0 && `CPU: ${(100 - cpuPercent[cpuPercent.length - 1].idle).toFixed(1)}%`}
</Typography>
<ResponsiveContainer width="100%" height={180}>
<PieChart height={150}>
<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>
<linearGradient id="gradientBlue" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={"#2980B9"} stopOpacity={1}/>
<stop offset="95%" stopColor={"#6DD5FA"} stopOpacity={1}/>
</linearGradient>
<linearGradient id="gradientOrange" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={"#FFB75E"} stopOpacity={1}/>
<stop offset="95%" stopColor={"#ED8F03"} stopOpacity={1}/>
</linearGradient>
<linearGradient id="gradientGrey" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={"#8e9eab"} stopOpacity={1}/>
<stop offset="95%" stopColor={"#eef2f3"} stopOpacity={1}/>
</linearGradient>
<linearGradient id="gradientRed" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={"#FF512F"} stopOpacity={1}/>
<stop offset="95%" stopColor={"#DD2476"} stopOpacity={1}/>
</linearGradient>
</defs>
<Pie
data={lastCpu}
dataKey="value"
nameKey="name"
startAngle={180}
endAngle={-180}
cx="50%"
cy="50%"
innerRadius={30}
outerRadius={50}
label
minAngle={1}
stroke={"none"}
isAnimationActive={false}
>
{lastCpu.map((entry, index) =>
<Cell
key={`cell-${index}`}
fill={`url(#${entry.color}`}
/>
)}
</Pie>
<Tooltip
isAnimationActive={true}
/>
<Legend />
</PieChart>
</ResponsiveContainer>
</div>
);
}
Example #21
| Source File: OverAllWidget.js From covid-19 with MIT License | 5 votes |
|
WorldData = props => {
const loading = props.loading;
const data = props.data;
let refinedData = [];
if (!loading) {
let keys = Object.keys(data);
keys.forEach((elem) => {
if (elem === 'deaths' || elem === 'recovered' || elem === 'active') {
let obj = {};
obj['name'] = elem;
obj['value'] = data[elem];
refinedData.push(obj);
}
});
}
const COLORS = ['#DC3545', '#28A745', '#FFC107'];
return (
<div className="worldData">
<Card >
<Card.Body>
<Card.Title>
Total Cases: <CurrencyFormat value={data.cases} displayType={'text'} thousandSeparator={true} /> as on <Moment format="YYYY/MM/DD">{data.updated}</Moment>
</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Recovery, Deaths and Still Infected</Card.Subtitle>
<div>
{loading ?
<Loader
type="ThreeDots"
color="#00BFFF"
height={100}
width={100}
/>
:
<div>
<ResponsiveContainer width='100%' height={308}>
<PieChart>
<Pie
dataKey="value"
isAnimationActive={true}
data={refinedData}
cx={180}
cy={150}
outerRadius={100}
fill="#8884d8"
label>
{
refinedData.map((entry, index) => <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />)
}
</Pie>
<Tooltip />
</PieChart>
</ResponsiveContainer>
<div className="legends">
<Badge variant="success" className="recovered">
{`Recovered - ${Math.round((data.recovered * 100) / data.cases)}%`}
</Badge>
<Badge variant="warning" className="medication">
{`Active - ${Math.round(((data.active) * 100) / data.cases)}%`}
</Badge>
<Badge variant="danger" className="deaths">
{`Deaths - ${Math.round((data.deaths * 100) / data.cases)}%`}
</Badge>
</div>
</div>
}
</div>
</Card.Body>
</Card>
</div>
)
}
Example #22
| 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 #23
| Source File: TopNRecoveredWidget.js From covid-19 with MIT License | 4 votes |
|
TopNRecoveredWidget = props => {
const data = props.data;
const TOP_N = 5;
const MIN_CASES = 10000;
const SUCCESS_COLOR_SHADES = [
"rgba(40, 167, 69, 1.0)",
"rgba(40, 167, 69, 0.9)",
"rgba(40, 167, 69, 0.8)",
"rgba(40, 167, 69, 0.7)",
"rgba(40, 167, 69, 0.6)",
"rgba(40, 167, 69, 0.5)",
"rgba(40, 167, 69, 0.4)",
"rgba(40, 167, 69, 0.5)",
"rgba(40, 167, 69, 0.2)",
"rgba(40, 167, 69, 0.1)"
];
let refinedData = [];
let coutriesWithMinCases = data.filter(elem => {
return elem.cases >= MIN_CASES && elem.country !== 'Diamond Princess';
});
let mappedData = coutriesWithMinCases.map(elem => {
elem['recovPerc'] = Math.round((elem['recovered'] * 100) / elem['cases']);
return elem;
});
let sortedData = mappedData.sort((a, b) => b.recovPerc - a.recovPerc);
let cloned = JSON.parse(JSON.stringify(sortedData));
let topNData = cloned.splice(0, TOP_N);
topNData.forEach(element => {
let obj = {};
obj['country'] = element['country'];
obj['%recovered'] = element['recovPerc'];
obj['cases'] = element['cases'];
obj['recovered'] = element['recovered'];
refinedData.push(obj);
});
const CustomTooltip = ({ active, payload, label }) => {
if (active) {
return (
<div className="custom-tooltip">
<p className="label">{`${label} : ${payload[0].value}`}% Recovered</p>
<p className="intro">
{`Recovered Cases: ${payload[0].payload.recovered}`}<br />
{`Total Cases: ${payload[0].payload.cases}`}
</p>
</div>
);
}
return null;
};
return (
<div className="top-n-recovered-widget">
<Card >
<Card.Body>
<Card.Title>Countries Recovering Well(min. {MIN_CASES} Cases)</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Number of Countries: <b>{TOP_N}</b></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" />
<YAxis />
<Tooltip content={<CustomTooltip />}/>
<Legend />
<Bar dataKey="%recovered" fill="rgba(40, 167, 69, 1.0)" label={{ position: 'top' }}>
{
refinedData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={SUCCESS_COLOR_SHADES[index % 20]} />
))
}
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
</Card.Body>
</Card>
</div>
)
}
Example #24
| 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 #25
| Source File: statusCategoryChart.js From DengueStop with Apache License 2.0 | 4 votes |
|
StatusCategoryChart = (props) => {
const currentUser = getSession();
const incidentService = new IncidentService();
const [statusIncidentCount, setStatusIncidentCount] = useState([]);
const [statusIncidentCountFilter, setStatusIncidentCountFilter] = useState(
"all"
);
const COLORS = ["#E67F0D", "#40BCD8", "#1C77C3", "#157145", "#BD1E1E"];
const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({
cx,
cy,
midAngle,
innerRadius,
outerRadius,
percent,
}) => {
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
const x = cx + radius * Math.cos(-midAngle * RADIAN);
const y = cy + radius * Math.sin(-midAngle * RADIAN);
if (percent !== 0) {
return (
<text
x={x}
y={y}
fill="white"
textAnchor={x > cx ? "start" : "end"}
dominantBaseline="central"
>
{`${(percent * 100).toFixed(0)}%`}
</text>
);
}
};
const getFilterText = (filter) => {
if (filter === "all") return "Showing results of all time";
else if (filter === "weekly") return "Showing results from last 7 days";
else if (filter === "monthly")
return "Showing results from last 30 days";
else if (filter === "yearly")
return "Showing results from last 365 days";
else return "";
};
useEffect(() => {
const orgId = currentUser.org_id;
incidentService
.getIncidentStatusCount(orgId, statusIncidentCountFilter)
.then((res) => {
setStatusIncidentCount(res);
});
}, [statusIncidentCountFilter]);
return (
<MDBCard className="age-category-chart-container w-100">
<MDBCardBody>
<MDBRow>
<MDBCol size="10">
<p className="text-center m-0 font-weight-bold float">
Incident Status Breakdown
</p>
</MDBCol>
<MDBCol size="2">
<MDBDropdown className="float-right" dropright>
<MDBDropdownToggle
className="black-text text-uppercase p-0"
nav
caret
>
<MDBIcon icon="filter" className="black-text" />
</MDBDropdownToggle>
<MDBDropdownMenu className="dropdown-default">
<MDBDropdownItem
onClick={() => {
setStatusIncidentCountFilter("all");
}}
>
All
</MDBDropdownItem>
<MDBDropdownItem
onClick={() => {
setStatusIncidentCountFilter("weekly");
}}
>
Last 7 days
</MDBDropdownItem>
<MDBDropdownItem
onClick={() => {
setStatusIncidentCountFilter("monthly");
}}
>
Last 30 days
</MDBDropdownItem>
<MDBDropdownItem
onClick={() => {
setStatusIncidentCountFilter("yearly");
}}
>
Last Year
</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBCol>
</MDBRow>
<hr></hr>
<ResponsiveContainer width="100%" height={400}>
<PieChart>
<Pie
data={statusIncidentCount}
dataKey="count"
nameKey="name"
label={renderCustomizedLabel}
innerRadius={80}
cx="50%"
cy="50%"
fill="#8884d8"
>
{statusIncidentCount.map((entry, index) => (
<Cell
key={index}
fill={COLORS[index % COLORS.length]}
/>
))}
</Pie>
<Tooltip />
<Legend iconType="circle" />
</PieChart>
</ResponsiveContainer>
</MDBCardBody>
<MDBCardFooter className="thin-footer text-center font-weight-bold">
{getFilterText(statusIncidentCountFilter)}
</MDBCardFooter>
</MDBCard>
);
}
Example #26
| Source File: ageCategoryChart.js From DengueStop with Apache License 2.0 | 4 votes |
|
AgeCategoryChart = () => {
const currentUser = getSession();
const incidentService = new IncidentService();
const [ageGroupIncidentCount, setAgeGroupIncidentCount] = useState([]);
const [
ageGroupIncidentCountFilter,
setAgeGroupIncidentCountFilter,
] = useState("all");
const COLORS = ["#003f5c", "#58508d", "#bc5090", "#ff6361", "#ffa600"];
const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({
cx,
cy,
midAngle,
innerRadius,
outerRadius,
percent,
index,
}) => {
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
const x = cx + radius * Math.cos(-midAngle * RADIAN);
const y = cy + radius * Math.sin(-midAngle * RADIAN);
if (percent !== 0) {
return (
<text
x={x}
y={y}
fill="white"
textAnchor={x > cx ? "start" : "end"}
dominantBaseline="central"
>
{`${(percent * 100).toFixed(0)}%`}
</text>
);
}
};
const getFilterText = (filter) => {
if (filter === "all") return "Showing results of all time";
else if (filter === "weekly") return "Showing results from last 7 days";
else if (filter === "monthly")
return "Showing results from last 30 days";
else if (filter === "yearly")
return "Showing results from last 365 days";
else return "";
};
useEffect(() => {
const orgId = currentUser.org_id;
incidentService
.getIncidentAgeGroupCount(orgId, ageGroupIncidentCountFilter)
.then((res) => {
setAgeGroupIncidentCount(res);
});
}, [ageGroupIncidentCountFilter]);
return (
<MDBCard className="age-category-chart-container w-100">
<MDBCardBody>
<MDBRow>
<MDBCol size="10">
<p className="text-center m-0 font-weight-bold float">
Incidents Reported by Age Group
</p>
</MDBCol>
<MDBCol size="2">
<MDBDropdown className="float-right" dropright>
<MDBDropdownToggle
className="black-text text-uppercase p-0"
nav
caret
>
<MDBIcon icon="filter" className="black-text" />
</MDBDropdownToggle>
<MDBDropdownMenu className="dropdown-default">
<MDBDropdownItem
onClick={() => {
setAgeGroupIncidentCountFilter("all");
}}
>
All
</MDBDropdownItem>
<MDBDropdownItem
onClick={() => {
setAgeGroupIncidentCountFilter(
"weekly"
);
}}
>
Last 7 days
</MDBDropdownItem>
<MDBDropdownItem
onClick={() => {
setAgeGroupIncidentCountFilter(
"monthly"
);
}}
>
Last 30 days
</MDBDropdownItem>
<MDBDropdownItem
onClick={() => {
setAgeGroupIncidentCountFilter(
"yearly"
);
}}
>
Last Year
</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBCol>
</MDBRow>
<hr></hr>
<ResponsiveContainer width="100%" height={400}>
<PieChart>
<Pie
data={ageGroupIncidentCount}
dataKey="count"
nameKey="range"
label={renderCustomizedLabel}
cx="50%"
cy="50%"
fill="#8884d8"
>
{ageGroupIncidentCount.map((entry, index) => (
<Cell
key={index}
fill={COLORS[index % COLORS.length]}
/>
))}
</Pie>
<Tooltip />
<Legend iconType="circle" />
</PieChart>
</ResponsiveContainer>
</MDBCardBody>
<MDBCardFooter className="thin-footer text-center font-weight-bold">
{getFilterText(ageGroupIncidentCountFilter)}
</MDBCardFooter>
</MDBCard>
);
}
Example #27
| Source File: Dashboard.js From react-code-splitting-2021-04-26 with MIT License | 4 votes |
|
export default function Dashboard(props) {
var classes = useStyles();
var theme = useTheme();
// local
var [mainChartState, setMainChartState] = useState("monthly");
return (
<>
<PageTitle title="Dashboard" button={<Button
variant="contained"
size="medium"
color="secondary"
>
Latest Reports
</Button>} />
<Grid container spacing={4}>
<Grid item lg={3} md={4} sm={6} xs={12}>
<Widget
title="Visits Today"
upperTitle
bodyClass={classes.fullHeightBody}
className={classes.card}
>
<div className={classes.visitsNumberContainer}>
<Grid container item alignItems={"center"}>
<Grid item xs={6}>
<Typography size="xl" weight="medium" noWrap>
12, 678
</Typography>
</Grid>
<Grid item xs={6}>
<LineChart
width={100}
height={30}
data={[
{ value: 10 },
{ value: 15 },
{ value: 10 },
{ value: 17 },
{ value: 18 },
]}
>
<Line
type="natural"
dataKey="value"
stroke={theme.palette.success.main}
strokeWidth={2}
dot={false}
/>
</LineChart>
</Grid>
</Grid>
</div>
<Grid
container
direction="row"
justify="space-between"
alignItems="center"
>
<Grid item xs={4}>
<Typography color="text" colorBrightness="secondary" noWrap>
Registrations
</Typography>
<Typography size="md">860</Typography>
</Grid>
<Grid item xs={4}>
<Typography color="text" colorBrightness="secondary" noWrap>
Sign Out
</Typography>
<Typography size="md">32</Typography>
</Grid>
<Grid item xs={4}>
<Typography color="text" colorBrightness="secondary" noWrap>
Rate
</Typography>
<Typography size="md">3.25%</Typography>
</Grid>
</Grid>
</Widget>
</Grid>
<Grid item lg={3} md={8} sm={6} xs={12}>
<Widget
title="App Performance"
upperTitle
className={classes.card}
bodyClass={classes.fullHeightBody}
>
<div className={classes.performanceLegendWrapper}>
<div className={classes.legendElement}>
<Dot color="warning" />
<Typography
color="text"
colorBrightness="secondary"
className={classes.legendElementText}
>
Integration
</Typography>
</div>
<div className={classes.legendElement}>
<Dot color="primary" />
<Typography
color="text"
colorBrightness="secondary"
className={classes.legendElementText}
>
SDK
</Typography>
</div>
</div>
<div className={classes.progressSection}>
<Typography
size="md"
color="text"
colorBrightness="secondary"
className={classes.progressSectionTitle}
>
Integration
</Typography>
<LinearProgress
variant="determinate"
value={77}
classes={{ barColorPrimary: classes.progressBarPrimary }}
className={classes.progress}
/>
</div>
<div>
<Typography
size="md"
color="text"
colorBrightness="secondary"
className={classes.progressSectionTitle}
>
SDK
</Typography>
<LinearProgress
variant="determinate"
value={73}
classes={{ barColorPrimary: classes.progressBarWarning }}
className={classes.progress}
/>
</div>
</Widget>
</Grid>
<Grid item lg={3} md={8} sm={6} xs={12}>
<Widget
title="Server Overview"
upperTitle
className={classes.card}
bodyClass={classes.fullHeightBody}
>
<div className={classes.serverOverviewElement}>
<Typography
color="text"
colorBrightness="secondary"
className={classes.serverOverviewElementText}
noWrap
>
60% / 37°С / 3.3 Ghz
</Typography>
<div className={classes.serverOverviewElementChartWrapper}>
<ResponsiveContainer height={50} width="99%">
<AreaChart data={getRandomData(10)}>
<Area
type="natural"
dataKey="value"
stroke={theme.palette.secondary.main}
fill={theme.palette.secondary.light}
strokeWidth={2}
fillOpacity="0.25"
/>
</AreaChart>
</ResponsiveContainer>
</div>
</div>
<div className={classes.serverOverviewElement}>
<Typography
color="text"
colorBrightness="secondary"
className={classes.serverOverviewElementText}
noWrap
>
54% / 31°С / 3.3 Ghz
</Typography>
<div className={classes.serverOverviewElementChartWrapper}>
<ResponsiveContainer height={50} width="99%">
<AreaChart data={getRandomData(10)}>
<Area
type="natural"
dataKey="value"
stroke={theme.palette.primary.main}
fill={theme.palette.primary.light}
strokeWidth={2}
fillOpacity="0.25"
/>
</AreaChart>
</ResponsiveContainer>
</div>
</div>
<div className={classes.serverOverviewElement}>
<Typography
color="text"
colorBrightness="secondary"
className={classes.serverOverviewElementText}
noWrap
>
57% / 21°С / 3.3 Ghz
</Typography>
<div className={classes.serverOverviewElementChartWrapper}>
<ResponsiveContainer height={50} width="99%">
<AreaChart data={getRandomData(10)}>
<Area
type="natural"
dataKey="value"
stroke={theme.palette.warning.main}
fill={theme.palette.warning.light}
strokeWidth={2}
fillOpacity="0.25"
/>
</AreaChart>
</ResponsiveContainer>
</div>
</div>
</Widget>
</Grid>
<Grid item lg={3} md={4} sm={6} xs={12}>
<Widget title="Revenue Breakdown" upperTitle className={classes.card}>
<Grid container spacing={2}>
<Grid item xs={6}>
<ResponsiveContainer width="100%" height={144}>
<PieChart>
<Pie
data={PieChartData}
innerRadius={30}
outerRadius={40}
dataKey="value"
>
{PieChartData.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={theme.palette[entry.color].main}
/>
))}
</Pie>
</PieChart>
</ResponsiveContainer>
</Grid>
<Grid item xs={6}>
<div className={classes.pieChartLegendWrapper}>
{PieChartData.map(({ name, value, color }, index) => (
<div key={color} className={classes.legendItemContainer}>
<Dot color={color} />
<Typography style={{ whiteSpace: "nowrap", fontSize: 12 }} >
{name}
</Typography>
<Typography color="text" colorBrightness="secondary">
{value}
</Typography>
</div>
))}
</div>
</Grid>
</Grid>
</Widget>
</Grid>
<Grid item xs={12}>
<Widget
bodyClass={classes.mainChartBody}
header={
<div className={classes.mainChartHeader}>
<Typography
variant="h5"
color="text"
colorBrightness="secondary"
>
Daily Line Chart
</Typography>
<div className={classes.mainChartHeaderLabels}>
<div className={classes.mainChartHeaderLabel}>
<Dot color="warning" />
<Typography className={classes.mainChartLegentElement}>
Tablet
</Typography>
</div>
<div className={classes.mainChartHeaderLabel}>
<Dot color="primary" />
<Typography className={classes.mainChartLegentElement}>
Mobile
</Typography>
</div>
<div className={classes.mainChartHeaderLabel}>
<Dot color="secondary" />
<Typography className={classes.mainChartLegentElement}>
Desktop
</Typography>
</div>
</div>
<Select
value={mainChartState}
onChange={e => setMainChartState(e.target.value)}
input={
<OutlinedInput
labelWidth={0}
classes={{
notchedOutline: classes.mainChartSelectRoot,
input: classes.mainChartSelect,
}}
/>
}
autoWidth
>
<MenuItem value="daily">Daily</MenuItem>
<MenuItem value="weekly">Weekly</MenuItem>
<MenuItem value="monthly">Monthly</MenuItem>
</Select>
</div>
}
>
<ResponsiveContainer width="100%" minWidth={500} height={350}>
<ComposedChart
margin={{ top: 0, right: -15, left: -15, bottom: 0 }}
data={mainChartData}
>
<YAxis
ticks={[0, 2500, 5000, 7500]}
tick={{ fill: theme.palette.text.hint + "80", fontSize: 14 }}
stroke={theme.palette.text.hint + "80"}
tickLine={false}
/>
<XAxis
tickFormatter={i => i + 1}
tick={{ fill: theme.palette.text.hint + "80", fontSize: 14 }}
stroke={theme.palette.text.hint + "80"}
tickLine={false}
/>
<Area
type="natural"
dataKey="desktop"
fill={theme.palette.background.light}
strokeWidth={0}
activeDot={false}
/>
<Line
type="natural"
dataKey="mobile"
stroke={theme.palette.primary.main}
strokeWidth={2}
dot={false}
activeDot={false}
/>
<Line
type="linear"
dataKey="tablet"
stroke={theme.palette.warning.main}
strokeWidth={2}
dot={{
stroke: theme.palette.warning.dark,
strokeWidth: 2,
fill: theme.palette.warning.main,
}}
/>
</ComposedChart>
</ResponsiveContainer>
</Widget>
</Grid>
{mock.bigStat.map(stat => (
<Grid item md={4} sm={6} xs={12} key={stat.product}>
<BigStat {...stat} />
</Grid>
))}
<Grid item xs={12}>
<Widget
title="Support Requests"
upperTitle
noBodyPadding
bodyClass={classes.tableWidget}
>
<Table data={mock.table} />
</Widget>
</Grid>
</Grid>
</>
);
}
Example #28
| 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 #29
| Source File: TopNDeathWidget.js From covid-19 with MIT License | 4 votes |
|
TopNDeathWidget = props => {
const data = props.data;
const TOP_N = 5;
const DANGER_COLOR_SHADES = [
"rgba(255, 0, 0, 1.0)",
"rgba(255, 0, 0, 0.9)",
"rgba(255, 0, 0, 0.8)",
"rgba(255, 0, 0, 0.7)",
"rgba(255, 0, 0, 0.6)",
"rgba(255, 0, 0, 0.5)",
"rgba(255, 0, 0, 0.4)",
"rgba(255, 0, 0, 0.5)",
"rgba(255, 0, 0, 0.2)",
"rgba(255, 0, 0, 0.1)"
];
let refinedData = [];
let sortedData = data.sort((a, b) => b.deaths - a.deaths);
let cloned = JSON.parse(JSON.stringify(sortedData));
let topNData = cloned.splice(0, TOP_N);
topNData.forEach(element => {
let obj = {};
obj['country'] = element['country'];
obj['deaths'] = element['deaths'];
refinedData.push(obj);
});
const getPath = (x, y, width, height) => {
return `M${x},${y + height}
C${x + width / 3},${y + height} ${x + width / 2},${y + height / 3} ${x + width / 2}, ${y}
C${x + width / 2},${y + height / 3} ${x + 2 * width / 3},${y + height} ${x + width}, ${y + height}
Z`;
};
const TriangleBar = (props) => {
const { fill, x, y, width, height } = props;
return <path d={getPath(x, y, width, height)} stroke="none" fill={fill} />;
};
TriangleBar.propTypes = {
fill: PropTypes.string,
x: PropTypes.number,
y: PropTypes.number,
width: PropTypes.number,
height: PropTypes.number,
};
return (
<div className="top-n-death-widget">
<Card >
<Card.Body>
<Card.Title>Countries with Overall Death Impact</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Number of Countries: <b>{TOP_N}</b></Card.Subtitle>
<div>
<ResponsiveContainer width='100%' height={330}>
<BarChart data={refinedData}
margin={{ top: 30, right: 0, left: 0, bottom: 5 }}
>
<XAxis dataKey="country" />
<YAxis />
<Tooltip />
<Legend />
<CartesianGrid strokeDasharray="3 3" />
<Bar dataKey="deaths" fill="rgba(255, 0, 0, 1.0)" shape={<TriangleBar />} label={{ position: 'top' }}>
{
refinedData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={DANGER_COLOR_SHADES[index % 20]} />
))
}
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
</Card.Body>
</Card>
</div>
)
}
