react-d3 / react-d3-tooltip Goto Github PK

View Code? Open in Web Editor NEW

23.0 7.0 22.0 7.38 MB

react-d3 tooltip implementation

Home Page: http://www.reactd3.org/docs/tooltip/

JavaScript 98.61% HTML 1.39%

react-d3-tooltip's Introduction

react-d3-tooltip

react-d3 tooltip implementation.

Quick example

With webpack build tool

line chart

"use strict";

var React = require('react');
var ReactDOM = require('react-dom');
var LineTooltip = require('react-d3-tooltip').LineTooltip;

(function() {

  var generalChartData = require('json!./data/user.json');

  var chartSeries = [
      {
        field: 'age',
        name: 'Age',
        color: '#ff7f0e'
      }
    ],
    x = function(d) {
      return d.index;
    }

  ReactDOM.render(
      <LineTooltip
        width= {600}
        height= {300}
        data= {generalChartData}
        chartSeries= {chartSeries}
        x= {x}
      />
    , document.getElementById('data_tooltip_line')
  )
})()

In html (without build tools)

Clone code react-d3-tooltip.js or minify js react-d3-tooltip.min.js and include the script in your HTML.

You'll also need react, react-dom, d3

<!DOCTYPE html>
<html>
  <head>
    <title>
      Line Chart example
    </title>
  </head>
  <body>
    <div id="data_tooltip_line"></div>
    <script src="https://fb.me/react-0.14.2.js"></script>
    <script src="https://fb.me/react-dom-0.14.2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="../react-d3-tooltip.min.js"></script>
    <script type="text/babel">
      var LineTooltip = ReactD3Tooltip.LineTooltip;

      var data = [
          {
              "age": 39,
              "index": 0
          },
          {
              "age": 38,
              "index": 1
          },
          {
              "age": 34,
              "index": 2
          },
          {
              "age": 12,
              "index": 3
          }
      ];

      var chartSeries = [
          {
            field: 'age',
            name: 'Age',
            color: '#ff7f0e',
            style: {
              "stroke-width": 2,
              "stroke-opacity": .2,
              "fill-opacity": .2
            }
          }
        ],
        x = function(d) {
          return d.index;
        }

      ReactDOM.render(
        <LineTooltip width= {600} height= {500} data= {data} chartSeries= {chartSeries} x= {x} />
      , document.getElementById('data_tooltip_line')
      )
    </script>
  </body>
</html>

Customization

Choose one of the components in tooltip folder.

Then require it in your project, take simple as example.

After you require it, render the tooltip as children. Like below example.

var SimpleTooltipStyle = require('react-d3-tooltip').SimpleTooltip;


ReactDOM.render(
    <LineTooltip
      data= {generalChartData}
      chartSeries = {chartSeries}
      interpolate = {interpolate}
      x= {x}
      xScale= {xScale}
    >
      <Simple/>  //<---------
    </LineTooltip>

, document.getElementById('data_tooltip_line_multi')
)

Then you can change tooltip style!

Install

npm install --save react-d3-tooltip

Support Tooltip Component

Line Chart: export as LineTooltip
Area Stack Chart: export as AreaStackTooltip
Scatter Plot: export as ScatterTooltip
Bar Chart: export as BarTooltip
Bar Stack: export as BarStackTooltip (you can now pass in onClick handler via props)
Bar Group: export as BarGroupTooltip
Pie Chart: export as PieTooltip

Gallery

License

Apache 2.0

react-d3-tooltip's People

Contributors

Stargazers

Watchers

react-d3-tooltip's Issues

support customize tooltip

user can set which property they want to show on tooltip.

BarToolTip with different color for each chart

Is there a way I can do this? I've been stuck figuring out how to do it.

Stacked Bar Chart for a large data set is squeezed towards center

With total width set to 1060 at 287 events chart is squeezed in the middle, without utilizing all space. At 286 items all width is used.

Please see screenshots.

Color field is empty

I am using PieToolTip and the Color field is empty no matter which color I write in the data.
What should I do?

Can anyone help me how to customize tooltip using BarStackedTooltip

I am using BarStackedTooltip and I am not able to customize tooltip. It always show me 4 parameters(Value, Field,FieldTitle, Color) in the tooltip. But I want follwing customizations: -

FieldTitle should be replaced by Name
Remove Color attribute from tooltip
Display Name in tooltip as a attribute

have a bug in area stack chart

tooltip will not update when state update, it will remain the initial chart.

All Tags below 1.1.0 have a dependency on react 0.14. Why?

All Tags below 1.1.0 have a dependency on react 0.14. Why?
When I try to install a version prior to 1.1.0 (0.7.0 OR 0.5.0) I get a dependency error for react 0.14.

react-d3-core 0.4.2 does not have this issue. When can this be fixed. I cannot move to React 0.14 until Jan-Feb 2016.

Also, is there a tag for 1.0.0? The next largest tag below 1.1.0 (identified as the move to React 0.14) is 0.7.0?

prevent tooltip setstate rerender components

see d3-map for example

showLegend = {false} does not hide legend

I am trying to hide the legend as my data is pretty huge and it occupies half of the container. Are there any other ways to disable it?

  <PieTooltip
    data= {this.state.data}
    width= {width}
    height= {height}
    chartSeries= {chartSeries}
    showLegend = {false}
    margins= {margins}
    value = {value}
    name = {name}
  />

Invalid prop `xScale` of value `band`

Using the latest version from NPM and seeing this error:

warning.js?8a56:45 Warning: Failed propType: Invalid prop `xScale` of value `band`
supplied to `Grid`, expected one of
["linear","identity","sqrt","pow","log","quantize","quantile","ordinal","time"].
Check the render method of `XGrid`.

This is clearly a bug since I did pass xScale: 'ordinal' to props.

Additionally the resulting chart seems to get drawn on the wrong scale. For example a series [1..5] actually comes out to start at 0.5 and ends at 4.5 ...

Issue running npm install --save react-d3-tooltip

Hi,

I'm unable to install react d3 tooltip. On running this command: npm install --save react-d3-tooltip, I get The package react does not satisfy its siblings' peerDependencies requirements!

`npm ERR! peerinvalid The package react does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@>=0.14.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.3 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@^15.1.0
npm ERR! peerinvalid Peer [email protected] wants [email protected] || ^15.0.0-rc
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14 || ^15.0.0-rc || ^15.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.7 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@^15.0.0-0
npm ERR! peerinvalid Peer [email protected] wants react@>=0.14.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.7

npm ERR! System Linux 4.2.0-27-generic
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "install" "--save" "react-d3-tooltip"
npm ERR! cwd /var/www/project
npm ERR! node -v v0.10.25
npm ERR! npm -v 1.3.10
npm ERR! code EPEERINVALID
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /var/www/project/npm-debug.log
npm ERR! not ok code 0
`

Warning in Voronoi component

Would you solve this warning, please?
Thanks!

warning.js?0260:45 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Voronoi. See https://fb.me/react-warning-keys for more information.

Compatibility

Hi!

Is there any way you guys can support React ^15.0.0?

import case sensitivity.

in utils\tooltip.jsx you seem to be importing from '../tooltip/table';

However the folder name is tooltip/Table, this is causing issues on case sensitive file systems such as linux.

move tooltip out

https://github.com/react-d3/react-d3-map-bubble/blob/master/src/mapBubble.jsx#L72-L85

Custom tooltip templates

Hi. I try to add custom template and have fail. When i try to apply standard simple or simple static template all fine. But if I need template like this: 'The customer with ID: '+x+' has '+y+' % stocks'.
I can't do it because function which return template have no one arguments...
Maybe does it have some way to give point from "data: statsChartData" to "setTooltipsTemplate" functions? It very important to use this components.
Thanks.

support negative

like below example

tooltip position doesn't locate at correct area.

Console error while configuring margins

Throwing console error when configuring PieTooltip component with margins={{left: 100, top:100}} property.

<PieTooltip
  {...this.props}
  swatchShape = "circle"
  margins={{left: 100, top:100}}
>
	<SimpleTooltip />
</PieTooltip>