Skip to content

Commit 4369def

Browse files
graphierosgraphieros
committed
Improvement - Config - Update default configs
1 parent bc23456 commit 4369def

File tree

2 files changed

+172
-20
lines changed

2 files changed

+172
-20
lines changed

‎src/useConfig.js‎

Lines changed: 90 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -243,20 +243,24 @@ export function useConfig() {
243243
focusRangeRatio: 0.2,
244244
}
245245

246-
const MINIMAP = {
246+
const MINIMAP_BASE = {
247247
show: false,
248-
smooth: false,
249248
selectedColor: COLOR_BLUE,
250249
selectedColorOpacity: 0.2,
251-
lineColor: COLOR_BLACK,
252-
selectionRadius: 2,
253250
indicatorColor: COLOR_BLACK,
254251
verticalHandles: false,
255252
compact: true,
256-
merged: false,
257253
frameColor: COLOR_GREY
258254
}
259255

256+
const MINIMAP = {
257+
...MINIMAP_BASE,
258+
smooth: false,
259+
lineColor: COLOR_BLACK,
260+
selectionRadius: 2,
261+
merged: false,
262+
}
263+
260264
const vue_ui_stackbar = {
261265
loading: false, // v3
262266
debug: false, // v3
@@ -307,14 +311,29 @@ export function useConfig() {
307311
...LEGEND,
308312
position: 'bottom'
309313
},
310-
zoom: ZOOM,
314+
zoom: {
315+
...ZOOM,
316+
minimap: MINIMAP_BASE,
317+
preview: {
318+
enable: true,
319+
fill: '#CCCCCC50',
320+
stroke: '#6A6A6A',
321+
strokeWidth: 2,
322+
strokeDasharray: 0,
323+
},
324+
useDefaultFormat: true,
325+
timeFormat: 'yyyy-MM-dd HH:mm:ss', // When datetimeFormatter is enabled and useDefaultFormat is false
326+
customFormat: null // overrides all if callback => string
327+
},
311328
tooltip: {
312329
...TOOLTIP,
313330
showValue: true,
314331
showPercentage: true,
315332
roundingValue: 0,
316333
roundingPercentage: 0,
317-
showTimeLabel: true
334+
showTimeLabel: true,
335+
useDefaultTimeFormat: true,
336+
timeFormat: 'yyyy-MM-dd HH:mm:ss' // When datetimeFormatter is enabled and useDefaultFormat is false
318337
},
319338
highlighter: {
320339
color: COLOR_BLACK,
@@ -387,7 +406,10 @@ export function useConfig() {
387406
},
388407
fontSize: FONT._14,
389408
color: COLOR_BLACK,
390-
bold: false
409+
bold: false,
410+
showOnlyFirstAndLast: false,
411+
showOnlyAtModulo: false,
412+
modulo: 12
391413
}
392414
},
393415
y: {
@@ -2281,6 +2303,7 @@ export function useConfig() {
22812303
}
22822304

22832305
const vue_ui_candlestick = {
2306+
type: 'candlestick', // or 'ohlc'
22842307
debug: false, // v3
22852308
loading: false, // v3
22862309
responsive: false,
@@ -2308,7 +2331,22 @@ export function useConfig() {
23082331
show: true,
23092332
stroke: COLOR_GREY_LIGHT,
23102333
strokeWidth: 0.5,
2334+
verticalLines: {
2335+
show: false,
2336+
strokeDasharray: 0,
2337+
strokeWidth: 0.5,
2338+
stroke: COLOR_GREY_LIGHT
2339+
},
2340+
horizontalLines: {
2341+
show: false,
2342+
strokeDasharray: 0,
2343+
strokeWidth: 0.5,
2344+
stroke: COLOR_GREY_LIGHT
2345+
},
23112346
xAxis: {
2347+
ticks: {
2348+
show: true,
2349+
},
23122350
dataLabels: {
23132351
show: true,
23142352
fontSize: FONT._10,
@@ -2320,7 +2358,10 @@ export function useConfig() {
23202358
enable: true, // v3
23212359
angle: -30 // v3
23222360
},
2323-
datetimeFormatter: AXIS_DATE_FORMATTER
2361+
datetimeFormatter: AXIS_DATE_FORMATTER,
2362+
showOnlyFirstAndLast: false,
2363+
showOnlyAtModulo: false,
2364+
modulo: 12
23242365
},
23252366
},
23262367
yAxis: {
@@ -2365,13 +2406,29 @@ export function useConfig() {
23652406
widthRatio: 0.5
23662407
}
23672408
},
2368-
zoom: ZOOM,
2409+
zoom: {
2410+
...ZOOM,
2411+
minimap: MINIMAP_BASE,
2412+
preview: {
2413+
enable: true,
2414+
fill: '#CCCCCC50',
2415+
stroke: '#6A6A6A',
2416+
strokeWidth: 2,
2417+
strokeDasharray: 0,
2418+
},
2419+
useDefaultFormat: true,
2420+
timeFormat: 'yyyy-MM-dd HH:mm:ss', // When datetimeFormatter is enabled and useDefaultFormat is false
2421+
customFormat: null // overrides all if callback => string
2422+
},
23692423
title: TITLE,
23702424
tooltip: {
23712425
...TOOLTIP,
23722426
roundingValue: 0,
23732427
prefix: '',
23742428
suffix: '',
2429+
showChart: true,
2430+
useDefaultTimeFormat: true,
2431+
timeFormat: 'yyyy-MM-dd HH:mm:ss' // When datetimeFormatter is enabled and useDefaultFormat is false
23752432
}
23762433
},
23772434
translations: {
@@ -4368,6 +4425,8 @@ export function useConfig() {
43684425
}
43694426

43704427
const vue_ui_xy_canvas = {
4428+
debug: false,
4429+
loading: false,
43714430
responsive: false,
43724431
theme: '',
43734432
customPalette: [],
@@ -4398,14 +4457,32 @@ export function useConfig() {
43984457
min: null,
43994458
max: null,
44004459
},
4401-
zoom: ZOOM,
4460+
zoom: {
4461+
...ZOOM,
4462+
minimap: MINIMAP,
4463+
preview: { // v3
4464+
enable: false,
4465+
fill: '#CCCCCC50',
4466+
stroke: '#6A6A6A',
4467+
strokeWidth: 2,
4468+
strokeDasharray: 0,
4469+
},
4470+
useDefaultFormat: true,
4471+
timeFormat: 'yyyy-MM-dd HH:mm:ss', // When datetimeFormatter is enabled
4472+
customFormat: null // overrides all if callback => string
4473+
},
44024474
selector: {
44034475
show: true,
44044476
color: COLOR_BLACK,
44054477
dashed: true,
44064478
showHorizontalSelector: false,
44074479
},
4408-
tooltip: TOOLTIP,
4480+
tooltip: {
4481+
...TOOLTIP,
4482+
showTimeLabel: true,
4483+
useDefaultTimeFormat: true,
4484+
timeFormat: 'yyyy-MM-dd HH:mm:ss' // When datetimeFormatter is enabled and useDefaultFormat is false
4485+
},
44094486
legend: {
44104487
...LEGEND,
44114488
position: 'bottom',
@@ -4478,6 +4555,7 @@ export function useConfig() {
44784555
}
44794556
},
44804557
line: {
4558+
cutNullValues: true,
44814559
plots: {
44824560
show: true,
44834561
radiusRatio: 1

‎types/vue-data-ui.d.ts‎

Lines changed: 82 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2734,7 +2734,10 @@ declare module "vue-data-ui" {
27342734
VueUiAgePyramidExpose
27352735
>;
27362736

2737+
export type OHLC = [string | number, number, number, number, number];
2738+
27372739
export type VueUiCandlestickConfig = {
2740+
type?: 'ohlc' | 'candlesctick';
27382741
debug?: boolean;
27392742
loading?: boolean;
27402743
responsive?: boolean;
@@ -2762,7 +2765,22 @@ declare module "vue-data-ui" {
27622765
show?: boolean;
27632766
stroke?: string;
27642767
strokeWidth?: number;
2768+
verticalLines?: {
2769+
show?: boolean;
2770+
strokeDasharray?: number;
2771+
strokeWidth?: number;
2772+
stroke?: string;
2773+
};
2774+
horizontalLines?: {
2775+
show?: boolean;
2776+
strokeDasharray?: number;
2777+
strokeWidth?: number;
2778+
stroke?: string;
2779+
};
27652780
xAxis?: {
2781+
ticks?: {
2782+
show?: boolean;
2783+
};
27662784
dataLabels?: {
27672785
show?: boolean;
27682786
fontSize?: number;
@@ -2773,10 +2791,11 @@ declare module "vue-data-ui" {
27732791
autoRotate?: { // v3
27742792
enable?: boolean; // v3
27752793
angle?: number; // v3
2776-
}
2777-
};
2778-
timeLabels?: {
2779-
datetimeFormatter?: AxisDateFormatter
2794+
};
2795+
datetimeFormatter?: AxisDateFormatter;
2796+
showOnlyFirstAndLast?: boolean;
2797+
showOnlyAtModulo?: boolean;
2798+
modulo?: number;
27802799
};
27812800
};
27822801
yAxis?: {
@@ -2821,7 +2840,20 @@ declare module "vue-data-ui" {
28212840
widthRatio?: number;
28222841
};
28232842
};
2824-
zoom?: ChartZoom;
2843+
zoom?: ChartZoom & {
2844+
preview?: {
2845+
enable?: boolean;
2846+
fill?: string;
2847+
stroke?: string;
2848+
strokeWidth?: number;
2849+
strokeDasharray?: number;
2850+
};
2851+
useDefaultFormat?: boolean;
2852+
timeFormat?: string;
2853+
customFormat?:
2854+
| null
2855+
| ((params: MinimalCustomFormatParams<OHLC[]>) => string);
2856+
};
28252857
title?: ChartTitle;
28262858
tooltip?: ChartTooltip & {
28272859
roundingValue?: number;
@@ -2836,6 +2868,9 @@ declare module "vue-data-ui" {
28362868
VueUiCandlestickConfig
28372869
>
28382870
) => string);
2871+
useDefaultTimeFormat?: boolean;
2872+
timeFormat?: string;
2873+
showChart?: boolean;
28392874
};
28402875
};
28412876
translations?: {
@@ -2884,7 +2919,8 @@ declare module "vue-data-ui" {
28842919
export const VueUiCandlestick: DefineComponent<
28852920
{
28862921
config?: VueUiCandlestickConfig;
2887-
dataset: Array<Array<string | number>>;
2922+
dataset: OHLC[];
2923+
selectedXIndex?: number | null;
28882924
},
28892925
VueUiCandlestickExpose
28902926
>;
@@ -6985,6 +7021,8 @@ declare module "vue-data-ui" {
69857021
};
69867022

69877023
export type VueUiXyCanvasConfig = {
7024+
debug?: boolean;
7025+
loading?: boolean;
69887026
downsample?: {
69897027
threshold?: number;
69907028
};
@@ -7005,7 +7043,20 @@ declare module "vue-data-ui" {
70057043
min?: number | null;
70067044
max?: number | null;
70077045
};
7008-
zoom?: ChartZoom;
7046+
zoom?: ChartZoom & {
7047+
preview?: {
7048+
enable?: boolean;
7049+
fill?: string;
7050+
stroke?: string;
7051+
strokeWidth?: number;
7052+
strokeDasharray?: number;
7053+
};
7054+
useDefaultFormat?: boolean;
7055+
timeFormat?: string;
7056+
customFormat?:
7057+
| null
7058+
| ((params: MinimalCustomFormatParams<VueUiXyCanvasDatasetItem[]>) => string);
7059+
};
70097060
selector?: {
70107061
show?: boolean;
70117062
color?: string;
@@ -7022,6 +7073,9 @@ declare module "vue-data-ui" {
70227073
VueUiXyConfig
70237074
>
70247075
) => string);
7076+
showTimeLabel?: boolean;
7077+
useDefaultTimeFormat?: boolean;
7078+
timeFormat?: string;
70257079
};
70267080
legend?: {
70277081
backgroundColor?: string;
@@ -7102,6 +7156,7 @@ declare module "vue-data-ui" {
71027156
};
71037157
};
71047158
line?: {
7159+
cutNullValues?: boolean;
71057160
plots?: {
71067161
show?: boolean;
71077162
radiusRatio?: number;
@@ -7794,7 +7849,20 @@ declare module "vue-data-ui" {
77947849
backgroundColor?: string;
77957850
position?: 'bottom' | 'top';
77967851
};
7797-
zoom?: ChartZoom;
7852+
zoom?: ChartZoom & {
7853+
preview?: {
7854+
enable?: boolean;
7855+
fill?: string;
7856+
stroke?: string;
7857+
strokeWidth?: number;
7858+
strokeDasharray?: number;
7859+
};
7860+
useDefaultFormat?: boolean;
7861+
timeFormat?: string;
7862+
customFormat?:
7863+
| null
7864+
| ((params: MinimalCustomFormatParams<Array<VueUiStackbarDatapointItem & { absoluteIndex: number }>>) => string);
7865+
};
77987866
tooltip?: ChartTooltip & {
77997867
showValue?: boolean;
78007868
showPercentage?: boolean;
@@ -7810,6 +7878,8 @@ declare module "vue-data-ui" {
78107878
>
78117879
) => string);
78127880
showTimeLabel?: boolean;
7881+
useDefaultTimeFormat?: boolean;
7882+
timeFormat?: string;
78137883
};
78147884
highlighter?: {
78157885
color?: string;
@@ -7883,6 +7953,9 @@ declare module "vue-data-ui" {
78837953
fontSize?: number;
78847954
color?: string;
78857955
bold?: boolean;
7956+
showOnlyFirstAndLast?: boolean;
7957+
showOnlyAtModulo?: boolean;
7958+
modulo?: number;
78867959
};
78877960
};
78887961
y?: {
@@ -7946,6 +8019,7 @@ declare module "vue-data-ui" {
79468019
{
79478020
config?: VueUiStackbarConfig;
79488021
dataset: VueUiStackbarDatasetItem[];
8022+
selectedXIndex?: number | null;
79498023
},
79508024
VueUiStackbarExpose
79518025
>;

0 commit comments

Comments
 (0)