dc.js charting nested data arrays

Question

Problem description

I have a large data array with a structure similar to the following and seek to create a chart that will display the timerecords' changesets by hour that the changeset was created.

[ // array of records
    {
        id: 1,
        name: 'some record',
        in_datetime: '2019-10-24T08:15:00.000000',
        out_datetime: '2019-10-24T10:15:00.000000',
        hours: 2,
        tasks: ["some task name", "another task"],
        changesets: [ //array of changesets within a record
            {
                id: 1001,
                created_at: '2019-10-24T09:37:00.000000'
            },
            ...
        ]
    },
    ...
]

No matter how I have tried to create the dimension/write reduction functions I can't get the correct values out of the data table.

const changeReduceAdd = (p, v) => {
    v.changesets.forEach(change => {
        let cHour = timeBand[change.created_hour]
        if (showByChanges) {
            p[cHour] = (p[cHour] || 0) + (change.num_changes || 0)
        } else {
            p[cHour] = (p[cHour] || 0) + 1 //this is 1 changeset
        }
    })
    return p
}

const changeReduceRemove = (p, v) => {
    v.changesets.forEach(change => {
        let cHour = timeBand[change.created_hour]
        if (showByChanges) {
            p[cHour] = (p[cHour] || 0) - (change.num_changes || 0)
        } else {
            p[cHour] = (p[cHour] || 0) - 1 //this is 1 changeset
        }
    })
    return p
}

const changeReduceInit = () => {
    return {}
}

//next create the array dimension of changesets by hour
//goal: show changesets or num_changes grouped by their created_hour
let changeDim = ndx.dimension(r => r.changesets.map(c => timeBand[c.created_hour]), true)
let changeGroup = changeDim.group().reduce(changeReduceAdd, changeReduceRemove, changeReduceInit)
let changeChart = dc.barChart('#changeset-hour-chart')
    .dimension(changeDim)
    .keyAccessor(d => d.key)
    .valueAccessor(d => d.value[d.key])
    .group(changeGroup)

jsfiddle and debugging notes

The main problem I'm having is I want the changesets/created_hour chart, but in every dimension I have tried, where the keys appear correct, the values are significantly higher than the expected.

The values in the "8AM" category give value 5, when there are really only 3 changesets which I marked created_hour: 8:

Answer 1

There are a lot of solutions to the "tag dimension" problem, and you happen to have chosen two of the best.

Either

1. the custom reduction, or
2. the array/tag flag parameter to the dimension constructor

would do the trick.

Combining the two techniques is what got you into trouble. I didn't try to figure what exactly was going on, but you were somehow summing the counts of the hours.

Simple solution: use the built-in tag dimension feature

Use the tag/dimension flag and default reduceCount:

let changeDim = ndx.dimension(r => r.changesets.map(c => timeBand[c.created_hour]), true)
let changeGroup = changeDim.group(); // no reduce, defaults to reduceCount
let changeChart = dc.barChart('#changeset-hour-chart')
    .dimension(changeDim)
    .keyAccessor(d => d.key)
    .valueAccessor(d => d.value) // no [d.key], value is count
    .group(changeGroup)

fork of your fiddle

Manual, pre-1.4 groupAll version

You also have a groupAll solution in your code. This solution was necessary before array/tag dimensions were introduced in crossfilter 1.4.

Out of curiosity, I tried enabling it, and it also works once you transform from the groupAll result into group results:

function groupall_map_to_group(groupall) {
  return {
    all: () => Object.entries(groupall.value())
                     .map(([key,value])=>({key,value}))
  }
}

let changeGroup = ndx.groupAll().reduce(changeReduceAdd, changeReduceRemove, changeReduceInit)
let changeChart = dc.barChart('#changeset-hour-chart')
    .dimension({}) // filtering not implemented
    .keyAccessor(d => d.key)
    .valueAccessor(d => d.value) // [d.key]
    .group(groupall_map_to_group(changeGroup))
    .x(dc.d3.scaleBand().domain(timeBand))
    .xUnits(dc.units.ordinal)
    .elasticY(true)
    .render()

crossfilter 1.3 version