w-plot-vue 1.0.0 → 1.0.2

package/src/components/WBar.vue

@@ -4,18 +4,32 @@
         v-if="hasOptBar"
     >
 
-        <div :style="`width:${getWidth}px; max-width:${getWidth}px;`">
+        <div :style="`width:${picWidth}px; max-width:${picWidth}px;`">
             <slot
                 name="top"
                 :opt="optBar"
             ></slot>
         </div>
 
-        <WPlot
-            :options="optBar"
-        ></WPlot>
+        <div style="position:relative;">
 
-        <div :style="`width:${getWidth}px; max-width:${getWidth}px;`">
+            <WPlot
+                :options="optBar"
+            ></WPlot>
+
+            <template v-if="useInnerLabels">
+                <div
+                    :style="`position:absolute; left:${locLeft}px; top:${tk.y}px; font-family:${hTickLableFontFamily}; font-size:${hTickLableFontSize}; color:${hTickLableColor};`"
+                    :key="'ktk-'+ktk"
+                    v-for="(tk,ktk) in hTickLabels"
+                >
+                    {{tk.name}}
+                </div>
+            </template>
+
+        </div>
+
+        <div :style="`width:${picWidth}px; max-width:${picWidth}px;`">
             <slot
                 name="bottom"
                 :opt="optBar"
@@ -27,7 +41,8 @@
 
 <script>
 import get from 'lodash-es/get'
-// import map from 'lodash-es/map'
+import map from 'lodash-es/map'
+import size from 'lodash-es/size'
 // import cloneDeep from 'lodash-es/cloneDeep'
 // import isestr from 'wsemi/src/isestr.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
@@ -54,6 +69,24 @@ export default {
     },
     computed: {
 
+        picWidth: function() {
+            let vo = this
+            let w = get(vo, 'opt.width', 0)
+            return w
+        },
+
+        picHeight: function() {
+            let vo = this
+            let w = get(vo, 'opt.height', 0)
+            return w
+        },
+
+        ks: function() {
+            let vo = this
+            let ks = get(vo, 'opt.keys', [])
+            return ks
+        },
+
         hasOptBar: function() {
             //console.log('computed hasOptBar')
 
@@ -71,11 +104,8 @@ export default {
 
             let r = null
             try {
-                let w = vo.getWidth()
-                let h = vo.getHeight()
-                let keys = get(vo, 'opt.keys', [])
                 let rds = get(vo, 'opt.rds', [])
-                r = genBarOpt(w, h, keys, rds, vo.opt)
+                r = genBarOpt(vo.picWidth, vo.picHeight, vo.ks, rds, vo.opt)
             }
             catch (err) {
                 console.log(err)
@@ -84,21 +114,101 @@ export default {
             return r
         },
 
-    },
-    methods: {
+        useInnerLabels: function() {
+            let vo = this
+            let b1 = get(vo, 'opt.direction', '') === 'horizontal'
+            let b2 = get(vo, 'opt.barUseInnerLabelsForHorizontal', false)
+            let b = b1 && b2
+            return b
+        },
 
-        getWidth: function() {
+        locLeft: function() {
             let vo = this
-            let w = get(vo, 'opt.width', 0)
-            return w
+            let r = get(vo, 'optBar.chart.marginLeft', 0)
+            return r
         },
 
-        getHeight: function() {
+        locTop: function() {
             let vo = this
-            let w = get(vo, 'opt.height', 0)
-            return w
+            let r = get(vo, 'optBar.chart.marginTop', 0)
+            return r
+        },
+
+        locBottom: function() {
+            let vo = this
+            let r = get(vo, 'optBar.chart.marginBottom', 0)
+            return r
+        },
+
+        hTickLableFontFamily: function() {
+            let vo = this
+            let r = get(vo, 'optBar.xAxis.labels.style.fontFamily', '')
+            return r
+        },
+
+        hTickLableFontSize: function() {
+            let vo = this
+            let r = get(vo, 'optBar.xAxis.labels.style.fontSize', '')
+            return r
+        },
+
+        hTickLableColor: function() {
+            let vo = this
+            let r = get(vo, 'optBar.xAxis.labels.style.color', '')
+            return r
+        },
+
+        hAxisMin: function() {
+            let vo = this
+            let r = get(vo, 'optBar.xAxis.min', 0)
+            return r
         },
 
+        // hAxisMax: function() {
+        //     let vo = this
+        //     let r = get(vo, 'optBar.xAxis.max', 0)
+        //     return r
+        // },
+
+        hTickLabels: function() {
+            let vo = this
+
+            //h
+            let h = vo.picHeight - vo.locTop - vo.locBottom
+            h = Math.max(h, 0)
+            // console.log('h', h)
+
+            //n
+            let n = size(vo.ks)
+            // console.log('n', n)
+
+            //rng
+            let rng = n - vo.hAxisMin
+            // console.log('rng', rng)
+
+            //yd
+            let yd = 0
+            if (rng > 0) {
+                yd = h / rng
+            }
+            // console.log('yd', yd)
+
+            //tks
+            let tks = map(vo.ks, (v, k) => {
+                let y = vo.locTop + yd * (k - vo.hAxisMin)
+                return {
+                    name: v,
+                    y,
+                }
+            })
+            // console.log('tks', tks)
+
+            return tks
+        },
+
+    },
+    methods: {
+
     }
 }
 </script>

package/src/components/WPie.vue

@@ -4,7 +4,7 @@
         v-if="hasOptPie"
     >
 
-        <div :style="`width:${getWidth}px; max-width:${getWidth}px;`">
+        <div :style="`width:${picWidth}px; max-width:${picWidth}px;`">
             <slot
                 name="top"
                 :opt="optPie"
@@ -15,7 +15,7 @@
             :options="optPie"
         ></WPlot>
 
-        <div :style="`width:${getWidth}px; max-width:${getWidth}px;`">
+        <div :style="`width:${picWidth}px; max-width:${picWidth}px;`">
             <slot
                 name="bottom"
                 :opt="optPie"
@@ -54,6 +54,24 @@ export default {
     },
     computed: {
 
+        picWidth: function() {
+            let vo = this
+            let w = get(vo, 'opt.width', 0)
+            return w
+        },
+
+        picHeight: function() {
+            let vo = this
+            let w = get(vo, 'opt.height', 0)
+            return w
+        },
+
+        ks: function() {
+            let vo = this
+            let ks = get(vo, 'opt.keys', [])
+            return ks
+        },
+
         hasOptPie: function() {
             //console.log('computed hasOptPie')
 
@@ -71,11 +89,8 @@ export default {
 
             let r = null
             try {
-                let w = vo.getWidth()
-                let h = vo.getHeight()
-                let keys = get(vo, 'opt.keys', [])
                 let rds = get(vo, 'opt.rds', [])
-                r = genPieOpt(w, h, keys, rds, vo.opt)
+                r = genPieOpt(vo.picWidth, vo.picHeight, vo.ks, rds, vo.opt)
             }
             catch (err) {
                 console.log(err)
@@ -87,18 +102,6 @@ export default {
     },
     methods: {
 
-        getWidth: function() {
-            let vo = this
-            let w = get(vo, 'opt.width', 0)
-            return w
-        },
-
-        getHeight: function() {
-            let vo = this
-            let w = get(vo, 'opt.height', 0)
-            return w
-        },
-
     }
 }
 </script>

package/src/components/{WGeoVue.vue → WPlotVue.vue}

@@ -2,17 +2,21 @@
 import WBar from './WBar.vue'
 import WPie from './WPie.vue'
 import WPlot from './WPlot.vue'
-import WRose from './WRose.vue'
+import WRose from './WRose.vue'
+import WSetMulti from './WSetMulti.vue'
+import WSetOne from './WSetOne.vue'
 
-let WGeoVue = {
+let WPlotVue = {
     install: function(Vue) {
         Vue.component('w-bar', WBar)
         Vue.component('w-pie', WPie)
         Vue.component('w-plot', WPlot)
-        Vue.component('w-rose', WRose)
+        Vue.component('w-rose', WRose)
+        Vue.component('w-set-multi', WSetMulti)
+        Vue.component('w-set-one', WSetOne)
     }
 }
 
-export default WGeoVue
+export default WPlotVue
 </script>
 

package/src/components/WRose.vue

@@ -4,7 +4,7 @@
         v-if="hasOptRose"
     >
 
-        <div :style="`width:${getWidth}px; max-width:${getWidth}px;`">
+        <div :style="`width:${picWidth}px; max-width:${picWidth}px;`">
             <slot
                 name="top"
                 :opt="optRose"
@@ -15,7 +15,7 @@
             :options="optRose"
         ></WPlot>
 
-        <div :style="`width:${getWidth}px; max-width:${getWidth}px;`">
+        <div :style="`width:${picWidth}px; max-width:${picWidth}px;`">
             <slot
                 name="bottom"
                 :opt="optRose"
@@ -54,6 +54,24 @@ export default {
     },
     computed: {
 
+        picWidth: function() {
+            let vo = this
+            let w = get(vo, 'opt.width', 0)
+            return w
+        },
+
+        picHeight: function() {
+            let vo = this
+            let w = get(vo, 'opt.height', 0)
+            return w
+        },
+
+        ks: function() {
+            let vo = this
+            let ks = get(vo, 'opt.keys', [])
+            return ks
+        },
+
         hasOptRose: function() {
             //console.log('computed hasOptRose')
 
@@ -71,11 +89,8 @@ export default {
 
             let r = null
             try {
-                let w = vo.getWidth()
-                let h = vo.getHeight()
-                let keys = get(vo, 'opt.keys', [])
                 let rds = get(vo, 'opt.rds', [])
-                r = genRoseOpt(w, h, keys, rds, vo.opt)
+                r = genRoseOpt(vo.picWidth, vo.picHeight, vo.ks, rds, vo.opt)
             }
             catch (err) {
                 console.log(err)
@@ -87,18 +102,6 @@ export default {
     },
     methods: {
 
-        getWidth: function() {
-            let vo = this
-            let w = get(vo, 'opt.width', 0)
-            return w
-        },
-
-        getHeight: function() {
-            let vo = this
-            let w = get(vo, 'opt.height', 0)
-            return w
-        },
-
     }
 }
 </script>