@devgateway/dvz-ui-react/dist/esm/embeddable/chart/Legends.js

A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.

import { jsxs as c, jsx as e, Fragment as h } from "react/jsx-runtime";
import "react";
import { injectIntl as v } from "react-intl";
const f = ({
  filter: t,
  showLegends: a,
  chartLegends: l,
  legendLabel: n,
  legendPosition: r,
  legendCheckBack: i,
  legendLabelBack: d,
  legendLabelColor: u,
  onToggle: N,
  reverseLegend: p
}) => {
  const o = () => /* @__PURE__ */ e(h, { children: a && n && /* @__PURE__ */ e("div", { className: "legend item", children: /* @__PURE__ */ e("label", { className: "legend-title", children: n }) }) }), m = () => (p && l.reverse(), /* @__PURE__ */ e(h, { children: a && l.map((s) => /* @__PURE__ */ c(
    "div",
    {
      className: "legend item",
      onClick: () => N(s.id),
      children: [
        /* @__PURE__ */ e(
          "input",
          {
            className: "ignore",
            type: "checkbox",
            checked: t.length == 0 || !t.includes(s.id),
            readOnly: !0
          }
        ),
        /* @__PURE__ */ e(
          "span",
          {
            className: i ? "checkmark-with-bg" : "checkmark",
            style: {
              backgroundColor: i == !0 ? s.color : "#FFF"
            }
          }
        ),
        /* @__PURE__ */ e(
          "label",
          {
            legendLabelBack: d,
            style: {
              backgroundColor: d == !0 ? s.color : "#FFF",
              color: u
            },
            children: s.label
          }
        )
      ]
    }
  )) }));
  return /* @__PURE__ */ c("div", { children: [
    " ",
    (r == "top" || r == "bottom") && /* @__PURE__ */ e(
      "div",
      {
        className: `legends container has-standard-12-font-size  ${r}`,
        children: /* @__PURE__ */ c("div", { className: "legend-sections", children: [
          /* @__PURE__ */ e("div", { className: "title-section", children: o() }),
          /* @__PURE__ */ e(
            "div",
            {
              className: "legends container has-standard-12-font-size items-section",
              children: m()
            }
          )
        ] })
      }
    ),
    (r == "right" || r == "left") && /* @__PURE__ */ c(
      "div",
      {
        className: `legends container has-standard-12-font-size  ${r}`,
        children: [
          o(),
          m()
        ]
      }
    )
  ] });
}, g = v(f);
export {
  g as default
};