Re-implement Visualize Wizard using Gallery component for selecting v…

…isualization type (#10972)

* Add Gallery and GalleryButton components to UI Framework.
* Re-implement Visualize Wizard using Gallery component for selecting visualization type.

src/core_plugins/kbn_vislib_vis_types/public/area.js

@@ -1,19 +1,20 @@
+import VisVisTypeProvider from 'ui/vis/vis_type';
 import VislibVisTypeVislibVisTypeProvider from 'ui/vislib_vis_type/vislib_vis_type';
 import VisSchemasProvider from 'ui/vis/schemas';
 import pointSeriesTemplate from 'plugins/kbn_vislib_vis_types/editors/point_series.html';
+import image from './images/icon-area.svg';
 
 export default function PointSeriesVisType(Private) {
+  const VisType = Private(VisVisTypeProvider);
   const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider);
   const Schemas = Private(VisSchemasProvider);
 
   return new VislibVisType({
     name: 'area',
-    title: 'Area chart',
-    icon: 'fa-area-chart',
-    description: 'Great for stacked timelines in which the total of all series is more important ' +
-    'than comparing any two or more series. Less useful for assessing the relative change of ' +
-    'unrelated data points as changes in a series lower down the stack will have a difficult to gauge ' +
-    'effect on the series above it.',
+    title: 'Area',
+    image,
+    description: 'Emphasize the quantity beneath a line chart',
+    category: VisType.CATEGORY.BASIC,
     params: {
       defaults: {
         grid: {

src/core_plugins/kbn_vislib_vis_types/public/heatmap.js

@@ -1,18 +1,21 @@
+import VisVisTypeProvider from 'ui/vis/vis_type';
 import VislibVisTypeVislibVisTypeProvider from 'ui/vislib_vis_type/vislib_vis_type';
 import VisSchemasProvider from 'ui/vis/schemas';
 import heatmapTemplate from 'plugins/kbn_vislib_vis_types/editors/heatmap.html';
 import heatmapColors from 'ui/vislib/components/color/colormaps';
+import image from './images/icon-heatmap.svg';
 
 export default function HeatmapVisType(Private) {
+  const VisType = Private(VisVisTypeProvider);
   const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider);
   const Schemas = Private(VisSchemasProvider);
 
   return new VislibVisType({
     name: 'heatmap',
-    title: 'Heatmap chart',
-    icon: 'fa-barcode',
-    description: 'A heat map is a graphical representation of data' +
-    ' where the individual values contained in a matrix are represented as colors. ',
+    title: 'Heat Map',
+    image,
+    description: 'Shade cells within a matrix',
+    category: VisType.CATEGORY.BASIC,
     params: {
       defaults: {
         addTooltip: true,

src/core_plugins/kbn_vislib_vis_types/public/histogram.js

@@ -1,17 +1,20 @@
+import VisVisTypeProvider from 'ui/vis/vis_type';
 import VislibVisTypeVislibVisTypeProvider from 'ui/vislib_vis_type/vislib_vis_type';
 import VisSchemasProvider from 'ui/vis/schemas';
 import pointSeriesTemplate from 'plugins/kbn_vislib_vis_types/editors/point_series.html';
+import image from './images/icon-vertical.svg';
 
 export default function PointSeriesVisType(Private) {
+  const VisType = Private(VisVisTypeProvider);
   const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider);
   const Schemas = Private(VisSchemasProvider);
 
   return new VislibVisType({
     name: 'histogram',
-    title: 'Vertical bar chart',
-    icon: 'fa-bar-chart',
-    description: 'The goto chart for oh-so-many needs. Great for time and non-time data. Stacked or grouped, ' +
-    'exact numbers or percentages. If you are not sure which chart you need, you could do worse than to start here.',
+    title: 'Vertical Bar',
+    image,
+    description: 'Assign a continuous variable to each axis',
+    category: VisType.CATEGORY.BASIC,
     params: {
       defaults: {
         grid: {

src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js

@@ -1,16 +1,20 @@
+import VisVisTypeProvider from 'ui/vis/vis_type';
 import VislibVisTypeVislibVisTypeProvider from 'ui/vislib_vis_type/vislib_vis_type';
 import VisSchemasProvider from 'ui/vis/schemas';
 import pointSeriesTemplate from 'plugins/kbn_vislib_vis_types/editors/point_series.html';
+import image from './images/icon-horizontal.svg';
 
 export default function PointSeriesVisType(Private) {
+  const VisType = Private(VisVisTypeProvider);
   const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider);
   const Schemas = Private(VisSchemasProvider);
 
   return new VislibVisType({
     name: 'horizontal_bar',
-    title: 'Horizontal bar chart',
-    icon: 'fa-bars',
-    description: 'Like histogram chart but with horizontal bars.',
+    title: 'Horizontal Bar',
+    image,
+    description: 'Assign a continuous variable to each axis',
+    category: VisType.CATEGORY.BASIC,
     params: {
       defaults: {
         grid: {

src/core_plugins/kbn_vislib_vis_types/public/line.js

@@ -1,17 +1,20 @@
+import VisVisTypeProvider from 'ui/vis/vis_type';
 import VislibVisTypeVislibVisTypeProvider from 'ui/vislib_vis_type/vislib_vis_type';
 import VisSchemasProvider from 'ui/vis/schemas';
 import pointSeriesTemplate from 'plugins/kbn_vislib_vis_types/editors/point_series.html';
+import image from './images/icon-line.svg';
 
 export default function PointSeriesVisType(Private) {
+  const VisType = Private(VisVisTypeProvider);
   const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider);
   const Schemas = Private(VisSchemasProvider);
 
   return new VislibVisType({
     name: 'line',
-    title: 'Line chart',
-    icon: 'fa-line-chart',
-    description: 'Often the best chart for high density time series. Great for comparing one series to another. ' +
-    'Be careful with sparse sets as the connection between points can be misleading.',
+    title: 'Line',
+    image,
+    description: 'Emphasize trends',
+    category: VisType.CATEGORY.BASIC,
     params: {
       defaults: {
         grid: {

src/core_plugins/kbn_vislib_vis_types/public/pie.js

@@ -1,17 +1,20 @@
+import VisVisTypeProvider from 'ui/vis/vis_type';
 import VislibVisTypeVislibVisTypeProvider from 'ui/vislib_vis_type/vislib_vis_type';
 import VisSchemasProvider from 'ui/vis/schemas';
 import pieTemplate from 'plugins/kbn_vislib_vis_types/editors/pie.html';
+import image from './images/icon-pie.svg';
 
 export default function HistogramVisType(Private) {
+  const VisType = Private(VisVisTypeProvider);
   const VislibVisType = Private(VislibVisTypeVislibVisTypeProvider);
   const Schemas = Private(VisSchemasProvider);
 
   return new VislibVisType({
     name: 'pie',
-    title: 'Pie chart',
-    icon: 'fa-pie-chart',
-    description: 'Pie charts are ideal for displaying the parts of some whole. For example, sales percentages by department.' +
-     'Pro Tip: Pie charts are best used sparingly, and with no more than 7 slices per pie.',
+    title: 'Pie',
+    image,
+    description: 'Compare parts of a whole',
+    category: VisType.CATEGORY.BASIC,
     params: {
       defaults: {
         addTooltip: true,

src/core_plugins/kbn_vislib_vis_types/public/tile_map.js

@@ -1,20 +1,23 @@
 import supports from 'ui/utils/supports';
+import VisVisTypeProvider from 'ui/vis/vis_type';
 import MapsVisTypeVislibVisTypeProvider from 'ui/vis_maps/maps_vis_type';
 import VisSchemasProvider from 'ui/vis/schemas';
 import AggResponseGeoJsonGeoJsonProvider from 'ui/agg_response/geo_json/geo_json';
 import tileMapTemplate from 'plugins/kbn_vislib_vis_types/editors/tile_map.html';
+import image from './images/icon-tilemap.svg';
 
 export default function TileMapVisType(Private, getAppState, courier, config) {
+  const VisType = Private(VisVisTypeProvider);
   const MapsVisType = Private(MapsVisTypeVislibVisTypeProvider);
   const Schemas = Private(VisSchemasProvider);
   const geoJsonConverter = Private(AggResponseGeoJsonGeoJsonProvider);
 
   return new MapsVisType({
     name: 'tile_map',
-    title: 'Tile map',
-    icon: 'fa-map-marker',
-    description: 'Your source for geographic maps. Requires an elasticsearch geo_point field. More specifically, a field ' +
-     'that is mapped as type:geo_point with latitude and longitude coordinates.',
+    title: 'Tile Map',
+    image,
+    description: 'Plot latitude and longitude coordinates on a map',
+    category: VisType.CATEGORY.MAP,
     params: {
       defaults: {
         mapType: 'Scaled Circle Markers',

src/core_plugins/kibana/public/visualize/editor/editor.html

@@ -71,13 +71,15 @@
 
   <div class="vis-editor-content">
 
-    <vis-editor-vis-options ng-if="vis.type.fullEditor"
-                            vis="vis"
-                            saved-vis="savedVis"
-                            editor="vis.type.params.editor"
-                            ui-state="uiState"
-                            stage-editable-vis="stageEditableVis"
-                            class="vis-editor-full-options"></vis-editor-vis-options>
+    <vis-editor-vis-options
+      ng-if="vis.type.fullEditor"
+      vis="vis"
+      saved-vis="savedVis"
+      editor="vis.type.params.editor"
+      ui-state="uiState"
+      stage-editable-vis="stageEditableVis"
+      class="vis-editor-full-options"
+    ></vis-editor-vis-options>
 
     <div class="collapsible-sidebar" ng-if="!vis.type.fullEditor && chrome.getVisible()" >
       <vis-editor-sidebar vis="editableVis" class="vis-editor-sidebar"></vis-editor-sidebar>