Creating slices

[EstebanMonge]

Hello:

I have problems to "create" slices... I am using Debian GNU/Linux, I follow this steps:
Creating develop environment:

cd /opt
git clone https://github.com/airbnb/caravel.git 
cd /opt/caravel
python setup.py develop
fabmanager create-admin --app caravel
cd /opt/caravel/caravel/bin
./caravel db upgrade
./caravel init
./caravel load_examples
cd /opt/caravel/caravel/assets
npm install
npm run prod

I made a lot of test but I follow this steps to add a slice:

cd /opt/caravel/caravel
vim viz.py

I copied big_number_total example and renamed to gauge:

class GaugeViz(BaseViz):

    """Put emphasis on a single metric with this big number viz"""

    viz_type = "gauge"
    verbose_name = _("Gauge")
    credits = 'a <a href="https://github.com/airbnb/caravel">Caravel</a> original'
    is_timeseries = False
    fieldsets = ({
        'label': None,
        'fields': (
            'metric',
            'subheader',
            'y_axis_format',
        )
    },)
    form_overrides = {
        'y_axis_format': {
            'label': _('Number format'),
        }
    }

    def reassignments(self):
        metric = self.form_data.get('metric')
        if not metric:
            self.form_data['metric'] = self.orig_form_data.get('metrics')

    def query_obj(self):
        d = super(GaugeViz, self).query_obj()
        metric = self.form_data.get('metric')
        if not metric:
            raise Exception("Pick a metric!")
        d['metrics'] = [self.form_data.get('metric')]
        self.form_data['metric'] = metric
        return d

    def get_data(self):
        form_data = self.form_data
        df = self.get_df()
        df.sort_values(by=df.columns[0], inplace=True)
        return {
            'data': df.values.tolist(),
            'subheader': form_data.get('subheader', ''),
        }

After:

cd /opt/caravel/caravel/assets/javascripts/modules
vim caravel.js

I add a gauge.js:

var sourceMap = {
  area: 'nvd3_vis.js',
  bar: 'nvd3_vis.js',
  bubble: 'nvd3_vis.js',
  gauge: 'gauge.js',
  big_number: 'big_number.js',
  big_number_total: 'big_number.js',
  compare: 'nvd3_vis.js',
  dist_bar: 'nvd3_vis.js',
  directed_force: 'directed_force.js',
  filter_box: 'filter_box.js',
  heatmap: 'heatmap.js',

After:

cd /opt/caravel/caravel/assets/visualizations
cp big_number.js gauge.js
cp big_number.css gauge.css
vim gauge.js

I modified the line:

require('./gauge.css');

Finally I compiled again with npm and start server:

cd /opt/caravel/caravel/assets
npm run prod
cd /opt/caravel/caravel/bin
./caravel runserver -d -p 8081

But still without see the Gauge slice.

[xrmx]

@EstebanMonge have you added GaugeViz to viz_types_list ?

[EstebanMonge]

It works!!! thanks a lot @xrmx

[mistercrunch]

Send the PR!