import Graph from 'newton-lib/src/elements/Box.Graph.js'

private class | source

Graph

Extends:

WorldElement → Graph

A Graph Box allow for Plot elements to be displayed in the box using a different scale to the main axis in the world. A Graph object is created by calling the method Box.addGraph on the parent Box.

Constructor Summary

Public Constructor
public	constructor(box: Box, width: number, height: number, opts: object)

Member Summary

Public Members
public	axis: Axis Axis object used to draw the graph axis.
public	axisPosition: string[] Array that stores the position of the axis.
public	box: Box Sets the parent box where te Graph will be placed.
public	ctx: object Context of the cavas where the Graph is drawn.
public	height: number Sets the height of the Graph in pixels.
public	legends_enabled: boolean Flag for enabling the display of the plot's legend. Usually turned on when more than one plot is being displayed. Default value is false.
public	padding: object Sets the padding in pixels that the graph has.
public	plots: Plot[] Array containing the plots displayed on the graph.
public	scaleX: Scale Scale object for the -x axis.
public	scaleY: Scale Scale object for the -y axis.
public	title: string Sets the title for the graph.
public	width: number Sets the width of the Graph in pixels.
public	xlabel: string Sets the label for the -x axis.
public	ylabel: string Sets the label for the -y axis.

Method Summary

Public Methods
public	addPlot(opts: object): Plot Adds a Plot to the graph.
public	legends(state: boolean) Controls if the legens are displayed.
public	setAxisPosition(xPos: string, yPos: string) Sets the origin of the axis.
public	setDimensions(width: number, height: number) Change the dimensions of the Graph object.
public	setLabels(title: string, xlabel: string, ylabel: string) Sets the labels for the graph.
public	setPadding(top: number, right: number, bottom: number, left: number) Sets the padding of the Graph object.

Private Methods
private	debug() Debug function used to draw a box around the dimensions of the Graph object.
private	draw() Draw function for the Graph and Plots called by the parent box.
private	setAxisDimensions() Calculates the dimensions of the axis based on the total Graph dimensions and the padding set.

Inherited Summary

From class WorldElement
public	color: string Sets the color in HEX format of the element.
public	cursor: string Sets the cursor style when the mouse is over the element.
public	display: boolean Flag for enabling or diabling this element.
public	dragging: boolean Flag set when the element is being dragged around.
public	font: Font Sets the font of the element.
public	height: number Sets the current height of the element.
public	isDraggable: boolean Flag for allowing the element to be dragged around.
public	mouseMoveStyle: string Sets the move style of the element.
public	mouseOver: boolean Flag set when the mouse is over the element.
public	onMouseMove: function Sets a callback function for when the element is dragged around.
public	position: object Sets the position of the element.
public	renderer: Renderer Sets the renderer used for the element.
public	rotation: number Sets the rotation of the element.
public	savedZIndex: number A copy of the z-index value is stored here.
public	scale: number Sets the drawing scale of the element.
public	topmostOnDrag: boolean Flag for determining if the element will be a top-most element when dragged around.
public	valid: boolean Flag used to determine if an object is a child of WorldElement.
public	width: number Sets the current width of the element.
public	world: World Sets the world where this element is found.
public	zIndex: number Sets the z-index of the element.
public	addPosition(x: number, y: number) Adds the provided coordinates to the position.
public	draggable(s: boolean) Sets if the element is draggable.
public	isMouseOver(): boolean Function called when the mouse moves to check if the pointer is over the element.
public	setColor(c: string) Sets the color in HEX format of the element.
public	setPosition(x: number, y: number) Sets the position of the element.
public	setScale(s: number) Sets the scale of the element.
public	setZ(z: number) Sets the z-index of the element.
private	resize() Function called when the canvas gets resized.
private	setWorld(world: World) Sets the world object where element will be drawn.
private	topmost(state: boolean) Sets the element as a topmost element.

Public Constructors

public constructor(box: Box, width: number, height: number, opts: object) source

Override:

WorldElement#constructor

Params:

Name	Type	Attribute	Description
box	Box		Parent box.
width	number		Width of the graph in pixels.
height	number		Height of the graph in pixels.
opts	object	optional	Object that contains valid Graph properties with values. Their values will be assigned at the end of the constructor. If an invalid property is passed then the value will be ignored.

Public Members

public axis: Axis source

Axis object used to draw the graph axis.

public axisPosition: string[] source

Array that stores the position of the axis. See Graph.setAxisPosition for more details. Default value is ["left", "bottom"].

public box: Box source

Sets the parent box where te Graph will be placed.

public ctx: object source

Context of the cavas where the Graph is drawn. The canvas is saved in order for the plots to be able to find it, since the parent of the Plot is this object.

public height: number source

Sets the height of the Graph in pixels.

Override:

WorldElement#height

public legends_enabled: boolean source

Flag for enabling the display of the plot's legend. Usually turned on when more than one plot is being displayed. Default value is false.

public padding: object source

Sets the padding in pixels that the graph has. The padding is used to display the title, x label, and y label. The padding is then adjusted depending on the value of Graph.legends_enabled to accomodate the display of the legends.

Properties:

Name	Type	Attribute	Description
left	number	default: 25	Left padding in pixels.
bottom	number	default: 25	Bottom padding in pixels.
right	number	default: 10	Right padding in pixels.
top	number	default: 10	Top padding.

public plots: Plot[] source

Array containing the plots displayed on the graph.

public scaleX: Scale source

Scale object for the -x axis. Default scale is 20px per 1 unit.

public scaleY: Scale source

Scale object for the -y axis. Default scale is 20px per 1 unit.

public title: string source

Sets the title for the graph. Default value is "".

public width: number source

Sets the width of the Graph in pixels.

Override:

WorldElement#width

public xlabel: string source

Sets the label for the -x axis. Default value is "x".

public ylabel: string source

Sets the label for the -y axis. Default value is "y".

Public Methods

public addPlot(opts: object): Plot source

Adds a Plot to the graph.

Params:

Name	Type	Attribute	Description
opts	object		Object that contains valid Plot properties with values. Their values will be assigned at the end of the constructor. If an invalid property is passed then the value will be ignored.

Return:

Plot	The newly created plot object.

public legends(state: boolean) source

Controls if the legens are displayed. If true, then the padding is adjusted to make space for it.

Params:

Name	Type	Attribute	Description
state	boolean		Desired state for the legends.

public setAxisPosition(xPos: string, yPos: string) source

Sets the origin of the axis. The -x axis has the following position options: center, right, left. The -y axis has the following position options: center, top, bottom.

Params:

Name	Type	Attribute	Description
xPos	string	optional	Desired position for the -x axis.
yPos	string	optional	Desired position for the -y axis.

public setDimensions(width: number, height: number) source

Change the dimensions of the Graph object.

Params:

Name	Type	Attribute	Description
width	number		Width of the graph.
height	number		Height of the graph.

public setLabels(title: string, xlabel: string, ylabel: string) source

Sets the labels for the graph. Usually the graph title is left blank, and the box's title is used as title.

Params:

Name	Type	Attribute	Description
title	string		Title of the graph.
xlabel	string		Label for the -x axis.
ylabel	string		Label for the -y axis.

public setPadding(top: number, right: number, bottom: number, left: number) source

Sets the padding of the Graph object.

Params:

Name	Type	Attribute	Description
top	number		Top padding in pixels.
right	number		Right padding in pixels.
bottom	number		Bottom padding in pixels.
left	number		Left padding in pixels.

Private Methods

private debug() source

Debug function used to draw a box around the dimensions of the Graph object. It also draws boxes around the padding sections with different fill colors in order to distinguish between them. The boxes are only drawn if the parent box has the flag Box.debug enabled.

private draw() source

Draw function for the Graph and Plots called by the parent box.

private setAxisDimensions() source

Calculates the dimensions of the axis based on the total Graph dimensions and the padding set. Then the calculated dimensions are set to the axis.