@@ -1,5 +1,5 @@ | |||
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'; | |||
export default class AxisChart extends BaseChart { | |||
@@ -19,6 +19,8 @@ export default class AxisChart extends BaseChart { | |||
'yellow', 'light-blue', 'light-green', 'purple', 'magenta']; | |||
this.zero_line = this.height; | |||
this.old_values = {}; | |||
} | |||
setup_values() { | |||
@@ -113,6 +115,7 @@ export default class AxisChart extends BaseChart { | |||
// make VERTICAL lines for x values | |||
make_x_axis(animate=false) { | |||
let char_width = 8; | |||
let start_at, height, text_start_at, axis_line_class = ''; | |||
if(this.x_axis_mode === 'span') { // long spanning lines | |||
start_at = -7; | |||
@@ -137,7 +140,7 @@ export default class AxisChart extends BaseChart { | |||
this.x_axis_group.textContent = ''; | |||
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(this.is_series) { | |||
// Skip some axis lines if X axis is a series | |||
@@ -986,30 +989,6 @@ export default class AxisChart extends BaseChart { | |||
// 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() { | |||
this.draw = { | |||
'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 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', { | |||
className: `bar mini fill ${color}`, | |||
@@ -1046,7 +1025,7 @@ export default class AxisChart extends BaseChart { | |||
'bar': (bar_obj, x, y_top, index) => { | |||
let start = x - this.avg_unit_width/4; | |||
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); | |||
@@ -1,5 +1,6 @@ | |||
import SvgTip from '../objects/SvgTip'; | |||
import $ from '../helpers/dom'; | |||
import { get_string_width } from '../helpers/utils'; | |||
import Chart from '../charts'; | |||
export default class BaseChart { | |||
@@ -122,9 +123,11 @@ export default class BaseChart { | |||
set_width() { | |||
let special_values_width = 0; | |||
let char_width = 8; | |||
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; | |||
@@ -256,11 +259,6 @@ export default class BaseChart { | |||
$.fire(this.parent, "data-select", this.get_data_point()); | |||
} | |||
// Helpers | |||
get_strwidth(string) { | |||
return (string+"").length * 8; | |||
} | |||
// Objects | |||
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) { | |||
if(arr1.length !== arr2.length) return false; | |||
@@ -17,7 +15,7 @@ function limitColor(r){ | |||
return r; | |||
} | |||
export function lightenDarkenColor(col,amt) { | |||
export function lightenDarkenColor(col, amt) { | |||
let usePound = false; | |||
if (col[0] == "#") { | |||
col = col.slice(1); | |||
@@ -43,4 +41,66 @@ export function shuffle(array) { | |||
let j = Math.floor(Math.random() * (i + 1)); | |||
[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 |