import * as React from "react"; import * as Strings from "~/common/strings"; import * as Constants from "~/common/constants"; 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 ( Stats
Total FIL Balance
Value (FIL/ATTOFIL)
Lifetime FIL Balance
Value (FIL/ATTOFIL)
FIL spent today
Value (FIL/ATTOFIL)
Total FIL spent
Value (FIL/ATTOFIL)
Total FIL received
Value (FIL/ATTOFIL)
Total wallet addresses{" "} this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_SLATES", }) } > (view)
Value (Number)
Total payment channels{" "} this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_SLATES", }) } > (view)
Value (Number)
Total FIL in payment channels{" "} this.props.onAction({ type: "NAVIGATE", value: "V1_NAVIGATION_SLATES", }) } > (view)
Value (FIL/ATTOLFIL)
1 Day 1 Week 1 Month 6 Month 1 Year
12 kb/s
Current incoming
14 kb/s
Average incoming
1 Day 1 Week 1 Month 6 Month 1 Year
11 kb/s
Current outgoing
23 kb/s
Average outgoing
Node start date
March, 20th, 2020
Favorite peers (view)
42 peers
Your location
Norway
1 Day 1 Week 1 Month 6 Month 1 Year
55 items
Currently stored
5 items
Stored per day
200 items
Total
1 Day 1 Week 1 Month 6 Month 1 Year
7 items
Currently retrieved
20 items
Retrieved per day
300 items
Total
Data shared today
Value (GB)
Total amount of data stored
Value (GB)
Data retrieved today
Value (GB)
Total amount of data retrieved
Value (GB)
); } }