PR modifications + update readme

2019-12-04 09:25:18 +02:00 · 2019-12-04 09:25:18 +02:00 · aeb2f3b1df
--- a/README.md
+++ b/README.md
@ -1,6 +1,6 @@
 # This package is a work in process. Please DO NOT USE it yet

-# query-data-to-chart-private
+# adx-query-charts
 [![Build Status](https://travis-ci.org/microsoft/adx-query-charts.svg?branch=master)](https://travis-ci.org/microsoft/adx-query-charts)&nbsp;&nbsp;&nbsp;&nbsp;[![npm version](https://badge.fury.io/js/adx-query-charts.svg)](https://badge.fury.io/js/adx-query-charts)

 Draw charts from Azure Data Explorer queries
@ -32,6 +32,16 @@ const chartOptions: Charts.IChartOptions = {
 chartHelper.draw(queryResultData, chartOptions);
 ```
 ## API
+
+### KustoChartHelper
+| Method:                  | Description:              | Input:                                                                                                       | Return value:  |
+| -------------------    |--------------------     | ---------------------------------------------------------------------------- | ----------------|
+| draw                        | Draw the chart         | [IQueryResultData](#IQueryResultData) - The original query result data<br>[IChartOptions](#IChartOptions) - The information required to draw the chart  | void |
+| changeTheme         | Change the theme of an existing chart | [ChartTheme](#ChartTheme) - The theme to apply   | void |
+| getSupportedColumnTypes | Get the supported column types for the axes and the split-by<br>for a specific chart type | [ChartType](#ChartType) - The type of the chart  | [ISupportedColumnTypes](#ISupportedColumnTypes) |
+| getSupportedColumnsInResult | Get the supported columns from the query result data for the axes and the split-by for a specific chart type | [IQueryResultData](#IQueryResultData) - The original query result data<br> [ChartType](#ChartType) - The type of the chart | [ISupportedColumns](#ISupportedColumns) |
+| getDefaultSelection | Get the default columns selection from the query result data.<br>Select the default columns for the axes and the split-by for drawing a default chart of a specific chart type. |  [IQueryResultData](#IQueryResultData) - The original query result data<br> [ChartType](#ChartType) - The type of the chart<br>[ISupportedColumns](#ISupportedColumns) - (Optional) The list of the supported column types for the axes and the split-by | [IColumnsSelection](#IColumnsSelection) |
+
 ### IChartOptions
 | Option name:           | Type:                   | Details:                                                         | Default value:  |
 | -------------------    |--------------------     | ---------------------------------------------                    | ----------------|
@ -91,6 +101,64 @@ enum ChartTheme {
 }
 ```

+### IColumn
+```typescript
+type IRowValue = string | number;
+type ISeriesRowValue = IRowValue | string[] | number[];
+type IRow = IRowValue[];
+type ISeriesRow = ISeriesRowValue[];
+
+interface IColumn {
+    name: string;
+    type: DraftColumnType;
+}
+```
+
+### IQueryResultData
+```typescript
+interface IQueryResultData {
+    rows: IRow[] | ISeriesRow[];
+    columns: IColumn[];
+}
+```
+See [IColumn](#IColumn) 
+
+### ISupportedColumns
+```typescript
+interface ISupportedColumns {
+    xAxis: IColumn[];
+    yAxis: IColumn[];
+    splitBy: IColumn[];
+}
+```
+See [IColumn](#IColumn) 
+
+### DraftColumnType
+See: https://kusto.azurewebsites.net/docs/query/scalar-data-types/index.html
+```typescript
+enum DraftColumnType {
+    Bool,
+    DateTime,
+    Decimal,
+    Dynamic,
+    Guid,
+    Int,
+    Long,
+    Real,
+    String,
+    TimeSpan
+}
+```
+
+### ISupportedColumnTypes
+```typescript
+interface ISupportedColumnTypes {
+    xAxis: DraftColumnType[];
+    yAxis: DraftColumnType[];
+    splitBy: DraftColumnType[];
+}
+```
+See [DraftColumnType](#DraftColumnType) 
 ## Test
 Unit tests are written using [Jest](https://jestjs.io/).

--- a/src/common/chartModels.ts
+++ b/src/common/chartModels.ts
@ -153,20 +153,20 @@ export interface IChartHelper {
    changeTheme(newTheme: ChartTheme): void;

    /**
-     * Return the supported column types for the axes and the split-by for a specific chart type
+     * Get the supported column types for the axes and the split-by for a specific chart type
     * @param chartType - The type of the chart
     */
    getSupportedColumnTypes(chartType: ChartType): ISupportedColumnTypes;

    /**
-     * Return the supported columns from the query result data for the axes and the split-by for a specific chart type
+     * Get the supported columns from the query result data for the axes and the split-by for a specific chart type
     * @param queryResultData - The original query result data
     * @param chartType - The type of the chart
     */
    getSupportedColumnsInResult(queryResultData: IQueryResultData, chartType: ChartType): ISupportedColumns;

    /**
-     * Return the default columns selection from the query result data.
+     * Get the default columns selection from the query result data.
     * Select the default columns for the axes and the split-by for drawing a default chart of a specific chart type.
     * @param queryResultData - The original query result data
     * @param chartType - The type of the chart
--- a/src/visualizers/highcharts/themes/darkTheme.ts
+++ b/src/visualizers/highcharts/themes/darkTheme.ts
@ -1,6 +1,12 @@
 'use strict';

 const textMainColor: string = '#ffffff';
+const labelsColor: string = '#e0e0e3';
+const lineColor: string = '#707073';
+const minorGridLineColor: string = '#505053';
+const dataLabelsColor: string = '#f0f0f3';
+const hiddenStyleColor: string = '#606063';
+const strokeColor: string = '000000';

 export const DarkThemeOptions: Highcharts.Options = {
    colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
@ -16,12 +22,12 @@ export const DarkThemeOptions: Highcharts.Options = {
        gridLineColor: '#E10420',
        labels: {
            style: {
-                color: '#E0E0E3'
+                color: labelsColor
            }
        },
-        lineColor: '#707073',
-        minorGridLineColor: '#505053',
-        tickColor: '#707073',
+        lineColor: lineColor,
+        minorGridLineColor: minorGridLineColor,
+        tickColor: lineColor,
        title: {
            style: {
                color: textMainColor
@ -29,15 +35,15 @@ export const DarkThemeOptions: Highcharts.Options = {
        }
    },
    yAxis: {
-        gridLineColor: '#707073',
+        gridLineColor: lineColor,
        labels: {
            style: {
-                color: '#E0E0E3'
+                color: labelsColor
            }
        },
-        lineColor: '#707073',
-        minorGridLineColor: '#505053',
-        tickColor: '#707073',
+        lineColor: lineColor,
+        minorGridLineColor: minorGridLineColor,
+        tickColor: lineColor,
        title: {
            style: {
                color: textMainColor
@ -53,14 +59,14 @@ export const DarkThemeOptions: Highcharts.Options = {
    plotOptions: {
        series: {
            dataLabels: {
-                color: '#F0F0F3'
+                color: dataLabelsColor
            },
            marker: {
                lineColor: '#333'
            }
        },
        boxplot: {
-            fillColor: '#505053'
+            fillColor: minorGridLineColor
        },
        candlestick: {
            lineColor: 'white'
@ -72,13 +78,13 @@ export const DarkThemeOptions: Highcharts.Options = {
    legend: {
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        itemStyle: {
-            color: '#E0E0E3'
+            color: labelsColor
        },
        itemHoverStyle: {
            color: '#FFF'
        },
        itemHiddenStyle: {
-            color: '#606063'
+            color: hiddenStyleColor
        },
        title: {
            style: {
@ -93,46 +99,46 @@ export const DarkThemeOptions: Highcharts.Options = {
    },
    drilldown: {
        activeAxisLabelStyle: {
-            color: '#F0F0F3'
+            color: dataLabelsColor
        },
        activeDataLabelStyle: {
-            color: '#F0F0F3'
+            color: dataLabelsColor
        }
    },
    navigation: {
        buttonOptions: {
            symbolStroke: '#DDDDDD',
            theme: {
-                fill: '#505053'
+                fill: minorGridLineColor
            }
        }
    },
    // scroll charts
    rangeSelector: {
        buttonTheme: {
-            fill: '#505053',
-            stroke: '#000000',
+            fill: minorGridLineColor,
+            stroke: strokeColor,
            style: {
                color: '#CCC'
            },
            states: {
                hover: {
-                    fill: '#707073',
-                    stroke: '#000000',
+                    fill: lineColor,
+                    stroke: strokeColor,
                    style: {
                        color: 'white'
                    }
                },
                select: {
                    fill: '#000003',
-                    stroke: '#000000',
+                    stroke: strokeColor,
                    style: {
                        color: 'white'
                    }
                }
            }
        },
-        inputBoxBorderColor: '#505053',
+        inputBoxBorderColor: minorGridLineColor,
        inputStyle: {
            backgroundColor: '#333',
            color: 'silver'
@ -153,15 +159,15 @@ export const DarkThemeOptions: Highcharts.Options = {
            lineColor: '#A6C7ED'
        },
        xAxis: {
-            gridLineColor: '#505053'
+            gridLineColor: minorGridLineColor
        }
    },
    scrollbar: {
        barBackgroundColor: '#808083',
        barBorderColor: '#808083',
        buttonArrowColor: '#CCC',
-        buttonBackgroundColor: '#606063',
-        buttonBorderColor: '#606063',
+        buttonBackgroundColor: hiddenStyleColor,
+        buttonBorderColor: hiddenStyleColor,
        rifleColor: '#FFF',
        trackBackgroundColor: '#404043',
        trackBorderColor: '#404043'
--- a/src/visualizers/highcharts/themes/themes.ts
+++ b/src/visualizers/highcharts/themes/themes.ts
@ -35,10 +35,6 @@ export class Themes {
    public static getThemeOptions(theme: ChartTheme): Highcharts.Options {
        const themeOptions = Themes.commonThemeTypeToHighcharts[theme];

-        if(themeOptions) {
-            return _.merge({}, Themes.defaultThemeOptions, themeOptions);
-        }
-        
-        return Themes.defaultThemeOptions;
+        return _.merge({}, Themes.defaultThemeOptions, themeOptions);
    }
 }