aeTimeline x-axis option to show date instead of N?

[MayaGans]

Hey hey!! Okay this is a wild one.

I wanted to put a note here that I'm working on making a baby PR (with your blessing) to give the user the option to show dates instead of numbers on the x-axis on aeTimeline:

in the aeTimeline.js file it'd require this small xhange where I hijack the existing range and just change the domain

let dateFormat = d3.time.format("%Y-%m-%d").parse;

// is there a nicer way to do this? I want the extent of both the start and end date... 
let timeScale = d3.time.scale()
            .domain(d3.extent(
                [
                   this.raw_data.map(x => dateFormat(x.ASTDT)),
                   this.raw_data.map(x => dateFormat(x.AENDT))
                 ]
                   .flat()
                ))
            .range(this.x.range())

 var x2Axis = d3.svg
            .axis()
            .scale(timeScale)
            .orient('top')
            .tickFormat(d3.time.format("%Y-%m-%d"))

I'm thinking we can maybe wrap this all up in an if statement in case the user wants to see the current numerical values on the x-axis? Something kinda like this by default.

setting = {
   x_to_date = false
}

and if set to true we use this date shenanigans? What do you think? Hope this makes kind of sense... Also totally cool if you hate this and just wanna close it! 🤣

[MayaGans]

Also can I throw some shade that we're using d3 V3 when we're on 7 now. I so badly want to refactor, googling the old API was not fun @jwildfire !! 😆

[MayaGans]

Okay more musings..... Talking to @kodesiba and it might make sense to add to mapping "setting.time_unit" and set that to either day or date, and if date use the code above otherwise just use the numeric scale in DY??

[jwildfire]

A few thoughts:

• Your code looks reasonable to me at first glance, but ...
• ... we probably want to parameterize the date variables (x.AESTDT -> x[settings.start_date)), and ...
• ... I remember getting date axes to work (and getting dates to parse in the correct format) as being a bit of a pain (or at least they were in D3 v3!), so I don't think we ever added one to a reusable tool. Certainly did them in one-off charts pretty regularly, but the data munging gets nasty fast. Certainly not impossible though. @samussiah @pburnsdata - feel free to weigh in if you remember it differently.
• We do have multiple axis types in outlier explorer, so digging through that code might give you some ideas about how to implement. Would be nice to just have toggle via a dropdown, but @kodesiba's proposal could work too, I'd think.
• I think the PR should probably be in the ae-timelines js library instead of in safetyCharts itself which means ...
• ... we'd probably want to make a fork in the safetygraphics org since I don't think anyone is left to maintain the Rho versions of the repos.
• Finally, These js repos are all waaaaaaay out of date and need a major refactor. Most importantly, we need to remove the webcharts dependency and just rewrite them directly using d3 (not v3) or pick another charting library that can support the bulk of the functionality. It's a pretty big effort, but @samussiah and I are diving in to something a little bit related now, so might have some decent ideas about how to approach that later this year. That is all to say: invest time here with care, since it's very likely a re-write is coming eventually.

So - that was probably way more than you wanted to know, BUT if this still sounds like fun, I'm more than happy to support it :) Just let us know if you want to move forward and @samussiah or I can create safetygraphics/ae-timelines and we can find someone from the old crew (@samussiah @pburnsdata @bzkrouse @nandriychuk) who can help with code reviews, etc.

[MayaGans]

Thanks for your comments!!! That all makes a TON of sense and it's so classic that I thought I'd make some small change and as I dug deeper this is a lot more complicated... Happy to put a pin in this since I thought it was a small idea but it looks like it'd require a major overhaul [but also I agree we totally need to leverage the setting and I'm thinking maybe you can supply a vector so like if you put your start and end date as DY you get day, if you put DT you get date, and if you put both you get the toggle? Maybe?)

I'd LOVE to help but I am super curious about your refactor and don't want to step on your toes so maybe I can help later in the year when the time comes? It'd be silly to do any redundant work but you know I always love helping with D3 stuff!

And now for something completely different....

Okay so this is a bit off the rails/dream journal/probably entirely out of scope but I'd also love to talk about refactoring these charts at a high level because Quarto uses ES6 modules AND supports observable chunks so we get the latest version of D3 in documents for free and if we modularize the charts/code we could do data stuff in R and then pass it over to an observable chunk like this and I think it'd be kind of SICK?!

```{r}
dat <- safetyData_stuff %>%
  make_your_plot_and_settings()

# magic function to pass R data to JS
# you can even pass shiny reactives!
ojs_render(dat = x)

```{ojs}
aeTimeline(x.data, x.settings)

````{ojs}
import { aeTimeline } from "library_location"

Just a fun thought since you mentioned a refactor anyways (and I'd be SO down to help with this!) happy to close this and move any aeTimeline convo to that repo, but it sounds like I'm gonna hurry up and do nothing 😛

[samussiah]

clinical-timelines supports this feature (app, configuration, implementation) so I don't think it would be too difficult. As far as rewriting the library, the nice thing is we already have the specs and the chart itself should translate well to other charting library. The framework and interactivity might take a little more effort.

[jwildfire]

Yes! clinical-timelines for the win. A PR to add that a widget using that repo to safetyCharts with settings for a prettier AE timeline would definitely make sense.

[jwildfire]

Filed #135 to cover this moving forward.