{"action":"created","issue":{"url":"https://api.github.com/repos/frappe/charts/issues/24","repository_url":"https://api.github.com/repos/frappe/charts","labels_url":"https://api.github.com/repos/frappe/charts/issues/24/labels{/name}","comments_url":"https://api.github.com/repos/frappe/charts/issues/24/comments","events_url":"https://api.github.com/repos/frappe/charts/issues/24/events","html_url":"https://github.com/frappe/charts/issues/24","id":270804575,"number":24,"title":"Support React","user":{"login":"tobiaslins","id":2978876,"avatar_url":"https://avatars3.githubusercontent.com/u/2978876?v=4","gravatar_id":"","url":"https://api.github.com/users/tobiaslins","html_url":"https://github.com/tobiaslins","followers_url":"https://api.github.com/users/tobiaslins/followers","following_url":"https://api.github.com/users/tobiaslins/following{/other_user}","gists_url":"https://api.github.com/users/tobiaslins/gists{/gist_id}","starred_url":"https://api.github.com/users/tobiaslins/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tobiaslins/subscriptions","organizations_url":"https://api.github.com/users/tobiaslins/orgs","repos_url":"https://api.github.com/users/tobiaslins/repos","events_url":"https://api.github.com/users/tobiaslins/events{/privacy}","received_events_url":"https://api.github.com/users/tobiaslins/received_events","type":"User","site_admin":false},"labels":[{"id":731586136,"url":"https://api.github.com/repos/frappe/charts/labels/enhancement","name":"enhancement","color":"84b6eb","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":12,"created_at":"2017-11-02T20:56:19Z","updated_at":"2018-03-09T12:10:44Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"Currently it is not possible to use this library with React (easily).\r\n\r\nSome modifications are needed to use it.\r\n\r\nI want to discuss what should happen in this repository and what not.\r\n\r\nI already did small changes to use it as a simple React component.\r\n\r\n```js\r\nimport React, { Component } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport Frappe from 'frappe-charts/src/scripts/charts.js'\r\n\r\nimport 'frappe-charts/dist/frappe-charts.min.css' // to import styling\r\n\r\nclass Chart extends Component {\r\n  componentDidMount() {\r\n    const {title, data, type = 'bar', height = 250} = this.props\r\n    this.c = new Frappe({\r\n      parent: this.chart,\r\n      title,\r\n      data,\r\n      type,\r\n      height\r\n    })\r\n  }\r\n\r\n  render() {\r\n    return <div ref={chart => (this.chart = chart)}/>\r\n  }\r\n}\r\n\r\nexport default Chart\r\n```\r\n\r\nI created a demo repo for showcase: https://github.com/tobiaslins/frappe-charts-react-example"},"comment":{"url":"https://api.github.com/repos/frappe/charts/issues/comments/371796147","html_url":"https://github.com/frappe/charts/issues/24#issuecomment-371796147","issue_url":"https://api.github.com/repos/frappe/charts/issues/24","id":371796147,"user":{"login":"tobiaslins","id":2978876,"avatar_url":"https://avatars3.githubusercontent.com/u/2978876?v=4","gravatar_id":"","url":"https://api.github.com/users/tobiaslins","html_url":"https://github.com/tobiaslins","followers_url":"https://api.github.com/users/tobiaslins/followers","following_url":"https://api.github.com/users/tobiaslins/following{/other_user}","gists_url":"https://api.github.com/users/tobiaslins/gists{/gist_id}","starred_url":"https://api.github.com/users/tobiaslins/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tobiaslins/subscriptions","organizations_url":"https://api.github.com/users/tobiaslins/orgs","repos_url":"https://api.github.com/users/tobiaslins/repos","events_url":"https://api.github.com/users/tobiaslins/events{/privacy}","received_events_url":"https://api.github.com/users/tobiaslins/received_events","type":"User","site_admin":false},"created_at":"2018-03-09T12:10:44Z","updated_at":"2018-03-09T12:10:44Z","author_association":"CONTRIBUTOR","body":"@klvenky have you tried https://github.com/tobiaslins/frappe-charts-react-example"}}
{"actor":{"display_login":"tobiaslins"}}