diff --git a/smoothie/smoothie-tests.ts b/smoothie/smoothie-tests.ts index 8fb75de8dd..9da8eebf61 100644 --- a/smoothie/smoothie-tests.ts +++ b/smoothie/smoothie-tests.ts @@ -1,14 +1,14 @@ /// // Smoothie supports browserify -import Smoothie = require('smoothie'); +import smoothie = require('smoothie'); var canvas: HTMLCanvasElement = document.createElement('canvas'); document.body.appendChild(canvas); -var series: Smoothie.TimeSeries = new Smoothie.TimeSeries(), - chart: Smoothie.SmoothieChart = new Smoothie.SmoothieChart({ +var series: smoothie.TimeSeries = new smoothie.TimeSeries(), + chart: smoothie.SmoothieChart = new smoothie.SmoothieChart({ grid : { strokeStyle : '#404040' }, diff --git a/smoothie/smoothie.d.ts b/smoothie/smoothie.d.ts index d5ba175e93..6267c6e3e1 100644 --- a/smoothie/smoothie.d.ts +++ b/smoothie/smoothie.d.ts @@ -1,66 +1,184 @@ -// Type definitions for smoothie +// Type definitions for Smoothie Charts 1.21 // Project: https://github.com/joewalnes/smoothie -// Definitions by: Mike H. Hawley -// Definitions: https://github.com/borisyankov/DefinitelyTyped +// Definitions by: Drew Noakes +// Mike H. Hawley +// Definitions: https://github.com/borisyankov/DefinitelyTyped/smoothie +// NOTE this reference is here to make the DefinitelyTyped `npm test` suite pass and +// may be removed if you are using this module declaration in isolation from the +// rest of DefinitelyTyped. /// -declare module "smoothie" { - export class TimeSeries { - constructor(options?: { - resetBoundsInterval?: number; - resetBounds?: boolean - }); - - public resetBounds(): void; - - public append(timestamp: number, value: number, sumRepeatedTimeStampValues?: boolean): void; - - public dropOldData(oldestValidTime: number, maxDataSetLength: number): void; +declare module "smoothie" +{ + export interface ITimeSeriesOptions + { + resetBounds?: boolean; + resetBoundsInterval?: number; } - export class SmoothieChart { - constructor(options?: { - millisPerPixel?: number; - maxValueScale?: number; - interpolation?: string; - scaleSmoothing?: number; - maxDataSetLength?: number; - - grid?: { - fillStyle?: string; - strokeStyle?: string; - lineWidth?: number; - sharpLines?: boolean; - millisPerLine?: number; - verticalSections?: number; - borderVisible?: boolean - }; - - labels?: { - fillStyle?: string; - disabled?: boolean; - fontSize?: number; - fontFamily?: string; - precision?: number - }; - - horizontalLines?: number[] - }); + export interface ITimeSeriesPresentationOptions + { + stokeStyle?: string; + fillStyle?: string; + lineWidth?: number; + } - public addTimeSeries(timeSeries: TimeSeries, options?: { - lineWidth?: number; - strokeStyle?: string - }): void; + export class TimeSeries + { + /** + * Initialises a new TimeSeries with optional data options. + * + * Options are of the form (defaults shown): + * + *
+         * {
+         *   resetBounds: true,        // enables/disables automatic scaling of the y-axis
+         *   resetBoundsInterval: 3000 // the period between scaling calculations, in millis
+         * }
+         * 
+ * + * Presentation options for TimeSeries are specified as an argument to SmoothieChart.addTimeSeries. + */ + constructor(options?: ITimeSeriesOptions); - public removeTimeSeries(timeSeries: TimeSeries): void; + /** + * Recalculate the min/max values for this TimeSeries object. + * + * This causes the graph to scale itself in the y-axis. + */ + resetBounds(): void; - public streamTo(canvas: HTMLCanvasElement, delayMillis: number): void; + /** + * Adds a new data point to the TimeSeries, preserving chronological order. + * + * @param timestamp the position, in time, of this data point + * @param value the value of this data point + * @param sumRepeatedTimeStampValues if timestamp has an exact match in the series, this flag controls + * whether it is replaced, or the values summed (defaults to false.) + */ + append(timestamp: number, value: number, sumRepeatedTimeStampValues?: boolean): void; - public start(): void; - public stop(): void; + dropOldData(oldestValidTime: number, maxDataSetLength: number): void; + } - public updateValueRange(): void; - public render(canvas?: HTMLCanvasElement, time?: number): void; + export interface IGridOptions + { + /** The background colour of the chart. */ + fillStyle?: string; + /** The pixel width of grid lines. */ + lineWidth?: number; + /** Colour of grid lines. */ + stokeStyle?: string; + /** Distance between vertical grid lines. */ + millisPerLine?: number; + /** Controls whether grid lines are 1px sharp, or softened. */ + sharpLines?: boolean; + /** Number of vertical sections marked out by horizontal grid lines. */ + verticalSections?: number; + /** Whether the grid lines trace the border of the chart or not. */ + borderVisible?: boolean; + } + + export interface ILabelOptions + { + /** Enables/disables labels showing the min/max values. */ + disabled?: boolean; + /** Colour for text of labels. */ + fillStyle?: string; + fontSize?: number; + fontFamily?: string; + precision?: number; + } + + export interface IRange { min: number; max: number } + + export interface IHorizontalLine + { + value?: number; + color?: string; + lineWidth?: number; + } + + export interface IChartOptions + { + /** Specify to clamp the lower y-axis to a given value. */ + minValue?: number; + /** Specify to clamp the upper y-axis to a given value. */ + maxValue?: number; + /** Allows proportional padding to be added above the chart. for 10% padding, specify 1.1. */ + maxValueScale?: number; + yRangeFunction?: (range:IRange)=>IRange; + /** Controls the rate at which y-value zoom animation occurs. */ + scaleSmoothing?: number; + /** Sets the speed at which the chart pans by. */ + millisPerPixel?: number; + maxDataSetLength?: number; + /** One of: 'bezier', 'linear', 'step' */ + interpolation?: string; + /** Optional function to format time stamps for bottom of chart. You may use SmoothieChart.timeFormatter, or your own/ */ + timestampFormatter?: (date:Date)=>string; + horizontalLines?: IHorizontalLine[]; + + grid?: IGridOptions; + + labels?: ILabelOptions; + } + + /** + * Initialises a new SmoothieChart. + * + * Options are optional and may be sparsely populated. Just specify the values you + * need and the rest will be given sensible defaults. + */ + export class SmoothieChart + { + constructor(chartOptions?: IChartOptions); + + /** + * Adds a TimeSeries to this chart, with optional presentation options. + */ + addTimeSeries(series: TimeSeries, seriesOptions?: ITimeSeriesPresentationOptions): void; + + /** + * Removes the specified TimeSeries from the chart. + */ + removeTimeSeries(series: TimeSeries): void; + + /** + * Gets render options for the specified TimeSeries. + * + * As you may use a single TimeSeries in multiple charts with different formatting in each usage, + * these settings are stored in the chart. + */ + getTimeSeriesOptions(timeSeries: TimeSeries): ITimeSeriesPresentationOptions; + + /** + * Brings the specified TimeSeries to the top of the chart. It will be rendered last. + */ + bringToFront(timeSeries: TimeSeries): void; + + /** + * Instructs the SmoothieChart to start rendering to the provided canvas, with specified delay. + * + * @param canvas the target canvas element + * @param delayMillis an amount of time to wait before a data point is shown. This can prevent the end of the series + * from appearing on screen, with new values flashing into view, at the expense of some latency. + */ + streamTo(canvas: HTMLCanvasElement, delayMillis: number): void; + + /** + * Starts the animation of this chart. Called by streamTo. + */ + start(): void; + + /** + * Stops the animation of this chart. + */ + stop(): void; + + updateValueRange(): void; + + render(canvas?: HTMLCanvasElement, time?: number): void; } }