@netdata/charts
Version:
Netdata frontend SDK and chart utilities
175 lines (174 loc) • 6.25 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var _default = exports["default"] = function _default(chartUI) {
var dataOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var _chartUI$getElement = chartUI.getElement(),
clientWidth = _chartUI$getElement.clientWidth,
clientHeight = _chartUI$getElement.clientHeight;
return {
header: {
title: {
text: "",
color: "",
fontSize: "",
fontWeight: ""
},
subtitle: {
text: "",
color: "",
fontSize: "",
fontWeight: ""
},
titleSubtitlePadding: 1
},
footer: {
text: "",
color: "",
fontSize: "",
fontWeight: "",
location: ""
},
data: _objectSpread({
// none, random, value-asc, value-desc, label-asc, label-desc
sortOrder: "label-asc",
smallSegmentGrouping: {
enabled: true,
value: 5,
// percentage, value
valueType: "count",
label: "smaller",
caption: "rest of dimensions",
color: chartUI.chart.getThemeAttribute("themeD3pieSmallColor")
},
content: []
}, dataOptions),
labels: {
outer: {
// label, value, percentage, label-value1, label-value2, label-percentage1,
// label-percentage2
format: "label-value2",
hideWhenLessThanPercentage: null,
pieDistance: 10
},
inner: {
// label, value, percentage, label-value1, label-value2, label-percentage1,
// label-percentage2
format: "percentage",
hideWhenLessThanPercentage: 101
},
mainLabel: {
color: "segment",
// or 'segment' for dynamic color
fontSize: "0.9em",
fontWeight: "normal",
font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
},
percentage: {
color: chartUI.chart.getThemeAttribute("themeInnerLabelColor"),
fontSize: "1em",
fontWeight: "strong",
decimalPlaces: 0,
font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
},
value: {
color: chartUI.chart.getThemeAttribute("themeD3pieSmallColor"),
fontSize: "1.2em",
fontWeight: "strong",
font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
},
lines: {
enabled: true,
style: "curved",
color: "segment"
},
truncation: {
enabled: false,
truncateLength: 30
},
formatter: function formatter(context) {
if (context.part === "value") return "".concat(context.realLabel === "No data" ? "-" : chartUI.chart.getConvertedValue(context.value, {
dimensionId: context.id
}), " ").concat(chartUI.chart.getUnitSign({
dimensionId: context.id
}));
if (context.part === "percentage") return "".concat(context.label, "%");
return context.label;
}
},
effects: {
load: {
effect: "none",
// none / default
speed: 0 // commented in the d3pie code to speed it up
},
pullOutSegmentOnClick: {
effect: "bounce",
// none / linear / bounce / elastic / back
speed: 400,
size: 5
},
highlightSegmentOnMouseover: true,
highlightLuminosity: -0.2
},
tooltips: {
enabled: false,
type: "caption",
// caption|placeholder
string: "",
placeholderParser: null,
// function
styles: {
fadeInSpeed: 250,
backgroundColor: "#000000",
backgroundOpacity: 0.5,
color: "#ffffff",
borderRadius: 2,
fontSize: "11px",
padding: 4
}
},
misc: {
colors: {
background: "transparent",
// transparent or color #
segments: [],
segmentStroke: chartUI.chart.getThemeAttribute("themeD3pieStroke")
},
gradient: {
enabled: false
},
canvasPadding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
pieCenterOffset: {
x: 0,
y: 0
},
cssPrefix: null
},
callbacks: {
onload: null,
onMouseoverSegment: null,
onMouseoutSegment: null,
onClickSegment: null
},
size: {
canvasHeight: Math.floor(clientHeight),
canvasWidth: Math.floor(clientWidth),
pieInnerRadius: "50%",
pieOuterRadius: "75%"
}
};
};