{"action":"opened","issue":{"url":"https://api.github.com/repos/rrag/react-stockcharts/issues/149","repository_url":"https://api.github.com/repos/rrag/react-stockcharts","labels_url":"https://api.github.com/repos/rrag/react-stockcharts/issues/149/labels{/name}","comments_url":"https://api.github.com/repos/rrag/react-stockcharts/issues/149/comments","events_url":"https://api.github.com/repos/rrag/react-stockcharts/issues/149/events","html_url":"https://github.com/rrag/react-stockcharts/issues/149","id":180224183,"number":149,"title":"next branch - 0.6 - forcibly call drawOnNextTick for GenericChartComponent to repaint","user":{"login":"itsjimbo","id":11524813,"avatar_url":"https://avatars.githubusercontent.com/u/11524813?v=3","gravatar_id":"","url":"https://api.github.com/users/itsjimbo","html_url":"https://github.com/itsjimbo","followers_url":"https://api.github.com/users/itsjimbo/followers","following_url":"https://api.github.com/users/itsjimbo/following{/other_user}","gists_url":"https://api.github.com/users/itsjimbo/gists{/gist_id}","starred_url":"https://api.github.com/users/itsjimbo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/itsjimbo/subscriptions","organizations_url":"https://api.github.com/users/itsjimbo/orgs","repos_url":"https://api.github.com/users/itsjimbo/repos","events_url":"https://api.github.com/users/itsjimbo/events{/privacy}","received_events_url":"https://api.github.com/users/itsjimbo/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-09-30T05:40:57Z","updated_at":"2016-09-30T05:40:57Z","closed_at":null,"body":"I like the changes for generalization in GenericComponent and GenericChartComponent you have made.\r\n\r\nI'm working on a component that is very similar to EdgeIndicator, except this bar moves in realtime.  It seems to work, and I prefer to use canvas instead of svg for performance reasons, but I am having trouble clearing the canvas without an event such as a mouse move or pan event.  \r\n(screenshot below)\r\n\r\nThe canvas is not being cleared which stems from here...\r\nhttps://github.com/rrag/react-stockcharts/blob/next/src/lib/GenericComponent.jsx#L58-L112\r\n\r\nAny suggested way to forcibly drawOnNextTick so the canvas can repaint?\r\n\r\n```\r\n\r\nimport { drawOnCanvas, renderSVG } from '../react-stockcharts/lib/coordinates/EdgeCoordinateV2'\r\n\r\nclass RealTimeEdgeIndicator extends Component {\r\n...\r\n// this class subscribes to a event listener, sets the state of the databar objectwhen\r\n// a databar arrives at some moment in time \r\n// the databar has properties open,high,low,close,volume\r\ndataListenerMethod(databar){\r\n  this.setState({ databar} )\r\n}\r\n\r\n drawOnCanvas(ctx, moreProps) {\r\n    var {databar}=this.state\r\n    var edge = helper(this.state,this.props, this.context, moreProps);\r\n    var props = {\r\n      ...this.props,\r\n      ...edge,\r\n    };\r\n\r\n    // Draw an OHLC bar (really just a HL bar), but not part of the data set yet..\r\n    if (databar)\r\n    {\r\n      var { xAccessor } = this.context;\r\n      var { yAccessor} = this.props;\r\n      var { xScale, chartConfig: { yScale }, plotData } = moreProps;\r\n      var db=[yScale(databar.low),yScale(databar.high)]\r\n      var item =  last(plotData, yAccessor)\r\n      var xValue = xAccessor(item)+1\r\n      var x1 = Math.round(xScale(xValue))\r\n      \r\n      ctx.strokeStyle = hexToRGBA(\"#0000FF\", 0.8);\r\n      ctx.beginPath();\r\n      ctx.moveTo(x1, db[0]);\r\n      ctx.lineTo(x1 , db[1]);\r\n      ctx.closePath();\r\n      ctx.stroke();\r\n    }\r\n\r\n    drawOnCanvas(ctx, props);\r\n  }\r\n\r\nrender() {\r\n    return <GenericChartComponent\r\n      canvasToDraw={getAxisCanvas}\r\n      canvasDraw={this.drawOnCanvas}\r\n      svgDraw={this.renderSVG}\r\n      clip={false}\r\n      edgeClip={true}\r\n      drawOnPan={true}\r\n      drawOnMouseMove={true}\r\n      debug={false}\r\n    />;\r\n  }\r\n\r\n```\r\n\r\n\r\n\r\n![image](https://cloud.githubusercontent.com/assets/11524813/18981599/a707fa9e-8694-11e6-9c5c-6a87659ec101.png)\r\n"}}
{"actor":{"display_login":"itsjimbo"}}