Snippets
Created by
Piotr Szrajber
last modified
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | //# sourceURL=customization.js
/**
* Synchronize chart from stage B with map from stage A.
*
* Assumptions:
* - there are two stages - A and B.
* - Stage A contains 1 choropleth (it can also contain other charts that are not subject of interest)
* - Stage B contains 1 line chart (and other charts that are not subject of interest)
*
* 2017-07-11 Piotr Szrajber <piotr.szrajber@hexagongeospatial.com>
*/
var STAGE_ID1 = "zbyszek", // default stage
STAGE_ID2 = "stage_zbvr", // TODO: modify here. Currently there is no public method for finding stage identifiers. In order to find all avaliable stage identifiers execute this in your javascript console: console.log(mainContext.businessIntelligence.stageManager.__stages.map(function(stage){return stage.id();}))
TIMEOUT,
GLOBAL_VARIABLES = {};
/**
* Function that waits for the choropleth on the first stage
* @param {Function} callback - callback function
* @param {gvc.chart.choropleth} callback.chart
* @return {void}
*/
function waitForChoropleth(callback) {
gsp.bi.stage.findWidgets({
stageId: STAGE_ID1,
descriptors: [{
chartM: {
chart: "choropleth"
}
}]
}, function(widgets) {
if (!widgets || !widgets[0]) {
TIMEOUT = setTimeout(function() {
waitForChoropleth(callback);
}, 500);
} else {
clearTimeout(TIMEOUT);
callback(widgets[0]);
}
});
}
// !!! MODIFY HERE !!!
waitForChoropleth(function(ch) {
// when the choropleth's filters are changed...
ch.chart.on("filtered", function() {
// ...find current filters of the choropleth
var filters = ch.chart.filters();
console.log("Updating filters", filters);
// if the chart from the second stage is not ready yet, do nothing
if (!GLOBAL_VARIABLES.secondStageById || !GLOBAL_VARIABLES.secondStageChart) return;
if (!filters || !filters.length) {
// if there are no filters, remove filters from the chart on the second stage
GLOBAL_VARIABLES.secondStageById.filter(null);
} else {
// apply filters on the chart on the second stage
GLOBAL_VARIABLES.secondStageById.filter(function(d) {
return filters.indexOf(d) >= 0;
});
}
// redraw the chart on the second stage
GLOBAL_VARIABLES.secondStageChart.chart.redraw();
});
});
/**
* Function that waits till the charts are ready (they already have SVG element)
* @param {Function} fn callback
* @return {void}
*/
function chartsReady(fn) {
var observer = new MutationObserver(function(mutations, me) {
var chartWithSvg = document.querySelector(".widget-chart.dc-chart>svg");
if (chartWithSvg) {
fn();
me.disconnect();
}
});
observer.observe(document, {
childList: true,
subtree: true
});
}
// !!! MODIFY HERE !!!
function updateGlobals() {
chartsReady(function() {
// create dimension by id (it is possible that you want to change it)
// TODO: adapt to your data model (change ID to the key you want to use)
gsp.bi.stage.findStage(STAGE_ID2, function(stage) {
GLOBAL_VARIABLES.secondStageById = stage.facts().dimension(function(d) {
return d.region
});
});
// find charts of intereset on the second stage and store references to them in the global object
// TODO: modify the chart descriptor to match your chart
gsp.bi.stage.findWidgets({
stageId: STAGE_ID2,
descriptors: [{
chartM: {
chart: "bar"
}
}]
}, function(widgets) {
var chart = widgets[0];
GLOBAL_VARIABLES.secondStageChart = chart;
});
});
}
// initial execute
updateGlobals();
|
Comments (0)
You can clone a snippet to your computer for local editing. Learn more.