Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Hide area and symbol layers options if no matching geo dimensions are found #301

Merged
merged 1 commit into from
Feb 1, 2022
Merged

feat: Hide area and symbol layers options if no matching geo dimensions are found #301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 30 additions & 18 deletions app/configurator/map/map-chart-options.tsx
View file
Open in desktop
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
Open in desktop
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 ""
ptbrowne marked this conversation as resolved.
Show resolved Hide resolved
ptbrowne marked this conversation as resolved.
Show resolved Hide resolved

#: 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!"
bprusinowski marked this conversation as resolved.
Show resolved Hide resolved

#: 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