@@ -1,5 +1,5 @@ | |||||
import $ from '../helpers/dom'; | import $ from '../helpers/dom'; | ||||
import { float_2, arrays_equal } from '../helpers/utils'; | |||||
import { float_2, arrays_equal, get_string_width, get_bar_height_and_y_attr } from '../helpers/utils'; | |||||
import BaseChart from './BaseChart'; | import BaseChart from './BaseChart'; | ||||
export default class AxisChart extends BaseChart { | export default class AxisChart extends BaseChart { | ||||
@@ -19,6 +19,8 @@ export default class AxisChart extends BaseChart { | |||||
'yellow', 'light-blue', 'light-green', 'purple', 'magenta']; | 'yellow', 'light-blue', 'light-green', 'purple', 'magenta']; | ||||
this.zero_line = this.height; | this.zero_line = this.height; | ||||
this.old_values = {}; | |||||
} | } | ||||
setup_values() { | setup_values() { | ||||
@@ -113,6 +115,7 @@ export default class AxisChart extends BaseChart { | |||||
// make VERTICAL lines for x values | // make VERTICAL lines for x values | ||||
make_x_axis(animate=false) { | make_x_axis(animate=false) { | ||||
let char_width = 8; | |||||
let start_at, height, text_start_at, axis_line_class = ''; | let start_at, height, text_start_at, axis_line_class = ''; | ||||
if(this.x_axis_mode === 'span') { // long spanning lines | if(this.x_axis_mode === 'span') { // long spanning lines | ||||
start_at = -7; | start_at = -7; | ||||
@@ -137,7 +140,7 @@ export default class AxisChart extends BaseChart { | |||||
this.x_axis_group.textContent = ''; | this.x_axis_group.textContent = ''; | ||||
this.x.map((point, i) => { | this.x.map((point, i) => { | ||||
let space_taken = this.get_strwidth(point) + 2; | |||||
let space_taken = get_string_width(point, char_width) + 2; | |||||
if(space_taken > allowed_space) { | if(space_taken > allowed_space) { | ||||
if(this.is_series) { | if(this.is_series) { | ||||
// Skip some axis lines if X axis is a series | // Skip some axis lines if X axis is a series | ||||
@@ -986,30 +989,6 @@ export default class AxisChart extends BaseChart { | |||||
// this.make_tooltip(); | // this.make_tooltip(); | ||||
} | } | ||||
get_bar_height_and_y_attr(y_top) { | |||||
let height, y; | |||||
if (y_top <= this.zero_line) { | |||||
height = this.zero_line - y_top; | |||||
y = y_top; | |||||
// In case of invisible bars | |||||
if(height === 0) { | |||||
height = this.height * 0.01; | |||||
y -= height; | |||||
} | |||||
} else { | |||||
height = y_top - this.zero_line; | |||||
y = this.zero_line; | |||||
// In case of invisible bars | |||||
if(height === 0) { | |||||
height = this.height * 0.01; | |||||
} | |||||
} | |||||
return [height, y]; | |||||
} | |||||
setup_utils() { | setup_utils() { | ||||
this.draw = { | this.draw = { | ||||
'bar': (x, y_top, args, color, index, dataset_index, no_of_datasets) => { | 'bar': (x, y_top, args, color, index, dataset_index, no_of_datasets) => { | ||||
@@ -1019,7 +998,7 @@ export default class AxisChart extends BaseChart { | |||||
let width = total_width / no_of_datasets; | let width = total_width / no_of_datasets; | ||||
let current_x = start_x + width * dataset_index; | let current_x = start_x + width * dataset_index; | ||||
let [height, y] = this.get_bar_height_and_y_attr(y_top); | |||||
let [height, y] = get_bar_height_and_y_attr(y_top, this.zero_line, this.height); | |||||
return $.createSVG('rect', { | return $.createSVG('rect', { | ||||
className: `bar mini fill ${color}`, | className: `bar mini fill ${color}`, | ||||
@@ -1046,7 +1025,7 @@ export default class AxisChart extends BaseChart { | |||||
'bar': (bar_obj, x, y_top, index) => { | 'bar': (bar_obj, x, y_top, index) => { | ||||
let start = x - this.avg_unit_width/4; | let start = x - this.avg_unit_width/4; | ||||
let width = (this.avg_unit_width/2)/this.y.length; | let width = (this.avg_unit_width/2)/this.y.length; | ||||
let [height, y] = this.get_bar_height_and_y_attr(y_top); | |||||
let [height, y] = get_bar_height_and_y_attr(y_top, this.zero_line, this.height); | |||||
x = start + (width * index); | x = start + (width * index); | ||||
@@ -1,5 +1,6 @@ | |||||
import SvgTip from '../objects/SvgTip'; | import SvgTip from '../objects/SvgTip'; | ||||
import $ from '../helpers/dom'; | import $ from '../helpers/dom'; | ||||
import { get_string_width } from '../helpers/utils'; | |||||
import Chart from '../charts'; | import Chart from '../charts'; | ||||
export default class BaseChart { | export default class BaseChart { | ||||
@@ -122,9 +123,11 @@ export default class BaseChart { | |||||
set_width() { | set_width() { | ||||
let special_values_width = 0; | let special_values_width = 0; | ||||
let char_width = 8; | |||||
this.specific_values.map(val => { | this.specific_values.map(val => { | ||||
if(this.get_strwidth(val.title) > special_values_width) { | |||||
special_values_width = this.get_strwidth(val.title) - 40; | |||||
let str_width = get_string_width((val.title + ""), char_width); | |||||
if(str_width > special_values_width) { | |||||
special_values_width = str_width - 40; | |||||
} | } | ||||
}); | }); | ||||
this.base_width = this.parent.offsetWidth - special_values_width; | this.base_width = this.parent.offsetWidth - special_values_width; | ||||
@@ -256,11 +259,6 @@ export default class BaseChart { | |||||
$.fire(this.parent, "data-select", this.get_data_point()); | $.fire(this.parent, "data-select", this.get_data_point()); | ||||
} | } | ||||
// Helpers | |||||
get_strwidth(string) { | |||||
return (string+"").length * 8; | |||||
} | |||||
// Objects | // Objects | ||||
setup_utils() { } | setup_utils() { } | ||||
} | } |
@@ -0,0 +1,18 @@ | |||||
function limit_color(r){ | |||||
if (r > 255) return 255; | |||||
else if (r < 0) return 0; | |||||
return r; | |||||
} | |||||
export function lighten_darken_color(col, amt) { | |||||
let usePound = false; | |||||
if (col[0] == "#") { | |||||
col = col.slice(1); | |||||
usePound = true; | |||||
} | |||||
let num = parseInt(col,16); | |||||
let r = limit_color((num >> 16) + amt); | |||||
let b = limit_color(((num >> 8) & 0x00FF) + amt); | |||||
let g = limit_color((num & 0x0000FF) + amt); | |||||
return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); | |||||
} |
@@ -0,0 +1,25 @@ | |||||
export function float_2(d) { | |||||
return parseFloat(d.toFixed(2)); | |||||
} | |||||
export function make_x_line(height, text_start_at, point, label_class, axis_line_class, x_pos) { | |||||
} | |||||
export function make_y_line() {} | |||||
export function draw_x_line() {} | |||||
export function draw_y_line() {} | |||||
export function label_x_line() {} | |||||
export function label_y_line() {} | |||||
export function get_anim_x_line() {} | |||||
export function get_anim_y_line() {} | |||||
export function draw_rect() {} | |||||
export function draw_circle() {} |
@@ -1,6 +1,4 @@ | |||||
export function float_2(d) { | |||||
return parseFloat(d.toFixed(2)); | |||||
} | |||||
export function arrays_equal(arr1, arr2) { | export function arrays_equal(arr1, arr2) { | ||||
if(arr1.length !== arr2.length) return false; | if(arr1.length !== arr2.length) return false; | ||||
@@ -17,7 +15,7 @@ function limitColor(r){ | |||||
return r; | return r; | ||||
} | } | ||||
export function lightenDarkenColor(col,amt) { | |||||
export function lightenDarkenColor(col, amt) { | |||||
let usePound = false; | let usePound = false; | ||||
if (col[0] == "#") { | if (col[0] == "#") { | ||||
col = col.slice(1); | col = col.slice(1); | ||||
@@ -43,4 +41,66 @@ export function shuffle(array) { | |||||
let j = Math.floor(Math.random() * (i + 1)); | let j = Math.floor(Math.random() * (i + 1)); | ||||
[array[i], array[j]] = [array[j], array[i]]; | [array[i], array[j]] = [array[j], array[i]]; | ||||
} | } | ||||
} | |||||
return array; | |||||
} | |||||
export function get_string_width(string, char_width) { | |||||
return (string+"").length * char_width; | |||||
} | |||||
export function get_bar_height_and_y_attr(y_top, zero_line, total_height) { | |||||
let height, y; | |||||
if (y_top <= zero_line) { | |||||
height = zero_line - y_top; | |||||
y = y_top; | |||||
// In case of invisible bars | |||||
if(height === 0) { | |||||
height = total_height * 0.01; | |||||
y -= height; | |||||
} | |||||
} else { | |||||
height = y_top - zero_line; | |||||
y = zero_line; | |||||
// In case of invisible bars | |||||
if(height === 0) { | |||||
height = total_height * 0.01; | |||||
} | |||||
} | |||||
return [height, y]; | |||||
} | |||||
export function divide_if_more_than_five(number) { | |||||
return (number < 5) ? number : number / 2; | |||||
} | |||||
export function calc_whole_parts(value, divisor) { | |||||
return Math.ceil(value / divisor); | |||||
} | |||||
export function make_even(number) { | |||||
return (number % 2 !== 0) ? ++number : number; | |||||
} | |||||
export function calc_part_size(value) { | |||||
// take care of fractions | |||||
return Math.pow(10, ((value+"").length - 1)); | |||||
} | |||||
export function calc_upper_bound(value) { | |||||
} | |||||
export function calc_intervals(start, interval_size, count) { | |||||
let intervals = []; | |||||
for(var i = 0; i <= count; i++){ | |||||
intervals.push(start); | |||||
start += interval_size; | |||||
} | |||||
return intervals; | |||||
} | |||||
// export function |