@splunk/dashboard-presets

@splunk/dashboard-presets

@splunk/dashboard-presets includes all Splunk built dashboard components.

Install

npm install react@^16 react-dom@^16 styled-components@^5 @splunk/react-ui@^4 @splunk/dashboard-context @splunk/visualization-context @splunk/dashboard-presets --save
    --or--

yarn add react@^16 react-dom@^16 styled-components@^5 @splunk/react-ui@^4 @splunk/dashboard-context @splunk/visualization-context @splunk/dashboard-presets --save

Usage

import React from 'react';
import { DashboardCore } from '@splunk/dashboard-core';
import CloudViewOnlyPreset from '@splunk/dashboard-presets/CloudViewOnlyPreset';
import { DashboardContextProvider } from '@splunk/dashboard-context';

const definition = {
    dataSources: {
        search1: {
            options: {
                data: {
                    columns: [['168']],
                    fields: [
                        {
                            name: 'count',
                        },
                    ],
                },
                meta: {},
            },
            type: 'ds.test',
        },
    },
    visualizations: {
        single1: {
            type: 'viz.singlevalue',
            options: {},
            dataSources: {
                primary: 'search1',
            },
        },
        single2: {
            type: 'viz.singlevalue',
            options: {},
            dataSources: {
                primary: 'search1',
            },
        },
        single3: {
            type: 'viz.singlevalue',
            options: {},
            dataSources: {
                primary: 'search1',
            },
        },
    },
    layout: {
        type: 'absolute',
        options: {
            width: 1000,
            height: 400,
        },
        structure: [
            {
                item: 'single1',
                position: {
                    x: 0,
                    y: 100,
                    w: 200,
                    h: 200,
                },
            },
            {
                item: 'single2',
                position: {
                    x: 400,
                    y: 100,
                    w: 200,
                    h: 200,
                },
            },
            {
                item: 'single3',
                position: {
                    x: 800,
                    y: 100,
                    w: 200,
                    h: 200,
                },
            },
        ],
    },
};

export default () => (
    <DashboardContextProvider
        preset={CloudViewOnlyPreset}
        initialDefinition={definition}
    >
        <DashboardCore width="100%" height={450} />
    </DashboardContextProvider>
);