Replace d3 by billboard.js

Close #14313
This commit is contained in:
Nicolas Évrard
2026-03-13 15:14:09 +01:00
parent 6bbf39afb4
commit b9368f8c59
4 changed files with 26 additions and 25 deletions
+1 -1
View File
@@ -13,7 +13,7 @@ export default [
QUnit: "readonly", QUnit: "readonly",
Sao: "readonly", Sao: "readonly",
Sortable: "readonly", Sortable: "readonly",
c3: "readonly", bb: "readonly",
i18n: "readonly", i18n: "readonly",
jQuery: "readonly", jQuery: "readonly",
moment: "readonly", moment: "readonly",
+2 -2
View File
@@ -15,7 +15,7 @@ this repository contains the full copyright notices and license terms. -->
<script type="text/javascript" src="node_modules/moment/min/locales.js"></script> <script type="text/javascript" src="node_modules/moment/min/locales.js"></script>
<script type="text/javascript" src="node_modules/gettext.js/dist/gettext.iife.js"></script> <script type="text/javascript" src="node_modules/gettext.js/dist/gettext.iife.js"></script>
<script type="text/javascript" src="node_modules/d3/dist/d3.js"></script> <script type="text/javascript" src="node_modules/d3/dist/d3.js"></script>
<script type="text/javascript" src="node_modules/c3/c3.js"></script> <script type="text/javascript" src="node_modules/billboard.js/dist/billboard.js"></script>
<script type="text/javascript" src="node_modules/papaparse/papaparse.js"></script> <script type="text/javascript" src="node_modules/papaparse/papaparse.js"></script>
<script type="text/javascript" src="node_modules/fullcalendar/dist/fullcalendar.js"></script> <script type="text/javascript" src="node_modules/fullcalendar/dist/fullcalendar.js"></script>
<script type="text/javascript" src="node_modules/fullcalendar/dist/locale-all.js"></script> <script type="text/javascript" src="node_modules/fullcalendar/dist/locale-all.js"></script>
@@ -23,7 +23,7 @@ this repository contains the full copyright notices and license terms. -->
<script type="text/javascript" src="node_modules/mousetrap/plugins/pause/mousetrap-pause.js"></script> <script type="text/javascript" src="node_modules/mousetrap/plugins/pause/mousetrap-pause.js"></script>
<script type="text/javascript" src="node_modules/sortablejs/Sortable.js"></script> <script type="text/javascript" src="node_modules/sortablejs/Sortable.js"></script>
<link rel="stylesheet" href="node_modules/c3/c3.css"> <link rel="stylesheet" href="node_modules/billboard.js/dist/billboard.css">
<link rel="stylesheet" href="node_modules/fullcalendar/dist/fullcalendar.css"> <link rel="stylesheet" href="node_modules/fullcalendar/dist/fullcalendar.css">
<script type="text/javascript" src="dist/tryton-sao.js"></script> <script type="text/javascript" src="dist/tryton-sao.js"></script>
+2 -1
View File
@@ -50,11 +50,12 @@
"tryton" "tryton"
], ],
"dependencies": { "dependencies": {
"billboard.js": "^3.17",
"d3": "^7.9",
"jquery": "^3", "jquery": "^3",
"bootstrap": "^3.3.7", "bootstrap": "^3.3.7",
"moment": "^2.10", "moment": "^2.10",
"gettext.js": "^2", "gettext.js": "^2",
"c3": "^0.7",
"papaparse": "^5.0", "papaparse": "^5.0",
"fullcalendar": "^3.10.2", "fullcalendar": "^3.10.2",
"mousetrap": "^1.6", "mousetrap": "^1.6",
+21 -21
View File
@@ -95,7 +95,7 @@
return () => { return () => {
record = group[index]; record = group[index];
var x = record.field_get_client(this.xfield.name); var x = record.field_get_client(this.xfield.name);
// c3 does not support moment // billboard does not support moment
if (x && (x.isDate || x.isDateTime)) { if (x && (x.isDate || x.isDateTime)) {
x = x.toString(); x = x.toString();
} }
@@ -164,18 +164,18 @@
display: function(group) { display: function(group) {
var update_prm = this.update_data(group); var update_prm = this.update_data(group);
update_prm.done(data => { update_prm.done(data => {
c3.generate(this._c3_config(data)); bb.generate(this._bb_config(data));
}); });
return update_prm; return update_prm;
}, },
_c3_config: function(data) { _bb_config: function(data) {
var c3_config = {}; var bb_config = {};
c3_config.bindto = '#' + this.el.attr('id'); bb_config.bindto = '#' + this.el.attr('id');
c3_config.data = data; bb_config.data = data;
c3_config.data.type = this._chart_type; bb_config.data.type = this._chart_type;
c3_config.data.x = 'labels'; bb_config.data.x = 'labels';
c3_config.data.onclick = this.action.bind(this); bb_config.data.onclick = this.action.bind(this);
var type = this.view.screen.model.fields[this.xfield.name] var type = this.view.screen.model.fields[this.xfield.name]
.description.type; .description.type;
@@ -185,18 +185,18 @@
this.view.screen.context.date_format); this.view.screen.context.date_format);
time_format = '%X'; time_format = '%X';
if (type == 'datetime') { if (type == 'datetime') {
c3_config.data.xFormat = '%Y-%m-%d %H:%M:%S'; bb_config.data.xFormat = '%Y-%m-%d %H:%M:%S';
format_func = function(dt) { format_func = function(dt) {
return Sao.common.format_datetime( return Sao.common.format_datetime(
date_format + ' ' + time_format, moment(dt)); date_format + ' ' + time_format, moment(dt));
}; };
} else { } else {
c3_config.data.xFormat = '%Y-%m-%d'; bb_config.data.xFormat = '%Y-%m-%d';
format_func = function(dt) { format_func = function(dt) {
return Sao.common.format_date(date_format, moment(dt)); return Sao.common.format_date(date_format, moment(dt));
}; };
} }
c3_config.axis = { bb_config.axis = {
x: { x: {
type: 'timeseries', type: 'timeseries',
tick: { tick: {
@@ -205,7 +205,7 @@
} }
}; };
} else { } else {
c3_config.axis = { bb_config.axis = {
x: { x: {
type: 'category', type: 'category',
} }
@@ -224,12 +224,12 @@
colors[yfield.key || yfield.name] = yfield.color; colors[yfield.key || yfield.name] = yfield.color;
} }
} }
c3_config.data.color = function(color, column) { bb_config.data.color = function(color, column) {
// column is an object when called for legend // column is an object when called for legend
var key = column.id || column; var key = column.id || column;
return colors[key] || color; return colors[key] || color;
}; };
return c3_config; return bb_config;
}, },
_data_keys: function(data) { _data_keys: function(data) {
let keys = []; let keys = [];
@@ -269,8 +269,8 @@
Sao.View.Graph.HorizontalBar = Sao.class_(Sao.View.Graph.Chart, { Sao.View.Graph.HorizontalBar = Sao.class_(Sao.View.Graph.Chart, {
_chart_type: 'bar', _chart_type: 'bar',
_c3_config: function(data) { _bb_config: function(data) {
var config = Sao.View.Graph.HorizontalBar._super._c3_config var config = Sao.View.Graph.HorizontalBar._super._bb_config
.call(this, data); .call(this, data);
config.axis.rotated = true; config.axis.rotated = true;
return config; return config;
@@ -279,8 +279,8 @@
Sao.View.Graph.Line = Sao.class_(Sao.View.Graph.Chart, { Sao.View.Graph.Line = Sao.class_(Sao.View.Graph.Chart, {
_chart_type: 'line', _chart_type: 'line',
_c3_config: function(data) { _bb_config: function(data) {
var config = Sao.View.Graph.Line._super._c3_config var config = Sao.View.Graph.Line._super._bb_config
.call(this, data); .call(this, data);
config.line = { config.line = {
connectNull: true, connectNull: true,
@@ -291,8 +291,8 @@
Sao.View.Graph.Pie = Sao.class_(Sao.View.Graph.Chart, { Sao.View.Graph.Pie = Sao.class_(Sao.View.Graph.Chart, {
_chart_type: 'pie', _chart_type: 'pie',
_c3_config: function(data) { _bb_config: function(data) {
var config = Sao.View.Graph.Pie._super._c3_config.call(this, data); var config = Sao.View.Graph.Pie._super._bb_config.call(this, data);
var pie_columns = [], pie_names = {}; var pie_columns = [], pie_names = {};
var i, len; var i, len;
var labels, values; var labels, values;