diff --git a/morris.js/morris.js-tests.ts b/morris.js/morris.js-tests.ts new file mode 100644 index 0000000000..93f3ab95c5 --- /dev/null +++ b/morris.js/morris.js-tests.ts @@ -0,0 +1,79 @@ +/// + +let data = [{ + label: "2010-5-1", + value: 15 +}]; + +let donutChart = Morris.Donut({ + element: "donutChartId", + data: data, + colors: ["chartreuse"], + resize: false +}); + +let barChart = Morris.Bar({ + element: "barChartId", + data: data, + xkey: "label", + ykeys: ["value"], + labels: ["labels"], + hideHover: "auto", + axes: false, + grid: true, + gridTextColor: "bisque", + gridTextSize: 42, + gridTextFamily: "comic sans", + gridTextWeight: "bold", + barColors: ["aquamarine"], + stacked: false, + hoverCallback: (index, options, content, row) => index + " " + content +}); + +let lineChart = Morris.Line({ + element: "lineChartId", + data: data, + xkey: "label", + ykeys: ["value"], + labels: ["labels"], + lineColors: ["bisque"], + lineWidth: 42, + pointSize: 42, + pointFillColors: ["bisque"], + pointStrokeColors: ["bisque"], + ymax: "auto 15", + ymin: "auto 10", + smooth: false, + hoverCallback: (index, options, content, row) => index + " " + content, + parseTime: false, + postUnits: "%", + preUnits: "£", + dateFormat: (timestamp) => timestamp.toString(), + xLabels: "30min", + xLabelFormat: (date) => date.toString(), + xLabelAngle: 42, + yLabelFormat: (val) => val.toString(), + goals: [42], + goalStrokeWidth: 42, + goalLineColors: ["bisque"], + events: ["bisque"], + eventStrokeWidth: 42, + eventLineColors: ["bisque"], + continuousLine: false, + axes: false, + grid: false, + gridTextColor: "bisque", + gridTextSize: 42, + gridTextFamily: "comic sans", + gridTextWeight: "bold", + fillOpacity: 42 +}); + +let areaChart = Morris.Area({ + element: "areaChartId", + data: data, + xkey: "label", + ykeys: ["value"], + labels: ["labels"], + behaveLikeLine: false +}); diff --git a/morris.js/morris.js.d.ts b/morris.js/morris.js.d.ts new file mode 100644 index 0000000000..79598ee5c3 --- /dev/null +++ b/morris.js/morris.js.d.ts @@ -0,0 +1,146 @@ +// Type definitions for morris.js 0.5.1 +// Project: http://morrisjs.github.io/morris.js/ +// Definitions by: Matthieu Mourisson +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +declare namespace morris { + type AutoAlways = "auto" | "always"; + + type Interval = "decade" | "year" | "month" | "week" | "day" | "hour" | "30min" | "15min" | "10min" | "5min" | "minute" | "30sec" | "15sec" | "10sec" | "5sec" | "second"; + + interface IChartOptions { + /** The ID of (or a reference to) the element into which to insert the graph. */ + element: any; + /** Set to true to enable automatic resizing when the containing element resizes. (default: false). */ + resize?: boolean; + } + + interface IGridChartOptions extends IChartOptions { + /** The data to plot. This is an array of objects, containing x and y attributes as described by the xkey and ykeys options. */ + data: any[]; + /** A string containing the name of the attribute that contains X labels. */ + xkey: string; + /** A list of strings containing names of attributes that contain Y values (one for each series of data to be plotted). */ + ykeys: string[]; + /** A list of strings containing labels for the data series to be plotted (corresponding to the values in the ykeys option). */ + labels: string[]; + /** Set the visibility of the hover legend (see documentation). */ + hideHover?: boolean | AutoAlways; + /** Set to false to disable drawing the x and y axes. */ + axes?: boolean; + /** Set to false to disable drawing the horizontal grid lines. */ + grid?: boolean; + /** Set the color of the axis labels (default: #888). */ + gridTextColor?: string; + /** Set the point size of the axis labels (default: 12). */ + gridTextSize?: number; + /** Set the font family of the axis labels (default: sans-serif). */ + gridTextFamily?: string; + /** Set the font weight of the axis labels (default: normal). */ + gridTextWeight?: string; + } + + interface ILineOptions extends IGridChartOptions { + /** Array containing colors for the series lines/points. */ + lineColors?: string[]; + /** Width of the series lines, in pixels. */ + lineWidth?: number; + /** Diameter of the series points, in pixels. */ + pointSize?: number; + /** Colors for the series points. By default uses the same values as lineColors */ + pointFillColors?: string[]; + /** Colors for the outlines of the series points. (#ffffff by default). */ + pointStrokeColors?: string[]; + /** Max. bound for Y-values. Alternatively, set this to 'auto' to compute automatically, or 'auto [num]' to automatically compute and ensure that the max y-value is at least [num]. */ + ymax?: number | string; + /** Min. bound for Y-values. Alternatively, set this to 'auto' to compute automatically, or 'auto [num]' to automatically compute and ensure that the min y-value is at most [num]. */ + ymin?: number | string; + /** Set to false to disable line smoothing. */ + smooth?: boolean; + /** Provide a function on this option to generate custom hover legends. */ + hoverCallback?: (index: number, options: ILineOptions, content: string, row: any) => string; + /** Set to false to skip time/date parsing for X values, instead treating them as an equally-spaced series. */ + parseTime?: boolean; + /** Set to a string value (eg: '%') to add a label suffix all y-labels. */ + postUnits?: string; + /** Set to a string value (eg: '$') to add a label prefix all y-labels. */ + preUnits?: string; + /** A function that accepts millisecond timestamps and formats them for display as chart labels. */ + dateFormat?: (timestamp: number) => string; + /** Sets the x axis labelling interval. By default the interval will be automatically computed. */ + xLabels?: Interval; + /** A function that accepts Date objects and formats them for display as x-axis labels. Overrides the default formatter chosen by the automatic labeller or the xLabels option. */ + xLabelFormat?: (date: Date) => string; + /** The angle in degrees from horizontal to draw x-axis labels. */ + xLabelAngle?: number; + /** A function that accepts y-values and formats them for display as y-axis labels. */ + yLabelFormat?: (val: any) => string; + /** A list of y-values to draw as horizontal 'goal' lines on the chart. */ + goals?: number[]; + /** Width, in pixels, of the goal lines. */ + goalStrokeWidth?: number; + /** Array of color values to use for the goal line colors. If you list fewer colors here than you have lines in goals, then the values will be cycled. */ + goalLineColors?: string[]; + /** A list of x-values to draw as vertical 'event' lines on the chart. */ + events?: string[]; + /** Width, in pixels, of the event lines. */ + eventStrokeWidth?: number; + /** Array of color values to use for the event line colors. If you list fewer colors here than you have lines in events, then the values will be cycled. */ + eventLineColors?: string[]; + /** Define how null and undefined values are handled (see documentation). */ + continuousLine?: boolean; + /** Change the opacity of the area fill colour. Accepts values between 0.0 (for completely transparent) and 1.0 (for completely opaque). */ + fillOpacity?: number; + } + + interface IAreaOptions extends ILineOptions { + /** Set to true to overlay the areas on top of each other instead of stacking them. */ + behaveLikeLine?: boolean; + } + + interface IBarOptions extends IGridChartOptions { + /** Array containing colors for the series bars. */ + barColors?: string[]; + /** Set to true to draw bars stacked vertically. */ + stacked?: boolean; + /** Provide a function on this option to generate custom hover legends. */ + hoverCallback?: (index: number, options: IBarOptions, content: string, row: any) => string; + } + + interface IDonutData { + /** Label of the segment of the donut chart.*/ + label: string; + /** Size of the segment of the donut chart.*/ + value: number; + } + + interface IDonutOptions extends IChartOptions { + /** The data to plot. */ + data: IDonutData[]; + /** An array of strings containing HTML-style hex colors for each of the donut segments. */ + colors?: string[]; + /** A function that will translate a y-value into a label for the centre of the donut. */ + formatter?: (y: number, data: IDonutData) => string; + } + + class GridChart { + setData(data: any[], redraw?: boolean): void; + } + + class DonutChart { + setData(data: IDonutData[], redraw?: boolean): void; + } + + class MorrisStatic { + /** Create a line chart. */ + Line: (options: ILineOptions) => GridChart; + /** Create an area chart. */ + Area: (options: IAreaOptions) => GridChart; + /** Create a bar chart. */ + Bar: (options: IBarOptions) => GridChart; + /** Create a Donut chart. */ + Donut: (options: IDonutOptions) => DonutChart; + } +} + +declare var Morris: morris.MorrisStatic;