diff --git a/src/charts.css b/src/charts.css
index a05d429..b902da1 100644
--- a/src/charts.css
+++ b/src/charts.css
@@ -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 {
diff --git a/src/charts.js b/src/charts.js
index ec4b36f..f56af3d 100644
--- a/src/charts.js
+++ b/src/charts.js
@@ -114,7 +114,7 @@ class FrappeChart {
setup_container() {
this.container = $$.create('div', {
- className: 'graph-container',
+ className: 'chart-container',
innerHTML: `
${this.title}
${this.subtitle}
@@ -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 = $(`
`);
- 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 = $(`
-
`).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 = $(`
`);
- 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($(`
-
- ${x_values[i]}:
- ${d}
-
-
`));
+ let stats = $$.create('div', {
+ className: 'stats',
+ inside: this.stats_wrapper
+ });
+ stats.innerHTML = `
+ ${x_values[i]}:
+ ${d}
+ `;
}
});
}
@@ -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];
});