vue-chrts 0.0.118 → 0.0.119

package/src-demo/AreaChartPage.vue

@@ -0,0 +1,125 @@
+<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

@@ -0,0 +1,166 @@
+<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>