summaryrefslogtreecommitdiffstats
path: root/web/gui/src/dashboard.js/charting/d3pie.js
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-05-05 11:19:16 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-05-05 12:07:37 +0000
commitb485aab7e71c1625cfc27e0f92c9509f42378458 (patch)
treeae9abe108601079d1679194de237c9a435ae5b55 /web/gui/src/dashboard.js/charting/d3pie.js
parentAdding upstream version 1.44.3. (diff)
downloadnetdata-upstream.tar.xz
netdata-upstream.zip
Adding upstream version 1.45.3+dfsg.upstream/1.45.3+dfsgupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'web/gui/src/dashboard.js/charting/d3pie.js')
-rw-r--r--web/gui/src/dashboard.js/charting/d3pie.js341
1 files changed, 0 insertions, 341 deletions
diff --git a/web/gui/src/dashboard.js/charting/d3pie.js b/web/gui/src/dashboard.js/charting/d3pie.js
deleted file mode 100644
index 27cff8542..000000000
--- a/web/gui/src/dashboard.js/charting/d3pie.js
+++ /dev/null
@@ -1,341 +0,0 @@
-
-// d3pie
-
-NETDATA.d3pieInitialize = function (callback) {
- if (typeof netdataNoD3pie === 'undefined' || !netdataNoD3pie) {
-
- // d3pie requires D3
- if (!NETDATA.chartLibraries.d3.initialized) {
- if (NETDATA.chartLibraries.d3.enabled) {
- NETDATA.d3Initialize(function () {
- NETDATA.d3pieInitialize(callback);
- });
- } else {
- NETDATA.chartLibraries.d3pie.enabled = false;
- if (typeof callback === "function") {
- return callback();
- }
- }
- } else {
- $.ajax({
- url: NETDATA.d3pie_js,
- cache: true,
- dataType: "script",
- xhrFields: {withCredentials: true} // required for the cookie
- })
- .done(function () {
- NETDATA.registerChartLibrary('d3pie', NETDATA.d3pie_js);
- })
- .fail(function () {
- NETDATA.chartLibraries.d3pie.enabled = false;
- NETDATA.error(100, NETDATA.d3pie_js);
- })
- .always(function () {
- if (typeof callback === "function") {
- return callback();
- }
- });
- }
- } else {
- NETDATA.chartLibraries.d3pie.enabled = false;
- if (typeof callback === "function") {
- return callback();
- }
- }
-};
-
-NETDATA.d3pieSetContent = function (state, data, index) {
- state.legendFormatValueDecimalsFromMinMax(
- data.min,
- data.max
- );
-
- let content = [];
- let colors = state.chartColors();
- let len = data.result.labels.length;
- for (let i = 1; i < len; i++) {
- let label = data.result.labels[i];
- let value = data.result.data[index][label];
- let color = colors[i - 1];
-
- if (value !== null && value > 0) {
- content.push({
- label: label,
- value: value,
- color: color
- });
- }
- }
-
- if (content.length === 0) {
- content.push({
- label: 'no data',
- value: 100,
- color: '#666666'
- });
- }
-
- state.tmp.d3pie_last_slot = index;
- return content;
-};
-
-NETDATA.d3pieDateRange = function (state, data, index) {
- let dt = Math.round((data.before - data.after + 1) / data.points);
- let dt_str = NETDATA.seconds4human(dt);
-
- let before = data.result.data[index].time;
- let after = before - (dt * 1000);
-
- let d1 = NETDATA.dateTime.localeDateString(after);
- let t1 = NETDATA.dateTime.localeTimeString(after);
- let d2 = NETDATA.dateTime.localeDateString(before);
- let t2 = NETDATA.dateTime.localeTimeString(before);
-
- if (d1 === d2) {
- return d1 + ' ' + t1 + ' to ' + t2 + ', ' + dt_str;
- }
-
- return d1 + ' ' + t1 + ' to ' + d2 + ' ' + t2 + ', ' + dt_str;
-};
-
-NETDATA.d3pieSetSelection = function (state, t) {
- if (state.timeIsVisible(t) !== true) {
- return NETDATA.d3pieClearSelection(state, true);
- }
-
- let slot = state.calculateRowForTime(t);
- slot = state.data.result.data.length - slot - 1;
-
- if (slot < 0 || slot >= state.data.result.length) {
- return NETDATA.d3pieClearSelection(state, true);
- }
-
- if (state.tmp.d3pie_last_slot === slot) {
- // we already show this slot, don't do anything
- return true;
- }
-
- if (state.tmp.d3pie_timer === undefined) {
- state.tmp.d3pie_timer = NETDATA.timeout.set(function () {
- state.tmp.d3pie_timer = undefined;
- NETDATA.d3pieChange(state, NETDATA.d3pieSetContent(state, state.data, slot), NETDATA.d3pieDateRange(state, state.data, slot));
- }, 0);
- }
-
- return true;
-};
-
-NETDATA.d3pieClearSelection = function (state, force) {
- if (typeof state.tmp.d3pie_timer !== 'undefined') {
- NETDATA.timeout.clear(state.tmp.d3pie_timer);
- state.tmp.d3pie_timer = undefined;
- }
-
- if (state.isAutoRefreshable() && state.data !== null && force !== true) {
- NETDATA.d3pieChartUpdate(state, state.data);
- } else {
- if (state.tmp.d3pie_last_slot !== -1) {
- state.tmp.d3pie_last_slot = -1;
- NETDATA.d3pieChange(state, [{label: 'no data', value: 1, color: '#666666'}], 'no data available');
- }
- }
-
- return true;
-};
-
-NETDATA.d3pieChange = function (state, content, footer) {
- if (state.d3pie_forced_subtitle === null) {
- //state.d3pie_instance.updateProp("header.subtitle.text", state.units_current);
- state.d3pie_instance.options.header.subtitle.text = state.units_current;
- }
-
- if (state.d3pie_forced_footer === null) {
- //state.d3pie_instance.updateProp("footer.text", footer);
- state.d3pie_instance.options.footer.text = footer;
- }
-
- //state.d3pie_instance.updateProp("data.content", content);
- state.d3pie_instance.options.data.content = content;
- state.d3pie_instance.destroy();
- state.d3pie_instance.recreate();
- return true;
-};
-
-NETDATA.d3pieChartUpdate = function (state, data) {
- return NETDATA.d3pieChange(state, NETDATA.d3pieSetContent(state, data, 0), NETDATA.d3pieDateRange(state, data, 0));
-};
-
-NETDATA.d3pieChartCreate = function (state, data) {
-
- state.element_chart.id = 'd3pie-' + state.uuid;
- // console.log('id = ' + state.element_chart.id);
-
- let content = NETDATA.d3pieSetContent(state, data, 0);
-
- state.d3pie_forced_title = NETDATA.dataAttribute(state.element, 'd3pie-title', null);
- state.d3pie_forced_subtitle = NETDATA.dataAttribute(state.element, 'd3pie-subtitle', null);
- state.d3pie_forced_footer = NETDATA.dataAttribute(state.element, 'd3pie-footer', null);
-
- state.d3pie_options = {
- header: {
- title: {
- text: (state.d3pie_forced_title !== null) ? state.d3pie_forced_title : state.title,
- color: NETDATA.dataAttribute(state.element, 'd3pie-title-color', NETDATA.themes.current.d3pie.title),
- fontSize: NETDATA.dataAttribute(state.element, 'd3pie-title-fontsize', 12),
- fontWeight: NETDATA.dataAttribute(state.element, 'd3pie-title-fontweight', "bold"),
- font: NETDATA.dataAttribute(state.element, 'd3pie-title-font', "arial")
- },
- subtitle: {
- text: (state.d3pie_forced_subtitle !== null) ? state.d3pie_forced_subtitle : state.units_current,
- color: NETDATA.dataAttribute(state.element, 'd3pie-subtitle-color', NETDATA.themes.current.d3pie.subtitle),
- fontSize: NETDATA.dataAttribute(state.element, 'd3pie-subtitle-fontsize', 10),
- fontWeight: NETDATA.dataAttribute(state.element, 'd3pie-subtitle-fontweight', "normal"),
- font: NETDATA.dataAttribute(state.element, 'd3pie-subtitle-font', "arial")
- },
- titleSubtitlePadding: 1
- },
- footer: {
- text: (state.d3pie_forced_footer !== null) ? state.d3pie_forced_footer : NETDATA.d3pieDateRange(state, data, 0),
- color: NETDATA.dataAttribute(state.element, 'd3pie-footer-color', NETDATA.themes.current.d3pie.footer),
- fontSize: NETDATA.dataAttribute(state.element, 'd3pie-footer-fontsize', 9),
- fontWeight: NETDATA.dataAttribute(state.element, 'd3pie-footer-fontweight', "bold"),
- font: NETDATA.dataAttribute(state.element, 'd3pie-footer-font', "arial"),
- location: NETDATA.dataAttribute(state.element, 'd3pie-footer-location', "bottom-center") // bottom-left, bottom-center, bottom-right
- },
- size: {
- canvasHeight: state.chartHeight(),
- canvasWidth: state.chartWidth(),
- pieInnerRadius: NETDATA.dataAttribute(state.element, 'd3pie-pieinnerradius', "45%"),
- pieOuterRadius: NETDATA.dataAttribute(state.element, 'd3pie-pieouterradius', "80%")
- },
- data: {
- // none, random, value-asc, value-desc, label-asc, label-desc
- sortOrder: NETDATA.dataAttribute(state.element, 'd3pie-sortorder', "value-desc"),
- smallSegmentGrouping: {
- enabled: NETDATA.dataAttributeBoolean(state.element, "d3pie-smallsegmentgrouping-enabled", false),
- value: NETDATA.dataAttribute(state.element, 'd3pie-smallsegmentgrouping-value', 1),
- // percentage, value
- valueType: NETDATA.dataAttribute(state.element, 'd3pie-smallsegmentgrouping-valuetype', "percentage"),
- label: NETDATA.dataAttribute(state.element, 'd3pie-smallsegmentgrouping-label', "other"),
- color: NETDATA.dataAttribute(state.element, 'd3pie-smallsegmentgrouping-color', NETDATA.themes.current.d3pie.other)
- },
-
- // REQUIRED! This is where you enter your pie data; it needs to be an array of objects
- // of this form: { label: "label", value: 1.5, color: "#000000" } - color is optional
- content: content
- },
- labels: {
- outer: {
- // label, value, percentage, label-value1, label-value2, label-percentage1, label-percentage2
- format: NETDATA.dataAttribute(state.element, 'd3pie-labels-outer-format', "label-value1"),
- hideWhenLessThanPercentage: NETDATA.dataAttribute(state.element, 'd3pie-labels-outer-hidewhenlessthanpercentage', null),
- pieDistance: NETDATA.dataAttribute(state.element, 'd3pie-labels-outer-piedistance', 15)
- },
- inner: {
- // label, value, percentage, label-value1, label-value2, label-percentage1, label-percentage2
- format: NETDATA.dataAttribute(state.element, 'd3pie-labels-inner-format', "percentage"),
- hideWhenLessThanPercentage: NETDATA.dataAttribute(state.element, 'd3pie-labels-inner-hidewhenlessthanpercentage', 2)
- },
- mainLabel: {
- color: NETDATA.dataAttribute(state.element, 'd3pie-labels-mainLabel-color', NETDATA.themes.current.d3pie.mainlabel), // or 'segment' for dynamic color
- font: NETDATA.dataAttribute(state.element, 'd3pie-labels-mainLabel-font', "arial"),
- fontSize: NETDATA.dataAttribute(state.element, 'd3pie-labels-mainLabel-fontsize', 10),
- fontWeight: NETDATA.dataAttribute(state.element, 'd3pie-labels-mainLabel-fontweight', "normal")
- },
- percentage: {
- color: NETDATA.dataAttribute(state.element, 'd3pie-labels-percentage-color', NETDATA.themes.current.d3pie.percentage),
- font: NETDATA.dataAttribute(state.element, 'd3pie-labels-percentage-font', "arial"),
- fontSize: NETDATA.dataAttribute(state.element, 'd3pie-labels-percentage-fontsize', 10),
- fontWeight: NETDATA.dataAttribute(state.element, 'd3pie-labels-percentage-fontweight', "bold"),
- decimalPlaces: 0
- },
- value: {
- color: NETDATA.dataAttribute(state.element, 'd3pie-labels-value-color', NETDATA.themes.current.d3pie.value),
- font: NETDATA.dataAttribute(state.element, 'd3pie-labels-value-font', "arial"),
- fontSize: NETDATA.dataAttribute(state.element, 'd3pie-labels-value-fontsize', 10),
- fontWeight: NETDATA.dataAttribute(state.element, 'd3pie-labels-value-fontweight', "bold")
- },
- lines: {
- enabled: NETDATA.dataAttributeBoolean(state.element, 'd3pie-labels-lines-enabled', true),
- style: NETDATA.dataAttribute(state.element, 'd3pie-labels-lines-style', "curved"),
- color: NETDATA.dataAttribute(state.element, 'd3pie-labels-lines-color', "segment") // "segment" or a hex color
- },
- truncation: {
- enabled: NETDATA.dataAttributeBoolean(state.element, 'd3pie-labels-truncation-enabled', false),
- truncateLength: NETDATA.dataAttribute(state.element, 'd3pie-labels-truncation-truncatelength', 30)
- },
- formatter: function (context) {
- // console.log(context);
- if (context.part === 'value') {
- return state.legendFormatValue(context.value);
- }
- if (context.part === 'percentage') {
- return 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: "placeholder", // caption|placeholder
- string: "",
- placeholderParser: null, // function
- styles: {
- fadeInSpeed: 250,
- backgroundColor: NETDATA.themes.current.d3pie.tooltip_bg,
- backgroundOpacity: 0.5,
- color: NETDATA.themes.current.d3pie.tooltip_fg,
- borderRadius: 2,
- font: "arial",
- fontSize: 12,
- padding: 4
- }
- },
- misc: {
- colors: {
- background: 'transparent', // transparent or color #
- // segments: state.chartColors(),
- segmentStroke: NETDATA.dataAttribute(state.element, 'd3pie-misc-colors-segmentstroke', NETDATA.themes.current.d3pie.segment_stroke)
- },
- gradient: {
- enabled: NETDATA.dataAttributeBoolean(state.element, 'd3pie-misc-gradient-enabled', false),
- percentage: NETDATA.dataAttribute(state.element, 'd3pie-misc-colors-percentage', 95),
- color: NETDATA.dataAttribute(state.element, 'd3pie-misc-gradient-color', NETDATA.themes.current.d3pie.gradient_color)
- },
- canvasPadding: {
- top: 5,
- right: 5,
- bottom: 5,
- left: 5
- },
- pieCenterOffset: {
- x: 0,
- y: 0
- },
- cssPrefix: NETDATA.dataAttribute(state.element, 'd3pie-cssprefix', null)
- },
- callbacks: {
- onload: null,
- onMouseoverSegment: null,
- onMouseoutSegment: null,
- onClickSegment: null
- }
- };
-
- state.d3pie_instance = new d3pie(state.element_chart, state.d3pie_options);
- return true;
-};