superset二次开发 前端代码迁移

superset-ui(superset前端库)

前端代码迁移，例：将饼图的代码迁移到本地

1、查看superset\superset-frontend\src\visualizations\presets\MainPreset.js

找到{ key: ‘pie’ } => EchartsPieChartPlugin => ‘@superset-ui/plugin-chart-echarts’

2、进入superset\superset-frontend\node_modules@superset-ui

找到plugin-chart-echarts文件夹 => 将其剪切到本地 => 修改MainPreset.js中的引入路径
如：’…/plugin-chart-echarts’（visualizations文件夹下）

3、修改superset\superset-frontend\package.json文件

删除"@superset-ui/plugin-chart-echarts": “^0.17.53”

4、完成对饼图的迁移

现在plugin-chart-echarts中的图表均支持二次开发

对饼图进行二次开发-添加点击事件

1、visualizations\plugin-chart-echarts\Pie\controlPanel.js

controlPanelSections中添加新的controls，参考如下：

{
    label: t('Query'),
    expanded: true,
    controlSetRows: [[{
      name: 'groupby',
      override: {
        type: 'GroupByControl',
        mapStateToProps: state => {
          const { datasource } = state;
          return {
            columns: datasource ? datasource.columns : [],
            savedMetrics: datasource ? datasource.metrics : [],
            datasourceType: datasource && datasource.type,
          };
        },
      }
    }], ['metric'], ['adhoc_filters'], ['row_limit'], [{
      name: 'sort_by_metric',
      config: {
        default: true,
        type: 'CheckboxControl',
        label: t('Sort by metric'),
        description: t('Whether to sort results by the selected metric in descending order.')
      }
    }], [{ // 此为新增代码块
      name: 'script',
      config: {
        type: 'TextAreaControl',
        label: 'Event Script',
        description: t(
          'Put your code here, for example："alert(JSON.stringify(element, null, 4))"',
        ),
        default: '',
      },
    }]]
  }

2、visualizations\plugin-chart-echarts\Pie\EchartsPie.js

const eventHandlers = {
    click: props => {
      const {
        name
      } = props;
      const values = Object.values(selectedValues);

      if (values.includes(name)) {
        handleChange(values.filter(v => v !== name));
      } else {
        handleChange([...values, name]);
      }

      if (formData.script && formData.script.trim()) { // 此为新增代码块
        const element = props;
        console.log('element:', element);
        eval(formData.script); // 执行不被信任的脚本，待引入沙盒安全机制 sandbox
      }
      
    }
  }

3、重新启动前后端服务，清除缓存刷新页面即可