w-plot-vue 1.0.0 → 1.0.1

package/src/AppZoneWSetMulti.vue

@@ -0,0 +1,225 @@
+<template>
+    <div>
+
+
+        <div class="head1"><span style="cursor:pointer;" title="open for copy link to view component" onclick="window.open('//yuda-lyu.github.io/w-plot-vue/examples/app.html?cmp='+this.innerText,'_blank')">w-set-multi</span></div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-set-multi'"
+                    :casename="'default'"
+                ></demolink>
+
+                <w-set-multi
+                    :opt="{
+                        ...WSetMulti.opt2e,
+                    }"
+                ></w-set-multi>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-set-multi'"
+                    :casename="'keySelect'"
+                ></demolink>
+
+                <div style="padding-bottom:5px; font-size:0.8rem;">
+                    keySelect: {{WSetMulti.keySelect}}
+                </div>
+
+                <w-set-multi
+                    :opt="{
+                        ...WSetMulti.opt2e,
+                    }"
+                    :keySelect.sync="WSetMulti.keySelect"
+                ></w-set-multi>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-set-multi'"
+                    :casename="'textPlotType & kpSelectText & widthSelect'"
+                ></demolink>
+
+                <w-set-multi
+                    :opt="{
+                        ...WSetMulti.opt2e,
+                    }"
+                    :textPlotType="'繪圖類型'"
+                    :kpSelectText="{
+                        'bar-v-normal':'垂直直條圖',
+                        'bar-v-stack-normal':'垂直堆疊直條圖',
+                        'bar-v-stack-percent':'垂直堆疊佔比直條圖',
+                        'bar-h-normal':'水平直條圖',
+                        'bar-h-normal-dense':'水平直條圖(緊密)',
+                        'bar-h-stack-normal':'水平堆疊直條圖',
+                        'bar-h-stack-percent':'水平堆疊佔比直條圖',
+                        'rose-normal':'玫瑰圖',
+                    }"
+                    :widthSelect="170"
+                ></w-set-multi>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-set-multi'"
+                    :casename="'hide labels'"
+                ></demolink>
+
+                <w-set-multi
+                    :opt="{
+                        ...WSetMulti.opt2e,
+                        showLabels:false,
+                    }"
+                ></w-set-multi>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-set-multi'"
+                    :casename="'hide legned'"
+                ></demolink>
+
+                <w-set-multi
+                    :opt="{
+                        ...WSetMulti.opt2e,
+                        showLegend:false,
+                    }"
+                ></w-set-multi>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-set-multi'"
+                    :casename="'slot head'"
+                ></demolink>
+
+                <w-set-multi
+                    :opt="{
+                        ...WSetMulti.opt2e,
+                    }"
+                >
+                    <template v-slot:head>
+                        <div style="padding-right:8px; font-size:1.3rem;">
+                            🌿
+                        </div>
+                    </template>
+                </w-set-multi>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WSetMulti from './components/WSetMulti.vue'
+
+export default {
+    components: {
+        demolink,
+        WSetMulti,
+    },
+    props: {
+    },
+    data: function() {
+        let keys = ['USA', 'China', 'Brazil', 'EU', 'India', 'Russia']
+        let rds2e = [
+            {
+                name: 'Corn',
+                data: {
+                    USA: {
+                        value: 406.292,
+                        color: ['rgb(255, 205, 210)', 'rgb(229, 115, 115)'],
+                    },
+                    China: {
+                        value: 260.000,
+                        color: ['rgb(255, 185, 210)', 'rgb(229, 95, 115)'],
+                    },
+                    Brazil: {
+                        value: 107.000,
+                        color: ['rgb(255, 165, 210)', 'rgb(229, 75, 115)'],
+                    },
+                    EU: {
+                        value: 68.300,
+                        color: ['rgb(255, 145, 210)', 'rgb(229, 55, 115)'],
+                    },
+                    India: {
+                        value: 27.500,
+                        color: ['rgb(255, 125, 210)', 'rgb(229, 35, 115)'],
+                    },
+                    Russia: {
+                        value: 14.500,
+                        color: ['rgb(255, 105, 210)', 'rgb(229, 15, 115)'],
+                    },
+                },
+            },
+            {
+                name: 'Wheat',
+                data: {
+                    USA: {
+                        value: 51.086,
+                        color: ['rgb(210, 205, 255)', 'rgb(115, 115, 229)'],
+                    },
+                    China: {
+                        value: 136.000,
+                        color: ['rgb(210, 185, 255)', 'rgb(115, 95, 229)'],
+                    },
+                    Brazil: {
+                        value: 5.500,
+                        color: ['rgb(210, 165, 255)', 'rgb(115, 75, 229)'],
+                    },
+                    EU: {
+                        value: 141.000,
+                        color: ['rgb(210, 145, 255)', 'rgb(115, 55, 229)'],
+                    },
+                    India: {
+                        value: 107.180,
+                        color: ['rgb(210, 125, 255)', 'rgb(115, 35, 229)'],
+                    },
+                    Russia: {
+                        value: 77.000,
+                        color: ['rgb(210, 105, 255)', 'rgb(115, 15, 229)'],
+                    },
+                },
+            },
+        ]
+        return {
+            'WSetMulti': {
+                'keySelect': 'bar-v-normal',
+                'opt2e': {
+                    width: 400,
+                    height: 400,
+                    keys,
+                    rds: rds2e,
+                    xTitle: 'Countries',
+                    yTitle: 'Weight (MT)',
+                },
+            },
+        }
+    },
+    methods: {
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/src/AppZoneWSetOne.vue

@@ -0,0 +1,193 @@
+<template>
+    <div>
+
+
+        <div class="head1"><span style="cursor:pointer;" title="open for copy link to view component" onclick="window.open('//yuda-lyu.github.io/w-plot-vue/examples/app.html?cmp='+this.innerText,'_blank')">w-set-one</span></div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-set-one'"
+                    :casename="'default'"
+                ></demolink>
+
+                <w-set-one
+                    :opt="{
+                        ...WSetOne.opt1c,
+                    }"
+                ></w-set-one>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-set-one'"
+                    :casename="'keySelect'"
+                ></demolink>
+
+                <div style="padding-bottom:5px; font-size:0.8rem;">
+                    keySelect: {{WSetOne.keySelect}}
+                </div>
+
+                <w-set-one
+                    :opt="{
+                        ...WSetOne.opt1c,
+                    }"
+                    :keySelect.sync="WSetOne.keySelect"
+                ></w-set-one>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-set-one'"
+                    :casename="'textPlotType & kpSelectText & widthSelect'"
+                ></demolink>
+
+                <w-set-one
+                    :opt="{
+                        ...WSetOne.opt1c,
+                    }"
+                    :textPlotType="'繪圖類型'"
+                    :kpSelectText="{
+                        'bar-v-normal':'垂直直條圖',
+                        'bar-h-normal':'水平直條圖',
+                        'bar-h-normal-dense':'水平直條圖(緊密)',
+                        'pie-normal':'圓餅圖',
+                        'rose-normal':'玫瑰圖',
+                    }"
+                    :widthSelect="160"
+                ></w-set-one>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-set-one'"
+                    :casename="'hide labels'"
+                ></demolink>
+
+                <w-set-one
+                    :opt="{
+                        ...WSetOne.opt1c,
+                        showLabels:false,
+                    }"
+                ></w-set-one>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-set-one'"
+                    :casename="'show legned'"
+                ></demolink>
+
+                <w-set-one
+                    :opt="{
+                        ...WSetOne.opt1c,
+                        showLegend:true,
+                    }"
+                ></w-set-one>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-set-one'"
+                    :casename="'slot head'"
+                ></demolink>
+
+                <w-set-one
+                    :opt="{
+                        ...WSetOne.opt1c,
+                    }"
+                >
+                    <template v-slot:head>
+                        <div style="padding-right:8px; font-size:1.3rem;">
+                            🌿
+                        </div>
+                    </template>
+                </w-set-one>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WSetOne from './components/WSetOne.vue'
+
+export default {
+    components: {
+        demolink,
+        WSetOne,
+    },
+    props: {
+    },
+    data: function() {
+        let keys = ['USA', 'China', 'Brazil', 'EU', 'India', 'Russia']
+        let rds1c = [
+            {
+                name: 'Corn',
+                data: {
+                    USA: {
+                        value: 406.292,
+                        color: ['#EF9A9A', '#F44336'],
+                    },
+                    China: {
+                        value: 260.000,
+                        color: ['#F48FB1', '#E91E63'],
+                    },
+                    Brazil: {
+                        value: 107.000,
+                        color: ['#CE93D8', '#9C27B0'],
+                    },
+                    EU: {
+                        value: 68.300,
+                        color: ['#B39DDB', '#673AB7'],
+                    },
+                    India: {
+                        value: 27.500,
+                        color: ['#9FA8DA', '#3F51B5'],
+                    },
+                    Russia: {
+                        value: 14.500,
+                        color: ['#90CAF9', '#2196F3'],
+                    },
+                },
+            },
+        ]
+        return {
+            'WSetOne': {
+                'keySelect': 'bar-v-normal',
+                'opt1c': {
+                    width: 400,
+                    height: 400,
+                    keys,
+                    rds: rds1c,
+                    xTitle: 'Countries',
+                    yTitle: 'Weight (MT)',
+                },
+            },
+        }
+    },
+    methods: {
+    }
+}
+</script>
+
+<style scoped>
+</style>

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>