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="cc.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="cc.endDate"
          type=date
          name=endDate
          ng-model="$ctrl.endDate"
          />
    </div>
    <div crm-ui-field="{name: 'cc.changesOnly', title: ts('Show changes only')}" >
      <input
          crm-ui-id="cc.changesOnly"
          type=checkbox
          name=changesOnly
          ng-model="$ctrl.changesOnly"
          ng-change="$ctrl.redrawSankey()"
          />
    </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}}"
             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>

          <g transform="translate({{$ctrl.sankey.iconWidth}})">
            <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.label}} → {{p.toCat.label}}</title>
            </path>
          </g>
          <!-- to-side labels -->
          <g transform="translate({{$ctrl.sankey.iconWidth + $ctrl.sankey.snakeWidth}})">
            <rect ng-repeat="toAna in $ctrl.sankey.analysisArray.slice(0, -1)" 
                  x=0
                  y="{{toAna.y}}"
                  width=16
                  height="{{toAna.toCatHeight}}"
                  fill="{{toAna.cat.color}}"
                  ></rect>
            <foreignobject ng-repeat="toAna in $ctrl.sankey.analysisArray.slice(0, -1)" 
              x="20" y="{{toAna.y}}" width="{{$ctrl.sankey.labelWidth}}" height="{{toAna.thisCatHeight}}">
              <span class=sankey-label style="display:block;color:{{toAna.cat.color}}">
                <i class="crm-i {{toAna.cat.icon}}" title="{{toAna.cat.label}}"></i>
                {{toAna.cat.label}} {{toAna.now.toLocaleString()}}
              </span>
            </foreignobject>
          </g>
          <!-- from-side labels -->
          <g transform="translate({{$ctrl.sankey.iconWidth}})">
            <rect ng-repeat="toAna in $ctrl.sankey.analysisArray" 
                  x=0
                  y="{{toAna.y}}"
                  width=16
                  height="{{toAna.fromCatHeight}}"
                  fill="{{toAna.cat.color}}"
                  ></rect>
          </g>
          <g>
            <foreignobject ng-repeat="toAna in $ctrl.sankey.analysisArray" 
                           x=0 y="{{toAna.y}}" width="{{$ctrl.sankey.iconWidth}}"
                           height="{{toAna.thisCatHeight}}">
              <span class=sankey-label
                    style="display:block;text-align:center;color:{{toAna.cat.color}}"
                ><i class="crm-i {{toAna.cat.icon}}" title="{{toAna.cat.label}} {{toAna.previous.toLocaleString()}}"></i>
              </span>
            </foreignobject>
          </g>
          <!--
          <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>