Chart component
koernigo opened this issue · comments
Hi, I just tried out the Chart component but it didn't seem to work.
Are there any examples or instructions for it? I searched the documentation and other than the API description I could not find anything.
Thanks!
@koernigo we are preparing update and example using chart component is included into new version. Hopefully, version 0.9.100 will be deployed tomorrow (2 days later after promised wednesday).
Stay tuned!
Awesome, thank you Petar!!
@koernigo example-geiger is now using "Chart" component (both Blaze and React apps).
Please see example json input here: https://github.com/perak/kitchen-examples/blob/master/example-geiger/example-geiger.json#L64-L71 (or copy & paste entire json to kitchen GUI and see how component is used).
If you have more questions related to chart usage, feel free to ask here. 👍
@perak I tried the Chart component with an empty project. When I try to add it to an existing React based project, I get the following error:
modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:27731 Download the React DevTools for a better development experience: https://fb.me/react-devtools
:3000/login:1 This page includes a password or credit card input in a non-secure context. A warning has been added to the URL bar. For more information, see https://goo.gl/zmWq3m.
:3000/customers:1 Failed to decode downloaded font: http://206.81.4.170:3000/fonts/glyphicons-halflings-regular.woff2
:3000/customers:1 OTS parsing error: invalid version tag
:3000/customers:1 Failed to decode downloaded font: http://206.81.4.170:3000/fonts/glyphicons-halflings-regular.woff
:3000/customers:1 OTS parsing error: invalid version tag
:3000/customers:1 Failed to decode downloaded font: http://206.81.4.170:3000/fonts/glyphicons-halflings-regular.ttf
:3000/customers:1 OTS parsing error: invalid version tag
chart.jsx:29 Uncaught TypeError: data.map is not a function
at Chart.render (chart.jsx:29)
at finishClassComponent (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:23530)
at updateClassComponent (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:23492)
at beginWork (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:24160)
at performUnitOfWork (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:26186)
at workLoop (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:26225)
at HTMLUnknownElement.callCallback (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:10545)
at Object.invokeGuardedCallbackDev (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:10583)
at invokeGuardedCallback (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:10632)
at replayUnitOfWork (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:25639)
modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:24558 The above error occurred in the component:
in Chart (created by CustomersDetailsPage)
in div (created by CustomersDetailsPage)
in div (created by CustomersDetailsPage)
in div (created by CustomersDetailsPage)
in CustomersDetailsPage (created by ReactMeteorDataComponent)
in ReactMeteorDataComponent
in div (created by PrivateLayout)
in div (created by PrivateLayout)
in PrivateLayout (created by ReactMeteorDataComponent)
in ReactMeteorDataComponent (created by Layout)
in Layout (created by ReactMeteorDataComponent)
in ReactMeteorDataComponent
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:24558
meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:1010 Exception from Tracker recompute function:
meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:1010 TypeError: data.map is not a function
at Chart.render (chart.jsx:29)
at finishClassComponent (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:23530)
at updateClassComponent (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:23492)
at beginWork (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:24160)
at performUnitOfWork (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:26186)
at workLoop (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:26225)
at renderRoot (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:26265)
at performWorkOnRoot (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:26882)
at performWork (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:26803)
at performSyncWork (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:26775)
modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:5249 Warning: Invalid DOM property font-size. Did you mean fontSize?
in select (created by FiltersPageTest)
in div (created by FiltersPageTest)
in div (created by FiltersPageTest)
in div (created by FiltersPageTest)
in div (created by FiltersPageTest)
in h3 (created by FiltersPageTest)
in div (created by FiltersPageTest)
in FiltersPageTest (created by FiltersPage)
in div (created by FiltersPage)
in div (created by FiltersPage)
in FiltersPage (created by ReactMeteorDataComponent)
in ReactMeteorDataComponent
in div (created by PrivateLayout)
in div (created by PrivateLayout)
in PrivateLayout (created by ReactMeteorDataComponent)
in ReactMeteorDataComponent (created by Layout)
in Layout (created by ReactMeteorDataComponent)
in ReactMeteorDataComponent
printWarning @ modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:5249
chart.jsx:29 Uncaught TypeError: data.map is not a function
at Chart.render (chart.jsx:29)
at finishClassComponent (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:23530)
at updateClassComponent (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:23492)
at beginWork (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:24160)
at performUnitOfWork (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:26186)
at workLoop (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:26225)
at HTMLUnknownElement.callCallback (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:10545)
at Object.invokeGuardedCallbackDev (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:10583)
at invokeGuardedCallback (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:10632)
at replayUnitOfWork (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:25639)
modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:24558 The above error occurred in the component:
in Chart (created by FiltersDetailsPage)
in div (created by FiltersDetailsPage)
in div (created by FiltersDetailsPage)
in div (created by FiltersDetailsPage)
in FiltersDetailsPage (created by ReactMeteorDataComponent)
in ReactMeteorDataComponent
in div (created by PrivateLayout)
in div (created by PrivateLayout)
in PrivateLayout (created by ReactMeteorDataComponent)
in ReactMeteorDataComponent (created by Layout)
in Layout (created by ReactMeteorDataComponent)
in ReactMeteorDataComponent
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:24558
meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:1010 Exception from Tracker recompute function:
meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:1010 TypeError: data.map is not a function
at Chart.render (chart.jsx:29)
at finishClassComponent (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:23530)
at updateClassComponent (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:23492)
at beginWork (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:24160)
at performUnitOfWork (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:26186)
at workLoop (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:26225)
at renderRoot (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:26265)
at performWorkOnRoot (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:26882)
at performWork (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:26803)
at performSyncWork (modules.js?hash=362cc2b4b601a33cc301f27d0a50ce4ab86ed2c8:26775)
DevTools failed to parse SourceMap: http://206.81.4.170:3000/bootstrap.css.map
sockjs-0.3.4.js:854 GET http://206.81.4.170:3000/sockjs/info?cb=rzdymq1n76 0 ()
AbstractXHRObject._start @ sockjs-0.3.4.js:854
(anonymous) @ sockjs-0.3.4.js:888
setTimeout (async)
utils.delay @ sockjs-0.3.4.js:399
utils.XHRLocalObject @ sockjs-0.3.4.js:887
InfoReceiver.doXhr @ sockjs-0.3.4.js:2003
(anonymous) @ sockjs-0.3.4.js:1990
setTimeout (async)
utils.delay @ sockjs-0.3.4.js:399
InfoReceiver @ sockjs-0.3.4.js:1990
createInfoReceiver @ sockjs-0.3.4.js:2078
SockJS @ sockjs-0.3.4.js:1019
_launchConnection @ browser.js:173
_retryNow @ common.js:169
EVp.withValue @ meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:1158
(anonymous) @ meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:539
(anonymous) @ meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:1185
setTimeout (async)
Meteor.setTimeout @ meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:562
retryLater @ retry.js:63
_retryLater @ common.js:145
_lostConnection @ common.js:131
Promise.resolve.done @ browser.js:200
(anonymous) @ meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:1185
Promise.then (async)
Promise.then @ promise.js?hash=badbb15e6daa4c8fb4dcd6049286a198af5008b4:130
proto.done @ promise.js?hash=badbb15e6daa4c8fb4dcd6049286a198af5008b4:64
socket.onclose @ browser.js:199
REventTarget.dispatchEvent @ sockjs-0.3.4.js:87
(anonymous) @ sockjs-0.3.4.js:1116
setTimeout (async)
utils.delay @ sockjs-0.3.4.js:399
SockJS._didClose @ sockjs-0.3.4.js:1115
SockJS._didMessage @ sockjs-0.3.4.js:1139
that.ws.onclose @ sockjs-0.3.4.js:1287
sockjs-0.3.4.js:854 GET http://206.81.4.170:3000/sockjs/info?cb=xyy92wp7en 0 ()
AbstractXHRObject._start @ sockjs-0.3.4.js:854
(anonymous) @ sockjs-0.3.4.js:888
setTimeout (async)
utils.delay @ sockjs-0.3.4.js:399
utils.XHRLocalObject @ sockjs-0.3.4.js:887
InfoReceiver.doXhr @ sockjs-0.3.4.js:2003
(anonymous) @ sockjs-0.3.4.js:1990
setTimeout (async)
utils.delay @ sockjs-0.3.4.js:399
InfoReceiver @ sockjs-0.3.4.js:1990
createInfoReceiver @ sockjs-0.3.4.js:2078
SockJS @ sockjs-0.3.4.js:1019
_launchConnection @ browser.js:173
_retryNow @ common.js:169
EVp.withValue @ meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:1158
(anonymous) @ meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:539
(anonymous) @ meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:1185
setTimeout (async)
Meteor.setTimeout @ meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:562
retryLater @ retry.js:63
_retryLater @ common.js:145
_lostConnection @ common.js:131
Promise.resolve.done @ browser.js:200
(anonymous) @ meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:1185
Promise.then (async)
Promise.then @ promise.js?hash=badbb15e6daa4c8fb4dcd6049286a198af5008b4:130
proto.done @ promise.js?hash=badbb15e6daa4c8fb4dcd6049286a198af5008b4:64
socket.onclose @ browser.js:199
REventTarget.dispatchEvent @ sockjs-0.3.4.js:87
(anonymous) @ sockjs-0.3.4.js:1116
setTimeout (async)
utils.delay @ sockjs-0.3.4.js:399
SockJS._didClose @ sockjs-0.3.4.js:1115
SockJS.that._ir.onfinish @ sockjs-0.3.4.js:1033
EventEmitter.emit @ sockjs-0.3.4.js:151
xo.onfinish @ sockjs-0.3.4.js:2022
EventEmitter.emit @ sockjs-0.3.4.js:151
that.xhr.onreadystatechange @ sockjs-0.3.4.js:848
XMLHttpRequest.send (async)
AbstractXHRObject._start @ sockjs-0.3.4.js:854
(anonymous) @ sockjs-0.3.4.js:888
setTimeout (async)
utils.delay @ sockjs-0.3.4.js:399
utils.XHRLocalObject @ sockjs-0.3.4.js:887
InfoReceiver.doXhr @ sockjs-0.3.4.js:2003
(anonymous) @ sockjs-0.3.4.js:1990
setTimeout (async)
utils.delay @ sockjs-0.3.4.js:399
InfoReceiver @ sockjs-0.3.4.js:1990
createInfoReceiver @ sockjs-0.3.4.js:2078
SockJS @ sockjs-0.3.4.js:1019
_launchConnection @ browser.js:173
_retryNow @ common.js:169
EVp.withValue @ meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:1158
(anonymous) @ meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:539
(anonymous) @ meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:1185
setTimeout (async)
Meteor.setTimeout @ meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:562
retryLater @ retry.js:63
_retryLater @ common.js:145
_lostConnection @ common.js:131
Promise.resolve.done @ browser.js:200
(anonymous) @ meteor.js?hash=c8108d734cc548d91539b054e14b613d0c4512cc:1185
Promise.then (async)
Promise.then @ promise.js?hash=badbb15e6daa4c8fb4dcd6049286a198af5008b4:130
proto.done @ promise.js?hash=badbb15e6daa4c8fb4dcd6049286a198af5008b4:64
socket.onclose @ browser.js:199
REventTarget.dispatchEvent @ sockjs-0.3.4.js:87
(anonymous) @ sockjs-0.3.4.js:1116
setTimeout (async)
utils.delay @ sockjs-0.3.4.js:399
SockJS._didClose @ sockjs-0.3.4.js:1115
SockJS._didMessage @ sockjs-0.3.4.js:1139
that.ws.onclose @ sockjs-0.3.4.js:1287
@koernigo chart component expects data as array. Is your data result from find()? (or is result from findOne()?)
Hum... I guess it's findOne() and that currently doesn't work, but maybe it makes sense to allow object as input. If this is your case, then I need more info - how data object looks like? (and what type of diagram you want to show?).
@perak I want to display a set of KPIs in a set of gauges (.e.g percentages). I was able to make that work in a test app when I started from scratch using a single value.
I guess meteor gets confused about package dependency. This is why I get the error
chart.jsx:29 Uncaught TypeError: data.map is not a function
at Chart.render (chart.jsx:29)
@koernigo how I can reproduce that error here? Can you share your kitchen input .json ? (or at least minimal part of it to help me reproduce issue locally)
@perak Thanks. I think the whole project is somehow corrupted. I will create a clean one and go from there. Quick question. about the charts: Is there a way to customize the chart, so e.g. if I have a gauge chart that goes from 0 to 100, but the field in the DB goes from 0..1 is there a way to adjust the scale of the gauge?