[POC] Visualize refactor with embeddable

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'
@@ -89,31 +87,34 @@ export default function PointSeriesVisType(Private) {
         defaultYExtents: false,
         setYExtents: 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',
@@ -123,50 +124,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/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 vis.editorConfig.collections.colorSchemas"
       ></select>
     </div>
     <div
@@ -39,7 +39,7 @@
         id="axisScale"
         class="kuiSelect kuiSideBarSelect"
         ng-model="valueAxis.scale.type"
-        ng-options="mode for mode in vis.type.params.scales"
+        ng-options="mode for mode in vis.editorConfig.collections.scales"
       ></select>
     </div>
   </div>

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,9 @@ 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';
+        const oldType = $scope.vis.type.type;
+        $scope.vis.type.type = types.length === 1 ? types[0] : 'histogram';
+        if (oldType !== $scope.vis.type.type) $scope.vis.updateState();
       });
 
       $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>