npm - w-component-vue - Versions diffs - 2.1.84 → 2.2.0 - Mend

w-component-vue 2.1.84 → 2.2.0

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 (827) hide show

package/docs/examples/w-highcharts-bitmap-dyn_render (need w-hc2png-server).html ADDED Viewed

@@ -0,0 +1,815 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>w-component-vue</title>
+    <!-- @babel/polyfill -->
+    <script
+        nomodule
+        src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
+    ></script>
+    <!-- vue -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
+    <!-- extractHtml已自動添加@babel/polyfill與vue -->
+    <!-- vuetify -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/vuetify@2.5.1/dist/vuetify.min.css"
+        rel="stylesheet"
+    />
+    <script
+        src="https://cdn.jsdelivr.net/npm/vuetify@2.5.1/dist/vuetify.min.js"
+    ></script>
+    <!-- fontawesome -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css"
+        rel="stylesheet"
+    />
+    <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@mdi/font@6.6.96/css/materialdesignicons.min.css"
+        rel="stylesheet"
+    />
+    <!-- google, 各組件使用mdi/js故不需引用 -->
+    <link
+        _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
+        rel="stylesheet"
+    />
+    <link
+        _href="https://fonts.googleapis.com/css?family=Material+Icons"
+        rel="stylesheet"
+    />
+    <!-- data -->
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.18/res/data/dataAAPL.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.18/res/data/dataUSD2EUR.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.18/res/data/dataTemperature.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.18/res/data/dataHousePriceArea.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.18/res/data/dataFlare.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.18/res/data/dataRain.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.18/res/data/dataRainClip.js"
+    ></script>
+    <script>
+  //save in window
+  window.dataAAPL = dataAAPL;
+  window.dataUSD2EUR = dataUSD2EUR;
+  window.dataTemperature = dataTemperature;
+  window.dataHousePriceArea = dataHousePriceArea;
+  window.dataFlare = dataFlare;
+  window.dataRain = dataRain;
+  window.dataRainClip = dataRainClip;
+    </script>
+    <!-- w-component-vue -->
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.0/dist/w-component-vue.umd.js"></script>
+    <style>
+  .v-application--wrap {
+    /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
+    width: 100vw;
+    max-width: 100vw;
+    font-family: inherit;
+    background-color: #fff;
+  }
+  .item {
+    /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
+    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;
+  }
+  .head1 {
+    margin: 0px;
+    padding: 0px 0px 20px 0px;
+    font-size: 2.5rem;
+  }
+  .bk {
+    vertical-align: top;
+    margin: 10px 0px 0px 0px;
+    padding: 0px 0px 60px 0px;
+  }
+  @media screen and (min-width: 1000px) {
+    /* 寬版 */
+    .bk {
+      display: inline-block;
+      margin: 0px 80px 0px 0px;
+    }
+    .dz {
+      width: 400px;
+    }
+  }
+    </style>
+</head>
+<body
+    style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
+>
+    <v-app id="app" style="font-family:inherit; padding:0px 30px;">
+        <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 class="bk">
+            <div class="item">render (need w-hc2png-server)</div>
+            <div
+                style="padding:5px 10px; font-size:0.8rem; color:#444; background:#fadccd;"
+            >need render server</div>
+            <w-highcharts-bitmap-dyn
+                style="width:600px; height:400px;"
+                :options="WHighchartsBitmapDyn.options1"
+                :render="WHighchartsBitmapDyn.render"
+                v-if="false"
+            ></w-highcharts-bitmap-dyn>
+        </div>
+    </v-app>
+    <script>
+  //install
+  Vue.use(window["w-component-vue"]);
+  //initialize
+  new Vue({
+    el: "#app",
+    vuetify: new Vuetify(),
+    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
+              }
+            ]
+          },
+          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: []
+      };
+    },
+    mounted: function() {
+      return {};
+    },
+    computed: {},
+    methods: {}
+  });
+    </script>
+</body>
+</html>