{"_id":"@avaliasystems/backstage-plugin-vega","_rev":"1-3774be5b4086d77e318e72122d856a4f","name":"@avaliasystems/backstage-plugin-vega","dist-tags":{"latest":"0.3.1"},"versions":{"0.3.0":{"name":"@avaliasystems/backstage-plugin-vega","version":"0.3.0","main":"src/index.ts","types":"src/index.ts","license":"Apache-2.0","publishConfig":{"access":"public","main":"dist/index.esm.js","types":"dist/index.d.ts"},"backstage":{"role":"frontend-plugin"},"scripts":{"start":"backstage-cli package start","build":"backstage-cli package build","lint":"backstage-cli package lint","test":"backstage-cli package test","clean":"backstage-cli package clean","prepack":"backstage-cli package prepack","postpack":"backstage-cli package postpack"},"dependencies":{"@backstage/core-components":"^0.11.1","@backstage/core-plugin-api":"^1.0.3","@backstage/theme":"^0.2.15","@material-ui/core":"^4.9.13","@material-ui/icons":"^4.9.1","@material-ui/lab":"4.0.0-alpha.57","@types/d3":"^7.4.0","app":"^0.3.0","d3-dsv":"^3.0.1","d3-scale":"^4.0.2","react-use":"^17.2.4","react-vega":"^7.5.1","types":"^0.1.1","vega":"^5.22.1","vega-lite":"^5.2.0","workspace":"^0.0.1-preview.1"},"peerDependencies":{"react":"^16.13.1 || ^17.0.0"},"devDependencies":{"@backstage/cli":"^0.19.0","@backstage/core-app-api":"^1.0.3","@backstage/dev-utils":"^1.0.3","@backstage/test-utils":"^1.1.0","@testing-library/jest-dom":"^5.10.1","@testing-library/react":"^12.1.3","@testing-library/user-event":"^14.0.0","@types/jest":"*","@types/node":"*","cross-fetch":"^3.1.5","msw":"^0.42.0"},"resolutions":{},"gitHead":"87af73e352406000d1a2273319b6a72a9df8d9a9","description":"","_id":"@avaliasystems/backstage-plugin-vega@0.3.0","_nodeVersion":"16.13.0","_npmVersion":"lerna/4.0.0/node@v16.13.0+x64 (darwin)","dist":{"integrity":"sha512-ne/4ND71oL+kngzbQQWrSXQi/yPWzNIqBs3sX9smBte9i0N0E2xx9O3fAS86ZKEtzhhhDMmcABqpWLQQ1F56HA==","shasum":"5c9f500f1c99ac5b8ee8c3e4dc32f925d0995428","tarball":"https://registry.npmjs.org/@avaliasystems/backstage-plugin-vega/-/backstage-plugin-vega-0.3.0.tgz","fileCount":8,"unpackedSize":35956,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIByDJYa4cahUSedCiSHFVqYdZo+tl04IPtIQcsGL4yrVAiEAhc2Z9lbnWji7TRiQOs0isa/DadUpZ7eSTtJDA6AXyJs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUjNUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrxtg/+M2fDtNrPTdkHFpAtoT1elk9+hWagAHdJKw3OCI6rzTWFmJHa\r\nQzcKuNNio+r2WZM4QW1G4tlWDLyLsUARGQ1IIocxaM7aWl2qrhUrEopcFdMP\r\nCzjM0rrL0/aGK9a04DQrzQMPhEUyK+siWBTVpMv70kZ1GoY3PEBQbJo9Cd83\r\ngoZYaOeJxZx6zThTKYWjzP4/uSzM+hlZv3Coe17uFMVC/XOByXWtpWbvnUfx\r\n266MwySERGZANSra3Z8hjnQ5kukX62J8j02Gg5KdfoJiu+OqIHUgtaUu357x\r\naUsArmpGQJIQskymrUOaph4Gr8DvcUjKPIJZBzjDcZeKUnAT2geNFrV1by0P\r\nqbviybJGETs8h6KCmDqUaCerq3IKYW8K5umu8LJbU9bMkLcnlKuJUUPqEUnN\r\nMSBMcyIsjTlvJ/060fCi9+/KnqigMtiEPSn2Ccqinqd2ffcrYzv8WrsV9R66\r\nt94/eVCWGwkuRx9E5hSD7P/e6brJFgrQTIH27BmBeUCwOPQ7cQylC/q2wbuW\r\nIPSNgDZDbgmnJzfVDOkyBmpj0HoW1Hn9GWKC8cYej28POhSyzDXkR6ZmR718\r\nAzyX/ZMR2SXfBSR5WDMByXZtrDG5aYRc+u5uK4rjB5P6OWktKqtV/3jGSaB+\r\n5OhV9tMqwx8WREkiBvBuGEAN227FD5GyRTQ=\r\n=RyH4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"avalia-npm-user","email":"olivier@avalia.systems"},"directories":{},"maintainers":[{"name":"avalia-npm-user","email":"olivier@avalia.systems"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/backstage-plugin-vega_0.3.0_1666331476672_0.9612922367466006"},"_hasShrinkwrap":false},"0.3.1":{"name":"@avaliasystems/backstage-plugin-vega","version":"0.3.1","main":"src/index.ts","types":"src/index.ts","license":"Apache-2.0","publishConfig":{"access":"public","main":"dist/index.esm.js","types":"dist/index.d.ts"},"backstage":{"role":"frontend-plugin"},"scripts":{"start":"backstage-cli package start","build":"backstage-cli package build","lint":"backstage-cli package lint","test":"backstage-cli package test","clean":"backstage-cli package clean","prepack":"backstage-cli package prepack","postpack":"backstage-cli package postpack"},"dependencies":{"@backstage/core-components":"^0.11.1","@backstage/core-plugin-api":"^1.0.3","@backstage/theme":"^0.2.15","@material-ui/core":"^4.9.13","@material-ui/icons":"^4.9.1","@material-ui/lab":"4.0.0-alpha.57","@types/d3":"^7.4.0","d3-dsv":"^3.0.1","d3-scale":"^4.0.2","react-use":"^17.2.4","react-vega":"^7.5.1","types":"^0.1.1","vega":"^5.22.1","vega-lite":"^5.2.0","workspace":"^0.0.1-preview.1"},"peerDependencies":{"react":"^16.13.1 || ^17.0.0"},"devDependencies":{"@backstage/cli":"^0.19.0","@backstage/core-app-api":"^1.0.3","@backstage/dev-utils":"^1.0.3","@backstage/test-utils":"^1.1.0","@testing-library/jest-dom":"^5.10.1","@testing-library/react":"^12.1.3","@testing-library/user-event":"^14.0.0","@types/jest":"*","@types/node":"*","cross-fetch":"^3.1.5","msw":"^0.42.0"},"resolutions":{},"gitHead":"576083528b185575ebc7b158f8b7c1c41f62987d","description":"","_id":"@avaliasystems/backstage-plugin-vega@0.3.1","_nodeVersion":"16.13.0","_npmVersion":"lerna/4.0.0/node@v16.13.0+x64 (darwin)","dist":{"integrity":"sha512-9CGDKZE0ajzXt8t2nDFRO5IK8GPTRcd5TygvXw7R5US+gSfaOE5ptO+BDhhJcdQ+2Lp8c7ikRBxKB5j5FdBopA==","shasum":"9dff1c98603a4563d633b47a658a524847a9b4fc","tarball":"https://registry.npmjs.org/@avaliasystems/backstage-plugin-vega/-/backstage-plugin-vega-0.3.1.tgz","fileCount":8,"unpackedSize":35935,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAmvBl+VoKWKDa9oq2bSuQ6ojBXiwZJQFQhis+6pciAgAiEApFlEHK9i8Tx1DW7Yxw/QaGfN3TdcO6u0v0CfNpb91pw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUjaWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYQhAAkqtLLeFD4dzuXSTUbNUl828HxxE6FCTibRaFTGKJ+4EgCdP1\r\nU9NFAeY3hkZuPBtJMdDdcqSRND89Yr9HqyguZRqUvdCO/BYdwAg3uM2nraWX\r\n2lcJxyVqPoXctGrsWyDnl67uBH1j+lfV6gVS52bTyNmtxB2vqEPtai/tyR0E\r\nu3MnRIVy+s6Y5BW0n7jEe8OymrEFzlIKdJ9N9YJ2k+14X404/nhs5lkR/FY1\r\nJaCciIJiTGciqWWhU4HeZ3IgKRFqKmKLqawSVg6XF06xVlQa3kyUVO7xiMj+\r\nk5UraWb9M63Abk+6fkQZDkxr+W+lRCqspREcl4jviU7z60iBbkCvWBRAx6Hn\r\nvovsjcqOtHX8szx+45FLz+X9PSC3RO9E0Ie2gsX2BIdonm+YStkG745fZudM\r\nIqWfI5ZZvHzGVDsoJNltCJQHjIIEFjkGqyUWorQaKMh4yGww3ueBlNwtmO8l\r\ngJ99Z6pHj3e4mXUe8y2jqa9GNVaT3O5K8EwwSQjiEuQvltKPlhM6cvLWcmXx\r\n66mvcNJth05xPQDu/8n88eB3aefU7ZmxuAulBuuGBAUkWncgzn/Oz5VNXJpE\r\nxKOnBojIKc38eWPpaxAhjyb+jCrREqLxN1sG4RyS3aeOEhdz0cM6Betcg65s\r\nHQcilqSmrV5dtmEk09ihio+ujtp6YzMt0Jg=\r\n=gnV1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"avalia-npm-user","email":"olivier@avalia.systems"},"directories":{},"maintainers":[{"name":"avalia-npm-user","email":"olivier@avalia.systems"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/backstage-plugin-vega_0.3.1_1666332310511_0.8762563459472394"},"_hasShrinkwrap":false}},"time":{"created":"2022-10-21T05:51:16.624Z","0.3.0":"2022-10-21T05:51:16.835Z","modified":"2022-10-21T06:05:10.778Z","0.3.1":"2022-10-21T06:05:10.670Z"},"maintainers":[{"name":"avalia-npm-user","email":"olivier@avalia.systems"}],"license":"Apache-2.0","readme":"# backstage-plugin-vega\n\n\n\n## Overview\n\nThe Vega plugin allows you to render a [Vega.js](https://vega.github.io/vega/) specification in your Backstage pages.\n\n![](./docs/dashboard.png)\n\n\n\n## How to use the Vega plugin\n\n1. Install the plugin from the root directory\n\n```bash\nyarn add @avaliasystems/backstage-plugin-vega\n```\n\n2. Create a vega specification\n\n```\ntouch `app/public/demo/vega-widget/git-authors.json`\n```\n\n3. Add the widget to a page and reference the vega specification\n\n```\nimport {\n VegaWidget,\n VegaLibrary,\n} from '@avaliasystems/plugin-backstage-plugin-vega';\n```\n\n```\nconst useStyles = makeStyles(() => ({\n grid: {\n display: 'flex',\n },\n item: {\n padding: '1rem',\n flexGrow: 1,\n flexShrink: 1,\n height: '350px',\n width: '300px'\n },\n}));\n```\n\n```\n
\n
\n \n
\n
\n \n
\n
\n```\n\n\n\n## TODO\n\n* **Improve dynamic sizing**. There are different ways to manage the size of charts rendered by Vega. If you provide fixed width and height, this is easy to handle. However, if you want the chart to use available space as the user resizes the window, the situation is a bit tricky. As demonstrated in the `Vega (grid)` example page, we have a solution for this use case. However, it requires all DOM ancestors to have the `overflow: auto` property set.\n* **Add wrapper components**. At the moment, the page developer has to create the \"frame\" into which the Vega widget will be rendered. In the example pages, the page developer is creating and styling the grid that will host the charts. This gives a lot of flexibility to developers, but it has some onboarding cost. We plan to add some ready-to-use components that would make it faster to create dashboard pages, or widget \"rows\" in an entity tab.\n* **Improve and document theming**. It is possible to update a Vega specification, both when it is first loaded and afterwards. With some conventions in the Vega specifications, it is possible to inject Backstage theme properties into the chart. We have already made some experiments and it works well, but have work to improve and document the solution.\n\n\n\n## Notes\n\nYour plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/backstage-plugin-vega](http://localhost:3000/backstage-plugin-vega).\n\nYou can also serve the plugin in isolation by running `yarn start` in the plugin directory.\nThis method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.\nIt is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.\n","readmeFilename":"README.md"}