diff --git a/README.md b/README.md
index b75ddea..4b240e9 100644
--- 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
[](https://travis-ci.org/microsoft/adx-query-charts) [](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
[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
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
[ChartType](#ChartType) - The type of the chart | [ISupportedColumns](#ISupportedColumns) |
+| getDefaultSelection | 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. | [IQueryResultData](#IQueryResultData) - The original query result data
[ChartType](#ChartType) - The type of the chart
[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/).
diff --git a/src/common/chartModels.ts b/src/common/chartModels.ts
index 54e21aa..cb3e15b 100644
--- 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
diff --git a/src/visualizers/highcharts/themes/darkTheme.ts b/src/visualizers/highcharts/themes/darkTheme.ts
index 0a49e9b..604ab96 100644
--- 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'
diff --git a/src/visualizers/highcharts/themes/themes.ts b/src/visualizers/highcharts/themes/themes.ts
index 1be99cd..3998054 100644
--- 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);
}
}
\ No newline at end of file