Lifecycle events

What are lifecycle hooks?

Muze exposes a set of lifecycle events. All these events take in a callback function which is then invoked based on the lifecycle event. This allows the user to add custom effects at a certain stage in the chart creation.

Canvas layout

beforeLayout: Fired before the layout is calculated for a component.

canvas.once("beforeLayout", () => {
  // Perform custom operation
  console.log("Canvas before layout");
});

afterLayout: Fired after the layout is calculated for a component.

canvas.once("afterLayout", () => {
  // Perform custom operation
  console.log("Canvas after layout");
});

Drawing complete

beforeRendered: Fired before a component is rendered.

canvas.once("beforeRendered", () => {
  // Perform custom operation
  console.log("Canvas before render");
});

afterRendered: Fired after chart has been drawn (before animation and side-effects).

canvas.once("afterRendered", () => {
  // Perform custom operation
  console.log("Canvas after render");
});

Animation end

animationEnd: Fired after chart is rendered and animation done.

canvas.once("animationEnd", () => {
  // Perform custom operation
  console.log("Animation end");
});

Canvas dispose

beforeDisposed: Fired before a component is destroyed.

canvas.once("beforeDisposed", () => {
  // Perform custom operation
  console.log("Canvas before dispose");
});

afterDisposed: Fired after a component is destroyed.

canvas.once("afterDisposed", () => {
  // Perform custom operation
  console.log("Canvas after dispose");
});

Example

Below, we add a red border on the chart on animationEnd (notice it appears just after animation completes).

const { muze, getDataFromSearchQuery } = viz;

const data = getDataFromSearchQuery();

muze
  .canvas()
  .rows(["Acceleration"])
  .columns(["Origin"])
  .config({
    border: {
      showValueBorders: {
        left: true,
        bottom: true,
      },
    },
  })
  .data(data)
  .width(700)
  .height(700)
  .mount("#chart");

canvas.once("beforeLayout", () => {
  // Add red border on canvas before layout
  setTimeout(() => {
    canvas.config({
      border: {
        style: "solid",
        color: "red",
        width: 2,
      },
    });
  }, 1000);
});

canvas.once("afterLayout", () => {
  // Add green border on canvas after layout
  setTimeout(() => {
    canvas.config({
      border: {
        style: "solid",
        color: "green",
        width: 2,
      },
    });
  }, 2000);
});

canvas.once("beforeRendered", () => {
  // Add purple border on canvas before render
  setTimeout(() => {
    canvas.config({
      border: {
        style: "solid",
        color: "purple",
        width: 2,
      },
    });
  }, 3000);
});

canvas.once("afterRendered", () => {
  // Add orange border on canvas after render
  setTimeout(() => {
    canvas.config({
      border: {
        style: "solid",
        color: "orange",
        width: 2,
      },
    });
  }, 4000);
});

canvas.once("animationEnd", () => {
  // Add blue border on canvas animation done
  setTimeout(() => {
    canvas.config({
      border: {
        style: "solid",
        color: "blue",
        width: 2,
      },
    });

    setTimeout(() => {
      canvas.dispose();
    }, 1000);
  }, 5000);
});

canvas.once("beforeDisposed", () => {
  // Add black border on canvas before dispose
  setTimeout(() => {
    canvas.config({
      border: {
        style: "solid",
        color: "black",
        width: 2,
      },
    });
  }, 6000);
});

canvas.once("afterDisposed", () => {
  const chart = document.getElementById("chart");

  const div = document.createElement("div");
  div.innerHTML = "Canvas disposed";
  chart.appendChild(div);
});