Updated query with groupBy and summation
```dataviewjs
const pages = dv.pages('#f54083')
.where(p => p.play == "A_Scenario")
.sort(p => p.date, "asc")
.groupBy(p => p.date)
// Output the table
console.log(pages)
dv.table(["file", "date", "outcome"],
pages.values
.map(p => [p.rows.file.link, p.key, p.rows.outcome]))
const TradeDate = pages.map(p => p.key).values
const TradeOutcome = pages
.map(p => p.rows.values.reduce((tmp, curr) => tmp + curr.outcome, 0))
.values
console.log(TradeDate)
const chartData = {
type: 'bar',
data: {
labels: TradeDate,
datasets:[{
label: 'Outcome',
data: TradeOutcome,
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
borderWidth: 1,
}]
}
}
window.renderChart(chartData, this.container) /* */
```
This produces this chart (for the first 5 entries of your list):
The only thing you should need to change is the '#f54083', back into '"00_Trades"', I think. The main changes I’ve done are add the grouping, and a display of the grouped data, and a summation to get the new outcome.
Add grouping and displaying it
The grouping command is just something like .groupBy(p => p.date), where it then groups by that element.
What happens now is that it goes through all elements, and for every unique p.date it groups the rest into rows. In other words, the new page item has a p.key which is set to the (previous) unique value of p.date, and all the values of that group are now “hidden” into arrays in p.rows.
Do please look at the output of console.log(pages) in Developers Tools to get a grasp of how it has changed the data structure.
If you take the plain approach of mapping out the p.rows.file.link and p.rows.outcome you’ll get the output seen above the chart. Notice how there are actually only three rows in this table (as seen by the single p.key value), and that the first and third column are actually lists of values.
Summation of the outcome
So extracting the key value, or date, is just a rename from p.date to p.key, but the summation of the outcome is a little trickier. Here one needs to get the values out of p.rows.outcome and sum them.
This can be done using various tools, I chose to use reduce, which might not be the easiest to read, but we’re talking about this code segment:
const TradeOutcome = pages
.map(p => p.rows.values.reduce((tmp, curr) => tmp + curr.outcome, 0))
.values
The map does it usual thing of getting some value for each of the rows of the main query. But what it does to each of those, is to get the value of the (internal) rows variable, and feed that to reduce.
The way the reduce works, is that it takes two parameters, one callback function, and a default value. The callback function is called iteratively on the array we call reduce on.
So with a callback function of (tmp, curr) => tmp + curr.outcome, it’ll add together the temporary value so far, tmp, with the current rows value, curr.outcome. And to get it started, it uses the default value of 0 for the first run into tmp. All-in-all, it keeps reducing the array adding the current outcome into the tmp variable, which starts at zero, until there are no more rows in the array it was fed.
Hopefully that was a good enough explanation for you to understand what’s happening. To get it going in your case, change the pages( ... ) into your original, and after playing around with it a little to see the value, remove the console.log(pages) and dv.table( ... ) statements, and you should have a nice chart of the summed outcome for each date.
