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

update config fields for rows and others. added default props

Browse Source
This commit is contained in:
Bryan Cinman 2019-01-31 05:52:38 -05:00
parent 3f553a851d
commit ea8acb6e1e
11 changed files with 188 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -57,8 +57,8 @@
enabled: true,
bucketDistance: 35,
lineDistance: 25,
color: null,
fontFamily: "inherit"
color: "purple",
fontFamily: "Georgia"
},
name: { enabled: true, style: {} },
spectrum: { enabled: true },
@ -84,7 +84,9 @@
],
mode: "dark",
bucketDistance: 100,
highlights: ["BTC", "ETH", "eos", "nmr", "ltc", "gnt", "rep", "mln"]
relatedMarkers: {
color: "red"
}
});
flipside.createTable("widget-2", "btc", {

14
src/api.ts
View File

@ -70,4 +70,18 @@ export default class API {
}) {
return await this.client.post(`/assets/metrics`, payload);
}
async fetchWidgetLinks(slug: WidgetLinksSlug): Promise<WidgetLinksResponse> {
return await this.client.get(`/widgets/${slug}/links`);
}
}
export type WidgetLinksSlug = "spectrum" | "multi-table" | "table";
export type WidgetLinksLink = {
widget_id: string;
name: string;
link_html: string;
};
export type WidgetLinksResponse = {
data: WidgetLinksLink[];
};

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

@ -1,17 +1,35 @@
import { h } from "preact";
import { h, Component, render } from "preact";
import "./style.scss";
import API, { WidgetLinksLink } from "../../api";
const CustomLinks = () => {
return (
<div class="fs-links">
<p class="fs-links-line1">
Powered by <a href="https://flipsidecrypto.com">Flipside Crypto</a>
</p>
<p class="fs-links-line2">
<a href="https://flipsidecrypto.com/fcas">What's FCAS?</a>
</p>
</div>
);
type Props = {
widget: "spectrum" | "multi-table" | "table";
api: API;
};
type State = {
links: WidgetLinksLink[];
};
class CustomLinks extends Component<Props, State> {
state: State = {
links: []
};
async componentDidMount() {
const res = await this.props.api.fetchWidgetLinks(this.props.widget);
this.setState({ links: res.data });
}
render() {
return (
<div class="fs-links">
{this.state.links.map(link => (
<p dangerouslySetInnerHTML={{ __html: link.link_html }} />
))}
</div>
);
}
}
export default CustomLinks;

50
src/components/rank/index.tsx
View File

@ -1,25 +1,41 @@
import { h } from "preact";
import { h, Component } from "preact";
import "./style.scss";
type Props = {
score: number;
};
const Rank = (props: Props) => {
let rank;
if (props.score <= 500) {
rank = "f";
} else if (props.score <= 649) {
rank = "c";
} else if (props.score <= 749) {
rank = "b";
} else if (props.score <= 899) {
rank = "a";
} else {
rank = "s";
}
return <span class={`fs-rank fs-rank-${rank}`} />;
type State = {
showTooltip: boolean;
};
export default Rank;
export default class Rank extends Component<Props, State> {
state: State = {
showTooltip: false
};
showTooltip = () => {
this.setState({ showTooltip: true });
};
hideTooltip = () => {
this.setState({ showTooltip: false });
};
render(props: Props) {
let rank;
if (props.score <= 500) {
rank = "f";
} else if (props.score <= 649) {
rank = "c";
} else if (props.score <= 749) {
rank = "b";
} else if (props.score <= 899) {
rank = "a";
} else {
rank = "s";
}
return <span class={`fs-rank fs-rank-${rank}`} />;
}
}

9
src/components/rank/style.scss
View File

@ -5,6 +5,7 @@
background-size: 4 8px;
height: 14px;
width: 32px;
position: relative;
&-s {
background-color: #68ba66;
background-image: url(./images/S.svg);
@ -25,4 +26,12 @@
background-color: #ff2600;
background-image: url(./images/F.svg);
}
&-tooltip {
position: absolute;
top: 10px;
left: 0;
background: red;
z-index: 1;
}
}

28
src/index.tsx
View File

@ -4,7 +4,7 @@ import Table from "./table";
import SpectrumPlot, { Props as SpectrumPlotProps } from "./spectrumPlot";
import MultiTable, { Props as MultiTableProps } from "./multiTable";
type MultiTableOpts = {};
import defaultsDeep = require("lodash/defaultsDeep");
export default class Flipside {
api: API;
@ -15,12 +15,15 @@ export default class Flipside {
multiTable(el: string, opts: MultiTableProps) {
const element = document.getElementById(el);
render(<MultiTable {...opts} api={this.api} />, element);
const props = defaultsDeep(opts, MultiTable.defaultProps);
render(<MultiTable {...props} api={this.api} />, element);
}
spectrum(el: string, opts: SpectrumPlotProps): void {
const element = document.getElementById(el);
render(<SpectrumPlot {...opts} api={this.api} />, element);
const props = defaultsDeep(opts, SpectrumPlot.defaultProps);
console.log(props);
render(<SpectrumPlot {...props} api={this.api} />, element);
}
createTable(el: string, symbol: string, opts: object) {
@ -32,25 +35,6 @@ export default class Flipside {
const element = typeof el === "string" ? document.getElementById(el) : el;
render(<Table symbol={symbol} api={this.api} {...mergedOpts} />, element);
}
// createFCAS(el: string, symbol: string, opts: object) {
// symbol = symbol.toLowerCase();
// const defaults = {
// score: true,
// plot: true,
// symbol: true,
// logo: true,
// trend: true,
// rank: true,
// header: true,
// dark: false
// };
// const mergedOpts = Object.assign({}, defaults, opts);
// const element = typeof el === "string" ? document.getElementById(el) : el;
// render(<FCAS symbol={symbol} api={this.api} opts={mergedOpts} />, element);
// }
}
declare global {

15
src/multiTable/index.tsx
View File

@ -85,7 +85,6 @@ export type Props = {
changeOver?: number;
};
headers?: {
color?: string;
style?: object;
};
rows?: {
@ -127,11 +126,10 @@ export default class MultiTable extends Component<Props, State> {
};
}
static defaultProps = {
static defaultProps: Props = {
mode: "light",
limit: 10,
page: 1,
sortBy: "fcas",
fontFamily: "inherit",
columns: [
"trend",
@ -140,8 +138,13 @@ export default class MultiTable extends Component<Props, State> {
"marketMaturity",
"rank"
],
headers: {
style: {}
},
rows: {
alternating: true
alternating: true,
alternatingColors: [],
dividers: false
},
trend: {
changeOver: 7
@ -202,7 +205,7 @@ export default class MultiTable extends Component<Props, State> {
{props.title.text}
</h1>
)}
<CustomLinks />
<CustomLinks widget="multi-table" api={this.props.api} />
</header>
<table>
@ -215,7 +218,7 @@ export default class MultiTable extends Component<Props, State> {
});
return (
<th class={classes} onClick={() => this.handleSort(col)}>
<div class="fs-multi-colhead">
<div class="fs-multi-colhead" style={props.headers.style}>
{column.sortKey && (
<span
class={classnames(

44
src/spectrumPlot/index.tsx
View File

@ -38,21 +38,6 @@ type State = {
};
class SpectrumPlot extends Component<Props, State> {
static defaultProps: Props = {
asset: {
symbol: "btc",
highlights: ["eth", "zec", "zrx"]
},
mode: "light",
fontFamily: "inherit",
relatedMarkers: { enabled: true, bucketDistance: 35, lineDistance: 25 },
name: { enabled: true },
spectrum: { enabled: true },
icon: { enabled: true },
rank: { enabled: true },
trend: { enabled: true }
};
interval: NodeJS.Timeout;
constructor() {
@ -114,9 +99,7 @@ class SpectrumPlot extends Component<Props, State> {
return (
<div>
<Score symbol={props.asset.symbol} metric={metric} {...props} mini />
{props.spectrum.enabled && (
<Plot symbol={props.asset.symbol} metric={metric} {...props} mini />
)}
{props.spectrum.enabled && <Plot metric={metric} {...props} />}
</div>
);
}
@ -131,13 +114,34 @@ export default class Carousel extends Component<Props, CarouselState> {
currentSlide: 0
};
static defaultProps: Props = {
asset: {
symbol: "btc",
highlights: ["eth", "zec", "zrx"]
},
assets: [],
mode: "light",
fontFamily: "inherit",
relatedMarkers: {
enabled: true,
bucketDistance: 35,
lineDistance: 25,
fontFamily: "inherit"
},
name: { enabled: true },
spectrum: { enabled: true },
icon: { enabled: true },
rank: { enabled: true },
trend: { enabled: true }
};
slideTo = (slide: number) => {
this.setState({ currentSlide: slide });
};
render(props: Props, state: CarouselState) {
let assets = [props.asset];
if (props.assets && props.assets.length > 0) {
if (props.assets.length > 0) {
assets = props.assets;
}
const carouselOffset = state.currentSlide * 100;
@ -155,7 +159,7 @@ export default class Carousel extends Component<Props, CarouselState> {
</div>
</div>
<CustomLinks />
<CustomLinks widget="spectrum" api={this.props.api} />
{assets.length > 1 && (
<div class="fs-spectrum-dots">

44
src/spectrumPlot/plot/index.js
View File

@ -190,6 +190,18 @@ export default class Plot extends Component {
const { buckets, scoresToBuckets } = this.getBuckets();
let relatedLabelStyle = {};
let relatedLineStyle = {};
if (props.relatedMarkers) {
relatedLabelStyle = {
fill: props.relatedMarkers.color,
fontFamily: props.relatedMarkers.fontFamily
};
relatedLineStyle = {
stroke: props.relatedMarkers.color
};
}
return (
<svg class="fs-plot" width="100%" height="104" overflow="visible">
<defs>
@ -224,10 +236,10 @@ export default class Plot extends Component {
{/* Gradient Line */}
<rect x="0" y="64" width="100%" height="6" fill="url(#gradient)" />
{/* Line Labels */}
{/* Spectrum Legend */}
<text
y="85"
class="fs-plot__x"
class="fs-plot-legend"
fill={props.mode === "dark" ? "#fff" : "#000"}
>
<tspan text-anchor="start" x="0">
@ -246,7 +258,7 @@ export default class Plot extends Component {
const xPos = `${(a.value / 1000) * 100}%`;
let { y, toClose } = this.getYCoords(a, buckets, scoresToBuckets);
return (
<g fill={props.mode === "dark" ? "#fff" : "#000"}>
<g class="fs-plot-related" style={relatedLabelStyle}>
<text x={xPos} y={y} text-anchor="middle" font-size="10">
{a.symbol}
</text>
@ -256,9 +268,8 @@ export default class Plot extends Component {
y1={y + 3}
x2={xPos}
y2="60"
style={`stroke:rgb(${
props.mode === "dark" ? "255, 255, 255" : "0,0,0"
}); stroke-width:0.5`}
class="fs-plot-related-line"
style={relatedLineStyle}
/>
)}
</g>
@ -266,25 +277,18 @@ export default class Plot extends Component {
})}
{/* Blue FCAS Marker */}
<text class="fs-plot__blue" text-anchor="middle" font-weight="bold">
<tspan x={xPos} y={props.mini ? 26 : 14}>
<text
class="fs-plot-asset-marker"
text-anchor="middle"
font-weight="bold"
>
<tspan x={xPos} y={26}>
{props.asset.symbol.toUpperCase()}
</tspan>
{!props.mini && (
<tspan x={xPos} y="104">
{props.metric.fcas}
</tspan>
)}
</text>
{/* Blue FCAS Marker Line */}
<line
x1={xPos}
y1={props.mini ? 28 : 16}
x2={xPos}
y2={props.mini ? 60 : 92}
style="stroke:rgb(45,87,237); stroke-width:1"
/>
<line x1={xPos} y1={28} x2={xPos} y2={60} class="fs-plot-asset-line" />
</svg>
);
}

13
src/spectrumPlot/plot/styles.scss
View File

@ -1,8 +1,15 @@
.fs-plot__blue {
fill: #2d57ed;
.fs-plot-asset-marker {
font-size: 12px;
}
.fs-plot__x {
.fs-plot-asset-line {
stroke-width: 1;
}
.fs-plot-related-line {
stroke-width: 0.5;
}
.fs-plot-legend {
font-size: 7px;
}

24
src/spectrumPlot/styles.scss
View File

@ -44,6 +44,18 @@
background: rgba(0, 0, 0, 1);
}
}
.fs-plot-asset-marker {
fill: #2d57ed;
}
.fs-plot-asset-line {
stroke: #2d57ed;
}
.fs-plot-related {
fill: #000;
}
.fs-plot-related-line {
stroke: #000;
}
}
.fs-spectrum-dark {
@ -57,6 +69,18 @@
background: rgba(255, 255, 255, 1);
}
}
.fs-plot-asset-marker {
fill: #20b7fc;
}
.fs-plot-asset-line {
stroke: #20b7fc;
}
.fs-plot-related {
fill: #fff;
}
.fs-plot-related-line {
stroke: #fff;
}
}
.fs-link {