recharts#AreaChart JavaScript Examples
The following examples show how to use
recharts#AreaChart.
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: 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 #2
| 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 #3
| 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 #4
| 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 #5
| 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 #6
| 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 #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: 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 #9
| 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 #10
| 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 #11
| 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 #12
| 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 #13
| 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 #14
| 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 #15
| 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 #16
| 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 #17
| 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 #18
| 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 #19
| 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 #20
| 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 #21
| 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 #22
| Source File: Scoreboard.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout className="layout-style">
<div style={{ height: 375, width: "100%", backgroundColor: "rgba(0, 0, 0, 0.3)", border: "5px solid transparent", borderRadius: "20px", padding: "10px", margin: "10px" }}>
<ResponsiveContainer width="90%" height={350} debounce={200}>
<AreaChart height={350} data={this.state.graphData}
margin={{ top: 10, right: 15, left: 15, bottom: 15 }}>
<defs>
<linearGradient id="color1" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#791a1f" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f89f9a" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color2" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#7c4a15" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f8cf8d" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color3" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#7c5914" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f8df8b" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color4" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#536d13" stopOpacity={0.3} />
<stop offset="95%" stopColor="#e4f88b" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color5" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#306317" stopOpacity={0.3} />
<stop offset="95%" stopColor="#b2e58b" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color6" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#146262" stopOpacity={0.3} />
<stop offset="95%" stopColor="#84e2d8" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color7" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#164c7e" stopOpacity={0.3} />
<stop offset="95%" stopColor="#8dcff8" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color8" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#203175" stopOpacity={0.3} />
<stop offset="95%" stopColor="#a8c1f8" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color9" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#3e2069" stopOpacity={0.3} />
<stop offset="95%" stopColor="#cda8f0" stopOpacity={0.1} />
</linearGradient>
<linearGradient id="color10" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#75204f" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f8a8cc" stopOpacity={0.1} />
</linearGradient>
</defs>
<XAxis dataKey="Time">
<Label offset={-5} position="insideBottom" style={{ fill: 'rgba(207, 207, 207, 1)' }}>
Time
</Label>
</XAxis>
<YAxis >
<Label offset={-10} position='insideLeft' style={{ fill: 'rgba(207, 207, 207, 1)' }}>
Score
</Label>
</YAxis>
<CartesianGrid strokeDasharray="3 3" />
<Tooltip labelStyle={{ backgroundColor: "#1c2b3e" }} contentStyle={{ backgroundColor: "#1c2b3e" }} wrapperStyle={{ backgroundColor: "#1c2b3e" }} />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[0]} stroke="#d32029" fillOpacity={1} fill="url(#color1)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[1]} stroke="#d87a16" fillOpacity={1} fill="url(#color2)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[2]} stroke="#d89614" fillOpacity={1} fill="url(#color3)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[3]} stroke="#8bbb11" fillOpacity={1} fill="url(#color4)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[4]} stroke="#49aa19" fillOpacity={1} fill="url(#color5)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[5]} stroke="#13a8a8" fillOpacity={1} fill="url(#color6)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[6]} stroke="#177ddc" fillOpacity={1} fill="url(#color7)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[7]} stroke="#2b4acb" fillOpacity={1} fill="url(#color8)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[8]} stroke="#642ab5" fillOpacity={1} fill="url(#color9)" />
<Area isAnimationActive={false} type="monotone" dataKey={this.state.top10[9]} stroke="#cb2b83" fillOpacity={1} fill="url(#color10)" />
<Area isAnimationActive={false} type="monotone" dataKey="Hi" stroke="#8884d8" fillOpacity={1} fill="url(#colorPv)" />
</AreaChart>
</ResponsiveContainer>
{this.state.loadingGraph && (
<div style={{ position: "absolute", left: "55%", transform: "translate(-55%, 0%)", zIndex: 10 }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>
)}
</div>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
{this.state.liveUpdates ?
<div style={{ display: "flex", alignItems: "center", flexDirection: "row", justifyContent: "flex-end" }}><h4>Live Scoreboard </h4> <Ripple color="#a61d24" size={40} /></div> :
<div style={{ display: "flex", alignItems: "center", flexDirection: "row", justifyContent: "flex-end" }}><h4>Connecting Live Scoreboard </h4> <Ellipsis color="#177ddc" size={40} /></div>
}
<div style={{ display: "flex", alignContent: "center" }}>
<h1><ApartmentOutlined /> Category: </h1>
<Select loading={this.state.loadingGraph || this.state.loadingTable} defaultValue="none" style={{ width: "20ch", backgroundColor: "#1f1f1f", marginLeft: "1ch" }} onChange={(value) => { this.handleCategoryChange(value) }}>
{this.state.categoryListOptions}
</Select>
</div>
</div>
{!this.state.loadingTable && (
<div style={{ height: "70%", width: "100%", minWidth: "70vw" }}>
<Table style={{ marginTop: "2vh" }} dataSource={this.state.scores} pagination={{ pageSize: 20 }} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>There are no users created/There are no users in this category</h1>
</div>
)
}}>
<Column title="Position" dataIndex="position" key="position" />
<Column title="Username" dataIndex="username" key="username"
render={(text, row, index) => {
if (row.isTeam) {
return (
<Link to={"/Team/" + text}><a style={{ fontSize: "110%", fontWeight: 700, display: "flex", alignItems: "center" }}>
<Avatar.Group
maxCount={3}
maxStyle={{ marginRight: "1ch" }}
>
{row.members.map((member) => {
return (<Avatar src={"/static/profile/" + member + ".webp"} style={{ marginRight: "1ch" }} />)
})}
</Avatar.Group>
<span>{text} <TeamOutlined /></span>
</a>
</Link>);
}
else {
return <Link to={"/Profile/" + text}><a style={{ fontSize: "110%", fontWeight: 700 }}><Avatar src={"/static/profile/" + text + ".webp"} style={{ marginRight: "1ch" }} /><span>{text}</span></a></Link>;
}
}}
/>
<Column title="Score" dataIndex="score" key="score" />
<Column title="Last Solve" dataIndex="time" key="time" />
</Table>
</div>
)}
</Layout>
);
}
Example #23
| 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 #24
| 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 #25
| 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 #26
| Source File: CardChart.js From react-saas-template with MIT License | 4 votes |
|
function CardChart(props) {
const { color, data, title, classes, theme, height } = props;
const [anchorEl, setAnchorEl] = useState(null);
const [selectedOption, setSelectedOption] = useState("1 Month");
const handleClick = useCallback(
(event) => {
setAnchorEl(event.currentTarget);
},
[setAnchorEl]
);
const formatter = useCallback(
(value) => {
return [value, title];
},
[title]
);
const getSubtitle = useCallback(() => {
switch (selectedOption) {
case "1 Week":
return "Last week";
case "1 Month":
return "Last month";
case "6 Months":
return "Last 6 months";
default:
throw new Error("No branch selected in switch-statement");
}
}, [selectedOption]);
const processData = useCallback(() => {
let seconds;
switch (selectedOption) {
case "1 Week":
seconds = 60 * 60 * 24 * 7;
break;
case "1 Month":
seconds = 60 * 60 * 24 * 31;
break;
case "6 Months":
seconds = 60 * 60 * 24 * 31 * 6;
break;
default:
throw new Error("No branch selected in switch-statement");
}
const minSeconds = new Date() / 1000 - seconds;
const arr = [];
for (let i = 0; i < data.length; i += 1) {
if (minSeconds < data[i].timestamp) {
arr.unshift(data[i]);
}
}
return arr;
}, [data, selectedOption]);
const handleClose = useCallback(() => {
setAnchorEl(null);
}, [setAnchorEl]);
const selectOption = useCallback(
(selectedOption) => {
setSelectedOption(selectedOption);
handleClose();
},
[setSelectedOption, handleClose]
);
const isOpen = Boolean(anchorEl);
return (
<Card>
<Box pt={2} px={2} pb={4}>
<Box display="flex" justifyContent="space-between">
<div>
<Typography variant="subtitle1">{title}</Typography>
<Typography variant="body2" color="textSecondary">
{getSubtitle()}
</Typography>
</div>
<div>
<IconButton
aria-label="More"
aria-owns={isOpen ? "long-menu" : undefined}
aria-haspopup="true"
onClick={handleClick}
size="large">
<MoreVertIcon />
</IconButton>
<Menu
id="long-menu"
anchorEl={anchorEl}
open={isOpen}
onClose={handleClose}
PaperProps={{
style: {
maxHeight: itemHeight,
width: 200,
},
}}
disableScrollLock
>
{options.map((option) => (
<MenuItem
key={option}
selected={option === selectedOption}
onClick={() => {
selectOption(option);
}}
name={option}
>
{option}
</MenuItem>
))}
</Menu>
</div>
</Box>
</Box>
<CardContent>
<Box className={classes.cardContentInner} height={height}>
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={processData()} type="number">
<XAxis
dataKey="timestamp"
type="number"
domain={["dataMin", "dataMax"]}
hide
/>
<YAxis
domain={[calculateMin(data, "value", 0.05), "dataMax"]}
hide
/>
<Area
type="monotone"
dataKey="value"
stroke={color}
fill={color}
/>
<Tooltip
labelFormatter={labelFormatter}
formatter={formatter}
cursor={false}
contentStyle={{
border: "none",
padding: theme.spacing(1),
borderRadius: theme.shape.borderRadius,
boxShadow: theme.shadows[1],
}}
labelStyle={theme.typography.body1}
itemStyle={{
fontSize: theme.typography.body1.fontSize,
letterSpacing: theme.typography.body1.letterSpacing,
fontFamily: theme.typography.body1.fontFamily,
lineHeight: theme.typography.body1.lineHeight,
fontWeight: theme.typography.body1.fontWeight,
}}
/>
</AreaChart>
</ResponsiveContainer>
</Box>
</CardContent>
</Card>
);
}
Example #27
| Source File: index.js From spooky-info with GNU General Public License v3.0 | 4 votes |
|
UserChart = ({ account }) => {
const chartData = useUserLiquidityChart(account)
const [timeWindow, setTimeWindow] = useState(timeframeOptions.ALL_TIME)
let utcStartTime = getTimeframe(timeWindow)
const below600 = useMedia('(max-width: 600px)')
const above1600 = useMedia('(min-width: 1600px)')
const domain = [(dataMin) => (dataMin > utcStartTime ? dataMin : utcStartTime), 'dataMax']
const aspect = above1600 ? 60 / 12 : below600 ? 60 / 42 : 60 / 16
const [darkMode] = useDarkModeManager()
const textColor = darkMode ? 'white' : 'black'
return (
<ChartWrapper>
{below600 ? (
<RowBetween mb={40}>
<div />
<DropdownSelect options={timeframeOptions} active={timeWindow} setActive={setTimeWindow} color={'#ff007a'} />
</RowBetween>
) : (
<RowBetween mb={40}>
<AutoRow gap="10px">
<TYPE.main>Liquidity Value</TYPE.main>
</AutoRow>
<AutoRow justify="flex-end" gap="4px">
<OptionButton
active={timeWindow === timeframeOptions.MONTH}
onClick={() => setTimeWindow(timeframeOptions.MONTH)}
>
1M
</OptionButton>
<OptionButton
active={timeWindow === timeframeOptions.WEEK}
onClick={() => setTimeWindow(timeframeOptions.WEEK)}
>
1W
</OptionButton>
<OptionButton
active={timeWindow === timeframeOptions.ALL_TIME}
onClick={() => setTimeWindow(timeframeOptions.ALL_TIME)}
>
All
</OptionButton>
</AutoRow>
</RowBetween>
)}
{chartData ? (
<ResponsiveContainer aspect={aspect} style={{ height: 'inherit' }}>
<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={'#ff007a'} stopOpacity={0.35} />
<stop offset="95%" stopColor={'#ff007a'} stopOpacity={0} />
</linearGradient>
</defs>
<XAxis
tickLine={false}
axisLine={false}
interval="preserveEnd"
tickMargin={16}
minTickGap={0}
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={6}
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: '#ff007a',
color: 'black',
}}
wrapperStyle={{ top: -70, left: -10 }}
/>
<Area
key={'other'}
dataKey={'valueUSD'}
stackId="2"
strokeWidth={2}
dot={false}
type="monotone"
name={'Liquidity'}
yAxisId={0}
stroke={darken(0.12, '#ff007a')}
fill="url(#colorUv)"
/>
</AreaChart>
</ResponsiveContainer>
) : (
<LocalLoader />
)}
</ChartWrapper>
)
}
Example #28
| Source File: index.js From spooky-info 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.WEEK)
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 #29
| Source File: index.js From spooky-info 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.MONTH)
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>
)
}
