Fluid Width prop to take only available space

src/core/config/configure.js

@@ -58,7 +58,7 @@ function _configureArc(config) {
   const tickData = configureTickData(config)
 
   const range = config.maxAngle - config.minAngle
-  const r = config.width / 2
+  const r = config.radius
 
   const arc = d3Arc()
     .innerRadius(r - config.ringWidth - config.ringInset)

src/core/config/index.js

@@ -69,6 +69,7 @@ export const DEFAULT_PROPS = {
   labelFontSize: '14px',
   valueTextFontSize: '16px',
   valueTextFontWeight: 'bold', // any valid font weight string
+  valueTextBelowPos: 23, // pt value to position the text below the gauge
 
   // Accessibility related props
   svgAriaLabel: 'React d3 speedometer', // aria-label of speedometer
@@ -88,12 +89,24 @@ const DEFAULT_CONFIG = {
 }
 
 export const getConfig = ({ PROPS, parentWidth, parentHeight }) => {
+  let width = PROPS.width
+  let height = PROPS.height
+  let radius = width / 2
+
+  if (PROPS.fluidWidth) {
+    width = Math.min(parentWidth, (parentHeight - PROPS.valueTextBelowPos) * 2)
+    height = Math.min(parentWidth / 2, parentHeight - PROPS.valueTextBelowPos)
+    radius = Math.min(height, width)
+  }
+
   const config = {
     // width/height config
     // if fluidWidth; width/height taken from the parent of the ReactSpeedometer
     // else if width/height given it is used; else our default
-    width: PROPS.fluidWidth ? parentWidth : PROPS.width,
-    height: PROPS.fluidWidth ? parentHeight : PROPS.height,
+    width: width,
+    height: height,
+
+    radius: radius,
 
     // text padding horizontal/vertical
     paddingHorizontal: PROPS.paddingHorizontal,
@@ -147,6 +160,7 @@ export const getConfig = ({ PROPS, parentWidth, parentHeight }) => {
     labelFontSize: PROPS.labelFontSize,
     valueTextFontSize: PROPS.valueTextFontSize,
     valueTextFontWeight: PROPS.valueTextFontWeight,
+    valueTextBelowPos: PROPS.valueTextBelowPos,
 
     // Accessibility related props
     svgAriaLabel: PROPS.svgAriaLabel, // aria-label of speedometer

src/core/render/index.js

@@ -67,7 +67,8 @@ export const render = ({ container, config }) => {
 function _renderSVG({ container, config }) {
   // calculate width and height
   const width = config.width + 2 * config.paddingHorizontal
-  const height = config.height + 2 * config.paddingVertical
+  const height =
+    config.height + 2 * config.paddingVertical + config.valueTextBelowPos
 
   return (
     d3Select(container)
@@ -253,9 +254,9 @@ function _renderCustomSegmentLabels({
 }
 
 function _renderCurrentValueText({ config, svg }) {
-  const translateX = (config.width + 2 * config.paddingHorizontal) / 2
+  const translateX = config.radius + config.paddingHorizontal
   // move the current value text down depending on padding vertical
-  const translateY = (config.width + 4 * config.paddingVertical) / 2
+  const translateY = config.radius + 2 * config.paddingVertical
 
   return (
     svg
@@ -266,7 +267,7 @@ function _renderCurrentValueText({ config, svg }) {
       .attr('class', 'current-value')
       .attr('text-anchor', 'middle')
       // position the text 23pt below
-      .attr('y', 23)
+      .attr('y', config.valueTextBelowPos)
       // add text
       .text(config.currentValue)
       .style('font-size', config.valueTextFontSize)

src/core/util/index.js

@@ -135,5 +135,5 @@ export function centerTranslation(r, paddingHorizontal, paddingVertical) {
 }
 
 export function getRadius(config) {
-  return config.width / 2
+  return config.radius
 }

src/core/util/index.test.js

@@ -184,6 +184,7 @@ describe('verify configuration', () => {
     currentValuePlaceholderStyle: '${value}',
     labelFontSize: '14px',
     valueTextFontSize: '16px',
+    valueTextBelowPos: 23,
   }
 
   test('check default config', () => {
@@ -196,7 +197,7 @@ describe('verify configuration', () => {
     expect(generated_config).toMatchObject(expected_config)
   })
 
-  test('check config for fluidWidth: true', () => {
+  test('check config for fluidWidth: true, width == height', () => {
     const PROPS = {
       ...DEFAULT_PROPS,
       fluidWidth: true,
@@ -205,7 +206,7 @@ describe('verify configuration', () => {
     const expected_fluid_width_config = {
       ...expected_config,
       width: 500,
-      height: 500,
+      height: 250,
     }
 
     const generated_config = getConfig({
@@ -217,6 +218,48 @@ describe('verify configuration', () => {
     expect(generated_config).toMatchObject(expected_fluid_width_config)
   })
 
+  test('check config for fluidWidth: true, width < height', () => {
+    const PROPS = {
+      ...DEFAULT_PROPS,
+      fluidWidth: true,
+    }
+
+    const expected_fluid_width_config = {
+      ...expected_config,
+      width: 454,
+      height: 227,
+    }
+
+    const generated_config = getConfig({
+      PROPS,
+      parentWidth: 500,
+      parentHeight: 250,
+    })
+
+    expect(generated_config).toMatchObject(expected_fluid_width_config)
+  })
+
+  test('check config for fluidWidth: true, width > height', () => {
+    const PROPS = {
+      ...DEFAULT_PROPS,
+      fluidWidth: true,
+    }
+
+    const expected_fluid_width_config = {
+      ...expected_config,
+      width: 250,
+      height: 125,
+    }
+
+    const generated_config = getConfig({
+      PROPS,
+      parentWidth: 250,
+      parentHeight: 500,
+    })
+
+    expect(generated_config).toMatchObject(expected_fluid_width_config)
+  })
+
   test("to throw error if invalid 'customSegmentLabels' config", () => {
     const PROPS = {
       ...DEFAULT_PROPS,

src/index.d.ts

@@ -85,6 +85,7 @@ declare module 'react-d3-speedometer' {
     labelFontSize?: string
     valueTextFontSize?: string
     valueTextFontWeight?: string
+    valueTextBelowPos?: number
 
     paddingHorizontal?: number
     paddingVertical?: number

src/index.jsx

@@ -149,6 +149,7 @@ ReactSpeedometer.propTypes = {
   labelFontSize: PropTypes.string.isRequired,
   valueTextFontSize: PropTypes.string.isRequired,
   valueTextFontWeight: PropTypes.string.isRequired,
+  valueTextBelowPos: PropTypes.number.isRequired,
 
   // accessiblity props
   svgAriaLabel: PropTypes.string,