### Set up Environment for Image Baseline Generation without Docker Source: https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md Installs required fonts and tools using the setup script. Ensure Python 3.12+ and uv are installed beforehand. ```bash bash .github/scripts/env_image.sh ``` -------------------------------- ### Start Development Server Source: https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md Start the development server, which bundles source files and opens a test dashboard in your browser. This provides a live environment for developing and testing changes. ```bash npm start ``` -------------------------------- ### Install Dependencies Source: https://github.com/plotly/plotly.js/blob/master/CUSTOM_BUNDLE.md Navigate to the cloned `plotly.js` directory and install its dependencies using npm. ```sh cd plotly.js npm i ``` -------------------------------- ### Setup Test Environment Source: https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md Prepare the test environment by running the pretest script. This step is crucial for ensuring all necessary configurations are in place before running tests. ```bash npm run pretest ``` -------------------------------- ### Create Combined Custom Bundle Example Source: https://github.com/plotly/plotly.js/blob/master/CUSTOM_BUNDLE.md This example demonstrates using multiple options together to create an unminified custom bundle named `myScatters` including `scatter`, `scattergl`, and `scatter3d` traces. ```sh npm run custom-bundle -- \ --unminified \ --out myScatters \ --traces scatter,scattergl,scatter3d \ ``` ```sh npm run custom-bundle -- --unminified --out myScatters --traces scatter,scattergl,scatter3d ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md Install all necessary project dependencies using npm. This command ensures that the 'package-lock.json' file is used and updated correctly. ```bash npm install ``` -------------------------------- ### Set up Environment for Image Baseline Generation with Docker Source: https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md Installs Python, uv, and necessary environment scripts inside a Docker container for generating image baselines. ```sh docker run -it -v "$(pwd)":/plotly.js python:3.12 bash # Then inside the container cd /plotly.js pip install uv bash .github/scripts/env_image.sh ``` -------------------------------- ### Install Plotly.js Distribution Source: https://github.com/plotly/plotly.js/blob/master/README.md Install the minified Plotly.js distribution using npm for use in Node.js projects. ```sh npm i --save plotly.js-dist-min ``` -------------------------------- ### Create Custom Bundle with Specific Traces Source: https://github.com/plotly/plotly.js/blob/master/CUSTOM_BUNDLE.md Use the `traces` option to specify which trace types to include in the bundle. For example, to include `scatter`, `scattergl`, and `scatter3d`. ```sh npm run custom-bundle -- --traces scatter,scattergl,scatter3d ``` -------------------------------- ### Generate Image Baselines Source: https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md Use Python or npm scripts to generate or update image baselines for specified mocks. Ensure the latest code is bundled by running 'npm run watch' or 'npm start' in a separate tab. ```bash python3 test/image/make_baseline.py = mock_1 mock_2 ``` ```bash npm run baseline mock_1 mock_2 ``` ```bash npm run baseline mock_* ``` ```bash python3 test/image/make_baseline.py = mockFilename1 mockFilename2 ``` -------------------------------- ### Configure Webpack for Plotly.js in Angular CLI Source: https://github.com/plotly/plotly.js/blob/master/BUILDING.md This configuration is used within an Angular CLI project to enable the 'ify-loader' for Plotly.js. Ensure 'ify-loader' is installed. ```javascript module.exports = { module: { rules: [ { test: /\.js$/, include: [ path.resolve(__dirname, "node_modules/plotly.js") ], loader: 'ify-loader' } ] }, }; ``` -------------------------------- ### Create Default Custom Bundle Source: https://github.com/plotly/plotly.js/blob/master/CUSTOM_BUNDLE.md Run this command to create a custom bundle including all default traces. ```sh npm run custom-bundle ``` -------------------------------- ### Switch to Development Branch Source: https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md Create and switch to a new development branch for your changes. Avoid using 'master' or 'main' for development. ```bash # please do not use master or main for your dev branch git checkout dev-branch-name ``` -------------------------------- ### Configure MathJax Startup with SVG Output Source: https://github.com/plotly/plotly.js/blob/master/devtools/test_dashboard/index-mathjax3.html Configure MathJax to initialize with specific DOM elements and set the output format to SVG. Ensure MathJax is loaded before this script runs. ```javascript window.MathJax = { startup: { elements: [ document.getElementById('pWithMathJax') ], // typeset: false, // in case the elements array is empty one could disable startup typeset // https://docs.mathjax.org/en/latest/options/startup/startup.html#the-configuration-block } }; ``` -------------------------------- ### Switch to a Different Version Source: https://github.com/plotly/plotly.js/blob/master/CUSTOM_BUNDLE.md If you have already cloned the repository, use these commands to fetch and checkout a different version. ```sh git fetch git checkout ``` -------------------------------- ### Create Custom Bundle with Custom Output Filename Source: https://github.com/plotly/plotly.js/blob/master/CUSTOM_BUNDLE.md Use the `out` option to specify a custom filename for the bundle. The bundle will be created in the `dist/` directory. ```sh npm run custom-bundle -- --out myBundleName ``` -------------------------------- ### Create Unminified Custom Bundle Source: https://github.com/plotly/plotly.js/blob/master/CUSTOM_BUNDLE.md Use the `unminified` option to disable compression and create an unminified bundle. ```sh npm run custom-bundle -- --unminified ``` -------------------------------- ### Load Virtual-WebGL for Multiple WebGL Graphs Source: https://github.com/plotly/plotly.js/blob/master/README.md Include the virtual-webgl script to support multiple WebGL graphs on a single page, compatible with WebGL 1. ```html ``` -------------------------------- ### Create Custom Bundle with Strict Trace Types Source: https://github.com/plotly/plotly.js/blob/master/CUSTOM_BUNDLE.md The `strict` option enforces strict trace types where possible. Combine it with the `traces` option to specify the desired traces. ```sh npm run custom-bundle -- --traces scatter,scattergl --strict ``` -------------------------------- ### Clone Plotly.js Repository Source: https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md Clone the Plotly.js repository to your local machine. Ensure you replace '' with your actual GitHub username. After cloning, navigate into the created directory. ```bash git clone --depth 1 git@github.com:/plotly.js.git cd plotly.js ``` -------------------------------- ### Clone Plotly.js Repository Source: https://github.com/plotly/plotly.js/blob/master/CUSTOM_BUNDLE.md Clone the Plotly.js repository to create a custom bundle. Replace `` with a specific tag from the repository. ```sh git clone --branch https://github.com/plotly/plotly.js.git ``` -------------------------------- ### Configure MathJax v3 for SVG Output in Plotly.js Source: https://github.com/plotly/plotly.js/blob/master/devtools/test_dashboard/index-mathjax3chtml.html This configuration loads MathJax v3 with 'chtml' output for the page and 'svg' output for Plotly.js graphs. It customizes the startup process to define a `tex2svg` method for converting LaTeX to SVG. Ensure MathJax is loaded before this script. ```javascript window.MathJax = window.MathJax || { // see https://github.com/mathjax/MathJax/issues/2705#issuecomment-859742446 loader: { load: ['output/svg'] }, startup: { ready() { // Get the MathJax modules that we need. const { mathjax } = MathJax._.mathjax; const { SVG } = MathJax._.output.svg_ts; // Do the normal setup MathJax.startup.defaultReady(); // Create an SVG output jax and a new MathDocument that uses it. const svgOutput = new SVG(MathJax.config.svg); const svgDocument = mathjax.document(document, { ...MathJax.config.options, InputJax: MathJax.startup.input, OutputJax: svgOutput }); // Define the SVG-based conversion methods MathJax.tex2svg = (math, options = {}) => { options.format = svgDocument.inputJax[0].name; return svgDocument.convert(math, options); }; /* MathJax.tex2svgPromise = (math, options = {}) => { options.format = svgDocument.inputJax[0].name; return mathjax.handleRetriesFor(() => svgDocument.convert(math, options)); }; */ MathJax.svgStylesheet = () => svgOutput.styleSheet(svgDocument); } } }; ``` -------------------------------- ### Test Mocks for New Attributes Source: https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md Run 'npm run test-mock' to validate attributes used in new mocks or after implementing new attributes. ```bash npm run test-mock ``` ```bash npm run test-mock mock_name(s) ``` -------------------------------- ### Load MathJax Version 2 Source: https://github.com/plotly/plotly.js/blob/master/README.md Include MathJax version 2 in an HTML page for rendering mathematical equations. ```html ``` -------------------------------- ### Run Jasmine Tests Locally Source: https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md Execute Jasmine tests in a browser using Karma. Use arguments to specify test suites or disable auto-watch mode. ```bash npm run test-jasmine ``` ```bash npm run test-jasmine -- ``` ```bash npm run test-jasmine -- bar axes scatter ``` ```bash npm run test-jasmine -- --nowatch ``` ```bash npm run test-jasmine -- --verbose ``` ```bash npm run test-jasmine -- --help ``` ```bash npm run test-jasmine -- --info ``` -------------------------------- ### Load MathJax Version 3 Source: https://github.com/plotly/plotly.js/blob/master/README.md Include MathJax version 3 in an HTML page for rendering mathematical equations, using the tex-svg configuration. ```html ``` -------------------------------- ### Load Un-minified Plotly.js from CDN Source: https://github.com/plotly/plotly.js/blob/master/README.md Load the un-minified version of Plotly.js from a CDN, specifying the charset for UTF-8 compatibility. ```html ``` -------------------------------- ### Include Plotly.js (Minified) Source: https://github.com/plotly/plotly.js/blob/master/dist/README.md Use this snippet to include the minified version of the Plotly.js library in your HTML. ```html ``` -------------------------------- ### Regenerate REGL Shaders Locally Source: https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md Use this command to clean up old shader files and regenerate precompiled REGL shaders locally. This is necessary when making changes to REGL shaders or features that use them. ```bash rm -rf src/generated/regl-codegen/* npm run regl-codegen ``` -------------------------------- ### Load Plotly.js with ES6 Import in Script Tag Source: https://github.com/plotly/plotly.js/blob/master/README.md Use native ES6 import syntax within a script tag to load Plotly.js from a CDN. ```html ``` -------------------------------- ### Import Plotly.js in Node.js Source: https://github.com/plotly/plotly.js/blob/master/README.md Import the Plotly.js library in Node.js environments using either ES6 modules or CommonJS. ```js // ES6 module import Plotly from 'plotly.js-dist-min' // CommonJS var Plotly = require('plotly.js-dist-min') ``` -------------------------------- ### Include Plotly.js (Un-minified) Source: https://github.com/plotly/plotly.js/blob/master/dist/README.md Use this snippet to include the un-minified version of the Plotly.js library in your HTML for debugging or development. ```html ``` -------------------------------- ### Write Jasmine Interaction Tests Source: https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md Create reliable interaction tests by fixing plot dimensions, margins, and axis ranges. Coordinates are relative to the top-left corner of the plot. ```js Plotly.newPlot(gd, [{ x: [1, 1, 1, 2, 2, 2, 3, 3, 3], y: [1, 2, 3, 1, 2, 3, 1, 2, 3], mode: 'markers' }], { width: 400, height: 400, margin: {l: 100, r: 100, t: 100, b: 100}, xaxis: {range: [0, 4]}, yaxis: {range: [0, 4]} }); ``` -------------------------------- ### Include and Set Localization Source: https://github.com/plotly/plotly.js/blob/master/dist/README.md Load a specific locale file and set it as the default for all Plotly plots. Ensure the locale file is placed after the main plotly.js script. ```html ``` -------------------------------- ### Load Plotly.js via Script Tag Source: https://github.com/plotly/plotly.js/blob/master/README.md Include Plotly.js in an HTML page using a script tag from a CDN to draw an interactive figure. ```html
``` -------------------------------- ### Set Locale for a Specific Plot Source: https://github.com/plotly/plotly.js/blob/master/dist/README.md Apply a specific locale to an individual plot by passing it in the configuration object during plot creation. This allows for different locales across multiple plots. ```javascript Plotly.newPlot(graphDiv, data, layout, {locale: 'de-CH'}) ``` -------------------------------- ### Regenerate Plot Schema Source: https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md After making changes, regenerate the plot schema in the 'test' folder. This command is used to update the schema file that records proposed API changes. ```bash npm run schema ``` -------------------------------- ### Update angular.json for Custom Webpack Configuration Source: https://github.com/plotly/plotly.js/blob/master/BUILDING.md Modify your angular.json file to use the custom-webpack builder and specify the path to your custom webpack configuration file. This ensures the build process incorporates the Plotly.js loader. ```json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "MY_PROJECT_NAME": { "root": "", "sourceRoot": "src", "projectType": "application", "prefix": "app", "schematics": { "@schematics/angular:component": { "styleext": "scss" } }, "architect": { "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { .... "customWebpackConfig": { "path": "./extra-webpack.config.js", "replaceDuplicatePlugins": true, "mergeStrategies": {"module.rules": "merge"} } } } ... } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.