rename to charts
This commit is contained in:
pratu16x7
parent
70b57d49d7
commit
5499d34893
@ -4,12 +4,13 @@ let bar_data = {
|
||||
"color": "orange",
|
||||
"values": [50804, 10000, 20000, 61500, 82936.88, 24010, 4000, 6000, 25840, 50804.82, 116820, 6000],
|
||||
"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"],
|
||||
},
|
||||
// {
|
||||
// "color": "blue",
|
||||
// "values": [108048, 0, 0, 101500, 50000.88, 24010, 0, 0, 25840, 108048.82, 51682, 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"],
|
||||
// }
|
||||
}
|
||||
,
|
||||
{
|
||||
"color": "blue",
|
||||
"values": [108048, 0, 0, 101500, 50000.88, 24010, 0, 0, 25840, 108048.82, 51682, 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"],
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -61,7 +62,7 @@ let more_line_data = {
|
||||
}
|
||||
}
|
||||
|
||||
let bar_chart = new FrappeChart ({
|
||||
let bar_chart = new frappe.chart.FrappeChart ({
|
||||
parent: "#charts-1",
|
||||
data: bar_data,
|
||||
type: 'bar',
|
||||
@ -69,16 +70,32 @@ let bar_chart = new FrappeChart ({
|
||||
is_navigable: 1
|
||||
})
|
||||
|
||||
let line_chart = new FrappeChart ({
|
||||
let line_chart = new frappe.chart.FrappeChart ({
|
||||
parent: "#charts-2",
|
||||
data: line_data,
|
||||
type: 'line',
|
||||
height: 140,
|
||||
is_navigable: 0
|
||||
height: 140
|
||||
})
|
||||
|
||||
bar_chart.parent.addEventListener('data-select', (e) => {
|
||||
line_chart.update_values([more_line_data[e.index]]);
|
||||
});
|
||||
|
||||
console.log("chart", bar_chart);
|
||||
console.log("chart", bar_chart);
|
||||
|
||||
|
||||
// update_test() {
|
||||
// setTimeout(() => {
|
||||
// this.update_values([{values: [0, 0, 0, 21500, 50000.88, 24010, 0, 0, 25840, 108048.82, 516820, 0]},
|
||||
// {values: [0, 0, 0, 21500, 80000.88, 24010, 20000, 20000, 15840, 508048.82, 116820, 0]}]);
|
||||
// setTimeout(() => {
|
||||
// this.update_values([{values: [0, 0, 0, 21500, 80000.88, 24010, 20000, 20000, 15840, 508048.82, 116820, 0]},
|
||||
// {values: [0, 0, 0, 21500, 50000.88, 24010, 0, 0, 25840, 108048.82, 516820, 0]}]);
|
||||
// setTimeout(() => {
|
||||
// this.update_values([{values: [0, 0, 0, 101500, 50000.88, 24010, 0, 0, 25840, 108048.82, 516820, 0]},
|
||||
// {values: [0, 0, 0, 21500, 80000.88, 24010, 20000, 20000, 15840, 508048.82, 116820, 0]}]);
|
||||
|
||||
// }, 300);
|
||||
// }, 300);
|
||||
// }, 300);
|
||||
// }
|
||||
147
docs/index.html
147
docs/index.html
@ -39,155 +39,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group later">
|
||||
<div class="row section">
|
||||
<div class="col-sm-10 push-sm-1">
|
||||
<div class="dashboard-section">
|
||||
<h1>Installation</h1>
|
||||
<pre>
|
||||
<code class="hljs">npm install frappe-charts</code>
|
||||
</pre>
|
||||
<svg class="chart" width="720" height="140">
|
||||
|
||||
<rect class="bar mini fill green" x="449.99999999999994" y="15.32519666666667" width="23.076923076923077" height="10">
|
||||
</rect>
|
||||
<!--<animate
|
||||
attributeName="height"
|
||||
from="10"
|
||||
to="110"
|
||||
begin="0.2s"
|
||||
dur="2s"
|
||||
values="10;110"
|
||||
keySplines="0 0 1 1"
|
||||
keyTimes="
|
||||
0;1"
|
||||
calcMode="spline"
|
||||
|
||||
|
||||
/>-->
|
||||
|
||||
<!--<animate
|
||||
attributeName="height"
|
||||
from="10"
|
||||
to="110"
|
||||
begin="0s"
|
||||
dur="1s"
|
||||
values="10;110"
|
||||
keySplines="0.1 0.8 0.2 1"
|
||||
keyTimes="
|
||||
0;1"
|
||||
calcMode="spline"
|
||||
|
||||
|
||||
/>
|
||||
<animate
|
||||
attributeName="y"
|
||||
from="15"
|
||||
to="50"
|
||||
begin="0s"
|
||||
dur="1s"
|
||||
values="15;50"
|
||||
keySplines="0.1 0.8 0.2 1"
|
||||
keyTimes="
|
||||
0;1"
|
||||
calcMode="spline"
|
||||
|
||||
|
||||
/>-->
|
||||
|
||||
<path class="stroke green"
|
||||
d="M0,100L54.55,100L109.09,100L163.64,89.75L218.18,86.18L272.73,96L327.27,100L381.82,100L436.36,95.69L490.91,15.33L545.45,80.53L600,100">
|
||||
<animate
|
||||
attributeName="d"
|
||||
from="M0,100L54.55,100L109.09,100L163.64,89.75L218.18,86.18L272.73,96L327.27,100L381.82,100L436.36,95.69L490.91,15.33L545.45,80.53L600,100"
|
||||
to="M0,100L54.55,35L109.09,100L163.64,89.75L218.18,86.18L222.73,96L267.27,32L381.82,45L436.36,95.69L490.91,65.33L545.45,80.53L600,100"
|
||||
begin="1s"
|
||||
dur="1s"
|
||||
values="M0,100L54.55,100L109.09,100L163.64,89.75L218.18,86.18L272.73,96L327.27,100L381.82,100L436.36,95.69L490.91,15.33L545.45,80.53L600,100;
|
||||
M0,100L54.55,35L109.09,100L163.64,89.75L218.18,86.18L222.73,96L267.27,32L381.82,45L436.36,95.69L490.91,65.33L545.45,80.53L600,100"
|
||||
keySplines="0.1 0.8 0.2 1"
|
||||
keyTimes="
|
||||
0;1"
|
||||
calcMode="spline"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</path>
|
||||
<!--<path class="stroke green"
|
||||
d="M0,100L54.55,35L109.09,100L163.64,89.75L218.18,86.18L272.73,96L327.27,32L381.82,45L436.36,95.69L490.91,65.33L500.45,80.53L530,20">
|
||||
<animate
|
||||
attributeName="d"
|
||||
from="M0,100L54.55,35L109.09,100L163.64,89.75L218.18,86.18L272.73,96L327.27,32L381.82,45L436.36,95.69L490.91,65.33L500.45,80.53L530,20"
|
||||
to="M0,100L54.55,35L109.09,100L163.64,89.75L218.18,86.18L272.73,96L327.27,32L381.82,45L436.36,95.69L490.91,65.33L500.45,80.53L530,20L560,80L600,50"
|
||||
begin="0s"
|
||||
dur="6s"
|
||||
values="M0,100L54.55,35L109.09,100L163.64,89.75L218.18,86.18L272.73,96L327.27,32L381.82,45L436.36,95.69L490.91,65.33L500.45,80.53L530,20;
|
||||
M0,100L54.55,35L109.09,100L163.64,89.75L218.18,86.18L272.73,96L327.27,32L381.82,45L436.36,95.69L490.91,65.33L500.45,80.53L530,20L560,80L600,50"
|
||||
keySplines="0.1 0.8 0.2 1"
|
||||
keyTimes="
|
||||
0;1"
|
||||
calcMode="spline"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</path>-->
|
||||
|
||||
<!--<path class="stroke green" d="M0,100L54.55,35L109.09,100L163.64,89.75L218.18,86.18L272.73,96L327.27,32L381.82,45L436.36,95.69L490.91,65.33L500.45,80.53L600,100"></path>-->
|
||||
</svg>
|
||||
<!--<svg class="chart" width="720" height="140">
|
||||
<path class="stroke green" d="M0,100L54.55,35L109.09,100L163.64,89.75L218.18,86.18L272.73,96L327.27,32L381.82,45L436.36,95.69L490.91,65.33L500.45,80.53L530,20L560,80L600,50"></path>
|
||||
</svg>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-10 push-sm-1">
|
||||
<div class="dashboard-section">
|
||||
<h1>Usage</h1>
|
||||
<h6 style="margin:2em 0 0 0">
|
||||
Include it in your html
|
||||
</h6>
|
||||
<pre>
|
||||
<code class="hljs html"><script src="frappe-charts.min.js" /></code>
|
||||
</pre>
|
||||
<h6 style="margin:0">Create an svg element</h6>
|
||||
<pre>
|
||||
<code class="hljs html"><svg id="chart"></svg></code>
|
||||
</pre>
|
||||
<h6 style="margin:0">Initiliaze a new Chart object</h6>
|
||||
<pre>
|
||||
<code class="hljs javascript">var tasks = [
|
||||
{
|
||||
id: 'Task 1',
|
||||
name: 'Redesign website',
|
||||
start: '2016-12-28',
|
||||
end: '2016-12-31',
|
||||
progress: 20,
|
||||
dependencies: 'Task 2, Task 3'
|
||||
},
|
||||
...
|
||||
]
|
||||
var chart = new Chart;
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-10 push-sm-1">
|
||||
<div class="dashboard-section">
|
||||
<h1>Examples</h1>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Closing -->
|
||||
<div class="text-center" style="margin-top: 70px">
|
||||
<a href=""><button class="large blue button">Download</button></a>
|
||||
<p class="mt-2"><a href="https://github.com/frappe" target="_blank">View on GitHub</a></p>
|
||||
<p>License: MIT</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../src/charts.js"></script>
|
||||
<script src="assets/js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
/* graphs */
|
||||
.chart-container {
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
}
|
||||
.chart-container .graph-focus-margin {
|
||||
margin: 0px 5%;
|
||||
}
|
||||
|
||||
117
src/charts.js
117
src/charts.js
@ -16,7 +16,9 @@
|
||||
|
||||
// Validate all arguments, check passed data format, set defaults
|
||||
|
||||
class FrappeChart {
|
||||
let frappe = {chart:{}};
|
||||
|
||||
frappe.chart.FrappeChart = class {
|
||||
constructor({
|
||||
parent = "",
|
||||
height = 240,
|
||||
@ -33,15 +35,15 @@ class FrappeChart {
|
||||
|
||||
type = ''
|
||||
}) {
|
||||
if(Object.getPrototypeOf(this) === FrappeChart.prototype) {
|
||||
if(Object.getPrototypeOf(this) === frappe.chart.FrappeChart.prototype) {
|
||||
if(type === 'line') {
|
||||
return new LineGraph(arguments[0]);
|
||||
return new frappe.chart.LineChart(arguments[0]);
|
||||
} else if(type === 'bar') {
|
||||
return new BarGraph(arguments[0]);
|
||||
return new frappe.chart.BarChart(arguments[0]);
|
||||
} else if(type === 'percentage') {
|
||||
return new PercentageGraph(arguments[0]);
|
||||
return new frappe.chart.PercentageChart(arguments[0]);
|
||||
} else if(type === 'heatmap') {
|
||||
return new HeatMap(arguments[0]);
|
||||
return new frappe.chart.HeatMap(arguments[0]);
|
||||
}
|
||||
}
|
||||
|
||||
@ -128,7 +130,7 @@ class FrappeChart {
|
||||
this.chart_wrapper = this.container.querySelector('.frappe-chart');
|
||||
// this.chart_wrapper.appendChild();
|
||||
|
||||
this.make_chart_area()
|
||||
this.make_chart_area();
|
||||
this.make_draw_area();
|
||||
|
||||
this.stats_wrapper = this.container.querySelector('.graph-stats-container');
|
||||
@ -161,7 +163,7 @@ class FrappeChart {
|
||||
}
|
||||
|
||||
make_tooltip() {
|
||||
this.tip = new SvgTip({
|
||||
this.tip = new frappe.chart.SvgTip({
|
||||
parent: this.chart_wrapper,
|
||||
});
|
||||
this.bind_tooltip();
|
||||
@ -196,7 +198,7 @@ class FrappeChart {
|
||||
} else if (e.keyCode == '13') {
|
||||
this.on_enter_key();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
make_overlay() {}
|
||||
@ -212,7 +214,7 @@ class FrappeChart {
|
||||
// check for length
|
||||
let data_point = {
|
||||
index: index
|
||||
}
|
||||
};
|
||||
let y = this.y[0];
|
||||
['svg_units', 'y_tops', 'values'].map(key => {
|
||||
let data_key = key.slice(0, key.length-1);
|
||||
@ -279,18 +281,13 @@ class FrappeChart {
|
||||
}
|
||||
}
|
||||
|
||||
class AxisGraph extends FrappeChart {
|
||||
frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
|
||||
constructor(args) {
|
||||
super(args);
|
||||
|
||||
this.x = this.data.labels;
|
||||
this.y = this.data.datasets;
|
||||
|
||||
this.get_x_label = this.format_lambdas.x_label;
|
||||
this.get_y_label = this.format_lambdas.y_label;
|
||||
this.get_x_tooltip = this.format_lambdas.x_tooltip;
|
||||
this.get_y_tooltip = this.format_lambdas.y_tooltip;
|
||||
|
||||
this.colors = ['lightblue', 'purple', 'blue', 'green', 'lightgreen',
|
||||
'yellow', 'orange', 'red'];
|
||||
}
|
||||
@ -302,7 +299,7 @@ class AxisGraph extends FrappeChart {
|
||||
|
||||
setup_x() {
|
||||
this.set_avg_unit_width_and_x_offset();
|
||||
this.x_axis_values = this.x.map((d, i) => chart_utils.float_2(this.x_offset + i * this.avg_unit_width));
|
||||
this.x_axis_values = this.x.map((d, i) => frappe.chart.utils.float_2(this.x_offset + i * this.avg_unit_width));
|
||||
}
|
||||
|
||||
setup_y() {
|
||||
@ -422,13 +419,14 @@ class AxisGraph extends FrappeChart {
|
||||
draw_graph() {
|
||||
// TODO: Don't animate on refresh
|
||||
let data = [];
|
||||
this.svg_units_group.textContent = '';
|
||||
this.y.map((d, i) => {
|
||||
// Anim: Don't draw initial values, store them and update later
|
||||
d.y_tops = d.values.map(val => this.height); // no value
|
||||
d.y_tops = new Array(d.values.length).fill(this.height); // no value
|
||||
data.push({values: d.values});
|
||||
d.svg_units = [];
|
||||
|
||||
this.make_new_units(d.y_tops, d.color || this.colors[i], i);
|
||||
this.make_new_units_for_dataset(d.y_tops, d.color || this.colors[i], i);
|
||||
this.make_path && this.make_path(d, d.color || this.colors[i]);
|
||||
});
|
||||
|
||||
@ -448,9 +446,8 @@ class AxisGraph extends FrappeChart {
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
make_new_units(y_values, color, dataset_index) {
|
||||
make_new_units_for_dataset(y_values, color, dataset_index) {
|
||||
this.y[dataset_index].svg_units = [];
|
||||
this.svg_units_group.textContent = '';
|
||||
|
||||
let d = this.unit_args;
|
||||
y_values.map((y, i) => {
|
||||
@ -511,7 +508,7 @@ class AxisGraph extends FrappeChart {
|
||||
if(relY < this.height + this.translate_y * 2) {
|
||||
this.map_tooltip_x_position_and_show(relX);
|
||||
} else {
|
||||
this.tip.hide_tip()
|
||||
this.tip.hide_tip();
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -548,13 +545,12 @@ class AxisGraph extends FrappeChart {
|
||||
|
||||
let old_upper_limit = this.upper_limit;
|
||||
this.setup_y();
|
||||
if(this.old_upper_limit !== this.upper_limit){
|
||||
if(old_upper_limit !== this.upper_limit){
|
||||
this.make_y_axis();
|
||||
}
|
||||
|
||||
let elements_to_animate = [];
|
||||
elements_to_animate = this.animate_for_equilength_data(elements_to_animate);
|
||||
this.calc_min_tops();
|
||||
|
||||
// create new x,y pair string and animate path
|
||||
if(this.y[0].path) {
|
||||
@ -589,8 +585,8 @@ class AxisGraph extends FrappeChart {
|
||||
}
|
||||
|
||||
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));
|
||||
this.y.map((d) => {
|
||||
d.y_tops = d.values.map(val => frappe.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
|
||||
@ -599,6 +595,7 @@ class AxisGraph extends FrappeChart {
|
||||
));
|
||||
});
|
||||
});
|
||||
this.calc_min_tops();
|
||||
return elements_to_animate;
|
||||
}
|
||||
|
||||
@ -651,7 +648,7 @@ class AxisGraph extends FrappeChart {
|
||||
|
||||
calc_all_y_tops() {
|
||||
this.y.map(d => {
|
||||
d.y_tops = d.values.map( val => chart_utils.float_2(this.height - val * this.multiplier));
|
||||
d.y_tops = d.values.map( val => frappe.chart.utils.float_2(this.height - val * this.multiplier));
|
||||
});
|
||||
}
|
||||
|
||||
@ -667,8 +664,8 @@ class AxisGraph extends FrappeChart {
|
||||
}
|
||||
}
|
||||
|
||||
class BarGraph extends AxisGraph {
|
||||
constructor(args) {
|
||||
frappe.chart.BarChart = class BarChart extends frappe.chart.AxisChart {
|
||||
constructor() {
|
||||
super(arguments[0]);
|
||||
|
||||
this.type = 'bar-graph';
|
||||
@ -683,7 +680,6 @@ class BarGraph extends AxisGraph {
|
||||
this.unit_args = {
|
||||
type: 'bar',
|
||||
args: {
|
||||
// More intelligent width setting
|
||||
space_width: this.avg_unit_width/2,
|
||||
no_of_datasets: this.y.length
|
||||
}
|
||||
@ -732,10 +728,10 @@ class BarGraph extends AxisGraph {
|
||||
}
|
||||
}
|
||||
|
||||
class LineGraph extends AxisGraph {
|
||||
frappe.chart.LineChart = class LineChart extends frappe.chart.AxisChart {
|
||||
constructor(args) {
|
||||
super(args);
|
||||
if(Object.getPrototypeOf(this) !== LineGraph.prototype) {
|
||||
if(Object.getPrototypeOf(this) !== frappe.chart.LineChart.prototype) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -767,7 +763,7 @@ class LineGraph extends AxisGraph {
|
||||
}
|
||||
}
|
||||
|
||||
class RegionGraph extends LineGraph {
|
||||
frappe.chart.RegionChart = class RegionChart extends frappe.chart.LineChart {
|
||||
constructor(args) {
|
||||
super(args);
|
||||
|
||||
@ -777,7 +773,7 @@ class RegionGraph extends LineGraph {
|
||||
}
|
||||
}
|
||||
|
||||
class PercentageGraph extends FrappeChart {
|
||||
frappe.chart.PercentageChart = class PercentageChart extends frappe.chart.FrappeChart {
|
||||
constructor(args) {
|
||||
super(args);
|
||||
|
||||
@ -884,7 +880,7 @@ class PercentageGraph extends FrappeChart {
|
||||
}
|
||||
}
|
||||
|
||||
class HeatMap extends FrappeChart {
|
||||
frappe.chart.HeatMap = class HeatMap extends frappe.chart.FrappeChart {
|
||||
constructor({
|
||||
start = new Date(moment().subtract(1, 'year').toDate()),
|
||||
domain = '',
|
||||
@ -895,6 +891,8 @@ class HeatMap extends FrappeChart {
|
||||
}) {
|
||||
super(arguments[0]);
|
||||
|
||||
this.domain = domain;
|
||||
this.subdomain = subdomain;
|
||||
this.start = start;
|
||||
this.data = data;
|
||||
this.discrete_domains = discrete_domains;
|
||||
@ -1038,18 +1036,18 @@ class HeatMap extends FrappeChart {
|
||||
}
|
||||
|
||||
render_month_labels() {
|
||||
this.first_month_label = 1;
|
||||
// this.first_month_label = 1;
|
||||
// if (this.first_week_start.getDate() > 8) {
|
||||
// this.first_month_label = 0;
|
||||
// }
|
||||
this.last_month_label = 1;
|
||||
// this.last_month_label = 1;
|
||||
|
||||
let first_month = this.months.shift();
|
||||
let first_month_start = this.month_start_points.shift();
|
||||
// let first_month = this.months.shift();
|
||||
// let first_month_start = this.month_start_points.shift();
|
||||
// render first month if
|
||||
|
||||
let last_month = this.months.pop();
|
||||
let last_month_start = this.month_start_points.pop();
|
||||
// let last_month = this.months.pop();
|
||||
// let last_month_start = this.month_start_points.pop();
|
||||
// render last month if
|
||||
|
||||
this.month_start_points.map((start, i) => {
|
||||
@ -1163,7 +1161,7 @@ class HeatMap extends FrappeChart {
|
||||
get_month_name() {}
|
||||
}
|
||||
|
||||
class SvgTip {
|
||||
frappe.chart.SvgTip = class {
|
||||
constructor({
|
||||
parent = null
|
||||
}) {
|
||||
@ -1221,7 +1219,7 @@ class SvgTip {
|
||||
this.title.innerHTML = title;
|
||||
this.data_point_list.innerHTML = '';
|
||||
|
||||
this.list_values.map((set, i) => {
|
||||
this.list_values.map((set) => {
|
||||
let li = $$.create('li', {
|
||||
className: `border-top ${set.color || 'black'}`,
|
||||
innerHTML: `<strong style="display: block;">${set.value ? set.value : '' }</strong>
|
||||
@ -1274,7 +1272,7 @@ class SvgTip {
|
||||
}
|
||||
}
|
||||
|
||||
function map_c3(chart) {
|
||||
frappe.chart.map_c3 = (chart) => {
|
||||
if (chart.data) {
|
||||
let data = chart.data;
|
||||
let type = chart.chart_type || 'line';
|
||||
@ -1307,7 +1305,7 @@ function map_c3(chart) {
|
||||
dirty = true;
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
if(dirty) {
|
||||
return;
|
||||
@ -1333,7 +1331,7 @@ function map_c3(chart) {
|
||||
y.push({
|
||||
title: 'data' + i,
|
||||
values: row,
|
||||
})
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -1347,20 +1345,20 @@ function map_c3(chart) {
|
||||
}
|
||||
|
||||
// Helpers
|
||||
chart_utils = {};
|
||||
chart_utils.float_2 = d => parseFloat(d.toFixed(2));
|
||||
frappe.chart.utils = {};
|
||||
frappe.chart.utils.float_2 = d => parseFloat(d.toFixed(2));
|
||||
function $$(expr, con) {
|
||||
return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
|
||||
}
|
||||
|
||||
$$.findNodeIndex = (node) =>
|
||||
{
|
||||
var i = 0;
|
||||
while (node = node.previousSibling) {
|
||||
if (node.nodeType === 1) { ++i }
|
||||
}
|
||||
return i;
|
||||
}
|
||||
// $$.findNodeIndex = (node) =>
|
||||
// {
|
||||
// var i = 0;
|
||||
// while (node = node.previousSibling) {
|
||||
// if (node.nodeType === 1) { ++i; }
|
||||
// }
|
||||
// return i;
|
||||
// }
|
||||
|
||||
$$.create = function(tag, o) {
|
||||
var element = document.createElement(tag);
|
||||
@ -1402,7 +1400,7 @@ $$.createSVG = function(tag, o) {
|
||||
element.appendChild(ref);
|
||||
}
|
||||
else {
|
||||
if(i === "className") { i = "class"}
|
||||
if(i === "className") { i = "class"; }
|
||||
if(i === "innerHTML") {
|
||||
element['textContent'] = val;
|
||||
} else {
|
||||
@ -1416,16 +1414,13 @@ $$.createSVG = function(tag, o) {
|
||||
|
||||
$$.runSVGAnimation = (svg_container, elements) => {
|
||||
let parent = elements[0][0]['unit'].parentNode;
|
||||
let grand_parent = svg_container.parentNode;
|
||||
let parent_clone = parent.cloneNode(true);
|
||||
let new_parent = parent.cloneNode(true);
|
||||
|
||||
let new_elements = [];
|
||||
let anim_elements = [];
|
||||
|
||||
elements.map(element => {
|
||||
let obj = element[0];
|
||||
let index = $$.findNodeIndex(obj.unit);
|
||||
// let index = $$.findNodeIndex(obj.unit);
|
||||
|
||||
let anim_element, new_element;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user