framework7 6.3.4 → 7.0.0-beta.3

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

@@ -0,0 +1,507 @@
+import $ from '../../shared/dom7';
+import { extend, deleteProps } from '../../shared/utils';
+import Framework7Class from '../../shared/class';
+/** @jsx $jsx */
+
+import $jsx from '../../shared/$jsx';
+
+class AreaChart extends Framework7Class {
+  constructor(app, params = {}) {
+    super(params, [app]);
+    const self = this;
+    const defaults = extend({}, app.params.areaChart); // 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].f7AreaChart) return $el[0].f7AreaChart;
+    extend(self, {
+      app,
+      $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;
+  }
+
+  getVisibleLabels() {
+    const {
+      maxAxisLabels,
+      axisLabels
+    } = this.params;
+    if (!maxAxisLabels || axisLabels.length <= maxAxisLabels) return axisLabels;
+    const skipStep = Math.ceil(axisLabels.length / maxAxisLabels);
+    const filtered = axisLabels.filter((label, index) => index % skipStep === 0);
+    return filtered;
+  }
+
+  getSummValues() {
+    const {
+      datasets
+    } = this.params;
+    const {
+      hiddenDatasets
+    } = this;
+    const summValues = [];
+    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
+      values
+    }) => {
+      values.forEach((value, valueIndex) => {
+        if (!summValues[valueIndex]) summValues[valueIndex] = 0;
+        summValues[valueIndex] += value;
+      });
+    });
+    return summValues;
+  }
+
+  getChartData() {
+    const {
+      datasets,
+      lineChart,
+      width,
+      height
+    } = this.params;
+    const {
+      hiddenDatasets
+    } = this;
+    const data = [];
+
+    if (!datasets.length) {
+      return data;
+    }
+
+    const lastValues = datasets[0].values.map(() => 0);
+    let maxValue = 0;
+
+    if (lineChart) {
+      datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
+        values
+      }) => {
+        const datasetMaxValue = Math.max(...values);
+        if (datasetMaxValue > maxValue) maxValue = datasetMaxValue;
+      });
+    } else {
+      maxValue = Math.max(...this.getSummValues());
+    }
+
+    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
+      label,
+      values,
+      color
+    }) => {
+      const points = values.map((originalValue, valueIndex) => {
+        lastValues[valueIndex] += originalValue;
+        const value = lineChart ? originalValue : lastValues[valueIndex];
+        const x = valueIndex / (values.length - 1) * width;
+        const 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,
+        points: points.join(' '),
+        color
+      });
+    });
+    return data.reverse();
+  }
+
+  getVerticalLines() {
+    const {
+      datasets,
+      width
+    } = this.params;
+    const lines = [];
+
+    if (!datasets.length) {
+      return lines;
+    }
+
+    const values = datasets[0].values;
+    values.forEach((value, valueIndex) => {
+      const x = valueIndex / (values.length - 1) * width;
+      lines.push(x);
+    });
+    return lines;
+  }
+
+  toggleDataset(index) {
+    const {
+      hiddenDatasets,
+      params: {
+        toggleDatasets
+      }
+    } = this;
+    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(i => {
+        this.$legendEl.find(`.area-chart-legend-item[data-index="${i}"]`).addClass('area-chart-legend-item-hidden');
+      });
+    }
+
+    this.update({}, true);
+  }
+
+  formatAxisLabel(label) {
+    const {
+      formatAxisLabel
+    } = this.params;
+    if (formatAxisLabel) return formatAxisLabel.call(this, label);
+    return label;
+  }
+
+  formatLegendLabel(label) {
+    const {
+      formatLegendLabel
+    } = this.params;
+    if (formatLegendLabel) return formatLegendLabel.call(this, label);
+    return label;
+  }
+
+  calcLinesOffsets() {
+    const lines = this.svgEl.querySelectorAll('line');
+    this.linesOffsets = [];
+
+    for (let i = 0; i < lines.length; i += 1) {
+      this.linesOffsets.push(lines[i].getBoundingClientRect().left);
+    }
+  }
+
+  formatTooltip() {
+    const self = this;
+    const {
+      currentIndex,
+      hiddenDatasets,
+      params: {
+        datasets,
+        axisLabels,
+        formatTooltip,
+        formatTooltipTotal,
+        formatTooltipAxisLabel,
+        formatTooltipDataset
+      }
+    } = self;
+    if (currentIndex === null) return '';
+    let total = 0;
+    const currentValues = datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).map(dataset => ({
+      color: dataset.color,
+      label: dataset.label,
+      value: dataset.values[currentIndex]
+    }));
+    currentValues.forEach(dataset => {
+      total += dataset.value;
+    });
+
+    if (formatTooltip) {
+      return formatTooltip({
+        index: currentIndex,
+        total,
+        datasets: currentValues
+      });
+    }
+
+    let labelText = formatTooltipAxisLabel ? formatTooltipAxisLabel.call(self, axisLabels[currentIndex]) : this.formatAxisLabel(axisLabels[currentIndex]);
+    if (!labelText) labelText = '';
+    const totalText = formatTooltipTotal ? formatTooltipTotal.call(self, total) : total; // prettier-ignore
+
+    const datasetsText = currentValues.length > 0 ? `
+      <ul class="area-chart-tooltip-list">
+        ${currentValues.map(({
+      label,
+      color,
+      value
+    }) => {
+      const valueText = formatTooltipDataset ? formatTooltipDataset.call(self, label, value, color) : `${label ? `${label}: ` : ''}${value}`;
+      return `
+              <li><span style="background-color: ${color};"></span>${valueText}</li>
+            `;
+    }).join('')}
+      </ul>` : ''; // prettier-ignore
+
+    return `
+      <div class="area-chart-tooltip-label">${labelText}</div>
+      <div class="area-chart-tooltip-total">${totalText}</div>
+      ${datasetsText}
+    `;
+  }
+
+  setTooltip() {
+    const self = this;
+    const {
+      app,
+      el,
+      svgEl,
+      hiddenDatasets,
+      currentIndex,
+      params: {
+        tooltip,
+        datasets
+      }
+    } = self;
+    if (!tooltip) return;
+    const hasVisibleDataSets = datasets.filter((dataset, index) => !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();
+    }
+  }
+
+  setCurrentIndex(index) {
+    if (index === this.currentIndex) return;
+    this.currentIndex = index;
+    this.$el.trigger('areachart:select', {
+      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();
+  }
+
+  onLegendClick(e) {
+    const index = parseInt($(e.target).closest('.area-chart-legend-item').attr('data-index'), 10);
+    this.toggleDataset(index);
+  }
+
+  onMouseEnter() {
+    this.calcLinesOffsets();
+  }
+
+  onMouseMove(e) {
+    const self = this;
+
+    if (!self.linesOffsets) {
+      self.calcLinesOffsets();
+    }
+
+    let currentLeft = e.pageX;
+    if (typeof currentLeft === 'undefined') currentLeft = 0;
+    const distances = self.linesOffsets.map(left => Math.abs(currentLeft - left));
+    const minDistance = Math.min(...distances);
+    const closestIndex = distances.indexOf(minDistance);
+    self.setCurrentIndex(closestIndex);
+  }
+
+  onMouseLeave() {
+    this.setCurrentIndex(null);
+  }
+
+  attachEvents() {
+    const {
+      svgEl,
+      $el
+    } = this;
+    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);
+  }
+
+  detachEvents() {
+    const {
+      svgEl,
+      $el
+    } = this;
+    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);
+  }
+
+  render() {
+    const self = this;
+    const {
+      lineChart,
+      toggleDatasets,
+      width,
+      height,
+      axis,
+      axisLabels,
+      legend,
+      datasets
+    } = self.params;
+    const chartData = self.getChartData();
+    const verticalLines = self.getVerticalLines();
+    const visibleLegends = self.getVisibleLabels();
+    const LegendItemTag = toggleDatasets ? 'button' : 'span';
+    return $jsx("div", null, $jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: width,
+      height: height,
+      viewBox: `0 0 ${width} ${height}`,
+      preserveAspectRatio: "none"
+    }, chartData.map(data => lineChart ? $jsx("path", {
+      stroke: data.color,
+      "fill-rule": "evenodd",
+      d: data.points
+    }) : $jsx("polygon", {
+      fill: data.color,
+      "fill-rule": "evenodd",
+      points: data.points
+    })), verticalLines.map((line, index) => $jsx("line", {
+      "data-index": index,
+      fill: "#000",
+      x1: line,
+      y1: 0,
+      x2: line,
+      y2: height
+    }))), axis && $jsx("div", {
+      class: "area-chart-axis"
+    }, axisLabels.map(label => $jsx("span", null, visibleLegends.includes(label) && $jsx("span", null, self.formatAxisLabel(label))))), legend && $jsx("div", {
+      class: "area-chart-legend"
+    }, datasets.map((dataset, index) => $jsx(LegendItemTag, {
+      "data-index": index,
+      class: `area-chart-legend-item ${toggleDatasets ? 'area-chart-legend-button' : ''}`,
+      _type: toggleDatasets ? 'button' : undefined
+    }, $jsx("span", {
+      style: `background-color: ${dataset.color}`
+    }), self.formatLegendLabel(dataset.label)))));
+  }
+
+  update(newParams = {}, onlySvg = false) {
+    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.detachEvents();
+    self.$svgEl.remove();
+
+    if (!onlySvg) {
+      self.$axisEl.remove();
+      self.$legendEl.remove();
+    }
+
+    const $rendered = $(self.render());
+    const $svgEl = $rendered.find('svg');
+    extend(self, {
+      svgEl: $svgEl && $svgEl[0],
+      $svgEl
+    });
+
+    if (!onlySvg) {
+      const $axisEl = $rendered.find('.area-chart-axis');
+      const $legendEl = $rendered.find('.area-chart-legend');
+      extend(self, {
+        $axisEl,
+        $legendEl
+      });
+      self.$el.append($axisEl);
+      self.$el.append($legendEl);
+    }
+
+    self.$el.prepend($svgEl);
+    self.attachEvents();
+    return self;
+  }
+
+  init() {
+    const self = this;
+    const $rendered = $(self.render());
+    const $svgEl = $rendered.find('svg');
+    const $axisEl = $rendered.find('.area-chart-axis');
+    const $legendEl = $rendered.find('.area-chart-legend');
+    extend(self, {
+      svgEl: $svgEl && $svgEl[0],
+      $svgEl,
+      $axisEl,
+      $legendEl
+    });
+    self.$el.append($svgEl);
+    self.$el.append($axisEl);
+    self.$el.append($legendEl);
+    self.attachEvents();
+    return self;
+  }
+
+  destroy() {
+    const 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;
+    deleteProps(self);
+    self.destroyed = true;
+  }
+
+}
+
+export default AreaChart;

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

@@ -1 +1 @@
-:root{--f7-area-chart-current-line-stroke-width:2px;--f7-area-chart-current-line-stroke:rgba(0, 0, 0, 0.15);--f7-area-chart-axis-text-color:inherit;--f7-area-chart-axis-height:1px;--f7-area-chart-axis-font-size:10px;--f7-area-chart-axis-font-weight:500;--f7-area-chart-tooltip-font-size:12px;--f7-area-chart-tooltip-total-label-text-color:rgba(255, 255, 255, 0.75);--f7-area-chart-tooltip-total-font-size:16px;--f7-area-chart-tooltip-total-font-weight:bold;--f7-area-chart-tooltip-color-size:10px;--f7-area-chart-legend-font-size:14px;--f7-area-chart-legend-font-weight:500;--f7-area-chart-legend-text-color:inherit;--f7-area-chart-legend-padding:4px 8px;--f7-area-chart-legend-border-radius:4px;--f7-area-chart-legend-color-size:14px;--f7-area-chart-line-stroke-width:2px;--f7-area-chart-axis-bg-color:rgba(0, 0, 0, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(0, 0, 0, 0.22)}:root .theme-dark,:root.theme-dark{--f7-area-chart-axis-bg-color:rgba(255, 255, 255, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(255, 255, 255, 0.22)}.area-chart{position:relative}.area-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.area-chart path{fill:none;stroke-width:var(--f7-area-chart-line-stroke-width)}.area-chart-current-line{stroke:var(--f7-area-chart-current-line-stroke);stroke-width:var(--f7-area-chart-current-line-stroke-width)}.area-chart-axis{height:var(--f7-area-chart-axis-height);background:var(--f7-area-chart-axis-bg-color);color:var(--f7-area-chart-axis-text-color);display:flex;font-size:var(--f7-area-chart-axis-font-size);font-weight:var(--f7-area-chart-axis-font-weight);justify-content:space-between;line-height:1;margin-bottom:2em}.area-chart-axis>span{padding-top:10px;width:0;display:flex;align-items:flex-start;justify-content:center;white-space:nowrap}.area-chart-axis>span:first-child{justify-content:flex-start}.area-chart-axis>span:last-child{justify-content:flex-end}.area-chart-tooltip{pointer-events:none;text-align:left;font-size:var(--f7-area-chart-tooltip-font-size);line-height:1.4}.area-chart-tooltip-label{color:var(--f7-area-chart-tooltip-total-label-text-color)}.area-chart-tooltip-total{font-size:var(--f7-area-chart-tooltip-total-font-size);font-weight:var(--f7-area-chart-tooltip-total-font-weight)}.area-chart-tooltip-list{list-style:none;margin:0;padding:0}.area-chart-tooltip-list li{white-space:nowrap}.area-chart-tooltip-list span{display:inline-block;width:var(--f7-area-chart-tooltip-color-size);height:var(--f7-area-chart-tooltip-color-size);border-radius:50%;margin-right:4px}.area-chart-axis~.area-chart-legend{margin-top:2em}.area-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:var(--f7-area-chart-legend-font-size);width:100%;margin-top:1em}.area-chart-legend-button{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;background-color:transparent;border-radius:0;border:none;outline:0!important;cursor:pointer;font-family:inherit;font-size:inherit;box-shadow:none!important}.area-chart-legend-item{position:relative;color:var(--f7-area-chart-legend-text-color);width:auto;display:flex;align-items:center;font-weight:var(--f7-area-chart-legend-font-weight);transition-duration:.2s;padding:var(--f7-area-chart-legend-padding);border-radius:var(--f7-area-chart-legend-border-radius);overflow:hidden}.area-chart-legend-item span{width:var(--f7-area-chart-legend-color-size);height:var(--f7-area-chart-legend-color-size);margin-right:4px;border-radius:50%;transition-duration:.2s}.area-chart-legend-item-hidden{color:var(--f7-area-chart-legend-disabled-text-color)}.area-chart-legend-item-hidden span{background-color:var(--f7-area-chart-legend-disabled-text-color)!important}
+:root{--f7-area-chart-current-line-stroke-width:2px;--f7-area-chart-current-line-stroke:rgba(0, 0, 0, 0.15);--f7-area-chart-axis-text-color:inherit;--f7-area-chart-axis-height:1px;--f7-area-chart-axis-font-size:10px;--f7-area-chart-axis-font-weight:500;--f7-area-chart-tooltip-font-size:12px;--f7-area-chart-tooltip-total-label-text-color:rgba(255, 255, 255, 0.75);--f7-area-chart-tooltip-total-font-size:16px;--f7-area-chart-tooltip-total-font-weight:bold;--f7-area-chart-tooltip-color-size:10px;--f7-area-chart-legend-font-size:14px;--f7-area-chart-legend-font-weight:500;--f7-area-chart-legend-text-color:inherit;--f7-area-chart-legend-padding:4px 8px;--f7-area-chart-legend-border-radius:4px;--f7-area-chart-legend-color-size:14px;--f7-area-chart-line-stroke-width:2px;--f7-area-chart-axis-bg-color:rgba(0, 0, 0, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-area-chart-axis-bg-color:rgba(255, 255, 255, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(255, 255, 255, 0.22)}.area-chart{position:relative}.area-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.area-chart path{fill:none;stroke-width:var(--f7-area-chart-line-stroke-width)}.area-chart-current-line{stroke:var(--f7-area-chart-current-line-stroke);stroke-width:var(--f7-area-chart-current-line-stroke-width)}.area-chart-axis{height:var(--f7-area-chart-axis-height);background:var(--f7-area-chart-axis-bg-color);color:var(--f7-area-chart-axis-text-color);display:flex;font-size:var(--f7-area-chart-axis-font-size);font-weight:var(--f7-area-chart-axis-font-weight);justify-content:space-between;line-height:1;margin-bottom:2em}.area-chart-axis>span{padding-top:10px;width:0;display:flex;align-items:flex-start;justify-content:center;white-space:nowrap}.area-chart-axis>span:first-child{justify-content:flex-start}.area-chart-axis>span:last-child{justify-content:flex-end}.area-chart-tooltip{pointer-events:none;text-align:left;font-size:var(--f7-area-chart-tooltip-font-size);line-height:1.4}.area-chart-tooltip-label{color:var(--f7-area-chart-tooltip-total-label-text-color)}.area-chart-tooltip-total{font-size:var(--f7-area-chart-tooltip-total-font-size);font-weight:var(--f7-area-chart-tooltip-total-font-weight)}.area-chart-tooltip-list{list-style:none;margin:0;padding:0}.area-chart-tooltip-list li{white-space:nowrap}.area-chart-tooltip-list span{display:inline-block;width:var(--f7-area-chart-tooltip-color-size);height:var(--f7-area-chart-tooltip-color-size);border-radius:50%;margin-right:4px}.area-chart-axis~.area-chart-legend{margin-top:2em}.area-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:var(--f7-area-chart-legend-font-size);width:100%;margin-top:1em}.area-chart-legend-button{-webkit-appearance:none!important;appearance:none!important;background-color:transparent;border-radius:0;border:none;outline:0!important;cursor:pointer;font-family:inherit;font-size:inherit;box-shadow:none!important}.area-chart-legend-item{position:relative;color:var(--f7-area-chart-legend-text-color);width:auto;display:flex;align-items:center;font-weight:var(--f7-area-chart-legend-font-weight);transition-duration:.2s;padding:var(--f7-area-chart-legend-padding);border-radius:var(--f7-area-chart-legend-border-radius);overflow:hidden}.area-chart-legend-item span{width:var(--f7-area-chart-legend-color-size);height:var(--f7-area-chart-legend-color-size);margin-right:4px;border-radius:50%;transition-duration:.2s}.area-chart-legend-item-hidden{color:var(--f7-area-chart-legend-disabled-text-color)}.area-chart-legend-item-hidden span{background-color:var(--f7-area-chart-legend-disabled-text-color)!important}

package/components/area-chart/area-chart.css

@@ -1 +1 @@
-:root{--f7-area-chart-current-line-stroke-width:2px;--f7-area-chart-current-line-stroke:rgba(0, 0, 0, 0.15);--f7-area-chart-axis-text-color:inherit;--f7-area-chart-axis-height:1px;--f7-area-chart-axis-font-size:10px;--f7-area-chart-axis-font-weight:500;--f7-area-chart-tooltip-font-size:12px;--f7-area-chart-tooltip-total-label-text-color:rgba(255, 255, 255, 0.75);--f7-area-chart-tooltip-total-font-size:16px;--f7-area-chart-tooltip-total-font-weight:bold;--f7-area-chart-tooltip-color-size:10px;--f7-area-chart-legend-font-size:14px;--f7-area-chart-legend-font-weight:500;--f7-area-chart-legend-text-color:inherit;--f7-area-chart-legend-padding:4px 8px;--f7-area-chart-legend-border-radius:4px;--f7-area-chart-legend-color-size:14px;--f7-area-chart-line-stroke-width:2px;--f7-area-chart-axis-bg-color:rgba(0, 0, 0, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(0, 0, 0, 0.22)}:root .theme-dark,:root.theme-dark{--f7-area-chart-axis-bg-color:rgba(255, 255, 255, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(255, 255, 255, 0.22)}.area-chart{position:relative}.area-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.area-chart path{fill:none;stroke-width:var(--f7-area-chart-line-stroke-width)}.area-chart-current-line{stroke:var(--f7-area-chart-current-line-stroke);stroke-width:var(--f7-area-chart-current-line-stroke-width)}.area-chart-axis{height:var(--f7-area-chart-axis-height);background:var(--f7-area-chart-axis-bg-color);color:var(--f7-area-chart-axis-text-color);display:flex;font-size:var(--f7-area-chart-axis-font-size);font-weight:var(--f7-area-chart-axis-font-weight);justify-content:space-between;line-height:1;margin-bottom:2em}.area-chart-axis>span{padding-top:10px;width:0;display:flex;align-items:flex-start;justify-content:center;white-space:nowrap}.area-chart-axis>span:first-child{justify-content:flex-start}.area-chart-axis>span:last-child{justify-content:flex-end}.area-chart-tooltip{pointer-events:none;text-align:left;font-size:var(--f7-area-chart-tooltip-font-size);line-height:1.4}.area-chart-tooltip-label{color:var(--f7-area-chart-tooltip-total-label-text-color)}.area-chart-tooltip-total{font-size:var(--f7-area-chart-tooltip-total-font-size);font-weight:var(--f7-area-chart-tooltip-total-font-weight)}.area-chart-tooltip-list{list-style:none;margin:0;padding:0}.area-chart-tooltip-list li{white-space:nowrap}.area-chart-tooltip-list span{display:inline-block;width:var(--f7-area-chart-tooltip-color-size);height:var(--f7-area-chart-tooltip-color-size);border-radius:50%;margin-right:4px}.area-chart-axis~.area-chart-legend{margin-top:2em}.area-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:var(--f7-area-chart-legend-font-size);width:100%;margin-top:1em}.area-chart-legend-button{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;background-color:transparent;border-radius:0;border:none;outline:0!important;cursor:pointer;font-family:inherit;font-size:inherit;box-shadow:none!important}.area-chart-legend-item{position:relative;color:var(--f7-area-chart-legend-text-color);width:auto;display:flex;align-items:center;font-weight:var(--f7-area-chart-legend-font-weight);transition-duration:.2s;padding:var(--f7-area-chart-legend-padding);border-radius:var(--f7-area-chart-legend-border-radius);overflow:hidden}.area-chart-legend-item span{width:var(--f7-area-chart-legend-color-size);height:var(--f7-area-chart-legend-color-size);margin-right:4px;border-radius:50%;transition-duration:.2s}.area-chart-legend-item-hidden{color:var(--f7-area-chart-legend-disabled-text-color)}.area-chart-legend-item-hidden span{background-color:var(--f7-area-chart-legend-disabled-text-color)!important}
+:root{--f7-area-chart-current-line-stroke-width:2px;--f7-area-chart-current-line-stroke:rgba(0, 0, 0, 0.15);--f7-area-chart-axis-text-color:inherit;--f7-area-chart-axis-height:1px;--f7-area-chart-axis-font-size:10px;--f7-area-chart-axis-font-weight:500;--f7-area-chart-tooltip-font-size:12px;--f7-area-chart-tooltip-total-label-text-color:rgba(255, 255, 255, 0.75);--f7-area-chart-tooltip-total-font-size:16px;--f7-area-chart-tooltip-total-font-weight:bold;--f7-area-chart-tooltip-color-size:10px;--f7-area-chart-legend-font-size:14px;--f7-area-chart-legend-font-weight:500;--f7-area-chart-legend-text-color:inherit;--f7-area-chart-legend-padding:4px 8px;--f7-area-chart-legend-border-radius:4px;--f7-area-chart-legend-color-size:14px;--f7-area-chart-line-stroke-width:2px;--f7-area-chart-axis-bg-color:rgba(0, 0, 0, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-area-chart-axis-bg-color:rgba(255, 255, 255, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(255, 255, 255, 0.22)}.area-chart{position:relative}.area-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.area-chart path{fill:none;stroke-width:var(--f7-area-chart-line-stroke-width)}.area-chart-current-line{stroke:var(--f7-area-chart-current-line-stroke);stroke-width:var(--f7-area-chart-current-line-stroke-width)}.area-chart-axis{height:var(--f7-area-chart-axis-height);background:var(--f7-area-chart-axis-bg-color);color:var(--f7-area-chart-axis-text-color);display:flex;font-size:var(--f7-area-chart-axis-font-size);font-weight:var(--f7-area-chart-axis-font-weight);justify-content:space-between;line-height:1;margin-bottom:2em}.area-chart-axis>span{padding-top:10px;width:0;display:flex;align-items:flex-start;justify-content:center;white-space:nowrap}.area-chart-axis>span:first-child{justify-content:flex-start}.area-chart-axis>span:last-child{justify-content:flex-end}.area-chart-tooltip{pointer-events:none;text-align:left;font-size:var(--f7-area-chart-tooltip-font-size);line-height:1.4}.area-chart-tooltip-label{color:var(--f7-area-chart-tooltip-total-label-text-color)}.area-chart-tooltip-total{font-size:var(--f7-area-chart-tooltip-total-font-size);font-weight:var(--f7-area-chart-tooltip-total-font-weight)}.area-chart-tooltip-list{list-style:none;margin:0;padding:0}.area-chart-tooltip-list li{white-space:nowrap}.area-chart-tooltip-list span{display:inline-block;width:var(--f7-area-chart-tooltip-color-size);height:var(--f7-area-chart-tooltip-color-size);border-radius:50%;margin-right:4px}.area-chart-axis~.area-chart-legend{margin-top:2em}.area-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:var(--f7-area-chart-legend-font-size);width:100%;margin-top:1em}.area-chart-legend-button{-webkit-appearance:none!important;appearance:none!important;background-color:transparent;border-radius:0;border:none;outline:0!important;cursor:pointer;font-family:inherit;font-size:inherit;box-shadow:none!important}.area-chart-legend-item{position:relative;color:var(--f7-area-chart-legend-text-color);width:auto;display:flex;align-items:center;font-weight:var(--f7-area-chart-legend-font-weight);transition-duration:.2s;padding:var(--f7-area-chart-legend-padding);border-radius:var(--f7-area-chart-legend-border-radius);overflow:hidden}.area-chart-legend-item span{width:var(--f7-area-chart-legend-color-size);height:var(--f7-area-chart-legend-color-size);margin-right:4px;border-radius:50%;transition-duration:.2s}.area-chart-legend-item-hidden{color:var(--f7-area-chart-legend-disabled-text-color)}.area-chart-legend-item-hidden span{background-color:var(--f7-area-chart-legend-disabled-text-color)!important}

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

@@ -1 +1,47 @@
-(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))
+import $ from '../../shared/dom7';
+import AreaChart from './area-chart-class';
+import ConstructorMethods from '../../shared/constructor-methods';
+export 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() {
+    const app = this;
+    app.areaChart = ConstructorMethods({
+      defaultSelector: '.area-chart',
+      constructor: AreaChart,
+      app,
+      domProp: 'f7AreaChart'
+    });
+
+    app.areaChart.update = function update(el, newParams) {
+      const $el = $(el);
+      if ($el.length === 0) return undefined;
+      const areaChart = app.areaChart.get(el);
+      if (!areaChart) return undefined;
+      areaChart.update(newParams);
+      return areaChart;
+    };
+  }
+
+};

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

@@ -0,0 +1 @@
+(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var a=e.$,s=e.utils,l=(e.getDevice,e.getSupport,e.Class),n=(e.Modal,e.ConstructorMethods),o=(e.ModalMethods,s.extend),r=s.deleteProps;class i extends l{constructor(e,t={}){super(t,[e]);const s=this,l=o({},e.params.areaChart);s.useModulesParams(l),s.params=o(l,t);const{el:n}=s.params;if(!n)return s;const r=a(n);return 0===r.length?s:r[0].f7AreaChart?r[0].f7AreaChart:(o(s,{app:e,$el:r,el:r&&r[0],currentIndex:null,hiddenDatasets:[],f7Tooltip:null,linesOffsets:null}),r[0].f7AreaChart=s,s.useModules(),s.onMouseEnter=s.onMouseEnter.bind(s),s.onMouseMove=s.onMouseMove.bind(s),s.onMouseLeave=s.onMouseLeave.bind(s),s.onLegendClick=s.onLegendClick.bind(s),s.init(),s)}getVisibleLabels(){const{maxAxisLabels:e,axisLabels:t}=this.params;if(!e||t.length<=e)return t;const a=Math.ceil(t.length/e);return t.filter(((e,t)=>t%a==0))}getSummValues(){const{datasets:e}=this.params,{hiddenDatasets:t}=this,a=[];return e.filter(((e,a)=>!t.includes(a))).forEach((({values:e})=>{e.forEach(((e,t)=>{a[t]||(a[t]=0),a[t]+=e}))})),a}getChartData(){const{datasets:e,lineChart:t,width:a,height:s}=this.params,{hiddenDatasets:l}=this,n=[];if(!e.length)return n;const o=e[0].values.map((()=>0));let r=0;return t?e.filter(((e,t)=>!l.includes(t))).forEach((({values:e})=>{const t=Math.max(...e);t>r&&(r=t)})):r=Math.max(...this.getSummValues()),e.filter(((e,t)=>!l.includes(t))).forEach((({label:e,values:l,color:i})=>{const d=l.map(((e,n)=>{o[n]+=e;const i=t?e:o[n],d=n/(l.length-1)*a,h=s-i/r*s;return t?`${0===n?"M":"L"}${d},${h}`:`${d} ${h}`}));t||d.push(`${a} ${s} 0 ${s}`),n.push({label:e,points:d.join(" "),color:i})})),n.reverse()}getVerticalLines(){const{datasets:e,width:t}=this.params,a=[];if(!e.length)return a;const s=e[0].values;return s.forEach(((e,l)=>{const n=l/(s.length-1)*t;a.push(n)})),a}toggleDataset(e){const{hiddenDatasets:t,params:{toggleDatasets:a}}=this;a&&(t.includes(e)?t.splice(t.indexOf(e),1):t.push(e),this.$legendEl&&(this.$legendEl.find(".area-chart-legend-item").removeClass("area-chart-legend-item-hidden"),t.forEach((e=>{this.$legendEl.find(`.area-chart-legend-item[data-index="${e}"]`).addClass("area-chart-legend-item-hidden")}))),this.update({},!0))}formatAxisLabel(e){const{formatAxisLabel:t}=this.params;return t?t.call(this,e):e}formatLegendLabel(e){const{formatLegendLabel:t}=this.params;return t?t.call(this,e):e}calcLinesOffsets(){const e=this.svgEl.querySelectorAll("line");this.linesOffsets=[];for(let t=0;t<e.length;t+=1)this.linesOffsets.push(e[t].getBoundingClientRect().left)}formatTooltip(){const e=this,{currentIndex:t,hiddenDatasets:a,params:{datasets:s,axisLabels:l,formatTooltip:n,formatTooltipTotal:o,formatTooltipAxisLabel:r,formatTooltipDataset:i}}=e;if(null===t)return"";let d=0;const h=s.filter(((e,t)=>!a.includes(t))).map((e=>({color:e.color,label:e.label,value:e.values[t]})));if(h.forEach((e=>{d+=e.value})),n)return n({index:t,total:d,datasets:h});let c=r?r.call(e,l[t]):this.formatAxisLabel(l[t]);c||(c="");return`\n        <div class="area-chart-tooltip-label">${c}</div>\n        <div class="area-chart-tooltip-total">${o?o.call(e,d):d}</div>\n        ${h.length>0?`\n        <ul class="area-chart-tooltip-list">\n          ${h.map((({label:t,color:a,value:s})=>`\n                <li><span style="background-color: ${a};"></span>${i?i.call(e,t,s,a):`${t?`${t}: `:""}${s}`}</li>\n              `)).join("")}\n        </ul>`:""}\n      `}setTooltip(){const e=this,{app:t,el:a,svgEl:s,hiddenDatasets:l,currentIndex:n,params:{tooltip:o,datasets:r}}=e;if(!o)return;if(r.filter(((e,t)=>!l.includes(t))).length>0)return null===n||e.f7Tooltip?void(e.f7Tooltip&&e.f7Tooltip.hide&&e.f7Tooltip.show&&(null!==n?(e.f7Tooltip.setText(e.formatTooltip()),e.f7Tooltip.setTargetEl(s.querySelector(`line[data-index="${n}"]`)),e.f7Tooltip.show()):e.f7Tooltip.hide())):(e.f7Tooltip=t.tooltip.create({trigger:"manual",containerEl:a,targetEl:s.querySelector(`line[data-index="${n}"]`),text:e.formatTooltip(),cssClass:"area-chart-tooltip"}),void(e.f7Tooltip&&e.f7Tooltip.show&&e.f7Tooltip.show()));e.f7Tooltip&&e.f7Tooltip.hide&&e.f7Tooltip.hide()}setCurrentIndex(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())}onLegendClick(e){const t=parseInt(a(e.target).closest(".area-chart-legend-item").attr("data-index"),10);this.toggleDataset(t)}onMouseEnter(){this.calcLinesOffsets()}onMouseMove(e){const t=this;t.linesOffsets||t.calcLinesOffsets();let a=e.pageX;void 0===a&&(a=0);const s=t.linesOffsets.map((e=>Math.abs(a-e))),l=Math.min(...s),n=s.indexOf(l);t.setCurrentIndex(n)}onMouseLeave(){this.setCurrentIndex(null)}attachEvents(){const{svgEl:e,$el:t}=this;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))}detachEvents(){const{svgEl:e,$el:t}=this;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))}render(){const e=this,{lineChart:t,toggleDatasets:a,width:s,height:l,axis:n,axisLabels:o,legend:r,datasets:i}=e.params,d=e.getChartData(),h=e.getVerticalLines(),c=e.getVisibleLabels(),u=a?"button":"span";return $jsx("div",null,$jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:s,height:l,viewBox:`0 0 ${s} ${l}`,preserveAspectRatio:"none"},d.map((e=>t?$jsx("path",{stroke:e.color,"fill-rule":"evenodd",d:e.points}):$jsx("polygon",{fill:e.color,"fill-rule":"evenodd",points:e.points}))),h.map(((e,t)=>$jsx("line",{"data-index":t,fill:"#000",x1:e,y1:0,x2:e,y2:l})))),n&&$jsx("div",{class:"area-chart-axis"},o.map((t=>$jsx("span",null,c.includes(t)&&$jsx("span",null,e.formatAxisLabel(t)))))),r&&$jsx("div",{class:"area-chart-legend"},i.map(((t,s)=>$jsx(u,{"data-index":s,class:"area-chart-legend-item "+(a?"area-chart-legend-button":""),_type:a?"button":void 0},$jsx("span",{style:`background-color: ${t.color}`}),e.formatLegendLabel(t.label))))))}update(e={},t=!1){const s=this,{params:l}=s;if(Object.keys(e).forEach((t=>{void 0!==e[t]&&(l[t]=e[t])})),0===s.$svgEl.length)return s;s.detachEvents(),s.$svgEl.remove(),t||(s.$axisEl.remove(),s.$legendEl.remove());const n=a(s.render()),r=n.find("svg");if(o(s,{svgEl:r&&r[0],$svgEl:r}),!t){const e=n.find(".area-chart-axis"),t=n.find(".area-chart-legend");o(s,{$axisEl:e,$legendEl:t}),s.$el.append(e),s.$el.append(t)}return s.$el.prepend(r),s.attachEvents(),s}init(){const e=this,t=a(e.render()),s=t.find("svg"),l=t.find(".area-chart-axis"),n=t.find(".area-chart-legend");return o(e,{svgEl:s&&s[0],$svgEl:s,$axisEl:l,$legendEl:n}),e.$el.append(s),e.$el.append(l),e.$el.append(n),e.attachEvents(),e}destroy(){const 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,r(e),e.destroyed=!0)}}var d={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(){const e=this;e.areaChart=n({defaultSelector:".area-chart",constructor:i,app:e,domProp:"f7AreaChart"}),e.areaChart.update=function(t,s){if(0===a(t).length)return;const l=e.areaChart.get(t);return l?(l.update(s),l):void 0}}};if(t){if(e.prototype.modules&&e.prototype.modules[d.name])return;e.use(d),e.instance&&(e.instance.useModuleParams(d,e.instance.params),e.instance.useModule(d))}return d}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))