diff --git a/.eslintrc b/.eslintrc index d7cd742651..fb129c477f 100644 --- a/.eslintrc +++ b/.eslintrc @@ -59,7 +59,6 @@ "PhotoSwipeUI_Default": true, "fluxify": true, "io": true, - "c3": true, "__": true, "_p": true, "_f": true, diff --git a/frappe/docs/user/en/guides/desk/making_charts.md b/frappe/docs/user/en/guides/desk/making_charts.md new file mode 100644 index 0000000000..3d8db9ac16 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/frappe/docs/user/en/guides/desk/making_charts_in_c3js.md b/frappe/docs/user/en/guides/desk/making_charts_in_c3js.md deleted file mode 100644 index c8143590f2..0000000000 --- a/frappe/docs/user/en/guides/desk/making_charts_in_c3js.md +++ /dev/null @@ -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: $('
').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 \ No newline at end of file diff --git a/frappe/docs/user/en/guides/desk/making_graphs.md b/frappe/docs/user/en/guides/desk/making_graphs.md deleted file mode 100644 index d20f8b88d4..0000000000 --- a/frappe/docs/user/en/guides/desk/making_graphs.md +++ /dev/null @@ -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) + "%" - } - ] - }); - - - -`bar` mode yeilds: - - - -You can set the `colors` property of `x` to an array of color values for `percentage` mode: - - - -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); - - diff --git a/frappe/public/css/desk.css b/frappe/public/css/desk.css index 0cfc53218e..8a3996f2e0 100644 --- a/frappe/public/css/desk.css +++ b/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; diff --git a/frappe/public/less/desk.less b/frappe/public/less/desk.less index 942b3fc58e..e9521e654a 100644 --- a/frappe/public/less/desk.less +++ b/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;