Skip to content

fix(statistic): 优化文档 ts问题 插槽 不居中问题 暂时隐藏showGroupSeparator属性 #128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jan 8, 2022
Merged

fix(statistic): 优化文档 ts问题 插槽 不居中问题 暂时隐藏showGroupSeparator属性 #128

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ed2c6da
fix(color-picker): '优化palette拖拽效果
ErKeLost Dec 22, 2021
54a4ba5
Merge branch 'dev' of github.com:DevCloudFE/vue-devui into dev
ErKeLost Dec 25, 2021
b2a1cf1
docs(colorpicker, statistic, ripple): '优化文档 '
ErKeLost Dec 25, 2021
0abdf40
Merge branch 'dev' of github.com:DevCloudFE/vue-devui into dev
ErKeLost Dec 27, 2021
bdad7fe
Merge branch 'dev' of github.com:DevCloudFE/vue-devui into dev
ErKeLost Dec 28, 2021
f89e85c
fix(statistic): 修复插槽样式问题 ts格式暂时移除showgroup属性
ErKeLost Jan 1, 2022
378b07a
Merge branch 'dev' of github.com:DevCloudFE/vue-devui into dev
ErKeLost Jan 1, 2022
0836b89
docs(statistic): 修复文档显示错误
ErKeLost Jan 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/devui-vue/devui/statistic/src/statistic-types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ export const statisticProps = {
},
groupSeparator: {
type: String,
default: ','
default: ''
},
showGroupSeparator: {
type: Boolean,
default: false
default: true
},
titleStyle: {
type: Object as PropType<CSSProperties>
Expand Down
2 changes: 2 additions & 0 deletions packages/devui-vue/devui/statistic/src/statistic.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,13 @@
&-prefix {
margin-right: 6px;
display: flex;
align-items: center;
}

&-suffix {
margin-left: 6px;
display: flex;
align-items: center;
}

&--value {
Expand Down
6 changes: 3 additions & 3 deletions packages/devui-vue/devui/statistic/src/utils/animation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export class Tween {
this.keys = {}
}

update() {
update(): void {
this.time = Date.now()
// delay some time
if (this.time < this.startTime) {
Expand Down Expand Up @@ -107,7 +107,7 @@ export class Tween {
}

// 递归 重绘
start() {
start(): void {
this.startTime = Date.now() + this.delay
const tick = () => {
this.update()
Expand All @@ -122,7 +122,7 @@ export class Tween {
tick()
}

stop() {
stop(): void {
cancelAnimationFrame(this.timer)
this.timer = null
}
Expand Down
12 changes: 6 additions & 6 deletions packages/devui-vue/devui/statistic/src/utils/easing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
const pow = Math.pow
const sqrt = Math.sqrt

export const easeOutCubic = function (x: number) {
export const easeOutCubic = function (x: number): number {
return 1 - pow(1 - x, 3)
}
export const linear = (x) => x
export const easeOutExpo = function (x: number) {
export const linear = (x: number): number => x
export const easeOutExpo = function (x: number): number {
return x === 1 ? 1 : 1 - pow(2, -10 * x)
}

export const easeInOutExpo = function (x: number) {
export const easeInOutExpo = function (x: number): number {
return x === 0
? 0
: x === 1
Expand All @@ -19,9 +19,9 @@ export const easeInOutExpo = function (x: number) {
? pow(2, 20 * x - 10) / 2
: (2 - pow(2, -20 * x + 10)) / 2
}
export const easeInExpo = function (x: number) {
export const easeInExpo = function (x: number): number {
return x === 0 ? 0 : pow(2, 10 * x - 10)
}
export const easeInOutCirc = function (x: number) {
export const easeInOutCirc = function (x: number): number {
return x < 0.5 ? (1 - sqrt(1 - pow(2 * x, 2))) / 2 : (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2
}
125 changes: 72 additions & 53 deletions packages/devui-vue/docs/components/statistic/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@
<d-col :span="12">
<d-statistic
title="Users Sales"
:value="5201314"
style="position: absolute">
</d-statistic>

group-separator=","
:value="5201314" />
</d-col>
<d-col :span="12">
<d-statistic title="Account Weekly Sales (CNY)" :value="999999"
/>
<d-statistic
title="Account Weekly Sales (CNY)"
group-separator="."
:value="999999" />
</d-col>
</d-cow>
</template>
Expand All @@ -39,13 +39,7 @@
<d-row :gutter="16">
<d-col :span="12">
<d-card>
<d-statistic
title="Growth Rate"
:value="68.28"
:precision="3"
suffix="%"
:content-style="{ color: '#3f8600' }"
>
<d-statistic title="Growth Rate" :value="68.28" :precision="3" suffix="%">
<template #prefix>
<d-icon name="experice-new" />
</template>
Expand All @@ -54,13 +48,7 @@
</d-col>
<d-col :span="12">
<d-card>
<d-statistic
title="Decline Rate"
:value="38.3"
suffix="%"
class="demo-class"
:content-style="{ color: '#cf1322' }"
>
<d-statistic title="Decline Rate" :value="38.3" suffix="%">
<template #prefix>
<d-icon name="bold" />
</template>
Expand All @@ -87,30 +75,28 @@
title="Animation Growth Rate"
:value="88.265"
suffix="%"
:content-style="{ color: '#3f8600' }"
:value-from="0"
:start="start"
:animation-duration="5000"
animation
>
</d-statistic>
></d-statistic>
</d-card>
</d-col>
<d-col :span="12">
<d-card>
<d-statistic
title="Animation Decline Rate"
value="53.333"
:precision="0"
suffix="%"
class="demo-class"
:content-style="{ color: '#cf1322' }"
value="53"
:precision="3"
:value-from="0"
:start="controlStart"
animation
>
<template #suffix>
<span>%</span>
<d-button @click="controlStart = true">Start</d-button>
</template>
</d-statistic>
<d-button @click="controlStart = true">Start</d-button>
</d-card>
</d-col>
</d-row>
Expand All @@ -120,10 +106,10 @@ export default {
data() {
return {
start: true,
controlStart: false,
};
},
};
controlStart: false
}
}
}
</script>
```

Expand All @@ -144,9 +130,7 @@ export default {
:showGroupSeparator="true"
style="margin-right: 50px"
>
<template #suffix>
%
</template>
<template #suffix>%</template>
</d-statistic>
</d-col>
<d-col :span="12">
Expand All @@ -162,23 +146,58 @@ export default {

:::

### 自定义样式

<<<<<<< HEAD
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个<<<<<<< HEAD问题太明显了，后续要多自检，保障代码质量
@ErKeLost

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

嗯嗯 不好意思

提供自定义属性方便添加样式
:::demo

```vue
<template>
<d-row :gutter="16">
<d-col :span="12">
<d-statistic
title="Custom Style"
:value="88"
:content-style="{ color: '#fba' }"
:title-style="{ color: '#abf' }"
>
<template #suffix>%</template>
</d-statistic>
</d-col>
<d-col :span="12">
<d-statistic
title="Scale"
:value="5000"
group-separator="."
:precision="3"
prefix="$"
:content-style="{ fontSize: '30px', color: 'red'}"
>
</d-col>
</d-row>
</template>
```

:::

### d-statistic

| 参数 | 类型 | 默认 | 说明 |
| :---: | :---: | :---: | :---: |
| title | `string \| v-slot` | - | 数值的标题 |
| extra | `string \| v-slot` | - | 额外内容 |
| value | `number \| string` | - | 数值内容 |
| group-separator | `string` | - | 设置千分位标识符 |
| precision | `number` | - | 设置数值精度 |
| suffix | `string \| v-slot` | - | 设置数值的后缀 |
| prefix | `string \| v-slot` | - | 设置数值的前缀 |
| title-style | `style` | - | 标题样式 |
| content-style | `style` | - | 内容样式 |
| animation-duration | `number` | 2000 | 动画持续时间 |
| delay | `number` | 0 | 延迟进行动画时间 |
| value-from | `number` | 0 | 动画初始值 |
| animation | `boolean` | false | 是否开启动画 |
| easing | `string` | quartOut | 数字动画效果 |
| start | `boolean` | false | 是否开始动画 |
| 参数 | 类型 | 默认 | 说明 |
| :----------------: | :----------------: | :------: | :--------------: |
| title | `string \| v-slot` | - | 数值的标题 |
| extra | `string \| v-slot` | - | 额外内容 |
| value | `number \| string` | - | 数值内容 |
| group-separator | `string` | - | 设置千分位标识符 |
| precision | `number` | - | 设置数值精度 |
| suffix | `string \| v-slot` | - | 设置数值的后缀 |
| prefix | `string \| v-slot` | - | 设置数值的前缀 |
| title-style | `style` | - | 标题样式 |
| content-style | `style` | - | 内容样式 |
| animation-duration | `number` | 2000 | 动画持续时间 |
| delay | `number` | 0 | 延迟进行动画时间 |
| value-from | `number` | 0 | 动画初始值 |
| animation | `boolean` | false | 是否开启动画 |
| easing | `string` | quartOut | 数字动画效果 |
| start | `boolean` | false | 是否开始动画 |

34 changes: 34 additions & 0 deletions packages/devui-vue/docs/en-US/components/statistic/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,40 @@ Prefix and suffix slots

:::

### Custom Style

Provide custom attributes to facilitate adding styles
:::demo

```vue
<template>
<d-row :gutter="16">
<d-col :span="12">
<d-statistic
title="Custom Style"
:value="88"
:content-style="{ color: '#fba' }"
:title-style="{ color: '#abf' }"
>
<template #suffix>%</template>
</d-statistic>
</d-col>
<d-col :span="12">
<d-statistic
title="Scale"
:value="5000"
group-separator="."
:precision="3"
prefix="$"
:content-style="{ fontSize: '30px', color: 'red'}"
>
</d-col>
</d-row>
</template>
```

:::

### d-statistic

| parameter | type | default | introduce |
Expand Down