jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[major] API change: parent and options

Browse Source
This commit is contained in:
Prateeksha Singh 2018-03-04 17:02:15 +05:30
parent b76375482c
commit de19ce8e31
16 changed files with 100 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -987,7 +987,7 @@ const COLOR_COMPATIBLE_CHARTS = {
heatmap: []
};
function getDifferentChart(type, current_type, args) {
function getDifferentChart(type, current_type, parent, args) {
if(type === current_type) return;
if(!ALL_CHART_TYPES.includes(type)) {
@ -1004,8 +1004,7 @@ function getDifferentChart(type, current_type, args) {
// Okay, this is anticlimactic
// this function will need to actually be 'changeChartType(type)'
// that will update only the required elements, but for now ...
return new Chart({
parent: args.parent,
return new Chart(parent, {
title: args.title,
data: args.data,
type: type,
@ -1130,36 +1129,26 @@ function runSMILAnimation(parent, svgElement, elementsToAnimate) {
}
class BaseChart {
constructor({
height = 240,
title = '',
subtitle = '',
colors = [],
isNavigable = 0,
showLegend = 1,
type = '',
parent,
data
}) {
this.rawChartArgs = arguments[0];
constructor(parent, options) {
this.rawChartArgs = options;
this.parent = typeof parent === 'string' ? document.querySelector(parent) : parent;
this.title = title;
this.subtitle = subtitle;
this.argHeight = height;
this.type = type;
if (!(this.parent instanceof HTMLElement)) {
throw new Error('No `parent` element to render on was provided.');
}
this.realData = this.prepareData(data);
this.title = options.title || '';
this.subtitle = options.subtitle || '';
this.argHeight = options.height || 240;
this.type = options.type || '';
this.realData = this.prepareData(options.data);
this.data = this.prepareFirstData(this.realData);
this.colors = [];
this.config = {
showTooltip: 1, // calculate
showLegend: 1,
isNavigable: isNavigable,
showLegend: options.showLegend || 1,
isNavigable: options.isNavigable || 0,
animate: 1
};
this.state = {};
@ -1170,7 +1159,7 @@ class BaseChart {
this.overlays = [];
}
this.configure(arguments[0]);
this.configure(options);
}
configure(args) {
@ -1210,11 +1199,7 @@ class BaseChart {
this.rightMargin = RIGHT_MARGIN_BASE_CHART;
}
validate(){
if(!this.parent) {
console.error("No parent element to render on was provided.");
return false;
}
validate() {
return true;
}
@ -1419,13 +1404,13 @@ class BaseChart {
removeDataPoint(index = 0) {}
getDifferentChart(type) {
return getDifferentChart(type, this.type, this.rawChartArgs);
return getDifferentChart(type, this.type, this.parent, this.rawChartArgs);
}
}
class PercentageChart extends BaseChart {
constructor(args) {
super(args);
constructor(parent, args) {
super(parent, args);
this.type = 'percentage';
this.max_slices = 10;
@ -1549,8 +1534,8 @@ const ANGLE_RATIO = Math.PI / 180;
const FULL_ANGLE = 360;
class PieChart extends BaseChart {
constructor(args) {
super(args);
constructor(parent, args) {
super(parent, args);
this.type = 'pie';
this.elements_to_animate = null;
this.hoverRadio = args.hoverRadio || 0.1;
@ -1980,29 +1965,21 @@ function getMaxCheckpoint(value, distribution) {
}
class Heatmap extends BaseChart {
constructor({
start = '',
domain = '',
subdomain = '',
data = {},
discrete_domains = 0,
count_label = '',
legend_colors = []
}) {
super(arguments[0]);
constructor(parent, options) {
super(parent, options);
this.type = 'heatmap';
this.domain = domain;
this.subdomain = subdomain;
this.data = data;
this.discrete_domains = discrete_domains;
this.count_label = count_label;
this.domain = options.domain || '';
this.subdomain = options.subdomain || '';
this.data = options.data || {};
this.discrete_domains = options.discrete_domains || 1;
this.count_label = options.count_label || '';
let today = new Date();
this.start = start || addDays(today, 365);
this.start = options.start || addDays(today, 365);
legend_colors = legend_colors.slice(0, 5);
let legend_colors = (options.legend_colors || []).slice(0, 5);
this.legend_colors = this.validate_colors(legend_colors)
? legend_colors
: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];
@ -2680,8 +2657,8 @@ function getComponent(name, constants, getData) {
}
class AxisChart extends BaseChart {
constructor(args) {
super(args);
constructor(parent, args) {
super(parent, args);
this.isSeries = args.isSeries;
this.valuesOverPoints = args.valuesOverPoints;
this.formatTooltipY = args.formatTooltipY;
@ -3158,7 +3135,6 @@ class AxisChart extends BaseChart {
// keep a binding at the end of chart
// import MultiAxisChart from './charts/MultiAxisChart';
const chartTypes = {
// multiaxis: MultiAxisChart,
percentage: PercentageChart,
@ -3166,16 +3142,16 @@ const chartTypes = {
pie: PieChart
};
function getChartByType(chartType = 'line', options) {
function getChartByType(chartType = 'line', parent, options) {
if(chartType === 'line') {
options.type = 'line';
return new AxisChart(options);
return new AxisChart(parent, options);
} else if (chartType === 'bar') {
options.type = 'bar';
return new AxisChart(options);
return new AxisChart(parent, options);
} else if (chartType === 'axis-mixed') {
options.type = 'line';
return new AxisChart(options);
return new AxisChart(parent, options);
}
if (!chartTypes[chartType]) {
@ -3183,12 +3159,12 @@ function getChartByType(chartType = 'line', options) {
return;
}
return new chartTypes[chartType](options);
return new chartTypes[chartType](parent, options);
}
class Chart {
constructor(args) {
return getChartByType(args.type, arguments[0]);
constructor(parent, options) {
return getChartByType(options.type, parent, options);
}
}

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

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

File diff suppressed because one or more lines are too long

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

@ -62,8 +62,7 @@ let more_line_data = [
let c1 = document.querySelector("#chart-composite-1");
let c2 = document.querySelector("#chart-composite-2");
let bar_composite_chart = new Chart ({
parent: c1,
let bar_composite_chart = new Chart (c1, {
title: "Fireball/Bolide Events - Yearly (more than 5 reports)",
data: bar_composite_data,
type: 'bar',
@ -76,8 +75,7 @@ let bar_composite_chart = new Chart ({
// regionFill: 1
});
let line_composite_chart = new Chart ({
parent: c2,
let line_composite_chart = new Chart (c2, {
data: line_composite_data,
type: 'line',
lineOptions: {
@ -165,8 +163,7 @@ let type_data = {
]
};
let type_chart = new Chart({
parent: "#chart-types",
let type_chart = new Chart("#chart-types", {
// title: "My Awesome Chart",
data: type_data,
type: 'bar',
@ -222,7 +219,6 @@ let trends_data = {
};
let plot_chart_args = {
parent: "#chart-trends",
title: "Mean Total Sunspot Count - Yearly",
data: trends_data,
type: 'line',
@ -237,7 +233,7 @@ let plot_chart_args = {
yAxisMode: 'span'
};
new Chart(plot_chart_args);
new Chart("#chart-trends", plot_chart_args);
Array.prototype.slice.call(
document.querySelectorAll('.chart-plot-buttons button')
@ -261,7 +257,7 @@ Array.prototype.slice.call(
plot_chart_args.init = false;
new Chart(plot_chart_args);
new Chart("#chart-trends", plot_chart_args);
Array.prototype.slice.call(
btn.parentNode.querySelectorAll('button')).map(el => {
@ -301,8 +297,7 @@ let update_data = {
]
};
let update_chart = new Chart({
parent: "#chart-update",
let update_chart = new Chart("#chart-update", {
data: update_data,
type: 'line',
height: 250,
@ -377,8 +372,7 @@ let events_data = {
]
};
let events_chart = new Chart({
parent: "#chart-events",
let events_chart = new Chart("#chart-events", {
title: "Jupiter's Moons: Semi-major Axis (1000 km)",
data: events_data,
type: 'bar',
@ -412,8 +406,7 @@ let aggr_data = {
]
};
let aggr_chart = new Chart({
parent: "#chart-aggr",
let aggr_chart = new Chart("#chart-aggr", {
data: aggr_data,
type: 'bar',
height: 250,
@ -456,8 +449,7 @@ for (var i = 0; i< 375; i++) {
timestamp = Math.floor(timestamp - 86400).toFixed(1);
}
new Chart({
parent: "#chart-heatmap",
new Chart("#chart-heatmap", {
data: heatmap_data,
type: 'heatmap',
legend_scale: [0, 1, 2, 4, 5],
@ -485,8 +477,7 @@ Array.prototype.slice.call(
colors = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
}
new Chart({
parent: "#chart-heatmap",
new Chart("#chart-heatmap", {
data: heatmap_data,
type: 'heatmap',
legend_scale: [0, 1, 2, 4, 5],
@ -524,8 +515,7 @@ Array.prototype.slice.call(
discrete_domains = 0;
}
new Chart({
parent: "#chart-heatmap",
new Chart("#chart-heatmap", {
data: heatmap_data,
type: 'heatmap',
legend_scale: [0, 1, 2, 4, 5],

3
package.json
View File

@ -52,5 +52,8 @@
"rollup-plugin-uglify": "^2.0.1",
"rollup-plugin-uglify-es": "0.0.1",
"rollup-watch": "^4.3.1"
},
"dependencies": {
"eslint": "^4.18.2"
}
}

14
src/js/chart.js
View File

@ -13,16 +13,16 @@ const chartTypes = {
pie: PieChart
};
function getChartByType(chartType = 'line', options) {
function getChartByType(chartType = 'line', parent, options) {
if(chartType === 'line') {
options.type = 'line';
return new AxisChart(options);
return new AxisChart(parent, options);
} else if (chartType === 'bar') {
options.type = 'bar';
return new AxisChart(options);
return new AxisChart(parent, options);
} else if (chartType === 'axis-mixed') {
options.type = 'line';
return new AxisChart(options);
return new AxisChart(parent, options);
}
if (!chartTypes[chartType]) {
@ -30,11 +30,11 @@ function getChartByType(chartType = 'line', options) {
return;
}
return new chartTypes[chartType](options);
return new chartTypes[chartType](parent, options);
}
export default class Chart {
constructor(args) {
return getChartByType(args.type, arguments[0]);
constructor(parent, options) {
return getChartByType(options.type, parent, options);
}
}

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

@ -9,8 +9,8 @@ import { makeOverlay, updateOverlay } from '../utils/draw';
import { MIN_BAR_PERCENT_HEIGHT, DEFAULT_AXIS_CHART_TYPE, BAR_CHART_SPACE_RATIO, LINE_CHART_DOT_SIZE } from '../utils/constants';
export default class AxisChart extends BaseChart {
constructor(args) {
super(args);
constructor(parent, args) {
super(parent, args);
this.isSeries = args.isSeries;
this.valuesOverPoints = args.valuesOverPoints;
this.formatTooltipY = args.formatTooltipY;

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

@ -9,36 +9,26 @@ import { getDifferentChart } from '../config';
import { runSMILAnimation } from '../utils/animation';
export default class BaseChart {
constructor({
height = 240,
title = '',
subtitle = '',
colors = [],
isNavigable = 0,
showLegend = 1,
type = '',
parent,
data
}) {
this.rawChartArgs = arguments[0];
constructor(parent, options) {
this.rawChartArgs = options;
this.parent = typeof parent === 'string' ? document.querySelector(parent) : parent;
this.title = title;
this.subtitle = subtitle;
this.argHeight = height;
this.type = type;
if (!(this.parent instanceof HTMLElement)) {
throw new Error('No `parent` element to render on was provided.');
}
this.realData = this.prepareData(data);
this.title = options.title || '';
this.subtitle = options.subtitle || '';
this.argHeight = options.height || 240;
this.type = options.type || '';
this.realData = this.prepareData(options.data);
this.data = this.prepareFirstData(this.realData);
this.colors = [];
this.config = {
showTooltip: 1, // calculate
showLegend: 1,
isNavigable: isNavigable,
showLegend: options.showLegend || 1,
isNavigable: options.isNavigable || 0,
animate: 1
};
this.state = {};
@ -49,7 +39,7 @@ export default class BaseChart {
this.overlays = [];
}
this.configure(arguments[0]);
this.configure(options);
}
configure(args) {
@ -89,13 +79,7 @@ export default class BaseChart {
this.rightMargin = RIGHT_MARGIN_BASE_CHART;
}
validate(){
let args = this.rawChartArgs;
// Now yo have the args, set this stuff only after validating
if(!this.parent) {
console.error("No parent element to render on was provided.");
return false;
}
validate() {
return true;
}
@ -300,6 +284,6 @@ export default class BaseChart {
removeDataPoint(index = 0) {}
getDifferentChart(type) {
return getDifferentChart(type, this.type, this.rawChartArgs);
return getDifferentChart(type, this.type, this.parent, this.rawChartArgs);
}
}

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

@ -5,29 +5,21 @@ import { calcDistribution, getMaxCheckpoint } from '../utils/intervals';
import { isValidColor } from '../utils/colors';
export default class Heatmap extends BaseChart {
constructor({
start = '',
domain = '',
subdomain = '',
data = {},
discrete_domains = 0,
count_label = '',
legend_colors = []
}) {
super(arguments[0]);
constructor(parent, options) {
super(parent, options);
this.type = 'heatmap';
this.domain = domain;
this.subdomain = subdomain;
this.data = data;
this.discrete_domains = discrete_domains;
this.count_label = count_label;
this.domain = options.domain || '';
this.subdomain = options.subdomain || '';
this.data = options.data || {};
this.discrete_domains = options.discrete_domains || 1;
this.count_label = options.count_label || '';
let today = new Date();
this.start = start || addDays(today, 365);
this.start = options.start || addDays(today, 365);
legend_colors = legend_colors.slice(0, 5);
let legend_colors = (options.legend_colors || []).slice(0, 5);
this.legend_colors = this.validate_colors(legend_colors)
? legend_colors
: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];

4
src/js/charts/PercentageChart.js
View File

@ -2,8 +2,8 @@ import BaseChart from './BaseChart';
import { $, getOffset } from '../utils/dom';
export default class PercentageChart extends BaseChart {
constructor(args) {
super(args);
constructor(parent, args) {
super(parent, args);
this.type = 'percentage';
this.max_slices = 10;

4
src/js/charts/PieChart.js
View File

@ -7,8 +7,8 @@ const ANGLE_RATIO = Math.PI / 180;
const FULL_ANGLE = 360;
export default class PieChart extends BaseChart {
constructor(args) {
super(args);
constructor(parent, args) {
super(parent, args);
this.type = 'pie';
this.elements_to_animate = null;
this.hoverRadio = args.hoverRadio || 0.1;

5
src/js/config.js
View File

@ -21,7 +21,7 @@ const COLOR_COMPATIBLE_CHARTS = {
heatmap: []
};
export function getDifferentChart(type, current_type, args) {
export function getDifferentChart(type, current_type, parent, args) {
if(type === current_type) return;
if(!ALL_CHART_TYPES.includes(type)) {
@ -38,8 +38,7 @@ export function getDifferentChart(type, current_type, args) {
// Okay, this is anticlimactic
// this function will need to actually be 'changeChartType(type)'
// that will update only the required elements, but for now ...
return new Chart({
parent: args.parent,
return new Chart(parent, {
title: args.title,
data: args.data,
type: type,