├── .browserslistrc ├── .editorconfig ├── .eslintrc.js ├── .gitattributes ├── .github └── workflows │ ├── css.yml │ ├── docs.yml │ └── lint.yml ├── .gitignore ├── .htmlvalidate.json ├── .nvmrc ├── .pa11yci.json ├── .stylelintrc.json ├── LICENSE ├── README.md ├── _site ├── favicon.svg ├── humans.txt ├── img │ ├── hypothenuse.jpg │ ├── pie-1.jpg │ ├── pie-2.jpg │ └── pie-3.jpg ├── js │ └── script.js ├── scss │ ├── examples │ │ ├── bar.scss │ │ ├── column.scss │ │ ├── columns.scss │ │ ├── donut.scss │ │ ├── line.scss │ │ ├── lines.scss │ │ ├── pie.scss │ │ ├── polar.scss │ │ ├── radar.scss │ │ ├── radars.scss │ │ └── waterfall.scss │ ├── print.scss │ └── styles.scss └── templates │ ├── bar-charts.njk │ ├── column-charts.njk │ ├── css │ └── examples │ │ ├── bar.css │ │ ├── column.css │ │ ├── columns.css │ │ ├── donut.css │ │ ├── line.css │ │ ├── lines.css │ │ ├── pie.css │ │ ├── polar.css │ │ ├── radar.css │ │ ├── radars.css │ │ └── waterfall.css │ ├── includes │ ├── _bar-markup.njk │ ├── _column-markup.njk │ ├── _columns-markup.njk │ ├── _inclusive-toggle.njk │ ├── _line-markup.njk │ ├── _pie-markup.njk │ ├── _pie-styles:44.njk │ ├── _pie-styles:64.njk │ ├── _pie-styles:88.njk │ ├── _radar-markup.njk │ ├── _radars-markup.njk │ ├── _svg-encoding.njk │ └── _waterfall-markup.njk │ ├── index.njk │ ├── line-charts.njk │ ├── macros │ ├── _table-bar.njk │ ├── _table-line.njk │ └── _table-pie.njk │ ├── pie-charts.njk │ └── radar-charts.njk ├── chaarts.min.css ├── dist ├── chaarts.css ├── chaarts.css.map ├── chaarts.min.css └── chaarts.min.css.map ├── docs ├── bar-charts.html ├── column-charts.html ├── css │ ├── chaarts.min.css │ ├── chaarts.min.css.map │ ├── print.min.css │ ├── print.min.css.map │ ├── styles.min.css │ └── styles.min.css.map ├── favicon.svg ├── humans.txt ├── img │ ├── hypothenuse.jpg │ ├── pie-1.jpg │ ├── pie-2.jpg │ └── pie-3.jpg ├── index.html ├── js │ ├── prism.min.js │ ├── prism.min.js.map │ ├── scripts.min.js │ └── scripts.min.js.map ├── line-charts.html ├── pie-charts.html └── radar-charts.html ├── package-lock.json ├── package.json ├── purgecss.config.js ├── reports └── axe.json └── src ├── _chaarts-bar.scss ├── _chaarts-column-multiple.scss ├── _chaarts-column.scss ├── _chaarts-donut.scss ├── _chaarts-line.scss ├── _chaarts-pie.scss ├── _chaarts-points.scss ├── _chaarts-polar.scss ├── _chaarts-radar-multiple.scss ├── _chaarts-radar.scss ├── _chaarts-waterfall.scss ├── abstracts ├── _mixins.scss └── _variables.scss └── chaarts.scss /.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | root = true 5 | 6 | [*] 7 | # Change these settings to your own preference 8 | indent_style = tab 9 | indent_size = 2 10 | # We recommend you to keep these unchanged 11 | end_of_line = lf 12 | charset = utf-8 13 | trim_trailing_whitespace = true 14 | insert_final_newline = true 15 | max_line_length = off 16 | quote_type = double 17 | 18 | [*.{html,js,css,scss}] 19 | block_comment_start = /** 20 | block_comment = * 21 | block_comment_end = */ 22 | 23 | [*.{js}] 24 | quote_type = single 25 | max_line_length = 100 26 | 27 | [*.svg] 28 | insert_final_newline = false 29 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "env": { 3 | "browser": true 4 | }, 5 | "extends": "eslint:recommended", 6 | "ignorePatterns": ["_site/js/prism.js"], 7 | "parserOptions": { 8 | "ecmaVersion": 6 9 | } 10 | }; 11 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Enforce Unix newlines 2 | * text=auto eol=lf 3 | 4 | # Don't diff or textually merge source maps 5 | *.map binary 6 | -------------------------------------------------------------------------------- /.github/workflows/css.yml: -------------------------------------------------------------------------------- 1 | name: CSS 2 | 3 | on: 4 | push: 5 | branches-ignore: 6 | - "dependabot/**" 7 | pull_request: 8 | 9 | env: 10 | FORCE_COLOR: 2 11 | NODE: 18 12 | 13 | jobs: 14 | css: 15 | runs-on: ubuntu-latest 16 | 17 | steps: 18 | - name: Clone repository 19 | uses: actions/checkout@v2 20 | 21 | - name: Set up Node.js 22 | uses: actions/setup-node@v2 23 | with: 24 | node-version: "${{ env.NODE }}" 25 | 26 | - run: node --version 27 | - run: npm --version 28 | 29 | - name: Set up npm cache 30 | uses: actions/cache@v2 31 | with: 32 | path: ~/.npm 33 | key: ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} 34 | restore-keys: | 35 | ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} 36 | ${{ runner.os }}-node-v${{ env.NODE }}- 37 | 38 | - name: Install npm dependencies 39 | run: npm ci 40 | 41 | - name: Build CSS 42 | run: npm run build 43 | -------------------------------------------------------------------------------- /.github/workflows/docs.yml: -------------------------------------------------------------------------------- 1 | name: Docs 2 | 3 | on: 4 | push: 5 | branches-ignore: 6 | - "dependabot/**" 7 | pull_request: 8 | 9 | env: 10 | FORCE_COLOR: 2 11 | NODE: 18 12 | 13 | jobs: 14 | docs: 15 | runs-on: ubuntu-latest 16 | 17 | steps: 18 | - name: Clone repository 19 | uses: actions/checkout@v2 20 | 21 | - name: Set up Node.js 22 | uses: actions/setup-node@v2 23 | with: 24 | node-version: "${{ env.NODE }}" 25 | 26 | - run: node --version 27 | - run: npm --version 28 | 29 | - name: Set up npm cache 30 | uses: actions/cache@v2 31 | with: 32 | path: ~/.npm 33 | key: ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} 34 | restore-keys: | 35 | ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} 36 | ${{ runner.os }}-node-v${{ env.NODE }}- 37 | 38 | - name: Install npm dependencies 39 | run: npm ci 40 | 41 | - name: Build & test docs 42 | run: npm t 43 | -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: Lint 2 | 3 | on: 4 | push: 5 | branches-ignore: 6 | - "dependabot/**" 7 | pull_request: 8 | 9 | env: 10 | FORCE_COLOR: 2 11 | NODE: 18 12 | 13 | jobs: 14 | lint: 15 | runs-on: ubuntu-latest 16 | 17 | steps: 18 | - name: Clone repository 19 | uses: actions/checkout@v2 20 | 21 | - name: Set up Node.js 22 | uses: actions/setup-node@v2 23 | with: 24 | node-version: "${{ env.NODE }}" 25 | 26 | - run: node --version 27 | - run: npm --version 28 | 29 | - name: Set up npm cache 30 | uses: actions/cache@v2 31 | with: 32 | path: ~/.npm 33 | key: ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} 34 | restore-keys: | 35 | ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }} 36 | ${{ runner.os }}-node-v${{ env.NODE }}- 37 | 38 | - name: Install npm dependencies 39 | run: npm ci 40 | 41 | - name: Lint 42 | run: npm run lint 43 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # IDEs and editors 7 | /.idea 8 | /.vscode 9 | .project 10 | .classpath 11 | .c9/ 12 | *.launch 13 | .settings/ 14 | *.sublime-workspace 15 | 16 | # IDE - VSCode 17 | .vscode/* 18 | !.vscode/settings.json 19 | !.vscode/tasks.json 20 | !.vscode/launch.json 21 | !.vscode/extensions.json 22 | .history/* 23 | 24 | # misc 25 | /.sass-cache 26 | *.log 27 | 28 | # System Files 29 | .DS_Store 30 | Thumbs.db 31 | 32 | # Build 33 | docs/includes/ 34 | docs/css/print.css 35 | docs/css/styles.css 36 | docs/css/print.css.map 37 | docs/css/styles.css.map 38 | -------------------------------------------------------------------------------- /.htmlvalidate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "html-validate:recommended" 4 | ], 5 | "rules": { 6 | "aria-label-misuse": "off", 7 | "no-redundant-role": "off", 8 | "no-inline-style": "off" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 18 2 | -------------------------------------------------------------------------------- /.pa11yci.json: -------------------------------------------------------------------------------- 1 | { 2 | "standard": "WCAG2AA", 3 | "level": "warning", 4 | "concurrency": 1, 5 | "defaults": { 6 | "reporters": [ 7 | [ 8 | "pa11y-ci-reporter-html", 9 | { 10 | "destination": "./reports" 11 | } 12 | ] 13 | ], 14 | "wait": 3000, 15 | "runners": [ 16 | "axe" 17 | ], 18 | "timeout": 100000, 19 | "hideElements": "", 20 | "ignore": [ 21 | ], 22 | "defaults": { 23 | "chromeLaunchConfig": { 24 | "executablePath": "/snap/bin/chromium" 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard-scss", 3 | "plugins": [ 4 | "stylelint-scss", 5 | "stylelint-order" 6 | ], 7 | "rules": { 8 | "no-descending-specificity": null, 9 | "number-max-precision": 12, 10 | "custom-property-pattern": null, 11 | "scss/comment-no-empty": null, 12 | "order/properties-alphabetical-order": true 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Gaël Poupard 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # chaarts 2 | Charts with HTML & CSS 3 | -------------------------------------------------------------------------------- /_site/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | -------------------------------------------------------------------------------- /_site/humans.txt: -------------------------------------------------------------------------------- 1 | # humanstxt.org/ 2 | 3 | # TEAM 4 | 5 | Gaël Poupard — Initiateur du projet : développement, intégration, conception — @ffoodd_fr 6 | 7 | # TECHNOLOGY COLOPHON 8 | 9 | HTML5, CSS3, JS 10 | a11y.css 11 | -------------------------------------------------------------------------------- /_site/img/hypothenuse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ffoodd/chaarts/d8626ca00fb7d14d8d6e5007b852c0ccacf8d41b/_site/img/hypothenuse.jpg -------------------------------------------------------------------------------- /_site/img/pie-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ffoodd/chaarts/d8626ca00fb7d14d8d6e5007b852c0ccacf8d41b/_site/img/pie-1.jpg -------------------------------------------------------------------------------- /_site/img/pie-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ffoodd/chaarts/d8626ca00fb7d14d8d6e5007b852c0ccacf8d41b/_site/img/pie-2.jpg -------------------------------------------------------------------------------- /_site/img/pie-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ffoodd/chaarts/d8626ca00fb7d14d8d6e5007b852c0ccacf8d41b/_site/img/pie-3.jpg -------------------------------------------------------------------------------- /_site/js/script.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | "use strict"; 3 | 4 | // Toggle switch component 5 | const switches = document.querySelectorAll('[role="switch"]'); 6 | switches.forEach(el => { 7 | el.addEventListener('click', () => { 8 | const checked = el.getAttribute('aria-checked') === 'true' || false; 9 | el.setAttribute('aria-checked', !checked); 10 | 11 | if (el.classList.contains('disable-css')) { 12 | const chart = el.parentNode.nextElementSibling; 13 | chart.classList.toggle('chaarts'); 14 | handleTabindex(el.parentElement.parentElement); 15 | } 16 | }); 17 | }); 18 | 19 | // Scrollable tables or code blocks 20 | const regions = document.querySelectorAll('.scrollable-container, .chaarts-container'); 21 | regions.forEach(region => handleTabindex(region)); 22 | function handleTabindex(region) { 23 | const width = region.offsetWidth; 24 | const child = region.querySelector('table') || region.querySelector('code'); 25 | 26 | if (child.offsetWidth > width) { 27 | region.setAttribute('tabindex', '0'); 28 | } else { 29 | if (region.hasAttribute('tabindex')) { 30 | region.removeAttribute('tabindex'); 31 | } 32 | } 33 | } 34 | 35 | window.addEventListener('resize', () => { 36 | regions.forEach(region => handleTabindex(region)); 37 | }) 38 | 39 | // Toggles 40 | const toggles = document.querySelectorAll('.toggle'); 41 | toggles.forEach(toggle => { 42 | const buttons = toggle.querySelectorAll('button'); 43 | buttons.forEach(button => { 44 | button.addEventListener('click', () => { 45 | for (let button of buttons) { 46 | button.setAttribute('aria-pressed', 'false'); 47 | } 48 | button.setAttribute('aria-pressed', 'true'); 49 | }); 50 | }); 51 | }); 52 | 53 | // Dark mode 54 | if (! window.matchMedia('(prefers-contrast: more)').matches) { 55 | const switcher = document.getElementById('theme'); 56 | const options = switcher.querySelectorAll('button'); 57 | let button = document.querySelector('[data-scheme="none"]'); 58 | //// Then check for localStorage 59 | const currentTheme = localStorage.getItem('theme'); 60 | if (currentTheme) { 61 | document.documentElement.dataset.theme = currentTheme; 62 | if (currentTheme === 'dark') { 63 | button = document.querySelector('[data-scheme="dark"]'); 64 | } else if (currentTheme === 'light') { 65 | button = document.querySelector('[data-scheme="light"]'); 66 | } 67 | } 68 | button.setAttribute('aria-pressed', 'true'); 69 | 70 | //// Finally handle overriding through buttons 71 | options.forEach(option => { 72 | option.addEventListener('click', () => { 73 | switcher.querySelector('[aria-pressed="true"]').setAttribute('aria-pressed', 'false'); 74 | option.setAttribute('aria-pressed', 'true'); 75 | if (option.dataset.scheme === 'none') { 76 | delete document.documentElement.dataset.theme; 77 | localStorage.removeItem('theme'); 78 | } else { 79 | document.documentElement.dataset.theme = option.dataset.scheme; 80 | localStorage.setItem('theme', option.dataset.scheme); 81 | } 82 | }); 83 | }); 84 | } 85 | })(document); 86 | -------------------------------------------------------------------------------- /_site/scss/examples/bar.scss: -------------------------------------------------------------------------------- 1 | @use "sass:meta"; 2 | @include meta.load-css("../../../src/chaarts-bar"); 3 | -------------------------------------------------------------------------------- /_site/scss/examples/column.scss: -------------------------------------------------------------------------------- 1 | @use "sass:meta"; 2 | @include meta.load-css("../../../src/chaarts-column"); 3 | -------------------------------------------------------------------------------- /_site/scss/examples/columns.scss: -------------------------------------------------------------------------------- 1 | @use "sass:meta"; 2 | @include meta.load-css("../../../src/chaarts-column-multiple"); 3 | -------------------------------------------------------------------------------- /_site/scss/examples/donut.scss: -------------------------------------------------------------------------------- 1 | @use "sass:meta"; 2 | @include meta.load-css("../../../src/chaarts-donut"); 3 | -------------------------------------------------------------------------------- /_site/scss/examples/line.scss: -------------------------------------------------------------------------------- 1 | @use "sass:meta"; 2 | @include meta.load-css("../../../src/chaarts-line"); 3 | -------------------------------------------------------------------------------- /_site/scss/examples/lines.scss: -------------------------------------------------------------------------------- 1 | @use "sass:meta"; 2 | @include meta.load-css("../../../src/chaarts-points"); 3 | -------------------------------------------------------------------------------- /_site/scss/examples/pie.scss: -------------------------------------------------------------------------------- 1 | @use "sass:meta"; 2 | @include meta.load-css("../../../src/chaarts-pie"); 3 | -------------------------------------------------------------------------------- /_site/scss/examples/polar.scss: -------------------------------------------------------------------------------- 1 | @use "sass:meta"; 2 | @include meta.load-css("../../../src/chaarts-polar"); 3 | -------------------------------------------------------------------------------- /_site/scss/examples/radar.scss: -------------------------------------------------------------------------------- 1 | @use "sass:meta"; 2 | @include meta.load-css("../../../src/chaarts-radar"); 3 | -------------------------------------------------------------------------------- /_site/scss/examples/radars.scss: -------------------------------------------------------------------------------- 1 | @use "sass:meta"; 2 | @include meta.load-css("../../../src/chaarts-radar-multiple"); 3 | -------------------------------------------------------------------------------- /_site/scss/examples/waterfall.scss: -------------------------------------------------------------------------------- 1 | @use "sass:meta"; 2 | @include meta.load-css("../../../src/chaarts-waterfall"); 3 | -------------------------------------------------------------------------------- /_site/scss/print.scss: -------------------------------------------------------------------------------- 1 | @use "sseeeedd/src/sseeeedd-print"; 2 | -------------------------------------------------------------------------------- /_site/scss/styles.scss: -------------------------------------------------------------------------------- 1 | @use "sass:meta"; 2 | 3 | // ==================== 4 | // == Vendors 5 | // ==================== 6 | @layer sseeeedd { 7 | @include meta.load-css("sseeeedd/src/sseeeedd"); 8 | } 9 | -------------------------------------------------------------------------------- /_site/templates/bar-charts.njk: -------------------------------------------------------------------------------- 1 | {% extends "index.njk" %} 2 | 3 | {% block meta %} 4 | Bar charts — chaarts 5 | 6 | 7 | 8 | 9 | 10 | {% endblock %} 11 | 12 | {% block navigation %} 13 | 29 | {% endblock %} 30 | 31 | {% block main %} 32 |

Bar charts

33 | 34 |

35 | This type of graph is used to represent one-dimensional data 36 | (in our example, a timeline). 37 | It's based on CSS grids and custom properties, 38 | a technique inspired by 39 | an article by Miriam Suzanne on 40 | CSS Tricks 41 | with a slight enhancement to improve accessibility. 42 | Here's how to use it: 43 |

44 | 45 |
    46 |
  1. 47 | On the table itself, the --scale custom property is used to define the maximum value 48 | for the graph, 49 | in order to determine its scale. Concretely, a grid will be generated with: 50 | 63 |
    2. 64 |
  2. 65 | On each cell <td>, a --value custom property 66 | allows to place it on the grid, applied to grid-column-end. 67 | Moreover, thanks to clever calculations based on this value, the background gradient is sized 68 | and positioned to reflect the proportion represented by this value on the given scale 69 | (from green for almost nothing to red for almost everything). 70 |
    3. 71 |
  3. 72 | In each cell, the content must include the value and its unit in a 73 | <span> element, possibly tagged with <abbr> 74 | (and aria-label to complement title) if a title can explicit the unit. 75 | This value is pushed to the right of the grid, and its text serves as a mask for the background 76 | gradient — thanks to S. Shaw's trick to 77 | apply background-clip: text as a progressive enhancement — allowing it to be the 78 | corresponding color at the end of the gradient for the given position. 79 |
    4. 80 |
81 | 82 | {% import 'macros/_table-bar.njk' as table %} 83 |
84 |
85 |

86 | Switch
87 | Allows you to disable styles on the following table. 88 |

89 | 95 |
96 | 97 | 98 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | {{ table.bar('Time: backend', '4', 'ms', 'Millisecond', 'table') }} 111 | {{ table.bar('Time: Frontend', '96', 'ms', 'Millisecond', 'table') }} 112 | {{ table.bar('Delay: first byte', '102', 'ms', 'Millisecond', 'table') }} 113 | {{ table.bar('Delay: last byte', '129', 'ms', 'Millisecond', 'table') }} 114 | {{ table.bar('Delay: first image', '188', 'ms', 'Millisecond', 'table') }} 115 | {{ table.bar('Delay: first CSS', '194', 'ms', 'Millisecond', 'table') }} 116 | {{ table.bar('Delay: first JS', '326', 'ms', 'Millisecond', 'table') }} 117 | {{ table.bar('DOM Interactive', '836', 'ms', 'Millisecond', 'table') }} 118 | {{ table.bar('DOM loading', '836', 'ms', 'Millisecond', 'table') }} 119 | {{ table.bar('DOM complete', '2561', 'ms', 'Millisecond', 'table') }} 120 | {{ table.bar('HTTP traffic completed', '2980', 'ms', 'Millisecond', 'table') }} 121 | 122 |
99 | Loading time for 100 | ffoodd.fr 102 |
Cumulative loading time
123 |
124 | 125 |
126 | HTML 127 |
{% include 'includes/_bar-markup.njk' %}
128 |
129 |
130 | css 131 |
132 | 
{% filter escape %}{% include 'css/examples/bar.css' %}{% endfilter %}
133 |
134 |
135 | 136 |

Waterfall

137 | 138 |

139 | The principle is the same for this variant, except for one detail: we also manage 140 | the starting point for each measurement 141 | — which is, very simply, the value of the previous point… 142 | However, all the values must be passed as variables on the parent <table>. 143 |

144 | 145 |
146 |
147 |

148 | Switch
149 | Allows you to disable styles on the following table. 150 |

151 | 157 |
158 | 159 | 161 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | {{ table.bar('Time: backend', '4', 'ms', 'Millisecond', 'waterfall') }} 174 | {{ table.bar('Time: Frontend', '96', 'ms', 'Millisecond', 'waterfall') }} 175 | {{ table.bar('Delay: first byte', '102', 'ms', 'Millisecond', 'waterfall') }} 176 | {{ table.bar('Delay: last byte', '129', 'ms', 'Millisecond', 'waterfall') }} 177 | {{ table.bar('Delay: first image', '188', 'ms', 'Millisecond', 'waterfall') }} 178 | {{ table.bar('Delay: first CSS', '194', 'ms', 'Millisecond', 'waterfall') }} 179 | {{ table.bar('Delay: first JS', '326', 'ms', 'Millisecond', 'waterfall') }} 180 | {{ table.bar('DOM interactive', '836', 'ms', 'Millisecond', 'waterfall') }} 181 | {{ table.bar('DOM loading', '836', 'ms', 'Millisecond', 'waterfall') }} 182 | {{ table.bar('DOM complete', '2561', 'ms', 'Millisecond', 'waterfall') }} 183 | {{ table.bar('HTTP traffic completed', '2980', 'ms', 'Millisecond', 'waterfall') }} 184 | 185 |
162 | Loading time for 163 | ffoodd.fr 165 |
Cumulative loading time
186 |
187 | 188 |
189 | HTML 190 |
{% include 'includes/_waterfall-markup.njk' %}
191 |
192 |
193 | css 194 |
195 | 
{% filter escape %}{% include 'css/examples/waterfall.css' %}{% endfilter %}
196 |
197 |
198 | {% endblock %} 199 | -------------------------------------------------------------------------------- /_site/templates/column-charts.njk: -------------------------------------------------------------------------------- 1 | {% extends "index.njk" %} 2 | 3 | {% block meta %} 4 | Column charts — chaarts 5 | 6 | 7 | 8 | 9 | 10 | {% endblock %} 11 | 12 | {% block navigation %} 13 | 29 | {% endblock %} 30 | 31 | {% block main %} 32 |

Column charts

33 | 34 |

35 | Column chart is used for value distributions. 36 | The structure of the table is quite ordinary, but its formatting is based on 37 | display: grid; and especially display: contents; to 38 | facilitate the placement of the cells — technique inspired by 39 | 40 | Hidde De Vries's article More accessible markup with display: contents, 41 | and clarified by 42 | Ire Aderinokun's post How display: contents works. 43 |

44 | 45 |

The basic principle is the same as the bar charts:

46 |
    47 |
  1. 48 | the first grid row is the reserved to display value in case it reaches scale's max value, 49 | with a fixed size of 2ex 50 | — have a look to CSS 51 | units rudiments, documented in Every Layout by Andy Bell and Heydon Pickering ; 52 |
    2. 53 |
  2. 54 | the repeat() function applied with the --scale custom property 55 | enables us to handle a dynamic scale; 56 |
    3. 57 |
  3. 58 | <thead>, <tbody> and <tr> containers 59 | are neutralized in the grid structure using display: contents; 60 |
    4. 61 |
  4. 62 | each cell is placed on the grid depending its --value 63 | — its background color also depending on its value; 64 |
    5. 65 |
  5. 66 | its text value — wrapped in a <span> element — 67 | is positioned at the top of the column using the same trick as in the bar chart; 68 |
    6. 69 |
  6. 70 | and finally <colgroup> and <col> elements are used to display 71 | a light background for each column, which becomes more visible on :hover. 72 |
    7. 73 |
74 | 75 |
76 |
77 |

78 | Switch
79 | Allows you to disable styles on the following table. 80 |

81 | 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 |
Browser market shares in France in January 2019
BrowserChromeFirefoxSafariEdgeIEOthers
Market shares62%15%9%5%6%3%
123 |
124 | 125 |
126 | HTML 127 |
{% include 'includes/_column-markup.njk' %}
128 |
129 |
130 | css 131 |
132 | 
{% filter escape %}{% include 'css/examples/column.css' %}{% endfilter %}
133 |
134 |
135 | 136 |

Multiple columns

137 | 138 |

139 | In order to have two values for each main column, we must also have 140 | two subheadings. Concretely speaking: 141 |

142 | 143 |
    144 |
  1. 145 | we add a second row in <thead>: 146 | 163 |
    2. 164 |
  2. 165 | Styles: 166 | 189 |
    3. 190 |
191 | 192 |
193 |
194 |

195 | Switch
196 | Allows you to disable styles on the following table. 197 |

198 | 204 |
205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 |
Browser market shares in France in January 2019
BrowserChromeFirefoxSafariEdgeIE
Year2018201920182019201820192018201920182019
Market shares49.6%57%11.74%9.59%21.53%18.78%3.72%3.5%4.46%3.66%
255 |
256 | 257 |
258 | HTML 259 |
{% include 'includes/_columns-markup.njk' %}
260 |
261 |
262 | css 263 |
264 | 
{% filter escape %}{% include 'css/examples/columns.css' %}{% endfilter %}
265 |
266 |
267 | {% endblock %} 268 | -------------------------------------------------------------------------------- /_site/templates/css/examples/bar.css: -------------------------------------------------------------------------------- 1 | .chaarts.bar { 2 | --offset: 12.5em; 3 | } 4 | 5 | .chaarts.bar caption { 6 | text-align: initial; 7 | text-indent: calc(var(--offset) + 1rem); 8 | } 9 | 10 | .chaarts.bar tr { 11 | display: grid; 12 | grid-auto-rows: 1fr; 13 | grid-row-gap: 0.5rem; 14 | grid-template-columns: minmax(min-content, var(--offset)) repeat(var(--scale, 100), minmax(0, 1fr)) 10ch; 15 | transition: opacity 0.2s var(--move); 16 | } 17 | 18 | .chaarts.bar tr:nth-of-type(1n + 1) { 19 | --background: var(--checkers); 20 | } 21 | 22 | .chaarts.bar tr:nth-of-type(2n + 2) { 23 | --background: var(--hexagons); 24 | } 25 | 26 | .chaarts.bar tr:nth-of-type(3n + 3) { 27 | --background: var(--triangles); 28 | } 29 | 30 | .chaarts.bar tr:nth-of-type(4n + 4) { 31 | --background: var(--zig); 32 | } 33 | 34 | .chaarts.bar tr:nth-of-type(5n + 5) { 35 | --background: var(--stripes); 36 | } 37 | 38 | .chaarts.bar tr:nth-of-type(6n + 6) { 39 | --background: var(--dots); 40 | } 41 | 42 | .chaarts.bar th { 43 | grid-column: 1/1; 44 | margin: 0.5rem 0 0; 45 | padding: 0 1rem 0 0; 46 | text-align: end; 47 | } 48 | 49 | .chaarts.bar td { 50 | --size: calc(var(--scale, 100) * 100%); 51 | --position: calc(var(--value, 0) / var(--scale, 100) * 100%); 52 | background: linear-gradient(to right, var(--chaarts-green), var(--chaarts-gray), var(--chaarts-blue), var(--chaarts-purple), var(--chaarts-red)) var(--position) 0% / var(--size) 100%, var(--background) center/contain; 53 | background-blend-mode: hard-light; 54 | grid-column: 2 / max(2, var(--value, 0)); 55 | margin: 0.5rem 0 0; 56 | position: relative; 57 | } 58 | 59 | .chaarts.bar span { 60 | background: inherit; 61 | background-clip: text; 62 | color: transparent; 63 | font-weight: bold; 64 | inset-inline-start: 100%; 65 | line-height: 1.5; 66 | padding-inline-start: 0.5ch; 67 | position: absolute; 68 | } 69 | 70 | .chaarts.bar:hover tr { 71 | opacity: 0.5; 72 | } 73 | 74 | .chaarts.bar:hover tr:hover { 75 | opacity: 1; 76 | } 77 | 78 | @media (prefers-contrast: more) { 79 | .chaarts.bar td { 80 | background: var(--chaarts-blue); 81 | } 82 | .chaarts.bar span { 83 | background: var(--background-lighter); 84 | background-clip: unset; 85 | color: var(--chaarts-blue); 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /_site/templates/css/examples/column.css: -------------------------------------------------------------------------------- 1 | .chaarts[class*=column] { 2 | --gap: 0.5rem; 3 | --size: calc(var(--scale, 100) * 100%); 4 | --width: calc(64em / var(--y) - 1rem); 5 | display: grid; 6 | grid-column-gap: var(--gap); 7 | max-block-size: 64em; 8 | position: relative; 9 | } 10 | 11 | .chaarts[class*=column] td, 12 | .chaarts[class*=column] th, 13 | .chaarts[class*=column] col { 14 | grid-column: 1; 15 | margin: 0; 16 | } 17 | 18 | .chaarts[class*=column] tr > * + * { 19 | text-align: center; 20 | } 21 | 22 | .chaarts[class*=column] tr, 23 | .chaarts[class*=column] tbody, 24 | .chaarts[class*=column] thead, 25 | .chaarts[class*=column] colgroup { 26 | display: contents; 27 | } 28 | 29 | .chaarts[class*=column] caption { 30 | grid-column: 1/span var(--y); 31 | grid-row: -1; 32 | } 33 | 34 | .chaarts[class*=column] td { 35 | --integer: calc(var(--value)); 36 | grid-row: calc(var(--scale, 100) + 2 - var(--integer)) / -2; 37 | pointer-events: none; 38 | position: relative; 39 | transition: opacity 0.2s var(--move); 40 | } 41 | 42 | .chaarts[class*=column] td:nth-of-type(1) { 43 | grid-column: 2; 44 | } 45 | 46 | .chaarts[class*=column] td:nth-of-type(2) { 47 | grid-column: 3; 48 | } 49 | 50 | .chaarts[class*=column] td:nth-of-type(3) { 51 | grid-column: 4; 52 | } 53 | 54 | .chaarts[class*=column] td:nth-of-type(4) { 55 | grid-column: 5; 56 | } 57 | 58 | .chaarts[class*=column] td:nth-of-type(5) { 59 | grid-column: 6; 60 | } 61 | 62 | .chaarts[class*=column] td:nth-of-type(6) { 63 | grid-column: 7; 64 | } 65 | 66 | .chaarts[class*=column] td:nth-of-type(7) { 67 | grid-column: 8; 68 | } 69 | 70 | .chaarts[class*=column] td:nth-of-type(8) { 71 | grid-column: 9; 72 | } 73 | 74 | .chaarts[class*=column] td:nth-of-type(9) { 75 | grid-column: 10; 76 | } 77 | 78 | .chaarts[class*=column] td:nth-of-type(10) { 79 | grid-column: 11; 80 | } 81 | 82 | .chaarts[class*=column] span { 83 | background: inherit; 84 | background-clip: text; 85 | color: transparent; 86 | font-weight: bold; 87 | inset-block-end: 100%; 88 | inset-inline-end: 0; 89 | inset-inline-start: 0; 90 | line-height: 1.5; 91 | pointer-events: auto; 92 | position: absolute; 93 | } 94 | 95 | @media (prefers-contrast: more) { 96 | .chaarts[class*=column] span { 97 | background: var(--background-lighter); 98 | background-clip: unset; 99 | color: var(--chaarts-blue); 100 | } 101 | } 102 | .chaarts[class*=column] col { 103 | background: var(--background) var(--stripes); 104 | background-blend-mode: exclusion; 105 | grid-row: 1/-1; 106 | mix-blend-mode: color; 107 | opacity: 0.25; 108 | transition: opacity 0.3s var(--move); 109 | } 110 | 111 | .chaarts[class*=column] col:hover { 112 | opacity: 0.5; 113 | } 114 | 115 | .chaarts[class*=column] col:first-of-type { 116 | opacity: 0; 117 | } 118 | 119 | .chaarts[class*=column] col:nth-of-type(2), 120 | .chaarts[class*=column] thead tr *:nth-of-type(2) { 121 | grid-column: 2; 122 | } 123 | 124 | .chaarts[class*=column] col:nth-of-type(3), 125 | .chaarts[class*=column] thead tr *:nth-of-type(3) { 126 | grid-column: 3; 127 | } 128 | 129 | .chaarts[class*=column] col:nth-of-type(4), 130 | .chaarts[class*=column] thead tr *:nth-of-type(4) { 131 | grid-column: 4; 132 | } 133 | 134 | .chaarts[class*=column] col:nth-of-type(5), 135 | .chaarts[class*=column] thead tr *:nth-of-type(5) { 136 | grid-column: 5; 137 | } 138 | 139 | .chaarts[class*=column] col:nth-of-type(6), 140 | .chaarts[class*=column] thead tr *:nth-of-type(6) { 141 | grid-column: 6; 142 | } 143 | 144 | .chaarts[class*=column] col:nth-of-type(7), 145 | .chaarts[class*=column] thead tr *:nth-of-type(7) { 146 | grid-column: 7; 147 | } 148 | 149 | .chaarts[class*=column] col:nth-of-type(8), 150 | .chaarts[class*=column] thead tr *:nth-of-type(8) { 151 | grid-column: 8; 152 | } 153 | 154 | .chaarts[class*=column] col:nth-of-type(9), 155 | .chaarts[class*=column] thead tr *:nth-of-type(9) { 156 | grid-column: 9; 157 | } 158 | 159 | .chaarts[class*=column] col:nth-of-type(10), 160 | .chaarts[class*=column] thead tr *:nth-of-type(10) { 161 | grid-column: 10; 162 | } 163 | 164 | .chaarts.column-single { 165 | grid-auto-columns: 1fr; 166 | grid-template-rows: 2ex repeat(var(--scale, 100), minmax(0, 0.25rem)) minmax(min-content, 2rem); 167 | } 168 | 169 | .chaarts.column-single tbody th { 170 | grid-row: -6/-3; 171 | line-height: 1; 172 | } 173 | 174 | .chaarts.column-single thead * { 175 | grid-row: -2; 176 | } 177 | 178 | .chaarts.column-single td { 179 | --position: calc(var(--integer, 0) / var(--scale, 100) * 100%); 180 | background: linear-gradient(to top, var(--chaarts-green), var(--chaarts-gray), var(--chaarts-blue), var(--chaarts-purple), var(--chaarts-red)) 0% var(--position) / 100% var(--size), var(--background) center/1rem; 181 | background-blend-mode: hard-light; 182 | } 183 | 184 | .chaarts.column-single td:nth-of-type(1n + 1) { 185 | --background: var(--checkers); 186 | } 187 | 188 | .chaarts.column-single td:nth-of-type(2n + 2) { 189 | --background: var(--hexagons); 190 | } 191 | 192 | .chaarts.column-single td:nth-of-type(3n + 3) { 193 | --background: var(--triangles); 194 | } 195 | 196 | .chaarts.column-single td:nth-of-type(4n + 4) { 197 | --background: var(--zig); 198 | } 199 | 200 | .chaarts.column-single td:nth-of-type(5n + 5) { 201 | --background: var(--stripes); 202 | } 203 | 204 | .chaarts.column-single td:nth-of-type(6n + 6) { 205 | --background: var(--dots); 206 | } 207 | 208 | @media (prefers-contrast: more) { 209 | .chaarts.column-single td { 210 | background-color: var(--chaarts-blue); 211 | } 212 | } 213 | -------------------------------------------------------------------------------- /_site/templates/css/examples/columns.css: -------------------------------------------------------------------------------- 1 | .chaarts.column-multiple { 2 | grid-template-columns: minmax(min-content, 14ch) repeat(calc(var(--y) - 1), 1fr); 3 | grid-template-rows: 2ex repeat(var(--scale, 100), minmax(0, 0.25rem)) repeat(2, minmax(min-content, 2rem)); 4 | } 5 | 6 | .chaarts.column-multiple span { 7 | background-image: none; 8 | } 9 | 10 | .chaarts.column-multiple col:nth-child(odd) { 11 | opacity: 0; 12 | } 13 | 14 | .chaarts.column-multiple tbody th { 15 | grid-row: -10/span 7; 16 | } 17 | 18 | .chaarts.column-multiple thead tr * { 19 | grid-row: -2; 20 | } 21 | 22 | .chaarts.column-multiple col:nth-of-type(2), 23 | .chaarts.column-multiple thead tr *:nth-of-type(2) { 24 | grid-column: calc(4 - var(--span))/span var(--span); 25 | } 26 | 27 | .chaarts.column-multiple col:nth-of-type(3), 28 | .chaarts.column-multiple thead tr *:nth-of-type(3) { 29 | grid-column: calc(6 - var(--span))/span var(--span); 30 | } 31 | 32 | .chaarts.column-multiple col:nth-of-type(4), 33 | .chaarts.column-multiple thead tr *:nth-of-type(4) { 34 | grid-column: calc(8 - var(--span))/span var(--span); 35 | } 36 | 37 | .chaarts.column-multiple col:nth-of-type(5), 38 | .chaarts.column-multiple thead tr *:nth-of-type(5) { 39 | grid-column: calc(10 - var(--span))/span var(--span); 40 | } 41 | 42 | .chaarts.column-multiple col:nth-of-type(6), 43 | .chaarts.column-multiple thead tr *:nth-of-type(6) { 44 | grid-column: calc(12 - var(--span))/span var(--span); 45 | } 46 | 47 | .chaarts.column-multiple thead tr + tr * { 48 | font-weight: normal; 49 | grid-row: -3; 50 | } 51 | 52 | .chaarts.column-multiple thead tr + tr *:nth-of-type(2) { 53 | grid-column: 2; 54 | } 55 | 56 | .chaarts.column-multiple thead tr + tr *:nth-of-type(3) { 57 | grid-column: 3; 58 | } 59 | 60 | .chaarts.column-multiple thead tr + tr *:nth-of-type(4) { 61 | grid-column: 4; 62 | } 63 | 64 | .chaarts.column-multiple thead tr + tr *:nth-of-type(5) { 65 | grid-column: 5; 66 | } 67 | 68 | .chaarts.column-multiple thead tr + tr *:nth-of-type(6) { 69 | grid-column: 6; 70 | } 71 | 72 | .chaarts.column-multiple thead tr + tr *:nth-of-type(7) { 73 | grid-column: 7; 74 | } 75 | 76 | .chaarts.column-multiple thead tr + tr *:nth-of-type(8) { 77 | grid-column: 8; 78 | } 79 | 80 | .chaarts.column-multiple thead tr + tr *:nth-of-type(9) { 81 | grid-column: 9; 82 | } 83 | 84 | .chaarts.column-multiple thead tr + tr *:nth-of-type(10) { 85 | grid-column: 10; 86 | } 87 | 88 | .chaarts.column-multiple thead tr + tr *:nth-of-type(11) { 89 | grid-column: 11; 90 | } 91 | 92 | .chaarts.column-multiple td { 93 | background-color: var(--chaarts-pink); 94 | background-image: var(--zig); 95 | grid-row-end: -3; 96 | } 97 | 98 | .chaarts.column-multiple td:nth-of-type(2n + 2) { 99 | background: var(--chaarts-blue) var(--triangles); 100 | } 101 | -------------------------------------------------------------------------------- /_site/templates/css/examples/donut.css: -------------------------------------------------------------------------------- 1 | .chaarts.pie.donut { 2 | --mask: radial-gradient( 3 | circle at 50% calc(50% - 1.5rem), 4 | #0000 0 var(--offset), 5 | #ffff calc(var(--offset) + 1px) 100% 6 | ); 7 | mask-image: var(--mask); 8 | } 9 | 10 | .chaarts.pie.donut td::after { 11 | --away: calc(var(--radius) / 2 - 2.5rem); 12 | } 13 | -------------------------------------------------------------------------------- /_site/templates/css/examples/line.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | .chaarts.line { 3 | --offset: calc((100% / var(--x)) / 2); 4 | --height: calc(32em - 2rem); 5 | --bottom: calc(100% - var(--height)); 6 | padding: var(--height) 0 1rem; 7 | position: relative; 8 | transition: background 0.3s var(--move), color 0.3s var(--move); 9 | } 10 | 11 | .chaarts.line::after { 12 | --scale: calc((100% - (var(--y) * 1px)) / var(--y)); 13 | background: repeating-linear-gradient(to bottom, var(--scrollable-background) 0 var(--scale), var(--foreground-o-25) calc(var(--scale) + 1px)); 14 | content: ""; 15 | inline-size: 100%; 16 | inset-block-end: var(--bottom); 17 | inset-block-start: 0; 18 | position: absolute; 19 | z-index: 1; 20 | } 21 | 22 | .chaarts.line tr::before { 23 | content: ""; 24 | position: absolute; 25 | } 26 | 27 | .chaarts.line [scope=row], 28 | .chaarts.line thead th:first-child { 29 | color: var(--color, currentcolor); 30 | text-align: start; 31 | } 32 | 33 | .chaarts.line [style]::before { 34 | background: linear-gradient(to top, var(--chaarts-blue), var(--chaarts-red) 75%); 35 | clip-path: var(--polygon); 36 | content: ""; 37 | inline-size: 100%; 38 | inset-block-end: var(--bottom); 39 | inset-block-start: 0; 40 | position: absolute; 41 | scale: var(--is-rtl, 1) 1; 42 | z-index: 2; 43 | --polygon: polygon( 44 | 0% 100%, 45 | calc((100% / var(--x) * 1)) 100%, 46 | calc((100% / var(--x) * 1)) calc(100% - (var(--1) / var(--y) * 100%)), 47 | calc((100% / var(--x) * 1) + var(--offset)) calc(100% - (var(--1) / var(--y) * 100%)), 48 | calc((100% / var(--x) * 2) + var(--offset)) calc(100% - (var(--2) / var(--y) * 100%)), 49 | calc((100% / var(--x) * 3) + var(--offset)) calc(100% - (var(--3) / var(--y) * 100%)), 50 | calc((100% / var(--x) * 4) + var(--offset)) calc(100% - (var(--4) / var(--y) * 100%)), 51 | calc((100% / var(--x) * 5) + var(--offset)) calc(100% - (var(--5) / var(--y) * 100%)), 52 | calc((100% / var(--x) * 6) + var(--offset)) calc(100% - (var(--6) / var(--y) * 100%)), 53 | calc((100% / var(--x) * 7) + var(--offset)) calc(100% - (var(--7) / var(--y) * 100%)), 54 | calc((100% / var(--x) * 8) + var(--offset)) calc(100% - (var(--8) / var(--y) * 100%)), 55 | calc((100% / var(--x) * 9) + var(--offset)) calc(100% - (var(--9) / var(--y) * 100%)), 56 | calc((100% / var(--x) * 10) + var(--offset)) calc(100% - (var(--10) / var(--y) * 100%)), 57 | calc((100% / var(--x) * 11) + var(--offset)) calc(100% - (var(--11) / var(--y) * 100%)), 58 | calc((100% / var(--x) * 12) + var(--offset)) calc(100% - (var(--12) / var(--y) * 100%)), 59 | 100% calc(100% - (var(--12) / var(--y) * 100%)), 60 | 100% 100%, 61 | 0% 100% 62 | ); 63 | } 64 | 65 | @media (prefers-contrast: more) { 66 | .chaarts.line [style]::before { 67 | background: var(--chaarts-blue); 68 | } 69 | } 70 | .chaarts.line th, 71 | .chaarts.line td { 72 | background: var(--background-lighter); 73 | font-weight: bold; 74 | inline-size: calc(100% / var(--x)); 75 | text-align: center; 76 | } 77 | 78 | .chaarts.line [scope=col]:not(:first-child)::after { 79 | background: var(--background-lighter) var(--stripes); 80 | background-blend-mode: exclusion; 81 | block-size: calc(100% - 4rem); 82 | content: ""; 83 | inline-size: inherit; 84 | inset-block-end: 4rem; 85 | inset-inline-start: calc(100% / var(--x) * var(--index)); 86 | mix-blend-mode: soft-light; 87 | opacity: 0; 88 | position: absolute; 89 | transition: opacity 0.3s var(--move); 90 | z-index: 3; 91 | } 92 | 93 | html:where([data-theme=dark]) .chaarts.line [scope=col]:not(:first-child)::after { 94 | mix-blend-mode: lighten; 95 | } 96 | 97 | @media (prefers-color-scheme: dark) { 98 | .no-js .chaarts.line [scope=col]:not(:first-child)::after, html:where(:not([data-theme=light])) .chaarts.line [scope=col]:not(:first-child)::after { 99 | mix-blend-mode: lighten; 100 | } 101 | } 102 | .chaarts.line [scope=col]:nth-child(2)::after { 103 | --index: 1; 104 | } 105 | 106 | .chaarts.line [scope=col]:nth-child(3)::after { 107 | --index: 2; 108 | } 109 | 110 | .chaarts.line [scope=col]:nth-child(4)::after { 111 | --index: 3; 112 | } 113 | 114 | .chaarts.line [scope=col]:nth-child(5)::after { 115 | --index: 4; 116 | } 117 | 118 | .chaarts.line [scope=col]:nth-child(6)::after { 119 | --index: 5; 120 | } 121 | 122 | .chaarts.line [scope=col]:nth-child(7)::after { 123 | --index: 6; 124 | } 125 | 126 | .chaarts.line [scope=col]:nth-child(8)::after { 127 | --index: 7; 128 | } 129 | 130 | .chaarts.line [scope=col]:nth-child(9)::after { 131 | --index: 8; 132 | } 133 | 134 | .chaarts.line [scope=col]:nth-child(10)::after { 135 | --index: 9; 136 | } 137 | 138 | .chaarts.line [scope=col]:nth-child(11)::after { 139 | --index: 10; 140 | } 141 | 142 | .chaarts.line [scope=col]:nth-child(12)::after { 143 | --index: 11; 144 | } 145 | 146 | .chaarts.line [scope=col]:nth-child(13)::after { 147 | --index: 12; 148 | } 149 | 150 | .chaarts.line [scope=col]:hover::after { 151 | opacity: 0.75; 152 | } 153 | 154 | .chaarts.line td { 155 | --value: var(--1); 156 | --term: var(--t-1); 157 | line-height: 1.5; 158 | } 159 | 160 | .chaarts.line td::before { 161 | block-size: 1.5rem; 162 | content: ""; 163 | inline-size: inherit; 164 | position: absolute; 165 | translate: calc(-50% * var(--is-rtl, 1)) 0; 166 | z-index: 10; 167 | } 168 | 169 | .chaarts.line td::after { 170 | --arrow: calc(100% - 0.25rem); 171 | --top: calc(var(--height) - (var(--value) / var(--y) * var(--height))); 172 | --polygon: polygon( 173 | 0% 0%, 174 | 100% 0%, 175 | 100% var(--arrow), 176 | calc(50% - 0.25rem) var(--arrow), 177 | 50% 100%, 178 | calc(50% + 0.25rem) var(--arrow), 179 | 0% var(--arrow) 180 | ); 181 | --integer: calc(var(--value)); 182 | background-color: var(--foreground-lighter); 183 | clip-path: var(--polygon); 184 | color: var(--background-lighter); 185 | content: var(--term) " " var(--year) "\a" counter(value) " " var(--unit); 186 | counter-reset: value var(--integer); 187 | inset-block-start: var(--top, 0); 188 | inset-inline-start: calc(var(--offset) * 3); 189 | opacity: 0; 190 | padding: 0.5rem; 191 | pointer-events: none; 192 | position: absolute; 193 | transform: translate3d(var(--rtl-offset, -50%), -125%, 0) perspective(1000px) rotate3d(1, 0, 0, 45deg); 194 | transform-origin: 50% calc(100% + 10px); 195 | transition: opacity 0.2s var(--enter), transform 0.2s var(--enter); 196 | white-space: pre; 197 | z-index: 5; 198 | } 199 | 200 | [dir=rtl] .chaarts.line td:first-of-type::after { 201 | inset-inline-start: var(--offset); 202 | } 203 | 204 | .chaarts.line td + td::after { 205 | inset-inline-start: calc(100% / var(--x) * var(--index) + var(--offset)); 206 | } 207 | 208 | .chaarts.line td:nth-child(2)::after { 209 | --value: var(--1); 210 | --term: var(--t-1); 211 | --index: 1; 212 | } 213 | 214 | [dir=rtl] .chaarts.line td:nth-child(2)::after { 215 | --index: 0; 216 | --rtl-offset: -40%; 217 | } 218 | 219 | .chaarts.line td:nth-child(3)::after { 220 | --value: var(--2); 221 | --term: var(--t-2); 222 | --index: 2; 223 | } 224 | 225 | [dir=rtl] .chaarts.line td:nth-child(3)::after { 226 | --index: 1; 227 | --rtl-offset: -40%; 228 | } 229 | 230 | .chaarts.line td:nth-child(4)::after { 231 | --value: var(--3); 232 | --term: var(--t-3); 233 | --index: 3; 234 | } 235 | 236 | [dir=rtl] .chaarts.line td:nth-child(4)::after { 237 | --index: 2; 238 | --rtl-offset: -40%; 239 | } 240 | 241 | .chaarts.line td:nth-child(5)::after { 242 | --value: var(--4); 243 | --term: var(--t-4); 244 | --index: 4; 245 | } 246 | 247 | [dir=rtl] .chaarts.line td:nth-child(5)::after { 248 | --index: 3; 249 | --rtl-offset: -40%; 250 | } 251 | 252 | .chaarts.line td:nth-child(6)::after { 253 | --value: var(--5); 254 | --term: var(--t-5); 255 | --index: 5; 256 | } 257 | 258 | [dir=rtl] .chaarts.line td:nth-child(6)::after { 259 | --index: 4; 260 | --rtl-offset: -40%; 261 | } 262 | 263 | .chaarts.line td:nth-child(7)::after { 264 | --value: var(--6); 265 | --term: var(--t-6); 266 | --index: 6; 267 | } 268 | 269 | [dir=rtl] .chaarts.line td:nth-child(7)::after { 270 | --index: 5; 271 | --rtl-offset: -40%; 272 | } 273 | 274 | .chaarts.line td:nth-child(8)::after { 275 | --value: var(--7); 276 | --term: var(--t-7); 277 | --index: 7; 278 | } 279 | 280 | [dir=rtl] .chaarts.line td:nth-child(8)::after { 281 | --index: 6; 282 | --rtl-offset: -40%; 283 | } 284 | 285 | .chaarts.line td:nth-child(9)::after { 286 | --value: var(--8); 287 | --term: var(--t-8); 288 | --index: 8; 289 | } 290 | 291 | [dir=rtl] .chaarts.line td:nth-child(9)::after { 292 | --index: 7; 293 | --rtl-offset: -40%; 294 | } 295 | 296 | .chaarts.line td:nth-child(10)::after { 297 | --value: var(--9); 298 | --term: var(--t-9); 299 | --index: 9; 300 | } 301 | 302 | [dir=rtl] .chaarts.line td:nth-child(10)::after { 303 | --index: 8; 304 | --rtl-offset: -40%; 305 | } 306 | 307 | .chaarts.line td:nth-child(11)::after { 308 | --value: var(--10); 309 | --term: var(--t-10); 310 | --index: 10; 311 | } 312 | 313 | [dir=rtl] .chaarts.line td:nth-child(11)::after { 314 | --index: 9; 315 | --rtl-offset: -40%; 316 | } 317 | 318 | .chaarts.line td:nth-child(12)::after { 319 | --value: var(--11); 320 | --term: var(--t-11); 321 | --index: 11; 322 | } 323 | 324 | [dir=rtl] .chaarts.line td:nth-child(12)::after { 325 | --index: 10; 326 | --rtl-offset: -40%; 327 | } 328 | 329 | .chaarts.line td:nth-child(13)::after { 330 | --value: var(--12); 331 | --term: var(--t-12); 332 | --index: 12; 333 | } 334 | 335 | [dir=rtl] .chaarts.line td:nth-child(13)::after { 336 | --index: 11; 337 | --rtl-offset: -40%; 338 | } 339 | 340 | .chaarts.line td:hover::after { 341 | opacity: 1; 342 | transform: translate3d(var(--rtl-offset, -50%), -125%, 0) perspective(1000px) rotate3d(1, 0, 0, 0deg); 343 | transition: opacity 0.2s var(--exit), transform 0.2s var(--exit); 344 | } 345 | -------------------------------------------------------------------------------- /_site/templates/css/examples/lines.css: -------------------------------------------------------------------------------- 1 | .chaarts.points [style]::before { 2 | background: var(--color, currentcolor) var(--background); 3 | scale: var(--is-rtl, 1) 1; 4 | transition: opacity 0.3s var(--move); 5 | --polygon: polygon( 6 | calc((100% / var(--x) * 1) + var(--offset)) calc(100% - (var(--1) / var(--y) * 100%)), 7 | calc((100% / var(--x) * 2) + var(--offset)) calc(100% - (var(--2) / var(--y) * 100%)), 8 | calc((100% / var(--x) * 3) + var(--offset)) calc(100% - (var(--3) / var(--y) * 100%)), 9 | calc((100% / var(--x) * 4) + var(--offset)) calc(100% - (var(--4) / var(--y) * 100%)), 10 | calc((100% / var(--x) * 5) + var(--offset)) calc(100% - (var(--5) / var(--y) * 100%)), 11 | calc((100% / var(--x) * 6) + var(--offset)) calc(100% - (var(--6) / var(--y) * 100%)), 12 | calc((100% / var(--x) * 7) + var(--offset)) calc(100% - (var(--7) / var(--y) * 100%)), 13 | calc((100% / var(--x) * 8) + var(--offset)) calc(100% - (var(--8) / var(--y) * 100%)), 14 | calc((100% / var(--x) * 9) + var(--offset)) calc(100% - (var(--9) / var(--y) * 100%)), 15 | calc((100% / var(--x) * 10) + var(--offset)) calc(100% - (var(--10) / var(--y) * 100%)), 16 | calc((100% / var(--x) * 11) + var(--offset)) calc(100% - (var(--11) / var(--y) * 100%)), 17 | calc((100% / var(--x) * 12) + var(--offset)) calc(100% - (var(--12) / var(--y) * 100%)), 18 | calc((100% / var(--x) * 13) + var(--offset)) calc(100% - (var(--12) / var(--y) * 100%)), 19 | 100% calc(100% - (var(--12) / var(--y) * 100%)), 20 | 100% calc((100% + 0.25rem) - (var(--12) / var(--y) * 100%)), 21 | calc((100% / var(--x) * 13) + var(--offset)) calc((100% + 0.25rem) - (var(--12) / var(--y) * 100%)), 22 | calc((100% / var(--x) * 12) + var(--offset)) calc((100% + 0.25rem) - (var(--12) / var(--y) * 100%)), 23 | calc((100% / var(--x) * 11) + var(--offset)) calc((100% + 0.25rem) - (var(--11) / var(--y) * 100%)), 24 | calc((100% / var(--x) * 10) + var(--offset)) calc((100% + 0.25rem) - (var(--10) / var(--y) * 100%)), 25 | calc((100% / var(--x) * 9) + var(--offset)) calc((100% + 0.25rem) - (var(--9) / var(--y) * 100%)), 26 | calc((100% / var(--x) * 8) + var(--offset)) calc((100% + 0.25rem) - (var(--8) / var(--y) * 100%)), 27 | calc((100% / var(--x) * 7) + var(--offset)) calc((100% + 0.25rem) - (var(--7) / var(--y) * 100%)), 28 | calc((100% / var(--x) * 6) + var(--offset)) calc((100% + 0.25rem) - (var(--6) / var(--y) * 100%)), 29 | calc((100% / var(--x) * 5) + var(--offset)) calc((100% + 0.25rem) - (var(--5) / var(--y) * 100%)), 30 | calc((100% / var(--x) * 4) + var(--offset)) calc((100% + 0.25rem) - (var(--4) / var(--y) * 100%)), 31 | calc((100% / var(--x) * 3) + var(--offset)) calc((100% + 0.25rem) - (var(--3) / var(--y) * 100%)), 32 | calc((100% / var(--x) * 2) + var(--offset)) calc((100% + 0.25rem) - (var(--2) / var(--y) * 100%)), 33 | calc((100% / var(--x) * 1) + var(--offset)) calc((100% + 0.25rem) - (var(--1) / var(--y) * 100%)) 34 | ); 35 | } 36 | 37 | .chaarts.points [style] th::before { 38 | background: var(--color, currentcolor) var(--background); 39 | block-size: 1rem; 40 | content: ""; 41 | display: inline-block; 42 | inline-size: 1rem; 43 | translate: -0.2rem 0.1rem 0; 44 | } 45 | 46 | .chaarts.points [style] td::before { 47 | --size: 1rem; 48 | --top: calc(var(--height) - (var(--value) / var(--y) * var(--height))); 49 | background: var(--color, currentcolor) var(--background); 50 | block-size: var(--size); 51 | border: 2px solid var(--background-lighter); 52 | border-radius: 50%; 53 | box-shadow: 0 0 0.25rem var(--foreground-o-50); 54 | content: ""; 55 | inline-size: var(--size); 56 | inset-block-start: var(--top, 100%); 57 | inset-inline-start: calc(var(--offset) * 3); 58 | position: absolute; 59 | transition: opacity 0.3s var(--move), transform 0.3s var(--move); 60 | translate: calc(var(--size) / -2) calc(var(--size) / -2) 0; 61 | z-index: 4; 62 | } 63 | 64 | .chaarts.points [style] td + td::before { 65 | inset-inline-start: calc(100% / var(--x) * var(--index) + var(--offset)); 66 | } 67 | 68 | [dir=rtl] .chaarts.points [style] td::before, [dir=rtl] .chaarts.points [style] td + td::before { 69 | inset-inline-start: unset; 70 | } 71 | 72 | .chaarts.points [style] td:nth-of-type(2)::before { 73 | --value: var(--2); 74 | --index: 2; 75 | } 76 | 77 | .chaarts.points [style] td:nth-of-type(3)::before { 78 | --value: var(--3); 79 | --index: 3; 80 | } 81 | 82 | .chaarts.points [style] td:nth-of-type(4)::before { 83 | --value: var(--4); 84 | --index: 4; 85 | } 86 | 87 | .chaarts.points [style] td:nth-of-type(5)::before { 88 | --value: var(--5); 89 | --index: 5; 90 | } 91 | 92 | .chaarts.points [style] td:nth-of-type(6)::before { 93 | --value: var(--6); 94 | --index: 6; 95 | } 96 | 97 | .chaarts.points [style] td:nth-of-type(7)::before { 98 | --value: var(--7); 99 | --index: 7; 100 | } 101 | 102 | .chaarts.points [style] td:nth-of-type(8)::before { 103 | --value: var(--8); 104 | --index: 8; 105 | } 106 | 107 | .chaarts.points [style] td:nth-of-type(9)::before { 108 | --value: var(--9); 109 | --index: 9; 110 | } 111 | 112 | .chaarts.points [style] td:nth-of-type(10)::before { 113 | --value: var(--10); 114 | --index: 10; 115 | } 116 | 117 | .chaarts.points [style] td:nth-of-type(11)::before { 118 | --value: var(--11); 119 | --index: 11; 120 | } 121 | 122 | .chaarts.points [style] td:nth-of-type(12)::before { 123 | --value: var(--12); 124 | --index: 12; 125 | } 126 | 127 | .chaarts.points [style]:nth-of-type(1n + 1) { 128 | --background: var(--checkers); 129 | } 130 | 131 | .chaarts.points [style]:nth-of-type(2n + 2) { 132 | --background: var(--hexagons); 133 | } 134 | 135 | .chaarts.points [style]:nth-of-type(3n + 3) { 136 | --background: var(--triangles); 137 | } 138 | 139 | .chaarts.points [style]:nth-of-type(4n + 4) { 140 | --background: var(--zig); 141 | } 142 | 143 | .chaarts.points [style]:nth-of-type(5n + 5) { 144 | --background: var(--stripes); 145 | } 146 | 147 | .chaarts.points [style]:nth-of-type(6n + 6) { 148 | --background: var(--dots); 149 | } 150 | 151 | .chaarts.points tbody:hover [style]::before, 152 | .chaarts.points tbody:hover [style] td::before { 153 | opacity: 0.25; 154 | } 155 | 156 | .chaarts.points tbody:hover [style]:hover::before, 157 | .chaarts.points tbody:hover [style]:hover td::before { 158 | opacity: 1; 159 | } 160 | 161 | .chaarts.points tbody:hover [style]:hover td::before { 162 | scale: 1.25; 163 | translate: calc(var(--size) / -2) calc(var(--size) / -2) 0; 164 | } 165 | 166 | .chaarts.points [scope=col]:not(:first-child)::after { 167 | mix-blend-mode: multiply; 168 | } 169 | 170 | .chaarts.points [scope=col]:not(:first-child):hover::after { 171 | opacity: 0.5; 172 | } 173 | -------------------------------------------------------------------------------- /_site/templates/css/examples/pie.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | .chaarts.pie { 3 | --radius: 32em; 4 | margin: 0 auto; 5 | padding-block-start: calc(var(--radius) - 2rem); 6 | position: relative; 7 | } 8 | 9 | .chaarts.pie tbody { 10 | border: 0; 11 | display: flex; 12 | flex-wrap: wrap; 13 | } 14 | 15 | .chaarts.pie tr { 16 | --lt-25: clamp(0, 25 - var(--value), 1); 17 | --gt-25: calc(1 - var(--lt-25)); 18 | --lt-50: clamp(0, 50 - var(--value), 1); 19 | --gt-50: calc(1 - var(--lt-50)); 20 | --lt-75: clamp(0, 75 - var(--value), 1); 21 | --gt-75: calc(1 - var(--lt-75)); 22 | align-items: center; 23 | display: flex; 24 | flex: 1 1 auto; 25 | transition: opacity 0.3s var(--move); 26 | } 27 | 28 | .chaarts.pie tr:nth-of-type(1n + 1) { 29 | --background: var(--checkers); 30 | } 31 | 32 | .chaarts.pie tr:nth-of-type(2n + 2) { 33 | --background: var(--hexagons); 34 | } 35 | 36 | .chaarts.pie tr:nth-of-type(3n + 3) { 37 | --background: var(--triangles); 38 | } 39 | 40 | .chaarts.pie tr:nth-of-type(4n + 4) { 41 | --background: var(--zig); 42 | } 43 | 44 | .chaarts.pie tr:nth-of-type(5n + 5) { 45 | --background: var(--stripes); 46 | } 47 | 48 | .chaarts.pie tr:nth-of-type(6n + 6) { 49 | --background: var(--dots); 50 | } 51 | 52 | .chaarts.pie tr:first-child { 53 | --value: var(--1); 54 | --position: 0turn; 55 | } 56 | 57 | .chaarts.pie tr:nth-child(2) { 58 | --value: var(--2); 59 | --position: calc(var(--1) * .01turn); 60 | } 61 | 62 | .chaarts.pie tr:nth-of-type(3n + 3) { 63 | --value: var(--3); 64 | --position: calc((var(--1) + var(--2)) * .01turn); 65 | } 66 | 67 | .chaarts.pie tr:nth-of-type(4n + 4) { 68 | --value: var(--4); 69 | --position: calc((var(--1) + var(--3) + var(--2)) * .01turn); 70 | } 71 | 72 | .chaarts.pie tr:nth-of-type(5n + 5) { 73 | --value: var(--5); 74 | --position: calc((var(--1) + var(--4) + var(--3) + var(--2)) * .01turn); 75 | } 76 | 77 | .chaarts.pie tr:nth-of-type(6n + 6) { 78 | --value: var(--6); 79 | --position: calc((var(--1) + var(--5) + var(--4) + var(--3) + var(--2)) * .01turn); 80 | } 81 | 82 | .chaarts.pie tr:nth-of-type(7n + 7) { 83 | --value: var(--7); 84 | --position: calc((var(--1) + var(--6) + var(--5) + var(--4) + var(--3) + var(--2)) * .01turn); 85 | } 86 | 87 | .chaarts.pie [scope=row] { 88 | padding-inline-end: 0.5rem; 89 | } 90 | 91 | .chaarts.pie [scope=row]::before { 92 | background: var(--color, currentcolor) var(--background); 93 | block-size: 1rem; 94 | content: ""; 95 | display: inline-block; 96 | inline-size: 1rem; 97 | translate: calc(-0.2rem * var(--is-rtl, 1)) 0.1rem 0; 98 | } 99 | 100 | .chaarts.pie td::after, 101 | .chaarts.pie td::before { 102 | inset-block-start: calc(var(--radius) / 2); 103 | inset-inline-start: 50%; 104 | position: absolute; 105 | transform-origin: center; 106 | } 107 | 108 | [dir=rtl] .chaarts.pie td::after { 109 | inset-inline-start: 40%; 110 | } 111 | 112 | .chaarts.pie td::before { 113 | --zoom: .75; 114 | --part: calc(var(--value) * 3.6); 115 | --main-angle: calc(var(--part) - (90 * (var(--gt-25, 0) + var(--gt-50, 0) + var(--gt-75, 0)))); 116 | --β: calc(var(--main-angle) * var(--to-radians)); 117 | --α: calc((90 - var(--main-angle)) * var(--to-radians)); 118 | --pos-B: calc(sin(var(--β)) * 50%); 119 | --pos-A: calc(sin(var(--α)) * 50%); 120 | --polygon: polygon( 121 | 50% 50%, 122 | 50% 0%, 123 | 100% 0%, 124 | max(50% + var(--pos-B), var(--gt-25, 0) * 100%) calc(50% - var(--pos-A) * var(--lt-25, 1)), 125 | max(50%, var(--gt-25, 0) * 100%) max(50%, var(--gt-25, 0) * 100%), 126 | max(50% + var(--pos-A) * var(--gt-25, 0), var(--gt-50, 0) * 100%) max(50% + var(--pos-B) * var(--gt-25, 0) * var(--lt-50, 0), var(--gt-50, 0) * 100%), 127 | max(0%, var(--lt-50, 0) * 50%) max(50%, var(--gt-50, 0) * 100%), 128 | clamp(0%, 100% * (var(--lt-75, 1)), 50% - var(--pos-B) * var(--gt-50, 0)) calc(50% + var(--pos-A) * var(--gt-50, 0) * var(--lt-75, 1)), 129 | max(0%, var(--lt-75, 0) * 50%) max(0%, var(--lt-75, 0) * 50%), 130 | calc(50% - var(--pos-A) * var(--gt-75, 0)) calc(50% - var(--pos-B) * var(--gt-75, 0)) 131 | ); 132 | background: var(--color, currentcolor) var(--background); 133 | block-size: var(--radius); 134 | border-radius: 50%; 135 | clip-path: var(--polygon); 136 | content: ""; 137 | inline-size: var(--radius); 138 | transform: translate3d(calc(-50% * var(--is-rtl, 1)), -50%, 0) rotate(var(--position)) scale(var(--zoom)); 139 | transition: transform 0.2s var(--move); 140 | } 141 | 142 | .chaarts.pie tr:hover td::before { 143 | --zoom: .8; 144 | } 145 | 146 | .chaarts.pie td::after { 147 | --axis: calc(var(--position) - .25turn + var(--value) * .005turn); 148 | --away: calc(var(--radius) / 2 - 1rem); 149 | --integer: calc(var(--value)); 150 | background-color: var(--foreground-lighter); 151 | color: var(--background-lighter); 152 | content: var(--term) " : " counter(value) " %"; 153 | counter-reset: value var(--value); 154 | opacity: 0; 155 | padding: 0.5rem; 156 | pointer-events: none; 157 | transform: translate3d(-50%, -50%, 0) rotate(var(--axis)) translate(var(--away)) rotate(calc(var(--axis) * -1)) perspective(1000px) rotate3d(1, 0, 0, 45deg); 158 | transform-origin: 50% calc(100% + 10px); 159 | transition: opacity 0.2s var(--enter), transform 0.2s var(--enter); 160 | z-index: 3; 161 | } 162 | 163 | .chaarts.pie tbody:hover tr { 164 | opacity: 0.5; 165 | } 166 | 167 | .chaarts.pie tbody:hover tr:hover { 168 | opacity: 1; 169 | } 170 | 171 | .chaarts.pie tbody:hover tr:hover td::after { 172 | opacity: 1; 173 | transform: translate3d(-50%, -50%, 0) rotate(var(--axis)) translate(var(--away)) rotate(calc(var(--axis) * -1)) perspective(1000px) rotate3d(1, 0, 0, 0deg); 174 | transition: opacity 0.2s var(--exit), transform 0.2s var(--exit); 175 | } 176 | -------------------------------------------------------------------------------- /_site/templates/css/examples/polar.css: -------------------------------------------------------------------------------- 1 | .chaarts.pie.polar td::before, 2 | .chaarts.pie.polar tr:hover td::before { 3 | --zoom: 50; 4 | transform: translate3d(calc(-50% * var(--is-rtl, 1)), -50%, 0) rotate(var(--position)) scale(calc((var(--zoom) + var(--value) / (100 / var(--zoom))) / 100)); 5 | } 6 | 7 | .chaarts.pie.polar td::after { 8 | --away: calc((var(--radius) / 2) - ((var(--radius) / 4) * ((100 - var(--value)) / 100)) + 2.5rem); 9 | } 10 | -------------------------------------------------------------------------------- /_site/templates/css/examples/radar.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | .chaarts[class*=radar] { 3 | --radius: 12.8em; 4 | --unitless-radius: calc(1024 / 16 / 5); 5 | --size: calc(var(--radius) / var(--scale)); 6 | --part: calc(360deg / var(--items)); 7 | --integer: calc(var(--scale)); 8 | background-image: repeating-radial-gradient(circle at 50%, var(--foreground-o-25) 0 2px, transparent 0 calc(var(--size) * var(--step))), repeating-radial-gradient(circle at 50%, var(--foreground-o-10) 0 2px, transparent 0 var(--size)); 9 | block-size: calc(var(--radius) * 2); 10 | border: 2px solid; 11 | border-radius: 50%; 12 | contain: layout; 13 | counter-reset: scale var(--integer); 14 | inline-size: calc(var(--radius) * 2); 15 | margin: 6rem auto 12rem; 16 | overflow: visible; 17 | position: relative; 18 | } 19 | 20 | .chaarts[class*=radar] caption { 21 | background: none; 22 | inset-block-end: -10rem; 23 | position: absolute; 24 | } 25 | 26 | .chaarts[class*=radar] [scope=col] { 27 | --away: calc((var(--radius) * -1) - 50%); 28 | background-color: transparent; 29 | left: 50%; 30 | margin: 0; 31 | padding: 0 1rem; 32 | position: absolute; 33 | top: 50%; 34 | transform: translate3d(-50%, -50%, 0) rotate(calc(var(--part) * var(--index, 1))) translate(var(--away)) rotate(calc(var(--part) * var(--index, 1) * -1)); 35 | } 36 | 37 | .chaarts[class*=radar] tr > *:nth-of-type(1) { 38 | --index: 1; 39 | } 40 | 41 | .chaarts[class*=radar] tr > *:nth-of-type(2) { 42 | --index: 2; 43 | } 44 | 45 | .chaarts[class*=radar] tr > *:nth-of-type(3) { 46 | --index: 3; 47 | } 48 | 49 | .chaarts[class*=radar] tr > *:nth-of-type(4) { 50 | --index: 4; 51 | } 52 | 53 | .chaarts[class*=radar] tr > *:nth-of-type(5) { 54 | --index: 5; 55 | } 56 | 57 | .chaarts[class*=radar] tr > *:nth-of-type(6) { 58 | --index: 6; 59 | } 60 | 61 | .chaarts[class*=radar] tr > *:nth-of-type(7) { 62 | --index: 7; 63 | } 64 | 65 | .chaarts[class*=radar] td { 66 | --skew: calc(90deg - var(--part)); 67 | block-size: 50%; 68 | border-block-end: 1px solid var(--chaarts-purple); 69 | inline-size: 50%; 70 | left: 0; 71 | margin: 0; 72 | position: absolute; 73 | top: 0; 74 | transform: rotate(calc(var(--part) * var(--index, 1))) skew(var(--skew)); 75 | transform-origin: 100% 100%; 76 | } 77 | 78 | .chaarts[class*=radar] td:nth-of-type(1) span { 79 | --point: var(--1); 80 | --pos: calc(100% - (var(--2) * 100% / (var(--scale) * var(--ratio)))); 81 | } 82 | 83 | .chaarts[class*=radar] td:nth-of-type(2) span { 84 | --point: var(--2); 85 | --pos: calc(100% - (var(--3) * 100% / (var(--scale) * var(--ratio)))); 86 | } 87 | 88 | .chaarts[class*=radar] td:nth-of-type(3) span { 89 | --point: var(--3); 90 | --pos: calc(100% - (var(--4) * 100% / (var(--scale) * var(--ratio)))); 91 | } 92 | 93 | .chaarts[class*=radar] td:nth-of-type(4) span { 94 | --point: var(--4); 95 | --pos: calc(100% - (var(--5) * 100% / (var(--scale) * var(--ratio)))); 96 | } 97 | 98 | .chaarts[class*=radar] td:nth-of-type(5) span { 99 | --point: var(--5); 100 | --pos: calc(100% - (var(--6) * 100% / (var(--scale) * var(--ratio)))); 101 | } 102 | 103 | .chaarts[class*=radar] td:nth-of-type(6) span { 104 | --point: var(--6); 105 | --pos: calc(100% - (var(--7) * 100% / (var(--scale) * var(--ratio)))); 106 | } 107 | 108 | .chaarts[class*=radar] td:nth-of-type(7) span { 109 | --point: var(--7); 110 | --pos: calc(100% - (var(--8) * 100% / (var(--scale) * var(--ratio)))); 111 | } 112 | 113 | .chaarts[class*=radar] td::after, .chaarts[class*=radar] td::before { 114 | display: none; 115 | } 116 | 117 | .chaarts[class*=radar] span { 118 | --opposite: calc(180 - (90 + (90 - (360 / var(--items))))); 119 | --angle: calc(var(--opposite) * var(--to-radians)); 120 | --sin-angle: sin(var(--angle)); 121 | --hypo: calc(var(--unitless-radius) / var(--sin-angle)); 122 | --ratio: calc(var(--hypo) / var(--unitless-radius)); 123 | --polygon: polygon( 124 | 100% var(--pos), 125 | calc(100% - (var(--point) * 100% / var(--scale))) 100%, 126 | 100% 100% 127 | ); 128 | background: var(--chaarts-purple); 129 | block-size: 100%; 130 | clip-path: var(--polygon); 131 | filter: drop-shadow(0 0 1rem var(--chaarts-purple)); 132 | inline-size: 100%; 133 | position: absolute; 134 | } 135 | 136 | .chaarts.radar [scope=col]::after { 137 | color: var(--foreground-lighter); 138 | display: block; 139 | font-size: small; 140 | font-weight: 400; 141 | } 142 | 143 | .chaarts.radar [scope=col]:nth-child(1)::after { 144 | --integer: calc(var(--1)); 145 | content: counter(value) " / " counter(scale); 146 | counter-reset: value var(--integer); 147 | } 148 | 149 | .chaarts.radar [scope=col]:nth-child(2)::after { 150 | --integer: calc(var(--2)); 151 | content: counter(value) " / " counter(scale); 152 | counter-reset: value var(--integer); 153 | } 154 | 155 | .chaarts.radar [scope=col]:nth-child(3)::after { 156 | --integer: calc(var(--3)); 157 | content: counter(value) " / " counter(scale); 158 | counter-reset: value var(--integer); 159 | } 160 | 161 | .chaarts.radar [scope=col]:nth-child(4)::after { 162 | --integer: calc(var(--4)); 163 | content: counter(value) " / " counter(scale); 164 | counter-reset: value var(--integer); 165 | } 166 | 167 | .chaarts.radar [scope=col]:nth-child(5)::after { 168 | --integer: calc(var(--5)); 169 | content: counter(value) " / " counter(scale); 170 | counter-reset: value var(--integer); 171 | } 172 | 173 | .chaarts.radar [scope=col]:nth-child(6)::after { 174 | --integer: calc(var(--6)); 175 | content: counter(value) " / " counter(scale); 176 | counter-reset: value var(--integer); 177 | } 178 | 179 | .chaarts.radar [scope=col]:nth-child(7)::after { 180 | --integer: calc(var(--7)); 181 | content: counter(value) " / " counter(scale); 182 | counter-reset: value var(--integer); 183 | } 184 | -------------------------------------------------------------------------------- /_site/templates/css/examples/radars.css: -------------------------------------------------------------------------------- 1 | .chaarts.radar-multiple { 2 | margin-block-end: 12rem; 3 | } 4 | 5 | .chaarts.radar-multiple tbody { 6 | columns: var(--areas); 7 | vertical-align: bottom; 8 | } 9 | 10 | .chaarts.radar-multiple [scope=row] { 11 | block-size: 2rem; 12 | bottom: -8rem; 13 | left: 1rem; 14 | position: absolute; 15 | } 16 | 17 | .chaarts.radar-multiple [scope=row]::before { 18 | background: var(--color, currentcolor); 19 | block-size: 1rem; 20 | content: ""; 21 | display: inline-block; 22 | inline-size: 1rem; 23 | margin-inline-end: 0.25rem; 24 | translate: 0 0.1rem 0; 25 | } 26 | 27 | .chaarts.radar-multiple tr:nth-child(2) [scope=row] { 28 | left: calc(1rem + 100% / var(--areas) * 1); 29 | } 30 | 31 | .chaarts.radar-multiple td { 32 | align-items: flex-end; 33 | border-color: var(--color, currentcolor); 34 | display: flex; 35 | justify-content: flex-end; 36 | opacity: 0.5; 37 | pointer-events: none; 38 | z-index: 0; 39 | } 40 | 41 | .chaarts.radar-multiple td::after { 42 | color: var(--foreground); 43 | display: block; 44 | font-size: small; 45 | font-weight: 700; 46 | inline-size: 100%; 47 | text-indent: -0.5rem; 48 | transform: skew(calc(var(--skew) * -1)) rotate(calc(var(--part) * var(--index, 1) * -1)); 49 | transform-origin: 0 0; 50 | white-space: nowrap; 51 | } 52 | 53 | .chaarts.radar-multiple td:nth-of-type(1)::after { 54 | --integer: calc(var(--1)); 55 | content: counter(value); 56 | counter-reset: value var(--integer); 57 | inline-size: calc(var(--1) * 100% / var(--scale)); 58 | } 59 | 60 | .chaarts.radar-multiple td:nth-of-type(2)::after { 61 | --integer: calc(var(--2)); 62 | content: counter(value); 63 | counter-reset: value var(--integer); 64 | inline-size: calc(var(--2) * 100% / var(--scale)); 65 | } 66 | 67 | .chaarts.radar-multiple td:nth-of-type(3)::after { 68 | --integer: calc(var(--3)); 69 | content: counter(value); 70 | counter-reset: value var(--integer); 71 | inline-size: calc(var(--3) * 100% / var(--scale)); 72 | } 73 | 74 | .chaarts.radar-multiple td:nth-of-type(4)::after { 75 | --integer: calc(var(--4)); 76 | content: counter(value); 77 | counter-reset: value var(--integer); 78 | inline-size: calc(var(--4) * 100% / var(--scale)); 79 | } 80 | 81 | .chaarts.radar-multiple td:nth-of-type(5)::after { 82 | --integer: calc(var(--5)); 83 | content: counter(value); 84 | counter-reset: value var(--integer); 85 | inline-size: calc(var(--5) * 100% / var(--scale)); 86 | } 87 | 88 | .chaarts.radar-multiple td:nth-of-type(6)::after { 89 | --integer: calc(var(--6)); 90 | content: counter(value); 91 | counter-reset: value var(--integer); 92 | inline-size: calc(var(--6) * 100% / var(--scale)); 93 | } 94 | 95 | .chaarts.radar-multiple td:nth-of-type(7)::after { 96 | --integer: calc(var(--7)); 97 | content: counter(value); 98 | counter-reset: value var(--integer); 99 | inline-size: calc(var(--7) * 100% / var(--scale)); 100 | } 101 | 102 | .chaarts.radar-multiple span { 103 | --mask: radial-gradient(circle at bottom right, var(--foreground), var(--foreground-o-50)); 104 | background: var(--color, currentcolor); 105 | mask-image: var(--mask); 106 | pointer-events: auto; 107 | } 108 | 109 | @media (hover: hover) { 110 | .chaarts.radar-multiple td { 111 | opacity: 0.25; 112 | transition: opacity 0.2s var(--move); 113 | } 114 | .chaarts.radar-multiple td::after { 115 | opacity: 0; 116 | transition: inherit; 117 | } 118 | .chaarts.radar-multiple tr:hover td { 119 | opacity: 1; 120 | z-index: 1; 121 | } 122 | .chaarts.radar-multiple tr:hover td::after { 123 | opacity: inherit; 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /_site/templates/css/examples/waterfall.css: -------------------------------------------------------------------------------- 1 | .chaarts.bar.waterfall tr:nth-of-type(1) td { 2 | grid-column: var(--0, 2) / var(--value, 2); 3 | } 4 | 5 | .chaarts.bar.waterfall tr:nth-of-type(2) td { 6 | grid-column: var(--1, 2) / var(--value, 2); 7 | } 8 | 9 | .chaarts.bar.waterfall tr:nth-of-type(3) td { 10 | grid-column: var(--2, 2) / var(--value, 2); 11 | } 12 | 13 | .chaarts.bar.waterfall tr:nth-of-type(4) td { 14 | grid-column: var(--3, 2) / var(--value, 2); 15 | } 16 | 17 | .chaarts.bar.waterfall tr:nth-of-type(5) td { 18 | grid-column: var(--4, 2) / var(--value, 2); 19 | } 20 | 21 | .chaarts.bar.waterfall tr:nth-of-type(6) td { 22 | grid-column: var(--5, 2) / var(--value, 2); 23 | } 24 | 25 | .chaarts.bar.waterfall tr:nth-of-type(7) td { 26 | grid-column: var(--6, 2) / var(--value, 2); 27 | } 28 | 29 | .chaarts.bar.waterfall tr:nth-of-type(8) td { 30 | grid-column: var(--7, 2) / var(--value, 2); 31 | } 32 | 33 | .chaarts.bar.waterfall tr:nth-of-type(9) td { 34 | grid-column: var(--8, 2) / var(--value, 2); 35 | } 36 | 37 | .chaarts.bar.waterfall tr:nth-of-type(10) td { 38 | grid-column: var(--9, 2) / var(--value, 2); 39 | } 40 | 41 | .chaarts.bar.waterfall tr:nth-of-type(11) td { 42 | grid-column: var(--10, 2) / var(--value, 2); 43 | } 44 | -------------------------------------------------------------------------------- /_site/templates/includes/_bar-markup.njk: -------------------------------------------------------------------------------- 1 | 
<table class="chaarts bar" style="--scale: 3000">
 2 | 	<caption id="caption-1">[…]</caption>
 3 | 	<thead class="sr-only">
 4 | 		<tr>
 5 | 			<td></td>
 6 | 			<th scope="col">[…]</th>
 7 | 		</tr>
 8 | 	</thead>
 9 | 	<tbody>
10 | 		<tr>
11 | 			<th scope="row">[…]</th>
12 | 			<td style="--value: 4">
13 | 				<span>[…]</span>
14 | 			</td>
15 | 		</tr>
16 | 		<tr>[…]</tr>
17 | 	</tbody>
18 | </table>
19 | -------------------------------------------------------------------------------- /_site/templates/includes/_column-markup.njk: -------------------------------------------------------------------------------- 1 | 
<table class="chaarts column" id="column" style="--y: 7;">
 2 | 	<caption id="caption-7">[…]</caption>
 3 | 	<colgroup>
 4 | 		<col>
 5 | 		<col>
 6 | 		<col>
 7 | 		<col>
 8 | 		<col>
 9 | 		<col>
10 | 		<col>
11 | 	</colgroup>
12 | 	<thead>
13 | 		<tr>
14 | 			<th scope="row">[…]</th>
15 | 			<th scope="col" style="--value: 62;">Chrome</th>
16 | 			<th scope="col" style="--value: 15;">Firefox</th>
17 | 		</tr>
18 | 	</thead>
19 | 	<tbody>
20 | 		<tr>
21 | 			<th scope="row">[…]</th>
22 | 			<td style="--value: 62;"><span>62%</span></td>
23 | 			<td style="--value: 15;"><span>15%</span></td>
24 | 		</tr>
25 | 	</tbody>
26 | </table>
27 | -------------------------------------------------------------------------------- /_site/templates/includes/_columns-markup.njk: -------------------------------------------------------------------------------- 1 | 
<table class="chaarts column-multiple" id="column-multiple" style="--y: 11; --span: 2;">
 2 | 	<caption id="caption-8">[…]</caption><colgroup>
 3 | 		<col>
 4 | 		<col span="2">
 5 | 		<col span="2">
 6 | 		<col span="2">
 7 | 		<col span="2">
 8 | 		<col span="2">
 9 | 	</colgroup>
10 | 	<thead>
11 | 		<tr>
12 | 			<th scope="row" id="browser">[…]</th>
13 | 			<th scope="col" colspan="2" id="chrome">Chrome</th>
14 | 		</tr>
15 | 		<tr>
16 | 			<th scope="row" id="year">[…]</th>
17 | 			<th scope="col" id="chrome-2018">2018</th>
18 | 			<th scope="col" id="chrome-2019">2019</th>
19 | 		</tr>
20 | 	</thead>
21 | 	<tbody>
22 | 		<tr>
23 | 			<th scope="row" id="parts">[…]</th>
24 | 			<td style="--value: 50;" headers="browser chrome year chrome-2018"><span>49.6%</span></td>
25 | 			<td style="--value: 57;" headers="browser chrome year chrome-2019"><span>57%</span></td>
26 | 		</tr>
27 | 	</tbody>
28 | </table>
29 | -------------------------------------------------------------------------------- /_site/templates/includes/_inclusive-toggle.njk: -------------------------------------------------------------------------------- 1 | 
document.addEventListener("DOMContentLoaded", function() {
 2 | 	var switches = document.querySelectorAll('[role="switch"]');
 3 | 
 4 | 	Array.prototype.forEach.call(switches, function(el, i) {
 5 | 		el.addEventListener('click', function() {
 6 | 			var checked = this.getAttribute('aria-checked') == 'true' || false;
 7 | 			this.setAttribute('aria-checked', !checked);
 8 | 
 9 | 			var chart = this.parentNode.nextElementSibling;
10 | 			chart.classList.toggle('chaarts');
11 | 		});
12 | 	});
13 | });
14 | -------------------------------------------------------------------------------- /_site/templates/includes/_line-markup.njk: -------------------------------------------------------------------------------- 1 | 
<table class="chaarts line" style="--y: 32; --x: 13; --t-1: 'Jan.'; --t-2: 'Feb.'; […]">
 2 | 	<caption id="caption-3">[…]</caption>
 3 | 	<thead>
 4 | 		<tr>
 5 | 			<th scope="col">[…]</th>
 6 | 			<th scope="col">Jan.</th>
 7 | 			<th scope="col">[…]</th>
 8 | 		</tr>
 9 | 	</thead>
10 | 	<tbody>
11 | 		<tr style="--year: '2017'; --1: 8; --2: 6; --3: 9; --4: 12; --5: 15; --6: 21; --7: 24; --8: 25; --9: 22; --10: 19; --11: 14; --12: 9;">
12 | 			<th scope="row">2017</th>
13 | 			<td>8 °C</td>
14 | 			<td>[…]</td>
15 | 		</tr>
16 | 	</tbody>
17 | </table>
18 | -------------------------------------------------------------------------------- /_site/templates/includes/_pie-markup.njk: -------------------------------------------------------------------------------- 1 | 
<table class="chaarts pie" style="--1: 2; --2: 2; …">
 2 | 	<caption id="caption-5">[…]</caption>
 3 | 	<thead class="sr-only">
 4 | 		<tr>
 5 | 			<th scope="col">[…]</th>
 6 | 			<th scope="col">[…]</th>
 7 | 		</tr>
 8 | 	</thead>
 9 | 	<tbody>
10 | 		<tr style="--color: var(--chaarts-purple); --term: 'HTML';">
11 | 			<th scope="row">HTML</th>
12 | 			<td>2 %</td>
13 | 		</tr>
14 | 		<tr>[…]</tr>
15 | 	</tbody>
16 | </table>
17 | -------------------------------------------------------------------------------- /_site/templates/includes/_pie-styles:44.njk: -------------------------------------------------------------------------------- 1 | 
td[style*="--value: 44;"]::before {
 2 | 	clip-path: polygon(
 3 | 		50% 50%,
 4 | 		50% 0%,
 5 | 		100% 0%,
 6 | 		100% 50%,
 7 | 		100% 100%,
 8 | 		95.2413525% 71.2889645%,
 9 | 		50% 50%,
10 | 		50% 50%,
11 | 		50% 50%,
12 | 		50% 50%
13 | 	);
14 | }
15 | -------------------------------------------------------------------------------- /_site/templates/includes/_pie-styles:64.njk: -------------------------------------------------------------------------------- 1 | 
td[style*="--value: 64;"]::before {
 2 | 	clip-path: polygon(
 3 | 		50% 50%,
 4 | 		50% 0%,
 5 | 		100% 0%,
 6 | 		100% 50%,
 7 | 		100% 100%,
 8 | 		100% 100%,
 9 | 		0% 100%,
10 | 		11.474338% 81.8711995%,
11 | 		50% 50%,
12 | 		50% 50%
13 | 	);
14 | }
15 | -------------------------------------------------------------------------------- /_site/templates/includes/_pie-styles:88.njk: -------------------------------------------------------------------------------- 1 | 
td[style*="--value: 88;"]::before {
 2 | 	clip-path: polygon(
 3 | 		50% 50%,
 4 | 		50% 0%,
 5 | 		100% 0%,
 6 | 		100% 50%,
 7 | 		100% 100%,
 8 | 		100% 100%,
 9 | 		0% 100%,
10 | 		0% 50%,
11 | 		0% 0%,
12 | 		15.7726445% 13.5515685%
13 | 	);
14 | }
15 | -------------------------------------------------------------------------------- /_site/templates/includes/_radar-markup.njk: -------------------------------------------------------------------------------- 1 | 
<table class="chaarts radar" id="radar" style="--scale: 20; --step: 5; --items: 7; --1: 14; --2: 11; --3: 13; --4: 16; --5: 10; --6: 12; --7: 4; --8: var(--1);">
 2 | 	<caption id="caption-9">[…]</caption>
 3 | 	<thead>
 4 | 		<tr>
 5 | 			<th scope="col">[…]</th>
 6 | 			<th scope="col">[…]</th>
 7 | 		</tr>
 8 | 	</thead>
 9 | 	<tbody>
10 | 		<tr>
11 | 			<td><span>14</span></td>
12 | 			<td><span>11</span></td>
13 | 		</tr>
14 | 	</tbody>
15 | </table>
16 | -------------------------------------------------------------------------------- /_site/templates/includes/_radars-markup.njk: -------------------------------------------------------------------------------- 1 | 
<table class="chaarts radar-multiple" id="radar-multiple" style="--scale: 20; --step: 5; --items: 7; --areas: 2;">
 2 | 	<caption id="caption-9">[…]</caption>
 3 | 	<thead>
 4 | 		<tr>
 5 | 			<th scope="col">[…]</th>
 6 | 			<th scope="col">[…]</th>
 7 | 		</tr>
 8 | 	</thead>
 9 | 	<tbody>
10 | 		<tr style="--color: var(--chaarts-purple); --1: 14; --2: 11; --3: 13; --4: 16; --5: 14; --6: 10; --7: 4; --8: var(--1);">
11 | 			<th scope="row">Gaël</th>
12 | 			<td><span>14</span></td>
13 | 		</tr>
14 | 		<tr style="-color: var(--chaarts-pink); --1: 18; --2: 10; --3: 11; --4: 16; --5: 10; --6: 12; --7: 11; --8: var(--1);">
15 | 			<th scope="row">Luc</th>
16 | 			<td><span>18</span></td>
17 | 		</tr>
18 | 	</tbody>
19 | </table>
20 | -------------------------------------------------------------------------------- /_site/templates/includes/_svg-encoding.njk: -------------------------------------------------------------------------------- 1 | 
.chaarts {
 2 | 	--stripes: url("data:image/svg+xml,<svg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'><g fill='%23fff9' fill-rule='evenodd'><path d='M5 0h1L0 6V5zM6 5v1H5z'/></g></svg>");
 3 | }
 4 | 
 5 | .chaarts tr:nth-child(2n + 2) {
 6 | 	--background: var(--stripes);
 7 | }
 8 | 
 9 | .chaarts td {
10 | 	--size: calc( var(--scale, 100) * 100% );
11 | 	--position: calc( var(--value, 0) / var(--scale, 100) * 100% );
12 | 	background:
13 | 		linear-gradient( right, Window, ButtonFace, ButtonText, Highlight ) var(--position) 0% / var(--size) 100%,
14 | 		var(--background) center / contain;
15 | 	background-blend-mode: hard-light;
16 | }
17 | -------------------------------------------------------------------------------- /_site/templates/includes/_waterfall-markup.njk: -------------------------------------------------------------------------------- 1 | 
<table class="chaarts bar waterfall"
2 |  style="--scale: 3000; --1: 4; --2: 96; --3: 102; --4: 129; --5: 188; --6: 194; --7: 326; --8: 836; --9: 836; --10: 2561; --11: 2980;">
3 | </table>
4 | -------------------------------------------------------------------------------- /_site/templates/index.njk: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% block meta %} 7 | chaarts 8 | 9 | 10 | 11 | 13 | 14 | {% endblock %} 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 72 | 73 |
74 | {% block main %} 75 |

Chaarts

76 | 77 |

78 | Every chart in this project relies solely on semantic markup 79 | — <table> based — and a spread of 80 | CSS variables carried by the tags. 81 | No JavaScript required for display, and styles are 82 | progressively enhanced depending on your browser's capabilities. 83 |

84 | 85 |

86 | Note : by virtue of the experimental 87 | nature of these techniques and a solid foundation enhanced progressively, 88 | I don't mention browser support for each example — but 89 | it goes without saying that this is not magic, and only modern browsers handle this right. 90 | Other browsers should display a properly styled table, and that's nice. 91 |

92 | 93 |

Accessibility

94 | 95 |

96 | A major effort has been made to ensure accessibility. 97 | As mentioned above, semantic and structured markup is a prerequisite 98 | — but it's not enough. CSS 99 | is being applied as gradually as possible, in order to guarantee 100 | the best possible display of data for each user. 101 |

102 | 103 |

Accessible table

104 | 105 |

Wakeup call :

106 | 107 | 124 | 125 |

126 | For other useful tips, I warmly recommend reading 127 | 128 | Data Tables Inclusive Component by Heydon Pickering, 129 | which is a real gold mine. 130 |

131 | 132 |

Patterns

133 |

134 | To distinguish the different areas other than by colour, an 135 | svg 136 | pattern is applied in 137 | css 138 | — you can find some of them on the 139 | Hero Patterns website: 140 |

141 |
    142 |
  1. 143 | in order to improve blending with background colors or gradients, the 144 | background-blend-mode property is used with the hard-light value; 145 |
    2. 146 |
  2. 147 | pattern's size and position depends directly on the value and scale of the chart, 148 | depending on the type of chart; 149 |
    3. 150 |
  3. 151 | in order not to embed too many external files, we use a 152 | 153 | technique proposed by Trys Mudford to include each 154 | svg 155 | in data URi in a css variable; 156 | thus, a finite list of patterns is used in the theme, without ever repeating the svg. 157 |
    4. 158 |
159 | 160 |
161 |

What to encode?

162 |

163 | 164 | Chris Coyier (via Charlotte Dann) 165 | explained that as of now, only the octhotorpe needs to be encoded in 166 | css 167 | . 168 | Don't bother with the other characters, their encoding seriously affects readability. 169 |

170 |
171 | 172 | {% include 'includes/_svg-encoding.njk' %} 173 | 174 |

User preferences

175 |

176 | In order to respect as much as possible the preferences of the visitors, 177 | many elements have been adapted: 178 |

179 |
    180 |
  1. 181 | dimensions are in relatives units (em or rem as the case may be), 182 | in order to fit coherently with the body of text inherited from the browser and to be able 183 | to be enlarged or reduced without loss; 184 |
    2. 185 |
  2. 186 | colors are adjusted when High Contrast Mode is detected using 187 | prefers-contrast: more. 188 |
    3. 189 |
  3. 190 | animations and transitions are disabled when the system exposes 191 | this preference through prefers-reduced-motion: reduce ; 192 |
    4. 193 |
  4. 194 | hover effects whose initial state consists in hiding content 195 | are activated contextually in the @media (hover: hover) { … } media query. 196 |
    5. 197 |
  5. 198 | RTL is supported thanks to logical properties and a few tweaks here and there. 199 |
    6. 200 |
201 | 202 |

display and semantics

203 |

204 | Adrian Roselli explains that playing with a <table> or <dl> 205 | element's display endangers its semantics. 206 | The latter is therefore "locked" using dedicated 207 | aria 208 | roles — as he explains 209 | in a detailed article. 210 |

211 |

212 | That's why each table is preceded by a switch — based on 213 | Heydon Pickering 214 | inclusive toggle button — whose one and only role is to disable additional styles: 215 |

216 | 217 | {% include 'includes/_inclusive-toggle.njk' %} 218 | 219 |

220 | Well, we're ready to get to the heart of the matter.
221 | Warm up your dev tools! 222 |

223 | {% endblock %} 224 |
225 | 226 | {% block scripts %} 227 | 228 | 229 | {% endblock %} 230 | 231 | {% block modal %} 232 | {% endblock %} 233 | 234 | 235 | -------------------------------------------------------------------------------- /_site/templates/macros/_table-bar.njk: -------------------------------------------------------------------------------- 1 | {% macro bar(term='', definition='', unit='', title='', variant='') %} 2 | 3 | {{ term }} 4 | 5 | {{ definition }}{% if unit != '' %} {% if title != '' %}{% endif %}{{ unit }}{% if title != '' %}{% endif %}{% endif %} 6 | 7 | 8 | {% endmacro %} 9 | -------------------------------------------------------------------------------- /_site/templates/macros/_table-line.njk: -------------------------------------------------------------------------------- 1 | {% macro line(definition='', unit='', title='') %} 2 | 3 | {{ definition }}{% if unit != '' %} {% if title != '' %}{% endif %}{{ unit }}{% if title != '' %}{% endif %}{% endif %} 4 | 5 | {% endmacro %} 6 | -------------------------------------------------------------------------------- /_site/templates/macros/_table-pie.njk: -------------------------------------------------------------------------------- 1 | {% macro pie(term='', definition='', unit='', title='', color='') %} 2 | 3 | {{ term }} 4 | 5 | {{ definition }}{% if unit != '' %} {% if title != '' %}{% endif %}{{ unit }}{% if title != '' %}{% endif %}{% endif %} 6 | 7 | 8 | {% endmacro %} 9 | -------------------------------------------------------------------------------- /_site/templates/radar-charts.njk: -------------------------------------------------------------------------------- 1 | {% extends "index.njk" %} 2 | 3 | {% block meta %} 4 | Radar charts — chaarts 5 | 6 | 7 | 8 | 9 | 10 | {% endblock %} 11 | 12 | {% block navigation %} 13 | 29 | {% endblock %} 30 | 31 | {% block main %} 32 |

Radar charts

33 | 34 |

35 | This one's kind of fun. We define some CSS 36 | variables on the table: the scale (and tiers), the number of elements, and the values. 37 |

38 | 39 |

40 | On the CSS side, it's getting complicated: 41 |

42 | 43 | 123 | 124 |

And that's it!

125 | 126 |
127 |
128 |

129 | Switch
130 | Allows you to disable styles on the following table. 131 |

132 | 138 |
139 | 140 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 |
Level of interest by domain, out of 20
AccessibilitySEOPerformanceCompatibilitySecurityCode qualityTest
1411131610124
166 |
167 | 168 |
169 | HTML 170 |
{% include 'includes/_radar-markup.njk' %}
171 |
172 |
173 | css 174 |
175 | 
{% filter escape %}{% include 'css/examples/radar.css' %}{% endfilter %}
176 |
177 |
178 |
179 | A Chromium bug 180 |

181 | There is currently a bug in Chromium — I filled 182 | an issue on bugs.chromium.org — 184 | when using the border-spacing property on the table: 185 | it prevents Chrome to define the dimensions of the table… 186 | For Chrome user, use the inspector to uncheck this property on the 187 | <table> tag of these examples! 188 |

189 |

Reduced test case

190 |
191 |
192 |

193 | Switch
194 | Allows you to disable styles on the following table. 195 |

196 | 202 |
203 | 204 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 |
Level of interest by domain, out of 20
AccessibilitySEOPerformanceCompatibilitySecurityCode qualityTest
1411131610124
230 |
231 |
232 |
233 | A Firefox feature 234 |
235 | The skew() function deforms the element by tilting it. 237 |
238 | Screenshot of the deformation caused by skew() 239 | – props to Patrick Brosset 240 | who made CSS 241 | transform Highlighter happen in Firefox DevTools. 242 |
243 |
244 |
245 | 246 | 247 |

Overlapping radars

248 | 249 |

Very few changes compared to the previous version:

250 | 251 |
    252 |
  1. 253 | the <table> element no longer carries the values, 254 | but has a new --areas custom property to indicate the number of rows in the table; 255 |
    2. 256 |
  2. 257 | however we multiply the number of rows in the body of the table: 258 | 268 |
    3. 269 |
  3. 270 | the rest is relatively common now — if you've gone through the previous examples: 271 |
      272 |
    1. 273 | a color for each row, presented on the header cells 274 | and serving as a background for the data cells; 275 |
      2. 276 |
    2. 277 | a distinctive hover effect over each row: the values appear 278 | verbatim on hovering, and the hovered row is highlighted. In order not to deprive users 279 | who do not have a good hover pointer, this effect is a progressive enhancement 280 | based on the @media (hover: hover) { … } media query. 281 |
      3. 282 |
    283 |
    4. 284 | 285 |
286 | 287 |
288 |
289 |

290 | Switch
291 | Allows you to disable styles on the following table. 292 |

293 | 299 |
300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 |
Level of interest by domain, out of 20
AccessibilitySEOPerformanceCompatibilitySecurityCode qualityTest
Gaël1411131614104
Luc18101116101211
338 |
339 | 340 |
341 | HTML 342 |
{% include 'includes/_radars-markup.njk' %}
343 |
344 |
345 | css 346 |
347 | 
{% filter escape %}{% include 'css/examples/radars.css' %}{% endfilter %}
348 |
349 |
350 | {% endblock %} 351 | -------------------------------------------------------------------------------- /dist/chaarts.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../src/chaarts.scss","../src/abstracts/_mixins.scss","../src/_chaarts-bar.scss","../src/_chaarts-waterfall.scss","../src/_chaarts-pie.scss","../src/abstracts/_variables.scss","../src/_chaarts-donut.scss","../src/_chaarts-polar.scss","../src/_chaarts-line.scss","../src/_chaarts-points.scss","../src/_chaarts-column.scss","../src/_chaarts-column-multiple.scss","../src/_chaarts-radar.scss","../src/_chaarts-radar-multiple.scss"],"names":[],"mappings":";AASA;AAYA;EACC;EACA;EACA;;AAOD;EACC;IACC;IACA;IACA;IACA;IACA;IACA;;EAEA;IACC;IACA;IACA;;EAIF;AAAA;IAEC;IACA;IACA;;EAGD;IACC;IACA;;EAGD;IACC;;EAGD;IACC;;;AAQF;EACC;EAEA;IACC;MA0BC;MACA;MACA;MACA;MACA;MACA;MAEA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MAwDA;MACA;MACA;MACA;MACA;MACA;MASA;MACA;MACA;;IAlHA;MACC;MACA;;IA0CD;MAvDD;QAwDE;;;IChIH;MD0IG;MAEA;MACA;MACA;MACA;;IC3IH;MACC;QDqIE;QAEA;QACA;QACA;QACA;;;IAWD;MAlFD;QAmFE;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;;IAkCD;MACC;;IAIF;MACC;MACA;MACA;MACA;MACA;;IAEA;MACC;MACA;MACA;;IAGD;MACC;;IAGD;MACC;MACA;MACA;MACA;;IAIF;MACC;;IAGD;MACC;QACC;QACA;QACA;;MAEA;AAAA;QAEC;QACA;;MAEA;AAAA;QACC;;;;EAOL;IACC;MEzOF;QACC;;MAEA;QACC;QACA;;MAGD;QACC;QACA;QACA;QACA;QACA;;MDdA;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MCkBF;QACC;QACA;QACA;QACA;;MAGD;QACC;QACA;QAEA;QAQA;QACA;QACA;QACA;;MAGD;QACC;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;MAIA;QACC;;MAGD;QACC;;MAIF;QACC;UACC;;QAGD;UACC;UACA;UACA;;;MCtFD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;;IH2PD;MI3PF;QACC;QAEA;QACA;QACA;;MAEA;QACC;QACA;QACA;;MAGD;QACC;QACA;QACA;QACA;QACA;QACA;QAEA;QACA;QACA;QACA;;MHZA;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MGgBD;QACC;QACA;;MAGD;QACC;QACA;;MAYA;QACC;QACA;;MAFD;QACC;QACA;;MAFD;QACC;QACA;;MAFD;QACC;QACA;;MAFD;QACC;QACA;;MAKH;QACC;;MAEA;QACC;QACA,YCjEM;QDkEN;QACA;QACA,aCpEM;QDqEN;;MAIF;AAAA;QAEC;QACA;QACA;QACA;;MAGD;QACC;;MAoBD;QACC;QACA;QACA;QACA;QACA;QACA;QACA;QACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;QAeA;QACA;QACA;QACA;QACA;QACA;QACA,WACC;QAGD;;MAGD;QACC;;MAcD;QACC;QACA;QACA;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,WACC;QAMD;QACA;QAEA;;MAGD;QACC;;MAEA;QACC;;MAGD;QACC;QACA,WACC;QAMD;;MEhMH;QACC;AAAA;AAAA;AAAA;AAAA;QAMA;;MAEA;QACC;;MCTD;AAAA;QAEC;QACA,WACC;;MAKF;QACC;;;IPyPA;MQ3PF;QACC;QACA;QACA;QAEA;QACA;QACA;;MAGA;QACC;QAEA;QAKA;QACA;QACA;QACA;QACA;QACA;;MAGD;QACC;QACA;;MAGD;AAAA;QAEC;QACA;;MAGD;QACC;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;MAqBA;QAhCD;UAiCE;;;MAIF;AAAA;QAEC;QACA;QACA;QACA;;MAIA;QACC;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;MP5GF;QO+GG;;MP3GH;QACC;UO0GE;;;MAKD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MAIF;QACC;;MAIF;QACC;QACA;QAEA;;MAEA;QACC;QACA;QACA;QACA;QACA;QACA;;MAsBD;QACC;QACA;QACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;QASA;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QAEA;QACA;;MAGD;QACC;;MAGD;QACC;;MAIA;QACC;QACA;QACA;;MAEA;QACC;QACA;;MAPF;QACC;QACA;QACA;;MAEA;QACC;QACA;;MAPF;QACC;QACA;QACA;;MAEA;QACC;QACA;;MAPF;QACC;QACA;QACA;;MAEA;QACC;QACA;;MAPF;QACC;QACA;QACA;;MAEA;QACC;QACA;;MAPF;QACC;QACA;QACA;;MAEA;QACC;QACA;;MAPF;QACC;QACA;QACA;;MAEA;QACC;QACA;;MAPF;QACC;QACA;QACA;;MAEA;QACC;QACA;;MAPF;QACC;QACA;QACA;;MAEA;QACC;QACA;;MAPF;QACC;QACA;QACA;;MAEA;QACC;QACA;;MAPF;QACC;QACA;QACA;;MAEA;QACC;QACA;;MAPF;QACC;QACA;QACA;;MAEA;QACC;QACA;;MAKH;QACC;QACA;QACA;;MClND;QACC;QACA;QACA;QAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;MAgCD;QACC;QACA;QACA;QACA;QACA;QACA;;MAIA;QACC;QACA;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QAEA;QACA;;MAGD;QACC;;MAGD;QAEC;;MAIA;QACC;QACA;;MAFD;QACC;QACA;;MAFD;QACC;QACA;;MAFD;QACC;QACA;;MAFD;QACC;QACA;;MAFD;QACC;QACA;;MAFD;QACC;QACA;;MAFD;QACC;QACA;;MAFD;QACC;QACA;;MAFD;QACC;QACA;;MAFD;QACC;QACA;;MRnEH;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MQ0EF;AAAA;QAEC;;MAGD;AAAA;QAEC;;MAGD;QACC;QACA;;MAIA;QACC;;MAGD;QACC;;;IT0JD;MUnQF;QACC;QACA;QACA;QAEA;QACA;QACA,gBLhBO;QKiBP;;MAEA;AAAA;AAAA;QAGC;QACA;;MAGD;QACC;;MAQD;AAAA;AAAA;AAAA;QAIC;;MAGD;QACC;QACA;;MAGD;QACC;QAEA;QACA;QACA;QACA;;MAGC;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MAKH;QACC;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;MAEA;QAZD;UAaE;UACA;UACA;;;MAIF;QACC;QACA;QACA;QACA;QACA;QACA;;MAEA;QACC;;MAGD;QACC;;MAOA;AAAA;QACC;;MADD;AAAA;QACC;;MADD;AAAA;QACC;;MADD;AAAA;QACC;;MADD;AAAA;QACC;;MADD;AAAA;QACC;;MADD;AAAA;QACC;;MADD;AAAA;QACC;;MADD;AAAA;QACC;;MAMJ;QACC;QACA;;MAEA;QACC;QACA;;MAGD;QACC;;MAGD;QACC;QAEA;QAQA;;MTlHA;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MSqHD;QAfD;UAgBE;;;MCtIH;QACC;QACA;;MAEA;QACC;;MAGD;QACC;;MAGD;QACC;;MAGD;QACC;;MAMC;AAAA;QACC;;MADD;AAAA;QACC;;MADD;AAAA;QACC;;MADD;AAAA;QACC;;MADD;AAAA;QACC;;MAKH;QACC;QACA;;MAGC;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MAKH;QACC;QACA;QACA;;MAID;QACC;;;IX8NA;MY7QF;QACC;QACA;QACA;QACA;QACA;QAEA,kBACC;QAUD;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;MAEA;QACC;QACA;QACA;;MAYD;QACC;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;;MAIA;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MADD;QACC;;MAiBF;QACC;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;MAGC;QACC;QACA;;MAFD;QACC;QACA;;MAFD;QACC;QACA;;MAFD;QACC;QACA;;MAFD;QACC;QACA;;MAFD;QACC;QACA;;MAFD;QACC;QACA;;MAIF;QAEC;;MAIF;QACC;QAGA;QACA;QAGA;QAGA;QACA;AAAA;AAAA;AAAA;AAAA;QAMA;QACA;QACA;QACA;QACA;QACA;;MAgBD;QACC;QACA;QACA;QACA;;MAIA;QACC;QAEA;QACA;;MAJD;QACC;QAEA;QACA;;MAJD;QACC;QAEA;QACA;;MAJD;QACC;QAEA;QACA;;MAJD;QACC;QAEA;QACA;;MAJD;QACC;QAEA;QACA;;MAJD;QACC;QAEA;QACA;;MCvJH;QACC;;MAEA;QACC;QACA;;MAGD;QACC;QACA;QACA,MRdO;QQeP;;MAEA;QACC;QACA,YRnBM;QQoBN;QACA;QACA,aRtBM;QQuBN;QACA;;MAMD;QACC;;MAIF;QACC;QACA;QACA;QACA;QACA;QACA;QACA;;MAEA;QACC;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;MAIA;QACC;QAEA;QACA;QACA;;MALD;QACC;QAEA;QACA;QACA;;MALD;QACC;QAEA;QACA;QACA;;MALD;QACC;QAEA;QACA;QACA;;MALD;QACC;QAEA;QACA;QACA;;MALD;QACC;QAEA;QACA;QACA;;MALD;QACC;QAEA;QACA;QACA;;MAKH;QACC;QAEA;QACA;QACA;;MAGD;QACC;UACC;UACA;;QAEA;UACC;UACA;;QAIF;UACC;UACA;;QAEA;UACC","file":"chaarts.css"} -------------------------------------------------------------------------------- /dist/chaarts.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/chaarts.scss","chaarts.css","../src/abstracts/_mixins.scss","../src/_chaarts-bar.scss","../src/_chaarts-waterfall.scss","../src/_chaarts-pie.scss","../src/abstracts/_variables.scss","../src/_chaarts-donut.scss","../src/_chaarts-polar.scss","../src/_chaarts-line.scss","../src/_chaarts-points.scss","../src/_chaarts-column.scss","../src/_chaarts-column-multiple.scss","../src/_chaarts-radar.scss","../src/_chaarts-radar-multiple.scss"],"names":[],"mappings":"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","file":"chaarts.min.css"} -------------------------------------------------------------------------------- /docs/css/chaarts.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/chaarts.scss","chaarts.css","../src/abstracts/_mixins.scss","../src/_chaarts-bar.scss","../src/_chaarts-waterfall.scss","../src/_chaarts-pie.scss","../src/abstracts/_variables.scss","../src/_chaarts-donut.scss","../src/_chaarts-polar.scss","../src/_chaarts-line.scss","../src/_chaarts-points.scss","../src/_chaarts-column.scss","../src/_chaarts-column-multiple.scss","../src/_chaarts-radar.scss","../src/_chaarts-radar-multiple.scss"],"names":[],"mappings":"AAwEA,gBCozCA,CDn3CA,uBAAA,CAYA,oBACC,cAAA,CACA,eAAA,CACA,kBClBD,CDyBA,eACC,MAGC,4BAAA,CAFA,wBAAA,CACA,gBAAA,CAEA,gBAAA,CACA,uBAAA,CACA,kBCvBA,CDyBA,0BACC,iBAAA,CACA,QAAA,CACA,mBCvBD,CD2BD,MAEC,wBAAA,CACA,oBAAA,CACA,gBCzBA,CD4BD,GACC,gBAAA,CACA,oBC1BA,CD6BD,MACC,qBC3BA,CD8BD,MACC,kCC5BA,CACF,CDmCA,eACC,+CAAA,CAEA,iBACC,mBA6BC,gCAAA,CAIA,2BAAA,CACA,yBAAA,CACA,SAAA,CACA,6DAAA,CACA,yEAAA,CACA,qDAAA,CACA,iFAAA,CACA,8DAAA,CACA,8DAAA,CACA,8DAAA,CACA,SAAA,CACA,eAAA,CACA,iBAAA,CACA,2EAAA,CACA,4EAAA,CACA,4EAAA,CACA,8DAAA,CACA,8EAAA,CACA,2EAAA,CACA,4CAAA,CACA,0BAAA,CAwDA,2MAAA,CACA,4dAAA,CACA,6OAAA,CACA,mVAAA,CACA,sMAAA,CACA,0PAAA,CASA,+BAAA,CACA,8BAAA,CACA,8BAAA,CAnGA,kBAAA,CACA,aAAA,CACA,oBAAA,CAEA,eAAA,CACA,iBC7BC,CDSD,6BACC,iDAAA,CACA,sbCPA,CDiDD,0BAvDD,mBAwDE,eC9CE,CACF,CCnFH,iDF4IG,yBAAA,CACA,2BAAA,CACA,6CAAA,CACA,iFAAA,CALA,iBChDA,CCtFH,mCACC,kFFuIE,yBAAA,CACA,2BAAA,CACA,6CAAA,CACA,iFAAA,CALA,iBCxCE,CACF,CDuDD,+BAlFD,mBAmFE,2BAAA,CACA,mBAAA,CACA,uBAAA,CACA,+BAAA,CACA,yBAAA,CACA,yBAAA,CACA,wBAAA,CACA,2BAAA,CACA,8BAAA,CACA,yBAAA,CACA,2BCpDE,CACF,CDqFD,6BACC,WCnFA,CDuFF,SACC,mBAAA,CACA,gBAAA,CACA,iBAAA,CACA,eAAA,CACA,WCrFC,CDuFD,6BACC,kBAAA,CACA,iBAAA,CACA,cCrFA,CDwFD,6BACC,YCtFA,CDyFD,qBACC,kBAAA,CACA,eAAA,CACA,eAAA,CACA,mBCvFA,CD2FF,6BACC,UCzFC,CD4FF,wBACC,SACC,uBAAA,CACA,gBAAA,CACA,eC1FE,CD4FF,wBAEC,QAAA,CACA,SC1FC,CD4FD,oCACC,sBCzFA,CACF,CACF,CD8FD,wBACC,WGzOF,aACC,eF8IK,CE5IL,qBACC,kBAAA,CACA,sCF8II,CE3IL,gBAGC,kBAAA,CAFA,YAAA,CACA,kBAAA,CAEA,mGAAA,CACA,kCF6II,CC3JJ,kCACC,4BD6JG,CC9JJ,kCACC,4BDgKG,CCjKJ,kCACC,6BDmKG,CCpKJ,kCACC,uBDsKG,CCvKJ,kCACC,2BDyKG,CC1KJ,kCACC,wBD4KG,CE1JL,gBACC,eAAA,CACA,gBAAA,CACA,kBAAA,CACA,cF4JI,CEzJL,gBACC,mCAAA,CACA,uDAAA,CAEA,+MAAA,CAQA,gCAAA,CACA,mCAAA,CACA,gBAAA,CACA,iBFmJI,CEhJL,kBACC,kBAAA,CACA,4BAAA,CAAA,oBAAA,CACA,WAAA,CACA,eAAA,CACA,uBAAA,CACA,eAAA,CACA,yBAAA,CACA,iBFkJI,CE9IJ,sBACC,UFgJG,CE7IJ,4BACC,SF+IG,CE3IL,oDACC,gBACC,8BF6IK,CE1IN,kBACC,oCAAA,CACA,qBAAA,CACA,yBF4IK,CACF,CGnOJ,2CACC,sCHqOG,CGtOJ,4CACC,sCHwOG,CGzOJ,4CACC,sCH2OG,CG5OJ,4CACC,sCH8OG,CG/OJ,4CACC,sCHiPG,CGlPJ,4CACC,sCHoPG,CGrPJ,4CACC,sCHuPG,CGxPJ,4CACC,sCH0PG,CG3PJ,4CACC,sCH6PG,CG9PJ,6CACC,sCHgQG,CGjQJ,6CACC,uCHmQG,CACF,CDTF,WK3PF,aACC,aAAA,CAEA,aAAA,CACA,8CAAA,CACA,iBJsQK,CIpQL,mBACC,QAAA,CACA,YAAA,CACA,cJsQI,CInQL,gBACC,oCAAA,CACA,8BAAA,CACA,oCAAA,CACA,8BAAA,CACA,oCAAA,CACA,8BAAA,CAEA,kBAAA,CACA,YAAA,CACA,aAAA,CACA,kCJoQI,CChRJ,kCACC,4BDkRG,CCnRJ,kCACC,4BDqRG,CCtRJ,kCACC,6BDwRG,CCzRJ,kCACC,uBD2RG,CC5RJ,kCACC,2BD8RG,CC/RJ,kCACC,wBDiSG,CIjRJ,4BACC,gBAAA,CACA,gBJmRG,CIhRJ,6BACC,gBAAA,CACA,kCJkRG,CItQH,kCACC,gBAAA,CACA,+CJwQE,CI1QH,kCACC,gBAAA,CACA,0DJ4QE,CI9QH,kCACC,gBAAA,CACA,qEJgRE,CIlRH,kCACC,gBAAA,CACA,gFJoRE,CItRH,kCACC,gBAAA,CACA,2FJwRE,CInRL,yBACC,wBJqRI,CInRJ,gCACC,sDAAA,CACA,eCjEM,CDkEN,UAAA,CACA,oBAAA,CACA,gBCpEM,CDqEN,+CJqRG,CIjRL,6CAEC,uCAAA,CACA,sBAAA,CACA,iBAAA,CACA,uBJmRI,CIhRL,gCACC,sBJkRI,CI9PL,uBACC,UAAA,CACA,6BAAA,CACA,yFAAA,CACA,6CAAA,CACA,oDAAA,CACA,+BAAA,CACA,+BAAA,CACA,opBAAA,CAeA,sDAAA,CACA,wBAAA,CACA,iBAAA,CACA,wBAAA,CACA,UAAA,CACA,yBAAA,CACA,oGACC,CAGD,oCJ0PI,CIvPL,gCACC,SJyPI,CI3OL,sBACC,gEAAA,CACA,mCAAA,CACA,4BAAA,CAEA,0CAAA,CACA,+BAAA,CACA,6CAAA,CACA,gCAAA,CACA,SAAA,CACA,aAAA,CACA,mBAAA,CACA,6IACC,CAMD,sCAAA,CACA,8DAAA,CAEA,SJqOI,CIlOL,4BACC,UJoOI,CIlOJ,kCACC,SJoOG,CIjOJ,2CACC,SAAA,CACA,4IACC,CAMD,4DJ6NG,CM7ZN,mBACC,kHAAA,CAMA,8BAAA,CAAA,sBN8ZK,CM5ZL,4BACC,qCN8ZI,COvaL,mEAEC,SAAA,CACA,iJPyaI,COnaL,4BACC,kFPqaI,CACF,CD7KF,YS3PF,cACC,gCAAA,CACA,0BAAA,CACA,mCAAA,CAEA,4BAAA,CACA,iBAAA,CACA,2DR0aK,CQvaL,oBACC,4CAAA,CAEA,2IAAA,CAMA,gBAAA,CACA,6BAAA,CACA,mBAAA,CAEA,SRoaI,CQjaL,4CARC,UAAA,CAIA,iBRyaI,CQhaL,6DAEC,+BAAA,CACA,gBRkaI,CQ/ZL,6BAWC,yiCAAA,CAVA,6EAAA,CACA,wBAAA,CACA,UAAA,CACA,gBAAA,CACA,6BAAA,CACA,mBAAA,CACA,iBAAA,CACA,uBAAA,CACA,SRqbI,CQ9ZJ,oDAhCD,6BAiCE,8BRiaK,CACF,CQ9ZL,kCAEC,oCAAA,CACA,eAAA,CACA,+BAAA,CACA,iBRgaI,CQ5ZJ,kDACC,mDAAA,CACA,+BAAA,CACA,4BAAA,CACA,UAAA,CACA,mBAAA,CACA,oBAAA,CACA,mDAAA,CACA,yBAAA,CACA,SAAA,CACA,iBAAA,CACA,kCAAA,CACA,SR8ZG,CC1gBL,gFO+GG,sBR8ZE,CCzgBL,wDACC,gJO0GE,sBRkaI,CACF,CQ9ZH,6CACC,SRgaE,CQjaH,6CACC,SRmaE,CQpaH,6CACC,SRsaE,CQvaH,6CACC,SRyaE,CQ1aH,6CACC,SR4aE,CQ7aH,6CACC,SR+aE,CQhbH,6CACC,SRkbE,CQnbH,6CACC,SRqbE,CQtbH,8CACC,SRwbE,CQzbH,8CACC,UR2bE,CQ5bH,8CACC,UR8bE,CQ/bH,8CACC,URicE,CQ7bJ,sCACC,WR+bG,CQ3bL,iBACC,gBAAA,CACA,iBAAA,CAEA,eR4bI,CQ1bJ,wBACC,iBAAA,CACA,UAAA,CACA,mBAAA,CACA,iBAAA,CACA,uCAAA,CACA,UR4bG,CQtaJ,uBACC,4BAAA,CACA,+DAAA,CACA,6IAAA,CASA,4BAAA,CAEA,0CAAA,CACA,wBAAA,CACA,+BAAA,CACA,uEAAA,CACA,kCAAA,CACA,8BAAA,CACA,wCAAA,CACA,SAAA,CACA,aAAA,CACA,mBAAA,CACA,iBAAA,CACA,wFAAA,CACA,sCAAA,CACA,8DAAA,CAEA,eAAA,CACA,SRsaG,CQnaJ,+CACC,gCRqaG,CQlaJ,0BACC,mERoaG,CQhaH,oCACC,gBAAA,CACA,iBAAA,CACA,SRkaE,CQhaF,8CACC,SAAA,CACA,iBRkaC,CQzaH,oCACC,gBAAA,CACA,iBAAA,CACA,SR2aE,CQzaF,8CACC,SAAA,CACA,iBR2aC,CQlbH,oCACC,gBAAA,CACA,iBAAA,CACA,SRobE,CQlbF,8CACC,SAAA,CACA,iBRobC,CQ3bH,oCACC,gBAAA,CACA,iBAAA,CACA,SR6bE,CQ3bF,8CACC,SAAA,CACA,iBR6bC,CQpcH,oCACC,gBAAA,CACA,iBAAA,CACA,SRscE,CQpcF,8CACC,SAAA,CACA,iBRscC,CQ7cH,oCACC,gBAAA,CACA,iBAAA,CACA,SR+cE,CQ7cF,8CACC,SAAA,CACA,iBR+cC,CQtdH,oCACC,gBAAA,CACA,iBAAA,CACA,SRwdE,CQtdF,8CACC,SAAA,CACA,iBRwdC,CQ/dH,oCACC,gBAAA,CACA,iBAAA,CACA,SRieE,CQ/dF,8CACC,SAAA,CACA,iBRieC,CQxeH,qCACC,gBAAA,CACA,iBAAA,CACA,SR0eE,CQxeF,+CACC,SAAA,CACA,iBR0eC,CQjfH,qCACC,iBAAA,CACA,kBAAA,CACA,URmfE,CQjfF,+CACC,SAAA,CACA,iBRmfC,CQ1fH,qCACC,iBAAA,CACA,kBAAA,CACA,UR4fE,CQ1fF,+CACC,UAAA,CACA,iBR4fC,CQngBH,qCACC,iBAAA,CACA,kBAAA,CACA,URqgBE,CQngBF,+CACC,UAAA,CACA,iBRqgBC,CQhgBJ,6BACC,SAAA,CACA,uFAAA,CACA,4DRkgBG,CSptBJ,+BAKC,soEAAA,CAJA,sDAAA,CACA,uBAAA,CACA,kCTovBG,CSltBJ,kCACC,sDAAA,CACA,eAAA,CACA,UAAA,CACA,oBAAA,CACA,gBAAA,CACA,wBTotBG,CShtBH,kCACC,WAAA,CACA,+DAAA,CAEA,sDAAA,CACA,sBAAA,CACA,0CAAA,CACA,iBAAA,CACA,4CAAA,CACA,UAAA,CACA,uBAAA,CACA,iCAAA,CACA,wCAAA,CACA,iBAAA,CACA,4DAAA,CAEA,qDAAA,CACA,STgtBE,CS7sBH,qCACC,mET+sBE,CS5sBH,2FAEC,wBT6sBE,CSzsBF,iDACC,gBAAA,CACA,ST2sBC,CS7sBF,iDACC,gBAAA,CACA,ST+sBC,CSjtBF,iDACC,gBAAA,CACA,STmtBC,CSrtBF,iDACC,gBAAA,CACA,STutBC,CSztBF,iDACC,gBAAA,CACA,ST2tBC,CS7tBF,iDACC,gBAAA,CACA,ST+tBC,CSjuBF,iDACC,gBAAA,CACA,STmuBC,CSruBF,iDACC,gBAAA,CACA,STuuBC,CSzuBF,kDACC,iBAAA,CACA,UT2uBC,CS7uBF,kDACC,iBAAA,CACA,UT+uBC,CSjvBF,kDACC,iBAAA,CACA,UTmvBC,CCtzBJ,0CACC,4BDwzBG,CCzzBJ,0CACC,4BD2zBG,CC5zBJ,0CACC,6BD8zBG,CC/zBJ,0CACC,uBDi0BG,CCl0BJ,0CACC,2BDo0BG,CCr0BJ,0CACC,wBDu0BG,CS7vBL,yFAEC,WT+vBI,CS5vBL,qGAEC,ST8vBI,CS3vBL,oDACC,UAAA,CACA,qDT6vBI,CSzvBJ,oDACC,uBT2vBG,CSxvBJ,0DACC,UT0vBG,CACF,CDjmBF,cWnQF,wBACC,YAAA,CACA,mCAAA,CACA,kCAAA,CAGA,0BAAA,CADA,YAAA,CAEA,mBLhBO,CKiBP,iBVs2BK,CUp2BL,kFAGC,aAAA,CACA,QVs2BI,CUn2BL,+BACC,iBVq2BI,CU71BL,wHAIC,gBV+1BI,CU51BL,gCACC,2BAAA,CACA,WV81BI,CU31BL,2BACC,4BAAA,CAEA,yDAAA,CACA,mBAAA,CACA,iBAAA,CACA,kCV41BI,CUz1BH,yCACC,aV21BE,CU51BH,0CACC,aV81BE,CU/1BH,0CACC,aVi2BE,CUl2BH,0CACC,aVo2BE,CUr2BH,0CACC,aVu2BE,CUx2BH,0CACC,aV02BE,CU32BH,0CACC,aV62BE,CU92BH,0CACC,aVg3BE,CUj3BH,0CACC,cVm3BE,CUp3BH,2CACC,cVs3BE,CUj3BL,6BACC,kBAAA,CACA,4BAAA,CAAA,oBAAA,CACA,WAAA,CACA,eAAA,CACA,oBAAA,CACA,kBAAA,CACA,oBAAA,CACA,eAAA,CACA,mBAAA,CACA,iBVm3BI,CUj3BJ,oDAZD,6BAaE,oCAAA,CACA,qBAAA,CACA,yBVo3BK,CACF,CUj3BL,4BACC,2CAAA,CACA,+BAAA,CACA,aAAA,CACA,oBAAA,CACA,WAAA,CACA,kCVm3BI,CUj3BJ,kCACC,UVm3BG,CUh3BJ,0CACC,SVk3BG,CU32BH,4FACC,aV82BE,CU/2BH,4FACC,aVk3BE,CUn3BH,4FACC,aVs3BE,CUv3BH,4FACC,aV03BE,CU33BH,4FACC,aV83BE,CU/3BH,4FACC,aVk4BE,CUn4BH,4FACC,aVs4BE,CUv4BH,4FACC,aV04BE,CU34BH,8FACC,cV84BE,CUx4BN,uBACC,qBAAA,CACA,yFV04BK,CUx4BL,gCACC,cAAA,CACA,aV04BI,CUv4BL,+BACC,WVy4BI,CUt4BL,0BACC,yDAAA,CAEA,0MAAA,CAQA,gCVg4BI,CCl/BJ,4CACC,4BDo/BG,CCr/BJ,4CACC,4BDu/BG,CCx/BJ,4CACC,6BD0/BG,CC3/BJ,4CACC,uBD6/BG,CC9/BJ,4CACC,2BDggCG,CCjgCJ,4CACC,wBDmgCG,CU94BJ,oDAfD,0BAgBE,oCVi5BK,CACF,CWxhCN,yBACC,6EAAA,CACA,mGX0hCK,CWxhCL,8BACC,qBX0hCI,CWvhCL,4CACC,SXyhCI,CWthCL,kCACC,mBXwhCI,CWrhCL,oCACC,WXuhCI,CWjhCH,8FACC,kDXohCE,CWrhCH,8FACC,kDXwhCE,CWzhCH,8FACC,kDX4hCE,CW7hCH,8FACC,mDXgiCE,CWjiCH,8FACC,mDXoiCE,CW/hCL,uCACC,eAAA,CACA,WXiiCI,CW9hCH,qDACC,aXgiCE,CWjiCH,qDACC,aXmiCE,CWpiCH,qDACC,aXsiCE,CWviCH,qDACC,aXyiCE,CW1iCH,qDACC,aX4iCE,CW7iCH,qDACC,aX+iCE,CWhjCH,qDACC,aXkjCE,CWnjCH,qDACC,aXqjCE,CWtjCH,sDACC,cXwjCE,CWzjCH,sDACC,cX2jCE,CWtjCL,4BACC,oCAAA,CACA,2BAAA,CACA,eXwjCI,CWpjCL,8CACC,+CXsjCI,CACF,CDz1BF,aa7QF,uBACC,eAAA,CACA,sBAAA,CACA,uCAAA,CACA,gCAAA,CACA,4BAAA,CAEA,sNACC,CAUD,gCAAA,CACA,gBAAA,CACA,iBAAA,CACA,cAAA,CACA,kCAAA,CACA,iCAAA,CACA,sBAAA,CACA,gBAAA,CACA,iBZ8lCK,CY5lCL,+BACC,eAAA,CACA,sBAAA,CACA,iBZ8lCI,CYllCL,mCACC,mCAAA,CAEA,wBAAA,CACA,QAAA,CACA,QAAA,CACA,cAAA,CACA,iBAAA,CACA,OAAA,CACA,gJZmlCI,CY/kCJ,yCACC,SZilCG,CYllCJ,0CACC,SZolCG,CYrlCJ,0CACC,SZulCG,CYxlCJ,0CACC,SZ0lCG,CY3lCJ,0CACC,SZ6lCG,CY9lCJ,0CACC,SZgmCG,CYjmCJ,0CACC,SZmmCG,CYllCL,0BACC,gCAAA,CAEA,cAAA,CACA,gDAAA,CACA,eAAA,CACA,MAAA,CACA,QAAA,CACA,iBAAA,CACA,KAAA,CACA,qEAAA,CACA,0BZmlCI,CYhlCH,6CACC,gBAAA,CACA,4DZklCE,CYplCH,8CACC,gBAAA,CACA,4DZslCE,CYxlCH,8CACC,gBAAA,CACA,4DZ0lCE,CY5lCH,8CACC,gBAAA,CACA,4DZ8lCE,CYhmCH,8CACC,gBAAA,CACA,4DZkmCE,CYpmCH,8CACC,gBAAA,CACA,4DZsmCE,CYxmCH,8CACC,gBAAA,CACA,4DZ0mCE,CYtmCJ,iEAEC,YZumCG,CYnmCL,4BACC,iCAAA,CAGA,+CAAA,CACA,6BAAA,CAGA,oDAAA,CAGA,gDAAA,CACA,6FAAA,CAMA,gCAAA,CACA,eAAA,CACA,wBAAA,CACA,kDAAA,CACA,gBAAA,CACA,iBZ8lCI,CY9kCL,iCACC,+BAAA,CACA,aAAA,CACA,eAAA,CACA,eZglCI,CY5kCJ,6CACC,wBAAA,CAEA,2CAAA,CACA,kCZ6kCG,CYjlCJ,8CACC,wBAAA,CAEA,2CAAA,CACA,kCZklCG,CYtlCJ,8CACC,wBAAA,CAEA,2CAAA,CACA,kCZulCG,CY3lCJ,8CACC,wBAAA,CAEA,2CAAA,CACA,kCZ4lCG,CYhmCJ,8CACC,wBAAA,CAEA,2CAAA,CACA,kCZimCG,CYrmCJ,8CACC,wBAAA,CAEA,2CAAA,CACA,kCZsmCG,CY1mCJ,8CACC,wBAAA,CAEA,2CAAA,CACA,kCZ2mCG,CalwCN,wBACC,sBbowCK,CalwCL,8BACC,oBAAA,CACA,qBbowCI,CajwCL,oCACC,eAAA,CACA,YAAA,CACA,SRdO,CQeP,iBbmwCI,CajwCJ,2CACC,oCAAA,CACA,eRnBM,CQoBN,UAAA,CACA,oBAAA,CACA,gBRtBM,CQuBN,wBAAA,CACA,mBbmwCG,Ca7vCJ,oDACC,qCb+vCG,Ca3vCL,2BACC,oBAAA,CACA,sCAAA,CACA,YAAA,CACA,wBAAA,CACA,UAAA,CACA,mBAAA,CACA,Sb6vCI,Ca3vCJ,iCACC,uBAAA,CACA,aAAA,CACA,eAAA,CACA,eAAA,CACA,gBAAA,CACA,kBAAA,CACA,iFAAA,CACA,oBAAA,CACA,kBb6vCG,CazvCH,+CACC,wBAAA,CAEA,sBAAA,CACA,kCAAA,CACA,4Cb0vCE,Ca/vCH,gDACC,wBAAA,CAEA,sBAAA,CACA,kCAAA,CACA,4CbgwCE,CarwCH,gDACC,wBAAA,CAEA,sBAAA,CACA,kCAAA,CACA,4CbswCE,Ca3wCH,gDACC,wBAAA,CAEA,sBAAA,CACA,kCAAA,CACA,4Cb4wCE,CajxCH,gDACC,wBAAA,CAEA,sBAAA,CACA,kCAAA,CACA,4CbkxCE,CavxCH,gDACC,wBAAA,CAEA,sBAAA,CACA,kCAAA,CACA,4CbwxCE,Ca7xCH,gDACC,wBAAA,CAEA,sBAAA,CACA,kCAAA,CACA,4Cb8xCE,CazxCL,6BACC,uFAAA,CAEA,oCAAA,CACA,8BAAA,CAAA,sBAAA,CACA,mBb0xCI,CavxCL,0CACC,2BACC,WAAA,CACA,kCbyxCK,CavxCL,iCACC,SAAA,CACA,kBbyxCI,CarxCN,oCACC,SAAA,CACA,SbuxCK,CarxCL,0CACC,ebuxCI,CACF,CACF,CACF,CACF","file":"chaarts.min.css"} -------------------------------------------------------------------------------- /docs/css/print.min.css: -------------------------------------------------------------------------------- 1 | @media print{.dialog-opener,.fly-out,.no-js-hidden,.print-hidden,.tooltip{display:none!important}body,body>*,html{background:none;color:#000}.deck .card,blockquote,p{orphans:3;widows:3}blockquote,ol,ul{break-inside:avoid;page-break-inside:avoid}caption,h1,h2,h3,h4,h5,h6{page-break-after:avoid}a[href]:not([href=""],[href^="#"],[href^=javascript],[href^="data:"]):after{all:unset;content:" (" attr(href) ") "}abbr[title]:after{content:" (" attr(title) ") "}} 2 | /*# sourceMappingURL=print.min.css.map */ -------------------------------------------------------------------------------- /docs/css/print.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../node_modules/sseeeedd/src/sseeeedd-print.scss","print.css"],"names":[],"mappings":"AAAA,aACC,6DAKC,sBCCA,CDED,iBAGC,eAAA,CACA,UCAA,CDGD,yBAGC,SAAA,CACA,QCDA,CDID,iBAIC,kBAAA,CADA,uBCDA,CDKD,0BAOC,sBCHA,CDMD,4EACC,SAAA,CACA,4BCJA,CDOD,kBACC,6BCLA,CACF","file":"print.min.css"} -------------------------------------------------------------------------------- /docs/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | -------------------------------------------------------------------------------- /docs/humans.txt: -------------------------------------------------------------------------------- 1 | # humanstxt.org/ 2 | 3 | # TEAM 4 | 5 | Gaël Poupard — Initiateur du projet : développement, intégration, conception — @ffoodd_fr 6 | 7 | # TECHNOLOGY COLOPHON 8 | 9 | HTML5, CSS3, JS 10 | a11y.css 11 | -------------------------------------------------------------------------------- /docs/img/hypothenuse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ffoodd/chaarts/d8626ca00fb7d14d8d6e5007b852c0ccacf8d41b/docs/img/hypothenuse.jpg -------------------------------------------------------------------------------- /docs/img/pie-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ffoodd/chaarts/d8626ca00fb7d14d8d6e5007b852c0ccacf8d41b/docs/img/pie-1.jpg -------------------------------------------------------------------------------- /docs/img/pie-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ffoodd/chaarts/d8626ca00fb7d14d8d6e5007b852c0ccacf8d41b/docs/img/pie-2.jpg -------------------------------------------------------------------------------- /docs/img/pie-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ffoodd/chaarts/d8626ca00fb7d14d8d6e5007b852c0ccacf8d41b/docs/img/pie-3.jpg -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | chaarts 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 64 | 65 |
66 |

Chaarts

67 | 68 |

69 | Every chart in this project relies solely on semantic markup 70 | — <table> based — and a spread of 71 | CSS variables carried by the tags. 72 | No JavaScript required for display, and styles are 73 | progressively enhanced depending on your browser's capabilities. 74 |

75 | 76 |

77 | Note : by virtue of the experimental 78 | nature of these techniques and a solid foundation enhanced progressively, 79 | I don't mention browser support for each example — but 80 | it goes without saying that this is not magic, and only modern browsers handle this right. 81 | Other browsers should display a properly styled table, and that's nice. 82 |

83 | 84 |

Accessibility

85 | 86 |

87 | A major effort has been made to ensure accessibility. 88 | As mentioned above, semantic and structured markup is a prerequisite 89 | — but it's not enough. CSS 90 | is being applied as gradually as possible, in order to guarantee 91 | the best possible display of data for each user. 92 |

93 | 94 |

Accessible table

95 | 96 |

Wakeup call :

97 | 98 | 115 | 116 |

117 | For other useful tips, I warmly recommend reading 118 | 119 | Data Tables Inclusive Component by Heydon Pickering, 120 | which is a real gold mine. 121 |

122 | 123 |

Patterns

124 |

125 | To distinguish the different areas other than by colour, an 126 | svg 127 | pattern is applied in 128 | css 129 | — you can find some of them on the 130 | Hero Patterns website: 131 |

132 |
    133 |
  1. 134 | in order to improve blending with background colors or gradients, the 135 | background-blend-mode property is used with the hard-light value; 136 |
    2. 137 |
  2. 138 | pattern's size and position depends directly on the value and scale of the chart, 139 | depending on the type of chart; 140 |
    3. 141 |
  3. 142 | in order not to embed too many external files, we use a 143 | 144 | technique proposed by Trys Mudford to include each 145 | svg 146 | in data URi in a css variable; 147 | thus, a finite list of patterns is used in the theme, without ever repeating the svg. 148 |
    4. 149 |
150 | 151 |
152 |

What to encode?

153 |

154 | 155 | Chris Coyier (via Charlotte Dann) 156 | explained that as of now, only the octhotorpe needs to be encoded in 157 | css 158 | . 159 | Don't bother with the other characters, their encoding seriously affects readability. 160 |

161 |
162 | 163 | 
.chaarts {
164 | 	--stripes: url("data:image/svg+xml,<svg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'><g fill='%23fff9' fill-rule='evenodd'><path d='M5 0h1L0 6V5zM6 5v1H5z'/></g></svg>");
165 | }
166 | 
167 | .chaarts tr:nth-child(2n + 2) {
168 | 	--background: var(--stripes);
169 | }
170 | 
171 | .chaarts td {
172 | 	--size: calc( var(--scale, 100) * 100% );
173 | 	--position: calc( var(--value, 0) / var(--scale, 100) * 100% );
174 | 	background:
175 | 		linear-gradient( right, Window, ButtonFace, ButtonText, Highlight ) var(--position) 0% / var(--size) 100%,
176 | 		var(--background) center / contain;
177 | 	background-blend-mode: hard-light;
178 | }
179 | 180 |

User preferences

181 |

182 | In order to respect as much as possible the preferences of the visitors, 183 | many elements have been adapted: 184 |

185 |
    186 |
  1. 187 | dimensions are in relatives units (em or rem as the case may be), 188 | in order to fit coherently with the body of text inherited from the browser and to be able 189 | to be enlarged or reduced without loss; 190 |
    2. 191 |
  2. 192 | colors are adjusted when High Contrast Mode is detected using 193 | prefers-contrast: more. 194 |
    3. 195 |
  3. 196 | animations and transitions are disabled when the system exposes 197 | this preference through prefers-reduced-motion: reduce ; 198 |
    4. 199 |
  4. 200 | hover effects whose initial state consists in hiding content 201 | are activated contextually in the @media (hover: hover) { … } media query. 202 |
    5. 203 |
  5. 204 | RTL is supported thanks to logical properties and a few tweaks here and there. 205 |
    6. 206 |
207 | 208 |

display and semantics

209 |

210 | Adrian Roselli explains that playing with a <table> or <dl> 211 | element's display endangers its semantics. 212 | The latter is therefore "locked" using dedicated 213 | aria 214 | roles — as he explains 215 | in a detailed article. 216 |

217 |

218 | That's why each table is preceded by a switch — based on 219 | Heydon Pickering 220 | inclusive toggle button — whose one and only role is to disable additional styles: 221 |

222 | 223 | 
document.addEventListener("DOMContentLoaded", function() {
224 | 	var switches = document.querySelectorAll('[role="switch"]');
225 | 
226 | 	Array.prototype.forEach.call(switches, function(el, i) {
227 | 		el.addEventListener('click', function() {
228 | 			var checked = this.getAttribute('aria-checked') == 'true' || false;
229 | 			this.setAttribute('aria-checked', !checked);
230 | 
231 | 			var chart = this.parentNode.nextElementSibling;
232 | 			chart.classList.toggle('chaarts');
233 | 		});
234 | 	});
235 | });
236 | 237 |

238 | Well, we're ready to get to the heart of the matter.
239 | Warm up your dev tools! 240 |

241 |
242 | 243 | 244 | 245 | 246 | 247 | 248 | -------------------------------------------------------------------------------- /docs/js/scripts.min.js: -------------------------------------------------------------------------------- 1 | (()=>{"use strict";document.querySelectorAll('[role="switch"]').forEach((e=>{e.addEventListener("click",(()=>{const r="true"===e.getAttribute("aria-checked")||!1;if(e.setAttribute("aria-checked",!r),e.classList.contains("disable-css")){e.parentNode.nextElementSibling.classList.toggle("chaarts"),t(e.parentElement.parentElement)}}))}));const e=document.querySelectorAll(".scrollable-container, .chaarts-container");function t(e){const t=e.offsetWidth;(e.querySelector("table")||e.querySelector("code")).offsetWidth>t?e.setAttribute("tabindex","0"):e.hasAttribute("tabindex")&&e.removeAttribute("tabindex")}e.forEach((e=>t(e))),window.addEventListener("resize",(()=>{e.forEach((e=>t(e)))}));if(document.querySelectorAll(".toggle").forEach((e=>{const t=e.querySelectorAll("button");t.forEach((e=>{e.addEventListener("click",(()=>{for(let e of t)e.setAttribute("aria-pressed","false");e.setAttribute("aria-pressed","true")}))}))})),!window.matchMedia("(prefers-contrast: more)").matches){const e=document.getElementById("theme"),t=e.querySelectorAll("button");let r=document.querySelector('[data-scheme="none"]');const a=localStorage.getItem("theme");a&&(document.documentElement.dataset.theme=a,"dark"===a?r=document.querySelector('[data-scheme="dark"]'):"light"===a&&(r=document.querySelector('[data-scheme="light"]'))),r.setAttribute("aria-pressed","true"),t.forEach((t=>{t.addEventListener("click",(()=>{e.querySelector('[aria-pressed="true"]').setAttribute("aria-pressed","false"),t.setAttribute("aria-pressed","true"),"none"===t.dataset.scheme?(delete document.documentElement.dataset.theme,localStorage.removeItem("theme")):(document.documentElement.dataset.theme=t.dataset.scheme,localStorage.setItem("theme",t.dataset.scheme))}))}))}})(document); -------------------------------------------------------------------------------- /docs/js/scripts.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"names":["document","querySelectorAll","forEach","el","addEventListener","checked","getAttribute","setAttribute","classList","contains","parentNode","nextElementSibling","toggle","handleTabindex","parentElement","regions","region","width","offsetWidth","querySelector","hasAttribute","removeAttribute","window","buttons","button","matchMedia","matches","switcher","getElementById","options","currentTheme","localStorage","getItem","documentElement","dataset","theme","option","scheme","removeItem","setItem"],"sources":["_site/js/script.js"],"mappings":"AAAA,MACC,aAGiBA,SAASC,iBAAiB,mBAClCC,SAAQC,IAChBA,EAAGC,iBAAiB,SAAS,KAC5B,MAAMC,EAA8C,SAApCF,EAAGG,aAAa,kBAA8B,EAG9D,GAFAH,EAAGI,aAAa,gBAAiBF,GAE7BF,EAAGK,UAAUC,SAAS,eAAgB,CAC3BN,EAAGO,WAAWC,mBACtBH,UAAUI,OAAO,WACvBC,EAAeV,EAAGW,cAAcA,cACjC,IACC,IAIH,MAAMC,EAAUf,SAASC,iBAAiB,6CAE1C,SAASY,EAAeG,GACvB,MAAMC,EAAQD,EAAOE,aACPF,EAAOG,cAAc,UAAYH,EAAOG,cAAc,SAE1DD,YAAcD,EACvBD,EAAOT,aAAa,WAAY,KAE5BS,EAAOI,aAAa,aACvBJ,EAAOK,gBAAgB,WAG1B,CAZAN,EAAQb,SAAQc,GAAUH,EAAeG,KAczCM,OAAOlB,iBAAiB,UAAU,KACjCW,EAAQb,SAAQc,GAAUH,EAAeG,IAAQ,IAkBlD,GAdgBhB,SAASC,iBAAiB,WAClCC,SAAQU,IACf,MAAMW,EAAUX,EAAOX,iBAAiB,UACxCsB,EAAQrB,SAAQsB,IACfA,EAAOpB,iBAAiB,SAAS,KAChC,IAAK,IAAIoB,KAAUD,EAClBC,EAAOjB,aAAa,eAAgB,SAErCiB,EAAOjB,aAAa,eAAgB,OAAO,GAC1C,GACD,KAIGe,OAAOG,WAAW,4BAA4BC,QAAS,CAC5D,MAAMC,EAAW3B,SAAS4B,eAAe,SACnCC,EAAUF,EAAS1B,iBAAiB,UAC1C,IAAIuB,EAASxB,SAASmB,cAAc,wBAEpC,MAAMW,EAAeC,aAAaC,QAAQ,SACtCF,IACH9B,SAASiC,gBAAgBC,QAAQC,MAAQL,EACpB,SAAjBA,EACHN,EAASxB,SAASmB,cAAc,wBACL,UAAjBW,IACVN,EAASxB,SAASmB,cAAc,2BAGlCK,EAAOjB,aAAa,eAAgB,QAGpCsB,EAAQ3B,SAAQkC,IACfA,EAAOhC,iBAAiB,SAAS,KAChCuB,EAASR,cAAc,yBAAyBZ,aAAa,eAAgB,SAC7E6B,EAAO7B,aAAa,eAAgB,QACN,SAA1B6B,EAAOF,QAAQG,eACXrC,SAASiC,gBAAgBC,QAAQC,MACxCJ,aAAaO,WAAW,WAExBtC,SAASiC,gBAAgBC,QAAQC,MAAQC,EAAOF,QAAQG,OACxDN,aAAaQ,QAAQ,QAASH,EAAOF,QAAQG,QAC9C,GACC,GAEJ,CACA,EApFD,CAoFGrC"} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chaarts", 3 | "version": "0.0.1", 4 | "description": "Charts with HTML & CSS", 5 | "repository": { 6 | "type": "git", 7 | "url": "git@github.com:ffoodd/chaarts.git" 8 | }, 9 | "author": { 10 | "name": "Gaël Poupard", 11 | "url": "https://www.ffoodd.fr", 12 | "email": "gael+npm@ffoodd.fr" 13 | }, 14 | "license": "MIT", 15 | "keywords": [ 16 | "charts", 17 | "accessibility", 18 | "front-end", 19 | "markup", 20 | "HTML", 21 | "CSS", 22 | "progressive enhancement" 23 | ], 24 | "style": "dist/chaarts.min.css", 25 | "sass": "src/chaarts.scss", 26 | "ignore": [ 27 | "node_modules" 28 | ], 29 | "scripts": { 30 | "pretest": "npm run build && npm run build:docs", 31 | "test": "concurrently \"npm:test:*\"", 32 | "test:html": "html-validate \"docs/*.html\"", 33 | "test:a11y": "pa11y-ci 'docs/*.html' -c .pa11yci.json", 34 | "prestart": "npm run build && npm run build:docs", 35 | "start": "concurrently --kill-others \"npm:watch\" \"npm:browser:start\"", 36 | "browser:start": "servor docs --browse --reload --secure", 37 | "build": "sass src/chaarts.scss:dist/chaarts.css --style expanded --source-map", 38 | "postbuild": "postcss dist/chaarts.css -o dist/chaarts.min.css -u autoprefixer cssnano -m", 39 | "prebuild:docs": "shx rm -rf docs/*", 40 | "build:docs": "concurrently \"npm:build:docs:*\"", 41 | "postbuild:docs": "shx cp -r _site/{favicon.svg,humans.txt} docs/ && shx cp -r dist/chaarts.min.{css,css.map} docs/css", 42 | "prebuild:docs:html": "sass _site/scss/examples:_site/templates/css/examples/ --style expanded --quiet --no-source-map", 43 | "build:docs:html": "nunjucks *.njk -p _site/templates -o docs", 44 | "prebuild:docs:css": "sass _site/scss/styles.scss:docs/css/styles.css _site/scss/print.scss:docs/css/print.css --load-path=./node_modules --style expanded --quiet --source-map", 45 | "build:docs:css": "postcss docs/css/{styles,print}.css --dir docs/css/ --ext .min.css -u autoprefixer cssnano -m", 46 | "postbuild:docs:css": "purgecss --config purgecss.config.js", 47 | "build:docs:img": "imagemin _site/img/*.{png,jpg} --out-dir=docs/img --plugin=pngquant --plugin=mozjpeg --plugin=pngcrush --plugin=zopfli", 48 | "prebuild:docs:js": "shx mkdir docs/js", 49 | "build:docs:js": "terser _site/js/script.js -o docs/js/scripts.min.js -c -m --source-map && terser node_modules/sseeeedd/_site/js/prism.js -o docs/js/prism.min.js -c -m --source-map", 50 | "watch": "concurrently --kill-others \"npm:watch:*\"", 51 | "watch:html": "nodemon --watch _site/templates --ext njk --exec \"npm run build:docs:html\"", 52 | "watch:css": "nodemon --watch _site/scss --ext scss --exec \"npm run build:docs:css\"", 53 | "watch:src": "nodemon --watch src/ --ext scss --exec \"npm run build && shx cp -r dist/chaarts.min.{css,css.map} docs/css\"", 54 | "watch:svg": "nodemon --watch _site/img --ext svg --exec \"npm run build:docs:svg\"", 55 | "watch:js": "nodemon --watch _site/js --ext js --exec \"npm run build:docs:js\"", 56 | "lint": "concurrently \"npm:lint:*\"", 57 | "lint:scss": "stylelint src/**/*.scss", 58 | "lint:docs:scss": "stylelint _site/scss/**/*.scss", 59 | "lint:js": "eslint _site/js/**/*.js" 60 | }, 61 | "devDependencies": { 62 | "autoprefixer": "^10.4.16", 63 | "concurrently": "^8.2.2", 64 | "cssnano": "^6.0.1", 65 | "eslint": "^8.52.0", 66 | "html-validate": "^8.7.0", 67 | "imagemin-cli": "^7.0.0", 68 | "imagemin-mozjpeg": "^10.0.0", 69 | "imagemin-pngcrush": "^7.0.0", 70 | "imagemin-pngquant": "^9.0.2", 71 | "imagemin-zopfli": "^7.0.0", 72 | "nodemon": "^3.0.1", 73 | "nunjucks-cli": "^1.0.0", 74 | "pa11y-ci": "^3.0.1", 75 | "pa11y-ci-reporter-html": "^6.0.2", 76 | "postcss": "^8.4.31", 77 | "postcss-cli": "^10.0.0", 78 | "purgecss": "^5.0.0", 79 | "sass": "^1.69.5", 80 | "servor": "^4.0.2", 81 | "shx": "^0.3.4", 82 | "stylelint": "^15.11.0", 83 | "stylelint-config-standard-scss": "^11.0.0", 84 | "stylelint-order": "^6.0.3", 85 | "stylelint-scss": "^5.3.0", 86 | "terser": "^5.23.0" 87 | }, 88 | "dependencies": { 89 | "sseeeedd": "^0.4.8" 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /purgecss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [ 3 | 'docs/*.html', 4 | 'docs/js/*.js' 5 | ], 6 | css: ['docs/css/styles.min.css'], 7 | output: 'docs/css/styles.min.css', 8 | safelist: { 9 | standard: [/^no-|^grid-|^token|^line-|^mis-/] 10 | }, 11 | variables: true, 12 | fontFace: true, 13 | keyframes: true 14 | } 15 | -------------------------------------------------------------------------------- /src/_chaarts-bar.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "sass:math"; 3 | @use "sass:list"; 4 | @use "abstracts/mixins"; 5 | @use "abstracts/variables"; 6 | 7 | // ==================== 8 | // == Bar Charts 9 | // 10 | // @note Grid charts based on: 11 | // @see https://css-tricks.com/css-charts-grid-custom-properties/ 12 | // @author Miriam Suzanne 13 | // 14 | // @note Grid setup: 15 | // 1. 1st column to display legends, fixed width 16 | // 1. 2nd column is a repeater, creating a subcolumn for each unit in --scale 17 | // 1. 3rd columns with 6ch width to ensure that 6 characters long values has enough space to not overflow
18 | // 19 | // @note Clipped value coming from: 20 | // @see https://www.ffoodd.fr/le-web-en-kit/ 21 | // @see http://dabblet.com/gist/08fddf3666c39ebc62ca 22 | // @author Gaël Poupard 23 | // ==================== 24 | 25 | .chaarts.bar { 26 | --offset: #{math.div(200em, 16)}; 27 | 28 | caption { 29 | text-align: initial; 30 | text-indent: calc(var(--offset) + #{variables.$gutter}); 31 | } 32 | 33 | tr { 34 | display: grid; 35 | grid-auto-rows: 1fr; 36 | grid-row-gap: variables.$gutter * 0.5; 37 | grid-template-columns: minmax(min-content, var(--offset)) repeat(var(--scale, 100), minmax(0, 1fr)) 10ch; 38 | transition: opacity .2s var(--move); 39 | 40 | @include mixins.patterns; 41 | } 42 | 43 | th { 44 | grid-column: 1 / 1; 45 | margin: variables.$gutter * 0.5 0 0; 46 | padding: 0 variables.$gutter 0 0; 47 | text-align: end; 48 | } 49 | 50 | td { 51 | --size: calc(var(--scale, 100) * 100%); 52 | --position: calc(var(--value, 0) / var(--scale, 100) * 100%); 53 | 54 | background: linear-gradient(to right, 55 | var(--chaarts-green), 56 | var(--chaarts-gray), 57 | var(--chaarts-blue), 58 | var(--chaarts-purple), 59 | var(--chaarts-red) 60 | ) var(--position) list.slash(0%, var(--size)) 100%, 61 | var(--background) center / contain; 62 | background-blend-mode: hard-light; 63 | grid-column: list.slash(2, max(2, var(--value, 0))); 64 | margin: variables.$gutter * 0.5 0 0; 65 | position: relative; 66 | } 67 | 68 | span { 69 | background: inherit; 70 | background-clip: text; 71 | color: transparent; 72 | font-weight: bold; 73 | inset-inline-start: 100%; 74 | line-height: 1.5; 75 | padding-inline-start: .5ch; 76 | position: absolute; 77 | } 78 | 79 | &:hover { 80 | tr { 81 | opacity: .5; 82 | } 83 | 84 | tr:hover { 85 | opacity: 1; 86 | } 87 | } 88 | 89 | @media (prefers-contrast: more) { 90 | td { 91 | background: var(--chaarts-blue); 92 | } 93 | 94 | span { 95 | background: var(--background-lighter); 96 | background-clip: unset; 97 | color: var(--chaarts-blue); 98 | } 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /src/_chaarts-column-multiple.scss: -------------------------------------------------------------------------------- 1 | @use "abstracts/variables"; 2 | 3 | // ==================== 4 | // == Columns Charts 5 | // 6 | // @note (!) Requires column chart 7 | // ==================== 8 | 9 | .chaarts.column-multiple { 10 | grid-template-columns: minmax(min-content, 14ch) repeat(calc(var(--y) - 1), 1fr); 11 | grid-template-rows: 2ex repeat(var(--scale, 100), minmax(0, .25rem)) repeat(2, minmax(min-content, 2rem)); 12 | 13 | span { 14 | background-image: none; 15 | } 16 | 17 | col:nth-child(odd) { 18 | opacity: 0; 19 | } 20 | 21 | tbody th { 22 | grid-row: -10 / span 7; 23 | } 24 | 25 | thead tr * { 26 | grid-row: -2; 27 | } 28 | 29 | col, 30 | thead tr * { 31 | @each $number in 2, 3, 4, 5, 6 { 32 | &:nth-of-type(#{$number}) { 33 | grid-column: calc(#{($number * 2)} - var(--span)) / span var(--span); 34 | } 35 | } 36 | } 37 | 38 | thead tr + tr * { 39 | font-weight: normal; 40 | grid-row: -3; 41 | 42 | @each $number in 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 { 43 | &:nth-of-type(#{$number}) { 44 | grid-column: #{$number}; 45 | } 46 | } 47 | } 48 | 49 | td { 50 | background-color: var(--chaarts-pink); 51 | background-image: var(--zig); 52 | grid-row-end: -3; 53 | } 54 | 55 | // @note Oh boy, if we could use var(--span) in selector… 56 | td:nth-of-type(2n + 2) { 57 | background: var(--chaarts-blue) var(--triangles); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/_chaarts-column.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "sass:math"; 3 | @use "sass:list"; 4 | @use "abstracts/mixins"; 5 | @use "abstracts/variables"; 6 | 7 | // ==================== 8 | // == Column Charts 9 | // 10 | // @note Grid charts based on: 11 | // @see https://css-tricks.com/css-charts-grid-custom-properties/ 12 | // @author Miriam Suzanne 13 | // ==================== 14 | 15 | .chaarts[class*="column"] { 16 | --gap: #{variables.$gutter * 0.5}; 17 | --size: calc(var(--scale, 100) * 100%); 18 | --width: calc(#{variables.$width} / var(--y) - #{variables.$gutter}); 19 | 20 | display: grid; 21 | grid-column-gap: var(--gap); 22 | max-block-size: variables.$width; 23 | position: relative; 24 | 25 | td, 26 | th, 27 | col { 28 | grid-column: 1; 29 | margin: 0; 30 | } 31 | 32 | tr > * + * { 33 | text-align: center; 34 | } 35 | 36 | // ==================== 37 | // @note Use display: contents to place table-cells in table's grid 38 | // @link https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents 39 | // @link https://bitsofco.de/how-display-contents-works/ 40 | // ==================== 41 | tr, 42 | tbody, 43 | thead, 44 | colgroup { 45 | display: contents; 46 | } 47 | 48 | caption { 49 | grid-column: 1 / span var(--y); 50 | grid-row: -1; 51 | } 52 | 53 | td { 54 | --integer: calc(var(--value)); 55 | 56 | grid-row: list.slash(calc((var(--scale, 100) + 2) - var(--integer)), -2); 57 | pointer-events: none; 58 | position: relative; 59 | transition: opacity .2s var(--move); 60 | 61 | @each $number in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 { 62 | &:nth-of-type(#{$number}) { 63 | grid-column: #{$number + 1}; 64 | } 65 | } 66 | } 67 | 68 | span { 69 | background: inherit; 70 | background-clip: text; 71 | color: transparent; 72 | font-weight: bold; 73 | inset-block-end: 100%; 74 | inset-inline-end: 0; 75 | inset-inline-start: 0; 76 | line-height: 1.5; 77 | pointer-events: auto; 78 | position: absolute; 79 | 80 | @media (prefers-contrast: more) { 81 | background: var(--background-lighter); 82 | background-clip: unset; 83 | color: var(--chaarts-blue); 84 | } 85 | } 86 | 87 | col { 88 | background: var(--background) var(--stripes); 89 | background-blend-mode: exclusion; 90 | grid-row: 1 / -1; 91 | mix-blend-mode: color; 92 | opacity: .25; 93 | transition: opacity .3s var(--move); 94 | 95 | &:hover { 96 | opacity: .5; 97 | } 98 | 99 | &:first-of-type { 100 | opacity: 0; 101 | } 102 | } 103 | 104 | col, 105 | thead tr * { 106 | @each $number in 2, 3, 4, 5, 6, 7, 8, 9, 10 { 107 | &:nth-of-type(#{$number}) { 108 | grid-column: #{$number}; 109 | } 110 | } 111 | } 112 | } 113 | 114 | .chaarts.column-single { 115 | grid-auto-columns: 1fr; 116 | grid-template-rows: 2ex repeat(var(--scale, 100), minmax(0, .25rem)) minmax(min-content, 2rem); 117 | 118 | tbody th { 119 | grid-row: -6 / -3; 120 | line-height: 1; 121 | } 122 | 123 | thead * { 124 | grid-row: -2; 125 | } 126 | 127 | td { 128 | --position: calc(var(--integer, 0) / var(--scale, 100) * 100%); 129 | 130 | background: linear-gradient(to top, 131 | var(--chaarts-green), 132 | var(--chaarts-gray), 133 | var(--chaarts-blue), 134 | var(--chaarts-purple), 135 | var(--chaarts-red) 136 | ) 0% list.slash(var(--position), 100%) var(--size), 137 | var(--background) center / variables.$gutter; 138 | background-blend-mode: hard-light; 139 | 140 | @include mixins.patterns; 141 | 142 | @media (prefers-contrast: more) { 143 | background-color: var(--chaarts-blue); 144 | } 145 | } 146 | } 147 | 148 | -------------------------------------------------------------------------------- /src/_chaarts-donut.scss: -------------------------------------------------------------------------------- 1 | @use "abstracts/variables"; 2 | 3 | // ==================== 4 | // == Donut Charts 5 | // 6 | // @note (!) Requires pie chart 7 | // ==================== 8 | 9 | .chaarts.pie.donut { 10 | --mask: radial-gradient( 11 | circle at 50% calc(50% - #{variables.$gutter * 1.5}), 12 | #0000 0 var(--offset), 13 | #ffff calc(var(--offset) + 1px) 100% 14 | ); 15 | 16 | mask-image: var(--mask); 17 | 18 | td::after { 19 | --away: calc(var(--radius) / 2 - #{variables.$gutter * 2.5}); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/_chaarts-line.scss: -------------------------------------------------------------------------------- 1 | @use "sass:list"; 2 | @use "sass:map"; 3 | @use "abstracts/variables"; 4 | @use "abstracts/mixins"; 5 | 6 | // ==================== 7 | // == Line Charts 8 | // 9 | // @note Grid charts based on 10 | // @see https://css-tricks.com/css-charts-grid-custom-properties/ 11 | // @author Miriam Suzanne 12 | // 13 | // @note Massively using clip-path 14 | // @see Bennett Feely's clippy to understand polygon() syntax 15 | // @link http://bennettfeely.com/clippy/ 16 | // ==================== 17 | 18 | .chaarts.line { 19 | --offset: calc((100% / var(--x)) / 2); 20 | --height: calc(#{variables.$width * 0.5} - #{variables.$gutter * 2}); 21 | --bottom: calc(100% - var(--height)); 22 | 23 | padding: var(--height) 0 variables.$gutter; 24 | position: relative; 25 | transition: background .3s var(--move), 26 | color .3s var(--move); 27 | 28 | &::after { 29 | --scale: calc((100% - (var(--y) * 1px)) / var(--y)); 30 | 31 | background: repeating-linear-gradient( 32 | to bottom, 33 | var(--scrollable-background) 0 var(--scale), 34 | var(--foreground-o-25) calc(var(--scale) + 1px) 35 | ); 36 | content: ""; 37 | inline-size: 100%; 38 | inset-block-end: var(--bottom); 39 | inset-block-start: 0; 40 | position: absolute; 41 | z-index: 1; 42 | } 43 | 44 | tr::before { 45 | content: ""; 46 | position: absolute; 47 | } 48 | 49 | [scope="row"], 50 | thead th:first-child { 51 | color: var(--color, currentcolor); 52 | text-align: start; 53 | } 54 | 55 | [style]::before { 56 | background: linear-gradient(to top, var(--chaarts-blue), var(--chaarts-red) 75%); 57 | clip-path: var(--polygon); 58 | content: ""; 59 | inline-size: 100%; 60 | inset-block-end: var(--bottom); 61 | inset-block-start: 0; 62 | position: absolute; 63 | scale: var(--is-rtl, 1) 1; 64 | z-index: 2; 65 | 66 | --polygon: polygon( 67 | 0% 100%, 68 | calc((100% / var(--x) * 1)) 100%, 69 | calc((100% / var(--x) * 1)) calc(100% - (var(--1) / var(--y) * 100%)), 70 | calc((100% / var(--x) * 1) + var(--offset)) calc(100% - (var(--1) / var(--y) * 100%)), 71 | calc((100% / var(--x) * 2) + var(--offset)) calc(100% - (var(--2) / var(--y) * 100%)), 72 | calc((100% / var(--x) * 3) + var(--offset)) calc(100% - (var(--3) / var(--y) * 100%)), 73 | calc((100% / var(--x) * 4) + var(--offset)) calc(100% - (var(--4) / var(--y) * 100%)), 74 | calc((100% / var(--x) * 5) + var(--offset)) calc(100% - (var(--5) / var(--y) * 100%)), 75 | calc((100% / var(--x) * 6) + var(--offset)) calc(100% - (var(--6) / var(--y) * 100%)), 76 | calc((100% / var(--x) * 7) + var(--offset)) calc(100% - (var(--7) / var(--y) * 100%)), 77 | calc((100% / var(--x) * 8) + var(--offset)) calc(100% - (var(--8) / var(--y) * 100%)), 78 | calc((100% / var(--x) * 9) + var(--offset)) calc(100% - (var(--9) / var(--y) * 100%)), 79 | calc((100% / var(--x) * 10) + var(--offset)) calc(100% - (var(--10) / var(--y) * 100%)), 80 | calc((100% / var(--x) * 11) + var(--offset)) calc(100% - (var(--11) / var(--y) * 100%)), 81 | calc((100% / var(--x) * 12) + var(--offset)) calc(100% - (var(--12) / var(--y) * 100%)), 82 | 100% calc(100% - (var(--12) / var(--y) * 100%)), 83 | 100% 100%, 84 | 0% 100% 85 | ); 86 | 87 | @media (prefers-contrast: more) { 88 | background: var(--chaarts-blue); 89 | } 90 | } 91 | 92 | th, 93 | td { 94 | background: var(--background-lighter); 95 | font-weight: bold; 96 | inline-size: calc(100% / var(--x)); 97 | text-align: center; 98 | } 99 | 100 | [scope="col"] { 101 | &:not(:first-child)::after { 102 | background: var(--background-lighter) var(--stripes); 103 | background-blend-mode: exclusion; 104 | block-size: calc(100% - #{variables.$gutter * 4}); 105 | content: ""; 106 | inline-size: inherit; 107 | inset-block-end: variables.$gutter * 4; 108 | inset-inline-start: calc(100% / var(--x) * var(--index)); 109 | mix-blend-mode: soft-light; 110 | opacity: 0; 111 | position: absolute; 112 | transition: opacity .3s var(--move); 113 | z-index: 3; 114 | 115 | @include mixins.dark-mode { 116 | mix-blend-mode: lighten; 117 | } 118 | } 119 | 120 | @each $number in 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 { 121 | &:nth-child(#{$number})::after { 122 | --index: #{$number - 1}; 123 | } 124 | } 125 | 126 | &:hover::after { 127 | opacity: .75; 128 | } 129 | } 130 | 131 | td { 132 | --value: var(--1); 133 | --term: var(--t-1); 134 | 135 | line-height: 1.5; 136 | 137 | &::before { 138 | block-size: 1.5rem; 139 | content: ""; 140 | inline-size: inherit; 141 | position: absolute; 142 | translate: calc(-50% * var(--is-rtl, 1)) 0; 143 | z-index: 10; 144 | } 145 | 146 | // ==================== 147 | // 1. 148 | // @note Using white-space and: 149 | // `\A` to make a line-break 150 | // `\A0` for a non-breakable space 151 | // @note Based on CSS Secrets by 152 | // @author Lea Verou 153 | // @link https://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css/ 154 | // 155 | // 2. 156 | // @note Display CSS integers custom properties with a trick using counters 157 | // @author Cassie Evans 158 | // @link https://codepen.io/cassie-codes/pen/22ea69e0f681d45f2f4c2ca5e6acf4ab 159 | // 160 | // 3. 161 | // @note We need to ensure our counter uses an integer, --value might a a floating number 162 | // @author Carter Li 163 | // @link https://css-tricks.com/animating-number-counters/#the-new-school-css-solution 164 | // ==================== 165 | &::after { 166 | --arrow: calc(100% - #{variables.$gutter * 0.25}); 167 | --top: calc(var(--height) - (var(--value) / var(--y) * var(--height))); 168 | --polygon: polygon( 169 | 0% 0%, 170 | 100% 0%, 171 | 100% var(--arrow), 172 | calc(50% - #{variables.$gutter * 0.25}) var(--arrow), 173 | 50% 100%, 174 | calc(50% + #{variables.$gutter * 0.25}) var(--arrow), 175 | 0% var(--arrow) 176 | ); 177 | --integer: calc(var(--value)); // 3 178 | 179 | background-color: var(--foreground-lighter); 180 | clip-path: var(--polygon); 181 | color: var(--background-lighter); 182 | content: var(--term) " " var(--year) "\A " counter(value) "\A0" var(--unit); // 1 183 | counter-reset: value var(--integer); // 2, 3 184 | inset-block-start: var(--top, 0); 185 | inset-inline-start: calc(var(--offset) * 3); 186 | opacity: 0; 187 | padding: variables.$gutter * 0.5; 188 | pointer-events: none; 189 | position: absolute; 190 | transform: translate3d(var(--rtl-offset, -50%), -125%, 0) perspective(1000px) rotate3d(1, 0, 0, 45deg); 191 | transform-origin: 50% calc(100% + 10px); 192 | transition: opacity .2s var(--enter), 193 | transform .2s var(--enter); 194 | white-space: pre; 195 | z-index: 5; 196 | } 197 | 198 | [dir="rtl"] &:first-of-type::after { 199 | inset-inline-start: var(--offset); 200 | } 201 | 202 | + td::after { 203 | inset-inline-start: calc((100% / var(--x) * var(--index)) + var(--offset)); 204 | } 205 | 206 | @each $number in 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 { 207 | &:nth-child(#{$number})::after { 208 | --value: var(--#{$number - 1}); 209 | --term: var(--t-#{$number - 1}); 210 | --index: #{$number - 1}; 211 | 212 | [dir="rtl"] & { 213 | --index: #{$number - 2}; 214 | --rtl-offset: -40%; 215 | } 216 | } 217 | } 218 | 219 | &:hover::after { 220 | opacity: 1; 221 | transform: translate3d(var(--rtl-offset, -50%), -125%, 0) perspective(1000px) rotate3d(1, 0, 0, 0deg); 222 | transition: opacity .2s var(--exit), 223 | transform .2s var(--exit); 224 | } 225 | } 226 | } 227 | 228 | -------------------------------------------------------------------------------- /src/_chaarts-pie.scss: -------------------------------------------------------------------------------- 1 | @use "sass:list"; 2 | @use "sass:map"; 3 | @use "sass:string"; 4 | @use "abstracts/mixins"; 5 | @use "abstracts/variables"; 6 | 7 | // ==================== 8 | // == Pie Charts 9 | // 10 | // ==================== 11 | 12 | .chaarts.pie { 13 | --radius: 32em; 14 | 15 | margin: 0 auto; 16 | padding-block-start: calc(var(--radius) - #{variables.$gutter * 2}); 17 | position: relative; 18 | 19 | tbody { 20 | border: 0; 21 | display: flex; 22 | flex-wrap: wrap; 23 | } 24 | 25 | tr { 26 | --lt-25: clamp(0, 25 - var(--value), 1); 27 | --gt-25: calc(1 - var(--lt-25)); 28 | --lt-50: clamp(0, 50 - var(--value), 1); 29 | --gt-50: calc(1 - var(--lt-50)); 30 | --lt-75: clamp(0, 75 - var(--value), 1); 31 | --gt-75: calc(1 - var(--lt-75)); 32 | 33 | align-items: center; 34 | display: flex; 35 | flex: 1 1 auto; 36 | transition: opacity .3s var(--move); 37 | 38 | @include mixins.patterns; 39 | 40 | 41 | &:first-child { 42 | --value: var(--1); 43 | --position: 0turn; 44 | } 45 | 46 | &:nth-child(2) { 47 | --value: var(--2); 48 | --position: calc(var(--1) * .01turn); 49 | } 50 | 51 | @each $index in 3, 4, 5, 6, 7 { 52 | $start: 'var(--1)'; 53 | $value: $index - 1; 54 | 55 | @while $value > 1 { 56 | $start: string.insert($start, ' + var(--#{$value})', 100); 57 | $value: $value - 1; 58 | } 59 | 60 | &:nth-of-type(#{$index}n + #{$index}) { 61 | --value: var(--#{$index}); 62 | --position: calc((#{$start}) * .01turn); 63 | } 64 | } 65 | } 66 | 67 | [scope="row"] { 68 | padding-inline-end: variables.$gutter * 0.5; 69 | 70 | &::before { 71 | background: var(--color, currentcolor) var(--background); 72 | block-size: variables.$gutter; 73 | content: ""; 74 | display: inline-block; 75 | inline-size: variables.$gutter; 76 | translate: calc(-.2rem * var(--is-rtl, 1)) .1rem 0; 77 | } 78 | } 79 | 80 | td::after, 81 | td::before { 82 | inset-block-start: calc(var(--radius) / 2); 83 | inset-inline-start: 50%; 84 | position: absolute; 85 | transform-origin: center; 86 | } 87 | 88 | [dir="rtl"] & td::after { 89 | inset-inline-start: 40%; 90 | } 91 | 92 | // ==================== 93 | // Using clip-path + calc() + transform + CSS vars 94 | // Using mask-image to make a circle 95 | // 96 | // 1. 97 | // @note Based on Ana Tudor's work 98 | // @link https://css-tricks.com/1-html-element-5-css-properties-magic/ 99 | // @author Ana Tudor 100 | // 101 | // 2. 102 | // @note Using a Roma Komarov's idea about boolean custom properties 103 | // @link https://www.kizu.ru/conditions-for-css-variables/ 104 | // 105 | // 3. 106 | // @note Mask support: 107 | // @link https://caniuse.com/#search=mask 108 | // ==================== 109 | td::before { 110 | --zoom: .75; 111 | --part: calc(var(--value) * 3.6); 112 | --main-angle: calc(var(--part) - (90 * (var(--gt-25, 0) + var(--gt-50, 0) + var(--gt-75, 0)))); 113 | --β: calc(var(--main-angle) * var(--to-radians)); 114 | --α: calc((90 - var(--main-angle)) * var(--to-radians)); 115 | --pos-B: calc(sin(var(--β)) * 50%); 116 | --pos-A: calc(sin(var(--α)) * 50%); 117 | --polygon: polygon( 118 | 50% 50%, 119 | 50% 0%, 120 | 100% 0%, 121 | max(50% + var(--pos-B), var(--gt-25, 0) * 100%) calc(50% - var(--pos-A) * var(--lt-25, 1)), 122 | max(50%, var(--gt-25, 0) * 100%) max(50%, var(--gt-25, 0) * 100%), 123 | max(50% + var(--pos-A) * var(--gt-25, 0), var(--gt-50, 0) * 100%) max(50% + var(--pos-B) * var(--gt-25, 0) * var(--lt-50, 0), var(--gt-50, 0) * 100%), 124 | max(0%, var(--lt-50, 0) * 50%) max(50%, var(--gt-50, 0) * 100%), 125 | clamp(0%, 100% * (var(--lt-75, 1)), 50% - var(--pos-B) * var(--gt-50, 0)) calc(50% + var(--pos-A) * var(--gt-50, 0) * var(--lt-75, 1)), 126 | max(0%, var(--lt-75, 0) * 50%) max(0%, var(--lt-75, 0) * 50%), 127 | calc(50% - var(--pos-A) * var(--gt-75, 0)) calc(50% - var(--pos-B) * var(--gt-75, 0)) 128 | ); 129 | 130 | background: var(--color, currentcolor) var(--background); 131 | block-size: var(--radius); 132 | border-radius: 50%; 133 | clip-path: var(--polygon); 134 | content: ''; 135 | inline-size: var(--radius); 136 | transform: 137 | translate3d(calc(-50% * var(--is-rtl, 1)), -50%, 0) 138 | rotate(var(--position)) 139 | scale(var(--zoom)); 140 | transition: transform .2s var(--move); 141 | } 142 | 143 | tr:hover td::before { 144 | --zoom: .8; 145 | } 146 | 147 | // ==================== 148 | // 1. 149 | // @note Display CSS integers custom properties with a trick using counters 150 | // @author Cassie Evans 151 | // @link https://codepen.io/cassie-codes/pen/22ea69e0f681d45f2f4c2ca5e6acf4ab 152 | // 153 | // 2. 154 | // @note We need to ensure our counter uses an integer, --value might be a floating number 155 | // @author Carter Li 156 | // @link https://css-tricks.com/animating-number-counters/#the-new-school-css-solution 157 | // ==================== 158 | td::after { 159 | --axis: calc(var(--position) - .25turn + var(--value) * .005turn); 160 | --away: calc(var(--radius) / 2 - #{variables.$gutter}); 161 | --integer: calc(var(--value)); // 2 162 | 163 | background-color: var(--foreground-lighter); 164 | color: var(--background-lighter); 165 | content: var(--term) "\A0: " counter(value) "\A0%"; // 1 166 | counter-reset: value var(--value); // 1 167 | opacity: 0; 168 | padding: variables.$gutter * 0.5; 169 | pointer-events: none; 170 | transform: 171 | translate3d(-50%, -50%, 0) 172 | rotate(var(--axis)) 173 | translate(var(--away)) 174 | rotate(calc(var(--axis) * -1)) 175 | perspective(1000px) 176 | rotate3d(1, 0, 0, 45deg); 177 | transform-origin: 50% calc(100% + 10px); 178 | transition: opacity .2s var(--enter), 179 | transform .2s var(--enter); 180 | z-index: 3; 181 | } 182 | 183 | tbody:hover tr { 184 | opacity: .5; 185 | 186 | &:hover { 187 | opacity: 1; 188 | } 189 | 190 | &:hover td::after { 191 | opacity: 1; 192 | transform: 193 | translate3d(-50%, -50%, 0) 194 | rotate(var(--axis)) 195 | translate(var(--away)) 196 | rotate(calc(var(--axis) * -1)) 197 | perspective(1000px) 198 | rotate3d(1, 0, 0, 0deg); 199 | transition: opacity .2s var(--exit), 200 | transform .2s var(--exit); 201 | } 202 | } 203 | } 204 | -------------------------------------------------------------------------------- /src/_chaarts-points.scss: -------------------------------------------------------------------------------- 1 | @use "abstracts/variables"; 2 | @use "abstracts/mixins"; 3 | 4 | // ==================== 5 | // == Points Charts 6 | // 7 | // @note (!) Requires line chart 8 | // ==================== 9 | 10 | .chaarts.points { 11 | [style] { 12 | &::before { 13 | background: var(--color, currentcolor) var(--background); 14 | scale: var(--is-rtl, 1) 1; 15 | transition: opacity .3s var(--move); 16 | 17 | --polygon: polygon( 18 | calc((100% / var(--x) * 1) + var(--offset)) calc(100% - (var(--1) / var(--y) * 100%)), 19 | calc((100% / var(--x) * 2) + var(--offset)) calc(100% - (var(--2) / var(--y) * 100%)), 20 | calc((100% / var(--x) * 3) + var(--offset)) calc(100% - (var(--3) / var(--y) * 100%)), 21 | calc((100% / var(--x) * 4) + var(--offset)) calc(100% - (var(--4) / var(--y) * 100%)), 22 | calc((100% / var(--x) * 5) + var(--offset)) calc(100% - (var(--5) / var(--y) * 100%)), 23 | calc((100% / var(--x) * 6) + var(--offset)) calc(100% - (var(--6) / var(--y) * 100%)), 24 | calc((100% / var(--x) * 7) + var(--offset)) calc(100% - (var(--7) / var(--y) * 100%)), 25 | calc((100% / var(--x) * 8) + var(--offset)) calc(100% - (var(--8) / var(--y) * 100%)), 26 | calc((100% / var(--x) * 9) + var(--offset)) calc(100% - (var(--9) / var(--y) * 100%)), 27 | calc((100% / var(--x) * 10) + var(--offset)) calc(100% - (var(--10) / var(--y) * 100%)), 28 | calc((100% / var(--x) * 11) + var(--offset)) calc(100% - (var(--11) / var(--y) * 100%)), 29 | calc((100% / var(--x) * 12) + var(--offset)) calc(100% - (var(--12) / var(--y) * 100%)), 30 | calc((100% / var(--x) * 13) + var(--offset)) calc(100% - (var(--12) / var(--y) * 100%)), 31 | 100% calc(100% - (var(--12) / var(--y) * 100%)), 32 | 100% calc((100% + #{variables.$gutter * 0.25}) - (var(--12) / var(--y) * 100%)), 33 | calc((100% / var(--x) * 13) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--12) / var(--y) * 100%)), 34 | calc((100% / var(--x) * 12) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--12) / var(--y) * 100%)), 35 | calc((100% / var(--x) * 11) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--11) / var(--y) * 100%)), 36 | calc((100% / var(--x) * 10) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--10) / var(--y) * 100%)), 37 | calc((100% / var(--x) * 9) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--9) / var(--y) * 100%)), 38 | calc((100% / var(--x) * 8) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--8) / var(--y) * 100%)), 39 | calc((100% / var(--x) * 7) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--7) / var(--y) * 100%)), 40 | calc((100% / var(--x) * 6) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--6) / var(--y) * 100%)), 41 | calc((100% / var(--x) * 5) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--5) / var(--y) * 100%)), 42 | calc((100% / var(--x) * 4) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--4) / var(--y) * 100%)), 43 | calc((100% / var(--x) * 3) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--3) / var(--y) * 100%)), 44 | calc((100% / var(--x) * 2) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--2) / var(--y) * 100%)), 45 | calc((100% / var(--x) * 1) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--1) / var(--y) * 100%)) 46 | ); 47 | } 48 | 49 | th::before { 50 | background: var(--color, currentcolor) var(--background); 51 | block-size: 1rem; 52 | content: ""; 53 | display: inline-block; 54 | inline-size: 1rem; 55 | translate: -.2rem .1rem 0; 56 | } 57 | 58 | td { 59 | &::before { 60 | --size: #{variables.$gutter}; 61 | --top: calc(var(--height) - (var(--value) / var(--y) * var(--height))); 62 | 63 | background: var(--color, currentcolor) var(--background); 64 | block-size: var(--size); 65 | border: 2px solid var(--background-lighter); 66 | border-radius: 50%; 67 | box-shadow: 0 0 #{variables.$gutter * 0.25} var(--foreground-o-50); 68 | content: ""; 69 | inline-size: var(--size); 70 | inset-block-start: var(--top, 100%); 71 | inset-inline-start: calc(var(--offset) * 3); 72 | position: absolute; 73 | transition: opacity .3s var(--move), 74 | transform .3s var(--move); 75 | translate: calc(var(--size) / -2) calc(var(--size) / -2) 0; 76 | z-index: 4; 77 | } 78 | 79 | + td::before { 80 | inset-inline-start: calc((100% / var(--x) * var(--index)) + var(--offset)); 81 | } 82 | 83 | [dir="rtl"] &::before, 84 | [dir="rtl"] & + td::before { 85 | inset-inline-start: unset; 86 | } 87 | 88 | @each $number in 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 { 89 | &:nth-of-type(#{$number})::before { 90 | --value: var(--#{$number}); 91 | --index: #{$number}; 92 | } 93 | } 94 | } 95 | 96 | @include mixins.patterns; 97 | } 98 | 99 | tbody:hover [style]::before, 100 | tbody:hover [style] td::before { 101 | opacity: .25; 102 | } 103 | 104 | tbody:hover [style]:hover::before, 105 | tbody:hover [style]:hover td::before { 106 | opacity: 1; 107 | } 108 | 109 | tbody:hover [style]:hover td::before { 110 | scale: 1.25; 111 | translate: calc(var(--size) / -2) calc(var(--size) / -2) 0; 112 | } 113 | 114 | [scope="col"]:not(:first-child) { 115 | &::after { 116 | mix-blend-mode: multiply; 117 | } 118 | 119 | &:hover::after { 120 | opacity: .5; 121 | } 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /src/_chaarts-polar.scss: -------------------------------------------------------------------------------- 1 | @use "abstracts/variables"; 2 | 3 | // ==================== 4 | // == Polar Charts 5 | // 6 | // @note (!) Requires pie chart 7 | // ==================== 8 | 9 | .chaarts.pie.polar { 10 | td::before, 11 | tr:hover td::before { 12 | --zoom: 50; 13 | transform: 14 | translate3d(calc(-50% * var(--is-rtl, 1)), -50%, 0) 15 | rotate(var(--position)) 16 | scale(calc((var(--zoom) + (var(--value) / (100 / var(--zoom)))) / 100)); 17 | } 18 | 19 | td::after { 20 | --away: calc((var(--radius) / 2) - ((var(--radius) / 4) * ((100 - var(--value)) / 100)) + #{variables.$gutter * 2.5}); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/_chaarts-radar-multiple.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | @use "abstracts/variables"; 3 | 4 | // ==================== 5 | // == Multiple radar Charts 6 | // 7 | // @note (!) Requires radar chart 8 | // ==================== 9 | 10 | .chaarts.radar-multiple { 11 | margin-block-end: variables.$gutter * 12; 12 | 13 | tbody { 14 | columns: var(--areas); 15 | vertical-align: bottom; 16 | } 17 | 18 | [scope="row"] { 19 | block-size: variables.$gutter * 2; 20 | bottom: variables.$gutter * -8; 21 | left: variables.$gutter; 22 | position: absolute; 23 | 24 | &::before { 25 | background: var(--color, currentcolor); 26 | block-size: variables.$gutter; 27 | content: ""; 28 | display: inline-block; 29 | inline-size: variables.$gutter; 30 | margin-inline-end: variables.$gutter * 0.25; 31 | translate: 0 .1rem 0; 32 | } 33 | } 34 | 35 | // Allowing more areas :) 36 | @each $number in 1 { 37 | tr:nth-child(#{$number + 1}) [scope="row"] { 38 | left: calc(#{variables.$gutter} + (100% / var(--areas)) * #{$number}); 39 | } 40 | } 41 | 42 | td { 43 | align-items: flex-end; 44 | border-color: var(--color, currentcolor); 45 | display: flex; 46 | justify-content: flex-end; 47 | opacity: .5; 48 | pointer-events: none; 49 | z-index: 0; 50 | 51 | &::after { 52 | color: var(--foreground); 53 | display: block; 54 | font-size: small; 55 | font-weight: 700; 56 | inline-size: 100%; 57 | text-indent: math.div(variables.$gutter, -2); 58 | transform: skew(calc(var(--skew) * -1)) rotate(calc(var(--part) * var(--index, 1) * -1)); 59 | transform-origin: 0 0; 60 | white-space: nowrap; 61 | } 62 | 63 | @each $number in 1, 2, 3, 4, 5, 6, 7 { 64 | &:nth-of-type(#{$number})::after { 65 | --integer: calc(var(--#{$number})); // 2 66 | 67 | content: counter(value); // 1 68 | counter-reset: value var(--integer); // 1 69 | inline-size: calc(var(--#{$number}) * 100% / var(--scale)); 70 | } 71 | } 72 | } 73 | 74 | span { 75 | --mask: radial-gradient(circle at bottom right, var(--foreground), var(--foreground-o-50)); 76 | 77 | background: var(--color, currentcolor); 78 | mask-image: var(--mask); 79 | pointer-events: auto; 80 | } 81 | 82 | @media (hover: hover) { 83 | td { 84 | opacity: .25; 85 | transition: opacity .2s var(--move); 86 | 87 | &::after { 88 | opacity: 0; 89 | transition: inherit; 90 | } 91 | } 92 | 93 | tr:hover td { 94 | opacity: 1; 95 | z-index: 1; 96 | 97 | &::after { 98 | opacity: inherit; 99 | } 100 | } 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/_chaarts-radar.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "sass:math"; 3 | @use "abstracts/variables"; 4 | 5 | // ==================== 6 | // == Radar Charts 7 | // 8 | // ==================== 9 | 10 | .chaarts[class*="radar"] { 11 | --radius: #{variables.$width * 0.2}; 12 | --unitless-radius: calc(1024 / 16 / 5); 13 | --size: calc(var(--radius) / var(--scale)); 14 | --part: calc(360deg / var(--items)); 15 | --integer: calc(var(--scale)); 16 | 17 | background-image: 18 | repeating-radial-gradient( 19 | circle at 50%, 20 | var(--foreground-o-25) 0 2px, 21 | transparent 0 calc(var(--size) * var(--step)) 22 | ), 23 | repeating-radial-gradient( 24 | circle at 50%, 25 | var(--foreground-o-10) 0 2px, 26 | transparent 0 var(--size) 27 | ); 28 | block-size: calc(var(--radius) * 2); 29 | border: 2px solid; 30 | border-radius: 50%; 31 | contain: layout; 32 | counter-reset: scale var(--integer); 33 | inline-size: calc(var(--radius) * 2); 34 | margin: variables.$gutter * 6 auto variables.$gutter * 12; 35 | overflow: visible; 36 | position: relative; 37 | 38 | caption { 39 | background: none; 40 | inset-block-end: variables.$gutter * -10; 41 | position: absolute; 42 | } 43 | 44 | // ==================== 45 | // Placing items around a circle 46 | // 47 | // @link https://stackoverflow.com/questions/12813573/position-icons-into-circle 48 | // @link http://dabblet.com/gist/3866686 49 | // @author Ana Tudor 50 | // 51 | // @note Negative values for radius helps to start at the top left corner 52 | // ==================== 53 | [scope="col"] { 54 | --away: calc((var(--radius) * -1) - 50%); 55 | 56 | background-color: transparent; 57 | left: 50%; 58 | margin: 0; 59 | padding: 0 variables.$gutter; 60 | position: absolute; 61 | top: 50%; 62 | transform: translate3d(-50%, -50%, 0) rotate(calc(var(--part) * var(--index, 1))) translate(var(--away)) rotate(calc(var(--part) * var(--index, 1) * -1)); 63 | } 64 | 65 | @each $number in 1, 2, 3, 4, 5, 6, 7 { 66 | tr > *:nth-of-type(#{$number}) { 67 | --index: #{$number}; 68 | } 69 | } 70 | 71 | // ==================== 72 | // This is quite sophisticated, we're mixing multiple techniques 73 | // 74 | // @note Setting items as parts of the circle: 75 | // @link https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/ 76 | // @author Sara Soueidan 77 | // 78 | // @note Because we skew items, clip-path() needs to take skew angle into account 79 | // @note To do so, we need to know skewed width (which is hypothenuse of the resulting triangle) 80 | // @note We only know two angles (skew one + square one) and a side (initial width), 81 | // @note So we need to compute the sinus of the opposite angle to get hypothenuse 82 | // @note Thanks god, sin() exists 83 | // ==================== 84 | td { 85 | --skew: calc(90deg - var(--part)); 86 | 87 | block-size: 50%; 88 | border-block-end: 1px solid var(--chaarts-purple); 89 | inline-size: 50%; 90 | left: 0; 91 | margin: 0; 92 | position: absolute; 93 | top: 0; 94 | transform: rotate(calc(var(--part) * var(--index, 1))) skew(var(--skew)); 95 | transform-origin: 100% 100%; 96 | 97 | @each $number in 1, 2, 3, 4, 5, 6, 7 { 98 | &:nth-of-type(#{$number}) span { 99 | --point: var(--#{$number}); 100 | --pos: calc(100% - (var(--#{$number + 1}) * 100% / (var(--scale) * var(--ratio)))); 101 | } 102 | } 103 | 104 | &::after, 105 | &::before { 106 | display: none; 107 | } 108 | } 109 | 110 | span { 111 | --opposite: calc(180 - (90 + (90 - (360 / var(--items))))); 112 | 113 | // Get opposite angle in radians 114 | --angle: calc(var(--opposite) * var(--to-radians)); 115 | --sin-angle: sin(var(--angle)); 116 | 117 | // calc() hypothenuse 118 | --hypo: calc(var(--unitless-radius) / var(--sin-angle)); 119 | 120 | // Get the ratio: skewed / initial width 121 | --ratio: calc(var(--hypo) / var(--unitless-radius)); 122 | --polygon: polygon( 123 | 100% var(--pos), 124 | calc(100% - (var(--point) * 100% / var(--scale))) 100%, 125 | 100% 100% 126 | ); 127 | 128 | background: var(--chaarts-purple); 129 | block-size: 100%; 130 | clip-path: var(--polygon); 131 | filter: drop-shadow(0 0 variables.$gutter var(--chaarts-purple)); 132 | inline-size: 100%; 133 | position: absolute; 134 | } 135 | } 136 | 137 | // ==================== 138 | // 1. 139 | // @note Display CSS integers custom properties with a trick using counters 140 | // @author Cassie Evans 141 | // @link https://codepen.io/cassie-codes/pen/22ea69e0f681d45f2f4c2ca5e6acf4ab 142 | // 143 | // 2. 144 | // @note We need to ensure our counter uses an integer, --value might a a floating number 145 | // @author Carter Li 146 | // @link https://css-tricks.com/animating-number-counters/#the-new-school-css-solution 147 | // ==================== 148 | .chaarts.radar [scope="col"] { 149 | &::after { 150 | color: var(--foreground-lighter); 151 | display: block; 152 | font-size: small; 153 | font-weight: 400; 154 | } 155 | 156 | @each $number in 1, 2, 3, 4, 5, 6, 7 { 157 | &:nth-child(#{$number})::after { 158 | --integer: calc(var(--#{$number})); // 2 159 | 160 | content: counter(value) "\A0/\A0" counter(scale); // 1 161 | counter-reset: value var(--integer); // 1 162 | } 163 | } 164 | } 165 | -------------------------------------------------------------------------------- /src/_chaarts-waterfall.scss: -------------------------------------------------------------------------------- 1 | @use "sass:list"; 2 | 3 | // ==================== 4 | // == Waterfall Charts 5 | // 6 | // @note (!) Requires bar chart 7 | // ==================== 8 | 9 | .chaarts.bar.waterfall { 10 | @each $number in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 { 11 | tr:nth-of-type(#{$number}) td { 12 | grid-column: list.slash(var(--#{$number - 1}, 2), var(--value, 2)); 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/abstracts/_mixins.scss: -------------------------------------------------------------------------------- 1 | @use "sass:list"; 2 | @use "./variables"; 3 | 4 | @mixin dark-mode() { 5 | html:where([data-theme="dark"]) & { 6 | @content; 7 | } 8 | 9 | @media (prefers-color-scheme: dark) { 10 | .no-js &, 11 | html:where(:not([data-theme="light"])) & { 12 | @content; 13 | } 14 | } 15 | } 16 | 17 | // @todo Passer un entier en argument pour boucler 18 | // @note :nth-*(6n+1) bouclera sur 6 19 | // @note Index à utiliser dans les boucles `@each =number in 1, 2… {}` pour les rendre paramétrables 20 | @mixin patterns { 21 | @each $pattern in variables.$patterns { 22 | $i: list.index(variables.$patterns, $pattern); 23 | 24 | &:nth-of-type(#{$i}n + #{$i}) { 25 | --background: var(--#{$pattern}); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/abstracts/_variables.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | // ==================== 4 | // == Spacings 5 | // ==================== 6 | $width: math.div(1024em, 16) !default; 7 | $gutter: 1rem !default; 8 | 9 | // Scale values: 0.25, 0.5, 1, 1.5, 2, 2.5, 4, 6, 8, 10, 12 10 | 11 | // ==================== 12 | // == Patterns 13 | // ==================== 14 | $patterns: "checkers", "hexagons", "triangles", "zig", "stripes", "dots"; 15 | -------------------------------------------------------------------------------- /src/chaarts.scss: -------------------------------------------------------------------------------- 1 | // ==================== 2 | // == Abstracts 3 | // 4 | // ==================== 5 | @use "sass:math"; 6 | @use "sass:meta"; 7 | @use "abstracts/variables"; 8 | @use "abstracts/mixins"; 9 | 10 | @layer element, chaarts; 11 | 12 | // ==================== 13 | // == Convert to 14 | // 15 | // Using Houdini's @property to ensure --integer is type in Chromium-based browsers 16 | // @link https://developer.mozilla.org/en-US/docs/Web/CSS/@property 17 | // @link https://caniuse.com/mdn-css_at-rules_property 18 | //// Based on: 19 | //// @author Carter Li 20 | //// @link https://css-tricks.com/animating-number-counters/#the-new-school-css-solution 21 | // ==================== 22 | @property --integer { 23 | inherits: false; 24 | initial-value: 0; 25 | syntax: ""; 26 | } 27 | 28 | // ==================== 29 | // == Tables 30 | // 31 | // ==================== 32 | @layer element { 33 | table { 34 | border-collapse: collapse; 35 | caption-side: top; 36 | font-feature-settings: "tnum"; 37 | inline-size: 100%; 38 | margin-block-end: variables.$gutter * 1.5; 39 | vertical-align: top; 40 | 41 | > caption:first-child { 42 | font-style: italic; 43 | margin: 0; 44 | padding: math.div(40rem, 16) variables.$gutter; 45 | } 46 | } 47 | 48 | th, 49 | td { 50 | background-color: transparent; 51 | padding: math.div(variables.$gutter, 2) math.div(12rem, 16); 52 | text-align: start; 53 | } 54 | 55 | td { 56 | line-height: 1.25; 57 | max-inline-size: 100%; 58 | } 59 | 60 | tbody { 61 | border: 1px solid hsl(0 0% 80%); 62 | } 63 | 64 | thead { 65 | border: 1px solid var(--foreground); 66 | } 67 | } 68 | 69 | // ==================== 70 | // == Charts 71 | // 72 | // ==================== 73 | @layer chaarts { 74 | @layer container, bar, pie, line, column, radar; 75 | 76 | @layer container { 77 | .chaarts-container { 78 | // ==================== 79 | // Improve table UX 80 | // 81 | // @note Gives scrollable table some UX hints with shadows 82 | // @author Chen Hui Jing 83 | // @link https://codepen.io/huijing/pen/XBGaNQ 84 | // Based on: 85 | // @author Lea Verou 86 | // @link http://lea.verou.me/2012/04/background-attachment-local/ 87 | // ==================== 88 | &[tabindex] { 89 | --scrollable-background: var(--background-lighter); 90 | background: local linear-gradient(to right, var(--scrollable-background) 30%, transparent) 0 0 / 2.5rem 100% no-repeat, 91 | local linear-gradient(to right, transparent, var(--scrollable-background) 70%) 100% / 2.5rem 100% no-repeat, 92 | scroll radial-gradient(farthest-side at 0% 50%, var(--foreground-o-25), transparent) 0 0 / 1rem 100% no-repeat, 93 | var(--scrollable-background) 94 | scroll radial-gradient(farthest-side at 100% 50%, var(--foreground-o-25), transparent) 100% / 1rem 100% no-repeat; 95 | } 96 | 97 | // ==================== 98 | // == Colors 99 | // 100 | // 1. Palette based on rebeccapurple: 101 | // @see https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/ 102 | // ==================== 103 | color-scheme: light; 104 | margin: variables.$gutter * 2 0; 105 | max-inline-size: 100%; 106 | -webkit-overflow-scrolling: touch; 107 | overflow-x: auto; 108 | overflow-y: hidden; 109 | 110 | --background-lightness: 100%; 111 | --foreground-lightness: 0%; 112 | --diff: 4%; 113 | --background-lighter: hsl(0deg 0% var(--background-lightness)); 114 | --background: hsl(0deg 0% calc(var(--background-lightness) - var(--diff))); 115 | --foreground: hsl(0deg 0% var(--foreground-lightness)); 116 | --foreground-lighter: hsl(0deg 0% calc(var(--foreground-lightness) + var(--diff))); 117 | --foreground-o-50: hsl(0deg 0% var(--foreground-lightness) / 50%); 118 | --foreground-o-25: hsl(0deg 0% var(--foreground-lightness) / 25%); 119 | --foreground-o-10: hsl(0deg 0% var(--foreground-lightness) / 10%); 120 | --hue: 270; 121 | --lightness: 50%; 122 | --saturation: 100%; 123 | --chaarts-purple: hsl(var(--hue) calc(var(--saturation) / 2) var(--lightness)); // 1 124 | --chaarts-pink: hsl(calc(var(--hue) + 60) var(--saturation) var(--lightness)); 125 | --chaarts-blue: hsl(calc(var(--hue) - 60) var(--saturation) var(--lightness)); 126 | --chaarts-yellow: hsl(40deg var(--saturation) var(--lightness)); 127 | --chaarts-green: hsl(calc(var(--hue) - 120) var(--saturation) var(--lightness)); 128 | --chaarts-red: hsl(calc(var(--hue) + 90) var(--saturation) var(--lightness)); 129 | --chaarts-gray: hsl(0deg 0% var(--lightness)); 130 | --to-radians: 0.01745329251; 131 | 132 | @media (min-width: #{math.div(600em, 16)}) { 133 | --lightness: 40%; 134 | } 135 | 136 | // ==================== 137 | // == Dark mode 138 | // 139 | // @note Based on sseeeedd for progressive enhancement 140 | // @link https://github.com/ffoodd/sseeeedd 141 | // ==================== 142 | @include mixins.dark-mode { 143 | color-scheme: dark; 144 | 145 | --background-lightness: 0%; 146 | --foreground-lightness: 100%; 147 | --background: hsl(0deg 0% calc(var(--diff) * 5)); 148 | --foreground-lighter: hsl(0deg 0% calc(var(--foreground-lightness) - var(--diff))); 149 | } 150 | 151 | // ==================== 152 | // == High contrast 153 | // 154 | // @note Using system color keywords 155 | // @link https://drafts.csswg.org/css-color/#css-system-colors 156 | // @link https://adrianroselli.com/2021/02/whcm-and-system-colors.html 157 | // @link https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/ 158 | // ==================== 159 | @media (prefers-contrast: more) { 160 | --background-lighter: Canvas; 161 | --background: Canvas; 162 | --foreground: CanvasText; 163 | --foreground-lighter: CanvasText; 164 | --chaarts-purple: LinkText; 165 | --chaarts-pink: CanvasText; 166 | --chaarts-blue: Highlight; 167 | --chaarts-yellow: ActiveText; 168 | --chaarts-green: InactiveBorder; 169 | --chaarts-red: VisitedText; 170 | --chaarts-gray: ButtonShadow; 171 | } 172 | 173 | // ==================== 174 | // == Patterns 175 | // 176 | // @note Defining a CSS custom property for each inlined SVG pattern 177 | // @author Trys Mudford 178 | // @link https://www.trysmudford.com/blog/using-css-custom-properties/ 179 | // @via Jeremy Keith 180 | // @link https://adactio.com/journal/15075 181 | // @note SVG inline patterns coming from: 182 | // @link http://www.heropatterns.com/ 183 | // 184 | // @note variables.$patterns entries should match this list 185 | // ==================== 186 | --checkers: url("data:image/svg+xml,"); 187 | --hexagons: url("data:image/svg+xml,"); 188 | --triangles: url("data:image/svg+xml,"); 189 | --zig: url("data:image/svg+xml,"); 190 | --stripes: url("data:image/svg+xml,"); 191 | --dots: url("data:image/svg+xml,"); 192 | 193 | // ==================== 194 | // == Timing functions 195 | // 196 | // @note Simple cubic-bezier curves for timing functions 197 | // @author David K. Piano 198 | // @link https://twitter.com/DavidKPiano/status/965704092545900544 199 | // ==================== 200 | --enter: cubic-bezier(0, .5, .5, 1); 201 | --exit: cubic-bezier(.5, 0, 1, .5); 202 | --move: cubic-bezier(.5, 0, .5, 1); 203 | 204 | [dir="rtl"] & { 205 | --is-rtl: -1; 206 | } 207 | } 208 | 209 | .chaarts { 210 | caption-side: bottom; 211 | empty-cells: hide; 212 | margin: 1.5em auto; 213 | overflow: hidden; 214 | padding: 1em; 215 | 216 | > caption:first-child { 217 | background: inherit; 218 | font-style: normal; 219 | padding: variables.$gutter 0; 220 | } 221 | 222 | [role="presentation"] { 223 | display: none; 224 | } 225 | 226 | abbr[title] { 227 | border-block-end: 0; 228 | font-size: small; 229 | font-weight: normal; 230 | text-transform: none; 231 | } 232 | } 233 | 234 | table:not(.chaarts) .sr-only { 235 | all: revert; 236 | } 237 | 238 | @media (min-width: math.div(480em, 16)) { 239 | .chaarts { 240 | border-collapse: separate; 241 | border-spacing: 0; 242 | contain: content; 243 | 244 | th, 245 | td { 246 | border: 0; 247 | padding: 0; 248 | 249 | &:empty { 250 | display: none !important; 251 | } 252 | } 253 | } 254 | } 255 | } 256 | 257 | @media (min-width: math.div(480em, 16)) { 258 | @layer bar { 259 | @include meta.load-css("chaarts-bar"); 260 | @include meta.load-css("chaarts-waterfall"); 261 | } 262 | 263 | @layer pie { 264 | @include meta.load-css("chaarts-pie"); 265 | @include meta.load-css("chaarts-donut"); 266 | @include meta.load-css("chaarts-polar"); 267 | } 268 | 269 | @layer line { 270 | @include meta.load-css("chaarts-line"); 271 | @include meta.load-css("chaarts-points"); 272 | } 273 | 274 | @layer column { 275 | @include meta.load-css("chaarts-column"); 276 | @include meta.load-css("chaarts-column-multiple"); 277 | } 278 | 279 | @layer radar { 280 | @include meta.load-css("chaarts-radar"); 281 | @include meta.load-css("chaarts-radar-multiple"); 282 | } 283 | } 284 | } 285 | --------------------------------------------------------------------------------