github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 00:08:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

update line chart

Browse Source
This commit is contained in:
Fine 2025-01-10 16:03:36 +08:00
parent 4e47242053
commit ef73ace6ce
4 changed files with 177 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
src/hooks/data.ts
View File

@ -114,3 +114,169 @@ export const LightChartColors = [
]; ];
export const MaxQueryLength = 120; export const MaxQueryLength = 120;
export const TestJson = {
snapshot: {
expression: "sum(service_resp_time > 20) >= 1",
metrics: [
{
name: "service_resp_time",
results: [
{
metric: {
labels: [{ key: "name", value: "1" }],
},
values: [
{
id: "202501090857",
owner: null,
value: "30",
traceID: null,
},
{
id: "202501090858",
owner: null,
value: "29",
traceID: null,
},
{
id: "202501090859",
owner: null,
value: "29",
traceID: null,
},
{
id: "202501090900",
owner: null,
value: "155",
traceID: null,
},
{
id: "202501090901",
owner: null,
value: "35",
traceID: null,
},
],
},
{
metric: {
labels: [{ key: "name", value: "2" }],
},
values: [
{
id: "202501090857",
owner: null,
value: "20",
traceID: null,
},
{
id: "202501090858",
owner: null,
value: "19",
traceID: null,
},
{
id: "202501090859",
owner: null,
value: "39",
traceID: null,
},
{
id: "202501090900",
owner: null,
value: "135",
traceID: null,
},
{
id: "202501090901",
owner: null,
value: "55",
traceID: null,
},
],
},
],
},
{
name: "service_cpm",
results: [
{
metric: {
labels: [{ key: "name", value: "service_cpm1" }],
},
values: [
{
id: "202501090857",
owner: null,
value: "30",
traceID: null,
},
{
id: "202501090858",
owner: null,
value: "29",
traceID: null,
},
{
id: "202501090859",
owner: null,
value: "29",
traceID: null,
},
{
id: "202501090900",
owner: null,
value: "155",
traceID: null,
},
{
id: "202501090901",
owner: null,
value: "35",
traceID: null,
},
],
},
{
metric: {
labels: [{ key: "name", value: "service_cpm2" }],
},
values: [
{
id: "202501090857",
owner: null,
value: "20",
traceID: null,
},
{
id: "202501090858",
owner: null,
value: "19",
traceID: null,
},
{
id: "202501090859",
owner: null,
value: "39",
traceID: null,
},
{
id: "202501090900",
owner: null,
value: "135",
traceID: null,
},
{
id: "202501090901",
owner: null,
value: "55",
traceID: null,
},
],
},
],
},
],
},
};

2
src/hooks/useExpressionsProcessor.ts
View File

@ -141,7 +141,7 @@ export async function useDashboardQueryProcessor(configList: Indexable[]) {
} }
} }
} }
console.log(source);
return { source, tips, typesOfMQE }; return { source, tips, typesOfMQE };
} }
async function fetchMetrics(configArr: any) { async function fetchMetrics(configArr: any) {

4
src/hooks/useSnapshot.ts
View File

@ -15,8 +15,10 @@
* limitations under the License. * limitations under the License.
*/ */
import type { MetricsResults } from "@/types/dashboard"; import type { MetricsResults } from "@/types/dashboard";
import { TestJson } from "./data";
export function useSnapshot(metrics: { name: string; results: MetricsResults[] }[]) { export function useSnapshot(params: { name: string; results: MetricsResults[] }[]) {
const { metrics } = TestJson.snapshot as any;
function processResults() { function processResults() {
const sources = metrics.map((metric: { name: string; results: MetricsResults[] }) => { const sources = metrics.map((metric: { name: string; results: MetricsResults[] }) => {
const values = metric.results.map( const values = metric.results.map(

10
src/views/alarm/components/Line.vue
View File

@ -43,13 +43,14 @@ limitations under the License. -->
const grid = []; const grid = [];
const xAxis = []; const xAxis = [];
const yAxis = []; const yAxis = [];
for (const metric of props.data) { for (const [index, metric] of props.data.entries()) {
grid.push({ grid.push({
top: 35, top: index ? (600 / props.data.length) * index + 30 : 40,
left: 0, left: 0,
right: 10, right: 10,
bottom: 5, bottom: 5,
containLabel: true, containLabel: true,
height: 600 / props.data.length - 30,
}); });
xAxis.push({ xAxis.push({
type: "category", type: "category",
@ -61,9 +62,9 @@ limitations under the License. -->
splitLine: { show: false }, splitLine: { show: false },
axisLine: { lineStyle: { color: "rgba(0,0,0,0)" } }, axisLine: { lineStyle: { color: "rgba(0,0,0,0)" } },
axisLabel: { color: "#9da5b2", fontSize: "11" }, axisLabel: { color: "#9da5b2", fontSize: "11" },
gridIndex: index,
}); });
yAxis.push({ yAxis.push({
show: true,
type: "value", type: "value",
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
@ -73,6 +74,7 @@ limitations under the License. -->
fontSize: "11", fontSize: "11",
show: true, show: true,
}, },
gridIndex: index,
}); });
for (const item of metric.values) { for (const item of metric.values) {
series.push({ series.push({
@ -81,6 +83,8 @@ limitations under the License. -->
type: "line", type: "line",
symbol: "circle", symbol: "circle",
symbolSize: 4, symbolSize: 4,
xAxisIndex: index,
yAxisIndex: index,
lineStyle: { lineStyle: {
width: 2, width: 2,
type: "solid", type: "solid",