@testboxlab/react-bubble-chart-d3

2.2.1 • Public • Published

react-bubble-chart-d3

ReactJS component to display data as a bubble chart using d3.

Preview

Bubble Chart D3

General Usage

As you will be able to see in test in order to use the component we need to importe it as:

import BubbleChart from '@weknow/react-bubble-chart-d3';

Then, in the render method we can just call it like:

bubbleClick = (label) =>{
  console.log("Custom bubble click func")
}
legendClick = (label) =>{
  console.log("Customer legend click func")
}
<BubbleChart
  graph= {{
    zoom: 1.1,
    offsetX: -0.05,
    offsetY: -0.01,
  }}
  width={1000}
  height={800}
  padding={0} // optional value, number that set the padding between bubbles
  showLegend={true} // optional value, pass false to disable the legend.
  legendPercentage={20} // number that represent the % of with that legend going to use.
  legendFont={{
        family: 'Arial',
        size: 12,
        color: '#000',
        weight: 'bold',
      }}
  valueFont={{
        family: 'Arial',
        size: 12,
        color: '#fff',
        weight: 'bold',
      }}
  labelFont={{
        family: 'Arial',
        size: 16,
        color: '#fff',
        weight: 'bold',
      }}
  //Custom bubble/legend click functions such as searching using the label, redirecting to other page
  bubbleClickFunc={this.bubbleClick}
  legendClickFun={this.legendClick}
  data={[
    { label: 'CRM', value: 1 },
    { label: 'API', value: 1 },
    { label: 'Data', value: 1 },
    { label: 'Commerce', value: 1 },
    { label: 'AI', value: 3 },
    { label: 'Management', value: 5 },
    { label: 'Testing', value: 6 },
    { label: 'Mobile', value: 9 },
    { label: 'Conversion', value: 9 },
    { label: 'Misc', value: 21 },
    { label: 'Databases', value: 22 },
    { label: 'DevOps', value: 22 },
    { label: 'Javascript', value: 23 },
    { label: 'Languages / Frameworks', value: 25 },
    { label: 'Front End', value: 26 },
    { label: 'Content', value: 26 },
  ]}
/>

The data prop receive and array of objects:

{
  label: 'label', // Text to display.
  value: 1, // Numeric Value.
  /**
    Color of the circle this value it's optional,
    accept hex (#ff0000) and string (red) name values.
    If you don't provide a value the default behavior
    is assign a color based on a d3.schemeCategory20c
    color schema.
  */
  color: '#ff00ff',
}

The graph prop receive a configuration object to set the zoom and offset of the bubbles:

graph: {
  zoom: 1.1, // 1.1 means 110% of zoom.
  offsetX: -0.05, // -0.05 means that the offset is -5% of the graph width.
  offsetY: -0.01,
}

The overflow prop receive a boolean value if you want to make bubbles visible beyond its SVG element bounday. The default value is set to 'false':

overflow={true}

The legendFont, valueFont and labelFont prop receive a configuration object to set the font-family, font-size, font-weight and color of the text:

// If you don't set this prop the default configuration will be this object.
{
  family: 'Arial',
  size: 12,
  color: '#000',
  weight: 'bold',
  // lineColor and lineWeight are optionals. use only to add a border line to the text.
  lineColor: "#3f3f3f",
  lineWeight: 2,
}

Installation

Install this component is easy, just use npm as:

npm install @weknow/react-bubble-chart-d3

Package Sidebar

Install

npm i @testboxlab/react-bubble-chart-d3

Weekly Downloads

240

Version

2.2.1

License

MIT

Unpacked Size

219 kB

Total Files

21

Last publish

Collaborators

  • testbox-allen
  • yakkob