☰

Graphing Plugin

Library for Calculator (Graphing)

Fra og med 10.08.2024. Se den nyeste version.

Dette script bør ikke installeres direkte. Det er et bibliotek, som andre scripts kan inkludere med metadirektivet // @require https://update.greatest.deepsurf.us/scripts/503150/1425281/Graphing%20Plugin.js 

// ==UserScript==
// @name         Graphing Plugin
// @namespace    https://greatest.deepsurf.us/en/users/1291009
// @author       BadOrBest
// @license      MIT
// @version      1.2
// @match        *://*/*
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_deleteValue
// @grant        GM_registerMenuCommand
// @grant        GM.registerMenuCommand
// @require      https://cdnjs.cloudflare.com/ajax/libs/mathjs/13.0.3/math.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js
// ==/UserScript==

(function() {
    'use strict';

    let chartInstance = null;

    // Function to initialize or update the graph
    function updateGraph() {
        const graphData = GM_getValue('graphData', []);
        const ctx = document.getElementById('graphCanvas').getContext('2d');

        if (chartInstance) {
            chartInstance.destroy();
        }

        chartInstance = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: graphData.map(data => ({
                    label: data.label,
                    data: data.points,
                    borderColor: data.color || 'blue',
                    borderWidth: 1,
                    fill: false
                }))
            },
            options: {
                scales: {
                    x: {
                        type: 'linear',
                        position: 'bottom'
                    }
                }
            }
        });
    }

    // Function to toggle the graph display
    function toggleGraph() {
        let canvas = document.getElementById('graphCanvas');
        if (!canvas) {
            canvas = document.createElement('canvas');
            canvas.id = 'graphCanvas';
            canvas.style.position = 'fixed';
            canvas.style.bottom = '0';
            canvas.style.right = '0';
            canvas.style.zIndex = '9999';
            document.body.appendChild(canvas);
        } else {
            canvas.style.display = canvas.style.display === 'none' ? 'block' : 'none';
            if (canvas.style.display === 'block') {
                updateGraph();
            }
        }
    }

    // Function to clear the graph data
    function clearGraph() {
        GM_setValue('graphData', []);
        const canvas = document.getElementById('graphCanvas');
        if (canvas) {
            canvas.style.display = 'none';
        }
        if (chartInstance) {
            chartInstance.destroy();
            chartInstance = null;
        }
    }

    // Function to process user input and update graph data
    function addGraphData() {
        const expression = prompt('Enter a mathematical expression (e.g., y=x^2):');
        if (expression) {
            const xValues = Array.from({ length: 100 }, (_, i) => i - 50); // X values from -50 to 50
            const yValues = xValues.map(x => math.evaluate(expression.replace(/x/g, x))); // Evaluate expression

            const newGraphData = GM_getValue('graphData', []);
            newGraphData.push({
                label: `Graph ${newGraphData.length + 1}`,
                points: xValues.map((x, i) => ({ x, y: yValues[i] }))
            });

            GM_setValue('graphData', newGraphData);
            updateGraph();
        }
    }

    // Register menu commands for graphing actions
    GM_registerMenuCommand('Clear Graph', clearGraph);
    GM_registerMenuCommand('Add Graph Data', addGraphData);

    // Listen for custom events to control the graph
    window.addEventListener('graphControlEvent', (event) => {
        const { action } = event.detail;
        if (action === 'toggle') {
            toggleGraph();
        }
    });

    // Initialize or update the graph display if needed
    if (GM_getValue('graphData', []).length > 0) {
        updateGraph();
    }
})();