reporting-engine/kpi_dashboard/static/src/js/widget/graph_widget.js

/*
global nv, d3
*/
odoo.define("kpi_dashboard.GraphWidget", function (require) {
    "use strict";

    var AbstractWidget = require("kpi_dashboard.AbstractWidget");
    var registry = require("kpi_dashboard.widget_registry");
    var core = require("web.core");
    var qweb = core.qweb;

    var GraphWidget = AbstractWidget.extend({
        template: "kpi_dashboard.graph",
        jsLibs: [
            "/kpi_dashboard/static/lib/nvd3/d3.v3.js",
            "/kpi_dashboard/static/lib/nvd3/nv.d3.js",
            "/kpi_dashboard/static/src/js/lib/nvd3.js",
        ],
        cssLibs: ["/kpi_dashboard/static/lib/nvd3/nv.d3.css"],
        start: function () {
            this._onResize = this._onResize.bind(this);
            nv.utils.windowResize(this._onResize);
            return this._super.apply(this, arguments);
        },
        destroy: function () {
            if ("nv" in window && nv.utils && nv.utils.offWindowResize) {
                // If the widget is destroyed before the lazy loaded libs (nv) are
                // actually loaded (i.e. after the widget has actually started),
                // nv is undefined, but the handler isn't bound yet anyway
                nv.utils.offWindowResize(this._onResize);
            }
            this._super.apply(this, arguments);
        },
        _getChartOptions: function () {
            return {
                x: function (d, u) {
                    return u;
                },
                margin: {left: 0, right: 0, top: 5, bottom: 0},
                showYAxis: false,
                showXAxis: false,
                showLegend: false,
                height: this.widget_size_y - 90,
                width: this.widget_size_x - 20,
            };
        },
        _chartConfiguration: function (values) {
            this.chart.forceY([0]);
            this.chart.xAxis.tickFormat(function (d) {
                var label = "";
                _.each(values.value.graphs, function (v) {
                    if (v.values[d] && v.values[d].x) {
                        label = v.values[d].x;
                    }
                });
                return label;
            });
            this.chart.yAxis.tickFormat(d3.format(",.2f"));

            this.chart.tooltip.contentGenerator(function (key) {
                return qweb.render("GraphCustomTooltip", {
                    color: key.point.color,
                    key: key.series[0].title,
                    value: d3.format(",.2f")(key.point.y),
                });
            });
        },
        _addGraph: function (values) {
            var data = values.value.graphs;
            this.$svg.addClass("o_graph_linechart");
            this.chart = nv.models.lineChart();
            this.chart.options(this._getChartOptions(values));
            this._chartConfiguration(values);
            d3.select(this.$("svg")[0])
                .datum(data)
                .transition()
                .duration(600)
                .call(this.chart);
            this.$("svg").css("height", this.widget_size_y - 90);
            this._customizeChart();
        },
        fillWidget: function (values) {
            var self = this;
            var element = this.$el.find('[data-bind="value"]');
            element.empty();
            element.css("padding-left", 10).css("padding-right", 10);
            this.chart = null;
            nv.addGraph(function () {
                self.$svg = self.$el
                    .find('[data-bind="value"]')
                    .append("<svg width=" + (self.widget_size_x - 20) + ">");
                self._addGraph(values);
            });
        },
        _customizeChart: function () {
            // Hook function
        },
        _onResize: function () {
            if (this.chart) {
                this.chart.update();
                this._customizeChart();
            }
        },
    });

    registry.add("graph", GraphWidget);
    return GraphWidget;
});