Nivo: legendDataForKeys() missing data

[lgan1989]

 var legendDataForKeys = result.bars.filter(function (bar) {
        return bar.data.index === 0;
    }).map(function (bar) {
        return {
            label: bar.data.id,
            fill: bar.data.fill ? bar.data.fill : bar.color
        };
    }).reverse();

Consider following data:

[
  {
    key1: 0,
    key2: 100,
    key3: 100,
    idx: 0
  },
  {
    key1:100,
    key2:300,
    key3:400,
    idx:1
  }
]

Key1 would be missed in legendDataForKeys, as it seems that result.bars only contains those that have visible heights?

[knackjax]

@lgan1989 I am seeing missing records as well, seems to be keying off the first data point for me as well

[stahlmanDesign]

You guys are right, it only shows legends for the first bar. If that stacked bar only has 1 colour, then the legend only has one item.

[knackjax]

@stahlmanDesign thanks your fix works for me!

[stahlmanDesign]

I thought of a workaround for this issue https://github.com/plouc/nivo/pull/128 while waiting for feedback on the fix:
Basically, put a small value on the first bar that goes unseen but gets picked up by the legend

[jeremypeters]

@stahlmanDesign Thanks - your fix is working for me as well.

[leonkyr]

This hack does the trick...

if (data.items && data.items.length > 0) {
    Object.keys(data.items[0]).forEach((key: string) => {
         if (!data.items[0][key]) data.items[0][key] = 0.05;
    });
}

[plingampally]

@stahlmanDesign Fix does work but it produces console log errors, as the data structure has changed.

The object should look like this:

var legendDataForKeys = result.bars.map(function (bar) {
   return {
     id: bar.data.id,
     label: bar.data.id,
     color: bar.color,
     fill: bar.data.fill ? bar.data.fill : bar.color
   };
 }).reverse();