@limetech/lime-elements 38.34.0 → 38.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/dist/cjs/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-action-bar_2.cjs.entry.js +1 -1
- package/dist/cjs/limel-ai-avatar.cjs.entry.js +1 -1
- package/dist/cjs/limel-callout.cjs.entry.js +1 -1
- package/dist/cjs/limel-chart.cjs.entry.js +7 -4
- package/dist/cjs/limel-chart.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-chip_2.cjs.entry.js +1 -1
- package/dist/cjs/limel-collapsible-section.cjs.entry.js +1 -1
- package/dist/cjs/limel-drag-handle.cjs.entry.js +1 -1
- package/dist/cjs/limel-file-viewer.cjs.entry.js +1 -1
- package/dist/cjs/limel-file.cjs.entry.js +1 -1
- package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js +1 -1
- package/dist/cjs/limel-linear-progress.cjs.entry.js +1 -1
- package/dist/cjs/limel-list-item.cjs.entry.js +1 -1
- package/dist/cjs/limel-profile-picture.cjs.entry.js +1 -1
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js +1 -1
- package/dist/cjs/limel-snackbar.cjs.entry.js +1 -1
- package/dist/cjs/limel-table.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{translations-a42886f2.js → translations-e58b6da5.js} +9 -1
- package/dist/cjs/translations-e58b6da5.js.map +1 -0
- package/dist/collection/components/chart/chart.css +53 -0
- package/dist/collection/components/chart/chart.js +42 -3
- package/dist/collection/components/chart/chart.js.map +1 -1
- package/dist/collection/translations/da.js +1 -0
- package/dist/collection/translations/da.js.map +1 -1
- package/dist/collection/translations/de.js +1 -0
- package/dist/collection/translations/de.js.map +1 -1
- package/dist/collection/translations/en.js +1 -0
- package/dist/collection/translations/en.js.map +1 -1
- package/dist/collection/translations/fi.js +1 -0
- package/dist/collection/translations/fi.js.map +1 -1
- package/dist/collection/translations/fr.js +1 -0
- package/dist/collection/translations/fr.js.map +1 -1
- package/dist/collection/translations/nl.js +1 -0
- package/dist/collection/translations/nl.js.map +1 -1
- package/dist/collection/translations/no.js +1 -0
- package/dist/collection/translations/no.js.map +1 -1
- package/dist/collection/translations/sv.js +1 -0
- package/dist/collection/translations/sv.js.map +1 -1
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-action-bar_2.entry.js +1 -1
- package/dist/esm/limel-ai-avatar.entry.js +1 -1
- package/dist/esm/limel-callout.entry.js +1 -1
- package/dist/esm/limel-chart.entry.js +7 -4
- package/dist/esm/limel-chart.entry.js.map +1 -1
- package/dist/esm/limel-chip_2.entry.js +1 -1
- package/dist/esm/limel-collapsible-section.entry.js +1 -1
- package/dist/esm/limel-drag-handle.entry.js +1 -1
- package/dist/esm/limel-file-viewer.entry.js +1 -1
- package/dist/esm/limel-file.entry.js +1 -1
- package/dist/esm/limel-flatpickr-adapter.entry.js +1 -1
- package/dist/esm/limel-linear-progress.entry.js +1 -1
- package/dist/esm/limel-list-item.entry.js +1 -1
- package/dist/esm/limel-profile-picture.entry.js +1 -1
- package/dist/esm/limel-prosemirror-adapter.entry.js +1 -1
- package/dist/esm/limel-snackbar.entry.js +1 -1
- package/dist/esm/limel-table.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{translations-9bfde9f4.js → translations-4151479a.js} +9 -1
- package/dist/esm/translations-4151479a.js.map +1 -0
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js.map +1 -1
- package/dist/lime-elements/{p-ee5c4112.entry.js → p-13bd2797.entry.js} +2 -2
- package/dist/lime-elements/{p-df9bcace.entry.js → p-158897dd.entry.js} +2 -2
- package/dist/lime-elements/{p-e00465fa.entry.js → p-182ce303.entry.js} +2 -2
- package/dist/lime-elements/{p-d79c85e2.entry.js → p-23de215d.entry.js} +2 -2
- package/dist/lime-elements/{p-8ea3b80a.entry.js → p-3746c217.entry.js} +2 -2
- package/dist/lime-elements/{p-aa1e7319.entry.js → p-61b2e426.entry.js} +2 -2
- package/dist/lime-elements/{p-92aa9610.entry.js → p-68799403.entry.js} +2 -2
- package/dist/lime-elements/{p-3311eaf3.entry.js → p-6d9fb8e8.entry.js} +2 -2
- package/dist/lime-elements/{p-fbac230b.entry.js → p-7da20f22.entry.js} +2 -2
- package/dist/lime-elements/{p-cd2f780a.entry.js → p-7e1a548a.entry.js} +2 -2
- package/dist/lime-elements/{p-b0acf522.entry.js → p-99f5e70b.entry.js} +2 -2
- package/dist/lime-elements/{p-40542ccc.entry.js → p-bf527989.entry.js} +2 -2
- package/dist/lime-elements/p-c582027f.js +2 -0
- package/dist/lime-elements/p-c582027f.js.map +1 -0
- package/dist/lime-elements/{p-31f1cb08.entry.js → p-d76d70ce.entry.js} +2 -2
- package/dist/lime-elements/p-dc55f5ca.entry.js +2 -0
- package/dist/lime-elements/p-dc55f5ca.entry.js.map +1 -0
- package/dist/lime-elements/{p-5e976a59.entry.js → p-f529b510.entry.js} +2 -2
- package/dist/lime-elements/{p-42e889d8.entry.js → p-ffedb0be.entry.js} +2 -2
- package/dist/types/components/chart/chart.d.ts +13 -0
- package/dist/types/components.d.ts +22 -2
- package/dist/types/translations/da.d.ts +1 -0
- package/dist/types/translations/de.d.ts +1 -0
- package/dist/types/translations/en.d.ts +1 -0
- package/dist/types/translations/fi.d.ts +1 -0
- package/dist/types/translations/fr.d.ts +1 -0
- package/dist/types/translations/nl.d.ts +1 -0
- package/dist/types/translations/no.d.ts +1 -0
- package/dist/types/translations/sv.d.ts +1 -0
- package/package.json +1 -1
- package/dist/cjs/translations-a42886f2.js.map +0 -1
- package/dist/esm/translations-9bfde9f4.js.map +0 -1
- package/dist/lime-elements/p-5df2361b.js +0 -2
- package/dist/lime-elements/p-5df2361b.js.map +0 -1
- package/dist/lime-elements/p-84e00842.entry.js +0 -2
- package/dist/lime-elements/p-84e00842.entry.js.map +0 -1
- /package/dist/lime-elements/{p-ee5c4112.entry.js.map → p-13bd2797.entry.js.map} +0 -0
- /package/dist/lime-elements/{p-df9bcace.entry.js.map → p-158897dd.entry.js.map} +0 -0
- /package/dist/lime-elements/{p-e00465fa.entry.js.map → p-182ce303.entry.js.map} +0 -0
- /package/dist/lime-elements/{p-d79c85e2.entry.js.map → p-23de215d.entry.js.map} +0 -0
- /package/dist/lime-elements/{p-8ea3b80a.entry.js.map → p-3746c217.entry.js.map} +0 -0
- /package/dist/lime-elements/{p-aa1e7319.entry.js.map → p-61b2e426.entry.js.map} +0 -0
- /package/dist/lime-elements/{p-92aa9610.entry.js.map → p-68799403.entry.js.map} +0 -0
- /package/dist/lime-elements/{p-3311eaf3.entry.js.map → p-6d9fb8e8.entry.js.map} +0 -0
- /package/dist/lime-elements/{p-fbac230b.entry.js.map → p-7da20f22.entry.js.map} +0 -0
- /package/dist/lime-elements/{p-cd2f780a.entry.js.map → p-7e1a548a.entry.js.map} +0 -0
- /package/dist/lime-elements/{p-b0acf522.entry.js.map → p-99f5e70b.entry.js.map} +0 -0
- /package/dist/lime-elements/{p-40542ccc.entry.js.map → p-bf527989.entry.js.map} +0 -0
- /package/dist/lime-elements/{p-31f1cb08.entry.js.map → p-d76d70ce.entry.js.map} +0 -0
- /package/dist/lime-elements/{p-5e976a59.entry.js.map → p-f529b510.entry.js.map} +0 -0
- /package/dist/lime-elements/{p-42e889d8.entry.js.map → p-ffedb0be.entry.js.map} +0 -0
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as e,h as r}from"./p-288f0842.js";import{t as a}from"./p-5df2361b.js";import{c as i}from"./p-ad52787a.js";const o='@charset "UTF-8";:host(limel-chart){--chart-axis-line-color:var(\n --limel-chart-axis-line-color,\n rgb(var(--contrast-900))\n );box-sizing:border-box;isolation:isolate;display:flex;width:100%;height:100%;min-width:0;min-height:0;padding:var(--limel-chart-padding)}table{all:unset;border-collapse:collapse;border-spacing:0;empty-cells:show;position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0}table colgroup,table thead,table tbody,table tr,table th,table td{all:unset}table caption,table colgroup,table thead,table tfoot,table th,table td{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}*,*:before,*:after{box-sizing:border-box}.chart{position:relative;flex-grow:1;width:100%;height:100%;min-height:0;min-width:0}.chart:has(.item:hover) .item,.chart:has(.item:focus-visible) .item{opacity:0.4}.item{transition:background-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.4s ease;cursor:help}.item:focus{outline:none}.item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.item:focus-visible,.item:hover{opacity:1 !important}.item[role=button]{cursor:pointer}limel-spinner{margin:auto}:host(limel-chart[type=bar]) .chart,:host(limel-chart[type=dot]) .chart,:host(limel-chart[type=line]) .chart,:host(limel-chart[type=area]) .chart{display:flex;background-color:var(--chart-background-color, transparent)}:host(limel-chart[type=bar]) .item,:host(limel-chart[type=dot]) .item,:host(limel-chart[type=line]) .item,:host(limel-chart[type=area]) .item{position:relative;mix-blend-mode:hard-light}:host(limel-chart[type=bar][orientation=landscape]),:host(limel-chart[type=dot][orientation=landscape]),:host(limel-chart[type=line][orientation=landscape]),:host(limel-chart[type=area][orientation=landscape]){--limel-chart-padding:0.5rem 0.5rem 0.5rem 2rem}:host(limel-chart[type=bar][orientation=landscape]) .chart,:host(limel-chart[type=dot][orientation=landscape]) .chart,:host(limel-chart[type=line][orientation=landscape]) .chart,:host(limel-chart[type=area][orientation=landscape]) .chart{flex-direction:row;align-items:flex-end;overflow:auto hidden;padding:0 0.125rem}:host(limel-chart[type=bar][orientation=landscape]) .item,:host(limel-chart[type=dot][orientation=landscape]) .item,:host(limel-chart[type=line][orientation=landscape]) .item,:host(limel-chart[type=area][orientation=landscape]) .item{min-width:0.5rem;width:inherit}:host(limel-chart[type=bar][orientation=portrait]),:host(limel-chart[type=dot][orientation=portrait]),:host(limel-chart[type=line][orientation=portrait]),:host(limel-chart[type=area][orientation=portrait]){--limel-chart-padding:0.5rem 0.5rem 1rem 0.5rem}:host(limel-chart[type=bar][orientation=portrait]) .chart,:host(limel-chart[type=dot][orientation=portrait]) .chart,:host(limel-chart[type=line][orientation=portrait]) .chart,:host(limel-chart[type=area][orientation=portrait]) .chart{flex-direction:column;overflow:hidden auto;padding:0.125rem 0}:host(limel-chart[type=bar][orientation=portrait]) .item,:host(limel-chart[type=dot][orientation=portrait]) .item,:host(limel-chart[type=line][orientation=portrait]) .item,:host(limel-chart[type=area][orientation=portrait]) .item{min-height:0.5rem;height:inherit}:host(limel-chart[type=pie]) table,:host(limel-chart[type=doughnut]) table,:host(limel-chart[type=ring]) table{min-height:2rem;min-width:2rem}:host(limel-chart[type=pie]) .chart,:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .chart,:host(limel-chart[type=doughnut]) .item,:host(limel-chart[type=ring]) .chart,:host(limel-chart[type=ring]) .item{aspect-ratio:1;display:flex;margin:auto}:host(limel-chart[type=pie]) .chart,:host(limel-chart[type=doughnut]) .chart,:host(limel-chart[type=ring]) .chart{justify-content:center;align-items:center}:host(limel-chart[type=pie]) .chart:before,:host(limel-chart[type=doughnut]) .chart:before,:host(limel-chart[type=ring]) .chart:before{aspect-ratio:1;content:"";position:absolute;z-index:0;inset:0;margin:auto;border-radius:50%;max-width:100%;max-height:100%;background-color:var(--chart-background-color, rgb(var(--contrast-200)))}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item,:host(limel-chart[type=ring]) .item{max-width:100%;max-height:100%;border-radius:50%;position:absolute;inset:0}:host(limel-chart[type=bar]) .chart,:host(limel-chart[type=dot]) .chart{gap:0.5rem}:host(limel-chart[type=bar]) .item,:host(limel-chart[type=dot]) .item{display:flex;align-items:center;justify-content:center;border-radius:var(--chart-item-border-radius, 0.125rem)}:host(limel-chart[type=bar]) .item{background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=dot]) .item:before,:host(limel-chart[type=dot]) .item:after{content:"";position:absolute;margin:auto;width:0.5rem;height:0.5rem;border-radius:50%}:host(limel-chart[type=dot]) .item::after{background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=dot]) .item.has-start-value:before{background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=bar][orientation=landscape]) .item,:host(limel-chart[type=dot][orientation=landscape]) .item{height:calc(var(--limel-chart-item-size) * 1%);bottom:calc(var(--limel-chart-item-offset) * 1%)}:host(limel-chart[type=bar][orientation=landscape]) .item.has-negative-value-only,:host(limel-chart[type=dot][orientation=landscape]) .item.has-negative-value-only{height:calc(var(--limel-chart-item-size) * -1%);transform-origin:bottom;transform:rotateX(180deg)}:host(limel-chart[type=dot][orientation=landscape]) .item.has-start-value,:host(limel-chart[type=dot][orientation=landscape]) .item:hover,:host(limel-chart[type=dot][orientation=landscape]) .item:focus-visible{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat}:host(limel-chart[type=dot][orientation=landscape]) .item:before{inset:auto 0 0 0;transform:translateY(50%)}:host(limel-chart[type=dot][orientation=landscape]) .item::after{inset:0 0 auto 0;transform:translateY(-50%)}:host(limel-chart[type=bar][orientation=portrait]) .item,:host(limel-chart[type=dot][orientation=portrait]) .item{width:calc(var(--limel-chart-item-size) * 1%);left:calc(var(--limel-chart-item-offset) * 1%)}:host(limel-chart[type=bar][orientation=portrait]) .item.has-negative-value-only,:host(limel-chart[type=dot][orientation=portrait]) .item.has-negative-value-only{width:calc(var(--limel-chart-item-size) * -1%);transform-origin:left;transform:rotateY(180deg)}:host(limel-chart[type=dot][orientation=portrait]) .item.has-start-value,:host(limel-chart[type=dot][orientation=portrait]) .item:hover,:host(limel-chart[type=dot][orientation=portrait]) .item:focus-visible{background:linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/100% 1px no-repeat}:host(limel-chart[type=dot][orientation=portrait]) .item:before{inset:0 auto 0 0;transform:translateX(-50%)}:host(limel-chart[type=dot][orientation=portrait]) .item:after{inset:0 0 0 auto;transform:translateX(50%)}:host(limel-chart[type=area]) .item,:host(limel-chart[type=line]) .item{position:relative}:host(limel-chart[type=area]) .item:after,:host(limel-chart[type=line]) .item:after{margin:auto;width:0.5rem;height:0.5rem;border-radius:50%;border:1px solid rgb(var(--contrast-100))}:host(limel-chart[type=area]) .item:before,:host(limel-chart[type=line]) .item:before{inset:0}:host(limel-chart[type=area]) .item:after,:host(limel-chart[type=area]) .item:before,:host(limel-chart[type=line]) .item:after,:host(limel-chart[type=line]) .item:before{transition:border-color 0.2s ease, opacity 0.4s ease;content:"";position:absolute;background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=area]) .item:hover:after,:host(limel-chart[type=area]) .item:focus-visible:after,:host(limel-chart[type=line]) .item:hover:after,:host(limel-chart[type=line]) .item:focus-visible:after{border-color:transparent}:host(limel-chart[type=line][orientation=landscape]) .item,:host(limel-chart[type=area][orientation=landscape]) .item{height:100%}:host(limel-chart[type=line][orientation=landscape]) .item:after,:host(limel-chart[type=area][orientation=landscape]) .item:after{transform:translateX(-50%) translateY(50%);left:0;bottom:calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%)}:host(limel-chart[type=line][orientation=landscape]) .item:last-of-type:before,:host(limel-chart[type=area][orientation=landscape]) .item:last-of-type:before{display:none}:host(limel-chart[type=line][orientation=portrait]) .item,:host(limel-chart[type=area][orientation=portrait]) .item{width:100%}:host(limel-chart[type=line][orientation=portrait]) .item:after,:host(limel-chart[type=area][orientation=portrait]) .item:after{transform:translateX(-50%) translateY(-50%);left:calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%)}:host(limel-chart[type=area]) .item:after{opacity:0}:host(limel-chart[type=area]) .item:hover:after,:host(limel-chart[type=area]) .item:focus-visible:after{opacity:1}:host(limel-chart[type=area]) .item:hover:before,:host(limel-chart[type=area]) .item:focus-visible:before{opacity:0.7}:host(limel-chart[type=area][orientation=landscape]){}:host(limel-chart[type=area][orientation=landscape]) .item:before{clip-path:polygon(0 calc((100 - var(--limel-chart-item-offset)) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%), 100% calc((100 - var(--limel-chart-next-item-offset)) * 1%))}:host(limel-chart[type=area][orientation=portrait]){}:host(limel-chart[type=area][orientation=portrait]) .item:before{clip-path:polygon(calc(var(--limel-chart-item-offset) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%, calc(var(--limel-chart-next-item-offset) * 1%) 100%)}:host(limel-chart[type=line]){--limel-chart-line-thickness:0.125rem}:host(limel-chart[type=line]) .item:hover:before{opacity:0.4}:host(limel-chart[type=line][orientation=landscape]){}:host(limel-chart[type=line][orientation=landscape]) .item:hover{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) left/1px 100% no-repeat}:host(limel-chart[type=line][orientation=landscape]) .item:before{clip-path:polygon(0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%))}:host(limel-chart[type=line][orientation=portrait]){}:host(limel-chart[type=line][orientation=portrait]) .item:hover{background:linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) top/100% 1px no-repeat}:host(limel-chart[type=line][orientation=portrait]) .item:before{clip-path:polygon(calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1% + var(--limel-chart-line-thickness)) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1% + var(--limel-chart-line-thickness)) 100%, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%)}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item{background:conic-gradient(transparent 0 calc(var(--limel-chart-item-offset) * 1%), var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) calc(var(--limel-chart-item-offset) * 1%) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), transparent calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%))}:host(limel-chart[type=pie]) .item:focus,:host(limel-chart[type=pie]) .item:focus-visible,:host(limel-chart[type=doughnut]) .item:focus,:host(limel-chart[type=doughnut]) .item:focus-visible{outline:none}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item{pointer-events:none}:host(limel-chart[type=doughnut]) .chart:after{aspect-ratio:1;content:"";position:absolute;inset:0;margin:auto;max-width:60%;max-height:60%;border-radius:50%;background-color:rgb(var(--contrast-100))}:host(limel-chart[type=ring]) .chart:after{content:"";position:absolute;inset:0;aspect-ratio:1;border-radius:50%;max-height:calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));max-width:calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));background-color:var(--limel-chart-background-color, rgb(var(--contrast-200)))}:host(limel-chart[type=ring]) .chart:has(.item:hover) .item,:host(limel-chart[type=ring]) .chart:has(.item:focus-visible) .item{opacity:1;filter:grayscale(1)}:host(limel-chart[type=ring]) .chart:after,:host(limel-chart[type=ring]) .item{margin:auto;border:1px solid var(--limel-chart-background-color, rgb(var(--contrast-400)))}:host(limel-chart[type=ring]) .item{background:conic-gradient(var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) 0 calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), var(--chart-background-color, rgb(var(--contrast-200))) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%));max-width:calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1));max-height:calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1))}:host(limel-chart[type=ring]) .item:focus-visible,:host(limel-chart[type=ring]) .item:hover{filter:grayscale(0) !important}:host(limel-chart[type=stacked-bar]) .chart{display:flex;border-radius:0.25rem;overflow:hidden;background-color:var(--chart-background-color, rgb(var(--contrast-800), 0.2))}:host(limel-chart[type=stacked-bar]) .item{display:flex;border-radius:var(--chart-item-border-radius, 0);background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=stacked-bar]) .item:last-of-type:not(:focus-visible){box-shadow:none !important}:host(limel-chart[type=stacked-bar][orientation=landscape]) .chart{flex-direction:row}:host(limel-chart[type=stacked-bar][orientation=landscape]) .item{min-height:0.5rem;width:calc(var(--limel-chart-item-size) * 1%)}:host(limel-chart[type=stacked-bar][orientation=landscape]) .item:not(:focus-visible){box-shadow:-1px 0 0 0 var(--chart-item-divider-color, rgb(var(--color-white), 0.6)) inset}:host(limel-chart[type=stacked-bar][orientation=portrait]) .chart{flex-direction:column-reverse}:host(limel-chart[type=stacked-bar][orientation=portrait]) .item{min-width:0.5rem;height:calc(var(--limel-chart-item-size) * 1%)}:host(limel-chart[type=stacked-bar][orientation=portrait]) .item:not(:focus-visible){box-shadow:0 -1px 0 0 rgb(var(--color-white), 0.6) inset}:host(limel-chart[type=nps]){--limel-chart-nps-gauge-angel:220deg}:host(limel-chart[type=nps]) table{min-height:4rem;min-width:4rem}:host(limel-chart[type=nps]) .chart{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:1;margin:auto;width:unset;height:unset;max-width:100%;max-height:100%;rotate:calc(var(--limel-chart-nps-gauge-angel) / 2 * -1);transform:translate(-15%, -5%)}:host(limel-chart[type=nps]) .chart:before,:host(limel-chart[type=nps]) .chart:after{content:"";aspect-ratio:1;position:absolute;border-radius:50%;z-index:-1;min-height:0;min-width:0}:host(limel-chart[type=nps]) .chart:before{height:100%;max-height:100%;background:conic-gradient(rgb(var(--color-coral-default)) 0deg calc(var(--limel-chart-nps-gauge-angel) / 2), rgb(var(--color-amber-light)) calc(var(--limel-chart-nps-gauge-angel) / 2) calc(var(--limel-chart-nps-gauge-angel) * 0.65), rgb(var(--color-lime-light)) calc(var(--limel-chart-nps-gauge-angel) * 0.65) calc(var(--limel-chart-nps-gauge-angel) * 0.85), rgb(var(--color-lime-default)) calc(var(--limel-chart-nps-gauge-angel) * 0.85) var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel))}:host(limel-chart[type=nps]) .chart:after{height:calc(100% - min(3rem, 20%) * 2);max-height:calc(100% - min(3rem, 20%) * 2);background:conic-gradient(var(--chart-background-color, rgb(var(--contrast-100))) 0deg var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel))}:host(limel-chart[type=nps]) .item{display:flex;align-items:flex-start;justify-content:center;border-radius:0.5rem;position:absolute;height:calc(50% - min(3rem, 20%) + 0.5rem);width:0.5rem;transform:translateY(-50%) rotate(calc((var(--limel-chart-item-value) + 100) / 200 * var(--limel-chart-nps-gauge-angel)));transform-origin:bottom}:host(limel-chart[type=nps]) .item:hover,:host(limel-chart[type=nps]) .item:focus-visible{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat}:host(limel-chart[type=nps]) .item:before,:host(limel-chart[type=nps]) .item:after{content:"";position:absolute}:host(limel-chart[type=nps]) .item:before{transform:translateY(-60%);width:0.4rem;border-radius:1rem;border-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));border-style:solid;border-bottom-width:1.75rem;border-right-color:transparent;border-left-color:transparent;border-top-color:transparent}:host(limel-chart[type=nps]) .item:after{border-radius:50%;background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));aspect-ratio:1;height:clamp(0.75rem, 10%, 1.25rem);border:0.125rem solid rgb(var(--contrast-100), 0.8);box-shadow:var(--shadow-depth-8)}.axises{position:absolute;display:flex;justify-content:space-between;min-height:100%;min-width:100%;height:100%;width:100%}.axis-line{transition:opacity 0.4s ease;position:relative;opacity:0.2;font-size:0.625rem;border-color:var(--limel-chart-axis-line-color)}.axis-line:hover{opacity:0.6;transition-duration:0.2s}.axis-line.zero-line{opacity:0.6;z-index:1}.axis-line limel-badge{--badge-background-color:transparent;--badge-text-color:currentColor;position:absolute;text-align:right;min-width:2rem}:host(limel-chart[orientation=landscape]) .axises{flex-direction:column-reverse}:host(limel-chart[orientation=landscape]) .axis-line{border-bottom:1px solid;transform:translateY(50%)}:host(limel-chart[orientation=landscape]) .axis-line limel-badge{bottom:0;left:-2rem;transform:translateY(50%)}:host(limel-chart[orientation=portrait]) .axises{flex-direction:row}:host(limel-chart[orientation=portrait]) .axis-line{border-left:1px solid;transform:translateX(-50%)}:host(limel-chart[orientation=portrait]) .axis-line limel-badge{bottom:-1rem;right:-1rem}';const l=100;const n=10;const h=class{constructor(r){t(this,r);this.interact=e(this,"interact",7);this.handleClick=t=>{const e=this.getClickableItem(t.currentTarget);if(!e){return}t.stopPropagation();this.interact.emit(e)};this.handleKeyDown=t=>{if(t.key!=="Enter"&&t.key!==" "){return}const e=this.getClickableItem(t.currentTarget);if(!e){return}t.preventDefault();this.interact.emit(e)};this.language="en";this.accessibleLabel=undefined;this.accessibleItemsLabel=undefined;this.items=undefined;this.type="stacked-bar";this.orientation="landscape";this.maxValue=undefined;this.axisIncrement=undefined;this.loading=false}componentWillLoad(){this.recalculateRangeData()}render(){if(this.loading){return r("limel-spinner",{limeBranded:false})}return r("table",{"aria-busy":this.loading?"true":"false","aria-live":"polite",style:{"--limel-chart-number-of-items":this.items.length.toString()}},this.renderCaption(),this.renderTableHeader(),this.renderAxises(),r("tbody",{class:"chart"},this.renderItems()))}renderCaption(){if(!this.accessibleLabel){return}return r("caption",null,this.accessibleLabel)}renderTableHeader(){return r("thead",null,r("tr",null,r("th",{scope:"col"},this.accessibleItemsLabel),r("th",{scope:"col"},a.get("value",this.language))))}renderAxises(){if(!["bar","dot","area","line"].includes(this.type)){return}const{minValue:t,maxValue:e}=this.range;const a=[];const i=Math.floor(t/this.axisIncrement)*this.axisIncrement;const o=Math.ceil(e/this.axisIncrement)*this.axisIncrement;for(let t=i;t<=o;t+=this.axisIncrement){a.push(r("div",{class:{"axis-line":true,"zero-line":t===0},role:"presentation"},r("limel-badge",{label:t})))}return r("div",{class:"axises",role:"presentation"},a)}renderItems(){var t;if(!((t=this.items)===null||t===void 0?void 0:t.length)){return}let e=0;return this.items.map(((t,a)=>{const o=i();const l=this.calculateSizeAndOffset(t);const n=l.size;let h=l.offset;if(this.type==="pie"||this.type==="doughnut"){h=e;e+=n}return r("tr",{style:this.getItemStyle(t,a,n,h),class:this.getItemClass(t),key:o,id:o,"data-index":a,tabIndex:0,role:t.clickable?"button":null,onClick:this.handleClick,onKeyDown:this.handleKeyDown},r("th",null,this.getItemText(t)),r("td",null,this.getFormattedValue(t)),this.renderTooltip(t,o,n))}))}getItemStyle(t,e,r,a){const i={"--limel-chart-item-offset":`${a}`,"--limel-chart-item-size":`${r}`,"--limel-chart-item-index":`${e}`,"--limel-chart-item-value":`${t.value}`};if(t.color){i["--limel-chart-item-color"]=t.color}if(this.type==="line"||this.type==="area"){const t=this.calculateSizeAndOffset(this.items[e+1]);i["--limel-chart-next-item-size"]=`${t.size}`;i["--limel-chart-next-item-offset"]=`${t.offset}`}return i}getItemClass(t){return{item:true,"has-start-value":Array.isArray(t.value),"has-negative-value-only":this.getMaximumValue(t)<0&&!this.isRangeItem(t)}}calculateSizeAndOffset(t){const{minValue:e,totalRange:r}=this.range;if(!t){return{size:0,offset:0}}let a=0;if(this.isRangeItem(t)){a=this.getMinimumValue(t)}const i=(a-e)/r*l;const o=(this.getMaximumValue(t)-e)/r*l;return{size:o-i,offset:i}}getFormattedValue(t){const{value:e,formattedValue:r}=t;if(r){return r}if(Array.isArray(e)){return`${e[0]} — ${e[1]}`}return`${e}`}getItemText(t){return t.text}renderTooltip(t,e,a){const i=this.getItemText(t);const o=2;const l=this.getFormattedValue(t);const n={label:i,helperLabel:l,elementId:e};if(this.type!=="bar"&&this.type!=="dot"&&this.type!=="nps"){n.label=`${i} (${a.toFixed(o)}%)`}return r("limel-tooltip",Object.assign({},n,{openDirection:this.orientation==="portrait"?"right":"top"}))}calculateRange(){var t;if(this.range){return this.range}const e=Math.min(0,...this.items.map(this.getMinimumValue));const r=Math.max(...this.items.map(this.getMaximumValue));const a=this.items.reduce(((t,e)=>t+this.getMaximumValue(e)),0);let i=(t=this.maxValue)!==null&&t!==void 0?t:r;if((this.type==="pie"||this.type==="doughnut")&&!this.maxValue){i=a}if(!this.axisIncrement){this.axisIncrement=this.calculateAxisIncrement(this.items)}const o=Math.ceil(i/this.axisIncrement)*this.axisIncrement;const l=Math.floor(e/this.axisIncrement)*this.axisIncrement;const n=o-l;return{minValue:l,maxValue:o,totalRange:n}}calculateAxisIncrement(t,e=n){const r=Math.max(...t.map((t=>{const e=t.value;if(Array.isArray(e)){return Math.max(...e)}return e})));const a=r/e;const i=10**Math.floor(Math.log10(a));return Math.ceil(a/i)*i}getMinimumValue(t){const e=t.value;return Array.isArray(e)?Math.min(...e):e}getMaximumValue(t){const e=t.value;return Array.isArray(e)?Math.max(...e):e}isRangeItem(t){return Array.isArray(t.value)}handleChange(){this.range=null;this.recalculateRangeData()}recalculateRangeData(){this.range=this.calculateRange()}getClickableItem(t){const e=t.dataset.index;if(e===undefined){return}const r=this.items[Number(e)];if(!r.clickable){return}return r}static get watchers(){return{items:["handleChange"],axisIncrement:["handleChange"],maxValue:["handleChange"]}}};h.style=o;export{h as limel_chart};
|
|
2
|
-
//# sourceMappingURL=p-84e00842.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["chartCss","PERCENT","DEFAULT_INCREMENT_SIZE","Chart","this","handleClick","event","item","getClickableItem","currentTarget","stopPropagation","interact","emit","handleKeyDown","key","preventDefault","componentWillLoad","recalculateRangeData","render","loading","h","limeBranded","style","items","length","toString","renderCaption","renderTableHeader","renderAxises","class","renderItems","accessibleLabel","scope","accessibleItemsLabel","translate","get","language","includes","type","minValue","maxValue","range","lines","adjustedMinRange","Math","floor","axisIncrement","adjustedMaxRange","ceil","value","push","role","label","_a","cumulativeOffset","map","index","itemId","createRandomString","sizeAndOffset","calculateSizeAndOffset","size","offset","getItemStyle","getItemClass","id","tabIndex","clickable","onClick","onKeyDown","getItemText","getFormattedValue","renderTooltip","color","nextItem","Array","isArray","getMaximumValue","isRangeItem","totalRange","startValue","getMinimumValue","normalizedStart","normalizedEnd","formattedValue","text","PERCENT_DECIMAL","tooltipProps","helperLabel","elementId","toFixed","Object","assign","openDirection","orientation","calculateRange","minRange","min","maxRange","max","totalSum","reduce","sum","finalMaxRange","calculateAxisIncrement","visualMaxValue","visualMinValue","steps","roughStep","magnitude","log10","handleChange","target","dataset","undefined","Number"],"sources":["./src/components/chart/chart.scss?tag=limel-chart&encapsulation=shadow","./src/components/chart/chart.tsx"],"sourcesContent":["@use '../../style/mixins';\n$min-item-size: 0.5rem;\n$default-item-color: var(--chart-item-color, rgb(var(--contrast-1100), 0.8));\n\n/**\n* @prop --chart-background-color: Defines the background color of the chart. Defaults to `transparent` for _most_ chart types.\n* @prop --chart-item-color: If no color is defined for chart items, this color will be use. Defaults to `rgb(var(--contrast-1100), 0.8)`.\n* @prop --chart-item-divider-color: Defines the color that visually separates items in some charts, such as `stacked-bar` chart items. Defaults to `rgb(var(--color-white), 0.6)`.\n* @prop --chart-axis-line-color: Defines color of the axis lines. Defaults to `--contrast-900`. Note that lines have opacity as well, and get opaque on hover.\n* @prop --chart-item-border-radius: Defines the roundness of corners of items in a chart. Defaults to different values depending on the chart type. Does not have any effect on `pie` and `doughnut` types.\n*/\n\n:host(limel-chart) {\n --chart-axis-line-color: var(\n --limel-chart-axis-line-color,\n rgb(var(--contrast-900))\n );\n box-sizing: border-box;\n isolation: isolate;\n\n display: flex;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n padding: var(--limel-chart-padding);\n}\n\ntable {\n // Since these are mainly \"resets\", no styles should be before them.\n all: unset;\n border-collapse: collapse;\n border-spacing: 0;\n empty-cells: show;\n\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n\n colgroup,\n thead,\n tbody,\n tr,\n th,\n td {\n all: unset;\n }\n\n caption,\n colgroup,\n thead,\n tfoot,\n th,\n td {\n @include mixins.visually-hidden;\n }\n}\n\n*,\n*:before,\n*:after {\n box-sizing: border-box;\n}\n\n.chart {\n position: relative;\n flex-grow: 1;\n width: 100%;\n height: 100%;\n min-height: 0;\n min-width: 0;\n\n &:has(.item:hover),\n &:has(.item:focus-visible) {\n .item {\n opacity: 0.4;\n }\n }\n}\n\n.item {\n @include mixins.visualize-keyboard-focus;\n transition:\n background-color 0.2s ease,\n box-shadow 0.2s ease,\n filter 0.2s ease,\n opacity 0.4s ease;\n cursor: help;\n\n &:focus-visible,\n &:hover {\n opacity: 1 !important;\n }\n\n &[role='button'] {\n cursor: pointer;\n }\n}\n\nlimel-spinner {\n margin: auto;\n}\n\n@mixin line(\n $direction: vertical,\n $color: rgb(var(--contrast-800), 0.4),\n $position: center\n) {\n @if $direction == vertical {\n background: linear-gradient(to bottom, $color 0%, $color 100%)\n $position/1px\n 100%\n no-repeat;\n } @else if $direction == horizontal {\n background: linear-gradient(to right, $color 0%, $color 100%)\n $position/100%\n 1px\n no-repeat;\n }\n}\n\n@import './partial-styles/_layout-for-charts-with-x-y-axises';\n@import './partial-styles/_layout-for-charts-with-circular-shape';\n@import './partial-styles/_bar-gantt-dot';\n@import './partial-styles/_area_line';\n@import './partial-styles/_pie-doughnut';\n@import './partial-styles/_ring';\n@import './partial-styles/_stacked-bar';\n@import './partial-styles/_nps';\n@import './partial-styles/_axises';\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport translate from '../../global/translations';\nimport { createRandomString } from '../../util/random-string';\nimport { ChartItem } from './chart.types';\n\nconst PERCENT = 100;\nconst DEFAULT_INCREMENT_SIZE = 10;\n\n/**\n * A chart is a graphical representation of data, in which\n * visual symbols such as such bars, dots, lines, or slices, represent\n * each data point, in comparison to others.\n *\n * @exampleComponent limel-example-chart-stacked-bar\n * @exampleComponent limel-example-chart-orientation\n * @exampleComponent limel-example-chart-max-value\n * @exampleComponent limel-example-chart-type-bar\n * @exampleComponent limel-example-chart-type-dot\n * @exampleComponent limel-example-chart-type-area\n * @exampleComponent limel-example-chart-type-line\n * @exampleComponent limel-example-chart-type-pie\n * @exampleComponent limel-example-chart-type-doughnut\n * @exampleComponent limel-example-chart-type-ring\n * @exampleComponent limel-example-chart-type-gantt\n * @exampleComponent limel-example-chart-type-nps\n * @exampleComponent limel-example-chart-multi-axis\n * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values\n * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values\n * @exampleComponent limel-example-chart-axis-increment\n * @exampleComponent limel-example-chart-clickable-items\n * @exampleComponent limel-example-chart-accessibility\n * @exampleComponent limel-example-chart-styling\n * @exampleComponent limel-example-chart-creative-styling\n * @beta\n */\n\n@Component({\n tag: 'limel-chart',\n shadow: true,\n styleUrl: 'chart.scss',\n})\nexport class Chart {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Helps users of assistive technologies to understand\n * the context of the chart, and what is being displayed.\n */\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /**\n * Helps users of assistive technologies to understand\n * what the items in the chart represent.\n */\n @Prop({ reflect: true })\n public accessibleItemsLabel?: string;\n\n /**\n * List of items in the chart,\n * each representing a data point.\n */\n @Prop()\n public items!: ChartItem[];\n\n /**\n * Defines how items are visualized in the chart.\n */\n @Prop({ reflect: true })\n public type?:\n | 'area'\n | 'bar'\n | 'doughnut'\n | 'line'\n | 'nps'\n | 'pie'\n | 'ring'\n | 'dot'\n | 'stacked-bar' = 'stacked-bar';\n\n /**\n * Defines whether the chart is intended to be displayed wide or tall.\n * Does not have any effect on chart types which generate circular forms.\n */\n @Prop({ reflect: true })\n public orientation?: 'landscape' | 'portrait' = 'landscape';\n\n /**\n * Specifies the range that items' values could be in.\n * This is used in calculation of the size of the items in the chart.\n * When not provided, the sum of all values in the items will be considered as the range.\n */\n @Prop({ reflect: true })\n public maxValue?: number;\n\n /**\n * Specifies the increment for the axis lines.\n */\n @Prop({ reflect: true })\n public axisIncrement?: number;\n\n /**\n * Indicates whether the chart is in a loading state.\n */\n @Prop({ reflect: true })\n public loading: boolean = false;\n\n private range: {\n minValue: number;\n maxValue: number;\n totalRange: number;\n };\n\n /**\n * Fired when a chart item with `clickable` set to `true` is clicked\n */\n @Event()\n public interact: EventEmitter<ChartItem>;\n\n public componentWillLoad() {\n this.recalculateRangeData();\n }\n\n public render() {\n if (this.loading) {\n return <limel-spinner limeBranded={false} />;\n }\n\n return (\n <table\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n style={{\n '--limel-chart-number-of-items':\n this.items.length.toString(),\n }}\n >\n {this.renderCaption()}\n {this.renderTableHeader()}\n {this.renderAxises()}\n <tbody class=\"chart\">{this.renderItems()}</tbody>\n </table>\n );\n }\n\n private renderCaption() {\n if (!this.accessibleLabel) {\n return;\n }\n\n return <caption>{this.accessibleLabel}</caption>;\n }\n\n private renderTableHeader() {\n return (\n <thead>\n <tr>\n <th scope=\"col\">{this.accessibleItemsLabel}</th>\n <th scope=\"col\">{translate.get('value', this.language)}</th>\n </tr>\n </thead>\n );\n }\n\n private renderAxises() {\n if (!['bar', 'dot', 'area', 'line'].includes(this.type)) {\n return;\n }\n\n const { minValue, maxValue } = this.range;\n const lines = [];\n const adjustedMinRange =\n Math.floor(minValue / this.axisIncrement) * this.axisIncrement;\n const adjustedMaxRange =\n Math.ceil(maxValue / this.axisIncrement) * this.axisIncrement;\n\n for (\n let value = adjustedMinRange;\n value <= adjustedMaxRange;\n value += this.axisIncrement\n ) {\n lines.push(\n <div\n class={{\n 'axis-line': true,\n 'zero-line': value === 0,\n }}\n role=\"presentation\"\n >\n <limel-badge label={value} />\n </div>\n );\n }\n\n return (\n <div class=\"axises\" role=\"presentation\">\n {lines}\n </div>\n );\n }\n\n private renderItems() {\n if (!this.items?.length) {\n return;\n }\n\n let cumulativeOffset = 0;\n\n return this.items.map((item, index) => {\n const itemId = createRandomString();\n const sizeAndOffset = this.calculateSizeAndOffset(item);\n const size = sizeAndOffset.size;\n let offset = sizeAndOffset.offset;\n\n if (this.type === 'pie' || this.type === 'doughnut') {\n offset = cumulativeOffset;\n cumulativeOffset += size;\n }\n\n return (\n <tr\n style={this.getItemStyle(item, index, size, offset)}\n class={this.getItemClass(item)}\n key={itemId}\n id={itemId}\n data-index={index}\n tabIndex={0}\n role={item.clickable ? 'button' : null}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <th>{this.getItemText(item)}</th>\n <td>{this.getFormattedValue(item)}</td>\n {this.renderTooltip(item, itemId, size)}\n </tr>\n );\n });\n }\n\n private getItemStyle(\n item: ChartItem,\n index: number,\n size: number,\n offset: number\n ): Record<string, string> {\n const style: Record<string, string> = {\n '--limel-chart-item-offset': `${offset}`,\n '--limel-chart-item-size': `${size}`,\n '--limel-chart-item-index': `${index}`,\n '--limel-chart-item-value': `${item.value}`,\n };\n\n if (item.color) {\n style['--limel-chart-item-color'] = item.color;\n }\n\n if (this.type === 'line' || this.type === 'area') {\n const nextItem = this.calculateSizeAndOffset(this.items[index + 1]);\n\n style['--limel-chart-next-item-size'] = `${nextItem.size}`;\n style['--limel-chart-next-item-offset'] = `${nextItem.offset}`;\n }\n\n return style;\n }\n\n private getItemClass(item: ChartItem) {\n return {\n item: true,\n 'has-start-value': Array.isArray(item.value),\n 'has-negative-value-only':\n this.getMaximumValue(item) < 0 && !this.isRangeItem(item),\n };\n }\n\n private calculateSizeAndOffset(item?: ChartItem) {\n const { minValue, totalRange } = this.range;\n if (!item) {\n return {\n size: 0,\n offset: 0,\n };\n }\n\n let startValue = 0;\n if (this.isRangeItem(item)) {\n startValue = this.getMinimumValue(item);\n }\n\n const normalizedStart =\n ((startValue - minValue) / totalRange) * PERCENT;\n const normalizedEnd =\n ((this.getMaximumValue(item) - minValue) / totalRange) * PERCENT;\n\n return {\n size: normalizedEnd - normalizedStart,\n offset: normalizedStart,\n };\n }\n\n private getFormattedValue(item: ChartItem): string {\n const { value, formattedValue } = item;\n\n if (formattedValue) {\n return formattedValue;\n }\n\n if (Array.isArray(value)) {\n return `${value[0]} — ${value[1]}`;\n }\n\n return `${value}`;\n }\n\n private getItemText(item: ChartItem): string {\n return item.text;\n }\n\n private renderTooltip(item: ChartItem, itemId: string, size: number) {\n const text = this.getItemText(item);\n const PERCENT_DECIMAL = 2;\n const formattedValue = this.getFormattedValue(item);\n\n const tooltipProps: any = {\n label: text,\n helperLabel: formattedValue,\n elementId: itemId,\n };\n\n if (this.type !== 'bar' && this.type !== 'dot' && this.type !== 'nps') {\n tooltipProps.label = `${text} (${size.toFixed(PERCENT_DECIMAL)}%)`;\n }\n\n return (\n <limel-tooltip\n {...tooltipProps}\n openDirection={\n this.orientation === 'portrait' ? 'right' : 'top'\n }\n />\n );\n }\n\n private calculateRange() {\n if (this.range) {\n return this.range;\n }\n\n const minRange = Math.min(0, ...this.items.map(this.getMinimumValue));\n const maxRange = Math.max(...this.items.map(this.getMaximumValue));\n const totalSum = this.items.reduce(\n (sum, item) => sum + this.getMaximumValue(item),\n 0\n );\n\n let finalMaxRange = this.maxValue ?? maxRange;\n if (\n (this.type === 'pie' || this.type === 'doughnut') &&\n !this.maxValue\n ) {\n finalMaxRange = totalSum;\n }\n\n if (!this.axisIncrement) {\n this.axisIncrement = this.calculateAxisIncrement(this.items);\n }\n\n const visualMaxValue =\n Math.ceil(finalMaxRange / this.axisIncrement) * this.axisIncrement;\n const visualMinValue =\n Math.floor(minRange / this.axisIncrement) * this.axisIncrement;\n const totalRange = visualMaxValue - visualMinValue;\n\n return {\n minValue: visualMinValue,\n maxValue: visualMaxValue,\n totalRange: totalRange,\n };\n }\n\n private calculateAxisIncrement(\n items: ChartItem[],\n steps: number = DEFAULT_INCREMENT_SIZE\n ) {\n const maxValue = Math.max(\n ...items.map((item) => {\n const value = item.value;\n if (Array.isArray(value)) {\n return Math.max(...value);\n }\n\n return value;\n })\n );\n\n const roughStep = maxValue / steps;\n\n const magnitude = 10 ** Math.floor(Math.log10(roughStep));\n\n return Math.ceil(roughStep / magnitude) * magnitude;\n }\n\n private getMinimumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.min(...value) : value;\n }\n\n private getMaximumValue(item: ChartItem): number {\n const value = item.value;\n\n return Array.isArray(value) ? Math.max(...value) : value;\n }\n\n private isRangeItem(item: ChartItem): item is ChartItem<[number, number]> {\n return Array.isArray(item.value);\n }\n\n @Watch('items')\n @Watch('axisIncrement')\n @Watch('maxValue')\n handleChange() {\n this.range = null;\n this.recalculateRangeData();\n }\n\n private recalculateRangeData() {\n this.range = this.calculateRange();\n }\n\n private getClickableItem(target: HTMLElement): ChartItem | undefined {\n const index = target.dataset.index;\n if (index === undefined) {\n return;\n }\n\n const item = this.items[Number(index)];\n if (!item.clickable) {\n return;\n }\n\n return item;\n }\n\n private readonly handleClick = (event: MouseEvent) => {\n const item = this.getClickableItem(event.currentTarget as HTMLElement);\n if (!item) {\n return;\n }\n\n event.stopPropagation();\n this.interact.emit(item);\n };\n\n private readonly handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'Enter' && event.key !== ' ') {\n return;\n }\n\n const item = this.getClickableItem(event.currentTarget as HTMLElement);\n if (!item) {\n return;\n }\n\n event.preventDefault();\n this.interact.emit(item);\n };\n}\n"],"mappings":"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"}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|