@tabler/core 1.1.0 → 1.1.1

package/docs/ui/components/tracking.mdx

@@ -0,0 +1,548 @@
+---
+title: Tracking
+summary: Component for visualizing activity logs or other monitoring-related data. With its ability to show data in a visually appealing and easily understandable way, the tracking component is an essential tool for any organization that relies on data monitoring and analysis to optimize performance and user experience.
+description: Monitor data activity visually.
+---
+
+## Basic example
+
+```html example centered columns={1}
+<div class="tracking">
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-danger"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Downtime"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-warning"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Big load"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-danger"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Downtime"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="No data"
+  ></div>
+  <div
+    class="tracking-block"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="No data"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+</div>
+```
+
+```html
+<div class="tracking">
+  ...
+  <div
+    class="tracking-block bg-success"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  <div
+    class="tracking-block"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="No data"
+  ></div>
+  <div
+    class="tracking-block bg-failed"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Operational"
+  ></div>
+  ...
+</div>
+```
+
+## Tracking inside a card
+
+You can add a tracking component inside the cards to give your reports a fresh look and visualize the status of your system in an attractive way. If you want to read how to add other elements to a card it is worth reading [documentation of card](/docs/components/cards).
+
+```html example centered columns={1}
+<div class="card">
+  <div class="card-body">
+    <div class="d-flex align-items-center">
+      <div class="subheader">Status monitoring</div>
+      <div class="ms-auto lh-1">
+        <div class="dropdown">
+          <a
+            class="dropdown-toggle text-secondary"
+            href="#"
+            data-bs-toggle="dropdown"
+            aria-haspopup="true"
+            aria-expanded="false"
+            >Current month</a
+          >
+          <div class="dropdown-menu dropdown-menu-end">
+            <a class="dropdown-item active" href="#">Current month</a>
+            <a class="dropdown-item" href="#">Last month</a>
+            <a class="dropdown-item" href="#">Last 3 months</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="d-flex align-items-baseline">
+      <div class="h1 mb-3 me-2">99.5%</div>
+      <div class="me-auto">
+        <span class="text-green d-inline-flex align-items-center lh-1">
+          2%
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="icon ms-1"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <polyline points="3 17 9 11 13 15 21 7" />
+            <polyline points="14 7 21 7 21 14" />
+          </svg>
+        </span>
+      </div>
+    </div>
+    <div class="mt-2">
+      <div class="tracking">
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-danger"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Downtime"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-warning"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Big load"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-danger"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Downtime"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="No data"
+        ></div>
+        <div
+          class="tracking-block"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="No data"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+```html
+<div class="card">
+  <div class="card-body">
+    <div class="d-flex align-items-center">
+      <div class="subheader">Status monitoring</div>
+      <div class="ms-auto lh-1">
+        <div class="dropdown">
+          <a
+            class="dropdown-toggle text-secondary"
+            href="#"
+            data-bs-toggle="dropdown"
+            aria-haspopup="true"
+            aria-expanded="false"
+            >Current month</a
+          >
+          <div class="dropdown-menu dropdown-menu-end">
+            <a class="dropdown-item active" href="#">Current month</a>
+            <a class="dropdown-item" href="#">Last month</a>
+            <a class="dropdown-item" href="#">Last 3 months</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="d-flex align-items-baseline">
+      <div class="h1 mb-3 me-2">99.5%</div>
+      <div class="me-auto">
+        <span class="text-green d-inline-flex align-items-center lh-1">
+          2%
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="icon ms-1"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <polyline points="3 17 9 11 13 15 21 7" />
+            <polyline points="14 7 21 7 21 14" />
+          </svg>
+        </span>
+      </div>
+    </div>
+    <div class="mt-2">
+      <div class="tracking">
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-danger"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Downtime"
+        ></div>
+        <div
+          class="tracking-block bg-success"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Operational"
+        ></div>
+        <div
+          class="tracking-block bg-warning"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="Big load"
+        ></div>
+        <div
+          class="tracking-block"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="No data"
+        ></div>
+        <div
+          class="tracking-block"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          title="No data"
+        ></div>
+        ...
+      </div>
+    </div>
+  </div>
+</div>
+```

package/docs/ui/components/vector-maps.mdx

@@ -0,0 +1,166 @@
+---
+title: Vector Maps
+description: Interactive guide to creating vector maps with jsVectorMap.
+summary: Vector maps are a great way to display geographical data in an interactive and visually appealing way. Learn how to create vector maps with jsVectorMap.
+---
+
+## Installation
+
+To use vector maps in your project, you need to include the jsVectorMap library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the jsVectorMap library from a CDN:
+
+```html
+<script src="$TABLER_CDN/dist/libs/jsvectormap/dist/js/jsvectormap.min.js"></script>
+<script src="$TABLER_CDN/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js"></script>
+```
+
+## Sample demo
+
+Integrating the vector map into your website is straightforward. Below is a sample implementation for a world map:
+
+```html
+<div id="map-world" class="w-100 h-100"></div>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const map = new jsVectorMap({
+      selector: "#map-world",
+      map: "world",
+    });
+  });
+</script>
+```
+
+Look at the example below to see how the vector map works with a world map.
+
+```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world" columns={2} centered
+<div class="card">
+  <div class="card-body">
+    <div class="ratio ratio-16x9">
+      <div>
+        <div id="map-world" class="w-100 h-100"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const map = new jsVectorMap({
+      selector: "#map-world",
+      map: "world",
+      backgroundColor: "transparent",
+      regionStyle: {
+        initial: {
+          fill: tabler.getColor("body-bg"),
+          stroke: tabler.getColor("border-color"),
+          strokeWidth: 2,
+        },
+      },
+      zoomOnScroll: false,
+      zoomButtons: false,
+    });
+    window.addEventListener("resize", () => {
+      map.updateSize();
+    });
+  });
+</script>
+```
+
+## Markers
+
+You can add markers to the map to highlight specific locations. Below is a sample implementation for a world map with markers:
+
+```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world-merc" columns={2} centered
+<div class="card">
+  <div class="card-body">
+    <div class="ratio ratio-16x9">
+      <div>
+        <div id="map-world-markers" class="w-100 h-100"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const map = new jsVectorMap({
+      selector: "#map-world-markers",
+      map: "world_merc",
+      backgroundColor: "transparent",
+      regionStyle: {
+        initial: {
+          fill: tabler.getColor("body-bg"),
+          stroke: tabler.getColor("border-color"),
+          strokeWidth: 2,
+        },
+      },
+      zoomOnScroll: false,
+      zoomButtons: false,
+      markers: [
+        {
+          coords: [61.524, 105.3188],
+          name: "Russia",
+        },
+        {
+          coords: [56.1304, -106.3468],
+          name: "Canada",
+        },
+        {
+          coords: [71.7069, -42.6043],
+          name: "Greenland",
+        },
+        {
+          coords: [26.8206, 30.8025],
+          name: "Egypt",
+        },
+        {
+          coords: [-14.235, -51.9253],
+          name: "Brazil",
+        },
+        {
+          coords: [35.8617, 104.1954],
+          name: "China",
+        },
+        {
+          coords: [37.0902, -95.7129],
+          name: "United States",
+        },
+        {
+          coords: [60.472024, 8.468946],
+          name: "Norway",
+        },
+        {
+          coords: [48.379433, 31.16558],
+          name: "Ukraine",
+        },
+      ],
+      markerStyle: {
+        initial: {
+          r: 4,
+          stroke: "#fff",
+          opacity: 1,
+          strokeWidth: 3,
+          stokeOpacity: 0.5,
+          fill: tabler.getColor("blue"),
+        },
+        hover: {
+          fill: tabler.getColor("blue"),
+          stroke: tabler.getColor("blue"),
+        },
+      },
+      markerLabelStyle: {
+        initial: {
+          fontSize: 10,
+        },
+      },
+      labels: {
+        markers: {
+          render: function (marker) {
+            return marker.name;
+          },
+        },
+      },
+    });
+    window.addEventListener("resize", () => {
+      map.updateSize();
+    });
+  });
+</script>
+```