+ removeSeries(index)}
+ onRemoveSeries={() => metric.removeSeries(index)}
+ canDelete={metric.series.length > 1}
+ emptyMessage={isTable ?
+ 'Filter data using any event or attribute. Use Add Step button below to do so.' :
+ 'Add user event or filter to define the series by clicking Add Step.'
+ }
+ />
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ ));
+}
+
+export default WidgetForm;
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/index.ts b/frontend/app/components/Dashboard/components/WidgetForm/index.ts
new file mode 100644
index 000000000..283f9ec23
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/WidgetForm/index.ts
@@ -0,0 +1 @@
+export { default } from './WidgetForm';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
new file mode 100644
index 000000000..4e6de9662
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import cn from 'classnames';
+import WidgetWrapper from '../../WidgetWrapper';
+import { useDashboardStore } from '../../store/store';
+import { Loader, NoContent, SegmentSelection, Icon } from 'UI';
+import DateRange from 'Shared/DateRange';
+import { useObserver } from 'mobx-react-lite';
+
+interface Props {
+ className?: string;
+}
+function WidgetPreview(props: Props) {
+ const { className = '' } = props;
+ const store: any = useDashboardStore();
+ const metric = store.currentWidget;
+ const isTimeSeries = metric.metricType === 'timeseries';
+ const isTable = metric.metricType === 'table';
+
+ const chagneViewType = (e, { name, value }) => {
+ metric.update({ [ name ]: value });
+ }
+
+ const onDateChange = (changedDates) => {
+ // setPeriod({ ...changedDates, rangeName: changedDates.rangeValue })
+ metric.update({ ...changedDates, rangeName: changedDates.rangeValue });
+ }
+
+ return useObserver(() => (
+