Open koernigo opened 6 years ago
@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
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
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?
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!