react-apextree 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +17 -1
- package/dist/index.d.ts +17 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var react=require('react'),
|
|
1
|
+
'use strict';var react=require('react'),h=require('apextree'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var h__default=/*#__PURE__*/_interopDefault(h);function x(i){h__default.default.setLicense(i);}function u(i){let{className:e,style:d,data:a,...c}=i,l={};for(let[r,n]of Object.entries(c))n!==void 0&&(l[r]=n);return l}var A=react.forwardRef(function(e,d){let{data:a,className:c,style:l}=e,r=react.useRef(null),n=react.useRef(null),f=react.useMemo(()=>u(e),[e.width,e.height,e.direction,e.contentKey,e.siblingSpacing,e.childrenSpacing,e.containerClassName,e.canvasStyle,e.nodeWidth,e.nodeHeight,e.nodeTemplate,e.nodeStyle,e.nodeClassName,e.nodeBGColor,e.nodeBGColorHover,e.borderWidth,e.borderStyle,e.borderRadius,e.borderColor,e.borderColorHover,e.edgeWidth,e.edgeColor,e.edgeColorHover,e.fontSize,e.fontFamily,e.fontWeight,e.fontColor,e.enableTooltip,e.tooltipId,e.tooltipTemplate,e.tooltipMaxWidth,e.tooltipMinWidth,e.tooltipBorderColor,e.tooltipBGColor,e.tooltipFontColor,e.tooltipFontSize,e.tooltipPadding,e.tooltipOffset,e.highlightOnHover,e.enableToolbar,e.enableExpandCollapse,e.expandCollapseButtonBGColor,e.expandCollapseButtonBorderColor,e.groupLeafNodes,e.groupLeafNodesSpacing,e.onNodeClick]);return react.useImperativeHandle(d,()=>({changeLayout:t=>{var o;(o=n.current)==null||o.changeLayout(t);},collapse:t=>{var o;(o=n.current)==null||o.collapse(t);},expand:t=>{var o;(o=n.current)==null||o.expand(t);},fitScreen:()=>{var t;(t=n.current)==null||t.fitScreen();},getGraph:()=>n.current}),[]),react.useEffect(()=>{if(!r.current||!a)return;r.current.innerHTML="";let t=new h__default.default(r.current,f);n.current=t.render(a);},[a,f]),jsxRuntime.jsx("div",{ref:r,className:c,style:l})});exports.ApexTreeChart=A;exports.setApexTreeLicense=x;//# sourceMappingURL=index.cjs.map
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils.ts","../src/ApexTreeChart.tsx"],"names":["buildOptions","props","_className","_style","_data","options","cleanOptions","key","value","ApexTreeChart","forwardRef","ref","data","className","style","containerRef","useRef","graphRef","useMemo","useImperativeHandle","direction","_a","nodeId","useEffect","tree","
|
|
1
|
+
{"version":3,"sources":["../src/utils.ts","../src/ApexTreeChart.tsx"],"names":["setApexTreeLicense","licenseKey","ApexTree","buildOptions","props","_className","_style","_data","options","cleanOptions","key","value","ApexTreeChart","forwardRef","ref","data","className","style","containerRef","useRef","graphRef","useMemo","useImperativeHandle","direction","_a","nodeId","useEffect","tree","jsx"],"mappings":"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","file":"index.cjs","sourcesContent":["import ApexTree from \"apextree\";\nimport type { ApexTreeProps } from \"./types\";\n\n/**\n * sets the ApexTree license key globally\n * should be called once at app initialization, before rendering any charts\n *\n * @param licenseKey - the license key string provided by ApexCharts\n *\n * @example\n * ```tsx\n * import { setApexTreeLicense } from 'react-apextree';\n *\n * // call this at the top of your app, before rendering any charts\n * setApexTreeLicense('your-license-key-here');\n * ```\n */\nexport function setApexTreeLicense(licenseKey: string): void {\n ApexTree.setLicense(licenseKey);\n}\n\n/**\n * extracts ApexTree options from React props\n * filters out react-specific props (className, style, data)\n */\nexport function buildOptions<T>(\n props: ApexTreeProps<T>\n): Record<string, unknown> {\n const {\n // exclude react-specific props\n className: _className,\n style: _style,\n data: _data,\n // everything else becomes options\n ...options\n } = props;\n\n // remove undefined values to let ApexTree use its defaults\n const cleanOptions: Record<string, unknown> = {};\n\n for (const [key, value] of Object.entries(options)) {\n if (value !== undefined) {\n cleanOptions[key] = value;\n }\n }\n\n return cleanOptions;\n}\n\n/**\n * shallow comparison of two objects\n * used to detect option changes\n */\nexport function shallowEqual(\n obj1: Record<string, unknown>,\n obj2: Record<string, unknown>\n): boolean {\n const keys1 = Object.keys(obj1);\n const keys2 = Object.keys(obj2);\n\n if (keys1.length !== keys2.length) {\n return false;\n }\n\n for (const key of keys1) {\n if (obj1[key] !== obj2[key]) {\n return false;\n }\n }\n\n return true;\n}\n","import {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\nimport ApexTree from 'apextree';\nimport type { ApexTreeProps, ApexTreeRef, GraphInstance } from './types';\nimport { buildOptions } from './utils';\n\n/**\n * react wrapper component for ApexTree\n */\nexport const ApexTreeChart = forwardRef<ApexTreeRef, ApexTreeProps>(\n function ApexTreeChart(props, ref) {\n const { data, className, style } = props;\n\n const containerRef = useRef<HTMLDivElement>(null);\n const graphRef = useRef<GraphInstance | null>(null);\n\n // memoize options to prevent unnecessary re-renders\n const options = useMemo(() => buildOptions(props), [\n props.width,\n props.height,\n props.direction,\n props.contentKey,\n props.siblingSpacing,\n props.childrenSpacing,\n props.containerClassName,\n props.canvasStyle,\n props.nodeWidth,\n props.nodeHeight,\n props.nodeTemplate,\n props.nodeStyle,\n props.nodeClassName,\n props.nodeBGColor,\n props.nodeBGColorHover,\n props.borderWidth,\n props.borderStyle,\n props.borderRadius,\n props.borderColor,\n props.borderColorHover,\n props.edgeWidth,\n props.edgeColor,\n props.edgeColorHover,\n props.fontSize,\n props.fontFamily,\n props.fontWeight,\n props.fontColor,\n props.enableTooltip,\n props.tooltipId,\n props.tooltipTemplate,\n props.tooltipMaxWidth,\n props.tooltipMinWidth,\n props.tooltipBorderColor,\n props.tooltipBGColor,\n props.tooltipFontColor,\n props.tooltipFontSize,\n props.tooltipPadding,\n props.tooltipOffset,\n props.highlightOnHover,\n props.enableToolbar,\n props.enableExpandCollapse,\n props.expandCollapseButtonBGColor,\n props.expandCollapseButtonBorderColor,\n props.groupLeafNodes,\n props.groupLeafNodesSpacing,\n props.onNodeClick,\n ]);\n\n // expose imperative methods via ref\n useImperativeHandle(ref, () => ({\n changeLayout: (direction) => {\n graphRef.current?.changeLayout(direction);\n },\n collapse: (nodeId) => {\n graphRef.current?.collapse(nodeId);\n },\n expand: (nodeId) => {\n graphRef.current?.expand(nodeId);\n },\n fitScreen: () => {\n graphRef.current?.fitScreen();\n },\n getGraph: () => graphRef.current,\n }), []);\n\n // render tree when data or options change\n useEffect(() => {\n if (!containerRef.current || !data) {\n return;\n }\n\n // clear previous content\n containerRef.current.innerHTML = '';\n\n // create new tree instance and render\n const tree = new ApexTree(containerRef.current, options);\n graphRef.current = tree.render(data as any) as GraphInstance;\n }, [data, options]);\n\n return (\n <div\n ref={containerRef}\n className={className}\n style={style}\n />\n );\n }\n);"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -104,4 +104,20 @@ interface ApexTreeProps<T = unknown> {
|
|
|
104
104
|
*/
|
|
105
105
|
declare const ApexTreeChart: react.ForwardRefExoticComponent<ApexTreeProps<unknown> & react.RefAttributes<ApexTreeRef>>;
|
|
106
106
|
|
|
107
|
-
|
|
107
|
+
/**
|
|
108
|
+
* sets the ApexTree license key globally
|
|
109
|
+
* should be called once at app initialization, before rendering any charts
|
|
110
|
+
*
|
|
111
|
+
* @param licenseKey - the license key string provided by ApexCharts
|
|
112
|
+
*
|
|
113
|
+
* @example
|
|
114
|
+
* ```tsx
|
|
115
|
+
* import { setApexTreeLicense } from 'react-apextree';
|
|
116
|
+
*
|
|
117
|
+
* // call this at the top of your app, before rendering any charts
|
|
118
|
+
* setApexTreeLicense('your-license-key-here');
|
|
119
|
+
* ```
|
|
120
|
+
*/
|
|
121
|
+
declare function setApexTreeLicense(licenseKey: string): void;
|
|
122
|
+
|
|
123
|
+
export { ApexTreeChart, type ApexTreeProps, type ApexTreeRef, type GraphInstance, type NodeData, type NodeOptions, type TreeDirection, setApexTreeLicense };
|
package/dist/index.d.ts
CHANGED
|
@@ -104,4 +104,20 @@ interface ApexTreeProps<T = unknown> {
|
|
|
104
104
|
*/
|
|
105
105
|
declare const ApexTreeChart: react.ForwardRefExoticComponent<ApexTreeProps<unknown> & react.RefAttributes<ApexTreeRef>>;
|
|
106
106
|
|
|
107
|
-
|
|
107
|
+
/**
|
|
108
|
+
* sets the ApexTree license key globally
|
|
109
|
+
* should be called once at app initialization, before rendering any charts
|
|
110
|
+
*
|
|
111
|
+
* @param licenseKey - the license key string provided by ApexCharts
|
|
112
|
+
*
|
|
113
|
+
* @example
|
|
114
|
+
* ```tsx
|
|
115
|
+
* import { setApexTreeLicense } from 'react-apextree';
|
|
116
|
+
*
|
|
117
|
+
* // call this at the top of your app, before rendering any charts
|
|
118
|
+
* setApexTreeLicense('your-license-key-here');
|
|
119
|
+
* ```
|
|
120
|
+
*/
|
|
121
|
+
declare function setApexTreeLicense(licenseKey: string): void;
|
|
122
|
+
|
|
123
|
+
export { ApexTreeChart, type ApexTreeProps, type ApexTreeRef, type GraphInstance, type NodeData, type NodeOptions, type TreeDirection, setApexTreeLicense };
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {forwardRef,useRef,useMemo,useImperativeHandle,useEffect}from'react';import
|
|
1
|
+
import {forwardRef,useRef,useMemo,useImperativeHandle,useEffect}from'react';import h from'apextree';import {jsx}from'react/jsx-runtime';function x(i){h.setLicense(i);}function u(i){let{className:e,style:d,data:a,...c}=i,l={};for(let[r,n]of Object.entries(c))n!==void 0&&(l[r]=n);return l}var A=forwardRef(function(e,d){let{data:a,className:c,style:l}=e,r=useRef(null),n=useRef(null),f=useMemo(()=>u(e),[e.width,e.height,e.direction,e.contentKey,e.siblingSpacing,e.childrenSpacing,e.containerClassName,e.canvasStyle,e.nodeWidth,e.nodeHeight,e.nodeTemplate,e.nodeStyle,e.nodeClassName,e.nodeBGColor,e.nodeBGColorHover,e.borderWidth,e.borderStyle,e.borderRadius,e.borderColor,e.borderColorHover,e.edgeWidth,e.edgeColor,e.edgeColorHover,e.fontSize,e.fontFamily,e.fontWeight,e.fontColor,e.enableTooltip,e.tooltipId,e.tooltipTemplate,e.tooltipMaxWidth,e.tooltipMinWidth,e.tooltipBorderColor,e.tooltipBGColor,e.tooltipFontColor,e.tooltipFontSize,e.tooltipPadding,e.tooltipOffset,e.highlightOnHover,e.enableToolbar,e.enableExpandCollapse,e.expandCollapseButtonBGColor,e.expandCollapseButtonBorderColor,e.groupLeafNodes,e.groupLeafNodesSpacing,e.onNodeClick]);return useImperativeHandle(d,()=>({changeLayout:t=>{var o;(o=n.current)==null||o.changeLayout(t);},collapse:t=>{var o;(o=n.current)==null||o.collapse(t);},expand:t=>{var o;(o=n.current)==null||o.expand(t);},fitScreen:()=>{var t;(t=n.current)==null||t.fitScreen();},getGraph:()=>n.current}),[]),useEffect(()=>{if(!r.current||!a)return;r.current.innerHTML="";let t=new h(r.current,f);n.current=t.render(a);},[a,f]),jsx("div",{ref:r,className:c,style:l})});export{A as ApexTreeChart,x as setApexTreeLicense};//# sourceMappingURL=index.js.map
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils.ts","../src/ApexTreeChart.tsx"],"names":["buildOptions","props","_className","_style","_data","options","cleanOptions","key","value","ApexTreeChart","forwardRef","ref","data","className","style","containerRef","useRef","graphRef","useMemo","useImperativeHandle","direction","_a","nodeId","useEffect","tree","
|
|
1
|
+
{"version":3,"sources":["../src/utils.ts","../src/ApexTreeChart.tsx"],"names":["setApexTreeLicense","licenseKey","ApexTree","buildOptions","props","_className","_style","_data","options","cleanOptions","key","value","ApexTreeChart","forwardRef","ref","data","className","style","containerRef","useRef","graphRef","useMemo","useImperativeHandle","direction","_a","nodeId","useEffect","tree","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import ApexTree from \"apextree\";\nimport type { ApexTreeProps } from \"./types\";\n\n/**\n * sets the ApexTree license key globally\n * should be called once at app initialization, before rendering any charts\n *\n * @param licenseKey - the license key string provided by ApexCharts\n *\n * @example\n * ```tsx\n * import { setApexTreeLicense } from 'react-apextree';\n *\n * // call this at the top of your app, before rendering any charts\n * setApexTreeLicense('your-license-key-here');\n * ```\n */\nexport function setApexTreeLicense(licenseKey: string): void {\n ApexTree.setLicense(licenseKey);\n}\n\n/**\n * extracts ApexTree options from React props\n * filters out react-specific props (className, style, data)\n */\nexport function buildOptions<T>(\n props: ApexTreeProps<T>\n): Record<string, unknown> {\n const {\n // exclude react-specific props\n className: _className,\n style: _style,\n data: _data,\n // everything else becomes options\n ...options\n } = props;\n\n // remove undefined values to let ApexTree use its defaults\n const cleanOptions: Record<string, unknown> = {};\n\n for (const [key, value] of Object.entries(options)) {\n if (value !== undefined) {\n cleanOptions[key] = value;\n }\n }\n\n return cleanOptions;\n}\n\n/**\n * shallow comparison of two objects\n * used to detect option changes\n */\nexport function shallowEqual(\n obj1: Record<string, unknown>,\n obj2: Record<string, unknown>\n): boolean {\n const keys1 = Object.keys(obj1);\n const keys2 = Object.keys(obj2);\n\n if (keys1.length !== keys2.length) {\n return false;\n }\n\n for (const key of keys1) {\n if (obj1[key] !== obj2[key]) {\n return false;\n }\n }\n\n return true;\n}\n","import {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\nimport ApexTree from 'apextree';\nimport type { ApexTreeProps, ApexTreeRef, GraphInstance } from './types';\nimport { buildOptions } from './utils';\n\n/**\n * react wrapper component for ApexTree\n */\nexport const ApexTreeChart = forwardRef<ApexTreeRef, ApexTreeProps>(\n function ApexTreeChart(props, ref) {\n const { data, className, style } = props;\n\n const containerRef = useRef<HTMLDivElement>(null);\n const graphRef = useRef<GraphInstance | null>(null);\n\n // memoize options to prevent unnecessary re-renders\n const options = useMemo(() => buildOptions(props), [\n props.width,\n props.height,\n props.direction,\n props.contentKey,\n props.siblingSpacing,\n props.childrenSpacing,\n props.containerClassName,\n props.canvasStyle,\n props.nodeWidth,\n props.nodeHeight,\n props.nodeTemplate,\n props.nodeStyle,\n props.nodeClassName,\n props.nodeBGColor,\n props.nodeBGColorHover,\n props.borderWidth,\n props.borderStyle,\n props.borderRadius,\n props.borderColor,\n props.borderColorHover,\n props.edgeWidth,\n props.edgeColor,\n props.edgeColorHover,\n props.fontSize,\n props.fontFamily,\n props.fontWeight,\n props.fontColor,\n props.enableTooltip,\n props.tooltipId,\n props.tooltipTemplate,\n props.tooltipMaxWidth,\n props.tooltipMinWidth,\n props.tooltipBorderColor,\n props.tooltipBGColor,\n props.tooltipFontColor,\n props.tooltipFontSize,\n props.tooltipPadding,\n props.tooltipOffset,\n props.highlightOnHover,\n props.enableToolbar,\n props.enableExpandCollapse,\n props.expandCollapseButtonBGColor,\n props.expandCollapseButtonBorderColor,\n props.groupLeafNodes,\n props.groupLeafNodesSpacing,\n props.onNodeClick,\n ]);\n\n // expose imperative methods via ref\n useImperativeHandle(ref, () => ({\n changeLayout: (direction) => {\n graphRef.current?.changeLayout(direction);\n },\n collapse: (nodeId) => {\n graphRef.current?.collapse(nodeId);\n },\n expand: (nodeId) => {\n graphRef.current?.expand(nodeId);\n },\n fitScreen: () => {\n graphRef.current?.fitScreen();\n },\n getGraph: () => graphRef.current,\n }), []);\n\n // render tree when data or options change\n useEffect(() => {\n if (!containerRef.current || !data) {\n return;\n }\n\n // clear previous content\n containerRef.current.innerHTML = '';\n\n // create new tree instance and render\n const tree = new ApexTree(containerRef.current, options);\n graphRef.current = tree.render(data as any) as GraphInstance;\n }, [data, options]);\n\n return (\n <div\n ref={containerRef}\n className={className}\n style={style}\n />\n );\n }\n);"]}
|
package/package.json
CHANGED