framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
2 lines (1 loc) • 10 kB
JavaScript
(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var a=e.$,n=e.utils,r=(e.getDevice,e.getSupport,e.Class),o=(e.Modal,e.ConstructorMethods);e.ModalMethods;function i(e){this.wrapped=e}function s(e){var t,a;function n(t,a){try{var o=e[t](a),s=o.value,l=s instanceof i;Promise.resolve(l?s.wrapped:s).then((function(e){l?n("return"===t?"return":"next",e):r(o.done?"return":"normal",e)}),(function(e){n("throw",e)}))}catch(e){r("throw",e)}}function r(e,r){switch(e){case"return":t.resolve({value:r,done:!0});break;case"throw":t.reject(r);break;default:t.resolve({value:r,done:!1})}(t=t.next)?n(t.key,t.arg):a=null}this._invoke=function(e,r){return new Promise((function(o,i){var s={key:e,arg:r,resolve:o,reject:i,next:null};a?a=a.next=s:(t=a=s,n(e,r))}))},"function"!=typeof e.return&&(this.return=void 0)}function l(e,t){return(l=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}s.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},s.prototype.next=function(e){return this._invoke("next",e)},s.prototype.throw=function(e){return this._invoke("throw",e)},s.prototype.return=function(e){return this._invoke("return",e)};var c=n.extend,d=n.deleteProps,h=function(e){var t,n;function r(t,n){var r;void 0===n&&(n={});var o=u(r=e.call(this,n,[t])||this),i=c({},t.params.areaChart);o.useModulesParams(i),o.params=c(i,n);var s=o.params.el;if(!s)return o||u(r);var l=a(s);return 0===l.length?o||u(r):l[0].f7AreaChart?l[0].f7AreaChart||u(r):(c(o,{app:t,$el:l,el:l&&l[0],currentIndex:null,hiddenDatasets:[],f7Tooltip:null,linesOffsets:null}),l[0].f7AreaChart=o,o.useModules(),o.onMouseEnter=o.onMouseEnter.bind(o),o.onMouseMove=o.onMouseMove.bind(o),o.onMouseLeave=o.onMouseLeave.bind(o),o.onLegendClick=o.onLegendClick.bind(o),o.init(),o||u(r))}n=e,(t=r).prototype=Object.create(n.prototype),t.prototype.constructor=t,l(t,n);var o=r.prototype;return o.getVisibleLabels=function(){var e=this.params,t=e.maxAxisLabels,a=e.axisLabels;if(!t||a.length<=t)return a;var n=Math.ceil(a.length/t);return a.filter((function(e,t){return t%n==0}))},o.getSummValues=function(){var e=this.params.datasets,t=this.hiddenDatasets,a=[];return e.filter((function(e,a){return!t.includes(a)})).forEach((function(e){e.values.forEach((function(e,t){a[t]||(a[t]=0),a[t]+=e}))})),a},o.getChartData=function(){var e=this.params,t=e.datasets,a=e.lineChart,n=e.width,r=e.height,o=this.hiddenDatasets,i=[];if(!t.length)return i;var s=t[0].values.map((function(){return 0})),l=0;return a?t.filter((function(e,t){return!o.includes(t)})).forEach((function(e){var t=e.values,a=Math.max.apply(Math,t);a>l&&(l=a)})):l=Math.max.apply(Math,this.getSummValues()),t.filter((function(e,t){return!o.includes(t)})).forEach((function(e){var t=e.label,o=e.values,u=e.color,c=o.map((function(e,t){s[t]+=e;var i=a?e:s[t],u=t/(o.length-1)*n,c=r-i/l*r;return a?(0===t?"M":"L")+u+","+c:u+" "+c}));a||c.push(n+" "+r+" 0 "+r),i.push({label:t,points:c.join(" "),color:u})})),i.reverse()},o.getVerticalLines=function(){var e=this.params,t=e.datasets,a=e.width,n=[];if(!t.length)return n;var r=t[0].values;return r.forEach((function(e,t){var o=t/(r.length-1)*a;n.push(o)})),n},o.toggleDataset=function(e){var t=this,a=this.hiddenDatasets;this.params.toggleDatasets&&(a.includes(e)?a.splice(a.indexOf(e),1):a.push(e),this.$legendEl&&(this.$legendEl.find(".area-chart-legend-item").removeClass("area-chart-legend-item-hidden"),a.forEach((function(e){t.$legendEl.find('.area-chart-legend-item[data-index="'+e+'"]').addClass("area-chart-legend-item-hidden")}))),this.update({},!0))},o.formatAxisLabel=function(e){var t=this.params.formatAxisLabel;return t?t.call(this,e):e},o.formatLegendLabel=function(e){var t=this.params.formatLegendLabel;return t?t.call(this,e):e},o.calcLinesOffsets=function(){var e=this.svgEl.querySelectorAll("line");this.linesOffsets=[];for(var t=0;t<e.length;t+=1)this.linesOffsets.push(e[t].getBoundingClientRect().left)},o.formatTooltip=function(){var e=this,t=e.currentIndex,a=e.hiddenDatasets,n=e.params,r=n.datasets,o=n.axisLabels,i=n.formatTooltip,s=n.formatTooltipTotal,l=n.formatTooltipAxisLabel,u=n.formatTooltipDataset;if(null===t)return"";var c=0,d=r.filter((function(e,t){return!a.includes(t)})).map((function(e){return{color:e.color,label:e.label,value:e.values[t]}}));if(d.forEach((function(e){c+=e.value})),i)return i({index:t,total:c,datasets:d});var h=l?l.call(e,o[t]):this.formatAxisLabel(o[t]);return h||(h=""),'\n <div class="area-chart-tooltip-label">'+h+'</div>\n <div class="area-chart-tooltip-total">'+(s?s.call(e,c):c)+"</div>\n "+(d.length>0?'\n <ul class="area-chart-tooltip-list">\n '+d.map((function(t){var a=t.label,n=t.color,r=t.value;return'\n <li><span style="background-color: '+n+';"></span>'+(u?u.call(e,a,r,n):(a?a+": ":"")+r)+"</li>\n "})).join("")+"\n </ul>":"")+"\n "},o.setTooltip=function(){var e=this,t=e.app,a=e.el,n=e.svgEl,r=e.hiddenDatasets,o=e.currentIndex,i=e.params,s=i.tooltip,l=i.datasets;if(s){if(l.filter((function(e,t){return!r.includes(t)})).length>0)return null===o||e.f7Tooltip?void(e.f7Tooltip&&e.f7Tooltip.hide&&e.f7Tooltip.show&&(null!==o?(e.f7Tooltip.setText(e.formatTooltip()),e.f7Tooltip.setTargetEl(n.querySelector('line[data-index="'+o+'"]')),e.f7Tooltip.show()):e.f7Tooltip.hide())):(e.f7Tooltip=t.tooltip.create({trigger:"manual",containerEl:a,targetEl:n.querySelector('line[data-index="'+o+'"]'),text:e.formatTooltip(),cssClass:"area-chart-tooltip"}),void(e.f7Tooltip&&e.f7Tooltip.show&&e.f7Tooltip.show()));e.f7Tooltip&&e.f7Tooltip.hide&&e.f7Tooltip.hide()}},o.setCurrentIndex=function(e){e!==this.currentIndex&&(this.currentIndex=e,this.$el.trigger("areachart:select",{index:e}),this.emit("local::select areaChartSelect",this,e),this.$svgEl.find("line").removeClass("area-chart-current-line"),this.$svgEl.find('line[data-index="'+e+'"]').addClass("area-chart-current-line"),this.setTooltip())},o.onLegendClick=function(e){var t=parseInt(a(e.target).closest(".area-chart-legend-item").attr("data-index"),10);this.toggleDataset(t)},o.onMouseEnter=function(){this.calcLinesOffsets()},o.onMouseMove=function(e){var t=this;t.linesOffsets||t.calcLinesOffsets();var a=e.pageX;void 0===a&&(a=0);var n=t.linesOffsets.map((function(e){return Math.abs(a-e)})),r=Math.min.apply(Math,n),o=n.indexOf(r);t.setCurrentIndex(o)},o.onMouseLeave=function(){this.setCurrentIndex(null)},o.attachEvents=function(){var e=this.svgEl,t=this.$el;e&&(e.addEventListener("mouseenter",this.onMouseEnter),e.addEventListener("mousemove",this.onMouseMove),e.addEventListener("mouseleave",this.onMouseLeave),t.on("click",".area-chart-legend-item",this.onLegendClick))},o.detachEvents=function(){var e=this.svgEl,t=this.$el;e&&(e.removeEventListener("mouseenter",this.onMouseEnter),e.removeEventListener("mousemove",this.onMouseMove),e.removeEventListener("mouseleave",this.onMouseLeave),t.off("click",".area-chart-legend-item",this.onLegendClick))},o.render=function(){var e=this,t=e.params,a=t.lineChart,n=t.toggleDatasets,r=t.width,o=t.height,i=t.axis,s=t.axisLabels,l=t.legend,u=t.datasets,c=e.getChartData(),d=e.getVerticalLines(),h=e.getVisibleLabels(),f=n?"button":"span";return $jsx("div",null,$jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:r,height:o,viewBox:"0 0 "+r+" "+o,preserveAspectRatio:"none"},c.map((function(e){return a?$jsx("path",{stroke:e.color,"fill-rule":"evenodd",d:e.points}):$jsx("polygon",{fill:e.color,"fill-rule":"evenodd",points:e.points})})),d.map((function(e,t){return $jsx("line",{"data-index":t,fill:"#000",x1:e,y1:0,x2:e,y2:o})}))),i&&$jsx("div",{class:"area-chart-axis"},s.map((function(t){return $jsx("span",null,h.includes(t)&&$jsx("span",null,e.formatAxisLabel(t)))}))),l&&$jsx("div",{class:"area-chart-legend"},u.map((function(t,a){return $jsx(f,{"data-index":a,class:"area-chart-legend-item "+(n?"area-chart-legend-button":""),_type:n?"button":void 0},$jsx("span",{style:"background-color: "+t.color}),e.formatLegendLabel(t.label))}))))},o.update=function(e,t){void 0===e&&(e={}),void 0===t&&(t=!1);var n=this,r=n.params;if(Object.keys(e).forEach((function(t){void 0!==e[t]&&(r[t]=e[t])})),0===n.$svgEl.length)return n;n.detachEvents(),n.$svgEl.remove(),t||(n.$axisEl.remove(),n.$legendEl.remove());var o=a(n.render()),i=o.find("svg");if(c(n,{svgEl:i&&i[0],$svgEl:i}),!t){var s=o.find(".area-chart-axis"),l=o.find(".area-chart-legend");c(n,{$axisEl:s,$legendEl:l}),n.$el.append(s),n.$el.append(l)}return n.$el.prepend(i),n.attachEvents(),n},o.init=function(){var e=this,t=a(e.render()),n=t.find("svg"),r=t.find(".area-chart-axis"),o=t.find(".area-chart-legend");return c(e,{svgEl:n&&n[0],$svgEl:n,$axisEl:r,$legendEl:o}),e.$el.append(n),e.$el.append(r),e.$el.append(o),e.attachEvents(),e},o.destroy=function(){var e=this;e.$el&&!e.destroyed&&(e.$el.trigger("piechart:beforedestroy"),e.emit("local::beforeDestroy areaChartBeforeDestroy",e),e.detachEvents(),e.$svgEl.remove(),e.$axisEl.remove(),e.$legendEl.remove(),e.f7Tooltip&&e.f7Tooltip.destroy&&e.f7Tooltip.destroy(),delete e.$el[0].f7AreaChart,d(e),e.destroyed=!0)},r}(r),f={name:"areaChart",params:{areaChart:{el:null,lineChart:!1,datasets:[],axis:!1,axisLabels:[],tooltip:!1,legend:!1,toggleDatasets:!1,width:640,height:320,maxAxisLabels:8,formatAxisLabel:null,formatLegendLabel:null,formatTooltip:null,formatTooltipAxisLabel:null,formatTooltipTotal:null,formatTooltipDataset:null}},create:function(){var e=this;e.areaChart=o({defaultSelector:".area-chart",constructor:h,app:e,domProp:"f7AreaChart"}),e.areaChart.update=function(t,n){if(0!==a(t).length){var r=e.areaChart.get(t);if(r)return r.update(n),r}}}};if(t){if(e.prototype.modules&&e.prototype.modules[f.name])return;e.use(f),e.instance&&(e.instance.useModuleParams(f,e.instance.params),e.instance.useModule(f))}return f}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))