Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
forked fromdalibo/pev2

Postgres Explain Visualizer 2 🙈 adapted to GPDB/HAWQ

License

NotificationsYou must be signed in to change notification settings

chiyang10000/pev2

 
 

Repository files navigation

PEV2: A VueJS component to show a graphical vizualization of a PostgreSQL executionplan.

To use the explain vizualizer you can choose one of the following options:

Dalibo service (recommended)

explain.dalibo.com

This service is provided byDalibo and can help you to share your plans withcolleagues or customers.

All-in-one local (no installation, no network)

PEV2 can be run locally without any external internet resource.

Simply downloadindex.html,open it in your favorite internet browser.

Integrated in a web application

Without building tools

<scriptsrc="https://unpkg.com/vue@3.2.37/dist/vue.global.prod.js"></script><scriptsrc="https://unpkg.com/pev2/dist/pev2.umd.js"></script><linkhref="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css"rel="stylesheet"/><linkrel="stylesheet"href="https://unpkg.com/pev2/dist/style.css"/><divid="app"><pev2:plan-source="plan"plan-query=""/></div><script>const{ createApp}=Vueconstplan="Seq Scan on foo  (cost=0.00..155.00 rows=10000 width=4)"constapp=createApp({data(){return{plan:plan,}},})app.component("pev2",pev2.Plan)app.mount("#app")</script>

For a complete example, seethis codesandbox

With build tools

PEV2 can be integrated as a component in a web application.

Install it:

npm install pev2

Declare thePEV2 component and use it:

import{Plan}from"pev2"import"pev2/dist/style.css"exportdefault{name:"PEV2 example",components:{pev2:Plan,},data(){return{plan:plan,query:query,}},}

Then add thePEV2 component to your template:

<divid="app"><pev2:plan-source="plan":plan-query="query"></pev2></div>

PEV2 requiresBootstrap (CSS) to work so don't forget toadd the following in you header (or load them with your favorite bundler).

<linkhref="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css"rel="stylesheet"/>

For a complete example, seethis codesandbox.

Disclaimer

This project is a rewrite of the excellentPostgres Explain Visualizer(pev). Kudos go toAlex Tatiyants.

Thepev project was initialy written in early 2016 but seems to beabandoned since then. There was no activity at all for more than 3 years andcounting though there are several issues open and relevant pull requestspending.

About

Postgres Explain Visualizer 2 🙈 adapted to GPDB/HAWQ

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript78.6%
  • Vue18.2%
  • SCSS1.8%
  • HTML0.5%
  • PLpgSQL0.5%
  • CSS0.3%
  • Other0.1%

[8]ページ先頭

©2009-2025 Movatter.jp