Carlos Aguni

Highly motivated self-taught IT analyst. Always learning and ready to explore new skills. An eternal apprentice.


Vizceral Study

13 May 2021 »

Inspired by the video below

  • https://netflixtechblog.com/vizceral-open-source-acc0c32113fe
    • https://github.com/Netflix/vizceral
      • vizceral: The main UI component that lets you view and interact with the graph data.
    • https://github.com/Netflix/vizceral-react
      • vizceral-react: A react component wrapper around vizceral to make it easier to integrate the visualization into a react project.
    • https://github.com/Netflix/vizceral-component
      • vizceral-component: A web component wrapper around vizceral to make it easier to integrate the visualization into a project using web components.
    • https://github.com/Netflix/vizceral-example
      • vizceral-example: An example project that uses vizceral-react and sample data as a proof of concept and a jumping off point for integrating the visualization into your own data sources.

node_modules/vizceral/src/base/shapes/ShapeAzure.js

https://github.com/Netflix/vizceral/wiki/How-to-Use

https://github.com/Netflix/Vizceral/wiki/Configuration#filters

{
  detailedNode: { // These definitions are for switching what the detailed node shows
    volume: { // `volume` (default mode) is already defined internally, but can be customized by passing it in again with different configuration parameters
      default: { // default is required
        // top metric in the detailed node. set to null if you want it to be blank
        //   `header` is the text header to be displayed
        //   `data` is the path to the data to display on the node object
        //   `format` is how to format the data using numeral.js
        top: { header: '% RPS', data: 'data.volumePercent', format: '0.00%' },
        // bottom metric in the detailed node. set to null if you want it to blank
        //   `header` is the text header to be displayed
        //   `data` is the path to the data to display on the node object
        //   `format` is how to format the data using numeral.js
        bottom: { header: 'ERROR RATE', data: 'data.classPercents.danger', format: '0.00%' },
        donut: {} // What fills the donut graph around the detailed node, check the donut graph header for more information
        arc: {} // What fills the arc meter inside the detailed node; if absent, no arc meter will be drawn
      },
      region: { // override for the region renderer
        top: { header: 'SERVICE RPS', data: 'data.volume', format: '0.0' }
      },
      entry: { // override for entry nodes
        top: { header: 'TOTAL RPS', data: 'data.volume', format: '0.0' }
      }
    }
  }
}

node size & position

https://github.com/Netflix/vizceral/issues/70

layouts

vizceral/src/vizceral.js