Code Refactoring and Cleanup

2025-03-17 09:12 UTC o3-mini-high Open in ChatGPT ↗

You

Clean up this code where needed. Praise the quality where there is one. Gather all properties at the top as constants

import { calculateYDomain, calculateXDomain } from ’./plotUtils.js’;

// Create the plot configuration // Constants const PLOT_HEIGHT = 300; // Default plot height const X_AXIS_TICKS = 24; // Number of X-axis ticks const MARGINS = { left: 40, right: 40, top:40, bottom: 5 }; // Margins for the plot const FRAME_STROKE_WIDTH = 2; const DATA_STROKE_WIDTH = 0.75; const POINT_SIZE = 0.5;

// Helper to get line curve type function getCurveType(smoothCurve) { return smoothCurve ? d3.curveMonotoneX : d3.curveLinear; }

// Helper to format the crosshair title function formatCrosshairTitle(d, column) { return Time: ${d3.timeFormat("%Y-%m-%d %H:%M")(d.time)}\nValue: ${d[column].toFixed(2)}; }

/**

• Creates a collapsible plot with a title for a given dataset and renders the plot using a provided plotting function.

• The plot can be expanded or collapsed by clicking on its title.

• @param {HTMLElement} container - The parent container element where the collapsible plot will be appended.

• @param {Array} data - The dataset to be plotted.

• @param {string} column - The column or identifier for which the plot should be generated.

• @param {boolean} [smoothCurve=true] - A flag indicating whether to apply smoothing to the curve in the generated plot.

• @param {Function} plotFunction - A callback function used to render the actual plot inside the chart area.

•                               The function is expected to accept four arguments: the chart container,

•                               data, column, and the smoothCurve flag.

• @return {void} This function does not return any value. */ export function createCollapsiblePlot(container, data, column, smoothCurve = true, enablePoints = true, enableRegression = true, plotFunction) {

  // Create a container for the plot const plotContainer = container; //document.createElement(“div”); // plotContainer.className = “plot-container”; // plotContainer.style.marginBottom = “20px”;

  // Add a title for the plot (clickable for expand/collapse) const plotTitle = document.createElement(“h3”); plotTitle.textContent = ${column}; plotTitle.style.cursor = “pointer”; // Indicate the title is clickable plotTitle.style.marginBottom = “5px”; plotTitle.style.userSelect = “none”; // Disable text selection on click plotTitle.style.marginLeft = “10px”; plotTitle.style.borderBottom = “1px solid black”; // Add a div for the chart itself const chartDiv = document.createElement(“div”); // chartDiv.className = “chart-area”; chartDiv.id = chart-${column}; chartDiv.style.display = “block”; // Initially visible

  // Append the title and chart div to the container plotContainer.appendChild(plotTitle); plotContainer.appendChild(chartDiv);

  // Append the whole plot container to the main chart container // container.appendChild(plotContainer); // // Add click event listener to the title for expand/collapse functionality plotTitle.addEventListener(“click”, () => { if (chartDiv.style.display === “none”) { chartDiv.style.display = “block”; // Show the chart } else { chartDiv.style.display = “none”; // Hide the chart } });

  // Call the provided plotFunction to render the chart inside the chartDiv plotFunction(chartDiv,data,column,smoothCurve, enablePoints, enableRegression); }

function linearRegression(data, xAccessor, yAccessor) { const n = data.length; const sumX = data.reduce((acc, d) => acc + xAccessor(d), 0); const sumY = data.reduce((acc, d) => acc + yAccessor(d), 0); const sumXY = data.reduce((acc, d) => acc + xAccessor(d) * yAccessor(d), 0); const sumXX = data.reduce((acc, d) => acc + xAccessor(d) ** 2, 0);

const slope = (n * sumXY - sumX * sumY) / (n * sumXX - sumX ** 2);
const intercept = (sumY - slope * sumX) / n;

return { slope, intercept };

}

// Function to create an individual plot /**

• Creates and renders a plot visualization inside the specified container based on the provided data and configurations.

• @param {HTMLElement} container - The DOM element where the plot will be rendered.

• @param {Array