piral-dashboard 1.0.0-pre.2296 → 1.0.1-beta.5640
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +34 -10
- package/esm/Dashboard.d.ts +5 -1
- package/esm/Dashboard.js +13 -10
- package/esm/Dashboard.js.map +1 -1
- package/esm/actions.js +2 -3
- package/esm/actions.js.map +1 -1
- package/esm/components.d.ts +3 -4
- package/esm/components.js +2 -2
- package/esm/components.js.map +1 -1
- package/esm/create.d.ts +6 -12
- package/esm/create.js +16 -34
- package/esm/create.js.map +1 -1
- package/esm/default.js +2 -2
- package/esm/default.js.map +1 -1
- package/esm/helpers.d.ts +11 -0
- package/esm/helpers.js +27 -0
- package/esm/helpers.js.map +1 -0
- package/esm/types.d.ts +26 -4
- package/lib/Dashboard.d.ts +5 -1
- package/lib/Dashboard.js +17 -13
- package/lib/Dashboard.js.map +1 -1
- package/lib/actions.js +3 -4
- package/lib/actions.js.map +1 -1
- package/lib/components.d.ts +3 -4
- package/lib/components.js +3 -3
- package/lib/components.js.map +1 -1
- package/lib/create.d.ts +6 -12
- package/lib/create.js +19 -37
- package/lib/create.js.map +1 -1
- package/lib/default.js +6 -4
- package/lib/default.js.map +1 -1
- package/lib/helpers.d.ts +11 -0
- package/lib/helpers.js +34 -0
- package/lib/helpers.js.map +1 -0
- package/lib/index.js +1 -1
- package/lib/types.d.ts +26 -4
- package/package.json +28 -8
- package/piral-dashboard.min.js +1 -0
- package/src/Dashboard.test.tsx +14 -14
- package/src/Dashboard.tsx +5 -1
- package/src/actions.test.ts +7 -6
- package/src/components.tsx +2 -6
- package/src/create.test.ts +7 -3
- package/src/create.ts +17 -50
- package/src/default.test.tsx +11 -11
- package/src/helpers.ts +54 -0
- package/src/types.ts +28 -4
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
[](https://piral.io)
|
|
2
2
|
|
|
3
|
-
# [Piral Dashboard](https://piral.io) · [](https://github.com/smapiot/piral/blob/
|
|
3
|
+
# [Piral Dashboard](https://piral.io) · [](https://github.com/smapiot/piral/blob/main/LICENSE) [](https://www.npmjs.com/package/piral-dashboard) [](https://jestjs.io) [](https://gitter.im/piral-io/community)
|
|
4
4
|
|
|
5
5
|
This is plugin that only has a peer dependency to `piral-core`. What `piral-dashboard` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
|
|
6
6
|
|
|
@@ -10,6 +10,12 @@ Many portal and tool applications come with a dashboard view that easily allows
|
|
|
10
10
|
|
|
11
11
|
Alternatives: Use extensions to define this generically without the need for a plugin. Place each dashboard in its own extension slot registering components dynamically for these.
|
|
12
12
|
|
|
13
|
+
## Video
|
|
14
|
+
|
|
15
|
+
We also have a video for this plugin:
|
|
16
|
+
|
|
17
|
+
@[youtube](https://youtu.be/ycZLPRaoLAQ)
|
|
18
|
+
|
|
13
19
|
## Documentation
|
|
14
20
|
|
|
15
21
|
The following functions are brought to the Pilet API.
|
|
@@ -83,7 +89,7 @@ const instance = createInstance({
|
|
|
83
89
|
});
|
|
84
90
|
```
|
|
85
91
|
|
|
86
|
-
Via the options the `defaultPreferences` and the global
|
|
92
|
+
Via the options the `defaultPreferences` and the global/initially available `tiles` can be defined.
|
|
87
93
|
|
|
88
94
|
Consider for example:
|
|
89
95
|
|
|
@@ -110,17 +116,35 @@ const instance = createInstance({
|
|
|
110
116
|
});
|
|
111
117
|
```
|
|
112
118
|
|
|
113
|
-
|
|
119
|
+
By default, the dashboard is located at the homepage (`/`). You can change this via the `routes` setting:
|
|
114
120
|
|
|
115
|
-
```
|
|
116
|
-
|
|
121
|
+
```ts
|
|
122
|
+
const instance = createInstance({
|
|
123
|
+
// important part
|
|
124
|
+
plugins: [createDashboardApi({
|
|
125
|
+
routes: ['/dashboard'],
|
|
126
|
+
})],
|
|
127
|
+
// ...
|
|
128
|
+
});
|
|
117
129
|
```
|
|
118
130
|
|
|
119
|
-
|
|
131
|
+
Or alternatively, don't use any route for it and just reference the `Dashboard` component on any page or within the layout.
|
|
132
|
+
|
|
133
|
+
```ts
|
|
134
|
+
// for the instance
|
|
135
|
+
const instance = createInstance({
|
|
136
|
+
// important part
|
|
137
|
+
plugins: [createDashboardApi({
|
|
138
|
+
routes: [],
|
|
139
|
+
})],
|
|
140
|
+
// ...
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
// in some component, maybe even in the layout
|
|
145
|
+
import { Dashboard } from 'piral-dashboard';
|
|
120
146
|
|
|
121
|
-
|
|
122
|
-
<SetRoute path="/dashboard1" component={props => <Dashboard {...props} filter={tile => tile.preferences.category === 'self'} />} />
|
|
123
|
-
<SetRoute path="/dashboard2" component={props => <Dashboard {...props} filter={tile => tile.preferences.category === 'group'} />} />
|
|
147
|
+
// then use: <Dashboard />
|
|
124
148
|
```
|
|
125
149
|
|
|
126
150
|
### Customizing
|
package/esm/Dashboard.d.ts
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { RouteComponentProps } from 'react-router-dom';
|
|
2
|
+
import type { RouteComponentProps } from 'react-router-dom';
|
|
3
3
|
import { TileRegistration } from './types';
|
|
4
4
|
export interface DashboardProps extends RouteComponentProps {
|
|
5
5
|
filter?(tile: TileRegistration): boolean;
|
|
6
6
|
}
|
|
7
|
+
/**
|
|
8
|
+
* The dashboard component. Integrate this as a page or in a component
|
|
9
|
+
* where dashboard information (tiles) should be shown.
|
|
10
|
+
*/
|
|
7
11
|
export declare const Dashboard: React.FC<DashboardProps>;
|
package/esm/Dashboard.js
CHANGED
|
@@ -1,19 +1,22 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
2
1
|
import * as React from 'react';
|
|
3
2
|
import { useGlobalState } from 'piral-core';
|
|
4
3
|
import { PiralDashboardContainer, PiralDashboardTile } from './components';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
4
|
+
/**
|
|
5
|
+
* The dashboard component. Integrate this as a page or in a component
|
|
6
|
+
* where dashboard information (tiles) should be shown.
|
|
7
|
+
*/
|
|
8
|
+
export const Dashboard = (props) => {
|
|
9
|
+
const tiles = useGlobalState((s) => s.registry.tiles);
|
|
10
|
+
const { filter = () => true } = props;
|
|
11
|
+
const children = Object.keys(tiles)
|
|
12
|
+
.filter((tile) => filter(tiles[tile]))
|
|
13
|
+
.map((tile) => {
|
|
14
|
+
const { component: Component, preferences } = tiles[tile];
|
|
15
|
+
const { initialColumns = 1, initialRows = 1, resizable = false } = preferences;
|
|
13
16
|
return (React.createElement(PiralDashboardTile, { key: tile, columns: initialColumns, rows: initialRows, resizable: resizable, meta: preferences },
|
|
14
17
|
React.createElement(Component, { columns: initialColumns, rows: initialRows })));
|
|
15
18
|
});
|
|
16
|
-
return React.createElement(PiralDashboardContainer,
|
|
19
|
+
return React.createElement(PiralDashboardContainer, Object.assign({}, props, { children: children }));
|
|
17
20
|
};
|
|
18
21
|
Dashboard.displayName = 'Dashboard';
|
|
19
22
|
//# sourceMappingURL=Dashboard.js.map
|
package/esm/Dashboard.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dashboard.js","sourceRoot":"","sources":["../src/Dashboard.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dashboard.js","sourceRoot":"","sources":["../src/Dashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAO3E;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,KAAK,EAAE,EAAE;IAC3D,MAAM,KAAK,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,EAAE,MAAM,GAAG,GAAG,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC;IACtC,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;SAChC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;SACrC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACZ,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;QAC1D,MAAM,EAAE,cAAc,GAAG,CAAC,EAAE,WAAW,GAAG,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,WAAW,CAAC;QAC/E,OAAO,CACL,oBAAC,kBAAkB,IACjB,GAAG,EAAE,IAAI,EACT,OAAO,EAAE,cAAc,EACvB,IAAI,EAAE,WAAW,EACjB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,WAAW;YACjB,oBAAC,SAAS,IAAC,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,WAAW,GAAI,CACtC,CACtB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEL,OAAO,oBAAC,uBAAuB,oBAAK,KAAK,IAAE,QAAQ,EAAE,QAAQ,IAAI,CAAC;AACpE,CAAC,CAAC;AACF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}
|
package/esm/actions.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
2
1
|
import { withKey, withoutKey } from 'piral-core';
|
|
3
2
|
export function registerTile(ctx, name, value) {
|
|
4
|
-
ctx.dispatch(
|
|
3
|
+
ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { registry: Object.assign(Object.assign({}, state.registry), { tiles: withKey(state.registry.tiles, name, value) }) })));
|
|
5
4
|
}
|
|
6
5
|
export function unregisterTile(ctx, name) {
|
|
7
|
-
ctx.dispatch(
|
|
6
|
+
ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { registry: Object.assign(Object.assign({}, state.registry), { tiles: withoutKey(state.registry.tiles, name) }) })));
|
|
8
7
|
}
|
|
9
8
|
//# sourceMappingURL=actions.js.map
|
package/esm/actions.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"actions.js","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"actions.js","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAsB,MAAM,YAAY,CAAC;AAGrE,MAAM,UAAU,YAAY,CAAC,GAAuB,EAAE,IAAY,EAAE,KAAuB;IACzF,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,QAAQ,kCACH,KAAK,CAAC,QAAQ,KACjB,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,OAEnD,CAAC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,GAAuB,EAAE,IAAY;IAClE,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,QAAQ,kCACH,KAAK,CAAC,QAAQ,KACjB,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,OAE/C,CAAC,CAAC;AACN,CAAC"}
|
package/esm/components.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const PiralDashboardTile: React.ComponentType<DashboardTileProps>;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const PiralDashboardContainer: import("react").ComponentType<import("./types").DashboardContainerProps>;
|
|
3
|
+
export declare const PiralDashboardTile: import("react").ComponentType<import("./types").DashboardTileProps>;
|
package/esm/components.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { getPiralComponent } from 'piral-core';
|
|
2
|
-
export
|
|
3
|
-
export
|
|
2
|
+
export const PiralDashboardContainer = getPiralComponent('DashboardContainer');
|
|
3
|
+
export const PiralDashboardTile = getPiralComponent('DashboardTile');
|
|
4
4
|
//# sourceMappingURL=components.js.map
|
package/esm/components.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE/C,MAAM,CAAC,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;AAC/E,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,eAAe,CAAC,CAAC"}
|
package/esm/create.d.ts
CHANGED
|
@@ -1,20 +1,14 @@
|
|
|
1
|
-
import { ComponentType } from 'react';
|
|
2
1
|
import { PiralPlugin } from 'piral-core';
|
|
3
|
-
import { PiletDashboardApi, TilePreferences
|
|
4
|
-
export interface InitialTile {
|
|
5
|
-
/**
|
|
6
|
-
* Defines the component to be used for the tile.
|
|
7
|
-
*/
|
|
8
|
-
component: ComponentType<BareTileComponentProps>;
|
|
9
|
-
/**
|
|
10
|
-
* Optionally sets the preferences for the tile.
|
|
11
|
-
*/
|
|
12
|
-
preferences?: TilePreferences;
|
|
13
|
-
}
|
|
2
|
+
import { InitialTile, PiletDashboardApi, TilePreferences } from './types';
|
|
14
3
|
/**
|
|
15
4
|
* Available configuration options for the dashboard plugin.
|
|
16
5
|
*/
|
|
17
6
|
export interface DashboardConfig {
|
|
7
|
+
/**
|
|
8
|
+
* Sets the routes where a dashboard should be displayed.
|
|
9
|
+
* @default ['/']
|
|
10
|
+
*/
|
|
11
|
+
routes?: Array<string>;
|
|
18
12
|
/**
|
|
19
13
|
* Sets the tiles to be given by the app shell.
|
|
20
14
|
* @default []
|
package/esm/create.js
CHANGED
|
@@ -1,53 +1,35 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
2
1
|
import * as actions from './actions';
|
|
3
|
-
import { buildName, withApi } from 'piral-core';
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
if (customPreferences === void 0) { customPreferences = {}; }
|
|
7
|
-
return __assign(__assign({}, defaultPreferences), customPreferences);
|
|
8
|
-
}
|
|
9
|
-
function getTiles(items, defaultPreferences) {
|
|
10
|
-
var tiles = {};
|
|
11
|
-
var i = 0;
|
|
12
|
-
for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
|
|
13
|
-
var _a = items_1[_i], component = _a.component, preferences = _a.preferences;
|
|
14
|
-
tiles["global-" + i++] = {
|
|
15
|
-
pilet: undefined,
|
|
16
|
-
component: component,
|
|
17
|
-
preferences: getPreferences(defaultPreferences, preferences),
|
|
18
|
-
};
|
|
19
|
-
}
|
|
20
|
-
return tiles;
|
|
21
|
-
}
|
|
2
|
+
import { buildName, withApi, withRootExtension, withAll } from 'piral-core';
|
|
3
|
+
import { Dashboard } from './Dashboard';
|
|
4
|
+
import { getPreferences, getTiles, withRoutes, withTiles } from './helpers';
|
|
22
5
|
/**
|
|
23
6
|
* Creates the Pilet API extension for activating dashboard support.
|
|
24
7
|
*/
|
|
25
|
-
export function createDashboardApi(config) {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
return function (context) {
|
|
8
|
+
export function createDashboardApi(config = {}) {
|
|
9
|
+
const { tiles = [], defaultPreferences = {}, routes = ['/'] } = config;
|
|
10
|
+
return (context) => {
|
|
29
11
|
context.defineActions(actions);
|
|
30
|
-
context.dispatch(
|
|
31
|
-
return
|
|
32
|
-
|
|
33
|
-
|
|
12
|
+
context.dispatch(withAll(withTiles(getTiles(tiles, defaultPreferences)), withRootExtension('piral-dashboard', Dashboard), withRoutes(routes)));
|
|
13
|
+
return (api, target) => {
|
|
14
|
+
const pilet = target.name;
|
|
15
|
+
let next = 0;
|
|
34
16
|
return {
|
|
35
|
-
registerTile
|
|
17
|
+
registerTile(name, arg, preferences) {
|
|
36
18
|
if (typeof name !== 'string') {
|
|
37
19
|
preferences = arg;
|
|
38
20
|
arg = name;
|
|
39
21
|
name = next++;
|
|
40
22
|
}
|
|
41
|
-
|
|
23
|
+
const id = buildName(pilet, name);
|
|
42
24
|
context.registerTile(id, {
|
|
43
|
-
pilet
|
|
25
|
+
pilet,
|
|
44
26
|
component: withApi(context, arg, api, 'tile'),
|
|
45
27
|
preferences: getPreferences(defaultPreferences, preferences),
|
|
46
28
|
});
|
|
47
|
-
return
|
|
29
|
+
return () => api.unregisterTile(name);
|
|
48
30
|
},
|
|
49
|
-
unregisterTile
|
|
50
|
-
|
|
31
|
+
unregisterTile(name) {
|
|
32
|
+
const id = buildName(pilet, name);
|
|
51
33
|
context.unregisterTile(id);
|
|
52
34
|
},
|
|
53
35
|
};
|
package/esm/create.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAe,iBAAiB,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACzF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAuB5E;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,SAA0B,EAAE;IAC7D,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,kBAAkB,GAAG,EAAE,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,MAAM,CAAC;IAEvE,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE/B,OAAO,CAAC,QAAQ,CACd,OAAO,CACL,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAC9C,iBAAiB,CAAC,iBAAiB,EAAE,SAAS,CAAC,EAC/C,UAAU,CAAC,MAAM,CAAC,CACnB,CACF,CAAC;QAEF,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;YACrB,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC;YAC1B,IAAI,IAAI,GAAG,CAAC,CAAC;YAEb,OAAO;gBACL,YAAY,CAAC,IAAI,EAAE,GAAG,EAAE,WAAY;oBAClC,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;wBAC5B,WAAW,GAAG,GAAG,CAAC;wBAClB,GAAG,GAAG,IAAI,CAAC;wBACX,IAAI,GAAG,IAAI,EAAE,CAAC;qBACf;oBAED,MAAM,EAAE,GAAG,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;oBAClC,OAAO,CAAC,YAAY,CAAC,EAAE,EAAE;wBACvB,KAAK;wBACL,SAAS,EAAE,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC;wBAC7C,WAAW,EAAE,cAAc,CAAC,kBAAkB,EAAE,WAAW,CAAC;qBAC7D,CAAC,CAAC;oBACH,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;gBACxC,CAAC;gBACD,cAAc,CAAC,IAAI;oBACjB,MAAM,EAAE,GAAG,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;oBAClC,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;gBAC7B,CAAC;aACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}
|
package/esm/default.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ExtensionSlot, defaultRender } from 'piral-core';
|
|
3
|
-
export
|
|
4
|
-
export
|
|
3
|
+
export const DefaultContainer = (props) => (React.createElement(ExtensionSlot, { name: "dashboard", params: props, empty: () => defaultRender(props.children, 'default_dashboard') }));
|
|
4
|
+
export const DefaultTile = (props) => defaultRender(props.children);
|
|
5
5
|
//# sourceMappingURL=default.js.map
|
package/esm/default.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default.js","sourceRoot":"","sources":["../src/default.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAG1D,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"default.js","sourceRoot":"","sources":["../src/default.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAG1D,MAAM,CAAC,MAAM,gBAAgB,GAAsC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC5E,oBAAC,aAAa,IAAC,IAAI,EAAC,WAAW,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,mBAAmB,CAAC,GAAI,CACnH,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAiC,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC"}
|
package/esm/helpers.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Dict, GlobalState } from 'piral-core';
|
|
2
|
+
import { InitialTile, TilePreferences, TileRegistration } from './types';
|
|
3
|
+
export declare function getPreferences(defaultPreferences: TilePreferences, customPreferences?: TilePreferences): {
|
|
4
|
+
initialColumns?: number;
|
|
5
|
+
initialRows?: number;
|
|
6
|
+
resizable?: boolean;
|
|
7
|
+
customProperties?: string[];
|
|
8
|
+
};
|
|
9
|
+
export declare function getTiles(items: Array<InitialTile>, defaultPreferences: TilePreferences): Dict<TileRegistration>;
|
|
10
|
+
export declare function withTiles(tiles: Dict<TileRegistration>): (state: GlobalState) => GlobalState;
|
|
11
|
+
export declare function withRoutes(routes: Array<string>): (state: GlobalState) => GlobalState;
|
package/esm/helpers.js
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { DefaultTile, DefaultContainer } from './default';
|
|
2
|
+
import { Dashboard } from './Dashboard';
|
|
3
|
+
export function getPreferences(defaultPreferences, customPreferences = {}) {
|
|
4
|
+
return Object.assign(Object.assign({}, defaultPreferences), customPreferences);
|
|
5
|
+
}
|
|
6
|
+
export function getTiles(items, defaultPreferences) {
|
|
7
|
+
const tiles = {};
|
|
8
|
+
let i = 0;
|
|
9
|
+
for (const { component, preferences } of items) {
|
|
10
|
+
tiles[`global-${i++}`] = {
|
|
11
|
+
pilet: undefined,
|
|
12
|
+
component,
|
|
13
|
+
preferences: getPreferences(defaultPreferences, preferences),
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
return tiles;
|
|
17
|
+
}
|
|
18
|
+
export function withTiles(tiles) {
|
|
19
|
+
return (state) => (Object.assign(Object.assign({}, state), { components: Object.assign({ DashboardTile: DefaultTile, DashboardContainer: DefaultContainer }, state.components), registry: Object.assign(Object.assign({}, state.registry), { tiles }) }));
|
|
20
|
+
}
|
|
21
|
+
export function withRoutes(routes) {
|
|
22
|
+
return (state) => (Object.assign(Object.assign({}, state), { routes: Object.assign(Object.assign({}, state.routes), routes.reduce((newRoutes, route) => {
|
|
23
|
+
newRoutes[route] = Dashboard;
|
|
24
|
+
return newRoutes;
|
|
25
|
+
}, {})) }));
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=helpers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,MAAM,UAAU,cAAc,CAAC,kBAAmC,EAAE,oBAAqC,EAAE;IACzG,uCACK,kBAAkB,GAClB,iBAAiB,EACpB;AACJ,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,KAAyB,EAAE,kBAAmC;IACrF,MAAM,KAAK,GAA2B,EAAE,CAAC;IACzC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEV,KAAK,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,KAAK,EAAE;QAC9C,KAAK,CAAC,UAAU,CAAC,EAAE,EAAE,CAAC,GAAG;YACvB,KAAK,EAAE,SAAS;YAChB,SAAS;YACT,WAAW,EAAE,cAAc,CAAC,kBAAkB,EAAE,WAAW,CAAC;SAC7D,CAAC;KACH;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,KAA6B;IACrD,OAAO,CAAC,KAAkB,EAAe,EAAE,CAAC,iCACvC,KAAK,KACR,UAAU,kBACR,aAAa,EAAE,WAAW,EAC1B,kBAAkB,EAAE,gBAAgB,IACjC,KAAK,CAAC,UAAU,GAErB,QAAQ,kCACH,KAAK,CAAC,QAAQ,KACjB,KAAK,OAEP,CAAC;AACL,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,MAAqB;IAC9C,OAAO,CAAC,KAAkB,EAAe,EAAE,CAAC,iCACvC,KAAK,KACR,MAAM,kCACD,KAAK,CAAC,MAAM,GACZ,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE;YACpC,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;YAC7B,OAAO,SAAS,CAAC;QACnB,CAAC,EAAE,EAAE,CAAC,KAER,CAAC;AACL,CAAC"}
|
package/esm/types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ComponentType } from 'react';
|
|
2
|
-
import { RouteComponentProps } from 'react-router-dom';
|
|
3
|
-
import { Dict, WrappedComponent, BaseComponentProps, AnyComponent, BaseRegistration, RegistrationDisposer } from 'piral-core';
|
|
1
|
+
import type { ComponentType, ReactNode } from 'react';
|
|
2
|
+
import type { RouteComponentProps } from 'react-router-dom';
|
|
3
|
+
import type { Dict, WrappedComponent, BaseComponentProps, AnyComponent, BaseRegistration, RegistrationDisposer } from 'piral-core';
|
|
4
4
|
declare module 'piral-core/lib/types/custom' {
|
|
5
5
|
interface PiletCustomApi extends PiletDashboardApi {
|
|
6
6
|
}
|
|
@@ -39,7 +39,21 @@ declare module 'piral-core/lib/types/custom' {
|
|
|
39
39
|
DashboardTile: ComponentType<DashboardTileProps>;
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
|
+
export interface InitialTile {
|
|
43
|
+
/**
|
|
44
|
+
* Defines the component to be used for the tile.
|
|
45
|
+
*/
|
|
46
|
+
component: ComponentType<BareTileComponentProps>;
|
|
47
|
+
/**
|
|
48
|
+
* Optionally sets the preferences for the tile.
|
|
49
|
+
*/
|
|
50
|
+
preferences?: TilePreferences;
|
|
51
|
+
}
|
|
42
52
|
export interface DashboardContainerProps extends RouteComponentProps {
|
|
53
|
+
/**
|
|
54
|
+
* The tiles to display.
|
|
55
|
+
*/
|
|
56
|
+
children?: ReactNode;
|
|
43
57
|
}
|
|
44
58
|
export interface DashboardTileProps {
|
|
45
59
|
/**
|
|
@@ -58,6 +72,10 @@ export interface DashboardTileProps {
|
|
|
58
72
|
* The provided tile preferences.
|
|
59
73
|
*/
|
|
60
74
|
meta: TilePreferences;
|
|
75
|
+
/**
|
|
76
|
+
* The content of the tile to display.
|
|
77
|
+
*/
|
|
78
|
+
children?: ReactNode;
|
|
61
79
|
}
|
|
62
80
|
export interface TileErrorInfoProps {
|
|
63
81
|
/**
|
|
@@ -76,6 +94,10 @@ export interface TileErrorInfoProps {
|
|
|
76
94
|
* The currently used number of rows.
|
|
77
95
|
*/
|
|
78
96
|
rows: number;
|
|
97
|
+
/**
|
|
98
|
+
* The name of the pilet emitting the error.
|
|
99
|
+
*/
|
|
100
|
+
pilet?: string;
|
|
79
101
|
}
|
|
80
102
|
export interface BareTileComponentProps {
|
|
81
103
|
/**
|
|
@@ -87,7 +109,7 @@ export interface BareTileComponentProps {
|
|
|
87
109
|
*/
|
|
88
110
|
rows: number;
|
|
89
111
|
}
|
|
90
|
-
export
|
|
112
|
+
export type TileComponentProps = BaseComponentProps & BareTileComponentProps;
|
|
91
113
|
export interface PiralCustomTilePreferences {
|
|
92
114
|
}
|
|
93
115
|
export interface TilePreferences extends PiralCustomTilePreferences {
|
package/lib/Dashboard.d.ts
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { RouteComponentProps } from 'react-router-dom';
|
|
2
|
+
import type { RouteComponentProps } from 'react-router-dom';
|
|
3
3
|
import { TileRegistration } from './types';
|
|
4
4
|
export interface DashboardProps extends RouteComponentProps {
|
|
5
5
|
filter?(tile: TileRegistration): boolean;
|
|
6
6
|
}
|
|
7
|
+
/**
|
|
8
|
+
* The dashboard component. Integrate this as a page or in a component
|
|
9
|
+
* where dashboard information (tiles) should be shown.
|
|
10
|
+
*/
|
|
7
11
|
export declare const Dashboard: React.FC<DashboardProps>;
|
package/lib/Dashboard.js
CHANGED
|
@@ -1,22 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Dashboard = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const piral_core_1 = require("piral-core");
|
|
6
|
+
const components_1 = require("./components");
|
|
7
|
+
/**
|
|
8
|
+
* The dashboard component. Integrate this as a page or in a component
|
|
9
|
+
* where dashboard information (tiles) should be shown.
|
|
10
|
+
*/
|
|
11
|
+
const Dashboard = (props) => {
|
|
12
|
+
const tiles = (0, piral_core_1.useGlobalState)((s) => s.registry.tiles);
|
|
13
|
+
const { filter = () => true } = props;
|
|
14
|
+
const children = Object.keys(tiles)
|
|
15
|
+
.filter((tile) => filter(tiles[tile]))
|
|
16
|
+
.map((tile) => {
|
|
17
|
+
const { component: Component, preferences } = tiles[tile];
|
|
18
|
+
const { initialColumns = 1, initialRows = 1, resizable = false } = preferences;
|
|
16
19
|
return (React.createElement(components_1.PiralDashboardTile, { key: tile, columns: initialColumns, rows: initialRows, resizable: resizable, meta: preferences },
|
|
17
20
|
React.createElement(Component, { columns: initialColumns, rows: initialRows })));
|
|
18
21
|
});
|
|
19
|
-
return React.createElement(components_1.PiralDashboardContainer,
|
|
22
|
+
return React.createElement(components_1.PiralDashboardContainer, Object.assign({}, props, { children: children }));
|
|
20
23
|
};
|
|
24
|
+
exports.Dashboard = Dashboard;
|
|
21
25
|
exports.Dashboard.displayName = 'Dashboard';
|
|
22
26
|
//# sourceMappingURL=Dashboard.js.map
|
package/lib/Dashboard.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dashboard.js","sourceRoot":"","sources":["../src/Dashboard.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dashboard.js","sourceRoot":"","sources":["../src/Dashboard.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,2CAA4C;AAC5C,6CAA2E;AAO3E;;;GAGG;AACI,MAAM,SAAS,GAA6B,CAAC,KAAK,EAAE,EAAE;IAC3D,MAAM,KAAK,GAAG,IAAA,2BAAc,EAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,EAAE,MAAM,GAAG,GAAG,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC;IACtC,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;SAChC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;SACrC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACZ,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;QAC1D,MAAM,EAAE,cAAc,GAAG,CAAC,EAAE,WAAW,GAAG,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,WAAW,CAAC;QAC/E,OAAO,CACL,oBAAC,+BAAkB,IACjB,GAAG,EAAE,IAAI,EACT,OAAO,EAAE,cAAc,EACvB,IAAI,EAAE,WAAW,EACjB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,WAAW;YACjB,oBAAC,SAAS,IAAC,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,WAAW,GAAI,CACtC,CACtB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEL,OAAO,oBAAC,oCAAuB,oBAAK,KAAK,IAAE,QAAQ,EAAE,QAAQ,IAAI,CAAC;AACpE,CAAC,CAAC;AArBW,QAAA,SAAS,aAqBpB;AACF,iBAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}
|
package/lib/actions.js
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.unregisterTile = exports.registerTile = void 0;
|
|
4
|
-
|
|
5
|
-
var piral_core_1 = require("piral-core");
|
|
4
|
+
const piral_core_1 = require("piral-core");
|
|
6
5
|
function registerTile(ctx, name, value) {
|
|
7
|
-
ctx.dispatch(
|
|
6
|
+
ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { registry: Object.assign(Object.assign({}, state.registry), { tiles: (0, piral_core_1.withKey)(state.registry.tiles, name, value) }) })));
|
|
8
7
|
}
|
|
9
8
|
exports.registerTile = registerTile;
|
|
10
9
|
function unregisterTile(ctx, name) {
|
|
11
|
-
ctx.dispatch(
|
|
10
|
+
ctx.dispatch((state) => (Object.assign(Object.assign({}, state), { registry: Object.assign(Object.assign({}, state.registry), { tiles: (0, piral_core_1.withoutKey)(state.registry.tiles, name) }) })));
|
|
12
11
|
}
|
|
13
12
|
exports.unregisterTile = unregisterTile;
|
|
14
13
|
//# sourceMappingURL=actions.js.map
|
package/lib/actions.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"actions.js","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"actions.js","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":";;;AAAA,2CAAqE;AAGrE,SAAgB,YAAY,CAAC,GAAuB,EAAE,IAAY,EAAE,KAAuB;IACzF,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,QAAQ,kCACH,KAAK,CAAC,QAAQ,KACjB,KAAK,EAAE,IAAA,oBAAO,EAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,OAEnD,CAAC,CAAC;AACN,CAAC;AARD,oCAQC;AAED,SAAgB,cAAc,CAAC,GAAuB,EAAE,IAAY;IAClE,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,iCACnB,KAAK,KACR,QAAQ,kCACH,KAAK,CAAC,QAAQ,KACjB,KAAK,EAAE,IAAA,uBAAU,EAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,OAE/C,CAAC,CAAC;AACN,CAAC;AARD,wCAQC"}
|
package/lib/components.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const PiralDashboardTile: React.ComponentType<DashboardTileProps>;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const PiralDashboardContainer: import("react").ComponentType<import("./types").DashboardContainerProps>;
|
|
3
|
+
export declare const PiralDashboardTile: import("react").ComponentType<import("./types").DashboardTileProps>;
|
package/lib/components.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.PiralDashboardTile = exports.PiralDashboardContainer = void 0;
|
|
4
|
-
|
|
5
|
-
exports.PiralDashboardContainer = piral_core_1.getPiralComponent('DashboardContainer');
|
|
6
|
-
exports.PiralDashboardTile = piral_core_1.getPiralComponent('DashboardTile');
|
|
4
|
+
const piral_core_1 = require("piral-core");
|
|
5
|
+
exports.PiralDashboardContainer = (0, piral_core_1.getPiralComponent)('DashboardContainer');
|
|
6
|
+
exports.PiralDashboardTile = (0, piral_core_1.getPiralComponent)('DashboardTile');
|
|
7
7
|
//# sourceMappingURL=components.js.map
|
package/lib/components.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":";;;AAAA,2CAA+C;AAElC,QAAA,uBAAuB,GAAG,IAAA,8BAAiB,EAAC,oBAAoB,CAAC,CAAC;AAClE,QAAA,kBAAkB,GAAG,IAAA,8BAAiB,EAAC,eAAe,CAAC,CAAC"}
|
package/lib/create.d.ts
CHANGED
|
@@ -1,20 +1,14 @@
|
|
|
1
|
-
import { ComponentType } from 'react';
|
|
2
1
|
import { PiralPlugin } from 'piral-core';
|
|
3
|
-
import { PiletDashboardApi, TilePreferences
|
|
4
|
-
export interface InitialTile {
|
|
5
|
-
/**
|
|
6
|
-
* Defines the component to be used for the tile.
|
|
7
|
-
*/
|
|
8
|
-
component: ComponentType<BareTileComponentProps>;
|
|
9
|
-
/**
|
|
10
|
-
* Optionally sets the preferences for the tile.
|
|
11
|
-
*/
|
|
12
|
-
preferences?: TilePreferences;
|
|
13
|
-
}
|
|
2
|
+
import { InitialTile, PiletDashboardApi, TilePreferences } from './types';
|
|
14
3
|
/**
|
|
15
4
|
* Available configuration options for the dashboard plugin.
|
|
16
5
|
*/
|
|
17
6
|
export interface DashboardConfig {
|
|
7
|
+
/**
|
|
8
|
+
* Sets the routes where a dashboard should be displayed.
|
|
9
|
+
* @default ['/']
|
|
10
|
+
*/
|
|
11
|
+
routes?: Array<string>;
|
|
18
12
|
/**
|
|
19
13
|
* Sets the tiles to be given by the app shell.
|
|
20
14
|
* @default []
|