https://cdn.test.de/static/scripts/chunks/FondsChart-FondsChart-js.d948a046a0678a72de89.min.js

1"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([["FondsChart-FondsChart-js","FondsChart-FondsChartHowTo-js"],{2584:function(t,e,o){var s=o(78812),i=o(77477);e.default=class{constructor(t){this.node=t,this.type=t.querySelector(".fonds-chart__chart").getAttribute("data-type"),this.show(),this.addEventListeners()}addEventListeners(){this.howTo.addEventListener("click",(t=>{t.target===this.howTo&&this.remove()})),this.howTo.addEventListener("transitionend",(()=>{this.howTo.classList.contains("fonds-chart__how-to--fade-in")||(this.howTo.classList.remove("fonds-chart__how-to--visible"),i.A.enableScrolling(),document.body.removeChild(this.howTo))})),this.howToCloseButton.addEventListener("click",this.remove.bind(this))}show(){this.addHtml(),this.howToCloseButton=this.howTo.querySelector(".fonds-chart__how-to-close"),i.A.disableScrolling(!0),setTimeout((()=>{this.howTo.classList.add("fonds-chart__how-to--fade-in"),this.howToCloseButton.focus()}),0)}remove(){this.howTo.classList.remove("fonds-chart__how-to--fade-in")}addHtml(){this.howTo=document.createElement("div"),this.howTo.classList.add("fonds-chart__how-to","fonds-chart__how-to--","fonds-chart__how-to--visible");let t="";"fondsperformance"===this.type?t='\n\t\t\t\t<p class="p-text p-text--medium fonds-chart__how-to-text fonds-chart__how-to-text--performance">Das Diagramm zeigt, wie sich der Fonds über die Zeit entwickelt hat. Zum Vergleich dient der Referenzindex der Fondsgruppe.</p>\n\t\t\t\t<div class="fonds-chart__how-to-image fonds-chart__how-to-image--performance">\n\t\t\t\t\t<img width="1168" height="622"  class="image fonds-chart__how-to-desktop" src="/static/images/modules/fondschart/tooltip-performance-desktop.jpg" alt="So funktioniert die interaktive Grafik" loading="lazy">\n\t\t\t\t\t<img width="321" height="582" class="image fonds-chart__how-to-mobile" src="/static/images/modules/fondschart/tooltip-performance-mobile.jpg" alt="So funktioniert die interaktive Grafik" loading="lazy">\n\t\t\t\t</div>\n\t\t\t':"scatter"===this.type?t='\n\t\t\t\t<p class="p-text p-text--medium fonds-chart__how-to-text fonds-chart__how-to-text--scatter">Das Diagramm zeigt die Chancen und Risiken des aktuellen Fonds sowie anderer Fonds derselben Gruppe. Je weiter links in Fonds im Diagramm liegt, desto geringer war sein Risiko. Je weiter oben, desto höher waren seine Chancen. Der Bewertungszeitraum beträgt fünf Jahre.</p>\n\t\t\t\t<div class="fonds-chart__how-to-image fonds-chart__how-to-image--scatterplot">\n\t\t\t\t\t<img width="1162" height="526"  class="image fonds-chart__how-to-desktop" src="/static/images/modules/fondschart/tooltip-scatterplot-desktop.jpg" alt="So funktioniert die interaktive Grafik" loading="lazy">\n\t\t\t\t\t<img width="320" height="407" class="image fonds-chart__how-to-mobile" src="/static/images/modules/fondschart/tooltip-scatterplot-mobile.jpg" alt="So funktioniert die interaktive Grafik" loading="lazy">\n\t\t\t\t</div>\n\t\t\t':"drawdown"===this.type&&(t='\n\t\t\t\t<p class="p-text p-text--medium fonds-chart__how-to-text fonds-chart__how-to-text--drawdown">Das Diagramm hilft die Verlustrisiken eines Fonds zu verstehen. Es zeigt für den jeweils ausgewählten Zeitraum an, wie weit ein Fonds nach einem zuvor erreichten Höchststand wieder eingebrochen ist. Liegt der Fonds auf der Nulllinie, hat er einen neuen Höchststand erreicht. Sofern vorhanden, dient der Referenzindex der Fondsgruppe zum Vergleich.</p>\n\t\t\t\t<div class="fonds-chart__how-to-image fonds-chart__how-to-image--drawdown">\n\t\t\t\t\t<img width="1150" height="548"  class="image fonds-chart__how-to-desktop" src="/static/images/modules/fondschart/tooltip-drawdown-desktop.jpg" alt="So funktioniert die interaktive Grafik" loading="lazy">\n\t\t\t\t\t<img width="321" height="531" class="image fonds-chart__how-to-mobile" src="/static/images/modules/fondschart/tooltip-drawdown-mobile.jpg" alt="So funktioniert die interaktive Grafik" loading="lazy">\n\t\t\t\t</div>\n\t\t\t'),this.howTo.innerHTML=`\n\t\t\t<div class="fonds-chart__how-to-inner">\n\t\t\t\t<button class="fonds-chart__how-to-close btn btn--icon-only">${s.default.getIcon("close",["white"]).outerHTML}</button>\n\t\t\t\t<p class="h2 fonds-chart__how-to-headline">So funktioniert die interaktive Grafik</p>\n\t\t\t\t${t}\n\t\t\t</div>\n\t\t`,document.body.appendChild(this.howTo)}}},45887:function(t,e,o){var s=o(19588),i=o(2584);e.default=class{constructor(t){this.node=t,this.chartContainer=t.querySelector(".fonds-chart__chart"),this.howToToggle=this.node.querySelector(".fonds-chart__help"),this.chartContainer&&this.renderChart(this.chartContainer),this.howToToggle&&this.howToToggle.addEventListener("click",this.addHowTo.bind(this))}addHowTo(){new i.default(this.node)}async renderChart(t){const{type:e}=t.dataset;switch(e){case"fondsperformance":{const{default:e}=await Promise.all([o.e("vendors-node_modules_highcharts_highcharts_js"),o.e("vendors-node_modules_vue_dist_vue_esm-browser_prod_js"),o.e("vendors-node_modules_highcharts_highstock_js-node_modules_highcharts_modules_accessibility_js"),o.e("vendors-node_modules_vuepic_vue-datepicker_dist_vue-datepicker_js-node_modules_date-fns_local-823fa2"),o.e("FondsChart-FondsPerformanceChart-js")]).then(o.bind(o,58509));new e(t);break}case"scatter":{const{default:e}=await Promise.all([o.e("vendors-node_modules_highcharts_highcharts_js"),o.e("vendors-node_modules_highcharts_highstock_js-node_modules_highcharts_modules_accessibility_js"),o.e("FondsChart-FondsScatterplotChart-js")]).then(o.bind(o,32636));new e(t);break}case"column":{const{default:e}=await Promise.all([o.e("vendors-node_modules_highcharts_highcharts_js"),o.e("vendors-node_modules_highcharts_highstock_js-node_modules_highcharts_modules_accessibility_js"),o.e("FondsChart-FondsColumnChart-js")]).then(o.bind(o,87129));new e(t);break}case"drawdown":{const{default:e}=await Promise.all([o.e("vendors-node_modules_highcharts_highcharts_js"),o.e("vendors-node_modules_vue_dist_vue_esm-browser_prod_js"),o.e("vendors-node_modules_highcharts_highstock_js-node_modules_highcharts_modules_accessibility_js"),o.e("vendors-node_modules_vuepic_vue-datepicker_dist_vue-datepicker_js-node_modules_date-fns_local-823fa2"),o.e("FondsChart-FondsDrawdownChart-js")]).then(o.bind(o,55985));new e(t);break}default:s.A.log(`FondsChart: no type found "${e}"`)}}}}}]);