Multiviewport Use Cases

Palindrome.js supports multiviewport use cases. It includes the following default multiviewport use cases:

Use Case Name	Data Structure Location
Benchmark Grid Remote Data	data-examples/mvp_benchmarkGridRemoteData.js
Hybrid Multiple Palindromes	data-examples/mvp_hybridMultiplePalindromes.js
Static Multiple Palindromes	data-examples/mvp_staticMultiplePalindromes.js

Data Structure Definition

Multiviewport use cases require a special data structure, defined as follows:

export const multiviewportUseCase = () => {
    return {
        grid: [
            {
                title: 'Full Map',
                data: dcFullMap(),
                w: '25%',
                h: '50%',
                x:0,
                y:0
            },
            {
                title: 'Energetic Efficency',
                data: dcEnergeticEfficiency(),
                w: '50%',
                h: '50%',
                x:1,
                y:0,
            }
        ]
    }
}

The data structure described above creates a grid with two Palindrome panels:

1. First Panel ("Full Map")
   • Positioned at the top-left corner (x=0, y=0).
   • Width: 25% of the screen.
   • Height: 50% of the screen.
2. Second Panel ("Energetic Efficiency")
   • Positioned directly to the right of the first panel (x=1, which is 25% to the right of the screen, and y=0, the same row as the first panel). Width: 50% of the screen. Height: 50% of the screen.

The result of this grid is shown in the figure below.

Each grid element has 4 positioning parameters: x, y, w, h. The details are as follows:

Parameter	Type	Options	Description
w	String	'25%', '50%', '75%', '100%'	The width of the screen is divided into 4 columns, each column takes 25%.
h	String	'25%', '50%', '75%', '100%'	The height of the screen is divided into 4 columns, each column takes 25%.
x	Integer	1, 2, 3, 4	The x position (horizontal alignment). Each unit represents 25% of the screen width.
y	Integer	1, 2, 3, 4	The y position (vertical alignment). Each unit represents 25% of the screen height.

Use Case Declaration

In order to register your use case. To ensure the use case is defined in the dev environment, declare it inside the dev/utils/controls.js file, within the palindromes object.

For example:

export let palindromes = {
    // ... other use cases
    yourGroupName: [
        { name: "Your Use Case Display Name", isMultipleViewPorts: true, data: yourFunctionName() }
    ]
};

To ensure the use case is available in the Storybook environment, create a file in the stories folder, for example, stories/yourStoryName.js, with the following content:

import { defaultControls, defaultValues } from './controls/defaultControls';
import { yourFunctionName } from '../data-examples/yourUseCaseName';

export default {
    title: 'Use Cases/Palindrome/Your Storybook Group',
    argTypes: defaultControls(),
    args: defaultValues(),
};
export const multiviewportUseCase = createMultipleViewPorts.bind({});
multiviewportUseCase.args = {
    data: yourFunctionName(),
};