Skip to content
This repository has been archived by the owner on Nov 3, 2023. It is now read-only.

Commit

Permalink
feat: add properties for font sizing (#10)
Browse files Browse the repository at this point in the history
* feat: add properties for font sizing

* revert package.json changes

* refactor: rename bigNum to header

* chore: empty commit to kick off travis
  • Loading branch information
khtruong authored and zhaoyongjie committed Nov 26, 2021
1 parent cc2ec90 commit 49cd2fe
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,8 @@ const CHART_MARGIN = {
};

const PROPORTION = {
HEADER: 0.4,
SUBHEADER: 0.14,
HEADER_WITH_TRENDLINE: 0.3,
SUBHEADER_WITH_TRENDLINE: 0.125,
HEADER: 0.3,
SUBHEADER: 0.125,
TRENDLINE: 0.3,
};

Expand Down Expand Up @@ -78,7 +76,9 @@ const propTypes = {
height: PropTypes.number.isRequired,
bigNumber: PropTypes.number.isRequired,
formatBigNumber: PropTypes.func,
headerFontSize: PropTypes.number,
subheader: PropTypes.string,
subheaderFontSize: PropTypes.number,
showTrendLine: PropTypes.bool,
startYAxisAtZero: PropTypes.bool,
trendLineData: PropTypes.array,
Expand All @@ -88,7 +88,9 @@ const propTypes = {
const defaultProps = {
className: '',
formatBigNumber: identity,
headerFontSize: PROPORTION.HEADER,
subheader: '',
subheaderFontSize: PROPORTION.SUBHEADER,
showTrendLine: false,
startYAxisAtZero: true,
trendLineData: null,
Expand Down Expand Up @@ -217,7 +219,7 @@ class BigNumberVis extends React.PureComponent {
}

render() {
const { showTrendLine, height } = this.props;
const { showTrendLine, height, headerFontSize, subheaderFontSize } = this.props;
const className = this.getClassName();

if (showTrendLine) {
Expand All @@ -227,8 +229,8 @@ class BigNumberVis extends React.PureComponent {
return (
<div className={className}>
<div className="text-container" style={{ height: allTextHeight }}>
{this.renderHeader(Math.ceil(PROPORTION.HEADER_WITH_TRENDLINE * height))}
{this.renderSubheader(Math.ceil(PROPORTION.SUBHEADER_WITH_TRENDLINE * height))}
{this.renderHeader(Math.ceil(headerFontSize * height))}
{this.renderSubheader(Math.ceil(subheaderFontSize * height))}
</div>
{this.renderTrendline(chartHeight)}
</div>
Expand All @@ -237,8 +239,8 @@ class BigNumberVis extends React.PureComponent {

return (
<div className={className} style={{ height }}>
{this.renderHeader(Math.ceil(PROPORTION.HEADER * height))}
{this.renderSubheader(Math.ceil(PROPORTION.SUBHEADER * height))}
{this.renderHeader(Math.ceil(headerFontSize * height))}
{this.renderSubheader(Math.ceil(subheaderFontSize * height))}
</div>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ export default function transformProps(chartProps) {
colorPicker,
compareLag: compareLagInput,
compareSuffix = '',
headerFontSize,
subheaderFontSize,
metric,
showTrendLine,
startYAxisAtZero,
Expand Down Expand Up @@ -88,6 +90,8 @@ export default function transformProps(chartProps) {
bigNumber,
className,
formatBigNumber: formatValue,
headerFontSize,
subheaderFontSize,
mainColor,
renderTooltip: renderTooltipFactory(formatValue),
showTrendLine: supportAndShowTrendLine,
Expand Down

0 comments on commit 49cd2fe

Please sign in to comment.