Issue 57/maps

src/components/side-panel/SidePanel.tsx

@@ -11,6 +11,8 @@ const SidePanel = (): JSX.Element => {
     setChartProperties,
     selectedFilename,
     setSelectedFilename,
+    sparqlQuery,
+    setSparqlQuery,
   }: ChartContextProps = useContext(ChartContext);
 
   const isAMap = chartProperties[0].properties[0].value === "Map";
@@ -195,6 +197,22 @@ const SidePanel = (): JSX.Element => {
     );
   };
 
+  const getSparqlInput = () => {
+    return (
+      <div className="property-section">
+        <div className="section-heading"> SPARQL Query</div>
+        <textarea
+          id="sparql-input"
+          rows={10}
+          value={sparqlQuery}
+          spellCheck={false}
+          onChange={(e) => setSparqlQuery(e.target.value.trim())}
+          onFocus={(e) => e.target.select()}
+        />
+      </div>
+    );
+  };
+
   return (
     <div id="side-panel">
       {chartProperties.map((section: any, index: number) => {
@@ -222,8 +240,10 @@ const SidePanel = (): JSX.Element => {
                 }
               })}
             </div>
-            {section.name === "chartTypes" && !isAMap
-              ? getDataSelectionSection(section.name)
+            {section.name === "chartTypes"
+              ? isAMap
+                ? getSparqlInput()
+                : getDataSelectionSection(section.name)
               : null}
           </div>
         );

src/components/side-panel/side-panel.css

@@ -114,3 +114,16 @@
   align-items: center;
   margin-top: 0.5rem;
 }
+
+#sparql-input {
+  width: 100%;
+  margin-top: 0.7rem;
+  padding: 0.2rem;
+  font-size: 0.8rem;
+  font-family: monospace;
+  border-style: solid;
+  background-color: whitesmoke;
+  outline: none;
+  overflow-y: auto;
+  resize: none;
+}

src/context/ChartContext.tsx

@@ -1,4 +1,4 @@
-import React, {Dispatch, SetStateAction} from "react";
+import React, { Dispatch, SetStateAction } from "react";
 import {
   ChartPropertySection,
   DataSelection,
@@ -37,6 +37,9 @@ export interface ChartContextState {
   setMapData: any,
   geoJson: any,
   setGeoJson: any,
+
+  sparqlQuery: string;
+  setSparqlQuery: Dispatch<SetStateAction<string>>;
 }
 
 export interface ChartContextProps {
@@ -70,6 +73,9 @@ export interface ChartContextProps {
 
   importCsvData: (data: File | string, filename: string) => void;
   importEeaData: (data: EeaData) => void;
+
+  sparqlQuery: string;
+  setSparqlQuery: Dispatch<SetStateAction<string>>;
 }
 
 const ChartContext = React.createContext<ChartContextProps>(

src/context/ChartContextProvider.tsx

@@ -12,9 +12,11 @@ import {
   TidyData,
   ChartDataProvider
 } from "./types";
-import { getMapData } from "../services/map-data/map-data-loader";
-import { getUkLaBoundaries } from "../services/map-data/uk-la-boundaries";
 import { arrayColumn, getDistinctValues } from "../helper-functions/array-helpers";
+import { getMapData } from "../services/map-data/mapDataLoader";
+import { getGeoJson } from "../services/map-data/geoJsonLoader";
+import LOCAL_AUTHORITY_BOUNDARY_QUERY from "../services/map-data/geoJsonQueries";
+
 import { NO_FILE_SELECTED_TEXT } from "../components/constants/Common-constants";
 import updateChartDefinition from "../plotly/chartDefinition";
 
@@ -39,6 +41,7 @@ export function useChartContextState(): ChartContextState {
   >([]);
   const [mapData, setMapData] = useState<any>([]);
   const [geoJson, setGeoJson] = useState<any>([]);
+  const [sparqlQuery, setSparqlQuery] = useState<string>("");
 
   return {
     chartDefinition,
@@ -57,6 +60,8 @@ export function useChartContextState(): ChartContextState {
     setMapData,
     geoJson,
     setGeoJson,
+    sparqlQuery,
+    setSparqlQuery,
   };
 }
 
@@ -201,6 +206,8 @@ export function useChartContext(state: ChartContextState): ChartContextProps {
     setMapData,
     geoJson,
     setGeoJson,
+    sparqlQuery,
+    setSparqlQuery,
   } = state;
 
   const dimensionValue = dataSelection?.dimension || '';
@@ -229,16 +236,20 @@ export function useChartContext(state: ChartContextState): ChartContextProps {
     availableDimensions = eeaDataAvailableDimensions;
   }
 
-  const loadMapData = useCallback(async () => {
-    const mapData = await getMapData();
-    const geoJson = await getUkLaBoundaries();
-    setMapData(mapData);
-    setGeoJson(geoJson);
-  }, []);
-
   useEffect(() => {
+    if (sparqlQuery === "") return;
+    const loadMapData = async () => {
+      try {
+        const mapData = await getMapData(sparqlQuery);
+        const geoJson = await getGeoJson(LOCAL_AUTHORITY_BOUNDARY_QUERY);
+        setGeoJson(geoJson);
+        setMapData(mapData);
+      } catch (e) {
+        console.error(e);
+      }
+    };
     loadMapData();
-  }, []);
+  }, [sparqlQuery]);
 
   useEffect(() => {
     // todo restore empty data state check - with but with eea/sparql data sources for maps and charts
@@ -286,6 +297,8 @@ export function useChartContext(state: ChartContextState): ChartContextProps {
     setMapData,
     geoJson,
     setGeoJson,
+    sparqlQuery,
+    setSparqlQuery,
   };
 }
 

src/context/initialChartProperties.ts

@@ -74,7 +74,14 @@ const interactivitySection: ChartPropertySection = {
       displayName: "Series tooltip",
       type: "radio",
       options: ["x+y", "none"],
-      value: "none",
+      value: "x+y",
+      output: "svg",
+    },
+    {
+      name: "hoverInfoUnit",
+      displayName: "Hoverinfo unit",
+      type: "text",
+      value: "%",
       output: "svg",
     },
   ],
@@ -134,35 +141,35 @@ const chartDimensionsSection: ChartPropertySection = {
       name: "height",
       displayName: "Height(px)",
       type: "text",
-      value: "550",
+      value: "700",
       output: "svg",
     },
     {
       name: "marginLeft",
       displayName: "Left margin(px)",
       type: "text",
-      value: "70",
+      value: "0",
       output: "svg",
     },
     {
       name: "marginRight",
       displayName: "Right margin(px)",
       type: "text",
-      value: "70",
+      value: "0",
       output: "svg",
     },
     {
       name: "marginTop",
-      displayName: "Bottom margin(px)",
+      displayName: "Top margin(px)",
       type: "text",
-      value: "70",
+      value: "0",
       output: "svg",
     },
     {
       name: "marginBottom",
       displayName: "Bottom margin(px)",
       type: "text",
-      value: "70",
+      value: "0",
       output: "svg",
     },
   ],
@@ -203,6 +210,21 @@ const colorBarSection: ChartPropertySection = {
       value: "25",
       output: "svg",
     },
+    {
+      name: "colorscale",
+      displayName: "Color scale",
+      type: "radio",
+      options: ["Sequential", "Diverging"],
+      value: "Sequential",
+      output: "svg",
+    },
+    {
+      name: "autocolorscale",
+      displayName: "Auto color scale",
+      type: "checkbox",
+      value: false,
+      output: "svg",
+    },
   ],
 };
 

src/context/types.ts

@@ -33,7 +33,7 @@ interface EeaData {
 }
 
 // should be whatever shape of props react-plotly receives.
-type PlotlyChartDefinition = object;56
+type PlotlyChartDefinition = object;
 
 interface ChartPropertySection {
   name: string,

src/plotly/chartDefinition.ts

@@ -1,6 +1,20 @@
 import { getMapLayout, getChartLayout } from "./layout";
 import config from "./config";
 
+const divergingColorScale = [
+  [0, "rgb(242, 108, 49)"],
+  [0.35, "rgb(242, 160, 49)"],
+  [0.5, "rgb(233, 212, 30)"],
+  [0.6, "rgb(202, 233, 30)"],
+  [0.7, "rgb(44, 182, 169)"],
+  [1, "rgb(36, 151, 140)"],
+];
+
+const sequentialColorScale = [
+  [0, "rgb(233, 212, 30)"],
+  [1, "rgb(36, 151, 140)"],
+];
+
 import {
   colors,
   flattenChartProperties,
@@ -69,24 +83,21 @@ const getChartData = (chartType: any, chartProps: any, chartData: any) => {
 };
 
 const getMapData = (chartProps: any, mapData: any, geoJson: any) => {
-  const data = [
+  let data: any = [
     {
       type: "choropleth",
       locationmode: "geojson-id",
-      locations: mapData.la_uri,
-      z: mapData.emissions,
+      locations: mapData.geography_uri,
+      z: mapData.values,
       text: mapData.label,
-      hoverinfo: chartProps.interactivity,
-      colorscale: [
-        [0, "rgb(242, 108, 49)"],
-        [0.35, "rgb(242, 160, 49)"],
-        [0.5, "rgb(233, 212, 30)"],
-        [0.6, "rgb(202, 233, 30)"],
-        [0.7, "rgb(44, 182, 169)"],
-        [1, "rgb(36, 151, 140)"],
-      ],
+      colorscale:
+        chartProps.colorscale === "Diverging"
+          ? divergingColorScale
+          : sequentialColorScale,
+      autocolorscale: chartProps.autocolorscale,
       featureidkey: "properties.geography_uri",
       geojson: geoJson,
+      hoverinfo: chartProps.interactivity,
       marker: {
         line: {
           color: "rgb(123,123,123)",
@@ -99,6 +110,15 @@ const getMapData = (chartProps: any, mapData: any, geoJson: any) => {
       },
     },
   ];
+
+  // if interactivity is enabled show hover text over map regions
+  // we use a custom hover template so that the geography_uri doesn't show up in the hover text
+  if (chartProps.interactivity === "x+y") {
+    const hovertemplate = {
+      hovertemplate: ` %{text} <br> %{z}${chartProps.hoverInfoUnit} <extra></extra> `,
+    };
+    data = [{ ...data[0], ...hovertemplate }];
+  }
   return data;
 };