@xenknight/framework7 0.0.2

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

@@ -0,0 +1,250 @@
+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) {
+    if (params === void 0) {
+      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(_ref => {
+      let {
+        value,
+        label,
+        color
+      } = _ref;
+      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) {
+    if (newParams === void 0) {
+      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-ios.less

@@ -0,0 +1,2 @@
+.ios {
+}

package/components/pie-chart/pie-chart-md.less

@@ -0,0 +1,2 @@
+.md {
+}

package/components/pie-chart/pie-chart-rtl.css

@@ -0,0 +1 @@
+.pie-chart{position:relative}.pie-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.pie-chart path{transition-duration:150ms}.pie-chart-hidden{opacity:.4}.pie-chart-tooltip{pointer-events:none;text-align:left;font-size:12px;line-height:1.4;white-space:nowrap;width:auto;max-width:none}.pie-chart-tooltip-label{display:flex;align-items:center}.pie-chart-tooltip-color{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px}

package/components/pie-chart/pie-chart.css

@@ -0,0 +1 @@
+.pie-chart{position:relative}.pie-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.pie-chart path{transition-duration:150ms}.pie-chart-hidden{opacity:.4}.pie-chart-tooltip{pointer-events:none;text-align:left;font-size:12px;line-height:1.4;white-space:nowrap;width:auto;max-width:none}.pie-chart-tooltip-label{display:flex;align-items:center}.pie-chart-tooltip-color{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px}

package/components/pie-chart/pie-chart.d.ts

@@ -0,0 +1,99 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace PieChart {
+  interface PieChart extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** Pie chart HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with chart HTML element */
+    $el: Dom7Array;
+    /** Pie chart generated SVH HTML element */
+    svgEl: HTMLElement;
+    /** Dom7 instance with generated SVH HTML element */
+    $svgEl: Dom7Array;
+    /** Pie chart parameters */
+    params: Parameters;
+
+    /** Update/rerender chart SVG element according to passed parameters. It accepts object with same parameters required for chart initialization. You can pass only parameters that needs to be updated */
+    update(parameters: Parameters): PieChart;
+    /** Destroys chart instance */
+    destroy(): void;
+  }
+
+  interface Dataset {
+    /** Dataset value */
+    value: number;
+    /** Dataset HEX color */
+    color?: string;
+    /** Dataset label */
+    label?: string;
+  }
+
+  interface Parameters {
+    /** Pie chart element. HTMLElement or string with CSS selector of chart element. Generated SVG will be inserted into this element. */
+    el: HTMLElement | CSSSelector;
+    /** Chart data sets */
+    datasets: Dataset[];
+    /** Generated SVG image size (in px). (default 320) */
+    size?: number;
+    /** Enables tooltip on hover */
+    tooltip?: boolean;
+    /** Custom render function that must return tooltip's HTML content */
+    formatTooltip?: (data: {
+      index: number;
+      value: number;
+      label: string;
+      color: string;
+      percentage: number;
+    }) => string;
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+
+  interface Events {
+    /** Event will be triggered (when tooltip enabled) on chart hover */
+    select: (pieChart: PieChart, index: number | null, dataset: Dataset) => void;
+    /** Event will be triggered right before Pie chart instance will be destroyed. As an argument event handler receives Pie chart instance */
+    beforeDestroy: (pieChart: PieChart) => void;
+  }
+
+  interface DomEvents {
+    /** Event will be triggered (when tooltip enabled) on chart hover */
+    'piechart:select': () => void;
+    /** Event will be triggered right before Pie chart instance will be destroyed */
+    'piechart:beforedestroy': () => void;
+  }
+  interface AppMethods {
+    pieChart: {
+      /** create Pie chart instance */
+      create(parameters: Parameters): PieChart;
+      /** destroy Pie chart instance */
+      destroy(el: HTMLElement | CSSSelector | PieChart): void;
+      /** get Pie chart instance by HTML element */
+      get(el: HTMLElement | CSSSelector): PieChart;
+      /** update/rerender Pie chart SVG according to passed parameters */
+      update(parameters: Parameters): PieChart;
+    };
+  }
+  interface AppParams {
+    pieChart?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered (when tooltip enabled) on chart hover */
+    pieChartSelect: (pieChart: PieChart, index: number | null, dataset: Dataset) => void;
+    /** Event will be triggered right before PieChart instance will be destroyed. As an argument event handler receives Pie chart instance */
+    pieChartBeforeDestroy: (pieChart: PieChart) => void;
+  }
+}
+
+declare const PieChartComponent: Framework7Plugin;
+
+export default PieChartComponent;

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

@@ -0,0 +1,32 @@
+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.less

@@ -0,0 +1,43 @@
+.pie-chart {
+  position: relative;
+  svg {
+    display: block;
+    width: 100%;
+    font-size: 0;
+    height: auto;
+    margin: 0 auto;
+  }
+  path {
+    transition-duration: 150ms;
+  }
+  &-hidden {
+    opacity: 0.4;
+  }
+  &-tooltip {
+    pointer-events: none;
+    text-align: left;
+    font-size: 12px;
+    line-height: 1.4;
+    white-space: nowrap;
+    width: auto;
+    max-width: none;
+    &-label {
+      display: flex;
+      align-items: center;
+    }
+    &-color {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      margin-right: 4px;
+    }
+  }
+}
+
+.if-ios-theme({
+  @import './pie-chart-ios.less';
+});
+.if-md-theme({
+  @import './pie-chart-md.less';
+});