vue-chrts 0.0.134 → 0.0.135

package/src-demo/App.vue

@@ -1,37 +0,0 @@
-<script lang="ts" setup>
-import { computed } from "vue";
-
-import { useColorMode } from "@vueuse/core";
-useColorMode();
-
-const displayCopyright = computed(() => {
-  const currentYear = new Date().getFullYear();
-  return `Made with 💚 ~ ©&nbsp;${currentYear}&nbsp;Dennis Adriaansen, Inc. All rights reserved.`;
-});
-</script>
-
-<template>
-  <div>
-    <RouterView />
-    <div class="border-t border-border mt-8">
-      <div class="max-w-7xl mx-auto py-8 flex items-center justify-between">
-        <div v-html="displayCopyright"></div>
-        <div>
-          <a href="https://x.com/DennisAdriaans" target="_blank">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 30 30"
-              width="30px"
-              height="30px"
-            >
-              <path
-                fill="currentColor"
-                d="M26.37,26l-8.795-12.822l0.015,0.012L25.52,4h-2.65l-6.46,7.48L11.28,4H4.33l8.211,11.971L12.54,15.97L3.88,26h2.65 l7.182-8.322L19.42,26H26.37z M10.23,6l12.34,18h-2.1L8.12,6H10.23z"
-              />
-            </svg>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/src-demo/AreaChartPage.vue

@@ -1,125 +0,0 @@
-<script lang="ts" setup>
-import { AreaChart as BaseArea } from "./../src/components/Area";
-import { AreaStackedChart } from "./../src/components";
-
-import Card from "./elements/Card.vue";
-
-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">Area Chart</h1>
-        <p class="text-lg font-medium text-gray-500">
-          Graph with lines connecting data points and shaded areas between the
-          lines and the x-axis.
-        </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">Area Chart multiple lines</h2>
-          <!-- <p class="text-gray-500">Website visitors per device</p> -->
-        </template>
-        <BaseArea
-          :data="AreaChartData1"
-          :height="200"
-          y-label="Number of visits"
-          :categories="categories3"
-          :x-formatter="(i: number): string => `${AreaChartData1[i].date}`"
-          :curve-type="CurveType.MonotoneX"
-        />
-      </Card>
-
-      <Card>
-        <template #header>
-          <h2 class="text-xl my-2 font-bold">Area Chart with single line</h2>
-        </template>
-        <BaseArea
-          :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="text-xl my-2 font-bold">Area Chart Stacked</h2>
-        </template>
-        <AreaStackedChart :data="AreaChartData3" :categories="categories4" />
-      </Card>
-
-      <Card>
-        <template #header>
-          <h2 class="text-xl my-2 font-bold">Area Chart Natrual</h2>
-        </template>
-        <BaseArea
-          :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="text-xl my-2 font-bold">Area Chart Step</h2>
-        </template>
-        <BaseArea
-          :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.Step"
-        />
-      </Card>
-
-      <Card>
-        <template #header>
-          <h2 class="text-xl my-2 font-bold">Area Chart Default</h2>
-        </template>
-        <BaseArea
-          :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 => {
-              return `${AreaChartData2[i].hour}`;
-            }"
-        />
-      </Card>
-    </div>
-  </div>
-</template>

package/src-demo/BarChartPage.vue

@@ -1,166 +0,0 @@
-<script lang="ts" setup>
-import { Orientation } from "@unovis/ts";
-import { BarChart } from "./../src/components";
-
-import Card from "./elements/Card.vue";
-
-import { VisitorsData, VisitorsCartegories } from "./data/VisitorsData";
-
-import { PaginationPosition } from './../src'
-
-const RevenueData = [
-  { month: "January", desktop: 186, mobile: 80 },
-  { month: "February", desktop: 305, mobile: 200 },
-  { month: "March", desktop: 237, mobile: 120 },
-  { month: "April", desktop: 73, mobile: 190 },
-  { month: "May", desktop: 209, mobile: 130 },
-  { month: "June", desktop: 214, mobile: 140 },
-];
-
-const RevenueCategories = {
-  desktop: { name: "Desktop", color: "#00dc82" },
-};
-
-const RevenueCategoriesMultple = {
-  desktop: { name: "Desktop", color: "#00dc82" },
-  mobile: { name: "Mobile", color: "#156F36" },
-};
-</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">Bar Chart</h1>
-        <p class="text-lg font-medium text-gray-500">
-          Bar charts to represent data, with bar lengths proportional to the
-          values they represent.
-        </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">Bar Chart Vertical</h2>
-          <!-- <p class="text-gray-500">Website visitors per device</p> -->
-        </template>
-        <BarChart
-          :data="RevenueData"
-          :height="250"
-          :categories="RevenueCategories"
-          :y-axis="['desktop']"
-          :xNumTicks="6"
-          :radius="4"
-          :y-formatter="(i: number) => i"
-          :x-formatter="(i: number): string => `${RevenueData[i].month }`"
-          :pagination-position="PaginationPosition.Top"
-        />
-      </Card>
-
-      <Card>
-        <template #header>
-          <h2 class="heading-2">Bar Chart Horizontal</h2>
-          <!-- <p class="text-gray-500">Website visitors per device</p> -->
-        </template>
-        <BarChart
-          :data="RevenueData"
-          :height="250"
-          :categories="RevenueCategories"
-          :y-axis="['desktop']"
-          :xNumTicks="6"
-          :radius="4"
-          :bar-padding="0"
-          :orientation="Orientation.Horizontal"
-          :x-formatter="() => ''"
-          :y-formatter="(i: number): string => `${RevenueData[i].month }`"
-          :pagination-position="PaginationPosition.Top"
-        />
-      </Card>
-
-      <Card>
-        <template #header>
-          <h2 class="heading-2">Bar Chart Group</h2>
-          <!-- <p class="text-gray-500">Website visitors per device</p> -->
-        </template>
-        <BarChart
-          :data="RevenueData"
-          :height="250"
-          :categories="RevenueCategoriesMultple"
-          :y-axis="['desktop', 'mobile']"
-          :group-padding="0"
-          :bar-padding="0.2"
-          :xNumTicks="6"
-          :radius="4"
-          :y-formatter="(i: number) => i"
-          :x-formatter="(i: number): string => `${RevenueData[i].month }`"
-          :pagination-position="PaginationPosition.Top"
-        />
-      </Card>
-
-      <Card>
-        <template #header>
-          <h2 class="heading-2">Bar Chart Stacked</h2>
-          <!-- <p class="text-gray-500">Website visitors per device</p> -->
-        </template>
-        <BarChart
-          :data="RevenueData"
-          :stacked="true"
-          :height="250"
-          :categories="RevenueCategoriesMultple"
-          :y-axis="['desktop', 'mobile']"
-          :group-padding="0"
-          :bar-padding="0.2"
-          :xNumTicks="6"
-          :radius="4"
-          :y-formatter="(i: number) => i"
-          :x-formatter="(i: number): string => `${RevenueData[i].month }`"
-          :pagination-position="PaginationPosition.Top"
-        />
-      </Card>
-
-      <Card>
-        <template #header>
-          <h2 class="heading-2">Bar Chart Vertical</h2>
-          <!-- <p class="text-gray-500">Website visitors per device</p> -->
-        </template>
-        <BarChart
-          :data="VisitorsData.slice(0, 11)"
-          :height="250"
-          :categories="VisitorsCartegories"
-          :y-axis="['visitors']"
-          :xNumTicks="1"
-          :radius="4"
-          :y-formatter="(i: number) => i"
-          :x-formatter="(i: number,): string => {
-            const date = new Date(VisitorsData[i].date)
-              return date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear();
-            }"
-          :pagination-position="PaginationPosition.Top"
-        />
-      </Card>
-
-      <Card>
-        <template #header>
-          <h2 class="heading-2">Bar Chart Stacked Horizontal</h2>
-          <!-- <p class="text-gray-500">Website visitors per device</p> -->
-        </template>
-        <BarChart
-          :data="RevenueData"
-          :stacked="true"
-          :orientation="Orientation.Horizontal"
-          :height="250"
-          :categories="RevenueCategoriesMultple"
-          :y-axis="['desktop', 'mobile']"
-          :group-padding="0"
-          :bar-padding="0.2"
-          :xNumTicks="6"
-          :radius="4"
-          :x-formatter="(i: number) => i"
-          :y-formatter="(i: number): string => `${RevenueData[i].month }`"
-          :pagination-position="PaginationPosition.Top"
-        />
-      </Card>
-    </div>
-  </div>
-</template>