jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

temp features

Browse Source
This commit is contained in:
pratu16x7 2017-12-08 23:34:08 +05:30
parent c32ea2a408
commit 405f8fb18b
12 changed files with 118 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -416,14 +416,15 @@ function makeText(className, x, y, content) {
});
}
function makeVertXLine(x, label, totalHeight, mode) {
function makeVertXLine(x, label, totalHeight, mode, stroke='#dadada') {
let height = mode === 'span' ? -1 * AXIS_TICK_LENGTH : totalHeight;
let l = createSVG('line', {
x1: 0,
x2: 0,
y1: totalHeight + AXIS_TICK_LENGTH,
y2: height
y2: height,
stroke: stroke
});
let text = createSVG('text', {
@ -449,7 +450,7 @@ function makeHoriYLine(y, label, totalWidth, mode, pos='left') {
let lineType = '';
let w2 = mode === 'span' ? totalWidth + AXIS_TICK_LENGTH : 0;
// temp
// temp : works correctly
let x1, x2, textX, anchor;
if(mode === 'tick') {
if(pos === 'right') {
@ -463,6 +464,11 @@ function makeHoriYLine(y, label, totalWidth, mode, pos='left') {
textX = -1 * (LABEL_MARGIN + AXIS_TICK_LENGTH);
anchor = 'end';
}
} else {
x1 = -1 * AXIS_TICK_LENGTH;
x2 = w2;
textX = -1 * (LABEL_MARGIN + AXIS_TICK_LENGTH);
anchor = 'end';
}
let l = createSVG('line', {
@ -511,15 +517,16 @@ class AxisChartRenderer {
this.yAxisMode = state.yAxisMode;
}
bar(x, yTop, args, color, index, datasetIndex, noOfDatasets) {
bar(x, yTop, args, color, index, datasetIndex, noOfDatasets, prevX, prevY) {
let totalWidth = this.unitWidth - args.spaceWidth;
let startX = x - totalWidth/2;
// temp
// temp commented
// let width = totalWidth / noOfDatasets;
// let currentX = startX + width * datasetIndex;
// temp
let width = totalWidth;
let currentX = startX;
@ -546,12 +553,13 @@ class AxisChartRenderer {
});
}
xLine(x, label, mode=this.xAxisMode) {
// temp: stroke
xLine(x, label, pos='bottom', stroke='', mode=this.xAxisMode) {
// Draw X axis line in span/tick mode with optional label
return makeVertXLine(x, label, this.totalHeight, mode);
}
yLine(y, label, mode=this.yAxisMode, pos='left') {
yLine(y, label, pos='left', mode=this.yAxisMode) {
return makeHoriYLine(y, label, this.totalWidth, mode, pos);
}
@ -821,7 +829,9 @@ class BaseChart {
// (draw everything, layers, groups, units)
this.calcWidth();
this.refresh(); // refresh conponent with chart a
// refresh conponent with chart
this.refresh();
this.makeChartArea();
this.setComponentParent();
@ -830,7 +840,8 @@ class BaseChart {
this.renderLegend();
this.setupNavigation(init);
this.renderComponents(); // first time plain render, so no rerender
// first time plain render, so no rerender
this.renderComponents();
if(this.config.animate) this.update(this.firstUpdateData);
}
@ -1023,13 +1034,13 @@ class IndexedChartComponent extends ChartComponent {
refresh(args) {
super.refresh(args);
this.indexLength = this.chartState[this.argsKeys[0]].length;
this.totalIndices = this.chartState[this.argsKeys[0]].length;
}
makeLayer() {
super.makeLayer();
this.layers = [];
for(var i = 0; i < this.indexLength; i++) {
for(var i = 0; i < this.totalIndices; i++) {
this.layers[i] = makeSVGGroup(this.layer, this.layerClass + '-' + i);
}
}
@ -1040,13 +1051,17 @@ class IndexedChartComponent extends ChartComponent {
let datasetArrays = this.argsKeys.map(key => this.chartState[key]);
// datasetArrays will have something like an array of X positions sets
// datasetArrays = [
// xUnitPositions, yUnitPositions, colors, unitTypes, yUnitValues
// ]
// where xUnitPositions = [[0,0,0], [1,1,1]]
// i.e.: [ [[0,0,0], [1,1,1]], ... ]
for(var i = 0; i < this.indexLength; i++) {
for(var i = 0; i < this.totalIndices; i++) {
let args = datasetArrays.map(datasetArray => datasetArray[i]);
args.unshift(this.chartRenderer);
args.push(i);
args.push(this.indexLength);
args.push(this.totalIndices);
this.stores.push(this.make(...args));
@ -1563,6 +1578,18 @@ class AxisChart extends BaseChart {
}
setupComponents() {
// temp : will be an indexedchartcomponent
// this.yAxisAux = new ChartComponent({
// layerClass: 'y axis aux',
// make: (renderer, positions, values) => {
// positions = [0, 70, 140, 270];
// values = [300, 200, 100, 0];
// return positions.map((position, i) => renderer.yLine(position, values[i], 'right'));
// },
// argsKeys: ['yAxisPositions', 'yAxisLabels'],
// animate: () => {}
// });
this.yAxis = new ChartComponent({
layerClass: 'y axis',
make: (renderer, positions, values) => {
@ -1604,10 +1631,12 @@ class AxisChart extends BaseChart {
);
});
let pointsList = yPosSet.map((y, i) => (xPosSet[i] + ',' + y));
let pointsStr = pointsList.join("L");
if(this.type === 'line') {
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;
},
@ -1626,9 +1655,9 @@ class AxisChart extends BaseChart {
// Marker Regions
// temp
this.components = [
this.yAxisAux,
// temp
// this.yAxisAux,
this.yAxis,
this.xAxis,
// this.yMarkerLines,

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:#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}
.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 .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

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

@ -88,6 +88,20 @@ let type_data = {
// label: "Yet Another",
// values: [15, 20, -3, -15, 58, 12, -17, 37]
// }
// temp : Stacked
// {
// label: "Some Data",
// values:[25, 30, 50, 45, 18, 12, 27, 14]
// },
// {
// label: "Another Set",
// values: [18, 20, 30, 35, 8, 7, 17, 4]
// },
// {
// label: "Another Set",
// values: [11, 8, 19, 15, 3, 4, 10, 2]
// },
]
};

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

@ -164,6 +164,18 @@ export default class AxisChart extends BaseChart {
}
setupComponents() {
// temp : will be an indexedchartcomponent
// this.yAxisAux = new ChartComponent({
// layerClass: 'y axis aux',
// make: (renderer, positions, values) => {
// positions = [0, 70, 140, 270];
// values = [300, 200, 100, 0];
// return positions.map((position, i) => renderer.yLine(position, values[i], 'right'));
// },
// argsKeys: ['yAxisPositions', 'yAxisLabels'],
// animate: () => {}
// });
this.yAxis = new ChartComponent({
layerClass: 'y axis',
make: (renderer, positions, values) => {
@ -191,7 +203,7 @@ export default class AxisChart extends BaseChart {
this.dataUnits = new IndexedChartComponent({
layerClass: 'dataset-units',
make: (renderer, xPosSet, yPosSet, color, unitType,
yValueSet, datasetIndex, noOfDatasets) => {
yValueSet, datasetIndex, noOfDatasets) => {;
let unitSet = yPosSet.map((y, i) => {
return renderer[unitType.type](
@ -205,10 +217,12 @@ export default class AxisChart extends BaseChart {
);
});
let pointsList = yPosSet.map((y, i) => (xPosSet[i] + ',' + y));
let pointsStr = pointsList.join("L");
if(this.type === 'line') {
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;
},
@ -227,9 +241,9 @@ export default class AxisChart extends BaseChart {
// Marker Regions
// temp
this.components = [
this.yAxisAux,
// temp
// this.yAxisAux,
this.yAxis,
this.xAxis,
// this.yMarkerLines,

7
src/js/charts/BaseChart.js
View File

@ -169,7 +169,9 @@ export default class BaseChart {
// (draw everything, layers, groups, units)
this.calcWidth();
this.refresh(); // refresh conponent with chart a
// refresh conponent with chart
this.refresh();
this.makeChartArea();
this.setComponentParent();
@ -178,7 +180,8 @@ export default class BaseChart {
this.renderLegend();
this.setupNavigation(init);
this.renderComponents(); // first time plain render, so no rerender
// first time plain render, so no rerender
this.renderComponents();
if(this.config.animate) this.update(this.firstUpdateData);
}

12
src/js/objects/ChartComponent.js
View File

@ -55,13 +55,13 @@ export class IndexedChartComponent extends ChartComponent {
refresh(args) {
super.refresh(args);
this.indexLength = this.chartState[this.argsKeys[0]].length;
this.totalIndices = this.chartState[this.argsKeys[0]].length;
}
makeLayer() {
super.makeLayer();
this.layers = [];
for(var i = 0; i < this.indexLength; i++) {
for(var i = 0; i < this.totalIndices; i++) {
this.layers[i] = makeSVGGroup(this.layer, this.layerClass + '-' + i);
}
}
@ -72,13 +72,17 @@ export class IndexedChartComponent extends ChartComponent {
let datasetArrays = this.argsKeys.map(key => this.chartState[key]);
// datasetArrays will have something like an array of X positions sets
// datasetArrays = [
// xUnitPositions, yUnitPositions, colors, unitTypes, yUnitValues
// ]
// where xUnitPositions = [[0,0,0], [1,1,1]]
// i.e.: [ [[0,0,0], [1,1,1]], ... ]
for(var i = 0; i < this.indexLength; i++) {
for(var i = 0; i < this.totalIndices; i++) {
let args = datasetArrays.map(datasetArray => datasetArray[i]);
args.unshift(this.chartRenderer);
args.push(i);
args.push(this.indexLength);
args.push(this.totalIndices);
this.stores.push(this.make(...args));

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

@ -138,14 +138,15 @@ export function makeText(className, x, y, content) {
});
}
export function makeVertXLine(x, label, totalHeight, mode) {
export function makeVertXLine(x, label, totalHeight, mode, stroke='#dadada') {
let height = mode === 'span' ? -1 * AXIS_TICK_LENGTH : totalHeight;
let l = createSVG('line', {
x1: 0,
x2: 0,
y1: totalHeight + AXIS_TICK_LENGTH,
y2: height
y2: height,
stroke: stroke
});
let text = createSVG('text', {
@ -171,7 +172,7 @@ export function makeHoriYLine(y, label, totalWidth, mode, pos='left') {
let lineType = '';
let w2 = mode === 'span' ? totalWidth + AXIS_TICK_LENGTH : 0;
// temp
// temp : works correctly
let x1, x2, textX, anchor;
if(mode === 'tick') {
if(pos === 'right') {
@ -185,6 +186,11 @@ export function makeHoriYLine(y, label, totalWidth, mode, pos='left') {
textX = -1 * (LABEL_MARGIN + AXIS_TICK_LENGTH);
anchor = 'end';
}
} else {
x1 = -1 * AXIS_TICK_LENGTH;
x2 = w2;
textX = -1 * (LABEL_MARGIN + AXIS_TICK_LENGTH);
anchor = 'end';
}
let l = createSVG('line', {
@ -233,15 +239,16 @@ export class AxisChartRenderer {
this.yAxisMode = state.yAxisMode;
}
bar(x, yTop, args, color, index, datasetIndex, noOfDatasets) {
bar(x, yTop, args, color, index, datasetIndex, noOfDatasets, prevX, prevY) {
let totalWidth = this.unitWidth - args.spaceWidth;
let startX = x - totalWidth/2;
// temp
// temp commented
// let width = totalWidth / noOfDatasets;
// let currentX = startX + width * datasetIndex;
// temp
let width = totalWidth;
let currentX = startX;
@ -268,12 +275,13 @@ export class AxisChartRenderer {
});
}
xLine(x, label, mode=this.xAxisMode) {
// temp: stroke
xLine(x, label, pos='bottom', stroke='', mode=this.xAxisMode) {
// Draw X axis line in span/tick mode with optional label
return makeVertXLine(x, label, this.totalHeight, mode);
}
yLine(y, label, mode=this.yAxisMode, pos='left') {
yLine(y, label, pos='left', mode=this.yAxisMode) {
return makeHoriYLine(y, label, this.totalWidth, mode, pos);
}

7
src/scss/charts.scss
View File

@ -52,9 +52,10 @@
}
.axis, .chart-label {
fill: #555b51;
line {
stroke: #dadada;
}
// temp commented
// line {
// stroke: #dadada;
// }
}
.percentage-graph {
.progress {