Merge pull request #4144 from DavidKDeutsch/highcharts

Adding interfaces to correspond with various options objects

highcharts/highcharts-tests.ts

@@ -29,11 +29,22 @@ var chart1 = new Highcharts.Chart({
     },
     xAxis: [{
     }],
-    series: [{
-        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
+    series: [<HighchartsLineChartSeriesOptions>{
+        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
+        type: "line",
+        allowPointSelect: true
     }]
 });
 
+
+chart1.addSeries<HighchartsBarChartSeriesOptions>({
+    enableMouseTracking: true,
+    data: [1, 2, 3, 4, 5]
+});
+
+
+console.log((<HighchartsLineChartSeriesOptions>chart1.series[0].options).dashStyle);
+
 var chart2 = new Highcharts.Chart({
     chart: {
         renderTo: 'container',
@@ -63,7 +74,7 @@ var chart2 = new Highcharts.Chart({
     legend: {
         enabled: false
     },
-    series: [{
+    series: [<HighchartsScatterChartSeriesOptions>{
         data: [
             [550, 870], [738, 362], [719, 711], [547, 665], [595, 197], [332, 144],
             [581, 555], [196, 862], [6, 837], [400, 924], [888, 148], [785, 730],
@@ -105,15 +116,11 @@ var highChartSettings: HighchartsOptions = {
     },
     xAxis: [{
     }],
-    series: [{
+    series: [<HighchartsPieChartSeriesOptions>{
         data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
     }]
 };
 
 var container = $("#container").highcharts(highChartSettings, function (chart) {
     chart.series[0].setVisible(true, true);
-});
-
-var options = Highcharts.getOptions();
-
-var options2 = Highcharts.setOptions(options);
+});

highcharts/highcharts.d.ts

@@ -410,7 +410,7 @@ interface HighchartsPaneBackground {
 
 interface HighchartsPaneOptions {
     background?: HighchartsPaneBackground[];
-    center?: any[]; // [x,y] | ["50%","50%" ]
+    center?: [number|string, number|string]; // [x,y] | ["50%","50%" ]
     endAngle?: number;
     startAngle?: number;
 }
@@ -882,6 +882,34 @@ interface HighchartsPlotOptions {
     spline?: HighchartsSplineChart;
 }
 
+/* You will rarely, if ever, want to use this interface directly. Instead it is much more useful to use one of the derived
+ * interfaces (HighchartsAreaChartSeriesOptions, HighchartsLineChartSeriesOptions, etc.)
+ */
+interface HighchartsIndividualSeriesOptions {
+    data?: number[]|[number, number][]| HighchartsDataPoint[]; // [value1,value2, ... ] | [[x1,y1],[x2,y2],... ] | HighchartsDataPoint[]
+    index?: number;
+    legendIndex?: number;
+    name?: string;
+    stack?: any; // type doesn't matter, as long as grouped series' stack options match each other.
+    type?: string;
+    xAxis?: number;
+    yAxis?: number;
+}
+
+interface HighchartsSeriesOptions extends HighchartsIndividualSeriesOptions, HighchartsSeriesChart { }
+interface HighchartsAreaChartSeriesOptions extends HighchartsIndividualSeriesOptions, HighchartsAreaChart { }
+interface HighchartsAreaRangeChartSeriesOptions extends HighchartsIndividualSeriesOptions, HighchartsAreaRangeChart { }
+interface HighchartsAreaSplineChartSeriesOptions extends HighchartsIndividualSeriesOptions, HighchartsAreaChart { }
+interface HighchartsAreaSplineRangeChartSeriesOptions extends HighchartsIndividualSeriesOptions, HighchartsAreaRangeChart { }
+interface HighchartsBarChartSeriesOptions extends HighchartsIndividualSeriesOptions, HighchartsBarChart { }
+interface HighchartsColumnChartSeriesOptions extends HighchartsIndividualSeriesOptions, HighchartsBarChart { }
+interface HighchartsColumnRangeChartSeriesOptions extends HighchartsIndividualSeriesOptions, HighchartsColumnRangeChart { }
+interface HighchartsGaugeChartSeriesOptions extends HighchartsIndividualSeriesOptions, HighchartsGaugeChart { }
+interface HighchartsLineChartSeriesOptions extends HighchartsIndividualSeriesOptions, HighchartsLineChart { }
+interface HighchartsPieChartSeriesOptions extends HighchartsIndividualSeriesOptions, HighchartsPieChart { }
+interface HighchartsScatterChartSeriesOptions extends HighchartsIndividualSeriesOptions, HighchartsScatterChart { }
+interface HighchartsSplineChartSeriesOptions extends HighchartsIndividualSeriesOptions, HighchartsSplineChart { }
+
 interface HighchartsDataPoint {
     color?: string;
     dataLabels?: HighchartsDataLabels;
@@ -895,17 +923,6 @@ interface HighchartsDataPoint {
     y?: number;
 }
 
-interface HighchartsSeriesOptions extends HighchartsSeriesChart{
-    data?: any[]; // [value1,value2, ... ] | [[x1,y1],[x2,y2],... ] | HighchartsDataPoint[]
-    index?: number;
-    legendIndex?: number;
-    name?: string;
-    stack?: any; // String | Number | any to match
-    type?: string;
-    xAxis?: number;
-    yAxis?: number;
-}
-
 interface HighchartsSubtitleOptions {
     align?: string;
     verticalAlign?: string;
@@ -939,7 +956,7 @@ interface HighchartsTooltipOptions {
     borderColor?: string;
     borderRadius?: number;
     borderWidth?: number;
-    crosshairs?: any; // boolean | [boolean,bool] | CrosshairObject | [CrosshairObject,CrosshairObject]
+    crosshairs?: boolean |[boolean, boolean]| HighchartsCrosshairObject |[HighchartsCrosshairObject, HighchartsCrosshairObject];
     enabled?: boolean;
     footerFormat?: string;
     formatter?: () => any;
@@ -969,7 +986,7 @@ interface HighchartsOptions {
     navigation?: HighchartsNavigationOptions;
     pane?: HighchartsPaneOptions;
     plotOptions?: HighchartsPlotOptions;
-    series?: HighchartsSeriesOptions[];
+    series?: HighchartsIndividualSeriesOptions[];
     subtitle?: HighchartsSubtitleOptions;
     title?: HighchartsTitleOptions;
     tooltip?: HighchartsTooltipOptions;
@@ -994,8 +1011,8 @@ interface HighchartsAxisObject {
 }
 
 interface HighchartsChartObject {
-    addSeries(options: HighchartsSeriesOptions, redraw?: boolean, animation?: boolean): HighchartsSeriesOptions;
-    addSeries(options: HighchartsSeriesOptions, redraw?: boolean, animation?: HighchartsAnimation): HighchartsSeriesOptions;
+    addSeries<T extends HighchartsIndividualSeriesOptions>(options: T, redraw?: boolean, animation?: boolean): T;
+    addSeries<T extends HighchartsIndividualSeriesOptions>(options: T, redraw?: boolean, animation?: HighchartsAnimation): T;
     addAxis(options: HighchartsAxisOptions, isX?: boolean, redraw?: boolean, animation?: boolean): HighchartsAxisObject;
     addAxis(options: HighchartsAxisOptions, isX?: boolean, redraw?: boolean, animation?: HighchartsAnimation): HighchartsAxisObject;
     container: HTMLElement;
@@ -1003,7 +1020,7 @@ interface HighchartsChartObject {
     exportChart(): void;
     exportChart(options: HighchartsExportingOptions): void;
     exportChart(options: HighchartsExportingOptions, chartOptions: HighchartsChartOptions): void;
-    get(id: string): any; // Axis|Series|Point
+    get(id: string): HighchartsAxisObject | HighchartsSeriesObject | HighchartsPointObject;
     getSVG(): string;
     getSVG(additionalOptions: HighchartsChartOptions): string;
     getSelectedPoints(): HighchartsPointObject[];
@@ -1034,6 +1051,7 @@ interface HighchartsChart {
 interface HighchartsElementObject {
     add(): HighchartsElementObject;
     add(parent: HighchartsElementObject): HighchartsElementObject;
+	animate(attributes: any, animation?: any): HighchartsElementObject;
     attr(hash: any): HighchartsElementObject;
     css(hash: HighchartsCSSObject): HighchartsElementObject;
     destroy(): void;
@@ -1071,7 +1089,7 @@ interface HighchartsStatic {
 declare var Highcharts: HighchartsStatic;
 
 interface HighchartsPointObject {
-    category: any; // String|Number
+    category: string | number;
     percentage: number;
     remove(): void;
     remove(redraw: boolean): void;
@@ -1103,7 +1121,7 @@ interface HighchartsSeriesObject {
     chart: HighchartsChartObject;
     data: HighchartsDataPoint[];
     hide(): void;
-    options: HighchartsSeriesOptions;
+    options: HighchartsIndividualSeriesOptions;
     remove(): void;
     remove(redraw: boolean): void;
     name: string;

highcharts/highstock-tests.ts

@@ -0,0 +1,64 @@
+/// <reference path="highstock.d.ts" /> 
+
+var someData = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+$(function () {
+    $('#container').highcharts('StockChart', {
+
+        chart: {
+            type: "arearange"
+        },
+
+        navigator: {
+            height: 80,
+            maskFill: 'rgba(255, 198, 220, 0.75)',
+            handles: {
+                backgroundColor: 'yellow',
+                borderColor: 'red'
+            }
+        },
+
+        rangeSelector: {
+            allButtonsEnabled: true,
+            selected: 1,
+            buttonTheme: { // styles for the buttons
+                fill: 'none',
+                stroke: 'none',
+                'stroke-width': 0,
+                r: 8,
+                style: {
+                    color: '#039',
+                    fontWeight: 'bold'
+                },
+                states: {
+                    hover: {
+                    },
+                    select: {
+                        fill: '#039',
+                        style: {
+                            color: 'white'
+                        }
+                    }
+                }
+            },
+            inputBoxBorderColor: 'gray',
+            inputBoxWidth: 120,
+            inputBoxHeight: 18,
+            inputStyle: {
+                color: '#039',
+                fontWeight: 'bold'                
+            },
+            labelStyle: {
+                color: 'silver',
+                fontWeight: 'bold'
+            }
+        },
+
+        series: [<HighchartsAreaRangeChartSeriesOptions>{
+            name: 'USD to EUR',
+            data: someData,
+            lineColor: "blue"
+        }]
+    });
+});
+

highcharts/highstock.d.ts

@@ -0,0 +1,120 @@
+// Type definitions for Highstock 2.1.5
+// Project: http://www.highcharts.com/
+// Definitions by: David Deutsch <http://github.com/DavidKDeutsch>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+/// <reference path="highcharts.d.ts" />
+
+interface HighstockChartObject extends HighchartsChartObject {
+    options: HighstockOptions;
+}
+
+interface HighstockNavigatorOptions {
+    adaptToUpdatedData?: boolean;
+    baseSeries?: string | number;
+    enabled?: boolean;
+    handles?: {
+        backgoundColor?: string;
+        borderColor?: string;
+    };
+    height?: number;
+    margin?: number;
+    maskFill?: string;
+    maskInside?: boolean;
+    outlineColor?: string;
+    outlineWidth?: number;
+    series?: HighchartsIndividualSeriesOptions;
+    xAxis?: HighchartsAxisOptions;
+    yAxis?: HighchartsAxisOptions;
+}
+
+interface RangeSelectorButton {
+    type: string; //Defines the timespan, can be one of 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' (year to date), 'year' and 'all'.
+    count: number;
+    text: string;
+    dataGrouping?: any; //not sure how this works
+}
+
+interface HighstockRangeSelectorOptions {
+    allButtonsEnabled?: boolean;
+    buttonSpacing?: number;
+    buttonTheme?: any;
+    buttons?: RangeSelectorButton[];
+    enabled?: boolean;
+    inputBoxBorderColor?: string;
+    inputBoxHeight?: number;
+    inputBoxWidth?: number;
+    inputDateFormat?: string;
+    inputDateParser?: (date: string) => number;
+    inputEditDateFormat?: string;
+    inputEnabled?: boolean;
+    inputPosition?: {
+        align?: string;
+        verticalAlign?: string;
+        x?: number;
+        y?: number;
+    };
+    inputStyle?: HighchartsCSSObject;
+    labelStyle?: HighchartsCSSObject;
+    selected?: number;
+}
+
+interface HighstockScrollbarOptions {
+    barBackgroundColor?: string;
+    barBorderColor?: string;
+    barBorderRadius?: number;
+    barBorderWidth?: number;
+    buttonArrowColor?: string;
+    buttonBackgroundColor?: string;
+    buttonBorderColor?: string;
+    buttonBorderRadius?: number;
+    buttonBorderWidth?: number;
+    enabled?: boolean;
+    height?: number;
+    liveRedraw?: boolean;
+    minWidth?: number;
+    rifleColor?: string;
+    trackBackgroundColor?: string;
+    trackBorderColor?: string;
+    trackBorderRadius?: number;
+    trackBorderWidth?: number;
+}
+
+interface HighstockOptions extends HighchartsOptions {
+    navigator?: HighstockNavigatorOptions; 
+    rangeSelector?: HighstockRangeSelectorOptions; 
+    scrollbar?: HighstockScrollbarOptions; 
+}
+
+interface HighstockChart {
+    new (options: HighstockOptions): HighstockChartObject;
+    new (options: HighstockOptions, callback: (chart: HighstockChartObject) => void): HighstockChartObject;
+}
+
+interface HighchartsStatic {
+    StockChart: HighstockChart; 
+}
+
+interface JQuery {
+    highcharts(type: "StockChart"): HighstockChartObject;
+    /**
+    * Creates a new Highcharts.Chart for the current JQuery selector; usually
+    * a div selected by $('#container')
+    * @param {HighchartsOptions} options Options for this chart
+    * @return current {JQuery} selector the current JQuery selector
+    **/
+    highcharts(type: "StockChart", options: HighstockOptions): JQuery;
+    /**
+    * Creates a new Highcharts.Chart for the current JQuery selector; usually
+    * a div selected by $('#container')
+    * @param {HighchartsOptions} options Options for this chart
+    * @param callback Callback function used to manipulate the constructed chart instance
+    * @return current {JQuery} selector the current JQuery selector
+    **/
+    highcharts(type: "StockChart", options: HighstockOptions, callback: (chart: HighstockChartObject) => void): JQuery;
+
+
+    highcharts(type: string): HighchartsChartObject;
+    highcharts(type: string, options: HighchartsOptions): JQuery;
+    highcharts(type: string, options: HighchartsOptions, callback: (chart: HighchartsChartObject) => void): JQuery;
+}