fix style and complete

public/components/OptionTemplate.tsx

@@ -0,0 +1,5 @@
+import React, { useState } from 'react';
+
+export const OptionTemplate = () => {
+  return <></>;
+};

public/get_inner_angular.ts

@@ -24,12 +24,9 @@ import angular from 'angular';
 // required for `ngSanitize` angular module
 import 'angular-sanitize';
 import 'angular-recursion';
-// import { i18nDirective, i18nFilter, I18nProvider } from '@kbn/i18n/angular';
 import { CoreStart, IUiSettingsClient, PluginInitializerContext } from 'kibana/public';
 import {
   initAngularBootstrap,
-  // PaginateDirectiveProvider,
-  // PaginateControlsDirectiveProvider,
   PrivateProvider,
   watchMultiDecorator,
   KbnAccessibleClickProvider,
@@ -46,7 +43,7 @@ export function getAngularModule(name: string, core: CoreStart, context: PluginI
 
 let initialized = false;
 
-export function getInnerAngular(name = 'kibana/kbn_sankey_vis', core: CoreStart) {
+export function getInnerAngular(name = 'kibana/trafficlightvis', core: CoreStart) {
   if (!initialized) {
     createLocalPrivateModule();
     createLocalConfigModule(core.uiSettings);

public/index.scss

@@ -0,0 +1,78 @@
+.traffic-light-box
+{
+  float:left;
+}
+.traffic-light-vis {
+  width: 100%;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-direction: normal;
+  -moz-box-direction: normal;
+  -webkit-box-orient: horizontal;
+  -moz-box-orient: horizontal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-pack: justify;
+  -moz-box-pack: justify;
+  -ms-flex-pack: distribute;
+/*  -webkit-justify-content: space-around;
+  justify-content: space-around;*/
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+/*  -webkit-align-content: space-around;*/
+  -ms-flex-line-pack: distribute;
+/*  align-content: space-around;*/
+}
+.traffic-light-vis .metric-container {
+  text-align: center;
+  padding: 1em;
+  -webkit-box-flex: 0;
+  -moz-box-flex: 0;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  width: 100%;
+  position: relative;
+}
+.traffic-light-legend
+{
+	text-align:center;
+}
+.traffic-light-vis .traffic-light-container {
+  overflow:hidden;
+  margin: 0 auto;
+}
+.traffic-light-vis .traffic-light-container .traffic-light {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  background-color: #333;
+}
+.traffic-light-vis .traffic-light-container .traffic-light .light {
+  margin: 16%;
+  width: 68%;
+  height: 25%;
+  border-radius: 50%;
+  background-color: #000;
+}
+.traffic-light-vis .traffic-light-container .traffic-light .light.on.red {
+  background-color: #d9534f;
+}
+.traffic-light-vis .traffic-light-container .traffic-light .light.on.yellow {
+  background-color: #f0ad4e;
+}
+.traffic-light-vis .traffic-light-container .traffic-light .light.on.green {
+  background-color: #5cb85c;
+}
+

public/plugin.ts

@@ -1,12 +1,8 @@
-import { i18n } from '@kbn/i18n';
-import { AppMountParameters, AppNavLinkStatus, CoreSetup, CoreStart, Plugin } from '../../../src/core/public';
+import { CoreSetup, CoreStart, Plugin } from '../../../src/core/public';
 import {
-  KbnTrafficlightVisPluginSetup,
   KbnTrafficlightVisPluginStart,
-  AppPluginStartDependencies,
 } from './types';
-import { PLUGIN_NAME } from '../common';
-import { trafficLightDefinition } from './trafficlightvis';
+const trafficLightDefinition = require('./trafficlightvis').trafficLightDefinition;
 import { VisualizationsSetup } from '../../../src/plugins/visualizations/public';
 
 /** @internal */
@@ -15,46 +11,14 @@ export interface TablePluginSetupDependencies {
 }
 
 export class KbnTrafficlightVisPlugin
-  implements Plugin<KbnTrafficlightVisPluginSetup, KbnTrafficlightVisPluginStart> {
+  implements Plugin<void, KbnTrafficlightVisPluginStart> {
   createBaseVisualization: any;
   public setup(
     core: CoreSetup,
     { visualizations }: TablePluginSetupDependencies
-  ): KbnTrafficlightVisPluginSetup {
-    // Register an application into the side navigation menu
-    core.application.register({
-      id: 'kbnTrafficlightVis',
-      title: PLUGIN_NAME,
-      navLinkStatus: AppNavLinkStatus.hidden, // imported from `src/core/public`
-      async mount(params: AppMountParameters) {
-        // Load application bundle
-        const { renderApp } = await import('./application');
-        // Get start services as specified in kibana.json
-        const [coreStart, depsStart] = await core.getStartServices();
-        // Render the application
-        return renderApp(coreStart, depsStart as AppPluginStartDependencies, params);
-      },
-    });
+  ) {
     visualizations.createBaseVisualization(trafficLightDefinition(core));
-
-    // Return methods that should be available to other plugins
-    return {
-      getGreeting() {
-        return i18n.translate('kbnTrafficlightVis.greetingText', {
-          defaultMessage: 'Hello from {name}!',
-          values: {
-            name: PLUGIN_NAME,
-          },
-        });
-      },
-    };
   }
-  // public async setup(
-  //   core: CoreSetup,
-  //   { visualizations }: TablePluginSetupDependencies
-  // ): Promise<any> {
-  //   visualizations.createBaseVisualization(trafficLightDefinition(core));
-  // }
 
   public start(core: CoreStart): KbnTrafficlightVisPluginStart {
     return {};

public/trafficlightvis.js

@@ -1,17 +1,8 @@
-// import './trafficlightvis.less';
-
 import mainTemplate from './trafficlightvis.html';
-import optionsTemplate from './trafficlightvisparams.html';
-// Kibana Dependencies
-// import { CATEGORY } from 'ui/vis/vis_category';
-// import { npSetup } from 'ui/new_platform';
-// import { setup as visualizations } from '../../../src/legacy/core_plugins/visualizations/public/np_ready/public/legacy';
 import { Schemas } from '../../../src/plugins/vis_default_editor/public';
-// import { Schemas } from 'ui/vis/editors/default/schemas';
-// import { TrafficLightVisController } from './trafficlightviscontroller';
-// import { AngularVisController } from 'ui/vis/vis_types/angular_vis_type';
 import { VIS_EVENT_TO_TRIGGER } from '../../../src/plugins/visualizations/public';
 import { getTrafficLightVisController } from './vis_controller';
+import { OptionTemplate } from './components/OptionTemplate';
 
 export const trafficLightDefinition = (core, ctx) => {
   return {
@@ -20,7 +11,6 @@ export const trafficLightDefinition = (core, ctx) => {
     icon: 'visGauge',
     description:
       'Great for one-glance status readings, the traffic light visualization expresses in green / yellow / red the position of a single value in relation to low and high thresholds.',
-    // category: CATEGORY.OTHER,
     visualization: getTrafficLightVisController(core, ctx),
     getSupportedTriggers: () => {
       return [VIS_EVENT_TO_TRIGGER.filter];
@@ -70,7 +60,7 @@ export const trafficLightDefinition = (core, ctx) => {
       template: mainTemplate,
     },
     editorConfig: {
-      optionsTemplate: optionsTemplate,
+      optionsTemplate: OptionTemplate,
       schemas: new Schemas([
         {
           group: 'metrics',
@@ -95,8 +85,5 @@ export const trafficLightDefinition = (core, ctx) => {
         },
       ]),
     },
-    // hierarchicalData: (vis) => {
-    //   return Boolean(vis.params.showPartialRows || vis.params.showMetricsAtAllLevels);
-    // },
   };
 };