mirror of
https://github.com/FlipsideCrypto/flipside-js.git
synced 2026-02-06 10:48:11 +00:00
added date to table widget
This commit is contained in:
Bryan Cinman
parent
93b81d0418
commit
45870d0590
11
index.html
11
index.html
@ -5,7 +5,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>flipside.js</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script src="flipside-v1.4.0.js"></script>
|
||||
<script src="flipside-v1.5.1.js"></script>
|
||||
<style>
|
||||
body {
|
||||
padding: 0;
|
||||
@ -19,7 +19,8 @@
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
#widget-1 {
|
||||
#widget-1,
|
||||
#widget-2 {
|
||||
background: black;
|
||||
}
|
||||
</style>
|
||||
@ -27,17 +28,17 @@
|
||||
<body>
|
||||
<div class="wrapper"><div id="widget-0"></div></div>
|
||||
<div class="wrapper"><div id="widget-1"></div></div>
|
||||
<div class="wrapper"><div id="widget-3"></div></div>
|
||||
<div class="wrapper"><div id="widget-2"></div></div>
|
||||
|
||||
<script>
|
||||
const flipside = new Flipside("<YOUR_API_KEY>");
|
||||
const flipside = new Flipside("a7936778-4f87-4790-889f-3ab617271458");
|
||||
flipside.createFCAS("widget-0", "btc");
|
||||
flipside.createFCAS("widget-1", "btc", {
|
||||
logo: false,
|
||||
mini: true,
|
||||
dark: true
|
||||
});
|
||||
flipside.createTable("widget-3", "btc");
|
||||
flipside.createTable("widget-2", "btc", { dark: true });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
5
package-lock.json
generated
5
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"axios": "^0.18.0",
|
||||
"lodash": "^4.17.11",
|
||||
"preact": "^8.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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(<Table symbol={symbol} api={this.api} />, element);
|
||||
render(<Table symbol={symbol} api={this.api} {...mergedOpts} />, element);
|
||||
}
|
||||
|
||||
createFCAS(el, symbol, opts) {
|
||||
|
||||
@ -4,6 +4,6 @@
|
||||
<title>icon-up</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M4,7 L0,7 L5.5,0 L11,7 L7,7 L7,12 L4,12 L4,7 Z" id="icon-up" fill="#057511"></path>
|
||||
<path d="M4,7 L0,7 L5.5,0 L11,7 L7,7 L7,12 L4,12 L4,7 Z" id="icon-up" fill="#30A92D"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 531 B After Width: | Height: | Size: 532 B |
@ -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 (
|
||||
<div class="fs-table">
|
||||
<div class={`fs-table fs-table--${dark ? "dark" : "light"}`}>
|
||||
<table>
|
||||
<tr class="fs-table-fcas">
|
||||
<th>FCAS</th>
|
||||
<td>
|
||||
<span class="fs-table-rank fs-table-rank--a">A</span>
|
||||
<span class={`fs-table-rank fs-table-rank--${rank}`}>{rank}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="fs-table-fcas-score">738</span>
|
||||
<span class="fs-table-fcas-score">{fcas.value}</span>
|
||||
</td>
|
||||
<td>
|
||||
7d
|
||||
<span class={`fs-table-trend fs-table-trend--${trendDir}`}>
|
||||
<img src={trendIcon} />2
|
||||
<span class={`fs-table-trend fs-table-trend--${fcas.trend}`}>
|
||||
{calculateDiff(fcas.value, fcas.percent_change)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th colspan="2">User Activity</th>
|
||||
<td>781</td>
|
||||
<td>{utility.value}</td>
|
||||
<td>
|
||||
7d
|
||||
<span class="fs-table-trend fs-table-trend--down">
|
||||
<img src={trendIcon} />2
|
||||
<span class={`fs-table-trend fs-table-trend--${utility.trend}`}>
|
||||
{calculateDiff(utility.value, utility.percent_change)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th colspan="2">Developer Behavior</th>
|
||||
<td>781</td>
|
||||
<td>{dev.value}</td>
|
||||
<td>
|
||||
7d
|
||||
<span class="fs-table-trend fs-table-trend--down">
|
||||
<img src={trendIcon} />2
|
||||
<span class={`fs-table-trend fs-table-trend--${dev.trend}`}>
|
||||
{calculateDiff(dev.value, dev.percent_change)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user