Merge pull request #621 from rokotyan/feature/axis-min-max-grid-lines

Axis: Show grid when `minMaxTicksOnly` is `true`

Author: suryahanumandla

packages/angular/src/components/axis/axis.component.ts

@@ -89,6 +89,12 @@ export class VisAxisComponent<Datum> implements AxisConfigInterface<Datum>, Afte
   /** Distance between the axis and the label in pixels. Default: `8` */
   @Input() labelMargin?: number
 
+  /** Label text fit mode: `FitMode.Wrap` or `FitMode.Trim`. Default: `FitMode.Wrap`. */
+  @Input() labelTextFitMode?: FitMode | string
+
+  /** Label text trim mode: `TrimMode.Start`, `TrimMode.Middle` or `TrimMode.End`. Default: `TrimMode.Middle` */
+  @Input() labelTextTrimType?: TrimMode | string
+
   /** Font color of the axis label as CSS string. Default: `null` */
   @Input() labelColor?: string | null
 
@@ -104,6 +110,9 @@ export class VisAxisComponent<Datum> implements AxisConfigInterface<Datum>, Afte
   /** Draw only the min and max axis ticks. Default: `false` */
   @Input() minMaxTicksOnly?: boolean
 
+  /** Show grid lines for the min and max axis ticks. Default: `false` */
+  @Input() minMaxTicksOnlyShowGridLines?: boolean
+
   /** Draw only the min and max axis ticks, when the chart
    * width is less than the specified value.
    * Default: `250` */
@@ -174,8 +183,8 @@ export class VisAxisComponent<Datum> implements AxisConfigInterface<Datum>, Afte
   }
 
   private getConfig (): AxisConfigInterface<Datum> {
-    const { duration, events, attributes, position, type, fullSize, label, labelFontSize, labelMargin, labelColor, gridLine, tickLine, domainLine, minMaxTicksOnly, minMaxTicksOnlyWhenWidthIsLess, tickFormat, tickValues, numTicks, tickTextFitMode, tickTextWidth, tickTextSeparator, tickTextForceWordBreak, tickTextTrimType, tickTextFontSize, tickTextAlign, tickTextColor, tickTextAngle, tickTextHideOverlapping, tickPadding } = this
-    const config = { duration, events, attributes, position, type, fullSize, label, labelFontSize, labelMargin, labelColor, gridLine, tickLine, domainLine, minMaxTicksOnly, minMaxTicksOnlyWhenWidthIsLess, tickFormat, tickValues, numTicks, tickTextFitMode, tickTextWidth, tickTextSeparator, tickTextForceWordBreak, tickTextTrimType, tickTextFontSize, tickTextAlign, tickTextColor, tickTextAngle, tickTextHideOverlapping, tickPadding }
+    const { duration, events, attributes, position, type, fullSize, label, labelFontSize, labelMargin, labelTextFitMode, labelTextTrimType, labelColor, gridLine, tickLine, domainLine, minMaxTicksOnly, minMaxTicksOnlyShowGridLines, minMaxTicksOnlyWhenWidthIsLess, tickFormat, tickValues, numTicks, tickTextFitMode, tickTextWidth, tickTextSeparator, tickTextForceWordBreak, tickTextTrimType, tickTextFontSize, tickTextAlign, tickTextColor, tickTextAngle, tickTextHideOverlapping, tickPadding } = this
+    const config = { duration, events, attributes, position, type, fullSize, label, labelFontSize, labelMargin, labelTextFitMode, labelTextTrimType, labelColor, gridLine, tickLine, domainLine, minMaxTicksOnly, minMaxTicksOnlyShowGridLines, minMaxTicksOnlyWhenWidthIsLess, tickFormat, tickValues, numTicks, tickTextFitMode, tickTextWidth, tickTextSeparator, tickTextForceWordBreak, tickTextTrimType, tickTextFontSize, tickTextAlign, tickTextColor, tickTextAngle, tickTextHideOverlapping, tickPadding }
     const keys = Object.keys(config) as (keyof AxisConfigInterface<Datum>)[]
     keys.forEach(key => { if (config[key] === undefined) delete config[key] })
 

packages/angular/src/html-components/bullet-legend/bullet-legend.component.ts

@@ -49,6 +49,9 @@ export class VisBulletLegendComponent implements BulletLegendConfigInterface, Af
   /** Bullet shape size, mapped to the width and height CSS properties. Default: `null` */
   @Input() bulletSize?: string | null
 
+  /** Spacing between multiple bullet symbols in pixels. Default: `4` */
+  @Input() bulletSpacing?: number
+
   /** Bullet shape enum value or accessor function. Default: `d => d.shape ?? BulletShape.Circle */
   @Input() bulletShape?: GenericAccessor<BulletShape, BulletLegendItemInterface>
 
@@ -67,8 +70,8 @@ export class VisBulletLegendComponent implements BulletLegendConfigInterface, Af
   }
 
   private getConfig (): BulletLegendConfigInterface {
-    const { items, labelClassName, onLegendItemClick, labelFontSize, labelMaxWidth, bulletSize, bulletShape, orientation } = this
-    const config = { items, labelClassName, onLegendItemClick, labelFontSize, labelMaxWidth, bulletSize, bulletShape, orientation }
+    const { items, labelClassName, onLegendItemClick, labelFontSize, labelMaxWidth, bulletSize, bulletSpacing, bulletShape, orientation } = this
+    const config = { items, labelClassName, onLegendItemClick, labelFontSize, labelMaxWidth, bulletSize, bulletSpacing, bulletShape, orientation }
     const keys = Object.keys(config) as (keyof BulletLegendConfigInterface)[]
     keys.forEach(key => { if (config[key] === undefined) delete config[key] })
 

packages/dev/src/examples/xy-components/axis/axis-min-max-ticks-only/index.tsx

@@ -0,0 +1,53 @@
+import React, { useCallback, useMemo } from 'react'
+import { VisXYContainer, VisAxis, VisLine } from '@unovis/react'
+import { XYDataRecord, generateXYDataRecords } from '@src/utils/data'
+import { ExampleViewerDurationProps } from '@src/components/ExampleViewer/index'
+
+export const title = 'Axis Min-Max Ticks Only'
+export const subTitle = 'Show Grid Lines'
+
+export const component = (props: ExampleViewerDurationProps): React.ReactNode => {
+  const accessors = useMemo(() => [
+    (d: XYDataRecord) => d.y,
+    (d: XYDataRecord) => d.y1,
+    (d: XYDataRecord) => d.y2,
+  ], [])
+
+  const data = useMemo(() => generateXYDataRecords(15), [])
+
+  const tickFormatter = useCallback((tick: number | Date) => `${(+tick).toFixed(1)}`, [])
+  return (
+    <>
+      <code>Default: No Grid Lines</code>
+      <VisXYContainer<XYDataRecord> data={data}>
+        <VisLine x={d => d.x} y={accessors} duration={props.duration}/>
+        <VisAxis type='x' tickFormat={tickFormatter} duration={props.duration} minMaxTicksOnly={true} />
+        <VisAxis type='y' tickFormat={tickFormatter} duration={props.duration} minMaxTicksOnly={true} />
+      </VisXYContainer>
+
+      <code><b>minMaxTicksOnlyShowGridLines: true</b></code>
+      <VisXYContainer<XYDataRecord> data={data}>
+        <VisLine x={d => d.x} y={accessors} duration={props.duration}/>
+        <VisAxis type='x' tickFormat={tickFormatter} duration={props.duration} minMaxTicksOnly={true} minMaxTicksOnlyShowGridLines={true}/>
+        <VisAxis type='y' tickFormat={tickFormatter} duration={props.duration} minMaxTicksOnly={true} minMaxTicksOnlyShowGridLines={true}/>
+      </VisXYContainer>
+
+      <code><b>minMaxTicksOnlyShowGridLines: true</b><br />
+      Custom tickValues for xAxis: [0, 2, 4, 6]. <br />
+      No grid line at 10.2, because it's too close to the previous grid line.
+      </code>
+      <VisXYContainer<XYDataRecord> data={data} yDomain={[0, 10.2]}>
+        <VisLine x={d => d.x} y={accessors} duration={props.duration}/>
+        <VisAxis
+          type='x'
+          tickFormat={tickFormatter}
+          duration={props.duration}
+          minMaxTicksOnly={true}
+          minMaxTicksOnlyShowGridLines={true}
+          tickValues={[0, 2, 4, 6]}
+        />
+        <VisAxis type='y' tickFormat={tickFormatter} duration={props.duration} minMaxTicksOnly={true} minMaxTicksOnlyShowGridLines={true}/>
+      </VisXYContainer>
+    </>
+  )
+}

packages/ts/src/components/axis/config.ts

@@ -33,6 +33,8 @@ export interface AxisConfigInterface<Datum> extends Partial<XYComponentConfigInt
   domainLine?: boolean;
   /** Draw only the min and max axis ticks. Default: `false` */
   minMaxTicksOnly?: boolean;
+  /** Show grid lines for the min and max axis ticks. Default: `false` */
+  minMaxTicksOnlyShowGridLines?: boolean;
   /** Draw only the min and max axis ticks, when the chart
    * width is less than the specified value.
    * Default: `250` */
@@ -84,6 +86,7 @@ export const AxisDefaultConfig: AxisConfigInterface<unknown> = {
   numTicks: undefined,
   minMaxTicksOnly: false,
   minMaxTicksOnlyWhenWidthIsLess: 250,
+  minMaxTicksOnlyShowGridLines: false,
   tickTextWidth: undefined,
   tickTextSeparator: undefined,
   tickTextForceWordBreak: false,

packages/ts/src/components/axis/index.ts

@@ -1,6 +1,7 @@
 import { select, Selection } from 'd3-selection'
 import { interrupt } from 'd3-transition'
 import { Axis as D3Axis, axisBottom, axisLeft, axisRight, axisTop } from 'd3-axis'
+import { NumberValue } from 'd3-scale'
 
 // Core
 import { XYComponentCore } from 'core/xy-component'
@@ -137,8 +138,7 @@ export class Axis<Datum> extends XYComponentCore<Datum, AxisConfigInterface<Datu
     this._renderAxisLabel(selection)
 
     if (config.gridLine) {
-      const gridGen = this._buildGrid().tickFormat(() => '')
-      gridGen.tickValues(this._getConfiguredTickValues())
+      const gridGen = this._buildGrid()
       // Interrupting all active transitions first to prevent them from being stuck.
       // Somehow we see it happening in Angular apps.
       this.gridGroup.selectAll('*').interrupt()
@@ -169,29 +169,70 @@ export class Axis<Datum> extends XYComponentCore<Datum, AxisConfigInterface<Datu
     }
   }
 
-  private _buildGrid (): D3Axis<any> {
-    const { config: { type, position } } = this
+  private _buildGrid (): D3Axis<NumberValue | Date> {
+    const { config } = this
 
-    const ticks = this._getNumTicks()
-    switch (type) {
+    let gridGen: D3Axis<NumberValue | Date>
+    switch (config.type) {
       case AxisType.X:
-        switch (position) {
-          case Position.Top: return axisTop(this.xScale).ticks(ticks * 2).tickSize(-this._height).tickSizeOuter(0)
-          case Position.Bottom: default: return axisBottom(this.xScale).ticks(ticks * 2).tickSize(-this._height).tickSizeOuter(0)
+        switch (config.position) {
+          case Position.Top: { gridGen = axisTop(this.xScale); break }
+          case Position.Bottom: default: { gridGen = axisBottom(this.xScale); break }
         }
+        gridGen.tickSize(-this._height)
+        break
       case AxisType.Y:
-        switch (position) {
-          case Position.Right: return axisRight(this.yScale).ticks(ticks * 2).tickSize(-this._width).tickSizeOuter(0)
-          case Position.Left: default: return axisLeft(this.yScale).ticks(ticks * 2).tickSize(-this._width).tickSizeOuter(0)
+        switch (config.position) {
+          case Position.Right: { gridGen = axisRight(this.yScale); break }
+          case Position.Left: default: { gridGen = axisLeft(this.yScale); break }
         }
+        gridGen.tickSize(-this._width)
     }
+    gridGen
+      .tickSizeOuter(0)
+      .tickFormat(() => '')
+
+    const numTicks = this._getNumTicks() * 2
+    const gridScale = gridGen.scale<ContinuousScale>()
+    const scaleDomain = gridScale.domain()
+
+    const getGridMinMaxTicksOnlyValues = (): number[] | Date[] => {
+      if (!config.minMaxTicksOnlyShowGridLines) return scaleDomain
+
+      const tickValues = gridScale.ticks(numTicks)
+      if (tickValues.length < 2) return scaleDomain
+
+      // If the last tick is far enough from the domain max value, we add it to the tick values to draw the grid line
+      const tickValuesStep = +tickValues[1] - +tickValues[0]
+      const domainMaxValue = scaleDomain[1]
+      const diff = +domainMaxValue - +tickValues[tickValues.length - 1]
+
+      return diff > tickValuesStep / 2 ? [...tickValues, domainMaxValue] as (number[] | Date[]) : tickValues
+    }
+
+    const tickValues = config.tickValues
+      ? this._getConfiguredTickValues()
+      : this._shouldRenderMinMaxTicksOnly()
+        ? getGridMinMaxTicksOnlyValues()
+        : gridScale.ticks(numTicks)
+
+    gridGen.tickValues(tickValues)
+
+    return gridGen
   }
 
   private _renderAxis (selection = this.axisGroup, duration = this.config.duration): void {
     const { config } = this
 
     const axisGen = this._buildAxis()
-    const tickValues: (number[] | Date[]) = this._getConfiguredTickValues() || axisGen.scale<ContinuousScale>().ticks(this._getNumTicks())
+    const axisScale = axisGen.scale<ContinuousScale>()
+    const tickValues: (number[] | Date[]) =
+      config.tickValues
+        ? this._getConfiguredTickValues()
+        : this._shouldRenderMinMaxTicksOnly()
+          ? axisScale.domain()
+          : axisScale.ticks(this._getNumTicks())
+
     axisGen.tickValues(tickValues)
 
     // Interrupting all active transitions first to prevent them from being stuck.
@@ -344,13 +385,14 @@ export class Axis<Datum> extends XYComponentCore<Datum, AxisConfigInterface<Datu
       return config.tickValues.filter(v => (v >= scaleDomain[0]) && (v <= scaleDomain[1]))
     }
 
-    if (config.minMaxTicksOnly || (config.type === AxisType.X && this._width < config.minMaxTicksOnlyWhenWidthIsLess)) {
-      return scaleDomain as number[]
-    }
-
     return null
   }
 
+  private _shouldRenderMinMaxTicksOnly (): boolean {
+    const { config } = this
+    return config.minMaxTicksOnly || (config.type === AxisType.X && this._width < config.minMaxTicksOnlyWhenWidthIsLess)
+  }
+
   private _getFullDomainPath (tickSize = 0): string {
     const { config: { type } } = this
     switch (type) {

packages/website/docs/auxiliary/Axis.mdx

@@ -214,7 +214,7 @@ The specified count is only a hint, the axis can have more or fewer ticks depend
 Set the `minMaxTicksOnly` property to `true` if you only want to see the two end ticks on the axis.
 
 :::note
-To display the minimum and maximum ticks only when the chart width is limited (this behavior is enabed my default),
+To display the minimum and maximum ticks only when the chart width is limited (this behavior is enabled my default),
 you can use the `minMaxTicksOnlyWhenWidthIsLess` property (defaults to 250px). This helps avoid clutter in smaller visualizations while still
 providing essential information.
 :::
@@ -226,6 +226,17 @@ providing essential information.
   property="minMaxTicksOnly"/>
 
 
+When using `minMaxTicksOnly`, you can still show grid lines by setting `minMaxTicksOnlyShowGridLines` to `true`.
+
+<XYWrapperWithInput
+  minMaxTicksOnly={true}
+  {...axisProps()}
+  inputType="checkbox"
+  defaultValue={true}
+  property="minMaxTicksOnlyShowGridLines"
+  hiddenProps={{}}
+/>
+
 ### Set Ticks Explicitly
 You can customize the ticks displayed by providing the _Axis_ component with a number array.
 The following example only shows even values for x after getting the `tickValue` array from a filter function.