Fandom Developers Wiki
Advertisement

Timeline is an alternative to EasyTimeline created in Lua.

Installation[]

Create a module (for example Module:Timeline) on your wiki and paste this code in:

return require('Dev:Timeline')

Usage[]

Create a configuration module (for example Module:Timeline/Data):

return {
    from = 'dd/mm/yyyy',
    till = 'dd/mm/yyyy',
    dataset = {
        {
            name = 'Label 1',
            bars = {
                { from = 'dd/mm/yyyy', till = 'dd/mm/yyyy', bar_type = 'my_bar_type' }
            }
        }
    },
    bar_types = {
        my_bar_type = {
            legend = 'My Bar Type',
            color = 'red'
        }
    }
}

Make sure to replace dd/mm/yyyy with actual dates.

Then use it on a page:

{{#invoke:(module name)|create|(config name)}}

For example:

{{#invoke:Timeline|create|Timeline/Data}}

Examples[]


Label 1
Label 1
  • Red Bar:
    30/06/2015 – 26/01/2017
Label 2
Label 2
  • Red Bar:
    11/01/2016 – 21/08/2017
  • Gradient Bar:
    21/08/2017 – 16/03/2018
Label 3
Label 3
  • Gradient Bar:
    30/06/2015 – 30/06/2016
  • Gradient Bar:
    01/01/2017 – 17/06/2018
2016
2017
2018
Gradient Bar
Red Bar


return {
    from = '30/06/2015',
    till = '17/06/2018',
    dataset = {
        {
            name = 'Label 1',
            bars = {
                { from = 'start', till = '26/01/2017', bar_type = 'red' }
            }
        },
        {
            name = 'Label 2',
            bars = {
                { from = '11/01/2016', till = '21/08/2017', bar_type = 'red' },
                { from = '21/08/2017', till = '16/03/2018', bar_type = 'blue' }
            }
        },
        {
            name = 'Label 3',
            bars = {
                { from = 'start', till = '30/06/2016', bar_type = 'blue' },
                { from = '01/01/2017', till = 'end', bar_type = 'blue' }
            }
        }
    },
    bar_types = {
        red = {
            legend = 'Red Bar',
            color = 'red'
        },
        blue = {
            legend = 'Gradient Bar',
            color = 'linear-gradient(to right, blue, aqua, blue)'
        }
    },
    style = {
        legend_columns = 2
    }
}

External examples[]

Configuration[]

Root object[]

Property Type Description Required
from string – dd/mm/yyyy format timestamp or now Start date for timeline YES
till string – dd/mm/yyyy format timestamp or now End date for timeline YES
dataset table of Labels Labels for the timeline YES
bar_types key-value table of BarTypes List of bar types YES
style Style Optional styling for the table NO
hidden Hidden Hide timeline elements NO

Label[]

Property Type Description Required
name string Display name YES
bars table of Bars List of bars YES

Bar[]

Property Type Description Required
from string – dd/mm/yyyy format timestamp, now, start or end Start date for the bar YES
till string – dd/mm/yyyy format timestamp, now, start or end End date for the bar YES
bar_type string - name (key) of a BarType Bar type YES

BarType[]

Property Type Description Required
legend string Display name of the bar NO
color CSS background value Color of the bar YES
order number Display order NO

NOTE: Any background value is permitted (RGB, HEX, linear-gradient etc.).

Style[]

NOTE: All of those values are optional.

Property Type Description Default
background_color CSS background-color value Background of the chart Inverse of wiki's text color
text_color CSS color value Text color of the chart Wiki's text color
timeline_padding number Padding around the timeline 4
labels_width number Width taken by labels 120
bar_height number Height of a bar (some font sizes are also dependent on it) 16
bar_margin number Margin between bars 8
chart_margin number Margin between chart and labels 10
chart_major CSS color value Color of timeline years indicator Wiki's text color
chart_minor CSS color value Color of timeline months indicator Wiki's text color with 50% alpha
bar_background CSS background-color value Background behind bars Timeline's background color
bar_alpha number Opacity of background behind bars 50
legend_columns number Columns of text in the legend 3
label_format string Formatting for each label, where $name is replaced by label name None

Hidden[]

Property Type Description Default
timeline bool Hides year numbers under the chart false
legend bool Hides the legend false
background bool Hides background behind the chart false
Advertisement