github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Automatic range on insights graph (#15200)

Browse Source 
* Automatic range for insights graph

* Timezone offset

* Refactoring

* Update code based on CR

* Apply suggestions from code review

Co-authored-by: Petr Hulínský <petr.hulinsky@koala42.com>
Co-authored-by: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
This commit is contained in:
Petr Hulínský
2022-08-31 09:26:24 +02:00
committed by GitHub
parent f3b6e5ee9d
commit d7b8ef297e
2 changed files with 42 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/src/panels/time-series/index.ts
View File

@@ -1,4 +1,5 @@
import { getGroups } from '@/utils/get-groups';
import { Filter } from '@directus/shared/types';
import { definePanel } from '@directus/shared/utils';
import PanelTimeSeries from './panel-time-series.vue';
@@ -12,6 +13,25 @@ export default definePanel({
return;
}
const filter: Filter = {
_and: [options.filter || {}],
};
if (options.range !== 'auto') {
filter._and.push(
{
[options.dateField]: {
_gte: `$NOW(-${options.range || '1 week'})`,
},
},
{
[options.dateField]: {
_lte: `$NOW`,
},
}
);
}
return {
collection: options.collection,
query: {
@@ -19,21 +39,7 @@ export default definePanel({
aggregate: {
[options.function]: [options.valueField],
},
filter: {
_and: [
{
[options.dateField]: {
_gte: `$NOW(-${options.range || '1 week'})`,
},
},
{
[options.dateField]: {
_lte: `$NOW`,
},
},
options.filter || {},
],
},
filter,
limit: -1,
},
};
@@ -175,6 +181,10 @@ export default definePanel({
width: 'half',
options: {
choices: [
{
text: 'Automatic (Based on data)',
value: 'auto',
},
{
text: 'Past 5 Minutes',
value: '5 minutes',

21
app/src/panels/time-series/panel-time-series.vue
View File

@@ -116,10 +116,16 @@ function setupChart() {
const isFieldTimestamp = fieldsStore.getField(props.collection, props.dateField)?.type === 'timestamp';
const allDates = props.data.map((metric) => {
return toIncludeTimezoneOffset(metric.group, isFieldTimestamp);
});
const minDate = Math.min(...allDates);
const maxDate = Math.max(...allDates);
metrics.value = orderBy(
props.data.map((metric) => ({
x: new Date(toISO(metric.group)).getTime() - (isFieldTimestamp ? new Date().getTimezoneOffset() * 60 * 1000 : 0),
x: toIncludeTimezoneOffset(metric.group, isFieldTimestamp),
y: Number(Number(metric[props.function][props.valueField]).toFixed(props.decimals ?? 0)),
})),
'x'
@@ -222,8 +228,11 @@ function setupChart() {
axisBorder: {
show: false,
},
range: props.now.getTime() - adjustDate(props.now, `-${props.range}`)!.getTime(),
max: props.now.getTime(),
range:
props.range === 'auto'
? maxDate - minDate
: props.now.getTime() - adjustDate(props.now, `-${props.range}`)!.getTime(),
max: props.range === 'auto' ? maxDate : props.now.getTime(),
labels: {
show: props.showXAxis ?? true,
offsetY: -4,
@@ -289,6 +298,10 @@ function setupChart() {
chart.value.render();
function toIncludeTimezoneOffset(time: Record<string, any>, isFieldTimestamp: boolean): number {
return new Date(toISO(time)).getTime() - (isFieldTimestamp ? new Date().getTimezoneOffset() * 60 * 1000 : 0);
}
function toISO(metric: Record<string, any>) {
const year = metric[`${props.dateField}_year`];
const month = padZero(metric[`${props.dateField}_month`] ?? 1);