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}]
複製代碼