Fix: plot re-rendering (elastic#192)

* fix: don't add font size or color if not in args

fixes issue where size would be set to 'undefinedpx', and color would be undefined

* fix: prevent top-level undefined values

since this is just an object, and it is not serialized on the the client, it ends up creating properties with an undefined value

* fix: serialize and unserialize the result plot function

this shouldn't work, but it does, and so i'm putting it into master. #YOLO

common/functions/font/font.js

@@ -47,14 +47,14 @@ export default new Fn({
   fn: (context, args) => {
     const spec = {
       ...context.spec,
-      fontSize: `${args.size}px`,
       fontFamily: args.family,
       fontWeight: args.weight,
       fontStyle: args.italic ? 'italic' : 'normal',
       textDecoration: args.underline ? 'underline' : 'none',
       textAlign: args.align,
-      color: args.color,
     };
+    if (args.color) spec.color = args.color;
+    if (args.size) spec.fontSize = `${args.size}px`;
 
     return {
       type: 'style',

common/functions/plot/plot.js

@@ -43,8 +43,8 @@ export default new Fn({
   fn: (context, args) => {
     function seriesStyleToFlot(seriesStyle) {
       if (!seriesStyle) return {};
-      return {
-        stack: get(seriesStyle, 'stack'),
+
+      const flotStyle = {
         numbers: {
           show: true,
         },
@@ -62,13 +62,18 @@ export default new Fn({
           align: 'center',
         },
         // This is here intentionally even though it is the default.
-        // We use the `size` plugins for this and if the user says they want points we just set the size to be static.
+        // We use the `size` plugins for this and if the user says they want points
+        // we just set the size to be static.
         points: { show: false },
         bubbles: {
           fill: get(seriesStyle, 'fill'),
         },
-        color: get(seriesStyle, 'color'),
       };
+
+      if (get(seriesStyle, 'stack')) flotStyle.stack = get(seriesStyle, 'stack');
+      if (get(seriesStyle, 'color')) flotStyle.color = get(seriesStyle, 'color');
+
+      return flotStyle;
     }
 
     const seriesStyles = keyBy(args.seriesStyle || [], 'label') || {};
@@ -181,6 +186,10 @@ export default new Fn({
       },
     };
 
-    return result;
+    // fix the issue of plot sometimes re-rendering with an empty chart
+    // TODO: holy hell, why does this work?! the working theory is that some values become undefined
+    // and serializing the result here causes them to be dropped off, and this makes flot react differently.
+    // It's also possible that something else ends up mutating this object, but that seems less likely.
+    return JSON.parse(JSON.stringify(result));
   },
 });

public/elements/plot/plot.js

@@ -17,7 +17,6 @@ export default new Element('plot', {
     if (!includes($.plot.plugins, size)) $.plot.plugins.push(size);
     if (!includes($.plot.plugins, text)) $.plot.plugins.push(text);
 
-
     let plot;
     function draw() {
       if (domNode.clientHeight < 1 || domNode.clientWidth < 1) return;
@@ -47,7 +46,6 @@ export default new Element('plot', {
 
     draw();
 
-
     return handlers.done(plot);
   },
 });