framework7 6.3.16 → 7.0.0-beta.12

package/components/pie-chart/pie-chart-class.js

@@ -0,0 +1,264 @@
+import $ from '../../shared/dom7.js';
+import { extend, deleteProps } from '../../shared/utils.js';
+import Framework7Class from '../../shared/class.js';
+/** @jsx $jsx */
+
+import $jsx from '../../shared/$jsx.js';
+
+class PieChart extends Framework7Class {
+  constructor(app, params = {}) {
+    super(params, [app]);
+    const self = this;
+    const defaults = extend({}, app.params.pieChart); // Extend defaults with modules params
+
+    self.useModulesParams(defaults);
+    self.params = extend(defaults, params);
+    const {
+      el
+    } = self.params;
+    if (!el) return self;
+    const $el = $(el);
+    if ($el.length === 0) return self;
+    if ($el[0].f7PieChart) return $el[0].f7PieChart;
+    extend(self, {
+      app,
+      $el,
+      el: $el && $el[0],
+      currentIndex: null,
+      f7Tooltip: null
+    });
+    $el[0].f7PieChart = self; // Install Modules
+
+    self.useModules();
+    self.showTooltip = self.showTooltip.bind(this);
+    self.hideTooltip = self.hideTooltip.bind(this);
+    self.init();
+    return self;
+  }
+
+  getSummValue() {
+    const {
+      datasets
+    } = this.params;
+    let summ = 0;
+    datasets.map(d => d.value || 0).forEach(value => {
+      summ += value;
+    });
+    return summ;
+  }
+
+  getPaths() {
+    const {
+      datasets,
+      size
+    } = this.params;
+    const paths = [];
+    let cumulativePercentage = 0;
+
+    function getCoordinatesForPercentage(percentage) {
+      const x = Math.cos(2 * Math.PI * percentage) * (size / 3);
+      const y = Math.sin(2 * Math.PI * percentage) * (size / 3);
+      return [x, y];
+    }
+
+    datasets.forEach(({
+      value,
+      label,
+      color
+    }) => {
+      const percentage = value / this.getSummValue();
+      const [startX, startY] = getCoordinatesForPercentage(cumulativePercentage);
+      cumulativePercentage += percentage;
+      const [endX, endY] = getCoordinatesForPercentage(cumulativePercentage);
+      const largeArcFlag = percentage > 0.5 ? 1 : 0;
+      const points = [`M ${startX} ${startY}`, // Move
+      `A ${size / 3} ${size / 3} 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
+      'L 0 0' // Line
+      ].join(' ');
+      paths.push({
+        points,
+        label,
+        color
+      });
+    });
+    return paths;
+  }
+
+  formatTooltipText() {
+    const {
+      datasets
+    } = this.params;
+    const {
+      currentIndex
+    } = this;
+    if (currentIndex === null) return '';
+    const {
+      value,
+      label,
+      color
+    } = datasets[currentIndex];
+    const percentage = value / this.getSummValue() * 100;
+
+    const round = v => {
+      if (parseInt(v, 10) === v) return v;
+      return Math.round(v * 100) / 100;
+    };
+
+    if (this.params.formatTooltip) {
+      return this.params.formatTooltip.call(this, {
+        index: currentIndex,
+        value,
+        label,
+        color,
+        percentage
+      });
+    }
+
+    const tooltipText = `${label ? `${label}: ` : ''}${round(value)} (${round(percentage)}%)`;
+    return `
+      <div class="pie-chart-tooltip-label">
+        <span class="pie-chart-tooltip-color" style="background-color: ${color};"></span> ${tooltipText}
+      </div>
+    `;
+  }
+
+  setTooltip() {
+    const self = this;
+    const {
+      currentIndex,
+      el,
+      app,
+      params
+    } = self;
+    const {
+      tooltip
+    } = params;
+    if (currentIndex === null && !self.f7Tooltip) return;
+    if (!tooltip || !el) return;
+
+    if (currentIndex !== null && !self.f7Tooltip) {
+      self.f7Tooltip = app.tooltip.create({
+        trigger: 'manual',
+        containerEl: el,
+        targetEl: el.querySelector(`path[data-index="${currentIndex}"]`),
+        text: self.formatTooltipText(),
+        cssClass: 'pie-chart-tooltip'
+      });
+      self.f7Tooltip.show();
+      return;
+    }
+
+    if (!self.f7Tooltip) return;
+
+    if (currentIndex !== null) {
+      self.f7Tooltip.setText(self.formatTooltipText());
+      self.f7Tooltip.setTargetEl(el.querySelector(`path[data-index="${currentIndex}"]`));
+      self.f7Tooltip.show();
+    } else {
+      self.f7Tooltip.hide();
+    }
+  }
+
+  render() {
+    const self = this;
+    const size = self.params.size;
+    const paths = self.getPaths();
+    return $jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      viewBox: `-${size / 3} -${size / 3} ${size * 2 / 3} ${size * 2 / 3}`,
+      style: "transform: rotate(-90deg)"
+    }, paths.map((path, index) => $jsx("path", {
+      d: path.points,
+      fill: path.color,
+      "data-index": index
+    })));
+  }
+
+  update(newParams = {}) {
+    const self = this;
+    const {
+      params
+    } = self;
+    Object.keys(newParams).forEach(param => {
+      if (typeof newParams[param] !== 'undefined') {
+        params[param] = newParams[param];
+      }
+    });
+    if (self.$svgEl.length === 0) return self;
+    self.$svgEl.remove();
+    delete self.$svgEl.f7PieChart;
+    const $svgEl = $(self.render()).eq(0);
+    $svgEl.f7PieChart = self;
+    extend(self, {
+      $svgEl,
+      svgEl: $svgEl && $svgEl[0]
+    });
+    self.$el.append($svgEl);
+    return self;
+  }
+
+  setCurrentIndex(index) {
+    const self = this;
+    if (index === self.currentIndex) return;
+    const {
+      datasets
+    } = self.params;
+    self.currentIndex = index;
+    self.$el.trigger('piechart:select', {
+      index,
+      dataset: datasets[index]
+    });
+    self.emit('local::select pieChartSelect', self, index, datasets[index]);
+  }
+
+  showTooltip(e) {
+    const newIndex = parseInt(e.target.getAttribute('data-index'), 10);
+    this.setCurrentIndex(newIndex);
+    this.$svgEl.find('path').removeClass('pie-chart-hidden').forEach((el, index) => {
+      if (index !== this.currentIndex) $(el).addClass('pie-chart-hidden');
+    });
+    this.setTooltip();
+  }
+
+  hideTooltip() {
+    this.setCurrentIndex(null);
+    this.$svgEl.find('path').removeClass('pie-chart-hidden');
+    this.setTooltip();
+  }
+
+  init() {
+    const self = this;
+    const $svgEl = $(self.render()).eq(0);
+    $svgEl.f7PieChart = self;
+    extend(self, {
+      $svgEl,
+      svgEl: $svgEl && $svgEl[0]
+    });
+    self.$el.append($svgEl);
+    self.$el.on('click mouseenter', 'path', self.showTooltip, true);
+    self.$el.on('mouseleave', 'path', self.hideTooltip, true);
+    return self;
+  }
+
+  destroy() {
+    const self = this;
+    if (!self.$el || self.destroyed) return;
+    self.$el.trigger('piechart:beforedestroy');
+    self.emit('local::beforeDestroy pieChartBeforeDestroy', self);
+    self.$el.off('click mouseenter', 'path', self.showTooltip, true);
+    self.$el.off('mouseleave', 'path', self.hideTooltip, true);
+    self.$svgEl.remove();
+
+    if (self.f7Tooltip && self.f7Tooltip.destroy) {
+      self.f7Tooltip.destroy();
+    }
+
+    delete self.$el[0].f7PieChart;
+    deleteProps(self);
+    self.destroyed = true;
+  }
+
+}
+
+export default PieChart;

package/components/pie-chart/pie-chart.js

@@ -1 +1,35 @@
-(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var r=t.$,o=t.utils,n=(t.getDevice,t.getSupport,t.Class),i=(t.Modal,t.ConstructorMethods);t.ModalMethods;function a(t){this.wrapped=t}function s(t){var e,r;function o(e,r){try{var i=t[e](r),s=i.value,l=s instanceof a;Promise.resolve(l?s.wrapped:s).then((function(t){l?o("return"===e?"return":"next",t):n(i.done?"return":"normal",t)}),(function(t){o("throw",t)}))}catch(t){n("throw",t)}}function n(t,n){switch(t){case"return":e.resolve({value:n,done:!0});break;case"throw":e.reject(n);break;default:e.resolve({value:n,done:!1})}(e=e.next)?o(e.key,e.arg):r=null}this._invoke=function(t,n){return new Promise((function(i,a){var s={key:t,arg:n,resolve:i,reject:a,next:null};r?r=r.next=s:(e=r=s,o(t,n))}))},"function"!=typeof t.return&&(this.return=void 0)}function l(t,e){return(l=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function u(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}s.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},s.prototype.next=function(t){return this._invoke("next",t)},s.prototype.throw=function(t){return this._invoke("throw",t)},s.prototype.return=function(t){return this._invoke("return",t)};var p=o.extend,c=o.deleteProps,h=function(t){var e,o;function n(e,o){var n;void 0===o&&(o={});var i=u(n=t.call(this,o,[e])||this),a=p({},e.params.pieChart);i.useModulesParams(a),i.params=p(a,o);var s=i.params.el;if(!s)return i||u(n);var l=r(s);return 0===l.length?i||u(n):l[0].f7PieChart?l[0].f7PieChart||u(n):(p(i,{app:e,$el:l,el:l&&l[0],currentIndex:null,f7Tooltip:null}),l[0].f7PieChart=i,i.useModules(),i.showTooltip=i.showTooltip.bind(u(n)),i.hideTooltip=i.hideTooltip.bind(u(n)),i.init(),i||u(n))}o=t,(e=n).prototype=Object.create(o.prototype),e.prototype.constructor=e,l(e,o);var i=n.prototype;return i.getSummValue=function(){var t=this.params.datasets,e=0;return t.map((function(t){return t.value||0})).forEach((function(t){e+=t})),e},i.getPaths=function(){var t=this,e=this.params,r=e.datasets,o=e.size,n=[],i=0;function a(t){return[Math.cos(2*Math.PI*t)*(o/3),Math.sin(2*Math.PI*t)*(o/3)]}return r.forEach((function(e){var r=e.value,s=e.label,l=e.color,u=r/t.getSummValue(),p=a(i),c=p[0],h=p[1],f=a(i+=u),d=f[0],v=f[1],m=["M "+c+" "+h,"A "+o/3+" "+o/3+" 0 "+(u>.5?1:0)+" 1 "+d+" "+v,"L 0 0"].join(" ");n.push({points:m,label:s,color:l})})),n},i.formatTooltipText=function(){var t=this.params.datasets,e=this.currentIndex;if(null===e)return"";var r=t[e],o=r.value,n=r.label,i=r.color,a=o/this.getSummValue()*100,s=function(t){return parseInt(t,10)===t?t:Math.round(100*t)/100};return this.params.formatTooltip?this.params.formatTooltip.call(this,{index:e,value:o,label:n,color:i,percentage:a}):'\n      <div class="pie-chart-tooltip-label">\n        <span class="pie-chart-tooltip-color" style="background-color: '+i+';"></span> '+((n?n+": ":"")+s(o)+" ("+s(a)+"%)")+"\n      </div>\n    "},i.setTooltip=function(){var t=this,e=t.currentIndex,r=t.el,o=t.app,n=t.params.tooltip;if((null!==e||t.f7Tooltip)&&n&&r)return null===e||t.f7Tooltip?void(t.f7Tooltip&&(null!==e?(t.f7Tooltip.setText(t.formatTooltipText()),t.f7Tooltip.setTargetEl(r.querySelector('path[data-index="'+e+'"]')),t.f7Tooltip.show()):t.f7Tooltip.hide())):(t.f7Tooltip=o.tooltip.create({trigger:"manual",containerEl:r,targetEl:r.querySelector('path[data-index="'+e+'"]'),text:t.formatTooltipText(),cssClass:"pie-chart-tooltip"}),void t.f7Tooltip.show())},i.render=function(){var t=this.params.size,e=this.getPaths();return $jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,viewBox:"-"+t/3+" -"+t/3+" "+2*t/3+" "+2*t/3,style:"transform: rotate(-90deg)"},e.map((function(t,e){return $jsx("path",{d:t.points,fill:t.color,"data-index":e})})))},i.update=function(t){void 0===t&&(t={});var e=this,o=e.params;if(Object.keys(t).forEach((function(e){void 0!==t[e]&&(o[e]=t[e])})),0===e.$svgEl.length)return e;e.$svgEl.remove(),delete e.$svgEl.f7PieChart;var n=r(e.render()).eq(0);return n.f7PieChart=e,p(e,{$svgEl:n,svgEl:n&&n[0]}),e.$el.append(n),e},i.setCurrentIndex=function(t){var e=this;if(t!==e.currentIndex){var r=e.params.datasets;e.currentIndex=t,e.$el.trigger("piechart:select",{index:t,dataset:r[t]}),e.emit("local::select pieChartSelect",e,t,r[t])}},i.showTooltip=function(t){var e=this,o=parseInt(t.target.getAttribute("data-index"),10);this.setCurrentIndex(o),this.$svgEl.find("path").removeClass("pie-chart-hidden").forEach((function(t,o){o!==e.currentIndex&&r(t).addClass("pie-chart-hidden")})),this.setTooltip()},i.hideTooltip=function(){this.setCurrentIndex(null),this.$svgEl.find("path").removeClass("pie-chart-hidden"),this.setTooltip()},i.init=function(){var t=this,e=r(t.render()).eq(0);return e.f7PieChart=t,p(t,{$svgEl:e,svgEl:e&&e[0]}),t.$el.append(e),t.$el.on("click mouseenter","path",t.showTooltip,!0),t.$el.on("mouseleave","path",t.hideTooltip,!0),t},i.destroy=function(){var t=this;t.$el&&!t.destroyed&&(t.$el.trigger("piechart:beforedestroy"),t.emit("local::beforeDestroy pieChartBeforeDestroy",t),t.$el.off("click mouseenter","path",t.showTooltip,!0),t.$el.off("mouseleave","path",t.hideTooltip,!0),t.$svgEl.remove(),t.f7Tooltip&&t.f7Tooltip.destroy&&t.f7Tooltip.destroy(),delete t.$el[0].f7PieChart,c(t),t.destroyed=!0)},n}(n),f={name:"pieChart",params:{pieChart:{el:null,datasets:[],size:320,tooltip:!1,formatTooltip:null}},create:function(){var t=this;t.pieChart=i({defaultSelector:".pie-chart",constructor:h,app:t,domProp:"f7PieChart"}),t.pieChart.update=function(e,o){if(0!==r(e).length){var n=t.pieChart.get(e);if(n)return n.update(o),n}}}};if(e){if(t.prototype.modules&&t.prototype.modules[f.name])return;t.use(f),t.instance&&(t.instance.useModuleParams(f,t.instance.params),t.instance.useModule(f))}return f}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+import $ from '../../shared/dom7.js';
+import PieChart from './pie-chart-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+export default {
+  name: 'pieChart',
+  params: {
+    pieChart: {
+      el: null,
+      datasets: [],
+      size: 320,
+      tooltip: false,
+      formatTooltip: null
+    }
+  },
+
+  create() {
+    const app = this;
+    app.pieChart = ConstructorMethods({
+      defaultSelector: '.pie-chart',
+      constructor: PieChart,
+      app,
+      domProp: 'f7PieChart'
+    });
+
+    app.pieChart.update = function update(el, newParams) {
+      const $el = $(el);
+      if ($el.length === 0) return undefined;
+      const pieChart = app.pieChart.get(el);
+      if (!pieChart) return undefined;
+      pieChart.update(newParams);
+      return pieChart;
+    };
+  }
+
+};

package/components/pie-chart/pie-chart.lazy.js

@@ -0,0 +1 @@
+(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var o=t.$,r=t.utils,s=(t.getDevice,t.getSupport,t.Class),a=(t.Modal,t.ConstructorMethods),i=(t.ModalMethods,r.extend),l=r.deleteProps;class n extends s{constructor(t,e={}){super(e,[t]);const r=this,s=i({},t.params.pieChart);r.useModulesParams(s),r.params=i(s,e);const{el:a}=r.params;if(!a)return r;const l=o(a);return 0===l.length?r:l[0].f7PieChart?l[0].f7PieChart:(i(r,{app:t,$el:l,el:l&&l[0],currentIndex:null,f7Tooltip:null}),l[0].f7PieChart=r,r.useModules(),r.showTooltip=r.showTooltip.bind(this),r.hideTooltip=r.hideTooltip.bind(this),r.init(),r)}getSummValue(){const{datasets:t}=this.params;let e=0;return t.map((t=>t.value||0)).forEach((t=>{e+=t})),e}getPaths(){const{datasets:t,size:e}=this.params,o=[];let r=0;function s(t){return[Math.cos(2*Math.PI*t)*(e/3),Math.sin(2*Math.PI*t)*(e/3)]}return t.forEach((({value:t,label:a,color:i})=>{const l=t/this.getSummValue(),[n,p]=s(r);r+=l;const[h,d]=s(r),c=[`M ${n} ${p}`,`A ${e/3} ${e/3} 0 ${l>.5?1:0} 1 ${h} ${d}`,"L 0 0"].join(" ");o.push({points:c,label:a,color:i})})),o}formatTooltipText(){const{datasets:t}=this.params,{currentIndex:e}=this;if(null===e)return"";const{value:o,label:r,color:s}=t[e],a=o/this.getSummValue()*100,i=t=>parseInt(t,10)===t?t:Math.round(100*t)/100;if(this.params.formatTooltip)return this.params.formatTooltip.call(this,{index:e,value:o,label:r,color:s,percentage:a});return`\n        <div class="pie-chart-tooltip-label">\n          <span class="pie-chart-tooltip-color" style="background-color: ${s};"></span> ${`${r?`${r}: `:""}${i(o)} (${i(a)}%)`}\n        </div>\n      `}setTooltip(){const t=this,{currentIndex:e,el:o,app:r,params:s}=t,{tooltip:a}=s;if((null!==e||t.f7Tooltip)&&a&&o)return null===e||t.f7Tooltip?void(t.f7Tooltip&&(null!==e?(t.f7Tooltip.setText(t.formatTooltipText()),t.f7Tooltip.setTargetEl(o.querySelector(`path[data-index="${e}"]`)),t.f7Tooltip.show()):t.f7Tooltip.hide())):(t.f7Tooltip=r.tooltip.create({trigger:"manual",containerEl:o,targetEl:o.querySelector(`path[data-index="${e}"]`),text:t.formatTooltipText(),cssClass:"pie-chart-tooltip"}),void t.f7Tooltip.show())}render(){const t=this.params.size,e=this.getPaths();return $jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:t,viewBox:`-${t/3} -${t/3} ${2*t/3} ${2*t/3}`,style:"transform: rotate(-90deg)"},e.map(((t,e)=>$jsx("path",{d:t.points,fill:t.color,"data-index":e}))))}update(t={}){const e=this,{params:r}=e;if(Object.keys(t).forEach((e=>{void 0!==t[e]&&(r[e]=t[e])})),0===e.$svgEl.length)return e;e.$svgEl.remove(),delete e.$svgEl.f7PieChart;const s=o(e.render()).eq(0);return s.f7PieChart=e,i(e,{$svgEl:s,svgEl:s&&s[0]}),e.$el.append(s),e}setCurrentIndex(t){const e=this;if(t===e.currentIndex)return;const{datasets:o}=e.params;e.currentIndex=t,e.$el.trigger("piechart:select",{index:t,dataset:o[t]}),e.emit("local::select pieChartSelect",e,t,o[t])}showTooltip(t){const e=parseInt(t.target.getAttribute("data-index"),10);this.setCurrentIndex(e),this.$svgEl.find("path").removeClass("pie-chart-hidden").forEach(((t,e)=>{e!==this.currentIndex&&o(t).addClass("pie-chart-hidden")})),this.setTooltip()}hideTooltip(){this.setCurrentIndex(null),this.$svgEl.find("path").removeClass("pie-chart-hidden"),this.setTooltip()}init(){const t=this,e=o(t.render()).eq(0);return e.f7PieChart=t,i(t,{$svgEl:e,svgEl:e&&e[0]}),t.$el.append(e),t.$el.on("click mouseenter","path",t.showTooltip,!0),t.$el.on("mouseleave","path",t.hideTooltip,!0),t}destroy(){const t=this;t.$el&&!t.destroyed&&(t.$el.trigger("piechart:beforedestroy"),t.emit("local::beforeDestroy pieChartBeforeDestroy",t),t.$el.off("click mouseenter","path",t.showTooltip,!0),t.$el.off("mouseleave","path",t.hideTooltip,!0),t.$svgEl.remove(),t.f7Tooltip&&t.f7Tooltip.destroy&&t.f7Tooltip.destroy(),delete t.$el[0].f7PieChart,l(t),t.destroyed=!0)}}var p={name:"pieChart",params:{pieChart:{el:null,datasets:[],size:320,tooltip:!1,formatTooltip:null}},create(){const t=this;t.pieChart=a({defaultSelector:".pie-chart",constructor:n,app:t,domProp:"f7PieChart"}),t.pieChart.update=function(e,r){if(0===o(e).length)return;const s=t.pieChart.get(e);return s?(s.update(r),s):void 0}}};if(e){if(t.prototype.modules&&t.prototype.modules[p.name])return;t.use(p),t.instance&&(t.instance.useModuleParams(p,t.instance.params),t.instance.useModule(p))}return p}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))