Loading...
More JavaScript Posts
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;
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());};
const getSubsets = arr => arr.reduce((prev, curr) => prev.concat(prev.map(k => k.concat(curr))), [[]]);// ExamplesgetSubsets([1, 2]); // [[], [1], [2], [1, 2]]getSubsets([1, 2, 3]); // [[], [1], [2], [1, 2], [3], [1, 3], [2, 3], [1, 2, 3]]
const arithmeticProgression = (n, lim) =>Array.from({ length: Math.ceil(lim / n) }, (_, i) => (i + 1) * n );arithmeticProgression(5, 25); // [5, 10, 15, 20, 25]
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)`})})
// Get the text that the user has selectedconst getSelectedText = () => window.getSelection().toString();getSelectedText();