keen-dashboard-builder
Version:
Dashboard builder for Keen.io
113 lines (102 loc) • 3.2 kB
JavaScript
/* global KEEN_DASHBOARD_BUILDER_VERSION */
import React, { useEffect, useContext } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import Prism from 'prismjs';
import { toggleDashboardsMenu, setAccessKey } from '../../actions/rootActions';
import getKeyFromAPI from '../../func/getKeyFromAPI';
import copyToClipboard from '../../func/copyToClipboard';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import KeenAnalysisContext from '../../contexts/keenAnalysis';
const EmbedDashboards = props => {
const keenAnalysis = useContext(KeenAnalysisContext);
useEffect(() => {
if (!props.accessKey) {
getKeyFromAPI(props.dashboardInfo.data, props.id, keenAnalysis).then(
data => props.setAccessKey(data)
);
}
}, []);
const code = `
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap" rel="stylesheet">
<script crossorigin src="https://cdn.jsdelivr.net/npm/keen-dashboard-builder@${KEEN_DASHBOARD_BUILDER_VERSION}/dist/viewer.min.js"></script>
<style>
.keen-dataviz {
font-family: "Gotham Rounded SSm A","Gotham Rounded SSm B",Quicksand,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
</style>
</head>
<body>
<div id="viewer"></div>
<script>
const url = "https://keen.io/dashboard/${props.dashboardInfo.id}";
fetch(url)
.then(res => res.json())
.then(data => {
const projectId = "${props.dashboardInfo.project_id}";
const masterKey = "${props.accessKey}";
const dashboardInfo = data;
const myDashboardViewer = new DashboardViewer({
container: "#viewer",
isDashboardPublic: true,
dashboardInfo,
keenAnalysis: {
config: {
projectId,
masterKey,
}
}
});
})
.catch(e => console.error(e))
</script>
</body>
</html>`;
const prismedHtml = Prism.highlight(code, Prism.languages.html, 'html');
return (
<div className="embed-dashboard modal">
<div className="modal-header">
Embed Dashboard
<FontAwesomeIcon
icon="times"
size="sm"
onClick={() => props.toggleDashboardsMenu()}
/>
</div>
<div className="modal-body">
<div
className="prism"
dangerouslySetInnerHTML={{ __html: prismedHtml }}
/>
<button
type="button"
className="modal-button"
onClick={() => copyToClipboard(code)}
>
<FontAwesomeIcon icon="copy" size="sm" />
COPY
</button>
</div>
</div>
);
};
const mapStateToProps = state => {
const { dashboardInfo, accessKey } = state.app;
return {
dashboardInfo,
accessKey
};
};
const mapDispatchToProps = {
toggleDashboardsMenu,
setAccessKey: value => setAccessKey(value)
};
export default withRouter(
connect(
mapStateToProps,
mapDispatchToProps
)(EmbedDashboards)
);