内网环境下的Superset自定义组件——pypi版本的组件添加

coder希普

于 2024-08-23 16:54:54 发布

阅读量534

点赞数 17

文章标签：前端前端框架

本文链接：https://blog.csdn.net/weixin_44468172/article/details/141464767

版权

前面一个专栏介绍了前后端服务器的搭建，这一章讲一下通过pip安装的superset如何添加组件。
内网环境下的Superset自定义组件——环境搭建-CSDN博客

目标一：搭建Superset前后端环境，能正确运行；

目标二：在Superset中添加自定义组件，能在Superset中进行添加删除等操作；

目标三：封装Superset仪表盘接入sdk，支持其他系统可以直接展示Superset生成的仪表盘。

1、下载官方模板

路径：/superset-master/superset-frontend/plugins

下载superset自定义组件模板

https://github.com/apache-superset/superset-ui-plugins-template/tree/master/packages

其中superset-ui-preset-chart-dummies是在单个文件夹中定义多个组件的模板，直接下载到plugins路径下打开，将文件夹更改成需要的名称，在其中的src路径下可以进行组件的添加

images/thumbnail.png是Supserset中显示的对应图表的缩略图。

2、配置 index.ts

创建图表的索引和介绍

import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
import transformProps from './transformProps';
import thumbnail from './images/thumbnail.png';
import controlPanel from './controlPanel';

const metadata = new ChartMetadata({
  name: t('number chart'),
  thumbnail,
  category: t('antv'),
  description: t('antv 数字'),
  tags: [t('数字'), t('test number')],
});

export default class NumberPlugin extends ChartPlugin {
  constructor() {
    super({
      loadChart: () => import('./Number'),
      metadata,
      transformProps,
      controlPanel,
    });
  }
}

3、配置 controlPanel.tsx

图表创建后Superset中的前端控件，能自定义需要获取的参数

import { t } from '@superset-ui/core';
import {
  ControlPanelConfig,
  D3_FORMAT_DOCS,
  D3_FORMAT_OPTIONS,
  sharedControls,
} from '@superset-ui/chart-controls';

const config: ControlPanelConfig = {
  controlPanelSections: [
    {
      label: t('Query'),
      expanded: true,
      controlSetRows: [
        [
          {
            name: 'columns',
            config: {
              ...sharedControls.columns,
              label: t('Column'),
            },
          }    // 数据集数据
        ],
        [
          {
            name: 'big_number',
            config: {
              type: 'TextControl',
              freeForm: true,
              label: t('数据字段名'),
              renderTrigger: true,
              default: 'total_customer',
              description: t(
                '默认字段名big_number',
              )
            },
          }, // 自定义需要额外获取的字段
        ]
      ],
    },
    {
      label: t('Chart Options'),
      expanded: true,
      controlSetRows: [
        [
          {
            name: 'number_format',
            config: {
              type: 'SelectControl',
              freeForm: true,
              label: t('Number format'),
              renderTrigger: true,
              default: 'SMART_NUMBER',
              choices: D3_FORMAT_OPTIONS,
              description: D3_FORMAT_DOCS,
            },
          }, // 其他选择性填写的自定义数据段
        ]
      ],
    }
  ],
  formDataOverrides: formData => ({
    ...formData,
  }),
};

export default config;

4、创建 buildQuery.ts

将Superset可视化界面中得到的数据构建成Query进行数据传输模板中不存在buildQuery.ts，需要自己创建

import { buildQueryContext, QueryFormData } from '@superset-ui/core';

export default function buildQuery(formData: QueryFormData) {
  return buildQueryContext(formData, baseQueryObject => [baseQueryObject]);
}

5、配置 transfromProps.ts

从封装好的chartProps中获得客户端与数据库的数据，并进行相应的处理，方便后续的获取，数据基本都存储在chartProps的queriesData和formData中

import { 
  ChartProps, 
} from '@superset-ui/core';

export default function transformProps(chartProps: ChartProps) {
  const { width, height, formData, queriesData} = chartProps;
  const data = queriesData[0].data[0];
  const bigNumber = data[formData.bigNumber];

  return {
    width,
    height,
    bigNumber,
  };
}

6、配置 chart.tsx

根据拿到的数据进行前端图表的构建

function NumberChart(props: NumberChartProps) {
  let { width,height, bigNumber,  weekly_growth, monthly_growth, new_user, new_user_this_month, new_user_this_year} = props
  // 拿到数据transfromProps中定义传输的数据
  const number = defaultNumberFormatter(bigNumber)
  const weeklyPer = (parseFloat(weekly_growth*100 + '')).toFixed(2) + '%' 
  const monthlyPer = (parseFloat(monthly_growth*100 + '')).toFixed(2) + '%'
  const isRed = (val:number) => {
    if(val>=0) {
      return true
    }
    return false
  }
  const weekClassName = isRed(weekly_growth) ? 'data_value data_red': 'data_value data_green'
  const monthClassName = isRed(monthly_growth) ? 'data_value data_red': 'data_value data_green'
  const StyledDiv = styled.div`
    width: ${width}px;
    height:${height}px;
    text-align: left;
    .big_number {
      height: 48px;
      font-size: 30px;
      font-weight: 400;
      color: #333333;
      line-height: 42px;
    }
    /* css样式 */
  `
  let userPanel = null
  
  return (<StyledDiv>
  <div className='big_number bl_top'>
    {number}
  </div>
  </StyledDiv>)
  // 返回的图表html
} 
export default NumberChart

7、添加依赖与注册

在superset-frontend\package-lock.json中添加对应依赖

"packages":{
  "":{
    "@superset-ui/plugin-chart-antv": "file:./plugins/plugin-chart-antv",
  }
}

在superset-frontend\plugins\plugin-chart-antv\package.json中添加对应的依赖

"dependencies": {
    "@superset-ui/plugin-chart-antv": "file:./plugins/plugin-chart-antv",
}

在superset-frontend\package.json中添加对应的依赖

"dependencies": {
    "@superset-ui/plugin-chart-antv": "file:./plugins/plugin-chart-antv",
}

在superset-frontend\plugins\plugin-chart-antv\src\index.ts添加组件

export { default as AntVNumberPlugin } from './Number';

在superset-frontend\src\visualizations\presets\MainPreset.js进行注册

import { 
  AntVNumberPlugin,
} from '@superset-ui/plugin-chart-antv';

export default class MainPreset extends Preset {
  constructor() {
   super({
      plugins: [
        new AntVNumberPlugin().configure({key: 'antv_number'}),
      ],
    });
  }
}

8、重建前端资源

组件开发完之后，需要重新 npm run build 将前端配置覆盖到生产环境。

由于项目的生成前端资源的prettier要求比较严格，会导致构建不成功，可以在

superset-frontend\webpack.config.js 中注释掉检测的代码

  // plugins.push(
  //   // runs type checking on a separate process to speed up the build
  //   new ForkTsCheckerWebpackPlugin({
  //     eslint: {
  //       files: './{src,packages,plugins}/**/*.{ts,tsx,js,jsx}',
  //       memoryLimit: 4096,
  //       options: {
  //         ignorePath: './.eslintignore',
  //       },
  //     },
  //   }),
  // );

build完毕后，如果项目搭建没有问题，新的前端资源会直接覆盖原有的前端资源，superset run -h 0.0.0.0 -p 8088 --with-threads --reload 重启Superset服务器后即可在生产环境看到自定义开发的组件。

如果没发现自己的自定义组件，则需要手动复制黏贴覆盖原本的前端文件。新建的前端文件会放在superset-master\superset\static\assets中，需要将该文件夹复制并覆盖掉生产环境的assets文件夹，一般在superset-master\venv\Lib\site-packages\superset\static\ 路径下。重启服务也可以使用自己的自定义组件。