fix: connected value showcase to charts table (#4727)

* enabled dynamic title in value showcase and fixed ordering of age groups

apps/cranio-provider/package.json

@@ -15,13 +15,14 @@
     "graphql-request": "5.2.0",
     "molgenis-components": "*",
     "molgenis-viz": "*",
-    "vue":"3.5.13",
+    "vue": "3.5.13",
     "vue-router": "4.4.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "4.6.2",
     "prettier": "2.8.8",
-    "vite": "5.4.12"
+    "vite": "5.4.12",
+    "vitest": "1.6.1"
   },
   "browserslist": [
     "> 1%",

apps/cranio-provider/src/utils/index.ts

@@ -76,6 +76,13 @@ export function uniqueValues(data: any, key: string): string[] {
   return Array.from(new Set(values)).sort() as string[];
 }
 
+export function uniqueAgeGroups(data: any, key: string): string[] {
+  const values = uniqueValues(data, key);
+  return values.sort((a: string, b: string) => {
+    return b.charCodeAt(0) - a.charCodeAt(0);
+  });
+}
+
 /**
  * @name ernCenterPalette
  * @description color palette for charts that show ERN and center comparisons

apps/cranio-provider/src/utils/parseChartTitle.ts

@@ -0,0 +1,14 @@
+/**
+ * @name parseChartTitle
+ * @param string string containing a value to replace
+ * @param value value to subsititute
+ * @param pattern search pattern
+ * @returns string
+ */
+export function parseChartTitle(
+  string: string,
+  value: string | number,
+  pattern: string = "${value}"
+) {
+  return string.replace(pattern, `${value}`);
+}

apps/cranio-provider/src/views/provider-cs-all-general.vue

@@ -144,7 +144,7 @@ import ProviderDashboard from "../components/ProviderDashboard.vue";
 import { generateAxisTickData } from "../utils/generateAxisTicks";
 import { getDashboardChart } from "../utils/getDashboardData";
 import { generateColorPalette } from "../utils/generateColorPalette";
-import { uniqueValues } from "../utils";
+import { uniqueValues, uniqueAgeGroups } from "../utils";
 
 import type { ICharts, IChartData } from "../types/schema";
 import type { IKeyValuePair } from "../types";
@@ -282,7 +282,7 @@ function updatePatientsByCountryChart() {
 }
 
 function setAgeGroupFilter() {
-  ageGroups.value = uniqueValues(
+  ageGroups.value = uniqueAgeGroups(
     cranioTypeChart.value?.dataPoints,
     "dataPointPrimaryCategory"
   );

apps/cranio-provider/src/views/provider-cs-center-general.vue

@@ -113,7 +113,7 @@ import {
 import { generateAxisTickData } from "../utils/generateAxisTicks";
 import { getDashboardChart } from "../utils/getDashboardData";
 import { generateColorPalette } from "../utils/generateColorPalette";
-import { uniqueValues } from "../utils";
+import { uniqueValues, uniqueAgeGroups } from "../utils";
 
 import type { ICharts, IChartData } from "../types/schema";
 import type { IKeyValuePair } from "../types/index";
@@ -222,7 +222,7 @@ function updateMultipeSuturesChart() {
 }
 
 function setAgeGroupFilter() {
-  ageGroups.value = uniqueValues(
+  ageGroups.value = uniqueAgeGroups(
     cranioTypeChart.value?.dataPoints,
     "dataPointPrimaryCategory"
   );

apps/cranio-provider/src/views/provider-overview.vue

@@ -22,8 +22,8 @@
         <LoadingScreen v-if="loading" style="height: auto" />
         <ValueShowcase
           v-else
-          :title="`${numberOfPatientsSubmitted} patients submitted`"
-          :description="`Your center has submitted on average ${monthlyAverageOfSubmissions} patients per month`"
+          :title="(numberOfPatientsSubmitted?.chartTitle as string)"
+          :description="(patientsSubmittedByTime?.chartTitle as string)"
         >
           <template v-slot:icon>
             <UserCircleIcon />
@@ -34,7 +34,9 @@
     <DashboardRow :columns="2">
       <DashboardChart id="provider-overview-patients-by-workstream">
         <LoadingScreen v-if="loading" style="height: 215px" />
-        <MessageBox v-else-if="!loading && numberOfPatientsSubmitted === 0">
+        <MessageBox
+          v-else-if="!loading && numberOfPatientsSubmitted!.dataPoints![0].dataPointValue === 0"
+        >
           <span>Not enough data to show chart</span>
         </MessageBox>
         <ColumnChart
@@ -103,15 +105,16 @@ import { asKeyValuePairs, uniqueValues } from "../utils";
 import { generateColorPalette } from "../utils/generateColorPalette";
 import { getDashboardChart } from "../utils/getDashboardData";
 import { generateAxisTickData } from "../utils/generateAxisTicks";
+import { parseChartTitle } from "../utils/parseChartTitle";
 
 import type { ICharts, IChartData } from "../types/schema";
 import type { IAppPage } from "../types/app";
 import type { IKeyValuePair } from "../types/index";
 const props = defineProps<IAppPage>();
 
 const loading = ref<boolean>(true);
-const numberOfPatientsSubmitted = ref<number>(0);
-const monthlyAverageOfSubmissions = ref<number>(0);
+const numberOfPatientsSubmitted = ref<ICharts>();
+const patientsSubmittedByTime = ref<ICharts>();
 const patientsByWorkstreamChart = ref<ICharts>();
 const patientsByWorkstreamChartData = ref<IChartData[]>();
 const patientsByWorkstreamPalette = ref<IKeyValuePair>();
@@ -126,7 +129,7 @@ async function getPageData() {
     "patients-total"
   );
 
-  const monthlySubmissionResponse = await getDashboardChart(
+  const timeSubmissionResponse = await getDashboardChart(
     props.api.graphql.current,
     "patients-per-month"
   );
@@ -144,12 +147,8 @@ async function getPageData() {
   patientsByWorkstreamChart.value = patientsByWorkstreamResponse[0];
   sexByWorkstreamChart.value = sexByWorkstreamResponse[0];
 
-  const submissionsData = submissionsResponse[0];
-  const monthlySubmissionsData = monthlySubmissionResponse[0];
-  numberOfPatientsSubmitted.value =
-    submissionsData.dataPoints![0].dataPointValue!;
-  monthlyAverageOfSubmissions.value =
-    monthlySubmissionsData.dataPoints![0].dataPointValue!;
+  numberOfPatientsSubmitted.value = submissionsResponse[0];
+  patientsSubmittedByTime.value = timeSubmissionResponse[0];
 }
 
 function updateSexByWorkstream(value: string) {
@@ -175,6 +174,27 @@ function updateSexByWorkstream(value: string) {
 onMounted(() => {
   getPageData()
     .then(() => {
+      // set value showcase titles
+      if (
+        numberOfPatientsSubmitted.value?.chartTitle &&
+        numberOfPatientsSubmitted.value?.dataPoints
+      ) {
+        numberOfPatientsSubmitted.value.chartTitle = parseChartTitle(
+          numberOfPatientsSubmitted.value.chartTitle,
+          numberOfPatientsSubmitted.value.dataPoints[0].dataPointValue!
+        );
+      }
+
+      if (
+        patientsSubmittedByTime.value?.chartTitle &&
+        patientsSubmittedByTime.value?.dataPoints
+      ) {
+        patientsSubmittedByTime.value.chartTitle = parseChartTitle(
+          patientsSubmittedByTime.value.chartTitle,
+          patientsSubmittedByTime.value.dataPoints[0].dataPointValue!
+        );
+      }
+
       // prepare workstream data
       patientsByWorkstreamChartData.value =
         patientsByWorkstreamChart.value!.dataPoints?.sort(

apps/cranio-provider/tests/parseChartTitle.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, test } from "vitest";
+import { parseChartTitle } from "../src/utils/parseChartTitle";
+
+describe("parseChartTitle", () => {
+  test("text is correctly replaces", () => {
+    const currentTitle = "The current selected value is ${value}.";
+    const dataValue = 123;
+    const updatedTitle = parseChartTitle(currentTitle, dataValue, "${value}");
+    expect(updatedTitle).toBe("The current selected value is 123.");
+  });
+});