@wick-charts/vue 0.2.3 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wick-charts/vue",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "High-performance canvas timeseries charts for Vue — candlestick, line, bar, pie. Tree-shakeable, zero runtime deps.",
   "license": "MIT",
   "repository": {
@@ -45,7 +45,7 @@
     "vue": ">=3.3.0"
   },
   "devDependencies": {
-    "@wick-charts/core": "^0.2.3"
+    "@wick-charts/core": "^0.3.0"
   },
   "scripts": {
     "build": "vite build"

package/src/index.ts

@@ -1,4 +1,12 @@
-// Re-export core
+/**
+ * @wick-charts/vue — Vue bindings for Wick Charts.
+ *
+ * Everything importable from the library is re-exported here: components
+ * (`<ChartContainer>`, `<CandlestickSeries>`, …), option types, and themes.
+ * The underlying `@wick-charts/core` engine is bundled into this package —
+ * its source lives at
+ * https://github.com/mo4islona/wick-charts/tree/main/packages/core/src.
+ */
 
 export type {
   AxisBound,
@@ -46,6 +54,7 @@ export type {
 export {
   ChartInstance,
   andromeda,
+  autoGradient,
   ayuMirage,
   buildHoverSnapshots,
   buildLastSnapshots,
@@ -76,6 +85,9 @@ export {
   panda,
   peachCream,
   quietLight,
+  resolveAxisFontSize,
+  resolveAxisTextColor,
+  resolveCandlestickBodyColor,
   rosePineDawn,
   sandDune,
   solarizedLight,

package/src/ui/Crosshair.vue

@@ -17,7 +17,7 @@ const labelStyle = computed(() => ({
   // while still masking whatever tick sits underneath.
   background: `color-mix(in srgb, ${theme.value.crosshair.labelBackground} 80%, transparent)`,
   color: theme.value.crosshair.labelTextColor,
-  fontSize: theme.value.typography.axisFontSize + 'px',
+  fontSize: theme.value.axis.fontSize + 'px',
   fontFamily: theme.value.typography.fontFamily,
   fontVariantNumeric: 'tabular-nums' as const,
   padding: '2px 6px',

package/src/ui/InfoBar.vue

@@ -10,6 +10,7 @@ import {
   formatCompact,
   formatPriceAdaptive,
   formatTime,
+  resolveCandlestickBodyColor,
 } from '@wick-charts/core';
 import { computed, inject, onMounted, onUnmounted, ref, useSlots } from 'vue';
 
@@ -155,10 +156,11 @@ function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
               <span :style="{ color: theme.axis.textColor, opacity: 0.5, marginLeft: '5px' }">{{ cell.label }}</span>
               <span
                 :style="{
-                  color:
+                  color: resolveCandlestickBodyColor(
                     (s.data as OHLCData).close >= (s.data as OHLCData).open
-                      ? theme.candlestick.upColor
-                      : theme.candlestick.downColor,
+                      ? theme.candlestick.up.body
+                      : theme.candlestick.down.body,
+                  ),
                   fontWeight: 500,
                   marginLeft: '2px',
                 }"

package/src/ui/Legend.vue

@@ -196,7 +196,7 @@ function handleClick(item: LegendItem) {
         alignItems: position === 'right' ? 'flex-start' : 'center',
         justifyContent: position === 'right' ? 'flex-start' : 'center',
         fontFamily: theme.typography.fontFamily,
-        fontSize: theme.typography.axisFontSize + 'px',
+        fontSize: theme.axis.fontSize + 'px',
         color: theme.axis.textColor,
         pointerEvents: 'auto',
         flexShrink: 0,
@@ -217,7 +217,7 @@ function handleClick(item: LegendItem) {
         alignItems: position === 'right' ? 'flex-start' : 'center',
         justifyContent: position === 'right' ? 'flex-start' : 'center',
         fontFamily: theme.typography.fontFamily,
-        fontSize: theme.typography.axisFontSize + 'px',
+        fontSize: theme.axis.fontSize + 'px',
         color: theme.axis.textColor,
         pointerEvents: 'auto',
         flexShrink: 0,
@@ -258,7 +258,7 @@ function handleClick(item: LegendItem) {
         alignItems: position === 'right' ? 'flex-start' : 'center',
         justifyContent: position === 'right' ? 'flex-start' : 'center',
         fontFamily: theme.typography.fontFamily,
-        fontSize: theme.typography.axisFontSize + 'px',
+        fontSize: theme.axis.fontSize + 'px',
         color: theme.axis.textColor,
         pointerEvents: 'auto',
         flexShrink: 0,

package/src/ui/PieLegend.vue

@@ -113,7 +113,7 @@ const slices = computed<readonly SliceInfo[]>(() => {
         :style="{
           opacity: resolvedMode === 'percent' ? 1 : 0.5,
           fontWeight: resolvedMode === 'percent' ? 600 : 400,
-          fontSize: (resolvedMode === 'percent' ? theme.typography.fontSize : theme.typography.axisFontSize) + 'px',
+          fontSize: (resolvedMode === 'percent' ? theme.typography.fontSize : theme.axis.fontSize) + 'px',
           fontVariantNumeric: 'tabular-nums',
           minWidth: '40px',
           textAlign: 'right',

package/src/ui/TimeAxis.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatTime } from '@wick-charts/core';
+import { formatTime, resolveAxisFontSize, resolveAxisTextColor } from '@wick-charts/core';
 import { computed } from 'vue';
 
 import { useVisibleRange } from '../composables';
@@ -76,8 +76,8 @@ const tickData = computed(() => {
         position: 'absolute',
         left: chart.timeScale.timeToX(time) + 'px',
         transform: 'translateX(-50%)',
-        color: theme.axis.textColor,
-        fontSize: theme.typography.axisFontSize + 'px',
+        color: resolveAxisTextColor(theme, 'x'),
+        fontSize: resolveAxisFontSize(theme, 'x') + 'px',
         fontFamily: theme.typography.fontFamily,
         userSelect: 'none',
         whiteSpace: 'nowrap',

package/src/ui/Title.vue

@@ -47,7 +47,7 @@ if (!theme) {
         :style="{
           fontWeight: 400,
           color: theme.axis.textColor,
-          fontSize: theme.typography.axisFontSize + 'px',
+          fontSize: theme.axis.fontSize + 'px',
         }"
       >
         {{ sub }}

package/src/ui/Tooltip.vue

@@ -11,6 +11,7 @@ import {
   formatDate,
   formatPriceAdaptive,
   formatTime,
+  resolveCandlestickBodyColor,
 } from '@wick-charts/core';
 import { computed, onMounted, onUnmounted, ref, useSlots, watchEffect } from 'vue';
 
@@ -158,7 +159,7 @@ function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
       borderRadius: '8px',
       padding: '10px 14px',
       boxShadow: '0 4px 16px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06)',
-      fontSize: theme.typography.tooltipFontSize + 'px',
+      fontSize: theme.tooltip.fontSize + 'px',
       fontFamily: theme.typography.fontFamily,
       fontVariantNumeric: 'tabular-nums',
       color: theme.tooltip.textColor,
@@ -169,7 +170,7 @@ function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
   >
     <div
       :style="{
-        fontSize: theme.typography.axisFontSize + 'px',
+        fontSize: theme.axis.fontSize + 'px',
         color: theme.axis.textColor,
         marginBottom: '8px',
         paddingBottom: '6px',
@@ -195,10 +196,11 @@ function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
           <span
             :style="{
               fontWeight: 600,
-              color:
+              color: resolveCandlestickBodyColor(
                 (s.data as OHLCData).close >= (s.data as OHLCData).open
-                  ? theme.candlestick.upColor
-                  : theme.candlestick.downColor,
+                  ? theme.candlestick.up.body
+                  : theme.candlestick.down.body,
+              ),
               textAlign: 'right',
             }"
           >{{ effectiveFormat(row.val, row.field) }}</span>
@@ -245,7 +247,7 @@ function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
       padding: '10px 14px',
       boxShadow: '0 4px 16px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06)',
       fontFamily: theme.typography.fontFamily,
-      fontSize: theme.typography.tooltipFontSize + 'px',
+      fontSize: theme.tooltip.fontSize + 'px',
       fontVariantNumeric: 'tabular-nums',
       color: theme.tooltip.textColor,
       width: 'max-content',

package/src/ui/YAxis.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ValueFormatter } from '@wick-charts/core';
+import { resolveAxisFontSize, resolveAxisTextColor, type ValueFormatter } from '@wick-charts/core';
 import { computed, onMounted, onUnmounted, watch } from 'vue';
 
 import { useVisibleRange } from '../composables';
@@ -84,8 +84,8 @@ const allTicks = computed(() => {
         right: '8px',
         top: chart.yScale.valueToY(price) + 'px',
         transform: 'translateY(-50%)',
-        color: theme.axis.textColor,
-        fontSize: theme.typography.axisFontSize + 'px',
+        color: resolveAxisTextColor(theme, 'y'),
+        fontSize: resolveAxisFontSize(theme, 'y') + 'px',
         fontFamily: theme.typography.fontFamily,
         fontVariantNumeric: 'tabular-nums',
         userSelect: 'none',

package/src/ui/YLabel.vue

@@ -179,7 +179,7 @@ const effectiveFormat = computed<ValueFormatter>(() => {
           zIndex: 3,
           background: bgColor,
           color: theme.yLabel.textColor,
-          fontSize: theme.typography.yFontSize + 'px',
+          fontSize: theme.yLabel.fontSize + 'px',
           fontFamily: theme.typography.fontFamily,
           padding: '3px 8px',
           borderRadius: '3px',