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/docs/examples/w-highcharts-bitmap-dyn_large heatmap.html DELETED Viewed

@@ -1,810 +0,0 @@
-<!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.5.95/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.13/res/data/dataAAPL.js"
-    ></script>
-    <script
-        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataUSD2EUR.js"
-    ></script>
-    <script
-        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataTemperature.js"
-    ></script>
-    <script
-        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataHousePriceArea.js"
-    ></script>
-    <script
-        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataFlare.js"
-    ></script>
-    <script
-        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataRain.js"
-    ></script>
-    <script
-        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/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.1.80/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">large heatmap</div>
-            <w-highcharts-bitmap-dyn
-                style="width:600px; height:400px;"
-                :options="WHighchartsBitmapDyn.options6"
-            ></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
-              }
-            ]
-          },
-          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: []
-      };
-    },
-    mounted: function() {
-      return {};
-    },
-    computed: {},
-    methods: {}
-  });
-    </script>
-</body>
-</html>