function merge($arrs, $idKey, ...$sumKeys) {
$result = [];
foreach (array_merge(...$arrs) as $n) {
$id = $n[$idKey];
$result[$id] ??= array_merge($n, array_combine($sumKeys, array_fill(0, count($sumKeys), 0)));
foreach ($sumKeys as $k) {
$result[$id][$k] += $n[$k];
}
}
return array_values($result);
}
$result = merge($dates1, 'date', 'qty');
function groupValues(arr, defaultValue = null) {
const keys = [...new Set(arr.flatMap(Object.keys))];
return arr.reduce((acc, n) => {
keys.forEach(k => acc[k].push(Object.hasOwn(n, k) ? n[k] : defaultValue));
return acc;
}, Object.fromEntries(keys.map(k => [ k, [] ])));
}
const result = groupValues(arr);
const groupValues = (arr, defaultValue = null) =>
arr.reduce((acc, n, i, a) => (
Object
.keys(n)
.forEach(k => (acc[k] ??= Array(a.length).fill(defaultValue))[i] = n[k]),
acc
), {});
<select>
<template v-for="n in options">
<option>
<slot name="option" :option="n">{{ n }}</slot>
</option>
</template>
</select>
<v-select :options="countries">
<template #option="{ option }">{{ option.name }}</template>
</v-select>
// это массив ваших "точек"
const locations = [
{ lat: ..., lng: ... },
{ lat: ..., lng: ... },
...
];
const onLoad = map => {
const bounds = new window.google.maps.LatLngBounds();
locations.forEach(n => bounds.extend(n));
map.fitBounds(bounds);
};
<GoogleMap
onLoad={onLoad}
...
>
{locations.map(n => <Marker position={n} />)}
</GoogleMap>
vue3-mq
this.$mq
$mq has been removed as a global property and must now be injected into components that require it
const createTopic = () => ({
text: '',
subtopics: [ createSubTopic() ],
});
const createSubTopic = () => ({
text: '',
});
const topics = reactive([ createTopic() ]);
<div v-for="(topic, iTopic) in topics">
<div>
<div>
Topic #{{ iTopic + 1 }}:
<input v-model="topic.text">
</div>
<div v-for="(subtopic, iSubtopic) in topic.subtopics">
Subtopic #{{ iTopic + 1 }}.{{ iSubtopic + 1 }}:
<input v-model="subtopic.text">
<button v-if="iSubtopic" @click="topic.subtopics.splice(iSubtopic, 1)">x</button>
</div>
</div>
<button @click="topic.subtopics.push(createSubTopic())">Add subtopic</button>
</div>
<button @click="topics.push(createTopic())">Add topic</button>
const [ items, setItems ] = useState([]);
const [ src, setSrc ] = useState('');
const onChange = e => {
setSrc(e.target.value);
};
const onClick = () => {
setSrc('');
setItems([
...items,
{
id: 1 + Math.max(0, ...items.map(n => n.id)),
src,
},
]);
};
const onSortEnd = (iOld, iNew) => {
setItems(([...items]) => (
items.splice(iNew, 0, items.splice(iOld, 1)[0]),
items
));
};
<div>
<input value={src} onChange={onChange} />
<button onClick={onClick}>add</button>
</div>
<SortableList onSortEnd={onSortEnd}>
{items.map(n => (
<SortableItem key={n.id}>
<img src={n.src} />
</SortableItem>
))}
</SortableList>
from collections import Counter
def how_many_times_can_word_be_made_from_string(word, string):
count_w = Counter(word)
count_s = Counter(string)
return min(count_s[k] // v for k, v in count_w.items())
const classContainer = 'selectboxss';
const classOption = 'selectoption';
const getClasses = el => [...el.classList].filter(n => n !== classOption);
//const getClass = el => el.className.match(RegExp(`${classOption}-\\d+`))[0];
document.addEventListener('click', ({ target: t }) => {
if (t.classList.contains(classOption)) {
const container = t.closest(`.${classContainer}`);
const { classList } = container;
classList.remove(...[...container.querySelectorAll(`.${classOption}`)].flatMap(getClasses));
classList.add(...getClasses(t));
//classList.remove(...Array.from(container.querySelectorAll(`.${classOption}`), getClass));
//classList.add(getClass(t));
}
});
scatter
, в настройках наборов данных указываете showLine: true
. Например:<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.umd.js"></script>
<canvas id="chart"></canvas>
const createDataset = (color, label, baseY) => ({
borderColor: color,
label,
showLine: true,
data: Array.from({ length: 10 }, (_, i) => ({
x: 10 * (i + (Math.random() - 0.5)) | 0,
y: baseY + Math.random() * baseY | 0,
})),
});
new Chart(document.querySelector('#chart'), {
type: 'scatter',
data: {
datasets: [
createDataset('red', 'hello, world!!', 50),
createDataset('green', 'fuck the world', 100),
createDataset('blue', 'fuck everything', 200),
],
},
});
const languages = [
{ name: 'Ru', Component: AppRu },
{ name: 'Eng', Component: AppEng },
...
];
const [ language, setLanguage ] = useState(0);
const { name, Component } = languages[language];
const onClick = () => setLanguage((language + 1) % languages.length);
<button onClick={onClick}>{name}</button>
<Component />
tableValues(element);
element.children
/element.childNodes
.document.querySelector('form').childNodes
children
вместо childNodes
. Ну и погуглите, в чём между ними разница.if (element.nodeType == 1 && element.nodeName == 'INPUT' || element.nodeName == 'SELECT') {
nodeType
лишняя. Кроме того, вам не помешает разобраться с приоритетом выполнения операторов - nodeType
вы тут проверяете только для input'а.let result = [];
const getValues = el =>
el instanceof Element
? [ 'INPUT', 'SELECT' ].includes(el.tagName)
? [ el.value ]
: [...el.children].flatMap(getValues)
: [];
// или
const getValues = el =>
[ 'INPUT', 'SELECT' ].includes(el?.tagName)
? [ el.value ]
: [].flatMap.call(el.children ?? [], getValues);
const values = getValues(document.querySelector('form'));
const values = Array.from(document.querySelector('form').elements, n => n.value);
const getFromDOMNodes = (node, test, getVal) =>
node instanceof Node
? Array.prototype.reduce.call(
node.childNodes,
(acc, n) => (acc.push(...getFromDOMNodes(n, test, getVal)), acc),
test(node) ? [ getVal(node) ] : []
)
: [];
const values = getFromDOMNodes(
document.querySelector('form'),
node => [ 'INPUT', 'SELECT' ].includes(node.nodeName),
node => node.value
);