diff --git a/docs/assets/js/index.js b/docs/assets/js/index.js index 697f1b6..16081e4 100755 --- a/docs/assets/js/index.js +++ b/docs/assets/js/index.js @@ -4,12 +4,13 @@ let bar_data = { "color": "orange", "values": [50804, 10000, 20000, 61500, 82936.88, 24010, 4000, 6000, 25840, 50804.82, 116820, 6000], "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], - // "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], + "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"], + } ] } @@ -61,7 +62,7 @@ let more_line_data = { } } -let bar_chart = new FrappeChart ({ +let bar_chart = new frappe.chart.FrappeChart ({ parent: "#charts-1", data: bar_data, type: 'bar', @@ -69,16 +70,32 @@ let bar_chart = new FrappeChart ({ is_navigable: 1 }) -let line_chart = new FrappeChart ({ +let line_chart = new frappe.chart.FrappeChart ({ parent: "#charts-2", data: line_data, type: 'line', - height: 140, - is_navigable: 0 + height: 140 }) bar_chart.parent.addEventListener('data-select', (e) => { line_chart.update_values([more_line_data[e.index]]); }); -console.log("chart", bar_chart); \ No newline at end of file +console.log("chart", bar_chart); + + +// 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]}]); + +// }, 300); +// }, 300); +// }, 300); +// } \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 77c8c40..b0c3a0b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -39,155 +39,10 @@ -
-
-
-
-

Installation

- 
-                npm install frappe-charts
-
- - - - - - - - - - - - - - - -
-
-
-
-

Usage

-
- Include it in your html -
- 
-                <script src="frappe-charts.min.js" />
-
-
Create an svg element
- 
-                <svg id="chart"></svg>
-
-
Initiliaze a new Chart object
- 
-                var tasks = [
-                    {
-                      id: 'Task 1',
-                      name: 'Redesign website',
-                      start: '2016-12-28',
-                      end: '2016-12-31',
-                      progress: 20,
-                      dependencies: 'Task 2, Task 3'
-                    },
-                    ...
-                  ]
-                  var chart = new Chart;
-                
-
-
-
-
-
-

Examples

- - - - - -
- -

View on GitHub

-

License: MIT

-
-
-
-
-
- \ No newline at end of file + diff --git a/src/charts.css b/src/charts.css index b902da1..73e686f 100644 --- a/src/charts.css +++ b/src/charts.css @@ -1,4 +1,7 @@ /* graphs */ +.chart-container { + font-family: Verdana, Geneva, Tahoma, sans-serif; +} .chart-container .graph-focus-margin { margin: 0px 5%; } diff --git a/src/charts.js b/src/charts.js index f56af3d..7305adc 100644 --- a/src/charts.js +++ b/src/charts.js @@ -16,7 +16,9 @@ // Validate all arguments, check passed data format, set defaults -class FrappeChart { +let frappe = {chart:{}}; + +frappe.chart.FrappeChart = class { constructor({ parent = "", height = 240, @@ -33,15 +35,15 @@ class FrappeChart { type = '' }) { - if(Object.getPrototypeOf(this) === FrappeChart.prototype) { + if(Object.getPrototypeOf(this) === frappe.chart.FrappeChart.prototype) { if(type === 'line') { - return new LineGraph(arguments[0]); + return new frappe.chart.LineChart(arguments[0]); } else if(type === 'bar') { - return new BarGraph(arguments[0]); + return new frappe.chart.BarChart(arguments[0]); } else if(type === 'percentage') { - return new PercentageGraph(arguments[0]); + return new frappe.chart.PercentageChart(arguments[0]); } else if(type === 'heatmap') { - return new HeatMap(arguments[0]); + return new frappe.chart.HeatMap(arguments[0]); } } @@ -128,7 +130,7 @@ class FrappeChart { this.chart_wrapper = this.container.querySelector('.frappe-chart'); // this.chart_wrapper.appendChild(); - this.make_chart_area() + this.make_chart_area(); this.make_draw_area(); this.stats_wrapper = this.container.querySelector('.graph-stats-container'); @@ -161,7 +163,7 @@ class FrappeChart { } make_tooltip() { - this.tip = new SvgTip({ + this.tip = new frappe.chart.SvgTip({ parent: this.chart_wrapper, }); this.bind_tooltip(); @@ -196,7 +198,7 @@ class FrappeChart { } else if (e.keyCode == '13') { this.on_enter_key(); } - } + }; } make_overlay() {} @@ -212,7 +214,7 @@ class FrappeChart { // check for length let data_point = { index: index - } + }; let y = this.y[0]; ['svg_units', 'y_tops', 'values'].map(key => { let data_key = key.slice(0, key.length-1); @@ -279,18 +281,13 @@ class FrappeChart { } } -class AxisGraph extends FrappeChart { +frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart { constructor(args) { super(args); this.x = this.data.labels; this.y = this.data.datasets; - this.get_x_label = this.format_lambdas.x_label; - this.get_y_label = this.format_lambdas.y_label; - this.get_x_tooltip = this.format_lambdas.x_tooltip; - this.get_y_tooltip = this.format_lambdas.y_tooltip; - this.colors = ['lightblue', 'purple', 'blue', 'green', 'lightgreen', 'yellow', 'orange', 'red']; } @@ -302,7 +299,7 @@ class AxisGraph extends FrappeChart { setup_x() { this.set_avg_unit_width_and_x_offset(); - this.x_axis_values = this.x.map((d, i) => chart_utils.float_2(this.x_offset + i * this.avg_unit_width)); + this.x_axis_values = this.x.map((d, i) => frappe.chart.utils.float_2(this.x_offset + i * this.avg_unit_width)); } setup_y() { @@ -422,13 +419,14 @@ class AxisGraph extends FrappeChart { draw_graph() { // TODO: Don't animate on refresh let data = []; + this.svg_units_group.textContent = ''; this.y.map((d, i) => { // Anim: Don't draw initial values, store them and update later - d.y_tops = d.values.map(val => this.height); // no value + d.y_tops = new Array(d.values.length).fill(this.height); // no value data.push({values: d.values}); d.svg_units = []; - this.make_new_units(d.y_tops, d.color || this.colors[i], i); + this.make_new_units_for_dataset(d.y_tops, d.color || this.colors[i], i); this.make_path && this.make_path(d, d.color || this.colors[i]); }); @@ -448,9 +446,8 @@ class AxisGraph extends FrappeChart { }, 1000); } - make_new_units(y_values, color, dataset_index) { + make_new_units_for_dataset(y_values, color, dataset_index) { this.y[dataset_index].svg_units = []; - this.svg_units_group.textContent = ''; let d = this.unit_args; y_values.map((y, i) => { @@ -511,7 +508,7 @@ class AxisGraph extends FrappeChart { if(relY < this.height + this.translate_y * 2) { this.map_tooltip_x_position_and_show(relX); } else { - this.tip.hide_tip() + this.tip.hide_tip(); } }); } @@ -548,13 +545,12 @@ class AxisGraph extends FrappeChart { let old_upper_limit = this.upper_limit; this.setup_y(); - if(this.old_upper_limit !== this.upper_limit){ + if(old_upper_limit !== this.upper_limit){ this.make_y_axis(); } let elements_to_animate = []; elements_to_animate = this.animate_for_equilength_data(elements_to_animate); - this.calc_min_tops(); // create new x,y pair string and animate path if(this.y[0].path) { @@ -589,8 +585,8 @@ class AxisGraph extends FrappeChart { } animate_for_equilength_data(elements_to_animate) { - this.y.map((d, i) => { - d.y_tops = d.values.map(val => chart_utils.float_2(this.height - val * this.multiplier)); + this.y.map((d) => { + d.y_tops = d.values.map(val => frappe.chart.utils.float_2(this.height - val * this.multiplier)); d.svg_units.map((unit, j) => { elements_to_animate.push(this.animate[this.unit_args.type]( {unit:unit, array:d.svg_units, index: j}, // unit, with info to replace from data @@ -599,6 +595,7 @@ class AxisGraph extends FrappeChart { )); }); }); + this.calc_min_tops(); return elements_to_animate; } @@ -651,7 +648,7 @@ class AxisGraph extends FrappeChart { calc_all_y_tops() { this.y.map(d => { - d.y_tops = d.values.map( val => chart_utils.float_2(this.height - val * this.multiplier)); + d.y_tops = d.values.map( val => frappe.chart.utils.float_2(this.height - val * this.multiplier)); }); } @@ -667,8 +664,8 @@ class AxisGraph extends FrappeChart { } } -class BarGraph extends AxisGraph { - constructor(args) { +frappe.chart.BarChart = class BarChart extends frappe.chart.AxisChart { + constructor() { super(arguments[0]); this.type = 'bar-graph'; @@ -683,7 +680,6 @@ class BarGraph extends AxisGraph { this.unit_args = { type: 'bar', args: { - // More intelligent width setting space_width: this.avg_unit_width/2, no_of_datasets: this.y.length } @@ -732,10 +728,10 @@ class BarGraph extends AxisGraph { } } -class LineGraph extends AxisGraph { +frappe.chart.LineChart = class LineChart extends frappe.chart.AxisChart { constructor(args) { super(args); - if(Object.getPrototypeOf(this) !== LineGraph.prototype) { + if(Object.getPrototypeOf(this) !== frappe.chart.LineChart.prototype) { return; } @@ -767,7 +763,7 @@ class LineGraph extends AxisGraph { } } -class RegionGraph extends LineGraph { +frappe.chart.RegionChart = class RegionChart extends frappe.chart.LineChart { constructor(args) { super(args); @@ -777,7 +773,7 @@ class RegionGraph extends LineGraph { } } -class PercentageGraph extends FrappeChart { +frappe.chart.PercentageChart = class PercentageChart extends frappe.chart.FrappeChart { constructor(args) { super(args); @@ -884,7 +880,7 @@ class PercentageGraph extends FrappeChart { } } -class HeatMap extends FrappeChart { +frappe.chart.HeatMap = class HeatMap extends frappe.chart.FrappeChart { constructor({ start = new Date(moment().subtract(1, 'year').toDate()), domain = '', @@ -895,6 +891,8 @@ class HeatMap extends FrappeChart { }) { super(arguments[0]); + this.domain = domain; + this.subdomain = subdomain; this.start = start; this.data = data; this.discrete_domains = discrete_domains; @@ -1038,18 +1036,18 @@ class HeatMap extends FrappeChart { } render_month_labels() { - this.first_month_label = 1; + // this.first_month_label = 1; // if (this.first_week_start.getDate() > 8) { // this.first_month_label = 0; // } - this.last_month_label = 1; + // this.last_month_label = 1; - let first_month = this.months.shift(); - let first_month_start = this.month_start_points.shift(); + // let first_month = this.months.shift(); + // let first_month_start = this.month_start_points.shift(); // render first month if - let last_month = this.months.pop(); - let last_month_start = this.month_start_points.pop(); + // let last_month = this.months.pop(); + // let last_month_start = this.month_start_points.pop(); // render last month if this.month_start_points.map((start, i) => { @@ -1163,7 +1161,7 @@ class HeatMap extends FrappeChart { get_month_name() {} } -class SvgTip { +frappe.chart.SvgTip = class { constructor({ parent = null }) { @@ -1221,7 +1219,7 @@ class SvgTip { this.title.innerHTML = title; this.data_point_list.innerHTML = ''; - this.list_values.map((set, i) => { + this.list_values.map((set) => { let li = $$.create('li', { className: `border-top ${set.color || 'black'}`, innerHTML: `${set.value ? set.value : '' } @@ -1274,7 +1272,7 @@ class SvgTip { } } -function map_c3(chart) { +frappe.chart.map_c3 = (chart) => { if (chart.data) { let data = chart.data; let type = chart.chart_type || 'line'; @@ -1307,7 +1305,7 @@ function map_c3(chart) { dirty = true; } } - }) + }); if(dirty) { return; @@ -1333,7 +1331,7 @@ function map_c3(chart) { y.push({ title: 'data' + i, values: row, - }) + }); } }); @@ -1347,20 +1345,20 @@ function map_c3(chart) { } // Helpers -chart_utils = {}; -chart_utils.float_2 = d => parseFloat(d.toFixed(2)); +frappe.chart.utils = {}; +frappe.chart.utils.float_2 = d => parseFloat(d.toFixed(2)); function $$(expr, con) { return typeof expr === "string"? (con || document).querySelector(expr) : expr || null; } -$$.findNodeIndex = (node) => -{ - var i = 0; - while (node = node.previousSibling) { - if (node.nodeType === 1) { ++i } - } - return i; -} +// $$.findNodeIndex = (node) => +// { +// var i = 0; +// while (node = node.previousSibling) { +// if (node.nodeType === 1) { ++i; } +// } +// return i; +// } $$.create = function(tag, o) { var element = document.createElement(tag); @@ -1402,7 +1400,7 @@ $$.createSVG = function(tag, o) { element.appendChild(ref); } else { - if(i === "className") { i = "class"} + if(i === "className") { i = "class"; } if(i === "innerHTML") { element['textContent'] = val; } else { @@ -1416,16 +1414,13 @@ $$.createSVG = function(tag, o) { $$.runSVGAnimation = (svg_container, elements) => { let parent = elements[0][0]['unit'].parentNode; - let grand_parent = svg_container.parentNode; - let parent_clone = parent.cloneNode(true); - let new_parent = parent.cloneNode(true); let new_elements = []; let anim_elements = []; elements.map(element => { let obj = element[0]; - let index = $$.findNodeIndex(obj.unit); + // let index = $$.findNodeIndex(obj.unit); let anim_element, new_element;