Apex Radial Bar

apexradialbar.js

// <div data-jc="apexradialbar__system.hdd__val:used;max:total;labelformat:(val, max) => val.filesize(2, 'GB', true) + ' / ' + max.filesize(2, 'GB')">HDD</div>
COMPONENT('apexradialbar', '', function(self, config){

	var chart, label, formatter2;
	var val2, max2;

	var converter = function(val, max) {
		val2 = val;
		max2 = max;
		return (val * 100) / max;
	};

	var formatter = function(val) {
		return formatter2 ? formatter2(val2 || val, max2 || val) : val;
	};

	self.make = function() {
		self.aclass('ui-apex-radialbar');
		label = self.html();
		self.empty().append('<div></div>');

		if (label) {
			options.plotOptions.radialBar.dataLabels.name.show = true;
			options.labels[0] = label;
		}

		if (config.labelformat)
			formatter2 = FN(config.labelformat);

		chart = new ApexCharts(self.element.find('div').get(0), options);
		chart.render();
	};

	self.configure = function(key, value, init) {
		switch (key) {
		}
	};

	self.setter = function(value) {
		if (!value)
			return;
		if (typeof value === 'object')
			chart.updateSeries([converter(value[config.val], value[config.max])]);
		else
			chart.updateSeries([value]);
	};

	var options = {
		chart: {
			type: 'radialBar',
		},
		plotOptions: {
			radialBar: {
				startAngle: -90,
				endAngle: 90,
				track: {
					background: "#e7e7e7",
					strokeWidth: '97%',
					margin: 5, // margin is in pixels
					shadow: {
						enabled: true,
						top: 2,
						left: 0,
						color: '#999',
						opacity: 1,
						blur: 2
					}
				},
				dataLabels: {
					name: {
						show: false
					},
					value: {
						offsetY: 15,
						fontSize: '22px',
						formatter: formatter
					}
				}
			}
		},
		fill: {
			type: 'gradient',
			gradient: {
				shade: 'light',
				shadeIntensity: 0.4,
				inverseColors: false,
				opacityFrom: 1,
				opacityTo: 1,
				stops: [0, 50, 53, 91]
			},
		},
		series: [0],
		labels: ['']
	}

});