mafs

Mafs utilizes unit, end-to-end, and visual regression testing. Visual regression tests compare component screenshots against known baselines. Note that running tests for Safari and iOS Safari may require a Mac.

Use the following commands to manage the test suites:

• pnpm test: Runs both unit and end-to-end/visual test suites.
• pnpm test:unit: Runs only the Jest unit tests.
• pnpm test:e2e: Runs Playwright (includes end-to-end and visual tests).
• pnpm test -- --update-snapshots: Updates the visual test baselines.

pnpm test      # run both suites
pnpm test:unit # to run just the Jest tests
pnpm test:e2e  # to run Playwright (end-to-end and visual tests)
pnpm test -- --update-snapshots # to update the visual test baselines

To develop with Mafs, you can run the Next.js documentation site which imports components directly from src/. Ensure you use pnpm as specified in the packageManager field of package.json. It is recommended to use corepack to manage pnpm versions automatically.

Follow these steps to start the development server:

1. Install dependencies using pnpm install.
2. Start the server using pnpm start.
3. Access the documentation site at http://localhost:3000.

The .MafsView component uses CSS custom properties (variables) for theming and styling. You can override these variables in your own CSS to customize the appearance of the charts, including background colors, line colors, and specific color palettes used for data points.

Key variables include:

• --mafs-bg: Background color (default: black).
• --mafs-fg: Foreground/text color (default: white).
• --mafs-line-color: Color for grid/axis lines (default: #555).
• --mafs-line-stroke-dash-style: Dash pattern for lines (default: 4, 3).
• --mafs-axis-stroke-width: Width of axis strokes (default: 1px).
• --grid-line-subdivision-color: Color for grid subdivisions (default: #222).

Predefined color palette variables:

• --mafs-red, --mafs-orange, --mafs-yellow, --mafs-green, --mafs-blue, --mafs-indigo, --mafs-violet, --mafs-pink.

You can control user interactions via the pan and zoom props:

• pan: A boolean. If true, enables panning with the mouse and keyboard.
• zoom: Can be a boolean or an object { min: number; max: number } to set scale limits.
  • min must be in the range (0, 1].
  • max must be in the range [1, ∞).

When zoom is a boolean, it defaults to a range of 0.5 to 5.

Use the viewBox and preserveAspectRatio props to define the visible area of your coordinate system.

• viewBox: Defines the "area of interest". It accepts an object with x and y arrays (representing [min, max]) and an optional padding number.
• preserveAspectRatio: Determines how the graph fills the viewport.
  • `

The Mafs component accepts several props to control its behavior:

• width: The width of the viewport. Can be a number or `

The VectorField component accepts the following props:

• xy: A function (point: vec.Vector2) => vec.Vector2 that defines the vector at a specific coordinate. vec.Vector2 is an array of two numbers [x, y].
• xyOpacity?: An optional function (point: vec.Vector2) => number that returns an opacity value (0 to 1) for the vector at a specific coordinate.
• step: A number defining the granularity of the grid (the distance between vector points). Defaults to 1.
• opacityStep?: An optional number that controls the granularity of opacity rendering. A smaller opacityStep increases fidelity but may impact performance. Defaults to 1 if xyOpacity is not provided, or 0.2 if it is.
• color?: A string representing the color of the vectors. Defaults to Theme.foreground.

The matrixBuilder() function returns a builder object that allows you to chain transformations to create a single Matrix. You can start with an existing matrix or use the default identity matrix.

Available builder methods:

• translate(x, y): Applies a translation.
• rotate(a): Applies a rotation by angle a (radians).
• scale(x, y): Applies scaling.
• shear(x, y): Applies a shear transformation.
• mult(m): Multiplies the current matrix by another matrix m.
• get(): Returns the final Matrix.