work on visualisation

ang/crmContactcats/crmContactCategoryFlows.html

@@ -0,0 +1,86 @@
+<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"
+          />
+      DAte: {{$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="rfm-sk" >
+        <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.rows"
+                               id="{{p.gradient.id}}"
+                               >
+                               <stop offset="0%" stop-color="{{p.gradient.from}}" />
+                               <stop offset="100%" stop-color="{{p.gradient.to}}" />
+                           </linearGradient>
+                           </defs>
+
+          <path ng-repeat="p in $ctrl.sankey.rows"
+                d="{{p.d}}"
+                fill="{{p.fill}}"
+                fill-opacity=0.5
+                >
+                <title>{{p.n}} {{p.previousLabel}} → {{p.newLabel}}</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>
+
+