Skip to content

Instantly share code, notes, and snippets.

@GordonSmith

GordonSmith/index.css

Last active December 20, 2017 07:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save GordonSmith/ef7a45ccce943a5cfc4917dff95fc818 to your computer and use it in GitHub Desktop.
Save GordonSmith/ef7a45ccce943a5cfc4917dff95fc818 to your computer and use it in GitHub Desktop.
Download ZIP
Dashy Generated Dashboard
Raw
index.css
body {
padding:0px;
margin:8px;
overflow:hidden;
}
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dashy Generated Dashboard 1</title>
<!-- Import the stylesheet. Will need to be "/www/index.css" when inside a template -->
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://unpkg.com/@hpcc-js/loader@0.0.61"></script>
<script>
var hpccLoader = window["@hpcc-js/loader"];
var require = hpccLoader.npm();
</script>
</head>
<body>
<div id="placeholder">
</div>
<script>
require(["index"], dashPOC => {
app = dashPOC.init();
doResize();
});
window.addEventListener('resize', doResize);
function doResize() {
let myWidth;
let myHeight;
if (typeof (window.innerWidth) == 'number') {
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else {
if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else {
if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
}
}
if (app) {
app
.resize({ width: myWidth - 16, height: myHeight - 16 })
.lazyRender();
}
};
</script>
</body>
</html>
Raw
index.js
define(["require", "exports", "@hpcc-js/composite", "@hpcc-js/marshaller", "@hpcc-js/map"], function (require, exports, composite, marshaller, map) {
"use strict";
map.topoJsonFolder("https://unpkg.com/@hpcc-js/map@0.0.59/TopoJSON");
// Dashboard Element Container (Model) ---
var ec = new marshaller.ElementContainer();
// Data Sources ---
var ds_3 = new marshaller.WUResult().url("http://52.51.90.23:8010").wuid("W20171220-053645").resultName("Result 1").samples(1).sampleSize(100000);
var ds_6 = new marshaller.RoxieRequest(ec).url("http://52.51.90.23:8010").querySet("roxie").queryID("peopleaccounts").resultName("Accounts").requestFields([{ source: "element_5", remoteFieldID: "personid", localFieldID: "personid" }]);
// Visualization Widgets (View) ---
var viz_3 = new composite.ChartPanel()
.id("viz_3")
.title("People Count")
.chartType("CHORO_USSTATES")
.chartTypeProperties({ projection: "AlbersUsaPr" });
var viz_4 = new composite.ChartPanel()
.id("viz_4")
.title("By Gender")
.chartType("BUBBLE")
.chartTypeProperties({});
var viz_5 = new composite.ChartPanel()
.id("viz_5")
.title("Customers")
.chartType("TABLE")
.chartTypeProperties({});
var viz_6 = new composite.ChartPanel()
.id("viz_6")
.title("Account Summary")
.chartType("LINE")
.chartTypeProperties({});
// Dashboard Elements (Controller) ---
var element_3 = new marshaller.Element(ec)
.id("element_3")
.pipeline([
ds_3,
new marshaller.GroupBy().fieldIDs(["state"]).aggregates([{ label: "Row Count", type: "count" }])
])
.widget(viz_3)
.on("selectionChanged", function () {
element_5.refresh();
}, true);
ec.append(element_3);
var element_4 = new marshaller.Element(ec)
.id("element_4")
.pipeline([
ds_3,
new marshaller.GroupBy().fieldIDs(["gender"]).aggregates([{ label: "Row Count", type: "count" }]),
new marshaller.Sort().conditions([{ fieldID: "gender", descending: true }])
])
.widget(viz_4)
.on("selectionChanged", function () {
element_5.refresh();
}, true);
ec.append(element_4);
var element_5 = new marshaller.Element(ec)
.id("element_5")
.pipeline([
ds_3,
new marshaller.Filters(ec).conditions([{ viewID: "element_3", nullable: false, mappings: [{ remoteFieldID: "state", localFieldID: "state", condition: "==" }] }, { viewID: "element_4", nullable: true, mappings: [{ remoteFieldID: "gender", localFieldID: "gender", condition: "==" }] }]),
new marshaller.Sort().conditions([{ fieldID: "lastname", descending: false }, { fieldID: "firstname", descending: false }])
])
.widget(viz_5)
.on("selectionChanged", function () {
element_6.refresh();
}, true);
ec.append(element_5);
var element_6 = new marshaller.Element(ec)
.id("element_6")
.pipeline([
ds_6,
new marshaller.GroupBy().fieldIDs(["account"]).aggregates([{ label: "Balance", type: "sum", fieldID: "balance" }, { label: "Credit", type: "sum", fieldID: "highcredit" }]),
new marshaller.Sort().conditions([{ fieldID: "Credit", descending: true }])
])
.widget(viz_6)
.on("selectionChanged", function () {
}, true);
ec.append(element_6);
ec.refresh();
// Dashboard (optional) ---
var dashboard = new marshaller.Dashboard(ec)
.target("placeholder")
.render(function (w) {
w.layout({ main: { type: "split-area", orientation: "vertical", children: [{ type: "split-area", orientation: "horizontal", children: [{ type: "tab-area", widgets: [{ __id: "viz_3" }], currentIndex: 0 }, { type: "tab-area", widgets: [{ __id: "viz_4" }], currentIndex: 0 }], sizes: [0.5, 0.5] }, { type: "tab-area", widgets: [{ __id: "viz_5" }], currentIndex: 0 }, { type: "tab-area", widgets: [{ __id: "viz_6" }], currentIndex: 0 }], sizes: [0.27343749999999994, 0.35705140147067554, 0.3695110985293245] } });
});
function init(target) {
return dashboard;
}
exports.init = init;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment