Unable to resize dashboard slices in superset

Question

I'm using apache-superset python package to build a dashboard. I'm unable to re-arrange/resize the plots in the dashboard. As per the documentation,

you can adjust the size of slices in a dashboard by clicking, holding and dragging the bottom-right corner to your desired dimensions

but this doesn't seem to be working.

Answer 1

If you're on a recent-enough version of superset, you should see a small caret at the bottom right of each slice. Like this:

You should be able to click, hold, and drag it to adjust your slice height and width.

Answer 2

Crete Angular app in which create created superset module. Add this code in superset.component.html

superset.component.html

<div id='superset-container'></div>

Add this code to your superset.component.ts file in ngOnInit() method this code reference I have taken from Superset Embedded SDK. For token you have to write your logic for getting token from apache superset inside this method fetchGuestTokenFromBackend().

    const mountPoint = document.getElementById("superset-container");

    const token = await this.fetchGuestTokenFromBackend();
    await await this.fetchGuestTokenFromBackend().then(e=>{
        this.guest_token=JSON.parse(JSON.stringify(e)).token;
      });
    embedDashboard({
        id: "25579002-9e70-401e-aca2-ef8ceb220fd0",  // given by the Superset embedding UI
        supersetDomain: "https://localhost:8088",
        mountPoint: mountPoint,
        fetchGuestToken: async () => this.guest_token,
        dashboardUiConfig: { hideTitle: true },
     });

Add this code to your superset.component.css file to resize the superset dashboard. superset.component.css

    div#superset-container>>>iframe  {
      border: 0;
      width: 1000px;
      height: 500px;
    }

The complete code is here.

superset.component.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { embedDashboard, EmbedDashboardParams, Size } from "@superset-ui/embedded-sdk";
import { Observable } from 'rxjs';

@Component({
  selector: 'app-superset',
  templateUrl: './superset.component.html',
  styleUrls: ['./superset.component.css']
})
export class SupersetComponent implements OnInit {


  access_token:string;
  guest_token:string;
  constructor(public http:HttpClient) {}
  async ngOnInit(){
    const mountPoint = document.getElementById("superset-container");
    const token = await this.fetchGuestTokenFromBackend();
    await await this.fetchGuestTokenFromBackend().then(e=>{
        this.guest_token=JSON.parse(JSON.stringify(e)).token;
      });
    embedDashboard({
        id: "25579002-9e70-401e-aca2-ef8ceb220fd0",  // given by the Superset embedding UI
        supersetDomain: "https://localhost:8088",
        mountPoint: mountPoint,
        fetchGuestToken: async () => this.guest_token,
        dashboardUiConfig: { hideTitle: true },
     });
  }


    async fetchGuestTokenFromBackend(): Promise<string> {
      await this.fetchMainTokenFromBackend().then(e=>{
      this.access_token=e.access_token;
      });
      const httpOptions = {
      headers: new HttpHeaders({
        'content-type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Authorization':'Bearer '+this.access_token
      })
    };
    const body={
    "user": {
        "username": "admin",
        "first_name": "admin",
        "last_name": "admin"
    },
    "resources": [
        {
            "type": "dashboard",
            "id": "25579002-9e70-401e-aca2-ef8ceb220fd0"
        }
    ],
    "rls": [
        {
            "clause": "customer_id=1"
        }
    ]
    }
    return this.http.post<string>("https://localhost:8088/api/v1/security/guest_token/",body,httpOptions).toPromise();
 }

 fetchMainTokenFromBackend(): Promise<any> {
   const httpOptions = {
      headers: new HttpHeaders({
        'content-type': 'application/json',
        'Access-Control-Allow-Origin': '*'
      })
    };
    const body={
      "password":"admin",
      "provider":"db",
      "refresh":true,
      "username":"admin"
      }
  return this.http.post("https://localhost:8088/api/v1/security/login",body,httpOptions).toPromise();
 }
   
}