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

v1.16.1

Browse Source
This commit is contained in:
Jim Myers 2020-09-30 17:25:50 -04:00
parent b2bbc6b955
commit 730f24a797
6 changed files with 150 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -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.16.0.js"></script>
<script src="flipside-v1.16.1.js"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@ -60,19 +60,19 @@
<div id="chart"></div>
</div>
<div class="wrapper dark" style="background-color: #000000;">
<div class="wrapper dark" style="background-color: #000000">
<div id="chart2"></div>
</div>
<div class="wrapper"><div id="score"></div></div>
<div class="wrapper"><div id="widget-0" style="width: 289px;"></div></div>
<div class="wrapper"><div id="widget-0" style="width: 289px"></div></div>
<div class="wrapper" style="background-color: #000000;">
<div id="widget-1" style="width: 289px;"></div>
<div class="wrapper" style="background-color: #000000">
<div id="widget-1" style="width: 289px"></div>
</div>
<div class="wrapper" style="background-color: #33435e;">
<div class="wrapper" style="background-color: #33435e">
<div id="widget-2"></div>
</div>

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "flipside-js",
"version": "1.16.0",
"version": "1.16.1",
"description": "FlipsideJS provides a library embeddable widgets that display data from the Flipside Platform API, including FCAS.",
"main": "index.js",
"scripts": {

52
src/chart/index.tsx
View File

@ -49,11 +49,11 @@ class Chart extends Component<Props> {
static defaultProps: Partial<Props> = {
axisTitles: [],
mode: "light",
exportingEnabled: false
exportingEnabled: false,
};
state = {
loading: true
loading: true,
};
container: HTMLElement;
@ -75,7 +75,7 @@ class Chart extends Component<Props> {
data = await api.fetchTimeseries({
series: apiSeries,
start_date: startDate,
end_date: endDate
end_date: endDate,
});
if (data.data.data.length > 0) {
this.setState({ loading: false, data: data.data.data });
@ -103,24 +103,24 @@ class Chart extends Component<Props> {
{
series: loadedSeries,
chart: {
renderTo: this.container
renderTo: this.container,
},
title: {
text: this.props.title,
style: { color: textColor }
style: { color: textColor },
},
legend: {
enabled: series && series.length > 1,
itemStyle: { color: textColor },
itemHoverStyle: { color: textColor }
itemHoverStyle: { color: textColor },
},
tooltip: {
backgroundColor: tooltipBackground,
style: {
color: textColor
}
color: textColor,
},
},
rangeSelector: {
@ -128,16 +128,16 @@ class Chart extends Component<Props> {
states: {
select: {
style: {
color: mode === "dark" ? "#fff" : "#000"
}
}
}
}
color: mode === "dark" ? "#fff" : "#000",
},
},
},
},
},
xAxis: {
lineColor: gridLineColor,
tickColor: gridLineColor
tickColor: gridLineColor,
},
yAxis: [
@ -145,18 +145,18 @@ class Chart extends Component<Props> {
gridLineColor,
title: {
text: this.props.axisTitles[0],
style: { color: textColor }
}
style: { color: textColor },
},
}),
merge({}, DEFAULT_YAXIS, {
opposite: true,
gridLineColor,
title: {
text: this.props.axisTitles[1],
style: { color: textColor }
}
})
]
style: { color: textColor },
},
}),
],
},
rest
);
@ -175,7 +175,7 @@ class Chart extends Component<Props> {
theme: {
fill: "transparent",
cursor: "pointer",
states: { hover: { fill: "transparent", opacity: 0.7 } }
states: { hover: { fill: "transparent", opacity: 0.7 } },
},
menuItems: [
"downloadCSV",
@ -185,10 +185,10 @@ class Chart extends Component<Props> {
"downloadPNG",
"downloadJPEG",
"downloadPDF",
"downloadSVG"
]
}
}
"downloadSVG",
],
},
},
};
} else {
options.exporting = { enabled: false };
@ -208,7 +208,7 @@ class Chart extends Component<Props> {
style={{ display: "block", textAlign: "right" }}
/>
)}
<div ref={el => (this.container = el)} />
<div ref={(el) => (this.container = el)} />
</div>
);
}

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

@ -24,7 +24,58 @@ type State = {
class CustomLinks extends Component<Props, State> {
state: State = {
links: []
links: [],
};
topLinkref: any = null;
setTopLinkRef = (dom: any) => (this.topLinkref = dom);
rightLinkref: any = null;
setRightLinkRef = (dom: any) => (this.rightLinkref = dom);
leftLinkref: any = null;
setLeftLinkRef = (dom: any) => (this.leftLinkref = dom);
sendParentMessage = (link: string) => {
parent.postMessage(
{
flipside: {
type: "linkAction",
linkAction: { href: link },
},
},
"*"
);
};
onClickLink = (e: any) => {
e.stopPropagation();
e.cancelBubble;
let href;
if (!e.target || (e.target && !e.target.getAttribute)) {
href = "https://flipsidecrypto.com";
} else {
href = e.target.getAttribute("href");
}
try {
this.sendParentMessage(href);
} catch (e) {
console.log(e);
}
window.location.assign(href);
};
handleLink = (ref: any, linkType: string) => {
const linkParent = ref;
if (!linkParent) return;
const link = linkParent.children[0];
if (!link) return;
link.removeEventListener("click", this.onClickLink);
link.addEventListener("click", this.onClickLink);
};
async componentDidMount() {
@ -34,6 +85,14 @@ class CustomLinks extends Component<Props, State> {
}
const res = await this.props.api.fetchWidgetLinks(this.props.widget);
this.setState({ links: res.data });
let that = this;
let interval = setInterval(() => {
that.handleLink(this.topLinkref, "top");
that.handleLink(this.rightLinkref, "right");
that.handleLink(this.leftLinkref, "left");
}, 100);
setTimeout(() => clearInterval(interval), 5000);
}
render(props: Props, state: State) {
@ -42,7 +101,17 @@ class CustomLinks extends Component<Props, State> {
return (
<div class={css.wrapper} style={props.style}>
<span class={linkClass}>
<a href="https://flipsidecrypto.com/fcas">What's this?</a>
<a
href="https://flipsidecrypto.com/fcas"
onClick={(e) => {
e.stopPropagation();
e.cancelBubble;
this.sendParentMessage("https://flipsidecrypto.com/fcas");
window.location.assign("https://flipsidecrypto.com/fcas");
}}
>
What's this?
</a>
</span>
</div>
);
@ -51,22 +120,26 @@ class CustomLinks extends Component<Props, State> {
const leftLink = find(state.links, { name: "left_link" });
const rightLink = find(state.links, { name: "right_link" });
const topLink = find(state.links, { name: "top_link" });
return (
<div class={css.wrapper} style={props.style}>
{topLink && (
<span
ref={this.setTopLinkRef}
class={linkClass}
dangerouslySetInnerHTML={{ __html: topLink.link_html }}
/>
)}
{leftLink && (
<span
ref={this.setLeftLinkRef}
class={linkClass}
dangerouslySetInnerHTML={{ __html: leftLink.link_html }}
/>
)}
{rightLink && (
<span
ref={this.setRightLinkRef}
class={linkClass}
dangerouslySetInnerHTML={{ __html: rightLink.link_html }}
/>

3
src/dynamic/index.tsx
View File

@ -2,6 +2,7 @@ import loadJS from "load-js";
import API from "../api";
import template from "lodash/template";
import mapValues from "lodash/mapValues";
import { stringify } from "querystring";
type DynamicOpts = {
widgetId: string;
@ -42,7 +43,7 @@ function interpolateConfig(functionConfigTemplate: Object, data: Object): any {
const walk = (d: any): any => {
if (typeof d === "string") {
let n = parseInt(d);
if (!n) return d;
if (!n || (n && JSON.stringify(n).length != d.length)) return d;
return n;
}

55
src/frame/index.tsx
View File

@ -4,15 +4,18 @@ type Props = {
apiKey: string;
mode: string;
url: string;
width?: number;
height?: number;
width?: string;
height?: string;
data?: any;
messageKey?: string;
messagePayloadType?: string;
messagePayloadActionKey?: string;
};
type State = {};
type State = {
height: string;
width: string;
};
export default class Frame extends Component<Props, State> {
static defaultProps = {
@ -28,6 +31,10 @@ export default class Frame extends Component<Props, State> {
ref: any = null;
setRef = (dom: any) => (this.ref = dom);
handleResize = (height: string, width: string) => {
this.setState({ height: height, width: width });
};
handleMessage = (e: any) => {
const eventData = e.data;
if (!eventData) return;
@ -39,8 +46,16 @@ export default class Frame extends Component<Props, State> {
} = this.props;
const message = eventData[messageKey];
if (!message) return;
if (message.type == "sizeAction") {
return this.handleResize(
message["sizeAction"].height,
message["sizeAction"].width
);
}
if (message.type !== messagePayloadType) return;
const payload = message[messagePayloadType];
@ -52,10 +67,15 @@ export default class Frame extends Component<Props, State> {
window.location.assign(messageAction);
};
componentDidMount() {
componentWillMount() {
window.addEventListener("message", this.handleMessage, false);
if (!this.ref) return;
this.setState({
height: this.props.height,
width: this.props.width,
});
const widgetData = {
mode: this.props.mode,
data: this.props.data,
@ -73,15 +93,19 @@ export default class Frame extends Component<Props, State> {
},
},
};
this.ref.contentWindow.postMessage(
{
flipsidePartner: {
type: "widgetData",
widgetData: widgetData,
let that = this;
let interval = setInterval(() => {
that.ref.contentWindow.postMessage(
{
flipsidePartner: {
type: "widgetData",
widgetData: widgetData,
},
},
},
"*"
);
"*"
);
}, 200);
setTimeout(() => clearInterval(interval), 5000);
}
componentWillUnmount() {
@ -98,6 +122,7 @@ export default class Frame extends Component<Props, State> {
) {
urlParams = { ...props.data, ...urlParams };
}
const urlEncodedParams = new URLSearchParams(urlParams).toString();
url = `${url}?${urlEncodedParams}`;
@ -105,9 +130,9 @@ export default class Frame extends Component<Props, State> {
<iframe
ref={this.setRef}
src={url}
style={{ width: props.width, height: props.height, border: 0 }}
width={props.width}
height={props.height}
style={{ width: state.width, height: state.height, border: 0 }}
width={state.width}
height={state.height}
/>
);
}