flip/flipside-js
1
0
Fork 0
mirror of https://github.com/FlipsideCrypto/flipside-js.git synced 2026-02-06 10:48:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

allow lodash function import with es6 syntax, start chart widget

Browse Source
This commit is contained in:
Bryan Cinman 2019-02-14 04:28:47 -05:00
parent 256a9fe375
commit 6c351d1c28
13 changed files with 2037 additions and 1774 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,4 +1,5 @@
.vscode/
.DS_STORE
node_modules/
dist/
dist/
.log

10
index.html
View File

@ -36,6 +36,8 @@
</style>
</head>
<body>
<div class="wrapper"><div id="chart"></div></div>
<div class="wrapper"><div id="score"></div></div>
<div class="wrapper"><div id="widget-0" style="width: 289px;"></div></div>
@ -52,6 +54,14 @@
<script>
const flipside = new Flipside("a7936778-4f87-4790-889f-3ab617271458");
flipside.chart("chart", {
series: [
{ symbol: "btc", metric: "fcas", type: "line", yAxis: 0 },
{ symbol: "btc", metric: "mavg_value", type: "line", yAxis: 1 }
]
});
flipside.spectrum("widget-0", {
asset: {
symbol: "nmr",

3
package.json
View File

@ -13,6 +13,7 @@
"dependencies": {
"axios": "^0.18.0",
"classnames": "^2.2.6",
"highcharts": "^7.0.3",
"lodash": "^4.17.11",
"preact": "^8.3.1"
},
@ -32,7 +33,7 @@
"typescript": "^3.2.4",
"url-loader": "^1.1.2",
"webpack": "^4.26.0",
"webpack-bundle-analyzer": "^3.0.3",
"webpack-bundle-analyzer": "^3.0.4",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}

180
src/chart/index.tsx Normal file
View File

@ -0,0 +1,180 @@
import { h, Component } from "preact";
import Highcharts, { SeriesLineOptions } from "highcharts";
import API from "../api";
const mockData = {
columns: ["date", "symbol", "fcas", "mavg_value"],
prefixes: ["", "", "", "$"],
data: [
["2018-11-13T00:00:00.000000", "BTC", 886.0, 886.0],
["2018-11-14T00:00:00.000000", "BTC", 887.0, 886.5],
["2018-11-15T00:00:00.000000", "BTC", 885.0, 886.0],
["2018-11-16T00:00:00.000000", "BTC", 884.0, 885.5],
["2018-11-17T00:00:00.000000", "BTC", 884.0, 885.2],
["2018-11-18T00:00:00.000000", "BTC", 885.0, 885.1666666666666],
["2018-11-19T00:00:00.000000", "BTC", 887.0, 885.4285714285714],
["2018-11-20T00:00:00.000000", "BTC", 886.0, 885.5],
["2018-11-21T00:00:00.000000", "BTC", 886.0, 885.5555555555555],
["2018-11-22T00:00:00.000000", "BTC", 886.0, 885.6],
["2018-11-23T00:00:00.000000", "BTC", 885.0, 885.5454545454545],
["2018-11-24T00:00:00.000000", "BTC", 884.0, 885.4166666666666],
["2018-11-25T00:00:00.000000", "BTC", 882.0, 885.1538461538462],
["2018-11-26T00:00:00.000000", "BTC", 883.0, 885.0],
["2018-11-27T00:00:00.000000", "BTC", 884.0, 884.9333333333333],
["2018-11-28T00:00:00.000000", "BTC", 887.0, 885.0625],
["2018-11-29T00:00:00.000000", "BTC", 891.0, 885.4117647058823],
["2018-11-30T00:00:00.000000", "BTC", 894.0, 885.8888888888889],
["2018-12-01T00:00:00.000000", "BTC", 895.0, 886.3684210526316],
["2018-12-02T00:00:00.000000", "BTC", 895.0, 886.8],
["2018-12-03T00:00:00.000000", "BTC", 895.0, 887.1904761904761],
["2018-12-04T00:00:00.000000", "BTC", 895.0, 887.5454545454545],
["2018-12-05T00:00:00.000000", "BTC", 894.0, 887.8260869565217],
["2018-12-06T00:00:00.000000", "BTC", 892.0, 888.0],
["2018-12-07T00:00:00.000000", "BTC", 891.0, 888.12],
["2018-12-08T00:00:00.000000", "BTC", 891.0, 888.2307692307693],
["2018-12-09T00:00:00.000000", "BTC", 889.0, 888.2592592592592],
["2018-12-10T00:00:00.000000", "BTC", 886.0, 888.1785714285714],
["2018-12-11T00:00:00.000000", "BTC", 884.0, 888.0344827586207],
["2018-12-12T00:00:00.000000", "BTC", 885.0, 887.9333333333333],
["2018-12-13T00:00:00.000000", "BTC", 885.0, 887.8387096774194],
["2018-12-14T00:00:00.000000", "BTC", 886.0, 887.78125],
["2018-12-15T00:00:00.000000", "BTC", 886.0, 887.7272727272727],
["2018-12-16T00:00:00.000000", "BTC", 885.0, 887.6470588235294],
["2018-12-17T00:00:00.000000", "BTC", 887.0, 887.6285714285714],
["2018-12-18T00:00:00.000000", "BTC", 886.0, 887.5833333333334],
["2018-12-19T00:00:00.000000", "BTC", 884.0, 887.4864864864865],
["2018-12-20T00:00:00.000000", "BTC", 883.0, 887.3684210526316],
["2018-12-21T00:00:00.000000", "BTC", 884.0, 887.2820512820513],
["2018-12-22T00:00:00.000000", "BTC", 884.0, 887.2],
["2018-12-23T00:00:00.000000", "BTC", 883.0, 887.0975609756098],
["2018-12-24T00:00:00.000000", "BTC", 882.0, 886.9761904761905],
["2018-12-25T00:00:00.000000", "BTC", 882.0, 886.8604651162791],
["2018-12-26T00:00:00.000000", "BTC", 884.0, 886.7954545454545],
["2018-12-27T00:00:00.000000", "BTC", 884.0, 886.7333333333333],
["2018-12-28T00:00:00.000000", "BTC", 882.0, 886.6304347826087],
["2018-12-29T00:00:00.000000", "BTC", 880.0, 886.4893617021277],
["2018-12-30T00:00:00.000000", "BTC", 881.0, 886.375],
["2018-12-31T00:00:00.000000", "BTC", 881.0, 886.265306122449],
["2019-01-01T00:00:00.000000", "BTC", 882.0, 886.18],
["2019-01-02T00:00:00.000000", "BTC", 884.0, 886.1372549019608],
["2019-01-03T00:00:00.000000", "BTC", 887.0, 886.1538461538462],
["2019-01-04T00:00:00.000000", "BTC", 890.0, 886.2264150943396],
["2019-01-05T00:00:00.000000", "BTC", 892.0, 886.3333333333334],
["2019-01-06T00:00:00.000000", "BTC", 892.0, 886.4363636363636],
["2019-01-07T00:00:00.000000", "BTC", 893.0, 886.5535714285714],
["2019-01-08T00:00:00.000000", "BTC", 895.0, 886.7017543859649],
["2019-01-09T00:00:00.000000", "BTC", 896.0, 886.8620689655172],
["2019-01-10T00:00:00.000000", "BTC", 895.0, 887.0],
["2019-01-11T00:00:00.000000", "BTC", 895.0, 887.1333333333333],
["2019-01-12T00:00:00.000000", "BTC", 894.0, 887.2459016393443],
["2019-01-13T00:00:00.000000", "BTC", 891.0, 887.3064516129032],
["2019-01-14T00:00:00.000000", "BTC", 889.0, 887.3333333333334],
["2019-01-15T00:00:00.000000", "BTC", 888.0, 887.34375],
["2019-01-16T00:00:00.000000", "BTC", 888.0, 887.3538461538461],
["2019-01-17T00:00:00.000000", "BTC", 889.0, 887.3787878787879],
["2019-01-18T00:00:00.000000", "BTC", 889.0, 887.4029850746268],
["2019-01-19T00:00:00.000000", "BTC", 890.0, 887.4411764705883],
["2019-01-20T00:00:00.000000", "BTC", 888.0, 887.4492753623189],
["2019-01-21T00:00:00.000000", "BTC", 885.0, 887.4142857142857],
["2019-01-22T00:00:00.000000", "BTC", 885.0, 887.3802816901408],
["2019-01-23T00:00:00.000000", "BTC", 884.0, 887.3333333333334],
["2019-01-24T00:00:00.000000", "BTC", 882.0, 887.2602739726027],
["2019-01-25T00:00:00.000000", "BTC", 881.0, 887.1756756756756],
["2019-01-26T00:00:00.000000", "BTC", 880.0, 887.08],
["2019-01-27T00:00:00.000000", "BTC", 880.0, 886.9868421052631],
["2019-01-28T00:00:00.000000", "BTC", 881.0, 886.9090909090909],
["2019-01-29T00:00:00.000000", "BTC", 883.0, 886.8589743589744],
["2019-01-30T00:00:00.000000", "BTC", 883.0, 886.8101265822785],
["2019-01-31T00:00:00.000000", "BTC", 883.0, 886.7625],
["2019-02-01T00:00:00.000000", "BTC", 881.0, 886.6913580246913],
["2019-02-02T00:00:00.000000", "BTC", 879.0, 886.5975609756098],
["2019-02-03T00:00:00.000000", "BTC", 879.0, 886.5060240963855],
["2019-02-04T00:00:00.000000", "BTC", 876.0, 886.3809523809524],
["2019-02-05T00:00:00.000000", "BTC", 874.0, 886.2352941176471],
["2019-02-06T00:00:00.000000", "BTC", 874.0, 886.0930232558139],
["2019-02-07T00:00:00.000000", "BTC", 875.0, 885.9655172413793],
["2019-02-08T00:00:00.000000", "BTC", 878.0, 885.875],
["2019-02-09T00:00:00.000000", "BTC", 877.0, 885.7752808988764],
["2019-02-10T00:00:00.000000", "BTC", 878.0, 885.6888888888889],
["2019-02-11T00:00:00.000000", "BTC", 878.0, 885.6043956043956]
]
};
type ChartType = "line" | "bar";
type ChartAxis = "left" | "right";
type ChartSeries = {
symbol: string;
metric: string;
type: ChartType;
yAxis?: ChartAxis;
};
export type Props = {
series: ChartSeries[];
api: API;
};
class Chart extends Component<Props> {
container: HTMLElement;
componentDidMount() {
const zippedData = mockData.data.map(r => {
return r.reduce(
(acc, v, i) => {
acc[mockData.columns[i]] = v;
return acc;
},
{} as any
);
});
const series = this.props.series.map(s => {
const data = zippedData
.filter(r => r.symbol === s.symbol.toUpperCase())
.map(r => [r.date, r[s.metric]]);
return { name: s.metric, yAxis: s.yAxis, data } as SeriesLineOptions;
});
Highcharts.chart({
legend: {
enabled: false
},
colors: ["#F5A623", "#2D57ED", "#48A748", "#006093", "#5A2788"],
chart: {
renderTo: this.container
},
title: {
text: undefined
},
tooltip: {
split: true
},
credits: {
enabled: false
},
xAxis: {
type: "datetime",
crosshair: true,
labels: { style: { color: "#9B9B9B" } }
},
yAxis: [
{
title: { text: undefined },
labels: { style: { color: "#9B9B9B" } }
},
{
title: { text: undefined },
labels: { style: { color: "#9B9B9B" } },
opposite: true
}
],
series: series
});
}
render() {
return <div ref={el => (this.container = el)} />;
}
}
export default Chart;

2
src/components/customLinks/index.tsx
View File

@ -1,6 +1,6 @@
import { h, Component, render } from "preact";
import API, { WidgetLinksLink } from "../../api";
import find = require("lodash/find");
import find from "lodash/find";
import classNames from "classnames";
import * as css from "./style.css";

5
src/index.tsx
View File

@ -5,6 +5,7 @@ import { defaultsWithoutArrays } from "./utils";
import SpectrumPlot, { Props as SpectrumPlotProps } from "./spectrumPlot";
import MultiTable, { Props as MultiTableProps } from "./multiTable";
import Score, { Props as ScoreProps } from "./score";
import Chart, { Props as ChartProps } from "./chart";
export default class Flipside {
api: API;
@ -29,6 +30,10 @@ export default class Flipside {
render(<Score {...opts} api={this.api} />, document.getElementById(el));
}
chart(el: string, opts: ChartProps) {
render(<Chart {...opts} api={this.api} />, document.getElementById(el));
}
createTable(el: string, symbol: string, opts: object) {
const defaults = {
dark: false

2
src/table/components/customLinks/index.tsx
View File

@ -1,7 +1,7 @@
import { h, Component, render } from "preact";
import "./style.scss";
import API, { WidgetLinksLink } from "../../../api";
import find = require("lodash/find");
import find from "lodash/find";
type Props = {
widget: "spectrum" | "multi-table" | "table";

4
src/utils.ts
View File

@ -1,5 +1,5 @@
import isArray = require("lodash/isArray");
import mergeWith = require("lodash/mergeWith");
import isArray from "lodash/isArray";
import mergeWith from "lodash/mergeWith";
export const compare = (key: string) => {
return (a: any, b: any) => {

3562
stats.json
View File

File diff suppressed because one or more lines are too long

3
tsconfig.json
View File

@ -7,6 +7,7 @@
"target": "es6",
"jsx": "react",
"jsxFactory": "h",
"allowJs": true
"allowJs": true,
"esModuleInterop": true
}
}

6
webpack.config.js
View File

@ -1,6 +1,7 @@
const path = require("path");
let version = require("./package.json").version;
let filename = `flipside-v${version}.js`;
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const version = require("./package.json").version;
const filename = `flipside-v${version}.js`;
module.exports = {
entry: "./src/index.tsx",
@ -13,6 +14,7 @@ module.exports = {
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
plugins: [new BundleAnalyzerPlugin()],
module: {
rules: [
{ test: /\.tsx?$/, use: "ts-loader", exclude: /node_modules/ },

21
yarn-error.log
View File

@ -1,5 +1,5 @@
Arguments:
/usr/local/bin/node /usr/local/Cellar/yarn/1.5.1_1/libexec/bin/yarn.js run dev
/usr/local/bin/node /usr/local/Cellar/yarn/1.5.1_1/libexec/bin/yarn.js build
PATH:
/Users/bryan/google-cloud-sdk/bin:./bin:/usr/local/bin:/usr/local/sbin:/Users/bryan/.dotfiles/bin:/Users/bryan/Code/go/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/share/dotnet:~/.dotnet/tools:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Users/bryan/google-cloud-sdk/bin:./bin:/usr/local/sbin:/Users/bryan/.dotfiles/bin:/Users/bryan/Code/go/bin:/usr/local/Cellar/node/8.1.3/bin:/usr/local/opt/go/libexec/bin:/usr/local/Cellar/node/8.1.3/bin:/usr/local/opt/go/libexec/bin:/Users/bryan/Code/go/bin
@ -20,15 +20,16 @@ npm manifest:
"description": "FlipsideJS provides a library embeddable widgets that display data from the Flipside Platform API, including FCAS.",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server",
"start": "webpack-dev-server",
"build": "webpack -p --env production",
"build:stats": "webpack --env production --json > stats.json"
"build:stats": "webpack -p --env production --json > stats.json"
},
"author": "Flipsidecrypto.com <hello@flipsidecrypto.com>",
"license": "MIT",
"dependencies": {
"axios": "^0.18.0",
"classnames": "^2.2.6",
"highcharts": "^7.0.3",
"lodash": "^4.17.11",
"preact": "^8.3.1"
},
@ -48,7 +49,7 @@ npm manifest:
"typescript": "^3.2.4",
"url-loader": "^1.1.2",
"webpack": "^4.26.0",
"webpack-bundle-analyzer": "^3.0.3",
"webpack-bundle-analyzer": "^3.0.4",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
@ -1911,6 +1912,10 @@ Lockfile:
inherits "^2.0.3"
minimalistic-assert "^1.0.1"
highcharts@^7.0.3:
version "7.0.3"
resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-7.0.3.tgz#0c8edb578bae28774b9f0d49cf1ae4887b126305"
hmac-drbg@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@ -4288,9 +4293,9 @@ Lockfile:
dependencies:
minimalistic-assert "^1.0.0"
webpack-bundle-analyzer@^3.0.3:
version "3.0.3"
resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.0.3.tgz#dbc7fff8f52058b6714a20fddf309d0790e3e0a0"
webpack-bundle-analyzer@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.0.4.tgz#095638487a664162f19e3b2fb7e621b7002af4b8"
dependencies:
acorn "^5.7.3"
bfj "^6.1.1"
@ -4558,7 +4563,7 @@ Trace:
Error: Command failed.
Exit code: 1
Command: sh
Arguments: -c webpack-dev-server
Arguments: -c webpack -p --env production
Directory: /Users/bryan/Code/flipside-js
Output:

10
yarn.lock
View File

@ -1851,6 +1851,10 @@ hash.js@^1.0.0, hash.js@^1.0.3:
inherits "^2.0.3"
minimalistic-assert "^1.0.1"
highcharts@^7.0.3:
version "7.0.3"
resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-7.0.3.tgz#0c8edb578bae28774b9f0d49cf1ae4887b126305"
hmac-drbg@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@ -4228,9 +4232,9 @@ wbuf@^1.1.0, wbuf@^1.7.2:
dependencies:
minimalistic-assert "^1.0.0"
webpack-bundle-analyzer@^3.0.3:
version "3.0.3"
resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.0.3.tgz#dbc7fff8f52058b6714a20fddf309d0790e3e0a0"
webpack-bundle-analyzer@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.0.4.tgz#095638487a664162f19e3b2fb7e621b7002af4b8"
dependencies:
acorn "^5.7.3"
bfj "^6.1.1"