Skip to content

Commit

Permalink
Populate default report using cycles (#4420)
Browse files Browse the repository at this point in the history 
* Populate default report using cycles

* Remove console.logs

* Fix api

* update css a bit

---------

Co-authored-by: kflemin <[email protected]>
  • Loading branch information
@haneslinger @kflemin
haneslinger and kflemin authored Dec 4, 2023
1 parent ffd0c51 commit 25c4866
Show file tree
Hide file tree
Showing 7 changed files with 218 additions and 242 deletions.
7 changes: 3 additions & 4 deletions seed/static/seed/js/controllers/export_report_modal_controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,10 @@ angular.module('BE.seed.controller.export_report_modal', []).controller('export_
'$scope',
'$uibModalInstance',
'axes_data',
'cycle_start',
'cycle_end',
'cycles',
'inventory_reports_service',
// eslint-disable-next-line func-names
function ($scope, $uibModalInstance, axes_data, cycle_start, cycle_end, inventory_reports_service) {
function ($scope, $uibModalInstance, axes_data, cycles, inventory_reports_service) {
$scope.export_name = '';

$scope.export_selected = () => {
Expand All @@ -21,7 +20,7 @@ angular.module('BE.seed.controller.export_report_modal', []).controller('export_
const ext = '.xlsx';
if (!filename.endsWith(ext)) filename += ext;

inventory_reports_service.export_reports_data(axes_data, cycle_start, cycle_end).then((response) => {
inventory_reports_service.export_reports_data(axes_data, cycles).then((response) => {
const blob_type = response.headers()['content-type'];

const blob = new Blob([response.data], { type: blob_type });
Expand Down
79 changes: 28 additions & 51 deletions seed/static/seed/js/controllers/inventory_reports_controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,6 @@ angular.module('BE.seed.controller.inventory_reports', []).controller('inventory
/* Setup models from "From" and "To" selectors */
$scope.cycles = cycles.cycles;

/* Model for pulldowns, initialized in init below */
$scope.fromCycle = {};
$scope.toCycle = {};

const translateAxisLabel = (label, units) => {
let str = '';
str += $translate.instant(label);
Expand Down Expand Up @@ -123,15 +119,6 @@ angular.module('BE.seed.controller.inventory_reports', []).controller('inventory
$scope.chart1Title = '';
$scope.chart2Title = '';

// Datepickers
const initStartDate = new Date();
initStartDate.setYear(initStartDate.getFullYear() - 1);
$scope.startDate = initStartDate;
$scope.startDatePickerOpen = false;
$scope.endDate = new Date();
$scope.endDatePickerOpen = false;
$scope.invalidDates = false; // set this to true when startDate >= endDate;

// Series
// the following variable keeps track of which
// series will be sent to the graphs when data is updated
Expand Down Expand Up @@ -252,34 +239,33 @@ angular.module('BE.seed.controller.inventory_reports', []).controller('inventory
// specific styling for scatter chart
$scope.scatterChart.options.scales.x.suggestedMin = 0;

/* END NEW CHART STUFF */

/* UI HANDLERS */
/* ~~~~~~~~~~~ */

// Handle datepicker open/close events
$scope.openStartDatePicker = ($event) => {
$event.preventDefault();
$event.stopPropagation();
$scope.startDatePickerOpen = !$scope.startDatePickerOpen;
$scope.cycle_selection = '';
$scope.selected_cycles = [];
$scope.available_cycles = () => $scope.cycles.filter(({ id }) => !$scope.selected_cycles.includes(id));
$scope.select_cycle = () => {
const selection = $scope.cycle_selection;
$scope.cycle_selection = '';
if (!$scope.selected_cycles) {
$scope.selected_cycles = [];
}
$scope.selected_cycles.push(selection);
};
$scope.openEndDatePicker = ($event) => {
$event.preventDefault();
$event.stopPropagation();
$scope.endDatePickerOpen = !$scope.endDatePickerOpen;

$scope.get_cycle_display = (id) => {
const record = _.find($scope.cycles, { id });
if (record) {
return record.name;
}
};

$scope.$watch('startDate', () => {
$scope.checkInvalidDate();
});
$scope.click_remove_cycle = (id) => {
$scope.selected_cycles = $scope.selected_cycles.filter((item) => item !== id);
};

$scope.$watch('endDate', () => {
$scope.checkInvalidDate();
});
/* END NEW CHART STUFF */

$scope.checkInvalidDate = () => {
$scope.invalidDates = $scope.endDate < $scope.startDate;
};
/* UI HANDLERS */
/* ~~~~~~~~~~~ */

/* Update data used by the chart. This will force the charts to re-render */
$scope.updateChartData = () => {
Expand Down Expand Up @@ -374,8 +360,7 @@ angular.module('BE.seed.controller.inventory_reports', []).controller('inventory
yVar: $scope.chartData.yAxisVarName,
yLabel: $scope.chartData.yAxisTitle
}),
cycle_start: () => $scope.fromCycle.selected_cycle.start,
cycle_end: () => $scope.toCycle.selected_cycle.end
cycles: () => $scope.selected_cycles,
}
});
};
Expand All @@ -398,7 +383,7 @@ angular.module('BE.seed.controller.inventory_reports', []).controller('inventory
$scope.chartIsLoading = true;

inventory_reports_service
.get_report_data(xVar, yVar, $scope.fromCycle.selected_cycle.start, $scope.toCycle.selected_cycle.end)
.get_report_data(xVar, yVar, $scope.selected_cycles)
.then(
(data) => {
data = data.data;
Expand Down Expand Up @@ -462,7 +447,7 @@ angular.module('BE.seed.controller.inventory_reports', []).controller('inventory
const yVar = $scope.yAxisSelectedItem.varName;
$scope.aggChartIsLoading = true;
inventory_reports_service
.get_aggregated_report_data(xVar, yVar, $scope.fromCycle.selected_cycle.start, $scope.toCycle.selected_cycle.end)
.get_aggregated_report_data(xVar, yVar, $scope.selected_cycles)
.then(
(data) => {
data = data.aggregated_data;
Expand Down Expand Up @@ -506,9 +491,7 @@ angular.module('BE.seed.controller.inventory_reports', []).controller('inventory
// Save axis and cycle selections
localStorage.setItem(localStorageXAxisKey, JSON.stringify($scope.xAxisSelectedItem));
localStorage.setItem(localStorageYAxisKey, JSON.stringify($scope.yAxisSelectedItem));

localStorage.setItem(localStorageFromCycleKey, JSON.stringify($scope.fromCycle.selected_cycle));
localStorage.setItem(localStorageToCycleKey, JSON.stringify($scope.toCycle.selected_cycle));
localStorage.setItem(localStorageSelectedCycles, JSON.stringify($scope.selected_cycles));
}

/* Generate an array of color objects to be used as part of chart configuration
Expand Down Expand Up @@ -536,19 +519,13 @@ angular.module('BE.seed.controller.inventory_reports', []).controller('inventory
return colorsArr;
}

var localStorageFromCycleKey = `${base_storage_key}.fromcycle`;
var localStorageToCycleKey = `${base_storage_key}.tocycle`;
var localStorageSelectedCycles = `${base_storage_key}.SelectedCycles`;

/* Call the update method so the page initializes
with the values set in the scope */
function init() {
// Initialize pulldowns
$scope.fromCycle = {
selected_cycle: JSON.parse(localStorage.getItem(localStorageFromCycleKey)) || _.head($scope.cycles)
};
$scope.toCycle = {
selected_cycle: JSON.parse(localStorage.getItem(localStorageToCycleKey)) || _.last($scope.cycles)
};
$scope.selected_cycles = JSON.parse(localStorage.getItem(localStorageSelectedCycles)) || []

// Attempt to load selections
$scope.updateChartData();
Expand Down
21 changes: 9 additions & 12 deletions seed/static/seed/js/services/inventory_reports_service.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ angular.module('BE.seed.service.inventory_reports', []).factory('inventory_repor
]
}
*/
const get_report_data = (xVar, yVar, start, end) => {
const get_report_data = (xVar, yVar, cycle_ids) => {
// Error checks
if (_.some([xVar, yVar, start, end], _.isNil)) {
if (_.some([xVar, yVar, cycle_ids], _.isNil)) {
$log.error('#inventory_reports_service.get_report_data(): null parameter');
throw new Error('Invalid Parameter');
}
Expand All @@ -47,8 +47,7 @@ angular.module('BE.seed.service.inventory_reports', []).factory('inventory_repor
params: {
x_var: xVar,
y_var: yVar,
start,
end
cycle_ids,
}
})
.then((response) => response.data)
Expand Down Expand Up @@ -83,9 +82,9 @@ angular.module('BE.seed.service.inventory_reports', []).factory('inventory_repor
}
}
*/
const get_aggregated_report_data = (xVar, yVar, start, end) => {
const get_aggregated_report_data = (xVar, yVar, cycle_ids) => {
// Error checks
if (_.some([xVar, yVar, start, end], _.isNil)) {
if (_.some([xVar, yVar, cycle_ids], _.isNil)) {
$log.error('#inventory_reports_service.get_aggregated_report_data(): null parameter');
throw new Error('Invalid Parameter');
}
Expand All @@ -96,21 +95,20 @@ angular.module('BE.seed.service.inventory_reports', []).factory('inventory_repor
params: {
x_var: xVar,
y_var: yVar,
start,
end
cycle_ids,
}
})
.then((response) => response.data)
.catch(() => {});
};

const export_reports_data = (axes_data, start, end) => {
const export_reports_data = (axes_data, cycle_ids) => {
const { xVar } = axes_data;
const { xLabel } = axes_data;
const { yVar } = axes_data;
const { yLabel } = axes_data;
// Error checks
if (_.some([xVar, xLabel, yVar, yLabel, start, end], _.isNil)) {
if (_.some([xVar, xLabel, yVar, yLabel, cycle_ids], _.isNil)) {
$log.error('#inventory_reports_service.get_aggregated_report_data(): null parameter');
throw new Error('Invalid Parameter');
}
Expand All @@ -123,8 +121,7 @@ angular.module('BE.seed.service.inventory_reports', []).factory('inventory_repor
x_label: xLabel,
y_var: yVar,
y_label: yLabel,
start,
end
cycle_ids,
},
responseType: 'arraybuffer'
})
Expand Down
56 changes: 24 additions & 32 deletions seed/static/seed/partials/inventory_reports.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,42 +19,34 @@ <h1 translate>Default Reports</h1>
<div class="col-md-2">
<h2 style="font-size: 18px"><i class="fa-solid fa-bar-chart pull-left"></i> {$:: 'Property Reports' | translate $}</h2>
</div>
<div class="col-md-10">
<form class="form-inline pull-right chart-inputs" role="form">
<div class="form-group">
<label for="fromCycleSelector">{$:: 'From first date of' | translate $}:</label>
<select
id="fromCycleSelector"
class="form-control"
ng-model="fromCycle.selected_cycle"
style="min-width: 180px"
ng-change="updateFromCycle(fromCycle.selected_cycle)"
ng-options="cycle.name for cycle in cycles track by cycle.id"
></select>
</div>

<div class="form-group">
<label for="toCycleSelector">{$:: 'Until last date of' | translate $}:</label>
<select
id="toCycleSelector"
class="form-control"
style="min-width: 180px"
ng-model="toCycle.selected_cycle"
ng-change="updateToCycle(toCycle.selected_cycle)"
ng-options="cycle.name for cycle in cycles track by cycle.id"
></select>
<div class="form-inline pull-right chart-inputs">
<form class="form-inline pull-right chart-inputs" role="form" style="display: flex">
<div style="display: flex; flex-direction: column;" class="right-bar">
<div class="form-group">
<label for="select-cycle">{$:: 'Cycles to Include' | translate $}:</label>
<li ng-repeat="item in selected_cycles" class="r-row r-row-centered">
<span class="r-grow">{$:: get_cycle_display(item) $}</span>
<i class="fa-solid fa-xmark r-margin-left-5" ng-click="click_remove_cycle(item)"></i>
</li>
<li class="r-row r-row-centered">
<select id="select-cycle" class="form-control" ng-change="select_cycle()" ng-model="cycle_selection" style="width: 15em;">
<option ng-repeat="cycle in available_cycles()" ng-value="cycle.id">{$:: cycle.name $}</option>
</select>
</li>
</div>
</div>

<div class="form-group">
<label for="xAxisSelector">{$:: 'X Axis' | translate $}:</label>
<sd-dropdown is-button id="xAxisSelector" ng-model="xAxisSelectedItem" items="xAxisVars"></sd-dropdown>
</div>
<div style="display: flex; flex-direction: column;">
<div class="form-group pad-bottom-10">
<label for="xAxisSelector">{$:: 'X Axis' | translate $}:</label>
<sd-dropdown is-button id="xAxisSelector" ng-model="xAxisSelectedItem" items="xAxisVars"></sd-dropdown>
</div>

<div class="form-group">
<label for="yAxisSelector">{$:: 'Y Axis' | translate $}:</label>
<sd-dropdown is-button id="yAxisSelector" ng-model="yAxisSelectedItem" items="yAxisVars"></sd-dropdown>
<div class="form-group">
<label for="yAxisSelector">{$:: 'Y Axis' | translate $}:</label>
<sd-dropdown is-button id="yAxisSelector" ng-model="yAxisSelectedItem" items="yAxisVars"></sd-dropdown>
</div>
</div>

<div class="form-group">
<button type="submit" class="btn btn-primary" ng-click="updateChartData()" translate>Update Charts</button>
</div>
Expand Down
10 changes: 10 additions & 0 deletions seed/static/seed/scss/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3891,6 +3891,16 @@ $pairedCellWidth: 60px;
padding-left: 5px;
}

.pad-bottom-10 {
padding-bottom: 10px;
}

.right-bar {
padding-left: 10px;
padding-right: 25px;
border-right: 1px solid #999;
}

.matching-column-header .ui-grid-header-cell-label {
font-weight: bolder;
}
Expand Down
Loading

0 comments on commit 25c4866

Please sign in to comment.