Skip to main content

Generate a random HEX color

Nov 18, 2022AustinLeath
Loading...

More JavaScript Posts

Redux Setup

Mar 11, 2021C S

0 likes • 0 views

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;

Redux Slice

Mar 11, 2021C S

1 like • 0 views

import { createSlice } from "@reduxjs/toolkit";
const alert = createSlice({
name: "alert",
initialState: {
msg: "",
status: "",
},
reducers: {
set_alert: (state, action) => {
return {
...state,
msg: action.payload.msg,
status: action.payload.status,
};
},
clear_alert: (state, action) => {
return {
...state,
msg: "",
status: "",
};
},
},
});
export default alert.reducer;
const { set_alert, clear_alert } = alert.actions;
export const setAlert = (msg, status) => dispatch => {
dispatch(set_alert({ msg, status }));
setTimeout(() => dispatch(clear_alert()), 4000);
};
export const clearAlert = () => dispatch => {
dispatch(clear_alert());
};

Subsets of an array

Nov 19, 2022CodeCatch

0 likes • 2 views

const getSubsets = arr => arr.reduce((prev, curr) => prev.concat(prev.map(k => k.concat(curr))), [[]]);
// Examples
getSubsets([1, 2]); // [[], [1], [2], [1, 2]]
getSubsets([1, 2, 3]); // [[], [1], [2], [1, 2], [3], [1, 3], [2, 3], [1, 2, 3]]

arithmetic progression

Nov 19, 2022CodeCatch

0 likes • 2 views

const arithmeticProgression = (n, lim) =>
Array.from({ length: Math.ceil(lim / n) }, (_, i) => (i + 1) * n );
arithmeticProgression(5, 25); // [5, 10, 15, 20, 25]

Horizontal legend (d3.js)

Dec 17, 2024shaiRos

0 likes • 2 views

const rectSize = 15; // Size of the color box
const spacing = 5; // Space between legend items
let legend = canvas.append('g').attr('class','chart-legend')
.attr('transform', `translate(${0}, ${height + 3})`);
// Sample data for the legend
const 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 + 15
var bbox = legendItem.node().getBBox()
var width = bbox.width
console.log(width)
// Add rectangle for color
legendItem.append('rect')
.attr('width', rectSize)
.attr('height', rectSize)
.attr('fill', d.color);
// Add label
legendItem.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 = 12
var legendLength = 0
legend.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 yet
let startingPosition = 0
if (i > 0) {
startingPosition = legendLength
}
legendLength += width + legendItems_spacing
// return `translate(${xx - (width + 30)},0$)`
return `translate(${startingPosition},0)`
})
})

getSelectedText

Nov 18, 2022AustinLeath

0 likes • 0 views

// Get the text that the user has selected
const getSelectedText = () => window.getSelection().toString();
getSelectedText();