prepares display of accounts making up dataset

djaodjin · Aug 8, 2024 · 6624d39 · 6624d39
1 parent 512b0b3
commit 6624d39
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 1 deletion.
diff --git a/djaopsp/static/js/reporting-vue.js b/djaopsp/static/js/reporting-vue.js
@@ -425,7 +425,8 @@ Vue.component('engage-profiles', {
 
 Vue.component('djaopsp-compare-samples', {
     mixins: [
-        practicesListMixin
+        practicesListMixin,
+        accountDetailMixin
     ],
     data: function() {
         return {
@@ -441,6 +442,10 @@ Vue.component('djaopsp-compare-samples', {
             },
             visualize: 'chart', //'table',
             percentToggle: true,
+
+            // when clicking on Chart
+            selectedDatapoint: "",
+            selectedAccounts: []
         }
     },
     methods: {
@@ -492,6 +497,29 @@ Vue.component('djaopsp-compare-samples', {
             var vm = this;
             vm.$refs.accountsTab.click();
         },
+        humanizePeriods: function(labels) {
+            var vm = this;
+            var results = [];
+            const dateFormat = new Intl.DateTimeFormat(
+                'en-US', {
+                    //                            day: '2-digit',
+                    month: '2-digit',
+                    year: 'numeric',
+                });
+            for( let lblIdx = 0; lblIdx < labels.length; ++lblIdx ) {
+                const dtime = new Date(labels[lblIdx]);
+                results.push(
+                    vm.periodType == 'yearly' ? dtime.getUTCFullYear() : (
+                    vm.periodType == 'monthly' ? dateFormat.format(dtime) : dtime));
+            }
+            return results;
+        },
+        onDatasetSelected: function() {
+            // This method is called when the component needs to show
+            // the list of accounts participating to a specific dataset.
+            var vm = this;
+            vm.populateAccounts(vm.selectedAccounts);
+        },
         updateChart: function() {
             var vm = this;
             const entries = vm.getEntries(vm.displayMetric.path);
@@ -626,6 +654,7 @@ Vue.component('djaopsp-compare-samples', {
                 if( vm.compareChart ) {
                     vm.compareChart.destroy();
                 }
+                labels = vm.humanizePeriods(labels);
                 if( choices.length ) {
                     vm.compareChart = new Chart(
                         document.getElementById('summaryChart'), {

diff --git a/djaopsp/templates/survey/matrix/compare.html b/djaopsp/templates/survey/matrix/compare.html
@@ -556,11 +556,13 @@ <h3 class="text-center"><span v-show="datasets.length > 1">{% trans %}left to ri
               {% include "app/reporting/_percentage_toggle.html" %}
             </div>
             <div class="col-md-4">
+<!-- XXX
               <select class="form-select"
                     v-model="visualize">
                 <option value="table">{% trans %}Table{% endtrans %}</option>
                 <option value="chart">{% trans %}Chart{% endtrans %}</option>
               </select>
+-->
             </div>
             <div class="col-md-4 text-end">
               <div class="d-inline-block">
@@ -585,6 +587,27 @@ <h3 class="text-center"><span v-show="datasets.length > 1">{% trans %}left to ri
           </div>
 
         </div>{# /datasets.length > 0 #}
+
+        <!-- items in query set -->
+        <div>
+          <p>
+              [[selectedDatapoint]]
+          </p>
+          <table class="table table-striped">
+            <tr>
+              <th class="col-1">{% trans %}Supplier ID{% endtrans %}</th>
+              <th class="col-11">{% trans %}Profile name{% endtrans %}</th>
+            </tr>
+            <tr v-for="(entry, index) in selectedAccounts">
+              <td class="col-1">
+                <span>[[index + 1 + (params.page ? (params.page - 1) * itemsPerPage : 0)]]</span><br />
+              </td>
+              <td class="col-11">
+                <img class="img-fluid" style="max-height: 1rem;" :src="getAccountPicture(entry) || '{{'/static/img/default-organization.png'|asset}}'"> [[getAccountPrintableName(entry) || entry.slug]]
+              </td>
+            </tr>
+          </table>
+        </div>
       </div>{# /.col-md-9 #}
     </div>{# /.row #}
   </div>

diff --git a/djaopsp/views/matrix.py b/djaopsp/views/matrix.py
@@ -37,6 +37,7 @@ def get_context_data(self, **kwargs):
         update_context_urls(context, {
             'api_version': site_url("/api"),
             'api_account_candidates': site_url("/api/accounts/profiles"),
+            'api_accounts': site_url("/api/profile"),
             'api_plans': site_url("/api/profile/%(profile)s/plans" % {
                 'profile': self.account}),
             'api_subscriptions': site_url(