chris927 / react-roughviz Goto Github PK

View Code? Open in Web Editor NEW

86.0 5.0 9.0 2.45 MB

React roughviz wrapper, lightweight package

License: MIT License

HTML 38.89% JavaScript 61.11%

react-roughviz's Introduction

react-roughviz

This is a thin React wrapper around the awesome roughViz.

Installation

npm i react-roughviz

Usage

    <h3>Bar</h3>
    <Bar
      data='https://raw.githubusercontent.com/jwilber/random_data/master/flavors.csv'
      labels='flavor'
      values='price'
    />
    <h3>Pie</h3>
    <Pie
      data={{
        labels: ['North', 'South', 'East', 'West'],
        values: [10, 5, 8, 3]
      }}
      title='Regions'
      colors={['red', 'orange', 'blue', 'skyblue']}
      roughness={8}
    />

See it in action here: https://codesandbox.io/s/react-codesandbox-zmn70

Development

Run it via

npm start

This runs an example app (at http://localhost:3000) via react-scripts, you can then edit the example or the packaged code.

Testing

Due to how roughViz accesses the browser environment when rendering, React testing is limited: Testing by rendering to document.createElement(), or snapshot testing, won't work.

Integration testing via e.g. jest-puppeteer is possible, though. See ./integration/smoketest.test.js, or run it yourself:

npm run test:integration

react-roughviz's People

Contributors

Stargazers

Watchers

Forkers

thomas-programmierer pynkvalerian lizlam codinronan moldy530 ninpeng doc22940 huedaya nderim1

react-roughviz's Issues

Chart legend does not appear

Legend does not appear in charts, even when property legend is set to true.

Tried with the examples on README without success.

<h3>Bar</h3>
<Bar
  data='https://raw.githubusercontent.com/jwilber/random_data/master/flavors.csv'
  labels='flavor'
  values='price'
  legend={true}
/>
<h3>Pie</h3>
<Pie
  data={{
    labels: ['North', 'South', 'East', 'West'],
    values: [10, 5, 8, 3]
  }}
  title='Regions'
  colors={['red', 'orange', 'blue', 'skyblue']}
  roughness={8}
  legend={true}
/>

duplicate create svg when changing props

When changing props two times, create two svg child.

I will solved it.

Fixes #10

creates many instances

steps to reproduce

open https://codesandbox.io/s/react-codesandbox-26vdr
click the random button to force a rerender a few times
see how the first chart now has multiple svg's, but the second is missing parts of the chart

When compiling the ssr project, an error is reported, and the client is ok

Update to react 17

Could you release an update with react 17 as peer dependency?

renders with crashing

This test fails `yarn test, seems to be related to jwilber/roughViz#8

my test only includes the Pie example from https://codesandbox.io/s/react-codesandbox-w7o6u

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

it('renders without crashing', () => {
  const div = document.createElement('div')
  ReactDOM.render(<App />, div)
  ReactDOM.unmountComponentAtNode(div)
})

● renders without crashing

    TypeError: Cannot read property 'ownerDocument' of null

       6 |   const div = document.createElement('div')
       7 |   ReactDOM.render(<App />, div)
    >  8 |   ReactDOM.unmountComponentAtNode(div)
         |            ^
       9 | })
      10 | 

      at Q.draw (node_modules/rough-viz/dist/roughviz.min.js:1:275343)
      at Q.arc (node_modules/rough-viz/dist/roughviz.min.js:1:277832)
      at node_modules/rough-viz/dist/roughviz.min.js:1:343594
          at Array.forEach (<anonymous>)
      at t.value (node_modules/rough-viz/dist/roughviz.min.js:1:343561)
      at t.drawChart (node_modules/rough-viz/dist/roughviz.min.js:1:340811)
      at new t (node_modules/rough-viz/dist/roughviz.min.js:1:339505)
      at node_modules/react-roughviz/src/lib/index.js:11:7
      at commitHookEffectList (node_modules/react-dom/cjs/react-dom.development.js:22030:26)
      at commitPassiveHookEffects (node_modules/react-dom/cjs/react-dom.development.js:22064:11)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:336:14)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:385:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:440:31)
      at flushPassiveEffectsImpl (node_modules/react-dom/cjs/react-dom.development.js:25392:7)
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:697:12)
      at runWithPriority$2 (node_modules/react-dom/cjs/react-dom.development.js:12149:10)
      at flushPassiveEffects (node_modules/react-dom/cjs/react-dom.development.js:25361:12)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:24251:5)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:23698:7)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:27103:3)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:27544:5)
      at node_modules/react-dom/cjs/react-dom.development.js:27649:7
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:24433:12)
      at Object.unmountComponentAtNode (node_modules/react-dom/cjs/react-dom.development.js:27648:5)
      at Object.<anonymous> (src/App.test.tsx:8:12)

Line charts

From https://github.com/jwilber/roughViz#roughvizline

StackedBar

jwilber/roughViz#5
Example: https://blockbuilder.org/jwilber/ee35865631cb805057142568fa5fd090

请问react ts中怎么使用？

Line chart with object data doesn't work

Here is the codesandbox to reproduce the issue: https://codesandbox.io/s/react-codesandbox-wb9ew

I opened a PR in the roughviz repo that fixes the problem, but i want to track it here as well since i couldn't reproduce it with the raw library

Can you bump roughviz version to the latest one avaiable?

Currently the latest version publish of roughViz is 1.0.6, react-roughviz is still using 1.0.5. Can you bumb to the latest one so we can use viebox and responsive chart?

Thanks!