npm - w-component-vue - Versions diffs - 2.1.80 → 2.1.83 - Mend

w-component-vue 2.1.80 → 2.1.83

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (870) hide show

package/src/AppZoneWPanelChart.vue DELETED Viewed

@@ -1,343 +0,0 @@
-<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-component-vue/examples/app.html?cmp='+this.innerText,'_blank')">w-panel-chart</span></div>
-        <div style="padding:0px;">
-            <div class="bk">
-                <demolink
-                    :kbname="'w-panel-chart'"
-                    :casename="'default (WHighchartsVueDyn)'"
-                ></demolink>
-                <w-panel-chart
-                    :options="WPanelChart.options1"
-                ></w-panel-chart>
-            </div>
-            <div class="bk">
-                <demolink
-                    :kbname="'w-panel-chart'"
-                    :casename="'cmpName (WHighstockVueDyn)'"
-                ></demolink>
-                <w-panel-chart
-                    :cmpName="'WHighstockVueDyn'"
-                    :options="WPanelChart.options2"
-                ></w-panel-chart>
-            </div>
-            <div class="bk">
-                <demolink
-                    :kbname="'w-panel-chart'"
-                    :casename="'cmpName (WEchartsVueDyn)'"
-                ></demolink>
-                <w-panel-chart
-                    :cmpName="'WEchartsVueDyn'"
-                    :options="WPanelChart.options3"
-                ></w-panel-chart>
-            </div>
-            <div class="bk">
-                <demolink
-                    :kbname="'w-panel-chart'"
-                    :casename="'cmpName (WHighchartsBitmapDyn)'"
-                ></demolink>
-                <w-panel-chart
-                    :cmpName="'WHighchartsBitmapDyn'"
-                    :options="WPanelChart.options1"
-                ></w-panel-chart>
-            </div>
-            <div class="bk">
-                <demolink
-                    :kbname="'w-panel-chart'"
-                    :casename="'width & height'"
-                ></demolink>
-                <w-panel-chart
-                    :width="700"
-                    :height="450"
-                    :options="WPanelChart.options1"
-                ></w-panel-chart>
-            </div>
-            <div class="bk">
-                <demolink
-                    :kbname="'w-panel-chart'"
-                    :casename="'scale'"
-                ></demolink>
-                <w-panel-chart
-                    :scale="0.8"
-                    :options="WPanelChart.options1"
-                ></w-panel-chart>
-            </div>
-            <div class="bk">
-                <demolink
-                    :kbname="'w-panel-chart'"
-                    :casename="'downloadPicture'"
-                ></demolink>
-                <w-panel-chart
-                    :downloadPicture="true"
-                    :options="WPanelChart.options1"
-                ></w-panel-chart>
-            </div>
-            <div class="bk">
-                <demolink
-                    :kbname="'w-panel-chart'"
-                    :casename="'downloadPicture & downloadPictureBtnTooltip'"
-                ></demolink>
-                <w-panel-chart
-                    :downloadPicture="true"
-                    :downloadPictureBtnTooltip="'下載圖片'"
-                    :options="WPanelChart.options1"
-                ></w-panel-chart>
-            </div>
-            <div class="bk">
-                <demolink
-                    :kbname="'w-panel-chart'"
-                    :casename="'downloadPicture & downloadPictureFilenmae'"
-                ></demolink>
-                <w-panel-chart
-                    :downloadPicture="true"
-                    :downloadPictureFilenmae="'圖片名稱'"
-                    :options="WPanelChart.options1"
-                ></w-panel-chart>
-            </div>
-            <div class="bk">
-                <demolink
-                    :kbname="'w-panel-chart'"
-                    :casename="'downloadPicture & downloadPictureBtnIcon'"
-                ></demolink>
-                <w-panel-chart
-                    :downloadPicture="true"
-                    :downloadPictureBtnIcon="mdiArrowDownBoldHexagonOutline"
-                    :options="WPanelChart.options1"
-                ></w-panel-chart>
-            </div>
-            <div class="bk">
-                <demolink
-                    :kbname="'w-panel-chart'"
-                    :casename="'downloadPicture & downloadPictureBtnIconColor & downloadPictureBtnIconColorHover & downloadPictureBtnIconColorFocus & downloadPictureBtnBackgroundColor & downloadPictureBtnBackgroundColorHover & downloadPictureBtnBackgroundColorFocus'"
-                ></demolink>
-                <w-panel-chart
-                    :downloadPicture="true"
-                    :downloadPictureBtnIconColor="'#f48'"
-                    :downloadPictureBtnIconColorHover="'#f26'"
-                    :downloadPictureBtnIconColorFocus="'#f26'"
-                    :downloadPictureBtnBackgroundColor="'rgba(255,200,200,0.3)'"
-                    :downloadPictureBtnBackgroundColorHover="'rgba(255,200,200,0.5)'"
-                    :downloadPictureBtnBackgroundColorFocus="'rgba(255,200,200,0.5)'"
-                    :options="WPanelChart.options1"
-                ></w-panel-chart>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-import { mdiArrowDownBoldHexagonOutline } from '@mdi/js'
-import demolink from './components/demolink.vue'
-import WPanelChart from './components/WPanelChart.vue'
-export default {
-    components: {
-        demolink,
-        WPanelChart,
-    },
-    props: {
-    },
-    data: function() {
-        let df = function(d) {
-            let date = []
-            let data = []
-            for (let i = 0; i < d.length; i++) {
-                let v = d[i]
-                let now = new Date(v[0])
-                let t = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-')
-                date.push(t)
-                data.push(v[1])
-            }
-            return {
-                date: date,
-                data: data,
-            }
-        }
-        let rDataAAPL = df(window.dataAAPL)
-        return {
-            mdiArrowDownBoldHexagonOutline,
-            'WPanelChart': {
-                'options1': {
-                    chart: {
-                        animation: false, //關閉動畫
-                    },
-                    plotOptions: {
-                        series: {
-                            animation: false, //關閉動畫
-                        },
-                    },
-                    title: {
-                        text: 'AAPL Stock Price'
-                    },
-                    xAxis: {
-                        type: 'datetime'
-                    },
-                    yAxis: {
-                        title: {
-                            text: 'Price'
-                        }
-                    },
-                    tooltip: {
-                        headerFormat: '<div style="font-size:8pt;">{point.x:%Y/%m/%d %H:%M}</div><br/>',
-                        pointFormat: ' Price: <b>{point.y}</b>'
-                    },
-                    series: [{
-                        name: 'AAPL',
-                        data: window.dataAAPL,
-                        tooltip: {
-                            valueDecimals: 2
-                        }
-                    }]
-                },
-                'options2': {
-                    // rangeSelector: {
-                    //     enabled: true,
-                    //     selected: 1
-                    // },
-                    title: {
-                        text: 'AAPL Stock Price'
-                    },
-                    xAxis: {
-                        type: 'datetime'
-                    },
-                    yAxis: {
-                        title: {
-                            text: 'Price'
-                        }
-                    },
-                    series: [{
-                        name: 'AAPL',
-                        data: window.dataAAPL,
-                        tooltip: {
-                            valueDecimals: 2
-                        }
-                    }]
-                },
-                'options3': {
-                    tooltip: {
-                        trigger: 'axis',
-                        position: function (pt) {
-                            return [pt[0], '10%']
-                        }
-                    },
-                    title: {
-                        left: 'center',
-                        text: 'AAPL Stock Price',
-                    },
-                    toolbox: {
-                        feature: {
-                            dataZoom: {
-                                yAxisIndex: 'none',
-                                title: {
-                                    zoom: 'Zoom',
-                                    back: 'Zoom Reset'
-                                }
-                            },
-                            restore: {
-                                title: 'Restore',
-                            },
-                            saveAsImage: {
-                                title: 'Download',
-                            }
-                        }
-                    },
-                    xAxis: {
-                        type: 'category',
-                        boundaryGap: false,
-                        data: rDataAAPL.date
-                    },
-                    yAxis: {
-                        type: 'value',
-                        boundaryGap: [0, '100%']
-                    },
-                    dataZoom: [{
-                        type: 'inside',
-                        start: 0,
-                        end: 100
-                    }, {
-                        start: 0,
-                        end: 10,
-                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
-                        handleSize: '80%',
-                        handleStyle: {
-                            color: '#fff',
-                            shadowBlur: 3,
-                            shadowColor: 'rgba(0, 0, 0, 0.6)',
-                            shadowOffsetX: 2,
-                            shadowOffsetY: 2
-                        }
-                    }],
-                    series: [
-                        {
-                            name: 'Price',
-                            type: 'line',
-                            itemStyle: {
-                                color: 'rgba(20, 20, 200, 0.5)'
-                            },
-                            data: rDataAAPL.data
-                        }
-                    ]
-                },
-            },
-            'actions': [
-            ],
-        }
-    },
-}
-</script>
-<style scoped>
-</style>

package/src/components/WHighchartsBitmapDyn.vue DELETED Viewed

@@ -1,238 +0,0 @@
-<template>
-    <div>
-        <WIconLoading v-if="isEff && !isGenDone"></WIconLoading>
-        <img ref="pic" :style="`width:${picw}px; height:${pich}px;`" :src="b64" v-if="isGenDone">
-    </div>
-</template>
-<script>
-import get from 'lodash/get'
-import isNumber from 'lodash/isNumber'
-import waitFun from 'wsemi/src/waitFun.mjs'
-import iseobj from 'wsemi/src/iseobj.mjs'
-import isfun from 'wsemi/src/isfun.mjs'
-import html2picDyn from 'wsemi/src/html2picDyn.mjs'
-import domConvertToPicDyn from 'wsemi/src/domConvertToPicDyn.mjs'
-import importResources from 'wsemi/src/importResources.mjs'
-import domVirtualCreateQueue from 'wsemi/src/domVirtualCreateQueue.mjs'
-import WIconLoading from './WIconLoading.vue'
-import { iniHCMarkers, getHCGlobal } from '../js/highchartsSetting.mjs'
-//dpq
-let dpq = domVirtualCreateQueue()
-/**
- * @vue-prop {Array} [pathItems=['詳見原始碼']] 輸入highcharts組件js檔案位置字串陣列，預設詳見原始碼處props->pathItems->default
- * @vue-prop {Object} [options={}] 輸入highcharts設定物件，預設{}
- * @vue-prop {Number} [scale=3] 輸入轉出base64圖片時的放大率數字，預設3
- * @vue-prop {Function} [render=null] 輸入外部提供轉出base64圖片時的渲染器函數，若給null則代表使用預設渲染器defRender，預設null
- * @vue-prop {String} [converter='html2picDyn'] 輸入預設渲染器defRender內將dom轉成base64圖片所使用的函數名稱字串，可使用'html2picDyn'或'domConvertToPicDyn'，前者可支援IE11但效能較差且記憶體使用較多，後者僅支援HTML5瀏覽器但效能佳且記憶體使用較少。預設'html2picDyn'
- */
-export default {
-    components: {
-        WIconLoading,
-    },
-    props: {
-        pathItems: {
-            type: Array,
-            default: () => [
-                'https://cdn.jsdelivr.net/npm/highcharts@9.3.2/highcharts.js',
-                'https://cdn.jsdelivr.net/npm/highcharts@9.3.2/modules/stock.js', //因vue-highcharts初始化若無stock會無法註冊全域組件, 故若還會使用highstock vue組件, 得先於highcharts vue組件事先載入
-                'https://cdn.jsdelivr.net/npm/highcharts@9.3.2/modules/annotations.js',
-                'https://cdn.jsdelivr.net/npm/highcharts@9.3.2/modules/heatmap.js',
-                'https://cdn.jsdelivr.net/npm/highcharts@9.3.2/modules/boost.js',
-                'https://cdn.jsdelivr.net/npm/highcharts@9.3.2/modules/boost-canvas.js',
-            ],
-        },
-        options: {
-            type: Object,
-            default: () => {},
-        },
-        scale: {
-            type: Number,
-            default: 3,
-        },
-        render: {
-            type: Function, //need async function, input(w, h, scale, highchartsOpt)
-            default: null,
-        },
-        converter: {
-            type: String,
-            default: 'html2picDyn',
-        },
-    },
-    data: function() {
-        return {
-            picw: 0,
-            pich: 0,
-            b64: '',
-        }
-    },
-    mounted: function() {
-        //console.log('mounted')
-        let vo = this
-        //importResources
-        importResources(vo.pathItems)
-            .then((res) => {
-                //console.log('res', res)
-                if (res !== 'loaded') {
-                    //Highcharts
-                    let Highcharts = window['Highcharts']
-                    //iniHCMarkers
-                    iniHCMarkers(Highcharts)
-                    //setOptions
-                    Highcharts.setOptions(getHCGlobal())
-                }
-            })
-    },
-    watch: {
-        options: {
-            immediate: true,
-            deep: true,
-            handler(value) {
-                // console.log('watch options', value)
-                let vo = this
-                //default
-                vo.picw = 0
-                vo.pich = 0
-                vo.b64 = ''
-                //plot
-                vo.plot()
-            }
-        }
-    },
-    computed: {
-        isEff: function() {
-            return iseobj(this.options)
-        },
-        isGenDone: function() {
-            return this.b64 !== ''
-        },
-    },
-    methods: {
-        defRender: async function(w, h, scale, highchartsOpt) {
-            // console.log('methods defRender', w, h, scale, highchartsOpt)
-            let vo = this
-            //dpq, 先給予圖片寬高與產製函數, 內部通過佇列逐次運行產圖與回傳base64
-            let fun = async (ele) => {
-                //converterOpt
-                let converterOpt = { scale }
-                //chart
-                let chart = new window.Highcharts.Chart(ele, highchartsOpt)
-                //convert
-                let b64 = ''
-                if (vo.converter === 'domConvertToPicDyn') {
-                    b64 = await domConvertToPicDyn(ele, converterOpt)
-                }
-                else {
-                    b64 = await html2picDyn(ele, converterOpt)
-                }
-                //destroy
-                chart.destroy()
-                chart = null
-                return b64
-            }
-            let b64 = await dpq(w, h, fun)
-            // console.log('b64', b64)
-            return b64
-        },
-        plot: function() {
-            // console.log('methods plot')
-            let vo = this
-            async function core() {
-                //wait $el
-                await waitFun(() => {
-                    return vo.$el !== undefined
-                })
-                //check
-                if (!vo.isEff) {
-                    return
-                }
-                if (vo.isGenDone) {
-                    return
-                }
-                //w, h
-                let w = get(vo, '$el.offsetWidth')
-                let h = get(vo, '$el.offsetHeight')
-                // console.log('w', w, 'h', h)
-                //check
-                if (!isNumber(w) || !isNumber(h)) {
-                    return
-                }
-                //check
-                if (w <= 0 || h <= 0 || vo.scale <= 0) {
-                    return
-                }
-                //defRender
-                let fun = null
-                if (isfun(vo.render)) {
-                    fun = vo.render
-                }
-                else {
-                    fun = vo.defRender
-                }
-                let b64 = await fun(w, h, vo.scale, vo.options)
-                //save
-                vo.picw = w
-                vo.pich = h
-                vo.b64 = b64
-            }
-            core()
-                .catch((err) => {
-                    console.log(err)
-                    //emit
-                    vo.$emit('error', err)
-                })
-        },
-    },
-}
-</script>
-<style scoped>
-</style>