Skip to content

Commit 5d9f3ee

Browse files
graphierosgraphieros
committed
New feature - VueUiXy - Add interline coloring config options
1 parent 4a4d939 commit 5d9f3ee

File tree

6 files changed

+511
-18
lines changed

6 files changed

+511
-18
lines changed

‎TestingArena/ArenaVueUiXy.vue‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -377,20 +377,21 @@ onMounted(() => {
377377
setTimeout(() => {
378378
dataset.value = [
379379
{
380-
name: "Serie A with a long name",
381-
series: [60, 100, 112, 221, 119, 75, null, -226, -243, 198, 156, 127, 120],
382-
type: "bar",
380+
name: "Serie A",
381+
series: [60, 100, 112, 221, 119, 75, 199, -226, -243, 198, 156, 127, 120],
382+
type: "line",
383383
dataLabels: false,
384+
smooth: false
384385
},
385386
{
386-
name: "Serie B with a long name",
387-
series: createDs(258),
387+
name: "Serie B",
388+
series: [60, 75, 11, 20, 10, 8, null, 20, 22, 204, 146, 117, 55],
388389
type: "line",
389390
dataLabels: false,
390391
shape: 'triangle',
391-
useArea: true,
392-
smooth: true,
393-
useProgression: true
392+
// useArea: true,
393+
smooth: false,
394+
// useProgression: true
394395
},
395396
{
396397
name: "Serie C with a long name",
@@ -670,7 +671,7 @@ const model = ref([
670671
{ key: 'chart.grid.showVerticalLines', def: true, type: 'checkbox', label: 'verticalLines', category: 'grid' },
671672
{ key: 'chart.grid.showHorizontalLines', def: true, type: 'checkbox', label: 'verticalLines', category: 'grid' },
672673
673-
{ key: 'chart.grid.position', def: 'start', type: 'select', options: ['middle', 'start']},
674+
{ key: 'chart.grid.position', def: 'middle', type: 'select', options: ['middle', 'start']},
674675
{ key: 'chart.grid.frame.show', def: false, type: 'checkbox' },
675676
{ key: 'chart.grid.frame.stroke', def: '#1A1A1A', type: 'color' },
676677
{ key: 'chart.grid.frame.strokeWidth', def: 4, type: 'number', min: 0, max: 12 },
@@ -799,6 +800,8 @@ const model = ref([
799800
{ key: 'line.tag.followValue', def: true, type: 'checkbox' },
800801
{ key: 'line.tag.fontSize', def: 14, type: 'number' },
801802
803+
{ key: 'line.interLine.fillOpacity', def: 0.25, type: 'range', min: 0, max: 1, step: 0.01},
804+
802805
{ key: 'plot.radius', def: 6, type: 'number', min: 0, max: 20, label: 'radius', category: 'plot' },
803806
{ key: 'plot.useGradient', def: true, type: 'checkbox', label: 'useGradient', category: 'plot' },
804807
{ key: 'plot.strokeWidth', def: 2, type: 'number', min: 1, max: 20, label: 'thickness', category: 'plot' },
@@ -949,6 +952,12 @@ const config = computed(() => {
949952
theme: currentTheme.value,
950953
line: {
951954
...c.line,
955+
interLine: {
956+
...c.line.interLine,
957+
pairs: [
958+
['Serie A', 'Serie B']
959+
]
960+
},
952961
labels: {
953962
...c.line.labels,
954963
// formatter: ({value, config}) => {

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

Lines changed: 61 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ import {
5353
createSmoothAreaSegments,
5454
createIndividualArea,
5555
treeShake,
56+
buildInterLineAreas,
5657
} from '../lib';
5758
import { throttle } from '../canvas-lib.js';
5859
import { useConfig } from '../useConfig';
@@ -336,6 +337,8 @@ const isDataset = computed({
336337
337338
const FINAL_CONFIG = ref(prepareConfig());
338339
340+
const debug = computed(() => !!FINAL_CONFIG.value.debug);
341+
339342
// v3 - Skeleton loader management
340343
const { loading, FINAL_DATASET, manualLoading } = useLoading({
341344
...toRefs(props),
@@ -820,8 +823,8 @@ const displayedTimeLabels = computed(() => {
820823
const mod = Math.max(1, (modulo.value || 1));
821824
if (maxSeries.value <= mod) return vis;
822825
823-
const base = mod;
824-
const all = allTimeLabels.value || [];
826+
const base = mod;
827+
const all = allTimeLabels.value || [];
825828
const start = slicer.value.start ?? 0;
826829
827830
const candidates = [];
@@ -878,8 +881,8 @@ function selectTimeLabel(label, relativeIndex) {
878881
}
879882
880883
const maxSeries = computed(() => {
881-
const len = safeInt((slicer.value.end ?? 0) - (slicer.value.start ?? 0))
882-
return Math.max(1, len)
884+
const len = safeInt((slicer.value.end ?? 0) - (slicer.value.start ?? 0))
885+
return Math.max(1, len)
883886
})
884887
885888
function selectMinimapIndex(i) {
@@ -1941,6 +1944,43 @@ const allScales = computed(() => {
19411944
});
19421945
});
19431946
1947+
const interLineAreas = computed(() => {
1948+
const il = FINAL_CONFIG.value.line.interLine || {};
1949+
const pairs = il.pairs || [];
1950+
const colors = il.colors || [];
1951+
1952+
if (!pairs.length) return [];
1953+
1954+
const out = [];
1955+
pairs.forEach((pair, i) => {
1956+
const [nameA, nameB] = Array.isArray(pair) ? pair : [pair.a, pair.b];
1957+
if (!nameA || !nameB) return;
1958+
1959+
const A = lineSet.value.find(s => s.name === nameA);
1960+
const B = lineSet.value.find(s => s.name === nameB);
1961+
if (!A || !B || A.type !== 'line' || B.type !== 'line') return;
1962+
1963+
const colorLineA = (colors?.[i]?.[0]) ?? A.color;
1964+
const colorLineB = (colors?.[i]?.[1]) ?? B.color;
1965+
1966+
const areas = buildInterLineAreas({
1967+
lineA: A.plots,
1968+
lineB: B.plots,
1969+
smoothA: !!A.smooth,
1970+
smoothB: !!B.smooth,
1971+
colorLineA,
1972+
colorLineB,
1973+
sampleStepPx: 2,
1974+
cutNullValues: FINAL_CONFIG.value.line.cutNullValues
1975+
});
1976+
1977+
areas.forEach((a, j) => {
1978+
out.push({ ...a, key: `inter_${nameA}_${nameB}_${i}_${j}` });
1979+
});
1980+
});
1981+
return out;
1982+
});
1983+
19441984
/******************************************************************************************/
19451985
19461986
const dataTooltipSlot = computed(() => {
@@ -2259,8 +2299,6 @@ function convertSizes() {
22592299
})
22602300
}
22612301
2262-
const debug = computed(() => !!FINAL_CONFIG.value.debug);
2263-
22642302
function prepareChart() {
22652303
if (objectIsEmpty(props.dataset)) {
22662304
error({
@@ -2874,7 +2912,7 @@ defineExpose({
28742912
<!-- ZERO LINE (AFTER BAR DATASETS, BEFORE LABELS) -->
28752913
<template v-if="!mutableConfig.useIndividualScale && FINAL_CONFIG.chart.grid.labels.zeroLine.show">
28762914
<line data-cy="xy-grid-line-x" :stroke="FINAL_CONFIG.chart.grid.stroke" stroke-width="1"
2877-
:x1="drawingArea.left + xPadding" :x2="drawingArea.right - xPadding"
2915+
:x1="drawingArea.left + xPadding" :x2="drawingArea.right"
28782916
:y1="forceValidValue(zero)" :y2="forceValidValue(zero)" stroke-linecap="round"
28792917
:style="{ animation: 'none !important' }" />
28802918
</template>
@@ -2957,8 +2995,8 @@ defineExpose({
29572995
<g v-for="(yLabel, i) in yLabels" :key="`yLabel_${i}`">
29582996
<line data-cy="axis-y-tick"
29592997
v-if="canShowValue(yLabel) && yLabel.value >= niceScale.min && yLabel.value <= niceScale.max && FINAL_CONFIG.chart.grid.labels.yAxis.showCrosshairs"
2960-
:x1="drawingArea.left"
2961-
:x2="drawingArea.left - FINAL_CONFIG.chart.grid.labels.yAxis.crosshairSize"
2998+
:x1="drawingArea.left + xPadding"
2999+
:x2="drawingArea.left + xPadding - FINAL_CONFIG.chart.grid.labels.yAxis.crosshairSize"
29623000
:y1="forceValidValue(yLabel.y)" :y2="forceValidValue(yLabel.y)"
29633001
:stroke="FINAL_CONFIG.chart.grid.stroke" stroke-width="1" stroke-linecap="round"
29643002
:style="{ animation: 'none !important' }" />
@@ -3057,6 +3095,20 @@ defineExpose({
30573095
v-bind="{ ...serie, seriesIndex: serie.slotAbsoluteIndex, patternId: `pattern_${uniqueId}_${i}` }" />
30583096
</defs>
30593097
3098+
<!-- INTERLINE AREAS (non stack mode only) -->
3099+
<g v-if="interLineAreas.length && !mutableConfig.isStacked">
3100+
<path
3101+
v-for="area in interLineAreas"
3102+
:key="area.key"
3103+
:d="area.d"
3104+
:fill="area.color"
3105+
:fill-opacity="FINAL_CONFIG.line.interLine.fillOpacity"
3106+
stroke="none"
3107+
pointer-events="none"
3108+
:style="{ transition: loading || !FINAL_CONFIG.line.showTransition ? undefined: `all ${FINAL_CONFIG.line.transitionDurationMs}ms ease-in-out`}"
3109+
/>
3110+
</g>
3111+
30603112
<!-- LINES -->
30613113
<g v-for="(serie, i) in lineSet" :key="`serie_line_${i}`" :class="`serie_line_${i}`"
30623114
:style="`opacity:${selectedScale ? selectedScale === serie.groupId ? 1 : 0.2 : 1};transition:opacity 0.2s ease-in-out`">

0 commit comments

Comments
 (0)