Browse Source

UI: API usage dashboard add tick format function

pull/10326/head
Vladyslav_Prykhodko 3 years ago
parent
commit
5715a21fd1
  1. 138
      ui-ngx/src/assets/dashboard/api_usage.json

138
ui-ngx/src/assets/dashboard/api_usage.json

@ -1405,6 +1405,7 @@
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)", "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"min": null, "min": null,
"max": null "max": null
}, },
@ -1430,7 +1431,7 @@
"weight": "400", "weight": "400",
"lineHeight": "1" "lineHeight": "1"
}, },
"tickLabelColor": "rgba(0, 0, 0, 0.54)", "tickLabelColor": null,
"showTicks": true, "showTicks": true,
"ticksColor": "rgba(0, 0, 0, 0.54)", "ticksColor": "rgba(0, 0, 0, 0.54)",
"showLine": true, "showLine": true,
@ -1443,7 +1444,7 @@
"groupWidth": { "groupWidth": {
"relative": false, "relative": false,
"relativeWidth": 2, "relativeWidth": 2,
"absoluteWidth": 2400000 "absoluteWidth": 3600000
}, },
"barWidth": { "barWidth": {
"relative": true, "relative": true,
@ -1724,6 +1725,7 @@
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)", "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"min": null, "min": null,
"max": null "max": null
}, },
@ -1762,7 +1764,7 @@
"groupWidth": { "groupWidth": {
"relative": false, "relative": false,
"relativeWidth": 2, "relativeWidth": 2,
"absoluteWidth": 2400000 "absoluteWidth": 3600000
}, },
"barWidth": { "barWidth": {
"relative": true, "relative": true,
@ -2125,6 +2127,7 @@
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)", "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"min": null, "min": null,
"max": null "max": null
}, },
@ -2163,7 +2166,7 @@
"groupWidth": { "groupWidth": {
"relative": false, "relative": false,
"relativeWidth": 2, "relativeWidth": 2,
"absoluteWidth": 2400000 "absoluteWidth": 3600000
}, },
"barWidth": { "barWidth": {
"relative": true, "relative": true,
@ -2448,6 +2451,7 @@
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)", "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"min": null, "min": null,
"max": null "max": null
}, },
@ -2486,7 +2490,7 @@
"groupWidth": { "groupWidth": {
"relative": false, "relative": false,
"relativeWidth": 2, "relativeWidth": 2,
"absoluteWidth": 2400000 "absoluteWidth": 3600000
}, },
"barWidth": { "barWidth": {
"relative": true, "relative": true,
@ -2767,6 +2771,7 @@
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)", "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"min": null, "min": null,
"max": null "max": null
}, },
@ -2805,7 +2810,7 @@
"groupWidth": { "groupWidth": {
"relative": false, "relative": false,
"relativeWidth": 2, "relativeWidth": 2,
"absoluteWidth": 2400000 "absoluteWidth": 3600000
}, },
"barWidth": { "barWidth": {
"relative": true, "relative": true,
@ -3163,6 +3168,7 @@
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)", "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"min": null, "min": null,
"max": null "max": null
}, },
@ -3201,7 +3207,7 @@
"groupWidth": { "groupWidth": {
"relative": false, "relative": false,
"relativeWidth": 2, "relativeWidth": 2,
"absoluteWidth": 2400000 "absoluteWidth": 3600000
}, },
"barWidth": { "barWidth": {
"relative": true, "relative": true,
@ -3485,7 +3491,10 @@
"showLine": true, "showLine": true,
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)" "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"min": null,
"max": null
}, },
"xAxis": { "xAxis": {
"show": true, "show": true,
@ -3790,12 +3799,15 @@
"lineHeight": "1" "lineHeight": "1"
}, },
"tickLabelColor": "rgba(0, 0, 0, 0.54)", "tickLabelColor": "rgba(0, 0, 0, 0.54)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"showTicks": true, "showTicks": true,
"ticksColor": "rgba(0, 0, 0, 0.54)", "ticksColor": "rgba(0, 0, 0, 0.54)",
"showLine": true, "showLine": true,
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)" "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"min": null,
"max": null
}, },
"xAxis": { "xAxis": {
"show": true, "show": true,
@ -3830,9 +3842,9 @@
"noAggregationBarWidthSettings": { "noAggregationBarWidthSettings": {
"strategy": "group", "strategy": "group",
"groupWidth": { "groupWidth": {
"relative": false, "relative": true,
"relativeWidth": 2, "relativeWidth": 6,
"absoluteWidth": 1800000 "absoluteWidth": 900000000
}, },
"barWidth": { "barWidth": {
"relative": true, "relative": true,
@ -4062,7 +4074,10 @@
"showLine": true, "showLine": true,
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)" "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"min": null,
"max": null
}, },
"xAxis": { "xAxis": {
"show": true, "show": true,
@ -4315,12 +4330,15 @@
"lineHeight": "1" "lineHeight": "1"
}, },
"tickLabelColor": "rgba(0, 0, 0, 0.54)", "tickLabelColor": "rgba(0, 0, 0, 0.54)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"showTicks": true, "showTicks": true,
"ticksColor": "rgba(0, 0, 0, 0.54)", "ticksColor": "rgba(0, 0, 0, 0.54)",
"showLine": true, "showLine": true,
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)" "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"min": null,
"max": null
}, },
"xAxis": { "xAxis": {
"show": true, "show": true,
@ -4355,8 +4373,8 @@
"noAggregationBarWidthSettings": { "noAggregationBarWidthSettings": {
"strategy": "group", "strategy": "group",
"groupWidth": { "groupWidth": {
"relative": false, "relative": true,
"relativeWidth": 2, "relativeWidth": 6,
"absoluteWidth": 900000000 "absoluteWidth": 900000000
}, },
"barWidth": { "barWidth": {
@ -4594,7 +4612,10 @@
"showLine": true, "showLine": true,
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)" "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"min": null,
"max": null
}, },
"xAxis": { "xAxis": {
"show": true, "show": true,
@ -4863,12 +4884,15 @@
"lineHeight": "1" "lineHeight": "1"
}, },
"tickLabelColor": "rgba(0, 0, 0, 0.54)", "tickLabelColor": "rgba(0, 0, 0, 0.54)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"showTicks": true, "showTicks": true,
"ticksColor": "rgba(0, 0, 0, 0.54)", "ticksColor": "rgba(0, 0, 0, 0.54)",
"showLine": true, "showLine": true,
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)" "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"min": null,
"max": null
}, },
"xAxis": { "xAxis": {
"show": true, "show": true,
@ -4903,14 +4927,14 @@
"noAggregationBarWidthSettings": { "noAggregationBarWidthSettings": {
"strategy": "group", "strategy": "group",
"groupWidth": { "groupWidth": {
"relative": false, "relative": true,
"relativeWidth": 2, "relativeWidth": 6,
"absoluteWidth": 900000000 "absoluteWidth": 900000000
}, },
"barWidth": { "barWidth": {
"relative": true, "relative": false,
"relativeWidth": 2, "relativeWidth": 2,
"absoluteWidth": 1000 "absoluteWidth": 900000000
} }
}, },
"showLegend": true, "showLegend": true,
@ -5126,7 +5150,10 @@
"showLine": true, "showLine": true,
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)" "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"min": null,
"max": null
}, },
"xAxis": { "xAxis": {
"show": true, "show": true,
@ -5379,12 +5406,15 @@
"lineHeight": "1" "lineHeight": "1"
}, },
"tickLabelColor": "rgba(0, 0, 0, 0.54)", "tickLabelColor": "rgba(0, 0, 0, 0.54)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"showTicks": true, "showTicks": true,
"ticksColor": "rgba(0, 0, 0, 0.54)", "ticksColor": "rgba(0, 0, 0, 0.54)",
"showLine": true, "showLine": true,
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)" "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"min": null,
"max": null
}, },
"xAxis": { "xAxis": {
"show": true, "show": true,
@ -5419,8 +5449,8 @@
"noAggregationBarWidthSettings": { "noAggregationBarWidthSettings": {
"strategy": "group", "strategy": "group",
"groupWidth": { "groupWidth": {
"relative": false, "relative": true,
"relativeWidth": 2, "relativeWidth": 6,
"absoluteWidth": 900000000 "absoluteWidth": 900000000
}, },
"barWidth": { "barWidth": {
@ -5642,7 +5672,10 @@
"showLine": true, "showLine": true,
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)" "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"min": null,
"max": null
}, },
"xAxis": { "xAxis": {
"show": true, "show": true,
@ -5895,12 +5928,15 @@
"lineHeight": "1" "lineHeight": "1"
}, },
"tickLabelColor": "rgba(0, 0, 0, 0.54)", "tickLabelColor": "rgba(0, 0, 0, 0.54)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"showTicks": true, "showTicks": true,
"ticksColor": "rgba(0, 0, 0, 0.54)", "ticksColor": "rgba(0, 0, 0, 0.54)",
"showLine": true, "showLine": true,
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)" "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"min": null,
"max": null
}, },
"xAxis": { "xAxis": {
"show": true, "show": true,
@ -5935,8 +5971,8 @@
"noAggregationBarWidthSettings": { "noAggregationBarWidthSettings": {
"strategy": "group", "strategy": "group",
"groupWidth": { "groupWidth": {
"relative": false, "relative": true,
"relativeWidth": 2, "relativeWidth": 6,
"absoluteWidth": 900000000 "absoluteWidth": 900000000
}, },
"barWidth": { "barWidth": {
@ -6158,7 +6194,10 @@
"showLine": true, "showLine": true,
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)" "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"min": null,
"max": null
}, },
"xAxis": { "xAxis": {
"show": true, "show": true,
@ -6416,7 +6455,10 @@
"showLine": true, "showLine": true,
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)" "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"min": null,
"max": null
}, },
"xAxis": { "xAxis": {
"show": true, "show": true,
@ -6669,12 +6711,15 @@
"lineHeight": "1" "lineHeight": "1"
}, },
"tickLabelColor": "rgba(0, 0, 0, 0.54)", "tickLabelColor": "rgba(0, 0, 0, 0.54)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"showTicks": true, "showTicks": true,
"ticksColor": "rgba(0, 0, 0, 0.54)", "ticksColor": "rgba(0, 0, 0, 0.54)",
"showLine": true, "showLine": true,
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)" "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"min": null,
"max": null
}, },
"xAxis": { "xAxis": {
"show": true, "show": true,
@ -6709,8 +6754,8 @@
"noAggregationBarWidthSettings": { "noAggregationBarWidthSettings": {
"strategy": "group", "strategy": "group",
"groupWidth": { "groupWidth": {
"relative": false, "relative": true,
"relativeWidth": 2, "relativeWidth": 6,
"absoluteWidth": 900000000 "absoluteWidth": 900000000
}, },
"barWidth": { "barWidth": {
@ -6927,12 +6972,15 @@
"lineHeight": "1" "lineHeight": "1"
}, },
"tickLabelColor": "rgba(0, 0, 0, 0.54)", "tickLabelColor": "rgba(0, 0, 0, 0.54)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"showTicks": true, "showTicks": true,
"ticksColor": "rgba(0, 0, 0, 0.54)", "ticksColor": "rgba(0, 0, 0, 0.54)",
"showLine": true, "showLine": true,
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)" "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"min": null,
"max": null
}, },
"xAxis": { "xAxis": {
"show": true, "show": true,
@ -6967,8 +7015,8 @@
"noAggregationBarWidthSettings": { "noAggregationBarWidthSettings": {
"strategy": "group", "strategy": "group",
"groupWidth": { "groupWidth": {
"relative": false, "relative": true,
"relativeWidth": 2, "relativeWidth": 6,
"absoluteWidth": 900000000 "absoluteWidth": 900000000
}, },
"barWidth": { "barWidth": {
@ -7252,7 +7300,10 @@
"showLine": true, "showLine": true,
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)" "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"min": null,
"max": null
}, },
"xAxis": { "xAxis": {
"show": true, "show": true,
@ -7308,6 +7359,7 @@
}, },
"legendLabelColor": "rgba(0, 0, 0, 0.76)", "legendLabelColor": "rgba(0, 0, 0, 0.76)",
"legendConfig": { "legendConfig": {
"direction": "column",
"position": "bottom", "position": "bottom",
"sortDataKeys": false, "sortDataKeys": false,
"showMin": true, "showMin": true,
@ -7535,7 +7587,10 @@
"showLine": true, "showLine": true,
"lineColor": "rgba(0, 0, 0, 0.54)", "lineColor": "rgba(0, 0, 0, 0.54)",
"showSplitLines": true, "showSplitLines": true,
"splitLinesColor": "rgba(0, 0, 0, 0.12)" "splitLinesColor": "rgba(0, 0, 0, 0.12)",
"ticksFormatter": "const rounder = Math.pow(10, 1);\nconst powers = [\n {key: 'Q', value: Math.pow(10, 15)},\n {key: 'T', value: Math.pow(10, 12)},\n {key: 'B', value: Math.pow(10, 9)},\n {key: 'M', value: Math.pow(10, 6)},\n {key: 'K', value: 1000}\n];\n\nlet formattedValue = value;\nlet key = '';\nfor (let power of powers) {\n let reduced = value / power.value;\n reduced = Math.round(reduced * rounder) / rounder;\n if (reduced >= 1) {\n formattedValue = reduced;\n key = power.key;\n break;\n }\n}\nreturn formattedValue + key;",
"min": null,
"max": null
}, },
"xAxis": { "xAxis": {
"show": true, "show": true,
@ -7591,6 +7646,7 @@
}, },
"legendLabelColor": "rgba(0, 0, 0, 0.76)", "legendLabelColor": "rgba(0, 0, 0, 0.76)",
"legendConfig": { "legendConfig": {
"direction": "column",
"position": "bottom", "position": "bottom",
"sortDataKeys": false, "sortDataKeys": false,
"showMin": true, "showMin": true,
@ -8099,7 +8155,7 @@
"dashboardLogoUrl": null, "dashboardLogoUrl": null,
"hideToolbar": false, "hideToolbar": false,
"showUpdateDashboardImage": false, "showUpdateDashboardImage": false,
"dashboardCss": ".tb-time-series-chart-panel {\n padding: 13px;\n}\n\n.tb-time-series-chart-content {\n gap: 0; \n}\n\n.tb-time-series-chart-panel {\n gap: 8px; \n}\n\n.card .bars-row {\n flex: 1;\n display: flex;\n flex-direction: row;\n}\n\n.card .bar-column {\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n\n\n.card {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n}\n\n.card > img {\n height: 0;\n}\n\n.card .content {\n flex: 1; \n padding: 13px 13px 0;\n display: flex;\n box-sizing: border-box;\n}\n\n.card .content .column {\n display: flex;\n flex-direction: column; \n justify-content: space-around;\n flex: 1;\n}\n\n.card .content .title-row {\n display: flex;\n flex-direction: row;\n padding-bottom: 10px;\n}\n\n.card .title {\n flex: 1;\n font-size: 20px;\n font-weight: 400;\n color: #666666;\n}\n\n.card .state {\n text-transform: uppercase;\n font-size: 20px;\n font-weight: bold;\n}\n\n.card.enabled .state {\n color: #00B260;\n}\n\n.card.warning .state {\n color: #FFAD6F;\n}\n\n.card.disabled .state {\n color: #F73243;\n}\n\n.card .bar-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.card .bar {\n flex: 1;\n max-height: 30px;\n margin-top: 3.5px;\n margin-bottom: 4px;\n background-color: #F0F0F0;\n border: 1px solid #DADCDB;\n border-radius: 2px;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n border-color: #00B260;\n background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n border-color: #FFAD6F;\n background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n border-color: #F73243;\n background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n background-color: #F0F0F0;\n border-radius: 2px;\n height: 100%;\n width: 0%;\n}\n\n.card.enabled .bar-fill {\n background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n background-color: #FF9494;\n}\n\n.card .bar-labels {\n height: 20px;\n font-size: 16px;\n color: #666;\n display: flex;\n flex-direction: row;\n}\n\n\n.card .mat-mdc-button-base {\n text-transform: uppercase;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.card .mdc-button__label {\n pointer-events: none;\n}\n\n.action-row {\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n padding: 8px 0;\n}\n\n.card .unit {\n color: #666666;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n .card .title {\n font-size: 12px;\n }\n .card .state {\n font-size: 12px;\n }\n .card .unit {\n font-size: 8px;\n }\n .card .bar-labels {\n font-size: 8px;\n }\n .card .mat-mdc-button-base {\n font-size: 8px;\n }\n .card .action-row {\n padding: 0;\n }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n .card .title {\n font-size: 14px;\n }\n .card .state {\n font-size: 14px;\n }\n .card .unit {\n font-size: 10px;\n }\n .card .bar-labels {\n font-size: 10px;\n }\n .card .mat-mdc-button-base {\n font-size: 10px;\n }\n .card .action-row {\n padding: 0;\n }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n .card .title {\n font-size: 16px;\n }\n .card .state {\n font-size: 16px;\n }\n .card .unit {\n font-size: 12px;\n }\n .card .bar-labels {\n font-size: 12px;\n }\n .card .mat-mdc-button-base {\n font-size: 12px;\n }\n .card .action-row {\n padding: 0;\n }\n} " "dashboardCss": ".tb-time-series-chart-panel {\n padding: 13px;\n}\n\n.tb-time-series-chart-content {\n gap: 0; \n}\n\n.card .bars-row {\n flex: 1;\n display: flex;\n flex-direction: row;\n}\n\n.card .bar-column {\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n\n\n.card {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n}\n\n.card > img {\n height: 0;\n}\n\n.card .content {\n flex: 1; \n padding: 13px 13px 0;\n display: flex;\n box-sizing: border-box;\n}\n\n.card .content .column {\n display: flex;\n flex-direction: column; \n justify-content: space-around;\n flex: 1;\n}\n\n.card .content .title-row {\n display: flex;\n flex-direction: row;\n padding-bottom: 10px;\n}\n\n.card .title {\n flex: 1;\n font-size: 20px;\n font-weight: 400;\n color: #666666;\n}\n\n.card .state {\n text-transform: uppercase;\n font-size: 20px;\n font-weight: bold;\n}\n\n.card.enabled .state {\n color: #00B260;\n}\n\n.card.warning .state {\n color: #FFAD6F;\n}\n\n.card.disabled .state {\n color: #F73243;\n}\n\n.card .bar-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.card .bar {\n flex: 1;\n max-height: 30px;\n margin-top: 3.5px;\n margin-bottom: 4px;\n background-color: #F0F0F0;\n border: 1px solid #DADCDB;\n border-radius: 2px;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);\n}\n\n.card.enabled .bar {\n border-color: #00B260;\n background-color: #F0FBF7;\n}\n\n.card.warning .bar {\n border-color: #FFAD6F;\n background-color: #FFFAF6;\n}\n\n.card.disabled .bar {\n border-color: #F73243;\n background-color: #FFF0F0;\n}\n\n.card .bar .bar-fill {\n background-color: #F0F0F0;\n border-radius: 2px;\n height: 100%;\n width: 0%;\n}\n\n.card.enabled .bar-fill {\n background-color: #00C46C;\n}\n\n.card.warning .bar-fill {\n background-color: #FFD099;\n}\n\n.card.disabled .bar-fill {\n background-color: #FF9494;\n}\n\n.card .bar-labels {\n height: 20px;\n font-size: 16px;\n color: #666;\n display: flex;\n flex-direction: row;\n}\n\n\n.card .mat-mdc-button-base {\n text-transform: uppercase;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.card .mdc-button__label {\n pointer-events: none;\n}\n\n.action-row {\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n padding: 8px 0;\n}\n\n.card .unit {\n color: #666666;\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n .card .title {\n font-size: 12px;\n }\n .card .state {\n font-size: 12px;\n }\n .card .unit {\n font-size: 8px;\n }\n .card .bar-labels {\n font-size: 8px;\n }\n .card .mat-mdc-button-base {\n font-size: 8px;\n }\n .card .action-row {\n padding: 0;\n }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1599px) {\n .card .title {\n font-size: 14px;\n }\n .card .state {\n font-size: 14px;\n }\n .card .unit {\n font-size: 10px;\n }\n .card .bar-labels {\n font-size: 10px;\n }\n .card .mat-mdc-button-base {\n font-size: 10px;\n }\n .card .action-row {\n padding: 0;\n }\n}\n\n@media screen and (min-width: 1600px) and (max-width: 1919px) {\n .card .title {\n font-size: 16px;\n }\n .card .state {\n font-size: 16px;\n }\n .card .unit {\n font-size: 12px;\n }\n .card .bar-labels {\n font-size: 12px;\n }\n .card .mat-mdc-button-base {\n font-size: 12px;\n }\n .card .action-row {\n padding: 0;\n }\n} "
} }
}, },
"name": "Api Usage" "name": "Api Usage"

Loading…
Cancel
Save