CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window
Data visualisations are meant to visualise data in a intuitive and visually appealing way.
This component provides .css
, .styl
, .less
and .scss
-files.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-core/data-visualization@17.0.30-alpha.8
Table of Contents
Edit this section, Opens in new windowUsage
<div class="if visualization legend">
<div class="if item">
<div class="if symbol" style="background-color: #0054f0;"></div>
<div class="if set">
<div class="if value">33%</div>
<div class="if name">If P&C Insurance Ltd</div>
</div>
</div>
<div class="if item">
<div class="if symbol" style="background-color: #e8e0d9;"></div>
<div class="if set">
<div class="if value">67%</div>
<div class="if name">Competitors</div>
</div>
</div>
</div>
<div class="if visualization legend">
<div class="if item">
<div class="if symbol line" style="background-color: #0054f0;"></div>
<div class="if set">
<div class="if value">33%</div>
<div class="if name">If P&C Insurance Ltd</div>
</div>
</div>
<div class="if item">
<div class="if symbol line" style="background-color: #e8e0d9;"></div>
<div class="if set">
<div class="if value">67%</div>
<div class="if name">Competitors</div>
</div>
</div>
</div>
<div class="if visualization infographic box">
<span class="if text">
<span class="if number">
2 000 000
</span>
<span class="if postfix">SEK</span>
</span>
<span class="if description">
New customers throughout the fiscal year 2019 and 2020
</span>
</div>
<div class="if visualization infographic box transparent">
<span class="if text">
<span class="if number heavy">9,4</span>
</span>
<span class="if description">
Text to explain the number above
</span>
</div>
<div class="if visualization infographic box highlight">
<span class="if text">
<span class="if number heavy">9,4</span>
</span>
<span class="if description">
Text to explain the number above
</span>
</div>
Tokens
Highlight
Name | Value | Example |
---|---|---|
$ids-data-visualization-color-highlight-100 |
rgb(0, 84, 240) |
|
$ids-data-visualization-color-highlight-blue |
rgb(0, 84, 240) |
Subtle
Name | Value | Example |
---|---|---|
$ids-data-visualization-color-subtle-100 |
rgb(241, 236, 232) |
|
$ids-data-visualization-color-subtle-200 |
rgb(237, 230, 225) |
|
$ids-data-visualization-color-subtle-300 |
rgb(232, 224, 217) |
Chromatic
Name | Value | Example |
---|---|---|
$ids-data-visualization-color-chromatic-100 |
rgb(255, 201, 166) |
|
$ids-data-visualization-color-chromatic-200 |
rgb(255, 133, 105) |
|
$ids-data-visualization-color-chromatic-300 |
rgb(128, 92, 92) |
|
$ids-data-visualization-color-chromatic-400 |
rgb(255, 224, 130) |
|
$ids-data-visualization-color-chromatic-500 |
rgb(252, 199, 79) |
|
$ids-data-visualization-color-chromatic-600 |
rgb(176, 135, 89) |
|
$ids-data-visualization-color-chromatic-700 |
rgb(181, 237, 232) |
|
$ids-data-visualization-color-chromatic-800 |
rgb(135, 199, 186) |
|
$ids-data-visualization-color-chromatic-900 |
rgb(107, 153, 148) |
|
$ids-data-visualization-color-chromatic-1000 |
rgb(151, 226, 247) |
|
$ids-data-visualization-color-chromatic-1100 |
rgb(76, 176, 211) |
|
$ids-data-visualization-color-chromatic-1200 |
rgb(83, 146, 178) |
|
$ids-data-visualization-color-chromatic-dark-red |
rgb(255, 201, 166) |
|
$ids-data-visualization-color-chromatic-red |
rgb(255, 133, 105) |
|
$ids-data-visualization-color-chromatic-light-red |
rgb(128, 92, 92) |
|
$ids-data-visualization-color-chromatic-dark-yellow |
rgb(255, 224, 130) |
|
$ids-data-visualization-color-chromatic-yellow |
rgb(252, 199, 79) |
|
$ids-data-visualization-color-chromatic-light-yellow |
rgb(176, 135, 89) |
|
$ids-data-visualization-color-chromatic-dark-green |
rgb(181, 237, 232) |
|
$ids-data-visualization-color-chromatic-green |
rgb(135, 199, 186) |
|
$ids-data-visualization-color-chromatic-light-green |
rgb(107, 153, 148) |
|
$ids-data-visualization-color-chromatic-dark-blue |
rgb(151, 226, 247) |
|
$ids-data-visualization-color-chromatic-blue |
rgb(76, 176, 211) |
|
$ids-data-visualization-color-chromatic-light-blue |
rgb(83, 146, 178) |
Monochrome
Name | Value | Example |
---|---|---|
$ids-data-visualization-color-monochrome-100 |
rgb(226, 223, 222) |
|
$ids-data-visualization-color-monochrome-200 |
rgb(197, 192, 190) |
|
$ids-data-visualization-color-monochrome-300 |
rgb(168, 160, 158) |
|
$ids-data-visualization-color-monochrome-400 |
rgb(139, 129, 126) |
|
$ids-data-visualization-color-monochrome-500 |
rgb(110, 98, 94) |
|
$ids-data-visualization-color-monochrome-600 |
rgb(88, 78, 75) |
|
$ids-data-visualization-color-monochrome-700 |
rgb(66, 58, 56) |
|
$ids-data-visualization-color-monochrome-800 |
rgb(44, 39, 37) |
|
$ids-data-visualization-color-monochrome-900 |
rgb(21, 19, 18) |
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
14.22.2 (2022-05-03)
Miscellaneous chores
- package locks: update package locks (813eac7)
14.20.1 (2022-04-19)
Miscellaneous chores
- changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
- changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270
14.19.0 (2022-04-13)
Documentation Updates
- โ๏ธ Update documentation elements to prepare for Dark
Mode (7b0b859)
. We are utilizing some of the IDS components when documenting our
components, and these elements needed to be updated with the
.ids-doc
CSS flag so we can add themes to them. In the same change, we also ammended some of the documentation to be more up to speed with current state.
14.18.3 (2022-04-13)
Bug Fixes
- changelog: generate new CHANGELOG.md files for root and
packages (349fda4)
,
closes #586063
. We regenerate the files to include all relevant commits and to use
conventional-commits
at 100%
14.16.0 (2022-04-07)
Bug Fixes
14.11.2 (2022-03-21)
Bug Fixes
-
๐ Center text in infographic box (2b52789) , closes #570549
-
๐ Make sure text block stays visible (1cd7110) , closes #570549
Code Refactoring
14.9.0 (2022-03-03)
Miscellaneous chores
- ๐ค Bootstrap (6822f5b)
14.8.1 (2022-02-23)
Bug Fixes
reinstall (d425056)
merge (2b1c5f1)
14.6.0 (2022-02-16)
Features
-
๐ธ Add css variables to data-visualization com and new (bd15e08) , closes #544242 . token hierarchy
reinstall (5221600)
reinstall (147df55)
- use correct versions (f1b5deb)
14.3.0 (2022-02-09)
Bug Fixes
-
๐ Add correct space (d9e4d8c)
-
๐ Adjust greedy selector of .if.number in data-viz (d8d4eec)
-
๐ Use correct color tokens (e9c2283)
-
Use a better order for infographics colors (9626c36)
-
Add engines for all packages (e95dfff)
reinstall (afce1f2)
reinstall (67f3140)
-
Add changelog.md to files (3338314)
Reinstall (a2abf51)
14.2.2 (2021-12-10)
Code Refactoring
14.2.0 (2021-12-08)
Bug Fixes
-
๐ Use correct heading hierarchy for design documentation (6c54ae4) , closes #511303
-
rebuild and reinstall (f9fb687)
reinstall (885c74b)
-
fix changelogs manually (b1232b4)
reinstall (545a069)
reinstall (e149c2c)
13.12.3 (2021-11-09)
โ BREAKING CHANGES
- ๐งจ The scope for If Design System npm packages has now changed from
@if-design-system
to@ids-core
. We have also renamed the repository fromif-design-system
toids-core
- ๐งจ Util is now renamed to Utils
- ๐งจ We have now changed the navigation structure for the documentation site. Please update any saved links!
- ๐งจ Navigation structure has now changed. Please see release notes!
Bug Fixes
- ๐ Fix typo (e28aab1)
Documentation Updates
-
โ๏ธ Adjust documentation (8e77c36)
-
โ๏ธ Clean up for frontmatter and token generation (5fff306) , closes #490579
-
โ๏ธ Move position of the quick links (5cb0897)
-
โ๏ธ Remove unneeded margins for shortcuts (36c7e8d)
-
โ๏ธ Separate out CSS documentation (9030888) , closes #467386
-
โ๏ธ Update links and change navigation structure (0bfd27d) , closes #490579
Code Refactoring
-
๐ก Remove manual box-shadow on example (5cd6477)
-
๐ก Rename scope and repository (3ea5423)
-
๐ก Use new navigation structure for documentation (415aee5) , closes #490579
-
another change in the structure (38a0d2e)
Miscellaneous chores
bootstrap (6fc1ed8)
-
fix all old references to util (d57bf17)
reinstall (da80dba)
13.11.0 (2021-10-19)
Features
- ๐ธ Input field hot reload (eac76b7)
13.7.0 (2021-09-22)
Documentation Updates
- โ๏ธ Update linking layout and naming (15c383b)
13.6.3 (2021-09-17)
Bug Fixes
13.6.0 (2021-09-08)
Documentation Updates
bootstrap (d23e139)
- ๐ค Use correct order for diff (cc6a4fd)
12.14.1 (2021-08-12)
Miscellaneous chores
12.13.1 (2021-08-11)
Bug Fixes
-
๐ Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621
-
๐ค Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"
-
๐ค Rebuild variables (846fa3e)
-
๐ค Reinstall (e660696)
-
๐ค Update published date (61e7ccf)
12.6.0 (2021-05-27)
Bug Fixes
-
๐ Manually set firstPublished and lastModified (e83af7d)
-
๐ We don't need lastModified (e458a12)
12.3.0 (2021-05-19)
Features
-
๐ธ Add data visualization components (b0b6016)
-
๐ธ Add Data Visualization package (4e0f681) , closes #329024
Documentation Updates
bootstrap (682a5cf)