Merged in feature/MZ-38-message-component-incorrect-position (pull re…

…quest #13)

Add position for message component

examples/js/aa.js

@@ -5,8 +5,7 @@
     const DataModel = window.muze.DataModel;
 
     d3.json('/data/cars.json', (data) => {
-        let jsonData = data,
-        schema = [{
+        const schema = [{
         name: 'Name',
         type: 'dimension'
     }, {
@@ -39,57 +38,27 @@
         // subtype: 'temporal',
         // format: '%Y-%m-%d'
     }];
-    const dm = new DataModel(jsonData, schema);
-    const canvas = env.canvas();
-
-    canvas
-        .data(dm)
-        .width(600)
-        .height(700)
-        .rows(['Weight_in_lbs'])
-        .columns(['Name'])
-        // .detail(['Name'])
-        .mount('#chart') /* Attaching the canvas to DOM element */
-        .layers([
-            {
-                mark: 'bar'
-            }
-        ])
-        .config({
-            sort: {
-                Name: 'asc'
-            }
-        })
-
-        setTimeout(() => {
-            canvas.config(
-                { sort: { Weight_in_lbs: 'desc' }},
-                { reset: true },
-            )
-        }, 2000);
-
 
-        setTimeout(() => {
-            canvas.config({
-                sort: {
-                    Name: 'asc'
-                },
-                legend: { show: true }
-            }, { reset: true })
-        }, 4000);
+    let rootData = new DataModel(data, schema)
 
-        setTimeout(() => {
-            canvas.config(
-                { sort: { }},
-                { reset: true },
-            )
-        }, 6000);
+    rootData.sort([
+        ['Cylinders', 'asc'],
+        ['Maker', 'desc'],
+    ])
 
-        setTimeout(() => {
-            canvas.config(
-                { sort: { Weight_in_lbs: 'asc' }},
-                { reset: true },
-            )
-        }, 8000);
-    });
-}());
+    const canvas = env.canvas();
+
+    canvas
+        .data(rootData)
+        .columns(['Cylinders', 'Horsepower'])
+        .rows(['Acceleration'])
+        .color('Maker')
+        .mount('#chart')
+        .height(500)
+        .title('Charts');
+
+    setTimeout(() => {
+        canvas.data(canvas.data().select(() => false))
+    }, 1000);
+    })
+})();

packages/muze/src/canvas/component-wrapper-maker.js

@@ -117,10 +117,11 @@ const createHeaderWrapper = (headerType, layoutManager, renderDetails) => {
 const createMessageWrapper = (layoutManager, canvas, renderDetails, renderGrid) => {
     const headerValues = Object.values(renderDetails.components.headers);
     let sum = 0;
+    let messageWrapper = null;
+
     for (const val of headerValues) {
         sum += val.logicalSpace().height;
     }
-    let messageWrapper = null;
 
     if (!renderGrid) {
         const defaultDimensions = { height: canvas.height() - sum, width: canvas.width() };
@@ -131,7 +132,8 @@ const createMessageWrapper = (layoutManager, canvas, renderDetails, renderGrid)
             ...target,
             dimensions: { height, width },
             message: NO_DATA_MESSAGE,
-            classPrefix: MESSAGE_CONFIG
+            classPrefix: MESSAGE_CONFIG,
+            position: TOP
         };
         const wrapperParams = {
             name: MESSAGE,
@@ -141,8 +143,7 @@ const createMessageWrapper = (layoutManager, canvas, renderDetails, renderGrid)
         const existingComponent = layoutManager.getComponent(MESSAGE);
 
         if (existingComponent) {
-            messageWrapper = existingComponent
-                                    .updateWrapper(wrapperParams);
+            messageWrapper = existingComponent.updateWrapper(wrapperParams);
         } else {
             messageWrapper = new MessageComponent(wrapperParams);
         }

packages/muze/src/canvas/components/message-component.js

@@ -37,11 +37,12 @@ export default class MessageComponent extends MuzeComponent {
     }
 
     setParams (params) {
+        const { target, className } = params.config;
         this.component = params.component;
         this.params = params;
-        const { target, className } = params.config;
         this.target(target);
         this.className(className);
+        this.position(params.config.position);
         return this;
     }
 }