@grafana/flamegraph/dist/cjs/ColorSchemeButton.cjs

Grafana flamegraph visualization component

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var ui = require('@grafana/ui');
var colors = require('./FlameGraph/colors.cjs');
var types = require('./types.cjs');

"use strict";
function ColorSchemeButton(props) {
  const styles = ui.useStyles2(getStyles);
  let menu = /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, { children: [
    /* @__PURE__ */ jsxRuntime.jsx(ui.Menu.Item, { label: "By package name", onClick: () => props.onChange(types.ColorScheme.PackageBased) }),
    /* @__PURE__ */ jsxRuntime.jsx(ui.Menu.Item, { label: "By value", onClick: () => props.onChange(types.ColorScheme.ValueBased) })
  ] });
  const colorDotStyle = {
    [types.ColorScheme.ValueBased]: styles.colorDotByValue,
    [types.ColorScheme.PackageBased]: styles.colorDotByPackage,
    [types.ColorSchemeDiff.DiffColorBlind]: styles.colorDotDiffColorBlind,
    [types.ColorSchemeDiff.Default]: styles.colorDotDiffDefault
  }[props.value] || styles.colorDotByValue;
  let contents = /* @__PURE__ */ jsxRuntime.jsx("span", { className: css.cx(styles.colorDot, colorDotStyle) });
  if (props.isDiffMode) {
    menu = /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, { children: [
      /* @__PURE__ */ jsxRuntime.jsx(ui.Menu.Item, { label: "Default (green to red)", onClick: () => props.onChange(types.ColorSchemeDiff.Default) }),
      /* @__PURE__ */ jsxRuntime.jsx(ui.Menu.Item, { label: "Color blind (blue to red)", onClick: () => props.onChange(types.ColorSchemeDiff.DiffColorBlind) })
    ] });
    contents = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles.colorDotDiff, colorDotStyle), children: [
      /* @__PURE__ */ jsxRuntime.jsx("div", { children: "-100% (removed)" }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { children: "0%" }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { children: "+100% (added)" })
    ] });
  }
  return /* @__PURE__ */ jsxRuntime.jsx(ui.Dropdown, { overlay: menu, children: /* @__PURE__ */ jsxRuntime.jsx(
    ui.Button,
    {
      variant: "secondary",
      fill: "outline",
      size: "sm",
      tooltip: "Change color scheme",
      onClick: () => {
      },
      className: styles.buttonSpacing,
      "aria-label": "Change color scheme",
      children: contents
    }
  ) });
}
const getStyles = (theme) => ({
  buttonSpacing: css.css({
    label: "buttonSpacing",
    marginRight: theme.spacing(1)
  }),
  colorDot: css.css({
    label: "colorDot",
    display: "inline-block",
    width: "10px",
    height: "10px",
    borderRadius: theme.shape.radius.circle
  }),
  colorDotDiff: css.css({
    label: "colorDotDiff",
    display: "flex",
    width: "200px",
    height: "12px",
    color: "white",
    fontSize: 9,
    lineHeight: 1.3,
    fontWeight: 300,
    justifyContent: "space-between",
    padding: "0 2px",
    // eslint-disable-next-line @grafana/no-border-radius-literal
    borderRadius: "2px"
  }),
  colorDotByValue: css.css({
    label: "colorDotByValue",
    background: colors.byValueGradient
  }),
  colorDotByPackage: css.css({
    label: "colorDotByPackage",
    background: colors.byPackageGradient
  }),
  colorDotDiffDefault: css.css({
    label: "colorDotDiffDefault",
    background: colors.diffDefaultGradient
  }),
  colorDotDiffColorBlind: css.css({
    label: "colorDotDiffColorBlind",
    background: colors.diffColorBlindGradient
  })
});

exports.ColorSchemeButton = ColorSchemeButton;
//# sourceMappingURL=ColorSchemeButton.cjs.map