Skip to content

Commit 1e6baa1

Browse files
graphierosgraphieros
committed
Dev environment - Improve DX in manual-testing app
1 parent 280d7dc commit 1e6baa1

Some content is hidden

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

59 files changed

+5757
-4824
lines changed

‎TestingArena/ArenaVueUi3dBar.vue‎

Lines changed: 105 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,25 @@ import LocalVueDataUi from '../src/components/vue-data-ui.vue';
55
import Box from "./Box.vue";
66
import convertArrayToObject from "./convertModel";
77
import { useArena } from "../src/useArena";
8-
98
import { VueUi3dBar } from "vue-data-ui";
109
import { VueUi3dBar as VueUi3dBarTreeshaken } from "vue-data-ui/vue-ui-3d-bar";
1110
import ConfigKnobs from "./ConfigKnobs.vue";
11+
import { useConfigurationControls } from "./createConfigModel";
12+
import { useConfig } from "../src/useConfig"
1213
1314
1415
const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
16+
const { vue_ui_3d_bar: DEFAULT_CONFIG } = useConfig();
17+
18+
const {
19+
CHECKBOX,
20+
NUMBER,
21+
RANGE,
22+
TEXT,
23+
COLOR,
24+
SELECT,
25+
createModel
26+
} = useConfigurationControls(DEFAULT_CONFIG);
1527
1628
const datasets = ref({
1729
simple: undefined,
@@ -87,86 +99,98 @@ onMounted(() => {
8799
}, 4000)
88100
})
89101
90-
const model = ref([
91-
{ key: 'debug', def: true, type: 'checkbox'},
92-
{ key: 'loading', def: false, type: 'checkbox'},
93-
{ key: 'responsive', def: false, type: 'checkbox'},
94-
{ key: 'useCssAnimation', def: false, type: 'checkbox'},
95-
{ key: 'userOptions.show', def: true, type: 'checkbox'},
96-
{ key: 'userOptions.buttons.pdf', def: true, type: 'checkbox'},
97-
{ key: 'userOptions.buttons.img', def: true, type: 'checkbox'},
98-
{ key: 'userOptions.buttons.csv', def: true, type: 'checkbox'},
99-
{ key: 'userOptions.buttons.table', def: true, type: 'checkbox'},
100-
{ key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox'},
101-
{ key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
102-
{ key: 'userOptions.showOnChartHover', def: true, type: 'checkbox'},
103-
{ key: 'userOptions.keepStateOnChartLeave', def: true, type: 'checkbox'},
104-
105-
{ key: 'userOptions.print.scale', def: 2, type: 'number', min: 1, max: 5},
106-
{ key: 'userOptions.print.allowTaint', def: true, type: 'checkbox'},
107-
{ key: 'userOptions.print.useCORS', def: true, type: 'checkbox'},
108-
{ key: 'userOptions.print.backgroundColor', def: '#FFFFFF' },
109-
110-
{ key: 'style.fontFamily', def: 'inherit', type: 'text'},
111-
{ key: 'style.shape', def: 'bar', type: 'select', options: ['bar', 'tube']},
112-
{ key: 'style.chart.animation.use', def: true, type: 'checkbox'},
113-
{ key: 'style.chart.animation.speed', def: 1, type: 'number', min: 0.1, max: 2, step: 0.1},
114-
{ key: 'style.chart.animation.acceleration', def: 1, type: 'number', min: 0.1, max: 10, step: 0.1},
115-
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
116-
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
117-
{ key: 'style.chart.bar.color', def: '#6376DD', type: 'color'},
118-
{ key: 'style.chart.bar.stroke', def: '#6376DD', type: 'color'},
119-
{ key: 'style.chart.bar.strokeWidth', def: 1, type: 'number', min: 0, max: 12, step: 0.5},
120-
{ key: 'style.chart.bar.shadeColor', def: '#1A1A1A', type: 'color'},
121-
{ key: 'style.chart.box.stroke', def: '#CCCCCC', type: 'color'},
122-
{ key: 'style.chart.box.strokeWidth', def: 1, type: 'number', min: 0, max: 12, step: 0.5},
123-
{ key: 'style.chart.box.strokeDasharray', def: 2, type: 'number', min: 0, max: 100},
124-
{ key: 'style.chart.box.dimensions.width', def: 128, type: 'number', min: 64, max: 300},
125-
{ key: 'style.chart.box.dimensions.height', def: 256, type: 'number', min: 64, max: 600},
126-
{ key: 'style.chart.box.dimensions.top', def: 27, type: 'number', min: 0, max: 100},
127-
{ key: 'style.chart.box.dimensions.bottom', def: 9, type: 'number', min: 0, max: 100},
128-
{ key: 'style.chart.box.dimensions.left', def: 24, type: 'number', min: 0, max: 100},
129-
{ key: 'style.chart.box.dimensions.right', def: 24, type: 'number', min: 0, max: 100},
130-
{ key: 'style.chart.box.dimensions.perspective', def: 18, type: 'number', min: 0, max: 100},
131-
{ key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
132-
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},
133-
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 48},
134-
{ key: 'style.chart.title.bold', def: true, type: 'checkbox'},
135-
{ key: 'style.chart.title.subtitle.color', def: '#CCCCCC', type: 'color'},
136-
{ key: 'style.chart.title.subtitle.text', def: 'Lorem ipsum dolor sit amet', type: "text"},
137-
{ key: 'style.chart.title.subtitle.fontSize', def: 16, type: 'number', min: 8, max: 48},
138-
{ key: 'style.chart.title.subtitle.bold', def: false, type: 'checkbox'},
139-
{ key: 'style.chart.legend.showDefault', def: true, type: 'checkbox'},
140-
{ key: 'style.chart.legend.fontSize', def: 10, type: 'number', min: 8, max: 48},
141-
{ key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color'},
142-
{ key: 'style.chart.legend.bold', def: false, type: 'checkbox'},
143-
{ key: 'style.chart.legend.roundingValue', def: 2, type: 'number', min: 0, max: 12},
144-
{ key: 'style.chart.legend.roundingPercentage', def:2, type: 'number', min: 0, max: 12},
145-
{ key: 'style.chart.legend.prefix', def: 'P', type: 'text'},
146-
{ key: 'style.chart.legend.suffix', def: 'S', type: 'text'},
147-
{ key: 'style.chart.legend.hideUnderPercentage', def: 3, type: 'number', min: 1, max: 20},
148-
{ key: 'style.chart.dataLabel.show', def: true, type: 'checkbox'},
149-
{ key: 'style.chart.dataLabel.bold', def: true, type: 'checkbox'},
150-
{ key: 'style.chart.dataLabel.color', def: '#1A1A1A', type: 'color'},
151-
{ key: 'style.chart.dataLabel.fontSize', def: 12, type: 'number'},
152-
{ key: 'style.chart.dataLabel.rounding', def: 1, type: 'number', min: 0, max: 12},
153-
154-
{ key: 'table.show', def: false, type: 'checkbox'},
155-
{ key: 'table.useDialog', def: true, type: 'checkbox'},
156-
157-
{ key: 'table.responsiveBreakpoint', def: 300, type: 'number', min: 300, max: 800},
158-
{ key: 'table.ccolumnNames.series', def: 'Series', type: 'text'},
159-
{ key: 'table.ccolumnNames.value', def: 'Value', type: 'text'},
160-
{ key: 'table.ccolumnNames.percentage', def: 'Percentage', type: 'text'},
161-
{ key: 'table.th.backgroundColor', def: '#FFFFFF', type: 'color'},
162-
{ key: 'table.th.color', def: '#1A1A1A', type: 'color'},
163-
{ key: 'table.th.outline', def: 'none', type: 'text'},
164-
{ key: 'table.td.backgroundColor', def: '#FFFFFF', type: 'color'},
165-
{ key: 'table.td.color', def: '#1A1A1A', type: 'color'},
166-
{ key: 'table.td.outline', def: 'none', type: 'text'},
167-
{ key: 'table.td.roundingValue', def: 2, type: 'number', min: 0, max: 12},
168-
{ key: 'table.td.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
169-
])
102+
const model = createModel([
103+
CHECKBOX("debug", { def: true }),
104+
CHECKBOX("loading", { def: false }),
105+
CHECKBOX("responsive", { def: false }),
106+
CHECKBOX("useCssAnimation", { def: false }),
107+
108+
CHECKBOX("userOptions.show", { def: true }),
109+
CHECKBOX("userOptions.showOnChartHover", { def: true }),
110+
CHECKBOX("userOptions.keepStateOnChartLeave", { def: true }),
111+
CHECKBOX("userOptions.buttons.pdf", { def: true }),
112+
CHECKBOX("userOptions.buttons.img", { def: true }),
113+
CHECKBOX("userOptions.buttons.csv", { def: true }),
114+
CHECKBOX("userOptions.buttons.table", { def: true }),
115+
CHECKBOX("userOptions.buttons.fullscreen", { def: true }),
116+
SELECT("userOptions.position", ["left", "right"], { def: "right" }),
117+
118+
NUMBER("userOptions.print.scale", { def: 2, min: 1, max: 5 }),
119+
CHECKBOX("userOptions.print.allowTaint", { def: true }),
120+
CHECKBOX("userOptions.print.useCORS", { def: true }),
121+
COLOR("userOptions.print.backgroundColor", { def: "#FFFFFF" }),
122+
123+
TEXT("style.fontFamily", { def: "inherit" }),
124+
SELECT("style.shape", ["bar", "tube"], { def: "bar" }),
125+
126+
CHECKBOX("style.chart.animation.use", { def: true }),
127+
NUMBER("style.chart.animation.speed", { def: 1, min: 0.1, max: 2, step: 0.1 }),
128+
NUMBER("style.chart.animation.acceleration", { def: 1, min: 0.1, max: 10, step: 0.1 }),
129+
130+
COLOR("style.chart.backgroundColor", { def: "#FFFFFF" }),
131+
COLOR("style.chart.color", { def: "#1A1A1A" }),
132+
133+
COLOR("style.chart.bar.color", { def: "#6376DD" }),
134+
COLOR("style.chart.bar.stroke", { def: "#6376DD" }),
135+
NUMBER("style.chart.bar.strokeWidth", { def: 1, min: 0, max: 12, step: 0.5 }),
136+
COLOR("style.chart.bar.shadeColor", { def: "#1A1A1A" }),
137+
138+
COLOR("style.chart.box.stroke", { def: "#CCCCCC" }),
139+
NUMBER("style.chart.box.strokeWidth", { def: 1, min: 0, max: 12, step: 0.5 }),
140+
NUMBER("style.chart.box.strokeDasharray", { def: 2, min: 0, max: 100 }),
141+
142+
NUMBER("style.chart.box.dimensions.width", { def: 128, min: 64, max: 300 }),
143+
NUMBER("style.chart.box.dimensions.height", { def: 256, min: 64, max: 600 }),
144+
NUMBER("style.chart.box.dimensions.top", { def: 27, min: 0, max: 100 }),
145+
NUMBER("style.chart.box.dimensions.bottom", { def: 9, min: 0, max: 100 }),
146+
NUMBER("style.chart.box.dimensions.left", { def: 24, min: 0, max: 100 }),
147+
NUMBER("style.chart.box.dimensions.right", { def: 24, min: 0, max: 100 }),
148+
NUMBER("style.chart.box.dimensions.perspective", { def: 18, min: 0, max: 100 }),
149+
150+
TEXT("style.chart.title.text", { def: "Lorem ipsum dolor sit amet" }),
151+
COLOR("style.chart.title.color", { def: "#1A1A1A" }),
152+
NUMBER("style.chart.title.fontSize", { def: 20, min: 8, max: 48 }),
153+
CHECKBOX("style.chart.title.bold", { def: true }),
154+
155+
COLOR("style.chart.title.subtitle.color", { def: "#CCCCCC" }),
156+
TEXT("style.chart.title.subtitle.text", { def: "Lorem ipsum dolor sit amet" }),
157+
NUMBER("style.chart.title.subtitle.fontSize", { def: 16, min: 8, max: 48 }),
158+
CHECKBOX("style.chart.title.subtitle.bold", { def: false }),
159+
160+
CHECKBOX("style.chart.legend.showDefault", { def: true }),
161+
NUMBER("style.chart.legend.fontSize", { def: 10, min: 8, max: 48 }),
162+
COLOR("style.chart.legend.color", { def: "#1A1A1A" }),
163+
CHECKBOX("style.chart.legend.bold", { def: false }),
164+
NUMBER("style.chart.legend.roundingValue", { def: 2, min: 0, max: 12 }),
165+
NUMBER("style.chart.legend.roundingPercentage", { def: 2, min: 0, max: 12 }),
166+
TEXT("style.chart.legend.prefix", { def: "P" }),
167+
TEXT("style.chart.legend.suffix", { def: "S" }),
168+
NUMBER("style.chart.legend.hideUnderPercentage", { def: 3, min: 1, max: 20 }),
169+
170+
CHECKBOX("style.chart.dataLabel.show", { def: true }),
171+
CHECKBOX("style.chart.dataLabel.bold", { def: true }),
172+
COLOR("style.chart.dataLabel.color", { def: "#1A1A1A" }),
173+
NUMBER("style.chart.dataLabel.fontSize", { def: 12 }),
174+
NUMBER("style.chart.dataLabel.rounding", { def: 1, min: 0, max: 12 }),
175+
176+
CHECKBOX("table.show", { def: false }),
177+
CHECKBOX("table.useDialog", { def: true }),
178+
179+
NUMBER("table.responsiveBreakpoint", { def: 300, min: 300, max: 800 }),
180+
TEXT("table.columnNames.series", { def: "Series" }),
181+
TEXT("table.columnNames.value", { def: "Value" }),
182+
TEXT("table.columnNames.percentage", { def: "Percentage" }),
183+
184+
COLOR("table.th.backgroundColor", { def: "#FFFFFF" }),
185+
COLOR("table.th.color", { def: "#1A1A1A" }),
186+
TEXT("table.th.outline", { def: "none" }),
187+
188+
COLOR("table.td.backgroundColor", { def: "#FFFFFF" }),
189+
COLOR("table.td.color", { def: "#1A1A1A" }),
190+
TEXT("table.td.outline", { def: "none" }),
191+
NUMBER("table.td.roundingValue", { def: 2, min: 0, max: 12 }),
192+
NUMBER("table.td.roundingPercentage", { def: 2, min: 0, max: 12 })
193+
]);
170194
171195
const themeOptions = ref([
172196
"",

0 commit comments

Comments
 (0)