diff --git a/app/charts/shared/containers.tsx b/app/charts/shared/containers.tsx index bba960d00..37a9536ad 100644 --- a/app/charts/shared/containers.tsx +++ b/app/charts/shared/containers.tsx @@ -69,13 +69,13 @@ export const ChartSvg = ({ children }: { children: ReactNode }) => { style={{ position: "absolute", left: 0, top: 0 }} > {interactiveFiltersConfig?.calculation.active && ( - - + )} {children} diff --git a/app/components/publish-actions.tsx b/app/components/publish-actions.tsx index 83c499367..247d89cb5 100644 --- a/app/components/publish-actions.tsx +++ b/app/components/publish-actions.tsx @@ -1,3 +1,11 @@ +import { CHART_RESIZE_EVENT_TYPE } from "@/charts/shared/use-size"; +import { CopyToClipboardTextInput } from "@/components/copy-to-clipboard-text-input"; +import Flex from "@/components/flex"; +import { Radio } from "@/components/form"; +import { IconLink } from "@/components/links"; +import { Icon } from "@/icons"; +import useEvent from "@/utils/use-event"; +import { useI18n } from "@/utils/use-i18n"; import { t, Trans } from "@lingui/macro"; import { Box, @@ -12,6 +20,7 @@ import { } from "@mui/material"; import { ChangeEvent, ReactNode, RefObject, useEffect, useState } from "react"; + import { CHART_RESIZE_EVENT_TYPE } from "@/charts/shared/use-size"; import { CopyToClipboardTextInput } from "@/components/copy-to-clipboard-text-input"; import Flex from "@/components/flex"; @@ -40,7 +49,7 @@ export const PublishActions = (props: PublishActionProps) => { type TriggeredPopoverProps = { children: ReactNode; - renderTrigger: ( + renderTrigger?: ( setAnchorEl: (el: HTMLElement | undefined) => void ) => React.ReactNode; popoverProps: Omit; @@ -51,7 +60,7 @@ const TriggeredPopover = (props: TriggeredPopoverProps) => { const [anchorEl, setAnchorEl] = useState(); return ( <> - {renderTrigger(setAnchorEl)} + {renderTrigger && renderTrigger(setAnchorEl)} { ); }; -const Embed = ({ - chartWrapperRef, - configKey, - locale, - state, -}: PublishActionProps) => { - const [embedUrl, setEmbedUrl] = useState(""); - const [embedAEMUrl, setEmbedAEMUrl] = useState(""); - const [isResponsive, setIsResponsive] = useState(true); - const [isWithoutBorder, setIsWithoutBorder] = useState(false); +const Embed = ({ chartWrapperRef, configKey, locale }: PublishActionProps) => { const [iframeHeight, setIframeHeight] = useState(0); const handlePopoverOpen = useEvent(() => { @@ -85,26 +85,6 @@ const Embed = ({ } }); - useEffect(() => { - const { origin } = window.location; - setEmbedUrl( - `${origin}/${locale}/embed/${configKey}${isWithoutBorder ? "?disableBorder=true" : ""}` - ); - setEmbedAEMUrl( - `${origin}/api/embed-aem-ext/${locale}/${configKey}${isWithoutBorder ? "?disableBorder=true" : ""}` - ); - }, [configKey, locale, isWithoutBorder]); - - const handleResponsiveChange = useEvent( - (e: ChangeEvent) => { - setIsResponsive(e.target.value === "responsive"); - } - ); - - const handleStylingChange = useEvent((_, checked: boolean) => { - setIsWithoutBorder(checked); - }); - return ( )} > - -
- - Iframe Embed Code - - - - Use this link to embed the chart into other webpages. - - - - - - {state?.chartConfigs.length === 1 && - state.layout.type === "tab" && ( - - )} - - ${isResponsive ? `` : ""}`} - /> -
-
- - - Embed Code for "External Application" - - - - - Use this link to embed the chart without iframe tags. - - - -
-
+
); }; @@ -276,13 +186,6 @@ const EmbedToggleSwitch = ({ }; const Share = ({ configKey, locale }: PublishActionProps) => { - const [shareUrl, setShareUrl] = useState(""); - const i18n = useI18n(); - - useEffect(() => { - setShareUrl(`${window.location.origin}/${locale}/v/${configKey}`); - }, [configKey, locale]); - return ( { ); }} > - * + *": { mt: 4 } }}> - - - Share: - - - - - - + + + ); +}; + +type EmbedContentProps = { + iframeHeight: number; +} & Omit; + +export const EmbedContent = ({ + locale, + configKey, + iframeHeight, +}: EmbedContentProps) => { + const [embedUrl, setEmbedUrl] = useState(""); + const [embedAEMUrl, setEmbedAEMUrl] = useState(""); + const [isResponsive, setIsResponsive] = useState(true); + const [isWithoutBorder, setIsWithoutBorder] = useState(false); + useEffect(() => { + const { origin } = window.location; + setEmbedUrl( + `${origin}/${locale}/embed/${configKey}${isWithoutBorder ? "?disableBorder=true" : ""}` + ); + setEmbedAEMUrl( + `${origin}/api/embed-aem-ext/${locale}/${configKey}${isWithoutBorder ? "?disableBorder=true" : ""}` + ); + }, [configKey, locale, isWithoutBorder]); + + const handleResponsiveChange = useEvent( + (e: ChangeEvent) => { + setIsResponsive(e.target.value === "responsive"); + } + ); + + const handleStylingChange = useEvent((_, checked: boolean) => { + setIsWithoutBorder(checked); + }); + + return ( + +
+ + Iframe Embed Code + + + + Use this link to embed the chart into other webpages. + + + + + + + + ${isResponsive ? `` : ""}`} + /> +
+
+ + + Embed Code for "External Application" + + + + + Use this link to embed the chart without iframe tags. + + + +
+
+ ); +}; + +export const ShareContent = ({ + configKey, + locale, +}: Omit) => { + const [shareUrl, setShareUrl] = useState(""); + const i18n = useI18n(); + + useEffect(() => { + setShareUrl(`${window.location.origin}/${locale}/v/${configKey}`); + }, [configKey, locale]); + + return ( + * + *": { mt: 4 } }}> + + + Share: + + + + + - - - - Chart URL: - - - + + + + + Chart URL: + + - + ); }; diff --git a/app/configurator/components/chart-configurator.tsx b/app/configurator/components/chart-configurator.tsx index 696e0be89..e70a926ae 100644 --- a/app/configurator/components/chart-configurator.tsx +++ b/app/configurator/components/chart-configurator.tsx @@ -603,6 +603,7 @@ export const ChartConfigurator = ({ return ( + Chart Type @@ -752,7 +753,6 @@ export const ChartConfigurator = ({ {chartConfig.chartType !== "table" && ( )} - - Dataset + Datasets
{cube.title} @@ -233,7 +234,7 @@ export const DatasetsControlSection = () => { return ( - Data Sources{" "} + Datasets{" "} { ); })} - + {cubes.length === 1 ? ( ) : null} - + + Chart Type @@ -134,7 +135,6 @@ export const ChartConfiguratorTable = ({ items={columnFields} /> - ); }; diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po index d9ef8d9bd..2b7915e62 100644 --- a/app/locales/de/messages.po +++ b/app/locales/de/messages.po @@ -808,7 +808,7 @@ msgstr "Beim Abrufen möglicher Filter ist ein Fehler aufgetreten. Bitte versuch #: app/configurator/components/dataset-control-section.tsx msgid "controls.section.datasets.title" -msgstr "Datenquellen" +msgstr "Datensätze" #: app/configurator/components/annotators.tsx #: app/configurator/components/annotators.tsx @@ -1389,6 +1389,10 @@ msgstr "Duplizieren" msgid "login.chart.edit" msgstr "Bearbeiten" +#: app/login/components/profile-tables.tsx +msgid "login.chart.embed" +msgstr "Einbetten" + #: app/login/components/profile-tables.tsx msgid "login.chart.preview" msgstr "Vorschau" @@ -1397,6 +1401,10 @@ msgstr "Vorschau" msgid "login.chart.rename" msgstr "Umbenennen" +#: app/login/components/profile-tables.tsx +msgid "login.chart.share" +msgstr "Teilen" + #: app/login/components/profile-tables.tsx msgid "login.chart.view" msgstr "Anzeigen" diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po index 847a63c50..89d72425c 100644 --- a/app/locales/en/messages.po +++ b/app/locales/en/messages.po @@ -808,7 +808,7 @@ msgstr "An error happened while fetching possible filters, please retry later or #: app/configurator/components/dataset-control-section.tsx msgid "controls.section.datasets.title" -msgstr "Data Sources" +msgstr "Datasets" #: app/configurator/components/annotators.tsx #: app/configurator/components/annotators.tsx @@ -1389,6 +1389,10 @@ msgstr "Duplicate" msgid "login.chart.edit" msgstr "Edit" +#: app/login/components/profile-tables.tsx +msgid "login.chart.embed" +msgstr "Embed" + #: app/login/components/profile-tables.tsx msgid "login.chart.preview" msgstr "Preview" @@ -1397,6 +1401,10 @@ msgstr "Preview" msgid "login.chart.rename" msgstr "Rename" +#: app/login/components/profile-tables.tsx +msgid "login.chart.share" +msgstr "Share" + #: app/login/components/profile-tables.tsx msgid "login.chart.view" msgstr "View" diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po index ff342f819..7cf7209ed 100644 --- a/app/locales/fr/messages.po +++ b/app/locales/fr/messages.po @@ -808,7 +808,7 @@ msgstr "Une erreur s'est produite lors de la récupération des filtres possible #: app/configurator/components/dataset-control-section.tsx msgid "controls.section.datasets.title" -msgstr "Sources de données" +msgstr "Ensembles de données" #: app/configurator/components/annotators.tsx #: app/configurator/components/annotators.tsx @@ -1389,6 +1389,10 @@ msgstr "Dupliquer" msgid "login.chart.edit" msgstr "Editer" +#: app/login/components/profile-tables.tsx +msgid "login.chart.embed" +msgstr "Intégrer" + #: app/login/components/profile-tables.tsx msgid "login.chart.preview" msgstr "Aperçu" @@ -1397,6 +1401,10 @@ msgstr "Aperçu" msgid "login.chart.rename" msgstr "Renommer" +#: app/login/components/profile-tables.tsx +msgid "login.chart.share" +msgstr "Partager" + #: app/login/components/profile-tables.tsx msgid "login.chart.view" msgstr "Voir" diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po index c0d9ee9c1..e7e4aecab 100644 --- a/app/locales/it/messages.po +++ b/app/locales/it/messages.po @@ -1109,7 +1109,7 @@ msgstr "Dimensioni condivise" #: app/components/chart-footnotes.tsx msgid "dataset.footnotes.dataset" -msgstr "Insieme di dati" +msgstr "Set di dati" #: app/components/chart-footnotes.tsx msgid "dataset.footnotes.updated" @@ -1389,6 +1389,10 @@ msgstr "Duplicare" msgid "login.chart.edit" msgstr "Modifica" +#: app/login/components/profile-tables.tsx +msgid "login.chart.embed" +msgstr "Incorpora" + #: app/login/components/profile-tables.tsx msgid "login.chart.preview" msgstr "Anteprima" @@ -1397,6 +1401,10 @@ msgstr "Anteprima" msgid "login.chart.rename" msgstr "Rinominare" +#: app/login/components/profile-tables.tsx +msgid "login.chart.share" +msgstr "Condividi" + #: app/login/components/profile-tables.tsx msgid "login.chart.view" msgstr "Mostra"