Make a pretty LTS graph

[locks]

See @mixonic's graph in Announcing Ember's First LTS. Node's LTS schedule also has a similar graph.

Using d3 possibly? Should be self-updating with manual overrides. This could be developed as a tidy lil' component so we don't bikeshed about where it should go.

[jkumar712]

Now, this is an image every time we redesigned and updated! So we have to do it for dynamically update of a graph for our releases? Shall I contribute?

[mixonic]

The image from the latest blog post has a JPG and sketch file here: https://github.com/emberjs/website/tree/master/source/images/blog/2017-10

@jkumar712 right, the idea is to have a dynamic SVG version of that graphic (or something similar) for the builds page.

[jkumar712]

@mixonic Shall I give it a try with using d3?

[acorncom]

@jkumar712 If you have the time, we'd be delighted to see something, yes! 😀 One thought: if it is just as easy to do this graph without D3, it would be nice to have fewer dependencies in the long-run. But if it's a pain, please use what you need to do implement this.

Apologies about the delay in response!

[mansona]

that node one is generated using the LTS module https://www.npmjs.com/package/lts

It would be good to use the same standard for the json format and use that library if at all possible no?

[acorncom]

@mansona that sounds like a great idea, yes

[jenweber]

Some additional notes:

Right now, we don't have a good diagram that shows off some of Ember's main strengths: our release cycle, LTS support, and commitment to semver.

We should create a component with a release schedule diagram that shows this and can be included in the builds/releases app.

The final export should be an SVG/web thing so we can easily edit it in the future (i.e. not a jpeg). For best success, don't get fancy with opacity etc. See this video and a twiddle demo for examples. If you export from a vector editor, the final SVG should also be run through an optimizer tool.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mansona]

So this has been somewhat implemented in https://github.com/ember-learn/ember-website/pull/334 and I have mentioned to @jenweber about potentially incorporating it into https://github.com/ember-learn/ember-website/pull/351 but if we don't think it fits then we can close this issue and close this PR 👍

[stale[bot]]

This issue has been automatically marked stale. If this issue is something that still needs work, please add a comment and it will remain open, otherwise it will close in 7 days. You are welcome to open a new issue if you miss the window. Thanks!

[mansona]

let's keep this open 👍

[fozy81]

Some additional notes, after a little investigating and trying out a few approaches (keep in mind I'm a complete novice and barely know enough SVG to be dangerous!):

General considerations

• Do we require both a stylised semver gant chart and additionally a maintenance schedule (bug fixes/security)? They are slightly different and may be too much info to put on one diagram/chart.
• How best to pull together/centralise all the data/dates for all versions, releases, lts, maintenance etc whilst maintaining a single source of truth. Is there potential for further automation (whilst allowing manual tweaks)?

Using npmjs lts package Pros:

• Off the shelf
• Easy data format
• Displays maintenance schedule and timings clearly

Cons:

• Uses slightly different terminology than we currently use 'Current', 'Active' and 'Maintenance' - so may take extra work in terms of re-drafting / describing these terms across the releases pages.
• Doesn't show the gant chart style semver 'merging'
• Adds dependencies (D3 etc)

Rolling our own D3, SVG (or Highcharts?) diagram Pros:

• Can customise

Cons:

• Dealing with date time (in pure svg?!)
• Potentially adds dependencies (D3, Highcharts-gant.js etc)

Work so far A rudimentary svg maintenance chart for LTS only (as a glimmer component):

Happy to help on this further (which ever approach is selected).