@reltio/dashboard 1.4.1584 → 1.4.1586-mui5

package/src/types/PeriodStep.ts

@@ -0,0 +1,4 @@
+export enum PeriodStep {
+    HOUR = 'hour',
+    DAY = 'day'
+}

package/src/types/SavedSearchData.ts

@@ -0,0 +1,6 @@
+export type SavedSearchData = {
+    count: number;
+    uri: string;
+    name: string;
+    uiState: Record<string, any>;
+};

package/src/types/SearchOptions.ts

@@ -0,0 +1,10 @@
+export type SearchOptions = {
+    searchByOv: boolean;
+    ovOnly: boolean;
+};
+
+export type GlobalSearchRequestOptions = {
+    searchOptions: string;
+    activityFilter: string;
+    globalFilter: string;
+};

package/src/types/StatsData.ts

@@ -0,0 +1,14 @@
+export type StatsEventData = {
+    term: string;
+    count: number;
+};
+
+export type TimestampedStatsEventData = StatsEventData & {
+    term: number;
+};
+
+export type StatsData = {
+    event: string;
+    total: number;
+    data: StatsEventData[];
+};

package/src/types/WorkflowTasks.ts

@@ -0,0 +1,26 @@
+import {WorkflowTaskData} from '@reltio/mdm-sdk';
+
+export enum WorkflowTasksCategories {
+    MY = 'my',
+    TEAM = 'team'
+}
+
+type WorkflowTaskEntityData = {
+    uri: string;
+    label: string;
+    type: string;
+};
+type WorkflowTaskRelationData = {
+    uri: string;
+    type: string;
+    startObjectUri: string;
+    endObjectUri: string;
+    startObjectLabel: string;
+    endObjectLabel: string;
+};
+
+export type WorkflowTaskObjectData = WorkflowTaskEntityData | WorkflowTaskRelationData;
+
+export type EnrichedWorkflowTaskData = WorkflowTaskData & {
+    objects?: WorkflowTaskObjectData[];
+};

package/src/types/index.ts

@@ -0,0 +1,14 @@
+export type {CustomActionViewFacetConfig} from './CustomActionViewFacetConfig';
+export type {ActivitiesViewFacetConfig} from './ActivitiesViewFacetConfig';
+export type {DashboardPerspectiveLegacyConfig, DashboardView} from './DashboardPerspectiveConfig';
+export type {DashboardSavedState} from './DashboardSavedState';
+export type {EntityByTypeViewFacetConfig} from './EntityByTypeViewFacetConfig';
+export type {EntityData} from './EntityData';
+export type {FilteredEntitiesFacetConfig} from './FilteredEntitiesFacetConfig';
+export type {FilteredSavedSearchesFacetConfig} from './FilteredSavedSearchesFacetConfig';
+export type {PeriodStep} from './PeriodStep';
+export type {SavedSearchData} from './SavedSearchData';
+export type {SearchOptions, GlobalSearchRequestOptions} from './SearchOptions';
+export type {StatsData, StatsEventData} from './StatsData';
+export type {EnrichedWorkflowTaskData, WorkflowTaskObjectData, WorkflowTasksCategories} from './WorkflowTasks';
+export {ViewStatus} from './DashboardPerspectiveConfig';

package/src/views/ViewsFactory.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import FilteredSavedSearchesFacet from './tableBased/FilteredSavedSearchesFacet';
+import DashboardFacet from './chartBased/DashboardFacet';
+import FilteredEntitiesViewFacet from './tableBased/FilteredEntitiesViewFacet';
+import ProfileStatsFacet from './chartBased/ProfileStatsFacet';
+import EntitiesByTypeViewFacet from './chartBased/EntitiesByTypeViewFacet';
+import CustomActionViewFacet from './custom/CustomActionViewFacet';
+import {ChartTypes, DashboardFacetConfig, DashboardView, DashboardViewTypes} from '@reltio/mdm-sdk';
+import NotificationInboxFacet from './custom/NotificationInboxFacet';
+import ActivitiesViewFacet from './tableBased/ActivitiesViewFacet';
+import {
+    ActivitiesViewFacetConfig,
+    CustomActionViewFacetConfig,
+    EntityByTypeViewFacetConfig,
+    FilteredSavedSearchesFacetConfig,
+    FilteredEntitiesFacetConfig
+} from '../types';
+
+type Props = {
+    config:
+        | ActivitiesViewFacetConfig
+        | CustomActionViewFacetConfig
+        | DashboardFacetConfig
+        | EntityByTypeViewFacetConfig
+        | FilteredEntitiesFacetConfig
+        | FilteredSavedSearchesFacetConfig
+        | DashboardView;
+    type: string;
+    onToggleFullscreen: (id: string) => void;
+    isUpdated?: boolean;
+    isFullscreen: boolean;
+    onRemove?: (id: string) => void;
+};
+class ViewsFactory {
+    static ViewTypes = DashboardViewTypes;
+
+    static getComponent = ({config, type, isUpdated, isFullscreen, onToggleFullscreen, onRemove}: Props) => {
+        const props = {
+            isUpdated,
+            isFullscreen,
+            onToggleFullscreen,
+            onRemove
+        };
+        switch (type) {
+            case ViewsFactory.ViewTypes.ActivitiesViewFacet:
+                return <ActivitiesViewFacet config={config} {...props} />;
+            case ViewsFactory.ViewTypes.CustomActionViewFacet:
+                return <CustomActionViewFacet config={config as CustomActionViewFacetConfig} {...props} />;
+            case ViewsFactory.ViewTypes.DashboardFacet:
+                return <DashboardFacet config={config as DashboardFacetConfig} {...props} />;
+            case ViewsFactory.ViewTypes.EntitiesByTypeViewFacet:
+                return <EntitiesByTypeViewFacet config={config as EntityByTypeViewFacetConfig} {...props} />;
+            case ViewsFactory.ViewTypes.FilteredSavedSearchesFacet:
+                return <FilteredSavedSearchesFacet config={config} {...props} />;
+            case ViewsFactory.ViewTypes.FilteredEntitiesViewFacet:
+                return <FilteredEntitiesViewFacet config={config} {...props} />;
+            case ViewsFactory.ViewTypes.NotificationInboxFacet:
+                return <NotificationInboxFacet config={config} {...props} />;
+            case ViewsFactory.ViewTypes.ProfileStatsFacet:
+                return <ProfileStatsFacet config={config} {...props} />;
+            default:
+                return <div>NOT IMPLEMENTED</div>;
+        }
+    };
+
+    static getChartType = (view: DashboardView & {chartType?: string}): string => {
+        const typeConverters = {
+            [ViewsFactory.ViewTypes.EntitiesByTypeViewFacet]: ChartTypes.TREE,
+            [ViewsFactory.ViewTypes.FilteredSavedSearchesFacet]: ChartTypes.TABLE,
+            [ViewsFactory.ViewTypes.FilteredEntitiesViewFacet]: ChartTypes.TABLE,
+            [ViewsFactory.ViewTypes.ProfileStatsFacet]: ChartTypes.LINE,
+            [ViewsFactory.ViewTypes.NotificationInboxFacet]: ChartTypes.TABLE,
+            [ViewsFactory.ViewTypes.ActivitiesViewFacet]: ChartTypes.TABLE
+        };
+        return view.chartType || typeConverters[view.component];
+    };
+}
+
+export default ViewsFactory;

package/src/views/__tests__/ViewsFactory.specs.tsx

@@ -0,0 +1,70 @@
+import {ChartTypes} from '@reltio/mdm-sdk';
+import ViewsFactory from '../ViewsFactory';
+
+describe('ViewsFactory tests', () => {
+    describe('getChartType tests', () => {
+        it('should return chartType property if view has chartType', () => {
+            const view = {
+                id: 'ViewID',
+                component: 'DashboardFacet',
+                chartType: 'bar',
+                title: 'Title'
+            };
+            expect(ViewsFactory.getChartType(view)).toBe(view.chartType);
+        });
+
+        it('should return ChartTypes.TREE for EntitiesByTypeViewFacet', () => {
+            const view = {
+                id: 'ViewID',
+                component: 'EntitiesByTypeViewFacet',
+                title: 'Title'
+            };
+            expect(ViewsFactory.getChartType(view)).toBe(ChartTypes.TREE);
+        });
+
+        it('should return ChartTypes.TABLE for FilteredSavedSearchesFacet', () => {
+            const view = {
+                id: 'ViewID',
+                component: 'FilteredSavedSearchesFacet',
+                title: 'Title'
+            };
+            expect(ViewsFactory.getChartType(view)).toBe(ChartTypes.TABLE);
+        });
+
+        it('should return ChartTypes.TABLE for FilteredEntitiesViewFacet', () => {
+            const view = {
+                id: 'ViewID',
+                component: 'FilteredEntitiesViewFacet',
+                title: 'Title'
+            };
+            expect(ViewsFactory.getChartType(view)).toBe(ChartTypes.TABLE);
+        });
+
+        it('should return ChartTypes.LINE for ProfileStatsFacet', () => {
+            const view = {
+                id: 'ViewID',
+                component: 'ProfileStatsFacet',
+                title: 'Title'
+            };
+            expect(ViewsFactory.getChartType(view)).toBe(ChartTypes.LINE);
+        });
+
+        it('should return undefined for CustomActionViewFacet', () => {
+            const view = {
+                id: 'ViewID',
+                component: 'CustomActionViewFacet',
+                title: 'Title'
+            };
+            expect(ViewsFactory.getChartType(view)).toBeUndefined();
+        });
+
+        it('should return undefined for unknown facet without chartType property', () => {
+            const view = {
+                id: 'ViewID',
+                component: 'SomeNewFacet',
+                title: 'Title'
+            };
+            expect(ViewsFactory.getChartType(view)).toBeUndefined();
+        });
+    });
+});

package/src/views/chartBased/DashboardFacet.tsx

@@ -0,0 +1,71 @@
+import React, {memo, useContext, useMemo} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import {ChartsFactory, SearchFiltersContext, useReloadFacet} from '@reltio/components';
+import {useFacetRequest} from '../../hooks/useFacetRequest';
+import {ChartTypes, DashboardFacetConfig, SearchFilter} from '@reltio/mdm-sdk';
+import LayoutItemView from '../../components/LayoutItemView/LayoutItemView';
+import LayoutItemHeader from '../../components/LayoutItemHeader/LayoutItemHeader';
+import LayoutItemContent from '../../components/LayoutItemContent/LayoutItemContent';
+import mdmModule, {ui} from '@reltio/mdm-module';
+import {concat, pipe} from 'ramda';
+import {facetFiltersToSearchState, getFiltersForFacet, getFiltersForFacetItem} from '../../services/facets';
+import {convertSearchFilterToDashboardConfigFilter} from '../../services/filters';
+
+type DashboardFacetProps = {
+    config: DashboardFacetConfig;
+    onToggleFullscreen: (id: string) => void;
+    isUpdated?: boolean;
+    isFullscreen: boolean;
+    onRemove?: (id: string) => void;
+};
+
+const DashboardFacet = ({config, onToggleFullscreen, isUpdated, isFullscreen, onRemove}: DashboardFacetProps) => {
+    const {id, title, filters, attributeUri, count, orderType, chartType, showOthers, ...options} = config;
+    const pageSize = chartType === ChartTypes.MAP ? 100 : 8;
+    const {data, state, reload} = useFacetRequest({
+        filters,
+        attributeUri,
+        pageSize: count || pageSize,
+        orderType,
+        options: {showOthers}
+    });
+
+    useReloadFacet({state, reload});
+
+    const dispatch = useDispatch();
+    const metadata = useSelector(mdmModule.selectors.getMetadata);
+
+    const searchFilters = useContext<SearchFilter[]>(SearchFiltersContext);
+    const allFilters = useMemo(
+        () => searchFilters.map(convertSearchFilterToDashboardConfigFilter).concat(filters || []),
+        [searchFilters, filters]
+    );
+
+    const onItemClick = pipe(
+        getFiltersForFacetItem(attributeUri, data),
+        concat(getFiltersForFacet(attributeUri, allFilters)),
+        facetFiltersToSearchState(metadata, attributeUri),
+        ui.actions.openSearch,
+        dispatch
+    );
+
+    return (
+        <LayoutItemView id={id}>
+            <LayoutItemHeader
+                title={title}
+                onToggleFullscreen={onToggleFullscreen}
+                isUpdated={isUpdated}
+                isFullscreen={isFullscreen}
+                onRefresh={reload}
+                onRemove={onRemove}
+            />
+            <LayoutItemContent loadingState={state} onRefresh={reload} data={data}>
+                {({data, width = 0, height = 0}) => {
+                    return ChartsFactory.build(chartType, {data, width, height, options, onItemClick});
+                }}
+            </LayoutItemContent>
+        </LayoutItemView>
+    );
+};
+
+export default memo(DashboardFacet);

package/src/views/chartBased/EntitiesByTypeViewFacet.tsx

@@ -0,0 +1,60 @@
+import React, {memo} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import {TreeChart, useReloadFacet} from '@reltio/components';
+import {useEntityByTypeRequest} from '../../hooks/useEntityByTypeRequest';
+import LayoutItemView from '../../components/LayoutItemView/LayoutItemView';
+import LayoutItemHeader from '../../components/LayoutItemHeader/LayoutItemHeader';
+import LayoutItemContent from '../../components/LayoutItemContent/LayoutItemContent';
+import {EntityByTypeViewFacetConfig} from '../../types/EntityByTypeViewFacetConfig';
+import {entityTypeNameToFilters} from '../../services/entityTypes';
+import {facetFiltersToSearchState} from '../../services/facets';
+import mdmModule, {ui} from '@reltio/mdm-module';
+import {pipe} from 'ramda';
+
+type Props = {
+    config: EntityByTypeViewFacetConfig;
+    onToggleFullscreen: (id: string) => void;
+    isUpdated?: boolean;
+    isFullscreen: boolean;
+    onRemove?: (id: string) => void;
+};
+
+const EntitiesByTypeViewFacet = ({config, onToggleFullscreen, isUpdated, isFullscreen, onRemove}: Props) => {
+    const {id, title, hideEmpty, orderType, inheritChildren} = config;
+    const {data, state, reload} = useEntityByTypeRequest({
+        hideEmpty,
+        orderType,
+        inheritChildren
+    });
+
+    useReloadFacet({state, reload});
+
+    const dispatch = useDispatch();
+    const metadata = useSelector(mdmModule.selectors.getMetadata);
+    const onTypeClick = pipe(
+        entityTypeNameToFilters,
+        facetFiltersToSearchState(metadata, 'type'),
+        ui.actions.openSearch,
+        dispatch
+    );
+
+    return (
+        <LayoutItemView id={id}>
+            <LayoutItemHeader
+                title={title}
+                onToggleFullscreen={onToggleFullscreen}
+                isUpdated={isUpdated}
+                isFullscreen={isFullscreen}
+                onRefresh={reload}
+                onRemove={onRemove}
+            />
+            <LayoutItemContent loadingState={state} onRefresh={reload} data={data}>
+                {({data, width, height}) => {
+                    return <TreeChart width={width} height={height} data={data} onItemClick={onTypeClick} />;
+                }}
+            </LayoutItemContent>
+        </LayoutItemView>
+    );
+};
+
+export default memo(EntitiesByTypeViewFacet);

package/src/views/chartBased/ProfileStatsFacet.tsx

@@ -0,0 +1,54 @@
+import React, {memo, useState} from 'react';
+import {DashboardView, DatePeriod, DateRangeValue, getDateRangeOptions} from '@reltio/mdm-sdk';
+import {useReloadFacet, DateRangeEditor} from '@reltio/components';
+import LayoutItemView from '../../components/LayoutItemView/LayoutItemView';
+import LayoutItemHeader from '../../components/LayoutItemHeader/LayoutItemHeader';
+import LayoutItemContent from '../../components/LayoutItemContent/LayoutItemContent';
+import StatsChart from '../../components/StatsChart/StatsChart';
+import {useStatsRequest} from '../../hooks/useStatsRequest';
+import {getValuesDateRange} from '../../services/period';
+
+import {useStyles} from './styles';
+
+type Props = {
+    config: DashboardView;
+    onToggleFullscreen: (id: string) => void;
+    isUpdated?: boolean;
+    isFullscreen: boolean;
+    onRemove?: (id: string) => void;
+};
+
+const ProfileStatsFacet = ({config, onToggleFullscreen, isUpdated, isFullscreen, onRemove}: Props) => {
+    const styles = useStyles();
+
+    const {id, title} = config;
+    const [period, setPeriod] = useState<DatePeriod>(DateRangeValue.LAST_WEEK);
+    const {state, data, step, reload} = useStatsRequest(period);
+    useReloadFacet({state, reload});
+
+    return (
+        <LayoutItemView id={id}>
+            <LayoutItemHeader
+                title={title}
+                onToggleFullscreen={onToggleFullscreen}
+                isUpdated={isUpdated}
+                isFullscreen={isFullscreen}
+                onRefresh={reload}
+                onRemove={onRemove}
+            >
+                <DateRangeEditor
+                    values={period}
+                    options={getDateRangeOptions()}
+                    getValuesDateRange={getValuesDateRange}
+                    onChange={setPeriod}
+                    className={styles.periodSelector}
+                />
+            </LayoutItemHeader>
+            <LayoutItemContent loadingState={state} onRefresh={reload} data={data}>
+                {({data, width, height}) => <StatsChart data={data} width={width} height={height} step={step} />}
+            </LayoutItemContent>
+        </LayoutItemView>
+    );
+};
+
+export default memo(ProfileStatsFacet);