set up default settings

config/default/app.js

+
+export const appSettingsDefault = {
+  language: "nl",
+  panelBreakpoint: 600,
+  yAxisWidth: 30
+}

config/default/data.js

+import source from "./sources/source"
+
+const colors = [
+  "#f1aa2a",
+  "#db246b",
+  "#552a80"
+]
+
+export const initialLayers = ["id"]
+
+export const dataGroups = [
+  {
+    title: "layers",
+    parameters: {
+
+      "id": {
+        id: "id",
+        label: "label",
+        type: "StationLayer",
+        sources: [
+          //source,
+        ],
+        tooltip: "",
+        more: "",
+        units: [
+          {
+            id: "id",
+            label: " symbol",
+            range: [0, 120],
+            ticks: [0, 30, 60, 90, 120],
+            legend: {
+              0: { label: "", color: colors[0] },
+              80: { label: "", color: colors[0] },
+              120: { label: "", color: colors[1] },
+            }
+          }
+        ]
+      }
+
+    }
+  }
+]

config/example/map.js → config/default/map.js

-import { color } from "../custom/muv/d3-color"
+import { color } from "d3-color"
 
 
 export const mapDefaults = {

config/example/texts.js → config/default/texts.js

 
-export const texts = {
-  about: {
-    title: "over deze kaart",
-    body: "<p>Deze kaart visualiseert data afkomstig van 200 HOLU-sensorkits én die van officiële meetpunten van <a href='https://www.luchtmeetnet.nl/' target='_blank' rel='noopener noreferrer'>luchtmeetnet.nl</a>. Hollandse&nbsp;Luchten is een experimenteel project waarin er onderzoek wordt gedaan naar de kwaliteit van de data afkomstig van de HOLU-sensorkits, en naar de beste manier waarop je deze data kunt inzetten.</p><p><a class='more' href='https://hollandseluchten.waag.org/veelgestelde-vragen/over-luchtkwaliteit/'>meer weten</a></p>"
-  },
+export const textsNL = {
   pilotLocations: "Pilot-locaties",
   loading: "Bezig met laden...",
   loadingError: "Laden mislukt...",
@@ -11,12 +7,21 @@ export const texts = {
   nodata: "geen data...",
   lastMean: "laatste uurgemiddelde",
   lastPeak: "piekwaarde laatste uur",
+  lastHour: "afgelopen uur",
+  hoursAgo: "uur geleden",
+  hour: "uur",
+  hourShort: "u",
   mean: "gemiddelde",
   peak: "piekwaarde",
   downloadData: "download data",
   startDate: "startdatum",
   endDate: "einddatum",
+  timeSelectionHint: "↖ tijdselectie",
   chartHeaderAddition: "(uurwaarden)",
   downloadCsv: "download csv",
-  downloadInfo: "<small><a class='more' href='https://hollandseluchten.waag.org/data-downloaden/' target='_blank' rel='noopener noreferrer'>meer info over data downloaden en de API</a></small>",
+  downloadInfo: "",
+  dataStreams: {
+    mean: "gemiddelde",
+    minmax: "min-max waarde",
+  }
 }

config/example/app.js

-
-export const appSettings = {
-  language: "nl",
-  panelBreakpoint: 800
-}
\ No newline at end of file

config/example/data.js

-import muv from "./sources/source"
-
-const colors = [
-  "#f1aa2a",
-  "#db246b",
-  "#552a80"
-]
-
-export const initialLayers = ["pm25"]
-
-export const dataGroups = [
-  {
-    title: "air quality data",
-    parameters: {
-
-      "pm25": {
-        id: "pm25",
-        label: "particulate matter (PM 2.5)",
-        unit: " μg/m3",
-        range: [0, 150],
-        legend: {
-          0: { label: "Good", color: colors[0] },
-          70: { label: "Bad", color: colors[1] },
-          150: { label: "Very bad", color: colors[2] },
-        },
-        formula: "PM25",
-        tooltip: "",
-        type: "StationLayer",
-        sources: [ muv ]
-      },
-
-      "pm10": {
-        id: "pm10",
-        label: "particulate matter (PM 10)",
-        unit: " μg/m3",
-        range: [0, 250],
-        legend: {
-          0: { label: "Good", color: colors[0] },
-          100: { label: "Bad", color: colors[1] },
-          250: { label: "Very bad", color: colors[2] },
-        },
-        formula: "PM10",
-        tooltip: "",
-        more: "",
-        type: "StationLayer",
-        sources: [ muv ]
-      },
-
-      "no2": {
-        id: "no2",
-        label: "nitrogen dioxide (NO2)",
-        unit: " μg/m3",
-        range: [0, 250],
-        legend: {
-          0: { label: "Good", color: colors[0] },
-          140: { label: "Bad", color: colors[1] },
-          250: { label: "Very bad", color: colors[2] },
-        },
-        formula: "NO2",
-        tooltip: "",
-        more: "",
-        type: "StationLayer",
-        sources: [ muv ]
-      },
-
-      "o3": {
-        id: "o3",
-        label: "ozon (O3)",
-        unit: " μg/m3",
-        range: [0, 300],
-        legend: {
-          0: { label: "Good", color: colors[0] },
-          200: { label: "Bad", color: colors[1] },
-          300: { label: "Very bad", color: colors[2] },
-        },
-        formula: "O3",
-        tooltip: "",
-        more: "",
-        type: "StationLayer",
-        sources: [ muv ]
-      },
-
-    }
-  },
-  {
-    title: "weather data",
-    parameters: {
-      "temperature": {
-        id: "temperature",
-        label: "temperature",
-        unit: "º",
-        range: [0, 60],
-        legend: {
-          0: { label: null, color: colors[0] },
-          60: { label: null, color: colors[1] },
-        },
-        tooltip: "",
-        type: "StationLayer",
-        sources: [ muv ]
-      },
-
-      "humidity": {
-        id: "humidity",
-        label: "humidity",
-        unit: "%",
-        range: [0, 100],
-        legend: {
-          0: { label: null, color: colors[0] },
-          100: { label: null, color: colors[1] },
-        },
-        tooltip: "",
-        type: "StationLayer",
-        sources: [ muv ]
-      }
-    }
-  }
-]

src/DeckLayers/DeckLayers.js

 import React from 'react'
 import { connect } from 'react-redux'
-import memoize from "memoize-one";
+import memoize from "memoize-one"
 
-import DeckGL from '@deck.gl/react';
+import DeckGL from '@deck.gl/react'
 
 import StationLayer from "./StationLayer"
 import StationTooltip from "./StationTooltip"
 import StationInfo from "../Modal/StationInfo"
 
-import { IconLayer } from '@deck.gl/layers';
+import { IconLayer } from '@deck.gl/layers'
 import IconTooltip from "./IconTooltip"
 import IconInfo from "../Modal/IconInfo"
 
-import { GridLayer } from '@deck.gl/aggregation-layers';
+import { GridLayer } from '@deck.gl/aggregation-layers'
 
 import Tooltip from "./Tooltip"
 
-import { doOffsets } from 'util/plot';
+import { doOffsets } from 'util/plot'
 
 
 class DeckLayers extends React.Component {
@@ -67,16 +67,16 @@ class DeckLayers extends React.Component {
 
           if(!layerDefinition) return
 
-          count[sourceName].current++
-
           switch(layerDefinition.type) {
             case "StationLayer":
+              count[sourceName].current++
+
               const unit = (layerDefinition.units ? layerDefinition.units.find(x => x.id === unitStatus[layerDefinition.id]) : null)
 
-              const layerData = (unit.conversion ? data.map(d => {
-                d.mean = unit.conversion(d.mean)
+              const layerData = (unit.conversion ? 
+                data.map(d => {
 
-                return d
+                return { ...d, mean: d.mean ? unit.conversion(d.mean) : null }
               }) : data)
 
               layers.push(

src/Modal/StationInfo.js

@@ -264,7 +264,7 @@ class StationInfo extends React.Component {
                   <XAxis type="number" scale="time" domain={['auto', 'auto']} dataKey="timestamp" height={20} padding={{ left: 6 }} tickFormatter={()=>"###"} tickSize={4} ticks={ticks[0]} tick={<ChartTick tickFormat={tickFormat[0]} />} />
                   <XAxis xAxisId="day" type="number" scale="time" domain={['auto', 'auto']} dataKey="timestamp" height={20} padding={{ left: 6 }} axisLine={false} tickFormatter={()=>"####"} tickSize={0} ticks={ticks[1]} tick={<ChartTick tickFormat={tickFormat[1]} />} />
 
-                  <YAxis type="number" strokeWidth="6" stroke="url(#yaxis)" width={30} ticks={(unit.ticks ? unit.ticks : Object.keys(unit.legend))} height={chartHeight} domain={unit.range} tickSize={2} tickLine={{ strokeWidth: 1 }} allowDataOverflow={true} scale={yScale} />
+                  <YAxis type="number" strokeWidth="6" stroke="url(#yaxis)" width={appSettings.yAxisWidth} ticks={(unit.ticks ? unit.ticks : Object.keys(unit.legend))} height={chartHeight} domain={unit.range} tickSize={2} tickLine={{ strokeWidth: 1 }} allowDataOverflow={true} scale={yScale} />
 
                   <Tooltip content={ ChartTooltip } animationDuration={0} unit={unit.label} dataStreamsState={dataStreams} />