# Creating a custom visualization : new plugin breaks visualization, dashboard and discovery apps

**URL:** <https://discuss.elastic.co/t/creating-a-custom-visualization-new-plugin-breaks-visualization-dashboard-and-discovery-apps/196550>\
**Category:** Kibana\
**Created:** [August 23, 2019, 2:56pm UTC](https://discuss.elastic.co/t/creating-a-custom-visualization-new-plugin-breaks-visualization-dashboard-and-discovery-apps/196550 "2019-08-23T14:56:25Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![TheEternalLearner](https://avatars.discourse-cdn.com/v4/letter/t/58956e/32.png) [@TheEternalLearner](https://discuss.elastic.co/u/TheEternalLearner)\
**Post date:** [August 23, 2019, 2:56pm UTC](https://discuss.elastic.co/t/creating-a-custom-visualization-new-plugin-breaks-visualization-dashboard-and-discovery-apps/196550/1 "2019-08-23T14:56:26Z")

</div>

Hello,

I am trying to create my own react visualization in Kibana. I've set up the dev environment on a debian 9 vm and create my plugin using the kibana plugin generator.  
Because I'm pretty new to this I am trying to start slowly by creating a small plugin that doesn't do much. So I copied the js files of the markdown\_vis plugin and tweek them a bit.

Here are my different files :  
in the kibana/plugin/speedguide\_portfinder\_vis directory  
my index.js :

```auto
import { resolve } from 'path';

export default function (kibana) {

  return new kibana.Plugin({

    uiExports: {
      visTypes: [
        'plugins/speedguide_portfinder/speedguide_portfinder_vis'
      ],
      interpreter: ['plugins/speedguide_portfinder/speedguide_portfinder_fn'],
      styleSheetPaths: resolve(__dirname, 'public/index.scss'),
    }

  });

};

```

in the public directory :  
speedguide\_portfinder\_vis.js :

```auto
import { SpeedguidePortfinderVisWrapper } from './speedguide_portfinder_vis_controller';
import { VisFactoryProvider } from 'ui/vis/vis_factory';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';

VisTypesRegistryProvider.register(SpeedguidePortfinderVisProvider);

function SpeedguidePortfinderVisProvider() {
  const VisFactory = Private(VisFactoryProvider);
  // return the visType object, which kibana will use to display and configure new
  // Vis object of this type.
  return VisFactory.createReactVisualization({
    name: 'speedguide_portfinder',
    title: 'Speedguide_portfinder',
    isAccessible: true,
    icon: 'visText',
    description: 'awesome button to research a port on speedguide',
    visConfig: {
      component: SpeedguidePortfinderWrapper,
      defaults: {
        openLinksInNewTab: true,
        port:0
      }
    },
    requestHandler: 'none',
    responseHandler: 'none',
  });
}

export default SpeedguidePortfinderVisProvider;

```

speedguide\_portfinder\_fn.js :

```auto
import { functionsRegistry } from 'plugins/interpreter/registries';
import { i18n } from '@kbn/i18n';

export const kibanaSpeedguidePortfinder = () => ({
  name: 'speedguidePortfinderVis',
  type: 'render',
  context: {
    types: [],
  },
  help: i18n.translate('SpeedguidePortfinderVis.function.help', {
    defaultMessage: 'Speedguide_portfinder visualization'
  }),
  args: {
    port: {
      type: ['integer'],
      aliases: ['_'],
      required: true,
    },
    openLinksInNewTab: {
      types: ['boolean'],
      default: true,
    }
  },
  fn(context, args) {
    return {
      type: 'render',
      as: 'visualization',
      value: {
        visType: 'speedguide_portfinder',
        visConfig: {
          port: args.port,
          openLinksInNewTab: args.openLinksInNewTab
        },
      }
    };
  }
});

functionsRegistry.register(kibanaSpeedguidePortfinder);

```

speedguide\_portfinder\_vis\_controller.js :

```auto
import React, { Component } from 'react'

class SpeedguidePortfinderVisComponent extends Component {
  componentDidMount() {
    this.props.renderComplete();
  }
  render() {
    return (
      <div>
        <p>The visualization</p>

      </div>
    );
  }
}

export function SpeedguidePortfinderVisWrapper(props) {
  return (
    <SpeedguidePortfinderVisComponent

      openLinksInNewTab={props.visParams.openLinksInNewTab}
      renderComplete={props.renderComplete}
    />
  );
}

```

index.scss :

```auto
@import 'src/legacy/ui/public/styles/styling_constants';

```

I was able to run kibana successfully however when I try to access the visualisation tab (or even the dashboard or discovery tab) the pages seem broken..

Visualize tab :

 ![Elastic-bug-Visualize](https://us1.discourse-cdn.com/elastic/original/3X/7/0/70f98ed5b276c7801c14f2f15f491574a7ed98c4.png)

Dashboard tab :  
 ![Elastic-bug-Dashboard](https://us1.discourse-cdn.com/elastic/original/3X/6/7/672980ea3d1f94c199cbdb12012a98047dfcbfdd.png)

Discovery tab :  
 ![Elastic-bug-Discovery](https://us1.discourse-cdn.com/elastic/original/3X/7/a/7a06d35e62419404a59cc6bb627c2139bf5f7006.png)

the Discovery tab has also the circular reference to registry error and both the Discovery and Dashboard tab have the Provide is undefined error.

---

<div class="post-metadata">

**Author:** ![christophilus](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/christophilus/32/42991_2.png) [@christophilus](https://discuss.elastic.co/u/christophilus)\
**Post date:** [August 23, 2019, 4:09pm UTC](https://discuss.elastic.co/t/creating-a-custom-visualization-new-plugin-breaks-visualization-dashboard-and-discovery-apps/196550/2 "2019-08-23T16:09:35Z")

</div>

It'd be really helpful if you could re-post your code using triple back-ticks (e.g. `````). Also, you need to look at your browser's dev tool console to see what errors are being logged there.

---

<div class="post-metadata">

**Author:** ![TheEternalLearner](https://avatars.discourse-cdn.com/v4/letter/t/58956e/32.png) [@TheEternalLearner](https://discuss.elastic.co/u/TheEternalLearner)\
**Post date:** [August 27, 2019, 7:11am UTC](https://discuss.elastic.co/t/creating-a-custom-visualization-new-plugin-breaks-visualization-dashboard-and-discovery-apps/196550/3 "2019-08-27T07:11:21Z")

</div>

I have re-posted my code , with the dev toools I found a few errors but I 'm not sure how to fix them as I based my test visualization on the markdown vis and cannot find any imports concerning Private which is supposedely undefined or why I get circular references.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [September 24, 2019, 7:12am UTC](https://discuss.elastic.co/t/creating-a-custom-visualization-new-plugin-breaks-visualization-dashboard-and-discovery-apps/196550/4 "2019-09-24T07:12:32Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.