We Keep Coding

how to set xyz value on areachart nextjs when has different length output?

i have an output:
categories: (2) ['2022-07','2022-08']
resultBilGol: (7) ['2B - Rumah Tangga Menengah', '3A - Niaga Kecil', '3B - Niaga Besar', 'R5 - Instansi Pemerintah', 'IA - Rumah Tangga', '2B - Rumah Tangga Menengah', 'R5 - Instansi Pemerintah']
resultTotal: (7) ['57000', '76700', '172000', '429300', '272000', '50200', '1467000']
but the output is like this
enter image description here
basicly , length 1-5 for resultBilGol and resultTotal is for categories (1) and length 6-7 is for categories (2)
So i want make the output is gonna like this:
2022-07 has value: 2B + 57000, 3A + 76700, 3B + 172000, R5 + 429300, IA + 272000
2022-08 has value: 2B + 50200, R5 + 1467000
this is my code to generate the output from back:
let categories = [];
let result = 0;
let resultGolongan = "";
let resultTotal = [];
let resultBilGol = [];
let res = "";
for (let i = 0; i < responseBillingTarget.length; i++) {
const momentAll = moment(responseBillingTarget[i]?.periode).format(
"YYYY-MM"
);
categories.push(moment(responseBillingTarget[i].periode).format("YYYY-MM"));
for (let index = 0; index < responseBillingGolongan.length; index++) {
const element = responseBillingGolongan[index];
const momentBilGol = moment(element.periode).format("YYYY-MM");
if (momentAll === momentBilGol) {
resultTotal.push(element.total);
resultBilGol.push(element.golongan);
}
}
}
and it is from tsx:
let seriesActive =
arrayBilGolongan === undefined
? []
: arrayBilGolongan.resultBilGol === undefined ||
arrayBilGolongan.resultBilGol === []
? []
: arrayBilGolongan.resultBilGol;
let seriesActive2 = arrayBilGolongan?.resultTotal;
let dataSeriesTotal = seriesActive2?.map((items: any, i: any) => {
return { items };
});
let dataSeriesGolongan = seriesActive.map((item: any, i: any) => {
let result = [];
for (let index = 0; index < dataSeriesTotal.length; index++) {
const element = dataSeriesTotal[index];
result.push(element.items);
}
if (
arrayBilGolongan.resultBilGol !== undefined ||
arrayBilGolongan.resultBilGol !== []
) {
return {
name: `${item}`,
data: result,
};
} else {
return {
name: `${item}`,
data: [0],
};
}
});
how to make my problem can be solve like this? please help me

Two Number Is in between range in array jquery

I have two array and need to check any duplicate range in this how can achieve that
let arrayfrom = ['1', '6.1', '10', '31','6.2',3];
let arrayto = ['2', '9.9', '30', '401','7',5];
How we can test duplicate range? Here the expected result:
1-2 -valid
6.1 - 9.9 -valid
10 - 30-valid
31 - 401 -valid
6.2 - 7 -invalid (between range 6.1 - 9.9)
3-5 - valid
Help me to find this solution

A loop or two will do. We need to compare all pairs to all others.
let arrayFrom = ['1', '6.1', '10', '31', '6.2', 3];
let arrayTo = ['2', '9.9', '30', '401', '7', 5];
function is_pair_included(a, in_b) {
return (a[0] > in_b[0] && a[1] < in_b[1])
}
var to_remove = [];
for (var i = 0; i < arrayFrom.length - 1; i++) {
for (var j = i + 1; j < arrayFrom.length; j++) {
var pair1 = [+arrayFrom[i], +arrayTo[i]];
var pair2 = [+arrayFrom[j], +arrayTo[j]];
if (is_pair_included(pair1, pair2)) {
to_remove.push(i);
}
if (is_pair_included(pair2, pair1)) {
to_remove.push(j);
}
}
}
to_remove.forEach(function(i) {
var pair1 = [+arrayFrom[i], +arrayTo[i]];
console.log("" + pair1, "invalid");
})

Sorting Object of Objects using Object.values()

I'm trying to sort an object of objects using Object.values(), sort() and map() into pages based on a nested value. It's works perfect in FF, but Chrome for some reason returns pages full of unsorted items.
Example structure of list:
{
1: {
id: 1,
rank: 10,
name: "foo"
},
2: {
id: 2,
rank: 24,
name: "bar"
},
3: {
id: 3,
rank: 11,
name: "baz"
},
...
}
Example:
const out = document.getElementById("out");
const sortBy = "rank";
const perPage = 10;
let list = {};
for (let i = 1; i < 50; i++) {
list[i] = {
id: i,
rank: rand(10, 200),
name: generateName(rand(6, 12))
}
}
const values = Object.values(list);
const pages = values.sort((a, b) => {
if (sortBy === "rank") {
return a.rank < b.rank;
} else if (sortBy === "name") {
return a.name > b.name;
}
})
.map((item, i) => {
return i % perPage === 0 ? values.slice(i, i + perPage) : null;
}).filter(page => page);
for (const page of pages) {
for (const item of page) {
out.value += `${item.rank}\n`;
}
}
// HELPERS
function rand(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1) + min);
}
function generateName(length) {
let result = '';
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const charactersLength = characters.length;
for (var i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
<textarea name="" id="out" cols="60" rows="30"></textarea>
Demo Pen

Thank you #Pointy. So the answer should be like this.
const pages = values.sort((a, b) => a.rank < b.rank ? 1 : -1)

Order by nested object property inside a array

I'm stuck on this one thing trying to take top 3 manufacturers by numberOfCars, and, to do the same with cars: [], take top 3 by numberoOfCars
audi: {
cars: [],
collectionName: '',
numberOfCars: 0
}
I can do the first level with lodash like
_.take(_.orderBy(modelData, 'numberoOfCars', 'desc'), 3)
but I'm lost on doing the same on cars array as mentioned.
const mock = []
for (let i = 0; i < 140; i++) {
let manufacturerName
let name
if (i < 20) {
manufacturerName = 'Audi'
name = 'A6'
} else if (i > 19 && i < 40) {
manufacturerName = 'BMW'
name = '420 GC'
} else if (i > 19 && i < 40) {
manufacturerName = 'Mercedes'
name = 'AMG'
} else if (i > 39 && i < 60) {
manufacturerName = 'Mazda'
name = '6'
} else if (i > 59 && i < 80) {
manufacturerName = 'Volvo'
name = 'V90'
} else if (i > 79 && i < 100) {
manufacturerName = 'Renault'
name = 'Model'
} else if (i > 99 && i < 120) {
manufacturerName = 'Lamborghini'
name = 'Aventador'
} else if (i > 119 && i < 140) {
manufacturerName = 'Volkswagen'
name = 'Golf'
}
mock.push({
id: i,
name: name,
displayName: 'display-name ' + Math.floor(Math.random() * 10),
manufacturer: manufacturerName,
numberoOfCars: Math.floor(Math.random() * 100000),
})
}
const dataModel = mock.reduce((accumulator, currentValue) => {
const key = currentValue.manufacturer
if (accumulator[key] === undefined) {
accumulator[key] = {
collectionName: '',
numberoOfCars: 0,
cars: []
}
}
if (accumulator[key].collectionName === '') {
accumulator[key].collectionName = currentValue.manufacturer
}
if (currentValue.numberoOfCars !== undefined) {
accumulator[key].numberoOfCars += currentValue.numberoOfCars
}
if (currentValue.numberoOfCars !== undefined) {
accumulator[key].cars.push({
name: currentValue.name,
numberOfCars: currentValue.numberoOfCars
})
}
return accumulator
}, {})
console.log(dataModel)

Iterate over the keys in the outer object, order those keys by the number of cars associated with that key in the outer then pick the first 3 keys.
Then, reduce each key into an object that clones the value associated with that key and orders the cars in that value and takes the first 3:
var filtered = _.chain(dataModel)
.keys()
.orderBy(k=>dataModel[k].numberOfCars, 'desc')
.take(3)
.reduce((coll,k)=>{
coll[k] = _.clone(dataModel[k]);
coll[k].cars = _.chain(coll[k].cars)
.orderBy('numberOfCars', 'desc')
.take(3)
.value();
return coll;
}, {})
.value();
Example on jsfiddle
Credit to this answer by VLAZ for help on how to filter an object's items by an ordering over its values.

I guess it should be something like this:
const cars = Object.keys(dataModel).reduce((acc, item) => {
const collection = dataModel[item]
return acc.concat(collection.cars)
}, []);
const top3cars = _.take(_.orderBy(cars, 'numberOfCars', 'desc'), 3);

How do I convert numbers into letter form, ex. 3 to three, and then className = three?

I am making a dice roller. This code gives the sum of the dice rolled.
function getSumDiceValue(){
var dice = diceWindowWrapper.getElementsByClassName("dice");
var diceTotal = 0;
for(var i = 0; i < dice.length; i++){
diceTotal += Number(dice[i].getAttribute("data-diceValue"));
};
return diceTotal;
};
I want to set the class name of zero to the value of getSumDiceValue(), but in letters.
That is if I roll a 6 then the value of getSumDiceValue() is equal to 6, and then I want zero.className to equal six. That is:
zero.className = six;
Then I would need to "plug it in" to this code:
var zero = document.createElement("li");
zero.className = <here>;
diceToolbarCounterWrapper.appendChild(zero);
I think I need to make an array of some kind. But I am new to javaScript and not sure how I would go about doing that. Please add code to your answer.

I've previously written a function for converting a integer number in the range
-999 999 999 999 999 ... 999 999 999 999 999 to it's full English name (short scale)
var numberWord = (function () {
var words = [
'zero', 'one', 'two', 'three', 'four',
'five', 'six', 'seven', 'eight', 'nine',
'ten', 'eleven', 'twelve', 'thirteen', 'fourteen',
'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'
];
words.length = 99;
var i, j, tens = [
'', '', 'twenty', 'thirty', 'forty',
'fifty', 'sixty', 'seventy', 'eighty', 'ninety'
];
for (i = 2; i < 10; ++i) {
words[10 * i] = tens[i];
for (j = 1; j < 10; ++j) {
words[10 * i + j] = tens[i] + ' ' + words[j];
}
}
var power = [
{e: 1e2, str: 'hundred', and: false},
{e: 1e3, str: 'thousand', and: false},
{e: 1e6, str: 'million', and: false},
{e: 1e9, str: 'billion', and: false},
{e: 1e12, str: 'trillion', and: false},
];
function strAdd(a, b) {
if (a && b) return a + ' ' + b;
return a || b || '';
}
function strAndAdd(a, b) {
if (a && b) return a + ' and ' + b;
return a || b || '';
}
return function numberWord(x) {
var number = '';
x = Math.floor(x);
if (x !== x) return 'NaN';
if (x === 0) return words[0];
if (x < 0) {
number = strAdd(number, 'minus');
x = Math.abs(x);
}
if (x > 999999999999999) throw new RangeError('Number must be in -999999999999999..999999999999999');
var i = power.length - 1, j, substr;
for (; i >= 0; --i) {
if (x >= power[i].e) {
j = Math.floor(x / power[i].e);
substr = numberWord(j) + ' ' + power[i].str;
if (power[i].and) number = strAndAdd(number, substr);
else number = strAdd(number, substr);
x %= power[i].e;
}
}
if (x > 0) {
number = strAndAdd(number, words[x]);
}
return number;
}
}());
Example usage
numberWord(+'-999,999,999,999,999'.replace(/,/g, ''));
// "minus nine hundred and ninety nine trillion nine hundred and ninety nine billion nine hundred and ninety nine million nine hundred and ninety nine thousand nine hundred and ninety nine"
numberWord(1999); // "one thousand nine hundred and ninety nine"
numberWord(2016); // "two thousand and sixteen"

Check this function. It get a numeric value as parameter and returnes this number as text. (Numbers 1 to 6 for the dice):
var diceResult = 6;
var getNumberText = function(num) {
//Create an object that maps the relation between numeric and literal values of numbers
var numTxtSet = {
1: 'one',
2: 'two',
3: 'three',
4: 'four',
5: 'five',
6: 'six'
}
//Check if the given parameter is a number
if (num && !isNaN(num)) {
return numTxtSet[num];
}
}
//Call the function passing 'diceResult' as parameter and store it's value to a variable
var res = getNumberText(diceResult);
alert(res);

In case your getSumDiceValue() function, will be returning a numeric value, of a range from 0 to 6, you might be after something like this:
var numTxtSet = "zero,one,two,three,four,five,six".split(",");
zero.className = numTxtSet[ getSumDiceValue() ];