Second y-axis showing overlapping value/grid line #226

kczx3 · 2021-08-31T16:48:33Z

Bug Report

Description

I am creating a Scatter graph with two y axes. The second y-axis is showing 0 twice for the dataset and I'm not sure why that is. For some reason the grid line from each y-axis isn't lining up so its drawing the 0 line twice. Maybe this always happens and it isn't noticed because they are drawing directly on top of another.

Graphs affected

Only tested Line and Scatter, but the issue seems specific to the generation of the axes and grid, not necessarily the drawing of the data itself.

Steps to Reproduce

See link to CodeSandbox below
1.
2.
3.
4.

Link to CodeSandbox

Use this template to reproduce the behavior.

Additional Context / Screenshots

Expected Behavior

I'd expect it to look more like this example that I tried to mock up.

Possible Solution

Environment

Component Name and Version:
Browser Name and Version: Edge 92.0.902.67
Node/npm Version: [e.g. Node 8/npm 5]
Webpack Version:
Operating System and version (desktop or mobile): Windows 10 20H2

@ Mentions

@mjhenkes

AshishMotanamGurunadham · 2021-09-27T20:59:38Z

Based on the investigation, we came to a conclusion to set a format for axis ticks when there are multiple zero's presents on the y or y2 axis.

Created a new issue internally for implementing solution.

kczx3 · 2021-11-01T17:52:22Z

@AshishMotanamGurunadham how can I track the status of your internal issue? Will you post updates back to this issue?

AshishMotanamGurunadham · 2021-11-01T18:03:47Z

@AshishMotanamGurunadham how can I track the status of your internal issue? Will you post updates back to this issue?

@kczx3 We fixed this issue in the carbon-graphs 2.18.2 version.

kczx3 · 2021-11-01T18:41:48Z

Hm, I still see this occurring in some scenarios. It looks like in my original repro that you show a different number than 0. I have an example that still shows two zeros on the y2 axis though.

I've updated my template on CodeSandbox to demonstrate using 2.18.2.

AshishMotanamGurunadham · 2021-11-01T20:44:18Z

Hm, I still see this occurring in some scenarios. It looks like in my original repro that you show a different number than 0. I have an example that still shows two zeros on the y2 axis though.

I've updated my template on CodeSandbox to demonstrate using 2.18.2.

@kczx3 Sorry for the inconvenience caused. Made changes in this branch to fix the issue you mentioned above. You can pull in the branch changes into your repo and see if everything is working fine. Meanwhile, we will work on releasing this issue as soon as we can.

kczx3 · 2021-11-02T12:34:52Z

Apologies, but I'm having trouble pulling in that specific branch into my project to test. I'm not sure if it has to do with the multi-package repo you use or what. I tried the below:
npm i "git://github.com/cerner/terra-graphs.git#investigate-two-zeros-bug" --save
but it hangs for a while on reify:d3-geo and then eventually appears to fail on a post-install step for link-parent-bin. I am probably doing something wrong...

AshishMotanamGurunadham · 2021-11-02T14:05:08Z

@kczx3 you can generate lib and dist files of the branch and you can copy it in your repo node modules under carbon-graphs(replace with branch-specific lib and dist file). Hope this one will work.

kczx3 · 2021-11-02T16:36:42Z

ahhh ok. You're saying to clone and build this branch. Got it.

AshishMotanamGurunadham · 2021-11-03T16:04:56Z

@kczx3 Good to hear. Please let us know if you feel everything is ok with the changes we made.

kczx3 · 2021-11-03T16:48:51Z

Thoughts?

user@my-server:~/terra-graphs (investigate-two-zeros-bug)
$ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^7.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^6.0.0" from [email protected]
npm ERR! node_modules/eslint-plugin-jsdoc
npm ERR!   dev eslint-plugin-jsdoc@"^24.0.6" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

I'll the options listed in the output to get by it.

AshishMotanamGurunadham · 2021-11-03T16:54:56Z

Hope this will help.
https://stackoverflow.com/questions/64874754/unable-to-resolve-dependency-tree-with-eslint-config-airbnb

kczx3 · 2021-11-03T17:02:58Z

Still looks odd to me after building that branch and moving the bundle to my app.

There's two overlapping now with 0 and -4 in this case. Neither 0 or -4 make sense in this case either. Plus -5 is shown three times in a row.

AshishMotanamGurunadham · 2021-11-03T17:06:26Z

Can you describe the case, when it is happening.

kczx3 · 2021-11-03T17:52:24Z

A little hard to describe. I've got titratable med rates displayed on the y-axis and pain scores display on the y2-axis. Here's my graph config and content data:

GRAPH_DATA

{
    "bindTo": "#graphix",
    "axis": {
        "x": {
            "type": "timeseries",
            "label": "Documented Date/Time",
            "lowerLimit": "2021-11-01T04:00:00.000Z",
            "upperLimit": "2021-11-03T04:00:00.000Z"
        },
        "y": {
            "label": "Dose Rate (mcg/min)",
            "show": true,
            "lowerLimit": 0,
            "upperLimit": 4
        },
        "y2": {
            "show": true,
            "label": "Score",
            "lowerLimit": -5,
            "upperLimit": -4
        }
    }
}

CONTENT_DATA

[
    {
        "key": "meds",
        "label": {
            "display": "norepinephrine 8 mg"
        },
        "values": [
            {
                "x": "2021-11-01T04:00:00Z",
                "y": 3
            },
            {
                "x": "2021-11-01T09:00:00Z",
                "y": 2
            },
            {
                "x": "2021-11-01T15:00:00Z",
                "y": 0
            },
            {
                "x": "2021-11-02T10:50:00Z",
                "y": 2
            },
            {
                "x": "2021-11-02T11:00:00Z",
                "y": 4
            },
            {
                "x": "2021-11-02T12:00:00Z",
                "y": 2
            },
            {
                "x": "2021-11-02T13:00:00Z",
                "y": 0
            }
        ],
        "yAxis": "y"
    },
    {
        "key": "scores",
        "label": {
            "display": "Richmond Agitation Sedation Scale"
        },
        "shape": {
            "path": {
                "d": "M24 0l24 24-24 24L0 24 24 0z"
            },
            "options": {
                "x": -6.2,
                "y": -6,
                "scale": 0.25
            }
        },
        "color": "#176ba0",
        "values": [
            {
                "x": "2021-11-01T04:00:00Z",
                "y": -4
            },
            {
                "x": "2021-11-01T06:00:00Z",
                "y": -4
            },
            {
                "x": "2021-11-01T08:00:00Z",
                "y": -4
            },
            {
                "x": "2021-11-01T10:00:00Z",
                "y": -4
            },
            {
                "x": "2021-11-01T13:00:00Z",
                "y": -4
            },
            {
                "x": "2021-11-01T16:00:00Z",
                "y": -4
            },
            {
                "x": "2021-11-01T18:00:00Z",
                "y": -4
            },
            {
                "x": "2021-11-02T00:00:00Z",
                "y": -4
            },
            {
                "x": "2021-11-02T04:00:00Z",
                "y": -4
            },
            {
                "x": "2021-11-02T06:00:00Z",
                "y": -5
            },
            {
                "x": "2021-11-02T08:00:00Z",
                "y": -5
            },
            {
                "x": "2021-11-02T12:00:00Z",
                "y": -5
            },
            {
                "x": "2021-11-02T18:00:00Z",
                "y": -5
            },
            {
                "x": "2021-11-03T00:00:00Z",
                "y": -5
            },
            {
                "x": "2021-11-03T04:00:00Z",
                "y": -5
            }
        ],
        "yAxis": "y2"
    }
]

Give it a try yourself.

AshishMotanamGurunadham · 2021-11-04T15:11:59Z

@kczx3 hope this updated branch will fix having two zeros on y or y2axis. And coming to overlapping ticks looks like it is a new bug that you can raise in here so that we can start working on it.

AshishMotanamGurunadham · 2021-11-08T14:54:03Z

@kczx3 is everything going well with the issue? Are you still seeing two zero's on y or y2 axes?

kczx3 · 2021-11-08T20:54:47Z

I was out the office the last two days of last week so just getting to this. It seems those changes fix the issue with the numbers repeating (although now they aren't showing as whole integer ticks even though the data points for y2 are all integers).

I can log something new for the overlapping tick marks.

AshishMotanamGurunadham · 2021-11-08T23:09:04Z

@kczx3 You cannot set ticks as integers in that position because if you do so you will end up having repeating values on axis, which will lead us back to the issue. That is the reason why we decided to show actual values on ticks in this case.

kczx3 added 🚧 Blocked: Accessibility Input 🚧 Blocked: Engineering Input 🚧 Blocked: Functional Input 🚧 Blocked: Reporter Input Needed 🚧 Blocked: UX Input labels Aug 31, 2021

ryanthemanuel assigned AshishMotanamGurunadham Sep 1, 2021

AshishMotanamGurunadham closed this as completed Sep 27, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Second y-axis showing overlapping value/grid line #226

Second y-axis showing overlapping value/grid line #226

kczx3 commented Aug 31, 2021

AshishMotanamGurunadham commented Sep 27, 2021

kczx3 commented Nov 1, 2021

AshishMotanamGurunadham commented Nov 1, 2021

kczx3 commented Nov 1, 2021

AshishMotanamGurunadham commented Nov 1, 2021

kczx3 commented Nov 2, 2021

AshishMotanamGurunadham commented Nov 2, 2021

kczx3 commented Nov 2, 2021

AshishMotanamGurunadham commented Nov 3, 2021

kczx3 commented Nov 3, 2021

AshishMotanamGurunadham commented Nov 3, 2021

kczx3 commented Nov 3, 2021

AshishMotanamGurunadham commented Nov 3, 2021

kczx3 commented Nov 3, 2021

AshishMotanamGurunadham commented Nov 4, 2021

AshishMotanamGurunadham commented Nov 8, 2021

kczx3 commented Nov 8, 2021

AshishMotanamGurunadham commented Nov 8, 2021

Second y-axis showing overlapping value/grid line #226

Second y-axis showing overlapping value/grid line #226

Comments

kczx3 commented Aug 31, 2021

Bug Report

Description

Graphs affected

Steps to Reproduce

Link to CodeSandbox

Additional Context / Screenshots

Expected Behavior

Possible Solution

Environment

@ Mentions

AshishMotanamGurunadham commented Sep 27, 2021

kczx3 commented Nov 1, 2021

AshishMotanamGurunadham commented Nov 1, 2021

kczx3 commented Nov 1, 2021

AshishMotanamGurunadham commented Nov 1, 2021

kczx3 commented Nov 2, 2021

AshishMotanamGurunadham commented Nov 2, 2021

kczx3 commented Nov 2, 2021

AshishMotanamGurunadham commented Nov 3, 2021

kczx3 commented Nov 3, 2021

AshishMotanamGurunadham commented Nov 3, 2021

kczx3 commented Nov 3, 2021

AshishMotanamGurunadham commented Nov 3, 2021

kczx3 commented Nov 3, 2021

AshishMotanamGurunadham commented Nov 4, 2021

AshishMotanamGurunadham commented Nov 8, 2021

kczx3 commented Nov 8, 2021

AshishMotanamGurunadham commented Nov 8, 2021