Week Styling - Githubissues

semisolidwhale commented 3 years ago

I'm trying to replicate the week styling as shown in the vis-timeline examples (https://visjs.github.io/vis-timeline/examples/timeline/styling/weekStyling.html).

I've tried a number of variations along the lines of:

timevis() %>%
  setOptions(
    list(
      locale = 'de'
      ,timeAxis = list(scale = 'week', step = 1)
      ,format = list(minorLabels = list(week = 'w')
                     #,majorLabels = list(month = 'YYYY')
                     )
      #,showWeekScale = TRUE
      )
  )

Instead of the expected result with a series of weekly level minor labels and monthly major labels as shown in the timeline example, this appears to produce a single label showing a single week number that increases/decreases depending on horizontal movement and/or zoom level.

As shown above, I've also tried specifically setting the major labels and enabling the week scale option (as well as a number of other options shown in the https://visjs.github.io/vis-timeline/docs/timeline/#Localization documentation) but nothing that I've attempted has produced the intended results.

I acknowledge that this may not be an issue at all as it's entirely possible that I'm simply overlooking something here in terms of my formatting of the lists or the way I'm approaching the specification of these arguments. Any guidance would be appreciated.

daattali commented 3 years ago

Thanks for the detailed issue.

First of all, it seems like using any value other than "week" does work (you might already know that).

I looked at the documentation, and they say that "week" requires the locale to be set. So then I looked at the documentation for locale and it says that moment.js needs to be included. So I tried including the javascript https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js and it still didn't work.

I don't have time to dive into this too much more, but I'm not sure if this is a timevis issue or not. In order to determine that, could you see if you're able to get the week to work using javascript alone (not in R) using visjs version 4.16.1?

semisolidwhale commented 3 years ago

Thanks for the response, appreciate it and all the other work you've done with this package and others that I've benefited from.

After taking a closer look at the example source, it's clear that there's more going on behind the scenes than the highlighted options settings would seem to suggest. If, for example, I run the following:

<!DOCTYPE HTML>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
  var container = document.getElementById('visualization');
  var items = [
    {id: 1, content: 'item 1', start: '2020-08-18'}
  ]

      // Configuration for the Timeline
    var options = {
      locale: 'de',
      timeAxis: {
        scale: 'week',
        step: 1
      },
      format: {
        minorLabels: {week: 'w'}
      }
    };

  var timeline = new vis.Timeline(container, items, options, {});

</script>
</body>
</html>

The output looks exactly like what was produced when using the same option settings through the timevis setOptions arguments.

As such, this does not seem to me to be a timevis issue.

With that said, do you have any recommendations for how to efficiently work with weeks or repeating 7 day increments within the context of timevis? The issue I'm encountering, and why I began exploring the week number styling, is that when a new major increment (in this case month) the starting day for the 7 day or weekly increments resets to the first weekday of the new month. Here's a quick, example:

timevis() %>%
  setOptions(
    list(
      timeAxis = list(scale = 'day', step = 7)
    )
  )

Thanks again for your efforts and guidance.

daattali commented 3 years ago

I can't give much advice here, sorry. I hoenstly never use timevis, my only usage with it was for the few days when I created this package a few years ago. But I have no practical experience with it. I'll close this issue as it's not a timevis problem.

Perhap upgrading to a newer version would fix it. There is an issue open for that, which I would welcome help with

semisolidwhale commented 3 years ago

Ah, understood and would offer to help with the update if I even vaguely had the skills to do so.

One quick, final question; when you attempted to include the https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js, how did you incorporate that into the timevis function call?

Going to continue to explore this and will post an update if I ever come up with a solution for the sake of anyone else who may come along later.

Thanks again.

daattali commented 3 years ago

I just added it to the shiny app.

ui <- fluidPage(tags$script(src = "https://..."), timevisOutput("test"))

daattali / timevis

Week Styling #101