Maps integration

app/charts/chart-config-ui-options.ts

@@ -11,10 +11,13 @@ export type DimensionType =
   | "TemporalDimension"
   | "NominalDimension"
   | "OrdinalDimension"
+  | "GeoDimension"
   | "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 +231,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: [],
   },
 };

app/charts/index.ts

@@ -18,6 +18,7 @@ export const enabledChartTypes: ChartType[] = [
   "scatterplot",
   "pie",
   "table",
+  "map",
 ];
 
 /**
@@ -262,32 +263,26 @@ export const getInitialConfig = ({
           },
         },
         fields: {
-          baseLayer: {
-            componentIri: dimensions[0].iri,
-            relief: true,
-            lakes: true,
-          },
           areaLayer: {
-            componentIri: measures[0].iri,
-            show: false,
+            componentIri:
+              dimensions.find((d) => d.__typename === "GeoDimension")?.iri ||
+              "",
+            measureIri: measures[0].iri,
+            show: true,
             label: { componentIri: dimensions[0].iri },
             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: false,
           },
         },
+        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).
@@ -307,30 +302,35 @@ export const getPossibleChartType = ({
 
   const hasZeroQ = measures.length === 0;
   const hasMultipleQ = measures.length > 1;
+  const hasGeo = dimensions.some((dim) => dim.__typename === "GeoDimension");
   const hasTime = dimensions.some(
     (dim) => dim.__typename === "TemporalDimension"
   );
 
-  // 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));
 };