Merge pull request #4607 from pratu16x7/charts-docs

[minor] Update charts docs

.eslintrc

@@ -59,7 +59,6 @@
 		"PhotoSwipeUI_Default": true,
 		"fluxify": true,
 		"io": true,
-		"c3": true,
 		"__": true,
 		"_p": true,
 		"_f": true,

frappe/docs/user/en/guides/desk/making_charts.md

@@ -0,0 +1,3 @@
+# Making Charts
+
+[**Frappé Charts**](https://frappe.github.io/charts/) enables you to render simple line, bar or percentage graphs for single or multiple discreet sets of data points. You can also set special checkpoint values and summary stats. Check out the docs at https://frappe.github.io/charts/ to learn more.

frappe/docs/user/en/guides/desk/making_charts_in_c3js.md

@@ -1,35 +0,0 @@
-# Making Charts using c3.js
-
-Frappé bundles the c3.js libary to make charts inside the app and provides a wrapper class so that you can start using charts out of the box. To use chart, you need the x and y data, make a wrapper block and then just make the chart object.
-
-### Time Series Example
-
-		page.chart = new frappe.ui.Chart({
-			// attach the chart here
-			wrapper: $('<div>').appendTo(page.body),
-
-			// pass the data, like
-			// ['x', '2016-01-01', '2016-01-02']
-			// ['Value', 20, 30]
-			data: {
-				x: 'x',
-				xFormat: '%Y-%m-%d',
-				columns: [data[0], data[1]],
-			},
-			legend: {
-				show: false
-			},
-			axis: {
-				x: {
-					type: 'timeseries',
-				},
-				y: {
-					min: 0,
-					padding: {bottom: 10}
-				}
-			}
-		});
-
-### Help
-
-For more options, see the [c3js.org](http://c3js.org/examples.html) docs

frappe/docs/user/en/guides/desk/making_graphs.md

@@ -1,100 +0,0 @@
-# Making Graphs
-
-The Frappé UI **Graph** object enables you to render simple line, bar or percentage graphs for single or multiple discreet sets of data points. You can also set special checkpoint values and summary stats.
-
-### Example: Line graph
-Here's an example of a simple sales graph:
-
-		// Data
-		let months = ['August, 2016', 'September, 2016', 'October, 2016', 'November, 2016',
-			'December, 2016', 'January, 2017', 'February, 2017', 'March, 2017', 'April, 2017',
-			'May, 2017', 'June, 2017', 'July, 2017'];
-
-		let values1 = [24100, 31000, 17000, 12000, 27000, 16000, 27400, 11000, 8500, 15000, 4000, 20130];
-		let values2 = [17890, 10400, 12350, 20400, 17050, 23000, 7100, 13800, 16000, 20400, 11000, 13000];
-		let goal = 25000;
-		let current_val = 20130;
-
-		let g = new frappe.ui.Graph({
-			parent: $('.form-graph').empty(),
-			height: 200,					// optional
-			mode: 'line',					// 'line', 'bar' or 'percentage'
-
-			title: 'Sales',
-			subtitle: 'Monthly',
-
-			y: [
-				{
-					title: 'Data 1',
-					values: values1,
-					formatted: values1.map(d => '$ ' + d),
-					color: 'green'		// Indicator colors: 'grey', 'blue', 'red',
-								// 'green', 'light-green', 'orange', 'purple', 'darkgrey',
-								// 'black', 'yellow', 'lightblue'
-				},
-				{
-					title: 'Data 2',
-					values: values2,
-					formatted: values2.map(d => '$ ' + d),
-					color: 'light-green'
-				}
-			],
-
-			x: {
-				values: months.map(d => d.substring(0, 3)),
-				formatted: months
-			},
-
-			specific_values: [
-				{
-					name: 'Goal',
-					line_type: 'dashed',	// 'dashed' or 'solid'
-					value: goal
-				},
-			],
-
-			summary: [
-				{
-					name: 'This month',
-					color: 'orange',
-					value: '$ ' + current_val
-				},
-				{
-					name: 'Goal',
-					color: 'blue',
-					value: '$ ' + goal
-				},
-				{
-					name: 'Completed',
-					color: 'green',
-					value: (current_val/goal*100).toFixed(1) + "%"
-				}
-			]
-		});
-
-<img src="/docs/assets/img/desk/line_graph_sales.png" class="screenshot">
-
-`bar` mode yeilds:
-
-<img src="/docs/assets/img/desk/bar_graph.png" class="screenshot">
-
-You can set the `colors` property of `x` to an array of color values for `percentage` mode:
-
-<img src="/docs/assets/img/desk/percentage_graph.png" class="screenshot">
-
-You can also change the values of an existing graph with a new set of `y` values:
-
-		setTimeout(() => {
-			g.change_values([
-				{
-					values: data[2],
-					formatted: data[2].map(d => d + 'L')
-				},
-				{
-					values: data[3],
-					formatted: data[3].map(d => d + 'L')
-				}
-			]);
-		}, 1000);
-
-<img src="/docs/assets/img/desk/animated_line_graph.gif" class="screenshot">

frappe/public/css/desk.css

@@ -970,47 +970,6 @@ li.user-progress .progress-bar {
 .note-editor.note-frame .note-editing-area .note-editable {
   color: #36414C;
 }
-.c3 svg {
-  font-family: inherit;
-  font-size: 10px;
-  color: #36414C;
-}
-.c3-line {
-  stroke-width: 3px;
-}
-.c3-tooltip {
-  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
-  border-radius: 3px;
-  opacity: 1;
-}
-.c3-tooltip tr {
-  border: none;
-}
-.c3-tooltip th {
-  color: #8D99A6;
-  background-color: #ffffff;
-  font-size: 12px;
-  font-weight: normal;
-  padding: 2px 5px;
-  text-align: left;
-  border: 1px solid #d1d8dd;
-}
-.c3-tooltip td {
-  color: #36414C;
-  font-size: 11px;
-  padding: 3px 6px;
-  background-color: #fff;
-  border: 1px solid #d1d8dd;
-}
-.c3-tooltip td > span {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  margin-right: 6px;
-}
-.c3-tooltip td.value {
-  text-align: right;
-}
 input[type="checkbox"] {
   visibility: hidden;
   position: relative;

frappe/public/less/desk.less

@@ -894,54 +894,6 @@ li.user-progress {
 	color: @text-color;
 }
 
-.c3 svg {
-	font-family: inherit;
-	font-size: 10px;
-	color: @text-color;
-}
-
-.c3-line {
-	stroke-width: 3px;
-}
-
-.c3-tooltip {
-  box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
-  border-radius: 3px;
-  opacity: 1;
-}
-
-.c3-tooltip tr {
-  border: none;
-}
-
-.c3-tooltip th {
-	color: @text-muted;
-	background-color: #ffffff;
-	font-size: 12px;
-	font-weight: normal;
-	padding: 2px 5px;
-	text-align: left;
-	border: 1px solid @border-color;
-}
-
-.c3-tooltip td {
-	color: @text-color;
-	font-size: 11px;
-	padding: 3px 6px;
-	background-color: #fff;
-	border: 1px solid @border-color;
-}
-
-.c3-tooltip td > span {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  margin-right: 6px;
-}
-
-.c3-tooltip td.value {
-  text-align: right; }
-
 // custom font awesome checkbox
 input[type="checkbox"] {
 	visibility: hidden;