w-component-vue 2.1.80 → 2.1.83

package/src/AppZoneWHighchartsBitmapDyn.vue

@@ -1,635 +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-highcharts-bitmap-dyn</span></div>
-
-
-        <div style="padding:10px; border:1px dashed #ddd; margin-bottom:10px;">
-            <div style="font-size:0.8rem; color:#f26; margin-bottom:5px;">* Need to disable animation in highcharts options</div>
-            <pre style="font-size:0.8rem;">
-let options = {
-    chart: {
-        animation: false,
-    },
-    plotOptions: {
-        series: {
-            animation: false,
-        },
-    },
-}</pre>
-        </div>
-
-
-        <div style="padding:0px;">
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-highcharts-bitmap-dyn'"
-                    :casename="'line'"
-                ></demolink>
-
-                <w-highcharts-bitmap-dyn
-                    style="width:600px; height:400px;"
-                    :options="WHighchartsBitmapDyn.options1"
-                ></w-highcharts-bitmap-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-highcharts-bitmap-dyn'"
-                    :casename="'scale (line)'"
-                ></demolink>
-
-                <w-highcharts-bitmap-dyn
-                    style="width:600px; height:400px;"
-                    :options="WHighchartsBitmapDyn.options1"
-                    :scale="1"
-                ></w-highcharts-bitmap-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-highcharts-bitmap-dyn'"
-                    :casename="'render (need w-hc2png-server) (line)'"
-                ></demolink>
-
-                <w-highcharts-bitmap-dyn
-                    style="width:600px; height:400px;"
-                    :options="WHighchartsBitmapDyn.options1"
-                    :render="WHighchartsBitmapDyn.render"
-                ></w-highcharts-bitmap-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-highcharts-bitmap-dyn'"
-                    :casename="'area'"
-                ></demolink>
-
-                <w-highcharts-bitmap-dyn
-                    style="width:600px; height:400px;"
-                    :options="WHighchartsBitmapDyn.options2"
-                ></w-highcharts-bitmap-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-highcharts-bitmap-dyn'"
-                    :casename="'bar'"
-                ></demolink>
-
-                <w-highcharts-bitmap-dyn
-                    style="width:600px; height:400px;"
-                    :options="WHighchartsBitmapDyn.options3"
-                ></w-highcharts-bitmap-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-highcharts-bitmap-dyn'"
-                    :casename="'pie'"
-                ></demolink>
-
-                <w-highcharts-bitmap-dyn
-                    style="width:600px; height:400px;"
-                    :options="WHighchartsBitmapDyn.options4"
-                ></w-highcharts-bitmap-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-highcharts-bitmap-dyn'"
-                    :casename="'heatmap'"
-                ></demolink>
-
-                <w-highcharts-bitmap-dyn
-                    style="width:600px; height:400px;"
-                    :options="WHighchartsBitmapDyn.options5"
-                ></w-highcharts-bitmap-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-highcharts-bitmap-dyn'"
-                    :casename="'large heatmap'"
-                ></demolink>
-
-                <w-highcharts-bitmap-dyn
-                    style="width:600px; height:400px;"
-                    :options="WHighchartsBitmapDyn.options6"
-                ></w-highcharts-bitmap-dyn>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-highcharts-bitmap-dyn'"
-                    :casename="'change options'"
-                ></demolink>
-
-                <div>
-                    <v-btn style="margin-right:10px;" small @click="WHighchartsBitmapDyn.optionsChange=WHighchartsBitmapDyn.options1">line</v-btn>
-                    <v-btn style="margin-right:10px;" small @click="WHighchartsBitmapDyn.optionsChange=WHighchartsBitmapDyn.options2">area</v-btn>
-                </div>
-
-                <w-highcharts-bitmap-dyn
-                    style="width:600px; height:400px;"
-                    :options="WHighchartsBitmapDyn.optionsChange"
-                ></w-highcharts-bitmap-dyn>
-
-            </div>
-
-
-        </div>
-
-
-    </div>
-</template>
-
-<script>
-import demolink from './components/demolink.vue'
-import WHighchartsBitmapDyn from './components/WHighchartsBitmapDyn.vue'
-
-
-export default {
-    components: {
-        demolink,
-        WHighchartsBitmapDyn,
-    },
-    props: {
-    },
-    data: function() {
-        return {
-            'WHighchartsBitmapDyn': {
-                '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': {
-                    chart: {
-                        animation: false, //關閉動畫
-                        zoomType: 'x'
-                    },
-                    title: {
-                        text: 'USD to EUR exchange rate over time'
-                    },
-                    subtitle: {
-                        text: 'Pinch the chart to zoom in'
-                    },
-                    xAxis: {
-                        type: 'datetime'
-                    },
-                    yAxis: {
-                        title: {
-                            text: 'Exchange rate'
-                        }
-                    },
-                    plotOptions: {
-                        series: {
-                            animation: false, //關閉動畫
-                        },
-                        area: {
-                            color: 'rgba(255,175,150,1)',
-                            fillColor: {
-                                linearGradient: {
-                                    x1: 0,
-                                    y1: 0,
-                                    x2: 0,
-                                    y2: 1
-                                },
-                                stops: [
-                                    [0, 'rgba(255,175,150,1)'],
-                                    [1, 'rgba(255,175,150,0.1)']
-                                ]
-                            },
-                            marker: {
-                                radius: 2
-                            },
-                            lineWidth: 1,
-                            states: {
-                                hover: {
-                                    lineWidth: 1
-                                }
-                            },
-                            threshold: null
-                        }
-                    },
-                    series: [{
-                        type: 'area',
-                        name: 'USD to EUR',
-                        data: window.dataUSD2EUR,
-                    }]
-                },
-                'options3': {
-                    chart: {
-                        animation: false, //關閉動畫
-                        type: 'bar'
-                    },
-                    title: {
-                        text: 'Population pyramid for Germany, 2018'
-                    },
-                    subtitle: {
-                        text: 'Population Pyramids of the World from 1950 to 2100'
-                    },
-                    accessibility: {
-                        point: {
-                            descriptionFormatter: function (point) {
-                                let index = point.index + 1
-                                let category = point.category
-                                let val = Math.abs(point.y)
-                                let series = point.series.name
-                                return index + ', Age ' + category + ', ' + val + '%. ' + series + '.'
-                            }
-                        }
-                    },
-                    xAxis: [
-                        {
-                            categories: [
-                                '0-4', '5-9', '10-14', '15-19',
-                                '20-24', '25-29', '30-34', '35-39', '40-44',
-                                '45-49', '50-54', '55-59', '60-64', '65-69',
-                                '70-74', '75-79', '80-84', '85-89', '90-94',
-                                '95-99', '100 + '
-                            ],
-                            reversed: false,
-                            labels: {
-                                step: 1
-                            },
-                            accessibility: {
-                                description: 'Age (male)'
-                            }
-                        },
-                        { // mirror axis on right side
-                            opposite: true,
-                            reversed: false,
-                            categories: [
-                                '0-4', '5-9', '10-14', '15-19',
-                                '20-24', '25-29', '30-34', '35-39', '40-44',
-                                '45-49', '50-54', '55-59', '60-64', '65-69',
-                                '70-74', '75-79', '80-84', '85-89', '90-94',
-                                '95-99', '100 + '
-                            ],
-                            linkedTo: 0,
-                            labels: {
-                                step: 1
-                            },
-                            accessibility: {
-                                description: 'Age (female)'
-                            }
-                        }
-                    ],
-                    yAxis: {
-                        title: {
-                            text: null
-                        },
-                        labels: {
-                            formatter: function () {
-                                return Math.abs(this.value) + '%'
-                            }
-                        },
-                        accessibility: {
-                            description: 'Percentage population',
-                            rangeDescription: 'Range: 0 to 5%'
-                        }
-                    },
-                    plotOptions: {
-                        series: {
-                            animation: false, //關閉動畫
-                            stacking: 'normal',
-                        }
-                    },
-                    tooltip: {
-                        formatter: function () {
-                            return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' + 'Population: ' + Math.abs(this.point.y).toFixed(1) + '%'
-                        }
-                    },
-                    series: [{
-                        name: 'Male',
-                        color: 'rgba(255,100,150,0.85)',
-                        data: [
-                            -2.2, -2.1, -2.2, -2.4,
-                            -2.7, -3.0, -3.3, -3.2,
-                            -2.9, -3.5, -4.4, -4.1,
-                            -3.4, -2.7, -2.3, -2.2,
-                            -1.6, -0.6, -0.3, -0.0,
-                            -0.0
-                        ]
-                    },
-                    {
-                        name: 'Female',
-                        color: 'rgba(155,50,200,0.85)',
-                        data: [
-                            2.1, 2.0, 2.1, 2.3, 2.6,
-                            2.9, 3.2, 3.1, 2.9, 3.4,
-                            4.3, 4.0, 3.5, 2.9, 2.5,
-                            2.7, 2.2, 1.1, 0.6, 0.2,
-                            0.0
-                        ]
-                    }]
-                },
-                'options4': {
-                    chart: {
-                        animation: false, //關閉動畫
-                        plotBackgroundColor: null,
-                        plotBorderWidth: null,
-                        plotShadow: false,
-                        type: 'pie'
-                    },
-                    title: {
-                        text: 'Browser market shares in January, 2018'
-                    },
-                    tooltip: {
-                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
-                    },
-                    accessibility: {
-                        point: {
-                            valueSuffix: '%'
-                        }
-                    },
-                    plotOptions: {
-                        series: {
-                            animation: false, //關閉動畫
-                        },
-                        pie: {
-                            allowPointSelect: true,
-                            cursor: 'pointer',
-                            dataLabels: {
-                                enabled: true,
-                                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
-                            }
-                        }
-                    },
-                    series: [{
-                        name: 'Brands',
-                        colorByPoint: true,
-                        data: [{
-                            name: 'Chrome',
-                            y: 61.41,
-                            sliced: true,
-                            selected: true
-                        }, {
-                            name: 'Internet Explorer',
-                            y: 11.84
-                        }, {
-                            name: 'Firefox',
-                            y: 10.85
-                        }, {
-                            name: 'Edge',
-                            y: 4.67
-                        }, {
-                            name: 'Safari',
-                            y: 4.18
-                        }, {
-                            name: 'Sogou Explorer',
-                            y: 1.64
-                        }, {
-                            name: 'Opera',
-                            y: 1.6
-                        }, {
-                            name: 'QQ',
-                            y: 1.2
-                        }, {
-                            name: 'Other',
-                            y: 2.61
-                        }]
-                    }]
-                },
-                'options5': {
-                    chart: {
-                        animation: false, //關閉動畫
-                        type: 'heatmap',
-                        marginTop: 40,
-                        marginBottom: 80,
-                        plotBorderWidth: 1
-                    },
-                    plotOptions: {
-                        series: {
-                            animation: false, //關閉動畫
-                        },
-                    },
-                    title: {
-                        text: 'Sales per employee per weekday'
-                    },
-                    xAxis: {
-                        categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
-                    },
-                    yAxis: {
-                        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
-                        title: null,
-                        reversed: true
-                    },
-                    colorAxis: {
-                        min: 0,
-                        minColor: '#fff',
-                        maxColor: 'rgba(255,120,120,1)'
-                    },
-                    legend: {
-                        align: 'right',
-                        layout: 'vertical',
-                        margin: 0,
-                        verticalAlign: 'top',
-                        y: 25,
-                        symbolHeight: 280
-                    },
-                    tooltip: {
-                        formatter: function () {
-                            return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br/><b>' + this.point.value + '</b> items on <br/><b>' + this.series.yAxis.categories[this.point.y] + '</b>'
-                        }
-                    },
-                    series: [{
-                        name: 'Sales per employee',
-                        color: 'rgba(255,120,120,0.75)',
-                        borderWidth: 1,
-                        data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
-                        dataLabels: {
-                            enabled: true,
-                            color: '#000000'
-                        }
-                    }],
-                    responsive: {
-                        rules: [{
-                            condition: {
-                                maxWidth: 500
-                            },
-                            chartOptions: {
-                                yAxis: {
-                                    labels: {
-                                        formatter: function () {
-                                            return this.value.charAt(0)
-                                        }
-                                    }
-                                }
-                            }
-                        }]
-                    }
-                },
-                'options6': {
-                    chart: {
-                        animation: false, //關閉動畫
-                        type: 'heatmap',
-                        margin: [60, 10, 80, 50]
-                    },
-                    plotOptions: {
-                        series: {
-                            animation: false, //關閉動畫
-                        },
-                    },
-                    boost: {
-                        useGPUTranslations: true
-                    },
-                    title: {
-                        text: 'Highcharts heat map',
-                        align: 'left',
-                        x: 40
-                    },
-                    subtitle: {
-                        text: 'Temperature variation by day and hour through 2017',
-                        align: 'left',
-                        x: 40
-                    },
-                    xAxis: {
-                        type: 'datetime',
-                        min: Date.UTC(2017, 0, 1),
-                        max: Date.UTC(2017, 11, 31, 23, 59, 59),
-                        labels: {
-                            align: 'left',
-                            x: 5,
-                            y: 14,
-                            format: '{value:%B}' // long month
-                        },
-                        showLastLabel: false,
-                        tickLength: 16,
-                    },
-                    yAxis: {
-                        title: {
-                            text: null
-                        },
-                        labels: {
-                            format: '{value}:00'
-                        },
-                        minPadding: 0,
-                        maxPadding: 0,
-                        startOnTick: false,
-                        endOnTick: false,
-                        tickPositions: [0, 6, 12, 18, 24],
-                        tickWidth: 1,
-                        min: 0,
-                        max: 23,
-                        reversed: true
-                    },
-                    colorAxis: {
-                        stops: [
-                            [0, '#3060cf'],
-                            [0.5, '#fffbbc'],
-                            [0.9, '#c4463a'],
-                            [1, '#c4463a']
-                        ],
-                        min: -15,
-                        max: 25,
-                        startOnTick: false,
-                        endOnTick: false,
-                        labels: {
-                            format: '{value}℃'
-                        }
-                    },
-                    series: [{
-                        data: window.dataTemperature,
-                        boostThreshold: 100,
-                        borderWidth: 0,
-                        nullColor: '#EFEFEF',
-                        colsize: 24 * 36e5, // one day
-                        tooltip: {
-                            headerFormat: 'Temperature<br/>',
-                            pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
-                        },
-                        turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
-                    }]
-                },
-                'optionsChange': null,
-                'render': async function (width, height, scale, opt) {
-                    console.log('render')
-
-                    //settings
-                    let settings = {
-                        method: 'POST',
-                        headers: {
-                            'Accept': 'application/json',
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({ width, height, scale, opt }),
-                    }
-
-                    //url
-                    let port = 9020
-                    let path = 'api'
-                    let url = window.location.protocol + '//' + window.location.hostname + ':' + port + window.location.pathname + path
-                    // console.log('url', url)
-
-                    //fetch
-                    let fetchResponse = await fetch(url, settings)
-                    let data = await fetchResponse.json()
-
-                    //check
-                    if (data.err) {
-                        console.log('error', data.err)
-                        return ''
-                    }
-                    // console.log('b64', data.b64.length)
-
-                    return data.b64
-                },
-            },
-            'actions': [
-            ],
-        }
-    },
-}
-</script>
-
-<style scoped>
-</style>