Skip to content

Commit

Permalink
Merge pull request #650 from visualize-admin/feat/default-state-maps
Browse files Browse the repository at this point in the history
  • Loading branch information
ptbrowne authored Aug 24, 2022
2 parents bc92f92 + fd11412 commit 3778d5c
Show file tree
Hide file tree
Showing 40 changed files with 372 additions and 291 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
- Column order is based on the shacl:order defined in the data
- For the dataset preview
- For the table chart columns
- Default state for area chart uses the hierarchy and selects
bottommost children


## [3.7.8] - 2022-08-22

Expand Down
6 changes: 3 additions & 3 deletions app/charts/area/chart-area.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import {
import { isNumber } from "@/configurator/components/ui-helpers";
import { Observation } from "@/domain/data";
import {
DimensionMetaDataFragment,
DimensionMetadataFragment,
useDataCubeObservationsQuery,
} from "@/graphql/query-hooks";
import { useLocale } from "@/locales/use-locale";
Expand Down Expand Up @@ -102,8 +102,8 @@ export const ChartAreas = memo(
interactiveFiltersConfig,
}: {
observations: Observation[];
dimensions: DimensionMetaDataFragment[];
measures: DimensionMetaDataFragment[];
dimensions: DimensionMetadataFragment[];
measures: DimensionMetadataFragment[];
fields: AreaFields;
interactiveFiltersConfig: InteractiveFiltersConfig;
}) => {
Expand Down
6 changes: 3 additions & 3 deletions app/charts/bar/chart-bar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import {
import { isNumber } from "@/configurator/components/ui-helpers";
import { Observation } from "@/domain/data";
import {
DimensionMetaDataFragment,
DimensionMetadataFragment,
useDataCubeObservationsQuery,
} from "@/graphql/query-hooks";
import { useLocale } from "@/locales/use-locale";
Expand Down Expand Up @@ -100,8 +100,8 @@ export const ChartBars = memo(
interactiveFiltersConfig,
}: {
observations: Observation[];
dimensions: DimensionMetaDataFragment[];
measures: DimensionMetaDataFragment[];
dimensions: DimensionMetadataFragment[];
measures: DimensionMetadataFragment[];
fields: BarFields;
interactiveFiltersConfig: InteractiveFiltersConfig;
}) => {
Expand Down
6 changes: 3 additions & 3 deletions app/charts/column/chart-column.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ import {
import { isNumber } from "@/configurator/components/ui-helpers";
import { Observation } from "@/domain/data";
import {
DimensionMetaDataFragment,
DimensionMetadataFragment,
useDataCubeObservationsQuery,
} from "@/graphql/query-hooks";
import { useLocale } from "@/locales/use-locale";
Expand Down Expand Up @@ -112,8 +112,8 @@ export const ChartColumns = memo(
interactiveFiltersConfig,
}: {
observations: Observation[];
dimensions: DimensionMetaDataFragment[];
measures: DimensionMetaDataFragment[];
dimensions: DimensionMetadataFragment[];
measures: DimensionMetadataFragment[];
interactiveFiltersConfig: InteractiveFiltersConfig;
fields: ColumnFields;
}) => {
Expand Down
39 changes: 32 additions & 7 deletions app/charts/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,16 @@ import {
TableFields,
} from "@/configurator/config-types";
import { DEFAULT_PALETTE } from "@/configurator/configurator-state";
import { HierarchyValue } from "@/graphql/resolver-types";
import { visitHierarchy } from "@/rdf/tree-utils";

import { mapValueIrisToColor } from "../configurator/components/ui-helpers";
import {
getCategoricalDimensions,
getGeoDimensions,
getTimeDimensions,
} from "../domain/data";
import { DimensionMetaDataFragment } from "../graphql/query-hooks";
import { DimensionMetadataFragment } from "../graphql/query-hooks";
import { DataCubeMetadata } from "../graphql/types";
import { unreachableError } from "../lib/unreachable";

Expand All @@ -53,7 +55,7 @@ export const enabledChartTypes: ChartType[] = [
*/
export const findPreferredDimension = (
dimensions: DataCubeMetadata["dimensions"],
preferredType?: DimensionMetaDataFragment["__typename"]
preferredType?: DimensionMetadataFragment["__typename"]
) => {
const dim =
dimensions.find(
Expand Down Expand Up @@ -756,21 +758,44 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
},
},
map: {
filters: ({ oldValue, newChartConfig }) => {
filters: ({ oldValue, newChartConfig, dimensions }) => {
return produce(newChartConfig, (draft) => {
draft.filters = oldValue;
if (!oldValue) {
draft.filters = oldValue;
}
});
},
fields: {
areaLayer: {
componentIri: ({ oldValue, newChartConfig, dimensions }) => {
const ok = dimensions.find(
const areaDimension = dimensions.find(
(d) => d.__typename === "GeoShapesDimension" && d.iri === oldValue
);

if (ok) {
if (areaDimension) {
return produce(newChartConfig, (draft) => {
draft.fields.areaLayer.componentIri = oldValue;

// Setting the filters so that bottomless areas are shown fist
if (areaDimension?.hierarchy) {
let leafs = [] as HierarchyValue[];
visitHierarchy(areaDimension?.hierarchy, (node) => {
if (
(!node.children || node.children.length === 0) &&
node.hasValue
) {
leafs.push(node);
}
});
if (leafs.length > 0) {
draft.filters[oldValue] = {
type: "multi",
values: Object.fromEntries(
leafs.map((x) => [x.value, true])
),
};
}
}
});
}

Expand Down Expand Up @@ -976,7 +1001,7 @@ const convertTableFieldsToSegmentField = ({
dimensionValues: (
dimensions.find(
(d) => d.iri === componentIri
) as DimensionMetaDataFragment
) as DimensionMetadataFragment
)?.values,
}),
};
Expand Down
6 changes: 3 additions & 3 deletions app/charts/line/chart-lines.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import {
import { isNumber } from "@/configurator/components/ui-helpers";
import { Observation } from "@/domain/data";
import {
DimensionMetaDataFragment,
DimensionMetadataFragment,
useDataCubeObservationsQuery,
} from "@/graphql/query-hooks";
import { useLocale } from "@/locales/use-locale";
Expand Down Expand Up @@ -104,8 +104,8 @@ export const ChartLines = memo(function ChartLines({
interactiveFiltersConfig,
}: {
observations: Observation[];
dimensions: DimensionMetaDataFragment[];
measures: DimensionMetaDataFragment[];
dimensions: DimensionMetadataFragment[];
measures: DimensionMetadataFragment[];
fields: LineFields;
interactiveFiltersConfig: InteractiveFiltersConfig;
}) {
Expand Down
6 changes: 3 additions & 3 deletions app/charts/map/chart-map.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import {
SymbolLayer,
} from "@/domain/data";
import {
DimensionMetaDataFragment,
DimensionMetadataFragment,
useDataCubeObservationsQuery,
useGeoCoordinatesByDimensionIriQuery,
useGeoShapesByDimensionIriQuery,
Expand Down Expand Up @@ -238,8 +238,8 @@ export const ChartMap = memo(
}: {
features: GeoData;
observations: Observation[];
measures: DimensionMetaDataFragment[];
dimensions: DimensionMetaDataFragment[];
measures: DimensionMetadataFragment[];
dimensions: DimensionMetadataFragment[];
fields: MapFields;
baseLayer: BaseLayer;
}) => {
Expand Down
10 changes: 5 additions & 5 deletions app/charts/map/map-state.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ import {
Observation,
ObservationValue,
} from "@/domain/data";
import { DimensionMetaDataFragment } from "@/graphql/query-hooks";
import { DimensionMetadataFragment } from "@/graphql/query-hooks";

import { getBBox } from "./helpers";

Expand All @@ -68,8 +68,8 @@ export interface MapState {
measureLabel: string;
getLabel: (d: Observation) => string;
getValue: (d: Observation) => number | null;
measureDimension?: DimensionMetaDataFragment;
errorDimension?: DimensionMetaDataFragment;
measureDimension?: DimensionMetadataFragment;
errorDimension?: DimensionMetadataFragment;
getFormattedError: null | ((d: Observation) => string);
getColor: (x: number | null) => number[];
colorScale:
Expand All @@ -90,8 +90,8 @@ export interface MapState {
measureLabel: string;
getLabel: (d: Observation) => string;
getValue: (d: Observation) => number | null;
errorDimension?: DimensionMetaDataFragment;
measureDimension?: DimensionMetaDataFragment;
errorDimension?: DimensionMetadataFragment;
measureDimension?: DimensionMetadataFragment;
getFormattedError: null | ((d: Observation) => string);
color: string;
radiusScale: ScalePower<number, number>;
Expand Down
6 changes: 3 additions & 3 deletions app/charts/pie/chart-pie.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {
} from "@/configurator";
import { Observation } from "@/domain/data";
import {
DimensionMetaDataFragment,
DimensionMetadataFragment,
useDataCubeObservationsQuery,
} from "@/graphql/query-hooks";
import { useLocale } from "@/locales/use-locale";
Expand Down Expand Up @@ -101,8 +101,8 @@ export const ChartPie = memo(
interactiveFiltersConfig,
}: {
observations: Observation[];
dimensions: DimensionMetaDataFragment[];
measures: DimensionMetaDataFragment[];
dimensions: DimensionMetadataFragment[];
measures: DimensionMetadataFragment[];
fields: PieFields;
interactiveFiltersConfig: InteractiveFiltersConfig;
}) => {
Expand Down
6 changes: 3 additions & 3 deletions app/charts/scatterplot/chart-scatterplot.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import {
import { isNumber } from "@/configurator/components/ui-helpers";
import { Observation } from "@/domain/data";
import {
DimensionMetaDataFragment,
DimensionMetadataFragment,
useDataCubeObservationsQuery,
} from "@/graphql/query-hooks";
import { useLocale } from "@/locales/use-locale";
Expand Down Expand Up @@ -111,8 +111,8 @@ export const ChartScatterplot = memo(
interactiveFiltersConfig,
}: {
observations: Observation[];
dimensions: DimensionMetaDataFragment[];
measures: DimensionMetaDataFragment[];
dimensions: DimensionMetadataFragment[];
measures: DimensionMetadataFragment[];
fields: ScatterPlotFields;
interactiveFiltersConfig: InteractiveFiltersConfig;
}) => {
Expand Down
6 changes: 3 additions & 3 deletions app/charts/shared/a11y-table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { memo, useMemo } from "react";
import VisuallyHidden from "@/components/visually-hidden";
import { ChartFields } from "@/configurator";
import { Observation } from "@/domain/data";
import { DimensionMetaDataFragment } from "@/graphql/query-hooks";
import { DimensionMetadataFragment } from "@/graphql/query-hooks";

export const A11yTable = memo(
({
Expand All @@ -15,8 +15,8 @@ export const A11yTable = memo(
observations,
}: {
title: string;
dimensions: DimensionMetaDataFragment[];
measures: DimensionMetaDataFragment[];
dimensions: DimensionMetadataFragment[];
measures: DimensionMetadataFragment[];
fields: ChartFields;
observations: Observation[];
}) => {
Expand Down
4 changes: 2 additions & 2 deletions app/charts/shared/chart-helpers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
} from "@/configurator/config-types";
import { FIELD_VALUE_NONE } from "@/configurator/constants";
import { Observation } from "@/domain/data";
import { DimensionMetaDataFragment } from "@/graphql/query-hooks";
import { DimensionMetadataFragment } from "@/graphql/query-hooks";
import truthy from "@/utils/truthy";

export type QueryFilters = Filters | FilterValueSingle;
Expand Down Expand Up @@ -286,7 +286,7 @@ const SlugRe = /\W+/g;
export const getSlugifiedIri = (iri: string) => iri.replace(SlugRe, "_");

export const getLabelWithUnit = (
dimension: DimensionMetaDataFragment
dimension: DimensionMetadataFragment
): string => {
return dimension.unit
? `${dimension.label} (${dimension.unit})`
Expand Down
6 changes: 3 additions & 3 deletions app/charts/shared/use-chart-state.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ import { ScatterplotState } from "@/charts/scatterplot/scatterplot-state";
import { TableChartState } from "@/charts/table/table-state";
import { ChartFields, InteractiveFiltersConfig } from "@/configurator";
import { Observation } from "@/domain/data";
import { DimensionMetaDataFragment } from "@/graphql/query-hooks";
import { DimensionMetadataFragment } from "@/graphql/query-hooks";
import { Has } from "@/lib/has";

export interface ChartProps {
data: Observation[];
fields: ChartFields;
interactiveFiltersConfig: InteractiveFiltersConfig;
dimensions: DimensionMetaDataFragment[];
measures: DimensionMetaDataFragment[];
dimensions: DimensionMetadataFragment[];
measures: DimensionMetadataFragment[];
}

export type ChartState =
Expand Down
6 changes: 3 additions & 3 deletions app/charts/table/chart-table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { DataSource, TableConfig } from "@/configurator";
import { isNumber } from "@/configurator/components/ui-helpers";
import { Observation } from "@/domain/data";
import {
DimensionMetaDataFragment,
DimensionMetadataFragment,
useDataCubeObservationsQuery,
} from "@/graphql/query-hooks";
import { useLocale } from "@/locales/use-locale";
Expand Down Expand Up @@ -72,8 +72,8 @@ const ChartTable = memo(function ChartTable({
chartConfig,
}: {
observations: Observation[];
dimensions: DimensionMetaDataFragment[];
measures: DimensionMetaDataFragment[];
dimensions: DimensionMetadataFragment[];
measures: DimensionMetadataFragment[];
chartConfig: TableConfig;
}) {
return (
Expand Down
4 changes: 2 additions & 2 deletions app/charts/table/table-state.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import {
useOrderedTableColumns,
} from "@/configurator/components/ui-helpers";
import { Observation } from "@/domain/data";
import { DimensionMetaDataFragment } from "@/graphql/query-hooks";
import { DimensionMetadataFragment } from "@/graphql/query-hooks";
import { estimateTextWidth } from "@/lib/estimate-text-width";
import { useTheme } from "@/themes";

Expand Down Expand Up @@ -250,7 +250,7 @@ const useTableState = ({
const { colorMapping } = columnStyle as ColumnStyleCategory;
const dimension = dimensions.find(
(d) => d.iri === iri
) as DimensionMetaDataFragment;
) as DimensionMetadataFragment;

// Color scale (always from colorMappings)
const colorScale = scaleOrdinal();
Expand Down
8 changes: 4 additions & 4 deletions app/components/data-download.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import {
DataCubeObservationsDocument,
DataCubeObservationsQuery,
DataCubeObservationsQueryVariables,
DimensionMetaDataFragment,
DimensionMetadataFragment,
} from "../graphql/query-hooks";
import { Icon } from "../icons";

Expand Down Expand Up @@ -81,16 +81,16 @@ export const DataDownloadStateProvider = ({
const FILE_FORMATS = ["csv", "xlsx"] as const;
export type FileFormat = typeof FILE_FORMATS[number];

const makeColumnLabel = (dim: DimensionMetaDataFragment) => {
const makeColumnLabel = (dim: DimensionMetadataFragment) => {
return `${dim.label}${dim.unit ? ` (${dim.unit})` : ""}`;
};
const prepareData = ({
dimensions,
measures,
observations,
}: {
dimensions: DimensionMetaDataFragment[];
measures: DimensionMetaDataFragment[];
dimensions: DimensionMetadataFragment[];
measures: DimensionMetadataFragment[];
observations: Observation[];
}) => {
const columns = keyBy([...dimensions, ...measures], (d) => d.iri);
Expand Down
Loading

1 comment on commit 3778d5c

@vercel
Copy link

@vercel vercel bot commented on 3778d5c Aug 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

visualization-tool – ./

visualization-tool-git-main-ixt1.vercel.app
visualization-tool-alpha.vercel.app
visualization-tool-ixt1.vercel.app

Please sign in to comment.