diff --git a/frappe/public/build.json b/frappe/public/build.json index e82bd08d5a..c15a06d42f 100644 --- a/frappe/public/build.json +++ b/frappe/public/build.json @@ -43,6 +43,7 @@ "public/css/font-awesome.css", "public/css/octicons/octicons.css", "public/css/cal-heatmap.css", + "public/css/c3.min.css", "public/css/desk.css", "public/css/indicator.css", "public/css/avatar.css", @@ -65,6 +66,7 @@ "public/js/lib/socket.io.min.js", "public/js/lib/d3.min.js", "public/js/lib/cal-heatmap.js", + "public/js/lib/c3.min.js", "public/js/frappe/provide.js", "public/js/frappe/class.js", diff --git a/frappe/public/css/c3.min.css b/frappe/public/css/c3.min.css new file mode 100644 index 0000000000..1e20d5b116 --- /dev/null +++ b/frappe/public/css/c3.min.css @@ -0,0 +1 @@ +.c3 svg{font:10px sans-serif;-webkit-tap-highlight-color:transparent}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:gray;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:.75}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-item-hidden{opacity:.15}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-title{font:14px sans-serif}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #CCC}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#FFF}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:none}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max,.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000} \ No newline at end of file diff --git a/frappe/public/js/frappe/form/dashboard.js b/frappe/public/js/frappe/form/dashboard.js index e385ef7141..9e91cb5824 100644 --- a/frappe/public/js/frappe/form/dashboard.js +++ b/frappe/public/js/frappe/form/dashboard.js @@ -10,6 +10,7 @@ frappe.ui.form.Dashboard = Class.extend({ this.headline = this.wrapper.find('.form-headline'); this.progress_area = this.wrapper.find(".progress-area"); this.heatmap_area = this.wrapper.find('.form-heatmap'); + this.graph_area = this.wrapper.find('.form-graph'); this.stats_area = this.wrapper.find('.form-stats'); this.links_area = this.wrapper.find('.form-links'); this.transactions_area = this.links_area.find('.transactions'); @@ -25,6 +26,9 @@ frappe.ui.form.Dashboard = Class.extend({ // clear links this.links_area.addClass('hidden'); this.transactions_area.empty(); + + //clear graphs + this.graph_area.empty().addClass('hidden'); // clear stats this.stats_area.empty().addClass('hidden'); @@ -251,7 +255,49 @@ frappe.ui.form.Dashboard = Class.extend({ this.stats_area.html(html).removeClass('hidden'); this.show(); }, + + //graphs + add_graph: function(data, chart_type) { + var chart = c3.generate({ + bindto: '.form-graph', + data: { + x: 'x', + columns: data, + type: chart_type || 'line' + }, + axis: { + x: { + type: 'timeseries', + tick: { + format: '%d-%m-%Y' + } + }, + y: { + min: 0, + padding: {bottom: 10} + } + }, + legend: { + show: false + }, + padding: { + right: 30, + bottom: 30 + }, + }); + + this.chart = chart; + this.graph_area.removeClass('hidden'); + this.show(); + this.set_chart_size(); + }, + show: function() { this.wrapper.removeClass('hidden'); + }, + + set_chart_size: function() { + var width = this.wrapper.width() - 80; + this.chart.resize({ width: width }); } }); diff --git a/frappe/public/js/frappe/form/templates/form_dashboard.html b/frappe/public/js/frappe/form/templates/form_dashboard.html index d29418f11c..4c8d6eae40 100644 --- a/frappe/public/js/frappe/form/templates/form_dashboard.html +++ b/frappe/public/js/frappe/form/templates/form_dashboard.html @@ -7,6 +7,7 @@
+