search

perak / kitchen-site

Meteor Kitchen site source code
MIT License
282 stars 38 forks source link

Chart component #411

Open koernigo opened 6 years ago

koernigo commented 6 years ago

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!

perak commented 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!

koernigo commented 6 years ago

Awesome, thank you Petar!!

perak commented 6 years ago

@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. 👍

koernigo commented 6 years ago

@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

perak commented 6 years ago

@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?).

koernigo commented 6 years ago

@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.
image 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)

perak commented 6 years ago

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

koernigo commented 6 years ago

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