☰

Graphing Plugin

A library for adding and managing graphs on any webpage.

Verzia zo dňa 10.08.2024. Pozri najnovšiu verziu.

Tento skript by nemal byť nainštalovaný priamo. Je to knižnica pre ďalšie skripty, ktorú by mali používať cez meta príkaz // @require https://update.greatest.deepsurf.us/scripts/503150/1425743/Graphing%20Plugin.js 

// ==UserScript==
// @name         Graphing Plugin
// @namespace    https://greatest.deepsurf.us/en/users/1291009
// @author       BadOrBest
// @license      MIT
// @version      1.3
// @description  A library for adding and managing graphs on any webpage.
// @grant        none
// @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(global) {
    'use strict';

    // Expose the library to the global scope
    global.GraphingLibrary = {
        chartInstance: null,

        // Initialize or update the graph
        updateGraph: function() {
            const graphData = JSON.parse(localStorage.getItem('graphData') || '[]');
            let canvas = document.getElementById('graphCanvas');
            if (!canvas) {
                console.error('Graph canvas not found.');
                return;
            }
            const ctx = canvas.getContext('2d');

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

            this.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'
                        }
                    }
                }
            });
        },

        // Toggle the graph display
        toggleGraph: function() {
            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';
                canvas.style.width = '600px'; // Set canvas width
                canvas.style.height = '400px'; // Set canvas height
                document.body.appendChild(canvas);
            }
            canvas.style.display = canvas.style.display === 'none' ? 'block' : 'none';
            if (canvas.style.display === 'block') {
                this.updateGraph();
            }
        },

        // Clear the graph data
        clearGraph: function() {
            localStorage.setItem('graphData', JSON.stringify([]));
            const canvas = document.getElementById('graphCanvas');
            if (canvas) {
                canvas.style.display = 'none';
            }
            if (this.chartInstance) {
                this.chartInstance.destroy();
                this.chartInstance = null;
            }
        },

        // Add graph data
        addGraphData: function(expression) {
            if (expression) {
                try {
                    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 = JSON.parse(localStorage.getItem('graphData') || '[]');
                    newGraphData.push({
                        label: `Graph ${newGraphData.length + 1}`,
                        points: xValues.map((x, i) => ({ x, y: yValues[i] }))
                    });

                    localStorage.setItem('graphData', JSON.stringify(newGraphData));
                    this.updateGraph();
                } catch (error) {
                    alert('Error evaluating expression: ' + error.message);
                }
            }
        }
    };

    // Initialize or update the graph display if needed
    if (JSON.parse(localStorage.getItem('graphData') || '[]').length > 0) {
        GraphingLibrary.toggleGraph();
    }

})(window);