w-plot-vue 1.0.0

package/src/js/genRoseOpt.mjs

@@ -0,0 +1,297 @@
+import get from 'lodash-es/get'
+import map from 'lodash-es/map'
+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 cloneDeep from 'lodash-es/cloneDeep'
+import haskey from 'wsemi/src/haskey.mjs'
+// import isestr from 'wsemi/src/isestr.mjs'
+import iseobj from 'wsemi/src/iseobj.mjs'
+import isearr from 'wsemi/src/isearr.mjs'
+import getDefOpt from './getDefOpt.mjs'
+import getDefChart from './getDefChart.mjs'
+import getDefAxis from './getDefAxis.mjs'
+import getDefLegend from './getDefLegend.mjs'
+import setLegendLoc from './setLegendLoc.mjs'
+
+
+function genPieOpt(width, height, keys, rds, optPlot = {}) {
+
+    //marginLeft, marginRight, marginTop, marginBottom
+    let marginLeft = get(optPlot, 'marginLeft', null)
+    let marginRight = get(optPlot, 'marginRight', null)
+    let marginTop = get(optPlot, 'marginTop', null)
+    let marginBottom = get(optPlot, 'marginBottom', null)
+
+    //xLabelFontSize
+    let xLabelFontSize = get(optPlot, 'xLabelFontSize', '10pt')
+
+    //yTitle
+    let yTitle = get(optPlot, 'yTitle', '')
+
+    //yTitleFontSize
+    let yTitleFontSize = get(optPlot, 'yTitleFontSize', '10pt')
+
+    //yTitleColor
+    let yTitleColor = get(optPlot, 'yTitleColor', '#444')
+
+    //yLabelFontSize
+    let yLabelFontSize = get(optPlot, 'yLabelFontSize', '8pt')
+
+    //yLabelColor
+    let yLabelColor = get(optPlot, 'yLabelColor', '#888')
+
+    //roseKpColor
+    let roseKpColor = get(optPlot, 'roseKpColor', undefined)
+
+    //roseWidthRatio
+    let roseWidthRatio = get(optPlot, 'roseWidthRatio', 0.25)
+
+    //roseBorderWidth
+    let roseBorderWidth = get(optPlot, 'roseBorderWidth', 1)
+
+    //roseShowLabels
+    let roseShowLabels = get(optPlot, 'roseShowLabels', false)
+
+    //showLegend
+    let showLegend = get(optPlot, 'showLegend', false)
+
+    //categories
+    let categories = keys
+    // console.log('categories', categories)
+
+    //gvc
+    let gvc = (color) => {
+        if (isearr(color)) {
+            let n = size(color)
+            if (n === 1) {
+                color = color[0]
+            }
+            else {
+                let stops = map(color, (c, kc) => {
+                    return [kc / (n - 1), c]
+                })
+                color = {
+                    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
+                    stops,
+                }
+            }
+        }
+        return color
+    }
+
+    //ds
+    let ds = []
+    each(rds, (rd, krd) => {
+
+        //name
+        let name = get(rd, 'name', '')
+        // console.log('name', name)
+
+        //_color1
+        let _color1 = null
+
+        //_color2
+        let _color2 = get(rd, 'color', undefined)
+
+        //_data
+        let _data = get(rd, 'data', {})
+
+        //data
+        let colorFirst = null
+        let data = []
+        each(keys, (k) => {
+
+            //vo
+            let vo = get(_data, k, null)
+
+            //v
+            let v = vo
+            if (iseobj(v)) {
+                if (!haskey(v, 'value')) {
+                    throw new Error('rose data is an object but no value')
+                }
+                v = get(v, 'value', null)
+            }
+            // console.log(k, v)
+
+            //_color3, _color4, _color5
+            let _color3 = get(roseKpColor, k, undefined)
+            let _color4 = get(roseKpColor, `${krd}.${k}`, undefined)
+            let _color5 = get(vo, 'color', undefined)
+
+            //color
+            let color = gvc(_color1 || _color2 || _color3 || _color4 || _color5) //指定各rose顏色
+
+            if (colorFirst === null) {
+                colorFirst = color
+            }
+
+            //push
+            data.push({
+                name: k,
+                y: v,
+                color,
+            })
+
+        })
+        // console.log('colorFirst', colorFirst)
+        // console.log('data', data)
+
+        //push
+        ds.push({
+            name,
+            data,
+            color: colorFirst,
+        })
+
+    })
+    // console.log('ds', ds)
+
+    //dopt
+    let dopt = getDefOpt(optPlot)
+
+    //dct
+    let dct = getDefChart({
+        ...optPlot,
+        space: 40,
+        marginLeftShift: 0,
+        marginRightShift: 0,
+        marginTopShift: 0,
+        marginBottomShift: 0,
+        plotBorderColor: 'transparent',
+    })
+    // console.log('dct', dct)
+
+    //dax
+    let _dax1 = getDefAxis({
+        ...optPlot,
+        labelFontSize: xLabelFontSize,
+    })
+    let _dax2 = {
+        categories,
+        // crosshair: true,
+        // panningEnabled: false,
+        labels: {
+            allowOverlap: true,
+            // autoRotationLimit: 0,
+            // rotation: 50,
+        },
+    }
+    let dax = merge(_dax1, _dax2)
+    // console.log('dax', dax)
+
+    //day
+    let _day1 = getDefAxis({
+        ...optPlot,
+        titleFontSize: yTitleFontSize,
+        titleColor: yTitleColor,
+        labelFontSize: yLabelFontSize,
+        labelColor: yLabelColor,
+    })
+    let _day2 = {
+        // reversedStacks: false,
+    }
+    let day = merge(_day1, _day2)
+    day.title.text = yTitle
+    day.min = 0 //從0開始
+    // console.log('day', day)
+
+    //dlg
+    let dlg = getDefLegend(optPlot)
+    // console.log('dlg', dlg)
+
+    //optHc
+    let optHc = {
+        ...dopt,
+
+        chart: {
+            ...dct,
+            polar: true,
+            type: 'column',
+            width,
+            height,
+        },
+
+        xAxis: dax,
+
+        yAxis: day,
+
+        legend: dlg,
+
+        series: ds,
+
+    }
+
+    //margin
+    if (true) {
+        if (isNumber(marginLeft)) {
+            optHc.chart.marginLeft = marginLeft
+        }
+        if (isNumber(marginRight)) {
+            optHc.chart.marginRight = marginRight
+        }
+        if (isNumber(marginTop)) {
+            optHc.chart.marginTop = marginTop
+        }
+        if (isNumber(marginBottom)) {
+            optHc.chart.marginBottom = marginBottom
+        }
+        // console.log('optHc(margin)', optHc)
+    }
+
+    //rose
+    if (true) {
+        optHc.plotOptions = {
+            ...optHc.plotOptions,
+
+            series: {
+                stacking: 'normal',
+                groupPadding: 0,
+                pointPadding: roseWidthRatio,
+                // pointWidth: rosePointWidth,
+                borderWidth: roseBorderWidth,
+                dataLabels: {
+                    enabled: roseShowLabels,
+                    allowOverlap: true,
+                    align: 'center',
+                    // distance: 50,
+                    // crop: false,
+                    // inside: false,
+                    // overflow: 'allow',
+                    // position: 'left',
+                    y: -10,
+                    // format: `
+                    //     <div style="width:50px;">
+                    //         <div style="font-weight:bold;">{point.name}</div>
+                    //         <div style="opacity:0.6;">{point.y}</div>
+                    //     </div>
+                    // `,
+                },
+            },
+
+        }
+        // console.log('optHc(rose)', optHc)
+    }
+
+    //legend
+    if (true) {
+
+        //setLegendLoc
+        optHc = setLegendLoc(optHc, {
+            ...optPlot,
+            legendIgnoreMargin: true,
+        })
+
+        //showLegend
+        optHc.legend.enabled = showLegend
+
+        // console.log('optHc(legend)', optHc)
+    }
+
+    return optHc
+}
+
+
+export default genPieOpt

package/src/js/getDefAxis.mjs

@@ -0,0 +1,85 @@
+import get from 'lodash-es/get'
+import dig from 'wsemi/src/dig.mjs'
+
+
+/**
+ * 產生預設Highcharts軸物件
+ *
+ * @param {Object} [opt={}] 輸入設定物件，預設{}
+ * @returns {Object} 回傳物件
+ */
+function getDefAxis(opt = {}) {
+    //預設軸物件
+
+    let softMax = get(opt, 'softMax')
+    let vDig = get(opt, 'vDig')
+
+    let titleFontFamily = get(opt, 'titleFontFamily', '微軟正黑體')
+    let titleFontSize = get(opt, 'titleFontSize', '12pt')
+    let titleColor = get(opt, 'titleColor', '#000')
+
+    let labelFontFamily = get(opt, 'labelFontFamily', '微軟正黑體')
+    let labelFontSize = get(opt, 'labelFontSize', '9pt')
+    let labelColor = get(opt, 'labelColor', '#222')
+
+    let obj = {
+
+        crosshair: true,
+
+        title: {
+            useHTML: true,
+            text: '',
+            style: {
+                fontFamily: titleFontFamily,
+                fontSize: titleFontSize,
+                color: titleColor,
+            },
+        },
+
+        softMax,
+
+        labels: {
+            autoRotation: false,
+            style: {
+                fontFamily: labelFontFamily,
+                fontSize: labelFontSize,
+                color: labelColor,
+            },
+            formatter: function() {
+                if (vDig) {
+                    return dig(this.value, vDig)
+                }
+                return this.value
+            },
+        },
+
+        lineColor: '#666',
+        lineWidth: 1,
+
+        //tickInterval: 0.2,
+        gridLineColor: '#eeeeee',
+        gridLineWidth: 1,
+
+        //minorTickInterval: 0.1,
+        minorGridLineColor: '#eeeeee',
+        minorGridLineWidth: 1,
+
+        tickPosition: 'inside',
+        tickColor: '#222222',
+        tickWidth: 1,
+        tickLength: 5,
+
+        minorTickPosition: 'inside',
+        minorTickColor: '#222222',
+        minorTickWidth: 1,
+        minorTickLength: 5,
+
+        //opposite: false,
+
+    }
+
+    return obj
+}
+
+
+export default getDefAxis

package/src/js/getDefChart.mjs

@@ -0,0 +1,51 @@
+import get from 'lodash-es/get'
+
+
+/**
+ * 產生預設Highcharts圖物件
+ *
+ * @param {Object} [opt={}] 輸入設定物件，預設{}
+ * @returns {Object} 回傳物件
+ */
+function getDefChart(opt = {}) {
+
+    //marginLeftShift, marginRightShift, marginTopShift, marginBottomShift
+    let marginLeftShift = get(opt, 'marginLeftShift', 60)
+    let marginRightShift = get(opt, 'marginRightShift', 0)
+    let marginTopShift = get(opt, 'marginTopShift', 10)
+    let marginBottomShift = get(opt, 'marginBottomShift', 50)
+
+    //spacingLeft
+    let spacingLeft = get(opt, 'spacingLeft', 0)
+    let spacingRight = get(opt, 'spacingRight', 0)
+    let spacingTop = get(opt, 'spacingTop', 0)
+    let spacingBottom = get(opt, 'spacingBottom', 0)
+
+    //plotBorderColor
+    let plotBorderColor = get(opt, 'plotBorderColor', '#666')
+
+    //plotBorderWidth
+    let plotBorderWidth = get(opt, 'plotBorderWidth', 1)
+
+    //sp, 邊緣最少5px以上, 否則曲線圖標貼框時會被裁切
+    let sp = get(opt, 'space', 5)
+
+    let obj = {
+        animation: false, //關閉動畫
+        plotBorderColor,
+        plotBorderWidth,
+        marginLeft: sp + marginLeftShift,
+        marginRight: sp + marginRightShift,
+        marginTop: sp + marginTopShift,
+        marginBottom: sp + marginBottomShift,
+        spacingLeft,
+        spacingRight,
+        spacingTop,
+        spacingBottom,
+    }
+
+    return obj
+}
+
+
+export default getDefChart

package/src/js/getDefLegend.mjs

@@ -0,0 +1,43 @@
+import get from 'lodash-es/get'
+
+
+/**
+ * 產生預設Highcharts圖例物件
+ *
+ * @param {Object} [opt={}] 輸入設定物件，預設{}
+ * @returns {Object} 回傳物件
+ */
+function getDefLegend(opt = {}) {
+
+    let legnedFontFamily = get(opt, 'legnedFontFamily', '微軟正黑體')
+    let legnedFontSize = get(opt, 'legnedFontSize', '9pt')
+    let legnedColor = get(opt, 'legnedColor', '#222')
+
+    let legendBackgroundColor = get(opt, 'legendBackgroundColor', 'rgba(255,255,255,0.75)')
+    let legnedBorderColor = get(opt, 'legnedBorderColor', '#aaa')
+
+    let obj = {
+        useHTML: true,
+        enabled: true,
+        shared: true,
+        floating: true,
+        layout: 'vertical',
+        // align: 'right',
+        // verticalAlign: 'top',
+        // x: -5,
+        // y: 5,
+        backgroundColor: legendBackgroundColor,
+        borderColor: legnedBorderColor,
+        borderWidth: 1,
+        itemStyle: {
+            fontFamily: legnedFontFamily,
+            fontSize: legnedFontSize,
+            color: legnedColor,
+        },
+    }
+
+    return obj
+}
+
+
+export default getDefLegend

package/src/js/getDefOpt.mjs

@@ -0,0 +1,65 @@
+import get from 'lodash-es/get'
+
+
+/**
+ * 產生預設Highcharts設定物件
+ *
+ * @param {Object} [opt={}] 輸入設定物件，預設{}
+ * @returns {Object} 回傳物件
+ */
+function getDefOpt(opt = {}) {
+
+    //useTooltip
+    let useTooltip = get(opt, 'useTooltip', true)
+
+    //useLegend
+    let useLegend = get(opt, 'useLegend', true)
+
+    let _opt = {
+
+        credits: {
+            enabled: false //不顯示highchart icon
+        },
+
+        navigation: {
+            buttonOptions: {
+                enabled: false //若有引用export.js時關閉匯出按鈕
+            }
+        },
+
+        boost: {
+            enabled: true,
+            // useGPUTranslations: true,
+        },
+
+        plotOptions: {
+            series: {
+                animation: false, //關閉動畫
+            },
+        },
+
+        title: {
+            text: ''
+        },
+
+        subtitle: {
+            text: ''
+        },
+
+        tooltip: {
+            useHTML: true,
+            enabled: useTooltip,
+        },
+
+        legend: {
+            useHTML: true,
+            enabled: useLegend,
+        },
+
+    }
+
+    return _opt
+}
+
+
+export default getDefOpt

package/src/js/setLegendLoc.mjs

@@ -0,0 +1,104 @@
+import get from 'lodash-es/get'
+import cdbl from 'wsemi/src/cdbl.mjs'
+
+
+/**
+ * 使用繪圖設定物件針對Highcharts物件處理圖例位置
+ *
+ * @param {Object} [opt={}] 輸入設定物件，預設{}
+ * @param {Object} [optPic={}] 輸入繪圖設定物件，預設{}
+ * @returns {Object} 回傳物件
+ */
+function setLegendLoc(opt, optPic = {}) {
+
+    let legendPosition = get(optPic, 'legendPosition', 'topright')
+
+    let ml = get(opt, 'chart.marginLeft') || get(opt, 'chart.margin-left')
+    ml = cdbl(ml)
+    let mr = get(opt, 'chart.marginRight') || get(opt, 'chart.margin-right')
+    mr = cdbl(mr)
+    let mt = get(opt, 'chart.marginTop') || get(opt, 'chart.margin-top')
+    mt = cdbl(mt)
+    let mb = get(opt, 'chart.marginBottom') || get(opt, 'chart.margin-bottom')
+    mb = cdbl(mb)
+    // console.log('ml', ml)
+    // console.log('mr', mr)
+    // console.log('mt', mt)
+    // console.log('mb', mb)
+
+    //legendIgnoreMargin
+    let legendIgnoreMargin = get(optPic, 'legendIgnoreMargin', false)
+
+    if (legendIgnoreMargin) {
+        ml = 0
+        mr = 0
+        mt = 0
+        mb = 0
+    }
+
+    let sl = get(opt, 'chart.spacingLeft') || get(opt, 'chart.spacing-left')
+    sl = cdbl(sl)
+    let sr = get(opt, 'chart.spacingRight') || get(opt, 'chart.spacing-right')
+    sr = cdbl(sr)
+    let st = get(opt, 'chart.spacingTop') || get(opt, 'chart.spacing-top')
+    st = cdbl(st)
+    let sb = get(opt, 'chart.spacingBottom') || get(opt, 'chart.spacing-bottom')
+    sb = cdbl(sb)
+    // console.log('sl', sl)
+    // console.log('sr', sr)
+    // console.log('st', st)
+    // console.log('sb', sb)
+
+    //legendIgnoreSpacing
+    let legendIgnoreSpacing = get(optPic, 'legendIgnoreSpacing', false)
+
+    if (legendIgnoreSpacing) {
+        sl = 0
+        sr = 0
+        st = 0
+        sb = 0
+    }
+
+    let lg = get(opt, 'legend', {})
+    opt.legend = lg //若無, 則先給予空物件, 避免後續無法直接鏈式給予值
+
+    //legendPosition
+    if (legendPosition === 'topleft') {
+        opt.legend.align = 'left'
+        opt.legend.verticalAlign = 'top'
+        let dx = 5
+        let dy = 5
+        opt.legend.x = ml - sl + dx
+        opt.legend.y = mt - st + dy
+    }
+    else if (legendPosition === 'bottomleft') {
+        opt.legend.align = 'left'
+        opt.legend.verticalAlign = 'bottom'
+        let dx = 5
+        let dy = -5
+        opt.legend.x = ml - sl + dx
+        opt.legend.y = -mb + sb + dy
+    }
+    else if (legendPosition === 'bottomright') {
+        opt.legend.align = 'right'
+        opt.legend.verticalAlign = 'bottom'
+        let dx = -5
+        let dy = -5
+        opt.legend.x = -mr + sr + dx
+        opt.legend.y = -mb + sb + dy
+    }
+    else { //legendPosition==='topright'
+        opt.legend.align = 'right'
+        opt.legend.verticalAlign = 'top'
+        let dx = -5
+        let dy = 5
+        opt.legend.x = -mr + sr + dx
+        opt.legend.y = mt - st + dy
+    }
+    // console.log('opt.legend', JSON.stringify(opt.legend))
+
+    return opt
+}
+
+
+export default setLegendLoc

package/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+    render: h => h(App),
+}).$mount('#app')

package/test/all.test.mjs

@@ -0,0 +1,10 @@
+import assert from 'assert'
+
+
+describe('all', function() {
+
+    it('test in localhost', function() {
+        assert.strict.deepEqual(1, 1)
+    })
+
+})

package/toolg/addVersion.mjs

@@ -0,0 +1,4 @@
+import addVersion from 'w-package-tools/src/addVersion.mjs'
+
+
+addVersion()

package/toolg/cleanFolder.mjs

@@ -0,0 +1,4 @@
+import cleanFolder from 'w-package-tools/src/cleanFolder.mjs'
+
+
+cleanFolder('docs')