Cannot read property 'Inside' of undefined

[fmsthird]

react-d3-speedometer version: 0.12.0
react version: 16.13.1
typescript: 3.7.2

Question

I was trying to implement react-d3-speedometer using typescript.
When I tried to apply position in customSegmentLabels , I get an error Type '"OUTSIDE"' is not assignable to type 'CustomSegmentLabelPosition'. So I added it to imports but when I assigned it to position like this:
position: CustomSegmentLabelPosition.Inside, then the error Cannot read property 'Inside' of undefined.

Sample Codesandbox
Sample

[palerdot]

@fmsthird

Can your try casting the value? like

          {
            text: "Very Good",
            position: "INSIDE" as CustomSegmentLabelPosition,
            color: "#555"
          }

I agree this should work the way you tried. But for some reason, string enum is not available during run time. I will dig into this when I have time and update here.

Meanwhile, please try casting the string ("INSIDE" as CustomSegmentLabelPosition,) to unblock yourself for now.

Sample sandbox for casting reference

[fmsthird]

Hi @palerdot

That works! Thank you 👍
Also, it would be nice in the next update if the text will curve alongside with the bar. 🙂

[palerdot]

Hi,

I'm reopening this issue to keep track of this behavior. The right behavior is to do CustomSegmentLabelPosition.Inside / CustomSegmentLabelPosition.Outside ...

[palerdot]

Also regarding

Also, it would be nice in the next update if the text will curve alongside with the bar.

I'm tracking this here - #82

[palerdot]

This issue is fixed in v0.13.0

There is proper Typescript enum support for CustomLabelSegmentPosition and Transition. This helper type/Object works both for Typescript and JS.

Typescript Sandbox Example
JS Sandbox Example

[Mmaheshbabu123]

./node_modules/we/lib/helpers.js:6:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/we/bin/we
./pages/SpedoMeter.jsx

https://nextjs.org/docs/messages/module-not-found