{"id":24087939,"url":"https://github.com/tinybirdco/session-chart-dashboard","last_synced_at":"2026-01-03T00:04:47.673Z","repository":{"id":245202198,"uuid":"817488401","full_name":"tinybirdco/session-chart-dashboard","owner":"tinybirdco","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-05T12:12:46.000Z","size":172,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-01-10T03:56:08.799Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tinybirdco.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-19T20:28:47.000Z","updated_at":"2024-07-05T12:18:13.000Z","dependencies_parsed_at":"2024-06-20T13:58:35.833Z","dependency_job_id":"e276c031-dbff-4917-a838-9df37e24bd4f","html_url":"https://github.com/tinybirdco/session-chart-dashboard","commit_stats":null,"previous_names":["tinybirdco/session-chart-dashboard"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinybirdco%2Fsession-chart-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinybirdco%2Fsession-chart-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinybirdco%2Fsession-chart-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinybirdco%2Fsession-chart-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinybirdco","download_url":"https://codeload.github.com/tinybirdco/session-chart-dashboard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240982504,"owners_count":19888514,"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":[],"created_at":"2025-01-10T03:56:20.368Z","updated_at":"2026-01-03T00:04:47.642Z","avatar_url":"https://github.com/tinybirdco.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Example code for a session on building dashboards.\n### Adding Tinybird Charts to a Next.js frontend\n\nIn this session we work with a stream of [Mockingbird](https://mockingbird.tinybird.co/?host=us_gcp\u0026datasource=events\u0026eps=100\u0026withLimit=on\u0026generator=Tinybird\u0026endpoint=us_gcp\u0026limit=-1\u0026generatorName=Tinybird\u0026template=Custom\u0026schema=%28%27timezmpKGdatetimeBetweenOzrtR1-01F8endR6-19F%27%29E~transacX_idKyj%21%27strqg.uuid%27%29~endpoqtK*%27get_Vports8curVnt_condiXs8get_extVmes8daiU8monthU350%2C25ffIEE~cityK*%27Denver8Salt+Lake+City8Chicago8Mqneapolis8Houston8New+York8Miami8Los+Angeles35575fffIIIEE~sensor_tyjK*%27temjratuV8humidityQsjed8PVssuV8CloudsQdiVcX36572f%2C6I%2C2EE%29*GpickWeightedOvalueJ3%27%5D~weightJ7%2C18%27~E%5D%29FT00%3A00%3A00.000ZGyj%21%27mockqgbird.I%2C5Js%21%5BK%21%28%27tO8paramJ%28%27Q8Wqd+R%21%272024-0Uly_ztsVreXtionf70jpeqinzsta%01zqjfXVURQOKJIGFE873*_) data that simulates events coming from a weather data application.\n\n\n```json\n{\n    \"timestamp\": \"2024-06-20T02:26:31\",\n    \"transaction_id\": \"c762f0f7-ac31-4761-a598-6db488d24cfc\",\n    \"account_id\": \"8888_jdi3_477888\",\n    \"endpoint\": \"get_reports\",\n    \"city\": \"Minneapolis\",\n    \"sensor_type\": \"temperature\"\n}\n```\n\nWe take this data and build a simple real-time databoard. \n\n![Top section](./images/top-section.png)\n\n## Getting started\n\nThis repo contains a minimal example demonstrating:\n\n1. Creating Tinybird Charts from the UI\n2. Integrating Tinybird Charts into a Next.js frontend\n\nYou can read more about Tinybird Charts in the [documentation](https://www.tinybird.co/docs/publish/charts), and there is a full [end-to-end guide](https://www.tinybird.co/docs/guides/integrate/add-charts-to-nextjs) covering this example.\n\n## Run the example locally\n\n### Prerequisites\n\n- Node.js \u003e= v18\n- A [free Tinybird account](https://tinybird.co)\n- Deploy the [Tinybird resources](/tinybird) to a Tinybird Workspace\n\n### Install dependencies\n\nInstall app dependencies. From the root of the repo:\n\n```bash\nnpm install\n```\n\n### Generate some data\nUse [Mockingbird](https://mockingbird.tinybird.co/?host=us_gcp\u0026datasource=events\u0026eps=100\u0026withLimit=on\u0026generator=Tinybird\u0026endpoint=us_gcp\u0026limit=-1\u0026generatorName=Tinybird\u0026template=Custom\u0026schema=%28%27timezmpKGdatetimeBetweenOzrtR1-01F8endR6-19F%27%29E~transacX_idKyj%21%27strqg.uuid%27%29~endpoqtK*%27get_Vports8curVnt_condiXs8get_extVmes8daiU8monthU350%2C25ffIEE~cityK*%27Denver8Salt+Lake+City8Chicago8Mqneapolis8Houston8New+York8Miami8Los+Angeles35575fffIIIEE~sensor_tyjK*%27temjratuV8humidityQsjed8PVssuV8CloudsQdiVcX36572f%2C6I%2C2EE%29*GpickWeightedOvalueJ3%27%5D~weightJ7%2C18%27~E%5D%29FT00%3A00%3A00.000ZGyj%21%27mockqgbird.I%2C5Js%21%5BK%21%28%27tO8paramJ%28%27Q8Wqd+R%21%272024-0Uly_ztsVreXtionf70jpeqinzsta%01zqjfXVURQOKJIGFE873*_) to generate fake data for the `events` Data Source.\n\nUsing this link ^ provides a pre-configured schema, and you'll just need to enter your Workspace Admin Token and select the Host region that matches your Workspace. When configured, select Save, then scroll down and select Start Generating!.\n\nIn the Tinybird UI, confirm that the events Data Source is successfully receiving data.\n\n\n### Add your Tinybird parameters\n\nFirst create a new file `.env.local`\n```bash\ncp .env.example .env.local\n```\n\nFrom the Tinybird UI, copy the read Token for the charts (if you deployed the resources from this repo, it will be called `CHART_READ_TOKEN`). Paste the Token into the `.env.local` file in your directory:\n\n```bash\nNEXT_PUBLIC_TINYBIRD_STATIC_READ_TOKEN=\"STATIC READ TOKEN\"\n```\n\n### Run the demo app\n\nRun it locally:\n\n```bash\nnpm run dev\n```\n\nThen open [http://localhost:3000](http://localhost:3000) with your browser.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinybirdco%2Fsession-chart-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinybirdco%2Fsession-chart-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinybirdco%2Fsession-chart-dashboard/lists"}