@jakub-havlas/graph-lib v3.3.4

📊 GeogebraLite

A lightweight React graphing library made as a school project.
❓ When to use?

📖 Go to How It Works

📈Library Controller

🎨 Go to Picker

📦 Go to Installation & Run

When to use

✅ when you want to setup smaller graph function tool, best for static graphs or when you don't want to spend much time

❌ when you need a precise and efficient tool for large-scale calculations

📖 How It Works

This library was created as a personal project for technical school — Průmyslovka Liberec.
At the time of writing, I’m in my third year.

The library works by calculating around 10,000 points within a set SVG viewbox to plot graphs. Unfortunately, my current math knowledge doesn't allow for more advanced solutions (like using derivatives), so the viewbox width is capped at 200 — otherwise, asymptotes start causing rendering issues.

⚠️ Asymptote Detection

My method for detecting asymptotes checks whether the last calculated point was on the opposite side of the viewport from the current one. It's a basic but workable solution given the limitations — improvements are on the roadmap.

ProcessInput & ParseExpression

My library works with expressions in array from, see NewParseExpression how they are correctly parsed. Also it supports variables, see ProcessInput on how it handles them.

Library Controller

Use this component for a simple setup.
It requires:

• reqs array of valid expressions and their colors or variables. From 3.0 this library is able to handle notation like "a=3", "ax"

export type reqs = {
  expression: string;
  color: string;
};

optional params:

• params default viewbox.
• moveable if user can move and zoom the svg - this typoe will be fixed soon moveable x moveble
• minWidth smallest possible viewbox width
• maxWidth highest possible viewbox width
• displayCoords if you want to display coords of mouse on hovering
• displayGrid if you want to display all the helping lines here is the function header and all the defaul values.

let LibraryController = ({
  reqs,
  params = { x: -2, y: -2, width: 4, height: 4 },
  moveable = true,
  minWidth = 0.001,
  maxWidth = 200,
  displayCoords = true,
  displayGrid = true,
}: {
  reqs: reqs[];
  params?: ViewBox;
  moveable?: boolean;
  minWidth?: number;
  maxWidth?: number;
  displayCoords?: boolean;
  displayGrid?: boolean;
}) => { ... }

🎨 Picker

Use this component if you want to build your own custom controller.
It requires:

• FunctionData[] patharray is optional

export type FunctionData = {
  id: number;
  color: string;
  expression: string[];
  pathArray: coords[][];
};

export type coords = {
  x: number;
  y: number;
};

Optional:

• viewbox

It returns an SVG <g> element containing your graph. Use it as element in your svg, this return only return path elemet/s

📦 Installation & Run

1. npm install graph-lib
2. Import GraphLibrary into your code.

export type reqs = {
  expression: string;
  color: string;
};

3. Fill in the reqs array with your desired functions and their colors.
4. Done!

🎨 CSS Variables

This library uses CSS custom properties (variables) to easily customize the appearance of graphs and UI elements. You can override these variables in your own stylesheets to match your project's design system or preferences.

:root {
  --background-color: #e2e2e2;
  --text-color: #121212;
  --font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  --line-height: 1.5;
  --font-weight: 400;
  --color-scheme: light dark;
  --color: rgba(0, 0, 0, 0.87); 
  --font-synthesis: none;
  --text-rendering: optimizeLegibility;
  --webkit-font-smoothing: antialiased;
  --moz-osx-font-smoothing: grayscale;
  --hover-color: #1d24af;
  --input-background-color: #b9b9b9;
  
  font-family: var(--font-family);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  color: var(--color);
  background-color: var(--background-color-light); 
  color-scheme: var(--color-scheme);
  font-synthesis: var(--font-synthesis);
  text-rendering: var(--text-rendering);
  -webkit-font-smoothing: var(--webkit-font-smoothing);
  -moz-osx-font-smoothing: var(--moz-osx-font-smoothing);


  --graph-background-color: #f0f0f0;
  --graph-text-color: #000000;
  --graph-axes-color: #000000;
  --graph-HelpLines-color: #d0d0d0;
}

@media (prefers-color-scheme: dark) {
  :root {
      --graph-HelpLines-color: #504d4d;
      --input-background-color: #414141;
      --background-color: #242424;
      --text-color: #e2e2e2;
      --color: rgba(255, 255, 255, 0.87); 
      --graph-axes-color: #ffffff;
      --graph-text-color: #ffffff;
      background-color: var(--background-color);
      color: var(--text-color);
  }
}