slate/pages/_/stats.js

import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";

import Section from "~/components/core/Section";

import Chart from "~/components/stats/Chart";

const getRandomInt = (max) => {
  return Math.floor(Math.random() * Math.floor(max));
}

const randomDate = (start, end) => {
  return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}

let data = [
  { id: 1, date: randomDate(new Date(2018, 0, 1), new Date()), category: "1", value: getRandomInt(1000) },
  { id: 2, date: randomDate(new Date(2018, 0, 1), new Date()), category: "1", value: getRandomInt(1000) },
  { id: 4, date: randomDate(new Date(2018, 0, 1), new Date()), category: "1", value: getRandomInt(1000) },
  { id: 3, date: randomDate(new Date(2018, 0, 1), new Date()), category: "1", value: getRandomInt(1000) },
  { id: 5, date: randomDate(new Date(2018, 0, 1), new Date()), category: "1", value: getRandomInt(1000) },
  { id: 6, date: randomDate(new Date(2018, 0, 1), new Date()), category: "1", value: getRandomInt(1000) },
  { id: 7, date: randomDate(new Date(2018, 0, 1), new Date()), category: "2", value: getRandomInt(1000) },
  { id: 8, date: randomDate(new Date(2018, 0, 1), new Date()), category: "2", value: getRandomInt(1000) },
  { id: 9, date: randomDate(new Date(2018, 0, 1), new Date()), category: "2", value: getRandomInt(1000) },
  { id: 10, date: randomDate(new Date(2018, 0, 1), new Date()), category: "2", value: getRandomInt(1000) },
  { id: 11, date: randomDate(new Date(2018, 0, 1), new Date()), category: "3", value: getRandomInt(1000) },
  { id: 12, date: randomDate(new Date(2018, 0, 1), new Date()), category: "3", value: getRandomInt(1000) },
  { id: 13, date: randomDate(new Date(2018, 0, 1), new Date()), category: "3", value: getRandomInt(1000) },
  { id: 14, date: randomDate(new Date(2018, 0, 1), new Date()), category: "3", value: getRandomInt(1000) },
];

// Use this to determine how many tick marks to be written on X axis
const tickNumber = 4;

//Use this to choose how much of the chart is filled vertically displayMax = 500
const yCeiling = 400;

//Use this to choose how much of the chart is filled horizontally displayMax = 550
const xWall = 500;

import { css } from "@emotion/react";

const STYLES_ROW = css`
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 6px 24px;
`;

const STYLES_TEXT = css`
  min-width: 5%;
  padding-top: 6px;
  width: 100%;
`;

const STYLES_SUBTEXT = css`
  margin-top: 8px;
  font-size: 12px;
`;

const STYLES_SUBTEXT_HIGHLIGHT = css`
  margin-top: 8px;
  font-size: 12px;
  color: ${Constants.system.brand};
`;

const STYLES_ITEM = css`
  margin-bottom: 12px;
  display: inline-flex;
  flex-direction: column;
  max-width: 220px;
  margin-right: 32px;
`;

const STYLES_ITEM_GROUP = css`
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
`;

const EXAMPLE_MINERS = {
  columns: [
    { key: "miner", id: "id", name: "Miner" },
    {
      key: "cid",
      name: "Raw Byte",
      width: "228px",
      type: "SLATE_LINK",
    },
    {
      key: "amount",
      name: "Adj. Power Growth",
      width: "268px",
      type: "NEW_WINDOW",
    },
    {
      key: "size",
      name: "24h Power Growth",
      type: "NEW_WINDOW",
      width: "188px",
    },
  ],
  rows: [
    {
      id: `file-1`,
      icon: "PNG",
      file: "test-image.jpg",
      miner: "Example Miner A",
      "deal-cid": "23Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      date: Strings.toDate("2014-06-06 00:00:00 UTC"),
      size: Strings.bytesToSize(66666, 3),
      amount: Strings.formatAsFilecoin(2),
      remaining: Strings.getRemainingTime(666666),
      cid: "QmY7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      "retrieval-status": 6,
      errors: 4,
    },
    {
      id: `file-2`,
      icon: "PNG",
      file: "test-image-2.jpg",
      miner: "Example Miner A",
      "deal-cid": "ABCDYh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      date: Strings.toDate("2014-06-07 00:00:00 UTC"),
      size: Strings.bytesToSize(77777, 3),
      amount: Strings.formatAsFilecoin(2.04),
      remaining: Strings.getRemainingTime(777777),
      cid: "w2w2Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      "retrieval-status": 6,
      errors: 0,
    },
    {
      id: `file-3`,
      icon: "PNG",
      file: "test-image-3.jpg",
      miner: "Example Miner B",
      "deal-cid": "FHJKYh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      date: Strings.toDate("2014-06-08 00:00:00 UTC"),
      size: Strings.bytesToSize(88888, 3),
      amount: Strings.formatAsFilecoin(2.08),
      remaining: Strings.getRemainingTime(888888),
      cid: "0707Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      "retrieval-status": 6,
      errors: 0,
    },
    {
      id: `file-4`,
      icon: "PNG",
      file: "test-image-4.jpg",
      miner: "Example Miner C",
      "deal-cid": "KKKKYh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      date: Strings.toDate("2014-06-09 00:00:00 UTC"),
      size: Strings.bytesToSize(9999999, 3),
      amount: Strings.formatAsFilecoin(4.08),
      remaining: Strings.getRemainingTime(999999),
      cid: "1010Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      "retrieval-status": 6,
      errors: 0,
    },
    {
      id: `file-5`,
      icon: "PNG",
      file: "test-image-5.jpg",
      miner: "Example Miner D",
      "deal-cid": "WWWWWWWUquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      date: Strings.toDate("2014-06-10 00:00:00 UTC"),
      size: Strings.bytesToSize(4444444, 3),
      amount: Strings.formatAsFilecoin(5.13),
      remaining: Strings.getRemainingTime(797979),
      cid: "1414Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      "retrieval-status": 6,
      errors: 0,
    },
    {
      id: `file-6`,
      icon: "PNG",
      file: "test-image-6.jpg",
      miner: "Example Miner D",
      "deal-cid": "XXXXUquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      date: Strings.toDate("2014-06-11 00:00:00 UTC"),
      size: Strings.bytesToSize(373737, 3),
      amount: Strings.formatAsFilecoin(12.13),
      remaining: Strings.getRemainingTime(828282),
      cid: "3030Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      "retrieval-status": 6,
      errors: 0,
    },
    {
      id: `file-7`,
      icon: "PNG",
      file: "test-image-7.jpg",
      miner: "Example Miner E",
      "deal-cid": "HGHGHGXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      date: Strings.toDate("2014-06-12 00:00:00 UTC"),
      size: Strings.bytesToSize(373737, 3),
      amount: Strings.formatAsFilecoin(12.13),
      remaining: Strings.getRemainingTime(828282),
      cid: "3030Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      "retrieval-status": 6,
      errors: 1,
    },
    {
      id: `file-8`,
      icon: "PNG",
      file: "example-painting-a-1.jpg",
      miner: "Example Miner F",
      "deal-cid": "12CCCCCLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      date: Strings.toDate("2014-06-12 00:00:00 UTC"),
      size: Strings.bytesToSize(444444, 3),
      amount: Strings.formatAsFilecoin(2.13),
      remaining: Strings.getRemainingTime(8282822),
      cid: "asdfadsfPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      "retrieval-status": 6,
      errors: 0,
    },
    {
      id: `file-9`,
      icon: "PNG",
      file: "example-painting-a-2.jpg",
      miner: "Example Miner F",
      "deal-cid": "CGFDFASXbhXkhBvFoPwmQUSa92pxnxjQuPU",
      date: Strings.toDate("2014-06-12 00:00:00 UTC"),
      size: Strings.bytesToSize(44432, 3),
      amount: Strings.formatAsFilecoin(20.13),
      remaining: Strings.getRemainingTime(182822822),
      cid: "asdfadsfPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      "retrieval-status": 6,
      errors: 0,
    },
    {
      id: `file-10`,
      icon: "PNG",
      file: "example-painting-a-3.jpg",
      miner: "Example Miner F",
      "deal-cid": "HHFGFDDFGvFoPwmQUSa92pxnxjQuPU",
      date: Strings.toDate("2014-07-20 00:00:00 UTC"),
      size: Strings.bytesToSize(44432, 3),
      amount: Strings.formatAsFilecoin(20.13),
      remaining: Strings.getRemainingTime(7432123),
      cid: "asdfadsfPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      "retrieval-status": 6,
      errors: 0,
    },
    {
      id: `file-11`,
      icon: "PNG",
      file: "example-painting-a-4.jpg",
      miner: "Example Miner F",
      "deal-cid": "HHFGFDDFGvFoPwmQUSa92pxnxjQuPU",
      date: Strings.toDate("2014-07-20 00:00:00 UTC"),
      size: Strings.bytesToSize(44432, 3),
      amount: Strings.formatAsFilecoin(20.13),
      remaining: Strings.getRemainingTime(742988),
      cid: "ppdmdfeFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      "retrieval-status": 6,
      errors: 0,
    },
    {
      id: `file-12`,
      icon: "PNG",
      file: "example-painting-a-5.jpg",
      miner: "Example Miner F",
      "deal-cid": "GHREREFGvFoPwmQUSa92pxnxjQuPU",
      date: Strings.toDate("2014-07-24 00:00:00 UTC"),
      size: Strings.bytesToSize(44432, 3),
      amount: Strings.formatAsFilecoin(20.13),
      remaining: Strings.getRemainingTime(320021),
      cid: "dfsffdbPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      "retrieval-status": 6,
      errors: 0,
    },
    {
      id: `file-13`,
      icon: "PNG",
      file: "pending-file-1.jpg",
      miner: "Example Miner G",
      "deal-cid": "13REREFGvFoPwmQUSa92pxnxjQuPU",
      date: Strings.toDate("2014-07-24 00:00:00 UTC"),
      size: Strings.bytesToSize(44432, 3),
      amount: Strings.formatAsFilecoin(20.13),
      remaining: null,
      cid: "13sffdbPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      "retrieval-status": 1,
    },
    {
      id: `file-14`,
      icon: "PNG",
      file: "pending-file-2.jpg",
      miner: "Example Miner G",
      "deal-cid": "14REREFGvFoPwmQUSa92pxnxjQuPU",
      date: Strings.toDate("2014-07-24 00:00:00 UTC"),
      size: Strings.bytesToSize(44432, 3),
      amount: Strings.formatAsFilecoin(20.13),
      remaining: null,
      cid: "14sffdbPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      "retrieval-status": 2,
    },
    {
      id: `file-15`,
      icon: "PNG",
      file: "pending-file-3.jpg",
      miner: "Example Miner H",
      "deal-cid": "15REREFGvFoPwmQUSa92pxnxjQuPU",
      date: Strings.toDate("2014-07-24 00:00:00 UTC"),
      size: Strings.bytesToSize(44432, 3),
      amount: Strings.formatAsFilecoin(20.13),
      remaining: null,
      cid: "15sffdbPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      "retrieval-status": 3,
    },
    {
      id: `file-16`,
      icon: "PNG",
      file: "pending-file-4.jpg",
      miner: "Example Miner I",
      "deal-cid": "16REREFGvFoPwmQUSa92pxnxjQuPU",
      date: Strings.toDate("2014-07-24 00:00:00 UTC"),
      size: Strings.bytesToSize(44432, 3),
      amount: Strings.formatAsFilecoin(20.13),
      remaining: null,
      cid: "16sffdbPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      "retrieval-status": 4,
    },
    {
      id: `file-17`,
      icon: "PNG",
      file: "pending-file-5.jpg",
      miner: "Example Miner J",
      "deal-cid": "17REREFGvFoPwmQUSa92pxnxjQuPU",
      date: Strings.toDate("2014-07-24 00:00:00 UTC"),
      size: Strings.bytesToSize(44432, 3),
      amount: Strings.formatAsFilecoin(20.13),
      remaining: null,
      cid: "17sffdbPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
      "retrieval-status": 5,
    },
  ],
};

export default class StatsPage extends React.Component {
  render() {
    return (
      <div>
        <System.H1>Stats</System.H1>

        <Section
          onAction={this.props.onAction}
          onNavigateTo={this.props.onNavigateTo}
          title="Wallet"
          buttons={[
            {
              name: "Export",
              type: "SIDEBAR",
              value: "SIDEBAR_CREATE_WALLET_ADDRESS",
            },
          ]}
        >
          <div css={STYLES_ROW}>
            <div css={STYLES_TEXT}>
              <div css={STYLES_ITEM_GROUP}>
                <div css={STYLES_ITEM}>
                  <div css={STYLES_SUBTEXT}>Total File Balance</div>
                </div>

                <div css={STYLES_ITEM}>
                  <div css={STYLES_SUBTEXT_HIGHLIGHT}>Value(FIL/ATTOLFIL)</div>
                </div>
              </div>
            </div>
          </div>
          <div css={STYLES_ROW}>
            <div css={STYLES_TEXT}>
              <div css={STYLES_ITEM_GROUP}>
                <div css={STYLES_ITEM}>
                  <div css={STYLES_SUBTEXT}>Lifetime File Balance</div>
                </div>

                <div css={STYLES_ITEM}>
                  <div css={STYLES_SUBTEXT_HIGHLIGHT}>Value(FIL/ATTOLFIL)</div>
                </div>
              </div>
            </div>
          </div>
        </Section>

        <Section
          onAction={this.props.onAction}
          onNavigateTo={this.props.onNavigateTo}
          title="Network"
          buttons={[
            {
              name: "Export",
              type: "SIDEBAR",
              value: "SIDEBAR_CREATE_WALLET_ADDRESS",
            },
          ]}
        >
          <div css={STYLES_ROW}>
            <div css={STYLES_TEXT}>
              <div css={STYLES_ITEM_GROUP}>
                <div css={STYLES_ITEM}>
                  <div css={STYLES_SUBTEXT}>Total Power</div>
                </div>

                <div css={STYLES_ITEM}>
                  <div css={STYLES_SUBTEXT_HIGHLIGHT}>Value(FIL/ATTOLFIL)</div>
                </div>
              </div>
            </div>
          </div>
          <div css={STYLES_ROW}>
            <div css={STYLES_TEXT}>
              <div css={STYLES_ITEM_GROUP}>
                <div css={STYLES_ITEM}>
                  <div css={STYLES_SUBTEXT}>Tipset Height</div>
                </div>

                <div css={STYLES_ITEM}>
                  <div css={STYLES_SUBTEXT_HIGHLIGHT}>Value(FIL/ATTOLFIL)</div>
                </div>
              </div>
            </div>
          </div>
        </Section>
        <Section title="Miner List">
          <System.Table
            data={EXAMPLE_MINERS}
            name="data"
            onAction={this.props.onAction}
            onNavigateTo={this.props.onNavigateTo}
          />
        </Section>

        <Section title="Node">
          <Chart
            data={data}
            maxTicks={tickNumber}
            yCeiling={yCeiling}
            xWall={xWall}
          />
        </Section>
      </div>
    );
  }
}