diff --git a/ui-ngx/src/assets/dashboard/api_usage.json b/ui-ngx/src/assets/dashboard/api_usage.json index d5ed8d5304..7d9eefd18d 100644 --- a/ui-ngx/src/assets/dashboard/api_usage.json +++ b/ui-ngx/src/assets/dashboard/api_usage.json @@ -1405,6 +1405,7 @@ "lineColor": "rgba(0, 0, 0, 0.54)", "showSplitLines": true, "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 }, @@ -1430,7 +1431,7 @@ "weight": "400", "lineHeight": "1" }, - "tickLabelColor": "rgba(0, 0, 0, 0.54)", + "tickLabelColor": null, "showTicks": true, "ticksColor": "rgba(0, 0, 0, 0.54)", "showLine": true, @@ -1443,7 +1444,7 @@ "groupWidth": { "relative": false, "relativeWidth": 2, - "absoluteWidth": 2400000 + "absoluteWidth": 3600000 }, "barWidth": { "relative": true, @@ -1724,6 +1725,7 @@ "lineColor": "rgba(0, 0, 0, 0.54)", "showSplitLines": true, "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 }, @@ -1762,7 +1764,7 @@ "groupWidth": { "relative": false, "relativeWidth": 2, - "absoluteWidth": 2400000 + "absoluteWidth": 3600000 }, "barWidth": { "relative": true, @@ -2125,6 +2127,7 @@ "lineColor": "rgba(0, 0, 0, 0.54)", "showSplitLines": true, "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 }, @@ -2163,7 +2166,7 @@ "groupWidth": { "relative": false, "relativeWidth": 2, - "absoluteWidth": 2400000 + "absoluteWidth": 3600000 }, "barWidth": { "relative": true, @@ -2448,6 +2451,7 @@ "lineColor": "rgba(0, 0, 0, 0.54)", "showSplitLines": true, "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 }, @@ -2486,7 +2490,7 @@ "groupWidth": { "relative": false, "relativeWidth": 2, - "absoluteWidth": 2400000 + "absoluteWidth": 3600000 }, "barWidth": { "relative": true, @@ -2767,6 +2771,7 @@ "lineColor": "rgba(0, 0, 0, 0.54)", "showSplitLines": true, "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 }, @@ -2805,7 +2810,7 @@ "groupWidth": { "relative": false, "relativeWidth": 2, - "absoluteWidth": 2400000 + "absoluteWidth": 3600000 }, "barWidth": { "relative": true, @@ -3163,6 +3168,7 @@ "lineColor": "rgba(0, 0, 0, 0.54)", "showSplitLines": true, "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 }, @@ -3201,7 +3207,7 @@ "groupWidth": { "relative": false, "relativeWidth": 2, - "absoluteWidth": 2400000 + "absoluteWidth": 3600000 }, "barWidth": { "relative": true, @@ -3485,7 +3491,10 @@ "showLine": true, "lineColor": "rgba(0, 0, 0, 0.54)", "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": { "show": true, @@ -3790,12 +3799,15 @@ "lineHeight": "1" }, "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, "ticksColor": "rgba(0, 0, 0, 0.54)", "showLine": true, "lineColor": "rgba(0, 0, 0, 0.54)", "showSplitLines": true, - "splitLinesColor": "rgba(0, 0, 0, 0.12)" + "splitLinesColor": "rgba(0, 0, 0, 0.12)", + "min": null, + "max": null }, "xAxis": { "show": true, @@ -3830,9 +3842,9 @@ "noAggregationBarWidthSettings": { "strategy": "group", "groupWidth": { - "relative": false, - "relativeWidth": 2, - "absoluteWidth": 1800000 + "relative": true, + "relativeWidth": 6, + "absoluteWidth": 900000000 }, "barWidth": { "relative": true, @@ -4062,7 +4074,10 @@ "showLine": true, "lineColor": "rgba(0, 0, 0, 0.54)", "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": { "show": true, @@ -4315,12 +4330,15 @@ "lineHeight": "1" }, "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, "ticksColor": "rgba(0, 0, 0, 0.54)", "showLine": true, "lineColor": "rgba(0, 0, 0, 0.54)", "showSplitLines": true, - "splitLinesColor": "rgba(0, 0, 0, 0.12)" + "splitLinesColor": "rgba(0, 0, 0, 0.12)", + "min": null, + "max": null }, "xAxis": { "show": true, @@ -4355,8 +4373,8 @@ "noAggregationBarWidthSettings": { "strategy": "group", "groupWidth": { - "relative": false, - "relativeWidth": 2, + "relative": true, + "relativeWidth": 6, "absoluteWidth": 900000000 }, "barWidth": { @@ -4594,7 +4612,10 @@ "showLine": true, "lineColor": "rgba(0, 0, 0, 0.54)", "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": { "show": true, @@ -4863,12 +4884,15 @@ "lineHeight": "1" }, "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, "ticksColor": "rgba(0, 0, 0, 0.54)", "showLine": true, "lineColor": "rgba(0, 0, 0, 0.54)", "showSplitLines": true, - "splitLinesColor": "rgba(0, 0, 0, 0.12)" + "splitLinesColor": "rgba(0, 0, 0, 0.12)", + "min": null, + "max": null }, "xAxis": { "show": true, @@ -4903,14 +4927,14 @@ "noAggregationBarWidthSettings": { "strategy": "group", "groupWidth": { - "relative": false, - "relativeWidth": 2, + "relative": true, + "relativeWidth": 6, "absoluteWidth": 900000000 }, "barWidth": { - "relative": true, + "relative": false, "relativeWidth": 2, - "absoluteWidth": 1000 + "absoluteWidth": 900000000 } }, "showLegend": true, @@ -5126,7 +5150,10 @@ "showLine": true, "lineColor": "rgba(0, 0, 0, 0.54)", "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": { "show": true, @@ -5379,12 +5406,15 @@ "lineHeight": "1" }, "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, "ticksColor": "rgba(0, 0, 0, 0.54)", "showLine": true, "lineColor": "rgba(0, 0, 0, 0.54)", "showSplitLines": true, - "splitLinesColor": "rgba(0, 0, 0, 0.12)" + "splitLinesColor": "rgba(0, 0, 0, 0.12)", + "min": null, + "max": null }, "xAxis": { "show": true, @@ -5419,8 +5449,8 @@ "noAggregationBarWidthSettings": { "strategy": "group", "groupWidth": { - "relative": false, - "relativeWidth": 2, + "relative": true, + "relativeWidth": 6, "absoluteWidth": 900000000 }, "barWidth": { @@ -5642,7 +5672,10 @@ "showLine": true, "lineColor": "rgba(0, 0, 0, 0.54)", "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": { "show": true, @@ -5895,12 +5928,15 @@ "lineHeight": "1" }, "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, "ticksColor": "rgba(0, 0, 0, 0.54)", "showLine": true, "lineColor": "rgba(0, 0, 0, 0.54)", "showSplitLines": true, - "splitLinesColor": "rgba(0, 0, 0, 0.12)" + "splitLinesColor": "rgba(0, 0, 0, 0.12)", + "min": null, + "max": null }, "xAxis": { "show": true, @@ -5935,8 +5971,8 @@ "noAggregationBarWidthSettings": { "strategy": "group", "groupWidth": { - "relative": false, - "relativeWidth": 2, + "relative": true, + "relativeWidth": 6, "absoluteWidth": 900000000 }, "barWidth": { @@ -6158,7 +6194,10 @@ "showLine": true, "lineColor": "rgba(0, 0, 0, 0.54)", "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": { "show": true, @@ -6416,7 +6455,10 @@ "showLine": true, "lineColor": "rgba(0, 0, 0, 0.54)", "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": { "show": true, @@ -6669,12 +6711,15 @@ "lineHeight": "1" }, "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, "ticksColor": "rgba(0, 0, 0, 0.54)", "showLine": true, "lineColor": "rgba(0, 0, 0, 0.54)", "showSplitLines": true, - "splitLinesColor": "rgba(0, 0, 0, 0.12)" + "splitLinesColor": "rgba(0, 0, 0, 0.12)", + "min": null, + "max": null }, "xAxis": { "show": true, @@ -6709,8 +6754,8 @@ "noAggregationBarWidthSettings": { "strategy": "group", "groupWidth": { - "relative": false, - "relativeWidth": 2, + "relative": true, + "relativeWidth": 6, "absoluteWidth": 900000000 }, "barWidth": { @@ -6927,12 +6972,15 @@ "lineHeight": "1" }, "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, "ticksColor": "rgba(0, 0, 0, 0.54)", "showLine": true, "lineColor": "rgba(0, 0, 0, 0.54)", "showSplitLines": true, - "splitLinesColor": "rgba(0, 0, 0, 0.12)" + "splitLinesColor": "rgba(0, 0, 0, 0.12)", + "min": null, + "max": null }, "xAxis": { "show": true, @@ -6967,8 +7015,8 @@ "noAggregationBarWidthSettings": { "strategy": "group", "groupWidth": { - "relative": false, - "relativeWidth": 2, + "relative": true, + "relativeWidth": 6, "absoluteWidth": 900000000 }, "barWidth": { @@ -7252,7 +7300,10 @@ "showLine": true, "lineColor": "rgba(0, 0, 0, 0.54)", "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": { "show": true, @@ -7308,6 +7359,7 @@ }, "legendLabelColor": "rgba(0, 0, 0, 0.76)", "legendConfig": { + "direction": "column", "position": "bottom", "sortDataKeys": false, "showMin": true, @@ -7535,7 +7587,10 @@ "showLine": true, "lineColor": "rgba(0, 0, 0, 0.54)", "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": { "show": true, @@ -7591,6 +7646,7 @@ }, "legendLabelColor": "rgba(0, 0, 0, 0.76)", "legendConfig": { + "direction": "column", "position": "bottom", "sortDataKeys": false, "showMin": true, @@ -8099,7 +8155,7 @@ "dashboardLogoUrl": null, "hideToolbar": 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"