[start] decouple utils
This commit is contained in:
parent
42e5670584
commit
fbfdf835f3
@ -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
src/scripts/helpers/animate.js
Normal file
0
src/scripts/helpers/animate.js
Normal file
18
src/scripts/helpers/colors.js
Normal file
18
src/scripts/helpers/colors.js
Normal file
@ -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);
|
||||
}
|
||||
25
src/scripts/helpers/draw.js
Normal file
25
src/scripts/helpers/draw.js
Normal file
@ -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() {}
|
||||
0
src/scripts/helpers/intervals.js
Normal file
0
src/scripts/helpers/intervals.js
Normal file
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user