% Copyright 2025 Remy Blank <remy@c-space.org>
% SPDX-License-Identifier: MIT

# Math

## JSXGraph

`````{rst:directive} .. jsxgraph:: name
This directive creates a graph based on
[JSXGraph](https://jsxgraph.uni-bayreuth.de/wp/). The graphs are constructed in
JavaScript, by importing the
{js:mod}`jsxgraph` module and calling {js:func}`~jsxgraph.initBoard` for each
{rst:dir}`jsxgraph` directive.

The aspect ratio of graph containers with `keepAspectRatio: true` (the default)
is set automatically from the `boundingBox`. Otherwise, the aspect ratio
defaults to `1 / 1`, and can be overridden with the
{rst:dir}`:style: <jsxgraph:style>` option.

- [JSXGraph API documentation](https://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.html)
- [JSXGraph examples](https://jsxgraph.uni-bayreuth.de/wiki/index.php/Category:Examples)

````{code-block} html
```{jsxgraph} sin
:style: aspect-ratio: 16 / 9;
```

<script type="module">
const [{initBoard}] = await tdoc.imports('tdoc/jsxgraph.js');
const attrs = {
    boundingBox: [-7, 1.3, 7, -1.3], keepAspectRatio: false,
    axis: true, grid: true,
};
initBoard('sin', attrs, board => {
    board.create('functiongraph', [x => Math.sin(x)]);
});
</script>
````

{.rubric}
Options
```{rst:directive:option} class: name [name...]
:type: IDs
A space-separated list of CSS classes to add to the graph container.
```
```{rst:directive:option} style: property: value; [property: value; ...]
CSS styles to apply to the graph container.
```
`````

### `tdoc/jsxgraph.js`

`````{js:module} jsxgraph
This module
([source](https://github.com/t-doc-org/common/blob/main/tdoc/common/static/tdoc/jsxgraph.js))
provides functionality related to {rst:dir}`jsxgraph` directives.
`````

```{js:data} JXG
The [`JXG`](https://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.html) namespace of
the JSXGraph library.
```

```{js:data} nonInteractive
Mix-in board attributes to disable interactive features.
```

```{js:function} merge(...attrs)
Merge multiple attributes objects.
:arg !Array[Object] attrs: The attribute objects to merge. Later arguments
override earlier ones.
:returns: The merged attribute object.
```

```{js:function} initBoard(name, attrs[, fn])
Initialize and construct the content of a {rst:dir}`jsxgraph` directive.

In addition to board attributes, `attrs` can specify per object type defaults
for the graph in the `defaults` key, similar to how global defaults are
specified in
[JXG.Options](https://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.Options.html).

:arg !string name: The name of the {rst:dir}`jsxgraph` directive.
:arg !Object attrs: The board attributes, passed to `JSXGraph.initBoard()`.
If an `Array` of attributes is provided, they are merged with {js:func}`~merge`.
:arg !function fn: An optional function that is called with the
[`Board`](https://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.Board.html) as an
argument.
:returns: A `Promise` that resolves to the
[`Board`](https://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.Board.html).
```
