Loading...
More JavaScript Posts
const dragAndDropDiv = editor.container;dragAndDropDiv.addEventListener('dragover', function(e) {e.stopPropagation();e.preventDefault();e.dataTransfer.dropEffect = 'copy';});dragAndDropDiv.addEventListener("drop",function(e){// Prevent default behavior (Prevent file from being opened)e.stopPropagation();e.preventDefault();const files = e.dataTransfer.items; // Array of all filesconsole.assert(files.length >= 1);if (files[0].kind === 'file') {var file = e.dataTransfer.items[0].getAsFile();const fileSize = file.size;const fileName = file.name;const fileMimeType = file.type;reader = new FileReader();reader.onloadend = function(){editor.setValue(reader.result);}reader.readAsText(file);}else{//Maybe handle if text is droppedconsole.log(files[0].kind);}});
const union = (...arr) => [...new Set(arr.flat())];// Exampleunion([1, 2], [2, 3], [3]); // [1, 2, 3]
/*** @param {number[]} nums* @return {boolean}*/var containsDuplicate = function(nums) {return new Set(nums).size !== nums.length};
const head = arr => (arr && arr.length ? arr[0] : undefined);head([1, 2, 3]); // 1head([]); // undefinedhead(null); // undefinedhead(undefined); // undefined
const copyToClipboard = str => {const el = document.createElement('textarea');el.value = str;el.setAttribute('readonly', '');el.style.position = 'absolute';el.style.left = '-9999px';document.body.appendChild(el);const selected =document.getSelection().rangeCount > 0? document.getSelection().getRangeAt(0): false;el.select();document.execCommand('copy');document.body.removeChild(el);if (selected) {document.getSelection().removeAllRanges();document.getSelection().addRange(selected);}};copyToClipboard('Lorem ipsum'); // 'Lorem ipsum' copied to clipboard.
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)`})})