Skip to content

Adding negative values on graphics bar #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bougetalife wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Adding negative values on graphics bar #58

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c15bd44
adding negative values to bar
Dec 10, 2019
8a93152
Update Bar.js
bougetalife Dec 19, 2019
ed8d2d8
Update addAxis.js
bougetalife Dec 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 165 additions & 31 deletions src/Bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,11 @@ class Bar {
dataColors: colors,
fontFamily: 'xkcd',
strokeColor: 'black',
strokeColorTitle: 'grey',
backgroundColor: 'white',
isShorterLabelActive: false,
charNum: 5,
shorterLabels: [],
Copy link
Copy Markdown
Owner

@timqian timqian Dec 13, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's focus on Adding negative values on bar chart for this PR first and not changing the options for bar chart.

Because:

  1. we need to make sure these options not only valid for bar but also other charts
  2. For shorter labels, adding 3 more options seems too overwhelming. We can discuss this in another issue or PR

...options,
};
if (title) {
Expand All @@ -40,10 +44,33 @@ class Bar {
this.yLabel = yLabel;
margin.left = 70;
}
this.data = {
labels,
datasets,
};

this.data = {
labels,
datasets
};

this.XdataLongLabels = this.data.labels;


if (this.options.isShorterLabelActive) {

this.options.shorterLabels = getShorterLabels(this.data.labels,this.options.charNum);
this.data.labels = this.options.shorterLabels ;
console.log(this.options.shorterLabels)
}

function getShorterLabels(labels , charNumber) {
var shorterLabels = [] ;
labels.forEach(element => {

(element.length > charNumber) ?
element = element.slice(0,charNumber) + '...' : element ;
shorterLabels.push(element) ;
});
return shorterLabels ;
}

this.filter = 'url(#xkcdify)';
this.fontFamily = this.options.fontFamily || 'xkcd';
if (this.options.unxkcdify) {
Expand Down Expand Up @@ -72,7 +99,7 @@ class Bar {
}

render() {
if (this.title) addLabels.title(this.svgEl, this.title, this.options.strokeColor);
if (this.title) addLabels.title(this.svgEl, this.title, this.options.strokeColorTitle);
if (this.xLabel) addLabels.xLabel(this.svgEl, this.xLabel, this.options.strokeColor);
if (this.yLabel) addLabels.yLabel(this.svgEl, this.yLabel, this.options.strokeColor);

Expand All @@ -86,36 +113,139 @@ class Bar {
strokeColor: this.options.strokeColor,
});

const xScale = scaleBand()
.range([0, this.width])
.domain(this.data.labels)
.padding(0.4);

const xScale = scaleBand()
.range([0, this.width])
.domain(this.data.labels)
.padding(0.4);



const allData = this.data.datasets
.reduce((pre, cur) => pre.concat(cur.data), []);

const yScale = scaleLinear()
.domain([0, Math.max(...allData)])
.range([this.height, 0]);
// const yScale = scaleLinear()
// .domain([0, Math.max(...allData)])
// .range([this.height, 0]);

const yScale = getYScale(this.height, Math.min(...allData), Math.max(...allData))

function getYScale(height,min,max){
if (min < 0 && max > 0 )
Copy link
Copy Markdown
Owner

@timqian timqian Jan 7, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bikingbadger Sorry for the late reply

I see many formatting issues in this PR.

e.g. here is an unnecessary space

Can you lint the code via npm run lint, and fix the formatting issues?

{
return scaleLinear()
.domain([min,max])
.range([height, 0]);
}
else if ( max < 0)
{
return scaleLinear()
.domain([min, 0])
.range([height, 0]) ;
}
else{
return scaleLinear()
.domain([0, max])
.range([height, 0]) ;
}
}

const graphPart = this.chart.append('g');

// axis
addAxis.xAxis(graphPart, {
xScale,
tickCount: 3,
moveDown: this.height,
fontFamily: this.fontFamily,
unxkcdify: this.options.unxkcdify,
stroke: this.options.strokeColor,
});
addAxis.yAxis(graphPart, {
yScale,
tickCount: this.options.yTickCount || 3,
fontFamily: this.fontFamily,
unxkcdify: this.options.unxkcdify,
stroke: this.options.strokeColor,
});

function getXlabelsMoveDownValue(height){
const max = Math.max(...allData);
const min = Math.min(...allData);
if (min < 0 && max > 0)
{
return getRectHeight(min,height) ;
}
else if ( max < 0) {
return -25 ;
}
else {
return 0;
}
}
addAxis.xAxis(graphPart, {
moveLabelsDown: getXlabelsMoveDownValue(this.height),
tickPaddingValue:6,
xScale,
tickCount: 6,
moveDown: getValueXaxisMove(this.height),
fontFamily: this.fontFamily,
unxkcdify: this.options.unxkcdify,
stroke: this.options.strokeColor,
});

addAxis.yAxis(graphPart, {
yScale,
tickCount: this.options.yTickCount || 3,
fontFamily: this.fontFamily,
unxkcdify: this.options.unxkcdify,
stroke: this.options.strokeColor,
});


function getValueXaxisMove(height){
const max = Math.max(...allData);
const min = Math.min(...allData);
const valueMinNeg = Math.abs(min*height)/Math.abs(max-min);
if (min < 0 && max > 0) {
return (height - valueMinNeg) ;
} else if ( max < 0){
return 0 ;
}
else {
return height ;}
}

function getRectY(height,d){

const max = Math.max(...allData);
const min = Math.min(...allData);
const valueMinNeg = Math.abs(min*height)/Math.abs(max-min);
const valueMaxNeg = Math.abs(max*height)/Math.abs(max-min);

if (min < 0 && max > 0) {
if (d>0) {
return height - yScale(max-d) - valueMinNeg ;
}
else {
return (height - valueMinNeg) ;
}
}
else if ( max < 0)
{
return 0 ;
}
else {return yScale(d) ;}
}


function getRectHeight(d,height){

const max = Math.max(...allData);
const min = Math.min(...allData);

if ((min < 0 && max > 0)) {

if (d>0) {
return height*d/(max-min) ;
} else
{
return (yScale(d)-getRectY(height,d)) ;
}
}
else if ( max < 0)
{
return (yScale(d)) ;
}
else
{return height - yScale(d) ;}
}


// Bars
graphPart.selectAll('.xkcd-chart-bar')
Expand All @@ -125,8 +255,10 @@ class Bar {
.attr('class', 'xkcd-chart-bar')
.attr('x', (d, i) => xScale(this.data.labels[i]))
.attr('width', xScale.bandwidth())
.attr('y', (d) => yScale(d))
.attr('height', (d) => this.height - yScale(d))
// .attr('y', (d) => yScale(d))
// .attr('height', (d) => this.height - yScale(d))
.attr('y', (d) => getRectY(this.height,d) ) ///////////////////////
Copy link
Copy Markdown
Owner

@timqian timqian Dec 13, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unnecessary comments should be removed

.attr('height', (d) => getRectHeight(d,this.height) ) ////////////////
.attr('fill', 'none')
.attr('pointer-events', 'all')
.attr('stroke', this.options.strokeColor)
Expand Down Expand Up @@ -155,8 +287,10 @@ class Bar {
} else if (tipX < this.width / 2 && tipY > this.height / 2) {
tooltipPositionType = config.positionType.upRight;
}

tooltip.update({
title: this.data.labels[i],
// title: this.data.labels[i],
title: this.XdataLongLabels[i],
items: [{
color: this.options.dataColors[i],
text: `${this.data.datasets[0].label || ''}: ${d}`,
Expand All @@ -168,7 +302,7 @@ class Bar {
},
});
});
}
}

// TODO: update chart
update() {
Expand Down
47 changes: 36 additions & 11 deletions src/utils/addAxis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,26 +22,51 @@ const yAxis = (parent, {
.style('fill', stroke);
};

// const xAxis = (parent, {
// xScale, tickCount, moveDown, fontFamily, unxkcdify, stroke,
// }) => {
// parent
// .append('g')
// .attr('transform', `translate(0,${moveDown})`)
// .call(
// axisBottom(xScale)
// .tickSize(0)
// .tickPadding(6)
// .ticks(tickCount),
// );

// parent.selectAll('.domain')
// .attr('filter', !unxkcdify ? 'url(#xkcdify)' : null)
// .style('stroke', stroke);

// parent.selectAll('.tick > text')
// .style('font-family', fontFamily)
// .style('font-size', '16')
// .style('fill', stroke);
// };

const xAxis = (parent, {
xScale, tickCount, moveDown, fontFamily, unxkcdify, stroke,
moveLabelsDown, xScale, tickCount, moveDown, fontFamily, unxkcdify, stroke,
}) => {
parent
.append('g')
.attr('transform', `translate(0,${moveDown})`)
.call(
axisBottom(xScale)
.tickSize(0)
.tickPadding(6)
.ticks(tickCount),
);
parent
.append('g')
.attr('transform', `translate(0,${moveDown})`)
.call(
axisBottom(xScale)
.tickSize(0)
.tickPadding(6)
.ticks(tickCount),
);


parent.selectAll('.domain')
.attr('filter', !unxkcdify ? 'url(#xkcdify)' : null)
.style('stroke', stroke);

parent.selectAll('.tick > text')
.style('font-family', fontFamily)
.style('font-size', '16')
.style('font-size', '10')
.attr('transform', `translate(0,${moveLabelsDown})`)
.style('fill', stroke);
};

Expand Down