Skip to content

Commit c4a77bc

Browse files
graphierosgraphieros
authored
Merge pull request #249 from graphieros/next
Slicer & Tooltip improvements
2 parents 99a17e5 + e60d5c1 commit c4a77bc

34 files changed

+868
-394
lines changed

‎TestingArena/ArenaVueUiXy.vue‎

Lines changed: 270 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -647,7 +647,7 @@ const model = ref([
647647
{ key: 'chart.zoom.minimap.indicatorColor', def: '#1A1A1A', type: 'color' },
648648
{ key: 'chart.zoom.minimap.verticalHandles', def: false, type: 'checkbox' },
649649
650-
{ key: 'chart.zoom.startIndex', def: 50, type: 'number', min: 0, max: 100 },
650+
{ key: 'chart.zoom.startIndex', def: null, type: 'number', min: 0, max: 100 },
651651
{ key: 'chart.zoom.endIndex', def: null, type: 'number', min: 0, max: 100 },
652652
{ key: 'chart.zoom.preview.enable', def: true, type: 'checkbox'},
653653
{ key: 'chart.zoom.preview.stroke', def: '#1f77b4', type: 'color'},
@@ -774,6 +774,8 @@ const model = ref([
774774
{ key: 'chart.tooltip.showTimeLabel', def: true, type: 'checkbox' },
775775
{ key: 'chart.tooltip.smooth', def: true, type: 'checkbox' },
776776
{ key: 'chart.tooltip.backdropFilter', def: false, type: 'checkbox' },
777+
{ key: 'chart.tooltip.smoothForce', def: 0.18, type: 'number', min: 0.1, max: 1, step:0.01 },
778+
{ key: 'chart.tooltip.smoothSnapThreshold', def: 0.25, type: 'number', min: 0.1, max: 1, step:0.01 },
777779
778780
{ key: 'bar.borderRadius', def: 2, type: 'number', min: 0, max: 120, label: 'borderRadius', category: 'bar' },
779781
{ key: 'bar.useGradient', def: true, type: 'checkbox', label: 'useGradient', category: 'bar' },
@@ -1153,17 +1155,17 @@ const config = computed(() => {
11531155
...c.chart.zoom,
11541156
useDefaultFormat: true,
11551157
timeFormat: 'yyyy-MM-dd HH:mm:ss',
1156-
// customFormat: ({ absoluteIndex }) => {
1157-
// return String(absoluteIndex) + 'TEST'
1158-
// }
1158+
customFormat: ({ absoluteIndex }) => {
1159+
return String(absoluteIndex) + 'TEST'
1160+
}
11591161
},
11601162
timeTag: {
11611163
...c.chart.timeTag,
11621164
useDefaultFormat: false,
11631165
timeFormat: 'yyyy-MM-dd HH:mm:ss',
1164-
// customFormat: ({ absoluteIndex }) => {
1165-
// return String(absoluteIndex) + 'TEST'
1166-
// }
1166+
customFormat: ({ absoluteIndex }) => {
1167+
return String(absoluteIndex) + 'TEST'
1168+
}
11671169
}
11681170
}
11691171
}
@@ -1522,4 +1524,265 @@ onMounted(async () => {
15221524
</template>
15231525
</Box>
15241526

1527+
<!-- UNCOMMENT TO TEST PERF -->
1528+
1529+
<!-- <div style="display:grid; grid-template-columns:repeat(2, 1fr); gap: 12px">
1530+
<LocalVueUiXy
1531+
:dataset="isPropsToggled ? alternateDataset : dataset"
1532+
:config="isPropsToggled ? alternateConfig : config"
1533+
:selectedXIndex="selectedIndex"
1534+
:key="`local_${step}`"
1535+
@selectLegend="selectLegend"
1536+
@selectX="selectX">
1537+
</LocalVueUiXy>
1538+
<LocalVueUiXy
1539+
:dataset="isPropsToggled ? alternateDataset : dataset"
1540+
:config="isPropsToggled ? alternateConfig : config"
1541+
:selectedXIndex="selectedIndex"
1542+
:key="`local_${step}`"
1543+
@selectLegend="selectLegend"
1544+
@selectX="selectX">
1545+
</LocalVueUiXy>
1546+
<LocalVueUiXy
1547+
:dataset="isPropsToggled ? alternateDataset : dataset"
1548+
:config="isPropsToggled ? alternateConfig : config"
1549+
:selectedXIndex="selectedIndex"
1550+
:key="`local_${step}`"
1551+
@selectLegend="selectLegend"
1552+
@selectX="selectX">
1553+
</LocalVueUiXy>
1554+
<LocalVueUiXy
1555+
:dataset="isPropsToggled ? alternateDataset : dataset"
1556+
:config="isPropsToggled ? alternateConfig : config"
1557+
:selectedXIndex="selectedIndex"
1558+
:key="`local_${step}`"
1559+
@selectLegend="selectLegend"
1560+
@selectX="selectX">
1561+
</LocalVueUiXy>
1562+
<LocalVueUiXy
1563+
:dataset="isPropsToggled ? alternateDataset : dataset"
1564+
:config="isPropsToggled ? alternateConfig : config"
1565+
:selectedXIndex="selectedIndex"
1566+
:key="`local_${step}`"
1567+
@selectLegend="selectLegend"
1568+
@selectX="selectX">
1569+
</LocalVueUiXy>
1570+
<LocalVueUiXy
1571+
:dataset="isPropsToggled ? alternateDataset : dataset"
1572+
:config="isPropsToggled ? alternateConfig : config"
1573+
:selectedXIndex="selectedIndex"
1574+
:key="`local_${step}`"
1575+
@selectLegend="selectLegend"
1576+
@selectX="selectX">
1577+
</LocalVueUiXy>
1578+
<LocalVueUiXy
1579+
:dataset="isPropsToggled ? alternateDataset : dataset"
1580+
:config="isPropsToggled ? alternateConfig : config"
1581+
:selectedXIndex="selectedIndex"
1582+
:key="`local_${step}`"
1583+
@selectLegend="selectLegend"
1584+
@selectX="selectX">
1585+
</LocalVueUiXy>
1586+
<LocalVueUiXy
1587+
:dataset="isPropsToggled ? alternateDataset : dataset"
1588+
:config="isPropsToggled ? alternateConfig : config"
1589+
:selectedXIndex="selectedIndex"
1590+
:key="`local_${step}`"
1591+
@selectLegend="selectLegend"
1592+
@selectX="selectX">
1593+
</LocalVueUiXy>
1594+
<LocalVueUiXy
1595+
:dataset="isPropsToggled ? alternateDataset : dataset"
1596+
:config="isPropsToggled ? alternateConfig : config"
1597+
:selectedXIndex="selectedIndex"
1598+
:key="`local_${step}`"
1599+
@selectLegend="selectLegend"
1600+
@selectX="selectX">
1601+
</LocalVueUiXy>
1602+
<LocalVueUiXy
1603+
:dataset="isPropsToggled ? alternateDataset : dataset"
1604+
:config="isPropsToggled ? alternateConfig : config"
1605+
:selectedXIndex="selectedIndex"
1606+
:key="`local_${step}`"
1607+
@selectLegend="selectLegend"
1608+
@selectX="selectX">
1609+
</LocalVueUiXy>
1610+
<LocalVueUiXy
1611+
:dataset="isPropsToggled ? alternateDataset : dataset"
1612+
:config="isPropsToggled ? alternateConfig : config"
1613+
:selectedXIndex="selectedIndex"
1614+
:key="`local_${step}`"
1615+
@selectLegend="selectLegend"
1616+
@selectX="selectX">
1617+
</LocalVueUiXy>
1618+
<LocalVueUiXy
1619+
:dataset="isPropsToggled ? alternateDataset : dataset"
1620+
:config="isPropsToggled ? alternateConfig : config"
1621+
:selectedXIndex="selectedIndex"
1622+
:key="`local_${step}`"
1623+
@selectLegend="selectLegend"
1624+
@selectX="selectX">
1625+
</LocalVueUiXy>
1626+
<LocalVueUiXy
1627+
:dataset="isPropsToggled ? alternateDataset : dataset"
1628+
:config="isPropsToggled ? alternateConfig : config"
1629+
:selectedXIndex="selectedIndex"
1630+
:key="`local_${step}`"
1631+
@selectLegend="selectLegend"
1632+
@selectX="selectX">
1633+
</LocalVueUiXy>
1634+
<LocalVueUiXy
1635+
:dataset="isPropsToggled ? alternateDataset : dataset"
1636+
:config="isPropsToggled ? alternateConfig : config"
1637+
:selectedXIndex="selectedIndex"
1638+
:key="`local_${step}`"
1639+
@selectLegend="selectLegend"
1640+
@selectX="selectX">
1641+
</LocalVueUiXy>
1642+
<LocalVueUiXy
1643+
:dataset="isPropsToggled ? alternateDataset : dataset"
1644+
:config="isPropsToggled ? alternateConfig : config"
1645+
:selectedXIndex="selectedIndex"
1646+
:key="`local_${step}`"
1647+
@selectLegend="selectLegend"
1648+
@selectX="selectX">
1649+
</LocalVueUiXy>
1650+
<LocalVueUiXy
1651+
:dataset="isPropsToggled ? alternateDataset : dataset"
1652+
:config="isPropsToggled ? alternateConfig : config"
1653+
:selectedXIndex="selectedIndex"
1654+
:key="`local_${step}`"
1655+
@selectLegend="selectLegend"
1656+
@selectX="selectX">
1657+
</LocalVueUiXy>
1658+
<LocalVueUiXy
1659+
:dataset="isPropsToggled ? alternateDataset : dataset"
1660+
:config="isPropsToggled ? alternateConfig : config"
1661+
:selectedXIndex="selectedIndex"
1662+
:key="`local_${step}`"
1663+
@selectLegend="selectLegend"
1664+
@selectX="selectX">
1665+
</LocalVueUiXy>
1666+
<LocalVueUiXy
1667+
:dataset="isPropsToggled ? alternateDataset : dataset"
1668+
:config="isPropsToggled ? alternateConfig : config"
1669+
:selectedXIndex="selectedIndex"
1670+
:key="`local_${step}`"
1671+
@selectLegend="selectLegend"
1672+
@selectX="selectX">
1673+
</LocalVueUiXy>
1674+
<LocalVueUiXy
1675+
:dataset="isPropsToggled ? alternateDataset : dataset"
1676+
:config="isPropsToggled ? alternateConfig : config"
1677+
:selectedXIndex="selectedIndex"
1678+
:key="`local_${step}`"
1679+
@selectLegend="selectLegend"
1680+
@selectX="selectX">
1681+
</LocalVueUiXy>
1682+
<LocalVueUiXy
1683+
:dataset="isPropsToggled ? alternateDataset : dataset"
1684+
:config="isPropsToggled ? alternateConfig : config"
1685+
:selectedXIndex="selectedIndex"
1686+
:key="`local_${step}`"
1687+
@selectLegend="selectLegend"
1688+
@selectX="selectX">
1689+
</LocalVueUiXy>
1690+
<LocalVueUiXy
1691+
:dataset="isPropsToggled ? alternateDataset : dataset"
1692+
:config="isPropsToggled ? alternateConfig : config"
1693+
:selectedXIndex="selectedIndex"
1694+
:key="`local_${step}`"
1695+
@selectLegend="selectLegend"
1696+
@selectX="selectX">
1697+
</LocalVueUiXy>
1698+
<LocalVueUiXy
1699+
:dataset="isPropsToggled ? alternateDataset : dataset"
1700+
:config="isPropsToggled ? alternateConfig : config"
1701+
:selectedXIndex="selectedIndex"
1702+
:key="`local_${step}`"
1703+
@selectLegend="selectLegend"
1704+
@selectX="selectX">
1705+
</LocalVueUiXy>
1706+
<LocalVueUiXy
1707+
:dataset="isPropsToggled ? alternateDataset : dataset"
1708+
:config="isPropsToggled ? alternateConfig : config"
1709+
:selectedXIndex="selectedIndex"
1710+
:key="`local_${step}`"
1711+
@selectLegend="selectLegend"
1712+
@selectX="selectX">
1713+
</LocalVueUiXy>
1714+
<LocalVueUiXy
1715+
:dataset="isPropsToggled ? alternateDataset : dataset"
1716+
:config="isPropsToggled ? alternateConfig : config"
1717+
:selectedXIndex="selectedIndex"
1718+
:key="`local_${step}`"
1719+
@selectLegend="selectLegend"
1720+
@selectX="selectX">
1721+
</LocalVueUiXy>
1722+
<LocalVueUiXy
1723+
:dataset="isPropsToggled ? alternateDataset : dataset"
1724+
:config="isPropsToggled ? alternateConfig : config"
1725+
:selectedXIndex="selectedIndex"
1726+
:key="`local_${step}`"
1727+
@selectLegend="selectLegend"
1728+
@selectX="selectX">
1729+
</LocalVueUiXy>
1730+
<LocalVueUiXy
1731+
:dataset="isPropsToggled ? alternateDataset : dataset"
1732+
:config="isPropsToggled ? alternateConfig : config"
1733+
:selectedXIndex="selectedIndex"
1734+
:key="`local_${step}`"
1735+
@selectLegend="selectLegend"
1736+
@selectX="selectX">
1737+
</LocalVueUiXy>
1738+
<LocalVueUiXy
1739+
:dataset="isPropsToggled ? alternateDataset : dataset"
1740+
:config="isPropsToggled ? alternateConfig : config"
1741+
:selectedXIndex="selectedIndex"
1742+
:key="`local_${step}`"
1743+
@selectLegend="selectLegend"
1744+
@selectX="selectX">
1745+
</LocalVueUiXy>
1746+
<LocalVueUiXy
1747+
:dataset="isPropsToggled ? alternateDataset : dataset"
1748+
:config="isPropsToggled ? alternateConfig : config"
1749+
:selectedXIndex="selectedIndex"
1750+
:key="`local_${step}`"
1751+
@selectLegend="selectLegend"
1752+
@selectX="selectX">
1753+
</LocalVueUiXy>
1754+
<LocalVueUiXy
1755+
:dataset="isPropsToggled ? alternateDataset : dataset"
1756+
:config="isPropsToggled ? alternateConfig : config"
1757+
:selectedXIndex="selectedIndex"
1758+
:key="`local_${step}`"
1759+
@selectLegend="selectLegend"
1760+
@selectX="selectX">
1761+
</LocalVueUiXy>
1762+
<LocalVueUiXy
1763+
:dataset="isPropsToggled ? alternateDataset : dataset"
1764+
:config="isPropsToggled ? alternateConfig : config"
1765+
:selectedXIndex="selectedIndex"
1766+
:key="`local_${step}`"
1767+
@selectLegend="selectLegend"
1768+
@selectX="selectX">
1769+
</LocalVueUiXy>
1770+
<LocalVueUiXy
1771+
:dataset="isPropsToggled ? alternateDataset : dataset"
1772+
:config="isPropsToggled ? alternateConfig : config"
1773+
:selectedXIndex="selectedIndex"
1774+
:key="`local_${step}`"
1775+
@selectLegend="selectLegend"
1776+
@selectX="selectX">
1777+
</LocalVueUiXy>
1778+
<LocalVueUiXy
1779+
:dataset="isPropsToggled ? alternateDataset : dataset"
1780+
:config="isPropsToggled ? alternateConfig : config"
1781+
:selectedXIndex="selectedIndex"
1782+
:key="`local_${step}`"
1783+
@selectLegend="selectLegend"
1784+
@selectX="selectX">
1785+
</LocalVueUiXy>
1786+
</div> -->
1787+
15251788
</template>

‎src/atoms/Slicer.cy.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -130,10 +130,10 @@ describe("<Slicer />", () => {
130130
.trigger('mousedown', { force: true })
131131
.trigger('mousemove', {force: true, clientX: 400 })
132132

133-
cy.wrap(slicer).should('have.property', 'start', 3);
134-
cy.wrap(slicer).should('have.property', 'end', 11);
135-
cy.get('[data-cy="slicer-label-left"]').as('left').should('exist').and('be.visible').and('contain', '____ 3 ____')
136-
cy.get('[data-cy="slicer-label-right"]').as('right').should('exist').and('be.visible').and('contain', '____ 10 ____')
133+
cy.wrap(slicer).should('have.property', 'start', 12);
134+
cy.wrap(slicer).should('have.property', 'end', 20);
135+
cy.get('[data-cy="slicer-label-left"]').as('left').should('exist').and('be.visible').and('contain', '____ 12 ____')
136+
cy.get('[data-cy="slicer-label-right"]').as('right').should('exist').and('be.visible').and('contain', '____ 19 ____')
137137
})
138138
})
139139

@@ -153,10 +153,10 @@ describe("<Slicer />", () => {
153153
.trigger('mousedown', { force: true })
154154
.trigger('mousemove', {force: true, clientX: 400 })
155155

156-
cy.wrap(slicer).should('have.property', 'start', 3);
157-
cy.wrap(slicer).should('have.property', 'end', 11);
158-
cy.get('[data-cy="slicer-label-left"]').as('left').should('exist').and('be.visible').and('contain', '____ 3 ____')
159-
cy.get('[data-cy="slicer-label-right"]').as('right').should('exist').and('be.visible').and('contain', '____ 10 ____')
156+
cy.wrap(slicer).should('have.property', 'start', 12);
157+
cy.wrap(slicer).should('have.property', 'end', 20);
158+
cy.get('[data-cy="slicer-label-left"]').as('left').should('exist').and('be.visible').and('contain', '____ 12 ____')
159+
cy.get('[data-cy="slicer-label-right"]').as('right').should('exist').and('be.visible').and('contain', '____ 19 ____')
160160
})
161161
})
162162

@@ -175,7 +175,7 @@ describe("<Slicer />", () => {
175175
.trigger('mousedown', { force: true })
176176
.trigger('mousemove', {force: true, clientX: 400 })
177177

178-
cy.get('[data-cy="slicer-label-merged"]').should('be.visible').and('contain', '____ 3 ____')
178+
cy.get('[data-cy="slicer-label-merged"]').should('be.visible').and('contain', '____ 17 ____')
179179
cy.get('[data-cy="slicer-label-left"]').should('not.be.visible')
180180
cy.get('[data-cy="slicer-label-right"]').should('not.be.visible')
181181
})
@@ -196,7 +196,7 @@ describe("<Slicer />", () => {
196196
.trigger('mousedown', { force: true })
197197
.trigger('mousemove', {force: true, clientX: 400 })
198198

199-
cy.get('[data-cy="slicer-label-merged"]').should('be.visible').and('contain', '____ 3 ____ - ____ 4 ____');
199+
cy.get('[data-cy="slicer-label-merged"]').should('be.visible').and('contain', '____ 16 ____ - ____ 17 ____');
200200
cy.get('[data-cy="slicer-label-left"]').should('not.be.visible')
201201
cy.get('[data-cy="slicer-label-right"]').should('not.be.visible')
202202
})

0 commit comments

Comments
 (0)