fix(native-filters): show human readable time grain label in indicator (#15411)
* fix(native-filters): show human readable time grain label in indicator
* lint
* simplify
(cherry picked from commit ddcf4617497ae45302aa4f9ae68aee618326425d)
diff --git a/superset-frontend/src/filters/components/TimeGrain/TimeGrainFilterPlugin.tsx b/superset-frontend/src/filters/components/TimeGrain/TimeGrainFilterPlugin.tsx
index 1cde951..a2c4a18 100644
--- a/superset-frontend/src/filters/components/TimeGrain/TimeGrainFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/TimeGrain/TimeGrainFilterPlugin.tsx
@@ -24,7 +24,7 @@
TimeGranularity,
tn,
} from '@superset-ui/core';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
import { Select } from 'src/common/components';
import { Styles, StyledSelect } from '../common';
import { PluginFilterTimeGrainProps } from './types';
@@ -52,10 +52,22 @@
const { defaultValue, inputRef } = formData;
const [value, setValue] = useState<string[]>(defaultValue ?? []);
+ const durationMap = useMemo(
+ () =>
+ data.reduce(
+ (agg, { duration, name }: { duration: string; name: string }) => ({
+ ...agg,
+ [duration]: name,
+ }),
+ {} as { [key in string]: string },
+ ),
+ [JSON.stringify(data)],
+ );
const handleChange = (values: string[] | string | undefined | null) => {
const resultValue: string[] = ensureIsArray<string>(values);
const [timeGrain] = resultValue;
+ const label = timeGrain ? durationMap[timeGrain] : undefined;
const extraFormData: ExtraFormData = {};
if (timeGrain) {
@@ -65,6 +77,7 @@
setDataMask({
extraFormData,
filterState: {
+ label,
value: resultValue.length ? resultValue : null,
},
});