Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including piral-dashboard with all npm packages installed. Try it out:

require("piral-core/package.json"); // piral-core is a peer dependency. var piralDashboard = require("piral-dashboard")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

piral-dashboard v0.11.8

Plugin for creating a centralized dashboard in Piral.

Piral Logo

Piral Dashboard · GitHub License npm version tested with jest Gitter Chat

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.

Documentation

The following functions are brought to the Pilet API.

registerTile()

Adds the definition of a tile to the app shell. Optionally specifies display characteristics like the initial rows, initial columns, or if the tile can be resized by the user.

If the first argument is a string a named tile is registered. A named tile can also be removed.

unregisterTile()

Removes a tile from the app shell. This requires a named tile.

Usage

For authors of pilets

You can use the registerTile function from the Pilet API to add a new tile in the app shell.

Note: When the first argument is a string we call it a named tile.

Example use:

import { PiletApi } from '<name-of-piral-instance>';
import { MyTile } from './MyTile';

export function setup(piral: PiletApi) {
  piral.registerTile(MyTile);
}

You can use the unregisterTile function from the Pilet API to remove a previously added tile from the app shell.

Note: You'll need to have added a named tile in order to be able to remove it.

Example use:

import { PiletApi } from '<name-of-piral-instance>';
import { MyTile } from './MyTile';

export function setup(piral: PiletApi) {
  // register with a name
  piral.registerTile('first', MyTile);
  // and unregister; maybe some time later?
  piral.unregisterTile('first');
}

Setup and Bootstrapping

For Piral instance developers

The provided library only brings API extensions for pilets to a Piral instance.

For the setup of the library itself you'll need to import createDashboardApi from the piral-dashboard package.

import { createDashboardApi } from 'piral-dashboard';

The integration looks like:

const instance = createInstance({
  // important part
  extendApi: [createDashboardApi()],
  // ...
});

Via the options the defaultPreferences and the global / initially available tiles can be defined.

Consider for example:

const instance = createInstance({
  // important part
  extendApi: [createDashboardApi({
    defaultPreferences: {
      initialColumns: 2,
      initialRows: 2,
      resizable: true,
    },
    tiles: [
      {
        component: MyTeaserTile,
        preferences: {
          initialColumns: 2,
          initialRows: 4,
        },
      },
    ],
  })],
  // ...
});

Customizing

You can customize the available tiles and their options.

import 'piral-dashboard';

declare module 'piral-dashboard/lib/types' {
  interface PiralCustomTilePreferences {
    category?: string;
  }
}

// now registerTile(() => null, { category: 'general' }) is strongly typed in pilets

License

Piral is released using the MIT license. For more information see the license file.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free