{"_id":"@affino/charts-vue","_rev":"4-790a3e4e5087713c51efa57dde9c01ce","name":"@affino/charts-vue","dist-tags":{"latest":"0.1.4"},"versions":{"0.1.0":{"name":"@affino/charts-vue","version":"0.1.0","keywords":["affino","charts","vue","svg"],"author":{"name":"Anton Pavlov","email":"a.pavlov@affino.dev"},"license":"MIT","_id":"@affino/charts-vue@0.1.0","maintainers":[{"name":"affino","email":"anton.pavlov.personal@gmail.com"}],"homepage":"https://github.com/affinio/affinio/tree/main/packages/charts-vue#readme","bugs":{"url":"https://github.com/affinio/affinio/issues"},"dist":{"shasum":"aba951a92abb7a676bbb9df160c5f8307bd29f99","tarball":"https://registry.npmjs.org/@affino/charts-vue/-/charts-vue-0.1.0.tgz","fileCount":17,"integrity":"sha512-cEuYwBWVb5AerSGHWM50VtpkbkgoZEY3T5mW0DnyomzfRak+9ty7N1X2TKNci5zxG4u6OesheHmGk1t4T0ac3A==","signatures":[{"sig":"MEUCIA7rBL3aB03Urx7Pjgo4x2Vx8XXKLVe5PIn0cK1119UgAiEAje6a4AJHAsNlgm4/a2Re5ROXUADgIlidehvZyvIp0qM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":95463},"main":"dist/index.js","type":"module","_from":"file:affino-charts-vue-0.1.0.tgz","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"test":"vitest run --config ./vitest.config.ts","build":"pnpm --filter @affino/charts-core build && vite build && vue-tsc -p tsconfig.json --declaration --emitDeclarationOnly --outDir dist","type-check":"pnpm --filter @affino/charts-core build && vue-tsc -p tsconfig.json --noEmit"},"_npmUser":{"name":"affino","email":"anton.pavlov.personal@gmail.com"},"_resolved":"/tmp/cd4415a87fda90fe76501ba7433c2017/affino-charts-vue-0.1.0.tgz","_integrity":"sha512-cEuYwBWVb5AerSGHWM50VtpkbkgoZEY3T5mW0DnyomzfRak+9ty7N1X2TKNci5zxG4u6OesheHmGk1t4T0ac3A==","repository":{"url":"git+https://github.com/affinio/affinio.git","type":"git","directory":"packages/charts-vue"},"_npmVersion":"10.8.2","description":"Reusable Vue SVG chart rendering package for Affino","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.20.2","dependencies":{"@affino/charts-core":"0.1.0"},"_hasShrinkwrap":false,"peerDependencies":{"vue":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/charts-vue_0.1.0_1779187094741_0.8214435721482047","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@affino/charts-vue","version":"0.1.1","keywords":["affino","charts","vue","svg"],"author":{"name":"Anton Pavlov","email":"a.pavlov@affino.dev"},"license":"MIT","_id":"@affino/charts-vue@0.1.1","maintainers":[{"name":"affino","email":"anton.pavlov.personal@gmail.com"}],"homepage":"https://github.com/affinio/datagrid/tree/main/packages/charts-vue#readme","bugs":{"url":"https://github.com/affinio/datagrid/issues"},"dist":{"shasum":"3929067622fb7551fa5a37b8ae00fe3af64528e8","tarball":"https://registry.npmjs.org/@affino/charts-vue/-/charts-vue-0.1.1.tgz","fileCount":18,"integrity":"sha512-plA3JlaygwtBUWbOCIgjNnqSmYHW+jE+odCQfMJk++3n7jaUdg9yCHQTIhwOuLxgDgujrewqA0Y4QJSXvE4AkA==","signatures":[{"sig":"MEUCIBDaUsstJuF3zpu1gy+XAZsasdqrtYs6iZFeZTD3FbQ9AiEAoCN+pKqVJJ3wODk5gjA5uF7CN0glW021PqVAOyfg4pI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":112311},"main":"dist/index.js","type":"module","_from":"file:affino-charts-vue-0.1.1.tgz","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"scripts":{"test":"vitest run --config ./vitest.config.ts","build":"pnpm --filter @affino/charts-core build && vite build && vue-tsc -p tsconfig.json --declaration --emitDeclarationOnly --outDir dist","type-check":"pnpm --filter @affino/charts-core build && vue-tsc -p tsconfig.json --noEmit && vue-tsc -p tsconfig.examples.json --noEmit"},"_npmUser":{"name":"affino","email":"anton.pavlov.personal@gmail.com"},"_resolved":"/tmp/ff94a8cbc7067852b9f10e6e2174d279/affino-charts-vue-0.1.1.tgz","_integrity":"sha512-plA3JlaygwtBUWbOCIgjNnqSmYHW+jE+odCQfMJk++3n7jaUdg9yCHQTIhwOuLxgDgujrewqA0Y4QJSXvE4AkA==","repository":{"url":"git+https://github.com/affinio/datagrid.git","type":"git","directory":"packages/charts-vue"},"_npmVersion":"10.9.8","description":"Reusable Vue SVG chart rendering package for Affino","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.23.2","dependencies":{"@affino/charts-core":"0.1.1"},"_hasShrinkwrap":false,"peerDependencies":{"vue":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/charts-vue_0.1.1_1788210120994_0.747796228134002","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@affino/charts-vue","version":"0.1.3","keywords":["affino","charts","vue","svg"],"author":{"name":"Anton Pavlov","email":"a.pavlov@affino.dev"},"license":"MIT","_id":"@affino/charts-vue@0.1.3","maintainers":[{"name":"affino","email":"anton.pavlov.personal@gmail.com"}],"homepage":"https://github.com/affinio/datagrid/tree/main/packages/charts-vue#readme","bugs":{"url":"https://github.com/affinio/datagrid/issues"},"dist":{"shasum":"200ca90a5586a60ee540e7b3c9b50c7660b175c3","tarball":"https://registry.npmjs.org/@affino/charts-vue/-/charts-vue-0.1.3.tgz","fileCount":18,"integrity":"sha512-aLnqRbku2ljKWGrMe1SIOpXN79S2PJG6AvaRrn8IGj/CthuAJ7KwmHBbnTjwE5CKkMhwXsFrhJ6tpWOll1P6fg==","signatures":[{"sig":"MEYCIQC9s5L5ctinsJCpn5yIKfuvzk/Jl1MUTnCI7+0f8VgUpAIhAIwB0BfmGFL1DJlGc2dA7eYcRIwbVIoGN4WfLFT0jyId","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":122922},"main":"dist/index.js","type":"module","_from":"file:affino-charts-vue-0.1.3.tgz","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"scripts":{"test":"vitest run --config ./vitest.config.ts","build":"pnpm --filter @affino/charts-core build && vite build && vue-tsc -p tsconfig.json --declaration --emitDeclarationOnly --outDir dist","type-check":"pnpm --filter @affino/charts-core build && vue-tsc -p tsconfig.json --noEmit && vue-tsc -p tsconfig.examples.json --noEmit"},"_npmUser":{"name":"affino","email":"anton.pavlov.personal@gmail.com"},"_resolved":"/tmp/953299eb6220a7c3350e33f0c79b5c1b/affino-charts-vue-0.1.3.tgz","_integrity":"sha512-aLnqRbku2ljKWGrMe1SIOpXN79S2PJG6AvaRrn8IGj/CthuAJ7KwmHBbnTjwE5CKkMhwXsFrhJ6tpWOll1P6fg==","repository":{"url":"git+https://github.com/affinio/datagrid.git","type":"git","directory":"packages/charts-vue"},"_npmVersion":"10.9.8","description":"Reusable Vue SVG chart rendering package for Affino","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.23.2","dependencies":{"@affino/charts-core":"0.1.2"},"_hasShrinkwrap":false,"peerDependencies":{"vue":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/charts-vue_0.1.3_1788252847231_0.8487290479285503","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"_id":"@affino/charts-vue@0.1.4","bugs":{"url":"https://github.com/affinio/datagrid/issues"},"dist":{"shasum":"ddbb69ba95873766e1bae3d21761ed29318cca32","tarball":"https://registry.npmjs.org/@affino/charts-vue/-/charts-vue-0.1.4.tgz","fileCount":19,"integrity":"sha512-sApdtfVLeAYT+qkd0EtW69uelm98LYcL0oGMmV8i20MuA2YpcHxNogYT+lBmEXlvqlpu0aTg9suwR9Vx12QotQ==","signatures":[{"sig":"MEYCIQDKlPlJJR3iUubk8yDRBsuaZQeN2WAL3LXJdr16zLkh7wIhAKFuaThT4mGF6q0AgWN5YJZEZbQ4IocSgMmM35/BoI01","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICrO0e76W6nmFDJ2AwUEo9LFSiXoLLDYKnHD9hNjsc/nAiEA+WIN7FgOiSgjXqLJiHZiDbUL8hOuxCGTMHHbWQu4mVI="}],"unpackedSize":131587},"main":"dist/index.js","name":"@affino/charts-vue","type":"module","_from":"file:affino-charts-vue-0.1.4.tgz","types":"dist/index.d.ts","author":{"name":"Anton Pavlov","email":"a.pavlov@affino.dev"},"module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"license":"MIT","scripts":{"test":"vitest run --config ./vitest.config.ts","build":"pnpm --filter @affino/charts-core build && vite build && vue-tsc -p tsconfig.json --declaration --emitDeclarationOnly --outDir dist","type-check":"pnpm --filter @affino/charts-core build && vue-tsc -p tsconfig.json --noEmit && vue-tsc -p tsconfig.examples.json --noEmit"},"version":"0.1.4","_npmUser":{"name":"affino","email":"anton.pavlov.personal@gmail.com"},"homepage":"https://github.com/affinio/datagrid/tree/main/packages/charts-vue#readme","keywords":["affino","charts","vue","svg"],"_resolved":"/tmp/f5ade28dd8b08d9051cc9fcd10c0e264/affino-charts-vue-0.1.4.tgz","_integrity":"sha512-sApdtfVLeAYT+qkd0EtW69uelm98LYcL0oGMmV8i20MuA2YpcHxNogYT+lBmEXlvqlpu0aTg9suwR9Vx12QotQ==","repository":{"url":"git+https://github.com/affinio/datagrid.git","type":"git","directory":"packages/charts-vue"},"_npmVersion":"12.1.0","description":"Reusable Vue SVG chart rendering package for Affino","directories":{},"maintainers":[{"name":"affino","email":"anton.pavlov.personal@gmail.com"}],"sideEffects":["**/*.css"],"_nodeVersion":"24.21.0","dependencies":{"@affino/charts-core":"0.1.3"},"_hasShrinkwrap":false,"peerDependencies":{"vue":"^3.3.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/charts-vue_0.1.4_1790623324152_0.9085008260247522"}}},"time":{"created":"2026-05-19T10:38:14.636Z","modified":"2026-09-28T19:22:04.382Z","0.1.0":"2026-05-19T10:38:14.878Z","0.1.1":"2026-08-31T21:02:01.113Z","0.1.3":"2026-09-01T08:54:07.367Z","0.1.4":"2026-09-28T19:22:04.239Z"},"bugs":{"url":"https://github.com/affinio/datagrid/issues"},"author":{"name":"Anton Pavlov","email":"a.pavlov@affino.dev"},"license":"MIT","homepage":"https://github.com/affinio/datagrid/tree/main/packages/charts-vue#readme","keywords":["affino","charts","vue","svg"],"repository":{"url":"git+https://github.com/affinio/datagrid.git","type":"git","directory":"packages/charts-vue"},"description":"Reusable Vue SVG chart rendering package for Affino","maintainers":[{"name":"affino","email":"anton.pavlov.personal@gmail.com"}],"readme":"# @affino/charts-vue\n\nVue 3 SVG chart components backed by `@affino/charts-core`.\n\n## Install and styles\n\n```ts\nimport { AffinoBarChart, AffinoHlocChart, AffinoTimeSeriesChart } from \"@affino/charts-vue\"\nimport \"@affino/charts-vue/styles.css\"\n```\n\n`@affino/charts-vue/styles.css` is the stable public CSS entry. Do not import hashed `dist` assets. Component geometry and behavior are self-contained; the stylesheet supplies documented light/dark theme tokens.\n\n## HLOC\n\n```vue\n\n```\n\nHLOC renders the high-low range, an open marker to the left, and a close marker to the right. Green/red theme tokens indicate rising/falling points; flat points use the primary series token. The component is a generic visualization primitive and contains no trading, indicator, or transaction semantics.\n\n## Balance and equity\n\n```vue\n\n\n\n```\n\nThe component renders all series in one SVG plot. Its built-in legend identifies series and toggles visibility. Hover, keyboard focus, Left/Right/Home/End navigation, the default tooltip, the `tooltip` slot, `tooltip-change`, and the crosshair use public data only.\n\nChart accessibility uses the SVG aria-label and description. When an explicit accessible label is present, the package omits the browser-native SVG title popup so it does not compete with the chart tooltip.\n\n## Drawdown\n\nThe package accepts supplied drawdown data and never calculates it.\n\n```vue\n `${(value * 100).toFixed(1)}%` }\"\n :tooltip=\"{ formatValue: value => `${(value * 100).toFixed(1)}%` }\"\n/>\n```\n\n## Periodic returns\n\n```vue\n `${(value * 100).toFixed(1)}%`\"\n/>\n```\n\nPositive and negative bars use separate theme tokens, geometry includes zero, and a built-in hover/focus tooltip uses the same formatter.\n\n## Declarative time-series interaction\n\nTime-series interaction is declarative and enabled by default. The chart owns pointer capture, coordinate conversion, nearest-X resolution, crosshair rendering, tooltip positioning, and keyboard navigation:\n\n~~~vue\n\n~~~\n\nThe interaction pipeline is pointer client coordinates → chart-local coordinates → plot X → UTC domain value → nearest actual domain timestamp → shared crosshair and tooltip state. Nearest lookup uses binary search over the sorted shared visible domain. A tie resolves to the earlier timestamp. Pointer Y is not used for X resolution.\n\nThe shared domain is the union of visible series timestamps. Each visible series contributes an exact value at the resolved timestamp; missing observations are omitted, never interpolated. Hidden legend series do not participate. Duplicate or unsorted timestamps are rejected by the existing time-series validator.\n\n`tooltip` also accepts `enabled`, `formatTime`, `formatValue`, `followPointer`, `constrainToChart`, `offsetX`, and `offsetY`. The tooltip follows the raw pointer while its values and crosshair use the resolved domain X. The measured tooltip is placed inside the chart root with a preferred right/below placement, horizontal/vertical flipping, and final clamping. The overlay has `pointer-events: none`, so crossing it does not cause hover flicker.\n\nThe `tooltip-change` payload is typed and includes `timestamp`, `domainValue`, formatted entries, `anchor` (plot/SVG coordinates), `pointer` (client, chart-root, and plot coordinates), and `placement`. A custom slot owns presentation only:\n\n~~~vue\n\n \n\n~~~\n\nWhen focused, the chart initially selects the middle timestamp. Left/Right move through the shared domain; Home/End select the first/last timestamp. Pointer and keyboard input update the same active state. Pointer leave and blur clear the transient interaction.\n\n## Time and numeric axes\n\n`timeAxis` accepts `locale`, `targetTickCount`, `minTickSpacing`, `format`, and `formatOptions`. Timestamps are UTC Unix milliseconds and are never converted through local calendar parsing. `yAxis.includeZero` and `yAxis.format` control the generic numeric axis for positive, negative, zero, decimal, currency, and percentage values.\n\n## Themes\n\nUse `theme=\"light\"`, `theme=\"dark\"`, or a reactive theme object. Data does not need to be recreated when themes change.\n\n```vue\n\n```\n\nEquivalent stable CSS custom properties include `--affino-chart-background`, `--affino-chart-surface`, `--affino-chart-border`, `--affino-chart-grid`, `--affino-chart-axis`, `--affino-chart-text`, `--affino-chart-muted-text`, `--affino-chart-tooltip-background`, `--affino-chart-tooltip-text`, `--affino-chart-tooltip-secondary-text`, `--affino-chart-tooltip-border`, `--affino-chart-tooltip-shadow`, `--affino-chart-series-1` through `--affino-chart-series-5`, `--affino-chart-positive`, `--affino-chart-negative`, `--affino-chart-focus`, `--affino-chart-crosshair`, `--affino-chart-crosshair-width`, `--affino-chart-crosshair-dash`, and `--affino-chart-crosshair-opacity`. No internal selector or `!important` override is required.\n\n## Responsive behavior and reactivity\n\n`AffinoTimeSeriesChart` observes its own container by default, recalculating width-dependent geometry and tick density. Set `responsive=\"false\"` for a fixed `width`. Changes to series data, series membership, visibility, formatting, theme, height, width, and container width are reactive.\n\n## Additional components\n\nThe package continues to export `AffinoAreaChart`, `AffinoBarChart`, `AffinoChartFrame`, `AffinoChartLegend`, `AffinoHistogram`, `AffinoHlocChart`, `AffinoLineChart`, `AffinoMetricCard`, `AffinoPieChart`, and `AffinoScatterChart`.\n","readmeFilename":"README.md"}