Skip to content

Commit 2d2922a

Browse files
graphierosgraphieros
authored
Merge pull request #213 from graphieros/ft-212
Ft 212
2 parents cfce2f2 + 93c1a56 commit 2d2922a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+1282
-435
lines changed

‎README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -576,6 +576,27 @@ What happens when the button is clicked is taken care of by the component, excep
576576
</VueUiDonut>
577577
```
578578

579+
You can pass a callback trhough the config, for each button, to override the default behavior:
580+
581+
```ts
582+
const config = {
583+
userOptions: {
584+
callbacks: {
585+
pdf: (chartElement: HTMLElement) => {
586+
console.log(chartElement);
587+
},
588+
img: (base64: string) => {
589+
console.log(base64);
590+
},
591+
csv: (csvStr: string) => {
592+
console.log(csvStr);
593+
},
594+
// the other atributes also have the same names as the buttons
595+
},
596+
},
597+
};
598+
```
599+
579600
User options actions available per chart:
580601

581602
| Chart name | User options actions slot names |
@@ -1021,6 +1042,23 @@ const cumulativeMedZeroed = getCumulativeMedian({
10211042
});
10221043
```
10231044

1045+
### mergeConfigs
1046+
1047+
```js
1048+
import { mergeConfigs, getVueDataUiConfig } from "vue-data-ui";
1049+
const defaultConfig = getVueDataUiConfig("vue_ui_xy");
1050+
1051+
// Create a full config with user overrides
1052+
const merged = mergeConfigs({
1053+
defaultConfig,
1054+
userConfig: {
1055+
chart: {
1056+
backgroundColor: "#FF0000",
1057+
},
1058+
},
1059+
});
1060+
```
1061+
10241062
## PDF generation
10251063

10261064
This package requires jspdf as a peer dependency. Please install it in your project if you intend on using the PDF printing feature.

‎TestingArena/ArenaVueUiCandlestick.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ function alterDataset() {
6060
6161
const model = ref([
6262
{ key: 'responsive', def: false, type: 'checkbox'},
63+
{ key: 'responsiveProportionalSizing', def: false, type: 'checkbox'},
6364
{ key: 'userOptions.show', def: true, type: 'checkbox'},
6465
{ key: 'userOptions.buttons.pdf', def: true, type: 'checkbox'},
6566
{ key: 'userOptions.buttons.csv', def: true, type: 'checkbox'},

‎TestingArena/ArenaVueUiFunnel.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ const dataset = ref([
3333
3434
const model = ref([
3535
{ key: 'responsive', def: false, type: 'checkbox'},
36+
{ key: 'responsiveProportionalSizing', def: false, type: 'checkbox'},
37+
3638
{ key: 'useCssAnimation', def: true, type: 'checkbox' },
3739
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color' },
3840
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color' },

‎TestingArena/ArenaVueUiHistoryPlot.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ const dataset = ref([
3131
3232
const model = ref([
3333
{ key: 'responsive', def: false, type: 'checkbox' },
34+
{ key: 'responsiveProportionalSizing', def: false, type: 'checkbox' },
35+
3436
{ key: 'useCssAnimation', def: true, type: 'checkbox'},
3537
{ key: 'style.fontFamily', def: 'inherit', type: 'text' },
3638
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color' },

‎TestingArena/ArenaVueUiParallelCoordinatePlot.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const dataset = ref([
4848
])
4949
5050
const model = ref([
51+
{ key: 'responsiveProportionalSizing', def: false, type: 'checkbox'},
5152
{ key: 'style.chart.comments.show', def: true, type: 'checkbox'},
5253
{ key: 'style.chart.comments.showInTooltip', def: true, type: 'checkbox'},
5354
{ key: 'style.chart.comments.width', def: 200, type: 'number', min: 50, max: 400},

‎TestingArena/ArenaVueUiRelationCircle.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,8 @@ const dataset = ref([
8282
8383
const model = ref([
8484
{ key: 'responsive', def: false, type: 'checkbox'},
85+
{ key: 'responsiveProportionalSizing', def: false, type: 'checkbox'},
86+
8587
{ key: 'userOptions.show', def: true, type: 'checkbox'},
8688
{ key: 'userOptions.buttons.pdf', def: true, type: 'checkbox'},
8789
{ key: 'userOptions.buttons.img', def: true, type: 'checkbox'},

‎TestingArena/ArenaVueUiStripPlot.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,8 @@ const dataset = ref([
8989
9090
const model = ref([
9191
{ key: 'responsive', def: false, type: 'checkbox'},
92+
{ key: 'responsiveProportionalSizing', def: false, type: 'checkbox'},
93+
9294
{ key: 'useCssAnimation', def: true, type: 'checkbox'},
9395
{ key: 'userOptions.show', def: true, type: 'checkbox'},
9496
{ key: 'userOptions.buttons.pdf', def: true, type: 'checkbox'},

‎TestingArena/ArenaVueUiTimer.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import convertArrayToObject from "./convertModel";
77
88
const model = ref([
99
{ key: 'responsive', def: false, type: 'checkbox'},
10+
{ key: 'responsiveProportionalSizing', def: false, type: 'checkbox'},
11+
1012
{ key: 'type', def: 'stopwatch', type: 'select', options: ['stopwatch']},
1113
{ key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'},
1214
{ key: 'style.height', def: 300, type: 'number', min: 100, max: 1000},

‎TestingArena/ArenaVueUiXy.vue‎

Lines changed: 145 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -87,26 +87,89 @@ function createDs(n, m = 100) {
8787
// },
8888
// })
8989
90+
// const dataset = ref([
91+
// {
92+
// name: "Curved",
93+
// series: createDs(12),
94+
// type: "line",
95+
// smooth: true,
96+
// useArea: true,
97+
// useTag: 'start',
98+
// dataLabels: false,
99+
// autoScale: true
100+
// },
101+
// {
102+
// name: "Curved",
103+
// series: createDs(12),
104+
// type: "line",
105+
// smooth: false,
106+
// useArea: true,
107+
// useTag: 'end',
108+
// dataLabels: false,
109+
// },
110+
// ])
111+
90112
const dataset = ref([
91113
{
92-
name: "Curved",
93-
series: createDs(12),
114+
name: "A",
115+
series: [null, 100, 112, 221, 119, 75, null, 226, 243, 198, 156, 127, null],
94116
type: "line",
95-
smooth: true,
96-
useArea: true,
97-
useTag: 'start',
98117
dataLabels: false,
99-
autoScale: true
100118
},
101119
{
102-
name: "Curved",
103-
series: createDs(12),
120+
name: "B",
121+
series: [null, 75, 119, 201, 109, 85, null, 206, 223, 204, 146, 117, null],
104122
type: "line",
105-
smooth: false,
106-
useArea: true,
107-
useTag: 'end',
108123
dataLabels: false,
109124
},
125+
// {
126+
// name: "A",
127+
// series: [null, 100, 112, 221, 119, 75, 213, 226, 243, 198, 156, 127, null],
128+
// type: "bar",
129+
// dataLabels: false,
130+
// },
131+
// {
132+
// name: "B",
133+
// series: [null, 75, 119, 201, 109, 85, 203, 206, 223, 204, 146, 117, null],
134+
// type: "bar",
135+
// dataLabels: false,
136+
// },
137+
// {
138+
// name: "A",
139+
// series: [null, 100, 112, 221, 119, 75, 213, 226, 243, 198, 156, 127, null],
140+
// type: "bar",
141+
// dataLabels: false,
142+
// },
143+
// {
144+
// name: "B",
145+
// series: [null, 75, 119, 201, 109, 85, 203, 206, 223, 204, 146, 117, null],
146+
// type: "bar",
147+
// dataLabels: false,
148+
// },
149+
// {
150+
// name: "A",
151+
// series: [null, 100, 112, 221, 119, 75, 213, 226, 243, 198, 156, 127, null],
152+
// type: "bar",
153+
// dataLabels: false,
154+
// },
155+
// {
156+
// name: "B",
157+
// series: [null, 75, 119, 201, 109, 85, 203, 206, 223, 204, 146, 117, null],
158+
// type: "bar",
159+
// dataLabels: false,
160+
// },
161+
// {
162+
// name: "A",
163+
// series: [null, 100, 112, 221, 119, 75, 213, 226, 243, 198, 156, 127, null],
164+
// type: "bar",
165+
// dataLabels: false,
166+
// },
167+
// {
168+
// name: "B",
169+
// series: [null, 75, 119, 201, 109, 85, 203, 206, 223, 204, 146, 117, null],
170+
// type: "bar",
171+
// dataLabels: false,
172+
// },
110173
])
111174
112175
// const dataset = ref([
@@ -290,6 +353,8 @@ function toggleProps() {
290353
const model = ref([
291354
{ key: 'locale', def: '', type: 'select', options: ['', 'en-US', 'en-GB', 'fr-FR', 'de-DE', 'ar-SA'] },
292355
{ key: 'responsive', def: false, type: 'checkbox' },
356+
{ key: 'responsiveProportionalSizing', def: false, type: 'checkbox'},
357+
293358
{ key: 'chart.userOptions.show', def: true, type: 'checkbox', label: 'showUserOptions', category: 'general' },
294359
{ key: 'chart.userOptions.buttons.pdf', def: true, type: 'checkbox' },
295360
{ key: 'chart.userOptions.buttons.csv', def: true, type: 'checkbox' },
@@ -317,7 +382,7 @@ const model = ref([
317382
{ key: 'chart.zoom.enableRangeHandles', def: true, type: 'chexkbox' },
318383
{ key: 'chart.zoom.enableSelectionDrag', def: true, type: 'checkbox' },
319384
320-
{ key: 'chart.zoom.minimap.show', def: true, type: 'checkbox' },
385+
{ key: 'chart.zoom.minimap.show', def: false, type: 'checkbox' },
321386
{ key: 'chart.zoom.minimap.smooth', def: true, type: 'checkbox' },
322387
{ key: 'chart.zoom.minimap.selectedColor', def: '#1f77b4', type: 'color' },
323388
{ key: 'chart.zoom.minimap.selectedColorOpacity', def: 0.2, type: 'range', min: 0, max: 1, step: 0.01 },
@@ -380,21 +445,25 @@ const model = ref([
380445
{ key: 'chart.grid.labels.xAxisLabels.rotation', def: 0, type: 'range', min: -360, max: 360, label: 'rotation', category: 'grid' },
381446
{ key: 'chart.grid.labels.axis.xLabelOffsetY', def: 24, type: 'number', min: -100, max: 100 },
382447
383-
{ key: 'chart.grid.labels.xAxisLabels.showOnlyAtModulo', def: true, type: 'checkbox' },
448+
{ key: 'chart.grid.labels.xAxisLabels.showOnlyAtModulo', def: false, type: 'checkbox' },
384449
{ key: 'chart.grid.labels.xAxisLabels.modulo', def: 6, type: 'number' },
385450
386451
{ key: 'chart.grid.labels.yAxis.position', def: 'right', type: 'select', options: ['left', 'right'] },
387452
{ key: 'chart.grid.labels.yAxis.commonScaleSteps', def: 10, min: 0, max: 100, type: 'number' },
388-
{ key: 'chart.grid.labels.yAxis.useIndividualScale', def: true, type: "checkbox" },
453+
{ key: 'chart.grid.labels.yAxis.useIndividualScale', def: false, type: "checkbox" },
389454
{ key: 'chart.grid.labels.yAxis.stacked', def: false, type: 'checkbox' },
390455
{ key: 'chart.grid.labels.yAxis.gap', def: 12, min: 0, max: 200, type: 'number' },
391456
{ key: 'chart.grid.labels.yAxis.labelWidth', def: 48, min: 0, max: 100, type: 'number' },
392457
{ key: 'chart.grid.labels.yAxis.showBaseline', def: true, type: 'checkbox' },
393-
{ key: 'chart.grid.labels.yAxis.scaleMin', def: -90, type: 'number', min: -1000, max: 1000 },
394-
{ key: 'chart.grid.labels.yAxis.scaleMax', def: 90, type: 'number', min: -1000, max: 1000 },
458+
{ key: 'chart.grid.labels.yAxis.scaleMin', def: null, type: 'number', min: -1000, max: 1000 },
459+
{ key: 'chart.grid.labels.yAxis.scaleMax', def: null, type: 'number', min: -1000, max: 1000 },
395460
{ key: 'chart.grid.labels.yAxis.groupColor', def: '#1A1A1A', type: 'color' },
396461
{ key: 'chart.grid.labels.yAxis.scaleLabelOffsetX', def: 36, type: 'number', min: -100, max: 100 },
397462
{ key: 'chart.grid.labels.yAxis.scaleValueOffsetX', def: -20, type: 'number', min: -100, max: 100 },
463+
{ key: 'chart.grid.labels.yAxis.useNiceScale', def: true, type: 'checkbox'},
464+
465+
{ key: 'chart.grid.labels.yAxis.showCrosshairs', def: true, type: 'checkbox'},
466+
{ key: 'chart.grid.labels.xAxis.showCrosshairs', def: true, type: 'checkbox'},
398467
399468
{ key: 'chart.grid.labels.xAxis.showBaseline', def: true, type: 'checkbox' },
400469
{ key: 'chart.grid.labels.zeroLine.show', def: true, type: 'checkbox' },
@@ -446,7 +515,7 @@ const model = ref([
446515
{ key: 'bar.serieName.abbreviationSize', def: 3, type: 'number', min: 0, max: 12, label: ['serieName', 'abbreviation', 'is', 'size'], category: 'bar' },
447516
{ key: 'bar.serieName.useSerieColor', def: true, type: 'checkbox', label: ['serieName', 'textColor', 'is', 'series'], category: 'bar' },
448517
{ key: 'bar.serieName.color', def: '#1A1A1A', type: 'color', label: ['serieName', 'is', 'textColor'], category: 'bar' },
449-
{ key: 'bar.periodGap', def: 0.1, type: 'number', min: 0, max: 24 },
518+
{ key: 'bar.periodGap', def: 0.01, type: 'number', min: 0, max: 24 },
450519
{ key: 'bar.border.useSerieColor', def: false, type: 'checkbox' },
451520
{ key: 'bar.border.stroke', def: '#FFFFFF', type: 'color' },
452521
{ key: 'bar.border.strokeWidth', def: 1, type: 'number', min: 0, max: 12, step: 0.5 },
@@ -507,7 +576,8 @@ const model = ref([
507576
{ key: 'chart.userOptions.print.allowTaint', def: true, type: 'checkbox' },
508577
{ key: 'chart.userOptions.print.backgroundColor', def: '#FFFFFF', type: 'color' },
509578
{ key: 'chart.userOptions.print.useCORS', def: true, type: 'checkbox' },
510-
{ key: 'chart.userOptions.print.scale', def: 2, type: 'number', min: 1, max: 5 }
579+
{ key: 'chart.userOptions.print.scale', def: 2, type: 'number', min: 1, max: 5 },
580+
511581
]);
512582
513583
const testCustomTooltip = ref(false);
@@ -600,6 +670,46 @@ const config = computed(() => {
600670
chart: {
601671
...c.chart,
602672
// Attempt a scale groups
673+
annotations: [
674+
{
675+
show: true,
676+
yAxis: {
677+
yTop: 125,
678+
yBottom: 70,
679+
label: {
680+
text: 'average',
681+
textAnchor: 'start', // or end
682+
position: 'start', // or end
683+
offsetY: 0,
684+
offsetX: 0,
685+
border: {
686+
stroke: '#FF0000',
687+
strokeWidth: 1,
688+
rx: 0,
689+
ry: 0
690+
},
691+
padding: {
692+
top: 5,
693+
right: 10,
694+
bottom: 5,
695+
left: 10
696+
},
697+
fontSize: 14,
698+
color: '#1A1A1A',
699+
backgroundColor: '#E1E5E8'
700+
},
701+
line: {
702+
stroke: '#1A1A1A',
703+
strokeWidth: 1,
704+
strokeDasharray: 2,
705+
},
706+
area: {
707+
fill: '#E1E5E8',
708+
opacity: 50
709+
}
710+
}
711+
}
712+
],
603713
scaleGroups: {
604714
enabled: true,
605715
groups: [
@@ -609,6 +719,17 @@ const config = computed(() => {
609719
},
610720
userOptions: {
611721
...c.chart.userOptions,
722+
callbacks: {
723+
img: (b64) => {
724+
console.log(b64)
725+
},
726+
csv: (xls) => {
727+
console.log(xls)
728+
},
729+
pdf: (chart) => {
730+
console.log(chart)
731+
}
732+
},
612733
print: {
613734
...c.chart.userOptions.print,
614735
// onclone: (doc) => {
@@ -728,7 +849,7 @@ function selectTimeLabel(data) {
728849
responsive: true,
729850
}" @selectTimeLabel="selectTimeLabel">
730851

731-
<template #pattern="{ seriesIndex, patternId }">
852+
<!-- <template #pattern="{ seriesIndex, patternId }">
732853
<pattern v-if="seriesIndex === 0" :id="patternId" width="70" height="8" patternTransform="scale(2)"
733854
patternUnits="userSpaceOnUse" opacity="0.5">
734855
<rect width="100%" height="100%" fill="#FFFFFF20" />
@@ -750,14 +871,14 @@ function selectTimeLabel(data) {
750871
<path fill="#f44034"
751872
d="M21.63 0 20 1.63v1.54L23.15 0zm3.08 0L20 4.71v1.54L26.25 0zm3.08 0L20 7.79v1.53L29.32 0zm3.07 0L20 10.86v1.54L32.4 0zm3.08 0L20 13.94v1.54L35.48 0zm3.08 0L20 17.02v1.54L38.55 0zM40 .1l-20 20L.1 40h1.53L40 1.63zm0 3.07L3.17 40h1.54L40 4.71zm0 3.08L6.25 40h1.54L40 7.79zm0 3.07L9.32 40h1.54L40 10.86zm0 3.08L12.4 40h1.54L40 13.94zm0 3.08L15.48 40h1.54L40 17.02zm0 3.08L18.55 40h1.55L40 20.1V20zM1.63 20 0 21.63v1.54L3.15 20zm3.08 0L0 24.71v1.54L6.25 20zm3.08 0L0 27.79v1.53L9.32 20zm3.07 0L0 30.86v1.54L12.4 20zm3.08 0L0 33.94v1.54L15.48 20zm3.08 0L0 37.02v1.54L18.55 20zM40 21.63 21.63 40h1.54L40 23.17zm0 3.08L24.71 40h1.54L40 26.25zm0 3.08L27.79 40h1.53L40 29.33zm0 3.08L30.86 40h1.54l7.6-7.6zm0 3.07L33.94 40h1.54L40 35.48zm0 3.08L37.02 40h1.54L40 38.56zM9.32 0l-.8.8v1.54L10.86 0zm2.16.92L8.52 3.88v1.54l2.96-2.96zm0 3.08L8.52 6.96V8.5l2.96-2.96zm0 3.08-1.44 1.44-2.96 2.96h1.44v.1l.1-.1 2.86-2.87.1-.09h-.1zM.8 8.52l-.8.8v1.54l2.34-2.34zm3.08 0L.92 11.48h1.54l2.96-2.96zm3.08 0L4 11.48h1.54L8.5 8.52zm6.16 0-1.64 1.63-1.33 1.33-1.63 1.63v1.54l2.96-2.96v-.21h.21l2.96-2.96zm3.07 0-2.96 2.96h1.54l2.96-2.96zm3.08 0-2.96 2.96h1.53L20 9.32v-.8zm.73 2.34-.62.62H20zm-8.52 2.37-2.96 2.96v1.54l2.96-2.96zm0 3.07-2.96 2.97V40h2.96V20H9.32l2.16-2.16z" />
752873
</pattern>
753-
</template>
874+
</template> -->
754875

755876
<!-- <template #chart-background>
756877
<div style="width: 100%; height:100%; background: radial-gradient(at top left, red, white)">
757878
</div>
758879
</template> -->
759880

760-
<template #time-label="{ x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
881+
<!-- <template #time-label="{ x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
761882
<g @click="() => selectTimeLabel({ x, y, fontSize, absoluteIndex })">
762883
<text :x="x" :y="y" :font-size="fontSize" :text-anchor="textAnchor" :fill="fill">
763884
{{ content }}
@@ -766,7 +887,7 @@ function selectTimeLabel(data) {
766887
{{ content }}
767888
</text>
768889
</g>
769-
</template>
890+
</template> -->
770891

771892
<template #plot-comment="{ plot }">
772893
<div :style="`font-size: 12px; color:${plot.color}; text-align:center`">
@@ -801,7 +922,7 @@ function selectTimeLabel(data) {
801922
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
802923
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
803924
</template> -->
804-
<template #time-label="{ x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
925+
<!-- <template #time-label="{ x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
805926
<g @click="() => selectTimeLabel({ x, y, fontSize, absoluteIndex })">
806927
<text :x="x" :y="y" :font-size="fontSize" :text-anchor="textAnchor" :fill="fill">
807928
{{ content }}
@@ -811,7 +932,7 @@ function selectTimeLabel(data) {
811932
{{ content }}
812933
</text>
813934
</g>
814-
</template>
935+
</template> -->
815936
<template #optionPdf>
816937
PRINT PDF
817938
</template>

0 commit comments

Comments
 (0)