infosum/cl-react-graph

Reactjs D3 Charts

CL React Graphs

A ReactJS wrapper around some standard D3 charts

Setup

npm i -S cl-react-graph

Documentation

The interactive docs can be found at: https://infosum.github.io/cl-react-graph/

Developers

Running docs in development mode

If you don't have Gatsby already installed:

npm i -g gatsby

Then, to run the docs in development mode

cd docs-src
npm i
gatsby develop

the site will be available on http://localhost:8000

Publishing to NPM

Publishing is handled via a GitHub Action.

You will need to

• npm run build (generates types)
• ensure that the version number is bumped E.g. npm version patch -m "Upgrade to %s for reasons"
• create a new named tag starting with 'v' E.g. git tag -a v3.3.1
• git push --tag

Building the code

GitLab Actions should now handle this for you, although currently it seems types aren't generated, but for reference:

npm run build

Building the docs

GitLab Actions should now handle this for you, but for reference:

cd docs-src
npm run build

The docs will be built in /docs

Outstanding issues

Can be found in https://github.com/infosum/cl-react-graph/projects/1

cl-react-graph's Issues

map charts

Animation is fixed and automatic on bar charts

Would be good to be able to control default animation via props, so that it can be disabled if required or the timing changed

deprecate IGrid interface in favour of <Grids /> actual props

this will make it clearer what props can be used when rendering a or

Make brush component resizeable

left & right handles on the brush to change the brush area to narrow in / zoom out the number of data points shown

Line & tip - x and or y line to pin point values in line charts

[v3] Line Component

add a line component

scatter chart

[v3] tips

decide on the best way to show tips on components - should be extensible to provide your own tip style?

[v3] Add points component

break this out from the current LineChart

[vv3] Area component

take out of the v2 lineChart - draws a filled area under a line

box plot chart

[v3] tornado chart

this might now just be possible combining bars and axis

radar chart

horizontal barchart does not use stacked prop

histogram: x grid ticks not changing in demo

When data prop is changed for LineChart element it doesn't trigger a canvas re-draw

When data is passed in that contains 2 series, it plots and draws these correctly onto the graph. However when the data is updated and a series is removed, the canvas doesn't seem to clear the old series from the visible chart. Updating the axis seems to rescale the graph but any pre-existing elements remain - unless a manual clear is used -

const svgCanvas = d3Select('svg').selectAll('*');
    svgCanvas.html(null);

cant set visibility of lineChart lines

Using a onChange I would expect to be able to turn on/off line chart lines

Joyplot rendering bars incorrectly

[v3] pie chart component

[v3] Joy plot

might be possible combining axis and bars

enable histograms to be given an arbitrary min/max value

when plotting multiple comparable histograms we sometimes want to normalize the y min/max values rather than working out those values on a per chart basis