increase animation time

docs/assets/css/index.css

@@ -20,7 +20,7 @@
 	margin: 0 0.5em;
 	color: #fff;
 	background: rgba(255, 255, 255, 0.1);
-	border: 1px solid rgba(255, 255, 255, 0.4)
+	border: 1px solid rgba(255, 255, 255, 0.4);
 }
 .btn-transparent:hover {
 	color: #fff;

docs/assets/js/index.js

@@ -148,19 +148,19 @@ Array.prototype.slice.call(
 	el.addEventListener('click', (e) => {
 		let btn = e.target;
 		let type = btn.getAttribute('data-type');
-		let conf = [];
+		let config = [];
 
 		if(type === 'line') {
-			conf = [0, 0, 0];
+			config = [0, 0, 0];
 		} else if(type === 'region') {
-			conf = [0, 0, 1];
+			config = [0, 0, 1];
 		} else {
-			conf = [0, 1, 0];
+			config = [0, 1, 0];
 		}
 
-		plot_chart_args.show_dots = conf[0];
-		plot_chart_args.heatline = conf[1];
-		plot_chart_args.region_fill = conf[2];
+		plot_chart_args.show_dots = config[0];
+		plot_chart_args.heatline = config[1];
+		plot_chart_args.region_fill = config[2];
 
 		plot_chart_args.init = false;
 
@@ -294,7 +294,7 @@ let data_div = document.querySelector('.chart-events-data');
 events_chart.parent.addEventListener('data-select', (e) => {
 	let name = moon_names[e.index];
 	data_div.querySelector('.moon-name').innerHTML = name;
-	data_div.querySelector('.semi-major-axis').innerHTML = distances[e.index];
+	data_div.querySelector('.semi-major-axis').innerHTML = distances[e.index] * 1000;
 	data_div.querySelector('.mass').innerHTML = masses[e.index];
 	data_div.querySelector('.diameter').innerHTML = diameters[e.index];
 	data_div.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
@@ -335,12 +335,12 @@ document.querySelector('[data-aggregation="sums"]').addEventListener("click", (e
 });
 
 document.querySelector('[data-aggregation="average"]').addEventListener("click", (e) => {
-	if(e.target.innerHTML === "Show Average") {
+	if(e.target.innerHTML === "Show Averages") {
 		aggr_chart.show_averages();
-		e.target.innerHTML = "Hide Average";
+		e.target.innerHTML = "Hide Averages";
 	} else {
 		aggr_chart.hide_averages();
-		e.target.innerHTML = "Show Average";
+		e.target.innerHTML = "Show Averages";
 	}
 });
 
@@ -360,7 +360,7 @@ let heatmap_data = {
 	1506277800.0: 2
 };
 
-let heatmap = new Chart({
+new Chart({
 	parent: "#chart-heatmap",
 	data: heatmap_data,
 	type: 'heatmap',
@@ -368,22 +368,35 @@ let heatmap = new Chart({
 	discrete_domains: 1  // default 0
 });
 
-document.querySelector('[data-heatmap="discrete"]').addEventListener("click", (e) => {
-	heatmap = new Chart({
-		parent: "#chart-heatmap",
-		data: heatmap_data,
-		type: 'heatmap',
-		height: 100,
-		discrete_domains: 1  // default 0
-	});
-});
+Array.prototype.slice.call(
+	document.querySelectorAll('.heatmap-mode-buttons button')
+).map(el => {
+	el.addEventListener('click', (e) => {
+		let btn = e.target;
+		let mode = btn.getAttribute('data-mode');
+
+		if(mode === 'discrete') {
+			new Chart({
+				parent: "#chart-heatmap",
+				data: heatmap_data,
+				type: 'heatmap',
+				height: 100,
+				discrete_domains: 1  // default 0
+			});
+		} else {
+			new Chart({
+				parent: "#chart-heatmap",
+				data: heatmap_data,
+				type: 'heatmap',
+				height: 100
+			});
+		}
 
-document.querySelector('[data-heatmap="continuous"]').addEventListener("click", (e) => {
-	heatmap = new Chart({
-		parent: "#chart-heatmap",
-		data: heatmap_data,
-		type: 'heatmap',
-		height: 100
+		Array.prototype.slice.call(
+			btn.parentNode.querySelectorAll('button')).map(el => {
+			el.classList.remove('active');
+		});
+		btn.classList.add('active');
 	});
 });
 

docs/index.html

@@ -205,9 +205,9 @@
               </h6>
               <div id="chart-heatmap" class="border"
                 style="overflow: scroll; text-align: center; padding: 20px;"></div>
-              <div class="mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary active" data-heatmap="discrete">Discrete</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-heatmap="continuous">Continuous</button>
+              <div class="heatmap-mode-buttons btn-group mt-1 mx-auto" role="group">
+                <button type="button" class="btn btn-sm btn-secondary active" data-mode="discrete">Discrete</button>
+                <button type="button" class="btn btn-sm btn-secondary" data-mode="continuous">Continuous</button>
               </div>
               <pre><code class="hljs javascript margin-vertical-px">  let heatmap = new Chart({
     parent: "#heatmap",
@@ -249,8 +249,8 @@
       </svg>
     </a>
 
-    <!--<script src="../dist/frappe-charts.min.js"></script>-->
-    <script src="assets/js/frappe-charts.min.js"></script>
+    <script src="../dist/frappe-charts.min.js"></script>
+    <!--<script src="assets/js/frappe-charts.min.js"></script>-->
     <script src="assets/js/index.js"></script>
   </body>
 </html>

src/scripts/charts/AxisChart.js

@@ -456,7 +456,7 @@ export default class AxisChart extends BaseChart {
 			this.make_x_axis(true);
 			setTimeout(() => {
 				if(!this.updating) this.make_x_axis();
-			}, 300);
+			}, 350);
 		}
 
 		if(!arrays_equal(this.y_old_axis_values, this.y_axis_values) ||
@@ -469,7 +469,7 @@ export default class AxisChart extends BaseChart {
 					this.make_y_axis();
 					this.make_y_specifics();
 				}
-			}, 300);
+			}, 350);
 		}
 
 		// Change in data, so calculate dependencies
@@ -518,7 +518,7 @@ export default class AxisChart extends BaseChart {
 				this.chart_wrapper.removeChild(anim_svg);
 				this.chart_wrapper.appendChild(this.svg);
 			}
-		}, 200);
+		}, 250);
 	}
 
 	animate_graphs() {
@@ -539,7 +539,7 @@ export default class AxisChart extends BaseChart {
 				this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, d.color || this.colors[i]);
 				this.make_new_units(d, i);
 			});
-		}, 300);
+		}, 400);
 	}
 
 	animate_path(d, i, old_x, old_y, new_x, new_y) {
@@ -547,7 +547,7 @@ export default class AxisChart extends BaseChart {
 		const new_points_list = new_y.map((y, i) => (new_x[i] + ',' + y));
 		const new_path_str = new_points_list.join("L");
 
-		const path_args = [{unit: d.path, object: d, key: 'path'}, {d:"M"+new_path_str}, 250, "easein"];
+		const path_args = [{unit: d.path, object: d, key: 'path'}, {d:"M"+new_path_str}, 350, "easein"];
 		this.elements_to_animate.push(path_args);
 
 		// Animate region
@@ -558,7 +558,7 @@ export default class AxisChart extends BaseChart {
 			const region_args = [
 				{unit: d.region_path, object: d, key: 'region_path'},
 				{d:"M" + reg_start_pt + new_path_str + reg_end_pt},
-				250,
+				350,
 				"easein"
 			];
 			this.elements_to_animate.push(region_args);
@@ -569,7 +569,7 @@ export default class AxisChart extends BaseChart {
 		let type = this.unit_args.type;
 
 		d.svg_units.map((unit, i) => {
-			if(!new_x[i] || !new_y[i]) return;
+			if(new_x[i] === undefined || new_y[i] === undefined) return;
 			this.elements_to_animate.push(this.animate[type](
 				{unit:unit, array:d.svg_units, index: i}, // unit, with info to replace where it came from in the data
 				new_x[i],
@@ -646,7 +646,7 @@ export default class AxisChart extends BaseChart {
 			this.elements_to_animate && this.elements_to_animate.push([
 				{unit: x_line, array: [0], index: 0},
 				{transform: `${ new_pos }, 0`},
-				250,
+				350,
 				"easein",
 				"translate",
 				{transform: `${ old_pos }, 0`}
@@ -836,7 +836,7 @@ export default class AxisChart extends BaseChart {
 		this.elements_to_animate && this.elements_to_animate.push([
 			{unit: y_line, array: [0], index: 0},
 			new_props,
-			250,
+			350,
 			"easein",
 			"translate",
 			old_props
@@ -1050,12 +1050,12 @@ export default class AxisChart extends BaseChart {
 
 				x = start + (width * index);
 
-				return [bar_obj, {width: width, height: height, x: x, y: y}, 250, "easein"];
-				// bar.animate({height: args.new_height, y: y_top}, 250, mina.easein);
+				return [bar_obj, {width: width, height: height, x: x, y: y}, 350, "easein"];
+				// bar.animate({height: args.new_height, y: y_top}, 350, mina.easein);
 			},
 			'dot': (dot_obj, x, y_top) => {
-				return [dot_obj, {cx: x, cy: y_top}, 300, "easein"];
-				// dot.animate({cy: y_top}, 250, mina.easein);
+				return [dot_obj, {cx: x, cy: y_top}, 350, "easein"];
+				// dot.animate({cy: y_top}, 350, mina.easein);
 			}
 		};
 	}