├── .gitignore ├── .vscode └── extensions.json ├── README.md ├── package.json ├── packages ├── nuxt │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.mjs │ ├── nuxt.config.ts │ ├── package.json │ ├── playground │ │ ├── app.vue │ │ ├── nuxt.config.ts │ │ └── pages │ │ │ ├── index.vue │ │ │ └── traffic.vue │ ├── src │ │ ├── core │ │ │ ├── components.ts │ │ │ ├── imports.ts │ │ │ └── index.ts │ │ ├── module.ts │ │ └── runtime │ │ │ └── vue-chrts.ts │ └── tsconfig.json └── vue │ ├── .gitignore │ ├── CHANGELOG.md │ ├── README.md │ ├── VUE-CHRTS-LLM-GUIDE.md │ ├── index.html │ ├── lib │ ├── components │ │ ├── AreaChart │ │ │ ├── AreaChart.vue │ │ │ └── types.ts │ │ ├── AreaStackedChart │ │ │ ├── AreaStackedChart.vue │ │ │ └── types.ts │ │ ├── BarChart │ │ │ ├── BarChart.vue │ │ │ └── types.ts │ │ ├── Crosshair │ │ │ └── Crosshair.vue │ │ ├── DonutChart │ │ │ ├── DonutChart.vue │ │ │ └── types.ts │ │ ├── LineChart │ │ │ ├── LineChart.vue │ │ │ └── types.ts │ │ └── Tooltip.vue │ ├── index.ts │ ├── types.ts │ └── utils.ts │ ├── package.json │ ├── pnpm-lock.yaml │ ├── src │ ├── App.vue │ ├── AreaChartPage.vue │ ├── BarChartPage.vue │ ├── Homepage.vue │ ├── LineChartPage.vue │ ├── assets │ │ └── main.css │ ├── components │ │ ├── Progress │ │ │ ├── Progress.vue │ │ │ └── index.ts │ │ └── Status │ │ │ ├── Status.vue │ │ │ └── index.ts │ ├── data │ │ ├── AreaChartData.ts │ │ ├── BarChartData.ts │ │ ├── IncomeExpenseData.ts │ │ ├── InvestmentData.ts │ │ ├── RevenueData.ts │ │ └── VisitorsData.ts │ ├── elements │ │ ├── Button.vue │ │ ├── Card.vue │ │ ├── Dropdown.vue │ │ ├── Logo.vue │ │ ├── Table.vue │ │ └── TopBar.vue │ ├── index.ts │ └── utils.ts │ ├── tsconfig.json │ └── vite.config.ts ├── pnpm-lock.yaml ├── pnpm-workspace.yaml └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | .nuxt 15 | .output 16 | .nitro 17 | 18 | # Editor directories and files 19 | .vscode/* 20 | !.vscode/extensions.json 21 | .idea 22 | .DS_Store 23 | *.suo 24 | *.ntvs* 25 | *.njsproj 26 | *.sln 27 | *.sw? 28 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue-chrts 2 | This is a monorepo for [vue-chrts](https://github.com/dennisadriaans/vue-chrts/tree/main/packages/vue) & [nuxt-charts](https://github.com/dennisadriaans/vue-chrts/tree/main/packages/nuxt) 3 | 4 | A Vue 3 charts package inspired by [Tremor](https://tremor.so/), built on top of [Unovis](https://unovis.dev). Vue-Chrts provides beautiful, responsive charts for your Vue applications with minimal setup. 5 | 6 | ![alt text](https://nuxtcharts.com/og-image.png) 7 | 8 | [Check the docs and examples](https://nuxtcharts.com/docs) 9 | 10 | ## Features 11 | 12 | - 📊 Multiple chart types: Line, Bar, Area, Stacked Area, Donut 13 | - 🎨 Customizable 14 | - 📱 Responsive design 15 | - 💡 Simple, intuitive API 16 | - 🚀 Built with Vue 3 and TypeScript 17 | 18 | 19 | [Check the docs and examples](https://nuxtcharts.com/docs) 20 | 21 | ## Installation Nuxt 22 | 23 | ```bash 24 | # npm 25 | npm install nuxt-charts 26 | 27 | # yarn 28 | yarn add nuxt-charts 29 | 30 | # pnpm 31 | pnpm add nuxt-charts 32 | 33 | # Add module to your nuxt.config.ts 34 | export default defineNuxtConfig({ 35 | modules: ["nuxt-charts"] 36 | }); 37 | ``` 38 | 39 | ## Installation Vue.js 40 | 41 | ```bash 42 | # npm 43 | npm install vue-chrts 44 | 45 | # yarn 46 | yarn add vue-chrts 47 | 48 | # pnpm 49 | pnpm add vue-chrts 50 | 51 | # import component 52 | import { LineChart } from 'vue-chrts'; 53 | 54 | ``` 55 | 56 | [Check the docs and examples](https://nuxtcharts.com/docs) 57 | 58 | ## Usage Example 59 | 60 | ```vue 61 | 85 | 86 | 96 | ``` 97 | [Check the docs and examples](https://nuxtcharts.com/docs) 98 | 99 | ## Available Charts 100 | 101 | - `LineChart` 102 | - `BarChart` 103 | - `AreaChart` 104 | - `AreaStackedChart` 105 | - `DonutChart` 106 | 107 | ## Credits 108 | 109 | This library is inspired by [Tremor](https://tremor.so/) and built on top of [Unovis](https://unovis.dev). 110 | 111 | ## License 112 | 113 | MIT -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.0.0", 3 | "name": "vue-chrts-monorepo", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "build": "pnpm --filter \"./packages/**\" build", 8 | "dev:vue": "pnpm --filter \"vue-chrts\" dev", 9 | "dev:nuxt": "pnpm --filter \"@vue-chrts/nuxt\" dev", 10 | "lint": "pnpm --filter \"./packages/**\" lint", 11 | "typecheck": "pnpm --filter \"./packages/**\" typecheck" 12 | }, 13 | "packageManager": "pnpm@8.15.4+sha256.cea6d0bdf2de3a0549582da3983c70c92ffc577ff4410cbf190817ddc35137c2" 14 | } 15 | -------------------------------------------------------------------------------- /packages/nuxt/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines. 4 | 5 | ## [0.1.9](https://github.com/dennisadriaans/vue-chrts/compare/v0.1.10...v0.1.9) (2025-05-21) 6 | 7 | ## [0.1.10](https://github.com/dennisadriaans/vue-chrts/compare/v0.1.9...v0.1.10) (2025-05-21) 8 | -------------------------------------------------------------------------------- /packages/nuxt/README.md: -------------------------------------------------------------------------------- 1 | # nuxt-charts 2 | 3 | [![npm version][npm-version-src]][npm-version-href] 4 | [![npm downloads][npm-downloads-src]][npm-downloads-href] 5 | 6 | Nuxt module for [vue-chrts](https://github.com/dennisadriaans/vue-chrts/tree/main/packages/vue) 7 | 8 | ## Features 9 | 10 | - 📊 Use beautiful chart components in your Nuxt applications 11 | - 🔄 Auto-imports for all chart components 12 | - 📊 Multiple types: Line, Bar, Area, Donut 13 | - 🎨 Easily customizable 14 | - 💡 Simple, intuitive API 15 | - 🚀 Built with Vue 3 and TypeScript 16 | 17 | ## Installation 18 | 19 | ```bash 20 | # npm 21 | npm install nuxt-charts 22 | 23 | # yarn 24 | yarn add nuxt-charts 25 | 26 | # pnpm 27 | pnpm add nuxt-charts 28 | ``` 29 | 30 | ## Usage 31 | 32 | Add the module to your Nuxt config: 33 | 34 | ```ts 35 | // nuxt.config.ts 36 | export default defineNuxtConfig({ 37 | modules: ["nuxt-charts"] 38 | }); 39 | ``` 40 | 41 | Then use the components in your Nuxt application: 42 | 43 | ```vue 44 | 56 | 57 | 81 | ``` 82 | 83 | ## Available Components 84 | 85 | - `AreaChart` - Area chart 86 | - `AreaStackedChart` - Stacked area chart 87 | - `LineChart` - Line chart 88 | - `BarChart` - Bar chart 89 | - `DonutChart` - Donut chart 90 | 91 | ## Auto-imported Types 92 | 93 | The following types are auto-imported: 94 | 95 | - `LegendPosition` 96 | - `CurveType` 97 | - `Orientation` 98 | - `BulletLegendItemInterface` 99 | 100 | ## License 101 | 102 | MIT 103 | 104 | 105 | 106 | [npm-version-src]: https://img.shields.io/npm/v/nuxt-charts/latest.svg?style=flat&colorA=18181B&colorB=28CF8D 107 | [npm-version-href]: https://npmjs.com/package/nuxt-charts 108 | [npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-charts.svg?style=flat&colorA=18181B&colorB=28CF8D 109 | [npm-downloads-href]: https://npmjs.com/package/nuxt-charts 110 | -------------------------------------------------------------------------------- /packages/nuxt/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import withNuxt from './.nuxt/eslint.config.mjs' 3 | 4 | export default withNuxt( 5 | // Your custom configs here 6 | ) 7 | -------------------------------------------------------------------------------- /packages/nuxt/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | modules: ["@nuxt/eslint"], 4 | build: { 5 | transpile: ['vue-chrts'], 6 | }, 7 | }) -------------------------------------------------------------------------------- /packages/nuxt/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-charts", 3 | "version": "0.1.9", 4 | "description": "Nuxt module for vue-chrts", 5 | "license": "MIT", 6 | "type": "module", 7 | "exports": { 8 | ".": { 9 | "import": "./dist/module.mjs", 10 | "require": "./dist/module.cjs" 11 | } 12 | }, 13 | "main": "./dist/module.cjs", 14 | "module": "./dist/module.mjs", 15 | "files": [ 16 | "dist" 17 | ], 18 | "scripts": { 19 | "prepack": "nuxt-module-build build", 20 | "dev": "nuxi dev playground", 21 | "dev:build": "nuxi build playground", 22 | "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground", 23 | "release": "npm run prepack && commit-and-tag-version && npm publish", 24 | "lint": "eslint .", 25 | "test": "vitest run", 26 | "test:watch": "vitest watch", 27 | "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit" 28 | }, 29 | "dependencies": { 30 | "@nuxt/kit": "^3.17.2", 31 | "@unovis/vue": "^1.5.1", 32 | "vue-chrts": "^0.1.9" 33 | }, 34 | "devDependencies": { 35 | "@nuxt/eslint": "1.3.0", 36 | "@nuxt/eslint-config": "^0.2.0", 37 | "@nuxt/module-builder": "^0.8.4", 38 | "@nuxt/schema": "^3.17.2", 39 | "@types/node": "^20.17.41", 40 | "changelogen": "^0.6.1", 41 | "commit-and-tag-version": "^12.5.1", 42 | "eslint": "^8.57.1", 43 | "nuxt": "^3.17.2", 44 | "typescript": "^5.8.3", 45 | "vitest": "^3.1.3" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /packages/nuxt/playground/app.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /packages/nuxt/playground/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | export default defineNuxtConfig({ 2 | modules: ['../src/module'], 3 | 4 | vueChrts: { 5 | prefix: '', // Add a prefix to component names 6 | global: true, // Register as global components 7 | autoImports: true, // Enable auto-imports 8 | include: [] // Include all components 9 | }, 10 | 11 | devtools: { enabled: true }, 12 | compatibilityDate: '2025-04-08' 13 | }) -------------------------------------------------------------------------------- /packages/nuxt/playground/pages/index.vue: -------------------------------------------------------------------------------- 1 | 208 | 209 | 223 | -------------------------------------------------------------------------------- /packages/nuxt/playground/pages/traffic.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 54 | -------------------------------------------------------------------------------- /packages/nuxt/src/core/components.ts: -------------------------------------------------------------------------------- 1 | import { addComponent } from "@nuxt/kit"; 2 | import type { ModuleOptions } from "../module"; 3 | 4 | export const resolveComponents = (config: ModuleOptions, filePath: string) => { 5 | 6 | const { prefix } = config; 7 | const allComponents = [ 8 | 'AreaChart', 9 | 'AreaStackedChart', 10 | 'LineChart', 11 | 'BarChart', 12 | 'DonutChart' 13 | ] 14 | 15 | allComponents.forEach(component => { 16 | if (typeof component === 'string') { 17 | addComponent({ 18 | export: component, 19 | name: prefix + component, 20 | filePath 21 | }) 22 | } else if (Array.isArray(component)) { 23 | addComponent({ 24 | export: component[0], 25 | name: prefix + component[1], 26 | filePath 27 | }) 28 | } 29 | }) 30 | } 31 | -------------------------------------------------------------------------------- /packages/nuxt/src/core/imports.ts: -------------------------------------------------------------------------------- 1 | import { addImportsSources } from "@nuxt/kit"; 2 | import type { ModuleOptions } from "../module"; 3 | 4 | export const resolveImports = (_: ModuleOptions, filePath: string) => { 5 | const allTypes = ['BulletLegendItemInterface'] 6 | addImportsSources({ 7 | from: filePath, 8 | type: true, 9 | imports: [...allTypes] 10 | }) 11 | 12 | const allImports = ['CurveType', 'LegendPosition', 'Orientation'] 13 | addImportsSources({ 14 | from: filePath, 15 | imports: [...allImports] 16 | }) 17 | } -------------------------------------------------------------------------------- /packages/nuxt/src/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./components" 2 | export * from "./imports" 3 | -------------------------------------------------------------------------------- /packages/nuxt/src/module.ts: -------------------------------------------------------------------------------- 1 | import { defineNuxtModule, createResolver } from '@nuxt/kit' 2 | import { resolveComponents, resolveImports } from "./core" 3 | 4 | export interface ModuleOptions { 5 | /** 6 | * Prefix for component names 7 | * @default '' 8 | */ 9 | prefix?: string 10 | 11 | /** 12 | * Register global components 13 | * @default true 14 | */ 15 | global?: boolean 16 | 17 | /** 18 | * Use auto-imports (recommended) 19 | * @default true 20 | */ 21 | autoImports?: boolean 22 | 23 | /** 24 | * Components to include (empty array means all components) 25 | * @default [] 26 | */ 27 | include?: string[] 28 | } 29 | 30 | 31 | export default defineNuxtModule({ 32 | meta: { 33 | name: 'nuxt-charts', 34 | configKey: 'nuxtCharts', 35 | compatibility: { 36 | nuxt: '^3.0.0' 37 | } 38 | }, 39 | defaults: { 40 | prefix: '', 41 | global: true, 42 | autoImports: true, 43 | include: [] 44 | }, 45 | async setup(options, nuxt) { 46 | nuxt.options.vite.optimizeDeps = nuxt.options.vite.optimizeDeps || {} 47 | nuxt.options.vite.optimizeDeps.include = nuxt.options.vite.optimizeDeps.include || [] 48 | 49 | nuxt.options.vite.optimizeDeps.include = ['vue-chrts', ...nuxt.options.vite.optimizeDeps.include] 50 | nuxt.options.build.transpile = ['vue-chrts', ...nuxt.options.build.transpile] 51 | 52 | const { resolve } = createResolver(import.meta.url) 53 | 54 | const runtimePath = resolve('./runtime/vue-chrts') 55 | 56 | resolveImports(options, runtimePath) 57 | resolveComponents(options, runtimePath) 58 | } 59 | }) -------------------------------------------------------------------------------- /packages/nuxt/src/runtime/vue-chrts.ts: -------------------------------------------------------------------------------- 1 | export * from 'vue-chrts'; -------------------------------------------------------------------------------- /packages/nuxt/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.nuxt/tsconfig.json", 3 | "exclude": ["dist", "node_modules", "playground"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/vue/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /packages/vue/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines. 4 | 5 | ## [0.1.9](https://github.com/dennisadriaans/vue-chrts/compare/v0.1.4...v0.1.9) (2025-05-21) 6 | 7 | 8 | ### Features 9 | 10 | * make container padding property available ([4a2fc84](https://github.com/dennisadriaans/vue-chrts/commit/4a2fc840d6575d4c83541ddeb5645b53ae631761)) 11 | * make container padding property available ([1b91c89](https://github.com/dennisadriaans/vue-chrts/commit/1b91c89296b38312677279fdc3325a1fcd642f85)) 12 | * support css var colors defaults for LineChart and Tooltip components ([cbd3850](https://github.com/dennisadriaans/vue-chrts/commit/cbd3850458ae3fe1fa825cd292b6388c5a12edfb)) 13 | 14 | 15 | ### Bug Fixes 16 | 17 | * apply tooltip changes to line charts ([b02b5c0](https://github.com/dennisadriaans/vue-chrts/commit/b02b5c03400d8d3a3561751d2d8aaa90b544cbcb)) 18 | * getFirstProp value type definition ([cb41fe3](https://github.com/dennisadriaans/vue-chrts/commit/cb41fe3fa3eaccaac640a720a64d17f53a8c4d8f)) 19 | * move data reversal logic outside bar chart component ([091ecbd](https://github.com/dennisadriaans/vue-chrts/commit/091ecbd157caf50730954e1a177aa2471ee642b7)) 20 | * rework tooltip title and use yFormatter to format tooltip ([a3b39fc](https://github.com/dennisadriaans/vue-chrts/commit/a3b39fc7eda2759bd99c2d7220f16cb39d6b69e5)) 21 | * vue-chrts version | remove unovis/ts from optimizeDeps ([be600c4](https://github.com/dennisadriaans/vue-chrts/commit/be600c45a7896589abb5d6ec7c1c0e416c7b84a7)) 22 | 23 | ## [0.1.8](https://github.com/dennisadriaans/vue-chrts/compare/v0.1.7...v0.1.8) (2025-05-06) 24 | 25 | 26 | ### Features 27 | 28 | * make container padding property available 29 | 30 | ## [0.1.7](https://github.com/dennisadriaans/vue-chrts/compare/v0.1.5...v0.1.7) (2025-05-05) 31 | 32 | 33 | ### Bug Fixes 34 | 35 | * move data reversal logic outside bar chart component ([091ecbd](https://github.com/dennisadriaans/vue-chrts/commit/091ecbd157caf50730954e1a177aa2471ee642b7)) 36 | 37 | ## [0.1.6](https://github.com/dennisadriaans/vue-chrts/compare/v0.1.5...v0.1.6) (2025-05-05) 38 | -------------------------------------------------------------------------------- /packages/vue/README.md: -------------------------------------------------------------------------------- 1 | # Vue-chrts 2 | 3 | A Vue 3 charts package inspired by [Tremor](https://tremor.so/), built on top of [Unovis](https://unovis.dev). Vue-Chrts provides beautiful, responsive charts for your Vue applications with minimal setup. 4 | 5 | ![alt text](https://nuxtcharts.com/og-image.png) 6 | 7 | [Check the docs and examples](https://nuxtcharts.com/docs) 8 | 9 | ## Features 10 | 11 | - 📊 Multiple chart types: Line, Bar, Area, Stacked Area, Donut 12 | - 🎨 Customizable 13 | - 📱 Responsive design 14 | - 💡 Simple, intuitive API 15 | - 🚀 Built with Vue 3 and TypeScript 16 | 17 | 18 | [Check the docs and examples](https://nuxtcharts.com/docs) 19 | 20 | ## Installation Nuxt 21 | 22 | ```bash 23 | # npm 24 | npm install nuxt-charts 25 | 26 | # yarn 27 | yarn add nuxt-charts 28 | 29 | # pnpm 30 | pnpm add nuxt-charts 31 | 32 | # Add module to your nuxt.config.ts 33 | export default defineNuxtConfig({ 34 | modules: ["nuxt-charts"] 35 | }); 36 | ``` 37 | 38 | ## Installation Vue.js 39 | 40 | ```bash 41 | # npm 42 | npm install vue-chrts 43 | 44 | # yarn 45 | yarn add vue-chrts 46 | 47 | # pnpm 48 | pnpm add vue-chrts 49 | 50 | # import component 51 | import { LineChart } from 'vue-chrts'; 52 | 53 | ``` 54 | 55 | [Check the docs and examples](https://nuxtcharts.com/docs) 56 | 57 | ## Usage Example 58 | 59 | ```vue 60 | 84 | 85 | 95 | ``` 96 | [Check the docs and examples](https://nuxtcharts.com/docs) 97 | 98 | ## Available Charts 99 | 100 | - `LineChart` 101 | - `BarChart` 102 | - `AreaChart` 103 | - `AreaStackedChart` 104 | - `DonutChart` 105 | 106 | ## Credits 107 | 108 | This library is inspired by [Tremor](https://tremor.so/) and built on top of [Unovis](https://unovis.dev). 109 | 110 | ## License 111 | 112 | MIT -------------------------------------------------------------------------------- /packages/vue/VUE-CHRTS-LLM-GUIDE.md: -------------------------------------------------------------------------------- 1 | # Vue-CHRTS Library: LLM Integration Guide 2 | 3 | This guide provides comprehensive instructions for Language Learning Models (LLMs) to effectively implement the vue-chrts charting library in Vue.js applications. 4 | 5 | ## Library Overview 6 | 7 | Vue-CHRTS is a chart visualization library for Vue.js that provides customizable chart components with TypeScript support. The library includes: 8 | 9 | - **Area Charts**: Single and stacked variants with customizable curves 10 | - **Line Charts**: Customizable curves and styling 11 | - **Bar Charts**: Vertical/horizontal, grouped/stacked variants 12 | - **Donut Charts**: Full or half-circle variants 13 | 14 | ## Installation and Setup 15 | 16 | ```vue 17 | 20 | ``` 21 | 22 | ## Common Configuration Options 23 | 24 | All charts share these core configuration patterns: 25 | 26 | ### Required Properties 27 | 28 | - `data`: Array of data points that will be visualized 29 | - `height`: Chart height in pixels 30 | - `categories`: Maps data keys to legend items with color and name properties 31 | 32 | ### Common Optional Properties 33 | 34 | - `xLabel`/`yLabel`: Axis labels 35 | - `xFormatter`/`yFormatter`: Functions for formatting axis labels 36 | - `hideTooltip`/`hideLegend`: Toggle visibility of tooltips and legends 37 | - `legendPosition`: Position of the legend (`top` or `bottom`) 38 | - Grid and domain line controls: 39 | - `xGridLine`/`yGridLine`: Show grid lines 40 | - `xDomainLine`/`yDomainLine`: Show domain (axis) lines 41 | - `xTickLine`/`yTickLine`: Show tick lines 42 | 43 | ## Chart-Specific Components and Options 44 | 45 | ### Area Chart 46 | 47 | ```vue 48 | 57 | ``` 58 | 59 | **Unique options:** 60 | - `curveType`: Line curve style (Linear, Cardinal, Natural, etc.) 61 | - `xNumTicks`/`yNumTicks`: Number of axis ticks 62 | - `xExplicitTicks`: Force specific ticks 63 | - `minMaxTicksOnly`: Show only first and last ticks 64 | 65 | ### Area Stacked Chart 66 | 67 | ```vue 68 | 76 | ``` 77 | 78 | ### Line Chart 79 | 80 | ```vue 81 | 90 | ``` 91 | 92 | **Unique options:** 93 | - Same as Area Chart, optimized for line rendering 94 | 95 | ### Bar Chart 96 | 97 | ```vue 98 | 110 | ``` 111 | 112 | **Unique options:** 113 | - `stacked`: Boolean to create stacked or grouped bars 114 | - `orientation`: Horizontal or vertical bars 115 | - `yAxis`: Array of data properties to use for Y-axis values 116 | - `groupPadding`/`barPadding`: Spacing between bars and groups 117 | - `radius`: Corner radius for bars 118 | 119 | ### Donut Chart 120 | 121 | ```vue 122 | 134 | ``` 135 | 136 | **Unique options:** 137 | - `type`: "half" or "full" donut 138 | - `radius`: Donut radius in pixels 139 | - `labels`: Array of objects with name and color for each segment 140 | 141 | ## Enum Values 142 | 143 | ### CurveType Options 144 | - `Linear` - Straight lines between points 145 | - `Basis` - B-spline interpolation 146 | - `Bundle` - Bundle curves 147 | - `Cardinal` - Cardinal splines (smooth curves through points) 148 | - `CatmullRom` - Cubic splines with tension 149 | - `MonotoneX`/`MonotoneY` - Preserves monotonicity in data 150 | - `Natural` - Natural cubic splines 151 | - `Step`/`StepAfter`/`StepBefore` - Step interpolation 152 | 153 | ### Orientation Options 154 | - `Horizontal` - Horizontal bar chart 155 | - `Vertical` - Vertical bar chart (default) 156 | 157 | ### LegendPosition Options 158 | - `Top` - Legend at top of chart 159 | - `Bottom` - Legend at bottom of chart 160 | 161 | ## Data Formatting Guidelines 162 | 163 | ### Area and Line Charts 164 | Data should be an array of objects, where each object has: 165 | - A value for the X-axis (typically a timestamp or category) 166 | - One or more numeric values for each line/area series 167 | 168 | ```typescript 169 | const data = [ 170 | { date: 1641024000000, value1: 1200, value2: 900 }, 171 | { date: 1641110400000, value1: 1400, value2: 1100 }, 172 | // Additional data points... 173 | ]; 174 | ``` 175 | 176 | ### Bar Charts 177 | For bar charts, data should include all values to be displayed: 178 | 179 | ```typescript 180 | const data = [ 181 | { category: 'A', value1: 120, value2: 80 }, 182 | { category: 'B', value1: 160, value2: 100 }, 183 | // Additional data points... 184 | ]; 185 | ``` 186 | 187 | ### Donut Charts 188 | Donut charts take a simple array of numbers for values: 189 | 190 | ```typescript 191 | const data = [40, 25, 20, 15]; // Percentages or values 192 | ``` 193 | 194 | ### Categories Definition 195 | For all charts except Donut, define categories to control legend appearance: 196 | 197 | ```typescript 198 | const categories = { 199 | value1: { name: 'Series A', color: '#3B82F6' }, 200 | value2: { name: 'Series B', color: '#10B981' }, 201 | }; 202 | ``` 203 | 204 | ## Formatters 205 | 206 | Formatters control the display of axis labels: 207 | 208 | ```typescript 209 | // Date formatter example 210 | const xFormatter = (timestamp) => { 211 | return new Date(timestamp).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); 212 | }; 213 | 214 | // Value formatter example 215 | const yFormatter = (value) => { 216 | return `$${value.toLocaleString()}`; 217 | }; 218 | ``` 219 | 220 | ## Best Practices for LLMs 221 | 222 | 1. **Chart Selection**: 223 | - Use Line/Area charts for time series or continuous data 224 | - Use Bar charts for categorical comparisons 225 | - Use Donut charts for part-to-whole relationships 226 | - Use Stacked Area charts for showing how parts contribute to a whole over time 227 | 228 | 2. **Responsive Design**: 229 | - Set the chart height explicitly but allow the width to be determined by container 230 | - Consider different device sizes when setting heights and tick counts 231 | 232 | 3. **Data Preprocessing**: 233 | - Sort time-series data chronologically before passing to charts 234 | - Use appropriate data transformation for grouped or stacked charts 235 | 236 | 4. **Visual Clarity**: 237 | - Limit the number of series to 5-7 for readability 238 | - Use contrasting colors for categories 239 | - Use grid lines sparingly to avoid visual noise 240 | - Format axis labels for human readability (e.g., "10K" instead of "10000") 241 | 242 | 5. **Interactivity**: 243 | - Leverage built-in tooltips for detailed information on hover 244 | - Use legends to allow toggling series visibility 245 | 246 | ## Example Implementation 247 | 248 | ```vue 249 | 265 | 266 | 295 | ``` 296 | 297 | This guide should provide LLMs with the necessary knowledge to implement vue-chrts charts effectively in Vue.js applications. -------------------------------------------------------------------------------- /packages/vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/vue/lib/components/AreaChart/AreaChart.vue: -------------------------------------------------------------------------------- 1 | 111 | 112 | 180 | -------------------------------------------------------------------------------- /packages/vue/lib/components/AreaChart/types.ts: -------------------------------------------------------------------------------- 1 | import { LegendPosition } from "../../types"; 2 | import type { BulletLegendItemInterface, CurveType } from "@unovis/ts"; 3 | 4 | export interface AreaChartProps { 5 | /** 6 | * The data to be displayed in the area chart. 7 | * Each element of the array represents a data point. 8 | * The structure of 'T' should be compatible with the chart's rendering logic. 9 | */ 10 | data: T[]; 11 | /** 12 | * The height of the chart in pixels. 13 | */ 14 | height: number; 15 | /** 16 | * Optional label for the x-axis. 17 | */ 18 | xLabel?: string; 19 | /** 20 | * Optional label for the y-axis. 21 | */ 22 | yLabel?: string; 23 | /** 24 | * Optional padding applied to the chart. 25 | * Allows specifying individual padding values for the top, right, bottom, and left sides. 26 | */ 27 | padding?: { 28 | top: number; 29 | right: number; 30 | bottom: number; 31 | left: number; 32 | }; 33 | /** 34 | * A record mapping category keys to `BulletLegendItemInterface` objects. 35 | * This defines the visual representation and labels for each category in the chart's legend. 36 | */ 37 | categories: Record; 38 | /** 39 | * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the x-axis. 40 | * @param {number} i - The index of the tick in the `ticks` array. 41 | * @param {(number[]|Date[])} ticks - An array of all tick values for the x-axis. 42 | * @returns {string} The formatted string representation of the tick. 43 | */ 44 | xFormatter?:((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string) 45 | /** 46 | * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the y-axis. 47 | * @param {number} i - The index of the tick in the `ticks` array. 48 | * @param {(number[]|Date[])} ticks - An array of all tick values for the y-axis. 49 | * @returns {string} The formatted string representation of the tick. 50 | */ 51 | yFormatter?:((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string) 52 | /** 53 | * The type of curve to use for the area chart lines. 54 | * See `CurveType` for available options. 55 | */ 56 | curveType?: CurveType; 57 | /** 58 | * The desired number of ticks on the x-axis. 59 | */ 60 | xNumTicks?: number; 61 | /** 62 | * Force specific ticks on the x-axis. 63 | */ 64 | xExplicitTicks?: number; 65 | /** 66 | * Force only first and last ticks on the x-axis. 67 | */ 68 | minMaxTicksOnly?: boolean; 69 | /** 70 | * The desired number of ticks on the y-axis. 71 | */ 72 | yNumTicks?: number; 73 | /** 74 | * If `true`, hides the chart legend. 75 | */ 76 | hideLegend?: boolean; 77 | /** 78 | * If `true`, hides the chart tooltip. 79 | */ 80 | hideTooltip?: boolean; 81 | /** 82 | * Optional position for the legend, if applicable. 83 | * See `LegendPosition` for available options. 84 | */ 85 | legendPosition?: LegendPosition; 86 | /** 87 | * If `true`, displays a domain line (axis line) along the x-axis. 88 | */ 89 | xDomainLine?: boolean; 90 | /** 91 | * If `true`, displays a domain line (axis line) along the y-axis. 92 | */ 93 | yDomainLine?: boolean; 94 | /** 95 | * If `true`, displays tick lines on the x-axis. 96 | */ 97 | xTickLine?: boolean; 98 | /** 99 | * If `true`, displays tick lines on the y-axis. 100 | */ 101 | yTickLine?: boolean; 102 | /** 103 | * If `true`, displays grid lines along the x-axis. 104 | */ 105 | xGridLine?: boolean; 106 | /** 107 | * If `true`, displays grid lines along the y-axis. 108 | */ 109 | yGridLine?: boolean; 110 | } 111 | -------------------------------------------------------------------------------- /packages/vue/lib/components/AreaStackedChart/AreaStackedChart.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 67 | -------------------------------------------------------------------------------- /packages/vue/lib/components/AreaStackedChart/types.ts: -------------------------------------------------------------------------------- 1 | import { BulletLegendItemInterface } from "@unovis/ts"; 2 | 3 | export interface AreaStackedChartProps { 4 | /** 5 | * The data to be displayed in the stacked area chart. 6 | * Each element of the array represents a data point. 7 | * The structure of 'T' should be compatible with the chart's rendering logic. 8 | */ 9 | data: T[]; 10 | /** 11 | * The height of the chart in pixels. 12 | */ 13 | height: number; 14 | /** 15 | * A record mapping category keys to `BulletLegendItemInterface` objects. 16 | * This defines the visual representation and labels for each category in the chart's legend. 17 | */ 18 | categories: Record; 19 | /** 20 | * If `true`, hides the chart tooltip. 21 | */ 22 | hideTooltip?: boolean; 23 | /** 24 | * Optional label for the x-axis. 25 | */ 26 | xLabel?: string; 27 | /** 28 | * Optional label for the y-axis. 29 | */ 30 | yLabel?: string; 31 | /** 32 | * Optional padding applied to the chart. 33 | * Allows specifying individual padding values for the top, right, bottom, and left sides. 34 | */ 35 | padding?: { 36 | top: number; 37 | right: number; 38 | bottom: number; 39 | left: number; 40 | }; 41 | /** 42 | * If `true`, hides the chart legend. 43 | */ 44 | hideLegend?: boolean; 45 | /** 46 | * If `true`, displays grid lines along the x-axis. 47 | */ 48 | xGridLine?: boolean; 49 | /** 50 | * If `true`, displays a domain line (axis line) along the x-axis. 51 | */ 52 | xDomainLine?: boolean; 53 | /** 54 | * If `true`, displays grid lines along the y-axis. 55 | */ 56 | yGridLine?: boolean; 57 | /** 58 | * If `true`, displays a domain line (axis line) along the y-axis. 59 | */ 60 | yDomainLine?: boolean; 61 | /** 62 | * If `true`, displays tick lines on the x-axis. 63 | */ 64 | xTickLine?: boolean; 65 | /** 66 | * If `true`, displays tick lines on the y-axis. 67 | */ 68 | yTickLine?: boolean; 69 | } 70 | -------------------------------------------------------------------------------- /packages/vue/lib/components/BarChart/BarChart.vue: -------------------------------------------------------------------------------- 1 | 81 | 82 | 147 | -------------------------------------------------------------------------------- /packages/vue/lib/components/BarChart/types.ts: -------------------------------------------------------------------------------- 1 | import { BulletLegendItemInterface, Orientation, LegendPosition } from "../../types"; 2 | 3 | export interface BarChartProps { 4 | /** 5 | * The data to be displayed in the bar chart. 6 | * Each element of the array represents a data point. 7 | * The structure of 'T' should be compatible with the chart's rendering logic. 8 | */ 9 | data: T[]; 10 | /** 11 | * If `true`, creates a stacked bar chart instead of grouped bars. 12 | */ 13 | stacked?: boolean; 14 | /** 15 | * The height of the chart in pixels. 16 | */ 17 | height: number; 18 | /** 19 | * Optional label for the x-axis. 20 | */ 21 | xLabel?: string; 22 | /** 23 | * Optional label for the y-axis. 24 | */ 25 | yLabel?: string; 26 | /** 27 | * Optional padding applied to the chart. 28 | * Allows specifying individual padding values for the top, right, bottom, and left sides. 29 | */ 30 | padding?: { 31 | top: number; 32 | right: number; 33 | bottom: number; 34 | left: number; 35 | }; 36 | /** 37 | * A record mapping category keys to `BulletLegendItemInterface` objects. 38 | * This defines the visual representation and labels for each category in the chart's legend. 39 | */ 40 | categories: Record; 41 | /** 42 | * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the x-axis. 43 | * @param {number} i - The index of the tick in the `ticks` array. 44 | * @param {(number[]|Date[])} ticks - An array of all tick values for the x-axis. 45 | * @returns {string} The formatted string representation of the tick. 46 | */ 47 | xFormatter?:((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string) 48 | /** 49 | * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the y-axis. 50 | * @param {number} i - The index of the tick in the `ticks` array. 51 | * @param {(number[]|Date[])} ticks - An array of all tick values for the y-axis. 52 | * @returns {string} The formatted string representation of the tick. 53 | */ 54 | yFormatter?:((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string) 55 | /** 56 | * The desired number of ticks on the y-axis. 57 | */ 58 | yNumTicks?: number; 59 | /** 60 | * Force only first and last ticks on the x-axis. 61 | */ 62 | minMaxTicksOnly?: boolean; 63 | /** 64 | * The desired number of ticks on the x-axis. 65 | */ 66 | xNumTicks?: number; 67 | /** 68 | * Force specific ticks on the x-axis. 69 | */ 70 | xExplicitTicks?: number; 71 | /** 72 | * An array of property keys from the data object type 'T' to be used for the y-axis values. 73 | */ 74 | yAxis: (keyof T)[]; 75 | /** 76 | * The padding between groups of bars in pixels. 77 | */ 78 | groupPadding?: number; 79 | /** 80 | * Fractional padding between the bars in the range of [0,1). Default: 0 81 | */ 82 | barPadding?: number; 83 | /** 84 | * Rounded corners for top bars. Boolean or number (to set the radius in pixels). Default: 2 85 | */ 86 | radius?: number; 87 | /** 88 | * If `true`, hides the chart legend. 89 | */ 90 | hideLegend?: boolean; 91 | /** 92 | * The orientation of the bars (vertical or horizontal). 93 | * See `Orientation` for available options. 94 | */ 95 | orientation?: Orientation; 96 | /** 97 | * Optional position for the legend, if applicable. 98 | * See `LegendPosition` for available options. 99 | */ 100 | legendPosition?: LegendPosition; 101 | /** 102 | * If `true`, displays a domain line (axis line) along the x-axis. 103 | */ 104 | xDomainLine?: boolean; 105 | /** 106 | * If `true`, displays a domain line (axis line) along the y-axis. 107 | */ 108 | yDomainLine?: boolean; 109 | /** 110 | * If `true`, displays tick lines on the x-axis. 111 | */ 112 | xTickLine?: boolean; 113 | /** 114 | * If `true`, displays tick lines on the y-axis. 115 | */ 116 | yTickLine?: boolean; 117 | /** 118 | * If `true`, displays grid lines along the x-axis. 119 | */ 120 | xGridLine?: boolean; 121 | /** 122 | * If `true`, displays grid lines along the y-axis. 123 | */ 124 | yGridLine?: boolean; 125 | }; -------------------------------------------------------------------------------- /packages/vue/lib/components/Crosshair/Crosshair.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | -------------------------------------------------------------------------------- /packages/vue/lib/components/DonutChart/DonutChart.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 58 | -------------------------------------------------------------------------------- /packages/vue/lib/components/DonutChart/types.ts: -------------------------------------------------------------------------------- 1 | interface DonutChartProps { 2 | /** 3 | * The type of donut chart to render. 4 | * See `DonutType` for available options. 5 | */ 6 | type?: string; 7 | /** 8 | * The data to be displayed in the donut chart. 9 | * Each number in the array represents a segment value. 10 | */ 11 | data: number[]; 12 | /** 13 | * The height of the chart in pixels. 14 | */ 15 | height: number; 16 | /** 17 | * The radius of the donut in pixels. 18 | */ 19 | radius: number; 20 | /** 21 | * If `true`, hides the chart legend. 22 | */ 23 | hideLegend?: boolean; 24 | /** 25 | * An array of label objects defining the name and color for each segment. 26 | */ 27 | labels: { 28 | name: string; 29 | color: string; 30 | }[]; 31 | }; 32 | 33 | enum DonutType { 34 | Half = "half", 35 | Full = "full", 36 | } 37 | 38 | export { type DonutChartProps, DonutType }; -------------------------------------------------------------------------------- /packages/vue/lib/components/LineChart/LineChart.vue: -------------------------------------------------------------------------------- 1 | 67 | 68 | 122 | -------------------------------------------------------------------------------- /packages/vue/lib/components/LineChart/types.ts: -------------------------------------------------------------------------------- 1 | import { 2 | BulletLegendItemInterface, 3 | CurveType, 4 | LegendPosition, 5 | } from "../../types"; 6 | 7 | export interface LineChartProps { 8 | /** 9 | * The data to be displayed in the line chart. 10 | * Each element of the array represents a data point. 11 | * The structure of 'T' should be compatible with the chart's rendering logic. 12 | */ 13 | data: T[]; 14 | /** 15 | * The height of the chart in pixels. 16 | */ 17 | height: number; 18 | /** 19 | * Optional label for the x-axis. 20 | */ 21 | xLabel?: string; 22 | /** 23 | * Optional label for the y-axis. 24 | */ 25 | yLabel?: string; 26 | /** 27 | * Optional padding applied to the chart. 28 | * Allows specifying individual padding values for the top, right, bottom, and left sides. 29 | */ 30 | padding?: { 31 | top: number; 32 | right: number; 33 | bottom: number; 34 | left: number; 35 | }; 36 | /** 37 | * A record mapping category keys to `BulletLegendItemInterface` objects. 38 | * This defines the visual representation and labels for each category in the chart's legend. 39 | */ 40 | categories: Record; 41 | /** 42 | * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the x-axis. 43 | * @param {number} i - The index of the tick in the `ticks` array. 44 | * @param {(number[]|Date[])} ticks - An array of all tick values for the x-axis. 45 | * @returns {string} The formatted string representation of the tick. 46 | */ 47 | xFormatter?:((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string) 48 | /** 49 | * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the y-axis. 50 | * @param {number} i - The index of the tick in the `ticks` array. 51 | * @param {(number[]|Date[])} ticks - An array of all tick values for the y-axis. 52 | * @returns {string} The formatted string representation of the tick. 53 | */ 54 | yFormatter?:((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string) 55 | /** 56 | * The type of curve to use for the line chart. 57 | * See `CurveType` for available options. 58 | */ 59 | curveType?: CurveType; 60 | /** 61 | * The desired number of ticks on the x-axis. 62 | */ 63 | xNumTicks?: number; 64 | /** 65 | * Force specific ticks on the x-axis. 66 | */ 67 | xExplicitTicks?: number; 68 | /** 69 | * Force only first and last ticks on the x-axis. 70 | */ 71 | minMaxTicksOnly?: boolean; 72 | /** 73 | * The desired number of ticks on the y-axis. 74 | */ 75 | yNumTicks?: number; 76 | /** 77 | * If `true`, hides the chart tooltip. 78 | */ 79 | hideTooltip?: boolean; 80 | /** 81 | * If `true`, hides the chart legend. 82 | */ 83 | hideLegend?: boolean; 84 | /** 85 | * Optional position for the legend, if applicable. 86 | * See `LegendPosition` for available options. 87 | */ 88 | legendPosition?: LegendPosition; 89 | /** 90 | * If `true`, displays grid lines along the x-axis. 91 | */ 92 | xGridLine?: boolean; 93 | /** 94 | * If `true`, displays a domain line (axis line) along the x-axis. 95 | */ 96 | xDomainLine?: boolean; 97 | /** 98 | * If `true`, displays grid lines along the y-axis. 99 | */ 100 | yGridLine?: boolean; 101 | /** 102 | * If `true`, displays a domain line (axis line) along the y-axis. 103 | */ 104 | yDomainLine?: boolean; 105 | /** 106 | * If `true`, displays tick lines on the x-axis. 107 | */ 108 | xTickLine?: boolean; 109 | /** 110 | * If `true`, displays tick lines on the y-axis. 111 | */ 112 | yTickLine?: boolean; 113 | } 114 | -------------------------------------------------------------------------------- /packages/vue/lib/components/Tooltip.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 61 | -------------------------------------------------------------------------------- /packages/vue/lib/index.ts: -------------------------------------------------------------------------------- 1 | import AreaChart from "./components/AreaChart/AreaChart.vue"; 2 | import AreaStackedChart from "./components/AreaStackedChart/AreaStackedChart.vue"; 3 | import LineChart from "./components/LineChart/LineChart.vue"; 4 | import BarChart from "./components/BarChart/BarChart.vue"; 5 | import DonutChart from "./components/DonutChart/DonutChart.vue"; 6 | 7 | import { 8 | LegendPosition, 9 | CurveType, 10 | Orientation, 11 | type BulletLegendItemInterface, 12 | } from "./types"; 13 | 14 | export { 15 | AreaChart, 16 | AreaStackedChart, 17 | LineChart, 18 | BarChart, 19 | DonutChart, 20 | Orientation, 21 | CurveType, 22 | LegendPosition 23 | }; 24 | 25 | export type { 26 | BulletLegendItemInterface, 27 | } -------------------------------------------------------------------------------- /packages/vue/lib/types.ts: -------------------------------------------------------------------------------- 1 | import { AreaChartProps } from "./components/AreaChart/types"; 2 | import { BarChartProps } from "./components/BarChart/types"; 3 | import { LineChartProps } from "./components/LineChart/types"; 4 | import { DonutChartProps } from "./components/DonutChart/types"; 5 | 6 | enum LegendPosition { 7 | Top = "top", 8 | Bottom = "bottom", 9 | } 10 | 11 | enum CurveType { 12 | Basis = "basis", 13 | BasisClosed = "basisClosed", 14 | BasisOpen = "basisOpen", 15 | Bundle = "bundle", 16 | Cardinal = "cardinal", 17 | CardinalClosed = "cardinalClosed", 18 | CardinalOpen = "cardinalOpen", 19 | CatmullRom = "catmullRom", 20 | CatmullRomClosed = "catmullRomClosed", 21 | CatmullRomOpen = "catmullRomOpen", 22 | Linear = "linear", 23 | LinearClosed = "linearClosed", 24 | MonotoneX = "monotoneX", 25 | MonotoneY = "monotoneY", 26 | Natural = "natural", 27 | Step = "step", 28 | StepAfter = "stepAfter", 29 | StepBefore = "stepBefore", 30 | } 31 | 32 | interface BulletLegendItemInterface { 33 | name: string | number; 34 | color?: string; 35 | className?: string; 36 | shape?: any; 37 | inactive?: boolean; 38 | hidden?: boolean; 39 | pointer?: boolean; 40 | } 41 | 42 | enum Orientation { 43 | Horizontal = "horizontal", 44 | Vertical = "vertical", 45 | } 46 | 47 | export { 48 | LegendPosition, 49 | CurveType, 50 | Orientation, 51 | type AreaChartProps, 52 | type BarChartProps, 53 | type LineChartProps, 54 | type DonutChartProps, 55 | type BulletLegendItemInterface, 56 | }; 57 | -------------------------------------------------------------------------------- /packages/vue/lib/utils.ts: -------------------------------------------------------------------------------- 1 | export function getDistributedIndices(length: number, numTicks: number) { 2 | // Handle edge cases 3 | if (numTicks <= 0) return []; 4 | 5 | // If numTicks >= length, return all indices 6 | if (numTicks >= length) { 7 | return Array.from({ length }, (_, i) => i); 8 | } 9 | 10 | // Special case: if numTicks is 1, return only the middle index 11 | if (numTicks === 1) { 12 | return [Math.floor((length - 1) / 2)]; 13 | } 14 | 15 | // For 2 ticks, just return first and last 16 | if (numTicks === 2) { 17 | return [0, length - 1]; 18 | } 19 | 20 | // For 3 or more ticks, we need to ensure perfectly even distribution 21 | const indices = []; 22 | 23 | // We'll manually calculate the indices to ensure perfect distribution 24 | for (let i = 0; i < numTicks; i++) { 25 | // This formula ensures perfect distribution of indices 26 | const index = Math.round((i * (length - 1)) / (numTicks - 1)); 27 | indices.push(index); 28 | } 29 | 30 | // No need to filter duplicates as our formula ensures unique indices 31 | return indices; 32 | } 33 | 34 | 35 | export function getFirstPropertyValue(obj: unknown) { 36 | if (obj && Object.keys(obj).length > 0) { 37 | const firstKey = Object.keys(obj)[0]; 38 | return obj[firstKey as keyof typeof obj]; 39 | } 40 | return undefined; 41 | } -------------------------------------------------------------------------------- /packages/vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-chrts", 3 | "version": "0.1.9", 4 | "type": "module", 5 | "files": [ 6 | "dist" 7 | ], 8 | "main": "./dist/index.umd.cjs", 9 | "module": "./dist/index.js", 10 | "types": "./dist/index.d.ts", 11 | "exports": { 12 | ".": { 13 | "import": "./dist/index.js", 14 | "require": "./dist/index.umd.cjs" 15 | } 16 | }, 17 | "scripts": { 18 | "dev": "vite", 19 | "build": "vue-tsc -b && vite build", 20 | "preview": "vite preview", 21 | "release": "commit-and-tag-version" 22 | }, 23 | "peerDependencies": { 24 | "vue": "^3.5.13" 25 | }, 26 | "devDependencies": { 27 | "@tailwindcss/vite": "^4.0.15", 28 | "@tanstack/vue-table": "^8.21.2", 29 | "@types/node": "^22.13.11", 30 | "@unovis/ts": "^1.5.1", 31 | "@unovis/vue": "^1.5.1", 32 | "@vitejs/plugin-vue": "^5.2.1", 33 | "@vue/tsconfig": "^0.7.0", 34 | "@vueuse/core": "^13.0.0", 35 | "commit-and-tag-version": "^12.5.1", 36 | "tailwindcss": "^4.0.15", 37 | "typescript": "~5.7.2", 38 | "vite": "^6.2.0", 39 | "vite-plugin-dts": "^4.5.3", 40 | "vue-router": "^4.5.0", 41 | "vue-tsc": "^2.2.4" 42 | }, 43 | "packageManager": "pnpm@8.15.4+sha256.cea6d0bdf2de3a0549582da3983c70c92ffc577ff4410cbf190817ddc35137c2" 44 | } 45 | -------------------------------------------------------------------------------- /packages/vue/src/App.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 38 | -------------------------------------------------------------------------------- /packages/vue/src/AreaChartPage.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 130 | -------------------------------------------------------------------------------- /packages/vue/src/BarChartPage.vue: -------------------------------------------------------------------------------- 1 | 161 | 162 | 334 | -------------------------------------------------------------------------------- /packages/vue/src/Homepage.vue: -------------------------------------------------------------------------------- 1 | 85 | 308 | -------------------------------------------------------------------------------- /packages/vue/src/LineChartPage.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 140 | -------------------------------------------------------------------------------- /packages/vue/src/assets/main.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | @variant dark (&:where(.dark, .dark *)); 4 | 5 | @theme { 6 | --color-background: oklch(100 0 0); 7 | --color-border: oklch(92% 0 0); 8 | --color-card: oklch(100% 0 0); 9 | --color-primary: oklch(79.14% 0.2091 151.66); 10 | --chart-primary: oklch(0.63 0.1363 157.86); 11 | --chart-secondary: oklch(0.76 0.1782 153.61); 12 | } 13 | 14 | :root { 15 | --vis-color0: green !important; 16 | --vis-color1: blue !important; 17 | --vis-color2: red !important; 18 | --vis-color3: yellow !important; 19 | --vis-color4: purple !important; 20 | } 21 | 22 | @utility heading-2 { 23 | @apply text-xl dark:text-white my-2 font-bold; 24 | } 25 | 26 | .dark { 27 | color: white; 28 | --color-background: oklch(0.205 0 0); 29 | --color-card: oklch(0.225 0 0); 30 | --color-border: oklch(0.269 0 0); 31 | 32 | --tooltip-label-color: rgba(255, 255, 255, 0.5); 33 | --tooltip-value-color: rgba(255, 255, 255, 1); 34 | 35 | --vis-axis-grid-color: rgba(255, 255, 255, 0.1) !important; 36 | --vis-tooltip-background-color: #121212 !important; 37 | --vis-tooltip-border-color: none !important; 38 | --vis-tooltip-text-color: rgba(255, 255, 255, 0.5) !important; 39 | 40 | --vis-axis-tick-label-color: rgba(255, 255, 255, 0.5) !important; 41 | 42 | --vis-legend-label-color: rgba(255, 255, 255, 0.75) !important; 43 | 44 | --vis-axis-label-color: rgba(255, 255, 255, 0.5) !important; 45 | --vis-legend-label-color: rgba(255, 255, 255, 0.5) !important; 46 | } 47 | -------------------------------------------------------------------------------- /packages/vue/src/components/Progress/Progress.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | -------------------------------------------------------------------------------- /packages/vue/src/components/Progress/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Progress } from './Progress.vue'; -------------------------------------------------------------------------------- /packages/vue/src/components/Status/Status.vue: -------------------------------------------------------------------------------- 1 | 66 | 67 | 103 | -------------------------------------------------------------------------------- /packages/vue/src/components/Status/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Status } from './Status.vue'; -------------------------------------------------------------------------------- /packages/vue/src/data/AreaChartData.ts: -------------------------------------------------------------------------------- 1 | import type { BulletLegendItemInterface } from '@unovis/ts' 2 | 3 | /* Demo data for homepage */ 4 | export const categories1: Record = { 5 | desktop: { name: 'Desktop', color: '#156F36' }, 6 | mobile: { name: 'Mobile', color: '#4ade80' } 7 | } 8 | 9 | export const categories2: Record = { 10 | temperature: { name: 'Temperature', color: '#00dc82' } 11 | } 12 | 13 | export const categories3: Record = { 14 | desktop: { name: 'Desktop', color: '#156F36' }, 15 | mobile: { name: 'Mobile', color: '#4ade80' } 16 | } 17 | 18 | export const categories4: Record = { 19 | firstTime: { name: 'First time', color: '#156F36' }, 20 | returning: { name: 'Returning', color: '#156F3640' } 21 | } 22 | 23 | export const categories5: Record = { 24 | desktop: { name: 'Desktop', color: '#4ade80' } 25 | } 26 | 27 | export interface AreaChartItem1 { 28 | date: string 29 | desktop: number 30 | mobile: number 31 | } 32 | 33 | export const AreaChartData1: AreaChartItem1[] = [ 34 | { date: '2024-04-01', desktop: 222, mobile: 150 }, 35 | { date: '2024-04-02', desktop: 180, mobile: 97 }, 36 | { date: '2024-04-03', desktop: 167, mobile: 120 }, 37 | { date: '2024-04-04', desktop: 260, mobile: 240 }, 38 | { date: '2024-04-05', desktop: 373, mobile: 290 }, 39 | { date: '2024-04-06', desktop: 340, mobile: 310 }, 40 | { date: '2024-04-07', desktop: 245, mobile: 180 }, 41 | { date: '2024-04-08', desktop: 409, mobile: 320 }, 42 | { date: '2024-04-09', desktop: 110, mobile: 59 }, 43 | { date: '2024-04-10', desktop: 261, mobile: 190 }, 44 | { date: '2024-04-11', desktop: 350, mobile: 327 }, 45 | // { date: '2024-04-12', desktop: 292, mobile: 210 }, 46 | // { date: '2024-04-13', desktop: 380, mobile: 342 }, 47 | // { date: '2024-04-14', desktop: 220, mobile: 137 }, 48 | // { date: '2024-04-15', desktop: 170, mobile: 120 }, 49 | // { date: '2024-04-16', desktop: 190, mobile: 138 }, 50 | // { date: '2024-04-17', desktop: 446, mobile: 360 }, 51 | // { date: '2024-04-18', desktop: 410, mobile: 364 }, 52 | // { date: '2024-04-19', desktop: 243, mobile: 180 }, 53 | // { date: '2024-04-20', desktop: 150, mobile: 89 }, 54 | // { date: '2024-04-21', desktop: 200, mobile: 137 }, 55 | // { date: '2024-04-22', desktop: 224, mobile: 170 }, 56 | // { date: '2024-04-23', desktop: 230, mobile: 138 }, 57 | // { date: '2024-04-24', desktop: 387, mobile: 290 }, 58 | // { date: '2024-04-25', desktop: 250, mobile: 215 }, 59 | // { date: '2024-04-26', desktop: 130, mobile: 75 }, 60 | // { date: '2024-04-27', desktop: 420, mobile: 383 }, 61 | // { date: '2024-04-28', desktop: 180, mobile: 122 }, 62 | // { date: '2024-04-29', desktop: 315, mobile: 240 }, 63 | // { date: '2024-04-30', desktop: 454, mobile: 380 }, 64 | // { date: '2024-05-01', desktop: 220, mobile: 165 }, 65 | // { date: '2024-05-02', desktop: 310, mobile: 293 }, 66 | // { date: '2024-05-03', desktop: 247, mobile: 190 }, 67 | // { date: '2024-05-04', desktop: 420, mobile: 385 }, 68 | // { date: '2024-05-05', desktop: 481, mobile: 390 }, 69 | // { date: '2024-05-06', desktop: 520, mobile: 489 }, 70 | // { date: '2024-05-07', desktop: 388, mobile: 300 }, 71 | // { date: '2024-05-08', desktop: 210, mobile: 149 }, 72 | // { date: '2024-05-09', desktop: 227, mobile: 180 }, 73 | // { date: '2024-05-10', desktop: 330, mobile: 293 }, 74 | // { date: '2024-05-11', desktop: 335, mobile: 270 }, 75 | // { date: '2024-05-12', desktop: 240, mobile: 197 }, 76 | // { date: '2024-05-13', desktop: 197, mobile: 160 }, 77 | // { date: '2024-05-14', desktop: 490, mobile: 448 }, 78 | // { date: '2024-05-15', desktop: 473, mobile: 473 }, 79 | // { date: '2024-06-01', desktop: 222, mobile: 150 }, 80 | // { date: '2024-06-02', desktop: 180, mobile: 97 }, 81 | // { date: '2024-06-03', desktop: 167, mobile: 120 }, 82 | // { date: '2024-06-04', desktop: 260, mobile: 240 }, 83 | // { date: '2024-06-05', desktop: 373, mobile: 290 }, 84 | // { date: '2024-06-06', desktop: 340, mobile: 310 }, 85 | // { date: '2024-06-07', desktop: 245, mobile: 180 }, 86 | // { date: '2024-06-08', desktop: 409, mobile: 320 }, 87 | // { date: '2024-06-09', desktop: 110, mobile: 59 }, 88 | // { date: '2024-06-10', desktop: 261, mobile: 190 }, 89 | // { date: '2024-06-11', desktop: 350, mobile: 327 }, 90 | // { date: '2024-06-12', desktop: 292, mobile: 210 }, 91 | // { date: '2024-06-13', desktop: 380, mobile: 342 }, 92 | // { date: '2024-06-14', desktop: 220, mobile: 137 }, 93 | // { date: '2024-06-15', desktop: 170, mobile: 120 }, 94 | // { date: '2024-06-16', desktop: 190, mobile: 138 }, 95 | // { date: '2024-06-17', desktop: 446, mobile: 360 }, 96 | // { date: '2024-06-18', desktop: 410, mobile: 364 }, 97 | // { date: '2024-06-19', desktop: 243, mobile: 180 }, 98 | // { date: '2024-06-20', desktop: 150, mobile: 89 }, 99 | // { date: '2024-06-21', desktop: 200, mobile: 137 }, 100 | // { date: '2024-06-22', desktop: 224, mobile: 170 }, 101 | // { date: '2024-06-23', desktop: 230, mobile: 138 }, 102 | // { date: '2024-06-24', desktop: 387, mobile: 290 }, 103 | // { date: '2024-06-25', desktop: 250, mobile: 215 }, 104 | // { date: '2024-06-26', desktop: 130, mobile: 75 }, 105 | // { date: '2024-06-27', desktop: 420, mobile: 383 }, 106 | // { date: '2024-06-28', desktop: 180, mobile: 122 }, 107 | // { date: '2024-06-29', desktop: 315, mobile: 240 }, 108 | // { date: '2024-06-30', desktop: 454, mobile: 380 }, 109 | // { date: '2024-07-01', desktop: 220, mobile: 165 }, 110 | // { date: '2024-07-02', desktop: 310, mobile: 293 }, 111 | // { date: '2024-07-03', desktop: 247, mobile: 190 }, 112 | // { date: '2024-07-04', desktop: 420, mobile: 385 }, 113 | // { date: '2024-07-05', desktop: 481, mobile: 390 }, 114 | // { date: '2024-07-06', desktop: 520, mobile: 489 }, 115 | // { date: '2024-07-07', desktop: 388, mobile: 300 }, 116 | // { date: '2024-07-08', desktop: 210, mobile: 149 }, 117 | // { date: '2024-07-09', desktop: 227, mobile: 180 }, 118 | // { date: '2024-07-10', desktop: 330, mobile: 293 }, 119 | // { date: '2024-07-11', desktop: 335, mobile: 270 }, 120 | // { date: '2024-07-12', desktop: 240, mobile: 197 }, 121 | // { date: '2024-07-13', desktop: 197, mobile: 160 }, 122 | // { date: '2024-07-14', desktop: 490, mobile: 448 }, 123 | // { date: '2024-07-15', desktop: 473, mobile: 473 } 124 | ] 125 | 126 | export interface AreaChartItem2 { 127 | hour: string 128 | temperature: number 129 | } 130 | 131 | export const AreaChartData2: AreaChartItem2[] = [ 132 | { hour: '00:00', temperature: 12.8 }, 133 | { hour: '01:00', temperature: 12.4 }, 134 | { hour: '02:00', temperature: 12.2 }, 135 | { hour: '03:00', temperature: 8.9 }, 136 | { hour: '04:00', temperature: 8.7 }, 137 | { hour: '05:00', temperature: 8.3 }, 138 | { hour: '06:00', temperature: 8.3 }, 139 | { hour: '07:00', temperature: 8.3 }, 140 | { hour: '08:00', temperature: 10.5 }, 141 | { hour: '09:00', temperature: 12.0 }, 142 | { hour: '10:00', temperature: 13.0 }, 143 | { hour: '11:00', temperature: 14.2 }, 144 | { hour: '12:00', temperature: 15.5 }, 145 | { hour: '13:00', temperature: 16.8 }, 146 | { hour: '14:00', temperature: 17.5 }, 147 | { hour: '15:00', temperature: 18.1 }, 148 | { hour: '16:00', temperature: 18.2 }, 149 | { hour: '17:00', temperature: 17.8 }, 150 | { hour: '18:00', temperature: 17.2 }, 151 | { hour: '19:00', temperature: 16.5 }, 152 | { hour: '20:00', temperature: 15.8 }, 153 | { hour: '21:00', temperature: 14.9 }, 154 | { hour: '22:00', temperature: 14.2 }, 155 | { hour: '23:00', temperature: 13.5 } 156 | ] 157 | 158 | export const AreaChartData3 = [ 159 | { 160 | time: '00:00', 161 | returning: 0, 162 | firstTime: 0 163 | }, 164 | { 165 | time: '01:00', 166 | returning: 400, 167 | firstTime: 600 168 | }, 169 | { 170 | time: '02:00', 171 | returning: 300, 172 | firstTime: 300 173 | }, 174 | { 175 | time: '03:00', 176 | returning: 300, 177 | firstTime: 300 178 | }, 179 | { 180 | time: '04:00', 181 | returning: 200, 182 | firstTime: 300 183 | }, 184 | { 185 | time: '05:00', 186 | returning: 111, 187 | firstTime: 222 188 | }, 189 | { 190 | time: '06:00', 191 | returning: 125, 192 | firstTime: 125 193 | }, 194 | { 195 | time: '07:00', 196 | returning: 0, 197 | firstTime: 0 198 | }, 199 | { 200 | time: '08:00', 201 | returning: 300, 202 | firstTime: 250 203 | }, 204 | { 205 | time: '09:00', 206 | returning: 0, 207 | firstTime: 0 208 | }, 209 | { 210 | time: '10:00', 211 | returning: 250, 212 | firstTime: 350 213 | }, 214 | { 215 | time: '11:00', 216 | returning: 125, 217 | firstTime: 175 218 | }, 219 | { 220 | time: '12:00', 221 | returning: 0, 222 | firstTime: 0 223 | }, 224 | 225 | { 226 | time: '13:00', 227 | returning: 0, 228 | firstTime: 0 229 | }, 230 | { 231 | time: '14:00', 232 | returning: 0, 233 | firstTime: 0 234 | }, 235 | { 236 | time: '15:00', 237 | returning: 0, 238 | firstTime: 0 239 | }, 240 | { 241 | time: '16:00', 242 | returning: 0, 243 | firstTime: 0 244 | }, 245 | { 246 | time: '17:00', 247 | returning: 0, 248 | firstTime: 0 249 | }, 250 | { 251 | time: '18:00', 252 | returning: 50, 253 | firstTime: 50 254 | }, 255 | { 256 | time: '19:00', 257 | returning: 50, 258 | firstTime: 50 259 | }, 260 | { 261 | time: '20:00', 262 | returning: 50, 263 | firstTime: 50 264 | }, 265 | { 266 | time: '21:00', 267 | returning: 0, 268 | firstTime: 0 269 | }, 270 | { 271 | time: '22:00', 272 | returning: 0, 273 | firstTime: 0 274 | }, 275 | { 276 | time: '23:00', 277 | returning: 0, 278 | firstTime: 0 279 | }, 280 | { 281 | time: '00:00', 282 | returning: 0, 283 | firstTime: 0 284 | } 285 | ] 286 | 287 | export type AreaChartItem4 = { 288 | month: string; 289 | desktop: number 290 | } 291 | export const AreaChartData4: AreaChartItem4[] = [ 292 | { month: "January", desktop: 186 }, 293 | { month: "February", desktop: 305 }, 294 | { month: "March", desktop: 237 }, 295 | { month: "April", desktop: 73 }, 296 | { month: "May", desktop: 209 }, 297 | { month: "June", desktop: 214 }, 298 | ] -------------------------------------------------------------------------------- /packages/vue/src/data/BarChartData.ts: -------------------------------------------------------------------------------- 1 | export interface ElectionDatum { 2 | year: number 3 | democrat: number 4 | republican: number 5 | other: number 6 | } 7 | 8 | export function capitalize(s: string): string { 9 | return s.charAt(0).toUpperCase() + s.slice(1) 10 | } 11 | 12 | export const BarChartData: ElectionDatum[] = [ 13 | { 14 | year: 1980, 15 | republican: 43642639, 16 | democrat: 35480948, 17 | other: 6505863, 18 | }, 19 | { 20 | year: 1984, 21 | republican: 54166829, 22 | democrat: 37449813, 23 | other: 811015, 24 | }, 25 | { 26 | year: 1988, 27 | republican: 48642640, 28 | democrat: 41716679, 29 | other: 817798, 30 | }, 31 | { 32 | year: 1992, 33 | republican: 38798913, 34 | democrat: 44856747, 35 | other: 20663272, 36 | }, 37 | { 38 | year: 1996, 39 | republican: 39003697, 40 | democrat: 47295351, 41 | other: 9625419, 42 | }, 43 | { 44 | year: 2000, 45 | republican: 50311372, 46 | democrat: 50830580, 47 | other: 4071625, 48 | }, 49 | { 50 | year: 2004, 51 | republican: 61872711, 52 | democrat: 58894561, 53 | other: 1212870, 54 | }, 55 | { 56 | year: 2008, 57 | republican: 59613835, 58 | democrat: 69338846, 59 | other: 1956116, 60 | }, 61 | { 62 | year: 2012, 63 | republican: 60670117, 64 | democrat: 65752017, 65 | other: 1501463, 66 | }, 67 | { 68 | year: 2016, 69 | republican: 62692670, 70 | democrat: 65677288, 71 | other: 4292059, 72 | }, 73 | { 74 | year: 2020, 75 | democrat: 81268908, 76 | republican: 74216146, 77 | other: 1246094, 78 | }, 79 | ] 80 | -------------------------------------------------------------------------------- /packages/vue/src/data/IncomeExpenseData.ts: -------------------------------------------------------------------------------- 1 | import type { BulletLegendItemInterface } from "@unovis/ts" 2 | 3 | export interface IncomeExpenseItem { 4 | month: string 5 | year: number 6 | income: { 7 | salary: number 8 | sideHustle: number 9 | total: number 10 | } 11 | expenses: { 12 | rent: number 13 | groceries: number 14 | utilities: number 15 | transportation: number 16 | entertainment: number 17 | eatingOut: number 18 | other: number 19 | total: number 20 | } 21 | } 22 | 23 | 24 | export const categories: Record = { 25 | income: { name: 'Income', color: '#10b981' }, 26 | expenses: { name: 'Expenses', color: '#3b82f6' } 27 | } 28 | 29 | export const IncomeExpenseData: IncomeExpenseItem[] = [ 30 | { 31 | month: 'January', 32 | year: 2024, 33 | income: { 34 | salary: 2000, 35 | sideHustle: 200, 36 | total: 2200 37 | }, 38 | expenses: { 39 | rent: 1500, 40 | groceries: 400, 41 | utilities: 200, 42 | transportation: 150, 43 | entertainment: 300, 44 | eatingOut: 250, 45 | other: 100, 46 | total: 2900 47 | } 48 | 49 | }, 50 | { 51 | month: 'February', 52 | year: 2024, 53 | income: { 54 | salary: 4000, 55 | sideHustle: 100, 56 | total: 4100 57 | }, 58 | expenses: { 59 | rent: 1500, 60 | groceries: 450, 61 | utilities: 250, 62 | transportation: 150, 63 | entertainment: 200, 64 | eatingOut: 300, 65 | other: 150, 66 | total: 3000 67 | } 68 | 69 | }, 70 | { 71 | month: 'March', 72 | year: 2024, 73 | income: { 74 | salary: 2000, 75 | sideHustle: 100, 76 | total: 2100 77 | }, 78 | expenses: { 79 | rent: 1500, 80 | groceries: 420, 81 | utilities: 220, 82 | transportation: 180, 83 | entertainment: 350, 84 | eatingOut: 200, 85 | other: 120, 86 | total: 2990 87 | } 88 | }, 89 | { 90 | month: 'April', 91 | year: 2024, 92 | income: { 93 | salary: 2300, 94 | sideHustle: 100, 95 | total: 2400 96 | }, 97 | expenses: { 98 | rent: 1500, 99 | groceries: 450, 100 | utilities: 250, 101 | transportation: 150, 102 | entertainment: 200, 103 | eatingOut: 300, 104 | other: 150, 105 | total: 1400 106 | } 107 | 108 | }, 109 | { 110 | month: 'May', 111 | year: 2024, 112 | income: { 113 | salary: 4000, 114 | sideHustle: 100, 115 | total: 4100 116 | }, 117 | expenses: { 118 | rent: 1500, 119 | groceries: 450, 120 | utilities: 250, 121 | transportation: 150, 122 | entertainment: 200, 123 | eatingOut: 300, 124 | other: 150, 125 | total: 3000 126 | } 127 | 128 | }, 129 | { 130 | month: 'Jun', 131 | year: 2024, 132 | income: { 133 | salary: 3000, 134 | sideHustle: 100, 135 | total: 3100 136 | }, 137 | expenses: { 138 | rent: 1500, 139 | groceries: 450, 140 | utilities: 250, 141 | transportation: 150, 142 | entertainment: 200, 143 | eatingOut: 300, 144 | other: 150, 145 | total: 3000 146 | } 147 | 148 | }, 149 | { 150 | month: 'Jul', 151 | year: 2024, 152 | income: { 153 | salary: 3200, 154 | sideHustle: 600, 155 | total: 3800 156 | }, 157 | expenses: { 158 | rent: 1500, 159 | groceries: 450, 160 | utilities: 250, 161 | transportation: 150, 162 | entertainment: 200, 163 | eatingOut: 300, 164 | other: 150, 165 | total: 3000 166 | } 167 | 168 | }, 169 | { 170 | month: 'Aug', 171 | year: 2024, 172 | income: { 173 | salary: 3000, 174 | sideHustle: 100, 175 | total: 3100 176 | }, 177 | expenses: { 178 | rent: 1500, 179 | groceries: 450, 180 | utilities: 250, 181 | transportation: 150, 182 | entertainment: 200, 183 | eatingOut: 300, 184 | other: 150, 185 | total: 2000 186 | } 187 | 188 | } 189 | ] 190 | -------------------------------------------------------------------------------- /packages/vue/src/data/InvestmentData.ts: -------------------------------------------------------------------------------- 1 | import { BulletLegendItemInterface } from "@unovis/ts" 2 | 3 | export const categories: Record = { 4 | 'ETF Shares Vital': { name: 'ETF Shares Vital' }, 5 | 'Vitainvest Core': { name: 'Vitainvest Core' }, 6 | 'iShares Tech Growth': { name: 'iShares Tech Growth' }, 7 | 'test': { name: 'Test' } 8 | } 9 | 10 | export const InvestmentData = [ 11 | { 12 | date: 'Aug 01', 13 | 'ETF Shares Vital': 2100.2, 14 | 'Vitainvest Core': 4434.1, 15 | 'iShares Tech Growth': 7943.2, 16 | test: 4000 17 | }, 18 | { 19 | date: 'Aug 02', 20 | 'ETF Shares Vital': 2943.0, 21 | 'Vitainvest Core': 4954.1, 22 | 'iShares Tech Growth': 8954.1, 23 | test: 4000 24 | }, 25 | { 26 | date: 'Aug 03', 27 | 'ETF Shares Vital': 4889.5, 28 | 'Vitainvest Core': 6100.2, 29 | 'iShares Tech Growth': 9123.7, 30 | test: 4000 31 | }, 32 | { 33 | date: 'Aug 04', 34 | 'ETF Shares Vital': 3909.8, 35 | 'Vitainvest Core': 4909.7, 36 | 'iShares Tech Growth': 7478.4, 37 | test: 4000 38 | }, 39 | { 40 | date: 'Aug 05', 41 | 'ETF Shares Vital': 5778.7, 42 | 'Vitainvest Core': 7103.1, 43 | 'iShares Tech Growth': 9504.3, 44 | test: 4000 45 | }, 46 | { 47 | date: 'Aug 06', 48 | 'ETF Shares Vital': 5900.9, 49 | 'Vitainvest Core': 7534.3, 50 | 'iShares Tech Growth': 9943.4, 51 | test: 4000 52 | }, 53 | { 54 | date: 'Aug 07', 55 | 'ETF Shares Vital': 4129.4, 56 | 'Vitainvest Core': 7412.1, 57 | 'iShares Tech Growth': 10112.2, 58 | test: 4000 59 | }, 60 | { 61 | date: 'Aug 08', 62 | 'ETF Shares Vital': 6021.2, 63 | 'Vitainvest Core': 7834.4, 64 | 'iShares Tech Growth': 10290.2, 65 | test: 4000 66 | }, 67 | { 68 | date: 'Aug 09', 69 | 'ETF Shares Vital': 6279.8, 70 | 'Vitainvest Core': 8159.1, 71 | 'iShares Tech Growth': 10349.6, 72 | test: 4000 73 | }, 74 | { 75 | date: 'Aug 10', 76 | 'ETF Shares Vital': 6224.5, 77 | 'Vitainvest Core': 8260.6, 78 | 'iShares Tech Growth': 10415.4, 79 | test: 4000 80 | }, 81 | { 82 | date: 'Aug 11', 83 | 'ETF Shares Vital': 6380.6, 84 | 'Vitainvest Core': 8965.3, 85 | 'iShares Tech Growth': 10636.3, 86 | test: 4000 87 | }, 88 | { 89 | date: 'Aug 12', 90 | 'ETF Shares Vital': 6414.4, 91 | 'Vitainvest Core': 7989.3, 92 | 'iShares Tech Growth': 10900.5, 93 | test: 4000 94 | }, 95 | { 96 | date: 'Aug 13', 97 | 'ETF Shares Vital': 6540.1, 98 | 'Vitainvest Core': 7839.6, 99 | 'iShares Tech Growth': 11040.4, 100 | test: 4000 101 | }, 102 | { 103 | date: 'Aug 14', 104 | 'ETF Shares Vital': 6634.4, 105 | 'Vitainvest Core': 7343.8, 106 | 'iShares Tech Growth': 11390.5, 107 | test: 4000 108 | }, 109 | { 110 | date: 'Aug 15', 111 | 'ETF Shares Vital': 7124.6, 112 | 'Vitainvest Core': 6903.7, 113 | 'iShares Tech Growth': 11423.1, 114 | test: 4000 115 | }, 116 | { 117 | date: 'Aug 16', 118 | 'ETF Shares Vital': 7934.5, 119 | 'Vitainvest Core': 6273.6, 120 | 'iShares Tech Growth': 12134.4, 121 | test: 4000 122 | }, 123 | { 124 | date: 'Aug 17', 125 | 'ETF Shares Vital': 10287.8, 126 | 'Vitainvest Core': 5900.3, 127 | 'iShares Tech Growth': 12034.4, 128 | test: 4000 129 | }, 130 | { 131 | date: 'Aug 18', 132 | 'ETF Shares Vital': 10323.2, 133 | 'Vitainvest Core': 5732.1, 134 | 'iShares Tech Growth': 11011.7, 135 | test: 4000 136 | }, 137 | { 138 | date: 'Aug 19', 139 | 'ETF Shares Vital': 10511.4, 140 | 'Vitainvest Core': 5523.1, 141 | 'iShares Tech Growth': 11834.8, 142 | test: 4000 143 | }, 144 | { 145 | date: 'Aug 20', 146 | 'ETF Shares Vital': 11043.9, 147 | 'Vitainvest Core': 5422.3, 148 | 'iShares Tech Growth': 12387.1, 149 | test: 4000 150 | }, 151 | { 152 | date: 'Aug 21', 153 | 'ETF Shares Vital': 6700.7, 154 | 'Vitainvest Core': 5334.2, 155 | 'iShares Tech Growth': 11032.2, 156 | test: 4000 157 | }, 158 | { 159 | date: 'Aug 22', 160 | 'ETF Shares Vital': 6900.8, 161 | 'Vitainvest Core': 4943.4, 162 | 'iShares Tech Growth': 10134.2, 163 | test: 4000 164 | }, 165 | { 166 | date: 'Aug 23', 167 | 'ETF Shares Vital': 7934.5, 168 | 'Vitainvest Core': 4812.1, 169 | 'iShares Tech Growth': 9921.2, 170 | test: 4000 171 | }, 172 | { 173 | date: 'Aug 24', 174 | 'ETF Shares Vital': 9021.0, 175 | 'Vitainvest Core': 2729.1, 176 | 'iShares Tech Growth': 10549.8, 177 | test: 4000 178 | }, 179 | { 180 | date: 'Aug 25', 181 | 'ETF Shares Vital': 9198.2, 182 | 'Vitainvest Core': 2178.0, 183 | 'iShares Tech Growth': 10968.4, 184 | test: 4000 185 | }, 186 | { 187 | date: 'Aug 26', 188 | 'ETF Shares Vital': 9557.1, 189 | 'Vitainvest Core': 2158.3, 190 | 'iShares Tech Growth': 11059.1, 191 | test: 4000 192 | }, 193 | { 194 | date: 'Aug 27', 195 | 'ETF Shares Vital': 9959.8, 196 | 'Vitainvest Core': 2100.8, 197 | 'iShares Tech Growth': 11903.6, 198 | test: 4000 199 | }, 200 | { 201 | date: 'Aug 28', 202 | 'ETF Shares Vital': 10034.6, 203 | 'Vitainvest Core': 2934.4, 204 | 'iShares Tech Growth': 12143.3, 205 | test: 4000 206 | }, 207 | { 208 | date: 'Aug 29', 209 | 'ETF Shares Vital': 10243.8, 210 | 'Vitainvest Core': 3223.4, 211 | 'iShares Tech Growth': 12930.1, 212 | test: 4000 213 | }, 214 | { 215 | date: 'Aug 30', 216 | 'ETF Shares Vital': 10078.5, 217 | 'Vitainvest Core': 3779.1, 218 | 'iShares Tech Growth': 13420.5, 219 | test: 4000 220 | }, 221 | { 222 | date: 'Aug 31', 223 | 'ETF Shares Vital': 11134.6, 224 | 'Vitainvest Core': 4190.3, 225 | 'iShares Tech Growth': 14443.2, 226 | test: 4000 227 | }, 228 | { 229 | date: 'Sep 01', 230 | 'ETF Shares Vital': 12347.2, 231 | 'Vitainvest Core': 4839.1, 232 | 'iShares Tech Growth': 14532.1, 233 | test: 4000 234 | }, 235 | { 236 | date: 'Sep 02', 237 | 'ETF Shares Vital': 12593.8, 238 | 'Vitainvest Core': 5153.3, 239 | 'iShares Tech Growth': 14283.5, 240 | test: 4000 241 | }, 242 | { 243 | date: 'Sep 03', 244 | 'ETF Shares Vital': 12043.4, 245 | 'Vitainvest Core': 5234.8, 246 | 'iShares Tech Growth': 14078.9, 247 | test: 4000 248 | }, 249 | { 250 | date: 'Sep 04', 251 | 'ETF Shares Vital': 12144.9, 252 | 'Vitainvest Core': 5478.4, 253 | 'iShares Tech Growth': 13859.7, 254 | test: 4000 255 | }, 256 | { 257 | date: 'Sep 05', 258 | 'ETF Shares Vital': 12489.5, 259 | 'Vitainvest Core': 5741.1, 260 | 'iShares Tech Growth': 13539.2, 261 | test: 4000 262 | }, 263 | { 264 | date: 'Sep 06', 265 | 'ETF Shares Vital': 12748.7, 266 | 'Vitainvest Core': 6743.9, 267 | 'iShares Tech Growth': 13643.2, 268 | test: 4000 269 | }, 270 | { 271 | date: 'Sep 07', 272 | 'ETF Shares Vital': 12933.2, 273 | 'Vitainvest Core': 7832.8, 274 | 'iShares Tech Growth': 14629.2, 275 | test: 4000 276 | }, 277 | { 278 | date: 'Sep 08', 279 | 'ETF Shares Vital': 13028.8, 280 | 'Vitainvest Core': 8943.2, 281 | 'iShares Tech Growth': 13611.2, 282 | test: 4000 283 | }, 284 | { 285 | date: 'Sep 09', 286 | 'ETF Shares Vital': 13412.4, 287 | 'Vitainvest Core': 9932.2, 288 | 'iShares Tech Growth': 12515.2, 289 | test: 4000 290 | }, 291 | { 292 | date: 'Sep 10', 293 | 'ETF Shares Vital': 13649.0, 294 | 'Vitainvest Core': 10139.2, 295 | 'iShares Tech Growth': 11143.8, 296 | test: 4000 297 | }, 298 | { 299 | date: 'Sep 11', 300 | 'ETF Shares Vital': 13748.5, 301 | 'Vitainvest Core': 10441.2, 302 | 'iShares Tech Growth': 8929.2, 303 | test: 4000 304 | }, 305 | { 306 | date: 'Sep 12', 307 | 'ETF Shares Vital': 13148.1, 308 | 'Vitainvest Core': 10933.8, 309 | 'iShares Tech Growth': 8943.2, 310 | test: 4000 311 | }, 312 | { 313 | date: 'Sep 13', 314 | 'ETF Shares Vital': 12839.6, 315 | 'Vitainvest Core': 11073.4, 316 | 'iShares Tech Growth': 7938.3, 317 | test: 4000 318 | }, 319 | { 320 | date: 'Sep 14', 321 | 'ETF Shares Vital': 12428.2, 322 | 'Vitainvest Core': 11128.3, 323 | 'iShares Tech Growth': 7533.4, 324 | test: 4000 325 | }, 326 | { 327 | date: 'Sep 15', 328 | 'ETF Shares Vital': 12012.8, 329 | 'Vitainvest Core': 11412.3, 330 | 'iShares Tech Growth': 7100.4, 331 | test: 4000 332 | }, 333 | { 334 | date: 'Sep 16', 335 | 'ETF Shares Vital': 11801.3, 336 | 'Vitainvest Core': 10501.1, 337 | 'iShares Tech Growth': 6532.1, 338 | test: 4000 339 | }, 340 | { 341 | date: 'Sep 17', 342 | 'ETF Shares Vital': 10102.9, 343 | 'Vitainvest Core': 8923.3, 344 | 'iShares Tech Growth': 4332.8, 345 | test: 4000 346 | }, 347 | { 348 | date: 'Sep 18', 349 | 'ETF Shares Vital': 12132.5, 350 | 'Vitainvest Core': 10212.1, 351 | 'iShares Tech Growth': 7847.4, 352 | test: 4000 353 | }, 354 | { 355 | date: 'Sep 19', 356 | 'ETF Shares Vital': 12901.1, 357 | 'Vitainvest Core': 10101.7, 358 | 'iShares Tech Growth': 7223.3, 359 | test: 4000 360 | }, 361 | { 362 | date: 'Sep 20', 363 | 'ETF Shares Vital': 13132.6, 364 | 'Vitainvest Core': 12132.3, 365 | 'iShares Tech Growth': 6900.2, 366 | test: 4000 367 | }, 368 | { 369 | date: 'Sep 21', 370 | 'ETF Shares Vital': 14132.2, 371 | 'Vitainvest Core': 13212.5, 372 | 'iShares Tech Growth': 5932.2, 373 | test: 4000 374 | }, 375 | { 376 | date: 'Sep 22', 377 | 'ETF Shares Vital': 14245.8, 378 | 'Vitainvest Core': 12163.4, 379 | 'iShares Tech Growth': 5577.1, 380 | test: 4000 381 | }, 382 | { 383 | date: 'Sep 23', 384 | 'ETF Shares Vital': 14328.3, 385 | 'Vitainvest Core': 10036.1, 386 | 'iShares Tech Growth': 5439.2, 387 | test: 4000 388 | }, 389 | { 390 | date: 'Sep 24', 391 | 'ETF Shares Vital': 14949.9, 392 | 'Vitainvest Core': 8985.1, 393 | 'iShares Tech Growth': 4463.1, 394 | test: 4000 395 | }, 396 | { 397 | date: 'Sep 25', 398 | 'ETF Shares Vital': 15967.5, 399 | 'Vitainvest Core': 9700.1, 400 | 'iShares Tech Growth': 4123.2, 401 | test: 4000 402 | }, 403 | { 404 | date: 'Sep 26', 405 | 'ETF Shares Vital': 17349.3, 406 | 'Vitainvest Core': 10943.4, 407 | 'iShares Tech Growth': 3935.1, 408 | test: 4000 409 | }, 410 | ] -------------------------------------------------------------------------------- /packages/vue/src/data/RevenueData.ts: -------------------------------------------------------------------------------- 1 | import { BulletLegendItemInterface } from "@unovis/ts"; 2 | 3 | export const categories: Record = { 4 | value: { name: 'Value', color: '#05DF72' }, 5 | } 6 | 7 | export const RevenueData = [ 8 | { date: '16/12/25', value: 60000 }, 9 | { date: '08/12/25', value: 40000 }, 10 | { date: '30/11/25', value: 40000 }, 11 | { date: '22/11/25', value: 30000 }, 12 | { date: '14/11/25', value: 65000 }, 13 | { date: '06/11/25', value: 90000 }, 14 | { date: '29/10/25', value: 35000 }, 15 | { date: '21/10/25', value: 25000 }, 16 | { date: '13/10/25', value: 60000 }, 17 | { date: '05/10/25', value: 55000 }, 18 | { date: '27/09/25', value: 110000 }, 19 | { date: '19/09/25', value: 60000 }, 20 | { date: '11/09/25', value: 50000 }, 21 | { date: '03/09/25', value: 80000 }, 22 | { date: '26/08/25', value: 30000 }, // Estimated 23 | { date: '18/08/25', value: 45000 }, // Estimated 24 | { date: '10/08/25', value: 55000 }, // Estimated 25 | { date: '02/08/25', value: 70000 }, // Estimated 26 | { date: '25/07/25', value: 40000 }, // Estimated 27 | { date: '17/07/25', value: 60000 }, // Estimated 28 | { date: '09/07/25', value: 35000 }, // Estimated 29 | { date: '01/07/25', value: 50000 }, // Estimated 30 | { date: '23/06/25', value: 65000 }, // Estimated 31 | { date: '15/06/25', value: 80000 }, // Estimated 32 | { date: '07/06/25', value: 45000 }, // Estimated 33 | { date: '30/05/25', value: 75000 }, // Estimated 34 | { date: '22/05/25', value: 55000 }, // Estimated 35 | { date: '14/05/25', value: 60000 }, // Estimated 36 | { date: '06/05/25', value: 40000 }, // Estimated 37 | { date: '28/04/25', value: 30000 }, // Estimated 38 | { date: '20/04/25', value: 50000 }, // Estimated 39 | { date: '12/04/25', value: 70000 }, // Estimated 40 | { date: '04/04/25', value: 65000 }, // Estimated 41 | { date: '27/03/25', value: 85000 }, // Estimated 42 | { date: '19/03/25', value: 55000 }, // Estimated 43 | { date: '11/03/25', value: 45000 }, // Estimated 44 | { date: '03/03/25', value: 60000 }, // Estimated 45 | { date: '25/02/25', value: 35000 }, // Estimated 46 | { date: '16/02/25', value: 50000 }, // Estimated 47 | { date: '08/02/25', value: 75000 }, // Estimated 48 | { date: '31/01/25', value: 65000 }, // Estimated 49 | { date: '23/01/25', value: 40000 }, // Estimated 50 | { date: '15/01/25', value: 55000 }, // Estimated 51 | { date: '07/01/25', value: 80000 }, // Estimated 52 | { date: '30/12/24', value: 70000 }, // Estimated 53 | { date: '22/12/24', value: 60000 }, // Estimated 54 | { date: '14/12/24', value: 45000 }, // Estimated 55 | { date: '06/12/24', value: 55000 }, // Estimated 56 | ].reverse(); 57 | 58 | export const RevenueDataSmall = RevenueData.slice(0, 3); -------------------------------------------------------------------------------- /packages/vue/src/data/VisitorsData.ts: -------------------------------------------------------------------------------- 1 | export interface IVisitorsData { 2 | date: Date 3 | visitors: number 4 | } 5 | 6 | export const VisitorsCartegories = { 7 | visitors: { name: "Visitors", color: "#00dc82" }, 8 | } 9 | 10 | export const VisitorsData: IVisitorsData[] = [ 11 | { 12 | date: new Date('2024-01-01'), 13 | visitors: 321 14 | }, 15 | { 16 | date: new Date('2024-01-02'), 17 | visitors: 187 18 | }, 19 | { 20 | date: new Date('2024-01-03'), 21 | visitors: 456 22 | }, 23 | { 24 | date: new Date('2024-01-04'), 25 | visitors: 298 26 | }, 27 | { 28 | date: new Date('2024-01-05'), 29 | visitors: 512 30 | }, 31 | { 32 | date: new Date('2024-01-06'), 33 | visitors: 154 34 | }, 35 | { 36 | date: new Date('2024-01-07'), 37 | visitors: 387 38 | }, 39 | { 40 | date: new Date('2024-01-08'), 41 | visitors: 221 42 | }, 43 | { 44 | date: new Date('2024-01-09'), 45 | visitors: 498 46 | }, 47 | { 48 | date: new Date('2024-01-10'), 49 | visitors: 176 50 | }, 51 | { 52 | date: new Date('2024-01-11'), 53 | visitors: 354 54 | }, 55 | { 56 | date: new Date('2024-01-12'), 57 | visitors: 287 58 | }, 59 | { 60 | date: new Date('2024-01-13'), 61 | visitors: 521 62 | }, 63 | { 64 | date: new Date('2024-01-14'), 65 | visitors: 198 66 | }, 67 | { 68 | date: new Date('2024-01-15'), 69 | visitors: 476 70 | }, 71 | { 72 | date: new Date('2024-01-16'), 73 | visitors: 234 74 | }, 75 | { 76 | date: new Date('2024-01-17'), 77 | visitors: 399 78 | }, 79 | { 80 | date: new Date('2024-01-18'), 81 | visitors: 165 82 | }, 83 | { 84 | date: new Date('2024-01-19'), 85 | visitors: 532 86 | }, 87 | { 88 | date: new Date('2024-01-20'), 89 | visitors: 278 90 | }, 91 | { 92 | date: new Date('2024-01-21'), 93 | visitors: 411 94 | }, 95 | { 96 | date: new Date('2024-01-22'), 97 | visitors: 143 98 | }, 99 | { 100 | date: new Date('2024-01-23'), 101 | visitors: 366 102 | }, 103 | { 104 | date: new Date('2024-01-24'), 105 | visitors: 255 106 | }, 107 | { 108 | date: new Date('2024-01-25'), 109 | visitors: 501 110 | }, 111 | { 112 | date: new Date('2024-01-26'), 113 | visitors: 177 114 | }, 115 | { 116 | date: new Date('2024-01-27'), 117 | visitors: 433 118 | }, 119 | { 120 | date: new Date('2024-01-28'), 121 | visitors: 210 122 | }, 123 | { 124 | date: new Date('2024-01-29'), 125 | visitors: 488 126 | }, 127 | { 128 | date: new Date('2024-01-30'), 129 | visitors: 199 130 | }, 131 | { 132 | date: new Date('2024-01-31'), 133 | visitors: 377 134 | }, 135 | 136 | { 137 | date: new Date('2024-02-01'), 138 | visitors: 321 139 | }, 140 | { 141 | date: new Date('2024-02-02'), 142 | visitors: 187 143 | }, 144 | { 145 | date: new Date('2024-02-03'), 146 | visitors: 456 147 | }, 148 | { 149 | date: new Date('2024-02-04'), 150 | visitors: 298 151 | }, 152 | { 153 | date: new Date('2024-02-05'), 154 | visitors: 512 155 | }, 156 | { 157 | date: new Date('2024-02-06'), 158 | visitors: 154 159 | }, 160 | { 161 | date: new Date('2024-02-07'), 162 | visitors: 387 163 | }, 164 | { 165 | date: new Date('2024-02-08'), 166 | visitors: 221 167 | }, 168 | { 169 | date: new Date('2024-02-09'), 170 | visitors: 498 171 | }, 172 | { 173 | date: new Date('2024-02-10'), 174 | visitors: 176 175 | }, 176 | { 177 | date: new Date('2024-02-11'), 178 | visitors: 354 179 | }, 180 | { 181 | date: new Date('2024-02-12'), 182 | visitors: 287 183 | }, 184 | { 185 | date: new Date('2024-02-13'), 186 | visitors: 521 187 | }, 188 | { 189 | date: new Date('2024-02-14'), 190 | visitors: 198 191 | }, 192 | { 193 | date: new Date('2024-02-15'), 194 | visitors: 476 195 | }, 196 | { 197 | date: new Date('2024-02-16'), 198 | visitors: 234 199 | }, 200 | { 201 | date: new Date('2024-02-17'), 202 | visitors: 399 203 | }, 204 | { 205 | date: new Date('2024-02-18'), 206 | visitors: 165 207 | }, 208 | { 209 | date: new Date('2024-02-19'), 210 | visitors: 532 211 | }, 212 | { 213 | date: new Date('2024-02-20'), 214 | visitors: 278 215 | }, 216 | { 217 | date: new Date('2024-02-21'), 218 | visitors: 411 219 | }, 220 | { 221 | date: new Date('2024-02-22'), 222 | visitors: 143 223 | }, 224 | { 225 | date: new Date('2024-02-23'), 226 | visitors: 366 227 | }, 228 | { 229 | date: new Date('2024-02-24'), 230 | visitors: 255 231 | }, 232 | { 233 | date: new Date('2024-02-25'), 234 | visitors: 501 235 | }, 236 | { 237 | date: new Date('2024-02-26'), 238 | visitors: 177 239 | }, 240 | { 241 | date: new Date('2024-02-27'), 242 | visitors: 433 243 | }, 244 | { 245 | date: new Date('2024-02-28'), 246 | visitors: 210 247 | }, 248 | { 249 | date: new Date('2024-02-29'), 250 | visitors: 488 251 | }, 252 | { 253 | date: new Date('2024-02-30'), 254 | visitors: 199 255 | }, 256 | { 257 | date: new Date('2024-02-31'), 258 | visitors: 377 259 | } 260 | ] 261 | -------------------------------------------------------------------------------- /packages/vue/src/elements/Button.vue: -------------------------------------------------------------------------------- 1 | 6 | 14 | -------------------------------------------------------------------------------- /packages/vue/src/elements/Card.vue: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /packages/vue/src/elements/Dropdown.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 113 | -------------------------------------------------------------------------------- /packages/vue/src/elements/Logo.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/vue/src/elements/Table.vue: -------------------------------------------------------------------------------- 1 | // components/TanStackTable.vue 2 | 201 | 202 | -------------------------------------------------------------------------------- /packages/vue/src/elements/TopBar.vue: -------------------------------------------------------------------------------- 1 | 13 | 41 | -------------------------------------------------------------------------------- /packages/vue/src/index.ts: -------------------------------------------------------------------------------- 1 | 2 | import { createApp } from 'vue' 3 | import { createRouter, createWebHistory } from "vue-router"; 4 | 5 | import './assets/main.css' 6 | 7 | import App from './App.vue' 8 | 9 | const app = createApp(App) 10 | 11 | const router = createRouter({ 12 | routes: [ 13 | { 14 | path: '/', 15 | name: 'Home', 16 | component: () => import('./Homepage.vue') 17 | }, 18 | { 19 | path: '/area-charts', 20 | name: 'AreaCharts', 21 | component: () => import('./AreaChartPage.vue') 22 | }, 23 | { 24 | path: '/line-charts', 25 | name: 'LineCharts', 26 | component: () => import('./LineChartPage.vue') 27 | }, 28 | { 29 | path: '/bar-charts', 30 | name: 'BarCharts', 31 | component: () => import('./BarChartPage.vue') 32 | } 33 | ], 34 | history: createWebHistory(), 35 | }); 36 | 37 | app.use(router); 38 | 39 | app.mount('#app') 40 | 41 | export default { 42 | 43 | } -------------------------------------------------------------------------------- /packages/vue/src/utils.ts: -------------------------------------------------------------------------------- 1 | export function rgbToHex(rgb) { 2 | // Extract the RGB values using a regular expression 3 | const values = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 4 | if (!values) { 5 | return rgb; // Return the original if it's not in standard rgb() format 6 | } 7 | // Convert each RGB component to its hexadecimal representation 8 | return '#' + values.slice(1).map(val => { 9 | const hex = parseInt(val, 10).toString(16); 10 | return hex.padStart(2, '0'); 11 | }).join(''); 12 | } -------------------------------------------------------------------------------- /packages/vue/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "lib": ["ESNext", "DOM"], 7 | "esModuleInterop": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "strict": true, 10 | "skipLibCheck": true, 11 | "declaration": true, 12 | "outDir": "dist" 13 | }, 14 | "include": ["lib/**/*.ts", "lib/**/*.vue"], 15 | "exclude": ["node_modules", "dist"] 16 | } -------------------------------------------------------------------------------- /packages/vue/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { dirname, resolve } from 'node:path' 2 | import { fileURLToPath } from 'node:url' 3 | import { defineConfig } from 'vite' 4 | import dts from 'vite-plugin-dts' 5 | import tailwindcss from '@tailwindcss/vite' 6 | 7 | import type { ModuleFormat, OutputOptions } from 'rollup' 8 | 9 | const __dirname = dirname(fileURLToPath(import.meta.url)) 10 | 11 | import vue from '@vitejs/plugin-vue' 12 | 13 | const outputDefault = (format: ModuleFormat, extension: string): OutputOptions => ({ 14 | globals: { 15 | vue: 'Vue' 16 | }, 17 | preserveModules: true, 18 | preserveModulesRoot: './lib', 19 | format, 20 | entryFileNames: ({ name }) => { 21 | return `${name.replace('.vue', '')}.${extension}` 22 | }, 23 | exports: 'named', 24 | }) 25 | 26 | // https://vite.dev/config/ 27 | export default defineConfig({ 28 | build: { 29 | lib: { 30 | entry: resolve(__dirname, 'lib/index.ts'), 31 | name: 'vue-chrts', 32 | formats: ['es'], 33 | // the proper extensions will be added 34 | fileName: 'index.js', 35 | }, 36 | rollupOptions: { 37 | external: ['vue', '@unovis/vue', '@unovis/ts', 'vue-router', 'tailwindcss'], 38 | output: [outputDefault('es', 'js')], 39 | }, 40 | }, 41 | plugins: [vue(), dts(), tailwindcss()] 42 | }) 43 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - "packages/vue" 3 | - "packages/nuxt" 4 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "module": "ESNext", 5 | "moduleResolution": "bundler", 6 | "strict": true, 7 | "strictNullChecks": true, 8 | "allowSyntheticDefaultImports": true, 9 | "esModuleInterop": true, 10 | "skipLibCheck": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "composite": true 13 | }, 14 | "files": [] 15 | } 16 | --------------------------------------------------------------------------------