https://github.com/dalibo/pev2

Postgres Explain Visualizer 2
https://github.com/dalibo/pev2

explain postgresql

Last synced: 11 days ago
JSON representation

Postgres Explain Visualizer 2

• Host: GitHub
• URL: https://github.com/dalibo/pev2
• Owner: dalibo
• License: postgresql
• Created: 2019-08-05T07:00:39.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-08-23T09:20:26.000Z (2 months ago)
• Last Synced: 2024-08-24T09:34:50.269Z (2 months ago)
• Topics: explain, postgresql
• Language: TypeScript
• Homepage: https://explain.dalibo.com
• Size: 8.5 MB
• Stars: 2,541
• Watchers: 28
• Forks: 122
• Open Issues: 61
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

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

plan.

![PEV2 screenshot](pev2_screenshot.png)

# Usage

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

## Dalibo service (recommended)

[explain.dalibo.com](https://explain.dalibo.com)

This service is provided by `Dalibo` and can help you to share your plans with

colleagues or customers.

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

PEV2 can be run locally without any external internet resource.

Simply download

[index.html](https://www.github.com/dalibo/pev2/releases/latest/download/index.html),

open it in your favorite internet browser.

## Integrated in a web application

### Without building tools

```html



  



  const { createApp } = Vue

  const plan = "Seq Scan on foo  (cost=0.00..155.00 rows=10000 width=4)"

  const app = createApp({

    data() {

      return {

        plan: plan,

      }

    },

  })

  app.component("pev2", pev2.Plan)

  app.mount("#app")

```

[See it live](https://stackblitz.com/edit/pev2-vanilla).

### With build tools

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

Install it:

```

npm install pev2

```

Declare the `PEV2` component and use it:

```javascript

import { Plan } from "pev2"

import "pev2/dist/style.css"

export default {

  name: "PEV2 example",

  components: {

    pev2: Plan,

  },

  data() {

    return {

      plan: plan,

      query: query,

    }

  },

}

```

Then add the `PEV2` component to your template:

```html



  



```


`PEV2` requires `Bootstrap (CSS)` to work so don't forget to

add the following in you header (or load them with your favorite bundler).

```html

```

[See it live](https://stackblitz.com/edit/pev2-vite).

# Disclaimer

This project is a rewrite of the excellent [Postgres Explain Visualizer

(pev)][pev]. Kudos go to [Alex Tatiyants][atatiyan].

The [pev][pev] project was initialy written in early 2016 but seems to be

abandoned since then. There was no activity at all for more than 3 years and

counting though there are several issues open and relevant pull requests

pending.

[pev]: https://github.com/AlexTatiyants/pev

[atatiyan]: https://github.com/AlexTatiyants

[demo]: https://dalibo.github.io/pev2

[explain.dali.bo]: https://explain.dalibo.com