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

[front] fix date format (timestamp) in horizontal bars widget (#7921) #8032

Merged
merged 8 commits into from
Sep 20, 2024
Merged

[front] fix date format (timestamp) in horizontal bars widget (#7921) #8032

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
67f73c8
[front]fix date format(#7921)
CelineSebe Aug 14, 2024
3f0773a
[front]getFormattedValue(#7921)
CelineSebe Sep 18, 2024
1a2e9e8
[front]fix format(#7921)
CelineSebe Sep 18, 2024
c772890
[front]fix ts(#7921)
CelineSebe Sep 18, 2024
a29a0f0
[front]fix type(#7921)
CelineSebe Sep 19, 2024
f25e746
[front]re fix type(#7921)
CelineSebe Sep 19, 2024
979956a
[front]fix type(#7921)
CelineSebe Sep 19, 2024
94e6c02
default date format
ValentinBouzinFiligran Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion opencti-platform/opencti-front/src/components/dashboard/WidgetHorizontalBars.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { ApexOptions } from 'apexcharts';
import { horizontalBarsChartOptions } from '../../utils/Charts';
import { simpleNumberFormat } from '../../utils/Number';
import type { Theme } from '../Theme';
import { dateFormat, timestamp } from '../../utils/Time';

interface WidgetHorizontalBarsProps {
series: ApexAxisChartSeries
Expand Down Expand Up @@ -36,13 +37,26 @@ const WidgetHorizontalBars = ({
const theme = useTheme<Theme>();
const navigate = useNavigate();

const getFormattedValue = (value: string | number) => {
if (typeof value === 'number') {
return simpleNumberFormat(value);
}
const newTimestamp = parseInt(value, 10);
if (!Number.isNaN(newTimestamp)) {
const convertedDate = timestamp(newTimestamp);
const date = dateFormat(convertedDate);
if (date) return date;
}
return value;
};

return (
<Chart
options={horizontalBarsChartOptions(
theme,
true,
simpleNumberFormat,
simpleNumberFormat,
getFormattedValue,
distributed,
navigate,
redirectionUtils,
Expand Down
3 changes: 2 additions & 1 deletion opencti-platform/opencti-front/src/utils/Charts.js
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my opinion the fix should be done in the file calling the function horizontalBarsChartOptions, not in this file. We have the possibility already to pass a function yFormatter to format the value. So use this to transform the timestamp in date string when necessary directly in the widget component when the attribute is a date.

Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const toolbarOptions = {
columnDelimiter: ',',
headerCategory: 'category',
headerValue: 'value',
// eslint-disable-next-line @typescript-eslint/no-shadow
CelineSebe marked this conversation as resolved.
Show resolved Hide resolved
dateFormatter(timestamp) {
return new Date(timestamp).toDateString();
},
Expand Down Expand Up @@ -524,7 +525,7 @@ export const horizontalBarsChartOptions = (
show: stackType !== '100%',
labels: {
show: stackType !== '100%',
formatter: (value) => (yFormatter && typeof value === 'number' ? yFormatter(value) : value),
formatter: (value) => (yFormatter ? yFormatter(value) : value),
style: {
fontFamily: '"IBM Plex Sans", sans-serif',
},
Expand Down