C3 to Charts (#4228)
* make AxisGraph * remove jquery and snap * [major] refactor, svg animations, rename to charts * remove c3, d3 * [Charts] renaming and namespacing * [fix] codacy * Replace in grid report with plot, fixes
This commit is contained in:
Prateeksha Singh
Rushabh Mehta
parent
181d493dc2
commit
7e9cce2d3b
14 changed files with 1644 additions and 1265 deletions
|
|
@ -30,7 +30,6 @@ app_include_js = [
|
|||
"assets/js/form.min.js",
|
||||
"assets/js/control.min.js",
|
||||
"assets/js/report.min.js",
|
||||
"assets/js/d3.min.js",
|
||||
"assets/frappe/js/frappe/toolbar.js"
|
||||
]
|
||||
app_include_css = [
|
||||
|
|
|
|||
|
|
@ -102,7 +102,6 @@
|
|||
"public/css/bootstrap.css",
|
||||
"public/css/font-awesome.css",
|
||||
"public/css/octicons/octicons.css",
|
||||
"public/css/c3.min.css",
|
||||
"public/css/desk.css",
|
||||
"public/css/indicator.css",
|
||||
"public/css/avatar.css",
|
||||
|
|
@ -114,7 +113,7 @@
|
|||
"public/css/form.css",
|
||||
"public/css/mobile.css",
|
||||
"public/css/kanban.css",
|
||||
"public/css/graphs.css"
|
||||
"public/css/charts.css"
|
||||
],
|
||||
"css/frappe-rtl.css": [
|
||||
"public/css/bootstrap-rtl.css",
|
||||
|
|
@ -231,16 +230,11 @@
|
|||
"public/js/frappe/query_string.js",
|
||||
|
||||
"public/js/frappe/ui/charts.js",
|
||||
"public/js/frappe/ui/graphs.js",
|
||||
"public/js/frappe/ui/comment.js",
|
||||
"public/js/frappe/misc/rating_icons.html",
|
||||
|
||||
"public/js/frappe/feedback.js"
|
||||
],
|
||||
"js/d3.min.js": [
|
||||
"public/js/lib/d3.min.js",
|
||||
"public/js/lib/c3.min.js"
|
||||
],
|
||||
"css/module.min.css": [
|
||||
"public/css/module.css"
|
||||
],
|
||||
|
|
|
|||
1
frappe/public/css/c3.min.css
vendored
1
frappe/public/css/c3.min.css
vendored
|
|
@ -1 +0,0 @@
|
|||
.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}
|
||||
|
|
@ -1,74 +1,74 @@
|
|||
/* graphs */
|
||||
.graph-container .graph-focus-margin {
|
||||
/* charts */
|
||||
.chart-container .graph-focus-margin {
|
||||
margin: 0px 5%;
|
||||
}
|
||||
.graph-container .graphics {
|
||||
.chart-container .graphics {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.graph-container .graph-stats-group {
|
||||
.chart-container .graph-stats-group {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex: 1;
|
||||
}
|
||||
.graph-container .graph-stats-container {
|
||||
.chart-container .graph-stats-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.graph-container .graph-stats-container .stats {
|
||||
.chart-container .graph-stats-container .stats {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.graph-container .graph-stats-container .stats-title {
|
||||
.chart-container .graph-stats-container .stats-title {
|
||||
color: #8D99A6;
|
||||
}
|
||||
.graph-container .graph-stats-container .stats-value {
|
||||
.chart-container .graph-stats-container .stats-value {
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.graph-container .graph-stats-container .stats-description {
|
||||
.chart-container .graph-stats-container .stats-description {
|
||||
font-size: 12px;
|
||||
color: #8D99A6;
|
||||
}
|
||||
.graph-container .graph-stats-container .graph-data .stats-value {
|
||||
.chart-container .graph-stats-container .graph-data .stats-value {
|
||||
color: #98d85b;
|
||||
}
|
||||
.graph-container .axis,
|
||||
.graph-container .chart-label {
|
||||
.chart-container .axis,
|
||||
.chart-container .chart-label {
|
||||
font-size: 10px;
|
||||
fill: #959ba1;
|
||||
fill: #555b51;
|
||||
}
|
||||
.graph-container .axis line,
|
||||
.graph-container .chart-label line {
|
||||
stroke: rgba(27, 31, 35, 0.1);
|
||||
.chart-container .axis line,
|
||||
.chart-container .chart-label line {
|
||||
stroke: rgba(27, 31, 35, 0.2);
|
||||
}
|
||||
.graph-container .percentage-graph .progress {
|
||||
.chart-container .percentage-graph .progress {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.graph-container .data-points circle {
|
||||
.chart-container .data-points circle {
|
||||
stroke: #fff;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.graph-container .data-points path {
|
||||
.chart-container .data-points path {
|
||||
fill: none;
|
||||
stroke-opacity: 1;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
.graph-container line.dashed {
|
||||
.chart-container line.dashed {
|
||||
stroke-dasharray: 5,3;
|
||||
}
|
||||
.graph-container .tick.x-axis-label {
|
||||
.chart-container .tick.x-axis-label {
|
||||
display: block;
|
||||
}
|
||||
.graph-container .tick .specific-value {
|
||||
.chart-container .tick .specific-value {
|
||||
text-anchor: start;
|
||||
}
|
||||
.graph-container .tick .y-value-text {
|
||||
.chart-container .tick .y-value-text {
|
||||
text-anchor: end;
|
||||
}
|
||||
.graph-container .tick .x-value-text {
|
||||
.chart-container .tick .x-value-text {
|
||||
text-anchor: middle;
|
||||
}
|
||||
.graph-svg-tip {
|
||||
|
|
@ -138,6 +138,9 @@
|
|||
.stroke.light-green {
|
||||
stroke: #98d85b;
|
||||
}
|
||||
.stroke.lightgreen {
|
||||
stroke: #98d85b;
|
||||
}
|
||||
.stroke.green {
|
||||
stroke: #28a745;
|
||||
}
|
||||
|
|
@ -174,6 +177,9 @@
|
|||
.fill.light-green {
|
||||
fill: #98d85b;
|
||||
}
|
||||
.fill.lightgreen {
|
||||
fill: #98d85b;
|
||||
}
|
||||
.fill.green {
|
||||
fill: #28a745;
|
||||
}
|
||||
|
|
@ -210,6 +216,9 @@
|
|||
.background.light-green {
|
||||
background: #98d85b;
|
||||
}
|
||||
.background.lightgreen {
|
||||
background: #98d85b;
|
||||
}
|
||||
.background.green {
|
||||
background: #28a745;
|
||||
}
|
||||
|
|
@ -246,6 +255,9 @@
|
|||
.border-top.light-green {
|
||||
border-top: 3px solid #98d85b;
|
||||
}
|
||||
.border-top.lightgreen {
|
||||
border-top: 3px solid #98d85b;
|
||||
}
|
||||
.border-top.green {
|
||||
border-top: 3px solid #28a745;
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ frappe.ui.form.Dashboard = Class.extend({
|
|||
|
||||
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.chart_area = this.wrapper.find('.form-graph');
|
||||
this.stats_area = this.wrapper.find('.form-stats');
|
||||
this.stats_area_row = this.stats_area.find('.row');
|
||||
this.links_area = this.wrapper.find('.form-links');
|
||||
|
|
@ -334,11 +334,12 @@ frappe.ui.form.Dashboard = Class.extend({
|
|||
// heatmap
|
||||
render_heatmap: function() {
|
||||
if(!this.heatmap) {
|
||||
this.heatmap = new frappe.ui.HeatMap({
|
||||
parent: this.heatmap_area.find("#heatmap-" + frappe.model.scrub(this.frm.doctype)),
|
||||
this.heatmap = new frappe.chart.FrappeChart({
|
||||
parent: "#heatmap-" + frappe.model.scrub(this.frm.doctype),
|
||||
type: 'heatmap',
|
||||
height: 100,
|
||||
start: new Date(moment().subtract(1, 'year').toDate()),
|
||||
count_label: "items",
|
||||
count_label: frappe.model.scrub(this.frm.doctype) + "s",
|
||||
discrete_domains: 0
|
||||
});
|
||||
|
||||
|
|
@ -403,16 +404,25 @@ frappe.ui.form.Dashboard = Class.extend({
|
|||
|
||||
render_graph: function(args) {
|
||||
var me = this;
|
||||
this.graph_area.empty().removeClass('hidden');
|
||||
this.chart_area.empty().removeClass('hidden');
|
||||
$.extend(args, {
|
||||
parent: me.graph_area,
|
||||
mode: 'line',
|
||||
parent: '.form-graph',
|
||||
type: 'line',
|
||||
height: 140
|
||||
});
|
||||
new frappe.ui.Graph(args);
|
||||
this.show();
|
||||
|
||||
this.chart = new frappe.chart.FrappeChart(args);
|
||||
if(!this.chart) {
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
show: function() {
|
||||
this.section.removeClass('hidden');
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
this.section.addClass('hidden');
|
||||
}
|
||||
});
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -177,7 +177,7 @@ frappe.views.GridReport = Class.extend({
|
|||
frappe.ui.get_print_settings(false, function(print_settings) {
|
||||
frappe.render_grid({grid: me.grid, title: me.page.title, print_settings: print_settings });
|
||||
});
|
||||
|
||||
|
||||
}, true);
|
||||
|
||||
// range
|
||||
|
|
@ -672,10 +672,11 @@ frappe.views.GridReportWithPlot = frappe.views.GridReport.extend({
|
|||
}
|
||||
var chart_data = this.get_chart_data ? this.get_chart_data() : null;
|
||||
|
||||
this.chart = new frappe.ui.Chart({
|
||||
wrapper: this.chart_area,
|
||||
this.chart = new frappe.chart.FrappeChart({
|
||||
parent: ".chart",
|
||||
height: 200,
|
||||
data: chart_data,
|
||||
x_type: 'timeseries'
|
||||
type: 'line'
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -701,29 +702,30 @@ frappe.views.GridReportWithPlot = frappe.views.GridReport.extend({
|
|||
|
||||
get_chart_data: function() {
|
||||
var me = this;
|
||||
|
||||
var plottable_cols = [];
|
||||
$.each(me.columns, function(idx, col) {
|
||||
if(col.formatter==me.currency_formatter && !col.hidden && col.plot!==false) {
|
||||
plottable_cols.push(col.field);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
var data = {
|
||||
x: 'x',
|
||||
'columns': [['x'].concat(plottable_cols)]
|
||||
labels: plottable_cols,
|
||||
datasets: []
|
||||
};
|
||||
|
||||
$.each(this.data, function(i, item) {
|
||||
if (item.checked) {
|
||||
var data_points = [item.name];
|
||||
let dataset = {};
|
||||
dataset.title = item.name;
|
||||
dataset.values = [];
|
||||
$.each(plottable_cols, function(idx, col) {
|
||||
data_points.push(item[col]);
|
||||
})
|
||||
data["columns"].push(data_points);
|
||||
dataset.values.push(item[col]);
|
||||
});
|
||||
data["datasets"].push(dataset);
|
||||
}
|
||||
});
|
||||
return data
|
||||
return data;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ frappe.views.QueryReport = Class.extend({
|
|||
this.wrapper = $("<div>").appendTo(this.page.main);
|
||||
$('<div class="waiting-area" style="display: none;"></div>\
|
||||
<div class="no-report-area msg-box no-border" style="display: none;"></div>\
|
||||
<div class="chart_area" style="border-bottom: 1px solid #d1d8dd; padding: 0px 5%"></div>\
|
||||
<div class="chart-area" style="border-bottom: 1px solid #d1d8dd; margin: 0px 3%"></div>\
|
||||
<div class="results" style="display: none;">\
|
||||
<div class="result-area" style="height:70vh;"></div>\
|
||||
<button class="btn btn-secondary btn-default btn-xs expand-all hidden" style="margin: 10px;">'+__('Expand All')+'</button>\
|
||||
|
|
@ -57,7 +57,7 @@ frappe.views.QueryReport = Class.extend({
|
|||
</div>').appendTo(this.wrapper);
|
||||
this.wrapper.find(".expand-all").on("click", function() { me.toggle_all(false);});
|
||||
this.wrapper.find(".collapse-all").on("click", function() { me.toggle_all(true);});
|
||||
this.chart_area = this.wrapper.find(".chart_area");
|
||||
this.chart_area = this.wrapper.find(".chart-area");
|
||||
this.make_toolbar();
|
||||
},
|
||||
toggle_expand_collapse_buttons: function(show) {
|
||||
|
|
@ -939,12 +939,13 @@ frappe.views.QueryReport = Class.extend({
|
|||
}
|
||||
|
||||
$.extend(opts, {
|
||||
wrapper: this.chart_area,
|
||||
parent: ".chart-area",
|
||||
height: 200
|
||||
});
|
||||
|
||||
this.chart = new frappe.ui.Chart(opts);
|
||||
if(this.chart && opts.data && opts.data.rows && opts.data.rows.length) {
|
||||
if(opts.data && opts.data.labels && opts.data.labels.length) {
|
||||
this.chart_area.toggle(true);
|
||||
this.chart = new frappe.chart.FrappeChart(opts);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
5
frappe/public/js/lib/c3.min.js
vendored
5
frappe/public/js/lib/c3.min.js
vendored
File diff suppressed because one or more lines are too long
5
frappe/public/js/lib/d3.min.js
vendored
5
frappe/public/js/lib/d3.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
|
||||
/* graphs */
|
||||
.graph-container {
|
||||
/* charts */
|
||||
.chart-container {
|
||||
// font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
|
||||
.graph-focus-margin {
|
||||
margin: 0px 5%;
|
||||
}
|
||||
|
|
@ -46,10 +48,10 @@
|
|||
|
||||
.axis, .chart-label {
|
||||
font-size: 10px;
|
||||
fill: #959ba1;
|
||||
fill: #555b51;
|
||||
|
||||
line {
|
||||
stroke: rgba(27,31,35,0.1);
|
||||
stroke: rgba(27,31,35,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -176,6 +178,9 @@
|
|||
.stroke.light-green {
|
||||
stroke: #98d85b;
|
||||
}
|
||||
.stroke.lightgreen {
|
||||
stroke: #98d85b;
|
||||
}
|
||||
.stroke.green {
|
||||
stroke: #28a745;
|
||||
}
|
||||
|
|
@ -213,6 +218,9 @@
|
|||
.fill.light-green {
|
||||
fill: #98d85b;
|
||||
}
|
||||
.fill.lightgreen {
|
||||
fill: #98d85b;
|
||||
}
|
||||
.fill.green {
|
||||
fill: #28a745;
|
||||
}
|
||||
|
|
@ -250,6 +258,9 @@
|
|||
.background.light-green {
|
||||
background: #98d85b;
|
||||
}
|
||||
.background.lightgreen {
|
||||
background: #98d85b;
|
||||
}
|
||||
.background.green {
|
||||
background: #28a745;
|
||||
}
|
||||
|
|
@ -287,6 +298,9 @@
|
|||
.border-top.light-green {
|
||||
border-top: 3px solid #98d85b;
|
||||
}
|
||||
.border-top.lightgreen {
|
||||
border-top: 3px solid #98d85b;
|
||||
}
|
||||
.border-top.green {
|
||||
border-top: 3px solid #28a745;
|
||||
}
|
||||
|
|
@ -31,4 +31,4 @@ class TestGoal(unittest.TestCase):
|
|||
frappe.db.set_value('Event', docname, 'description', 1)
|
||||
data = get_monthly_goal_graph_data('Test', 'Event', docname, 'description', 'description', 'description',
|
||||
'Event', '', 'description', 'creation', 'starts_on = "2014-01-01"', 'count')
|
||||
self.assertEquals(float(data['y'][0]['values'][-1]), 1)
|
||||
self.assertEquals(float(data['data']['datasets'][0]['values'][-1]), 1)
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ def get_monthly_goal_graph_data(title, doctype, docname, goal_value_field, goal_
|
|||
specific_values = []
|
||||
summary_values = [
|
||||
{
|
||||
'name': _("This month"),
|
||||
'title': _("This month"),
|
||||
'color': 'green',
|
||||
'value': formatted_value
|
||||
}
|
||||
|
|
@ -106,19 +106,19 @@ def get_monthly_goal_graph_data(title, doctype, docname, goal_value_field, goal_
|
|||
if float(goal) > 0:
|
||||
specific_values = [
|
||||
{
|
||||
'name': _("Goal"),
|
||||
'title': _("Goal"),
|
||||
'line_type': "dashed",
|
||||
'value': goal
|
||||
},
|
||||
]
|
||||
summary_values += [
|
||||
{
|
||||
'name': _("Goal"),
|
||||
'title': _("Goal"),
|
||||
'color': 'blue',
|
||||
'value': formatted_goal
|
||||
},
|
||||
{
|
||||
'name': _("Completed"),
|
||||
'title': _("Completed"),
|
||||
'color': 'green',
|
||||
'value': str(int(round(float(current_month_value)/float(goal)*100))) + "%"
|
||||
}
|
||||
|
|
@ -127,16 +127,16 @@ def get_monthly_goal_graph_data(title, doctype, docname, goal_value_field, goal_
|
|||
data = {
|
||||
'title': title,
|
||||
# 'subtitle':
|
||||
'y': [
|
||||
{
|
||||
'color': 'green',
|
||||
'values': values,
|
||||
'formatted': values_formatted
|
||||
}
|
||||
],
|
||||
'x': {
|
||||
'values': months,
|
||||
'formatted': months_formatted
|
||||
|
||||
'data': {
|
||||
'datasets': [
|
||||
{
|
||||
'color': 'green',
|
||||
'values': values,
|
||||
'formatted': values_formatted
|
||||
}
|
||||
],
|
||||
'labels': months
|
||||
},
|
||||
|
||||
'specific_values': specific_values,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue