Component | Axis: Fixing tick text formatting; new CSS vars

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

@@ -147,7 +147,7 @@ export class VisAxisComponent<Datum> implements AxisConfigInterface<Datum>, Afte
   /** Maximum width in pixels for the tick text to be wrapped or trimmed. Default: `undefined` */
   @Input() tickTextWidth?: number
 
-  /** Tick text wrapping separator. String or array of strings. Default: `' '` */
+  /** Tick text wrapping separator. String or array of strings. Default: `undefined` */
   @Input() tickTextSeparator?: string | string[]
 
   /** Force word break for ticks when they don't fit. Default: `false` */

packages/dev/src/examples/xy-components/axis/single-axis/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Axis } from '@unovis/ts'
+import { VisXYContainer, VisAxis } from '@unovis/react'
+
+
+// Style
+import s from './style.module.css'
+
+export const title = 'Axis'
+export const subTitle = 'Single axis with styling'
+export const component = (): JSX.Element => {
+  return (
+    <VisXYContainer className={s.axis} xDomain={[0, 1000]} height={75}>
+      <VisAxis
+        type='x'
+        numTicks={10}
+        events={{
+          [Axis.selectors.tickLabel]: {
+            click: (tickValue: number) => alert(`Clicked tick: ${tickValue}`),
+          },
+        }}
+      />
+    </VisXYContainer>
+  )
+}

packages/dev/src/examples/xy-components/axis/single-axis/style.module.css

@@ -0,0 +1,5 @@
+.axis {
+    --vis-axis-tick-label-cursor: pointer;
+    --vis-axis-tick-label-text-decoration: underline;
+    --vis-axis-tick-label-color: #366ACE;
+}

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

@@ -37,7 +37,7 @@ export interface AxisConfigInterface<Datum> extends Partial<XYComponentConfigInt
   tickTextFitMode?: FitMode | string;
   /** Maximum width in pixels for the tick text to be wrapped or trimmed. Default: `undefined` */
   tickTextWidth?: number;
-  /** Tick text wrapping separator. String or array of strings. Default: `' '` */
+  /** Tick text wrapping separator. String or array of strings. Default: `undefined` */
   tickTextSeparator?: string | string[];
   /** Force word break for ticks when they don't fit. Default: `false` */
   tickTextForceWordBreak?: boolean;
@@ -62,7 +62,7 @@ export class AxisConfig<Datum> extends XYComponentConfig<Datum> implements AxisC
   numTicks = undefined
   minMaxTicksOnly = false
   tickTextWidth = undefined
-  tickTextSeparator = ' '
+  tickTextSeparator = undefined
   tickTextForceWordBreak = false
   tickTextTrimType = TrimMode.Middle
   tickTextFitMode = FitMode.Wrap

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

@@ -208,6 +208,7 @@ export class Axis<Datum> extends XYComponentCore<Datum, AxisConfig<Datum>, AxisC
     // will include exiting elements, so we're filtering them out.
     const tickText = selection.selectAll<SVGTextElement, number | Date>('g.tick > text')
       .filter(tickValue => tickValues.some(t => isEqual(tickValue, t))) // We use isEqual to compare Dates
+      .classed(s.tickLabel, true)
 
     // We interrupt the transition on tick's <text> to make it 'wrappable'
     tickText.nodes().forEach(node => interrupt(node))
@@ -228,6 +229,8 @@ export class Axis<Datum> extends XYComponentCore<Datum, AxisConfig<Datum>, AxisC
         const textOptions: UnovisTextOptions = {
           verticalAlign: config.type === AxisType.X ? VerticalAlign.Top : VerticalAlign.Middle,
           width: textMaxWidth,
+          separator: config.tickTextSeparator,
+          wordBreak: config.tickTextForceWordBreak,
         }
         renderTextToSvgTextElement(textElement, textBlock, textOptions)
       }

packages/ts/src/components/axis/style.ts

@@ -10,10 +10,12 @@ export const globalStyles = injectGlobal`
     /* --vis-axis-font-family: */
     --vis-axis-tick-color: #e8e9ef;
     /* --vis-axis-domain-color: // Undefined by default to allow fallback to var(--vis-axis-tick-color) */
-    --vis-axis-tick-label-color: #6c778c;
     --vis-axis-grid-color: #e8e9ef;
     --vis-axis-label-color: #6c778c;
+    --vis-axis-tick-label-color: #6c778c;
     --vis-axis-tick-label-font-size: 12px;
+    --vis-axis-tick-label-cursor: default;
+    --vis-axis-tick-label-text-decoration: none;
     --vis-axis-label-font-size: 14px;
     --vis-axis-tick-line-width: 1px;
     --vis-axis-grid-line-width: 1px;
@@ -93,6 +95,8 @@ export const tick = css`
   text, tspan {
     fill: var(--vis-axis-tick-label-color);
     font-family: var(--vis-axis-font-family, var(--vis-font-family));
+    cursor: var(--vis-axis-tick-label-cursor);
+    text-decoration: var(--vis-axis-tick-label-text-decoration);
     stroke: none;
   }
 `
@@ -105,6 +109,6 @@ export const label = css`
   text-anchor: middle;
 `
 
-export const tickText = css`
-  label: tick-text;
+export const tickLabel = css`
+  label: tick-label;
 `

packages/website/docs/auxiliary/Axis.mdx

@@ -116,28 +116,6 @@ Change the tick's label alignment with respect to the tick marker using `tickTex
   options={['right', 'center', 'left']}
   property="tickTextAlign"/>
 
-### Label Length
-To limit the string length of the tick labels, use the `tickTextLength` property:
-<XYWrapperWithInput
-  {...defaultProps()}
-  inputType="range"
-  defaultValue={10}
-  inputProps={{min: 1, max: 20}}
-  property="tickTextLength"
-  data={generateTimeSeries(10)}
-  hiddenProps={{gridLine: false, x: d => d.timestamp, tickFormat: d=> new Date(d).toDateString()}}
-/>
-
-### Label Trim Type
-When a tick label becomes too long, you can customize the trimming method with the `tickTextLength` property.
-_Axis_ accepts a `TrimMode` or a string. When we provide the previous example with `TrimMode.End` property, we can see the end of the label gets cut off instead of the middle.
-<XYWrapperWithInput inputType="select"
-  {...defaultProps()}
-  tickTextLength={10}
-  data={generateTimeSeries(10)}
-  hiddenProps={{gridLine: false, x: d => d.timestamp, tickFormat: d=> new Date(d).toDateString()}}
-  options={['start', 'middle', 'end']}
-  property="tickTextTrimType"/>
 
 ### Label Width
 To limit the width of the tick labels (in pixels), you can use the `tickTextWidth` property.
@@ -151,7 +129,7 @@ To limit the width of the tick labels (in pixels), you can use the `tickTextWidt
 />
 
 ### Label Fit Mode
-_Axis_ accepts the following values for the tickTextFitMode property: `FitMode.Wrap` or `FitMode.Trim`. This determines how the axis will
+_Axis_ accepts the following values for the `tickTextFitMode` property: `FitMode.Wrap` or `FitMode.Trim`. This determines how the axis will
 handle tick text overflow. The following example showcases the previous example using `"trim"` instead of `"wrap"`.
 <XYWrapperWithInput inputType="select"
   {...defaultProps()}
@@ -161,6 +139,18 @@ handle tick text overflow. The following example showcases the previous example
   options={['trim', 'wrap']}
   property="tickTextFitMode"/>
 
+### Label Trim Type
+When a tick label becomes too long, and you want to trim it, you can customize the trimming method with the `tickTextTrimType` property.
+_Axis_ accepts a `TrimMode` or a string. For example, when we configure `tickTextTrimType` to `TrimMode.Start`, we can see the start of the label gets cut off instead of the middle.
+<XYWrapperWithInput inputType="select"
+  {...defaultProps()}
+  tickTextFitMode="trim"
+  tickTextWidth={30}
+  data={generateTimeSeries(10)}
+  hiddenProps={{gridLine: false, x: d => d.timestamp, tickFormat: d=> new Date(d).toDateString()}}
+  options={['start', 'middle', 'end']}
+  property="tickTextTrimType"/>
+
 ### Force Word Break
 In addition, you can enable a forced word break for overflowing tick labels with the `tickTextForceWordBreak` property.
 <XYWrapperWithInput
@@ -253,6 +243,8 @@ The _Axis_ component supports additional styling via CSS variables that you can
 --vis-axis-grid-color: #e8e9ef;
 --vis-axis-label-color: #6c778c;
 --vis-axis-tick-label-font-size: 12px;
+--vis-axis-tick-label-cursor: default;
+--vis-axis-tick-label-text-decoration: none;
 --vis-axis-label-font-size: 14px;
 --vis-axis-tick-line-width: 1px;
 --vis-axis-grid-line-width: 1px;