vue-chrts 0.0.114 → 0.0.115

package/src-demo/Homepage.vue

@@ -0,0 +1,325 @@
+<script lang="ts" setup>
+import TopBar from "./elements/TopBar.vue";
+import Logo from "./elements/Logo.vue";
+
+import { Status as BaseStatus } from "./components/Status";
+import { LineChart as BaseLine } from "./../src/components";
+import { Progress as BaseProgress } from "./components/Progress";
+import { BarChart as BaseBar } from "./../src/components";
+import { AreaChart as BaseArea } from "./../src/components";
+import { DonutChart as BaseDonut } from "./../src/components";
+
+import DashboardTemplate from "./DashboardTemplate.vue";
+
+import { PaginationPosition } from "./../src";
+
+import Button from "./elements/Button.vue";
+import Card from "./elements/Card.vue";
+import Table from "./elements/Table.vue";
+
+import { h } from "vue";
+import { CurveType } from "@unovis/ts";
+import { InvestmentData, categories } from "./data/InvestmentData";
+
+import {
+  RevenueData,
+  RevenueDataSmall,
+  categories as RevenueCategories,
+} from "./data/RevenueData";
+
+const loggedIn = false;
+
+const DonutData = [
+  {
+    color: "#60A5FA",
+    name: "Blue",
+    value: 50,
+  },
+  {
+    color: "#CBD5E1",
+    name: "Gray",
+    value: 20,
+  },
+  {
+    color: "#00DC82",
+    name: "Green",
+    value: 30,
+  },
+];
+
+const columns = [
+  {
+    accessorKey: "name",
+    header: "name",
+    cell: ({ row }: any) => {
+      return h(
+        "div",
+        {
+          class: "flex items-center gap-4",
+        },
+        [
+          h(
+            "span",
+            {
+              style: {
+                width: "0.75rem",
+                height: "0.75rem",
+                backgroundColor: row.original.color,
+                display: "block",
+              },
+            },
+            ""
+          ),
+          h("span", {}, `${row.getValue("name")}`),
+        ]
+      );
+    },
+  },
+  {
+    accessorKey: "value",
+    header: "value",
+    cell: ({ row }: any) => `${row.getValue("value")}`,
+  },
+];
+</script>
+<template>
+  <TopBar></TopBar>
+  <div class="max-w-7xl mx-auto py-4">
+    <header class="py-24 sm:py-24 relative px-4 lg:px-0">
+      <div class="flex items-center justify-center mb-4">
+        <Logo />
+      </div>
+      <h1
+        class="text-6xl font-bold tracking-tight text-gray-900 dark:text-white text-center max-w-3xl mx-auto"
+      >
+        Vue components to build charts and dashboards
+      </h1>
+      <p
+        class="mt-6 text-lg tracking-tight text-gray-600 dark:text-gray-400 text-center max-w-xl mx-auto"
+      >
+        Powerful & Accessible Vue Components for Dashboards & Charts. Built with
+        Tailwind CSS and Nuxt UI.
+      </p>
+      <div class="flex items-center gap-4 mt-8 justify-center">
+        <RouterLink v-if="!loggedIn" to="/auth/login">
+          <Button
+            color="primary"
+            icon="i-heroicons:arrow-right-20-solid"
+            :trailing="true"
+            size="lg"
+          >
+            Sign in
+          </Button>
+        </RouterLink>
+        <RouterLink v-else to="/dashboard">
+          <Button
+            icon="i-heroicons:arrow-right-20-solid"
+            :trailing="true"
+            size="lg"
+          >
+            Dashboard
+          </Button>
+        </RouterLink>
+        <RouterLink to="/overview">
+          <Button icon="i-heroicons:swatch" size="lg"> Overview </Button>
+        </RouterLink>
+      </div>
+    </header>
+
+    <div class="grid grid-cols-12 gap-8 mb-8">
+      <div class="col-span-8">
+        <Card>
+          <template #header>
+            <h2 class="heading-2">Multi line chart</h2>
+            <p class="text-gray-500">Website visitors per device</p>
+          </template>
+          <BaseLine
+            :data="InvestmentData"
+            :height="322"
+            :pagination-poisition="PaginationPosition.Bottom"
+            :categories="categories"
+            :y-num-ticks="8"
+            :x-formatter="(i: number): string => `${InvestmentData[i].date}`"
+            :curve-type="CurveType.MonotoneX"
+          />
+        </Card>
+      </div>
+
+      <div class="col-span-4">
+        <Card>
+          <template #header>
+            <h2 class="heading-2">Donut Chart Example</h2>
+            <p class="text-gray-500">Color Distribution</p>
+          </template>
+          <BaseDonut
+            :data="DonutData.map((i) => i.value)"
+            :height="200"
+            :labels="DonutData"
+            :hide-pagination="true"
+            :radius="0"
+          >
+            <div class="absolute text-center">
+              <div class="font-semibold dark:text-white">Label</div>
+              <div class="text-gray-500">2 seconds ago</div>
+            </div>
+          </BaseDonut>
+          <div class="mt-4 p-0">
+            <Table
+              :data="DonutData"
+              :columns="columns"
+              :enable-sorting="false"
+              :enable-pagination="false"
+              :enable-filtering="false"
+              :enable-row-selection="true"
+              :table-size="'md'"
+              :striped="true"
+              :hover="true"
+              :bordered="false"
+              :pagination-position="'bottom'"
+              :page-size-options="[5, 10, 20, 50]"
+              :initial-page-size="10"
+            >
+            </Table>
+          </div>
+        </Card>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-12 gap-8 mb-8">
+      <div class="col-span-5">
+        <Card class="h-full">
+          <Card>
+            <div class="space-y-2 mb-4">
+              <p class="text-gray-500 mb-1">NuxtLabs</p>
+              <div class="flex items-center justify-between">
+                <h2 class="text-xl dark:text-white font-bold">$75.1K</h2>
+                <div class="flex items-center gap-2 text-sm">
+                  <div>+$1.1K</div>
+                  <div class="text-gray-500">+9.1%</div>
+                </div>
+              </div>
+            </div>
+
+            <BaseArea
+              :data="RevenueDataSmall"
+              :height="50"
+              :categories="RevenueCategories"
+              :y-axis="['value']"
+              :hide-legend="true"
+              :hide-tooltip="true"
+              :y-formatter="() => ''"
+              :x-formatter="() => ''"
+            />
+
+            <template #footer>
+              <div class="flex justify-end text-sm items-center gap-2">
+                <span>View more</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  class="size-4"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M16.72 7.72a.75.75 0 0 1 1.06 0l3.75 3.75a.75.75 0 0 1 0 1.06l-3.75 3.75a.75.75 0 1 1-1.06-1.06l2.47-2.47H3a.75.75 0 0 1 0-1.5h16.19l-2.47-2.47a.75.75 0 0 1 0-1.06Z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+              </div>
+            </template>
+          </Card>
+        </Card>
+      </div>
+      <div class="col-span-7">
+        <Card class="h-full">
+          <BaseStatus></BaseStatus>
+
+          <template #footer>
+            <h2 class="heading-2">Advanced visualizations</h2>
+            <p class="text-gray-500">
+              Tracker, Bar Lists, and many more components to visualize complex
+              use cases gracefully.
+            </p>
+          </template>
+        </Card>
+      </div>
+    </div>
+
+    <Card>
+      <div class="grid grid-cols-12 gap-4 mb-8">
+        <div class="col-span-4 space-y-4">
+          <Card>
+            <BaseProgress
+              color="#05DF72"
+              label="Storage used"
+              value="1.85GB"
+              :total="10"
+              :progress="1.85"
+              unit="GB"
+            ></BaseProgress>
+          </Card>
+          <Card>
+            <BaseProgress
+              color="#05DF72"
+              label="Weekly active users"
+              value="250"
+              :total="512"
+              :progress="250"
+            ></BaseProgress>
+          </Card>
+          <Card>
+            <BaseProgress
+              color="#05DF72"
+              label="Current costs"
+              value="$293.5"
+              :total="300"
+              :progress="293.5"
+            ></BaseProgress>
+          </Card>
+        </div>
+        <div class="col-span-8">
+          <Card>
+            <template #header>
+              <h2 class="heading-2">Beautiful Bar Chart</h2>
+              <p class="text-gray-500">
+                Tracker, Bar Lists, and many more components to visualize
+                complex use cases gracefully.
+              </p>
+            </template>
+
+            <BaseBar
+              :data="RevenueData"
+              :height="306"
+              :categories="RevenueCategories"
+              :y-axis="['value']"
+              :hide-legend="true"
+              :y-formatter="(i: number) => i"
+              :x-formatter="(i: number): string => {
+              return `${RevenueData[i].date }`;
+            }"
+              :x-num-ticks="12"
+            />
+          </Card>
+        </div>
+      </div>
+    </Card>
+
+    <div class="max-w-7xl mx-auto my-48 space-y-4">
+      <h2
+        class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white text-center"
+      >
+        Awesome templates for Nuxt
+      </h2>
+
+      <p class="text-white/50 text-center">
+        With awesome templates for your next projects, you can create
+        beautiful-looking products with ease.
+      </p>
+
+      <div class="mt-8 py-6 px-12 ring-4 rounded-xl ring-border">
+        <DashboardTemplate></DashboardTemplate>
+      </div>
+    </div>
+  </div>
+</template>

package/src-demo/LineChartPage.vue

@@ -0,0 +1,140 @@
+<script lang="ts" setup>
+import { LineChart } from "../src/components";
+import { AreaStackedChart } from "../src/components";
+
+import Card from "./elements/Card.vue";
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 186 },
+  { month: "February", desktop: 305, mobile: 305 },
+  { month: "March", desktop: 237, mobile: 237 },
+  { month: "April", desktop: 260, mobile: 209 },
+  { month: "May", desktop: 209, mobile: 209 },
+  { month: "June", desktop: 250, mobile: 214 },
+]
+
+import { CurveType } from "@unovis/ts";
+import {
+  AreaChartData1,
+  AreaChartData2,
+  AreaChartData3,
+  AreaChartData4,
+  categories2,
+  categories3,
+  categories4,
+  categories5,
+} from "./data/AreaChartData";
+</script>
+
+<template>
+  <div class="space-y-8 pb-24 pt-8">
+    <div class="max-w-7xl mx-auto space-y-4">
+      <div class="mb-8 space-y-4">
+        <h1 class="text-4xl font-bold">Line Chart</h1>
+        <p class="text-lg font-medium text-gray-500">
+          Charts to effectively display trends and changes in data over time by connecting data points with lines.
+        </p>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-3 gap-4 max-w-7xl mx-auto py-4">
+      <Card>
+        <template #header>
+          <h2 class="heading-2 capitalize">Line Chart multiple lines</h2>
+          <!-- <p class="text-gray-500">Website visitors per device</p> -->
+        </template>
+        <LineChart
+          :data="chartData"
+          :height="200"
+          y-label="Number of visits"
+          :x-num-ticks="2"
+          :categories="categories3"
+          :x-formatter="(i: number): string => `${AreaChartData1[i].date}`"
+          :curve-type="CurveType.MonotoneX"
+        />
+      </Card>
+
+      <Card>
+        <template #header>
+          <h2 class="heading-2 capitalize">Line Chart with single line</h2>
+        </template>
+        <LineChart
+          :data="AreaChartData2"
+          :height="200"
+          x-label="Time"
+          y-label="Temperature"
+          :categories="categories2"
+          :y-num-ticks="4"
+          :x-num-ticks="7"
+          :x-formatter="(i: number): string => `${AreaChartData2[i].hour}`"
+          :curve-type="CurveType.Basis"
+        />
+      </Card>
+
+      <Card>
+        <template #header>
+          <h2 class="heading-2 capitalize">Line Chart multiple steps</h2>
+        </template>
+        <LineChart
+          :data="chartData"
+          :height="200"
+          y-label="Number of visits"
+          :x-num-ticks="2"
+          :categories="categories3"
+          :x-formatter="(i: number): string => `${AreaChartData1[i].date}`"
+            :curve-type="CurveType.Step"
+        />
+      </Card>
+
+      <Card>
+        <template #header>
+          <h2 class="heading-2 capitalize">Line Chart natrual</h2>
+        </template>
+        <LineChart
+          :data="AreaChartData4"
+          :height="200"
+          x-label="Month"
+          y-label="Score"
+          :categories="categories5"
+          :y-num-ticks="4"
+          :x-num-ticks="7"
+          :x-formatter="(i: number): string => `${AreaChartData2[i].hour}`"
+          :curve-type="CurveType.Natural"
+        />
+      </Card>
+
+      <Card>
+        <template #header>
+          <h2 class="heading-2 capitalize">Line Chart step</h2>
+        </template>
+        <LineChart
+          :data="AreaChartData4"
+          :height="200"
+          x-label="Month"
+          y-label="Score"
+          :categories="categories5"
+          :y-num-ticks="4"
+          :x-num-ticks="4"
+          :x-formatter="(i: number): string => `${AreaChartData2[i].hour}`"
+          :curve-type="CurveType.Step"
+        />
+      </Card>
+
+      <Card>
+        <template #header>
+          <h2 class="heading-2 capitalize">Line Chart Default</h2>
+        </template>
+        <LineChart
+          :data="chartData"
+          :height="200"
+          x-label="Month"
+          y-label="Score"
+          :categories="categories5"
+          :x-formatter="(i: number): string => {
+              return `${AreaChartData2[i].hour}`;
+            }"
+        />
+      </Card>
+    </div>
+  </div>
+</template>

package/src-demo/assets/main.css

@@ -0,0 +1,34 @@
+
+@import "tailwindcss";
+
+@variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-background: oklch(100 0 0);
+  --color-border: oklch(92% 0 0);
+  --color-card: oklch(100% 0 0);
+  --color-primary: oklch(79.14% 0.2091 151.66);
+}
+
+@utility heading-2 {
+  @apply text-xl dark:text-white my-2 font-bold;
+}
+
+
+.dark {
+  color: white;
+  --color-background: oklch(.205 0 0);
+  --color-card: oklch(.225 0 0);
+  --color-border: oklch(.269 0 0);
+
+  --vis-axis-grid-color: rgba(255, 255, 255, 0.1) !important;
+  --vis-tooltip-background-color: #121212 !important;
+  --vis-tooltip-border-color: none !important;
+  --vis-tooltip-text-color: rgba(255, 255, 255, 0.5) !important;
+  --vis-axis-tick-label-color: rgba(255, 255, 255, 0.5) !important;
+  --vis-legend-label-color: rgba(255, 255, 255, 0.75) !important;
+
+  --vis-axis-label-color: rgba(255, 255, 255, 0.5) !important;
+  --vis-legend-label-color: rgba(255, 255, 255, 0.5) !important;
+  
+}

package/src-demo/components/Progress/Progress.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+interface StorageProps {
+  label: string;
+  value: string;
+  unit?: string;
+  progress: number;
+  total: number;
+  color: string;
+}
+
+const props = defineProps<StorageProps>()
+
+const percentage = computed(() => {
+  return ((props.progress / props.total) * 100).toFixed(1);
+});
+
+const width = computed(() => {
+  return `${(props.progress / props.total) * 100}%`;
+});
+</script>
+
+<template>
+  <div class="space-y-2">
+    <div class="space-y-2">
+      <p class="text-gray-500 mb-1">
+        {{ label }}
+      </p>
+      <h2 class="text-xl dark:text-white font-bold">
+        {{  value  }}
+      </h2>
+    </div>
+
+    <div class="flex items-center justify-between text-sm font-medium dark:text-gray-500 mt-2">
+      <div>{{ percentage }}%</div>
+      <div>{{ progress }} of {{ total }}{{ unit }}</div>
+    </div>
+    <div class="dark:bg-white/5 bg-gray-100 rounded-full h-3">
+      <div class="rounded-full h-full" :style="{ width, backgroundColor: color }"></div>
+    </div>
+  </div>
+</template>

package/src-demo/components/Progress/index.ts

@@ -0,0 +1 @@
+export { default as Progress } from './Progress.vue';

package/src-demo/components/Status/Status.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const domain = ref("example.com");
+const uptime = ref("99.9% uptime");
+
+const outages = ref([
+  { hour: 0, status: "online" },
+  { hour: 1, status: "online" },
+  { hour: 2, status: "online" },
+  { hour: 3, status: "online" },
+  { hour: 4, status: "online" },
+  { hour: 5, status: "online" },
+  { hour: 6, status: "online" },
+  { hour: 7, status: "online" },
+  { hour: 8, status: "online" },
+  { hour: 9, status: "online" },
+  { hour: 10, status: "online" },
+  { hour: 11, status: "offline" },
+  { hour: 12, status: "online" },
+  { hour: 13, status: "online" },
+  { hour: 14, status: "online" },
+  { hour: 15, status: "online" },
+  { hour: 16, status: "online" },
+  { hour: 17, status: "online" },
+  { hour: 18, status: "online" },
+  { hour: 19, status: "online" },
+  { hour: 20, status: "online" },
+  { hour: 21, status: "online" },
+  { hour: 22, status: "online" },
+  { hour: 23, status: "online" },
+
+  { hour: 0, status: "online" },
+  { hour: 1, status: "online" },
+  { hour: 2, status: "online" },
+  { hour: 3, status: "online" },
+  { hour: 4, status: "online" },
+  { hour: 5, status: "online" },
+  { hour: 6, status: "online" },
+  { hour: 7, status: "online" },
+  { hour: 8, status: "online" },
+  { hour: 9, status: "online" },
+  { hour: 10, status: "online" },
+  { hour: 11, status: "online" },
+  { hour: 12, status: "online" },
+  { hour: 13, status: "online" },
+  { hour: 14, status: "online" },
+  { hour: 15, status: "online" },
+  { hour: 16, status: "online" },
+  { hour: 17, status: "online" },
+  { hour: 18, status: "online" },
+  { hour: 19, status: "online" },
+  { hour: 20, status: "online" },
+  { hour: 21, status: "online" },
+  { hour: 22, status: "online" },
+  { hour: 23, status: "online" },
+  { hour: 0, status: "online" },
+  { hour: 1, status: "online" },
+]);
+</script>
+
+<template>
+  <div class="ring ring-border divide-y divide-(--ui-border) rounded-xl shadow-sm">
+    <div class="flex items-center justify-between p-4">
+      <div class="flex items-center gap-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="size-6 text-primary"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+          />
+        </svg>
+
+        <span class="font-medium">{{ domain }}</span>
+      </div>
+      <span class="text-sm dark:text-gray-400">{{ uptime }}</span>
+    </div>
+
+    <div class="p-4">
+      <div
+        v-for="(outage, index) in outages"
+        :key="index"
+        class="w-2.5 h-8 first:rounded-tl first:rounded-bl last:rounded-tr last:rounded-br ml-[3px] inline-block"
+        :class="outage.status === 'online' ? 'bg-primary' : 'bg-white'"
+      ></div>
+    </div>
+  </div>
+</template>

package/src-demo/components/Status/index.ts

@@ -0,0 +1 @@
+export { default as Status } from './Status.vue';

package/src-demo/components/charts.ts

@@ -0,0 +1,37 @@
+// charts.ts
+import { AreaChart } from "./Area/index";
+import { AreaStackedChart } from "./AreaStacked/index";
+import { BarChart } from "./Bar/index";
+import { DonutChart } from "./Donut/index";
+import { LineChart, PaginationPosition } from "./Line/index";
+
+// Export the component prop types
+import type { AreaChartProps } from './Area';
+import type { AreaStackedChartProps } from './AreaStacked';
+import type { BarChartProps } from './Bar';
+import type { DonutChartProps } from './Donut';
+import type { LineChartProps } from './Line';
+
+export type AreaChartType = typeof AreaChart;
+export type AreaStackedChartType = typeof AreaStackedChart;
+export type BarChartType = typeof BarChart;
+export type DonutChartType = typeof DonutChart;
+export type LineChartType = typeof LineChart;
+export type PaginationPositionType = typeof PaginationPosition;
+
+export type { 
+  AreaChartProps,
+  AreaStackedChartProps,
+  BarChartProps,
+  DonutChartProps,
+  LineChartProps
+};
+
+export {
+  AreaChart,
+  AreaStackedChart,
+  BarChart,
+  DonutChart,
+  LineChart,
+  PaginationPosition,
+};