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: Update map icons #293

Merged
merged 2 commits into from
Jan 25, 2022
Merged

feat: Update map icons #293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a8eb954
feat: Update map icons & change settings to base layer
bprusinowski Jan 25, 2022
11ad027
chore: Update translations
bprusinowski Jan 25, 2022
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
8 changes: 4 additions & 4 deletions app/charts/chart-config-ui-options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ export type DimensionType =
| "Measure"
| "Attribute";

export type BaseEncodingField = "x" | "y" | "segment" | "settings";
export type GeoEncodingField = "areaLayer" | "symbolLayer";
export type BaseEncodingField = "x" | "y" | "segment";
export type GeoEncodingField = "baseLayer" | "areaLayer" | "symbolLayer";
export type EncodingField = BaseEncodingField | GeoEncodingField;
export type EncodingOption =
| "chartSubType"
Expand Down Expand Up @@ -234,9 +234,9 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
chartType: "map",
encodings: [
{
field: "settings",
field: "baseLayer",
optional: true,
values: ["Attribute"], // FIXME: currently not used anywhere
values: [],
filters: false,
},
{
Expand Down
2 changes: 1 addition & 1 deletion app/charts/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,7 @@ export const getInitialConfig = ({
color: "#1f77b4",
},
},
settings: {
baseLayer: {
showRelief: true,
showLakes: true,
},
Expand Down
16 changes: 8 additions & 8 deletions app/charts/map/chart-map.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
mesh as topojsonMesh,
} from "topojson-client";
import { Loading, LoadingDataError, NoDataHint } from "../../components/hint";
import { MapConfig, MapFields, MapSettings } from "../../configurator";
import { BaseLayer, MapConfig, MapFields } from "../../configurator";
import {
AreaLayer,
GeoData,
Expand Down Expand Up @@ -151,7 +151,7 @@ export const ChartMapVisualization = ({
fields={chartConfig.fields}
measures={measures}
dimensions={dimensions}
settings={chartConfig.settings}
baseLayer={chartConfig.baseLayer}
/>
);
} else if (geoData.state === "fetching" || fetching) {
Expand All @@ -169,14 +169,14 @@ export const ChartMapPrototype = ({
fields,
measures,
dimensions,
settings,
baseLayer,
}: {
observations: Observation[];
features: GeoData;
fields: MapFields;
measures: DimensionMetaDataFragment[];
dimensions: DimensionMetaDataFragment[];
settings: MapSettings;
baseLayer: BaseLayer;
}) => {
return (
<Box
Expand All @@ -193,7 +193,7 @@ export const ChartMapPrototype = ({
fields={fields}
measures={measures}
dimensions={dimensions}
settings={settings}
baseLayer={baseLayer}
/>
</Box>
);
Expand All @@ -206,14 +206,14 @@ export const ChartMap = memo(
fields,
measures,
dimensions,
settings,
baseLayer,
}: {
features: GeoData;
observations: Observation[];
measures: DimensionMetaDataFragment[];
dimensions: DimensionMetaDataFragment[];
fields: MapFields;
settings: MapSettings;
baseLayer: BaseLayer;
}) => {
return (
<MapChart
Expand All @@ -222,7 +222,7 @@ export const ChartMap = memo(
fields={fields}
measures={measures}
dimensions={dimensions}
settings={settings}
baseLayer={baseLayer}
>
<ChartContainer>
<MapComponent />
Expand Down
22 changes: 11 additions & 11 deletions app/charts/map/map-state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ import {
getSingleHueSequentialPalette,
} from "../../configurator/components/ui-helpers";
import {
BaseLayer,
MapFields,
MapSettings,
PaletteType,
} from "../../configurator/config-types";
import {
Expand Down Expand Up @@ -132,11 +132,11 @@ const useMapState = ({
fields,
measures,
dimensions,
settings,
baseLayer,
}: Pick<ChartProps, "data" | "measures" | "dimensions"> & {
features: GeoData;
fields: MapFields;
settings: MapSettings;
baseLayer: BaseLayer;
}): MapState => {
const width = useWidth();
const { areaLayer, symbolLayer } = fields;
Expand Down Expand Up @@ -267,8 +267,8 @@ const useMapState = ({
chartType: "map",
features,
bounds,
showRelief: settings.showRelief,
showLakes: settings.showLakes,
showRelief: baseLayer.showRelief,
showLakes: baseLayer.showLakes,
identicalLayerComponentIris,
areaLayer: {
data: areaData,
Expand Down Expand Up @@ -304,21 +304,21 @@ const MapChartProvider = ({
fields,
measures,
dimensions,
settings,
baseLayer,
children,
}: Pick<ChartProps, "data" | "measures" | "dimensions"> & {
features: GeoData;
children: ReactNode;
fields: MapFields;
settings: MapSettings;
baseLayer: BaseLayer;
}) => {
const state = useMapState({
data,
features,
fields,
measures,
dimensions,
settings,
baseLayer,
});
return (
<ChartContext.Provider value={state}>{children}</ChartContext.Provider>
Expand All @@ -331,12 +331,12 @@ export const MapChart = ({
fields,
measures,
dimensions,
settings,
baseLayer,
children,
}: Pick<ChartProps, "data" | "measures" | "dimensions"> & {
features: GeoData;
fields: MapFields;
settings: MapSettings;
baseLayer: BaseLayer;
children: ReactNode;
}) => {
return (
Expand All @@ -349,7 +349,7 @@ export const MapChart = ({
fields={fields}
measures={measures}
dimensions={dimensions}
settings={settings}
baseLayer={baseLayer}
>
{children}
</MapChartProvider>
Expand Down
2 changes: 1 addition & 1 deletion app/configurator/components/chart-options-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,7 @@ const EncodingOptionsPanel = ({
const getFieldLabelHint = {
x: t({ id: "controls.select.dimension", message: "Select a dimension" }),
y: t({ id: "controls.select.measure", message: "Select a measure" }),
baseLayer: t({ id: "controls.map.baseLayer", message: "Base layer" }),
areaLayer: t({
id: "controls.select.measure",
message: "Select a measure",
Expand All @@ -185,7 +186,6 @@ const EncodingOptionsPanel = ({
id: "controls.select.dimension",
message: "Select a dimension",
}),
settings: t({ id: "controls.settings", message: "Settings" }),
};

useEffect(() => {
Expand Down
28 changes: 17 additions & 11 deletions app/configurator/components/ui-helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,6 +339,12 @@ export const getIconName = (name: string): IconName => {
return "chartPie";
case "map":
return "chartMap";
case "baseLayer":
return "mapMaptype";
case "areaLayer":
return "mapRegions";
case "symbolLayer":
return "mapSymbols";
case "text":
return "text";
case "title":
Expand Down Expand Up @@ -396,16 +402,16 @@ const fieldLabels = {
id: "controls.column.grouped",
message: "Grouped",
}),
"controls.map.settings": defineMessage({
id: "controls.map.settings",
message: "Base layers",
"controls.map.baseLayer": defineMessage({
id: "controls.map.baseLayer",
message: "Base layer",
}),
"controls.map.layer.area": defineMessage({
id: "controls.map.layer.area",
"controls.map.areaLayer": defineMessage({
id: "controls.map.areaLayer",
message: "Area layer",
}),
"controls.map.layer.symbol": defineMessage({
id: "controls.map.layer.symbol",
"controls.map.symbolLayer": defineMessage({
id: "controls.map.symbolLayer",
message: "Symbol layer",
}),
"controls.sorting.sortBy": defineMessage({
Expand Down Expand Up @@ -538,12 +544,12 @@ export function getFieldLabel(field: string): string {
case "pie.segment":
case "segment":
return i18n._(fieldLabels["controls.color"]);
case "map.settings":
return i18n._(fieldLabels["controls.map.settings"]);
case "map.baseLayer":
return i18n._(fieldLabels["controls.map.baseLayer"]);
case "map.areaLayer":
return i18n._(fieldLabels["controls.map.layer.area"]);
return i18n._(fieldLabels["controls.map.areaLayer"]);
case "map.symbolLayer":
return i18n._(fieldLabels["controls.map.layer.symbol"]);
return i18n._(fieldLabels["controls.map.symbolLayer"]);
case "title":
return i18n._(fieldLabels["controls.title"]);
case "description":
Expand Down
6 changes: 3 additions & 3 deletions app/configurator/config-types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -465,11 +465,11 @@ const MapSymbolLayer = t.type({
});
export type MapSymbolLayer = t.TypeOf<typeof MapSymbolLayer>;

const MapSettings = t.type({
const BaseLayer = t.type({
showRelief: t.boolean,
showLakes: t.boolean,
});
export type MapSettings = t.TypeOf<typeof MapSettings>;
export type BaseLayer = t.TypeOf<typeof BaseLayer>;
const MapFields = t.type({
areaLayer: MapAreaLayer,
symbolLayer: MapSymbolLayer,
Expand All @@ -481,7 +481,7 @@ const MapConfig = t.type(
interactiveFiltersConfig: InteractiveFiltersConfig,
filters: Filters,
fields: MapFields,
settings: MapSettings,
baseLayer: BaseLayer,
},
"MapConfig"
);
Expand Down
24 changes: 10 additions & 14 deletions app/configurator/map/map-chart-options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const MapColumnOptions = ({
const { activeField } = state;

switch (activeField) {
case "settings":
case "baseLayer":
return <BaseLayersSettings />;
case "areaLayer":
return (
Expand All @@ -66,25 +66,25 @@ export const MapColumnOptions = ({
export const BaseLayersSettings = memo(() => {
return (
<ControlSection>
<SectionTitle iconName={"settings"}>
<Trans id="controls.section.mapSettings">Map Settings</Trans>
<SectionTitle iconName="mapMaptype">
<Trans id="controls.section.baseLayer">Settings</Trans>
</SectionTitle>
<ControlSectionContent side="right">
<ChartOptionCheckboxField
label={t({
id: "controls.mapSettings.showRelief",
id: "controls.baseLayer.showRelief",
message: "Show relief",
})}
field={null}
path="settings.showRelief"
path="baseLayer.showRelief"
/>
<ChartOptionCheckboxField
label={t({
id: "controls.mapSettings.showLakes",
id: "controls.baseLayer.showLakes",
message: "Show lakes",
})}
field={null}
path="settings.showLakes"
path="baseLayer.showLakes"
/>
</ControlSectionContent>
</ControlSection>
Expand Down Expand Up @@ -145,9 +145,7 @@ export const AreaLayerSettings = memo(
<>
<ControlSection>
<SectionTitle iconName="settings">
<Trans id="controls.section.areaLayerSettings">
Area layer settings
</Trans>
<Trans id="controls.section.areaLayer">Settings</Trans>
</SectionTitle>
<ControlSectionContent side="right">
<ChartOptionCheckboxField
Expand All @@ -162,7 +160,7 @@ export const AreaLayerSettings = memo(
</ControlSectionContent>
</ControlSection>
<ControlSection>
<SectionTitle iconName="chartMap">
<SectionTitle iconName="mapRegions">
Geographical dimension
</SectionTitle>
<ControlSectionContent side="right">
Expand Down Expand Up @@ -309,9 +307,7 @@ export const SymbolLayerSettings = memo(
<>
<ControlSection>
<SectionTitle iconName="settings">
<Trans id="controls.section.symbolLayerSettings">
Symbol layer settings
</Trans>
<Trans id="controls.section.symbolLayer">Settings</Trans>
</SectionTitle>
<ControlSectionContent side="right">
<ChartOptionCheckboxField
Expand Down
Loading