@reltio/dashboard 1.4.1584 → 1.4.1586-mui5

package/src/perspective/__tests__/helpers.specs.ts

@@ -0,0 +1,33 @@
+import {ViewStatus} from './../../types';
+import {createReltioLayout, getViewStatus} from '../helpers';
+
+describe('helpers tests', () => {
+    describe('createReltioLayout tests', () => {
+        it('should return Reltio layout for id', () => {
+            expect(createReltioLayout('testId')).toEqual({
+                x: 0,
+                y: Infinity,
+                width: 2,
+                height: 10,
+                minWidth: undefined,
+                minHeight: 10,
+                maxWidth: undefined,
+                maxHeight: undefined,
+                id: 'testId',
+                isStatic: false
+            });
+        });
+    });
+
+    describe('getViewStatus tests', () => {
+        it('should return ViewStatus.NEW if savedHash is undefined', () => {
+            expect(getViewStatus('hash', undefined)).toBe(ViewStatus.NEW);
+        });
+        it('should return ViewStatus.UPDATED if savedHash !== viewHash', () => {
+            expect(getViewStatus('hash', 'myHash')).toBe(ViewStatus.UPDATED);
+        });
+        it('should return ViewStatus.PERSISTED if savedHash === viewHash', () => {
+            expect(getViewStatus('hash', 'hash')).toBe(ViewStatus.PERSISTED);
+        });
+    });
+});

package/src/perspective/helpers.ts

@@ -0,0 +1,19 @@
+import {ViewStatus} from '../types';
+
+export const createReltioLayout = (id: string) => ({
+    x: 0,
+    y: Infinity,
+    width: 2,
+    height: 10,
+    minWidth: undefined,
+    minHeight: 10,
+    maxWidth: undefined,
+    maxHeight: undefined,
+    id,
+    isStatic: false
+});
+
+export const getViewStatus = (viewHash: string, savedHash?: string) => {
+    if (savedHash) return savedHash === viewHash ? ViewStatus.PERSISTED : ViewStatus.UPDATED;
+    return ViewStatus.NEW;
+};

package/src/perspective/index.tsx

@@ -0,0 +1,65 @@
+import React, {useCallback, useMemo} from 'react';
+import {Provider} from 'react-redux';
+import {Store} from 'redux';
+
+import {AdapterMoment} from '@mui/x-date-pickers/AdapterMoment';
+import createGenerateClassName from '@mui/styles/createGenerateClassName';
+import StylesProvider from '@mui/styles/StylesProvider';
+import ReactResizeDetector from 'react-resize-detector';
+
+import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
+import {ErrorPopup, ReloadFacetProvider, SearchFiltersContext, ViewIdContext} from '@reltio/components';
+import {promisifyCallback, convertOldDashboardConfig, DashboardPerspectiveConfig} from '@reltio/mdm-sdk';
+import DashboardPerspectiveView from './DashboardPerspectiveView';
+import {DashboardPerspectiveLegacyConfig} from '../types/DashboardPerspectiveConfig';
+import {DashboardSavedState} from '../types/DashboardSavedState';
+
+const generateClassName = createGenerateClassName({
+    productionPrefix: 'dashboardPerspective',
+    disableGlobal: true,
+    seed: 'clD'
+});
+
+type Props = {
+    config: DashboardPerspectiveConfig | DashboardPerspectiveLegacyConfig;
+    store: Store<unknown>;
+    onResize?: (width: number, height: number) => void;
+    saveState: (state: DashboardSavedState) => void;
+    getSavedState: (clb: (state: DashboardSavedState) => void) => void;
+};
+const emptyArray = [];
+const DashboardPerspective = ({config, store, onResize, saveState, getSavedState}: Props) => {
+    const getSavedStatePromisified: () => Promise<DashboardSavedState> = useCallback(promisifyCallback(getSavedState), [
+        getSavedState
+    ]);
+    const processedConfig = useMemo(() => convertOldDashboardConfig(config), [config]);
+
+    return (
+        <Provider store={store}>
+            <ViewIdContext.Provider value={processedConfig.id}>
+                <StylesProvider generateClassName={generateClassName}>
+                    <LocalizationProvider dateAdapter={AdapterMoment}>
+                        <SearchFiltersContext.Provider value={emptyArray}>
+                            <ReloadFacetProvider>
+                                <ReactResizeDetector
+                                    handleHeight
+                                    onResize={(width, height) => onResize?.(Math.floor(width), Math.floor(height))}
+                                />
+                                {processedConfig && (
+                                    <DashboardPerspectiveView
+                                        config={processedConfig}
+                                        saveState={saveState}
+                                        getSavedState={getSavedStatePromisified}
+                                    />
+                                )}
+                                <ErrorPopup />
+                            </ReloadFacetProvider>
+                        </SearchFiltersContext.Provider>
+                    </LocalizationProvider>
+                </StylesProvider>
+            </ViewIdContext.Provider>
+        </Provider>
+    );
+};
+
+export {DashboardPerspective};

package/src/perspective/styles.ts

@@ -0,0 +1,16 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    perspectiveView: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+        display: 'flex',
+        flexDirection: 'column'
+    }
+});

package/src/services/__tests__/facets.specs.ts

@@ -0,0 +1,42 @@
+import {DashboardConfigFilter, FilterOptions} from '@reltio/mdm-sdk';
+import {getFiltersForFacet} from '../facets';
+
+describe('facets tests', () => {
+    it('should work correctly getFilersForFacet', () => {
+        const attributeUri = 'configuration/entityTypes/Individual/attributes/Status';
+        const entityTypeUri = 'configuration/entityTypes/Individual';
+        const filters: DashboardConfigFilter[] = [
+            {
+                filter: FilterOptions.EQUALS,
+                fieldName: 'type',
+                values: [entityTypeUri]
+            },
+            {
+                filter: FilterOptions.EQUALS,
+                fieldName: 'test',
+                values: ['test']
+            }
+        ];
+
+        expect(getFiltersForFacet(attributeUri, filters)).toEqual([
+            {
+                filter: FilterOptions.EQUALS,
+                fieldName: 'type',
+                values: [entityTypeUri]
+            },
+            {
+                filter: FilterOptions.EQUALS,
+                fieldName: 'test',
+                values: ['test']
+            }
+        ]);
+
+        expect(getFiltersForFacet(attributeUri, [])).toEqual([
+            {
+                filter: FilterOptions.EQUALS,
+                fieldName: 'type',
+                values: [entityTypeUri]
+            }
+        ]);
+    });
+});

package/src/services/__tests__/filters.specs.ts

@@ -0,0 +1,60 @@
+import {buildQuery} from '../filters';
+
+describe('filters tests', () => {
+    const filters = [
+        {
+            filter: 'equals',
+            fieldName: 'type',
+            values: ['HCP']
+        }
+    ];
+
+    it('should work with empty filters', () => {
+        const query = buildQuery([], undefined, false, undefined);
+        expect(query).toBe('');
+    });
+
+    it('should work with simple filters', () => {
+        const query = buildQuery(filters);
+        expect(query).toBe("filter=equals(type,'HCP')");
+    });
+
+    it('should work with range filters', () => {
+        const filters = [
+            {
+                fieldName: 'attributes.Int',
+                filter: 'range',
+                values: ['1', '2']
+            }
+        ];
+        const query = buildQuery(filters);
+        expect(query).toBe('filter=range(attributes.Int,1,2)');
+    });
+
+    it('should work with hasAll filters', () => {
+        const filters = [
+            {
+                fieldName: 'attributes.Int',
+                filter: 'hasAll',
+                values: ['1', '2']
+            }
+        ];
+        const query = buildQuery(filters);
+        expect(query).toBe("filter=equals(attributes.Int,'1') and equals(attributes.Int,'2')");
+    });
+
+    it('should support globalFilter', () => {
+        const query = buildQuery(filters, 'globalFilter', false, undefined);
+        expect(query).toBe("filter=(equals(type,'HCP')) and (globalFilter)");
+    });
+
+    it('should support searchByOv', () => {
+        const query = buildQuery(filters, undefined, true, undefined);
+        expect(query).toBe("filter=equals(type,'HCP')&options=searchByOv");
+    });
+
+    it('should support activityFilter', () => {
+        const query = buildQuery(filters, undefined, false, 'active');
+        expect(query).toBe("filter=equals(type,'HCP')&activeness=active");
+    });
+});

package/src/services/__tests__/period.test.ts

@@ -0,0 +1,33 @@
+import {DateRangeValue} from '@reltio/mdm-sdk';
+
+import {getDashboardDateRangeByValue} from '../period';
+
+describe('getDashboardDateRangeByValue', () => {
+    const currentTime = new Date('06-06-2022').getTime();
+    beforeAll(() => {
+        jest.spyOn(Date, 'now').mockReturnValue(currentTime);
+    });
+
+    it('should work with all actual date range placeholder', () => {
+        expect(getDashboardDateRangeByValue(DateRangeValue.LAST_DAY)).toEqual([
+            new Date('06-05-2022').getTime(),
+            currentTime
+        ]);
+        expect(getDashboardDateRangeByValue(DateRangeValue.LAST_WEEK)).toEqual([
+            new Date('05-31-2022').getTime(),
+            currentTime
+        ]);
+        expect(getDashboardDateRangeByValue(DateRangeValue.LAST_MONTH)).toEqual([
+            new Date('05-06-2022').getTime(),
+            currentTime
+        ]);
+        expect(getDashboardDateRangeByValue(DateRangeValue.LAST_6MONTHS)).toEqual([
+            new Date('12-06-2021').getTime(),
+            currentTime
+        ]);
+        expect(getDashboardDateRangeByValue(DateRangeValue.LAST_YEAR)).toEqual([
+            new Date('06-06-2021').getTime(),
+            currentTime
+        ]);
+    });
+});

package/src/services/__tests__/stats.test.ts

@@ -0,0 +1,319 @@
+import {calibrateStatsData, getChartDomain} from '../stats';
+import {PeriodStep} from '../../types/PeriodStep';
+import moment from 'moment';
+
+describe('stats services tests', () => {
+    describe('calibrateStatsData', () => {
+        it('should group data by period step', () => {
+            const statsData = [
+                {
+                    total: 157,
+                    event: 'created',
+                    data: [
+                        {
+                            term: '2021-04-05T08',
+                            count: 115
+                        },
+                        {
+                            term: '2021-04-05T09',
+                            count: 41
+                        },
+                        {
+                            term: '2021-04-05T10',
+                            count: 0
+                        },
+                        {
+                            term: '2021-04-05T11',
+                            count: 0
+                        },
+                        {
+                            term: '2021-04-05T12',
+                            count: 0
+                        },
+                        {
+                            term: '2021-04-05T13',
+                            count: 0
+                        },
+                        {
+                            term: '2021-04-05T14',
+                            count: 0
+                        },
+                        {
+                            term: '2021-04-05T15',
+                            count: 0
+                        },
+                        {
+                            term: '2021-04-05T16',
+                            count: 0
+                        },
+                        {
+                            term: '2021-04-05T17',
+                            count: 0
+                        },
+                        {
+                            term: '2021-04-05T18',
+                            count: 0
+                        },
+                        {
+                            term: '2021-04-05T19',
+                            count: 0
+                        },
+                        {
+                            term: '2021-04-05T20',
+                            count: 0
+                        },
+                        {
+                            term: '2021-04-05T21',
+                            count: 0
+                        },
+                        {
+                            term: '2021-04-05T22',
+                            count: 0
+                        },
+                        {
+                            term: '2021-04-05T23',
+                            count: 0
+                        },
+                        {
+                            term: '2021-04-06T00',
+                            count: 0
+                        },
+                        {
+                            term: '2021-04-06T01',
+                            count: 1
+                        }
+                    ]
+                }
+            ];
+            const result = [
+                {
+                    total: 157,
+                    event: 'created',
+                    data: [
+                        {
+                            term: moment('2021-04-05T00').valueOf(),
+                            count: 156
+                        },
+                        {
+                            term: moment('2021-04-06T00').valueOf(),
+                            count: 1
+                        }
+                    ]
+                }
+            ];
+            expect(calibrateStatsData(PeriodStep.DAY, statsData)).toEqual(result);
+        });
+
+        it('should interpolate data', () => {
+            const statsData = [
+                {
+                    total: 157,
+                    event: 'created',
+                    data: [
+                        {
+                            term: '2021-04-05T08',
+                            count: 115
+                        },
+                        {
+                            term: '2021-04-05T09',
+                            count: 41
+                        },
+                        {
+                            term: '2021-04-06T01',
+                            count: 1
+                        }
+                    ]
+                }
+            ];
+            const result = [
+                {
+                    total: 157,
+                    event: 'created',
+                    data: [
+                        {
+                            term: moment('2021-04-05T08').valueOf(),
+                            count: 115
+                        },
+                        {
+                            term: moment('2021-04-05T09').valueOf(),
+                            count: 41
+                        },
+                        {
+                            term: moment('2021-04-05T10').valueOf(),
+                            count: 0
+                        },
+                        {
+                            term: moment('2021-04-05T11').valueOf(),
+                            count: 0
+                        },
+                        {
+                            term: moment('2021-04-05T12').valueOf(),
+                            count: 0
+                        },
+                        {
+                            term: moment('2021-04-05T13').valueOf(),
+                            count: 0
+                        },
+                        {
+                            term: moment('2021-04-05T14').valueOf(),
+                            count: 0
+                        },
+                        {
+                            term: moment('2021-04-05T15').valueOf(),
+                            count: 0
+                        },
+                        {
+                            term: moment('2021-04-05T16').valueOf(),
+                            count: 0
+                        },
+                        {
+                            term: moment('2021-04-05T17').valueOf(),
+                            count: 0
+                        },
+                        {
+                            term: moment('2021-04-05T18').valueOf(),
+                            count: 0
+                        },
+                        {
+                            term: moment('2021-04-05T19').valueOf(),
+                            count: 0
+                        },
+                        {
+                            term: moment('2021-04-05T20').valueOf(),
+                            count: 0
+                        },
+                        {
+                            term: moment('2021-04-05T21').valueOf(),
+                            count: 0
+                        },
+                        {
+                            term: moment('2021-04-05T22').valueOf(),
+                            count: 0
+                        },
+                        {
+                            term: moment('2021-04-05T23').valueOf(),
+                            count: 0
+                        },
+                        {
+                            term: moment('2021-04-06T00').valueOf(),
+                            count: 0
+                        },
+                        {
+                            term: moment('2021-04-06T01').valueOf(),
+                            count: 1
+                        }
+                    ]
+                }
+            ];
+            expect(calibrateStatsData(PeriodStep.HOUR, statsData)).toEqual(result);
+        });
+
+        it('should interpolate data correctly even for interval including moment of changing the clocks in summer/winter time', () => {
+            const statsData = [
+                {
+                    total: 2,
+                    event: 'created',
+                    data: [
+                        {
+                            term: '2022-10-30T08',
+                            count: 0
+                        },
+                        {
+                            term: '2022-10-30T09',
+                            count: 1
+                        },
+                        {
+                            term: '2022-11-01T02',
+                            count: 1
+                        }
+                    ]
+                }
+            ];
+            const result = [
+                {
+                    total: 2,
+                    event: 'created',
+                    data: [
+                        {
+                            term: moment('2022-10-30T00').valueOf(),
+                            count: 1
+                        },
+                        {
+                            term: moment('2022-10-31T00').valueOf(),
+                            count: 0
+                        },
+                        {
+                            term: moment('2022-11-01T00').valueOf(),
+                            count: 1
+                        }
+                    ]
+                }
+            ];
+            expect(calibrateStatsData(PeriodStep.DAY, statsData)).toEqual(result);
+        });
+    });
+
+    describe('getChartDomain', () => {
+        const tickCount = 8;
+        it('should return correct domain if difference between min and max count > tickCount', () => {
+            const statsData = [
+                {
+                    event: 'event',
+                    total: 1,
+                    data: [
+                        {term: 'term', count: 0},
+                        {term: 'term', count: 1}
+                    ]
+                },
+                {
+                    event: 'event2',
+                    total: 108,
+                    data: [
+                        {term: 'term', count: 107},
+                        {term: 'term', count: 1}
+                    ]
+                }
+            ];
+
+            expect(getChartDomain(statsData, tickCount)).toEqual([0, 'auto']);
+        });
+
+        it('should return correct domain if difference between min and max count < tickCount', () => {
+            const statsData = [
+                {
+                    event: 'event',
+                    total: 7,
+                    data: [
+                        {term: 'term', count: 5},
+                        {term: 'term', count: 2}
+                    ]
+                },
+                {
+                    event: 'event2',
+                    total: 3,
+                    data: [
+                        {term: 'term', count: 2},
+                        {term: 'term', count: 1}
+                    ]
+                }
+            ];
+
+            expect(getChartDomain(statsData, tickCount)).toEqual([0, tickCount - 1]);
+        });
+
+        it('should return correct domain if difference between min and max count === tickCount', () => {
+            const statsData = [
+                {
+                    event: 'event',
+                    total: 8,
+                    data: [
+                        {term: 'term', count: 8},
+                        {term: 'term', count: 0}
+                    ]
+                }
+            ];
+
+            expect(getChartDomain(statsData, tickCount)).toEqual([0, 'auto']);
+        });
+    });
+});

package/src/services/entityTypes.ts

@@ -0,0 +1,66 @@
+import {
+    getEntityType,
+    getInheritancePath,
+    getLastUriPart,
+    isAvailableEntityType,
+    Metadata,
+    wrapInArrayIfNeeded
+} from '@reltio/mdm-sdk';
+import {curry, filter, last, map, pipe, prop, either} from 'ramda';
+import {ChartData} from '@reltio/components';
+import {createEntityTypeFilter} from './filters';
+
+const typeNameToUri = (typeName: string): string => `configuration/entityTypes/${typeName}`;
+const getUriFromTypeFacet = pipe(prop('group'), typeNameToUri);
+
+export const resolveTypeFacetsLabels = curry((metadata: Metadata, typeFacets: ChartData[]): ChartData[] => {
+    return typeFacets.map((facet) => {
+        const typeUri = getUriFromTypeFacet(facet);
+        return {
+            ...facet,
+            label: getEntityType(metadata, typeUri).label
+        };
+    });
+});
+
+export const getParentEntityTypeFacets = curry((metadata: Metadata, typeFacets: ChartData[]): ChartData[] => {
+    const getParentTypeForFacet = pipe(
+        getUriFromTypeFacet,
+        getInheritancePath(metadata),
+        map(getEntityType(metadata)),
+        filter(isAvailableEntityType),
+        last
+    );
+    const parentsMap = typeFacets.reduce((acc, facet) => {
+        const parentType = getParentTypeForFacet(facet);
+        if (parentType) {
+            const parentName = getLastUriPart(parentType.uri);
+            return {
+                ...acc,
+                [parentName]: (acc[parentName] || 0) + facet.value
+            };
+        } else {
+            return acc;
+        }
+    }, {});
+    return Object.entries(parentsMap).map(([key, value]) => ({
+        group: key,
+        label: key,
+        value
+    })) as ChartData[];
+});
+
+export const entityTypeNameToFilters = pipe(typeNameToUri, createEntityTypeFilter, wrapInArrayIfNeeded);
+
+const getEntityTypeName = pipe(prop('uri'), getLastUriPart);
+
+const findTypeFacetByName = curry((typeFacets: ChartData[], name: string): ChartData => {
+    return typeFacets.find((facet) => facet.group === name);
+});
+
+const createEmptyEntityTypeFacet = (name: string): ChartData => ({label: name, group: name, value: 0});
+
+export const addEmptyEntityTypesFacets = curry(({entityTypes}: Metadata, typeFacets: ChartData[]): ChartData[] => {
+    const getFacet = pipe(getEntityTypeName, either(findTypeFacetByName(typeFacets), createEmptyEntityTypeFacet));
+    return entityTypes.filter(isAvailableEntityType).map(getFacet);
+});