Skip to content

Commit 9dc27b4

Browse files
sruganosrugano
committed
py314
1 parent 698d60c commit 9dc27b4

4 files changed

Lines changed: 89 additions & 293 deletions

File tree

‎src/hope_live/theme/static/js/completion_visuals.js‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ document.addEventListener('DOMContentLoaded', function () {
1111

1212
const primaryDimFilter = d => d.dimension_type === 'status';
1313

14+
const moveDays = dateDimension.group(d3.timeDay);
1415
const moveMonths = dateDimension.group(d3.timeMonth);
16+
const paymentsByDayGroup = moveDays.reduceSum(d => primaryDimFilter(d) ? d.payment_count : 0);
1517
const paymentsByMonthGroup = moveMonths.reduceSum(d => primaryDimFilter(d) ? d.payment_count : 0);
1618
const statusGroup = statusDimension.group().reduceSum(d => d.dimension_type === 'status' ? d.payment_count : 0);
1719
const sectorStatusGroup = sectorDimension.group().reduceSum(d => d.dimension_type === 'status' ? d.payment_count : 0);
@@ -28,7 +30,8 @@ document.addEventListener('DOMContentLoaded', function () {
2830
const initialDomain = [new Date(initialYear, 0, 1), new Date(initialYear, 11, 31)];
2931

3032
focusChart.width(null).height(200).margins({ top: 10, right: 50, bottom: 30, left: 90 })
31-
.dimension(dateDimension).group(paymentsByMonthGroup).transitionDuration(500)
33+
.dimension(dateDimension).group(paymentsByMonthGroup)
34+
.curve(d3.curveMonotoneX).transitionDuration(500)
3235
.x(d3.scaleTime().domain(initialDomain)) // Set initial scale
3336
.round(d3.timeMonth.round).xUnits(d3.timeMonths).elasticY(true)
3437
.renderHorizontalGridLines(true).rangeChart(rangeChart).brushOn(false).renderArea(true)
@@ -41,23 +44,31 @@ document.addEventListener('DOMContentLoaded', function () {
4144

4245
focusChart.yAxis().tickFormat(d => d3.format(".2s")(d).replace('G', 'B'));
4346

44-
rangeChart.width(null).height(60).margins({ top: 0, right: 50, bottom: 20, left: 60 })
45-
.dimension(dateDimension).group(paymentsByMonthGroup).centerBar(true).gap(1)
47+
rangeChart.width(null).height(60).margins({ top: 0, right: 50, bottom: 20, left: 90 })
48+
.dimension(dateDimension).group(paymentsByDayGroup).centerBar(true).gap(2)
4649
.x(d3.scaleTime().domain(initialDomain)) // Set initial scale
47-
.round(d3.timeMonth.round).xUnits(d3.timeMonths).yAxis().ticks(0);
50+
.round(d3.timeDay.round).xUnits(d3.timeDays)
51+
.filterPrinter(function (filters) {
52+
const dateFmt = d3.timeFormat("%b %d, %Y");
53+
return `[${dateFmt(filters[0][0])} to ${dateFmt(filters[0][1])}]`;
54+
})
55+
.yAxis().ticks(0);
4856

4957
statusPieChart.width(300).height(300).radius(100).innerRadius(40)
5058
.dimension(statusDimension).group(statusGroup)
5159
.label(d => `${d.key}: ${d.value}`).on('filtered', updateTotals);
5260

53-
sectorChart.width(null).height(400).margins({ top: 10, right: 10, bottom: 30, left: 10 })
54-
.dimension(sectorDimension).group(sectorStatusGroup).elasticX(true)
61+
sectorChart.width(null).height(450).margins({ top: 10, right: 30, bottom: 30, left: 180 })
62+
.dimension(sectorDimension).group(sectorStatusGroup).elasticX(true).gap(10)
5563
.data(group => group.all().filter(d => d.key !== 'N/A' && d.value > 0))
5664
.on('filtered', updateTotals);
65+
sectorChart.xAxis().ticks(4).tickFormat(d3.format(".2s"));
5766

58-
countryChart.width(null).height(400).margins({ top: 10, right: 10, bottom: 30, left: 10 })
59-
.dimension(countryDimension).group(countryStatusGroup).elasticX(true)
60-
.data(group => group.top(15)).on('filtered', updateTotals);
67+
countryChart.width(null).height(450).margins({ top: 10, right: 30, bottom: 30, left: 180 })
68+
.dimension(countryDimension).group(countryStatusGroup).elasticX(true).gap(10)
69+
.data(group => group.top(15))
70+
.on('filtered', updateTotals);
71+
countryChart.xAxis().ticks(4).tickFormat(d3.format(".2s"));
6172

6273
function updateTotals() {
6374
const reconciliationData = statusGroup.all();
@@ -106,8 +117,12 @@ document.addEventListener('DOMContentLoaded', function () {
106117
d.payment_count = +d.payment_count;
107118
});
108119

120+
const now = new Date();
121+
now.setHours(23, 59, 59, 999);
122+
const currentData = data.filter(d => d.date <= now);
123+
109124
ndx.remove();
110-
ndx.add(data);
125+
ndx.add(currentData);
111126

112127
const yearDomain = [new Date(year, 0, 1), new Date(year, 11, 31)];
113128
focusChart.x(d3.scaleTime().domain(yearDomain));

‎src/hope_live/theme/static/js/dashboard_visuals.js‎

Lines changed: 36 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@ document.addEventListener('DOMContentLoaded', function () {
2121
const primaryDimFilter = d => d.dimension_type === 'sector';
2222

2323
// Groups
24+
const moveDays = dateDimension.group(d3.timeDay);
2425
const moveMonths = dateDimension.group(d3.timeMonth);
26+
const volumeByDayGroup = moveDays.reduceSum(d => primaryDimFilter(d) ? d.total_usd : 0);
2527
const volumeByMonthGroup = moveMonths.reduceSum(d => primaryDimFilter(d) ? d.total_usd : 0);
2628
const sectorGroup = sectorDimension.group().reduceSum(d => d.dimension_type === 'sector' ? d.total_usd : 0);
2729
const programGroup = programDimension.group().reduceSum(d => d.dimension_type === 'program' ? d.total_usd : 0);
@@ -56,6 +58,7 @@ document.addEventListener('DOMContentLoaded', function () {
5658
.margins({ top: 10, right: 50, bottom: 30, left: 90 })
5759
.dimension(dateDimension)
5860
.group(volumeByMonthGroup)
61+
.curve(d3.curveMonotoneX)
5962
.transitionDuration(500)
6063
.x(d3.scaleTime().domain(initialDomain)) // Set initial scale
6164
.round(d3.timeMonth.round)
@@ -72,37 +75,45 @@ document.addEventListener('DOMContentLoaded', function () {
7275
})
7376
.on('filtered', updateTotals);
7477

75-
focusChart.yAxis().tickFormat(d => d3.format(".2s")(d).replace('G', 'B'));
78+
focusChart.yAxis().tickFormat(d => '$' + d3.format(".2s")(d).replace('G', 'B'));
7679

7780
rangeChart
7881
.width(null).height(80)
79-
.margins({ top: 0, right: 50, bottom: 20, left: 60 })
82+
.margins({ top: 0, right: 50, bottom: 20, left: 90 })
8083
.dimension(dateDimension)
81-
.group(volumeByMonthGroup)
84+
.group(volumeByDayGroup)
8285
.centerBar(true)
83-
.gap(1)
86+
.gap(2)
8487
.x(d3.scaleTime().domain(initialDomain)) // Set initial scale
85-
.round(d3.timeMonth.round)
86-
.xUnits(d3.timeMonths)
88+
.round(d3.timeDay.round)
89+
.xUnits(d3.timeDays)
90+
.filterPrinter(function (filters) {
91+
const dateFmt = d3.timeFormat("%b %d, %Y");
92+
return `[${dateFmt(filters[0][0])} to ${dateFmt(filters[0][1])}]`;
93+
})
8794
.yAxis().ticks(0);
8895

89-
sectorChart.width(null).height(300).margins({ top: 10, right: 10, bottom: 30, left: 10 }).dimension(sectorDimension).group(sectorGroup).elasticX(true).data(group => group.all().filter(d => d.key !== null && d.value > 0)).on('filtered', updateTotals);
90-
91-
countryChart.width(null).height(300).margins({ top: 10, right: 10, bottom: 30, left: 10 }).dimension(countryDimension).group(countryGroup).elasticX(true).data(group => group.top(10)).on('filtered', updateTotals);
92-
93-
adminChart.width(null).height(300).margins({ top: 10, right: 10, bottom: 30, left: 10 }).dimension(adminDimension).group(adminGroup).elasticX(true).data(group => group.all().filter(d => d.key !== null && d.value > 0).slice(0, 10)).on('filtered', updateTotals);
96+
const rowChartMargins = { top: 10, right: 30, bottom: 30, left: 180 };
9497

95-
programChart.width(null).height(300).margins({ top: 10, right: 10, bottom: 30, left: 10 }).dimension(programDimension).group(programGroup).elasticX(true).data(group => group.all().filter(d => d.key !== null && d.value > 0)).on('filtered', updateTotals);
96-
97-
deliveryChart.width(null).height(300).margins({ top: 10, right: 10, bottom: 30, left: 10 }).dimension(deliveryDimension).group(deliveryGroup).elasticX(true).data(group => group.all().filter(d => d.key !== null && d.value > 0)).on('filtered', updateTotals);
98-
99-
fspChart.width(null).height(300).margins({ top: 10, right: 10, bottom: 30, left: 10 }).dimension(fspDimension).group(fspGroup).elasticX(true).data(group => group.all().filter(d => d.key !== null && d.value > 0)).on('filtered', updateTotals);
100-
101-
statusChart.width(null).height(300).margins({ top: 10, right: 10, bottom: 30, left: 10 }).dimension(statusDimension).group(statusGroup).elasticX(true).data(group => group.all().filter(d => d.key !== null && d.value > 0)).on('filtered', updateTotals);
98+
[adminChart, programChart, fspChart].forEach(chart => {
99+
chart.width(null).height(750).margins(rowChartMargins).elasticX(true).gap(5).data(group => group.top(30)).on('filtered', updateTotals);
100+
chart.xAxis().ticks(4).tickFormat(d => '$' + d3.format(".2s")(d).replace('G', 'B'));
101+
});
102102

103-
currencyChart.width(null).height(300).margins({ top: 10, right: 10, bottom: 30, left: 10 }).dimension(currencyDimension).group(currencyGroup).elasticX(true).data(group => group.all().filter(d => d.key !== null && d.value > 0)).on('filtered', updateTotals);
103+
[sectorChart, deliveryChart, statusChart, currencyChart, countryChart, regionChart].forEach(chart => {
104+
chart.width(null).height(400).margins(rowChartMargins).elasticX(true).gap(10).on('filtered', updateTotals);
105+
chart.xAxis().ticks(4).tickFormat(d => '$' + d3.format(".2s")(d).replace('G', 'B'));
106+
});
104107

105-
regionChart.width(null).height(300).margins({ top: 10, right: 10, bottom: 30, left: 10 }).dimension(regionDimension).group(regionGroup).elasticX(true).data(group => group.all().filter(d => d.key !== null && d.value > 0).slice(0, 10)).on('filtered', updateTotals);
108+
sectorChart.dimension(sectorDimension).group(sectorGroup).data(group => group.all().filter(d => d.key !== null && d.value > 0));
109+
countryChart.dimension(countryDimension).group(countryGroup).data(group => group.top(10));
110+
adminChart.dimension(adminDimension).group(adminGroup);
111+
programChart.dimension(programDimension).group(programGroup);
112+
deliveryChart.dimension(deliveryDimension).group(deliveryGroup).data(group => group.all().filter(d => d.key !== null && d.value > 0));
113+
fspChart.dimension(fspDimension).group(fspGroup);
114+
statusChart.dimension(statusDimension).group(statusGroup).data(group => group.all().filter(d => d.key !== null && d.value > 0));
115+
currencyChart.dimension(currencyDimension).group(currencyGroup).data(group => group.all().filter(d => d.key !== null && d.value > 0));
116+
regionChart.dimension(regionDimension).group(regionGroup).data(group => group.all().filter(d => d.key !== null && d.value > 0).slice(0, 10));
106117

107118
function updateTotals() {
108119
const totalUsd = ndx.groupAll().reduceSum(d => primaryDimFilter(d) ? d.total_usd : 0).value();
@@ -141,8 +152,12 @@ document.addEventListener('DOMContentLoaded', function () {
141152
d.payment_count = +d.payment_count;
142153
});
143154

155+
const now = new Date();
156+
now.setHours(23, 59, 59, 999);
157+
const currentData = data.filter(d => d.date <= now);
158+
144159
ndx.remove();
145-
ndx.add(data);
160+
ndx.add(currentData);
146161

147162
const yearDomain = [new Date(year, 0, 1), new Date(year, 11, 31)];
148163
focusChart.x(d3.scaleTime().domain(yearDomain));

‎src/hope_live/theme/static/js/demographic_visuals.js‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ document.addEventListener('DOMContentLoaded', function () {
1010

1111
const primaryDimFilter = d => d.dimension_type === 'sector';
1212

13+
const moveDays = dateDimension.group(d3.timeDay);
1314
const moveMonths = dateDimension.group(d3.timeMonth);
15+
const individualsByDayGroup = moveDays.reduceSum(d => primaryDimFilter(d) ? d.total_beneficiaries : 0);
1416
const individualsByMonthGroup = moveMonths.reduceSum(d => primaryDimFilter(d) ? d.total_beneficiaries : 0);
1517
const sectorIndividualsGroup = sectorDimension.group().reduceSum(d => d.dimension_type === 'sector' ? d.total_beneficiaries : 0);
1618
const sectorChildrenGroup = sectorDimension.group().reduceSum(d => d.dimension_type === 'sector' ? d.total_children : 0);
@@ -29,7 +31,8 @@ document.addEventListener('DOMContentLoaded', function () {
2931
const initialDomain = [new Date(initialYear, 0, 1), new Date(initialYear, 11, 31)];
3032

3133
focusChart.width(null).height(200).margins({ top: 10, right: 50, bottom: 30, left: 90 })
32-
.dimension(dateDimension).group(individualsByMonthGroup).transitionDuration(500)
34+
.dimension(dateDimension).group(individualsByMonthGroup)
35+
.curve(d3.curveMonotoneX).transitionDuration(500)
3336
.x(d3.scaleTime().domain(initialDomain)) // Set initial scale
3437
.round(d3.timeMonth.round).xUnits(d3.timeMonths).elasticY(true)
3538
.renderHorizontalGridLines(true).rangeChart(rangeChart).brushOn(false).renderArea(true)
@@ -42,29 +45,27 @@ document.addEventListener('DOMContentLoaded', function () {
4245

4346
focusChart.yAxis().tickFormat(d => d3.format(".2s")(d).replace('G', 'B'));
4447

45-
rangeChart.width(null).height(60).margins({ top: 0, right: 50, bottom: 20, left: 60 })
46-
.dimension(dateDimension).group(individualsByMonthGroup).centerBar(true).gap(1)
48+
rangeChart.width(null).height(60).margins({ top: 0, right: 50, bottom: 20, left: 90 })
49+
.dimension(dateDimension).group(individualsByDayGroup).centerBar(true).gap(2)
4750
.x(d3.scaleTime().domain(initialDomain)) // Set initial scale
48-
.round(d3.timeMonth.round).xUnits(d3.timeMonths).yAxis().ticks(0);
49-
50-
sectorIndividualsChart.width(null).height(300).margins({ top: 10, right: 10, bottom: 30, left: 10 })
51-
.dimension(sectorDimension).group(sectorIndividualsGroup).elasticX(true)
52-
.data(group => group.all().filter(d => d.key !== null && d.value > 0))
53-
.on('filtered', updateTotals);
51+
.round(d3.timeDay.round).xUnits(d3.timeDays)
52+
.filterPrinter(function (filters) {
53+
const dateFmt = d3.timeFormat("%b %d, %Y");
54+
return `[${dateFmt(filters[0][0])} to ${dateFmt(filters[0][1])}]`;
55+
})
56+
.yAxis().ticks(0);
5457

55-
sectorChildrenChart.width(null).height(300).margins({ top: 10, right: 10, bottom: 30, left: 10 })
56-
.dimension(sectorDimension).group(sectorChildrenGroup).elasticX(true)
57-
.data(group => group.all().filter(d => d.key !== null && d.value > 0)).colors(['#2C96D2'])
58-
.on('filtered', updateTotals);
58+
const demoMargins = { top: 10, right: 30, bottom: 30, left: 180 };
5959

60-
countryIndividualsChart.width(null).height(300).margins({ top: 10, right: 10, bottom: 30, left: 10 })
61-
.dimension(countryDimension).group(countryIndividualsGroup).elasticX(true)
62-
.data(group => group.top(10)).on('filtered', updateTotals);
60+
[sectorIndividualsChart, sectorChildrenChart, countryIndividualsChart, countryPwdChart].forEach(chart => {
61+
chart.width(null).height(350).margins(demoMargins).elasticX(true).gap(10).on('filtered', updateTotals);
62+
chart.xAxis().ticks(4).tickFormat(d3.format(".2s"));
63+
});
6364

64-
countryPwdChart.width(null).height(300).margins({ top: 10, right: 10, bottom: 30, left: 10 })
65-
.dimension(countryDimension).group(countryPwdGroup).elasticX(true)
66-
.data(group => group.top(10)).colors(['#9333ea'])
67-
.on('filtered', updateTotals);
65+
sectorIndividualsChart.dimension(sectorDimension).group(sectorIndividualsGroup).data(group => group.all().filter(d => d.key !== null && d.value > 0));
66+
sectorChildrenChart.dimension(sectorDimension).group(sectorChildrenGroup).colors(['#2C96D2']).data(group => group.all().filter(d => d.key !== null && d.value > 0));
67+
countryIndividualsChart.dimension(countryDimension).group(countryIndividualsGroup).data(group => group.top(10));
68+
countryPwdChart.dimension(countryDimension).group(countryPwdGroup).colors(['#9333ea']).data(group => group.top(10));
6869

6970
function updateTotals() {
7071
const totalIndividuals = ndx.groupAll().reduceSum(d => primaryDimFilter(d) ? d.total_beneficiaries : 0).value();
@@ -105,8 +106,12 @@ document.addEventListener('DOMContentLoaded', function () {
105106
d.total_pwd = +d.total_pwd;
106107
});
107108

109+
const now = new Date();
110+
now.setHours(23, 59, 59, 999);
111+
const currentData = data.filter(d => d.date <= now);
112+
108113
ndx.remove();
109-
ndx.add(data);
114+
ndx.add(currentData);
110115

111116
const yearDomain = [new Date(year, 0, 1), new Date(year, 11, 31)];
112117
focusChart.x(d3.scaleTime().domain(yearDomain));

0 commit comments

Comments
 (0)