@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@^16 react-dom@^16 styled-components@^5 @splunk/react-ui@^4 @splunk/dashboard-context @splunk/visualization-context @splunk/dashboard-presets @splunk/dashboard-core --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 @splunk/dashboard-core --save

Usage

import React from 'react';
import { DashboardCore } from '@splunk/dashboard-core';
import CloudViewOnlyPreset from '@splunk/dashboard-presets/CloudViewOnlyPreset';
import {
    DashboardContextProvider,
    GeoRegistry,
    GeoJsonProvider,
} 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,
                },
            },
        ],
    },
};

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

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