pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website: add min & max option for chart axis value

Browse Source 
This commit introduces min & max input options for the chart values of
the axis. It will be visible only for the line and bar chart.

- When min and max values are same, we fix this by changing the min
  value to zero and multiply provided value by 2 to set max value.

- When min value greater than max value, we swap the values.

- When the min value is given and the max value is not:
    - If the min value is smaller than greatest value of the chart, then
      the max value is set to the greatest value of the chart.
    - Otherwise, the given minimum value is used as maximum value and
      the minimum is set to 0.

- When only the max value is given then the minimum value is set to 0.

task-2250766

closes odoo/odoo#52221

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: dwa-odoo <dwa@odoo.com>
This commit is contained in:
jpr-odoo
2021-11-15 14:27:06 +00:00
committed by qsm-odoo
co-authored by dwa-odoo
parent ef158c5f36
commit f2bace6518
3 changed files with 58 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/snippets/s_chart/000.js
+14
View File
@@ -48,6 +48,7 @@ const ChartWidget = publicWidget.Widget.extend({
},
tooltips: {
enabled: this.el.dataset.tooltipDisplay === 'true',
position: 'custom',
},
title: {
display: !!this.el.dataset.title,
@@ -80,18 +81,30 @@ const ChartWidget = publicWidget.Widget.extend({
},
};
} else {
// For extending the range of the axis while maintaining the auto
// fit behavior
const beforeBuildTicks = (scale) => {
scale.min = parseInt(this.el.dataset.ticksMin) || scale.min;
scale.max = parseInt(this.el.dataset.ticksMax) || scale.max;
};
chartData.options.scales = {
xAxes: [{
stacked: this.el.dataset.stacked === 'true',
ticks: {
beginAtZero: true
},
// Maintaining the gap between two values on
// vertical/horizontally axis
beforeBuildTicks: beforeBuildTicks,
}],
yAxes: [{
stacked: this.el.dataset.stacked === 'true',
ticks: {
beginAtZero: true
},
// Maintaining the gap between two values on
// vertical/horizontally axis
beforeBuildTicks: beforeBuildTicks,
}],
};
}
@@ -104,6 +117,7 @@ const ChartWidget = publicWidget.Widget.extend({
}
const canvas = this.el.querySelector('canvas');
window.Chart.Tooltip.positioners.custom = (elements, eventPosition) => eventPosition;
this.chart = new window.Chart(canvas, chartData);
return this._super.apply(this, arguments);
},
addons/website/static/src/snippets/s_chart/options.js
+41
View File
@@ -118,6 +118,9 @@ options.registry.InnerChart = options.Class.extend({
this._setDefaultSelectedInput();
await this._reloadGraph();
}
if (params.attributeName === 'minValue' || params.attributeName === 'maxValue') {
this._computeTicksMinMaxValue();
}
},
//--------------------------------------------------------------------------
@@ -148,6 +151,44 @@ options.registry.InnerChart = options.Class.extend({
}
return this._super(...arguments);
},
/**
* Maintains the gap between the scale axis for the auto fit behavior if we
* used min/max config.
*
* @private
*/
_computeTicksMinMaxValue() {
const dataset = this.$target[0].dataset;
let minValue = parseInt(dataset.minValue);
let maxValue = parseInt(dataset.maxValue);
if (!isNaN(maxValue)) {
// Reverse min max values when min value is greater than max value
if (maxValue < minValue) {
maxValue = minValue;
minValue = parseInt(dataset.maxValue);
} else if (maxValue === minValue) {
// If min value and max value are same for positive and negative
// number
minValue < 0 ? (maxValue = 0, minValue = 2 * minValue) : (minValue = 0, maxValue = 2 * maxValue);
}
} else {
// Find max value from each row/column data
const datasets = JSON.parse(dataset.data).datasets || [];
const dataValue = _.flatten(datasets.map(el => el.data.map(data => {
return !isNaN(parseInt(data)) ? parseInt(data) : 0;
})));
// When max value is not given and min value is greater than chart
// data values
if (minValue >= Math.max(...dataValue)) {
maxValue = minValue;
minValue = 0;
}
}
this.$target.attr({
'data-ticks-min': minValue,
'data-ticks-max': maxValue,
});
},
/**
* Sets and reloads the data on the canvas if it has changed.
* Used in matrix related method.
addons/website/views/snippets/s_chart.xml
+3 -1
View File
@@ -28,7 +28,7 @@
<we-select string="Type" data-attribute-name="type" data-attribute-default-value="bar">
<we-button data-select-data-attribute="bar" data-name="bar_chart_opt">Bar Vertical</we-button>
<we-button data-select-data-attribute="horizontalBar" data-name="horizontal_bar_chart_opt">Bar Horizontal</we-button>
<we-button data-select-data-attribute="line">Line</we-button>
<we-button data-select-data-attribute="line" data-name="line_chart_opt">Line</we-button>
<we-button data-select-data-attribute="pie">Pie</we-button>
<we-button data-select-data-attribute="doughnut">Doughnut</we-button>
<we-button data-select-data-attribute="radar">Radar</we-button>
@@ -53,6 +53,8 @@
</tr>
</table>
</we-matrix>
<we-input string="Min Axis" data-select-data-attribute="" data-dependencies="bar_chart_opt, horizontal_bar_chart_opt, line_chart_opt" data-attribute-name="minValue"/>
<we-input string="Max Axis" data-select-data-attribute="" data-dependencies="bar_chart_opt, horizontal_bar_chart_opt, line_chart_opt" data-attribute-name="maxValue"/>
<we-colorpicker string="Background" data-name="chart_bg_color_opt"
data-color-change=""
data-attribute-name="backgroundColor"