Sort scenarios in comparisons consistently wherever displayed

Author: david-mears-2

components/Charts/Compare/CompareCostsChart.client.vue

@@ -22,6 +22,7 @@ import { costAsPercentOfGdp } from "@/components/utils/formatters";
 import { CostBasis } from "@/types/unitTypes";
 import { debounce } from "perfect-debounce";
 import { diffAgainstBaseline } from "~/components/utils/comparisons";
+import useSortedScenarios from "~/composables/useSortedScenarios";
 
 const props = defineProps<{
   diffing: boolean
@@ -32,11 +33,12 @@ let chart: Highcharts.Chart;
 const seriesSummary = ref<Highcharts.SeriesColumnOptions[]>([]); // This only exists for testing purposes
 const chartContainer = ref<HTMLElement | null>(null);
 const chartParentEl = computed(() => chartContainer.value?.parentElement);
-const scenarios = computed(() => {
-  return props.diffing
-    ? appStore.currentComparison.scenarios.filter(s => s.runId !== appStore.baselineScenario?.runId)
-    : appStore.currentComparison.scenarios;
-});
+
+const scenarios = computed(() => props.diffing
+  ? appStore.currentComparison.scenarios.filter(s => s.runId !== appStore.baselineScenario?.runId)
+  : appStore.currentComparison.scenarios);
+const { sortedScenarios } = useSortedScenarios(scenarios);
+
 const costBasis = computed(() => appStore.preferences.costBasis);
 const chartTitle = computed(() => {
   const firstScenarioTimeSeries = appStore.currentComparison.scenarios[0].result?.data?.time_series;
@@ -54,15 +56,15 @@ const chartTitle = computed(() => {
 // For example, one series should comprise each scenario's GDP.
 const getSeries = (): Highcharts.SeriesColumnOptions[] => {
   // Take the first scenario's costs as an example to find out what the second-level breakdowns are.
-  const secondLevelCostIds = scenarios.value[0].result.data?.costs[0].children?.map(c => c.id) || [];
+  const secondLevelCostIds = sortedScenarios.value[0].result.data?.costs[0].children?.map(c => c.id) || [];
   const allSeries = secondLevelCostIds?.map((costId, index) => {
     return {
       type: "column" as Highcharts.SeriesColumnOptions["type"],
       name: appStore.getCostLabel(costId),
       borderWidth: 1,
       borderColor: costsChartPalette[index].rgb,
       zIndex: secondLevelCostIds.length - index, // Ensure that stack segments are in front of each other from top to bottom.
-      data: scenarios.value.map((scenario) => {
+      data: sortedScenarios.value.map((scenario) => {
         const subCost = appStore.getScenarioCostById(scenario, costId)!;
         const yUSD = props.diffing ? diffAgainstBaseline(subCost, USD_METRIC) : getValueFromCost(subCost, USD_METRIC);
         // yGdpPercent is calculated here since the national GDP may vary by scenario if the axis is 'country'.
@@ -136,7 +138,7 @@ const chartInitialOptions = () => {
       },
     },
     xAxis: {
-      categories: scenarios.value.map(s => appStore.getScenarioAxisValue(s)),
+      categories: sortedScenarios.value.map(s => appStore.getScenarioAxisValue(s)),
       title: { text: appStore.axisMetadata?.label },
       labels: {
         style: {
@@ -211,7 +213,7 @@ watch(() => props.diffing, () => {
     },
     title: { text: chartTitle.value },
     xAxis: {
-      categories: scenarios.value.map(s => appStore.getScenarioAxisValue(s) || ""),
+      categories: sortedScenarios.value.map(s => appStore.getScenarioAxisValue(s) || ""),
     },
     yAxis: {
       min: props.diffing ? undefined : 0,

components/Charts/Compare/CompareTimeSeriesLegend.vue

@@ -20,18 +20,17 @@ import { timeSeriesColors } from "../utils/timeSeriesCharts";
 
 const appStore = useAppStore();
 
-const items = computed((): LegendItem[] => {
-  const all = appStore.currentComparison.scenarios.map((scenario: Scenario, index: number) => {
-    const isBaseline = scenario === appStore.baselineScenario;
-    return {
-      color: timeSeriesColors[index],
-      label: `${appStore.getScenarioAxisLabel(scenario)} ${(isBaseline ? " (baseline)" : "")}`,
-      shape: LegendShape.Line,
-    };
-  }) || [];
+const scenarios = computed(() => appStore.currentComparison.scenarios);
+const { sortedScenarios } = useSortedScenarios(scenarios);
 
-  return all;
-});
+const items = computed((): LegendItem[] => sortedScenarios.value.map((scenario: Scenario, index: number) => {
+  const isBaseline = scenario === appStore.baselineScenario;
+  return {
+    color: timeSeriesColors[index],
+    label: `${appStore.getScenarioAxisLabel(scenario)} ${(isBaseline ? " (baseline)" : "")}`,
+    shape: LegendShape.Line,
+  };
+}) || []);
 
 // Lay out items in columns manually since the implementation of 'flex-direction: column'
 // while applying flex wrap differs between Safari/Firefox/Chrome.

components/CostsTable.vue

@@ -23,7 +23,7 @@
           </CButton>
         </th>
         <th
-          v-for="scenario in scenariosToDisplay"
+          v-for="scenario in sortedScenarios"
           :key="scenario.runId"
           class="pt-0"
         >
@@ -46,7 +46,7 @@
           {{ appStore.preferences.costBasis === CostBasis.PercentGDP ? "as % of GDP" : "(USD)" }}
         </td>
         <td
-          v-for="(scenario) in scenariosToDisplay"
+          v-for="(scenario) in sortedScenarios"
           :key="scenario.runId"
           :class="scenarioClass(scenario)"
         >
@@ -62,7 +62,7 @@
             {{ appStore.getCostLabel(childCost.id) }}{{ childCost.id === 'life_years' ? '*' : '' }}
           </td>
           <td
-            v-for="(scenario) in scenariosToDisplay"
+            v-for="(scenario) in sortedScenarios"
             :key="scenario.runId"
             :class="scenarioClass(scenario)"
           >
@@ -77,7 +77,7 @@
         >
           <td>{{ appStore.getCostLabel(grandChildCost.id) }}</td>
           <td
-            v-for="(scenario) in scenariosToDisplay"
+            v-for="(scenario) in sortedScenarios"
             :key="scenario.runId"
             :class="scenarioClass(scenario)"
           >
@@ -93,7 +93,7 @@
           Life years lost {{ props.diffing ? "relative to baseline" : "" }}
         </td>
         <td
-          v-for="(scenario) in scenariosToDisplay"
+          v-for="(scenario) in sortedScenarios"
           :key="scenario.runId"
           :class="scenarioClass(scenario)"
         >
@@ -108,7 +108,7 @@
       >
         <td>{{ appStore.getCostLabel(ageSectorCost.id) }}</td>
         <td
-          v-for="(scenario) in scenariosToDisplay"
+          v-for="(scenario) in sortedScenarios"
           :key="scenario.runId"
           :class="scenarioClass(scenario)"
         >
@@ -123,7 +123,7 @@
           Deaths {{ props.diffing ? "relative to baseline" : "" }}
         </td>
         <td
-          v-for="(scenario) in scenariosToDisplay"
+          v-for="(scenario) in sortedScenarios"
           :key="scenario.runId"
           :class="scenarioClass(scenario)"
         >
@@ -142,6 +142,7 @@ import { CostBasis } from "~/types/unitTypes";
 import type { Scenario } from "~/types/storeTypes";
 import { diffAgainstBaseline } from "./utils/comparisons";
 import { CUMULATIVE_DEATHS_SERIES_ID } from "./Charts/utils/timeSeriesData";
+import useSortedScenarios from "~/composables/useSortedScenarios";
 
 const props = defineProps<{
   scenarios: Scenario[]
@@ -152,11 +153,10 @@ const accordioned = ref(true);
 const appStore = useAppStore();
 
 const multiScenario = computed(() => props.scenarios.length > 1);
-const scenariosToDisplay = computed(() => {
-  return props.diffing
-    ? props.scenarios.filter(s => s.runId !== appStore.baselineScenario?.runId)
-    : props.scenarios;
-});
+const scenarios = computed(() => props.diffing
+  ? props.scenarios.filter(s => s.runId !== appStore.baselineScenario?.runId)
+  : props.scenarios);
+const { sortedScenarios } = useSortedScenarios(scenarios);
 
 const scenarioLabel = (scenario: Scenario) => appStore.getScenarioAxisLabel(scenario);
 

composables/useSortedScenarios.ts

@@ -0,0 +1,26 @@
+import { sortOptions } from "~/components/utils/parameters";
+import type { Scenario } from "~/types/storeTypes";
+
+export default (scenarios: MaybeRefOrGetter<Scenario[]>) => {
+  const appStore = useAppStore();
+
+  const sortedScenarios = computed(() => {
+    const scens = toValue(scenarios);
+    if (scens.length === 1) {
+      return scens;
+    }
+    if (!appStore.axisMetadata) {
+      return scens;
+    }
+    const scenarioAxisValues = scens.map(s => appStore.getScenarioAxisValue(s)).filter(o => o !== undefined);
+    const sortedOptions = sortOptions(appStore.axisMetadata, scenarioAxisValues);
+    scens.sort((a, b) => {
+      const aValue = appStore.getScenarioAxisValue(a)!;
+      const bValue = appStore.getScenarioAxisValue(b)!;
+      return sortedOptions.indexOf(aValue) - sortedOptions.indexOf(bValue);
+    });
+    return scens;
+  });
+
+  return { sortedScenarios };
+};