npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

v-network-graph

v0.9.18

Published

An interactive network graph visualization component for Vue 3

Downloads

25,433

Readme

v-network-graph

An interactive SVG based network-graph visualization component for Vue 3.

the logo of v-network-graph the logo of v-network-graph

Live examples

Version GitHub package.json dependency version License npm bundle size MadeWithVueJs.com shield

Features

  • Create a graph according your reactive data dynamically
  • Fully configurable appearance
  • SVG based
  • Pan and zoom viewport
  • Drag nodes
  • Multiple node selection
  • Multiple edge selection
  • Multi-touch support
  • Various events are provided
  • Export as SVG text

Documentation

Installation

Install with npm

npm install v-network-graph

and setup in main.ts

// main.ts
import { createApp } from "vue"
import VNetworkGraph from "v-network-graph"
import "v-network-graph/lib/style.css"
import App from "./App.vue"

const app = createApp(App)

app.use(VNetworkGraph)
app.mount("#app")

Installation on Nuxt 3 project

Add css to nuxt.config.ts

// nuxt.config.ts
import { defineNuxtConfig } from "nuxt3"

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  css: ["v-network-graph/lib/style.css"],
})

Make the plugin to plugins/v-network-graph.ts

// plugins/v-network-graph.ts
import { defineNuxtPlugin } from "#app"
import VNetworkGraph from "v-network-graph"

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(VNetworkGraph)
})

Basic usage

<script setup lang="ts">
  const nodes = {
    node1: { name: "Node 1" },
    node2: { name: "Node 2" },
    node3: { name: "Node 3" },
    node4: { name: "Node 4" },
  }
  const edges = {
    edge1: { source: "node1", target: "node2" },
    edge2: { source: "node2", target: "node3" },
    edge3: { source: "node3", target: "node4" },
  }
</script>

<template>
  <v-network-graph
    class="graph"
    :nodes="nodes"
    :edges="edges"
  />
</template>

<style>
.graph {
  width: 800px;
  height: 600px;
  border: 1px solid #000;
}
</style>

For more examples, see here.

Motivation and Design Policy

The requirements for visualizing network graphs are various, including the design and user actions for each component such as nodes, edges, paths, etc. Many libraries have been made to flexibly achieve these numerous requirements. However, many of these libraries have been around since before Vue was launched, so there are not many libraries that can be used with the concept of reactive programming. This means that using these libraries together with Vue, you need to learn how to use the graph libraries as well as Vue, and also having to design the integration with Vue. These are probably a lot of efforts.

This component aims to make it easy to realize applications with these various requirements while keeping the simplicity and reactive programming style of Vue. Using the power of Vue (especially reactive system and two-way binding), we hope to help developers quickly visualize interactively manipulable network graphs with less code and lower learning costs.

v-network-graph was designed with the following policy:

  • Reactive

    All primitive data such as nodes, edges, node positions, and their styles are provided from outside the component, and the component can handle these data reactively with Vue. The developer can modify the data at any time to reactively perform manipulations such as adding/removing objects, moving node positions, changing appearance, etc.

  • Highly customizable

    For visualizations, where the requirements vary widely from each application, it will be available a variety of customizations for ease of use. In addition to static specifications, it also supports dynamic changes due to the values ​​of fields contained in node and edge data.

  • Extendable

    Network graphs have many types of visualization objects, and in many cases there are application-specific requirements. It is difficult to cover all the requirements with pre-defined functions. Therefore, we also implement a mechanism that allows developers to flexibly add their own SVG elements and actions as needed.

With the above, we would like to contribute to helping application developers to focus on developing application-specific requirements for handling network graphs.

Roadmap to v1.0 📜

Currently, working on internal refactoring, and implementing the following features.

  • Performance improvement when using large network graphs
  • More flexible edge enhancement and customization
    • Enables flexible replacement of straight lines, bezier curves, whether animation specifications, etc.
    • Includes support for self-loop edge (Some features are already available)
  • More flexible label display customization
    • ✅ Adjustments node label position automatically
    • As the edges extend, the label must also extend more flexibly
    • Supports display of labels on self-loop edges
    • ✅ Allows changing the z-order between labels and other objects
  • ✅ Simpler css class name specification overall
    • To make it easier to override the design
  • Other minor improvements
  • Enrich related documentation

These are planned to be released in phases, but since this is a personal project for dash14 and is ongoing on the side of other commercial work, I cannot give a detailed timeline.
Your support is especially encouraging!
I' d appreciate it if you could support this project with a GitHub starring, an issue/PR submission, a code contribution, a message of cheer, a sponsorship, or anything else!

Contributing

If you find any bugs and/or want to contribute, feel free to submit issues or pull requests.

License

Under the MIT license.
See LICENSE file for more details.

Support me 🌟

I love to hear from people using it, giving me the motivation to keep working on this project.
If you find this library helpful, please consider giving it a star ⭐ on GitHub!

You may GitHub Sponsors or Buy Me a Coffee if you would like to show some support for this open-source project. It will be greatly appreciated!

"Github Sponsors"

"Buy Me A Coffee"