Skip to content

ignore series created with undefined/null splitAccessors #594

@markov00

Description

@markov00

Describe the bug
If the data sent to charts contains missing values for a splitAccessor, than the chart create a specific series for that situation with the id of the series component.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://codesandbox.io/s/hardcore-wescoff-3mdxn or use the following Chart code
Details
<Chart>
  <Settings
    showLegend
    xDomain={{
      min: +new Date('2020-03-19T08:31:40.685Z'),
      max: +new Date('2020-03-19T08:46:40.685Z'),
      minInterval: 1584606900000 - 1584606870000,
    }}
  />
  <Axis id="y1" position={Position.Left} />
  <Axis id="x" position={Position.Bottom} />
  <BarSeries
    id="no-data-here"
    xScaleType={ScaleType.Time}
    xAccessor="2f3ff4f6-5634-40ba-afd6-4ad028011388"
    yAccessors={['ba2db9a7-0a0f-4463-9eec-009451f26a86']}
    splitSeriesAccessors={['cc4751db-af19-4705-8065-8f9fee043569']}
    stackAccessors={['2f3ff4f6-5634-40ba-afd6-4ad028011388']}
    data={[
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584606840000,
        'cc4751db-af19-4705-8065-8f9fee043569': "Men's Clothing",
        'ba2db9a7-0a0f-4463-9eec-009451f26a86': 1,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584606840000,
        'cc4751db-af19-4705-8065-8f9fee043569': "Men's Shoes",
        'ba2db9a7-0a0f-4463-9eec-009451f26a86': 1,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584606870000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584606900000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584606930000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584606960000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584606990000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584607020000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584607050000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584607080000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584607110000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584607140000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584607170000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584607200000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584607230000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584607260000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584607290000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584607320000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584607350000,
        'cc4751db-af19-4705-8065-8f9fee043569': "Men's Accessories",
        'ba2db9a7-0a0f-4463-9eec-009451f26a86': 1,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584607350000,
        'cc4751db-af19-4705-8065-8f9fee043569': "Men's Clothing",
        'ba2db9a7-0a0f-4463-9eec-009451f26a86': 1,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584607380000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584607410000,
      },
      {
        '2f3ff4f6-5634-40ba-afd6-4ad028011388': 1584607440000,
        'cc4751db-af19-4705-8065-8f9fee043569': "Women's Clothing",
        'ba2db9a7-0a0f-4463-9eec-009451f26a86': 1,
      },
    ]}
  />
</Chart>
2. The data created highlight an empty series, created due to the missing splitAccessor 3. Apply the following filter to fix it:
data={[
....
].filter((d) => {
      return d['cc4751db-af19-4705-8065-8f9fee043569'] != null;
    })
  1. The empty serie is now gone

Expected behavior
If in a way the behaviour is correct: we are identifying and grouping all the data with missing attributes in a series because the data right there exist, we should just ignore these values.

Screenshots

Screenshot 2020-03-19 at 16 23 23

Version (please complete the following information):

  • OS: all
  • Browser: all
  • Elastic Charts: all

Additional context
related to the following Lens issue: elastic/kibana#60604

Errors in browser console
n/a

Kibana Cross Issues

Checklist

  • every related Kibana issue is listed under Kibana Cross Issues list
  • kibana cross issue tag is associated to the issue if any kibana cross issue is present

Metadata

Metadata

Assignees

Labels

:specsChart specifications related issue:xyBar/Line/Area chart relatedbugSomething isn't workingkibana cross issueHas a Kibana issue counterpart

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions