vue-chrts 0.0.132 → 0.0.134

package/src/components/Line/LineChart.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts" generic="T">
+import { computed, createApp } from "vue";
+
+import { CurveType, BulletLegendItemInterface, Position } from "@unovis/ts";
+
+import Tooltip from "./../Tooltip.vue";
+import { PaginationPosition } from "../..";
+
+import {
+  VisAxis,
+  VisBulletLegend,
+  VisCrosshair,
+  VisLine,
+  VisXYContainer,
+  VisTooltip,
+} from "@unovis/vue";
+
+export type LineChartProps<T> = {
+  data: T[];
+  height: number;
+  xLabel?: string;
+  yLabel?: string;
+  categories: Record<string, BulletLegendItemInterface>;
+  xFormatter: (i: number, idx: number) => string;
+  yFormatter?: (i: number, idx: number) => string;
+  curveType?: CurveType;
+  yNumTicks?: number;
+  xNumTicks?: number;
+  paginationPosition?: PaginationPosition;
+};
+
+const props = defineProps<LineChartProps<T>>();
+
+const color = (key: number) => Object.values(props.categories)[key].color;
+
+const generateTooltip = computed(() => (d: T) => {
+  const app = createApp(Tooltip, {
+    data: d,
+    categories: props.categories,
+  });
+
+  const container = document.createElement("div");
+  app.mount(container);
+
+  const html = container.innerHTML;
+  app.unmount();
+
+  return html;
+});
+</script>
+
+<template>
+  <div
+    class="space-y-4 flex flex-col"
+    :class="{
+      'flex-col-reverse': props.paginationPosition === 'top',
+    }"
+  >
+    <VisXYContainer :data="data" :height="height">
+      <VisTooltip
+        :horizontal-placement="Position.Right"
+        :vertical-placement="Position.Top"
+      />
+      <template v-for="(i, iKey) in Object.keys(props.categories)" :key="iKey">
+        <VisLine
+          :x="(_: any, i: number) => i"
+          :y="(d: T) => d[i as keyof typeof d]"
+          :color="color(iKey)"
+          :curve-type="curveType ?? CurveType.MonotoneX"
+        />
+      </template>
+      <VisAxis
+        type="x"
+        :tick-format="xFormatter"
+        :num-ticks="xNumTicks ?? 4"
+        :label="xLabel"
+        :label-margin="8"
+        :domain-line="false"
+        :grid-line="false"
+      />
+      <VisAxis
+        type="y"
+        :num-ticks="yNumTicks ?? 4"
+        :tick-format="yFormatter"
+        :label="yLabel"
+        :domain-line="false"
+      />
+      <VisCrosshair color="#666" :template="generateTooltip" />
+    </VisXYContainer>
+    <div class="flex items center justify-end">
+      <VisBulletLegend :items="Object.values(categories)" />
+    </div>
+  </div>
+</template>

package/src/components/Line/index.ts

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

package/src/components/Tooltip.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="flex flex-col">
+      <template v-for="[key, value] in Object.entries(data)" :key="key">
+        <div class="flex items-center mr-2 mt-2">
+          <!-- <span class="w-3 h-3 rounded-full bg-[#10b981] mr-2"></span> -->
+          <span class="font-semibold capitalize text-white/75">{{ key }}:</span>
+        </div>
+        <span class="font-normal">{{ value }}</span>
+      </template>
+    </div>
+  </template>
+  
+  <script lang="ts" setup generic="T">
+  const props = defineProps<{
+    data: T;
+  }>();
+  </script>

package/src/components.ts

@@ -0,0 +1,6 @@
+export * from './components/Area'
+export * from './components/AreaStacked'
+export * from './components/Line'
+export * from './components/Bar'
+export * from './components/Donut'
+export * from './components/Crosshair'

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from "./components";
+
+export enum PaginationPosition {
+  Top = "top",
+  Bottom = "bottom",
+}

package/src/shims-vue.d.ts

@@ -0,0 +1 @@
+declare module '*.vue';

package/src-demo/AdminTemplate.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="py-8 px-16">
+        123123
+    </div>
+</template>

package/src-demo/App.vue

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

@@ -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>