{"action":"created","comment":{"url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/pulls/comments/139678675","pull_request_review_id":63643581,"id":139678675,"diff_hunk":"@@ -0,0 +1,108 @@\n+import React from 'react'\n+import PropTypes from 'prop-types'\n+import classNames from 'classnames'\n+\n+import Spinner from '../../atoms/Spinner/Spinner'\n+\n+const radius = 0.9\n+const circumference = 2 * Math.PI * radius\n+\n+export const getThresholdFromValue = (thresholds, value) =>\n+    thresholds\n+        .sort((a, b) => b.to - a.to)\n+        .reduce((prev, curr) => curr.to >= value ? curr : prev, null)\n+\n+const getDashOffsetFromPercentage = (percentage) =>\n+    circumference * (1 - percentage)\n+\n+const getDashOffsetIfLoading = (loading, percentage) =>\n+    loading\n+    ? 0\n+    : getDashOffsetFromPercentage(percentage)\n+\n+/**\n+ * Status: *in progress*.\n+ *\n+ * Future work: Finetune the default thresholds.\n+ *\n+ */\n+const DonutChart = ({\n+    loading,\n+    size,\n+    loadingCaption,\n+    percent,\n+    value,\n+    valueCaption,\n+    thresholds\n+}) => (\n+    <div className=\"donut-chart\" style={{ width: size, height: size }}>\n+        <svg\n+            className=\"donut-chart__slice\"\n+            viewBox=\"-1 -1 2 2\"\n+            width={size}\n+            height={size}>\n+            <circle\n+                className=\"donut-chart__background\"\n+                cx=\"0\"\n+                cy=\"0\"\n+                r={radius}\n+            />\n+            {!!percent && <circle\n+                className={classNames(\n+                    'donut-chart__arc',\n+                    `donut-chart__arc--${getThresholdFromValue(thresholds, percent).type}`,\n+                    { 'donut-chart__arc--disabled': loading })}\n+                cx=\"0\"\n+                cy=\"0\"\n+                r={radius}\n+                strokeDashoffset={getDashOffsetIfLoading(loading, percent)}\n+            />}\n+        </svg>\n+        <div className={classNames('donut-chart__hole', { 'donut-chart__hole--hidden-top': !loading })}>\n+            <Spinner className=\"donut-chart__spinner\" />\n+            <p className=\"donut-chart__loading-caption\">{loadingCaption}</p>\n+        </div>\n+        <div className={classNames('donut-chart__hole', { 'donut-chart__hole--hidden-bottom': loading })}>\n+            <p className=\"donut-chart__value\">{value}</p>\n+            <p className=\"donut-chart__value-caption\">{valueCaption}</p>\n+        </div>\n+    </div>\n+)\n+\n+DonutChart.propTypes = {\n+    loading: PropTypes.bool,\n+    size: PropTypes.number,\n+    loadingCaption: PropTypes.string,\n+    value: PropTypes.string,\n+    percent: (props, propName) => {\n+        if(props[propName] === undefined || props[propName] === null) {\n+            return null\n+        }\n+\n+        if(typeof props[propName] !== 'number') {\n+            return new Error(`${propName} has to be a number`)\n+        }\n+\n+        if(props[propName] < 0 || props[propName] > 1) {\n+            return new Error(`${propName} has to be within interval 0..1`)\n+        }\n+    },\n+    valueCaption: PropTypes.string,\n+    thresholds: PropTypes.arrayOf(PropTypes.shape({\n+      to: React.PropTypes.number.isRequired,\n+      type: React.PropTypes.string.isRequired\n+    }))\n+}\n+\n+DonutChart.defaultProps = {\n+    size: 266,\n+    loadingCaption: \"Henter data...\",\n+    valueCaption: \"gjenstår\",\n+    thresholds: [\n+        { to: 0.2, type: 'red' },\n+        { to: 0.6, type: 'orange' },\n+        { to: 1, type: 'green' }\n+    ]\n+}\n+\n+export default DonutChart","path":"src/components/molecules/DonutChart/DonutChart.jsx","position":108,"original_position":108,"commit_id":"7849d11ae5283b431b4df81b9e20ba417c02e6bd","original_commit_id":"7849d11ae5283b431b4df81b9e20ba417c02e6bd","user":{"login":"alexyork","id":259948,"avatar_url":"https://avatars2.githubusercontent.com/u/259948?v=4","gravatar_id":"","url":"https://api.github.com/users/alexyork","html_url":"https://github.com/alexyork","followers_url":"https://api.github.com/users/alexyork/followers","following_url":"https://api.github.com/users/alexyork/following{/other_user}","gists_url":"https://api.github.com/users/alexyork/gists{/gist_id}","starred_url":"https://api.github.com/users/alexyork/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alexyork/subscriptions","organizations_url":"https://api.github.com/users/alexyork/orgs","repos_url":"https://api.github.com/users/alexyork/repos","events_url":"https://api.github.com/users/alexyork/events{/privacy}","received_events_url":"https://api.github.com/users/alexyork/received_events","type":"User","site_admin":false},"body":"Semi-colon.","created_at":"2017-09-19T12:40:00Z","updated_at":"2017-09-19T12:44:10Z","html_url":"https://github.com/TeliaSoneraNorge/styleguide/pull/12#discussion_r139678675","pull_request_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/pulls/12","author_association":"COLLABORATOR","_links":{"self":{"href":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/pulls/comments/139678675"},"html":{"href":"https://github.com/TeliaSoneraNorge/styleguide/pull/12#discussion_r139678675"},"pull_request":{"href":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/pulls/12"}}},"pull_request":{"url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/pulls/12","id":141763214,"html_url":"https://github.com/TeliaSoneraNorge/styleguide/pull/12","diff_url":"https://github.com/TeliaSoneraNorge/styleguide/pull/12.diff","patch_url":"https://github.com/TeliaSoneraNorge/styleguide/pull/12.patch","issue_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/issues/12","number":12,"state":"open","locked":false,"title":"donut and progress charts","user":{"login":"mkmarek","id":7100597,"avatar_url":"https://avatars1.githubusercontent.com/u/7100597?v=4","gravatar_id":"","url":"https://api.github.com/users/mkmarek","html_url":"https://github.com/mkmarek","followers_url":"https://api.github.com/users/mkmarek/followers","following_url":"https://api.github.com/users/mkmarek/following{/other_user}","gists_url":"https://api.github.com/users/mkmarek/gists{/gist_id}","starred_url":"https://api.github.com/users/mkmarek/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mkmarek/subscriptions","organizations_url":"https://api.github.com/users/mkmarek/orgs","repos_url":"https://api.github.com/users/mkmarek/repos","events_url":"https://api.github.com/users/mkmarek/events{/privacy}","received_events_url":"https://api.github.com/users/mkmarek/received_events","type":"User","site_admin":false},"body":"","created_at":"2017-09-19T05:56:04Z","updated_at":"2017-09-19T12:44:10Z","closed_at":null,"merged_at":null,"merge_commit_sha":"2ea46d405c7e59d340dfa9e2b9ea8f8827796b2c","assignee":null,"assignees":[],"requested_reviewers":[],"milestone":null,"commits_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/pulls/12/commits","review_comments_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/pulls/12/comments","review_comment_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/pulls/comments{/number}","comments_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/issues/12/comments","statuses_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/statuses/7849d11ae5283b431b4df81b9e20ba417c02e6bd","head":{"label":"TeliaSoneraNorge:feature/donuts-and-progress","ref":"feature/donuts-and-progress","sha":"7849d11ae5283b431b4df81b9e20ba417c02e6bd","user":{"login":"TeliaSoneraNorge","id":17065465,"avatar_url":"https://avatars0.githubusercontent.com/u/17065465?v=4","gravatar_id":"","url":"https://api.github.com/users/TeliaSoneraNorge","html_url":"https://github.com/TeliaSoneraNorge","followers_url":"https://api.github.com/users/TeliaSoneraNorge/followers","following_url":"https://api.github.com/users/TeliaSoneraNorge/following{/other_user}","gists_url":"https://api.github.com/users/TeliaSoneraNorge/gists{/gist_id}","starred_url":"https://api.github.com/users/TeliaSoneraNorge/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/TeliaSoneraNorge/subscriptions","organizations_url":"https://api.github.com/users/TeliaSoneraNorge/orgs","repos_url":"https://api.github.com/users/TeliaSoneraNorge/repos","events_url":"https://api.github.com/users/TeliaSoneraNorge/events{/privacy}","received_events_url":"https://api.github.com/users/TeliaSoneraNorge/received_events","type":"Organization","site_admin":false},"repo":{"id":92921069,"name":"styleguide","full_name":"TeliaSoneraNorge/styleguide","owner":{"login":"TeliaSoneraNorge","id":17065465,"avatar_url":"https://avatars0.githubusercontent.com/u/17065465?v=4","gravatar_id":"","url":"https://api.github.com/users/TeliaSoneraNorge","html_url":"https://github.com/TeliaSoneraNorge","followers_url":"https://api.github.com/users/TeliaSoneraNorge/followers","following_url":"https://api.github.com/users/TeliaSoneraNorge/following{/other_user}","gists_url":"https://api.github.com/users/TeliaSoneraNorge/gists{/gist_id}","starred_url":"https://api.github.com/users/TeliaSoneraNorge/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/TeliaSoneraNorge/subscriptions","organizations_url":"https://api.github.com/users/TeliaSoneraNorge/orgs","repos_url":"https://api.github.com/users/TeliaSoneraNorge/repos","events_url":"https://api.github.com/users/TeliaSoneraNorge/events{/privacy}","received_events_url":"https://api.github.com/users/TeliaSoneraNorge/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/TeliaSoneraNorge/styleguide","description":"NEW POC: Basic styles to use for customer-facing web pages in Telia.","fork":false,"url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide","forks_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/forks","keys_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/keys{/key_id}","collaborators_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/teams","hooks_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/hooks","issue_events_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/issues/events{/number}","events_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/events","assignees_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/assignees{/user}","branches_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/branches{/branch}","tags_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/tags","blobs_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/git/refs{/sha}","trees_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/git/trees{/sha}","statuses_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/statuses/{sha}","languages_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/languages","stargazers_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/stargazers","contributors_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/contributors","subscribers_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/subscribers","subscription_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/subscription","commits_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/commits{/sha}","git_commits_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/git/commits{/sha}","comments_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/comments{/number}","issue_comment_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/issues/comments{/number}","contents_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/contents/{+path}","compare_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/compare/{base}...{head}","merges_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/merges","archive_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/downloads","issues_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/issues{/number}","pulls_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/pulls{/number}","milestones_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/milestones{/number}","notifications_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/labels{/name}","releases_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/releases{/id}","deployments_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/deployments","created_at":"2017-05-31T08:06:27Z","updated_at":"2017-05-31T08:06:53Z","pushed_at":"2017-09-19T11:07:42Z","git_url":"git://github.com/TeliaSoneraNorge/styleguide.git","ssh_url":"git@github.com:TeliaSoneraNorge/styleguide.git","clone_url":"https://github.com/TeliaSoneraNorge/styleguide.git","svn_url":"https://github.com/TeliaSoneraNorge/styleguide","homepage":null,"size":99373,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":2,"forks":0,"open_issues":2,"watchers":0,"default_branch":"master"}},"base":{"label":"TeliaSoneraNorge:master","ref":"master","sha":"1ce9e002dd22c0555ba4ec3395987019488670cb","user":{"login":"TeliaSoneraNorge","id":17065465,"avatar_url":"https://avatars0.githubusercontent.com/u/17065465?v=4","gravatar_id":"","url":"https://api.github.com/users/TeliaSoneraNorge","html_url":"https://github.com/TeliaSoneraNorge","followers_url":"https://api.github.com/users/TeliaSoneraNorge/followers","following_url":"https://api.github.com/users/TeliaSoneraNorge/following{/other_user}","gists_url":"https://api.github.com/users/TeliaSoneraNorge/gists{/gist_id}","starred_url":"https://api.github.com/users/TeliaSoneraNorge/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/TeliaSoneraNorge/subscriptions","organizations_url":"https://api.github.com/users/TeliaSoneraNorge/orgs","repos_url":"https://api.github.com/users/TeliaSoneraNorge/repos","events_url":"https://api.github.com/users/TeliaSoneraNorge/events{/privacy}","received_events_url":"https://api.github.com/users/TeliaSoneraNorge/received_events","type":"Organization","site_admin":false},"repo":{"id":92921069,"name":"styleguide","full_name":"TeliaSoneraNorge/styleguide","owner":{"login":"TeliaSoneraNorge","id":17065465,"avatar_url":"https://avatars0.githubusercontent.com/u/17065465?v=4","gravatar_id":"","url":"https://api.github.com/users/TeliaSoneraNorge","html_url":"https://github.com/TeliaSoneraNorge","followers_url":"https://api.github.com/users/TeliaSoneraNorge/followers","following_url":"https://api.github.com/users/TeliaSoneraNorge/following{/other_user}","gists_url":"https://api.github.com/users/TeliaSoneraNorge/gists{/gist_id}","starred_url":"https://api.github.com/users/TeliaSoneraNorge/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/TeliaSoneraNorge/subscriptions","organizations_url":"https://api.github.com/users/TeliaSoneraNorge/orgs","repos_url":"https://api.github.com/users/TeliaSoneraNorge/repos","events_url":"https://api.github.com/users/TeliaSoneraNorge/events{/privacy}","received_events_url":"https://api.github.com/users/TeliaSoneraNorge/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/TeliaSoneraNorge/styleguide","description":"NEW POC: Basic styles to use for customer-facing web pages in Telia.","fork":false,"url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide","forks_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/forks","keys_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/keys{/key_id}","collaborators_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/teams","hooks_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/hooks","issue_events_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/issues/events{/number}","events_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/events","assignees_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/assignees{/user}","branches_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/branches{/branch}","tags_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/tags","blobs_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/git/refs{/sha}","trees_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/git/trees{/sha}","statuses_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/statuses/{sha}","languages_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/languages","stargazers_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/stargazers","contributors_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/contributors","subscribers_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/subscribers","subscription_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/subscription","commits_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/commits{/sha}","git_commits_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/git/commits{/sha}","comments_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/comments{/number}","issue_comment_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/issues/comments{/number}","contents_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/contents/{+path}","compare_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/compare/{base}...{head}","merges_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/merges","archive_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/downloads","issues_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/issues{/number}","pulls_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/pulls{/number}","milestones_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/milestones{/number}","notifications_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/labels{/name}","releases_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/releases{/id}","deployments_url":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/deployments","created_at":"2017-05-31T08:06:27Z","updated_at":"2017-05-31T08:06:53Z","pushed_at":"2017-09-19T11:07:42Z","git_url":"git://github.com/TeliaSoneraNorge/styleguide.git","ssh_url":"git@github.com:TeliaSoneraNorge/styleguide.git","clone_url":"https://github.com/TeliaSoneraNorge/styleguide.git","svn_url":"https://github.com/TeliaSoneraNorge/styleguide","homepage":null,"size":99373,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":2,"forks":0,"open_issues":2,"watchers":0,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/pulls/12"},"html":{"href":"https://github.com/TeliaSoneraNorge/styleguide/pull/12"},"issue":{"href":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/issues/12"},"comments":{"href":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/issues/12/comments"},"review_comments":{"href":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/pulls/12/comments"},"review_comment":{"href":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/pulls/12/commits"},"statuses":{"href":"https://api.github.com/repos/TeliaSoneraNorge/styleguide/statuses/7849d11ae5283b431b4df81b9e20ba417c02e6bd"}},"author_association":"COLLABORATOR"}}
{"actor":{"display_login":"alexyork"}}