Commit f08ac5f9 authored by alain's avatar alain 🐙
Browse files

set up default settings

parent 49435e45
export const appSettingsDefault = {
language: "nl",
panelBreakpoint: 600,
yAxisWidth: 30
}
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] },
}
}
]
}
}
}
]
import { color } from "../custom/muv/d3-color"
import { color } from "d3-color"
export const mapDefaults = {
......
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",
}
}
export const appSettings = {
language: "nl",
panelBreakpoint: 800
}
\ No newline at end of file
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 ]
}
}
}
]
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(
......
......@@ -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} />
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment