Correct update + example design

Author: David-Desmaisons

example/App.vue

@@ -24,49 +24,26 @@
               alt="Vue.draggable logo"
               src="./assets/logo.png"
             />
-            <h1>vue.plotly</h1>
             <p><a
+                class="title-link"
                 href="https://github.com/David-Desmaisons/vue-plotly"
                 target="_blank"
-              >Vue.plotly</a> is a thin vue wrapper for
+              ><span class="title">Vue.plotly</span></a>a thin vue wrapper for
               <a
                 href="https://plot.ly/javascript/"
                 target="_blank"
               >plotly.js</a>
             </p>
           </div>
 
-          <div id="badges">
-            <a
-              target="_blank"
-              href="https://github.com/David-Desmaisons/vue-plotly/issues"
-            ><img src="https://img.shields.io/github/issues/David-Desmaisons/vue-plotly.svg" /></a>
-            <a
-              target="_blank"
-              href="https://circleci.com/gh/David-Desmaisons/vue-plotly"
-            ><img src="https://circleci.com/gh/David-Desmaisons/vue-plotly.svg?style=shield" /></a>
-            <a
-              target="_blank"
-              href="https://codecov.io/gh/David-Desmaisons/vue-plotly"
-            ><img src="https://codecov.io/gh/David-Desmaisons/vue-plotly/branch/master/graph/badge.svg" /></a>
-            <a
-              target="_blank"
-              href="https://www.npmjs.com/package/vue-plotly"
-            ><img src="https://img.shields.io/npm/v/vue-plotly.svg" /></a>
-            <a
-              target="_blank"
-              href="https://github.com/David-Desmaisons/vue-plotly/blob/master/LICENSE"
-            ><img src="https://img.shields.io/github/license/David-Desmaisons/vue-plotly.svg" /></a>
-          </div>
-
           <div class="row justify-content-md-center">
             <div
               class="col-3 features"
               v-for="(data,idx) in features"
               :key="idx"
             >
               <div>
-                <h5 class="card-title"><i :class="`fa ${data.icon}`"></i></h5>
+                <h4 class="big-icone"><i :class="`fa ${data.icon}`"></i></h4>
                 <p class="card-text">{{data.text}}</p>
               </div>
             </div>
@@ -76,8 +53,8 @@
 
       <div class="card main-card">
         <form>
-          <div class="form-group row">
-         
+          <div class="row">
+
             <div class="col-12">
               <select
                 v-model="selected"
@@ -100,6 +77,13 @@
         />
       </div>
     </div>
+
+    <footer class="footer fixed-bottom bg-dark">
+      <div class="container">
+        <img src="https://plot.ly/gh-pages/documentation/static//images/browser_support.png"/>
+      </div>
+    </footer>
+
   </div>
 </template>
 
@@ -145,7 +129,7 @@ export default {
   .logo {
     text-align: center;
     img {
-      width: 70px;
+      width: 80px;
     }
   }
 
@@ -156,6 +140,13 @@ export default {
       }
     }
   }
+
+  .footer {
+    text-align: center;
+    img {
+      height: 30px;
+    }
+  }
 }
 
 .features {
@@ -185,4 +176,21 @@ export default {
 .main-card {
   padding: 0;
 }
+
+footer.footer {
+  background: darkgray;
+}
+
+.big-icon {
+  margin-bottom: 0;
+}
+
+.title {
+  font-size: 30px;
+  color: black;
+}
+
+a.title-link:hover {
+  text-decoration: none;
+}
 </style>

example/components/generic.vue

@@ -1,21 +1,6 @@
 <template>
   <div>
 
-    <div class="row">
-      <div class="col-3">
-        <div class="col">
-          Markup:
-        </div>
-      </div>
-
-      <div class="col-9">
-        <highlight-code
-          lang="javascript"
-          :code="code"
-        />
-      </div>
-    </div>
-
     <div class="row">
       <div class="col-3">
         <div class="col">
@@ -38,6 +23,16 @@
       </div>
 
       <div class="col-9">
+
+        <div class="row">
+          <div class="col">
+            <highlight-code
+              lang="javascript"
+              :code="code"
+            />
+          </div>
+        </div>
+
         <plotly
           v-bind="data.attr"
           :data="data.data"
@@ -80,11 +75,15 @@ export default {
 }
 
 .data .jsoneditor-vue {
-  height: 250px;
+  height: 300px;
+}
+
+.jsoneditor-vue div.jsoneditor-tree {
+  min-height: 100px;
 }
 
-.jsoneditor-vue div.jsoneditor-tree{
-  min-height:  100px;
+.mark-up {
+  margin-top: 8px;
 }
 </style>
 

src/components/Plotly.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :id="id" v-resize:debounce.100="onResize" />
+  <div
+    :id="id"
+    v-resize:debounce.100="onResize"
+  />
 </template>
 <script>
 import Plotly from "plotly.js";
@@ -83,7 +86,7 @@ export default {
     schedule(context) {
       const { scheduled } = this;
       if (scheduled) {
-        Object.assign(scheduled, context);
+        scheduled.replot = scheduled.replot || context.replot;
         return;
       }
       this.scheduled = context;

tests/unit/plotly.spec.js

@@ -211,7 +211,7 @@ describe("Plotly.vue", () => {
       const { error } = console;
 
       beforeEach(() => {
-        console.error = () => {};
+        console.error = () => { };
         jest.clearAllMocks();
         update(wrapper);
       });
@@ -241,7 +241,7 @@ describe("Plotly.vue", () => {
     const { error } = console;
 
     beforeEach(() => {
-      console.error = () => {};
+      console.error = () => { };
       jest.clearAllMocks();
       wrapper.setProps({ data: [{ data: "novo" }] });
       wrapper.vm.$attrs = { displayModeBar: "hover" };
@@ -271,7 +271,7 @@ describe("Plotly.vue", () => {
     const { error } = console;
 
     beforeEach(() => {
-      console.error = () => {};
+      console.error = () => { };
       jest.clearAllMocks();
       const attrs = Object.assign({}, vm.$attrs);
       vm.$attrs = attrs;
@@ -323,11 +323,16 @@ describe("Plotly.vue", () => {
     });
   });
 
-  describe("when layout changes and data changes", () => {
+  const changeData = () => wrapper.setProps({ data: { novo: "data" } });
+  const changeLayout = () => wrapper.setProps({ layout: { novo: "layout" } });
+
+  describe.each([
+    [() => { changeData(); changeLayout(); }],
+    [() => { changeLayout(); changeData(); }],
+  ])("when layout changes and data changes", (changes) => {
     beforeEach(() => {
       jest.clearAllMocks();
-      wrapper.setProps({ layout: { novo: "layout" } });
-      wrapper.setProps({ data: { novo: "data" } });
+      changes();
     });
 
     it("calls plotly react once", async () => {