Skip to content

Commit 92a3ecb

Browse files
12-aryan12-aryan
authored
Bug fix/chart ticks (#467)
* fix: fixed inconsitencies for chart ticks * fix: fixed statCard tooltip dateTime formatting * fix: added border in sub-menu * fix: fixed statcard dateTime formatting * fix: fixed tooltip truncation issue * fix: minor fix * chore: tranformed legacy into es6 code * fix: fixed maxTicks logic * fix: dixed demo * feat: added visibilty control for header and collapse icon * chore: minor additon in chartsdemo * chore: removed comments
1 parent d799803 commit 92a3ecb

File tree

6 files changed

+71
-46
lines changed

6 files changed

+71
-46
lines changed

‎apps/site/src/demos/ChartsDemo.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -812,12 +812,8 @@ const GranularChartsDemo = () => {
812812
selectedKeys={selectedKeys}
813813
enableHover={true}
814814
xAxis={{
815-
show: true,
816-
showLabel: false,
817815
type: AxisType.DATE_TIME,
818-
interval:
819-
AxisIntervalType.PRESERVE_START,
820-
timeOnly: true,
816+
maxTicks: 3,
821817
}}
822818
yAxis={{
823819
show: true,
@@ -2082,6 +2078,7 @@ const ChartDemo = () => {
20822078
</div>
20832079

20842080
<Charts
2081+
showHeader={false}
20852082
data={last1hour5minsData}
20862083
chartType={ChartType.LINE}
20872084
xAxis={{
@@ -2090,12 +2087,14 @@ const ChartDemo = () => {
20902087
type: AxisType.DATE_TIME,
20912088
smartDateTimeFormat: false,
20922089
showYear: true,
2093-
maxTicks: 4,
2090+
maxTicks: last1hour5minsData.length / 2,
2091+
showLabel: true,
20942092
}}
20952093
yAxis={{
20962094
label: 'Currency',
20972095
show: true,
20982096
type: AxisType.CURRENCY,
2097+
showLabel: true,
20992098
}}
21002099
chartHeaderSlot={
21012100
<div className="chart-header">
@@ -2113,6 +2112,7 @@ const ChartDemo = () => {
21132112
xAxis={{
21142113
label: 'Date (Timestamp)',
21152114
show: true,
2115+
showLabel: true,
21162116
type: AxisType.DATE_TIME,
21172117
// dateOnly: true,
21182118
// timeOnly: true,
@@ -2121,6 +2121,7 @@ const ChartDemo = () => {
21212121
yAxis={{
21222122
label: 'Currency',
21232123
show: true,
2124+
showLabel: true,
21242125
type: AxisType.CURRENCY,
21252126
}}
21262127
chartHeaderSlot={

‎packages/blend/lib/components/Charts/ChartHeader.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const ChartHeader: React.FC<ChartHeaderProps> = ({
1616
isSmallScreen = false,
1717
isExpanded,
1818
setIsExpanded,
19+
showCollapseIcon,
1920
}) => {
2021
const chartTokens = useResponsiveTokens<ChartTokensType>('CHARTS')
2122
const headerTokens = chartTokens.header
@@ -99,18 +100,20 @@ const ChartHeader: React.FC<ChartHeaderProps> = ({
99100
)}
100101
</>
101102
)}
102-
<Block
103-
display="flex"
104-
alignItems="center"
105-
justifyContent="center"
106-
onClick={() => setIsExpanded(!isExpanded)}
107-
>
108-
<ChevronsDownUp
109-
size={20}
110-
color={FOUNDATION_THEME.colors.gray[400]}
111-
cursor="pointer"
112-
/>
113-
</Block>
103+
{showCollapseIcon && (
104+
<Block
105+
display="flex"
106+
alignItems="center"
107+
justifyContent="center"
108+
onClick={() => setIsExpanded(!isExpanded)}
109+
>
110+
<ChevronsDownUp
111+
size={20}
112+
color={FOUNDATION_THEME.colors.gray[400]}
113+
cursor="pointer"
114+
/>
115+
</Block>
116+
)}
114117
{slot3}
115118
</Block>
116119
</Block>

‎packages/blend/lib/components/Charts/ChartUtils.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -463,7 +463,7 @@ export function generateConsistentDateTimeTicks(
463463
ticks: string[]
464464
formatter: (value: string | number) => string
465465
} {
466-
const { maxTicks = 10, customInterval, ...formatterOptions } = options
466+
const { maxTicks, customInterval, ...formatterOptions } = options
467467

468468
if (data.length === 0) {
469469
return {
@@ -490,7 +490,8 @@ export function generateConsistentDateTimeTicks(
490490

491491
// Determine interval
492492
const interval =
493-
customInterval || getSuggestedTickInterval(data, maxTicks).interval
493+
customInterval ||
494+
getSuggestedTickInterval(data, maxTicks || 10).interval
494495

495496
// Round down minTime to nearest interval boundary
496497
const startTick = Math.floor(minTime / interval) * interval
@@ -507,8 +508,18 @@ export function generateConsistentDateTimeTicks(
507508
currentTick += interval
508509
}
509510

510-
// Convert to strings to match the data format (data.name is a string)
511-
const ticks = ticksNumbers.map((tick) => String(tick))
511+
// Limit ticks to maxTicks if specified
512+
let finalTicks = ticksNumbers
513+
if (maxTicks && ticksNumbers.length > maxTicks) {
514+
const step = Math.max(1, Math.floor(ticksNumbers.length / maxTicks))
515+
finalTicks = ticksNumbers.filter((_, index) => index % step === 0)
516+
517+
if (finalTicks.length > maxTicks) {
518+
finalTicks = finalTicks.slice(0, maxTicks)
519+
}
520+
}
521+
522+
const ticks = finalTicks.map((tick) => String(tick))
512523

513524
return {
514525
ticks,

‎packages/blend/lib/components/Charts/Charts.tsx‎

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ const Charts: React.FC<ChartsProps> = ({
3232
yAxis,
3333
noData,
3434
height = 400,
35+
showHeader = true,
36+
showCollapseIcon = true,
3537
}) => {
3638
const { breakPointLabel } = useBreakpoints(BREAKPOINTS)
3739
const isSmallScreen = breakPointLabel === 'sm'
@@ -216,17 +218,20 @@ const Charts: React.FC<ChartsProps> = ({
216218
chartTokens.container.backgroundColor.fullscreen
217219
}
218220
>
219-
<ChartHeader
220-
slot1={slot1}
221-
slot2={slot2}
222-
slot3={slot3}
223-
chartHeaderSlot={chartHeaderSlot}
224-
onFullscreen={handleFullscreen}
225-
onExitFullscreen={handleExitFullscreen}
226-
isFullscreen={isFullscreen}
227-
isExpanded={isExpanded}
228-
setIsExpanded={setIsExpanded}
229-
/>
221+
{showHeader && (
222+
<ChartHeader
223+
slot1={slot1}
224+
slot2={slot2}
225+
slot3={slot3}
226+
chartHeaderSlot={chartHeaderSlot}
227+
onFullscreen={handleFullscreen}
228+
onExitFullscreen={handleExitFullscreen}
229+
isFullscreen={isFullscreen}
230+
isExpanded={isExpanded}
231+
setIsExpanded={setIsExpanded}
232+
showCollapseIcon={showCollapseIcon}
233+
/>
234+
)}
230235
{showHorizontallyStackedLegends()
231236
? isExpanded && (
232237
<Block
@@ -399,16 +404,19 @@ const Charts: React.FC<ChartsProps> = ({
399404
borderRadius={chartTokens.container.borderRadius.default}
400405
backgroundColor={chartTokens.container.backgroundColor.default}
401406
>
402-
<ChartHeader
403-
slot1={slot1}
404-
slot2={slot2}
405-
slot3={slot3}
406-
chartHeaderSlot={chartHeaderSlot}
407-
onFullscreen={handleFullscreen}
408-
isSmallScreen={isSmallScreen}
409-
isExpanded={isExpanded}
410-
setIsExpanded={setIsExpanded}
411-
/>
407+
{showHeader && (
408+
<ChartHeader
409+
slot1={slot1}
410+
slot2={slot2}
411+
slot3={slot3}
412+
chartHeaderSlot={chartHeaderSlot}
413+
onFullscreen={handleFullscreen}
414+
isSmallScreen={isSmallScreen}
415+
isExpanded={isExpanded}
416+
setIsExpanded={setIsExpanded}
417+
showCollapseIcon={showCollapseIcon}
418+
/>
419+
)}
412420
{showHorizontallyStackedLegends()
413421
? isExpanded && (
414422
<Block

‎packages/blend/lib/components/Charts/renderChart.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,14 +65,13 @@ export const renderChart = ({
6565
!finalXAxis.ticks &&
6666
originalData.length > 0
6767
) {
68-
// Responsive tick count: aggressively reduce ticks on small screens to prevent overlap
69-
const defaultMaxTicks = isSmallScreen ? 4 : 10
68+
// Only apply maxTicks if explicitly set, otherwise let the formatter decide
7069
const { ticks } = generateConsistentDateTimeTicks(originalData, {
7170
maxTicks: finalXAxis.maxTicks
7271
? isSmallScreen
7372
? Math.max(3, Math.floor(finalXAxis.maxTicks / 2))
7473
: finalXAxis.maxTicks
75-
: defaultMaxTicks,
74+
: undefined, // Don't limit ticks when maxTicks is not explicitly set
7675
dateOnly: finalXAxis.dateOnly,
7776
timeOnly: finalXAxis.timeOnly,
7877
showYear: finalXAxis.showYear,

‎packages/blend/lib/components/Charts/types.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,8 @@ export type ChartsProps = {
155155
yAxis?: YAxisConfig
156156
noData?: NoDataProps
157157
height?: number
158+
showHeader?: boolean
159+
showCollapseIcon?: boolean
158160
}
159161

160162
export type FlattenedDataPoint = {
@@ -173,6 +175,7 @@ export type ChartHeaderProps = {
173175
isSmallScreen?: boolean
174176
isExpanded: boolean
175177
setIsExpanded: (isExpanded: boolean) => void
178+
showCollapseIcon?: boolean
176179
}
177180

178181
export type ChartLegendsProps = {

0 commit comments

Comments
 (0)