intuned-adx-query-charts v1.1.61

adx-query-charts

Draw charts from Azure Data Explorer queries

Installation

npm install adx-query-charts

Dependencies

1. lodash: npm i lodash
2. css-element-queries: npm i css-element-queries
3. highcharts: npm i highcharts Please note: Highcharts/Highstock libraries are free to use with Log Analytics/adx-query-charts. If you plan to use Highcharts separately, in your own project, you must obtain a license: follow the link − License and Pricing.

Usage

import * as Charts from 'adx-query-charts';

const highchartsVisualizer = new Charts.HighchartsVisualizer();
const chartHelper = chartHelper = new Charts.KustoChartHelper('chart-elem-id', highchartsVisualizer);
const chartOptions: Charts.IChartOptions = {
    chartType: Charts.ChartType.UnstackedColumn,
    columnsSelection: {
        xAxis: { name: 'timestamp', type: Charts.DraftColumnType.DateTime },
        yAxes: [{ name: 'requestCount', type: Charts.DraftColumnType.Int }]
    }
};

// Draw the chart - the chart will be drawn inside an element with 'chart-elem-id' id
chartHelper.draw(queryResultData, chartOptions);

API

KustoChartHelper

IChartOptions

IDataTransformationInfo

IChartInfo

ILegendOptions

ChartType

enum ChartType {
    Line,
    Scatter,
    UnstackedArea,
    StackedArea,
    PercentageArea,
    UnstackedColumn,
    StackedColumn,
    PercentageColumn,
    UnstackedBar,
    StackedBar,
    PercentageBar,
    Pie,
    Donut,
}

Columns selection per chart type

ColumnsSelection

interface IColumn {
    name: string;
    type: DraftColumnType;
}

class ColumnsSelection {
    xAxis: IColumn;
    yAxes: IColumn[];
    splitBy?: IColumn[];
}

See Columns selection per chart type(#Columns selection per chart type)

AggregationType

enum AggregationType {
    Sum,
    Average,
    Min,
    Max
}

ChartTheme

enum ChartTheme {
    Dark,
    Light
}

ErrorCode

enum ErrorCode {
    InvalidQueryResultData,
    InvalidColumnsSelection,
    UnsupportedTypeInColumnsSelection,
    InvalidChartContainerElementId,
    InvalidDate,
    FailedToCreateVisualization,
    EmptyPie
}

CustomError

class ChartError extends Error {
    errorCode: ErrorCode;
}

See ErrorCode

DateFormat

export enum DateFormat {
    FullDate       // The full date and time. For example: 12/7/2019, 2:30:00.600
    Time           // The full time, without the milliseconds. For example: 2:30:00
    FullTime       // The full time, including the milliseconds. For example: 2:30:00.600
    HourAndMinute  // The hours and minutes. For example: 2:30
    MonthAndDay    // The month and day. For example: July 12th
    MonthAndYear   // The month and day. For example: July 2019
    Year           // The year. For example: 2019
}

DrawChartStatus

export enum DrawChartStatus {
    Success = 'Success',   // Successfully drawn the chart
    Failed = 'Failed',     // There was an error while trying to draw the chart
    Canceled = 'Canceled'  // The chart drawing was canceled
}

See 'onFinishDataTransformation' return value in IChartOptions for more information regarding drawing cancellation

IColumn

type IRowValue = string | number;
type ISeriesRowValue = IRowValue | string[] | number[];
type IRow = IRowValue[];
type ISeriesRow = ISeriesRowValue[];

interface IColumn {
    name: string;
    type: DraftColumnType;
}

IQueryResultData

interface IQueryResultData {
    rows: IRow[] | ISeriesRow[];
    columns: IColumn[];
}

See IColumn

ISupportedColumns

interface ISupportedColumns {
    xAxis: IColumn[];
    yAxis: IColumn[];
    splitBy: IColumn[];
}

See IColumn

DraftColumnType

See: https://kusto.azurewebsites.net/docs/query/scalar-data-types/index.html

enum DraftColumnType {
    Bool,
    DateTime,
    Decimal,
    Dynamic,
    Guid,
    Int,
    Long,
    Real,
    String,
    TimeSpan
}

ISupportedColumnTypes

interface ISupportedColumnTypes {
    xAxis: DraftColumnType[];
    yAxis: DraftColumnType[];
    splitBy: DraftColumnType[];
}

See DraftColumnType

IDataPoint

export interface IDataPointInfo {
    column: IColumn;
    value: IRowValue;
}

export interface IDataPoint {
    x: IDataPointInfo;
    y: IDataPointInfo;
    splitBy?: IDataPointInfo;
}

LegendPosition

export enum LegendPosition {
    Bottom,
    Right
}

Test

Unit tests are written using Jest.

Run tests: npm run test

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.