framework7 6.3.16 → 7.0.0-beta.12

package/cjs/components/area-chart/area-chart-class.js

@@ -1,526 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _dom = _interopRequireDefault(require("../../shared/dom7"));
-
-var _utils = require("../../shared/utils");
-
-var _class = _interopRequireDefault(require("../../shared/class"));
-
-var _$jsx = _interopRequireDefault(require("../../shared/$jsx"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-var AreaChart = /*#__PURE__*/function (_Framework7Class) {
-  _inheritsLoose(AreaChart, _Framework7Class);
-
-  function AreaChart(app, params) {
-    var _this;
-
-    if (params === void 0) {
-      params = {};
-    }
-
-    _this = _Framework7Class.call(this, params, [app]) || this;
-
-    var self = _assertThisInitialized(_this);
-
-    var defaults = (0, _utils.extend)({}, app.params.areaChart); // Extend defaults with modules params
-
-    self.useModulesParams(defaults);
-    self.params = (0, _utils.extend)(defaults, params);
-    var el = self.params.el;
-    if (!el) return self || _assertThisInitialized(_this);
-    var $el = (0, _dom.default)(el);
-    if ($el.length === 0) return self || _assertThisInitialized(_this);
-    if ($el[0].f7AreaChart) return $el[0].f7AreaChart || _assertThisInitialized(_this);
-    (0, _utils.extend)(self, {
-      app: app,
-      $el: $el,
-      el: $el && $el[0],
-      currentIndex: null,
-      hiddenDatasets: [],
-      f7Tooltip: null,
-      linesOffsets: null
-    });
-    $el[0].f7AreaChart = self; // Install Modules
-
-    self.useModules();
-    self.onMouseEnter = self.onMouseEnter.bind(self);
-    self.onMouseMove = self.onMouseMove.bind(self);
-    self.onMouseLeave = self.onMouseLeave.bind(self);
-    self.onLegendClick = self.onLegendClick.bind(self);
-    self.init();
-    return self || _assertThisInitialized(_this);
-  }
-
-  var _proto = AreaChart.prototype;
-
-  _proto.getVisibleLabels = function getVisibleLabels() {
-    var _this$params = this.params,
-        maxAxisLabels = _this$params.maxAxisLabels,
-        axisLabels = _this$params.axisLabels;
-    if (!maxAxisLabels || axisLabels.length <= maxAxisLabels) return axisLabels;
-    var skipStep = Math.ceil(axisLabels.length / maxAxisLabels);
-    var filtered = axisLabels.filter(function (label, index) {
-      return index % skipStep === 0;
-    });
-    return filtered;
-  };
-
-  _proto.getSummValues = function getSummValues() {
-    var datasets = this.params.datasets;
-    var hiddenDatasets = this.hiddenDatasets;
-    var summValues = [];
-    datasets.filter(function (dataset, index) {
-      return !hiddenDatasets.includes(index);
-    }).forEach(function (_ref) {
-      var values = _ref.values;
-      values.forEach(function (value, valueIndex) {
-        if (!summValues[valueIndex]) summValues[valueIndex] = 0;
-        summValues[valueIndex] += value;
-      });
-    });
-    return summValues;
-  };
-
-  _proto.getChartData = function getChartData() {
-    var _this$params2 = this.params,
-        datasets = _this$params2.datasets,
-        lineChart = _this$params2.lineChart,
-        width = _this$params2.width,
-        height = _this$params2.height;
-    var hiddenDatasets = this.hiddenDatasets;
-    var data = [];
-
-    if (!datasets.length) {
-      return data;
-    }
-
-    var lastValues = datasets[0].values.map(function () {
-      return 0;
-    });
-    var maxValue = 0;
-
-    if (lineChart) {
-      datasets.filter(function (dataset, index) {
-        return !hiddenDatasets.includes(index);
-      }).forEach(function (_ref2) {
-        var values = _ref2.values;
-        var datasetMaxValue = Math.max.apply(Math, values);
-        if (datasetMaxValue > maxValue) maxValue = datasetMaxValue;
-      });
-    } else {
-      maxValue = Math.max.apply(Math, this.getSummValues());
-    }
-
-    datasets.filter(function (dataset, index) {
-      return !hiddenDatasets.includes(index);
-    }).forEach(function (_ref3) {
-      var label = _ref3.label,
-          values = _ref3.values,
-          color = _ref3.color;
-      var points = values.map(function (originalValue, valueIndex) {
-        lastValues[valueIndex] += originalValue;
-        var value = lineChart ? originalValue : lastValues[valueIndex];
-        var x = valueIndex / (values.length - 1) * width;
-        var y = height - value / maxValue * height;
-
-        if (lineChart) {
-          return "" + (valueIndex === 0 ? 'M' : 'L') + x + "," + y;
-        }
-
-        return x + " " + y;
-      });
-
-      if (!lineChart) {
-        points.push(width + " " + height + " 0 " + height);
-      }
-
-      data.push({
-        label: label,
-        points: points.join(' '),
-        color: color
-      });
-    });
-    return data.reverse();
-  };
-
-  _proto.getVerticalLines = function getVerticalLines() {
-    var _this$params3 = this.params,
-        datasets = _this$params3.datasets,
-        width = _this$params3.width;
-    var lines = [];
-
-    if (!datasets.length) {
-      return lines;
-    }
-
-    var values = datasets[0].values;
-    values.forEach(function (value, valueIndex) {
-      var x = valueIndex / (values.length - 1) * width;
-      lines.push(x);
-    });
-    return lines;
-  };
-
-  _proto.toggleDataset = function toggleDataset(index) {
-    var _this2 = this;
-
-    var hiddenDatasets = this.hiddenDatasets,
-        toggleDatasets = this.params.toggleDatasets;
-    if (!toggleDatasets) return;
-
-    if (hiddenDatasets.includes(index)) {
-      hiddenDatasets.splice(hiddenDatasets.indexOf(index), 1);
-    } else {
-      hiddenDatasets.push(index);
-    }
-
-    if (this.$legendEl) {
-      this.$legendEl.find('.area-chart-legend-item').removeClass('area-chart-legend-item-hidden');
-      hiddenDatasets.forEach(function (i) {
-        _this2.$legendEl.find(".area-chart-legend-item[data-index=\"" + i + "\"]").addClass('area-chart-legend-item-hidden');
-      });
-    }
-
-    this.update({}, true);
-  };
-
-  _proto.formatAxisLabel = function formatAxisLabel(label) {
-    var formatAxisLabel = this.params.formatAxisLabel;
-    if (formatAxisLabel) return formatAxisLabel.call(this, label);
-    return label;
-  };
-
-  _proto.formatLegendLabel = function formatLegendLabel(label) {
-    var formatLegendLabel = this.params.formatLegendLabel;
-    if (formatLegendLabel) return formatLegendLabel.call(this, label);
-    return label;
-  };
-
-  _proto.calcLinesOffsets = function calcLinesOffsets() {
-    var lines = this.svgEl.querySelectorAll('line');
-    this.linesOffsets = [];
-
-    for (var i = 0; i < lines.length; i += 1) {
-      this.linesOffsets.push(lines[i].getBoundingClientRect().left);
-    }
-  };
-
-  _proto.formatTooltip = function formatTooltip() {
-    var self = this;
-    var currentIndex = self.currentIndex,
-        hiddenDatasets = self.hiddenDatasets,
-        _self$params = self.params,
-        datasets = _self$params.datasets,
-        axisLabels = _self$params.axisLabels,
-        formatTooltip = _self$params.formatTooltip,
-        formatTooltipTotal = _self$params.formatTooltipTotal,
-        formatTooltipAxisLabel = _self$params.formatTooltipAxisLabel,
-        formatTooltipDataset = _self$params.formatTooltipDataset;
-    if (currentIndex === null) return '';
-    var total = 0;
-    var currentValues = datasets.filter(function (dataset, index) {
-      return !hiddenDatasets.includes(index);
-    }).map(function (dataset) {
-      return {
-        color: dataset.color,
-        label: dataset.label,
-        value: dataset.values[currentIndex]
-      };
-    });
-    currentValues.forEach(function (dataset) {
-      total += dataset.value;
-    });
-
-    if (formatTooltip) {
-      return formatTooltip({
-        index: currentIndex,
-        total: total,
-        datasets: currentValues
-      });
-    }
-
-    var labelText = formatTooltipAxisLabel ? formatTooltipAxisLabel.call(self, axisLabels[currentIndex]) : this.formatAxisLabel(axisLabels[currentIndex]);
-    if (!labelText) labelText = '';
-    var totalText = formatTooltipTotal ? formatTooltipTotal.call(self, total) : total; // prettier-ignore
-
-    var datasetsText = currentValues.length > 0 ? "\n      <ul class=\"area-chart-tooltip-list\">\n        " + currentValues.map(function (_ref4) {
-      var label = _ref4.label,
-          color = _ref4.color,
-          value = _ref4.value;
-      var valueText = formatTooltipDataset ? formatTooltipDataset.call(self, label, value, color) : "" + (label ? label + ": " : '') + value;
-      return "\n              <li><span style=\"background-color: " + color + ";\"></span>" + valueText + "</li>\n            ";
-    }).join('') + "\n      </ul>" : ''; // prettier-ignore
-
-    return "\n      <div class=\"area-chart-tooltip-label\">" + labelText + "</div>\n      <div class=\"area-chart-tooltip-total\">" + totalText + "</div>\n      " + datasetsText + "\n    ";
-  };
-
-  _proto.setTooltip = function setTooltip() {
-    var self = this;
-    var app = self.app,
-        el = self.el,
-        svgEl = self.svgEl,
-        hiddenDatasets = self.hiddenDatasets,
-        currentIndex = self.currentIndex,
-        _self$params2 = self.params,
-        tooltip = _self$params2.tooltip,
-        datasets = _self$params2.datasets;
-    if (!tooltip) return;
-    var hasVisibleDataSets = datasets.filter(function (dataset, index) {
-      return !hiddenDatasets.includes(index);
-    }).length > 0;
-
-    if (!hasVisibleDataSets) {
-      if (self.f7Tooltip && self.f7Tooltip.hide) self.f7Tooltip.hide();
-      return;
-    }
-
-    if (currentIndex !== null && !self.f7Tooltip) {
-      self.f7Tooltip = app.tooltip.create({
-        trigger: 'manual',
-        containerEl: el,
-        targetEl: svgEl.querySelector("line[data-index=\"" + currentIndex + "\"]"),
-        text: self.formatTooltip(),
-        cssClass: 'area-chart-tooltip'
-      });
-
-      if (self.f7Tooltip && self.f7Tooltip.show) {
-        self.f7Tooltip.show();
-      }
-
-      return;
-    }
-
-    if (!self.f7Tooltip || !self.f7Tooltip.hide || !self.f7Tooltip.show) {
-      return;
-    }
-
-    if (currentIndex !== null) {
-      self.f7Tooltip.setText(self.formatTooltip());
-      self.f7Tooltip.setTargetEl(svgEl.querySelector("line[data-index=\"" + currentIndex + "\"]"));
-      self.f7Tooltip.show();
-    } else {
-      self.f7Tooltip.hide();
-    }
-  };
-
-  _proto.setCurrentIndex = function setCurrentIndex(index) {
-    if (index === this.currentIndex) return;
-    this.currentIndex = index;
-    this.$el.trigger('areachart:select', {
-      index: index
-    });
-    this.emit('local::select areaChartSelect', this, index);
-    this.$svgEl.find('line').removeClass('area-chart-current-line');
-    this.$svgEl.find("line[data-index=\"" + index + "\"]").addClass('area-chart-current-line');
-    this.setTooltip();
-  };
-
-  _proto.onLegendClick = function onLegendClick(e) {
-    var index = parseInt((0, _dom.default)(e.target).closest('.area-chart-legend-item').attr('data-index'), 10);
-    this.toggleDataset(index);
-  };
-
-  _proto.onMouseEnter = function onMouseEnter() {
-    this.calcLinesOffsets();
-  };
-
-  _proto.onMouseMove = function onMouseMove(e) {
-    var self = this;
-
-    if (!self.linesOffsets) {
-      self.calcLinesOffsets();
-    }
-
-    var currentLeft = e.pageX;
-    if (typeof currentLeft === 'undefined') currentLeft = 0;
-    var distances = self.linesOffsets.map(function (left) {
-      return Math.abs(currentLeft - left);
-    });
-    var minDistance = Math.min.apply(Math, distances);
-    var closestIndex = distances.indexOf(minDistance);
-    self.setCurrentIndex(closestIndex);
-  };
-
-  _proto.onMouseLeave = function onMouseLeave() {
-    this.setCurrentIndex(null);
-  };
-
-  _proto.attachEvents = function attachEvents() {
-    var svgEl = this.svgEl,
-        $el = this.$el;
-    if (!svgEl) return;
-    svgEl.addEventListener('mouseenter', this.onMouseEnter);
-    svgEl.addEventListener('mousemove', this.onMouseMove);
-    svgEl.addEventListener('mouseleave', this.onMouseLeave);
-    $el.on('click', '.area-chart-legend-item', this.onLegendClick);
-  };
-
-  _proto.detachEvents = function detachEvents() {
-    var svgEl = this.svgEl,
-        $el = this.$el;
-    if (!svgEl) return;
-    svgEl.removeEventListener('mouseenter', this.onMouseEnter);
-    svgEl.removeEventListener('mousemove', this.onMouseMove);
-    svgEl.removeEventListener('mouseleave', this.onMouseLeave);
-    $el.off('click', '.area-chart-legend-item', this.onLegendClick);
-  };
-
-  _proto.render = function render() {
-    var self = this;
-    var _self$params3 = self.params,
-        lineChart = _self$params3.lineChart,
-        toggleDatasets = _self$params3.toggleDatasets,
-        width = _self$params3.width,
-        height = _self$params3.height,
-        axis = _self$params3.axis,
-        axisLabels = _self$params3.axisLabels,
-        legend = _self$params3.legend,
-        datasets = _self$params3.datasets;
-    var chartData = self.getChartData();
-    var verticalLines = self.getVerticalLines();
-    var visibleLegends = self.getVisibleLabels();
-    var LegendItemTag = toggleDatasets ? 'button' : 'span';
-    return (0, _$jsx.default)("div", null, (0, _$jsx.default)("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: width,
-      height: height,
-      viewBox: "0 0 " + width + " " + height,
-      preserveAspectRatio: "none"
-    }, chartData.map(function (data) {
-      return lineChart ? (0, _$jsx.default)("path", {
-        stroke: data.color,
-        "fill-rule": "evenodd",
-        d: data.points
-      }) : (0, _$jsx.default)("polygon", {
-        fill: data.color,
-        "fill-rule": "evenodd",
-        points: data.points
-      });
-    }), verticalLines.map(function (line, index) {
-      return (0, _$jsx.default)("line", {
-        "data-index": index,
-        fill: "#000",
-        x1: line,
-        y1: 0,
-        x2: line,
-        y2: height
-      });
-    })), axis && (0, _$jsx.default)("div", {
-      class: "area-chart-axis"
-    }, axisLabels.map(function (label) {
-      return (0, _$jsx.default)("span", null, visibleLegends.includes(label) && (0, _$jsx.default)("span", null, self.formatAxisLabel(label)));
-    })), legend && (0, _$jsx.default)("div", {
-      class: "area-chart-legend"
-    }, datasets.map(function (dataset, index) {
-      return (0, _$jsx.default)(LegendItemTag, {
-        "data-index": index,
-        class: "area-chart-legend-item " + (toggleDatasets ? 'area-chart-legend-button' : ''),
-        _type: toggleDatasets ? 'button' : undefined
-      }, (0, _$jsx.default)("span", {
-        style: "background-color: " + dataset.color
-      }), self.formatLegendLabel(dataset.label));
-    })));
-  };
-
-  _proto.update = function update(newParams, onlySvg) {
-    if (newParams === void 0) {
-      newParams = {};
-    }
-
-    if (onlySvg === void 0) {
-      onlySvg = false;
-    }
-
-    var self = this;
-    var params = self.params;
-    Object.keys(newParams).forEach(function (param) {
-      if (typeof newParams[param] !== 'undefined') {
-        params[param] = newParams[param];
-      }
-    });
-    if (self.$svgEl.length === 0) return self;
-    self.detachEvents();
-    self.$svgEl.remove();
-
-    if (!onlySvg) {
-      self.$axisEl.remove();
-      self.$legendEl.remove();
-    }
-
-    var $rendered = (0, _dom.default)(self.render());
-    var $svgEl = $rendered.find('svg');
-    (0, _utils.extend)(self, {
-      svgEl: $svgEl && $svgEl[0],
-      $svgEl: $svgEl
-    });
-
-    if (!onlySvg) {
-      var $axisEl = $rendered.find('.area-chart-axis');
-      var $legendEl = $rendered.find('.area-chart-legend');
-      (0, _utils.extend)(self, {
-        $axisEl: $axisEl,
-        $legendEl: $legendEl
-      });
-      self.$el.append($axisEl);
-      self.$el.append($legendEl);
-    }
-
-    self.$el.prepend($svgEl);
-    self.attachEvents();
-    return self;
-  };
-
-  _proto.init = function init() {
-    var self = this;
-    var $rendered = (0, _dom.default)(self.render());
-    var $svgEl = $rendered.find('svg');
-    var $axisEl = $rendered.find('.area-chart-axis');
-    var $legendEl = $rendered.find('.area-chart-legend');
-    (0, _utils.extend)(self, {
-      svgEl: $svgEl && $svgEl[0],
-      $svgEl: $svgEl,
-      $axisEl: $axisEl,
-      $legendEl: $legendEl
-    });
-    self.$el.append($svgEl);
-    self.$el.append($axisEl);
-    self.$el.append($legendEl);
-    self.attachEvents();
-    return self;
-  };
-
-  _proto.destroy = function destroy() {
-    var self = this;
-    if (!self.$el || self.destroyed) return;
-    self.$el.trigger('piechart:beforedestroy');
-    self.emit('local::beforeDestroy areaChartBeforeDestroy', self);
-    self.detachEvents();
-    self.$svgEl.remove();
-    self.$axisEl.remove();
-    self.$legendEl.remove();
-
-    if (self.f7Tooltip && self.f7Tooltip.destroy) {
-      self.f7Tooltip.destroy();
-    }
-
-    delete self.$el[0].f7AreaChart;
-    (0, _utils.deleteProps)(self);
-    self.destroyed = true;
-  };
-
-  return AreaChart;
-}(_class.default);
-
-var _default = AreaChart;
-exports.default = _default;

package/cjs/components/area-chart/area-chart.js

@@ -1,56 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _dom = _interopRequireDefault(require("../../shared/dom7"));
-
-var _areaChartClass = _interopRequireDefault(require("./area-chart-class"));
-
-var _constructorMethods = _interopRequireDefault(require("../../shared/constructor-methods"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = {
-  name: 'areaChart',
-  params: {
-    areaChart: {
-      el: null,
-      lineChart: false,
-      datasets: [],
-      axis: false,
-      axisLabels: [],
-      tooltip: false,
-      legend: false,
-      toggleDatasets: false,
-      width: 640,
-      height: 320,
-      maxAxisLabels: 8,
-      formatAxisLabel: null,
-      formatLegendLabel: null,
-      formatTooltip: null,
-      formatTooltipAxisLabel: null,
-      formatTooltipTotal: null,
-      formatTooltipDataset: null
-    }
-  },
-  create: function create() {
-    var app = this;
-    app.areaChart = (0, _constructorMethods.default)({
-      defaultSelector: '.area-chart',
-      constructor: _areaChartClass.default,
-      app: app,
-      domProp: 'f7AreaChart'
-    });
-
-    app.areaChart.update = function update(el, newParams) {
-      var $el = (0, _dom.default)(el);
-      if ($el.length === 0) return undefined;
-      var areaChart = app.areaChart.get(el);
-      if (!areaChart) return undefined;
-      areaChart.update(newParams);
-      return areaChart;
-    };
-  }
-};
-exports.default = _default;