Merge pull request #870 from visualize-admin/feat/sorted-columns-in-d…

…ownloaded-files

feat: Sort columns properly in downloaded files

CHANGELOG.md

@@ -12,6 +12,8 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 - Enhancements:
   - Cube Checker:
     - Introduced a Temporal dimensions scaleType & timeFormat checks
+  - Data download:
+    - Order of columns in downloaded files now matches the order visible in the dataset preview (based on shacl:order)
 - Bug fixes:
   - Correctly retrieve min & max values for Temporal dimensions when scaleType is not equal to Interval
 

app/components/data-download.tsx

@@ -28,6 +28,7 @@ import { OperationResult, useClient } from "urql";
 
 import { QueryFilters } from "@/charts/shared/chart-helpers";
 import { DataSource } from "@/configurator";
+import { getSortedColumns } from "@/configurator/components/datatable";
 import { useLocale } from "@/src";
 
 import { Observation } from "../domain/data";
@@ -84,6 +85,7 @@ export type FileFormat = typeof FILE_FORMATS[number];
 const makeColumnLabel = (dim: DimensionMetadataFragment) => {
   return `${dim.label}${dim.unit ? ` (${dim.unit})` : ""}`;
 };
+
 const prepareData = ({
   dimensions,
   measures,
@@ -93,7 +95,7 @@ const prepareData = ({
   measures: DimensionMetadataFragment[];
   observations: Observation[];
 }) => {
-  const columns = keyBy([...dimensions, ...measures], (d) => d.iri);
+  const columns = keyBy(getSortedColumns(dimensions, measures), (d) => d.iri);
   const data = observations.map((obs) =>
     Object.keys(obs).reduce((acc, key) => {
       const col = columns[key];

app/configurator/components/datatable.tsx

@@ -187,7 +187,7 @@ export const DataSetPreviewTable = ({
   observations: Observation[];
 }) => {
   const headers = useMemo(() => {
-    return getSortedHeaders(dimensions, measures);
+    return getSortedColumns(dimensions, measures);
   }, [dimensions, measures]);
 
   if (observations) {
@@ -231,7 +231,8 @@ export const DataSetTable = ({
     if (!data?.dataCubeByIri) {
       return [];
     }
-    return getSortedHeaders(
+
+    return getSortedColumns(
       data.dataCubeByIri.dimensions,
       data.dataCubeByIri.measures
     );
@@ -252,13 +253,13 @@ export const DataSetTable = ({
   }
 };
 
-function getSortedHeaders(
+export const getSortedColumns = (
   dimensions: DimensionMetadataFragment[],
   measures: DimensionMetadataFragment[]
-) {
+) => {
   const allDimensions = [...dimensions, ...measures];
   allDimensions.sort((a, b) =>
     ascending(a.order ?? Infinity, b.order ?? Infinity)
   );
   return allDimensions;
-}
+};