Merge pull request #240 from visualize-admin/feat/integrate-maps-with…

…-configurator Maps integration
visualize-admin · Jan 25, 2022 · 07c9659 · 07c9659
2 parents 661cc10 + c2d56d0
commit 07c9659
Show file tree

Hide file tree

Showing 48 changed files with 2,843 additions and 1,785 deletions.
diff --git a/app/.env.development b/app/.env.development
@@ -1,4 +1,5 @@
 DATABASE_URL=postgres://postgres:password@localhost:5432/visualization_tool
 SPARQL_ENDPOINT=https://lindas.admin.ch/query
+SPARQL_GEO_ENDPOINT=https://geo.ld.admin.ch/query
 SPARQL_EDITOR=https://lindas.admin.ch/sparql/
 GRAPHQL_ENDPOINT=/api/graphql
diff --git a/app/charts/chart-config-ui-options.ts b/app/charts/chart-config-ui-options.ts
@@ -11,10 +11,14 @@ export type DimensionType =
   | "TemporalDimension"
   | "NominalDimension"
   | "OrdinalDimension"
+  | "GeoCoordinatesDimension"
+  | "GeoShapesDimension"
   | "Measure"
   | "Attribute";
 
-export type EncodingField = "x" | "y" | "segment";
+export type BaseEncodingField = "x" | "y" | "segment" | "settings";
+export type GeoEncodingField = "areaLayer" | "symbolLayer";
+export type EncodingField = BaseEncodingField | GeoEncodingField;
 export type EncodingOption =
   | "chartSubType"
   | "sorting"
@@ -228,7 +232,26 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
   },
   map: {
     chartType: "map",
-    encodings: [],
+    encodings: [
+      {
+        field: "settings",
+        optional: true,
+        values: ["Attribute"], // FIXME: currently not used anywhere
+        filters: false,
+      },
+      {
+        field: "areaLayer",
+        optional: false,
+        values: ["Measure"],
+        filters: false,
+      },
+      {
+        field: "symbolLayer",
+        optional: true,
+        values: ["Measure"],
+        filters: false,
+      },
+    ],
     interactiveFilters: [],
   },
 };

diff --git a/app/charts/index.ts b/app/charts/index.ts
@@ -1,11 +1,16 @@
+import { groupBy } from "lodash";
 import {
   ChartConfig,
   ChartType,
   GenericFields,
   TableColumn,
 } from "../configurator";
 import { mapColorsToComponentValuesIris } from "../configurator/components/ui-helpers";
-import { getCategoricalDimensions, getTimeDimensions } from "../domain/data";
+import {
+  getCategoricalDimensions,
+  getGeoDimensions,
+  getTimeDimensions,
+} from "../domain/data";
 import { DimensionMetaDataFragment } from "../graphql/query-hooks";
 import { DataCubeMetadata } from "../graphql/types";
 import { unreachableError } from "../lib/unreachable";
@@ -18,6 +23,7 @@ export const enabledChartTypes: ChartType[] = [
   "scatterplot",
   "pie",
   "table",
+  "map",
 ];
 
 /**
@@ -246,6 +252,11 @@ export const getInitialConfig = ({
         ),
       };
     case "map":
+      const {
+        GeoShapesDimension: geoShapes = [],
+        GeoCoordinatesDimension: geoCoordinates = [],
+      } = groupBy(getGeoDimensions(dimensions), (d) => d.__typename);
+
       return {
         chartType,
         filters: {},
@@ -262,32 +273,27 @@ export const getInitialConfig = ({
           },
         },
         fields: {
-          baseLayer: {
-            componentIri: dimensions[0].iri,
-            relief: true,
-            lakes: true,
-          },
           areaLayer: {
-            componentIri: measures[0].iri,
-            show: false,
-            label: { componentIri: dimensions[0].iri },
+            show: geoShapes.length > 0,
+            componentIri: geoShapes[0]?.iri || "",
+            measureIri: measures[0].iri,
+            hierarchyLevel: 1,
             palette: "oranges",
             nbClass: 5,
             paletteType: "continuous",
           },
           symbolLayer: {
-            show: false,
-            componentIri: measures[0].iri,
-          },
-          // FIXME: unused fields
-          x: { componentIri: dimensions[0].iri },
-          y: {
-            componentIri: measures[0].iri,
-          },
-          segment: {
-            componentIri: dimensions[0].iri,
+            show: geoShapes.length === 0,
+            componentIri: geoCoordinates[0]?.iri || geoShapes[0]?.iri || "",
+            measureIri: measures[0].iri,
+            hierarchyLevel: 1,
+            color: "#1f77b4",
           },
         },
+        settings: {
+          showRelief: true,
+          showLakes: true,
+        },
       };
 
     // This code *should* be unreachable! If it's not, it means we haven't checked all cases (and we should get a TS error).
@@ -297,40 +303,41 @@ export const getInitialConfig = ({
 };
 
 export const getPossibleChartType = ({
-  chartTypes = enabledChartTypes,
   meta,
 }: {
-  chartTypes?: ChartType[];
   meta: DataCubeMetadata;
 }): ChartType[] => {
   const { measures, dimensions } = meta;
 
   const hasZeroQ = measures.length === 0;
   const hasMultipleQ = measures.length > 1;
-  const hasTime = dimensions.some(
-    (dim) => dim.__typename === "TemporalDimension"
-  );
+  const hasGeo = getGeoDimensions(dimensions).length > 0;
+  const hasTime = getTimeDimensions(dimensions).length > 0;
 
-  // const geoBased: ChartType[] = ["map"];
+  const geoBased: ChartType[] = ["map"];
   const catBased: ChartType[] = ["bar", "column", "pie", "table"];
   const multipleQ: ChartType[] = ["scatterplot"];
   const timeBased: ChartType[] = ["line", "area"];
 
   let possibles: ChartType[] = [];
   if (hasZeroQ) {
     possibles = ["table"];
-  } else if (hasMultipleQ && hasTime) {
-    possibles = [...multipleQ, ...timeBased, ...catBased];
-  } else if (hasMultipleQ && !hasTime) {
-    possibles = [...multipleQ, ...catBased];
-  } else if (!hasMultipleQ && hasTime) {
-    possibles = [...catBased, ...timeBased];
-  } else if (!hasMultipleQ && !hasTime) {
-    possibles = [...catBased];
   } else {
-    // Tables should always be possible
-    possibles = ["table"];
+    possibles.push(...catBased);
+
+    if (hasMultipleQ) {
+      possibles.push(...multipleQ);
+    }
+
+    if (hasTime) {
+      possibles.push(...timeBased);
+    }
+
+    if (hasGeo) {
+      possibles.push(...geoBased);
+    }
   }
+
   return enabledChartTypes.filter((type) => possibles.includes(type));
 };