Server : Apache/2.4.41 (Ubuntu) System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 User : www-data ( 33) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, Directory :  /var/www/html/libs/absol-full/dist/js/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

/*** module: node_modules/absol-vchart/src/FunnelChart.js ***/
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("./style/base.css");

require("./style/funnelchart.css");

var _VCore = _interopRequireDefault(require("./VCore"));

var _AElement = _interopRequireDefault(require("absol/src/HTML5/AElement"));

var _ResizeSystem = _interopRequireDefault(require("absol/src/HTML5/ResizeSystem"));

var _DomSignal = _interopRequireDefault(require("absol/src/HTML5/DomSignal"));

var _template = require("./template");

var _helper = require("./helper");

var _Color = _interopRequireDefault(require("absol/src/Color/Color"));

var _BChart = _interopRequireWildcard(require("./BChart"));




var _ = _VCore.default._;
var $ = _VCore.default.$;
/***
 * @extends AElement
 * @constructor
 */

function FunnelChart() {
  this.resizeCtrl = new _BChart.ChartResizeController(this);
  this.$attachhook = $('sattachhook.av-hook', this);
  this.$attachhook.on('attached', this.eventHandler.attached);
  this.$attachhook.requestUpdateSize = this.updateSize.bind(this);
  this.domSignal = new _DomSignal.default($('sattachhook.av-signal', this)).on('_createContent', this.createContent.bind(this)).on('_alignContent', this._alignContent.bind(this)).on('_updateContent', this._updateContent.bind(this));
  this.$content = $('.av-funnel-content', this);
  this.$funnelCtn = $('.av-funnel-ctn', this);
  this.$noteCtn = $('.av-funnel-note-ctn', this);
  this.$notes = [];
  this._contentMargin = 5;
  this._contentWidth = 0;
  this._contentHeight = 0;
  this.$title = $('.vc-title', this);
  this.$blocks = [];
  this.blocks = [];
  this._cavasWidth = 0;
  this._canvasHeight = 0;
  this.domSignal.emit('_updateContent');
}

FunnelChart.tag = 'FunnelChart'.toLowerCase();

FunnelChart.render = function () {
  return _({
    tag: 'svg',
    class: ['vc-chart', 'av-funnel-chart'],
    child: [{
      tag: 'text',
      class: 'vc-title',
      child: {
        text: ''
      }
    }, {
      class: 'av-funnel-content',
      child: [{
        class: 'av-funnel-ctn',
        child: {
          class: 'av-funnel'
        }
      }, {
        class: 'av-funnel-note-ctn',
        child: []
      }]
    }, 'sattachhook.av-hook', 'sattachhook.av-signal']
  });
};

FunnelChart.prototype._updateCanvasSize = function () {
  var bound = this.getBoundingClientRect();
  var width = bound.width;
  var height = bound.height;
  this._canvasHeight = height;
  this._cavasWidth = width;
  this.attr('width', width + '');
  this.attr('height', height + '');
  this.attr('viewBox', [0.5, 0.5, width, height].join(' '));
};

FunnelChart.prototype.updateSize = function () {
  this._updateCanvasSize();

  this._alignContent();
};

FunnelChart.prototype.normalizeData = function () {
  var blockColor = (0, _helper.generateBackgroundColors)(this.blocks.length);
  var sum = this.blocks.reduce(function (ac, cr) {
    return ac + cr.value;
  }, 0);
  this.blocks.forEach(function (block, i) {
    block.color = block.color || blockColor[i];
    block.percent = block.value * 100 / sum;
  });
};

FunnelChart.prototype.createContent = function () {
  this.normalizeData();
  this.$title.firstChild.data = this.title + '';
  this.$funnelCtn.clearChild();

  this._createNote();

  this._createFunnel();
};

FunnelChart.prototype._createNote = function () {
  var thisC = this;
  this.$noteCtn.clearChild();
  this.$notes = this.blocks.map(function (block) {
    var noteElt = thisC._makeNote(block);

    thisC.$noteCtn.addChild(noteElt);
    return noteElt;
  });
};

FunnelChart.prototype._createFunnel = function () {
  var thisC = this;
  this.$blocks = this.blocks.map(function (block) {
    var blockElt = thisC._makeBlock(block);

    thisC.$funnelCtn.addChild(blockElt);
    return blockElt;
  });
};

FunnelChart.prototype._makeNote = function (block) {
  var $note = _({
    class: 'av-funnel-note',
    child: [{
      tag: 'text',
      style: {
        fill: block.color
      },
      attr: {
        y: 30
      },
      class: 'av-funnel-note-name',
      child: {
        text: block.name
      }
    }, {
      class: 'av-funnel-note-desc'
    }]
  });

  $note.$name = $('av-funnel-note-name', $note);
  return $note;
};

FunnelChart.prototype._makeBlock = function (block) {
  var valueColor = _Color.default.parse(block.color + '').getContrastYIQ();

  var percenColor = valueColor.clone();
  percenColor.rgba[0] = (percenColor.rgba[0] + Math.sqrt(0.5)) / 2;
  percenColor.rgba[1] = (percenColor.rgba[1] + Math.sqrt(0.5)) / 2;
  percenColor.rgba[2] = (percenColor.rgba[2] + Math.sqrt(0.5)) / 2;

  var $block = _({
    class: 'av-funnel-block',
    child: [{
      tag: 'shape',
      class: 'av-funnel-block-shape',
      style: {
        fill: block.color + ''
      }
    }, {
      tag: 'text',
      class: 'av-funnel-block-value',
      attr: {
        y: 25
      },
      style: {
        fill: valueColor + ''
      },
      child: {
        text: block.value
      }
    }, {
      tag: 'text',
      class: 'av-funnel-block-percent',
      attr: {
        y: 55
      },
      style: {
        fill: percenColor + ''
      },
      child: {
        text: block.percent.toFixed(1) + '%'
      }
    }]
  });

  $block.$shape = $('shape', $block);
  $block.$value = $('.av-funnel-block-value', $block);
  return $block;
};

FunnelChart.prototype._alignNote = function () {
  var dy = this._contentHeight / this.blocks.length;
  this._stackHeight = dy;
  this.$notes.forEach(function (noteElt, i) {
    noteElt.attr({
      transform: (0, _template.translate)(0, dy * i)
    });
  });
  var noteWidth = this.$noteCtn.getBBox().width;
  this._noteCtnX = this._contentWidth - noteWidth;
  this.$noteCtn.attr({
    transform: (0, _template.translate)(this._noteCtnX, 0)
  });
};

FunnelChart.prototype._alignFunnel = function () {
  var thisC = this;
  this._funnelWidth = this._noteCtnX - 20;
  var maxValue = this.blocks.reduce(function (ac, block) {
    return Math.max(ac, block.value);
  }, 0);
  this.$funnelCtn.attr('transform', (0, _template.translate)(this._funnelWidth / 2, 0));
  this.$blocks.forEach(function (blockElt, i) {
    var block = thisC.blocks[i];
    var nextBlock = thisC.blocks[i + 1] || block;
    var y = i * thisC._stackHeight;
    blockElt.$shape.begin().moveTo(-thisC._funnelWidth / 2 * block.value / maxValue, 0).lineTo(thisC._funnelWidth / 2 * block.value / maxValue, 0).lineTo(thisC._funnelWidth / 2 * nextBlock.value / maxValue, thisC._stackHeight).lineTo(-thisC._funnelWidth / 2 * nextBlock.value / maxValue, thisC._stackHeight).closePath().end();
    blockElt.attr('transform', (0, _template.translate)(0, y));
  });
};

FunnelChart.prototype._alignContent = function () {
  if (!this.isDescendantOf(document.body)) {
    this.domSignal.emit('_alignContent');
    return;
  }

  this.$title.attr({
    x: this._cavasWidth / 2,
    y: 14 + this._contentMargin
  });
  this.$content.attr('transform', (0, _template.translate)(this._contentMargin, this._contentMargin + 50));
  this._contentWidth = this._cavasWidth - this._contentMargin * 2;
  this._contentHeight = this._canvasHeight - this._contentMargin * 2 - 50;

  this._alignNote();

  this._alignFunnel();
};

FunnelChart.prototype._updateContent = function () {
  this.createContent();

  this._alignContent();
};
/***
 *
 * @type {FunnelChart}
 */


FunnelChart.eventHandler = {};

FunnelChart.eventHandler.attached = function () {
  _ResizeSystem.default.add(this.$attachhook);

  this.updateSize();
};

_VCore.default.install(FunnelChart);

var _default = FunnelChart;
exports.default = _default;