Fixed standrat pie

src/common/kustoChartHelper.ts

@@ -245,7 +245,7 @@ export class KustoChartHelper implements IChartHelper {
 
     private selectDefaultSplitByColumn(supportedColumns: IColumn[], selectedXAxis: IColumn, chartType: ChartType): IColumn {
         // Pie / Donut chart default is without a splitBy column
-        if (!supportedColumns || supportedColumns.length === 0 || !selectedXAxis || chartType === ChartType.Pie || chartType === ChartType.Donut) {
+        if (!supportedColumns || supportedColumns.length === 0 || !selectedXAxis || Utilities.isPieOrDonut(chartType)) {
             return null;
         }
 

src/common/utilities.ts

@@ -1,7 +1,7 @@
 'use strict';
 
 import * as moment from 'moment';
-import { IQueryResultData, IColumn, DraftColumnType } from './chartModels';
+import { IQueryResultData, IColumn, DraftColumnType, ChartType } from './chartModels';
 
 export class Utilities {
     // Returns the index of the column with the same name and type in the columns array
@@ -67,4 +67,8 @@ export class Utilities {
     public static areColumnsEqual(first: IColumn, second: IColumn): boolean {
         return first.name == second.name && first.type == second.type;
     }
+
+    public static isPieOrDonut(chartType: ChartType): boolean {
+        return chartType === ChartType.Pie || chartType === ChartType.Donut;
+    }
 }

src/visualizers/highcharts/commonChartTypeToHighcharts.ts

@@ -81,7 +81,8 @@ export const CommonChartTypeToHighcharts: { [key in ChartType]: ChartTypeOptions
         chartType: 'pie',
         plotOptions: {
             pie: {
-                innerSize: '0'
+                innerSize: '0',
+                showInLegend: true
             }
         }
     },
@@ -89,7 +90,8 @@ export const CommonChartTypeToHighcharts: { [key in ChartType]: ChartTypeOptions
         chartType: 'pie',
         plotOptions: {
             pie: {
-                innerSize: '40%'
+                innerSize: '40%',
+                showInLegend: true
             }
         }
     },

src/visualizers/highcharts/dataTransformer.ts

@@ -21,19 +21,24 @@ export class DataTransformer {
         const columnsSelection = options.chartOptions.columnsSelection;
         const xAxisColumn = columnsSelection.xAxis;
         const xAxisColumnIndex = Utilities.getColumnIndex(options.queryResultData, xAxisColumn);  
+        const isSplitByChart = columnsSelection.splitBy && columnsSelection.splitBy.length > 0;
         let categoriesAndSeries = {
             series: [],
             categories: isDatetimeAxis ? undefined : [] 
         };
         
-        if(columnsSelection.splitBy && columnsSelection.splitBy.length > 0) {
-            if(options.chartOptions.chartType === ChartType.Pie || options.chartOptions.chartType === ChartType.Donut) {
-                DataTransformer.getPieCategoriesAndSeriesForSplitBy(options, xAxisColumnIndex, categoriesAndSeries);
+        if(Utilities.isPieOrDonut(options.chartOptions.chartType)) {
+            if(isSplitByChart) {
+                DataTransformer.getPieSplitByCategoriesAndSeries(options, xAxisColumnIndex, categoriesAndSeries);
             } else {
-                DataTransformer.getSplitByCategoriesAndSeries(options, xAxisColumnIndex, isDatetimeAxis, categoriesAndSeries);
+                DataTransformer.getPieStandardCategoriesAndSeries(options, xAxisColumnIndex, categoriesAndSeries);
             }
         } else {
-            DataTransformer.getStandardCategoriesAndSeries(options, xAxisColumnIndex, isDatetimeAxis, categoriesAndSeries);
+            if(isSplitByChart) {
+                DataTransformer.getSplitByCategoriesAndSeries(options, xAxisColumnIndex, isDatetimeAxis, categoriesAndSeries);
+            } else {
+                DataTransformer.getStandardCategoriesAndSeries(options, xAxisColumnIndex, isDatetimeAxis, categoriesAndSeries);
+            }
         }
 
         return categoriesAndSeries;
@@ -170,8 +175,31 @@ export class DataTransformer {
         }
     }
 
-    private static getPieCategoriesAndSeriesForSplitBy(options: IVisualizerOptions, xAxisColumnIndex: number, categoriesAndSeries: ICategoriesAndSeries): void {
-        const yAxisColumn = options.chartOptions.columnsSelection.yAxes[0]; // When there is a splitBy column, we allow only 1 yAxis
+    private static getPieStandardCategoriesAndSeries(options: IVisualizerOptions, xAxisColumnIndex: number, categoriesAndSeries: ICategoriesAndSeries): void {
+        const yAxisColumn = options.chartOptions.columnsSelection.yAxes[0]; // We allow only 1 yAxis in pie charts
+        const yAxisColumnIndex = Utilities.getColumnIndex(options.queryResultData, yAxisColumn);
+
+        // Build the data for the pie
+        const pieSeries = {
+            name: yAxisColumn.name,
+            data: []
+        }
+
+        options.queryResultData.rows.forEach((row) => {
+            const xAxisValue = row[xAxisColumnIndex];
+            const yAxisValue = row[yAxisColumnIndex];
+
+            pieSeries.data.push({
+                name: xAxisValue,
+                y: yAxisValue 
+            })
+        });
+
+        categoriesAndSeries.series.push(pieSeries);
+    }
+
+    private static getPieSplitByCategoriesAndSeries(options: IVisualizerOptions, xAxisColumnIndex: number, categoriesAndSeries: ICategoriesAndSeries): void {
+        const yAxisColumn = options.chartOptions.columnsSelection.yAxes[0]; // We allow only 1 yAxis in pie charts
         const yAxisColumnIndex = Utilities.getColumnIndex(options.queryResultData, yAxisColumn);
         const splitByIndexes = [xAxisColumnIndex];
         
@@ -232,8 +260,7 @@ export class DataTransformer {
                     currentSeries.size = `${prevLevelSize + 10}%`;
                     currentSeries.innerSize = `${prevLevelSize}%`;
                 }
-
-                
+            
                 // We do not show labels for multi-level pie
                 currentSeries.dataLabels = {
                     enabled: false

test/highcharts/dataTransformer.test.ts

@@ -371,7 +371,68 @@ describe('Unit tests for Highcharts CategoriesAndSeries', () => {
 
         //#endregion getSplitByCategoriesAndSeries
         
-        //#region getPieCategoriesAndSeriesForSplitBy
+        //#region getPieStandardCategoriesAndSeries
+        
+        it('Validate getPieStandardCategoriesAndSeries', () => {
+            const rows = [
+                ['Israel', 'Tel Aviv', 10],
+                ['United States', 'Redmond', 5],
+                ['United States', 'New York', 2],
+                ['United States', 'Miami', 3],
+                ['Israel', 'Herzliya', 30],
+                ['Israel', 'Jaffa', 50],
+                ['United States', 'Boston', 1],
+            ];
+        
+            const columns: IColumn[] = [
+                { name: 'country', type: DraftColumnType.String },
+                { name: 'city', type: DraftColumnType.String },
+                { name: 'request_count', type: DraftColumnType.Int },
+            ];
+        
+            // Input
+            const options: any = {
+                chartOptions: {
+                    chartType: ChartType.Pie,
+                    columnsSelection: {
+                        xAxis: columns[1],    // city
+                        yAxes: [columns[2]],  // request_count
+                    },
+                    utcOffset: 0
+                },
+                queryResultData: {
+                    rows: rows,
+                    columns: columns
+                }
+            }
+        
+            // Act
+            const result = DataTransformer.getCategoriesAndSeries(options, /*isDatetimeAxis*/ false);
+        
+            const expectedCategoriesAndSeries: ICategoriesAndSeries = {
+                series: [{
+                    name: 'request_count',
+                    data: [
+                        { name: 'Tel Aviv', y: 10 },
+                        { name: 'Redmond', y: 5 },
+                        { name: 'New York', y: 2 },
+                        { name: 'Miami', y: 3 },
+                        { name: 'Herzliya', y: 30 },
+                        { name: 'Jaffa', y: 50 },
+                        { name: 'Boston', y: 1 }
+                    ]
+                }],
+                categories: []
+            };
+        
+            // Assert
+            expect(result.series).toEqual(expectedCategoriesAndSeries.series);
+            expect(result.categories).toEqual(expectedCategoriesAndSeries.categories);
+        });
+
+        //#endregion getPieStandardCategoriesAndSeries
+        
+        //#region getPieSplitByCategoriesAndSeries
 
         function validateResults(result, expected) {
             const seriesToValidate = _.map(result.series, (currentSeries) => {
@@ -388,7 +449,7 @@ describe('Unit tests for Highcharts CategoriesAndSeries', () => {
             expect(result.categories).toEqual(expected.categories);
         }
 
-        it('Validate getPieCategoriesAndSeriesForSplitBy: pie chart with 2 levels', () => {
+        it('Validate getPieSplitByCategoriesAndSeries: pie chart with 2 levels', () => {
             const rows = [
                 ['Israel', 'Tel Aviv', 10],
                 ['United States', 'Redmond', 5],
@@ -456,7 +517,7 @@ describe('Unit tests for Highcharts CategoriesAndSeries', () => {
             validateResults(result, expectedCategoriesAndSeries);
         });
 
-        it('Validate getPieCategoriesAndSeriesForSplitBy: pie chart with 3 levels', () => {
+        it('Validate getPieSplitByCategoriesAndSeries: pie chart with 3 levels', () => {
             const rows = [                
                 ['Internet Explorer', 'v8', '0', 10],
                 ['Chrome', 'v65', '0', 5],
@@ -554,7 +615,7 @@ describe('Unit tests for Highcharts CategoriesAndSeries', () => {
             validateResults(result, expectedCategoriesAndSeries);
         });
 
-        //#endregion getPieCategoriesAndSeriesForSplitBy
+        //#endregion getPieSplitByCategoriesAndSeries
     });
    
     //#endregion Tests