Skip to content

Instantly share code, notes, and snippets.

@danvk

danvk/index.d.ts

Created February 20, 2021 20:38
Show Gist options
  • Save danvk/d545606c940a7b2c6cce08de658cb6ff to your computer and use it in GitHub Desktop.
Save danvk/d545606c940a7b2c6cce08de658cb6ff to your computer and use it in GitHub Desktop.
Download ZIP
Reviving the old @types/dygraphs tests
Raw
index.d.ts
// Type definitions for dygraphs 2.1
// Project: http://dygraphs.com
// Definitions by: Dan Vanderkam <https://github.com/danvk>
// Martin Badin <https://github.com/martin-badin>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
/// <reference types="google.visualization" />
declare namespace dygraphs {
type DataArray = Array<Array<number | Date | null>>;
type Data = string | DataArray | google.visualization.DataTable;
type dateTicker = (
min: number,
max: number,
pixels: number,
opts: (name: string) => any,
dygraph: Readonly<Dygraph>,
vals: number[],
) => Array<{ v: number; label: string }>;
type numericTicks = dateTicker;
type AnnotationClickHandler = (
annotation: Readonly<Annotation>,
point: Readonly<Point>,
dygraph: Readonly<Dygraph>,
event: MouseEvent,
) => any;
type AnnotationDblClickHandler = AnnotationClickHandler;
type AnnotationMouseOutHandler = AnnotationClickHandler;
type AnnotationMouseOverHandler = AnnotationClickHandler;
interface DataHandler {
/**
* The extract series method is responsible for extracting a single series data from the
* general data array. It must return the series in the unified data format. It may or may not
* add extras for later usage.
*/
extractSeries(dygraph: Readonly<Dygraph>, rawData: any, seriesIndex: any): any;
/**
* The rolling average method is called if the rollPeriod is larger than
* 1. It is supplied with the series data generated by extractSeries and the rollPeriod. It
* must return an array that is again compliant with the unified data format. Extras may be
* used if needed.
*/
rollingAverage(dygraph: Readonly<Dygraph>, unifiedData: any, rollPeriod: any): any;
/**
* This method computes the extremes of the supplied rolledData. It may be pruned compared to
* the data returned by the DataHandler.rollingAverage method, but generally contains the data
* returned from it. The given dateWindow must be considered for the computation of the
* extreme values. Extras may be used if needed.
*/
getExtremeYValues(dygraph: Readonly<Dygraph>, unifiedData: any, dateWindow: any): any;
/**
* Based on the provided x and y values, seriesPoints for each sample of a series are created.
* This additional callback is called for every seriesPoint created. The original
* unifiedDataSample is also given so that additional extras may be extracted and added to the
* seriesPoint. (e.g. the DataHandlers for bars add y_top and y_bottom here which is needed to
* draw the error bars.)
*/
onPointCreated(dygraph: Readonly<Dygraph>, seriesPoint: any, unifiedDataSample: any): any;
/**
* Because of performance reasons, the onPointCreated callback was replaced by this method.
* The only difference is that this method is only called once per series, and not for every
* point of the series. This saves us several method calls as well as several option reads
* that are done in the onPointCreated.
*/
onLineEvaluated(dygraph: Readonly<Dygraph>, seriesPoints: any, dataset: any, setName: any): any;
}
interface PerSeriesOptions {
/**
* Set to either 'y1' or 'y2' to assign a series to a y-axis (primary or secondary). Must be
* set per-series.
* @default none
*/
axis?: 'y1' | 'y2' | '';
/**
* A per-series color definition. Used in conjunction with, and overrides, the colors option.
* @default (see description)
*/
color?: string | null;
/**
* A function (or array of functions) which plot each data series on the chart.
* TODO(danvk): more details! May be set per-series.
* @default [Dygraph.Plotters.fillPlotter, Dygraph.Plotters.errorPlotter, Dygraph.Plotters.linePlotter]
*/
plotter?: any;
/**
* Draw a small dot at each point, in addition to a line going through the point. This makes
* the individual data points easier to see, but can increase visual clutter in the chart.
* The small dot can be replaced with a custom rendering by supplying a drawPointCallback.
* @default false
*/
drawPoints?: boolean | null;
/**
* Error bars (or custom bars) for each series are drawn in the same color as the series, but
* with partial transparency. This sets the transparency. A value of 0.0 means that the error
* bars will not be drawn, whereas a value of 1.0 means that the error bars will be as dark
* as the line for the series itself. This can be used to produce chart lines whose thickness
* varies at each point.
* @default 0.15
*/
fillAlpha?: number | null;
/**
* Should the area underneath the graph be filled? This option is not compatible with error
* bars. This may be set on a per-series basis.
* @default false
*/
fillGraph?: boolean | null;
/**
* The size in pixels of the dot drawn over highlighted points.
* @default 3
*/
highlightCircleSize?: number | null;
/**
* The size of the dot to draw on each point in pixels (see drawPoints). A dot is always
* drawn when a point is "isolated", i.e. there is a missing point on either side of it. This
* also controls the size of those dots.
* @default 1
*/
pointSize?: number | null;
/**
* Mark this series for inclusion in the range selector. The mini plot curve will be an
* average of all such series. If this is not specified for any series, the default behavior
* is to average all the visible series. Setting it for one series will result in that series being
* charted alone in the range selector. Once it's set for a single series, it needs to
* be set for all series which should be included (regardless of visibility).
* @default null
*/
showInRangeSelector?: boolean | null;
/**
* When set, display the graph as a step plot instead of a line plot. This option may either
* be set for the whole graph or for single series.
* @default false
*/
stepPlot?: boolean | null;
/**
* Draw a border around graph lines to make crossing lines more easily distinguishable.
* Useful for graphs with many lines.
* @default null
*/
strokeBorderWidth?: number | null;
/**
* Color for the line border used if strokeBorderWidth is set.
* @default white
*/
strokeBorderColor?: string | null;
/**
* A custom pattern array where the even index is a draw and odd is a space in pixels. If
* null then it draws a solid line. The array should have a even length as any odd lengthed
* array could be expressed as a smaller even length array. This is used to create dashed
* lines.
* @default null
*/
strokePattern?: number[] | null;
/**
* The width of the lines connecting data points. This can be used to increase the contrast
* or some graphs.
* @default 1.0
*/
strokeWidth?: number | null;
}
interface PerAxisOptionsYAxis {
/**
* Size of the font (in pixels) to use in the axis labels, both x- and y-axis.
* @default 14
*/
axisLabelFontSize?: number | null;
/**
* Function to call to format the tick values that appear along an axis. This is usually set
* on a per-axis basis.
* @default Depends on the data type
*/
axisLabelFormatter?:
| ((v: number, granularity: number, opts: (name: string) => any, dygraph: Readonly<Dygraph>) => any)
| null;
/**
* Width (in pixels) of the containing divs for x- and y-axis labels. For the y-axis, this
* also controls the width of the y-axis. Note that for the x-axis, this is independent from
* pixelsPerLabel, which controls the spacing between labels.
* @default 50 (y-axis), 60 (x-axis)
*/
axisLabelWidth?: number | null;
/**
* Color of the x- and y-axis lines. Accepts any value which the HTML canvas strokeStyle
* attribute understands, e.g. 'black' or 'rgb(0, 100, 255)'.
* @default black
*/
axisLineColor?: string | null;
/**
* Thickness (in pixels) of the x- and y-axis lines.
* @default 0.3
*/
axisLineWidth?: number | null;
/**
* The size of the line to display next to each tick mark on x- or y-axes.
* @default 3.0
*/
axisTickSize?: number | null;
/**
* Whether to draw the specified axis. This may be set on a per-axis basis to define the
* visibility of each axis separately. Setting this to false also prevents axis ticks from
* being drawn and reclaims the space for the chart grid/lines.
* @default true for x and y, false for y2
*/
drawAxis?: boolean | null;
/**
* The color of the gridlines. This may be set on a per-axis basis to define each axis' grid
* separately.
* @default rgb(128,128,128)
*/
gridLineColor?: string | null;
/**
* A custom pattern array where the even index is a draw and odd is a space in pixels. If
* null then it draws a solid line. The array should have a even length as any odd lengthed
* array could be expressed as a smaller even length array. This is used to create dashed
* gridlines.
* @default null
*/
gridLinePattern?: number[] | null;
/**
* Thickness (in pixels) of the gridlines drawn under the chart. The vertical/horizontal
* gridlines can be turned off entirely by using the drawGrid option. This
* may be set on a per-axis basis to define each axis' grid separately.
* @default 0.3
*/
gridLineWidth?: number | null;
/**
* Only valid for y and y2, has no effect on x: This option defines whether the y axes should
* align their ticks or if they should be independent. Possible combinations: 1.) y=true,
* y2=false (default): y is the primary axis and the y2 ticks are aligned to the the ones of
* y. (only 1 grid) 2.) y=false, y2=true: y2 is the primary axis and the y ticks are aligned
* to the the ones of y2. (only 1 grid) 3.) y=true, y2=true: Both axis are independent and
* have their own ticks. (2 grids) 4.) y=false, y2=false: Invalid configuration causes an
* error.
* @default true for y, false for y2
*/
independentTicks?: boolean | null;
/**
* When set for the y-axis or x-axis, the graph shows that axis in log scale. Any values less
* than or equal to zero are not displayed. Showing log scale with ranges that go below zero
* will result in an unviewable graph.
*
* Not compatible with showZero. connectSeparatedPoints is ignored. This is ignored for
* date-based x-axes.
* @default false
*/
logscale?: boolean | null;
/**
* When displaying numbers in normal (not scientific) mode, large numbers will be displayed
* with many trailing zeros (e.g. 100000000 instead of 1e9). This can lead to unwieldy y-axis
* labels. If there are more than maxNumberWidth digits to the left of the
* decimal in a number, dygraphs will switch to scientific notation, even when not operating
* in scientific mode. If you'd like to see all those digits, set this to something large,
* like 20 or 30.
* @default 6
*/
maxNumberWidth?: number | null;
/**
* Number of pixels to require between each x- and y-label. Larger values will yield a
* sparser axis with fewer ticks. This is set on a per-axis basis.
* @default 70 (x-axis) or 30 (y-axes)
*/
pixelsPerLabel?: number | null;
/**
* By default, dygraphs displays numbers with a fixed number of digits after the decimal
* point. If you'd prefer to have a fixed number of significant figures, set this option to
* that number of sig figs. A value of 2, for instance, would cause 1 to be display as 1.0
* and 1234 to be displayed as 1.23e+3.
* @default null
*/
sigFigs?: number | null;
/**
* This lets you specify an arbitrary function to generate tick marks on an axis. The tick
* marks are an array of (value, label) pairs. The built-in functions go to great lengths to
* choose good tick marks so, if you set this option, you'll most likely want to call one of
* them and modify the result. See dygraph-tickers.js for an extensive discussion. This is
* set on a per-axis basis.
* @default dygraphs.dateTicker or dygraphs.numericTicks
*/
ticker?: dateTicker | numericTicks | null;
/**
* Function to provide a custom display format for the values displayed on mouseover. This
* does not affect the values that appear on tick marks next to the axes. To format those,
* see axisLabelFormatter. This is usually set on a per-axis basis.
* @default Depends on the type of your data.
*/
valueFormatter?:
| ((
v: number,
opts: (name: string) => any,
seriesName: string,
dygraph: Readonly<Dygraph>,
row: number,
col: number,
) => string)
| null;
/**
* Explicitly set the vertical range of the graph to [low, high]. This may be set on a
* per-axis basis to define each y-axis separately. If either limit is unspecified, it will
* be calculated automatically (e.g. [null, 30] to automatically calculate just the lower
* bound)
* @default Full range of the input is shown
*/
valueRange?: [number | null, number | null] | null;
/**
* Whether to display gridlines in the chart. This may be set on a per-axis basis to define
* the visibility of each axis' grid separately.
* @default true for x and y, false for y2
*/
drawGrid?: boolean | null;
/**
* Show K/M/B for thousands/millions/billions on y-axis.
* @default false
*/
labelsKMB?: boolean | null;
/**
* Show k/M/G for kilo/Mega/Giga on y-axis. This is different than labelsKMB in
* that it uses base 2, not 10.
* @default false
*/
labelsKMG2?: boolean | null;
}
interface PerAxisOptions extends PerAxisOptionsYAxis {
/**
* Function to call to format the tick values that appear along an axis. This is usually set
* on a per-axis basis.
* @default Depends on the data type
*/
axisLabelFormatter?:
| ((v: number | Date, granularity: number, opts: (name: string) => any, dygraph: Readonly<Dygraph>) => any)
| null;
}
interface SeriesLegendData {
/**
* Assigned or generated series color
*/
color: string;
/**
* Series line dash
*/
dashHTML: string;
/**
* Whether currently focused or not
*/
isHighlighted: boolean;
/**
* Whether the series line is inside the selected/zoomed region
*/
isVisible: boolean;
/**
* Assigned label to this series
*/
label: string;
/**
* Generated label html for this series
*/
labelHTML: string;
/**
* y value of this series
*/
y: number;
/**
* Generated html for y value
*/
yHTML: string;
}
interface LegendData {
/**
* x value of highlighted points
*/
x: number;
/**
* Generated HTML for x value
*/
xHTML: string;
/**
* Series data for the highlighted points
*/
series: SeriesLegendData[];
/**
* Dygraph object for this graph
*/
dygraph: Dygraph;
}
interface Options extends PerSeriesOptions, PerAxisOptions {
/**
* Set this option to animate the transition between zoom windows. Applies to programmatic
* and interactive zooms. Note that if you also set a drawCallback, it will be called several
* times on each zoom. If you set a zoomCallback, it will only be called after the animation
* is complete.
* @default false
*/
animatedZooms?: boolean | null;
/**
* If provided, this function is called whenever the user clicks on an annotation.
* @default null
*/
annotationClickHandler?: AnnotationClickHandler | null;
/**
* If provided, this function is called whenever the user double-clicks on an annotation.
* @default null
*/
annotationDblClickHandler?: AnnotationDblClickHandler | null;
/**
* If provided, this function is called whenever the user mouses out of an annotation.
* @default null
*/
annotationMouseOutHandler?: AnnotationMouseOutHandler | null;
/**
* If provided, this function is called whenever the user mouses over an annotation.
* @default null
*/
annotationMouseOverHandler?: AnnotationMouseOverHandler | null;
/**
* Defines per-axis options. Valid keys are 'x', 'y' and 'y2'. Only some options may be set
* on a per-axis basis. If an option may be set in this way, it will be noted on this page.
* See also documentation on per-series and per-axis options.
* @default null
*/
axes?: {
x?: PerAxisOptions;
y?: PerAxisOptionsYAxis;
y2?: PerAxisOptionsYAxis;
} | null;
/**
* A function to call when the canvas is clicked.
* @default null
*/
clickCallback?: ((event: MouseEvent, xval: number, points: ReadonlyArray<Point>) => void) | null;
/**
* If colors is not specified, saturation of the automatically-generated
* data series colors. (0.0-1.0)
* @default 1.0
*/
colorSaturation?: number | null;
/**
* If colors is not specified, value of the data series colors, as in hue/saturation/value.
* (0.0-1.0, default 0.5)
* @default 1.0
*/
colorValue?: number | null;
/**
* List of colors for the data series. These can be of the form "#AABBCC" or
* "rgb(255,100,200)" or "yellow", etc. If not specified, equally-spaced points around a
* color wheel are used. Overridden by the 'color' option.
* @default (see description)
*/
colors?: string[] | null;
/**
* Usually, when Dygraphs encounters a missing value in a data series, it interprets this as
* a gap and draws it as such. If, instead, the missing values represents an x-value for
* which only a different series has data, then you'll want to connect the dots by setting
* this to true. To explicitly include a gap with this option set, use a value of NaN.
* @default false
*/
connectSeparatedPoints?: boolean | null;
/**
* When set, parse each CSV cell as "low;middle;high". Error bars will be drawn for each
* point between low and high, with the series itself going through middle.
* @default false
*/
customBars?: boolean | null;
/**
* Custom DataHandler. This is an advanced customization.
* @see http://bit.ly/151E7Aq.
* @default (depends on data)
*/
dataHandler?: DataHandler | null;
/**
* Initially zoom in on a section of the graph. Is of the form [earliest, latest], where
* earliest/latest are milliseconds since epoch. If the data for the x-axis is numeric, the
* values in dateWindow must also be numbers.
* @default Full range of the input is shown
*/
dateWindow?: [number, number] | null;
/**
* The delimiter to look for when separating fields of a CSV file. Setting this to a tab is
* not usually necessary, since tab-delimited data is auto-detected.
* @default ,
*/
delimiter?: string | null;
/**
* Unless it's run in scientific mode (see the sigFigs option), dygraphs
* displays numbers with digitsAfterDecimal digits after the decimal point.
* Trailing zeros are not displayed, so with a value of 2 you'll get '0', '0.1', '0.12',
* '123.45' but not '123.456' (it will be rounded to '123.46'). Numbers with absolute value
* less than 0.1^digitsAfterDecimal (i.e. those which would show up as '0.00') will be
* displayed in scientific notation.
* @default 2
*/
digitsAfterDecimal?: number | null;
/**
* Only applies when Dygraphs is used as a GViz chart. Causes string columns following a data
* series to be interpreted as annotations on points in that series. This is the same format
* used by Google's AnnotatedTimeLine chart.
* @default false
*/
displayAnnotations?: boolean | null;
/**
* When set, draw the X axis at the Y=0 position and the Y axis at the X=0 position if those
* positions are inside the graph's visible area. Otherwise, draw the axes at the bottom or
* left graph edge as usual.
* @default false
*/
drawAxesAtZero?: boolean | null;
/**
* When set, this callback gets called every time the dygraph is drawn. This includes the
* initial draw, after zooming and repeatedly while panning.
* @default null
*/
drawCallback?: ((dygraph: Readonly<Dygraph>, is_initial: boolean) => void) | null;
/**
* Draw points at the edges of gaps in the data. This improves visibility of small data
* segments or other data irregularities.
* @default false
*/
drawGapEdgePoints?: boolean | null;
/**
* Draw a custom item when a point is highlighted. Default is a small dot matching the
* series color. This method should constrain drawing to within pointSize pixels from (cx,
* cy) Also see drawPointCallback
* @default null
*/
drawHighlightPointCallback?:
| ((
this: Readonly<Dygraph>,
dygraph: Readonly<Dygraph>,
seriesName: string,
canvasContext: CanvasRenderingContext2D,
cx: number,
cy: number,
color: string,
pointSize: number,
) => void)
| null;
/**
* Draw a custom item when drawPoints is enabled. Default is a small dot matching the series
* color. This method should constrain drawing to within pointSize pixels from (cx, cy).
* Also see drawHighlightPointCallback
* @default null
*/
drawPointCallback?:
| ((
this: Readonly<Dygraph>,
dygraph: Readonly<Dygraph>,
seriesName: string,
canvasContext: CanvasRenderingContext2D,
cx: number,
cy: number,
color: string,
pointSize: number,
) => void)
| null;
/**
* Does the data contain standard deviations? Setting this to true alters the input format.
* @default false
*/
errorBars?: boolean | null;
/**
* Sets the data being displayed in the chart. This can only be set when calling
* updateOptions; it cannot be set from the constructor. For a full description of valid data
* formats, see the Data Formats page.
* @default (set when constructed)
*/
file?: Data | null;
/**
* When set, attempt to parse each cell in the CSV file as "a/b", where a and b are integers.
* The ratio will be plotted. This allows computation of Wilson confidence intervals (see
* below).
* @default false
*/
fractions?: boolean | null;
/**
* Height, in pixels, of the chart. If the container div has been explicitly sized, this will
* be ignored.
* @default 320
*/
height?: number | null;
/**
* Whether to hide the legend when the mouse leaves the chart area.
* @default true
*/
hideOverlayOnMouseOut?: boolean | null;
/**
* When set, this callback gets called every time a new point is highlighted.
* @default null
*/
highlightCallback?:
| ((event: MouseEvent, xval: number, points: ReadonlyArray<Point>, row: number, seriesName: string) => void)
| null;
/**
* Fade the background while highlighting series. 1=fully visible background (disable
* fading), 0=hiddden background (show highlighted series only).
* @default 0.5
*/
highlightSeriesBackgroundAlpha?: number | null;
/**
* Sets the background color used to fade out the series in conjunction with 'highlightSeriesBackgroundAlpha'.
* @default rgb(255, 255, 255)
*/
highlightSeriesBackgroundColor?: string | null;
/**
* When set, the options from this object are applied to the timeseries closest to the mouse
* pointer for interactive highlighting. See also 'highlightCallback'. Example:
* highlightSeriesOpts: { strokeWidth: 3 }.
* @default null
*/
highlightSeriesOpts?: PerSeriesOptions | null;
/**
* Usually, dygraphs will use the range of the data plus some padding to set the range of the
* y-axis. If this option is set, the y-axis will always include zero, typically as the
* lowest value. This can be used to avoid exaggerating the variance in the data
* @default false
*/
includeZero?: boolean | null;
/**
* TODO(@konigsberg): document this
* @default ...
*/
interactionModel?: object | null;
/**
* A name for each data series, including the independent (X) series. For CSV files and
* DataTable objections, this is determined by context. For raw data, this must be specified.
* If it is not, default values are supplied and a warning is logged.
* @default ["X", "Y1", "Y2", ...]*
*/
labels?: string[] | null;
/**
* Show data labels in an external div, rather than on the graph. This value can either be a
* div element or a div id.
* @default null
*/
labelsDiv?: HTMLElement | string | null;
/**
* Put <br/> between lines in the label string. Often used in conjunction
* with labelsDiv.
* @default false
*/
labelsSeparateLines?: boolean | null;
/**
* Show zero value labels in the labelsDiv.
* @default true
*/
labelsShowZeroValues?: boolean | null;
/**
* Show date/time labels according to UTC (instead of local time).
* @default false
*/
labelsUTC?: boolean | null;
/**
* When to display the legend. By default, it only appears when a user mouses over the chart.
* Set it to "always" to always display a legend of some sort. When set to "follow", legend
* follows highlighted points. If set to 'never' then it will not appear at all.
* @default onmouseover
*/
legend?: 'always' | 'follow' | 'onmouseover' | 'never' | null;
/**
* Set this to supply a custom formatter for the legend. See this comment and the
* legendFormatter demo for usage.
* @default null
*/
legendFormatter?: ((data: LegendData) => string) | null;
/**
* A value representing the farthest a graph may be panned, in percent of the display. For
* example, a value of 0.1 means that the graph can only be panned 10% passed the edges of the
* displayed values. null means no bounds.
* @default null
*/
panEdgeFraction?: number | null;
/**
* Defines per-graph plugins. Useful for per-graph customization
* @default []
*/
plugins?: any[] | null;
/**
* A function to call when a data point is clicked. and the point that was clicked.
* @default null
*/
pointClickCallback?: ((event: MouseEvent, point: Readonly<Point>) => void) | null;
/**
* Height, in pixels, of the range selector widget. This option can only be specified at
* Dygraph creation time.
* @default 40
*/
rangeSelectorHeight?: number | null;
/**
* The range selector mini plot fill color. This can be of the form "#AABBCC" or
* "rgb(255,100,200)" or "yellow". You can also specify null or "" to turn off fill.
* @default #A7B1C4
*/
rangeSelectorPlotFillColor?: string | null;
/**
* The range selector mini plot stroke color. This can be of the form "#AABBCC" or
* "rgb(255,100,200)" or "yellow". You can also specify null or "" to turn off stroke.
* @default #808FAB
*/
rangeSelectorPlotStrokeColor?: string | null;
/**
* Number of pixels to leave blank at the right edge of the Dygraph. This makes it easier to
* highlight the right-most data point.
* @default 5
*/
rightGap?: number | null;
/**
* Number of days over which to average data. Discussed extensively above.
* @default 1
*/
rollPeriod?: number | null;
/**
* Defines per-series options. Its keys match the y-axis label names, and the values are
* dictionaries themselves that contain options specific to that series.
* @default null
*/
series?: Record<string, PerSeriesOptions> | null;
/**
* Whether to show the legend upon mouseover.
* @default true
*/
showLabelsOnHighlight?: boolean | null;
/**
* Show or hide the range selector widget.
* @default false
*/
showRangeSelector?: boolean | null;
/**
* If the rolling average period text box should be shown.
* @default false
*/
showRoller?: boolean | null;
/**
* When errorBars is set, shade this many standard deviations above/below each point.
* @default 2.0
*/
sigma?: number | null;
/**
* If set, stack series on top of one another rather than drawing them independently. The
* first series specified in the input data will wind up on top of the chart and the last
* will be on bottom. NaN values are drawn as white areas without a line on top, see
* stackedGraphNaNFill for details.
* @default false
*/
stackedGraph?: boolean | null;
/**
* Controls handling of NaN values inside a stacked graph. NaN values are
* interpolated/extended for stacking purposes, but the actual point value remains NaN in the
* legend display. Valid option values are "all" (interpolate internally, repeat leftmost and
* rightmost value as needed), "inside" (interpolate internally only, use zero outside
* leftmost and rightmost value), and "none" (treat NaN as zero everywhere).
* @default all
*/
stackedGraphNaNFill?: 'all' | 'inside' | 'none' | null;
/**
* Text to display above the chart. You can supply any HTML for this value, not just text. If
* you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-title' classes.
* @default null
*/
title?: string | null;
/**
* Height of the chart title, in pixels. This also controls the default font size of the
* title. If you style the title on your own, this controls how much space is set aside above
* the chart for the title's div.
* @default 18
*/
titleHeight?: number | null;
/**
* When set, this callback gets called before the chart is drawn. It details on how to use
* this.
* @default null
*/
underlayCallback?:
| ((context: CanvasRenderingContext2D, area: Readonly<Area>, dygraph: Readonly<Dygraph>) => void)
| null;
/**
* When set, this callback gets called every time the user stops highlighting any point by
* mousing out of the graph.
* @default null
*/
unhighlightCallback?: ((event: MouseEvent) => void) | null;
/**
* Which series should initially be visible? Once the Dygraph has been constructed, you can
* access and modify the visibility of each series using the visibility and setVisibility
* methods.
* @default [true, true, ...]
*/
visibility?: boolean[] | null;
/**
* Width, in pixels, of the chart. If the container div has been explicitly sized, this will
* be ignored.
* @default 480
*/
width?: number | null;
/**
* Use in conjunction with the "fractions" option. Instead of plotting +/- N standard
* deviations, dygraphs will compute a Wilson confidence interval and plot that. This has
* more reasonable behavior for ratios close to 0 or 1.
* @default true
*/
wilsonInterval?: boolean | null;
/**
* Height, in pixels, of the x-axis. If not set explicitly, this is computed based on
* axisLabelFontSize and axisTickSize.
* @default null
*/
xAxisHeight?: number | null;
/**
* Height of the x-axis label, in pixels. This also controls the default font size of the
* x-axis label. If you style the label on your own, this controls how much space is set
* aside below the chart for the x-axis label's div.
* @default 18
*/
xLabelHeight?: number | null;
/**
* Add the specified amount of extra space (in pixels) around the X-axis value range to
* ensure points at the edges remain visible.
* @default 0
*/
xRangePad?: number | null;
/**
* A function which parses x-values (i.e. the dependent series). Must return a number, even
* when the values are dates. In this case, millis since epoch are used. This is used
* primarily for parsing CSV data. *=Dygraphs is slightly more accepting in the dates which
* it will parse. See code for details.
* @default parseFloat() or Date.parse()*
*/
xValueParser?: ((str: string) => number) | null;
/**
* Text to display below the chart's x-axis. You can supply any HTML for this value, not just
* text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-xlabel'
* classes.
* @default null
*/
xlabel?: string | null;
/**
* Text to display to the right of the chart's secondary y-axis. This label is only displayed
* if a secondary y-axis is present. See this test for an example of how to do this. The
* comments for the 'ylabel' option generally apply here as well. This label gets a
* 'dygraph-y2label' instead of a 'dygraph-ylabel' class.
* @default null
*/
y2label?: string | null;
/**
* Width of the div which contains the y-axis label. Since the y-axis label appears rotated
* 90 degrees, this actually affects the height of its div.
* @default 18
*/
yLabelWidth?: number | null;
/**
* If set, add the specified amount of extra space (in pixels) around the Y-axis value range
* to ensure points at the edges remain visible. If unset, use the traditional Y padding
* algorithm.
* @default null
*/
yRangePad?: number | null;
/**
* Text to display to the left of the chart's y-axis. You can supply any HTML for this value,
* not just text. If you wish to style it using CSS, use the 'dygraph-label' or
* 'dygraph-ylabel' classes. The text will be rotated 90 degrees by default, so CSS rules may
* behave in unintuitive ways. No additional space is set aside for a y-axis label. If you
* need more space, increase the width of the y-axis tick labels using the yAxisLabelWidth
* option. If you need a wider div for the y-axis label, either style it that way with CSS
* (but remember that it's rotated, so width is controlled by the 'height' property) or set
* the yLabelWidth option.
* @default null
*/
ylabel?: string | null;
/**
* A function to call when the zoom window is changed (either by zooming in or out). When
* animatedZooms is set, zoomCallback is called once at the end of the transition (it will not
* be called for intermediate frames).
* @default null
*/
zoomCallback?: ((minDate: number, maxDate: number, yRanges: ReadonlyArray<[number, number]>) => void) | null;
/**
* Set this option to log timing information. The value of the option will be logged along
* with the timimg, so that you can distinguish multiple dygraphs on the same page.
* @deprecated
* @default null
*/
timingName?: string | null;
/**
* Overrides the pixel ratio scaling factor for the canvas's 2d context. Ordinarily, this is
* set to the devicePixelRatio / (context.backingStoreRatio || 1), so on mobile devices, where
* the devicePixelRatio can be somewhere around 3, performance can be improved by overriding
* this value to something less precise, like 1, at the expense of resolution.
* @default (devicePixelRatio / context.backingStoreRatio)
*/
pixelRatio?: number | null;
/**
* The transparency of the veil that is drawn over the unselected portions of the range
* selector mini plot. A value of 0 represents full transparency and the unselected portions
* of the mini plot will appear as normal. A value of 1 represents full opacity and the
* unselected portions of the mini plot will be hidden.
* @default 0.6
*/
rangeSelectorAlpha?: number | null;
/**
* The width of the lines below and on both sides of the range selector mini plot.
* @default 1
*/
rangeSelectorBackgroundLineWidth?: number | null;
/**
* The color of the lines below and on both sides of the range selector mini plot. This can be
* of the form "#AABBCC" or "rgb(255,100,200)" or "yellow".
* @default gray
*/
rangeSelectorBackgroundStrokeColor?: string | null;
/**
* The width the lines in the interactive layer of the range selector.
* @default 1
*/
rangeSelectorForegroundLineWidth?: number | null;
/**
* The color of the lines in the interactive layer of the range selector. This can be of the
* form "#AABBCC" or "rgb(255,100,200)" or "yellow".
* @default black
*/
rangeSelectorForegroundStrokeColor?: number | null;
/**
* The top color for the range selector mini plot fill color gradient. This can be of the form
* "#AABBCC" or "rgb(255,100,200)" or "rgba(255,100,200,42)" or "yellow". You can also specify
* null or "" to disable the gradient and fill with one single color.
* @default white
*/
rangeSelectorPlotFillGradientColor?: string | null;
/**
* The width of the range selector mini plot line.
* @default 1.5
*/
rangeSelectorPlotLineWidth?: number | null;
}
interface SeriesProperties {
name: string;
column: number;
visible: boolean;
color: string;
axis: number;
}
interface Area {
x: number;
y: number;
w: number;
h: number;
}
/**
* Point structure.
*
* xval_* and yval_* are the original unscaled data values,
* while x_* and y_* are scaled to the range (0.0-1.0) for plotting.
* yval_stacked is the cumulative Y value used for stacking graphs,
* and bottom/top/minus/plus are used for error bar graphs.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#.PointType}
*/
interface Point {
annotation?: Annotation;
idx: number;
name: string;
x?: number;
xval?: number;
y_bottom?: number;
y_stacked?: number;
y_top?: number;
y?: number;
yval_minus?: number;
yval_plus?: number;
yval_stacked?: number;
yval?: number;
}
interface Annotation {
/** The name of the series to which the annotated point belongs. */
series: string;
/**
* The x value of the point. This should be the same as the value
* you specified in your CSV file, e.g. "2010-09-13".
* You must set either x or xval.
*/
x?: number | string;
xval?: number;
/** Text that will appear on the annotation's flag. */
shortText?: string;
/** A longer description of the annotation which will appear when the user hovers over it. */
text?: string;
/**
* Specify in place of shortText to mark the annotation with an image rather than text.
* If you specify this, you must specify width and height.
*/
icon?: string;
/** Width (in pixels) of the annotation flag or icon. */
width?: number;
/** Height (in pixels) of the annotation flag or icon. */
height?: number;
/** CSS class to use for styling the annotation. */
cssClass?: string;
/** Height of the tick mark (in pixels) connecting the point to its flag or icon. */
tickHeight?: number;
/** Width of the tick mark connecting the point to its flag or icon. */
tickWidth?: number;
/** Color of the tick mark connecting the point to its flag or icon. */
tickColor?: string;
/** If true, attach annotations to the x-axis, rather than to actual points. */
attachAtBottom?: boolean;
/** This function is called whenever the user clicks on this annotation. */
clickHandler?: AnnotationClickHandler;
/** This function is called whenever the user mouses over this annotation. */
mouseOverHandler?: AnnotationMouseOverHandler;
/** This function is called whenever the user mouses out of this annotation. */
mouseOutHandler?: AnnotationMouseOutHandler;
/** this function is called whenever the user double-clicks on this annotation. */
dblClickHandler?: AnnotationDblClickHandler;
div?: HTMLDivElement;
}
type Axis = 'x' | 'y' | 'y2';
}
declare class Dygraph {
/**
* Creates an interactive, zoomable chart.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#constructor}
*/
constructor(
container: HTMLElement | string,
data: dygraphs.Data | (() => dygraphs.Data),
options?: dygraphs.Options | null,
);
/**
* Returns the zoomed status of the chart for one or both axes.
*
* Axis is an optional parameter. Can be set to 'x' or 'y'.
* The zoomed status for an axis is set whenever a user zooms using the mouse
* or when the dateWindow or valueRange are updated. Double-clicking or calling resetZoom()
* resets the zoom status for the chart.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#isZoomed}
*/
isZoomed(axis?: 'x' | 'y'): boolean;
/**
* Returns information about the Dygraph object, including its containing ID.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#toString}
*/
toString(): string;
/**
* Returns the current value for an option, as set in the constructor or via
* updateOptions. You may pass in an (optional) series name to get per-series
* values for the option.
*
* All values returned by this method should be considered immutable. If you
* modify them, there is no guarantee that the changes will be honored or that
* dygraphs will remain in a consistent state. If you want to modify an option,
* use updateOptions() instead.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#getOption}
*
* @param name The name of the option (e.g. 'strokeWidth')
* @param opt_seriesName Series name to get per-series values.
* @return The value of the option.
*/
getOption(name: string, seriesName?: string): any;
/**
* Returns the current rolling period, as set by the user or an option.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#rollPeriod}
*/
rollPeriod(): number;
/**
* Returns the currently-visible x-range. This can be affected by zooming,
* panning or a call to updateOptions.
* Returns a two-element array: [left, right].
* If the Dygraph has dates on the x-axis, these will be millis since epoch.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#xAxisRange}
*/
xAxisRange(): [number, number];
/**
* Returns the lower- and upper-bound x-axis values of the data set.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#xAxisExtremes}
*/
xAxisExtremes(): [number, number];
/**
* Returns the currently-visible y-range for an axis. This can be affected by
* zooming, panning or a call to updateOptions. Axis indices are zero-based. If
* called with no arguments, returns the range of the first axis.
* Returns a two-element array: [bottom, top].
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#yAxisRange}
*/
yAxisRange(idx?: number): [number, number];
/**
* Returns the currently-visible y-ranges for each axis. This can be affected by
* zooming, panning, calls to updateOptions, etc.
* Returns an array of [bottom, top] pairs, one for each y-axis.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#yAxisRanges}
*/
yAxisRanges(): Array<[number, number]>;
/**
* Returns the lower- and upper-bound y-axis values for each axis. These are the ranges you'll get
* if you double-click to zoom out or call resetZoom(). The return value is an array of [low,
* high] tuples, one for each y-axis.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#yAxisExtremes}
*/
yAxisExtremes(): [number, number];
/**
* Convert from data coordinates to canvas/div X/Y coordinates.
* If specified, do this conversion for the coordinate system of a particular
* axis. Uses the first axis by default.
* Returns a two-element array: [X, Y]
*
* Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
* instead of toDomCoords(null, y, axis).
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#toDomCoords}
*/
toDomCoords<X extends number | null, Y extends number | null>(
x: X,
y: Y,
axis?: number,
): [X extends number ? number : null, Y extends number ? number : null];
/**
* Convert from data x coordinates to canvas/div X coordinate.
* If specified, do this conversion for the coordinate system of a particular
* axis.
* Returns a single value or null if x is null.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#toDomXCoord}
*/
toDomXCoord<T extends number | null>(x: T): T extends number ? number : null;
/**
* Convert from data x coordinates to canvas/div Y coordinate and optional
* axis. Uses the first axis by default.
*
* Returns a single value or null if y is null.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#toDomYCoord}
*/
toDomYCoord<T extends number | null>(y: T, axis?: number): T extends number ? number : null;
/**
* Convert from canvas/div coords to data coordinates.
* If specified, do this conversion for the coordinate system of a particular
* axis. Uses the first axis by default.
* Returns a two-element array: [X, Y].
*
* Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
* instead of toDataCoords(null, y, axis).
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#toDataCoords}
*/
toDataCoords<X extends number | null, Y extends number | null>(
x: X,
y: Y,
axis?: number,
): [X extends number ? number : null, Y extends number ? number : null];
/**
* Convert from canvas/div x coordinate to data coordinate.
*
* If x is null, this returns null.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#toDataXCoord}
*/
toDataXCoord<T extends number | null>(x: T): T extends number ? number : null;
/**
* Convert from canvas/div y coord to value.
*
* If y is null, this returns null.
* if axis is null, this uses the first axis.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#toDataYCoord}
*/
toDataYCoord<T extends number | null>(y: T, axis?: number): T extends number ? number : null;
/**
* Converts a y for an axis to a percentage from the top to the
* bottom of the drawing area.
*
* If the coordinate represents a value visible on the canvas, then
* the value will be between 0 and 1, where 0 is the top of the canvas.
* However, this method will return values outside the range, as
* values can fall outside the canvas.
*
* If y is null, this returns null.
* If axis is null, this uses the first axis.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#toPercentYCoord}
*
* @param y The data y-coordinate.
* @param [axis] The axis number on which the data coordinate lives.
* @return A fraction in [0, 1] where 0 = the top edge.
*/
toPercentYCoord<T extends number | null>(y: T, axis?: number): T extends null ? null : 0 | 1;
/**
* Converts an x value to a percentage from the left to the right of
* the drawing area.
*
* If the coordinate represents a value visible on the canvas, then
* the value will be between 0 and 1, where 0 is the left of the canvas.
* However, this method will return values outside the range, as
* values can fall outside the canvas.
*
* If x is null, this returns null.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#toPercentXCoord}
*
* @param x The data x-coordinate.
* @return A fraction in [0, 1] where 0 = the left edge.
*/
toPercentXCoord<T extends number | null>(x: T): T extends null ? null : 0 | 1;
/**
* Returns the number of columns (including the independent variable).
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#numColumns}
*/
numColumns(): number;
/**
* Returns the number of rows (excluding any header/label row).
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#numRows}
*/
numRows(): number;
/**
* Returns the value in the given row and column. If the row and column exceed
* the bounds on the data, returns null. Also returns null if the value is missing.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#getValue}
*
* @param row The row number of the data (0-based). Row 0 is the first row of data,
* not a header row.
* @param col The column number of the data (0-based)
* @return The value in the specified cell or null if the row/col were out of range.
*/
getValue(row: number, col: number): number | null;
/**
* Detach DOM elements in the dygraph and null out all data references.
* Calling this when you're done with a dygraph can dramatically reduce memory
* usage. See, e.g., the tests/perf.html example.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#destroy}
*/
destroy(): void;
/**
* Return the list of colors. This is either the list of colors passed in the
* attributes or the autogenerated list of rgb(r,g,b) strings.
* This does not return colors for invisible series.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#getColors}
*/
getColors(): string[];
/**
* Returns a few attributes of a series, i.e. its color, its visibility, which
* axis it's assigned to, and its column in the original data.
* Returns null if the series does not exist.
* Otherwise, returns an object with column, visibility, color and axis properties.
* The "axis" property will be set to 1 for y1 and 2 for y2.
* The "column" property can be fed back into getValue(row, column) to get
* values for this series.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#getPropertiesForSeries}
*/
getPropertiesForSeries(seriesName: string): dygraphs.SeriesProperties | null;
/**
* Reset the zoom to the original view coordinates. This is the same as
* double-clicking on the graph.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#resetZoom}
*/
resetZoom(): void;
/**
* Get the current graph's area object.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#getArea}
*/
getArea(): dygraphs.Area;
/**
* Convert a mouse event to DOM coordinates relative to the graph origin.
*
* Returns a two-element array: [X, Y].
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#eventToDomCoords}
*/
eventToDomCoords(event: MouseEvent): [number, number];
/**
* Manually set the selected points and display information about them in the
* legend. The selection can be cleared using clearSelection() and queried
* using getSelection(). To set a selected series but not a selected point,
* call setSelection with row=false and the selected series name.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#setSelection}
*
* @param row Row number that should be highlighted (i.e. appear with
* hover dots on the chart).
* @param optional series name to highlight that series with the
* the highlightSeriesOpts setting.
* @param optional If true, keep seriesName selected when mousing
* over the graph, disabling closest-series highlighting. Call clearSelection()
* to unlock it.
*/
setSelection(row: number | false, seriesName?: string, locked?: boolean): void;
/**
* Clears the current selection (i.e. points that were highlighted by moving
* the mouse over the chart).
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#clearSelection}
*/
clearSelection(): void;
/**
* Returns the number of the currently selected row. To get data for this row,
* you can use the getValue method.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#getSelection}
*
* @return row number, or -1 if nothing is selected
*/
getSelection(): number;
/**
* Returns the name of the currently-highlighted series.
* Only available when the highlightSeriesOpts option is in use.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#getHighlightSeries}
*/
getHighlightSeries(): string;
/**
* Returns true if the currently-highlighted series was locked
* via setSelection(..., seriesName, true).
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#isSeriesLocked}
*/
isSeriesLocked(): boolean;
/**
* Returns the number of y-axes on the chart.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#numAxes}
*/
numAxes(): number;
/**
* Changes various properties of the graph. These can include:
* - file: changes the source data for the graph
* - errorBars: changes whether the data contains stddev
*
* There's a huge variety of options that can be passed to this method. For a
* full list, see http://dygraphs.com/options.html.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#updateOptions}
*
*
* @param input_attrs The new properties and values
* @param block_redraw Usually the chart is redrawn after every
* call to updateOptions(). If you know better, you can pass true to
* explicitly block the redraw. This can be useful for chaining
* updateOptions() calls, avoiding the occasional infinite loop and
* preventing redraws when it's not necessary (e.g. when updating a
* callback).
*/
updateOptions(inputAttrs: dygraphs.Options, blockRedraw?: boolean): void;
/**
* Resizes the dygraph. If no parameters are specified, resizes to fill the
* containing div (which has presumably changed size since the dygraph was
* instantiated. If the width/height are specified, the div will be resized.
*
* This is far more efficient than destroying and re-instantiating a
* Dygraph, since it doesn't have to reparse the underlying data.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#resize}
*
* @param width Width (in pixels)
* @param height Height (in pixels)
*/
resize(width: number, height: number): void;
resize(): void;
/**
* Adjusts the number of points in the rolling average. Updates the graph to
* reflect the new averaging period.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#adjustRoll}
*
* @param length Number of points over which to average the data.
*/
adjustRoll(length: number): void;
/**
* Returns a boolean array of visibility statuses.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#visibility}
*/
visibility(): boolean[];
/**
* Changes the visibility of one or more series.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#setVisibility}
*
* @param num the series index
* @param value true or false, identifying the visibility.
*/
setVisibility(num: number | number[] | object, value: boolean): void;
/**
* Update the list of annotations and redraw the chart.
* See dygraphs.com/annotations.html for more info on how to use annotations.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#setAnnotations}
*
* @param ann An array of annotation objects.
* @param suppressDraw Set to "true" to block chart redraw (optional).
*/
setAnnotations(ann: dygraphs.Annotation[], suppressDraw?: boolean): void;
/**
* Return the list of annotations.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#annotations}
*/
annotations(): dygraphs.Annotation[];
/**
* Get the list of label names for this graph. The first column is the
* x-axis, so the data series names start at index 1.
*
* Returns null when labels have not yet been defined.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#getLabels}
*/
getLabels(): string[] | null;
/**
* Get the index of a series (column) given its name. The first column is the
* x-axis, so the data series start with index 1.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#indexFromSetName}
*/
indexFromSetName(name: string): number;
/**
* Find the row number corresponding to the given x-value.
* Returns null if there is no such x-value in the data.
* If there are multiple rows with the same x-value, this will return the
* first one.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#getRowForX}
*
* @param xVal The x-value to look for (e.g. millis since epoch).
* @return The row number, which you can pass to getValue(), or null.
*/
getRowForX(xVal: number): number | null;
/**
* Trigger a callback when the dygraph has drawn itself and is ready to be
* manipulated. This is primarily useful when dygraphs has to do an XHR for the
* data (i.e. a URL is passed as the data source) and the chart is drawn
* asynchronously. If the chart has already drawn, the callback will fire
* immediately.
*
* This is a good place to call setAnnotation().
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#ready}
*/
ready(callback: (g: Dygraph) => any): void;
// Tick granularities (passed to ticker).
static SECONDLY: number;
static TWO_SECONDLY: number;
static FIVE_SECONDLY: number;
static TEN_SECONDLY: number;
static THIRTY_SECONDLY: number;
static MINUTELY: number;
static TWO_MINUTELY: number;
static FIVE_MINUTELY: number;
static TEN_MINUTELY: number;
static THIRTY_MINUTELY: number;
static HOURLY: number;
static TWO_HOURLY: number;
static SIX_HOURLY: number;
static DAILY: number;
static TWO_DAILY: number;
static WEEKLY: number;
static MONTHLY: number;
static QUARTERLY: number;
static BIANNUAL: number;
static ANNUAL: number;
static DECADAL: number;
static CENTENNIAL: number;
static NUM_GRANULARITIES: number;
static defaultInteractionModel: any;
static DOTTED_LINE: number[];
static DASHED_LINE: number[];
static DOT_DASH_LINE: number[];
/**
* Standard plotters.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#.Plotters}
*/
static Plotters: {
errorPlotter(event: any): void;
linePlotter(event: any): void;
fillPlotter(event: any): void;
};
/**
* Point structure.
* {@link https://dygraphs.com/jsdoc/symbols/Dygraph.html#.PointType}
*/
static PointType: {
idx: number;
name: string;
x?: number;
xval?: number;
y_bottom?: number;
y?: number;
y_stacked?: number;
y_top?: number;
yval_minus?: number;
yval?: number;
yval_plus?: number;
yval_stacked?: number;
};
}
Raw
old-tests.ts
// These tests are copied more or less directly from http://dygraphs.com/tests/
function demo() {
const g14 = new Dygraph(
document.getElementById("div_g14")!,
'data', {
rollPeriod: 14,
errorBars: true,
labelsSeparateLines: true,
}
);
}
function twoAxes() {
var data = [] as number[][];
var g = new Dygraph(
document.getElementById("demodiv")!,
data,
{
labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
series: {
'Y3': {
axis: 'y2'
},
'Y4': {
axis: 'y2'
},
},
axes: {
y2: {
// set axis-related properties here
labelsKMB: true
},
y: {
axisLabelWidth: 60
}
},
ylabel: 'Primary y-axis',
y2label: 'Secondary y-axis',
}
);
var g2 = new Dygraph(
document.getElementById("demodiv_y2_primary")!,
data,
{
labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
ylabel: 'Primary y-axis',
y2label: 'Secondary y-axis',
series : {
'Y3': {
axis: 'y2'
},
'Y4': {
axis: 'y2'
}
},
axes: {
y: {
// set axis-related properties here
drawGrid: false,
independentTicks: false
},
y2: {
// set axis-related properties here
labelsKMB: true,
drawGrid: true,
independentTicks: true
}
}
}
);
var g3 = new Dygraph(
document.getElementById("demodiv_two_grids")!,
data,
{
labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
ylabel: 'Primary y-axis',
y2label: 'Secondary y-axis',
series : {
'Y3': {
axis: 'y2'
},
'Y4': {
axis: 'y2'
}
},
axes: {
y2: {
// set axis-related properties here
labelsKMB: true,
drawGrid: true,
independentTicks: true,
gridLinePattern: [2,2]
}
}
}
);
var g4 = new Dygraph(
document.getElementById("demodiv_one")!,
data,
{
labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
labelsKMB: true,
ylabel: 'Primary y-axis',
y2label: 'Secondary y-axis',
}
);
var g5 = new Dygraph(
document.getElementById("demodiv_one_right")!,
data,
{
labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
ylabel: 'Primary y-axis',
y2label: 'Secondary y-axis',
series : {
'Y1': {
axis: 'y2'
},
'Y2': {
axis: 'y2'
},
'Y3': {
axis: 'y2'
},
'Y4': {
axis: 'y2'
}
},
axes: {
y: {
// set axis-related properties here
drawGrid: false,
independentTicks: false
},
y2: {
// set axis-related properties here
labelsKMB: true,
drawGrid: true,
independentTicks: true
}
}
}
);
function update(el: HTMLInputElement) {
g.updateOptions( { fillGraph: el.checked } );
g2.updateOptions( { fillGraph: el.checked } );
g3.updateOptions( { fillGraph: el.checked } );
g4.updateOptions( { fillGraph: el.checked } );
g5.updateOptions( { fillGraph: el.checked } );
}
}
function perSeries() {
var data = '1234';
var g = new Dygraph(
document.getElementById("demodiv")!,
data,
{
strokeWidth: 2,
series : {
'parabola': {
strokeWidth: 0.0,
drawPoints: true,
pointSize: 4,
highlightCircleSize: 6
},
'line': {
strokeWidth: 1.0,
drawPoints: true,
pointSize: 1.5
},
'sine wave': {
strokeWidth: 3,
highlightCircleSize: 10
},
'sine wave2': {
strokePattern: [10, 2, 5, 2],
strokeWidth: 2,
highlightCircleSize: 3
}
}
}
);
var g2 = new Dygraph(
document.getElementById("demodiv2")!,
data,
{
legend: 'always',
strokeWidth: 2,
series: {
'parabola': {
strokePattern: null,
drawPoints: true,
pointSize: 4,
highlightCircleSize: 6
},
'line': {
strokePattern: Dygraph.DASHED_LINE,
strokeWidth: 1.0,
drawPoints: true,
pointSize: 1.5
},
'another line': {
strokePattern: [25, 5]
},
'sine wave': {
strokePattern: Dygraph.DOTTED_LINE,
strokeWidth: 3,
highlightCircleSize: 10
},
'sine wave2': {
strokePattern: Dygraph.DOT_DASH_LINE,
strokeWidth: 2,
highlightCircleSize: 3
}
}
}
);
var g3 = new Dygraph(
document.getElementById("demodiv3")!,
data,
{
strokeWidth: 2,
series: {
'parabola': {
strokeWidth: 0.0,
drawPoints: true,
pointSize: 4,
highlightCircleSize: 6
},
'line': {
strokeWidth: 1.0,
drawPoints: true,
pointSize: 1.5
},
'sine wave': {
strokeWidth: 3,
highlightCircleSize: 10
},
'sine wave2': {
strokePattern: [10, 2, 5, 2],
strokeWidth: 2,
highlightCircleSize: 3
}
}
}
);
}
function highlightedRegion() {
var highlight_start = 0, highlight_end = 0;
var g = new Dygraph(
document.getElementById("div_g")!,
[],
{
labels: ['X', 'Est.', 'Actual'],
animatedZooms: true,
underlayCallback: function(canvas, area, g) {
var bottom_left = g.toDomCoords(highlight_start, -20);
var top_right = g.toDomCoords(highlight_end, +20);
var left = bottom_left[0];
var right = top_right[0];
canvas.fillStyle = "rgba(255, 255, 102, 1.0)";
canvas.fillRect(left, area.y, right - left, area.h);
}
}
);
}
function makeGraph(className: string, numSeries: number, numRows: number, isStacked: boolean) {
var div = document.createElement('div');
div.className = className;
div.style.display = 'inline-block';
document.body.appendChild(div);
var labels = ['x'];
for (var i = 0; i < numSeries; ++i) {
var label = '' + i;
label = 's' + '000'.substr(label.length) + label;
labels[i + 1] = label;
}
var g = new Dygraph(
div,
'data',
{
width: 480,
height: 320,
labels: labels.slice(),
stackedGraph: isStacked,
highlightCircleSize: 2,
strokeWidth: 1,
strokeBorderWidth: isStacked ? null : 1,
highlightSeriesOpts: {
strokeWidth: 3,
strokeBorderWidth: 1,
highlightCircleSize: 5,
},
});
g.setSelection(false, 's005');
};
function linearRegressionAddSeries() {
var labels = ['X', 'Y1', 'Y2'];
var orig_colors = [] as string[];
var g = new Dygraph(
document.getElementById("demodiv")!,
'data',
{
labels: labels,
drawPoints: true,
strokeWidth: 0.0,
drawCallback: function(g, is_initial) {
if (!is_initial) return;
var c = g.getColors();
for (var i = 0; i < c.length; i++) orig_colors.push(c[i]);
}
}
);
}
function callbacks() {
var s = document.getElementById("status")!;
var g: Dygraph;
var pts_info = function(e: MouseEvent, x: number, pts: readonly dygraphs.Point[], row?: number) {
var str = "(" + x + ") ";
for (var i = 0; i < pts.length; i++) {
var p = pts[i];
if (i) str += ", ";
str += p.name + ": " + p.yval;
}
var x = e.offsetX;
var y = e.offsetY;
var dataXY = g.toDataCoords(x, y);
str += ", (" + x + ", " + y + ")";
str += " -> (" + dataXY[0] + ", " + dataXY[1] + ")";
str += ", row #"+row;
return str;
};
g = new Dygraph(
document.getElementById("div_g")!,
'NoisyData', {
rollPeriod: 7,
showRoller: true,
errorBars: true,
highlightCallback: function(e, x, pts, row) {
s.innerHTML += "<b>Highlight</b> " + pts_info(e,x,pts,row) + "<br/>";
},
unhighlightCallback: function(e) {
s.innerHTML += "<b>Unhighlight</b><br/>";
},
clickCallback: function(e, x, pts) {
s.innerHTML += "<b>Click</b> " + pts_info(e,x,pts) + "<br/>";
},
pointClickCallback: function(e, p) {
s.innerHTML += "<b>Point Click</b> " + p.name + ": " + p.x + "<br/>";
},
zoomCallback: function(minX, maxX, yRanges) {
s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + ", [" + yRanges + "]]<br/>";
},
drawCallback: function(g) {
s.innerHTML += "<b>Draw</b> [" + g.xAxisRange() + "]<br/>";
}
}
);
}
function valueAxisFormatters() {
function formatDate(d: Date) {
var yyyy = d.getFullYear(),
mm = d.getMonth() + 1,
dd = d.getDate();
return yyyy + '-' + (mm < 10 ? '0' : '') + mm + (dd < 10 ? '0' : '') + dd;
}
var g = new Dygraph(
document.getElementById("demodiv")!,
'data',
{
labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
width: 640,
height: 350,
series: {
'Y3': { axis: 'y2' },
'Y4': { axis: 'y2' }
},
axes: {
x: {
valueFormatter: function(ms) {
return 'xvf(' + formatDate(new Date(ms)) + ')';
},
axisLabelFormatter: function(d: Date | number) {
return 'xalf(' + formatDate(d as Date) + ')';
},
pixelsPerLabel: 100,
axisLabelWidth: 100,
},
y: {
valueFormatter: function(y) {
return 'yvf(' + y.toPrecision(2) + ')';
},
axisLabelFormatter: function(y: number) {
return 'yalf(' + y.toPrecision(2) + ')';
},
axisLabelWidth: 100,
},
y2: {
valueFormatter: function(y2) {
return 'y2vf(' + y2.toPrecision(2) + ')';
},
axisLabelFormatter: function(y2: number) {
return 'y2alf(' + y2.toPrecision(2) + ')';
}
}
}
});
}
function annotation() {
var eventDiv = document.getElementById("events")!;
function nameAnnotation(ann: dygraphs.Annotation) {
return "(" + ann.series + ", " + ann.x + ")";
}
var annotations = [] as dygraphs.Annotation[];
var graph_initialized = false;
var g = new Dygraph(
document.getElementById("g_div")!,
function() {
var zp = function(x: number) { if (x < 10) return "0"+x; else return ''+x; };
var r = "date,parabola,line,another line,sine wave\n";
for (var i=1; i<=31; i++) {
r += "200610" + zp(i);
r += "," + 10*(i*(31-i));
r += "," + 10*(8*i);
r += "," + 10*(250 - 8*i);
r += "," + 10*(125 + 125 * Math.sin(0.3*i));
r += "\n";
}
return r;
},
{
rollPeriod: 1,
showRoller: true,
width: 480,
height: 320,
drawCallback: function(g, is_initial) {
if (is_initial) {
graph_initialized = true;
if (annotations.length > 0) {
g.setAnnotations(annotations);
}
}
var ann = g.annotations();
var html = "";
for (var i = 0; i < ann.length; i++) {
var name = nameAnnotation(ann[i]);
html += "<span id='" + name + "'>"
html += name + ": " + (ann[i].shortText || '(icon)')
html += " -> " + ann[i].text + "</span><br/>";
}
document.getElementById("list")!.innerHTML = html;
}
}
);
var last_ann = 0;
for (var x = 10; x < 15; x += 2) {
annotations.push( {
series: 'sine wave',
x: "200610" + x,
shortText: '' + x,
text: 'Stock Market Crash ' + x
} );
last_ann = x;
}
annotations.push( {
series: 'another line',
x: "20061013",
icon: 'dollar.png',
width: 18,
height: 23,
tickHeight: 4,
text: 'Another one',
cssClass: 'annotation',
clickHandler: function() {
document.getElementById("events")!.innerHTML += "special handler<br/>";
}
} );
annotations.push( {
series: 'parabola',
x: '20061012',
shortText: 'P',
text: 'Parabola Annotation at same x-coord'
} );
if (graph_initialized) {
g.setAnnotations(annotations);
}
function add() {
var x = last_ann + 2;
var annnotations = g.annotations();
annotations.push({
series: 'line',
x: "200610" + x,
shortText: ''+x,
text: 'Line ' + x,
tickHeight: 10
} );
last_ann = x;
g.setAnnotations(annotations);
}
function bottom(el: HTMLInputElement) {
var to_bottom = true;
if (el.value != 'Shove to bottom') to_bottom = false;
var anns = g.annotations();
for (var i = 0; i < anns.length; i++) {
anns[i].attachAtBottom = to_bottom;
}
g.setAnnotations(anns);
if (to_bottom) {
el.value = 'Lift back up';
} else {
el.value = 'Shove to bottom';
}
}
var saveBg = '';
var num = 0;
g.updateOptions( {
annotationClickHandler: function(ann, point, dg, event) {
eventDiv.innerHTML += "click: " + nameAnnotation(ann) + "<br/>";
},
annotationDblClickHandler: function(ann, point, dg, event) {
eventDiv.innerHTML += "dblclick: " + nameAnnotation(ann) + "<br/>";
},
annotationMouseOverHandler: function(ann, point, dg, event) {
document.getElementById(nameAnnotation(ann))!.style.fontWeight = 'bold';
saveBg = ann.div!.style.backgroundColor;
ann.div!.style.backgroundColor = '#ddd';
},
annotationMouseOutHandler: function(ann, point, dg, event) {
document.getElementById(nameAnnotation(ann))!.style.fontWeight = 'normal';
ann.div!.style.backgroundColor = saveBg;
},
pointClickCallback: function(event, p) {
// Check if the point is already annotated.
if (p.annotation) return;
// If not, add one.
var ann = {
series: p.name,
xval: p.xval,
shortText: '' + num,
text: "Annotation #" + num
};
var anns = g.annotations();
anns.push(ann);
g.setAnnotations(anns);
num++;
}
});
}
function valueRangeTest() {
new Dygraph(
document.getElementById("valueRange-test")!,
[],
{
axes: {
x: { valueRange: [0, 100] },
y: { valueRange: [0, null] },
y2: { valueRange: null },
}
}
);
}
function resize() {
const d = new Dygraph(
document.getElementById('demo')!,
'dummy-data',
{},
);
d.resize();
d.resize(300, 200);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment