diff --git a/app/components/metadata-panel.tsx b/app/components/metadata-panel.tsx index 066eccbcb..e13a6a6a6 100644 --- a/app/components/metadata-panel.tsx +++ b/app/components/metadata-panel.tsx @@ -17,8 +17,9 @@ import match from "autosuggest-highlight/match"; import parse from "autosuggest-highlight/parse"; import clsx from "clsx"; import { AnimatePresence, Transition } from "framer-motion"; +import orderBy from "lodash/orderBy"; import { useRouter } from "next/router"; -import React from "react"; +import React, { useMemo } from "react"; import { createStore, useStore } from "zustand"; import shallow from "zustand/shallow"; @@ -32,6 +33,7 @@ import { Icon } from "@/icons"; import SvgIcArrowRight from "@/icons/components/IcArrowRight"; import SvgIcClose from "@/icons/components/IcClose"; import { useEmbedOptions } from "@/utils/embed"; +import { makeDimensionValueSorters } from "@/utils/sorting-values"; import useEvent from "@/utils/use-event"; import Flex from "./flex"; @@ -603,8 +605,16 @@ const TabPanelDataDimension = ({ }; const DimensionValues = ({ dim }: { dim: DimensionMetadataFragment }) => { + const sortedValues = useMemo(() => { + const sorters = makeDimensionValueSorters(dim); + return orderBy( + dim.values, + sorters.map((s) => (dv) => s(dv.label)) + ) as DimensionValue[]; + }, [dim]); + if (isStandardErrorDimension(dim)) { - return ; + return ; } switch (dim.__typename) { @@ -613,11 +623,11 @@ const DimensionValues = ({ dim }: { dim: DimensionMetadataFragment }) => { case "OrdinalMeasure": case "GeoCoordinatesDimension": case "GeoShapesDimension": - return ; + return ; case "NumericalMeasure": case "TemporalDimension": - return dim.values.length > 0 ? ( - + return sortedValues.length > 0 ? ( + ) : null; default: const _exhaustiveCheck: never = dim; diff --git a/app/components/publish-actions.tsx b/app/components/publish-actions.tsx index 0f9454a31..c3ada9c72 100644 --- a/app/components/publish-actions.tsx +++ b/app/components/publish-actions.tsx @@ -324,7 +324,7 @@ export const Embed = ({ configKey, locale }: EmbedShareProps) => { `} + content={``} /> diff --git a/app/configurator/components/chart-configurator.tsx b/app/configurator/components/chart-configurator.tsx index 20210ef22..b66d756f4 100644 --- a/app/configurator/components/chart-configurator.tsx +++ b/app/configurator/components/chart-configurator.tsx @@ -119,7 +119,7 @@ const DataFilterSelectGeneric = ({ onClick={onRemove} size="small" > - + ); @@ -624,6 +624,17 @@ export const ChartConfigurator = ({ ) : null} + {filterDimensions.length === 0 ? ( + + + No filters + + + ) : null} {(provided) => ( diff --git a/app/configurator/components/chart-options-selector.tsx b/app/configurator/components/chart-options-selector.tsx index be5993bb2..5f57f02b9 100644 --- a/app/configurator/components/chart-options-selector.tsx +++ b/app/configurator/components/chart-options-selector.tsx @@ -4,7 +4,7 @@ import get from "lodash/get"; import keyBy from "lodash/keyBy"; import { useCallback, useEffect, useMemo, useRef } from "react"; -import { getFieldComponentIri } from "@/charts"; +import { DEFAULT_SORTING, getFieldComponentIri } from "@/charts"; import { chartConfigOptionsUISpec, EncodingFieldType, @@ -552,7 +552,7 @@ const ChartFieldSorting = ({ const locale = useLocale(); const [, dispatch] = useConfiguratorState(); - const getSortingTypeLabel = (type: SortingType) => { + const getSortingTypeLabel = (type: SortingType): string => { switch (type) { case "byDimensionLabel": return t({ id: "controls.sorting.byDimensionLabel", message: `Name` }); @@ -565,7 +565,7 @@ const ChartFieldSorting = ({ default: const _sanityCheck: never = type; console.warn(`Sorting type label is ${_sanityCheck}`); - return t({ id: "controls.sorting.byDimensionLabel", message: `Name` }); + return getSortingTypeLabel(DEFAULT_SORTING["sortingType"]); } }; @@ -593,7 +593,7 @@ const ChartFieldSorting = ({ const activeSortingType = get( state, ["chartConfig", "fields", field, "sorting", "sortingType"], - "byDimensionLabel" + DEFAULT_SORTING["sortingType"] ); // FIXME: Remove this once it's properly encoded in chart-config-ui-options diff --git a/app/configurator/components/field.tsx b/app/configurator/components/field.tsx index 54b409361..fb8bc3ff7 100644 --- a/app/configurator/components/field.tsx +++ b/app/configurator/components/field.tsx @@ -56,7 +56,6 @@ import { useConfiguratorState, } from "@/configurator/configurator-state"; import { FIELD_VALUE_NONE } from "@/configurator/constants"; -import { DimensionValue } from "@/domain/data"; import { truthy } from "@/domain/types"; import { useTimeFormatLocale } from "@/formatters"; import { DimensionMetadataFragment, TimeUnit } from "@/graphql/query-hooks"; @@ -81,6 +80,14 @@ const FieldEditIcon = () => { }; const useStyles = makeStyles((theme) => ({ + root: { + display: "flex", + alignItems: "center", + gap: "0.25rem", + }, + optional: { + paddingBottom: "4px", + }, loadingIndicator: { color: theme.palette.grey[700], display: "inline-block", @@ -169,14 +176,12 @@ export const DataFilterSelect = ({ message: `No Filter`, }); - const optionalLabel = t({ - id: "controls.select.optional", - message: `optional`, - }); - const sortedValues = useMemo(() => { const sorters = makeDimensionValueSorters(dimension); - const sortedValues = orderBy(dimension.values, sorters) as DimensionValue[]; + const sortedValues = orderBy( + dimension.values, + sorters.map((s) => (dv) => s(dv.label)) + ); return sortedValues; }, [dimension]); @@ -217,7 +222,7 @@ export const DataFilterSelect = ({ if (hierarchy && hierarchyOptions) { return ( } options={hierarchyOptions} onClose={handleClose} onOpen={handleOpen} @@ -232,7 +237,7 @@ export const DataFilterSelect = ({ return ( - {optional ? ( - - {label} ({optionalLabel}) - - ) : ( - {label} - )} - {fetching ? ( - - ) : null} - + } disabled={disabled || fetching} options={ @@ -880,11 +896,6 @@ export const ChartOptionSelectField = ({ message: "None", }); - const optionalLabel = t({ - id: "controls.select.optional", - message: "optional", - }); - const allOptions = useMemo(() => { return isOptional ? [ @@ -902,7 +913,9 @@ export const ChartOptionSelectField = ({