search

esnet / react-timeseries-charts

Declarative and modular timeseries charting components for React
http://software.es.net/react-timeseries-charts
Other
865 stars 283 forks source link

Allow infoBox on chart container #353

Open sheoranpranava91 opened 5 years ago

sheoranpranava91 commented 5 years ago

I want to group multiple charts in a chartContainer and show a single tracker with the time in the InfoBox. Please refer to the image below where I have 4 charts in a chartContainer and I want to show a common tracker for all of them:

image

Currently, I can't figure out any way to put the time in the InfoBox inside chartContainer. I see that though ChartContainer takes property such as trackerHintWidth and trackerHintHeight, the showInfo property on the TimeMarker is hardcoded to false https://github.com/esnet/react-timeseries-charts/blob/74e051d097b732bd492349c8e567d9917e2492bc/src/components/ChartContainer.js#L366 I also tried at using the TimeMarker API directly but couldn't achieve what I was planning. Can showInfoBox property mentioned above be made configurable. Also, I want to remove the default behaviour where the time is shown in the first row https://github.com/esnet/react-timeseries-charts/blob/74e051d097b732bd492349c8e567d9917e2492bc/src/components/ChartContainer.js#L328

This can be made configurable too. I would be happy to open a PR if you guys think this approach is correct. Please point me in the correct direction if this behaviour can be achieved some other way

sartaj10 commented 5 years ago

@sheoranpranava91

Isn't this similar to what we do in http://software.es.net/react-timeseries-charts/#/example/volume or http://software.es.net/react-timeseries-charts/#/example/cycling

brandly commented 5 years ago

can't tell if this is the same issue i'm running into, but here's what has me stumped:

i started with a chart like this one. the tracker renders a line where my cursor is at, but i wanted to put a "hint" box on top of the line.

ChartContainer takes a trackerValues. from the docs:

Info box value or values to place next to the tracker line. This is either an array of objects, with each object specifying the label and value to be shown in the info box, or a simple string label. Type: one of (string, array of shape {label, value})

here, trackerValues gets passed thru to TimeMarker as an info prop.

https://github.com/esnet/react-timeseries-charts/blob/9ac0f41ff18544dff89b27619c43a190a90cf4b4/src/components/ChartContainer.js#L433

but looking at TimeMarker, i think the prop should be infoValues: https://github.com/esnet/react-timeseries-charts/blob/9ac0f41ff18544dff89b27619c43a190a90cf4b4/src/components/TimeMarker.js#L128-L141

this looks like a bug to me! hopefully it's an easy fix. thanks!

molzahn-sio commented 5 years ago

I'm also having a lot of issues regarding info boxes in a chart. Your explanation and pull request seem reasonable to me.

@sartaj10 Are there any plans to review this issue or complete his pull request?

brandly commented 5 years ago

@sartaj10 i've been using my fork. in a project of mine, my dependencies include this:

"react-timeseries-charts": "github:brandly/react-timeseries-charts#all-patches"

my all-patches branch includes both of my open PRs. i'm not sure if/when they'll get merged, but you're welcome to see if they solve your issues. using them and providing feedback may also encourage getting those PRs merged 😄

molzahn-sio commented 5 years ago

@brandly I've been trying to get the info box (or at least get the date/time tracker label) to show for many hours now.

--> I've referenced your fork and it immediately worked.

I still need to fiddle with styling but that's a huge step forward.

pjm17971 commented 5 years ago

I'll take a look at your PRs on Friday as well as other pending issues here.

molzahn-sio commented 5 years ago

@pjm17971 Many thanks, that's much appreciated!

This library is a great piece of work but I find it pretty difficult to actually adapt and use it. I've got the feeling that there seem to be quite a few discrepancies between examples, documentation and released version. Either that or there are a couple of minor things (e.g. #410 ) that are currently simply not yet possible.

brandly commented 5 years ago

@pjm17971 thanks!! i know open source maintenance is tough to keep up with. this package has helped me a lot, so feel free to reach out.

I've got the feeling that there seem to be quite a few discrepancies between examples, documentation and released version.

have you filed issues for these? i could potentially take a look.

Either that or there are a couple of minor things (e.g. #410 ) that are currently simply not yet possible.

that's definitely true. i'm under the impression that this package was developed for this site, so some situations are naturally better supported than others.

i've used react-vis before, and i've been impressed by vx. they're both very flexible, but i've liked react-timeseries-charts for a recent project since it's more tailored to timeseries data. supporting certain use cases with ease means it loses flexibility in other directions. keeping everyone happy is hard!

molzahn-sio commented 5 years ago

@brandly:

have you filed issues for these? i could potentially take a look.

Thanks you very much for your offer. I'm using typescript and I've experienced some irregularities but can't tell if I've failed to find the proper types (for this library or pondjs) or if the documentation is outdated or if there's a real issue. As there seem to be typescript versions in the making I didn't bother to list those things.

Some examples from the top of my head:

i've used react-vis before, and i've been impressed by vx.

Thank you for your advices. I had some nice experiences with React Kendo but stumbled upon a similar issue: individual design using almost exclusive time-based data is not the default usecase there.

My current usecase:

This seems to be easy enough but as I mentioned: there are many small caveats (such as #410 or the info box struggle).

brandly commented 5 years ago

Some props either are either incomplete or inconsistent in the documentation

i agree. i know Kendo's docs are really nice, but it's also a licensed product with funding to support it. i've been looking at the examples and digging thru the source itself to make sense of things.

the docs are generated from the propTypes and the comments surrounding them. i'm sure the maintainer(s) would appreciate any contributions.

Some information/examples is missing (e.g. how to manually use TimeAxis or TimeMarker).

the TimeAxis docs say

This is used internally by the ChartContainer as a result of you specifying the timerange for the chart.

so i don't think it's intended for manual use. ChartContainer has some props for configuring the TimeAxis tho.

i know i didn't address everything. some things are due to current limitations.

overall, i'm not sure about the state of this project. maybe @pjm17971 can chime in about where things are headed. it seems there's a fair amount of interest, so maybe we can all coordinate and push things in the right direction.

molzahn-sio commented 5 years ago

i agree. i know Kendo's docs are really nice, but it's also a licensed product with funding to support it.

You're absolutely correct. I only mentioned it as I've gathered some experience with it and not so much as an ideal example in documentation habits :)

so i don't think it's intended for manual use. ChartContainer has some props for configuring the TimeAxis tho.

I wasn't able to get info boxes and event time information to show so I assumed that I'd need to add those components manually thus having more configuration possiblities. This assuption was also based on the fact that those components are described in the API in a public way. Good to know that it should work without it as well.