How does ES6/TypeScript import work?
I'm trying to import this Gauge into a Vue component, but I'm getting the error TypeError: _gauge2.default is not a constructor
. So far I think it's because I'm doing something wrong with the import.
ChartJS works in a similar way, the difference though is that ChartJS is a NPM package which Gauge.js isn't. Could this be something that conflicts?
<template>
<canvas></canvas>
</template>
<script>
import Gauge from './gauge.js';
export default {
props: {
max: {
type: Number,
default: 100
},
value: {
type: Number,
default: 50,
twoWay: true,
required: true
}
},
data() {
return {
gauge: null
}
},
computed: {
options() {
return {
lines: 12, // The number of lines to draw
angle: 0.15, // The length of each line
lineWidth: 0.44, // The line thickness
pointer: {
length: 0.9, // The radius of the inner circle
strokeWidth: 0.035, // The rotation offset
color: '#000000' // Fill color
},
limitMax: 'false', // If true, the pointer will not go past the end of the gauge
colorStart: '#6FADCF', // Colors
colorStop: '#8FC0DA', // just experiment with them
strokeColor: '#E0E0E0', // to see which ones work best for you
generateGradient: true
};
}
},
ready() {
this.gauge = new Gauge(this.$el).setOptions(this.options);
this.gauge.maxValue = this.max;
this.gauge.animationSpeed = 32;
gauge.set(this.value);
}
}
</script>
<style lang="scss">
</style>