synapse-react-client/dist/components/SynapseHomepageV2/SynapseByTheNumbersItem.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsx as o, Fragment as u, jsxs as g } from "react/jsx-runtime";
import { Box as r, Typography as c } from "@mui/material";
import { Plot as v } from "../Plot/Plot.js";
function A({
  title: h,
  description: f,
  rows: a,
  plotXColIndex: x,
  plotYColIndex: m
}) {
  if (a.length == 0)
    return /* @__PURE__ */ o(u, {});
  const i = [], s = [];
  for (const t of a)
    for (let l = 1; l < t.values.length; l += 1) {
      const p = t.values;
      i.push(p[x]), s.push(p[m]);
    }
  const e = s.map((t) => parseFloat(t.toString())), d = [
    {
      type: "scatter",
      mode: "lines",
      fill: "tozeroy",
      fillcolor: "#336663",
      line: {
        color: "#6ba89d",
        shape: "spline",
        //smooth line, will need to do a more complex cubic spline interpolation (introducing new values between the data points) if we want to really smooth this out
        smoothing: 1.3
      },
      x: i,
      y: e,
      hoverinfo: "skip"
      //hide hover over tool tips
    }
  ], y = Math.max(...e), n = Math.min(...e), b = n - n * 0.05;
  return /* @__PURE__ */ g(
    r,
    {
      sx: {
        display: "flex",
        alignItems: "center",
        gap: "15px",
        p: {
          xs: "5px",
          sm: "20px"
        }
      },
      children: [
        /* @__PURE__ */ g(r, { children: [
          /* @__PURE__ */ o(
            c,
            {
              variant: "body1",
              sx: {
                fontWeight: 600,
                fontSize: "32px",
                lineHeight: "40px",
                color: "white"
              },
              children: h
            }
          ),
          /* @__PURE__ */ o(
            c,
            {
              variant: "body1",
              sx: {
                fontWeight: 400,
                fontSize: "18px",
                lineHeight: "24px",
                color: "white"
              },
              children: f
            }
          )
        ] }),
        /* @__PURE__ */ o(
          r,
          {
            sx: {
              //add a linear gradient (fades out near the bottom)
              maskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)"
            },
            children: /* @__PURE__ */ o(v, { layout: {
              showlegend: !1,
              xaxis: {
                visible: !1,
                // Hide x-axis
                showgrid: !1
                // Hide x-axis grid
              },
              yaxis: {
                visible: !1,
                // Hide y-axis
                showgrid: !1,
                // Hide y-axis grid
                range: [b, y]
                // Set the range from half of minY to maxY
              },
              paper_bgcolor: "rgba(0,0,0,0)",
              // Transparent background
              plot_bgcolor: "rgba(0,0,0,0)",
              // Transparent plot area
              width: 170,
              height: 100,
              margin: {
                l: 0,
                r: 0,
                t: 0,
                b: 0,
                pad: 0
              }
            }, data: d, config: {
              displayModeBar: !1,
              // Hide Plotly controls
              staticPlot: !0
              //disable all interactivity
            } })
          }
        )
      ]
    }
  );
}
export {
  A as SynapseByTheNumbersItem
};
//# sourceMappingURL=SynapseByTheNumbersItem.js.map