DataDog/kafka-a-dog

Name: kafka-a-dog

Owner: Datadog, Inc.

Description: React components for flow visualization

Created: 2018-05-03 10:02:34.0

Updated: 2018-05-04 13:52:23.0

Pushed: 2018-05-04 13:52:22.0

Homepage: null

Size: 1059

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Flow

Flow is a set a react components aimed to create some fancy graphs visualisations in a simple and declarative way. For the moment this is svg, but we could do some other renderer later on.

Components

Flow

A flow represents a flow of data, but it could represent anything really. Given a maxRef, it will display any value between 0 and maxRef in a deterministic way. Basically Flow will try to represent accurately streams from a few kB/s to hundreds of MB/s (or more), next to each other, while not displaying not enough or too much particles.

w
xRef={10000000}
artX={0}
artY={0}
dX={100}
dY={100}
xParticles={100}
rticleSize={3}
lorStart="#345EAD"
lorEnd="#EAD345"
lue={10}

Node

A Node can represent anything: a machine, a service, a physical appliance

e
ze={40}
me="internet"
lue={345000}
it="bytes"
lor={#456edf}

Network (find a better name)

A network consist of a centralNode that have child nodes related to him. Children nodes will be spread around centerNode, and flows will be drawn from the center depending on the values given to the children nodes.

t centerNode = <Node
ze={40}
me="internet"
lue={345000}
it="bytes"
lor={#456edf}


work centerNode={centerNode} paused={false}/>
ode
size={20}
name="user1"
value={345000}
unit="bytes"
color={#446edf}
value={1000}

ode
size={20}
name="user2"
value={345000}
unit="bytes"
color={#edf446}
value={5000}

twork/>