jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

Cleanup pie chart

Browse Source
This commit is contained in:
pratu16x7 2017-11-04 07:45:53 +05:30
parent 154e4c7bdc
commit e58fb40c07
9 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/frappe-charts.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/frappe-charts.min.js.map
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/index.js
View File

@ -88,7 +88,7 @@ let type_chart = new Chart({
parent: "#chart-types",
title: "My Awesome Chart",
data: type_data,
type: 'pie',
type: 'bar',
height: 250,
// is_series: 1
});

4
docs/index.html
View File

@ -85,10 +85,10 @@
});</code></pre>
<div id="chart-types" class="border"></div>
<div class="btn-group chart-type-buttons margin-vertical-px mx-auto" role="group">
<button type="button" class="btn btn-sm btn-secondary" data-type='bar'>Bar Chart</button>
<button type="button" class="btn btn-sm btn-secondary active" data-type='bar'>Bar Chart</button>
<button type="button" class="btn btn-sm btn-secondary" data-type='line'>Line Chart</button>
<button type="button" class="btn btn-sm btn-secondary active" data-type='pie'>Pie Chart</button>
<button type="button" class="btn btn-sm btn-secondary" data-type='scatter'>Scatter Chart</button>
<button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button>
<button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
</div>
<p class="text-muted">

2
src/scripts/charts.js
View File

@ -21,7 +21,7 @@ const chartTypes = {
scatter: ScatterChart,
percentage: PercentageChart,
heatmap: Heatmap,
pie:PieChart
pie: PieChart
};
function getChartByType(chartType = 'line', options) {

12
src/scripts/charts/BaseChart.js
View File

@ -38,7 +38,7 @@ export default class BaseChart {
}
this.has_legend = has_legend;
this.chart_types = ['line', 'scatter', 'bar', 'percentage', 'heatmap','pie'];
this.chart_types = ['line', 'scatter', 'bar', 'percentage', 'heatmap', 'pie'];
this.set_margins(height);
}
@ -51,11 +51,11 @@ export default class BaseChart {
// Only across compatible types
let compatible_types = {
bar: ['line', 'scatter', 'percentage','pie'],
line: ['scatter', 'bar', 'percentage','pie'],
pie: ['line', 'scatter', 'percentage','bar'],
scatter: ['line', 'bar', 'percentage','pie'],
percentage: ['bar', 'line', 'scatter','pie'],
bar: ['line', 'scatter', 'percentage', 'pie'],
line: ['scatter', 'bar', 'percentage', 'pie'],
pie: ['line', 'scatter', 'percentage', 'bar'],
scatter: ['line', 'bar', 'percentage', 'pie'],
percentage: ['bar', 'line', 'scatter', 'pie'],
heatmap: []
};

12
src/scripts/charts/PieChart.js
View File

@ -1,6 +1,6 @@
import BaseChart from './BaseChart';
import $ from '../helpers/dom';
import {LightenDarkenColor} from '../helpers/utils';
import { lightenDarkenColor } from '../helpers/utils';
const ANGLE_RATIO = Math.PI / 180;
const FULL_ANGLE = 360;
@ -119,13 +119,13 @@ export default class PieChart extends BaseChart {
angle:diffAngle
});
if(init){
this.elements_to_animate.push([{unit: slice, array: this.slices, index: this.slices.length - 1},
{d:this.makeArcPath(startPosition,endPosition)},
this.elements_to_animate.push([{unit: slice, array: this.slices, index: this.slices.length - 1},
{d:this.makeArcPath(startPosition,endPosition)},
650, "easein",null,{
d:curPath
}]);
}
});
if(init){
this.run_animation();
@ -152,7 +152,7 @@ export default class PieChart extends BaseChart {
}
}, 650);
}
calTranslateByAngle(property){
const{radius,hoverRadio} = this;
const position = PieChart.getPositionByAngle(property.startAngle+(property.angle / 2),radius);
@ -162,7 +162,7 @@ export default class PieChart extends BaseChart {
if(!path) return;
if(flag){
$.transform(path,this.calTranslateByAngle(this.slicesProperties[i]));
path.setAttribute('fill',LightenDarkenColor(this.colors[i],50));
path.setAttribute('fill',lightenDarkenColor(this.colors[i],50));
let g_off = $.offset(this.svg);
let x = e.pageX - g_off.left + 10;
let y = e.pageY - g_off.top - 10;

4
src/scripts/helpers/dom.js
View File

@ -116,6 +116,7 @@ $.runSVGAnimation = (svg_container, elements) => {
return anim_svg;
};
$.transform = (element, style)=>{
element.style.transform = style;
element.style.webkitTransform = style;
@ -123,10 +124,12 @@ $.transform = (element, style)=>{
element.style.mozTransform = style;
element.style.oTransform = style;
};
$.animateSVG = (element, props, dur, easing_type="linear", type=undefined, old_values={}) => {
let anim_element = element.cloneNode(true);
let new_element = element.cloneNode(true);
for(var attributeName in props) {
let animate_element;
if(attributeName === 'transform') {
@ -136,6 +139,7 @@ $.animateSVG = (element, props, dur, easing_type="linear", type=undefined, old_v
}
let current_value = old_values[attributeName] || element.getAttribute(attributeName);
let value = props[attributeName];
let anim_attr = {
attributeName: attributeName,
from: current_value,

2
src/scripts/helpers/utils.js
View File

@ -17,7 +17,7 @@ function limitColor(r){
return r;
}
export function LightenDarkenColor(col,amt) {
export function lightenDarkenColor(col,amt) {
let usePound = false;
if (col[0] == "#") {
col = col.slice(1);