@feds01/graphika

---

@feds01/graphika / basic.graph

basic.graph

Classes

default

Defined in: basic.graph.ts:215

Class that represent the basis graph drawing option

Constructors

Constructor

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

Defined in: basic.graph.ts:275

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:237
canvas	public	HTMLCanvasElement	Since v0.0.1 A reference to the canvas element.	basic.graph.ts:248
ctx	public	CanvasRenderingContext2D	Since v0.0.1 The canvas context object, this is used to draw on the canvas element.	basic.graph.ts:253
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:224
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:243
gridRectSize	public	{ x: number; y: number; }	-	basic.graph.ts:257
gridRectSize.x	public	number	-	basic.graph.ts:257
gridRectSize.y	public	number	-	basic.graph.ts:257
lengths	public	Lengths	-	basic.graph.ts:264
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:219
padding	public	Padding	-	basic.graph.ts:256

Methods

calculateLengths()

calculateLengths(): void;

Defined in: basic.graph.ts:540

Returns

void

calculatePadding()

calculatePadding(): void;

Defined in: basic.graph.ts:562

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

draw()

draw(): void;

Defined in: basic.graph.ts:670

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:345

Returns

number

getLineLabels()

getLineLabels(): string[];

Defined in: basic.graph.ts:377

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:356

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:36

Animation options for the graph.

Properties

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

---

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;
  x_label?: string;
  y_label?: string;
};

Defined in: basic.graph.ts:45

Properties

Property	Type	Description	Defined in
animation?	AnimationOptions	Animation settings for the graph.	basic.graph.ts:81
axisColour?	string	Colour of the axes.	basic.graph.ts:62
debug?	boolean	Debug mode for the graph. Enables additional logging and visual aids for development.	basic.graph.ts:84
grid?	GridOptions	Grid options for the graph.	basic.graph.ts:65
labelFont?	string	-	basic.graph.ts:56
labelFontSize?	number	-	basic.graph.ts:59
legend?	LegendOptions	Legend options for the graph.	basic.graph.ts:78
padding?	number	Padding around the graph content.	basic.graph.ts:47
scale?	{ shorthandNumerics?: boolean; x?: AxisOptions; y?: AxisOptions; }	Scale options for the graph axes.	basic.graph.ts:71
scale.shorthandNumerics?	boolean	-	basic.graph.ts:72
scale.x?	AxisOptions	-	basic.graph.ts:73
scale.y?	AxisOptions	-	basic.graph.ts:74
title?	TitleOptions	Title options for the graph.	basic.graph.ts:68
x_label?	string	-	basic.graph.ts:50
y_label?	string	-	basic.graph.ts:53

---

GridOptions

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

Defined in: basic.graph.ts:27

Properties

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

---

TitleAlignment

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

Defined in: basic.graph.ts:98

---

TitleOptions

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

Defined in: basic.graph.ts:87

Properties

Property	Type	Defined in
alignment?	TitleAlignment	basic.graph.ts:91
colour?	string	basic.graph.ts:94
content	string	basic.graph.ts:89
draw?	boolean	basic.graph.ts:88
fontFamily?	string	basic.graph.ts:92
fontSize?	number	basic.graph.ts:93
position?	TitlePosition	basic.graph.ts:90

---

TitlePosition

type TitlePosition = "top";

Defined in: basic.graph.ts:97