[Superset] Slice Visualization Type 추가하기

Slice Visualiation Type 중 filter_box를 변경하기 위해 Visualization Type을 새로 추가하였다.

기존 filter_box는 변경하지 않고 새로운 Type을 추가하는 방법을 택하였다.

기존 filter_box 형태는 Date Filter(Since, Until 필터)와 Filter Controls 가 아래의 그림과 같이 출력된다.

superset/vis.py 에 class를 추가한다.

class FilterBoxViz(BaseViz):

FilterBoxViz를 복사하여 사용한다. 

복사 후 이름을 원하는 대로 변경한다.

class CustomFilterBoxViz(BaseViz):

    """A multi filter, multi-choice filter box to make dashboards interactive"""

    viz_type = 'custom_filter_box'
    verbose_name = _('Filters')
    is_timeseries = False
    credits = 'a <a href="https://github.com/airbnb/superset">Superset</a> original'

    def query_obj(self):
        qry = super(CustomFilterBoxViz, self).query_obj()
        groupby = self.form_data.get('groupby')
        if len(groupby) < 1 and not self.form_data.get('date_filter'):
            raise Exception(_('Pick at least one filter field'))
        qry['metrics'] = [
            self.form_data['metric']]
        return qry

    def get_data(self, df):
        qry = self.query_obj()
        filters = [g for g in self.form_data['groupby']]
        d = {}
        for flt in filters:
            qry['groupby'] = [flt]
            df = super(CustomFilterBoxViz, self).get_df(qry)
            d[flt] = [{
                'id': row[0],
                'text': row[0],
                'filter': flt,
                'metric': row[1]}
                for row in df.itertuples(index=False)
            ]
        return d

위와 같이 추가하였다.

그러면 Add Slice 시 custom_filter_box 을 선택할 수 있다.

superset/static/assets/javascripts/explore/stores/visType.js 에 아래 내용 추가(filter_box 복사 후 사용 한다.)

custom_filter_box: {
  label: t('Custom Filter Box'),
  controlPanelSections: [
    {
      label: t('Query'),
      expanded: true,
      controlSetRows: [
        ['groupby'],
        ['metric'],
        ['custom_date_filter', 'instant_filtering'],
      ],
    },
  ],
  controlOverrides: {
    groupby: {
      label: t('Filter controls'),
      description: t(
        'The controls you want to filter on. Note that only columns ' +
        'checked as "filterable" will show up on this list.'),
      mapStateToProps: state => ({
        options: (state.datasource) ? state.datasource.columns.filter(c => c.filterable) : [],
      }),
    },
  },
},

superset/static/assets/visualizations/filter_box.jsx , filter_box.css 를 복사하여 custom_filter_box.jsx, custom_filter_box.css 이름으로 같은 위치에 붙여넣기 한다.

superset/static/assets/visualizations/main.js 에 아래 내용을 추가한다.

custom_filter_box: require('./custom_filter_box.jsx'),

superset/static/assets/visualizations/custom_filter_box.jsx 를 수정한다.

render 하는 부분을 아래와 같이 변경해서 Since, Until, Filter Controls가 일자 형태로 출력되도록 한다.(react 를 잘 모르기 때문에...막 고쳤다.)

//Custom Code
import Datetime from 'react-datetime';
import ControlHeader from '../javascripts/explore/components/ControlHeader';

return (
  <div className="scrollbar-container">
    <div className="scrollbar-content">
      <div className="custom-div-filterbox">
      <div className="m-b-5">
          From
          <Datetime
            inputProps={{ className: 'form-control input-sm' }}
            dateFormat="YYYY-MM-DD"
            timeFormat={false}
            onChange={this.changeFilter.bind(this, since)}
            value={this.state.selectedValues[since]}
          />
        </div>

        <div className="m-b-5">
          To
          <Datetime
            inputProps={{ className: 'form-control input-sm' }}
            dateFormat="YYYY-MM-DD"
            timeFormat={false}
            onChange={this.changeFilter.bind(this, until)}
            value={this.state.selectedValues[until]}
          />
        </div>
        {filters}


      {!this.props.instantFiltering &&
        <div className="m-b-5">
        <Button className="customBtnApply"
          bsSize="small"
          bsStyle="primary"
          onClick={this.clickApply.bind(this)}
          disabled={!this.state.hasChanged}
        >
          Apply
        </Button>
        </div>
      }
      </div>
    </div>
  </div>
);

이렇게 하면 일자형태로 filter_box가 출력된다...!