Timeline API x-axis y-coordinates property

[miyagiborn]

Request:
A property on the timeline API to allow consumers to change the y-coordinate of the x-axis line relative to the svg container.

Reason:

.carbon-axis {
  transform: translate(0px, -3px)
}

Above css styling works in Chrome, but does not work in IE as it does not support transformations of svg elements.

[Veera81]

• Could you provide the screenshots? and code to reproduce the issue?

• Which operating system are you using?

• Are you seeing the same issue in edge, firefox?

[miyagiborn]

I am using Windows.

For simplicity's sake, I've used https://engineering.cerner.com/carbon-graphs/#/timeline/simple as an example.

Original Timeline implementation

An example of what we are trying to achieve using CSS transformation in CHROME (works)

Not working in IE

It is a known issue that CSS transformation on svg elements are not supported for IE. Firebox seems to be supported but have not tested. https://caniuse.com/#search=transform

So as a consumer of carbon timeline api, is there currently any property that allows me to move the x-axis up or down as per the screenshot?

[Veera81]

@leducquan What's the reason to move x-axis up or down? Is there any specific requirement?

[miyagiborn]

@Veera81 Yes, there is a requirement for our Event timeline to move the x-asis up slightly from the original position as we require custom positioning. Please see https://jira2.cerner.com/browse/UKIPDEV-1234 for more details.

[Veera81]

@leducquan Thanks for providing the details.

Have you tried other than transform functions?

[miyagiborn]

@Veera81 , what other way do you suggest?

[Veera81]

@leducquan Can we close this issue? Looks like the JIRA is closed

[miyagiborn]

no please keep this open, we still need a property exposed to us to allow us to shift the x-axis up or down.

[erinplourde]

This is needed to help allow the event timeline to show lines connected to the plotted symbols. The event timeline needs to be moved up so that there is enough room to place an event lines beneath.

Please see callouts below:

[mraplumb]

@leducquan the design provided above by @erinplourde is the same as requested for issue cerner/carbon-graphs#225. Would this meet your needs if we provide the functionality to opt into the shift/padding and the lines separately? In your original screenshots, the shapes were rendered below the eventline. Is this required for your use case? We would prefer keeping the shapes on the event line as noted in the design above.

[miyagiborn]

@mraplumb Would be great. Please keep the shapes on the event line as per the design posted by @erinplourde , my above example was just to illustrate that we needed a property to allow us to shift the event line up or down.

[AshishMotanamGurunadham]

@erinplourde Looks like his exact requirement in this issue is to add an extra property which will move axis up and down as shown in below image.

Simple Timeline graph:

What consumer is expecting from us:

Please let us know UX team thoughts on this issue.

[mraplumb]

@erinplourde to clarify, the request from @leducquan appears to keep the shapes below the timeline which is different from the visual you previously provided where the shapes remain on the timeline.

[erinplourde]

@mraplumb @AshishMotanamGurunadham Hmm I see... Is there a way we are able to move the axis with the symbols? I would like to prevent consumers from plotting the symbols below the timeline but I understand what the stella team is trying to achieve.

[mraplumb]

I'll let @AshishMotanamGurunadham correct me if I'm wrong but I believe the consumer would provide use the same information they do today but could provide an additional value which moves the timeline up or down. Technically speaking, we can move the timeline independent of the shapes or move them together.

If we keep the shapes on the timeline, are we really just talking about extending the distance between the timeline and the tic values (i.e. 10am, 11am...etc.)?

[AshishMotanamGurunadham]

@mraplumb @AshishMotanamGurunadham Hmm I see... Is there a way we are able to move the axis with the symbols? I would like to prevent consumers from plotting the symbols below the timeline but I understand what the stella team is trying to achieve.

@erinplourde Yes we can able to move the axis with symbols. But as you know looks like stella team only want to move axis up and down.

Even if we implement a feature which move symbols with aixs, i think it won't be much useful for stella team. Correct me if am wrong.

[mraplumb]

After discussion, we have decided to make an update to allow increasing the padding below the timeline graph, but the shapes will remain on the timeline itself.