https://github.com/showplan/showplan-vue
Vue.js visualization component for SQL Server SHOWPLAN XML Files
https://github.com/showplan/showplan-vue
sqlserver
Last synced: 2 months ago
JSON representation
Vue.js visualization component for SQL Server SHOWPLAN XML Files
- Host: GitHub
- URL: https://github.com/showplan/showplan-vue
- Owner: showplan
- License: mit
- Created: 2019-04-18T13:03:40.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T22:46:04.000Z (over 3 years ago)
- Last Synced: 2025-08-20T00:30:18.837Z (10 months ago)
- Topics: sqlserver
- Language: Vue
- Size: 1.88 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: readme.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ShowPlan-Vue
ShowPlan-Vue is a Vue.js component for rendering [showplan.js](https://github.com/showplan/showplan-js) parsed SQL Server SHOWPLAN XML files into a strongly typed object.
[](https://badge.fury.io/js/showplan-vue)
## Installation
Use NPM or YARN to install foobar.
```bash
yarn add showplan-vue
```
## Usage
```html
```
``` typescript
import { Statement as ShowplanStatement } from 'showplan-vue';
import 'showplan-vue/dist/showplan-vue.css';
// showplan.js is required for parsing XML files
import { ShowPlanParser } from 'showplan-js';
const showPlan = ShowPlanParser.Parse(showPlanXml);
```
ShowPlan-Vue uses CSS variables for its styling.
```sass
body{
--background: #fff;
--foreground: rgba(0, 0, 0, 0.8);
--alt-background: #F1F1EF;
--border: rgba(0,0,0,.25);
--alt-border: rgba(0,0,0,.2);
--red: #A71D5D;
--blue: #183691;
--green: #63a35c;
--grey: #969896;
--brown: #75715E;
--orange: #df5000;
--purple: #795da3;
--light-blue: #445588;
}
```
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
## License
[MIT](https://choosealicense.com/licenses/mit/)