slate/scenes/SceneStats.js

652 lines
21 KiB
JavaScript

import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as Fixtures from "~/common/fixtures";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import { LineChart } from "~/vendor/react-chartkick";
import Section from "~/components/core/Section";
import ScenePage from "~/components/core/ScenePage";
const STYLES_ROW = css`
padding: 24px;
display: flex;
align-items: center;
justify-content: space-between;
`;
const STYLES_LEFT = css`
font-size: ${Constants.typescale.lvl2};
padding-right: 24px;
flex-shrink: 0;
`;
const STYLES_RIGHT = css`
font-family: ${Constants.font.semiBold};
font-size: ${Constants.typescale.lvl2};
color: ${Constants.system.brand};
min-width: 10%;
width: 100%;
padding-left: 24px;
`;
const STYLES_TEXT_CTA = css`
text-decoration: underline;
color: ${Constants.system.brand};
font-weight: 400;
cursor: pointer;
transition: 200ms ease all;
:hover {
color: ${Constants.system.green};
}
`;
const STYLES_GRAPH_OBJECT = css`
border-radius: 4px;
background: ${Constants.system.brand};
padding: 8px;
`;
const STYLES_GRAPH_ROW = css`
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 48px;
`;
const STYLES_GRAPH_ROW_LEFT = css`
width: 50%;
padding: 16px 8px 16px 24px;
`;
const STYLES_GRAPH_ROW_RIGHT = css`
width: 50%;
padding: 16px 24px 16px 8px;
`;
const STYLES_OPTION = css`
color: ${Constants.system.white};
margin-left: 24px;
font-family: ${Constants.font.semiBold};
font-size: 12px;
line-height: 0.2px;
text-transform: uppercase;
border-radius: 4px;
transition: 200ms ease all;
:hover {
cursor: pointer;
color: ${Constants.system.green};
}
`;
const STYLES_OPTIONS = css`
display: flex;
align-items: center;
justify-content: flex-end;
padding: 24px 12px 24px 12px;
`;
const STYLES_ITEM_GROUP = css`
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding: 0 8px 0 8px;
`;
const STYLES_ITEM = css`
margin-top: 24px;
display: inline-flex;
flex-direction: column;
min-width: 144px;
margin-right: 24px;
`;
const STYLES_FOCUS = css`
font-size: ${Constants.typescale.lvl1};
font-family: ${Constants.font.medium};
overflow-wrap: break-word;
width: 100%;
strong {
font-family: ${Constants.font.semiBold};
font-weight: 400;
}
`;
const STYLES_SUBTEXT = css`
margin-top: 8px;
font-size: 12px;
`;
export default class SceneStats extends React.Component {
state = {};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
return (
<ScenePage>
<System.H1>Stats</System.H1>
<Section
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
title="Wallet"
buttons={[
{
name: "Reset",
type: "ACTION",
value: "ACTION_RESET_STATS_WALLET",
},
{
name: "Export",
type: "DOWNLOAD",
value: "CSV_STATS_WALLET",
},
]}
>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>Total FIL Balance</div>
<div css={STYLES_RIGHT}>Value (FIL/ATTOFIL)</div>
</div>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>Lifetime FIL Balance</div>
<div css={STYLES_RIGHT}>Value (FIL/ATTOFIL)</div>
</div>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>FIL spent today</div>
<div css={STYLES_RIGHT}>Value (FIL/ATTOFIL)</div>
</div>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>Total FIL spent</div>
<div css={STYLES_RIGHT}>Value (FIL/ATTOFIL)</div>
</div>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>Total FIL received</div>
<div css={STYLES_RIGHT}>Value (FIL/ATTOFIL)</div>
</div>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>
Total wallet addresses{" "}
<strong
css={STYLES_TEXT_CTA}
onClick={() => this.props.onNavigateTo({ id: 2 })}
>
(view)
</strong>
</div>
<div css={STYLES_RIGHT}>Value (Number)</div>
</div>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>
Total payment channels{" "}
<strong
css={STYLES_TEXT_CTA}
onClick={() => this.props.onNavigateTo({ id: 3 })}
>
(view)
</strong>
</div>
<div css={STYLES_RIGHT}>Value (Number)</div>
</div>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>
Total FIL in payment channels{" "}
<strong
css={STYLES_TEXT_CTA}
onClick={() => this.props.onNavigateTo({ id: 3 })}
>
(view)
</strong>
</div>
<div css={STYLES_RIGHT}>Value (FIL/ATTOLFIL)</div>
</div>
</Section>
<Section
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
title="Node"
buttons={[
{
name: "Reset",
type: "ACTION",
value: "ACTION_RESET_STATS_NODE",
},
{
name: "Export",
type: "DOWNLOAD",
value: "CSV_STATS_NODE",
},
]}
>
<div css={STYLES_GRAPH_ROW}>
<div css={STYLES_GRAPH_ROW_LEFT}>
<div css={STYLES_GRAPH_OBJECT}>
<div css={STYLES_OPTIONS}>
<span css={STYLES_OPTION}>1 Day</span>
<span css={STYLES_OPTION}>1 Week</span>
<span css={STYLES_OPTION}>1 Month</span>
<span css={STYLES_OPTION}>6 Month</span>
<span css={STYLES_OPTION}>1 Year</span>
</div>
<LineChart
data={[
["2017-01-01 00:00:00 UTC", 1],
["2018-01-01 00:00:00 UTC", 5],
["2019-01-01 00:00:00 UTC", 25],
["2020-01-01 00:00:00 UTC", 200],
[new Date(), 400],
]}
library={{
backgroundColor: Constants.system.brand,
scales: {
xAxes: [
{
gridLines: { color: Constants.system.white },
ticks: {
fontColor: Constants.system.white,
},
},
],
yAxes: [
{
gridLines: { color: Constants.system.white },
display: false,
},
],
},
}}
dataset={{ lineTension: 0, pointRadius: 0, borderWidth: 1 }}
width="100%"
height="640px"
colors={[Constants.system.white]}
/>
</div>
<div css={STYLES_ITEM_GROUP}>
<div css={STYLES_ITEM}>
<div css={STYLES_FOCUS}>12 kb/s</div>
<div css={STYLES_SUBTEXT}>Current incoming</div>
</div>
<div css={STYLES_ITEM}>
<div css={STYLES_FOCUS}>14 kb/s</div>
<div css={STYLES_SUBTEXT}>Average incoming</div>
</div>
</div>
</div>
<div css={STYLES_GRAPH_ROW_RIGHT}>
<div css={STYLES_GRAPH_OBJECT}>
<div css={STYLES_OPTIONS}>
<span css={STYLES_OPTION}>1 Day</span>
<span css={STYLES_OPTION}>1 Week</span>
<span css={STYLES_OPTION}>1 Month</span>
<span css={STYLES_OPTION}>6 Month</span>
<span css={STYLES_OPTION}>1 Year</span>
</div>
<LineChart
data={[
["2017-01-01 00:00:00 UTC", 1],
["2018-01-01 00:00:00 UTC", 2],
["2019-01-01 00:00:00 UTC", 4],
["2020-01-01 00:00:00 UTC", 5],
[new Date(), 4],
]}
library={{
backgroundColor: Constants.system.brand,
scales: {
xAxes: [
{
gridLines: { color: Constants.system.white },
ticks: {
fontColor: Constants.system.white,
},
},
],
yAxes: [
{
display: false,
},
],
},
}}
dataset={{ lineTension: 0, pointRadius: 0, borderWidth: 1 }}
width="100%"
height="640px"
colors={[Constants.system.white]}
/>
</div>
<div css={STYLES_ITEM_GROUP}>
<div css={STYLES_ITEM}>
<div css={STYLES_FOCUS}>11 kb/s</div>
<div css={STYLES_SUBTEXT}>Current outgoing</div>
</div>
<div css={STYLES_ITEM}>
<div css={STYLES_FOCUS}>23 kb/s</div>
<div css={STYLES_SUBTEXT}>Average outgoing</div>
</div>
</div>
</div>
</div>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>Node start date</div>
<div css={STYLES_RIGHT}>March, 20th, 2020</div>
</div>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>
Favorite peers{" "}
<strong
css={STYLES_TEXT_CTA}
onClick={() => this.props.onNavigateTo({ id: 8 })}
>
(view)
</strong>
</div>
<div css={STYLES_RIGHT}>42 peers</div>
</div>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>Your location</div>
<div css={STYLES_RIGHT}>Norway</div>
</div>
</Section>
<Section
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
title="Data"
buttons={[
{
name: "Reset",
type: "ACTION",
value: "ACTION_RESET_STATS_DATA",
},
{
name: "Export",
type: "DOWNLOAD",
value: "CSV_STATS_DATA",
},
]}
>
<div css={STYLES_GRAPH_ROW}>
<div css={STYLES_GRAPH_ROW_LEFT}>
<div css={STYLES_GRAPH_OBJECT}>
<div css={STYLES_OPTIONS}>
<span css={STYLES_OPTION}>1 Day</span>
<span css={STYLES_OPTION}>1 Week</span>
<span css={STYLES_OPTION}>1 Month</span>
<span css={STYLES_OPTION}>6 Month</span>
<span css={STYLES_OPTION}>1 Year</span>
</div>
<LineChart
data={[
["2017-01-01 00:00:00 UTC", 1],
["2018-01-01 00:00:00 UTC", 5],
["2019-01-01 00:00:00 UTC", 25],
["2020-01-01 00:00:00 UTC", 200],
[new Date(), 400],
]}
library={{
backgroundColor: Constants.system.brand,
scales: {
xAxes: [
{
gridLines: { color: Constants.system.white },
ticks: {
fontColor: Constants.system.white,
},
},
],
yAxes: [
{
display: false,
},
],
},
}}
dataset={{ lineTension: 0, pointRadius: 0, borderWidth: 1 }}
width="100%"
height="640px"
colors={[Constants.system.white]}
/>
</div>
<div css={STYLES_ITEM_GROUP}>
<div css={STYLES_ITEM}>
<div css={STYLES_FOCUS}>55 items</div>
<div css={STYLES_SUBTEXT}>Currently stored</div>
</div>
<div css={STYLES_ITEM}>
<div css={STYLES_FOCUS}>5 items</div>
<div css={STYLES_SUBTEXT}>Stored per day</div>
</div>
<div css={STYLES_ITEM}>
<div css={STYLES_FOCUS}>200 items</div>
<div css={STYLES_SUBTEXT}>Total</div>
</div>
</div>
</div>
<div css={STYLES_GRAPH_ROW_RIGHT}>
<div css={STYLES_GRAPH_OBJECT}>
<div css={STYLES_OPTIONS}>
<span css={STYLES_OPTION}>1 Day</span>
<span css={STYLES_OPTION}>1 Week</span>
<span css={STYLES_OPTION}>1 Month</span>
<span css={STYLES_OPTION}>6 Month</span>
<span css={STYLES_OPTION}>1 Year</span>
</div>
<LineChart
data={[
["2017-01-01 00:00:00 UTC", 1],
["2018-01-01 00:00:00 UTC", 5],
["2019-01-01 00:00:00 UTC", 25],
["2020-01-01 00:00:00 UTC", 200],
[new Date(), 400],
]}
library={{
backgroundColor: Constants.system.brand,
scales: {
xAxes: [
{
gridLines: { color: Constants.system.white },
ticks: {
fontColor: Constants.system.white,
},
},
],
yAxes: [
{
display: false,
},
],
},
}}
dataset={{ lineTension: 0, pointRadius: 0, borderWidth: 1 }}
width="100%"
height="640px"
colors={[Constants.system.white]}
/>
</div>
<div css={STYLES_ITEM_GROUP}>
<div css={STYLES_ITEM}>
<div css={STYLES_FOCUS}>7 items</div>
<div css={STYLES_SUBTEXT}>Currently retrieved</div>
</div>
<div css={STYLES_ITEM}>
<div css={STYLES_FOCUS}>20 items</div>
<div css={STYLES_SUBTEXT}>Retrieved per day</div>
</div>
<div css={STYLES_ITEM}>
<div css={STYLES_FOCUS}>300 items</div>
<div css={STYLES_SUBTEXT}>Total</div>
</div>
</div>
</div>
</div>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>Data shared today</div>
<div css={STYLES_RIGHT}>Value (GB)</div>
</div>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>Total amount of data stored</div>
<div css={STYLES_RIGHT}>Value (GB)</div>
</div>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>Data retrieved today</div>
<div css={STYLES_RIGHT}>Value (GB)</div>
</div>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>Total amount of data retrieved</div>
<div css={STYLES_RIGHT}>Value (GB)</div>
</div>
</Section>
<Section
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
title="Most commonly retrieved CIDs"
buttons={[
{
name: "Export",
type: "DOWNLOAD",
value: "CSV_MOST_COMMON_CIDS",
},
]}
>
<System.Table
data={{
columns: [
{
key: "deal-cid",
name: "Deal CID",
copyable: true,
tooltip: "Deal CID explainer",
width: "100%",
},
{
key: "data-cid",
name: "Data CID",
copyable: true,
tooltip: "Data CID explainer",
width: "296px",
},
{ key: "miner", name: "Miner", width: "228px" },
],
rows: [
{
id: 1,
"data-cid": "44Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
"deal-cid": "55Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
miner: "Example Miner A",
},
{
id: 2,
"data-cid": "14Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
"deal-cid": "23Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
miner: "Example Miner B",
},
{
id: 3,
"data-cid": "88Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
"deal-cid": "89Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
miner: "Example Miner C",
},
{
id: 4,
"data-cid": "AAAAYh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
"deal-cid": "BBBBYh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
miner: "Example Miner D",
},
],
}}
selectedRowId={this.state.table_stats_common}
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
onChange={this._handleChange}
name="table_stats_common"
/>
</Section>
<Section
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
title="Top storage deals by GB"
buttons={[
{
name: "Export",
type: "DOWNLOAD",
value: "CSV_TOP_STORAGE_DEALS_GB",
},
]}
>
<System.Table
data={{
columns: [
{ key: "file", name: "File", type: "FILE_LINK" },
{ key: "miner", name: "Miner", width: "228px" },
{ key: "size", name: "Size" },
{
key: "date",
name: "Date uploaded",
width: "168px",
tooltip:
"This date represents when the file was first uploaded to the network.",
},
],
rows: [],
}}
selectedRowId={this.state.table_storage_deals_gb}
onChange={this._handleChange}
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
name="table_storage_deals_db"
/>
</Section>
<Section
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
title="Top storage deals by FIL"
buttons={[
{
name: "Export",
type: "DOWNLOAD",
value: "CSV_TOP_STORAGE_DEALS_FIL",
},
]}
>
<System.Table
data={{
columns: [
{ key: "file", name: "File", type: "FILE_LINK" },
{ key: "miner", name: "Miner", width: "228px" },
{ key: "amount", name: "Amount" },
{
key: "date",
name: "Date uploaded",
width: "168px",
tooltip:
"This date represents when the file was first uploaded to the network.",
},
],
rows: [],
}}
selectedRowId={this.state.table_storage_deals_fil}
onChange={this._handleChange}
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
name="table_storage_deals_fil"
/>
</Section>
</ScenePage>
);
}
}