feat dashboard unovis

xingxing-collective · Nov 7, 2024 · 71ddcc9 · 71ddcc9
1 parent 8e7a24c
commit 71ddcc9
Show file tree

Hide file tree

Showing 29 changed files with 1,280 additions and 56 deletions.
diff --git a/app/assets/css/override.css b/app/assets/css/override.css
@@ -0,0 +1,27 @@
+.unovis-xy-container {
+    --vis-crosshair-line-stroke-color: rgb(var(--color-primary-500));
+    --vis-crosshair-circle-stroke-color: #fff;
+
+    --vis-axis-grid-color: rgb(var(--color-gray-200));
+    --vis-axis-tick-color: rgb(var(--color-gray-200));
+    --vis-axis-tick-label-color: rgb(var(--color-gray-400));
+
+    --vis-tooltip-background-color: #fff;
+    --vis-tooltip-border-color: rgb(var(--color-gray-200));
+    --vis-tooltip-text-color: rgb(var(--color-gray-900));
+}
+
+.dark {
+    .unovis-xy-container {
+        --vis-crosshair-line-stroke-color: rgb(var(--color-primary-400));
+        --vis-crosshair-circle-stroke-color: rgb(var(--color-gray-900));
+
+        --vis-axis-grid-color: rgb(var(--color-gray-800));
+        --vis-axis-tick-color: rgb(var(--color-gray-800));
+        --vis-axis-tick-label-color: rgb(var(--color-gray-500));
+
+        --vis-tooltip-background-color: rgb(var(--color-gray-900));
+        --vis-tooltip-border-color: rgb(var(--color-gray-800));
+        --vis-tooltip-text-color: #fff;
+    }
+}
diff --git a/app/components/ExampleTabs.vue b/app/components/ExampleTabs.vue
@@ -1,9 +1,8 @@
 <template>
-  <UTabs
-class="px-4 py-4 w-full h-full " :items="items" orientation="vertical"
+  <UTabs class="px-4 py-4 w-full max-h-full " :items="items" orientation="vertical"
     :ui="{ wrapper: 'flex gap-4', list: { base: 'overflow-y-auto', tab: { height: 'h-32' }, width: 'w-48' } }">
     <template #default="{ item, index, selected }">
-      <div class="h-full">
+      <div class="h-full flex items-center">
         <slot name="default" :item="item" :index="index" :selected="selected">
           {{ item.label }}
         </slot>

diff --git a/app/components/LanguageSwitch.vue b/app/components/LanguageSwitch.vue
@@ -18,7 +18,6 @@ const { locale, locales, setLocale } = useI18n()
 const handleSetLocale = (code: string) => {
   if (locale.value !== code) {
     setLocale(code)
-    window.location.reload();
   }
 }
 </script>
diff --git a/app/components/unovis/1.BasicLineChart.vue b/app/components/unovis/1.BasicLineChart.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { VisXYContainer, VisLine, VisAxis } from '@unovis/vue'
+import type { DataRecord } from '~/types';
+
+const data: DataRecord[] = [
+    { x: 1, y: 72 },
+    { x: 2, y: 45 },
+    { x: 3, y: 13 },
+    { x: 5, y: 56 },
+    { x: 6, y: 82 },
+    { x: 7, y: 61 },
+    { x: 9, y: 88 },
+    { x: 10, y: 41 }
+]
+
+const x = (d: DataRecord) => d.x
+const y = (d: DataRecord) => d.y
+
+</script>
+<template>
+    <div class="flex flex-col gap-1">
+        <div class="text-center text-sm font-semibold">
+            {{ $t('Basic Line Chart') }}
+        </div>
+        <VisXYContainer :data="data">
+            <VisLine :x="x" :y="y" color="rgb(var(--color-primary-DEFAULT))" />
+            <VisAxis type="x" />
+        </VisXYContainer>
+    </div>
+</template>
diff --git a/app/components/unovis/2.BasicAreaChart.vue b/app/components/unovis/2.BasicAreaChart.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { VisXYContainer, VisLine, VisAxis, VisCrosshair, VisTooltip, VisArea } from '@unovis/vue'
+import type { DataRecord } from '~/types';
+
+const data: DataRecord[] = [
+    { x: 1, y: 72 },
+    { x: 2, y: 45 },
+    { x: 3, y: 13 },
+    { x: 4, y: 94 },
+    { x: 5, y: 56 },
+    { x: 6, y: 82 },
+    { x: 7, y: 61 },
+    { x: 8, y: 33 },
+    { x: 9, y: 88 },
+    { x: 10, y: 41 }
+]
+
+const x = (d: DataRecord) => d.x
+const y = (d: DataRecord) => d.y
+const template = (d: DataRecord) => `{ x: ${d.x} , y: ${d.y}}`
+const xTicks = (x: number) => x
+
+</script>
+<template>
+    <div class="flex flex-col gap-1">
+        <div class="text-center text-sm font-semibold">
+            {{ $t('Basic Area Chart') }}
+        </div>
+        <VisXYContainer :data="data" :padding="{ top: 10 }">
+            <VisLine :x="x" :y="y" color="rgb(var(--color-primary-DEFAULT))" />
+            <VisAxis type="x" :x="x" :tick-format="xTicks"  />
+            <VisArea :x="x" :y="y" :opacity="0.1" color="rgb(var(--color-primary-DEFAULT))" />
+            <VisCrosshair :template="template" color="rgb(var(--color-primary-DEFAULT))" />
+            <VisTooltip />
+        </VisXYContainer>
+    </div>
+</template>
diff --git a/app/components/unovis/3.BasicBarChart.vue b/app/components/unovis/3.BasicBarChart.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { VisXYContainer, VisAxis, VisStackedBar } from '@unovis/vue'
+import type { DataRecord } from '~/types';
+
+const data: DataRecord[] = [
+    { x: 1, y: 72 },
+    { x: 2, y: 45 },
+    { x: 3, y: 13 },
+    { x: 4, y: 94 },
+    { x: 5, y: 56 },
+    { x: 6, y: 82 },
+    { x: 7, y: 61 },
+    { x: 8, y: 33 },
+    { x: 9, y: 88 },
+    { x: 10, y: 41 }
+]
+
+const x = (d: DataRecord) => d.x
+const y = (d: DataRecord) => d.y
+const xTicks = (x: number) => x
+
+</script>
+<template>
+    <div class="flex flex-col gap-1">
+        <div class="text-center text-sm font-semibold">
+            {{ $t('Basic Bar Chart') }}
+        </div>
+        <VisXYContainer :data="data" :padding="{ top: 10 }">
+            <VisStackedBar :x="x" :y="y" color="rgb(var(--color-primary-DEFAULT))" />
+            <VisAxis type="x" :x="x" :tick-format="xTicks" :num-ticks="data.length" />
+        </VisXYContainer>
+    </div>
+</template>
diff --git a/app/components/unovis/4.BasicHorizontalBarChart.vue b/app/components/unovis/4.BasicHorizontalBarChart.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { VisXYContainer, VisAxis, VisStackedBar } from '@unovis/vue'
+import { Orientation } from '@unovis/ts'
+import type { DataRecord } from '~/types';
+
+const data: DataRecord[] = [
+    { x: 1, y: 72 },
+    { x: 2, y: 45 },
+    { x: 3, y: 13 },
+    { x: 4, y: 94 },
+    { x: 5, y: 56 },
+    { x: 6, y: 82 },
+    { x: 7, y: 61 },
+    { x: 8, y: 33 },
+    { x: 9, y: 88 },
+    { x: 10, y: 41 }
+]
+
+const x = (d: DataRecord) => d.x
+const y = (d: DataRecord) => d.y
+
+</script>
+<template>
+    <div class="flex flex-col gap-1">
+        <div class="text-center text-sm font-semibold">
+            {{ $t('Basic Horizontal Bar Chart') }}
+        </div>
+        <VisXYContainer :data="data" :padding="{ top: 10 }">
+            <VisStackedBar :x="x" :y="y" color="rgb(var(--color-primary-DEFAULT))"
+                :orientation="Orientation.Horizontal" />
+            <VisAxis type="y" :num-ticks="data.length" />
+        </VisXYContainer>
+    </div>
+</template>
diff --git a/app/components/unovis/5.BasicGroupedBarChart.vue b/app/components/unovis/5.BasicGroupedBarChart.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { VisXYContainer, VisGroupedBar, VisAxis, VisBulletLegend } from '@unovis/vue'
+type ElectionDatum = {
+    year: number;
+    democrat: number;
+    republican: number;
+    other: number;
+    libertarian: number;
+}
+
+const colors = {
+    republican: '#f45a6d',
+    democrat: '#2780eb',
+    other: '#ffc180',
+    libertarian: '#34daa6',
+}
+
+const capitalize = (s: string): string => {
+    return s.charAt(0).toUpperCase() + s.slice(1)
+}
+
+const data: ElectionDatum[] = [
+    {
+        year: 1980,
+        republican: 43642639,
+        democrat: 35480948,
+        other: 6505863,
+        libertarian: 867401,
+    },
+    {
+        year: 1984,
+        republican: 54166829,
+        democrat: 37449813,
+        libertarian: 227204,
+        other: 811015,
+    },
+    {
+        year: 1988,
+        republican: 48642640,
+        democrat: 41716679,
+        libertarian: 409708,
+        other: 817798,
+    },
+    {
+        year: 1992,
+        republican: 38798913,
+        democrat: 44856747,
+        other: 20663272,
+        libertarian: 280848,
+    },
+    {
+        year: 1996,
+        republican: 39003697,
+        democrat: 47295351,
+        other: 9625419,
+        libertarian: 465351,
+    },
+    {
+        year: 2000,
+        republican: 50311372,
+        democrat: 50830580,
+        other: 4071625,
+        libertarian: 380405,
+    },
+    {
+        year: 2004,
+        republican: 61872711,
+        democrat: 58894561,
+        other: 1212870,
+        libertarian: 369308,
+    },
+    {
+        year: 2008,
+        republican: 59613835,
+        democrat: 69338846,
+        other: 1956116,
+        libertarian: 510456,
+    },
+    {
+        year: 2012,
+        republican: 60670117,
+        democrat: 65752017,
+        other: 1501463,
+        libertarian: 1216400,
+    },
+    {
+        year: 2016,
+        republican: 62692670,
+        democrat: 65677288,
+        libertarian: 4125170,
+        other: 4292059,
+    },
+    {
+        year: 2020,
+        democrat: 81268908,
+        republican: 74216146,
+        libertarian: 1797355,
+        other: 1246094,
+    },
+]
+
+
+const items = Object.entries(colors).map(([n, c]) => ({
+    name: capitalize(n),
+    color: c,
+}))
+const x = (d: ElectionDatum) => d.year
+const y = [
+    (d: ElectionDatum) => d.republican,
+    (d: ElectionDatum) => d.democrat,
+    (d: ElectionDatum) => d.other,
+    (d: ElectionDatum) => d.libertarian,
+]
+const color = (_d: ElectionDatum, i: number) => items[i]?.color
+
+const yTicks = (value: any) => (value / 10 ** 6).toFixed(1)
+
+</script>
+<template>
+    <div class="flex flex-col gap-1">
+        <div class="text-center text-sm font-semibold">
+            {{ $t('Basic Grouped Bar Chart') }}
+        </div>
+        <VisBulletLegend :items="items" />
+        <VisXYContainer>
+            <VisGroupedBar :data="data" :x="x" :y="y" :color="color" />
+            <VisAxis type="x" label="Election Year" :num-ticks="data.length" />
+            <VisAxis type="y" :tick-format="yTicks" label="Number of Votes (millions)" />
+        </VisXYContainer>
+    </div>
+</template>
diff --git a/app/components/unovis/6.BasicDonutChart.vue b/app/components/unovis/6.BasicDonutChart.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { VisSingleContainer, VisDonut, VisBulletLegend } from '@unovis/vue'
+
+type DataRecord = { key: string, value: number }
+
+const data: DataRecord[] = [
+    { key: 'names', value: 1396 },
+    { key: 'cool', value: 928 },
+    { key: 'alphanumeric', value: 864 },
+    { key: 'fluffy', value: 518 },
+    { key: 'nerdy', value: 294 },
+    { key: 'other', value: 916 },
+]
+const legendItems = Object.entries(data).map(([_, data]) => ({
+    name: data.key.charAt(0).toUpperCase() + data.key.slice(1)
+}))
+
+const value = (d: DataRecord) => d.value
+
+</script>
+<template>
+    <div class="flex flex-col">
+        <div class="text-center text-sm font-semibold">
+            {{ $t('Basic Donut Chart') }}
+        </div>
+        <VisBulletLegend :items="legendItems" />
+        <VisSingleContainer>
+            <VisDonut :value="value" :data="data" :show-empty-segments="true" :pad-angle="0.01" :arc-width="80" />
+        </VisSingleContainer>
+    </div>
+</template>
diff --git a/app/composables/useObserver.ts b/app/composables/useObserver.ts
@@ -1,4 +1,4 @@
-import defu from 'defu';
+import { defu } from 'defu';
 
 export const useObserver = () => {
   const observer = ref<IntersectionObserver>();

diff --git a/app/composables/useRouteLink.ts b/app/composables/useRouteLink.ts
@@ -114,9 +114,18 @@ export const useRouteLink = () => {
             text: 'ECharts',
           },
         },
+        {
+          id: 'dashboard/unovis',
+          label: 'Unovis',
+          to: '/dashboard/unovis',
+          icon: 'i-token:uno',
+          tooltip: {
+            text: 'Unovis'
+          }
+        }
       ],
-    },{
-      id:'users',
+    }, {
+      id: 'users',
       label: t('Users'),
       icon: 'i-heroicons-user-group',
       to: '/users',

diff --git a/app/composables/useSheet.ts b/app/composables/useSheet.ts
@@ -5,7 +5,7 @@ import type {
   ThemeCfg,
 } from '@antv/s2';
 import { PivotSheet, TableSheet, generatePalette, getPalette } from '@antv/s2';
-import defu from 'defu';
+import { defu } from 'defu';
 
 export type SheetType =
   | 'pivot'