Module:Chart data
Jump to navigation
Jump to search
Module documentation
This documentation is transcluded from Module:Chart data/doc. [edit] [history] [purge]
Module:Chart data's function main is invoked by Template:Chart data.
Module:Chart data requires Module:Array.
Module:Chart data requires Module:Chart data/Colors.
Module:Chart data requires Module:LibraryUtil.
Module:Chart data requires Module:Paramtest.
Module:Chart data requires Module:Rgba.
Module:Chart data is required by .
| Function list |
|---|
| L 23 — default L 33 — defaultOptions L 34 — _setOptions L 47 — stripNonChartJsVariables L 60 — _strip L 75 — stripInvalidValues L 110 — chart.main L 116 — chart._main L 167 — chart.convertToXYFormat L 186 — chart.generateXYFromFunc L 207 — chart.jagexInterpolation L 213 — interpolate L 222 — chart.newChart L 336 — chart:addDataSets L 353 — chart:addDataLabels L 372 — chart:setDimensions L 448 — chart:setTitle L 466 — chart:setXLabel L 488 — chart:setYLabel L 512 — chart:setXLimits L 539 — chart:setYLimits L 564 — chart:setYFormat L 583 — chart:setXFormat L 604 — chart:setRadialLimits L 627 — chart:setXAxisType L 651 — chart:setYAxisType L 675 — chart:showLegend L 690 — chart:setTooltipFormat L 705 — chart:setDatasetsPerGroup L 717 — chart:flipXY L 746 — chart:setOptions L 750 — _setOptions L 766 — chart:finish L 852 — chart:tostring L 858 — chart:debug L 879 — chart:newDataSet L 908 — dataSet:addData L 921 — dataSet:addDataPoint L 931 — dataSet:setOptions L 935 — _setOptions L 951 — dataSet:done |
Helps create the json to generate charts using Chart.js v3 through MediaWiki:Gadget-Charts-core.js.
This module is a helper module to be used by other modules; it may not be designed to be invoked directly. See RuneScape:Lua/Helper modules for a full list and more information. For a full list of modules using this helper click here
| Function | Type | Use |
|---|---|---|
_main( args ) | table/chart | Turns a table/chart object into a json string. |
convertToXYFormat( ys, [xs|{}] ) | table, table | Converts the ys array into an array of {x = n, y = y[n]} tables. If xs is already partially filled it will use {x = x[n], y = y[n]} until all values in xs are used, then it will use {x = n, y = y[n]} again for the remaining values in ys. |
generateXYFromFunc( func, start_x, end_x, [step|1] ) | function, number, number, number | Returns an arry of {x = n, y = fun(n)} tables where n ranges from start_x to end_x in step increments. Be careful when using decimal step values as floating point error can cause the generator to stop one element too soon. |
jagexInterpolation( low_chance, high_chance, start_level, end_level ) | number, number, number, number | |
newChart( [options] ) | table | Returns a new chart object. options is a table with options in the Chart.js format. Most options will be set automatically or will be set later with other functions if not already defined. Usually all you need to define here is the chart type e.g. newChart{ type = 'scatter' }. Check the modules documentation for more info. |
chart:addDataSets( ... ) | table/dataSet object | Appends all given data sets to the chart.data.datasets table. |
chart:addDataLabels( labels ) | table | Appends all items in labels to the chart.data.labels table. |
chart:setDimensions( width, [height|width], [minWidth|400], [minHeight|400], [resizable|true] ) | number/string, number/string, number/string, number/string, boolean | Sets the dimensions of the chart. If a number is given to width, height, minWidth and minHeight it will be assumed you meant pixels. You can also use strings like 100% to fill the available space, 60vw/60vh to dynamically scale the simensions to the viewport size (i.e. 60vw = 60% of browser's window width). If resizable is true, the chart can be dragged by the lower right corner to change its size. If this function is not called the default values are width = 60vw, height = 60vh, minWidth = 400px, minHeight = 400px and resizable = true. |
chart:setTitle( [text|nil], [position|'top'] ) | string, string | Sets the label title of the chart. A value of nil will remove the current title. |
chart:setXLabel( [label|nil] ) | string | Sets the label for the x axis. Only works on chart types 'line', 'bar', 'bubble' and 'scatter'. If used without arguments it will remove the current label. |
chart:setYLabel( [label|nil] ) | string | Sets the label for the y axis. Only works on chart types 'line', 'bar', 'bubble' and 'scatter'. If used without arguments it will remove the current label. |
chart:setXLimits( [min|nil], [max|nil], [step|nil] ) | number, number, number | Sets the start, stop and step size of the x axis. Any argument with a value of nil will remove that setting. Only works on chart types 'bubble' and 'scatter'. |
chart:setYLimits( [min|nil], [max|nil], [step|nil] ) | number, number, number | Sets the start, stop and step size of the y axis. Any argument with a value of nil will remove that setting. Only works on chart types 'line', 'bar', 'bubble' and 'scatter'. |
chart:setRadialLimits( [min|nil], [max|nil], [step|nil] ) | number, number, number | Sets the start, stop and step size of the r axis on polar plots. Any argument with a value of nil will remove that setting. Only works on chart types 'radar' and 'polarArea'. |
chart:setXAxisType( [type|nil] ) | string | Sets the axis type. Supported values are 'linear', 'logarithmic', 'category' and 'time'. If called without arguments it will reset back to the default value 'linear'. Only works on chart types 'bar', 'bubble', 'line' and 'scatter'. |
chart:setYAxisType( [type|nil] ) | string | Same as chart:setXAxisType() but for the y axis. Only works on chart types 'bar', 'bubble', 'line' and 'scatter'. |
chart:showLegend( val ) | boolean | Hides the legend if val is false. |
chart:setOptions( options ) | table | Sets options using Chart.js format but makes sure you only change the given settings and not accidentally delete already existing settings. i.e. using chart:setOptions{ scales = {x = {max = 100}} } while {scales = {x = {min = 0}}} already exists will result in {scales = {x = {min = 0, max = 100}}}. |
chart:flipXY() | N/A | Turn the bar chart into a horizontal one. Only has an effect on bar charts. |
chart:debug() | N/A | Pretty prints the internal structure since you can't use mw.logObject to do so. |
chart:newDataSet( [options] ) | table | Returns a new dataSet object which is also automatically added to the chart datasets table. |
dataSet:addData( data ) | table | Appends the values of data to the already existing data stored in the dataSet.data array. Using dataset.data = data will overwrite any stored data. |
dataSet:addDataPoint( data ) | number/table | Append a single value to the dataSet.data array. Same as table.insert( dataSet.data, data ). |
dataSet:setOptions( options ) | table | Sets options using Chart.js format. |
dataSet:done() | N/A | Returns the parent chart object again. |
local p = {}
local chart = require( 'Module:Chart data' )
-- This chart can then be added to a page using {{Chart data|<module name>|pie}} or {{#Invoke:<module name>|pie}}
-- It could also further be used be another module/function
function p.pie()
local plot = chart.newChart{ type = 'pie' }
plot:setDimensions( '40vw', nil, 400, nil, true ) -- Pie chart is always square
plot.colorPalette = chart.colorPalettes.green
local labels = {}
local set = plot:newDataSet()
for i = 1, 6 do
set:addDataPoint( math.floor( math.sqrt( i ) * 10 + 0.5 ) / 10 )
table.insert( labels, 'Value ' .. i )
end
plot:addDataLabels( labels )
return plot
end
return p
-------------------------------------------------------------
local p = {}
local chart = require( 'Module:Chart data' )
function p.bar()
local plot = chart.newChart{ type = 'bar' }
:setDimensions( '40%', 600, 400, 400, true ) -- Settings can be chained
:setXLabel( 'x axis label' )
:setYLabel( 'y axis label' )
for i = 1, 2 do
local set = plot:newDataSet()
for j = 1, 6 do
set:addDataPoint( math.sqrt( i*j ) )
end
set.label = 'Set ' .. i
if i == 1 then
set.color = chart.colorPalettes.green[3]
else
set.color = chart.colorPalettes.orange[3]
end
end
local labels = {}
for i = 1, 6 do
table.insert( labels, 'Value ' .. i )
end
plot:addDataLabels( labels )
return 'Some header text' .. plot -- Charts are automatically converted to strings when appended to another string
end
return p
Usage
To create a chart we need to create JSON in a format described by chart.js.
To make this a bit easier we can write a lua table instead which is then converted to a JSON using chart._main().
An example of this is Module:Chart data/xp chart, which can then be displayed on a page using {{Chart data|Chart data/xp chart|height=40vh|width=40vw}} resulting in:
{"type":"scatter","data":{"datasets":[{"data":[{"y":0,"x":1},{"y":83,"x":2},{"y":174,"x":3},{"y":276,"x":4},{"y":388,"x":5},{"y":512,"x":6},{"y":650,"x":7},{"y":801,"x":8},{"y":969,"x":9},{"y":1154,"x":10},{"y":1358,"x":11},{"y":1584,"x":12},{"y":1833,"x":13},{"y":2107,"x":14},{"y":2411,"x":15},{"y":2746,"x":16},{"y":3115,"x":17},{"y":3523,"x":18},{"y":3973,"x":19},{"y":4470,"x":20},{"y":5018,"x":21},{"y":5624,"x":22},{"y":6291,"x":23},{"y":7028,"x":24},{"y":7842,"x":25},{"y":8740,"x":26},{"y":9730,"x":27},{"y":10824,"x":28},{"y":12031,"x":29},{"y":13363,"x":30},{"y":14833,"x":31},{"y":16456,"x":32},{"y":18247,"x":33},{"y":20224,"x":34},{"y":22406,"x":35},{"y":24815,"x":36},{"y":27473,"x":37},{"y":30408,"x":38},{"y":33648,"x":39},{"y":37224,"x":40},{"y":41171,"x":41},{"y":45529,"x":42},{"y":50339,"x":43},{"y":55649,"x":44},{"y":61512,"x":45},{"y":67983,"x":46},{"y":75127,"x":47},{"y":83014,"x":48},{"y":91721,"x":49},{"y":101333,"x":50},{"y":111945,"x":51},{"y":123660,"x":52},{"y":136594,"x":53},{"y":150872,"x":54},{"y":166636,"x":55},{"y":184040,"x":56},{"y":203254,"x":57},{"y":224466,"x":58},{"y":247886,"x":59},{"y":273742,"x":60},{"y":302288,"x":61},{"y":333804,"x":62},{"y":368599,"x":63},{"y":407015,"x":64},{"y":449428,"x":65},{"y":496254,"x":66},{"y":547953,"x":67},{"y":605032,"x":68},{"y":668051,"x":69},{"y":737627,"x":70},{"y":814445,"x":71},{"y":899257,"x":72},{"y":992895,"x":73},{"y":1096278,"x":74},{"y":1210421,"x":75},{"y":1336443,"x":76},{"y":1475581,"x":77},{"y":1629200,"x":78},{"y":1798808,"x":79},{"y":1986068,"x":80},{"y":2192818,"x":81},{"y":2421087,"x":82},{"y":2673114,"x":83},{"y":2951373,"x":84},{"y":3258594,"x":85},{"y":3597792,"x":86},{"y":3972294,"x":87},{"y":4385776,"x":88},{"y":4842295,"x":89},{"y":5346332,"x":90},{"y":5902831,"x":91},{"y":6517253,"x":92},{"y":7195629,"x":93},{"y":7944614,"x":94},{"y":8771558,"x":95},{"y":9684577,"x":96},{"y":10692629,"x":97},{"y":11805606,"x":98},{"y":13034431,"x":99},{"y":14391160,"x":100},{"y":15889109,"x":101},{"y":17542976,"x":102},{"y":19368992,"x":103},{"y":21385073,"x":104},{"y":23611006,"x":105},{"y":26068632,"x":106},{"y":28782069,"x":107},{"y":31777943,"x":108},{"y":35085654,"x":109},{"y":38737661,"x":110},{"y":42769801,"x":111},{"y":47221641,"x":112},{"y":52136869,"x":113},{"y":57563718,"x":114},{"y":63555443,"x":115},{"y":70170840,"x":116},{"y":77474828,"x":117},{"y":85539082,"x":118},{"y":94442737,"x":119},{"y":104273167,"x":120},{"y":115126838,"x":121},{"y":127110260,"x":122},{"y":140341028,"x":123},{"y":154948977,"x":124},{"y":171077457,"x":125},{"y":188884740,"x":126},{"y":208545572,"x":127},{"y":230252886,"x":128},{"y":254219702,"x":129},{"y":280681209,"x":130},{"y":309897078,"x":131},{"y":342154009,"x":132},{"y":377768545,"x":133},{"y":417090179,"x":134},{"y":460504778,"x":135},{"y":508438379,"x":136},{"y":561361362,"x":137},{"y":619793069,"x":138},{"y":684306901,"x":139},{"y":755535943,"x":140}],"label":"Standard skill","borderColor":"rgba(253,127,111,1)","showLine":true,"backgroundColor":"rgba(253,127,111,0.2)","fill":false},{"data":[{"y":0,"x":1},{"y":830,"x":2},{"y":1861,"x":3},{"y":2902,"x":4},{"y":3980,"x":5},{"y":5126,"x":6},{"y":6380,"x":7},{"y":7787,"x":8},{"y":9400,"x":9},{"y":11275,"x":10},{"y":13605,"x":11},{"y":16372,"x":12},{"y":19656,"x":13},{"y":23546,"x":14},{"y":28134,"x":15},{"y":33520,"x":16},{"y":39809,"x":17},{"y":47109,"x":18},{"y":55535,"x":19},{"y":65209,"x":20},{"y":77190,"x":21},{"y":90811,"x":22},{"y":106221,"x":23},{"y":123573,"x":24},{"y":143025,"x":25},{"y":164742,"x":26},{"y":188893,"x":27},{"y":215651,"x":28},{"y":245196,"x":29},{"y":277713,"x":30},{"y":316311,"x":31},{"y":358547,"x":32},{"y":404634,"x":33},{"y":454796,"x":34},{"y":509259,"x":35},{"y":568254,"x":36},{"y":632019,"x":37},{"y":700797,"x":38},{"y":774834,"x":39},{"y":854383,"x":40},{"y":946227,"x":41},{"y":1044569,"x":42},{"y":1149696,"x":43},{"y":1261903,"x":44},{"y":1381488,"x":45},{"y":1508756,"x":46},{"y":1644015,"x":47},{"y":1787581,"x":48},{"y":1939773,"x":49},{"y":2100917,"x":50},{"y":2283490,"x":51},{"y":2476369,"x":52},{"y":2679917,"x":53},{"y":2894505,"x":54},{"y":3120508,"x":55},{"y":3358307,"x":56},{"y":3608290,"x":57},{"y":3870846,"x":58},{"y":4146374,"x":59},{"y":4435275,"x":60},{"y":4758122,"x":61},{"y":5096111,"x":62},{"y":5449685,"x":63},{"y":5819299,"x":64},{"y":6205407,"x":65},{"y":6608473,"x":66},{"y":7028964,"x":67},{"y":7467354,"x":68},{"y":7924122,"x":69},{"y":8399751,"x":70},{"y":8925664,"x":71},{"y":9472665,"x":72},{"y":10041285,"x":73},{"y":10632061,"x":74},{"y":11245538,"x":75},{"y":11882262,"x":76},{"y":12542789,"x":77},{"y":13227679,"x":78},{"y":13937496,"x":79},{"y":14672812,"x":80},{"y":15478994,"x":81},{"y":16313404,"x":82},{"y":17176661,"x":83},{"y":18069395,"x":84},{"y":18992239,"x":85},{"y":19945833,"x":86},{"y":20930821,"x":87},{"y":21947856,"x":88},{"y":22997593,"x":89},{"y":24080695,"x":90},{"y":25259906,"x":91},{"y":26475754,"x":92},{"y":27728955,"x":93},{"y":29020233,"x":94},{"y":30350318,"x":95},{"y":31719944,"x":96},{"y":33129852,"x":97},{"y":34580790,"x":98},{"y":36073511,"x":99},{"y":37608773,"x":100},{"y":39270442,"x":101},{"y":40978509,"x":102},{"y":42733789,"x":103},{"y":44537107,"x":104},{"y":46389292,"x":105},{"y":48291180,"x":106},{"y":50243611,"x":107},{"y":52247435,"x":108},{"y":54303504,"x":109},{"y":56412678,"x":110},{"y":58575824,"x":111},{"y":60793812,"x":112},{"y":63067521,"x":113},{"y":65397835,"x":114},{"y":67785643,"x":115},{"y":70231841,"x":116},{"y":72737330,"x":117},{"y":75303019,"x":118},{"y":77929820,"x":119},{"y":80618654,"x":120},{"y":83370445,"x":121},{"y":86186124,"x":122},{"y":89066630,"x":123},{"y":92012904,"x":124},{"y":95025896,"x":125},{"y":98106559,"x":126},{"y":101255855,"x":127},{"y":104474750,"x":128},{"y":107764216,"x":129},{"y":111125230,"x":130},{"y":114558777,"x":131},{"y":118065845,"x":132},{"y":121647430,"x":133},{"y":125304532,"x":134},{"y":129038159,"x":135},{"y":132849323,"x":136},{"y":136739041,"x":137},{"y":140708338,"x":138},{"y":144758242,"x":139},{"y":148889790,"x":140},{"y":153104021,"x":141},{"y":157401983,"x":142},{"y":161784728,"x":143},{"y":166253312,"x":144},{"y":170808801,"x":145},{"y":175452262,"x":146},{"y":180184770,"x":147},{"y":185007406,"x":148},{"y":189921255,"x":149},{"y":194927409,"x":150}],"pointStyle":"crossRot","pointRadius":6,"label":"Elite skill","borderColor":"rgba(126,176,213,1)","showLine":true,"backgroundColor":"rgba(126,176,213,0.2)","fill":false}]},"options":{"maintainAspectRatio":false,"scales":{"y":{"scaleLabel":{"display":true,"labelString":"Experience"}},"x":{"scaleLabel":{"display":true,"labelString":"Level"}}},"tooltips":{"mode":"x","intersect":false,"position":"nearest"}}}To make the construction of this table a bit easier, the chart class is provided which internally has the extact same structure as if we manually created the table. The chart class just sets a bunch of default settings based on what chart type you are creating; it also makes it a lot easier to deal with the colors of your data and provides a bunch of functions to easily set axis labels, axis start and stop values, axis type, etc.
Create new chart object
local chart = require( 'Module:Chart data' )
local plot = chart.newChart{ type = 'scatter' } -- If no type is given it will default to 'scatter'
plot.fill = true -- Show background, exact behaviour depends on chart type
-- The above two lines are equivalent to
local plot = chart.newChart{ type = 'scatter', fill = true }
Chaining functions
local plot = chart.newChart()
:setDimensions( '40vh', '50vw', '400px', '400px', true )
:setTitle( 'My title' )
-- Or
local plot = chart.newChart()
plot:setDimensions( '40vh', '50vw', '400px', '400px', true )
plot:setTitle( 'My title' )
Datasets
local plot = chart.newChart()
local dataSet = plot:newDataSet() -- This data set is already added to plot so you don't need to use plot:addDataSets( dataSet )
dataSet.data = chart.generateXYFromFunc( ... )
dataSet:addDataPoint( { x=5, y=10} ) -- Append another data point to the already existing data
dataSet:setOptions{ fill = true }
-- Or
plot:newDataSet{ data = chart.generateXYFromFunc( ... ), fill = true }
:addDataPoint( { x=5, y=10 } )
You can also add datasets that you created somewhere else. The downside is that you then can't use addData/addDataPoint/setOptions functions on that set.
local set = chart.generateXYFromFunc( ... )
plot:addDataSets( set )
Datasets can also chain functions
local plot = chart.newChart()
:newDataSet{ data = myDataSet }
:addDataPoint( { x=5, y=10 } )
:done()
:newDataSet{ data = anotherDataSet }:done()
Color Palettes
chart.colorPalettes has a few pre-defined color Palettes. These Palettes are made up of Module:Rgba objects. Colors will default to black if there are more datasets than colors in the palette.
You can set your prefered Palette for your chart with myChart.colorPalette = chart.colorPalettes.blue, in case of chart type bar of horizontalbar your can also set it per data set myDataSet.colorPalette = chart.colorPalettes.orange or if you want all bars of a given set to be the same color myDataSet.color = chart.colorPalettes.orange[3].
It is possible to define your own color Palette as an array of Module:Rgba objects.
The chart class has the following color opions:
backgroundAlpha- sets thergba:fade()value for background colors.hoverLightenValue- sets thergba:lighten()value for when you hover over a data point.hoverAlpha- sets thergba:fade()value for when you hover over a data point.hoverSaturateValue- sets thergba:saturate()value for when you hover over a data point.
Their default value depend on the cart type but you can manually set them using:
chart:setOptions{
backgroundAlpha = <number>,
hoverLightenValue = <number>,
hoverAlpha = <number>,
hoverSaturateValue = <number>
}
| Code |
|
function p.colorQualitative()
local plot = chart.newChart{ type = 'scatter' }
:setDimensions( '10vw', '10vh', 300, 300, true )
:setTitle( 'Qualitative' )
plot.options.colorPalette = chart.colorPalettes.qualitative
for i = 1, #plot.options.colorPalette do
local set = plot:newDataSet()
set.data = chart.generateXYFromFunc( function(x) return i*x^2 end, 0, 50 )
set.label = 'Set ' .. i
end
return plot
end
|
| Code |
|
function p.colorBlue()
local plot = chart.newChart{ type = 'scatter' }
:setDimensions( '10vw', '10vh', 300, 300, true )
:setTitle( 'Blue' )
plot.options.colorPalette = chart.colorPalettes.blue
for i = 1, #plot.options.colorPalette do
local set = plot:newDataSet()
set.data = chart.generateXYFromFunc( function(x) return i*x^2 end, 0, 50 )
set.label = 'Set ' .. i
end
return plot
end
|
| Code |
|
function p.colorGreen()
local plot = chart.newChart{ type = 'scatter' }
:setDimensions( '10vw', '10vh', 300, 300, true )
:setTitle( 'Green' )
plot.options.colorPalette = chart.colorPalettes.green
for i = 1, #plot.options.colorPalette do
local set = plot:newDataSet()
set.data = chart.generateXYFromFunc( function(x) return i*x^2 end, 0, 50 )
set.label = 'Set ' .. i
end
return plot
end
|
| Code |
|
function p.colorBlueGreen()
local plot = chart.newChart{ type = 'scatter' }
:setDimensions( '10vw', '10vh', 300, 300, true )
:setTitle( 'BlueGreen' )
plot.options.colorPalette = chart.colorPalettes.blueGreen
for i = 1, #plot.options.colorPalette do
local set = plot:newDataSet()
set.data = chart.generateXYFromFunc( function(x) return i*x^2 end, 0, 50 )
set.label = 'Set ' .. i
end
return plot
end
|
| Code |
|
function p.colorOrange()
local plot = chart.newChart{ type = 'scatter' }
:setDimensions( '10vw', '10vh', 300, 300, true )
:setTitle( 'Orange' )
plot.options.colorPalette = chart.colorPalettes.orange
for i = 1, #plot.options.colorPalette do
local set = plot:newDataSet()
set.data = chart.generateXYFromFunc( function(x) return i*x^2 end, 0, 50 )
set.label = 'Set ' .. i
end
return plot
end
|
| Code |
|
function p.colorOverflow()
local plot = chart.newChart{ type = 'scatter' }
:setDimensions( '10vw', '10vh', 300, 300, true )
:setTitle( 'Color overflow' )
:showLegend( false )
plot.options.colorPalette = chart.colorPalettes.orange
for i = 1, 10 do
local set = plot:newDataSet()
set.data = chart.generateXYFromFunc( function(x) return i*x^2 end, 0, 50 )
set.label = 'Set ' .. i
end
return plot
end
|
| Code |
|
function p.customColorPalette()
local plot = chart.newChart{ type = 'scatter' }
:setDimensions( '10vw', '10vh', 300, 300, true )
:setTitle( 'Custom color palette' )
plot.options.colorPalette = { -- You can define a custom color palette
chart.rgba.new( 0, 0, 0 ),
chart.rgba.new( 126, 0, 0 ),
chart.rgba.new( 0, 126, 0 ),
chart.rgba.new( 0, 0, 126 ),
}
for i = 1, #plot.options.colorPalette do
local set = plot:newDataSet()
set.data = chart.generateXYFromFunc( function(x) return i*x^2 end, 0, 50 )
set.label = 'Set ' .. i
end
-- Or set the color on a per set basis
plot:newDataSet{
data = chart.generateXYFromFunc( function(x) return 7*x^2 end, 0, 50 ),
label = 'Set x',
color = chart.rgba.new( 255, 0, 0 )
}
return plot
end
|
| Code |
|
function p.colorOptions()
local plot = chart.newChart{ type = 'bar' }
:setDimensions( '10vw', '10vh', 300, 300, true )
:setTitle( 'Color options' )
plot:setOptions{
backgroundAlpha = 0.8,
hoverLightenValue = 0.5,
hoverAlpha = 0.4,
hoverSaturateValue = 1.5,
}
for i = 1, 2 do
local set = plot:newDataSet()
for j = 1, 6 do
set:addDataPoint( math.sqrt( i*j ) )
end
set.label = 'Set ' .. i
if i == 1 then
set.color = chart.colorPalettes.green[3]
else
set.color = chart.colorPalettes.orange[3]
end
end
local labels = {}
for i = 1, 6 do
table.insert( labels, 'Value ' .. i )
end
plot:addDataLabels( labels )
return plot
end
|
Examples
Prefix text messageAffix text message
| Code |
|
function p.line()
local plot = chart.newChart{ type = 'line' }
:setDimensions( '10vw', '10vh', 300, 300, true )
:setTitle( 'Line chart' )
:setXLabel( 'x axis label' )
:setYLabel( 'y axis label' )
plot.options.fill = true
for i = 1, 2 do
local set = plot:newDataSet()
set.data = { i^2, (i+1)^2, (i+2)^2, (i+3^2), (i+4)^2 }
set.label = 'Set ' .. i
set.borderDash = {5, 5}
end
local labels = {}
for i = 1, 5 do
table.insert( labels, 'Value ' .. i )
end
plot:addDataLabels( labels )
return 'Prefix text message' .. plot .. 'Affix text message'
end
|
| Code |
|
function p.bar()
local plot = chart.newChart{ type = 'bar' }
:setDimensions( '10vw', '10vh', 300, 300, true )
:setTitle( 'Bar chart' )
:setXLabel( 'x axis label' )
:setYLabel( 'y axis label' )
for i = 1, 2 do
local set = plot:newDataSet()
for j = 1, 6 do
set:addDataPoint( math.sqrt( i*j ) )
end
set.label = 'Set ' .. i
if i == 1 then
set.color = chart.colorPalettes.green[3]
else
set.color = chart.colorPalettes.orange[3]
end
end
local labels = {}
for i = 1, 6 do
table.insert( labels, 'Value ' .. i )
end
plot:addDataLabels( labels )
return plot
end
|
| Code |
|
function p.horizontalBar()
local plot = chart.newChart{ type = 'bar' }
:setDimensions( '10vw', '10vh', 300, 300, true )
:setTitle( 'HorizontalBar chart' )
:setXLabel( 'x axis label' )
:setYLabel( 'y axis label' )
:flipXY() -- This is the important line
for i = 1, 2 do
local set = plot:newDataSet()
for j = 1, 6 do
set:addDataPoint( math.sqrt( i*j ) )
end
set.label = 'Set ' .. i
if i == 1 then
set.color = chart.colorPalettes.green[3]
else
set.color = chart.colorPalettes.orange[3]
end
end
local labels = {}
for i = 1, 6 do
table.insert( labels, 'Value ' .. i )
end
plot:addDataLabels( labels )
return plot
end
|
| Code |
|
function p.radar()
local plot = chart.newChart{ type = 'radar' }
:setDimensions( '10vw', nil, 300, nil, true ) -- Radar chart is always square. height = width
:setTitle( 'Radar chart' )
:setRadialLimits( 0, 5 )
for i = 1, 5 do
local set = plot:newDataSet()
for j = 1, 6 do
set:addDataPoint( math.sqrt( i*j*(math.random()+1) ) )
end
set.label = 'Set ' .. i
if i == 3 then
set.fill = true
end
end
local labels = {}
for i = 1, 6 do
table.insert( labels, 'Value ' .. i )
end
plot:addDataLabels( labels )
return plot
end
|
| Code |
|
function p.pie()
local plot = chart.newChart{ type = 'pie' }
:setDimensions( '10vw', nil, 300, nil, true ) -- Pie chart is always square. height = width
:setTitle( 'Pie chart' )
local labels = {}
local set = plot:newDataSet()
for i = 1, 6 do
set:addDataPoint( math.floor( math.sqrt( i ) * 10 + 0.5 ) / 10 )
table.insert( labels, 'Value ' .. i )
end
plot:addDataLabels( labels )
return plot
end
|
| Code |
|
function p.doughnut()
local plot = chart.newChart{ type = 'doughnut' }
:setDimensions( '10vw', nil, 300, nil, true ) -- doughnut chart is always square. height = width
:setTitle( 'Doughnut chart' )
local labels = {}
local set = plot:newDataSet()
for i = 1, 6 do
set:addDataPoint( math.floor( math.sqrt( i ) * 10 + 0.5 ) / 10 )
table.insert( labels, 'Value ' .. i )
end
plot:addDataLabels( labels )
return plot
end
|
| Code |
|
function p.polarArea()
local plot = chart.newChart{ type = 'polarArea' }
:setDimensions( '10vw', nil, 300, nil, true ) -- polarArea chart is always square. height = width
:setTitle( 'PolarArea chart' )
local labels = {}
local set = plot:newDataSet()
for i = 1, 6 do
set:addDataPoint( math.floor( math.sqrt( i ) * 10 + 0.5 ) / 10 )
table.insert( labels, 'Value ' .. i )
end
plot:addDataLabels( labels )
return plot
end
|
| Code |
|
function p.bubble()
local plot = chart.newChart{ type = 'bubble' }
:setDimensions( '10vw', '10vh', 300, 300, true )
:setTitle( 'Bubble chart' )
:setXLabel( 'x axis label' )
:setYLabel( 'y axis label' )
for i = 1, 5 do
local set = plot:newDataSet()
for j = 1, 5 do
set:addDataPoint{ x = math.random() * 10, y = math.random() * 20, r = math.random() * 15 + 5 }
end
set.label = 'Set ' .. i
end
return plot
end
|
| Code |
|
function p.scatter()
local plot = chart.newChart{ type = 'scatter' }
:setDimensions( '10vw', '10vh', 300, 300, true )
:setTitle( 'Scatter chart' )
:setXLabel( 'x axis label' )
:setYLabel( 'y axis label' )
:setYAxisType( 'logarithmic' )
for i = 1, 5 do
local set = plot:newDataSet()
set.data = chart.generateXYFromFunc( function(x) return (math.sin( x/5 ) * 5 + x)^i end, 0, 100 )
set.label = 'Set ' .. i
if i == 2 then
set.fill = '+2'
end
end
return plot
end
|
---@class chart
local chart = {}
---@class dataSet
local dataSet = {}
local libraryUtil = require( 'Module:libraryUtil' )
local rgba = require( 'Module:Rgba' )
local isEmpty = require( 'Module:Paramtest' ).is_empty
local arr = require( 'Module:Array' )
local colors = require( 'Module:Chart data/Colors' )
local checkType = libraryUtil.checkType
local checkTypeMulti = libraryUtil.checkTypeMulti
---@alias xyData table<string, number>
---@alias xyDataSet xyData[]
---@alias dataArr number[]
---@alias options table<string, string|number|boolean|table>
---@param val any
---@param default any
---@return any
local function default( val, default )
if val == nil or (type( val ) == 'string' and isEmpty( val )) then
return default
else
return val
end
end
---@param obj chart | dataSet
---@param options options
local function defaultOptions( obj, options )
local function _setOptions( tbl, options )
for k, v in pairs( options ) do
if type( v ) == 'table' and type( tbl[k] ) == 'table' then
_setOptions( tbl[k], v )
else
tbl[k] = default( tbl[k], v )
end
end
end
_setOptions( obj, options )
end
local function stripNonChartJsVariables( tbl )
local stripVarNames = {
colorPalette = true,
backgroundAlpha = true,
hoverLightenValue = true,
hoverSaturateValue = true,
hoverAlpha = true,
widthVal = true,
heightVal = true,
flippedXY = true,
parent = true
}
local function _strip( tbl )
for k, v in pairs( tbl ) do
if stripVarNames[k] then
tbl[k] = nil
elseif type( v ) == 'table' then
_strip( v )
end
end
end
_strip( tbl )
end
---@param tbl table
---@param seen table | nil @Only for internal use
local function stripInvalidValues( tbl, seen )
seen = seen or {}
seen[tbl] = true
for k, v in pairs( tbl ) do
if type( k ) == 'table' or type( k ) == 'function' then
tbl[k] = nil
elseif type( v ) == 'function' then
tbl[k] = nil
elseif seen[v] then
tbl[k] = nil
elseif type( v ) == 'table' then
local mt = getmetatable( v )
if mt and mt.__tostring and mt ~= arr then
tbl[k] = tostring( v )
else
stripInvalidValues( v, seen )
end
end
end
setmetatable( tbl, nil )
end
-- =====================
-- Chart class
-- =====================
local checkChartClass = libraryUtil.makeCheckClassFunction( 'Module:Chart data' , 'chart', chart, 'chart object' )
chart.rgba = rgba
chart.colorPalettes = {}
for _, colorPalette in ipairs(colors) do
chart.colorPalettes[colorPalette.name] = arr.map(colorPalette, rgba.new)
end
function chart.main( frame )
return chart._main( (frame:getParent() or frame).args )
end
---@param args table
---@return string
function chart._main( args )
checkType( 'Module:Chart_data._main', 1, args, 'table' )
local data = args
if not data.isChartObj then
local moduleName = args.dataModule or args[1]
local funcName = args['function'] or args[2]
if isEmpty( moduleName ) then
error( 'Data module was not provided or is empty' )
end
if moduleName:find( '[Mm]odule:' ) == nil then
moduleName = 'Module:' .. moduleName
end
if funcName then
data = require( moduleName )[ funcName ]( args )
assert( type( data )=='table', string.format(
"Error: function '%s' from module '%s' returned an invalid type (table expected, got %s)",
funcName, moduleName, type( data ) ) )
if data.isChartObj and not data.isFinished then
data:finish()
end
else
data = mw.loadData( moduleName )
end
end
local width = args.width or data.width or 'min(540px, 100%, 100vw - 2em)'
local height = args.height or data.height or 'min(400px, 100vh - 2em)'
local minWidth = args.minWidth or args.min_width or data.minWidth or '300px'
local minHeight = args.minHeight or args.min_height or data.minHeight or '300px'
return string.format(
'<div class="rsw-chartjs rsw-chartjs-config tile" style="position:relative; margin:1em 0; width:%s; height:%s; min-width:%s; min-height:%s; max-width:unset;%s"><pre>%s</pre></div>',
width,
height,
minWidth,
minHeight,
data.resizable and ' resize:both; overflow:hidden; padding:0 5px 5px 0;' or '',
mw.text.jsonEncode( data )
)
end
---@param ys number[]
---@param xs number[] | nil
---@return xyDataSet
function chart.convertToXYFormat( ys, xs )
checkType( 'Module:Chart_data.convertToXYFormat', 1, ys, 'table' )
checkType( 'Module:Chart_data.convertToXYFormat', 2, xs, 'table', true )
xs = xs or {}
local ret = {}
for i,v in ipairs( ys ) do
table.insert( ret, { x=(xs[i] or i), y=v } )
end
return ret
end
---@param func function
---@param start_x number
---@param end_x number
---@param step number?
---@return xyDataSet
function chart.generateXYFromFunc( func, start_x, end_x, step )
checkType( 'Module:Chart_data.generateXYFromFunc', 1, func, 'function' )
checkType( 'Module:Chart_data.generateXYFromFunc', 2, start_x, 'number' )
checkType( 'Module:Chart_data.generateXYFromFunc', 3, end_x, 'number' )
checkType( 'Module:Chart_data.generateXYFromFunc', 4, step, 'number', true )
step = step or 1
local ret = {}
for i = start_x, end_x, step do
table.insert( ret, { x=i, y=func( i ) } )
end
return ret
end
---@param low_chance number
---@param high_chance number
---@param start_level number
---@param end_level number
---@return xyDataSet
function chart.jagexInterpolation( low_chance, high_chance, start_level, end_level )
checkType( 'Module:Chart_data.jagexInterpolation', 1, low_chance, 'number' )
checkType( 'Module:Chart_data.jagexInterpolation', 2, high_chance, 'number' )
checkType( 'Module:Chart_data.jagexInterpolation', 3, start_level, 'number' )
checkType( 'Module:Chart_data.jagexInterpolation', 4, end_level, 'number' )
local function interpolate( x )
return math.floor( ( (99-x)*low_chance + (x-1)*high_chance ) / 98 )
end
return chart.generateXYFromFunc( interpolate, start_level, end_level )
end
---@param setup options
---@return chart
function chart.newChart( setup )
checkType( 'Module:Chart_data.newChart', 1, setup, 'table', true )
local obj = setup or {}
if obj.type == 'bar' then
defaultOptions( obj, {
options = {
fill = true,
backgroundAlpha = 0.4,
hoverLightenValue = 0.95,
hoverAlpha = 0.5,
hoverSaturateValue = 1,
scales = {
x = { -- This is used for horizontal bar graphs
ticks = {
beginAtZero = true
}
},
y = {
ticks = {
beginAtZero = true
}
}
}
}
} )
elseif obj.type == 'bubble' then
defaultOptions( obj, {
options = {
fill = true,
backgroundAlpha = 0.4,
hoverLightenValue = 0.95,
hoverAlpha = 0.5,
hoverSaturateValue = 1
}
} )
elseif obj.type == 'radar' then
defaultOptions( obj, {
options = {
scale = {
ticks = {
showLabelBackdrop = false,
z = 1
}
}
}
} )
elseif obj.type == 'pie' or obj.type == 'doughnut' then
defaultOptions( obj, {
options = {
fill = true,
backgroundAlpha = 0.8,
hoverLightenValue = 0.95,
hoverAlpha = 0.9,
hoverSaturateValue = 1
}
} )
elseif obj.type == 'polarArea' then
defaultOptions( obj, {
options = {
fill = true,
backgroundAlpha = 0.5,
hoverLightenValue = 0.95,
hoverAlpha = 0.6,
hoverSaturateValue = 1,
scale = {
ticks = {
showLabelBackdrop = false,
z = 1
}
}
}
} )
end
defaultOptions( obj, {
isChartObj = true,
type = 'scatter',
widthVal = 540,
heightVal = 400,
minWidth = 300,
minHeight = 300,
resizable = true,
data = {
datasets = {}
},
options = {
fill = false,
colorPalette = chart.colorPalettes.qualitative,
backgroundAlpha = 0.3,
hoverLightenValue = 0.95,
hoverAlpha = 0.5,
hoverSaturateValue = 1,
maintainAspectRatio = false,
title = {
font = {
size = 18
}
},
tooltips = {
intersect = false
},
}
} )
setmetatable( obj, chart )
obj:setDimensions( obj.widthVal, obj.heightVal, obj.minWidth, obj.minHeight, obj.resizable )
return obj
end
---@vararg xyDataSet | dataArr
---@return chart
function chart:addDataSets( ... )
checkChartClass( self, 'addDataSets' )
local sets = { ... }
for i, set in ipairs( sets ) do
checkType( 'chart.addDataSets', i, set, 'table' )
if not arr.contains( self.data.datasets, set, false ) then
table.insert( self.data.datasets, set )
end
end
return self
end
---@param labels string
---@return chart
function chart:addDataLabels( labels )
checkChartClass( self, 'addDataLabels' )
checkType( 'Module:Chart_data.addDataLabels', 1, labels, 'table' )
self.data.labels = default( self.data.labels, {} )
for _, label in ipairs( labels ) do
table.insert( self.data.labels, label )
end
return self
end
---@param width number | string
---@param height number | string | nil
---@param minWidth number | string | nil
---@param minHeight number | string | nil
---@param resizable boolean | nil
---@return chart
function chart:setDimensions( width, height, minWidth, minHeight, resizable )
checkChartClass( self, 'setDimensions' )
checkTypeMulti( 'chart.setDimensions', 1, width, {'number', 'string'} )
checkTypeMulti( 'chart.setDimensions', 2, height, {'number', 'string', 'nil'} )
checkTypeMulti( 'chart.setDimensions', 3, minWidth, {'number', 'string', 'nil'} )
checkTypeMulti( 'chart.setDimensions', 4, minHeight, {'number', 'string', 'nil'} )
checkType( 'chart.setDimensions', 5, resizable, 'boolean', true )
if type( width ) == 'number' then
self.widthVal = width
self.width = width .. 'px'
elseif type( width ) == 'string' then
self.width = width
self.widthVal = tonumber( width:match( '%d+' ) )
if type( self.widthVal ) ~= 'number' then
error( "bad argument #1 to 'chart.setDimensions' (input doesn't contain a number)", 2 )
end
else
self.widthVal = nil
self.width = ''
end
if type( height ) == 'number' then
self.heightVal = height
self.height = height .. 'px'
elseif type( height ) == 'string' then
self.height = height
self.heightVal = tonumber( height:match( '%d+' ) )
if type( self.heightVal ) ~= 'number' then
error( "bad argument #2 to 'chart.setDimensions' (input doesn't contain a number)", 2 )
end
else
self.heightVal = nil
self.height = ''
end
if type( minWidth ) == 'number' then
self.minWidth = minWidth .. 'px'
elseif type( minWidth ) == 'string' then
self.minWidth = minWidth
end
if type( minHeight ) == 'number' then
self.minHeight = minHeight .. 'px'
elseif type( minHeight ) == 'string' then
self.minHeight = minHeight
end
self.resizable = default( resizable, self.resizable )
if arr.contains( {'pie', 'doughnut', 'radar', 'polarArea'}, self.type ) then
self.height = self.width
self.minHeight = self.minWidth
self.options.aspectRatio = 1
else
if self.widthVal and self.heightVal then
self.options.aspectRatio = self.widthVal / self.heightVal
elseif self.widthVal then
self.height = self.width
self.options.aspectRatio = 1
else
self.options.aspectRatio = 1
end
end
self.width = string.format( 'min(%s, 100%%, 100vw - 2em)', self.width )
self.height = string.format( 'min(%s, 100vh - 2em)', self.height )
return self
end
---@param text string | table | nil
---@param position string | nil
---@return chart
function chart:setTitle( text, position )
checkChartClass( self, 'setTitle' )
checkTypeMulti( 'chart.setTitle', 1, text, {'string', 'table', 'nil'} )
checkType( 'chart.setTitle', 1, position, 'string', true )
self:setOptions{
title = {
display = text and true or false,
text = text,
position = position or 'top'
}
}
return self
end
---@param label string | nil
---@return chart
function chart:setXLabel( label )
checkChartClass( self, 'setXLabel' )
checkType( 'chart.setXLabel', 1, label, 'string', true )
if arr.contains( {'line', 'bar', 'bubble', 'scatter'}, self.type ) then
self:setOptions{
scales = {
x = {
scaleLabel = {
display = label and true or false,
labelString = label
}
}
}
}
end
return self
end
---@param label string | nil
---@return chart
function chart:setYLabel( label )
checkChartClass( self, 'setYLabel' )
checkType( 'chart.setYLabel', 1, label, 'string', true )
if arr.contains( {'line', 'bar', 'bubble', 'scatter'}, self.type ) then
self:setOptions{
scales = {
y = {
scaleLabel = {
display = label and true or false,
labelString = label
}
}
}
}
end
return self
end
---@param min number | nil
---@param max number | nil
---@param step number | nil
---@return chart
function chart:setXLimits( min, max, step )
checkChartClass( self, 'setXLimits' )
checkType( 'chart.setXLimits', 1, min, 'number', true )
checkType( 'chart.setXLimits', 2, max, 'number', true )
checkType( 'chart.setXLimits', 3, step, 'number', true )
if arr.contains( {'bubble', 'scatter'}, self.type ) then
self:setOptions{
scales = {
x = {
min = min,
max = max,
ticks = {
stepSize = step
}
}
}
}
end
return self
end
---@param min number | nil
---@param max number | nil
---@param step number | nil
---@return chart
function chart:setYLimits( min, max, step )
checkChartClass( self, 'setYLimits' )
checkType( 'chart.setYLimits', 1, min, 'number', true )
checkType( 'chart.setYLimits', 2, max, 'number', true )
checkType( 'chart.setYLimits', 3, step, 'number', true )
if arr.contains( {'line', 'bar', 'bubble', 'scatter'}, self.type ) then
self:setOptions{
scales = {
y = {
min = min,
max = max,
ticks = {
stepSize = step
}
}
}
}
end
return self
end
---@param format string
---@return chart
function chart:setYFormat( format )
checkChartClass( self, 'setYFormat' )
checkType( 'chart.setYFormat', 1, format, 'string', true )
self:setOptions{
scales = {
y = {
ticks = {
format = format
}
}
}
}
return self
end
---@param format string
---@return chart
function chart:setXFormat( format )
checkChartClass( self, 'setXFormat' )
checkType( 'chart.setXFormat', 1, format, 'string', true )
self:setOptions{
scales = {
x = {
ticks = {
format = format
}
}
}
}
return self
end
---@param min number | nil
---@param max number | nil
---@param step number | nil
---@return chart
function chart:setRadialLimits( min, max, step )
checkChartClass( self, 'setRadialLimits' )
checkType( 'chart.setRadialLimits', 1, min, 'number', true )
checkType( 'chart.setRadialLimits', 2, max, 'number', true )
checkType( 'chart.setRadialLimits', 3, step, 'number', true )
if arr.contains( {'radar', 'polarArea'}, self.type ) then
self:setOptions{
scale = {
min = min,
max = max,
ticks = {
stepSize = step
}
}
}
end
return self
end
---@param type string | nil
---@return chart
function chart:setXAxisType( type )
checkChartClass( self, 'setXAxisType' )
checkType( 'chart.setXAxisType', 1, type, 'string', true )
if arr.contains( {'bar', 'bubble', 'line', 'scatter'}, self.type ) then
self:setOptions{
scales = {
x = {
type = type,
ticks = {
format = {
maximumSignificantDigits = (type == 'logarithmic') and 3 or nil
}
}
}
}
}
end
return self
end
---@param type string | nil
---@return chart
function chart:setYAxisType( type )
checkChartClass( self, 'setYAxisType' )
checkType( 'chart.setYAxisType', 1, type, 'string', true )
if arr.contains( {'bar', 'bubble', 'line', 'scatter'}, self.type ) then
self:setOptions{
scales = {
y = {
type = type,
ticks = {
format = {
maximumSignificantDigits = (type == 'logarithmic') and 3 or nil
}
}
}
}
}
end
return self
end
---@param val boolean
---@return chart
function chart:showLegend( val )
checkChartClass( self, 'showLegend' )
checkType( 'chart.showLegend', 1, val, 'boolean' )
self:setOptions{
legend = {
display = val
}
}
return self
end
---@param format string
---@return chart
function chart:setTooltipFormat( format )
checkChartClass( self, 'setTooltipFormat' )
checkType( 'chart.setTooltipFormat', 1, format, 'string', true )
self:setOptions{
tooltips = {
format = format
}
}
return self
end
---@param count number
---@return chart
function chart:setDatasetsPerGroup( count )
checkChartClass( self, 'setDatasetsPerGroup' )
checkType( 'chart.setDatasetsPerGroup', 1, count, 'number', true )
self:setOptions{
datasetsPerGroup = count
}
return self
end
---@return chart
function chart:flipXY()
checkChartClass( self, 'flipXY' )
if self.type == 'bar' then
self:setXAxisType( 'linear' )
:setYAxisType( 'category' )
:setOptions{
scales = {
x = {
offset = false,
gridLines = {
offsetGridLines = false
}
}
}
}
self.flippedXY = true
for _, v in ipairs( self.data.datasets ) do
v.indexAxis = 'y'
end
end
return self
end
---@param options options
---@return chart
function chart:setOptions( options )
checkChartClass( self, 'setOptions' )
checkType( 'chart.setOptions', 1, options, 'table' )
local function _setOptions( tbl, options )
for k, v in pairs( options ) do
if type( v ) == 'table' and type( tbl[k] ) == 'table' then
_setOptions( tbl[k], v )
else
tbl[k] = v
end
end
end
_setOptions( self.options, options )
return self
end
---@return string | table
function chart:finish()
checkChartClass( self, 'finish' )
for i, set in ipairs( self.data.datasets ) do
if (self.options.colorPalette or set.colorPalette) and
self.options.backgroundAlpha and
self.options.hoverLightenValue and
self.options.hoverSaturateValue and
self.options.hoverAlpha
then
if type(set.baseColor) == 'string' then
set.color = rgba.new(set.baseColor)
end
if type(set.color) == 'string' then
set.color = rgba.new(set.color)
end
set.color = set.color or set.baseColor -- [[MediaWiki:Gadget-Charts-core.js]] uses baseColor instead of just color
set.baseColor = set.color
if arr.contains( {'bar', 'pie', 'doughnut', 'polarArea'}, self.type ) then
if set.color and not set.colorPalette then
set.borderColor = tostring( set.color )
set.hoverBorderColor = tostring( set.color:lighten( set.hoverLightenValue or self.options.hoverLightenValue )
:saturate( set.hoverSaturateValue or self.options.hoverSaturateValue ) )
set.backgroundColor = tostring( set.color:fade( set.backgroundAlpha or self.options.backgroundAlpha ) )
set.hoverBackgroundColor = tostring( set.color:lighten( set.hoverLightenValue or self.options.hoverLightenValue )
:saturate( set.hoverSaturateValue or self.options.hoverSaturateValue )
:fade( set.hoverAlpha or self.options.hoverAlpha ) )
else
set.borderColor = {}
set.hoverBorderColor = {}
set.backgroundColor = {}
set.hoverBackgroundColor = {}
local palette = default( set.colorPalette, self.options.colorPalette )
for j = 1, #set.data do
local currentColor = palette[j] or rgba.new(0, 0, 0)
table.insert( set.borderColor, tostring( currentColor ) )
table.insert( set.hoverBorderColor,
tostring( currentColor:lighten( set.hoverLightenValue or self.options.hoverLightenValue )
:saturate( set.hoverSaturateValue or self.options.hoverSaturateValue ) ) )
table.insert( set.backgroundColor, tostring( currentColor:fade( set.backgroundAlpha or self.options.backgroundAlpha ) ) )
table.insert( set.hoverBackgroundColor,
tostring( currentColor:lighten( set.hoverLightenValue or self.options.hoverLightenValue )
:saturate( set.hoverSaturateValue or self.options.hoverSaturateValue )
:fade( set.hoverAlpha or self.options.hoverAlpha ) ) )
end
end
else
local currentDatasetGroupIndex = i
if self.options.datasetsPerGroup then
currentDatasetGroupIndex = math.modf((i-1)/self.options.datasetsPerGroup)+1
end
local palette = set.colorPalette or self.options.colorPalette
local currentColor = set.color or palette[currentDatasetGroupIndex] or rgba.new(0, 0, 0)
set.borderColor = set.borderColor or currentColor
if not set.hoverBorderColor then
set.hoverBorderColor = set.borderColor:lighten( set.hoverLightenValue or self.options.hoverLightenValue )
:saturate( set.hoverSaturateValue or self.options.hoverSaturateValue )
end
set.backgroundColor = set.backgroundColor or currentColor:fade( set.backgroundAlpha or self.options.backgroundAlpha )
if not set.hoverBackgroundColor then
set.hoverBackgroundColor = set.backgroundColor:lighten( set.hoverLightenValue or self.options.hoverLightenValue )
:saturate( set.hoverSaturateValue or self.options.hoverSaturateValue )
:fade( set.hoverAlpha or self.options.hoverAlpha )
end
set.fill = default( default( set.fill, self.options.fill ), false )
end
end
end
stripNonChartJsVariables( self )
stripInvalidValues( self )
self.isFinished = true
return self
end
---@return string
function chart:tostring()
checkChartClass( self, 'tostring' )
self:finish()
return chart._main( self )
end
function chart:debug()
checkChartClass( self, 'debug' )
local temp = chart.__tostring -- Prevent chart from being turned into a json
chart.__tostring = nil
mw.logObject( self )
chart.__tostring = temp
end
chart.__index = chart
chart.__tostring = chart.tostring
chart.__concat = function( x, y )
return tostring( x ) .. tostring( y )
end
-- =======================
-- DataSet class
-- =======================
local checkDataSetClass = libraryUtil.makeCheckClassFunction( 'Module:Chart data', 'dataSet', dataSet, 'dataSet object' )
---@param setup options
---@return dataSet
function chart:newDataSet( setup )
checkChartClass( self, 'newDataSet' )
checkType( 'chart.newDataSet', 1, setup, 'table', true )
local obj = setup or {}
if self.type == 'scatter' then
obj.showLine = default( obj.showLine, true )
obj.pointRadius = default( obj.pointRadius, 0 )
end
if self.type == 'bar' then
obj.borderWidth = default( obj.borderWidth, 1 )
if self.flippedXY then
obj.indexAxis = 'y'
end
end
obj.data = default( obj.data, {} )
obj.clip = 5
obj.parent = self
self:addDataSets( obj )
return setmetatable( obj, dataSet )
end
---@param data xyDataSet | dataArr
---@return dataSet
function dataSet:addData( data )
checkDataSetClass( self, 'addData' )
checkType( 'dataSet.addData', 1, data, 'table' )
for _, v in ipairs( data ) do
table.insert( self.data, v )
end
return self
end
---@param data xyData | number
---@return dataSet
function dataSet:addDataPoint( data )
checkDataSetClass( self, 'addDataPoint' )
checkTypeMulti( 'dataSet.addDataPoint', 1, data, {'table', 'number'} )
table.insert( self.data, data )
return self
end
---@param options options
---@return dataSet
function dataSet:setOptions( options )
checkDataSetClass( self, 'setOptions' )
checkType( 'dataSet.setOptions', 1, options, 'table' )
local function _setOptions( tbl, options )
for k, v in pairs( options ) do
if type( v ) == 'table' and type( tbl[k] ) == 'table' then
_setOptions( tbl[k], v )
else
tbl[k] = v
end
end
end
_setOptions( self, options )
return self
end
---@return chart
function dataSet:done()
checkDataSetClass( self, 'done' )
return self.parent
end
dataSet.__index = dataSet
return chart