jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: fix time mapping for charts

Browse source
This commit is contained in:
nick-delirium 2024-12-13 16:47:42 +01:00
parent 680c918b03
commit 4d7ceab026
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
4 changed files with 17 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BarChart.tsx
View file

@ -48,8 +48,8 @@ const PillBar = (props) => {
<rect
width={width}
height={height}
rx={Math.min(width / 2, height / 2)}
ry={Math.min(width / 2, height / 2)}
rx={10}
ry={10}
fill={fill}
/>
{striped && (

3
frontend/app/mstore/dashboardStore.ts
View file

@ -453,6 +453,7 @@ export default class DashboardStore {
isComparison?: boolean
): Promise<any> {
period = period.toTimestamps();
const density = data.density;
const params = { ...period, ...data, key: metric.predefinedKey };
if (!isComparison && metric.page && metric.limit) {
@ -469,7 +470,7 @@ export default class DashboardStore {
try {
const data = await metricService.getMetricChartData(metric, params, isSaved);
resolve(metric.setData(data, period, isComparison));
resolve(metric.setData(data, period, isComparison, density));
} catch (error) {
reject(error);
} finally {

6
frontend/app/mstore/types/widget.ts
View file

@ -294,7 +294,7 @@ export default class Widget {
this.page = page;
}
setData(data: { timestamp: number, [seriesName: string]: number}[], period: any, isComparison?: boolean) {
setData(data: { timestamp: number, [seriesName: string]: number}[], period: any, isComparison: boolean = false, density?: number) {
if (!data) return;
const _data: any = {};
if (isComparison && this.metricType === TIMESERIES) {
@ -335,7 +335,7 @@ export default class Widget {
if (data.hasOwnProperty('chart')) {
_data['value'] = data.value;
_data['unit'] = data.unit;
_data['chart'] = getChartFormatter(period)(data.chart);
_data['chart'] = getChartFormatter(period, density)(data.chart);
_data['namesMap'] = data.chart
.map((i: any) => Object.keys(i))
.flat()
@ -347,7 +347,7 @@ export default class Widget {
return unique;
}, []);
} else {
_data['chart'] = getChartFormatter(period)(data);
_data['chart'] = getChartFormatter(period, density)(data);
_data['namesMap'] = Array.isArray(data)
? data
.map((i) => Object.keys(i))

15
frontend/app/types/dashboard/helper.ts
View file

@ -4,21 +4,26 @@ const WEEK = DAY * 8;
const startWithZero = (num: number) => (num < 10 ? `0${ num }` : `${ num }`);
const weekdays = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ];
export const getTimeString = (ts, period) => {
export const getTimeString = (ts, period, density,) => {
const date = new Date(ts);
const diff = period.endTimestamp - period.startTimestamp;
if (diff <= DAY) {
var isPM = date.getHours() >= 12;
const isPM = date.getHours() >= 12;
return `${ isPM ? date.getHours() - 12 : date.getHours() }:${ startWithZero(date.getMinutes()) } ${isPM? 'pm' : 'am'}`;
}
if (diff <= WEEK) {
return weekdays[ date.getDay() ];
if (density < 20) {
return weekdays[ date.getDay() ];
} else {
const isPM = date.getHours() >= 12;
return `${ isPM ? date.getHours() - 12 : date.getHours() }:${ startWithZero(date.getMinutes()) } ${isPM? 'pm' : 'am'}`;
}
}
return `${ date.getDate() }/${ startWithZero(date.getMonth() + 1) } `;
};
export const getChartFormatter = period => (data = []) =>
data.map(({ timestamp, ...rest }) => ({ time: getTimeString(timestamp, period), ...rest, timestamp }));
export const getChartFormatter = (period, density) => (data = []) =>
data.map(({ timestamp, ...rest }) => ({ time: getTimeString(timestamp, period, density), ...rest, timestamp }));
export const getStartAndEndTimestampsByDensity = (current: number, start: number, end: number, density: number) => {
const diff = end - start;