@cumul.io/vue-cumulio-dashboard
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.8 • Public • Published

    Vue.js Cumul.io Dashboards

    This is a Vue.js library for embedding Cumul.io dashboards in your Vue 2 or Vue 3 application.

    Install

    npm i @cumul.io/vue-cumulio-dashboard

    Usage

    Vue 3

    import { createApp } from 'vue'
    import App from './App.vue'
    import VueCumulio from '@cumul.io/vue-cumulio-dashboard';
    
    const app = createApp(App);
    // Defines the component at app level
    app.use(VueCumulio);
    app.mount('#app');

    Vue 2

    import Vue from 'vue'
    import App from './App.vue'
    import VueCumulio from '@cumul.io/vue-cumulio-dashboard/dist/vue2-cumulio.esm'
    
    Vue.use(VueCumulio)
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')

    In your HTML template.

    <cumulio-dashboard
        :dashboardId=dashboardId
        :language="'en'">
    </cumulio-dashboard>
    
    OR
    
    <!-- Embed a chart by passing the chart id as well -->
    <cumulio-dashboard
        :dashboardId=dashboardId
        :chartId=chartId
        :language="'en'">
    </cumulio-dashboard>

    Available props
    Below a list of available props you can add to your cumulio-dashboard

    dashboardId: string;                // The id of the Cumul.io dashboard you wish to embed.
    dashboardSlug: string;              // The slug of the Cumul.io dashboard you wish to embed.
    chartId: string;                    // The id of the Cumul.io chart you wish to embed (Default: null)
    authKey: string;                    // Authorization key generated via Cumul.io API (Default: null)
    authToken: string;                  // Authorization token generated via Cumul.io API (Default: null)
    language: string;                   // Sets the language of errors and loader, eg. 'en' (Default: 'auto')
    screenmode: string;                 // Sets the screenmode of your dashboard: 'mobile', 'tablet', 'desktop', 'largeScreen', 'fixed' (Default: 'auto')
    switchScreenmodeOnResize: boolean;  // true: the embedded dashboard can switch screenmodes on resize of the container , false: Dashboard will keep the same screenmode (Default: true)
    loaderBackground: string;           // Background color of the loader element (Default: '#f9f9f9')
    loaderFontColor: string;            // Font color of the text of the loaders (Default: '#5a5a5a')
    loaderSpinnerColor: string;         // Spinner color of the loader (Default: 'rgba(255, 165, 0, 0.7)')
    loaderSpinnerBackground: string;    // Background color of the spinner (Default: 'rgba(169, 169, 169, 0.14)')

    Events

    @custom-event: Object;                // Custom event triggered in the dashboard. Returns custom event information.
    @charts-rendered: Object;             // Charts have been rendered. Returns event information containing dashboard id and frame.
    @load: Object;                       // Dashboard has been loaded. Returns load event information containing dashboard id, frame and the dashboard dimensions.
    @exported: Object;                   // Export of a dashboard was succesful. Returns event information.
    @changed-filters: [];                 // Filters were changed. Returns a list of dashboards with their active filters.

    Examples

    A dashboard with a gray loader background

    <cumulio-dashboard 
        :dashboardId="dashboardId"
        :loaderBackground="'rgb(238,243,246)'">
    </cumulio-dashboard>

    A dashboard with a purple loader spinner color, screenmode mobile and switchScreenmodeOnResize on false, so that the dashboard will stay in mobile mode

    <cumulio-dashboard 
        :dashboardId="dashboardId"
        :loaderSpinnerColor="'purple'" 
        :screenmode="'mobile'"
        :switchScreenmodeOnResize="false">
    </cumulio-dashboard>

    Public methods from CumulioService

    In Component, service can also be used to facilitate different functionality

    import { CumulioService } from '@cumul.io/vue-cumulio-dashboard';
    ...
    
    export default {
      name: 'Example',
      
      methods: {
        // To refresh data from chart / dashboard
        refreshData(itemId){
          CumulioService.refreshData(itemId)
        },
    
        // Get data from a chart
        async getData(){
          const result = await CumulioService.getData('6759f444-32b8-42d8-8786-eb88fc2a194');
          console.log(result)
        },
    
      }
    
      ...
    
    }
    getDashboards(): Promise<any[]>
    // Returns an instantly resolved promise with an array of all the visible dashboards on a page with their information.
    
    getFilters(): Promise<any[]>
    // Returns an instantly resolved promise with an array of all visible dashboards with their active filters.
    
    getData(itemId: string, dashboard?: {dashboardId?: string, container?: string}): Promise<any[]>
    // Returns a promise with the data of a chart.
    
    setAuthorization(key: string, token: string, dashboard?: {dashboardId?: string, container?: string, dashboardSlug?: string}): Promise<>
    // Changes the authorization of all or one dashboard. Returns an empty promise.
    
    refreshData(id?: string): Promise<>
    // Refreshes the data of a specific chart when the id of that chart is supplied. Without a itemId this refreshes the data in all charts. Returns an empty promise.
    
    reloadDashboard(): Promise<>
    // Reload the dashboard. (useful when the authorization is changed, and dashboard needs to be reloaded without reloading the iFrame). Returns an empty promise.
    
    exportDashboard({ container: string }, type?: string): Promise<Object>
    // Exports the current dashboard as either pdf or png. a container class needs to be passed as an argument and an optional type parameter. Returns a promise with information on the export.
    
    getAccessibleDashboards({ dashboardId?: string, dashboardSlug?: string, apiHost?: string, authKey?: string, authToken?: string, container?: string }): Promise<Array>
    // Get accessible dashboards in a integration, provide either dashboardId, dashboardSlug, container if a dashboard is already loaded.
    // Or provide authKey, apiHost and authToken

    Quick links

    Cumul.io | Vue2 CodeSandbox Example | Vue3 CodeSandbox Example

    Install

    npm i @cumul.io/vue-cumulio-dashboard

    Homepage

    cumul.io/

    DownloadsWeekly Downloads

    79

    Version

    0.0.8

    License

    none

    Unpacked Size

    96.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar