Loading...
More JavaScript Posts
const rectSize = 15; // Size of the color boxconst spacing = 5; // Space between legend itemslet legend = canvas.append('g').attr('class','chart-legend').attr('transform', `translate(${0}, ${height + 3})`);// Sample data for the legendconst legendData = [{ label: 'low', color: '#1f77b4' },{ label: 'medium', color: '#ff7f0e' },{ label: 'high', color: '#2ca02c' },{ label: 'very high', color: '#2ca02c' }];legend.selectAll('g').data(legendData).join('g').attr('class', 'legend-item').each(function (d, i) {const legendItem = d3.select(this);console.log(d.label)console.log(d.label?.length)let labelWidth = (d.label.length * 5) + 7 + 15var bbox = legendItem.node().getBBox()var width = bbox.widthconsole.log(width)// Add rectangle for colorlegendItem.append('rect').attr('width', rectSize).attr('height', rectSize).attr('fill', d.color);// Add labellegendItem.append('text').attr('x', rectSize + spacing) // Position text to the right of the rectangle.attr('y', rectSize / 2) // Align text vertically with the rectangle.attr('dy', '.35em') // Adjust vertical alignment.attr('text-anchor', 'start') // Align text to the start.text(d.label).attr('fill', 'black'); // Optional: Text color// legendItem.attr('transform', `translate(${i * (rectSize + spacing + labelWidth)}, 0)`) // Position each item horizontally});const legendItems_spacing = 12var legendLength = 0legend.selectAll('.legend-item').each(function(d,i) {d3.select(this).attr('transform',function() {var bbox = d3.select(this).node().getBBox()var width = bbox.width// if (width == 0) width = (d.text.length * 5) +15 // not in dom yetlet startingPosition = 0if (i > 0) {startingPosition = legendLength}legendLength += width + legendItems_spacing// return `translate(${xx - (width + 30)},0$)`return `translate(${startingPosition},0)`})})
const getTimezone = () => Intl.DateTimeFormat().resolvedOptions().timeZone;// ExamplegetTimezone();
const euclideanDistance = (a, b) =>Math.hypot(...Object.keys(a).map(k => b[k] - a[k]));euclideanDistance([1, 1], [2, 3]); // ~2.2361euclideanDistance([1, 1, 1], [2, 3, 2]); // ~2.4495
const gcd = (...arr) => {const _gcd = (x, y) => (!y ? x : gcd(y, x % y));return [...arr].reduce((a, b) => _gcd(a, b));};gcd(8, 36); // 4gcd(...[12, 8, 32]); // 4
import { configureStore } from "@reduxjs/toolkit";import { combineReducers } from "redux";import profile from "./profile";import auth from "./auth";import alert from "./alert";const reducer = combineReducers({profile,auth,alert,});const store = configureStore({ reducer });export default store;
// `arr` is an arrayconst clone = arr => arr.slice(0);// Orconst clone = arr => [...arr];// Orconst clone = arr => Array.from(arr);// Orconst clone = arr => arr.map(x => x);// Orconst clone = arr => JSON.parse(JSON.stringify(arr));// Orconst clone = arr => arr.concat([]);