@d3plus/react 3.0.0-alpha.0

package/README.md

@@ -0,0 +1,53 @@
+# @d3plus/react
+  
+React components for d3plus visualizations.
+
+## Installing
+
+If using npm, `npm install @d3plus/react`. Otherwise, you can download the [latest release from GitHub](https://github.com/d3plus/d3plus/releases/latest) or load from a [CDN](https://cdn.jsdelivr.net/npm/@d3plus/react@3.0.0-alpha.0/+esm).
+
+```js
+import modules from "@d3plus/react";
+```
+
+In vanilla JavaScript, a `d3plus` global is exported from the pre-bundled version:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@d3plus/react@3.0.0-alpha.0"></script>
+<script>
+  console.log(d3plus);
+</script>
+```
+
+## Examples
+
+Live examples can be found on [d3plus.org](https://d3plus.org/), which includes a collection of example visualizations using @d3plus/react.
+
+## API Reference
+
+##### 
+* [D3plusContext](#D3plusContext) - A React context instance used to provide global config options via a provider (D3plusContext.Provider).
+* [Viz](#Viz)
+
+---
+
+<a name="D3plusContext"></a>
+#### d3plus.**D3plusContext**() [<>](https://github.com/d3plus/d3plus/blob/main/packages/react/src/D3plusContext.jsx#L3)
+
+A React context instance used to provide global config options via a provider (D3plusContext.Provider).
+
+
+This is a global function
+
+---
+
+<a name="Viz"></a>
+#### d3plus.**Viz**(config, [className], [callback]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/react/src/Viz.jsx#L6)
+
+
+This is a global function
+
+---
+
+
+###### <sub>Documentation generated on Thu, 13 Mar 2025 19:58:30 GMT</sub>

package/es/index.jsx

@@ -0,0 +1,132 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+import React from "react";
+import { AreaPlot as AreaPlotClass, BarChart as BarChartClass, BoxWhisker as BoxWhiskerClass, BumpChart as BumpChartClass, Donut as DonutClass, Geomap as GeomapClass, LinePlot as LinePlotClass, Matrix as MatrixClass, Network as NetworkClass, Pack as PackClass, Pie as PieClass, Plot as PlotClass, Priestley as PriestleyClass, Radar as RadarClass, RadialMatrix as RadialMatrixClass, Rings as RingsClass, Sankey as SankeyClass, StackedArea as StackedAreaClass, Tree as TreeClass, Treemap as TreemapClass } from "@d3plus/core";
+import Viz from "./src/Viz.jsx";
+export var AreaPlot = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new AreaPlotClass()
+    }, props));
+};
+export var BarChart = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new BarChartClass()
+    }, props));
+};
+export var BoxWhisker = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new BoxWhiskerClass()
+    }, props));
+};
+export var BumpChart = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new BumpChartClass()
+    }, props));
+};
+export var Donut = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new DonutClass()
+    }, props));
+};
+export var Geomap = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new GeomapClass()
+    }, props));
+};
+export var LinePlot = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new LinePlotClass()
+    }, props));
+};
+export var Matrix = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new MatrixClass()
+    }, props));
+};
+export var Network = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new NetworkClass()
+    }, props));
+};
+export var Pack = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new PackClass()
+    }, props));
+};
+export var Pie = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new PieClass()
+    }, props));
+};
+export var Plot = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new PlotClass()
+    }, props));
+};
+export var Priestley = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new PriestleyClass()
+    }, props));
+};
+export var Radar = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new RadarClass()
+    }, props));
+};
+export var RadialMatrix = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new RadialMatrixClass()
+    }, props));
+};
+export var Rings = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new RingsClass()
+    }, props));
+};
+export var Sankey = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new SankeyClass()
+    }, props));
+};
+export var StackedArea = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new StackedAreaClass()
+    }, props));
+};
+export var Tree = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new TreeClass()
+    }, props));
+};
+export var Treemap = function(props) {
+    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
+        instance: new TreemapClass()
+    }, props));
+};
+export { default as D3plusContext } from "./src/D3plusContext.jsx";

package/es/src/D3plusContext.jsx

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+/**
+    @function D3plusContext
+    @desc A React context instance used to provide global config options via a provider (D3plusContext.Provider).
+*/ export default /*#__PURE__*/ createContext({});

package/es/src/Viz.jsx

@@ -0,0 +1,41 @@
+import React, { useContext, useEffect, useRef } from "react";
+import { assign } from "@d3plus/dom";
+import D3plusContext from "./D3plusContext.jsx";
+/**
+    @function Viz
+    @param {Object} config An object containing method/value pairs to be passed to the visualization's .config( ) method.
+    @param {String} [className = "viz"] The class attribute value used for the root/wrapper <div> element.
+    @param {Function} [callback] A function to be invoked at the end of each render cycle (passed directly to the render method).
+*/ export default function(param) {
+    var callback = param.callback, _param_className = param.className, className = _param_className === void 0 ? "viz" : _param_className, config = param.config, instance = param.instance;
+    var forceUpdate = config.forceUpdate;
+    var globalConfig = useContext(D3plusContext);
+    var container = useRef(null);
+    useEffect(function() {
+        if (container.current) {
+            var c = assign({
+                select: container.current
+            }, globalConfig, config);
+            instance.config(c);
+            [
+                "data",
+                "links",
+                "nodes",
+                "topojson"
+            ].forEach(function(method) {
+                if (c["".concat(method, "Format")] && c[method]) {
+                    instance[method](c[method], c["".concat(method, "Format")]);
+                    delete c["".concat(method, "Format")];
+                }
+            });
+            instance.render(callback);
+        }
+    }, forceUpdate ? undefined : [
+        JSON.stringify(globalConfig),
+        JSON.stringify(config)
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: className,
+        ref: container
+    });
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@d3plus/react",
+  "version": "3.0.0-alpha.0",
+  "description": "React components for d3plus visualizations.",
+  "license": "MIT",
+  "type": "module",
+  "exports": "./es/index.jsx",
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false,
+  "files": [
+    "es"
+  ],
+  "homepage": "https://d3plus.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/d3plus/d3plus.git",
+    "directory": "packages/react"
+  },
+  "keywords": [
+    "react",
+    "d3",
+    "d3plus",
+    "data",
+    "visualization"
+  ],
+  "scripts": {
+    "build:esm": "node ../../scripts/build-esm.js",
+    "dev": "node ../../scripts/dev.js",
+    "test": "eslint"
+  },
+  "dependencies": {
+    "@d3plus/core": "3.0.0-alpha.0"
+  },
+  "devDependencies": {
+    "@mantine/core": "^7.8.1",
+    "@mantine/hooks": "^7.8.1",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint-plugin-react": "^7.37.4",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-transition-group": "^4.4.5",
+    "vite": "^5.2.10"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  }
+}