w-highcharts 1.0.0

package/src/findMarker.mjs

@@ -0,0 +1,38 @@
+import each from 'lodash/each'
+import get from 'lodash/get'
+import isestr from 'wsemi/src/isestr.mjs'
+import getMarkers from './getMarkers.mjs'
+
+
+function findMarker(smbl) {
+
+    //check
+    if (!isestr(smbl)) {
+        return null
+    }
+
+    //ms
+    let ms = getMarkers()
+
+    //find
+    let m = null
+    each(ms, (v) => {
+        let _smbl = get(v, 0, null)
+        if (_smbl === smbl) {
+            m = v
+            return false //跳出
+        }
+    })
+
+    //symbol
+    let symbol = get(m, 0, null)
+    let size = get(m, 1, null)
+
+    return {
+        symbol,
+        size,
+    }
+}
+
+
+export default findMarker

package/src/genSerie.mjs

@@ -0,0 +1,124 @@
+import getLineSetting from './getLineSetting.mjs'
+
+
+function genSerie(displayDataMode, name, data, i) {
+
+    //s
+    let s
+    if (displayDataMode === 'line' || displayDataMode === 'line(grey)') {
+        let color = 'rgba(100, 140, 220, 1)'
+        if (displayDataMode === 'line(grey)') {
+            color = '#999'
+        }
+        s = {
+            type: 'line',
+            name,
+            data,
+            lineWidth: 1,
+            color,
+            marker: {
+                enabled: false,
+            },
+        }
+    }
+    else if (displayDataMode === 'marker') {
+        s = {
+            type: 'scatter',
+            name,
+            data,
+            lineWidth: 0,
+            color: 'transparent',
+            dashStyle: null,
+            marker: {
+                enabled: true,
+                symbol: 'circle',
+                radius: 4,
+                lineWidth: 0,
+                fillColor: 'rgba(100,170,255,1)',
+                lineColor: 'rgba(20,100,200,1)',
+            },
+        }
+    }
+    else if (displayDataMode === 'markers') {
+        let ls = getLineSetting(i)
+        s = {
+            type: 'scatter',
+            name,
+            data,
+            lineWidth: 0,
+            color: 'transparent',
+            dashStyle: null,
+            marker: {
+                enabled: true,
+                symbol: ls.marker,
+                radius: ls.markerSize,
+                lineWidth: 1,
+                fillColor: ls.markerFacecolor,
+                lineColor: ls.markerEdgecolor,
+            },
+        }
+    }
+    else if (displayDataMode === 'dot point') {
+        s = {
+            type: 'scatter',
+            name,
+            data,
+            lineWidth: 0,
+            color: 'transparent',
+            dashStyle: null,
+            marker: {
+                enabled: true,
+                symbol: 'circle',
+                radius: 2,
+                lineWidth: 0,
+                fillColor: 'rgba(255, 34, 102, 1)', //#f26
+                lineColor: 'transparent',
+            },
+        }
+    }
+    else if (displayDataMode === 'small point') {
+        s = {
+            type: 'scatter',
+            name,
+            data,
+            lineWidth: 0,
+            color: 'transparent',
+            dashStyle: null,
+            marker: {
+                enabled: true,
+                symbol: 'circle',
+                radius: 1,
+                lineWidth: 0,
+                fillColor: 'rgba(100, 140, 220, 1)',
+                lineColor: 'transparent',
+            },
+        }
+    }
+    else if (displayDataMode === 'marker point') {
+        s = {
+            type: 'scatter',
+            name,
+            data,
+            lineWidth: 0,
+            color: 'transparent',
+            dashStyle: null,
+            marker: {
+                enabled: true,
+                symbol: 'circle',
+                radius: 4,
+                lineWidth: 1,
+                fillColor: 'transparent',
+                lineColor: '#f26',
+            },
+        }
+    }
+    else {
+        console.log('displayDataMode', displayDataMode)
+        throw new Error(`invalid displayDataMode[${displayDataMode}]`)
+    }
+
+    return s
+}
+
+
+export default genSerie

package/src/getAxisLimitByChart.mjs

@@ -0,0 +1,49 @@
+import get from 'lodash/get'
+import isp0int from 'wsemi/src/isp0int.mjs'
+import cint from 'wsemi/src/cint.mjs'
+
+
+function getAxisLimitByChart(chart, opt = {}) {
+
+    //indXAxis
+    let indXAxis = get(opt, 'indXAxis')
+    if (!isp0int(indXAxis)) {
+        indXAxis = 0
+    }
+    indXAxis = cint(indXAxis)
+
+    //indYAxis
+    let indYAxis = get(opt, 'indYAxis')
+    if (!isp0int(indYAxis)) {
+        indYAxis = 0
+    }
+    indYAxis = cint(indYAxis)
+
+    //xLimMin,xLimMax,yLimMin,yLimMax
+    let xLimMin = chart.xAxis[indXAxis].min
+    if (!xLimMin) {
+        xLimMin = 0
+    }
+    let xLimMax = chart.xAxis[indXAxis].max
+    if (!xLimMax) {
+        xLimMax = 0
+    }
+    let yLimMin = chart.yAxis[indYAxis].min
+    if (!yLimMin) {
+        yLimMin = 0
+    }
+    let yLimMax = chart.yAxis[indYAxis].max
+    if (!yLimMax) {
+        yLimMax = 0
+    }
+
+    return {
+        xLimMin,
+        xLimMax,
+        yLimMin,
+        yLimMax,
+    }
+}
+
+
+export default getAxisLimitByChart

package/src/getColor.mjs

@@ -0,0 +1,65 @@
+import each from 'lodash/each'
+import get from 'lodash/get'
+import times from 'lodash/times'
+import oc from 'wsemi/src/color.mjs'
+import ispint from 'wsemi/src/ispint.mjs'
+import isnum from 'wsemi/src/isnum.mjs'
+import isearr from 'wsemi/src/isearr.mjs'
+import cint from 'wsemi/src/cint.mjs'
+import cdbl from 'wsemi/src/cdbl.mjs'
+
+
+function getColor(i, opt = {}) {
+
+    //listL
+    let listL = get(opt, 'listL')
+    if (!isearr(listL)) {
+        listL = [0.35, 0.7]
+    }
+
+    //listS
+    let listS = get(opt, 'listS')
+    if (!isearr(listS)) {
+        listS = [0.9, 0.5, 0.2]
+    }
+
+    //opacity
+    let opacity = get(opt, 'opacity')
+    if (!isnum(opacity)) {
+        opacity = 1
+    }
+    opacity = cdbl(opacity)
+    opacity = Math.max(opacity, 0)
+    opacity = Math.min(opacity, 1)
+
+    //hueSliceNum
+    let hueSliceNum = get(opt, 'hueSliceNum')
+    if (!ispint(hueSliceNum)) {
+        hueSliceNum = 5
+    }
+    hueSliceNum = cint(hueSliceNum)
+
+    //ltcolor
+    let ltcolor = []
+    each(listL, function (rl) {
+        each(listS, function (rs) {
+            times(hueSliceNum, function (i) {
+                let tc = oc.toRgbaString({
+                    h: (360 * i / hueSliceNum),
+                    s: rs,
+                    l: rl,
+                    a: opacity,
+                })
+                ltcolor.push(tc)
+            })
+        })
+    })
+
+    //j
+    let j = i % ltcolor.length
+
+    return ltcolor[j]
+}
+
+
+export default getColor

package/src/getConvertLocByChart.mjs

@@ -0,0 +1,89 @@
+import map from 'lodash/map'
+import get from 'lodash/get'
+import isNumber from 'lodash/isNumber'
+import isfun from 'wsemi/src/isfun.mjs'
+import getAxisLimitByChart from './getAxisLimitByChart.mjs'
+
+
+function getConvertLocByChart(chart, opt = {}) {
+
+    //size
+    let rl = chart.plotLeft
+    let rt = chart.plotTop
+    let rw = chart.plotWidth
+    let rh = chart.plotHeight
+    // console.log('rl', rl, 'rt', rt, 'rw', rw, 'rh', rh)
+
+    //getAxisLimitByChart
+    let lims = getAxisLimitByChart(chart, opt)
+
+    //cvLim
+    let cvLim = get(opt, 'cvLim')
+    if (isfun(cvLim)) {
+        lims = cvLim(lims)
+    }
+
+    //spread
+    let { xLimMin, xLimMax, yLimMin, yLimMax } = lims
+    // console.log('chart.yAxis', chart.yAxis)
+    // console.log('xLimMax', xLimMax)
+    // console.log('xLimMin', xLimMin)
+    // console.log('yLimMax', yLimMax)
+    // console.log('yLimMin', yLimMin)
+
+    //getType
+    let getType = (p) => {
+        let len1 = get(p, '0')
+        if (isNumber(len1)) {
+            return 'point'
+        }
+        let len2 = get(p, '0.0')
+        if (isNumber(len2)) {
+            return 'points'
+        }
+        console.log('p', p)
+        throw new Error('invalid type of p')
+    }
+
+    //cv
+    let cv = (p, invXY = false) => {
+
+        //xr,yr
+        let xr = (p[0] - xLimMin) / (xLimMax - xLimMin)
+        let yr = (p[1] - yLimMin) / (yLimMax - yLimMin)
+        if (invXY) {
+            let t = xr
+            xr = yr
+            yr = t
+        }
+
+        //xn,yn
+        let xn = xr * (rw) + rl
+        let yn = (1 - yr) * (rh) + rt
+
+        return [xn, yn]
+    }
+
+    //cvp
+    let cvp = (p, invXY = false) => {
+        let type = getType(p)
+        if (type === 'point') {
+            return cv(p, invXY)
+        }
+        else if (type === 'points') {
+            let ps = p
+            return map(ps, (p) => {
+                return cv(p, invXY)
+            })
+        }
+        throw new Error('invalid type')
+    }
+
+    return {
+        lims,
+        cvp,
+    }
+}
+
+
+export default getConvertLocByChart

package/src/getDefDataGrouping.mjs

@@ -0,0 +1,19 @@
+import getDefUnits from './getDefUnits.mjs'
+import getDefDateFmt from './getDefDateFmt.mjs'
+
+
+/**
+ * 取得Highcharts時間群組設定物件
+ *
+ * @returns {Object} 回傳時間群組設定物件
+ */
+function getDefDataGrouping() {
+    return {
+        enabled: true,
+        units: getDefUnits(),
+        dateTimeLabelFormats: getDefDateFmt(),
+    }
+}
+
+
+export default getDefDataGrouping

package/src/getDefDateFmt.mjs

@@ -0,0 +1,29 @@
+
+/**
+ * 取得Highcharts時間單位格式物件
+ *
+ * @returns {Object} 回傳時間單位格式物件
+ */
+function getDefDateFmt() {
+    return {
+        //millisecond: ['%A, %m/%d, %H:%M:%S.%L', '%A, %m/%d, %H:%M:%S.%L', '-%H:%M:%S.%L'],
+        //second: ['%A, %m/%d, %H:%M:%S', '%A, %m/%d, %H:%M:%S', '-%H:%M:%S'],
+        //minute: ['%A, %m/%d, %H:%M', '%A, %m/%d, %H:%M', '-%H:%M'],
+        //hour: ['%A, %m/%d, %H:%M', '%A, %m/%d, %H:%M', '-%H:%M'],
+        //day: ['%A, %Y/%m/%d', '%A, %m/%d', '-%A, %Y/%m/%d'],
+        //week: ['%Y/%m/%d', '%A, %m/%d', '-%A, %Y/%m/%d'],
+        //month: ['%Y/%m', '%m', '-%m %Y'],
+        //year: ['%Y', '%Y', '-%Y']
+        millisecond: ['%Y/%m/%d %H:%M:%S.%L', '%Y/%m/%d %H:%M:%S.%L', ' ~ %H:%M:%S.%L'],
+        second: ['%Y/%m/%d %H:%M:%S', '%Y/%m/%d %H:%M:%S', ' ~ %H:%M:%S'],
+        minute: ['%Y/%m/%d %H:%M', '%Y/%m/%d %H:%M', ' ~ %H:%M'],
+        hour: ['%Y/%m/%d %H:%M', '%Y/%m/%d %H:%M', ' ~ %H:%M'],
+        day: ['%Y/%m/%d', '%Y/%m/%d', ' ~ %Y/%m/%d'],
+        week: ['%Y/%m/%d', '%Y/%m/%d', ' ~ %Y/%m/%d'],
+        month: ['%Y/%m', '%Y/%m', ' ~ %Y/%m'],
+        year: ['%Y', '%Y', ' ~ %Y']
+    }
+}
+
+
+export default getDefDateFmt

package/src/getDefMarker.mjs

@@ -0,0 +1,19 @@
+
+
+/**
+ * 產生Highcharts標記物件
+ *
+ * @returns {Object} 回傳標記物件
+ */
+function getDefMarker() {
+    return {
+        enabled: true,
+        symbol: 'circle',
+        fillColor: 'rgba(255,255,255,0.5)', //'#fff',
+        lineWidth: 2,
+        lineColor: null,
+        radius: 5,
+    }
+}
+
+export default getDefMarker

package/src/getDefOpt.mjs

@@ -0,0 +1,98 @@
+import getDefDateFmt from './getDefDateFmt.mjs'
+
+
+/**
+ * 取得Highcharts繪圖設定物件
+ *
+ * @returns {Object} 回傳繪圖設定物件
+ */
+function getDefOpt() {
+    return {
+
+        credits: {
+            enabled: false
+        },
+
+        global: {
+            useUTC: false, //輸入資料自訂UTC時間, 此處關閉避免被強制轉換
+        },
+
+        lang: {
+            decimalPoint: '.',
+            thousandsSep: ',',
+            contextButtonTitle: '圖表匯出功能表',
+            downloadJPEG: '下載 JPEG 圖片',
+            downloadPDF: '下載 PDF 文件',
+            downloadPNG: '下載 PNG 文件',
+            downloadSVG: '下載 SVG 文件',
+            downloadXLS: '下載 XLS 文件',
+            openInCloud: '在 Highcharts Cloud 中打開',
+            drillUpText: '返回 {series.name}',
+            invalidDate: '無效的時間',
+            loading: '載入中...',
+            months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+            noData: '沒有資料',
+            printChart: '列印圖表',
+            resetZoom: '重置縮放比例',
+            resetZoomTitle: '重置為原始大小',
+            shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+            weekdays: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+            viewData: '查看資料',
+            rangeSelectorFrom: '開始時間',
+            rangeSelectorTo: '結束時間',
+            rangeSelectorZoom: '範圍',
+            zoomIn: '縮小',
+            zoomOut: '放大',
+        },
+
+        tooltip: {
+            dateTimeLabelFormats: {
+                millisecond: '%H:%M:%S.%L',
+                second: '%H:%M:%S',
+                minute: '%H:%M',
+                hour: '%H:%M',
+                day: '%Y/%m/%d',
+                week: '%Y/%m/%d',
+                month: '%Y/%m',
+                year: '%Y'
+            },
+        },
+
+        xAxis: {
+            dateTimeLabelFormats: {
+                second: '%Y<br/>%m/%d',
+                minute: '%Y<br/>%m/%d',
+                hour: '%Y<br/>%m/%d',
+                day: '%Y<br/>%m/%d',
+                week: '%Y<br/>%m/%d',
+                month: '%Y<br/>%m/%d',
+                year: '%Y<br/>%m/%d',
+            },
+        },
+
+        rangeSelector: { //選擇起訖時間輸入框與按鈕區
+            enabled: false
+        },
+        // rangeSelector,
+
+        // navigator: { //選擇時間起訖拖曳區
+        //     enabled: false
+        // },
+        // scrollbar: { //選擇時間起訖捲軸區
+        //     enabled: false
+        // },
+
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    dateTimeLabelFormats: getDefDateFmt()
+                }
+            },
+        }
+
+    }
+
+}
+
+
+export default getDefOpt

package/src/getDefUnits.mjs

@@ -0,0 +1,26 @@
+
+
+/**
+ * 取得Highcharts時間單位陣列
+ *
+ * @returns {Array} 回傳時間單位陣列
+ */
+function getDefUnits() {
+    return [
+        [
+            'day',
+            [1], //允許1天為群組單位
+        ],
+        [
+            'week',
+            [1], //允許1週為群組單位
+        ],
+        [
+            'month',
+            [1, 3, 6], //允許1月,1季,半年為群組單位
+        ]
+    ]
+}
+
+
+export default getDefUnits

package/src/getDefgetDefRangeSelector.mjs

@@ -0,0 +1,46 @@
+
+
+function getDefgetDefRangeSelector() {
+    let rangeSelector = {
+        inputDateFormat: '%Y/%m/%d',
+        // buttonTheme: {
+        //     width: 'auto',
+        //     style: {
+        //         fontSize: '12px',
+        //         padding: '4px'
+        //     }
+        // },
+        buttons: [{
+            type: 'month',
+            count: 1,
+            text: '月'
+        },
+        {
+            type: 'month',
+            count: 3,
+            text: '季度'
+        },
+        {
+            type: 'month',
+            count: 6,
+            text: '半年'
+        },
+        // {
+        //     type: 'ytd',
+        //     text: 'YTD'
+        // },
+        {
+            type: 'year',
+            count: 1,
+            text: '年'
+        },
+        {
+            type: 'all',
+            text: '所有'
+        }]
+    }
+    return rangeSelector
+}
+
+
+export default getDefgetDefRangeSelector

package/src/getFontfamily.mjs

@@ -0,0 +1,26 @@
+import get from 'lodash/get'
+import isestr from 'wsemi/src/isestr.mjs'
+import getHighchart from './getHighchart.mjs'
+
+
+let key = '__fontFamily__'
+
+function getFontfamily() {
+
+    //getHighchart
+    let hc = getHighchart()
+
+    //fontFamily
+    let fontFamily = get(hc, key)
+
+    //check
+    if (!isestr(fontFamily)) {
+        fontFamily = `'Times New Roman', 'DFKai-SB', 'DFKaiShu-SB-Estd-BF', 'KaiU', '標楷體'`
+        // let fontFamilyEng = `'微軟正黑體'`
+        // let fontFamilyCht = `'DFKai-SB', 'DFKaiShu-SB-Estd-BF', 'KaiU', '標楷體'`
+    }
+    return fontFamily
+}
+
+
+export default getFontfamily

package/src/getHighchart.mjs

@@ -0,0 +1,17 @@
+// import Highcharts from 'highcharts' //統一使用window的
+
+
+function getHighchart() {
+
+    //Highcharts
+    let Highcharts = null
+    try {
+        Highcharts = window['Highcharts']
+    }
+    catch (err) {}
+
+    return Highcharts
+}
+
+
+export default getHighchart

package/src/getLineSetting.mjs

@@ -0,0 +1,26 @@
+import getColor from './getColor.mjs'
+import getMarker from './getMarker.mjs'
+
+
+function getLineSetting(i, opt = {}) {
+    let cb = getColor(i, opt)
+    let cl = getColor(i, { opacity: 0.2 })
+    let mb = getMarker(i, opt)
+    let lineStyle = 'Solid' //getLineStyle(i);
+    let lineColor = cb
+    let marker = mb.symbol
+    let markerSize = mb.size
+    let markerEdgecolor = cb
+    let markerFacecolor = cl
+    return {
+        lineColor,
+        lineStyle,
+        marker,
+        markerEdgecolor,
+        markerFacecolor,
+        markerSize,
+    }
+}
+
+
+export default getLineSetting