Skip to content

[XY Chart] Mixing Time and Linear Bar series throws an internal error #981

@dej611

Description

@dej611

Describe the bug
When mixing two Bar series, with one Time and the other Linear X scales, leads to the charts area to crash (blank area) and an error appears in the console.

To Reproduce
Steps to reproduce the behavior:

  1. Create a duplicate of the 35_test_time.tsx story
  2. Add the following series to it:
<BarSeries
      id="data2"
      xScaleType={ScaleType.Linear}
      yScaleType={ScaleType.Linear}
      xAccessor={0}
      yAccessors={[1]}
      data={[
        [2400, 1],
        [500, 2],
        [700, 3],
      ]}
    />
  1. Add the new story in the bars.stories.tsx
  2. Start Storybook and navigate to the story page.

Expected behaviour
The two scales should be independent and just split the series as it happens when mixing a Time and an Ordinal scales together (try to change the xScaleType={ScaleType.Linear} to Ordinal to see the difference).

Screenshots

Screenshot 2021-01-18 at 15 37 47

Additional context

In Lens the user could configure multiple "layers", without particular constraint on types, which could lead to this situation.

Errors in browser console

Uncaught RangeError: Invalid array length
    at new ScaleContinuous (scale_continuous.ts:229)
    at Object.computeXScale (scales.ts:111)
    at getScaleForAxisSpec (axis_utils.ts:166)
    at Object.computeAxisTicksDimensions (axis_utils.ts:99)
    at compute_axis_ticks_dimensions.ts:71
    at Array.forEach (<anonymous>)
    at compute_axis_ticks_dimensions.ts:68
    at resultFuncWithRecomputations (index.js:77)
    at index.js:70
    at index.js:30

The above error occurred in the <SpecsParserComponent> component:
    in SpecsParserComponent (created by ConnectFunction)
    in ConnectFunction (created by Chart)
    in ErrorBoundary (created by Chart)
    in div (created by Chart)
    in Provider (created by Chart)
    in Chart (created by storyFn)
    in div (created by Story)
    in Story (created by storyFn)
    in storyFn
    in ErrorBoundary

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

The above error occurred in the <SpecsParserComponent> component:
    in SpecsParserComponent (created by ConnectFunction)
    in ConnectFunction (created by Chart)
    in ErrorBoundary (created by Chart)
    in div (created by Chart)
    in Provider (created by Chart)
    in Chart (created by storyFn)
    in div (created by Story)
    in Story (created by storyFn)
    in storyFn
    in ErrorBoundary

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Kibana Cross Issues
Add any Kibana Lens issue related issues here.

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

No one assigned

    Labels

    :LensKibana Lens related issue:xyBar/Line/Area chart relatedImpact:MediumbugSomething isn't workinggood first issueGood for newcomerskibana cross issueHas a Kibana issue counterpart

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions