Superset新增图表类型

前端(版本0.28)

1.新增图表文件

目录： superset/assets/src/visualizations 如新增EchartRader目录（后面目录和KEY值保持统一）

images下提供一张正方形示例图

2.配置查询项

目录：superset/assets/src/explore/controlPanels

新增echartrader.js配置文件

import { t } from '@superset-ui/translation';

export default {
    label: t('echarts_radar'),
    showOnExplore: true,
    controlPanelSections: [{
        label: t('Query'),
        expanded: true,
        //主要是下面的部分，能够找superset原有的图表模板，经过查看sql的方式看看每一个配件都是作什么的
        controlSetRows: [
            ['metrics'],
            ['columns'],
            ['adhoc_filters'],
        ]
    }]
}
复制代码

在index.js中引入新增文件并关联

3.注册新增图表项

目录 superset/assets/src/visualizations/presets

编辑LegacyChartPreset.js,映入图表并注册

import EchartRader from '../EchartRader/EchartRaderPlugin';
    
export default class LegacyChartPreset extends Preset {
    constructor() {
        super({
            name: 'Legacy charts',
            presets: [
                new CommonChartPreset(),
                new DeckGLChartPreset(),
                new HierarchyChartPreset(),
                new MapChartPreset(),
            ],
            plugins: [
                new BulletChartPlugin().configure({ key: 'bullet' }),
                new CalendarChartPlugin().configure({ key: 'cal_heatmap' }),
                new ChordChartPlugin().configure({ key: 'chord' }),
                new CompareChartPlugin().configure({ key: 'compare' }),
                new DualLineChartPlugin().configure({ key: 'dual_line' }),
                new EventFlowChartPlugin().configure({ key: 'event_flow' }),
                new ForceDirectedChartPlugin().configure({ key: 'directed_force' }),
                new HeatmapChartPlugin().configure({ key: 'heatmap' }),
                new HorizonChartPlugin().configure({ key: 'horizon' }),
                new LineMultiChartPlugin().configure({ key: 'line_multi' }),
                new PairedTTestChartPlugin().configure({ key: 'paired_ttest' }),
                new ParallelCoordinatesChartPlugin().configure({ key: 'para' }),
                new RoseChartPlugin().configure({ key: 'rose' }),
                new SankeyChartPlugin().configure({ key: 'sankey' }),
                new TimePivotChartPlugin().configure({ key: 'time_pivot' }),
                new EchartRader().configure({ key: 'echart_rader' }),
            ],
        });
    }
}

复制代码

后端

新增处理数据接口

目录 /Users/fan/incubator-superset/superset/viz.py

class echartsRadar(BaseViz):
    
    """ echarts radar viz """

    viz_type = 'echart_rader' # 对应前端名字
    verbose_name = _('echart_rader')
    is_timeseries = False

    def get_data(self, df):
        data = self.handle_js_int_overflow(
            dict(
                records=df.to_dict(orient='records'),
                columns=list(df.columns),
            ))
        columns_pre = [data['records'][i][data['columns'][0]] for i in range(len(data['records']))]
        max_num = np.max([data['records'][i][data['columns'][1]] for i in range(len(data['records']))])
        columns = [{'name': columns_pre[i],
                    'max':str(max_num)}for i in range(len(columns_pre))]
        out_data = [
            {'value': [data['records'][i][data['columns'][j+1]] for i in range(len(data['records']))],
             'name':data['columns'][j+1]}for j in range(len(data['columns'])-1)
        ]
        return [{'indicator' : columns, 'data' : out_data}]
复制代码