Visualize Refactor

src/core_plugins/kbn_vislib_vis_types/public/area.js

@@ -1,22 +1,22 @@
-import { VisVisTypeProvider } from 'ui/vis/vis_type';
-import { VislibVisTypeVislibVisTypeProvider } from 'ui/vislib_vis_type/vislib_vis_type';
-import { VisSchemasProvider } from 'ui/vis/schemas';
+import { VisFactoryProvider } from 'ui/vis/vis_factory';
+import { VisSchemasProvider } from 'ui/vis/editors/default/schemas';
+import { CATEGORY } from 'ui/vis/vis_category';
 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 VisFactory = Private(VisFactoryProvider);
   const Schemas = Private(VisSchemasProvider);
 
-  return new VislibVisType({
+  return VisFactory.createVislibVisualization({
     name: 'area',
     title: 'Area',
     image,
     description: 'Emphasize the quantity beneath a line chart',
-    category: VisType.CATEGORY.BASIC,
-    params: {
+    category: CATEGORY.BASIC,
+    visConfig: {
       defaults: {
+        type: 'area',
         grid: {
           categoryLines: false,
           style: {
@@ -29,8 +29,7 @@ export default function PointSeriesVisType(Private) {
             type: 'category',
             position: 'bottom',
             show: true,
-            style: {
-            },
+            style: {},
             scale: {
               type: 'linear'
             },
@@ -48,8 +47,7 @@ export default function PointSeriesVisType(Private) {
             type: 'value',
             position: 'left',
             show: true,
-            style: {
-            },
+            style: {},
             scale: {
               type: 'linear',
               mode: 'normal'
@@ -84,31 +82,34 @@ export default function PointSeriesVisType(Private) {
         times: [],
         addTimeMarker: false,
       },
-      positions: ['top', 'left', 'right', 'bottom'],
-      chartTypes: [{
-        value: 'line',
-        text: 'line'
-      }, {
-        value: 'area',
-        text: 'area'
-      }, {
-        value: 'histogram',
-        text: 'bar'
-      }],
-      axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'],
-      scaleTypes: ['linear', 'log', 'square root'],
-      chartModes: ['normal', 'stacked'],
-      interpolationModes: [{
-        value: 'linear',
-        text: 'straight',
-      }, {
-        value: 'cardinal',
-        text: 'smoothed',
-      }, {
-        value: 'step-after',
-        text: 'stepped',
-      }],
-      editor: pointSeriesTemplate,
+    },
+    editorConfig: {
+      collections: {
+        positions: ['top', 'left', 'right', 'bottom'],
+        chartTypes: [{
+          value: 'line',
+          text: 'line'
+        }, {
+          value: 'area',
+          text: 'area'
+        }, {
+          value: 'histogram',
+          text: 'bar'
+        }],
+        axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'],
+        scaleTypes: ['linear', 'log', 'square root'],
+        chartModes: ['normal', 'stacked'],
+        interpolationModes: [{
+          value: 'linear',
+          text: 'straight',
+        }, {
+          value: 'cardinal',
+          text: 'smoothed',
+        }, {
+          value: 'step-after',
+          text: 'stepped',
+        }],
+      },
       optionTabs: [
         {
           name: 'advanced',
@@ -118,50 +119,50 @@ export default function PointSeriesVisType(Private) {
         },
         { name: 'options', title: 'Panel Settings', editor: pointSeriesTemplate },
       ],
-    },
-    schemas: new Schemas([
-      {
-        group: 'metrics',
-        name: 'metric',
-        title: 'Y-Axis',
-        aggFilter: ['!geo_centroid'],
-        min: 1,
-        defaults: [
-          { schema: 'metric', type: 'count' }
-        ]
-      },
-      {
-        group: 'metrics',
-        name: 'radius',
-        title: 'Dot Size',
-        min: 0,
-        max: 1,
-        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality']
-      },
-      {
-        group: 'buckets',
-        name: 'segment',
-        title: 'X-Axis',
-        min: 0,
-        max: 1,
-        aggFilter: '!geohash_grid'
-      },
-      {
-        group: 'buckets',
-        name: 'group',
-        title: 'Split Series',
-        min: 0,
-        max: 1,
-        aggFilter: '!geohash_grid'
-      },
-      {
-        group: 'buckets',
-        name: 'split',
-        title: 'Split Chart',
-        min: 0,
-        max: 1,
-        aggFilter: '!geohash_grid'
-      }
-    ])
+      schemas: new Schemas([
+        {
+          group: 'metrics',
+          name: 'metric',
+          title: 'Y-Axis',
+          aggFilter: ['!geo_centroid'],
+          min: 1,
+          defaults: [
+            { schema: 'metric', type: 'count' }
+          ]
+        },
+        {
+          group: 'metrics',
+          name: 'radius',
+          title: 'Dot Size',
+          min: 0,
+          max: 1,
+          aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality']
+        },
+        {
+          group: 'buckets',
+          name: 'segment',
+          title: 'X-Axis',
+          min: 0,
+          max: 1,
+          aggFilter: '!geohash_grid'
+        },
+        {
+          group: 'buckets',
+          name: 'group',
+          title: 'Split Series',
+          min: 0,
+          max: 1,
+          aggFilter: '!geohash_grid'
+        },
+        {
+          group: 'buckets',
+          name: 'split',
+          title: 'Split Chart',
+          min: 0,
+          max: 1,
+          aggFilter: '!geohash_grid'
+        }
+      ])
+    }
   });
 }

src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html

@@ -8,7 +8,7 @@
         id="gaugeType"
         class="kuiSelect kuiSideBarSelect"
         ng-model="vis.params.gauge.gaugeType"
-        ng-options="mode for mode in vis.type.params.gaugeTypes"
+        ng-options="mode for mode in collections.gaugeTypes"
       ></select>
     </div>
   </div>
@@ -183,7 +183,7 @@
               id="colorSchema"
               class="kuiSelect kuiSideBarSelect"
               ng-model="vis.params.gauge.colorSchema"
-              ng-options="mode for mode in vis.type.params.colorSchemas"
+              ng-options="mode for mode in collections.colorSchemas"
             ></select>
           </div>
           <div class="text-info text-center" ng-show="customColors" ng-click="resetColors()">reset colors</div>
@@ -255,7 +255,7 @@
                 id="gaugeColorMode"
                 class="kuiSelect kuiSideBarSelect"
                 ng-model="vis.params.gauge.gaugeColorMode"
-                ng-options="mode for mode in vis.type.params.gaugeColorMode"
+                ng-options="mode for mode in collections.gaugeColorMode"
               ></select>
             </div>
           </div>

src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.js

@@ -9,7 +9,7 @@ module.directive('gaugeOptions', function () {
     template: gaugeOptionsTemplate,
     replace: true,
     link: function ($scope) {
-
+      $scope.collections = $scope.vis.type.editorConfig.collections;
       $scope.showColorRange = true;
 
       $scope.$watch('vis.params.gauge.gaugeType', type => {

src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html

@@ -8,7 +8,7 @@
         id="colorSchema"
         class="kuiSelect kuiSideBarSelect"
         ng-model="vis.params.colorSchema"
-        ng-options="mode for mode in vis.type.params.colorSchemas"
+        ng-options="mode for mode in collections.colorSchemas"
       ></select>
     </div>
     <div
@@ -39,7 +39,7 @@
         id="axisScale"
         class="kuiSelect kuiSideBarSelect"
         ng-model="vis.params.valueAxes[0].scale.type"
-        ng-options="mode for mode in vis.type.params.scales"
+        ng-options="mode for mode in collections.scales"
       ></select>
     </div>
   </div>
@@ -141,15 +141,15 @@
                 ng-click="removeRange($index)"
                 class="kuiButton kuiButton--danger kuiButton--small"
               >
-                <span class="kuiIcon fa-times"><span>
+                <span class="kuiIcon fa-times"></span>
               </button>
             </td>
           </tr>
         </table>
 
         <div class="hintbox" ng-show="!vis.params.colorsRange.length">
           <p>
-            <span class="kuiIcon fa-danger text-danger"><span>
+            <span class="kuiIcon fa-danger text-danger"></span>
             <strong>Required:</strong> You must specify at least one range.
           </p>
         </div>

src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.js

@@ -9,6 +9,9 @@ module.directive('heatmapOptions', function () {
     template: heatmapOptionsTemplate,
     replace: true,
     link: function ($scope) {
+
+      $scope.collections = $scope.vis.type.editorConfig.collections;
+
       const verticalRotation = 270;
       $scope.showColorRange = false;
       $scope.showLabels = false;

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

@@ -25,7 +25,7 @@
           id="categoryAxisPosition"
           class="kuiSelect kuiSideBarSelect"
           ng-model="vis.params.categoryAxes[0].position"
-          ng-options="mode for mode in vis.type.params.positions"
+          ng-options="mode for mode in vis.type.editorConfig.collections.positions"
         ></select>
       </div>
     </div>

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

@@ -40,7 +40,7 @@
               id="{{ 'seriesType' + $index }}"
               class="kuiSelect kuiSideBarSelect"
               ng-model="chart.type"
-              ng-options="mode.value as mode.text for mode in vis.type.params.chartTypes"
+              ng-options="mode.value as mode.text for mode in vis.type.editorConfig.collections.chartTypes"
             ></select>
           </div>
         </div>
@@ -54,7 +54,7 @@
               id="{{ 'seriesMode' + $index }}"
               class="kuiSelect kuiSideBarSelect"
               ng-model="chart.mode"
-              ng-options="mode for mode in vis.type.params.chartModes"
+              ng-options="mode for mode in vis.type.editorConfig.collections.chartModes"
             ></select>
           </div>
         </div>
@@ -86,7 +86,7 @@
                 id="{{ 'lineMode' + $index }}"
                 class="kuiSelect kuiSideBarSelect"
                 ng-model="chart.interpolate"
-                ng-options="mode.value as mode.text for mode in vis.type.params.interpolationModes"
+                ng-options="mode.value as mode.text for mode in vis.type.editorConfig.collections.interpolationModes"
               >
               </select>
             </div>

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

@@ -61,7 +61,7 @@ module.directive('vislibSeries', function () {
         return $scope.vis.params.seriesParams.map(series => series.type).join();
       }, () => {
         const types = _.uniq(_.map($scope.vis.params.seriesParams, 'type'));
-        $scope.savedVis.type = types.length === 1 ? types[0] : 'histogram';
+        $scope.vis.type.type = types.length === 1 ? types[0] : 'histogram';
       });
 
       $scope.$watch('vis.params.valueAxes.length', () => {

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

@@ -84,7 +84,7 @@
               class="kuiSelect kuiSideBarSelect"
               ng-change="updateAxisName(axis)"
               ng-model="axis.position"
-              ng-options="mode disable when isPositionDisabled(mode) for mode in vis.type.params.positions"
+              ng-options="mode disable when isPositionDisabled(mode) for mode in vis.type.editorConfig.collections.positions"
             ></select>
           </div>
         </div>
@@ -98,7 +98,7 @@
               id="{{ 'valueAxisMode' + $index }}"
               class="kuiSelect kuiSideBarSelect"
               ng-model="axis.scale.mode"
-              ng-options="mode for mode in vis.type.params.axisModes"
+              ng-options="mode for mode in vis.type.editorConfig.collections.axisModes"
             ></select>
           </div>
         </div>
@@ -112,7 +112,7 @@
               id="{{ 'valueAxisScaleType' + $index }}"
               class="kuiSelect kuiSideBarSelect"
               ng-model="axis.scale.type"
-              ng-options="type for type in vis.type.params.scaleTypes"
+              ng-options="type for type in vis.type.editorConfig.collections.scaleTypes"
             ></select>
           </div>
         </div>

src/core_plugins/kbn_vislib_vis_types/public/controls/vislib_basic_options.html

@@ -6,7 +6,7 @@
     <select
       class="form-control"
       ng-model="vis.params.legendPosition"
-      ng-options="position.value as position.text for position in vis.type.params.legendPositions"
+      ng-options="position.value as position.text for position in vis.type.editorConfig.collections.legendPositions"
     >
     </select>
   </div>

src/core_plugins/kbn_vislib_vis_types/public/editors/__tests__/point_series.js

@@ -20,7 +20,7 @@ describe('point series editor', function () {
   function makeConfig() {
     return {
       type: 'line',
-      params: lineVisType.params.defaults,
+      params: lineVisType.visConfig.defaults,
       aggs: [
         { type: 'count', schema: 'metric', params: { field: 'bytes' } },
         { type: 'terms', schema: 'segment', params: { field: 'machine.os' } },

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

@@ -32,7 +32,7 @@
         id="legendPosition"
         class="kuiSelect kuiSideBarSelect"
         ng-model="vis.params.legendPosition"
-        ng-options="position.value as position.text for position in vis.type.params.legendPositions"
+        ng-options="position.value as position.text for position in vis.type.editorConfig.collections.legendPositions"
       ></select>
     </div>
   </div>