bands-visualiser/src/utils/MCXDPlotTemplates.js

A JavaScript library for visualising bandstructures.

// default layouts - use deepmerge to spread without overwrites.
import deepmerge from "deepmerge";

export const plotLayoutDefault = {
  title: "Multi Trace Plot with border",
  hovermode: "closest", // or 'x unified'
  uirevision: true,
  shapes: [
    {
      type: "rect",
      xref: "paper",
      yref: "paper",
      x0: 0,
      y0: 0,
      x1: 1,
      y1: 1,
      line: {
        color: "black",
        width: 2,
      },
      layer: "above",
    },
  ],
  margin: { l: 55, r: 10, t: 10, b: 45 },
  dragmode: "zoom",
  xaxis: {
    title: {
      text: "x-axis",
      font: {
        size: 18,
        color: "#212529",
      },
    },
    showgrid: true,
    showline: false,
    zeroline: false,
    ticks: "inside",
    tickfont: {
      size: 16,
      color: "#212529",
    },
  },
  yaxis: {
    title: {
      text: "y-axis",
      font: {
        size: 19,
        color: "#212529",
      },
    },
    showgrid: true,
    zeroline: false,
    showline: false,
    ticks: "inside",
    color: "#212529",
    tickfont: {
      color: "#212529",
      size: 19,
    },
  },
  legend: {
    x: 1.01, // Slightly outside the plot area
    y: 1.0,
    xanchor: "left", // Anchor legend box to its left edge
    yanchor: "top",
    orientation: "v",
  },
};

// using deepmerge to keep constants
export const plotBandLayout = deepmerge(plotLayoutDefault, {
  title: "BSPlot",
  xaxis: {
    title: {
      text: "K-path",
      font: {
        size: 18,
        color: "#212529",
      },
    },
    showgrid: true,
    showline: false,
    zeroline: false,
    ticks: "inside",
    tickfont: {
      size: 16,
      color: "#212529",
    },
  },
  yaxis: {
    title: {
      text: "Energy [eV]",
      font: {
        size: 19,
        color: "#212529",
      },
    },
    showgrid: true,
    zeroline: false,
    showline: false,
    ticks: "inside",
    color: "#212529",
    tickfont: {
      color: "#212529",
      size: 19,
    },
  },
});

export const plotDOSLayout = deepmerge(plotLayoutDefault, {
  title: "DOSPlot",
  xaxis: {
    title: {
      text: "Energy [eV]",
      font: {
        size: 18, // Font size of the title
        color: "#212529", // Matches heading colors
      },
    },
    showgrid: true,
    zeroline: false,
    ticks: "inside",
    tickfont: {
      size: 16,
      color: "#212529",
    },
  },
  yaxis: {
    title: {
      text: "Density of States",
      font: {
        size: 18, // Font size of the title
        color: "#212529", // Matches heading colors
      },
    },
    showgrid: true,
    zeroline: false,
    ticks: "inside",
    tickfont: {
      size: 16,
      color: "#212529",
    },
  },
});

export const plotDOSLayoutF = deepmerge(plotLayoutDefault, {
  title: "DOSPlot",
  xaxis: {
    title: {
      text: "Density of States",
      font: {
        size: 18, // Font size of the title
        color: "#212529", // Matches heading colors
      },
    },
    showgrid: true,
    zeroline: false,
    ticks: "inside",
    tickfont: {
      size: 16,
      color: "#212529",
    },
  },
  yaxis: {
    title: {
      text: "Energy [eV]",
      font: {
        size: 18, // Font size of the title
        color: "#212529", // Matches heading colors
      },
    },
    showgrid: true,
    zeroline: false,
    ticks: "inside",
    tickfont: {
      size: 16,
      color: "#212529",
    },
  },
});

// utils/defaultCombinedLayout.js
export const plotCombinedLayout = {
  shapes: [
    {
      type: "rect",
      xref: "paper",
      yref: "paper",
      x0: 0,
      y0: 0,
      x1: 0.7,
      y1: 1,
      line: { color: "black", width: 2 },
      layer: "above",
    },
    {
      type: "rect",
      xref: "paper",
      yref: "paper",
      x0: 0.73,
      y0: 0,
      x1: 1.0,
      y1: 1.0,
      line: { color: "black", width: 2 },
      layer: "above",
    },
  ],
  grid: {
    rows: 1,
    columns: 2,
    pattern: "independent",
  },
  xaxis: {
    domain: [0, 0.7],
    autorange: true,
  },
  xaxis2: {
    title: {
      text: "Energy [eV]",
      font: {
        size: 18, // Font size of the title
      },
    },
    showgrid: true,
    zeroline: false,
    ticks: "inside",
    tickfont: {
      size: 16,
      color: "#212529",
    },
    domain: [0.73, 1],
    autorange: true,
    showgrid: true,
  },
  yaxis: {
    autorange: true,
  },
  margin: {
    l: 60,
    r: 30,
    b: 40,
    t: 40,
  },
  showlegend: true,
  legend: {},
};

export const traceDefaultBands = {
  mode: "lines",
  dash: "solid",
  line: {
    color: "rgba(90, 60, 255, 0.85)",
    width: 1.0,
  },
  name: "Band Structure",
};

export const traceDefaultDos = {
  name: "DOS",
  legendgroup: "DOS",
  showlegend: true,
  type: "scatter",
  mode: "lines",
  dash: "dash",
  line: {
    color: "rgba(90, 60, 255, 0.85)",
    width: 2.0,
  },
  fill: "toself",
};

export const traceDefaultProj = {
  name: "Projection",
  legendgroup: "Projection",
  type: "scatter",
  mode: "lines",
  fill: "toself",
  color: "rgba(178, 56, 123, 0.8)",
  showlegend: true,
  line: {
    color: "rgba(90, 60, 255, 0.85)",
    width: 2.0,
  },
  fill: "toself",
};