recharts#Area JavaScript Examples
The following examples show how to use
recharts#Area.
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: OftadehChart.jsx From oftadeh-react-admin with MIT License | 6 votes |
|
render() {
return (
<div style={{ width: "99%", height: 300 }}>
<ResponsiveContainer>
<AreaChart
data={data}
margin={{
top: 10,
right: 30,
left: 0,
bottom: 0,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Area
type="monotone"
dataKey="visits"
stroke="#8884d8"
fill="#8884d8"
/>
</AreaChart>
</ResponsiveContainer>
</div>
);
}
Example #2
| Source File: SimpleComposedChart.js From paper-and-ink with MIT License | 6 votes |
|
function SimpleComposedChart() {
const theme = useTheme();
return (
<ResponsiveContainer width="100%" minWidth={500} height={350}>
<ComposedChart margin={{ top: 0, right: -15, left: -15, bottom: 0 }} data={sales}>
<YAxis ticks={[0, 2500, 5000, 9800]} tick={{ fontSize: 12 }} tickLine={false} />
<XAxis dataKey="month" tick={{ fontSize: 12 }} tickLine={false} />
<Area
type="natural"
dataKey="area"
fill={theme.palette.primary.light}
strokeWidth={0}
activeDot={false}
/>
<Line type="monotone" dataKey="sales" stroke={theme.palette.primary.dark} strokeWidth={2} />
<Line
type="monotone"
dataKey="orders"
stroke={theme.palette.success.light}
strokeWidth={2}
dot={{
stroke: theme.palette.success.dark,
strokeWidth: 2,
fill: theme.palette.success.main
}}
/>
</ComposedChart>
</ResponsiveContainer>
);
}
Example #3
| Source File: forever.js From stacker.news with MIT License | 6 votes |
|
function GrowthAreaChart ({ data, xName, title }) {
return (
<ResponsiveContainer width='100%' height={300} minWidth={300}>
<AreaChart
data={data}
margin={{
top: 5,
right: 5,
left: 0,
bottom: 0
}}
>
<XAxis
dataKey='time' tickFormatter={dateFormatter} name={xName}
tick={{ fill: 'var(--theme-grey)' }}
/>
<YAxis tickFormatter={formatSats} tick={{ fill: 'var(--theme-grey)' }} />
<Tooltip labelFormatter={dateFormatter} contentStyle={{ color: 'var(--theme-color)', backgroundColor: 'var(--theme-body)' }} />
<Legend />
{Object.keys(data[0]).filter(v => v !== 'time' && v !== '__typename').map((v, i) =>
<Area key={v} type='monotone' dataKey={v} name={v} stackId='1' stroke={COLORS[i]} fill={COLORS[i]} />)}
</AreaChart>
</ResponsiveContainer>
)
}
Example #4
| Source File: LineCharts.js From gedge-platform with Apache License 2.0 | 6 votes |
|
LineCharts = ((props) => {
const { kind, cluster_data = []} = props;
let data = [];
cluster_data.map((value) => {
data.push({
time: Unix_timestamp(value[0]),
[kind]: value[1] * 1,
});
})
// console.log(data,kind)
return (
<ResponsiveContainer width="100%" height="100%">
<AreaChart
width={1500}
height={200}
data={data}
margin={{
top: 0,
right: 10,
left: -20,
bottom: 0,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="time" />
<YAxis />
<Tooltip />
<Area type="monotone" dataKey={kind} stroke="#4472C4" fill="#E9F4F1" />
{/* <Line type="monotone" dataKey={kind} stroke="#5A61FF" /> */}
</AreaChart>
</ResponsiveContainer>
);
})
Example #5
| Source File: ComposedCharts.js From gedge-platform with Apache License 2.0 | 6 votes |
|
ComposedCharts = observer(() => {
return (
<div>
<ComposedChart width={730} height={250} data={data}>
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<CartesianGrid stroke="#f5f5f5" />
<Area type="monotone" dataKey="amt" fill="#8884d8" stroke="#8884d8" />
<Bar dataKey="pv" barSize={20} fill="#413ea0" />
<Line type="monotone" dataKey="uv" stroke="#ff7300" />
</ComposedChart>
</div>
);
})
Example #6
| Source File: Sparkline.jsx From cosmoscan-front with Apache License 2.0 | 6 votes |
|
Sparkline = ({ data, color }) => (
<div style={{ width: '100%', minWidth: '120px', height: '40px' }}>
<ResponsiveContainer>
<AreaChart
data={data}
margin={{
top: 0, left: 0, right: 0, bottom: 0,
}}
>
<YAxis
hide
dataKey="y"
domain={['dataMin', 'dataMax']}
/>
<Area
type="monotone"
dataKey="y"
stroke={color}
fill={color}
fillOpacity={0.3}
strokeWidth={1}
connectNulls
/>
</AreaChart>
</ResponsiveContainer>
</div>
)
Example #7
| Source File: MonthlyRevenue.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
MonthlyRevenue = ({chartData}) => (
<ResponsiveContainer width="100%" height={192}>
<AreaChart data={chartData} margin={{top: 0, right: 0, left: 0, bottom: 0}}>
<Legend
layout='vertical'
verticalAlign="top"
margin={{left: 10}}
wrapperStyle={{
top: 0,
left: 24,
lineHeight: '24px'
}}
/>
<Tooltip/>
<defs>
<linearGradient id="expanse" x1="0" y1="0" x2="1" y2="0">
<stop offset="5%" stopColor="#3E54B7" stopOpacity={1}/>
<stop offset="95%" stopColor="#569DF9" stopOpacity={1}/>
</linearGradient>
<linearGradient id="income" x1="0" y1="0" x2="1" y2="0">
<stop offset="5%" stopColor="#FEE5EB" stopOpacity={1}/>
<stop offset="95%" stopColor="#FEE5EB" stopOpacity={1}/>
</linearGradient>
</defs>
<Area type="monotone" dataKey="Expanse" strokeWidth={0} stroke="#39CBDD" fillOpacity={1} fill="url(#income)"/>
<Area type="monotone" dataKey="Income" strokeWidth={0} stroke="#3F50B4" fillOpacity={1} fill="url(#expanse)"/>
</AreaChart>
</ResponsiveContainer>
)
Example #8
| Source File: MonthlyIncome.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
MonthlyIncome = () => (
<ResponsiveContainer width="100%" height={110}>
<AreaChart data={expanseData}>
<Area type="monotone" dataKey="income" stroke="#3777FF" fillOpacity={1} fill="#3777FF"/>
<Area type="monotone" dataKey="expanse" stroke="#245BD0" fillOpacity={1} fill="#245BD0"/>
</AreaChart>
</ResponsiveContainer>
)
Example #9
| Source File: MonthlyRevenue.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
MonthlyRevenue = ({chartData}) => (
<ResponsiveContainer width="100%" height={192}>
<AreaChart data={chartData} margin={{top: 10, right: 0, left: 0, bottom: 0}}>
<Tooltip/>
<defs>
<linearGradient id="expanse" x1="0" y1="0" x2="1" y2="0">
<stop offset="5%" stopColor="#FF9800" stopOpacity={1}/>
<stop offset="95%" stopColor="#FF9800" stopOpacity={1}/>
</linearGradient>
<linearGradient id="income" x1="0" y1="0" x2="1" y2="0">
<stop offset="5%" stopColor="#3BB4A3" stopOpacity={1}/>
<stop offset="95%" stopColor="#3BB4A3" stopOpacity={1}/>
</linearGradient>
</defs>
<Area type="monotone" dataKey="Expanse" strokeWidth={3} stroke="#3BB4A3" fillOpacity={0.2} fill="url(#income)"/>
<Area type="monotone" dataKey="Income" strokeWidth={3} stroke="#FF9800" fillOpacity={0.2} fill="url(#expanse)"/>
</AreaChart>
</ResponsiveContainer>
)
Example #10
| Source File: CustomerAroundWorld.js From DMS_React with GNU Affero General Public License v3.0 | 5 votes |
|
CustomerAroundWorld = () => {
return (
<div className="jr-card">
<div className="jr-card-header">
<h3 className="mb-0">
Customer Around The World
</h3>
<p className="text-muted">
In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to
demonstrate the text
</p>
</div>
<h4 className="text-muted">Countries</h4>
<div className="row">
<div className="col-lg-8 col-12">
<div className="row">
<div className="col-sm-6 col-12">
{countryList1.map((country, index) => <CountryListItem key={index} country={country} data-test={`countrylist-comp`} />)}
</div>
<div className="col-sm-6 col-12 mb-5 mb-md-1">
{countryList2.map((country, index) => <CountryListItem key={index} country={country}data-test={`countrylist-comp`} />)}
</div>
</div>
</div>
<div className="col-lg-4 col-12">
<ResponsiveContainer width="100%" height={150}>
<AreaChart data={chartData} data-test="chart-component">
<Area type="monotone" dataKey="pv" stroke="rgba(255,255,255,0.5)"
fillOpacity={.8}
fill="#3367d6"/>
<Area type="monotone" dataKey="uv" stroke="rgba(255,255,255,0.5)"
fillOpacity={.8}
fill="#f3b439"/>
</AreaChart>
</ResponsiveContainer>
</div>
</div>
</div>
)
}
Example #11
| Source File: AreaCharts.js From gedge-platform with Apache License 2.0 | 5 votes |
|
AreaCharts = observer(() => {
return (
<div>
<AreaChart
width={1700}
height={300}
data={data}
margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
>
<defs>
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#8884d8" stopOpacity={0.8} />
<stop offset="95%" stopColor="#8884d8" stopOpacity={0} />
</linearGradient>
<linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8} />
<stop offset="95%" stopColor="#82ca9d" stopOpacity={0} />
</linearGradient>
</defs>
<XAxis dataKey="name" />
<YAxis />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip />
<Area
type="monotone"
dataKey="uv"
stroke="#8884d8"
fillOpacity={1}
fill="url(#colorUv)"
/>
<Area
type="monotone"
dataKey="pv"
stroke="#82ca9d"
fillOpacity={1}
fill="url(#colorPv)"
/>
</AreaChart>
</div>
);
})
Example #12
| Source File: DashboardLineChart.js From crypto-red.github.io with MIT License | 5 votes |
|
render() {
const { classes } = this.state;
const { data, loaded } = this._get_transactions_data();
return (
<div className={classes.cardContainer}>
<Fade in>
<Card className={classes.performanceCard}>
<CardHeader title={t( "components.dashboard_line_chart.title")} />
{
loaded === 100 ?
<div>
{data.length ?
<CardContent>
<div className={classes.barChart}>
<ResponsiveContainer>
<AreaChart
data={data}
width={400}
height={475}
>
<defs>
<linearGradient id="splitColor" x1="0" y1="0" x2="0" y2="1">
<stop offset={() => this.gradient_offset(data)} stopColor="#1c1882" stopOpacity={.2} />
<stop offset={() => this.gradient_offset(data)} stopColor="#1c1882" stopOpacity={.2} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" />
<XAxis domain={['dataMin', 'dataMax']}
interval={0}
dataKey="timestamp"
angle={60} height={75} dy={10} textAnchor="start"
tickFormatter={value => this._date_formatter(value)}/>
<YAxis dataKey="value"
type={"number"}
tickFormatter={value => this._price_formatter(value, true, true)}/>
<Tooltip content={data => this._custom_tooltip(data)} />
<Area type="monotone" stroke="#1c1882" fill="url(#splitColor)" dataKey="value" strokeLinecap="round" dot={false} strokeWidth={3} activeDot={<ChartDot dotColor={"#1c1882"}/>}/>
</AreaChart>
</ResponsiveContainer>
</div>
</CardContent>:
<CardContent className={classes.noTransactionCardContent}>
<img className={classes.noTransactionImage} src="/src/images/data.svg"/>
<p>{t( "sentences.no transactions maid chart")}</p>
</CardContent>
}
</div>:
<div>
<CardContent>
<Skeleton height={475}/>
</CardContent>
</div>
}
</Card>
</Fade>
</div>
);
}
Example #13
| Source File: CoinChartsChart.js From crypto-red.github.io with MIT License | 5 votes |
|
render() {
const { classes, selected_locales_code, _regular_formatted_complete_sorted_data, _ticks_array, _coin_chart_data_time, _coin_chart_data_type, _is_coin_chart_data_loading, coin_id } = this.state;
return (
<div className={classes.fullHeight}>
<div className={classes.overlay} style={_is_coin_chart_data_loading ? {}: {display: "none"}}>
<div className={classes.circularProgressContainer}>
<CircularProgress color="inherit" />
</div>
</div>
<Fade in>
<Card className={classes.fullHeight}>
<CardContent className={classes.flowRoot}>
<ButtonGroup size="small" aria-label="Price and market cap buttons" className={classes.floatLeft}>
<Button className={_coin_chart_data_type === "prices" ? classes.contrastButton: null} onClick={() => this._set_coin_chart_data_type("prices")}>{t("words.price")}</Button>
<Button className={_coin_chart_data_type === "market_caps" ? classes.contrastButton: null} onClick={() => this._set_coin_chart_data_type("market_caps")}>{t("words.cap", {AED: true})}</Button>
</ButtonGroup>
<ButtonGroup size="small" aria-label="Chart time range button" className={classes.floatRight}>
<Button className={_coin_chart_data_time === "1" ? classes.contrastButton: null} onClick={() => this._set_coin_chart_data_time("1")}>{t("words.24h")}</Button>
<Button className={_coin_chart_data_time === "7" ? classes.contrastButton: null} onClick={() => this._set_coin_chart_data_time("7")}>{t("words.7d")}</Button>
<Button className={_coin_chart_data_time === "30" ? classes.contrastButton: null} onClick={() => this._set_coin_chart_data_time("30")}>{t("words.30d")}</Button>
<Button className={_coin_chart_data_time === "180" ? classes.contrastButton: null} onClick={() => this._set_coin_chart_data_time("180")}>{t("words.180d")}</Button>
<Button className={_coin_chart_data_time === "360" ? classes.contrastButton: null} onClick={() => this._set_coin_chart_data_time("360")}>{t("words.1y")}</Button>
<Button className={_coin_chart_data_time === "max" ? classes.contrastButton: null} onClick={() => this._set_coin_chart_data_time("max")}>{t("words.max")}</Button>
</ButtonGroup>
</CardContent>
<CardContent className={classes.chartCardContent}>
<Fade in timeout={300}>
<div className={classes.chart}>
{
_regular_formatted_complete_sorted_data.length ?
<ResponsiveContainer>
<AreaChart
data={_regular_formatted_complete_sorted_data}
>
<defs>
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop offset={1} stopColor="#1c1882" stopOpacity="0.2"></stop>
</linearGradient>
<linearGradient id="colorBtc" x1="0" y1="0" x2="0" y2="1">
<stop offset={1} stopColor="#1c1882" stopOpacity="0"></stop>
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="date"
domain={['dataMin', 'dataMax']}
interval={_coin_chart_data_time === "max" ? "preserveEnd": 0}
angle={60} height={75} dy={10} textAnchor="start"
tickFormatter={date => this._date_formatter(date)}
ticks={_ticks_array}
tickCount={_ticks_array.length}/>
<YAxis yAxisId="left"
dataKey="value"
type={"number"}
tickFormatter={value => this._price_formatter(value, true, false)}/>
<YAxis yAxisId="right"
orientation="right"
dataKey="bitcoin"
type={"number"}
tickFormatter={value => this._price_formatter(value, true, false)}/>
<Tooltip content={data => this._custom_tooltip(data)}/>
<Area type="monotone" yAxisId="right" stroke="#c6c6d9" fill="url(#colorBtc)" dataKey="bitcoin" strokeLinecap="round" dot={false} strokeWidth={1.5} activeDot={{ strokeWidth: 0, r: 3 }}/>
<Area type="monotone" yAxisId="left" stroke="#1c1882" fill="url(#colorUv)" dataKey="value" strokeLinecap="round" dot={false} strokeWidth={2.5} activeDot={<ChartDot dotColor={"#1c1882"}/>}/>
</AreaChart>
</ResponsiveContainer>:
<Skeleton className={classes.chart} />
}
</div>
</Fade>
</CardContent>
</Card>
</Fade>
</div>
);
}
Example #14
| Source File: TimeSeriesPercentage.js From covid-19 with MIT License | 5 votes |
|
TimeSeriesPercentage = props => {
const data = props.data;
const CustomTooltip = ({ active, payload, label }) => {
if (active && payload[0]) {
return (
<div className="custom-tooltip">
<h5>{`On ${label}`}</h5>
<p className="label">
New Cases Changed: <span style={{color: '#F55F20'}}><b>{payload[0].payload['% Change']}%</b></span>
</p>
<hr />
<p className="intro">
{`Total Cases: ${payload[0].payload['Actial value']}`}<br/>
{`Change since last day: ${payload[0].payload['Actual Change']} Cases`}
</p>
</div>
);
}
return null;
};
return(
<div className="time-series-percentage-cases">
<Card >
<Card.Body>
<Card.Title>
New Cases Trends - % Changes Per day
</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Percentage(%) Changes seen in New Cases at the Daily Basis.</Card.Subtitle>
<div>
<ResponsiveContainer width='100%' height={400}>
<AreaChart data={data}
margin={{top: 10, right: 30, left: 0, bottom: 0}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="date"/>
<YAxis/>
<Tooltip content={<CustomTooltip />}/>
<Area type='monotone' dataKey='% Change' stackId="1" stroke='#F55F20' fill='#F55F20' activeDot={{ r: 8 }} />
</AreaChart>
</ResponsiveContainer>
</div>
</Card.Body>
</Card>
</div>
)
}
Example #15
| Source File: TimeSeriesBroken.js From covid-19 with MIT License | 5 votes |
|
TimeSeriesBroken = props => {
const data = props.data;
const [type, setType] = useState('confirmed');
const [chartColor, setChartColor] = useState('#17A2B8');
const [btnState, setBtnState] = useState({
'confirmed': true,
'active': false,
'recovered': false,
'deaths': false
});
const handleTypeClick = (type, color) => {
setType(type);
setChartColor(color);
let tempState = Object.assign({}, {
'confirmed': false,
'active': false,
'recovered': false,
'deaths': false
});
tempState[type] = 'true';
setBtnState(tempState);
}
return (
<div className="time-series-broken-cases">
<Card >
<Card.Body>
<Card.Title>
Trends - Number of New Cases Found per Day
<div className="type-btn-grp">
<ButtonGroup aria-label="Basic example">
<Button
variant="secondary"
className={btnState.confirmed ? 'selected' : null}
onClick={e => handleTypeClick('confirmed', '#17A2B8')}>
Confirmed
</Button>
<Button
variant="secondary"
className={btnState.active ? 'selected' : null}
onClick={e => handleTypeClick('active', '#FFC107')}>
Active
</Button>
<Button
variant="secondary"
className={btnState.recovered ? 'selected' : null}
onClick={e => handleTypeClick('recovered', '#28A745')}>
Recovered
</Button>
<Button
variant="secondary"
className={btnState.deaths ? 'selected' : null}
onClick={e => handleTypeClick('deaths', '#DC3545')}>
Deaths
</Button>
</ButtonGroup>
</div>
</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Number of New cases reported daily basis</Card.Subtitle>
<div>
<ResponsiveContainer width='100%' height={400}>
<AreaChart data={data}
margin={{top: 10, right: 30, left: 0, bottom: 0}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="date"/>
<YAxis/>
<Tooltip/>
<Area type='monotone' dataKey={type} stackId="1" stroke={chartColor} fill={chartColor} activeDot={{ r: 8 }} />
</AreaChart>
</ResponsiveContainer>
</div>
</Card.Body>
</Card>
</div>
)
}
Example #16
| Source File: CountryCasesWidget.js From covid-19 with MIT License | 5 votes |
|
CountryCasesWidget = props => {
const data = props.data;
const TOP_N = 15;
let refinedData = [];
let sortedData = data.sort((a, b) => b.cases - a.cases);
let cloned = JSON.parse(JSON.stringify(sortedData));
let topNData = cloned.splice(0, TOP_N);
topNData.forEach(element => {
let obj = {};
obj['Country'] = element['country'];
obj['Cases'] = element['cases'];
obj['Recovered'] = element['recovered'];
obj['Deaths'] = element['deaths'];
refinedData.push(obj);
});
return(
<div className="country-all-data-widget">
<Card >
<Card.Body>
<Card.Title>Major Country Spreads(Total Confirmed Cases)</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Number of Countries: <b>{TOP_N}</b></Card.Subtitle>
<div>
<ResponsiveContainer width='100%' height={400}>
<AreaChart data={refinedData}
margin={{top: 10, right: 30, left: 0, bottom: 0}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="Country"/>
<YAxis/>
<Tooltip/>
<Area type='monotone' dataKey='Cases' stackId="1" stroke={COLOR_CODES.CATEGORIES.CONFIRMED} fill={COLOR_CODES.CATEGORIES.CONFIRMED} activeDot={{ r: 8 }}/>
</AreaChart>
</ResponsiveContainer>
</div>
</Card.Body>
</Card>
</div>
)
}
Example #17
| Source File: lineChart.jsx From GraphVega with MIT License | 5 votes |
|
LineChart = (props) => {
const data = props.data || [];
const gradientOffset = () => {
const dataMax = Math.max(...data.map((i) => i.profit));
const dataMin = Math.min(...data.map((i) => i.profit));
if (dataMax <= 0){
return 0
}
else if (dataMin >= 0){
return 1
}
else{
return dataMax / (dataMax - dataMin);
}
}
const off = gradientOffset();
return(
<Card>
<CardContent>
<Row>
<Col sm={{span:12}}>
<Typography variant="h6" display="block" gutterBottom>
Profit & Loss Chart
</Typography>
</Col>
</Row>
<Row>
<Col sm={{span:12}} >
<AreaChart
height={520}
width={860}
data={data}
margin={{ top: 20, right: 0, left: 0, bottom: 0 }}
>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="label">
<Label value="Stock price" offset={0} position="insideBottom"/>
</XAxis>
<YAxis label={{ value: 'Profit', angle: -90, position: 'insideLeft', textAnchor: 'middle' }}/>
<Tooltip/>
<defs>
<linearGradient id="splitColor" x1="0" y1="0" x2="0" y2="1">
<stop offset={off} stopColor="green" stopOpacity={1}/>
<stop offset={off} stopColor="red" stopOpacity={1}/>
</linearGradient>
</defs>
<Area type="monotone" dataKey="profit" stroke="#000" fill="url(#splitColor)" />
</AreaChart>
</Col>
</Row>
</CardContent>
</Card>
)
}
Example #18
| Source File: DailyVolume.js From paras-landing with GNU General Public License v3.0 | 5 votes |
|
DailyVolume = ({ data }) => {
return (
<div>
{data.length > 0 && (
<div className="h-80">
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={data} margin={{ top: 5, right: 20, left: 10, bottom: 35 }}>
<defs>
<linearGradient id="colorVolume" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#9996bc" stopOpacity={0.5} />
<stop offset="50%" stopColor="#594fb2" stopOpacity={0.5} />
<stop offset="75%" stopColor="#1300BA" stopOpacity={0.15} />
<stop offset="100%" stopColor="#1300" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="4 8" horizontal={false} />
<YAxis
axisLine={false}
tickLine={false}
tickMargin={8}
stroke="rgba(255, 255, 255, 0.6)"
tickFormatter={(x) => {
return prettyBalance(x / 10 ** 24, 0)
}}
/>
<XAxis
interval={4}
dataKey="date"
axisLine={false}
tickLine={false}
tickMargin={8}
stroke="rgba(255, 255, 255, 0.6)"
tickFormatter={(x) => {
return `${new Date(x).getMonth() + 1}/${new Date(x).getDate()}`
}}
/>
<Tooltip content={<CustomTooltip />} />
<Area
type="monotone"
stackId="1"
dataKey="volume"
dot={false}
stroke="#3389ff"
strokeWidth={2}
fillOpacity={1}
fill="url(#colorVolume)"
/>
</AreaChart>
</ResponsiveContainer>
</div>
)}
</div>
)
}
Example #19
| Source File: DailyTracker.js From paras-landing with GNU General Public License v3.0 | 5 votes |
|
DailyTracker = ({ data, title, value }) => {
return (
<div>
{data.length > 0 && (
<div className="h-80">
<ResponsiveContainer>
<AreaChart data={data} margin={{ top: 5, right: 20, left: 10, bottom: 35 }}>
<defs>
<linearGradient id="colorVolume" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#9996bc" stopOpacity={0.5} />
<stop offset="50%" stopColor="#594fb2" stopOpacity={0.5} />
<stop offset="75%" stopColor="#1300BA" stopOpacity={0.15} />
<stop offset="100%" stopColor="#1300" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="4 8" horizontal={false} />
<YAxis
dataKey={value}
axisLine={false}
tickLine={false}
tickMargin={8}
stroke="rgba(255, 255, 255, 0.6)"
/>
<XAxis
interval={4}
dataKey="timestamp"
axisLine={false}
tickLine={false}
tickMargin={8}
stroke="rgba(255, 255, 255, 0.6)"
tickFormatter={(x) => {
return `${new Date(x).getMonth() + 1}/${new Date(x).getDate()}`
}}
/>
<Tooltip content={<CustomTooltip title={title} value={value} />} />
<Area
type="monotone"
stackId="1"
dataKey={value}
dot={false}
stroke="#3389ff"
strokeWidth={2}
fillOpacity={1}
fill="url(#colorVolume)"
/>
</AreaChart>
</ResponsiveContainer>
</div>
)}
</div>
)
}
Example #20
| Source File: GraphDeathProjection.js From covid-19 with MIT License | 5 votes |
|
GraphDeathProjectionRender = (props) => {
let data = props.data;
const max_date = props.max_date;
const data_keys = props.data_keys;
data = data.map(d => {
d.name = moment(d.fulldate, "MM/DD/YYYY").format("M/D");
return d;
});
data = data.sort((a, b) => moment(a.fulldate, "MM/DD/YYYY").toDate() - (moment(b.fulldate, "MM/DD/YYYY")).toDate());
const [state, setState] = React.useState({
showall: false,
});
const handleLogScaleToggle = event => {
setState({ ...state, showall: !state.showall });
};
const cutoff = moment().subtract(30, 'days')
const future = moment().add(30, 'days')
data = data.filter(d => {
let day = moment(d.fulldate, "MM/DD/YYYY");
return day.isAfter(cutoff) && day.isBefore(future);
});
const formatYAxis = (tickItem) => {
return myShortNumber(tickItem);
}
return <>
<Grid container alignItems="center" spacing={1}>
<Grid item onClick={handleLogScaleToggle}>
<Typography>
Daily
</Typography>
</Grid>
<Grid item>
<AntSwitch checked={state.showall} onClick={handleLogScaleToggle} />
</Grid>
<Grid item onClick={handleLogScaleToggle}>
<Typography>
Total
</Typography>
</Grid>
<Grid item></Grid>
</Grid>
<ResponsiveContainer height={300} >
<ComposedChart data={data} margin={{ top: 5, right: 30, left: 5, bottom: 5 }} >
<XAxis dataKey="name" />
<YAxis yAxisId={0} tickFormatter={formatYAxis} />
<ReferenceLine x={moment(max_date, "MM/DD/YYYY").format("M/D")} label={{ value: props.max_label, fill: '#a3a3a3' }} stroke="#e3e3e3" strokeWidth={3} />
<CartesianGrid stroke="#d5d5d5" strokeDasharray="5 5" />
<Line type="monotone" dataKey={data_keys.key_mean} stroke="#000000" dot={{ r: 1 }} yAxisId={0} strokeWidth={2} />
<Area type='monotone' dataKey={data_keys.key_lower} stackId="1" stroke='#8884d8' fill='#FFFFFF' />
<Area type='monotone' dataKey={data_keys.key_delta} stackId="1" stroke='#82ca9d' fill='#82ca9d' />
<Line type="monotone" dataKey="actualDeath_daily" stroke="#FF0000" dot={{ r: 1 }} strokeDasharray="2 2" yAxisId={0} strokeWidth={2} />
<Line type="monotone" dataKey="actualDeath_moving_avg" stroke="#FF0000" dot={{ r: 1 }} yAxisId={0} strokeWidth={3} />
{state.showall && <Line type="monotone" dataKey={data_keys.key_mean_cumulative} dot={{ r: 1 }} stroke="#000000" yAxisId={0} strokeWidth={1} />}
{state.showall && <Line type="monotone" dataKey="actualDeath_total" dot={{ r: 1 }} stroke="#ff0000" yAxisId={0} strokeWidth={2} />}
{state.showall && <Area type='monotone' dataKey={data_keys.key_lower_cumulative} stackId="2" stroke='#8884d8' fill='#FFFFFF' />}
{state.showall && <Area type='monotone' dataKey={data_keys.key_delta_cumulative} stackId="2" stroke='#82ca9d' fill='#82ca9d' />}
<Tooltip content={props.tooltip} />
<Legend verticalAlign="top" payload={[
{ value: 'Actual Death', type: 'line', color: '#ff0000' },
{ value: 'Projection', type: 'line', color: '#000000' },
]} />
</ComposedChart>
</ResponsiveContainer>
<Typography variant="body2">
Source: The Institute for Health Metrics and Evaluation
</Typography>
</>
}
Example #21
| Source File: AreaChart.jsx From cosmoscan-front with Apache License 2.0 | 4 votes |
|
AreaChart = ({
isLoading,
data,
yAxisLabelsFormatter,
yAxisWidth,
yTickCount,
xAxisTickFormatter,
yAxisDomain,
yAllowDecimals,
tooltipFormatter,
tooltipLabelFormatter,
areaName,
areaUnit,
color,
onDotClick,
isDotClickable,
}) => {
const theme = useContext(ThemeContext);
return (
<div style={{ width: '100%', height: '400px' }}>
{/* 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>
<AreaChartStyled data={data}>
<XAxis
dataKey="x"
tickLine={false}
tick={{ fill: theme.gray }}
axisLine={false}
tickFormatter={xAxisTickFormatter}
/>
<YAxis
tickLine={false}
tick={{ fill: theme.gray }}
tickFormatter={yAxisLabelsFormatter}
width={yAxisWidth}
tickCount={yTickCount}
axisLine={false}
type="number"
domain={yAxisDomain}
allowDecimals={yAllowDecimals}
/>
<CartesianGrid
strokeDasharray="3 3"
stroke="#e2e2e9"
vertical={false}
/>
<Tooltip
cursor={{ strokeDasharray: '3 3', stroke: color }}
formatter={tooltipFormatter}
labelFormatter={tooltipLabelFormatter}
/>
<Legend
align="left"
iconType="circle"
verticalAlign="top"
height={50}
wrapperStyle={{
fontWeight: 700,
textTransform: 'uppercase',
}}
/>
<Area
type="monotone"
dataKey="y"
stroke={color}
fill={color}
fillOpacity={0.3}
activeDot={{
r: 6,
onClick: onDotClick,
cursor: isDotClickable ? 'pointer' : 'initial',
}}
strokeWidth={2}
connectNulls
unit={areaUnit}
name={areaName}
/>
</AreaChartStyled>
</ResponsiveContainer>
) : (
<div className="d-flex justify-content-center align-items-center h-100">
No data
</div>
)}
</div>
);
}
Example #22
| Source File: index.js From pancake-info-v1 with GNU General Public License v3.0 | 4 votes |
|
TokenChart = ({ address, color, base }) => {
// settings for the window and candle width
const [chartFilter, setChartFilter] = useState(CHART_VIEW.PRICE)
const [frequency, setFrequency] = useState(DATA_FREQUENCY.HOUR)
const [darkMode] = useDarkModeManager()
const textColor = darkMode ? 'white' : 'black'
// reset view on new address
const addressPrev = usePrevious(address)
useEffect(() => {
if (address !== addressPrev && addressPrev) {
setChartFilter(CHART_VIEW.LIQUIDITY)
}
}, [address, addressPrev])
let chartData = useTokenChartData(address)
const [timeWindow, setTimeWindow] = useState(timeframeOptions.ALL_TIME)
const prevWindow = usePrevious(timeWindow)
// hourly and daily price data based on the current time window
const hourlyWeek = useTokenPriceData(address, timeframeOptions.WEEK, 3600)
const hourlyMonth = useTokenPriceData(address, timeframeOptions.MONTH, 3600)
const hourlyAll = useTokenPriceData(address, timeframeOptions.ALL_TIME, 3600)
const dailyWeek = useTokenPriceData(address, timeframeOptions.WEEK, 86400)
const dailyMonth = useTokenPriceData(address, timeframeOptions.MONTH, 86400)
const dailyAll = useTokenPriceData(address, timeframeOptions.ALL_TIME, 86400)
const priceData =
timeWindow === timeframeOptions.MONTH
? // monthly selected
frequency === DATA_FREQUENCY.DAY
? dailyMonth
: hourlyMonth
: // weekly selected
timeWindow === timeframeOptions.WEEK
? frequency === DATA_FREQUENCY.DAY
? dailyWeek
: hourlyWeek
: // all time selected
frequency === DATA_FREQUENCY.DAY
? dailyAll
: hourlyAll
// switch to hourly data when switched to week window
useEffect(() => {
if (timeWindow === timeframeOptions.WEEK && prevWindow && prevWindow !== timeframeOptions.WEEK) {
setFrequency(DATA_FREQUENCY.HOUR)
}
}, [prevWindow, timeWindow])
// switch to daily data if switche to month or all time view
useEffect(() => {
if (timeWindow === timeframeOptions.MONTH && prevWindow && prevWindow !== timeframeOptions.MONTH) {
setFrequency(DATA_FREQUENCY.DAY)
}
if (timeWindow === timeframeOptions.ALL_TIME && prevWindow && prevWindow !== timeframeOptions.ALL_TIME) {
setFrequency(DATA_FREQUENCY.DAY)
}
}, [prevWindow, timeWindow])
const below1080 = useMedia('(max-width: 1080px)')
const below600 = useMedia('(max-width: 600px)')
let utcStartTime = getTimeframe(timeWindow)
const domain = [(dataMin) => (dataMin > utcStartTime ? dataMin : utcStartTime), 'dataMax']
const aspect = below1080 ? 60 / 32 : below600 ? 60 / 42 : 60 / 22
chartData = chartData?.filter((entry) => entry.date >= utcStartTime)
// update the width on a window resize
const ref = useRef()
const isClient = typeof window === 'object'
const [width, setWidth] = useState(ref?.current?.container?.clientWidth)
useEffect(() => {
if (!isClient) {
return false
}
function handleResize() {
setWidth(ref?.current?.container?.clientWidth ?? width)
}
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}, [isClient, width]) // Empty array ensures that effect is only run on mount and unmount
return (
<ChartWrapper>
{below600 ? (
<RowBetween mb={40}>
<DropdownSelect options={CHART_VIEW} active={chartFilter} setActive={setChartFilter} color={color} />
<DropdownSelect options={timeframeOptions} active={timeWindow} setActive={setTimeWindow} color={color} />
</RowBetween>
) : (
<RowBetween
mb={
chartFilter === CHART_VIEW.LIQUIDITY ||
chartFilter === CHART_VIEW.VOLUME ||
(chartFilter === CHART_VIEW.PRICE && frequency === DATA_FREQUENCY.LINE)
? 40
: 0
}
align="flex-start"
>
<AutoColumn gap="8px">
<RowFixed>
<OptionButton
active={chartFilter === CHART_VIEW.LIQUIDITY}
onClick={() => setChartFilter(CHART_VIEW.LIQUIDITY)}
style={{ marginRight: '6px' }}
>
Liquidity
</OptionButton>
<OptionButton
active={chartFilter === CHART_VIEW.VOLUME}
onClick={() => setChartFilter(CHART_VIEW.VOLUME)}
style={{ marginRight: '6px' }}
>
Volume
</OptionButton>
<OptionButton
active={chartFilter === CHART_VIEW.PRICE}
onClick={() => {
setChartFilter(CHART_VIEW.PRICE)
}}
>
Price
</OptionButton>
</RowFixed>
{chartFilter === CHART_VIEW.PRICE && (
<AutoRow gap="4px">
<PriceOption
active={frequency === DATA_FREQUENCY.DAY}
onClick={() => {
setTimeWindow(timeframeOptions.MONTH)
setFrequency(DATA_FREQUENCY.DAY)
}}
>
D
</PriceOption>
<PriceOption
active={frequency === DATA_FREQUENCY.HOUR}
onClick={() => setFrequency(DATA_FREQUENCY.HOUR)}
>
H
</PriceOption>
<PriceOption
active={frequency === DATA_FREQUENCY.LINE}
onClick={() => setFrequency(DATA_FREQUENCY.LINE)}
>
<Activity size={14} />
</PriceOption>
</AutoRow>
)}
</AutoColumn>
<AutoRow justify="flex-end" gap="6px" align="flex-start">
<OptionButton
active={timeWindow === timeframeOptions.WEEK}
onClick={() => setTimeWindow(timeframeOptions.WEEK)}
>
1W
</OptionButton>
<OptionButton
active={timeWindow === timeframeOptions.MONTH}
onClick={() => setTimeWindow(timeframeOptions.MONTH)}
>
1M
</OptionButton>
<OptionButton
active={timeWindow === timeframeOptions.ALL_TIME}
onClick={() => setTimeWindow(timeframeOptions.ALL_TIME)}
>
All
</OptionButton>
</AutoRow>
</RowBetween>
)}
{chartFilter === CHART_VIEW.LIQUIDITY && chartData && (
<ResponsiveContainer aspect={aspect}>
<AreaChart margin={{ top: 0, right: 10, bottom: 6, left: 0 }} barCategoryGap={1} data={chartData}>
<defs>
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={color} stopOpacity={0.35} />
<stop offset="95%" stopColor={color} stopOpacity={0} />
</linearGradient>
</defs>
<XAxis
tickLine={false}
axisLine={false}
interval="preserveEnd"
tickMargin={16}
minTickGap={120}
tickFormatter={(tick) => toNiceDate(tick)}
dataKey="date"
tick={{ fill: textColor }}
type={'number'}
domain={['dataMin', 'dataMax']}
/>
<YAxis
type="number"
orientation="right"
tickFormatter={(tick) => '$' + toK(tick)}
axisLine={false}
tickLine={false}
interval="preserveEnd"
minTickGap={80}
yAxisId={0}
tick={{ fill: textColor }}
/>
<Tooltip
cursor={true}
formatter={(val) => formattedNum(val, true)}
labelFormatter={(label) => toNiceDateYear(label)}
labelStyle={{ paddingTop: 4 }}
contentStyle={{
padding: '10px 14px',
borderRadius: 10,
borderColor: color,
color: 'black',
}}
wrapperStyle={{ top: -70, left: -10 }}
/>
<Area
key={'other'}
dataKey={'totalLiquidityUSD'}
stackId="2"
strokeWidth={2}
dot={false}
type="monotone"
name={'Liquidity'}
yAxisId={0}
stroke={darken(0.12, color)}
fill="url(#colorUv)"
/>
</AreaChart>
</ResponsiveContainer>
)}
{chartFilter === CHART_VIEW.PRICE &&
(frequency === DATA_FREQUENCY.LINE ? (
<ResponsiveContainer aspect={below1080 ? 60 / 32 : 60 / 16}>
<AreaChart margin={{ top: 0, right: 10, bottom: 6, left: 0 }} barCategoryGap={1} data={chartData}>
<defs>
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={color} stopOpacity={0.35} />
<stop offset="95%" stopColor={color} stopOpacity={0} />
</linearGradient>
</defs>
<XAxis
tickLine={false}
axisLine={false}
interval="preserveEnd"
tickMargin={16}
minTickGap={120}
tickFormatter={(tick) => toNiceDate(tick)}
dataKey="date"
tick={{ fill: textColor }}
type={'number'}
domain={domain}
/>
<YAxis
type="number"
orientation="right"
tickFormatter={(tick) => '$' + toK(tick)}
axisLine={false}
tickLine={false}
interval="preserveEnd"
minTickGap={80}
yAxisId={0}
tick={{ fill: textColor }}
/>
<Tooltip
cursor={true}
formatter={(val) => formattedNum(val, true)}
labelFormatter={(label) => toNiceDateYear(label)}
labelStyle={{ paddingTop: 4 }}
contentStyle={{
padding: '10px 14px',
borderRadius: 10,
borderColor: color,
color: 'black',
}}
wrapperStyle={{ top: -70, left: -10 }}
/>
<Area
key={'other'}
dataKey={'priceUSD'}
stackId="2"
strokeWidth={2}
dot={false}
type="monotone"
name={'Price'}
yAxisId={0}
stroke={darken(0.12, color)}
fill="url(#colorUv)"
/>
</AreaChart>
</ResponsiveContainer>
) : priceData ? (
<ResponsiveContainer aspect={aspect} ref={ref}>
<CandleStickChart data={priceData} width={width} base={base} />
</ResponsiveContainer>
) : (
<LocalLoader />
))}
{chartFilter === CHART_VIEW.VOLUME && (
<ResponsiveContainer aspect={aspect}>
<BarChart margin={{ top: 0, right: 10, bottom: 6, left: 10 }} barCategoryGap={1} data={chartData}>
<XAxis
tickLine={false}
axisLine={false}
interval="preserveEnd"
minTickGap={80}
tickMargin={14}
tickFormatter={(tick) => toNiceDate(tick)}
dataKey="date"
tick={{ fill: textColor }}
type={'number'}
domain={['dataMin', 'dataMax']}
/>
<YAxis
type="number"
axisLine={false}
tickMargin={16}
tickFormatter={(tick) => '$' + toK(tick)}
tickLine={false}
orientation="right"
interval="preserveEnd"
minTickGap={80}
yAxisId={0}
tick={{ fill: textColor }}
/>
<Tooltip
cursor={{ fill: color, opacity: 0.1 }}
formatter={(val) => formattedNum(val, true)}
labelFormatter={(label) => toNiceDateYear(label)}
labelStyle={{ paddingTop: 4 }}
contentStyle={{
padding: '10px 14px',
borderRadius: 10,
borderColor: color,
color: 'black',
}}
wrapperStyle={{ top: -70, left: -10 }}
/>
<Bar
type="monotone"
name={'Volume'}
dataKey={'dailyVolumeUSD'}
fill={color}
opacity={'0.4'}
yAxisId={0}
stroke={color}
/>
</BarChart>
</ResponsiveContainer>
)}
</ChartWrapper>
)
}
Example #23
| Source File: SalesStatistic.js From DMS_React with GNU Affero General Public License v3.0 | 4 votes |
|
SalesStatistic = () => {
return (
<div className="jr-card">
<div className="jr-card-header d-flex align-items-center">
<h3 className="mb-0">Sales Statistic</h3>
</div>
<div className="row mb-3">
<div className="col-6 col-sm-4 col-md-3 col-lg-2">
<span className="d-flex align-items-center mb-2">
<i className="zmdi zmdi-calendar-check text-muted chart-f20"/>
<span className="ml-3 text-dark">48548</span>
</span>
<p className="text-muted">Orders Monthly</p>
</div>
<div className="col-6 col-sm-4 col-md-3 col-lg-2">
<span className="d-flex align-items-center mb-2">
<i className="zmdi zmdi-calendar-note text-muted chart-f20"/>
<span className="ml-3 text-dark">6,875</span>
</span>
<p className="text-muted">Orders Weekly</p>
</div>
<div className="col-6 col-sm-4 col-md-3 col-lg-2">
<span className="d-flex align-items-center mb-2">
<i className="zmdi zmdi-money-box text-muted chart-f20"/>
<span className="ml-3 text-dark">$210,213</span>
</span>
<p className="text-muted">Average Revenue</p>
</div>
<div className="col-6 col-sm-4 col-md-3 col-lg-2">
<span className="d-flex align-items-center mb-2">
<i className="zmdi zmdi-money-box text-muted chart-f20"/>
<span className="ml-3 text-dark">$692,874</span>
</span>
<p className="text-muted">Total Revenue</p>
</div>
<div className="col-6 col-sm-4 col-md-3 col-lg-2">
<span className="d-flex align-items-center mb-2">
<i className="zmdi zmdi-calendar text-muted chart-f20"/>
<span className="ml-3 text-dark">9,223</span>
</span>
<p className="text-muted">Total Orders</p>
</div>
<div className="col-6 col-sm-4 col-md-3 col-lg-2">
<span className="d-flex align-items-center mb-2">
<i className="zmdi zmdi-calendar-alt text-muted chart-f20"/>
<span className="ml-3 text-dark">8,543</span>
</span>
<p className="text-muted">Past Orders</p>
</div>
</div>
<div className="row">
<div className="col-lg-7 col-12 mb-5 mb-lg-1">
<ResponsiveContainer width="100%" height={300}>
<AreaChart data={salesStatisticData}
margin={{top: 10, right: 30, left: 0, bottom: 0}}>
<XAxis dataKey="name"/>
<YAxis type="number" domain={[0, 26000]}/>
<CartesianGrid strokeDasharray="0" stroke="#DCDEDE"/>
<Tooltip/>
<defs>
<linearGradient id="salesStatistic" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#4258BC" stopOpacity={1}/>
<stop offset="95%" stopColor="#FFF" stopOpacity={0.8}/>
</linearGradient>
</defs>
<Area type='monotone' dataKey='uv' strokeWidth={2} stroke='#6F82E5' fill="url(#salesStatistic)"/>
</AreaChart>
</ResponsiveContainer>
</div>
<div className="col-lg-5 col-12">
<ResponsiveContainer width="100%">
<SalesGauge/>
</ResponsiveContainer>
</div>
</div>
</div>
);
}
Example #24
| Source File: index.js From pancake-info-v1 with GNU General Public License v3.0 | 4 votes |
|
PairChart = ({ address, color, base0, base1 }) => {
const [chartFilter, setChartFilter] = useState(CHART_VIEW.LIQUIDITY)
const [timeWindow, setTimeWindow] = useState(timeframeOptions.ALL_TIME)
const [darkMode] = useDarkModeManager()
const textColor = darkMode ? 'white' : 'black'
// update the width on a window resize
const ref = useRef()
const isClient = typeof window === 'object'
const [width, setWidth] = useState(ref?.current?.container?.clientWidth)
const [height, setHeight] = useState(ref?.current?.container?.clientHeight)
useEffect(() => {
if (!isClient) {
return false
}
function handleResize() {
setWidth(ref?.current?.container?.clientWidth ?? width)
setHeight(ref?.current?.container?.clientHeight ?? height)
}
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}, [height, isClient, width]) // Empty array ensures that effect is only run on mount and unmount
// get data for pair, and rates
const pairData = usePairData(address)
let chartData = usePairChartData(address)
const hourlyData = useHourlyRateData(address, timeWindow)
const hourlyRate0 = hourlyData && hourlyData[0]
const hourlyRate1 = hourlyData && hourlyData[1]
// formatted symbols for overflow
const formattedSymbol0 =
pairData?.token0?.symbol.length > 6 ? pairData?.token0?.symbol.slice(0, 5) + '...' : pairData?.token0?.symbol
const formattedSymbol1 =
pairData?.token1?.symbol.length > 6 ? pairData?.token1?.symbol.slice(0, 5) + '...' : pairData?.token1?.symbol
const below1600 = useMedia('(max-width: 1600px)')
const below1080 = useMedia('(max-width: 1080px)')
const below600 = useMedia('(max-width: 600px)')
let utcStartTime = getTimeframe(timeWindow)
chartData = chartData?.filter((entry) => entry.date >= utcStartTime)
if (chartData && chartData.length === 0) {
return (
<ChartWrapper>
<EmptyCard height="300px">No historical data yet.</EmptyCard>{' '}
</ChartWrapper>
)
}
/**
* Used to format values on chart on scroll
* Needs to be raw html for chart API to parse styles
* @param {*} val
*/
function valueFormatter(val) {
if (chartFilter === CHART_VIEW.RATE0) {
return (
formattedNum(val) +
`<span style="font-size: 12px; margin-left: 4px;">${formattedSymbol1}/${formattedSymbol0}<span>`
)
}
if (chartFilter === CHART_VIEW.RATE1) {
return (
formattedNum(val) +
`<span style="font-size: 12px; margin-left: 4px;">${formattedSymbol0}/${formattedSymbol1}<span>`
)
}
}
const aspect = below1080 ? 60 / 20 : below1600 ? 60 / 28 : 60 / 22
return (
<ChartWrapper>
{below600 ? (
<RowBetween mb={40}>
<DropdownSelect options={CHART_VIEW} active={chartFilter} setActive={setChartFilter} color={color} />
<DropdownSelect options={timeframeOptions} active={timeWindow} setActive={setTimeWindow} color={color} />
</RowBetween>
) : (
<OptionsRow>
<AutoRow gap="6px" style={{ flexWrap: 'nowrap' }}>
<OptionButton
active={chartFilter === CHART_VIEW.LIQUIDITY}
onClick={() => {
setTimeWindow(timeframeOptions.ALL_TIME)
setChartFilter(CHART_VIEW.LIQUIDITY)
}}
>
Liquidity
</OptionButton>
<OptionButton
active={chartFilter === CHART_VIEW.VOLUME}
onClick={() => {
setTimeWindow(timeframeOptions.ALL_TIME)
setChartFilter(CHART_VIEW.VOLUME)
}}
>
Volume
</OptionButton>
<OptionButton
active={chartFilter === CHART_VIEW.RATE0}
onClick={() => {
setTimeWindow(timeframeOptions.WEEK)
setChartFilter(CHART_VIEW.RATE0)
}}
>
{pairData.token0 ? formattedSymbol1 + '/' + formattedSymbol0 : '-'}
</OptionButton>
<OptionButton
active={chartFilter === CHART_VIEW.RATE1}
onClick={() => {
setTimeWindow(timeframeOptions.WEEK)
setChartFilter(CHART_VIEW.RATE1)
}}
>
{pairData.token0 ? formattedSymbol0 + '/' + formattedSymbol1 : '-'}
</OptionButton>
</AutoRow>
<AutoRow justify="flex-end" gap="6px">
<OptionButton
active={timeWindow === timeframeOptions.WEEK}
onClick={() => setTimeWindow(timeframeOptions.WEEK)}
>
1W
</OptionButton>
<OptionButton
active={timeWindow === timeframeOptions.MONTH}
onClick={() => setTimeWindow(timeframeOptions.MONTH)}
>
1M
</OptionButton>
<OptionButton
active={timeWindow === timeframeOptions.ALL_TIME}
onClick={() => setTimeWindow(timeframeOptions.ALL_TIME)}
>
All
</OptionButton>
</AutoRow>
</OptionsRow>
)}
{chartFilter === CHART_VIEW.LIQUIDITY && (
<ResponsiveContainer aspect={aspect}>
<AreaChart margin={{ top: 0, right: 10, bottom: 6, left: 0 }} barCategoryGap={1} data={chartData}>
<defs>
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={color} stopOpacity={0.35} />
<stop offset="95%" stopColor={color} stopOpacity={0} />
</linearGradient>
</defs>
<XAxis
tickLine={false}
axisLine={false}
interval="preserveEnd"
tickMargin={14}
minTickGap={80}
tickFormatter={(tick) => toNiceDate(tick)}
dataKey="date"
tick={{ fill: textColor }}
type={'number'}
domain={['dataMin', 'dataMax']}
/>
<YAxis
type="number"
orientation="right"
tickFormatter={(tick) => '$' + toK(tick)}
axisLine={false}
tickLine={false}
interval="preserveEnd"
minTickGap={80}
yAxisId={0}
tickMargin={16}
tick={{ fill: textColor }}
/>
<Tooltip
cursor={true}
formatter={(val) => formattedNum(val, true)}
labelFormatter={(label) => toNiceDateYear(label)}
labelStyle={{ paddingTop: 4 }}
contentStyle={{
padding: '10px 14px',
borderRadius: 10,
borderColor: color,
color: 'black',
}}
wrapperStyle={{ top: -70, left: -10 }}
/>
<Area
strokeWidth={2}
dot={false}
type="monotone"
name={' (USD)'}
dataKey={'reserveUSD'}
yAxisId={0}
stroke={darken(0.12, color)}
fill="url(#colorUv)"
/>
</AreaChart>
</ResponsiveContainer>
)}
{chartFilter === CHART_VIEW.RATE1 &&
(hourlyRate1 ? (
<ResponsiveContainer aspect={aspect} ref={ref}>
<CandleStickChart
data={hourlyRate1}
base={base0}
margin={false}
width={width}
valueFormatter={valueFormatter}
/>
</ResponsiveContainer>
) : (
<LocalLoader />
))}
{chartFilter === CHART_VIEW.RATE0 &&
(hourlyRate0 ? (
<ResponsiveContainer aspect={aspect} ref={ref}>
<CandleStickChart
data={hourlyRate0}
base={base1}
margin={false}
width={width}
valueFormatter={valueFormatter}
/>
</ResponsiveContainer>
) : (
<LocalLoader />
))}
{chartFilter === CHART_VIEW.VOLUME && (
<ResponsiveContainer aspect={aspect}>
<BarChart
margin={{ top: 0, right: 0, bottom: 6, left: below1080 ? 0 : 10 }}
barCategoryGap={1}
data={chartData}
>
<XAxis
tickLine={false}
axisLine={false}
interval="preserveEnd"
minTickGap={80}
tickMargin={14}
tickFormatter={(tick) => toNiceDate(tick)}
dataKey="date"
tick={{ fill: textColor }}
type={'number'}
domain={['dataMin', 'dataMax']}
/>
<YAxis
type="number"
axisLine={false}
tickMargin={16}
tickFormatter={(tick) => '$' + toK(tick)}
tickLine={false}
interval="preserveEnd"
orientation="right"
minTickGap={80}
yAxisId={0}
tick={{ fill: textColor }}
/>
<Tooltip
cursor={{ fill: color, opacity: 0.1 }}
formatter={(val) => formattedNum(val, true)}
labelFormatter={(label) => toNiceDateYear(label)}
labelStyle={{ paddingTop: 4 }}
contentStyle={{
padding: '10px 14px',
borderRadius: 10,
borderColor: color,
color: 'black',
}}
wrapperStyle={{ top: -70, left: -10 }}
/>
<Bar
type="monotone"
name={'Volume'}
dataKey={'dailyVolumeUSD'}
fill={color}
opacity={'0.4'}
yAxisId={0}
stroke={color}
/>
</BarChart>
</ResponsiveContainer>
)}
</ChartWrapper>
)
}
Example #25
| Source File: TopTenCountriesChart.jsx From Platzi-master-Consulta-de-poblacion-mundial with MIT License | 4 votes |
|
TopTenCountriesChart = () => {
const data = [
{
'id': 1,
'country': 'China',
'population': 1439323776,
'yearly_change': 0.39,
'net_change': 5540390,
'density_p_km2': 153,
'land_area': 9388211,
'migrants_net': -348399,
'fert_net': 1.7,
'med_age': 38,
'urban_pop': 61,
'world_share': 18.47,
}, {
'id': 2,
'country': 'India',
'population': 1380004385,
'yearly_change': 0.99,
'net_change': 13586631,
'density_p_km2': 464,
'land_area': 2973190,
'migrants_net': -532687,
'fert_net': 2.2,
'med_age': 28,
'urban_pop': 35,
'world_share': 17.70,
}, {
'id': 3,
'country': 'United States',
'population': 331002651,
'yearly_change': 0.59,
'net_change': 1937734,
'density_p_km2': 36,
'land_area': 9147420,
'migrants_net': 954806,
'fert_net': 1.8,
'med_age': 38,
'urban_pop': 83,
'world_share': 4.25,
}, {
'id': 4,
'country': 'Indonesia',
'population': 273523615,
'yearly_change': 1.07,
'net_change': 2898047,
'density_p_km2': 151,
'land_area': 1811570,
'migrants_net': -98955,
'fert_net': 2.3,
'med_age': 30,
'urban_pop': 56,
'world_share': 3.51,
}, {
'id': 5,
'country': 'Pakistan',
'population': 220892340,
'yearly_change': 200,
'net_change': 4327022,
'density_p_km2': 287,
'land_area': 770880,
'migrants_net': -233379,
'fert_net': 3.6,
'med_age': 23,
'urban_pop': 35,
'world_share': 2.83,
}, {
'id': 6,
'country': 'Brazil',
'population': 212559417,
'yearly_change': 0.72,
'net_change': 1509890,
'density_p_km2': 25,
'land_area': 8358140,
'migrants_net': 21200,
'fert_net': 1.7,
'med_age': 33,
'urban_pop': 88,
'world_share': 2.73,
}, {
'id': 7,
'country': 'Nigeria',
'population': 206139589,
'yearly_change': 2.58,
'net_change': 5175990,
'density_p_km2': 226,
'land_area': 91070,
'migrants_net': -60000,
'fert_net': 5.4,
'med_age': 18,
'urban_pop': 52,
'world_share': 2.64,
}, {
'id': 8,
'country': 'Bangladesh',
'population': 164689383,
'yearly_change': 1.01,
'net_change': 1643222,
'density_p_km2': 1265,
'land_area': 130170,
'migrants_net': -369501,
'fert_net': 2.1,
'med_age': 28,
'urban_pop': 39,
'world_share': 2.11,
}, {
'id': 9,
'country': 'Russia',
'population': 145934462,
'yearly_change': 0.04,
'net_change': 62206,
'density_p_km2': 9,
'land_area': 16376870,
'migrants_net': 182456,
'fert_net': 1.8,
'med_age': 40,
'urban_pop': 74,
'world_share': 1.87,
}, {
'id': 10,
'country': 'Mexico',
'population': 128932753,
'yearly_change': 1.06,
'net_change': 1357224,
'density_p_km2': 66,
'land_area': 1943950,
'migrants_net': -60000,
'fert_net': 2.1,
'med_age': 29,
'urban_pop': 84,
'world_share': 1.65,
},
];
return (
<div className='wrappChart'>
<AreaChart
width={500}
height={400}
data={data}
margin={{
top: 10, right: 30, left: 50, bottom: 0,
}}
>
<CartesianGrid strokeDasharray='3 3' />
<XAxis dataKey='country' />
<YAxis />
<Area type='monotone' dataKey='med_age' stackId='1' stroke='#8884d8' fill='#8884d8' />
<Area type='monotone' dataKey='med_age' stackId='1' stroke='#82ca9d' fill='#82ca9d' />
<Area type='monotone' dataKey='med_age' stackId='1' stroke='#ffc658' fill='#ffc658' />
<Tooltip />
</AreaChart>
</div>
);
}
Example #26
| 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 #27
| Source File: GraphTestingEffort.js From covid-19 with MIT License | 4 votes |
|
GraphTestingWidget1 = (props) => {
const [sourceData, setSourceData] = React.useState(null);
const useAreaChart = props.chart === "result";
React.useEffect(() => {
props.source.testingAsync()
.then(data => setSourceData(data));
}, [props.source])
if (!sourceData || sourceData.length === 0) {
return <div> Loading</div>;
}
let data = sourceData.sort(function (a, b) {
return a.date - b.date;
});
let testTotalArray = exportColumnFromDataSeries(data, "totalTestResults");
let testPostives = exportColumnFromDataSeries(data, "positive");
// negative field is not reliable, instead of relying on it, let's compute it instead.
// let testNegatives = exportColumnFromDataSeries(data, "negative");
let testNegatives = {};
for (let i in testTotalArray) {
testNegatives[i] = testTotalArray[i] - testPostives[i];
}
let total = makeDataSeriesFromTotal(testTotalArray, "total", "testsThatDay", "testsThatDay_avg");
let pos = makeDataSeriesFromTotal(testPostives, "postive", "positiveThatDay", "positiveThatDay_avg");
let neg = makeDataSeriesFromTotal(testNegatives, "negative", "negativeThatDay", "negativeThatDay_avg");
data = mergeDataSeries(data, total);
data = mergeDataSeries(data, pos);
data = mergeDataSeries(data, neg);
let total_tests = data.reduce((m, a) => { return a.total > m ? a.total : m }, 0);
let total_positives = data.reduce((m, a) => { return a.positive > m ? a.positive : m }, 0);
let total_negatives = data.reduce((m, a) => { return a.negative > m ? a.negative : m }, 0);
if (total_tests === 0) {
total_tests = data.reduce((m, a) => { return a.totalTestResults > m ? a.totalTestResults : m }, 0);
let testTotalArray = exportColumnFromDataSeries(data, "totalTestResults");
let total = makeDataSeriesFromTotal(testTotalArray, "totalTestResults", "testsThatDay", "testsThatDay_avg");
data = mergeDataSeries(data, total);
}
// If true, show area chart.
// If false, show line chart.
let chart = useAreaChart ?
<AreaChart
data={data}
margin={{ top: 5, right: 30, left: 5, bottom: 5 }}
>
<YAxis tickFormatter={formatYAxis} />
<XAxis dataKey="name" />
<CartesianGrid stroke="#d5d5d5" strokeDasharray="5 5" />
{/* <Line type="monotone" name="Total Tested" dataKey="total" stroke="#387908" yAxisId={0} strokeWidth={3} />
<Line type="monotone" name="Tested Positive" dataKey="positive" stroke="#ff7300" yAxisId={0} strokeWidth={3} /> */}
<Area stackId="1" type="monotone" name="Positive" dataKey="positiveThatDay" stroke="#ff7300" fill="#ff7300" yAxisId={0} strokeWidth={3} />
<Area stackId="1" type="monotone" name="Negative" dataKey="negativeThatDay" stroke="#00aeef" fill="#00aeef" yAxisId={0} strokeWidth={3} />
{/* <Area stackId="1" type="monotone" name="Pending" dataKey="pendingThatDay" stroke="#387908" fill="#387908" yAxisId={0} strokeWidth={3} /> */}
<Legend verticalAlign="top" />
<Tooltip content={<CustomTooltip />} />
</AreaChart>
:
<LineChart
data={data}
margin={{ top: 5, right: 30, left: 5, bottom: 5 }}
>
<YAxis tickFormatter={formatYAxis} />
<XAxis dataKey="name" />
<CartesianGrid stroke="#d5d5d5" strokeDasharray="5 5" />
{/* <Line type="monotone" name="Total" dataKey="total" stroke="#ff7300" yAxisId={0} strokeWidth={3} /> */}
<Line type="monotone" name="Daily" dataKey="testsThatDay" dot={{ r: 1 }} strokeDasharray="2 2" stroke="#387908" yAxisId={0} strokeWidth={1} />
<Line type="monotone" name="3d daily avg" dataKey="testsThatDay_avg" dot={{ r: 1 }} stroke="#387908" yAxisId={0} strokeWidth={2} />
<Line type="monotone" name="Positive" dataKey="positiveThatDay" dot={{ r: 1 }} strokeDasharray="2 2" stroke="#a3a3a3" yAxisId={0} strokeWidth={1} />
<Line type="monotone" name="3d daily avg" dataKey="positiveThatDay_avg" dot={{ r: 1 }} stroke="#a3a3a3" yAxisId={0} strokeWidth={2} />
{/* <Line type="monotone" name="Negative" dataKey="negativeThatDay" stroke="#00aeef" yAxisId={0} strokeWidth={3} /> */}
<Legend verticalAlign="top" />
<Tooltip content={<CustomTooltip />} />
</LineChart>
return <div>
<Grid container alignItems="center" justify="space-between" spacing={1}>
<Grid item container xs={12} sm={12} md={6} alignItems="center" justify="flex-start" spacing={1}>
<Grid item>
<Typography variant="body2" noWrap>
{`Total: ${myShortNumber(total_tests)}
Pos.:${(total_positives / total_tests * 100).toFixed(0)}%
Neg.: ${(total_negatives / total_tests * 100).toFixed(0)}%
`}
</Typography>
</Grid>
</Grid>
</Grid>
<ResponsiveContainer height={300} >
{chart}
</ResponsiveContainer>
<Typography variant="body2" noWrap>
Data source: https://covidtracking.com/api/
</Typography>
</div>;
}
Example #28
| Source File: MemoryChart.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
function MemoryChart(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 formatTick = value => formatLabel(value, 0);
const formatMB = value => (value / 1000000).toFixed(0) + 'MB';
const TooltipContent = tooltipProps => {
if (tooltipProps && tooltipProps.payload && tooltipProps.payload.length > 0) {
const { used, cache, buffer, free } = tooltipProps.payload[0].payload;
const newPayload = [
{ name: 'Used', value: formatLabel(used, 2) },
{ name: 'Cache', value: formatLabel(cache, 2) },
{ name: 'Buffer', value: formatLabel(buffer, 2) },
{ name: 'Free', value: formatLabel(free, 2) },
];
return <DefaultTooltipContent
labelStyle={{ color: 'black', fontSize: 18, paddingBottom: 4 }}
payload={newPayload}
/>;
}
return <DefaultTooltipContent {...props} />;
};
return (
<div className={classes.root}>
<Typography className={classes.chartTitle}>
{memory.length > 0 && `Memory: ${memory[memory.length - 1].percent}%`}
</Typography>
<ResponsiveContainer width="100%" height={180} >
<AreaChart
data={memory}
margin={{ top: 0, right: 32, left: 10, bottom: 16 }}
stackOffset="expand"
>
<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>
<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>
<XAxis dataKey="name" />
<YAxis
type="number"
domain={[0, memory[0] ? memory[0].total : 0]}
tickFormatter={formatTick}
/>
<Tooltip
formatter={formatMB}
isAnimationActive={false}
content={<TooltipContent />}
/>
<Legend />
<Area
strokeWidth={2}
type="monotone"
dataKey="used"
fill={"url(#gradientGreen)"}
stroke={"url(#gradientGreen)"}
fillOpacity={0.8}
isAnimationActive={false}
/>
<Area
strokeWidth={2}
type="monotone"
dataKey="cache"
fill={"url(#gradientOrange)"}
stroke={"url(#gradientOrange)"}
fillOpacity={0.8}
isAnimationActive={false}
/>
<Area
strokeWidth={2}
type="monotone"
dataKey="buffer"
fill={"url(#gradientGrey)"}
stroke={"url(#gradientGrey)"}
fillOpacity={0.8}
isAnimationActive={false}
/>
</AreaChart>
</ResponsiveContainer>
</div>
);
}
Example #29
| Source File: Index.js From acy-dex-interface with MIT License | 4 votes |
|
Stats = (props) => {
const DEFAULT_GROUP_PERIOD = 86400
const [groupPeriod, setGroupPeriod] = useState(DEFAULT_GROUP_PERIOD)
const [fromValue, setFromValue] = useState()
const [toValue, setToValue] = useState()
const { mode } = props
const setDateRange = useCallback(range => {
setFromValue(new Date(Date.now() - range * 1000).toISOString().slice(0, 10))
setToValue(undefined)
}, [setFromValue, setToValue])
const from = fromValue ? +new Date(fromValue) / 1000 : undefined
const to = toValue ? +new Date(toValue) / 1000 : NOW
const params = { from, to, groupPeriod }
const [borrowRateData, borrowRateLoading] = useBorrowRateData(params)
const [volumeData, volumeLoading] = useVolumeData(params)
const [totalVolume] = useTotalVolumeFromServer()
const totalVolumeDelta = useMemo(() => {
if (!volumeData) {
return null
}
return volumeData[volumeData.length - 1].all
}, [volumeData])
const [volumeTest, volumeTestLoading] = useVolumesData(params)
const [feesData, feesLoading] = useFeesData(params)
const [totalFees, totalFeesDelta] = useMemo(() => {
if (!feesData) {
return []
}
const total = feesData[feesData.length - 1]?.cumulative
const delta = total - feesData[feesData.length - 2]?.cumulative
return [total, delta]
}, [feesData])
const [alpData, alpLoading] = useAlpData(params)
const [totalAum, totalAumDelta] = useMemo(() => {
if (!alpData) {
return []
}
const total = alpData[alpData.length - 1]?.aum
const delta = total - alpData[alpData.length - 2]?.aum
return [total, delta]
}, [alpData])
const [aumPerformanceData, aumPerformanceLoading] = useAumPerformanceData(params)
const [alpPerformanceData, alpPerformanceLoading] = useAlpPerformanceData(alpData, feesData, params)
const [alpPriceData, alpPriceDataLoading] = useAlpPriceData(alpData, feesData, params)
const [tradersData, tradersLoading] = useTradersData(params)
const [openInterest, openInterestDelta] = useMemo(() => {
if (!tradersData) {
return []
}
const total = tradersData.data[tradersData.data.length - 1]?.openInterest
const delta = total - tradersData.data[tradersData.data.length - 2]?.openInterest
return [total, delta]
}, [tradersData])
const [swapSources, swapSourcesLoading] = useSwapSources(params)
const swapSourcesKeys = Object.keys((swapSources || []).reduce((memo, el) => {
Object.keys(el).forEach(key => {
if (key === 'all' || key === 'timestamp') return
memo[key] = true
})
return memo
}, {}))
const [usersData, usersLoading] = useUsersData(params)
const [totalUsers, totalUsersDelta] = useMemo(() => {
if (!usersData) {
return [null, null]
}
const total = usersData[usersData.length - 1]?.uniqueCountCumulative
const prevTotal = usersData[usersData.length - 2]?.uniqueCountCumulative
const delta = total && prevTotal ? total - prevTotal : null
return [
total,
delta
]
}, [usersData])
const [lastSubgraphBlock] = useLastSubgraphBlock()
const [lastBlock] = useLastBlock()
const isObsolete = lastSubgraphBlock && lastBlock && lastBlock.timestamp - lastSubgraphBlock.timestamp > 3600
const [isExperiment, setIsExperiment] = useState(false)
useEffect(() => {
setIsExperiment(window.localStorage.getItem('experiment'))
}, [setIsExperiment])
const showForm = false
const [selectedIndexLine, setselectedIndexLine] = useState(0);
const [selectedDataLine, setselectedDataLine] = useState(0);
const [volumeFeeIndex, setVolumeFeeIndex] = useState(0);
const onLineGraphHover = (newData, newIndex) => {
if (volumeFeeIndex != newIndex) {
}
};
const history = useHistory()
return (
<div className='container'>
<div className="Home">
{/* <h1>Analytics / Arbitrum</h1> */}
{lastSubgraphBlock && lastBlock &&
<p className={cx('page-description', { warning: isObsolete })} style={{ marginTop: '-1rem' }}>
{isObsolete && "Data is obsolete. "}
Updated {moment(lastSubgraphBlock.timestamp * 1000).fromNow()}
at block <a target="_blank" href={`https://arbiscan.io/block/${lastSubgraphBlock.number}`}>{lastSubgraphBlock.number}</a>
</p>
}
<div className={`${styles.colItem}`}>
<a
className={`${styles.colItem} ${styles.optionTab}`}
onClick={() => {
history.push('/statistics/market')
}}
>
Market
</a>
<a className={`${styles.colItem} ${styles.optionTabSelected}`}>Future</a>
<a
className={`${styles.colItem} ${styles.optionTab}`}
onClick={() => {
history.push('/statistics/stablecoin')
}}
>
StableCoin
</a>
</div>
{showForm &&
<div className="form">
<p>
<label>Period</label>
<input type="date" value={fromValue} onChange={evt => setFromValue(evt.target.value)} />
—
<input type="date" value={toValue} onChange={evt => setToValue(evt.target.value)} />
<button onClick={evt => setDateRange(86400 * 29)}>30 days</button>
<button onClick={evt => setDateRange(86400 * 6)}>7 days</button>
</p>
</div>
}
<div className="chart-grid">
<div className="chart-cell stats">
{totalVolume ? <>
<div className="total-stat-label">Total Volume</div>
<div className="total-stat-value">
{formatNumber(totalVolume, { currency: true })}
{totalVolumeDelta &&
<span className="total-stat-delta plus" title="Change since previous day">+{formatNumber(totalVolumeDelta, { currency: true, compact: true })}</span>
}
</div>
</> : <RiLoader5Fill size="3em" className="loader" />}
</div>
<div className="chart-cell stats">
{totalFees ? <>
<div className="total-stat-label">Total Fees</div>
<div className="total-stat-value">
{formatNumber(totalFees, { currency: true })}
<span className="total-stat-delta plus" title="Change since previous day">+{formatNumber(totalFeesDelta, { currency: true, compact: true })}</span>
</div>
</> : <RiLoader5Fill size="3em" className="loader" />}
</div>
<div className="chart-cell stats">
{totalAum ? <>
<div className="total-stat-label">ALP Pool</div>
<div className="total-stat-value">
{formatNumber(totalAum, { currency: true })}
<span className={cx("total-stat-delta", (totalAumDelta > 0 ? 'plus' : 'minus'))} title="Change since previous day">{totalAumDelta > 0 ? '+' : ''}{formatNumber(totalAumDelta, { currency: true, compact: true })}</span>
</div>
</> : <RiLoader5Fill size="3em" className="loader" />}
</div>
<div className="chart-cell stats">
{totalUsers ? <>
<div className="total-stat-label">Total Users</div>
<div className="total-stat-value">
{formatNumber(totalUsers)}
<span className="total-stat-delta plus" title="Change since previous day">+{formatNumber(totalUsersDelta)}</span>
</div>
</> : <RiLoader5Fill size="3em" className="loader" />}
</div>
<div className="chart-cell stats">
{openInterest ? <>
<div className="total-stat-label">Open Interest</div>
<div className="total-stat-value">
{formatNumber(openInterest, { currency: true })}
<span className={cx("total-stat-delta", (openInterestDelta > 0 ? 'plus' : 'minus'))} title="Change since previous day">
{openInterestDelta > 0 ? '+' : ''}{formatNumber(openInterestDelta, { currency: true, compact: true })}
</span>
</div>
</> : <RiLoader5Fill size="3em" className="loader" />}
</div>
<div className="chart-cell">
<VolumeFeesChart
data={volumeData}
loading={volumeLoading}
title="VOLUME 24H"
onHover={onLineGraphHover}
/>
{/* <VolumeChart
data={volumeData}
loading={volumeLoading}
chartHeight={CHART_HEIGHT}
yaxisWidth={YAXIS_WIDTH}
xaxisTickFormatter={tooltipLabelFormatter}
yaxisTickFormatter={yaxisFormatter}
tooltipLabelFormatter={tooltipLabelFormatter}
tooltipFormatter={tooltipFormatter}
/> */}
</div>
<div className="chart-cell">
<VolumeFeesChart
data={feesData}
loading={feesLoading}
title="Fee"
onHover={onLineGraphHover}
/>
{/* <FeesChart
data={feesData?feesData.slice(0,10):feesData}
loading={feesLoading}
chartHeight={CHART_HEIGHT}
yaxisWidth={YAXIS_WIDTH}
xaxisTickFormatter={tooltipLabelFormatter}
yaxisTickFormatter={yaxisFormatter}
tooltipLabelFormatter={tooltipLabelFormatter}
tooltipFormatter={tooltipFormatter}
/> */}
</div>
<div className="chart-cell">
<ChartWrapper title="AUM & Alp Supply" loading={alpLoading} data={alpData} csvFields={[{ key: 'aum' }, { key: 'alpSupply' }]}>
<ResponsiveContainer width="100%" height={CHART_HEIGHT}>
<LineChart data={alpData} syncId="syncAlp">
<CartesianGrid strokeDasharray="3 3" stroke='#333333' />
<XAxis dataKey="timestamp" tickFormatter={tooltipLabelFormatter} minTickGap={30} />
<YAxis dataKey="aum" tickFormatter={yaxisFormatter} width={YAXIS_WIDTH} />
<Tooltip
formatter={tooltipFormatterNumber}
labelFormatter={tooltipLabelFormatter}
contentStyle={{ textAlign: 'left' }}
/>
<Legend />
<Line isAnimationActive={false} type="monotone" strokeWidth={2} unit="$" dot={false} dataKey="aum" stackId="a" name="AUM" stroke={COLORS[0]} />
<Line isAnimationActive={false} type="monotone" strokeWidth={2} dot={false} dataKey="alpSupply" stackId="a" name="Alp Supply" stroke={COLORS[1]} />
</LineChart>
</ResponsiveContainer>
</ChartWrapper>
</div>
<div className="chart-cell">
<ChartWrapper
title="Alp Price Comparison"
loading={alpLoading}
data={alpPriceData}
csvFields={[{ key: 'syntheticPrice' }, { key: 'alpPrice' }, { key: 'alpPlusFees' }, { key: 'lpBtcPrice' }, { key: 'lpEthPrice' }]}
>
<ResponsiveContainer width="100%" height={CHART_HEIGHT}>
<LineChart data={alpPriceData} syncId="syncAlp">
<CartesianGrid strokeDasharray="3 3" stroke='#333333' />
<XAxis dataKey="timestamp" tickFormatter={tooltipLabelFormatter} minTickGap={30} />
<YAxis dataKey="performanceSyntheticCollectedFees" domain={[60, 210]} unit="%" tickFormatter={yaxisFormatterNumber} width={YAXIS_WIDTH} />
<YAxis dataKey="alpPrice" domain={[0.4, 1.7]} orientation="right" yAxisId="right" tickFormatter={yaxisFormatterNumber} width={YAXIS_WIDTH} />
<Tooltip
formatter={tooltipFormatterNumber}
labelFormatter={tooltipLabelFormatter}
contentStyle={{ textAlign: 'left' }}
/>
<Legend />
{/* <Line dot={false} isAnimationActive={false} type="monotone" unit="%" strokeWidth={2} dataKey="performanceLpBtcCollectedFees" name="% LP BTC-USDC (w/ fees)" stroke={COLORS[2]} />
<Line dot={false} isAnimationActive={false} type="monotone" unit="%" strokeWidth={2} dataKey="performanceLpEthCollectedFees" name="% LP ETH-USDC (w/ fees)" stroke={COLORS[4]} />
<Line dot={false} isAnimationActive={false} type="monotone" unit="%" strokeWidth={2} dataKey="performanceSyntheticCollectedFees" name="% Index (w/ fees)" stroke={COLORS[0]} /> */}
{/* <Line isAnimationActive={false} type="monotone" unit="$" strokeWidth={1} yAxisId="right" dot={false} dataKey="syntheticPrice" name="Index Price" stroke={COLORS[2]} /> */}
<Line isAnimationActive={false} type="monotone" unit="$" strokeWidth={1} yAxisId="right" dot={false} dataKey="alpPrice" name="Alp Price" stroke={COLORS[1]} strokeWidth={1} />
<Line isAnimationActive={false} type="monotone" unit="$" strokeWidth={1} yAxisId="right" dot={false} dataKey="alpPlusFees" name="Alp w/ fees" stroke={COLORS[3]} strokeWidth={1} />
{/* <Line isAnimationActive={false} type="monotone" unit="$" strokeWidth={1} yAxisId="right" dot={false} dataKey="lpBtcPrice" name="LP BTC-USDC" stroke={COLORS[2]} />
<Line isAnimationActive={false} type="monotone" unit="$" strokeWidth={1} yAxisId="right" dot={false} dataKey="lpEthPrice" name="LP ETH-USDC" stroke={COLORS[4]} /> */}
</LineChart>
</ResponsiveContainer>
<div className="chart-description">
<p>
<span style={{ color: COLORS[3] }}>Alp with fees</span> is based on ALP share of fees received and excluding esGMX rewards<br />
{/* <span style={{ color: COLORS[0] }}>% of Index (with fees)</span> is Alp with fees / Index Price * 100<br />
<span style={{ color: COLORS[4] }}>% of LP ETH-USDC (with fees)</span> is Alp Price with fees / LP ETH-USDC * 100<br />
<span style={{ color: COLORS[2] }}>Index Price</span> is 25% BTC, 25% ETH, 50% USDC */}
</p>
</div>
</ChartWrapper>
</div>
{isExperiment && <div className="chart-cell experiment">
<ChartWrapper title="Performance vs. Index" loading={alpLoading}>
<ResponsiveContainer width="100%" height={CHART_HEIGHT}>
<LineChart data={alpPerformanceData} syncId="syncAlp">
<CartesianGrid strokeDasharray="3 3" stroke='#333333' />
<XAxis dataKey="timestamp" tickFormatter={tooltipLabelFormatter} minTickGap={30} />
<YAxis dataKey="performanceSyntheticCollectedFees" domain={[80, 120]} unit="%" tickFormatter={yaxisFormatterNumber} width={YAXIS_WIDTH} />
<Tooltip
formatter={tooltipFormatterNumber}
labelFormatter={tooltipLabelFormatter}
contentStyle={{ textAlign: 'left' }}
/>
<Legend />
<Line isAnimationActive={false} dot={false} type="monotone" unit="%" strokeWidth={2} dataKey="performanceSyntheticCollectedFees" name="Collected Fees" stroke={COLORS[0]} />
<Line isAnimationActive={false} dot={false} type="monotone" unit="%" strokeWidth={2} dataKey="performanceSyntheticDistributedUsd" name="Distributed Usd" stroke={COLORS[1]} />
<Line isAnimationActive={false} dot={false} type="monotone" unit="%" strokeWidth={2} dataKey="performanceSyntheticDistributedEth" name="Distributed Eth" stroke={COLORS[2]} />
<Line isAnimationActive={false} dot={false} type="monotone" unit="%" strokeWidth={2} dataKey="performanceSynthetic" name="No Fees" stroke={COLORS[3]} />
</LineChart>
</ResponsiveContainer>
</ChartWrapper>
</div>}
{isExperiment && <div className="chart-cell experiment">
<ChartWrapper title="Performance vs. ETH LP" loading={alpLoading}>
<ResponsiveContainer width="100%" height={CHART_HEIGHT}>
<LineChart data={alpPerformanceData} syncId="syncAlp">
<CartesianGrid strokeDasharray="3 3" stroke='#333333' />
<XAxis dataKey="timestamp" tickFormatter={tooltipLabelFormatter} minTickGap={30} />
<YAxis dataKey="performanceLpEthCollectedFees" domain={[80, 120]} unit="%" tickFormatter={yaxisFormatterNumber} width={YAXIS_WIDTH} />
<Tooltip
formatter={tooltipFormatterNumber}
labelFormatter={tooltipLabelFormatter}
contentStyle={{ textAlign: 'left' }}
/>
<Legend />
<Line isAnimationActive={false} dot={false} type="monotone" unit="%" strokeWidth={2} dataKey="performanceLpEthCollectedFees" name="Collected Fees" stroke={COLORS[0]} />
<Line isAnimationActive={false} dot={false} type="monotone" unit="%" strokeWidth={2} dataKey="performanceLpEthDistributedUsd" name="Distributed Usd" stroke={COLORS[1]} />
<Line isAnimationActive={false} dot={false} type="monotone" unit="%" strokeWidth={2} dataKey="performanceLpEthDistributedEth" name="Distributed Eth" stroke={COLORS[2]} />
<Line isAnimationActive={false} dot={false} type="monotone" unit="%" strokeWidth={2} dataKey="performanceLpEth" name="No Fees" stroke={COLORS[3]} />
</LineChart>
</ResponsiveContainer>
</ChartWrapper>
</div>}
<div className="chart-cell">
<ChartWrapper
title="Traders Net PnL"
loading={tradersLoading}
data={tradersData?.data}
csvFields={[{ key: 'pnl', name: 'Net PnL' }, { key: 'pnlCumulative', name: 'Cumulative PnL' }]}
>
<ResponsiveContainer width="100%" syncId="tradersId" height={CHART_HEIGHT}>
<ComposedChart data={tradersData?.data}>
<CartesianGrid strokeDasharray="3 3" stroke='#333333' />
<XAxis dataKey="timestamp" tickFormatter={tooltipLabelFormatter} minTickGap={30} />
<YAxis domain={[-tradersData?.stats.maxAbsOfPnlAndCumulativePnl * 1.05, tradersData?.stats.maxAbsOfPnlAndCumulativePnl * 1.05]} tickFormatter={yaxisFormatter} width={YAXIS_WIDTH} />
<Tooltip
formatter={tooltipFormatter}
labelFormatter={tooltipLabelFormatter}
contentStyle={{ textAlign: 'left' }}
/>
<Legend />
<Bar type="monotone" fill={mode == "dark" ? "#FFFFFF" : "#000000"} dot={false} dataKey="pnl" name="Net PnL">
{(tradersData?.data || []).map((item, i) => {
return <Cell key={`cell-${i}`} fill={item.pnl > 0 ? '#22c761' : '#f93333'} />
})}
</Bar>
<Line type="monotone" strokeWidth={2} stroke={COLORS[4]} dataKey="pnlCumulative" name="Cumulative PnL" />
</ComposedChart>
</ResponsiveContainer>
<div className="chart-description">
<p>Considers settled (closed) positions</p>
<p>Fees are not factored into PnL</p>
</div>
</ChartWrapper>
</div>
<div className="chart-cell">
<ChartWrapper
title="Traders Profit vs. Loss"
loading={tradersLoading}
data={tradersData?.data}
csvFields={[{ key: 'profit' }, { key: 'loss' }, { key: 'profitCumulative' }, { key: 'lossCumulative' }]}
>
<ResponsiveContainer width="100%" syncId="tradersId" height={CHART_HEIGHT}>
<ComposedChart data={tradersData?.data} barGap={0}>
<CartesianGrid strokeDasharray="3 3" stroke='#333333' />
<XAxis dataKey="timestamp" tickFormatter={tooltipLabelFormatter} minTickGap={30} />
<YAxis domain={[-tradersData?.stats.maxProfitLoss * 1.05, tradersData?.stats.maxProfitLoss * 1.05]} tickFormatter={yaxisFormatter} width={YAXIS_WIDTH} />
<YAxis domain={[-tradersData?.stats.maxCumulativeProfitLoss * 1.1, tradersData?.stats.maxCumulativeProfitLoss * 1.1]} orientation="right" yAxisId="right" tickFormatter={yaxisFormatter} width={YAXIS_WIDTH} />
<Tooltip
formatter={tooltipFormatter}
labelFormatter={tooltipLabelFormatter}
contentStyle={{ textAlign: 'left' }}
/>
<Legend />
<Area yAxisId="right" type="monotone" stroke={0} fill="#22c761" fillOpacity="0.4" dataKey="profitCumulative" name="Cumulative Profit" />
<Area yAxisId="right" type="monotone" stroke={0} fill="#f93333" fillOpacity="0.4" dataKey="lossCumulative" name="Cumulative Loss" />
<Bar type="monotone" fill="#22c761" dot={false} dataKey="profit" name="Profit" />
<Bar type="monotone" fill="#f93333" dot={false} dataKey="loss" name="Loss" />
</ComposedChart>
</ResponsiveContainer>
<div className="chart-description">
<p>Considers settled (closed) positions</p>
<p>Fees are not factored into PnL</p>
</div>
</ChartWrapper>
</div>
<div className="chart-cell">
<GenericChart
loading={borrowRateLoading}
title="Borrowing Rate Annualized"
data={borrowRateData}
yaxisDataKey="ETH"
yaxisTickFormatter={yaxisFormatterPercent}
tooltipFormatter={tooltipFormatterPercent}
items={[{ key: 'ETH' }, { key: 'BTC' }, { key: 'USDC' }, { key: 'USDT' }, { key: 'MATIC' }]}
type="Line"
yaxisDomain={[0, 90 /* ~87% is a maximum yearly borrow rate */]}
isCoinChart={true}
/>
</div>
<div className="chart-cell">
<GenericChart
loading={tradersLoading}
title="Open Interest"
data={tradersData?.data.map(item => ({ all: item.openInterest, ...item }))}
yaxisDataKey="openInterest"
items={[{ key: 'shortOpenInterest', name: 'Short', color: "#f93333" }, { key: 'longOpenInterest', name: 'Long', color: '#22c761' }]}
type="Bar"
/>
</div>
<div className="chart-cell">
<GenericChart
syncId="syncAlp"
loading={aumPerformanceLoading}
title="AUM Performance Annualized"
data={aumPerformanceData}
yaxisDataKey="apr"
yaxisTickFormatter={yaxisFormatterPercent}
tooltipFormatter={tooltipFormatterPercent}
items={[{ key: 'apr', name: 'APR', color: COLORS[0] }]}
description="Formula = Daily Fees / ALP Pool * 365 days * 100"
type="Composed"
/>
</div>
<div className="chart-cell">
<GenericChart
syncId="syncAlp"
loading={aumPerformanceLoading}
title="AUM Daily Usage"
data={aumPerformanceData}
yaxisDataKey="usage"
yaxisTickFormatter={yaxisFormatterPercent}
tooltipFormatter={tooltipFormatterPercent}
items={[{ key: 'usage', name: 'Daily Usage', color: COLORS[4] }]}
description="Formula = Daily Volume / ALP Pool * 100"
type="Composed"
/>
</div>
<div className="chart-cell">
<GenericChart
syncId="syncAlp"
loading={usersLoading}
title="Unique Users"
data={usersData}
yaxisDataKey="uniqueSum"
yaxisTickFormatter={yaxisFormatterNumber}
tooltipFormatter={tooltipFormatterNumber}
tooltipLabelFormatter={tooltipLabelFormatterUnits}
items={[
{ key: 'uniqueSwapCount', name: 'Swaps' },
{ key: 'uniqueMarginCount', name: 'Margin trading' },
{ key: 'uniqueMintBurnCount', name: 'Mint & Burn ALP' }
]}
type="Composed"
/>
</div>
<div className="chart-cell">
<GenericChart
syncId="syncAlp"
loading={usersLoading}
title="New Users"
data={usersData?.map(item => ({ ...item, all: item.newCount }))}
yaxisDataKey="newCount"
rightYaxisDataKey="uniqueCountCumulative"
yaxisTickFormatter={yaxisFormatterNumber}
tooltipFormatter={tooltipFormatterNumber}
tooltipLabelFormatter={tooltipLabelFormatterUnits}
items={[
{ key: 'newSwapCount', name: 'Swap' },
{ key: 'newMarginCount', name: 'Margin trading' },
{ key: 'newMintBurnCount', name: 'Mint & Burn' },
{ key: 'uniqueCountCumulative', name: 'Cumulative', type: 'Line', yAxisId: 'right', strokeWidth: 2, color: COLORS[4] }
]}
type="Composed"
/>
</div>
<div className="chart-cell">
<GenericChart
syncId="syncAlp"
loading={usersLoading}
title="New vs. Existing Users"
data={usersData?.map(item => ({ ...item, all: item.uniqueCount }))}
yaxisDataKey="newCount"
rightYaxisDataKey="oldPercent"
yaxisTickFormatter={yaxisFormatterNumber}
tooltipFormatter={tooltipFormatterNumber}
tooltipLabelFormatter={tooltipLabelFormatterUnits}
items={[
{ key: 'newCount', name: 'New' },
{ key: 'oldCount', name: 'Existing' },
{ key: 'oldPercent', name: 'Existing %', yAxisId: 'right', type: 'Line', strokeWidth: 2, color: COLORS[4], unit: '%' }
]}
type="Composed"
/>
</div>
<div className="chart-cell">
<GenericChart
syncId="syncAlp"
loading={usersLoading}
title="User Actions"
data={(usersData || []).map(item => ({ ...item, all: item.actionCount }))}
yaxisDataKey="actionCount"
yaxisTickFormatter={yaxisFormatterNumber}
tooltipFormatter={tooltipFormatterNumber}
tooltipLabelFormatter={tooltipLabelFormatterUnits}
items={[{ key: 'actionSwapCount', name: 'Swaps' }, { key: 'actionMarginCount', name: 'Margin trading' }, { key: 'actionMintBurnCount', name: 'Mint & Burn ALP' }]}
type="Composed"
/>
</div>
{/* <div className="chart-cell">
<GenericChart
loading={swapSourcesLoading}
title="Swap Sources"
data={swapSources}
items={swapSourcesKeys.map(key => ({ key }))}
/>
</div> */}
</div>
</div>
</div>
);
}
