demos/high-low-bands.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>High/Low Bands</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="../dist/uPlot.min.css">
	</head>
	<body>
		<script src="../dist/uPlot.iife.js"></script>
		<script>
			// low,high
			let temps = [
				[14.2,14,13.9,13.8,13.7,13.5,13.4,13.3,13.2,13.1,13.1,13,12.9,12.8,12.8,12.7,12.7,12.7,12.6,12.6,12.6,12.7,12.7,12.7,12.8,12.8,12.9,13,13.1,13.2,13.3,13.5,13.7,13.8,14,14.2,14.4,14.7,14.9,15.1,15.4,15.7,15.9,16.2,16.5,16.8,17.1,17.5,17.8,18.1,18.4,18.8,19.1,19.4,19.8,20.1,20.4,20.8,21.1,21.4,21.7,22.1,22.4,22.7,23,23.4,23.7,24,24.3,24.6,24.9,25.2,25.5,25.9,26.2,26.5,26.8,27.1,27.4,27.7,28.1,28.4,28.7,29,29.4,29.7,30.1,30.4,30.8,31.1,31.5,31.9,32.2,32.6,33,33.4,33.8,34.2,34.5,34.9,35.3,35.7,36.1,36.5,36.9,37.3,37.7,38,38.4,38.8,39.2,39.5,39.9,40.2,40.6,40.9,41.2,41.6,41.9,42.2,42.5,42.8,43.1,43.4,43.7,44,44.3,44.6,44.9,45.1,45.4,45.7,46,46.3,46.5,46.8,47.1,47.4,47.7,48.1,48.4,48.7,49,49.4,49.7,50.1,50.5,50.8,51.2,51.6,52,52.4,52.8,53.2,53.7,54.1,54.5,54.9,55.4,55.8,56.2,56.6,57.1,57.5,57.9,58.3,58.7,59,59.4,59.8,60.1,60.4,60.7,61,61.3,61.5,61.8,62,62.2,62.4,62.5,62.7,62.8,62.9,63,63,63.1,63.1,63.1,63.1,63.1,63.1,63,63,62.9,62.9,62.8,62.7,62.7,62.6,62.5,62.4,62.3,62.3,62.2,62.1,62,62,61.9,61.9,61.8,61.8,61.7,61.7,61.7,61.6,61.6,61.6,61.6,61.6,61.6,61.6,61.6,61.6,61.5,61.5,61.5,61.5,61.4,61.4,61.3,61.2,61.1,61,60.9,60.7,60.6,60.4,60.2,60,59.8,59.5,59.2,58.9,58.6,58.3,57.9,57.6,57.2,56.8,56.4,55.9,55.5,55,54.5,54.1,53.6,53.1,52.6,52.1,51.6,51.1,50.6,50.1,49.6,49.1,48.6,48.2,47.7,47.2,46.8,46.4,46,45.6,45.2,44.8,44.4,44.1,43.7,43.4,43.1,42.8,42.5,42.2,42,41.7,41.5,41.2,41,40.7,40.5,40.3,40,39.8,39.6,39.3,39.1,38.8,38.5,38.3,38,37.7,37.4,37,36.7,36.4,36,35.6,35.2,34.8,34.4,34,33.5,33.1,32.6,32.1,31.7,31.2,30.7,30.2,29.6,29.1,28.6,28.1,27.5,27,26.5,26,25.5,25,24.5,24,23.5,23,22.5,22.1,21.6,21.2,20.8,20.4,20,19.6,19.3,18.9,18.6,18.3,18,17.7,17.4,17.1,16.9,16.6,16.4,16.2,16,15.8,15.6,15.4,15.2,15,14.9,14.7,14.6,14.4,14.3],
				[29.4,29.3,29.2,29.1,29.1,29,28.9,28.9,28.8,28.7,28.7,28.6,28.6,28.6,28.5,28.5,28.5,28.5,28.5,28.5,28.5,28.5,28.6,28.6,28.7,28.7,28.8,28.9,29,29.2,29.3,29.4,29.6,29.8,30,30.2,30.4,30.7,30.9,31.2,31.5,31.8,32.1,32.4,32.7,33.1,33.4,33.8,34.1,34.5,34.9,35.3,35.7,36,36.4,36.8,37.2,37.6,38,38.4,38.9,39.3,39.7,40.1,40.5,40.8,41.2,41.6,42,42.4,42.8,43.2,43.6,43.9,44.3,44.7,45.1,45.5,45.8,46.2,46.6,47,47.4,47.8,48.1,48.5,48.9,49.3,49.7,50.1,50.6,51,51.4,51.8,52.3,52.7,53.1,53.6,54,54.5,54.9,55.4,55.8,56.3,56.7,57.2,57.6,58.1,58.5,59,59.4,59.8,60.3,60.7,61.1,61.5,61.9,62.3,62.7,63.1,63.5,63.8,64.2,64.5,64.9,65.2,65.5,65.9,66.2,66.5,66.8,67.1,67.4,67.7,68,68.3,68.6,68.8,69.1,69.4,69.7,70,70.3,70.6,70.9,71.2,71.5,71.8,72.1,72.4,72.7,73.1,73.4,73.7,74.1,74.4,74.7,75.1,75.4,75.8,76.1,76.5,76.8,77.2,77.5,77.8,78.2,78.5,78.8,79.1,79.4,79.7,80,80.3,80.5,80.8,81,81.2,81.4,81.6,81.8,81.9,82,82.2,82.3,82.4,82.4,82.5,82.5,82.5,82.6,82.6,82.5,82.5,82.5,82.4,82.4,82.3,82.3,82.2,82.1,82,82,81.9,81.8,81.7,81.6,81.5,81.5,81.4,81.3,81.3,81.2,81.1,81.1,81,81,80.9,80.9,80.8,80.8,80.8,80.7,80.7,80.6,80.6,80.6,80.5,80.5,80.4,80.3,80.3,80.2,80.1,80,79.9,79.7,79.6,79.4,79.2,79.1,78.8,78.6,78.4,78.1,77.9,77.6,77.3,76.9,76.6,76.2,75.9,75.5,75.1,74.7,74.3,73.8,73.4,72.9,72.5,72,71.6,71.1,70.6,70.2,69.7,69.2,68.8,68.3,67.8,67.4,66.9,66.5,66.1,65.6,65.2,64.8,64.4,64,63.6,63.2,62.9,62.5,62.1,61.8,61.4,61.1,60.7,60.4,60,59.7,59.4,59,58.7,58.3,57.9,57.6,57.2,56.8,56.4,56,55.6,55.2,54.7,54.3,53.8,53.4,52.9,52.4,51.9,51.4,50.8,50.3,49.7,49.2,48.6,48,47.4,46.8,46.2,45.6,45,44.4,43.8,43.2,42.6,42,41.4,40.9,40.3,39.7,39.2,38.6,38.1,37.6,37.1,36.6,36.1,35.7,35.3,34.9,34.5,34.1,33.7,33.4,33,32.7,32.4,32.2,31.9,31.7,31.4,31.2,31,30.8,30.7,30.5,30.3,30.2,30.1,29.9,29.8,29.7,29.6,29.5],
			];

			let avgs = temps[0].map((low, i) => +((low + temps[1][i]) / 2).toFixed(2));

			temps.push(avgs);

			temps[0].splice(50, 10, ...Array(10).fill(null));
			temps[1].splice(50, 10, ...Array(10).fill(null));

			temps[0].splice(100, 10, ...Array(10).fill(null));
			temps[1].splice(200, 10, ...Array(10).fill(null));
			temps[2].splice(300, 10, ...Array(10).fill(null));

			temps[0].splice(364, 1, null);
			temps[1].splice(364, 1, null);
			temps[2].splice(364, 1, 38);

			let d = Date.UTC(2010,0,1)/1000;
			let num = 365;
			let ts = [];

			for (let i = 0; i < 365; i++, d += 3600 * 24)
				ts.push(d);

			temps.unshift(ts);

			let data = temps;

			function fmtUSD(val, dec) {
				return "$" + val.toFixed(dec).replace(/\d(?=(\d{3})+(?:\.|$))/g, '$&,');
			}

			let fmtTemp = (u, v, sidx, didx) => (
				didx == null ? '--' :
				v    == null ?   '' :
				               v + "°F"
			);

			const opts = {
				width: 1920,
				height: 600,
				title: "Temps",
				tzDate: ts => uPlot.tzDate(new Date(ts * 1e3), 'Etc/UTC'),
				scales: {
					x: {
					//	dir: -1,
					//	ori: 1,
					//	range: [1293656785, 1293753600],
					},
					y: {
					//	dir: -1,
					//	ori: 0,
					},
				},
				series: [
					{},
					{
						label: "Low",
						stroke: "green",
					//	fill: "rgba(0, 0, 0, .07)",
						value: fmtTemp,
						width: 1,
					},
					{
						label: "High",
						stroke: "red",
						value: fmtTemp,
						width: 1,
					},
					{
						label: "Avg",
						stroke: "blue",
						dash: [10, 10],
						width: 2,
						value: fmtTemp,
					},
				],
				bands: [
					{
						series: [2,3],
						fill: "rgba(255,0,0,0.1)",
					},
					{
						series: [1,3],
						fill: "rgba(0,255,0,0.1)",
						dir: 1
					}
				],
				axes: [
					{
					//	side: 3
					},
					{
					//	side: 2,
						values: (u, vals) => vals.map(v => v + "°F")
					}
				]
			};

			let u = new uPlot(opts, data, document.body);


			const { linear, spline, stepped, bars } = uPlot.paths;

			let data2 = [
				[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100],
				[109, 117, 122, 104, 105, 117, 119, 121, 117, 121, 122, 129, 119, 113, 113, 121, 108, 108, 100, 103, 113, 110, 107, 105, 99, 93, 87, 83, 91, 85, 81, 69, 76, 61, 63, 74, 76, 68, 55, 61, 48, 39, 54, 44, 37, 30, 22, 33, 29, 21, 22, 43, 47, 33, 47, 28, 29, 31, 32, 35, 37, 25, -5, -14, -7, -14, -7, -18, -18, -18, -16, -41, -22, -30, -27, -30, -47, -49, -47, -42, -55, -34, -27, -22, -23, -34, -23, -32, -36, -47, -33, -32, -18, -23, -21, -33, -39, -21, -18, -27, -5],
			];

			data2.push(data2[1].map(v => 100 + Math.round(v + Math.random() * 100)));
			data2.push(data2[2].map(v => 100 + Math.round(v + Math.random() * 100)));
			data2.push(data2[3].map(v => 100 + Math.round(v + Math.random() * 100)));

			data2[1].splice(22, 4, null, null, null, null);

			const _stepBefore = stepped({align: -1});
			const _stepAfter  = stepped({align:  1});
			const _spline     = spline();

			const opts2 = {
				width: 1920,
				height: 600,
				title: "Differing Paths",
				scales: {
					x: {
						time: false,
					},
				},
				series: [
					{},
					{
						label:  "linear",
						stroke: "green",
						fill:   "rgba(0, 255, 0, 0.1)",
					},
					{
						label:  "stepBefore",
						stroke: "magenta",
						fill:   "rgb(255, 0, 255, 0.05)",
						paths:  _stepBefore,
					},
					{
						label:  "spline",
						stroke: "blue",
						fill:   "rgba(0, 0, 255, 0.05)",
						paths:  _spline,
					},
					{
						label:  "stepAfter",
						stroke: "red",
						fill:   "rgba(255, 0, 0, 0.05)",
						paths:  _stepAfter,

						dash: [5, 5],
					},
				],
				bands: [
					{
						series: [4,3],
					//	fill:   "rgba(255,0,0,0.1)",
					},
					{
						series: [3,2],
					//	fill:   "rgba(0,255,0,0.1)",
					},
					{
						series: [2,1],
					//	fill:   "rgba(0,255,0,0.1)",
					},
				],
			};

			let u2 = new uPlot(opts2, data2, document.body);


			// generate bar builder with 60% bar (40% gap) & 100px max bar width
			const _bars60_100 = bars({
				size: [0.6, 100],
				radius: (u, seriesIdx) => {
					// only round top of top series
					return seriesIdx == u.series.length - 1 ? [0.3, 0] : [0, 0];
				},
			});

			const opts3 = {
				width: 1920,
				height: 600,
				title: "Bars",
				scales: {
					x: {
						time: false,
					},
				},
				series: [
					{},
					{
						label:  "bars 1",
						stroke: "green",
						width:  1,
						fill:   "rgba(0, 255, 0, 0.3)",
						paths:  _bars60_100,
						points: {show: false},
					},
					{
						label:  "bars 2",
						stroke: "magenta",
						width:  1,
						fill:   "rgb(255, 0, 255, 0.3)",
						paths:  _bars60_100,
						points: {show: false},
					},
					{
						label:  "bars 3",
						stroke: "blue",
						width:  1,
						fill:   "rgba(0, 0, 255, 0.3)",
						paths:  _bars60_100,
						points: {show: false},
					},
					{
						label:  "bars 4",
						stroke: "red",
						width:  1,
						fill:   "rgba(255, 0, 0, 0.3)",
						paths:  _bars60_100,
						points: {show: false},
					},
				],
				bands: [
					{
						series: [4,3],
					//	fill:   "rgba(255,0,0,0.1)",
					},
					{
						series: [3,2],
					//	fill:   "rgba(0,255,0,0.1)",
					},
					{
						series: [2,1],
					//	fill:   "rgba(0,255,0,0.1)",
					},
				],
			};

			let u3 = new uPlot(opts3, data2, document.body);


			let data4 = [
				[0,1,2,3,4,5,6,7,8,9],
				[5,4,3,2,1,0,-1,-2,-3,-4],
				[-5,-5,-5,-5,-5,-5,-5,-5,-5,-5],
			];

			const opts4 = {
				width: 1920,
				height: 600,
				scales: {
					x: {
						time: false,
					//	dir: -1,
					//	ori: 1,
					},
					y: {
					//	dir: -1,
					//	ori: 0,
					},
				},
				series: [
					{},
					{
						label: "High",
						stroke: "red",
						fill: "rgba(255, 0, 0, .07)",
					//	fillTo: -1000,
					},
					{
						label: "Low",
						stroke: "blue",
					},
				],
				bands: [
					{
						series: [1,2],
					},
				],
				axes: [
					{
					//	side: 3
					},
					{
					//	side: 2,
					}
				]
			};

			let u4 = new uPlot(opts4, data4, document.body);


			let data5 = [
				[0,1,2,3],
				[10,0,10,0],
				[0,10,0,10],
			];

			const opts5 = {
				width: 1920,
				height: 600,
				scales: {
					x: {
						time: false,
					//	dir: -1,
					//	ori: 1,
					},
					y: {
					//	dir: -1,
					//	ori: 0,
					},
				},
				series: [
					{},
					{
						label: "High",
						stroke: "red",
						fill: "rgba(255, 0, 0, .07)",
					//	fillTo: -1000,
					},
					{
						label: "Low",
						stroke: "blue",
					},
				],
				bands: [
					{
						series: [1,2],
					},
				],
				axes: [
					{
					//	side: 3
					},
					{
					//	side: 2,
					}
				]
			};

			let u5 = new uPlot(opts5, data5, document.body);

			let data7 = [
				[1630661268,1630661858,1630662428,1630662488,1630662538,1630662588,1630662638,1630662698,1630662758,1630662808,1630662868,1630662928,1630662988,1630663038,1630663098,1630663158,1630663218,1630663278,1630663328,1630663388,1630663438,1630663498,1630663558,1630663618,1630663678,1630663728,1630663788,1630663838,1630663898,1630663958,1630664018,1630664078,1630664138,1630664188,1630664248,1630664308,1630664368,1630664418,1630664478,1630664538,1630664598,1630664658,1630664718,1630664778,1630664838,1630664898,1630664958,1630665018,1630665078,1630665138,1630665198,1630665258,1630665318,1630665378,1630665438,1630665488,1630665548,1630665608,1630665668,1630665728,1630665788,1630665848,1630665908,1630665968,1630666018,1630666078,1630666138,1630666198,1630666208,1630666218,1630666228,1630666238,1630666248,1630666258,1630666268,1630666278,1630666288,1630666298,1630666308,1630666318,1630666328,1630666338,1630666348],
				[60,62,61,63,63,63,63,63,63,63,62,62,62,62,63,62,62,62,62,62,62,62,62,62,62,62,62,62,62,62,63,62,62,62,63,62,62,63,63,63,63,62,62,62,63,62,62,63,62,63,63,63,63,62,63,62,62,63,63,62,62,62,61,61,61,61,62,62,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],
				[63,65,64,64,64,64,64,64,64,64,63,63,63,63,64,63,63,63,63,63,63,64,63,63,63,63,63,63,63,63,63,63,64,63,63,64,63,63,64,63,64,64,63,64,64,64,64,64,64,64,64,64,64,64,64,64,64,64,63,63,62,63,63,63,62,63,63,63,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],
				[61.38,62.94,63.36,63.5,63.6,63.4,63.8,63.16,63.5,63.8,62.66,62.83,62.83,62.6,63.16,62.66,62.33,62.5,62.2,62.5,62.6,62.83,62.66,62.5,62.66,62.8,62.66,62.8,62.66,62.66,63,62.66,63,62.8,63,63,62.66,63,63.5,63,63.33,63,62.83,63.16,63.16,63,63.33,63.33,63.16,63.5,63.5,63.16,63.33,63.16,63.66,63,63,63.33,63,62.83,62,62.16,62.16,61.83,61.8,62,62.33,62.16,62,61,62,61,63,62,61,63,62,60,62,62,62,62,62]
			];

			const opts7 = {
				width: 1920,
				height: 600,
				title: "Temps",
				scales: {
					x: {
					//	dir: -1,
					//	ori: 1,
					},
					y: {
					//	dir: -1,
					//	ori: 0,
					},
				},
				series: [
					{},
					{
						label: "Low",
						stroke: "green",
					//	fill: "rgba(0, 0, 0, .07)",
						value: fmtTemp,
						width: 1,
					},
					{
						label: "High",
						stroke: "red",
						value: fmtTemp,
						width: 1,
					},
					{
						label: "Avg",
						stroke: "blue",
						dash: [10, 10],
						width: 2,
						value: fmtTemp,
					},
				],
				bands: [
					{
						series: [2,3],
						fill: "rgba(255,0,0,0.1)",
					},
					{
						series: [3,1],
						fill: "rgba(0,255,0,0.1)",
					}
				],
				axes: [
					{
					//	side: 3
					},
					{
					//	side: 2,
						values: (u, vals) => vals.map(v => v + "°F")
					}
				]
			};

			let u7 = new uPlot(opts7, data7, document.body);


			let data9 = [
				[1630661268,1630661858,1630662428],
				[null,null,null],
				[null,null,null],
				[61.38,62.94,63.36]
			];

			const opts9 = {
				width: 1920,
				height: 600,
				title: "Temps",
				scales: {
					x: {
					//	dir: -1,
					//	ori: 1,
					},
					y: {
					//	dir: -1,
					//	ori: 0,
					},
				},
				series: [
					{},
					{
						label: "Low",
						stroke: "green",
					//	fill: "rgba(0, 0, 0, .07)",
						value: fmtTemp,
						width: 1,
					},
					{
						label: "High",
						stroke: "red",
						value: fmtTemp,
						width: 1,
					},
					{
						label: "Avg",
						stroke: "blue",
						dash: [10, 10],
						width: 2,
						value: fmtTemp,
					},
				],
				bands: [
					{
						series: [2,3],
						fill: "rgba(255,0,0,0.1)",
					},
					{
						series: [3,1],
						fill: "rgba(0,255,0,0.1)",
					}
				],
				axes: [
					{
					//	side: 3
					},
					{
					//	side: 2,
						values: (u, vals) => vals.map(v => v + "°F")
					}
				]
			};

			let u9 = new uPlot(opts9, data9, document.body);


			function makeChart(data, paths) {
				const opts = {
					title: "Inverted bands",
					width: 1920,
					height: 600,
					scales: {
						x: {
							time: false,
						},
					//	y: {
					//		dir: -1
					//	}
					},
					series: [
						{},
						{
							label: "-2",
							stroke: "red",
							fill: "#ff000080",
							paths,
						},
						{
							label: "-1",
							stroke: "orange",
							fill: "#ffa50080",
							paths,
						},
						{
							label: "1",
							stroke: "blue",
							fill: "#0000ff80",
							paths,
						},
						{
							label: "2",
							stroke: "green",
							fill: "#00800080",
							paths,
						},
					],
					bands: [
						{
							series: [4,3],
							fill: "#00800080",
						},
						{
							series: [1,2],
							fill: "#ff000080",
							dir: 1, // fill towards yMax
						},
					],
				};

				let u = new uPlot(opts, data, document.body);
			}

			let data11 = [
				[0, 1, 2, 3, 4, 5],
				Array(6).fill(-2),
				Array(6).fill(-1),
				Array(6).fill(1),
				Array(6).fill(2),
			];

			let linePaths = uPlot.paths.linear();
			makeChart(data11, linePaths);

			let barPaths = uPlot.paths.bars({
				radius: (u, seriesIdx) => {
					// only round top of top series
					return seriesIdx == 1 || seriesIdx == 4 ? [0.3, 0] : [0, 0];
				},
			});
			makeChart(data11, barPaths);


			{
				const _ = null;

				let data = [
					[0,6,12,18,24,30,36,42,48,54,60,66,72,78,84,90,96,102,108,114,120,126,132,138,144,150,156,162,168,174,180,186,192,198,204,210,216,222,228,234,240,246,252,258,264,270,276,282,288,294,300,306,312,318,324,330,336,342,348,354,360,366,372,378,384,390,396,402,408,414,420,426,432,438,444,450,456,462,468,474,480,486,492,498,504,510,516,522,528,534,540,546,552,558,564,570,576,582,588,594,600,606,612,618,624,630,636,642,648,654,660,666,672,678,684,690,696,702,708,714,720,726,732,738,744,750,756,762,768,774,780,786,792,798,804,810,816,822,828,834,840,846,852,858,864,870,876,882,888,894,900,906,912,918,924,930,936,942,948,954,960,966,972,978,984,990,996,1002,1008,1014,1020,1026,1032,1038,1044,1050,1056,1062,1068,1074,1080,1086,1092,1098,1104,1110,1116,1122,1128,1134,1140,1146,1152,1158,1164,1170,1176,1182,1188,1194,1200,1206,1212,1218,1224,1230,1236,1242,1248,1254,1260,1266,1272,1278,1284,1290,1296,1302,1308,1314,1320,1326,1332,1338,1344,1350,1356,1362,1368,1374,1380,1386,1392,1398,1404,1410,1416,1422,1428,1434,1440,1446,1452,1458,1464,1470,1476,1482,1488,1494,1500,1506,1512,1518,1524,1530,1536,1542,1548,1554,1560,1566,1572,1578,1584,1590,1596,1602,1608,1614,1620,1626,1632,1638,1644,1650,1656,1662,1668,1674,1680,1686,1692,1698,1704,1710,1716,1722,1728,1734,1740,1746,1752,1758,1764,1770,1776,1782,1788,1794,1800,1806,1812,1818,1824,1830,1836,1842,1848,1854,1860,1866,1872,1878,1884,1890,1896,1902,1908,1914,1920,1926,1932,1938,1944,1950,1956,1962,1968,1974,1980,1986,1992,1998,2004,2010,2016,2022,2028,2034,2040,2046,2052,2058,2064,2070,2076,2082,2088,2094,2100,2106,2112,2118,2124,2130,2136,2142,2148,2154,2160,2166,2172],
					[_,_,_,1,_,_,_,_,1,_,1,_,_,1,_,_,_,_,1,_,_,_,_,1,1,_,_,_,1,_,_,_,1,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,2,_,_,1,_,1,_,_,_,_,1,_,_,_,_,3,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,1,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,1,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,0,1,_,_,_,0,1,1,_,_,2,3,_,_,1,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,1,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,2,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,1,_,_,_,1,_,_,_,_,1,1,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,1,_,_,1,_,_,_,_,1,_,_,_,_],
					[_,_,_,1,_,_,_,_,1,_,1,_,_,1,_,_,_,_,1,_,_,_,_,1,1,_,_,_,1,_,_,_,1,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,2,_,_,1,_,1,_,_,_,_,1,_,_,_,_,3,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,1,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,1,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,4,1,_,_,_,2,1,3,_,_,6,3,_,_,1,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,1,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,2,_,_,_,_,1,_,_,_,_,1,_,_,_,_,2,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,1,_,_,_,1,_,_,_,_,1,2,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,1,_,_,1,_,_,_,_,1,_,_,_,_],
				];//.map(vals => vals.slice(0, 25));

				const paths = uPlot.paths.bars({
					align: 0,
					size: [0.6, 200],
				});

				const opts = {
					width: 400,
					height: 300,
					title: 'Unaligned bars + band clipping issue',
					scales: {
						x: {
							time: false,
						}
					},
					bands: [
						{
							series: [
								2,
								1
							],
							dir: -1
						}
					],
					series: [
						{},
						{
							fill: 'rgba(255,0,0,0.5)',
							width: 0,
							paths,
							points: {
								show: false,
							}
						},
						{

							fill: 'rgba(0,0,255,0.5)',
							width: 0,
							paths,
							points: {
								show: false,
							}
						}
					],
				};

				let u = new uPlot(opts, data, document.body);
			}


			{
				const _ = null;

				let data = [
					[0,6,12,18,24,30,36,42,48,54,60,66,72,78,84,90,96,102,108,114,120,126,132,138,144,150,156,162,168,174,180,186,192,198,204,210,216,222,228,234,240,246,252,258,264,270,276,282,288,294,300,306,312,318,324,330,336,342,348,354,360,366,372,378,384,390,396,402,408,414,420,426,432,438,444,450,456,462,468,474,480,486,492,498,504,510,516,522,528,534,540,546,552,558,564,570,576,582,588,594,600,606,612,618,624,630,636,642,648,654,660,666,672,678,684,690,696,702,708,714,720,726,732,738,744,750,756,762,768,774,780,786,792,798,804,810,816,822,828,834,840,846,852,858,864,870,876,882,888,894,900,906,912,918,924,930,936,942,948,954,960,966,972,978,984,990,996,1002,1008,1014,1020,1026,1032,1038,1044,1050,1056,1062,1068,1074,1080,1086,1092,1098,1104,1110,1116,1122,1128,1134,1140,1146,1152,1158,1164,1170,1176,1182,1188,1194,1200,1206,1212,1218,1224,1230,1236,1242,1248,1254,1260,1266,1272,1278,1284,1290,1296,1302,1308,1314,1320,1326,1332,1338,1344,1350,1356,1362,1368,1374,1380,1386,1392,1398,1404,1410,1416,1422,1428,1434,1440,1446,1452,1458,1464,1470,1476,1482,1488,1494,1500,1506,1512,1518,1524,1530,1536,1542,1548,1554,1560,1566,1572,1578,1584,1590,1596,1602,1608,1614,1620,1626,1632,1638,1644,1650,1656,1662,1668,1674,1680,1686,1692,1698,1704,1710,1716,1722,1728,1734,1740,1746,1752,1758,1764,1770,1776,1782,1788,1794,1800,1806,1812,1818,1824,1830,1836,1842,1848,1854,1860,1866,1872,1878,1884,1890,1896,1902,1908,1914,1920,1926,1932,1938,1944,1950,1956,1962,1968,1974,1980,1986,1992,1998,2004,2010,2016,2022,2028,2034,2040,2046,2052,2058,2064,2070,2076,2082,2088,2094,2100,2106,2112,2118,2124,2130,2136,2142,2148,2154,2160,2166,2172],
					[_,_,_,1,_,_,_,_,1,_,1,_,_,1,_,_,_,_,1,_,_,_,_,1,1,_,_,_,1,_,_,_,1,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,2,_,_,1,_,1,_,_,_,_,1,_,_,_,_,3,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,1,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,1,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,0,1,_,_,_,0,1,1,_,_,2,3,_,_,1,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,1,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,2,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,1,_,_,_,1,_,_,_,_,1,1,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,1,_,_,1,_,_,_,_,1,_,_,_,_],
					[_,_,_,1,_,_,_,_,1,_,1,_,_,1,_,_,_,_,1,_,_,_,_,1,1,_,_,_,1,_,_,_,1,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,2,_,_,1,_,1,_,_,_,_,1,_,_,_,_,3,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,1,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,1,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,4,1,_,_,_,2,1,3,_,_,6,3,_,_,1,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,1,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,2,_,_,_,_,1,_,_,_,_,1,_,_,_,_,2,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,1,_,_,_,1,_,_,_,_,1,2,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,_,_,_,1,_,1,_,_,1,_,_,_,_,1,_,_,_,_],
				];//.map(vals => vals.slice(0, 25));

				const paths = uPlot.paths.bars({
					align: 0,
					size: [0.6, 200],
				});

				const opts = {
					width: 400,
					height: 300,
					title: 'Unaligned bars + band clipping issue (with stroke)',
					scales: {
						x: {
							time: false,
						}
					},
					bands: [
						{
							series: [
								2,
								1
							],
							dir: -1
						}
					],
					series: [
						{},
						{
							fill: 'rgba(255,0,0,0.5)',
							stroke: 'rgba(255,0,0,0.5)',
							width: 1,
							paths,
							points: {
								show: false,
							}
						},
						{

							fill: 'rgba(0,0,255,0.5)',
							stroke: 'rgba(0,0,255,0.5)',
							width: 1,
							paths,
							points: {
								show: false,
							}
						}
					],
				};

				let u = new uPlot(opts, data, document.body);
			}
		</script>
	</body>
</html>