jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

Values over data points

Browse Source
This commit is contained in:
Prateeksha Singh 2018-02-20 01:57:11 +05:30
parent df15885135
commit 7c14a0c5c0
9 changed files with 111 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
dist/frappe-charts.esm.js vendored
View File

@ -374,6 +374,14 @@ function makeSVGGroup(parent, className, transform='') {
});
}
function wrapInSVGGroup(elements, className='') {
let g = createSVG('g', {
className: className
});
elements.forEach(e => g.appendChild(e));
return g;
}
function makePath(pathStr, className='', stroke='none', fill='none') {
return createSVG('path', {
className: className,
@ -1358,10 +1366,10 @@ class BarChartController extends AxisChartController {
? m.options.stacked : m.noOfDatasets);
}
draw(x, yTop, color, index, offset=0) {
draw(x, yTop, color, label='', index=0, offset=0) {
let [height, y] = getBarHeightAndYAttr(yTop, this.meta.zeroLine);
return createSVG('rect', {
let rect = createSVG('rect', {
className: `bar mini`,
style: `fill: ${color}`,
'data-point-index': index,
@ -1370,6 +1378,22 @@ class BarChartController extends AxisChartController {
width: this.consts.width,
height: height || this.consts.minHeight
});
if(!label && !label.length) {
return rect;
} else {
let text = createSVG('text', {
className: 'data-point-value',
x: x,
y: y - offset,
dy: (FONT_SIZE / 2 * -1) + 'px',
'font-size': FONT_SIZE + 'px',
'text-anchor': 'middle',
innerHTML: label
});
return wrapInSVGGroup([rect, text]);
}
}
animate(bar, x, yTop, index, noOfDatasets) {
@ -1395,14 +1419,30 @@ class LineChartController extends AxisChartController {
};
}
draw(x, y, color, index) {
return createSVG('circle', {
draw(x, y, color, label='', index=0) {
let dot = createSVG('circle', {
style: `fill: ${color}`,
'data-point-index': index,
cx: x,
cy: y,
r: this.consts.radius
});
if(!label && !label.length) {
return dot;
} else {
let text = createSVG('text', {
className: 'data-point-value',
x: x,
y: y,
dy: (FONT_SIZE / 2 * -1 - this.consts.radius) + 'px',
'font-size': FONT_SIZE + 'px',
'text-anchor': 'middle',
innerHTML: label
});
return wrapInSVGGroup([dot, text]);
}
}
animate(dot, x, yTop) {
@ -1715,6 +1755,7 @@ class AxisChart extends BaseChart {
constructor(args) {
super(args);
this.isSeries = args.isSeries;
this.valuesOverPoints = args.valuesOverPoints;
this.formatTooltipY = args.formatTooltipY;
this.formatTooltipX = args.formatTooltipX;
this.barOptions = args.barOptions;
@ -2068,17 +2109,14 @@ class AxisChart extends BaseChart {
make: () => {
let d = this.state.datasets[index];
console.log('d.positions', d.positions);
console.log('d.cumulativePositions', d.cumulativePositions);
console.log('d.cumulativeYs', d.cumulativeYs);
return d.positions.map((y, j) => {
return unitRenderer.draw(
this.state.xAxisPositions[j],
y,
this.colors[index],
j
,
(this.valuesOverPoints ? (this.barOptions &&
this.barOptions.stacked ? d.cumulativeYs[j] : d.values[j]) : ''),
j,
y - (d.cumulativePositions ? d.cumulativePositions[j] : y)
);
});
@ -2190,10 +2228,6 @@ class AxisChart extends BaseChart {
});
}
// getXMarkerLines() {
// return [];
// }
getYRegions() {
if(!this.data.yRegions) {
return [];

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -51,7 +51,8 @@ let bar_composite_chart = new Chart ({
height: 180,
colors: ['orange'],
isNavigable: 1,
isSeries: 1
isSeries: 1,
valuesOverPoints: 1,
// regionFill: 1
});
@ -64,7 +65,8 @@ let line_composite_chart = new Chart ({
},
height: 180,
colors: ['green'],
isSeries: 1
isSeries: 1,
valuesOverPoints: 1,
});
bar_composite_chart.parent.addEventListener('data-select', (e) => {
@ -124,7 +126,7 @@ let type_data = {
{
name: "Yet Another",
values: [15, 20, -3, -15, 58, 12, -17, 37],
// chartType: 'line'
chartType: 'line'
}
// temp : Stacked
@ -147,12 +149,13 @@ let type_chart = new Chart({
parent: "#chart-types",
// title: "My Awesome Chart",
data: type_data,
type: 'line',
// type: 'bar',
height: 250,
colors: ['purple', 'magenta', 'light-blue'],
isSeries: 1,
xAxisMode: 'tick',
yAxisMode: 'span',
valuesOverPoints: 1,
barOptions: {
// stacked: 1
}
@ -382,7 +385,7 @@ let aggr_data = {
"values": [25, 40, 30, 35, 8, 52, 17]
},
{
"values": [25, 50, -10, 15, 18, 32, 27],
"values": [25, 50, 10, 15, 18, 32, 27],
}
]
};
@ -393,6 +396,7 @@ let aggr_chart = new Chart({
type: 'bar',
height: 250,
colors: ['light-green', 'blue'],
valuesOverPoints: 1,
barOptions: {
stacked: 1
}

14
src/js/charts/AxisChart.js
View File

@ -14,6 +14,7 @@ export default class AxisChart extends BaseChart {
constructor(args) {
super(args);
this.isSeries = args.isSeries;
this.valuesOverPoints = args.valuesOverPoints;
this.formatTooltipY = args.formatTooltipY;
this.formatTooltipX = args.formatTooltipX;
this.barOptions = args.barOptions;
@ -367,17 +368,14 @@ export default class AxisChart extends BaseChart {
make: () => {
let d = this.state.datasets[index];
console.log('d.positions', d.positions);
console.log('d.cumulativePositions', d.cumulativePositions);
console.log('d.cumulativeYs', d.cumulativeYs);
return d.positions.map((y, j) => {
return unitRenderer.draw(
this.state.xAxisPositions[j],
y,
this.colors[index],
j
,
(this.valuesOverPoints ? (this.barOptions &&
this.barOptions.stacked ? d.cumulativeYs[j] : d.values[j]) : ''),
j,
y - (d.cumulativePositions ? d.cumulativePositions[j] : y)
);
});
@ -489,10 +487,6 @@ export default class AxisChart extends BaseChart {
});
}
// getXMarkerLines() {
// return [];
// }
getYRegions() {
if(!this.data.yRegions) {
return [];

42
src/js/objects/AxisChartControllers.js
View File

@ -1,5 +1,5 @@
import { getBarHeightAndYAttr } from '../utils/draw-utils';
import { createSVG, makePath, makeGradient } from '../utils/draw';
import { createSVG, makePath, makeGradient, wrapInSVGGroup, FONT_SIZE } from '../utils/draw';
import { STD_EASING, UNIT_ANIM_DUR, MARKER_LINE_ANIM_DUR, PATH_ANIM_DUR } from '../utils/animate';
const MIN_BAR_PERCENT_HEIGHT = 0.01;
@ -69,10 +69,10 @@ export class BarChartController extends AxisChartController {
? m.options.stacked : m.noOfDatasets);
}
draw(x, yTop, color, index, offset=0) {
draw(x, yTop, color, label='', index=0, offset=0) {
let [height, y] = getBarHeightAndYAttr(yTop, this.meta.zeroLine);
return createSVG('rect', {
let rect = createSVG('rect', {
className: `bar mini`,
style: `fill: ${color}`,
'data-point-index': index,
@ -81,6 +81,22 @@ export class BarChartController extends AxisChartController {
width: this.consts.width,
height: height || this.consts.minHeight
});
if(!label && !label.length) {
return rect;
} else {
let text = createSVG('text', {
className: 'data-point-value',
x: x,
y: y - offset,
dy: (FONT_SIZE / 2 * -1) + 'px',
'font-size': FONT_SIZE + 'px',
'text-anchor': 'middle',
innerHTML: label
});
return wrapInSVGGroup([rect, text]);
}
}
animate(bar, x, yTop, index, noOfDatasets) {
@ -106,14 +122,30 @@ export class LineChartController extends AxisChartController {
};
}
draw(x, y, color, index) {
return createSVG('circle', {
draw(x, y, color, label='', index=0) {
let dot = createSVG('circle', {
style: `fill: ${color}`,
'data-point-index': index,
cx: x,
cy: y,
r: this.consts.radius
});
if(!label && !label.length) {
return dot;
} else {
let text = createSVG('text', {
className: 'data-point-value',
x: x,
y: y,
dy: (FONT_SIZE / 2 * -1 - this.consts.radius) + 'px',
'font-size': FONT_SIZE + 'px',
'text-anchor': 'middle',
innerHTML: label
});
return wrapInSVGGroup([dot, text]);
}
}
animate(dot, x, yTop) {

10
src/js/utils/draw.js
View File

@ -4,7 +4,7 @@ import { STD_EASING, UNIT_ANIM_DUR, MARKER_LINE_ANIM_DUR, PATH_ANIM_DUR } from '
const AXIS_TICK_LENGTH = 6;
const LABEL_MARGIN = 4;
const FONT_SIZE = 10;
export const FONT_SIZE = 10;
const BASE_LINE_COLOR = '#dadada';
const BASE_BG_COLOR = '#F7FAFC';
@ -88,6 +88,14 @@ export function makeSVGGroup(parent, className, transform='') {
});
}
export function wrapInSVGGroup(elements, className='') {
let g = createSVG('g', {
className: className
});
elements.forEach(e => g.appendChild(e));
return g;
}
export function makePath(pathStr, className='', stroke='none', fill='none') {
return createSVG('path', {
className: className,