woocommerce/plugins/woocommerce-admin/client/components/d3chart/d3-base
Albert Juhé Lluveras 9b0c767749 Make sure D3Base always updates when width changes (https://github.com/woocommerce/woocommerce-admin/pull/961)
* Make sure D3Base always updates when props change

* Fix JS error when resizing the window

* d3Chart cleanup

* Update tests

* Update d3Base also when drawChart prop changes

* Save height and width without margins in params

* Remove resize listeners inside d3Base

* Remove unused param
2018-11-29 19:01:00 -06:00
..
test Make sure D3Base always updates when width changes (https://github.com/woocommerce/woocommerce-admin/pull/961) 2018-11-29 19:01:00 -06:00
README.md squashed commits for chart packaging 2018-11-21 16:10:56 +02:00
index.js Make sure D3Base always updates when width changes (https://github.com/woocommerce/woocommerce-admin/pull/961) 2018-11-29 19:01:00 -06:00
style.scss squashed commits for chart packaging 2018-11-21 16:10:56 +02:00

README.md

D3 Base Component

Integrate React Lifecyle methods with d3.js charts.

Base Component Responsibilities

  • Create and manage mounting and unmounting parent div and svg
  • Handle resize events, resulting re-renders, and event listeners
  • Handle re-renders as a result of new props

Props

className

{ string } A class to be applied to the parent div

getParams( node )

{ function } A function returning an object containing required properties for drawing a chart. This object is created before re-render, making it an ideal place for calculating scales and other props or user input based properties.

  • svg { node } The parent div. Useful for calculating available widths

drawChart( svg, params )

{ function } draw the chart

  • svg { node } Base element
  • params { Object } Properties created by the getParams function