w-plot-vue 1.0.0

package/src/components/WBar.vue

@@ -0,0 +1,107 @@
+<template>
+    <div
+        style="display:inline-block;"
+        v-if="hasOptBar"
+    >
+
+        <div :style="`width:${getWidth}px; max-width:${getWidth}px;`">
+            <slot
+                name="top"
+                :opt="optBar"
+            ></slot>
+        </div>
+
+        <WPlot
+            :options="optBar"
+        ></WPlot>
+
+        <div :style="`width:${getWidth}px; max-width:${getWidth}px;`">
+            <slot
+                name="bottom"
+                :opt="optBar"
+            ></slot>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import get from 'lodash-es/get'
+// import map from 'lodash-es/map'
+// import cloneDeep from 'lodash-es/cloneDeep'
+// import isestr from 'wsemi/src/isestr.mjs'
+import iseobj from 'wsemi/src/iseobj.mjs'
+import WPlot from './WPlot.vue'
+import genBarOpt from '../js/genBarOpt.mjs'
+
+
+/**
+ * @vue-prop {Object} [opt={}] 輸入設定物件，預設{}
+ */
+export default {
+    components: {
+        WPlot,
+    },
+    props: {
+        opt: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    data: function() {
+        return {
+        }
+    },
+    computed: {
+
+        hasOptBar: function() {
+            //console.log('computed hasOptBar')
+
+            let vo = this
+
+            let b = iseobj(vo.optBar)
+
+            return b
+        },
+
+        optBar: function() {
+            // console.log('computed optBar')
+
+            let vo = this
+
+            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)
+            }
+            catch (err) {
+                console.log(err)
+            }
+
+            return r
+        },
+
+    },
+    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>
+
+<style scoped>
+</style>

package/src/components/WGeoVue.vue

@@ -0,0 +1,18 @@
+<script>
+import WBar from './WBar.vue'
+import WPie from './WPie.vue'
+import WPlot from './WPlot.vue'
+import WRose from './WRose.vue'
+
+let WGeoVue = {
+    install: function(Vue) {
+        Vue.component('w-bar', WBar)
+        Vue.component('w-pie', WPie)
+        Vue.component('w-plot', WPlot)
+        Vue.component('w-rose', WRose)
+    }
+}
+
+export default WGeoVue
+</script>
+

package/src/components/WPie.vue

@@ -0,0 +1,107 @@
+<template>
+    <div
+        style="display:inline-block;"
+        v-if="hasOptPie"
+    >
+
+        <div :style="`width:${getWidth}px; max-width:${getWidth}px;`">
+            <slot
+                name="top"
+                :opt="optPie"
+            ></slot>
+        </div>
+
+        <WPlot
+            :options="optPie"
+        ></WPlot>
+
+        <div :style="`width:${getWidth}px; max-width:${getWidth}px;`">
+            <slot
+                name="bottom"
+                :opt="optPie"
+            ></slot>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import get from 'lodash-es/get'
+// import map from 'lodash-es/map'
+// import cloneDeep from 'lodash-es/cloneDeep'
+// import isestr from 'wsemi/src/isestr.mjs'
+import iseobj from 'wsemi/src/iseobj.mjs'
+import WPlot from './WPlot.vue'
+import genPieOpt from '../js/genPieOpt.mjs'
+
+
+/**
+ * @vue-prop {Object} [opt={}] 輸入設定物件，預設{}
+ */
+export default {
+    components: {
+        WPlot,
+    },
+    props: {
+        opt: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    data: function() {
+        return {
+        }
+    },
+    computed: {
+
+        hasOptPie: function() {
+            //console.log('computed hasOptPie')
+
+            let vo = this
+
+            let b = iseobj(vo.optPie)
+
+            return b
+        },
+
+        optPie: function() {
+            // console.log('computed optPie')
+
+            let vo = this
+
+            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)
+            }
+            catch (err) {
+                console.log(err)
+            }
+
+            return r
+        },
+
+    },
+    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>
+
+<style scoped>
+</style>

package/src/components/WPlot.vue

@@ -0,0 +1,86 @@
+<template>
+    <div
+        :style="`display:inline-block; width:${widthInp}px; min-width:${widthInp}px; height:${heightInp}px; overflow-y:hidden;`"
+        v-if="options"
+    >
+
+        <WHighchartsVueDyn
+            :options="options"
+        ></WHighchartsVueDyn>
+
+    </div>
+</template>
+
+<script>
+import get from 'lodash-es/get'
+import isnum from 'wsemi/src/isnum.mjs'
+import cdbl from 'wsemi/src/cdbl.mjs'
+import WHighchartsVueDyn from 'w-component-vue/src/components/WHighchartsVueDyn.vue'
+
+
+/**
+ * @vue-prop {Object} [options={}] 輸入設定物件，預設{}
+ */
+export default {
+    components: {
+        WHighchartsVueDyn,
+    },
+    props: {
+        options: {
+            type: Object,
+            default: () => {},
+        },
+        width: {
+            type: Number,
+            default: 400,
+        },
+        height: {
+            type: Number,
+            default: 400,
+        },
+    },
+    data: function() {
+        return {
+        }
+    },
+    computed: {
+
+        widthInp: function() {
+            //console.log('computed widthInp')
+
+            let vo = this
+
+            //w
+            let w = vo.width
+            let wOpt = get(vo, 'options.chart.width', '')
+            if (isnum(wOpt)) {
+                w = cdbl(wOpt)
+            }
+
+            return w
+        },
+
+        heightInp: function() {
+            //console.log('computed heightInp')
+
+            let vo = this
+
+            //h
+            let h = vo.height
+            let hOpt = get(vo, 'options.chart.height', '')
+            if (isnum(hOpt)) {
+                h = cdbl(hOpt)
+            }
+
+            return h
+        },
+
+    },
+    methods: {
+
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WRose.vue

@@ -0,0 +1,107 @@
+<template>
+    <div
+        style="display:inline-block;"
+        v-if="hasOptRose"
+    >
+
+        <div :style="`width:${getWidth}px; max-width:${getWidth}px;`">
+            <slot
+                name="top"
+                :opt="optRose"
+            ></slot>
+        </div>
+
+        <WPlot
+            :options="optRose"
+        ></WPlot>
+
+        <div :style="`width:${getWidth}px; max-width:${getWidth}px;`">
+            <slot
+                name="bottom"
+                :opt="optRose"
+            ></slot>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import get from 'lodash-es/get'
+// import map from 'lodash-es/map'
+// import cloneDeep from 'lodash-es/cloneDeep'
+// import isestr from 'wsemi/src/isestr.mjs'
+import iseobj from 'wsemi/src/iseobj.mjs'
+import WPlot from './WPlot.vue'
+import genRoseOpt from '../js/genRoseOpt.mjs'
+
+
+/**
+ * @vue-prop {Object} [opt={}] 輸入設定物件，預設{}
+ */
+export default {
+    components: {
+        WPlot,
+    },
+    props: {
+        opt: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    data: function() {
+        return {
+        }
+    },
+    computed: {
+
+        hasOptRose: function() {
+            //console.log('computed hasOptRose')
+
+            let vo = this
+
+            let b = iseobj(vo.optRose)
+
+            return b
+        },
+
+        optRose: function() {
+            // console.log('computed optRose')
+
+            let vo = this
+
+            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)
+            }
+            catch (err) {
+                console.log(err)
+            }
+
+            return r
+        },
+
+    },
+    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>
+
+<style scoped>
+</style>

package/src/components/demolink.vue

@@ -0,0 +1,105 @@
+<template>
+    <div class="item">
+
+        <div style="display:inline-block;">
+            {{casename}}
+        </div>
+
+        <div style="padding-left:5px;"></div>
+
+        <w-button-circle
+            :paddingStyle="{v:3,h:3}"
+            :icon="mdiLaunch"
+            :iconSize="16"
+            :iconColor="'red darken-1'"
+            :iconColorHover="'red darken-1'"
+            :iconColorFocus="'red darken-1'"
+            :backgroundColor="'#fff'"
+            :backgroundColorHover="'#fff5f5'"
+            :backgroundColorFocus="'#fff2f2'"
+            :tooltip="'example'"
+            @click="ckExample"
+        ></w-button-circle>
+
+        <div style="padding-left:5px;"></div>
+
+        <w-button-circle
+            :paddingStyle="{v:3,h:3}"
+            :icon="mdiUnfoldMoreVertical"
+            :iconSize="16"
+            :iconColor="'red darken-1'"
+            :iconColorHover="'red darken-1'"
+            :iconColorFocus="'red darken-1'"
+            :backgroundColor="'#fff'"
+            :backgroundColorHover="'#fff5f5'"
+            :backgroundColorFocus="'#fff2f2'"
+            :tooltip="'code'"
+            @click="ckCode"
+        ></w-button-circle>
+
+    </div>
+</template>
+
+<script>
+import { mdiLaunch, mdiUnfoldMoreVertical } from '@mdi/js'
+import cvCasename from '../../toolg/cvCasename.mjs'
+import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
+
+
+export default {
+    components: {
+        WButtonCircle,
+    },
+    props: {
+        kbname: {
+            type: String,
+        },
+        casename: {
+            type: String,
+        },
+    },
+    data: function() {
+        return {
+            mdiLaunch,
+            mdiUnfoldMoreVertical
+        }
+    },
+    mounted: function() {
+    },
+    computed: {
+
+        fn: function() {
+            let fnc = `${this.casename}`
+            return `${this.kbname}_${cvCasename(fnc)}`
+        },
+
+    },
+    methods: {
+
+        ckExample: function() {
+            let vo = this
+            let url = 'https://yuda-lyu.github.io/w-plot-vue/examples/' + vo.fn + '.html'
+            window.open(url, '_blank')
+        },
+
+        ckCode: function() {
+            let vo = this
+            let url = 'https://github.com/yuda-lyu/w-plot-vue/blob/master/docs/examples/' + vo.fn + '.html'
+            window.open(url, '_blank')
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+.item {
+    border-left: 3px solid #ffba75;
+    margin: 5px 5px 8px 0px;
+    padding: 3px 3px 5px 10px;
+    font-size: 0.9rem;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+</style>