From 45870d059017dd413527b5bdc52c8c3258946b3b Mon Sep 17 00:00:00 2001 From: Bryan Cinman Date: Thu, 17 Jan 2019 19:07:19 -0500 Subject: [PATCH] added date to table widget --- index.html | 11 ++--- package-lock.json | 5 +-- package.json | 1 + src/api.js | 9 +++- src/index.js | 9 +++- src/table/images/icon-up.svg | 4 +- src/table/index.js | 85 ++++++++++++++++++++++++++---------- src/table/styles.scss | 19 +++++++- 8 files changed, 105 insertions(+), 38 deletions(-) diff --git a/index.html b/index.html index 27da53f..cb3469b 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ flipside.js - + @@ -27,17 +28,17 @@
-
+
diff --git a/package-lock.json b/package-lock.json index b1d341c..ec091f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "flipside-js", - "version": "1.4.0", + "version": "1.5.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -3937,8 +3937,7 @@ "lodash": { "version": "4.17.11", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", - "dev": true + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" }, "lodash.assign": { "version": "4.2.0", diff --git a/package.json b/package.json index c62805f..ac28153 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "license": "MIT", "dependencies": { "axios": "^0.18.0", + "lodash": "^4.17.11", "preact": "^8.3.1" }, "devDependencies": { diff --git a/src/api.js b/src/api.js index 3b1dbca..d8bfb12 100644 --- a/src/api.js +++ b/src/api.js @@ -8,7 +8,7 @@ export default class API { }); } - async _fetch(url, params, retryCount = 0, retryMax = 15) { + async _fetch(url, params = {}, retryCount = 0, retryMax = 15) { let res; try { res = await this.client.get(url, { params: params }); @@ -26,13 +26,18 @@ export default class API { return { data: null, success: false }; } - async fetchAssetMetric(symbol, metric = "FCAS", days = 7) { + async fetchAssetMetric(symbol, metric, days = 7) { const sym = `${symbol}`.toUpperCase(); return await this._fetch(`/assets/${sym}/metrics/${metric}`, { change_over: days }); } + async fetchAssetMetrics(symbol) { + const sym = `${symbol}`.toUpperCase(); + return await this._fetch(`/assets/${sym}/metrics`); + } + async fetchFCASDistribution(asset) { return await this._fetch(`/metrics/FCAS/assets`, { visual_distribution: true diff --git a/src/index.js b/src/index.js index 4f588d9..e7a8607 100644 --- a/src/index.js +++ b/src/index.js @@ -8,9 +8,14 @@ class Flipside { this.api = new API(apiKey); } - createTable(el, symbol) { + createTable(el, symbol, opts) { + const defaults = { + dark: false + }; + const mergedOpts = Object.assign({}, defaults, opts); + const element = typeof el === "string" ? document.getElementById(el) : el; - render(, element); + render(
, element); } createFCAS(el, symbol, opts) { diff --git a/src/table/images/icon-up.svg b/src/table/images/icon-up.svg index ba4e096..864d468 100644 --- a/src/table/images/icon-up.svg +++ b/src/table/images/icon-up.svg @@ -4,6 +4,6 @@ icon-upCreated with Sketch. - + - \ No newline at end of file + diff --git a/src/table/index.js b/src/table/index.js index 9699eb1..f310c9f 100644 --- a/src/table/index.js +++ b/src/table/index.js @@ -1,64 +1,105 @@ import { h, Component } from "preact"; +import keyBy from "lodash/keyBy"; import "./styles.scss"; +function getMetricTrend(change) { + if (change < 0) { + return "down"; + } else if (change == 0) { + return "eq"; + } else { + return "up"; + } +} + +function calculateDiff(value, percent) { + return Math.round(Math.abs(value * (percent / 100))); +} + export default class Table extends Component { constructor() { super(); - this.state = { loading: true, metric: null }; + this.state = { loading: true, metrics: null }; } - render() { + async componentDidMount() { + await this._getData(); + } + + async _getData() { + const { api, symbol } = this.props; + const metrics = ["fcas", "dev", "utility"]; + const data = await Promise.all( + metrics.map(async metric => { + const res = await api.fetchAssetMetric(symbol, metric, 7); + const trend = getMetricTrend(res.data.percent_change); + return { ...res.data, trend, metric }; + }) + ); + console.log(keyBy(data, "metric")); + this.setState({ + loading: false, + metrics: keyBy(data, "metric") + }); + } + + render({ dark }, { loading, metrics }) { if (loading) { return null; } - let trendDir, trendIcon; - if (metric.change < 0) { - trendDir = "down"; - trendIcon = require("./images/icon-down.svg"); - } else if (metric.change == 0) { - trendDir = "eq"; - trendIcon = require("./images/icon-eq.svg"); + const { fcas, dev, utility } = metrics; + + let rank; + if (fcas.value <= 500) { + rank = "f"; + } else if (fcas.value <= 649) { + rank = "c"; + } else if (fcas.value <= 749) { + rank = "b"; + } else if (fcas.value <= 899) { + rank = "a"; } else { - trendDir = "up"; - trendIcon = require("./images/icon-up.svg"); + rank = "s"; } return ( -
+
+ - + + - + diff --git a/src/table/styles.scss b/src/table/styles.scss index 1b903de..efd036a 100644 --- a/src/table/styles.scss +++ b/src/table/styles.scss @@ -1,9 +1,18 @@ .fs-table { white-space: nowrap; font-size: 18px; + color: #000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + &--light { + color: #000; + } + + &--dark { + color: #fff; + } + table { border-spacing: 0; } @@ -66,14 +75,19 @@ } .fs-table-trend { - margin-left: 10px; + background: center left no-repeat; + margin-left: 12px; + padding-left: 12px; &--up { - color: #057511; + background-image: url(./images/icon-up.svg); + color: #30a92d; } &--down { + background-image: url(./images/icon-down.svg); color: #ff2700; } &--eq { + background-image: url(./images/icon-eq.svg); color: #808080; } } @@ -102,4 +116,5 @@ .fs-table-link { line-height: 40px; + color: inherit; }
FCAS - A + {rank} - 738 + {fcas.value} 7d - - 2 + + {calculateDiff(fcas.value, fcas.percent_change)}
User Activity781{utility.value} 7d - - 2 + + {calculateDiff(utility.value, utility.percent_change)}
Developer Behavior781{dev.value} 7d - - 2 + + {calculateDiff(dev.value, dev.percent_change)}