dosubot[bot] commented on issue #28615:
URL: https://github.com/apache/superset/issues/28615#issuecomment-2285995822
<!-- Answer -->
To add or modify the timestamp format options in the Apache Superset UI to
include `%d.%m.%Y` and `%Y-%m-%d %H:%M:%S.%L`, you need to update the
`D3_TIME_FORMAT_OPTIONS` array in the `controls.jsx` file.
Here is how you can do it:
1. Locate the `controls.jsx` file in your Superset codebase.
2. Update the `D3_TIME_FORMAT_OPTIONS` array to include the new formats.
Here is an example of how to add these formats:
```jsx
export const D3_TIME_FORMAT_OPTIONS = [
['smart_date', t('Adaptive formatting')],
['%d/%m/%Y', '%d/%m/%Y | 14/01/2019'],
['%m/%d/%Y', '%m/%d/%Y | 01/14/2019'],
['%Y-%m-%d', '%Y-%m-%d | 2019-01-14'],
['%Y-%m-%d %H:%M:%S', '%Y-%m-%d %H:%M:%S | 2019-01-14 01:32:10'],
['%d-%m-%Y %H:%M:%S', '%Y-%m-%d %H:%M:%S | 14-01-2019 01:32:10'],
['%H:%M:%S', '%H:%M:%S | 01:32:10'],
['%Y-%m-%d %H:%M:%S.%L', '%Y-%m-%d %H:%M:%S.%L | 2019-01-14
01:32:10.123'], // New format
['%d.%m.%Y', '%d.%m.%Y | 14.01.2019'], // New format
];
```
This will ensure that the `%d.%m.%Y` and `%Y-%m-%d %H:%M:%S.%L` formats are
available and correctly used in the Apache Superset UI
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/src/explore/controls.jsx)</sup>.
Additionally, ensure that these formats are referenced in other parts of the
codebase where `D3_TIME_FORMAT_OPTIONS` is used, such as in
`sharedControls.tsx` and `constants.tsx`:
- In `sharedControls.tsx`:
```tsx
const x_axis_time_format: SharedControlConfig<
'SelectControl',
SelectDefaultOption
> = {
type: 'SelectControl',
freeForm: true,
label: t('Time format'),
renderTrigger: true,
default: DEFAULT_TIME_FORMAT,
choices: D3_TIME_FORMAT_OPTIONS,
description: D3_TIME_FORMAT_DOCS,
filterOption: ({ data: option }, search) =>
option.label.includes(search) || option.value.includes(search),
};
```
- In `constants.tsx`:
```tsx
const d3TimeFormat: ControlFormItemSpec<'Select'> = {
controlType: 'Select',
label: t('D3 format'),
description: D3_TIME_FORMAT_DOCS,
options: D3_TIME_FORMAT_OPTIONS.map(option => ({
value: option[0],
label: option[1],
})),
defaultValue: D3_TIME_FORMAT_OPTIONS[0][0],
creatable: true,
minWidth: '10em',
debounceDelay: 500,
};
```
By updating these files, you ensure that the new date formats are available
throughout the Superset UI
<sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/sharedControls.tsx)</sup><sup>[[3]](https://github.com/apache/superset/blob/master/superset-frontend/src/explore/components/controls/ColumnConfigControl/constants.tsx)</sup>.
If you want to verify the functionality of these new date formats, you can
add test cases in the `createD3TimeFormatter.test.ts` file:
```ts
describe('createD3TimeFormatter(config)', () => {
// Existing test cases...
// Add new test cases for the new date format
describe('when using new date format', () => {
const newDateFormat = '%d.%m.%Y'; // Example new date format
it('formats date with new format', () => {
const formatter = createD3TimeFormatter({
formatString: newDateFormat,
});
expect(formatter.format(new Date(2023, 9, 5))).toEqual('05.10.2023');
});
});
});
```
This will help ensure that the new date formats are correctly implemented
and tested
<sup>[[4]](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/test/time-format/factories/createD3TimeFormatter.test.ts)</sup>.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
