jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[domain settings] add dynamic field if not present

Browse Source
This commit is contained in:
pratu16x7 2017-12-05 07:32:39 +05:30
parent ec04bab7d5
commit c32ea2a408
11 changed files with 106 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -445,24 +445,40 @@ function makeVertXLine(x, label, totalHeight, mode) {
return line;
}
function makeHoriYLine(y, label, totalWidth, mode) {
function makeHoriYLine(y, label, totalWidth, mode, pos='left') {
let lineType = '';
let width = mode === 'span' ? totalWidth + AXIS_TICK_LENGTH : AXIS_TICK_LENGTH;
let w2 = mode === 'span' ? totalWidth + AXIS_TICK_LENGTH : 0;
// temp
let x1, x2, textX, anchor;
if(mode === 'tick') {
if(pos === 'right') {
x1 = totalWidth;
x2 = totalWidth + AXIS_TICK_LENGTH;
textX = totalWidth + AXIS_TICK_LENGTH + LABEL_MARGIN;
anchor = 'start';
} else {
x1 = -1 * AXIS_TICK_LENGTH;
x2 = w2;
textX = -1 * (LABEL_MARGIN + AXIS_TICK_LENGTH);
anchor = 'end';
}
}
let l = createSVG('line', {
className: lineType === "dashed" ? "dashed": "",
x1: -1 * AXIS_TICK_LENGTH,
x2: width,
x1: x1,
x2: x2,
y1: 0,
y2: 0
});
let text = createSVG('text', {
x: -1 * (LABEL_MARGIN + AXIS_TICK_LENGTH),
x: textX,
y: 0,
dy: (FONT_SIZE / 2 - 2) + 'px',
'font-size': FONT_SIZE + 'px',
'text-anchor': 'end',
'text-anchor': anchor,
innerHTML: label+""
});
@ -535,8 +551,8 @@ class AxisChartRenderer {
return makeVertXLine(x, label, this.totalHeight, mode);
}
yLine(y, label, mode=this.yAxisMode) {
return makeHoriYLine(y, label, this.totalWidth, mode);
yLine(y, label, mode=this.yAxisMode, pos='left') {
return makeHoriYLine(y, label, this.totalWidth, mode, pos);
}
xMarker() {}
@ -1562,7 +1578,13 @@ class AxisChart extends BaseChart {
return positions.map((position, i) => renderer.xLine(position, values[i]));
},
argsKeys: ['xAxisPositions', 'xAxisLabels'],
animate: () => {}
animate: (animator, lines, oldX, newX) => {
lines.map((xLine, i) => {
elements_to_animate.push(animator.verticalLine(
xLine, newX[i], oldX[i]
));
});
}
});
this.dataUnits = new IndexedChartComponent({
@ -1582,13 +1604,11 @@ class AxisChart extends BaseChart {
);
});
// temp
if(unitType.type === 'dot') {
let pointsList = yPosSet.map((y, i) => (xPosSet[i] + ',' + y));
let pointsStr = pointsList.join("L");
let pointsList = yPosSet.map((y, i) => (xPosSet[i] + ',' + y));
let pointsStr = pointsList.join("L");
unitSet.unshift(makePath("M"+pointsStr, 'line-graph-path', color));
unitSet.unshift(makePath("M"+pointsStr, 'line-graph-path', color));
}
return unitSet;
},
argsKeys: ['xUnitPositions', 'yUnitPositions',
@ -1606,7 +1626,9 @@ class AxisChart extends BaseChart {
// Marker Regions
// temp
this.components = [
this.yAxisAux,
this.yAxis,
this.xAxis,
// this.yMarkerLines,
@ -1714,7 +1736,10 @@ class LineChart extends AxisChart {
configure(args) {
super.configure(args);
this.config.xAxisMode = args.xAxisMode || 'span';
this.config.yAxisMode = args.yAxisMode || 'span';
// this.config.yAxisMode = args.yAxisMode || 'span';
// temp
this.config.yAxisMode = args.yAxisMode || 'tick';
this.config.dotRadius = args.dotRadius || 4;
@ -1730,11 +1755,11 @@ class LineChart extends AxisChart {
};
}
// // temp
// setUnitWidthAndXOffset() {
// this.state.unitWidth = this.width/(this.state.datasetLength - 1);
// this.state.xOffset = 0;
// }
// temp commented
setUnitWidthAndXOffset() {
this.state.unitWidth = this.width/(this.state.datasetLength - 1);
this.state.xOffset = 0;
}
// setupComponents() {
// super.setupComponents();

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.css vendored
View File

@ -1 +1 @@
.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:blue;stroke-width:2}.chart-container .dataset-units path,.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}
.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path,.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}

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

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

@ -78,26 +78,26 @@ let type_data = {
datasets: [
{
label: "Some Data",
values: [25, 40, 30, 35, 8, 52, 17, -4]
values: [18, 40, 30, 35, 8, 52, 17, -4]
},
{
label: "Another Set",
values: [25, 50, -10, 15, 18, 32, 27, 14]
values: [30, 50, -10, 15, 18, 32, 27, 14]
},
{
label: "Yet Another",
values: [15, 20, -3, -15, 58, 12, -17, 37]
}
// {
// label: "Yet Another",
// values: [15, 20, -3, -15, 58, 12, -17, 37]
// }
]
};
let type_chart = new Chart({
parent: "#chart-types",
title: "My Awesome Chart",
// title: "My Awesome Chart",
data: type_data,
type: 'bar',
height: 250,
colors: ['light-blue', 'violet', 'blue'],
colors: ['purple', 'magenta'],
is_series: 1,
format_tooltip_x: d => (d + '').toUpperCase(),
format_tooltip_y: d => d + ' pts'

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

@ -179,7 +179,13 @@ export default class AxisChart extends BaseChart {
return positions.map((position, i) => renderer.xLine(position, values[i]));
},
argsKeys: ['xAxisPositions', 'xAxisLabels'],
animate: () => {}
animate: (animator, lines, oldX, newX) => {
lines.map((xLine, i) => {
elements_to_animate.push(animator.verticalLine(
xLine, newX[i], oldX[i]
));
});
}
});
this.dataUnits = new IndexedChartComponent({
@ -199,13 +205,11 @@ export default class AxisChart extends BaseChart {
);
});
// temp
if(unitType.type === 'dot') {
let pointsList = yPosSet.map((y, i) => (xPosSet[i] + ',' + y));
let pointsStr = pointsList.join("L");
let pointsList = yPosSet.map((y, i) => (xPosSet[i] + ',' + y));
let pointsStr = pointsList.join("L");
unitSet.unshift(makePath("M"+pointsStr, 'line-graph-path', color));
unitSet.unshift(makePath("M"+pointsStr, 'line-graph-path', color));
}
return unitSet;
},
argsKeys: ['xUnitPositions', 'yUnitPositions',
@ -223,7 +227,9 @@ export default class AxisChart extends BaseChart {
// Marker Regions
// temp
this.components = [
this.yAxisAux,
this.yAxis,
this.xAxis,
// this.yMarkerLines,

15
src/js/charts/LineChart.js
View File

@ -16,7 +16,10 @@ export default class LineChart extends AxisChart {
configure(args) {
super.configure(args);
this.config.xAxisMode = args.xAxisMode || 'span';
this.config.yAxisMode = args.yAxisMode || 'span';
// this.config.yAxisMode = args.yAxisMode || 'span';
// temp
this.config.yAxisMode = args.yAxisMode || 'tick';
this.config.dotRadius = args.dotRadius || 4;
@ -32,11 +35,11 @@ export default class LineChart extends AxisChart {
};
}
// // temp
// setUnitWidthAndXOffset() {
// this.state.unitWidth = this.width/(this.state.datasetLength - 1);
// this.state.xOffset = 0;
// }
// temp commented
setUnitWidthAndXOffset() {
this.state.unitWidth = this.width/(this.state.datasetLength - 1);
this.state.xOffset = 0;
}
// setupComponents() {
// super.setupComponents();

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

@ -167,24 +167,40 @@ export function makeVertXLine(x, label, totalHeight, mode) {
return line;
}
export function makeHoriYLine(y, label, totalWidth, mode) {
export function makeHoriYLine(y, label, totalWidth, mode, pos='left') {
let lineType = '';
let width = mode === 'span' ? totalWidth + AXIS_TICK_LENGTH : AXIS_TICK_LENGTH;
let w2 = mode === 'span' ? totalWidth + AXIS_TICK_LENGTH : 0;
// temp
let x1, x2, textX, anchor;
if(mode === 'tick') {
if(pos === 'right') {
x1 = totalWidth;
x2 = totalWidth + AXIS_TICK_LENGTH;
textX = totalWidth + AXIS_TICK_LENGTH + LABEL_MARGIN;
anchor = 'start';
} else {
x1 = -1 * AXIS_TICK_LENGTH;
x2 = w2;
textX = -1 * (LABEL_MARGIN + AXIS_TICK_LENGTH);
anchor = 'end';
}
}
let l = createSVG('line', {
className: lineType === "dashed" ? "dashed": "",
x1: -1 * AXIS_TICK_LENGTH,
x2: width,
x1: x1,
x2: x2,
y1: 0,
y2: 0
});
let text = createSVG('text', {
x: -1 * (LABEL_MARGIN + AXIS_TICK_LENGTH),
x: textX,
y: 0,
dy: (FONT_SIZE / 2 - 2) + 'px',
'font-size': FONT_SIZE + 'px',
'text-anchor': 'end',
'text-anchor': anchor,
innerHTML: label+""
});
@ -257,8 +273,8 @@ export class AxisChartRenderer {
return makeVertXLine(x, label, this.totalHeight, mode);
}
yLine(y, label, mode=this.yAxisMode) {
return makeHoriYLine(y, label, this.totalWidth, mode);
yLine(y, label, mode=this.yAxisMode, pos='left') {
return makeHoriYLine(y, label, this.totalWidth, mode, pos);
}
xMarker() {}

3
src/scss/charts.scss
View File

@ -62,9 +62,8 @@
}
}
.dataset-units {
// temp
circle {
stroke: blue;
stroke: #fff;
stroke-width: 2;
}