github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

Re-implement Visualize Wizard using Gallery component for selecting visualization type (#10972) (#11055)

Browse source 
* Add Gallery and GalleryButton components to UI Framework.
* Re-implement Visualize Wizard using Gallery component for selecting visualization type.
This commit is contained in:
CJ Cenizal 2017-04-05 12:43:53 -07:00 • committed by GitHub
parent fe79564eda
commit 9af9d1f73e
41 changed files with 828 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/core_plugins/kbn_vislib_vis_types/public/area.js
View file

@ -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: {

11
src/core_plugins/kbn_vislib_vis_types/public/heatmap.js
View file

@ -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,

11
src/core_plugins/kbn_vislib_vis_types/public/histogram.js
View file

@ -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: {

10
src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js
View file

@ -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: {

19
src/core_plugins/kbn_vislib_vis_types/public/images/icon-area.svg Normal file
View file

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="60px" height="46px" viewBox="0 0 60 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>icon-area</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Visualize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Visualize-Create-New" transform="translate(-756.000000, -222.000000)" fill="#000000">
<g id="charts" transform="translate(75.000000, 148.000000)">
<g id="area" transform="translate(641.000000, 43.000000)">
<g id="icon-area" transform="translate(40.000000, 31.000000)">
<polygon id="" points="44.5384615 11.6666667 51 35 9 35 9 20 20.3076923 5 34.8461538 20"></polygon>
<polygon id="xy-axis" fill-rule="nonzero" points="4 0 0 0 0 45.0116263 60.0000011 45.0116263 60.0000011 41.0116263 4 41.0116263"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

27
src/core_plugins/kbn_vislib_vis_types/public/images/icon-heatmap.svg Normal file
View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="60px" height="45px" viewBox="0 0 60 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>Group 2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Visualize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Visualize-Create-New" transform="translate(-915.000000, -222.000000)" fill="#000000">
<g id="charts" transform="translate(75.000000, 148.000000)">
<g id="icon-heatmap" transform="translate(801.000000, 43.000000)">
<g id="Group-2" transform="translate(39.000000, 31.000000)">
<polygon id="xy-axis-" points="60.0000715 41.2500492 60.0000715 45.0000536 0 45.0000536 0 0 3.75000447 0 3.75000447 41.2500492"></polygon>
<rect id="1" x="10" y="4" width="10" height="8"></rect>
<rect id="2" x="27" y="6" width="6" height="4"></rect>
<rect id="3" x="41" y="4" width="8" height="7"></rect>
<rect id="4" x="11" y="17" width="8" height="6"></rect>
<rect id="5" x="25" y="16" width="10" height="8"></rect>
<rect id="6" x="42" y="18" width="6" height="4"></rect>
<rect id="7" x="10" y="28" width="10" height="8"></rect>
<rect id="8" x="26" y="29" width="8" height="6"></rect>
<rect id="9" x="40" y="28" width="10" height="8"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

23
src/core_plugins/kbn_vislib_vis_types/public/images/icon-horizontal.svg Normal file
View file

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="60px" height="46px" viewBox="0 0 60 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>icon-horizontal</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Visualize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Visualize-Create-New" transform="translate(-116.000000, -222.000000)" fill="#000000">
<g id="charts" transform="translate(75.000000, 148.000000)">
<g id="horiz" transform="translate(1.000000, 43.000000)">
<g id="icon-horizontal" transform="translate(40.000000, 31.000000)">
<g id="Group" transform="translate(28.508538, 20.666199) rotate(90.000000) translate(-28.508538, -20.666199) translate(13.508538, 0.166199)">
<polygon id="Path" points="29.3338013 0.0085375309 29.3338013 40.0085375 22.3338013 40.0085375 22.3338013 0.0085375309"></polygon>
<polygon id="Path" points="18.3338013 14.0085375 18.3338013 40.0085375 11.3338013 40.0085375 11.3338013 14.0085375"></polygon>
<polygon id="Path" points="7.33380127 4.00853753 7.33380127 40.0085375 0.33380127 40.0085375 0.33380127 4.00853753"></polygon>
</g>
<polygon id="xy-axis" fill-rule="nonzero" points="4 0 0 0 0 45.0116263 60.0000011 45.0116263 60.0000011 41.0116263 4 41.0116263"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

19
src/core_plugins/kbn_vislib_vis_types/public/images/icon-line.svg Normal file
View file

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="60px" height="46px" viewBox="0 0 60 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>icon-line</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Visualize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Visualize-Create-New" transform="translate(-436.000000, -222.000000)" fill="#000000">
<g id="charts" transform="translate(75.000000, 148.000000)">
<g id="line" transform="translate(321.000000, 43.000000)">
<g id="icon-line" transform="translate(40.000000, 31.000000)">
<path d="M52,6.75675676 L52,17.0439189 C52,17.7060811 51.1580189,18.0608108 50.6379717,17.5641892 L47.6415094,14.7027027 L31.9658019,29.6722973 C31.6438679,29.9797297 31.1485849,29.9797297 30.8266509,29.6722973 L25.0566038,24.1621622 L14.754717,34 L10,29.4594595 L24.4870283,15.625 C24.8089623,15.3175676 25.3042453,15.3175676 25.6261792,15.625 L31.3962264,21.1351351 L42.8867925,10.1621622 L39.8903302,7.30067568 C39.370283,6.80405405 39.7417453,6 40.4351415,6 L51.2075472,6 C51.6533019,6 52,6.33108108 52,6.75675676 Z" id="arrow"></path>
<polygon id="xy-axis" fill-rule="nonzero" points="4 0 0 0 0 45.0116263 60.0000011 45.0116263 60.0000011 41.0116263 4 41.0116263"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

16
src/core_plugins/kbn_vislib_vis_types/public/images/icon-pie.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="51px" viewBox="0 0 52 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>icon-pie</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Visualize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Visualize-Create-New" transform="translate(-600.000000, -218.000000)" fill="#000000">
<g id="charts" transform="translate(75.000000, 148.000000)">
<g id="pie" transform="translate(481.000000, 43.000000)">
<path d="M67.0769231,53.8855843 L83.4831731,70.2918343 C79.3064904,74.5286131 73.4771635,77.1427958 67.0769231,77.1427958 C54.3365385,77.1427958 44,66.8062574 44,54.0658728 C44,41.3254881 54.3365385,30.9889497 67.0769231,30.9889497 L67.0769231,53.8855843 Z M72.6959135,54.0658728 L95.9230769,54.0658728 C95.9230769,60.4661131 93.3088942,66.2954401 89.0721154,70.4721228 L72.6959135,54.0658728 Z M94,50.2197189 L70.9230769,50.2197189 L70.9230769,27.1427958 C83.6634615,27.1427958 94,37.4793343 94,50.2197189 Z" id="icon-pie"></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

16
src/core_plugins/kbn_vislib_vis_types/public/images/icon-tilemap.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="30px" height="46px" viewBox="0 0 30 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>icon-tilemap</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Visualize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Visualize-Create-New" transform="translate(-130.000000, -436.000000)" fill="#000000">
<g id="maps" transform="translate(74.000000, 361.000000)">
<g id="tile-map" transform="translate(2.000000, 45.000000)">
<path d="M76.5,45.3333333 C76.5,41.1106771 73.1308594,37.6666667 69,37.6666667 C64.8691406,37.6666667 61.5,41.1106771 61.5,45.3333333 C61.5,49.5559896 64.8691406,53 69,53 C73.1308594,53 76.5,49.5559896 76.5,45.3333333 Z M84,45.3333333 C84,47.1601562 83.7949219,49.046875 83.0332031,50.6940104 L72.3691406,73.8736979 C71.7539062,75.1914062 70.40625,76 69,76 C67.59375,76 66.2460938,75.1914062 65.6601562,73.8736979 L54.9667969,50.6940104 C54.2050781,49.046875 54,47.1601562 54,45.3333333 C54,36.8580729 60.7089844,30 69,30 C77.2910156,30 84,36.8580729 84,45.3333333 Z" id="icon-tilemap"></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

19
src/core_plugins/kbn_vislib_vis_types/public/images/icon-vertical.svg Normal file
View file

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="60px" height="46px" viewBox="0 0 60 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>icon-vertical</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Visualize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Visualize-Create-New" transform="translate(-278.000000, -222.000000)" fill="#000000">
<g id="charts" transform="translate(75.000000, 148.000000)">
<g id="vertical-bar" transform="translate(161.000000, 43.000000)">
<g id="icon-vertical" transform="translate(42.000000, 31.000000)">
<path d="M16,25 L16,35 L9,35 L9,25 L16,25 Z M27,9 L27,35 L20,35 L20,9 L27,9 Z M38,17 L38,35 L31,35 L31,17 L38,17 Z M50.0000536,5 L50.0000536,35 L43.0000536,35 L43.0000536,5 L50.0000536,5 Z" id="bars"></path>
<polygon id="xy-axis" fill-rule="nonzero" points="4 0 0 0 0 45.0116263 60.0000011 45.0116263 60.0000011 41.0116263 4 41.0116263"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

11
src/core_plugins/kbn_vislib_vis_types/public/line.js
View file

@ -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: {

11
src/core_plugins/kbn_vislib_vis_types/public/pie.js
View file

@ -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,

11
src/core_plugins/kbn_vislib_vis_types/public/tile_map.js
View file

@ -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',

16
src/core_plugins/kibana/public/visualize/editor/editor.html
View file

@ -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>

76
src/core_plugins/kibana/public/visualize/wizard/step_1.html
View file

@ -13,35 +13,71 @@
</kbn-top-nav>
<div class="kuiViewContent kuiViewContent--constrainedWidth">
<!-- Header -->
<div class="kuiViewContentItem">
<h1 class="kuiTitle kuiVerticalRhythm">
<!-- Header -->
<h1 class="kuiTitle kuiVerticalRhythm kuiVerticalRhythm--medium">
Select visualization type
</h1>
<div class="kuiVerticalRhythm">
<a
class="wizard-type"
ng-repeat="type in visTypes.inTitleOrder"
ng-href="{{ visTypeUrl(type) }}"
<!-- Search -->
<div class="kuiSearchInput kuiVerticalRhythm kuiVerticalRhythm--medium fullWidth">
<div class="kuiSearchInput__icon kuiIcon fa-search"></div>
<input
class="kuiSearchInput__input"
type="text"
placeholder="Search visualization types..."
ng-model="searchTerm"
>
<div class="wizard-type-heading">
<span
aria-hidden="true"
class="wizard-type-heading-icon fa fa-fw"
ng-class="type.icon"
></span>
</div>
<h4
<div
class="kuiVerticalRhythm kuiVerticalRhythm--medium"
ng-repeat="category in filteredVisTypeCategories"
>
<!-- Title for each category -->
<h2 class="kuiSubTitle kuiVerticalRhythm">
{{ category.label }}
</h2>
<!-- Gallery of buttons for each vis type -->
<div class="kuiGallery kuiVerticalRhythm">
<a
class="kuiGalleryButton"
ng-repeat="type in category.list"
ng-href="{{ getVisTypeUrl(type) }}"
tooltip="{{ getVisTypeTooltip(type) }}"
tooltip-placement="{{ getVisTypeTooltipPosition($parent.$index) }}"
>
<div class="kuiGalleryButton__image">
<img
ng-if="type.image"
aria-hidden="true"
ng-src="{{ type.image }}"
/>
<!-- If there's no image, default to an icon, for BWC. -->
<span
ng-if="!type.image"
aria-hidden="true"
class="kuiIcon visualizeWizardVisTypeIcon"
ng-class="type.icon"
></span>
</div>
<div
lass="kuiGalleryButton__label"
data-test-subj="visualizeWizardChartTypeTitle"
class="wizard-type-heading-text"
>
{{type.title}}
</h4>
</div>
{{ type.title }}
</div>
<p class="wizard-type-description">{{type.description}}</p>
</a>
<div
class="kuiGalleryButton__icon kuiIcon fa-flask"
ng-if="type.isExperimental"
></div>
</a>
</div>
</div>
</div>
</div>

105
src/core_plugins/kibana/public/visualize/wizard/wizard.js
View file

@ -2,6 +2,10 @@ import 'plugins/kibana/visualize/saved_visualizations/saved_visualizations';
import 'ui/directives/saved_object_finder';
import 'ui/directives/paginated_selectable_list';
import 'plugins/kibana/discover/saved_searches/saved_searches';
import './wizard.less';
import _ from 'lodash';
import VisVisTypeProvider from 'ui/vis/vis_type';
import { DashboardConstants } from 'plugins/kibana/dashboard/dashboard_constants';
import { VisualizeConstants } from '../visualize_constants';
import routes from 'ui/routes';
@ -29,12 +33,109 @@ routes.when(VisualizeConstants.WIZARD_STEP_1_PAGE_PATH, {
module.controller('VisualizeWizardStep1', function ($scope, $route, kbnUrl, timefilter, Private) {
timefilter.enabled = false;
const VisType = Private(VisVisTypeProvider);
const visTypeCategoryToHumanReadableMap = {
[VisType.CATEGORY.BASIC]: 'Basic Charts',
[VisType.CATEGORY.DATA]: 'Data',
[VisType.CATEGORY.GRAPHIC]: 'Graphic',
[VisType.CATEGORY.MAP]: 'Maps',
[VisType.CATEGORY.OTHER]: 'Other',
[VisType.CATEGORY.TIME]: 'Time Series',
};
const addToDashMode = $route.current.params[DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM];
kbnUrl.removeParam(DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM);
$scope.visTypes = Private(RegistryVisTypesProvider);
const visTypes = Private(RegistryVisTypesProvider);
$scope.visTypeUrl = function (visType) {
const categoryToVisTypesMap = {};
visTypes.forEach(visType => {
const categoryName = visType.category;
// Create category object if it doesn't exist yet.
if (!categoryToVisTypesMap[categoryName]) {
categoryToVisTypesMap[categoryName] = {
label: visTypeCategoryToHumanReadableMap[categoryName],
list: [],
};
}
const categoryVisTypes = categoryToVisTypesMap[categoryName];
// Add the visType to the list and sort them by their title.
// categoryVisTypes.list.push(visType);
categoryVisTypes.list = _.sortBy(
categoryVisTypes.list.concat(visType),
type => type.title
);
});
// Sort the categories alphabetically.
const sortedVisTypeCategories = Object.values(categoryToVisTypesMap).sort((a, b) => {
const other = VisType.CATEGORY.OTHER.toLowerCase();
// Put "other" category at the end of the list.
const labelA = a.label.toLowerCase();
if (labelA === other) return 1;
const labelB = b.label.toLowerCase();
if (labelB === other) return -1;
if (labelA < labelB) return -1;
if (labelA > labelB) return 1;
return 0;
});
$scope.searchTerm = '';
$scope.filteredVisTypeCategories = [];
$scope.$watch('searchTerm', () => {
function getVisTypeCategories() {
const normalizedSearchTerm = $scope.searchTerm.toLowerCase().trim();
const filteredVisTypeCategories = sortedVisTypeCategories.map(category => {
// Include entire category if the category matches the search term.
if (category.label.toLowerCase().includes(normalizedSearchTerm)) {
return category;
}
// Otherwise, return just the vis types in the category which match.
const filteredVisTypes = category.list.filter(visType => {
return visType.title.toLowerCase().includes(normalizedSearchTerm);
});
return {
label: category.label,
list: filteredVisTypes,
};
});
return filteredVisTypeCategories.filter(category => category.list.length);
}
$scope.filteredVisTypeCategories = getVisTypeCategories();
});
$scope.getVisTypeTooltip = type => {
const prefix = type.isExperimental ? '(Experimental)' : '';
return `${prefix} ${type.description}`;
};
$scope.getVisTypeTooltipPosition = index => {
// Tooltips should appear on the bottom by default, unless they're on the last row. This is a
// cheap workaround to automatically positioning the tooltip so that it won't disappear off
// the edge of the screen.
if (index === $scope.filteredVisTypeCategories.length - 1) {
return 'top';
}
return 'bottom';
};
$scope.getVisTypeUrl = function (visType) {
const baseUrl =
visType.requiresSearch
? `#${VisualizeConstants.WIZARD_STEP_2_PAGE_PATH}?`

10
src/core_plugins/kibana/public/visualize/wizard/wizard.less Normal file
View file

@ -0,0 +1,10 @@
/**
* This preserves backwards-compatibility with any plugins that are still specifying an `icon`
* class.
*
* 1. Size icon correctly.
*/
.visualizeWizardVisTypeIcon {
color: #000000;
font-size: 50px; /* 1 */
}

19
src/core_plugins/markdown_vis/public/images/icon-markdown.svg Normal file
View file

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="80px" height="45px" viewBox="0 0 80 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>icon-markdown</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Visualize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Visualize-Create-New" transform="translate(-585.000000, -652.000000)" fill-rule="nonzero" fill="#000000">
<g id="other" transform="translate(555.000000, 576.000000)">
<g id="markdown" transform="translate(0.000000, 44.000000)">
<g id="icon-markdown" transform="translate(30.000000, 32.000000)">
<path d="M4.05063291,41.3265306 L75.9493671,41.3265306 L75.9493671,3.67346939 L4.05063291,3.67346939 L4.05063291,41.3265306 Z M80,0 L80,45 L0,45 L0,0 L80,0 Z" id="box"></path>
<path d="M13,34.7189721 L13,10 L20.2213278,10 L27.4426555,19.0878574 L34.6639833,10 L41.885311,10 L41.885311,34.7189721 L34.6639833,34.7189721 L34.6639833,20.5419146 L27.4426555,29.629772 L20.2213278,20.5419146 L20.2213278,34.7189721 L13,34.7189721 Z M58.1332985,34.7189721 L47.3013069,22.7230004 L54.5226346,22.7230004 L54.5226346,10 L61.7439624,10 L61.7439624,22.7230004 L68.9652902,22.7230004 L58.1332985,34.7189721 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

10
src/core_plugins/markdown_vis/public/markdown_vis.js
View file

@ -1,9 +1,11 @@
import 'plugins/markdown_vis/markdown_vis.less';
import 'plugins/markdown_vis/markdown_vis_controller';
import VisVisTypeProvider from 'ui/vis/vis_type';
import TemplateVisTypeTemplateVisTypeProvider from 'ui/template_vis_type/template_vis_type';
import markdownVisTemplate from 'plugins/markdown_vis/markdown_vis.html';
import markdownVisParamsTemplate from 'plugins/markdown_vis/markdown_vis_params.html';
import visTypesRegistry from 'ui/registry/vis_types';
import image from './images/icon-markdown.svg';
// we need to load the css ourselves
// we also need to load the controller and used by the template
@ -12,15 +14,17 @@ import visTypesRegistry from 'ui/registry/vis_types';
visTypesRegistry.register(MarkdownVisProvider);
function MarkdownVisProvider(Private) {
const VisType = Private(VisVisTypeProvider);
const TemplateVisType = Private(TemplateVisTypeTemplateVisTypeProvider);
// return the visType object, which kibana will use to display and configure new
// Vis object of this type.
return new TemplateVisType({
name: 'markdown',
title: 'Markdown widget',
icon: 'fa-code',
description: 'Useful for displaying explanations or instructions for dashboards.',
title: 'Markdown',
image,
description: 'Create a document using markdown syntax',
category: VisType.CATEGORY.OTHER,
template: markdownVisTemplate,
params: {
editor: markdownVisParamsTemplate

16
src/core_plugins/metric_vis/public/images/icon-number.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="74px" height="25px" viewBox="0 0 74 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>icon-number</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Visualize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Visualize-Create-New" transform="translate(-269.000000, -664.000000)" fill="#000000">
<g id="data" transform="translate(74.000000, 576.000000)">
<g id="number" transform="translate(162.000000, 44.000000)">
<path d="M43.9794922,65 L39.6040039,65 L39.6040039,53.0205078 L39.6464844,51.0522461 L39.7172852,48.8999023 C38.9903935,49.626794 38.485353,50.1035145 38.2021484,50.3300781 L35.8232422,52.2416992 L33.7133789,49.6079102 L40.3828125,44.2978516 L43.9794922,44.2978516 L43.9794922,65 Z M55.0527344,61.9555664 C54.5618465,63.862477 53.7311256,66.1233593 52.5605469,68.7382812 L49.4453125,68.7382812 C50.0589223,66.227201 50.5356428,63.8577585 50.8754883,61.6298828 L54.840332,61.6298828 L55.0527344,61.9555664 Z M72.597168,65 L58.1254883,65 L58.1254883,61.9555664 L63.3222656,56.7021484 C64.8610103,55.1256432 65.8663713,54.032962 66.3383789,53.4240723 C66.8103865,52.8151825 67.1502268,52.2511419 67.3579102,51.7319336 C67.5655935,51.2127253 67.6694336,50.6746447 67.6694336,50.1176758 C67.6694336,49.2869425 67.4405134,48.6686218 66.982666,48.2626953 C66.5248187,47.8567688 65.913578,47.6538086 65.1489258,47.6538086 C64.3465129,47.6538086 63.5677121,47.8378888 62.8125,48.2060547 C62.0572879,48.5742206 61.2690471,49.0981411 60.4477539,49.777832 L58.0688477,46.9599609 C59.088384,46.091467 59.9332649,45.4778664 60.6035156,45.1191406 C61.2737664,44.7604149 62.0053671,44.4842946 62.7983398,44.2907715 C63.5913126,44.0972484 64.4786735,44.0004883 65.4604492,44.0004883 C66.75375,44.0004883 67.8959911,44.2364885 68.887207,44.7084961 C69.8784229,45.1805037 70.6477837,45.8413043 71.1953125,46.690918 C71.7428413,47.5405316 72.0166016,48.5128526 72.0166016,49.6079102 C72.0166016,50.5613654 71.8490414,51.4558064 71.513916,52.2912598 C71.1787906,53.1267132 70.6595901,53.983394 69.9562988,54.8613281 C69.2530076,55.7392622 68.0140063,56.9900635 66.2392578,58.6137695 L63.5771484,61.1201172 L63.5771484,61.3183594 L72.597168,61.3183594 L72.597168,65 Z M88.3432617,48.9282227 C88.3432617,50.2215234 87.9515013,51.3212845 87.1679688,52.2275391 C86.3844362,53.1337936 85.284675,53.7568342 83.8686523,54.0966797 L83.8686523,54.1816406 C85.5395591,54.389324 86.8045204,54.8967245 87.6635742,55.7038574 C88.522628,56.5109904 88.9521484,57.5989515 88.9521484,58.9677734 C88.9521484,60.9596454 88.2299877,62.510167 86.7856445,63.6193848 C85.3413014,64.7286026 83.2786592,65.2832031 80.5976562,65.2832031 C78.3509002,65.2832031 76.3590582,64.9103227 74.6220703,64.1645508 L74.6220703,60.4404297 C75.4244832,60.8463562 76.3071241,61.1767565 77.2700195,61.4316406 C78.232915,61.6865247 79.186356,61.8139648 80.1303711,61.8139648 C81.5747143,61.8139648 82.6414354,61.5685246 83.3305664,61.0776367 C84.0196975,60.5867488 84.3642578,59.798508 84.3642578,58.7128906 C84.3642578,57.740555 83.9677774,57.0514343 83.1748047,56.6455078 C82.381832,56.2395813 81.1168707,56.0366211 79.3798828,56.0366211 L77.8081055,56.0366211 L77.8081055,52.6806641 L79.4082031,52.6806641 C81.0130289,52.6806641 82.1859501,52.4706238 82.927002,52.0505371 C83.6680538,51.6304504 84.0385742,50.9106496 84.0385742,49.8911133 C84.0385742,48.3240482 83.0568132,47.5405273 81.0932617,47.5405273 C80.4135708,47.5405273 79.7220901,47.6538075 79.0187988,47.8803711 C78.3155076,48.1069347 77.5343467,48.4986951 76.675293,49.0556641 L74.6503906,46.0395508 C76.5384209,44.680169 78.7898632,44.0004883 81.4047852,44.0004883 C83.5476995,44.0004883 85.2398213,44.4347287 86.4812012,45.3032227 C87.7225811,46.1717166 88.3432617,47.3800378 88.3432617,48.9282227 Z M106.170898,60.7094727 L103.678711,60.7094727 L103.678711,65 L99.4023438,65 L99.4023438,60.7094727 L90.5664062,60.7094727 L90.5664062,57.6650391 L99.6430664,44.2978516 L103.678711,44.2978516 L103.678711,57.3110352 L106.170898,57.3110352 L106.170898,60.7094727 Z M99.4023438,57.3110352 L99.4023438,53.7993164 C99.4023438,53.214027 99.4259438,52.3644261 99.4731445,51.2504883 C99.5203453,50.1365504 99.5581053,49.4899098 99.5864258,49.3105469 L99.4731445,49.3105469 C99.1238589,50.0846393 98.7037785,50.8398401 98.2128906,51.5761719 L94.4179688,57.3110352 L99.4023438,57.3110352 Z" id="icon-number"></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.6 KiB

9
src/core_plugins/metric_vis/public/metric_vis.js
View file

@ -1,10 +1,12 @@
import 'plugins/metric_vis/metric_vis.less';
import 'plugins/metric_vis/metric_vis_controller';
import VisVisTypeProvider from 'ui/vis/vis_type';
import TemplateVisTypeTemplateVisTypeProvider from 'ui/template_vis_type/template_vis_type';
import VisSchemasProvider from 'ui/vis/schemas';
import metricVisTemplate from 'plugins/metric_vis/metric_vis.html';
import metricVisParamsTemplate from 'plugins/metric_vis/metric_vis_params.html';
import visTypesRegistry from 'ui/registry/vis_types';
import image from './images/icon-number.svg';
// we need to load the css ourselves
// we also need to load the controller and used by the template
@ -13,6 +15,7 @@ import visTypesRegistry from 'ui/registry/vis_types';
visTypesRegistry.register(MetricVisProvider);
function MetricVisProvider(Private) {
const VisType = Private(VisVisTypeProvider);
const TemplateVisType = Private(TemplateVisTypeTemplateVisTypeProvider);
const Schemas = Private(VisSchemasProvider);
@ -21,9 +24,9 @@ function MetricVisProvider(Private) {
return new TemplateVisType({
name: 'metric',
title: 'Metric',
description: 'One big number for all of your one big number needs. Perfect for showing ' +
'a count of hits, or the exact average of a numeric field.',
icon: 'fa-calculator',
image,
description: 'Display a calculation as a single number',
category: VisType.CATEGORY.DATA,
template: metricVisTemplate,
params: {
defaults: {

23
src/core_plugins/metrics/public/images/icon-visualbuilder.svg Normal file
View file

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="60px" height="48px" viewBox="0 0 60 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>Group 2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Visualize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Visualize-Create-New" transform="translate(-596.000000, -436.000000)">
<g id="time-series" transform="translate(555.000000, 361.000000)">
<g id="visual-builder" transform="translate(0.000000, 44.000000)">
<g id="Group-2" transform="translate(38.000000, 31.000000)">
<rect id="x-axis" fill="#000000" x="3" y="44" width="60" height="4"></rect>
<g id="icon-1">
<polygon id="Path-3" fill="#000000" points="3 37 18 39.3791667 35 37 51 33.06875 63 37 63 6.323e-13 50 5.36079545 33 6.39791667 17 1.00208333 3 6.86041667"></polygon>
<polygon id="Rectangle" fill="#F6F6F6" points="23 14 36.2 14 45 18.8 45 26 23 26"></polygon>
<rect id="Rectangle-Copy" fill="#F6F6F6" x="31" y="16" width="6" height="23" rx="2"></rect>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

15
src/core_plugins/metrics/public/kbn_vis_types/index.js
View file

@ -3,23 +3,26 @@ import './editor_controller';
import '../visualizations/less/main.less';
import 'react-select/dist/react-select.css';
import '../less/main.less';
import image from '../images/icon-visualbuilder.svg';
// register the provider with the visTypes registry so that other know it exists
import VisVisTypeProvider from 'ui/vis/vis_type';
// register the provider with the visTypes registry so that other know it exists
import visTypes from 'ui/registry/vis_types';
visTypes.register(MetricsVisProvider);
export default function MetricsVisProvider(Private) {
const VisType = Private(VisVisTypeProvider);
const TemplateVisType = Private(require('ui/template_vis_type'));
// return the visType object, which kibana will use to display and configure new
// Vis object of this type.
return new TemplateVisType({
name: 'metrics',
title: 'Time Series Visual Builder',
icon: 'fa-area-chart',
description: `Experimental Feature: Create a time series based visualization for metrics. Perfect
for creating visualizations for time series based metrics using the
powerful pipeline aggs Elasticsearch feature`,
title: 'Visual Builder',
image,
description: 'Build time-series using a visual pipeline interface',
category: VisType.CATEGORY.TIME,
isExperimental: true,
template: require('./vis.html'),
fullEditor: true,
params: {

16
src/core_plugins/table_vis/public/images/icon-table.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="56px" height="45px" viewBox="0 0 56 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>icon-table</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Visualize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Visualize-Create-New" transform="translate(-119.000000, -654.000000)" fill="#000000">
<g id="data" transform="translate(74.000000, 576.000000)">
<g id="table" transform="translate(2.000000, 44.000000)">
<path d="M43,34 L99,34 L99,79 L43,79 L43,34 Z M47,42 L47,51 L61,51 L61,42 L47,42 Z M64,42 L64,51 L78,51 L78,42 L64,42 Z M81,42 L81,51 L95,51 L95,42 L81,42 Z M47,54 L47,63 L61,63 L61,54 L47,54 Z M64,54 L64,63 L78,63 L78,54 L64,54 Z M81,54 L81,63 L95,63 L95,54 L81,54 Z M47,66 L47,75 L61,75 L61,66 L47,66 Z M64,66 L64,75 L78,75 L78,66 L64,66 Z M81,66 L81,75 L95,75 L95,66 L81,66 Z" id="icon-table"></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

11
src/core_plugins/table_vis/public/table_vis.js
View file

@ -3,10 +3,12 @@ import 'plugins/table_vis/table_vis_controller';
import 'plugins/table_vis/table_vis_params';
import 'ui/agg_table';
import 'ui/agg_table/agg_table_group';
import VisVisTypeProvider from 'ui/vis/vis_type';
import TemplateVisTypeTemplateVisTypeProvider from 'ui/template_vis_type/template_vis_type';
import VisSchemasProvider from 'ui/vis/schemas';
import tableVisTemplate from 'plugins/table_vis/table_vis.html';
import visTypesRegistry from 'ui/registry/vis_types';
import image from './images/icon-table.svg';
// we need to load the css ourselves
// we also need to load the controller and used by the template
@ -20,6 +22,7 @@ visTypesRegistry.register(TableVisTypeProvider);
// define the TableVisType
function TableVisTypeProvider(Private) {
const VisType = Private(VisVisTypeProvider);
const TemplateVisType = Private(TemplateVisTypeTemplateVisTypeProvider);
const Schemas = Private(VisSchemasProvider);
@ -30,10 +33,10 @@ function TableVisTypeProvider(Private) {
// Vis object of this type.
return new TemplateVisType({
name: 'table',
title: 'Data table',
icon: 'fa-table',
description: 'The data table provides a detailed breakdown, in tabular format, of the results of a composed ' +
'aggregation. Tip, a data table is available from many other charts by clicking the grey bar at the bottom of the chart.',
title: 'Data Table',
image,
description: 'Display values in a table',
category: VisType.CATEGORY.DATA,
template: tableVisTemplate,
params: {
defaults: {

21
src/core_plugins/tagcloud/public/images/icon-tagcloud.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

12
src/core_plugins/tagcloud/public/tag_cloud_vis.js
View file

@ -1,23 +1,25 @@
import 'plugins/tagcloud/tag_cloud.less';
import 'plugins/tagcloud/tag_cloud_controller';
import 'plugins/tagcloud/tag_cloud_vis_params';
import VisVisTypeProvider from 'ui/vis/vis_type';
import TemplateVisTypeTemplateVisTypeProvider from 'ui/template_vis_type/template_vis_type';
import VisSchemasProvider from 'ui/vis/schemas';
import tagCloudTemplate from 'plugins/tagcloud/tag_cloud_controller.html';
import visTypes from 'ui/registry/vis_types';
import image from './images/icon-tagcloud.svg';
visTypes.register(function TagCloudProvider(Private) {
const VisType = Private(VisVisTypeProvider);
const TemplateVisType = Private(TemplateVisTypeTemplateVisTypeProvider);
const Schemas = Private(VisSchemasProvider);
return new TemplateVisType({
name: 'tagcloud',
title: 'Tag cloud',
title: 'Tag Cloud',
image,
implementsRenderComplete: true,
description: 'A tag cloud visualization is a visual representation of text data, ' +
'typically used to visualize individual words. The font size of a word corresponds ' +
'with its importance.',
icon: 'fa-cloud',
description: 'A group of words, sized according to their importance',
category: VisType.CATEGORY.OTHER,
template: tagCloudTemplate,
params: {
defaults: {

16
src/core_plugins/timelion/public/images/icon-timelion.svg Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="50px" height="44px" viewBox="0 0 50 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>Timelion</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Visualize" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Visualize-Create-New" transform="translate(-762.000000, -440.000000)" fill="#000000">
<g id="time-series" transform="translate(555.000000, 361.000000)">
<g id="time-lion" transform="translate(160.000000, 44.000000)">
<path d="M83.5270193,48.1421068 C82.4492261,48.6394517 81.4595901,48.5116424 80.5382048,47.7531219 C80.2026386,47.478054 79.5485688,46.6056165 79.7248833,46.3638902 C81.4880279,43.9494055 84.4199667,44.2105811 84.624719,44.3772889 C84.806721,44.5245474 85.0655051,45.3886496 85.0655051,45.8443175 C85.0655051,46.7667674 84.4228105,47.7281157 83.5270193,48.1421068 M79.9836674,67.8386337 C79.3608793,69.2056377 77.0033843,70.1892138 73.5936902,70.5004017 L73.5936902,70.5004017 C71.4381037,70.6976726 68.7421988,70.4809524 66.9051158,69.9613798 C64.9485941,69.411244 63.7627372,68.5971542 63.4840466,67.6107997 C62.9437281,65.7131092 64.4850577,63.1346952 67.2236194,61.3425863 C68.7421988,60.3534534 70.5650628,59.6810652 71.733857,59.6810652 C72.7832124,59.6810652 74.3387609,60.1422901 75.561587,60.8202352 C77.4384829,61.8593805 79.1987837,63.5764709 79.8301032,64.9879303 C80.2708894,65.9659494 80.327765,67.0745563 79.9836674,67.8386337 M57.7680456,44.7551599 C57.8874844,44.4856489 58.0154546,44.2744857 58.0524237,44.2689288 C61.0469257,43.7771408 62.7389758,46.1443916 62.8328206,46.2360809 C62.9892286,46.3888964 62.6138494,47.17798 62.175907,47.6197557 C61.9512483,47.8448112 61.5787129,48.1087652 61.3483666,48.203233 C59.0960916,49.1479105 56.8068474,46.9390321 57.7680456,44.7551599 M67.1127119,50.0370188 C68.6227599,48.5171993 74.1482276,48.3671623 76.1417185,49.7897356 C77.4072013,50.6899577 76.9976967,52.4292758 75.1748327,53.9185322 C74.5179192,54.4547756 73.3405936,55.0604806 72.5955228,55.2438592 C71.6741376,55.4716932 70.9859424,55.3633331 69.845586,54.8020835 C68.1279419,53.9629876 66.8397089,52.5237435 66.7401765,51.3317827 C66.6833009,50.6844008 66.7714581,50.3815483 67.1127119,50.0370188 M95.1637736,52.5681989 C95.0045218,52.0514048 94.8737079,51.5874014 94.8737079,51.542946 C94.8737079,51.4957121 95.0955228,51.009481 95.3685259,50.4621237 C97.1089202,46.986266 97.475768,42.9463802 96.3780683,39.3566055 L96.1960663,38.7647928 L95.6386851,38.489725 C93.0650628,37.2255241 87.7557225,36.9226716 84.1611826,37.8367861 L83.3791427,38.034057 L81.9430329,37.3477765 C81.1524617,36.9726839 80.1343878,36.5309083 79.6850704,36.3669789 C76.1644687,35.1027781 72.1092362,34.6915655 68.5146962,35.2333659 C66.0804192,35.6029015 63.1854495,36.5614714 60.9928939,37.728426 L60.4696381,38.0090508 L59.7444738,37.8173368 C58.6496179,37.5311551 57.3500097,37.3755611 55.6863974,37.3255488 C52.7715213,37.2394164 50.1467109,37.6534075 48.4830986,38.4647188 L47.774997,38.8092482 L47.5446507,39.6205596 C47.4195243,40.0678922 47.2574288,40.7458372 47.1863342,41.1264867 C47.0043322,42.1128412 46.941769,44.0827718 47.0612078,45.1552586 C47.2574288,46.9557029 47.8631543,49.036772 48.6196002,50.5065791 L49.0006669,51.2484288 L48.7418828,52.0680755 C48.0252498,54.3325232 47.7806846,55.8995765 47.7806846,58.2140366 C47.7835284,60.1923025 47.9342488,61.2953524 48.4461295,63.0346705 C49.9732402,68.2165047 54.3754141,72.487003 60.5151386,74.7431152 C61.2061775,74.9987339 61.3085537,75.0681955 61.8886851,75.6572297 C62.6821002,76.468541 63.6006416,77.1381507 64.6300906,77.6549449 C65.7931972,78.2384222 66.5667058,78.4634777 68.1734424,78.6913117 C70.587813,79.0358412 72.4277397,79.0858535 74.5918575,78.8719118 L74.5918575,78.8719118 C75.7805582,78.7552164 77.2536371,78.5023762 77.8764253,78.3078838 C79.338129,77.8494373 80.8140517,76.9381013 82.0368777,75.7350267 C82.8729495,74.91538 82.9298252,74.873703 83.7374591,74.5625151 C89.3880532,72.3619721 93.4063166,68.5026865 95.1182731,63.6292617 C95.8377498,61.5815342 96.1505658,59.1364864 95.9742514,56.9331649 C95.8519688,55.4439086 95.5505279,53.815729 95.1637736,52.5681989" id="Timelion"></path>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.4 KiB

10
src/core_plugins/timelion/public/vis/index.js
View file

@ -1,3 +1,6 @@
import VisVisTypeProvider from 'ui/vis/vis_type';
import image from '../images/icon-timelion.svg';
define(function (require) {
// we also need to load the controller and used by the template
require('plugins/timelion/vis/timelion_vis_controller');
@ -10,6 +13,7 @@ define(function (require) {
require('ui/registry/vis_types').register(TimelionVisProvider);
function TimelionVisProvider(Private) {
const VisType = Private(VisVisTypeProvider);
const TemplateVisType = Private(require('ui/template_vis_type'));
// return the visType object, which kibana will use to display and configure new
@ -17,9 +21,9 @@ define(function (require) {
return new TemplateVisType({
name: 'timelion',
title: 'Timelion',
icon: 'fa-clock-o',
description: 'Create timeseries charts using the timelion expression language. ' +
'Perfect for computing and combining timeseries sets with functions such as derivatives and moving averages',
image,
description: 'Build time-series using functional expressions',
category: VisType.CATEGORY.TIME,
template: require('plugins/timelion/vis/timelion_vis.html'),
params: {
editor: require('plugins/timelion/vis/timelion_vis_params.html')

51
src/ui/public/vis/vis_type.js
View file

@ -3,30 +3,43 @@ import VisSchemasProvider from './schemas';
export default function VisTypeFactory(Private) {
const VisTypeSchemas = Private(VisSchemasProvider);
function VisType(opts) {
opts = opts || {};
class VisType {
constructor(opts) {
opts = opts || {};
this.name = opts.name;
this.title = opts.title;
this.responseConverter = opts.responseConverter;
this.hierarchicalData = opts.hierarchicalData || false;
this.icon = opts.icon;
this.description = opts.description;
this.schemas = opts.schemas || new VisTypeSchemas();
this.params = opts.params || {};
this.requiresSearch = opts.requiresSearch == null ? true : opts.requiresSearch; // Default to true unless otherwise specified
this.fullEditor = opts.fullEditor == null ? false : opts.fullEditor;
this.implementsRenderComplete = opts.implementsRenderComplete || false;
this.name = opts.name;
this.title = opts.title;
this.responseConverter = opts.responseConverter;
this.hierarchicalData = opts.hierarchicalData || false;
this.icon = opts.icon;
this.image = opts.image;
this.description = opts.description;
this.category = opts.category || VisType.CATEGORY.OTHER;
this.isExperimental = opts.isExperimental;
this.schemas = opts.schemas || new VisTypeSchemas();
this.params = opts.params || {};
this.requiresSearch = opts.requiresSearch == null ? true : opts.requiresSearch; // Default to true unless otherwise specified
this.fullEditor = opts.fullEditor == null ? false : opts.fullEditor;
this.implementsRenderComplete = opts.implementsRenderComplete || false;
if (!this.params.optionTabs) {
this.params.optionTabs = [
{ name: 'options', title: 'Options', editor: this.params.editor }
];
if (!this.params.optionTabs) {
this.params.optionTabs = [
{ name: 'options', title: 'Options', editor: this.params.editor }
];
}
}
createRenderbot() {
throw new Error('not implemented');
}
}
VisType.prototype.createRenderbot = function () {
throw new Error('not implemented');
VisType.CATEGORY = {
BASIC: 'basic',
DATA: 'data',
MAP: 'map',
OTHER: 'other',
TIME: 'time',
};
return VisType;

16
test/functional/apps/visualize/_chart_types.js
View file

@ -16,9 +16,21 @@ bdd.describe('visualize app', function describeIndexTests() {
bdd.describe('chart types', function indexPatternCreation() {
bdd.it('should show the correct chart types', function () {
const expectedChartTypes = [
'Area chart', 'Data table', 'Heatmap chart', 'Horizontal bar chart', 'Line chart', 'Markdown widget',
'Metric', 'Pie chart', 'Tag cloud', 'Tile map', 'Time Series Visual Builder', 'Timelion', 'Vertical bar chart'
'Area',
'Heat Map',
'Horizontal Bar',
'Line',
'Pie',
'Vertical Bar',
'Data Table',
'Metric',
'Tile Map',
'Timelion',
'Visual Builder',
'Markdown',
'Tag Cloud',
];
// find all the chart types and make sure there all there
return PageObjects.visualize.getChartTypes()
.then(function testChartTypes(chartTypes) {

16
test/support/page_objects/visualize_page.js
View file

@ -16,28 +16,28 @@ export default class VisualizePage {
clickAreaChart() {
return this.remote
.setFindTimeout(defaultFindTimeout)
.findByPartialLinkText('Area chart')
.findByPartialLinkText('Area')
.click();
}
clickDataTable() {
return this.remote
.setFindTimeout(defaultFindTimeout)
.findByPartialLinkText('Data table')
.findByPartialLinkText('Data Table')
.click();
}
clickLineChart() {
return this.remote
.setFindTimeout(defaultFindTimeout)
.findByPartialLinkText('Line chart')
.findByPartialLinkText('Line')
.click();
}
clickMarkdownWidget() {
return this.remote
.setFindTimeout(defaultFindTimeout)
.findByPartialLinkText('Markdown widget')
.findByPartialLinkText('Markdown')
.click();
}
@ -58,28 +58,28 @@ export default class VisualizePage {
clickPieChart() {
return this.remote
.setFindTimeout(defaultFindTimeout)
.findByPartialLinkText('Pie chart')
.findByPartialLinkText('Pie')
.click();
}
clickTileMap() {
return this.remote
.setFindTimeout(defaultFindTimeout)
.findByPartialLinkText('Tile map')
.findByPartialLinkText('Tile Map')
.click();
}
clickVerticalBarChart() {
return this.remote
.setFindTimeout(defaultFindTimeout)
.findByPartialLinkText('Vertical bar chart')
.findByPartialLinkText('Vertical Bar')
.click();
}
clickHeatmapChart() {
return this.remote
.setFindTimeout(defaultFindTimeout)
.findByPartialLinkText('Heatmap chart')
.findByPartialLinkText('Heat Map')
.click();
}

4
ui_framework/components/gallery/_gallery.scss Normal file
View file

@ -0,0 +1,4 @@
.kuiGallery {
display: flex;
flex-wrap: wrap;
}

54
ui_framework/components/gallery/_gallery_button.scss Normal file
View file

@ -0,0 +1,54 @@
$galleryButtonSize: 140px;
$galleryButtonRhythm: 20px;
$galleryButtonIconSize: 50px;
.kuiGalleryButton {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
width: $galleryButtonSize;
height: $galleryButtonSize;
margin: 0 $galleryButtonRhythm $galleryButtonRhythm 0;
padding: 25px 10px 10px;
line-height: $lineHeight;
background-color: #F6F6F6;
border: 1px solid #CED5DA;
border-radius: $buttonBorderRadius;
text-decoration: none;
&:hover {
background-color: #FFFFFF;
border-color: #00A6FF;
}
}
.kuiGalleryButton__image {
display: flex;
align-items: center;
justify-content: center;
width: $galleryButtonIconSize;
height: $galleryButtonIconSize;
margin-bottom: 20px;
}
/**
* 1. Truncate overflowing text.
*/
.kuiGalleryButton__label {
font-size: $fontSize;
color: $fontColor;
text-align: center;
max-width: 100%; /* 1 */
white-space: nowrap; /* 1 */
overflow: hidden; /* 1 */
text-overflow: ellipsis; /* 1 */
}
.kuiGalleryButton__icon {
position: absolute;
top: 5px;
right: 5px;
color: $subduedFontColor;
}

2
ui_framework/components/gallery/_index.scss Normal file
View file

@ -0,0 +1,2 @@
@import "gallery";
@import "gallery_button";

1
ui_framework/components/index.scss
View file

@ -249,6 +249,7 @@ body {
@import "event/index";
@import "form/index";
@import "form_layout/index";
@import "gallery/index";
@import "header_bar/index";
@import "icon/index";
@import "info_panel/index";

80
ui_framework/dist/ui_framework.css vendored
View file

@ -820,6 +820,86 @@ body {
.kuiFieldGroupSection--wide > * {
width: 100%; }
.kuiGallery {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.kuiGalleryButton {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
width: 140px;
height: 140px;
margin: 0 20px 20px 0;
padding: 25px 10px 10px;
line-height: 1.5;
background-color: #F6F6F6;
border: 1px solid #CED5DA;
border-radius: 4px;
text-decoration: none; }
.kuiGalleryButton:hover {
background-color: #FFFFFF;
border-color: #00A6FF; }
.kuiGalleryButton__image {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
width: 50px;
height: 50px;
margin-bottom: 20px; }
/**
* 1. Truncate overflowing text.
*/
.kuiGalleryButton__label {
font-size: 14px;
color: #191E23;
text-align: center;
max-width: 100%;
/* 1 */
white-space: nowrap;
/* 1 */
overflow: hidden;
/* 1 */
text-overflow: ellipsis;
/* 1 */ }
.kuiGalleryButton__icon {
position: absolute;
top: 5px;
right: 5px;
color: #9fa3a7; }
.kuiHeaderBar {
display: -webkit-box;
display: -webkit-flex;

6
ui_framework/doc_site/src/services/routes/routes.js
View file

@ -30,6 +30,9 @@ import FormExample
import FormLayoutExample
from '../../views/form_layout/form_layout_example';
import GalleryExample
from '../../views/gallery/gallery_example';
import HeaderBarExample
from '../../views/header_bar/header_bar_example';
@ -118,6 +121,9 @@ const components = [{
}, {
name: 'FormLayout',
component: FormLayoutExample,
}, {
name: 'Gallery',
component: GalleryExample,
}, {
name: 'HeaderBar',
component: HeaderBarExample,

81
ui_framework/doc_site/src/views/gallery/gallery.html Normal file
View file

@ -0,0 +1,81 @@
<div class="kuiVerticalRhythm">
<div class="kuiSubTitle">
Some items
</div>
<div class="kuiGallery">
<a class="kuiGalleryButton" href="#">
<div class="kuiGalleryButton__image" style="background-color: lightgray">
</div>
<div class="kuiGalleryButton__label">
Item A
</div>
<div class="kuiGalleryButton__icon kuiIcon fa-flask">
</div>
</a>
<a class="kuiGalleryButton" href="#">
<div class="kuiGalleryButton__image" style="background-color: lightgray">
</div>
<div class="kuiGalleryButton__label">
Item B
</div>
</a>
<a class="kuiGalleryButton" href="#">
<div class="kuiGalleryButton__image" style="background-color: lightgray">
</div>
<div class="kuiGalleryButton__label">
Item C
</div>
</a>
<a class="kuiGalleryButton" href="#">
<div class="kuiGalleryButton__image" style="background-color: lightgray">
</div>
<div class="kuiGalleryButton__label">
Item D
</div>
</a>
<a class="kuiGalleryButton" href="#">
<div class="kuiGalleryButton__image" style="background-color: lightgray">
</div>
<div class="kuiGalleryButton__label">
Item E
</div>
</a>
</div>
</div>
<div class="kuiVerticalRhythm">
<div class="kuiSubTitle">
Some more items
</div>
<div class="kuiGallery">
<a class="kuiGalleryButton" href="#">
<div class="kuiGalleryButton__image" style="background-color: lightgray">
</div>
<div class="kuiGalleryButton__label">
Item F
</div>
</a>
<a class="kuiGalleryButton" href="#">
<div class="kuiGalleryButton__image" style="background-color: lightgray">
</div>
<div class="kuiGalleryButton__label">
Item G with a long label that wraps
</div>
</a>
</div>
</div>

26
ui_framework/doc_site/src/views/gallery/gallery_example.js Normal file
View file

@ -0,0 +1,26 @@
import React from 'react';
import {
GuideDemo,
GuidePage,
GuideSection,
GuideSectionTypes,
} from '../../components';
const galleryHtml = require('./gallery.html');
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="Gallery"
source={[{
type: GuideSectionTypes.HTML,
code: galleryHtml,
}]}
>
<GuideDemo
html={galleryHtml}
/>
</GuideSection>
</GuidePage>
);