diff --git a/CHANGELOG.md b/CHANGELOG.md index 3f3c7839d..2c807969d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,8 @@ You can also check the - It's now possible to share filters between tables in dashboards - Charts are not animating in and out anymore when interacting with UI in some rare cases + - Sorting of values in the multi filter panel is now consistent with the rest + of the application - Styles - Added missing paddings in details panel autocomplete component and in banner component for smaller breakpoints diff --git a/app/configurator/components/filters.spec.ts b/app/configurator/components/filters.spec.ts index c9f7915f2..d5a6a7408 100644 --- a/app/configurator/components/filters.spec.ts +++ b/app/configurator/components/filters.spec.ts @@ -1,7 +1,7 @@ import { describe, expect, it } from "vitest"; -import { getHasColorMapping } from "@/configurator/components/filters"; -import { TemporalDimension } from "@/domain/data"; +import { getHasColorMapping, sortFilterValues } from "@/configurator/components/filters"; +import { HierarchyValue, TemporalDimension } from "@/domain/data"; import { TimeUnit } from "@/graphql/resolver-types"; import { getD3TimeFormatLocale } from "@/locales/locales"; import { getTimeFilterOptions } from "@/utils/time-filter-options"; @@ -42,3 +42,38 @@ describe("colorMapping", () => { ).toBe(false); }); }); + +describe("sortFilterValues", () => { + it("should sort values numerically by identifier when identifiers are numeric strings", () => { + const values: HierarchyValue[] = [ + { + depth: 0, + dimensionId: "test", + value: "1", + hasValue: true, + label: "One", + identifier: "1", + }, + { + depth: 0, + dimensionId: "test", + value: "10", + hasValue: true, + label: "Ten", + identifier: "10", + }, + { + depth: 0, + dimensionId: "test", + value: "2", + hasValue: true, + label: "Two", + identifier: "2", + }, + ]; + + const sortedValues = sortFilterValues(values); + + expect(sortedValues.map(v => v.identifier)).toEqual(["1", "2", "10"]); + }); +}); diff --git a/app/configurator/components/filters.tsx b/app/configurator/components/filters.tsx index 4b5950dae..162826c48 100644 --- a/app/configurator/components/filters.tsx +++ b/app/configurator/components/filters.tsx @@ -21,7 +21,6 @@ import { ascending, groups, max, sum } from "d3-array"; import get from "lodash/get"; import groupBy from "lodash/groupBy"; import keyBy from "lodash/keyBy"; -import orderBy from "lodash/orderBy"; import uniqBy from "lodash/uniqBy"; import { ChangeEvent, @@ -183,6 +182,18 @@ const groupByParent = (node: { parents: HierarchyValue[] }) => { return joinParents(node?.parents); }; +export const sortFilterValues = (values: HierarchyValue[]) => { + return values.sort((a, b) => { + return ( + ascending(a.position ?? 0, b.position ?? 0) || + `${a.identifier}`.localeCompare(`${b.identifier}`, undefined, { + numeric: true, + }) || + a.label.localeCompare(b.label) + ); + }); +}; + const getColorConfig = (chartConfig: ChartConfig) => { if (isColorInConfig(chartConfig)) { return get(chartConfig.fields, ["color"]) as ColorField | undefined; @@ -292,10 +303,7 @@ const MultiFilterContent = ({ ) || ascending(a[0], b[0]) ) .map(([parent, group]) => { - return [ - parent, - orderBy(group, ["position", "identifier", "label"]), - ] as const; + return [parent, sortFilterValues(group)] as const; }); return {