increase animation time
This commit is contained in:
pratu16x7
parent
6b09bb1f7d
commit
8c531ea3fb
2
dist/frappe-charts.min.js
vendored
2
dist/frappe-charts.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/frappe-charts.min.js.map
vendored
2
dist/frappe-charts.min.js.map
vendored
File diff suppressed because one or more lines are too long
@ -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;
|
||||
|
||||
2
docs/assets/js/frappe-charts.min.js
vendored
2
docs/assets/js/frappe-charts.min.js
vendored
File diff suppressed because one or more lines are too long
@ -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');
|
||||
|
||||
document.querySelector('[data-heatmap="continuous"]').addEventListener("click", (e) => {
|
||||
heatmap = new Chart({
|
||||
parent: "#chart-heatmap",
|
||||
data: heatmap_data,
|
||||
type: 'heatmap',
|
||||
height: 100
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
Array.prototype.slice.call(
|
||||
btn.parentNode.querySelectorAll('button')).map(el => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
btn.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user