vue-chrts 0.0.134 → 0.0.137

package/src/components/Crosshair/Crosshair.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import type { BulletLegendItemInterface } from '@unovis/ts'
-import { omit } from '@unovis/ts'
-import { VisCrosshair, VisTooltip } from '@unovis/vue'
-import { type Component, createApp } from 'vue'
-
-const props = withDefaults(defineProps<{
-  colors: string[]
-  index: string
-  items: BulletLegendItemInterface[]
-  customTooltip?: Component
-}>(), {
-  colors: () => [],
-})
-
-// Use weakmap to store reference to each datapoint for Tooltip
-const wm = new WeakMap()
-function template(d: any) {
-  if (wm.has(d)) {
-    return wm.get(d)
-  }
-  else {
-    if (typeof window !== 'undefined') {
-      const componentDiv = document.createElement('div')
-      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
-        const legendReference = props.items.find(i => i.name === key)
-        return { ...legendReference, value }
-      })
-    const TooltipComponent = props.customTooltip ?? VisTooltip
-    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)
-    wm.set(d, componentDiv.innerHTML)
-    return componentDiv.innerHTML
-    }
-
-  }
-}
-
-function color(_: unknown, i: number) {
-  return props.colors[i] ?? 'transparent'
-}
-</script>
-
-<template>
-  <VisTooltip :horizontal-shift="20" :vertical-shift="20" />
-  <VisCrosshair :template="template" :color="color" />
-</template>

package/src/components/Crosshair/index.ts

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

package/src/components/Donut/DonutChart.vue

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { Donut } from "@unovis/ts";
-import {
-  VisBulletLegend,
-  VisDonut,
-  VisSingleContainer,
-  VisTooltip,
-} from "@unovis/vue";
-
-export type DonutChartProps = {
-    type?: string;
-    data: number[];
-    height: number;
-    radius: number;
-    hidePagination?: boolean
-    labels: {
-      name: string;
-      color: string;
-    }[];
-  }
-
-const props = defineProps<DonutChartProps>();
-
-const value = (d: number) => d;
-
-const isHalf = props.type === "half";
-
-const tooltip = {
-  [Donut.selectors.segment]: (d: any) => {
-    console.log();
-
-    return `<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${
-      props.labels[d.index].color
-    } ;'></div>
-        <div>${d.data}</div>
-      </vistooltip>
-    </vissinglecontainer>
-  </div>`;
-  },
-};
-</script>
-
-<template>
-  <div class="flex items-center justify-center">
-    <VisSingleContainer
-      :class="isHalf ? 'mt-24' : ''"
-      :data="data"
-      :height="height"
-      :margin="{}"
-    >
-      <VisTooltip
-        :horizontal-shift="20"
-        :vertical-shift="20"
-        :triggers="tooltip"
-      />
-
-      <VisDonut
-        :value="value"
-        :corner-radius="radius"
-        :color="props.labels.map((l) => l.color)"
-        :angle-range="isHalf ? [-1.5707963267948966, 1.5707963267948966] : []"
-      />
-    </VisSingleContainer>
-
-    <slot />
-  </div>
-
-  <div v-if="!hidePagination" class="flex items-center justify-center mt-4">
-    <VisBulletLegend :items="labels" />
-  </div>
-</template>

package/src/components/Donut/index.ts

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

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>