I'm trying to recreate this in VueJS, but I have issues importing D3 so VueJS as a module. I was suggested C3 but I can't see how C3 supports a gauge with needle.

My JavaScript module knowledge is limited, but I have tried these without any success (installed from NPM)

• import {d3} from 'd3/build';
• import {d3} from 'd3';
• import d3 from 'd3/build';
• import d3 from 'd3';

The source for the gauge with needle is

// data which need to be fetched

var name = " ";

var value = 840;

var gaugeMaxValue = 1680; 

// donn�es � calculer 
var percentValue = value / gaugeMaxValue; 

////////////////////////

var needleClient;



(function(){

var barWidth, chart, chartInset, degToRad, repaintGauge,
    height, margin, numSections, padRad, percToDeg, percToRad, 
    percent, radius, sectionIndx, svg, totalPercent, width,
    valueText, formatValue, k;

  percent = percentValue;

  numSections = 1;
  sectionPerc = 1 / numSections / 2;
  padRad = 0.025;
  chartInset = 10;

  // Orientation of gauge:
  totalPercent = .75;

  el = d3.select('.chart-gauge');

  margin = {
    top: 30,
    right: 30,
    bottom: 30,
    left: 30
  };

  width = el[0][0].offsetWidth - margin.left - margin.right;
  height = width;
  radius = Math.min(width, height) / 2;
  barWidth = 40 * width / 300;



  //Utility methods 

  percToDeg = function(perc) {
    return perc * 360;
  };

  percToRad = function(perc) {
    return degToRad(percToDeg(perc));
  };

  degToRad = function(deg) {
    return deg * Math.PI / 180;
  };

  // Create SVG element
  svg = el.append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom);

  // Add layer for the panel
  chart = svg.append('g').attr('transform', "translate(" + ((width) / 2 + margin.left) + ", " + ((height + margin.top) / 2) + ")");

  chart.append('path').attr('class', "arc chart-red");
  chart.append('path').attr('class', "arc chart-yellow");
  chart.append('path').attr('class', "arc chart-green");
  chart.append('path').attr('class', "arc chart-yellow_");
  chart.append('path').attr('class', "arc chart-red_");

  valueText = chart.append("chart")
  formatValue = d3.format('1%');

  arc5 = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth)
  arc4 = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth)
  arc3 = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth)
  arc2 = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth)
  arc1 = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth)

  repaintGauge = function () 
  {
    perc = 0.5;
    var next_start = totalPercent;
    arcStartRad = percToRad(next_start);
    arcEndRad = arcStartRad + percToRad(0.175);
    next_start += 0.175;


    arc1.startAngle(arcStartRad).endAngle(arcEndRad);

    arcStartRad = percToRad(next_start);
    arcEndRad = arcStartRad + percToRad(0.05);
    next_start += 0.05;

    arc2.startAngle(arcStartRad + padRad).endAngle(arcEndRad);

    arcStartRad = percToRad(next_start);
    arcEndRad = arcStartRad + percToRad(0.05);
    next_start += 0.05;

    arc3.startAngle(arcStartRad + padRad).endAngle(arcEndRad);
    arcStartRad = percToRad(next_start);
    arcEndRad = arcStartRad + percToRad(0.05);
    next_start += 0.05;

    arc4.startAngle(arcStartRad + padRad).endAngle(arcEndRad);
    arcStartRad = percToRad(next_start);
    arcEndRad = arcStartRad + percToRad(0.175);
    next_start += 0.175;

    arc5.startAngle(arcStartRad + padRad).endAngle(arcEndRad);


    chart.select(".chart-red").attr('d', arc1);
    chart.select(".chart-yellow").attr('d', arc2);
    chart.select(".chart-green").attr('d', arc3);
    chart.select(".chart-yellow_").attr('d', arc4);
    chart.select(".chart-red_").attr('d', arc5);
  }
/////////


    var Needle = (function() {

    //Helper function that returns the `d` value for moving the needle
    var recalcPointerPos = function(perc) {
      var centerX, centerY, leftX, leftY, rightX, rightY, thetaRad, topX, topY;
      thetaRad = percToRad(perc / 2);
      centerX = 0;
      centerY = 0;
      topX = centerX - this.len * Math.cos(thetaRad);
      topY = centerY - this.len * Math.sin(thetaRad);
      leftX = centerX - this.radius * Math.cos(thetaRad - Math.PI / 2);
      leftY = centerY - this.radius * Math.sin(thetaRad - Math.PI / 2);
      rightX = centerX - this.radius * Math.cos(thetaRad + Math.PI / 2);
      rightY = centerY - this.radius * Math.sin(thetaRad + Math.PI / 2);


        return "M " + leftX + " " + leftY + " L " + topX + " " + topY + " L " + rightX + " " + rightY;




    };

    function Needle(el) {
      this.el = el;
      this.len = width / 2.5;
      this.radius = this.len / 8;
    }

    Needle.prototype.render = function() {
      this.el.append('circle').attr('class', 'needle-center').attr('cx', 0).attr('cy', 0).attr('r', this.radius);




      return this.el.append('path').attr('class', 'needle').attr('id', 'client-needle').attr('d', recalcPointerPos.call(this, 0));


    };

    Needle.prototype.moveTo = function(perc) {
      var self,
          oldValue = this.perc || 0;

      this.perc = perc;
      self = this;

      // Reset pointer position
      this.el.transition().delay(100).ease('quad').duration(200).select('.needle').tween('reset-progress', function() {
        return function(percentOfPercent) {
          var progress = (1 - percentOfPercent) * oldValue;




          repaintGauge(progress);
          return d3.select(this).attr('d', recalcPointerPos.call(self, progress));
        };
      });

      this.el.transition().delay(300).ease('bounce').duration(1500).select('.needle').tween('progress', function() {
        return function(percentOfPercent) {
          var progress = percentOfPercent * perc;

          repaintGauge(progress);

          var thetaRad = percToRad(progress / 2);
          var textX = - (self.len + 45) * Math.cos(thetaRad);
          var textY = - (self.len + 45) * Math.sin(thetaRad);

          valueText.text(formatValue(progress))
            .attr('transform', "translate("+textX+","+textY+")")

          return d3.select(this).attr('d', recalcPointerPos.call(self, progress));
        };
      });

    };


    return Needle;

  })();



  needle = new Needle(chart);
  needle.render();
  needle.moveTo(percent);

  setTimeout(displayValue, 1350);



})();