vue-chrts 0.0.112 → 0.0.113

package/src/components/Line/LineChart.vue

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

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

package/src/components/Tooltip.vue

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

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

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

package/src/shims-vue.d.ts

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

package/src-demo/AdminTemplate.vue

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

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>