Pārlūkot izejas kodu

[minor] constants for margins

tags/1.2.0
Prateeksha Singh pirms 7 gadiem
vecāks
revīzija
b76375482c
13 mainītis faili ar 1304 papildinājumiem un 1320 dzēšanām
  1. +1274
    -1268
      dist/frappe-charts.esm.js
  2. +1
    -1
      dist/frappe-charts.min.cjs.js
  3. +1
    -1
      dist/frappe-charts.min.esm.js
  4. +1
    -1
      dist/frappe-charts.min.iife.js
  5. +1
    -1
      dist/frappe-charts.min.iife.js.map
  6. +1
    -1
      docs/assets/js/frappe-charts.min.js
  7. +1
    -1
      docs/assets/js/frappe-charts.min.js.map
  8. +1
    -14
      src/js/chart.js
  9. +4
    -4
      src/js/charts/AxisChart.js
  10. +10
    -9
      src/js/charts/BaseChart.js
  11. +2
    -2
      src/js/charts/MultiAxisChart.js
  12. +7
    -1
      src/js/utils/constants.js
  13. +0
    -16
      src/js/utils/draw.js

+ 1274
- 1268
dist/frappe-charts.esm.js
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 1
- 1
dist/frappe-charts.min.cjs.js
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 1
- 1
dist/frappe-charts.min.esm.js
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 1
- 1
dist/frappe-charts.min.iife.js
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 1
- 1
dist/frappe-charts.min.iife.js.map
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 1
- 1
docs/assets/js/frappe-charts.min.js
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 1
- 1
docs/assets/js/frappe-charts.min.js.map
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 1
- 14
src/js/chart.js Parādīt failu

@@ -1,24 +1,11 @@
import '../scss/charts.scss'; import '../scss/charts.scss';


import MultiAxisChart from './charts/MultiAxisChart';
// import MultiAxisChart from './charts/MultiAxisChart';
import PercentageChart from './charts/PercentageChart'; import PercentageChart from './charts/PercentageChart';
import PieChart from './charts/PieChart'; import PieChart from './charts/PieChart';
import Heatmap from './charts/Heatmap'; import Heatmap from './charts/Heatmap';
import AxisChart from './charts/AxisChart'; import AxisChart from './charts/AxisChart';


// if (ENV !== 'production') {
// // Enable LiveReload
// document.write(
// '<script src="http://' + (location.host || 'localhost').split(':')[0] +
// ':35729/livereload.js?snipver=1"></' + 'script>'
// );
// }

// If type is bar




const chartTypes = { const chartTypes = {
// multiaxis: MultiAxisChart, // multiaxis: MultiAxisChart,
percentage: PercentageChart, percentage: PercentageChart,


+ 4
- 4
src/js/charts/AxisChart.js Parādīt failu

@@ -33,8 +33,8 @@ export default class AxisChart extends BaseChart {


setMargins() { setMargins() {
super.setMargins(); super.setMargins();
this.translateXLeft = Y_AXIS_MARGIN;
this.translateXRight = Y_AXIS_MARGIN;
this.leftMargin = Y_AXIS_MARGIN;
this.rightMargin = Y_AXIS_MARGIN;
} }


prepareData(data=this.data) { prepareData(data=this.data) {
@@ -315,7 +315,7 @@ export default class AxisChart extends BaseChart {
// NOTE: could be in tooltip itself, as it is a given functionality for its parent // NOTE: could be in tooltip itself, as it is a given functionality for its parent
this.chartWrapper.addEventListener('mousemove', (e) => { this.chartWrapper.addEventListener('mousemove', (e) => {
let o = getOffset(this.chartWrapper); let o = getOffset(this.chartWrapper);
let relX = e.pageX - o.left - this.translateXLeft;
let relX = e.pageX - o.left - this.leftMargin;
let relY = e.pageY - o.top - this.translateY; let relY = e.pageY - o.top - this.translateY;


if(relY < this.height + this.translateY * 2) { if(relY < this.height + this.translateY * 2) {
@@ -341,7 +341,7 @@ export default class AxisChart extends BaseChart {
let xVal = s.xAxis.positions[i]; let xVal = s.xAxis.positions[i];
// let delta = i === 0 ? s.unitWidth : xVal - s.xAxis.positions[i-1]; // let delta = i === 0 ? s.unitWidth : xVal - s.xAxis.positions[i-1];
if(relX > xVal - s.unitWidth/2) { if(relX > xVal - s.unitWidth/2) {
let x = xVal + this.translateXLeft;
let x = xVal + this.leftMargin;
let y = s.yExtremes[i] + this.translateY; let y = s.yExtremes[i] + this.translateY;


let values = this.data.datasets.map((set, j) => { let values = this.data.datasets.map((set, j) => {


+ 10
- 9
src/js/charts/BaseChart.js Parādīt failu

@@ -2,6 +2,8 @@ import SvgTip from '../objects/SvgTip';
import { $, isElementInViewport, getElementContentWidth } from '../utils/dom'; import { $, isElementInViewport, getElementContentWidth } from '../utils/dom';
import { makeSVGContainer, makeSVGDefs, makeSVGGroup } from '../utils/draw'; import { makeSVGContainer, makeSVGDefs, makeSVGGroup } from '../utils/draw';
import { getStringWidth } from '../utils/helpers'; import { getStringWidth } from '../utils/helpers';
import { VERT_SPACE_OUTSIDE_BASE_CHART, TRANSLATE_Y_BASE_CHART, LEFT_MARGIN_BASE_CHART,
RIGHT_MARGIN_BASE_CHART, INIT_CHART_UPDATE_TIMEOUT, CHART_POST_ANIMATE_TIMEOUT } from '../utils/constants';
import { getColor, DEFAULT_COLORS } from '../utils/colors'; import { getColor, DEFAULT_COLORS } from '../utils/colors';
import { getDifferentChart } from '../config'; import { getDifferentChart } from '../config';
import { runSMILAnimation } from '../utils/animation'; import { runSMILAnimation } from '../utils/animation';
@@ -77,15 +79,14 @@ export default class BaseChart {
} }


setMargins() { setMargins() {
// TODO: think for all
let height = this.argHeight; let height = this.argHeight;
this.baseHeight = height; this.baseHeight = height;
this.height = height - 40; // change
this.translateY = 20;
this.height = height - VERT_SPACE_OUTSIDE_BASE_CHART;
this.translateY = TRANSLATE_Y_BASE_CHART;


// Horizontal margins // Horizontal margins
this.translateXLeft = 60;
this.translateXRight = 40;
this.leftMargin = LEFT_MARGIN_BASE_CHART;
this.rightMargin = RIGHT_MARGIN_BASE_CHART;
} }


validate(){ validate(){
@@ -154,7 +155,7 @@ export default class BaseChart {
// TODO: remove timeout and decrease post animate time in chart component // TODO: remove timeout and decrease post animate time in chart component
if(init) { if(init) {
this.data = this.realData; this.data = this.realData;
setTimeout(() => {this.update();}, 400);
setTimeout(() => {this.update();}, INIT_CHART_UPDATE_TIMEOUT);
} }


this.renderLegend(); this.renderLegend();
@@ -171,7 +172,7 @@ export default class BaseChart {
// } // }
// }); // });
this.baseWidth = getElementContentWidth(this.parent) - outerAnnotationsWidth; this.baseWidth = getElementContentWidth(this.parent) - outerAnnotationsWidth;
this.width = this.baseWidth - (this.translateXLeft + this.translateXRight);
this.width = this.baseWidth - (this.leftMargin + this.rightMargin);
} }


update(data=this.data) { update(data=this.data) {
@@ -206,7 +207,7 @@ export default class BaseChart {
setTimeout(() => { setTimeout(() => {
components.forEach(c => c.make()); components.forEach(c => c.make());
this.updateNav(); this.updateNav();
}, 400);
}, CHART_POST_ANIMATE_TIMEOUT);
} else { } else {
this.updateNav(); this.updateNav();
} }
@@ -246,7 +247,7 @@ export default class BaseChart {
this.drawArea = makeSVGGroup( this.drawArea = makeSVGGroup(
this.svg, this.svg,
this.type + '-chart', this.type + '-chart',
`translate(${this.translateXLeft}, ${this.translateY})`
`translate(${this.leftMargin}, ${this.translateY})`
); );
} }




+ 2
- 2
src/js/charts/MultiAxisChart.js Parādīt failu

@@ -17,8 +17,8 @@ export default class MultiAxisChart extends AxisChart {
setMargins() { setMargins() {
super.setMargins(); super.setMargins();
let noOfLeftAxes = this.data.datasets.filter(d => d.axisPosition === 'left').length; let noOfLeftAxes = this.data.datasets.filter(d => d.axisPosition === 'left').length;
this.translateXLeft = (noOfLeftAxes) * Y_AXIS_MARGIN || Y_AXIS_MARGIN;
this.translateXRight = (this.data.datasets.length - noOfLeftAxes) * Y_AXIS_MARGIN || Y_AXIS_MARGIN;
this.leftMargin = (noOfLeftAxes) * Y_AXIS_MARGIN || Y_AXIS_MARGIN;
this.rightMargin = (this.data.datasets.length - noOfLeftAxes) * Y_AXIS_MARGIN || Y_AXIS_MARGIN;
} }


prepareYAxis() { } prepareYAxis() { }


+ 7
- 1
src/js/utils/constants.js Parādīt failu

@@ -1,5 +1,12 @@
export const VERT_SPACE_OUTSIDE_BASE_CHART = 40;
export const TRANSLATE_Y_BASE_CHART = 20;
export const LEFT_MARGIN_BASE_CHART = 60;
export const RIGHT_MARGIN_BASE_CHART = 40;
export const Y_AXIS_MARGIN = 60; export const Y_AXIS_MARGIN = 60;


export const INIT_CHART_UPDATE_TIMEOUT = 400;
export const CHART_POST_ANIMATE_TIMEOUT = 400;

export const DEFAULT_AXIS_CHART_TYPE = 'line'; export const DEFAULT_AXIS_CHART_TYPE = 'line';
export const AXIS_DATASET_CHART_TYPES = ['line', 'bar']; export const AXIS_DATASET_CHART_TYPES = ['line', 'bar'];


@@ -7,5 +14,4 @@ export const BAR_CHART_SPACE_RATIO = 0.5;
export const MIN_BAR_PERCENT_HEIGHT = 0.01; export const MIN_BAR_PERCENT_HEIGHT = 0.01;


export const LINE_CHART_DOT_SIZE = 4; export const LINE_CHART_DOT_SIZE = 4;

export const DOT_OVERLAY_SIZE_INCR = 4; export const DOT_OVERLAY_SIZE_INCR = 4;

+ 0
- 16
src/js/utils/draw.js Parādīt failu

@@ -3,22 +3,6 @@ import { getStringWidth } from './helpers';
import { STD_EASING, UNIT_ANIM_DUR, MARKER_LINE_ANIM_DUR, PATH_ANIM_DUR } from './animate'; import { STD_EASING, UNIT_ANIM_DUR, MARKER_LINE_ANIM_DUR, PATH_ANIM_DUR } from './animate';
import { DOT_OVERLAY_SIZE_INCR } from './constants'; import { DOT_OVERLAY_SIZE_INCR } from './constants';


/*

<filter id="glow" x="-10%" y="-10%" width="120%" height="120%">
<feGaussianBlur stdDeviation="0.5 0.5" result="glow"></feGaussianBlur>
<feMerge>
<feMergeNode in="glow"></feMergeNode>
<feMergeNode in="glow"></feMergeNode>
<feMergeNode in="glow"></feMergeNode>
</feMerge>
</filter>

filter: url(#glow);
fill: #fff;

*/

const AXIS_TICK_LENGTH = 6; const AXIS_TICK_LENGTH = 6;
const LABEL_MARGIN = 4; const LABEL_MARGIN = 4;
export const FONT_SIZE = 10; export const FONT_SIZE = 10;


Notiek ielāde…
Atcelt
Saglabāt