@foreverrbum/ethsign/dist/components/dataVis/DataDashboard.js

This package will allow you to electronically sign documents within your application

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DataDashboard = void 0;

var _react = _interopRequireWildcard(require("react"));

var _charts = require("../charts");

var _graphql = require("../../helpers/graphql");

var _moment = _interopRequireDefault(require("moment"));

var _reactCsv = require("react-csv");

var _lodash = _interopRequireDefault(require("lodash"));

var _utils = require("./utils");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var statisticalData = {
  'totalDocumentsSigned': 'Documents Signed',
  'totalSignaturesSigned': 'Signatures Signed'
};
var CHART_COLOR = {
  'totalDocumentsSigned': '#7cb5ec',
  'totalSignaturesSigned': "#434348"
};
var TOTAL_DOCUMENTS_SIGNED = 'totalDocumentsSigned';
var TOTAL_SIGNATURES_SIGNED = 'totalSignaturesSigned';

var DataDashboard = function DataDashboard() {
  var _useState = (0, _react.useState)(),
      _useState2 = _slicedToArray(_useState, 2),
      historyData = _useState2[0],
      handleHistoryData = _useState2[1];

  var _useState3 = (0, _react.useState)(),
      _useState4 = _slicedToArray(_useState3, 2),
      allSignaturesSignedData = _useState4[0],
      handleAllSignaturesSignedData = _useState4[1];

  var _useState5 = (0, _react.useState)(),
      _useState6 = _slicedToArray(_useState5, 2),
      allDocumentSignedData = _useState6[0],
      handleAllDocumentSignedData = _useState6[1];

  var _useState7 = (0, _react.useState)(),
      _useState8 = _slicedToArray(_useState7, 2),
      allOptions = _useState8[0],
      handleAllOptions = _useState8[1];

  var _useState9 = (0, _react.useState)(),
      _useState10 = _slicedToArray(_useState9, 2),
      timeOptions = _useState10[0],
      handleTimeOptions = _useState10[1];

  var _useState11 = (0, _react.useState)(),
      _useState12 = _slicedToArray(_useState11, 2),
      aggregateOptions = _useState12[0],
      handleAggregateOptions = _useState12[1];

  var _useState13 = (0, _react.useState)(),
      _useState14 = _slicedToArray(_useState13, 2),
      addressData = _useState14[0],
      handleAddressData = _useState14[1];

  var _useState15 = (0, _react.useState)(),
      _useState16 = _slicedToArray(_useState15, 2),
      addressTotalOptions = _useState16[0],
      handleAddressTotalOptions = _useState16[1];

  var _useState17 = (0, _react.useState)(),
      _useState18 = _slicedToArray(_useState17, 2),
      addressTimeOptions = _useState18[0],
      handleAddressTimeOptions = _useState18[1];

  var _useState19 = (0, _react.useState)(),
      _useState20 = _slicedToArray(_useState19, 2),
      addressAggregateOptions = _useState20[0],
      handleAddressAggregateOptions = _useState20[1];

  var _useState21 = (0, _react.useState)(false),
      _useState22 = _slicedToArray(_useState21, 2),
      loading = _useState22[0],
      handleLoading = _useState22[1];

  var _useState23 = (0, _react.useState)(false),
      _useState24 = _slicedToArray(_useState23, 2),
      error = _useState24[0],
      handleError = _useState24[1];

  var _useState25 = (0, _react.useState)(0),
      _useState26 = _slicedToArray(_useState25, 2),
      currentLoadedStep = _useState26[0],
      handleCurrentLoadedStep = _useState26[1];

  var _useState27 = (0, _react.useState)(null),
      _useState28 = _slicedToArray(_useState27, 2),
      csvData = _useState28[0],
      handleCSVData = _useState28[1];

  var _useState29 = (0, _react.useState)(null),
      _useState30 = _slicedToArray(_useState29, 2),
      documentsSignedByNetwork = _useState30[0],
      handleDocumentsSignedByNetwork = _useState30[1];

  var _useState31 = (0, _react.useState)(null),
      _useState32 = _slicedToArray(_useState31, 2),
      signaturesSignedByNetwork = _useState32[0],
      handleSignaturesSignedByNetwork = _useState32[1];

  (0, _react.useEffect)(function () {
    var documentSignedEle = document.getElementById("documents_sign_num");
    documentSignedEle === null || documentSignedEle === void 0 ? void 0 : documentSignedEle.setAttribute("style", 'cursor:pointer');
    documentSignedEle === null || documentSignedEle === void 0 ? void 0 : documentSignedEle.addEventListener('click', documentSignedListener);
    var signatureSignedEle = document.getElementById("signature_sign_num");
    signatureSignedEle === null || signatureSignedEle === void 0 ? void 0 : signatureSignedEle.setAttribute("style", 'cursor:pointer');
    signatureSignedEle === null || signatureSignedEle === void 0 ? void 0 : signatureSignedEle.addEventListener('click', signatureSignedListener);
    return function () {
      var _document$getElementB, _document$getElementB2;

      (_document$getElementB = document.getElementById("documents_sign_num")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.removeEventListener('click', documentSignedListener);
      (_document$getElementB2 = document.getElementById("signature_sign_num")) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.removeEventListener('click', signatureSignedListener);
    };
  }, [historyData, addressData, allDocumentSignedData, allSignaturesSignedData, allOptions]);

  var documentSignedListener = function documentSignedListener() {
    var _contractsData$sort;

    var contractsData = allDocumentSignedData === null || allDocumentSignedData === void 0 ? void 0 : allDocumentSignedData.reduce(function (acc, _ref) {
      var data = _ref.data;

      if (data !== null && data !== void 0 && data.contracts) {
        return acc.concat(data === null || data === void 0 ? void 0 : data.contracts);
      }

      return acc;
    }, []);
    var timeData = [];
    contractsData === null || contractsData === void 0 ? void 0 : (_contractsData$sort = contractsData.sort(function (a, b) {
      return (a === null || a === void 0 ? void 0 : a.consensusTimestamp) - (b === null || b === void 0 ? void 0 : b.consensusTimestamp);
    })) === null || _contractsData$sort === void 0 ? void 0 : _contractsData$sort.forEach(function (contract) {
      var consensusTimestamp = contract.consensusTimestamp; // parse every day timestamp

      handleTimestamp(consensusTimestamp, timeData);
    });
    var len = contractsData === null || contractsData === void 0 ? void 0 : contractsData.length;
    var timeTitle = "Documents Signed Count (".concat(len, ")");
    var aggregateTile = "Documents Signed Count (".concat(len, ") - Aggregated");

    var _generateOptions = generateOptions('Documents Signed', timeData, timeTitle, aggregateTile, CHART_COLOR[TOTAL_DOCUMENTS_SIGNED]),
        timeOpt = _generateOptions.timeOpt,
        aggregateOpt = _generateOptions.aggregateOpt;

    handleTimeOptions(timeOpt);
    handleAggregateOptions(aggregateOpt);
  };

  var signatureSignedListener = function signatureSignedListener() {
    var _contractsData$sort2;

    var contractsData = allSignaturesSignedData === null || allSignaturesSignedData === void 0 ? void 0 : allSignaturesSignedData.reduce(function (acc, _ref2) {
      var events = _ref2.data.events;
      return acc.concat(events);
    }, []);
    var timeData = [];
    contractsData === null || contractsData === void 0 ? void 0 : (_contractsData$sort2 = contractsData.sort(function (a, b) {
      return (a === null || a === void 0 ? void 0 : a.timestamp) - (b === null || b === void 0 ? void 0 : b.timestamp);
    })) === null || _contractsData$sort2 === void 0 ? void 0 : _contractsData$sort2.forEach(function (contract) {
      var timestamp = contract.timestamp;
      handleTimestamp(timestamp, timeData);
    });
    var len = contractsData === null || contractsData === void 0 ? void 0 : contractsData.length;
    var timeTitle = "Signatures Signed Count (".concat(len, ")");
    var aggregateTile = "Signatures Signed Count (".concat(len, ") - Aggregated");

    var _generateOptions2 = generateOptions('Signatures Signed', timeData, timeTitle, aggregateTile, CHART_COLOR[TOTAL_SIGNATURES_SIGNED]),
        timeOpt = _generateOptions2.timeOpt,
        aggregateOpt = _generateOptions2.aggregateOpt;

    handleTimeOptions(timeOpt);
    handleAggregateOptions(aggregateOpt);
  };

  (0, _react.useEffect)(function () {
    _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
      var _historyData, _parseContractHistory, documentsSignedNumOnEachChain, signaturesSignedNumOnEachChain, dsbn, ssbn, idx, _dsbn$, timeOpt, aggregateOpt;

      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.prev = 0;
              handleError(false);
              handleLoading(true); // load contract data

              handleCurrentLoadedStep(0);
              _context.next = 6;
              return (0, _graphql.loadAllContractHistoryData)();

            case 6:
              _historyData = _context.sent;
              handleCurrentLoadedStep(1);
              _parseContractHistory = (0, _utils.parseContractHistoryData)(_historyData), documentsSignedNumOnEachChain = _parseContractHistory.documentsSignedNumOnEachChain, signaturesSignedNumOnEachChain = _parseContractHistory.signaturesSignedNumOnEachChain;
              handleHistoryData(_historyData); //load Address Count data

              _context.t0 = handleAddressData;
              _context.next = 13;
              return (0, _graphql.loadAllAddressCount)();

            case 13:
              _context.t1 = _context.sent;
              (0, _context.t0)(_context.t1);
              handleCurrentLoadedStep(2); // load document and signature count data

              dsbn = [];
              ssbn = [];
              _context.t2 = regeneratorRuntime.keys(_historyData);

            case 19:
              if ((_context.t3 = _context.t2()).done) {
                _context.next = 37;
                break;
              }

              idx = _context.t3.value;
              _context.t4 = dsbn;
              _context.t5 = handleDocumentSignedData;
              _context.next = 25;
              return (0, _graphql.loadDocumentsSignedByNetwork)(_graphql.network[idx]);

            case 25:
              _context.t6 = _context.sent;
              _context.t7 = (0, _context.t5)(_context.t6);

              _context.t4.push.call(_context.t4, _context.t7);

              _context.t8 = ssbn;
              _context.t9 = handleSignatureSignedData;
              _context.next = 32;
              return (0, _graphql.loadSignatureSignedByNetwork)(_graphql.network[idx]);

            case 32:
              _context.t10 = _context.sent;
              _context.t11 = (0, _context.t9)(_context.t10);

              _context.t8.push.call(_context.t8, _context.t11);

              _context.next = 19;
              break;

            case 37:
              handleCurrentLoadedStep(3);
              handleDocumentsSignedByNetwork(dsbn);
              handleSignaturesSignedByNetwork(ssbn); // load all signature signed data

              _context.t12 = handleAllSignaturesSignedData;
              _context.next = 43;
              return (0, _graphql.loadAllSignatureSignedData)(signaturesSignedNumOnEachChain);

            case 43:
              _context.t13 = _context.sent;
              (0, _context.t12)(_context.t13);
              handleCurrentLoadedStep(4); // load all documents signed data

              _context.t14 = handleAllDocumentSignedData;
              _context.next = 49;
              return (0, _graphql.loadAllDocumentsSignedData)(documentsSignedNumOnEachChain);

            case 49:
              _context.t15 = _context.sent;
              (0, _context.t14)(_context.t15);
              handleCurrentLoadedStep(5); // Load default UI statistics from ethereum

              _dsbn$ = dsbn[0], timeOpt = _dsbn$.timeOpt, aggregateOpt = _dsbn$.aggregateOpt;
              handleTimeOptions(timeOpt);
              handleAggregateOptions(aggregateOpt);
              handleLoading(false);
              _context.next = 63;
              break;

            case 58:
              _context.prev = 58;
              _context.t16 = _context["catch"](0);
              console.log(_context.t16);
              handleLoading(false);
              handleError(true);

            case 63:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, null, [[0, 58]]);
    }))();
  }, []);
  (0, _react.useEffect)(function () {
    if (!historyData || !addressData || !allSignaturesSignedData || !allDocumentSignedData) {
      return;
    } // History data portion


    {
      var allDocumentsSigned = 0;
      var allSignaturesSigned = 0;
      historyData === null || historyData === void 0 ? void 0 : historyData.forEach(function (_ref4) {
        var infos = _ref4.data.infos;
        var _infos$ = infos[0],
            totalDocumentsSigned = _infos$.totalDocumentsSigned,
            totalSignaturesSigned = _infos$.totalSignaturesSigned;
        allDocumentsSigned = allDocumentsSigned + totalDocumentsSigned;
        allSignaturesSigned = allSignaturesSigned + totalSignaturesSigned;
      });
      var tmpOptions = {
        chart: {
          type: 'column'
        },
        title: {
          text: "Contract Data"
        },
        subtitle: {
          text: "<span id =\"documents_sign_num\">Documents Signed (".concat(allDocumentsSigned, ") </span><br/> <span id =\"signature_sign_num\">Signatures Signed (").concat(allSignaturesSigned, ") </span>"),
          align: "center",
          useHTML: true
        },
        xAxis: {
          categories: _graphql.network
        },
        yAxis: {
          title: false
        },
        credits: {
          enabled: false
        },
        series: []
      };
      var series = Object.keys(statisticalData).map(function (key) {
        return {
          cursor: 'pointer',
          point: {
            events: {
              click: function click() {
                handleChartEvent(this.category, this.series.name);
              }
            }
          },
          name: statisticalData[key],
          data: []
        };
      });
      historyData === null || historyData === void 0 ? void 0 : historyData.forEach(function (d) {
        var infos = d.data.infos;
        infos.forEach(function (info) {
          Object.keys(statisticalData).forEach(function (key) {
            var _series$find = series.find(function (serie) {
              return serie.name === statisticalData[key];
            }),
                data = _series$find.data;

            data.push(info[key]);
          });
        });
      });
      tmpOptions.series = series;
      handleAllOptions(tmpOptions);
    } // Address Data portion

    {
      var addressNum = 0;
      addressData === null || addressData === void 0 ? void 0 : addressData.forEach(function (item) {
        var data = item.data;
        addressNum = ((data === null || data === void 0 ? void 0 : data.users.length) || 0) + addressNum;
      });
      var tmpOptionsAddress = {
        chart: {
          type: 'column'
        },
        title: {
          text: "Address Count (".concat(addressNum, ")")
        },
        xAxis: {
          categories: _graphql.network
        },
        yAxis: {
          title: false
        },
        credits: {
          enabled: false
        },
        series: []
      };
      var _series = tmpOptionsAddress.series;
      var seriesItem = {
        cursor: 'pointer',
        point: {
          events: {
            click: function click() {
              handleTotalAddressChartEvent(this.category);
            }
          }
        },
        name: "Address",
        data: []
      };
      addressData === null || addressData === void 0 ? void 0 : addressData.forEach(function (address) {
        var _data$users;

        var networkName = address.networkName,
            data = address.data; //special

        var len = (data === null || data === void 0 ? void 0 : (_data$users = data.users) === null || _data$users === void 0 ? void 0 : _data$users.length) || 0;
        seriesItem === null || seriesItem === void 0 ? void 0 : seriesItem.data.push(len);
      });

      _series.push(seriesItem);

      handleAddressTotalOptions(tmpOptionsAddress);

      if (addressData) {
        handleTotalAddressChartEvent(_graphql.network[0]);
      }
    } // Update our CSV data variable with the above data

    if (historyData && addressData) {
      handleCSVData(getCSVData());
    }
  }, [historyData, addressData, allSignaturesSignedData, allDocumentSignedData]);

  var handleTotalAddressChartEvent = function handleTotalAddressChartEvent(networkName) {
    var _users$sort;

    var res = addressData === null || addressData === void 0 ? void 0 : addressData.find(function (item) {
      return (item === null || item === void 0 ? void 0 : item.networkName) === networkName;
    });
    var users = res.data.users;
    var timeData = [];
    users === null || users === void 0 ? void 0 : (_users$sort = users.sort(function (a, b) {
      return (a === null || a === void 0 ? void 0 : a.joinedTimestamp) - (b === null || b === void 0 ? void 0 : b.joinedTimestamp);
    })) === null || _users$sort === void 0 ? void 0 : _users$sort.forEach(function (user) {
      var joinedTimestamp = user.joinedTimestamp;
      handleTimestamp(joinedTimestamp, timeData);
    });
    var timeTitle = "Address Count (".concat(networkName, ")");
    var aggragatetTile = "Address Count - Aggregated (".concat(networkName, ")");

    var _generateOptions3 = generateOptions(networkName, timeData, timeTitle, aggragatetTile),
        timeOpt = _generateOptions3.timeOpt,
        aggregateOpt = _generateOptions3.aggregateOpt;

    handleAddressTimeOptions(timeOpt);
    handleAddressAggregateOptions(aggregateOpt);
  };

  function completionData(timeData) {
    if ((timeData === null || timeData === void 0 ? void 0 : timeData.length) === 0) return [];
    var endTime = (0, _moment.default)();
    var _timeData$ = timeData[0],
        year = _timeData$.year,
        month = _timeData$.month,
        date = _timeData$.date;
    var nextDay = (0, _moment.default)([year, month - 1, date]);
    var dataList = [];

    var _loop = function _loop() {
      var tmpT = nextDay;
      var tDate = tmpT.format("DD/MM/YYYY");
      var item = timeData.find(function (_ref5) {
        var year = _ref5.year,
            month = _ref5.month,
            date = _ref5.date;
        return (0, _moment.default)([year, month - 1, date]).format("DD/MM/YYYY") == tDate;
      });

      if (item) {
        dataList.push(item);
      } else {
        dataList.push({
          time: "".concat(nextDay.year(), "-").concat(nextDay.month() + 1, "-").concat(nextDay.date()),
          year: nextDay.year(),
          month: nextDay.month() + 1,
          date: nextDay.date(),
          count: 0
        });
      }

      nextDay = nextDay.add(1, 'days');
    };

    while (isValidDate(endTime, nextDay)) {
      _loop();
    }

    return dataList;
  }

  function isValidDate(endTime, nextDay) {
    return nextDay.isBefore(endTime);
  }

  var generateOptions = function generateOptions(seriesTitle, timeData, timeTitle, aggregateTile, color) {
    var dataList = completionData(timeData);
    var aggregateTimeData = handleAggregateData(dataList);
    var aggregateData = generateChartData(aggregateTimeData);
    var numData = generateChartData(dataList);
    var timeOpt = {
      chart: {
        type: 'column'
      },
      title: {
        text: timeTitle
      },
      xAxis: {
        type: "datetime"
      },
      yAxis: {
        title: false
      },
      credits: {
        enabled: false
      },
      series: [{
        title: "".concat(seriesTitle),
        name: "".concat(seriesTitle),
        data: numData,
        color: color
      }]
    };
    var options = {
      xAxis: {
        type: 'datetime'
      },
      yAxis: {
        min: 0,
        title: false
      },
      credits: {
        enabled: false
      },
      plotOptions: {
        series: {
          events: {
            legendItemClick: function legendItemClick() {
              return false;
            }
          },
          marker: {
            enabled: false
          }
        }
      }
    };
    var aggregateOpTime = {
      title: {
        text: aggregateTile
      }
    };
    var aggregateOpSeries = {
      series: [{
        title: "".concat(seriesTitle),
        name: "".concat(seriesTitle),
        data: aggregateData,
        color: color
      }]
    };

    var aggregateOpt = _objectSpread(_objectSpread(_objectSpread({}, options), aggregateOpTime), aggregateOpSeries);

    return {
      timeOpt: timeOpt,
      aggregateOpt: aggregateOpt
    };
  };

  var handleTimestamp = function handleTimestamp(timestamp, timeData) {
    var _parseTimestamp = parseTimestamp(timestamp),
        year = _parseTimestamp.year,
        month = _parseTimestamp.month,
        date = _parseTimestamp.date,
        time = _parseTimestamp.time;

    var result = timeData.find(function (item) {
      return (item === null || item === void 0 ? void 0 : item.time) === time;
    });

    if (result) {
      result.count = (result === null || result === void 0 ? void 0 : result.count) + 1;
    } else {
      timeData.push({
        time: time,
        year: year,
        month: month,
        date: date,
        count: 1
      });
    }
  };

  var parseTimestamp = function parseTimestamp(timestamp) {
    var utcTime = _moment.default.unix(timestamp).utc();

    var year = utcTime.year();
    var month = utcTime.month() + 1;
    var date = utcTime.date();
    var time = "".concat(year, "-").concat(month, "-").concat(date);
    return {
      year: year,
      month: month,
      date: date,
      time: time
    };
  };

  var generateChartData = function generateChartData(timeData) {
    var _sortTimeData;

    return (_sortTimeData = sortTimeData(timeData)) === null || _sortTimeData === void 0 ? void 0 : _sortTimeData.map(function (_ref6) {
      var year = _ref6.year,
          month = _ref6.month,
          date = _ref6.date,
          count = _ref6.count;
      return [Date.UTC(year, month - 1, date), count];
    });
  };

  var sortTimeData = function sortTimeData(timeData) {
    return timeData.sort(function (a, b) {
      var aTime = (0, _moment.default)([a.year, a.month, a.date]).unix();
      var bTime = (0, _moment.default)([b.year, b.month, b.date]).unix();
      return aTime - bTime;
    });
  };

  var handleAggregateData = function handleAggregateData(timeData) {
    var tmp = sortTimeData(_lodash.default.cloneDeep(timeData));
    return tmp === null || tmp === void 0 ? void 0 : tmp.map(function (item, index) {
      var count;

      if (index !== 0) {
        count = item.count + tmp[index - 1].count;
        item.count = count;
      }

      return item;
    });
  };

  var handleDocumentSignedData = function handleDocumentSignedData(documentSignedData) {
    var _data$contracts, _data$contracts$filte, _data$contracts$filte2;

    var networkName = documentSignedData.networkName,
        data = documentSignedData.data;
    var timeData = [];
    data === null || data === void 0 ? void 0 : (_data$contracts = data.contracts) === null || _data$contracts === void 0 ? void 0 : (_data$contracts$filte = _data$contracts.filter(function (_ref7) {
      var consensusTimestamp = _ref7.consensusTimestamp;
      return consensusTimestamp !== "0";
    })) === null || _data$contracts$filte === void 0 ? void 0 : (_data$contracts$filte2 = _data$contracts$filte.sort(function (a, b) {
      return (a === null || a === void 0 ? void 0 : a.consensusTimestamp) - (b === null || b === void 0 ? void 0 : b.consensusTimestamp);
    })) === null || _data$contracts$filte2 === void 0 ? void 0 : _data$contracts$filte2.forEach(function (contract) {
      var consensusTimestamp = contract.consensusTimestamp; // parse every day timestamp

      handleTimestamp(consensusTimestamp, timeData);
    });
    var timeTitle = "Documents Signed Count (".concat(networkName, ")");
    var aggragatetTile = "Documents Signed Count - Aggregated (".concat(networkName, ")");
    return generateOptions(networkName, timeData, timeTitle, aggragatetTile, CHART_COLOR[TOTAL_DOCUMENTS_SIGNED]);
  };

  var handleSignatureSignedData = function handleSignatureSignedData(signatureSignedData) {
    var _events$sort;

    var networkName = signatureSignedData.networkName,
        events = signatureSignedData.data.events;
    var timeData = [];
    events === null || events === void 0 ? void 0 : (_events$sort = events.sort(function (a, b) {
      return (a === null || a === void 0 ? void 0 : a.timestamp) - (b === null || b === void 0 ? void 0 : b.timestamp);
    })) === null || _events$sort === void 0 ? void 0 : _events$sort.forEach(function (_ref8) {
      var timestamp = _ref8.timestamp;
      handleTimestamp(timestamp, timeData);
    });
    var timeTitle = "Signature Signed Count (".concat(networkName, ")");
    var aggregateTile = "Signature Signed Count - Aggregated (".concat(networkName, ")");
    return generateOptions(networkName, timeData, timeTitle, aggregateTile, CHART_COLOR[TOTAL_SIGNATURES_SIGNED]);
  };

  var handleChartEvent = /*#__PURE__*/function () {
    var _ref9 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(networkName, type) {
      var result, _handleDocumentSigned, timeOpt, aggregateOpt, _handleSignatureSigne, timeOp, aggregateOp;

      return regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              result = Object.keys(statisticalData).find(function (key) {
                return statisticalData[key] === type;
              });
              _context2.t0 = result;
              _context2.next = _context2.t0 === TOTAL_DOCUMENTS_SIGNED ? 4 : _context2.t0 === TOTAL_SIGNATURES_SIGNED ? 14 : 24;
              break;

            case 4:
              _context2.t1 = handleDocumentSignedData;
              _context2.next = 7;
              return (0, _graphql.loadDocumentsSignedByNetwork)(networkName);

            case 7:
              _context2.t2 = _context2.sent;
              _handleDocumentSigned = (0, _context2.t1)(_context2.t2);
              timeOpt = _handleDocumentSigned.timeOpt;
              aggregateOpt = _handleDocumentSigned.aggregateOpt;
              handleTimeOptions(timeOpt);
              handleAggregateOptions(aggregateOpt);
              return _context2.abrupt("break", 24);

            case 14:
              _context2.t3 = handleSignatureSignedData;
              _context2.next = 17;
              return (0, _graphql.loadSignatureSignedByNetwork)(networkName);

            case 17:
              _context2.t4 = _context2.sent;
              _handleSignatureSigne = (0, _context2.t3)(_context2.t4);
              timeOp = _handleSignatureSigne.timeOpt;
              aggregateOp = _handleSignatureSigne.aggregateOpt;
              handleTimeOptions(timeOp);
              handleAggregateOptions(aggregateOp);
              return _context2.abrupt("break", 24);

            case 24:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2);
    }));

    return function handleChartEvent(_x, _x2) {
      return _ref9.apply(this, arguments);
    };
  }();

  var headers = [{
    label: "Network",
    key: "network"
  }, {
    label: "Documents Signed",
    key: "docsignedlength"
  }, {
    label: "Signatures Signed",
    key: "sigsignedlength"
  }, {
    label: "Address Count",
    key: "addresscountog"
  }, {
    label: "",
    key: "blank"
  }, {
    label: "Date",
    key: "date"
  }, {
    label: "Signed Document Count (ethereum)",
    key: "signeddoccount.ethereum"
  }, {
    label: "Signed Document Count (ropsten)",
    key: "signeddoccount.ropsten"
  }, {
    label: "Signed Document Count (bsc)",
    key: "signeddoccount.bsc"
  }, {
    label: "Signed Document Count (avalanche)",
    key: "signeddoccount.avalanche"
  }, {
    label: "Signed Document Count (polygon)",
    key: "signeddoccount.polygon"
  }, {
    label: "Signed Document Count (fantom)",
    key: "signeddoccount.fantom"
  }, {
    label: "",
    key: "blank"
  }, {
    label: "Aggregate Signed Document Count (ethereum)",
    key: "signeddoccountagg.ethereum"
  }, {
    label: "Aggregate Signed Document Count (ropsten)",
    key: "signeddoccountagg.ropsten"
  }, {
    label: "Aggregate Signed Document Count (bsc)",
    key: "signeddoccountagg.bsc"
  }, {
    label: "Aggregate Signed Document Count (avalanche)",
    key: "signeddoccountagg.avalanche"
  }, {
    label: "Aggregate Signed Document Count (polygon)",
    key: "signeddoccountagg.polygon"
  }, {
    label: "Aggregate Signed Document Count (fantom)",
    key: "signeddoccountagg.fantom"
  }, {
    label: "",
    key: "blank"
  }, {
    label: "Signature Count (ethereum)",
    key: "signaturecount.ethereum"
  }, {
    label: "Signature Count (ropsten)",
    key: "signaturecount.ropsten"
  }, {
    label: "Signature Count (bsc)",
    key: "signaturecount.bsc"
  }, {
    label: "Signature Count (avalanche)",
    key: "signaturecount.avalanche"
  }, {
    label: "Signature Count (polygon)",
    key: "signaturecount.polygon"
  }, {
    label: "Signature Count (fantom)",
    key: "signaturecount.fantom"
  }, {
    label: "",
    key: "blank"
  }, {
    label: "Aggregate Signature Count (ethereum)",
    key: "signaturecountagg.ethereum"
  }, {
    label: "Aggregate Signature Count (ropsten)",
    key: "signaturecountagg.ropsten"
  }, {
    label: "Aggregate Signature Count (bsc)",
    key: "signaturecountagg.bsc"
  }, {
    label: "Aggregate Signature Count (avalanche)",
    key: "signaturecountagg.avalanche"
  }, {
    label: "Aggregate Signature Count (polygon)",
    key: "signaturecountagg.polygon"
  }, {
    label: "Aggregate Signature Count (fantom)",
    key: "signaturecountagg.fantom"
  }, {
    label: "",
    key: "blank"
  }, {
    label: "Address Count (ethereum)",
    key: "addresscount.ethereum"
  }, {
    label: "Address Count (ropsten)",
    key: "addresscount.ropsten"
  }, {
    label: "Address Count (bsc)",
    key: "addresscount.bsc"
  }, {
    label: "Address Count (avalanche)",
    key: "addresscount.avalanche"
  }, {
    label: "Address Count (polygon)",
    key: "addresscount.polygon"
  }, {
    label: "Address Count (fantom)",
    key: "addresscount.fantom"
  }, {
    label: "",
    key: "blank"
  }, {
    label: "Aggregate Address Count (ethereum)",
    key: "addresscountagg.ethereum"
  }, {
    label: "Aggregate Address Count (ropsten)",
    key: "addresscountagg.ropsten"
  }, {
    label: "Aggregate Address Count (bsc)",
    key: "addresscountagg.bsc"
  }, {
    label: "Aggregate Address Count (avalanche)",
    key: "addresscountagg.avalanche"
  }, {
    label: "Aggregate Address Count (polygon)",
    key: "addresscountagg.polygon"
  }, {
    label: "Aggregate Address Count (fantom)",
    key: "addresscountagg.fantom"
  }];

  var getCSVData = function getCSVData() {
    // Signature counts + Signed document counts
    var numDataSig = [],
        aggregateDataSig = [],
        numDataDoc = [],
        aggregateDataDoc = [];

    for (var idx in signaturesSignedByNetwork) {
      var _signaturesSignedByNe = signaturesSignedByNetwork[idx],
          timeOpt = _signaturesSignedByNe.timeOpt,
          aggregateOpt = _signaturesSignedByNe.aggregateOpt;
      numDataSig.push(timeOpt.series[0].data);
      aggregateDataSig.push(aggregateOpt.series[0].data);
      var _documentsSignedByNet = documentsSignedByNetwork[idx],
          timeOptDoc = _documentsSignedByNet.timeOpt,
          aggregateOptDoc = _documentsSignedByNet.aggregateOpt;
      numDataDoc.push(timeOptDoc.series[0].data);
      aggregateDataDoc.push(aggregateOptDoc.series[0].data);
    } // Address Count


    var csvAddressData = [];

    var _loop2 = function _loop2(_idx) {
      var _users$sort2;

      var users = addressData[_idx].data.users;
      var timeDataAddress = [];
      users === null || users === void 0 ? void 0 : (_users$sort2 = users.sort(function (a, b) {
        return (a === null || a === void 0 ? void 0 : a.joinedTimestamp) - (b === null || b === void 0 ? void 0 : b.joinedTimestamp);
      })) === null || _users$sort2 === void 0 ? void 0 : _users$sort2.forEach(function (user) {
        var joinedTimestamp = user.joinedTimestamp;
        handleTimestamp(joinedTimestamp, timeDataAddress);
      });
      var dataListAddress = completionData(timeDataAddress);
      var aggregateTimeDataAddress = handleAggregateData(dataListAddress);
      var aggregateDataAddress = generateChartData(aggregateTimeDataAddress);
      var numDataAddress = generateChartData(dataListAddress);
      csvAddressData.push({
        aggregateDataAddress: aggregateDataAddress,
        numDataAddress: numDataAddress
      });
    };

    for (var _idx in addressData) {
      _loop2(_idx);
    }

    var contractData = []; // Document and signature counts

    for (var net in numDataSig[0]) {
      var _historyData$net, _historyData$net2;

      contractData.push({
        network: historyData[net] ? historyData[net].networkName : "",
        docsignedlength: (_historyData$net = historyData[net]) !== null && _historyData$net !== void 0 && _historyData$net.data ? historyData[net].data.infos[0].totalDocumentsSigned : "",
        sigsignedlength: (_historyData$net2 = historyData[net]) !== null && _historyData$net2 !== void 0 && _historyData$net2.data ? historyData[net].data.infos[0].totalSignaturesSigned : "",
        blank: "",
        date: new Date(numDataSig[0][net][0]).toDateString(),
        signeddoccount: {
          ethereum: numDataDoc[0][net] ? numDataDoc[0][net][1] : "0",
          ropsten: numDataDoc[1][net] ? numDataDoc[1][net][1] : "0",
          bsc: numDataDoc[2][net] ? numDataDoc[2][net][1] : "0",
          avalanche: numDataDoc[3][net] ? numDataDoc[3][net][1] : "0",
          polygon: numDataDoc[4][net] ? numDataDoc[4][net][1] : "0",
          fantom: numDataDoc[0][net] ? numDataDoc[0][net][1] : "0"
        },
        signeddoccountagg: {
          ethereum: aggregateDataDoc[0][net] ? aggregateDataDoc[0][net][1] : "0",
          ropsten: aggregateDataDoc[1][net] ? aggregateDataDoc[1][net][1] : "0",
          bsc: aggregateDataDoc[2][net] ? aggregateDataDoc[2][net][1] : "0",
          avalanche: aggregateDataDoc[3][net] ? aggregateDataDoc[3][net][1] : "0",
          polygon: aggregateDataDoc[4][net] ? aggregateDataDoc[4][net][1] : "0",
          fantom: aggregateDataDoc[0][net] ? aggregateDataDoc[0][net][1] : "0"
        },
        signaturecount: {
          ethereum: numDataSig[0][net] ? numDataSig[0][net][1] : "0",
          ropsten: numDataSig[1][net] ? numDataSig[1][net][1] : "0",
          bsc: numDataSig[2][net] ? numDataSig[2][net][1] : "0",
          avalanche: numDataSig[3][net] ? numDataSig[3][net][1] : "0",
          polygon: numDataSig[4][net] ? numDataSig[4][net][1] : "0",
          fantom: numDataSig[0][net] ? numDataSig[0][net][1] : "0"
        },
        signaturecountagg: {
          ethereum: aggregateDataSig[0][net] ? aggregateDataSig[0][net][1] : "0",
          ropsten: aggregateDataSig[1][net] ? aggregateDataSig[1][net][1] : "0",
          bsc: aggregateDataSig[2][net] ? aggregateDataSig[2][net][1] : "0",
          avalanche: aggregateDataSig[3][net] ? aggregateDataSig[3][net][1] : "0",
          polygon: aggregateDataSig[4][net] ? aggregateDataSig[4][net][1] : "0",
          fantom: aggregateDataSig[0][net] ? aggregateDataSig[0][net][1] : "0"
        },
        addresscount: {
          ethereum: csvAddressData[0].numDataAddress[net] ? csvAddressData[0].numDataAddress[net][1] : "0",
          ropsten: csvAddressData[1].numDataAddress[net] ? csvAddressData[1].numDataAddress[net][1] : "0",
          bsc: csvAddressData[2].numDataAddress[net] ? csvAddressData[2].numDataAddress[net][1] : "0",
          avalanche: csvAddressData[3].numDataAddress[net] ? csvAddressData[3].numDataAddress[net][1] : "0",
          polygon: csvAddressData[4].numDataAddress[net] ? csvAddressData[4].numDataAddress[net][1] : "0",
          fantom: csvAddressData[5].numDataAddress[net] ? csvAddressData[5].numDataAddress[net][1] : "0"
        },
        addresscountagg: {
          ethereum: csvAddressData[0].aggregateDataAddress[net] ? csvAddressData[0].aggregateDataAddress[net][1] : "0",
          ropsten: csvAddressData[1].aggregateDataAddress[net] ? csvAddressData[1].aggregateDataAddress[net][1] : "0",
          bsc: csvAddressData[2].aggregateDataAddress[net] ? csvAddressData[2].aggregateDataAddress[net][1] : "0",
          avalanche: csvAddressData[3].aggregateDataAddress[net] ? csvAddressData[3].aggregateDataAddress[net][1] : "0",
          polygon: csvAddressData[4].aggregateDataAddress[net] ? csvAddressData[4].aggregateDataAddress[net][1] : "0",
          fantom: csvAddressData[5].aggregateDataAddress[net] ? csvAddressData[5].aggregateDataAddress[net][1] : "0"
        }
      });
    } // Add address counts


    for (var _net in addressData) {
      contractData[_net].addresscountog = addressData[_net].data.users.length;
    }

    var data = contractData;
    return data;
  };

  if (error) {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "m-auto text-lg text-gray-60"
    }, "Error loading data. Check console for a detailed error message.");
  }

  if (loading) {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "m-auto text-lg text-gray-60"
    }, "Loading... (", currentLoadedStep, "/5)");
  }

  return /*#__PURE__*/_react.default.createElement("div", {
    className: "flex justify-center flex-wrap mt-16 px-2 sm:px-16 mb-auto max-w-7xl"
  }, /*#__PURE__*/_react.default.createElement(_reactCsv.CSVLink, {
    className: "cursor-pointer text-center ml-auto mt-3 sm:mt-0 sm:w-32 font-bold flex-grow-0 bg-orange-500 focus:outline-none text-gray-40 py-2 rounded-sm hover:bg-orange-600",
    onClick: function onClick(event) {
      // Returning false will not export the svg. Since we are still loading data, we don't want to give an incomplete csv file.
      if (loading) {
        return false;
      }
    },
    headers: headers,
    data: csvData ? csvData : "",
    filename: "data-export-".concat(new Date().toISOString().replace(':', '-').substring(0, 16), "Z.csv")
  }, loading ? 'Loading...' : 'Export to CSV'), /*#__PURE__*/_react.default.createElement("div", {
    className: "flex justify-around flex-wrap w-full"
  }, /*#__PURE__*/_react.default.createElement(_charts.Chart, {
    options: allOptions,
    className: "my-4 w-full sm:w-1/3 p-4"
  }), /*#__PURE__*/_react.default.createElement(_charts.Chart, {
    options: timeOptions,
    className: "my-4 w-full sm:w-1/3 p-4"
  }), /*#__PURE__*/_react.default.createElement(_charts.Chart, {
    options: aggregateOptions,
    className: "my-4 w-full sm:w-1/3 p-4"
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: "flex justify-around flex-wrap w-full"
  }, /*#__PURE__*/_react.default.createElement(_charts.Chart, {
    options: addressTotalOptions,
    className: "my-4 w-full sm:w-1/3 p-4"
  }), /*#__PURE__*/_react.default.createElement(_charts.Chart, {
    options: addressTimeOptions,
    className: "my-4 w-full sm:w-1/3 p-4"
  }), /*#__PURE__*/_react.default.createElement(_charts.Chart, {
    options: addressAggregateOptions,
    className: "my-4 w-full sm:w-1/3 p-4"
  })));
};

exports.DataDashboard = DataDashboard;