@martinomagnifico/tablechart 0.1.2 → 1.0.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 +37 -0
- package/dist/tablechart-core.d.ts +57 -0
- package/dist/tablechart-core.mjs +2 -2
- package/dist/tablechart-shared.mjs +700 -537
- package/dist/tablechart.css +1 -1
- package/dist/tablechart.d.ts +20 -0
- package/dist/tablechart.js +1 -1
- package/dist/tablechart.mjs +1 -1
- package/package.json +1 -1
package/dist/tablechart.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:root{--cssimported-tablechart:true}.tablechart{margin:var(--tablechart-margin,0);color:var(--tablechart-color,currentColor);font-size:var(--tablechart-font-size,1em);line-height:var(--tablechart-line-height,1.25)}:where([data-chart]){margin:var(--tablechart-margin,0);color:var(--tablechart-color,currentColor);font-size:var(--tablechart-font-size,1em);line-height:var(--tablechart-line-height,1.25)}.tablechart :where(figcaption){margin-bottom:var(--tablechart-caption-gap,.5em);text-align:var(--tablechart-caption-align,left)}:where([data-chart]) :where(figcaption){margin-bottom:var(--tablechart-caption-gap,.5em);text-align:var(--tablechart-caption-align,left)}.tablechart{position:relative}:where([data-chart]){position:relative}.tablechart :where(table){left:0;right:0;clip-path:inset(50%);margin:0;position:absolute;top:0}.tablechart :where(.chart-annotations){left:0;right:0;clip-path:inset(50%);margin:0;position:absolute;top:0}:where([data-chart]) :where(table){left:0;right:0;clip-path:inset(50%);margin:0;position:absolute;top:0}:where([data-chart]) :where(.chart-annotations){left:0;right:0;clip-path:inset(50%);margin:0;position:absolute;top:0}@media (scripting:none){.tablechart :where(table){clip-path:none;position:static}.tablechart :where(.chart-annotations){clip-path:none;position:static}:where([data-chart]) :where(table){clip-path:none;position:static}:where([data-chart]) :where(.chart-annotations){clip-path:none;position:static}}@media (scripting:enabled){.tablechart:where(:not([data-chart-empty]):not(:has(>.tablechart-plot))):after{content:"";aspect-ratio:1/var(--_room,.38);min-height:var(--tablechart-min-height,200px);padding-bottom:1.5em;display:block}:where([data-chart]):where(:not([data-chart-empty]):not(:has(>.tablechart-plot))):after{content:"";aspect-ratio:1/var(--_room,.38);min-height:var(--tablechart-min-height,200px);padding-bottom:1.5em;display:block}.tablechart :where(.tablechart-plot:not(.is-placed)){aspect-ratio:1/var(--_room,.38);min-height:var(--tablechart-min-height,200px);overflow:hidden}:where([data-chart]) :where(.tablechart-plot:not(.is-placed)){aspect-ratio:1/var(--_room,.38);min-height:var(--tablechart-min-height,200px);overflow:hidden}}:where([data-chart=donut]){--_room:.66}:where([data-chart=bar]){--_room:.5}.tablechart-plot{position:relative}.tablechart-plot :where(svg){width:100%;height:auto;display:block;overflow:visible}.tablechart-plot:not(.is-placed) :where(.tablechart-value,.tablechart-badge,.tablechart-name){visibility:hidden}.tablechart-sr{white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.tablechart-value{white-space:nowrap;font-size:var(--tablechart-value-size,calc(var(--tablechart-category-size,.95em) * 1.3));position:absolute;transform:translate(-50%,-100%)}.tablechart-value[data-place=outside]{color:var(--tablechart-value-color,currentColor)}.tablechart-value[data-place=inside]{color:var(--tablechart-bar-ink,oklch(from var(--tablechart-bar-color,currentColor) calc(.18 + .8 * clamp(0, (.68 - l) * 1000, 1)) 0 0));transform:translate(-50%,-50%)}.tablechart-value[data-place=around]{color:var(--tablechart-value-color,currentColor);transform:translate(-50%,-50%)}.tablechart-value[data-place=below]{color:var(--tablechart-value-color,currentColor);transform:translate(-50%)}.tablechart-value[data-place=middle]{color:var(--tablechart-value-color,currentColor);transform:translate(-50%,-50%)}.tablechart-value[data-place=after]{color:var(--tablechart-value-color,currentColor);transform:translateY(-50%)}.tablechart-value[data-place=none]{display:none}.tablechart-value[data-left-out]{visibility:hidden}.tablechart-value[data-active]{visibility:visible}.tablechart-value[data-place=inside][data-kind=up]{color:var(--tablechart-up-ink,oklch(from var(--tablechart-up-color,var(--tablechart-bar-color,currentColor)) calc(.18 + .8 * clamp(0, (.68 - l) * 1000, 1)) 0 0))}.tablechart-value[data-place=inside][data-kind=down]{color:var(--tablechart-down-ink,oklch(from var(--tablechart-down-color,var(--tablechart-bar-color,currentColor)) calc(.18 + .8 * clamp(0, (.68 - l) * 1000, 1)) 0 0))}.tablechart-value[data-place=inside][data-series]{color:var(--tablechart-piece-ink,oklch(from var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas))) calc(.18 + .8 * clamp(0, (.68 - l) * 1000, 1)) 0 0))}.tablechart-value[data-place=inside][data-kind=total]{color:var(--tablechart-total-ink,oklch(from var(--tablechart-total-color,var(--tablechart-bar-color,currentColor)) calc(.18 + .8 * clamp(0, (.68 - l) * 1000, 1)) 0 0))}.tablechart-name{white-space:nowrap;font-size:var(--tablechart-name-size,var(--tablechart-category-size,.95em));color:var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas)));position:absolute;transform:translateY(-50%)}.tablechart-legend{box-sizing:border-box;width:-moz-fit-content;width:fit-content;max-width:100%;padding:var(--tablechart-legend-padding,0);border:var(--tablechart-legend-border,none);border-radius:var(--tablechart-legend-radius,0);background:var(--tablechart-legend-surface,none);margin-inline-start:auto;margin-inline-end:auto;margin-top:var(--tablechart-legend-gap,.6em);font-size:var(--tablechart-name-size,var(--tablechart-category-size,.95em));flex-wrap:wrap;justify-content:center;gap:.3em 1.2em;display:flex}.tablechart-name[data-place=legend]{color:inherit;font-size:inherit;position:static;transform:none}.tablechart-name[data-place=legend]:before{content:"";vertical-align:-.05em;background:var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas)));width:1.6em;height:.8em;-webkit-mask-image:var(--_line), var(--_mark,none);mask-image:var(--_line), var(--_mark,none);margin-right:.4em;display:inline-block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.tablechart-name[data-place=legend]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H24'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-line=dashed]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H24' stroke-dasharray='4 2.5' stroke-linecap='butt'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-line=dotted]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H24' stroke-dasharray='0 3'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=circle]{--_mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='6' r='3.4' fill='white'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=circle][data-open]{--_mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='6' r='3.4'/%3E%3C/svg%3E");--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H8.6 M15.4 6H24'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=circle][data-open][data-line=dashed]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H8.6 M15.4 6H24' stroke-dasharray='4 2.5' stroke-linecap='butt'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=circle][data-open][data-line=dotted]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H8.6 M15.4 6H24' stroke-dasharray='0 3'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=square]{--_mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='6' stroke-linecap='butt' fill='white'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=square][data-open]{--_mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='6' stroke-linecap='butt'/%3E%3C/svg%3E");--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H9 M15 6H24'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=square][data-open][data-line=dashed]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H9 M15 6H24' stroke-dasharray='4 2.5' stroke-linecap='butt'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=square][data-open][data-line=dotted]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H9 M15 6H24' stroke-dasharray='0 3'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=diamond]{--_mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpolygon points='12,1.9 16.1,6 12,10.1 7.9,6' fill='white'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=diamond][data-open]{--_mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpolygon points='12,1.9 16.1,6 12,10.1 7.9,6'/%3E%3C/svg%3E");--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H7.9 M16.1 6H24'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=diamond][data-open][data-line=dashed]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H7.9 M16.1 6H24' stroke-dasharray='4 2.5' stroke-linecap='butt'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=diamond][data-open][data-line=dotted]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H7.9 M16.1 6H24' stroke-dasharray='0 3'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-swatch=box]:before{vertical-align:-.05em;background:var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas)));border-radius:.15em;width:.7em;height:.7em;-webkit-mask:none;mask:none}.tablechart-categories :where(span[data-kind=total]){display:none}.tablechart-categories :where(span[data-kind=slice]):before{content:"";width:var(--tablechart-key-size,.6em);height:var(--tablechart-key-size,.6em);background:var(--palette,color-mix(in oklab, var(--tablechart-slice-color,currentColor) max(var(--tablechart-slice-min,20%), calc(100% - var(--n) * var(--tablechart-slice-fade,15%))), var(--tablechart-surface,Canvas)));border-radius:50%;margin-right:.4em;display:inline-block}.tablechart-categories[data-place=key]{box-sizing:border-box;width:-moz-fit-content;width:fit-content;max-width:100%;padding:var(--tablechart-legend-padding,0);border:var(--tablechart-legend-border,none);border-radius:var(--tablechart-legend-radius,0);background:var(--tablechart-legend-surface,none);flex-wrap:wrap;justify-content:center;gap:.3em 1.2em;margin-inline-start:auto;margin-inline-end:auto;display:flex}.tablechart-categories[data-place=key] :where(span){white-space:nowrap;padding:0}.tablechart-categories[data-place=beside]{pointer-events:none;margin:0;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.tablechart-categories[data-place=beside] :where(span){text-align:right;width:max-content;max-width:var(--tablechart-name-max,40%);text-wrap:balance;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;padding:0;position:absolute;transform:translate(-100%,-50%)}.tablechart-categories{grid-template-columns:repeat(var(--tablechart-columns,1), minmax(0, 1fr));margin-top:var(--tablechart-categories-gap,.45em);display:grid}.tablechart-categories :where(span){text-align:center;padding:var(--tablechart-category-padding,0 .2em);font-size:calc(var(--tablechart-category-size,.95em) * var(--tablechart-name-fit,1));-webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal}.tablechart-bar{fill:var(--tablechart-bar-color,currentColor)}.tablechart-bar[data-kind=up]{fill:var(--tablechart-up-color,var(--tablechart-bar-color,currentColor))}.tablechart-bar[data-kind=down]{fill:var(--tablechart-down-color,var(--tablechart-bar-color,currentColor))}.tablechart-bar[data-kind=total]{fill:var(--tablechart-total-color,var(--tablechart-bar-color,currentColor))}.tablechart-bar[data-series],.tablechart-piece{fill:var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas)))}.tablechart-plot[data-grouped] :where(.tablechart-value){font-size:calc(var(--tablechart-group-value-size,.95em) * var(--tablechart-fit,1))}.tablechart-rule{stroke:var(--tablechart-rule-color,currentColor);stroke-width:var(--tablechart-rule-width,1px);opacity:var(--tablechart-rule-opacity,.45);vector-effect:non-scaling-stroke}.tablechart-connector{stroke:var(--tablechart-connector-color,currentColor);stroke-width:var(--tablechart-connector-width,1px);stroke-dasharray:var(--tablechart-connector-dash,2 3);opacity:var(--tablechart-connector-opacity,.55);fill:none;vector-effect:non-scaling-stroke}.tablechart-series{stroke:var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas)));stroke-width:var(--tablechart-series-width,2px);stroke-linecap:round;fill:none;vector-effect:non-scaling-stroke}.tablechart-area{fill:var(--tablechart-area-color,var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas))));opacity:var(--tablechart-area-opacity,.25)}.tablechart-area[data-muted]{opacity:calc(var(--tablechart-area-opacity,.25) / 2)}.tablechart-area[data-stacked]{opacity:var(--tablechart-area-opacity,.5)}.tablechart-area[data-stacked][data-muted]{opacity:calc(var(--tablechart-area-opacity,.5) / 2)}.tablechart-series[data-line=dashed]{stroke-dasharray:var(--tablechart-dash,6 4);stroke-dashoffset:var(--along,0)}.tablechart-series[data-line=dotted]{stroke-dasharray:var(--tablechart-dot,0 4);stroke-dashoffset:var(--along,0)}.tablechart-point{fill:var(--tablechart-point-color,var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas))))}.tablechart-point[data-open]{fill:none;stroke:var(--tablechart-point-color,var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas))));stroke-width:var(--tablechart-series-width,2px);vector-effect:non-scaling-stroke}.tablechart-slice{fill:none;stroke:var(--palette,color-mix(in oklab, var(--tablechart-slice-color,currentColor) max(var(--tablechart-slice-min,20%), calc(100% - var(--n) * var(--tablechart-slice-fade,15%))), var(--tablechart-surface,Canvas)))}.tablechart-divide{stroke:#000;stroke-width:var(--tablechart-slice-gap,4);fill:none}.tablechart-leader{stroke:var(--tablechart-leader-color,currentColor);stroke-width:var(--tablechart-leader-width,1px);opacity:var(--tablechart-leader-opacity,.45);fill:none;vector-effect:non-scaling-stroke}.tablechart-centre{white-space:nowrap;text-align:center;font-size:var(--tablechart-centre-size,1.6em);color:var(--tablechart-centre-color,currentColor);position:absolute;transform:translate(-50%,-50%)}.tablechart-break[data-part=edge]{fill:none;stroke:var(--tablechart-break-color,currentColor);stroke-width:var(--tablechart-break-width,1px);opacity:var(--tablechart-break-opacity,.55);vector-effect:non-scaling-stroke}.tablechart-line{stroke:var(--tablechart-annotation-color,currentColor);stroke-width:var(--tablechart-annotation-width,1.25px);fill:none;stroke-linecap:butt;stroke-linejoin:miter;vector-effect:non-scaling-stroke}.tablechart-head{fill:var(--tablechart-annotation-color,currentColor)}.tablechart-badge{background:var(--tablechart-badge-surface,none);color:var(--tablechart-annotation-color,currentColor);border:var(--tablechart-badge-border-width,1px) solid currentColor;border-radius:var(--tablechart-badge-radius,50%);padding:var(--tablechart-badge-padding,.5em 1.25em);white-space:nowrap;line-height:1;position:absolute;transform:translate(-50%,-50%)}.tablechart-badge :where(.tablechart-caption){color:var(--tablechart-color,currentColor);background:0 0;border:0;position:absolute;bottom:calc(100% + .45em);left:50%;transform:translate(-50%)}:where([data-animate]) :where(.tablechart-bar){transform-box:fill-box;transform-origin:bottom;transition:transform var(--tablechart-duration,.5s) var(--tablechart-easing,cubic-bezier(.26, .86, .44, .985));transition-delay:calc(var(--i) * var(--tablechart-stagger,.12s));transform:scaleY(0)}:where([data-animate]) :where(.tablechart-bar[data-grow=down]){transform-origin:top}:where([data-animate]) :where(.tablechart-bar[data-grow=right]){transform-origin:0;transform:scaleX(0)}:where([data-animate]) :where(.tablechart-series){stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset calc(var(--d,1) * var(--tablechart-stagger,.12s)) linear;transition-delay:calc(max(var(--i) - 1, 0) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-series[data-line]){clip-path:inset(-20px 100% -20px 0);transition:clip-path calc(var(--d,1) * var(--tablechart-stagger,.12s)) linear;transition-delay:calc(max(var(--i) - 1, 0) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-area-fill){opacity:0;transition:opacity calc(max(var(--rows) - 1, 1) * var(--tablechart-stagger,.12s)) linear;transition-delay:calc(max(var(--i) - 1, 0) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-point,.tablechart-hole){opacity:0;transition:opacity var(--tablechart-duration,.5s) ease;transition-delay:calc((var(--i) + .2) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-hole[data-for=badge]){transition:opacity .3s;transition-delay:calc(var(--after) * var(--tablechart-stagger,.12s) + .35s)}:where([data-animate]) :where(.tablechart-value,.tablechart-name){opacity:0;transition:opacity var(--tablechart-duration,.5s) ease;transition-delay:calc((var(--i) + .4) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-connector){stroke-opacity:0;transition:stroke-opacity var(--tablechart-duration,.5s) ease;transition-delay:max(0s, (var(--i) - .45) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-slice){stroke-dasharray:0 var(--circ);transition:stroke-dasharray var(--tablechart-duration,.5s) var(--tablechart-easing,cubic-bezier(.26, .86, .44, .985));transition-delay:calc(var(--i) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-centre){opacity:0;transition:opacity var(--tablechart-duration,.5s) ease;transition-delay:calc((var(--i,0) + .5) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-leader){stroke-opacity:0;transition:stroke-opacity var(--tablechart-duration,.5s) ease;transition-delay:calc((var(--i,0) + .5) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-break[data-part=edge]){stroke-opacity:0;transition:stroke-opacity .2s;transition-delay:calc((var(--after) + .9) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-line){stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset var(--tablechart-annotation-duration,.6s) var(--tablechart-easing,cubic-bezier(.26, .86, .44, .985));transition-delay:calc(var(--after) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-head){opacity:0;transition:opacity .2s;transition-delay:calc(var(--after) * var(--tablechart-stagger,.12s) + .55s)}:where([data-animate]) :where(.tablechart-badge){opacity:0;transition:opacity .3s;transition-delay:calc(var(--after) * var(--tablechart-stagger,.12s) + .35s)}:where([data-animate].is-shown) :where(.tablechart-bar){transform:scaleY(1)}:where([data-animate].is-shown) :where(.tablechart-bar[data-grow=right]){transform:scaleX(1)}:where([data-animate].is-shown) :where(.tablechart-series){stroke-dashoffset:0}:where([data-animate].is-shown) :where(.tablechart-series[data-line]){clip-path:inset(-20px)}:where([data-animate].is-shown) :where(.tablechart-point){opacity:1}:where([data-animate].is-shown) :where(.tablechart-hole){opacity:1}:where([data-animate].is-shown) :where(.tablechart-area-fill){opacity:1}:where([data-animate].is-shown) :where(.tablechart-value){opacity:1}:where([data-animate].is-shown) :where(.tablechart-name){opacity:1}:where([data-animate].is-shown) :where(.tablechart-head){opacity:1}:where([data-animate].is-shown) :where(.tablechart-badge){opacity:1}:where([data-animate].is-shown) :where(.tablechart-centre){opacity:1}:where([data-animate].is-shown) :where(.tablechart-leader){stroke-opacity:1}:where([data-animate].is-shown) :where(.tablechart-break[data-part=edge]){stroke-opacity:1}:where([data-animate].is-shown) :where(.tablechart-slice){stroke-dasharray:var(--arc) calc(var(--circ) - var(--arc))}:where([data-animate].is-shown) :where(.tablechart-connector){stroke-opacity:1}:where([data-animate].is-shown) :where(.tablechart-line){stroke-dashoffset:0}:where([data-animate=up]) :where(.tablechart-series,.tablechart-area){stroke-dasharray:none;clip-path:none;transform-box:view-box;transform-origin:0 var(--tablechart-base);transition:transform calc(var(--tablechart-duration,.5s) * 1.6) var(--tablechart-easing,cubic-bezier(.26, .86, .44, .985));transition-delay:0s;transform:scaleY(0)}:where([data-animate=up]) :where(.tablechart-area-fill){opacity:1;transition:none}:where([data-animate=up]) :where(.tablechart-point,.tablechart-hole:not([data-for])){opacity:0;transform:translateY(var(--rise,0));transition:transform calc(var(--tablechart-duration,.5s) * 1.6) var(--tablechart-easing,cubic-bezier(.26, .86, .44, .985)), opacity .15s ease;transition-delay:0s}:where([data-animate=up]) :where(.tablechart-value,.tablechart-name){transition-delay:calc(var(--tablechart-duration,.5s) * 1.6)}:where([data-animate=up].is-shown) :where(.tablechart-series,.tablechart-area){transform:scaleY(1)}:where([data-animate=up].is-shown) :where(.tablechart-point,.tablechart-hole:not([data-for])){opacity:1;transform:none}:where([data-animate]){transition:opacity var(--tablechart-queue-duration,.4s) ease}:where([data-animate].tablechart-queued){opacity:0}@media (prefers-reduced-motion:reduce){:where([data-animate]) :where(*){transition-duration:1ms!important;transition-delay:0s!important}}.tablechart-plot[data-active] .tablechart-value:not([data-active]){visibility:hidden}.tablechart-plot[data-pointed] .tablechart-value{transition-delay:0s}.tablechart-plot[data-hover]{cursor:default}.tablechart-plot[data-hover] :where(.tablechart-value){-webkit-user-select:none;user-select:none}.tablechart-pointer{background:var(--tablechart-pointer-color,color-mix(in oklab, currentColor 8%, transparent));pointer-events:none;display:none;position:absolute}.tablechart-plot[data-active]>.tablechart-pointer{display:block}
|
|
1
|
+
:root{--cssimported-tablechart:true}.tablechart{margin:var(--tablechart-margin,0);color:var(--tablechart-color,currentColor);font-size:var(--tablechart-font-size,1em);line-height:var(--tablechart-line-height,1.25)}:where([data-chart]){margin:var(--tablechart-margin,0);color:var(--tablechart-color,currentColor);font-size:var(--tablechart-font-size,1em);line-height:var(--tablechart-line-height,1.25)}.tablechart :where(figcaption){margin-bottom:var(--tablechart-caption-gap,.5em);text-align:var(--tablechart-caption-align,left)}:where([data-chart]) :where(figcaption){margin-bottom:var(--tablechart-caption-gap,.5em);text-align:var(--tablechart-caption-align,left)}.tablechart{position:relative}:where([data-chart]){position:relative}.tablechart :where(table){left:0;right:0;clip-path:inset(50%);margin:0;position:absolute;top:0}.tablechart :where(.chart-annotations){left:0;right:0;clip-path:inset(50%);margin:0;position:absolute;top:0}:where([data-chart]) :where(table){left:0;right:0;clip-path:inset(50%);margin:0;position:absolute;top:0}:where([data-chart]) :where(.chart-annotations){left:0;right:0;clip-path:inset(50%);margin:0;position:absolute;top:0}@media (scripting:none){.tablechart :where(table){clip-path:none;position:static}.tablechart :where(.chart-annotations){clip-path:none;position:static}:where([data-chart]) :where(table){clip-path:none;position:static}:where([data-chart]) :where(.chart-annotations){clip-path:none;position:static}}@media (scripting:enabled){.tablechart:where(:not([data-chart-empty]):not(:has(>.tablechart-plot))):after{content:"";height:0;padding-top:max(var(--tablechart-min-height,200px), var(--_room,.38) * 100%);padding-bottom:1.5em;display:block}:where([data-chart]):where(:not([data-chart-empty]):not(:has(>.tablechart-plot))):after{content:"";height:0;padding-top:max(var(--tablechart-min-height,200px), var(--_room,.38) * 100%);padding-bottom:1.5em;display:block}.tablechart :where(.tablechart-plot:not(.is-placed)){height:0;padding-top:max(var(--tablechart-min-height,200px), var(--_room,.38) * 100%);overflow:hidden}:where([data-chart]) :where(.tablechart-plot:not(.is-placed)){height:0;padding-top:max(var(--tablechart-min-height,200px), var(--_room,.38) * 100%);overflow:hidden}}:where([data-chart=donut]){--_room:.66}:where([data-chart=bar]){--_room:.5}.tablechart-plot{position:relative}.tablechart-plot :where(svg){width:100%;height:auto;display:block;overflow:visible}.tablechart-plot:not(.is-placed) :where(.tablechart-value,.tablechart-badge,.tablechart-name){visibility:hidden}.tablechart-sr{white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.tablechart-value{white-space:nowrap;font-size:var(--tablechart-value-size,calc(var(--tablechart-category-size,.95em) * 1.3));position:absolute;transform:translate(-50%,-100%)}.tablechart-value[data-place=outside]{color:var(--tablechart-value-color,currentColor)}.tablechart-value[data-place=outside] :where(.tablechart-minus){position:absolute;right:100%}.tablechart-value[data-place=inside]{color:var(--tablechart-bar-ink,oklch(from var(--tablechart-bar-color,currentColor) calc(.18 + .8 * clamp(0, (.68 - l) * 1000, 1)) 0 0));transform:translate(-50%,-50%)}.tablechart-value[data-place=around]{color:var(--tablechart-value-color,currentColor);transform:translate(-50%,-50%)}.tablechart-value[data-place=below]{color:var(--tablechart-value-color,currentColor);transform:translate(-50%)}.tablechart-value[data-place=middle]{color:var(--tablechart-value-color,currentColor);transform:translate(-50%,-50%)}.tablechart-value[data-place=after]{color:var(--tablechart-value-color,currentColor);transform:translateY(-50%)}.tablechart-value[data-place=none]{display:none}.tablechart-value[data-left-out]{visibility:hidden}.tablechart-value[data-active]{visibility:visible}.tablechart-value[data-place=inside][data-kind=up]{color:var(--tablechart-up-ink,oklch(from var(--tablechart-up-color,var(--tablechart-bar-color,currentColor)) calc(.18 + .8 * clamp(0, (.68 - l) * 1000, 1)) 0 0))}.tablechart-value[data-place=inside][data-kind=down]{color:var(--tablechart-down-ink,oklch(from var(--tablechart-down-color,var(--tablechart-bar-color,currentColor)) calc(.18 + .8 * clamp(0, (.68 - l) * 1000, 1)) 0 0))}.tablechart-value[data-place=inside][data-series]{color:var(--tablechart-piece-ink,oklch(from var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas))) calc(.18 + .8 * clamp(0, (.68 - l) * 1000, 1)) 0 0))}.tablechart-value[data-place=inside][data-kind=total]{color:var(--tablechart-total-ink,oklch(from var(--tablechart-total-color,var(--tablechart-bar-color,currentColor)) calc(.18 + .8 * clamp(0, (.68 - l) * 1000, 1)) 0 0))}.tablechart-name{white-space:nowrap;font-size:var(--tablechart-name-size,var(--tablechart-category-size,.95em));color:var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas)));position:absolute;transform:translateY(-50%)}.tablechart-legend{box-sizing:border-box;width:-moz-fit-content;width:fit-content;max-width:100%;padding:var(--tablechart-legend-padding,0);border:var(--tablechart-legend-border,none);border-radius:var(--tablechart-legend-radius,0);background:var(--tablechart-legend-surface,none);margin-inline-start:auto;margin-inline-end:auto;margin-top:var(--tablechart-legend-gap,.6em);font-size:var(--tablechart-name-size,var(--tablechart-category-size,.95em));flex-wrap:wrap;justify-content:center;gap:.3em 1.2em;display:flex}.tablechart-name[data-place=legend]{color:inherit;font-size:inherit;position:static;transform:none}.tablechart-name[data-place=legend]:before{content:"";vertical-align:-.05em;background:var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas)));width:1.6em;height:.8em;-webkit-mask-image:var(--_line), var(--_mark,none);mask-image:var(--_line), var(--_mark,none);margin-right:.4em;display:inline-block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.tablechart-name[data-place=legend]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H24'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-line=dashed]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H24' stroke-dasharray='4 2.5' stroke-linecap='butt'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-line=dotted]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H24' stroke-dasharray='0 3'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=circle]{--_mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='6' r='3.4' fill='white'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=circle][data-open]{--_mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='6' r='3.4'/%3E%3C/svg%3E");--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H8.6 M15.4 6H24'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=circle][data-open][data-line=dashed]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H8.6 M15.4 6H24' stroke-dasharray='4 2.5' stroke-linecap='butt'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=circle][data-open][data-line=dotted]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H8.6 M15.4 6H24' stroke-dasharray='0 3'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=square]{--_mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='6' stroke-linecap='butt' fill='white'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=square][data-open]{--_mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='6' stroke-linecap='butt'/%3E%3C/svg%3E");--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H9 M15 6H24'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=square][data-open][data-line=dashed]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H9 M15 6H24' stroke-dasharray='4 2.5' stroke-linecap='butt'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=square][data-open][data-line=dotted]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H9 M15 6H24' stroke-dasharray='0 3'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=diamond]{--_mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpolygon points='12,1.9 16.1,6 12,10.1 7.9,6' fill='white'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=diamond][data-open]{--_mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpolygon points='12,1.9 16.1,6 12,10.1 7.9,6'/%3E%3C/svg%3E");--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H7.9 M16.1 6H24'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=diamond][data-open][data-line=dashed]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H7.9 M16.1 6H24' stroke-dasharray='4 2.5' stroke-linecap='butt'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-marker=diamond][data-open][data-line=dotted]{--_line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 6H7.9 M16.1 6H24' stroke-dasharray='0 3'/%3E%3C/svg%3E")}.tablechart-name[data-place=legend][data-swatch=box]:before{vertical-align:-.05em;background:var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas)));border-radius:.15em;width:.7em;height:.7em;-webkit-mask:none;mask:none}.tablechart-categories :where(span[data-kind=total]){display:none}.tablechart-categories :where(span[data-kind=slice]):before{content:"";width:var(--tablechart-key-size,.6em);height:var(--tablechart-key-size,.6em);background:var(--palette,color-mix(in oklab, var(--tablechart-slice-color,currentColor) max(var(--tablechart-slice-min,20%), calc(100% - var(--n) * var(--tablechart-slice-fade,15%))), var(--tablechart-surface,Canvas)));border-radius:50%;margin-right:.4em;display:inline-block}.tablechart-categories[data-place=key]{box-sizing:border-box;width:-moz-fit-content;width:fit-content;max-width:100%;padding:var(--tablechart-legend-padding,0);border:var(--tablechart-legend-border,none);border-radius:var(--tablechart-legend-radius,0);background:var(--tablechart-legend-surface,none);flex-wrap:wrap;justify-content:center;gap:.3em 1.2em;margin-inline-start:auto;margin-inline-end:auto;display:flex}.tablechart-categories[data-place=key] :where(span){white-space:nowrap;padding:0}.tablechart-categories[data-place=beside]{pointer-events:none;margin:0;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.tablechart-categories[data-place=beside] :where(span){text-align:right;width:max-content;max-width:var(--tablechart-name-max,40%);text-wrap:balance;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;padding:0;position:absolute;transform:translate(-100%,-50%)}.tablechart-categories{grid-template-columns:repeat(var(--tablechart-columns,1), minmax(0, 1fr));margin-top:var(--tablechart-categories-gap,.45em);display:grid}.tablechart-categories :where(span){text-align:center;padding:var(--tablechart-category-padding,0 .2em);font-size:calc(var(--tablechart-category-size,.95em) * var(--tablechart-name-fit,1));-webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal}.tablechart-bar{fill:var(--tablechart-bar-color,currentColor)}.tablechart-bar[data-kind=up]{fill:var(--tablechart-up-color,var(--tablechart-bar-color,currentColor))}.tablechart-bar[data-kind=down]{fill:var(--tablechart-down-color,var(--tablechart-bar-color,currentColor))}.tablechart-bar[data-kind=total]{fill:var(--tablechart-total-color,var(--tablechart-bar-color,currentColor))}.tablechart-bar[data-series],.tablechart-piece{fill:var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas)))}.tablechart-plot[data-grouped] :where(.tablechart-value){font-size:calc(var(--tablechart-group-value-size,.95em) * var(--tablechart-fit,1))}.tablechart-rule{stroke:var(--tablechart-rule-color,currentColor);stroke-width:var(--tablechart-rule-width,1px);opacity:var(--tablechart-rule-opacity,.45);vector-effect:non-scaling-stroke}.tablechart-connector{stroke:var(--tablechart-connector-color,currentColor);stroke-width:var(--tablechart-connector-width,1px);stroke-dasharray:var(--tablechart-connector-dash,2 3);opacity:var(--tablechart-connector-opacity,.55);fill:none;vector-effect:non-scaling-stroke}.tablechart-series{stroke:var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas)));stroke-width:var(--tablechart-series-width,2px);stroke-linecap:round;fill:none;vector-effect:non-scaling-stroke}.tablechart-area{fill:var(--tablechart-area-color,var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas))));opacity:var(--tablechart-area-opacity,.25)}.tablechart-area[data-muted]{opacity:calc(var(--tablechart-area-opacity,.25) / 2)}.tablechart-area[data-stacked]{opacity:var(--tablechart-area-opacity,.5)}.tablechart-area[data-stacked][data-muted]{opacity:calc(var(--tablechart-area-opacity,.5) / 2)}.tablechart-series[data-line=dashed]{stroke-dasharray:var(--tablechart-dash,6 4)}.tablechart-series[data-line=dotted]{stroke-dasharray:var(--tablechart-dot,0 4)}.tablechart-point{fill:var(--tablechart-point-color,var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas))))}.tablechart-point[data-open]{fill:none;stroke:var(--tablechart-point-color,var(--tablechart-series-ink,color-mix(in oklab, var(--palette,color-mix(in oklab, var(--tablechart-series-color,var(--tablechart-bar-color,currentColor)) max(var(--tablechart-series-min,40%), calc((100% - var(--n,0) * min(var(--tablechart-series-fade,30%), calc((100% - var(--tablechart-series-min,40%)) / max(var(--tablechart-series-count,2) - 1, 1)))) * (1 - var(--m,0)) + var(--m,0) * 100%)), var(--tablechart-surface,Canvas))) calc(100% - var(--m,0) * (100% - var(--tablechart-muted-share,45%))), var(--tablechart-surface,Canvas))));stroke-width:var(--tablechart-series-width,2px);vector-effect:non-scaling-stroke}.tablechart-slice{fill:none;stroke:var(--palette,color-mix(in oklab, var(--tablechart-slice-color,currentColor) max(var(--tablechart-slice-min,20%), calc(100% - var(--n) * var(--tablechart-slice-fade,15%))), var(--tablechart-surface,Canvas)))}.tablechart-divide{stroke:#000;stroke-width:var(--tablechart-slice-gap,4);fill:none}.tablechart-leader{stroke:var(--tablechart-leader-color,currentColor);stroke-width:var(--tablechart-leader-width,1px);opacity:var(--tablechart-leader-opacity,.45);fill:none;vector-effect:non-scaling-stroke}.tablechart-centre{white-space:nowrap;text-align:center;font-size:var(--tablechart-centre-size,1.6em);color:var(--tablechart-centre-color,currentColor);position:absolute;transform:translate(-50%,-50%)}.tablechart-break[data-part=edge]{fill:none;stroke:var(--tablechart-break-color,currentColor);stroke-width:var(--tablechart-break-width,1px);opacity:var(--tablechart-break-opacity,1);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.tablechart-line{stroke:var(--tablechart-annotation-color,currentColor);stroke-width:var(--tablechart-annotation-width,1.25px);fill:none;stroke-linecap:butt;stroke-linejoin:miter;vector-effect:non-scaling-stroke}.tablechart-head{fill:var(--tablechart-annotation-color,currentColor)}.tablechart-badge{background:var(--tablechart-badge-surface,none);color:var(--tablechart-annotation-color,currentColor);border:var(--tablechart-badge-border-width,1px) solid currentColor;border-radius:var(--tablechart-badge-radius,50%);padding:var(--tablechart-badge-padding,.5em 1.25em);white-space:nowrap;line-height:1;position:absolute;transform:translate(-50%,-50%)}.tablechart-badge :where(.tablechart-caption){color:var(--tablechart-color,currentColor);background:0 0;border:0;position:absolute;bottom:calc(100% + .45em);left:50%;transform:translate(-50%)}:where([data-animate]) :where(.tablechart-bar){transform-box:fill-box;transform-origin:bottom;transition:transform var(--tablechart-duration,.5s) var(--tablechart-easing,cubic-bezier(.26, .86, .44, .985));transition-delay:calc(var(--i) * var(--tablechart-stagger,.12s));transform:scaleY(0)}:where([data-animate]) :where(.tablechart-bar[data-grow=down]){transform-origin:top}:where([data-animate]) :where(.tablechart-bar[data-grow=right]){transform-origin:0;transform:scaleX(0)}:where([data-animate]) :where(.tablechart-series){clip-path:inset(-10px calc(100% + 10px) -10px -10px);transition:clip-path calc(var(--d,1) * var(--tablechart-stagger,.12s)) linear;transition-delay:calc(max(var(--i) - 1, 0) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-area-fill){opacity:0;transition:opacity calc(max(var(--rows) - 1, 1) * var(--tablechart-stagger,.12s)) linear;transition-delay:calc(max(var(--i) - 1, 0) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-point,.tablechart-hole){opacity:0;transition:opacity var(--tablechart-duration,.5s) ease;transition-delay:calc((var(--i) + .2) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-hole[data-for=badge]){transition:opacity .3s;transition-delay:calc(var(--after) * var(--tablechart-stagger,.12s) + .35s)}:where([data-animate]) :where(.tablechart-value,.tablechart-name){opacity:0;transition:opacity var(--tablechart-duration,.5s) ease;transition-delay:calc((var(--i) + .4) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-connector){clip-path:inset(-10px calc(100% + 10px) -10px -10px);transition:clip-path calc(2 * var(--tablechart-stagger,.12s)) ease-out;transition-delay:max(0s, (var(--i) - .6) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-slice){stroke-dasharray:0 var(--circ);transition:stroke-dasharray var(--tablechart-duration,.5s) var(--tablechart-easing,cubic-bezier(.26, .86, .44, .985));transition-delay:calc(var(--i) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-centre){opacity:0;transition:opacity var(--tablechart-duration,.5s) ease;transition-delay:calc((var(--i,0) + .5) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-leader){stroke-opacity:0;transition:stroke-opacity var(--tablechart-duration,.5s) ease;transition-delay:calc((var(--i,0) + .5) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-break[data-part=edge]){stroke-opacity:0;transition:stroke-opacity .2s;transition-delay:calc((var(--after) + .9) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-line){stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset var(--tablechart-annotation-duration,.6s) var(--tablechart-easing,cubic-bezier(.26, .86, .44, .985));transition-delay:calc(var(--after) * var(--tablechart-stagger,.12s))}:where([data-animate]) :where(.tablechart-head){opacity:0;transition:opacity .2s;transition-delay:calc(var(--after) * var(--tablechart-stagger,.12s) + .55s)}:where([data-animate]) :where(.tablechart-badge){opacity:0;transition:opacity .3s;transition-delay:calc(var(--after) * var(--tablechart-stagger,.12s) + .35s)}:where([data-animate].is-shown) :where(.tablechart-bar){transform:scaleY(1)}:where([data-animate].is-shown) :where(.tablechart-bar[data-grow=right]){transform:scaleX(1)}:where([data-animate].is-shown) :where(.tablechart-series){clip-path:inset(-10px)}:where([data-animate].is-shown) :where(.tablechart-point){opacity:1}:where([data-animate].is-shown) :where(.tablechart-hole){opacity:1}:where([data-animate].is-shown) :where(.tablechart-area-fill){opacity:1}:where([data-animate].is-shown) :where(.tablechart-value){opacity:1}:where([data-animate].is-shown) :where(.tablechart-name){opacity:1}:where([data-animate].is-shown) :where(.tablechart-head){opacity:1}:where([data-animate].is-shown) :where(.tablechart-badge){opacity:1}:where([data-animate].is-shown) :where(.tablechart-centre){opacity:1}:where([data-animate].is-shown) :where(.tablechart-leader){stroke-opacity:1}:where([data-animate].is-shown) :where(.tablechart-break[data-part=edge]){stroke-opacity:1}:where([data-animate].is-shown) :where(.tablechart-slice){stroke-dasharray:var(--arc) calc(var(--circ) - var(--arc))}:where([data-animate].is-shown) :where(.tablechart-connector){clip-path:inset(-10px)}:where([data-animate].is-shown) :where(.tablechart-line){stroke-dashoffset:0}:where([data-animate=up]) :where(.tablechart-series,.tablechart-area){clip-path:none;transform-box:view-box;transform-origin:0 var(--tablechart-base);transition:transform calc(var(--tablechart-duration,.5s) * 1.6) var(--tablechart-easing,cubic-bezier(.26, .86, .44, .985));transition-delay:0s;transform:scaleY(0)}:where([data-animate=up]) :where(.tablechart-area-fill){opacity:1;transition:none}:where([data-animate=up]) :where(.tablechart-point,.tablechart-hole:not([data-for])){opacity:0;transform:translateY(var(--rise,0));transition:transform calc(var(--tablechart-duration,.5s) * 1.6) var(--tablechart-easing,cubic-bezier(.26, .86, .44, .985)), opacity .15s ease;transition-delay:0s}:where([data-animate=up]) :where(.tablechart-value,.tablechart-name){transition-delay:calc(var(--tablechart-duration,.5s) * 1.6)}:where([data-animate=up].is-shown) :where(.tablechart-series,.tablechart-area){transform:scaleY(1)}:where([data-animate=up].is-shown) :where(.tablechart-point,.tablechart-hole:not([data-for])){opacity:1;transform:none}:where([data-animate]){transition:opacity var(--tablechart-queue-duration,.4s) ease}:where([data-animate].tablechart-queued){opacity:0}@media (prefers-reduced-motion:reduce){:where([data-animate]) :where(*){transition-duration:1ms!important;transition-delay:0s!important}}:where([data-animate][data-steps]) :where(.tablechart-series){clip-path:inset(-10px calc(100% + 10px) -10px -10px);transition:clip-path var(--tablechart-duration,.5s) ease}:where([data-animate][data-steps]) :where(.tablechart-area-fill>*){clip-path:inset(-10px calc(100% + 10px) -10px -10px);transition:clip-path var(--tablechart-duration,.5s) ease}:where([data-animate][data-steps]) :where(.tablechart-area-fill){opacity:1;transition:none}:where([data-animate][data-steps].is-shown) :where(.tablechart-bar){transform:scaleY(clamp(0, var(--tablechart-step,0) - var(--step,-1), 1))}:where([data-animate][data-steps].is-shown) :where(.tablechart-bar[data-grow=right]){transform:scaleX(clamp(0, var(--tablechart-step,0) - var(--step,-1), 1))}:where([data-animate][data-steps].is-shown) :where(.tablechart-value){opacity:clamp(0, var(--tablechart-step,0) - var(--step,-1), 1)}:where([data-animate][data-steps].is-shown) :where(.tablechart-name){opacity:clamp(0, var(--tablechart-step,0) - var(--step,-1), 1)}:where([data-animate][data-steps].is-shown) :where(.tablechart-head){opacity:clamp(0, var(--tablechart-step,0) - var(--step,-1), 1)}:where([data-animate][data-steps].is-shown) :where(.tablechart-badge){opacity:clamp(0, var(--tablechart-step,0) - var(--step,-1), 1)}:where([data-animate][data-steps].is-shown) :where(.tablechart-centre){opacity:clamp(0, var(--tablechart-step,0) - var(--step,-1), 1)}:where([data-animate][data-steps].is-shown) :where(.tablechart-point){opacity:clamp(0, var(--tablechart-step,0) - var(--step,-1), 1)}:where([data-animate][data-steps].is-shown) :where(.tablechart-hole){opacity:clamp(0, var(--tablechart-step,0) - var(--step,-1), 1)}:where([data-animate][data-steps].is-shown) :where(.tablechart-leader){stroke-opacity:clamp(0, var(--tablechart-step,0) - var(--step,-1), 1)}:where([data-animate][data-steps].is-shown) :where(.tablechart-break[data-part=edge]){stroke-opacity:clamp(0, var(--tablechart-step,0) - var(--step,-1), 1)}:where([data-animate][data-steps].is-shown) :where(.tablechart-line){stroke-dashoffset:calc(var(--len) * (1 - clamp(0, var(--tablechart-step,0) - var(--step,-1), 1)))}:where([data-animate][data-steps].is-shown) :where(.tablechart-connector){clip-path:inset(-10px calc((1 - clamp(0, var(--tablechart-step,0) - var(--step,-1), 1)) * (100% + 20px) - 10px) -10px -10px)}:where([data-animate][data-steps].is-shown) :where(.tablechart-series){clip-path:inset(-10px calc((1 - var(--reveal,0)) * (100% + 20px) - 10px) -10px -10px)}:where([data-animate][data-steps].is-shown) :where(.tablechart-area-fill>*){clip-path:inset(-10px calc((1 - var(--reveal,0)) * (100% + 20px) - 10px) -10px -10px)}:where([data-animate][data-steps].is-shown) :where(.tablechart-slice){stroke-dasharray:calc(var(--arc) * clamp(0, var(--tablechart-step,0) - var(--step,-1), 1)) calc(var(--circ) - var(--arc) * clamp(0, var(--tablechart-step,0) - var(--step,-1), 1))}:where(.tablechart-controls){justify-content:var(--tablechart-controls-justify,space-between);margin-top:var(--tablechart-controls-gap,.75em);align-items:center;gap:.5em;display:flex}:where(.tablechart-controls) :where(button){padding:var(--tablechart-control-padding,.3em .7em);border:var(--tablechart-control-border,1px solid color-mix(in oklab, currentColor 30%, transparent));border-radius:var(--tablechart-control-radius,.4em);background:var(--tablechart-control-surface,none);color:inherit;font:inherit;cursor:pointer;align-items:center;gap:.35em;display:inline-flex}:where(.tablechart-controls) :where(button:disabled){opacity:.35;cursor:default}:where(.tablechart-controls) :where(.tablechart-control-icon svg){fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:.8em;height:.8em;display:block}@media print{:where([data-steps]){--tablechart-step:999!important}:where([data-steps] [data-from]){--reveal:1!important}:where(.tablechart-controls){display:none}}.tablechart-plot[data-active] .tablechart-value:not([data-active]){visibility:hidden}.tablechart-plot[data-pointed] .tablechart-value{transition-delay:0s}.tablechart-plot[data-hover]{cursor:default}.tablechart-plot[data-hover] :where(.tablechart-value){-webkit-user-select:none;user-select:none}.tablechart-pointer{background:var(--tablechart-pointer-color,color-mix(in oklab, currentColor 8%, transparent));pointer-events:none;display:none;position:absolute}.tablechart-plot[data-active]>.tablechart-pointer{display:block}
|
|
2
2
|
/*$vite$:1*/
|
package/dist/tablechart.d.ts
CHANGED
|
@@ -12,6 +12,16 @@ export declare interface TablechartChart {
|
|
|
12
12
|
refresh(): void;
|
|
13
13
|
/** Stops watching scroll, size and language. The chart stays as it is. */
|
|
14
14
|
destroy(): void;
|
|
15
|
+
/** On a chart that steps (`data-fragment`): shows one step more. */
|
|
16
|
+
next(): void;
|
|
17
|
+
/** On a chart that steps: shows one step less. */
|
|
18
|
+
previous(): void;
|
|
19
|
+
/** On a chart that steps: shows the chart up to `step`, from 0 to `steps`. */
|
|
20
|
+
stepTo(step: number): void;
|
|
21
|
+
/** How many steps are shown. */
|
|
22
|
+
readonly step: number;
|
|
23
|
+
/** How many steps the chart has; 0 for a chart that does not step. */
|
|
24
|
+
readonly steps: number;
|
|
15
25
|
}
|
|
16
26
|
|
|
17
27
|
export declare interface TablechartConfig {
|
|
@@ -33,12 +43,22 @@ export declare interface TablechartConfig {
|
|
|
33
43
|
labels: "outside" | "inside";
|
|
34
44
|
/** How a line or area runs between points: `straight`, `step` or `smooth`. A figure overrides it with `data-chart-shape`. */
|
|
35
45
|
shape: "straight" | "step" | "smooth";
|
|
46
|
+
/** How the closing total of a waterfall grows: `down` from the step before it to the baseline, or `up` from the baseline. A figure overrides it with `data-chart-closing`. */
|
|
47
|
+
closing: "down" | "up";
|
|
36
48
|
/** Names of several lines in a legend instead of at the end of each line. A figure overrides it with `data-chart-legend`. */
|
|
37
49
|
legend: boolean;
|
|
38
50
|
/** Pointing at a row shows numbers that were left out for lack of room. A figure turns it off with `data-chart-hover="false"`. */
|
|
39
51
|
hover: boolean;
|
|
40
52
|
/** The name of the total that a donut without a total row works out, for screen readers. */
|
|
41
53
|
totallabel: string;
|
|
54
|
+
/** Previous and Next buttons under a chart that steps (`data-fragment`). `false` leaves them out, for buttons of your own. */
|
|
55
|
+
controls: boolean;
|
|
56
|
+
/** The text of the Previous button. */
|
|
57
|
+
previouslabel: string;
|
|
58
|
+
/** The text of the Next button. */
|
|
59
|
+
nextlabel: string;
|
|
60
|
+
/** Read by screen readers after the text of each button, so they know it only changes the chart. */
|
|
61
|
+
stephint: string;
|
|
42
62
|
/** How much of a chart must be in view before it builds, from 0 to 1. */
|
|
43
63
|
threshold: number;
|
|
44
64
|
/** Build again each time a chart scrolls back into view, not only the first time. */
|
package/dist/tablechart.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(){var t="tablechart",e="tablechart-value",n="tablechart-bar",a="tablechart-rule",o="tablechart-line",r="tablechart-head",s="tablechart-slice",c="tablechart-legend",i="tablechart-hole",l="tablechart-break",u=1e3,d={selector:"[data-chart]",aspect:.38,barfill:.58,ringfill:.42,animate:!0,entrance:.5,labels:"outside",shape:"straight",legend:!1,hover:!0,totallabel:"Total",threshold:.5,replay:!1,langattribute:"data-i18n"},h=(t,e)=>`${t}:${e}`,f=(t,e={})=>{const n=document.createElementNS("http://www.w3.org/2000/svg",t);for(const a in e)n.setAttribute(a,String(e[a]));return n},b=(t,e)=>[t,...e.classes].join(" "),m=(t,e)=>{const n=document.createElement("span");return n.className=t,n.inert=!0,e.appendChild(n),n},g=(t,e,n,a,o)=>{t.style.left=e/a*100+"%",t.style.top=n/o*100+"%"},$=0,y=(t,e,n,a)=>{if(!e.length)return;const o="tablechart-cut-"+ ++$,r=f("mask",{id:o,maskUnits:"userSpaceOnUse"});r.appendChild(f("rect",{x:-n,y:-a,width:3*n,height:3*a,fill:"white"}));for(const i of e)i.setAttribute("fill","black"),r.appendChild(i);let s=t.querySelector(":scope > defs");s||(s=f("defs"),t.prepend(s)),s.appendChild(r);const c=f("g",{mask:`url(#${o})`});for(const i of Array.from(t.childNodes))i!==s&&c.appendChild(i);t.appendChild(c)},w=0,p={create:()=>null,draw(t,e,n){const{segments:a,cx:o,y:r,barWidth:s,svg:c,breakAt:i}=n;if(null===i)return;const u=r(i),d=s+.09*s*2,b="zigzag"===t.getAttribute("data-mark"),m=.3*d,g=(t,e)=>{const n=t-d/2;if(!b)return[[n,e+m/2],[n+d,e-m/2]];const a=d/6,o=[[n,e]];for(let r=0;r<6;r++)o.push([n+a*(r+1),e+(r%2==0?-3.38:3.38)]);return o},$=(t,e=!1)=>t.map(([t,e],n)=>`${0===n?"M":"L"} ${t.toFixed(1)} ${e.toFixed(1)}`).join(" ")+(e?" Z":""),y="tablechart-break-"+ ++w,p=f("mask",{id:y,maskUnits:"userSpaceOnUse"});p.appendChild(f("rect",{x:-1e3,y:-n.height,width:3e3,height:3*n.height,fill:"white"}));const M=[];for(const[w,A]of a.entries()){if(Math.min(A.from,A.to)>=i||Math.max(A.from,A.to)<=i)continue;const t=o(w),e=g(t,u-13),a=g(t,u);p.appendChild(f("path",{d:$([...e,...a.slice().reverse()],!0),fill:"black"})),M.push(e,a);const r=h("--after",A.slot);for(const o of[e,a])c.appendChild(f("path",{class:l,"data-part":"edge","data-note":n.note,d:$(o),style:r}))}if(!M.length)return;const v=Array.from(c.querySelectorAll(`.${l}`)),k=f("g",{mask:`url(#${y})`});for(const l of Array.from(c.childNodes))v.includes(l)||k.appendChild(l);const x=f("defs");x.appendChild(p),c.prepend(x,k)}},M=t=>{let e=Number.NEGATIVE_INFINITY;for(const n of t)e=Math.max(e,n);return e},v=t=>(t.split(/[.,]/)[1]||"").length,k=(t,e,n)=>new Intl.NumberFormat(n||document.documentElement.lang||void 0,{minimumFractionDigits:e,maximumFractionDigits:e}).format(t),x=(t,e)=>{const n=document.createElement("span");if(n.className="tablechart-badge",n.inert=!0,t.childElementCount>0)for(const a of Array.from(t.children))n.appendChild(a.cloneNode(!0));else{n.textContent=(t.textContent||"").trim();const e=t.getAttribute("data-i18n");e&&n.setAttribute("data-i18n",e)}return e.appendChild(n),n},A=(e,n,a,o)=>{const r=(s=e?.textContent||"",Number.parseFloat((s.match(/-?[\d.,]+/)||["NaN"])[0].replace(",",".")));var s;const c=!!Number.isNaN(r)||Math.abs(n-r)<=.5,i={label:a,computed:n,stated:r,agrees:c};o.checks.push(i),c||console.warn(`[${t}] An annotation reads ${r}%, but ${a} is ${n.toFixed(1)}%. The chart shows what you wrote; this is only a check.`)},N={create:x,draw(e,n,a){const{rows:s,cx:c,y:i,unit:l,labelHeight:d,badgeHeight:b,height:m,svg:$,after:y}=a,[w,p]=((t,e)=>{const n=(e,n)=>{const a=Number.parseInt(t.getAttribute(e)??"",10);return Number.isFinite(a)?a-1:n};return[n("data-from",0),n("data-to",e-1)]})(e,s.length),M=s[w],v=s[p];if(!M||!v)return void console.warn(`[${t}] A bracket points at a row that is not there (row ${w+1} to ${p+1}, of ${s.length}).`);const k=7*l,x=4*l,N=c(w),S=c(p),H=Math.min(i(M.value),i(v.value))-d-x-.9*b,L=t=>i(t)-d-x,T=`M ${N} ${L(M.value)} L ${N} ${H} L ${S} ${H} L ${S} ${L(v.value)-k}`,z=(L(M.value)-H+Math.abs(S-N)+(L(v.value)-k-H))/l+1;$.appendChild(f("path",{class:o,"data-note":a.note,d:T,style:`--len:${z.toFixed(1)}; ${h("--after",y)}`}));const O=L(v.value);var C;$.appendChild(f("polygon",{class:r,"data-note":a.note,points:`${S},${O} ${S-.45*k},${O-k} ${S+.45*k},${O-k}`,style:h("--after",y)})),n&&(g(n,(N+S)/2,H,u,m),n.style.setProperty("--after",String(y))),A(n,(C=M.value,(v.value-C)/Math.abs(C)*100),`${M.value} to ${v.value}`,a)}},S=new WeakMap,H=t=>S.get(t)??{width:t.offsetWidth,height:t.offsetHeight},L={create:x,draw(t,e,n){const{rows:a,cx:s,y:c,unit:i,labelHeight:l,height:d,svg:b,values:m,after:$}=n,y=a[0],w=a[a.length-1];if(!y||!w)return;const p=l+18*i,M=10*i,v=10*i;let k=s(0),x=c(y.value)-p,N=s(a.length-1),S=c(w.value)-p,L=0;a.forEach((t,e)=>{const n=N===k?0:(s(e)-k)/(N-k),a=x+n*(S-x)-(c(t.value)-p);a>L&&(L=a)}),x-=L,S-=L;const T=N-k,z=S-x,O=Math.hypot(T,z)||1,C=T/O,U=z/O;k-=C*M,x-=U*M,N+=C*M,S+=U*M;const B=Number.parseFloat(t.getAttribute("data-at")||"0.5");if(e){const t=k+(N-k)*B,n=x+(S-x)*B,o=H(e).width*i/2,r=n+H(e).height*i/2+8*i;let u=0;a.forEach((e,n)=>{const a=(m[n]?H(m[n]).width:0)*i/2;if(Math.abs(s(n)-t)>=o+a)return;const d=c(e.value)-7*i-l;u=Math.max(u,r-d)}),x-=u,S-=u}const F=N-C*v,E=S-U*v,P=Math.hypot(F-k,E-x)/i+1;b.appendChild(f("line",{class:o,"data-note":n.note,x1:k,y1:x,x2:F,y2:E,style:`--len:${P.toFixed(1)}; ${h("--after",$)}`}));const q=-U,I=C,W=.42*v;b.appendChild(f("polygon",{class:r,"data-note":n.note,points:[`${N},${S}`,`${F+q*W},${E+I*W}`,`${F-q*W},${E-I*W}`].join(" "),style:h("--after",$)})),e&&(g(e,k+(N-k)*B,x+(S-x)*B,u,d),e.style.setProperty("--after",String($)));const j=Number.parseFloat(t.getAttribute("data-years")||"");!Number.isNaN(j)&&j>0&&A(e,((t,e,n)=>100*(Math.pow(e/t,1/n)-1))(y.value,w.value,j),`${y.value} to ${w.value} over ${j} years`,n)}},T=(t,e,n)=>{const a=.15,o=Math.min(.7*t/(e+(e-1)*a),n),r=e*o+(e-1)*o*a;return{size:o,gap:o*a,offset:t=>-r/2+t*o*1.15}},z=(t,e,n)=>{const a=t.series[n],o=t.series.some(t=>t.focus)&&!a.focus;return{"data-series":n+1,...o&&{"data-muted":""},style:`--n:${n}; --m:${o?1:0}; --palette:var(--tablechart-color-${n+1}); ${h("--i",e.slot)}`}},O=(t,e)=>{let n=0;return Array.from({length:e},(e,a)=>{const o=t.cells[a]??t.cells[0],r=n;return!o.missing&&o.value>0&&(n+=o.value),{from:r,to:n,cell:o}})},C=(t,e)=>O(t,e).at(-1)?.to??0,U=(t,e,n)=>{const a=e.series.some(t=>t.focus);t.style.setProperty("--n",String(n)),t.style.setProperty("--m",a&&!e.series[n].focus?"1":"0"),t.style.setProperty("--palette",`var(--tablechart-color-${n+1})`)},B=(t,e,a,o={})=>{const r=f("g",{class:b(n,e),"data-kind":"bar","data-row":a+1,...o,"data-stack":"",style:h("--i",e.slot)});return t.svg.appendChild(r),(n,a)=>{r.appendChild(f("rect",{...a,class:b("tablechart-piece",e),...z(t,e,n)}))}},F=(t,e,n)=>t.some(t=>H(t).width*n>e-6*n),E=(t,e,n)=>e>=H(t).height*n*1.6,P=(t,e,n)=>e>=H(t).width*n*1.5,q=(t,e,n,a,o=.7)=>{t.style.setProperty(a,"1");let r=1;for(const c of e){const{size:t,room:e}=n(c);t>e&&(r=Math.min(r,e/t))}const s=r>=o?r:0;return t.style.setProperty(a,String(s||o)),s},I={segments:t=>t.map(t=>({...t,from:0,to:t.value,kind:"bar"})),series:!0,legend:"box",stackable:!0,totals:!0,aspect:.5,minHeight:({labelHeight:t,nameHeight:e,rows:n,series:a,stacked:o})=>{const r=1.1*t,s=a>1&&!o?r*(a+.15*(a-1))/.7:r/.58;return n*Math.max(s,1.2*e)},categories:"beside",headroom:()=>0,draw(t){const{segments:e,height:o,unit:r,svg:s,values:c,categories:i,config:l,barMax:d}=t,m=t.series.length>1,$=Math.max(M(i.map(t=>H(t).width*r)),0),y=Math.min($+10*r,420),w=u-4*r,p=t.stacked?Math.max(M(t.rows.map(e=>C(e,t.series.length))),0)||1:Math.max(M(t.rows.flatMap(e=>e.cells.slice(0,t.series.length).map(t=>Math.abs(t.value)))),0)||1,v=t=>H(t).width*r,k=t=>t.length?M(t.map(v))+9*r:0;let x=t.stacked?k(t.totals):m?k(t.seriesValues.flat()):0;if(!m)for(let n=0;n<3;n++){const t=w-y-x,n=k(e.map((t,e)=>({seg:t,label:c[e]})).filter(({seg:e,label:n})=>!P(n,Math.abs(e.value)/p*t,r)).map(({label:t})=>t));if(n<=x)break;x=n}const A=w-y-x,N=t=>y+Math.abs(t)/p*A,S=o/e.length,L=t=>(t+.5)*S,F=Math.min(S*l.barfill,d);if(t.stacked)return t.rows.forEach((e,n)=>{const a=B(t,e,n,{"data-grow":"right"}),s=L(n)-F/2,c=O(e,t.series.length);c.forEach(({from:e,to:c,cell:i},l)=>{const d=t.seriesValues[l][n];if(d.dataset.place="none",i.missing||c===e)return;const h=N(e),f=N(c);a(l,{x:h,y:s,width:Math.max(f-h,1),height:F}),d.dataset.place="inside",d.toggleAttribute("data-left-out",!P(d,f-h,r)||H(d).height*r>F),U(d,t,l),g(d,(h+f)/2,L(n),u,o)});const l=t.totals[n];l&&(l.dataset.place="after",g(l,N(c.at(-1)?.to??0)+5*r,L(n),u,o));const d=i[n];d&&g(d,y-8*r,L(n),u,o)}),void s.appendChild(f("line",{class:a,x1:y,x2:y,y1:0,y2:o}));if(m){const e=T(S,t.series.length,d);t.plot.dataset.grouped="";const c=t.seriesValues.flat().filter(t=>void 0===t.dataset.missing),l=q(t.plot,c,t=>({size:H(t).height*r,room:e.size+.5*e.gap}),"--tablechart-fit");return t.rows.forEach((a,c)=>{t.series.forEach((i,d)=>{const h=a.cells[d]??a.cells[0],m=t.seriesValues[d][c];if(h.missing)return void(m.dataset.place="none");const $=N(h.value),w=L(c)+e.offset(d);s.appendChild(f("rect",{class:b(n,a),"data-kind":"bar","data-row":c+1,"data-grow":"right",x:y,y:w,width:Math.max($-y,1),height:e.size,...z(t,a,d)})),m.dataset.place="after",m.toggleAttribute("data-left-out",!l),g(m,$+5*r,w+e.size/2,u,o)});const d=i[c];d&&g(d,y-8*r,L(c),u,o)}),void s.appendChild(f("line",{class:a,x1:y,x2:y,y1:0,y2:o}))}e.forEach((t,e)=>{const a=N(t.value),l=L(e);s.appendChild(f("rect",{class:b(n,t),"data-kind":t.kind,"data-row":e+1,"data-grow":"right",x:y,y:l-F/2,width:Math.max(a-y,1),height:F,style:h("--i",t.slot)}));const d=c[e],m=P(d,a-y,r);d.dataset.place=m?"inside":"after",d.dataset.kind=t.kind,g(d,m?a-6*r-H(d).width*r/2:a+5*r,l,u,o);const $=i[e];$&&g($,y-8*r,l,u,o)}),s.appendChild(f("line",{class:a,x1:y,x2:y,y1:0,y2:o}))}},W={segments:t=>t.map(t=>({...t,from:0,to:t.value,kind:"bar"})),series:!0,legend:"box",stackable:!0,totals:!0,breakable:!0,headroom:({labelHeight:t,badgeHeight:e,hasAnnotations:n,unit:a})=>t+4*a+(n?1.6*e:0),draw(t){const{segments:e,cx:o,y:r,barWidth:s,height:c,unit:i,svg:l,values:d,labels:m}=t,$=r(0);if(t.stacked)return t.rows.forEach((e,n)=>{const a=B(t,e,n),l=o(n)-s/2;O(e,t.series.length).forEach(({from:e,to:d,cell:h},f)=>{const b=t.seriesValues[f][n];if(b.dataset.place="none",h.missing||d===e)return;const m=r(d),$=r(e);a(f,{x:l,y:m,width:s,height:Math.max($-m,1)}),b.dataset.place="inside",b.toggleAttribute("data-left-out",!E(b,$-m,i)||H(b).width*i>s-4*i),U(b,t,f),g(b,o(n),(m+$)/2,u,c)});const d=t.totals[n],h=O(e,t.series.length).at(-1)?.to??0;d&&(d.dataset.place="outside",g(d,o(n),r(h)-4*i,u,c))}),void l.appendChild(f("line",{class:a,x1:0,x2:u,y1:$,y2:$}));if(t.series.length>1){const e=T(o(1)-o(0)||2*o(0),t.series.length,t.barMax);t.plot.dataset.grouped="";const s=t.seriesValues.flat().filter(t=>void 0===t.dataset.missing),d=q(t.plot,s,t=>({size:H(t).width*i,room:e.size+.5*e.gap}),"--tablechart-fit");return t.rows.forEach((a,s)=>{t.series.forEach((h,m)=>{const y=a.cells[m]??a.cells[0],w=t.seriesValues[m][s],p=o(s)+e.offset(m);if(y.missing)return void(w.dataset.place="none");const M=r(y.value);l.appendChild(f("rect",{class:b(n,a),"data-kind":"bar","data-row":s+1,x:p,y:M,width:e.size,height:Math.max($-M,1),...z(t,a,m)})),w.dataset.place="outside",w.toggleAttribute("data-left-out",!d),g(w,p+e.size/2,M-4*i,u,c)})}),void l.appendChild(f("line",{class:a,x1:0,x2:u,y1:$,y2:$}))}const y=F(d,s,i);e.forEach((t,e)=>{const a=r(t.value);if(t.missing)return g(d[e],o(e),$-4*i,u,c),void(d[e].dataset.place="outside");l.appendChild(f("rect",{class:b(n,t),"data-kind":t.kind,"data-row":e+1,x:o(e)-s/2,y:a,width:s,height:Math.max($-a,1),style:h("--i",t.slot)}));const w=$-a,p="inside"===m&&!y&&E(d[e],w,i);g(d[e],o(e),p?a+w/2:a-4*i,u,c),d[e].dataset.place=p?"inside":"outside"}),l.appendChild(f("line",{class:a,x1:0,x2:u,y1:$,y2:$}))}},j=0,K={aspect:.66,centre:!0,headroom:()=>0,segments:t=>t.map(t=>({...t,from:0,to:t.value,kind:"bar"})),draw({rows:t,height:e,unit:n,labelHeight:a,svg:o,values:r,config:c,centre:i}){const l=500,d=e/2,m=(t=>t.filter(t=>!t.isTotal))(t).reduce((t,e)=>t+Math.abs(e.value),0);if(!m)return;const $=1.2*a+10*n,y=Math.max(Math.min(u,e)/2-$,10),w=y*c.ringfill,p=y-w/2,M=2*Math.PI*p,v=[];let k=0,x=0;if(t.forEach((t,c)=>{const i=r[c];if(t.isTotal)return void(i.dataset.place="none");const $=Math.abs(t.value)/m*M,A=k/M*2*Math.PI-Math.PI/2;v.push(A),o.appendChild(f("circle",{class:b(s,t),"data-slice":x+1,"data-row":c+1,cx:l,cy:d,r:p,"stroke-width":w,transform:`rotate(-90 500 ${d})`,"stroke-dasharray":`${$.toFixed(1)} ${(M-$).toFixed(1)}`,"stroke-dashoffset":(-k).toFixed(1),style:`--n:${x}; --palette:var(--tablechart-color-${x+1}); --arc:${$.toFixed(1)}; --circ:${M.toFixed(1)}; ${h("--i",t.slot)}`}));const N=A+$/M*Math.PI,S=Math.cos(N),L=Math.sin(N);o.appendChild(f("line",{class:"tablechart-leader",x1:l+S*(y+2*n),y1:d+L*(y+2*n),x2:l+S*(y+7*n),y2:d+L*(y+7*n),"data-row":c+1,style:h("--i",t.slot)}));const T=y+9*n,z=H(i).width*n/2;g(i,l+S*(T+Math.abs(S)*z),d+L*(T+Math.abs(L)*a*.7),u,e),i.dataset.place="around",k+=$,x+=1}),v.length>1){const t=p-w/2-1,n=p+w/2+1,a="tablechart-slices-"+ ++j,r=f("mask",{id:a,maskUnits:"userSpaceOnUse"});r.appendChild(f("rect",{x:0,y:0,width:u,height:e,fill:"white"}));for(const e of v)r.appendChild(f("line",{class:"tablechart-divide",x1:l+Math.cos(e)*t,y1:d+Math.sin(e)*t,x2:l+Math.cos(e)*n,y2:d+Math.sin(e)*n}));const c=f("g",{mask:`url(#${a})`});for(const e of Array.from(o.querySelectorAll(`.${s}`)))c.appendChild(e);const i=f("defs");i.appendChild(r),o.prepend(i,c)}i&&g(i,l,d,u,e)}},R=["circle","square","diamond"],V=(t,e)=>{const n=t[e]?.marker?.toLowerCase().split(/\s+/)??[],a=R.find(t=>n.includes(t));return{shape:a??R[Math.floor(e/2)%R.length],open:n.includes("open")||!n.includes("filled")&&!a&&e%2==1}},D=t=>Number(t.toFixed(2));function Z(t,e,n,a){const o=(e[0]-t[0])/3;return[[t[0]+o,t[1]+n*o],[e[0]-o,e[1]-a*o]]}function G(t,e,n,a){const[o,r]=Z(t,e,n,a),s=([t,e])=>`${D(t)},${D(e)}`;return`C${s(o)} ${s(r)} ${s(e)}`}function J(t,e,n,a,o=24){const[r,s]=Z(t,e,n,a),c=n=>{const a=1-n,o=(t,e,o,r)=>a*a*a*t+3*a*a*n*e+3*a*n*n*o+n*n*n*r;return[o(t[0],r[0],s[0],e[0]),o(t[1],r[1],s[1],e[1])]};let i=0,l=t;for(let u=1;u<=o;u++){const t=c(u/o);i+=Math.hypot(t[0]-l[0],t[1]-l[1]),l=t}return i}function Q(t,e,n){const a=new Array(t).fill(0);let o=[];const r=()=>{(function(t,e){const n=t.length;if(n<2)return t.map(()=>0);const a=n=>(e[n+1]-e[n])/(t[n+1]-t[n]||1),o=new Array(n).fill(0);for(let s=1;s<n-1;s++){const e=a(s-1),n=a(s);if(e*n<=0)continue;const r=t[s]-t[s-1],c=t[s+1]-t[s],i=(e*c+n*r)/(r+c||1),l=Math.min(2*Math.abs(e),2*Math.abs(n),Math.abs(i));o[s]=Math.sign(e)*l||0}if(2===n)return o[0]=a(0),o[1]=a(0),o;const r=(n,a,o)=>{const r=t[a]-t[n];return r?((e[a]-e[n])/r*3-o)/2:o};return o[0]=r(0,1,o[1]),o[n-1]=r(n-2,n-1,o[n-2]),o})(o.map(t=>n(t)[0]),o.map(t=>n(t)[1])).forEach((t,e)=>{a[o[e]]=t}),o=[]};for(let s=0;s<t;s++)e(s)?r():o.push(s);return r(),a}var X=t=>t.map(t=>({...t,from:0,to:t.value,kind:"bar"})),Y=t=>({segments:X,breakable:!0,series:!0,stackable:!0,swatch:t?"box":void 0,headroom:({labelHeight:t,unit:e})=>1.6*t+6*e,footroom:({labelHeight:e,unit:n,series:a,focused:o,stacked:r})=>t||r||2!==a||o?0:e+7*n,draw(e){const{rows:n,series:o,seriesValues:r,names:s,cx:c,y:l,height:d,unit:h,labelHeight:b,svg:m,stacked:$}=e,w="step"===e.shape,p="smooth"===e.shape,M=o.length>1,v=o.some(t=>t.focus),k=n.length-1,x=l(0),A=n.length>1?c(1)-c(0):2*c(0);m.style.setProperty("--tablechart-base",`${D(x)}px`);const N=(t,e)=>n[e]?.cells[t]??n[e]?.cells[0],S=(t,e)=>!N(t,e)||!!N(t,e)?.missing,L=n.map(t=>$?O(t,o.length):null),T=(t,e)=>L[e]?.[t].to??N(t,e)?.value??0,z=(t,e)=>L[e]?.[t].from??0,C=(t,e)=>[c(e),l(T(t,e))],U=o.map((t,e)=>{if(!M)return{attrs:{},ink:""};const n=v&&!t.focus;return{attrs:{"data-series":e+1,...n&&{"data-muted":""}},ink:`--n:${e}; --m:${n?1:0}; --palette:var(--tablechart-color-${e+1}); `}}),B=Math.min(k,6),F=k>0?B/(w?n.length:k):1,E=t=>t*F,P=t=>`--i:${D(E(t))}`,q=t=>`--i:${D(E(t)+1)}; --d:${D(E(t+1)-E(t))}`,I=t=>n.map((e,n)=>({i:n,next:n<k&&!S(t,n+1)})).filter(({i:e,next:n})=>!S(t,e)&&(w||n)),W=p?o.map((t,e)=>Q(n.length,t=>S(e,t),t=>C(e,t))):[],j=p&&t?o.map((t,e)=>Q(n.length,t=>S(e,t),t=>[c(t),l(z(e,t))])):[];t&&o.forEach((t,e)=>(t=>{const e=f("g",{class:"tablechart-area",...U[t].attrs,...$&&{"data-stacked":""},style:U[t].ink}),n=I(t),a=f("g",{class:"tablechart-area-fill",style:`--rows:${D(B+1)}; ${n.length?q(n[0].i):""}`});e.appendChild(a);for(const{i:o,next:r}of n){const e=w?c(o)-A/2:c(o),n=w?c(o)+A/2:c(o+1),[s,i]=[l(T(t,o)),l(z(t,o))],[u,d]=w?[s,i]:[l(T(t,o+1)),l(z(t,o+1))],b=w?o+1:o+2,m=w?r:o+1<k&&!S(t,o+2);let g=m?1.5*h:0;const $=(t,a,o,r,s)=>{if(!m)return a;if(p)return a+r*g;if(w)return s(a,o);const i=(a-t)/(n-e),l=(o-a)/(c(b)-n);return s(a+i*g,a+l*g)},y=$(s,u,l(T(t,b)),W[t]?.[o+1],Math.max),M=$(i,d,l(z(t,b)),j[t]?.[o+1],Math.min);y>=M&&(g=0);const v=g?[`L${D(n+g)},${D(y)}`,`L${D(n+g)},${D(M)}`]:[];if(p){const r=[`M${D(e)},${D(i)}`,`L${D(e)},${D(s)}`,G([e,s],[n,u],W[t][o],W[t][o+1]),...v,`L${D(n)},${D(d)}`,G([n,d],[e,i],j[t][o+1],j[t][o]),"Z"].join(" ");a.appendChild(f("path",{d:r,"data-row":o+2,style:q(o)}));continue}const x=w?[[e,i],[e,s],[n,s],[n,y],[n+g,y],[n+g,M],[n,M],[n,i]]:[[e,i],[e,s],[n,u],[n+g,y],[n+g,M],[n,d]];a.appendChild(f("polygon",{points:x.map(t=>t.join(",")).join(" "),"data-row":(w?o:o+1)+1,style:q(o)}))}m.appendChild(e)})(e)),o.forEach((t,e)=>(t=>{const e=o[t];let n=0;const a=(a,o,r,s)=>{m.appendChild(f(a.d?"path":"polyline",{class:"tablechart-series",...U[t].attrs,...a,...e.line&&{"data-line":e.line},"data-row":r,style:`${U[t].ink}--len:${o.toFixed(1)}; --along:${(-n).toFixed(1)}; ${s}`})),n+=o-1},r=(t,e)=>1+Math.hypot(e[0]-t[0],e[1]-t[1])/h,s=(t,e)=>({points:`${t.join(",")} ${e.join(",")}`});for(const{i:o,next:i}of I(t))if(p){const[e,n]=[C(t,o),C(t,o+1)],[r,s]=[W[t][o],W[t][o+1]];a({d:`M${D(e[0])},${D(e[1])} ${G(e,n,r,s)}`},1+J(e,n,r,s)/h,o+2,q(o))}else if(w){const e=l(T(t,o)),[n,u]=[[c(o)-A/2,e],[c(o)+A/2,e]];a(s(n,u),r(n,u),o+1,q(o));const d=l(T(t,o+1));if(i&&d!==e){const t=[u[0],d];a(s(u,t),r(u,t),o+2,`--i:${D(E(o+1)+1)}; --d:0.25`)}}else{const[e,n]=[C(t,o),C(t,o+1)];a(s(e,n),r(e,n),o+2,q(o))}})(e)),w||(()=>{const t=o.map((t,e)=>M?V(o,e):{shape:"circle",open:!1}),e=(e,n,a)=>{const[o,r]=C(e,n);return((t,e,n,a,o={})=>{if("square"===t){const t=.88*a;return f("rect",{x:e-t,y:n-t,width:2*t,height:2*t,...o})}if("diamond"===t){const t=1.2*a;return f("polygon",{points:`${e},${n-t} ${e+t},${n} ${e},${n+t} ${e-t},${n}`,...o})}return f("circle",{cx:e,cy:n,r:a,...o})})(t[e].shape,o,r,4*h,{...a,style:`${a.style??""}${s=r,`--rise:${D(x-s)}px; `}${P(n)}`});var s},a=t=>n.map((t,e)=>e).filter(e=>!S(t,e));y(m,o.flatMap((n,o)=>t[o].open?a(o).map(t=>e(o,t,{class:i,"data-row":t+1,...M&&{"data-series":o+1}})):[]),u,d),o.forEach((n,o)=>{for(const r of a(o))m.appendChild(e(o,r,{class:"tablechart-point",...U[o].attrs,"data-marker":t[o].shape,...t[o].open&&{"data-open":""},"data-row":r+1,style:U[o].ink}))})})();const K=(t,e)=>{let n=e;for(;n<k&&!S(t,n+1)&&N(t,n+1)?.value===N(t,e)?.value;)n++;return n};r.forEach((e,n)=>{e.forEach((e,a)=>{e.style.setProperty("--i",String(D(w?(E(a)+E(a+1))/2:E(a))));const s=((e,n)=>{const a=N(e,n);if(!a||a.missing)return"none";if(w&&n>0&&!S(e,n-1)&&N(e,n-1)?.value===a.value)return"none";if(v&&!o[e].focus)return"none";if($)return"middle";if(!M||v||o.length>2)return"above";const r=N(1-e,n);return!r||r.missing||a.value>r.value||a.value===r.value&&0===e||t&&C(e,n)[1]+7*h+b>x?"above":"below"})(n,a);if(e.dataset.place="above"===s?"outside":s,e.toggleAttribute("data-left-out","none"!==s&&((t,e)=>$||w?H(r[t][e]).width*h>(w?K(t,e)-e+1:1)*A-4*h||$&&l(z(t,e))-l(T(t,e))<1.2*b:M&&!v&&o.length>2)(n,a)),w&&"none"!==s?e.dataset.rowEnd=String(K(n,a)+1):delete e.dataset.rowEnd,"none"===s)return;const i=H(e).width*h/2+4*h;let f=c(a);w?f=(c(a)+c(K(n,a)))/2:"middle"===s&&0===a?f+=i:"middle"===s&&a===k&&(f-=i);const m=l(T(n,a)),y={middle:(l(z(n,a))-m)/2,above:-7*h,below:7*h};g(e,f,m+y[s],u,d)})});const R=s.map((t,e)=>{let n=k;for(;n>0&&S(e,n);)n--;const[a,o]=C(e,n);return{name:t,x:(w?a+A/2:a)+10*h,y:$?(o+l(z(e,n)))/2:o}}),Z=(s[0]?H(s[0]).height:0)*h;for(const t of((t,e)=>(t.sort((t,e)=>t.y-e.y),t.forEach((n,a)=>{const o=t[a-1];o&&n.y<o.y+e&&(n.y=o.y+e)}),t))(R,Z))g(t.name,t.x,t.y,u,d);const X=t||$||2!==o.length||v?x:d-2*h;m.appendChild(f("line",{class:a,x1:0,x2:c(k)+c(0),y1:X,y2:X}))}}),_=Y(!1),tt=Y(!0),et={segments:t=>{let e=0;return t.map(t=>{if(t.isTotal)return e=t.value,{...t,from:0,to:t.value,kind:"total"};const n=e;return e+=t.value,{...t,from:n,to:e,kind:t.value>=0?"up":"down"}})},breakable:!0,headroom:({labelHeight:t,badgeHeight:e,hasAnnotations:n,unit:a})=>t+6*a+(n?1.6*e:0),draw({segments:t,cx:e,y:o,barWidth:r,height:s,unit:c,svg:i,values:l,breakAt:d}){const m=o(0),$=F(l,r,c);t.forEach((n,a)=>{const s=t[a+1];if(!s)return;const c=o(n.to),l=e(a)+r/2,u=e(a+1)-r/2;i.appendChild(f("line",{class:"tablechart-connector",x1:l,x2:u,y1:c,y2:c,"data-row":a+2,style:h("--i",s.slot)}))}),t.forEach((t,a)=>{const m=o(Math.max(t.from,t.to)),y=Math.abs(o(t.from)-o(t.to));i.appendChild(f("rect",{class:b(n,t),"data-kind":t.kind,"data-row":a+1,"data-grow":"down"===t.kind?"down":"up",x:e(a)-r/2,y:m,width:r,height:Math.max(y,1),style:h("--i",t.slot)}));const w=l[a],p=!(null!==d&&Math.min(t.from,t.to)<d&&Math.max(t.from,t.to)>d)&&!$&&E(w,y,c);w.dataset.place=p?"inside":"outside",w.dataset.kind=t.kind;const M=p?m+y/2:"down"===t.kind?m+y+H(w).height*c+3*c:m-3*c;g(w,e(a),M,u,s)}),i.appendChild(f("line",{class:a,x1:0,x2:u,y1:m,y2:m}))}},nt={enabled:!1,log(...e){nt.enabled&&console.log(`[${t}]`,...e)},timed(e,n,a){if(!nt.enabled)return a();const o=performance.now(),r=a(),s=performance.now()-o,c=n.querySelectorAll("tbody tr").length;return s>50?console.warn(`[${t}] ${e} took ${s.toFixed(1)} ms for ${c} rows, more than 50 ms.`,n):nt.log(`${e} took ${s.toFixed(1)} ms for ${c} rows.`,n),r}},at=t=>{const e=(t?.textContent||"").trim(),n=e.match(/^(.*?)(-?\d+(?:[.,]\d+)?)(.*)$/);return{raw:e,number:n?.[2]??"",prefix:n?.[1]??"",suffix:n?.[3]??"",missing:!n,value:n?Number.parseFloat(n[2].replace(",",".")):0}},ot=t=>Array.from(t.querySelector("thead tr:last-child")?.children??[]).slice(1),rt={area:tt,bar:I,column:W,donut:K,line:_,waterfall:et},st={"axis-break":p,trend:L,bracket:N},ct=Object.keys(st),it=t=>{let e="";for(let n=t.previousSibling;n&&(e=(n.textContent??"")+e,!e.trim());n=n.previousSibling);return e.trim()},lt=["straight","step","smooth"],ut=(t,e)=>{const n=t.dataset.chartShape;return n&<.includes(n)?n:lt.includes(e.shape)?e.shape:"straight"},dt=0,ht=(n,a,o=null)=>{const r=o??(n.getAttribute("data-chart")||"column"),s=rt[r];if(!s)return console.warn(`[${t}] Unknown chart type "${r}". Known types: ${Object.keys(rt).join(", ")}.`),n.setAttribute("data-chart-empty",""),null;const i=((t,e="data-i18n")=>Array.from(t.querySelectorAll("tbody tr")).map((t,n)=>{const a=t.querySelector("th"),o=Array.from(t.querySelectorAll("td")).map(at);return o.length||o.push(at(null)),{...o[0],label:(a?.textContent||"").trim(),key:e&&a?.getAttribute(e)||null,cells:o,classes:Array.from(t.classList),isTotal:"total"===t.getAttribute("data-kind"),slot:n}}))(n,a.langattribute);if(!i.length)return console.warn(`[${t}] A chart has no rows in its table, so there is nothing to draw.`),n.setAttribute("data-chart-empty",""),null;(t=>{const e=t.querySelector(":scope > figcaption");if(!e)return;(t=>{for(const e of t.querySelectorAll("br")){if(e.previousElementSibling?.classList.contains("tablechart-sr"))continue;if(/[.!?:;,…]$/.test(it(e)))continue;const t=document.createElement("span");t.className="tablechart-sr",t.textContent=". ",e.before(t)}})(e);const n=t=>t.hasAttribute("aria-label")||t.hasAttribute("aria-labelledby"),a=t=>{e.id||(e.id="tablechart-caption-"+ ++dt),t.setAttribute("aria-labelledby",e.id)};"FIGURE"!==t.tagName||n(t)||a(t);const o=t.querySelector("table");!o||n(o)||o.querySelector(":scope > caption")||a(o)})(n);let l=((t,e,n="data-i18n")=>{const a=ot(t),o=Math.max(1,M(e.map(t=>t.cells.length)));return Array.from({length:o},(t,e)=>{const o=a[e];return{name:(o?.textContent||"").trim(),key:n&&o?.getAttribute(n)||null,focus:"focus"===o?.getAttribute("data-kind"),marker:o?.getAttribute("data-marker")??null,line:(r=o?.getAttribute("data-line"),"dashed"===r||"dotted"===r?r:null)};var r})})(n,i,a.langattribute);l.length>1&&!s.series&&(console.warn(`[${t}] A ${r} chart draws one series; only the first of the table's ${l.length} value columns is used.`),l=l.slice(0,1));const u=l.length>1;u&&n.style.setProperty("--tablechart-series-count",String(l.length));const d=n.hasAttribute("data-chart-stack");d&&!s.stackable&&console.warn(`[${t}] A ${r} chart cannot be stacked.`);const h=d&&!!s.stackable&&u;h&&i.some(t=>t.cells.slice(0,l.length).some(t=>t.value<0))&&console.warn(`[${t}] A stacked chart has a value below zero. It takes no room in the stack.`);const b=document.createElement("div");b.className="tablechart-plot",b.setAttribute("aria-hidden","true");const g=f("svg",{role:"presentation",focusable:"false"});b.appendChild(g),n.appendChild(b);const $=s.centre?i.filter(t=>!t.isTotal):i,y=Math.max(0,M($.flatMap(t=>t.cells.slice(0,l.length).map(t=>v(t.number))))),w=l.map((t,n)=>i.map((t,a)=>{const o=t.cells[n]??t.cells[0],r=m(e,b);return r.classList.add(...t.classes),r.dataset.value=String(o.value),o.prefix&&(r.dataset.prefix=o.prefix),o.suffix&&(r.dataset.suffix=o.suffix),o.missing&&(r.dataset.missing=o.raw),u&&(r.dataset.series=String(n+1)),r.dataset.row=String(a+1),r.style.setProperty("--i",String(t.slot)),r})),p=w[0],k=h&&s.totals?i.map((t,n)=>{const a=m(e,b);a.classList.add(...t.classes),a.dataset.kind="total",a.dataset.row=String(n+1),a.dataset.value=String(C(t,l.length));const o=t.cells[0];return o.prefix&&(a.dataset.prefix=o.prefix),o.suffix&&(a.dataset.suffix=o.suffix),a.style.setProperty("--i",String(t.slot)),a}):[],x=i[i.length-1],A=l.some(t=>t.focus),N=n.getAttribute("data-chart-legend"),S=u&&(null===N?a.legend||void 0!==s.legend:"false"!==N)?document.createElement("div"):null;S&&(S.className=c,S.setAttribute("aria-hidden","true"),S.inert=!0);const H=u?l.map((t,e)=>{const o=m("tablechart-name",S??b);S&&(o.dataset.place="legend");const r=s.legend??s.swatch;if(r&&(o.dataset.swatch=r),o.textContent=t.name,!r&&"step"!==ut(n,a)){const t=V(l,e);o.dataset.marker=t.shape,o.toggleAttribute("data-open",t.open)}return t.line&&!r&&(o.dataset.line=t.line),t.key&&a.langattribute&&o.setAttribute(a.langattribute,t.key),o.dataset.series=String(e+1),o.style.setProperty("--n",String(e)),o.style.setProperty("--palette",`var(--tablechart-color-${e+1})`),o.style.setProperty("--m",A&&!t.focus?"1":"0"),o.style.setProperty("--i",String(x.slot)),o}):[],L=s.centre?m("tablechart-centre",b):null;if(L){const t=i.find(t=>t.isTotal),e=t?t.value:i.reduce((t,e)=>t+Math.abs(e.value),0);L.dataset.value=String(e),t&&(L.dataset.decimals=String(v(t.number)))}const T=L&&!i.some(t=>t.isTotal)?((t,e,n)=>{const a=t.querySelector("table");if(!a)return null;const o=a.querySelector("tfoot [data-chart-total]");if(o)return o.dataset.value=e.dataset.value??"0",o;const r=(a.tFoot??a.createTFoot()).insertRow(),s=document.createElement("th");s.scope="row",s.textContent=n.totallabel;const c=t.getAttribute("data-chart-keys");c&&n.langattribute&&s.setAttribute(n.langattribute,`${c}-total`);const i=r.insertCell();return i.setAttribute("data-chart-total",""),i.dataset.value=e.dataset.value??"0",r.prepend(s),i})(n,L,a):null,z="beside"===s.categories,O=document.createElement("div");O.className="tablechart-categories",O.setAttribute("aria-hidden","true"),O.inert=!0,z?O.dataset.place="beside":s.centre&&(O.dataset.place="key"),O.style.setProperty("--tablechart-columns",String(i.length));let U=0;for(const t of i){const e=document.createElement("span");e.classList.add(...t.classes),e.textContent=t.label,t.key&&a.langattribute&&e.setAttribute(a.langattribute,t.key),s.centre&&(e.dataset.kind=t.isTotal?"total":"slice",t.isTotal||(e.dataset.slice=String(U+1),e.style.setProperty("--n",String(U)),e.style.setProperty("--palette",`var(--tablechart-color-${U+1})`),U+=1)),e.style.setProperty("--i",String(t.slot)),e.dataset.row=String(i.indexOf(t)+1),O.appendChild(e)}(z?b:n).appendChild(O),S&&n.appendChild(S);const B=Array.from(n.querySelectorAll("[data-annotation]")).map(e=>{const n=e.getAttribute("data-annotation"),a=st[n];if(!a)return console.warn(`[${t}] Unknown annotation "${n}". Known annotations: ${Object.keys(st).join(", ")}.`),null;const o=Number.parseInt(e.getAttribute("data-series")??"1",10),r=o>=1&&o<=l.length?o-1:0;return o!==r+1&&console.warn(`[${t}] An annotation reads line ${o}, which the chart does not have; it reads the first.`),{spec:e,type:a,badge:a.create(e,b),series:r,after:i.length}}).filter(t=>null!==t);if(a.animate){const t=n.getAttribute("data-chart-animate"),e="up"===("up"===t||"across"===t?t:a.animate)&&("line"===r||"area"===r);n.setAttribute("data-animate",e?"up":"")}const F={figure:n,plot:b,svg:g,rows:i,decimals:y,type:s,values:p,series:l,seriesValues:w,names:S?[]:H,categories:Array.from(O.children),centre:L,stacked:h,totals:k,totalCell:T,rowAt:null,rowBox:null,annotations:B,checks:[]};return a.hover&&"false"!==n.getAttribute("data-chart-hover")&&$t(F),mt(F,a),F},ft=(t,e,n,a)=>{const o=getComputedStyle(t),r=(o.getPropertyValue(n).trim()||a).match(/^(\d+(?:\.\d+)?)(px|%|em|rem)$/);if(!r)return null;const s=Number(r[1]);return"%"===r[2]?s/100*u:s*("em"===r[2]?Number.parseFloat(o.fontSize):"rem"===r[2]?Number.parseFloat(getComputedStyle(document.documentElement).fontSize):1)*e},bt=(t,e)=>ft(t,e,"--tablechart-bar-max","60px")??Number.POSITIVE_INFINITY,mt=(t,e)=>{const n=[...t.seriesValues.flat(),...t.totals,...t.totalCell?[t.totalCell]:[]];for(const a of t.centre?[...n,t.centre]:n){const{missing:n,prefix:o="",suffix:r=""}=a.dataset;a.textContent=void 0===n?o+k(Number.parseFloat(a.dataset.value||"0"),a.dataset.decimals?Number(a.dataset.decimals):t.decimals,e.locale)+r:n}},gt=(t,e)=>{t.figure.classList.toggle("is-shown",e),e||t.plot.removeAttribute("data-pointed")},$t=t=>{const{plot:e}=t,n=()=>[...t.seriesValues.flat(),...t.totals];e.setAttribute("data-hover","");const a=document.createElement("div");a.className="tablechart-pointer",e.prepend(a);const o=()=>{e.removeAttribute("data-active");for(const t of n())t.removeAttribute("data-active")},r=r=>{if(!e.classList.contains("is-placed")||!t.rowAt)return;const s=e.getBoundingClientRect(),c=s.width/e.offsetWidth||1,i=t.rowAt((r.clientX-s.left)/c,(r.clientY-s.top)/c),l=null===i?null:i+1,u=t=>"none"!==t.dataset.place,d=null===l?[]:n().filter(t=>((t,e)=>{const n=Number(t.dataset.row),a=Number(t.dataset.rowEnd??n);return e>=n&&e<=a})(t,l)&&u(t));if(!n().some(t=>t.hasAttribute("data-left-out")&&u(t))||!d.length)return o();e.setAttribute("data-pointed",""),e.setAttribute("data-active",String(l));const[h,f,b,m]=t.rowBox?.(l-1)??[0,0,0,0];Object.assign(a.style,{left:`${h}%`,top:`${f}%`,width:`${b}%`,height:`${m}%`});for(const t of n())t.toggleAttribute("data-active",d.includes(t))};e.addEventListener("pointermove",r),e.addEventListener("pointerdown",r),e.addEventListener("pointerleave",t=>{"mouse"===t.pointerType&&o()}),document.addEventListener("pointerdown",t=>{e.contains(t.target)||o()})},yt=t=>"id"===t||"style"===t||t.startsWith("data-chart"),wt=/^\s*(?:Table)?:\s+/,pt=t=>"P"===t?.tagName&&wt.test(t.textContent??""),Mt=/^\s*([a-z][\w-]*)((?:\s+[\w-]+=[^\s:]+)*)\s*(:\s*|$)/,vt=t=>{const e=kt(t);return"P"===e?.tagName?e:t},kt=t=>{const e=Array.from(t.childNodes).filter(t=>t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&t.textContent?.trim());return 1===e.length&&e[0]instanceof HTMLElement?e[0]:null},xt="strong, b, span.total",At="data-chart-made",Nt=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches,St=new Set,Ht=null,Lt=["column","bar"],Tt=t=>{const e=t.getAttribute("data-chart")||"column";if(!Lt.includes(e))return null;const n=getComputedStyle(t).getPropertyValue("--tablechart-type").trim();return Lt.includes(n)?n:e},zt=async(e,n)=>{const a=(t=>t.map(t=>{const e=t.closest("p"),n=pt(e)?e:t;if("TABLE"!==n.tagName&&"P"!==n.tagName)return n;const a=document.createElement("div");((t,e)=>{for(const{name:n,value:a}of Array.from(t.attributes))("class"===n||yt(n))&&(e.setAttribute(n,a),t.removeAttribute(n))})(t,a),t.classList.length||t.removeAttribute("class");const o="TABLE"===n.tagName?n:null,r=n.previousElementSibling;let s=n.nextElementSibling;const c=o?pt(r)?r:pt(s)?s:null:n;o&&c===s&&(s=s?.nextElementSibling??null);const i=s?.classList.contains("chart-annotations")?s:(t=>{if("UL"!==t?.tagName&&"OL"!==t?.tagName)return null;const e=Array.from(t.children),n=e.map(t=>t.hasAttribute("data-annotation")?null:(t=>{const e=vt(t).firstChild;if(e?.nodeType!==Node.TEXT_NODE)return null;const n=Mt.exec(e.textContent??"");if(!n||!ct.includes(n[1]))return null;if(!n[3]&&e.nextSibling)return null;const a=n[2].trim().split(/\s+/).filter(Boolean).map(t=>t.split("="));return{name:n[1],options:a,text:e,length:n[0].length}})(t));return!e.length||e.some((t,e)=>!n[e]&&!t.hasAttribute("data-annotation"))?null:(e.forEach((t,e)=>{const a=n[e],o=vt(t);if(o!==t&&o.replaceWith(...o.childNodes),a){t.setAttribute("data-annotation",a.name);for(const[e,n]of a.options)t.setAttribute(`data-${e}`,n);a.text.textContent=(a.text.textContent??"").slice(a.length)}t.children.length&&Array.from(t.childNodes).filter(t=>t.nodeType===Node.ELEMENT_NODE||t.textContent?.trim()).forEach((t,e)=>{const n=document.createElement("span");0===e&&t instanceof HTMLElement&&t.matches("em, i")?(n.className="tablechart-caption",n.append(...t.childNodes),t.replaceWith(n)):t.nodeType===Node.TEXT_NODE&&(n.textContent=(t.textContent??"").trim(),t.replaceWith(n))})}),t.classList.add("chart-annotations"),t)})(s);return n.replaceWith(a),c&&a.append((t=>{const e=document.createElement("figcaption");for(const{name:r,value:s}of Array.from(t.attributes))e.setAttribute(r,s);const n=t.firstChild;n?.nodeType===Node.TEXT_NODE&&(n.textContent=(n.textContent??"").replace(wt,""),n.textContent||n.remove());const a=Array.from(t.childNodes),o=a.findIndex(t=>"BR"===t.nodeName);if(e.append(...-1===o?a:a.slice(0,o+1)),-1!==o&&o<a.length-1){const t=document.createElement("span");t.append(...a.slice(o+1)),e.append(t)}return t.remove(),e})(c)),o&&a.append(o),i&&a.append(i),nt?.log?.(`A ${o?"table":"caption"} with chart attributes was wrapped in a figure of its own`),a}))(e.filter(t=>!t.hasAttribute(At)));return await(async e=>{await Promise.all(e.filter(t=>t.hasAttribute("data-chart-src")).map(async e=>{const n=e.getAttribute("data-chart-src");for(const t of e.querySelectorAll("table"))t.remove();try{const t=await fetch(n);if(!t.ok)throw new Error(`${t.status} ${t.statusText}`);const a=await t.json(),o=Array.isArray(a)?a:a?.rows;if(!Array.isArray(o))throw new Error("no array of rows in it");const r=Array.isArray(a?.series)?a.series.map(String):[],s=e.querySelector(":scope > figcaption"),c=((t,e=[])=>{const n=document.createElement("table");if(e.length){const t=n.createTHead().insertRow();t.append(document.createElement("th"));for(const n of e){const e=document.createElement("th");e.textContent=n,t.append(e)}}const a=n.createTBody();for(const o of t){const t=a.insertRow();"total"===o.kind&&(t.dataset.kind="total");const e=document.createElement("th");e.textContent=String(o.label??""),t.append(e);for(const n of o.values??[o.value??null])t.insertCell().textContent=null===n?"":String(n)}return n})(o,r);s?s.after(c):e.prepend(c),nt?.log?.(`Read ${o.length} rows from "${n}"`)}catch(a){const e="file:"===window.location.protocol;console.warn(`[${t}] Could not read the chart data in "${n}": ${a.message}.`+(e?" A page opened from the file system cannot fetch files; open the page from a server instead.":""))}}))})(a),(t=>{for(const e of t){for(const n of e.querySelectorAll("tbody tr")){const t=n.cells[0];if("TD"!==t?.tagName||n.cells.length<2)continue;const e=document.createElement("th");for(const{name:n,value:a}of Array.from(t.attributes))e.setAttribute(n,a);e.append(...t.childNodes),t.replaceWith(e);for(let a=kt(e);a?.matches(xt);a=kt(e))n.dataset.kind="total",a.replaceWith(...a.childNodes)}const t=Array.from(e.querySelector("thead tr:last-child")?.children??[]);for(const e of t.slice(1))for(let t=kt(e);t?.matches(xt);t=kt(e))e.setAttribute("data-kind","focus"),t.replaceWith(...t.childNodes)}})(a),((e,n)=>{if(!n)return;const a=new Map;for(const o of e){let e=o.getAttribute("data-chart-keys")||null;if(!e)continue;if(a.has(e)){const n=a.get(e)+1;a.set(e,n),console.warn(`[${t}] Two charts on the page have data-chart-keys="${e}". If two charts use the same keys, they get the same translations. This one uses "${e}-${n}".`),e=`${e}-${n}`}else a.set(e,1);o.querySelectorAll("tbody th").forEach((t,a)=>{t.getAttribute(n)||t.setAttribute(n,`${e}-row${a+1}`)});const r=ot(o);r.length>1&&r.forEach((t,a)=>{t.getAttribute(n)||t.setAttribute(n,`${e}-col${a+1}`)}),nt?.log?.(`Keys for "${e}" written onto ${o.querySelectorAll("tbody th").length} rows`)}})(a,n.langattribute),a},Ot=(e,n)=>{const a=nt.timed("Building",e,()=>ht(e,n));return a?(e.setAttribute(At,""),((e,n)=>{let a=e,o=Tt(a.figure),r=null,s=!1,l=!1;const d=async()=>{if(!n.animate)return gt(a,!0);const t=a.figure.classList.contains("is-shown");if(!s||null===r||t||l)!s&&n.replay&&t&>(a,!1);else{l=!0;const t=Nt()?null:(t=>{for(let e=t;e&&e!==document.body;e=e.parentElement)if("0"===getComputedStyle(e).opacity)return e;return null})(a.figure);t&&await(e=t,new Promise(t=>{const n=["animationstart","transitionrun"],a=()=>{for(const t of n)document.removeEventListener(t,o,!0);r.disconnect(),t()},o=t=>{t.target instanceof Node&&t.target.contains(e)&&a()},r=new MutationObserver(()=>{"0"!==getComputedStyle(e).opacity&&a()});for(const e of n)document.addEventListener(e,o,!0);r.observe(e,{attributes:!0,attributeFilter:["class","style"]})})),await(async(t,e)=>{if(Nt())return;await new Promise(requestAnimationFrame);const n=t.getAnimations().filter(t=>t instanceof CSSAnimation);for(let r=t.parentElement;r&&r!==document.body;r=r.parentElement)n.push(...r.getAnimations());let a=0;for(const r of n){const t=r.effect?.getComputedTiming(),n=Number(t?.activeDuration??0);if(!t||!Number.isFinite(n))continue;const o=Number(t.delay??0)+n*e;a=Math.max(a,o-Number(r.currentTime??0))}var o;a>0&&await(o=a,new Promise(t=>setTimeout(t,o)))})(a.figure,((t,e)=>{const n=Number.parseFloat(t.dataset.chartEntrance??""),a=Number.isFinite(n)?n:e.entrance;return Math.min(Math.max(a,0),1)})(a.figure,n)),l=!1,!s&&n.replay||gt(a,!0)}var e},h=()=>{const t=Tt(a.figure);if(!t||t===o)return;const e=nt.timed("Building",a.figure,()=>ht(a.figure,n,t));e&&((t=>{t.plot.remove(),t.categories[0]?.parentElement?.remove(),t.figure.querySelector(`:scope > .${c}`)?.remove()})(a),a=e,o=t,r=null)},b=()=>{h();const e=a.plot.clientWidth;e&&e!==r&&nt.timed("Layout",a.figure,()=>((e,n)=>{const{plot:a,svg:o,rows:r,type:s,values:c,series:l,seriesValues:d,names:h,annotations:b}=e,m=a.clientWidth;if(!m)return!1;const g=u/m,$=Number.parseFloat(e.figure.dataset.chartAspect??""),w=u*($>0?$:s.aspect??n.aspect);a.classList.add("is-placed");for(const t of[...d.flat(),...e.totals])delete t.dataset.place;a.style.removeProperty("--tablechart-fit"),(t=>{const e=[...t].filter(t=>!!t),n=e.map(t=>({width:t.offsetWidth,height:t.offsetHeight}));e.forEach((t,e)=>S.set(t,n[e]))})([...d.flat(),...e.totals,...h,...e.categories,...b.map(t=>t.badge)]);const p=(c[0]?H(c[0]).height:0)*g,v=b[0]?.badge?H(b[0].badge).height*g:0,k=Math.max(w,ft(e.figure,g,"--tablechart-min-height","200px")??0,s.minHeight?.({labelHeight:p,nameHeight:Math.max(0,M(e.categories.map(t=>H(t).height)))*g,unit:g,rows:r.length,series:l.length,stacked:e.stacked})??0),x=e.stacked?r.map(t=>{const e=C(t,l.length);return{...t,value:e,cells:t.cells.map((t,n)=>0===n?{...t,value:e}:t)}}):r,A=(s.segments??(t=>t.map(t=>({...t,from:0,to:t.value,kind:"bar"}))))(e.stacked?x.map(t=>({...t,cells:[t.cells[0]]})):r),N={labelHeight:p,badgeHeight:v,hasAnnotations:b.length>0,unit:g,series:l.length,focused:l.some(t=>t.focus),stacked:e.stacked},L=s.headroom?.(N)??p,T=2*g+(s.footroom?.(N)??0),z=L,O=e.stacked?Math.max(M(x.map(t=>t.value)),0):Math.max(M(A.flatMap(t=>[t.from,t.to,t.value])),M(r.flatMap(t=>t.cells.slice(0,l.length).map(t=>t.value)))),U=k-z-T,B=1.02*O,F=b.find(t=>"axis-break"===t.spec.getAttribute("data-annotation"))?.spec,E=t=>{const e=Number.parseFloat(F?.getAttribute(t)??"");return Number.isFinite(e)?e:null},P=E("data-from")??E("data-at"),I=E("data-to");let W=null;if(F&&(null!==P||null!==I)){const e=P??0,n=I??B,a=null===I?e:null===P?n:(e+n)/2,o=F.getAttribute("data-size"),r=o?.match(/^\s*(\d+(?:\.\d+)?)\s*%\s*$/);null===o||r||console.warn(`[${t}] data-size="${o}" is not a percentage, such as 30%. Using the default.`);const c=Math.min(Math.max(r?Number(r[1])/100:null===I?.22:.3,.05),.8),i=A.filter(t=>("up"===t.kind||"down"===t.kind)&&Math.max(t.from,t.to)>e&&Math.min(t.from,t.to)<n);s.breakable?e<0||n<=e||n>B||0===e&&n===B?console.warn(`[${t}] A break from ${e} to ${n} does not fit a scale that runs from 0 to ${O}.`):i.length?console.warn(`[${t}] A break from ${e} to ${n} would cut a step that floats. Keep it below or above the steps.`):W={lo:e,hi:n,gap:a,share:c}:console.warn(`[${t}] This kind of chart cannot break its scale.`)}const j=W?W.gap:null,K=k-T;let R=t=>K-t/B*U;if(W){const{lo:t,hi:e,gap:n,share:a}=W,o=U*a,r=(U-o-13)/(t+(B-e)),s=o/(e-t);R=a=>a<=t?K-a*r:a<=n?K-t*r-(a-t)*s:a<=e?K-t*r-(a-t)*s-13:K-t*r-o-13-(a-e)*r}const V=h.length?M(h.map(t=>H(t).width))*g+12*g:0,D=e.categories[0]?.parentElement;D&&(D.style.paddingRight=V?V/u*100+"%":"");const Z=(u-V)/r.length,G=t=>t>=0&&t<r.length?t:null;e.rowAt=s.centre?null:"beside"===s.categories?(t,e)=>G(Math.floor(e*g/(k/r.length))):t=>G(Math.floor(t*g/Z));const J=Z/u*100,Q=100/r.length;e.rowBox="beside"===s.categories?t=>[0,t*Q,100,Q]:t=>[t*J,0,J,100],o.setAttribute("viewBox",`0 0 1000 ${k}`),o.textContent="",e.checks=[];const X={rows:r,segments:A,cx:t=>(t+.5)*Z,y:R,barWidth:Math.min(Z*n.barfill,bt(e.figure,g)),barMax:bt(e.figure,g),height:k,unit:g,labelHeight:p,badgeHeight:v,after:r.length,note:0,labels:"inside"===e.figure.dataset.chartLabels||"outside"!==e.figure.dataset.chartLabels&&"inside"===n.labels?"inside":"outside",breakAt:j,stacked:e.stacked,shape:ut(e.figure,n),totals:e.totals,svg:o,plot:a,values:c,series:l,seriesValues:d,names:h,categories:e.categories,centre:e.centre,config:n,checks:e.checks};s.draw(X);const Y=e.categories[0]?.parentElement;Y&&"beside"!==s.categories&&!s.centre&&q(Y,e.categories.filter(t=>null!==t.offsetParent),t=>({size:t.scrollWidth,room:t.clientWidth}),"--tablechart-name-fit");for(const[t,i]of b.entries()){i.badge?.setAttribute("data-note",String(t+1));const n=i.series,a=t=>({...t,...t.cells[n]??t.cells[0]});i.type.draw(i.spec,i.badge,{...X,...e.stacked&&{rows:x,...e.totals.length&&{values:e.totals}},...n>0&&!e.stacked&&{rows:r.map(a),segments:A.map(t=>{const e=a(t);return"bar"===t.kind?{...e,to:e.value}:e}),values:d[n]},after:i.after,note:t+1})}return y(o,b.flatMap(({badge:t})=>{if(!(t instanceof HTMLElement&&t.offsetWidth))return[];const e=t.offsetWidth*g,n=t.offsetHeight*g,a=Number.parseFloat(t.style.left)/100*u,o=Number.parseFloat(t.style.top)/100*k,r=getComputedStyle(t).borderTopLeftRadius,s=r.endsWith("%")?Number.parseFloat(r)/100:null,c=(Number.parseFloat(r)||0)*g;return[f("rect",{class:i,"data-for":"badge","data-note":t.dataset.note??"",x:a-e/2,y:o-n/2,width:e,height:n,rx:null===s?c:e*s,ry:null===s?c:n*s,style:["--after"].map(e=>t.style.getPropertyValue(e)&&`${e}:${t.style.getPropertyValue(e)}`).filter(Boolean).join("; ")})]}),u,k),!0})(a,n))&&(r=e,d())};let m=!1;const g=new ResizeObserver(()=>{m||(m=!0,requestAnimationFrame(()=>{m=!1,b()}))}),$=new IntersectionObserver(t=>{for(const e of t)s=e.isIntersecting,d()},{threshold:n.threshold}),w=()=>gt(a,!0),p=()=>{r=null,b()},v={relabel:()=>mt(a,n),refresh:p};h(),b(),g.observe(a.figure),$.observe(a.figure),window.addEventListener("beforeprint",w),(t=>{St.add(t),Ht||(Ht=new MutationObserver(()=>{for(const t of St)t.relabel();requestAnimationFrame(()=>requestAnimationFrame(()=>{for(const t of St)t.refresh()}))})).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]})})(v);const k={figure:a.figure,refresh:p,destroy(){g.disconnect(),$.disconnect(),window.removeEventListener("beforeprint",w),(t=>{St.delete(t),!St.size&&Ht&&(Ht.disconnect(),Ht=null)})(v),a.figure.tablechart===k&&delete a.figure.tablechart}};return a.figure.tablechart=k,k})(a,n)):null};window.Tablechart={init:async(t={},e=document)=>{const n={...d,...t};n.debug&&(nt.enabled=!0);const a=(await zt(Array.from(e.querySelectorAll(n.selector)),n)).map(t=>Ot(t,n)).filter(t=>null!==t);return nt.log(`Made ${a.length} chart(s).`),{charts:a,refresh:()=>{for(const t of a)t.refresh()},destroy:()=>{for(const t of a)t.destroy()}}},create:async(t,e={})=>{if(t.tablechart)return t.tablechart;const n={...d,...e};n.debug&&(nt.enabled=!0);const[a]=await zt([t],n);return a?Ot(a,n):null},defaultConfig:d}}();
|
|
1
|
+
!function(){var t="tablechart",e="tablechart-value",n="tablechart-bar",a="tablechart-rule",o="tablechart-line",r="tablechart-head",s="tablechart-slice",c="tablechart-legend",i="tablechart-hole",l="tablechart-break",u="tablechart-sr",d=1e3,h={selector:"[data-chart]",aspect:.38,barfill:.58,ringfill:.42,animate:!0,entrance:.5,labels:"outside",shape:"straight",closing:"down",legend:!1,hover:!0,totallabel:"Total",controls:!0,previouslabel:"Previous",nextlabel:"Next",stephint:"step of the chart",threshold:.5,replay:!1,langattribute:"data-i18n"},f=(t,e)=>`${t}:${e}`,b=(t,e={})=>{const n=document.createElementNS("http://www.w3.org/2000/svg",t);for(const a in e)n.setAttribute(a,String(e[a]));return n},m=(t,e)=>[t,...e.classes].join(" "),g=(t,e)=>{const n=document.createElement("span");return n.className=t,n.inert=!0,e.appendChild(n),n},$=(t,e,n,a,o)=>{t.style.left=e/a*100+"%",t.style.top=n/o*100+"%"},p=0,y=(t,e,n,a)=>{if(!e.length)return;const o="tablechart-cut-"+ ++p,r=b("mask",{id:o,maskUnits:"userSpaceOnUse"});r.appendChild(b("rect",{x:-n,y:-a,width:3*n,height:3*a,fill:"white"}));for(const i of e)i.setAttribute("fill","black"),r.appendChild(i);let s=t.querySelector(":scope > defs");s||(s=b("defs"),t.prepend(s)),s.appendChild(r);const c=b("g",{mask:`url(#${o})`});for(const i of Array.from(t.childNodes))i!==s&&c.appendChild(i);t.appendChild(c)},w=0,v={create:()=>null,draw(t,e,a){const{rows:o,y:r,svg:s,breakAt:c}=a;if(null===c)return;const i="zigzag"===t.getAttribute("data-mark"),u=(t,e)=>{const n=t.sideways?t.height:t.width,a=.09*n,o=n+2*a,r=.3*o,s=.06*o;if(t.sideways){const n=t.y-a;if(!i)return[[e-r/2,n],[e+r/2,n+o]];const c=o/3;return[[e-s,n],[e+s,n+c],[e-s,n+2*c],[e+s,n+o]]}const c=t.x-a;if(!i)return[[c,e+r/2],[c+o,e-r/2]];const l=o/3;return[[c,e+s],[c+l,e-s],[c+2*l,e+s],[c+o,e-s]]},d=(t,e=!1)=>t.map(([t,e],n)=>`${0===n?"M":"L"} ${t.toFixed(1)} ${e.toFixed(1)}`).join(" ")+(e?" Z":""),h="tablechart-break-"+ ++w,m=b("mask",{id:h,maskUnits:"userSpaceOnUse"});m.appendChild(b("rect",{x:-1e3,y:-a.height,width:3e3,height:3*a.height,fill:"white"}));const g=[],$=r(c);for(const w of(t=>Array.from(t.querySelectorAll(`.${n}`)).map(t=>{const e="rect"===t.tagName?[t]:Array.from(t.querySelectorAll("rect")),n=(t,e)=>Number(t.getAttribute(e)),a=Math.min(...e.map(t=>n(t,"x"))),o=Math.min(...e.map(t=>n(t,"y"))),r=Math.max(...e.map(t=>n(t,"x")+n(t,"width"))),s=Math.max(...e.map(t=>n(t,"y")+n(t,"height")));return{row:Number(t.dataset.row),x:a,y:o,width:r-a,height:s-o,sideways:"right"===t.dataset.grow}}))(s)){const t=w.sideways?a.breakX:$;if(void 0===t)continue;if(!(w.sideways?w.x<t&&w.x+w.width>t:w.y<$&&w.y+w.height>$))continue;const[e,n]=w.sideways?[u(w,t),u(w,t+a.breakGap)]:[u(w,$-a.breakGap),u(w,$)];m.appendChild(b("path",{d:d([...e,...n.slice().reverse()],!0),fill:"black"})),g.push(e,n);const r=f("--after",o[w.row-1]?.slot??0);for(const o of[e,n])s.appendChild(b("path",{class:l,"data-part":"edge","data-note":a.note,d:d(o),style:r}))}if(!g.length)return;const p=Array.from(s.querySelectorAll(`.${l}`)),y=b("g",{mask:`url(#${h})`});for(const n of Array.from(s.childNodes))p.includes(n)||y.appendChild(n);const v=b("defs");v.appendChild(m),s.prepend(v,y)}},M=t=>{let e=Number.NEGATIVE_INFINITY;for(const n of t)e=Math.max(e,n);return e},k=t=>(t.split(/[.,]/)[1]||"").length,x=(t,e,n)=>{const a=((t,e)=>new Intl.NumberFormat(e||document.documentElement.lang||void 0,{minimumFractionDigits:t,maximumFractionDigits:t}))(e,n).formatToParts(t),o="minusSign"===a[0]?.type?a[0].value:"";return[o,a.slice(o?1:0).map(t=>t.value).join("")]},A=(t,e)=>{const n=document.createElement("span");if(n.className="tablechart-badge",n.inert=!0,t.childElementCount>0)for(const a of Array.from(t.children))n.appendChild(a.cloneNode(!0));else{n.textContent=(t.textContent||"").trim();const e=t.getAttribute("data-i18n");e&&n.setAttribute("data-i18n",e)}return e.appendChild(n),n},N=(e,n,a,o)=>{const r=(s=e?.textContent||"",Number.parseFloat((s.match(/-?[\d.,]+/)||["NaN"])[0].replace(",",".")));var s;const c=!!Number.isNaN(r)||Math.abs(n-r)<=.5,i={label:a,computed:n,stated:r,agrees:c};o.checks.push(i),c||console.warn(`[${t}] An annotation reads ${r}%, but ${a} is ${n.toFixed(1)}%. The chart shows what you wrote; this is only a check.`)},S={create:A,draw(e,n,a){const{rows:s,cx:c,y:i,unit:l,labelHeight:u,badgeHeight:h,height:m,svg:g,after:p}=a,[y,w]=((t,e)=>{const n=(e,n)=>{const a=Number.parseInt(t.getAttribute(e)??"",10);return Number.isFinite(a)?a-1:n};return[n("data-from",0),n("data-to",e-1)]})(e,s.length),v=s[y],M=s[w];if(!v||!M)return void console.warn(`[${t}] A bracket points at a row that is not there (row ${y+1} to ${w+1}, of ${s.length}).`);const k=7*l,x=4*l,A=c(y),S=c(w),H=Math.min(i(v.value),i(M.value))-u-x-.9*h,L=t=>i(t)-u-x,T=`M ${A} ${L(v.value)} L ${A} ${H} L ${S} ${H} L ${S} ${L(M.value)-k}`,z=(L(v.value)-H+Math.abs(S-A)+(L(M.value)-k-H))/l+1;g.appendChild(b("path",{class:o,"data-note":a.note,d:T,style:`--len:${z.toFixed(1)}; ${f("--after",p)}`}));const C=L(M.value);var O;g.appendChild(b("polygon",{class:r,"data-note":a.note,points:`${S},${C} ${S-.45*k},${C-k} ${S+.45*k},${C-k}`,style:f("--after",p)})),n&&($(n,(A+S)/2,H,d,m),n.style.setProperty("--after",String(p))),N(n,(O=v.value,(M.value-O)/Math.abs(O)*100),`${v.value} to ${M.value}`,a)}},H=new WeakMap,L=t=>H.get(t)??{width:t.offsetWidth,height:t.offsetHeight},T={create:A,draw(t,e,n){const{rows:a,cx:s,y:c,unit:i,labelHeight:l,height:u,svg:h,values:m,after:g}=n,p=a[0],y=a[a.length-1];if(!p||!y)return;const w=l+18*i,v=10*i,M=10*i;let k=s(0),x=c(p.value)-w,A=s(a.length-1),S=c(y.value)-w,H=0;a.forEach((t,e)=>{const n=A===k?0:(s(e)-k)/(A-k),a=x+n*(S-x)-(c(t.value)-w);a>H&&(H=a)}),x-=H,S-=H;const T=A-k,z=S-x,C=Math.hypot(T,z)||1,O=T/C,U=z/C;k-=O*v,x-=U*v,A+=O*v,S+=U*v;const B=Number.parseFloat(t.getAttribute("data-at")||"0.5");if(e){const t=k+(A-k)*B,n=x+(S-x)*B,o=L(e).width*i/2,r=n+L(e).height*i/2+8*i;let u=0;a.forEach((e,n)=>{const a=(m[n]?L(m[n]).width:0)*i/2;if(Math.abs(s(n)-t)>=o+a)return;const d=c(e.value)-7*i-l;u=Math.max(u,r-d)}),x-=u,S-=u}const E=A-O*M,F=S-U*M,P=Math.hypot(E-k,F-x)/i+1;h.appendChild(b("line",{class:o,"data-note":n.note,x1:k,y1:x,x2:E,y2:F,style:`--len:${P.toFixed(1)}; ${f("--after",g)}`}));const q=-U,I=O,V=.42*M;h.appendChild(b("polygon",{class:r,"data-note":n.note,points:[`${A},${S}`,`${E+q*V},${F+I*V}`,`${E-q*V},${F-I*V}`].join(" "),style:f("--after",g)})),e&&($(e,k+(A-k)*B,x+(S-x)*B,d,u),e.style.setProperty("--after",String(g)));const j=Number.parseFloat(t.getAttribute("data-years")||"");!Number.isNaN(j)&&j>0&&N(e,((t,e,n)=>100*(Math.pow(e/t,1/n)-1))(p.value,y.value,j),`${p.value} to ${y.value} over ${j} years`,n)}},z=(t,e,n)=>{const a=.15,o=Math.min(.7*t/(e+(e-1)*a),n),r=e*o+(e-1)*o*a;return{size:o,gap:o*a,offset:t=>-r/2+t*o*1.15}},C=(t,e,n)=>{const a=t.series[n],o=t.series.some(t=>t.focus)&&!a.focus;return{"data-series":n+1,...o&&{"data-muted":""},style:`--n:${n}; --m:${o?1:0}; --palette:var(--tablechart-color-${n+1}); ${f("--i",e.slot)}`}},O=(t,e)=>{let n=0;return Array.from({length:e},(e,a)=>{const o=t.cells[a]??t.cells[0],r=n;return!o.missing&&o.value>0&&(n+=o.value),{from:r,to:n,cell:o}})},U=(t,e)=>O(t,e).at(-1)?.to??0,B=(t,e,n)=>{const a=e.series.some(t=>t.focus);t.style.setProperty("--n",String(n)),t.style.setProperty("--m",a&&!e.series[n].focus?"1":"0"),t.style.setProperty("--palette",`var(--tablechart-color-${n+1})`)},E=(t,e,a,o={})=>{const r=b("g",{class:m(n,e),"data-kind":"bar","data-row":a+1,...o,"data-stack":"",style:f("--i",e.slot)});return t.svg.appendChild(r),(n,a)=>{r.appendChild(b("rect",{...a,class:m("tablechart-piece",e),...C(t,e,n)}))}},F=(t,e,n)=>t.some(t=>L(t).width*n>e-6*n),P=(t,e,n)=>e>=L(t).height*n*1.6,q=(t,e,n)=>e>=L(t).width*n*1.5,I=(t,e,n,a,o=.7)=>{t.style.setProperty(a,"1");let r=1;for(const c of e){const{size:t,room:e}=n(c);t>e&&(r=Math.min(r,e/t))}const s=r>=o?r:0;return t.style.setProperty(a,String(s||o)),s},V={segments:t=>t.map(t=>({...t,from:0,to:t.value,kind:"bar"})),series:!0,legend:"box",stackable:!0,totals:!0,breakable:!0,aspect:.5,minHeight:({labelHeight:t,nameHeight:e,rows:n,series:a,stacked:o})=>{const r=1.1*t,s=a>1&&!o?r*(a+.15*(a-1))/.7:r/.58;return n*Math.max(s,1.2*e)},categories:"beside",headroom:()=>0,draw(t){const{segments:e,height:o,unit:r,svg:s,values:c,categories:i,config:l,barMax:u}=t,h=t.series.length>1,g=Math.max(M(i.map(t=>L(t).width*r)),0),p=Math.min(g+10*r,420),y=d-4*r,w=t.stacked?Math.max(M(t.rows.map(e=>U(e,t.series.length))),0)||1:Math.max(M(t.rows.flatMap(e=>e.cells.slice(0,t.series.length).map(t=>Math.abs(t.value)))),0)||1,v=Math.max(w,t.squeeze?.hi??0),k=(e,n)=>((t,e,n,a,o)=>{if(!a)return t/e*n;const{lo:r,hi:s,gap:c,share:i}=a,l=n*i,u=(n-l-o)/(r+(e-s)),d=l/(s-r);return t<=r?t*u:t<=c?r*u+(t-r)*d:t<=s?r*u+(t-r)*d+o:r*u+l+o+(t-s)*u})(Math.abs(e),v,n,t.squeeze,t.breakGap),x=o/e.length,A=t=>(t+.5)*x,N=Math.min(x*l.barfill,u),S=z(x,t.series.length,u),H=c[0]??t.totals[0],T=H?L(H).height*r*.56:0,F=Math.max(((h&&!t.stacked?S.size:N)-T)/2,5*r),P=t=>L(t).width*r,V=t=>t.length?M(t.map(P))+F+4*r:0;let j=t.stacked?V(t.totals):h?V(t.seriesValues.flat()):0;if(!h)for(let n=0;n<3;n++){const t=y-p-j,n=V(e.map((t,e)=>({seg:t,label:c[e]})).filter(({seg:e,label:n})=>!q(n,k(e.value,t),r)).map(({label:t})=>t));if(n<=j)break;j=n}const K=y-p-j,R=t=>p+k(t,K);if(t.squeeze&&(t.breakX=R(t.squeeze.gap)),t.stacked)return t.rows.forEach((e,n)=>{const a=E(t,e,n,{"data-grow":"right"}),s=A(n)-N/2,c=O(e,t.series.length);c.forEach(({from:e,to:c,cell:i},l)=>{const u=t.seriesValues[l][n];if(u.dataset.place="none",i.missing||c===e)return;const h=R(e),f=R(c);a(l,{x:h,y:s,width:Math.max(f-h,1),height:N}),u.dataset.place="inside",u.toggleAttribute("data-left-out",!q(u,f-h,r)||L(u).height*r>N),B(u,t,l),$(u,(h+f)/2,A(n),d,o)});const l=t.totals[n];l&&(l.dataset.place="after",$(l,R(c.at(-1)?.to??0)+F,A(n),d,o));const u=i[n];u&&$(u,p-8*r,A(n),d,o)}),void s.appendChild(b("line",{class:a,x1:p,x2:p,y1:0,y2:o}));if(h){t.plot.dataset.grouped="";const e=t.seriesValues.flat().filter(t=>void 0===t.dataset.missing),c=I(t.plot,e,t=>({size:L(t).height*r,room:S.size+.5*S.gap}),"--tablechart-fit");return t.rows.forEach((e,a)=>{t.series.forEach((r,i)=>{const l=e.cells[i]??e.cells[0],u=t.seriesValues[i][a];if(l.missing)return void(u.dataset.place="none");const h=R(l.value),f=A(a)+S.offset(i);s.appendChild(b("rect",{class:m(n,e),"data-kind":"bar","data-row":a+1,"data-grow":"right",x:p,y:f,width:Math.max(h-p,1),height:S.size,...C(t,e,i)})),u.dataset.place="after",u.toggleAttribute("data-left-out",!c),$(u,h+F,f+S.size/2,d,o)});const l=i[a];l&&$(l,p-8*r,A(a),d,o)}),void s.appendChild(b("line",{class:a,x1:p,x2:p,y1:0,y2:o}))}const W=e.map((t,e)=>q(c[e],R(t.value)-p,r));e.forEach((e,a)=>{const l=R(e.value),u=A(a);s.appendChild(b("rect",{class:m(n,e),"data-kind":e.kind,"data-row":a+1,"data-grow":"right",x:p,y:u-N/2,width:Math.max(l-p,1),height:N,style:f("--i",e.slot)}));const h=c[a],g=Math.max(Math.min(F,l-p-P(h)-6*r),6*r);h.dataset.place=W[a]?"inside":"after",h.dataset.kind=e.kind,$(h,W[a]?"center"===t.insideAlign?(p+l)/2:"start"===t.insideAlign?p+g+P(h)/2:l-g-P(h)/2:l+F,u,d,o);const y=i[a];y&&$(y,p-8*r,u,d,o)}),s.appendChild(b("line",{class:a,x1:p,x2:p,y1:0,y2:o}))}},j={segments:t=>t.map(t=>({...t,from:0,to:t.value,kind:"bar"})),series:!0,legend:"box",stackable:!0,totals:!0,breakable:!0,headroom:({labelHeight:t,badgeHeight:e,hasAnnotations:n,unit:a})=>t+4*a+(n?1.6*e:0),draw(t){const{segments:e,cx:o,y:r,barWidth:s,height:c,unit:i,svg:l,values:u,labels:h,insideAlign:g}=t,p=r(0);if(t.stacked)return t.rows.forEach((e,n)=>{const a=E(t,e,n),l=o(n)-s/2;O(e,t.series.length).forEach(({from:e,to:u,cell:h},f)=>{const b=t.seriesValues[f][n];if(b.dataset.place="none",h.missing||u===e)return;const m=r(u),g=r(e);a(f,{x:l,y:m,width:s,height:Math.max(g-m,1)}),b.dataset.place="inside",b.toggleAttribute("data-left-out",!P(b,g-m,i)||L(b).width*i>s-4*i),B(b,t,f),$(b,o(n),(m+g)/2,d,c)});const u=t.totals[n],h=O(e,t.series.length).at(-1)?.to??0;u&&(u.dataset.place="outside",$(u,o(n),r(h)-4*i,d,c))}),void l.appendChild(b("line",{class:a,x1:0,x2:d,y1:p,y2:p}));if(t.series.length>1){const e=z(o(1)-o(0)||2*o(0),t.series.length,t.barMax);t.plot.dataset.grouped="";const s=t.seriesValues.flat().filter(t=>void 0===t.dataset.missing),u=I(t.plot,s,t=>({size:L(t).width*i,room:e.size+.5*e.gap}),"--tablechart-fit");return t.rows.forEach((a,s)=>{t.series.forEach((h,f)=>{const g=a.cells[f]??a.cells[0],y=t.seriesValues[f][s],w=o(s)+e.offset(f);if(g.missing)return void(y.dataset.place="none");const v=r(g.value);l.appendChild(b("rect",{class:m(n,a),"data-kind":"bar","data-row":s+1,x:w,y:v,width:e.size,height:Math.max(p-v,1),...C(t,a,f)})),y.dataset.place="outside",y.toggleAttribute("data-left-out",!u),$(y,w+e.size/2,v-4*i,d,c)})}),void l.appendChild(b("line",{class:a,x1:0,x2:d,y1:p,y2:p}))}const y=F(u,s,i),w=e.map((t,e)=>"inside"===h&&!y&&!t.missing&&P(u[e],p-r(t.value),i)),v=u[0]?L(u[0]).height*i*.56:0;let M=Number.POSITIVE_INFINITY;for(const[n,a]of u.entries())w[n]&&(M=Math.min(M,(s-L(a).width*i)/2));e.forEach((t,e)=>{const a=r(t.value);if(t.missing)return $(u[e],o(e),p-4*i,d,c),void(u[e].dataset.place="outside");l.appendChild(b("rect",{class:m(n,t),"data-kind":t.kind,"data-row":e+1,x:o(e)-s/2,y:a,width:s,height:Math.max(p-a,1),style:f("--i",t.slot)}));const h=Math.min(M,(p-a-v)/2),y="center"===g?(a+p)/2:"start"===g?p-h-v/2:a+h+v/2;$(u[e],o(e),w[e]?y:a-4*i,d,c),u[e].dataset.place=w[e]?"inside":"outside"}),l.appendChild(b("line",{class:a,x1:0,x2:d,y1:p,y2:p}))}},K=0,R={aspect:.66,centre:!0,headroom:()=>0,segments:t=>t.map(t=>({...t,from:0,to:t.value,kind:"bar"})),draw({rows:t,height:e,unit:n,labelHeight:a,svg:o,values:r,config:c,centre:i}){const l=500,u=e/2,h=(t=>t.filter(t=>!t.isTotal))(t).reduce((t,e)=>t+Math.abs(e.value),0);if(!h)return;const g=1.2*a+10*n,p=Math.max(Math.min(d,e)/2-g,10),y=p*c.ringfill,w=p-y/2,v=2*Math.PI*w,M=[];let k=0,x=0;if(t.forEach((t,c)=>{const i=r[c];if(t.isTotal)return void(i.dataset.place="none");const g=Math.abs(t.value)/h*v,A=k/v*2*Math.PI-Math.PI/2;M.push(A),o.appendChild(b("circle",{class:m(s,t),"data-slice":x+1,"data-row":c+1,cx:l,cy:u,r:w,"stroke-width":y,transform:`rotate(-90 500 ${u})`,"stroke-dasharray":`${g.toFixed(1)} ${(v-g).toFixed(1)}`,"stroke-dashoffset":(-k).toFixed(1),style:`--n:${x}; --palette:var(--tablechart-color-${x+1}); --arc:${g.toFixed(1)}; --circ:${v.toFixed(1)}; ${f("--i",t.slot)}`}));const N=A+g/v*Math.PI,S=Math.cos(N),H=Math.sin(N);o.appendChild(b("line",{class:"tablechart-leader",x1:l+S*(p+2*n),y1:u+H*(p+2*n),x2:l+S*(p+7*n),y2:u+H*(p+7*n),"data-row":c+1,style:f("--i",t.slot)}));const T=p+9*n,z=L(i).width*n/2;$(i,l+S*(T+Math.abs(S)*z),u+H*(T+Math.abs(H)*a*.7),d,e),i.dataset.place="around",k+=g,x+=1}),M.length>1){const t=w-y/2-1,n=w+y/2+1,a="tablechart-slices-"+ ++K,r=b("mask",{id:a,maskUnits:"userSpaceOnUse"});r.appendChild(b("rect",{x:0,y:0,width:d,height:e,fill:"white"}));for(const e of M)r.appendChild(b("line",{class:"tablechart-divide",x1:l+Math.cos(e)*t,y1:u+Math.sin(e)*t,x2:l+Math.cos(e)*n,y2:u+Math.sin(e)*n}));const c=b("g",{mask:`url(#${a})`});for(const e of Array.from(o.querySelectorAll(`.${s}`)))c.appendChild(e);const i=b("defs");i.appendChild(r),o.prepend(i,c)}i&&$(i,l,u,d,e)}},W=["circle","square","diamond"],D=(t,e)=>{const n=t[e]?.marker?.toLowerCase().split(/\s+/)??[],a=W.find(t=>n.includes(t));return{shape:a??W[Math.floor(e/2)%W.length],open:n.includes("open")||!n.includes("filled")&&!a&&e%2==1}},G=t=>Number(t.toFixed(2));function Z(t,e,n){const a=new Array(t).fill(0);let o=[];const r=()=>{(function(t,e){const n=t.length;if(n<2)return t.map(()=>0);const a=n=>(e[n+1]-e[n])/(t[n+1]-t[n]||1),o=new Array(n).fill(0);for(let s=1;s<n-1;s++){const e=a(s-1),n=a(s);if(e*n<=0)continue;const r=t[s]-t[s-1],c=t[s+1]-t[s],i=(e*c+n*r)/(r+c||1),l=Math.min(2*Math.abs(e),2*Math.abs(n),Math.abs(i));o[s]=Math.sign(e)*l||0}if(2===n)return o[0]=a(0),o[1]=a(0),o;const r=(n,a,o)=>{const r=t[a]-t[n];return r?((e[a]-e[n])/r*3-o)/2:o};return o[0]=r(0,1,o[1]),o[n-1]=r(n-2,n-1,o[n-2]),o})(o.map(t=>n(t)[0]),o.map(t=>n(t)[1])).forEach((t,e)=>{a[o[e]]=t}),o=[]};for(let s=0;s<t;s++)e(s)?r():o.push(s);return r(),a}var J=t=>t.map(t=>({...t,from:0,to:t.value,kind:"bar"})),Q=t=>({segments:J,series:!0,stackable:!0,swatch:t?"box":void 0,headroom:({labelHeight:t,unit:e})=>1.6*t+6*e,footroom:({labelHeight:e,unit:n,series:a,focused:o,stacked:r})=>t||r||2!==a||o?0:e+7*n,draw(e){const{rows:n,series:o,seriesValues:r,names:s,cx:c,y:l,height:u,unit:h,labelHeight:f,svg:m,stacked:g}=e,p="step"===e.shape,w="smooth"===e.shape,v=o.length>1,M=o.some(t=>t.focus),k=n.length-1,x=l(0),A=n.length>1?c(1)-c(0):2*c(0);m.style.setProperty("--tablechart-base",`${G(x)}px`);const N=(t,e)=>n[e]?.cells[t]??n[e]?.cells[0],S=(t,e)=>!N(t,e)||!!N(t,e)?.missing,H=n.map(t=>g?O(t,o.length):null),T=(t,e)=>H[e]?.[t].to??N(t,e)?.value??0,z=(t,e)=>H[e]?.[t].from??0,C=(t,e)=>[c(e),l(T(t,e))],U=o.map((t,e)=>{if(!v)return{attrs:{},ink:""};const n=M&&!t.focus;return{attrs:{"data-series":e+1,...n&&{"data-muted":""}},ink:`--n:${e}; --m:${n?1:0}; --palette:var(--tablechart-color-${e+1}); `}}),B=Math.min(k,6),E=k>0?B/(p?n.length:k):1,F=t=>t*E,P=t=>`--i:${G(F(t))}`,q=t=>{const e=[];let a=-1;return n.forEach((n,o)=>{S(t,o)||(a<0&&(a=o),(o===k||S(t,o+1))&&((p||o>a)&&e.push([a,o]),a=-1))}),e},I=(t,e)=>`--i:${G(F(t)+1)}; --d:${G(F(p?e+1:e)-F(t))}`,V=(t,e)=>({"data-from":t+1,"data-to":e+1,...p&&{"data-flat":""}}),j=w?o.map((t,e)=>Z(n.length,t=>S(e,t),t=>C(e,t))):[],K=w&&t?o.map((t,e)=>Z(n.length,t=>S(e,t),t=>[c(t),l(z(e,t))])):[],R=(t,e,n)=>{const a=[];return t.forEach(([o,r],s)=>{p?(a.push(`H${G(o+n*A/2)}`),s<t.length-1&&a.push(`V${G(t[s+1][1])}`)):s>0&&a.push(e?function(t,e,n,a){const[o,r]=function(t,e,n,a){const o=(e[0]-t[0])/3;return[[t[0]+o,t[1]+n*o],[e[0]-o,e[1]-a*o]]}(t,e,n,a),s=([t,e])=>`${G(t)},${G(e)}`;return`C${s(o)} ${s(r)} ${s(e)}`}(t[s-1],[o,r],e[s-1],e[s]):`L${G(o)},${G(r)}`)}),a},W=(t,e,a,o)=>n.slice(e,a+1).map((n,a)=>[c(e+a),l(o(t,e+a))]),J=(t,e,n,a)=>w?t[e].slice(n,a+1):null,Q=t=>c(t)-(p?A/2:0),X=t=>c(t)+(p?A/2:0);t&&o.forEach((t,e)=>(t=>{const e=b("g",{class:"tablechart-area",...U[t].attrs,...g&&{"data-stacked":""},style:U[t].ink}),n=q(t),a=b("g",{class:"tablechart-area-fill",style:`--rows:${G(B+1)}; ${n.length?I(...n[0]):""}`});e.appendChild(a);for(const[o,r]of n){const e=W(t,o,r,T),n=W(t,o,r,z),s=J(K,t,o,r)?.reverse()??null,c=[`M${G(Q(o))},${G(n[0][1])}`,`L${G(Q(o))},${G(e[0][1])}`,...R(e,J(j,t,o,r),1),`L${G(X(r))},${G(n[n.length-1][1])}`,...R(n.reverse(),s,-1),"Z"].join(" ");a.appendChild(b("path",{d:c,...V(o,r),style:I(o,r)}))}m.appendChild(e)})(e)),o.forEach((t,e)=>(t=>{const e=o[t];for(const[n,a]of q(t)){const o=W(t,n,a,T),r=[`M${G(Q(n))},${G(o[0][1])}`,...R(o,J(j,t,n,a),1)].join(" ");m.appendChild(b("path",{class:"tablechart-series",...U[t].attrs,d:r,...e.line&&{"data-line":e.line},...V(n,a),style:`${U[t].ink}${I(n,a)}`}))}})(e)),p||(()=>{const t=o.map((t,e)=>v?D(o,e):{shape:"circle",open:!1}),e=(e,n,a)=>{const[o,r]=C(e,n);return((t,e,n,a,o={})=>{if("square"===t){const t=.88*a;return b("rect",{x:e-t,y:n-t,width:2*t,height:2*t,...o})}if("diamond"===t){const t=1.2*a;return b("polygon",{points:`${e},${n-t} ${e+t},${n} ${e},${n+t} ${e-t},${n}`,...o})}return b("circle",{cx:e,cy:n,r:a,...o})})(t[e].shape,o,r,4*h,{...a,style:`${a.style??""}${s=r,`--rise:${G(x-s)}px; `}${P(n)}`});var s},a=t=>n.map((t,e)=>e).filter(e=>!S(t,e));y(m,o.flatMap((n,o)=>t[o].open?a(o).map(t=>e(o,t,{class:i,"data-row":t+1,...v&&{"data-series":o+1}})):[]),d,u),o.forEach((n,o)=>{for(const r of a(o))m.appendChild(e(o,r,{class:"tablechart-point",...U[o].attrs,"data-marker":t[o].shape,...t[o].open&&{"data-open":""},"data-row":r+1,style:U[o].ink}))})})();const Y=(t,e)=>{let n=e;for(;n<k&&!S(t,n+1)&&N(t,n+1)?.value===N(t,e)?.value;)n++;return n};r.forEach((e,n)=>{e.forEach((e,a)=>{e.style.setProperty("--i",String(G(p?(F(a)+F(a+1))/2:F(a))));const s=((e,n)=>{const a=N(e,n);if(!a||a.missing)return"none";if(p&&n>0&&!S(e,n-1)&&N(e,n-1)?.value===a.value)return"none";if(M&&!o[e].focus)return"none";if(g)return"middle";if(!v||M||o.length>2)return"above";const r=N(1-e,n);return!r||r.missing||a.value>r.value||a.value===r.value&&0===e||t&&C(e,n)[1]+7*h+f>x?"above":"below"})(n,a);if(e.dataset.place="above"===s?"outside":s,e.toggleAttribute("data-left-out","none"!==s&&((t,e)=>g||p?L(r[t][e]).width*h>(p?Y(t,e)-e+1:1)*A-4*h||g&&l(z(t,e))-l(T(t,e))<1.2*f:v&&!M&&o.length>2)(n,a)),p&&"none"!==s?e.dataset.rowEnd=String(Y(n,a)+1):delete e.dataset.rowEnd,"none"===s)return;const i=L(e).width*h/2+4*h;let b=c(a);p?b=(c(a)+c(Y(n,a)))/2:"middle"===s&&0===a?b+=i:"middle"===s&&a===k&&(b-=i);const m=l(T(n,a)),y={middle:(l(z(n,a))-m)/2,above:-7*h,below:7*h};$(e,b,m+y[s],d,u)})});const _=s.map((t,e)=>{let n=k;for(;n>0&&S(e,n);)n--;const[a,o]=C(e,n);return{name:t,x:(p?a+A/2:a)+10*h,y:g?(o+l(z(e,n)))/2:o}}),tt=(s[0]?L(s[0]).height:0)*h;for(const t of((t,e)=>(t.sort((t,e)=>t.y-e.y),t.forEach((n,a)=>{const o=t[a-1];o&&n.y<o.y+e&&(n.y=o.y+e)}),t))(_,tt))$(t.name,t.x,t.y,d,u);const et=t||g||2!==o.length||M?x:u-2*h;m.appendChild(b("line",{class:a,x1:0,x2:c(k)+c(0),y1:et,y2:et}))}}),X=Q(!1),Y=Q(!0),_={segments:t=>{let e=0;return t.map(t=>{if(t.isTotal)return e=t.value,{...t,from:0,to:t.value,kind:"total"};const n=e;return e+=t.value,{...t,from:n,to:e,kind:t.value>=0?"up":"down"}})},breakable:!0,headroom:({labelHeight:t,badgeHeight:e,hasAnnotations:n,unit:a})=>t+6*a+(n?1.6*e:0),draw({segments:t,cx:e,y:o,barWidth:r,height:s,unit:c,svg:i,values:l,breakAt:u,closing:h,insideAlign:g}){const p=o(0),y=F(l,r,c),w=g??"center",v=t.map((e,n)=>{const a=o(Math.max(e.from,e.to)),r=Math.abs(o(e.from)-o(e.to)),s=null!==u&&Math.min(e.from,e.to)<u&&Math.max(e.from,e.to)>u;return{top:a,length:r,down:"down"===e.kind||"total"===e.kind&&n>0&&n===t.length-1&&"down"===h,inside:!s&&!y&&P(l[n],r,c)}}),M=l[0]?L(l[0]).height*c*.56:0;let k=Number.POSITIVE_INFINITY;for(const[n,a]of v.entries())a.inside&&(k=Math.min(k,(r-L(l[n]).width*c)/2));t.forEach((n,a)=>{const s=t[a+1];if(!s)return;const c=o(n.to),l=e(a)+r/2,u=e(a+1)-r/2;i.appendChild(b("line",{class:"tablechart-connector",x1:l,x2:u,y1:c,y2:c,"data-row":a+2,style:f("--i",s.slot)}))}),t.forEach((t,a)=>{const{top:o,length:u,down:h,inside:g}=v[a];i.appendChild(b("rect",{class:m(n,t),"data-kind":t.kind,"data-row":a+1,"data-grow":h?"down":"up",x:e(a)-r/2,y:o,width:r,height:Math.max(u,1),style:f("--i",t.slot)}));const p=l[a],y=Math.min(k,(u-M)/2),x="center"===w?o+u/2:"end"===w!==h?o+y+M/2:o+u-y-M/2;p.dataset.place=g?"inside":"outside",p.dataset.kind=t.kind;const A=g?x:"down"===t.kind?o+u+L(p).height*c+3*c:o-3*c;$(p,e(a),A,d,s)}),i.appendChild(b("line",{class:a,x1:0,x2:d,y1:p,y2:p}))}},tt={enabled:!1,log(...e){tt.enabled&&console.log(`[${t}]`,...e)},timed(e,n,a){if(!tt.enabled)return a();const o=performance.now(),r=a(),s=performance.now()-o,c=n.querySelectorAll("tbody tr").length;return s>50?console.warn(`[${t}] ${e} took ${s.toFixed(1)} ms for ${c} rows, more than 50 ms.`,n):tt.log(`${e} took ${s.toFixed(1)} ms for ${c} rows.`,n),r}},et=t=>{const e=(t?.textContent||"").trim(),n=e.match(/^(.*?)(-?\d+(?:[.,]\d+)?)(.*)$/);return{raw:e,number:n?.[2]??"",prefix:n?.[1]??"",suffix:n?.[3]??"",missing:!n,value:n?Number.parseFloat(n[2].replace(",",".")):0}},nt=t=>Array.from(t.querySelector("thead tr:last-child")?.children??[]).slice(1),at=["axis-break","trend","bracket"],ot=t=>{const e=t.plan;if(!e)return;const n=e=>null===e||t.step-e>=1;for(const a of t.figure.querySelectorAll("[data-from]")){const t=Number(a.dataset.from)-1,o=Number(a.dataset.to)-1,r=a.closest("[data-series]")?.dataset.series,s=r?e.series[Number(r)-1]:void 0;let c=t-1;if(s&&null!==s.step)c=n(s.step)?o:t-1;else for(;c<o&&n(e.rows[c+1]?.step??null);)c++;const i=a.hasAttribute("data-flat")?(c-t+1)/(o-t+1):o>t?Math.max(0,c-t)/(o-t):0;a.style.setProperty("--reveal",String(i))}},rt=(t,e,n=!1)=>{const a=t.plan;if(!a)return;const o=Math.min(Math.max(Math.round(e),0),a.count),r=o!==t.step;t.step=o,t.figure.style.setProperty("--tablechart-step",String(o)),ot(t);const[s,c]=t.controls?.querySelectorAll("button")??[];s&&(s.disabled=0===o),c&&(c.disabled=o===a.count),r&&!n&&t.figure.dispatchEvent(new CustomEvent("tablechart:step",{bubbles:!0,detail:{step:o,steps:a.count}}))},st={area:Y,bar:V,column:j,donut:R,line:X,waterfall:_},ct={"axis-break":v,trend:T,bracket:S},it=Object.keys(ct),lt=t=>{let e="";for(let n=t.previousSibling;n&&(e=(n.textContent??"")+e,!e.trim());n=n.previousSibling);return e.trim()},ut=["straight","step","smooth"],dt=(t,e)=>{const n=t.dataset.chartShape;return n&&ut.includes(n)?n:ut.includes(e.shape)?e.shape:"straight"},ht=0,ft=(n,a,o=null)=>{const r=o??(n.getAttribute("data-chart")||"column"),s=st[r];if(!s)return console.warn(`[${t}] Unknown chart type "${r}". Known types: ${Object.keys(st).join(", ")}.`),n.setAttribute("data-chart-empty",""),null;const i=((t,e="data-i18n")=>Array.from(t.querySelectorAll("tbody tr")).map((t,n)=>{const a=t.querySelector("th"),o=Array.from(t.querySelectorAll("td")).map(et);return o.length||o.push(et(null)),{...o[0],label:(a?.textContent||"").trim(),key:e&&a?.getAttribute(e)||null,cells:o,classes:Array.from(t.classList),isTotal:"total"===t.getAttribute("data-kind"),slot:n}}))(n,a.langattribute);if(!i.length)return console.warn(`[${t}] A chart has no rows in its table, so there is nothing to draw.`),n.setAttribute("data-chart-empty",""),null;(t=>{const e=t.querySelector(":scope > figcaption");if(!e)return;(t=>{for(const e of t.querySelectorAll("br")){if(e.previousElementSibling?.classList.contains("tablechart-sr"))continue;if(/[.!?:;,…]$/.test(lt(e)))continue;const t=document.createElement("span");t.className=u,t.textContent=". ",e.before(t)}})(e);const n=t=>t.hasAttribute("aria-label")||t.hasAttribute("aria-labelledby"),a=t=>{e.id||(e.id="tablechart-caption-"+ ++ht),t.setAttribute("aria-labelledby",e.id)};"FIGURE"!==t.tagName||n(t)||a(t);const o=t.querySelector("table");!o||n(o)||o.querySelector(":scope > caption")||a(o)})(n);let l=((t,e,n="data-i18n")=>{const a=nt(t),o=Math.max(1,M(e.map(t=>t.cells.length)));return Array.from({length:o},(t,e)=>{const o=a[e];return{name:(o?.textContent||"").trim(),key:n&&o?.getAttribute(n)||null,focus:"focus"===o?.getAttribute("data-kind"),marker:o?.getAttribute("data-marker")??null,line:(r=o?.getAttribute("data-line"),"dashed"===r||"dotted"===r?r:null)};var r})})(n,i,a.langattribute);l.length>1&&!s.series&&(console.warn(`[${t}] A ${r} chart draws one series; only the first of the table's ${l.length} value columns is used.`),l=l.slice(0,1));const d=l.length>1;d&&n.style.setProperty("--tablechart-series-count",String(l.length));const h=n.hasAttribute("data-chart-stack");h&&!s.stackable&&console.warn(`[${t}] A ${r} chart cannot be stacked.`);const f=h&&!!s.stackable&&d;f&&i.some(t=>t.cells.slice(0,l.length).some(t=>t.value<0))&&console.warn(`[${t}] A stacked chart has a value below zero. It takes no room in the stack.`);const m=document.createElement("div");m.className="tablechart-plot",m.setAttribute("aria-hidden","true");const $=b("svg",{role:"presentation",focusable:"false"});m.appendChild($),n.appendChild(m);const p=s.centre?i.filter(t=>!t.isTotal):i,y=Math.max(0,M(p.flatMap(t=>t.cells.slice(0,l.length).map(t=>k(t.number))))),w=l.map((t,n)=>i.map((t,a)=>{const o=t.cells[n]??t.cells[0],r=g(e,m);return r.classList.add(...t.classes),r.dataset.value=String(o.value),o.prefix&&(r.dataset.prefix=o.prefix),o.suffix&&(r.dataset.suffix=o.suffix),o.missing&&(r.dataset.missing=o.raw),d&&(r.dataset.series=String(n+1)),r.dataset.row=String(a+1),r.style.setProperty("--i",String(t.slot)),r})),v=w[0],x=f&&s.totals?i.map((t,n)=>{const a=g(e,m);a.classList.add(...t.classes),a.dataset.kind="total",a.dataset.row=String(n+1),a.dataset.value=String(U(t,l.length));const o=t.cells[0];return o.prefix&&(a.dataset.prefix=o.prefix),o.suffix&&(a.dataset.suffix=o.suffix),a.style.setProperty("--i",String(t.slot)),a}):[],A=i[i.length-1],N=l.some(t=>t.focus),S=n.getAttribute("data-chart-legend"),H=d&&(null===S?a.legend||void 0!==s.legend:"false"!==S)?document.createElement("div"):null;H&&(H.className=c,H.setAttribute("aria-hidden","true"),H.inert=!0);const L=d?l.map((t,e)=>{const o=g("tablechart-name",H??m);H&&(o.dataset.place="legend");const r=s.legend??s.swatch;if(r&&(o.dataset.swatch=r),o.textContent=t.name,!r&&"step"!==dt(n,a)){const t=D(l,e);o.dataset.marker=t.shape,o.toggleAttribute("data-open",t.open)}return t.line&&!r&&(o.dataset.line=t.line),t.key&&a.langattribute&&o.setAttribute(a.langattribute,t.key),o.dataset.series=String(e+1),o.style.setProperty("--n",String(e)),o.style.setProperty("--palette",`var(--tablechart-color-${e+1})`),o.style.setProperty("--m",N&&!t.focus?"1":"0"),o.style.setProperty("--i",String(A.slot)),o}):[],T=s.centre?g("tablechart-centre",m):null;if(T){const t=i.find(t=>t.isTotal),e=t?t.value:i.reduce((t,e)=>t+Math.abs(e.value),0);T.dataset.value=String(e),t&&(T.dataset.decimals=String(k(t.number)))}const z=T&&!i.some(t=>t.isTotal)?((t,e,n)=>{const a=t.querySelector("table");if(!a)return null;const o=a.querySelector("tfoot [data-chart-total]");if(o)return o.dataset.value=e.dataset.value??"0",o;const r=(a.tFoot??a.createTFoot()).insertRow(),s=document.createElement("th");s.scope="row",s.textContent=n.totallabel;const c=t.getAttribute("data-chart-keys");c&&n.langattribute&&s.setAttribute(n.langattribute,`${c}-total`);const i=r.insertCell();return i.setAttribute("data-chart-total",""),i.dataset.value=e.dataset.value??"0",r.prepend(s),i})(n,T,a):null,C="beside"===s.categories,O=document.createElement("div");O.className="tablechart-categories",O.setAttribute("aria-hidden","true"),O.inert=!0,C?O.dataset.place="beside":s.centre&&(O.dataset.place="key"),O.style.setProperty("--tablechart-columns",String(i.length));let B=0;for(const[t,e]of i.entries()){const n=document.createElement("span");n.classList.add(...e.classes),n.textContent=e.label,e.key&&a.langattribute&&n.setAttribute(a.langattribute,e.key),s.centre&&(n.dataset.kind=e.isTotal?"total":"slice",e.isTotal||(n.dataset.slice=String(B+1),n.style.setProperty("--n",String(B)),n.style.setProperty("--palette",`var(--tablechart-color-${B+1})`),B+=1)),n.style.setProperty("--i",String(e.slot)),n.dataset.row=String(t+1),O.appendChild(n)}(C?m:n).appendChild(O),H&&n.appendChild(H);const E=a.animate?(t=>{const e=t.hasAttribute("data-fragment"),n=Array.from(t.querySelectorAll("tbody tr")),a=Array.from(t.querySelector("thead tr:last-child")?.children??[]).slice(1),o=Array.from(t.querySelectorAll("[data-annotation]")).filter(t=>at.includes(t.getAttribute("data-annotation")??"")),r=t=>t.hasAttribute("data-fragment");if(!(e||n.some(r)||a.some(r)||o.some(r)))return null;const s=[],c=new Map,i=[],l=t=>{let e=null!==t?c.get(t):void 0;return void 0===e&&(e=s.length,s.push(t),i.push(0),null!==t&&c.set(t,e)),e};let u=0;const d=n.map(t=>{if(!e&&!r(t))return{step:null,slot:u++};const n=l(t.getAttribute("data-fragment-index"));return{step:n,slot:i[n]++}}),h=a.map(t=>({step:r(t)?l(t.getAttribute("data-fragment-index")):null}));return{rows:d,series:h,notes:o.map(t=>{const e=(e,n)=>{const a=Number.parseInt(t.getAttribute(e)??"",10);return Number.isFinite(a)?a-1:n},[n,a]="bracket"===t.getAttribute("data-annotation")?[e("data-from",0),e("data-to",d.length-1)]:[0,d.length-1];let o=null;for(let r=Math.min(n,a);r<=Math.max(n,a);r++){const t=d[r]?.step??null;null!==t&&(null===o||t>o)&&(o=t)}const s=h[e("data-series",0)]?.step??null;null!==s&&(null===o||s>o)&&(o=s),r(t)&&(o=l(t.getAttribute("data-fragment-index")));const c=null===o?d.length:d.filter(t=>t.step===o).length;return{step:o,after:c}}),count:s.length,indexes:s}})(n):null;E&&(n.setAttribute("data-steps",""),n.setAttribute("data-chart-animate","across"));const F=n.getAttribute("data-chart-keys"),P=E&&a.controls?((t,e,n)=>{const a=document.createElement("div");a.className="tablechart-controls";const o=a=>{const o=document.createElement("button");o.type="button",o.className=`tablechart-${a}`,o.dataset.go=a;const r=document.createElement("span");r.className="tablechart-control-icon",r.setAttribute("aria-hidden","true");const s=b("svg",{viewBox:"0 0 16 16",focusable:"false"});s.appendChild(b("path",{d:"next"===a?"M6 3l5 5-5 5":"M10 3L5 8l5 5"})),r.appendChild(s);const c=document.createElement("span");c.className="tablechart-control-label",c.textContent=t[a];const i=e[a];i&&n&&c.setAttribute(n,i);const l=document.createElement("span");return l.className=u,l.textContent=t.hint,e.hint&&n&&l.setAttribute(n,e.hint),o.append(..."next"===a?[c,l,r]:[r,c,l]),o};return a.append(o("previous"),o("next")),a})({previous:a.previouslabel,next:a.nextlabel,hint:a.stephint},{previous:F&&`${F}-previous`,next:F&&`${F}-next`,hint:F&&`${F}-step`},a.langattribute):null;P&&n.appendChild(P);const q=Array.from(n.querySelectorAll("[data-annotation]")).map(e=>{const n=e.getAttribute("data-annotation"),a=ct[n];if(!a)return console.warn(`[${t}] Unknown annotation "${n}". Known annotations: ${Object.keys(ct).join(", ")}.`),null;const o=Number.parseInt(e.getAttribute("data-series")??"1",10),r=o>=1&&o<=l.length?o-1:0;return o!==r+1&&console.warn(`[${t}] An annotation reads line ${o}, which the chart does not have; it reads the first.`),{spec:e,type:a,badge:a.create(e,m),series:r,after:i.length}}).filter(t=>null!==t);if(a.animate){const t=n.getAttribute("data-chart-animate"),e="up"===("up"===t||"across"===t?t:a.animate)&&("line"===r||"area"===r);n.setAttribute("data-animate",e?"up":"")}const I={figure:n,plot:m,svg:$,rows:i,decimals:y,type:s,values:v,series:l,seriesValues:w,names:H?[]:L,categories:Array.from(O.children),centre:T,stacked:f,totals:x,totalCell:z,rowAt:null,rowBox:null,annotations:q,checks:[],plan:E,step:0,controls:P};return P?.addEventListener("click",t=>{const e=t.target.closest("button")?.dataset.go;e&&rt(I,I.step+("next"===e?1:-1))}),rt(I,0,!0),a.hover&&"false"!==n.getAttribute("data-chart-hover")&&yt(I),$t(I,a),I},bt=t=>{const e=getComputedStyle(t).getPropertyValue("--tablechart-inside-align").trim();return"start"===e||"center"===e||"end"===e?e:null},mt=(t,e,n,a)=>{const o=getComputedStyle(t),r=(o.getPropertyValue(n).trim()||a).match(/^(\d+(?:\.\d+)?)(px|%|em|rem)$/);if(!r)return null;const s=Number(r[1]);return"%"===r[2]?s/100*d:s*("em"===r[2]?Number.parseFloat(o.fontSize):"rem"===r[2]?Number.parseFloat(getComputedStyle(document.documentElement).fontSize):1)*e},gt=(t,e)=>mt(t,e,"--tablechart-bar-max","60px")??Number.POSITIVE_INFINITY,$t=(t,e)=>{const n=[...t.seriesValues.flat(),...t.totals,...t.totalCell?[t.totalCell]:[]];for(const a of t.centre?[...n,t.centre]:n){const{missing:n,prefix:o="",suffix:r=""}=a.dataset;if(void 0!==n){a.textContent=n;continue}const[s,c]=x(Number.parseFloat(a.dataset.value||"0"),a.dataset.decimals?Number(a.dataset.decimals):t.decimals,e.locale);if(a.textContent=o+(o?s:"")+c+r,s&&!o){const t=document.createElement("span");t.className="tablechart-minus",t.textContent=s,a.prepend(t)}}},pt=(t,e)=>{t.figure.classList.toggle("is-shown",e),e||t.plot.removeAttribute("data-pointed")},yt=t=>{const{plot:e}=t,n=()=>[...t.seriesValues.flat(),...t.totals];e.setAttribute("data-hover","");const a=document.createElement("div");a.className="tablechart-pointer",e.prepend(a);const o=()=>{e.removeAttribute("data-active");for(const t of n())t.removeAttribute("data-active")},r=r=>{if(!e.classList.contains("is-placed")||!t.rowAt)return;const s=e.getBoundingClientRect(),c=s.width/e.offsetWidth||1,i=t.rowAt((r.clientX-s.left)/c,(r.clientY-s.top)/c),l=null===i?null:i+1,u=t=>"none"!==t.dataset.place,d=null===l?[]:n().filter(t=>((t,e)=>{const n=Number(t.dataset.row),a=Number(t.dataset.rowEnd??n);return e>=n&&e<=a})(t,l)&&u(t));if(!n().some(t=>t.hasAttribute("data-left-out")&&u(t))||!d.length)return o();e.setAttribute("data-pointed",""),e.setAttribute("data-active",String(l));const[h,f,b,m]=t.rowBox?.(l-1)??[0,0,0,0];Object.assign(a.style,{left:`${h}%`,top:`${f}%`,width:`${b}%`,height:`${m}%`});for(const t of n())t.toggleAttribute("data-active",d.includes(t))};e.addEventListener("pointermove",r),e.addEventListener("pointerdown",r),e.addEventListener("pointerleave",t=>{"mouse"===t.pointerType&&o()}),document.addEventListener("pointerdown",t=>{e.contains(t.target)||o()})},wt=t=>"id"===t||"style"===t||t.startsWith("data-chart"),vt=/^\s*(?:Table)?:\s+/,Mt=t=>"P"===t?.tagName&&vt.test(t.textContent??""),kt=/^\s*([a-z][\w-]*)((?:\s+[\w-]+=[^\s:]+)*)\s*(:\s*|$)/,xt=t=>{const e=At(t);return"P"===e?.tagName?e:t},At=t=>{const e=Array.from(t.childNodes).filter(t=>t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&t.textContent?.trim());return 1===e.length&&e[0]instanceof HTMLElement?e[0]:null},Nt="strong, b, span.total",St="data-chart-made",Ht=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches,Lt=new Set,Tt=null,zt=["column","bar"],Ct=t=>{const e=t.getAttribute("data-chart")||"column";if(!zt.includes(e))return null;const n=getComputedStyle(t).getPropertyValue("--tablechart-type").trim();return zt.includes(n)?n:e},Ot=async(e,n)=>{const a=(t=>t.map(t=>{const e=t.closest("p"),n=Mt(e)?e:t;if("TABLE"!==n.tagName&&"P"!==n.tagName)return n;const a=document.createElement("div");((t,e)=>{for(const{name:n,value:a}of Array.from(t.attributes))("class"===n||wt(n))&&(e.setAttribute(n,a),t.removeAttribute(n))})(t,a),t.classList.length||t.removeAttribute("class");const o="TABLE"===n.tagName?n:null,r=n.previousElementSibling;let s=n.nextElementSibling;const c=o?Mt(r)?r:Mt(s)?s:null:n;o&&c===s&&(s=s?.nextElementSibling??null);const i=s?.classList.contains("chart-annotations")?s:(t=>{if("UL"!==t?.tagName&&"OL"!==t?.tagName)return null;const e=Array.from(t.children),n=e.map(t=>t.hasAttribute("data-annotation")?null:(t=>{const e=xt(t).firstChild;if(e?.nodeType!==Node.TEXT_NODE)return null;const n=kt.exec(e.textContent??"");if(!n||!it.includes(n[1]))return null;if(!n[3]&&e.nextSibling)return null;const a=n[2].trim().split(/\s+/).filter(Boolean).map(t=>t.split("="));return{name:n[1],options:a,text:e,length:n[0].length}})(t));return!e.length||e.some((t,e)=>!n[e]&&!t.hasAttribute("data-annotation"))?null:(e.forEach((t,e)=>{const a=n[e],o=xt(t);if(o!==t&&o.replaceWith(...o.childNodes),a){t.setAttribute("data-annotation",a.name);for(const[e,n]of a.options)t.setAttribute(`data-${e}`,n);a.text.textContent=(a.text.textContent??"").slice(a.length)}t.children.length&&Array.from(t.childNodes).filter(t=>t.nodeType===Node.ELEMENT_NODE||t.textContent?.trim()).forEach((t,e)=>{const n=document.createElement("span");0===e&&t instanceof HTMLElement&&t.matches("em, i")?(n.className="tablechart-caption",n.append(...t.childNodes),t.replaceWith(n)):t.nodeType===Node.TEXT_NODE&&(n.textContent=(t.textContent??"").trim(),t.replaceWith(n))})}),t.classList.add("chart-annotations"),t)})(s);return n.replaceWith(a),c&&a.append((t=>{const e=document.createElement("figcaption");for(const{name:r,value:s}of Array.from(t.attributes))e.setAttribute(r,s);const n=t.firstChild;n?.nodeType===Node.TEXT_NODE&&(n.textContent=(n.textContent??"").replace(vt,""),n.textContent||n.remove());const a=Array.from(t.childNodes),o=a.findIndex(t=>"BR"===t.nodeName);if(e.append(...-1===o?a:a.slice(0,o+1)),-1!==o&&o<a.length-1){const t=document.createElement("span");t.append(...a.slice(o+1)),e.append(t)}return t.remove(),e})(c)),o&&a.append(o),i&&a.append(i),tt?.log?.(`A ${o?"table":"caption"} with chart attributes was wrapped in a figure of its own`),a}))(e.filter(t=>!t.hasAttribute(St)));return await(async e=>{await Promise.all(e.filter(t=>t.hasAttribute("data-chart-src")).map(async e=>{const n=e.getAttribute("data-chart-src");for(const t of e.querySelectorAll("table"))t.remove();try{const t=await fetch(n);if(!t.ok)throw new Error(`${t.status} ${t.statusText}`);const a=await t.json(),o=Array.isArray(a)?a:a?.rows;if(!Array.isArray(o))throw new Error("no array of rows in it");const r=Array.isArray(a?.series)?a.series.map(String):[],s=e.querySelector(":scope > figcaption"),c=((t,e=[])=>{const n=document.createElement("table");if(e.length){const t=n.createTHead().insertRow();t.append(document.createElement("th"));for(const n of e){const e=document.createElement("th");e.textContent=n,t.append(e)}}const a=n.createTBody();for(const o of t){const t=a.insertRow();"total"===o.kind&&(t.dataset.kind="total");const e=document.createElement("th");e.textContent=String(o.label??""),t.append(e);for(const n of o.values??[o.value??null])t.insertCell().textContent=null===n?"":String(n)}return n})(o,r);s?s.after(c):e.prepend(c),tt?.log?.(`Read ${o.length} rows from "${n}"`)}catch(a){const e="file:"===window.location.protocol;console.warn(`[${t}] Could not read the chart data in "${n}": ${a.message}.`+(e?" A page opened from the file system cannot fetch files; open the page from a server instead.":""))}}))})(a),(t=>{for(const e of t){for(const n of e.querySelectorAll("tbody tr")){const t=n.cells[0];if("TD"!==t?.tagName||n.cells.length<2)continue;const e=document.createElement("th");for(const{name:n,value:a}of Array.from(t.attributes))e.setAttribute(n,a);e.append(...t.childNodes),t.replaceWith(e);for(let a=At(e);a?.matches(Nt);a=At(e))n.dataset.kind="total",a.replaceWith(...a.childNodes)}const t=Array.from(e.querySelector("thead tr:last-child")?.children??[]);for(const e of t.slice(1))for(let t=At(e);t?.matches(Nt);t=At(e))e.setAttribute("data-kind","focus"),t.replaceWith(...t.childNodes)}})(a),((e,n)=>{if(!n)return;const a=new Map;for(const o of e){let e=o.getAttribute("data-chart-keys")||null;if(!e)continue;if(a.has(e)){const n=a.get(e)+1;a.set(e,n),console.warn(`[${t}] Two charts on the page have data-chart-keys="${e}". If two charts use the same keys, they get the same translations. This one uses "${e}-${n}".`),e=`${e}-${n}`}else a.set(e,1);o.querySelectorAll("tbody th").forEach((t,a)=>{t.getAttribute(n)||t.setAttribute(n,`${e}-row${a+1}`)});const r=nt(o);r.length>1&&r.forEach((t,a)=>{t.getAttribute(n)||t.setAttribute(n,`${e}-col${a+1}`)}),tt?.log?.(`Keys for "${e}" written onto ${o.querySelectorAll("tbody th").length} rows`)}})(a,n.langattribute),a},Ut=(e,n)=>{const a=tt.timed("Building",e,()=>ft(e,n));return a?(e.setAttribute(St,""),((e,n)=>{let a=e,o=Ct(a.figure),r=null,s=!1,l=!1;const u=async()=>{if(!n.animate)return pt(a,!0);const t=a.figure.classList.contains("is-shown");if(!s||null===r||t||l)!s&&n.replay&&t&&pt(a,!1);else{l=!0;const t=Ht()?null:(t=>{for(let e=t;e&&e!==document.body;e=e.parentElement)if("0"===getComputedStyle(e).opacity)return e;return null})(a.figure);t&&await(e=t,new Promise(t=>{const n=["animationstart","transitionrun"],a=()=>{for(const t of n)document.removeEventListener(t,o,!0);r.disconnect(),t()},o=t=>{t.target instanceof Node&&t.target.contains(e)&&a()},r=new MutationObserver(()=>{"0"!==getComputedStyle(e).opacity&&a()});for(const e of n)document.addEventListener(e,o,!0);r.observe(e,{attributes:!0,attributeFilter:["class","style"]})})),await(async(t,e)=>{if(Ht())return;await new Promise(requestAnimationFrame);const n=t.getAnimations().filter(t=>t instanceof CSSAnimation);for(let r=t.parentElement;r&&r!==document.body;r=r.parentElement)n.push(...r.getAnimations());let a=0;for(const r of n){const t=r.effect?.getComputedTiming(),n=Number(t?.activeDuration??0);if(!t||!Number.isFinite(n))continue;const o=Number(t.delay??0)+n*e;a=Math.max(a,o-Number(r.currentTime??0))}var o;a>0&&await(o=a,new Promise(t=>setTimeout(t,o)))})(a.figure,((t,e)=>{const n=Number.parseFloat(t.dataset.chartEntrance??""),a=Number.isFinite(n)?n:e.entrance;return Math.min(Math.max(a,0),1)})(a.figure,n)),l=!1,!s&&n.replay||pt(a,!0)}var e},h=()=>{const t=Ct(a.figure);if(!t||t===o)return;const e=tt.timed("Building",a.figure,()=>ft(a.figure,n,t));e&&((t=>{t.plot.remove(),t.categories[0]?.parentElement?.remove(),t.figure.querySelector(`:scope > .${c}`)?.remove(),t.controls?.remove()})(a),rt(e,a.step,!0),a=e,o=t,r=null)},f=()=>{h();const e=a.plot.clientWidth;e&&e!==r&&tt.timed("Layout",a.figure,()=>((e,n)=>{const{plot:a,svg:o,rows:r,type:s,values:c,series:l,seriesValues:u,names:h,annotations:f}=e,m=a.clientWidth;if(!m)return!1;const g=d/m,$=Number.parseFloat(e.figure.dataset.chartAspect??""),p=d*($>0?$:s.aspect??n.aspect);a.classList.add("is-placed");for(const t of[...u.flat(),...e.totals])delete t.dataset.place;a.style.removeProperty("--tablechart-fit"),(t=>{const e=[...t].filter(t=>!!t),n=e.map(t=>({width:t.offsetWidth,height:t.offsetHeight}));e.forEach((t,e)=>H.set(t,n[e]))})([...u.flat(),...e.totals,...h,...e.categories,...f.map(t=>t.badge)]);const w=(c[0]?L(c[0]).height:0)*g,v=f[0]?.badge?L(f[0].badge).height*g:0,k=Math.max(p,mt(e.figure,g,"--tablechart-min-height","200px")??0,s.minHeight?.({labelHeight:w,nameHeight:Math.max(0,M(e.categories.map(t=>L(t).height)))*g,unit:g,rows:r.length,series:l.length,stacked:e.stacked})??0),x=e.stacked?r.map(t=>{const e=U(t,l.length);return{...t,value:e,cells:t.cells.map((t,n)=>0===n?{...t,value:e}:t)}}):r,A=(s.segments??(t=>t.map(t=>({...t,from:0,to:t.value,kind:"bar"}))))(e.stacked?x.map(t=>({...t,cells:[t.cells[0]]})):r),N={labelHeight:w,badgeHeight:v,hasAnnotations:f.length>0,unit:g,series:l.length,focused:l.some(t=>t.focus),stacked:e.stacked},S=s.headroom?.(N)??w,T=2*g+(s.footroom?.(N)??0),z=S,C=e.stacked?Math.max(M(x.map(t=>t.value)),0):Math.max(M(A.flatMap(t=>[t.from,t.to,t.value])),M(r.flatMap(t=>t.cells.slice(0,l.length).map(t=>t.value)))),O=k-z-T,B=1.02*C,E=f.find(t=>"axis-break"===t.spec.getAttribute("data-annotation"))?.spec,F=t=>{const e=Number.parseFloat(E?.getAttribute(t)??"");return Number.isFinite(e)?e:null},P=F("data-from")??F("data-at"),q=F("data-to");let V=null;if(E&&(null!==P||null!==q)){const e=P??0,n=q??B,a=null===q?e:null===P?n:(e+n)/2,o=E.getAttribute("data-size"),r=o?.match(/^\s*(\d+(?:\.\d+)?)\s*%\s*$/);null===o||r||console.warn(`[${t}] data-size="${o}" is not a percentage, such as 30%. Using the default.`);const c=Math.min(Math.max(r?Number(r[1])/100:null===q?.22:.3,.05),.8),i=A.filter(t=>("up"===t.kind||"down"===t.kind)&&Math.max(t.from,t.to)>e&&Math.min(t.from,t.to)<n);s.breakable?e<0||n<=e||n>B||0===e&&n===B?console.warn(`[${t}] A break from ${e} to ${n} does not fit a scale that runs from 0 to ${C}.`):i.length?console.warn(`[${t}] A break from ${e} to ${n} would cut a step that floats. Keep it below or above the steps.`):V={lo:e,hi:n,gap:a,share:c}:console.warn(`[${t}] This kind of chart cannot break its scale.`)}const j=V?V.gap:null,K=(V&&mt(e.figure,g,"--tablechart-break-gap",""))??13,R=k-T;let W=t=>R-t/B*O;if(V){const{lo:t,hi:e,gap:n,share:a}=V,o=O*a,r=(O-o-K)/(t+(B-e)),s=o/(e-t);W=a=>a<=t?R-a*r:a<=n?R-t*r-(a-t)*s:a<=e?R-t*r-(a-t)*s-K:R-t*r-o-K-(a-e)*r}const D=h.length?M(h.map(t=>L(t).width))*g+12*g:0,G=e.categories[0]?.parentElement;G&&(G.style.paddingRight=D?D/d*100+"%":"");const Z=(d-D)/r.length,J=t=>t>=0&&t<r.length?t:null;e.rowAt=s.centre?null:"beside"===s.categories?(t,e)=>J(Math.floor(e*g/(k/r.length))):t=>J(Math.floor(t*g/Z));const Q=Z/d*100,X=100/r.length;e.rowBox="beside"===s.categories?t=>[0,t*X,100,X]:t=>[t*Q,0,Q,100],o.setAttribute("viewBox",`0 0 1000 ${k}`),o.textContent="",e.checks=[];const Y={rows:r,segments:A,cx:t=>(t+.5)*Z,y:W,barWidth:Math.min(Z*n.barfill,gt(e.figure,g)),barMax:gt(e.figure,g),height:k,unit:g,labelHeight:w,badgeHeight:v,after:r.length,note:0,labels:"inside"===e.figure.dataset.chartLabels||"outside"!==e.figure.dataset.chartLabels&&"inside"===n.labels?"inside":"outside",closing:"up"===(e.figure.dataset.chartClosing??n.closing)?"up":"down",insideAlign:bt(e.figure),breakAt:j,squeeze:V,breakGap:K,stacked:e.stacked,shape:dt(e.figure,n),totals:e.totals,svg:o,plot:a,values:c,series:l,seriesValues:u,names:h,categories:e.categories,centre:e.centre,config:n,checks:e.checks};s.draw(Y);for(const[t,i]of f.entries()){i.badge?.setAttribute("data-note",String(t+1));const n=i.series,a=t=>({...t,...t.cells[n]??t.cells[0]});i.type.draw(i.spec,i.badge,{...Y,...e.stacked&&{rows:x,...e.totals.length&&{values:e.totals}},...n>0&&!e.stacked&&{rows:r.map(a),segments:A.map(t=>{const e=a(t);return"bar"===t.kind?{...e,to:e.value}:e}),values:u[n]},after:i.after,note:t+1})}(t=>{const e=t.plan;if(!e)return;const n=e.rows.length-1,a=(t,e,n,a)=>{t.style.setProperty(n,String(a)),t.style.removeProperty("--d"),null===e?t.style.removeProperty("--step"):t.style.setProperty("--step",String(e))};for(const o of t.figure.querySelectorAll("[data-row], [data-series], [data-note]")){if(o.closest("table, .tablechart-controls")||o.hasAttribute("data-from"))continue;const t=Number(o.dataset.note);if(t>0){const n=e.notes[t-1];n&&a(o,n.step,"--after",n.after);continue}const r=o.dataset.row?Number(o.dataset.row)-1:n;if(o.classList.contains("tablechart-connector")){const t=e.rows[r-1],n=e.rows[r];if(t&&n){const e=(t.step??-1)>(n.step??-1);a(o,e?t.step:n.step,"--i",e?t.slot+1:n.slot)}continue}const s=o.dataset.series?e.series[Number(o.dataset.series)-1]:void 0;s&&null!==s.step?a(o,s.step,"--i",r):e.rows[r]&&a(o,e.rows[r].step,"--i",e.rows[r].slot)}ot(t)})(e);const _=e.categories[0]?.parentElement;return _&&"beside"!==s.categories&&!s.centre&&I(_,e.categories.filter(t=>null!==t.offsetParent),t=>({size:t.scrollWidth,room:t.clientWidth}),"--tablechart-name-fit"),y(o,f.flatMap(({badge:t})=>{if(!(t instanceof HTMLElement&&t.offsetWidth))return[];const e=t.offsetWidth*g,n=t.offsetHeight*g,a=Number.parseFloat(t.style.left)/100*d,o=Number.parseFloat(t.style.top)/100*k,r=getComputedStyle(t).borderTopLeftRadius,s=r.endsWith("%")?Number.parseFloat(r)/100:null,c=(Number.parseFloat(r)||0)*g;return[b("rect",{class:i,"data-for":"badge","data-note":t.dataset.note??"",x:a-e/2,y:o-n/2,width:e,height:n,rx:null===s?c:e*s,ry:null===s?c:n*s,style:["--after","--step"].map(e=>t.style.getPropertyValue(e)&&`${e}:${t.style.getPropertyValue(e)}`).filter(Boolean).join("; ")})]}),d,k),!0})(a,n))&&(r=e,u())};let m=!1;const g=new ResizeObserver(()=>{m||(m=!0,requestAnimationFrame(()=>{m=!1,f()}))}),$=new IntersectionObserver(t=>{for(const e of t)s=e.isIntersecting,u()},{threshold:n.threshold}),p=()=>pt(a,!0),w=()=>{r=null,f()},v={relabel:()=>$t(a,n),refresh:w};h(),f(),g.observe(a.figure),$.observe(a.figure),window.addEventListener("beforeprint",p),(t=>{Lt.add(t),Tt||(Tt=new MutationObserver(()=>{for(const t of Lt)t.relabel();requestAnimationFrame(()=>requestAnimationFrame(()=>{for(const t of Lt)t.refresh()}))})).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]})})(v);const k={figure:a.figure,refresh:w,next:()=>rt(a,a.step+1),previous:()=>rt(a,a.step-1),stepTo:t=>rt(a,t),get step(){return a.step},get steps(){return a.plan?.count??0},destroy(){g.disconnect(),$.disconnect(),window.removeEventListener("beforeprint",p),(t=>{Lt.delete(t),!Lt.size&&Tt&&(Tt.disconnect(),Tt=null)})(v),a.figure.tablechart===k&&delete a.figure.tablechart}};return a.figure.tablechart=k,k})(a,n)):null};window.Tablechart={init:async(t={},e=document)=>{const n={...h,...t};n.debug&&(tt.enabled=!0);const a=(await Ot(Array.from(e.querySelectorAll(n.selector)),n)).map(t=>Ut(t,n)).filter(t=>null!==t);return tt.log(`Made ${a.length} chart(s).`),{charts:a,refresh:()=>{for(const t of a)t.refresh()},destroy:()=>{for(const t of a)t.destroy()}}},create:async(t,e={})=>{if(t.tablechart)return t.tablechart;const n={...h,...e};n.debug&&(tt.enabled=!0);const[a]=await Ot([t],n);return a?Ut(a,n):null},defaultConfig:h}}();
|
package/dist/tablechart.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { r as e, t,
|
|
1
|
+
import { r as e, t, y as n } from "./tablechart-shared.mjs";
|
|
2
2
|
export { t as create, n as defaultConfig, e as init };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@martinomagnifico/tablechart",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Simple charts from an HTML or Markdown table: column, bar, line, area, waterfall and donut, with annotations. A chart builds when it scrolls into view.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|