https://github.com/yoshinaga-ken/laravel-vue-dashboard-dc
A template project for an admin panel with a dashboard using 📊dimensional charts, implemented with laravel and vue.
https://github.com/yoshinaga-ken/laravel-vue-dashboard-dc
admin-dashboard charting crossfilter d3js dashboard dimentional element-plus googlemap graphql inertiajs laravel laravel11 streetview tailwindcss visualization vue vue3 vuetify youtube
Last synced: 2 months ago
JSON representation
A template project for an admin panel with a dashboard using 📊dimensional charts, implemented with laravel and vue.
- Host: GitHub
- URL: https://github.com/yoshinaga-ken/laravel-vue-dashboard-dc
- Owner: yoshinaga-ken
- Created: 2025-03-25T08:25:43.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-01T11:49:59.000Z (2 months ago)
- Last Synced: 2025-04-01T12:40:16.605Z (2 months ago)
- Topics: admin-dashboard, charting, crossfilter, d3js, dashboard, dimentional, element-plus, googlemap, graphql, inertiajs, laravel, laravel11, streetview, tailwindcss, visualization, vue, vue3, vuetify, youtube
- Language: JavaScript
- Homepage: https://sakanaclub.xsrv.jp/laravel-sports-hp/public/index.php/dashboard-dc?data=covid19-data-2021-02-28
- Size: 28.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Laravel + Vue3 + 📊Dimensional chart Dashboard template
A template project for an admin panel with a dashboard using 📊dimensional charts, implemented with laravel and vue.
- [Live demo](https://sakanaclub.xsrv.jp/laravel-sports-hp/public/index.php/dashboard-dc?data=covid19-data-2021-02-28)
[](https://sakanaclub.xsrv.jp/dc/covid19/data=test-article-likehttps://sakanaclub.xsrv.jp/laravel-sports-hp/public/index.php/dashboard-dc?data=covid19-data-2021-02-28)
- [Dimensional chart](http://dc-js.github.io/dc.js/) can be switched and compared with one click, making it easy to analyze in multiple dimensions.
## Features
- Dashboard with [Dimensional chart(dc.js)](http://dc-js.github.io/dc.js/)
- [Articles Dashboard](https://sakanaclub.xsrv.jp/laravel-sports-hp/public/index.php/dashboard-dc?data=test-article-like)
- [Dashboard with many more dimensional charts](#link-dc-demo)
- Dashboard Mode: 📊Chart | 
GoogleMap | 
StreetView | 
YouTube
Expand for details
- Time ▶️Play Function
Expand for details
- [Laravel Jetstream Features](https://jetstream.laravel.com/introduction.html)
- Authentication
- Registration
- User Management
- Password Update
- Password Confirmation
- Two Factor Authentication
- Browser Sessions
- Teams Management
- Articles Management
- CRUD Operations
- article like/dislike operations
- RestFul API
- Creating data for [a dashboard to analyze article likes](https://sakanaclub.xsrv.jp/laravel-sports-hp/public/index.php/dashboard-dc?data=test-article-like)
- User Management
- user follow/unfollow operations
- Creating dashboard data to analyze user behavior
- GraphQL
## Technology Stack
- backend
- [Laravel 11](https://laravel.com/)
- [Eloquent ORM](https://laravel.com/docs/12.x/eloquent-relationships)
- [inertiajs](https://inertiajs.com/)
- RestFul API
- [GraphQL](https://graphql.org/) with [lighthouse](https://lighthouse-php.com/)
- Authentication with [sanctum](https://laravel.com/docs/12.x/sanctum)
- test
- pest
- frontend
- [vue 3](https://vuejs.org/)
- [tailwindcss](https://tailwindcss.com/)
- dark mode
- ui components
- [vuetify](https://vuetifyjs.com/en/)
- [element-plus](https://element-plus.org/en-US/)
- [GraphQL](https://graphql.org/) with [Vue Apollo](https://apollo.vuejs.org/)
- [Google Maps Api](https://developers.google.com/maps/documentation/javascript/reference?hl=en)
- [YouTube API](https://developers.google.com/youtube/v3/docs?hl=en)
- test
- vitest
- e2e with [playwright](https://playwright.dev/)
## Database
- [mariadb-schema.sql](database/schema/mariadb-schema.sql)
- 
- [
GraphQL schema](https://sakanaclub.xsrv.jp/laravel-sports-hp/public/index.php/graphql-playground)
- 
## Quick Start
```bash [Terminal]
# backend - run web server
php artisan serve
# frontend - watch build
pnpm run dev
```
## Setup
```bash
# Setup configuration:
cp .env.example .env
# Generate application key:
php artisan key:generate
# Create a database in the DB_DATABASE field in the .env file.
# Run database migrations:
php artisan migrate
# Run database seeder:
php artisan db:seed
# Install Composer dependencies
composer install
# Install NPM dependencies
pnpm install
```
## Production
Build a production-ready Vue.js frontend application
```bash
pnpm run build
# output: public/build/
```
## Running tests
```bash
# Backend test
vendor/bin/pest -p
# Frontend vitest
pnpm test
# Frontend e2e test
$ cd e2e
e2e$ npx playwright test
```
## 📊Dimensional chart demo for other fields
- [List of missing persons due to Noto Peninsula earthquake @2024/1/1](https://sakanaclub.xsrv.jp/dc/covid19/data=quake-noto-safety.csv)
- [Tokyo gubernatorial election votes by candidate @2024/7/7](https://sakanaclub.xsrv.jp/dc/covid19/data=tokyo-gubernatorial-election.csv)
- 📺🎮Tv Game in Japan
- home video game consoles
- [4th generation](https://sakanaclub.xsrv.jp/dc/covid19/data=game-gen4.csv)
- [NES](https://sakanaclub.xsrv.jp/dc/covid19/data=game-fc.csv) | [SNES](https://sakanaclub.xsrv.jp/dc/covid19/data=game-smc.csv) | [Genesis](https://sakanaclub.xsrv.jp/dc/covid19/data=game-smd.csv) | [TurboGrafx-16](https://sakanaclub.xsrv.jp/dc/covid19/data=game-pce.csv)
- [3~5th generatio](https://sakanaclub.xsrv.jp/dc/covid19/data=game-gen3.csv)
- 5th generation
- [NINTENDO64](https://sakanaclub.xsrv.jp/dc/covid19/data=game-n64.csv) | [Playstation1](https://sakanaclub.xsrv.jp/dc/covid19/data=game-ps1.csv) | [SEGA SATURN](https://sakanaclub.xsrv.jp/dc/covid19/data=game-ss) | [NEOGEO](https://sakanaclub.xsrv.jp/dc/covid19/data=game-ac.csv&name=SNK&date=1990-01-01+2005-01-01)
- 6th generation
- [Game Cube](https://sakanaclub.xsrv.jp/dc/covid19/data=game-gc) | Xbox | PlayStation 2 | Dreamcast
- 7th generation
- [Wii](https://sakanaclub.xsrv.jp/dc/covid19/data=game-wii) | Xbox 360 | PlayStation 3
- Handheld game consoles
- [Game Boy](https://sakanaclub.xsrv.jp/dc/covid19/data=game-gb.csv) | [Game Boy Advance](https://sakanaclub.xsrv.jp/dc/covid19/data=game-gba.csv) | Nintendo DS | PSP | Nintendo Switch
- [Arcade Video games 1974～2024](https://sakanaclub.xsrv.jp/dc/covid19/data=game-ac.csv)
- Personal computer
- [MSX](https://sakanaclub.xsrv.jp/dc/covid19/data=game-msx.csv)
- Sports
- [⚾List of High School Baseball Championship in Japan](https://sakanaclub.xsrv.jp/dc/covid19/data=sports-hsb.csv)
- [🏸Trends in sports circle participation](https://sakanaclub.xsrv.jp/dc/covid19/data=checkin-sakana)
- Food
- [🍜List of Ramen in Japan](https://sakanaclub.xsrv.jp/dc/covid19/data=food-ramen.csv)
- Market Analysis
- [Number of Supermarket Stores](https://sakanaclub.xsrv.jp/dc/covid19/data=store-cnt)
- [Supermarket Business Trends](https://sakanaclub.xsrv.jp/dc/covid19/data=store-di)
- Regional Economic Analysis
- [「Agricultural output by product」2016～2021 @japan](https://sakanaclub.xsrv.jp/dc/covid19/data=resas-agriculture.csv)
- [「Number of visitors by nationality to designated regions」1994～2021](https://sakanaclub.xsrv.jp/dc/covid19/data=resas-tourism-foreigners.csv)
- [「Annual product sales」1994～2021 @japan](https://sakanaclub.xsrv.jp/dc/covid19/data=resas-product-sales.csv)
- [「Number of companies (by city, town, village, industry classification, and industry)」2009～2016 @japan](https://sakanaclub.xsrv.jp/dc/covid19/data=resas-municipality-company.csv)
- [population composition @japan](https://sakanaclub.xsrv.jp/prefecture-population-dc/?data=population.csv)
- Samples
- [Number of 👍likes for the 📄article](https://sakanaclub.xsrv.jp/dc/covid19/data=test-article-like)
## Related Repos
- [covid19-dc](https://github.com/yoshinaga-ken/covid19-dc)
