Bump up to 1.0.0

This commit is contained in:
Prateeksha Singh 2018-03-06 21:45:09 +05:30
parent 6a3fab09d4
commit d7194c5010
21 changed files with 186 additions and 207 deletions

View File

@ -42,9 +42,9 @@
* ...or include within your HTML * ...or include within your HTML
```html ```html
<script src="https://cdn.jsdelivr.net/npm/frappe-charts@0.0.8/dist/frappe-charts.min.iife.js"></script> <script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.0.0/dist/frappe-charts.min.iife.js"></script>
<!-- or --> <!-- or -->
<script src="https://unpkg.com/frappe-charts@0.0.8/dist/frappe-charts.min.iife.js"></script> <script src="https://unpkg.com/frappe-charts@1.0.0/dist/frappe-charts.min.iife.js"></script>
``` ```
#### Usage #### Usage
@ -55,27 +55,22 @@ const data = {
], ],
datasets: [ datasets: [
{ {
title: "Some Data", title: "Some Data", type: "bar",
values: [25, 40, 30, 35, 8, 52, 17, -4] values: [25, 40, 30, 35, 8, 52, 17, -4]
}, },
{ {
title: "Another Set", title: "Another Set", type: "line",
values: [25, 50, -10, 15, 18, 32, 27, 14] values: [25, 50, -10, 15, 18, 32, 27, 14]
} }
] ]
} }
const chart = new Chart({ const chart = new Chart("#chart", { // or a DOM element
parent: "#chart", // or a DOM element
title: "My Awesome Chart", title: "My Awesome Chart",
data: data, data: data,
type: 'bar', // or 'line', 'scatter', 'pie', 'percentage' type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
height: 250, height: 250,
colors: ['#7cd6fd', '#743ee2']
colors: ['#7cd6fd', '#743ee2'],
format_tooltip_x: d => (d + '').toUpperCase(),
format_tooltip_y: d => d + ' pts'
}) })
``` ```
@ -88,6 +83,16 @@ If you want to contribute:
#### Updates #### Updates
##### v1.0.0
- Major rewrite out. Some new features include:
- Mixed type axis datasets
- Stacked bar charts
- Value over data points
- Y Markers and regions
- Dot size, Bar space size, and other options
- Legend for axis charts
- We would be looking to incorporate existing PRs and issues in the meantime.
##### Please read [#93](https://github.com/frappe/charts/issues/93) for v0.1.0 updates on rework and development. ##### Please read [#93](https://github.com/frappe/charts/issues/93) for v0.1.0 updates on rework and development.
##### v0.0.7 ##### v0.0.7

View File

@ -230,6 +230,10 @@ const DEFAULT_CHAR_WIDTH = 7;
const ANGLE_RATIO = Math.PI / 180; const ANGLE_RATIO = Math.PI / 180;
const FULL_ANGLE = 360; const FULL_ANGLE = 360;
/**
* Returns the value of a number upto 2 decimal places.
* @param {Number} d Any number
*/
function floatTwo(d) { function floatTwo(d) {
return parseFloat(d.toFixed(2)); return parseFloat(d.toFixed(2));
} }
@ -306,113 +310,11 @@ function equilizeNoOfElements(array1, array2,
return [array1, array2]; return [array1, array2];
} }
const UNIT_ANIM_DUR = 350;
const PATH_ANIM_DUR = 350;
const MARKER_LINE_ANIM_DUR = UNIT_ANIM_DUR;
const REPLACE_ALL_NEW_DUR = 250;
const STD_EASING = 'easein';
function translate(unit, oldCoord, newCoord, duration) {
let old = typeof oldCoord === 'string' ? oldCoord : oldCoord.join(', ');
return [
unit,
{transform: newCoord.join(', ')},
duration,
STD_EASING,
"translate",
{transform: old}
];
}
function translateVertLine(xLine, newX, oldX) {
return translate(xLine, [oldX, 0], [newX, 0], MARKER_LINE_ANIM_DUR);
}
function translateHoriLine(yLine, newY, oldY) {
return translate(yLine, [0, oldY], [0, newY], MARKER_LINE_ANIM_DUR);
}
function animateRegion(rectGroup, newY1, newY2, oldY2) {
let newHeight = newY1 - newY2;
let rect = rectGroup.childNodes[0];
let width = rect.getAttribute("width");
let rectAnim = [
rect,
{ height: newHeight, 'stroke-dasharray': `${width}, ${newHeight}` },
MARKER_LINE_ANIM_DUR,
STD_EASING
];
let groupAnim = translate(rectGroup, [0, oldY2], [0, newY2], MARKER_LINE_ANIM_DUR);
return [rectAnim, groupAnim];
}
function animateBar(bar, x, yTop, width, offset=0, index=0, meta={}) {
let [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine);
y -= offset;
if(bar.nodeName !== 'rect') {
let rect = bar.childNodes[0];
let rectAnim = [
rect,
{width: width, height: height},
UNIT_ANIM_DUR,
STD_EASING
];
let oldCoordStr = bar.getAttribute("transform").split("(")[1].slice(0, -1);
let groupAnim = translate(bar, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);
return [rectAnim, groupAnim];
} else {
return [[bar, {width: width, height: height, x: x, y: y}, UNIT_ANIM_DUR, STD_EASING]];
}
// bar.animate({height: args.newHeight, y: yTop}, UNIT_ANIM_DUR, mina.easein);
}
function animateDot(dot, x, y) {
if(dot.nodeName !== 'circle') {
let oldCoordStr = dot.getAttribute("transform").split("(")[1].slice(0, -1);
let groupAnim = translate(dot, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);
return [groupAnim];
} else {
return [[dot, {cx: x, cy: y}, UNIT_ANIM_DUR, STD_EASING]];
}
// dot.animate({cy: yTop}, UNIT_ANIM_DUR, mina.easein);
}
function animatePath(paths, newXList, newYList, zeroLine) {
let pathComponents = [];
let pointsStr = newYList.map((y, i) => (newXList[i] + ',' + y));
let pathStr = pointsStr.join("L");
const animPath = [paths.path, {d:"M"+pathStr}, PATH_ANIM_DUR, STD_EASING];
pathComponents.push(animPath);
if(paths.region) {
let regStartPt = `${newXList[0]},${zeroLine}L`;
let regEndPt = `L${newXList.slice(-1)[0]}, ${zeroLine}`;
const animRegion = [
paths.region,
{d:"M" + regStartPt + pathStr + regEndPt},
PATH_ANIM_DUR,
STD_EASING
];
pathComponents.push(animRegion);
}
return pathComponents;
}
function animatePathStr(oldPath, pathStr) {
return [oldPath, {d: pathStr}, UNIT_ANIM_DUR, STD_EASING];
}
const AXIS_TICK_LENGTH = 6; const AXIS_TICK_LENGTH = 6;
const LABEL_MARGIN = 4; const LABEL_MARGIN = 4;
const FONT_SIZE = 10; const FONT_SIZE = 10;
const BASE_LINE_COLOR = '#dadada'; const BASE_LINE_COLOR = '#dadada';
function $$1(expr, con) { function $$1(expr, con) {
return typeof expr === "string"? (con || document).querySelector(expr) : expr || null; return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
} }
@ -647,6 +549,8 @@ function yLine(y, label, width, options={}) {
x2 = width; x2 = width;
} }
// let offset = options.pos === 'left' ? -1 * options.offset : options.offset;
x1 += options.offset; x1 += options.offset;
x2 += options.offset; x2 += options.offset;
@ -793,7 +697,7 @@ function datasetBar(x, yTop, width, color, label='', index=0, offset=0, meta={})
} }
} }
function datasetDot(x, y, radius, color, label='', index=0, meta={}) { function datasetDot(x, y, radius, color, label='', index=0) {
let dot = createSVG('circle', { let dot = createSVG('circle', {
style: `fill: ${color}`, style: `fill: ${color}`,
'data-point-index': index, 'data-point-index': index,
@ -1027,6 +931,109 @@ function getDifferentChart(type, current_type, parent, args) {
return new Chart(parent, args); return new Chart(parent, args);
} }
const UNIT_ANIM_DUR = 350;
const PATH_ANIM_DUR = 350;
const MARKER_LINE_ANIM_DUR = UNIT_ANIM_DUR;
const REPLACE_ALL_NEW_DUR = 250;
const STD_EASING = 'easein';
function translate(unit, oldCoord, newCoord, duration) {
let old = typeof oldCoord === 'string' ? oldCoord : oldCoord.join(', ');
return [
unit,
{transform: newCoord.join(', ')},
duration,
STD_EASING,
"translate",
{transform: old}
];
}
function translateVertLine(xLine, newX, oldX) {
return translate(xLine, [oldX, 0], [newX, 0], MARKER_LINE_ANIM_DUR);
}
function translateHoriLine(yLine, newY, oldY) {
return translate(yLine, [0, oldY], [0, newY], MARKER_LINE_ANIM_DUR);
}
function animateRegion(rectGroup, newY1, newY2, oldY2) {
let newHeight = newY1 - newY2;
let rect = rectGroup.childNodes[0];
let width = rect.getAttribute("width");
let rectAnim = [
rect,
{ height: newHeight, 'stroke-dasharray': `${width}, ${newHeight}` },
MARKER_LINE_ANIM_DUR,
STD_EASING
];
let groupAnim = translate(rectGroup, [0, oldY2], [0, newY2], MARKER_LINE_ANIM_DUR);
return [rectAnim, groupAnim];
}
function animateBar(bar, x, yTop, width, offset=0, meta={}) {
let [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine);
y -= offset;
if(bar.nodeName !== 'rect') {
let rect = bar.childNodes[0];
let rectAnim = [
rect,
{width: width, height: height},
UNIT_ANIM_DUR,
STD_EASING
];
let oldCoordStr = bar.getAttribute("transform").split("(")[1].slice(0, -1);
let groupAnim = translate(bar, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);
return [rectAnim, groupAnim];
} else {
return [[bar, {width: width, height: height, x: x, y: y}, UNIT_ANIM_DUR, STD_EASING]];
}
// bar.animate({height: args.newHeight, y: yTop}, UNIT_ANIM_DUR, mina.easein);
}
function animateDot(dot, x, y) {
if(dot.nodeName !== 'circle') {
let oldCoordStr = dot.getAttribute("transform").split("(")[1].slice(0, -1);
let groupAnim = translate(dot, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);
return [groupAnim];
} else {
return [[dot, {cx: x, cy: y}, UNIT_ANIM_DUR, STD_EASING]];
}
// dot.animate({cy: yTop}, UNIT_ANIM_DUR, mina.easein);
}
function animatePath(paths, newXList, newYList, zeroLine) {
let pathComponents = [];
let pointsStr = newYList.map((y, i) => (newXList[i] + ',' + y));
let pathStr = pointsStr.join("L");
const animPath = [paths.path, {d:"M"+pathStr}, PATH_ANIM_DUR, STD_EASING];
pathComponents.push(animPath);
if(paths.region) {
let regStartPt = `${newXList[0]},${zeroLine}L`;
let regEndPt = `L${newXList.slice(-1)[0]}, ${zeroLine}`;
const animRegion = [
paths.region,
{d:"M" + regStartPt + pathStr + regEndPt},
PATH_ANIM_DUR,
STD_EASING
];
pathComponents.push(animRegion);
}
return pathComponents;
}
function animatePathStr(oldPath, pathStr) {
return [oldPath, {d: pathStr}, UNIT_ANIM_DUR, STD_EASING];
}
// Leveraging SMIL Animations // Leveraging SMIL Animations
const EASING = { const EASING = {
@ -1178,7 +1185,7 @@ class BaseChart {
} }
configure(args) { configure(args) {
this.setColors(); this.setColors(args);
this.setMargins(); this.setMargins();
// Bind window events // Bind window events
@ -1403,19 +1410,6 @@ class BaseChart {
onDownArrow() {} onDownArrow() {}
onEnterKey() {} onEnterKey() {}
getDataPoint(index = 0) {}
setCurrentDataPoint(point) {}
updateDataset(dataset, index) {}
addDataset(dataset, index) {}
removeDataset(index = 0) {}
updateDatasets(datasets) {}
updateDataPoint(dataPoint, index = 0) {}
addDataPoint(dataPoint, index = 0) {}
removeDataPoint(index = 0) {}
getDifferentChart(type) { getDifferentChart(type) {
return getDifferentChart(type, this.type, this.parent, this.rawChartArgs); return getDifferentChart(type, this.type, this.parent, this.rawChartArgs);
} }
@ -1795,8 +1789,6 @@ let componentConfigs = {
return this.units; return this.units;
}, },
animateElements(newData) { animateElements(newData) {
let c = this.constants;
let newXPos = newData.xPositions; let newXPos = newData.xPositions;
let newYPos = newData.yPositions; let newYPos = newData.yPositions;
let newOffsets = newData.offsets; let newOffsets = newData.offsets;
@ -1827,7 +1819,7 @@ let componentConfigs = {
this.store.map((bar, i) => { this.store.map((bar, i) => {
animateElements = animateElements.concat(animateBar( animateElements = animateElements.concat(animateBar(
bar, newXPos[i], newYPos[i], newData.barWidth, newOffsets[i], c.index, bar, newXPos[i], newYPos[i], newData.barWidth, newOffsets[i],
{zeroLine: newData.zeroLine} {zeroLine: newData.zeroLine}
)); ));
}); });
@ -2305,7 +2297,7 @@ function getValueRange(orderedArray) {
} }
function scale(val, yAxis) { function scale(val, yAxis) {
return floatTwo(yAxis.zeroLine - val * yAxis.scaleMultiplier) return floatTwo(yAxis.zeroLine - val * yAxis.scaleMultiplier);
} }
function calcDistribution(values, distributionSize) { function calcDistribution(values, distributionSize) {
@ -2602,7 +2594,7 @@ function dataPrep(data, type) {
}]; }];
} }
datasets.map((d, i)=> { datasets.map(d=> {
// Set values // Set values
if(!d.values) { if(!d.values) {
d.values = zeroArray; d.values = zeroArray;
@ -2656,7 +2648,7 @@ function zeroDataPrep(realData) {
name: '', name: '',
values: zeroArray.slice(0, -1), values: zeroArray.slice(0, -1),
chartType: d.chartType chartType: d.chartType
} };
}), }),
}; };
@ -3256,6 +3248,7 @@ class AxisChart extends BaseChart {
// removeDataPoint(index = 0) {} // removeDataPoint(index = 0) {}
} }
// import MultiAxisChart from './charts/MultiAxisChart';
const chartTypes = { const chartTypes = {
// multiaxis: MultiAxisChart, // multiaxis: MultiAxisChart,
percentage: PercentageChart, percentage: PercentageChart,

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -289,7 +289,7 @@
<p class="step-explain">And include it in your project</p> <p class="step-explain">And include it in your project</p>
<pre><code class="hljs javascript"> import Chart from "frappe-charts/dist/frappe-charts.min.esm"</code></pre> <pre><code class="hljs javascript"> import Chart from "frappe-charts/dist/frappe-charts.min.esm"</code></pre>
<p class="step-explain">... or include it directly in your HTML</p> <p class="step-explain">... or include it directly in your HTML</p>
<pre><code class="hljs html"> &lt;script src="https://unpkg.com/frappe-charts@0.0.8/dist/frappe-charts.min.iife.js"&gt;&lt;/script&gt;</code></pre> <pre><code class="hljs html"> &lt;script src="https://unpkg.com/frappe-charts@1.0.0/dist/frappe-charts.min.iife.js"&gt;&lt;/script&gt;</code></pre>
</div> </div>
</div> </div>

View File

@ -53,7 +53,7 @@
<p class="step-explain">And include it in your project</p> <p class="step-explain">And include it in your project</p>
<pre><code class="hljs javascript"> import Chart from "frappe-charts/dist/frappe-charts.min.esm"</code></pre> <pre><code class="hljs javascript"> import Chart from "frappe-charts/dist/frappe-charts.min.esm"</code></pre>
<p class="step-explain">... or include it directly in your HTML</p> <p class="step-explain">... or include it directly in your HTML</p>
<pre><code class="hljs html"> &lt;script src="https://unpkg.com/frappe-charts@0.0.8/dist/frappe-charts.min.iife.js"&gt;&lt;/script&gt;</code></pre> <pre><code class="hljs html"> &lt;script src="https://unpkg.com/frappe-charts@1.0.0/dist/frappe-charts.min.iife.js"&gt;&lt;/script&gt;</code></pre>
<p class="step-explain">Make a new Chart</p> <p class="step-explain">Make a new Chart</p>
<pre><code class="hljs html"> &lt!--HTML--&gt; <pre><code class="hljs html"> &lt!--HTML--&gt;
&lt;div id="chart"&gt;&lt;/div&gt;</code></pre> &lt;div id="chart"&gt;&lt;/div&gt;</code></pre>

10
package-lock.json generated
View File

@ -2572,7 +2572,7 @@
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true "dev": true
}, },
@ -2581,7 +2581,7 @@
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "1.0.0"
} }
}, },
"ms": { "ms": {
@ -4054,8 +4054,8 @@
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.0.0.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true "dev": true
}, },
@ -4065,7 +4065,7 @@
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true, "dev": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "1.0.0"
} }
}, },
"ms": { "ms": {

View File

@ -1,6 +1,6 @@
{ {
"name": "frappe-charts", "name": "frappe-charts",
"version": "0.0.8", "version": "1.0.0",
"description": "https://frappe.github.io/charts", "description": "https://frappe.github.io/charts",
"main": "dist/frappe-charts.min.cjs.js", "main": "dist/frappe-charts.min.cjs.js",
"module": "dist/frappe-charts.min.esm.js", "module": "dist/frappe-charts.min.esm.js",

View File

@ -1,5 +1,5 @@
import BaseChart from './BaseChart'; import BaseChart from './BaseChart';
import { $, getOffset } from '../utils/dom'; import { $ } from '../utils/dom';
export default class AggregationChart extends BaseChart { export default class AggregationChart extends BaseChart {
constructor(parent, args) { constructor(parent, args) {

View File

@ -174,7 +174,7 @@ export default class AxisChart extends BaseChart {
if(this.data.yRegions) { if(this.data.yRegions) {
this.data.yRegions.map(d => { this.data.yRegions.map(d => {
allValueLists.push([d.end, d.start]); allValueLists.push([d.end, d.start]);
}) });
} }
return [].concat(...allValueLists); return [].concat(...allValueLists);

View File

@ -1,7 +1,6 @@
import SvgTip from '../objects/SvgTip'; 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 { VERT_SPACE_OUTSIDE_BASE_CHART, TRANSLATE_Y_BASE_CHART, LEFT_MARGIN_BASE_CHART, 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'; 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';
@ -44,7 +43,7 @@ export default class BaseChart {
} }
configure(args) { configure(args) {
this.setColors(); this.setColors(args);
this.setMargins(); this.setMargins();
// Bind window events // Bind window events
@ -269,19 +268,6 @@ export default class BaseChart {
onDownArrow() {} onDownArrow() {}
onEnterKey() {} onEnterKey() {}
getDataPoint(index = 0) {}
setCurrentDataPoint(point) {}
updateDataset(dataset, index) {}
addDataset(dataset, index) {}
removeDataset(index = 0) {}
updateDatasets(datasets) {}
updateDataPoint(dataPoint, index = 0) {}
addDataPoint(dataPoint, index = 0) {}
removeDataPoint(index = 0) {}
getDifferentChart(type) { getDifferentChart(type) {
return getDifferentChart(type, this.type, this.parent, this.rawChartArgs); return getDifferentChart(type, this.type, this.parent, this.rawChartArgs);
} }

View File

@ -235,8 +235,6 @@ let componentConfigs = {
return this.units; return this.units;
}, },
animateElements(newData) { animateElements(newData) {
let c = this.constants;
let newXPos = newData.xPositions; let newXPos = newData.xPositions;
let newYPos = newData.yPositions; let newYPos = newData.yPositions;
let newOffsets = newData.offsets; let newOffsets = newData.offsets;
@ -267,7 +265,7 @@ let componentConfigs = {
this.store.map((bar, i) => { this.store.map((bar, i) => {
animateElements = animateElements.concat(animateBar( animateElements = animateElements.concat(animateBar(
bar, newXPos[i], newYPos[i], newData.barWidth, newOffsets[i], c.index, bar, newXPos[i], newYPos[i], newData.barWidth, newOffsets[i],
{zeroLine: newData.zeroLine} {zeroLine: newData.zeroLine}
)); ));
}); });

View File

@ -36,13 +36,13 @@ export function animateRegion(rectGroup, newY1, newY2, oldY2) {
{ height: newHeight, 'stroke-dasharray': `${width}, ${newHeight}` }, { height: newHeight, 'stroke-dasharray': `${width}, ${newHeight}` },
MARKER_LINE_ANIM_DUR, MARKER_LINE_ANIM_DUR,
STD_EASING STD_EASING
] ];
let groupAnim = translate(rectGroup, [0, oldY2], [0, newY2], MARKER_LINE_ANIM_DUR); let groupAnim = translate(rectGroup, [0, oldY2], [0, newY2], MARKER_LINE_ANIM_DUR);
return [rectAnim, groupAnim]; return [rectAnim, groupAnim];
} }
export function animateBar(bar, x, yTop, width, offset=0, index=0, meta={}) { export function animateBar(bar, x, yTop, width, offset=0, meta={}) {
let [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine); let [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine);
y -= offset; y -= offset;
if(bar.nodeName !== 'rect') { if(bar.nodeName !== 'rect') {
@ -52,7 +52,7 @@ export function animateBar(bar, x, yTop, width, offset=0, index=0, meta={}) {
{width: width, height: height}, {width: width, height: height},
UNIT_ANIM_DUR, UNIT_ANIM_DUR,
STD_EASING STD_EASING
] ];
let oldCoordStr = bar.getAttribute("transform").split("(")[1].slice(0, -1); let oldCoordStr = bar.getAttribute("transform").split("(")[1].slice(0, -1);
let groupAnim = translate(bar, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR); let groupAnim = translate(bar, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);

View File

@ -1,4 +1,4 @@
import { floatTwo, fillArray } from '../utils/helpers'; import { fillArray } from '../utils/helpers';
import { DEFAULT_AXIS_CHART_TYPE, AXIS_DATASET_CHART_TYPES, DEFAULT_CHAR_WIDTH } from '../utils/constants'; import { DEFAULT_AXIS_CHART_TYPE, AXIS_DATASET_CHART_TYPES, DEFAULT_CHAR_WIDTH } from '../utils/constants';
export function dataPrep(data, type) { export function dataPrep(data, type) {
@ -16,7 +16,7 @@ export function dataPrep(data, type) {
}]; }];
} }
datasets.map((d, i)=> { datasets.map(d=> {
// Set values // Set values
if(!d.values) { if(!d.values) {
d.values = zeroArray; d.values = zeroArray;
@ -70,7 +70,7 @@ export function zeroDataPrep(realData) {
name: '', name: '',
values: zeroArray.slice(0, -1), values: zeroArray.slice(0, -1),
chartType: d.chartType chartType: d.chartType
} };
}), }),
}; };

View File

@ -1,13 +1,11 @@
import { getBarHeightAndYAttr } from './draw-utils'; import { getBarHeightAndYAttr } from './draw-utils';
import { getStringWidth } from './helpers'; import { getStringWidth } from './helpers';
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';
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;
const BASE_LINE_COLOR = '#dadada'; const BASE_LINE_COLOR = '#dadada';
const BASE_BG_COLOR = '#F7FAFC';
function $(expr, con) { function $(expr, con) {
return typeof expr === "string"? (con || document).querySelector(expr) : expr || null; return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
@ -245,11 +243,11 @@ export function yLine(y, label, width, options={}) {
let x2 = options.mode === 'span' ? width + AXIS_TICK_LENGTH : 0; let x2 = options.mode === 'span' ? width + AXIS_TICK_LENGTH : 0;
if(options.mode === 'tick' && options.pos === 'right') { if(options.mode === 'tick' && options.pos === 'right') {
x1 = width + AXIS_TICK_LENGTH x1 = width + AXIS_TICK_LENGTH;
x2 = width; x2 = width;
} }
let offset = options.pos === 'left' ? -1 * options.offset : options.offset; // let offset = options.pos === 'left' ? -1 * options.offset : options.offset;
x1 += options.offset; x1 += options.offset;
x2 += options.offset; x2 += options.offset;
@ -397,7 +395,7 @@ export function datasetBar(x, yTop, width, color, label='', index=0, offset=0, m
} }
} }
export function datasetDot(x, y, radius, color, label='', index=0, meta={}) { export function datasetDot(x, y, radius, color, label='', index=0) {
let dot = createSVG('circle', { let dot = createSVG('circle', {
style: `fill: ${color}`, style: `fill: ${color}`,
'data-point-index': index, 'data-point-index': index,
@ -448,7 +446,7 @@ export function getPaths(xList, yList, color, options={}, meta={}) {
let paths = { let paths = {
path: path path: path
} };
// Region // Region
if(options.regionFill) { if(options.regionFill) {
@ -497,7 +495,7 @@ export let makeOverlay = {
} }
return overlay; return overlay;
} }
} };
export let updateOverlay = { export let updateOverlay = {
'bar': (unit, overlay) => { 'bar': (unit, overlay) => {
@ -535,5 +533,4 @@ export let updateOverlay = {
overlay.setAttribute('transform', transformValue); overlay.setAttribute('transform', transformValue);
} }
} }
} };

View File

@ -70,7 +70,7 @@ export function bindChange(obj, getFn, setFn) {
setFn(); setFn();
return Reflect.set(target, prop, value); return Reflect.set(target, prop, value);
}, },
get: function(target, prop, value) { get: function(target, prop) {
getFn(); getFn();
return Reflect.get(target, prop); return Reflect.get(target, prop);
} }

View File

@ -197,7 +197,7 @@ export function getValueRange(orderedArray) {
} }
export function scale(val, yAxis) { export function scale(val, yAxis) {
return floatTwo(yAxis.zeroLine - val * yAxis.scaleMultiplier) return floatTwo(yAxis.zeroLine - val * yAxis.scaleMultiplier);
} }
export function calcDistribution(values, distributionSize) { export function calcDistribution(values, distributionSize) {