basicprimitivesreact
Advanced tools
basicprimitivesreact - npm Package Compare versions
Comparing version 5.4.17 to 5.5.0
| { | ||
| "name": "basicprimitivesreact", | ||
| "version": "5.4.17", | ||
| "version": "5.5.0", | ||
| "main": "dist/index.js", | ||
@@ -22,3 +22,3 @@ "module": "dist/index.js", | ||
| "dependencies": { | ||
| "basicprimitives": "^5.4.15", | ||
| "basicprimitives": "^5.5.0", | ||
| "resize-observer-polyfill": "^1.5.1" | ||
@@ -25,0 +25,0 @@ }, |
143
README.md
@@ -1,28 +0,22 @@ | ||
| [](https://www.npmjs.com/package/basicprimitivesreact) | ||
| # [Basic Primitives](https://www.basicprimitives.com) Diagrams for React | ||
| Data visualization components library that implements organizational chart and multi-parent dependency diagrams. | ||
| ## Supported Diagrams | ||
| * Tree | ||
| * Hierarchy Visualization | ||
| ## Supported Diagrams: | ||
| * Organizational Chart | ||
| * Family tree & Inheritance Chart | ||
| * Multi-parent hierarchical chart | ||
| * Family Tree | ||
| * Dependencies Diagram | ||
| * PERT chart | ||
| * Financial Ownership Diagram | ||
| * Dependencies Visualization | ||
| * PERT - Program Evaluation and Review Technique Diagram | ||
| * DAG - Directed Acyclic Graph visualization | ||
| * Business Ownership Diagram | ||
| ## Getting Started | ||
| * [http://www.basicprimitives.com](https://www.basicprimitives.com) project home. | ||
| * [NPM](https://www.npmjs.com/package/basicprimitives-react) release package. | ||
| * [GitHub](https://github.com/BasicPrimitives) repositories. | ||
| * [React Live Samples](https://basicprimitives.github.io/react/) | ||
| * [React Live Demos](http://react.basicprimitives.com:8080) | ||
| ## Project references | ||
| * [http://www.basicprimitives.com](https://www.basicprimitives.com) project home and React Live Demos. | ||
| * [GitHub](https://github.com/BasicPrimitives) Github repositories. | ||
| * [NPM](https://www.npmjs.com/package/basicprimitives) official - release packages. | ||
| * [Basic Primitives for React Live Demos](https://basicprimitives.github.io/react/) - github live site | ||
| * [Basic Primitives for JavaScript, jQUery and PDFkit Live Demos & Samples](https://basicprimitives.github.io/javascript/) - github live site | ||
| ## React Example | ||
| ### Example | ||
| ``` | ||
@@ -46,5 +40,3 @@ npx create-react-app test1 | ||
| var photos = { | ||
| a: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA8CAIAAACrV36WAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGnSURBVGhD7dnBbQJBDAVQk1o2QjlQwKYGzpSwKQfq4IxICRTB9jLZHCJFwWv7/7EiDt6zmX2yPYMHNq01eb7n5flI36JiIXWpbFW2kAwgsdVblS0kA0hs9db/ZWs+vW/Wno9PxPE3dhls6Od+HI1XT1d64Sb8R5utEulwdbA8VY+LZ/kqkfF456pBHxDz5Xxze/p2vsxukBbAshTVOE0PO4B2cUlWKrgUTKsrV0eut3RVU/cm5aKKqPXVbjuIDPtDUh2JImq1+jmjkupIFNFStXadHncWXkecpb3393me4oJZnionXyjLV6W4QFZEleHCWNG+0eKggQJiRVV6vhAXwoqrul0AC1H1uuIsTLUyukYH1jBL7WJ8lgq6oqwkVXSQDrLSVEFXjJWoirlCrFRVyBVhJasirgCr65tEv7a5A5jL0tcN7vNl9OVcHqtXRbocVr+Kc9k3H/3qPL69Ise7dh0SsS+2JmtFddgvdy/gGbY7Jdp2GRcyrlu1BfUjxtiPRm/lqVbGHOMHnU39zQm0I/UbBLA+GVosJHGVrcoWkgEktnoLydYXkF/LiXG21MwAAAAASUVORK5CYII=', | ||
| b: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA8CAIAAACrV36WAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHFSURBVGhD7dk/bsIwFAZwp2dJOqCeIJwAunTqEcIYDsDYrUsYm61rJ5YmJyAnqDo03CW1XSIh4vi9l+o90eKsWOLnz3/4IqKu69TlPTeXRzKiwKKsS0grpEVJgDI27K2QFiUBytg/u7cO23n0i2dVU1Lqx7KnVS7tnIg6dtZx/kZHoEmxjE7TsDJJlpXhYMIsDXvaHuBDMJGVFq1u296nLVLn1zdv77BrIguer4rzfeekYVx8LCOP802GmMFwCC9LqWTmXkoAy81yff3dbQxFyM1qP5tzQjpLIBXzC1m9WpYD1eM9GBYfy/7CO1DFaw6rlIKuH/chB1fBPQBx3f14uPfWCU+b9qikxF72bUpokxirWSe00iW4iLbZIKuNKAtfuiayMEdqrELo0OZQuZnIwlwQpkKMXC/N+tn/5sHIsnRtq1wlotx5XdwsLVs8uFwfX74yKMDCLPj5mOtl1btBiwADZE/L1W20KvXXG07WSLexUUENVbTY9IsH3sacaY3uoGwDFRx5lk7qZQHteWlWVqFqlyDLbig4KBukBCur7LlCxXRc3Sj8nwjt85PPJRaRwOmHBhYltJBWSIuSAGVs2Fv/IK1vKZY5XO2KxFcAAAAASUVORK5CYII=', | ||
| c: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA8CAIAAACrV36WAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHJSURBVGhD7ZnNccIwEIVxagEODBWYfkg70EbuIR1QAcMBuxfFjklixpLeeyuS8WF1ZaX99q1+dk0VQljMb7zMD6knciwlL66Wq6UooNj63nK1FAUU2/K99fFaxcfu2Cokj7bdU20azaFmne5PsoeFPCOE054FGtlpbCqWCelOVx8aVgQJq4RpQGPJeKxypoGMyiaLlYWaesqZM4pxWEkvWRfJw4rBGKzU8kw64gFBLgLLuPL3oYtOR1wYK07FKHUHi4oNuCCWKdjH62nExUaDsCyhsndmxg481e3723n60mzXS8Pzo0wBWM01QlVvVooLi62lsPl7sUBX3d4ulljL51jUKvcKV3AsKNHIIK/Wcr1VFnuerSWJl1tB78ChA6zVJtJInK8Nt7jdCmDFs6jK1R53VaX1Z+gBe+5TzdbN6KkOiRqQLQW6qC31GsSyLfubg0RYpfVWMlyqh7HW24RaIZVI1Pel2x+4BSisHFi09ct/oIBQ3T8Y6CT+/D7L9rWnEz7SJC9SQqneFa/WIFuRZiSTAcuMxiNZ1LJsNY3oy4OaxMkJSW841DnnDlvVo81vWOqtf4jCsRSRXS1XS1FAsfW95WopCii2n0mWgWSKWlxrAAAAAElFTkSuQmCC' | ||
| a: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA8CAIAAACrV36WAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGnSURBVGhD7dnBbQJBDAVQk1o2QjlQwKYGzpSwKQfq4IxICRTB9jLZHCJFwWv7/7EiDt6zmX2yPYMHNq01eb7n5flI36JiIXWpbFW2kAwgsdVblS0kA0hs9db/ZWs+vW/Wno9PxPE3dhls6Od+HI1XT1d64Sb8R5utEulwdbA8VY+LZ/kqkfF456pBHxDz5Xxze/p2vsxukBbAshTVOE0PO4B2cUlWKrgUTKsrV0eut3RVU/cm5aKKqPXVbjuIDPtDUh2JImq1+jmjkupIFNFStXadHncWXkecpb3393me4oJZnionXyjLV6W4QFZEleHCWNG+0eKggQJiRVV6vhAXwoqrul0AC1H1uuIsTLUyukYH1jBL7WJ8lgq6oqwkVXSQDrLSVEFXjJWoirlCrFRVyBVhJasirgCr65tEv7a5A5jL0tcN7vNl9OVcHqtXRbocVr+Kc9k3H/3qPL69Ise7dh0SsS+2JmtFddgvdy/gGbY7Jdp2GRcyrlu1BfUjxtiPRm/lqVbGHOMHnU39zQm0I/UbBLA+GVosJHGVrcoWkgEktnoLydYXkF/LiXG21MwAAAAASUVORK5CYII=' | ||
| }; | ||
@@ -72,3 +64,3 @@ | ||
| description: 'VP, Human Resources', | ||
| image: photos.b | ||
| image: photos.a | ||
| }, | ||
@@ -80,3 +72,3 @@ { | ||
| description: 'Business Solutions, US', | ||
| image: photos.c | ||
| image: photos.a | ||
| } | ||
@@ -96,40 +88,87 @@ ] | ||
| See more examples in GIT repository. | ||
| ## Products: | ||
| ### Basic Primitives Diagrams for [React:](https://reactjs.org/) | ||
| * [create-react-app](https://github.com/facebook/create-react-app#readme) compatible | ||
| * [react-dnd](http://react-dnd.github.io/react-dnd/about) compatible | ||
| * [JSX](https://reactjs.org/docs/introducing-jsx.html) templates | ||
| * 100% [Virtual DOM](https://reactjs.org/docs/faq-internals.html) rendering cycle, i.e. no direct DOM rendering | ||
| ## Free for Non-commercial | ||
| * Do you want to use Basic Primitives Diagrams for a personal website, a school site or a non-profit organization? Then you don't need the author's permission, just go on and use Basic Primitives Diagrams. For commercial websites and projects, see [License and Pricing](https://www.basicprimitives.com/index.php?option=com_content&view=article&id=14&Itemid=18&lang=en). | ||
| ### Basic Primitives Diagrams for JavaScript: | ||
| * 100% client side JavaScript layout and rendering. | ||
| * No dependencies on 3rd party libraries. | ||
| * Works in all major modern browsers: Internet Explorer, Edge, Chrome, Firefox, Safari and mobile browsers. | ||
| * Rendering in [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) and [Canvas](https://en.wikipedia.org/wiki/Canvas_element) modes depending on user options. | ||
| ## Open | ||
| ### Basic Primitives [PDFkit plugin:](http://pdfkit.org/) | ||
| * Browser based or NodeJS based PDF rendering | ||
| One of the key features of Basic Primitives Diagrams that under any of the licenses, free or not, you are allowed to download the source code and make your own edits. This allows personal modifications and a great flexibility. The comprehensive set of samples, demos and unit tests guarantees quality of the library's source code. | ||
| ## Open Source: | ||
| One of the key features of our product is that under any of the licenses, free or not, you are allowed to download the source code and make your own edits to it. This allows for personal modifications and security for your product. Additionally the library's source code can be validated and easily tested through the use of our samples, demos and unit tests. | ||
| The samples, demos and unit tests can be found online and are also provided within the product packages. | ||
| ## Created for visual data analytics of hierarchies and dependencies | ||
| Business Intelligence systems and applications are designed for two major purposes: Reporting and Analytics. Reporting applications are meant to be a legal statements, so reported data should be 100% complete, it should not have any discrepancy in form of omitted data, improperly rounded values or excessive abbreviations. On the other side, applications designed for data analytics should show only the most valuable and related data to current user focus and gracefully degrade details for less relevant data. So Basic Primitives components design is to provide API for simplified visual data analysis of diagrams: | ||
| ## Product for visual data analysis of diagrams: | ||
| Business intelligence systems and applications are designed for two major areas: reporting and analytics. Reporting based applications display the original data as is, so reported data should be 100% complete, no data should have any discrepancies or be omitted in the form of improperly rounded values or excessive abbreviations. On the other side, there are applications that are designed for data analytics and are focused on the most valuable and user relevant data. Going as far as removing data that is deemed irrelevant by the end user depending on what they are interested in analyzing. Our components provide various API options to the developers, so they can configurate our diagrams and use them for both of the mentioned above scenarios. | ||
| ### Auto layout | ||
| The main problem of diagrams drawn in graphics editor is in sparse distribution of items on layout. Large gaps between nodes make diagrams hard to overview, edit and navigate. Sometimes the diagram is so big that it could have screen size intervals between items. This issue makes the whole idea of visualizing diagrams useless. At the same time computer UI allows to scale and fit visualization into screen, but in that case items become small and unreadable. The primary goal of our approach to Organizational chart and other diagrams visualization is to resolve these issues and make good use of them at the same time. The component finds the best way to display a large hierarchy within available screen space without scrolling or with minimal scrolling not affecting usability. | ||
| #### Auto layout and fititing the diagram into a single screen space: | ||
| When using a graphics editor to manually draw your diagrams, it is common place to have large gaps between the nodes. This can make the diagram/chart unreadable, hard to edit and navigate. On top of that, on a large scale the diagram could have screen size intervals between items. Admittedly the computer UI does allow the user to scale and fit the diagram in order to visualize it on a single screen. But in that case, the items become small and unreadable as there is no scaling priority and the items are just too small to be readable [Here is PDF example demonstrating the problem.](docs/images/sparse_data_problem.pdf) The primary goal of our approach to organizational charts and other diagrams visualization is to resolve these issues. Our product component specializes in displaying large diagrams in a single screen or nearly removing all scrolling while at the same time not affecting the diagram's usability. This is only possible when the diagramming component is in control of the auto layout for the nodes. | ||
| * Diagram shape overview. Component minimizes items in order to fit diagram visualization into available screen space and provides user with possibility to overview general diagram layout. | ||
| * User focus navigation goes node by node. Chart displays cursor item and its neighbors full size and minimizes all other less relevant nodes. By clicking on neighboring nodes user will move the focus of interest to the newly selected part of the diagram. | ||
| * Pinning of items in diagram. All selected/check marked items are always displayed full size, all other items stay minimized, so it allows to pin/select items in different branches and show them side by side within available screen space for location comparison. | ||
| * Diagram design consistency. Auto layout without user's manual editing provides visual consistency across all diagramming documents. All users have various skills and preferences, so auto layout provides consistent diagrams visualization. | ||
| * Always up to date. Your application diagrams will not be affected by changes in components's layout algorithms and application data. Your visualizations will be always up to date and in sync with your data. | ||
| * Minimizing nodes into markers and labels: Our component provides a special mode that renders the diagram nodes in the form of markers. This is a highly scalable form that is capable of rendering large numbers of nodes while not affecting the rendering performance. With this, huge diagrams can be fit into avaialable screen space. | ||
| * The user has focused navigation as they go node by node. The key nodes are kept full size as the less relevant nodes in the user view are minimized. The user also has the option to customize which nodes are relevant via selection, annotations and navigation options. By default the chart displays the cursor selected item and its neighbors in full size and minimizes all other less relevant nodes. By clicking on neighboring nodes the user will move the focus of interest to the newly selected part of the diagram. Local zoom around the cursor item works for all available diagrams. | ||
| * Pinning of items in diagram. All selected/checked items are always displayed full size. All other items stay minimized. This allows to pin/select items in different branches of the diagram and show them side by side within available screen space for comparison. | ||
| * Diagram autolayout consistency. Our auto layout provides visual consistency across all diagramming documents. The user can customize the visual appearance for any diagrams that they wish manually. All users have various skills and preferences, so auto layout provides consistent default diagram viewing throughout the organization. | ||
| * Always up to date. Your application's diagrams will not be effected by changes in the component's layout algorithms and application data. Your visualizations will always be up to date and in sync with your data. | ||
| ### Annotations | ||
| Every time we make changes to diagram we need to visualize performed modification otherwise it is hard to trace changes before and after modification. So in order to visualize diagram transition from one state to another control provides annotations. Annotations are API elements attached to diagram nodes and are drawn in front or in the background of them. Annotations don't change nodes placement, so controls redraw them instantaneously without diagram layout. The general logic of annotations is that they are not supposed to be displayed for every node in diagram, application is supposed to create them and add to diagram in the context of current user cursor or operation, user perform with data. Annotations compared to diagram layout itself have minimal conflict resolution abilities. So it is very easy to clutter diagram with excessive number of annotations. But they come very handy when we need to add context specific visuals. | ||
| #### Auto sorting the diagram nodes into levels | ||
| It is not obvious, but by default we distribute all nodes in the diagram into distinct levels. This gives the end user a clear indication about a node's relations. For any given node, all nodes that are below it in the diagram, are either it's dependents or minors. On the contrary any nodes found above the node are either its parents or superiors. This is a simple and straightforward visual sorting method that helps when analyzing and viewing large diagrams. | ||
| ## API | ||
| ### Provides simple API for the most common use cases | ||
| * Default item template - allows to render first diagram with minimal options defined. | ||
| * Selection Check Box - provide selection API similar to regular tree and list controls | ||
| * User buttons panel - in layout context panel with yser defined buttons | ||
| * Vertical node titles | ||
| * Labels | ||
| #### Auto alignment of nodes relative to each other | ||
| Our auto layout that is responsible for our diagrams, focuses a lot of effort on the alignment of the nodes when visualizing them. This is very important because when the end user is analyzing the diagram it is easier to identify their dependencies by looking at their alignment and positions rather then tracing lines between nodes. For example if a set of nodes are organized into a pyramid formation, the pyramid shape itself gives a clear indication about the mutual relation or the group structure of the nodes. In such an ideal case,minimal to no connection lines should be needed. This is the ultimate goal when visualizing diagrams, that in an ideal case every node should be placed in such way that no connection lines are neccessary in order to show the node's relations within the diagram. | ||
| ### Flexible API for more complex use cases | ||
| * User defined item, highlight, cursor and butons panel with JSX templates. | ||
| * Custom layout parent/child relation types: Adviser, Assistant and various partners. Multiple parents, multiple managers or co-heads visualization. | ||
| * Custom children and leaves layout: Vertical, Horizontal and Matrix | ||
| * Left/Right layout alignment support. | ||
| #### Customizable Placement of children | ||
| By default all direct children that belong to a parent node are of the same rank and status between each other and due to that, are always aligned below the parent and are organized in the same way. However for special cases were the end user wishes to have a child that is seperate from the rest of it's siblings, we provide custom child types that the end user can use to place diffrent ranking nodes anywhere around the parent node. These placement options give a lot of space for the creation of roles such as an Assitant, Adviser, various Partners and co-heads that may be in the organization. Additionally, by default a node's children are always placed in a horizontal line below the parent node. On a large scale this may result in the end user having to scroll screens in order to view all of the nodes. To compensate for this, we provide the option of placing all of the children of a parent node in a sqaure/matrix formation. This will reduce sideways screen scrolling by compacting the child nodes into a much smaller area on the screen. | ||
| #### Automatic transformation of connection lines between nodes | ||
| A diagram can have multiple parent and child nodes all be part of one large relationship with each other. This type of relationship results in an excessive number of connections between the nodes and creates a visual clutter in the diagram. In extreme cases this makes the diagram unreadable. | ||
| The following is an example of a complete bipartite graph. As visable every parent node is connected with every child node. | ||
|  | ||
| This is definitely an extreme example of family relations, but it could happen and the component automatically groups connectors into bundles so it produces the following optimized set of relations: | ||
|  | ||
| This connector bundling method is actively used throughout the product in order to increase the readability of the diagrams. | ||
| #### Automatic elimination of redundant relations between nodes | ||
| Another typical problem with visualizing connections is the possible excessive amount of connections that can take place between multiple gradnchild and grandparent nodes. Usually when we draw family diagrams we are more interested to see the overall order of dependencies over the more direct and specific node relations. In a family tree we know that all the nodes are directly linked to one another via their immediate parent. Because of this, we can remove the direct connections between non-immediate parents, reducing the amount of visual clutter on the screen and still get the same order of dependencies. By doing this the diagram becomes a lot easier to analyze, view and navigate. | ||
|  | ||
| ### Annotating diagram nodes | ||
| Every time we make changes to our diagrams, we need to visualize the performed modifications otherwise it is hard to trace the changes before and after the modification occured. So in order to visualize the diagram's transition from one state to another, the control provides various annotations to the end user. Annotations are API elements that are attached to the diagram nodes. We draw our annotations either in front of the nodes or in the background. The annotations don't affect the nodes placement in any way. As a result the control redraws them instantaneously without rerendering or recalculating the actual diagram layout. The general logic of annotations is that they are not supposed to be displayed for every node in the diagram. The application is supposed to create them and add them to the diagram depending on the context of the current user cursor or operation that the user is performing with the data. It should be noted that annotations have minimal mutual conflict resolution. As a result it is very easy to clutter the diagram with an excessive number of annotations. But they are nevertheless very useful when describing or giving node specific context or details to the diagram. | ||
| * Connector lines - Direct lines between nodes across the diagram. | ||
| * Background - It is an equivalent to highlighting text with a marker. The component merges overlapping background annotations into one if they overlap each other. | ||
| * Highlight path - A highlighter styled line that highlights the connections between directly connected nodes and helps the end user navigate the diagram. | ||
| * Shape annotations - Similar to background annotations, but are drawn in front of nodes in the form of custom shapes. | ||
| * In-layout labels - Are annotations that are drawn over connector lines but are also taken into consideration when calculating and rendering the layout of the diagram. Because of this, they do not cross any nodes, however can effect loading times as the entire diagram is rerendered. | ||
| ## First time user expereince with our product | ||
| Visualizing diagrams is a complex task which requires a lot of tuning. So long before we get something visible on the screen, we need to set and configurate a lot of diagram options. In order to make the starting experience simple, our component provides default functionality for almost everything: | ||
| * Default node template - You just need to provide your data and the first diagram will be rendered. | ||
| * Standard collection control features - Our product follows the standard behaivour for regular list and tree collection controls available in many other frameworks. | ||
| * User buttons panel - A custom in layout context panel with buttons. The diagram needs maximum screen space, so cutting screen real estate on the sides of the diagram for the buttons panel takes valuable space out of diagram. Placing the buttons in pop-up context menus or panels is also not ideal since it decreases UI discoverability and first time user expereince. So our component reserves space right inside of the diagram layout for the buttons panel. | ||
| * Basic visual categories - Our data visualization component has various ways to display basic data categories: titles, vertical titles, title colors and photos. | ||
| ## Free for Non-commercial: | ||
| Do you want to use a Basic Primitives diagram for a personal website, a school site or a non-profit organization? Then you don't need the author's permission. Just go on and use the Basic Primitives diagram. However for commercial website and project uses, see our License and Pricing. | ||
| ## Compatibility: | ||
| * Works in AngularJS directive | ||
| * Works in jQuery UI widgets | ||
| ## Performance: | ||
| Through a full API you can add, remove and modify individual items and their properties. The component will only update visual elements affected by the API changes. We put in a lot of effort in order to make it happen! | ||
| ### License | ||
@@ -136,0 +175,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.89%
235416
- Number of lines in readme file
- increased by28.68%
175
Dependency changes
Updatedbasicprimitives@^5.5.0