Merge pull request #26 from mannymerino/fixed-data-colors

new feature: fixed data colors. resolves issue #19
mannymerino · Apr 26, 2018 · f37e855 · f37e855
2 parents 600f937 + 25deb62
commit f37e855
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 27 deletions.
diff --git a/capabilities.json b/capabilities.json
@@ -228,6 +228,22 @@
         "calendarColors": {
             "displayName": "Data Colors",
             "properties": {
+                "colorType": {
+                    "displayName": "Type",
+                    "description": "Choose how you would like the data colors to be displayed (Fixed or Gradient).",
+                    "type": {
+                        "enumeration": [
+                            {
+                                "value": "fixed",
+                                "displayName": "Fixed"
+                            },
+                            {
+                                "value": "gradient",
+                                "displayName": "Gradient"
+                            }
+                        ]
+                    }
+                },
                 "diverging": {
                     "displayName": "Diverging",
                     "type": {

diff --git a/src/bciCalendar.js b/src/bciCalendar.js
@@ -1,6 +1,6 @@
 !function() {
     var bciCalendar = {};
-    var _this = {};
+    var self = {};
 
     consts = {
         monthNames: [
@@ -29,12 +29,21 @@
     };
 
     bciCalendar.loadCalendar = function (element, viewModel, settings, selectionManager, allowInteractions) {
-        _this = {
+        self = {
             calendar: element,
             viewModel: viewModel,
             settings: settings,
             selectionManager: selectionManager,
-            allowInteractions: allowInteractions
+            allowInteractions: allowInteractions,
+            minValue: settings.calendarColors.minValue || d3.min(viewModel.dataPoints.map(function(d) {
+                return d.value;
+            })),
+            centerValue: settings.calendarColors.centerValue || d3.mean(viewModel.dataPoints.map(function(d) {
+                return d.value;
+            })),
+            maxValue: settings.calendarColors.maxValue || d3.max(viewModel.dataPoints.map(function(d) {
+                return d.value;
+            }))
         };
 
         var calendar = element;
@@ -109,33 +118,17 @@
                 return d;
             });
 
-        var minValue = settings.calendarColors.minValue,
-            centerValue = settings.calendarColors.centerValue,
-            maxValue = settings.calendarColors.maxValue,
-            color = d3.scale.linear();
+        self.linear = d3.scale.linear();
 
         if (settings.calendarColors.diverging) {
-            color
-                .domain([minValue || d3.min(viewModel.dataPoints.map(function(d) {
-                    return d.value;
-                })), 
-                centerValue || d3.mean(viewModel.dataPoints.map(function(d) {
-                    return d.value;
-                })), 
-                maxValue || d3.max(viewModel.dataPoints.map(function(d) {
-                    return d.value;
-                }))])
+            self.linear
+                .domain([self.minValue, self.centerValue, self.maxValue])
                 .range([settings.calendarColors.startColor.solid.color, 
-                settings.calendarColors.centerColor.solid.color,
-                settings.calendarColors.endColor.solid.color]);
+                    settings.calendarColors.centerColor.solid.color,
+                    settings.calendarColors.endColor.solid.color]);
         } else {
-            color
-                .domain([minValue || d3.min(viewModel.dataPoints.map(function(d) {
-                    return d.value;
-                })), 
-                maxValue || d3.max(viewModel.dataPoints.map(function(d) {
-                    return d.value;
-                }))])
+            self.linear
+                .domain([self.minValue, self.maxValue])
                 .range([settings.calendarColors.startColor.solid.color, settings.calendarColors.endColor.solid.color]);
         }
 
@@ -237,7 +230,7 @@
             var day = date.getDate();
             var id = className + '-' + year.toString() + month.toString() + day.toString();
             var td = d3.select('#' + id)
-            td.style('background-color', color(dataValue));
+            td.style('background-color', getColor(dataValue));
 
             height = height || td.node().getBoundingClientRect().height;
 
@@ -302,6 +295,24 @@
         }
     };
 
+    function getColor(dataValue) {
+        const settings = self.settings;
+        let color;
+        if (settings.calendarColors.colorType === 'fixed') {
+            if (settings.calendarColors.diverging) {
+                if (dataValue <= self.maxValue && dataValue > self.centerValue) color = settings.calendarColors.endColor.solid.color;
+                else if (dataValue > self.minValue && dataValue <= self.centerValue) color = settings.calendarColors.centerColor.solid.color;
+                else color = settings.calendarColors.startColor.solid.color;
+            } else {
+                if (dataValue < self.centerValue) color = settings.calendarColors.startColor.solid.color;
+                else color = settings.calendarColors.endColor.solid.color;                
+            }
+        } else {
+            color = self.linear(dataValue);
+        }
+        return color;
+    }
+
     /**
      * Credit: Ported from npm package 'calendar' 
      * https://www.npmjs.com/package/calendar

diff --git a/src/visual.ts b/src/visual.ts
@@ -79,6 +79,7 @@ module powerbi.extensibility.visual {
     };
 
     interface ColorSettings {
+        colorType: string;
         diverging: boolean;
         startColor: Fill;
         centerColor: Fill;
@@ -137,6 +138,7 @@ module powerbi.extensibility.visual {
             weekAlignment: 'center',
             dayAlignment: 'right',
             calendarColors: {
+                colorType: 'gradient',
                 diverging: false,
                 startColor: {
                     solid: {
@@ -236,6 +238,7 @@ module powerbi.extensibility.visual {
             weekAlignment: getValue<string>(objects, 'calendar', 'weekAlignment', defaultSettings.weekAlignment),
             dayAlignment: getValue<string>(objects, 'calendar', 'dayAlignment', defaultSettings.dayAlignment),
             calendarColors: {
+                colorType: getValue<string>(objects, 'calendarColors', 'colorType', defaultSettings.calendarColors.colorType),
                 diverging: getValue<boolean>(objects, 'calendarColors', 'diverging', defaultSettings.calendarColors.diverging),
                 startColor: getValue<Fill>(objects, 'calendarColors', 'startColor', defaultSettings.calendarColors.startColor),
                 centerColor: getValue<Fill>(objects, 'calendarColors', 'centerColor', defaultSettings.calendarColors.centerColor),
@@ -477,6 +480,7 @@ module powerbi.extensibility.visual {
                     objectEnumeration.push({
                         objectName: objectName,
                         properties: {
+                            colorType: this.calendarSettings.calendarColors.colorType,
                             diverging: this.calendarSettings.calendarColors.diverging,
                             startColor: this.calendarSettings.calendarColors.startColor,
                             centerColor: this.calendarSettings.calendarColors.diverging ? this.calendarSettings.calendarColors.centerColor : null,
@@ -488,6 +492,17 @@ module powerbi.extensibility.visual {
                         },
                         selector: null
                     });
+                    let object: VisualObjectInstance = objectEnumeration[0];
+                    if (!this.calendarSettings.calendarColors.diverging) {
+                        if (this.calendarSettings.calendarColors.colorType === 'gradient') {
+                            delete object.properties.centerColor;
+                            delete object.properties.centerValue;
+                        } else {
+                            delete object.properties.centerColor;
+                            delete object.properties.minValue;
+                            delete object.properties.maxValue;                            
+                        }
+                    }
                     break;
                 case 'dataLabels':
                     objectEnumeration.push({