Displaying the legend with specific dataset breaks the visual - fixed (…

…#14) * Displaying the legend with specific dataset breaks the visual - fixed * Fix sorting of legend group * Fix legend overlapping * Fix legend sorting issue * Fix gradient color updating
microsoft · Nov 23, 2017 · 943ab2a · 943ab2a
1 parent 131c164
commit 943ab2a
Show file tree

Hide file tree

Showing 13 changed files with 253 additions and 151 deletions.
diff --git a/capabilities.json b/capabilities.json
@@ -428,6 +428,40 @@
                     }
                 }
             }
+        },
+        "categoryColorStart": {
+            "displayName": "Categoty data colors start",
+            "displayNameKey": "Visual_CategoryDataColorsStart",
+            "properties": {
+                "categoryGradient": {
+                    "displayName": "Start color",
+                    "displayNameKey": "Visual_GradientStartColor",
+                    "type": {
+                        "fill": {
+                            "solid": {
+                                "color": true
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        "categoryColorEnd": {
+            "displayName": "Categoty data colors end",
+            "displayNameKey": "Visual_CategoryDataColorsEnd",
+            "properties": {
+                "categoryGradient": {
+                    "displayName": "End color",
+                    "displayNameKey": "Visual_GradientEndColor",
+                    "type": {
+                        "fill": {
+                            "solid": {
+                                "color": true
+                            }
+                        }
+                    }
+                }
+            }
         }
     },
     "dataViewMappings": [

diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,6 @@
+## 1.9.3
+
+* Displaying the legend with specific dataset breaks the visual - fixed
 
 ## 1.9.2
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-mekkochart",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "description": "A Mekko chart is a mix of a 100% stacked column chart and a 100% stacked bar chart combined into one view. Similar to a treemap, the dimensional values are represented by length and width of each rectangle. The width of a column is proportional to the total value of the column.",
   "repository": {
     "type": "git",

diff --git a/pbiviz.json b/pbiviz.json
@@ -1,15 +1,15 @@
 {
   "visual": {
     "name": "MekkoChart",
-    "displayName": "Mekko Chart 1.9.2",
+    "displayName": "Mekko Chart 1.9.3",
     "guid": "MekkoChart1449744733038",
     "visualClassName": "MekkoChart",
-    "version": "1.9.2",
+    "version": "1.9.3",
     "description": "A Mekko chart is a mix of a 100% stacked column chart and a 100% stacked bar chart combined into one view. Similar to a treemap, the dimensional values are represented by length and width of each rectangle. The width of a column is proportional to the total value of the column.",
     "supportUrl": "http://community.powerbi.com",
     "gitHubUrl": "https://github.com/Microsoft/powerbi-visuals-mekkochart"
   },
-  "apiVersion": "1.6.0",
+  "apiVersion": "1.7.0",
   "author": {
     "name": "Microsoft",
     "email": "[email protected]"

diff --git a/src/columnChart/baseColumnChart.ts b/src/columnChart/baseColumnChart.ts
@@ -307,6 +307,7 @@ module powerbi.extensibility.visual.columnChart {
             // Allocate colors
             let legendAndSeriesInfo: LegendSeriesInfo = converterStrategy.getLegend(colors, defaultDataPointColor, "", dataPointSettings.categoryGradient, dataPointSettings.colorGradientEndColor.solid.color);
             let legend: MekkoLegendDataPoint[] = legendAndSeriesInfo.legend.dataPoints;
+
             let seriesSources: DataViewMetadataColumn[] = legendAndSeriesInfo.seriesSources;
 
             // Determine data points
@@ -1199,13 +1200,38 @@ module powerbi.extensibility.visual.columnChart {
                     this.enumerateSortLegend(enumeration);
                     break;
                 }
-                case "sortSeries": {
-                    this.enumerateSortSeries(enumeration);
+                case "categoryColorStart": {
+                    this.enumerateCategoryColors(enumeration, "categoryColorStart", "Start color");
+                    break;
+                }
+                case "categoryColorEnd": {
+                    this.enumerateCategoryColors(enumeration, "categoryColorEnd", "End color");
                     break;
                 }
             }
         }
 
+        private enumerateCategoryColors(instances: VisualObjectInstance[], objectName: string, label: string) {
+            if (this.data.dataPointSettings && this.data.dataPointSettings.categoryGradient) {
+                this.data.categories.forEach( (category, index ) => {
+                    let categoryLegends: MekkoLegendDataPoint[] = this.data.legendData.dataPoints.filter( legend => legend.category === category);
+
+                    instances.push({
+                        objectName: objectName,
+                        displayName: `${label} -${category}`,
+                        selector: ColorHelper.normalizeSelector((categoryLegends[0].categoryIdentity as ISelectionId).getSelector(), true),
+                        properties: {
+                            categoryGradient: {
+                                solid: {
+                                    color: objectName === "categoryColorStart" ? categoryLegends[0].categoryStartColor : categoryLegends[0].categoryEndColor
+                                }
+                            }
+                        },
+                    });
+                });
+            }
+        }
+
         private enumerateXAxisLabels(instances: VisualObjectInstance[]): void {
             instances[0] = <VisualObjectInstance>{
                 objectName: "xAxisLabels",
@@ -1221,12 +1247,9 @@ module powerbi.extensibility.visual.columnChart {
             };
             instances[0].properties["enabled"] = this.data.sortlegend.enabled;
             instances[0].properties["direction"] = this.data.sortlegend.direction;
-            let allowedGroupByCategory = this.checkDataToFeatures();
 
-            if (allowedGroupByCategory) {
-                instances[0].properties["groupByCategory"] = this.data.sortlegend.groupByCategory;
-                instances[0].properties["groupByCategoryDirection"] = this.data.sortlegend.groupByCategoryDirection;
-            }
+            instances[0].properties["groupByCategory"] = this.data.sortlegend.groupByCategory;
+            instances[0].properties["groupByCategoryDirection"] = this.data.sortlegend.groupByCategoryDirection;
         }
 
         private enumerateSortSeries(instances: VisualObjectInstance[]): void {
@@ -1315,18 +1338,14 @@ module powerbi.extensibility.visual.columnChart {
                 return;
             }
 
-            let allowedCategoryGradient = this.checkDataToFeatures();
-
-            if (allowedCategoryGradient) {
-                let properties: any = {};
-                properties["categoryGradient"] = this.data.dataPointSettings.categoryGradient;
+            let properties: any = {};
+            properties["categoryGradient"] = this.data.dataPointSettings.categoryGradient;
 
-                instances.push({
-                    objectName: "dataPoint",
-                    selector: null,
-                    properties: properties
-                });
-            }
+            instances.push({
+                objectName: "dataPoint",
+                selector: null,
+                properties: properties
+            });
 
             if (data.hasDynamicSeries || seriesCount > 1 || !data.categoryMetadata) {
                 if (!this.data.dataPointSettings.categoryGradient) {
@@ -1341,37 +1360,6 @@ module powerbi.extensibility.visual.columnChart {
                         });
                     }
                 }
-                else {
-                    this.data.categories.forEach( (category, index ) => {
-                    let categoryLegends: MekkoLegendDataPoint[] = this.data.legendData.dataPoints.filter( legend => legend.category === category);
-                    let maxValueDataPoint = _.maxBy(categoryLegends, "valueSum");
-                    if (maxValueDataPoint === undefined) {
-                        return;
-                    }
-                    let minValueDataPoint = _.minBy(categoryLegends, "valueSum");
-                    if (minValueDataPoint === undefined) {
-                        return;
-                    }
-
-                    instances.push({
-                        objectName: "dataPoint",
-                        displayName: "Start color -" + category,
-                        selector: ColorHelper.normalizeSelector((maxValueDataPoint.identity as ISelectionId).getSelector(), true),
-                        properties: {
-                            fill: { solid: { color: maxValueDataPoint.color } }
-                        },
-                    });
-
-                    instances.push({
-                        objectName: "dataPoint",
-                        displayName: "End color -" + category,
-                        selector: ColorHelper.normalizeSelector((minValueDataPoint.identity as ISelectionId).getSelector(), true),
-                        properties: {
-                            fill: { solid: { color: minValueDataPoint.color } }
-                        },
-                    });
-                });
-                }
             }
             else {
                 // For single-category, single-measure column charts, the user can color the individual bars.