Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
feat(stacked-series-chart): Improvements
Browse files Browse the repository at this point in the history 
  - Css variables for: Grip gap, Track size, Extra margin (for long tick format)
  - Calculation for ticks in bar format. Supports gaps in series
  - Tick function to always provide less or equal number of ticks than tracks
  - Ticks collapse improved to calculate proper distance between ticks
  - Now component is more lightweight
  - Documentation updated!
  - E2E tests fixed accordingly
  • Loading branch information
@kennyamr @tomheller
kennyamr authored and tomheller committed Feb 22, 2022
1 parent eb0f8f9 commit 347c3fe
Show file tree
Hide file tree
Showing 25 changed files with 913 additions and 324 deletions.
26 changes: 14 additions & 12 deletions apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {
body,
chartContainer,
chartWidth1200Btn,
chartWidth400Btn,
chartWidth300Btn,
columnBtn,
columnChart,
continuousAxisFormat7f,
Expand Down Expand Up @@ -69,6 +69,7 @@ import {
unselectBtn,
valueAxis,
heatFieldTypeOverlap,
continuousAxisTypeNone,
} from './stacked-series-chart.po';

// Reduced speed of hovering should get our e2e tests stable.
Expand Down Expand Up @@ -286,7 +287,8 @@ test('should switch from full to compact on labelAxisMode auto', async (testCont
.expect(chartContainer.classNames)
.notContains(compactModeClassname)
.click(autoLabelAxisModeBtn)
.click(chartWidth400Btn)
.click(chartWidth300Btn)
.click(continuousAxisTypeNone)
.resizeWindowToFitDevice('ipad')
.wait(250) // Wait for the DtViewportResizer event to trigger
.expect(chartContainer.classNames)
Expand Down Expand Up @@ -335,7 +337,7 @@ test('should render linear chart with format and auto-fitting ticks', async (tes
// select column so that auto fit can be applied
.click(autoLabelAxisModeBtn)
.click(columnBtn)
.click(chartWidth400Btn)
.click(chartWidth300Btn)
.click(continuousAxisFormat7f)

// Check auto fitting ticks
Expand Down Expand Up @@ -377,17 +379,17 @@ test('should render date chart with format and auto-fitting ticks', async (testC
.click(autoLabelAxisModeBtn)
.click(columnBtn)
.expect(chartContainer.classNames)
.contains(compactModeClassname)
.notContains(compactModeClassname)

// Check track ticks again
.expect(labels.count)
.eql(28)
.eql(9)
.expect(getLabel(0).textContent)
.match(/11:35/)
.match(/11:45/)
.expect(getLabel(1).textContent)
.match(/11:40/)
.match(/12:00/)
.expect(getLabel(2).textContent)
.match(/11:45/)
.match(/12:15/)

// Check auto fitting ticks with long time format
.click(continuousAxisFormatLong)
Expand All @@ -396,13 +398,13 @@ test('should render date chart with format and auto-fitting ticks', async (testC

// Check track ticks
.expect(labels.count)
.eql(9)
.eql(4)
.expect(getLabel(0).textContent)
.match(/11:45:00:000AM/)
.match(/ Dec, 31 \/ 12:00:00:000-------- /)
.expect(getLabel(1).textContent)
.match(/12:00:00:000PM/)
.match(/ Dec, 31 \/ 12:30:00:000-------- /)
.expect(getLabel(2).textContent)
.match(/12:15:00:000PM/)
.match(/ Dec, 31 \/ 13:00:00:000-------- /)

// Check no compact mode with long width
.click(chartWidth1200Btn)
Expand Down
15 changes: 13 additions & 2 deletions apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,18 @@
[visibleLabel]="visibleLabel"
[labelAxisMode]="labelAxisMode"
[visibleTrackBackground]="visibleTrackBackground"
[maxTrackSize]="maxTrackSize"
[style.--dt-stacked-series-chart-grid-gap]="
!continuousAxisFormat ? '40px' : null
"
[style.--dt-stacked-series-chart-max-bar-size]="maxTrackSize + 'px'"
[style.--dt-stacked-series-chart-extra-margin]="
(!continuousAxisType ||
continuousAxisType === 'none' ||
continuousAxisFormat === continuousAxisFormatsByType.linear[1] ||
continuousAxisFormat === continuousAxisFormatsByType.date[1]
? 32
: 0) + 'px'
"
[continuousAxisType]="continuousAxisType"
[continuousAxisInterval]="continuousAxisInterval"
[continuousAxisFormat]="continuousAxisFormat"
Expand Down Expand Up @@ -177,7 +188,7 @@ <h6>HeatField data</h6>
1200px
</button>
<button (click)="setElementWidth('800px')" id="chart-width-800">800px</button>
<button (click)="setElementWidth('400px')" id="chart-width-400">400px</button>
<button (click)="setElementWidth('300px')" id="chart-width-300">300px</button>
</div>

<div>
Expand Down
2 changes: 1 addition & 1 deletion apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.po.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export const unselectBtn = Selector('#chart-unselect');

export const chartWidth1200Btn = Selector('#chart-width-1200');
export const chartWidth800Btn = Selector('#chart-width-800');
export const chartWidth400Btn = Selector('#chart-width-400');
export const chartWidth300Btn = Selector('#chart-width-300');

export const selectionModeNode = Selector('#chart-selection-mode-node');
export const selectionModeStack = Selector('#chart-selection-mode-stack');
Expand Down
2 changes: 1 addition & 1 deletion apps/components-e2e/src/components/stacked-series-chart/stacked-series-chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export class DtE2EStackedSeriesChart {
];
continuousAxisFormatsByType = {
linear: ['$.2f', '$.7f'],
date: ['%H:%M', '%H:%M:%S:%L%p'],
date: ['%H:%M', '%b, %d / %H:%M:%S:%L--------'],
};

continuousAxisMapByType = {
Expand Down
4 changes: 2 additions & 2 deletions apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
[labelAxisMode]="labelAxisMode"
[fillMode]="fillMode"
[mode]="mode"
[maxTrackSize]="maxTrackSize"
[style.--dt-stacked-series-chart-max-bar-size]="maxTrackSize + 'px'"
[visibleTrackBackground]="visibleTrackBackground"
[class]="mode"
>
Expand Down Expand Up @@ -69,7 +69,7 @@ <h4>Background</h4>

<h4>Max size</h4>
<dt-button-group [(value)]="maxTrackSize">
<dt-button-group-item value="">None</dt-button-group-item>
<dt-button-group-item value="0">None</dt-button-group-item>
<dt-button-group-item value="8">8</dt-button-group-item>
<dt-button-group-item value="16">16</dt-button-group-item>
<dt-button-group-item value="32">32</dt-button-group-item>
Expand Down
62 changes: 40 additions & 22 deletions libs/barista-components/stacked-series-chart/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,30 +38,48 @@ follow the same order given by the developer

### DtStackedSeriesChart

#### CSS variables

Styling variables with default value. One can be set by doing the following:

```css
dt-stacked-series-chart {
--dt-stacked-series-chart-grid-gap: 32px;
--dt-stacked-series-chart-max-bar-size: 32px;
--dt-stacked-series-chart-extra-margin: 16px;
}
```

| Name | Default | Description |
| ---------------------------------------- | -------- | -------------------------------------------------- |
| `--dt-stacked-series-chart-grid-gap` | `'16px'` | Gap between tracks |
| `--dt-stacked-series-chart-max-bar-size` | `'16px'` | Size of the track |
| `--dt-stacked-series-chart-extra-margin` | `'0px'` | For column type, extra margin for long tick format |

#### Inputs

| Name | Type | Default | Description |
| ------------------------ | --------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `mode` | `DtStackedSeriesChartMode` | `'bar'` | Display mode. |
| `series` | `DtStackedSeriesChartSeries[]` | - | Array of series with their nodes. |
| `heatFields` | `DtStackedSeriesHeatField[]` | - | Array of heat fields to be shown at the top -for columns- or at the left-side -for bars-. |
| `selectable` | `boolean` | false | Allow selections to be made on chart |
| `selected` | `[DtStackedSeriesChartSeries, DtStackedSeriesChartNode?]` | - | Current selection [series, node] node will be null if `selectionMode` is `stack` |
| `selectionMode` | `DtStackedSeriesChartSelectionMode` | 'node' | Whether to make just the nodes selectable or the whole stack. |
| `max` | `number \| undefined` | - | Max value in the chart. Useful when binding multiple stacked-series-chart. |
| `fillMode` | `DtStackedSeriesChartFillMode` | - | Whether each bar should be filled completely or should take into account their siblings and max. |
| `valueDisplayMode` | `DtStackedSeriesChartValueDisplayMode` | `'none'` | Sets the display mode for the stacked-series-chart values in legend to either 'none' 'percent' or 'absolute'. In single track chart value is displayed also in legend. For axis value 'none' falls back to 'absolute' |
| `legends` | `DtStackedSeriesChartLegend[]` | true | Array of legends that can be used to toggle bar nodes. As change detection is on push the changes will only affect when the reference is different. |
| `visibleLegend` | `boolean` | true | Visibility of the legend |
| `visibleTrackBackground` | `boolean` | true | Whether background should be transparent or show a background. |
| `visibleLabel` | `boolean` | true | Visibility of series label. |
| `visibleValueAxis` | `boolean` | true | Visibility of value axis. |
| `labelAxisMode` | `DtStackedSeriesChartLabelAxisMode` | `full` | Mode of the label axis, compact would make space for more labels. |
| `maxTrackSize` | `number` | 16 | Maximum size of the track. |
| `continuousAxisType` | `DtStackedSeriesChartValueContinuousAxisType` | `'none'` | Sets the type for continuous axis scale calculation to 'none', 'date' or 'linear'. Depending on the type, scale is created in specific way. |
| `continuousAxisInterval` | `TimeInterval` | - | In case we want a specific interval for ticks (every 5 mins, per day...). You can create custom intervals or install D3-time and use its built-in ones. If used, auto fitting ticks will be discarded |
| `continuousAxisFormat` | `string` | - | Specific format for tick label. It follows d3-format (https://github.com/d3/d3-format) for linear type and d3-time-format (https://github.com/d3/d3-time-format) for date type |
| `continuousAxisMap` | `DtStackedSeriesChartValueContinuousAxisMap` | - | Mapping function to create d3 domain. It is used for d3 understand the domain and build scales properly. If not defined, it will use an "Identity" function to return the label for every node |
| Name | Type | Default | Description |
| ------------------------ | --------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `mode` | `DtStackedSeriesChartMode` | `'bar'` | Display mode. |
| `series` | `DtStackedSeriesChartSeries[]` | - | Array of series with their nodes. |
| `heatFields` | `DtStackedSeriesHeatField[]` | - | Array of heat fields to be shown at the top -for columns- or at the left-side -for bars-. |
| `selectable` | `boolean` | false | Allow selections to be made on chart |
| `selected` | `[DtStackedSeriesChartSeries, DtStackedSeriesChartNode?]` | - | Current selection [series, node] node will be null if `selectionMode` is `stack` |
| `selectionMode` | `DtStackedSeriesChartSelectionMode` | 'node' | Whether to make just the nodes selectable or the whole stack. |
| `max` | `number \| undefined` | - | Max value in the chart. Useful when binding multiple stacked-series-chart. |
| `fillMode` | `DtStackedSeriesChartFillMode` | - | Whether each bar should be filled completely or should take into account their siblings and max. |
| `valueDisplayMode` | `DtStackedSeriesChartValueDisplayMode` | `'none'` | Sets the display mode for the stacked-series-chart values in legend to either 'none' 'percent' or 'absolute'. In single track chart value is displayed also in legend. For axis value 'none' falls back to 'absolute' |
| `legends` | `DtStackedSeriesChartLegend[]` | true | Array of legends that can be used to toggle bar nodes. As change detection is on push the changes will only affect when the reference is different. |
| `visibleLegend` | `boolean` | true | Visibility of the legend |
| `visibleTrackBackground` | `boolean` | true | Whether background should be transparent or show a background. |
| `visibleLabel` | `boolean` | true | Visibility of series label. |
| `visibleValueAxis` | `boolean` | true | Visibility of value axis. |
| `labelAxisMode` | `DtStackedSeriesChartLabelAxisMode` | `full` | Mode of the label axis, compact would make space for more labels. |
| `maxTrackSize` | `number` | 16 | Maximum size of the track. |
| `continuousAxisType` | `DtStackedSeriesChartValueContinuousAxisType` | `'none'` | Sets the type for continuous axis scale calculation to 'none', 'date' or 'linear'. Depending on the type, scale is created in specific way. |
| `continuousAxisInterval` | `TimeInterval` | - | (Only column mode) In case we want a specific interval for ticks (every 5 mins, per day...). You can create custom intervals or install D3-time and use its built-in ones. If used, auto fitting ticks will be discarded |
| `continuousAxisFormat` | `string` | - | Specific format for tick label. It follows d3-format (https://github.com/d3/d3-format) for linear type and d3-time-format (https://github.com/d3/d3-time-format) for date type |
| `continuousAxisMap` | `DtStackedSeriesChartValueContinuousAxisMap` | - | Mapping function to create d3 domain. It is used for d3 understand the domain and build scales properly. If not defined, it will use an "Identity" function to return the label for every node |

#### Outputs

Expand Down
6 changes: 5 additions & 1 deletion libs/barista-components/stacked-series-chart/src/_stacked-series-chart-shared.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
@import '../../core/src/style/variables';

$gap: calc(var(--dt-stacked-series-chart-grid-gap) * 1px);
$gap-default: 16px;
$bar-track-size-default: 16px;
$column-extra-margin-default: 0;

$gap: var(--dt-stacked-series-chart-grid-gap);
$heat-field-gap: 1px;
$heat-field-size: 8px;
$heat-field-size-selected: 12px;
Expand Down
Loading

0 comments on commit 347c3fe

Please sign in to comment.