geoiq-frontend-ui-kit/dist/index.es118.js

This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.

import e from "react";
import { _Dialog as v } from "./index.es37.js";
import { X as N, ChevronLeft as w, ChevronRight as S } from "lucide-react";
import { Typography as i } from "./index.es17.js";
import { ResponsiveContainer as d, BarChart as u, CartesianGrid as f, XAxis as g, YAxis as h, Tooltip as p, Bar as E } from "recharts";
import { trendBoxStyles as C, trendValueStyles as k } from "./index.es141.js";
const O = ({
  data: r,
  onToggle: t,
  isOpen: n,
  galleryActiveIndex: a,
  setgalleryActiveIndex: l
}) => {
  const o = r && r.length, b = () => {
    r && l((s) => (s + 1) % r?.length);
  }, y = () => {
    r && l(
      (s) => (s - 1 + r.length) % r.length
    );
  }, x = (s) => {
    l(s);
  }, m = () => {
    t();
  };
  return /* @__PURE__ */ e.createElement(
    v,
    {
      open: n,
      trigger: null,
      contentClassName: "bg-transparent w-fit  border-0",
      onInteractOutside: m,
      body: /* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center justify-center w-full h-full max-w-3xl mx-auto" }, /* @__PURE__ */ e.createElement(
        N,
        {
          size: 24,
          color: "white",
          className: "absolute z-50 cursor-pointer -right-10 -top-10",
          onClick: m
        }
      ), /* @__PURE__ */ e.createElement("div", { className: "relative" }, /* @__PURE__ */ e.createElement("div", { className: "relative " }, o && /* @__PURE__ */ e.createElement(
        "img",
        {
          key: r[a].image_url,
          src: r[a].image_url,
          alt: `Street ${a + 1}`,
          className: "w-[500px] max-h-[80vh] object-contain flex-shrink-0"
        }
      )), /* @__PURE__ */ e.createElement("div", { className: "relative top-[-50%]  left-[-10%] flex row  w-[120%] justify-between" }, /* @__PURE__ */ e.createElement("div", { role: "button", tabIndex: 0, onClick: y }, /* @__PURE__ */ e.createElement(w, { size: 30, color: "white" })), /* @__PURE__ */ e.createElement("div", { role: "button", tabIndex: 0, onClick: b }, /* @__PURE__ */ e.createElement(S, { size: 30, color: "white" })))), /* @__PURE__ */ e.createElement("div", { className: "flex justify-center p-2 mt-4 space-x-2 rounded-lg" }, o && r.map((s, c) => /* @__PURE__ */ e.createElement(
        "img",
        {
          key: c,
          src: s.image_url,
          alt: `Thumbnail ${c + 1}`,
          onClick: () => x(c),
          className: `w-20 h-auto rounded-lg cursor-pointer ${c === a ? "ring-2 ring-primary-1" : "ring-2 ring-transparent"} hover:ring-gray-300`
        }
      ))))
    }
  );
}, $ = ({ active: r, payload: t, label: n, year: a }) => {
  if (r && t && t.length) {
    const l = t[0]?.payload?.year, o = t[0]?.value;
    return /* @__PURE__ */ e.createElement("div", { className: "flex flex-col bg-light-1 p-4 rounded-lg shadow-md min-w-[200px] gap-1" }, /* @__PURE__ */ e.createElement(i, { variant: "body6", className: "text-primary" }, `${n}'${l}`), /* @__PURE__ */ e.createElement("div", { className: "my-2 w-full h-px border border-stroke-1" }), /* @__PURE__ */ e.createElement("div", { className: "flex" }, /* @__PURE__ */ e.createElement(
      "div",
      {
        className: "h-4 w-1 rounded-lg",
        style: { backgroundColor: "#6D48EF" }
      }
    ), /* @__PURE__ */ e.createElement(i, { variant: "body6", className: "text-secondary mx-1" }, "Visits"), /* @__PURE__ */ e.createElement(i, { variant: "body4", className: "text-secondary ml-auto" }, ` ${o}`)));
  }
  return null;
}, z = ({ active: r, payload: t, label: n }) => {
  if (r && t && t.length) {
    const a = t[0]?.payload?.distance, l = t[0]?.value;
    return /* @__PURE__ */ e.createElement("div", { className: "flex bg-light-1 items-center justify-between rounded-lg shadow-md min-w-45 max-w-80 gap-2 p-2" }, /* @__PURE__ */ e.createElement(i, { variant: "body6", className: "text-primary" }, /* @__PURE__ */ e.createElement("div", { className: "flex h-full justify-between items-center p-2 gap-4" }, /* @__PURE__ */ e.createElement("div", null, n), /* @__PURE__ */ e.createElement("div", null, " ", a + "km"))), /* @__PURE__ */ e.createElement(
      i,
      {
        variant: "body4",
        className: "text-normal text-danger-1 ml-auto p-2"
      },
      `${l}%`
    ));
  }
  return null;
}, D = ({ insights: r }) => /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("div", { className: "flex flex-row mb-4 justify-between" }, /* @__PURE__ */ e.createElement(i, { variant: "body4", className: "text-light-2" }, "Store Insight:")), /* @__PURE__ */ e.createElement("div", { className: "bg-light-2 p-3 border border-neutral-1 rounded-lg" }, /* @__PURE__ */ e.createElement(i, { variant: "body4", className: "text-light-2 mb-2" }, "Presence of other brands in catchment:"), /* @__PURE__ */ e.createElement("div", { className: "flex gap-1 flex-wrap" }, r.map((t) => /* @__PURE__ */ e.createElement(
  "div",
  {
    key: t.type,
    className: "flex items-center gap-1 bg-light-1 px-2 py-1 rounded-full border border-neutral-1"
  },
  /* @__PURE__ */ e.createElement(
    "img",
    {
      src: t.iconUrl,
      alt: `${t.type} Icon`,
      className: "w-4 h-4"
    }
  ),
  /* @__PURE__ */ e.createElement(i, { variant: "body6", className: "text-light-2" }, t.count),
  /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ e.createElement(i, { variant: "body6", className: "text-light-2" }, t.type === "competitor" ? "Competitors" : "Complementary"))
))))), K = ({
  highlights: r
}) => /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(i, { variant: "body4", className: "text-light-2 mb-2" }, "Store Overview:"), /* @__PURE__ */ e.createElement("div", { className: "bg-light-2 p-1 border border-neutral-1 rounded-lg" }, /* @__PURE__ */ e.createElement("div", { className: "flex justify-evenly items-center" }, r.map((t, n) => /* @__PURE__ */ e.createElement(e.Fragment, { key: n }, /* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center justify-center text-center gap-1 p-" }, /* @__PURE__ */ e.createElement(
  "div",
  {
    className: C({
      trend: t.trend?.toString()
    })
  },
  t.trend === 1 && /* @__PURE__ */ e.createElement(
    "img",
    {
      src: "https://frontend-static-files.geoiq.io/strapi/trending_up_9d73d6fac5.svg",
      alt: "High Trend",
      className: "w-3 h-3"
    }
  ),
  t.trend === -1 && /* @__PURE__ */ e.createElement(
    "img",
    {
      src: "https://frontend-static-files.geoiq.io/strapi/trending_down_87adc7f3a6.svg",
      alt: "Low Trend",
      className: "w-3 h-3"
    }
  ),
  t.value && t.trend ? /* @__PURE__ */ e.createElement(
    i,
    {
      variant: "body5",
      className: k({
        trend: t.trend?.toString()
      })
    },
    `${t.value}%`
  ) : /* @__PURE__ */ e.createElement(i, { variant: "body5", className: "text-sm" }, "-")
), t.name && /* @__PURE__ */ e.createElement(i, { variant: "body6", className: "text-light-2" }, t.name)), n < r.length - 1 && /* @__PURE__ */ e.createElement("div", { className: "border-l border-stroke-light-1 h-20 mx-1" })))))), I = ({ data: r }) => !r || r.every((t) => t.footfall === null) ? null : /* @__PURE__ */ e.createElement("div", { className: "w-full h-full bg-light-2 border border-neutral-1 p-3 rounded-lg" }, /* @__PURE__ */ e.createElement(i, { variant: "body4", className: "text-light-2 mb-4" }, "Footfall trends"), /* @__PURE__ */ e.createElement(d, { width: "100%", height: 300 }, /* @__PURE__ */ e.createElement(
  u,
  {
    data: r,
    margin: {
      top: 3,
      right: 3,
      bottom: -10,
      left: 3
    },
    barSize: 24
  },
  /* @__PURE__ */ e.createElement(f, { strokeDasharray: "10 10" }),
  /* @__PURE__ */ e.createElement(
    g,
    {
      dataKey: "month",
      style: {
        font: "Kumbh Sans",
        fontSize: "12px",
        fontWeight: "500",
        color: "#4A4A4A"
      }
    }
  ),
  /* @__PURE__ */ e.createElement(
    h,
    {
      className: "text-4-grey",
      style: { fontSize: "12px", fontWeight: "500" },
      tickFormatter: (t) => t > 1e6 ? `${t / 1e6}M` : t > 1e3 ? `${t / 1e3}K` : t,
      label: {
        value: "AVG FOOTFALL FOR A 3-MONTH PERIOD",
        angle: -90,
        position: "insideLeft",
        dy: -5,
        style: {
          textAnchor: "middle",
          fontSize: "12px",
          fontWeight: "500"
        }
      }
    }
  ),
  /* @__PURE__ */ e.createElement(p, { content: /* @__PURE__ */ e.createElement($, null) }),
  /* @__PURE__ */ e.createElement(
    E,
    {
      dataKey: "footfall",
      fill: "#6D48EF",
      radius: [4, 4, 4, 4],
      style: { cursor: "pointer" }
    }
  )
))), R = ({
  data: r
}) => {
  if (!r || r.every((n) => n.cannibalisation === null))
    return null;
  const t = (n) => {
    const a = r.length;
    let l;
    return a <= 1 ? l = 50 : a <= 6 ? l = 22 - (a - 1) * 4 : l = 6, n.length > l ? `${n.slice(0, l)}...` : n;
  };
  return /* @__PURE__ */ e.createElement("div", { className: "w-full h-full bg-light-2 border border-neutral-1 p-3 rounded-lg" }, /* @__PURE__ */ e.createElement(i, { variant: "body4", className: "text-light-2 mb-4" }, "Cannibalisation effects"), /* @__PURE__ */ e.createElement(d, { width: "100%", height: 300 }, /* @__PURE__ */ e.createElement(
    u,
    {
      data: r,
      margin: {
        top: 3,
        right: 3,
        bottom: 5,
        left: 3
      },
      barSize: 24
    },
    /* @__PURE__ */ e.createElement(f, { strokeDasharray: "10 10" }),
    /* @__PURE__ */ e.createElement(
      g,
      {
        dataKey: "store_name",
        tickFormatter: t,
        tickMargin: 10,
        tick: (n) => {
          const { x: a, y: l, payload: o } = n;
          return /* @__PURE__ */ e.createElement("text", { x: a, y: l, textAnchor: "end", fill: "#666" }, /* @__PURE__ */ e.createElement("tspan", { x: a, style: { fontSize: 12 } }, t(o.value)), /* @__PURE__ */ e.createElement(
            "tspan",
            {
              x: a,
              dy: "1.5em",
              style: {
                fontSize: 10,
                whiteSpace: "nowrap",
                paddingTop: "2px"
              }
            },
            r[o.index].distance + " kms"
          ));
        }
      }
    ),
    /* @__PURE__ */ e.createElement(
      h,
      {
        className: "text-4-grey",
        style: { fontSize: "12px", fontWeight: "500" },
        tickFormatter: (n) => n > 1e6 ? `${n / 1e6}M` : n > 1e3 ? `${n / 1e3}K` : n,
        label: {
          value: "CANNIBALISATION IN %",
          angle: -90,
          position: "insideLeft",
          dy: -5,
          style: {
            textAnchor: "middle",
            fontSize: "12px",
            fontWeight: "500"
          }
        },
        domain: [0, 100]
      }
    ),
    /* @__PURE__ */ e.createElement(p, { content: /* @__PURE__ */ e.createElement(z, null) }),
    /* @__PURE__ */ e.createElement(
      E,
      {
        dataKey: "cannibalisation",
        fill: "#F93232",
        radius: [4, 4, 4, 4],
        style: { cursor: "pointer" }
      }
    )
  )));
};
export {
  R as CannibalisationChartSection,
  I as FootfallChartSection,
  O as ReportSnippetGalleryView,
  D as StoreInsightsSection,
  K as StoreOverviewSection
};
//# sourceMappingURL=index.es118.js.map