Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
300 lines (269 sloc) 15.2 KB
import React from "react";
import {Card, CardHeader, CardBody, CardTitle, CardFooter, Row, Col} from "reactstrap";
import Component from "react-component-component";
import Chart from "react-google-charts";
import {Helmet} from "react-helmet";
class Email extends React.Component {
render() {
return (
<>
<Helmet>
<title>The Art of Ad Tech - Email stats</title>
<meta property="og:title" content="The Art of Ad Tech - Email stats"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://dashboard.leocelis.com/admin/email"/>
<meta property="og:image"
content="http://blog.leocelis.com/wp-content/uploads/2018/11/2018-profile-pic-150x150.png"/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:creator" content="@leocelis"/>
<meta property="og:url" content="https://dashboard.leocelis.com/admin/email"/>
<meta property="og:title" content="The Art of Ad Tech - Email stats"/>
<meta property="og:image"
content="http://blog.leocelis.com/wp-content/uploads/2018/11/2018-profile-pic-150x150.png"/>
</Helmet>
<div className="content">
<Row>
<Col md="6">
<Card>
<CardHeader>
<CardTitle tag="h4">Subscribers by country</CardTitle>
</CardHeader>
<CardBody>
<Component
initialState={{dataLoadingStatus: 'loading', chartData: []}}
didMount={async function (component) {
const response = await fetch("https://api.leocelis.com/mailchimp/members/members_by_country")
const json = await response.json()
// headers
const data = []
data.push(['Country', 'Members'])
// add data
for (var i in json) {
var country = json[i].country;
var total = json[i].total;
data.push([country, total])
}
component.setState({
chartData: data,
dataLoadingStatus: 'ready',
})
}}
>
{component => {
return component.state.dataLoadingStatus === 'ready' ? (
<Chart
chartType="GeoChart"
mapsApiKey="AIzaSyAOdaOSr_qaa9ZQlTTyYsU9ZKJOwWjROQQ"
height={'350px'}
data={component.state.chartData}
/>
) : (
<div>Fetching data from API</div>
)
}}
</Component>
</CardBody>
<CardFooter>
Source: MailChimp API
</CardFooter>
</Card>
</Col>
<Col md="6">
<Card>
<CardHeader>
<CardTitle tag="h4">Open rate by country</CardTitle>
</CardHeader>
<CardBody>
<Component
initialState={{dataLoadingStatus: 'loading', chartData: []}}
didMount={async function (component) {
const response = await fetch("https://api.leocelis.com/mailchimp/members/open_rate_by_country")
const json = await response.json()
// headers
const data = []
data.push(['Country', 'Members'])
// add data
for (var i in json) {
var country = json[i].country;
var total = json[i].total;
data.push([country, total])
}
component.setState({
chartData: data,
dataLoadingStatus: 'ready',
})
}}
>
{component => {
return component.state.dataLoadingStatus === 'ready' ? (
<Chart
chartType="GeoChart"
mapsApiKey="AIzaSyAOdaOSr_qaa9ZQlTTyYsU9ZKJOwWjROQQ"
height={'350px'}
data={component.state.chartData}
/>
) : (
<div>Fetching data from API</div>
)
}}
</Component>
</CardBody>
<CardFooter>
Source: MailChimp API
</CardFooter>
</Card>
</Col>
<Col md="12">
<Card>
<CardHeader>
<CardTitle tag="h4">Top 5 posts</CardTitle>
</CardHeader>
<CardBody>
<Component
initialState={{dataLoadingStatus: 'loading', chartData: []}}
didMount={async function (component) {
const response = await fetch("https://api.leocelis.com/mailchimp/emailopens/5")
const json = await response.json()
const columns = [
{type: 'string', label: 'Post title'},
{type: 'number', label: 'Email opens'},
]
// Add data to the table
let rows = []
for (var i in json) {
var email_subject = json[i].email_subject;
var unique_opens = json[i].unique_opens;
//console.log(email_subject);
//console.log(unique_opens);
// add rows to the table
rows.push([email_subject, unique_opens])
}
component.setState({
chartData: [columns, ...rows],
dataLoadingStatus: 'ready',
})
}}
>
{component => {
return component.state.dataLoadingStatus === 'ready' ? (
<Chart
chartType="ColumnChart"
data={component.state.chartData}
/>
) : (
<div>Fetching data from API</div>
)
}}
</Component>
</CardBody>
<CardFooter>
Source: MailChimp API
</CardFooter>
</Card>
</Col>
<Col md="6">
<Card>
<CardHeader>
<CardTitle tag="h4">Top 10 posts by email opens</CardTitle>
</CardHeader>
<CardBody>
<Component
initialState={{dataLoadingStatus: 'loading', chartData: []}}
didMount={async function (component) {
// API call
const response = await fetch("https://api.leocelis.com/mailchimp/emailopens/10")
const json = await response.json()
// Columns
const columns = [
{type: 'string', label: 'Post title'},
{type: 'number', label: 'Email opens'},
]
// Add data to the table
let rows = []
for (var i in json) {
var email_subject = json[i].email_subject;
var unique_opens = json[i].unique_opens;
//console.log(email_subject);
//console.log(unique_opens);
// add rows to the table
rows.push([email_subject, unique_opens])
}
component.setState({
chartData: [columns, ...rows],
dataLoadingStatus: 'ready',
})
}}
>
{component => {
return component.state.dataLoadingStatus === 'ready' ? (
<center><Chart
chartType="Table"
data={component.state.chartData}
/></center>
) : (
<div>Fetching data from API</div>
)
}}
</Component> </CardBody>
<CardFooter>
Source: MailChimp API
</CardFooter>
</Card>
</Col>
<Col md="6">
<Card>
<CardHeader>
<CardTitle tag="h4">Top 10 posts by open rate</CardTitle>
</CardHeader>
<CardBody>
<Component
initialState={{dataLoadingStatus: 'loading', chartData: []}}
didMount={async function (component) {
// API call
const response = await fetch("https://api.leocelis.com/mailchimp/openrate/10")
const json = await response.json()
// Columns
const columns = [
{type: 'string', label: 'Post title'},
{type: 'number', label: 'Open rate'},
]
// Add data to the table
let rows = []
for (var i in json) {
var email_subject = json[i].email_subject;
var open_rate = json[i].open_rate;
//console.log(email_subject);
//console.log(unique_opens);
// add rows to the table
rows.push([email_subject, open_rate])
}
component.setState({
chartData: [columns, ...rows],
dataLoadingStatus: 'ready',
})
}}
>
{component => {
return component.state.dataLoadingStatus === 'ready' ? (
<center><Chart
chartType="Table"
data={component.state.chartData}
/></center>
) : (
<div>Fetching data from API</div>
)
}}
</Component> </CardBody>
<CardFooter>
Source: MailChimp API
</CardFooter>
</Card>
</Col>
</Row>
</div>
</>
)
;
}
}
export default Email;
You can’t perform that action at this time.