Merge branch 'main' of github.com:visualize-admin/visualization-tool …

…into feat/new-design-for-color-picking-maps
visualize-admin · Jan 27, 2022 · c60d46e · c60d46e
2 parents b070e07 + 276b294
commit c60d46e
Show file tree

Hide file tree

Showing 45 changed files with 1,578 additions and 585 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -5,5 +5,13 @@
     "react/display-name": "off",
     "unused-imports/no-unused-imports-ts": "error",
     "@next/next/no-html-link-for-pages": ["error", "app/pages/"]
-  }
+  },
+  "overrides": [
+    {
+      "files": ["**/*.docs.tsx"], // Or *.test.js
+      "rules": {
+        "import/no-anonymous-default-export": "off"
+      }
+    }
+  ]
 }
diff --git a/app/charts/chart-config-ui-options.ts b/app/charts/chart-config-ui-options.ts
@@ -74,7 +74,13 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
       {
         field: "x",
         optional: false,
-        values: ["TemporalDimension", "NominalDimension", "OrdinalDimension"],
+        values: [
+          "TemporalDimension",
+          "NominalDimension",
+          "OrdinalDimension",
+          "GeoCoordinatesDimension",
+          "GeoShapesDimension",
+        ],
         filters: true,
         sorting: [
           { sortingType: "byMeasure", sortingOrder: ["asc", "desc"] },
@@ -84,7 +90,12 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
       {
         field: "segment",
         optional: true,
-        values: ["NominalDimension", "OrdinalDimension"],
+        values: [
+          "NominalDimension",
+          "OrdinalDimension",
+          "GeoCoordinatesDimension",
+          "GeoShapesDimension",
+        ],
         filters: true,
         sorting: [
           { sortingType: "byDimensionLabel", sortingOrder: ["asc", "desc"] },
@@ -104,7 +115,13 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
       {
         field: "y",
         optional: false,
-        values: ["TemporalDimension", "NominalDimension", "OrdinalDimension"],
+        values: [
+          "TemporalDimension",
+          "NominalDimension",
+          "OrdinalDimension",
+          "GeoCoordinatesDimension",
+          "GeoShapesDimension",
+        ],
         filters: true,
       },
       {
@@ -116,7 +133,12 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
       {
         field: "segment",
         optional: true,
-        values: ["NominalDimension", "OrdinalDimension"],
+        values: [
+          "NominalDimension",
+          "OrdinalDimension",
+          "GeoCoordinatesDimension",
+          "GeoShapesDimension",
+        ],
         filters: true,
         sorting: [
           { sortingType: "byDimensionLabel", sortingOrder: ["asc", "desc"] },
@@ -143,7 +165,12 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
       {
         field: "segment",
         optional: true,
-        values: ["NominalDimension", "OrdinalDimension"],
+        values: [
+          "NominalDimension",
+          "OrdinalDimension",
+          "GeoCoordinatesDimension",
+          "GeoShapesDimension",
+        ],
         filters: true,
         // sorting: [
         //   { sortingType: "byTotalSize", sortingOrder: ["asc", "desc"] },
@@ -168,7 +195,12 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
       {
         field: "segment",
         optional: true,
-        values: ["NominalDimension", "OrdinalDimension"],
+        values: [
+          "NominalDimension",
+          "OrdinalDimension",
+          "GeoCoordinatesDimension",
+          "GeoShapesDimension",
+        ],
         filters: true,
         sorting: [
           { sortingType: "byDimensionLabel", sortingOrder: ["asc", "desc"] },
@@ -195,7 +227,12 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
       {
         field: "segment",
         optional: true,
-        values: ["NominalDimension", "OrdinalDimension"],
+        values: [
+          "NominalDimension",
+          "OrdinalDimension",
+          "GeoCoordinatesDimension",
+          "GeoShapesDimension",
+        ],
         filters: true,
         options: [{ field: "color", values: ["palette"] }],
       },
@@ -214,7 +251,12 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
       {
         field: "segment",
         optional: false,
-        values: ["NominalDimension", "OrdinalDimension"],
+        values: [
+          "NominalDimension",
+          "OrdinalDimension",
+          "GeoCoordinatesDimension",
+          "GeoShapesDimension",
+        ],
         filters: true,
         sorting: [
           { sortingType: "byMeasure", sortingOrder: ["asc", "desc"] },

diff --git a/app/charts/map/chart-map.tsx b/app/charts/map/chart-map.tsx
@@ -179,14 +179,7 @@ export const ChartMapPrototype = ({
   baseLayer: BaseLayer;
 }) => {
   return (
-    <Box
-      sx={{
-        m: 4,
-        bg: "#fff",
-        border: "1px solid",
-        borderColor: "monochrome400",
-      }}
-    >
+    <Box sx={{ m: 4, bg: "#fff" }}>
       <ChartMap
         observations={observations}
         features={features}

diff --git a/app/charts/map/map-legend.tsx b/app/charts/map/map-legend.tsx
@@ -207,7 +207,7 @@ const CircleLegend = () => {
   const domainObservations = useMemo(
     () => dataDomain.map((d) => data.find((x) => getValue(x) === d)),
     [data, dataDomain, getValue]
-  ) as [Observation, Observation];
+  ) as [Observation | undefined, Observation | undefined];
 
   return (
     <svg width={width} height={HEIGHT}>
@@ -218,27 +218,24 @@ const CircleLegend = () => {
       >
         {dataDomain.map((d, i) => {
           const observation = domainObservations[i];
-          const label = getLabel(observation);
-          const radius = radiusScale(d);
 
-          return (
-            observation && (
-              <>
-                {
-                  <Circle
-                    value={formatNumber(d)}
-                    label={label}
-                    fill="none"
-                    stroke={axisLabelColor}
-                    radius={radius}
-                    maxRadius={maxRadius}
-                    fontSize={legendFontSize}
-                    showLine={!interaction.visible}
-                  />
-                }
-              </>
-            )
-          );
+          if (observation) {
+            const label = getLabel(observation);
+            const radius = radiusScale(d);
+
+            return (
+              <Circle
+                value={formatNumber(d)}
+                label={label}
+                fill="none"
+                stroke={axisLabelColor}
+                radius={radius}
+                maxRadius={maxRadius}
+                fontSize={legendFontSize}
+                showLine={!interaction.visible}
+              />
+            );
+          }
         })}
 
         {/* Hovered data point indicator */}

diff --git a/app/charts/map/map.tsx b/app/charts/map/map.tsx
@@ -242,7 +242,7 @@ export const MapComponent = () => {
                   ? areaLayer.getColor(
                       areaLayer.getValue(d.properties.observation)
                     )
-                  : null
+                  : [33, 33, 33, 33]
               }
             />
             <GeoJsonLayer

diff --git a/app/components/form.tsx b/app/components/form.tsx
@@ -11,11 +11,16 @@ import {
   Select as TUISelect,
   SelectProps,
 } from "theme-ui";
-import { ReactNode, useMemo } from "react";
+import { ChangeEvent, ReactNode, useCallback, useMemo } from "react";
 import { FieldProps, Option } from "../configurator";
 import { Icon } from "../icons";
 import { useId } from "@reach/auto-id";
 import { useLocale } from "../locales/use-locale";
+import { DayPickerInputProps, DayPickerProps } from "react-day-picker";
+import DayPickerInput from "react-day-picker/DayPickerInput";
+import "react-day-picker/lib/style.css";
+import { useTimeFormatUnit } from "../configurator/components/ui-helpers";
+import { TimeUnit } from "../graphql/query-hooks";
 
 export const Label = ({
   label,
@@ -151,18 +156,19 @@ export const Checkbox = ({
 export const Select = ({
   label,
   id,
-  name,
   value,
   disabled,
   options,
   onChange,
   sortOptions = true,
+  controls,
 }: {
   id: string;
   options: Option[];
   label?: ReactNode;
   disabled?: boolean;
   sortOptions?: boolean;
+  controls?: React.ReactNode;
 } & SelectProps) => {
   const locale = useLocale();
   const sortedOptions = useMemo(() => {
@@ -181,6 +187,7 @@ export const Select = ({
       {label && (
         <Label htmlFor={id} disabled={disabled} smaller>
           {label}
+          {controls}
         </Label>
       )}
       <TUISelect
@@ -219,9 +226,7 @@ export const Select = ({
 export const MiniSelect = ({
   label,
   id,
-  name,
   value,
-  disabled,
   options,
   onChange,
 }: {
@@ -292,6 +297,90 @@ export const Input = ({
   </Box>
 );
 
+export const DayPickerField = ({
+  label,
+  name,
+  value,
+  onChange,
+  disabled,
+  controls,
+  ...props
+}: {
+  name: string;
+  value: Date;
+  onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
+  controls?: ReactNode;
+  label?: string | ReactNode;
+  disabled?: boolean;
+} & Omit<DayPickerInputProps, "onChange">) => {
+  const handleDayClick = useCallback(
+    (day: Date) => {
+      const ev = {
+        currentTarget: {
+          value: day.toISOString().slice(0, 10),
+        },
+      } as ChangeEvent<HTMLSelectElement>;
+      onChange(ev);
+    },
+    [onChange]
+  );
+  const formatDateAuto = useTimeFormatUnit();
+  const inputProps = useMemo(() => {
+    return {
+      name,
+      formatDate: formatDateAuto,
+      value: formatDateAuto(value, TimeUnit.Day),
+      disabled,
+      ...props.inputProps,
+      style: {
+        padding: "0.625rem 0.75rem",
+        color: disabled ? "monochrome300" : "monochrome700",
+        fontSize: "1rem",
+        minHeight: "1.5rem",
+        display: "block",
+        borderRadius: "0.25rem",
+        width: "100%",
+        border: "1px solid var(--theme-ui-colors-monochrome500)",
+
+        // @ts-ignore
+        ...props.inputProps?.style,
+      },
+    } as DayPickerInputProps;
+  }, [name, formatDateAuto, value, disabled, props.inputProps]);
+
+  const dayPickerProps = useMemo(() => {
+    return {
+      onDayClick: handleDayClick,
+      ...props.dayPickerProps,
+    } as DayPickerProps;
+  }, [handleDayClick, props.dayPickerProps]);
+
+  return (
+    <Box
+      sx={{
+        color: disabled ? "monochrome300" : "monochrome700",
+        fontSize: 4,
+        pb: 2,
+      }}
+    >
+      {label && name && (
+        <Label htmlFor={name} smaller disabled={disabled}>
+          {label}
+          {controls}
+        </Label>
+      )}
+      <DayPickerInput
+        value={value}
+        style={{ width: "100%", color: "inherit" }}
+        {...props}
+        inputProps={inputProps}
+        dayPickerProps={dayPickerProps}
+      />
+      {/* <DayPicker selectedDays={new Date()} /> */}
+    </Box>
+  );
+};
+
 export const SearchField = ({
   id,
   label,