jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[fixes] docs init, fix multi demos and axis override

Browse Source
This commit is contained in:
Prateeksha Singh 2018-05-08 19:22:37 +05:30
parent a5f215eccc
commit c33473f52c
23 changed files with 348 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -102,6 +102,7 @@ const BASE_MEASURES = {
},
baseHeight: 240,
titleHeight: 20,
legendHeight: 30,
@ -133,7 +134,9 @@ function getExtraWidth(m) {
const INIT_CHART_UPDATE_TIMEOUT = 700;
const CHART_POST_ANIMATE_TIMEOUT = 400;
const DEFAULT_AXIS_CHART_TYPE = 'line';
const AXIS_CHART_DEFAULT_TYPE = 'line';
const AXIS_DATASET_CHART_TYPES = ['line', 'bar'];
const AXIS_LEGEND_BAR_SIZE = 100;
@ -301,6 +304,10 @@ class SvgTip {
}
}
/**
* Returns the value of a number upto 2 decimal places.
* @param {Number} d Any number
*/
function floatTwo(d) {
return parseFloat(d.toFixed(2));
}
@ -1357,7 +1364,7 @@ class BaseChart {
this.rawChartArgs = options;
this.title = options.title || '';
this.type = options.type || '';
this.type = options.type || 'line';
this.realData = this.prepareData(options.data);
this.data = this.prepareFirstData(this.realData);
@ -2994,6 +3001,11 @@ function dataPrep(data, type) {
}];
}
let overridingType;
if(AXIS_DATASET_CHART_TYPES.includes(type)) {
overridingType = type;
}
datasets.map(d=> {
// Set values
if(!d.values) {
@ -3012,14 +3024,13 @@ function dataPrep(data, type) {
}
// Set labels
//
// Set type
if(!d.chartType ) {
if(!AXIS_DATASET_CHART_TYPES.includes(type)) type === DEFAULT_AXIS_CHART_TYPE;
d.chartType = type;
if(overridingType) {
d.chartType = overridingType;
} else if(!d.chartType) {
d.chartType = AXIS_CHART_DEFAULT_TYPE;
}
});
// Markers
@ -3109,7 +3120,6 @@ class AxisChart extends BaseChart {
this.barOptions = args.barOptions || {};
this.lineOptions = args.lineOptions || {};
this.type = args.type || 'line';
this.init = 1;
this.setup();
@ -3676,6 +3686,7 @@ class AxisChart extends BaseChart {
// removeDataPoint(index = 0) {}
}
// import MultiAxisChart from './charts/MultiAxisChart';
const chartTypes = {
bar: AxisChart,
line: AxisChart,

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.cjs.js.map vendored
View File

File diff suppressed because one or more lines are too long

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.esm.js.map 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
dist/frappe-charts.min.iife.js.map vendored
View File

File diff suppressed because one or more lines are too long

15
docs/assets/js/data.js
View File

@ -278,3 +278,18 @@ export const heatmapData = {
end: end
};
export const sampleData = {
0: {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [
{ values: [18, 40, 30, 35, 8, 52, 17, -4] }
]
},
1: {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [
{ name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
{ name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
]
}
}

1
docs/assets/js/demoConfig.js
View File

@ -200,7 +200,6 @@ export const demoSections = [
actions: [{ name: "Export ...", fn: "export", args: [] }]
}
],
},
{

24
docs/assets/js/docsBuilder.js
View File

@ -17,6 +17,7 @@ class docSection {
this.parent = parent; // should be preferably a section
this.sys = sys;
this.blockMap = {};
this.demos = [];
this.make();
}
@ -24,7 +25,9 @@ class docSection {
make() {
// const section = document.querySelector(this.parent);
let s = this.sys;
$.create('h6', { inside: this.parent, innerHTML: s.title });
if(s.title) {
$.create('h6', { inside: this.parent, innerHTML: s.title });
}
s.contentBlocks.forEach((blockConf, index) => {
this.blockMap[index] = this.getBlock(blockConf);
@ -77,17 +80,20 @@ class docSection {
figure = $.create('figure', { inside: row.querySelector('.col-sm-8') });
row.querySelector('.col-sm-4').innerHTML += bc.sideContent;
}
this.libObj = new this.LIB_OBJ(figure, args);
let libObj = new this.LIB_OBJ(figure, args);
let demoIndex = this.demos.length;
this.demos.push(libObj);
if(bc.postSetup) {
bc.postSetup(this.libObj, figure, row);
bc.postSetup(this.demos[demoIndex], figure, row);
}
this.getDemoOptions(bc.options, args, figure);
this.getDemoActions(bc.actions, args);
this.getDemoOptions(demoIndex, bc.options, args, figure);
this.getDemoActions(demoIndex, bc.actions, args);
}
getDemoOptions(options=[], args={}, figure) {
getDemoOptions(demoIndex, options=[], args={}, figure) {
options.forEach(o => {
const btnGroup = $.create('div', {
inside: this.parent,
@ -117,7 +123,7 @@ class docSection {
// boolean, string, number, object
args[o.path[0]] = state;
}
this.libObj = new this.LIB_OBJ(figure, args);
this.demos[demoIndex] = new this.LIB_OBJ(figure, args);
}
});
@ -126,14 +132,14 @@ class docSection {
});
}
getDemoActions(actions=[], args={}) {
getDemoActions(demoIndex, actions=[], args={}) {
actions.forEach(o => {
let args = o.args || [];
$.create('button', {
inside: this.parent,
className: `btn btn-action btn-sm btn-secondary`,
innerHTML: o.name,
onClick: () => {this.libObj[o.fn](...args);}
onClick: () => {this.demos[demoIndex][o.fn](...args);}
});
});
}

83
docs/assets/js/docsConfig.js Normal file
View File

@ -0,0 +1,83 @@
import { sampleData } from './data';
export const docSections = [
{
name: "start",
contentBlocks: [
{
type: "text",
content: `A chart is generally a 2D rendition of data. For example, f
or a set of values across items, the data could look like:`
},
{
type: "code",
content: ` data = {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [
{ values: [18, 40, 30, 35, 8, 52, 17, -4] }
]
}`
},
{
type: "text",
content: `Plug that in with a type 'bar', a color and height:`
},
{
type: "code",
content: ` new frappe.Chart( "#chart", {
data: data,
type: 'bar',
height: 140,
colors: ['red']
});`
},
{
type: "demo",
config: {
data: sampleData[0],
type: 'line',
height: 140,
colors: ['red'],
},
},
{
type: "text",
content: `Similar is a 'line' chart:`
},
{
type: "code",
content: ` ...
type: 'line',
...`
},
{
type: "demo",
config: {
data: sampleData[0],
type: 'bar',
height: 140,
colors: ['blue'],
},
}
]
},
{
title: "Adding more datasets",
name: "multi-dataset",
contentBlocks: [
{
type: "text",
content: `Having more datasets, as in an axis chart, every dataset is represented individually.`
},
{
type: "demo",
config: {
data: sampleData[1],
type: 'line',
height: 200,
colors: ['yellow', 'light-green'],
},
}
]
}
]

2
docs/assets/js/frappe-charts.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
docs/assets/js/frappe-charts.min.js.map
View File

File diff suppressed because one or more lines are too long

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

@ -1,25 +1,32 @@
import { $, insertAfter } from '../../../src/js/utils/dom';
import { fireballOver25, fireball_2_5, fireball_5_25 } from './data';
import { lineComposite, barComposite, demoSections} from './demoConfig';
import { docSections } from './docsConfig';
import { docsBuilder } from './docsBuilder';
let Chart = frappe.Chart; // eslint-disable-line no-undef
let dbd = new docsBuilder(Chart);
let lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
let barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
lineCompositeChart.parent.addEventListener('data-select', (e) => {
let i = e.index;
barCompositeChart.updateDatasets([
fireballOver25[i], fireball_5_25[i], fireball_2_5[i]
]);
});
let currentElement = document.querySelector('header');
let sections;
demoSections.forEach(sectionConf => {
let sectionEl = $.create('section', { className: sectionConf.name });
if(window.location.pathname.split("/").pop().includes('index')) {
let lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
let barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
lineCompositeChart.parent.addEventListener('data-select', (e) => {
let i = e.index;
barCompositeChart.updateDatasets([
fireballOver25[i], fireball_5_25[i], fireball_2_5[i]
]);
});
sections = demoSections;
} else {
sections = docSections;
}
sections.forEach(sectionConf => {
let sectionEl = $.create('section', { className: sectionConf.name || sectionConf.title });
insertAfter(sectionEl, currentElement);
currentElement = sectionEl;
dbd.makeSection(sectionEl, sectionConf);

137
docs/assets/js/index.min.js vendored
View File

@ -214,7 +214,6 @@ var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
// https://stackoverflow.com/a/11252167/6495043
function clone(date) {
@ -273,6 +272,12 @@ var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001
// Universal constants
/**
* Returns the value of a number upto 2 decimal places.
* @param {Number} d Any number
*/
/**
* Returns whether or not two given arrays are equal.
* @param {Array} arr1 First array
@ -335,6 +340,8 @@ function toTitleCase(str) {
});
}
// Composite Chart
// ================================================================================
var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
var lineCompositeData = {
@ -548,6 +555,17 @@ var heatmapData = {
end: end
};
var sampleData = {
0: {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [{ values: [18, 40, 30, 35, 8, 52, 17, -4] }]
},
1: {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [{ name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] }, { name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }]
}
};
var lineComposite = {
config: {
title: "Fireball/Bolide Events - Yearly (reported)",
@ -689,7 +707,6 @@ var demoSections = [{
}],
actions: [{ name: "Export ...", fn: "export", args: [] }]
}]
}, {
title: "Listen to state change",
name: "state-change",
@ -785,6 +802,60 @@ var demoSections = [{
}]
}];
var docSections = [{
name: "start",
contentBlocks: [{
type: "text",
content: "A chart is generally a 2D rendition of data. For example, f\n\t\t\t\t\tor a set of values across items, the data could look like:"
}, {
type: "code",
content: " data = {\n labels: [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\n datasets: [\n\t { values: [18, 40, 30, 35, 8, 52, 17, -4] }\n ]\n }"
}, {
type: "text",
content: "Plug that in with a type 'bar', a color and height:"
}, {
type: "code",
content: " new frappe.Chart( \"#chart\", {\n data: data,\n type: 'bar',\n height: 140,\n colors: ['red']\n });"
}, {
type: "demo",
config: {
data: sampleData[0],
type: 'line',
height: 140,
colors: ['red']
}
}, {
type: "text",
content: "Similar is a 'line' chart:"
}, {
type: "code",
content: " ...\n type: 'line',\n ..."
}, {
type: "demo",
config: {
data: sampleData[0],
type: 'bar',
height: 140,
colors: ['blue']
}
}]
}, {
title: "Adding more datasets",
name: "multi-dataset",
contentBlocks: [{
type: "text",
content: "Having more datasets, as in an axis chart, every dataset is represented individually."
}, {
type: "demo",
config: {
data: sampleData[1],
type: 'line',
height: 200,
colors: ['yellow', 'light-green']
}
}]
}];
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
@ -816,6 +887,7 @@ var docSection = function () {
this.parent = parent; // should be preferably a section
this.sys = sys;
this.blockMap = {};
this.demos = [];
this.make();
}
@ -827,7 +899,9 @@ var docSection = function () {
// const section = document.querySelector(this.parent);
var s = this.sys;
$.create('h6', { inside: this.parent, innerHTML: s.title });
if (s.title) {
$.create('h6', { inside: this.parent, innerHTML: s.title });
}
s.contentBlocks.forEach(function (blockConf, index) {
_this.blockMap[index] = _this.getBlock(blockConf);
@ -885,24 +959,27 @@ var docSection = function () {
figure = $.create('figure', { inside: row.querySelector('.col-sm-8') });
row.querySelector('.col-sm-4').innerHTML += bc.sideContent;
}
this.libObj = new this.LIB_OBJ(figure, args);
var libObj = new this.LIB_OBJ(figure, args);
var demoIndex = this.demos.length;
this.demos.push(libObj);
if (bc.postSetup) {
bc.postSetup(this.libObj, figure, row);
bc.postSetup(this.demos[demoIndex], figure, row);
}
this.getDemoOptions(bc.options, args, figure);
this.getDemoActions(bc.actions, args);
this.getDemoOptions(demoIndex, bc.options, args, figure);
this.getDemoActions(demoIndex, bc.actions, args);
}
}, {
key: 'getDemoOptions',
value: function getDemoOptions() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
value: function getDemoOptions(demoIndex) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
var _this2 = this;
var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var figure = arguments[2];
var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var figure = arguments[3];
options.forEach(function (o) {
var btnGroup = $.create('div', {
@ -933,7 +1010,7 @@ var docSection = function () {
// boolean, string, number, object
args[o.path[0]] = state;
}
_this2.libObj = new _this2.LIB_OBJ(figure, args);
_this2.demos[demoIndex] = new _this2.LIB_OBJ(figure, args);
}
});
@ -945,10 +1022,10 @@ var docSection = function () {
}
}, {
key: 'getDemoActions',
value: function getDemoActions() {
value: function getDemoActions(demoIndex) {
var _this3 = this;
var actions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var actions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
actions.forEach(function (o) {
var args = o.args || [];
$.create('button', {
@ -956,9 +1033,9 @@ var docSection = function () {
className: 'btn btn-action btn-sm btn-secondary',
innerHTML: o.name,
onClick: function onClick() {
var _libObj;
var _demos$demoIndex;
(_libObj = _this3.libObj)[o.fn].apply(_libObj, _toConsumableArray(args));
(_demos$demoIndex = _this3.demos[demoIndex])[o.fn].apply(_demos$demoIndex, _toConsumableArray(args));
}
});
});
@ -970,19 +1047,25 @@ var docSection = function () {
var Chart = frappe.Chart; // eslint-disable-line no-undef
var dbd = new docsBuilder(Chart);
var lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
var barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
lineCompositeChart.parent.addEventListener('data-select', function (e) {
var i = e.index;
barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
});
var currentElement = document.querySelector('header');
var sections = void 0;
demoSections.forEach(function (sectionConf) {
var sectionEl = $.create('section', { className: sectionConf.name });
if (window.location.pathname.split("/").pop().includes('index')) {
var lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
var barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
lineCompositeChart.parent.addEventListener('data-select', function (e) {
var i = e.index;
barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
});
sections = demoSections;
} else {
sections = docSections;
}
sections.forEach(function (sectionConf) {
var sectionEl = $.create('section', { className: sectionConf.name || sectionConf.title });
insertAfter(sectionEl, currentElement);
currentElement = sectionEl;
dbd.makeSection(sectionEl, sectionConf);

1
docs/assets/js/index.min.js.map
View File

File diff suppressed because one or more lines are too long

59
docs/docs.html
View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Frappe Charts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="open source javascript js charts library svg zero-dependency
interactive data visualization beautiful drag resize">
<meta name="description" content="A simple, responsive, modern charts library for the web.">
<link rel="stylesheet" type="text/css" href="assets/css/reset.css" media="screen">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen">
<link rel="stylesheet" type="text/css" href="assets/css/hljs.css" media="screen">
<script src="assets/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<link rel="shortcut icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
<link rel="icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon">
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body>
<header>
<h1>Documentation</h1>
<p class="lead-text">Because it is beautiful.</p>
</header>
<!-- Generated content goes here -->
<footer class="built-with-frappe text-center">
<img style="padding: 5px; width: 40px; background: #fff" class="frappe-bird" src="./assets/img/frappe-bird.png">
<p style="margin: 24px 0 0px 0; font-size: 15px">
Project maintained by <a href="https://frappe.io" target="_blank">Frappe</a>.
Used in <a href="https://erpnext.com" target="_blank">ERPNext</a>.
Read the <a href="https://medium.com/@pratu16x7/so-we-decided-to-create-our-own-charts-a95cb5032c97" target="_blank">blog post</a>.
</p>
<p style="margin: 24px 0 80px 0; font-size: 12px">
Data from the <a href="https://www.amsmeteors.org" target="_blank">American Meteor Society</a>,
<a href="http://www.sidc.be/silso" target="_blank">SILSO</a> and
<a href="https://api.nasa.gov/index.html" target="_blank">NASA Open APIs</a>
</p>
</footer>
<!-- <a href="https://github.com/frappe/charts" target="_blank" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#9a9a9a; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a> -->
<!-- <script async src="https://static.codepen.io/assets/embed/ei.js"></script> -->
<script src="assets/js/frappe-charts.min.js"></script>
<script src="assets/js/index.min.js"></script>
</body>
</html>

13
docs/index.html
View File

@ -34,16 +34,13 @@
<!-- Generated content goes here -->
<section class="text-center">
<!-- Closing -->
<section class="closing text-center">
<a href="https://github.com/frappe/charts/archive/master.zip"><button class="large blue button btn">Download</button></a>
<p style="mt1: 3rem;margin-bottom: 1.5rem;">
<!-- <a href="docs.html" style="margin-right: 1rem;" target="_blank">Documentation</a> -->
<a href="https://github.com/frappe/charts" target="_blank">View on GitHub</a>
</p>
<p style="mt1: 1rem;">
<a class="github-button" href="https://github.com/frappe/charts" data-icon="octicon-star" data-show-count="true" aria-label="Star frappe/charts on GitHub">Star</a>
<p style="mt1: 3rem; margin-bottom: 1.5rem;">
<a href="docs.html" style="margin-right: 1rem;" target="_blank">Documentation</a>
<a href="https://github.com/frappe/charts" target="_blank">GitHub</a>
</p>
<p><a class="github-button" href="https://github.com/frappe/charts" data-icon="octicon-star" data-show-count="true" aria-label="Star frappe/charts on GitHub">Star</a></p>
<p>License: MIT</p>
</section>

2
rollup.config.js
View File

@ -40,7 +40,6 @@ fs.readFile('src/css/charts.scss', (err, css) => {
export default [
{
input: 'src/js/index.js',
sourcemap: true,
output: [
{
file: 'docs/assets/js/frappe-charts.min.js',
@ -83,7 +82,6 @@ export default [
},
{
input: 'docs/assets/js/index.js',
sourcemap: true,
output: [
{
file: 'docs/assets/js/index.min.js',

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

@ -16,7 +16,6 @@ export default class AxisChart extends BaseChart {
this.barOptions = args.barOptions || {};
this.lineOptions = args.lineOptions || {};
this.type = args.type || 'line';
this.init = 1;
this.setup();

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

@ -23,7 +23,7 @@ export default class BaseChart {
this.rawChartArgs = options;
this.title = options.title || '';
this.type = options.type || '';
this.type = options.type || 'line';
this.realData = this.prepareData(options.data);
this.data = this.prepareFirstData(this.realData);

16
src/js/utils/axis-chart-utils.js
View File

@ -1,5 +1,5 @@
import { fillArray } from '../utils/helpers';
import { DEFAULT_AXIS_CHART_TYPE, AXIS_DATASET_CHART_TYPES, DEFAULT_CHAR_WIDTH } from '../utils/constants';
import { AXIS_CHART_DEFAULT_TYPE, AXIS_CHART_MIXED_TYPE, AXIS_DATASET_CHART_TYPES, DEFAULT_CHAR_WIDTH } from '../utils/constants';
export function dataPrep(data, type) {
data.labels = data.labels || [];
@ -16,6 +16,11 @@ export function dataPrep(data, type) {
}];
}
let overridingType;
if(AXIS_DATASET_CHART_TYPES.includes(type)) {
overridingType = type;
};
datasets.map(d=> {
// Set values
if(!d.values) {
@ -34,14 +39,13 @@ export function dataPrep(data, type) {
}
// Set labels
//
// Set type
if(!d.chartType ) {
if(!AXIS_DATASET_CHART_TYPES.includes(type)) type === DEFAULT_AXIS_CHART_TYPE;
d.chartType = type;
if(overridingType) {
d.chartType = overridingType;
} else if(!d.chartType) {
d.chartType = AXIS_CHART_DEFAULT_TYPE;
}
});
// Markers

5
src/js/utils/constants.js
View File

@ -31,6 +31,7 @@ export const BASE_MEASURES = {
},
baseHeight: 240,
titleHeight: 20,
legendHeight: 30,
@ -62,7 +63,9 @@ export function getExtraWidth(m) {
export const INIT_CHART_UPDATE_TIMEOUT = 700;
export const CHART_POST_ANIMATE_TIMEOUT = 400;
export const DEFAULT_AXIS_CHART_TYPE = 'line';
export const AXIS_CHART_DEFAULT_TYPE = 'line';
export const AXIS_CHART_MIXED_TYPE = 'axis-mixed';
export const AXIS_CHART_TYPES = ['line', 'bar', 'axis-mixed'];
export const AXIS_DATASET_CHART_TYPES = ['line', 'bar'];
export const AXIS_LEGEND_BAR_SIZE = 100;