{"id":14384857,"url":"https://github.com/linkmesrl/react-redux-dashboard","last_synced_at":"2026-02-19T22:37:51.173Z","repository":{"id":93934854,"uuid":"81065497","full_name":"linkmesrl/react-redux-dashboard","owner":"linkmesrl","description":"React Redux Dashboard with redux-saga and local-storage support","archived":false,"fork":false,"pushed_at":"2017-02-09T16:35:54.000Z","size":446,"stargazers_count":48,"open_issues_count":1,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-29T18:36:10.934Z","etag":null,"topics":["dashboard","local-storage","react","redux","redux-saga","widgets"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/linkmesrl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-02-06T08:35:54.000Z","updated_at":"2023-09-10T11:08:25.000Z","dependencies_parsed_at":"2023-04-05T19:17:26.672Z","dependency_job_id":null,"html_url":"https://github.com/linkmesrl/react-redux-dashboard","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linkmesrl%2Freact-redux-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linkmesrl%2Freact-redux-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linkmesrl%2Freact-redux-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linkmesrl%2Freact-redux-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/linkmesrl","download_url":"https://codeload.github.com/linkmesrl/react-redux-dashboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230720928,"owners_count":18270478,"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":["dashboard","local-storage","react","redux","redux-saga","widgets"],"created_at":"2024-08-28T18:01:43.667Z","updated_at":"2026-02-19T22:37:51.131Z","avatar_url":"https://github.com/linkmesrl.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Redux Dashboard\nA json-configurable dashboard bootstrapped with `create-react-app` made with `react`, `redux`, `redux-saga` and `react-google-charts`\n\n![Screenshot](/src/assets/screenshot.png?raw=true)\n\n## Table of Contents\n- [Installation](#installation)\n- [Run](#run)\n- [Usage](#usage)\n  - [Add an Endpoint](#add-an-endpoint)\n  - [Dashboard configuration](#dashboard-configuration)\n    - [Plugin options](#plugin-options)\n     - [General](#general)\n     - [Plugin specific](#plugin-specific)\n      - [Info](#info-plugin)\n      - [ColumnChart](#columnchart)\n      - [PieChart](#piechart)\n      - [LineChart](#linechart)\n      - [TableChart](#tablechart)\n  - [Define a plugin](#define-a-plugin)\n\n## Installation\nFirst install the dependencies:\n```\nnpm install\n```\n\nThen you need to have a server running to load data inside plugins. You can install `json-server`, a JSON configurable server:\n\n```\nnpm install -g json-server\n```\n\nand then run:\n\n```\njson-server --watch server.json --port 3001\n```\nto start the server, using the configuration inside `server.json` file.\n\n## Run\nBy default the app is listening on `localhost:3001`. Run the app:\n```\nnpm start\n```\n\n## Usage\n\n### Add an Endpoint\nTo add an endpoint edit `src/util/endpoints.json` with:\n\n```json\n  {\n    \"ENDPOINT_NAME\": {\n      \"url\": \"ENDPOINT_URL\"\n    }\n  }\n```\n\n### Dashboard configuration\nThe `Demo` dashboard is pre-configured. You can add/remove rendered plugins by editing `src/util/dashboards.json`.\n\nA plugin has this configuration:\n\n```json\n{\n  \"title\": \"TITLE\",\n  \"name\": \"TYPE\",\n  \"endpoints\": [\n    {\n      \"url\": \"ENDPOINT_NAME\",\n      \"mapping\": {\n        \"keys\": {\n          \"label\": \"LABEL_KEY\",\n          \"value\": {\n            \"name\": \"VALUE_KEY\"\n          }\n        }\n      }\n    }\n  ],\n  \"layout\": {\n    \"x\": \"X_POSITION\",\n    \"y\": \"Y_POSITION\",\n    \"w\": \"WIDTH\",\n    \"h\": \"HEIGHT\",\n    \"minW\": \"MIN_WIDTH\",\n    \"maxW\": \"MAX_WIDTH\",\n    \"minH\": \"MIN_HEIGHT\",\n    \"maxH\": \"MAX_HEIGHT\"\n  }\n}\n```\n\n#### Plugin options\n\n##### General\n\n`TITLE`: Title of the plugin in the Dashboard\n\n`TYPE`: Plugin type (e.g. `PieChart`, `ColumnChart`, `LineChart`, `Info`, `TableChart`)\n\n`ENDPOINT_NAME`: Endpoint name in `src/util/endpoints.json`\n\n`LABEL_KEY`: Key in the object response used as single point/element label in a graph (e.g. `name`)\n\n`VALUE_KEY`: Key in the object response used as single point/element value in a graph (e.g. `count`)\n\n##### Plugin Specific\n\n###### Info Plugin\n`VALUE_TYPE`: Type of the value in the response (e.g. `string` [default], `number`, `double`, `date`, `timeAgo`)\n\n```json\n{\n  \"endpoints\": [\n    {\n      \"mapping\": {\n        \"keys\": {\n          \"value\": {\n            \"type\": \"VALUE_TYPE\"\n          }\n        }\n      }\n    }\n  ]\n}\n```\n\n###### ColumnChart\n`VALUE_LABEL_KEY`: Columns section label (e.g. `Snacks` or `Candies`)\n\n```json\n{\n  \"endpoints\": [\n    {\n      \"mapping\": {\n        \"keys\": {\n          \"value\": {\n            \"label\": \"VALUE_LABEL_KEY\"\n          }\n        }\n      }\n    }\n  ]\n}\n```\n\n###### PieChart\nSee general configuration\n\n###### LineChart\n`1ST_STATUS\", 2ND_STATUS`: Label for different types of data in a LineChart (e.g.`view` or `purchase`)\n\n`1ST_COLOR, 2ND_COLOR`: Colors for different types of data in a LineChart (e.g.`green` or `#b4da55`)\n\n`1ST_LABEL, 2ND_LABEL, 3RD_LABEL`: Labels for LineChart lines (e.g. [`Time`, `Views`, `Purchases`])\n\n```json\n{\n  \"endpoints\": [\n    {\n      \"mapping\": {\n        \"statuses\": [\"1ST_STATUS\", \"2ND_STATUS\"],\n        \"colors\": [\"1ST_COLOR\", \"2ND_COLOR\"],\n        \"labels\": [\"1ST_LABEL\", \"2ND_LABEL\", \"3RD_LABEL\"]\n      }\n    }\n  ]\n}\n```\n\n###### TableChart\n`TABLE_ROW_LABEL`: Table row label (e.g. `Date`)\n\n`TABLE_ROW_KEY`: Table row key in the response (e.g. `timestamp`)\n\n`TABLE_ROW_TYPE`: Table row type (e.g. `date`) [optional]\n\n`TABLE_ROW_FORMAT`: Table row format (e.g. `YYYY/MM/DD hh:mm`) [optional]\n\n```json\n{\n  \"endpoints\": [\n    {\n      \"columns\": [\n        {\n          \"label\": \"TABLE_ROW_LABEL\",\n          \"value\": \"TABLE_ROW_KEY\",\n          \"mapping\": {\n            \"type\": \"TABLE_ROW_TYPE\",\n            \"format\": \"TABLE_ROW_FORMAT\"\n          }\n        }\n      ]\n    }\n  ]\n}\n```\n\n##### Layout\nThe dashboard is a 2-column grid which contains plugins with different size and position. It is divided like this:\n\n```\n+---------------------------------+\n|    x: 0, y: 0  |  x: 1, y: 0    |\n+---------------------------------+\n|    x: 0, y: 1  |  x: 1, y: 1    |\n+---------------------------------+\n|    x: 0, y: 2  |  x: 1, y: 2    |\n+---------------------------------+\n|               ...               |\n```\n\n`X_POSITION`: X coordinate position of the plugin in the dashboard\n\n`Y_POSITION`: Y coordinate position of the plugin in the dashboard\n\n`WIDTH`: Width of the plugin (`1` for half / `2` for the whole line)\n\n`HEIGHT`: height of the plugin (`1` for `Info` / `2` for others)\n\n`MIN_WIDTH`: Minimum width of the plugin (`1` for half / `2` for the whole line)\n\n`MAX_WIDTH`: Maximum width of the plugin (`1` for half / `2` for the whole line)\n\n`MIN_HEIGHT`: Minimum height of the plugin (`1` for `Info` / `2` for others)\n\n`MAX_HEIGHT`: Maximum height of the plugin (`1` for `Info` / `2` for others)\n\n\n### Define a Plugin\n\nTo add a plugin edit `src/util/plugins.json`. For the configuration see `Dashboard configuration`.\n\nIt is not necessary to add in the `Layout` part the `X_POSITION` and `Y_POSITION` keys.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinkmesrl%2Freact-redux-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinkmesrl%2Freact-redux-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinkmesrl%2Freact-redux-dashboard/lists"}