components#ChartCard JavaScript Examples
The following examples show how to use
components#ChartCard.
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: Dashboard.jsx From crypto-manager with MIT License | 4 votes |
|
render() {
return (
<div>
{/* TODO: Make chart position static w.r.t other components */}
<Card className="doughnutCard">
<CardContent>
<Typography variant="title" component="h1">
Portfolio
</Typography>
</CardContent>
<Grid container>
{/* Left Side */}
<ItemGrid xs={12} sm={6}>
<div className="doughnutChart">
<DoughnutChart />
</div>
</ItemGrid>
{/* Right Side */}
<ItemGrid xs={12} sm={6}>
<div className="dataOverview">
<Grid container>
{/* Overall score */}
<Grid container item xs={12} className="avgScoreGrid">
<div className="avgScore">
<div>
Avgerage Sentiment:
</div>
<div className={this.state.sentiment === "Bearish" ? "bearishScore" : "bullishScore"}>
{this.state.sentiment}
</div>
</div>
</Grid>
{/* Technical Analysis */}
<Grid container item xs={12}>
<ChartCard
chart={
<ChartistGraph
className="ct-chart"
data={emailsSubscriptionChart.data}
type="Bar"
options={emailsSubscriptionChart.options}
responsiveOptions={emailsSubscriptionChart.responsiveOptions}
listener={emailsSubscriptionChart.animation}
/>
}
chartColor="orange"
title="Sentiment Analysis"
text="Last Year Performance"
statIcon={AccessTime}
statText="Updated 2 minutes ago"
/>
</Grid>
{/* Sentimental Analysis */}
<Grid container item xs={12}>
<ChartCard
chart={
<ChartistGraph
className="ct-chart"
data={completedTasksChart.data}
type="Line"
options={completedTasksChart.options}
listener={completedTasksChart.animation}
/>
}
chartColor="red"
title="Technical Analysis"
text="Last Year Performance"
statIcon={AccessTime}
statText="Updated 2 minutes ago"
/>
</Grid>
</Grid>
</div>
</ItemGrid>
</Grid>
</Card>
<Grid container>
<ItemGrid xs={12} sm={6} md={3}>
<StatsCard
icon={ContentCopy}
iconColor="orange"
title="Crypto Currencies"
description="1600/2000"
// small="GB"
statIcon={LocalOffer}
statText="Tracked from Coindesk"
// statIconColor="danger"
// statLink={{ text: "Get More Space...", href: "#pablo" }}
/>
</ItemGrid>
<ItemGrid xs={12} sm={6} md={3}>
<StatsCard
icon={Store}
iconColor="green"
title="Active ICO's"
description="3"
statIcon={DateRange}
statText="Last 24 Hours"
/>
</ItemGrid>
<ItemGrid xs={12} sm={6} md={3}>
<StatsCard
icon={Store}
iconColor="blue"
title="Upcoming ICO's"
description="5"
statIcon={DateRange}
statText="Last 24 Hours"
/>
</ItemGrid>
<ItemGrid xs={12} sm={6} md={3}>
<StatsCard
icon={Store}
iconColor="red"
title="Ended ICO's"
description="14"
statIcon={DateRange}
statText="Last 24 Hours"
/>
</ItemGrid>
<ItemGrid xs={12} sm={6} md={3}>
<StatsCard
icon={InfoOutline}
iconColor="red"
title="Current P/L"
description="+$7.5K"
statIcon={LocalOffer}
statText="Tracked from Wallet"
/>
</ItemGrid>
</Grid>
{/* <Grid container>
<ItemGrid xs={12} sm={12} md={4}>
<ChartCard
chart={
<ChartistGraph
className="ct-chart"
data={dailySalesChart.data}
type="Line"
options={dailySalesChart.options}
listener={dailySalesChart.animation}
/>
}
chartColor="green"
title="Live Chart"
text={
<span>
<span className={this.props.classes.successText}>
<ArrowUpward
className={this.props.classes.upArrowCardCategory}
/>{" "}
55%
</span>{" "}
increase in crypto value.
</span>
}
statIcon={AccessTime}
statText="Updated 4 minutes ago"
/>
</ItemGrid>
</Grid> */}
</div>
);
}
Example #2
| Source File: Recommendations.jsx From crypto-manager with MIT License | 4 votes |
|
render() {
const { shouldOpen, value, suggestions, sentiment, currName, currTick, close, open, high, low, newsAvailable } = this.state;
const inputProps = {
placeholder: "Search",
value,
onChange: this.onChange,
// TODO: Need to figure out responsive width of search bar
style: { width: '400%',
height: '200%',
minWidth: '100%'}
};
return (
<div className="local-bootstrap">
<Card>
<div className="mainRecommendationsContainer">
<CardContent>
<Typography variant="h1" component="h1">Investment Recommendations</Typography>
</CardContent>
<CardContent>
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" id="basic-addon1">Load Quote</span>
</div>
<div aria-describedby="basic-addon1">
<div className="recommendationsSearchBar">
<Autosuggest
suggestions={suggestions}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
getSuggestionValue={this.getSuggestionValue}
renderSuggestion={this.renderSuggestion}
inputProps={inputProps}
wrapperStyle={{ width: 1000}} />
</div>
</div>
</div>
</CardContent>
{
shouldOpen ?
<div>
<CardContent>
<Grid container>
<ItemGrid xs={12} sm={6} md={6}>
<Typography variant="h3" component="h3">Latest Quote</Typography>
<Card>
<div className="latestQuoteCard">
<CardContent>
<div className="recommendationHeader">
<Typography variant="h3" component="h3" style={{
fontWeight: 800,
color: '#000000'
}}>
{currTick + ": "}
</Typography>
<div className="cryptoName">
<Typography variant="h3" component="h3" style={{
fontWeight: 800,
color: '#000000'
}}>
{currName}
</Typography>
</div>
</div>
</CardContent>
<CardContent>
<div>
<div className="recommendationHeader">
<Typography variant="h5" component="h5" >
Close:
</Typography>
<div className="cryptoName1">
<Typography variant="h5" component="h5" style={{
fontWeight: 600
}}>
{close}
</Typography>
</div>
</div>
</div>
<div>
<div className="recommendationHeader">
<Typography variant="h5" component="h5" >
Open:
</Typography>
<div className="cryptoName2">
<Typography variant="h5" component="h5" style={{
fontWeight: 600
}}>
{open}
</Typography>
</div>
</div>
</div>
<div>
<div className="recommendationHeader">
<Typography variant="h5" component="h5" >
High:
</Typography>
<div className="cryptoName3">
<Typography variant="h5" component="h5" style={{
fontWeight: 600
}}>
{high}
</Typography>
</div>
</div>
</div>
<div>
<div className="recommendationHeader">
<Typography variant="h5" component="h5" >
Low:
</Typography>
<div className="cryptoName4">
<Typography variant="h5" component="h5" style={{
fontWeight: 600
}}>
{low}
</Typography>
</div>
</div>
</div>
</CardContent>
</div>
<Button
variant="contained"
style={{
borderRadius: 5,
backgroundColor: "#0080FF",
padding: "15px 30px",
fontSize: "18px",
color: '#ffffff',
width: '90%',
margin: '20px'
}}
>
Show Previous Quotes
</Button>
</Card>
{/* News */}
<div className="newsHeader">
<Typography variant="h3" component="h3" style={{
marginBottom: '20px'
}}>Latest News</Typography>
</div>
<Card>
{
newsAvailable ?
<div className="mainRecommendationsContainer">
<div>
{
this.state.rows.map(row => (
<div>
<Typography variant="h3" component="h3" style={{
marginTop: '10px'
}}>{row.title}</Typography>
<Typography variant="h6" component="h6" style={{
marginTop: '20px',
textTransform: 'capitalize'
}}>{row.desc}</Typography>
<a href={"https://" + row.link}>{row.link}</a>
<Typography style={{
marginBottom: 40
}}></Typography>
</div>
))
}
</div>
<Button
variant="contained"
style={{
borderRadius: 5,
backgroundColor: "#0080FF",
padding: "15px 30px",
fontSize: "18px",
color: '#ffffff',
width: '90%',
margin: '20px'
}}
>
Show All
</Button>
</div>
:
<Typography variant="h4" component="h4" style={{
padding: '30px'
}}> No news available at present</Typography>
}
</Card>
</ItemGrid>
<ItemGrid xs={12} sm={6} md={6}>
<div className="dataOverview">
<Grid container spacing={1}>
{/* Overall score */}
<Grid container item xs={12} spacing={3} className="avgScoreGrid">
<div className="avgScore">
<div>
Avgerage Sentiment:
</div>
<div className={this.state.sentiment === "Bearish" ? "bearishScore" : "bullishScore"}>
{sentiment}
</div>
</div>
</Grid>
{/* Technical Analysis */}
<Grid container item xs={12} spacing={3}>
<ChartCard
chart={
<ChartistGraph
className="ct-chart"
data={emailsSubscriptionChart.data}
type="Bar"
options={emailsSubscriptionChart.options}
responsiveOptions={emailsSubscriptionChart.responsiveOptions}
listener={emailsSubscriptionChart.animation}
/>
}
chartColor="orange"
title="Sentiment Analysis"
text="Last Year Performance"
statIcon={AccessTime}
statText="Updated 2 minutes ago"
/>
</Grid>
{/* Sentimental Analysis */}
<Grid container item xs={12} spacing={3}>
<ChartCard
chart={
<ChartistGraph
className="ct-chart"
data={completedTasksChart.data}
type="Line"
options={completedTasksChart.options}
listener={completedTasksChart.animation}
/>
}
chartColor="red"
title="Technical Analysis"
text="Last Year Performance"
statIcon={AccessTime}
statText="Updated 2 minutes ago"
/>
</Grid>
</Grid>
</div>
</ItemGrid>
</Grid>
</CardContent>
</div> :
<div className="noActivity">
</div>
}
</div>
</Card>
</div>
)
}
