additional option tabs

src/core_plugins/kbn_vislib_vis_types/public/area.js

@@ -96,7 +96,16 @@ export default function PointSeriesVisType(Private) {
         value: 'step-after',
         text: 'stepped',
       }],
-      editor: pointSeriesTemplate
+      editor: pointSeriesTemplate,
+      optionTabs: [
+        {
+          name: 'axes',
+          title: 'Axes',
+          editor: '<div><vislib-category-axis></vislib-category-axis><vislib-value-axes></vislib-value-axes></div>'
+        },
+        { name: 'series', title: 'Series', editor: '<vislib-series></vislib-series>' },
+        { name: 'options', title: 'Other Options', editor: pointSeriesTemplate },
+      ],
     },
     schemas: new Schemas([
       {

src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html

@@ -1,123 +1,113 @@
-<div>
-  <div class="kuiSideBarCollapsibleTitle">
-    <div
-      class="kuiSideBarCollapsibleTitle__label"
-      ng-click="isCategoryAxisOpen = !isCategoryAxisOpen"
+<div class="kuiSideBarSection">
+  <div class="kuiSideBarSectionTitle">
+    <div class="kuiSideBarSectionTitle__text">
+      Category Axis
+    </div>
+  </div>
+
+  <!-- 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': isCategoryAxisOpen, 'fa-caret-right': !isCategoryAxisOpen }"
-        class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
+        ng-class="{ 'fa-caret-down': isCategoryAxisAdvancedOptionsOpen, 'fa-caret-right': !isCategoryAxisAdvancedOptionsOpen }"
+        class="fa fa-caret-right kuiSideBarOptionsLink__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">
+      <span class="kuiSideBarOptionsLink__text">
+        <span ng-show="!isCategoryAxisAdvancedOptionsOpen">
           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>
+        <span ng-show="isCategoryAxisAdvancedOptionsOpen">
+          Hide
+        </span>
+        Advanced Options
+      </span>
+    </a>
 
-      <div ng-show="isCategoryAxisAdvancedOptionsOpen">
-        <!-- Labels -->
-        <div class="kuiSideBarSection">
-          <h6 class="kuiSideBarFormSectionTitle">
-            Labels
-          </h6>
+    <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 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 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">
-              <select
-                id="rotateLabels"
-                class="kuiSelect kuiSideBarSelect"
-                ng-model="vis.params.categoryAxes[0].labels.rotate"
-                ng-options="mode.value as mode.name for mode in rotateOptions"
-              ></select>
-            </div>
+        <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="rotateLabels">
+            Rotate
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <select
+              id="rotateLabels"
+              class="kuiSelect kuiSideBarSelect"
+              ng-model="vis.params.categoryAxes[0].labels.rotate"
+              ng-options="mode.value as mode.name for mode in rotateOptions"
+            ></select>
           </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 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>

src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.js

@@ -9,31 +9,12 @@ module.directive('vislibCategoryAxis', function ($parse, $compile) {
     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.rotateOptions = [
         { name: 'horizontal', value: 0 },
         { name: 'vertical', value: 90 },
         { name: 'angled', value: 75 },
       ];
 
-      $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 => {

src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.js

@@ -10,15 +10,30 @@ module.directive('vislibValueAxes', function ($parse, $compile) {
     replace: true,
     link: function ($scope) {
       let isCategoryAxisHorizontal = true;
+
+      function mapPosition(position) {
+        switch (position) {
+          case 'bottom': return 'left';
+          case 'top': return 'right';
+          case 'left': return 'bottom';
+          case 'right': return 'top';
+        }
+      }
+
       $scope.rotateOptions = [
         { name: 'horizontal', value: 0 },
         { name: 'vertical', value: 90 },
         { name: 'angled', value: 75 },
       ];
 
-
       $scope.$watch('vis.params.categoryAxes[0].position', position => {
         isCategoryAxisHorizontal = ['top', 'bottom'].includes(position);
+        $scope.vis.params.valueAxes.forEach(axis => {
+          const axisIsHorizontal = ['top', 'bottom'].includes(axis.position);
+          if (axisIsHorizontal === isCategoryAxisHorizontal) {
+            axis.position = mapPosition(axis.position);
+          }
+        });
       });
 
       $scope.getSeries = function (axis) {

src/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html

@@ -52,12 +52,6 @@
     </div>
 
     <vislib-grid></vislib-grid>
-
-    <vislib-category-axis></vislib-category-axis>
   </div>
 
-  <vislib-value-axes></vislib-value-axes>
-
-  <vislib-series></vislib-series>
-
 </div>

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

@@ -24,13 +24,13 @@
               Data
             </a>
           </li>
-          <li ng-class="{active: sidebar.section == 'options'}">
+          <li ng-repeat="tab in vis.type.params.optionTabs" ng-class="{active: sidebar.section == tab.name}">
             <a
               class="vis-editor-subnav-link"
-              ng-class="{'is-vis-editor-sub-nav-link-selected': sidebar.section == 'options'}"
-              ng-click="sidebar.section='options'"
+              ng-class="{'is-vis-editor-sub-nav-link-selected': sidebar.section == tab.name}"
+              ng-click="sidebar.section=tab.name"
             >
-              Options
+              {{tab.title}}
             </a>
           </li>
         </ul>
@@ -86,11 +86,9 @@
       <vis-editor-agg-group ng-if="vis.type.schemas.buckets" group-name="buckets"></vis-editor-agg-group>
     </div>
 
-    <div class="vis-editor-config" ng-show="sidebar.section == 'options'">
-      <!-- vis options -->
-      <vis-editor-vis-options vis="vis" saved-vis="savedVis" ui-state="uiState"></vis-editor-vis-options>
+    <div class="vis-editor-config" ng-repeat="tab in vis.type.params.optionTabs" ng-show="sidebar.section == tab.name">
+      <vis-editor-vis-options vis="vis" saved-vis="savedVis" ui-state="uiState" editor="tab.editor"></vis-editor-vis-options>
     </div>
 
-
   </form>
 </div>

src/core_plugins/kibana/public/visualize/editor/vis_options.js

@@ -13,10 +13,11 @@ uiModules
       vis: '=',
       savedVis: '=',
       uiState: '=',
+      editor: '='
     },
     link: function ($scope, $el) {
       const $optionContainer = $el.find('.visualization-options');
-      const $editor = $compile($scope.vis.type.params.editor)($scope);
+      const $editor = $compile($scope.editor)($scope);
       $optionContainer.append($editor);
 
       $scope.$watch('vis.type.schemas.all.length', function (len) {

src/ui/public/vis/vis_type.js

@@ -17,6 +17,12 @@ export default function VisTypeFactory(Private) {
     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 }
+      ];
+    }
   }
 
   VisType.prototype.createRenderbot = function (vis, $el, uiState) {