Skip to content

Commit

Permalink
feat: lineCurve for parallel plot and line chart referenceLine utils …
Browse files Browse the repository at this point in the history 
…a11y additions

Co-authored-by: Chris DeMartini <74268675+chris-demartini@users.noreply.github.com>
  • Loading branch information
@david-kutas @chris-demartini
david-kutas and chris-demartini committed Feb 16, 2024
1 parent 7a8a1dc commit 405a67e
Show file tree
Hide file tree
Showing 27 changed files with 908 additions and 939 deletions.
33 changes: 18 additions & 15 deletions packages/line-chart/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -415,24 +415,25 @@ const mouseOutHandler = evt => {

### <a name="style-props" href="#style-props">#</a> Style Props [<>](./src/components/line-chart/line-chart.tsx 'Source')

| Name | Type | Default Value(s) | Description |
| -------------- | -------- | ---------------- | ---------------------------------------------------------------------------------------------------------------- |
| `colorPalette` | string | 'diverging_RtoB' | Included color palettes can be found in our [color utility](../utils#colors). Overridden by colors. |
| `colors` | string[] | `undefined` | Accepts array of color strings or color values to customize colors beyond our palettes Colors assigned in order. |
| `dotRadius` | number | 4 | Sets the radius of data points, if visible. |
| `showDots` | boolean | true | When selected, makes data point dots visible. |
| `strokeWidth` | string | '2' | Changes stroke width of series lines. |
| Name | Type | Default Value(s) | Description |
| -------------- | -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `colorPalette` | string | 'diverging_RtoB' | Included color palettes can be found in our [color utility](../utils#colors). Overridden by colors. |
| `colors` | string[] | `undefined` | Accepts array of color strings or color values to customize colors beyond our palettes Colors assigned in order. |
| `dotRadius` | number | 4 | Sets the radius of data points, if visible. |
| `lineCurve` | string | 'linear' | Sets the d3 curve of the line, accepts 'linear' or 'step'. Refer to [d3-shape curve docs](https://d3js.org/d3-shape/curve) for more details. Note: VCC enables only select curve options from D3. |
| `showDots` | boolean | true | When selected, makes data point dots visible. |
| `strokeWidth` | string | '2' | Changes stroke width of series lines. |

<br>
<br>

### <a name="reference-line-props" href="#reference-line-props">#</a> Reference Line Props _Deprecated_[<>](./src/components/line-chart/line-chart.tsx 'Source')
### <a name="reference-line-props" href="#reference-line-props">#</a> Reference Line Props [<>](./src/components/line-chart/line-chart.tsx 'Source')

The referenceLines and referenceStyle props are currently deprecated and will ultimately be fully replaced with the annotation prop. For the time being, this prop will work, but will also not pass accessibility requirements.

| Name | Type | Default Value(s) | Description |
| ---------------- | -------------------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `referenceLines` | object[] | [] | Data that sets the location and labeling of the reference line |
| `referenceLines` | object[] | [] | Data that sets the location and labeling of the reference line(s) _see object definition below_. ### IReferenceLineType |
| `referenceStyle` | object (custom type) | [IReferenceStyleType](../types/src/prop-types.ts) | Sets the styling of reference line(s) placed on the chart, _see object definition below_. ### IReferenceStyleType Definition |

#### IReferenceStyleType Definition
Expand All @@ -450,9 +451,11 @@ The referenceLines and referenceStyle props are currently deprecated and will ul

`referenceLines` is an array of objects which needs to have the following properties within them.

| Name | Type | Default Value(s) | Description |
| -------------------------- | ------ | ---------------- | --------------------------------------------------------------- |
| `label` | string | `undefined` | Sets the label to show for the reference line. |
| `labelPlacementHorizontal` | string | `undefined` | Sets the horizontal label placement for the reference line. |
| `labelPlacementVertical` | string | `undefined` | Sets the vertical label placement for the reference line. |
| `value` | number | `undefined` | Sets the value where to place the reference line, per the axis. |
| Name | Type | Default Value(s) | Description |
| ----------------------------- | ------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `label` | string | `undefined` | Sets the label to show for the reference line. |
| `labelPlacementHorizontal` | string | Chart horizontal layout mode: `left` or `middle` or `right`. Chart vertical layout mode: `top` or `bottom`. | Sets the horizontal label placement for the reference line. |
| `labelPlacementVertical` | string | Chart horizontal layout mode: `left` or `right`. Chart vertical layout mode: `top` or `middle` or `bottom`. | Sets the vertical label placement for the reference line. |
| `value` | number | `undefined` | Sets the value where to place the reference line, per the axis. |
| `accessibilityDescription` | string | `undefined` | Descriptive text for the reference line which will be provided to screen reader users via VCCs accessibility description's [setAccessAnnotation](../utils#setAccessAnnotation) utility. |
| `accessibilityDecorationOnly` | boolean | `undefined` | When the reference line is decorative (e.g., does not provide any additional information), set accessibilityDecorationOnly to true to avoid unnecessary reference line content in VCCs accessibility descriptions. |
12 changes: 11 additions & 1 deletion packages/line-chart/src/components/app-line-chart/app-line-chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1961,6 +1961,7 @@ export class AppLineChart {
// numeralLocale: HU,
// skipValidation: false
// }}
lineCurve={'linear'}
// Chart Attributes (1/7)
mainTitle={'Line Chart in app'}
// animationConfig={this.animations}
Expand Down Expand Up @@ -2003,7 +2004,16 @@ export class AppLineChart {
clickHighlight={this.clickElement}
hoverHighlight={this.hoverElement}
interactionKeys={this.interactionKeys}
// referenceLines= {[{label:'Average',labelPlacementHorizontal:'right',labelPlacementVertical:'bottom',value:7300000000}]}
referenceLines={[
{
label: 'Average',
labelPlacementHorizontal: 'right',
labelPlacementVertical: 'top',
value: 7300000000,
accessibilityDescription: 'This reference line is a callout to the Average value, which is 100.',
accessibilityDecorationOnly: false
}
]}
secondaryLines={{
keys: [this.secondaryKey],
opacity: this.secondaryOpacity,
Expand Down
22 changes: 16 additions & 6 deletions packages/line-chart/src/components/line-chart/__snapshots__/line-chart.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -414,18 +414,22 @@ Array [
exports[`<line-chart> rendered-html reference line should pass referenceLines prop 1`] = `
<g aria-hidden="true" class="line-reference-line-group" data-testid="reference-line-group" focusable="false" role="presentation">
<g class=".line-reference" opacity="1" transform="translate(0,120.90544788768618)">
<line class="line-reference-line" opacity="0" x1="0" x2="537" y1="0" y2="0"></line>
<text class="line-reference-line-label" dx="0.1em" dy="0.3em" opacity="0" text-anchor="start" x="537" y="0"></text>
<g class="line-reference" data-testid="reference-g" opacity="1" transform="translate(0,120.90544788768618)">
<line class="line-reference-line" data-testid="reference-line" opacity="1" stroke-dasharray="" x1="0" x2="537" y1="0" y2="0" style="stroke: rgb(92, 92, 92); stroke-width: 1px;"></line>
<text class="line-reference-line-label" data-testid="reference-line-label" dx="0.5em" dy="0.3em" opacity="1" text-anchor="start" x="537" y="0" style="fill: rgb(92, 92, 92); paint-order: stroke; stroke: rgb(255, 255, 255); stroke-width: 4px;">
Average
</text>
</g>
</g>
`;
exports[`<line-chart> rendered-html reference line should pass referenceStyle prop 1`] = `
<g aria-hidden="true" class="line-reference-line-group" data-testid="reference-line-group" focusable="false" role="presentation">
<g class=".line-reference" opacity="1" transform="translate(0,120.90544788768618)">
<line class="line-reference-line" opacity="0" x1="0" x2="537" y1="0" y2="0"></line>
<text class="line-reference-line-label" dx="0.1em" dy="0.3em" opacity="0" text-anchor="start" x="537" y="0"></text>
<g class="line-reference" data-testid="reference-g" opacity="1" transform="translate(0,120.90544788768618)">
<line class="line-reference-line" data-testid="reference-line" opacity="0.65" stroke-dasharray="" x1="0" x2="537" y1="0" y2="0" style="stroke: rgb(34, 96, 146); stroke-width: 2.5px;"></line>
<text class="line-reference-line-label" data-testid="reference-line-label" dx="0.5em" dy="0.3em" opacity="1" text-anchor="start" x="537" y="0" style="fill: rgb(34, 96, 146); paint-order: stroke; stroke: rgb(255, 255, 255); stroke-width: 4px;">
Average
</text>
</g>
</g>
`;
Expand Down Expand Up @@ -462,6 +466,9 @@ exports[`<line-chart> rendered-html render localization: should render localized
A diagram elsődleges vertikális Y tengelyt tartalmaz. Diagram címe Y Axis. Kezdeti erték érték 3Mrd, végső érték érték 10Mrd.
</p>
<p class="screen-reader-info vcl-access-notes" data-annotationlevel="h3" data-level="h4"></p>
<h3 class="screen-reader-info vcl-access-annotations-heading">
Diagram referencia vonalak száma: 0. Diagram magyarázatok száma: 0.
</h3>
</div>
<div class="o-layout--chart">
<h2 aria-hidden="true" class="line-main-title vcl-main-title" data-testid="main-title">
Expand Down Expand Up @@ -1054,6 +1061,9 @@ exports[`<line-chart> rendered-html render should render with minimal props[data
The chart has a primary vertical Y axis. Title Y Axis. Start value 3b, end value 10b.
</p>
<p class="screen-reader-info vcl-access-notes" data-annotationlevel="h3" data-level="h4"></p>
<h3 class="screen-reader-info vcl-access-annotations-heading">
Number of reference lines: 0. Number of annotations: 0.
</h3>
</div>
<div class="o-layout--chart">
<h2 aria-hidden="true" class="line-main-title vcl-main-title" data-testid="main-title">
Expand Down
1 change: 1 addition & 0 deletions packages/line-chart/src/components/line-chart/line-chart-default-values.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export class LineChartDefaultValues {
static readonly strokeWidth = propDefaultValues.strokeWidth2;
static readonly showDots = propDefaultValues.showDots;
static readonly dotRadius = propDefaultValues.dotRadius4;
static readonly lineCurve = propDefaultValues.lineCurve;
static readonly hoverOpacity = propDefaultValues.hoverOpacity;
static readonly cursor = propDefaultValues.cursor;

Expand Down
8 changes: 7 additions & 1 deletion packages/line-chart/src/components/line-chart/line-chart-props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,12 @@ export interface ILineChartProps {
* @groupName Style */
dotRadius: number;

/**
* @shortDescription Sets the curve of the line, default is linear
* @controlName Select
* @groupName Style */
lineCurve: string;

/**
* @shortDescription Array of values used to classify series as secondary
* @controlName TextArea
Expand Down Expand Up @@ -243,7 +249,7 @@ export interface ILineChartProps {
minValueOverride: number;

/**
* @shortDescription Data that sets the location and labeling of the reference line
* @shortDescription Data that sets the location and labeling of the reference line(s)
* @controlName TextArea
* @groupName Reference_Line */
referenceLines: object[];
Expand Down
Loading

0 comments on commit 405a67e

Please sign in to comment.