@d3plus/react 3.0.0-alpha.2 → 3.0.0-alpha.4

package/README.md

@@ -13,7 +13,7 @@ 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.2"></script>
+<script src="https://cdn.jsdelivr.net/npm/@d3plus/react@3.0.0-alpha.4"></script>
 <script>
   console.log(d3plus);
 </script>
@@ -27,7 +27,7 @@ Live examples can be found on [d3plus.org](https://d3plus.org/), which includes
 
 ##### 
 * [D3plusContext](#D3plusContext) - A React context instance used to provide global config options via a provider (D3plusContext.Provider).
-* [Viz](#Viz)
+* [Renderer](#Renderer)
 
 ---
 
@@ -41,13 +41,11 @@ 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)
+<a name="Renderer"></a>
+#### d3plus.**Renderer**(config, [className], [callback]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/react/src/Renderer.jsx#L6)
 
 
 This is a global function
 
 ---
 
-
-###### <sub>Documentation generated on Wed, 02 Apr 2025 20:59:31 GMT</sub>

package/es/index.jsx

@@ -27,106 +27,264 @@ function _object_spread(target) {
     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";
+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, Viz as VizClass, Axis as AxisClass, AxisBottom as AxisBottomClass, AxisLeft as AxisLeftClass, AxisRight as AxisRightClass, AxisTop as AxisTopClass, ColorScale as ColorScaleClass, Legend as LegendClass, Message as MessageClass, TextBox as TextBoxClass, Timeline as TimelineClass, Tooltip as TooltipClass, Area as AreaClass, Bar as BarClass, Box as BoxClass, Circle as CircleClass, Image as ImageClass, Line as LineClass, Path as PathClass, Rect as RectClass, Shape as ShapeClass, Whisker as WhiskerClass, BaseClass as BaseClassClass } from "@d3plus/core";
+import Renderer from "./src/Renderer.jsx";
 export var AreaPlot = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new AreaPlotClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: AreaPlotClass
     }, props));
 };
 export var BarChart = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new BarChartClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: BarChartClass
     }, props));
 };
 export var BoxWhisker = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new BoxWhiskerClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: BoxWhiskerClass
     }, props));
 };
 export var BumpChart = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new BumpChartClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: BumpChartClass
     }, props));
 };
 export var Donut = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new DonutClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: DonutClass
     }, props));
 };
 export var Geomap = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new GeomapClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: GeomapClass
     }, props));
 };
 export var LinePlot = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new LinePlotClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: LinePlotClass
     }, props));
 };
 export var Matrix = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new MatrixClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: MatrixClass
     }, props));
 };
 export var Network = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new NetworkClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: NetworkClass
     }, props));
 };
 export var Pack = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new PackClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: PackClass
     }, props));
 };
 export var Pie = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new PieClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: PieClass
     }, props));
 };
 export var Plot = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new PlotClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: PlotClass
     }, props));
 };
 export var Priestley = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new PriestleyClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: PriestleyClass
     }, props));
 };
 export var Radar = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new RadarClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: RadarClass
     }, props));
 };
 export var RadialMatrix = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new RadialMatrixClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: RadialMatrixClass
     }, props));
 };
 export var Rings = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new RingsClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: RingsClass
     }, props));
 };
 export var Sankey = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new SankeyClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: SankeyClass
     }, props));
 };
 export var StackedArea = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new StackedAreaClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: StackedAreaClass
     }, props));
 };
 export var Tree = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new TreeClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: TreeClass
     }, props));
 };
 export var Treemap = function(props) {
-    return /*#__PURE__*/ React.createElement(Viz, _object_spread({
-        instance: new TreemapClass()
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: TreemapClass
+    }, props));
+};
+export var Viz = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "chart",
+        constructor: VizClass
+    }, props));
+};
+export var Axis = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "component",
+        constructor: AxisClass
+    }, props));
+};
+export var AxisBottom = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "component",
+        constructor: AxisBottomClass
+    }, props));
+};
+export var AxisLeft = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "component",
+        constructor: AxisLeftClass
+    }, props));
+};
+export var AxisRight = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "component",
+        constructor: AxisRightClass
+    }, props));
+};
+export var AxisTop = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "component",
+        constructor: AxisTopClass
+    }, props));
+};
+export var ColorScale = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "component",
+        constructor: ColorScaleClass
+    }, props));
+};
+export var Legend = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "component",
+        constructor: LegendClass
+    }, props));
+};
+export var Message = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "component",
+        constructor: MessageClass
+    }, props));
+};
+export var TextBox = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "component",
+        constructor: TextBoxClass
+    }, props));
+};
+export var Timeline = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "component",
+        constructor: TimelineClass
+    }, props));
+};
+export var Tooltip = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "component",
+        constructor: TooltipClass
+    }, props));
+};
+export var Area = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "shape",
+        constructor: AreaClass
+    }, props));
+};
+export var Bar = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "shape",
+        constructor: BarClass
+    }, props));
+};
+export var Box = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "shape",
+        constructor: BoxClass
+    }, props));
+};
+export var Circle = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "shape",
+        constructor: CircleClass
+    }, props));
+};
+export var Image = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "shape",
+        constructor: ImageClass
+    }, props));
+};
+export var Line = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "shape",
+        constructor: LineClass
+    }, props));
+};
+export var Path = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "shape",
+        constructor: PathClass
+    }, props));
+};
+export var Rect = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "shape",
+        constructor: RectClass
+    }, props));
+};
+export var Shape = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "shape",
+        constructor: ShapeClass
+    }, props));
+};
+export var Whisker = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "shape",
+        constructor: WhiskerClass
+    }, props));
+};
+export var BaseClass = function(props) {
+    return /*#__PURE__*/ React.createElement(Renderer, _object_spread({
+        className: "util",
+        constructor: BaseClass
     }, props));
 };
 export { default as D3plusContext } from "./src/D3plusContext.jsx";

package/es/src/Renderer.jsx

@@ -0,0 +1,93 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { assign } from "@d3plus/dom";
+import D3plusContext from "./D3plusContext.jsx";
+/**
+    @function Renderer
+    @param {Object} config An object containing method/value pairs to be passed to the visualization's .config( ) method.
+    @param {String} [className = "renderer"] 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 ? "renderer" : _param_className, config = param.config, constructor = param.constructor;
+    var forceUpdate = config.forceUpdate;
+    var globalConfig = useContext(D3plusContext);
+    var container = useRef(null);
+    var _useState = _sliced_to_array(useState(function() {
+        return new constructor();
+    }), 1), instance = _useState[0];
+    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
+    }, /*#__PURE__*/ React.createElement("svg", {
+        ref: container,
+        width: "100%",
+        height: "100%"
+    }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d3plus/react",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.4",
   "description": "React components for d3plus visualizations.",
   "license": "MIT",
   "type": "module",
@@ -31,7 +31,7 @@
     "test": "eslint"
   },
   "dependencies": {
-    "@d3plus/core": "3.0.0-alpha.2"
+    "@d3plus/core": "3.0.0-alpha.4"
   },
   "devDependencies": {
     "@mantine/core": "^7.8.1",

package/es/src/Viz.jsx

@@ -1,41 +0,0 @@
-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
-    });
-};