Creating a Custom Use Case

To set up your own use case, create a JavaScript file inside the data-examples folder. For example, data-examples/yourUseCaseName.js. Define a function that returns a JSON data structure in the following format (you can also refer to other examples in the data-examples folder):

export function yourFunctionName() {
    return {
        "<layer-1-Name>": {
            "metrics": {
                "<metric-1-name>": {
                    "label": "<metric-1-label>",
                    "unit": "<metric-1-unit>",
                    "min": "<min-value>",
                    "med": "<med-value>",
                    "max": "<max-value>",
                    "current": "<current-value>"
                },
                "<metric-n-name>": {
                    "label": "<metric-n-label>",
                    "unit": "<metric-n-unit>",
                    "min": "<min-value>",
                    "med": "<med-value>",
                    "max": "<max-value>",
                    "current": "<current-value>"
                }
            },
            "layer": {
                "<layer-1-Name>-layer": {
                    "label": "layer-1-label"
                }
            }
        },
        "<layer-n-Name>": {
            "metrics": {
                "<metric-1-name>": {
                    "label": "<metric-1-label>",
                    "unit": "<metric-1-unit>",
                    "min": "<min-value>",
                    "med": "<med-value>",
                    "max": "<max-value>",
                    "current": "<current-value>"
                },
                "<metric-n-name>": {
                    "label": "<metric-n-label>",
                    "unit": "<metric-n-unit>",
                    "min": "<min-value>",
                    "med": "<med-value>",
                    "max": "<max-value>",
                    "current": "<current-value>"
                }
            },
            "layer": {
                "<layer-n-Name>-layer": {
                    "label": "layer-n-label"
                }
            }
        }
    };
}

Next, you need 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", 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 YourUseCaseName = createPalindrome.bind({});
YourUseCaseName.args = {
    data: yourFunctionName(),
};

Please note that the Remote Data and Multiviewport use cases have specific data structure definitions and use case declarations. Please refer to their corresponding documentation pages for more details.