-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
adding new options to kibana visualizations
- Loading branch information
Showing
19 changed files
with
1,282 additions
and
70 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
123 changes: 123 additions & 0 deletions
123
src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| <div> | ||
| <div class="kuiSideBarCollapsibleTitle"> | ||
| <div | ||
| class="kuiSideBarCollapsibleTitle__label" | ||
| ng-click="isCategoryAxisOpen = !isCategoryAxisOpen" | ||
| > | ||
| <span | ||
| aria-hidden="true" | ||
| ng-class="{ 'fa-caret-down': isCategoryAxisOpen, 'fa-caret-right': !isCategoryAxisOpen }" | ||
| class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret" | ||
| ></span> | ||
| <span class="kuiSideBarCollapsibleTitle__text"> | ||
| Category Axis | ||
| </span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div ng-show="isCategoryAxisOpen" class="kuiSideBarCollapsibleSection"> | ||
| <!-- General --> | ||
| <div class="kuiSideBarSection"> | ||
| <div class="kuiSideBarFormRow"> | ||
| <label class="kuiSideBarFormRow__label" for="categoryAxisShow"> | ||
| Show | ||
| </label> | ||
| <div class="kuiSideBarFormRow__control"> | ||
| <input class="kuiCheckBox" id="categoryAxisShow" type="checkbox" ng-model="vis.params.categoryAxes[0].show"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="kuiSideBarFormRow"> | ||
| <label class="kuiSideBarFormRow__label" for="categoryAxisPosition"> | ||
| Position | ||
| </label> | ||
| <div class="kuiSideBarFormRow__control"> | ||
| <select | ||
| id="categoryAxisPosition" | ||
| class="kuiSelect kuiSideBarSelect" | ||
| ng-model="vis.params.categoryAxes[0].position" | ||
| ng-options="mode for mode in vis.type.params.positions" | ||
| ></select> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Advanced options --> | ||
| <div class="kuiSideBarSection"> | ||
| <a | ||
| href="" | ||
| class="kuiSideBarOptionsLink" | ||
| ng-click="isCategoryAxisAdvancedOptionsOpen = !isCategoryAxisAdvancedOptionsOpen" | ||
| > | ||
| <span | ||
| aria-hidden="true" | ||
| ng-class="{ 'fa-caret-down': isCategoryAxisAdvancedOptionsOpen, 'fa-caret-right': !isCategoryAxisAdvancedOptionsOpen }" | ||
| class="fa fa-caret-right kuiSideBarOptionsLink__caret" | ||
| ></span> | ||
| <span class="kuiSideBarOptionsLink__text"> | ||
| <span ng-show="!isCategoryAxisAdvancedOptionsOpen"> | ||
| Show | ||
| </span> | ||
| <span ng-show="isCategoryAxisAdvancedOptionsOpen"> | ||
| Hide | ||
| </span> | ||
| Advanced Options | ||
| </span> | ||
| </a> | ||
|
|
||
| <div ng-show="isCategoryAxisAdvancedOptionsOpen"> | ||
| <!-- Labels --> | ||
| <div class="kuiSideBarSection"> | ||
| <h6 class="kuiSideBarFormSectionTitle"> | ||
| Labels | ||
| </h6> | ||
|
|
||
| <div class="kuiSideBarFormRow"> | ||
| <label class="kuiSideBarFormRow__label" for="showLabels"> | ||
| Show Labels | ||
| </label> | ||
| <div class="kuiSideBarFormRow__control"> | ||
| <input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="vis.params.categoryAxes[0].labels.show"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="kuiSideBarFormRow"> | ||
| <label class="kuiSideBarFormRow__label" for="showFilter"> | ||
| Filter Labels | ||
| </label> | ||
| <div class="kuiSideBarFormRow__control"> | ||
| <input class="kuiCheckBox" id="showFilter" type="checkbox" ng-model="vis.params.categoryAxes[0].labels.filter"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="kuiSideBarFormRow"> | ||
| <label class="kuiSideBarFormRow__label" for="rotateLabels"> | ||
| Rotate | ||
| </label> | ||
| <div class="kuiSideBarFormRow__control"> | ||
| <input | ||
| id="rotateLabels" | ||
| class="kuiInput kuiSideBarInput" | ||
| type="number" | ||
| ng-model="vis.params.categoryAxes[0].labels.rotate" | ||
| > | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="kuiSideBarFormRow"> | ||
| <label class="kuiSideBarFormRow__label" for="truncateLabels"> | ||
| Truncate | ||
| </label> | ||
| <div class="kuiSideBarFormRow__control"> | ||
| <input | ||
| id="truncateLabels" | ||
| class="kuiInput kuiSideBarInput" | ||
| type="number" | ||
| ng-model="vis.params.categoryAxes[0].labels.truncate" | ||
| > | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
46 changes: 46 additions & 0 deletions
46
src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import _ from 'lodash'; | ||
| import uiModules from 'ui/modules'; | ||
| import vislibValueAxesTemplate from 'plugins/kbn_vislib_vis_types/controls/point_series/category_axis.html'; | ||
| const module = uiModules.get('kibana'); | ||
|
|
||
| module.directive('vislibCategoryAxis', function ($parse, $compile) { | ||
| return { | ||
| restrict: 'E', | ||
| template: vislibValueAxesTemplate, | ||
| replace: true, | ||
| link: function ($scope) { | ||
| function mapPosition(position) { | ||
| switch (position) { | ||
| case 'bottom': return 'left'; | ||
| case 'top': return 'right'; | ||
| case 'left': return 'bottom'; | ||
| case 'right': return 'top'; | ||
| } | ||
| } | ||
|
|
||
| $scope.$watch('vis.params.categoryAxes[0].position', position => { | ||
| const categoryAxisIsHorizontal = ['top', 'bottom'].includes(position); | ||
| $scope.vis.params.valueAxes.forEach(axis => { | ||
| const axisIsHorizontal = ['top', 'bottom'].includes(axis.position); | ||
| if (axisIsHorizontal === categoryAxisIsHorizontal) { | ||
| axis.position = mapPosition(axis.position); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| let lastAxisTitle = ''; | ||
| $scope.$watch(() => { | ||
| return $scope.vis.aggs.map(agg => { | ||
| return agg.params.field ? agg.makeLabel() : ''; | ||
| }).join(); | ||
| }, () => { | ||
| const agg = $scope.vis.aggs.find(agg => agg.schema.name === 'segment'); | ||
| const label = agg ? agg.makeLabel() : ''; | ||
| if (lastAxisTitle !== label) { | ||
| lastAxisTitle = label; | ||
| $scope.vis.params.categoryAxes[0].title.text = label; | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
| }); |
66 changes: 66 additions & 0 deletions
66
src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| <div> | ||
| <div class="kuiSideBarCollapsibleTitle"> | ||
| <div | ||
| class="kuiSideBarCollapsibleTitle__label" | ||
| ng-click="isGridOpen = !isGridOpen" | ||
| > | ||
| <span | ||
| aria-hidden="true" | ||
| ng-class="{ 'fa-caret-down': isCategoryAxisOpen, 'fa-caret-right': !isCategoryAxisOpen }" | ||
| class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret" | ||
| ></span> | ||
| <span class="kuiSideBarCollapsibleTitle__text"> | ||
| Grid | ||
| </span> | ||
| </div> | ||
| <input | ||
| aria-label="enable" | ||
| ng-model="vis.params.grid.show" | ||
| type="checkbox" | ||
| class="kuiSideBarSectionTitle__action" | ||
| > | ||
| </div> | ||
|
|
||
| <div ng-show="isGridOpen" class="kuiSideBarCollapsibleSection"> | ||
| <!-- General --> | ||
| <div class="kuiSideBarSection"> | ||
| <div class="kuiSideBarFormRow"> | ||
| <label class="kuiSideBarFormRow__label" for="showCategoryLines"> | ||
| Category lines | ||
| </label> | ||
| <div class="kuiSideBarFormRow__control"> | ||
| <input class="kuiCheckBox" id="showCategoryLines" type="checkbox" ng-model="vis.params.grid.categoryLines"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="kuiSideBarFormRow"> | ||
| <label class="kuiSideBarFormRow__label" for="gridAxis"> | ||
| Value Axis | ||
| </label> | ||
| <div class="kuiSideBarFormRow__control"> | ||
| <select | ||
| id="gridAxis" | ||
| class="kuiSelect kuiSideBarSelect" | ||
| ng-model="vis.params.grid.valueAxis" | ||
| ng-options="axis.id as axis.id for axis in vis.params.valueAxes" | ||
| > | ||
| <option value="">Don't show</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="kuiSideBarFormRow"> | ||
| <label class="kuiSideBarFormRow__label" for="gridColor"> | ||
| Color | ||
| </label> | ||
| <div class="kuiSideBarFormRow__control"> | ||
| <input | ||
| id="gridColor" | ||
| class="kuiInput kuiSideBarInput" | ||
| ng-model="vis.params.grid.style.color" | ||
| > | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> |
Oops, something went wrong.