svelte-speedometer

svelte-speedometer is a svelte component library for showing speedometer like gauge using d3.

IMPORTANT: If you are using Svelte v5, please use v3.0.v2.0 is compatible with Svelte v3 or v4.

Usage:

pnpm pnpm add svelte-speedometer

Yarn: yarn add svelte-speedometer

NPM: npm install --save svelte-speedometer

// import the component
import Speedometer from "svelte-speedometer"
// and just use it
<Speedometer />

Stackblitz: https://stackblitz.com/edit/svelte-speedometer-svelte-v5 Storybook: https://palerdot.in/svelte-speedometer/?path=/docs/svelte-speedometer--docs

Ports:

• React: react-d3-speedometer
• Vue: vue-speedometer

Examples:

Live Examples

Configuration Options:

Examples

You can view Live Examples here

Default with no config - Live Example

<Speedometer />

With configurations - Live Example

<Speedometer
  maxValue={500}
  value={473}
  needleColor="red"
  startColor="green"
  segments={10}
  endColor="blue"
/>

Custom Segment Colors - Live Example

<Speedometer
  value={333}
  segments={5}
  segmentColors={[
    "#bf616a",
    "#d08770",
    "#ebcb8b",
    "#a3be8c",
    "#b48ead",
  ]}
  // startColor will be ignored
  // endColor will be ignored
/>

Custom Segment Labels - Live Example

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

  <Speedometer
    value={777}
    currentValueText="Happiness Level"
    customSegmentLabels={[
      {
        text: "Very Bad",
        position: "INSIDE",
        color: "#555",
      },
      {
        text: "Bad",
        position: "INSIDE",
        color: "#555",
      },
      {
        text: "Ok",
        position: "INSIDE",
        color: "#555",
        fontSize: "19px",
      },
      {
        text: "Good",
        position: "INSIDE",
        color: "#555",
      },
      {
        text: "Very Good",
        position: "INSIDE",
        color: "#555",
      },
    ]}
  />

Custom Segment Stops - Live Example

  <Speedometer
    customSegmentStops={[0, 500, 750, 900, 1000]}
    segmentColors={["firebrick", "tomato", "gold", "limegreen"]}
    value={333}
  />
  // `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)
/>

Fluid Width Example - Live Example

// Speedometer will take the width of the parent div (500)
// any width passed will be ignored
<div style={{
  width: "500px",
  height: "300px",
  background: "#EFEFEF"
}}>
  <Speedometer
    fluidWidth={true}
    minValue={100}
    maxValue={500}
    value={473}
    needleColor="steelblue"
  />
</div>

Needle Transition Example - Live Example

<Speedometer
  value={333}
  needleColor="steelblue"
  needleTransitionDuration={4000}
  needleTransition="easeElastic"
/>

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
<Speedometer
  width={200}
  height={200}
/>
// Now, if given forceRender: true, and change the appearance all together, the component will rerender completely on props change
<Speedometer
  forceRender={true}
  segments={15}
  width={500}
  height={500}
/>

Needle Height Configuration Example - Live Example

<Speedometer
  value={333}
  needleHeightRatio={0.7}
/>

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

Gradient Like Effect - Live Example

<Speedometer
  value={333}
  maxSegmentLabels={5}
  segments={1000}
/>

Todos:

• Test coverage (with @testing-library/svelte)
• Typescript support (Note: type definitions for props are available here. As of this writing, I cannot find the official svelte component official types. It will be updated as it is made available)

Tests:

svelte-speedometer comes with a test suite using @testing-library/svelte.

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

Feature Updates:

• [v1.1.0] valueTextFontWeight prop. ref: https://svelte.dev/repl/c7e2f081bce34508b07265d6d12cca65?version=3.29.4
• [v1.0.0] svelte-speedometer initial launch

Changelog:

View Changelog

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.

Notes

• 1.x versions are compatible with Svelte v3 For every subsequent major svelte upgrade, svelte-speedometer will be bumped to next major versions. For example 2.x will be compatible with Svelte v4.x so on and so forth ...

For similar library for React, please check out react-d3-speedometer For similar library for VueJS, please check out vue-speedometer

License:

MIT