Sankey looks good now

This commit is contained in:
Rich Lott / Artful Robot 2025-03-31 12:14:01 +01:00
parent 8591d6c060
commit 216d9a46ee
3 changed files with 41 additions and 16 deletions

View file

@ -2,7 +2,6 @@
angular.module("crmContactcats").component("crmContactCategoryFlows", {
templateUrl: "~/crmContactcats/crmContactCategoryFlows.html",
controller: function($scope, $timeout, crmApi4, crmStatus, $document) {
const catHeightMin = 50, catHeightGap = 8;
var ts = ($scope.ts = CRM.ts(null)),
ctrl = this;
@ -19,9 +18,8 @@
: allFlowsData;
ctrl.loading = false;
const labelWidth = ctrl.sankey.labelWidth,
width = Math.max(600, document.querySelector('.contact-cats-sankey').clientWidth),
snakeWidth = width - 2*labelWidth;
const width = Math.max(600, document.querySelector('.contact-cats-sankey').clientWidth),
snakeWidth = width - ctrl.sankey.labelWidth - ctrl.sankey.iconWidth;
ctrl.sankey.width = width;
ctrl.sankey.snakeWidth = snakeWidth;
@ -79,7 +77,7 @@
});
// Allow a cat height to grow from its min to 3x min.
let maxCatHeight = 3 * catHeightMin;
let maxCatHeight = 3 * ctrl.sankey.catHeightMin;
let maxContactsAtOneCat = Math.max(... analysisArray.map(cat => Math.max(cat.now, cat.previous)));
let scale = maxCatHeight / maxContactsAtOneCat;
console.log({maxCatHeight, maxContactsAtOneCat,scale});
@ -92,8 +90,8 @@
toAna.y = accumulatedY;
toAna.toCatHeight = Math.max(1, Math.round(scale * toAna.now));
toAna.fromCatHeight = Math.max(1,Math.round(scale * toAna.previous));
toAna.thisCatHeight = Math.ceil(Math.max(catHeightMin, scale * Math.max(toAna.now, toAna.previous)));
accumulatedY += toAna.thisCatHeight + catHeightGap;
toAna.thisCatHeight = Math.ceil(Math.max(ctrl.sankey.catHeightMin, scale * Math.max(toAna.now, toAna.previous)));
accumulatedY += toAna.thisCatHeight + ctrl.sankey.catHeightGap;
// console.log({toCat: toAna.cat.label, toCatY: toAna.y, accumulatedY, thisCatHeight});
// Intialise source offsets for this category.
offsetWithinSourcesByCat[toAna.cat.id] = 0;
@ -103,7 +101,7 @@
return a.cat.presentation_order - b.cat.presentation_order;
})
});
ctrl.sankey.height = Math.ceil(accumulatedY);
ctrl.sankey.height = analysisArray[analysisArray.length -1].y + analysisArray[analysisArray.length -1].thisCatHeight;
// Make a list of snakes we need to draw.
const snakes = [];
@ -167,7 +165,18 @@
ctrl.startDate = new Date('2025-03-25');
ctrl.endDate = null;
ctrl.stats = null;
ctrl.sankey = { height: 500, width: 900, labelWidth: 150, snakeWidth: 600, snakes: [], analysisArray: [] };
ctrl.sankey = {
catHeightMin : 50,
labelWidth: 220,
iconWidth: 32,
catHeightGap: 8,
// the following values get overwritten.
height: 500,
width: 900,
snakeWidth: 600,
snakes: [],
analysisArray: []
};
if (useTestFixtures) {
ctrl.catDefs = [