How to use keen-dataviz - 6 common examples

percents: {
            show: true,
          },
          minimalSize: 50, // minimal size of the last step in pixels
        };
      }

      const timezoneByValue = TIMEZONES.find(item => item.value === timezone);
      const timezoneString = (timezoneByValue && timezoneByValue.label) || 'UTC';

      if (this.dataviz) {
        this.dataviz.destroy();
      }

      try {
        this.dataviz = new KeenDataviz({
          container: '#keen-dataviz-container',
          type,
          title: false,
          showLoadingSpinner: true,
          results,
          funnel,
          labels, // funnel step labels
          onrendered: () => {
          },
          table: {
            mapDates: (value) => {
              return moment
                .tz(value, 'UTC')
                .clone()
                .tz(timezoneString)
                .toString();

didInsertElement(this: ChartWrapper) {
        this.chart = new KeenDataviz()
            .el(`#${this.elementId} .${styles.Chart}`)
            .title(' '); // Prevent keen-dataviz from adding a default title

        this.initSkeletonChart();
        if (this.chartEnabled) {
            this.get('loadKeen').perform();
        }
    }

import AppDispatcher from '../../../../../lib/js/app/dispatcher/AppDispatcher';
import AppStateStore from '../../../../../lib/js/app/stores/AppStateStore';
import ExplorerUtils from '../../../../../lib/js/app/utils/ExplorerUtils';
import ChartTypeUtils from '../../../../../lib/js/app/utils/ChartTypeUtils';
import DataUtils from '../../../../../lib/js/app/utils/DataUtils';
import ExplorerConstants from '../../../../../lib/js/app/constants/ExplorerConstants';
import ExplorerActions from '../../../../../lib/js/app/actions/ExplorerActions';
import NoticeActions from '../../../../../lib/js/app/actions/NoticeActions';
import TestHelpers from '../../../../support/TestHelpers';
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import rquery from 'rquery';

const $R = rquery(_, React, ReactDOM, TestUtils);
const KeenDataviz = new KeenDatavizCore();

describe('components/explorer/visualization/index', () => {
  let client;
  let model;
  let project;
  let datavizStub;
  let chartOptionsStub;
  let exportToCsvStub;
  let renderComponent;
  let component;
  let getOptionsFromComponent;

  beforeEach(() => {
    client = new KeenAnalysis(TestHelpers.createClient());
    model = TestHelpers.createExplorerModel();
    model.id = 10;

}
    let results = this.props.model.response;
    if (Array.isArray(results.result)
     && results.result[0].timeframe && results.result[0].timeframe.start
     && !this.props.model.response.dateConvertedToTimezone
     && type !== 'table'
   ){
       this.props.model.response.dateConvertedToTimezone = true;
       const dateFormat = 'YYYY-MM-DDTHH:mm:ss.000Z';
       results.result.forEach((result, key) => {
         results.result[key].timeframe.start = moment(result.timeframe.start).tz(results.query.timezone).format(dateFormat);
         results.result[key].timeframe.end = moment(result.timeframe.end).tz(results.query.timezone).format(dateFormat);
       });
    }

    this.datavizInstance = new KeenDataviz({
      container: this.refs['keen-viz'],
      showTitle: false,
      type,
      sortGroups,
      results,
      ...((this.props.config && this.props.config.keenDatavizOptions) || {})
    });

    this.lastDataTimestamp = this.props.model.dataTimestamp;
    this.lastChartType = this.props.model.metadata.visualization.chart_type;
  },

componentWillMount: function() {
    this.dataviz = new KeenDataviz();
  },

KeenBase.prototype.draw = function(query, el, attributes){
  var chart = Dataviz()
    .attributes(attributes)
    .el(el)
    .prepare();

  this.run(query, function(err, res){
    if (err) {
      chart.message(err.message);
    }
    else {
      chart.data(res).render();
    }
  });
  return chart;
};