@feds01/graphika

---

@feds01/graphika / basic.graph

basic.graph

Classes

default

Defined in: basic.graph.ts:220

Class that represent the basis graph drawing option

Constructors

Constructor

new default(
   id, 
   options, 
   data
): default;

Defined in: basic.graph.ts:297

Parameters

Parameter	Type
id	string
options	BasicGraphOptions
data	DataSource[]

Returns

default

Properties

Property	Modifier	Type	Description	Defined in
axisManager	public	default	Since v0.0.1 AxisManager object is a manager class for the Axis objects of this Graph object, The AxisManager contains the xAxis & yAxis objects, it also handles the synchronisation of scales & negative axis modes.	basic.graph.ts:247
canvas	public	HTMLCanvasElement	Since v0.0.1 A reference to the canvas element.	basic.graph.ts:258
ctx	public	CanvasRenderingContext2D	Since v0.0.1 The canvas context object, this is used to draw on the canvas element.	basic.graph.ts:263
dataManager	public	default	Since v0.0.1 DataManager object which contains the data for the lines the graph should plot, the object also contains various utility functions to fetch stats on the data. *	basic.graph.ts:229
drawer	public	default	Since v0.0.1 Drawer object is the interface to use when dealing with the drawing of the graph, it contains the canvas element, the canvas context and the methods to draw on the canvas.	basic.graph.ts:253
gridRectSize	public	{ x: number; y: number; }	-	basic.graph.ts:267
gridRectSize.x	public	number	-	basic.graph.ts:267
gridRectSize.y	public	number	-	basic.graph.ts:267
lengths	public	Lengths	-	basic.graph.ts:286
options	public	BasicGraphOptions	Since v0.0.1 Graph options, this contain x-labels, y-label, tittle, legends, points style, gridded, etc. More on graph options can be read in the documentation *	basic.graph.ts:224
padding	public	Padding	-	basic.graph.ts:266

Methods

calculateLengths()

calculateLengths(): void;

Defined in: basic.graph.ts:630

Returns

void

calculatePadding()

calculatePadding(): void;

Defined in: basic.graph.ts:657

Calculates the padding around the graph grid, taking into account font sizes of labels, title, legends and any other parameters that could affect the size that needs to be reserved around the area.

Returns

void

destroy()

destroy(): void;

Defined in: basic.graph.ts:946

Cleanup resources used by the graph.

Call this method when the graph is no longer needed to remove event listeners and free up resources.

Returns

void

draw()

draw(): void;

Defined in: basic.graph.ts:786

Method that draws the whole graph, computing all pre-requisites and then invoking draw on children components.

Returns

void

fontSize()

fontSize(): number;

Defined in: basic.graph.ts:392

Returns

number

getLineLabels()

getLineLabels(): string[];

Defined in: basic.graph.ts:427

Returns

string[]

Since

v0.0.1

This method is used to fetch all line labels that are present on this graph.

removeLineByLabel()

removeLineByLabel(label): void;

Defined in: basic.graph.ts:403

Parameters

Parameter	Type
label	string

Returns

void

Since

v0.0.1

This method is used to remove a line by a given 'label' which is present with every line that is present on the graph. If the developer does not specify a label, a random string is generated and that is used as a label instead.

Type Aliases

AnimationOptions

type AnimationOptions = {
  duration?: number;
  easing?: EasingAnimationFn;
  enabled: boolean;
};

Defined in: basic.graph.ts:38

Animation options for the graph.

Properties

Property	Type	Description	Defined in
duration?	number	Duration of the animation in milliseconds.	basic.graph.ts:42
easing?	EasingAnimationFn	Easing function for the animation.	basic.graph.ts:44
enabled	boolean	Whether to animate the lines when drawing.	basic.graph.ts:40

---

BasicGraphOptions

type BasicGraphOptions = {
  animation?: AnimationOptions;
  axisColour?: string;
  debug?: boolean;
  grid?: GridOptions;
  labelFont?: string;
  labelFontSize?: number;
  legend?: LegendOptions;
  padding?: number;
  scale?: {
     shorthandNumerics?: boolean;
     x?: AxisOptions;
     y?: AxisOptions;
  };
  title?: TitleOptions;
  tooltip?: TooltipOptions;
  x_label?: string;
  y_label?: string;
};

Defined in: basic.graph.ts:47

Properties

Property	Type	Description	Defined in
animation?	AnimationOptions	Animation settings for the graph.	basic.graph.ts:83
axisColour?	string	Colour of the axes.	basic.graph.ts:64
debug?	boolean	Debug mode for the graph. Enables additional logging and visual aids for development.	basic.graph.ts:89
grid?	GridOptions	Grid options for the graph.	basic.graph.ts:67
labelFont?	string	-	basic.graph.ts:58
labelFontSize?	number	-	basic.graph.ts:61
legend?	LegendOptions	Legend options for the graph.	basic.graph.ts:80
padding?	number	Padding around the graph content.	basic.graph.ts:49
scale?	{ shorthandNumerics?: boolean; x?: AxisOptions; y?: AxisOptions; }	Scale options for the graph axes.	basic.graph.ts:73
scale.shorthandNumerics?	boolean	-	basic.graph.ts:74
scale.x?	AxisOptions	-	basic.graph.ts:75
scale.y?	AxisOptions	-	basic.graph.ts:76
title?	TitleOptions	Title options for the graph.	basic.graph.ts:70
tooltip?	TooltipOptions	Tooltip settings for interactive data display.	basic.graph.ts:86
x_label?	string	-	basic.graph.ts:52
y_label?	string	-	basic.graph.ts:55

---

GridOptions

type GridOptions = {
  gridded?: boolean;
  gridLineStyle?: string;
  optimiseSquareSize?: boolean;
  sharedAxisZero?: boolean;
  strict?: boolean;
};

Defined in: basic.graph.ts:29

Properties

Property	Type	Defined in
gridded?	boolean	basic.graph.ts:30
gridLineStyle?	string	basic.graph.ts:31
optimiseSquareSize?	boolean	basic.graph.ts:32
sharedAxisZero?	boolean	basic.graph.ts:33
strict?	boolean	basic.graph.ts:34

---

TitleAlignment

type TitleAlignment = "start" | "center" | "end";

Defined in: basic.graph.ts:103

---

TitleOptions

type TitleOptions = {
  alignment?: TitleAlignment;
  colour?: string;
  content: string;
  draw?: boolean;
  fontFamily?: string;
  fontSize?: number;
  position?: TitlePosition;
};

Defined in: basic.graph.ts:92

Properties

Property	Type	Defined in
alignment?	TitleAlignment	basic.graph.ts:96
colour?	string	basic.graph.ts:99
content	string	basic.graph.ts:94
draw?	boolean	basic.graph.ts:93
fontFamily?	string	basic.graph.ts:97
fontSize?	number	basic.graph.ts:98
position?	TitlePosition	basic.graph.ts:95

---

TitlePosition

type TitlePosition = "top";

Defined in: basic.graph.ts:102