> For the complete documentation index, see [llms.txt](https://developer.harness.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.harness.io/internal-developer-portal/use-idp/plugins/available-plugins/dx.md).

# DX

| Plugin details |                                                      |
| -------------- | ---------------------------------------------------- |
| **Created by** | DX                                                   |
| **Category**   | Developer Experience                                 |
| **Source**     | [GitHub](https://github.com/get-dx/backstage-plugin) |
| **Type**       | Open-source plugin                                   |

### Overview <a href="#overview" id="overview"></a>

The **DX plugin** is designed to enhance the overall developer experience and streamline the development process by providing insights, tools, and integrations tailored to support your workflow.

### Configuration <a href="#configuration" id="configuration"></a>

#### Before you begin <a href="#before-you-begin" id="before-you-begin"></a>

Here are the prerequisites required to configure this plugin:

1. **DX\_HOST\_URL**: You can get your **DX Host URL** from <https://app.getdx.com/datacloud/api\\_keys>
2. **DX\_API\_TOKEN**: **Token** can be found at <https://app.getdx.com/datacloud/api\\_keys>

#### Application configuration YAML <a href="#application-configuration-yaml" id="application-configuration-yaml"></a>

Under the **"Plugins"** tab in your **"Configure"** settings, navigate to the `app-config.yaml` file and click **Edit YAML** to begin configuring the plugin.

You can use the following `YAML` snippet as the application configuration for this plugin:

```yaml
proxy:
  endpoints:
    "/dx-web-api":
      target: https://api.getdx.com
      pathRewrite:
        '/api/proxy/dx-web-api/?': '/'  
      headers:
        Authorization: Bearer ${DX_API_TOKEN}
      allowedHeaders:
        - X-Client-Type
        - X-Client-Version
        
dx: #optional
  appId: staging  #optional
```

### Layout <a href="#layout" id="layout"></a>

{% hint style="info" %}
**COMPONENT UPDATE**

In the [latest update](/release-notes/internal-developer-portal.md#breaking-change-dx-plugin--visualization-components-consolidated) of this plugin, all the individual component cards (EntityChangeFailureRateCard, EntityDeploymentFrequencyCard, EntityDORAMetricsContent, EntityDXDashboardContent, EntityLeadTimeCard, EntityOpenToDeployCard, EntityTimeToRecoveryCard, EntityTopContributorsTable) have been **replaced** by the more versatile `DxDataChartCard` component that now covers all this functionality.
{% endhint %}

This plugin exports:

* ❌ 0 Page
* ✅ 3 Cards
* ✅ 2 Tabs

**The following cards can be added to your overview screen**

```yaml
        - component: EntityScorecardsCard
          specs:
            props:
              variant: gridItem
              item: 400
            gridProps:
              md: 6

        - component: EntityTasksCard
          specs:
            props:
              variant: gridItem
              item: 400
            gridProps:
              md: 6

```

**Configure DxDataChartCard**

* Example of Table chart

```yaml
        - component: DxDataChartCard
          specs:
            props:
              title: Recent Deployments
              description: Last 10 deployments
              datafeedToken: your-datafeed-token
              unit: deployments
              chartConfig:
                type: table
            gridProps:
              md: 6
```

* Example of Line chart

```yaml
       - component: DxDataChartCard
          specs:
            props:
              title: Deployment Frequency
              description: Weekly deployments over time
              datafeedToken: your-datafeed-token
              unit: deployments
              chartConfig:
                type: line
                xAxis: date
                yAxis: count
            gridProps:
              md: 6
```

**Similarly the following tabs can be added to your entity:**

```yaml
    - name: EntityScorecardsPage
      path: /dx-scorecards
      title: Scorecards
      contents:
        - component: EntityScorecardsPage

    - name: EntityTasksPage
      path: /dx-tasks
      title: Tasks
      contents:
        - component: EntityTasksPage
```

### Annotations <a href="#annotations" id="annotations"></a>

As of now you do not really need annotations to configure the plugin.

Although make sure that the Entity identifier of DX should match with the `Identifier` of IDP 2.0.

### Support <a href="#support" id="support"></a>

The plugin is owned by **DX** and managed in this [repository](https://github.com/get-dx/backstage-plugin) as an open-source project. Create a GitHub issue to report bugs or suggest new features for the plugin.