((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 (
}
disabled={disabled}
options={allValues}
sortOptions={false}
@@ -687,6 +692,34 @@ export const ColorPickerField = ({
);
};
+const FieldLabel = ({
+ label,
+ isOptional,
+ isFetching,
+}: {
+ label: React.ReactNode;
+ isOptional?: boolean;
+ isFetching?: boolean;
+}) => {
+ const classes = useStyles();
+ const optionalLabel = t({
+ id: "controls.select.optional",
+ message: `optional`,
+ });
+ return (
+
+ {label}
+
+ {isOptional ? (
+ ({optionalLabel})
+ ) : null}
+ {isFetching ? (
+
+ ) : null}
+
+ );
+};
+
export const ChartFieldField = ({
label,
field,
@@ -700,7 +733,6 @@ export const ChartFieldField = ({
optional?: boolean;
disabled?: boolean;
}) => {
- const classes = useStyles();
const { fetching, ...fieldProps } = useChartFieldField({ field });
const noneLabel = t({
@@ -708,28 +740,12 @@ export const ChartFieldField = ({
message: "None",
});
- const optionalLabel = t({
- id: "controls.select.optional",
- message: `optional`,
- });
-
return (