From d9ebcb494b2008e891e9b26c16bfd202deebdfdc Mon Sep 17 00:00:00 2001 From: pratu16x7 Date: Tue, 24 Oct 2017 13:11:52 +0530 Subject: [PATCH] basic index page layout --- docs/assets/css/index.css | 18 ++- docs/assets/js/index.js | 229 ++++++++++++++++++++++++-------------- docs/index.html | 107 +++++++++++++++++- src/charts.css | 44 ++++++++ src/charts.js | 24 ++-- 5 files changed, 317 insertions(+), 105 deletions(-) diff --git a/docs/assets/css/index.css b/docs/assets/css/index.css index ea66236..693fe8f 100755 --- a/docs/assets/css/index.css +++ b/docs/assets/css/index.css @@ -4,7 +4,9 @@ color: #fff; padding: 2em 0; } - +.jumbotron { + padding: 2rem 2rem; +} .project-name { padding-top: 1.8em; font-size: 2.5em; @@ -37,7 +39,7 @@ hr { margin-bottom: 2rem; } -.chart-container { +.graphics-container { border: 1px solid #ddd; border-radius: 3px; } @@ -47,7 +49,7 @@ pre.highlight { border-radius: 3px; } -.btn-group>.btn { +.btn { outline: none !important; } .dashboard-section h1 { @@ -56,4 +58,14 @@ pre.highlight { .hero .gantt-container { text-align: left; +} +.hero { + /*font-size: 1.4rem;*/ +} +.margin-vertical-px { + margin: 15px 0px; +} + +.margin-vertical-rem { + margin: 2em 0 1em 0; } \ No newline at end of file diff --git a/docs/assets/js/index.js b/docs/assets/js/index.js index 7b4e414..9fec834 100755 --- a/docs/assets/js/index.js +++ b/docs/assets/js/index.js @@ -1,113 +1,176 @@ -let bar_data = { - // "labels": ["Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"], +let bar_composite_data = { "labels": ["Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"], "datasets": [{ "color": "orange", - // "values": [50804, 10000, 20000, -61500, 82936.88, 24010, 4000, 6000, 25840, 50804.82, 116820, 6000], "values": [50804, 10000, 20000, 61500, 82936.88, 24010, 40000, 60000, 25840, 50804.82, 116820], - // "values": [-108048, 0, 0, -101500, -50000.88, 24010, 0, 0, 25840, 108048.82, 51682, 0], - "formatted": ["₹ 0.00", "₹ 0.00", "₹ 0.00", "₹ 61,500.00", "₹ 82,936.88", "₹ 24,010.00", "₹ 0.00", "₹ 0.00", "₹ 25,840.00", "₹ 5,08,048.82", "₹ 1,16,820.00", "₹ 0.00"], - } - , - { - "color": "blue", - // "values": [-108048, 0, 0, -101500, -50000.88, 24010, 0, 0, 25840, 108048.82, 51682, 0], - "values": [108048, 0, 0, 101500, 50000.88, 24010, 0, 0, 25840, 108048.82, 51682], "formatted": ["₹ 0.00", "₹ 0.00", "₹ 0.00", "₹ 61,500.00", "₹ 82,936.88", "₹ 24,010.00", "₹ 0.00", "₹ 0.00", "₹ 25,840.00", "₹ 5,08,048.82", "₹ 1,16,820.00", "₹ 0.00"], } ] } -let line_data = { +let line_composite_data = { "labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], "datasets": [{ "color": "green", - "values": [25, 40, 30, 35, 48, 52, 17], - // "values": [25, -90, -30, 35, 48, 52, -17] + "values": [25, 40, 30, 35, 48, 52, 17] + } + ] +}; + +let more_line_data = { + 0: {values: [25, -90, -30, 35, 48, 52, -17]}, + 1: {values: [25, -40, -30, 35, 48, 52, 30]}, + 2: {values: [5, 48, -52, 17, -25, 40, 30]}, + 3: { + values: [25, 40, 30, 35, 48, 52, 17] + }, + 4: { + values: [35, 48, 40, 30, 52, 17, 72] + }, + 5: { + values: [5, 48, 52, 17, 72, 40, 30] + }, + 6: { + values: [72, 40, 30, 35, 48, 52, 17] + }, + 7: { + values: [35, 48, 40, 30, 52, 17, 25] + }, + 8: { + values: [5, 48, 52, 17, 25, 40, 30] + }, + 9: { + values: [25, 40, 30, 35, 48, 52, 17] + }, + 10: { + values: [35, 48, 40, 30, 52, 17, 25] + }, + 11: { + values: [5, 48, 52, 17, 25, 40, 30] + } +} + +let type_data = { + "labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], + "datasets": [{ + "color": "light-blue", + "values": [25, 40, 30, 35, 8, 52, 17] + }, + { + "color": "violet", + "values": [25, 50, -10, 15, 18, 32, 27] }, - // { - // "color": "yellow", - // // "values": [25, 40, 30, 35, 48, 52, 17], - // "values": [25, -90, -30, 35, 48, 52, -17] + { + "color": "blue", + "values": [15, 20, -3, -15, 58, 12, -17] - // } + } ] }; -let more_line_data = { - 0: [{values: [25, -90, -30, 35, 48, 52, -17]}, ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]], - 1: [{values: [25, -40, -30, 35, 48, 52]}, ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri"]], - 2: [{values: [5, 48, -52, 17, -25, 40, 30, 20, -25, 40, 30, 20]}, ["Thu", "Fri", "Sat", "Sun", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]], - // 3: { - // values: [25, 40, 30, 35, 48, 52, 17, 20, 30, 40] - // }, - // 4: { - // values: [35, 48, 40, 30, 52, 17, 72] - // }, - // 5: { - // values: [5, 48, 52, 17, 72, 40, 30] - // }, - // 6: { - // values: [72, 40, 30, 35, 48, 52, 17] - // }, - // 7: { - // values: [35, 48, 40, 30, 52, 17, 25] - // }, - // 8: { - // values: [5, 48, 52, 17, 25, 40, 30] - // }, - // 9: { - // values: [25, 40, 30, 35, 48, 52, 17] - // }, - // 10: { - // values: [35, 48, 40, 30, 52, 17, 25] - // }, - // 11: { - // values: [5, 48, 52, 17, 25, 40, 30] - // } -} +let update_data = { + "labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], + "datasets": [{ + "color": "red", + "values": [25, 40, 30, 35, 48, 52, 17] + } + ] +}; -let line_chart = new frappe.chart.FrappeChart ({ - parent: "#charts-2", - data: line_data, - type: 'line', - height: 340, - region_fill: 1, - // y_axis_mode: 'tick' -}) +let events_data = { + "labels": ["Sun", "Mon", "Tue", "Wed", "Thu"], + "datasets": [{ + "color": "light-green", + "values": [25, 40, 30, 35, 48] + } + ] +}; + +let aggr_data = { + "labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], + "datasets": [{ + "color": "purple", + "values": [25, 40, 30, 35, 8, 52, 17] + }, + { + "color": "orange", + "values": [25, 50, -10, 15, 18, 32, 27] -let bar_chart = new frappe.chart.FrappeChart ({ - parent: "#charts-1", - data: bar_data, + } + ] +}; + +let heatmap_data = { + 1479753000.0: 1, + 1498588200.0: 1, + 1499193000.0: 1, + 1499625000.0: 2, + 1500921000.0: 1, + 1501612200.0: 1, + 1502994600.0: 1, + 1503858600.0: 1, + 1504809000.0: 3, + 1505241000.0: 1, + 1506277800.0: 2 +}; + +let bar_composite_chart = new frappe.chart.FrappeChart ({ + parent: "#chart-composite-1", + data: bar_composite_data, type: 'bar', - height: 140, - is_navigable: 1, + height: 180, + is_navigable: 1 // region_fill: 1 }) -bar_chart.parent.addEventListener('data-select', (e) => { - line_chart.update_values([more_line_data[e.index][0]], more_line_data[e.index][1]); +let line_composite_chart = new frappe.chart.FrappeChart ({ + parent: "#chart-composite-2", + data: line_composite_data, + type: 'line', + height: 180 +}) + +bar_composite_chart.parent.addEventListener('data-select', (e) => { + line_composite_chart.update_values([more_line_data[e.index]]); }); -// console.log("chart", bar_chart); +let type_chart = new frappe.chart.FrappeChart({ + parent: "#chart-types", + data: type_data, + type: 'bar', + height: 250, + // region_fill: 1, + // y_axis_mode: 'tick' +}); -let percentage_data = {}; +let update_chart = new frappe.chart.FrappeChart({ + parent: "#chart-update", + data: update_data, + type: 'line', + height: 250, + region_fill: 1 +}); -let heatmap_data = {}; +let events_chart = new frappe.chart.FrappeChart({ + parent: "#chart-events", + data: events_data, + type: 'bar', + height: 250, + is_navigable: 1, +}); -// update_test() { -// setTimeout(() => { -// this.update_values([{values: [0, 0, 0, 21500, 50000.88, 24010, 0, 0, 25840, 108048.82, 516820, 0]}, -// {values: [0, 0, 0, 21500, 80000.88, 24010, 20000, 20000, 15840, 508048.82, 116820, 0]}]); -// setTimeout(() => { -// this.update_values([{values: [0, 0, 0, 21500, 80000.88, 24010, 20000, 20000, 15840, 508048.82, 116820, 0]}, -// {values: [0, 0, 0, 21500, 50000.88, 24010, 0, 0, 25840, 108048.82, 516820, 0]}]); -// setTimeout(() => { -// this.update_values([{values: [0, 0, 0, 101500, 50000.88, 24010, 0, 0, 25840, 108048.82, 516820, 0]}, -// {values: [0, 0, 0, 21500, 80000.88, 24010, 20000, 20000, 15840, 508048.82, 116820, 0]}]); +let aggr_chart = new frappe.chart.FrappeChart({ + parent: "#chart-aggr", + data: aggr_data, + type: 'line', + height: 250 +}); -// }, 300); -// }, 300); -// }, 300); -// } \ No newline at end of file +let heatmap = new frappe.chart.FrappeChart({ + parent: "#chart-heatmap", + data: heatmap_data, + type: 'heatmap', + height: 100, + // discrete_domains: 1 +}); diff --git a/docs/index.html b/docs/index.html index 02eedc1..12cd880 100644 --- a/docs/index.html +++ b/docs/index.html @@ -8,11 +8,12 @@ - + + @@ -28,21 +29,119 @@

Frappé Charts

GitHub-inspired simple and modern charts for the web

with zero dependencies.

-

Because dumb charts are hard to come by.

+
-
+

Use arrow keys to navigate data points

-
+
+
+
+ +
+
+
+ Bars, Lines or Percentages +
+
+
+ + + +
+ 
<div id="chart"></div>
+
+
+ +
+
+
+ Update Values +
+
+
+ + + +
+ 
<div id="chart"></div>
+
+
+ +
+
+
+ Listen to state change +
+
+ 
<div id="chart"></div>
+
+
+ +
+
+
+ Simple Aggregations +
+
+
+ + +
+ 
<div id="chart"></div>
+
+
+ +
+
+
+ Oh, and a complementary annual Heatmap +
+
+
+ + +
+ 
<div id="chart"></div>
+
+
+ +
+
+ +
+ +

View on GitHub

+

License: MIT

+
+
+
+ +
+
+
+ +

Made by pratu16x7. Used in ERPNext.

+
+ + + + + diff --git a/src/charts.css b/src/charts.css index f2cf20f..05c5485 100644 --- a/src/charts.css +++ b/src/charts.css @@ -410,3 +410,47 @@ .border-top.magenta { border-top: 3px solid #ffa3ef; } + +.stop-color.grey { + stop-color: #bdd3e6; +} +.stop-color.light-grey { + stop-color: #F0F4F7; +} +.stop-color.blue { + stop-color: #5e64ff; +} +.stop-color.red { + stop-color: #ff5858; +} +.stop-color.light-green { + stop-color: #98d85b; +} +.stop-color.green { + stop-color: #28a745; +} +.stop-color.orange { + stop-color: #ffa00a; +} +.stop-color.violet { + stop-color: #743ee2; +} +.stop-color.darkgrey { + stop-color: #b8c2cc; +} +.stop-color.black { + stop-color: #36414C; +} +.stop-color.yellow { + stop-color: #FEEF72; +} +.stop-color.light-blue { + stop-color: #7CD6FD; +} +.stop-color.purple { + stop-color: #b554ff; +} +.stop-color.magenta { + stop-color: #ffa3ef; +} + diff --git a/src/charts.js b/src/charts.js index 4f46ff5..59d3142 100644 --- a/src/charts.js +++ b/src/charts.js @@ -556,18 +556,6 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart { this.animate_graphs(); - // if(this.y[0].path) { - // this.animate_paths(); - // setTimeout(() => { - // if(!this.updating) this.make_paths(); - // }, 300) - // } - - // this.animate_units(); - // setTimeout(() => { - // if(!this.updating) this.make_new_units(); - // }, 300) - // Trigger animation with the animatable elements in this.elements_to_animate this.run_animation(); @@ -1231,9 +1219,9 @@ frappe.chart.LineChart = class LineChart extends frappe.chart.AxisChart { function set_gradient_stop(grad_elem, offset, color, opacity) { $$.createSVG('stop', { + 'className': 'stop-color ' + color, 'inside': grad_elem, 'offset': offset, - 'stop-color': color, 'stop-opacity': opacity }); } @@ -1393,7 +1381,7 @@ frappe.chart.PercentageChart = class PercentageChart extends frappe.chart.Frappe frappe.chart.HeatMap = class HeatMap extends frappe.chart.FrappeChart { constructor({ - start = new Date(moment().subtract(1, 'year').toDate()), + start = '', domain = '', subdomain = '', data = {}, @@ -1406,11 +1394,13 @@ frappe.chart.HeatMap = class HeatMap extends frappe.chart.FrappeChart { this.domain = domain; this.subdomain = subdomain; - this.start = start; this.data = data; this.discrete_domains = discrete_domains; this.count_label = count_label; + let today = new Date(); + this.start = start || this.add_days(today, 365); + this.legend_colors = ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']; this.translate_x = 0; @@ -1437,6 +1427,10 @@ frappe.chart.HeatMap = class HeatMap extends frappe.chart.FrappeChart { set_width() { this.base_width = (this.no_of_cols) * 12; + + if(this.discrete_domains) { + this.base_width += (12 * 12); + } } setup_components() {