fix(pointchart):fixed by setting unique id for each point chart (#256)

fixed by setting unique id for each point chart

UIC-2161

superset/assets/src/visualizations/Chartjs/Chartjs.jsx

@@ -36,6 +36,7 @@ const propTypes = {
     labelColor :PropTypes.string,
     fillColor :PropTypes.string,
     annotationLineColor :PropTypes.string,
+    sliceId: PropTypes.number.isRequired,
   };
   const defaultProps = {
     width: '100%',
@@ -49,15 +50,20 @@ const propTypes = {
     labelColor :'black',
     fillColor :'red',
     annotationLineColor :'black',
+    sliceId: undefined
   };
 
   class ChartJSVis extends React.PureComponent {
     constructor(props) {
       super(props);
     }
 
+    getId(){
+        return 'chartjs-point-chart-'+this.props.sliceId;
+    }
+
     renderChart(){
-        var ctx = document.getElementById('chartjs-line-cvs').getContext('2d');
+        var ctx = document.getElementById(this.getId()).getContext('2d');
         var config = this.createConfig();
         // console.log(config);
         new Chart(ctx, config);
@@ -169,9 +175,10 @@ const propTypes = {
 
     render() {
         let style = {display: 'block',height:this.props.height,width:this.props.width}
+        let id = this.getId()
         return (
             <div style ={style}>
-                <canvas id="chartjs-line-cvs" className="chartjs-render-monitor"
+                <canvas id={id} className="chartjs-render-monitor"
                    style={style}></canvas>
             </div>
         )

superset/assets/src/visualizations/Chartjs/transformProps.js

@@ -35,6 +35,7 @@ export default function transformProps(chartProps) {
       labelColor :getrgb(formData.colorPicker),
       fillColor :getrgb(formData.targetColorPicker),
       annotationLineColor :getrgb(formData.fillColorPicker),
+      sliceId: formData.sliceId,
     };
   }