{"id":20630813,"url":"https://github.com/slanatech/dashblocks","last_synced_at":"2025-08-19T21:31:23.700Z","repository":{"id":37706258,"uuid":"149899603","full_name":"slanatech/dashblocks","owner":"slanatech","description":"Enable Analytics in your Apps","archived":false,"fork":false,"pushed_at":"2023-06-01T18:50:44.000Z","size":13153,"stargazers_count":93,"open_issues_count":29,"forks_count":20,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-30T00:27:06.513Z","etag":null,"topics":["analytics","chartjs","charts","d3","dashboard","dygraphs","plotly","vue"],"latest_commit_sha":null,"homepage":"https://dashblocks.io","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/slanatech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":"sv2"}},"created_at":"2018-09-22T17:21:15.000Z","updated_at":"2024-10-15T20:04:22.000Z","dependencies_parsed_at":"2023-09-23T17:49:02.531Z","dependency_job_id":null,"html_url":"https://github.com/slanatech/dashblocks","commit_stats":{"total_commits":243,"total_committers":3,"mean_commits":81.0,"dds":"0.028806584362139898","last_synced_commit":"313aa29d14a23c5d50389ba3e1bb447c33ab1aa9"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slanatech%2Fdashblocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slanatech%2Fdashblocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slanatech%2Fdashblocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slanatech%2Fdashblocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slanatech","download_url":"https://codeload.github.com/slanatech/dashblocks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230085319,"owners_count":18170425,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analytics","chartjs","charts","d3","dashboard","dygraphs","plotly","vue"],"created_at":"2024-11-16T14:09:38.096Z","updated_at":"2024-12-19T03:08:09.874Z","avatar_url":"https://github.com/slanatech.png","language":"Vue","readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/slanatech/dashblocks/blob/master/screenshots/dblogo.png?raw=true\" height=\"200\" width=\"200\" alt=\"https://dashblocks.io\"/\u003e\n\u003c/p\u003e\n\n# dashblocks \n\n####  [https://dashblocks.io](https://dashblocks.io) | [GUIDE](https://dashblocks.io/guide/) | [DEMO](https://slanatech.github.io/dashblocks-template/#/) \n\n### Enable Analytics in your Apps \n\n![](https://img.shields.io/badge/vue-2.x-brightgreen.svg)\n[![npm version](https://badge.fury.io/js/dashblocks.svg)](https://badge.fury.io/js/dashblocks)\n\n\u003e Note: under active development\n\n\n## Declarative Interactive Dashboards \n\n\nDashblocks enables easily creating sophisticated interactive dashboards simply by declaring dashboard structure as json or javascript object.\n\nDashblocks uses popular charting libraries to render chars: d3, Chart.js, Dygraphs, Plotly.js\n\n[DEMO](https://slanatech.github.io/dashblocks-template/#/)\n\n![dashboard](screenshots/dashboard.png?raw=true)\n\n\n[MORE DEMOS](https://slanatech.github.io/dashblocks/demo)\n\n\nDashblocks aims to simplify enabling robust In-App Analytics: \n\n* Use declarative approach to define dashboard layout\n* Provide reasonable out of the box defaults for all chart types, such as colors\n* Support dark / light modes out of the box    \n* Enable interactivity by providing event handling on dashboard level\n* Streamline dynamic updates of dashboard data, for example based on user interaction with dashboard\n* Even dynamically generate Dashboard itself based on the data - thanks to declarative approach   \n\n## Dashblocks Template\n\n[https://github.com/slanatech/dashblocks-template](https://github.com/slanatech/dashblocks-template)\n\nDashblocks 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).\n\nWe focus on providing beautiful interactive Dashboards out of the box, and helping to enable In-App Analytics in your Apps.  \n\n[DASHBLOCKS TEMPLATE DEMO](https://slanatech.github.io/dashblocks-template/#/)\n\n\n\n## Installation \n\n```\nnpm install dashblocks --save\n```\n\n\n## Usage \n\nCreate Dashboard in your Vue app as a Vue Component. In Dashboard component you define: \n* Dashboard Layout - add widgets to your dashboard, specifying how many columns and rows\n  each widget takes. Dashblocks provides 16-columns CSS Grid layout. Pass additional options to widgets to adjust appearance as needed.\n* Set Data for each widget on a dashboard \n\nHere is an example dashboard:\n\n\n\n```vue\n\u003ctemplate\u003e\n  \u003cdb-dashboard v-if=\"ready\" :dbspec=\"dbspec\" :dbdata=\"dbdata\" :dark=\"isDark\"\u003e \u003c/db-dashboard\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { DbData, DbDashboard } from 'dashblocks';\n\nexport default {\n  name: 'SampleDashboard',\n  components: {\n    DbDashboard\n  },\n  data() {\n    return {\n      isDark: false,\n      dbdata: new DbData(),\n      // Declare Dashboard Layout. Add widgets to your dashboard, specifying how many columns and rows\n      // each widget takes. Dashblocks provides 16-columns CSS Grid layout.\n      // Pass additional options to widgets to adjust appearance as needed.\n      dbspec: {\n        layout: {\n          type: 'grid'\n        },\n        widgets: [\n          {\n            id: 'w1',\n            type: 'DbDygraphsBar',\n            cspan: 16,\n            height: 250,\n            properties: {\n              options: {\n                stackedGraph: true,\n                title: 'Traffic over time',\n                ylabel: 'Requests, Mil.',\n                labels: ['Date', 'Success', 'Error'],\n                legend: 'always'\n              }\n            }\n          },\n          {\n            id: 'w2',\n            type: 'DbChartjsPie',\n            cspan: 4,\n            height: 250\n          },\n          {\n            id: 'w3',\n            type: 'DbChartjsPie',\n            cspan: 4,\n            properties: {\n              options: {\n                legend: {\n                  position: 'right'\n                }\n              }\n            }\n          },\n          {\n            id: 'w4',\n            type: 'DbChartjsBar',\n            cspan: 4\n          },\n          {\n            id: 'w5',\n            type: 'DbChartjsBar',\n            cspan: 4\n          }\n        ]\n      },\n      ready: false\n    };\n  },\n  mounted() {\n    this.initialize();\n    this.ready = true;\n  },\n  methods: {\n    initialize: function() {\n      // Initialize dashboard data - set data for each dashboard widget\n      // This is obviously a sample that generates random data\n      // In real dashboards you would get data from database, backend APIs, vuex, etc\n      let dthData = [];\n      let sTS = Date.now() - 100 * 3600 * 1000;\n      for (let i = 0; i \u003c 100; i++) {\n        dthData.push([new Date(sTS + i * 3600 * 1000), Math.random(), Math.random()]);\n      }\n\n      this.dbdata.setWData('w1', {\n        data: dthData\n      });\n\n      let dataOneSeries = {\n        labels: ['January', 'February', 'March', 'April'],\n        datasets: [\n          {\n            label: 'Data One',\n            data: [10, 20, 30, 100]\n          }\n        ]\n      };\n\n      let dataTwoSeries = {\n        labels: ['January', 'February', 'March', 'April'],\n        datasets: [\n          {\n            label: 'Data One',\n            data: [10, 20, 30, 100]\n          },\n          {\n            label: 'Data Two',\n            data: [50, 10, 70, 11]\n          }\n        ]\n      };\n\n      this.dbdata.setWData('w2', {\n        data: JSON.parse(JSON.stringify(dataOneSeries))\n      });\n\n      this.dbdata.setWData('w3', {\n        data: JSON.parse(JSON.stringify(dataOneSeries))\n      });\n\n      this.dbdata.setWData('w4', {\n        data: JSON.parse(JSON.stringify(dataOneSeries))\n      });\n      this.dbdata.setWData('w5', {\n        data: JSON.parse(JSON.stringify(dataTwoSeries))\n      });\n    }\n  }\n};\n\u003c/script\u003e\n```\n\n[https://github.com/slanatech/dashblocks-template/blob/master/src/views/SampleDashboard.vue](https://github.com/slanatech/dashblocks-template/blob/master/src/views/SampleDashboard.vue) \n\nAnd here is what you get:\n\n![sample](screenshots/sample_dashboard.png?raw=true)\n \n\nMore samples: \n\n* [dashblock-template](https://github.com/slanatech/dashblocks-template) - Dashblocks template app \n* [dashblocks demo app](https://github.com/slanatech/dashblocks/tree/master/src/demo)   \n\n\n## Roadmap \n\nRoadmap and plans are roughly defined in [TODO](TODO.md)  \n\n\n\n## License\n \n[MIT](LICENSE)\n\n","funding_links":["https://github.com/sponsors/sv2"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslanatech%2Fdashblocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslanatech%2Fdashblocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslanatech%2Fdashblocks/lists"}