{"action":"created","comment":{"url":"https://api.github.com/repos/esbullington/react-d3/pulls/comments/30374944","id":30374944,"diff_hunk":"@@ -70,7 +72,7 @@ module.exports = React.createClass({\n       <div style={{'width': props.width, 'height': props.height}} >\n         {this._renderTitle()}\n         {this._renderLegend()}\n-        <svg viewBox={props.viewBox} width={props.width - props.sideOffset} height={props.height}>{props.children}</svg>\n+        <svg viewBox={this.getViewBox()} width={this.getOuterDimensions().width - props.sideOffset} height={props.height}>{props.children}</svg>","path":"src/common/charts/LegendChart.jsx","position":41,"original_position":41,"commit_id":"919646759b75e0c8f94a61f61a18759b512117b7","original_commit_id":"919646759b75e0c8f94a61f61a18759b512117b7","user":{"login":"parshap","id":332258,"avatar_url":"https://avatars.githubusercontent.com/u/332258?v=3","gravatar_id":"","url":"https://api.github.com/users/parshap","html_url":"https://github.com/parshap","followers_url":"https://api.github.com/users/parshap/followers","following_url":"https://api.github.com/users/parshap/following{/other_user}","gists_url":"https://api.github.com/users/parshap/gists{/gist_id}","starred_url":"https://api.github.com/users/parshap/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/parshap/subscriptions","organizations_url":"https://api.github.com/users/parshap/orgs","repos_url":"https://api.github.com/users/parshap/repos","events_url":"https://api.github.com/users/parshap/events{/privacy}","received_events_url":"https://api.github.com/users/parshap/received_events","type":"User","site_admin":false},"body":"I think `width={this.getOuterDimensions().width}` will result in having a static `px` width set on the svg element instead of a `%` that gets passed in. I see this is a complication because of the arithmetic that needs to be done to account for the legend's size. I think the layout system needs to be changed to use some sort of table layout or floats so that the svg can be `width=100%` while still allowing for room for the legend.","created_at":"2015-05-14T23:49:58Z","updated_at":"2015-05-14T23:49:58Z","html_url":"https://github.com/esbullington/react-d3/pull/213#discussion_r30374944","pull_request_url":"https://api.github.com/repos/esbullington/react-d3/pulls/213","_links":{"self":{"href":"https://api.github.com/repos/esbullington/react-d3/pulls/comments/30374944"},"html":{"href":"https://github.com/esbullington/react-d3/pull/213#discussion_r30374944"},"pull_request":{"href":"https://api.github.com/repos/esbullington/react-d3/pulls/213"}}},"pull_request":{"url":"https://api.github.com/repos/esbullington/react-d3/pulls/213","id":35472917,"html_url":"https://github.com/esbullington/react-d3/pull/213","diff_url":"https://github.com/esbullington/react-d3/pull/213.diff","patch_url":"https://github.com/esbullington/react-d3/pull/213.patch","issue_url":"https://api.github.com/repos/esbullington/react-d3/issues/213","number":213,"state":"open","locked":false,"title":"Added a ViewBoxMixin that lets charts configure their viewbox","user":{"login":"samdalton","id":327903,"avatar_url":"https://avatars.githubusercontent.com/u/327903?v=3","gravatar_id":"","url":"https://api.github.com/users/samdalton","html_url":"https://github.com/samdalton","followers_url":"https://api.github.com/users/samdalton/followers","following_url":"https://api.github.com/users/samdalton/following{/other_user}","gists_url":"https://api.github.com/users/samdalton/gists{/gist_id}","starred_url":"https://api.github.com/users/samdalton/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samdalton/subscriptions","organizations_url":"https://api.github.com/users/samdalton/orgs","repos_url":"https://api.github.com/users/samdalton/repos","events_url":"https://api.github.com/users/samdalton/events{/privacy}","received_events_url":"https://api.github.com/users/samdalton/received_events","type":"User","site_admin":false},"body":"Following discussion on this issue here: https://github.com/esbullington/react-d3/issues/204 I implemented a proposed solution and show it working for the AreaChart. The remaining charts have yet to be updated. By using the `ViewBoxMixin` charts can accept a `viewBoxObject` prop that will let charts access outer chart dimensions as pixel values, and generate a string viewBox value that can be set on the svg element. See the AreaChart for an example. Comments/thoughts appreciated - this doesn't need to be merged in but is rather another starting point for the discussions that seemed to have stagnated a bit.","created_at":"2015-05-14T23:32:15Z","updated_at":"2015-05-14T23:49:58Z","closed_at":null,"merged_at":null,"merge_commit_sha":"1ca8bbdead1134ae6fa4b2db1f18fce2aaa7e77f","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/esbullington/react-d3/pulls/213/commits","review_comments_url":"https://api.github.com/repos/esbullington/react-d3/pulls/213/comments","review_comment_url":"https://api.github.com/repos/esbullington/react-d3/pulls/comments{/number}","comments_url":"https://api.github.com/repos/esbullington/react-d3/issues/213/comments","statuses_url":"https://api.github.com/repos/esbullington/react-d3/statuses/919646759b75e0c8f94a61f61a18759b512117b7","head":{"label":"aboutLife:viewbox-object","ref":"viewbox-object","sha":"919646759b75e0c8f94a61f61a18759b512117b7","user":{"login":"aboutLife","id":3327011,"avatar_url":"https://avatars.githubusercontent.com/u/3327011?v=3","gravatar_id":"","url":"https://api.github.com/users/aboutLife","html_url":"https://github.com/aboutLife","followers_url":"https://api.github.com/users/aboutLife/followers","following_url":"https://api.github.com/users/aboutLife/following{/other_user}","gists_url":"https://api.github.com/users/aboutLife/gists{/gist_id}","starred_url":"https://api.github.com/users/aboutLife/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aboutLife/subscriptions","organizations_url":"https://api.github.com/users/aboutLife/orgs","repos_url":"https://api.github.com/users/aboutLife/repos","events_url":"https://api.github.com/users/aboutLife/events{/privacy}","received_events_url":"https://api.github.com/users/aboutLife/received_events","type":"Organization","site_admin":false},"repo":{"id":34347877,"name":"react-d3","full_name":"aboutLife/react-d3","owner":{"login":"aboutLife","id":3327011,"avatar_url":"https://avatars.githubusercontent.com/u/3327011?v=3","gravatar_id":"","url":"https://api.github.com/users/aboutLife","html_url":"https://github.com/aboutLife","followers_url":"https://api.github.com/users/aboutLife/followers","following_url":"https://api.github.com/users/aboutLife/following{/other_user}","gists_url":"https://api.github.com/users/aboutLife/gists{/gist_id}","starred_url":"https://api.github.com/users/aboutLife/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aboutLife/subscriptions","organizations_url":"https://api.github.com/users/aboutLife/orgs","repos_url":"https://api.github.com/users/aboutLife/repos","events_url":"https://api.github.com/users/aboutLife/events{/privacy}","received_events_url":"https://api.github.com/users/aboutLife/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/aboutLife/react-d3","description":"Modular React charts made with d3.js","fork":true,"url":"https://api.github.com/repos/aboutLife/react-d3","forks_url":"https://api.github.com/repos/aboutLife/react-d3/forks","keys_url":"https://api.github.com/repos/aboutLife/react-d3/keys{/key_id}","collaborators_url":"https://api.github.com/repos/aboutLife/react-d3/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/aboutLife/react-d3/teams","hooks_url":"https://api.github.com/repos/aboutLife/react-d3/hooks","issue_events_url":"https://api.github.com/repos/aboutLife/react-d3/issues/events{/number}","events_url":"https://api.github.com/repos/aboutLife/react-d3/events","assignees_url":"https://api.github.com/repos/aboutLife/react-d3/assignees{/user}","branches_url":"https://api.github.com/repos/aboutLife/react-d3/branches{/branch}","tags_url":"https://api.github.com/repos/aboutLife/react-d3/tags","blobs_url":"https://api.github.com/repos/aboutLife/react-d3/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/aboutLife/react-d3/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/aboutLife/react-d3/git/refs{/sha}","trees_url":"https://api.github.com/repos/aboutLife/react-d3/git/trees{/sha}","statuses_url":"https://api.github.com/repos/aboutLife/react-d3/statuses/{sha}","languages_url":"https://api.github.com/repos/aboutLife/react-d3/languages","stargazers_url":"https://api.github.com/repos/aboutLife/react-d3/stargazers","contributors_url":"https://api.github.com/repos/aboutLife/react-d3/contributors","subscribers_url":"https://api.github.com/repos/aboutLife/react-d3/subscribers","subscription_url":"https://api.github.com/repos/aboutLife/react-d3/subscription","commits_url":"https://api.github.com/repos/aboutLife/react-d3/commits{/sha}","git_commits_url":"https://api.github.com/repos/aboutLife/react-d3/git/commits{/sha}","comments_url":"https://api.github.com/repos/aboutLife/react-d3/comments{/number}","issue_comment_url":"https://api.github.com/repos/aboutLife/react-d3/issues/comments{/number}","contents_url":"https://api.github.com/repos/aboutLife/react-d3/contents/{+path}","compare_url":"https://api.github.com/repos/aboutLife/react-d3/compare/{base}...{head}","merges_url":"https://api.github.com/repos/aboutLife/react-d3/merges","archive_url":"https://api.github.com/repos/aboutLife/react-d3/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/aboutLife/react-d3/downloads","issues_url":"https://api.github.com/repos/aboutLife/react-d3/issues{/number}","pulls_url":"https://api.github.com/repos/aboutLife/react-d3/pulls{/number}","milestones_url":"https://api.github.com/repos/aboutLife/react-d3/milestones{/number}","notifications_url":"https://api.github.com/repos/aboutLife/react-d3/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/aboutLife/react-d3/labels{/name}","releases_url":"https://api.github.com/repos/aboutLife/react-d3/releases{/id}","created_at":"2015-04-21T19:30:31Z","updated_at":"2015-04-23T19:00:48Z","pushed_at":"2015-05-14T23:28:32Z","git_url":"git://github.com/aboutLife/react-d3.git","ssh_url":"git@github.com:aboutLife/react-d3.git","clone_url":"https://github.com/aboutLife/react-d3.git","svn_url":"https://github.com/aboutLife/react-d3","homepage":"http://esbullington.github.io/react-d3-website/","size":4878,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"esbullington:master","ref":"master","sha":"719f740a2d635018f4963844d6817fc15b0e52b6","user":{"login":"esbullington","id":1138625,"avatar_url":"https://avatars.githubusercontent.com/u/1138625?v=3","gravatar_id":"","url":"https://api.github.com/users/esbullington","html_url":"https://github.com/esbullington","followers_url":"https://api.github.com/users/esbullington/followers","following_url":"https://api.github.com/users/esbullington/following{/other_user}","gists_url":"https://api.github.com/users/esbullington/gists{/gist_id}","starred_url":"https://api.github.com/users/esbullington/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/esbullington/subscriptions","organizations_url":"https://api.github.com/users/esbullington/orgs","repos_url":"https://api.github.com/users/esbullington/repos","events_url":"https://api.github.com/users/esbullington/events{/privacy}","received_events_url":"https://api.github.com/users/esbullington/received_events","type":"User","site_admin":false},"repo":{"id":25973357,"name":"react-d3","full_name":"esbullington/react-d3","owner":{"login":"esbullington","id":1138625,"avatar_url":"https://avatars.githubusercontent.com/u/1138625?v=3","gravatar_id":"","url":"https://api.github.com/users/esbullington","html_url":"https://github.com/esbullington","followers_url":"https://api.github.com/users/esbullington/followers","following_url":"https://api.github.com/users/esbullington/following{/other_user}","gists_url":"https://api.github.com/users/esbullington/gists{/gist_id}","starred_url":"https://api.github.com/users/esbullington/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/esbullington/subscriptions","organizations_url":"https://api.github.com/users/esbullington/orgs","repos_url":"https://api.github.com/users/esbullington/repos","events_url":"https://api.github.com/users/esbullington/events{/privacy}","received_events_url":"https://api.github.com/users/esbullington/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/esbullington/react-d3","description":"Modular React charts made with d3.js","fork":false,"url":"https://api.github.com/repos/esbullington/react-d3","forks_url":"https://api.github.com/repos/esbullington/react-d3/forks","keys_url":"https://api.github.com/repos/esbullington/react-d3/keys{/key_id}","collaborators_url":"https://api.github.com/repos/esbullington/react-d3/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/esbullington/react-d3/teams","hooks_url":"https://api.github.com/repos/esbullington/react-d3/hooks","issue_events_url":"https://api.github.com/repos/esbullington/react-d3/issues/events{/number}","events_url":"https://api.github.com/repos/esbullington/react-d3/events","assignees_url":"https://api.github.com/repos/esbullington/react-d3/assignees{/user}","branches_url":"https://api.github.com/repos/esbullington/react-d3/branches{/branch}","tags_url":"https://api.github.com/repos/esbullington/react-d3/tags","blobs_url":"https://api.github.com/repos/esbullington/react-d3/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/esbullington/react-d3/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/esbullington/react-d3/git/refs{/sha}","trees_url":"https://api.github.com/repos/esbullington/react-d3/git/trees{/sha}","statuses_url":"https://api.github.com/repos/esbullington/react-d3/statuses/{sha}","languages_url":"https://api.github.com/repos/esbullington/react-d3/languages","stargazers_url":"https://api.github.com/repos/esbullington/react-d3/stargazers","contributors_url":"https://api.github.com/repos/esbullington/react-d3/contributors","subscribers_url":"https://api.github.com/repos/esbullington/react-d3/subscribers","subscription_url":"https://api.github.com/repos/esbullington/react-d3/subscription","commits_url":"https://api.github.com/repos/esbullington/react-d3/commits{/sha}","git_commits_url":"https://api.github.com/repos/esbullington/react-d3/git/commits{/sha}","comments_url":"https://api.github.com/repos/esbullington/react-d3/comments{/number}","issue_comment_url":"https://api.github.com/repos/esbullington/react-d3/issues/comments{/number}","contents_url":"https://api.github.com/repos/esbullington/react-d3/contents/{+path}","compare_url":"https://api.github.com/repos/esbullington/react-d3/compare/{base}...{head}","merges_url":"https://api.github.com/repos/esbullington/react-d3/merges","archive_url":"https://api.github.com/repos/esbullington/react-d3/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/esbullington/react-d3/downloads","issues_url":"https://api.github.com/repos/esbullington/react-d3/issues{/number}","pulls_url":"https://api.github.com/repos/esbullington/react-d3/pulls{/number}","milestones_url":"https://api.github.com/repos/esbullington/react-d3/milestones{/number}","notifications_url":"https://api.github.com/repos/esbullington/react-d3/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/esbullington/react-d3/labels{/name}","releases_url":"https://api.github.com/repos/esbullington/react-d3/releases{/id}","created_at":"2014-10-30T14:01:23Z","updated_at":"2015-05-13T01:45:46Z","pushed_at":"2015-05-14T23:32:15Z","git_url":"git://github.com/esbullington/react-d3.git","ssh_url":"git@github.com:esbullington/react-d3.git","clone_url":"https://github.com/esbullington/react-d3.git","svn_url":"https://github.com/esbullington/react-d3","homepage":"http://esbullington.github.io/react-d3-website/","size":7002,"stargazers_count":322,"watchers_count":322,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":44,"mirror_url":null,"open_issues_count":13,"forks":44,"open_issues":13,"watchers":322,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/esbullington/react-d3/pulls/213"},"html":{"href":"https://github.com/esbullington/react-d3/pull/213"},"issue":{"href":"https://api.github.com/repos/esbullington/react-d3/issues/213"},"comments":{"href":"https://api.github.com/repos/esbullington/react-d3/issues/213/comments"},"review_comments":{"href":"https://api.github.com/repos/esbullington/react-d3/pulls/213/comments"},"review_comment":{"href":"https://api.github.com/repos/esbullington/react-d3/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/esbullington/react-d3/pulls/213/commits"},"statuses":{"href":"https://api.github.com/repos/esbullington/react-d3/statuses/919646759b75e0c8f94a61f61a18759b512117b7"}}}}