jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[percentage] barDepth

Browse Source
This commit is contained in:
Prateeksha Singh 2018-04-13 21:51:32 +05:30
parent abe9b617d2
commit cbb69089db
13 changed files with 91 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -124,6 +124,7 @@ const LINE_CHART_DOT_SIZE = 4;
const DOT_OVERLAY_SIZE_INCR = 4;
const PERCENTAGE_BAR_DEFAULT_HEIGHT = 20;
const PERCENTAGE_BAR_DEFAULT_DEPTH = 2;
// Fixed 5-color theme,
// More colors are difficult to parse visually
@ -352,6 +353,52 @@ function equilizeNoOfElements(array1, array2,
return [array1, array2];
}
const PRESET_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'
};
function limitColor(r){
if (r > 255) return 255;
else if (r < 0) return 0;
return r;
}
function lightenDarkenColor(color, amt) {
let col = getColor(color);
let usePound = false;
if (col[0] == "#") {
col = col.slice(1);
usePound = true;
}
let num = parseInt(col,16);
let r = limitColor((num >> 16) + amt);
let b = limitColor(((num >> 8) & 0x00FF) + amt);
let g = limitColor((num & 0x0000FF) + amt);
return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
}
function isValidColor(string) {
// https://stackoverflow.com/a/8027444/6495043
return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(string);
}
const getColor = (color) => {
return PRESET_COLOR_MAP[color] || color;
};
const AXIS_TICK_LENGTH = 6;
const LABEL_MARGIN = 4;
const FONT_SIZE = 10;
@ -476,14 +523,23 @@ function makeGradient(svgDefElem, color, lighter = false) {
return gradientId;
}
function percentageBar(x, y, width, height, fill='none') {
function percentageBar(x, y, width, height,
depth=PERCENTAGE_BAR_DEFAULT_DEPTH, fill='none') {
let args = {
className: 'percentage-bar',
x: x,
y: y,
width: width,
height: height,
fill: fill
fill: fill,
styles: {
'stroke': lightenDarkenColor(fill, -25),
// Diabollically good: https://stackoverflow.com/a/9000859
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
'stroke-dasharray': `0, ${height + width}, ${width}, ${height}`,
'stroke-width': depth
},
};
return createSVG("rect", args);
@ -959,52 +1015,6 @@ let updateOverlay = {
},
};
const PRESET_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'
};
function limitColor(r){
if (r > 255) return 255;
else if (r < 0) return 0;
return r;
}
function lightenDarkenColor(color, amt) {
let col = getColor(color);
let usePound = false;
if (col[0] == "#") {
col = col.slice(1);
usePound = true;
}
let num = parseInt(col,16);
let r = limitColor((num >> 16) + amt);
let b = limitColor(((num >> 8) & 0x00FF) + amt);
let g = limitColor((num & 0x0000FF) + amt);
return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
}
function isValidColor(string) {
// https://stackoverflow.com/a/8027444/6495043
return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(string);
}
const getColor = (color) => {
return PRESET_COLOR_MAP[color] || color;
};
const UNIT_ANIM_DUR = 350;
const PATH_ANIM_DUR = 350;
const MARKER_LINE_ANIM_DUR = UNIT_ANIM_DUR;
@ -1694,7 +1704,7 @@ let componentConfigs = {
return data.xPositions.map((x, i) =>{
let y = 0;
let bar = percentageBar(x, y, data.widths[i],
this.constants.barHeight, data.colors[i]);
this.constants.barHeight, this.constants.barDepth, data.colors[i]);
return bar;
});
},
@ -2023,6 +2033,8 @@ class PercentageChart extends AggregationChart {
this.barOptions = args.barOptions || {};
this.barOptions.height = this.barOptions.height
|| PERCENTAGE_BAR_DEFAULT_HEIGHT;
this.barOptions.depth = this.barOptions.depth
|| PERCENTAGE_BAR_DEFAULT_DEPTH;
this.setup();
}
@ -2034,7 +2046,8 @@ class PercentageChart extends AggregationChart {
[
'percentageBars',
{
barHeight: this.barOptions.height
barHeight: this.barOptions.height,
barDepth: this.barOptions.depth,
},
function() {
return {

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
dist/frappe-charts.min.iife.js.map 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

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

File diff suppressed because one or more lines are too long

2
docs/assets/js/index.min.js.map
View File

File diff suppressed because one or more lines are too long

7
src/js/charts/PercentageChart.js
View File

@ -1,7 +1,7 @@
import AggregationChart from './AggregationChart';
import { $, getOffset } from '../utils/dom';
import { getComponent } from '../objects/ChartComponents';
import { PERCENTAGE_BAR_DEFAULT_HEIGHT } from '../utils/constants';
import { PERCENTAGE_BAR_DEFAULT_HEIGHT, PERCENTAGE_BAR_DEFAULT_DEPTH } from '../utils/constants';
export default class PercentageChart extends AggregationChart {
constructor(parent, args) {
@ -11,6 +11,8 @@ export default class PercentageChart extends AggregationChart {
this.barOptions = args.barOptions || {};
this.barOptions.height = this.barOptions.height
|| PERCENTAGE_BAR_DEFAULT_HEIGHT;
this.barOptions.depth = this.barOptions.depth
|| PERCENTAGE_BAR_DEFAULT_DEPTH;
this.setup();
}
@ -22,7 +24,8 @@ export default class PercentageChart extends AggregationChart {
[
'percentageBars',
{
barHeight: this.barOptions.height
barHeight: this.barOptions.height,
barDepth: this.barOptions.depth,
},
function() {
return {

2
src/js/objects/ChartComponents.js
View File

@ -86,7 +86,7 @@ let componentConfigs = {
return data.xPositions.map((x, i) =>{
let y = 0;
let bar = percentageBar(x, y, data.widths[i],
this.constants.barHeight, data.colors[i]);
this.constants.barHeight, this.constants.barDepth, data.colors[i]);
return bar;
});
},

1
src/js/utils/constants.js
View File

@ -38,6 +38,7 @@ export const LINE_CHART_DOT_SIZE = 4;
export const DOT_OVERLAY_SIZE_INCR = 4;
export const PERCENTAGE_BAR_DEFAULT_HEIGHT = 20;
export const PERCENTAGE_BAR_DEFAULT_DEPTH = 2;
// Fixed 5-color theme,
// More colors are difficult to parse visually

16
src/js/utils/draw.js
View File

@ -1,6 +1,7 @@
import { getBarHeightAndYAttr } from './draw-utils';
import { getStringWidth } from './helpers';
import { DOT_OVERLAY_SIZE_INCR } from './constants';
import { DOT_OVERLAY_SIZE_INCR, PERCENTAGE_BAR_DEFAULT_DEPTH } from './constants';
import { lightenDarkenColor } from './colors';
export const AXIS_TICK_LENGTH = 6;
const LABEL_MARGIN = 4;
@ -132,14 +133,23 @@ export function makeGradient(svgDefElem, color, lighter = false) {
return gradientId;
}
export function percentageBar(x, y, width, height, fill='none') {
export function percentageBar(x, y, width, height,
depth=PERCENTAGE_BAR_DEFAULT_DEPTH, fill='none') {
let args = {
className: 'percentage-bar',
x: x,
y: y,
width: width,
height: height,
fill: fill
fill: fill,
styles: {
'stroke': lightenDarkenColor(fill, -25),
// Diabolically good: https://stackoverflow.com/a/9000859
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
'stroke-dasharray': `0, ${height + width}, ${width}, ${height}`,
'stroke-width': depth
},
};
return createSVG("rect", args);

3
src/scss/charts.scss
View File

@ -8,7 +8,7 @@
.axis, .chart-label {
fill: #555b51;
// temp commented
line {
stroke: #dadada;
}
@ -19,7 +19,6 @@
stroke-width: 2;
}
// temp
path {
fill: none;
stroke-opacity: 1;