billboard.js
Version:
Re-usable easy interface JavaScript chart library, based on D3 v4+
1,566 lines (1,551 loc) • 684 kB
JavaScript
/*!
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*
* billboard.js, JavaScript chart library
* https://naver.github.io/billboard.js/
*
* @version 2.0.0-next.4
*/
import { timeParse, utcParse, timeFormat, utcFormat } from 'd3-time-format';
import { event, select, mouse, namespaces, selectAll } from 'd3-selection';
import { brushSelection, brushY, brushX } from 'd3-brush';
import { csvParseRows, csvParse, tsvParseRows, tsvParse } from 'd3-dsv';
import { drag as drag$1 } from 'd3-drag';
import { scaleOrdinal, scaleTime, scaleLinear } from 'd3-scale';
import { transition } from 'd3-transition';
import { curveBasis, curveBasisClosed, curveBasisOpen, curveBundle, curveCardinal, curveCardinalClosed, curveCardinalOpen, curveCatmullRom, curveCatmullRomClosed, curveCatmullRomOpen, curveMonotoneX, curveMonotoneY, curveNatural, curveLinearClosed, curveLinear, curveStep, curveStepAfter, curveStepBefore, pie as pie$1, arc, area as area$1, line as line$1 } from 'd3-shape';
import { zoomIdentity, zoomTransform, zoom as zoom$2 } from 'd3-zoom';
import { axisLeft, axisBottom, axisTop, axisRight } from 'd3-axis';
import { easeLinear } from 'd3-ease';
import { rgb } from 'd3-color';
import { interpolate } from 'd3-interpolate';
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* CSS class names definition
* @private
*/
var CLASS = {
arc: "bb-arc",
arcLabelLine: "bb-arc-label-line",
arcs: "bb-arcs",
area: "bb-area",
areas: "bb-areas",
axis: "bb-axis",
axisX: "bb-axis-x",
axisXLabel: "bb-axis-x-label",
axisY: "bb-axis-y",
axisY2: "bb-axis-y2",
axisY2Label: "bb-axis-y2-label",
axisYLabel: "bb-axis-y-label",
bar: "bb-bar",
bars: "bb-bars",
brush: "bb-brush",
button: "bb-button",
buttonZoomReset: "bb-zoom-reset",
chart: "bb-chart",
chartArc: "bb-chart-arc",
chartArcs: "bb-chart-arcs",
chartArcsBackground: "bb-chart-arcs-background",
chartArcsGaugeMax: "bb-chart-arcs-gauge-max",
chartArcsGaugeMin: "bb-chart-arcs-gauge-min",
chartArcsGaugeUnit: "bb-chart-arcs-gauge-unit",
chartArcsTitle: "bb-chart-arcs-title",
chartArcsGaugeTitle: "bb-chart-arcs-gauge-title",
chartBar: "bb-chart-bar",
chartBars: "bb-chart-bars",
chartCircles: "bb-chart-circles",
chartLine: "bb-chart-line",
chartLines: "bb-chart-lines",
chartRadar: "bb-chart-radar",
chartRadars: "bb-chart-radars",
chartText: "bb-chart-text",
chartTexts: "bb-chart-texts",
circle: "bb-circle",
circles: "bb-circles",
colorPattern: "bb-color-pattern",
colorScale: "bb-colorscale",
defocused: "bb-defocused",
dragarea: "bb-dragarea",
empty: "bb-empty",
eventRect: "bb-event-rect",
eventRects: "bb-event-rects",
eventRectsMultiple: "bb-event-rects-multiple",
eventRectsSingle: "bb-event-rects-single",
focused: "bb-focused",
gaugeValue: "bb-gauge-value",
grid: "bb-grid",
gridLines: "bb-grid-lines",
legend: "bb-legend",
legendBackground: "bb-legend-background",
legendItem: "bb-legend-item",
legendItemEvent: "bb-legend-item-event",
legendItemFocused: "bb-legend-item-focused",
legendItemHidden: "bb-legend-item-hidden",
legendItemPoint: "bb-legend-item-point",
legendItemTile: "bb-legend-item-tile",
level: "bb-level",
levels: "bb-levels",
line: "bb-line",
lines: "bb-lines",
main: "bb-main",
region: "bb-region",
regions: "bb-regions",
selectedCircle: "bb-selected-circle",
selectedCircles: "bb-selected-circles",
shape: "bb-shape",
shapes: "bb-shapes",
stanfordElements: "bb-stanford-elements",
stanfordLine: "bb-stanford-line",
stanfordLines: "bb-stanford-lines",
stanfordRegion: "bb-stanford-region",
stanfordRegions: "bb-stanford-regions",
target: "bb-target",
text: "bb-text",
texts: "bb-texts",
title: "bb-title",
tooltip: "bb-tooltip",
tooltipContainer: "bb-tooltip-container",
tooltipName: "bb-tooltip-name",
xgrid: "bb-xgrid",
xgridFocus: "bb-xgrid-focus",
xgridLine: "bb-xgrid-line",
xgridLines: "bb-xgrid-lines",
xgrids: "bb-xgrids",
ygrid: "bb-ygrid",
ygridFocus: "bb-ygrid-focus",
ygridLine: "bb-ygrid-line",
ygridLines: "bb-ygrid-lines",
ygrids: "bb-ygrids",
zoomBrush: "bb-zoom-brush",
EXPANDED: "_expanded_",
SELECTED: "_selected_",
INCLUDED: "_included_",
TextOverlapping: "text-overlapping"
};
/**
* Elements class.
* @class Elements
* @ignore
* @private
*/
var Element = /** @class */ (function () {
function Element() {
var element = {
chart: null,
main: null,
svg: null,
axis: {
x: null,
y: null,
y2: null,
subX: null
},
defs: null,
tooltip: null,
legend: null,
title: null,
subchart: {
main: null,
bar: null,
line: null,
area: null // $$.contextArea
},
arcs: null,
bar: null,
line: null,
area: null,
circle: null,
radar: null,
text: null,
grid: {
main: null,
x: null,
y: null
},
gridLines: {
main: null,
x: null,
y: null
},
region: {
main: null,
list: null // mainRegion
},
eventRect: null
};
return element;
}
return Element;
}());
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* State class.
* @class State
* @ignore
* @private
*/
var State = /** @class */ (function () {
function State() {
return {
width: 0,
width2: 0,
height: 0,
height2: 0,
margin: {
top: 0,
bottom: 0,
left: 0,
right: 0
},
margin2: {
top: 0,
bottom: 0,
left: 0,
right: 0
},
margin3: {
top: 0,
bottom: 0,
left: 0,
right: 0
},
arcWidth: 0,
arcHeight: 0,
xAxisHeight: 0,
hasAxis: false,
hasRadar: false,
current: {
width: 0,
height: 0,
dataMax: 0,
maxTickWidths: {
x: { size: 0, ticks: [], clipPath: 0, domain: "" },
y: { size: 0, domain: "" },
y2: { size: 0, domain: "" }
},
// current used chart type list
types: []
},
// legend
isLegendRight: false,
isLegendInset: false,
isLegendTop: false,
isLegendLeft: false,
legendStep: 0,
legendItemWidth: 0,
legendItemHeight: 0,
legendHasRendered: false,
axis: {
x: {
padding: { left: 0, right: 0 },
tickCount: 0
}
},
rotatedPadding: {
left: 30,
right: 0,
top: 5
},
withoutFadeIn: {},
inputType: "",
datetimeId: "",
// clip id string
clip: {
id: "",
idXAxis: "",
idYAxis: "",
idXAxisTickTexts: "",
idGrid: "",
idSubchart: "",
path: "",
pathXAxis: "",
pathYAxis: "",
pathXAxisTickTexts: "",
pathGrid: ""
},
// status
dragStart: null,
dragging: false,
flowing: false,
cancelClick: false,
mouseover: false,
rendered: false,
transiting: false,
resizing: false,
toggling: false,
hasNegativeValue: false,
hasPositiveValue: true,
orgAreaOpacity: "0.2",
// ID strings
hiddenTargetIds: [],
hiddenLegendIds: [],
focusedTargetIds: [],
defocusedTargetIds: [],
// value for Arc
radius: 0,
innerRadius: 0,
innerRadiusRatio: 0,
gaugeArcWidth: 0,
radiusExpanded: 0,
// xgrid attribute
xgridAttr: {
x1: null,
x2: null,
y1: null,
y2: null
}
};
}
return State;
}());
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
// mapping
var classes = {
element: Element,
state: State
};
/**
* Internal store class.
* @class Store
* @ignore
* @private
*/
var Store = /** @class */ (function () {
function Store() {
var _this = this;
Object.keys(classes).forEach(function (v) {
_this[v] = new classes[v]();
});
}
Store.prototype.getStore = function (name) {
return this[name];
};
return Store;
}());
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var _assign = function __assign() {
return _assign = Object.assign || function (t) {
for (var s, i = 1, n = arguments.length; i < n; i++) for (var p in s = arguments[i], s) Object.prototype.hasOwnProperty.call(s, p) && (t[p] = s[p]);
return t;
}, _assign.apply(this, arguments);
};
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
return r;
}
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* main config options
*/
var main = {
/**
* Specify the CSS selector or the element which the chart will be set to. D3 selection object can be specified also.<br>
* If other chart is set already, it will be replaced with the new one (only one chart can be set in one element).
* - **NOTE:** In case of element doesn't exist or not specified, will add a `<div>` element to the body.
* @name bindto
* @memberof Options
* @property {string|HTMLElement|d3.selection|object} [bindto="#chart"] Specify the element where chart will be drawn.
* @property {string|HTMLElement|d3.selection} bindto.element="#chart" Specify the element where chart will be drawn.
* @property {string} [bindto.classname=bb] Specify the class name of bind element.<br>
* **NOTE:** When class name isn't `bb`, then you also need to update the default CSS to be rendered correctly.
* @default #chart
* @example
* bindto: "#myContainer"
*
* // or HTMLElement
* bindto: document.getElementById("myContainer")
*
* // or D3 selection object
* bindto: d3.select("#myContainer")
*
* // or to change default classname
* bindto: {
* element: "#chart",
* classname: "bill-board" // ex) <div id='chart' class='bill-board'>
* }
*/
bindto: "#chart",
/**
* Set chart background.
* @name background
* @memberof Options
* @property {object} background background object
* @property {string} background.class Specify the class name for background element.
* @property {string} background.color Specify the fill color for background element.<br>**NOTE:** Will be ignored if `imgUrl` option is set.
* @property {string} background.imgUrl Specify the image url string for background.
* @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.Background)
* @example
* background: {
* class: "myClass",
* color: "red",
*
* // Set image url for background.
* // If specified, 'color' option will be ignored.
* imgUrl: "https://naver.github.io/billboard.js/img/logo/billboard.js.svg",
* }
*/
background: {},
/**
* Set 'clip-path' attribute for chart element
* - **NOTE:**
* > When is false, chart node element is positioned after the axis node in DOM tree hierarchy.
* > Is to make chart element positioned over axis element.
* @name clipPath
* @memberof Options
* @type {boolean}
* @default true
* @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.clipPath)
* @example
* // don't set 'clip-path' attribute
* clipPath: false
*/
clipPath: true,
/**
* Set svg element's class name
* @name svg
* @memberof Options
* @type {object}
* @property {object} [svg] svg object
* @property {string} [svg.classname] class name for svg element
* @example
* svg: {
* classname: "test_class"
* }
*/
svg_classname: undefined,
/**
* The desired size of the chart element.
* If value is not specified, the width of the chart will be calculated by the size of the parent element it's appended to.
* @name size
* @memberof Options
* @type {object}
* @property {object} [size] size object
* @property {number} [size.width] width of the chart element
* @property {number} [size.height] height of the chart element
* @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.ChartSize)
* @example
* size: {
* width: 640,
* height: 480
* }
*/
size_width: undefined,
size_height: undefined,
/**
* The padding of the chart element.
* @name padding
* @memberof Options
* @type {object}
* @property {object} [padding] padding object
* @property {number} [padding.top] padding on the top of chart
* @property {number} [padding.right] padding on the right of chart
* @property {number} [padding.bottom] padding on the bottom of chart
* @property {number} [padding.left] padding on the left of chart
* @example
* padding: {
* top: 20,
* right: 20,
* bottom: 20,
* left: 20
* }
*/
padding_left: undefined,
padding_right: undefined,
padding_top: undefined,
padding_bottom: undefined,
/**
* Set chart resize options
* @name resize
* @memberof Options
* @type {object}
* @property {object} [resize] resize object
* @property {boolean} [resize.auto=true] Set chart resize automatically on viewport changes.
* @example
* resize: {
* auto: false
* }
*/
resize_auto: true,
/**
* Set a callback to execute when mouse/touch enters the chart.
* @name onover
* @memberof Options
* @type {Function}
* @default undefined
* @example
* // @param {Chart} ctx - Instance itself
* onover: function(ctx) {
* ...
* }
*/
onover: undefined,
/**
* Set a callback to execute when mouse/touch leaves the chart.
* @name onout
* @memberof Options
* @type {Function}
* @default undefined
* @example
* // @param {Chart} ctx - Instance itself
* onout: function(ctx) {
* ...
* }
*/
onout: undefined,
/**
* Set a callback to execute when user resizes the screen.
* @name onresize
* @memberof Options
* @type {Function}
* @default undefined
* @example
* // @param {Chart} ctx - Instance itself
* onresize: function(ctx) {
* ...
* }
*/
onresize: undefined,
/**
* Set a callback to execute when screen resize finished.
* @name onresized
* @memberof Options
* @type {Function}
* @default undefined
* @example
* // @param {Chart} ctx - Instance itself
* onresized: function(ctx) {
* ...
* }
*/
onresized: undefined,
/**
* Set a callback to execute before the chart is initialized
* @name onbeforeinit
* @memberof Options
* @type {Function}
* @default undefined
* @example
* // @param {Chart} ctx - Instance itself
* onbeforeinit: function(ctx) {
* ...
* }
*/
onbeforeinit: undefined,
/**
* Set a callback to execute when the chart is initialized.
* @name oninit
* @memberof Options
* @type {Function}
* @default undefined
* @example
* // @param {Chart} ctx - Instance itself
* oninit: function(ctx) {
* ...
* }
*/
oninit: undefined,
/**
* Set a callback to execute after the chart is initialized
* @name onafterinit
* @memberof Options
* @type {Function}
* @default undefined
* @example
* // @param {Chart} ctx - Instance itself
* onafterinit: function(ctx) {
* ...
* }
*/
onafterinit: undefined,
/**
* Set a callback which is executed when the chart is rendered. Basically, this callback will be called in each time when the chart is redrawed.
* @name onrendered
* @memberof Options
* @type {Function}
* @default undefined
* @example
* // @param {Chart} ctx - Instance itself
* onrendered: function(ctx) {
* ...
* }
*/
onrendered: undefined,
/**
* Set duration of transition (in milliseconds) for chart animation.<br><br>
* - **NOTE:** If `0 `or `null` set, transition will be skipped. So, this makes initial rendering faster especially in case you have a lot of data.
* @name transition
* @memberof Options
* @type {object}
* @property {object} [transition] transition object
* @property {number} [transition.duration=350] duration in milliseconds
* @example
* transition: {
* duration: 500
* }
*/
transition_duration: 350,
/**
* Set plugins
* @name plugins
* @memberof Options
* @type {Array}
* @example
* plugins: [
* new bb.plugin.stanford({ ... }),
* new PluginA(),
* ...
* ]
*/
plugins: [],
/**
* Control the render timing
* @name render
* @memberof Options
* @type {object}
* @property {object} [render] render object
* @property {boolean} [render.lazy=true] Make to not render at initialization (enabled by default when bind element's visibility is hidden).
* @property {boolean} [render.observe=true] Observe bind element's visibility(`display` or `visiblity` inline css property or class value) & render when is visible automatically (for IEs, only works IE11+). When set to **false**, call [`.flush()`](./Chart.html#flush) to render.
* @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.LazyRender)
* @example
* render: {
* lazy: true,
* observe: true
* }
*
* @example
* // <!-- render.lazy will detect visibility defined -->
* // (a) <div id='chart' class='hide'></div>
* // (b) <div id='chart' style='display:none'></div>
*
* // render.lazy enabled by default when element is hidden
* var chart = bb.generate({ ... });
*
* // chart will be rendered automatically when element's visibility changes
* // Note: works only for inlined css property or class attribute changes
* document.getElementById('chart').classList.remove('hide') // (a)
* document.getElementById('chart').style.display = 'block'; // (b)
*
* @example
* // chart won't be rendered and not observing bind element's visiblity changes
* var chart = bb.generate({
* render: {
* lazy: true,
* observe: false
* }
* });
*
* // call at any point when you want to render
* chart.flush();
*/
render: {},
/**
* Show rectangles inside the chart.<br><br>
* This option accepts array including object that has axis, start, end and class.
* The keys start, end and class are optional.
* axis must be x, y or y2. start and end should be the value where regions start and end.
* If not specified, the edge values will be used.
* If timeseries x axis, date string, Date object and unixtime integer can be used.
* If class is set, the region element will have it as class.
* @name regions
* @memberof Options
* @type {Array}
* @default []
* @example
* regions: [
* {
* axis: "x",
* start: 1,
* end: 4,
* class: "region-1-4"
* }
* ]
*/
regions: []
};
/**
* data config options
*/
var data = {
/**
* Converts data id value
* @name data․idConverter
* @memberof Options
* @type {Function}
* @default function(id) { return id; }
* @example
* data: {
* idConverter: function(id) {
* // when id is 'data1', converts to be 'data2'
* // 'data2' should be given as the initial data value
* if (id === "data1") {
* return "data2";
* } else {
* return id;
* }
* }
* }
*/
data_idConverter: function (id) { return id; },
/**
* Set custom data name.
* @name data․names
* @memberof Options
* @type {object}
* @default {}
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataName)
* @example
* data: {
* names: {
* data1: "Data Name 1",
* data2: "Data Name 2"
* }
* }
*/
data_names: {},
/**
* Set custom data class.<br><br>
* If this option is specified, the element g for the data has an additional class that has the prefix 'bb-target-' (eg. bb-target-additional-data1-class).
* @name data․classes
* @memberof Options
* @type {object}
* @default {}
* @example
* data: {
* classes: {
* data1: "additional-data1-class",
* data2: "additional-data2-class"
* }
* }
*/
data_classes: {},
/**
* Set chart type at once.<br><br>
* If this option is specified, the type will be applied to every data. This setting can be overwritten by data.types.<br><br>
* **Available Values:**
* - area
* - area-line-range
* - area-spline
* - area-spline-range
* - area-step
* - bar
* - bubble
* - donut
* - gauge
* - line
* - pie
* - radar
* - scatter
* - spline
* - step
* @name data․type
* @memberof Options
* @type {string}
* @default "line"<br>NOTE: When importing shapes by ESM, `line()` should be specified for type.
* @example
* data: {
* type: "bar"
* }
* @example
* // Generate chart by importing ESM
* // Import types to be used only, where this will make smaller bundle size.
* import bb, {
* area,
* areaLineRange,
* areaSpline,
* areaSplineRange,
* areaStep,
* bar,
* bubble,
* donut,
* gauge,
* line,
* pie,
* radar,
* scatter,
* spline,
* step
* }
*
* bb.generate({
* ...,
* data: {
* type: bar()
* }
* });
*/
data_type: undefined,
/**
* Set chart type for each data.<br>
* This setting overwrites data.type setting.
* - **NOTE:** `radar` type can't be combined with other types.
* @name data․types
* @memberof Options
* @type {object}
* @default {}
* @example
* data: {
* types: {
* data1: "bar",
* data2: "spline"
* }
* }
* @example
* // Generate chart by importing ESM
* // Import types to be used only, where this will make smaller bundle size.
* import bb, {
* area,
* areaLineRange,
* areaSpline,
* areaSplineRange,
* areaStep,
* bar,
* bubble,
* donut,
* gauge,
* line,
* pie,
* radar,
* scatter,
* spline,
* step
* }
*
* bb.generate({
* ...,
* data: {
* types: {
* data1: bar(),
* data1: spline()
* }
* }
* });
*/
data_types: {},
/**
* This option changes the order of stacking data and pieces of pie/donut.
* - If `null` specified, it will be the order the data loaded.
* - If function specified, it will be used as [Array.sort compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Parameters)<br><br>
*
* **Available Values:**
* - `desc`: In descending order
* - `asc`: In ascending order
* - `null`: It keeps the data load order
* - `function(data1, data2) { ... }`: Array.sort compareFunction
* @name data․order
* @memberof Options
* @type {string|Function|null}
* @default desc
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataOrder)
* @example
* data: {
* // in descending order (default)
* order: "desc"
*
* // in ascending order
* order: "asc"
*
* // keeps data input order
* order: null
*
* // specifying sort function
* order: function(a, b) {
* // param data passed format
* {
* id: "data1", id_org: "data1", values: [
* {x: 5, value: 250, id: "data1", index: 5, name: "data1"},
* ...
* ]
* }
* }
* }
*/
data_order: "desc",
/**
* Set groups for the data for stacking.
* @name data․groups
* @memberof Options
* @type {Array}
* @default []
* @example
* data: {
* groups: [
* ["data1", "data2"],
* ["data3"]
* ]
* }
*/
data_groups: [],
/**
* Set color converter function.<br><br>
* This option should a function and the specified function receives color (e.g. '#ff0000') and d that has data parameters like id, value, index, etc. And it must return a string that represents color (e.g. '#00ff00').
* @name data․color
* @memberof Options
* @type {Function}
* @default undefined
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataColor)
* @example
* data: {
* color: function(color, d) { ... }
* }
*/
data_color: undefined,
/**
* Set color for each data.
* @name data․colors
* @memberof Options
* @type {object}
* @default {}
* @example
* data: {
* colors: {
* data1: "#ff0000",
* data2: function(d) {
* return "#000";
* }
* ...
* }
* }
*/
data_colors: {},
/**
* Set labels options
* @name data․labels
* @memberof Options
* @type {object}
* @property {object} data Data object
* @property {boolean} [data.labels=false] Show or hide labels on each data points
* @property {boolean} [data.labels.centered=false] Centerize labels on `bar` shape. (**NOTE:** works only for 'bar' type)
* @property {Function} [data.labels.format] Set formatter function for data labels.<br>
* The formatter function receives 4 arguments such as v, id, i, j and it must return a string that will be shown as the label. The arguments are:<br>
* - `v` is the value of the data point where the label is shown.
* - `id` is the id of the data where the label is shown.
* - `i` is the index of the data point where the label is shown.
* - `j` is the sub index of the data point where the label is shown.<br><br>
* Formatter function can be defined for each data by specifying as an object and D3 formatter function can be set (ex. d3.format('$'))
* @property {string|object} [data.labels.colors] Set label text colors.
* @property {object} [data.labels.position] Set each dataset position, relative the original.
* @property {number} [data.labels.position.x=0] x coordinate position, relative the original.
* @property {number} [data.labels.position.y=0] y coordinate position, relative the original.
* @memberof Options
* @type {object}
* @default {}
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataLabel)
* @see [Demo: label colors](https://naver.github.io/billboard.js/demo/#Data.DataLabelColors)
* @see [Demo: label format](https://naver.github.io/billboard.js/demo/#Data.DataLabelFormat)
* @see [Demo: label overlap](https://naver.github.io/billboard.js/demo/#Data.DataLabelOverlap)
* @see [Demo: label position](https://naver.github.io/billboard.js/demo/#Data.DataLabelPosition)
* @example
* data: {
* labels: true,
*
* // or set specific options
* labels: {
* format: function(v, id, i, j) { ... },
*
* // it's possible to set for each data
* format: {
* data1: function(v, id, i, j) { ... },
* ...
* },
*
* // align text to center of the 'bar' shape (works only for 'bar' type)
* centered: true,
*
* // apply for all label texts
* colors: "red",
*
* // or set different colors per dataset
* // for not specified dataset, will have the default color value
* colors: {
* data1: "yellow",
* data3: "green"
* },
*
* // set x, y coordinate position
* position: {
* x: -10,
* y: 10
* },
*
* // or set x, y coordinate position by each dataset
* position: {
* data1: {x: 5, y: 5},
* data2: {x: 10, y: -20}
* }
* }
* }
*/
data_labels: {},
data_labels_colors: undefined,
data_labels_position: {},
/**
* Hide each data when the chart appears.<br><br>
* If true specified, all of data will be hidden. If multiple ids specified as an array, those will be hidden.
* @name data․hide
* @memberof Options
* @type {boolean|Array}
* @default false
* @example
* data: {
* // all of data will be hidden
* hide: true
*
* // specified data will be hidden
* hide: ["data1", ...]
* }
*/
data_hide: false,
/**
* Filter values to be shown
* The data value is the same as the returned by `.data()`.
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
* @name data․filter
* @memberof Options
* @type {Function}
* @default undefined
* @example
* data: {
* // filter for id value
* filter: function(v) {
* // v: [{id: "data1", id_org: "data1", values: [
* // {x: 0, value: 130, id: "data2", index: 0}, ...]
* // }, ...]
* return v.id !== "data1";
* }
*/
data_filter: undefined,
/**
* Set a callback for click event on each data point.<br><br>
* This callback will be called when each data point clicked and will receive `d` and element as the arguments.
* - `d` is the data clicked and element is the element clicked.
* - `element` is the current interacting svg element.
* - In this callback, `this` will be the Chart object.
* @name data․onclick
* @memberof Options
* @type {Function}
* @default function() {}
* @example
* data: {
* onclick: function(d, element) {
* // d - ex) {x: 4, value: 150, id: "data1", index: 4, name: "data1"}
* // element - <circle>
* ...
* }
* }
*/
data_onclick: function () { },
/**
* Set a callback for mouse/touch over event on each data point.<br><br>
* This callback will be called when mouse cursor or via touch moves onto each data point and will receive `d` and `element` as the argument.
* - `d` is the data where mouse cursor moves onto.
* - `element` is the current interacting svg element.
* - In this callback, `this` will be the Chart object.
* @name data․onover
* @memberof Options
* @type {Function}
* @default function() {}
* @example
* data: {
* onover: function(d, element) {
* // d - ex) {x: 4, value: 150, id: "data1", index: 4}
* // element - <circle>
* ...
* }
* }
*/
data_onover: function () { },
/**
* Set a callback for mouse/touch out event on each data point.<br><br>
* This callback will be called when mouse cursor or via touch moves out each data point and will receive `d` as the argument.
* - `d` is the data where mouse cursor moves out.
* - `element` is the current interacting svg element.
* - In this callback, `this` will be the Chart object.
* @name data․onout
* @memberof Options
* @type {Function}
* @default function() {}
* @example
* data: {
* onout: function(d, element) {
* // d - ex) {x: 4, value: 150, id: "data1", index: 4}
* // element - <circle>
* ...
* }
* }
*/
data_onout: function () { },
/**
* Set a callback for minimum data
* - **NOTE:** For 'area-line-range' and 'area-spline-range', `mid` data will be taken for the comparison
* @name data․onmin
* @memberof Options
* @type {Function}
* @default undefined
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.OnMinMaxCallback)
* @example
* onmin: function(data) {
* // data - ex) [{x: 3, value: 400, id: "data1", index: 3}, ... ]
* ...
* }
*/
data_onmin: undefined,
/**
* Set a callback for maximum data
* - **NOTE:** For 'area-line-range' and 'area-spline-range', `mid` data will be taken for the comparison
* @name data․onmax
* @memberof Options
* @type {Function}
* @default undefined
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.OnMinMaxCallback)
* @example
* onmax: function(data) {
* // data - ex) [{x: 3, value: 400, id: "data1", index: 3}, ... ]
* ...
* }
*/
data_onmax: undefined,
/**
* Load a CSV or JSON file from a URL. NOTE that this will not work if loading via the "file://" protocol as the most browsers will block XMLHTTPRequests.
* @name data․url
* @memberof Options
* @type {string}
* @default undefined
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.LoadData)
* @example
* data: {
* url: "/data/test.csv"
* }
*/
data_url: undefined,
/**
* XHR header value
* - **NOTE:** Should be used with `data.url` option
* @name data․headers
* @memberof Options
* @type {string}
* @default undefined
* @see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader
* @example
* data: {
* url: "/data/test.csv",
* headers: {
* "Content-Type": "text/xml",
* ...
* }
* }
*/
data_headers: undefined,
/**
* Parse a JSON object for data. See also data.keys.
* @name data․json
* @memberof Options
* @type {Array}
* @default undefined
* @see [data․keys](#.data%25E2%2580%25A4keys)
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.JSONData)
* @example
* data: {
* json: [
* {name: "www.site1.com", upload: 200, download: 200, total: 400},
* {name: "www.site2.com", upload: 100, download: 300, total: 400},
* {name: "www.site3.com", upload: 300, download: 200, total: 500},
* {name: "www.site4.com", upload: 400, download: 100, total: 500}
* ],
* keys: {
* // x: "name", // it's possible to specify 'x' when category axis
* value: ["upload", "download"]
* }
* }
*/
data_json: undefined,
/**
* Load data from a multidimensional array, with the first element containing the data names, the following containing related data in that order.
* @name data․rows
* @memberof Options
* @type {Array}
* @default undefined
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.RowOrientedData)
* @example
* data: {
* rows: [
* ["A", "B", "C"],
* [90, 120, 300],
* [40, 160, 240],
* [50, 200, 290],
* [120, 160, 230],
* [80, 130, 300],
* [90, 220, 320]
* ]
* }
*
* // for 'range' types('area-line-range' or 'area-spline-range'), data should contain:
* // - an array of [high, mid, low] data following the order
* // - or an object with 'high', 'mid' and 'low' key value
* data: {
* rows: [
* ["data1", "data2"],
* [
* // or {high:150, mid: 140, low: 110}, 120
* [150, 140, 110], 120
* ],
* [[155, 130, 115], 55],
* [[160, 135, 120], 60]
* ],
* types: {
* data1: "area-line-range",
* data2: "line"
* }
* }
*
* // for 'bubble' type, data can contain dimension value:
* // - an array of [y, z] data following the order
* // - or an object with 'y' and 'z' key value
* // 'y' is for y axis coordination and 'z' is the bubble radius value
* data: {
* rows: [
* ["data1", "data2"],
* [
* // or {y:10, z: 140}, 120
* [10, 140], 120
* ],
* [[100, 30], 55],
* [[50, 100], 60]
* ],
* types: {
* data1: "bubble",
* data2: "line"
* }
* }
*/
data_rows: undefined,
/**
* Load data from a multidimensional array, with each element containing an array consisting of a datum name and associated data values.
* @name data․columns
* @memberof Options
* @type {Array}
* @default undefined
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.ColumnOrientedData)
* @example
* data: {
* columns: [
* ["data1", 30, 20, 50, 40, 60, 50],
* ["data2", 200, 130, 90, 240, 130, 220],
* ["data3", 300, 200, 160, 400, 250, 250]
* ]
* }
*
* // for 'range' types('area-line-range' or 'area-spline-range'), data should contain:
* // - an array of [high, mid, low] data following the order
* // - or an object with 'high', 'mid' and 'low' key value
* data: {
* columns: [
* ["data1",
* [150, 140, 110], // or {high:150, mid: 140, low: 110}
* [150, 140, 110],
* [150, 140, 110]
* ]
* ],
* type: "area-line-range"
* }
*
* // for 'bubble' type, data can contain dimension value:
* // - an array of [y, z] data following the order
* // - or an object with 'y' and 'z' key value
* // 'y' is for y axis coordination and 'z' is the bubble radius value
* data: {
* columns: [
* ["data1",
* [10, 140], // or {y:10, z: 140}
* [100, 30],
* [50, 100]
* ]
* ],
* type: "bubble"
* }
*/
data_columns: undefined,
/**
* Used if loading JSON via data.url.
* - **Available Values:**
* - json
* - csv
* - tsv
* @name data․mimeType
* @memberof Options
* @type {string}
* @default csv
* @example
* data: {
* mimeType: "json"
* }
*/
data_mimeType: "csv",
/**
* Choose which JSON object keys correspond to desired data.
* - **NOTE:** Only for JSON object given as array.
* @name data․keys
* @memberof Options
* @type {string}
* @default undefined
* @example
* data: {
* json: [
* {name: "www.site1.com", upload: 200, download: 200, total: 400},
* {name: "www.site2.com", upload: 100, download: 300, total: 400},
* {name: "www.site3.com", upload: 300, download: 200, total: 500},
* {name: "www.site4.com", upload: 400, download: 100, total: 500}
* ],
* keys: {
* // x: "name", // it's possible to specify 'x' when category axis
* value: ["upload", "download"]
* }
* }
*/
data_keys: undefined,
/**
* Set text label to be displayed when there's no data to show.
* - ex. Toggling all visible data to not be shown, unloading all current data, etc.
* @name data․empty․label․text
* @memberof Options
* @type {string}
* @default ""
* @example
* data: {
* empty: {
* label: {
* text: "No Data"
* }
* }
* }
*/
data_empty_label_text: ""
};
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* data.selection config options
*/
var dataSelection = {
/**
* Set data selection enabled<br><br>
* If this option is set true, we can select the data points and get/set its state of selection by API (e.g. select, unselect, selected).
* @name data․selection․enabled
* @memberof Options
* @type {boolean}
* @default false
* @see [Demo](https://naver.github.io/billboard.js/demo/#Data.DataSelection)
* @example
* data: {
* selection: {
* enabled: true
* }
* }
*/
data_selection_enabled: false,
/**
* Set grouped selection enabled.<br><br>
* If this option set true, multiple data points that have same x value will be selected by one selection.
* @name data․selection․grouped
* @memberof Options
* @type {boolean}
* @default false
* @example
* data: {
* selection: {
* grouped: true
* }
* }
*/
data_selection_grouped: false,
/**
* Set a callback for each data point to determine if it's selectable or not.<br><br>
* The callback will receive d as an argument and it has some parameters like id, value, index. This callback should return boolean.
* @name data․selection․isselectable
* @memberof Options
* @type {Function}
* @default function() { return true; }
* @example
* data: {
* selection: {
* isselectable: function(d) { ... }
* }
* }
*/
data_selection_isselectable: function () { return true; },
/**
* Set multiple data points selection enabled.<br><br>
* If this option set true, multile data points can have the selected state at the same time. If false set, only one data point can have the selected state and the others will be unselected when the new data point is selected.
* @name data․selection․multiple
* @memberof Options
* @type {boolean}
* @default true
* @example
* data: {
* selection: {
* multiple: false
* }
* }
*/
data_selection_multiple: true,
/**
* Enable to select data points by dragging.
* If this option set true, data points can be selected by dragging.
* - **NOTE:** If this option set true, scrolling on the chart will be disabled because dragging event will handle the event.
* @name data․selection․draggable
* @memberof Options
* @type {boolean}
* @default false
* @example
* data: {
* selection: {
* draggable: true
* }
* }
*/
data_selection_draggable: false,
/**
* Set a callback for on data selection.
* @name data․onselected
* @memberof Options
* @type {Function}
* @default function() {}
* @example
* data: {
* onselected: function(d, element) {
* // d - ex) {x: 4, value: 150, id: "data1", index: 4, name: "data1"}
* // element - <circle>
* ...
* }
* }
*/
data_onselected: function () { },
/**
* Set a callback for on data un-selection.
* @name data․onunselected
* @memberof Options
* @type {Function}
* @default function() {}
* @example
* data: {
* onunselected: function(d, element) {
* // d - ex) {x: 4, value: 150, id: "data1", index: 4, name: "data1"}
* // element - <circle>
* ...
* }
* }
*/
data_onunselected: function () { }
};
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
/**
* color config options
*/
var color = {
/**
* Set color of the data values
* @name color
* @memberof Options
* @type {object}
* @property {object} color color object
* @property {string|object|Function} [color.onover] Set the color value for each data point when mouse/touch onover event occurs.
* @property {Array|null} [color.pattern=[]] Set custom color pattern. Passing `null` will not set a color for these elements, which requires the usage of custom CSS-based theming to work.
* @property {Function} [color.tiles] if defined, allows use svg's patterns to fill data area. It should return an array of [SVGPatternElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGPatternElement).
* - **NOTE:** The pattern element's id will be defined as `bb-colorize-pattern-$COLOR-VALUE`.<br>
* ex. When color pattern value is `['red', '#fff']` and defined 2 patterns,then ids for pattern elements are:<br>
* - `bb-colorize-pattern-red`
* - `bb-colorize-pattern-fff`
* @property {object} [color.threshold] color threshold for gauge and tooltip color
* @property {string} [color.threshold.unit] If set to `value`, the threshold will be based on the data value. Otherwise it'll be based on equation of the `threshold.max` option value.
* @property {Array} [color.threshold.values] Threshold values for each steps
* @property {number} [color.threshold.max=100] The base value to determine threshold step value condition. When the given value is 15 and max 10, then the value for threshold is `15*100/10`.
* @example
* color: {
* pattern: ["#1f77b4", "#aec7e8", ...],
*
* // Set colors' patterns
* // it should return an array of SVGPatternElement
* tiles: function() {
* var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
* var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
* var circle1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
*
* pattern.setAttribute("patternUnits", "userSpaceOnUse");
* pattern.setAttribute("width", "32");
* pattern.setAttribute("height", "32");
*
* g.style.fill = "#000";
* g.style.opacity = "0.2";
*
* circle1.setAttribute("cx", "3");
* circle1.setAttribute("cy", "3");
* circle1.setAttribute("r", "3");
*
* g.appendChild(circle1);
* pattern.appendChild(g);
*
* return [pattern];
* },
*
* // for threshold usage, pattern values should be set for each steps
* pattern: ["grey", "green", "yellow", "orange", "red"],
* threshold: {
* unit: "value",
*
* // when value is 20 => 'green', value is 40 => 'orange' will be set.
* values: [10, 20, 30, 40, 50],
*
* // the equation for max:
* // - unit == 'value': max => 30
* // - unit != 'value': max => value*100/30
* max: 30
* },
*
* // set all data to 'red'
* onover: "red",
*
* // set different color for data
* onover: {
* data1: "red",
* data2: "yellow"
* },
*
* // will pass data object to the callback
* onover: function(d) {
* return d.id === "data1" ? "red" : "green";
* }
* }
*/
color_pattern: [],
color_tiles: undefined,
color_threshold: {},
color_onover: un