diff --git a/capabilities.json b/capabilities.json index 69b63ff..08e11cf 100644 --- 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 index 0a112af..fc15a70 100644 --- 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 index 3a3dd97..c06c7a6 100644 --- 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(objects, 'calendar', 'weekAlignment', defaultSettings.weekAlignment), dayAlignment: getValue(objects, 'calendar', 'dayAlignment', defaultSettings.dayAlignment), calendarColors: { + colorType: getValue(objects, 'calendarColors', 'colorType', defaultSettings.calendarColors.colorType), diverging: getValue(objects, 'calendarColors', 'diverging', defaultSettings.calendarColors.diverging), startColor: getValue(objects, 'calendarColors', 'startColor', defaultSettings.calendarColors.startColor), centerColor: getValue(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({