Add new prop previousValue

[binarykitchen]

Someone forked yours at https://github.com/srujithm/react-advanced-gauge-chart and added a nice prop called previousValue.

Really need it for my project but it's missing, plus that fork hasn't been maintained for one year and seems broken.

Any chance we can add it here instead of having a dead fork?

[bjbrewster]

I don't think adding the previousValue property is necessary as you can use the formatTextValue prop to provide a custom function to display any text you like and create something similar but it will be missing the red/green delta colour and up/down icons (Unicode characters instead?). Alternatively you could tell react-guage-chart to not render any text and instead render the text with React yourself on top of the chart using absolute positioning - that way you are free to use any Icon library and color formatting etc you like.

const IconUp = <i className="fa fa-arrow-up" />
const IconDn = <i className="fa fa-arrow-down" />

function DiffGuage({ value, max = 1, units = '%', prevValue }) {
  const percent = value / max
  const diff = prevValue !== undefined ? Math.round((percent - (prevValue / max)) * 100) : 0

  return (
    <div style={{ position: 'relative' }}>
      <GuageChart percent={percent} hideText />
      <div style={{ color: '#ccc', fontSize: '1rem', position: 'absolute', left: '50%', top: '55%', whiteSpace: 'nowrap', transform: 'translate(-50%, -50%)' }}>
        {value.toFixed(1)}{units}
        {diff != 0 && <span style={{ color: diff < 0 ? 'red' : 'green' }}> {diff < 0 ? IconDn : IconUp}{Math.abs(diff)}%</span>}
      </div>
    </div>
  )
}

I question why formatTextValue function property exists when you could just pass in the display text value directly (eg text={value.toFixed(1) + units}) as you already have the percent value or source value property and more.

Having said this, SVG text scales better when SVG is done properly so maybe support both rich SVG text and HTML text with two separate props svgText and htmlText to ensure there is no confusion and a simple text string property that would be rendered as SVG text as it is now (would be same as string passed to svgText). So htmlText could be a React element like in example below and added as child property under GuageChart's rendered div container and positioned with wrapping div as above. svgText could be similar to below but positioned inside SVG text element, just need to change span to tspan. This would require changing ReactGuageRender to render SVG element using React instead of D3. Or just tell users text is in SVG so they have to use tspan instead (still able to use Font Awesome and CSS style properties), then no need for htmlText.

function DiffGuage({ value, max = 1, units = '%', prevValue }) {
  const percent = value / max
  const diff = prevValue !== undefined ? Math.round((percent - (prevValue / max)) * 100) : 0
  const diffText = diff != 0 && <span style={{ color: diff < 0 ? 'red' : 'green' }}>{diff < 0 ? IconDn : IconUp}{Math.abs(diff)}%</span>
  const text = <span>{value.toFixed(1)}{units} {diffText}</span>

  return <GuageChart percent={percent} htmlText={text} />
}

I'm working on a pull request that cleans up this component a lot so I will try to add support for some of this. This component is doing a lot of extra work that is unneeded. The SVG should not be recreated every time the window is resized. It's Scalable Vector Graphics for a reason. It needs a viewBox property with fixed size like "0 0 200 100" or "0 0 2 1" (size is relative, not pixels) and all paths are relative to the viewBox dimensions, then the SVG width and height can be set to 100% to fill the containing div. Also, the needle is fully re-rendered as a path instead of rendered once and use transform property to rotate which is much easier to animate either in CSS transition or with D3. There are so many React refs for no good reason too.