diff options
Diffstat (limited to 'plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue')
| -rw-r--r-- | plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue | 104 |
1 files changed, 60 insertions, 44 deletions
diff --git a/plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue b/plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue index 3ced9730a1..2953b3a5fc 100644 --- a/plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue +++ b/plugins/Widgetize/vue/src/ExportWidget/ExportWidget.vue @@ -10,46 +10,16 @@ <h2> <EnrichedHeadline>{{ title }}</EnrichedHeadline> </h2> - <p>With Matomo, you can <a - rel="noreferrer noopener" - target="_blank" - href="https://matomo.org/docs/embed-piwik-report/" - >export your Web Analytics reports</a> on your blog, website, or intranet dashboard... - in one click.</p> + <p v-html="$sanitize(intro)"></p> </div> <ContentBlock content-title="Authentication"> - <p> - If you want your widgets to be viewable by everybody, you first have to set the 'view' - permissions to the anonymous user in the <a - href="index.php?module=UsersManager" - rel="noreferrer noopener" - target="_blank" - >Users Management section</a>. - <br />Alternatively, if you are publishing widgets on a password protected or private page, - you don't necessarily have to allow 'anonymous' to view your reports. In this case, you can - add the secret <code>token_auth</code> parameter in the widget URL. - You can manage your auth tokens on your <a - rel="noreferrer noopener" - target="_blank" - :href="linkTo({'module': 'UsersManager', 'action': 'userSecurity'})" - >Security page</a>. - </p> + <p v-html="$sanitize(viewableAnonymously)"></p> </ContentBlock> <ContentBlock content-title="Widgetize dashboards"> <div> <p> - You can also display the full Matomo dashboard in your application or website in an - IFRAME (<a - rel="noreferrer noopener" - target="_blank" - :href="dashboardUrl" - >see example</a>). - The date parameter can be set to a specific calendar date, "today", or "yesterday". The - period parameter can be set to "day", "week", "month", or - "year". - The language parameter can be set to the language code of a translation, such as - language=fr. For example, for idSite=1 and date=yesterday, you can write: - <br /> + <span v-html="$sanitize(displayInIframe)"></span> + <br/> </p> <pre v-text="dashboardCode" @@ -57,13 +27,7 @@ ></pre> <p> <br /> - You can also widgetize the all websites dashboard in an IFRAME - (<a - rel="noreferrer noopener" - target="_blank" - id="linkAllWebsitesDashboardUrl" - :href="allWebsitesDashboardUrl" - >see example</a>) + <span v-html="$sanitize(displayInIframeAllSites)"></span> <br /> </p> <pre @@ -72,9 +36,9 @@ ></pre> </div> </ContentBlock> - <ContentBlock content-title="Widgetize reports"> + <ContentBlock :content-title="translate('Widgetize_Reports')"> <div> - <p>Select a report, and copy paste in your page the embed code below the widget:</p> + <p>{{ translate('Widgetize_SelectAReport') }}</p> <div> <WidgetPreview /> </div> @@ -87,6 +51,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; import { + translate, Matomo, ContentIntro, EnrichedHeadline, @@ -156,12 +121,63 @@ export default defineComponent({ allWebsitesDashboardCode() { return getIframeCode(this.allWebsitesDashboardUrl); }, + intro() { + return translate( + 'Widgetize_Intro', + `<a + rel="noreferrer noopener" + target="_blank" + href="https://matomo.org/docs/embed-piwik-report/" + >`, + '</a>', + ); + }, + viewableAnonymously() { + return translate( + 'Widgetize_ViewableAnonymously', + `<a + href="index.php?module=UsersManager" + rel="noreferrer noopener" + target="_blank" + >`, + '</a>', + `<a + rel="noreferrer noopener" + target="_blank" + href="${this.linkTo({ module: 'UsersManager', action: 'userSecurity' })}" + >`, + '</a>', + ); + }, + displayInIframe() { + return translate( + 'Widgetize_DisplayDashboardInIframe', + `<a + rel="noreferrer noopener" + target="_blank" + href="${this.dashboardUrl}" + >`, + '</a>', + ); + }, + displayInIframeAllSites() { + return translate( + 'Widgetize_DisplayDashboardInIframeAllSites', + `<a + rel="noreferrer noopener" + target="_blank" + id="linkAllWebsitesDashboardUrl" + href="${this.allWebsitesDashboardUrl}" + >`, + '</a>', + ); + }, }, methods: { linkTo(params: QueryParameters) { return `?${MatomoUrl.stringify({ ...MatomoUrl.urlParsed.value, - params, + ...params, })}`; }, }, |