jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[start] remove jquery from heatmap and percentage

Browse Source
This commit is contained in:
pratu16x7 2017-10-02 07:35:29 +05:30
parent dfc14c7a71
commit 70b57d49d7
3 changed files with 125 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/index.html
View File

@ -32,7 +32,7 @@
<div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
<div id="charts-1" class="chart-container"></div>
<p class="mt-1"><strong>Try it!</strong> Use arrow keys to navigate data points</p>
<p class="mt-1">Use arrow keys to navigate data points</p>
</div>
<div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
<div id="charts-2" class="chart-container"></div>

42
src/charts.css
View File

@ -1,74 +1,74 @@
/* graphs */
.graph-container .graph-focus-margin {
.chart-container .graph-focus-margin {
margin: 0px 5%;
}
.graph-container .graphics {
.chart-container .graphics {
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
.graph-container .graph-stats-group {
.chart-container .graph-stats-group {
display: flex;
justify-content: space-around;
flex: 1;
}
.graph-container .graph-stats-container {
.chart-container .graph-stats-container {
display: flex;
justify-content: space-around;
padding-top: 10px;
}
.graph-container .graph-stats-container .stats {
.chart-container .graph-stats-container .stats {
padding-bottom: 15px;
}
.graph-container .graph-stats-container .stats-title {
.chart-container .graph-stats-container .stats-title {
color: #8D99A6;
}
.graph-container .graph-stats-container .stats-value {
.chart-container .graph-stats-container .stats-value {
font-size: 20px;
font-weight: 300;
}
.graph-container .graph-stats-container .stats-description {
.chart-container .graph-stats-container .stats-description {
font-size: 12px;
color: #8D99A6;
}
.graph-container .graph-stats-container .graph-data .stats-value {
.chart-container .graph-stats-container .graph-data .stats-value {
color: #98d85b;
}
.graph-container .axis,
.graph-container .chart-label {
.chart-container .axis,
.chart-container .chart-label {
font-size: 10px;
fill: #555b51;
}
.graph-container .axis line,
.graph-container .chart-label line {
.chart-container .axis line,
.chart-container .chart-label line {
stroke: rgba(27, 31, 35, 0.2);
}
.graph-container .percentage-graph .progress {
.chart-container .percentage-graph .progress {
margin-bottom: 0px;
}
.graph-container .data-points circle {
.chart-container .data-points circle {
stroke: #fff;
stroke-width: 2;
}
.graph-container .data-points path {
.chart-container .data-points path {
fill: none;
stroke-opacity: 1;
stroke-width: 2px;
}
.graph-container line.dashed {
.chart-container line.dashed {
stroke-dasharray: 5,3;
}
.graph-container .tick.x-axis-label {
.chart-container .tick.x-axis-label {
display: block;
}
.graph-container .tick .specific-value {
.chart-container .tick .specific-value {
text-anchor: start;
}
.graph-container .tick .y-value-text {
.chart-container .tick .y-value-text {
text-anchor: end;
}
.graph-container .tick .x-value-text {
.chart-container .tick .x-value-text {
text-anchor: middle;
}
.graph-svg-tip {

166
src/charts.js
View File

@ -114,7 +114,7 @@ class FrappeChart {
setup_container() {
this.container = $$.create('div', {
className: 'graph-container',
className: 'chart-container',
innerHTML: `<h6 class="title" style="margin-top: 15px;">${this.title}</h6>
<h6 class="sub-title uppercase">${this.subtitle}</h6>
<div class="frappe-chart graphics"></div>
@ -151,7 +151,7 @@ class FrappeChart {
inside: this.svg,
transform: `translate(${this.translate_x}, ${this.translate_y})`
});
};
}
setup_components() {
this.svg_units_group = $$.createSVG('g', {
@ -553,16 +553,7 @@ class AxisGraph extends FrappeChart {
}
let elements_to_animate = [];
this.y.map((d, i) => {
d.y_tops = d.values.map(val => chart_utils.float_2(this.height - val * this.multiplier));
d.svg_units.map((unit, j) => {
elements_to_animate.push(this.animate[this.unit_args.type](
{unit:unit, array:d.svg_units, index: j}, // unit, with info to replace from data
d.y_tops[j],
{new_height: this.height - d.y_tops[j]}
));
});
});
elements_to_animate = this.animate_for_equilength_data(elements_to_animate);
this.calc_min_tops();
// create new x,y pair string and animate path
@ -597,6 +588,20 @@ class AxisGraph extends FrappeChart {
// update
}
animate_for_equilength_data(elements_to_animate) {
this.y.map((d, i) => {
d.y_tops = d.values.map(val => chart_utils.float_2(this.height - val * this.multiplier));
d.svg_units.map((unit, j) => {
elements_to_animate.push(this.animate[this.unit_args.type](
{unit:unit, array:d.svg_units, index: j}, // unit, with info to replace from data
d.y_tops[j],
{new_height: this.height - d.y_tops[j]}
));
});
});
return elements_to_animate;
}
add_data_point(data_point) {
this.x.push(data_point.label);
this.y.values.push();
@ -741,7 +746,7 @@ class LineGraph extends AxisGraph {
setup_values() {
super.setup_values();
this.y_axis_mode = 'tick';
this.y_axis_mode = 'span';
this.x_axis_mode = 'span';
this.unit_args = {
type: 'dot',
@ -788,18 +793,24 @@ class PercentageGraph extends FrappeChart {
}
make_chart_area() {
this.chart_wrapper.addClass('graph-focus-margin').attr({
style: `margin-top: 45px;`
this.chart_wrapper.className += ' ' + 'graph-focus-margin';
this.chart_wrapper.style.marginTop = '45px';
this.stats_wrapper.className += ' ' + 'graph-focus-margin';
this.stats_wrapper.style.marginBottom = '30px';
this.stats_wrapper.style.paddingTop = '0px';
this.chart_div = $$.create('div', {
className: 'div',
inside: this.chart_wrapper,
width: this.base_width,
height: this.base_height
});
this.stats_wrapper.addClass('graph-focus-margin').attr({
style: `padding-top: 0px; margin-bottom: 30px;`
this.chart = $$.create('div', {
className: 'progress-chart',
inside: this.chart_div
});
this.$div = $(`<div class="div" width="${this.base_width}"
height="${this.base_height}">
<div class="progress-chart"></div>
</div>`);
this.$chart = this.$div.find('.progress-chart');
return this.$div;
}
setup_values() {
@ -819,27 +830,31 @@ class PercentageGraph extends FrappeChart {
setup_utils() { }
setup_components() {
this.$percentage_bar = $(`<div class="progress">
</div>`).appendTo(this.$chart); // get this.height, width and avg from this if needed
this.percentage_bar = $$.create('div', {
className: 'progress',
inside: this.chart
});
}
make_graph_components() {
this.grand_total = this.x.totals.reduce((a, b) => a + b, 0);
this.x.units = [];
this.x.totals.map((total, i) => {
let $part = $(`<div class="progress-bar background ${this.x.colors[i]}"
style="width: ${total*100/this.grand_total}%"></div>`);
this.x.units.push($part);
this.$percentage_bar.append($part);
let part = $$.create('div', {
className: `progress-bar background ${this.x.colors[i]}`,
style: `width: ${total*100/this.grand_total}%`,
inside: this.percentage_bar
});
this.x.units.push(part);
});
}
bind_tooltip() {
this.x.units.map(($part, i) => {
$part.on('mouseenter', () => {
let g_off = this.chart_wrapper.offset(), p_off = $part.offset();
this.x.units.map((part, i) => {
part.addEventListener('mouseenter', () => {
let g_off = this.chart_wrapper.offset(), p_off = part.offset();
let x = p_off.left - g_off.left + $part.width()/2;
let x = p_off.left - g_off.left + part.width()/2;
let y = p_off.top - g_off.top - 6;
let title = (this.x.formatted && this.x.formatted.length>0
? this.x.formatted[i] : this.x[i]) + ': ';
@ -856,12 +871,14 @@ class PercentageGraph extends FrappeChart {
? this.x.formatted : this.x;
this.x.totals.map((d, i) => {
if(d) {
this.stats_wrapper.append($(`<div class="stats">
<span class="indicator ${this.x.colors[i]}">
<span class="text-muted">${x_values[i]}:</span>
${d}
</span>
</div>`));
let stats = $$.create('div', {
className: 'stats',
inside: this.stats_wrapper
});
stats.innerHTML = `<span class="indicator ${this.x.colors[i]}">
<span class="text-muted">${x_values[i]}:</span>
${d}
</span>`;
}
});
}
@ -910,8 +927,15 @@ class HeatMap extends FrappeChart {
}
setup_components() {
this.domain_label_group = this.snap.g().attr({ class: "domain-label-group chart-label" });
this.data_groups = this.snap.g().attr({ class: "data-groups", transform: `translate(0, 20)` });
this.domain_label_group = $$.createSVG("g", {
className: "domain-label-group chart-label",
inside: this.draw_area
});
this.data_groups = $$.createSVG("g", {
className: "data-groups",
inside: this.draw_area,
transform: `translate(0, 20)`
});
}
setup_values() {
@ -938,7 +962,7 @@ class HeatMap extends FrappeChart {
let day = new Date(current_week_sunday);
[data_group, month_change] = this.get_week_squares_group(day, this.week_col);
this.data_groups.add(data_group);
this.data_groups.appendChild(data_group);
this.week_col += 1 + parseInt(this.discrete_domains && month_change);
this.month_weeks[this.current_month]++;
if(month_change) {
@ -960,7 +984,10 @@ class HeatMap extends FrappeChart {
let month_change = 0;
let week_col_change = 0;
let data_group = this.snap.g().attr({ class: "data-group" });
let data_group = $$.createSVG("g", {
className: "data-group",
inside: this.data_groups
});
for(var y = 0, i = 0; i < no_of_weekdays; i += step, y += (square_side + cell_padding)) {
let data_value = 0;
@ -981,13 +1008,18 @@ class HeatMap extends FrappeChart {
let x = 13 + (index + week_col_change) * 12;
data_group.add(this.snap.rect(x, y, square_side, square_side).attr({
'class': `day`,
'fill': this.legend_colors[color_index],
$$.createSVG("rect", {
className: 'day',
inside: data_group,
x: x,
y: y,
width: square_side,
height: square_side,
fill: this.legend_colors[color_index],
'data-date': this.get_dd_mm_yyyy(current_date),
'data-value': data_value,
'data-day': current_date.getDay()
}));
});
let next_date = new Date(current_date);
this.add_days(next_date, 1);
@ -1022,20 +1054,31 @@ class HeatMap extends FrappeChart {
this.month_start_points.map((start, i) => {
let month_name = this.month_names[this.months[i]].substring(0, 3);
this.domain_label_group.add(this.snap.text(start + 12, 10, month_name).attr({
dy: ".32em",
class: "y-value-text"
}));
$$.createSVG('text', {
className: 'y-value-text',
inside: this.domain_label_group,
x: start + 12,
y: 10,
dy: '.32em',
innerHTML: month_name
});
});
}
make_graph_components() {
this.container.find('.graph-stats-container, .sub-title, .title').hide();
this.container.find('.frappe-chart').css({'margin-top': '0px', 'padding-top': '0px'});
Array.prototype.slice.call(
this.container.querySelectorAll('.graph-stats-container, .sub-title, .title')
).map(d => {
d.style.display = 'None';
});
this.chart_wrapper.style.marginTop = '0px';
this.chart_wrapper.style.paddingTop = '0px';
}
bind_tooltip() {
this.container.on('mouseenter', '.day', (e) => {
this.chart_wrapper.addEventListener('mouseenter', (e) => {
let subdomain = $(e.target);
let count = subdomain.attr('data-value');
let date_parts = subdomain.attr('data-date').split('-');
@ -1229,7 +1272,7 @@ class SvgTip {
this.container.style.left = this.left + 'px';
this.container.style.opacity = '1';
}
};
}
function map_c3(chart) {
if (chart.data) {
@ -1312,11 +1355,11 @@ function $$(expr, con) {
$$.findNodeIndex = (node) =>
{
var i = 0;
while (node = node.previousSibling) {
if (node.nodeType === 1) { ++i }
}
return i;
var i = 0;
while (node = node.previousSibling) {
if (node.nodeType === 1) { ++i }
}
return i;
}
$$.create = function(tag, o) {
@ -1372,9 +1415,7 @@ $$.createSVG = function(tag, o) {
};
$$.runSVGAnimation = (svg_container, elements) => {
console.log(elements);
let parent = elements[0][0]['unit'].parentNode;
console.log("parent", parent, elements[0][0]);
let grand_parent = svg_container.parentNode;
let parent_clone = parent.cloneNode(true);
let new_parent = parent.cloneNode(true);
@ -1407,7 +1448,6 @@ $$.runSVGAnimation = (svg_container, elements) => {
anim_elements.map((anim_element, i) => {
parent.replaceChild(new_elements[i], anim_element);
console.log("new el", new_elements[i]);
elements[i][0] = new_elements[i];
});