mirror of https://github.com/masayuki0812/c3.git
Quite good looking graph derived from d3.js
http://c3js.org
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
275 lines
8.2 KiB
275 lines
8.2 KiB
8 years ago
|
import { isDefined } from './util';
|
||
|
|
||
|
const getDefaultConfig = function () {
|
||
|
const config = {
|
||
|
bindto: '#chart',
|
||
|
svg_classname: undefined,
|
||
|
size_width: undefined,
|
||
|
size_height: undefined,
|
||
|
padding_left: undefined,
|
||
|
padding_right: undefined,
|
||
|
padding_top: undefined,
|
||
|
padding_bottom: undefined,
|
||
|
resize_auto: true,
|
||
|
zoom_enabled: false,
|
||
|
zoom_extent: undefined,
|
||
|
zoom_privileged: false,
|
||
|
zoom_rescale: false,
|
||
|
zoom_onzoom() {},
|
||
|
zoom_onzoomstart() {},
|
||
|
zoom_onzoomend() {},
|
||
|
zoom_x_min: undefined,
|
||
|
zoom_x_max: undefined,
|
||
|
interaction_brighten: true,
|
||
|
interaction_enabled: true,
|
||
|
onmouseover() {},
|
||
|
onmouseout() {},
|
||
|
onresize() {},
|
||
|
onresized() {},
|
||
|
oninit() {},
|
||
|
onrendered() {},
|
||
|
transition_duration: 350,
|
||
|
data_x: undefined,
|
||
|
data_xs: {},
|
||
|
data_xFormat: '%Y-%m-%d',
|
||
|
data_xLocaltime: true,
|
||
|
data_xSort: true,
|
||
|
data_idConverter(id) { return id; },
|
||
|
data_names: {},
|
||
|
data_classes: {},
|
||
|
data_groups: [],
|
||
|
data_axes: {},
|
||
|
data_type: undefined,
|
||
|
data_types: {},
|
||
|
data_labels: {},
|
||
|
data_order: 'desc',
|
||
|
data_regions: {},
|
||
|
data_color: undefined,
|
||
|
data_colors: {},
|
||
|
data_hide: false,
|
||
|
data_filter: undefined,
|
||
|
data_selection_enabled: false,
|
||
|
data_selection_grouped: false,
|
||
|
data_selection_isselectable() { return true; },
|
||
|
data_selection_multiple: true,
|
||
|
data_selection_draggable: false,
|
||
|
data_onclick() {},
|
||
|
data_onmouseover() {},
|
||
|
data_onmouseout() {},
|
||
|
data_onselected() {},
|
||
|
data_onunselected() {},
|
||
|
data_url: undefined,
|
||
|
data_headers: undefined,
|
||
|
data_json: undefined,
|
||
|
data_rows: undefined,
|
||
|
data_columns: undefined,
|
||
|
data_mimeType: undefined,
|
||
|
data_keys: undefined,
|
||
|
// configuration for no plot-able data supplied.
|
||
|
data_empty_label_text: '',
|
||
|
// subchart
|
||
|
subchart_show: false,
|
||
|
subchart_size_height: 60,
|
||
|
subchart_axis_x_show: true,
|
||
|
subchart_onbrush() {},
|
||
|
// color
|
||
|
color_pattern: [],
|
||
|
color_threshold: {},
|
||
|
// legend
|
||
|
legend_show: true,
|
||
|
legend_hide: false,
|
||
|
legend_position: 'bottom',
|
||
|
legend_inset_anchor: 'top-left',
|
||
|
legend_inset_x: 10,
|
||
|
legend_inset_y: 0,
|
||
|
legend_inset_step: undefined,
|
||
|
legend_item_onclick: undefined,
|
||
|
legend_item_onmouseover: undefined,
|
||
|
legend_item_onmouseout: undefined,
|
||
|
legend_equally: false,
|
||
|
legend_padding: 0,
|
||
|
legend_item_tile_width: 10,
|
||
|
legend_item_tile_height: 10,
|
||
|
// axis
|
||
|
axis_rotated: false,
|
||
|
axis_x_show: true,
|
||
|
axis_x_type: 'indexed',
|
||
|
axis_x_localtime: true,
|
||
|
axis_x_categories: [],
|
||
|
axis_x_tick_centered: false,
|
||
|
axis_x_tick_format: undefined,
|
||
|
axis_x_tick_culling: {},
|
||
|
axis_x_tick_culling_max: 10,
|
||
|
axis_x_tick_count: undefined,
|
||
|
axis_x_tick_fit: true,
|
||
|
axis_x_tick_values: null,
|
||
|
axis_x_tick_rotate: 0,
|
||
|
axis_x_tick_outer: true,
|
||
|
axis_x_tick_multiline: true,
|
||
|
axis_x_tick_width: null,
|
||
|
axis_x_max: undefined,
|
||
|
axis_x_min: undefined,
|
||
|
axis_x_padding: {},
|
||
|
axis_x_height: undefined,
|
||
|
axis_x_extent: undefined,
|
||
|
axis_x_label: {},
|
||
|
axis_y_show: true,
|
||
|
axis_y_type: undefined,
|
||
|
axis_y_max: undefined,
|
||
|
axis_y_min: undefined,
|
||
|
axis_y_inverted: false,
|
||
|
axis_y_center: undefined,
|
||
|
axis_y_inner: undefined,
|
||
|
axis_y_label: {},
|
||
|
axis_y_tick_format: undefined,
|
||
|
axis_y_tick_outer: true,
|
||
|
axis_y_tick_values: null,
|
||
|
axis_y_tick_rotate: 0,
|
||
|
axis_y_tick_count: undefined,
|
||
|
axis_y_tick_time_value: undefined,
|
||
|
axis_y_tick_time_interval: undefined,
|
||
|
axis_y_padding: {},
|
||
|
axis_y_default: undefined,
|
||
|
axis_y2_show: false,
|
||
|
axis_y2_max: undefined,
|
||
|
axis_y2_min: undefined,
|
||
|
axis_y2_inverted: false,
|
||
|
axis_y2_center: undefined,
|
||
|
axis_y2_inner: undefined,
|
||
|
axis_y2_label: {},
|
||
|
axis_y2_tick_format: undefined,
|
||
|
axis_y2_tick_outer: true,
|
||
|
axis_y2_tick_values: null,
|
||
|
axis_y2_tick_count: undefined,
|
||
|
axis_y2_padding: {},
|
||
|
axis_y2_default: undefined,
|
||
|
// grid
|
||
|
grid_x_show: false,
|
||
|
grid_x_type: 'tick',
|
||
|
grid_x_lines: [],
|
||
|
grid_y_show: false,
|
||
|
// not used
|
||
|
// grid_y_type: 'tick',
|
||
|
grid_y_lines: [],
|
||
|
grid_y_ticks: 10,
|
||
|
grid_focus_show: true,
|
||
|
grid_lines_front: true,
|
||
|
// point - point of each data
|
||
|
point_show: true,
|
||
|
point_r: 2.5,
|
||
|
point_sensitivity: 10,
|
||
|
point_focus_expand_enabled: true,
|
||
|
point_focus_expand_r: undefined,
|
||
|
point_select_r: undefined,
|
||
|
// line
|
||
|
line_connectNull: false,
|
||
|
line_step_type: 'step',
|
||
|
// bar
|
||
|
bar_width: undefined,
|
||
|
bar_width_ratio: 0.6,
|
||
|
bar_width_max: undefined,
|
||
|
bar_zerobased: true,
|
||
|
// area
|
||
|
area_zerobased: true,
|
||
|
area_above: false,
|
||
|
// pie
|
||
|
pie_label_show: true,
|
||
|
pie_label_format: undefined,
|
||
|
pie_label_threshold: 0.05,
|
||
|
pie_label_ratio: undefined,
|
||
|
pie_expand: {},
|
||
|
pie_expand_duration: 50,
|
||
|
// gauge
|
||
|
gauge_fullCircle: false,
|
||
|
gauge_label_show: true,
|
||
|
gauge_label_format: undefined,
|
||
|
gauge_min: 0,
|
||
|
gauge_max: 100,
|
||
|
gauge_startingAngle: -1 * Math.PI / 2,
|
||
|
gauge_units: undefined,
|
||
|
gauge_width: undefined,
|
||
|
gauge_expand: {},
|
||
|
gauge_expand_duration: 50,
|
||
|
// donut
|
||
|
donut_label_show: true,
|
||
|
donut_label_format: undefined,
|
||
|
donut_label_threshold: 0.05,
|
||
|
donut_label_ratio: undefined,
|
||
|
donut_width: undefined,
|
||
|
donut_title: '',
|
||
|
donut_expand: {},
|
||
|
donut_expand_duration: 50,
|
||
|
// spline
|
||
|
spline_interpolation_type: 'cardinal',
|
||
|
// region - region to change style
|
||
|
regions: [],
|
||
|
// tooltip - show when mouseover on each data
|
||
|
tooltip_show: true,
|
||
|
tooltip_grouped: true,
|
||
|
tooltip_format_title: undefined,
|
||
|
tooltip_format_name: undefined,
|
||
|
tooltip_format_value: undefined,
|
||
|
tooltip_position: undefined,
|
||
|
tooltip_contents(d, defaultTitleFormat, defaultValueFormat, color) {
|
||
|
return this.getTooltipContent ? this.getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color) : '';
|
||
|
},
|
||
|
tooltip_init_show: false,
|
||
|
tooltip_init_x: 0,
|
||
|
tooltip_init_position: { top: '0px', left: '50px' },
|
||
|
tooltip_onshow() {},
|
||
|
tooltip_onhide() {},
|
||
|
// title
|
||
|
title_text: undefined,
|
||
|
title_padding: {
|
||
|
top: 0,
|
||
|
right: 0,
|
||
|
bottom: 0,
|
||
|
left: 0,
|
||
|
},
|
||
|
title_position: 'top-center',
|
||
|
// TouchEvent configuration
|
||
|
touch_tap_radius: 20, // touch movement must be less than this to be a 'tap'
|
||
|
touch_tap_delay: 500, //clicks are suppressed for this many ms after a tap
|
||
|
};
|
||
|
|
||
|
Object.keys(this.additionalConfig).forEach(function (key) {
|
||
|
config[key] = this.additionalConfig[key];
|
||
|
}, this);
|
||
|
|
||
|
return config;
|
||
|
};
|
||
|
const additionalConfig = {};
|
||
|
|
||
|
const loadConfig = function (config) {
|
||
|
let this_config = this.config, target, keys, read;
|
||
|
function find() {
|
||
|
const key = keys.shift();
|
||
|
// console.log("key =>", key, ", target =>", target);
|
||
|
if (key && target && typeof target === 'object' && key in target) {
|
||
|
target = target[key];
|
||
|
return find();
|
||
|
}
|
||
|
else if (!key) {
|
||
|
return target;
|
||
|
}
|
||
|
else {
|
||
|
return undefined;
|
||
|
}
|
||
|
}
|
||
|
Object.keys(this_config).forEach((key) => {
|
||
|
target = config;
|
||
|
keys = key.split('_');
|
||
|
read = find();
|
||
|
// console.log("CONFIG : ", key, read);
|
||
|
if (isDefined(read)) {
|
||
|
this_config[key] = read;
|
||
|
}
|
||
|
});
|
||
|
};
|
||
|
|
||
|
export {
|
||
|
getDefaultConfig,
|
||
|
additionalConfig,
|
||
|
loadConfig,
|
||
|
};
|