charts example

examples/charts/.gitignore

@@ -0,0 +1,129 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz

examples/charts/README.md

@@ -0,0 +1,33 @@
+# Charts in Toolpad
+
+<p class="description">A Toolpad app that shows how to use charts to build an analytics dashboard.</p>
+
+<a target="_blank">
+ <img src="https://mui.com//static/toolpad/marketing/charts.png" alt="Charts in Toolpad" style="aspect-ratio: 1.8" width="100%">
+</a>
+
+## How to run
+
+Download the example [or clone the repo](https://github.com/mui/mui-toolpad):
+
+<!-- #default-branch-switch -->
+
+```bash
+curl https://codeload.github.com/mui/mui-toolpad/tar.gz/master | tar -xz --strip=2 mui-toolpad-master/examples/charts
+cd charts
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+## What's inside
+
+This app demonstrates the following capabilities of Toolpad:
+
+1. Usage of the four types of charts.
+
+[Check out the source code](https://github.com/mui/mui-toolpad/tree/master/examples/charts)

examples/charts/package.json

@@ -0,0 +1,13 @@
+{
+ "name": "charts",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "toolpad dev",
+ "build": "toolpad build",
+ "start": "toolpad start"
+ },
+ "dependencies": {
+ "@mui/toolpad": "0.1.36"
+ }
+}

examples/charts/toolpad/.gitignore

@@ -0,0 +1 @@
+.generated

examples/charts/toolpad/pages/page/page.yml

@@ -0,0 +1,91 @@
+apiVersion: v1
+kind: page
+spec:
+ id: tffH0lV
+ title: Default page
+ content:
+ - component: PageRow
+ name: pageRow
+ props:
+ justifyContent: start
+ children:
+ - component: Chart
+ name: chart
+ props:
+ data:
+ - label: No. of movies released per year
+ kind: line
+ data:
+ $$jsExpression: |
+ query1.data.map((movie) => ({
+ year: movie.year,
+ count_id: query1.data.reduce((acc, currentMovie) => {
+ return currentMovie.year === movie.year ? acc + 1 : acc
+ }, 0),
+ }))
+ color: '#f44336'
+ xKey: year
+ yKey: count_id
+ - component: Chart
+ name: chart1
+ props:
+ data:
+ - label: No. of movies released per year
+ kind: bar
+ data:
+ $$jsExpression: |
+ query1.data.map((movie) => ({
+ year: movie.year,
+ count_id: query1.data.reduce((acc, currentMovie) => {
+ return currentMovie.year === movie.year ? acc + 1 : acc
+ }, 0),
+ }))
+ color: '#673ab7'
+ xKey: year
+ yKey: count_id
+ - component: Chart
+ name: chart2
+ props:
+ data:
+ - label: No. of movies released per year
+ kind: area
+ data:
+ $$jsExpression: |
+ query1.data.map((movie) => ({
+ year: movie.year,
+ count_id: query1.data.reduce((acc, currentMovie) => {
+ return currentMovie.year === movie.year ? acc + 1 : acc
+ }, 0),
+ }))
+ color: '#00bcd4'
+ xKey: year
+ yKey: count_id
+ layout:
+ columnSize: 1
+ - component: Chart
+ name: chart3
+ props:
+ data:
+ - label: No. of movies released per year
+ kind: scatter
+ data:
+ $$jsExpression: |
+ query1.data.map((movie) => ({
+ year: Number(movie.year),
+ count_id: query1.data.reduce((acc, currentMovie) => {
+ return currentMovie.year === movie.year ? acc + 1 : acc
+ }, 0),
+ }))
+ color: '#4caf50'
+ xKey: year
+ yKey: count_id
+ queries:
+ - name: query1
+ query:
+ kind: rest
+ headers: []
+ method: GET
+ transform: return data.movies;
+ transformEnabled: true
+ searchParams: []
+ display: shell