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

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,
};