Procházet zdrojové kódy

add event chart

tags/1.2.0
pratu16x7 před 7 roky
rodič
revize
ae007f181b
10 změnil soubory, kde provedl 148 přidání a 79 odebrání
  1. +1
    -1
      dist/frappe-charts.min.js
  2. +1
    -1
      dist/frappe-charts.min.js.map
  3. +7
    -3
      docs/assets/css/index.css
  4. binární
      docs/assets/img/callisto.jpg
  5. binární
      docs/assets/img/europa.jpg
  6. binární
      docs/assets/img/ganymede.jpg
  7. binární
      docs/assets/img/io.jpg
  8. +110
    -69
      docs/assets/js/index.js
  9. +8
    -1
      docs/index.html
  10. +21
    -4
      src/scripts/charts/AxisChart.js

+ 1
- 1
dist/frappe-charts.min.js
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 1
- 1
dist/frappe-charts.min.js.map
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 7
- 3
docs/assets/css/index.css Zobrazit soubor

@@ -62,15 +62,19 @@ pre.highlight {
/*font-size: 1.4rem;*/
}
.data-container {
height: 302px;
padding: 20px;
padding-bottom: 0px;
}
.image-container {
padding: 3px;
}
.image-container img{
width: 170px;
height: 120px;
display: block;
width: 100%;
}
.data p {
margin-bottom: 5px;
font-size: 12px;
}
.margin-vertical-px {
margin: 15px 0px;


binární
docs/assets/img/callisto.jpg Zobrazit soubor

Před Za
Šířka: 236  |  Výška: 236  |  Velikost: 15 KiB

binární
docs/assets/img/europa.jpg Zobrazit soubor

Před Za
Šířka: 240  |  Výška: 240  |  Velikost: 20 KiB

binární
docs/assets/img/ganymede.jpg Zobrazit soubor

Před Za
Šířka: 240  |  Výška: 240  |  Velikost: 16 KiB

binární
docs/assets/img/io.jpg Zobrazit soubor

Před Za
Šířka: 240  |  Výška: 240  |  Velikost: 17 KiB

+ 110
- 69
docs/assets/js/index.js Zobrazit soubor

@@ -4,10 +4,10 @@ let report_count_list = [17, 40, 33, 44, 126, 156,
324, 333, 478, 495, 373];

let bar_composite_data = {
"labels": ["2007", "2008", "2009", "2010", "2011", "2012",
labels: ["2007", "2008", "2009", "2010", "2011", "2012",
"2013", "2014", "2015", "2016", "2017"],

"datasets": [{
datasets: [{
"title": "Events",
"color": "orange",
"values": report_count_list,
@@ -16,8 +16,8 @@ let bar_composite_data = {
};

let line_composite_data = {
"labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"datasets": [{
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
"color": "green",
"values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0],
// "formatted": ["₹ 0.00", "₹ 0.00", "₹ 0.00", "₹ 61,500.00", "₹ 82,936.88", "₹ 24,010.00", "₹ 0.00", "₹ 0.00", "₹ 25,840.00", "₹ 5,08,048.82", "₹ 1,16,820.00", "₹ 0.00"],
@@ -63,10 +63,10 @@ bar_composite_chart.parent.addEventListener('data-select', (e) => {
// Demo Chart (bar, linepts, scatter(blobs), percentage)
// ================================================================================
let type_data = {
"labels": ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],

"datasets": [
datasets: [
{
title: "Some Data", color: "light-blue",
values: [25, 40, 30, 35, 8, 52, 17, -4]
@@ -110,12 +110,12 @@ Array.prototype.slice.call(
// Trends Chart
// ================================================================================
let trends_data = {
"labels": [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976,
labels: [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976,
1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986,
1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996,
1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006,
2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016] ,
"datasets": [
datasets: [
{
"color": "blue",
"values": [132.9, 150.0, 149.4, 148.0, 94.4, 97.6, 54.1, 49.2, 22.5, 18.4,
@@ -191,8 +191,8 @@ let get_update_data = (source_array, length=10) => {
};

let update_data = {
"labels": get_update_data(update_data_all_labels),
"datasets": [{
labels: get_update_data(update_data_all_labels),
datasets: [{
"color": "red",
"values": get_update_data(update_data_all_values)
}],
@@ -206,18 +206,83 @@ let update_data = {
]
};

let update_chart = new Chart({
parent: "#chart-update",
data: update_data,
type: 'line',
height: 250,
is_series: 1,
region_fill: 1
});

// Event chart
// ================================================================================
let moon_names = ["Ganymede", "Callisto", "Io", "Europa"];
let masses = [14819000, 10759000, 8931900, 4800000];
let distances = [1070.412, 1882.709, 421.700, 671.034];
let diameters = [5262.4, 4820.6, 3637.4, 3121.6];

let jupiter_moons = {
'Ganymede': {
mass: '14819000 x 10^16 kg',
'semi-major-axis': '1070412 km',
'diameter': '5262.4 km'
},
'Callisto': {
mass: '10759000 x 10^16 kg',
'semi-major-axis': '1882709 km',
'diameter': '4820.6 km'
},
'Io': {
mass: '8931900 x 10^16 kg',
'semi-major-axis': '421700 km',
'diameter': '3637.4 km'
},
'Europa': {
mass: '4800000 x 10^16 kg',
'semi-major-axis': '671034 km',
'diameter': '3121.6 km'
},
};

let events_data = {
"labels": ["Sun", "Mon", "Tue", "Wed", "Thu"],
"datasets": [{
labels: ["Ganymede", "Callisto", "Io", "Europa"],
datasets: [
{
// "title": "km",
"color": "light-green",
"values": [25, 40, 30, 35, 48]
"values": distances,
"formatted": distances.map(d => d*1000 + " km")
}
]
};

let events_chart = new Chart({
parent: "#chart-events",
title: "Jupiter's Moons: Semi-major Axis (1000 km)",
data: events_data,
type: 'bar',
height: 250,
is_navigable: 1,
});

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('.mass').innerHTML = masses[e.index];
data_div.querySelector('.diameter').innerHTML = diameters[e.index];
data_div.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
});

// Aggregation chart
// ================================================================================
let aggr_data = {
"labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
"datasets": [{
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
datasets: [
{
"color": "purple",
"values": [25, 40, 30, 35, 8, 52, 17]
},
@@ -229,6 +294,35 @@ let aggr_data = {
]
};

let aggr_chart = new Chart({
parent: "#chart-aggr",
data: aggr_data,
type: 'bar',
height: 250
});

document.querySelector('[data-aggregation="sums"]').addEventListener("click", (e) => {
if(e.target.innerHTML === "Show Sums") {
aggr_chart.show_sums();
e.target.innerHTML = "Hide Sums";
} else {
aggr_chart.hide_sums();
e.target.innerHTML = "Show Sums";
}
});

document.querySelector('[data-aggregation="average"]').addEventListener("click", (e) => {
if(e.target.innerHTML === "Show Average") {
aggr_chart.show_average();
e.target.innerHTML = "Hide Average";
} else {
aggr_chart.hide_average();
e.target.innerHTML = "Show Average";
}
});

// Heatmap
// ================================================================================
let heatmap_data = {
1479753000.0: 1,
1498588200.0: 1,
@@ -243,37 +337,6 @@ let heatmap_data = {
1506277800.0: 2
};


// Charts
// ================================================================================




let update_chart = new Chart({
parent: "#chart-update",
data: update_data,
type: 'line',
height: 250,
is_series: 1,
region_fill: 1
});

let events_chart = new Chart({
parent: "#chart-events",
data: events_data,
type: 'bar',
height: 250,
is_navigable: 1,
});

let aggr_chart = new Chart({
parent: "#chart-aggr",
data: aggr_data,
type: 'bar',
height: 250
});

let heatmap = new Chart({
parent: "#chart-heatmap",
data: heatmap_data,
@@ -292,7 +355,7 @@ chart_update_buttons.querySelector('[data-update="random"]').addEventListener("c
shuffle(update_data_all_indices);
update_chart.update_values(
[{values: get_update_data(update_data_all_values)}],
get_update_data(update_data_all_labels)
update_data_all_labels.slice(0, 10)
);
});

@@ -309,28 +372,6 @@ chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("c
update_chart.remove_data_point();
});



document.querySelector('[data-aggregation="sums"]').addEventListener("click", (e) => {
if(e.target.innerHTML === "Show Sums") {
aggr_chart.show_sums();
e.target.innerHTML = "Hide Sums";
} else {
aggr_chart.hide_sums();
e.target.innerHTML = "Show Sums";
}
});

document.querySelector('[data-aggregation="average"]').addEventListener("click", (e) => {
if(e.target.innerHTML === "Show Average") {
aggr_chart.show_average();
e.target.innerHTML = "Hide Average";
} else {
aggr_chart.hide_average();
e.target.innerHTML = "Show Average";
}
});

function shuffle(array) {
// https://stackoverflow.com/a/2450976/6495043
// Awesomeness: https://bost.ocks.org/mike/shuffle/


+ 8
- 1
docs/index.html Zobrazit soubor

@@ -147,8 +147,15 @@
<div id="chart-events" class="border"></div>
</div>
<div class="col-sm-4">
<div id="chart-events-data" class="border data-container">
<div class="chart-events-data" class="border data-container">
<div class="image-container border">
<img class="moon-image" src="./assets/img/europa.jpg">
</div>
<div class="data margin-vertical-px">
<h6 class="moon-name">Europa</h6>
<p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>
<p>Mass: <span class="mass">4800000</span> x 10^16 kg</p>
<p>Diameter: <span class="diameter">3121.6</span> km</p>
</div>
</div>
</div>


+ 21
- 4
src/scripts/charts/AxisChart.js Zobrazit soubor

@@ -619,6 +619,9 @@ export default class AxisChart extends BaseChart {
const last_line_pos = old_pos[old_pos.length - 1];

let add_and_animate_line = (value, old_pos, new_pos) => {
if(typeof new_pos === 'string') {
new_pos = parseInt(new_pos.substring(0, new_pos.length-1));
}
const x_line = this.make_x_line(
height,
text_start_at,
@@ -708,7 +711,7 @@ export default class AxisChart extends BaseChart {
const filler_vals = new Array(Math.abs(no_of_extras)).fill("");
superimposed_values = new_vals.concat(filler_vals);

const filler_pos = new Array(Math.abs(no_of_extras)).fill(last_line_pos);
const filler_pos = new Array(Math.abs(no_of_extras)).fill(last_line_pos + "F");
superimposed_positions = new_pos.concat(filler_pos);
}

@@ -774,7 +777,8 @@ export default class AxisChart extends BaseChart {

let y_level = $.createSVG('g', {
className: `tick ${axis_line_class}`,
transform: `translate(0, ${y_pos})`
transform: `translate(0, ${y_pos})`,
'stroke-opacity': 1
});

if(darker) {
@@ -788,6 +792,19 @@ export default class AxisChart extends BaseChart {
}

add_and_animate_y_line(value, old_pos, new_pos, i, group, type, specific=false) {
let filler = false;
if(typeof new_pos === 'string') {
new_pos = parseInt(new_pos.substring(0, new_pos.length-1));
filler = true;
}
let new_props = {transform: `0, ${ new_pos }`};
let old_props = {transform: `0, ${ old_pos }`};

if(filler) {
new_props['stroke-opacity'] = 0;
// old_props['stroke-opacity'] = 1;
}

let [width, text_end_at, axis_line_class, start_at] = this.get_y_axis_line_props(specific);
let axis_label_class = !specific ? 'y-value-text' : 'specific-value';
value = !specific ? value : (value+"").toUpperCase();
@@ -807,11 +824,11 @@ export default class AxisChart extends BaseChart {

this.elements_to_animate && this.elements_to_animate.push([
{unit: y_line, array: [0], index: 0},
{transform: `0, ${ new_pos }`},
new_props,
250,
"easein",
"translate",
{transform: `0, ${ old_pos }`}
old_props
]);
}



Načítá se…
Zrušit
Uložit