feat(statistic): new component

site/site.config.mjs

@@ -505,6 +505,14 @@ export const docs = [
         component: () => import('tdesign-vue-next/skeleton/skeleton.md'),
         componentEn: () => import('tdesign-vue-next/skeleton/skeleton.en-US.md'),
       },
+      {
+        title: 'Statistic 统计数值',
+        titleEn: 'Statistic',
+        name: 'statistic',
+        path: '/vue-next/components/statistic',
+        component: () => import('tdesign-vue-next/statistic/statistic.md'),
+        componentEn: () => import('tdesign-vue-next/statistic/statistic.en-US.md'),
+      },
       {
         title: 'Swiper 轮播框',
         titleEn: 'Swiper',

src/components.ts

@@ -54,6 +54,7 @@ export * from './image-viewer';
 export * from './list';
 export * from './progress';
 export * from './skeleton';
+export * from './statistic';
 export * from './swiper';
 export * from './table';
 export * from './tag';

src/statistic/__tests__/index.test.jsx

@@ -0,0 +1,114 @@
+import { mount } from '@vue/test-utils';
+import Statistic from '@/src/statistic/index.ts';
+
+describe('Statistic', () => {
+  describe(':props', () => {
+    it('title', () => {
+      const wrapper = mount({
+        render() {
+          return <Statistic title="Total Assets" value={82.76} />;
+        },
+      });
+      expect(wrapper.find('.t-statistic-title').exists()).toBe(true);
+      expect(wrapper.find('.t-statistic-title').text()).toBe('Total Assets');
+    });
+
+    it('value', () => {
+      const wrapper = mount({
+        render() {
+          return <Statistic title="Total Assets" value={82.76} unit="%" trend="increase" />;
+        },
+      });
+      expect(wrapper.find('.t-statistic-content-value').exists()).toBe(true);
+      expect(wrapper.find('.t-statistic-content-value').text()).toBe('82.76');
+    });
+
+    it('unit', () => {
+      const wrapper = mount(Statistic, {
+        propsData: {
+          title: 'Total Sales',
+          value: 1000,
+          unit: 'pcs',
+        },
+      });
+
+      expect(wrapper.find('.t-statistic-content-unit').text()).toBe('pcs');
+    });
+
+    it('decimalPlaces', () => {
+      const wrapper = mount({
+        render() {
+          return <Statistic title="Total Assets" value={123.45678} decimalPlaces={3} />;
+        },
+      });
+      expect(wrapper.find('.t-statistic-content-value').exists()).toBe(true);
+      expect(wrapper.find('.t-statistic-content-value').text()).toBe('123.457');
+    });
+
+    it('prefix', () => {
+      const wrapper = mount(Statistic, {
+        propsData: {
+          title: 'Total Sales',
+          value: 1000,
+          prefix: '$',
+        },
+      });
+
+      expect(wrapper.find('.t-statistic-content-prefix').text()).toBe('$');
+    });
+
+    it('suffix', () => {
+      const wrapper = mount(Statistic, {
+        propsData: {
+          title: 'Total Sales',
+          value: 1000,
+          suffix: 'K',
+        },
+      });
+
+      expect(wrapper.find('.t-statistic-content-suffix').text()).toBe('K');
+    });
+
+    it('loading', async () => {
+      const wrapper = mount(Statistic, {
+        propsData: {
+          title: 'Downloads',
+          value: 1000,
+          loading: true,
+        },
+      });
+
+      expect(wrapper.find('.t-statistic-title').text()).toBe('Downloads');
+      expect(wrapper.find('.t-skeleton').exists()).toBe(true);
+      expect(wrapper.find('.t-skeleton__row').exists()).toBe(true);
+    });
+
+    it('trend="increase"', () => {
+      const wrapper = mount(Statistic, {
+        propsData: {
+          title: 'Total Sales',
+          value: 1000,
+          trend: 'increase',
+        },
+      });
+
+      const trendIconElement = wrapper.find('.t-icon.t-icon-arrow-triangle-up-filled');
+      expect(trendIconElement.exists()).toBe(true);
+      expect(trendIconElement.element.tagName).toBe('svg');
+    });
+
+    it('trend="decrease"', () => {
+      const wrapper = mount(Statistic, {
+        propsData: {
+          title: 'Total Sales',
+          value: 1000,
+          trend: 'decrease',
+        },
+      });
+
+      const trendIconElement = wrapper.find('.t-icon.t-icon-arrow-triangle-down-filled');
+      expect(trendIconElement.exists()).toBe(true);
+      expect(trendIconElement.element.tagName).toBe('svg');
+    });
+  });
+});

src/statistic/_example/animation.vue

@@ -0,0 +1,32 @@
+<template>
+  <t-space direction="vertical">
+    <t-space>
+      <t-button @click="start = true">Start</t-button>
+      <t-button @click="value = 98.12">Update value</t-button>
+      <t-button @click="$refs.refUp.start()">refs</t-button>
+    </t-space>
+    <t-statistic
+      ref="refUp"
+      title="Total Assets"
+      suffix="%"
+      :value="value"
+      :animation="{
+        valueFrom: 0,
+        duration: 2000,
+      }"
+      :decimal-places="2"
+      :animation-start="start"
+    />
+  </t-space>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      start: false,
+      value: 56.32,
+    };
+  },
+};
+</script>

src/statistic/_example/base.vue

@@ -0,0 +1,6 @@
+<template>
+  <t-space :size="100">
+    <t-statistic title="Total Assets" :value="82.76" unit="%" trend="increase" />
+    <t-statistic title="Total Assets" :value="82.76" unit="USD" trend="increase" />
+  </t-space>
+</template>

src/statistic/_example/color.vue

@@ -0,0 +1,9 @@
+<template>
+  <t-space>
+    <t-statistic title="Total Assets" :value="82.76" unit="%" trend="increase" color="black" />
+    <t-statistic title="Total Assets" :value="82.76" unit="%" trend="increase" color="blue" />
+    <t-statistic title="Total Assets" :value="82.76" unit="%" trend="increase" color="red" />
+    <t-statistic title="Total Assets" :value="82.76" unit="%" trend="increase" color="orange" />
+    <t-statistic title="Total Assets" :value="82.76" unit="%" trend="increase" color="green" />
+  </t-space>
+</template>

src/statistic/_example/combination.vue

@@ -0,0 +1,62 @@
+<template>
+  <t-space :size="100" break-line>
+    <t-space align="center">
+      <t-icon name="chart" class="icon" />
+      <t-statistic title="Total Assets" :value="82.76" unit="%" trend="increase" trend-placement="right" />
+    </t-space>
+
+    <t-space align="center">
+      <t-statistic title="Total Assets" :value="52.18" unit="%" trend="decrease" />
+      <t-icon name="internet" class="icon" style="border-radius: 50%" />
+    </t-space>
+
+    <t-card title="Yesterday traffic" header-bordered hover-shadow>
+      <t-space :separator="separator">
+        <t-statistic title="Voice duration" :value="789" unit="minute" extra="the day before 9%" />
+        <t-statistic title="Total number of voice DAUs" :value="188" color="red">
+          <template #extra>
+            <t-space direction="vertical" :size="0">
+              <t-space align="center" :size="7">
+                <div style="width: 120px">the day before</div>
+                <t-icon
+                  name="arrow-triangle-up-filled"
+                  style="color: #d54941; font-size: var(--td-font-size-body-large)"
+                />
+                <div>9%</div>
+              </t-space>
+
+              <t-space align="center" :size="7">
+                <div style="width: 120px">last week</div>
+                <t-icon
+                  name="arrow-triangle-down-filled"
+                  style="color: #2ba471; font-size;: var(--td-font-size-body-large)"
+                />
+                <div>9%</div>
+              </t-space>
+            </t-space>
+          </template>
+        </t-statistic>
+        <t-statistic title="Total Assets" :value="52.18" unit="%" trend="decrease" color="green" />
+      </t-space>
+    </t-card>
+  </t-space>
+</template>
+
+<script lang="jsx">
+export default {
+  data() {
+    return {
+      separator: () => <t-divider layout="vertical" style="height:100%" />,
+    };
+  },
+};
+</script>
+<style>
+.icon {
+  font-size: 32px;
+  color: var(--td-brand-color);
+  background: var(--td-brand-color-light);
+  border-radius: var(--td-radius-medium);
+  padding: 12px;
+}
+</style>

src/statistic/_example/loading.vue

@@ -0,0 +1,16 @@
+<template>
+  <t-space direction="vertical">
+    <t-switch v-model="loading" size="large" />
+    <t-statistic title="Downloads" :value="123456" :loading="loading" />
+  </t-space>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: true,
+    };
+  },
+};
+</script>

src/statistic/_example/slot.vue

@@ -0,0 +1,26 @@
+<template>
+  <t-space :size="32">
+    <t-statistic title="Total Assets" :value="56.32" unit="%">
+      <template #prefix>
+        <control-platform-icon />
+      </template>
+    </t-statistic>
+    <t-statistic title="Total Assets" :value="176059" prefix="$" unit="%" trend="increase" />
+
+    <t-statistic title="Total Assets" :value="62.58" unit="%">
+      <template #suffix>
+        <arrow-triangle-down-filled-icon style="color: #ee4d38" />
+      </template>
+    </t-statistic>
+  </t-space>
+</template>
+<script>
+import { ControlPlatformIcon, ArrowTriangleDownFilledIcon } from 'tdesign-icons-vue-next';
+
+export default {
+  components: {
+    ArrowTriangleDownFilledIcon,
+    ControlPlatformIcon,
+  },
+};
+</script>

src/statistic/_example/trend.vue

@@ -0,0 +1,7 @@
+<template>
+  <t-space :size="100">
+    <t-statistic title="Total Assets" :value="82.76" unit="%" trend="increase" />
+    <t-statistic title="Total Assets" :value="82.76" unit="%" trend="decrease" />
+    <t-statistic title="Total Assets" :value="82.76" unit="%" trend="decrease" trend-placement="right" />
+  </t-space>
+</template>

src/statistic/index.ts

@@ -0,0 +1,12 @@
+import _Statistic from './statistic';
+import withInstall from '../utils/withInstall';
+import { TdStatisticProps } from './type';
+
+import './style';
+
+export * from './type';
+export type StatisticProps = TdStatisticProps;
+
+export const Statistic = withInstall(_Statistic);
+
+export default Statistic;