Funnel move labels inside

by rgendron

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 200px; max-width: 500px; height: 500px; margin: 0 auto"></div>
<svg>
  <defs>
    <marker id="triangle" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
    <marker id="triangle2" markerWidth="8" markerHeight="6" refX="10" refY="5" viewBox="0 0 10 10" orient="auto">
      <path id="SvgjsPath1019" d="M0 0L10 5L0 10Z "></path>
    </marker>
  </defs>
</svg>

JavaScript

(function() {

  var Funnel = function(g_el, data) {
    this.el = $(g_el);
    this.paths = this.el.children('path');
    var that = this;

    this.levels = jQuery.map(this.paths, function(path, i) {
      return new Level(path, that, i)
    });

    this.connections = [];
    //['Created', 932821,[1]];
    this.init = function() {
      data.forEach(function(d, l1_i) {
        d[2].forEach(function(l2_i) {
            that.connect(l1_i, l2_i, (Math.round(data[l2_i][1] / data[l1_i][1] * 1000)) / 10 + '%')
          })
          //
      })
      this.optimize_connections()
    }
    this.connect = function(l1i, l2i, text) {
      text = text || '87%'
      new GatedConnection(this.levels[l1i], this.levels[l2i], text)
    }

    this.draw_connections = function() {
      this.connections.forEach(function(c) {
        c.draw()
      })
    }

    this.optimize_connections = function() {
      this.levels.forEach(function(le, li, la) {
        le.gates.optimize_locations()
        le.gates.optimize_connection_lengths()
        console.log("Optimizing :" + li)
      })
      this.draw_connections()
    }

    this.init();
  }


  var Level = function(path_el, funnel, index) {
    this.el = $(path_el);
    this.funnel = funnel;
    this.index = index;
    this.g_el = funnel.el;
    this.d_arr = this.el.attr('d').split(/\s+/);
    console.log(this.d_arr.length)
    this.x1 = +(this.d_arr.length == 15 ? this.d_arr[10] : this.d_arr[1]);
    this.x2 = +(this.d_arr.length == 15 ? this.d_arr[6] : this.d_arr[4]);
    this.y1 = +(this.d_arr[2]);
    this.y2 = +(this.d_arr[9]);
    this.mid_y = this.y1 + (this.y2 - this.y1) / 2;

    //this.gates_l = new GateList('left');
    //this.gates_r = new GateList('right');
    this.gates = new LevelGates(this)
    this.gates_l = this.gates.left
    this.gates_r = this.gates.right
      /*
      this.optimal_gate_loc = function(side) {
        if (this.gates_r.empty() && (side != 'left')) {
          return [this.gates_r.optimal(),...