Skip to content
This repository has been archived by the owner on Dec 10, 2021. It is now read-only.

feat(legacy-preset-chart-nvd3): add a new label type to pie chart #699

Merged
merged 8 commits into from
Jul 27, 2020
Merged

feat(legacy-preset-chart-nvd3): add a new label type to pie chart #699

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9683faa
feat(legacy-preset-chart-nvd3): add a new label type to pie chart
Jul 23, 2020
9c9c66a
add space between value and percent
Jul 23, 2020
d515143
fix eslint
Jul 23, 2020
4755381
feat(legacy-preset-chart-nvd3): update by comment
Jul 24, 2020
87a1ec1
feat(legacy-preset-chart-nvd3): further dry up
Jul 24, 2020
c181595
feat(legacy-preset-chart-nvd3): further dry up
Jul 24, 2020
a5e2881
feat(legacy-preset-chart-nvd3): fix tooltip
Jul 24, 2020
11a2478
feat(legacy-preset-chart-nvd3): refactor to getNumberFormatter
Jul 27, 2020
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
28 changes: 24 additions & 4 deletions plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,14 @@ const propTypes = {
// 'pie' only
isDonut: PropTypes.bool,
isPieLabelOutside: PropTypes.bool,
pieLabelType: PropTypes.oneOf(['key', 'value', 'percent', 'key_value', 'key_percent']),
pieLabelType: PropTypes.oneOf([
'key',
'value',
'percent',
'key_value',
'key_percent',
'key_value_percent',
]),
showLabels: PropTypes.bool,
// 'area' only
areaStackedStyle: PropTypes.string,
Expand Down Expand Up @@ -418,10 +425,23 @@ function nvd3Vis(element, props) {
chart.labelType(pieLabelType);
} else if (pieLabelType === 'key_value') {
chart.labelType(d => `${d.data.x}: ${numberFormatter(d.data.y)}`);
} else if (pieLabelType === 'key_percent') {
} else {
// pieLabelType in ['key_percent', 'key_value_percent']
const total = d3.sum(data, d => d.y);
chart.tooltip.valueFormatter(d => `${((d / total) * 100).toFixed()}%`);
chart.labelType(d => `${d.data.x}: ${((d.data.y / total) * 100).toFixed()}%`);
const percentFormatter = getNumberFormatter(NumberFormats.PERCENT_2_POINT);
if (pieLabelType === 'key_percent') {
chart.tooltip.valueFormatter(d => percentFormatter(d));
chart.labelType(d => `${d.data.x}: ${percentFormatter(d.data.y / total)}`);
} else {
// pieLabelType === 'key_value_percent'
chart.tooltip.valueFormatter(
d => `${numberFormatter(d)} (${percentFormatter(d / total)})`,
);
chart.labelType(
d =>
`${d.data.x}: ${numberFormatter(d.data.y)} (${percentFormatter(d.data.y / total)})`,
);
}
}
// Pie chart does not need top margin
chart.margin({ top: 0 });
Expand Down
1 change: 1 addition & 0 deletions plugins/legacy-preset-chart-nvd3/src/Pie/controlPanel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export default {
['percent', 'Percentage'],
['key_value', 'Category and Value'],
['key_percent', 'Category and Percentage'],
['key_value_percent', 'Category, Value and Percentage'],
],
description: t('What should be shown on the label?'),
},
Expand Down