Skip to content

Commit

Permalink
feat: Hide area and symbol layers options if no matching geo dimensio…
Browse files Browse the repository at this point in the history 
…ns are there
  • Loading branch information
@bprusinowski
bprusinowski committed Jan 27, 2022
1 parent 596fa48 commit f7543f4
Show file tree
Hide file tree
Showing 5 changed files with 214 additions and 166 deletions.
48 changes: 30 additions & 18 deletions app/configurator/map/map-chart-options.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { t, Trans } from "@lingui/macro";
import React, { memo, useMemo } from "react";
import { Flex } from "theme-ui";
import { Box, Flex } from "theme-ui";
import { ConfiguratorStateConfiguringChart, MapConfig } from "..";
import { FieldSetLegend } from "../../components/form";
import {
Expand Down Expand Up @@ -146,9 +146,16 @@ export const AreaLayerSettings = memo(
chartConfig.fields.areaLayer.nbClass;
const currentColorScaleType = chartConfig.fields.areaLayer.colorScaleType;

const disabled = !chartConfig.fields.areaLayer.show;
const isAvailable = geoShapesDimensions.length > 0;
const isHidden = !chartConfig.fields.areaLayer.show;

return (
return !isAvailable ? (
<Box sx={{ my: 3, py: 3, px: 5, width: "80%" }}>
<Trans id="controls.section.map.noGeoDimensions">
In this dataset there are no geographical dimensions to display!
</Trans>
</Box>
) : (
<>
<ControlSection>
<SectionTitle iconName="settings">
Expand All @@ -162,7 +169,6 @@ export const AreaLayerSettings = memo(
})}
field="areaLayer"
path="show"
disabled={geoShapesDimensions.length === 0}
/>
</ControlSectionContent>
</ControlSection>
Expand All @@ -177,7 +183,7 @@ export const AreaLayerSettings = memo(
field={activeField}
path="componentIri"
options={geoShapesDimensionsOptions}
disabled={disabled}
disabled={isHidden}
/>
</ControlSectionContent>
</ControlSection>
Expand All @@ -191,7 +197,7 @@ export const AreaLayerSettings = memo(
path="hierarchyLevel"
options={hierarchyLevelOptions}
getValue={(d) => +d}
disabled={disabled}
disabled={isHidden}
/>
</ControlSectionContent>
</ControlSection>
Expand All @@ -204,7 +210,7 @@ export const AreaLayerSettings = memo(
field={activeField}
path="measureIri"
options={measuresOptions}
disabled={disabled}
disabled={isHidden}
/>
</ControlSectionContent>
</ControlSection>
Expand All @@ -218,7 +224,7 @@ export const AreaLayerSettings = memo(
field={activeField}
path="colorScaleType"
value="continuous"
disabled={disabled}
disabled={isHidden}
/>

{/* Limit the number of clusters to min. 3 */}
Expand All @@ -228,7 +234,7 @@ export const AreaLayerSettings = memo(
field={activeField}
path="colorScaleType"
value="discrete"
disabled={disabled}
disabled={isHidden}
/>
)}
</Flex>
Expand All @@ -241,7 +247,7 @@ export const AreaLayerSettings = memo(
? currentNumberOfColorScaleClasses
: undefined
}
disabled={disabled}
disabled={isHidden}
/>

{chartConfig.fields.areaLayer.colorScaleType === "discrete" &&
Expand Down Expand Up @@ -276,16 +282,16 @@ export const AreaLayerSettings = memo(
value: "jenks",
},
]}
disabled={disabled}
disabled={isHidden}
/>
<ChartOptionSelectField<number>
id="areaLayer.nbClass"
label="Number of classes"
field={activeField}
path="nbClass"
options={numberOfColorScaleClasses}
disabled={disabled}
getValue={(d) => +d}
disabled={isHidden}
/>
</>
)}
Expand Down Expand Up @@ -327,9 +333,16 @@ export const SymbolLayerSettings = memo(
[metaData.measures]
);

const disabled = !chartConfig.fields.symbolLayer.show;
const isAvailable = geoDimensions.length > 0;
const isHidden = !chartConfig.fields.symbolLayer.show;

return (
return !isAvailable ? (
<Box sx={{ my: 3, py: 3, px: 5, width: "80%" }}>
<Trans id="controls.section.map.noGeoDimensions">
In this dataset there are no geographical dimensions to display!
</Trans>
</Box>
) : (
<>
<ControlSection>
<SectionTitle iconName="settings">
Expand All @@ -343,7 +356,6 @@ export const SymbolLayerSettings = memo(
})}
field="symbolLayer"
path="show"
disabled={geoDimensions.length === 0}
/>
</ControlSectionContent>
</ControlSection>
Expand All @@ -358,7 +370,7 @@ export const SymbolLayerSettings = memo(
field={activeField}
path="componentIri"
options={geoDimensionsOptions}
disabled={disabled}
disabled={isHidden}
/>
</ControlSectionContent>
</ControlSection>
Expand All @@ -371,7 +383,7 @@ export const SymbolLayerSettings = memo(
field={activeField}
path="measureIri"
options={measuresOptions}
disabled={disabled}
disabled={isHidden}
/>
</ControlSectionContent>
</ControlSection>
Expand All @@ -382,7 +394,7 @@ export const SymbolLayerSettings = memo(
label="Select a color"
field={activeField}
path="color"
disabled={disabled}
disabled={isHidden}
/>
</ControlSectionContent>
</ControlSection>
Expand Down
83 changes: 46 additions & 37 deletions app/locales/de/messages.po
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,23 @@ msgstr ""
"Language-Team: \n"
"Plural-Forms: \n"

#: app/configurator/components/chart-configurator.tsx:385
msgid "Add filter"
msgstr ""

#: app/components/search-autocomplete.tsx:69
msgid "Browse {0}"
msgstr "{0} durchsuchen"

#: app/configurator/components/chart-configurator.tsx:337
#: app/configurator/components/chart-configurator.tsx:341
msgid "Drag filters to reorganize"
msgstr "Ziehen Sie die Filter per Drag & Drop, um sie neu zu organisieren"

#: app/configurator/components/chart-configurator.tsx:334
#: app/configurator/components/chart-configurator.tsx:338
msgid "Move filter down"
msgstr "Filter nach unten verschieben"

#: app/configurator/components/chart-configurator.tsx:331
#: app/configurator/components/chart-configurator.tsx:335
msgid "Move filter up"
msgstr "Filter nach oben verschieben"

Expand Down Expand Up @@ -138,9 +142,9 @@ msgstr "Teilen"
#~ msgid "chart.map.layers.area.discretization.discrete"
#~ msgstr "Diskret"

#: app/charts/map/prototype-right-controls.tsx:186
#~ msgid "chart.map.layers.area.discretization.jenks"
#~ msgstr "Jenks (Natural Breaks)"
#: app/configurator/map/map-chart-options.tsx:278
msgid "chart.map.layers.area.discretization.jenks"
msgstr "Jenks (Natural Breaks)"

#: app/charts/map/prototype-right-controls.tsx:140
#~ msgid "chart.map.layers.area.discretization.linear"
Expand All @@ -150,13 +154,13 @@ msgstr "Teilen"
#~ msgid "chart.map.layers.area.discretization.number.class"
#~ msgstr "Anzahl Klassen"

#: app/charts/map/prototype-right-controls.tsx:173
#~ msgid "chart.map.layers.area.discretization.quantiles"
#~ msgstr "Quantile (gleiche Anzahl Werte)"
#: app/configurator/map/map-chart-options.tsx:271
msgid "chart.map.layers.area.discretization.quantiles"
msgstr "Quantile (gleiche Anzahl Werte)"

#: app/charts/map/prototype-right-controls.tsx:160
#~ msgid "chart.map.layers.area.discretization.quantize"
#~ msgstr "Quantisierung (gleiche Wertebereiche)"
#: app/configurator/map/map-chart-options.tsx:264
msgid "chart.map.layers.area.discretization.quantize"
msgstr "Quantisierung (gleiche Wertebereiche)"

#: app/charts/map/prototype-right-controls.tsx:91
#~ msgid "chart.map.layers.area.select.measure"
Expand Down Expand Up @@ -239,11 +243,11 @@ msgstr "Horizontale Achse"
msgid "controls.axis.vertical"
msgstr "Vertikale Achse"

#: app/configurator/map/map-chart-options.tsx:76
#: app/configurator/map/map-chart-options.tsx:71
msgid "controls.baseLayer.showLakes"
msgstr ""

#: app/configurator/map/map-chart-options.tsx:68
#: app/configurator/map/map-chart-options.tsx:63
msgid "controls.baseLayer.showRelief"
msgstr ""

Expand Down Expand Up @@ -288,20 +292,20 @@ msgid "controls.color.add"
msgstr "Hinzufügen …"

#: app/configurator/components/chart-controls/color-palette.tsx:78
#: app/configurator/components/chart-controls/color-ramp.tsx:106
#: app/configurator/components/chart-controls/color-ramp.tsx:124
msgid "controls.color.palette"
msgstr "Farbpalette"

#: app/configurator/components/chart-controls/color-ramp.tsx:147
#: app/configurator/components/chart-controls/color-ramp.tsx:146
msgid "controls.color.palette.diverging"
msgstr "Divergierend"

#: app/configurator/components/chart-controls/color-palette.tsx:257
#: app/configurator/components/chart-controls/color-palette.tsx:263
#: app/configurator/components/chart-controls/color-palette.tsx:237
#: app/configurator/components/chart-controls/color-palette.tsx:243
msgid "controls.color.palette.reset"
msgstr "Farbpalette zurücksetzen"

#: app/configurator/components/chart-controls/color-ramp.tsx:161
#: app/configurator/components/chart-controls/color-ramp.tsx:159
msgid "controls.color.palette.sequential"
msgstr "Sequentiell"

Expand Down Expand Up @@ -361,18 +365,18 @@ msgid "controls.imputation"
msgstr "Imputationstyp"

#: app/configurator/components/chart-options-selector.tsx:490
#: app/configurator/components/ui-helpers.ts:465
#: app/configurator/components/ui-helpers.ts:473
msgid "controls.imputation.type.linear"
msgstr "Lineare Interpolation"

#: app/configurator/components/chart-options-selector.tsx:483
#: app/configurator/components/chart-options-selector.tsx:495
#: app/configurator/components/ui-helpers.ts:457
#: app/configurator/components/ui-helpers.ts:465
msgid "controls.imputation.type.none"
msgstr "-"

#: app/configurator/components/chart-options-selector.tsx:485
#: app/configurator/components/ui-helpers.ts:461
#: app/configurator/components/ui-helpers.ts:469
msgid "controls.imputation.type.zeros"
msgstr "Nullen"

Expand Down Expand Up @@ -441,15 +445,15 @@ msgstr "Aus"
msgid "controls.search.clear"
msgstr "Suche zurücksetzen"

#: app/configurator/map/map-chart-options.tsx:158
#: app/configurator/map/map-chart-options.tsx:162
msgid "controls.section.areaLayer"
msgstr ""

#: app/configurator/map/map-chart-options.tsx:64
#: app/configurator/map/map-chart-options.tsx:59
msgid "controls.section.baseLayer"
msgstr ""

#: app/configurator/components/chart-configurator.tsx:258
#: app/configurator/components/chart-configurator.tsx:262
msgid "controls.section.chart.options"
msgstr "Diagramm-Einstellungen"

Expand All @@ -461,7 +465,7 @@ msgstr "Spalten"
msgid "controls.section.columnstyle"
msgstr "Spaltenstil"

#: app/configurator/components/chart-configurator.tsx:273
#: app/configurator/components/chart-configurator.tsx:277
msgid "controls.section.data.filters"
msgstr "Filter"

Expand Down Expand Up @@ -498,11 +502,16 @@ msgstr "Interaktive Filter hinzufügen"
msgid "controls.section.interactiveFilters.dataFilters"
msgstr "Datenfilter"

#: app/configurator/map/map-chart-options.tsx:154
#: app/configurator/map/map-chart-options.tsx:341
msgid "controls.section.map.noGeoDimensions"
msgstr "In diesem Datenset können keine geografischen Dimensionen angezeigt werden!"

#: app/configurator/components/chart-options-selector.tsx:411
msgid "controls.section.sorting"
msgstr "Sortieren"

#: app/configurator/map/map-chart-options.tsx:329
#: app/configurator/map/map-chart-options.tsx:349
msgid "controls.section.symbolLayer"
msgstr ""

Expand Down Expand Up @@ -745,11 +754,11 @@ msgstr "Luftzug"
msgid "datatable.showing.first.rows"
msgstr "Die ersten 10 Zeilen werden angezeigt"

#: app/configurator/map/map-chart-options.tsx:162
#: app/configurator/map/map-chart-options.tsx:166
msgid "fields.areaLayer.show"
msgstr ""

#: app/configurator/map/map-chart-options.tsx:333
#: app/configurator/map/map-chart-options.tsx:353
msgid "fields.symbolLayer.show"
msgstr ""

Expand All @@ -761,23 +770,23 @@ msgstr "Bundesamt für Umwelt BAFU"
msgid "footer.institution.url"
msgstr "https://www.bafu.admin.ch/bafu/de/home.html"

#: app/components/hint.tsx:197
#: app/components/hint.tsx:199
msgid "hint.chartunexpected.message"
msgstr ""

#: app/components/hint.tsx:194
#: app/components/hint.tsx:196
msgid "hint.chartunexpected.title"
msgstr ""

#: app/pages/v/[chartId].tsx:104
msgid "hint.create.your.own.chart"
msgstr "Sie können diese Visualisierung kopieren oder mit Schweizer Open Government Data eine neue Visualisierung erstellen."

#: app/components/hint.tsx:171
#: app/components/hint.tsx:173
msgid "hint.dataloadingerror.message"
msgstr "Die Daten konnten nicht geladen werden."

#: app/components/hint.tsx:168
#: app/components/hint.tsx:170
msgid "hint.dataloadingerror.title"
msgstr "Daten-Ladefehler"

Expand All @@ -793,23 +802,23 @@ msgstr "Lade Daten …"
msgid "hint.no.visualization.with.dataset"
msgstr "Mit dem ausgewählten Datensatz kann keine Visualisierung erstellt werden."

#: app/components/hint.tsx:146
#: app/components/hint.tsx:148
msgid "hint.nodata.message"
msgstr "Bitte versuchen Sie es mit einer anderen Filterkombination."

#: app/components/hint.tsx:143
msgid "hint.nodata.title"
msgstr "Keine Daten für die aktuelle Filterauswahl"

#: app/components/hint.tsx:223
#: app/components/hint.tsx:225
msgid "hint.only.negative.data.message"
msgstr "Negative Datenwerte können mit diesem Diagrammtyp nicht dargestellt werden."

#: app/components/hint.tsx:220
#: app/components/hint.tsx:222
msgid "hint.only.negative.data.title"
msgstr "Negative Werte"

#: app/components/hint.tsx:248
#: app/components/hint.tsx:250
msgid "hint.publication.success"
msgstr "Die Visualisierung ist jetzt veröffentlicht. Sie können sie teilen oder einbetten, indem Sie die URL kopieren oder das Menü unten verwenden."

Expand Down
Loading

0 comments on commit f7543f4

Please sign in to comment.