Commit 9e9ea94e authored by jcaro's avatar jcaro Committed by Jordan CARO
Browse files

enh(ui): Add diverses formats option to export the graphs (#9879)



* Add MenuList & Items to have multi option to export

* Remplace LargeSize by SmallSize in index.tsx & translatedLabels.ts

* Add labels and translations for size export & diverses size export function

* Add translation into messages.po Lang_PT

* Update lang/fr_FR.UTF-8/LC_MESSAGES/messages.po

* Update translatedLabels.ts

* Update messages.po & translatedLabels.ts

* Update messages.po file

* Update translatedLabels.ts

* Update label in index file

* Add size variable after label size option export

* Modifications on translations and messages.po

* push last modification about labels

* Modifications on translated labels and messages.po

* Modification AsCurrentSize by AsDisplayed

* Fix translation issue

* Update lang/es_ES.UTF-8/LC_MESSAGES/messages.po
Co-authored-by: default avatarBruno d'Auria <bdauria@centreon.com>

* Update lang/fr_FR.UTF-8/LC_MESSAGES/messages.po
Co-authored-by: default avatarBruno d'Auria <bdauria@centreon.com>

* Update lang/fr_FR.UTF-8/LC_MESSAGES/messages.po
Co-authored-by: default avatarBruno d'Auria <bdauria@centreon.com>

* Update lang/fr_FR.UTF-8/LC_MESSAGES/messages.po
Co-authored-by: default avatarBruno d'Auria <bdauria@centreon.com>

* Update www/front_src/src/Resources/translatedLabels.ts
Co-authored-by: default avatarBruno d'Auria <bdauria@centreon.com>

* Update lang/pt_PT.UTF-8/LC_MESSAGES/messages.po
Co-authored-by: default avatarBruno d'Auria <bdauria@centreon.com>
Co-authored-by: default avatarBruno d'Auria <bdauria@centreon.com>
parent a065a3ee
......@@ -14704,3 +14704,16 @@ msgstr "Permitir certificado autofirmado"
 
# msgid "At least one column must be selected"
# msgstr ""
# msgid "The duration must be lesser than a year"
# msgstr ""
# msgid "As displayed"
# msgstr ""
# msgid "Medium size"
# msgstr ""
# msgid "Small size"
# msgstr ""
......@@ -16141,3 +16141,15 @@ msgstr "Type de calcul"
 
msgid "At least one column must be selected"
msgstr "Au moins une colonne doit être sélectionnée"
msgid "The duration must be lesser than a year"
msgstr "La durée doit être inférieure à une année"
# msgid "As displayed"
# msgstr "Comme affiché"
# msgid "Medium size"
# msgstr "Taille moyenne"
# msgid "Small size"
# msgstr "Petite Taille"
......@@ -15155,3 +15155,16 @@ msgstr "Erro ao remover tokens de um contato"
 
# msgid "At least one column must be selected"
# msgstr ""
# msgid "The duration must be lesser than a year"
# msgstr ""
# msgid "As Displayed"
# msgstr ""
# msgid "Medium size"
# msgstr ""
# msgid "Small size"
# msgstr ""
......@@ -15143,3 +15143,16 @@ msgstr "Erro ao remover tokens de um contato"
 
# msgid "Calculation type"
# msgstr ""
# msgid "The duration must be lesser than a year"
# msgstr ""
# msgid "As displayed"
# msgstr ""
# msgid "Medium size"
# msgstr ""
# msgid "Small size"
# msgstr ""
......@@ -3,15 +3,28 @@ import dom2image from 'dom-to-image';
interface Props {
element: HTMLElement;
ratio: number;
title: string;
}
const exportToPng = async ({ element, title }: Props): Promise<void> => {
const exportToPng = async ({ element, title, ratio }: Props): Promise<void> => {
const dateTime = new Date().toISOString().substring(0, 19);
const getTranslation = (size: number) => {
return ((1 - ratio) * size) / 2;
};
const translateY = getTranslation(element.offsetHeight);
const translateX = getTranslation(element.offsetWidth);
return dom2image
.toBlob(element, {
bgcolor: '#FFFFFF',
height: element.offsetHeight * ratio,
style: {
transform: `translate(-${translateX}px, -${translateY}px) scale(${ratio})`,
},
width: element.offsetWidth * ratio,
})
.then((blob) => {
return saveAs(blob, `${title}-${dateTime}.png`);
......
......@@ -22,7 +22,13 @@ import {
} from 'ramda';
import { useTranslation } from 'react-i18next';
import { makeStyles, Typography, Theme } from '@material-ui/core';
import {
makeStyles,
Typography,
Theme,
MenuItem,
Menu,
} from '@material-ui/core';
import SaveAsImageIcon from '@material-ui/icons/SaveAlt';
import { Skeleton } from '@material-ui/lab';
......@@ -40,7 +46,10 @@ import { Resource } from '../../models';
import { ResourceDetails } from '../../Details/models';
import { CommentParameters } from '../../Actions/api';
import {
labelAsDisplayed,
labelExportToPng,
labelSmallSize,
labelMediumSize,
labelNoDataForThisPeriod,
} from '../../translatedLabels';
import {
......@@ -165,6 +174,14 @@ const PerformanceGraph = ({
const [exporting, setExporting] = React.useState<boolean>(false);
const performanceGraphRef = React.useRef<HTMLDivElement | null>(null);
const performanceGraphHeightRef = React.useRef<number>(0);
const [menuAnchor, setMenuAnchor] = React.useState<Element | null>(null);
const openSizeExportMenu = (event: React.MouseEvent): void => {
setMenuAnchor(event.currentTarget);
};
const closeSizeExportMenu = (): void => {
setMenuAnchor(null);
};
const { selectedResourceId } = useResourceContext();
......@@ -336,10 +353,12 @@ const PerformanceGraph = ({
});
};
const convertToPng = (): void => {
const convertToPng = (ratio: number): void => {
setMenuAnchor(null);
setExporting(true);
exportToPng({
element: performanceGraphRef.current as HTMLElement,
ratio,
title: `${resource?.name}-performance`,
}).finally(() => {
setExporting(false);
......@@ -378,14 +397,32 @@ const PerformanceGraph = ({
loading={exporting}
loadingIndicatorSize={16}
>
<IconButton
disableTouchRipple
disabled={isNil(timeline)}
title={t(labelExportToPng)}
onClick={convertToPng}
>
<SaveAsImageIcon style={{ fontSize: 18 }} />
</IconButton>
<>
<IconButton
disableTouchRipple
disabled={isNil(timeline)}
title={t(labelExportToPng)}
onClick={openSizeExportMenu}
>
<SaveAsImageIcon style={{ fontSize: 18 }} />
</IconButton>
<Menu
keepMounted
anchorEl={menuAnchor}
open={Boolean(menuAnchor)}
onClose={closeSizeExportMenu}
>
<MenuItem onClick={() => convertToPng(1)}>
{t(labelAsDisplayed)}
</MenuItem>
<MenuItem onClick={() => convertToPng(0.75)}>
{t(labelMediumSize)}
</MenuItem>
<MenuItem onClick={() => convertToPng(0.5)}>
{t(labelSmallSize)}
</MenuItem>
</Menu>
</>
</ContentWithCircularLoading>
</div>
</div>
......
......@@ -213,3 +213,7 @@ export const labelMetaService = 'Meta service';
export const labelCalculationType = 'Calculation type';
export const labelSelectAtLeastOneColumn =
'At least one column must be selected';
export const labelMaxDuration1Year = 'The duration must be lesser than a year';
export const labelAsDisplayed = 'As displayed';
export const labelMediumSize = 'Medium size';
export const labelSmallSize = 'Small size';
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment