// Copyright (c) 2015, Frappe Technologies Pvt. Ltd. and Contributors // License: GNU General Public License v3. See license.txt frappe.pages['sales-funnel'].on_page_load = function(wrapper) { frappe.ui.make_app_page({ parent: wrapper, title: __('Sales Funnel'), single_column: true }); wrapper.sales_funnel = new erpnext.SalesFunnel(wrapper); frappe.breadcrumbs.add("Selling"); } erpnext.SalesFunnel = class SalesFunnel { constructor(wrapper) { var me = this; // 0 setTimeout hack - this gives time for canvas to get width and height setTimeout(function() { me.setup(wrapper); me.get_data(); }, 0); } setup(wrapper) { var me = this; this.company_field = wrapper.page.add_field({"fieldtype": "Link", "fieldname": "company", "options": "Company", "label": __("Company"), "reqd": 1, "default": frappe.defaults.get_user_default('company'), change: function() { me.company = this.value || frappe.defaults.get_user_default('company'); me.get_data(); } }), this.elements = { layout: $(wrapper).find(".layout-main"), from_date: wrapper.page.add_date(__("From Date")), to_date: wrapper.page.add_date(__("To Date")), chart: wrapper.page.add_select(__("Chart"), [{value: 'sales_funnel', label:__("Sales Funnel")}, {value: 'sales_pipeline', label:__("Sales Pipeline")}, {value: 'opp_by_lead_source', label:__("Opportunities by lead source")}]), refresh_btn: wrapper.page.set_primary_action(__("Refresh"), function() { me.get_data(); }, "fa fa-refresh"), }; this.elements.no_data = $('
' + __("No Data") + '
') .toggle(false) .appendTo(this.elements.layout); this.elements.funnel_wrapper = $('
') .appendTo(this.elements.layout); this.company = frappe.defaults.get_user_default('company'); this.options = { from_date: frappe.datetime.add_months(frappe.datetime.get_today(), -1), to_date: frappe.datetime.get_today(), chart: 'sales_funnel' }; // set defaults and bind on change $.each(this.options, function(k, v) { if (['from_date', 'to_date'].includes(k)) { me.elements[k].val(frappe.datetime.str_to_user(v)); } else { me.elements[k].val(v); } me.elements[k].on("change", function() { if (['from_date', 'to_date'].includes(k)) { me.options[k] = frappe.datetime.user_to_str($(this).val()) != 'Invalid date' ? frappe.datetime.user_to_str($(this).val()) : frappe.datetime.get_today(); } else { me.options.chart = $(this).val(); } me.get_data(); }); }); // bind refresh this.elements.refresh_btn.on("click", function() { me.get_data(this); }); // bind resize $(window).resize(function() { me.render(); }); } get_data(btn) { var me = this; if (me.options.chart == 'sales_funnel'){ frappe.call({ method: "erpnext.selling.page.sales_funnel.sales_funnel.get_funnel_data", args: { from_date: this.options.from_date, to_date: this.options.to_date, company: this.company }, btn: btn, callback: function(r) { if(!r.exc) { me.options.data = r.message; if (me.options.data=='empty') { const $parent = me.elements.funnel_wrapper; $parent.html(__('No data for this period')); } else { me.render_funnel(); } } } }); } else if (me.options.chart == 'opp_by_lead_source'){ frappe.call({ method: "erpnext.selling.page.sales_funnel.sales_funnel.get_opp_by_lead_source", args: { from_date: this.options.from_date, to_date: this.options.to_date, company: this.company }, btn: btn, callback: function(r) { if(!r.exc) { me.options.data = r.message; if (me.options.data=='empty') { const $parent = me.elements.funnel_wrapper; $parent.html(__('No data for this period')); } else { me.render_opp_by_lead_source(); } } } }); } else if (me.options.chart == 'sales_pipeline'){ frappe.call({ method: "erpnext.selling.page.sales_funnel.sales_funnel.get_pipeline_data", args: { from_date: this.options.from_date, to_date: this.options.to_date, company: this.company }, btn: btn, callback: function(r) { if(!r.exc) { me.options.data = r.message; if (me.options.data=='empty') { const $parent = me.elements.funnel_wrapper; $parent.html(__('No data for this period')); } else { me.render_pipeline(); } } } }); } } render() { let me = this; if (me.options.chart == 'sales_funnel'){ me.render_funnel(); } else if (me.options.chart == 'opp_by_lead_source'){ me.render_opp_by_lead_source(); } else if (me.options.chart == 'sales_pipeline'){ me.render_pipeline(); } } render_funnel() { var me = this; this.prepare_funnel(); var context = this.elements.context, x_start = 0.0, x_end = this.options.width, x_mid = (x_end - x_start) / 2.0, y = 0, y_old = 0.0; if(this.options.total_value === 0) { this.elements.no_data.toggle(true); return; } this.options.data.forEach(function(d) { context.fillStyle = d.color; context.strokeStyle = d.color; me.draw_triangle(x_start, x_mid, x_end, y, me.options.height); y_old = y; // new y y = y + d.height; // new x var half_side = (me.options.height - y) / Math.sqrt(3); x_start = x_mid - half_side; x_end = x_mid + half_side; var y_mid = y_old + (y - y_old) / 2.0; me.draw_legend(x_mid, y_mid, me.options.width, me.options.height, d.value + " - " + d.title); }); } prepare_funnel() { var me = this; this.elements.no_data.toggle(false); // calculate width and height options this.options.width = $(this.elements.funnel_wrapper).width() * 2.0 / 3.0; this.options.height = (Math.sqrt(3) * this.options.width) / 2.0; // calculate total weightage // as height decreases, area decreases by the square of the reduction // hence, compensating by squaring the index value this.options.total_weightage = this.options.data.reduce( function(prev, curr, i) { return prev + Math.pow(i+1, 2) * curr.value; }, 0.0); // calculate height for each data $.each(this.options.data, function(i, d) { d.height = me.options.height * d.value * Math.pow(i+1, 2) / me.options.total_weightage; }); this.elements.canvas = $('') .appendTo(this.elements.funnel_wrapper.empty()) .attr("width", $(this.elements.funnel_wrapper).width()) .attr("height", this.options.height); this.elements.context = this.elements.canvas.get(0).getContext("2d"); } draw_triangle(x_start, x_mid, x_end, y, height) { var context = this.elements.context; context.beginPath(); context.moveTo(x_start, y); context.lineTo(x_end, y); context.lineTo(x_mid, height); context.lineTo(x_start, y); context.closePath(); context.fill(); } draw_legend(x_mid, y_mid, width, height, title) { var context = this.elements.context; if(y_mid == 0) { y_mid = 7; } // draw line context.beginPath(); context.moveTo(x_mid, y_mid); context.lineTo(width, y_mid); context.closePath(); context.stroke(); // draw circle context.beginPath(); context.arc(width, y_mid, 5, 0, Math.PI * 2, false); context.closePath(); context.fill(); // draw text context.fillStyle = "black"; context.textBaseline = "middle"; context.font = "1.1em sans-serif"; context.fillText(__(title), width + 20, y_mid); } render_opp_by_lead_source() { let me = this; let currency = frappe.defaults.get_default("currency"); let chart_data = me.options.data ? me.options.data : null; const parent = me.elements.funnel_wrapper[0]; this.chart = new frappe.Chart(parent, { title: __("Sales Opportunities by Source"), height: 400, data: chart_data, type: 'bar', barOptions: { stacked: 1 }, tooltipOptions: { formatTooltipY: d => format_currency(d, currency), } }); } render_pipeline() { let me = this; let currency = frappe.defaults.get_default("currency"); let chart_data = me.options.data ? me.options.data : null; const parent = me.elements.funnel_wrapper[0]; this.chart = new frappe.Chart(parent, { title: __("Sales Pipeline by Stage"), height: 400, data: chart_data, type: 'bar', tooltipOptions: { formatTooltipY: d => format_currency(d, currency), }, colors: ['light-green', 'green'] }); } };