#[UIC-2127]:added point chart support with annotation line (#254)

* feat(visualization):added point chart support

added point chart support

UIC-2127

* feat(visualization):make annotation props configurable

make annotation props configurable

UIC-2127

* feat(visualization):make annotation props configurable

make annotation props configurable

UIC-2127

superset/assets/package.json

@@ -65,6 +65,8 @@
     "bootstrap": "^3.3.6",
     "bootstrap-slider": "^10.0.0",
     "brace": "^0.11.1",
+    "chart.js": "^2.8.0",
+    "chartjs-plugin-annotation": "^0.5.7",
     "classnames": "^2.2.5",
     "crypto-js": "3.1.9-1",
     "d3": "^3.5.17",

superset/assets/src/explore/controlPanels/PointChart.js

@@ -0,0 +1,86 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { t } from '@superset-ui/translation';
+
+export default {
+  controlPanelSections: [
+    {
+      label: t('NOT GROUPED BY'),
+      description: t('Use this section if you want to query atomic rows'),
+      expanded: true,
+      controlSetRows: [
+        ['all_columns_x'],
+        ['all_columns_y'],
+        ['row_limit', null],
+      ],
+    },
+    {
+      label: t('Query'),
+      expanded: true,
+      controlSetRows: [
+        ['adhoc_filters'],
+      ],
+    },
+    {
+      label: t('Chart Options'),
+      expanded: true,
+      controlSetRows: [
+        ['show_markers'],
+        ['treemap_ratio'],
+        ['fill_color_picker'],
+        ['stroke_color_picker'],
+        ['color_picker'],
+        ['target_color_picker'],
+      ],
+    },
+  ],
+  controlOverrides: {
+    show_markers: {
+      label: t('Show Annotation Line'),
+      default: true,
+      description: t('Show annotation line on x-axis at given Annotation Line Value'),
+    },
+    treemap_ratio: {
+      label: t('Annotation Line Value'),
+      default: 1,
+      isInt: true,
+      description: t('Set annotation line value'),
+    },
+    fill_color_picker: {
+      label: t('Annotation Line Color'),
+      default: { r: 0, g: 0, b: 0, a: 1 },
+      description: t('Set Annotation Line Color'),
+    },
+    stroke_color_picker: {
+      label: t('Axis Color'),
+      default: { r: 0, g: 0, b: 0, a: 1 },
+      description: t('Set Axis Color'),
+    },
+    color_picker: {
+      label: t('Axis Label Color'),
+      default: { r: 0, g: 0, b: 0, a: 1 },
+      description: t('Set Axis Label Color'),
+    },
+    target_color_picker: {
+      label: t('Point Fill Color'),
+      default: { r: 255, g: 0, b: 0, a: 1 },
+      description: t('Set Point Fill Color'),
+    },
+  },
+};

superset/assets/src/explore/controlPanels/index.js

@@ -72,6 +72,7 @@ import DeckPolygon from './DeckPolygon';
 import DeckScatter from './DeckScatter';
 import DeckScreengrid from './DeckScreengrid';
 import LeafletMap from './LeafletMap';
+import PointChart from './PointChart';
 
 export const controlPanelConfigs = {
   area: Area,
@@ -122,7 +123,8 @@ export const controlPanelConfigs = {
   deck_polygon: DeckPolygon,
   deck_scatter: DeckScatter,
   deck_screengrid: DeckScreengrid,
-  leaflet_map: LeafletMap
+  leaflet_map: LeafletMap,
+  chartjs_point:PointChart,
 };
 
 export default controlPanelConfigs;

superset/assets/src/visualizations/Chartjs/Chartjs.css

@@ -0,0 +1,4 @@
+
+.chartjs-size-monitor{
+    overflow: auto !important;
+}

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

@@ -0,0 +1,188 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+/* eslint-disable no-param-reassign */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { rgb } from 'd3';
+import 'chart.js';
+import 'chartjs-plugin-annotation';
+import './Chartjs.css'
+
+const propTypes = {
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    data: PropTypes.arrayOf(PropTypes.object),
+    xField:PropTypes.string,
+    yField:PropTypes.string,
+    showAnnotationLine:PropTypes.bool,
+    annotationLineValue:PropTypes.number,
+    axisColor :PropTypes.string,
+    labelColor :PropTypes.string,
+    fillColor :PropTypes.string,
+    annotationLineColor :PropTypes.string,
+  };
+  const defaultProps = {
+    width: '100%',
+    height: '100%',
+    data: undefined,
+    xField: undefined,
+    yField:undefined,
+    showAnnotationLine:true,
+    annotationLineValue:1,
+    axisColor :'black',
+    labelColor :'black',
+    fillColor :'red',
+    annotationLineColor :'black',
+  };
+
+  class ChartJSVis extends React.PureComponent {
+    constructor(props) {
+      super(props);
+    }
+
+    renderChart(){
+        var ctx = document.getElementById('chartjs-line-cvs').getContext('2d');
+        var config = this.createConfig();
+        // console.log(config);
+        new Chart(ctx, config);
+    }
+
+    createConfig(){
+        const {width,height,data,xField,yField,showAnnotationLine,annotationLineValue,axisColor,labelColor,fillColor,annotationLineColor} = this.props
+        let pointStyle = 'circle';
+        let annotationLineMode= "vertical";
+        let labels =[];
+        let chartData = [];
+        data.forEach(element => {
+            labels.push(element[yField]);
+            chartData.push(
+                {
+                    x: element[xField],
+                    y: element[yField]
+                }
+            )
+
+        });
+        return {
+            type: 'line',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: "",
+                    fill: true,
+                    backgroundColor: fillColor,
+                    borderColor: fillColor,
+                    pointRadius: 7,
+                    pointHoverRadius: 10,
+                    data: chartData
+                }]
+            },
+            options: {
+                scales: {
+                    xAxes: [{
+                        type: 'linear',
+                        position: 'bottom',
+                        gridLines: {
+                            display: true,
+                            drawBorder: true,
+                            drawOnChartArea: false,
+                            color: axisColor
+
+                        },
+                        ticks: {
+                            display: true,
+                            fontColor: labelColor,
+                          },
+                    }],
+                    yAxes: [{
+                        type: 'category',
+                        position: 'left',
+                        gridLines: {
+                            display: true,
+                            drawBorder: true,
+                            drawOnChartArea: false,
+                            color: axisColor
+
+                        },
+                        ticks: {
+                            display: true,
+                            fontColor: labelColor,
+                          },
+                    }]
+                },
+                responsive: true,
+                showLines: false,
+                title: {
+                    display: true,
+                    text: ''
+                },
+                legend: {
+                    display: false
+                },
+                elements: {
+                    point: {
+                        pointStyle: pointStyle,
+                    }
+                },
+                annotation: {
+                    annotations: this.getAnnotations(showAnnotationLine,annotationLineValue,annotationLineColor,annotationLineMode)
+                }
+
+            },
+
+        }
+    }
+
+    getAnnotations(show, value, color,mode) {
+        if (!show) {
+            return []
+        }
+        return [{
+            drawTime: "beforeDatasetsDraw",
+            id: "hline",
+            type: "line",
+            mode: mode,
+            scaleID: "x-axis-0",
+            value: value,
+            borderColor: color,
+            borderWidth: 2,
+            borderDash: [2, 2],
+        }
+        ]
+    }
+
+    render() {
+        let style = {display: 'block',height:this.props.height,width:this.props.width}
+        return (
+            <div style ={style}>
+                <canvas id="chartjs-line-cvs" className="chartjs-render-monitor"
+                   style={style}></canvas>
+            </div>
+        )
+    }
+
+    componentDidMount() {
+        this.renderChart();
+    }
+}
+
+ChartJSVis.propTypes = propTypes;
+ChartJSVis.defaultProps = defaultProps;
+
+export default ChartJSVis;

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

@@ -0,0 +1,39 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { t } from '@superset-ui/translation';
+import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
+import transformProps from './transformProps';
+import thumbnail from './images/thumbnail.png';
+
+const metadata = new ChartMetadata({
+  name: t('Point Chart'),
+  description: '',
+  credits: ['https://www.chartjs.org/'],
+  thumbnail,
+});
+
+export default class ChartjsChartPlugin extends ChartPlugin {
+  constructor() {
+    super({
+      metadata,
+      transformProps,
+      loadChart: () => import('./Chartjs.jsx'),
+    });
+  }
+}

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

@@ -0,0 +1,40 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+export default function transformProps(chartProps) {
+    const { width, height, formData, payload } = chartProps;
+    const getrgb =(color)=> {
+        const { r, g, b } = color;
+        const alpha = 1;
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+    return {
+      width,
+      height,
+      data: payload.data.records,
+      xField:formData.allColumnsX,
+      yField:formData.allColumnsY,
+      showAnnotationLine:formData.showMarkers,
+      annotationLineValue:formData.treemapRatio,
+      axisColor :getrgb(formData.strokeColorPicker),
+      labelColor :getrgb(formData.colorPicker),
+      fillColor :getrgb(formData.targetColorPicker),
+      annotationLineColor :getrgb(formData.fillColorPicker),
+    };
+  }
+