From 7722b9e7553453f789e7faf30069a0a78243728b Mon Sep 17 00:00:00 2001 From: xiaodong2008 Date: Fri, 29 Nov 2024 23:25:20 +0800 Subject: [PATCH] refactor: run prettier --- .github/FUNDING.yml | 2 +- .github/ISSUE_TEMPLATE/bug_report.md | 24 ++- .github/ISSUE_TEMPLATE/custom.md | 7 +- .github/ISSUE_TEMPLATE/feature_request.md | 7 +- .github/PULL_REQUEST_TEMPLATE.md | 11 +- CODE_OF_CONDUCT.md | 22 +- bump.config.ts | 9 +- extensions/animations/src/focus.ts | 86 ++++---- extensions/animations/src/index.ts | 28 +-- extensions/animations/vite.config.ts | 22 +- extensions/chart/src/index.ts | 4 +- .../chart/src/utils/bezierControlPoints.ts | 59 +++--- extensions/chart/src/utils/chartUtil.ts | 32 ++- extensions/chart/src/utils/index.ts | 4 +- extensions/chart/src/widgets/baseChart.ts | 146 +++++++------ .../chart/src/widgets/baseSimpleChart.vue | 34 ++- extensions/chart/src/widgets/chartData.vue | 34 +-- extensions/chart/src/widgets/index.ts | 30 +-- extensions/chart/vite.config.ts | 22 +- extensions/code/src/index.ts | 4 +- extensions/code/src/index.vue | 60 ++++-- extensions/code/vite.config.ts | 22 +- extensions/emoji/vite.config.ts | 22 +- extensions/geometry/src/angle.vue | 18 +- extensions/geometry/src/index.ts | 8 +- extensions/geometry/vite.config.ts | 22 +- extensions/google-fonts/src/index.ts | 4 +- extensions/google-fonts/src/index.vue | 35 ++-- extensions/google-fonts/vite.config.ts | 22 +- extensions/layout/src/column.vue | 17 +- extensions/layout/src/index.ts | 12 +- extensions/layout/src/row.vue | 17 +- extensions/layout/vite.config.ts | 22 +- extensions/lights/src/distant-light.vue | 36 ++-- extensions/lights/src/index.ts | 12 +- extensions/lights/src/point-light.vue | 40 ++-- extensions/lights/src/spot-light.vue | 32 +-- extensions/lights/vite.config.ts | 22 +- extensions/markdown/src/index.ts | 4 +- extensions/markdown/src/index.vue | 59 ++++-- extensions/markdown/vite.config.ts | 22 +- extensions/math/src/index.ts | 20 +- extensions/math/src/tex.vue | 63 ++++-- extensions/math/vite.config.ts | 22 +- extensions/mindmap/src/index.ts | 2 +- extensions/mindmap/vite.config.ts | 22 +- extensions/platform/vite.config.ts | 22 +- extensions/skia/src/skia.vue | 36 ++-- extensions/skia/vite.config.ts | 22 +- extensions/table/src/index.ts | 12 +- extensions/table/vite.config.ts | 22 +- extensions/three/src/index.ts | 12 +- extensions/three/src/object3d.ts | 12 +- extensions/three/src/three.vue | 39 ++-- extensions/three/src/widget3d.ts | 22 +- extensions/three/vite.config.ts | 24 +-- extensions/typst/src/index.ts | 4 +- extensions/typst/vite.config.ts | 22 +- extensions/ui/src/cursor.vue | 18 +- extensions/ui/src/index.ts | 12 +- extensions/ui/src/progress-bar.vue | 40 ++-- extensions/ui/src/window.vue | 54 +++-- extensions/ui/vite.config.ts | 22 +- packages/app/postcss.config.js | 2 +- packages/app/src/App.vue | 16 +- packages/app/src/components/Timeline.vue | 25 ++- packages/app/src/components/Tools.vue | 12 +- packages/app/src/components/TopMenubar.vue | 92 +++++--- packages/app/src/components/Widgets.vue | 12 +- .../src/components/__test__/TestAnimation.vue | 10 +- packages/app/src/global.d.ts | 2 +- packages/app/src/main.ts | 17 +- packages/app/src/output.css | 34 +-- packages/app/src/vite-env.d.ts | 8 +- packages/app/tailwind.config.js | 4 +- packages/app/vite.config.ts | 14 +- packages/client/postcss.config.js | 2 +- packages/client/src/index.ts | 123 ++++++----- packages/client/src/resolver.ts | 22 +- packages/client/tailwind.config.js | 4 +- packages/client/template/src/main.ts | 12 +- packages/client/template/src/player.ts | 4 +- packages/client/template/src/router.ts | 10 +- .../client/template/src/scenes/MainScene.vue | 34 +-- packages/client/tsup.config.ts | 10 +- packages/core/src/animation.ts | 198 ++++++++++-------- packages/core/src/index.ts | 8 +- packages/core/src/motion.ts | 10 +- packages/core/vite.config.ts | 22 +- packages/export/src/image-process.ts | 10 +- packages/export/src/index.ts | 74 ++++--- packages/export/src/video-process.ts | 36 ++-- packages/export/tsup.config.ts | 10 +- packages/lib/src/animations/color.ts | 87 ++++---- packages/lib/src/animations/fade.ts | 61 +++--- packages/lib/src/animations/grow.ts | 14 +- packages/lib/src/animations/index.ts | 16 +- packages/lib/src/animations/move.ts | 73 ++++--- packages/lib/src/animations/path.ts | 54 ++--- packages/lib/src/animations/rotate.ts | 46 ++-- packages/lib/src/animations/scale.ts | 64 +++--- packages/lib/src/animations/trace.ts | 48 +++-- packages/lib/src/animations/typings.ts | 2 +- packages/lib/src/animations/zoom.ts | 79 +++---- packages/lib/src/index.ts | 10 +- packages/lib/src/interpolator.ts | 2 +- packages/lib/src/motion.vue | 33 +-- packages/lib/src/widgets/arc.vue | 87 ++++---- packages/lib/src/widgets/circle.vue | 20 +- packages/lib/src/widgets/ellipse.vue | 28 +-- packages/lib/src/widgets/figure.ts | 41 ++-- packages/lib/src/widgets/group.vue | 12 +- packages/lib/src/widgets/image.vue | 23 +- packages/lib/src/widgets/index.ts | 60 +++--- packages/lib/src/widgets/line.vue | 22 +- packages/lib/src/widgets/mask.vue | 24 ++- packages/lib/src/widgets/path.vue | 16 +- packages/lib/src/widgets/rect.vue | 20 +- packages/lib/src/widgets/text-unit.vue | 24 ++- packages/lib/src/widgets/text.vue | 52 +++-- packages/lib/src/widgets/video.vue | 58 ++--- packages/lib/src/widgets/webview.vue | 26 +-- packages/lib/vite.config.ts | 22 +- packages/utils/src/deep-clone.ts | 25 +-- packages/utils/src/index.ts | 4 +- packages/utils/src/judgements.ts | 55 ++--- packages/utils/tsup.config.ts | 2 +- test/index.html | 22 +- test/src/App.vue | 46 ++-- test/src/Other.vue | 44 ++-- test/src/Scene1.vue | 2 +- test/src/export-test.js | 12 +- test/src/main.ts | 20 +- test/src/router.ts | 10 +- test/vite.config.ts | 10 +- tsup.config.ts | 12 +- 136 files changed, 2076 insertions(+), 1768 deletions(-) diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index d1fc4eb..4389527 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -11,4 +11,4 @@ issuehunt: # Replace with a single IssueHunt username lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry polar: # Replace with a single Polar username buy_me_a_coffee: # Replace with a single Buy Me a Coffee username -custom: ['https://afdian.com/a/newcar'] +custom: ["https://afdian.com/a/newcar"] diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index dd84ea7..9b77ea7 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -1,10 +1,9 @@ --- name: Bug report about: Create a report to help us improve -title: '' -labels: '' -assignees: '' - +title: "" +labels: "" +assignees: "" --- **Describe the bug** @@ -12,6 +11,7 @@ A clear and concise description of what the bug is. **To Reproduce** Steps to reproduce the behavior: + 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' @@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen. If applicable, add screenshots to help explain your problem. **Desktop (please complete the following information):** - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 22] + +- OS: [e.g. iOS] +- Browser [e.g. chrome, safari] +- Version [e.g. 22] **Smartphone (please complete the following information):** - - Device: [e.g. iPhone6] - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] + +- Device: [e.g. iPhone6] +- OS: [e.g. iOS8.1] +- Browser [e.g. stock browser, safari] +- Version [e.g. 22] **Additional context** Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/custom.md b/.github/ISSUE_TEMPLATE/custom.md index b894315..babf9b2 100644 --- a/.github/ISSUE_TEMPLATE/custom.md +++ b/.github/ISSUE_TEMPLATE/custom.md @@ -1,8 +1,7 @@ --- name: Custom issue template about: Describe this issue template's purpose here. -title: '' -labels: '' -assignees: '' - +title: "" +labels: "" +assignees: "" --- diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index bbcbbe7..2bc5d5f 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -1,10 +1,9 @@ --- name: Feature request about: Suggest an idea for this project -title: '' -labels: '' -assignees: '' - +title: "" +labels: "" +assignees: "" --- **Is your feature request related to a problem? Please describe.** diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index cfb9c10..191df29 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -8,15 +8,16 @@ about: Have a contribution to VueMotion! Thank you! **Related Issues:** [List the issue numbers related to this PR] **TODO** + - [ ] task1 - [ ] ... **Checklist:** -- [ ] Code has been reviewed -- [ ] Code complies with the project's code standards and best practices -- [ ] Code has passed all tests -- [ ] Code does not affect the normal use of existing features -- [ ] Documentation has been updated +- [ ] Code has been reviewed +- [ ] Code complies with the project's code standards and best practices +- [ ] Code has passed all tests +- [ ] Code does not affect the normal use of existing features +- [ ] Documentation has been updated **Screenshots:** [Provide relevant screenshots or GIF animations] diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index bed98e5..6406fce 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -17,23 +17,23 @@ diverse, inclusive, and healthy community. Examples of behavior that contributes to a positive environment for our community include: -* Demonstrating empathy and kindness toward other people -* Being respectful of differing opinions, viewpoints, and experiences -* Giving and gracefully accepting constructive feedback -* Accepting responsibility and apologizing to those affected by our mistakes, +- Demonstrating empathy and kindness toward other people +- Being respectful of differing opinions, viewpoints, and experiences +- Giving and gracefully accepting constructive feedback +- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience -* Focusing on what is best not just for us as individuals, but for the +- Focusing on what is best not just for us as individuals, but for the overall community Examples of unacceptable behavior include: -* The use of sexualized language or imagery, and sexual attention or +- The use of sexualized language or imagery, and sexual attention or advances of any kind -* Trolling, insulting or derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or email +- Trolling, insulting or derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or email address, without their explicit permission -* Other conduct which could reasonably be considered inappropriate in a +- Other conduct which could reasonably be considered inappropriate in a professional setting ## Enforcement Responsibilities @@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban. ### 4. Permanent Ban **Community Impact**: Demonstrating a pattern of violation of community -standards, including sustained inappropriate behavior, harassment of an +standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. **Consequence**: A permanent ban from any sort of public interaction within diff --git a/bump.config.ts b/bump.config.ts index cbad940..4316d68 100644 --- a/bump.config.ts +++ b/bump.config.ts @@ -1,9 +1,6 @@ -import { defineConfig } from 'bumpp' +import { defineConfig } from "bumpp"; export default defineConfig({ - files: [ - 'packages/**/package.json', - 'extensions/**/package.json', - ], + files: ["packages/**/package.json", "extensions/**/package.json"], recursive: true, -}) +}); diff --git a/extensions/animations/src/focus.ts b/extensions/animations/src/focus.ts index 6f83534..dbea640 100644 --- a/extensions/animations/src/focus.ts +++ b/extensions/animations/src/focus.ts @@ -1,41 +1,53 @@ -import { defineAnimation } from '@vue-motion/core' -import type { Widget } from '@vue-motion/core' -import type { Positional } from '@vue-motion/lib' +import { defineAnimation } from "@vue-motion/core"; +import type { Widget } from "@vue-motion/core"; +import type { Positional } from "@vue-motion/lib"; -export const focusOn = defineAnimation((target, context) => { - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle') - const { width, height } = target.range! - circle.setAttribute('cx', (width).toString()) - circle.setAttribute('cy', (height).toString()) - circle.setAttribute('fill', 'rgba(135,206,250,0.3)') - circle.setAttribute('stroke', 'rgba(135,206,250,0.3)') - const originRadius = Math.sqrt((width / 2) ** 2 + (height / 2) ** 2) - const scaledRadius = originRadius * (context.scale ?? 2) - circle.setAttribute('r', scaledRadius.toString()) - target.element?.appendChild(circle) - return (progress) => { - circle.setAttribute('r', (scaledRadius * (1 - progress)).toString()) +export const focusOn = defineAnimation< + Positional & Widget, + { + scale?: number; + offsetFrom?: [number, number]; } -}) - -export const focusOut = defineAnimation((target, context) => { - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle') - const { width, height } = target.range! - circle.setAttribute('cx', (width).toString()) - circle.setAttribute('cy', (height).toString()) - circle.setAttribute('fill', 'rgba(135,206,250,0.3)') - circle.setAttribute('stroke', 'rgba(135,206,250,0.3)') - const originRadius = Math.sqrt((width / 2) ** 2 + (height / 2) ** 2) - const scaledRadius = originRadius * (context.scale ?? 2) - circle.setAttribute('r', scaledRadius.toString()) - target.element?.appendChild(circle) +>((target, context) => { + const circle = document.createElementNS( + "http://www.w3.org/2000/svg", + "circle", + ); + const { width, height } = target.range!; + circle.setAttribute("cx", width.toString()); + circle.setAttribute("cy", height.toString()); + circle.setAttribute("fill", "rgba(135,206,250,0.3)"); + circle.setAttribute("stroke", "rgba(135,206,250,0.3)"); + const originRadius = Math.sqrt((width / 2) ** 2 + (height / 2) ** 2); + const scaledRadius = originRadius * (context.scale ?? 2); + circle.setAttribute("r", scaledRadius.toString()); + target.element?.appendChild(circle); return (progress) => { - circle.setAttribute('r', (scaledRadius * progress).toString()) + circle.setAttribute("r", (scaledRadius * (1 - progress)).toString()); + }; +}); + +export const focusOut = defineAnimation< + Positional & Widget, + { + scale?: number; + offsetFrom?: [number, number]; } -}) +>((target, context) => { + const circle = document.createElementNS( + "http://www.w3.org/2000/svg", + "circle", + ); + const { width, height } = target.range!; + circle.setAttribute("cx", width.toString()); + circle.setAttribute("cy", height.toString()); + circle.setAttribute("fill", "rgba(135,206,250,0.3)"); + circle.setAttribute("stroke", "rgba(135,206,250,0.3)"); + const originRadius = Math.sqrt((width / 2) ** 2 + (height / 2) ** 2); + const scaledRadius = originRadius * (context.scale ?? 2); + circle.setAttribute("r", scaledRadius.toString()); + target.element?.appendChild(circle); + return (progress) => { + circle.setAttribute("r", (scaledRadius * progress).toString()); + }; +}); diff --git a/extensions/animations/src/index.ts b/extensions/animations/src/index.ts index 7e1a8e3..00103fc 100644 --- a/extensions/animations/src/index.ts +++ b/extensions/animations/src/index.ts @@ -1,21 +1,25 @@ -import type { AnimationParams } from '@vue-motion/core' -import { registerAnimation } from '@vue-motion/core' -import type { Positional } from '@vue-motion/lib' -import { focusOn } from './focus' +import type { AnimationParams } from "@vue-motion/core"; +import { registerAnimation } from "@vue-motion/core"; +import type { Positional } from "@vue-motion/lib"; +import { focusOn } from "./focus"; export const setups = [ () => { - registerAnimation('focusOn', (params: AnimationParams) => (manager) => manager.animate(focusOn, { - duration: params?.duration ?? 1, - by: params?.by, - })) + registerAnimation( + "focusOn", + (params: AnimationParams) => (manager) => + manager.animate(focusOn, { + duration: params?.duration ?? 1, + by: params?.by, + }), + ); }, -] +]; -declare module '@vue-motion/lib' { +declare module "@vue-motion/lib" { export interface PositionalMixin { - focusOn: (params?: any) => void + focusOn: (params?: any) => void; } } -export { focusOn } +export { focusOn }; diff --git a/extensions/animations/vite.config.ts b/extensions/animations/vite.config.ts index 1295d7b..6558ba1 100644 --- a/extensions/animations/vite.config.ts +++ b/extensions/animations/vite.config.ts @@ -1,25 +1,25 @@ -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import dts from 'vite-plugin-dts' +import { defineConfig } from "vite"; +import vue from "@vitejs/plugin-vue"; +import dts from "vite-plugin-dts"; export default defineConfig({ - root: '.', + root: ".", build: { lib: { - entry: 'src/index.ts', - name: 'vuemotion', - formats: ['es', 'cjs', 'iife'], - fileName: 'index', + entry: "src/index.ts", + name: "vuemotion", + formats: ["es", "cjs", "iife"], + fileName: "index", }, rollupOptions: { - external: ['vue'], + external: ["vue"], }, }, plugins: [ vue(), dts({ - include: ['src/**/*.ts'], + include: ["src/**/*.ts"], rollupTypes: true, }), ], -}) +}); diff --git a/extensions/chart/src/index.ts b/extensions/chart/src/index.ts index ddc272d..659d2fc 100644 --- a/extensions/chart/src/index.ts +++ b/extensions/chart/src/index.ts @@ -1,2 +1,2 @@ -export * from './utils' -export * from './widgets' +export * from "./utils"; +export * from "./widgets"; diff --git a/extensions/chart/src/utils/bezierControlPoints.ts b/extensions/chart/src/utils/bezierControlPoints.ts index 3067f1c..e973f77 100644 --- a/extensions/chart/src/utils/bezierControlPoints.ts +++ b/extensions/chart/src/utils/bezierControlPoints.ts @@ -7,8 +7,13 @@ * @param previous.x * @param previous.y */ -function distanceBetweenPoints(current: { x: number, y: number }, previous: { x: number, y: number }) { - return Math.sqrt((current.x - previous.x) ** 2 + (current.y - previous.y) ** 2) +function distanceBetweenPoints( + current: { x: number; y: number }, + previous: { x: number; y: number }, +) { + return Math.sqrt( + (current.x - previous.x) ** 2 + (current.y - previous.y) ** 2, + ); } /** @@ -25,29 +30,29 @@ function distanceBetweenPoints(current: { x: number, y: number }, previous: { x: * @param t - The tension */ export function splineCurve( - firstPoint: { x: number, y: number }, - middlePoint: { x: number, y: number }, - afterPoint: { x: number, y: number }, + firstPoint: { x: number; y: number }, + middlePoint: { x: number; y: number }, + afterPoint: { x: number; y: number }, t: number, ): { - previous: { x: number, y: number } - next: { x: number, y: number } - } { - const previous = firstPoint - const current = middlePoint - const next = afterPoint - const d01 = distanceBetweenPoints(current, previous) - const d12 = distanceBetweenPoints(next, current) + previous: { x: number; y: number }; + next: { x: number; y: number }; +} { + const previous = firstPoint; + const current = middlePoint; + const next = afterPoint; + const d01 = distanceBetweenPoints(current, previous); + const d12 = distanceBetweenPoints(next, current); - let s01 = d01 / (d01 + d12) - let s12 = d12 / (d01 + d12) + let s01 = d01 / (d01 + d12); + let s12 = d12 / (d01 + d12); // If all points are the same, s01 & s02 will be inf - s01 = Number.isNaN(s01) ? 0 : s01 - s12 = Number.isNaN(s12) ? 0 : s12 + s01 = Number.isNaN(s01) ? 0 : s01; + s12 = Number.isNaN(s12) ? 0 : s12; - const fa = t * s01 // scaling factor for triangle Ta - const fb = t * s12 + const fa = t * s01; // scaling factor for triangle Ta + const fb = t * s12; return { previous: { @@ -58,7 +63,7 @@ export function splineCurve( x: current.x + fb * (next.x - previous.x), y: current.y + fb * (next.y - previous.y), }, - } + }; } /** @@ -70,23 +75,23 @@ export function splineCurve( * @param loop - Whether the points are loop */ export function bezierControlPoints( - points: { x: number, y: number }[], + points: { x: number; y: number }[], tension: number, loop: boolean, ) { - const result = [] + const result = []; - let prev = loop ? points[points.length - 1] : points[0] + let prev = loop ? points[points.length - 1] : points[0]; for (let i = 0; i < points.length; ++i) { - const point = points[i] + const point = points[i]; result[i] = splineCurve( prev, point, points[Math.min(i + 1, points.length - (loop ? 0 : 1)) % points.length], tension, - ) - prev = point + ); + prev = point; } - return result + return result; } diff --git a/extensions/chart/src/utils/chartUtil.ts b/extensions/chart/src/utils/chartUtil.ts index 1da4863..dfb7482 100644 --- a/extensions/chart/src/utils/chartUtil.ts +++ b/extensions/chart/src/utils/chartUtil.ts @@ -6,9 +6,9 @@ * @description * This module provides utility functions for the chart widgets. */ -import type { DateTime, DateTimeUnit } from 'luxon' -import { Duration } from 'luxon' -import type { DateTimeWithDuration } from '..' +import type { DateTime, DateTimeUnit } from "luxon"; +import { Duration } from "luxon"; +import type { DateTimeWithDuration } from ".."; /** * Convert data to data units. @@ -34,13 +34,23 @@ import type { DateTimeWithDuration } from '..' * @param intervalUnit * @param interval */ -export function dateSequence(start: DateTime, duration: Duration, intervalUnit: DateTimeUnit, interval: number = 1): DateTimeWithDuration[] { - const sequence = [] - for (let i = 0; start.startOf(intervalUnit).plus({ [intervalUnit]: i }) < start.startOf(intervalUnit).plus(duration); i += interval) - sequence.push(start.startOf(intervalUnit).plus({ [intervalUnit]: i })) +export function dateSequence( + start: DateTime, + duration: Duration, + intervalUnit: DateTimeUnit, + interval: number = 1, +): DateTimeWithDuration[] { + const sequence = []; + for ( + let i = 0; + start.startOf(intervalUnit).plus({ [intervalUnit]: i }) < + start.startOf(intervalUnit).plus(duration); + i += interval + ) + sequence.push(start.startOf(intervalUnit).plus({ [intervalUnit]: i })); return sequence.map((date) => { - const dateWithPeriod = date as DateTimeWithDuration - dateWithPeriod.duration = Duration.fromObject({ [intervalUnit]: interval }) - return dateWithPeriod - }) + const dateWithPeriod = date as DateTimeWithDuration; + dateWithPeriod.duration = Duration.fromObject({ [intervalUnit]: interval }); + return dateWithPeriod; + }); } diff --git a/extensions/chart/src/utils/index.ts b/extensions/chart/src/utils/index.ts index b049752..fc57a84 100644 --- a/extensions/chart/src/utils/index.ts +++ b/extensions/chart/src/utils/index.ts @@ -1,3 +1,3 @@ -import * as ChartUtil from './chartUtil' +import * as ChartUtil from "./chartUtil"; -export { ChartUtil } +export { ChartUtil }; diff --git a/extensions/chart/src/widgets/baseChart.ts b/extensions/chart/src/widgets/baseChart.ts index e3d8246..8e0bf00 100644 --- a/extensions/chart/src/widgets/baseChart.ts +++ b/extensions/chart/src/widgets/baseChart.ts @@ -1,29 +1,29 @@ -import type { DateTime, DateTimeUnit } from 'luxon' +import type { DateTime, DateTimeUnit } from "luxon"; -import type { WidgetOptions } from '@vue-motion/lib' -import type { ReturnWidget } from '@vue-motion/core' -import type { BarChartStyle, ChartDataOptions, DateTimeWithDuration } from '..' -import type { LineChartStyle } from './lineChart.vue' +import type { WidgetOptions } from "@vue-motion/lib"; +import type { ReturnWidget } from "@vue-motion/core"; +import type { BarChartStyle, ChartDataOptions, DateTimeWithDuration } from ".."; +import type { LineChartStyle } from "./lineChart.vue"; // import type { default as ChartLayout } from './chartLayout' // import type { ChartDataUnit } from './chartDataUnit' -export type Color = string +export type Color = string; export class ColorEnum { - static readonly WHITE = 'white' - static readonly BLACK = 'black' - static readonly RED = 'red' - static readonly GREEN = 'green' - static readonly BLUE = 'blue' - static readonly YELLOW = 'yellow' - static readonly CYAN = 'cyan' - static readonly MAGENTA = 'magenta' - static readonly GRAY = 'gray' - static readonly LIGHT_GRAY = 'lightGray' - static readonly DARK_GRAY = 'darkGray' + static readonly WHITE = "white"; + static readonly BLACK = "black"; + static readonly RED = "red"; + static readonly GREEN = "green"; + static readonly BLUE = "blue"; + static readonly YELLOW = "yellow"; + static readonly CYAN = "cyan"; + static readonly MAGENTA = "magenta"; + static readonly GRAY = "gray"; + static readonly LIGHT_GRAY = "lightGray"; + static readonly DARK_GRAY = "darkGray"; } -export type ChartStyle = BaseChartStyle & BarChartStyle & LineChartStyle +export type ChartStyle = BaseChartStyle & BarChartStyle & LineChartStyle; /** * ChartAxisOptions @@ -40,7 +40,7 @@ export interface ChartAxisOptions extends WidgetOptions { * It is optional. * If not provided, the beginAtZero will be `true`. */ - beginAtZero?: boolean + beginAtZero?: boolean; /** * @property number suggestedMin * @description @@ -49,7 +49,7 @@ export interface ChartAxisOptions extends WidgetOptions { * It is optional. * If not provided, the suggestedMin will be `0` when `beginAtZero` is `true` and `undefined` when `beginAtZero` is `false`. */ - suggestedMin?: number | DateTime + suggestedMin?: number | DateTime; /** * @property number suggestedMax * @description @@ -58,7 +58,7 @@ export interface ChartAxisOptions extends WidgetOptions { * It is optional. * If not provided, the suggestedMax will be `undefined`. */ - suggestedMax?: number | DateTime + suggestedMax?: number | DateTime; /** * @property Color girdColor * @description @@ -66,7 +66,7 @@ export interface ChartAxisOptions extends WidgetOptions { * It is optional. * If not provided, the gridColor will be `Color.WHITE`. */ - gridColor?: Color + gridColor?: Color; /** * @property number gridWidth * @description @@ -74,7 +74,7 @@ export interface ChartAxisOptions extends WidgetOptions { * It is optional. * If not provided, the gridWidth will be `1`. */ - gridWidth?: number + gridWidth?: number; } /** @@ -85,15 +85,21 @@ export interface ChartAxisOptions extends WidgetOptions { * DateTimeFormatOptions is an interface that defines the options of the date time format. */ export interface DateTimeFormatOptions { - year: 'year' - quarter: 'quarter' - month: 'month' | 'monthShort' | 'monthLong' - week: 'weekNumber' - day: 'day' | 'weekday' | 'localWeekNumber' | 'weekdayLong' | 'weekdayShort' | 'ordinal' - hour: 'hour' - minute: 'minute' - second: 'second' - millisecond: 'millisecond' + year: "year"; + quarter: "quarter"; + month: "month" | "monthShort" | "monthLong"; + week: "weekNumber"; + day: + | "day" + | "weekday" + | "localWeekNumber" + | "weekdayLong" + | "weekdayShort" + | "ordinal"; + hour: "hour"; + minute: "minute"; + second: "second"; + millisecond: "millisecond"; } /** @@ -111,7 +117,7 @@ export interface BaseChartOptions extends ChartAxisOptions { * It is optional. * If not provided, the index-axis will be 'x'. */ - indexAxis?: 'x' | 'y' + indexAxis?: "x" | "y"; /** * @property 'number' | 'label' | 'date' indexType * @description @@ -122,7 +128,7 @@ export interface BaseChartOptions extends ChartAxisOptions { * 'date' when labels are provided as DateTimes or {@link DataUtil#isIndexDate} are DateTimes. * and 'number' when {@link DataUtil#isIndexDate} are not DateTimes. */ - indexType?: 'label' | 'number' | 'date' + indexType?: "label" | "number" | "date"; /** * @property DateTimeUnit indexIntervalUnit * @description @@ -131,13 +137,13 @@ export interface BaseChartOptions extends ChartAxisOptions { * It is optional. * If not provided, the indexIntervalUnit will be generated automatically. */ - indexIntervalUnit?: DateTimeUnit + indexIntervalUnit?: DateTimeUnit; /** * @property DateTimeFormatOptions dateFormatOptions * @description * dateFormatOptions is an object that defines the options of the date time format. */ - dateFormatOptions?: DateTimeFormatOptions + dateFormatOptions?: DateTimeFormatOptions; /** * @property object axis * @description @@ -149,28 +155,28 @@ export interface BaseChartOptions extends ChartAxisOptions { * @description * index is an object that defines the options of the index-axis in the chart. */ - index?: ChartAxisOptions + index?: ChartAxisOptions; /** * @property ChartAxisOptions cross * @description * cross is an object that defines the options of the cross-axis in the chart. */ - cross?: ChartAxisOptions - } + cross?: ChartAxisOptions; + }; /** * @property number width * @description * width is a number that represents the width of the chart. * To be noted that the width is the width of chart layout (excluding label, legend, etc.). */ - width?: number + width?: number; /** * @property number height * @description * height is a number that represents the height of the chart. * To be noted that the height is the height of chart layout (excluding label, legend, etc.). */ - height?: number + height?: number; /** * @property boolean gridAlign * @description @@ -178,7 +184,7 @@ export interface BaseChartOptions extends ChartAxisOptions { * It is optional. * If not provided, the gridAlign will be `true` for `BarChart` and `false` for other types. */ - gridAlign?: boolean + gridAlign?: boolean; /** * @property boolean edgeOffset * @description @@ -186,7 +192,7 @@ export interface BaseChartOptions extends ChartAxisOptions { * It is optional. * If not provided, the edgeOffset will be `false` when `gridAlign` is `true` and `true` when `gridAlign` is `false`. */ - edgeOffset?: boolean + edgeOffset?: boolean; /** * @property ChartLayoutConfig layout * @description @@ -196,7 +202,7 @@ export interface BaseChartOptions extends ChartAxisOptions { * It is optional. * If not provided, the layout will be generated automatically. */ - layout?: boolean + layout?: boolean; } /** @@ -213,7 +219,7 @@ export interface BaseChartStyle { * backgroundColor is a color that represents the background color of the dataUnit, which may be displayed in various forms. * It is optional. */ - backgroundColor?: Color + backgroundColor?: Color; /** * @property Shader backgroundShader * @description @@ -233,7 +239,7 @@ export interface BaseChartStyle { * borderColor is a color that represents the border color of the dataUnit, which may be displayed in various forms. * It is optional. */ - borderColor?: Color + borderColor?: Color; /** * @property Shader borderShader * @description @@ -247,40 +253,50 @@ export interface BaseChartStyle { * borderWidth is a number that represents the border width of the dataUnit, which may be displayed in various forms. * It is optional. */ - borderWidth?: number + borderWidth?: number; } export const DataUtil = { indexNumber(ChartDataOption: ReturnWidget): number { if (!(ChartDataOption.index as DateTime)?.isValid) { - return ChartDataOption.index as number - } - else { - const date = ChartDataOption.index as DateTime + return ChartDataOption.index as number; + } else { + const date = ChartDataOption.index as DateTime; if (!ChartDataOption.intervalUnit) - throw new Error('Interval unit is not set') - const start = date.startOf(ChartDataOption.intervalUnit) - const end = date.endOf(ChartDataOption.intervalUnit) - if (ChartDataOption.intervalUnit !== 'week') - return start.get(ChartDataOption.intervalUnit) + date.diff(start).as('milliseconds') / (end.diff(start).as('milliseconds')) + throw new Error("Interval unit is not set"); + const start = date.startOf(ChartDataOption.intervalUnit); + const end = date.endOf(ChartDataOption.intervalUnit); + if (ChartDataOption.intervalUnit !== "week") + return ( + start.get(ChartDataOption.intervalUnit) + + date.diff(start).as("milliseconds") / + end.diff(start).as("milliseconds") + ); else - return start.get('weekNumber') + date.diff(start).as('milliseconds') / (end.diff(start).as('milliseconds')) + return ( + start.get("weekNumber") + + date.diff(start).as("milliseconds") / + end.diff(start).as("milliseconds") + ); } }, indexDate(ChartDataOption: ReturnWidget) { - return ChartDataOption.index as DateTime + return ChartDataOption.index as DateTime; }, - indexDuration(ChartDataOption: ReturnWidget): number | undefined { - if (!(ChartDataOption.index as DateTime)?.isValid) - return undefined + indexDuration( + ChartDataOption: ReturnWidget, + ): number | undefined { + if (!(ChartDataOption.index as DateTime)?.isValid) return undefined; if (!ChartDataOption.intervalUnit) - throw new Error('Interval unit is not set') - return (ChartDataOption.index as DateTimeWithDuration).duration!.as(ChartDataOption.intervalUnit) + throw new Error("Interval unit is not set"); + return (ChartDataOption.index as DateTimeWithDuration).duration!.as( + ChartDataOption.intervalUnit, + ); }, isIndexDate(ChartDataOption: ReturnWidget) { - return (ChartDataOption.index as DateTime)?.isValid + return (ChartDataOption.index as DateTime)?.isValid; }, -} +}; diff --git a/extensions/chart/src/widgets/baseSimpleChart.vue b/extensions/chart/src/widgets/baseSimpleChart.vue index ff45bd6..deb7d46 100644 --- a/extensions/chart/src/widgets/baseSimpleChart.vue +++ b/extensions/chart/src/widgets/baseSimpleChart.vue @@ -1,11 +1,11 @@ - + diff --git a/extensions/chart/src/widgets/chartData.vue b/extensions/chart/src/widgets/chartData.vue index 61603e0..ed3d43a 100644 --- a/extensions/chart/src/widgets/chartData.vue +++ b/extensions/chart/src/widgets/chartData.vue @@ -1,30 +1,30 @@