mirror of
https://github.com/ntop/ntopng.git
synced 2026-04-29 07:29:32 +00:00
748 lines
24 KiB
JavaScript
748 lines
24 KiB
JavaScript
/**
|
|
(C) 2022 - ntop.org
|
|
*/
|
|
import { ntopng_utility } from '../services/context/ntopng_globals_services';
|
|
import NtopUtils from "../utilities/ntop-utils";
|
|
import FormatterUtils from "../utilities/formatter-utils.js";
|
|
|
|
const ntopChartApex = function () {
|
|
// define default chartOptions for all chart type.
|
|
const _default_BASE_ChartOptions = {
|
|
series: [],
|
|
chart: {
|
|
height: "100%",
|
|
width: "100%",
|
|
toolbar: {
|
|
show: false,
|
|
tools: {
|
|
zoomout: false,
|
|
download: false,
|
|
zoomin: false,
|
|
zoom: " ",
|
|
selection: false,
|
|
pan: false,
|
|
reset: false
|
|
}
|
|
},
|
|
events: {}
|
|
},
|
|
xaxis: {
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: true,
|
|
style: {
|
|
colors: [],
|
|
fontSize: "11px",
|
|
fontWeight: 400,
|
|
cssClass: ""
|
|
}
|
|
},
|
|
title: {
|
|
rotate: -90,
|
|
offsetY: 0,
|
|
offsetX: 0,
|
|
style: {
|
|
fontSize: "11px",
|
|
fontWeight: 900,
|
|
cssClass: ""
|
|
}
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
grid: {
|
|
show: false,
|
|
},
|
|
legend: {
|
|
show: true
|
|
},
|
|
};
|
|
|
|
// define default xaxis formatter for chart with datetime on xaxis.
|
|
const _setXTimeFormatter = function (chartOptions) {
|
|
chartOptions.xaxis.labels.formatter = function (value, { series, seriesIndex, dataPointIndex, w }) {
|
|
return ntopng_utility.from_utc_to_server_date_format(value);
|
|
};
|
|
};
|
|
|
|
// define default chartOptions for area chart type.
|
|
const _default_TS_COLUMN_ChartOptions = function () {
|
|
let chartOptions = ntopng_utility.clone(_default_BASE_ChartOptions);
|
|
let TS_COLUMN_ChartOptions = {
|
|
chart: {
|
|
stacked: true,
|
|
type: "bar",
|
|
zoom: {
|
|
enabled: false,
|
|
type: "x",
|
|
},
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
format: "dd MMM yyyy HH:mm"
|
|
},
|
|
y: {}
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
show: true,
|
|
datetimeUTC: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
type: "datetime",
|
|
axisBorder: {
|
|
show: true,
|
|
},
|
|
convertedCatToNumeric: false
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: false,
|
|
curve: "smooth"
|
|
},
|
|
fill: {
|
|
type: "solid"
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
startingShape: "rounded",
|
|
endingShape: "rounded",
|
|
borderRadius: 8,
|
|
}
|
|
}
|
|
};
|
|
|
|
ntopng_utility.copy_object_keys(TS_COLUMN_ChartOptions, chartOptions, true);
|
|
return chartOptions;
|
|
}();
|
|
|
|
// define default chartOptions for area chart type.
|
|
const _default_HEATMAP_ChartOptions = function () {
|
|
let chartOptions = ntopng_utility.clone(_default_BASE_ChartOptions);
|
|
let HEATMAP_ChartOptions = {
|
|
chart: {
|
|
type: "heatmap",
|
|
zoom: {
|
|
enabled: false,
|
|
type: "x",
|
|
},
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
show: true,
|
|
format: "dd MMM yyyy HH:mm"
|
|
},
|
|
y: {
|
|
formatter: (serieName) => {
|
|
if (serieName && serieName == 1) {
|
|
return "Flows Available";
|
|
}
|
|
return "No Flows"
|
|
}
|
|
}
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
show: false,
|
|
datetimeUTC: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
type: "datetime",
|
|
axisBorder: {
|
|
show: true,
|
|
},
|
|
convertedCatToNumeric: false
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: false,
|
|
curve: "smooth"
|
|
},
|
|
colors: ["#008FFB"],
|
|
fill: {
|
|
type: "solid"
|
|
}
|
|
};
|
|
|
|
ntopng_utility.copy_object_keys(HEATMAP_ChartOptions, chartOptions, true);
|
|
return chartOptions;
|
|
}();
|
|
|
|
// define default chartOptions for area chart type.
|
|
const _default_TS_STACKED_ChartOptions = function () {
|
|
let chartOptions = ntopng_utility.clone(_default_BASE_ChartOptions);
|
|
let TS_STACKED_ChartOptions = {
|
|
chart: {
|
|
stacked: true,
|
|
type: "area",
|
|
zoom: {
|
|
enabled: false,
|
|
type: "x",
|
|
},
|
|
clipMarkers: false
|
|
},
|
|
tooltip: {
|
|
// shared: true,
|
|
x: {
|
|
format: "dd MMM yyyy HH:mm:ss"
|
|
},
|
|
y: {}
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
show: true,
|
|
datetimeUTC: false,
|
|
formatter: null,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
type: "datetime",
|
|
axisBorder: {
|
|
show: true,
|
|
},
|
|
convertedCatToNumeric: false
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: false,
|
|
curve: "smooth"
|
|
},
|
|
fill: {
|
|
type: "solid"
|
|
},
|
|
plotOptions: {
|
|
area: {
|
|
stacked: true
|
|
}
|
|
}
|
|
};
|
|
ntopng_utility.copy_object_keys(TS_STACKED_ChartOptions, chartOptions, true);
|
|
return chartOptions;
|
|
}();
|
|
|
|
|
|
// define default chartOptions for area chart type.
|
|
const _default_TS_POLAR_ChartOptions = function () {
|
|
let chartOptions = ntopng_utility.clone(_default_BASE_ChartOptions);
|
|
let TS_STACKED_ChartOptions = {
|
|
chart: {
|
|
stacked: true,
|
|
type: "polarArea",
|
|
height: 400
|
|
},
|
|
yaxis: {
|
|
show: true,
|
|
labels: {
|
|
formatter: NtopUtils.bytesToSize
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
formatter: function (val, opts) {
|
|
return (val ? `${val.toFixed(1)}%` : `0%`)
|
|
},
|
|
},
|
|
legend: {
|
|
enabled: true,
|
|
position: 'bottom',
|
|
},
|
|
stroke: {
|
|
show: false,
|
|
curve: "smooth"
|
|
},
|
|
fill: {
|
|
type: "solid"
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: NtopUtils.bytesToSize
|
|
},
|
|
},
|
|
};
|
|
ntopng_utility.copy_object_keys(TS_STACKED_ChartOptions, chartOptions, true);
|
|
return chartOptions;
|
|
}();
|
|
|
|
// define default chartOptions for area chart type.
|
|
const _default_TS_DONUT_ChartOptions = function () {
|
|
let chartOptions = ntopng_utility.clone(_default_BASE_ChartOptions);
|
|
let TS_STACKED_ChartOptions = {
|
|
chart: {
|
|
stacked: true,
|
|
type: "donut",
|
|
height: 300
|
|
},
|
|
yaxis: {
|
|
show: true,
|
|
labels: {
|
|
formatter: NtopUtils.bytesToSize
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
formatter: function (val, opts) {
|
|
return (val ? `${val.toFixed(1)}%` : `0%`)
|
|
},
|
|
},
|
|
legend: {
|
|
enabled: true,
|
|
position: 'bottom',
|
|
},
|
|
stroke: {
|
|
show: false,
|
|
curve: "smooth"
|
|
},
|
|
fill: {
|
|
type: "solid"
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: FormatterUtils.getFormatter("number"),
|
|
},
|
|
},
|
|
noData: {
|
|
text: 'No Data',
|
|
style: {
|
|
color: undefined,
|
|
fontSize: '24px',
|
|
fontFamily: undefined
|
|
}
|
|
}
|
|
};
|
|
ntopng_utility.copy_object_keys(TS_STACKED_ChartOptions, chartOptions, true);
|
|
return chartOptions;
|
|
}();
|
|
|
|
// define default chartOptions for area chart type.
|
|
const _default_TS_RADIALBAR_ChartOptions = function () {
|
|
let chartOptions = ntopng_utility.clone(_default_BASE_ChartOptions);
|
|
let TS_STACKED_ChartOptions = {
|
|
chart: {
|
|
stacked: true,
|
|
type: "radialBar",
|
|
height: 300
|
|
},
|
|
yaxis: {
|
|
show: true,
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
formatter: function (val, opts) {
|
|
return val
|
|
},
|
|
},
|
|
stroke: {
|
|
show: false,
|
|
curve: "smooth"
|
|
},
|
|
fill: {
|
|
type: "solid"
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: NtopUtils.bytesToSize
|
|
},
|
|
},
|
|
noData: {
|
|
text: 'No Data',
|
|
style: {
|
|
color: undefined,
|
|
fontSize: '24px',
|
|
fontFamily: undefined
|
|
}
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
offsetY: 0,
|
|
startAngle: 0,
|
|
endAngle: 270,
|
|
hollow: {
|
|
margin: 5,
|
|
size: '30%',
|
|
background: 'transparent',
|
|
image: undefined,
|
|
},
|
|
dataLabels: {
|
|
name: {
|
|
show: false,
|
|
},
|
|
value: {
|
|
show: false,
|
|
}
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
show: true,
|
|
floating: true,
|
|
fontSize: '16px',
|
|
position: 'left',
|
|
offsetX: 160,
|
|
offsetY: 15,
|
|
labels: {
|
|
useSeriesColors: true,
|
|
},
|
|
markers: {
|
|
size: 0
|
|
},
|
|
formatter: function (seriesName, opts) {
|
|
return seriesName + ": " + opts.w.globals.series[opts.seriesIndex]
|
|
},
|
|
itemMargin: {
|
|
vertical: 3
|
|
}
|
|
},
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
legend: {
|
|
show: false
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
ntopng_utility.copy_object_keys(TS_STACKED_ChartOptions, chartOptions, true);
|
|
return chartOptions;
|
|
}();
|
|
|
|
// define default chartOptions for area chart type.
|
|
const _default_TS_PIE_ChartOptions = function () {
|
|
let chartOptions = ntopng_utility.clone(_default_BASE_ChartOptions);
|
|
let TS_STACKED_ChartOptions = {
|
|
chart: {
|
|
stacked: true,
|
|
type: "pie",
|
|
height: 400
|
|
},
|
|
yaxis: {
|
|
show: true,
|
|
labels: {
|
|
formatter: NtopUtils.bytesToSize
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
formatter: function (val, opts) {
|
|
return (val ? `${val.toFixed(1)}%` : `0%`)
|
|
},
|
|
},
|
|
legend: {
|
|
enabled: true,
|
|
position: 'bottom',
|
|
},
|
|
stroke: {
|
|
show: false,
|
|
curve: "smooth"
|
|
},
|
|
fill: {
|
|
type: "solid"
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: NtopUtils.bytesToSize
|
|
},
|
|
},
|
|
};
|
|
ntopng_utility.copy_object_keys(TS_STACKED_ChartOptions, chartOptions, true);
|
|
return chartOptions;
|
|
}();
|
|
|
|
|
|
// define default chartOptions for area chart type.
|
|
const _default_TS_BAR_ChartOptions = function () {
|
|
let chartOptions = ntopng_utility.clone(_default_BASE_ChartOptions);
|
|
let TS_BAR_ChartOptions = {
|
|
chart: {
|
|
type: "bar",
|
|
height: 300
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ['transparent']
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: true, // Mostra i valori sull'asse Y
|
|
},
|
|
},
|
|
grid: {
|
|
show: true, // Abilita la griglia
|
|
yaxis: {
|
|
lines: {
|
|
show: true, // Mostra le linee della griglia su Y
|
|
}
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: true,
|
|
columnWidth: '55%',
|
|
borderRadius: 5,
|
|
borderRadiusApplication: 'end'
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
title: {
|
|
formatter: () => ''
|
|
},
|
|
formatter: NtopUtils.formatValue
|
|
},
|
|
},
|
|
};
|
|
ntopng_utility.copy_object_keys(TS_BAR_ChartOptions, chartOptions, true);
|
|
return chartOptions;
|
|
}();
|
|
|
|
// define default chartOptions for line chart type.
|
|
const _default_TS_LINE_ChartOptions = function () {
|
|
let chartOptions = ntopng_utility.clone(_default_BASE_ChartOptions);
|
|
let TS_LINE_ChartOptions = {
|
|
chart: {
|
|
type: "line",
|
|
zoom: {
|
|
enabled: false,
|
|
type: "x",
|
|
},
|
|
},
|
|
tooltip: {
|
|
shared: true,
|
|
x: {
|
|
format: "dd MMM yyyy HH:mm:ss"
|
|
},
|
|
y: {}
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
show: false,
|
|
datetimeUTC: false,
|
|
formatter: null,
|
|
},
|
|
axisTicks: {
|
|
show: true
|
|
},
|
|
type: "datetime",
|
|
axisBorder: {
|
|
show: true
|
|
},
|
|
convertedCatToNumeric: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
curve: "smooth"
|
|
},
|
|
grid: {
|
|
show: true,
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
};
|
|
ntopng_utility.copy_object_keys(TS_LINE_ChartOptions, chartOptions, true);
|
|
return chartOptions;
|
|
}();
|
|
|
|
const format_label_from_xname = function ({ series, seriesIndex, dataPointIndex, w }) {
|
|
const serie = w.config.series[seriesIndex]["data"][dataPointIndex];
|
|
const name = serie["name"]
|
|
const y_value = serie["y"];
|
|
const host_name = serie["meta"]["label"];
|
|
|
|
const x_axis_title = w.config.xaxis.title.text;
|
|
const y_axis_title = w.config.yaxis[0].title.text;
|
|
|
|
return (`
|
|
<div class='apexcharts-theme-light apexcharts-active' id='test'>
|
|
<div class='apexcharts-tooltip-title' style='font-family: Helvetica, Arial, sans-serif; font-size: 12px;'>
|
|
${host_name}
|
|
</div>
|
|
<div class='apexcharts-tooltip-series-group apexcharts-active d-block'>
|
|
<div class='apexcharts-tooltip-text text-left'>
|
|
<b>${x_axis_title}</b>: ${name}
|
|
</div>
|
|
<div class='apexcharts-tooltip-text text-left'>
|
|
<b>${y_axis_title}</b>: ${y_value}
|
|
</div>
|
|
</div>
|
|
</div>`)
|
|
};
|
|
|
|
// define default chartOptions for line chart type.
|
|
const _default_TS_BUBBLE_ChartOptions = function () {
|
|
let chartOptions = ntopng_utility.clone(_default_BASE_ChartOptions);
|
|
let TS_BUBBLE_ChartOptions = {
|
|
chart: {
|
|
width: '100%',
|
|
height: '100%',
|
|
stacked: true,
|
|
type: "bubble",
|
|
zoom: {
|
|
autoScaleYaxis: true
|
|
},
|
|
},
|
|
legend: {
|
|
enabled: true,
|
|
position: 'bottom',
|
|
},
|
|
stroke: {
|
|
show: false,
|
|
curve: "smooth"
|
|
},
|
|
fill: {
|
|
type: "solid"
|
|
},
|
|
events: {
|
|
dataPointSelection: "standard",
|
|
},
|
|
grid: {
|
|
padding: {
|
|
left: 6
|
|
},
|
|
},
|
|
xaxis: {
|
|
type: 'numeric',
|
|
labels: {}
|
|
},
|
|
yaxis: {
|
|
type: 'numeric',
|
|
forceNiceScale: true,
|
|
labels: {}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
tooltip: {
|
|
custom: format_label_from_xname,
|
|
}
|
|
};
|
|
ntopng_utility.copy_object_keys(TS_BUBBLE_ChartOptions, chartOptions, true);
|
|
return chartOptions;
|
|
}();
|
|
|
|
return {
|
|
typeChart: {
|
|
TS_LINE: "TS_LINE",
|
|
TS_STACKED: "TS_STACKED",
|
|
TS_COLUMN: "TS_COLUMN",
|
|
PIE: "PIE",
|
|
DONUT: "DONUT",
|
|
RADIALBAR: "RADIALBAR",
|
|
HEATMAP: "HEATMAP",
|
|
RADAR: "RADAR",
|
|
BUBBLE: "BUBBLE",
|
|
BASE: "BASE",
|
|
BAR: "BAR"
|
|
},
|
|
newChart: function (type) {
|
|
let _chartOptions = {};
|
|
let _chart;
|
|
let _chartHtmlElement;
|
|
|
|
if (type == this.typeChart.TS_STACKED) {
|
|
_chartOptions = ntopng_utility.clone(_default_TS_STACKED_ChartOptions);
|
|
_setXTimeFormatter(_chartOptions);
|
|
} else if (type == this.typeChart.TS_LINE) {
|
|
_chartOptions = ntopng_utility.clone(_default_TS_LINE_ChartOptions);
|
|
_setXTimeFormatter(_chartOptions);
|
|
} else if (type == this.typeChart.TS_COLUMN) {
|
|
_chartOptions = ntopng_utility.clone(_default_TS_COLUMN_ChartOptions);
|
|
_setXTimeFormatter(_chartOptions);
|
|
} else if (type == this.typeChart.HEATMAP) {
|
|
_chartOptions = ntopng_utility.clone(_default_HEATMAP_ChartOptions);
|
|
_setXTimeFormatter(_chartOptions);
|
|
} else if (type == this.typeChart.PIE) {
|
|
_chartOptions = ntopng_utility.clone(_default_TS_PIE_ChartOptions);
|
|
} else if (type == this.typeChart.DONUT) {
|
|
_chartOptions = ntopng_utility.clone(_default_TS_DONUT_ChartOptions);
|
|
} else if (type == this.typeChart.RADIALBAR) {
|
|
_chartOptions = ntopng_utility.clone(_default_TS_RADIALBAR_ChartOptions);
|
|
} else if (type == this.typeChart.BAR) {
|
|
_chartOptions = ntopng_utility.clone(_default_TS_BAR_ChartOptions);
|
|
} else if (type == this.typeChart.POLAR) {
|
|
_chartOptions = ntopng_utility.clone(_default_TS_POLAR_ChartOptions);
|
|
} else if (type == this.typeChart.BUBBLE) {
|
|
_chartOptions = ntopng_utility.clone(_default_TS_BUBBLE_ChartOptions);
|
|
} else if (type == this.typeChart.BASE) {
|
|
_chartOptions = ntopng_utility.clone(_default_BASE_ChartOptions);
|
|
} else {
|
|
throw `ntopChartApex::newChart: chart type = ${type} unsupported`;
|
|
}
|
|
const setYaxisFormatter = (chartOptions) => {
|
|
if (typeof (chartOptions?.yaxis?.labels?.formatter) == "string") {
|
|
const formatter = chartOptions.yaxis.labels.formatter;
|
|
let chartFormatter = FormatterUtils.getFormatter(formatter);
|
|
if (chartFormatter != null) {
|
|
chartOptions.yaxis.labels.formatter = chartFormatter;
|
|
} else {
|
|
if (formatter == "formatValue") {
|
|
chartOptions.yaxis.labels.formatter = FormatterUtils.getFormatter("number");
|
|
}
|
|
else if (formatter == "bytesToSize") {
|
|
chartOptions.yaxis.labels.formatter = FormatterUtils.getFormatter("bytes");
|
|
}
|
|
}
|
|
}
|
|
};
|
|
return {
|
|
drawChart: function (htmlElement, chartOptions) {
|
|
// add/replace chartOptions fields in _chartOptions
|
|
setYaxisFormatter(chartOptions);
|
|
ntopng_utility.copy_object_keys(chartOptions, _chartOptions, true);
|
|
_chart = new ApexCharts(htmlElement, _chartOptions);
|
|
_chartHtmlElement = htmlElement;
|
|
_chart.render();
|
|
},
|
|
to_data_uri: async function (options) {
|
|
if (_chart == null) { return; }
|
|
let res = await _chart.dataURI(options);
|
|
return res.imgURI;
|
|
},
|
|
destroyChart: function () {
|
|
if (_chart == null) { return; }
|
|
_chart.destroy();
|
|
},
|
|
updateChart: function (chartOptions) {
|
|
if (_chart == null) { return; }
|
|
setYaxisFormatter(chartOptions);
|
|
_chart.updateOptions(chartOptions, false, false, false);
|
|
},
|
|
updateSeries: function (series) {
|
|
if (_chart == null) { return; }
|
|
_chart.updateSeries(series);
|
|
},
|
|
registerEvent: function (eventName, callback, updateChart = false) {
|
|
_chartOptions.chart.events[eventName] = callback;
|
|
if (updateChart == true) {
|
|
_chart.updateOptions(_chartOptions);
|
|
}
|
|
},
|
|
};
|
|
},
|
|
};
|
|
}();
|
|
|
|
export { ntopChartApex };
|