@splunk/dashboard-core

@splunk/dashboard-core

@splunk/dashboard-core is a core component in Dashboard Framework that manages the state between visualizations, inputs and their datasources. You must wrap this component with a DashboardContextProvider.

It renders a dashboard according to a JSON definition.

Install

npm install react react-dom styled-components @splunk/react-ui @splunk/dashboard-core @splunk/dashboard-presets

    --or--

yarn add react react-dom styled-components @splunk/react-ui @splunk/dashboard-core @splunk/dashboard-presets

Usage

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

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,
                },
            },
        ],
    },
};

const geoRegistry = GeoRegistry.create();
geoRegistry.addDefaultProvider(new GeoJsonProvider());

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