all files / src/visualizations/ EventFlow.jsx

23.08% Statements 6/26
0% Branches 0/6
0% Functions 0/5
23.08% Lines 6/26
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63                                                                                                                  
import React from 'react';
import ReactDOM from 'react-dom';
 
import {
  App,
  withParentSize,
  cleanEvents,
  TS,
  EVENT_NAME,
  ENTITY_ID,
} from '@data-ui/event-flow';
import { t } from '../locales';
 
/*
 * This function takes the slice object and json payload as input and renders a
 * responsive <EventFlow /> component using the json data.
 */
function renderEventFlow(slice, json) {
  const container = document.querySelector(slice.selector);
  const hasData = json.data && json.data.length > 0;
 
  // the slice container overflows ~80px in explorer, so we have to correct for this
  const isExplorer = (/explore/).test(window.location.pathname);
 
  const ResponsiveVis = withParentSize(({
    parentWidth,
    parentHeight,
    ...rest
  }) => (
    <App
      width={parentWidth}
      height={parentHeight - (isExplorer ? 80 : 0)}
      {...rest}
    />
  ));
 
  // render the component if we have data, otherwise render a no-data message
  let Component;
  if (hasData) {
    const userKey = json.form_data.entity;
    const eventNameKey = json.form_data.all_columns_x;
 
    // map from the Superset form fields to <EventFlow />'s expected data keys
    const accessorFunctions = {
      [TS]: datum => new Date(datum.__timestamp), // eslint-disable-line no-underscore-dangle
      [EVENT_NAME]: datum => datum[eventNameKey],
      [ENTITY_ID]: datum => String(datum[userKey]),
    };
 
    const dirtyData = json.data;
    const cleanData = cleanEvents(dirtyData, accessorFunctions);
    const minEventCount = slice.formData.min_leaf_node_event_count;
 
    Component = <ResponsiveVis data={cleanData} initialMinEventCount={minEventCount} />;
  } else {
    Component = <div>{t('Sorry, there appears to be no data')}</div>;
  }
 
  ReactDOM.render(Component, container);
}
 
module.exports = renderEventFlow;