JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
<div style="width:100%; height: 100px;" class="d3-progress-dashboard-budget"></div>

JavaScript

var objClass = {
  'divClassUsage' : 'd3-progress-dashboard-budget',
  'svgClassUsage': 'chartUsage',
  'divClassSpent': 'd3-progress-dashboard-spent',
  'svgClassSpent': 'chartSpent',
  'usageText' : 'usageText',
  'spentText': 'spentText',
  'budgetCostText': 'budgetCostText',
  'budgetConsmText': 'budgetConsmText',
  'progress1' : 'progress1',
  'progress2' : 'progress2',
  'progress3' : 'progress3',
  'valueText1': 'valueText1',
  'valueText2': 'valueText2',
  'valueText3': 'valueText3',
  'divWidth': $('.d3-progress-dashboard-budget').width(),
  'divHeight': $('.d3-progress-dashboard-budget').height()
};

var options = {
            className: '.'+objClass.divClassUsage,
            height: 45,
            width: $('.d3-progress-dashboard-budget').width(),
            progressStartWidth: 0,
            // progressEndWidth : 10,
            progressEndWidth: 100,
            progressText: 100,
            barColor: '#E8e8e8',
            progressColor: '#AFEEEE',
            animationDuration: 500
        };
        console.log(options.divWidth, "text")
        var cScale = d3.scaleLinear().range([0, options.width]).domain([0, 100]);
        var cScale1 = d3.scaleLinear().range([0, options.width/4.73]).domain([61, 80]);
        var cScale2 = d3.scaleLinear().range([0, options.width/5.6]).domain([81, 100]);

        function renderProgressBar(options) { 
            var progressSvg = d3.select(options.className)
                .append("svg")
                .attr("class", objClass.svgClassUsage)
                .attr("transform", "translate(0,0)")
                .attr("preserveAspectRatio", "xMinYMin meet")
                .attr("viewBox", "0 0 " + (objClass.divWidth) + " " + objClass.divHeight)
            // .attr("width", 500)
            // .attr("height", 100);
            let progress = progressSvg.append('g').attr("transform", "translate(10,10)");

            progress.append("rect")
                .attr("class", "progressBarUsage")
               ...