contactcats/ang/crmContactcats/crmContactCategoryFlows.html

<div id=bootstrap-theme>
  <form crm-ui-id-scope >
    <div crm-ui-field="{name: 'cc.startDate', title: ts('Start date')}" >
      <input
          crm-ui-id="ci.startDate"
          type=date
          name="startDate"
          ng-model="$ctrl.startDate"
          />
    </div>
    <div crm-ui-field="{name: 'cc.endDate', title: ts('End date')}" >
      <input
          crm-ui-id="ci.endDate"
          type=date
          name="endDate"
          ng-model="$ctrl.endDate"
          />
    </div>
    <div>
      <button ng-click="$ctrl.fetchStats()"  >
        <i ng-if="$ctrl.loading" class="crm-i fa-spin fa-spinner"></i>
        <i ng-if="!$ctrl.loading" class="crm-i fa-search"></i>
        {{ts('Calculate flows')}}</button>
    </div>
    <div>
      <p ng-if="$ctrl.noStats">{{ts('No results')}}</p>

      <div class="contact-cats-sankey" >
        <svg viewBox="0 0 {{ $ctrl.sankey.width }} {{ $ctrl.sankey.height }}"
             width="{{$ctrl.sankey.width}}"
             height="{{$ctrl.sankey.height}}"
             style="width: 100%; height: auto;"
             version="1.1" xmlns="http://www.w3.org/2000/svg"
                           >
         <defs>
         <linearGradient
             ng-repeat="p in $ctrl.sankey.snakes"
             id="{{p.gradientId}}"
             >
             <stop offset="0%" stop-color="{{p.fromCat.color}}" />
             <stop offset="100%" stop-color="{{p.toCat.color}}" />
         </linearGradient>
         </defs>

          <path ng-repeat="p in $ctrl.sankey.snakes"
                d="{{p.d}}"
                fill="{{p.fill}}"
                fill-opacity=0.5
                >
                <title>{{p.source.contact_count}} {{p.fromCat.name}} → {{p.toCat.name}}</title>
          </path>
          <!--
          <g ng-repeat="label in $ctrl.sankey.labels">
          <text x="{{$ctrl.sankey.labelWidth - 4}}"
                y="{{label.y}}"
                text-anchor=end
                dy=14
                font-size=16
                >{{label.label}}</text>
          <text x="{{$ctrl.sankey.width - $ctrl.sankey.labelWidth + 4}}"
                y="{{label.y}}"
                dy=14
                font-size=16
                >{{label.label}}</text>
          </g>
          <!-- ticks on vertical axis -->
          <!--
          <path ng-repeat="label in $ctrl.sankey.labels"
                d="M{{$ctrl.sankey.labelWidth - 4}},{{label.y}} l4,0
                   M{{$ctrl.sankey.width - $ctrl.sankey.labelWidth}},{{label.y}} l4,0"
                stroke-width=1 stroke='#333'></path>
          <path d="M{{$ctrl.sankey.labelWidth - 4}},{{$ctrl.sankey.height - 1}} l4,0
                   M{{$ctrl.sankey.width - $ctrl.sankey.labelWidth}},{{$ctrl.sankey.height - 1}} l4,0"
                class="sk1"
                stroke-width=1 stroke='#333'></path>
          <!-- vertical axis -->
          <!--
          <path d="M{{$ctrl.sankey.labelWidth}},0 l0,{{$ctrl.sankey.height}}
                   M{{$ctrl.sankey.width - $ctrl.sankey.labelWidth}},0 l0,{{$ctrl.sankey.height}}"
                stroke='#333'></path>
                -->
        </svg>
      </div>

    </div>
  </form>
</div>