ShowPlan-Vue is a Vue.js component for rendering showplan.js parsed SQL Server SHOWPLAN XML files into a strongly typed object.
Use NPM or YARN to install foobar.
yarn add showplan-vue<showplan-statement :showPlan="showPlan"></showplan-statement>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.
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;
}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.