`{
headerName: 'Overdue INR ',
field: 'overduelcy',
type: 'rightAligned',
filter: true,
sort: 'desc',
filterValueGetter: (params: ValueGetterParams) => {
const colId = params.column.getColId();
return this.currencyFormatter(params.data.overduelcy);
},
aggFunc: (params: any) => {
let sum = 0;
params.values.forEach(
(overduelcy: number) => sum += overduelcy);
return sum ? sum : 0 ;
},
valueGetter: (params: any) => {
if (!params.node.group) {
return {
toString: () => (params.data.overduelcy) ? params.data.overduelcy : 0,
}
}
return null;
},
},
`
I want only group column sum sort order desc not all row level data.
ag-grid sort all row level also.
there is sortByGroupSummaryInfo: functionality in devextreme data grid I can manage this problem solution with Devextreme but not with ag-grid.
devextreme example
Related
I have a JSON file and I am trying to calculate the JSON file key based on the value and reformating it. My JSON file looks like below:
data=[
{
pet:'Cat',
fruit:'Apple',
fish:'Hilsha'
},
{
pet:'Dog',
fish:'Carp'
},
{
pet:'Cat',
fruit:'Orange',
fish:'Lobster'
}
];
I do like to calculate and formate it like below:
data=[
{
label:'Pet',
total:3,
list:[
{
name:'Cat',
value: 2,
},
{
name:'Dog',
value: 1,
}
]
},
{
label:'Fruit',
total:2,
list:[
{
name:'Apple',
value: 1,
},
{
name:'Orange',
value: 1,
}
]
},
{
label:'Fish',
total:3,
list:[
{
name:'Hilsha',
value: 1,
},
{
name:'Carp',
value: 1,
},
{
name:'Lobster',
value: 1,
}
]
},
];
If anybody can help me, it will be very help for me and will save a day.
I have fixed this task myself. If I have any wrong, you can put your comment fill-free :)
``
ngOnInit(): void {
this.dataService.$data.subscribe(data => {
// Create new object and calculation according to category
let petObj: any = {}
let fruitObj: any = {}
let fishObj: any = {}
data.forEach((el: any) => {
if (el.pet != undefined) {
petObj[el.pet] = (petObj[el.pet] || 0) + 1;
}
if (el.fruit != undefined) {
fruitObj[el.fruit] = (fruitObj[el.fruit] || 0) + 1;
}
if (el.fish != undefined) {
fishObj[el.fish] = (fishObj[el.fish] || 0) + 1;
}
});
// Create list according to category
let pet_list: any = [];
let fruit_list: any = [];
let fish_list: any = [];
for (var key in petObj) {
let pet = {
label: key,
value: petObj[key]
}
pet_list.push(pet)
}
for (var key in fruitObj) {
let fruit = {
label: key,
value: fruitObj[key]
}
fruit_list.push(fruit)
}
for (var key in fishObj) {
let fish = {
label: key,
value: fishObj[key]
}
fish_list.push(fish)
}
// Calculate total sum according to category
var totalPet = pet_list.map((res: any) => res.value).reduce((a: any, b: any) => a + b);
var totalFruit = fruit_list.map((res: any) => res.value).reduce((a: any, b: any) => a + b);
var totalFish = fish_list.map((res: any) => res.value).reduce((a: any, b: any) => a + b);
// Rearrange the JSON
this.rearrangeData = [
{
label: 'Pet',
total: totalPet,
list: pet_list
},
{
label: 'Fruit',
total: totalFruit,
list: fruit_list
},
{
label: 'Fish',
total: totalFish,
list: fish_list
}
]
console.log(this.rearrangeData)
// End rearrange the JSON
});
}
``
You can simplify your function. Take a look this one
group(oldData) {
const data = []; //declare an empty array
oldData.forEach((x) => {
//x will be {pet: 'Cat',fruit: 'Apple',fish: 'Hilsha'},
// {pet: 'Dog',fish: 'Carp'}
// ...
Object.keys(x).forEach((key) => {
//key will be 'pet','fruit',...
const item = data.find((d) => d.label == key); //search in the "data array"
if (item) { //if find it
item.total++; //add 1 to the property total of the element find it
// and search in the item.list the 'Cat'
const list = item.list.find((l) => l.name == x[key]);
//if find it add 1 to the property value of the list
if (list)
list.value++;
else
//if not, add to the list
//an object with property "name" and "value" equal 1
item.list.push({ name: x[key], value: 1 });
} else
//if the element is not in the "array data"
//add an object with properties label, total and list
//see that list is an array with an unique element
data.push({
label: key,
total: 1,
list: [{ name: x[key], value: 1 }],
});
});
});
return data;
}
You can use like
this.dataService.$data.subscribe(data => {
this.rearrangeData=this.group(data)
}
NOTE: this function the labels are 'pet','fruit' and 'fish' not 'Pet', 'Fruit' and 'Fish'
Did you try reading the text leading up to this exercise? That'd be my first approach. After that, I'd use reduce. You can do pretty much anything with reduce.
My data that I'm given is formulated like the following. I'm struggling to get any usable data out of it using reduce or map
const data = [
{
id: 25,
status: 1,
description: "No Description",
length: 4,
data: [
{
id: 43,
comment: "Comment1",
eventTimestamp: 1541027189000,
intensity: 29
},
{
comment: "Comment2",
eventTimestamp: 1541027191000,
intensity: 33
},
{
id: 45,
comment: "Comment3",
eventTimestamp: 1541027193000,
intensity: 30
}
],
tTypes: [
{
id: 3,
label: "Johnny",
certainty: "TEST",
comment: "Test Purposes Only",
icon: "bottle",
number: 0
}
]
}
];
I've tried flatting, I've tried iterating the JSON twice and I just seem to end up with either "NaN" or Undefined. I'd like to be able to order them in time order (using time stamp), get the mix/max/ave from the intensity values and more. I have that figured out for the length which is a level higher, but just can't seem to figure out the rest. Can someone point me in the right direction?
export default function App() {
let tTypesArray = data.map((a) => a.tTypes);
let Walker = tTypesArray.reduce((a, tTypes) => tTypes.label === "Johnny" ? ++a : a, 0);
console.log(Walker);
console.log(tTypesArray[0].label);
console.log([].concat(...data)
.map(data => data.tTypes.number)
.reduce((a, b) => a + b))
console.log([].concat(...data).reduce((a, { tTypes: { id }}) => id, 0))
return <div className="App">ARG!</div>;
}
Are some of the examples I've tried.
https://codesandbox.io/s/purple-cache-ivz1y?file=/src/App.js
Is the link to the sandbox.
What I understood from you question is that you need to loop data and for each element in data you want to extract values and do some calculations.
First you need to loop your data input. I will use Array.forEach:
data.forEach(element => { ... })
Now that we have a loop we can access each element property and extract the information we want. For instance lets say you want to sort the comments by timestamp in ascending order:
const sortedComments = element.data.sort((a, b) => a.eventTimestamp - b.eventTimestamp);
console.log(sortedComments)
Now let's say you want the min, max, and average intensity from the comments. There are several ways to get it. Here is an algorithm for that:
let min = Infinity;
let max = -Infinity;
let sum = 0;
for(comment of sortedComments) {
if(comment.intensity < min) {
min = comment.intensity;
}
if(comment.intensity > max) {
max = comment.intensity;
}
sum += comment.intensity;
}
const avg = sum / sortedComments.length;
console.log({min, max, avg})
Putting it all together:
const data = [
{
id: 25,
confirmationStatus: 1,
description: "No Description",
length: 4,
data: [
{
id: 43,
comment: "Comment1",
eventTimestamp: 1541027189000,
intensity: 29
},
{
comment: "Comment2",
eventTimestamp: 1541027191000,
intensity: 33
},
{
id: 45,
comment: "Comment3",
eventTimestamp: 1541027193000,
intensity: 30
}
],
tTypes: [
{
id: 3,
label: "Johnny",
certainty: "TEST",
comment: "Test Purposes Only",
icon: "bottle",
number: 0
}
]
}
];
data.forEach(element => {
const sortedComments = element.data.sort((a, b) => a.eventTimestamp - b.eventTimestamp);
console.log(sortedComments);
let min = Infinity;
let max = -Infinity;
let sum = 0;
for(comment of sortedComments) {
if(comment.intensity < min) {
min = comment.intensity;
}
if(comment.intensity > max) {
max = comment.intensity;
}
sum += comment.intensity;
}
const avg = sum / sortedComments.length;
console.log({min, max, avg});
let walker = element.tTypes.reduce(
(a, tType) => (tType.label === "Johnny" ? ++a : a), 0
);
console.log(walker)
});
I hope it puts you in the right direction.
im currently using ag-grid in my aplication under angular 6 and my problem is:
I have a row with 3 columns, | A | B | C |
A is a select with some names
when I select a value in the row A, I want B and C (of the same row) change their values based on a date from A.
A = { id:number , aStart:Date, aEnd:Date }
I tried to use startEditingCell and other ways buts no one works.
Which is the right way to do that?
export interface Delivery {
id: number;
deliveryCode: string;
startPeriodDate: Date;
endPeriodDate: Date;
description: string;
inactive: boolean;
}
export class lineColumn {
deliveryid: number
startDate: Date
endDate: Date
}
const columns = {
headerName: 'Delivery',
colId: 'delivery',
field: 'id',
editable: this.isGridEditableOnCondition,
cellEditor: 'agRichSelectCellEditor',
cellRenderer: this.deliveryFormatter.bind(this),
cellEditorParams: (params) => {
return {
values: this.deliveries.map((delivery) => delivery.id),
formatValue: this.deliveryFormatter.bind(this),
displayPropertyName: 'deliveryCode',
valuePropertyName: 'deliveryCode',
displayFormat: 'deliveryCode',
};
},
onCellValueChanged: (params) => {
// when this value changes, the other 2 columns must change with the values of dates that delivery has (but can be still editables)
params.api.refreshCells();
},
},
{
headerName: 'Shipping Start Date',
colId: 'shippingStartDate',
field: startDate,
editable: this.isGridEditable,
valueFormatter: this.uiService.dateFormatter,
cellEditor: 'atrDate',
},
{
headerName: 'Shipping End Date',
colId: 'shippingEndDate',
field: endDate,
editable: this.isGridEditable,
valueFormatter: this.uiService.dateFormatter,
cellEditor: 'atrDate',
},
Finally:
onCellValueChanged: (params) => {
const api: agGrid.GridApi = params.api;
const delivery = this.masterdata.deliveries.find((d: Delivery) => d.deliveryId === params.newValue);
api.getRowNode(params.node.rowIndex).setDataValue('shippingStartDate', delivery.startPeriodDate);
api.getRowNode(params.node.rowIndex).setDataValue('shippingEndDate', delivery.endPeriodDate);
api.refreshCells();
}
},
Looking to group and create relevant html based from an object.
const _ = require('lodash');
const items = [
{
value: 'fruit',
label: 'apple',
},
{
value: 'Mango',
label: 'Mango',
groupBy: 'fruit'
},
{
value: 'Orange',
label: 'Orange',
groupBy: 'fruit'
},
// Will need to group all above by fruit, similarly
{
value: 'vegetable',
label: 'artichoke',
},
{
value: 'aubergine',
label: 'aubergine',
groupBy: 'vegetable'
}
];
_renderItems = () => {
const itemsList = _.chain(items)
.map(item => (
this._renderItem(item)
))
.value()
return '<div class="item-container">'+ itemsList+'</div>'
}
_renderItem = (item = {}) => {
console.log(item)
}
_renderItems()
/*
desired output
<div class="fruit">
Label:Apple
Label:Mango
Label:Orange
</div>
<div class="vegetable">
label:artichoke
label:aubergine
label:broccoli
</div>
*/
Code sample here of progress here https://repl.it/repls/ElectronicUsableTheories . In general, I have trouble adding a wrapping div based on grouped value.
So all fruit should be grouped first key will not have groupBy key but its value will be the key of all next items which needs to be grouped
Group the items by the groupBy or by value if groupBy doesn't exist. Then you can map the groups. The 2nd parameter that map passes to the callback is the key (the groupBy value), that you can use as the class. It addition map the items, take the label, and format. Combine the group's string, and the itemList's string, and return.
const items = [{"value":"fruit","label":"apple"},{"value":"Mango","label":"Mango","groupBy":"fruit"},{"value":"Orange","label":"Orange","groupBy":"fruit"},{"value":"vegetable","label":"artichoke"},{"value":"aubergine","label":"aubergine","groupBy":"vegetable"}];
const _renderItem = ({ label } = {}) => `label: ${label}\n`;
const _renderItems = () =>
_(items)
.groupBy(o => o.groupBy || o.value) // if not groupBy use value
.map((group, key) => {
const itemsList = group.map(_renderItem).join('');
return `<div class="item-container ${key}">\n${itemsList}</div>`;
})
.join('\n');
const result = _renderItems();
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
I want to make a cool higher-order function chain for what I could do (perhaps more verbosely) like this:
for (var idx = 0; idx < collecionA.length; idx++) {
for (item in collectionA[idx].children) {
if (item.sku == "someVal") return idx
}
}
Does anyone see a snazzy way to do this with map/find/filter/reduce etc.? I keep wanting to use forEach but then get pwnd when I realize I can't return from it.
Something like:
return collectionA.children.findIndex( (child) => child.children.oneOfThemIncludesAnObjectWithThisProperty("someVal"))
Use Array.findIndex() on the outer collection. For each item, iterate the children with Array.some(), and check if the value of the property (sku) matches the requested value. As soon as a matching value is found, some returns true immediately, and findIndex returns the current index.
const collection = [{"children":[{"sku":"someOtherVal"}]},{"children":[{"sku":"someVal"}]},{"children":[{"sku":"someOtherVal"}]}];
const findIndexWithChildProp = (arr, prop, val) =>
arr.findIndex(({ children }) =>
children.some(({ [prop]: v }) => v === val));
const result = findIndexWithChildProp(collection, 'sku', 'someVal');
console.log(result);
This could be what you are looking for:
function func() {
var index = -1;
collectionA.forEach((p, i) => p.children.forEach(item => {
if (item.sku == "someVal") index = i;
}));
return index;
}
var collectionA = [{
children: [{
sku: "someOtherVal"
}]
}, {
children: [{
sku: "someVal"
}]
}, {
children: [{
sku: "someOtherVal"
}]
}]
console.log(func());