Superset二次开发之柱状图自定义初始化时Data Zoom数据缩放值

Superset项目柱状图来自Echarts

首先Echarts实现柱状图数据缩放初始化默认值的效果

核心代码 

设置Datazoom 的start 和end

myChart.showLoading();
$.get(
  ROOT_PATH + '/data/asset/data/obama_budget_proposal_2012.list.json',
  function (obama_budget_2012) {
    myChart.hideLoading();
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          label: {
            show: true
          }
        }
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      legend: {
        data: ['Growth', 'Budget 2011', 'Budget 2012'],
        itemGap: 5
      },
      grid: {
        top: '12%',
        left: '1%',
        right: '10%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: obama_budget_2012.names
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: 'Budget (million USD)',
          axisLabel: {
            formatter: function (a) {
              a = +a;
              return isFinite(a) ? echarts.format.addCommas(+a / 1000) : '';
            }
          }
        }
      ],
      dataZoom: [
        {
          show: true,
          start: 80,
          end: 100
        },
        {
          type: 'inside',
          start: 80,
          end: 100
        },
        {
          show: true,
          yAxisIndex: 0,
          filterMode: 'empty',
          width: 30,
          height: '80%',
          showDataShadow: false,
          left: '93%'
        }
      ],
      series: [
        {
          name: 'Budget 2011',
          type: 'bar',
          data: obama_budget_2012.budget2011List
        },
        {
          name: 'Budget 2012',
          type: 'bar',
          data: obama_budget_2012.budget2012List
        }
      ]
    };
    myChart.setOption(option);
  }
);

Superset 实现过程

superset-frontend\plugins\plugin-chart-echarts\src\Timeseries\Regular\Bar\controlPanel.tsx

新增函数createDataZoomControl  && DEFAULT_FORM_DATA 新增xAxisBoundsZoom

const {
  logAxis,
  minorSplitLine,
  truncateYAxis,
  yAxisBounds,
  xAxisBoundsZoom,
  zoomable,
  xAxisLabelRotation,
  orientation,
} = DEFAULT_FORM_DATA;
 
--------------------------------------------------
function createDataZoomControl(): ControlSetRow[] {
  return [
    [
      {
        name: 'zoomable',
        config: {
          type: 'CheckboxControl',
          label: t('Data Zoom'),
          default: zoomable,
          renderTrigger: true,
          description: t('Enable data zooming controls'),
        },
      },
    ],
    [
      {
        name: 'x_axis_bounds_zoom',
        config: {
          type: 'BoundsControl',
          label: t('Data Zoom Axis Bounds'),
          renderTrigger: true,
          default: xAxisBounds,
          description: t(
            'Bounds for the axis when Data Zoom is enabled. When left empty, the bounds are ' +
              'dynamically defined based on the min/max of the data. Note that ' +
              "this feature will only expand the axis range. It won't " +
              "narrow the data's extent.",
          ),
          visibility: ({ controls }: ControlPanelsContainerProps) =>
            Boolean(controls?.zoomable?.value),
        },
      },
    ],
  ];
}

修改 controlPanelSections controlSetRows 的逻辑

controlSetRows: [
        ...seriesOrderSection,
        ['color_scheme'],
        ...showValueSection,
        ...createDataZoomControl(),
        // [
        //   {
        //     name: 'zoomable',
        //     config: {
        //       type: 'CheckboxControl',
        //       label: t('Data Zoom'),
        //       default: zoomable,
        //       renderTrigger: true,
        //       description: t('Enable data zooming controls'),
        //     },
        //   },
        // ],

superset-frontend\plugins\plugin-chart-echarts\src\Timeseries\types.ts

新增 xAxisBoundsZoom

export type EchartsTimeseriesFormData = QueryFormData 新增以下内容
 
xAxisBoundsZoom: [number | undefined | null, number | undefined | null];

superset-frontend\plugins\plugin-chart-echarts\src\Timeseries\constants.ts

export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = 新增 xAxisBoundsZoom

xAxisBoundsZoom: [null, null],

核心逻辑

superset-frontend\plugins\plugin-chart-echarts\src\Timeseries\transformProps.ts

EchartsTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData }; 内容里新增以下代码
xAxisBoundsZoom,
 
 
--------------------------------------------
let [minZoom, maxZoom] = (xAxisBoundsZoom || []).map(parseYAxisBound);
if ((contributionMode === 'row' || isAreaExpand) && stack) {
  if (minZoom === undefined) minZoom = 0;
  if (maxZoom === undefined) maxZoom = 100;
} else if (logAxis && min === undefined && minPositiveValue !== undefined) {
  minZoom = calculateLowerLogTick(minPositiveValue);
}
 
-------------------------------------------------
dataZoom: zoomable
      ? [
          {
            type: 'slider',
            // start: TIMESERIES_CONSTANTS.dataZoomStart,
            start: minZoom,
            // end: TIMESERIES_CONSTANTS.dataZoomEnd,
            end: maxZoom,
            bottom: TIMESERIES_CONSTANTS.zoomBottom,
          },
        ]
      : [],

效果展示