metricsgraphics / react-metrics-graphics Goto Github PK

In order for projects like missioncontrol to be able to use the new brushing/zooming functionality, we'll need to add the new brushing/zooming properties to the list of supported properties by this package:

https://github.com/metricsgraphics/react-metrics-graphics/blob/master/README.md#properties
https://github.com/metricsgraphics/react-metrics-graphics/blob/master/src/components/MetricsGraphics.jsx#L6

@cnwangjie is this something you might want to take care of? Should be a relatively straightforward task. :)

(it would be nice if we didn't have to do this, see #23 -- but I don't think it's worth blocking this functionality on that larger solution being implemented)

I created a simple page using this package.
I just want to highlight what I believe are some issues that get on the way of adoptions and links to my code:

1. Issue #13 - downgrade to React 15.3.0
2. The need to import MG and use it to manipulate data. I may be doing things wrong.
3. The need to add some CSS to make things plot properly. This is probably from use full-width.

Happy to see an official reference to this package from metrics-graphics! Good job.
Let me know if there are any issues you would like me to contribute.

Hi,

I'm currently working on a lightweight wrapper for VueJS, in the same spirit of your wrapper.
(https://github.com/0gust1/vue-metrics-graphics , still nothing released atm).

I would like to implement props validation on vueJS side too, but it's a bit cumbersome : there are a lot of possible options and on the metricsgraphics documentation, you have to browse each of them to see the type and the default value. Do you know a way to have this (all the possible options, their types and default value) in one document ?

Thanks for your work, BTW, it already helped to elaborate my wrapper !

The peerDependencies for this package includes React ^15.0.0-0. When React ^16.0.0 is used, react-metrics-graphics raises an error about PropTypes. This might be due to the fact that prop-types was split into its own package in React 16.

Steps to reproduce

1. Clone this repo
2. yarn
3. yarn build

Result

create-react-app is unable to create a production build because MetricsGraphics.js is unable to be minfied.

Here's the output of yarn build:

yarn run v1.3.2
$ react-scripts build
Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

 	./node_modules/react-metrics-graphics/build/MetricsGraphics.js:1:2669

Read more here: http://bit.ly/2tRViJ9

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Hi Carter,
thanks for the cool react component.
I'm moving my MetricsGraphics stuff to a react app.
And I'm struggling with this:

interpolate: d3.curveLinear

I tried this:
import {curveLinear} from "d3-shape";
with this:
interpolate= {{curveLinear}.curveLinear}
but it's not changing the lines to a nicer interpolation.

Do you have an idea how to resolve this?

I'm building a small CRA and want to use your react-metrics-graphics. So I've used yarn to add metrics-graphics and react-metrics-graphics. I have prop-types installed. I've built other CRA programs using prop-types so I can't figure out what to do here. Can you help?

Error: Cannot find module 'prop-types'
MetricsGraphics.js:159
	at webpackMissingModule (c:\Users\Bruce\Dropbox\Projects\AcesTESTER\node_modules\react-metrics-graphics\build\MetricsGraphics.js:159:1)
	at Object.<anonymous> (c:\Users\Bruce\Dropbox\Projects\AcesTESTER\node_modules\react-metrics-graphics\build\MetricsGraphics.js:159:1)
	at b (c:\Users\Bruce\Dropbox\Projects\AcesTESTER\node_modules\react-metrics-graphics\build\MetricsGraphics.js:12:1)
	at Object.<anonymous> (c:\Users\Bruce\Dropbox\Projects\AcesTESTER\node_modules\react-metrics-graphics\build\MetricsGraphics.js:75:1)
	at b (c:\Users\Bruce\Dropbox\Projects\AcesTESTER\node_modules\react-metrics-graphics\build\MetricsGraphics.js:12:1)
	at Object.<anonymous> (c:\Users\Bruce\Dropbox\Projects\AcesTESTER\node_modules\react-metrics-graphics\build\MetricsGraphics.js:35:1)
	at b (c:\Users\Bruce\Dropbox\Projects\AcesTESTER\node_modules\react-metrics-graphics\build\MetricsGraphics.js:12:1)
	at c:\Users\Bruce\Dropbox\Projects\AcesTESTER\node_modules\react-metrics-graphics\build\MetricsGraphics.js:31:1
	at c:\Users\Bruce\Dropbox\Projects\AcesTESTER\node_modules\react-metrics-graphics\build\MetricsGraphics.js:32:1
	at c:\Users\Bruce\Dropbox\Projects\AcesTESTER\node_modules\react-metrics-graphics\build\MetricsGraphics.js:2:1
	at Object../node_modules/react-metrics-graphics/build/MetricsGraphics.js (c:\Users\Bruce\Dropbox\Projects\AcesTESTER\node_modules\react-metrics-graphics\build\MetricsGraphics.js:3:1)
	at __webpack_require__ (http://localhost:3000/static/js/bundle.js:783:30)
	at fn (http://localhost:3000/static/js/bundle.js:151:20)
	at Module../src/components/Symbols/SymbolChart.js (http://localhost:3000/static/js/main.chunk.js:1356:80)
	at __webpack_require__ (http://localhost:3000/static/js/bundle.js:783:30)
	at fn (http://localhost:3000/static/js/bundle.js:151:20)
	at Module../src/components/Symbols/SymbolCell.js (http://localhost:3000/static/js/main.chunk.js:1092:70)
	at __webpack_require__ (http://localhost:3000/static/js/bundle.js:783:30)
	at fn (http://localhost:3000/static/js/bundle.js:151:20)
	at Module../src/components/Symbols/index.js (http://localhost:3000/static/js/main.chunk.js:1468:69)
	at __webpack_require__ (http://localhost:3000/static/js/bundle.js:783:30)
	at fn (http://localhost:3000/static/js/bundle.js:151:20)
	at Module../src/components/App/index.js (http://localhost:3000/static/js/main.chunk.js:95:66)
	at __webpack_require__ (http://localhost:3000/static/js/bundle.js:783:30)
	at fn (http://localhost:3000/static/js/bundle.js:151:20)
	at Module../src/index.js (http://localhost:3000/static/js/main.chunk.js:1605:73)
	at __webpack_require__ (http://localhost:3000/static/js/bundle.js:783:30)
	at fn (http://localhost:3000/static/js/bundle.js:151:20)
	at Object.0 (http://localhost:3000/static/js/main.chunk.js:2525:18)
	at __webpack_require__ (http://localhost:3000/static/js/bundle.js:783:30)
	at checkDeferredModules (http://localhost:3000/static/js/bundle.js:46:23)
	at Array.webpackJsonpCallback [as push] (http://localhost:3000/static/js/bundle.js:33:19)
	at http://localhost:3000/static/js/main.chunk.js:1:57
./node_modules/react-metrics-graphics/build/MetricsGraphics.js
Module not found: Can't resolve 'prop-types' in 'C:\Users\Bruce\Dropbox\Projects\AcesTESTER\node_modules\react-metrics-graphics\build'

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency bootstrap to v3.4.0 [SECURITY]
• Update dependency jquery to v3.4.0 [SECURITY]
• Update neutrino monorepo to v9 (major) (@neutrinojs/airbnb, @neutrinojs/eslint, @neutrinojs/react-components, neutrino)
• Update react monorepo to v18 (major) (react, react-dom)
• Lock file maintenance
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Dear Carter,
An issue of the highest importance requires your immediate attention on Facebook messenger. Please check messenger within the next 24 hours.

If you just add react-metrics-graphics and try to use it as indicated in the README.md it won't work.

You will get this issue:

ERROR in ./node_modules/react-metrics-graphics/build/MetricsGraphics.js
Module not found: Error: Can't resolve 'metrics-graphics/dist/metricsgraphics.css' in '/Users/armenzg/repos/js-perf-dashboard/node_modules/react-metrics-graphics/build'

metrics-graphics is the peerDependency that is least likely to already be on a project, thus, it would be worth mention adding it to the docs.

When user hover mouse in React MetricsGraphics component, React show this error on console:

Uncaught TypeError: Cannot set property 'row_number' of undefined
    at ee (bundle.min.js:1)
    at SVGRectElement.<anonymous> (bundle.min.js:1)
    at SVGRectElement.<anonymous> (bundle.min.js:1)

And graphic doesn't show selected item description.

How can I resolve this error?

It looks like title and demo properties do not work. I also seem not to see those in your demo as well.

Using react-metrics-graphics v.1.0.3:

The terminal is telling me that the library requires react and react-DOM v.0.14.0 or higher, but when I install anything higher than this, I'm hit with the same error:

npm WARN [email protected] requires a peer of react@^0.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^0.14.0 but none is installed. You must install peer dependencies yourself.

I have react and react-dom v. 15.6.0 installed currently. If I install version 0.14.0, it fixes the dependencies issue with react-metrics-graphics, but I'm getting this error to the console:

Warning: Failed propType: Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types

According to the link, this is because my version of react is incompatible with the prop-types package. So, unfortunately, just installing an older version isn't sufficient to fix the problem.

Any thoughts on what I should do here?

How to use xax_format option in react app?

Can we remove jquery from the dependencies? I do not see jquery being used internally by the package so I do not see why having jquery on node_modules would be useful.

Is it possible to use the target option in the way shown in the examples in React? I'd like to get this "Annotating a Point" effect.

I'am trying to use react-metrics-graphics in my react project, i've add it with yarn, but i get error when compiling:

18:48:58 webpack.1 | ERROR in ../~/react-metrics-graphics/build/MetricsGraphics.js 18:48:58 webpack.1 | Module not found: Error: Cannot resolve module 'metrics-graphics/dist/metricsgraphics.css' in .../node_modules/react-metrics-graphics/build 18:48:58 webpack.1 | @ ../~/react-metrics-graphics/build/MetricsGraphics.js 1:4478-4530

this module is very interesting & thanks for your work.