Update tooltip (#103)

* Change how the tooltip is displayed - Use the custom labels for breakdown and time period - Move the extra notes in a separate row. - Remove the "data from" prefix from the reference period * Update descriptions * Fix tests * Don't attempt to modify computed property * Fix test * Add support for multiple select components Fix flaky test by ensuring that the desired country is selected
digital-agenda-data · Sep 4, 2024 · 08c39d3 · 08c39d3
1 parent c857cdc
commit 08c39d3
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 33 deletions.
diff --git a/digital_agenda/apps/estat/admin.py b/digital_agenda/apps/estat/admin.py
@@ -34,6 +34,7 @@ class GeoGroupAdmin(admin.ModelAdmin):
 <dl>
     <li>Surrogate fields will be taken as hardcoded values instead.</li>
     <li>Non-existing values are automatically created on import.</li>
+    <li>Imported values can be transformed my using the mapping fields below.</li>
 </dl>
 """
 FILTERS_DESCRIPTION = """

diff --git a/digital_agenda/apps/estat/migrations/0016_alter_importconfig_reference_period_and_more.py b/digital_agenda/apps/estat/migrations/0016_alter_importconfig_reference_period_and_more.py
@@ -0,0 +1,34 @@
+# Generated by Django 4.2.15 on 2024-09-04 05:59
+
+import digital_agenda.common.citext
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("estat", "0015_importconfig_reference_period_and_more"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="importconfig",
+            name="reference_period",
+            field=digital_agenda.common.citext.CICharField(
+                blank=True,
+                help_text="String only field, doesn't required related object to exist",
+                max_length=60,
+                null=True,
+            ),
+        ),
+        migrations.AlterField(
+            model_name="importconfig",
+            name="remarks",
+            field=digital_agenda.common.citext.CICharField(
+                blank=True,
+                help_text="String only field, doesn't required related object to exist",
+                max_length=60,
+                null=True,
+            ),
+        ),
+    ]
diff --git a/digital_agenda/apps/estat/models.py b/digital_agenda/apps/estat/models.py
@@ -143,10 +143,20 @@ class ConflictResolution(models.TextChoices):
     period = CICharField(max_length=60, default="time")
     period_is_surrogate = models.BooleanField(default=False)
 
-    reference_period = CICharField(max_length=60, blank=True, null=True)
+    reference_period = CICharField(
+        max_length=60,
+        blank=True,
+        null=True,
+        help_text="String only field, doesn't required related object to exist",
+    )
     reference_period_is_surrogate = models.BooleanField(default=False)
 
-    remarks = CICharField(max_length=60, blank=True, null=True)
+    remarks = CICharField(
+        max_length=60,
+        blank=True,
+        null=True,
+        help_text="String only field, doesn't required related object to exist",
+    )
     remarks_is_surrogate = models.BooleanField(default=False)
 
     period_start = models.PositiveIntegerField(

diff --git a/frontend/cypress/e2e/charts/1.desi/1.desi-indicators.cy.js b/frontend/cypress/e2e/charts/1.desi/1.desi-indicators.cy.js
@@ -14,15 +14,17 @@ describeResponsive("Check Chart", () => {
         "e-Government users",
         "All Individuals",
         "(aged 16-74)",
+        "DESI period: 2023",
         // Check for the extra note
-        "DESI period: 2023 (data from 2022)",
+        "(data from 2022)",
       ],
       point: "European Union, 74.2.",
       tooltip: [
         "European Union",
         "All individuals",
         "74.20% of internet users (last 12 months)",
-        "DESI period: 2023 (data from 2022)",
+        "DESI period: 2023",
+        "(data from 2022)",
       ],
       definitions: [
         "Indicator: e-Government users",

diff --git a/...d/cypress/e2e/charts/10.test-custom-labels/5.test-bar-stacked-breakdowns-alt-labels.cy.js b/...d/cypress/e2e/charts/10.test-custom-labels/5.test-bar-stacked-breakdowns-alt-labels.cy.js
@@ -21,7 +21,7 @@ describeResponsive("Check Chart", () => {
         "European Union",
         "with dependent children",
         "85.45% of households",
-        "Time Period: 2012",
+        "Period: 2012",
       ],
       legend: ["with dependent childrens", "without dependent childrens"],
       definitions: [

diff --git a/...d/cypress/e2e/charts/4.key-indicators/1.analyse-one-indicator-and-compare-countries.cy.js b/...d/cypress/e2e/charts/4.key-indicators/1.analyse-one-indicator-and-compare-countries.cy.js
@@ -23,7 +23,7 @@ describeResponsive("Check Chart", () => {
         "Total",
         "0.50% of enterprises",
         "This data point is for the EU",
-        "Data from 2020",
+        "Reference period: 2020",
       ],
       definitions: [
         "Indicator: Enterprises having a fixed broadband connection",

diff --git a/frontend/cypress/e2e/charts/4.key-indicators/5.maps-by-country.cy.js b/frontend/cypress/e2e/charts/4.key-indicators/5.maps-by-country.cy.js
@@ -9,6 +9,7 @@ describeResponsive("Check Chart", () => {
         breakdown: "Females",
         period: "2019",
         unit: "% of graduates",
+        country: ["Romania"],
       },
       title: ["ICT graduates, Females", "Year: 2019"],
       point: "x, RO, value: 2.2.",

diff --git a/frontend/cypress/support/commands.ts b/frontend/cypress/support/commands.ts
@@ -45,22 +45,42 @@ Cypress.Commands.addAll({
     }
   },
   checkFilter(inputName, label) {
-    return cy
-      .get(`[data-name='${inputName}'] .multiselect__single`)
-      .contains(label);
+    if (!Array.isArray(label)) {
+      return cy
+        .get(`[data-name='${inputName}'] .multiselect__single`)
+        .contains(label);
+    }
   },
   selectFilter(inputName, label) {
     // Wait for multiselect to be rendered but wai until it's finished loading
     cy.get(`[data-name='${inputName}']`).should("exist");
     cy.get(`[data-name='${inputName}'][data-loading=true]`).should("not.exist");
     // Then click it to reveal the dropdown
     cy.get(`[data-name='${inputName}']`).click();
-    cy.get(`[data-name='${inputName}'] [role='option']`)
-      .contains(label)
-      .click();
+
+    if (!Array.isArray(label)) {
+      cy.get(`[data-name='${inputName}'] [role='option']`)
+        .contains(label)
+        .click();
+    } else {
+      for (const item of label) {
+        cy.get(`[data-name='${inputName}'] [role='option']`)
+          .contains(item)
+          .closest("[role='option']")
+          .then(($el) => {
+            const checkbox = $el.find("input[type=checkbox]");
+            if (!checkbox.is(":checked")) {
+              cy.wrap($el).click();
+            }
+            cy.wrap(checkbox).should("be.checked", true);
+          });
+      }
+    }
     // Wait for the dropdown to disappear and make sure the option we wanted
     // was selected.
-    cy.get(`[data-name='${inputName}']`).type("{esc}");
+    cy.get(`[data-name='${inputName}'] input[type=text]`)
+      .first()
+      .type("{esc}", { force: true });
     cy.get(`[data-name='${inputName}'] .multiselect__content`).should(
       "not.be.visible",
     );

diff --git a/frontend/src/components/charts/base/BaseChart.vue b/frontend/src/components/charts/base/BaseChart.vue
@@ -9,15 +9,10 @@
 </template>
 
 <script>
-import { useAppSettings } from "@/stores/appSettingsStore";
-import { useChartGroupStore } from "@/stores/chartGroupStore";
-import { usePeriodStore } from "@/stores/periodStore";
-import { mapState, mapStores } from "pinia";
-import { Chart } from "highcharts-vue";
-
 import SimpleSpinner from "@/components/SimpleSpinner.vue";
 
 import { api } from "@/lib/api";
+import { VALUE_AXIS, YEAR_AXIS } from "@/lib/constants";
 import {
   forceArray,
   getBreakdownLabel,
@@ -29,11 +24,15 @@ import {
   groupByMulti,
   toAPIKey,
 } from "@/lib/utils";
+import { useAppSettings } from "@/stores/appSettingsStore";
+import { useChartGroupStore } from "@/stores/chartGroupStore";
 
 import { useChartStore } from "@/stores/chartStore";
-import { useFilterStore } from "@/stores/filterStore";
 import { useCountryStore } from "@/stores/countryStore";
-import { VALUE_AXIS, YEAR_AXIS } from "@/lib/constants";
+import { useFilterStore } from "@/stores/filterStore";
+import { usePeriodStore } from "@/stores/periodStore";
+import { Chart } from "highcharts-vue";
+import { mapState, mapStores } from "pinia";
 
 /**
  * Base component use for charts. Extend this component and override various
@@ -56,7 +55,7 @@ export default {
     ...mapStores(useFilterStore),
     ...mapState(useAppSettings, ["appSettings"]),
     ...mapState(useChartStore, ["currentChart"]),
-    ...mapState(useChartGroupStore, ["currentChartGroupCode"]),
+    ...mapState(useChartGroupStore, ["currentChartGroupCode", "currentLabels"]),
     ...mapState(useCountryStore, ["countryByCode"]),
     ...mapState(usePeriodStore, ["periodList"]),
     ...mapState(useFilterStore, [
@@ -375,26 +374,26 @@ export default {
 
           if (parent.breakdown?.code) {
             result.push(
-              `<b>Breakdown:</b> ${getBreakdownLabel(parent.breakdown)}`,
+              `<b>${parent.currentLabels.breakdown ?? "Breakdown"}:</b> ${getBreakdownLabel(parent.breakdown)}`,
             );
           }
 
           if (parent.period?.code) {
             result.push(
-              `<b>Time Period:</b> ${parent.getPeriodWithExtraNotes()}`,
+              `<b>${parent.currentLabels.period ?? "Time period"}:</b> ${getPeriodLabel(parent.period, "alt_label")}`,
             );
           }
 
-          if (fact.reference_period) {
-            result.push(
-              `<b>Reference period:</b> Data from ${fact.reference_period}`,
-            );
+          if (fact?.reference_period) {
+            result.push(`<b>Reference period:</b> ${fact.reference_period}`);
           }
 
-          if (fact.remarks) {
+          if (fact?.remarks) {
             result.push(`<b>Remarks:</b> ${fact.remarks}`);
           }
 
+          result.push(...parent.getExtraNotes());
+
           return result.join("<br/>");
         },
       };
@@ -426,6 +425,14 @@ export default {
   },
   methods: {
     getUnitDisplay,
+    getExtraNotes(period = null, indicator = null) {
+      period ??= this.period;
+      indicator ??= this.indicator;
+
+      return (indicator?.extra_notes || [])
+        .filter((item) => item.period === period?.code)
+        .map((item) => item.note);
+    },
     /**
      * Get the preferred label for this period together with any corresponding
      * extra notes from the indicator.
@@ -443,9 +450,7 @@ export default {
       period ??= this.period;
       indicator ??= this.indicator;
 
-      const extraNotes = (indicator?.extra_notes || [])
-        .filter((item) => item.period === period?.code)
-        .map((item) => item.note);
+      const extraNotes = this.getExtraNotes(period, indicator);
       const result = [getPeriodLabel(period)];
 
       if (withBreak && extraNotes.length > 0) {
@@ -480,7 +485,7 @@ export default {
     },
     async loadData() {
       if (!this.endpointParams) {
-        this.apiData = [];
+        this.rawApiData = [];
         return;
       }