Package Health Score

61 / 100

security
No known security issues
popularity
Small
maintenance
Inactive
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

Version				Vulnerabilities	License Risk
2.2.1	\|	02/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.1.0	\|	09/2022	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.14.1	\|	10/2020		0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.13.1	\|	09/2020		0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.12.0	\|	06/2020		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Small

Weekly Downloads (9,974)

GitHub Stars: 232
Forks: 58
Contributors: 4

Direct Usage Popularity

The npm package react-d3-speedometer receives a total of 9,974 downloads a week. As such, we scored react-d3-speedometer popularity level to be Small.

Based on project statistics from the GitHub repository for the npm package react-d3-speedometer, we found that it has been starred 232 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: Yes
Code of Conduct: No
Contributors: 4
Funding: No

This project has seen only 10 or less contributors.

We found a way for you to contribute to the project! Looks like react-d3-speedometer is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Inactive

Commit Frequency

Open Issues: 29
Open PR: 3
Last Release: 9 months ago
Last Commit: 8 months ago

Further analysis of the maintenance status of react-d3-speedometer based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

We found that react-d3-speedometer demonstrates a positive version release cadence with at least one new version released in the past 12 months.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: >=14.0

Age: 7 years
Dependencies: 12 Direct
Versions: 60
Install Size: 277 kB
Dist-tags: 2
# of Files: 7
Maintainers: 1
TS Typings: No

react-d3-speedometer has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

react-d3-speedometer

> React library for showing speedometer like gauge using d3.

Note: v2.x is compatible with React v18. v1.x is compatible with React 17. Please use latest v0.x (v0.14.1 at the time of writing) if you are using React 16.

`react-d3-speedometer`

Getting Started:

Install with yarn or npm.

Yarn:

yarn add react-d3-speedometer

npm:

npm install --save react-d3-speedometer

And, use it like

// import the component
import ReactSpeedometer from "react-d3-speedometer"
// and just use it

Slim Build:

There is a Slim build available without bundling d3. This project uses d3 micro bundles. If your project also uses d3 microbundles, you can opt for slim build. Necessary d3 dependencies required for slim build to work are - d3-array, d3-color, d3-ease, d3-format, d3-interpolate, d3-scale, d3-selection, d3-shape, d3-transition.

// sample slim build usage
import ReactSpeedometer from "react-d3-speedometer/slim"
// and use it

Live Examples

Configuration Options:

prop	type	default	comments
value	Number	0	Make sure your value is between your `minValue` and `maxValue`
minValue	Number	0
maxValue	Number	1000
segments	Number	5	Number of segments in the speedometer. Please note, `segments` is calculated with d3-ticks which is an approximate count that is uniformly spaced between min and max. Please refer to d3-ticks and d3-array ticks for more detailed info.
maxSegmentLabels	Number	value from 'segments' prop	Limit the number of segment labels to displayed. This is useful for acheiving a gradient effect by giving arbitrary large number of `segments` and limiting the labels with this prop. See Live Example. Please note, `maxSegmentLabels` is calculated with d3-ticks which is an approximate count that is uniformly spaced between min and max. Please refer to d3-ticks and d3-array ticks for more detailed info.
forceRender	Boolean	false	After initial rendering/mounting, when props change, only the `value` is changed and animated to maintain smooth visualization. But, if you want to force rerender the whole component like change in segments, colors, dimensions etc, you can use this option to force rerender of the whole component on props change.
width	Number	300	diameter of the speedometer and the width of the svg element
height	Number	300	height of the svg element. Height of the speedometer is always half the width since it is a semi-circle. For fluid width, please refere to `fluidWidth` config
dimensionUnit	String	px	Default to `px` for `width/height`. Possible values - `"em" , "ex" , "px" , "in" , "cm" , "mm" , "pt" , ,"pc"` ... Please refer to specification for more details
fluidWidth	Boolean	false	If `true` takes the width of the parent component. See Live Example for more details
needleColor	String	steelblue	Should be a valid color code - colorname, hexadecimal name or rgb value. Should be a valid input for d3.interpolateHsl
startColor	String	#FF471A	Should be a valid color code - colorname, hexadecimal name or rgb value. Should be a valid input for d3.interpolateHsl
endColor	String	#33CC33	Should be a valid color code - colorname, hexadecimal name or rgb value. Should be a valid input for d3.interpolateHsl
segmentColors	Array (of colors)	[]	Custom segment colors can be given with this option. Should be an array of valid color codes. If this option is given startColor and endColor options will be ignored.
needleTransition	String (JS) / Transition (TS)	easeQuadInOut	d3-easing-identifiers - easeLinear, easeQuadIn, easeQuadOut, easeQuadInOut, easeCubicIn, easeCubicOut, easeCubicInOut, easePolyIn, easePolyOut, easePolyInOut, easeSinIn, easeSinOut, easeSinInOut, easeExpIn, easeExpOut, easeExpInOut, easeCircleIn, easeCircleOut, easeCircleInOut, easeBounceIn, easeBounceOut, easeBounceInOut, easeBackIn, easeBackOut, easeBackInOut, easeElasticIn, easeElasticOut, easeElasticInOut, easeElastic. There is a helper Object/Type 'Transtion', which you can import like `import { Transition } from 'react-d3-speedometer'` and use it like `Transition.easeElastic`. This works for both JS and Typescript. For `type(script)` definitions, please refer here.
needleTransitionDuration	Number	500	Time in milliseconds.
needleHeightRatio	Float (between 0 and 1)	0.9	Control the height of the needle by giving a number/float between `0` and `1`. Default height ratio is `0.9`.
ringWidth	Number	60	Width of the speedometer ring.
textColor	String	#666	Should be a valid color code - colorname, hexadecimal name or rgb value. Used for both showing the current value and the segment values
valueFormat	String		should be a valid format for d3-format. By default, no formatter is used. You can use a valid d3 format identifier (for eg: `d` to convert float to integers), to format the values. Note: This formatter affects all the values (current value, segment values) displayed in the speedometer
segmentValueFormatter	Function	value => value	Custom segment values formatter function. This function is applied after 'valueFormat' prop if present.
currentValueText	String	${value}	Should be provided a string which should have ${value} placeholder which will be replaced with current value. By default, current value is shown (formatted with `valueFormat`). For example, if current Value is 333 if you would like to show `Current Value: 333`, you should provide a string `Current Value: ${value}`. See Live Example
currentValuePlaceholderStyle	String	${value}	Should be provided a placeholder string which will be replaced with current value in `currentValueTextProp`. For example: you can use ruby like interpolation by giving following props - ``. This is also helpful if you face `no-template-curly-in-string` eslint warnings and would like to use different placeholder for current value
customSegmentStops	Array	[]	Array of values starting at `min` value, and ending at `max` value. This configuration is useful if you would like to split the segments at custom points or have unequal segments at preferred values. If the values does not begin and end with `min` and `max` value respectively, an error will be thrown. This configuration will override `segments` prop, since total number of segments will be `length - 1` of `customSegmentProps`. For example, `[0, 50, 75, 100]` value will have three segments - `0-50`, `50-75`, `75-100`. See Live Example
customSegmentLabels	Array``	[]	Takes an array of `CustomSegmentLabel` objects. Each object has following keys for custom rendering of labels - `text`, `fontSize`, `color`, `position: OUTSIDE/INSIDE`. For `position`, there is a helper `CustomSegmentLabelPosition` Object/Type which you can import like `import { CustomSegmentLabelPosition } from 'react-d3-speedometer'`, and use it like `CustomSegmentLabelPosition.Inside / CustomSegmentLabelPosition.Outside`. This works for both JS and Typescript. For `type(script)` definitions, please refer here.
labelFontSize	String	14px	Font size for segment labels/legends
valueTextFontSize	String	16px	Font size for current value text
valueTextFontWeight	String	bold	Font weight for current value text. Any valid font weight identifier (500, bold etc) can be used.
paddingHorizontal	Number	0	Provides right/left space for the label text. Takes a number (without explicit unit, unit will be taken from dimensionUnit config which defaults to px). Helpful when using a bigger font size for label texts.
paddingVertical	Number	0	Provides top/bottom space for the current value label text below the needle. Takes a number (without explicit unit, unit will be taken from dimensionUnit config which defaults to px). Helpful when using a bigger font size for label texts.
svgAriaLabel	String	React d3 speedometer	SVG aria-label property for Accessibility purposes

Examples

You can view Live Examples here

Default with no config - Live Example

With configurations - Live Example

Custom Segment Colors - Live Example

Custom Segment Labels - Live Example

  // 'customSegmentLabels' prop takes an array of 'CustomSegmentLabel' Object
  /*
  type CustomSegmentLabel = {
    text?: string
    position?: OUTSIDE/INSIDE
    fontSize?: string
    color?: string
  }
  */

Custom Segment Stops - Live Example

  
  // `segments` prop will be ignored since it will be calculated from `customSegmentStops`
  // In this case there will be `4` segments (0-500, 500-750, 750-900, 900-1000)
/&gt;

Fluid Width Example - Live Example

// Speedometer will take the width of the parent div (500)
// any width passed will be ignored
<div style="{{">
  
</div>

Needle Transition Example - Live Example

Force Render component on props change - Live Example

// By default, when props change, only the value prop is updated and animated. 
// This is to maintain smooth visualization and to ignore breaking appearance changes like segments, colors etc. 
// You can override this behaviour by giving forceRender: true

// render a component initially

// Now, if given forceRender: true, and change the appearance all together, the component will rerender completely on props change

Needle Height Configuration Example - Live Example

You can give a value between 0 and 1 to control the needle height.

Gradient Like Effect - Live Example

FAQ:

How to use with nextjs?

react-d3-speedometer uses lodash-es dependency for better tree shaking. For nextjs, please use next-transpile-modules, so that ES module exports from lodash-es package is properly transpiled. You can also nextjs dynamic imports - https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

Please refer to this issue for more details on how to make this library work with next.js - https://github.com/palerdot/react-d3-speedometer/issues/89

How to use with React 17?

Please use latest v1.x (v1.0.0 at the time of writing). v1.x is compatible with React 17.
How to use with React 16?

Please use latest v0.x (v0.14.x at the time of writing). v0.x is compatible with React 16.

Ports:

Vue: vue-speedometer
Svelte: svelte-speedometer

Todos:

[x] Test coverage (with enzyme)
[x] Convert entire code base to ES6
[x] Split core from lifecycles
[x] Typescript support

Tests:

react-d3-speedometer comes with a test suite using enzyme.

// navigate to root folder and run
npm test
// or 'yarn test' if you are using yarn

Feature Updates:

[v1.0.0] React v17 support. d3 v6 support. Live Example
[v0.14.0] valueTextFontWeight config to control font weight of current value
[v0.10.0] Custom labels. Live Example
[v0.9.0] Typescript support
[v0.8.0] paddingHorizontal, paddingVertical configuration to control spacing around text. Live Example
[v0.7.0] Custom segment stops. Live Example
[v0.6.0] Custom segment colors. Live Example

Changelog:

View Changelog

Credits:

react-d3-speedometer was started as a react port of the following d3 snippet - https://bl.ocks.org/msqr/3202712. Component template was initially bootstrapped with React CDK. Also, many thanks to react and d3 ecosystem contributors.

Contributing:

PRs are welcome. Please create a issue/bugfix/feature branch and create an issue with your branch details. Probably I will create a similar branch in the upstream repo so that PRs can be raised against that branch instead of master. master-v0.x is the main branch for React 16 compatible changes.

Notes

1.x versions are compatible with React & React DOM Versions v17.x
0.x versions are compatible with React & React DOM Versions v16.x For every subsequent major react upgrade, react-d3-speedometer will be bumped to next major versions. For example 1.x will be compatible with React 17.x so on and so forth ...

For similar library for VueJS, please check out vue-speedometer.

For similar library for Svelte, please check out svelte-speedometer.

License:

MIT

react-d3-speedometer dependencies

d3-array d3-color d3-ease d3-format d3-interpolate d3-scale d3-selection d3-shape d3-transition lodash-es memoize-one prop-types

FAQs

What is react-d3-speedometer?

React library for showing speedometer like gauge using d3. Visit Snyk Advisor to see a full health score report for react-d3-speedometer, including popularity, security, maintenance & community analysis.

Is react-d3-speedometer popular?

The npm package react-d3-speedometer receives a total of 9,974 weekly downloads. As such, react-d3-speedometer popularity was classified as small. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is react-d3-speedometer well maintained?

We found indications that react-d3-speedometer is an Inactive project. See the full package health analysis to learn more about the package maintenance status.

Is react-d3-speedometer safe to use?

The npm package react-d3-speedometer was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 8 November-2024, at 07:49 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (9,974)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

react-d3-speedometer

react-d3-speedometer

Getting Started:

Slim Build:

Configuration Options:

Examples

Default with no config - Live Example

With configurations - Live Example

Custom Segment Colors - Live Example

Custom Segment Labels - Live Example

Custom Segment Stops - Live Example

Fluid Width Example - Live Example

Needle Transition Example - Live Example

Force Render component on props change - Live Example

Needle Height Configuration Example - Live Example

Gradient Like Effect - Live Example

FAQ:

Ports:

Todos:

Tests:

Feature Updates:

Changelog:

Credits:

Contributing:

Notes

License:

react-d3-speedometer dependencies

react-d3-speedometer development dependencies

FAQs

What is react-d3-speedometer?

Is react-d3-speedometer popular?

Is react-d3-speedometer well maintained?

Is react-d3-speedometer safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues

`react-d3-speedometer`