jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

make path for individual datatsets

Browse Source
This commit is contained in:
pratu16x7 2017-12-05 05:18:18 +05:30
parent 857225a9b7
commit ec04bab7d5
12 changed files with 174 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -500,8 +500,12 @@ class AxisChartRenderer {
let totalWidth = this.unitWidth - args.spaceWidth;
let startX = x - totalWidth/2;
let width = totalWidth / noOfDatasets;
let currentX = startX + width * datasetIndex;
// temp
// let width = totalWidth / noOfDatasets;
// let currentX = startX + width * datasetIndex;
let width = totalWidth;
let currentX = startX;
let [height, y] = getBarHeightAndYAttr(yTop, this.zeroLine, this.totalHeight);
@ -1463,7 +1467,7 @@ class AxisChart extends BaseChart {
this.configUnits();
// temp
s.unitTypes = new Array(s.noOfDatasets).fill(this.state.unitArgs);
s.unitTypes = s.datasets.map(d => d.unitArgs ? d.unitArgs : this.state.unitArgs);
}
calcXPositions() {
@ -1509,8 +1513,8 @@ class AxisChart extends BaseChart {
configUnits() {}
setUnitWidthAndXOffset() {
this.state.unitWidth = this.width/(this.state.datasetLength - 1);
this.state.xOffset = 0;
this.state.unitWidth = this.width/(this.state.datasetLength);
this.state.xOffset = this.state.unitWidth/2;
}
getAllYValues() {
@ -1566,7 +1570,7 @@ class AxisChart extends BaseChart {
make: (renderer, xPosSet, yPosSet, color, unitType,
yValueSet, datasetIndex, noOfDatasets) => {
return yPosSet.map((y, i) => {
let unitSet = yPosSet.map((y, i) => {
return renderer[unitType.type](
xPosSet[i],
y,
@ -1577,12 +1581,26 @@ class AxisChart extends BaseChart {
noOfDatasets
);
});
// temp
if(unitType.type === 'dot') {
let pointsList = yPosSet.map((y, i) => (xPosSet[i] + ',' + y));
let pointsStr = pointsList.join("L");
unitSet.unshift(makePath("M"+pointsStr, 'line-graph-path', color));
}
return unitSet;
},
argsKeys: ['xUnitPositions', 'yUnitPositions',
'colors', 'unitTypes', 'yUnitValues'],
animate: () => {}
});
// TODO: rebind new units
// if(this.isNavigable) {
// this.bind_units(units_array);
// }
this.yMarkerLines = {};
this.xMarkerLines = {};
@ -1612,10 +1630,10 @@ class BarChart extends AxisChart {
this.config.yAxisMode = args.yAxisMode || 'span';
}
setUnitWidthAndXOffset() {
this.state.unitWidth = this.width/(this.state.datasetLength + 1);
this.state.xOffset = this.state.unitWidth;
}
// setUnitWidthAndXOffset() {
// this.state.unitWidth = this.width/(this.state.datasetLength);
// this.state.xOffset = this.state.unitWidth/2;
// }
configUnits() {
this.state.unitArgs = {
@ -1712,6 +1730,52 @@ class LineChart extends AxisChart {
};
}
// // temp
// setUnitWidthAndXOffset() {
// this.state.unitWidth = this.width/(this.state.datasetLength - 1);
// this.state.xOffset = 0;
// }
// setupComponents() {
// super.setupComponents();
// this.paths = new IndexedChartComponent({
// layerClass: 'path',
// make: (renderer, xPosSet, yPosSet, color, unitType,
// yValueSet, datasetIndex, noOfDatasets) => {
// let pointsList = yPosSet.map((y, i) => (xPosSet[i] + ',' + y));
// let pointsStr = pointsList.join("L");
// return [makePath("M"+pointsStr, 'line-graph-path', color)];
// },
// argsKeys: ['xUnitPositions', 'yUnitPositions',
// 'colors', 'unitTypes', 'yUnitValues'],
// animate: () => {}
// });
// this.components.push(this.paths);
// }
make_path(d, x_positions, y_positions, color) {
let pointsList = y_positions.map((y, i) => (x_positions[i] + ',' + y));
let pointsStr = pointsList.join("L");
this.paths_groups[d.index].textContent = '';
d.path = makePath("M"+pointsStr, 'line-graph-path', color);
this.paths_groups[d.index].appendChild(d.path);
if(this.heatline) {
let gradient_id = makeGradient(this.svg_defs, color);
d.path.style.stroke = `url(#${gradient_id})`;
}
if(this.regionFill) {
this.fill_region_for_dataset(d, color, pointsStr);
}
}
setupPreUnitLayers() {
// Path groups
this.paths_groups = [];
@ -1737,28 +1801,9 @@ class LineChart extends AxisChart {
});
}
make_path(d, x_positions, y_positions, color) {
let points_list = y_positions.map((y, i) => (x_positions[i] + ',' + y));
let points_str = points_list.join("L");
this.paths_groups[d.index].textContent = '';
d.path = makePath("M"+points_str, 'line-graph-path', color);
this.paths_groups[d.index].appendChild(d.path);
if(this.heatline) {
let gradient_id = makeGradient(this.svg_defs, color);
d.path.style.stroke = `url(#${gradient_id})`;
}
if(this.regionFill) {
this.fill_region_for_dataset(d, color, points_str);
}
}
fill_region_for_dataset(d, color, points_str) {
fill_region_for_dataset(d, color, pointsStr) {
let gradient_id = makeGradient(this.svg_defs, color, true);
let pathStr = "M" + `0,${this.zeroLine}L` + points_str + `L${this.width},${this.zeroLine}`;
let pathStr = "M" + `0,${this.zeroLine}L` + pointsStr + `L${this.width},${this.zeroLine}`;
d.regionPath = makePath(pathStr, `region-fill`, 'none', `url(#${gradient_id})`);
this.paths_groups[d.index].appendChild(d.regionPath);

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 .data-points circle{stroke:#fff;stroke-width:2}.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: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}

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

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

@ -323,8 +323,11 @@ 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],
"unitArgs": {
type: 'dot',
args: { radius: 4 }
},
}
]
};
@ -334,7 +337,7 @@ let aggr_chart = new Chart({
data: aggr_data,
type: 'bar',
height: 250,
colors: ['purple', 'orange'],
colors: ['light-green', 'blue'],
});
document.querySelector('[data-aggregation="sums"]').addEventListener("click", (e) => {

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

@ -1,7 +1,7 @@
import BaseChart from './BaseChart';
import { ChartComponent, IndexedChartComponent } from '../objects/ChartComponent';
import { getOffset, fire } from '../utils/dom';
import { AxisChartRenderer } from '../utils/draw';
import { AxisChartRenderer, makePath, makeGradient } from '../utils/draw';
import { equilizeNoOfElements } from '../utils/draw-utils';
import { Animator } from '../utils/animate';
import { runSMILAnimation } from '../utils/animation';
@ -84,7 +84,7 @@ export default class AxisChart extends BaseChart {
this.configUnits();
// temp
s.unitTypes = new Array(s.noOfDatasets).fill(this.state.unitArgs);
s.unitTypes = s.datasets.map(d => d.unitArgs ? d.unitArgs : this.state.unitArgs);
}
calcXPositions() {
@ -130,8 +130,8 @@ export default class AxisChart extends BaseChart {
configUnits() {}
setUnitWidthAndXOffset() {
this.state.unitWidth = this.width/(this.state.datasetLength - 1);
this.state.xOffset = 0;
this.state.unitWidth = this.width/(this.state.datasetLength);
this.state.xOffset = this.state.unitWidth/2;
}
getAllYValues() {
@ -187,7 +187,7 @@ export default class AxisChart extends BaseChart {
make: (renderer, xPosSet, yPosSet, color, unitType,
yValueSet, datasetIndex, noOfDatasets) => {
return yPosSet.map((y, i) => {
let unitSet = yPosSet.map((y, i) => {
return renderer[unitType.type](
xPosSet[i],
y,
@ -198,12 +198,26 @@ export default class AxisChart extends BaseChart {
noOfDatasets
);
});
// temp
if(unitType.type === 'dot') {
let pointsList = yPosSet.map((y, i) => (xPosSet[i] + ',' + y));
let pointsStr = pointsList.join("L");
unitSet.unshift(makePath("M"+pointsStr, 'line-graph-path', color));
}
return unitSet;
},
argsKeys: ['xUnitPositions', 'yUnitPositions',
'colors', 'unitTypes', 'yUnitValues'],
animate: () => {}
});
// TODO: rebind new units
// if(this.isNavigable) {
// this.bind_units(units_array);
// }
this.yMarkerLines = {};
this.xMarkerLines = {};

8
src/js/charts/BarChart.js
View File

@ -13,10 +13,10 @@ export default class BarChart extends AxisChart {
this.config.yAxisMode = args.yAxisMode || 'span';
}
setUnitWidthAndXOffset() {
this.state.unitWidth = this.width/(this.state.datasetLength + 1);
this.state.xOffset = this.state.unitWidth;
}
// setUnitWidthAndXOffset() {
// this.state.unitWidth = this.width/(this.state.datasetLength);
// this.state.xOffset = this.state.unitWidth/2;
// }
configUnits() {
this.state.unitArgs = {

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

@ -32,6 +32,52 @@ export default class LineChart extends AxisChart {
};
}
// // temp
// setUnitWidthAndXOffset() {
// this.state.unitWidth = this.width/(this.state.datasetLength - 1);
// this.state.xOffset = 0;
// }
// setupComponents() {
// super.setupComponents();
// this.paths = new IndexedChartComponent({
// layerClass: 'path',
// make: (renderer, xPosSet, yPosSet, color, unitType,
// yValueSet, datasetIndex, noOfDatasets) => {
// let pointsList = yPosSet.map((y, i) => (xPosSet[i] + ',' + y));
// let pointsStr = pointsList.join("L");
// return [makePath("M"+pointsStr, 'line-graph-path', color)];
// },
// argsKeys: ['xUnitPositions', 'yUnitPositions',
// 'colors', 'unitTypes', 'yUnitValues'],
// animate: () => {}
// });
// this.components.push(this.paths);
// }
make_path(d, x_positions, y_positions, color) {
let pointsList = y_positions.map((y, i) => (x_positions[i] + ',' + y));
let pointsStr = pointsList.join("L");
this.paths_groups[d.index].textContent = '';
d.path = makePath("M"+pointsStr, 'line-graph-path', color);
this.paths_groups[d.index].appendChild(d.path);
if(this.heatline) {
let gradient_id = makeGradient(this.svg_defs, color);
d.path.style.stroke = `url(#${gradient_id})`;
}
if(this.regionFill) {
this.fill_region_for_dataset(d, color, pointsStr);
}
}
setupPreUnitLayers() {
// Path groups
this.paths_groups = [];
@ -57,28 +103,9 @@ export default class LineChart extends AxisChart {
});
}
make_path(d, x_positions, y_positions, color) {
let points_list = y_positions.map((y, i) => (x_positions[i] + ',' + y));
let points_str = points_list.join("L");
this.paths_groups[d.index].textContent = '';
d.path = makePath("M"+points_str, 'line-graph-path', color);
this.paths_groups[d.index].appendChild(d.path);
if(this.heatline) {
let gradient_id = makeGradient(this.svg_defs, color);
d.path.style.stroke = `url(#${gradient_id})`;
}
if(this.regionFill) {
this.fill_region_for_dataset(d, color, points_str);
}
}
fill_region_for_dataset(d, color, points_str) {
fill_region_for_dataset(d, color, pointsStr) {
let gradient_id = makeGradient(this.svg_defs, color, true);
let pathStr = "M" + `0,${this.zeroLine}L` + points_str + `L${this.width},${this.zeroLine}`;
let pathStr = "M" + `0,${this.zeroLine}L` + pointsStr + `L${this.width},${this.zeroLine}`;
d.regionPath = makePath(pathStr, `region-fill`, 'none', `url(#${gradient_id})`);
this.paths_groups[d.index].appendChild(d.regionPath);

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

@ -222,8 +222,12 @@ export class AxisChartRenderer {
let totalWidth = this.unitWidth - args.spaceWidth;
let startX = x - totalWidth/2;
let width = totalWidth / noOfDatasets;
let currentX = startX + width * datasetIndex;
// temp
// let width = totalWidth / noOfDatasets;
// let currentX = startX + width * datasetIndex;
let width = totalWidth;
let currentX = startX;
let [height, y] = getBarHeightAndYAttr(yTop, this.zeroLine, this.totalHeight);

12
src/scss/charts.scss
View File

@ -61,11 +61,19 @@
margin-bottom: 0px;
}
}
.data-points {
.dataset-units {
// temp
circle {
stroke: #fff;
stroke: blue;
stroke-width: 2;
}
// temp
path {
fill: none;
stroke-opacity: 1;
stroke-width: 2px;
}
}
.path-group {
path {