chartkit - add heat map chart type

ext/chart_kit/ang/crmChartKit/chartKitChartTypes.service.js

@@ -7,7 +7,8 @@
     chartKitRow,
     chartKitStack,
     chartKitComposite,
-    chartKitSeries
+    chartKitSeries,
+    chartKitHeatMap
   ) => {
 
     const ts = CRM.ts('chart_kit');
@@ -81,6 +82,12 @@
         icon: 'fa-layer-group',
         service: chartKitComposite
       },
+      {
+        key: 'heatmap',
+        label: ts('Heat Map'),
+        icon: 'fa-table-cells-large',
+        service: chartKitHeatMap
+      },
     ];
 
     return {

ext/chart_kit/ang/crmChartKit/chartTypes/chartKitHeatMap.service.js

+(function (angular, $, _, dc, d3) {
+  "use strict";
+
+  angular.module('crmChartKit').factory('chartKitHeatMap', () => ({
+    adminTemplate: '~/crmChartKit/chartTypes/chartKitHeatMapAdmin.html',
+
+    getAxes: () => ({
+      'w': {
+        label: ts('Columns'),
+        reduceTypes: ['list'],
+        scaleTypes: ['categorical'],
+        dataLabelTypes: ['title', 'label', 'none'],
+        multiColumn: true,
+        isDimension: true,
+      },
+      'v': {
+        label: ts('Rows'),
+        reduceTypes: ['list'],
+        scaleTypes: ['categorical'],
+        dataLabelTypes: ['title', 'label', 'none'],
+        isDimension: true,
+      },
+      'y': {
+        label: ts('Color'),
+        dataLabelTypes: ['title', 'label', 'none'],
+      },
+      'z': {
+        label: ts('Additional labels'),
+        dataLabelTypes: ['label', 'title'],
+        prepopulate: false,
+        multiColumn: true,
+      }
+    }),
+
+    hasCoordinateGrid: () => false,
+
+    getInitialDisplaySettings: () => ({
+      colorScaleMin: '#91223c',
+      colorScaleMax: '#2e562e',
+    }),
+
+    getChartConstructor: () => dc.heatMap,
+
+    loadChartData: (displayCtrl) => {
+      const colColumn = displayCtrl.getFirstColumnForAxis('w');
+      const rowColumn = displayCtrl.getFirstColumnForAxis('v');
+      const colorColumn = displayCtrl.getFirstColumnForAxis('y');
+
+      displayCtrl.chart
+        .dimension(displayCtrl.dimension)
+        .group(displayCtrl.group)
+        .keyAccessor(displayCtrl.getValueAccessor(colColumn), colColumn.label)
+        .colsLabel((d) => displayCtrl.renderDataValue(d[0], colColumn))
+        .colOrdering((a, b) => d3.ascending(a[0], b[0]))
+        .valueAccessor(displayCtrl.getValueAccessor(rowColumn), rowColumn.label)
+        .rowsLabel((d) => displayCtrl.renderDataValue(d[0], rowColumn))
+        .rowOrdering((a, b) => {
+          return d3.ascending(displayCtrl.renderDataValue(a, rowColumn), displayCtrl.renderDataValue(b, rowColumn));
+        });
+
+      // set up color scale
+      displayCtrl.chart
+        .colorAccessor(displayCtrl.getValueAccessor(colorColumn))
+        .calculateColorDomain();
+      const colorScale = d3.scaleLinear(displayCtrl.chart.colorDomain(), [displayCtrl.settings.colorScaleMin, displayCtrl.settings.colorScaleMax]);
+      displayCtrl.chart.colors(colorScale);
+
+
+      // add labels
+      displayCtrl.chart
+        .on('renderlet', () => {
+          // add additional text box to each heatbox
+          const boxGroups = displayCtrl.chart.selectAll('.box-group');
+
+          // remove any existing labels to avoid duplication
+          boxGroups.selectAll('text.heat-box-label').remove();
+
+          // regen label text node for each box group
+          boxGroups.append(function (d) {
+            const rect = this.querySelector('rect.heat-box');
+            const getFloatAttrFromRect = (attr) => parseFloat(rect.getAttribute(attr));
+            const x = getFloatAttrFromRect('x') + getFloatAttrFromRect('width') / 2;
+            const y = getFloatAttrFromRect('y') + getFloatAttrFromRect('height') / 2;
+
+            const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            label.classList.add('heat-box-label');
+            label.setAttribute('x', x);
+            label.setAttribute('y', y);
+            label.setAttribute('fill', displayCtrl.settings.format.labelColor);
+            label.style.textAnchor = 'middle';
+
+            return label;
+          });
+
+          // assign the text content
+          boxGroups.select('.heat-box-label').text((d) => displayCtrl.renderDataLabel(d, displayCtrl.dataPointLabelMask('label')(d)).replaceAll('\n', ' - '));
+        });
+    }
+  }));
+})(angular, CRM.$, CRM._, CRM.chart_kit.dc, CRM.chart_kit.d3);
+

ext/chart_kit/ang/crmChartKit/chartTypes/chartKitHeatMapAdmin.html

+<div class="crm-chart-kit-pie-admin">
+
+  <div ng-include="'~/crmChartKit/chartKitAdminColumns.html'"></div>
+
+  <div class="crm-chart-kit-admin-presentation">
+
+    <div ng-include="'~/crmChartKit/chartKitAdminCanvas.html'"></div>
+
+    <fieldset>
+      <legend>{{:: ts('Heat map options') }}</legend>
+      <div class="form-inline">
+        <label>{{:: ts('Color Min') }}</label>
+        <input type="color" class="form-control" ng-model="$ctrl.display.settings.colorScaleMin">
+      </div>
+      <div class="form-inline">
+        <label>{{:: ts('Color Max') }}</label>
+        <input type="color" class="form-control" ng-model="$ctrl.display.settings.colorScaleMax">
+      </div>
+
+    </fieldset>
+
+</div>
\ No newline at end of file