JSFiddle - React, Tailwind, and code Playground

by NishitDhakar

HTML

<br/>
<div class="bulletDiv">
</div>

JavaScript

(function($){
	
	$.fn.bullet = function(params) { //Create the bullet plugin.
		
		params = $.extend({
							theWidth: this.width(),
							minValue: 0,
							maxValue: 100,
							featuredMeasure: 50,
							numberTicks: 0 //Specify the number of ticks between the first and last - unused at the moment.  (A) - add.
							}, params);		
		
		//Set values
		var scaleLength = params.maxValue - params.minValue;
		var chartWidth = this.width()-30; // 15px padding * 2 (for each side of the chart)
		var chartHeight = this.height();
		var eachUnit = chartWidth/scaleLength;
		var featuredLength = eachUnit * params.featuredMeasure;
		var comp1pos = eachUnit * params.compMeasure1;
		var qual1pos = eachUnit * params.qualScale1;
		
		//Set context
		var context = this[0].getContext("2d"); //Get the drawing context.
		
		//Drawing routine
		//Note to self:  Decimal values are percentages of the canvas element as defined in sketches.
		
		//Draw chart background (half of the canvas height)
		context.fillStyle = "#ababab";
		context.fillRect(15,0,chartWidth,chartHeight * 0.50);
		
		//Draw qualitative scale (half of the canvas height)
		if (params.qualScale1) {
			context.fillStyle = "#cdcdcd";
			context.fillRect(15+qual1pos, 0,chartWidth - qual1pos,chartHeight*0.50);
		}
		
		//Comparative measure 1.  Only show if the parameter is provided.
		if (params.compMeasure1) {
			context.fillStyle = "Black";
			context.fillRect(15+comp1pos-1.5,chartHeight * 0.08,3,chartHeight*0.34); //1.5 is half the width of the featured marker.
		}
		
		//Featured measure - appears in front of the comparative measure, according to the specification.
		context.fillStyle="Black";
		context.fillRect(15,chartHeight * 0.16,featuredLength,chartHeight * 0.18);
		
		//Draw ticks and labels.  Will need to calculate how they appear on the chart and add some padding (15-20px on either side).
		context.fillStyle = "Gray";
		context.fillRect(15,chartHeight * 0.5, 1, chartHeight *...