superset 图表种类扩展

cd superset/assets
npm install -d
npm run dev

class TimeSeriesScatterViz(BaseViz):
    viz_type = 'time_series_scatter'
    verbose_name = "Time Series Scatter"
    sort_series = False
    is_timeseries = True
 
    def query_obj(self):
        d = super(TimeSeriesScatterViz, self).query_obj()
        fd = self.form_data #form_data中包含界面左侧组件内容
 
        if not fd.get('all_columns'): #这个字段对应×××组件，不为空
            raise Exception('Choose Columns')
 
        if fd.get('all_columns'):
            d['columns'] = fd.get('all_columns') # all_columns是左侧组件名，后面会提到
            # 这里的例子非常简单，其实可以做很多事
        return d
 
    def get_data(self, df):
        # df是pandas的DataFrame类型
        # 这里的例子非常简单，其实可以做很多事
        data = np.array(df).tolist() #假设数据很简单，不需要做别的处理
        # 如果除了绘图用的数据还有别的信息，可以构造一个字典来返回
        # data = {'plot_data':plot_data,'other_info':other_info}
        return data

// ReactTimeSeriesScatter.js
import reactify from '@superset-ui/chart/esm/components/reactify';
import Component from './TimeSeriesScatter';

export default reactify(Component);

// TimeSeriesScatter.js
import echarts from 'echarts';
import d3 from 'd3';
import PropTypes from 'prop-types';

const propTypes = {
  data: PropTypes.array,
  width: PropTypes.number,
  height: PropTypes.number,
}; //检查类型，其中data包含viz.py中返回的数据，width和height为图表宽高

function TimeSeriesScatter(element, props){
    const {
        width,
        height,
        data,
    } = props;
    // console.log(data) 可以检查一下data内容
    const div = d3.select(element, props);
    var html = '<div id="time_series_scatter" style="height:' + height + 'px; width:' + width + 'px;"></div>';
    div.html(html); //给echarts添加div
    var myChart = echarts.init(document.getElementById('time_series_scatter')); //初始化echarts，接下来的就是echarts内容了
    var option = {
    tooltip: {
        formatter: '{b}: {c}'
    },
    xAxis: {
        type: 'time',
        scale: true
    },
    yAxis: {
        type: 'value',
        scale: true
    },
    series: [{
        type: 'scatter',
        symbolSize: 20,
    }, {
        type: 'scatter',
        data: data,
    }]
    };

    myChart.setOption(option);
}

TimeSeriesScatter.displayName = 'Time Series Scatter';
TimeSeriesScatter.propTypes = propTypes;

export default TimeSeriesScatter;

// TimeSeriesScatterChartPlugin.js
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('Time Series Scatter'),
  description: '',
  credits: ['http://echarts.baidu.com/examples/editor.html?c=scatter-effect'],
  thumbnail,
});

export default class TimeSeriesScatterChartPlugin extends ChartPlugin {
  constructor() {
    super({
      metadata,
      transformProps,
      loadChart: () => import('./ReactTimeSeriesScatter.js'),
    });
  }
}

// transformProps.js
export default function transformProps(chartProps) {
  const { width, height, payload } = chartProps;
  //console.log(chartProps); 可以用来验证数据是否正确
  return {
    data: payload.data,
    width,
    height,
  };
}

//superset\assets\src\explore\controlPanels\TimeSeriesScatter.js
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'],  //使用的组件名
              ['row_limit', null],
          ],
      },
  ],
};

//重新编译
npm run dev
//重启服务
gunicorn -w 2 --timeout 120 -b  0.0.0.0:8000 --limit-request-line 0 --limit-request-field_size 0 --reload superset:app