Skip to content

Commit 1c19832

Browse files
graphierosgraphieros
committed
Other - Minor updates
1 parent 4369def commit 1c19832

File tree

4 files changed

+59
-184
lines changed

4 files changed

+59
-184
lines changed

‎TestingArena/ArenaVueUiXy.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -398,7 +398,7 @@ onMounted(() => {
398398
{
399399
name: "Serie A",
400400
series: createDs(35),
401-
type: "bar",
401+
type: "plot",
402402
dataLabels: false,
403403
smooth: true,
404404
useArea: true,
@@ -837,7 +837,7 @@ const model = ref([
837837
{ key: 'line.labels.rounding', def: 0, type: 'number', min: 0, max: 6, label: 'rounding', category: 'line' },
838838
{ key: 'line.labels.color', def: '#1A1A1A', type: 'color', label: 'textColor', category: 'line' },
839839
{ key: 'line.area.useGradient', def: true, type: 'checkbox', label: 'useGradient', category: 'line' },
840-
{ key: 'line.area.opacity', def: 20, type: 'range', min: 0, max: 100, label: 'opacity', category: 'line' },
840+
{ key: 'line.area.opacity', def: 30, type: 'range', min: 0, max: 100, label: 'opacity', category: 'line' },
841841
842842
{ key: 'line.dot.useSerieColor', def: false, type: 'checkbox' },
843843
{ key: 'line.dot.fill', def: '#FFFFFF', type: 'color' },
@@ -1184,7 +1184,7 @@ const config = computed(() => {
11841184
},
11851185
zoom: {
11861186
...c.chart.zoom,
1187-
useDefaultFormat: true,
1187+
useDefaultFormat: false,
11881188
timeFormat: 'yyyy-MM-dd HH:mm:ss',
11891189
// customFormat: ({ absoluteIndex }) => {
11901190
// return String(absoluteIndex) + 'TEST'

‎cypress/fixtures/vdui-components.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -432,6 +432,11 @@ export const components = [
432432
["2024-03-01", 110, 150, 80, 98, 2200],
433433
["2024-04-01", 110, 150, 80, 98, 2200],
434434
["2024-05-01", 110, 150, 80, 98, 2200],
435+
["2024-06-01", 110, 150, 80, 98, 2200],
436+
["2024-07-01", 110, 150, 80, 98, 2200],
437+
["2024-08-01", 110, 150, 80, 98, 2200],
438+
["2024-09-01", 110, 150, 80, 98, 2200],
439+
["2024-10-01", 110, 150, 80, 98, 2200],
435440
],
436441
config: {
437442
style: {

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ const mapping = ref({
129129
})
130130
131131
const options = computed(() => Object.keys(mapping.value));
132-
const selectedComponent = ref('VueUiAnnotator');
132+
const selectedComponent = ref('VueUiXyCanvas');
133133
134134
/**
135135
* Legacy testing arena where some non chart components can be tested

‎src/components/vue-ui-xy.vue‎

Lines changed: 50 additions & 180 deletions
Original file line numberDiff line numberDiff line change
@@ -15,45 +15,46 @@ import {
1515
import {
1616
abbreviate,
1717
adaptColorToBackground,
18-
assignStackRatios,
1918
applyDataLabel,
19+
assignStackRatios,
20+
buildDisplayedTimeLabels,
21+
buildInterLineAreas,
2022
calcLinearProgression,
2123
calculateNiceScale,
2224
calculateNiceScaleWithExactExtremes,
2325
checkNaN,
2426
convertColorToHex,
2527
convertCustomPalette,
2628
createCsvContent,
29+
createIndividualArea,
30+
createIndividualAreaWithCuts,
2731
createPolygonPath,
32+
createSmoothAreaSegments,
2833
createSmoothPath,
29-
createStraightPath,
34+
createSmoothPathWithCuts,
3035
createStar,
36+
createStraightPath,
37+
createStraightPathWithCuts,
3138
createTSpans,
3239
createTSpansFromLineBreaksOnX,
3340
createUid,
3441
dataLabel,
3542
downloadCsv,
43+
error,
3644
forceValidValue,
3745
functionReturnsString,
3846
hasDeepProperty,
3947
isFunction,
4048
isSafeValue,
4149
largestTriangleThreeBucketsArray,
50+
objectIsEmpty,
4251
palette,
4352
placeXYTag,
4453
setOpacity,
4554
shiftHue,
46-
error,
47-
objectIsEmpty,
4855
themePalettes,
4956
translateSize,
50-
createSmoothPathWithCuts,
51-
createStraightPathWithCuts,
52-
createIndividualAreaWithCuts,
53-
createSmoothAreaSegments,
54-
createIndividualArea,
5557
treeShake,
56-
buildInterLineAreas,
5758
} from '../lib';
5859
import { throttle } from '../canvas-lib.js';
5960
import { useConfig } from '../useConfig';
@@ -849,91 +850,6 @@ const modulo = computed(() => {
849850
return Math.min(m, [...new Set(timeLabels.value.map(t => t.text))].length);
850851
});
851852
852-
function memoizeDisplayedTimeLabels(fn) {
853-
let prevKey = null;
854-
let prevVal = null;
855-
return (...args) => {
856-
const key = JSON.stringify(args);
857-
if (key === prevKey) return prevVal;
858-
prevKey = key;
859-
prevVal = fn(...args);
860-
return prevVal;
861-
};
862-
}
863-
864-
const _buildDisplayedTimeLabels = memoizeDisplayedTimeLabels((
865-
showOnlyFirstAndLast,
866-
showOnlyAtModulo,
867-
moduloBase,
868-
visTexts,
869-
allTexts,
870-
startAbs,
871-
selIdx,
872-
maxSeriesCount
873-
) => {
874-
if (showOnlyFirstAndLast) {
875-
if (visTexts.length <= 2) {
876-
return visTexts.map((t, i) => ({ text: t, absoluteIndex: i }));
877-
}
878-
const out = visTexts.map((t, i) => {
879-
const keep = (i === 0) || (i === visTexts.length - 1) || (selIdx != null && i === selIdx);
880-
return { text: keep ? t : '', absoluteIndex: i };
881-
});
882-
return out;
883-
}
884-
885-
if (!showOnlyAtModulo) {
886-
return visTexts.map((t, i) => ({ text: t, absoluteIndex: i }));
887-
}
888-
889-
const mod = Math.max(1, moduloBase || 1);
890-
if (maxSeriesCount <= mod) {
891-
return visTexts.map((t, i) => ({ text: t, absoluteIndex: i }));
892-
}
893-
894-
const candidates = [];
895-
for (let i = 0; i < visTexts.length; i += 1) {
896-
const cur = visTexts[i] ?? '';
897-
if (!cur) continue;
898-
const prevAbs = startAbs + i - 1 >= 0 ? (allTexts[startAbs + i - 1] ?? '') : null;
899-
if (cur !== prevAbs) candidates.push(i);
900-
}
901-
902-
if (!candidates.length) {
903-
return visTexts.map((_t, i) => ({ text: '', absoluteIndex: i }));
904-
}
905-
906-
const C = candidates.length;
907-
const base = mod;
908-
const minK = Math.max(2, Math.min(base - 3, C));
909-
const maxK = Math.min(C, base + 3);
910-
911-
let bestK = Math.min(base, C);
912-
let bestScore = Infinity;
913-
914-
for (let k = minK; k <= maxK; k += 1) {
915-
const remainder = (C - 1) % (k - 1);
916-
const drift = Math.abs(k - base);
917-
const score = remainder * 10 + drift;
918-
if (score < bestScore) { bestScore = score; bestK = k; }
919-
}
920-
921-
const picked = new Set();
922-
if (bestK <= 1) {
923-
picked.add(candidates[Math.round((C - 1) / 2)]);
924-
} else {
925-
const step = (C - 1) / (bestK - 1);
926-
for (let j = 0; j < bestK; j += 1) {
927-
picked.add(candidates[Math.round(j * step)]);
928-
}
929-
}
930-
931-
return visTexts.map((t, i) => ({
932-
text: picked.has(i) ? t : '',
933-
absoluteIndex: i
934-
}));
935-
});
936-
937853
const displayedTimeLabels = computed(() => {
938854
const cfg = FINAL_CONFIG.value.chart.grid.labels.xAxisLabels;
939855
const vis = timeLabels.value || [];
@@ -944,7 +860,7 @@ const displayedTimeLabels = computed(() => {
944860
const visTexts = vis.map(l => l?.text ?? '');
945861
const allTexts = all.map(l => l?.text ?? '');
946862
947-
return _buildDisplayedTimeLabels(
863+
return buildDisplayedTimeLabels(
948864
!!cfg.showOnlyFirstAndLast,
949865
!!cfg.showOnlyAtModulo,
950866
Math.max(1, modulo.value || 1),
@@ -2208,54 +2124,6 @@ const preciseAllTimeLabels = computed(() => {
22082124
text: preciseTimeFormatter.value(i, FINAL_CONFIG.value.chart.zoom.timeFormat),
22092125
absoluteIndex: i
22102126
}))
2211-
})
2212-
2213-
// Simple Slicer labels
2214-
const useSlicerCustomFormat = ref(false);
2215-
2216-
const slicerLabels = computed(() => {
2217-
let left = '', right = '';
2218-
if (FINAL_CONFIG.value.chart.zoom.preview.enable) {
2219-
return { left, right };
2220-
}
2221-
useSlicerCustomFormat.value = false;
2222-
const customFormat = FINAL_CONFIG.value.chart.zoom.customFormat;
2223-
if (isFunction(customFormat)) {
2224-
try {
2225-
const customLeft = customFormat({
2226-
absoluteIndex: slicer.value.start,
2227-
seriesIndex: slicer.value.start,
2228-
datapoint: selectedSeries.value
2229-
});
2230-
const customRight = customFormat({
2231-
absoluteIndex: slicer.value.end - 1,
2232-
seriesIndex: slicer.value.end - 1,
2233-
datapoint: selectedSeries.value
2234-
});
2235-
if (typeof customLeft === 'string' && typeof customRight === 'string') {
2236-
left = customLeft;
2237-
right = customRight;
2238-
useSlicerCustomFormat.value = true;
2239-
}
2240-
} catch (err) {
2241-
console.warn('Custom format cannot be applied on zoom labels.');
2242-
useSlicerCustomFormat.value = false;
2243-
}
2244-
}
2245-
2246-
if (!useSlicerCustomFormat.value) {
2247-
left = FINAL_CONFIG.value.chart.grid.labels.xAxisLabels.datetimeFormatter.enable && !FINAL_CONFIG.value.chart.zoom.useDefaultFormat
2248-
? (preciseAllTimeLabels.value[slicer.value.start]?.text || '')
2249-
: (timeLabels.value[0]?.text || '');
2250-
2251-
const endAbs = Math.max(slicer.value.start, slicer.value.end - 1)
2252-
2253-
right = FINAL_CONFIG.value.chart.grid.labels.xAxisLabels.datetimeFormatter.enable && !FINAL_CONFIG.value.chart.zoom.useDefaultFormat
2254-
? (preciseAllTimeLabels.value[endAbs]?.text || '')
2255-
: (timeLabels.value.at(-1)?.text || '')
2256-
}
2257-
2258-
return { left, right };
22592127
});
22602128
22612129
const tooltipContent = computed(() => {
@@ -4267,52 +4135,54 @@ defineExpose({
42674135
42684136
<SlicerPreview
42694137
ref="chartSlicer"
4270-
v-if="FINAL_CONFIG.chart.zoom.show && maxX > 6 && isDataset && slicerReady"
4271-
:immediate="!FINAL_CONFIG.chart.zoom.preview.enable"
4272-
:max="maxX"
4273-
:min="0"
4274-
:valueStart="slicer.start"
4275-
:valueEnd="slicer.end"
4276-
:start="slicer.start"
4277-
:end="slicer.end"
4278-
@update:start="onSlicerStart"
4279-
@update:end="onSlicerEnd"
4280-
:selectedSeries="selectedSeries"
4281-
:customFormat="FINAL_CONFIG.chart.zoom.customFormat"
4138+
v-if="FINAL_CONFIG.chart.zoom.show && maxX > 6 && isDataset && slicerReady"
4139+
:allMinimaps="allMinimaps"
42824140
:background="FINAL_CONFIG.chart.zoom.color"
4141+
:borderColor="FINAL_CONFIG.chart.backgroundColor"
4142+
:customFormat="FINAL_CONFIG.chart.zoom.customFormat"
4143+
:cutNullValues="FINAL_CONFIG.line.cutNullValues"
4144+
:enableRangeHandles="FINAL_CONFIG.chart.zoom.enableRangeHandles"
4145+
:enableSelectionDrag="FINAL_CONFIG.chart.zoom.enableSelectionDrag"
4146+
:end="slicer.end"
4147+
:focusOnDrag="FINAL_CONFIG.chart.zoom.focusOnDrag"
4148+
:focusRangeRatio="FINAL_CONFIG.chart.zoom.focusRangeRatio"
42834149
:fontSize="FINAL_CONFIG.chart.zoom.fontSize" :useResetSlot="FINAL_CONFIG.chart.zoom.useResetSlot"
4150+
:immediate="!FINAL_CONFIG.chart.zoom.preview.enable"
4151+
:inputColor="FINAL_CONFIG.chart.zoom.color"
4152+
:isPreview="isPrecog"
42844153
:labelLeft="timeLabels[0]? timeLabels[0].text : ''"
42854154
:labelRight="timeLabels.at(-1) ? timeLabels.at(-1).text : ''"
4286-
:textColor="FINAL_CONFIG.chart.color"
4287-
:usePreciseLabels="FINAL_CONFIG.chart.grid.labels.xAxisLabels.datetimeFormatter.enable && !FINAL_CONFIG.chart.zoom.useDefaultFormat"
4288-
:preciseLabels="preciseAllTimeLabels"
4289-
:inputColor="FINAL_CONFIG.chart.zoom.color" :selectColor="FINAL_CONFIG.chart.zoom.highlightColor"
4290-
:borderColor="FINAL_CONFIG.chart.backgroundColor" :minimap="minimap"
4291-
:smoothMinimap="FINAL_CONFIG.chart.zoom.minimap.smooth"
4292-
:minimapSelectedColor="FINAL_CONFIG.chart.zoom.minimap.selectedColor"
4293-
:minimapSelectionRadius="FINAL_CONFIG.chart.zoom.minimap.selectionRadius"
4155+
:max="maxX"
4156+
:min="0"
4157+
:minimap="minimap"
4158+
:minimapCompact="FINAL_CONFIG.chart.zoom.minimap.compact"
4159+
:minimapFrameColor="FINAL_CONFIG.chart.zoom.minimap.frameColor"
4160+
:minimapIndicatorColor="FINAL_CONFIG.chart.zoom.minimap.indicatorColor"
42944161
:minimapLineColor="FINAL_CONFIG.chart.zoom.minimap.lineColor"
4162+
:minimapMerged="FINAL_CONFIG.chart.zoom.minimap.merged"
4163+
:minimapSelectedColor="FINAL_CONFIG.chart.zoom.minimap.selectedColor"
42954164
:minimapSelectedColorOpacity="FINAL_CONFIG.chart.zoom.minimap.selectedColorOpacity"
42964165
:minimapSelectedIndex="selectedSerieIndex"
4297-
:minimapIndicatorColor="FINAL_CONFIG.chart.zoom.minimap.indicatorColor"
4298-
:verticalHandles="FINAL_CONFIG.chart.zoom.minimap.verticalHandles"
4299-
:refreshStartPoint="FINAL_CONFIG.chart.zoom.startIndex !== null ? FINAL_CONFIG.chart.zoom.startIndex : 0"
4166+
:minimapSelectionRadius="FINAL_CONFIG.chart.zoom.minimap.selectionRadius"
4167+
:preciseLabels="preciseAllTimeLabels.length ? preciseAllTimeLabels : allTimeLabels"
43004168
:refreshEndPoint="FINAL_CONFIG.chart.zoom.endIndex !== null ? FINAL_CONFIG.chart.zoom.endIndex + 1 : Math.max(...dataset.map(datapoint => lttb(datapoint.series).length))"
4301-
:enableRangeHandles="FINAL_CONFIG.chart.zoom.enableRangeHandles"
4302-
:enableSelectionDrag="FINAL_CONFIG.chart.zoom.enableSelectionDrag"
4303-
:minimapCompact="FINAL_CONFIG.chart.zoom.minimap.compact"
4304-
:allMinimaps="allMinimaps"
4305-
:minimapMerged="FINAL_CONFIG.chart.zoom.minimap.merged"
4306-
:minimapFrameColor="FINAL_CONFIG.chart.zoom.minimap.frameColor"
4307-
:cutNullValues="FINAL_CONFIG.line.cutNullValues"
4308-
:focusOnDrag="FINAL_CONFIG.chart.zoom.focusOnDrag"
4309-
:focusRangeRatio="FINAL_CONFIG.chart.zoom.focusRangeRatio"
4169+
:refreshStartPoint="FINAL_CONFIG.chart.zoom.startIndex !== null ? FINAL_CONFIG.chart.zoom.startIndex : 0"
4170+
:selectColor="FINAL_CONFIG.chart.zoom.highlightColor"
4171+
:selectedSeries="selectedSeries"
4172+
:smoothMinimap="FINAL_CONFIG.chart.zoom.minimap.smooth"
4173+
:start="slicer.start"
4174+
:textColor="FINAL_CONFIG.chart.color"
4175+
:timeLabels="allTimeLabels"
4176+
:usePreciseLabels="FINAL_CONFIG.chart.grid.labels.xAxisLabels.datetimeFormatter.enable && !FINAL_CONFIG.chart.zoom.useDefaultFormat"
4177+
:valueEnd="slicer.end"
4178+
:valueStart="slicer.start"
4179+
:verticalHandles="FINAL_CONFIG.chart.zoom.minimap.verticalHandles"
4180+
@futureEnd="v => setPrecog('end', v)"
4181+
@futureStart="v => setPrecog('start', v)"
43104182
@reset="refreshSlicer"
43114183
@trapMouse="selectMinimapIndex"
4312-
@futureStart="v => setPrecog('start', v)"
4313-
@futureEnd="v => setPrecog('end', v)"
4314-
:timeLabels="allTimeLabels"
4315-
:isPreview="isPrecog"
4184+
@update:end="onSlicerEnd"
4185+
@update:start="onSlicerStart"
43164186
>
43174187
<template #reset-action="{ reset }">
43184188
<slot name="reset-action" v-bind="{ reset }" />

0 commit comments

Comments
 (0)