{"_id":"70-react-network-diagrams","name":"70-react-network-diagrams","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"70-react-network-diagrams","version":"1.0.0","keywords":["network","circuits","maps","concatenated","parallel","editor","react"],"main":"./dist/react-network-diagrams.umd.js","module":"./dist/react-network-diagrams.es.js","exports":{".":{"import":"./dist/react-network-diagrams.es.js","require":"./dist/react-network-diagrams.umd.js"}},"homepage":"http://software.es.net/react-network-diagrams","author":{"name":"ESnet Tools Team","email":"tools@es.net"},"repository":{"type":"git","url":"git+https://github.com/esnet/react-network-diagrams.git"},"bugs":{"url":"https://github.com/esnet/react-network-diagrams/issues"},"scripts":{"docs":"echo \"Docs generation needs update\"","lint":"eslint src/**/*.js src/**/*.jsx","test":"npm run lint","build":"vite build","precommit":"lint-staged","prettier":"prettier --print-width 100 --tab-width 4 --write \"./src/**/*.{js,jsx}\""},"lint-staged":{"*.js":["prettier --print-width 100 --tab-width 4 --write","git add"]},"pre-commit":["lint","build"],"license":"BSD-3-Clause-LBNL","dependencies":{"d3-scale":"^2.0.0","keymirror":"^0.1.1","prop-types":"^15.8.1","underscore":"^1.13.3","victor":"^1.1.0"},"devDependencies":{"@types/react":"^19.1.2","@types/react-dom":"^19.1.2","@vitejs/plugin-react":"^4.4.0","eslint":"^8.0.0","eslint-config-airbnb":"^19.0.4","eslint-plugin-import":"^2.25.3","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-react":"^7.28.0","eslint-plugin-react-hooks":"^4.3.0","lint-staged":"^12.1.2","prettier":"^2.5.1","react":"^18.3.1","react-dom":"^18.3.1","react-select":"^5.4.0","typescript":"^5.8.3","vite":"^6.3.1","vite-plugin-dts":"^4.5.3"},"peerDependencies":{"react":">=18.3.1","react-dom":">=18.3.1"},"eslintConfig":{"extends":["airbnb","plugin:react/jsx-runtime"],"rules":{"react/jsx-filename-extension":[1,{"extensions":[".js",".jsx"]}]}},"_id":"70-react-network-diagrams@1.0.0","gitHead":"b978c23612c5c23ec18bb5f6d761eac3eb7277d9","description":"","_nodeVersion":"18.18.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-M76yEDae2OVPx1yY3lUvnP6GLiAJVES/A2chkvh2njP5Pm3Ehq/gERk3iazbLKpQf+PuzHxXTJoO4ymf+pIkDQ==","shasum":"1d2df435f5ce1f71d5e4d5ef8084d812d4ebdb90","tarball":"https://registry.npmjs.org/70-react-network-diagrams/-/70-react-network-diagrams-1.0.0.tgz","fileCount":36,"unpackedSize":653692,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEAXG22Q+rg5Jqh+iqswQTUvUIy/OKAelB2j84waW3ifAiEAyLNShfcoGS4Pi+QWQQkxcM065N5vv/K38eDvGLkzv6Y="}]},"_npmUser":{"name":"mp70","email":"mattukp+mp@googlemail.com"},"directories":{},"maintainers":[{"name":"mp70","email":"mattukp+mp@googlemail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/70-react-network-diagrams_1.0.0_1744894139926_0.9088935043133823"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-17T12:48:59.924Z","1.0.0":"2025-04-17T12:49:00.191Z","modified":"2025-04-17T12:49:00.433Z"},"maintainers":[{"name":"mp70","email":"mattukp+mp@googlemail.com"}],"homepage":"http://software.es.net/react-network-diagrams","keywords":["network","circuits","maps","concatenated","parallel","editor","react"],"repository":{"type":"git","url":"git+https://github.com/esnet/react-network-diagrams.git"},"author":{"name":"ESnet Tools Team","email":"tools@es.net"},"bugs":{"url":"https://github.com/esnet/react-network-diagrams/issues"},"license":"BSD-3-Clause-LBNL","readme":"# React Network Diagrams [![Build Status](https://travis-ci.org/esnet/react-network-diagrams.svg?branch=master)](https://travis-ci.org/esnet/react-network-diagrams)\n\n\nThis repository contains an initial set of React circuit drawing and network mapping components which are used within the ESnet Portal, but are not tied to ESnet, or even to network visualization.\n\nThe mapping portion of this library is used in the public facing [ESnet Portal](http://my.es.net). The circuit diagrams code us used internally to track ESnet circuits in the ESDB.\n\nCurrent features of the library include:\n\n * Circuit diagrams:\n - Basic\n - Concatenated\n - Parallel\n * Circuit couplers\n * Patch panel diagrams\n * Topology mapping\n - Higher level network traffic visualization\n - Linear, arc, bidirectional traffic and square edge types\n * Route rendering\n\nPlease browse the examples for a feel for the library, or read on to get started.\n\nGetting started\n---------------\n\nThe charts library is intended to be used with npm and the built into your project with something like webpack.\n\n npm install react-network-diagrams --save\n\nOnce installed, you can import the necessary components from the library:\n\n import { TrafficMap } from \"react-network-diagrams\";\n\nYou can then `render()` the traffic map in your component:\n\n \n \n\nSee the examples for more information.\n\nExamples\n--------\n\nTo run the examples yourself you first need to run:\n\n npm install\n\nThis will install the development dependencies into your node_modules directory.\n\nYou can then start up the test server, as well as automatic source building, by doing:\n\n npm run start-website\n\nAnd now, for the magic, point your browser to:\n\n http://localhost:8080/webpack-dev-server/\n\nFrom now on, if you change the source code, webpack will rebuild the examples bundle and the browser will refresh itself. Errors will also be reported in the browser window.\n\nBefore commiting back, run:\n\n npm run build\n","readmeFilename":"README.md","_rev":"1-dfed16dfaf2dc344e4021409772d8efa"}