Skip to content
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

This change allows the user to change the size of the label text. #113

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

This change allows the user to change the size of the label text. #113

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
17 changes: 8 additions & 9 deletions src/sunburst.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,6 @@ import accessorFn from 'accessor-fn';
import Tooltip from 'float-tooltip';
import { measureTextWidth } from './text';

const TEXT_FONTSIZE = 12;
const TEXT_STROKE_WIDTH = 5;

export default Kapsule({

props: {
Expand All @@ -23,6 +20,8 @@ export default Kapsule({
sort: { onChange(_, state) { state.needsReparse = true }},
label: { default: d => d.name },
labelOrientation: { default: 'auto' }, // angular, radial, auto
textSize: {default: 12},
Copy link
Owner

Choose a reason for hiding this comment

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

May be more fitting to call these two props labelFontSize and labelStrokeWidth.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I will have a look later, and follow your suggestions. Thank you for having a look!

Copy link
Owner

Choose a reason for hiding this comment

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

Even though this is already an improvement, we could go a step further and turn these props into accessor functions, just like most of the other props. That way you could set different font sizes / stroke widths per individual element.

Copy link
Owner

Choose a reason for hiding this comment

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

Also, would you mind adding docs and types for these new attributes?

textStrokeWidth: {default: 5},
size: { default: 'value', onChange(_, state) { state.needsReparse = true }},
color: { default: d => 'lightgrey' },
strokeColor: { default: d => 'white' },
Expand Down Expand Up @@ -115,7 +114,7 @@ export default Kapsule({
state.svg = el.append('svg');
state.canvas = state.svg.append('g')
.style('font-family', 'sans-serif')
.style('font-size', `${TEXT_FONTSIZE}px`);
.style('font-size', `${state.textSize}px`);
Copy link
Owner

Choose a reason for hiding this comment

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

This needs to be moved to the update section so it can react to font size changes.


state.tooltip = Tooltip()(el);

Expand Down Expand Up @@ -242,7 +241,7 @@ export default Kapsule({

// white contour
newSlice.selectAll('.text-contour')
.style('stroke-width', `${TEXT_STROKE_WIDTH}px`);
.style('stroke-width', `${state.textStrokeWidth}px`);

// Entering + Updating
const allSlices = slice.merge(newSlice);
Expand Down Expand Up @@ -365,14 +364,14 @@ export default Kapsule({
}

function angularTextFits(d) {
return measureTextWidth(nameOf(d.data).toString(), TEXT_FONTSIZE, { strokeWidth: TEXT_STROKE_WIDTH }) < getAvailableLabelAngularSpace(d);
return measureTextWidth(nameOf(d.data).toString(), state.textSize, { strokeWidth: state.textStrokeWidth }) < getAvailableLabelAngularSpace(d);
}

function radialTextFits(d) {
const availableHeight = state.radiusScale(d.y0) * (state.angleScale(d.x1) - state.angleScale(d.x0));
if (availableHeight < TEXT_FONTSIZE + TEXT_STROKE_WIDTH) return false; // not enough angular space
if (availableHeight < state.textSize + state.textStrokeWidth) return false; // not enough angular space

return measureTextWidth(nameOf(d.data).toString(), TEXT_FONTSIZE, { strokeWidth: TEXT_STROKE_WIDTH }) < getAvailableLabelRadialSpace(d);
return measureTextWidth(nameOf(d.data).toString(), state.textSize, { strokeWidth: state.textStrokeWidth }) < getAvailableLabelRadialSpace(d);
}

function autoPickLabelOrientation(d) {
Expand All @@ -386,7 +385,7 @@ export default Kapsule({

if (!orientation) {
const availableArcWidth = state.radiusScale(d.y0) * (state.angleScale(d.x1) - state.angleScale(d.x0));
if (availableArcWidth < TEXT_FONTSIZE + TEXT_STROKE_WIDTH) {
if (availableArcWidth < state.textSize + state.textStrokeWidth) {
// not enough space for radial text, choose angular
orientation = 'angular';
} else {
Expand Down