Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(data-table): make formatted dttm the default #20140

Merged
merged 1 commit into from
May 20, 2022
Merged

chore(data-table): make formatted dttm the default #20140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 10 additions & 8 deletions superset-frontend/src/explore/actions/exploreActions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,25 +140,27 @@ export function sliceUpdated(slice: Slice) {
return { type: SLICE_UPDATED, slice };
}

export const SET_TIME_FORMATTED_COLUMN = 'SET_TIME_FORMATTED_COLUMN';
export function setTimeFormattedColumn(
export const SET_ORIGINAL_FORMATTED_TIME_COLUMN =
'SET_ORIGINAL_FORMATTED_TIME_COLUMN';
export function setOriginalFormattedTimeColumn(
datasourceId: string,
columnName: string,
) {
return {
type: SET_TIME_FORMATTED_COLUMN,
type: SET_ORIGINAL_FORMATTED_TIME_COLUMN,
datasourceId,
columnName,
};
}

export const UNSET_TIME_FORMATTED_COLUMN = 'UNSET_TIME_FORMATTED_COLUMN';
export function unsetTimeFormattedColumn(
export const UNSET_ORIGINAL_FORMATTED_TIME_COLUMN =
'UNSET_ORIGINAL_FORMATTED_TIME_COLUMN';
export function unsetOriginalFormattedTimeColumn(
datasourceId: string,
columnIndex: number,
) {
return {
type: UNSET_TIME_FORMATTED_COLUMN,
type: UNSET_ORIGINAL_FORMATTED_TIME_COLUMN,
datasourceId,
columnIndex,
};
Expand Down Expand Up @@ -187,8 +189,8 @@ export const exploreActions = {
updateChartTitle,
createNewSlice,
sliceUpdated,
setTimeFormattedColumn,
unsetTimeFormattedColumn,
setOriginalFormattedTimeColumn,
unsetOriginalFormattedTimeColumn,
setForceQuery,
};

Expand Down
73 changes: 46 additions & 27 deletions superset-frontend/src/explore/components/DataTableControl/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ import { Input } from 'src/components/Input';
import {
BOOL_FALSE_DISPLAY,
BOOL_TRUE_DISPLAY,
SLOW_DEBOUNCE,
NULL_DISPLAY,
SLOW_DEBOUNCE,
} from 'src/constants';
import { Radio } from 'src/components/Radio';
import Icons from 'src/components/Icons';
Expand All @@ -46,8 +46,8 @@ import { prepareCopyToClipboardTabularData } from 'src/utils/common';
import CopyToClipboard from 'src/components/CopyToClipboard';
import RowCountLabel from 'src/explore/components/RowCountLabel';
import {
setTimeFormattedColumn,
unsetTimeFormattedColumn,
setOriginalFormattedTimeColumn,
unsetOriginalFormattedTimeColumn,
} from 'src/explore/actions/exploreActions';

export const CellNull = styled('span')`
Expand Down Expand Up @@ -143,8 +143,8 @@ const FormatPicker = ({
}) => (
<Radio.Group value={value} onChange={onChange}>
<Space direction="vertical">
<Radio value={FormatPickerValue.Original}>{t('Original value')}</Radio>
<Radio value={FormatPickerValue.Formatted}>{t('Formatted date')}</Radio>
<Radio value={FormatPickerValue.Original}>{t('Original value')}</Radio>
</Space>
</Radio.Group>
);
Expand All @@ -166,15 +166,15 @@ const FormatPickerLabel = styled.span`
const DataTableTemporalHeaderCell = ({
columnName,
datasourceId,
timeFormattedColumnIndex,
originalFormattedTimeColumnIndex,
}: {
columnName: string;
datasourceId?: string;
timeFormattedColumnIndex: number;
originalFormattedTimeColumnIndex: number;
}) => {
const theme = useTheme();
const dispatch = useDispatch();
const isColumnTimeFormatted = timeFormattedColumnIndex > -1;
const isTimeColumnOriginalFormatted = originalFormattedTimeColumnIndex > -1;

const onChange = useCallback(
e => {
Expand All @@ -183,24 +183,27 @@ const DataTableTemporalHeaderCell = ({
}
if (
e.target.value === FormatPickerValue.Original &&
isColumnTimeFormatted
!isTimeColumnOriginalFormatted
) {
dispatch(
unsetTimeFormattedColumn(datasourceId, timeFormattedColumnIndex),
);
dispatch(setOriginalFormattedTimeColumn(datasourceId, columnName));
} else if (
e.target.value === FormatPickerValue.Formatted &&
!isColumnTimeFormatted
isTimeColumnOriginalFormatted
) {
dispatch(setTimeFormattedColumn(datasourceId, columnName));
dispatch(
unsetOriginalFormattedTimeColumn(
datasourceId,
originalFormattedTimeColumnIndex,
),
);
}
},
[
timeFormattedColumnIndex,
originalFormattedTimeColumnIndex,
columnName,
datasourceId,
dispatch,
isColumnTimeFormatted,
isTimeColumnOriginalFormatted,
],
);
const overlayContent = useMemo(
Expand All @@ -219,14 +222,14 @@ const DataTableTemporalHeaderCell = ({
<FormatPicker
onChange={onChange}
value={
isColumnTimeFormatted
? FormatPickerValue.Formatted
: FormatPickerValue.Original
isTimeColumnOriginalFormatted
? FormatPickerValue.Original
: FormatPickerValue.Formatted
}
/>
</FormatPickerContainer>
) : null,
[datasourceId, isColumnTimeFormatted, onChange],
[datasourceId, isTimeColumnOriginalFormatted, onChange],
);

return datasourceId ? (
Expand Down Expand Up @@ -285,7 +288,7 @@ export const useTableColumns = (
coltypes?: GenericDataType[],
data?: Record<string, any>[],
datasourceId?: string,
timeFormattedColumns: string[] = [],
originalFormattedTimeColumns: string[] = [],
moreConfigs?: { [key: string]: Partial<Column> },
) =>
useMemo(
Expand All @@ -294,20 +297,25 @@ export const useTableColumns = (
? colnames
.filter((column: string) => Object.keys(data[0]).includes(column))
.map((key, index) => {
const timeFormattedColumnIndex =
coltypes?.[index] === GenericDataType.TEMPORAL
? timeFormattedColumns.indexOf(key)
const colType = coltypes?.[index];
const firstValue = data[0][key];
const originalFormattedTimeColumnIndex =
colType === GenericDataType.TEMPORAL
? originalFormattedTimeColumns.indexOf(key)
: -1;
return {
id: key,
accessor: row => row[key],
// When the key is empty, have to give a string of length greater than 0
Header:
coltypes?.[index] === GenericDataType.TEMPORAL ? (
colType === GenericDataType.TEMPORAL &&
typeof firstValue !== 'string' ? (
<DataTableTemporalHeaderCell
columnName={key}
datasourceId={datasourceId}
timeFormattedColumnIndex={timeFormattedColumnIndex}
originalFormattedTimeColumnIndex={
originalFormattedTimeColumnIndex
}
/>
) : (
key
Expand All @@ -322,7 +330,11 @@ export const useTableColumns = (
if (value === null) {
return <CellNull>{NULL_DISPLAY}</CellNull>;
}
if (timeFormattedColumnIndex > -1) {
if (
colType === GenericDataType.TEMPORAL &&
originalFormattedTimeColumnIndex === -1 &&
typeof value === 'number'
) {
return timeFormatter(value);
}
return String(value);
Expand All @@ -331,5 +343,12 @@ export const useTableColumns = (
} as Column;
})
: [],
[colnames, data, coltypes, datasourceId, moreConfigs, timeFormattedColumns],
[
colnames,
data,
coltypes,
datasourceId,
moreConfigs,
originalFormattedTimeColumns,
],
);