├── .browserslistrc ├── .circleci └── config.yml ├── .eslintrc.js ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── babel.config.js ├── docs ├── favicon.ico ├── fonts │ ├── fontawesome-webfont.674f50d2.eot │ ├── fontawesome-webfont.af7ae505.woff2 │ ├── fontawesome-webfont.b06871f2.ttf │ └── fontawesome-webfont.fee66e71.woff ├── img │ ├── fontawesome-webfont.912ec66d.svg │ ├── jsoneditor-icons.256e3abc.svg │ └── logo.194b6757.png ├── index.html └── js │ ├── app.js │ └── chunk-vendors.js ├── example ├── App.vue ├── assets │ ├── demo.gif │ └── logo.png ├── components │ ├── 2D-histogram.js │ ├── contour.js │ ├── graphpicker.vue │ ├── histogram.js │ ├── pie.js │ └── simple.js └── main.js ├── jest.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── index.html ├── src ├── components │ ├── Plotly.vue │ ├── events.js │ └── methods.js ├── index.js └── utils │ └── helper.js ├── tests ├── .eslintrc.js ├── helpers │ └── mockUrl.js ├── mocks │ └── plotly.js └── unit │ ├── helper.spec.js │ ├── index.spec.js │ ├── plotly.spec.js │ └── plotly.ssr.spec.js └── vue.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # Javascript Node CircleCI 2.0 configuration file 2 | # 3 | # Check https://circleci.com/docs/2.0/language-javascript/ for more details 4 | # 5 | version: 2 6 | jobs: 7 | build: 8 | docker: 9 | # specify the version you desire here 10 | - image: circleci/node:10-browsers 11 | 12 | # Specify service dependencies here if necessary 13 | # CircleCI maintains a library of pre-built images 14 | # documented at https://circleci.com/docs/2.0/circleci-images/ 15 | # - image: circleci/mongo:3.4.4 16 | 17 | working_directory: ~/repo 18 | 19 | steps: 20 | - checkout 21 | 22 | # Download and cache dependencies 23 | - restore_cache: 24 | keys: 25 | - v1-dependencies-{{ checksum "package.json" }} 26 | # fallback to using the latest cache if no exact match is found 27 | - v1-dependencies- 28 | 29 | - run: yarn install 30 | 31 | - save_cache: 32 | paths: 33 | - node_modules 34 | key: v1-dependencies-{{ checksum "package.json" }} 35 | 36 | # run tests! 37 | - run: yarn test:coverage 38 | 39 | 40 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: ["plugin:vue/essential", "@vue/prettier"], 7 | rules: { 8 | "no-console": process.env.NODE_ENV === "production" ? "error" : "off", 9 | "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off" 10 | }, 11 | parserOptions: { 12 | parser: "babel-eslint" 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | .history 6 | 7 | # local env files 8 | .env.local 9 | .env.*.local 10 | 11 | # Log files 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw* 24 | 25 | coverage/ 26 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "singleQuote": false, 4 | "trailingComma":"none", 5 | "printWidth": 150, 6 | "bracketSpacing": true, 7 | "jsxBracketSameLine": true, 8 | "proseWrap": "preserve", 9 | "requirePragma": false, 10 | "arrowParens": "avoid", 11 | "insertPragma": false, 12 | "tabWidth": 2, 13 | "useTabs": false 14 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 David Desmaisons 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 | 4 | # vue-plotly 5 | [![GitHub open issues](https://img.shields.io/github/issues/David-Desmaisons/vue-plotly.svg)](https://github.com/David-Desmaisons/vue-plotly/issues) 6 | [![CircleCI](https://circleci.com/gh/David-Desmaisons/vue-plotly.svg?style=shield)](https://circleci.com/gh/David-Desmaisons/vue-plotly) 7 | [![codecov](https://codecov.io/gh/David-Desmaisons/vue-plotly/branch/master/graph/badge.svg)](https://codecov.io/gh/David-Desmaisons/vue-plotly) 8 | [![Npm version](https://img.shields.io/npm/v/vue-plotly.svg)](https://www.npmjs.com/package/vue-plotly) 9 | [![MIT License](https://img.shields.io/github/license/David-Desmaisons/vue-plotly.svg)](https://github.com/David-Desmaisons/vue-plotly/blob/master/LICENSE) 10 | 11 |

Thin vue wrapper for plotly.js

15 | It provides: 16 | 21 | 22 | ![example](./example/assets/demo.gif) 23 | 24 | ## Live example 25 | https://david-desmaisons.github.io/vue-plotly/ 26 | 27 | ## Usage 28 | ```HTML 29 | 30 | ``` 31 | ```javascript 32 | import { Plotly } from 'vue-plotly' 33 | 34 | export default { 35 | components: { 36 | Plotly 37 | }, 38 | data() { 39 | return { 40 | data:[{ 41 | x: [1,2,3,4], 42 | y: [10,15,13,17], 43 | type:"scatter" 44 | }], 45 | layout:{ 46 | title: "My graph" 47 | } 48 | } 49 | } 50 | } 51 | ``` 52 | ## API 53 | 54 | #### Props 55 | 56 | - `data` ***Array*** (*optional*) 57 | 58 | [Data](https://plot.ly/javascript/reference/) to be displayed 59 | 60 | - `layout` ***Object*** (*optional*) 61 | 62 | Graphic [layout](https://plot.ly/javascript/reference/#layout) 63 | 64 | - `id` ***String*** (*optional*) 65 | 66 | Id of the root HTML element of the component. 67 | 68 | - Others: 69 | 70 | Plotly component implements the [transparent wrapper pattern](https://zendev.com/2018/05/31/transparent-wrapper-components-in-vue.html):
All other props will be passed as plotly graphic [option](https://plot.ly/javascript/configuration-options/). 71 | 72 | ## Installation 73 | ``` 74 | npm install vue-plotly 75 | ``` 76 | 77 | ## Project setup 78 | ``` 79 | npm install 80 | ``` 81 | 82 | ### Compiles and hot-reloads for development 83 | ``` 84 | npm run serve 85 | ``` 86 | 87 | ### Compiles and minifies for production 88 | ``` 89 | npm run build 90 | ``` 91 | 92 | ### Run your tests 93 | ``` 94 | npm run test 95 | ``` 96 | 97 | ### Lints and fixes files 98 | ``` 99 | npm run lint 100 | ``` 101 | 102 | ### Run your unit tests 103 | ``` 104 | npm run test:unit 105 | ``` 106 | 107 | ### Customize configuration 108 | See [Configuration Reference](https://cli.vuejs.org/config/). 109 | 110 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"] 3 | }; 4 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/vue-plotly/024f579788c469cde9d4aaa23022cf8883f3cac3/docs/favicon.ico -------------------------------------------------------------------------------- /docs/fonts/fontawesome-webfont.674f50d2.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/vue-plotly/024f579788c469cde9d4aaa23022cf8883f3cac3/docs/fonts/fontawesome-webfont.674f50d2.eot -------------------------------------------------------------------------------- /docs/fonts/fontawesome-webfont.af7ae505.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/vue-plotly/024f579788c469cde9d4aaa23022cf8883f3cac3/docs/fonts/fontawesome-webfont.af7ae505.woff2 -------------------------------------------------------------------------------- /docs/fonts/fontawesome-webfont.b06871f2.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/vue-plotly/024f579788c469cde9d4aaa23022cf8883f3cac3/docs/fonts/fontawesome-webfont.b06871f2.ttf -------------------------------------------------------------------------------- /docs/fonts/fontawesome-webfont.fee66e71.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/vue-plotly/024f579788c469cde9d4aaa23022cf8883f3cac3/docs/fonts/fontawesome-webfont.fee66e71.woff -------------------------------------------------------------------------------- /docs/img/jsoneditor-icons.256e3abc.svg: -------------------------------------------------------------------------------- 1 | 2 | 16 | JSON Editor Icons 18 | 20 | 21 | 23 | image/svg+xml 24 | 26 | JSON Editor Icons 27 | 28 | 29 | 30 | 32 | 56 | 60 | 61 | 62 | 64 | 71 | 78 | 85 | 92 | 99 | 102 | 109 | 116 | 117 | 121 | 128 | 135 | 136 | 143 | 150 | 157 | 159 | 166 | 173 | 180 | 181 | 184 | 191 | 198 | 205 | 206 | 213 | 219 | 225 | 232 | 237 | 242 | 249 | 255 | 260 | 267 | 273 | 279 | 280 | 287 | 294 | 301 | 308 | 315 | 319 | 326 | 333 | 334 | 338 | 345 | 352 | 353 | 360 | 367 | 374 | 377 | 384 | 391 | 398 | 399 | 402 | 409 | 416 | 423 | 424 | 431 | 437 | 443 | 450 | 455 | 460 | 467 | 473 | 478 | 485 | 491 | 497 | 504 | 511 | 518 | 525 | 532 | 539 | 546 | 552 | 560 | 566 | 572 | 579 | 587 | 595 | 602 | 609 | 616 | 623 | 630 | 637 | 644 | 651 | 657 | 665 | 671 | 677 | 684 | 692 | 700 | 707 | 714 | 721 | 728 | 735 | 742 | 749 | 756 | 761 | 766 | 771 | 777 | 783 | 788 | 793 | 798 | 803 | 808 | 824 | 841 | 858 | 875 | 881 | 887 | 893 | 894 | -------------------------------------------------------------------------------- /docs/img/logo.194b6757.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/vue-plotly/024f579788c469cde9d4aaa23022cf8883f3cac3/docs/img/logo.194b6757.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-plotly 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /docs/js/app.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // install a JSONP callback for chunk loading 3 | /******/ function webpackJsonpCallback(data) { 4 | /******/ var chunkIds = data[0]; 5 | /******/ var moreModules = data[1]; 6 | /******/ var executeModules = data[2]; 7 | /******/ 8 | /******/ // add "moreModules" to the modules object, 9 | /******/ // then flag all "chunkIds" as loaded and fire callback 10 | /******/ var moduleId, chunkId, i = 0, resolves = []; 11 | /******/ for(;i < chunkIds.length; i++) { 12 | /******/ chunkId = chunkIds[i]; 13 | /******/ if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) { 14 | /******/ resolves.push(installedChunks[chunkId][0]); 15 | /******/ } 16 | /******/ installedChunks[chunkId] = 0; 17 | /******/ } 18 | /******/ for(moduleId in moreModules) { 19 | /******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { 20 | /******/ modules[moduleId] = moreModules[moduleId]; 21 | /******/ } 22 | /******/ } 23 | /******/ if(parentJsonpFunction) parentJsonpFunction(data); 24 | /******/ 25 | /******/ while(resolves.length) { 26 | /******/ resolves.shift()(); 27 | /******/ } 28 | /******/ 29 | /******/ // add entry modules from loaded chunk to deferred list 30 | /******/ deferredModules.push.apply(deferredModules, executeModules || []); 31 | /******/ 32 | /******/ // run deferred modules when all chunks ready 33 | /******/ return checkDeferredModules(); 34 | /******/ }; 35 | /******/ function checkDeferredModules() { 36 | /******/ var result; 37 | /******/ for(var i = 0; i < deferredModules.length; i++) { 38 | /******/ var deferredModule = deferredModules[i]; 39 | /******/ var fulfilled = true; 40 | /******/ for(var j = 1; j < deferredModule.length; j++) { 41 | /******/ var depId = deferredModule[j]; 42 | /******/ if(installedChunks[depId] !== 0) fulfilled = false; 43 | /******/ } 44 | /******/ if(fulfilled) { 45 | /******/ deferredModules.splice(i--, 1); 46 | /******/ result = __webpack_require__(__webpack_require__.s = deferredModule[0]); 47 | /******/ } 48 | /******/ } 49 | /******/ 50 | /******/ return result; 51 | /******/ } 52 | /******/ 53 | /******/ // The module cache 54 | /******/ var installedModules = {}; 55 | /******/ 56 | /******/ // object to store loaded and loading chunks 57 | /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched 58 | /******/ // Promise = chunk loading, 0 = chunk loaded 59 | /******/ var installedChunks = { 60 | /******/ "app": 0 61 | /******/ }; 62 | /******/ 63 | /******/ var deferredModules = []; 64 | /******/ 65 | /******/ // The require function 66 | /******/ function __webpack_require__(moduleId) { 67 | /******/ 68 | /******/ // Check if module is in cache 69 | /******/ if(installedModules[moduleId]) { 70 | /******/ return installedModules[moduleId].exports; 71 | /******/ } 72 | /******/ // Create a new module (and put it into the cache) 73 | /******/ var module = installedModules[moduleId] = { 74 | /******/ i: moduleId, 75 | /******/ l: false, 76 | /******/ exports: {} 77 | /******/ }; 78 | /******/ 79 | /******/ // Execute the module function 80 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 81 | /******/ 82 | /******/ // Flag the module as loaded 83 | /******/ module.l = true; 84 | /******/ 85 | /******/ // Return the exports of the module 86 | /******/ return module.exports; 87 | /******/ } 88 | /******/ 89 | /******/ 90 | /******/ // expose the modules object (__webpack_modules__) 91 | /******/ __webpack_require__.m = modules; 92 | /******/ 93 | /******/ // expose the module cache 94 | /******/ __webpack_require__.c = installedModules; 95 | /******/ 96 | /******/ // define getter function for harmony exports 97 | /******/ __webpack_require__.d = function(exports, name, getter) { 98 | /******/ if(!__webpack_require__.o(exports, name)) { 99 | /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 100 | /******/ } 101 | /******/ }; 102 | /******/ 103 | /******/ // define __esModule on exports 104 | /******/ __webpack_require__.r = function(exports) { 105 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 106 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 107 | /******/ } 108 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 109 | /******/ }; 110 | /******/ 111 | /******/ // create a fake namespace object 112 | /******/ // mode & 1: value is a module id, require it 113 | /******/ // mode & 2: merge all properties of value into the ns 114 | /******/ // mode & 4: return value when already ns object 115 | /******/ // mode & 8|1: behave like require 116 | /******/ __webpack_require__.t = function(value, mode) { 117 | /******/ if(mode & 1) value = __webpack_require__(value); 118 | /******/ if(mode & 8) return value; 119 | /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 120 | /******/ var ns = Object.create(null); 121 | /******/ __webpack_require__.r(ns); 122 | /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 123 | /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 124 | /******/ return ns; 125 | /******/ }; 126 | /******/ 127 | /******/ // getDefaultExport function for compatibility with non-harmony modules 128 | /******/ __webpack_require__.n = function(module) { 129 | /******/ var getter = module && module.__esModule ? 130 | /******/ function getDefault() { return module['default']; } : 131 | /******/ function getModuleExports() { return module; }; 132 | /******/ __webpack_require__.d(getter, 'a', getter); 133 | /******/ return getter; 134 | /******/ }; 135 | /******/ 136 | /******/ // Object.prototype.hasOwnProperty.call 137 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 138 | /******/ 139 | /******/ // __webpack_public_path__ 140 | /******/ __webpack_require__.p = ""; 141 | /******/ 142 | /******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; 143 | /******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); 144 | /******/ jsonpArray.push = webpackJsonpCallback; 145 | /******/ jsonpArray = jsonpArray.slice(); 146 | /******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]); 147 | /******/ var parentJsonpFunction = oldJsonpFunction; 148 | /******/ 149 | /******/ 150 | /******/ // add entry module to deferred list 151 | /******/ deferredModules.push(["./example/main.js","chunk-vendors"]); 152 | /******/ // run deferred modules when ready 153 | /******/ return checkDeferredModules(); 154 | /******/ }) 155 | /************************************************************************/ 156 | /******/ ({ 157 | 158 | /***/ "./example/App.vue": 159 | /*!*************************!*\ 160 | !*** ./example/App.vue ***! 161 | \*************************/ 162 | /*! exports provided: default */ 163 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 164 | 165 | "use strict"; 166 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _App_vue_vue_type_template_id_a9794c84___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./App.vue?vue&type=template&id=a9794c84& */ \"./example/App.vue?vue&type=template&id=a9794c84&\");\n/* harmony import */ var _App_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./App.vue?vue&type=script&lang=js& */ \"./example/App.vue?vue&type=script&lang=js&\");\n/* empty/unused harmony star reexport *//* harmony import */ var _App_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./App.vue?vue&type=style&index=0&lang=less& */ \"./example/App.vue?vue&type=style&index=0&lang=less&\");\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\n\n\n\n\n\n\n/* normalize component */\n\nvar component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(\n _App_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n _App_vue_vue_type_template_id_a9794c84___WEBPACK_IMPORTED_MODULE_0__[\"render\"],\n _App_vue_vue_type_template_id_a9794c84___WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"],\n false,\n null,\n null,\n null\n \n)\n\n/* hot reload */\nif (false) { var api; }\ncomponent.options.__file = \"example/App.vue\"\n/* harmony default export */ __webpack_exports__[\"default\"] = (component.exports);\n\n//# sourceURL=webpack:///./example/App.vue?"); 167 | 168 | /***/ }), 169 | 170 | /***/ "./example/App.vue?vue&type=script&lang=js&": 171 | /*!**************************************************!*\ 172 | !*** ./example/App.vue?vue&type=script&lang=js& ***! 173 | \**************************************************/ 174 | /*! exports provided: default */ 175 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 176 | 177 | "use strict"; 178 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_cache_loader_dist_cjs_js_ref_12_0_node_modules_babel_loader_lib_index_js_node_modules_ify_loader_index_js_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/babel-loader/lib!../node_modules/ify-loader!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib??vue-loader-options!./App.vue?vue&type=script&lang=js& */ \"./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ify-loader/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./example/App.vue?vue&type=script&lang=js&\");\n/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__[\"default\"] = (_node_modules_cache_loader_dist_cjs_js_ref_12_0_node_modules_babel_loader_lib_index_js_node_modules_ify_loader_index_js_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[\"default\"]); \n\n//# sourceURL=webpack:///./example/App.vue?"); 179 | 180 | /***/ }), 181 | 182 | /***/ "./example/App.vue?vue&type=style&index=0&lang=less&": 183 | /*!***********************************************************!*\ 184 | !*** ./example/App.vue?vue&type=style&index=0&lang=less& ***! 185 | \***********************************************************/ 186 | /*! no static exports found */ 187 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 188 | 189 | "use strict"; 190 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_10_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../node_modules/vue-style-loader??ref--10-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src??ref--10-oneOf-1-2!../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib??vue-loader-options!./App.vue?vue&type=style&index=0&lang=less& */ \"./node_modules/vue-style-loader/index.js?!./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/less-loader/dist/cjs.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./example/App.vue?vue&type=style&index=0&lang=less&\");\n/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_10_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_10_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0__);\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_vue_style_loader_index_js_ref_10_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_vue_style_loader_index_js_ref_10_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n /* harmony default export */ __webpack_exports__[\"default\"] = (_node_modules_vue_style_loader_index_js_ref_10_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0___default.a); \n\n//# sourceURL=webpack:///./example/App.vue?"); 191 | 192 | /***/ }), 193 | 194 | /***/ "./example/App.vue?vue&type=template&id=a9794c84&": 195 | /*!********************************************************!*\ 196 | !*** ./example/App.vue?vue&type=template&id=a9794c84& ***! 197 | \********************************************************/ 198 | /*! exports provided: render, staticRenderFns */ 199 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 200 | 201 | "use strict"; 202 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_cache_loader_dist_cjs_js_cacheDirectory_node_modules_cache_vue_loader_cacheIdentifier_21b498e3_vue_loader_template_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_template_id_a9794c84___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../node_modules/cache-loader/dist/cjs.js?{\"cacheDirectory\":\"node_modules/.cache/vue-loader\",\"cacheIdentifier\":\"21b498e3-vue-loader-template\"}!../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib??vue-loader-options!./App.vue?vue&type=template&id=a9794c84& */ \"./node_modules/cache-loader/dist/cjs.js?{\\\"cacheDirectory\\\":\\\"node_modules/.cache/vue-loader\\\",\\\"cacheIdentifier\\\":\\\"21b498e3-vue-loader-template\\\"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./example/App.vue?vue&type=template&id=a9794c84&\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return _node_modules_cache_loader_dist_cjs_js_cacheDirectory_node_modules_cache_vue_loader_cacheIdentifier_21b498e3_vue_loader_template_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_template_id_a9794c84___WEBPACK_IMPORTED_MODULE_0__[\"render\"]; });\n\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return _node_modules_cache_loader_dist_cjs_js_cacheDirectory_node_modules_cache_vue_loader_cacheIdentifier_21b498e3_vue_loader_template_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_template_id_a9794c84___WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"]; });\n\n\n\n//# sourceURL=webpack:///./example/App.vue?"); 203 | 204 | /***/ }), 205 | 206 | /***/ "./example/assets/logo.png": 207 | /*!*********************************!*\ 208 | !*** ./example/assets/logo.png ***! 209 | \*********************************/ 210 | /*! no static exports found */ 211 | /***/ (function(module, exports, __webpack_require__) { 212 | 213 | eval("module.exports = __webpack_require__.p + \"img/logo.194b6757.png\";\n\n//# sourceURL=webpack:///./example/assets/logo.png?"); 214 | 215 | /***/ }), 216 | 217 | /***/ "./example/components/2D-histogram.js": 218 | /*!********************************************!*\ 219 | !*** ./example/components/2D-histogram.js ***! 220 | \********************************************/ 221 | /*! exports provided: default */ 222 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 223 | 224 | "use strict"; 225 | eval("__webpack_require__.r(__webpack_exports__);\n// from http://bl.ocks.org/mbostock/4349187\n// Sample from a normal distribution with mean 0, stddev 1.\nfunction normal() {\n var x = 0,\n y = 0,\n rds,\n c;\n\n do {\n x = Math.random() * 2 - 1;\n y = Math.random() * 2 - 1;\n rds = x * x + y * y;\n } while (rds == 0 || rds > 1);\n\n c = Math.sqrt(-2 * Math.log(rds) / rds); // Box-Muller transform\n\n return x * c; // throw away extra sample y * c\n}\n\nvar N = 2000,\n a = -1,\n b = 1.2;\nvar step = (b - a) / (N - 1);\nvar t = new Array(N),\n x = new Array(N),\n y = new Array(N);\n\nfor (var i = 0; i < N; i++) {\n t[i] = a + step * i;\n x[i] = Math.pow(t[i], 3) + 0.3 * normal();\n y[i] = Math.pow(t[i], 6) + 0.3 * normal();\n}\n\nvar trace1 = {\n x: x,\n y: y,\n mode: \"markers\",\n name: \"points\",\n marker: {\n color: \"rgb(102,0,0)\",\n size: 2,\n opacity: 0.4\n },\n type: \"scatter\"\n};\nvar trace2 = {\n x: x,\n y: y,\n name: \"density\",\n ncontours: 20,\n colorscale: \"Hot\",\n reversescale: true,\n showscale: false,\n type: \"histogram2dcontour\"\n};\nvar trace3 = {\n x: x,\n name: \"x density\",\n marker: {\n color: \"rgb(102,0,0)\"\n },\n yaxis: \"y2\",\n type: \"histogram\"\n};\nvar trace4 = {\n y: y,\n name: \"y density\",\n marker: {\n color: \"rgb(102,0,0)\"\n },\n xaxis: \"x2\",\n type: \"histogram\"\n};\nvar layout = {\n showlegend: false,\n margin: {\n t: 50\n },\n hovermode: \"closest\",\n bargap: 0,\n xaxis: {\n domain: [0, 0.85],\n showgrid: false,\n zeroline: false\n },\n yaxis: {\n domain: [0, 0.85],\n showgrid: false,\n zeroline: false\n },\n xaxis2: {\n domain: [0.85, 1],\n showgrid: false,\n zeroline: false\n },\n yaxis2: {\n domain: [0.85, 1],\n showgrid: false,\n zeroline: false\n }\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n display: \"2D Histogram\",\n data: {\n data: [trace1, trace2, trace3, trace4],\n attr: {},\n layout: layout\n }\n});\n\n//# sourceURL=webpack:///./example/components/2D-histogram.js?"); 226 | 227 | /***/ }), 228 | 229 | /***/ "./example/components/contour.js": 230 | /*!***************************************!*\ 231 | !*** ./example/components/contour.js ***! 232 | \***************************************/ 233 | /*! exports provided: default */ 234 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 235 | 236 | "use strict"; 237 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n display: \"Contour graph\",\n data: {\n data: [{\n z: [[10, 10.625, 12.5, 15.625, 20], [5.625, 6.25, 8.125, 11.25, 15.625], [2.5, 3.125, 5, 8.125, 12.5], [0.625, 1.25, 3.125, 6.25, 10.625], [0, 0.625, 2.5, 5.625, 10]],\n x: [-9, -6, -5, -3, -1],\n y: [0, 1, 4, 5, 7],\n type: \"contour\"\n }],\n attr: {\n displayModeBar: false\n },\n layout: {\n title: \"Setting the X and Y Coordinates in a Contour Plot\"\n }\n }\n});\n\n//# sourceURL=webpack:///./example/components/contour.js?"); 238 | 239 | /***/ }), 240 | 241 | /***/ "./example/components/graphpicker.vue": 242 | /*!********************************************!*\ 243 | !*** ./example/components/graphpicker.vue ***! 244 | \********************************************/ 245 | /*! exports provided: default */ 246 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 247 | 248 | "use strict"; 249 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _graphpicker_vue_vue_type_template_id_580d8d36___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./graphpicker.vue?vue&type=template&id=580d8d36& */ \"./example/components/graphpicker.vue?vue&type=template&id=580d8d36&\");\n/* harmony import */ var _graphpicker_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./graphpicker.vue?vue&type=script&lang=js& */ \"./example/components/graphpicker.vue?vue&type=script&lang=js&\");\n/* empty/unused harmony star reexport *//* harmony import */ var _graphpicker_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./graphpicker.vue?vue&type=style&index=0&lang=css& */ \"./example/components/graphpicker.vue?vue&type=style&index=0&lang=css&\");\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\n\n\n\n\n\n\n/* normalize component */\n\nvar component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(\n _graphpicker_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n _graphpicker_vue_vue_type_template_id_580d8d36___WEBPACK_IMPORTED_MODULE_0__[\"render\"],\n _graphpicker_vue_vue_type_template_id_580d8d36___WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"],\n false,\n null,\n null,\n null\n \n)\n\n/* hot reload */\nif (false) { var api; }\ncomponent.options.__file = \"example/components/graphpicker.vue\"\n/* harmony default export */ __webpack_exports__[\"default\"] = (component.exports);\n\n//# sourceURL=webpack:///./example/components/graphpicker.vue?"); 250 | 251 | /***/ }), 252 | 253 | /***/ "./example/components/graphpicker.vue?vue&type=script&lang=js&": 254 | /*!*********************************************************************!*\ 255 | !*** ./example/components/graphpicker.vue?vue&type=script&lang=js& ***! 256 | \*********************************************************************/ 257 | /*! exports provided: default */ 258 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 259 | 260 | "use strict"; 261 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_cache_loader_dist_cjs_js_ref_12_0_node_modules_babel_loader_lib_index_js_node_modules_ify_loader_index_js_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_graphpicker_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/babel-loader/lib!../../node_modules/ify-loader!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib??vue-loader-options!./graphpicker.vue?vue&type=script&lang=js& */ \"./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ify-loader/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./example/components/graphpicker.vue?vue&type=script&lang=js&\");\n/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__[\"default\"] = (_node_modules_cache_loader_dist_cjs_js_ref_12_0_node_modules_babel_loader_lib_index_js_node_modules_ify_loader_index_js_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_graphpicker_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[\"default\"]); \n\n//# sourceURL=webpack:///./example/components/graphpicker.vue?"); 262 | 263 | /***/ }), 264 | 265 | /***/ "./example/components/graphpicker.vue?vue&type=style&index=0&lang=css&": 266 | /*!*****************************************************************************!*\ 267 | !*** ./example/components/graphpicker.vue?vue&type=style&index=0&lang=css& ***! 268 | \*****************************************************************************/ 269 | /*! no static exports found */ 270 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 271 | 272 | "use strict"; 273 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_graphpicker_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../node_modules/vue-style-loader??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib??vue-loader-options!./graphpicker.vue?vue&type=style&index=0&lang=css& */ \"./node_modules/vue-style-loader/index.js?!./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./example/components/graphpicker.vue?vue&type=style&index=0&lang=css&\");\n/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_graphpicker_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_graphpicker_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__);\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_graphpicker_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_graphpicker_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n /* harmony default export */ __webpack_exports__[\"default\"] = (_node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_graphpicker_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default.a); \n\n//# sourceURL=webpack:///./example/components/graphpicker.vue?"); 274 | 275 | /***/ }), 276 | 277 | /***/ "./example/components/graphpicker.vue?vue&type=template&id=580d8d36&": 278 | /*!***************************************************************************!*\ 279 | !*** ./example/components/graphpicker.vue?vue&type=template&id=580d8d36& ***! 280 | \***************************************************************************/ 281 | /*! exports provided: render, staticRenderFns */ 282 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 283 | 284 | "use strict"; 285 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_cache_loader_dist_cjs_js_cacheDirectory_node_modules_cache_vue_loader_cacheIdentifier_21b498e3_vue_loader_template_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_graphpicker_vue_vue_type_template_id_580d8d36___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../node_modules/cache-loader/dist/cjs.js?{\"cacheDirectory\":\"node_modules/.cache/vue-loader\",\"cacheIdentifier\":\"21b498e3-vue-loader-template\"}!../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib??vue-loader-options!./graphpicker.vue?vue&type=template&id=580d8d36& */ \"./node_modules/cache-loader/dist/cjs.js?{\\\"cacheDirectory\\\":\\\"node_modules/.cache/vue-loader\\\",\\\"cacheIdentifier\\\":\\\"21b498e3-vue-loader-template\\\"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./example/components/graphpicker.vue?vue&type=template&id=580d8d36&\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return _node_modules_cache_loader_dist_cjs_js_cacheDirectory_node_modules_cache_vue_loader_cacheIdentifier_21b498e3_vue_loader_template_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_graphpicker_vue_vue_type_template_id_580d8d36___WEBPACK_IMPORTED_MODULE_0__[\"render\"]; });\n\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return _node_modules_cache_loader_dist_cjs_js_cacheDirectory_node_modules_cache_vue_loader_cacheIdentifier_21b498e3_vue_loader_template_node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_graphpicker_vue_vue_type_template_id_580d8d36___WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"]; });\n\n\n\n//# sourceURL=webpack:///./example/components/graphpicker.vue?"); 286 | 287 | /***/ }), 288 | 289 | /***/ "./example/components/histogram.js": 290 | /*!*****************************************!*\ 291 | !*** ./example/components/histogram.js ***! 292 | \*****************************************/ 293 | /*! exports provided: default */ 294 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 295 | 296 | "use strict"; 297 | eval("__webpack_require__.r(__webpack_exports__);\nvar x = [];\n\nfor (var i = 0; i < 500; i++) {\n x[i] = Math.random();\n}\n\nvar trace = {\n x: x,\n type: \"histogram\"\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n display: \"Histogram\",\n data: {\n data: [trace],\n attr: {},\n layout: {}\n }\n});\n\n//# sourceURL=webpack:///./example/components/histogram.js?"); 298 | 299 | /***/ }), 300 | 301 | /***/ "./example/components/pie.js": 302 | /*!***********************************!*\ 303 | !*** ./example/components/pie.js ***! 304 | \***********************************/ 305 | /*! exports provided: default */ 306 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 307 | 308 | "use strict"; 309 | eval("__webpack_require__.r(__webpack_exports__);\nvar pie = {\n values: [40, 10, 30],\n rotation: 90,\n textinfo: \"none\",\n marker: {\n colors: [\"orange\", \"yellow\", \"BLUE\"]\n },\n labels: [\"remaing\", \"done\", \"doing\"],\n hoverinfo: \"label+value+percent\",\n hole: 0.5,\n type: \"pie\",\n showlegend: false\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n display: \"Pie graph\",\n data: {\n data: [pie],\n attr: {\n displayModeBar: false\n },\n layout: {\n font: {\n color: \"white\"\n },\n title: {\n text: \"pie\"\n },\n plot_bgcolor: \"black\",\n paper_bgcolor: \"black\"\n }\n }\n});\n\n//# sourceURL=webpack:///./example/components/pie.js?"); 310 | 311 | /***/ }), 312 | 313 | /***/ "./example/components/simple.js": 314 | /*!**************************************!*\ 315 | !*** ./example/components/simple.js ***! 316 | \**************************************/ 317 | /*! exports provided: default */ 318 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 319 | 320 | "use strict"; 321 | eval("__webpack_require__.r(__webpack_exports__);\nvar trace1 = {\n x: [1, 2, 3, 4],\n y: [10, 15, 13, 17],\n type: 'scatter'\n};\nvar trace2 = {\n x: [1, 2, 3, 4],\n y: [16, 5, 11, 9],\n type: 'scatter'\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n display: 'Scatter',\n data: {\n data: [trace1, trace2],\n attr: {\n displayModeBar: true\n },\n layout: {\n plot_bgcolor: '#d3d3d3',\n paper_bgcolor: '#d3d3d3'\n }\n }\n});\n\n//# sourceURL=webpack:///./example/components/simple.js?"); 322 | 323 | /***/ }), 324 | 325 | /***/ "./example/main.js": 326 | /*!*************************!*\ 327 | !*** ./example/main.js ***! 328 | \*************************/ 329 | /*! no exports provided */ 330 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 331 | 332 | "use strict"; 333 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.runtime.esm.js\");\n/* harmony import */ var _App_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./App.vue */ \"./example/App.vue\");\n/* harmony import */ var vue_highlight_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! vue-highlight.js */ \"./node_modules/vue-highlight.js/dist/vue-highlight.es.js\");\n/* harmony import */ var highlight_js_lib_languages_javascript__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! highlight.js/lib/languages/javascript */ \"./node_modules/highlight.js/lib/languages/javascript.js\");\n/* harmony import */ var highlight_js_lib_languages_javascript__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(highlight_js_lib_languages_javascript__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var vue_highlight_js_lib_languages_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! vue-highlight.js/lib/languages/vue */ \"./node_modules/vue-highlight.js/lib/languages/vue.js\");\n/* harmony import */ var vue_highlight_js_lib_languages_vue__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(vue_highlight_js_lib_languages_vue__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var highlight_js_lib_languages_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! highlight.js/lib/languages/css */ \"./node_modules/highlight.js/lib/languages/css.js\");\n/* harmony import */ var highlight_js_lib_languages_css__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(highlight_js_lib_languages_css__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var vue_draggable_resizable__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! vue-draggable-resizable */ \"./node_modules/vue-draggable-resizable/dist/VueDraggableResizable.umd.min.js\");\n/* harmony import */ var vue_draggable_resizable__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(vue_draggable_resizable__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var _index_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/index.js */ \"./src/index.js\");\n/* harmony import */ var vue_draggable_resizable_dist_VueDraggableResizable_css__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! vue-draggable-resizable/dist/VueDraggableResizable.css */ \"./node_modules/vue-draggable-resizable/dist/VueDraggableResizable.css\");\n/* harmony import */ var vue_draggable_resizable_dist_VueDraggableResizable_css__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(vue_draggable_resizable_dist_VueDraggableResizable_css__WEBPACK_IMPORTED_MODULE_8__);\n/* harmony import */ var bootstrap_dist_css_bootstrap_min_css__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! bootstrap/dist/css/bootstrap.min.css */ \"./node_modules/bootstrap/dist/css/bootstrap.min.css\");\n/* harmony import */ var bootstrap_dist_css_bootstrap_min_css__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(bootstrap_dist_css_bootstrap_min_css__WEBPACK_IMPORTED_MODULE_9__);\n/* harmony import */ var font_awesome_css_font_awesome_css__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! font-awesome/css/font-awesome.css */ \"./node_modules/font-awesome/css/font-awesome.css\");\n/* harmony import */ var font_awesome_css_font_awesome_css__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(font_awesome_css_font_awesome_css__WEBPACK_IMPORTED_MODULE_10__);\n/* harmony import */ var highlight_js_styles_default_css__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! highlight.js/styles/default.css */ \"./node_modules/highlight.js/styles/default.css\");\n/* harmony import */ var highlight_js_styles_default_css__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(highlight_js_styles_default_css__WEBPACK_IMPORTED_MODULE_11__);\n/* harmony import */ var highlight_js_styles_mono_blue_css__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! highlight.js/styles/mono-blue.css */ \"./node_modules/highlight.js/styles/mono-blue.css\");\n/* harmony import */ var highlight_js_styles_mono_blue_css__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(highlight_js_styles_mono_blue_css__WEBPACK_IMPORTED_MODULE_12__);\n\n\n\n\n\n\n\n\n\n\n\n\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].component(\"vue-draggable-resizable\", vue_draggable_resizable__WEBPACK_IMPORTED_MODULE_6___default.a);\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].component(\"plotly\", _index_js__WEBPACK_IMPORTED_MODULE_7__[\"Plotly\"]);\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].use(vue_highlight_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n languages: {\n css: highlight_js_lib_languages_css__WEBPACK_IMPORTED_MODULE_5___default.a,\n javascript: highlight_js_lib_languages_javascript__WEBPACK_IMPORTED_MODULE_3___default.a,\n vue: vue_highlight_js_lib_languages_vue__WEBPACK_IMPORTED_MODULE_4___default.a\n }\n});\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].config.productionTip = false;\nnew vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n render: function render(h) {\n return h(_App_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n }\n}).$mount(\"#app\");\n\n//# sourceURL=webpack:///./example/main.js?"); 334 | 335 | /***/ }), 336 | 337 | /***/ "./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ify-loader/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./example/App.vue?vue&type=script&lang=js&": 338 | /*!*******************************************************************************************************************************************************************************************************************************************************************!*\ 339 | !*** ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/ify-loader!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./example/App.vue?vue&type=script&lang=js& ***! 340 | \*******************************************************************************************************************************************************************************************************************************************************************/ 341 | /*! exports provided: default */ 342 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 343 | 344 | "use strict"; 345 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_array_concat__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.concat */ \"./node_modules/core-js/modules/es.array.concat.js\");\n/* harmony import */ var core_js_modules_es_array_concat__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_concat__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var core_js_modules_es_array_join__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/es.array.join */ \"./node_modules/core-js/modules/es.array.join.js\");\n/* harmony import */ var core_js_modules_es_array_join__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_join__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var core_js_modules_es_array_map__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/es.array.map */ \"./node_modules/core-js/modules/es.array.map.js\");\n/* harmony import */ var core_js_modules_es_array_map__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_map__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var core_js_modules_es_object_keys__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.object.keys */ \"./node_modules/core-js/modules/es.object.keys.js\");\n/* harmony import */ var core_js_modules_es_object_keys__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_keys__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _components_graphpicker_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/graphpicker.vue */ \"./example/components/graphpicker.vue\");\n\n\n\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: \"app\",\n components: {\n graphpicker: _components_graphpicker_vue__WEBPACK_IMPORTED_MODULE_4__[\"default\"]\n },\n data: function data() {\n return {\n features: [{\n text: \"plotly.js methods and events\",\n icon: \"fa-bar-chart\"\n }, {\n text: \"Data reactivity\",\n icon: \"fa-bolt\"\n }, {\n text: \"Redraw on resizing\",\n icon: \"fa-arrows-alt\"\n }]\n };\n },\n computed: {\n code: function code() {\n var _this = this;\n\n var fromAttr = Object.keys(this.data.attr).map(function (key) {\n return \":\".concat(key, \"=\\\"\").concat(_this.data.attr[key], \"\\\"\");\n }).join(\" \");\n return \"\");\n }\n }\n});\n\n//# sourceURL=webpack:///./example/App.vue?./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/ify-loader!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options"); 346 | 347 | /***/ }), 348 | 349 | /***/ "./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ify-loader/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./example/components/graphpicker.vue?vue&type=script&lang=js&": 350 | /*!**************************************************************************************************************************************************************************************************************************************************************************************!*\ 351 | !*** ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/ify-loader!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./example/components/graphpicker.vue?vue&type=script&lang=js& ***! 352 | \**************************************************************************************************************************************************************************************************************************************************************************************/ 353 | /*! exports provided: default */ 354 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 355 | 356 | "use strict"; 357 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_array_concat__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.concat */ \"./node_modules/core-js/modules/es.array.concat.js\");\n/* harmony import */ var core_js_modules_es_array_concat__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_concat__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var core_js_modules_es_array_join__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/es.array.join */ \"./node_modules/core-js/modules/es.array.join.js\");\n/* harmony import */ var core_js_modules_es_array_join__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_join__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var core_js_modules_es_array_map__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/es.array.map */ \"./node_modules/core-js/modules/es.array.map.js\");\n/* harmony import */ var core_js_modules_es_array_map__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_map__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var core_js_modules_es_object_keys__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.object.keys */ \"./node_modules/core-js/modules/es.object.keys.js\");\n/* harmony import */ var core_js_modules_es_object_keys__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_keys__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var vue_json_editor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! vue-json-editor */ \"./node_modules/vue-json-editor/vue-json-editor.vue\");\n/* harmony import */ var _simple_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./simple.js */ \"./example/components/simple.js\");\n/* harmony import */ var _contour_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./contour.js */ \"./example/components/contour.js\");\n/* harmony import */ var _histogram_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./histogram.js */ \"./example/components/histogram.js\");\n/* harmony import */ var _2D_histogram_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./2D-histogram.js */ \"./example/components/2D-histogram.js\");\n/* harmony import */ var _pie_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./pie.js */ \"./example/components/pie.js\");\n\n\n\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: \"picker\",\n components: {\n editor: vue_json_editor__WEBPACK_IMPORTED_MODULE_4__[\"default\"]\n },\n data: function data() {\n return {\n generics: [_simple_js__WEBPACK_IMPORTED_MODULE_5__[\"default\"], _contour_js__WEBPACK_IMPORTED_MODULE_6__[\"default\"], _histogram_js__WEBPACK_IMPORTED_MODULE_7__[\"default\"], _pie_js__WEBPACK_IMPORTED_MODULE_9__[\"default\"], _2D_histogram_js__WEBPACK_IMPORTED_MODULE_8__[\"default\"]],\n selected: _simple_js__WEBPACK_IMPORTED_MODULE_5__[\"default\"]\n };\n },\n computed: {\n code: function code() {\n var attr = this.selected.data.attr;\n var fromAttr = Object.keys(attr).map(function (key) {\n return \":\".concat(key, \"=\\\"\").concat(attr[key], \"\\\"\");\n }).join(\" \");\n return \"\");\n }\n }\n});\n\n//# sourceURL=webpack:///./example/components/graphpicker.vue?./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/ify-loader!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options"); 358 | 359 | /***/ }), 360 | 361 | /***/ "./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ify-loader/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Plotly.vue?vue&type=script&lang=js&": 362 | /*!*****************************************************************************************************************************************************************************************************************************************************************************!*\ 363 | !*** ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/ify-loader!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Plotly.vue?vue&type=script&lang=js& ***! 364 | \*****************************************************************************************************************************************************************************************************************************************************************************/ 365 | /*! exports provided: default */ 366 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 367 | 368 | "use strict"; 369 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_symbol__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.symbol */ \"./node_modules/core-js/modules/es.symbol.js\");\n/* harmony import */ var core_js_modules_es_symbol__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var core_js_modules_es_array_filter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/es.array.filter */ \"./node_modules/core-js/modules/es.array.filter.js\");\n/* harmony import */ var core_js_modules_es_array_filter__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_filter__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var core_js_modules_es_array_for_each__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/es.array.for-each */ \"./node_modules/core-js/modules/es.array.for-each.js\");\n/* harmony import */ var core_js_modules_es_array_for_each__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_for_each__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var core_js_modules_es_array_reduce__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.array.reduce */ \"./node_modules/core-js/modules/es.array.reduce.js\");\n/* harmony import */ var core_js_modules_es_array_reduce__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_reduce__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptor */ \"./node_modules/core-js/modules/es.object.get-own-property-descriptor.js\");\n/* harmony import */ var core_js_modules_es_object_get_own_property_descriptor__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptor__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core-js/modules/es.object.get-own-property-descriptors */ \"./node_modules/core-js/modules/es.object.get-own-property-descriptors.js\");\n/* harmony import */ var core_js_modules_es_object_get_own_property_descriptors__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_get_own_property_descriptors__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var core_js_modules_es_object_keys__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core-js/modules/es.object.keys */ \"./node_modules/core-js/modules/es.object.keys.js\");\n/* harmony import */ var core_js_modules_es_object_keys__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_keys__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var core_js_modules_web_dom_collections_for_each__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! core-js/modules/web.dom-collections.for-each */ \"./node_modules/core-js/modules/web.dom-collections.for-each.js\");\n/* harmony import */ var core_js_modules_web_dom_collections_for_each__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each__WEBPACK_IMPORTED_MODULE_7__);\n/* harmony import */ var F_source_vue_plotly_js_node_modules_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./node_modules/@babel/runtime/helpers/esm/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var plotly_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! plotly.js */ \"./node_modules/plotly.js/lib/index.js\");\n/* harmony import */ var plotly_js__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(plotly_js__WEBPACK_IMPORTED_MODULE_9__);\n/* harmony import */ var _events_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./events.js */ \"./src/components/events.js\");\n/* harmony import */ var _methods_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./methods.js */ \"./src/components/methods.js\");\n/* harmony import */ var _utils_helper__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @/utils/helper */ \"./src/utils/helper.js\");\n\n\n\n\n\n\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { Object(F_source_vue_plotly_js_node_modules_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_8__[\"default\"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\n//\n//\n//\n\n\n\n\nvar directives = {};\n\nif (typeof window !== \"undefined\") {\n directives.resize = __webpack_require__(/*! vue-resize-directive */ \"./node_modules/vue-resize-directive/dist/Vueresize.js\");\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: \"plotly\",\n inheritAttrs: false,\n directives: directives,\n props: {\n data: {\n type: Array\n },\n layout: {\n type: Object\n },\n id: {\n type: String,\n required: false,\n default: null\n }\n },\n data: function data() {\n return {\n scheduled: null,\n innerLayout: _objectSpread({}, this.layout)\n };\n },\n mounted: function mounted() {\n var _this = this;\n\n plotly_js__WEBPACK_IMPORTED_MODULE_9___default.a.newPlot(this.$el, this.data, this.innerLayout, this.options);\n _events_js__WEBPACK_IMPORTED_MODULE_10__[\"default\"].forEach(function (evt) {\n _this.$el.on(evt.completeName, evt.handler(_this));\n });\n },\n watch: {\n data: {\n handler: function handler() {\n this.schedule({\n replot: true\n });\n },\n deep: true\n },\n options: {\n handler: function handler(value, old) {\n if (JSON.stringify(value) === JSON.stringify(old)) {\n return;\n }\n\n this.schedule({\n replot: true\n });\n },\n deep: true\n },\n layout: function layout(_layout) {\n this.innerLayout = _objectSpread({}, _layout);\n this.schedule({\n replot: false\n });\n }\n },\n computed: {\n options: function options() {\n var _this2 = this;\n\n var optionsFromAttrs = Object.keys(this.$attrs).reduce(function (acc, key) {\n acc[Object(_utils_helper__WEBPACK_IMPORTED_MODULE_12__[\"camelize\"])(key)] = _this2.$attrs[key];\n return acc;\n }, {});\n return _objectSpread({\n responsive: false\n }, optionsFromAttrs);\n }\n },\n beforeDestroy: function beforeDestroy() {\n var _this3 = this;\n\n _events_js__WEBPACK_IMPORTED_MODULE_10__[\"default\"].forEach(function (event) {\n return _this3.$el.removeAllListeners(event.completeName);\n });\n plotly_js__WEBPACK_IMPORTED_MODULE_9___default.a.purge(this.$el);\n },\n methods: _objectSpread({}, _methods_js__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n onResize: function onResize() {\n plotly_js__WEBPACK_IMPORTED_MODULE_9___default.a.Plots.resize(this.$el);\n },\n schedule: function schedule(context) {\n var _this4 = this;\n\n var scheduled = this.scheduled;\n\n if (scheduled) {\n scheduled.replot = scheduled.replot || context.replot;\n return;\n }\n\n this.scheduled = context;\n this.$nextTick(function () {\n var replot = _this4.scheduled.replot;\n _this4.scheduled = null;\n\n if (replot) {\n _this4.react();\n\n return;\n }\n\n _this4.relayout(_this4.innerLayout);\n });\n },\n toImage: function toImage(options) {\n var allOptions = Object.assign(this.getPrintOptions(), options);\n return plotly_js__WEBPACK_IMPORTED_MODULE_9___default.a.toImage(this.$el, allOptions);\n },\n downloadImage: function downloadImage(options) {\n var filename = \"plot--\".concat(new Date().toISOString());\n var allOptions = Object.assign(this.getPrintOptions(), {\n filename: filename\n }, options);\n return plotly_js__WEBPACK_IMPORTED_MODULE_9___default.a.downloadImage(this.$el, allOptions);\n },\n getPrintOptions: function getPrintOptions() {\n var $el = this.$el;\n return {\n format: \"png\",\n width: $el.clientWidth,\n height: $el.clientHeight\n };\n },\n react: function react() {\n plotly_js__WEBPACK_IMPORTED_MODULE_9___default.a.react(this.$el, this.data, this.innerLayout, this.options);\n }\n })\n});\n\n//# sourceURL=webpack:///./src/components/Plotly.vue?./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/ify-loader!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options"); 370 | 371 | /***/ }), 372 | 373 | /***/ "./node_modules/cache-loader/dist/cjs.js?{\"cacheDirectory\":\"node_modules/.cache/vue-loader\",\"cacheIdentifier\":\"21b498e3-vue-loader-template\"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./example/App.vue?vue&type=template&id=a9794c84&": 374 | /*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ 375 | !*** ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"21b498e3-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./example/App.vue?vue&type=template&id=a9794c84& ***! 376 | \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ 377 | /*! exports provided: render, staticRenderFns */ 378 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 379 | 380 | "use strict"; 381 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { attrs: { id: \"app\" } }, [\n _vm._m(0),\n _c(\"div\", { staticClass: \"container \" }, [\n _c(\"div\", { staticClass: \"card\" }, [\n _c(\"div\", { staticClass: \"card-header\" }, [\n _vm._m(1),\n _c(\n \"div\",\n { staticClass: \"row justify-content-md-center\" },\n _vm._l(_vm.features, function(data, idx) {\n return _c(\"div\", { key: idx, staticClass: \"col-3 features\" }, [\n _c(\"div\", [\n _c(\"h4\", { staticClass: \"big-icone\" }, [\n _c(\"i\", { class: \"fa \" + data.icon })\n ]),\n _c(\"p\", { staticClass: \"card-text\" }, [\n _vm._v(_vm._s(data.text))\n ])\n ])\n ])\n }),\n 0\n )\n ])\n ]),\n _c(\"div\", { staticClass: \"card main-card\" }, [_c(\"graphpicker\")], 1)\n ]),\n _vm._m(2)\n ])\n}\nvar staticRenderFns = [\n function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"a\",\n {\n attrs: {\n href: \"https://github.com/David-Desmaisons/vue-plotly\",\n target: \"_blank\"\n }\n },\n [\n _c(\"img\", {\n staticClass: \"attachment-full size-full\",\n staticStyle: {\n position: \"fixed\",\n top: \"0\",\n right: \"0\",\n border: \"0\",\n \"z-index\": \"99999\"\n },\n attrs: {\n width: \"149\",\n height: \"149\",\n src:\n \"https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149\",\n alt: \"Fork me on GitHub\",\n \"data-recalc-dims\": \"1\"\n }\n })\n ]\n )\n },\n function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"logo\" }, [\n _c(\"img\", {\n attrs: { alt: \"Vue.draggable logo\", src: __webpack_require__(/*! ./assets/logo.png */ \"./example/assets/logo.png\") }\n }),\n _c(\"p\", [\n _c(\n \"a\",\n {\n staticClass: \"title-link\",\n attrs: {\n href: \"https://github.com/David-Desmaisons/vue-plotly\",\n target: \"_blank\"\n }\n },\n [_c(\"span\", { staticClass: \"title\" }, [_vm._v(\"Vue.plotly\")])]\n ),\n _vm._v(\"a thin vue wrapper for \"),\n _c(\n \"a\",\n { attrs: { href: \"https://plot.ly/javascript/\", target: \"_blank\" } },\n [_vm._v(\"plotly.js\")]\n )\n ])\n ])\n },\n function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"footer\", { staticClass: \"footer fixed-bottom bg-dark\" }, [\n _c(\"div\", { staticClass: \"container\" }, [\n _c(\"img\", {\n attrs: {\n src:\n \"https://plot.ly/gh-pages/documentation/static/images/browser_support.png\"\n }\n })\n ])\n ])\n }\n]\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./example/App.vue?./node_modules/cache-loader/dist/cjs.js?%7B%22cacheDirectory%22:%22node_modules/.cache/vue-loader%22,%22cacheIdentifier%22:%2221b498e3-vue-loader-template%22%7D!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options"); 382 | 383 | /***/ }), 384 | 385 | /***/ "./node_modules/cache-loader/dist/cjs.js?{\"cacheDirectory\":\"node_modules/.cache/vue-loader\",\"cacheIdentifier\":\"21b498e3-vue-loader-template\"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./example/components/graphpicker.vue?vue&type=template&id=580d8d36&": 386 | /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ 387 | !*** ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"21b498e3-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./example/components/graphpicker.vue?vue&type=template&id=580d8d36& ***! 388 | \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ 389 | /*! exports provided: render, staticRenderFns */ 390 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 391 | 392 | "use strict"; 393 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", [\n _c(\"div\", { staticClass: \"card-body\" }, [\n _c(\"div\", { staticClass: \"row\" }, [\n _c(\"div\", { staticClass: \"col-3\" }, [\n _c(\"div\", { staticClass: \"col\" }, [\n _c(\"form\", { staticClass: \"form-group\" }, [\n _c(\n \"select\",\n {\n directives: [\n {\n name: \"model\",\n rawName: \"v-model\",\n value: _vm.selected,\n expression: \"selected\"\n }\n ],\n staticClass: \"form-control col\",\n attrs: { id: \"selector\" },\n on: {\n change: function($event) {\n var $$selectedVal = Array.prototype.filter\n .call($event.target.options, function(o) {\n return o.selected\n })\n .map(function(o) {\n var val = \"_value\" in o ? o._value : o.value\n return val\n })\n _vm.selected = $event.target.multiple\n ? $$selectedVal\n : $$selectedVal[0]\n }\n }\n },\n _vm._l(_vm.generics, function(example, idx) {\n return _c(\n \"option\",\n { key: idx, domProps: { value: example } },\n [_vm._v(_vm._s(example.display))]\n )\n }),\n 0\n )\n ])\n ]),\n _c(\n \"div\",\n { staticClass: \"col descriptor\" },\n [\n _c(\"span\", [_vm._v(\"Layout:\")]),\n _c(\"editor\", {\n staticClass: \"layout\",\n attrs: { \"show-btns\": false },\n model: {\n value: _vm.selected.data.layout,\n callback: function($$v) {\n _vm.$set(_vm.selected.data, \"layout\", $$v)\n },\n expression: \"selected.data.layout\"\n }\n })\n ],\n 1\n ),\n _c(\n \"div\",\n { staticClass: \"col descriptor\" },\n [\n _c(\"span\", [_vm._v(\"Data:\")]),\n _c(\"editor\", {\n staticClass: \"data\",\n attrs: { \"show-btns\": false },\n model: {\n value: _vm.selected.data.data,\n callback: function($$v) {\n _vm.$set(_vm.selected.data, \"data\", $$v)\n },\n expression: \"selected.data.data\"\n }\n })\n ],\n 1\n )\n ]),\n _c(\n \"div\",\n { staticClass: \"col-9\" },\n [\n _c(\"div\", { staticClass: \"row\" }, [\n _c(\n \"div\",\n { staticClass: \"col\" },\n [\n _c(\"highlight-code\", {\n attrs: { lang: \"javascript\", code: _vm.code }\n })\n ],\n 1\n )\n ]),\n _c(\n \"plotly\",\n _vm._b(\n {\n staticClass: \"graph\",\n attrs: {\n data: _vm.selected.data.data,\n layout: _vm.selected.data.layout\n }\n },\n \"plotly\",\n _vm.selected.data.attr,\n false\n )\n )\n ],\n 1\n )\n ])\n ])\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./example/components/graphpicker.vue?./node_modules/cache-loader/dist/cjs.js?%7B%22cacheDirectory%22:%22node_modules/.cache/vue-loader%22,%22cacheIdentifier%22:%2221b498e3-vue-loader-template%22%7D!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options"); 394 | 395 | /***/ }), 396 | 397 | /***/ "./node_modules/cache-loader/dist/cjs.js?{\"cacheDirectory\":\"node_modules/.cache/vue-loader\",\"cacheIdentifier\":\"21b498e3-vue-loader-template\"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Plotly.vue?vue&type=template&id=1b10c55e&": 398 | /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ 399 | !*** ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"21b498e3-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Plotly.vue?vue&type=template&id=1b10c55e& ***! 400 | \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ 401 | /*! exports provided: render, staticRenderFns */ 402 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 403 | 404 | "use strict"; 405 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", {\n directives: [\n {\n name: \"resize\",\n rawName: \"v-resize:debounce.100\",\n value: _vm.onResize,\n expression: \"onResize\",\n arg: \"debounce\",\n modifiers: { \"100\": true }\n }\n ],\n attrs: { id: _vm.id }\n })\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./src/components/Plotly.vue?./node_modules/cache-loader/dist/cjs.js?%7B%22cacheDirectory%22:%22node_modules/.cache/vue-loader%22,%22cacheIdentifier%22:%2221b498e3-vue-loader-template%22%7D!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options"); 406 | 407 | /***/ }), 408 | 409 | /***/ "./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./example/components/graphpicker.vue?vue&type=style&index=0&lang=css&": 410 | /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ 411 | !*** ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./example/components/graphpicker.vue?vue&type=style&index=0&lang=css& ***! 412 | \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ 413 | /*! no static exports found */ 414 | /***/ (function(module, exports, __webpack_require__) { 415 | 416 | eval("// Imports\nvar ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.i, \"\\n.layout .jsoneditor-vue {\\r\\n height: 150px;\\n}\\n.data .jsoneditor-vue {\\r\\n height: 300px;\\n}\\n.jsoneditor-vue div.jsoneditor-tree {\\r\\n min-height: 100px;\\n}\\n.mark-up {\\r\\n margin-top: 8px;\\n}\\n.graph {\\r\\n height: 500px;\\n}\\ndiv.jsoneditor-menu {\\r\\n background-color: #007bff;\\r\\n border-bottom: 1px solid #007bff;\\n}\\n.descriptor > span {\\r\\n margin-left: 5px;\\r\\n margin-top: 5px;\\n}\\r\\n\", \"\"]);\n// Exports\nmodule.exports = exports;\n\n\n//# sourceURL=webpack:///./example/components/graphpicker.vue?./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options"); 417 | 418 | /***/ }), 419 | 420 | /***/ "./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/less-loader/dist/cjs.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./example/App.vue?vue&type=style&index=0&lang=less&": 421 | /*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ 422 | !*** ./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./example/App.vue?vue&type=style&index=0&lang=less& ***! 423 | \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ 424 | /*! no static exports found */ 425 | /***/ (function(module, exports, __webpack_require__) { 426 | 427 | eval("// Imports\nvar ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.i, \"#app {\\n font-family: \\\"Avenir\\\", Helvetica, Arial, sans-serif;\\n -webkit-font-smoothing: antialiased;\\n -moz-osx-font-smoothing: grayscale;\\n color: #2c3e50;\\n}\\n@media (min-width: 1200px) {\\n#app .container {\\n max-width: 1400px;\\n}\\n}\\n#app .logo {\\n text-align: center;\\n}\\n#app .logo img {\\n width: 80px;\\n}\\n#app .card .card-header a {\\n margin-right: 5px;\\n}\\n#app .footer {\\n text-align: center;\\n}\\n#app .footer img {\\n height: 40px;\\n}\\n.features {\\n font-size: 18px;\\n text-align: center;\\n}\\n.graph-label {\\n text-align: center;\\n width: 100%;\\n height: 100%;\\n}\\n.label {\\n background: rgba(0, 0, 0, 0.03);\\n overflow: hidden;\\n}\\n.selector {\\n background-color: lightblue;\\n}\\n#badges {\\n text-align: center;\\n}\\n.main-card {\\n padding: 0;\\n}\\nfooter.footer {\\n background: darkgray;\\n}\\n.big-icon {\\n margin-bottom: 0;\\n}\\n.title {\\n font-size: 30px;\\n color: black;\\n}\\na.title-link:hover {\\n text-decoration: none;\\n}\\n\", \"\"]);\n// Exports\nmodule.exports = exports;\n\n\n//# sourceURL=webpack:///./example/App.vue?./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options"); 428 | 429 | /***/ }), 430 | 431 | /***/ "./node_modules/vue-style-loader/index.js?!./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./example/components/graphpicker.vue?vue&type=style&index=0&lang=css&": 432 | /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ 433 | !*** ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./example/components/graphpicker.vue?vue&type=style&index=0&lang=css& ***! 434 | \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ 435 | /*! no static exports found */ 436 | /***/ (function(module, exports, __webpack_require__) { 437 | 438 | eval("// style-loader: Adds some css to the DOM by adding a 172 | -------------------------------------------------------------------------------- /example/assets/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/vue-plotly/024f579788c469cde9d4aaa23022cf8883f3cac3/example/assets/demo.gif -------------------------------------------------------------------------------- /example/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/vue-plotly/024f579788c469cde9d4aaa23022cf8883f3cac3/example/assets/logo.png -------------------------------------------------------------------------------- /example/components/2D-histogram.js: -------------------------------------------------------------------------------- 1 | // from http://bl.ocks.org/mbostock/4349187 2 | // Sample from a normal distribution with mean 0, stddev 1. 3 | 4 | function normal() { 5 | var x = 0, 6 | y = 0, 7 | rds, 8 | c; 9 | do { 10 | x = Math.random() * 2 - 1; 11 | y = Math.random() * 2 - 1; 12 | rds = x * x + y * y; 13 | } while (rds == 0 || rds > 1); 14 | c = Math.sqrt((-2 * Math.log(rds)) / rds); // Box-Muller transform 15 | return x * c; // throw away extra sample y * c 16 | } 17 | 18 | var N = 2000, 19 | a = -1, 20 | b = 1.2; 21 | 22 | var step = (b - a) / (N - 1); 23 | var t = new Array(N), 24 | x = new Array(N), 25 | y = new Array(N); 26 | 27 | for (var i = 0; i < N; i++) { 28 | t[i] = a + step * i; 29 | x[i] = Math.pow(t[i], 3) + 0.3 * normal(); 30 | y[i] = Math.pow(t[i], 6) + 0.3 * normal(); 31 | } 32 | 33 | var trace1 = { 34 | x: x, 35 | y: y, 36 | mode: "markers", 37 | name: "points", 38 | marker: { 39 | color: "rgb(102,0,0)", 40 | size: 2, 41 | opacity: 0.4 42 | }, 43 | type: "scatter" 44 | }; 45 | var trace2 = { 46 | x: x, 47 | y: y, 48 | name: "density", 49 | ncontours: 20, 50 | colorscale: "Hot", 51 | reversescale: true, 52 | showscale: false, 53 | type: "histogram2dcontour" 54 | }; 55 | var trace3 = { 56 | x: x, 57 | name: "x density", 58 | marker: { color: "rgb(102,0,0)" }, 59 | yaxis: "y2", 60 | type: "histogram" 61 | }; 62 | var trace4 = { 63 | y: y, 64 | name: "y density", 65 | marker: { color: "rgb(102,0,0)" }, 66 | xaxis: "x2", 67 | type: "histogram" 68 | }; 69 | const layout = { 70 | showlegend: false, 71 | margin: { t: 50 }, 72 | hovermode: "closest", 73 | bargap: 0, 74 | xaxis: { 75 | domain: [0, 0.85], 76 | showgrid: false, 77 | zeroline: false 78 | }, 79 | yaxis: { 80 | domain: [0, 0.85], 81 | showgrid: false, 82 | zeroline: false 83 | }, 84 | xaxis2: { 85 | domain: [0.85, 1], 86 | showgrid: false, 87 | zeroline: false 88 | }, 89 | yaxis2: { 90 | domain: [0.85, 1], 91 | showgrid: false, 92 | zeroline: false 93 | } 94 | }; 95 | 96 | export default { 97 | display: "2D Histogram", 98 | data: { 99 | data: [trace1, trace2, trace3, trace4], 100 | attr: {}, 101 | layout 102 | } 103 | }; 104 | -------------------------------------------------------------------------------- /example/components/contour.js: -------------------------------------------------------------------------------- 1 | export default { 2 | display: "Contour graph", 3 | data: { 4 | data: [ 5 | { 6 | z: [ 7 | [10, 10.625, 12.5, 15.625, 20], 8 | [5.625, 6.25, 8.125, 11.25, 15.625], 9 | [2.5, 3.125, 5, 8.125, 12.5], 10 | [0.625, 1.25, 3.125, 6.25, 10.625], 11 | [0, 0.625, 2.5, 5.625, 10] 12 | ], 13 | x: [-9, -6, -5, -3, -1], 14 | y: [0, 1, 4, 5, 7], 15 | type: "contour" 16 | } 17 | ], 18 | attr: { 19 | displayModeBar: false 20 | }, 21 | layout: { 22 | title: "Setting the X and Y Coordinates in a Contour Plot" 23 | } 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /example/components/graphpicker.vue: -------------------------------------------------------------------------------- 1 | 56 | 90 | 121 | -------------------------------------------------------------------------------- /example/components/histogram.js: -------------------------------------------------------------------------------- 1 | const x = []; 2 | for (var i = 0; i < 500; i++) { 3 | x[i] = Math.random(); 4 | } 5 | const trace = { 6 | x: x, 7 | type: "histogram" 8 | }; 9 | 10 | export default { 11 | display: "Histogram", 12 | data: { 13 | data: [trace], 14 | attr: {}, 15 | layout: {} 16 | } 17 | }; 18 | -------------------------------------------------------------------------------- /example/components/pie.js: -------------------------------------------------------------------------------- 1 | const pie = { 2 | values: [40, 10, 30], 3 | rotation: 90, 4 | textinfo: "none", 5 | marker: { 6 | colors: ["orange", "yellow", "BLUE"] 7 | }, 8 | labels: ["remaing", "done", "doing"], 9 | hoverinfo: "label+value+percent", 10 | hole: 0.5, 11 | type: "pie", 12 | showlegend: false 13 | }; 14 | 15 | export default { 16 | display: "Pie graph", 17 | data: { 18 | data: [pie], 19 | attr: { 20 | displayModeBar: false 21 | }, 22 | layout: { 23 | font: { 24 | color: "white" 25 | }, 26 | title: { 27 | text: "pie" 28 | }, 29 | plot_bgcolor: "black", 30 | paper_bgcolor: "black" 31 | } 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /example/components/simple.js: -------------------------------------------------------------------------------- 1 | const trace1 = { 2 | x: [1, 2, 3, 4], 3 | y: [10, 15, 13, 17], 4 | type: 'scatter', 5 | }; 6 | 7 | const trace2 = { 8 | x: [1, 2, 3, 4], 9 | y: [16, 5, 11, 9], 10 | type: 'scatter', 11 | }; 12 | 13 | export default { 14 | display: 'Scatter', 15 | data: { 16 | data: [trace1, trace2], 17 | attr: { displayModeBar: true }, 18 | layout: { 19 | plot_bgcolor: '#d3d3d3', 20 | paper_bgcolor: '#d3d3d3', 21 | }, 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /example/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | import VueHighlightJS from "vue-highlight.js"; 4 | 5 | import javascript from "highlight.js/lib/languages/javascript"; 6 | import vue from "vue-highlight.js/lib/languages/vue"; 7 | import css from "highlight.js/lib/languages/css"; 8 | import VueDraggableResizable from "vue-draggable-resizable"; 9 | import { Plotly } from "@/index.js"; 10 | 11 | import "vue-draggable-resizable/dist/VueDraggableResizable.css"; 12 | import "bootstrap/dist/css/bootstrap.min.css"; 13 | import "font-awesome/css/font-awesome.css"; 14 | import "highlight.js/styles/default.css"; 15 | import "highlight.js/styles/mono-blue.css"; 16 | 17 | Vue.component("vue-draggable-resizable", VueDraggableResizable); 18 | Vue.component("plotly", Plotly); 19 | 20 | Vue.use(VueHighlightJS, { 21 | languages: { 22 | css, 23 | javascript, 24 | vue 25 | } 26 | }); 27 | 28 | Vue.config.productionTip = false; 29 | 30 | new Vue({ 31 | render: h => h(App) 32 | }).$mount("#app"); 33 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: ["js", "jsx", "json", "vue"], 3 | transform: { 4 | "^.+\\.vue$": "vue-jest", 5 | ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub", 6 | "^.+\\.jsx?$": "babel-jest" 7 | }, 8 | transformIgnorePatterns: ["/node_modules/"], 9 | moduleNameMapper: { 10 | "^@/(.*)$": "/src/$1", 11 | "^plotly.js$": "/tests/mocks/plotly.js" 12 | }, 13 | snapshotSerializers: ["jest-serializer-vue"], 14 | testMatch: ["**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], 15 | collectCoverageFrom: ["/src/**/*.*"], 16 | testURL: "http://localhost/", 17 | setupFiles: ["jest-canvas-mock", "/tests/helpers/mockUrl.js"] 18 | }; 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-plotly", 3 | "version": "1.1.0", 4 | "private": false, 5 | "scripts": { 6 | "serve": "vue-cli-service serve ./example/main.js --open", 7 | "build": "vue-cli-service build --name vue-plotly --entry ./src/index.js --target lib", 8 | "test:unit": "vue-cli-service test:unit --coverage", 9 | "lint": "vue-cli-service lint --fix", 10 | "build:doc": "vue-cli-service build --entry ./example/main.js --dest docs --mode development", 11 | "prepublishOnly": "npm run lint && npm run build && npm run build:doc", 12 | "test:coverage": "vue-cli-service test:unit --coverage --verbose && codecov" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/David-Desmaisons/vue-plotly.git" 17 | }, 18 | "main": "dist/vue-plotly.umd.js", 19 | "module": "dist/vue-plotly.common.min.js", 20 | "files": [ 21 | "dist/*.css", 22 | "dist/*.map", 23 | "dist/*.js", 24 | "src/*" 25 | ], 26 | "dependencies": { 27 | "core-js": "^3.6.4", 28 | "plotly.js": "^1.52.1", 29 | "vue": "^2.6.11", 30 | "vue-resize-directive": "^1.2.0" 31 | }, 32 | "devDependencies": { 33 | "@vue/cli-plugin-babel": "^4.1.2", 34 | "@vue/cli-plugin-eslint": "^4.1.2", 35 | "@vue/cli-plugin-unit-jest": "^4.1.2", 36 | "@vue/cli-service": "^4.1.2", 37 | "@vue/eslint-config-prettier": "^6.0.0", 38 | "@vue/test-utils": "1.0.0-beta.31", 39 | "@vuedoc/md": "^1.6.0", 40 | "babel-core": "^7.0.0-bridge.0", 41 | "babel-eslint": "^10.0.3", 42 | "babel-jest": "^24.9.0", 43 | "bootstrap": "^4.4.1", 44 | "codecov": "^3.6.1", 45 | "eslint": "^6.8.0", 46 | "eslint-plugin-prettier": "^3.1.2", 47 | "eslint-plugin-vue": "^6.1.2", 48 | "font-awesome": "^4.7.0", 49 | "highlight.js": "^9.18.0", 50 | "ify-loader": "^1.1.0", 51 | "jest-canvas-mock": "^2.2.0", 52 | "less": "^3.10.3", 53 | "less-loader": "^5.0.0", 54 | "vue-cli-plugin-component": "^1.12.2", 55 | "vue-draggable-resizable": "^2.1.0", 56 | "vue-highlight.js": "^3.1.0", 57 | "vue-json-editor": "^1.4.0", 58 | "vue-server-renderer": "^2.6.11", 59 | "vue-template-compiler": "^2.6.11" 60 | }, 61 | "keywords": [ 62 | "vue", 63 | "component" 64 | ], 65 | "license": "MIT" 66 | } 67 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/David-Desmaisons/vue-plotly/024f579788c469cde9d4aaa23022cf8883f3cac3/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-plotly 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/Plotly.vue: -------------------------------------------------------------------------------- 1 | 4 | 127 | -------------------------------------------------------------------------------- /src/components/events.js: -------------------------------------------------------------------------------- 1 | const eventsName = [ 2 | "AfterExport", 3 | "AfterPlot", 4 | "Animated", 5 | "AnimatingFrame", 6 | "AnimationInterrupted", 7 | "AutoSize", 8 | "BeforeExport", 9 | "ButtonClicked", 10 | "Click", 11 | "ClickAnnotation", 12 | "Deselect", 13 | "DoubleClick", 14 | "Framework", 15 | "Hover", 16 | "LegendClick", 17 | "LegendDoubleClick", 18 | "Relayout", 19 | "Restyle", 20 | "Redraw", 21 | "Selected", 22 | "Selecting", 23 | "SliderChange", 24 | "SliderEnd", 25 | "SliderStart", 26 | "Transitioning", 27 | "TransitionInterrupted", 28 | "Unhover" 29 | ]; 30 | 31 | const events = eventsName 32 | .map(evt => evt.toLocaleLowerCase()) 33 | .map(eventName => ({ 34 | completeName: "plotly_" + eventName, 35 | handler: context => (...args) => { 36 | context.$emit.apply(context, [eventName, ...args]); 37 | } 38 | })); 39 | 40 | export default events; 41 | -------------------------------------------------------------------------------- /src/components/methods.js: -------------------------------------------------------------------------------- 1 | import Plotly from "plotly.js"; 2 | 3 | const plotlyFunctions = ["restyle", "relayout", "update", "addTraces", "deleteTraces", "moveTraces", "extendTraces", "prependTraces", "purge"]; 4 | 5 | const methods = plotlyFunctions.reduce((all, functionName) => { 6 | all[functionName] = function(...args) { 7 | return Plotly[functionName].apply(Plotly, [this.$el, ...args]); 8 | }; 9 | return all; 10 | }, {}); 11 | 12 | export default methods; 13 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Plotly from "./components/Plotly.vue"; 2 | 3 | export { Plotly }; 4 | -------------------------------------------------------------------------------- /src/utils/helper.js: -------------------------------------------------------------------------------- 1 | function cached(fn) { 2 | const cache = Object.create(null); 3 | return function cachedFn(str) { 4 | const hit = cache[str]; 5 | return hit || (cache[str] = fn(str)); 6 | }; 7 | } 8 | 9 | const regex = /-(\w)/g; 10 | const camelize = cached(str => str.replace(regex, (_, c) => (c ? c.toUpperCase() : ""))); 11 | 12 | export { camelize }; 13 | -------------------------------------------------------------------------------- /tests/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | jest: true 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /tests/helpers/mockUrl.js: -------------------------------------------------------------------------------- 1 | function noOp() {} 2 | 3 | if (typeof window !== "undefined" && typeof window.URL.createObjectURL === "undefined") { 4 | Object.defineProperty(window.URL, "createObjectURL", { value: noOp }); 5 | } 6 | -------------------------------------------------------------------------------- /tests/mocks/plotly.js: -------------------------------------------------------------------------------- 1 | export default { 2 | Plots: { 3 | resize: jest.fn() 4 | }, 5 | plot: jest.fn(), 6 | newPlot: jest.fn(element => { 7 | element.on = jest.fn(); 8 | element.removeAllListeners = jest.fn(); 9 | }), 10 | react: jest.fn(), 11 | relayout: jest.fn(), 12 | restyle: jest.fn(), 13 | update: jest.fn(), 14 | purge: jest.fn(), 15 | addTraces: jest.fn(), 16 | deleteTraces: jest.fn(), 17 | moveTraces: jest.fn(), 18 | extendTraces: jest.fn(), 19 | prependTraces: jest.fn(), 20 | toImage: jest.fn(), 21 | downloadImage: jest.fn() 22 | }; 23 | -------------------------------------------------------------------------------- /tests/unit/helper.spec.js: -------------------------------------------------------------------------------- 1 | import { camelize } from "@/utils/helper"; 2 | 3 | describe("camelize", () => { 4 | test.each([ 5 | ["MyProp", "MyProp"], 6 | ["MyProp", "MyProp"], 7 | ["kebab-case", "kebabCase"], 8 | ["multi-hyphen-string", "multiHyphenString"], 9 | ["drag-class", "dragClass"], 10 | ["test-", "test-"] 11 | ])("transform %s into %s", (value, expected) => { 12 | const actual = camelize(value); 13 | expect(actual).toEqual(expected); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /tests/unit/index.spec.js: -------------------------------------------------------------------------------- 1 | import { Plotly } from "@/index.js"; 2 | import PlotlyDirect from "@/components/Plotly.vue"; 3 | 4 | describe("index.js", () => { 5 | it("expose Plotly as a property", () => { 6 | expect(Plotly).toBe(PlotlyDirect); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /tests/unit/plotly.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from "@vue/test-utils"; 2 | import Plotly from "@/components/Plotly.vue"; 3 | import plotlyjs from "plotly.js"; 4 | import resize from "vue-resize-directive"; 5 | jest.mock("vue-resize-directive"); 6 | 7 | let wrapper; 8 | let vm; 9 | let layout; 10 | let data; 11 | let attrs; 12 | const id = "id"; 13 | 14 | const events = [ 15 | "AfterExport", 16 | "AfterPlot", 17 | "Animated", 18 | "AnimatingFrame", 19 | "AnimationInterrupted", 20 | "AutoSize", 21 | "BeforeExport", 22 | "ButtonClicked", 23 | "Click", 24 | "ClickAnnotation", 25 | "Deselect", 26 | "DoubleClick", 27 | "Framework", 28 | "Hover", 29 | "LegendClick", 30 | "LegendDoubleClick", 31 | "Relayout", 32 | "Restyle", 33 | "Redraw", 34 | "Selected", 35 | "Selecting", 36 | "SliderChange", 37 | "SliderEnd", 38 | "SliderStart", 39 | "Transitioning", 40 | "TransitionInterrupted", 41 | "Unhover" 42 | ]; 43 | 44 | const methods = ["restyle", "relayout", "update", "addTraces", "deleteTraces", "moveTraces", "extendTraces", "prependTraces", "purge"]; 45 | 46 | function shallowMountPlotty() { 47 | jest.clearAllMocks(); 48 | return shallowMount(Plotly, { 49 | propsData: { 50 | layout, 51 | data, 52 | id 53 | }, 54 | attrs, 55 | attachToDocument: true 56 | }); 57 | } 58 | 59 | describe("Plotly.vue", () => { 60 | beforeEach(() => { 61 | layout = {}; 62 | data = []; 63 | attrs = { 64 | "display-mode-bar": true 65 | }; 66 | wrapper = shallowMountPlotty(); 67 | vm = wrapper.vm; 68 | }); 69 | 70 | it("defines props", () => { 71 | const props = { 72 | data: { 73 | type: Array 74 | }, 75 | layout: { 76 | type: Object 77 | }, 78 | id: { 79 | type: String, 80 | required: false, 81 | default: null 82 | } 83 | }; 84 | expect(Plotly.props).toEqual(props); 85 | }); 86 | 87 | it("renders a div", () => { 88 | expect(wrapper.is("div")).toBe(true); 89 | }); 90 | 91 | it("sets id on div", () => { 92 | expect(wrapper.is(`#${id}`)).toBe(true); 93 | }); 94 | 95 | it("sets id on div", () => { 96 | expect(wrapper.is(`#${id}`)).toBe(true); 97 | }); 98 | 99 | it("calls plotly newPlot", () => { 100 | expect(plotlyjs.newPlot).toHaveBeenCalledWith(vm.$el, data, layout, { 101 | displayModeBar: true, 102 | responsive: false 103 | }); 104 | expect(plotlyjs.newPlot.mock.calls.length).toBe(1); 105 | }); 106 | 107 | it("allows responsive to be overridden attribute", () => { 108 | attrs = { 109 | responsive: true 110 | }; 111 | wrapper = shallowMountPlotty(); 112 | 113 | expect(plotlyjs.newPlot).toHaveBeenCalledWith(vm.$el, data, layout, { 114 | responsive: true 115 | }); 116 | expect(plotlyjs.newPlot.mock.calls.length).toBe(1); 117 | }); 118 | 119 | it("calls resize directive", () => { 120 | const { 121 | mock: { calls } 122 | } = resize.inserted; 123 | expect(calls.length).toBe(1); 124 | const [call] = calls; 125 | expect(call[0]).toBe(vm.$el); 126 | expect(call[1]).toMatchObject({ 127 | arg: "debounce", 128 | name: "resize", 129 | rawName: "v-resize:debounce.100", 130 | expression: "onResize" 131 | }); 132 | }); 133 | 134 | it("call plotly resize when resized", () => { 135 | const { 136 | mock: { 137 | calls: [call] 138 | } 139 | } = resize.inserted; 140 | const { value: callBackResize } = call[1]; 141 | callBackResize(); 142 | 143 | expect(plotlyjs.Plots.resize).toHaveBeenCalledWith(vm.$el); 144 | }); 145 | 146 | test.each(events)("listens to plotly event %s and transform it in a vue event", evt => { 147 | const evtName = evt.toLowerCase(); 148 | const { 149 | on: { 150 | mock: { calls } 151 | } 152 | } = vm.$el; 153 | const call = calls.find(c => c[0] === `plotly_${evtName}`); 154 | 155 | expect(call).not.toBeUndefined(); 156 | expect(call.length).toBe(2); 157 | 158 | const callBack = call[1]; 159 | const parameter = { value: 25 }; 160 | callBack(parameter); 161 | 162 | expect(wrapper.emitted()).toEqual({ 163 | [evtName]: [[parameter]] 164 | }); 165 | }); 166 | 167 | it(`register all the ${events.length} plotly events`, () => { 168 | const { 169 | on: { 170 | mock: { calls } 171 | } 172 | } = vm.$el; 173 | expect(calls.length).toBe(events.length); 174 | }); 175 | 176 | test.each(methods)("defines plotly method %s", methodName => { 177 | expect(methodName in vm).toBe(true); 178 | const parameters = [1, 2, 3]; 179 | vm[methodName](...parameters); 180 | 181 | expect(plotlyjs[methodName]).toHaveBeenCalledWith(vm.$el, 1, 2, 3); 182 | }); 183 | 184 | describe.each([ 185 | ["data", wrapper => wrapper.setProps({ data: [{ data: "novo" }] })], 186 | ["attr", wrapper => (wrapper.vm.$attrs = { displayModeBar: "hover" })] 187 | ])("when %p changes", (_, changeData) => { 188 | describe.each([ 189 | ["once", changeData], 190 | [ 191 | "twice", 192 | wrapper => { 193 | changeData(wrapper); 194 | changeData(wrapper); 195 | } 196 | ] 197 | ])("%s in the same tick", (_, update) => { 198 | const { error } = console; 199 | 200 | beforeEach(() => { 201 | console.error = () => {}; 202 | jest.clearAllMocks(); 203 | update(wrapper); 204 | }); 205 | afterEach(() => { 206 | console.error = error; 207 | }); 208 | 209 | it("calls plotly react once in the next tick", async () => { 210 | await vm.$nextTick(); 211 | expect(plotlyjs.react).toHaveBeenCalledWith(vm.$el, vm.data, vm.layout, vm.options); 212 | expect(plotlyjs.react.mock.calls.length).toBe(1); 213 | }); 214 | 215 | it("does not calls plotly relayout", async () => { 216 | await vm.$nextTick(); 217 | expect(plotlyjs.relayout).not.toHaveBeenCalled(); 218 | }); 219 | }); 220 | }); 221 | 222 | describe("when attrs and props changes in the same tick", () => { 223 | const { error } = console; 224 | 225 | beforeEach(() => { 226 | console.error = () => {}; 227 | jest.clearAllMocks(); 228 | wrapper.setProps({ data: [{ data: "novo" }] }); 229 | wrapper.vm.$attrs = { displayModeBar: "hover" }; 230 | }); 231 | afterEach(() => { 232 | console.error = error; 233 | }); 234 | 235 | it("calls plotly react once in the next tick", async () => { 236 | await vm.$nextTick(); 237 | expect(plotlyjs.react).toHaveBeenCalledWith(vm.$el, vm.data, vm.layout, vm.options); 238 | expect(plotlyjs.react.mock.calls.length).toBe(1); 239 | }); 240 | 241 | it("does not calls plotly relayout", async () => { 242 | await vm.$nextTick(); 243 | expect(plotlyjs.relayout).not.toHaveBeenCalled(); 244 | }); 245 | }); 246 | 247 | describe("when attrs changes to same value", () => { 248 | const { error } = console; 249 | 250 | beforeEach(() => { 251 | console.error = () => {}; 252 | jest.clearAllMocks(); 253 | const attrs = Object.assign({}, vm.$attrs); 254 | vm.$attrs = attrs; 255 | }); 256 | afterEach(() => { 257 | console.error = error; 258 | }); 259 | 260 | it("does not calls plotly react", async () => { 261 | await vm.$nextTick(); 262 | expect(plotlyjs.react).not.toHaveBeenCalled(); 263 | }); 264 | 265 | it("does not calls plotly relayout", async () => { 266 | await vm.$nextTick(); 267 | expect(plotlyjs.relayout).not.toHaveBeenCalled(); 268 | }); 269 | }); 270 | 271 | describe("when layout changes", () => { 272 | const updateLayout = () => wrapper.setProps({ layout: { novo: "layout" } }); 273 | describe.each([ 274 | ["once", updateLayout], 275 | [ 276 | "twice", 277 | () => { 278 | updateLayout(); 279 | updateLayout(); 280 | } 281 | ] 282 | ])("%s in the same tick", (_, update) => { 283 | beforeEach(() => { 284 | jest.clearAllMocks(); 285 | update(wrapper); 286 | }); 287 | 288 | it("calls plotly relayout once", async () => { 289 | await vm.$nextTick(); 290 | expect(plotlyjs.relayout).toHaveBeenCalledWith(vm.$el, { 291 | novo: "layout" 292 | }); 293 | expect(plotlyjs.relayout.mock.calls.length).toBe(1); 294 | }); 295 | 296 | it("does not calls plotly react", async () => { 297 | await vm.$nextTick(); 298 | expect(plotlyjs.react).not.toHaveBeenCalled(); 299 | }); 300 | }); 301 | }); 302 | 303 | const changeData = () => wrapper.setProps({ data: { novo: "data" } }); 304 | const changeLayout = () => wrapper.setProps({ layout: { novo: "layout" } }); 305 | 306 | describe.each([ 307 | [ 308 | () => { 309 | changeData(); 310 | changeLayout(); 311 | } 312 | ], 313 | [ 314 | () => { 315 | changeLayout(); 316 | changeData(); 317 | } 318 | ] 319 | ])("when layout changes and data changes", changes => { 320 | beforeEach(() => { 321 | jest.clearAllMocks(); 322 | changes(); 323 | }); 324 | 325 | it("calls plotly react once", async () => { 326 | await vm.$nextTick(); 327 | expect(plotlyjs.react).toHaveBeenCalledWith( 328 | vm.$el, 329 | { novo: "data" }, 330 | { novo: "layout" }, 331 | { 332 | displayModeBar: true, 333 | responsive: false 334 | } 335 | ); 336 | expect(plotlyjs.react.mock.calls.length).toBe(1); 337 | }); 338 | 339 | it("does not calls plotly relayout", async () => { 340 | await vm.$nextTick(); 341 | expect(plotlyjs.relayout).not.toHaveBeenCalled(); 342 | }); 343 | }); 344 | 345 | describe("when calling toImage", () => { 346 | beforeEach(() => { 347 | vm.toImage({ option: 1 }); 348 | }); 349 | 350 | it("calls Plotly toImage", () => { 351 | const { clientWidth: width, clientHeight: height } = vm.$el; 352 | expect(plotlyjs.toImage).toHaveBeenCalledWith(vm.$el, { 353 | width, 354 | height, 355 | option: 1, 356 | format: "png" 357 | }); 358 | }); 359 | }); 360 | 361 | describe("when calling downloadImage", () => { 362 | beforeEach(() => { 363 | vm.downloadImage({ option: 1 }); 364 | }); 365 | 366 | it("calls Plotly toImage", () => { 367 | const { clientWidth: width, clientHeight: height } = vm.$el; 368 | const { downloadImage } = plotlyjs; 369 | expect(downloadImage).toHaveBeenCalled(); 370 | const { 371 | mock: { 372 | calls: [call] 373 | } 374 | } = downloadImage; 375 | 376 | expect(call.length).toBe(2); 377 | expect(call[0]).toBe(vm.$el); 378 | expect(call[1]).toMatchObject({ 379 | width, 380 | height, 381 | option: 1, 382 | format: "png" 383 | }); 384 | expect(call[1].filename).not.toBeUndefined(); 385 | }); 386 | }); 387 | 388 | describe("when destroyed", () => { 389 | beforeEach(() => { 390 | wrapper.destroy(); 391 | }); 392 | 393 | it("calls plotly purge", () => { 394 | expect(plotlyjs.purge).toHaveBeenCalledWith(vm.$el); 395 | }); 396 | 397 | test.each(events)("unlistens to plotly event %s", evtName => { 398 | const { removeAllListeners } = vm.$el; 399 | expect(removeAllListeners).toHaveBeenCalledWith(`plotly_${evtName.toLowerCase()}`); 400 | }); 401 | 402 | it(`unlistens to all the ${events.length} plotly events`, () => { 403 | const { 404 | removeAllListeners: { 405 | mock: { calls } 406 | } 407 | } = vm.$el; 408 | expect(calls.length).toBe(events.length); 409 | }); 410 | }); 411 | }); 412 | -------------------------------------------------------------------------------- /tests/unit/plotly.ssr.spec.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment node 3 | */ 4 | 5 | const Vue = require("vue"); 6 | const renderer = require("vue-server-renderer").createRenderer(); 7 | const Plotly = require("@/components/Plotly").default; 8 | Vue.component("plotly", Plotly); 9 | const app = new Vue({ 10 | name: "test-app", 11 | template: `` 12 | }); 13 | let html; 14 | 15 | describe("Plotly.vue in a ssr context", () => { 16 | beforeEach(async () => { 17 | html = await renderer.renderToString(app); 18 | }); 19 | 20 | it("can be rendered", () => { 21 | const expected = '
'; 22 | expect(html).toEqual(expected); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: "./", 3 | chainWebpack: config => { 4 | config.module 5 | .rule("js-plotly") 6 | .test(/\.js$/) 7 | .use("ify-loader") 8 | .loader("ify-loader") 9 | .end(); 10 | } 11 | }; 12 | --------------------------------------------------------------------------------