jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

use get_color() check while instantiating

Browse Source
This commit is contained in:
pratu16x7 2017-11-18 03:14:47 +05:30
parent caad701ed6
commit 071803a0ec
11 changed files with 94 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
dist/frappe-charts.esm.js vendored
View File

@ -128,52 +128,6 @@ $.fire = (target, type, properties) => {
return target.dispatchEvent(evt); return target.dispatchEvent(evt);
}; };
function limit_color(r){
if (r > 255) return 255;
else if (r < 0) return 0;
return r;
}
function lighten_darken_color(color, amt) {
let col = get_color(color);
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);
}
function is_valid_color(string) {
// https://stackoverflow.com/a/8027444/6495043
return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(string);
}
const color_map = {
'light-blue': '#7cd6fd',
blue: '#5e64ff',
violet: '#743ee2',
red: '#ff5858',
orange: '#ffa00a',
yellow: '#feef72',
green: '#28a745',
'light-green': '#98d85b',
purple: '#b554ff',
magenta: '#ffa3ef',
black: '#36114C',
grey: '#bdd3e6',
'light-grey': '#f0f4f7',
'dark-grey': '#b8c2cc'
};
const get_color = (color) => {
return color_map[color] || color;
};
var UnitRenderer = (function() { var UnitRenderer = (function() {
var UnitRenderer = function(total_height, zero_line, avg_unit_width) { var UnitRenderer = function(total_height, zero_line, avg_unit_width) {
this.total_height = total_height; this.total_height = total_height;
@ -217,7 +171,7 @@ var UnitRenderer = (function() {
return $.createSVG('rect', { return $.createSVG('rect', {
className: `bar mini`, className: `bar mini`,
style: `fill: ${get_color(color)}`, style: `fill: ${color}`,
'data-point-index': index, 'data-point-index': index,
x: current_x, x: current_x,
y: y, y: y,
@ -228,7 +182,7 @@ var UnitRenderer = (function() {
draw_dot: function(x, y, args, color, index) { draw_dot: function(x, y, args, color, index) {
return $.createSVG('circle', { return $.createSVG('circle', {
style: `fill: ${get_color(color)}`, style: `fill: ${color}`,
'data-point-index': index, 'data-point-index': index,
cx: x, cx: x,
cy: y, cy: y,
@ -634,9 +588,11 @@ function get_string_width(string, char_width) {
class SvgTip { class SvgTip {
constructor({ constructor({
parent = null parent = null,
colors = []
}) { }) {
this.parent = parent; this.parent = parent;
this.colors = colors;
this.title_name = ''; this.title_name = '';
this.title_value = ''; this.title_value = '';
this.list_values = []; this.list_values = [];
@ -689,8 +645,8 @@ class SvgTip {
this.title.innerHTML = title; this.title.innerHTML = title;
this.data_point_list.innerHTML = ''; this.data_point_list.innerHTML = '';
this.list_values.map((set) => { this.list_values.map((set, i) => {
const color = set.color ? get_color(set.color) : 'black'; const color = this.colors[i] || 'black';
let li = $.create('li', { let li = $.create('li', {
styles: { styles: {
@ -750,6 +706,52 @@ class SvgTip {
} }
} }
function limit_color(r){
if (r > 255) return 255;
else if (r < 0) return 0;
return r;
}
function lighten_darken_color(color, amt) {
let col = get_color(color);
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);
}
function is_valid_color(string) {
// https://stackoverflow.com/a/8027444/6495043
return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(string);
}
const color_map = {
'light-blue': '#7cd6fd',
blue: '#5e64ff',
violet: '#743ee2',
red: '#ff5858',
orange: '#ffa00a',
yellow: '#feef72',
green: '#28a745',
'light-green': '#98d85b',
purple: '#b554ff',
magenta: '#ffa3ef',
black: '#36114C',
grey: '#bdd3e6',
'light-grey': '#f0f4f7',
'dark-grey': '#b8c2cc'
};
const get_color = (color) => {
return color_map[color] || color;
};
class BaseChart { class BaseChart {
constructor({ constructor({
height = 240, height = 240,
@ -793,6 +795,7 @@ class BaseChart {
this.colors = ['light-blue', 'blue', 'violet', 'red', 'orange', this.colors = ['light-blue', 'blue', 'violet', 'red', 'orange',
'yellow', 'green', 'light-green', 'purple', 'magenta']; 'yellow', 'green', 'light-green', 'purple', 'magenta'];
} }
this.colors = this.colors.map(color => get_color(color));
this.chart_types = ['line', 'scatter', 'bar', 'percentage', 'heatmap', 'pie']; this.chart_types = ['line', 'scatter', 'bar', 'percentage', 'heatmap', 'pie'];
@ -959,6 +962,7 @@ class BaseChart {
make_tooltip() { make_tooltip() {
this.tip = new SvgTip({ this.tip = new SvgTip({
parent: this.chart_wrapper, parent: this.chart_wrapper,
colors: this.colors
}); });
this.bind_tooltip(); this.bind_tooltip();
} }
@ -2034,7 +2038,7 @@ class LineChart extends AxisChart {
d.path = $.createSVG('path', { d.path = $.createSVG('path', {
inside: this.paths_groups[i], inside: this.paths_groups[i],
style: `stroke: ${get_color(color)}`, style: `stroke: ${color}`,
d: "M"+points_str d: "M"+points_str
}); });
@ -2212,7 +2216,7 @@ class PercentageChart extends BaseChart {
className: `progress-bar`, className: `progress-bar`,
inside: this.percentage_bar, inside: this.percentage_bar,
styles: { styles: {
background: get_color(this.colors[i]), background: this.colors[i],
width: total*100/this.grand_total + "%" width: total*100/this.grand_total + "%"
} }
}); });
@ -2247,7 +2251,7 @@ class PercentageChart extends BaseChart {
inside: this.stats_wrapper inside: this.stats_wrapper
}); });
stats.innerHTML = `<span class="indicator"> stats.innerHTML = `<span class="indicator">
<i style="background: ${get_color(this.colors[i])}"></i> <i style="background: ${this.colors[i]}"></i>
<span class="text-muted">${x_values[i]}:</span> <span class="text-muted">${x_values[i]}:</span>
${d} ${d}
</span>`; </span>`;
@ -2348,18 +2352,18 @@ class PieChart extends BaseChart {
} }
const curPath = this.makeArcPath(curStart,curEnd); const curPath = this.makeArcPath(curStart,curEnd);
let slice = $.createSVG('path',{ let slice = $.createSVG('path',{
inside:this.draw_area, inside: this.draw_area,
className:'pie-path', className: 'pie-path',
style:'transition:transform .3s;', style: 'transition:transform .3s;',
d:curPath, d: curPath,
fill:get_color(this.colors[i]) fill: this.colors[i]
}); });
this.slices.push(slice); this.slices.push(slice);
this.slicesProperties.push({ this.slicesProperties.push({
startPosition, startPosition,
endPosition, endPosition,
value:total, value: total,
total:this.grand_total, total: this.grand_total,
startAngle, startAngle,
endAngle, endAngle,
angle:diffAngle angle:diffAngle
@ -2406,7 +2410,7 @@ class PieChart extends BaseChart {
} }
hoverSlice(path,i,flag,e){ hoverSlice(path,i,flag,e){
if(!path) return; if(!path) return;
const color = get_color(this.colors[i]); const color = this.colors[i];
if(flag){ if(flag){
transform(path,this.calTranslateByAngle(this.slicesProperties[i])); transform(path,this.calTranslateByAngle(this.slicesProperties[i]));
path.setAttribute('fill',lighten_darken_color(color,50)); path.setAttribute('fill',lighten_darken_color(color,50));
@ -2451,7 +2455,7 @@ class PieChart extends BaseChart {
let x_values = this.formatted_labels && this.formatted_labels.length > 0 let x_values = this.formatted_labels && this.formatted_labels.length > 0
? this.formatted_labels : this.labels; ? this.formatted_labels : this.labels;
this.legend_totals.map((d, i) => { this.legend_totals.map((d, i) => {
const color = get_color(this.colors[i]); const color = this.colors[i];
if(d) { if(d) {
let stats = $.create('div', { let stats = $.create('div', {

2
dist/frappe-charts.min.cjs.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.esm.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.iife.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/frappe-charts.min.js vendored
View File

File diff suppressed because one or more lines are too long

3
src/scripts/charts/BaseChart.js
View File

@ -1,6 +1,7 @@
import SvgTip from '../objects/SvgTip'; import SvgTip from '../objects/SvgTip';
import $ from '../utils/dom'; import $ from '../utils/dom';
import { get_string_width } from '../utils/helpers'; import { get_string_width } from '../utils/helpers';
import { get_color } from '../utils/colors';
import Chart from '../charts'; import Chart from '../charts';
export default class BaseChart { export default class BaseChart {
@ -46,6 +47,7 @@ export default class BaseChart {
this.colors = ['light-blue', 'blue', 'violet', 'red', 'orange', this.colors = ['light-blue', 'blue', 'violet', 'red', 'orange',
'yellow', 'green', 'light-green', 'purple', 'magenta']; 'yellow', 'green', 'light-green', 'purple', 'magenta'];
} }
this.colors = this.colors.map(color => get_color(color));
this.chart_types = ['line', 'scatter', 'bar', 'percentage', 'heatmap', 'pie']; this.chart_types = ['line', 'scatter', 'bar', 'percentage', 'heatmap', 'pie'];
@ -212,6 +214,7 @@ export default class BaseChart {
make_tooltip() { make_tooltip() {
this.tip = new SvgTip({ this.tip = new SvgTip({
parent: this.chart_wrapper, parent: this.chart_wrapper,
colors: this.colors
}); });
this.bind_tooltip(); this.bind_tooltip();
} }

3
src/scripts/charts/LineChart.js
View File

@ -1,6 +1,5 @@
import AxisChart from './AxisChart'; import AxisChart from './AxisChart';
import $ from '../utils/dom'; import $ from '../utils/dom';
import { get_color } from '../utils/colors';
export default class LineChart extends AxisChart { export default class LineChart extends AxisChart {
constructor(args) { constructor(args) {
@ -71,7 +70,7 @@ export default class LineChart extends AxisChart {
d.path = $.createSVG('path', { d.path = $.createSVG('path', {
inside: this.paths_groups[i], inside: this.paths_groups[i],
style: `stroke: ${get_color(color)}`, style: `stroke: ${color}`,
d: "M"+points_str d: "M"+points_str
}); });

5
src/scripts/charts/PercentageChart.js
View File

@ -1,6 +1,5 @@
import BaseChart from './BaseChart'; import BaseChart from './BaseChart';
import $ from '../utils/dom'; import $ from '../utils/dom';
import { get_color } from '../utils/colors';
export default class PercentageChart extends BaseChart { export default class PercentageChart extends BaseChart {
constructor(args) { constructor(args) {
@ -84,7 +83,7 @@ export default class PercentageChart extends BaseChart {
className: `progress-bar`, className: `progress-bar`,
inside: this.percentage_bar, inside: this.percentage_bar,
styles: { styles: {
background: get_color(this.colors[i]), background: this.colors[i],
width: total*100/this.grand_total + "%" width: total*100/this.grand_total + "%"
} }
}); });
@ -119,7 +118,7 @@ export default class PercentageChart extends BaseChart {
inside: this.stats_wrapper inside: this.stats_wrapper
}); });
stats.innerHTML = `<span class="indicator"> stats.innerHTML = `<span class="indicator">
<i style="background: ${get_color(this.colors[i])}"></i> <i style="background: ${this.colors[i]}"></i>
<span class="text-muted">${x_values[i]}:</span> <span class="text-muted">${x_values[i]}:</span>
${d} ${d}
</span>`; </span>`;

20
src/scripts/charts/PieChart.js
View File

@ -1,6 +1,6 @@
import BaseChart from './BaseChart'; import BaseChart from './BaseChart';
import $ from '../utils/dom'; import $ from '../utils/dom';
import { get_color, lighten_darken_color } from '../utils/colors'; import { lighten_darken_color } from '../utils/colors';
import { runSVGAnimation, transform } from '../utils/animate'; import { runSVGAnimation, transform } from '../utils/animate';
const ANGLE_RATIO = Math.PI / 180; const ANGLE_RATIO = Math.PI / 180;
const FULL_ANGLE = 360; const FULL_ANGLE = 360;
@ -94,18 +94,18 @@ export default class PieChart extends BaseChart {
} }
const curPath = this.makeArcPath(curStart,curEnd); const curPath = this.makeArcPath(curStart,curEnd);
let slice = $.createSVG('path',{ let slice = $.createSVG('path',{
inside:this.draw_area, inside: this.draw_area,
className:'pie-path', className: 'pie-path',
style:'transition:transform .3s;', style: 'transition:transform .3s;',
d:curPath, d: curPath,
fill:get_color(this.colors[i]) fill: this.colors[i]
}); });
this.slices.push(slice); this.slices.push(slice);
this.slicesProperties.push({ this.slicesProperties.push({
startPosition, startPosition,
endPosition, endPosition,
value:total, value: total,
total:this.grand_total, total: this.grand_total,
startAngle, startAngle,
endAngle, endAngle,
angle:diffAngle angle:diffAngle
@ -152,7 +152,7 @@ export default class PieChart extends BaseChart {
} }
hoverSlice(path,i,flag,e){ hoverSlice(path,i,flag,e){
if(!path) return; if(!path) return;
const color = get_color(this.colors[i]); const color = this.colors[i];
if(flag){ if(flag){
transform(path,this.calTranslateByAngle(this.slicesProperties[i])); transform(path,this.calTranslateByAngle(this.slicesProperties[i]));
path.setAttribute('fill',lighten_darken_color(color,50)); path.setAttribute('fill',lighten_darken_color(color,50));
@ -197,7 +197,7 @@ export default class PieChart extends BaseChart {
let x_values = this.formatted_labels && this.formatted_labels.length > 0 let x_values = this.formatted_labels && this.formatted_labels.length > 0
? this.formatted_labels : this.labels; ? this.formatted_labels : this.labels;
this.legend_totals.map((d, i) => { this.legend_totals.map((d, i) => {
const color = get_color(this.colors[i]); const color = this.colors[i];
if(d) { if(d) {
let stats = $.create('div', { let stats = $.create('div', {

9
src/scripts/objects/SvgTip.js
View File

@ -1,11 +1,12 @@
import $ from '../utils/dom'; import $ from '../utils/dom';
import { get_color } from '../utils/colors';
export default class SvgTip { export default class SvgTip {
constructor({ constructor({
parent = null parent = null,
colors = []
}) { }) {
this.parent = parent; this.parent = parent;
this.colors = colors;
this.title_name = ''; this.title_name = '';
this.title_value = ''; this.title_value = '';
this.list_values = []; this.list_values = [];
@ -58,8 +59,8 @@ export default class SvgTip {
this.title.innerHTML = title; this.title.innerHTML = title;
this.data_point_list.innerHTML = ''; this.data_point_list.innerHTML = '';
this.list_values.map((set) => { this.list_values.map((set, i) => {
const color = set.color ? get_color(set.color) : 'black'; const color = this.colors[i] || 'black';
let li = $.create('li', { let li = $.create('li', {
styles: { styles: {

5
src/scripts/utils/draw.js
View File

@ -1,5 +1,4 @@
import $ from './dom'; import $ from './dom';
import { get_color } from './colors';
export var UnitRenderer = (function() { export var UnitRenderer = (function() {
var UnitRenderer = function(total_height, zero_line, avg_unit_width) { var UnitRenderer = function(total_height, zero_line, avg_unit_width) {
@ -44,7 +43,7 @@ export var UnitRenderer = (function() {
return $.createSVG('rect', { return $.createSVG('rect', {
className: `bar mini`, className: `bar mini`,
style: `fill: ${get_color(color)}`, style: `fill: ${color}`,
'data-point-index': index, 'data-point-index': index,
x: current_x, x: current_x,
y: y, y: y,
@ -55,7 +54,7 @@ export var UnitRenderer = (function() {
draw_dot: function(x, y, args, color, index) { draw_dot: function(x, y, args, color, index) {
return $.createSVG('circle', { return $.createSVG('circle', {
style: `fill: ${get_color(color)}`, style: `fill: ${color}`,
'data-point-index': index, 'data-point-index': index,
cx: x, cx: x,
cy: y, cy: y,