assets/js/dashAgGridComponentFunctions.js

var dagcomponentfuncs = (window.dashAgGridComponentFunctions =
  window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.ImgThumbnail = function (props) {
  const { setData, data } = props;

  function onClick() {
    setData(props.value);
  }

  return React.createElement(
    "div",
    {
      style: {
        width: "100%",
        height: "100%",
        display: "flex",
        alignItems: "center",
      },
    },
    React.createElement("img", {
      onClick: onClick,
      style: { width: "100%", height: "auto" },
      src: props.value,
    }),
  );
};

// use for making dbc.Button without icons
dagcomponentfuncs.DBC_Button = function (props) {
  const { setData } = props;

  function onClick() {
    setData();
  }

  return React.createElement(
    window.dash_bootstrap_components.Button,
    {
      onClick,
      href: props.value,
      external_link: true,
      target: "_blank",
    },
    "Visit Store →",
  );
};

// BADGE INSIDE AG GRID
dagcomponentfuncs.DBC_Badge = function (props) {
  const { value, colorMap } = props;

  const parsedColorMap =
    typeof colorMap === "string" ? JSON.parse(colorMap) : colorMap;
  const bgColor = parsedColorMap?.[value] || "#000000";

  console.log("Badge props:", props); // Debugging step

  return React.createElement(
    window.dash_bootstrap_components.Badge,
    {
      style: {
        cssText: `background-color: ${bgColor} !important; color: #00000;`,
      },
    },
    value,
  );
};