Final cleanup

This commit is contained in:
Bernd Bestel 2023-04-01 16:57:37 +02:00
parent 6cfee78b95
commit c781bb4ff1
No known key found for this signature in database
GPG Key ID: 71BD34C0D4891300
5 changed files with 77 additions and 90 deletions

View File

@ -2375,43 +2375,31 @@ msgstr ""
msgid "Track chore execution now" msgid "Track chore execution now"
msgstr "" msgstr ""
msgid "by Product"
msgstr ""
msgid "by Group"
msgstr ""
msgid "Total" msgid "Total"
msgstr "" msgstr ""
msgid "Apply" msgid "Apply"
msgstr "" msgstr ""
msgid "Custom Range" msgid "Custom range"
msgstr "" msgstr ""
msgid "Yesterday" msgid "Yesterday"
msgstr "" msgstr ""
msgid "Last 7 Days" msgid "Last %1$s days"
msgstr "" msgstr ""
msgid "Last 14 Days" msgid "This month"
msgstr "" msgstr ""
msgid "Last 30 Days" msgid "Last month"
msgstr "" msgstr ""
msgid "This Month" msgid "This year"
msgstr "" msgstr ""
msgid "Last Month" msgid "Last year"
msgstr ""
msgid "This Year"
msgstr ""
msgid "Last Year"
msgstr "" msgstr ""
msgid "Reports" msgid "Reports"

View File

@ -12,6 +12,7 @@
"bootstrap-select": "^1.13.18", "bootstrap-select": "^1.13.18",
"bwip-js": "^3.0.1", "bwip-js": "^3.0.1",
"chart.js": "^2.8.0", "chart.js": "^2.8.0",
"chartjs-plugin-colorschemes": "^0.4.0",
"chartjs-plugin-doughnutlabel": "^2.0.3", "chartjs-plugin-doughnutlabel": "^2.0.3",
"chartjs-plugin-piechart-outlabels": "^0.1.4", "chartjs-plugin-piechart-outlabels": "^0.1.4",
"datatables.net": "^1.10.22", "datatables.net": "^1.10.22",
@ -23,7 +24,7 @@
"datatables.net-rowgroup-bs4": "^1.1.2", "datatables.net-rowgroup-bs4": "^1.1.2",
"datatables.net-select": "^1.3.1", "datatables.net-select": "^1.3.1",
"datatables.net-select-bs4": "^1.3.1", "datatables.net-select-bs4": "^1.3.1",
"daterangepicker": "dangrossman/daterangepicker", "daterangepicker": "^3.1.0",
"fullcalendar": "^3.10.1", "fullcalendar": "^3.10.1",
"gettext-translator": "2.1.0", "gettext-translator": "2.1.0",
"jquery": "^3.6.0", "jquery": "^3.6.0",

View File

@ -1,44 +1,26 @@
/* Charting */
var labels = []; var labels = [];
var data = []; var data = [];
var totalAmount = 0; var totalAmount = 0.0;
$("#metrics-table tbody tr").each(function() $("#metrics-table tbody tr").each(function()
{ {
var self = $(this); var self = $(this);
labels.push(self.find("td:eq(0)").attr("data-chart-label")); labels.push(self.find("td:eq(0)").attr("data-chart-label"));
var itemTotalRaw = Number.parseFloat(self.find("td:eq(1)").attr("data-chart-value")); var itemTotal = Number.parseFloat(self.find("td:eq(1)").attr("data-chart-value"));
var itemTotal = Number.parseFloat((Math.round(itemTotalRaw * 100) / 100).toFixed(2));
data.push(itemTotal); data.push(itemTotal);
totalAmount = (Number.parseFloat(totalAmount) + Number.parseFloat(itemTotal)); totalAmount += + itemTotal;
}); });
totalAmount = totalAmount.toLocaleString(undefined, { style: "currency", currency: Grocy.Currency }); totalAmount = totalAmount.toLocaleString(undefined, { style: "currency", currency: Grocy.Currency });
var backgroundColorChoices = [
"#6C747C",
"#BFB8A4",
"#BFADA4",
"#4F575E",
"#918B78",
"#343A40",
"#635E4F",
"#63554F",
"#1A1F24",
"#383426",
"#382C26",
"#121B25",
"#383119",
"#382319"
]
var backgroundColors = []; var backgroundColors = [];
var colorChoiceIndex = 0; var colorChoiceIndex = 0;
for (i = 0; i < data.length; i++) for (i = 0; i < data.length; i++)
{ {
if ((i + 1) == (backgroundColorChoices.length)) if (i + 1 == Chart.colorschemes.brewer.Paired12.length)
{ {
// restart background color choices // Restart background color choices
colorChoiceIndex = 1; colorChoiceIndex = 1;
} }
backgroundColors.push(backgroundColorChoices[colorChoiceIndex]); backgroundColors.push(Chart.colorschemes.brewer.Paired12[colorChoiceIndex]);
colorChoiceIndex++; colorChoiceIndex++;
} }
@ -51,15 +33,14 @@ var metricsChart = new Chart("metrics-chart", {
"tooltips": { "tooltips": {
"enabled": false "enabled": false
}, },
"tooltips": { enabled: false }, "tooltips": {
"enabled": false
},
"plugins": { "plugins": {
"outlabels": { "outlabels": {
"text": "%l %p", "text": "%l %p",
"backgroundColor": "#343a40", "backgroundColor": "#343a40",
"color": "white",
"stretch": 45,
"font": { "font": {
"resizable": true,
"minSize": 12, "minSize": 12,
"maxSize": 18 "maxSize": 18
} }
@ -90,7 +71,6 @@ var metricsChart = new Chart("metrics-chart", {
}); });
/* DataTables */
var metricsTable = $("#metrics-table").DataTable({ var metricsTable = $("#metrics-table").DataTable({
"columnDefs": [ "columnDefs": [
{ "type": "num", "targets": 1 } { "type": "num", "targets": 1 }
@ -99,10 +79,8 @@ var metricsTable = $("#metrics-table").DataTable({
$("#metrics-table tbody").removeClass("d-none"); $("#metrics-table tbody").removeClass("d-none");
metricsTable.columns.adjust().draw(); metricsTable.columns.adjust().draw();
/* DateRangePicker */
var startDate = moment().startOf("month").format("YYYY-MM-DD"); var startDate = moment().startOf("month").format("YYYY-MM-DD");
var endDate = moment().endOf("month").format("YYYY-MM-DD"); var endDate = moment().endOf("month").format("YYYY-MM-DD");
if (GetUriParam("start_date")) if (GetUriParam("start_date"))
{ {
startDate = moment(GetUriParam("start_date")); startDate = moment(GetUriParam("start_date"));
@ -115,16 +93,20 @@ if (GetUriParam("end_date"))
var ranges = {}; var ranges = {};
ranges[__t("Today")] = [moment(), moment()]; ranges[__t("Today")] = [moment(), moment()];
ranges[__t("Yesterday")] = [moment().subtract(1, "days"), moment().subtract(1, "days")]; ranges[__t("Yesterday")] = [moment().subtract(1, "days"), moment().subtract(1, "days")];
ranges[__t("Last 7 Days")] = [moment().subtract(6, "days"), moment()]; ranges[__t("Last %1$s days", "7")] = [moment().subtract(6, "days"), moment()];
ranges[__t("Last 14 Days")] = [moment().subtract(13, "days"), moment()]; ranges[__t("Last %1$s days", "14")] = [moment().subtract(13, "days"), moment()];
ranges[__t("Last 30 Days")] = [moment().subtract(29, "days"), moment()]; ranges[__t("Last %1$s days", "30")] = [moment().subtract(29, "days"), moment()];
ranges[__t("This Month")] = [moment().startOf("month"), moment().endOf("month")]; ranges[__t("This month")] = [moment().startOf("month"), moment().endOf("month")];
ranges[__t("Last Month")] = [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]; ranges[__t("Last month")] = [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")];
ranges[__t("This Year")] = [moment().startOf("year"), moment().endOf("year")]; ranges[__t("This year")] = [moment().startOf("year"), moment().endOf("year")];
ranges[__t("Last Year")] = [moment().subtract(1, "year").startOf("year"), moment().subtract(1, "year").endOf("year")]; ranges[__t("Last year")] = [moment().subtract(1, "year").startOf("year"), moment().subtract(1, "year").endOf("year")];
$("#daterange-filter").daterangepicker({ $("#daterange-filter").daterangepicker({
"showDropdowns": true, "showDropdowns": true,
"alwaysShowCalendars": true,
"buttonClasses": "btn",
"applyButtonClasses": "btn-primary",
"cancelButtonClasses": "btn-secondary",
"startDate": startDate, "startDate": startDate,
"endDate": endDate, "endDate": endDate,
"showWeekNumbers": Grocy.CalendarShowWeekNumbers, "showWeekNumbers": Grocy.CalendarShowWeekNumbers,
@ -134,7 +116,7 @@ $("#daterange-filter").daterangepicker({
}, },
"applyLabel": __t("Apply"), "applyLabel": __t("Apply"),
"cancelLabel": __t("Cancel"), "cancelLabel": __t("Cancel"),
"customRangeLabel": __t("Custom Range"), "customRangeLabel": __t("Custom range"),
"ranges": ranges "ranges": ranges
}, function(start, end, label) }, function(start, end, label)
{ {
@ -145,7 +127,7 @@ $("#daterange-filter").daterangepicker({
$("#daterange-filter").on("cancel.daterangepicker", function(ev, picker) $("#daterange-filter").on("cancel.daterangepicker", function(ev, picker)
{ {
$(this).val(start_date + " - " + end_date); $(this).val(startDate + " - " + endDate);
}); });
$("#clear-filter-button").on("click", function() $("#clear-filter-button").on("click", function()

View File

@ -5,8 +5,9 @@
@push('pageScripts') @push('pageScripts')
<script src="{{ $U('/node_modules/chart.js/dist/Chart.min.js?v=', true) }}{{ $version }}"></script> <script src="{{ $U('/node_modules/chart.js/dist/Chart.min.js?v=', true) }}{{ $version }}"></script>
<script src="{{ $U('/node_modules/chartjs-plugin-colorschemes/dist/chartjs-plugin-colorschemes.min.js?v=', true) }}{{ $version}}"></script>
<script src="{{ $U('/node_modules/chartjs-plugin-doughnutlabel/dist/chartjs-plugin-doughnutlabel.js?v=', true) }}{{ $version }}"></script> <script src="{{ $U('/node_modules/chartjs-plugin-doughnutlabel/dist/chartjs-plugin-doughnutlabel.js?v=', true) }}{{ $version }}"></script>
<script src="{{ $U('/node_modules/chartjs-plugin-piechart-outlabels/dist/chartjs-plugin-piechart-outlabels.js?v=', true) }}{{ $version}}"></script> <script src="{{ $U('/node_modules/chartjs-plugin-piechart-outlabels/dist/chartjs-plugin-piechart-outlabels.min.js?v=', true) }}{{ $version}}"></script>
<script src="{{ $U('/node_modules/daterangepicker/daterangepicker.js?v=', true) }}{{ $version }}"></script> <script src="{{ $U('/node_modules/daterangepicker/daterangepicker.js?v=', true) }}{{ $version }}"></script>
@endpush @endpush
@ -22,28 +23,33 @@
<h2 class="title mr-2 order-0"> <h2 class="title mr-2 order-0">
@yield('title') @yield('title')
</h2> </h2>
<h2 class="mb-0 mr-auto order-3 order-md-1 width-xs-sm-100"> <div class="float-right">
<span id="info-current-stock" <button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
class="text-muted small"></span> type="button"
</h2> data-toggle="collapse"
<button class="btn btn-outline-dark d-md-none mt-2 float-right order-1 order-md-3" data-target="#table-filter-row">
type="button" <i class="fa-solid fa-filter"></i>
data-toggle="collapse" </button>
data-target="#related-links"> <button class="btn btn-outline-dark d-md-none mt-2 order-1 order-md-3"
<i class="fa-solid fa-ellipsis-v"></i> type="button"
</button> data-toggle="collapse"
<div class="related-links collapse d-md-flex order-2 width-xs-sm-100" data-target="#related-links">
id="related-links"> <i class="fa-solid fa-ellipsis-v"></i>
<a class="btn btn-outline-dark responsive-button @if(!$byGroup) active @endif m-1 mt-md-0 mb-md-0 float-right" </button>
href="{{ $U('/stockreports/spendings') }}">
{{ $__t('by Product') }}
</a>
</div> </div>
<div class="related-links collapse d-md-flex order-2 width-xs-sm-100" <div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
id="related-links"> id="related-links">
<a class="btn btn-outline-dark responsive-button @if($byGroup) active @endif m-1 mt-md-0 mb-md-0 float-right" <a class="btn btn-link responsive-button m-1 mt-md-0 mb-md-0 @if(!$byGroup) active @endif discrete-link disabled"
href="#">
{{ $__t('Group by') }}:
</a>
<a class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right @if(!$byGroup) active @endif"
href="{{ $U('/stockreports/spendings') }}">
{{ $__t('Product') }}
</a>
<a class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right @if($byGroup) active @endif"
href="{{ $U('/stockreports/spendings?byGroup=true') }}"> href="{{ $U('/stockreports/spendings?byGroup=true') }}">
{{ $__t('by Group') }} {{ $__t('Product group') }}
</a> </a>
</div> </div>
</div> </div>
@ -54,16 +60,16 @@
<div class="row collapse d-md-flex" <div class="row collapse d-md-flex"
id="table-filter-row"> id="table-filter-row">
<div class="col-sm-12 col-md-6 col-xl-4"> <div class="col-sm-12 col-md-6 col-xl-3">
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span class="input-group-text"><i class="fa-solid fa-clock"></i>&nbsp;{{ $__t('Date range') }}</span> <span class="input-group-text"><i class="fa-solid fa-clock"></i>&nbsp;{{ $__t('Date range') }}</span>
<input type="text"
name="date-filter"
id="daterange-filter"
class="custom-control custom-select"
value="" />
</div> </div>
<input type="text"
name="date-filter"
id="daterange-filter"
class="custom-control custom-select"
value="" />
</div> </div>
</div> </div>
@if(!$byGroup) @if(!$byGroup)
@ -84,7 +90,7 @@
</div> </div>
@endif @endif
<div class="col"> <div class="col">
<div class="float-right mt-1"> <div class="float-right">
<button id="clear-filter-button" <button id="clear-filter-button"
class="btn btn-sm btn-outline-info" class="btn btn-sm btn-outline-info"
data-toggle="tooltip" data-toggle="tooltip"
@ -96,8 +102,7 @@
</div> </div>
<div class="row mt-2"> <div class="row mt-2">
<div id="chart-wrapper" <div class="col-sm-12 col-md-12 col-xl-12">
class="col-sm-12 col-md-12 col-xl-12">
<canvas id="metrics-chart"></canvas> <canvas id="metrics-chart"></canvas>
</div> </div>
<div class="col-sm-12 col-md-12 col-xl-12"> <div class="col-sm-12 col-md-12 col-xl-12">

View File

@ -163,6 +163,11 @@ chartjs-color@~2.2.0:
chartjs-color-string "^0.5.0" chartjs-color-string "^0.5.0"
color-convert "^0.5.3" color-convert "^0.5.3"
chartjs-plugin-colorschemes@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/chartjs-plugin-colorschemes/-/chartjs-plugin-colorschemes-0.4.0.tgz#7a310c32411ef0b5135df1f47da4d379e22220f7"
integrity sha512-GUAulGFa6igdhi/xF9XopLJknwtXZT0wwEB+e/D4SJcRGY1HdwzX84pVn5BSpnk1idF6RJxZoA7w396R7BOE9A==
chartjs-plugin-doughnutlabel@^2.0.3: chartjs-plugin-doughnutlabel@^2.0.3:
version "2.0.3" version "2.0.3"
resolved "https://registry.yarnpkg.com/chartjs-plugin-doughnutlabel/-/chartjs-plugin-doughnutlabel-2.0.3.tgz#0aa19b040dc68e12163e3215a01609cb3e0b5a7b" resolved "https://registry.yarnpkg.com/chartjs-plugin-doughnutlabel/-/chartjs-plugin-doughnutlabel-2.0.3.tgz#0aa19b040dc68e12163e3215a01609cb3e0b5a7b"
@ -317,9 +322,10 @@ datatables.net@>=1.12.1, datatables.net@^1.10.22:
dependencies: dependencies:
jquery ">=1.7" jquery ">=1.7"
daterangepicker@dangrossman/daterangepicker: daterangepicker@^3.1.0:
version "3.1.0" version "3.1.0"
resolved "https://codeload.github.com/dangrossman/daterangepicker/tar.gz/8495717c4007a03fd5dee422f161811fd6140c0e" resolved "https://registry.yarnpkg.com/daterangepicker/-/daterangepicker-3.1.0.tgz#718d606614331df3e774c9aba82ccd8838d45da1"
integrity sha512-DxWXvvPq4srWLCqFugqSV+6CBt/CvQ0dnpXhQ3gl0autcIDAruG1PuGG3gC7yPRNytAD1oU1AcUOzaYhOawhTw==
dependencies: dependencies:
jquery ">=1.10" jquery ">=1.10"
moment "^2.9.0" moment "^2.9.0"
@ -496,7 +502,12 @@ jquery@3.3.1:
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca" resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
integrity sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg== integrity sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==
jquery@>=1.10, jquery@>=1.12.0, jquery@>=1.7, jquery@>=1.7.2, jquery@^3.6.0: jquery@>=1.10:
version "3.6.4"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.4.tgz#ba065c188142100be4833699852bf7c24dc0252f"
integrity sha512-v28EW9DWDFpzcD9O5iyJXg3R3+q+mET5JhnjJzQUZMHOv67bpSIHq81GEYpPNZHG+XXHsfSme3nxp/hndKEcsQ==
jquery@>=1.12.0, jquery@>=1.7, jquery@>=1.7.2, jquery@^3.6.0:
version "3.6.3" version "3.6.3"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6" resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6"
integrity sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg== integrity sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==