{"action":"closed","issue":{"url":"https://api.github.com/repos/Canner/canner/issues/70","repository_url":"https://api.github.com/repos/Canner/canner","labels_url":"https://api.github.com/repos/Canner/canner/issues/70/labels{/name}","comments_url":"https://api.github.com/repos/Canner/canner/issues/70/comments","events_url":"https://api.github.com/repos/Canner/canner/issues/70/events","html_url":"https://github.com/Canner/canner/issues/70","id":352408867,"node_id":"MDU6SXNzdWUzNTI0MDg4Njc=","number":70,"title":"Chart and Indicator Component","user":{"login":"abz53378","id":8848231,"node_id":"MDQ6VXNlcjg4NDgyMzE=","avatar_url":"https://avatars0.githubusercontent.com/u/8848231?v=4","gravatar_id":"","url":"https://api.github.com/users/abz53378","html_url":"https://github.com/abz53378","followers_url":"https://api.github.com/users/abz53378/followers","following_url":"https://api.github.com/users/abz53378/following{/other_user}","gists_url":"https://api.github.com/users/abz53378/gists{/gist_id}","starred_url":"https://api.github.com/users/abz53378/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/abz53378/subscriptions","organizations_url":"https://api.github.com/users/abz53378/orgs","repos_url":"https://api.github.com/users/abz53378/repos","events_url":"https://api.github.com/users/abz53378/events{/privacy}","received_events_url":"https://api.github.com/users/abz53378/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":{"login":"chihsuan","id":4344253,"node_id":"MDQ6VXNlcjQzNDQyNTM=","avatar_url":"https://avatars2.githubusercontent.com/u/4344253?v=4","gravatar_id":"","url":"https://api.github.com/users/chihsuan","html_url":"https://github.com/chihsuan","followers_url":"https://api.github.com/users/chihsuan/followers","following_url":"https://api.github.com/users/chihsuan/following{/other_user}","gists_url":"https://api.github.com/users/chihsuan/gists{/gist_id}","starred_url":"https://api.github.com/users/chihsuan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chihsuan/subscriptions","organizations_url":"https://api.github.com/users/chihsuan/orgs","repos_url":"https://api.github.com/users/chihsuan/repos","events_url":"https://api.github.com/users/chihsuan/events{/privacy}","received_events_url":"https://api.github.com/users/chihsuan/received_events","type":"User","site_admin":false},"assignees":[{"login":"chihsuan","id":4344253,"node_id":"MDQ6VXNlcjQzNDQyNTM=","avatar_url":"https://avatars2.githubusercontent.com/u/4344253?v=4","gravatar_id":"","url":"https://api.github.com/users/chihsuan","html_url":"https://github.com/chihsuan","followers_url":"https://api.github.com/users/chihsuan/followers","following_url":"https://api.github.com/users/chihsuan/following{/other_user}","gists_url":"https://api.github.com/users/chihsuan/gists{/gist_id}","starred_url":"https://api.github.com/users/chihsuan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chihsuan/subscriptions","organizations_url":"https://api.github.com/users/chihsuan/orgs","repos_url":"https://api.github.com/users/chihsuan/repos","events_url":"https://api.github.com/users/chihsuan/events{/privacy}","received_events_url":"https://api.github.com/users/chihsuan/received_events","type":"User","site_admin":false},{"login":"abz53378","id":8848231,"node_id":"MDQ6VXNlcjg4NDgyMzE=","avatar_url":"https://avatars0.githubusercontent.com/u/8848231?v=4","gravatar_id":"","url":"https://api.github.com/users/abz53378","html_url":"https://github.com/abz53378","followers_url":"https://api.github.com/users/abz53378/followers","following_url":"https://api.github.com/users/abz53378/following{/other_user}","gists_url":"https://api.github.com/users/abz53378/gists{/gist_id}","starred_url":"https://api.github.com/users/abz53378/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/abz53378/subscriptions","organizations_url":"https://api.github.com/users/abz53378/orgs","repos_url":"https://api.github.com/users/abz53378/repos","events_url":"https://api.github.com/users/abz53378/events{/privacy}","received_events_url":"https://api.github.com/users/abz53378/received_events","type":"User","site_admin":false}],"milestone":null,"comments":1,"created_at":"2018-08-21T06:57:46Z","updated_at":"2018-08-28T10:28:14Z","closed_at":"2018-08-28T10:28:14Z","author_association":"COLLABORATOR","body":"## Overview\r\nIn these chart and indicator components, there will be a HOC dealing with the `query` and `variables`. So the chart component will receive the data directly, and also some useful methods.\r\n\r\n### canner.schema.js\r\nWe have to support `toolbar` in `indicator` and `chart`.\r\nSo actually the `indicator` object format will be \r\n```\r\n{\r\n  type: 'indicator',\r\n  toolbar: {\r\n    filter: {\r\n       // filter property\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n```js\r\n// canner.schema.js\r\nconst grahpql = `\r\n  query AggregateOrders($where: WhereInput!) {\r\n    aggregateOrders(where: $where) {\r\n      count\r\n    }\r\n  }\r\n`\r\n// ..\r\n<indicator ui=\"amount\" graphql={graphql}>\r\n    <toolbar>\r\n        <filter>\r\n    </toolbar>\r\n</indicator>\r\n// ..\r\n```\r\n\r\n### HOC\r\n```js\r\n// HOC withQuery in canner\r\nexport default function withQuery(Com) {\r\n  return class ComWithQuery extends React.Component {\r\n    // ... \r\n    render() {\r\n        const {graphql} = this.props;\r\n        const {where} = this.state;\r\n        <Query query={gql`${graphql}`} variables={{ where }}>\r\n            {({ loading, error, data, ...restProps }) => {\r\n              if (loading) return null;\r\n              if (error) return `Error!: ${error}`;\r\n        \r\n              return (\r\n                <Toolbar where={where} updateWhere={this.updateWhere}>\r\n                    <Com value={data} {...restProps}/>\r\n                </Toolbar>\r\n              );\r\n            }}\r\n      </Query>\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Component\r\n```js\r\n// amount component\r\nconst Amount = ({ value }) => (\r\n    return (\r\n        <div >\r\n           {value.aggregateOrders.count}\r\n        <div/>\r\n     );\r\n);\r\n```\r\n\r\n## Details\r\n\r\nChart and indicator tag also have the `title` property, and it will be rendered by a HOC in canner, so in components, they just focus on displaying the data.\r\n\r\n### Chart\r\n\r\nImplement chart component with `react-vega`, every component will provide default `spec` of vega, so developers can just pass the `uiParams`.\r\n\r\n\r\n#### Line\r\n[vega-spec](https://vega.github.io/editor/#/url/vega/N4KABGBEAkDODGALApgWwIaQFxUQFzwAdYsB6UgN2QHN0A6agSz0QFcAjOxge1IRQyUa6SgBY6AK1jcAdpAA04KAHdGAExbYwAVgAMuxREgpG1fFoBM+w1ELo1axjOpbtipZFimZ6ADawtAG0lCFAIcKgfVGQtSCc8ZAAnQm5fdASFEPDICj9WGJxIXydkdETILIBfJQBddyM1dMwcYIiwiMj0aNi8dHZfGJsInLzkAJastshWLQBGeSMKSwAOSoXgacsFqCWcbW01yfCNmZwAZm2crVEztbAT68vdsABOWcOO4829p61l9-W3zAADZfntbkMOg8cAB2MFgWYvO7QsDLeHLGEfT73IEveHaCzIoGzAw7a6rSFTU4I+ZknAWURE6mzCwLK44URIylfZkXOmozGA5miNnPYHArGfFGzNz82aCnHM0H8iyCo6hYlw-nAimKuZouUS7ka5l4-mcpmWUnshEHI41Kq1epQBB+MZBLLtYZRApQAAeroGmU+kDwAE9CL6iiUysGOpBEuhnFHVBpEHHhgAvJLcLQAMz8sGQ3Mgam4GCcWg2jV6PT6QbZecYyF8aliM2qEUl9yOkB9sTDgcGvfDkdixRkpXKJcTydiJjMeAz2RkjHgvrwiXyJeziVzOE3297ZYrchw1aadf6gygTZbbcKS074WfdRAHnQfvdEym3ESzZkJdCnYbgCHLBQXXgN1YgDKCGygPA1wAawAYW4VhAKtbsNj-ACgKgAY8yXNkhwHUjX2dSAMESJDxjAVpjhHCMownYcQzzPdUCrUtL0KXpr0gbsjGQGR4G4NRfS9eMRIScpz3VbI-W40jClg6DG2bVt20E41sjDZS4KjQdDIgyA7y0x8dIUowwwsAzoMKYz1J2UYtF0IT43iJIUjSDJz08bw-FiLzklSdIYmfT5IpfR0IAdaogA)\r\n```js\r\ninterface UIParams: {\r\n  interpolate?: \"basis\" | \"cardinal\" | \"catmull-rom\" | \"linear\" | \"monotone\" | \"natural\" | \"step\" | \"step-after\" | \"step-before\", // default linear\r\n  x: {\r\n    field: string,\r\n    scale?: ScaleType // https://vega.github.io/vega/docs/scales/#types // default linear\r\n  },\r\n  y: {\r\n    field: string,\r\n    scale?: ScaleType // https://vega.github.io/vega/docs/scales/#types // default linear\r\n  },\r\n  width?: number,\r\n  height?: number\r\n}\r\n```\r\n\r\n#### Bar\r\n[vega-spec](https://vega.github.io/editor/#/url/vega/N4KABGBEAkDODGALApgWwIaQFxUQFzwAdYsB6UgN2QHN0A6agSz0QFcAjOxge1IRQyUa6SgBY6AK1jcAdpAA04KAHdGAExbYwogAw7FESCkbV8WgEx6DUQujVrGM6loCsipZDXo8mHAG0lCFAIEKgZdFRkLUgfdgAbKOtQyAp0ONZkWC0A0NDgSHhvGm4AJwBPaIBBBSgI7lYZPAsADgBfJNz8wrxi8uiAIRrIOoamnBcXdsDOgqLqUoqcSABhIZHGrVEAZinckK65heiAETXUeo2cAE4ARl29sAOe+b6lgFEzi7GwZruOvNmzyOSwAYp9Rq4dv99oDeosoABxcGXMA3K73PZPOHRAASyO+zQA7K1phAALrTEnk9yGWAmcJxLL+abBXKQcKRaJ4bjcOJ4RiEBSkqCpdJRHDADEhSCybLCoKQZBURpMqAlZDwPBYc6sWDIbhUEpDViELw9aJm1ioSBSgFK5Aq6LqzXa+p6+pNeSGE1m8VQSU24UU0JUsBkmlQBBpTJyvLC9kRP2QAAeUYSQr2MTKhCT7HQMjUGbZam4GEcWnyZt8UFi6a9kAAZoxkHFC0tutjbWr89Qk6oNIgi8lbPZHM4cDo6Do3PGShc22A8CUMpSOqzkhyk2U04l4yWy3IJZ5vNWYuh4okoE2WwvhjqNl32Yx4H6lxloZASj2k8ZTE1KUo4YgB46DJjGzJ5FApTNiikDsNwBClkMO7RKmhTpmAUrAFBJQwd8kAJA2nqRuhW4oZhgERpAGAlAA1qqOT7PGeDZkmzqevGDZztaR5VtgZ4XjaH4OvA3BqH665sg6PRGhK8rSsmFaQChSxodGQzXq20Qdi8FRdsk-aaEeKlQGpdZQHmBZaH88mGPC+QmZA26kRpzZaUs6xNPp0plOYSmOc56n1qKGRaDooZ7N5kA+kUFa2VejBxHESkhUmsA9C28Shd5hhNklADytjwMw8J+PkqXWa0wYPFFiAGsgsmPPFjaJXEhXoMVLHZOVaShROdBtNVkXChFmFrsxrFcsgyYcZmIliRJ8mKo0DVxQ80ppPSKW9UmL4rUaOUWegepxI4EkpDt0TwYh1qHS1SXbWK0QAMRbG9gbrVFMXmnJ62GIpxkuapKH1nS1AMlyPJ8gKdA6Uc9aWQuk6TNCyT2cpQNQIF5nKfSaSQ7y-KEHQnlDNwDYNnq3wALTmHdPQzf5ePJUs3KEzDpN3XlbVFSVsZ-QqPTpRa3hWmAAC8kuLlDRNDBVE6HQq8uoqNexDbkqsUSGgEgCSQA)\r\n```js\r\ninterface UIParams: {\r\n  x: {\r\n    field: string,\r\n    scale?: ScaleType // https://vega.github.io/vega/docs/scales/#types // default band\r\n  },\r\n  y: {\r\n    field: string,\r\n    scale?: ScaleType // https://vega.github.io/vega/docs/scales/#types\r\n  },\r\n  width?: number,\r\n  height?: number,\r\n  fill?: string, // color\r\n  \r\n}\r\n```\r\n#### Pie\r\nThis componet should show the value when hover on arc.\r\n[vega-sepc](https://vega.github.io/editor/#/url/vega/N4KABGBEAkDODGALApgWwIaQFxUQFzwAdYsB6UgN2QHN0A6agSz0QFcAjOxge1IRQyUa6SgBY6AK1jcAdpAA04KAHdGAExbYwAJgCsABkURIKRtXxa9hpZHSs83WIwBeyLZBmy3im0+oz0ABtYLQBtJQhQCGioANQ3HEhYPHQAJzwAQRlqQO8oCiDWBLB9COiygF8jaKiY2PR492QZNSycvMgCwKKtADY6bQBOEErqyLLjOOLIQnRW7NyFfMLi0tGy2piPBunGGRlkVIAlOcZWEPll7tWRmKqNifrGxPhuVIPj0-OlzpWtNbuYzAm2i22eUGk6R+XR6OAAZkFYMhbtEKkoALo+YxqdApMIPOpPaYpdiLIHGGHIEI4cKEyKQdRaACMl0gcMYyECai0onudOBDO5OG0rPZnKFYF6fLpwEFWgAzKKOVzmfppYTZYycKIleKFeq6pqJbpdSqcAB2A0xI19U0SgAcaMJmMekDwqXQMlgcLeqHx-JBhLdAE9CNNCByFI8tmKzVBY9zyXUkil0m1FjhZX4AoF3Mk0pkFm4rcnmvN2los2Yc00Wuni0mtpC8JWktWgnm3i2nXSezF0ZUMViIfAglT-TVXVN3K9Am8o0G8KHpm81HsO0nIB7ssUs0g0NNR3gaG9g9p9JA+2Aey6bBhUgBralgWmTxfL9xpeAL5Nw1LcP1M0gHE8USElFhLSBmleNRd2jKBmmPVJK3g4x2UCXMgIQMcZ24OdkLtdxGRLLYAA9W2zDtElUDREDAUgdEvRtQWDCj20w3BkDMfB6MYq9AXgyBWEIEC4P5Yx8zTItWwTPNU0LCsSNBMt6xk5UJSgutpKU4xZnLDMBUojiZjmVSdKgPYPhONdviw9iiP2Q5rLOEJzMgbh7Ccr5nyrfwqJUdQWF47QmNQqBXneLybJ8ts-OMiKrO8y94P469BwgAc0SAA)\r\n```js\r\ninterface UIParams: {\r\n  innerRadius?: number, // default 0,\r\n  sort?: boolean, // default false\r\n  width?: number, // default 250\r\n  height?: number, // optional, default same as width,\r\n  field: string,\r\n  color: {\r\n    range?: ColorRange // default category20, //https://vega.github.io/vega/docs/scales/#range,\r\n    field?: string: // default id\r\n  }\r\n}\r\n```\r\n#### Scatter\r\n\r\n[vega-spec](https://vega.github.io/editor/#/url/vega/N4KABGBEAkDODGALApgWwIaQFxUQFzwAdYsB6UgN2QHN0A6agSz0QFcAjOxge1IRQyUa6SgBY6AK1jcAdpAA04KAHdGAExbYwogKwAGRREgpG1fFt0GlkQujVrGM6lp2Go6Vnm6xGAL2RawJB4AJ6EATiQAGbMClAATsg+-lp48azIAL6K1j7UMugANrBaANpKEMBQBagRUCEAYozIhWpxkBRFGVqQAJIAsgAiAEIA+gBK6HiOzm4QRuyObThBjoSePbAtyPB47dyE07IlOKV9Q2OT007t49wEyDKjACrcGF5JE1Mz7QCqAMqjADi8W8JXkUAA6tx4q1VGpkMDQbASgBdTJgbIVMBVSA1OqQAAeTRabQhHS6BLuDyer3e3E+Vx+c3mkEWMmWOMgaw2kS2hR2e3JByOMhOYDOAxGX2usyg1LwjxebymDNgMuZUABSLB7WhsLU8MRIN16MxLNx+J6MlYhUK-z8AXJnUK3RwAA5zdjLehatbbYUgehCO1WIQ1FMCTa7Q7-GAANRgACMekgmKUqJyRgjeEwp292KMVsiqG4FGa4MLUFYsJ6OZEpfLSUk0jkLKMaXQYqiMNQZSrlQHrNC4R6PfiqFtmHb8yMyEJhHidamrFQdGezAFCbAAHIwAAKPeJ-chZDoeL7nOrujjbboLajQaRgCUYAAPm-dwB+HevxO-ncFCHIx7y0DtuG4QpphDIdMirVFsSxWdQFnItfQJF11CA1CoGkGt4AJRsK2w1DgniLtYHHPt8xwwdaOHMICRiKDkCXGdZ0gedF2XPBV1KYlmlaVEwAAQgAXjAaNCjAAAyGSwCvVBSkaQS1GE8TJIDSBYPgxCLSrPF0P9O0AA0AE0SI4vD4gInoiKSSzh3I7te37eiUPoqARyYxgWLY4CoC4pdIkU-iSSEsAxIkqTZPk0KVNJYSos0u1tPopDaNxbyenQahqESWhFTTOCcIQ2cMro0ji2qAMLJnSBrNsksy2I+rOxcic3MygLgkYsdfMVfzPMChdgqgUKBMS0TooDWKFJXJSEoi5KpLS2iStQsr5gqnEDOqvEAxMxyjEawiWoctrnMo1yaO64betHSJmMG47SKCni+Mm5aZrtOb4vCtTppSwo1pwjbZy2iANszEBcngIoHNuyqOP2kIEAR16HoJQpHDPIbSOc6g6lKII8gKEHIhMMw8DAABaYGgxDbIwD0GGcLxRgmrANIMnqtQVUcQJIHrHpMLJKAYlJIWyaKHolraTJwa9ZC9qMyJCXRgVMeyyIcZkPHMcJ4nSdMcnjMDYNIGZk38llyJ4U0TI2aqzm6h55A+YFuQVmFqY8ygMX2kl1ppdNu2oC+hWlehrN3EJRGJQLdmYWaGQ9kidh7i8PtyU1gkNfhrXhSiKItnTsBXAl3spk2bXNzqG2zfVgGrb0pPSJTx5y8gAUoiFXDC4JNHB-2Euy5cckqJrvk67wLWfZlin6hb6OM1jyAMHiABrcVyhV9mddwkJUEzkH6qiUFqK5EXIkDna5xkeBuARQIh04tPWNf+7kgbilXTqfQ99SJeEgtBIWwdOTBAglBRgTNYLsWrOGSMX9PJEmliPdWecg6qVDrbJeRIV5AI4iEdBGNIjDwxpPHBC8w74PllbIhrJmJLyCC6N0uFFQtHYP-K2CCjDMIAPK2HgMwEhPs2F1D0HQHQjCjC+CWPOIWEitB6CVuVBBxgyyfxWD1ZhSjKT9USOweInMt68N0b5QoQj0AiNCPonhOAkyyKgPIjkijxEGMcWo7aVZo76QPn1Pkx9T6Ywvm8IWN8ap2gskA9+T8X46Pou-F6iTUE-3sewwBfCvLQLAT7CBPQQEwLgelDRYYcwNx6oSUh88I5YKoVLGheCeiRwYdkyAYiuSLx6FTfAdNgaxmQKQAATOY+6eiPEOKgAAYnQHMsZqDBHCNERkyRdBhneKhhoxAWixoeSSRMrkyinqMCMSY+AZjnHREsdY2xnTWGeOTJs9MYM2772AYEo+J9IKhMvhEv25sjqxMePEypSSu7aN2t-R0qyXCqPaUUvJXICmRERbA1upS37lOQakpJ1SmlNyifaR0IyFlJPuQ1DB9R6kS2oV02hctCHtMOQ8qZkBZnzKuUsmxKzJnsKkRs9priET4qOY81R8C347KoHsixqU+U+TOaYsltFrl2lubysVUynFCoUaK1l7CnE6Veeo9uHFD7BHnEKAyjhBo2OmFQLQUQihbHPn8n2kSDqmRifVEFz8wWquxUVXFqr9UNQZZEKSgzR6l2QOXWmogrkUu6ZTZAphzDF1jeXJMABmK5ipCTl0buHX2vE1xP1YGnbce4pKASuUUU2sLIgmOpiq9m7B7wtFxk2nJTNmWWJ7eygAnCOttpEexp2jQqrQQ7nneNXhABCcEgA)\r\n```js\r\ninterface UIParams: {\r\n  x: {\r\n    field: string,\r\n    scale?: ScaleType // https://vega.github.io/vega/docs/scales/#types // default band\r\n  },\r\n  y: {\r\n    field: string,\r\n    scale?: ScaleType // https://vega.github.io/vega/docs/scales/#types\r\n  }\r\n  text: {\r\n    field: string,\r\n  }\r\n  width?: number,\r\n  height?: number,\r\n  fill?: string, // color\r\n}\r\n```\r\n### Indicator\r\n\r\n#### Amount\r\n```js\r\ninterface UIParams: {\r\n   formatter: value => string, // example: formatter(3213) // US$ 3,123\r\n}\r\n```\r\n#### List\r\nUse antd [list](https://ant.design/components/list/#components-list-demo-infinite-load),\r\n\r\n```js\r\ninterface UIParams: {\r\n  avatar: (value: any) => React.Node,\r\n  title: (value: any) => React.Node,\r\n  description: (value:any) => React.Node,\r\n  content: (value: any) => React.Node\r\n}\r\n```\r\n"}}
{"actor":{"display_login":"abz53378"}}