CSS ComponentThe latest version of this package is: 17.0.30-alpha.0, 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.0

Usage

33%

If P&C Insurance Ltd

67%

Competitors

<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>

33%

If P&C Insurance Ltd

67%

Competitors

<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>

2 000 000SEKNew customers throughout the fiscal year 2019 and 2020

<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>

9,4Text to explain the number above

<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>

9,4Text to explain the number above

<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>

Edit this section

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)`

Edit this section

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

🐛 Add missing imports for global CSS Variables (fbf6f06) , closes #582437

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

💡 Convert to MDX (ca9fc9e) , closes #571189

14.9.0 (2022-03-03)

Miscellaneous chores

🤖 Bootstrap (6822f5b)

14.8.1 (2022-02-23)

Bug Fixes

🐛 Add missing imports of typography CSS variables (e716c65) , closes #559412

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

💡 Change focus styles, remove whatinput (75fd31b) , closes #505205

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)

reinstall.. again.. (8f5efa8)
revert to v13.12.2 (2ff5399)

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 from if-design-system to ids-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
✏️ Documentation adjustments (73c09e3) , closes #467386
✏️ 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

💡 Categorize components (9965266) , closes #490579
💡 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

🤖 Prune changelogs (2c660c2)
🤖 Rename util to utils (f78721f)

bootstrap (6fc1ed8)

fix all old references to util (d57bf17)

reinstall (da80dba)

Rename scope and repo (257684e)
use correct version for utils (49e72d9)

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

🐛 Update repository urls (3dae3a3) , closes #465976

13.6.0 (2021-09-08)

Documentation Updates

Use default shortcut listing for demo links (a746602)
🤖 Use node v14 (4009973)

bootstrap (d23e139)

🤖 Use correct order for diff (cc6a4fd)

12.14.1 (2021-08-12)

Miscellaneous chores

🤖 Add ci task to package.json without tests (21222e0) , closes #457627

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

✏️ Documentation fixes (ad1882a)
🤖 Reinstall (4c805f7)

bootstrap (682a5cf)

Edit this section

CSS ComponentThe latest version of this package is: 17.0.30-alpha.0, Opens in new window

Table of Contents

Usage

Tokens

Highlight

Subtle

Chromatic

Monochrome

Changelog

Change Log

14.22.2 (2022-05-03)

Miscellaneous chores

14.20.1 (2022-04-19)

Miscellaneous chores

14.19.0 (2022-04-13)

Documentation Updates

14.18.3 (2022-04-13)

Bug Fixes

14.16.0 (2022-04-07)

Bug Fixes

14.11.2 (2022-03-21)

Bug Fixes

Code Refactoring

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.1 (2022-02-23)

Bug Fixes

14.6.0 (2022-02-16)

Features

14.3.0 (2022-02-09)

Bug Fixes

14.2.2 (2021-12-10)

Code Refactoring

14.2.0 (2021-12-08)

Bug Fixes

13.12.3 (2021-11-09)

⚠ BREAKING CHANGES

Bug Fixes

Documentation Updates

Code Refactoring

Miscellaneous chores

13.11.0 (2021-10-19)

Features

13.7.0 (2021-09-22)

Documentation Updates

13.6.3 (2021-09-17)

Bug Fixes

13.6.0 (2021-09-08)

Documentation Updates

12.14.1 (2021-08-12)

Miscellaneous chores

12.13.1 (2021-08-11)

Bug Fixes

12.6.0 (2021-05-27)

Bug Fixes

12.3.0 (2021-05-19)

Features

Documentation Updates