From fbfdf835f3fb6067afeac620912859e82d3efa6c Mon Sep 17 00:00:00 2001 From: pratu16x7 Date: Sun, 5 Nov 2017 21:23:08 +0530 Subject: [PATCH] [start] decouple utils --- src/scripts/charts/AxisChart.js | 35 ++++------------ src/scripts/charts/BaseChart.js | 12 +++--- src/scripts/helpers/animate.js | 0 src/scripts/helpers/colors.js | 18 ++++++++ src/scripts/helpers/draw.js | 25 ++++++++++++ src/scripts/helpers/intervals.js | 0 src/scripts/helpers/utils.js | 70 +++++++++++++++++++++++++++++--- 7 files changed, 120 insertions(+), 40 deletions(-) create mode 100644 src/scripts/helpers/animate.js create mode 100644 src/scripts/helpers/colors.js create mode 100644 src/scripts/helpers/draw.js create mode 100644 src/scripts/helpers/intervals.js diff --git a/src/scripts/charts/AxisChart.js b/src/scripts/charts/AxisChart.js index 3f16c38..9f073d5 100644 --- a/src/scripts/charts/AxisChart.js +++ b/src/scripts/charts/AxisChart.js @@ -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); diff --git a/src/scripts/charts/BaseChart.js b/src/scripts/charts/BaseChart.js index 77c2535..85efb3d 100644 --- a/src/scripts/charts/BaseChart.js +++ b/src/scripts/charts/BaseChart.js @@ -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() { } } diff --git a/src/scripts/helpers/animate.js b/src/scripts/helpers/animate.js new file mode 100644 index 0000000..e69de29 diff --git a/src/scripts/helpers/colors.js b/src/scripts/helpers/colors.js new file mode 100644 index 0000000..fc4ae36 --- /dev/null +++ b/src/scripts/helpers/colors.js @@ -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); +} \ No newline at end of file diff --git a/src/scripts/helpers/draw.js b/src/scripts/helpers/draw.js new file mode 100644 index 0000000..03c3a29 --- /dev/null +++ b/src/scripts/helpers/draw.js @@ -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() {} \ No newline at end of file diff --git a/src/scripts/helpers/intervals.js b/src/scripts/helpers/intervals.js new file mode 100644 index 0000000..e69de29 diff --git a/src/scripts/helpers/utils.js b/src/scripts/helpers/utils.js index d9064a6..b9ed175 100644 --- a/src/scripts/helpers/utils.js +++ b/src/scripts/helpers/utils.js @@ -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]]; } -} \ No newline at end of file + + 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