Skip to content
BranchesTags

Latest commit

History

36 Commits

Folders and files

NameName
Last commit message
Last commit date
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
index.html
index.html
index.js
index.js
package.json
package.json
webpack.config.js
webpack.config.js

Repository files navigation

Bundling plotly.js with Webpack

Note: Webpack now raises a Can't resolve 'vertx' warning, which can safely be ignored and suppressed using Webpack's IgnorePlugin like so: new webpack.IgnorePlugin(/vertx/). The root cause of this warning is that plotly.js depends on es6-promise, which tries to load vertx but gracefully falls back if it isn't present.

The easy way (recommended)

The easiest way to use plotly.js in an app bundled by webpack is just to install it via npm install plotly.js and then require() or import from 'plotly.js/dist/plotly' instead of from 'plotly.js'. Doing this will get you a complete version of plotly.js (i.e. all chart types) precompiled to browser-friendly ES5 that will work out of the box with pretty much any Webpack configuration.

If you don't want all of plotly.js because it's too big (minified it comes in over 2Mb) you can instead load a precompiled partial bundle from plotly.js/dist/BUNDLENAME.

The customization way

If neither the full bundle nor any of the partial bundles meet your specific needs, then you should consider putting your own customized bundle together and if you want to use Webpack you'll have to follow the instructions here. The package.json file in this repo shows the minimal set of requirements to use the included webpack.config.js to bundle plotly.js for either development or production. The resulting bundle.js file is based on index.js and can be validated by opening index.html.

Usage (works with NPM or Yarn):

npm install
npm run webpack-dev #takes ~10s for a 5.9MB bundle
npm run webpack-prod #takes ~60s for a 2.2MB bundle

Explanations

Bundling with webpack requires ify-loader@1.1.0+ for the glslify, cwise, and brfs browserify transforms. Additionally, you may wish to use transform-loader to run plotly.js's custom compress_attributes transform which removes attribute descriptions from the plot schema that aren't needed to create and view plots.

Bundling for production with webpack (i.e. with the -p option) by default runs the UglifyJS plugin, which doesn't accept ES6 syntax, so the babel-loader is additionally required, as some of plotly.js' dependencies use this syntax.

Speeding up the build and reducing the bundle size

The index.js file included here loads all of plotly.js but if your application only requires a subset of plot types, you may load a partial bundle instead for faster build times and reduced bundle sizes.

For example, switching from require('plotly.js') to require('plotly.js/lib/index-basic') in index.js reduces production build times from ~60s to ~15s and bundle size from ~2.2MB to ~690kB.

License

© 2017 Plotly, Inc. MIT License.

About

Example repo for bundling plotly.js with webpack and browserify

Resources

Readme
MIT license
Activity

Stars

0 stars

Watchers

1 watching

Forks

8 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - hakandilek/plotly-webpack: Example repo for bundling plotly.js with webpack and browserify · GitHub
Skip to content
BranchesTags
Latest commit
History
36 Commits
Folders and files
NameName
Last commit message
Last commit date
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
index.html
index.html
index.js
index.js
package.json
package.json
webpack.config.js
webpack.config.js
Repository files navigation
Bundling plotly.js with Webpack
Note: Webpack now raises a Can't resolve 'vertx' warning, which can safely be ignored and suppressed using Webpack's IgnorePlugin like so: new webpack.IgnorePlugin(/vertx/). The root cause of this warning is that plotly.js depends on es6-promise, which tries to load vertx but gracefully falls back if it isn't present.
The easy way (recommended)
The easiest way to use plotly.js in an app bundled by webpack is just to install it via npm install plotly.js and then require() or import from 'plotly.js/dist/plotly' instead of from 'plotly.js'. Doing this will get you a complete version of plotly.js (i.e. all chart types) precompiled to browser-friendly ES5 that will work out of the box with pretty much any Webpack configuration.
If you don't want all of plotly.js because it's too big (minified it comes in over 2Mb) you can instead load a precompiled partial bundle from plotly.js/dist/BUNDLENAME.
The customization way
If neither the full bundle nor any of the partial bundles meet your specific needs, then you should consider putting your own customized bundle together and if you want to use Webpack you'll have to follow the instructions here. The package.json file in this repo shows the minimal set of requirements to use the included webpack.config.js to bundle plotly.js for either development or production. The resulting bundle.js file is based on index.js and can be validated by opening index.html.
Usage (works with NPM or Yarn):
npm install
npm run webpack-dev #takes ~10s for a 5.9MB bundle
npm run webpack-prod #takes ~60s for a 2.2MB bundle
Explanations
Bundling with webpack requires ify-loader@1.1.0+ for the glslify, cwise, and brfs browserify transforms. Additionally, you may wish to use transform-loader to run plotly.js's custom compress_attributes transform which removes attribute descriptions from the plot schema that aren't needed to create and view plots.
Bundling for production with webpack (i.e. with the -p option) by default runs the UglifyJS plugin, which doesn't accept ES6 syntax, so the babel-loader is additionally required, as some of plotly.js' dependencies use this syntax.
Speeding up the build and reducing the bundle size
The index.js file included here loads all of plotly.js but if your application only requires a subset of plot types, you may load a partial bundle instead for faster build times and reduced bundle sizes.
For example, switching from require('plotly.js') to require('plotly.js/lib/index-basic') in index.js reduces production build times from ~60s to ~15s and bundle size from ~2.2MB to ~690kB.
License
© 2017 Plotly, Inc. MIT License.
About
Example repo for bundling plotly.js with webpack and browserify
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
8 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - hakandilek/plotly-webpack: Example repo for bundling plotly.js with webpack and browserify · GitHub
Skip to content
BranchesTags
Latest commit
History
36 Commits
Folders and files
NameName
Last commit message
Last commit date
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
index.html
index.html
index.js
index.js
package.json
package.json
webpack.config.js
webpack.config.js
Repository files navigation
Bundling plotly.js with Webpack
Note: Webpack now raises a Can't resolve 'vertx' warning, which can safely be ignored and suppressed using Webpack's IgnorePlugin like so: new webpack.IgnorePlugin(/vertx/). The root cause of this warning is that plotly.js depends on es6-promise, which tries to load vertx but gracefully falls back if it isn't present.
The easy way (recommended)
The easiest way to use plotly.js in an app bundled by webpack is just to install it via npm install plotly.js and then require() or import from 'plotly.js/dist/plotly' instead of from 'plotly.js'. Doing this will get you a complete version of plotly.js (i.e. all chart types) precompiled to browser-friendly ES5 that will work out of the box with pretty much any Webpack configuration.
If you don't want all of plotly.js because it's too big (minified it comes in over 2Mb) you can instead load a precompiled partial bundle from plotly.js/dist/BUNDLENAME.
The customization way
If neither the full bundle nor any of the partial bundles meet your specific needs, then you should consider putting your own customized bundle together and if you want to use Webpack you'll have to follow the instructions here. The package.json file in this repo shows the minimal set of requirements to use the included webpack.config.js to bundle plotly.js for either development or production. The resulting bundle.js file is based on index.js and can be validated by opening index.html.
Usage (works with NPM or Yarn):
npm install
npm run webpack-dev #takes ~10s for a 5.9MB bundle
npm run webpack-prod #takes ~60s for a 2.2MB bundle
Explanations
Bundling with webpack requires ify-loader@1.1.0+ for the glslify, cwise, and brfs browserify transforms. Additionally, you may wish to use transform-loader to run plotly.js's custom compress_attributes transform which removes attribute descriptions from the plot schema that aren't needed to create and view plots.
Bundling for production with webpack (i.e. with the -p option) by default runs the UglifyJS plugin, which doesn't accept ES6 syntax, so the babel-loader is additionally required, as some of plotly.js' dependencies use this syntax.
Speeding up the build and reducing the bundle size
The index.js file included here loads all of plotly.js but if your application only requires a subset of plot types, you may load a partial bundle instead for faster build times and reduced bundle sizes.
For example, switching from require('plotly.js') to require('plotly.js/lib/index-basic') in index.js reduces production build times from ~60s to ~15s and bundle size from ~2.2MB to ~690kB.
License
© 2017 Plotly, Inc. MIT License.
About
Example repo for bundling plotly.js with webpack and browserify
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
8 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - hakandilek/plotly-webpack: Example repo for bundling plotly.js with webpack and browserify · GitHub
Skip to content
BranchesTags
Latest commit
History
36 Commits
Folders and files
NameName
Last commit message
Last commit date
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
index.html
index.html
index.js
index.js
package.json
package.json
webpack.config.js
webpack.config.js
Repository files navigation
Bundling plotly.js with Webpack
Note: Webpack now raises a Can't resolve 'vertx' warning, which can safely be ignored and suppressed using Webpack's IgnorePlugin like so: new webpack.IgnorePlugin(/vertx/). The root cause of this warning is that plotly.js depends on es6-promise, which tries to load vertx but gracefully falls back if it isn't present.
The easy way (recommended)
The easiest way to use plotly.js in an app bundled by webpack is just to install it via npm install plotly.js and then require() or import from 'plotly.js/dist/plotly' instead of from 'plotly.js'. Doing this will get you a complete version of plotly.js (i.e. all chart types) precompiled to browser-friendly ES5 that will work out of the box with pretty much any Webpack configuration.
If you don't want all of plotly.js because it's too big (minified it comes in over 2Mb) you can instead load a precompiled partial bundle from plotly.js/dist/BUNDLENAME.
The customization way
If neither the full bundle nor any of the partial bundles meet your specific needs, then you should consider putting your own customized bundle together and if you want to use Webpack you'll have to follow the instructions here. The package.json file in this repo shows the minimal set of requirements to use the included webpack.config.js to bundle plotly.js for either development or production. The resulting bundle.js file is based on index.js and can be validated by opening index.html.
Usage (works with NPM or Yarn):
npm install
npm run webpack-dev #takes ~10s for a 5.9MB bundle
npm run webpack-prod #takes ~60s for a 2.2MB bundle
Explanations
Bundling with webpack requires ify-loader@1.1.0+ for the glslify, cwise, and brfs browserify transforms. Additionally, you may wish to use transform-loader to run plotly.js's custom compress_attributes transform which removes attribute descriptions from the plot schema that aren't needed to create and view plots.
Bundling for production with webpack (i.e. with the -p option) by default runs the UglifyJS plugin, which doesn't accept ES6 syntax, so the babel-loader is additionally required, as some of plotly.js' dependencies use this syntax.
Speeding up the build and reducing the bundle size
The index.js file included here loads all of plotly.js but if your application only requires a subset of plot types, you may load a partial bundle instead for faster build times and reduced bundle sizes.
For example, switching from require('plotly.js') to require('plotly.js/lib/index-basic') in index.js reduces production build times from ~60s to ~15s and bundle size from ~2.2MB to ~690kB.
License
© 2017 Plotly, Inc. MIT License.
About
Example repo for bundling plotly.js with webpack and browserify
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
8 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - hakandilek/plotly-webpack: Example repo for bundling plotly.js with webpack and browserify · GitHub
Skip to content
BranchesTags
Latest commit
History
36 Commits
Folders and files
NameName
Last commit message
Last commit date
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
index.html
index.html
index.js
index.js
package.json
package.json
webpack.config.js
webpack.config.js
Repository files navigation
Bundling plotly.js with Webpack
Note: Webpack now raises a Can't resolve 'vertx' warning, which can safely be ignored and suppressed using Webpack's IgnorePlugin like so: new webpack.IgnorePlugin(/vertx/). The root cause of this warning is that plotly.js depends on es6-promise, which tries to load vertx but gracefully falls back if it isn't present.
The easy way (recommended)
The easiest way to use plotly.js in an app bundled by webpack is just to install it via npm install plotly.js and then require() or import from 'plotly.js/dist/plotly' instead of from 'plotly.js'. Doing this will get you a complete version of plotly.js (i.e. all chart types) precompiled to browser-friendly ES5 that will work out of the box with pretty much any Webpack configuration.
If you don't want all of plotly.js because it's too big (minified it comes in over 2Mb) you can instead load a precompiled partial bundle from plotly.js/dist/BUNDLENAME.
The customization way
If neither the full bundle nor any of the partial bundles meet your specific needs, then you should consider putting your own customized bundle together and if you want to use Webpack you'll have to follow the instructions here. The package.json file in this repo shows the minimal set of requirements to use the included webpack.config.js to bundle plotly.js for either development or production. The resulting bundle.js file is based on index.js and can be validated by opening index.html.
Usage (works with NPM or Yarn):
npm install
npm run webpack-dev #takes ~10s for a 5.9MB bundle
npm run webpack-prod #takes ~60s for a 2.2MB bundle
Explanations
Bundling with webpack requires ify-loader@1.1.0+ for the glslify, cwise, and brfs browserify transforms. Additionally, you may wish to use transform-loader to run plotly.js's custom compress_attributes transform which removes attribute descriptions from the plot schema that aren't needed to create and view plots.
Bundling for production with webpack (i.e. with the -p option) by default runs the UglifyJS plugin, which doesn't accept ES6 syntax, so the babel-loader is additionally required, as some of plotly.js' dependencies use this syntax.
Speeding up the build and reducing the bundle size
The index.js file included here loads all of plotly.js but if your application only requires a subset of plot types, you may load a partial bundle instead for faster build times and reduced bundle sizes.
For example, switching from require('plotly.js') to require('plotly.js/lib/index-basic') in index.js reduces production build times from ~60s to ~15s and bundle size from ~2.2MB to ~690kB.
License
© 2017 Plotly, Inc. MIT License.
About
Example repo for bundling plotly.js with webpack and browserify
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
8 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - hakandilek/plotly-webpack: Example repo for bundling plotly.js with webpack and browserify · GitHub
Skip to content
BranchesTags
Latest commit
History
36 Commits
Folders and files
NameName
Last commit message
Last commit date
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
index.html
index.html
index.js
index.js
package.json
package.json
webpack.config.js
webpack.config.js
Repository files navigation
Bundling plotly.js with Webpack
Note: Webpack now raises a Can't resolve 'vertx' warning, which can safely be ignored and suppressed using Webpack's IgnorePlugin like so: new webpack.IgnorePlugin(/vertx/). The root cause of this warning is that plotly.js depends on es6-promise, which tries to load vertx but gracefully falls back if it isn't present.
The easy way (recommended)
The easiest way to use plotly.js in an app bundled by webpack is just to install it via npm install plotly.js and then require() or import from 'plotly.js/dist/plotly' instead of from 'plotly.js'. Doing this will get you a complete version of plotly.js (i.e. all chart types) precompiled to browser-friendly ES5 that will work out of the box with pretty much any Webpack configuration.
If you don't want all of plotly.js because it's too big (minified it comes in over 2Mb) you can instead load a precompiled partial bundle from plotly.js/dist/BUNDLENAME.
The customization way
If neither the full bundle nor any of the partial bundles meet your specific needs, then you should consider putting your own customized bundle together and if you want to use Webpack you'll have to follow the instructions here. The package.json file in this repo shows the minimal set of requirements to use the included webpack.config.js to bundle plotly.js for either development or production. The resulting bundle.js file is based on index.js and can be validated by opening index.html.
Usage (works with NPM or Yarn):
npm install
npm run webpack-dev #takes ~10s for a 5.9MB bundle
npm run webpack-prod #takes ~60s for a 2.2MB bundle
Explanations
Bundling with webpack requires ify-loader@1.1.0+ for the glslify, cwise, and brfs browserify transforms. Additionally, you may wish to use transform-loader to run plotly.js's custom compress_attributes transform which removes attribute descriptions from the plot schema that aren't needed to create and view plots.
Bundling for production with webpack (i.e. with the -p option) by default runs the UglifyJS plugin, which doesn't accept ES6 syntax, so the babel-loader is additionally required, as some of plotly.js' dependencies use this syntax.
Speeding up the build and reducing the bundle size
The index.js file included here loads all of plotly.js but if your application only requires a subset of plot types, you may load a partial bundle instead for faster build times and reduced bundle sizes.
For example, switching from require('plotly.js') to require('plotly.js/lib/index-basic') in index.js reduces production build times from ~60s to ~15s and bundle size from ~2.2MB to ~690kB.
License
© 2017 Plotly, Inc. MIT License.
About
Example repo for bundling plotly.js with webpack and browserify
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
8 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - hakandilek/plotly-webpack: Example repo for bundling plotly.js with webpack and browserify · GitHub
Skip to content
BranchesTags
Latest commit
History
36 Commits
Folders and files
NameName
Last commit message
Last commit date
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
index.html
index.html
index.js
index.js
package.json
package.json
webpack.config.js
webpack.config.js
Repository files navigation
Bundling plotly.js with Webpack
Note: Webpack now raises a Can't resolve 'vertx' warning, which can safely be ignored and suppressed using Webpack's IgnorePlugin like so: new webpack.IgnorePlugin(/vertx/). The root cause of this warning is that plotly.js depends on es6-promise, which tries to load vertx but gracefully falls back if it isn't present.
The easy way (recommended)
The easiest way to use plotly.js in an app bundled by webpack is just to install it via npm install plotly.js and then require() or import from 'plotly.js/dist/plotly' instead of from 'plotly.js'. Doing this will get you a complete version of plotly.js (i.e. all chart types) precompiled to browser-friendly ES5 that will work out of the box with pretty much any Webpack configuration.
If you don't want all of plotly.js because it's too big (minified it comes in over 2Mb) you can instead load a precompiled partial bundle from plotly.js/dist/BUNDLENAME.
The customization way
If neither the full bundle nor any of the partial bundles meet your specific needs, then you should consider putting your own customized bundle together and if you want to use Webpack you'll have to follow the instructions here. The package.json file in this repo shows the minimal set of requirements to use the included webpack.config.js to bundle plotly.js for either development or production. The resulting bundle.js file is based on index.js and can be validated by opening index.html.
Usage (works with NPM or Yarn):
npm install
npm run webpack-dev #takes ~10s for a 5.9MB bundle
npm run webpack-prod #takes ~60s for a 2.2MB bundle
Explanations
Bundling with webpack requires ify-loader@1.1.0+ for the glslify, cwise, and brfs browserify transforms. Additionally, you may wish to use transform-loader to run plotly.js's custom compress_attributes transform which removes attribute descriptions from the plot schema that aren't needed to create and view plots.
Bundling for production with webpack (i.e. with the -p option) by default runs the UglifyJS plugin, which doesn't accept ES6 syntax, so the babel-loader is additionally required, as some of plotly.js' dependencies use this syntax.
Speeding up the build and reducing the bundle size
The index.js file included here loads all of plotly.js but if your application only requires a subset of plot types, you may load a partial bundle instead for faster build times and reduced bundle sizes.
For example, switching from require('plotly.js') to require('plotly.js/lib/index-basic') in index.js reduces production build times from ~60s to ~15s and bundle size from ~2.2MB to ~690kB.
License
© 2017 Plotly, Inc. MIT License.
About
Example repo for bundling plotly.js with webpack and browserify
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
8 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - hakandilek/plotly-webpack: Example repo for bundling plotly.js with webpack and browserify · GitHub
Skip to content
BranchesTags
Latest commit
History
36 Commits
Folders and files
NameName
Last commit message
Last commit date
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
index.html
index.html
index.js
index.js
package.json
package.json
webpack.config.js
webpack.config.js
Repository files navigation
Bundling plotly.js with Webpack
Note: Webpack now raises a Can't resolve 'vertx' warning, which can safely be ignored and suppressed using Webpack's IgnorePlugin like so: new webpack.IgnorePlugin(/vertx/). The root cause of this warning is that plotly.js depends on es6-promise, which tries to load vertx but gracefully falls back if it isn't present.
The easy way (recommended)
The easiest way to use plotly.js in an app bundled by webpack is just to install it via npm install plotly.js and then require() or import from 'plotly.js/dist/plotly' instead of from 'plotly.js'. Doing this will get you a complete version of plotly.js (i.e. all chart types) precompiled to browser-friendly ES5 that will work out of the box with pretty much any Webpack configuration.
If you don't want all of plotly.js because it's too big (minified it comes in over 2Mb) you can instead load a precompiled partial bundle from plotly.js/dist/BUNDLENAME.
The customization way
If neither the full bundle nor any of the partial bundles meet your specific needs, then you should consider putting your own customized bundle together and if you want to use Webpack you'll have to follow the instructions here. The package.json file in this repo shows the minimal set of requirements to use the included webpack.config.js to bundle plotly.js for either development or production. The resulting bundle.js file is based on index.js and can be validated by opening index.html.
Usage (works with NPM or Yarn):
npm install
npm run webpack-dev #takes ~10s for a 5.9MB bundle
npm run webpack-prod #takes ~60s for a 2.2MB bundle
Explanations
Bundling with webpack requires ify-loader@1.1.0+ for the glslify, cwise, and brfs browserify transforms. Additionally, you may wish to use transform-loader to run plotly.js's custom compress_attributes transform which removes attribute descriptions from the plot schema that aren't needed to create and view plots.
Bundling for production with webpack (i.e. with the -p option) by default runs the UglifyJS plugin, which doesn't accept ES6 syntax, so the babel-loader is additionally required, as some of plotly.js' dependencies use this syntax.
Speeding up the build and reducing the bundle size
The index.js file included here loads all of plotly.js but if your application only requires a subset of plot types, you may load a partial bundle instead for faster build times and reduced bundle sizes.
For example, switching from require('plotly.js') to require('plotly.js/lib/index-basic') in index.js reduces production build times from ~60s to ~15s and bundle size from ~2.2MB to ~690kB.
License
© 2017 Plotly, Inc. MIT License.
About
Example repo for bundling plotly.js with webpack and browserify
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
1 watching
Forks
8 forks
Report repository
Releases
Packages
Contributors
Languages