w-plot-vue 1.0.0 → 1.0.1

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>

package/src/components/WSetMulti.vue

@@ -0,0 +1,423 @@
+<template>
+    <div
+        style="display:inline-block;"
+        :changeTypeItems="changeTypeItems"
+        :changeKeySelect="changeKeySelect"
+    >
+
+        <div style="padding-bottom:5px;">
+
+            <div style="display:flex; align-items:flex-end;">
+
+                <div :style="``">
+                    <slot name="head"></slot>
+                </div>
+
+                <div style="display:flex; align-items:center;">
+
+                    <div style="padding-right:10px; font-size:0.85rem; color:#666;">
+                        {{textPlotType}}:
+                    </div>
+
+                    <WTextSelect
+                        :style="`width:${widthSelect}px;`"
+                        :paddingStyle="{v:3,h:10}"
+                        :borderRadius="4"
+                        :items="typeItems"
+                        :value="typeSelect"
+                        @input="updateTypeSelectAndEmitKeySelect"
+                    ></WTextSelect>
+
+                </div>
+
+            </div>
+
+        </div>
+
+        <div
+            name="tarp"
+            v-if="hasOptTar"
+        >
+
+            <component
+                :is="cmp"
+                :opt="optTar"
+            ></component>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import get from 'lodash-es/get'
+import each from 'lodash-es/each'
+import merge from 'lodash-es/merge'
+import size from 'lodash-es/size'
+import capitalize from 'lodash-es/capitalize'
+import cloneDeep from 'lodash-es/cloneDeep'
+import haskey from 'wsemi/src/haskey.mjs'
+import iseobj from 'wsemi/src/iseobj.mjs'
+import WTextSelect from 'w-component-vue/src/components/WTextSelect.vue'
+import WBar from './WBar.vue'
+import WPie from './WPie.vue'
+import WRose from './WRose.vue'
+
+
+/**
+ * @vue-prop {Object} [opt={}] 輸入設定物件，預設{}
+ */
+export default {
+    components: {
+        WTextSelect,
+        WBar,
+        WPie,
+        WRose,
+    },
+    props: {
+        mode: {
+            type: String,
+            default: 'multi',
+        },
+        opt: {
+            type: Object,
+            default: () => {},
+        },
+        textPlotType: {
+            type: String,
+            default: 'Plot type',
+        },
+        widthSelect: {
+            type: Number,
+            default: 260,
+        },
+        keySelect: {
+            type: String,
+            default: 'bar-v-normal',
+        },
+        kpSelectText: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    data: function() {
+        return {
+
+            typeItemsDefOne: [
+
+                {
+                    key: 'bar-v-normal',
+                    type: 'bar',
+                    text: 'Vertical bars',
+                    optExt: {},
+                },
+
+                {
+                    key: 'bar-h-normal',
+                    type: 'bar',
+                    text: 'Horizontal bars',
+                    optExt: {
+                        direction: 'horizontal',
+                        marginLeft: 80,
+                        legendPosition: 'bottomright',
+                    },
+                },
+                {
+                    key: 'bar-h-normal-dense',
+                    type: 'bar',
+                    text: 'Horizontal bars with dense',
+                    optExt: {
+                        direction: 'horizontal',
+                        marginLeft: 80,
+                        legendPosition: 'bottomright',
+                        barUseInnerLabelsForHorizontal: true,
+                    },
+                },
+
+                {
+                    key: 'pie-normal',
+                    type: 'pie',
+                    text: 'Pies',
+                    optExt: {},
+                },
+
+                {
+                    key: 'rose-normal',
+                    type: 'rose',
+                    text: 'Roses',
+                    optExt: {},
+                },
+
+            ],
+
+            typeItemsDefMulti: [
+
+                {
+                    key: 'bar-v-normal',
+                    type: 'bar',
+                    text: 'Vertical bars',
+                    optExt: {},
+                },
+                {
+                    key: 'bar-v-stack-normal',
+                    type: 'bar',
+                    text: 'Vertical bars with normal stack',
+                    optExt: {
+                        barDisplay: 'stackNormal',
+                    },
+                },
+                {
+                    key: 'bar-v-stack-percent',
+                    type: 'bar',
+                    text: 'Vertical bars with percent stack',
+                    optExt: {
+                        barDisplay: 'stackPercent',
+                    },
+                },
+
+                {
+                    key: 'bar-h-normal',
+                    type: 'bar',
+                    text: 'Horizontal bars',
+                    optExt: {
+                        direction: 'horizontal',
+                        marginLeft: 80,
+                        legendPosition: 'bottomright',
+                    },
+                },
+                {
+                    key: 'bar-h-normal-dense',
+                    type: 'bar',
+                    text: 'Horizontal bars with dense',
+                    optExt: {
+                        direction: 'horizontal',
+                        marginLeft: 80,
+                        legendPosition: 'bottomright',
+                        barUseInnerLabelsForHorizontal: true,
+                        barGroupWidthRatio: 0.25,
+                    },
+                },
+                {
+                    key: 'bar-h-stack-normal',
+                    type: 'bar',
+                    text: 'Horizontal bars with normal stack',
+                    optExt: {
+                        direction: 'horizontal',
+                        marginLeft: 80,
+                        legendPosition: 'bottomright',
+                        barDisplay: 'stackNormal',
+                    },
+                },
+                {
+                    key: 'bar-h-stack-percent',
+                    type: 'bar',
+                    text: 'Horizontal bars with percent stack',
+                    optExt: {
+                        direction: 'horizontal',
+                        marginLeft: 80,
+                        legendPosition: 'bottomright',
+                        barDisplay: 'stackPercent',
+                    },
+                },
+
+                {
+                    key: 'rose-normal',
+                    type: 'rose',
+                    text: 'Roses',
+                    optExt: {},
+                },
+
+            ],
+
+            typeItems: [],
+
+            keySelectTrans: null,
+            typeSelect: null,
+
+        }
+    },
+    computed: {
+
+        typeItemsDef: function() {
+            let vo = this
+            if (vo.mode === 'one') {
+                return vo.typeItemsDefOne
+            }
+            return vo.typeItemsDefMulti
+        },
+
+        changeTypeItems: function() {
+            let vo = this
+
+            //typeItems
+            let typeItems = []
+            if (!iseobj(vo.kpSelectText)) {
+                typeItems = vo.typeItemsDef
+            }
+            else {
+                each(vo.typeItemsDef, (v) => {
+                    if (!haskey(vo.kpSelectText, v.key)) {
+                        return true //跳出換下一個
+                    }
+                    let text = vo.kpSelectText[v.key]
+                    typeItems.push({
+                        ...v,
+                        text,
+                    })
+                })
+            }
+            // console.log('kpSelectText', vo.kpSelectText)
+            // console.log('typeItems', typeItems)
+
+            //save
+            vo.typeItems = typeItems
+
+            return ''
+        },
+
+        changeKeySelect: function() {
+            let vo = this
+
+            //updateTypeSelectByKey
+            vo.updateTypeSelectByKey(vo.keySelect)
+
+            return ''
+        },
+
+        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
+        },
+
+        hasOptTar: function() {
+            let vo = this
+            let b = iseobj(vo.optTar)
+            return b
+        },
+
+        cmp: function() {
+            let vo = this
+            let type = get(vo, 'typeSelect.type', '')
+            type = capitalize(type)
+            return `W${type}`
+        },
+
+        optTar: function() {
+            // console.log('computed optTar')
+
+            let vo = this
+
+            //showLabels
+            let showLabels = get(vo, 'opt.showLabels', true)
+            let barShowLabels = showLabels
+            let pieShowLabels = showLabels
+            let roseShowLabels = showLabels
+
+            //showLegend
+            let showLegend = get(vo, 'opt.showLegend', false)
+
+            //rds
+            let rds = get(vo, 'opt.rds', [])
+
+            //nrds
+            let nrds = size(rds)
+
+            //check
+            if (nrds === 0) {
+                console.log('no data, size(opt.rds)=0')
+                return null
+            }
+            else if (vo.mode === 'one' && nrds > 1) {
+                console.log('size(opt.rds)>1')
+                rds = [rds[0]]
+            }
+
+            //opt
+            let opt = null
+            try {
+
+                //opt
+                opt = vo.opt
+                opt = cloneDeep(opt)
+                let optExt = get(vo, 'typeSelect.optExt', {})
+                optExt = cloneDeep(optExt)
+                let optSet = {
+                    barShowLabels,
+                    pieShowLabels,
+                    roseShowLabels,
+                    showLegend,
+                }
+                opt = merge(opt, optExt)
+                opt = merge(opt, optSet)
+                // console.log('opt', opt)
+
+            }
+            catch (err) {
+                console.log(err)
+            }
+
+            return opt
+        },
+
+    },
+    methods: {
+
+        updateTypeSelectByKey: function(keySelect) {
+            let vo = this
+
+            //save keySelectTrans
+            vo.keySelectTrans = keySelect
+
+            //typeSelect
+            let typeSelect = null
+            each(vo.typeItems, (v) => {
+                if (v.key === keySelect) {
+                    typeSelect = v
+                    return false //跳出
+                }
+            })
+
+            //save
+            vo.typeSelect = typeSelect
+            // console.log('typeSelect', typeSelect)
+
+        },
+
+        updateTypeSelectAndEmitKeySelect: function(typeSelect) {
+            let vo = this
+
+            //save typeSelect
+            vo.typeSelect = typeSelect
+            // console.log('typeSelect', typeSelect)
+
+            //keySelect
+            let keySelect = get(typeSelect, 'key', '')
+            // console.log('keySelect', keySelect)
+
+            //updateTypeSelectByKey
+            vo.updateTypeSelectByKey(keySelect)
+
+            //emit
+            vo.$emit('update:keySelect', keySelect)
+
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WSetOne.vue

@@ -0,0 +1,57 @@
+<template>
+    <WSetMulti
+        v-bind="{...$props,mode:'one'}"
+        v-on="$listeners"
+    >
+        <template v-slot:head>
+            <slot name="head"></slot>
+        </template>
+    </WSetMulti>
+</template>
+
+<script>
+import WSetMulti from './WSetMulti.vue'
+
+
+/**
+ * @vue-prop {Object} [opt={}] 輸入設定物件，預設{}
+ */
+export default {
+    components: {
+        WSetMulti,
+    },
+    props: {
+        opt: {
+            type: Object,
+            default: () => {},
+        },
+        textPlotType: {
+            type: String,
+            default: 'Plot type',
+        },
+        widthSelect: {
+            type: Number,
+            default: 215,
+        },
+        keySelect: {
+            type: String,
+            default: 'bar-v-normal',
+        },
+        kpSelectText: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    data: function() {
+        return {
+        }
+    },
+    computed: {
+    },
+    methods: {
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/js/genBarOpt.mjs

@@ -4,6 +4,7 @@ import each from 'lodash-es/each'
 import size from 'lodash-es/size'
 import merge from 'lodash-es/merge'
 import isNumber from 'lodash-es/isNumber'
+// import range from 'lodash-es/range'
 // import cloneDeep from 'lodash-es/cloneDeep'
 import haskey from 'wsemi/src/haskey.mjs'
 // import isestr from 'wsemi/src/isestr.mjs'
@@ -26,6 +27,9 @@ function genBarOpt(width, height, keys, rds, optPlot = {}) {
 
     //direction
     let direction = get(optPlot, 'direction', 'vertical')
+    if (direction !== 'vertical' && direction !== 'horizontal') {
+        direction = 'vertical'
+    }
 
     //xTitle
     let xTitle = get(optPlot, 'xTitle', '')
@@ -72,6 +76,9 @@ function genBarOpt(width, height, keys, rds, optPlot = {}) {
     //barShowLabels
     let barShowLabels = get(optPlot, 'barShowLabels', true)
 
+    //barUseInnerLabelsForHorizontal
+    let barUseInnerLabelsForHorizontal = get(optPlot, 'barUseInnerLabelsForHorizontal', false)
+
     //showLegend
     let showLegend = get(optPlot, 'showLegend', false)
 
@@ -177,8 +184,9 @@ function genBarOpt(width, height, keys, rds, optPlot = {}) {
     let _dax1 = getDefAxis(optPlot)
     let _dax2 = {
         categories,
-        crosshair: true,
-        panningEnabled: false,
+        // crosshair: true,
+        // panningEnabled: false,
+        // tickmarkPlacement: 'on',
         labels: {
             allowOverlap: true,
             // autoRotationLimit: 0,
@@ -190,18 +198,20 @@ function genBarOpt(width, height, keys, rds, optPlot = {}) {
     // dax.min = xmin
     // dax.max = xmax
     // if (!isestr(xtitle)) {
-    //     dax.labels.formatter = function () {
+    //     dax.labels.formatter = function (hc) {
     //         return ''
     //     }
     // }
-    dax.opposite = false
     // console.log('dax', dax)
 
     //day
-    let day = getDefAxis(optPlot)
+    let _day1 = getDefAxis(optPlot)
+    let _day2 = {
+        // tickmarkPlacement: 'on',
+    }
+    let day = merge(_day1, _day2)
     day.title.text = yTitle
     day.min = 0 //從0開始
-    // day.opposite = false
     // console.log('day', day)
 
     //dlg
@@ -255,6 +265,43 @@ function genBarOpt(width, height, keys, rds, optPlot = {}) {
         // console.log('optHc(margin)', optHc)
     }
 
+    //stackPercent
+    if (barDisplay === 'stackPercent') {
+        if (direction === 'vertical') {
+            optHc.chart.marginLeft += 11
+        }
+        optHc.yAxis.labels.formatter = (hc) => {
+            return `${hc.value}%`
+        }
+    }
+
+    //horizontal, 會影響marginLeft故放margin後面
+    if (direction === 'horizontal' && barUseInnerLabelsForHorizontal) {
+        optHc.chart.marginLeft = 40
+        optHc.xAxis.title.margin = 21
+        optHc.xAxis.labels.enabled = false
+        // optHc.xAxis.startOnTick = true
+        // optHc.xAxis.endOnTick = true
+        optHc.xAxis.tickWidth = 0
+        // optHc.xAxis.gridLineWidth = 0
+        // optHc.xAxis.minorGridLineWidth = 0
+        optHc.xAxis.min = -0.25
+        // optHc.xAxis.max = size(categories) - 1 - 0.25
+        optHc.xAxis.tickInterval = 1
+        // optHc.xAxis.tickAmount = size(categories)
+        // optHc.xAxis.tickPositions = range(-1, size(categories))
+        // optHc.xAxis.tickPosition = 'outside'
+        optHc.xAxis.plotLines = [ //因highcharts的tick是between, 且min設定-0.25, 故無法繪製位置-0.5的gridLine, 得另外補畫
+            {
+                color: optHc.xAxis.gridLineColor,
+                width: optHc.xAxis.gridLineWidth,
+                value: -0.5,
+                // dashStyle: 'LongDash',
+                // zIndex: 1,
+            },
+        ]
+    }
+
     //column
     if (true) {
         optHc.plotOptions = {
@@ -284,7 +331,7 @@ function genBarOpt(width, height, keys, rds, optPlot = {}) {
         // console.log('optHc(column)', optHc)
     }
 
-    //legend
+    //legend, 會使用margin故放最後
     if (true) {
 
         //setLegendLoc

package/src/js/genPieOpt.mjs

@@ -211,7 +211,7 @@ function genPieOpt(width, height, keys, rds, optPlot = {}) {
         // console.log('optHc(pie)', optHc)
     }
 
-    //legend
+    //legend, 會使用margin故放最後
     if (true) {
 
         //setLegendLoc