diff --git a/docs/issue_954.rst b/docs/issue_954.rst new file mode 100644 index 00000000000..77686640af4 --- /dev/null +++ b/docs/issue_954.rst @@ -0,0 +1,32 @@ +issue: Optional title in ChartModule #954 + +mesa.visualization.modules package +================================== + +Submodules +---------- + +mesa.visualization.modules.ChartVisualization module +---------------------------------------------------- +Extra parameter "chart_title" added to ChartModule __init__() . + +mesa\visualization\templates\js\ChartModule.js +---------------------------------------------------- +ChartModule() signature modified to receive chart_title +js code to insert title added within chartOptions variable + +Using the new feature +---------------------------------------------------- +Within server class, add chart title as below to an existing ChartModule call: + +line_chart = ChartModule( + [ + {"Label": "Rich", "Color": RICH_COLOR}, + {"Label": "Poor", "Color": POOR_COLOR}, + {"Label": "Middle Class", "Color": MID_COLOR}, + ],chart_title = "line chart" +) + +Code block modified in https://github.com/projectmesa/mesa-examples/blob/main/examples/charts/charts/server.py +for testing. + diff --git a/mesa/visualization/modules/ChartVisualization.py b/mesa/visualization/modules/ChartVisualization.py index 8f356fa4826..12078857744 100644 --- a/mesa/visualization/modules/ChartVisualization.py +++ b/mesa/visualization/modules/ChartVisualization.py @@ -48,6 +48,7 @@ def __init__( series, canvas_height=200, canvas_width=500, + title="", data_collector_name="datacollector", ): """ @@ -67,8 +68,10 @@ def __init__( self.data_collector_name = data_collector_name series_json = json.dumps(self.series) - new_element = "new ChartModule({}, {}, {})" - new_element = new_element.format(series_json, canvas_width, canvas_height) + new_element = "new ChartModule({}, {}, {}, '{}')" + new_element = new_element.format( + series_json, canvas_width, canvas_height, title + ) self.js_code = "elements.push(" + new_element + ");" def render(self, model): diff --git a/mesa/visualization/templates/js/ChartModule.js b/mesa/visualization/templates/js/ChartModule.js index 78680258c1e..4ff2611c624 100644 --- a/mesa/visualization/templates/js/ChartModule.js +++ b/mesa/visualization/templates/js/ChartModule.js @@ -1,4 +1,4 @@ -const ChartModule = function (series, canvas_width, canvas_height) { +const ChartModule = function (series, canvas_width, canvas_height, title) { const canvas = document.createElement("canvas"); Object.assign(canvas, { width: canvas_width, @@ -47,6 +47,10 @@ const ChartModule = function (series, canvas_width, canvas_height) { mode: "index", intersect: false, }, + title: { + display: true, + text: title + }, hover: { mode: "nearest", intersect: true,