KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #developer-tools #cli #codex #claude-code #react #mcp #open-source #deepseek-harness #dsh-plugin #ai

dashblocks

★ 100 Open GitHub ↗

Enable Analytics in your Apps

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# dashblocks

####  [https://dashblocks.io](https://dashblocks.io) | [GUIDE](https://dashblocks.io/guide/) | [DEMO](https://slanatech.github.io/dashblocks-template/#/)

### Enable Analytics in your Apps

![](https://img.shields.io/badge/vue-2.x-brightgreen.svg)
[![npm version](https://badge.fury.io/js/dashblocks.svg)](https://badge.fury.io/js/dashblocks)

> Note: under active development

## Declarative Interactive Dashboards

Dashblocks enables easily creating sophisticated interactive dashboards simply by declaring dashboard structure as json or javascript object.

Dashblocks uses popular charting libraries to render chars: d3, Chart.js, Dygraphs, Plotly.js

[DEMO](https://slanatech.github.io/dashblocks-template/#/)

![dashboard](https://raw.githubusercontent.com/slanatech/dashblocks/master/screenshots/dashboard.png)

[MORE DEMOS](https://slanatech.github.io/dashblocks/demo)

Dashblocks aims to simplify enabling robust In-App Analytics:

* Use declarative approach to define dashboard layout
* Provide reasonable out of the box defaults for all chart types, such as colors
* Support dark / light modes out of the box    
* Enable interactivity by providing event handling on dashboard level
* Streamline dynamic updates of dashboard data, for example based on user interaction with dashboard
* Even dynamically generate Dashboard itself based on the data - thanks to declarative approach

## Dashblocks Template

[https://github.com/slanatech/dashblocks-template](https://github.com/slanatech/dashblocks-template)

Dashblocks Vue Material Admin Template is build based on [Quasar Framework](https://quasar.dev/), [Vuex](https://vuex.vuejs.org/installation.html),  [Vuejs](https://vuejs.org/) and [Dashblocks](https://github.com/slanatech/dashblocks).

We focus on providing beautiful interactive Dashboards out of the box, and helping to enable In-App Analytics in your Apps.

[DASHBLOCKS TEMPLATE DEMO](https://slanatech.github.io/dashblocks-template/#/)

## Installation

```
npm install dashblocks --save
```

## Usage

Create Dashboard in your Vue app as a Vue Component. In Dashboard component you define: 
* Dashboard Layout - add widgets to your dashboard, specifying how many columns and rows
  each widget takes. Dashblocks provides 16-columns CSS Grid layout. Pass additional options to widgets to adjust appearance as needed.
* Set Data for each widget on a dashboard

Here is an example dashboard:

```vue
<template>
  <db-dashboard v-if="ready" :dbspec="dbspec" :dbdata="dbdata" :dark="isDark"> </db-dashboard>
</template>

export default {
  name: 'SampleDashboard',
  components: {
    DbDashboard
  },
  data() {
    return {
      isDark: false,
      dbdata: new DbData(),
      // Declare Dashboard Layout. Add widgets to your dashboard, specifying how many columns and rows
      // each widget takes. Dashblocks provides 16-columns CSS Grid layout.
      // Pass additional options to widgets to adjust appearance as needed.
      dbspec: {
        layout: {
          type: 'grid'
        },
        widgets: [
          {
            id: 'w1',
            type: 'DbDygraphsBar',
            cspan: 16,
            height: 250,
            properties: {
              options: {
                stackedGraph: true,
                title: 'Traffic over time',
                ylabel: 'Requests, Mil.',
                labels: ['Date', 'Success', 'Error'],
                legend: 'always'
              }
            }
          },
          {
            id: 'w2',
            type: 'DbChartjsPie',
            cspan: 4,
            height: 250
          },
          {
            id: 'w3',
            type: 'DbChartjsPie',
            cspan: 4,
            properties: {
              options: {
                legend: {
                  position: 'right'
                }
              }
            }
          },
          {
            id: 'w4',
            type: 'DbChartjsBar',
            cspan: 4
          },
          {
            id: 'w5',
            type: 'DbChartjsBar',
            cspan: 4
          }
        ]
      },
      ready: false
    };
  },
  mounted() {
    this.initialize();
    this.ready = true;
  },
  methods: {
    initialize: function() {
      // Initialize dashboard data - set data for each dashboard widget
      // This is obviously a sample that generates random data
      // In real dashboards you would get data from database, backend APIs, vuex, etc
      let dthData = [];
      let sTS = Date.now() - 100 * 3600 * 1000;
      for (let i = 0; i < 100; i++) {
        dthData.push([new Date(sTS + i * 3600 * 1000), Math.random(), Math.random()]);
      }

this.dbdata.setWData('w1', {
        data: dthData
      });

let dataOneSeries = {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [
          {
            label: 'Data One',
            data: [10, 20, 30, 100]
          }
        ]
      };

let dataTwoSeries = {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [
          {
            label: 'Data One',
            data: [10, 20, 30, 100]
          },
          {
            label: 'Data Two',
            data: [50, 10, 70, 11]
          }
        ]
      };

this.dbdata.setWData('w2', {
        data: JSON.parse(JSON.stringify(dataOneSeries))
      });

this.dbdata.setWData('w3', {
        data: JSON.parse(JSON.stringify(dataOneSeries))
      });

this.dbdata.setWData('w4', {
        data: JSON.parse(JSON.stringify(dataOneSeries))
      });
      this.dbdata.setWData('w5', {
        data: JSON.parse(JSON.stringify(dataTwoSeries))
      });
    }
  }
};
</script>
```

[https://github.com/slanatech/dashblocks-template/blob/master/src/views/SampleDashboard.vue](https://github.com/slanatech/dashblocks-template/blob/master/src/views/SampleDashboard.vue)

And here is what you get:

![sample](https://raw.githubusercontent.com/slanatech/dashblocks/master/screenshots/sample_dashboard.png)

More samples:

* [dashblock-template](https://github.com/slanatech/dashblocks-template) - Dashblocks template app 
* [dashblocks demo app](https://github.com/slanatech/dashblocks/tree/master/src/demo)

## Roadmap

Roadmap and plans are roughly defined in [TODO](TODO.md)

## License
 
[MIT](LICENSE)

dashblocks

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README