svelte-speedometer - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

CHANGELOG.md

 # Change Log
 
+## 1.1.0
+- [`CORE`][0.14.1]
+- `Transition` type
+- `valueTextFontWeight` prop from 'CORE'
+
+## 1.0.2
+- `d3`, `lodash-es`, `memoize-one` listed as `dependencies`.
+
 ## 1.0.1
@@ -4,0 +12,0 @@ - [`CORE`][`0.11.0`]

dist/index.d.ts

 declare module "svelte-speedometer" {
+  enum Transition {
+    easeLinear = "easeLinear",
+    easeQuadIn = "easeQuadIn",
+    easeQuadOut = "easeQuadOut",
+    easeQuadInOut = "easeQuadInOut",
+    easeCubicIn = "easeCubicIn",
+    easeCubicOut = "easeCubicOut",
+    easeCubicInOut = "easeCubicInOut",
+    easePolyIn = "easePolyIn",
+    easePolyOut = "easePolyOut",
+    easePolyInOut = "easePolyInOut",
+    easeSinIn = "easeSinIn",
+    easeSinOut = "easeSinOut",
+    easeSinInOut = "easeSinInOut",
+    easeExpIn = "easeExpIn",
+    easeExpOut = "easeExpOut",
+    easeExpInOut = "easeExpInOut",
+    easeCircleIn = "easeCircleIn",
+    easeCircleOut = "easeCircleOut",
+    easeCircleInOut = "easeCircleInOut",
+    easeBounceIn = "easeBounceIn",
+    easeBounceOut = "easeBounceOut",
+    easeBounceInOut = "easeBounceInOut",
+    easeBackIn = "easeBackIn",
+    easeBackOut = "easeBackOut",
+    easeBackInOut = "easeBackInOut",
+    easeElasticIn = "easeElasticIn",
+    easeElasticOut = "easeElasticOut",
+    easeElasticInOut = "easeElasticInOut",
+    easeElastic = "easeElastic",
+  }
+
   enum CustomSegmentLabelPosition {
@@ -59,3 +91,3 @@ Outside = "OUTSIDE",
   // named exports of all the types
-  export { Props, CustomSegmentLabel, CustomSegmentLabelPosition }
+  export { Props, CustomSegmentLabel, CustomSegmentLabelPosition, Transition }
 
@@ -62,0 +94,0 @@ interface ComponentOptions {

package.json

 {
   "name": "svelte-speedometer",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Svelte component for showing speedometer like gauge using d3",
@@ -15,2 +15,3 @@ "repository": "https://github.com/palerdot/svelte-speedometer",
     "build": "rollup -c",
+    "init-submodule": "git submodule update --init",
     "pull-submodules": "git submodule foreach git pull origin master",
@@ -53,5 +54,5 @@ "storybook": "start-storybook -p 6006",
   "dependencies": {
+    "d3": "^5.15.0",
     "lodash-es": "^4.17.15",
-    "memoize-one": "^5.1.1",
-    "d3": "^5.15.0"
+    "memoize-one": "^5.1.1"
   },
@@ -58,0 +59,0 @@ "keywords": [

README.md

@@ -5,3 +5,3 @@ # svelte-speedometer
 
-[![Build Status](https://travis-ci.org/palerdot/svelte-speedometer.svg?branch=master)](https://travis-ci.org/palerdot/svelte-speedometer)
+[![CircleCI Build Status](https://circleci.com/gh/palerdot/svelte-speedometer.svg?style=svg)](https://circleci.com/gh/palerdot/svelte-speedometer)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
@@ -15,8 +15,8 @@
 
+**Yarn:**
+`yarn add svelte-speedometer` 
+
 **NPM:**
 `npm install --save svelte-speedometer` 
 
-**Yarn:**
-`yarn add svelte-speedometer` 
-
 ```javascript
@@ -29,2 +29,8 @@ // import the component
 
+## Ports:
+- React: [react-d3-speedometer](https://github.com/palerdot/react-d3-speedometer)
+- Vue: [vue-speedometer](https://github.com/palerdot/vue-speedometer)
+
+## Examples:
+
 [Live Examples](https://palerdot.in/svelte-speedometer/)
@@ -50,3 +56,3 @@
 | 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         | easeQuadInOut | [d3-easing-identifiers](https://github.com/d3/d3-ease) - 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 |
+| needleTransition | String (JS) / Transition (TS)        | easeQuadInOut | [d3-easing-identifiers](https://github.com/d3/d3-ease) - 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](./src/index.d.ts). |
 | needleTransitionDuration | Number         | 500     | Time in milliseconds. |
@@ -60,5 +66,6 @@ | 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`.  |
 | 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](https://palerdot.in/svelte-speedometer/?path=/story/svelte-speedometer--custom-segment-stops) |
-| customSegmentLabels | Array`<CustomSegmentLabel>` | [] | Takes an array of `CustomSegmentLabel` objects. Each object has following keys for custom rendering of labels - `text`, `fontSize`, `color`, `position: OUTSIDE/INSIDE`. For `type(script)` definitions, please refer [here](./src/index.d.ts). |
+| customSegmentLabels | Array`<CustomSegmentLabel>` | [] | 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](./src/index.d.ts).  |
 | 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. |
@@ -253,3 +260,3 @@ | 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. |
 
-`svelte-speedometer` comes with a test suite using [enzyme](https://github.com/airbnb/enzyme).
+`svelte-speedometer` comes with a test suite using `@testing-library/svelte`.
 
@@ -256,0 +263,0 @@ ```javascript

src/core/config/configure.js

@@ -1,3 +0,3 @@
-import memoizeOne from "memoize-one"
-import { range as d3Range, arc as d3Arc } from "d3"
+import memoizeOne from 'memoize-one'
+import { range as d3Range, arc as d3Arc } from 'd3'
 import {
@@ -9,3 +9,3 @@ deg2rad,
   calculateSegmentStops,
-} from "../util"
+} from '../util'
 
@@ -43,3 +43,3 @@ // export memoized functions
 function _configureTickData(config) {
-  const defaultTickData = d3Range(config.majorTicks).map((d) => {
+  const defaultTickData = d3Range(config.majorTicks).map(d => {
     return 1 / config.majorTicks
@@ -46,0 +46,0 @@ })

src/core/config/index.js

@@ -6,4 +6,5 @@ import {
   format as d3Format,
-} from "d3"
-import { calculateSegmentLabelCount } from "../util/"
+} from 'd3'
+import { calculateSegmentLabelCount } from '../util/'
+import { Transition } from '../../core/enums'
 
@@ -24,3 +25,3 @@ // default props
   fluidWidth: false,
-  dimensionUnit: "px",
+  dimensionUnit: 'px',
 
@@ -37,5 +38,5 @@ // segments to show in the speedometer
   // color strings
-  needleColor: "steelblue",
-  startColor: "#FF471A",
-  endColor: "#33CC33",
+  needleColor: 'steelblue',
+  startColor: '#FF471A',
+  endColor: '#33CC33',
   // custom segment colors; by default off
@@ -45,3 +46,4 @@ segmentColors: [],
   // needle transition type and duration
-  needleTransition: "easeQuadInOut",
+  // needleTransition: "easeQuadInOut",
+  needleTransition: Transition.easeQuadInOut,
   needleTransitionDuration: 500,
@@ -53,18 +55,19 @@ needleHeightRatio: 0.9,
   // text color (for both showing current value and segment values)
-  textColor: "#666",
+  textColor: '#666',
 
   // label format => https://github.com/d3/d3-format
   // by default ""; takes valid input for d3 format
-  valueFormat: "",
+  valueFormat: '',
 
   // value text string format; by default it just shows the value
   // takes es6 template string as input with a default ${value}
-  currentValueText: "${value}",
+  currentValueText: '${value}',
   // specifies the style of the placeholder for current value
   // change it some other format like "#{value}" and use it in current value text as => "Current Value: #{value}"
-  currentValuePlaceholderStyle: "${value}",
+  currentValuePlaceholderStyle: '${value}',
 
-  // font sizes
-  labelFontSize: "14px",
-  valueTextFontSize: "16px",
+  // font sizes (and other styles)
+  labelFontSize: '14px',
+  valueTextFontSize: '16px',
+  valueTextFontWeight: 'bold', // any valid font weight string
 }
@@ -139,5 +142,6 @@
 
-    // font sizes
+    // font sizes (and other styles)
     labelFontSize: PROPS.labelFontSize,
     valueTextFontSize: PROPS.valueTextFontSize,
+    valueTextFontWeight: PROPS.valueTextFontWeight,
   }
@@ -144,0 +148,0 @@

src/core/render/index.js

@@ -5,6 +5,6 @@ import {
   curveMonotoneX as d3CurveMonotoneX,
-} from "d3"
+} from 'd3'
 
-import isEmpty from "lodash-es/isEmpty"
-import isArray from "lodash-es/isArray"
+import isEmpty from 'lodash-es/isEmpty'
+import isArray from 'lodash-es/isArray'
 
@@ -17,4 +17,4 @@ import {
   sumArrayTill,
-} from "../util"
-import { getNeedleTransition } from "../util/get-needle-transition"
+} from '../util'
+import { getNeedleTransition } from '../util/get-needle-transition'
 import {
@@ -25,3 +25,3 @@ configureArc,
   configureScale,
-} from "../config/configure"
+} from '../config/configure'
 
@@ -39,3 +39,3 @@ export const update = ({ d3_refs, newValue, config }) => {
     .ease(getNeedleTransition(config.needleTransition))
-    .attr("transform", `rotate(${newAngle})`)
+    .attr('transform', `rotate(${newAngle})`)
 
@@ -72,9 +72,9 @@ d3_refs.current_value_text.text(formatCurrentValueText(newValue, config))
     d3Select(container)
-      .append("svg:svg")
-      .attr("class", "speedometer")
-      .attr("width", `${width}${config.dimensionUnit}`)
-      .attr("height", `${height}${config.dimensionUnit}`)
+      .append('svg:svg')
+      .attr('class', 'speedometer')
+      .attr('width', `${width}${config.dimensionUnit}`)
+      .attr('height', `${height}${config.dimensionUnit}`)
       // use inline styles so that width/height is not overridden
-      .style("width", `${width}${config.dimensionUnit}`)
-      .style("height", `${height}${config.dimensionUnit}`)
+      .style('width', `${width}${config.dimensionUnit}`)
+      .style('height', `${height}${config.dimensionUnit}`)
   )
@@ -87,14 +87,11 @@ }
 
-  let arcs = svg
-    .append("g")
-    .attr("class", "arc")
-    .attr("transform", centerTx)
+  let arcs = svg.append('g').attr('class', 'arc').attr('transform', centerTx)
 
   arcs
-    .selectAll("path")
+    .selectAll('path')
     .data(tickData)
     .enter()
-    .append("path")
-    .attr("class", "speedo-segment")
-    .attr("fill", (d, i) => {
+    .append('path')
+    .attr('class', 'speedo-segment')
+    .attr('fill', (d, i) => {
       // if custom segment colors is present just use it
@@ -107,6 +104,6 @@ if (!isEmpty(config.segmentColors) && config.segmentColors[i]) {
     })
-    .attr("d", arc)
+    .attr('d', arc)
 }
 
-function _renderLabels({ config, svg, centerTx, r }) {
+export function _renderLabels({ config, svg, centerTx, r }) {
   const ticks = configureTicks(config)
@@ -128,5 +125,3 @@ const tickData = configureTickData(config)
     throw new Error(
-      `Custom Segment Labels should be an array with length of ${
-        tickData.length
-      }`
+      `Custom Segment Labels should be an array with length of ${tickData.length}`
     )
@@ -152,12 +147,9 @@ }
   // normal label rendering
-  let lg = svg
-    .append("g")
-    .attr("class", "label")
-    .attr("transform", centerTx)
+  let lg = svg.append('g').attr('class', 'label').attr('transform', centerTx)
 
-  lg.selectAll("text")
+  lg.selectAll('text')
     .data(ticks)
     .enter()
-    .append("text")
-    .attr("transform", (d, i) => {
+    .append('text')
+    .attr('transform', (d, i) => {
       const ratio =
@@ -174,9 +166,9 @@ config.customSegmentStops.length === 0
     // add class for text label
-    .attr("class", "segment-value")
+    .attr('class', 'segment-value')
     // styling stuffs
-    .style("text-anchor", "middle")
-    .style("font-size", config.labelFontSize)
-    .style("font-weight", "bold")
+    .style('text-anchor', 'middle')
+    .style('font-size', config.labelFontSize)
+    .style('font-weight', 'bold')
     // .style("fill", "#666");
-    .style("fill", config.textColor)
+    .style('fill', config.textColor)
 }
@@ -226,31 +218,29 @@
 
-  let lg = svg
-    .append("g")
-    .attr("class", "label")
-    .attr("transform", centerTx)
+  let lg = svg.append('g').attr('class', 'label').attr('transform', centerTx)
 
-  lg.selectAll("text")
+  lg.selectAll('text')
     .data(customSegmentLabels)
     .enter()
-    .append("text")
-    .attr("transform", (d, i) => {
+    .append('text')
+    .attr('transform', (d, i) => {
       const newAngle = newAngles[i]
 
-      const outerText = `rotate(${newAngle}) translate(0, ${config.labelInset -
-        r})`
-      const innerText = `rotate(${newAngle}) translate(0, ${config.labelInset /
-        2 -
-        position})`
+      const outerText = `rotate(${newAngle}) translate(0, ${
+        config.labelInset - r
+      })`
+      const innerText = `rotate(${newAngle}) translate(0, ${
+        config.labelInset / 2 - position
+      })`
 
       // by default we will show "INSIDE"
-      return d.position === "OUTSIDE" ? outerText : innerText
+      return d.position === 'OUTSIDE' ? outerText : innerText
     })
-    .text((d) => d.text || "")
+    .text(d => d.text || '')
     // add class for text label
-    .attr("class", "segment-value")
+    .attr('class', 'segment-value')
     // styling stuffs
-    .style("text-anchor", "middle")
-    .style("font-size", (d) => d.fontSize || config.labelFontSize)
-    .style("font-weight", "bold")
-    .style("fill", (d) => d.color || config.textColor)
+    .style('text-anchor', 'middle')
+    .style('font-size', d => d.fontSize || config.labelFontSize)
+    .style('font-weight', 'bold')
+    .style('fill', d => d.color || config.textColor)
 
@@ -269,15 +259,15 @@ // depending on INSIDE/OUTSIDE config calculate the position/rotate/translate
     svg
-      .append("g")
-      .attr("transform", `translate(${translateX}, ${translateY})`)
-      .append("text")
+      .append('g')
+      .attr('transform', `translate(${translateX}, ${translateY})`)
+      .append('text')
       // add class for the text
-      .attr("class", "current-value")
-      .attr("text-anchor", "middle")
+      .attr('class', 'current-value')
+      .attr('text-anchor', 'middle')
       // position the text 23pt below
-      .attr("y", 23)
+      .attr('y', 23)
       // add text
       .text(config.currentValue)
-      .style("font-size", config.valueTextFontSize)
-      .style("font-weight", "bold")
-      .style("fill", config.textColor)
+      .style('font-size', config.valueTextFontSize)
+      .style('font-weight', config.valueTextFontWeight)
+      .style('fill', config.textColor)
   )
@@ -303,12 +293,12 @@ }
   let pg = svg
-    .append("g")
+    .append('g')
     .data([lineData])
-    .attr("class", "pointer")
-    .attr("transform", centerTx)
-    .style("fill", config.needleColor)
+    .attr('class', 'pointer')
+    .attr('transform', centerTx)
+    .style('fill', config.needleColor)
 
   return pg
-    .append("path")
-    .attr("d", pointerLine)
-    .attr("transform", `rotate(${config.minAngle})`)
+    .append('path')
+    .attr('d', pointerLine)
+    .attr('transform', `rotate(${config.minAngle})`)
 }

src/core/theme/index.js

 const theme = {
-  base: "dark",
+  base: 'dark',
 
-  appBg: "#413c69",
-  appContentBg: "#2a2744",
-  barBg: "#373359",
+  appBg: '#413c69',
+  appContentBg: '#2a2744',
+  barBg: '#373359',
 }
 
 export default theme

src/core/util/get-needle-transition.js

@@ -32,3 +32,5 @@ import {
   easeElastic as d3EaseElastic,
-} from "d3"
+} from 'd3'
+import { Transition } from '../enums'
+
 // takes a 'transition string' and returns a d3 transition method
@@ -38,122 +40,89 @@ // default is easeLinear
   switch (transition) {
-    // ease linear
-    case "easeLinear":
+    // easeLinear
+    case Transition.easeLinear:
       return d3EaseLinear
-      break
     // easeQuadIn as d3EaseQuadIn,
-    case "easeQuadIn":
+    case Transition.easeQuadIn:
       return d3EaseQuadIn
-      break
     // easeQuadOut as d3EaseQuadOut
-    case "easeQuadOut":
+    case Transition.easeQuadOut:
       return d3EaseQuadOut
-      break
     // easeQuadInOut as d3EaseQuadInOut
-    case "easeQuadInOut":
+    case Transition.easeQuadInOut:
       return d3EaseQuadInOut
-      break
     // easeCubicIn as d3EaseCubicIn
-    case "easeCubicIn":
+    case Transition.easeCubicIn:
       return d3EaseCubicIn
-      break
     // easeCubicOut as d3EaseCubicOut,
-    case "easeCubicOut":
+    case Transition.easeCubicOut:
       return d3EaseCubicOut
-      break
     // easeCubicInOut as d3EaseCubicInOut,
-    case "easeCubicInOut":
+    case Transition.easeCubicInOut:
       return d3EaseCubicInOut
-      break
     // easePolyIn as d3EasePolyIn,
-    case "easePolyIn":
+    case Transition.easePolyIn:
       return d3EasePolyIn
-      break
     // easePolyOut as d3EasePolyOut,
-    case "easePolyOut":
+    case Transition.easePolyOut:
       return d3EasePolyOut
-      break
     // easePolyInOut as d3EasePolyInOut,
-    case "easePolyInOut":
+    case Transition.easePolyInOut:
       return d3EasePolyInOut
-      break
     // easeSinIn as d3EaseSinIn,
-    case "easeSinIn":
+    case Transition.easeSinIn:
       return d3EaseSinIn
-      break
     // easeSinOut as d3EaseSinOut,
-    case "easeSinOut":
+    case Transition.easeSinOut:
       return d3EaseSinOut
-      break
     // easeSinInOut as d3EaseSinInOut,
-    case "easeSinInOut":
+    case Transition.easeSinInOut:
       return d3EaseSinInOut
-      break
     // easeExpIn as d3EaseExpIn,
-    case "easeExpIn":
+    case Transition.easeExpIn:
       return d3EaseExpIn
-      break
     // easeExpOut as d3EaseExpOut,
-    case "easeExpOut":
+    case Transition.easeExpOut:
       return d3EaseExpOut
-      break
     // easeExpInOut as d3EaseExpInOut,
-    case "easeExpInOut":
+    case Transition.easeExpInOut:
       return d3EaseExpInOut
-      break
     // easeCircleIn as d3EaseCircleIn,
-    case "easeCircleIn":
+    case Transition.easeCircleIn:
       return d3EaseCircleIn
-      break
     // easeCircleOut as d3EaseCircleOut,
-    case "easeCircleOut":
+    case Transition.easeCircleOut:
       return d3EaseCircleOut
-      break
     // easeCircleInOut as d3EaseCircleInOut,
-    case "easeCircleInOut":
+    case Transition.easeCircleInOut:
       return d3EaseCircleInOut
-      break
     // easeBounceIn as d3EaseBounceIn,
-    case "easeBounceIn":
+    case Transition.easeBounceIn:
       return d3EaseBounceIn
-      break
     // easeBounceOut as d3EaseBounceOut,
-    case "easeBounceOut":
+    case Transition.easeBounceOut:
       return d3EaseBounceOut
-      break
     // easeBounceInOut as d3EaseBounceInOut,
-    case "easeBounceInOut":
+    case Transition.easeBounceInOut:
       return d3EaseBounceInOut
-      break
     // easeBackIn as d3EaseBackIn,
-    case "easeBackIn":
+    case Transition.easeBackIn:
       return d3EaseBackIn
-      break
     // easeBackOut as d3EaseBackOut,
-    case "easeBackOut":
+    case Transition.easeBackOut:
       return d3EaseBackOut
-      break
     // easeBackInOut as d3EaseBackInOut,
-    case "easeBackInOut":
+    case Transition.easeBackInOut:
       return d3EaseBackInOut
-      break
     // easeElasticIn as d3EaseElasticIn,
-    case "easeElasticIn":
+    case Transition.easeElasticIn:
       return d3EaseElasticIn
-      break
     // easeElasticOut as d3EaseElasticOut,
-    case "easeElasticOut":
+    case Transition.easeElasticOut:
       return d3EaseElasticOut
-      break
     // easeElasticInOut as d3EaseElasticInOut,
-    case "easeElasticInOut":
+    case Transition.easeElasticInOut:
       return d3EaseElasticInOut
-      break
     // easeElastic as d3EaseElastic,
-    case "easeElastic":
+    case Transition.easeElastic:
       return d3EaseElastic
-      break
-    // ease elastic transition
-    case "easeElastic":
-      return d3EaseElastic
-      break
 
@@ -166,4 +135,3 @@ // if not a valid transition; throw a warning and return the default transition
       return d3EaseQuadInOut
-      break
   }
 }

src/core/util/index.js

@@ -1,12 +0,12 @@
-import _isNumber from "lodash-es/isNumber"
-import _sum from "lodash-es/sum"
-import isEmpty from "lodash-es/isEmpty"
-import isArray from "lodash-es/isArray"
-import _head from "lodash-es/head"
-import _last from "lodash-es/last"
-import _drop from "lodash-es/drop"
-import _times from "lodash-es/times"
-import _take from "lodash-es/take"
+import _isNumber from 'lodash-es/isNumber'
+import _sum from 'lodash-es/sum'
+import isEmpty from 'lodash-es/isEmpty'
+import isArray from 'lodash-es/isArray'
+import _head from 'lodash-es/head'
+import _last from 'lodash-es/last'
+import _drop from 'lodash-es/drop'
+import _times from 'lodash-es/times'
+import _take from 'lodash-es/take'
 
-import { scaleLinear as d3ScaleLinear } from "d3"
+import { scaleLinear as d3ScaleLinear } from 'd3'
 
@@ -88,5 +88,3 @@ // helper function to calculate array sum till specified index
 export function calculateScale({ min, max, segments }) {
-  return d3ScaleLinear()
-    .range([0, 1])
-    .domain([min, max])
+  return d3ScaleLinear().range([0, 1]).domain([min, max])
 }
@@ -107,3 +105,3 @@
     ticks = [min]
-    _times(segments, (i) => {
+    _times(segments, i => {
       ticks.push(min + (i + 1) * diff)
@@ -110,0 +108,0 @@ })

src/core/util/index.test.js

@@ -1,4 +0,9 @@
-import { calculateSegmentStops } from "./index"
+import * as d3 from 'd3'
 
-describe("calculate segment data", () => {
+import { calculateSegmentStops } from './index'
+import { getNeedleTransition } from './get-needle-transition'
+import { getConfig, DEFAULT_PROPS } from '../config/'
+import { _renderLabels } from '../render/'
+
+describe('calculate segment data', () => {
   const tickData = [0.33, 0.33, 0.33]
@@ -8,3 +13,3 @@ const min = 0
 
-  test("for empty segment stops", () => {
+  test('for empty segment stops', () => {
     expect(
@@ -19,3 +24,3 @@ calculateSegmentStops({
   })
-  test("for invalid segment stops", () => {
+  test('for invalid segment stops', () => {
     expect(
@@ -32,3 +37,3 @@ calculateSegmentStops({
   // test for error if min does not match
-  test("throw error for invalid min value as first", () => {
+  test('throw error for invalid min value as first', () => {
     expect(() =>
@@ -45,3 +50,3 @@ calculateSegmentStops({
   // test for error if max does not match
-  test("throw error for invalid max value as last", () => {
+  test('throw error for invalid max value as last', () => {
     expect(() =>
@@ -58,3 +63,3 @@ calculateSegmentStops({
   // test correctly massaged data
-  test("throw error for invalid max value as last", () => {
+  test('throw error for invalid max value as last', () => {
     expect(
@@ -71,3 +76,3 @@ calculateSegmentStops({
   // test massaged data for custom min/max values
-  test("confirm massaged data for custom min/max values", () => {
+  test('confirm massaged data for custom min/max values', () => {
     expect(
@@ -93,1 +98,117 @@ calculateSegmentStops({
 })
+
+describe('verify needle transitions', () => {
+  test('needle transitions', () => {
+    expect(d3.easeLinear).toEqual(getNeedleTransition('easeLinear'))
+    expect(d3.easeQuadIn).toEqual(getNeedleTransition('easeQuadIn'))
+    expect(d3.easeQuadOut).toEqual(getNeedleTransition('easeQuadOut'))
+    expect(d3.easeQuadInOut).toEqual(getNeedleTransition('easeQuadInOut'))
+    expect(d3.easeCubicIn).toEqual(getNeedleTransition('easeCubicIn'))
+    expect(d3.easeCubicOut).toEqual(getNeedleTransition('easeCubicOut'))
+    expect(d3.easeCubicInOut).toEqual(getNeedleTransition('easeCubicInOut'))
+    expect(d3.easePolyIn).toEqual(getNeedleTransition('easePolyIn'))
+    expect(d3.easePolyOut).toEqual(getNeedleTransition('easePolyOut'))
+    expect(d3.easePolyInOut).toEqual(getNeedleTransition('easePolyInOut'))
+    expect(d3.easeSinIn).toEqual(getNeedleTransition('easeSinIn'))
+    expect(d3.easeSinOut).toEqual(getNeedleTransition('easeSinOut'))
+    expect(d3.easeSinInOut).toEqual(getNeedleTransition('easeSinInOut'))
+    expect(d3.easeExpIn).toEqual(getNeedleTransition('easeExpIn'))
+    expect(d3.easeExpOut).toEqual(getNeedleTransition('easeExpOut'))
+    expect(d3.easeExpInOut).toEqual(getNeedleTransition('easeExpInOut'))
+    expect(d3.easeCircleIn).toEqual(getNeedleTransition('easeCircleIn'))
+    expect(d3.easeCircleOut).toEqual(getNeedleTransition('easeCircleOut'))
+    expect(d3.easeCircleInOut).toEqual(getNeedleTransition('easeCircleInOut'))
+    expect(d3.easeBounceIn).toEqual(getNeedleTransition('easeBounceIn'))
+    expect(d3.easeBounceOut).toEqual(getNeedleTransition('easeBounceOut'))
+    expect(d3.easeBounceInOut).toEqual(getNeedleTransition('easeBounceInOut'))
+    expect(d3.easeBackIn).toEqual(getNeedleTransition('easeBackIn'))
+    expect(d3.easeBackOut).toEqual(getNeedleTransition('easeBackOut'))
+    expect(d3.easeBackInOut).toEqual(getNeedleTransition('easeBackInOut'))
+    expect(d3.easeElasticIn).toEqual(getNeedleTransition('easeElasticIn'))
+    expect(d3.easeElasticOut).toEqual(getNeedleTransition('easeElasticOut'))
+    expect(d3.easeElasticInOut).toEqual(getNeedleTransition('easeElasticInOut'))
+    expect(d3.easeElastic).toEqual(getNeedleTransition('easeElastic'))
+  })
+})
+
+describe('verify configuration', () => {
+  const expected_config = {
+    ringInset: 20,
+    pointerWidth: 10,
+    pointerTailLength: 5,
+    minAngle: -90,
+    maxAngle: 90,
+    labelInset: 10,
+    width: 300,
+    height: 300,
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    dimensionUnit: 'px',
+    ringWidth: 60,
+    minValue: 0,
+    maxValue: 1000,
+    needleColor: 'steelblue',
+    majorTicks: 5,
+    customSegmentStops: [],
+    customSegmentLabels: [],
+    maxSegmentLabels: 5,
+    segmentColors: [],
+    needleTransition: 'easeQuadInOut',
+    needleTransitionDuration: 500,
+    needleHeightRatio: 0.9,
+    textColor: '#666',
+    currentValueText: '${value}',
+    currentValuePlaceholderStyle: '${value}',
+    labelFontSize: '14px',
+    valueTextFontSize: '16px',
+  }
+
+  test('check default config', () => {
+    const generated_config = getConfig({
+      PROPS: DEFAULT_PROPS,
+      parentWidth: 500,
+      parentHeight: 500,
+    })
+
+    expect(generated_config).toMatchObject(expected_config)
+  })
+
+  test('check config for fluidWidth: true', () => {
+    const PROPS = {
+      ...DEFAULT_PROPS,
+      fluidWidth: true,
+    }
+
+    const expected_fluid_width_config = {
+      ...expected_config,
+      width: 500,
+      height: 500,
+    }
+
+    const generated_config = getConfig({
+      PROPS,
+      parentWidth: 500,
+      parentHeight: 500,
+    })
+
+    expect(generated_config).toMatchObject(expected_fluid_width_config)
+  })
+
+  test("to throw error if invalid 'customSegmentLabels' config", () => {
+    const PROPS = {
+      ...DEFAULT_PROPS,
+      // invalid segment label config to simulate error
+      customSegmentLabels: ['porumai'],
+    }
+
+    const config = getConfig({
+      PROPS,
+      parentWidth: 500,
+      parentHeight: 500,
+    })
+
+    expect(() => {
+      _renderLabels({ config })
+    }).toThrow()
+  })
+})

src/index.d.ts

 declare module "svelte-speedometer" {
+  enum Transition {
+    easeLinear = "easeLinear",
+    easeQuadIn = "easeQuadIn",
+    easeQuadOut = "easeQuadOut",
+    easeQuadInOut = "easeQuadInOut",
+    easeCubicIn = "easeCubicIn",
+    easeCubicOut = "easeCubicOut",
+    easeCubicInOut = "easeCubicInOut",
+    easePolyIn = "easePolyIn",
+    easePolyOut = "easePolyOut",
+    easePolyInOut = "easePolyInOut",
+    easeSinIn = "easeSinIn",
+    easeSinOut = "easeSinOut",
+    easeSinInOut = "easeSinInOut",
+    easeExpIn = "easeExpIn",
+    easeExpOut = "easeExpOut",
+    easeExpInOut = "easeExpInOut",
+    easeCircleIn = "easeCircleIn",
+    easeCircleOut = "easeCircleOut",
+    easeCircleInOut = "easeCircleInOut",
+    easeBounceIn = "easeBounceIn",
+    easeBounceOut = "easeBounceOut",
+    easeBounceInOut = "easeBounceInOut",
+    easeBackIn = "easeBackIn",
+    easeBackOut = "easeBackOut",
+    easeBackInOut = "easeBackInOut",
+    easeElasticIn = "easeElasticIn",
+    easeElasticOut = "easeElasticOut",
+    easeElasticInOut = "easeElasticInOut",
+    easeElastic = "easeElastic",
+  }
+
   enum CustomSegmentLabelPosition {
@@ -59,3 +91,3 @@ Outside = "OUTSIDE",
   // named exports of all the types
-  export { Props, CustomSegmentLabel, CustomSegmentLabelPosition }
+  export { Props, CustomSegmentLabel, CustomSegmentLabelPosition, Transition }
 
@@ -62,0 +94,0 @@ interface ComponentOptions {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

448267

increased by2.58%

Number of package files

18

increased by5.88%

Lines of code

12688

increased by1.63%

Number of lines in readme file

287

increased by2.5%

No dependency changes