Allow infoBox on chart container

[sheoranpranava91]

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:

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]

@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]

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]

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]

@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]

@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]

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

[molzahn-sio]

@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]

@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]

@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:

• Some props either are either incomplete or inconsistent in the documentation, e.g.:
  • width of ChartContainer and ChartRowProps need to be a number but there are others (e.g. YAxis) which allow string
  • Often functions can be used (e.g. for labels) but there's no information about the method signature
  • styles are especially inconsistent, e.g.:
    • label or values is available on YAxis but not on TimeAxis
    • YAxis.style has different settings than LabelAxis.style although the subnodes are similar
    • fontSize not working had me baffled for a long time until I found hints that some props need to be rewritten as "font-size". This information is not present at all relevant points (e.g. LabelAxis.style).
• Some information/examples is missing (e.g. how to manually use TimeAxis or TimeMarker).
• Proper usage of the info box is still a mystery to me. The "Wind Scatter Example" and the ChartRow API suggest that setting infoValues on the ChartRow would be enough, but according to this thread you need to set it to the ChartContainer?

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:

• Show some temperature series over time in a chart
• The complete timespan is split into smaller "phases" which I intended to show as EventChart above so the phase can be visually mapped to the area in the chart.

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

[brandly]

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]

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.