Fixes: Style compatibility and gradient exceptions

DataV-Team · Aug 27, 2019 · e069d52 · e069d52
1 parent 4bd17d0
commit e069d52
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/lib/components/percentPond/src/main.css b/lib/components/percentPond/src/main.css
@@ -1,7 +1,15 @@
 .dv-percent-pond {
+  position: relative;
   display: flex;
   flex-direction: column;
 }
+.dv-percent-pond svg {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
 .dv-percent-pond polyline {
   transition: all 0.3s;
 }

diff --git a/lib/components/percentPond/src/main.vue b/lib/components/percentPond/src/main.vue
@@ -4,13 +4,13 @@
       <defs>
         <linearGradient :id="gradientId1" x1="0%" y1="0%" x2="100%" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
 
         <linearGradient :id="gradientId2" x1="0%" y1="0%" :x2="gradient2XPos" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
       </defs>

diff --git a/src/components/percentPond/src/main.vue b/src/components/percentPond/src/main.vue
@@ -4,13 +4,13 @@
       <defs>
         <linearGradient :id="gradientId1" x1="0%" y1="0%" x2="100%" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
 
         <linearGradient :id="gradientId2" x1="0%" y1="0%" :x2="gradient2XPos" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
       </defs>
@@ -254,9 +254,18 @@ export default {
 
 <style lang="less">
 .dv-percent-pond {
+  position: relative;
   display: flex;
   flex-direction: column;
 
+  svg {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+  }
+
   polyline {
     transition: all 0.3s;
   }