framepexls-ui-lib 2.1.0 → 2.2.0

package/dist/AnalyticsCharts.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
 
 type Campania = {
     id: number;
@@ -12,13 +12,13 @@ type Campania = {
 declare function TopImpresionesBar({ data, limit, }: {
     data: Campania[];
     limit?: number;
-}): react_jsx_runtime.JSX.Element;
+}): React__default.JSX.Element;
 declare function CtrHorizontalBar({ data, limit }: {
     data: Campania[];
     limit?: number;
-}): react_jsx_runtime.JSX.Element;
+}): React__default.JSX.Element;
 declare function DestinoDonut({ data }: {
     data: Campania[];
-}): react_jsx_runtime.JSX.Element;
+}): React__default.JSX.Element;
 
 export { type Campania, CtrHorizontalBar, DestinoDonut, TopImpresionesBar };

package/dist/AnalyticsCharts.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
 
 type Campania = {
     id: number;
@@ -12,13 +12,13 @@ type Campania = {
 declare function TopImpresionesBar({ data, limit, }: {
     data: Campania[];
     limit?: number;
-}): react_jsx_runtime.JSX.Element;
+}): React__default.JSX.Element;
 declare function CtrHorizontalBar({ data, limit }: {
     data: Campania[];
     limit?: number;
-}): react_jsx_runtime.JSX.Element;
+}): React__default.JSX.Element;
 declare function DestinoDonut({ data }: {
     data: Campania[];
-}): react_jsx_runtime.JSX.Element;
+}): React__default.JSX.Element;
 
 export { type Campania, CtrHorizontalBar, DestinoDonut, TopImpresionesBar };

package/dist/AppTopbar.d.mts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import Button from './Button.mjs';
 import React__default from 'react';
 
@@ -23,6 +22,6 @@ type Props = {
         actions?: number;
     };
 };
-declare function AppTopbar({ title, subtitle, secondary, primary, actions, color, loading, loadingMinDurationMs, skeleton }: Props): react_jsx_runtime.JSX.Element;
+declare function AppTopbar({ title, subtitle, secondary, primary, actions, color, loading, loadingMinDurationMs, skeleton }: Props): React__default.JSX.Element;
 
 export { AppTopbar as default };

package/dist/AppTopbar.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import Button from './Button.js';
 import React__default from 'react';
 
@@ -23,6 +22,6 @@ type Props = {
         actions?: number;
     };
 };
-declare function AppTopbar({ title, subtitle, secondary, primary, actions, color, loading, loadingMinDurationMs, skeleton }: Props): react_jsx_runtime.JSX.Element;
+declare function AppTopbar({ title, subtitle, secondary, primary, actions, color, loading, loadingMinDurationMs, skeleton }: Props): React__default.JSX.Element;
 
 export { AppTopbar as default };

package/dist/AssetPerformanceCard.d.mts

@@ -0,0 +1,50 @@
+import React__default from 'react';
+
+type AssetRangeOption = {
+    value: string;
+    label: React__default.ReactNode;
+};
+type AssetCurrencyOption = {
+    value: string;
+    label: string;
+};
+type AssetPerformancePoint = Record<string, unknown>;
+type AssetValueFormatter = (value: number | null | undefined, options: {
+    currency: string;
+    locale: string;
+}) => string;
+type AssetPerformanceCardProps = {
+    title?: React__default.ReactNode;
+    subtitle?: React__default.ReactNode;
+    name: string;
+    symbol?: string;
+    icon?: React__default.ReactNode;
+    accent?: string;
+    value: number | null | undefined;
+    change?: number | null;
+    changePercent?: number | null;
+    data: AssetPerformancePoint[];
+    xKey: string;
+    yKey: string;
+    locale?: string;
+    currency?: string;
+    currencies?: AssetCurrencyOption[];
+    selectedCurrency?: string;
+    defaultCurrency?: string;
+    onCurrencyChange?: (currency: string) => void;
+    ranges?: AssetRangeOption[];
+    selectedRange?: string;
+    defaultRange?: string;
+    onRangeChange?: (range: string) => void;
+    xTickFormatter?: (value: unknown) => string;
+    valueFormatter?: AssetValueFormatter;
+    yTickFormatter?: AssetValueFormatter;
+    tooltipLabelFormatter?: (value: unknown) => string;
+    tooltipValueFormatter?: (value: number, currency: string) => string;
+    className?: string;
+    helperText?: React__default.ReactNode;
+    emptyState?: React__default.ReactNode;
+};
+declare function AssetPerformanceCard({ title, subtitle, name, symbol, icon, accent, value, change, changePercent, data, xKey, yKey, locale, currency, currencies, selectedCurrency, defaultCurrency, onCurrencyChange, ranges, selectedRange, defaultRange, onRangeChange, xTickFormatter, valueFormatter, yTickFormatter, tooltipLabelFormatter, tooltipValueFormatter, className, helperText, emptyState, }: AssetPerformanceCardProps): React__default.JSX.Element;
+
+export { type AssetCurrencyOption, type AssetPerformanceCardProps, type AssetPerformancePoint, type AssetRangeOption, type AssetValueFormatter, AssetPerformanceCard as default };

package/dist/AssetPerformanceCard.d.ts

@@ -0,0 +1,50 @@
+import React__default from 'react';
+
+type AssetRangeOption = {
+    value: string;
+    label: React__default.ReactNode;
+};
+type AssetCurrencyOption = {
+    value: string;
+    label: string;
+};
+type AssetPerformancePoint = Record<string, unknown>;
+type AssetValueFormatter = (value: number | null | undefined, options: {
+    currency: string;
+    locale: string;
+}) => string;
+type AssetPerformanceCardProps = {
+    title?: React__default.ReactNode;
+    subtitle?: React__default.ReactNode;
+    name: string;
+    symbol?: string;
+    icon?: React__default.ReactNode;
+    accent?: string;
+    value: number | null | undefined;
+    change?: number | null;
+    changePercent?: number | null;
+    data: AssetPerformancePoint[];
+    xKey: string;
+    yKey: string;
+    locale?: string;
+    currency?: string;
+    currencies?: AssetCurrencyOption[];
+    selectedCurrency?: string;
+    defaultCurrency?: string;
+    onCurrencyChange?: (currency: string) => void;
+    ranges?: AssetRangeOption[];
+    selectedRange?: string;
+    defaultRange?: string;
+    onRangeChange?: (range: string) => void;
+    xTickFormatter?: (value: unknown) => string;
+    valueFormatter?: AssetValueFormatter;
+    yTickFormatter?: AssetValueFormatter;
+    tooltipLabelFormatter?: (value: unknown) => string;
+    tooltipValueFormatter?: (value: number, currency: string) => string;
+    className?: string;
+    helperText?: React__default.ReactNode;
+    emptyState?: React__default.ReactNode;
+};
+declare function AssetPerformanceCard({ title, subtitle, name, symbol, icon, accent, value, change, changePercent, data, xKey, yKey, locale, currency, currencies, selectedCurrency, defaultCurrency, onCurrencyChange, ranges, selectedRange, defaultRange, onRangeChange, xTickFormatter, valueFormatter, yTickFormatter, tooltipLabelFormatter, tooltipValueFormatter, className, helperText, emptyState, }: AssetPerformanceCardProps): React__default.JSX.Element;
+
+export { type AssetCurrencyOption, type AssetPerformanceCardProps, type AssetPerformancePoint, type AssetRangeOption, type AssetValueFormatter, AssetPerformanceCard as default };

package/dist/AssetPerformanceCard.js

@@ -0,0 +1,342 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AssetPerformanceCard_exports = {};
+__export(AssetPerformanceCard_exports, {
+  default: () => AssetPerformanceCard
+});
+module.exports = __toCommonJS(AssetPerformanceCard_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_recharts = require("recharts");
+var import_ChartCard = __toESM(require("./ChartCard"));
+var import_AutoSize = __toESM(require("./internal/AutoSize"));
+var import_SegmentedTabs = __toESM(require("./SegmentedTabs"));
+var import_Select = __toESM(require("./Select"));
+var import_iconos = require("./iconos");
+var import_Numeric = require("./Numeric");
+function alphaColor(color, alpha, fallback) {
+  if (!color) return fallback;
+  if (color.startsWith("#")) {
+    let hex = color.slice(1);
+    if (hex.length === 3) {
+      hex = hex.split("").map((char) => char + char).join("");
+    }
+    if (hex.length === 6) {
+      const r = Number.parseInt(hex.slice(0, 2), 16);
+      const g = Number.parseInt(hex.slice(2, 4), 16);
+      const b = Number.parseInt(hex.slice(4, 6), 16);
+      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+  }
+  return `color-mix(in oklab, ${color} ${Math.round(alpha * 100)}%, transparent)`;
+}
+function AssetBadge({
+  name,
+  symbol,
+  accent,
+  icon
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-sm font-semibold text-white shadow-sm",
+        style: { background: accent },
+        children: icon != null ? icon : (symbol || name).slice(0, 3).toUpperCase()
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-sm font-semibold text-[var(--foreground)]", children: name }),
+      symbol ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[11px] uppercase tracking-[0.16em] text-[var(--muted)]", children: symbol }) : null
+    ] })
+  ] });
+}
+function AssetPerformanceCard({
+  title,
+  subtitle,
+  name,
+  symbol,
+  icon,
+  accent = "var(--primary)",
+  value,
+  change,
+  changePercent,
+  data,
+  xKey,
+  yKey,
+  locale = "es-MX",
+  currency = "USD",
+  currencies,
+  selectedCurrency,
+  defaultCurrency,
+  onCurrencyChange,
+  ranges = [
+    { value: "1H", label: "1H" },
+    { value: "1D", label: "1D" },
+    { value: "1W", label: "1W" },
+    { value: "1M", label: "1M" },
+    { value: "1Y", label: "1Y" },
+    { value: "ALL", label: "All" }
+  ],
+  selectedRange,
+  defaultRange,
+  onRangeChange,
+  xTickFormatter,
+  valueFormatter,
+  yTickFormatter,
+  tooltipLabelFormatter,
+  tooltipValueFormatter,
+  className,
+  helperText,
+  emptyState
+}) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const gradientId = import_react.default.useId();
+  const initialCurrency = (_c = (_b = selectedCurrency != null ? selectedCurrency : defaultCurrency) != null ? _b : (_a = currencies == null ? void 0 : currencies[0]) == null ? void 0 : _a.value) != null ? _c : currency;
+  const initialRange = (_f = (_e = selectedRange != null ? selectedRange : defaultRange) != null ? _e : (_d = ranges[0]) == null ? void 0 : _d.value) != null ? _f : "1D";
+  const [internalCurrency, setInternalCurrency] = import_react.default.useState(initialCurrency);
+  const [internalRange, setInternalRange] = import_react.default.useState(initialRange);
+  import_react.default.useEffect(() => {
+    if (selectedCurrency !== void 0) {
+      setInternalCurrency(selectedCurrency);
+    }
+  }, [selectedCurrency]);
+  import_react.default.useEffect(() => {
+    if (selectedRange !== void 0) {
+      setInternalRange(selectedRange);
+    }
+  }, [selectedRange]);
+  const activeCurrency = selectedCurrency != null ? selectedCurrency : internalCurrency;
+  const activeRange = selectedRange != null ? selectedRange : internalRange;
+  const positive = ((_g = changePercent != null ? changePercent : change) != null ? _g : 0) >= 0;
+  const lineColor = accent;
+  const handleCurrencyChange = (next) => {
+    if (!next) return;
+    if (selectedCurrency === void 0) {
+      setInternalCurrency(next);
+    }
+    onCurrencyChange == null ? void 0 : onCurrencyChange(next);
+  };
+  const handleRangeChange = (next) => {
+    if (selectedRange === void 0) {
+      setInternalRange(next);
+    }
+    onRangeChange == null ? void 0 : onRangeChange(next);
+  };
+  const formatValue = (amount, options) => {
+    var _a2, _b2;
+    const formatterOptions = { currency: activeCurrency || currency, locale };
+    if (valueFormatter) return valueFormatter(amount, formatterOptions);
+    return (0, import_Numeric.formatCurrencyValue)(amount, {
+      ...formatterOptions,
+      minimumFractionDigits: (_a2 = options == null ? void 0 : options.minimumFractionDigits) != null ? _a2 : 0,
+      maximumFractionDigits: (_b2 = options == null ? void 0 : options.maximumFractionDigits) != null ? _b2 : 2
+    });
+  };
+  const yFormatter = (amount) => {
+    const formatterOptions = { currency: activeCurrency || currency, locale };
+    if (yTickFormatter) return yTickFormatter(amount, formatterOptions);
+    if (valueFormatter) return valueFormatter(amount, formatterOptions);
+    return (0, import_Numeric.formatCurrencyValue)(amount, {
+      ...formatterOptions,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ChartCard.default,
+    {
+      className,
+      title,
+      subtitle,
+      right: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [
+        currencies && currencies.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Select.default,
+          {
+            size: "sm",
+            fullWidth: false,
+            fit: true,
+            value: activeCurrency,
+            onChange: handleCurrencyChange,
+            options: currencies.map((option) => ({
+              label: option.label,
+              value: option.value
+            })),
+            className: "min-w-[88px]"
+          }
+        ) : null,
+        ranges.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_SegmentedTabs.default,
+          {
+            size: "sm",
+            value: activeRange,
+            onChange: handleRangeChange,
+            options: ranges,
+            className: "max-w-full overflow-x-auto"
+          }
+        ) : null
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetBadge, { name, symbol, accent, icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-end gap-x-3 gap-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-4xl font-semibold tracking-[-0.04em] tabular-nums text-[var(--foreground)]", children: formatValue(value) }),
+            change != null || changePercent != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                className: [
+                  "mb-1 inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-semibold",
+                  positive ? "bg-emerald-50 text-emerald-700" : "bg-rose-50 text-rose-700"
+                ].join(" "),
+                children: [
+                  positive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.TrendUpIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.TrendDownIcon, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tabular-nums", children: change != null ? (0, import_Numeric.formatNumericValue)(change, {
+                    locale,
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2,
+                    prefix: change > 0 ? "+" : ""
+                  }) : null }),
+                  changePercent != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tabular-nums", children: [
+                    "(",
+                    (0, import_Numeric.formatPercentValue)(changePercent, {
+                      locale,
+                      minimumFractionDigits: 2,
+                      maximumFractionDigits: 2
+                    }),
+                    ")"
+                  ] }) : null
+                ]
+              }
+            ) : null
+          ] }),
+          helperText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-[var(--muted)]", children: helperText }) : null
+        ] }) }),
+        !Array.isArray(data) || data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-[320px] items-center justify-center rounded-[1.75rem] border border-dashed border-[var(--border)] bg-[color-mix(in_oklab,var(--surface)_72%,transparent)] px-6 text-sm text-[var(--muted)]", children: emptyState != null ? emptyState : "Sin datos para el rango seleccionado." }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "min-w-0 rounded-[1.75rem] border border-[var(--border)] p-3",
+            style: {
+              background: `linear-gradient(180deg, ${alphaColor(lineColor, 0.1, "color-mix(in oklab,var(--primary) 10%,transparent)")}, transparent 22%, var(--card) 68%)`
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-[320px] min-h-[320px] w-full min-w-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AutoSize.default, { className: "h-full w-full", children: ({ width, height }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_recharts.AreaChart,
+              {
+                width,
+                height,
+                data,
+                margin: { top: 18, right: 12, left: 0, bottom: 8 },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: alphaColor(lineColor, 0.32, lineColor) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "65%", stopColor: alphaColor(lineColor, 0.08, lineColor) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: alphaColor(lineColor, 0.02, lineColor) })
+                  ] }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_recharts.CartesianGrid,
+                    {
+                      vertical: false,
+                      stroke: "var(--grid)",
+                      strokeDasharray: "4 8"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_recharts.XAxis,
+                    {
+                      dataKey: xKey,
+                      axisLine: false,
+                      tickLine: false,
+                      minTickGap: 28,
+                      tickMargin: 12,
+                      tick: { fontSize: 11, fill: "var(--muted)" },
+                      tickFormatter: (value2) => xTickFormatter ? xTickFormatter(value2) : String(value2 != null ? value2 : "")
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_recharts.YAxis,
+                    {
+                      axisLine: false,
+                      tickLine: false,
+                      width: 72,
+                      tickMargin: 12,
+                      tick: { fontSize: 11, fill: "var(--muted)" },
+                      tickFormatter: (amount) => yFormatter(Number(amount))
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_recharts.Tooltip,
+                    {
+                      cursor: {
+                        stroke: alphaColor(lineColor, 0.55, lineColor),
+                        strokeWidth: 1.25,
+                        strokeDasharray: "4 6"
+                      },
+                      content: ({ active, payload, label }) => {
+                        var _a2;
+                        if (!active || !payload || payload.length === 0) return null;
+                        const raw = (_a2 = payload[0]) == null ? void 0 : _a2.value;
+                        const numeric = typeof raw === "number" ? raw : Number(raw);
+                        const formattedValue = tooltipValueFormatter ? tooltipValueFormatter(numeric, activeCurrency || currency) : formatValue(numeric, {
+                          minimumFractionDigits: 2,
+                          maximumFractionDigits: 2
+                        });
+                        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-[140px] rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_96%,white)] px-3 py-2.5 shadow-xl ring-1 ring-black/5 backdrop-blur", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[11px] font-medium text-[var(--muted)]", children: tooltipLabelFormatter ? tooltipLabelFormatter(label) : String(label != null ? label : "") }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-lg font-semibold tracking-[-0.03em] tabular-nums text-[var(--foreground)]", children: formattedValue })
+                        ] });
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_recharts.Area,
+                    {
+                      type: "monotone",
+                      dataKey: yKey,
+                      stroke: lineColor,
+                      strokeWidth: 3,
+                      fill: `url(#${gradientId})`,
+                      fillOpacity: 1,
+                      dot: false,
+                      activeDot: {
+                        r: 6,
+                        strokeWidth: 3,
+                        stroke: "#fff",
+                        fill: lineColor
+                      }
+                    }
+                  )
+                ]
+              }
+            ) }) })
+          }
+        )
+      ] })
+    }
+  );
+}