superset dashboard模块新增背景色样式

  

该修改基于superset 0.37，其他版本应该类似。

编辑superset的dashboard时，可以选择行或者列，或者部分区域的背景色，自带的只有两种：透明和白色，如下图：

有时候不能满足需求，可以新增自己的样式，比如增加红色（其他样色类似），具体操作步骤如下：

1、添加css样式类

a）superset-frontend\src\dashboard\stylesheets\builder.less

.background--white {
  background-color: @lightest;
}

/*该部分为新增样式*/
.background--red, .background--red .dashboard-component-chart-holder{
	background-color: #FA65AF;
	border-radius: 10px !important;
	color: #fff;
}

b）superset-frontend\src\dashboard\stylesheets\popover-menu.less

/* background style menu */
.background-style-option {
  display: inline-block;

  &:before {
    content: '';
    width: 1em;
    height: 1em;
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
  }

  &.background--white {
    padding-left: 0;
    background: transparent;

    &:before {
      background: @lightest;
      border: 1px solid @gray-light;
    }
  }

  /*该部分为新增样式*/
  &.background--red {
    padding-left: 0;

    &:before {
      background: @lightest;
      border: 1px solid @gray-light;
    }
  }


  /* Create the transparent rect icon */
  &.background--transparent:before {
    background-image: linear-gradient(45deg, @gray 25%, transparent 25%),
      linear-gradient(-45deg, @gray 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, @gray 75%),
      linear-gradient(-45deg, transparent 75%, @gray 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
  }
}

2、修改js文件，增加样式选项

a）superset-frontend\src\dashboard\util\constants.ts

// Style types
export const BACKGROUND_WHITE = 'BACKGROUND_WHITE';
export const BACKGROUND_TRANSPARENT = 'BACKGROUND_TRANSPARENT';
//新增名称
export const BACKGROUND_RED = 'BACKGROUND_RED';

b）superset-frontend\src\dashboard\util\backgroundStyleOptions.ts

import { BACKGROUND_TRANSPARENT, BACKGROUND_WHITE, BACKGROUND_RED } from './constants';

export default [
  {
    value: BACKGROUND_TRANSPARENT,
    label: t('Transparent'),
    className: 'background--transparent',
  },
  {
    value: BACKGROUND_WHITE,
    label: t('White'),
    className: 'background--white',
  },
  {
    value: BACKGROUND_RED,
    label: t('Red'),
    className: 'background--red',
  },
];

其他样式可以根据具体情况调整。