fix: Use sorting order correctly even if there are multiple ones

visualize-admin · Nov 4, 2022 · f56f925 · f56f925
1 parent 7b2ef1e
commit f56f925
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 19 deletions.
diff --git a/app/charts/area/areas-state.tsx b/app/charts/area/areas-state.tsx
@@ -50,7 +50,10 @@ import {
 import { getPalette } from "@/palettes";
 import { sortByIndex } from "@/utils/array";
 import { estimateTextWidth } from "@/utils/estimate-text-width";
-import { makeDimensionValueSorters } from "@/utils/sorting-values";
+import {
+  getSortingOrders,
+  makeDimensionValueSorters,
+} from "@/utils/sorting-values";
 
 export interface AreasState extends CommonChartState {
   chartType: "area";
@@ -228,13 +231,12 @@ const useAreasState = (
     return orderBy(
       uniqueSegments,
       sorters,
-      segmentSortingOrder === "desc" ? "desc" : "asc"
+      getSortingOrders(sorters, segmentSorting)
     );
   }, [
     plottableSortedData,
     dimensions,
     segmentSorting,
-    segmentSortingOrder,
     getY,
     getSegment,
     fields.segment?.componentIri,

diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
@@ -53,7 +53,10 @@ import { isTemporalDimension, Observation } from "@/domain/data";
 import { useFormatNumber, formatNumberWithUnit } from "@/formatters";
 import { getPalette } from "@/palettes";
 import { sortByIndex } from "@/utils/array";
-import { makeDimensionValueSorters } from "@/utils/sorting-values";
+import {
+  getSortingOrders,
+  makeDimensionValueSorters,
+} from "@/utils/sorting-values";
 
 export interface GroupedColumnsState extends CommonChartState {
   chartType: "column";
@@ -197,11 +200,7 @@ const useGroupedColumnsState = (
       sumsBySegment,
     });
 
-    return orderBy(
-      uniqueSegments,
-      sorters,
-      sorting?.sortingOrder === "desc" ? "desc" : "asc"
-    );
+    return orderBy(uniqueSegments, sorters, getSortingOrders(sorters, sorting));
   }, [
     plottableSortedData,
     dimensions,

diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx
@@ -53,7 +53,10 @@ import { isTemporalDimension, Observation } from "@/domain/data";
 import { formatNumberWithUnit, useFormatNumber } from "@/formatters";
 import { getPalette } from "@/palettes";
 import { sortByIndex } from "@/utils/array";
-import { makeDimensionValueSorters } from "@/utils/sorting-values";
+import {
+  getSortingOrders,
+  makeDimensionValueSorters,
+} from "@/utils/sorting-values";
 
 export interface StackedColumnsState extends CommonChartState {
   chartType: "column";
@@ -201,11 +204,8 @@ const useColumnsStackedState = (
       sorting,
       sumsBySegment,
     });
-    return orderBy(
-      uniqueSegments,
-      sorters,
-      sorting?.sortingOrder === "desc" ? "desc" : "asc"
-    );
+
+    return orderBy(uniqueSegments, sorters, getSortingOrders(sorters, sorting));
   }, [
     plottableSortedData,
     dimensions,

diff --git a/app/charts/pie/pie-state.tsx b/app/charts/pie/pie-state.tsx
@@ -27,8 +27,10 @@ import { PieFields } from "@/configurator";
 import { DimensionValue, Observation } from "@/domain/data";
 import { formatNumberWithUnit, useFormatNumber } from "@/formatters";
 import { getPalette } from "@/palettes";
-import { makeDimensionValueSorters } from "@/utils/sorting-values";
-
+import {
+  getSortingOrders,
+  makeDimensionValueSorters,
+} from "@/utils/sorting-values";
 export interface PieState extends CommonChartState {
   chartType: "pie";
   allData: Observation[];
@@ -114,15 +116,16 @@ const usePieState = (
       .filter((x) => typeof x[1] === "number")
       .map((x) => x[0]);
 
+    const sorting = fields.segment.sorting;
     const sorters = makeDimensionValueSorters(segmentDimension, {
-      sorting: fields.segment.sorting,
+      sorting: sorting,
       measureBySegment,
     });
 
     const segments = orderBy(
       uniqueSegments,
       sorters,
-      sortingOrder === "desc" ? "desc" : "asc"
+      getSortingOrders(sorters, sorting)
     );
 
     if (fields.segment && segmentDimension && fields.segment.colorMapping) {

diff --git a/app/utils/sorting-values.ts b/app/utils/sorting-values.ts
@@ -90,3 +90,12 @@ export const valueComparator = (locale: string) => (a: Value, b: Value) => {
     return a.label.localeCompare(b.label, locale);
   }
 };
+
+export const getSortingOrders = (
+  sorters: ((...args: any[]) => any)[],
+  sorting: SortingField["sorting"]
+) => {
+  return Array(sorters.length).fill(
+    sorting?.sortingOrder === "desc" ? "desc" : "asc"
+  );
+};