jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

axes working

Browse Source
This commit is contained in:
pratu16x7 2017-11-28 12:24:32 +05:30
parent 4fc2cd6051
commit c7f753ea12
12 changed files with 221 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -148,6 +148,40 @@ function getStringWidth(string, charWidth) {
return (string+"").length * charWidth; return (string+"").length * charWidth;
} }
const MIN_BAR_PERCENT_HEIGHT = 0.01;
function getXLineProps(totalHeight, mode) {
let startAt = totalHeight + 6, height, textStartAt, axisLineClass = '';
if(mode === 'span') { // long spanning lines
startAt = -7;
height = totalHeight + 15;
textStartAt = totalHeight + 25;
} else if(mode === 'tick'){ // short label lines
startAt = totalHeight;
height = 6;
textStartAt = 9;
axisLineClass = 'x-axis-label';
}
return [startAt, height, textStartAt, axisLineClass];
}
function getYLineProps(totalWidth, mode, specific=false) {
if(specific) {
return[totalWidth, totalWidth + 5, 'specific-value', 0];
}
let width, text_end_at = -9, axisLineClass = '', startAt = 0;
if(mode === 'span') { // long spanning lines
width = totalWidth + 6;
startAt = -6;
} else if(mode === 'tick'){ // short label lines
width = -6;
axisLineClass = 'y-axis-label';
}
return [width, text_end_at, axisLineClass, startAt];
}
function getBarHeightAndYAttr(yTop, zeroLine, totalHeight) { function getBarHeightAndYAttr(yTop, zeroLine, totalHeight) {
let height, y; let height, y;
if (yTop <= zeroLine) { if (yTop <= zeroLine) {
@ -156,7 +190,7 @@ function getBarHeightAndYAttr(yTop, zeroLine, totalHeight) {
// In case of invisible bars // In case of invisible bars
if(height === 0) { if(height === 0) {
height = totalHeight * 0.01; height = totalHeight * MIN_BAR_PERCENT_HEIGHT;
y -= height; y -= height;
} }
} else { } else {
@ -165,7 +199,7 @@ function getBarHeightAndYAttr(yTop, zeroLine, totalHeight) {
// In case of invisible bars // In case of invisible bars
if(height === 0) { if(height === 0) {
height = totalHeight * 0.01; height = totalHeight * MIN_BAR_PERCENT_HEIGHT;
} }
} }
@ -183,38 +217,7 @@ function equilizeNoOfElements(array1, array2,
return [array1, array2]; return [array1, array2];
} }
function getXLineProps(total_height, mode) { const X_AXIS_LINE_CLASS = 'x-value-text';
let start_at, height, text_start_at, axis_line_class = '';
if(mode === 'span') { // long spanning lines
start_at = -7;
height = total_height + 15;
text_start_at = total_height + 25;
} else if(mode === 'tick'){ // short label lines
start_at = total_height;
height = 6;
text_start_at = 9;
axis_line_class = 'x-axis-label';
}
return [start_at, height, text_start_at, axis_line_class];
}
function getYLineProps(total_width, mode, specific=false) {
if(specific) {
return[total_width, total_width + 5, 'specific-value', 0];
}
let width, text_end_at = -9, axis_line_class = '', start_at = 0;
if(mode === 'span') { // long spanning lines
width = total_width + 6;
start_at = -6;
} else if(mode === 'tick'){ // short label lines
width = -6;
axis_line_class = 'y-axis-label';
}
return [width, text_end_at, axis_line_class, start_at];
}
function $$2(expr, con) { function $$2(expr, con) {
return typeof expr === "string"? (con || document).querySelector(expr) : expr || null; return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
} }
@ -348,11 +351,11 @@ function makeText(className, x, y, content) {
}); });
} }
function makeXLine(height, textStartAt, point, labelClass, axisLineClass, xPos) { function makeXLine(xPos, startAt, height, textStartAt, point, labelClass, axisLineClass) {
let line = createSVG('line', { let line = createSVG('line', {
x1: 0, x1: 0,
x2: 0, x2: 0,
y1: 0, y1: startAt,
y2: height y2: height
}); });
@ -365,7 +368,7 @@ function makeXLine(height, textStartAt, point, labelClass, axisLineClass, xPos)
}); });
let xLine = createSVG('g', { let xLine = createSVG('g', {
className: `tick ${axisLineClass}`, className: `tick ${X_AXIS_LINE_CLASS}`,
transform: `translate(${ xPos }, 0)` transform: `translate(${ xPos }, 0)`
}); });
@ -1125,7 +1128,7 @@ class BaseChart {
this.bindWindowEvents(); this.bindWindowEvents();
this.setupConstants(); this.setupConstants();
this.setupEmptyValues(); // this.setupEmptyValues();
// this.setupComponents(); // this.setupComponents();
this.makeContainer(); this.makeContainer();
@ -1137,7 +1140,8 @@ class BaseChart {
// (everything, layers, groups, units) // (everything, layers, groups, units)
this.setWidth(); this.setWidth();
// dependent on width >.<, how can this be decoupled // these both dependent on width >.<, how can this be decoupled
this.setupEmptyValues();
this.setupComponents(); this.setupComponents();
this.makeChartArea(); this.makeChartArea();
@ -1377,15 +1381,18 @@ class AxisChart extends BaseChart {
make: self.makeYLines, make: self.makeYLines,
makeArgs: [self.yAxisPositions, self.yAxisLabels, makeArgs: [self.yAxisPositions, self.yAxisLabels,
self.width, self.y_axis_mode], self.width, self.y_axis_mode],
store: [], //this.yAxisLines store: [],
animate: self.animateYLines animate: self.animateYLines,
// indexed: 1
}; };
this.xAxis = { this.xAxis = {
layerClass: 'x axis', layerClass: 'x axis',
layer: undefined, layer: undefined,
make: self.makeXLines, make: self.makeXLines,
makeArgs: [self.xPositions, self.xAxisLabels], // Need avg_unit_width here
store: [], //this.xAxisLines makeArgs: [self.xPositions, self.xAxisLabels,
self.height, self.x_axis_mode, 200, self.is_series],
store: [],
animate: self.animateXLines animate: self.animateXLines
}; };
this.yMarkerLines = { this.yMarkerLines = {
@ -1420,7 +1427,7 @@ class AxisChart extends BaseChart {
this.components = [ this.components = [
this.yAxis, this.yAxis,
// this.xAxis, this.xAxis,
// this.yMarkerLines, // this.yMarkerLines,
// this.xMarkerLines, // this.xMarkerLines,
// this.dataUnits, // this.dataUnits,
@ -1536,21 +1543,18 @@ class AxisChart extends BaseChart {
// // this.make_y_specifics(this.yAnnotationPositions, this.specific_values); // // this.make_y_specifics(this.yAnnotationPositions, this.specific_values);
// } // }
makeXLines(positions, values) { makeXLines(positions, values, total_height, mode, avg_unit_width, is_series) {
let [start_at, height, text_start_at, let [startAt, height, text_start_at,
axis_line_class] = getXLineProps(this.height, this.x_axis_mode); axis_line_class] = getXLineProps(total_height, mode);
this.x_axis_group.setAttribute('transform', `translate(0,${start_at})`);
let char_width = 8; let char_width = 8;
let allowed_space = this.avg_unit_width * 1.5; let allowed_space = avg_unit_width * 1.5;
let allowed_letters = allowed_space / 8; let allowed_letters = allowed_space / 8;
this.xAxisLines = []; return values.map((value, i) => {
this.x_axis_group.textContent = '';
values.map((value, i) => {
let space_taken = getStringWidth(value, char_width) + 2; let space_taken = getStringWidth(value, char_width) + 2;
if(space_taken > allowed_space) { if(space_taken > allowed_space) {
if(this.is_series) { if(is_series) {
// Skip some axis lines if X axis is a series // Skip some axis lines if X axis is a series
let skips = 1; let skips = 1;
while((space_taken/skips)*2 > allowed_space) { while((space_taken/skips)*2 > allowed_space) {
@ -1564,47 +1568,21 @@ class AxisChart extends BaseChart {
} }
} }
let xLine = makeXLine( return makeXLine(
positions[i],
startAt,
height, height,
text_start_at, text_start_at,
value, value,
'x-value-text', 'x-value-text',
axis_line_class, axis_line_class
positions[i]
); );
this.xAxisLines.push(xLine);
this.x_axis_group.appendChild(xLine);
}); });
} }
// makeYLines(positions, values) {
// let [width, text_end_at, axis_line_class,
// start_at] = getYLineProps(this.width, this.y_axis_mode);
// this.yAxisLines = [];
// this.y_axis_group.textContent = '';
// values.map((value, i) => {
// let yLine = makeYLine(
// start_at,
// width,
// text_end_at,
// value,
// 'y-value-text',
// axis_line_class,
// positions[i],
// (value === 0 && i !== 0) // Non-first Zero line
// );
// this.yAxisLines.push(yLine);
// this.y_axis_group.appendChild(yLine);
// });
// }
makeYLines(positions, values, totalWidth, mode) { makeYLines(positions, values, totalWidth, mode) {
let [width, text_end_at, axis_line_class, let [width, text_end_at, axis_line_class,
start_at] = getYLineProps(totalWidth, mode); start_at] = getYLineProps(totalWidth, mode);
// this.yAxisLines = [];
// this.y_axis_group.textContent = '';
return values.map((value, i) => { return values.map((value, i) => {
return makeYLine( return makeYLine(
start_at, start_at,
@ -1616,8 +1594,6 @@ class AxisChart extends BaseChart {
positions[i], positions[i],
(value === 0 && i !== 0) // Non-first Zero line (value === 0 && i !== 0) // Non-first Zero line
); );
// this.yAxisLines.push(yLine);
// this.y_axis_group.appendChild(yLine);
}); });
} }
@ -1986,27 +1962,27 @@ class BarChart extends AxisChart {
}; };
} }
make_overlay() { // make_overlay() {
// Just make one out of the first element // // Just make one out of the first element
let index = this.xAxisLabels.length - 1; // let index = this.xAxisLabels.length - 1;
let unit = this.y[0].svg_units[index]; // let unit = this.y[0].svg_units[index];
this.updateCurrentDataPoint(index); // this.updateCurrentDataPoint(index);
if(this.overlay) { // if(this.overlay) {
this.overlay.parentNode.removeChild(this.overlay); // this.overlay.parentNode.removeChild(this.overlay);
} // }
this.overlay = unit.cloneNode(); // this.overlay = unit.cloneNode();
this.overlay.style.fill = '#000000'; // this.overlay.style.fill = '#000000';
this.overlay.style.opacity = '0.4'; // this.overlay.style.opacity = '0.4';
this.drawArea.appendChild(this.overlay); // this.drawArea.appendChild(this.overlay);
} // }
bind_overlay() { // bind_overlay() {
// on event, update overlay // // on event, update overlay
this.parent.addEventListener('data-select', (e) => { // this.parent.addEventListener('data-select', (e) => {
this.update_overlay(e.svg_unit); // this.update_overlay(e.svg_unit);
}); // });
} // }
bind_units(units_array) { bind_units(units_array) {
units_array.map(unit => { units_array.map(unit => {
@ -2537,7 +2513,7 @@ class Heatmap extends BaseChart {
this.distribution_size = 5; this.distribution_size = 5;
this.translate_x = 0; this.translate_x = 0;
this.setup(); // this.setup();
} }
validate_colors(colors) { validate_colors(colors) {
@ -2762,6 +2738,14 @@ class Heatmap extends BaseChart {
} }
} }
// if ("development" !== 'production') {
// // Enable LiveReload
// document.write(
// '<script src="http://' + (location.host || 'localhost').split(':')[0] +
// ':35729/livereload.js?snipver=1"></' + 'script>'
// );
// }
const chartTypes = { const chartTypes = {
line: LineChart, line: LineChart,
bar: BarChart, bar: BarChart,

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

91
rollup.config.js
View File

@ -18,14 +18,15 @@ export default [
input: 'src/js/charts.js', input: 'src/js/charts.js',
output: [ output: [
{ {
file: pkg.main, file: 'docs/assets/js/frappe-charts.min.js',
format: 'cjs', format: 'iife',
}, },
{ {
file: pkg.module, file: pkg.browser,
format: 'es', format: 'iife',
} }
], ],
name: 'Chart',
plugins: [ plugins: [
postcss({ postcss({
preprocessor: (content, id) => new Promise((resolve, reject) => { preprocessor: (content, id) => new Promise((resolve, reject) => {
@ -33,7 +34,6 @@ export default [
resolve({ code: result.css.toString() }) resolve({ code: result.css.toString() })
}), }),
extensions: [ '.scss' ], extensions: [ '.scss' ],
// extract: 'dist/frappe-charts.min.css',
plugins: [ plugins: [
nested(), nested(),
cssnext({ warnForDuplicates: false }), cssnext({ warnForDuplicates: false }),
@ -55,6 +55,46 @@ export default [
uglify() uglify()
] ]
}, },
{
input: 'src/js/charts.js',
output: [
{
file: pkg.main,
format: 'cjs',
},
{
file: pkg.module,
format: 'es',
}
],
plugins: [
postcss({
preprocessor: (content, id) => new Promise((resolve, reject) => {
const result = sass.renderSync({ file: id })
resolve({ code: result.css.toString() })
}),
extensions: [ '.scss' ],
plugins: [
nested(),
cssnext({ warnForDuplicates: false }),
cssnano()
]
}),
eslint({
exclude: [
'src/scss/**',
]
}),
babel({
exclude: 'node_modules/**',
}),
replace({
exclude: 'node_modules/**',
ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
}),
uglify()
],
},
{ {
input: 'src/js/charts.js', input: 'src/js/charts.js',
output: [ output: [
@ -87,46 +127,5 @@ export default [
ENV: JSON.stringify(process.env.NODE_ENV || 'development'), ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
}) })
], ],
},
{
input: 'src/js/charts.js',
output: [
{
file: 'docs/assets/js/frappe-charts.min.js',
format: 'iife',
},
{
file: pkg.browser,
format: 'iife',
}
],
name: 'Chart',
plugins: [
postcss({
preprocessor: (content, id) => new Promise((resolve, reject) => {
const result = sass.renderSync({ file: id })
resolve({ code: result.css.toString() })
}),
extensions: [ '.scss' ],
plugins: [
nested(),
cssnext({ warnForDuplicates: false }),
cssnano()
]
}),
eslint({
exclude: [
'src/scss/**',
]
}),
babel({
exclude: 'node_modules/**',
}),
replace({
exclude: 'node_modules/**',
ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
}),
uglify()
],
} }
]; ];

64
src/js/charts/AxisChart.js
View File

@ -42,15 +42,18 @@ export default class AxisChart extends BaseChart {
make: self.makeYLines, make: self.makeYLines,
makeArgs: [self.yAxisPositions, self.yAxisLabels, makeArgs: [self.yAxisPositions, self.yAxisLabels,
self.width, self.y_axis_mode], self.width, self.y_axis_mode],
store: [], //this.yAxisLines store: [],
animate: self.animateYLines animate: self.animateYLines,
// indexed: 1
}; };
this.xAxis = { this.xAxis = {
layerClass: 'x axis', layerClass: 'x axis',
layer: undefined, layer: undefined,
make: self.makeXLines, make: self.makeXLines,
makeArgs: [self.xPositions, self.xAxisLabels], // Need avg_unit_width here
store: [], //this.xAxisLines makeArgs: [self.xPositions, self.xAxisLabels,
self.height, self.x_axis_mode, 200, self.is_series],
store: [],
animate: self.animateXLines animate: self.animateXLines
}; };
this.yMarkerLines = { this.yMarkerLines = {
@ -85,7 +88,7 @@ export default class AxisChart extends BaseChart {
this.components = [ this.components = [
this.yAxis, this.yAxis,
// this.xAxis, this.xAxis,
// this.yMarkerLines, // this.yMarkerLines,
// this.xMarkerLines, // this.xMarkerLines,
// this.dataUnits, // this.dataUnits,
@ -201,21 +204,18 @@ export default class AxisChart extends BaseChart {
// // this.make_y_specifics(this.yAnnotationPositions, this.specific_values); // // this.make_y_specifics(this.yAnnotationPositions, this.specific_values);
// } // }
makeXLines(positions, values) { makeXLines(positions, values, total_height, mode, avg_unit_width, is_series) {
let [start_at, height, text_start_at, let [startAt, height, text_start_at,
axis_line_class] = getXLineProps(this.height, this.x_axis_mode); axis_line_class] = getXLineProps(total_height, mode);
this.x_axis_group.setAttribute('transform', `translate(0,${start_at})`);
let char_width = 8; let char_width = 8;
let allowed_space = this.avg_unit_width * 1.5; let allowed_space = avg_unit_width * 1.5;
let allowed_letters = allowed_space / 8; let allowed_letters = allowed_space / 8;
this.xAxisLines = []; return values.map((value, i) => {
this.x_axis_group.textContent = '';
values.map((value, i) => {
let space_taken = getStringWidth(value, char_width) + 2; let space_taken = getStringWidth(value, char_width) + 2;
if(space_taken > allowed_space) { if(space_taken > allowed_space) {
if(this.is_series) { if(is_series) {
// Skip some axis lines if X axis is a series // Skip some axis lines if X axis is a series
let skips = 1; let skips = 1;
while((space_taken/skips)*2 > allowed_space) { while((space_taken/skips)*2 > allowed_space) {
@ -229,47 +229,21 @@ export default class AxisChart extends BaseChart {
} }
} }
let xLine = makeXLine( return makeXLine(
positions[i],
startAt,
height, height,
text_start_at, text_start_at,
value, value,
'x-value-text', 'x-value-text',
axis_line_class, axis_line_class
positions[i]
); );
this.xAxisLines.push(xLine);
this.x_axis_group.appendChild(xLine);
}); });
} }
// makeYLines(positions, values) {
// let [width, text_end_at, axis_line_class,
// start_at] = getYLineProps(this.width, this.y_axis_mode);
// this.yAxisLines = [];
// this.y_axis_group.textContent = '';
// values.map((value, i) => {
// let yLine = makeYLine(
// start_at,
// width,
// text_end_at,
// value,
// 'y-value-text',
// axis_line_class,
// positions[i],
// (value === 0 && i !== 0) // Non-first Zero line
// );
// this.yAxisLines.push(yLine);
// this.y_axis_group.appendChild(yLine);
// });
// }
makeYLines(positions, values, totalWidth, mode) { makeYLines(positions, values, totalWidth, mode) {
let [width, text_end_at, axis_line_class, let [width, text_end_at, axis_line_class,
start_at] = getYLineProps(totalWidth, mode); start_at] = getYLineProps(totalWidth, mode);
// this.yAxisLines = [];
// this.y_axis_group.textContent = '';
return values.map((value, i) => { return values.map((value, i) => {
return makeYLine( return makeYLine(
start_at, start_at,
@ -281,8 +255,6 @@ export default class AxisChart extends BaseChart {
positions[i], positions[i],
(value === 0 && i !== 0) // Non-first Zero line (value === 0 && i !== 0) // Non-first Zero line
); );
// this.yAxisLines.push(yLine);
// this.y_axis_group.appendChild(yLine);
}); });
} }

38
src/js/charts/BarChart.js
View File

@ -21,27 +21,27 @@ export default class BarChart extends AxisChart {
}; };
} }
make_overlay() { // make_overlay() {
// Just make one out of the first element // // Just make one out of the first element
let index = this.xAxisLabels.length - 1; // let index = this.xAxisLabels.length - 1;
let unit = this.y[0].svg_units[index]; // let unit = this.y[0].svg_units[index];
this.updateCurrentDataPoint(index); // this.updateCurrentDataPoint(index);
if(this.overlay) { // if(this.overlay) {
this.overlay.parentNode.removeChild(this.overlay); // this.overlay.parentNode.removeChild(this.overlay);
} // }
this.overlay = unit.cloneNode(); // this.overlay = unit.cloneNode();
this.overlay.style.fill = '#000000'; // this.overlay.style.fill = '#000000';
this.overlay.style.opacity = '0.4'; // this.overlay.style.opacity = '0.4';
this.drawArea.appendChild(this.overlay); // this.drawArea.appendChild(this.overlay);
} // }
bind_overlay() { // bind_overlay() {
// on event, update overlay // // on event, update overlay
this.parent.addEventListener('data-select', (e) => { // this.parent.addEventListener('data-select', (e) => {
this.update_overlay(e.svg_unit); // this.update_overlay(e.svg_unit);
}); // });
} // }
bind_units(units_array) { bind_units(units_array) {
units_array.map(unit => { units_array.map(unit => {

5
src/js/charts/BaseChart.js
View File

@ -117,7 +117,7 @@ export default class BaseChart {
this.bindWindowEvents(); this.bindWindowEvents();
this.setupConstants(); this.setupConstants();
this.setupEmptyValues(); // this.setupEmptyValues();
// this.setupComponents(); // this.setupComponents();
this.makeContainer(); this.makeContainer();
@ -129,7 +129,8 @@ export default class BaseChart {
// (everything, layers, groups, units) // (everything, layers, groups, units)
this.setWidth(); this.setWidth();
// dependent on width >.<, how can this be decoupled // these both dependent on width >.<, how can this be decoupled
this.setupEmptyValues();
this.setupComponents(); this.setupComponents();
this.makeChartArea(); this.makeChartArea();

2
src/js/charts/Heatmap.js
View File

@ -37,7 +37,7 @@ export default class Heatmap extends BaseChart {
this.distribution_size = 5; this.distribution_size = 5;
this.translate_x = 0; this.translate_x = 0;
this.setup(); // this.setup();
} }
validate_colors(colors) { validate_colors(colors) {

71
src/js/utils/draw-utils.js
View File

@ -1,5 +1,40 @@
import { fillArray } from '../utils/helpers'; import { fillArray } from '../utils/helpers';
const AXIS_TICK_LENGTH = 6;
const MIN_BAR_PERCENT_HEIGHT = 0.01;
export function getXLineProps(totalHeight, mode) {
let startAt = totalHeight + 6, height, textStartAt, axisLineClass = '';
if(mode === 'span') { // long spanning lines
startAt = -7;
height = totalHeight + 15;
textStartAt = totalHeight + 25;
} else if(mode === 'tick'){ // short label lines
startAt = totalHeight;
height = 6;
textStartAt = 9;
axisLineClass = 'x-axis-label';
}
return [startAt, height, textStartAt, axisLineClass];
}
export function getYLineProps(totalWidth, mode, specific=false) {
if(specific) {
return[totalWidth, totalWidth + 5, 'specific-value', 0];
}
let width, text_end_at = -9, axisLineClass = '', startAt = 0;
if(mode === 'span') { // long spanning lines
width = totalWidth + 6;
startAt = -6;
} else if(mode === 'tick'){ // short label lines
width = -6;
axisLineClass = 'y-axis-label';
}
return [width, text_end_at, axisLineClass, startAt];
}
export function getBarHeightAndYAttr(yTop, zeroLine, totalHeight) { export function getBarHeightAndYAttr(yTop, zeroLine, totalHeight) {
let height, y; let height, y;
if (yTop <= zeroLine) { if (yTop <= zeroLine) {
@ -8,7 +43,7 @@ export function getBarHeightAndYAttr(yTop, zeroLine, totalHeight) {
// In case of invisible bars // In case of invisible bars
if(height === 0) { if(height === 0) {
height = totalHeight * 0.01; height = totalHeight * MIN_BAR_PERCENT_HEIGHT;
y -= height; y -= height;
} }
} else { } else {
@ -17,7 +52,7 @@ export function getBarHeightAndYAttr(yTop, zeroLine, totalHeight) {
// In case of invisible bars // In case of invisible bars
if(height === 0) { if(height === 0) {
height = totalHeight * 0.01; height = totalHeight * MIN_BAR_PERCENT_HEIGHT;
} }
} }
@ -34,35 +69,3 @@ export function equilizeNoOfElements(array1, array2,
} }
return [array1, array2]; return [array1, array2];
} }
export function getXLineProps(total_height, mode) {
let start_at, height, text_start_at, axis_line_class = '';
if(mode === 'span') { // long spanning lines
start_at = -7;
height = total_height + 15;
text_start_at = total_height + 25;
} else if(mode === 'tick'){ // short label lines
start_at = total_height;
height = 6;
text_start_at = 9;
axis_line_class = 'x-axis-label';
}
return [start_at, height, text_start_at, axis_line_class];
}
export function getYLineProps(total_width, mode, specific=false) {
if(specific) {
return[total_width, total_width + 5, 'specific-value', 0];
}
let width, text_end_at = -9, axis_line_class = '', start_at = 0;
if(mode === 'span') { // long spanning lines
width = total_width + 6;
start_at = -6;
} else if(mode === 'tick'){ // short label lines
width = -6;
axis_line_class = 'y-axis-label';
}
return [width, text_end_at, axis_line_class, start_at];
}

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

@ -1,6 +1,7 @@
import { getBarHeightAndYAttr } from './draw-utils'; import { getBarHeightAndYAttr } from './draw-utils';
// Constants used const X_AXIS_LINE_CLASS = 'x-value-text';
const Y_AXIS_LINE_CLASS = 'y-value-text';
function $(expr, con) { function $(expr, con) {
return typeof expr === "string"? (con || document).querySelector(expr) : expr || null; return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
@ -135,11 +136,11 @@ export function makeText(className, x, y, content) {
}); });
} }
export function makeXLine(height, textStartAt, point, labelClass, axisLineClass, xPos) { export function makeXLine(xPos, startAt, height, textStartAt, point, labelClass, axisLineClass) {
let line = createSVG('line', { let line = createSVG('line', {
x1: 0, x1: 0,
x2: 0, x2: 0,
y1: 0, y1: startAt,
y2: height y2: height
}); });
@ -152,7 +153,7 @@ export function makeXLine(height, textStartAt, point, labelClass, axisLineClass,
}); });
let xLine = createSVG('g', { let xLine = createSVG('g', {
className: `tick ${axisLineClass}`, className: `tick ${X_AXIS_LINE_CLASS}`,
transform: `translate(${ xPos }, 0)` transform: `translate(${ xPos }, 0)`
}); });