@@ -59,4 +73,45 @@ function FunnelWidget(props: Props) {
));
}
+function EmptyStage({ total }: any) {
+ return useObserver( () => (
+
+ ))
+}
+
+function Stage({ stage, index, isWidget }: any) {
+ return useObserver( () => (
+
+
+
+ {!isWidget && (
+
+ )}
+
+ ))
+}
+
+function IndexNumber({ index }: any) {
+ return (
+
+ {index}
+
+ );
+}
+
+
+function BarActions({ bar }: any) {
+ return useObserver(() => (
+
+
+
+ ))
+}
+
export default FunnelWidget;
\ No newline at end of file
diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts
index ba0e9ee83..4bd18035c 100644
--- a/frontend/app/mstore/dashboardStore.ts
+++ b/frontend/app/mstore/dashboardStore.ts
@@ -20,6 +20,7 @@ export interface IDashboardSotre {
endTimestamp: number
period: Period
drillDownFilter: IFilter
+ drillDownPeriod: Period
siteId: any
currentWidget: Widget
@@ -84,6 +85,7 @@ export default class DashboardStore implements IDashboardSotre {
widgets: Widget[] = []
period: Period = Period({ rangeName: LAST_30_DAYS })
drillDownFilter: Filter = new Filter()
+ drillDownPeriod: Period = Period({ rangeName: LAST_30_DAYS });
startTimestamp: number = 0
endTimestamp: number = 0
@@ -107,6 +109,7 @@ export default class DashboardStore implements IDashboardSotre {
drillDownFilter: observable.ref,
widgetCategories: observable.ref,
selectedDashboard: observable.ref,
+ drillDownPeriod: observable,
resetCurrentWidget: action,
addDashboard: action,
removeDashboard: action,
@@ -130,13 +133,15 @@ export default class DashboardStore implements IDashboardSotre {
fetchTemplates: action,
updatePinned: action,
setPeriod: action,
+ setDrillDownPeriod: action,
fetchMetricChartData: action
})
- const drillDownPeriod = Period({ rangeName: LAST_30_DAYS }).toTimestamps();
- this.drillDownFilter.updateKey('startTimestamp', drillDownPeriod.startTimestamp)
- this.drillDownFilter.updateKey('endTimestamp', drillDownPeriod.endTimestamp)
+ this.drillDownPeriod = Period({ rangeName: LAST_24_HOURS });
+ const timeStamps = this.drillDownPeriod.toTimestamps();
+ this.drillDownFilter.updateKey('startTimestamp', timeStamps.startTimestamp)
+ this.drillDownFilter.updateKey('endTimestamp', timeStamps.endTimestamp)
}
toggleAllSelectedWidgets(isSelected: boolean) {
@@ -434,6 +439,10 @@ export default class DashboardStore implements IDashboardSotre {
this.period = new Period({ start: period.startDate, end: period.endDate, rangeName: period.rangeName })
}
+ setDrillDownPeriod(period: any) {
+ this.drillDownPeriod = new Period({ start: period.startDate, end: period.endDate, rangeName: period.rangeName })
+ }
+
fetchMetricChartData(metric: IWidget, data: any, isWidget: boolean = false): Promise
{
const period = this.period.toTimestamps()
const params = { ...period, ...data, key: metric.predefinedKey }
diff --git a/frontend/app/mstore/metricStore.ts b/frontend/app/mstore/metricStore.ts
index 8763bcee0..bd5112470 100644
--- a/frontend/app/mstore/metricStore.ts
+++ b/frontend/app/mstore/metricStore.ts
@@ -78,14 +78,6 @@ export default class MetricStore implements IMetricStore {
paginatedList: computed,
})
-
- // reaction(
- // () => this.metricsSearch,
- // (metricsSearch) => { // TODO filter the list for View
- // this.page = 1
- // this.paginatedList
- // }
- // )
}
// State Actions
@@ -172,11 +164,14 @@ export default class MetricStore implements IMetricStore {
})
}
- fetch(id: string) {
+ fetch(id: string, period?: any) {
this.isLoading = true
return metricService.getMetric(id)
.then((metric: any) => {
- return this.instance = new Widget().fromJson(metric)
+ // if (period) {
+ // metric.period = period
+ // }
+ return this.instance = new Widget().fromJson(metric, period)
}).finally(() => {
this.isLoading = false
})
diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts
index d84a18efc..07703faa4 100644
--- a/frontend/app/mstore/types/widget.ts
+++ b/frontend/app/mstore/types/widget.ts
@@ -6,6 +6,7 @@ import Session from "App/mstore/types/session";
import Funnelissue from 'App/mstore/types/funnelIssue';
import { issueOptions } from 'App/constants/filterOptions';
import { FilterKey } from 'Types/filter/filterType';
+import Period, { LAST_24_HOURS, LAST_30_DAYS } from 'Types/app/period';
export interface IWidget {
metricId: any
@@ -40,6 +41,8 @@ export interface IWidget {
params: any
+ period: any
+
updateKey(key: string, value: any): void
removeSeries(index: number): void
addSeries(): void
@@ -52,6 +55,7 @@ export interface IWidget {
toWidget(): any
setData(data: any): void
fetchSessions(metricId: any, filter: any): Promise
+ setPeriod(period: Period): void
}
export default class Widget implements IWidget {
public static get ID_KEY():string { return "metricId" }
@@ -75,6 +79,8 @@ export default class Widget implements IWidget {
page: number = 1
limit: number = 5
params: any = { density: 70 }
+
+ period: any = Period({ rangeName: LAST_24_HOURS }) // temp value in detail view
sessionsLoading: boolean = false
@@ -117,6 +123,7 @@ export default class Widget implements IWidget {
validate: action,
update: action,
updateKey: action,
+ setPeriod: action,
})
const filterSeries = new FilterSeries()
@@ -137,7 +144,7 @@ export default class Widget implements IWidget {
this.series.push(series)
}
- fromJson(json: any) {
+ fromJson(json: any, period?: any) {
json.config = json.config || {}
runInAction(() => {
this.metricId = json.metricId
@@ -155,10 +162,18 @@ export default class Widget implements IWidget {
this.config = json.config
this.position = json.config.position
this.predefinedKey = json.predefinedKey
+
+ if (period) {
+ this.period = period
+ }
})
return this
}
+ setPeriod(period: any) {
+ this.period = new Period({ start: period.startDate, end: period.endDate, rangeName: period.rangeName })
+ }
+
toWidget(): any {
return {
config: {
@@ -186,7 +201,7 @@ export default class Widget implements IWidget {
series: this.series.map((series: any) => series.toJson()),
config: {
...this.config,
- col: this.metricType === 'funnel' || this.metricOf === FilterKey.ERRORS ? 4 : this.config.col
+ col: this.metricType === 'funnel' || this.metricOf === FilterKey.ERRORS || this.metricOf === FilterKey.SESSIONS ? 4 : this.config.col
},
}
}
diff --git a/frontend/app/types/app/period.js b/frontend/app/types/app/period.js
index ddb99e1f4..1922e55b3 100644
--- a/frontend/app/types/app/period.js
+++ b/frontend/app/types/app/period.js
@@ -96,6 +96,14 @@ export default Record({
end: range.end.unix() * 1000,
}
},
+ // fromFilter: filter => {
+ // const range = getRange(filter.rangeName);
+ // return {
+ // start: range.start.unix() * 1000,
+ // end: range.end.unix() * 1000,
+ // rangeName: filter.rangeName,
+ // }
+ // },
methods: {
toJSON() {
return {