Skip to content

Commit d2ca026

Browse files
ssiyadssiyad
authored
Merge pull request #7168 from frappe/mergify/bp/master/pr-7165
fix(dashboard): Clean chart params (backport #7165)
2 parents 03f5e2e + d9c209a commit d2ca026

3 files changed

Lines changed: 264 additions & 242 deletions

File tree

‎dashboard/src/components/charts/BarChart.vue‎

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -34,26 +34,26 @@
3434
</template>
3535

3636
<script setup>
37-
import { onMounted, ref, toRefs } from 'vue';
38-
import { DateTime } from 'luxon';
39-
import { use, graphic } from 'echarts/core';
40-
import { SVGRenderer } from 'echarts/renderers';
41-
import { BarChart } from 'echarts/charts';
37+
import { BarChart } from 'echarts/charts'
4238
import {
39+
BrushComponent,
40+
DataZoomComponent,
4341
GridComponent,
4442
LegendComponent,
45-
TooltipComponent,
4643
MarkLineComponent,
47-
DataZoomComponent,
4844
ToolboxComponent,
49-
BrushComponent,
50-
} from 'echarts/components';
51-
import VChart from 'vue-echarts';
52-
import Card from '../global/Card.vue';
53-
import { theme } from '../../utils/theme';
54-
import { bytes, getUnit } from '../../utils/format';
55-
import dayjs from '../../utils/dayjs';
56-
import NoDataMsg from '@/components/common/NoDataMsg.vue';
45+
TooltipComponent,
46+
} from 'echarts/components'
47+
import { graphic, use } from 'echarts/core'
48+
import { SVGRenderer } from 'echarts/renderers'
49+
import { DateTime } from 'luxon'
50+
import { onMounted, ref, toRefs } from 'vue'
51+
import VChart from 'vue-echarts'
52+
import NoDataMsg from '@/components/common/NoDataMsg.vue'
53+
import dayjs from '../../utils/dayjs'
54+
import { bytes, escapeHtml, getUnit } from '../../utils/format'
55+
import { theme } from '../../utils/theme'
56+
import Card from '../global/Card.vue'
5757
5858
const props = defineProps({
5959
showCard: {
@@ -104,9 +104,9 @@ const props = defineProps({
104104
required: false,
105105
default: () => '',
106106
},
107-
});
107+
})
108108
109-
const { title, unit, data, type, chartTheme } = toRefs(props);
109+
const { title, unit, data, type, chartTheme } = toRefs(props)
110110
111111
use([
112112
BarChart,
@@ -118,11 +118,11 @@ use([
118118
DataZoomComponent,
119119
ToolboxComponent,
120120
BrushComponent,
121-
]);
121+
])
122122
123123
const initOptions = {
124124
renderer: 'svg',
125-
};
125+
}
126126
127127
const options = ref({
128128
grid: {
@@ -139,22 +139,24 @@ const options = ref({
139139
// for the dot to follow the same color as the line 🗿
140140
let tooltip = `<p>${DateTime.fromSQL(
141141
params[0].axisValueLabel,
142-
).toLocaleString(DateTime.DATETIME_MED)}</p>`;
142+
).toLocaleString(DateTime.DATETIME_MED)}</p>`
143143
144144
params.forEach(({ value, seriesName }, i) => {
145-
if (!value) return;
145+
if (!value) return
146146
147147
let colorSpan = (color) =>
148148
'<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:' +
149149
color +
150-
'"></span>';
150+
'"></span>'
151151
152152
tooltip += `<p>${colorSpan(chartTheme.value[i])} ${getUnit(
153153
value,
154154
unit.value,
155-
)} ${unit.value !== seriesName ? `- ${seriesName}` : ''}</p>`;
156-
});
157-
return tooltip;
155+
)} ${
156+
unit.value !== seriesName ? `- ${escapeHtml(seriesName)}` : ''
157+
}</p>`
158+
})
159+
return tooltip
158160
},
159161
},
160162
toolbox: {
@@ -192,12 +194,12 @@ const options = ref({
192194
axisLabel: {
193195
formatter: (value) => {
194196
if (unit.value === 'bytes') {
195-
return bytes(value, 0);
197+
return bytes(value, 0)
196198
} else {
197-
if (value >= 1000000000) return `${value / 1000000000}B`;
198-
else if (value >= 1000000) return `${value / 1000000}M`;
199-
else if (value >= 1000) return `${value / 1000}K`;
200-
return value;
199+
if (value >= 1000000000) return `${value / 1000000000}B`
200+
else if (value >= 1000000) return `${value / 1000000}M`
201+
else if (value >= 1000) return `${value / 1000}K`
202+
return value
201203
}
202204
},
203205
padding: 5,
@@ -248,44 +250,44 @@ const options = ref({
248250
]),
249251
opacity: 0.3,
250252
},
251-
};
253+
}
252254
}),
253-
});
255+
})
254256
255-
const chartRef = ref(null);
256-
const emits = defineEmits(['datazoom']);
257+
const chartRef = ref(null)
258+
const emits = defineEmits(['datazoom'])
257259
258260
onMounted(() => {
259-
const chart = chartRef.value?.chart;
261+
const chart = chartRef.value?.chart
260262
// Detach before dispatching: takeGlobalCursor triggers a re-render, which
261263
// fires `finished` again. Left attached, that is an endless render loop that
262264
// pegs the main thread for as long as the page is open.
263265
const activateDataZoomCursor = () => {
264-
chart?.off('finished', activateDataZoomCursor);
266+
chart?.off('finished', activateDataZoomCursor)
265267
chart?.dispatchAction({
266268
type: 'takeGlobalCursor',
267269
key: 'dataZoomSelect',
268270
dataZoomSelectActive: true,
269-
});
270-
};
271-
chart?.on('finished', activateDataZoomCursor);
271+
})
272+
}
273+
chart?.on('finished', activateDataZoomCursor)
272274
273275
chart?.on('datazoom', (evt) => {
274-
const timezone = dayjs.tz.guess();
275-
const { startValue: startIndex, endValue: endIndex } = evt.batch[0];
276-
const responseLabelTimestampFormat = 'YYYY-MM-DD HH:mm:ss';
276+
const timezone = dayjs.tz.guess()
277+
const { startValue: startIndex, endValue: endIndex } = evt.batch[0]
278+
const responseLabelTimestampFormat = 'YYYY-MM-DD HH:mm:ss'
277279
const startDate = dayjs(
278280
data.value.labels[startIndex],
279281
responseLabelTimestampFormat,
280282
timezone,
281-
);
283+
)
282284
const endDate = dayjs(
283285
data.value.labels[endIndex],
284286
responseLabelTimestampFormat,
285287
timezone,
286-
);
287-
evt = { startDate: startDate.toDate(), endDate: endDate.toDate() };
288-
emits('datazoom', evt);
289-
});
290-
});
288+
)
289+
evt = { startDate: startDate.toDate(), endDate: endDate.toDate() }
290+
emits('datazoom', evt)
291+
})
292+
})
291293
</script>

‎dashboard/src/components/charts/LineChart.vue‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -37,22 +37,22 @@
3737
</template>
3838

3939
<script setup>
40-
import Card from '../global/Card.vue';
41-
import { ref, toRefs } from 'vue';
42-
import { DateTime } from 'luxon';
43-
import { use, graphic } from 'echarts/core';
44-
import { SVGRenderer } from 'echarts/renderers';
45-
import { LineChart } from 'echarts/charts';
40+
import { LineChart } from 'echarts/charts'
4641
import {
4742
GridComponent,
4843
LegendComponent,
49-
TooltipComponent,
5044
MarkLineComponent,
51-
} from 'echarts/components';
52-
import VChart from 'vue-echarts';
53-
import { theme } from '../../utils/theme';
54-
import { bytes, getUnit } from '../../utils/format';
55-
import NoDataMsg from '@/components/common/NoDataMsg.vue';
45+
TooltipComponent,
46+
} from 'echarts/components'
47+
import { graphic, use } from 'echarts/core'
48+
import { SVGRenderer } from 'echarts/renderers'
49+
import { DateTime } from 'luxon'
50+
import { ref, toRefs } from 'vue'
51+
import VChart from 'vue-echarts'
52+
import NoDataMsg from '@/components/common/NoDataMsg.vue'
53+
import { bytes, escapeHtml, getUnit } from '../../utils/format'
54+
import { theme } from '../../utils/theme'
55+
import Card from '../global/Card.vue'
5656
5757
const props = defineProps({
5858
showCard: {
@@ -102,9 +102,9 @@ const props = defineProps({
102102
type: Error,
103103
required: false,
104104
},
105-
});
105+
})
106106
107-
const { title, unit, data, type, chartTheme } = toRefs(props);
107+
const { title, unit, data, type, chartTheme } = toRefs(props)
108108
109109
use([
110110
SVGRenderer,
@@ -113,11 +113,11 @@ use([
113113
LineChart,
114114
TooltipComponent,
115115
MarkLineComponent,
116-
]);
116+
])
117117
118118
const initOptions = {
119119
renderer: 'svg',
120-
};
120+
}
121121
122122
const options = ref({
123123
grid: {
@@ -132,21 +132,23 @@ const options = ref({
132132
// for the dot to follow the same color as the line 🗿
133133
let tooltip = `<p>${DateTime.fromSQL(
134134
params[0].axisValueLabel,
135-
).toLocaleString(DateTime.DATETIME_MED)}</p>`;
135+
).toLocaleString(DateTime.DATETIME_MED)}</p>`
136136
137137
params.forEach(({ value, seriesName }, i) => {
138-
if (!value || !value[1]) return;
138+
if (!value || !value[1]) return
139139
let colorSpan = (color) =>
140140
'<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:' +
141141
color +
142-
'"></span>';
142+
'"></span>'
143143
144144
tooltip += `<p>${colorSpan(chartTheme.value[i])} ${getUnit(
145145
value[1],
146146
unit.value,
147-
)} ${unit.value !== seriesName ? `- ${seriesName}` : ''}</p>`;
148-
});
149-
return tooltip;
147+
)} ${
148+
unit.value !== seriesName ? `- ${escapeHtml(seriesName)}` : ''
149+
}</p>`
150+
})
151+
return tooltip
150152
},
151153
},
152154
xAxis: {
@@ -166,16 +168,16 @@ const options = ref({
166168
axisLabel: {
167169
formatter: (value) => {
168170
if (unit.value === '%') {
169-
return `${value}%`;
171+
return `${value}%`
170172
} else if (unit.value === 'IOps') {
171-
return `${value} IOps`;
173+
return `${value} IOps`
172174
} else if (unit.value === 'bytes') {
173-
return bytes(value, 0);
175+
return bytes(value, 0)
174176
} else {
175-
if (value >= 1000000000) return `${value / 1000000000}B`;
176-
else if (value >= 1000000) return `${value / 1000000}M`;
177-
else if (value >= 1000) return `${value / 1000}K`;
178-
return value;
177+
if (value >= 1000000000) return `${value / 1000000000}B`
178+
else if (value >= 1000000) return `${value / 1000000}M`
179+
else if (value >= 1000) return `${value / 1000}K`
180+
return value
179181
}
180182
},
181183
},
@@ -225,7 +227,7 @@ const options = ref({
225227
]),
226228
opacity: 0.3,
227229
},
228-
};
230+
}
229231
}),
230-
});
232+
})
231233
</script>

0 commit comments

Comments
 (0)