From cad514cc17501521a1aad826470861e2a9128d2d Mon Sep 17 00:00:00 2001 From: ansuz Date: Mon, 16 Aug 2021 17:21:45 +0530 Subject: [PATCH] remove hacky experiments with charts.css ...and finalize forms changes --- customize.dist/src/less2/include/charts.less | 19 -- www/common/inner/charts.js | 54 ------ www/common/toolbar.js | 6 +- www/form/app-form.less | 10 ++ www/form/inner.js | 172 ++++++++----------- www/lib/chart/charts.min.css | 1 - www/test/index.html | 11 -- www/test/inner.js | 68 -------- 8 files changed, 85 insertions(+), 256 deletions(-) delete mode 100644 www/common/inner/charts.js delete mode 100644 www/lib/chart/charts.min.css delete mode 100644 www/test/index.html delete mode 100644 www/test/inner.js diff --git a/customize.dist/src/less2/include/charts.less b/customize.dist/src/less2/include/charts.less index 022a327cf..c8b983707 100644 --- a/customize.dist/src/less2/include/charts.less +++ b/customize.dist/src/less2/include/charts.less @@ -50,23 +50,4 @@ } } } - - - - &.bar { - th { - //width: 200px !important; - font-size: 10px; // XXX - } - - - - - td { - margin-top: 0.25em; - background: @cryptpad_color_brand_fade !important; - color: @cryptpad_color_grey_100 !important; //text_col !important; - font-weight: bold; - } - } } diff --git a/www/common/inner/charts.js b/www/common/inner/charts.js deleted file mode 100644 index f6962b5ad..000000000 --- a/www/common/inner/charts.js +++ /dev/null @@ -1,54 +0,0 @@ -define([ - '/common/hyperscript.js', - -], function (h) { - var Charts = {}; - - Charts.table = function (content, classes) { - var classString = Array.isArray(classes)? '.' + classes.filter(Boolean).join('.'): ''; - return h('table' + classString, content); - }; - - Charts.columns = function (rows) { - return Charts.table([ - //h('caption', "Front-End Developer Salary"), - h('tbody', rows.map(function (n) { - return h('tr', h('td', { - style: '--size: ' + (n / 100), - }, h('span.data', n))); - })), - ], [ - 'charts-css', - 'column', - 'show-heading', - ]); - }; - - Charts.row = function (text, count, data) { - return h('tr', [ - h('th', { - scope: 'row', - }, text), - h('td', { - style: '--size: ' + count, - }, [ - //text, - typeof(data) !== 'undefined'? h('span.data', data): text, - ]) - ]); - }; - - // table.charts-css.bar.reverse -/* - Charts.bars = function (rows) { - return Charts.table([ - - ], [ - - - ]); - }; -*/ - - return Charts; -}); diff --git a/www/common/toolbar.js b/www/common/toolbar.js index ccc1c5e78..47c0b578e 100644 --- a/www/common/toolbar.js +++ b/www/common/toolbar.js @@ -455,10 +455,6 @@ MessengerUI, Messages, Pages) { return $container; }; - //Messages.collapse = Messages.admin_support_collapse; - Messages.ui_collapse = "Collapse toolbar"; // XXX - Messages.ui_expand = "Expand toolbar"; // XXX - createCollapse = function (toolbar) { var up = h('i.fa.fa-chevron-up', {title: Messages.ui_collapse}); var down = h('i.fa.fa-chevron-down', {title: Messages.ui_expand}); @@ -1383,7 +1379,7 @@ MessengerUI, Messages, Pages) { toolbar.$file.show(); addElement([ 'chat', - 'collapse', // XXX + 'collapse', 'userlist', 'title', 'useradmin', 'spinner', 'newpad', 'share', 'access', 'limit', 'unpinnedWarning', 'notifications' diff --git a/www/form/app-form.less b/www/form/app-form.less index a38867d34..1621e735d 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -590,6 +590,16 @@ &.cp-value { min-width: 200px; } + &.cp-bar-container { + width: 99%; + padding: 0px; + position: relative; + .cp-bar { + position: absolute; + background: @cryptpad_color_brand; + height: 100%; + } + } } } } diff --git a/www/form/inner.js b/www/form/inner.js index a54fc53c3..8bb47432c 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -23,7 +23,6 @@ define([ '/common/inner/share.js', '/common/inner/access.js', '/common/inner/properties.js', - '/common/inner/charts.js', '/lib/datepicker/flatpickr.js', '/bower_components/sortablejs/Sortable.min.js', @@ -38,7 +37,6 @@ define([ 'css!/bower_components/codemirror/addon/dialog/dialog.css', 'css!/bower_components/codemirror/addon/fold/foldgutter.css', 'css!/lib/datepicker/flatpickr.min.css', - //'css!/lib/chart/charts.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'less!/form/app-form.less', ], function ( @@ -62,7 +60,7 @@ define([ DiffMd, SFCodeMirror, CMeditor, - Share, Access, Properties, Charts, + Share, Access, Properties, Flatpickr, Sortable ) @@ -805,7 +803,7 @@ define([ return total; }; - var getEmpty = function (empty) { // XXX don't include this in the scrollable area + var getEmpty = function (empty) { // TODO don't include this in the scrollable area if (empty) { return UI.setHTML(h('div.cp-form-results-type-text-empty'), Messages._getKey('form_notAnswered', [empty])); } @@ -959,42 +957,28 @@ define([ return Array.isArray(A)? Math.max.apply(null, A): NaN; }; - var CLASSIC_MODE = true; - var renderTally = function (tally, empty, caption) { - var rows = []; - if (CLASSIC_MODE) { - Object.keys(tally).forEach(function (value) { - rows.push(h('div.cp-form-results-type-radio-data', [ - h('span.cp-value', value), - h('span.cp-count', tally[value]) - ])); - }); - if (empty) { rows.push(getEmpty(empty)); } - return rows; - } + var barGraphic = function (itemScale) { + return h('span.cp-bar-container', h('div.cp-bar', { + style: 'width: ' + (itemScale * 100) + '%', + }, ' ')); + }; + var renderTally = function (tally, empty, showBar) { + var rows = []; var counts = Util.values(tally); var max = arrayMax(counts); - - Object.keys(tally).forEach(function (answer) { - rows.push(Charts.row(answer, tally[answer] / max, tally[answer])); + Object.keys(tally).forEach(function (value) { + var itemCount = tally[value]; + var itemScale = (itemCount / max); + + rows.push(h('div.cp-form-results-type-radio-data', [ + h('span.cp-value', value), + h('span.cp-count', itemCount), + showBar? barGraphic(itemScale): undefined, + ])); }); - var hasCaption = typeof(caption) !== 'undefined'; - var table = Charts.table([ - hasCaption ? h('caption', caption): undefined, - h('tbody', rows) - ], [ - 'charts-css', - 'bar', - hasCaption? 'show-heading': undefined, - 'show-labels', - 'show-data-on-hover', - ]); - - return [ - table, - empty? getEmpty(empty): undefined, - ]; + if (empty) { rows.push(getEmpty(empty)); } + return rows; }; var TYPES = { @@ -1042,10 +1026,10 @@ define([ if (!answer || !answer.trim()) { return empty++; } Util.inc(tally, answer); }); - var counts = Util.values(tally); - var max = arrayMax(counts); + //var counts = Util.values(tally); + //var max = arrayMax(counts); - if (CLASSIC_MODE || max < 2) { // there are no duplicates, so just return text + //if (max < 2) { // there are no duplicates, so just return text Object.keys(answers).forEach(function (author) { var obj = answers[author]; var answer = obj.msg[uid]; @@ -1054,10 +1038,11 @@ define([ }); results.push(getEmpty(empty)); return h('div.cp-form-results-type-text', results); - } - - var rendered = renderTally(tally, empty /*, caption */); + //} +/* + var rendered = renderTally(tally, empty); return h('div.cp-form-results-type-text', rendered); +*/ }, icon: h('i.cptools.cptools-form-text') }, @@ -1181,10 +1166,11 @@ define([ }; }, - printResults: function (answers, uid) { + printResults: function (answers, uid, form, content) { // results radio var empty = 0; var count = {}; + var showBars = Boolean(content); Object.keys(answers).forEach(function (author) { var obj = answers[author]; var answer = obj.msg[uid]; @@ -1192,10 +1178,8 @@ define([ Util.inc(count, answer); }); - var rendered = renderTally(count, empty/*, caption */); - return h('div.cp-form-results-type-radio', { - style: CLASSIC_MODE? '': 'width: 100%', - }, rendered); + var rendered = renderTally(count, empty, showBars); + return h('div.cp-form-results-type-radio', rendered); }, icon: h('i.cptools.cptools-form-list-radio') }, @@ -1304,21 +1288,20 @@ define([ var q = findItem(opts.items, q_uid); var c = count[q_uid]; - - if (CLASSIC_MODE) { - var values = Object.keys(c).map(function (res) { - return h('div.cp-form-results-type-radio-data', [ - h('span.cp-value', res), - h('span.cp-count', c[res]) - ]); - }); - results.push(h('div.cp-form-results-type-multiradio-data', [ - h('span.cp-mr-q', q), - h('span.cp-mr-value', values) - ])); - return; - } - + var values = Object.keys(c).map(function (res) { + var itemCount = c[res]; + return h('div.cp-form-results-type-radio-data', [ + h('span.cp-value', res), + h('span.cp-count', itemCount), + //barGraphic((itemCount / max) * 100) + ]); + }); + results.push(h('div.cp-form-results-type-multiradio-data', [ + h('span.cp-mr-q', q), + h('span.cp-mr-value', values) + ])); + return; +/* var table = Charts.table([ h('caption', { style: 'color: var(--msg-color)', @@ -1337,12 +1320,11 @@ define([ results.push(h('div.cp-form-results-type-multiradio-data', { style: 'width: 100%', }, table)); +*/ }); results.push(getEmpty(empty)); - return h('div.cp-form-results-type-radio', { - style: CLASSIC_MODE? '': 'width: 100%', - }, results); + return h('div.cp-form-results-type-radio', results); }, exportCSV: function (answer, form) { var opts = form.opts || {}; @@ -1424,10 +1406,11 @@ define([ }; }, - printResults: function (answers, uid) { + printResults: function (answers, uid, form, content) { // results checkbox var empty = 0; var count = {}; + var showBars = Boolean(content); Object.keys(answers).forEach(function (author) { var obj = answers[author]; var answer = obj.msg[uid]; @@ -1437,7 +1420,7 @@ define([ }); }); - var rendered = renderTally(count, empty /*, caption */); + var rendered = renderTally(count, empty, showBars); return h('div.cp-form-results-type-radio', rendered); }, icon: h('i.cptools.cptools-form-list-check') @@ -1560,21 +1543,17 @@ define([ var q = findItem(opts.items, q_uid); var c = count[q_uid]; - - if (CLASSIC_MODE) { - var values = Object.keys(c).map(function (res) { - return h('div.cp-form-results-type-radio-data', [ - h('span.cp-value', res), - h('span.cp-count', c[res]) - ]); - }); - results.push(h('div.cp-form-results-type-multiradio-data', [ - h('span.cp-mr-q', q), - h('span.cp-mr-value', values) - ])); - return; - } - + var values = Object.keys(c).map(function (res) { + return h('div.cp-form-results-type-radio-data', [ + h('span.cp-value', res), + h('span.cp-count', c[res]) + ]); + }); + results.push(h('div.cp-form-results-type-multiradio-data', [ + h('span.cp-mr-q', q), + h('span.cp-mr-value', values) + ])); +/* var table = Charts.table([ h('caption', { style: 'color: var(--msg-color)', @@ -1593,12 +1572,11 @@ define([ results.push(h('div.cp-form-results-type-multiradio-data', { style: 'width: 100%', }, table)); +*/ }); results.push(getEmpty(empty)); - return h('div.cp-form-results-type-radio', { - style: CLASSIC_MODE? '': 'width: 100%', - }, results); + return h('div.cp-form-results-type-radio', results); }, exportCSV: function (answer, form) { var opts = form.opts || {}; @@ -1636,7 +1614,7 @@ define([ into concatenating strings, which quickly turns the sortable list into complete nonsense. */ - Util.shuffleArray(opts.values); // XXX + Util.shuffleArray(opts.values); } var els = opts.values.map(function (data) { var uid = Util.uid(); @@ -1713,13 +1691,14 @@ define([ }; }, - printResults: function (answers, uid, form) { + printResults: function (answers, uid, form, content) { // results sort var opts = form[uid].opts || TYPES.sort.defaultOpts; var l = (opts.values || []).length; //var results = []; var empty = 0; var count = {}; + var showBars = Boolean(content); Object.keys(answers).forEach(function (author) { var obj = answers[author]; var answer = obj.msg[uid]; @@ -1730,10 +1709,8 @@ define([ }); }); - var rendered = renderTally(count, empty /*, caption */); - return h('div.cp-form-results-type-radio', { - style: CLASSIC_MODE? '': 'width: 100%', - }, rendered); + var rendered = renderTally(count, empty, showBars); + return h('div.cp-form-results-type-radio', rendered); }, icon: h('i.cptools.cptools-form-list-ordered') }, @@ -1897,8 +1874,7 @@ define([ return A; }; - Messages.form_timelineLabel = "{0} ({1})"; // XXX - Messages.form_totalResponses = "Total responses: {0}"; // XXX + Messages.form_timelineLabel = "{0} ({1})"; // TODO investigate whether this needs translation var makeTimeline = APP.makeTimeline = function (answers) { // Randomly changing date of answers to get a more realistic example of timeline @@ -1991,7 +1967,7 @@ define([ var switchMode = h('button.btn.btn-secondary', Messages.form_showIndividual); $controls.hide().append(switchMode); - var show = function (answers, header) { + var show = function (answers, header) { // XXX var elements = content.order.map(function (uid) { var block = form[uid]; var type = block.type; @@ -1999,7 +1975,7 @@ define([ if (!model || !model.printResults) { return; } // Only use content if we're not viewing individual answers - var print = model.printResults(answers, uid, form, !header && content); + var print = model.printResults(answers, uid, form, !header && content); // XXX var q = h('div.cp-form-block-question', block.q || Messages.form_default); @@ -2016,7 +1992,7 @@ define([ $results.empty().append(elements); if (header) { $results.prepend(header); } }; - show(answers); + show(answers); // XXX if (APP.isEditor || APP.isAuditor) { $controls.show(); } @@ -2074,7 +2050,7 @@ define([ } var span = UI.setHTML(h('span'), text); var viewButton = h('button.btn.btn-secondary.small', Messages.form_viewButton); - var div = h('div.cp-form-individual', [span, viewButton, warning, badge]); + var div = h('div.cp-form-individual', [span, viewButton, warning, badge]); // XXX $(viewButton).click(function () { var res = {}; res[curve] = obj; @@ -2083,7 +2059,7 @@ define([ summary = true; $s.click(); }); - var header = h('div.cp-form-individual', [ + var header = h('div.cp-form-individual', [ // XXX span.cloneNode(true), back ]); diff --git a/www/lib/chart/charts.min.css b/www/lib/chart/charts.min.css deleted file mode 100644 index 322319ec5..000000000 --- a/www/lib/chart/charts.min.css +++ /dev/null @@ -1 +0,0 @@ -.charts-css{--color-1:rgba(240,50,50,0.75);--color-2:rgba(255,180,50,0.75);--color-3:rgba(255,220,90,0.75);--color-4:rgba(100,210,80,0.75);--color-5:rgba(90,165,255,0.75);--color-6:rgba(170,90,240,0.75);--color-7:hsla(0,0%,70.6%,0.75);--color-8:hsla(0,0%,43.1%,0.75);--color-9:rgba(170,150,110,0.75);--color-10:rgba(130,50,20,0.75);--chart-bg-color:#f5f5f5;--heading-size:0px;--primary-axis-color:#000;--primary-axis-style:solid;--primary-axis-width:1px;--secondary-axes-color:rgba(0,0,0,0.15);--secondary-axes-style:solid;--secondary-axes-width:1px;--data-axes-color:rgba(0,0,0,0.15);--data-axes-style:solid;--data-axes-width:1px;--legend-border-color:#c8c8c8;position:relative;display:block;width:100%;height:100%;margin:0 auto;padding:0;border:0;-webkit-print-color-adjust:exact;color-adjust:exact}.charts-css,.charts-css *,.charts-css::after,.charts-css ::after,.charts-css::before,.charts-css ::before{-webkit-box-sizing:border-box;box-sizing:border-box}table.charts-css{border-collapse:collapse;border-spacing:0;empty-cells:show;overflow:initial;background-color:transparent}table.charts-css caption,table.charts-css colgroup,table.charts-css tbody,table.charts-css td,table.charts-css th,table.charts-css thead,table.charts-css tr{display:block;margin:0;padding:0;border:0;background-color:transparent}table.charts-css colgroup,table.charts-css tfoot,table.charts-css thead{display:none}ol.charts-css,ul.charts-css{list-style-type:none}ol.charts-css li,ul.charts-css li{margin:0;padding:0;border:0}.charts-css:not(.show-heading) caption{display:none}.charts-css.show-heading{--heading-size:1.5rem}.charts-css.show-heading caption{display:block;width:100%;height:var(--heading-size)}.charts-css.area tbody tr td:nth-of-type(10n+1)::before,.charts-css.bar.multiple tbody tr td:nth-of-type(10n+1),.charts-css.bar tbody tr:nth-of-type(10n+1) td,.charts-css.column.multiple tbody tr td:nth-of-type(10n+1),.charts-css.column tbody tr:nth-of-type(10n+1) td,.charts-css.line tbody tr td:nth-of-type(10n+1)::before{background:var(--color,var(--color-1))}.charts-css.area tbody tr td:nth-of-type(10n+2)::before,.charts-css.bar.multiple tbody tr td:nth-of-type(10n+2),.charts-css.bar tbody tr:nth-of-type(10n+2) td,.charts-css.column.multiple tbody tr td:nth-of-type(10n+2),.charts-css.column tbody tr:nth-of-type(10n+2) td,.charts-css.line tbody tr td:nth-of-type(10n+2)::before{background:var(--color,var(--color-2))}.charts-css.area tbody tr td:nth-of-type(10n+3)::before,.charts-css.bar.multiple tbody tr td:nth-of-type(10n+3),.charts-css.bar tbody tr:nth-of-type(10n+3) td,.charts-css.column.multiple tbody tr td:nth-of-type(10n+3),.charts-css.column tbody tr:nth-of-type(10n+3) td,.charts-css.line tbody tr td:nth-of-type(10n+3)::before{background:var(--color,var(--color-3))}.charts-css.area tbody tr td:nth-of-type(10n+4)::before,.charts-css.bar.multiple tbody tr td:nth-of-type(10n+4),.charts-css.bar tbody tr:nth-of-type(10n+4) td,.charts-css.column.multiple tbody tr td:nth-of-type(10n+4),.charts-css.column tbody tr:nth-of-type(10n+4) td,.charts-css.line tbody tr td:nth-of-type(10n+4)::before{background:var(--color,var(--color-4))}.charts-css.area tbody tr td:nth-of-type(10n+5)::before,.charts-css.bar.multiple tbody tr td:nth-of-type(10n+5),.charts-css.bar tbody tr:nth-of-type(10n+5) td,.charts-css.column.multiple tbody tr td:nth-of-type(10n+5),.charts-css.column tbody tr:nth-of-type(10n+5) td,.charts-css.line tbody tr td:nth-of-type(10n+5)::before{background:var(--color,var(--color-5))}.charts-css.area tbody tr td:nth-of-type(10n+6)::before,.charts-css.bar.multiple tbody tr td:nth-of-type(10n+6),.charts-css.bar tbody tr:nth-of-type(10n+6) td,.charts-css.column.multiple tbody tr td:nth-of-type(10n+6),.charts-css.column tbody tr:nth-of-type(10n+6) td,.charts-css.line tbody tr td:nth-of-type(10n+6)::before{background:var(--color,var(--color-6))}.charts-css.area tbody tr td:nth-of-type(10n+7)::before,.charts-css.bar.multiple tbody tr td:nth-of-type(10n+7),.charts-css.bar tbody tr:nth-of-type(10n+7) td,.charts-css.column.multiple tbody tr td:nth-of-type(10n+7),.charts-css.column tbody tr:nth-of-type(10n+7) td,.charts-css.line tbody tr td:nth-of-type(10n+7)::before{background:var(--color,var(--color-7))}.charts-css.area tbody tr td:nth-of-type(10n+8)::before,.charts-css.bar.multiple tbody tr td:nth-of-type(10n+8),.charts-css.bar tbody tr:nth-of-type(10n+8) td,.charts-css.column.multiple tbody tr td:nth-of-type(10n+8),.charts-css.column tbody tr:nth-of-type(10n+8) td,.charts-css.line tbody tr td:nth-of-type(10n+8)::before{background:var(--color,var(--color-8))}.charts-css.area tbody tr td:nth-of-type(10n+9)::before,.charts-css.bar.multiple tbody tr td:nth-of-type(10n+9),.charts-css.bar tbody tr:nth-of-type(10n+9) td,.charts-css.column.multiple tbody tr td:nth-of-type(10n+9),.charts-css.column tbody tr:nth-of-type(10n+9) td,.charts-css.line tbody tr td:nth-of-type(10n+9)::before{background:var(--color,var(--color-9))}.charts-css.area tbody tr td:nth-of-type(10n+10)::before,.charts-css.bar.multiple tbody tr td:nth-of-type(10n+10),.charts-css.bar tbody tr:nth-of-type(10n+10) td,.charts-css.column.multiple tbody tr td:nth-of-type(10n+10),.charts-css.column tbody tr:nth-of-type(10n+10) td,.charts-css.line tbody tr td:nth-of-type(10n+10)::before{background:var(--color,var(--color-10))}.charts-css.hide-data .data{opacity:0}.charts-css.show-data-on-hover .data{-webkit-transition-duration:.3s;transition-duration:.3s;opacity:0}.charts-css.show-data-on-hover tr:hover .data{-webkit-transition-duration:.3s;transition-duration:.3s;opacity:1}.charts-css.bar:not(.show-labels){--labels-size:0}.charts-css.bar:not(.show-labels) tbody tr th{display:none}.charts-css.bar.show-labels{--labels-size:80px}.charts-css.bar.show-labels tbody tr th{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:var(--labels-align,center);-ms-flex-pack:var(--labels-align,center);justify-content:var(--labels-align,center);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.charts-css.bar.show-labels th.hide-label,.charts-css.bar.show-labels tr.hide-label th{display:none}.charts-css.bar.labels-align-start tbody tr th{-webkit-box-align:var(--labels-align,flex-start);-ms-flex-align:var(--labels-align,flex-start);align-items:var(--labels-align,flex-start)}.charts-css.bar.labels-align-end tbody tr th{-webkit-box-align:var(--labels-align,flex-end);-ms-flex-align:var(--labels-align,flex-end);align-items:var(--labels-align,flex-end)}.charts-css.bar.labels-align-center tbody tr th{-webkit-box-align:var(--labels-align,center);-ms-flex-align:var(--labels-align,center);align-items:var(--labels-align,center)}.charts-css.area:not(.show-labels),.charts-css.column:not(.show-labels),.charts-css.line:not(.show-labels){--labels-size:0}.charts-css.area:not(.show-labels) tbody tr th,.charts-css.column:not(.show-labels) tbody tr th,.charts-css.line:not(.show-labels) tbody tr th{display:none}.charts-css.area.show-labels,.charts-css.column.show-labels,.charts-css.line.show-labels{--labels-size:1.5rem}.charts-css.area.show-labels tbody tr th,.charts-css.column.show-labels tbody tr th,.charts-css.line.show-labels tbody tr th{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:var(--labels-align,center);-ms-flex-pack:var(--labels-align,center);justify-content:var(--labels-align,center);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.charts-css.area.show-labels th.hide-label,.charts-css.area.show-labels tr.hide-label th,.charts-css.column.show-labels th.hide-label,.charts-css.column.show-labels tr.hide-label th,.charts-css.line.show-labels th.hide-label,.charts-css.line.show-labels tr.hide-label th{display:none}.charts-css.area.labels-align-start tbody tr th,.charts-css.column.labels-align-start tbody tr th,.charts-css.line.labels-align-start tbody tr th{-webkit-box-pack:var(--labels-align,flex-start);-ms-flex-pack:var(--labels-align,flex-start);justify-content:var(--labels-align,flex-start)}.charts-css.area.labels-align-end tbody tr th,.charts-css.column.labels-align-end tbody tr th,.charts-css.line.labels-align-end tbody tr th{-webkit-box-pack:var(--labels-align,flex-end);-ms-flex-pack:var(--labels-align,flex-end);justify-content:var(--labels-align,flex-end)}.charts-css.area.labels-align-center tbody tr th,.charts-css.column.labels-align-center tbody tr th,.charts-css.line.labels-align-center tbody tr th{-webkit-box-pack:var(--labels-align,center);-ms-flex-pack:var(--labels-align,center);justify-content:var(--labels-align,center)}.charts-css.area.show-primary-axis:not(.reverse) tbody tr,.charts-css.column.show-primary-axis:not(.reverse) tbody tr,.charts-css.line.show-primary-axis:not(.reverse) tbody tr{-webkit-border-after:var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);border-block-end:var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color)}.charts-css.area.show-primary-axis.reverse tbody tr,.charts-css.column.show-primary-axis.reverse tbody tr,.charts-css.line.show-primary-axis.reverse tbody tr{-webkit-border-before:var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);border-block-start:var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color)}.charts-css.area.show-1-secondary-axes:not(.reverse) tbody tr,.charts-css.column.show-1-secondary-axes:not(.reverse) tbody tr,.charts-css.line.show-1-secondary-axes:not(.reverse) tbody tr{background-size:100% 100%;background-image:-webkit-gradient(linear,left top,left bottom,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-1-secondary-axes.reverse tbody tr,.charts-css.column.show-1-secondary-axes.reverse tbody tr,.charts-css.line.show-1-secondary-axes.reverse tbody tr{background-size:100% 100%;background-image:-webkit-gradient(linear,left bottom,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(0deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-2-secondary-axes:not(.reverse) tbody tr,.charts-css.column.show-2-secondary-axes:not(.reverse) tbody tr,.charts-css.line.show-2-secondary-axes:not(.reverse) tbody tr{background-size:100% 50%;background-image:-webkit-gradient(linear,left top,left bottom,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-2-secondary-axes.reverse tbody tr,.charts-css.column.show-2-secondary-axes.reverse tbody tr,.charts-css.line.show-2-secondary-axes.reverse tbody tr{background-size:100% 50%;background-image:-webkit-gradient(linear,left bottom,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(0deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-3-secondary-axes:not(.reverse) tbody tr,.charts-css.column.show-3-secondary-axes:not(.reverse) tbody tr,.charts-css.line.show-3-secondary-axes:not(.reverse) tbody tr{background-size:100% 33.333333%;background-image:-webkit-gradient(linear,left top,left bottom,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-3-secondary-axes.reverse tbody tr,.charts-css.column.show-3-secondary-axes.reverse tbody tr,.charts-css.line.show-3-secondary-axes.reverse tbody tr{background-size:100% 33.333333%;background-image:-webkit-gradient(linear,left bottom,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(0deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-4-secondary-axes:not(.reverse) tbody tr,.charts-css.column.show-4-secondary-axes:not(.reverse) tbody tr,.charts-css.line.show-4-secondary-axes:not(.reverse) tbody tr{background-size:100% 25%;background-image:-webkit-gradient(linear,left top,left bottom,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-4-secondary-axes.reverse tbody tr,.charts-css.column.show-4-secondary-axes.reverse tbody tr,.charts-css.line.show-4-secondary-axes.reverse tbody tr{background-size:100% 25%;background-image:-webkit-gradient(linear,left bottom,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(0deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-5-secondary-axes:not(.reverse) tbody tr,.charts-css.column.show-5-secondary-axes:not(.reverse) tbody tr,.charts-css.line.show-5-secondary-axes:not(.reverse) tbody tr{background-size:100% 20%;background-image:-webkit-gradient(linear,left top,left bottom,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-5-secondary-axes.reverse tbody tr,.charts-css.column.show-5-secondary-axes.reverse tbody tr,.charts-css.line.show-5-secondary-axes.reverse tbody tr{background-size:100% 20%;background-image:-webkit-gradient(linear,left bottom,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(0deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-6-secondary-axes:not(.reverse) tbody tr,.charts-css.column.show-6-secondary-axes:not(.reverse) tbody tr,.charts-css.line.show-6-secondary-axes:not(.reverse) tbody tr{background-size:100% 16.666667%;background-image:-webkit-gradient(linear,left top,left bottom,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-6-secondary-axes.reverse tbody tr,.charts-css.column.show-6-secondary-axes.reverse tbody tr,.charts-css.line.show-6-secondary-axes.reverse tbody tr{background-size:100% 16.666667%;background-image:-webkit-gradient(linear,left bottom,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(0deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-7-secondary-axes:not(.reverse) tbody tr,.charts-css.column.show-7-secondary-axes:not(.reverse) tbody tr,.charts-css.line.show-7-secondary-axes:not(.reverse) tbody tr{background-size:100% 14.285714%;background-image:-webkit-gradient(linear,left top,left bottom,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-7-secondary-axes.reverse tbody tr,.charts-css.column.show-7-secondary-axes.reverse tbody tr,.charts-css.line.show-7-secondary-axes.reverse tbody tr{background-size:100% 14.285714%;background-image:-webkit-gradient(linear,left bottom,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(0deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-8-secondary-axes:not(.reverse) tbody tr,.charts-css.column.show-8-secondary-axes:not(.reverse) tbody tr,.charts-css.line.show-8-secondary-axes:not(.reverse) tbody tr{background-size:100% 12.5%;background-image:-webkit-gradient(linear,left top,left bottom,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-8-secondary-axes.reverse tbody tr,.charts-css.column.show-8-secondary-axes.reverse tbody tr,.charts-css.line.show-8-secondary-axes.reverse tbody tr{background-size:100% 12.5%;background-image:-webkit-gradient(linear,left bottom,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(0deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-9-secondary-axes:not(.reverse) tbody tr,.charts-css.column.show-9-secondary-axes:not(.reverse) tbody tr,.charts-css.line.show-9-secondary-axes:not(.reverse) tbody tr{background-size:100% 11.111111%;background-image:-webkit-gradient(linear,left top,left bottom,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-9-secondary-axes.reverse tbody tr,.charts-css.column.show-9-secondary-axes.reverse tbody tr,.charts-css.line.show-9-secondary-axes.reverse tbody tr{background-size:100% 11.111111%;background-image:-webkit-gradient(linear,left bottom,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(0deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-10-secondary-axes:not(.reverse) tbody tr,.charts-css.column.show-10-secondary-axes:not(.reverse) tbody tr,.charts-css.line.show-10-secondary-axes:not(.reverse) tbody tr{background-size:100% 10%;background-image:-webkit-gradient(linear,left top,left bottom,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-10-secondary-axes.reverse tbody tr,.charts-css.column.show-10-secondary-axes.reverse tbody tr,.charts-css.line.show-10-secondary-axes.reverse tbody tr{background-size:100% 10%;background-image:-webkit-gradient(linear,left bottom,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(0deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.area.show-data-axes tbody tr,.charts-css.column.show-data-axes tbody tr,.charts-css.line.show-data-axes tbody tr{-webkit-border-end:var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);border-inline-end:var(--data-axes-width) var(--data-axes-style) var(--data-axes-color)}.charts-css.area.show-data-axes.reverse-data tbody tr:last-of-type,.charts-css.area.show-data-axes:not(.reverse-data) tbody tr:first-of-type,.charts-css.column.show-data-axes.reverse-data tbody tr:last-of-type,.charts-css.column.show-data-axes:not(.reverse-data) tbody tr:first-of-type,.charts-css.line.show-data-axes.reverse-data tbody tr:last-of-type,.charts-css.line.show-data-axes:not(.reverse-data) tbody tr:first-of-type{-webkit-border-start:var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);border-inline-start:var(--data-axes-width) var(--data-axes-style) var(--data-axes-color)}.charts-css.area.show-dataset-axes tbody tr td,.charts-css.column.show-dataset-axes tbody tr td,.charts-css.line.show-dataset-axes tbody tr td{-webkit-border-end:var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);border-inline-end:var(--data-axes-width) var(--data-axes-style) var(--data-axes-color)}.charts-css.area.show-dataset-axes.reverse-data tbody tr:last-of-type td,.charts-css.area.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td,.charts-css.column.show-dataset-axes.reverse-data tbody tr:last-of-type td,.charts-css.column.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td,.charts-css.line.show-dataset-axes.reverse-data tbody tr:last-of-type td,.charts-css.line.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td{-webkit-border-start:var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);border-inline-start:var(--data-axes-width) var(--data-axes-style) var(--data-axes-color)}.charts-css.bar.show-primary-axis:not(.reverse) tbody tr{-webkit-border-start:var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);border-inline-start:var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color)}.charts-css.bar.show-primary-axis.reverse tbody tr{-webkit-border-end:var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);border-inline-end:var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color)}.charts-css.bar.show-1-secondary-axes:not(.reverse) tbody tr{background-size:100% 100%;background-image:-webkit-gradient(linear,right top,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(-90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-1-secondary-axes.reverse tbody tr{background-size:100% 100%;background-image:-webkit-gradient(linear,left top,right top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-2-secondary-axes:not(.reverse) tbody tr{background-size:50% 100%;background-image:-webkit-gradient(linear,right top,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(-90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-2-secondary-axes.reverse tbody tr{background-size:50% 100%;background-image:-webkit-gradient(linear,left top,right top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-3-secondary-axes:not(.reverse) tbody tr{background-size:33.333333% 100%;background-image:-webkit-gradient(linear,right top,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(-90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-3-secondary-axes.reverse tbody tr{background-size:33.333333% 100%;background-image:-webkit-gradient(linear,left top,right top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-4-secondary-axes:not(.reverse) tbody tr{background-size:25% 100%;background-image:-webkit-gradient(linear,right top,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(-90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-4-secondary-axes.reverse tbody tr{background-size:25% 100%;background-image:-webkit-gradient(linear,left top,right top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-5-secondary-axes:not(.reverse) tbody tr{background-size:20% 100%;background-image:-webkit-gradient(linear,right top,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(-90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-5-secondary-axes.reverse tbody tr{background-size:20% 100%;background-image:-webkit-gradient(linear,left top,right top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-6-secondary-axes:not(.reverse) tbody tr{background-size:16.666667% 100%;background-image:-webkit-gradient(linear,right top,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(-90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-6-secondary-axes.reverse tbody tr{background-size:16.666667% 100%;background-image:-webkit-gradient(linear,left top,right top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-7-secondary-axes:not(.reverse) tbody tr{background-size:14.285714% 100%;background-image:-webkit-gradient(linear,right top,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(-90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-7-secondary-axes.reverse tbody tr{background-size:14.285714% 100%;background-image:-webkit-gradient(linear,left top,right top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-8-secondary-axes:not(.reverse) tbody tr{background-size:12.5% 100%;background-image:-webkit-gradient(linear,right top,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(-90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-8-secondary-axes.reverse tbody tr{background-size:12.5% 100%;background-image:-webkit-gradient(linear,left top,right top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-9-secondary-axes:not(.reverse) tbody tr{background-size:11.111111% 100%;background-image:-webkit-gradient(linear,right top,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(-90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-9-secondary-axes.reverse tbody tr{background-size:11.111111% 100%;background-image:-webkit-gradient(linear,left top,right top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-10-secondary-axes:not(.reverse) tbody tr{background-size:10% 100%;background-image:-webkit-gradient(linear,right top,left top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(-90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-10-secondary-axes.reverse tbody tr{background-size:10% 100%;background-image:-webkit-gradient(linear,left top,right top,from(var(--secondary-axes-color)),to(transparent));background-image:linear-gradient(90deg,var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width))}.charts-css.bar.show-data-axes tbody tr{-webkit-border-after:var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);border-block-end:var(--data-axes-width) var(--data-axes-style) var(--data-axes-color)}.charts-css.bar.show-data-axes.reverse-data tbody tr:last-of-type,.charts-css.bar.show-data-axes:not(.reverse-data) tbody tr:first-of-type{-webkit-border-before:var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);border-block-start:var(--data-axes-width) var(--data-axes-style) var(--data-axes-color)}.charts-css.bar.show-dataset-axes tbody tr td{-webkit-border-after:var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);border-block-end:var(--data-axes-width) var(--data-axes-style) var(--data-axes-color)}.charts-css.bar.show-dataset-axes.reverse-data tbody tr:last-of-type td,.charts-css.bar.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td{-webkit-border-before:var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);border-block-start:var(--data-axes-width) var(--data-axes-style) var(--data-axes-color)}.charts-css.legend{padding:1rem;border:1px solid var(--legend-border-color);list-style:none;font-size:1rem}.charts-css.legend li{line-height:2;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.charts-css.legend li::before{content:"";display:inline-block;vertical-align:middle;-webkit-margin-end:.5rem;margin-inline-end:.5rem;border-width:2px;border-style:solid}.charts-css.legend li:first-child::before{background-color:var(--color-1,transparent);border-color:var(--border-color-1,var(--border-color,#000))}.charts-css.legend li:nth-child(2)::before{background-color:var(--color-2,transparent);border-color:var(--border-color-2,var(--border-color,#000))}.charts-css.legend li:nth-child(3)::before{background-color:var(--color-3,transparent);border-color:var(--border-color-3,var(--border-color,#000))}.charts-css.legend li:nth-child(4)::before{background-color:var(--color-4,transparent);border-color:var(--border-color-4,var(--border-color,#000))}.charts-css.legend li:nth-child(5)::before{background-color:var(--color-5,transparent);border-color:var(--border-color-5,var(--border-color,#000))}.charts-css.legend li:nth-child(6)::before{background-color:var(--color-6,transparent);border-color:var(--border-color-6,var(--border-color,#000))}.charts-css.legend li:nth-child(7)::before{background-color:var(--color-7,transparent);border-color:var(--border-color-7,var(--border-color,#000))}.charts-css.legend li:nth-child(8)::before{background-color:var(--color-8,transparent);border-color:var(--border-color-8,var(--border-color,#000))}.charts-css.legend li:nth-child(9)::before{background-color:var(--color-9,transparent);border-color:var(--border-color-9,var(--border-color,#000))}.charts-css.legend li:nth-child(10)::before{background-color:var(--color-10,transparent);border-color:var(--border-color-10,var(--border-color,#000))}.charts-css:not(.legend-inline){-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.charts-css.legend-inline,.charts-css:not(.legend-inline){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal}.charts-css.legend-inline{-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.charts-css.legend-inline li{-webkit-margin-end:1rem;margin-inline-end:1rem}.charts-css.legend-circle li::before{width:1rem;height:1rem;border-radius:50%}.charts-css.legend-ellipse li::before{width:2rem;height:1rem;border-radius:50%}.charts-css.legend-rhombus li::before,.charts-css.legend-square li::before{width:1rem;height:1rem;border-radius:3px}.charts-css.legend-rhombus li::before{-webkit-transform:rotate(45deg) scale(.85);transform:rotate(45deg) scale(.85)}.charts-css.legend-rectangle li::before{width:2rem;height:1rem;border-radius:3px}.charts-css.legend-line li::before{width:2rem;height:3px;border-radius:2px;-webkit-box-sizing:content-box;box-sizing:content-box}.charts-css .tooltip{position:absolute;z-index:1;bottom:50%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:5px 10px;border-radius:6px;visibility:hidden;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s;background-color:#555;color:#fff;text-align:center;font-size:.9rem}.charts-css .tooltip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:#555}.charts-css td:hover .tooltip{visibility:visible;opacity:1}.charts-css.bar tbody{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;height:calc(100% - var(--heading-size))}.charts-css.bar tbody,.charts-css.bar tbody tr{display:-webkit-box;display:-ms-flexbox;display:flex}.charts-css.bar tbody tr{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:0;flex-basis:0;overflow-wrap:anywhere;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.charts-css.bar tbody tr th{position:absolute;top:0;bottom:0}.charts-css.bar tbody tr td{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:calc(100%*var(--size, 1));height:100%;position:relative}.charts-css.bar:not(.reverse) tbody tr{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-margin-start:var(--labels-size);margin-inline-start:var(--labels-size)}.charts-css.bar:not(.reverse) tbody tr th{left:calc(var(--labels-size)*-1 - var(--primary-axis-width));width:var(--labels-size)}.charts-css.bar:not(.reverse) tbody tr td{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.charts-css.bar.reverse tbody tr{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-margin-end:var(--labels-size);margin-inline-end:var(--labels-size)}.charts-css.bar.reverse tbody tr th{right:calc(var(--labels-size)*-1 - var(--primary-axis-width));width:var(--labels-size)}.charts-css.bar.reverse tbody tr td{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.charts-css.bar:not(.stacked) tbody tr td{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:0;flex-basis:0}.charts-css.bar.stacked tbody tr td{-webkit-box-flex:unset;-ms-flex-positive:unset;flex-grow:unset;-ms-flex-negative:unset;flex-shrink:unset;-ms-flex-preferred-size:unset;flex-basis:unset}.charts-css.bar.stacked.reverse-datasets tbody tr{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.charts-css.bar:not(.reverse-data) tbody{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.charts-css.bar.reverse-data tbody{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.charts-css.bar:not(.reverse-datasets):not(.stacked) tbody tr{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.charts-css.bar:not(.reverse-datasets).stacked:not(.reverse) tbody tr{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.charts-css.bar:not(.reverse-datasets).stacked.reverse tbody tr{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.charts-css.bar.reverse-datasets:not(.stacked) tbody tr{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.charts-css.bar.reverse-datasets.stacked:not(.reverse) tbody tr{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.charts-css.bar.reverse-datasets.stacked.reverse tbody tr{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.charts-css.bar.data-spacing-1 tbody tr{-webkit-padding-before:1px;padding-block-start:1px;-webkit-padding-after:1px;padding-block-end:1px}.charts-css.bar.data-spacing-2 tbody tr{-webkit-padding-before:2px;padding-block-start:2px;-webkit-padding-after:2px;padding-block-end:2px}.charts-css.bar.data-spacing-3 tbody tr{-webkit-padding-before:3px;padding-block-start:3px;-webkit-padding-after:3px;padding-block-end:3px}.charts-css.bar.data-spacing-4 tbody tr{-webkit-padding-before:4px;padding-block-start:4px;-webkit-padding-after:4px;padding-block-end:4px}.charts-css.bar.data-spacing-5 tbody tr{-webkit-padding-before:5px;padding-block-start:5px;-webkit-padding-after:5px;padding-block-end:5px}.charts-css.bar.data-spacing-6 tbody tr{-webkit-padding-before:6px;padding-block-start:6px;-webkit-padding-after:6px;padding-block-end:6px}.charts-css.bar.data-spacing-7 tbody tr{-webkit-padding-before:7px;padding-block-start:7px;-webkit-padding-after:7px;padding-block-end:7px}.charts-css.bar.data-spacing-8 tbody tr{-webkit-padding-before:8px;padding-block-start:8px;-webkit-padding-after:8px;padding-block-end:8px}.charts-css.bar.data-spacing-9 tbody tr{-webkit-padding-before:9px;padding-block-start:9px;-webkit-padding-after:9px;padding-block-end:9px}.charts-css.bar.data-spacing-10 tbody tr{-webkit-padding-before:10px;padding-block-start:10px;-webkit-padding-after:10px;padding-block-end:10px}.charts-css.bar.data-spacing-11 tbody tr{-webkit-padding-before:11px;padding-block-start:11px;-webkit-padding-after:11px;padding-block-end:11px}.charts-css.bar.data-spacing-12 tbody tr{-webkit-padding-before:12px;padding-block-start:12px;-webkit-padding-after:12px;padding-block-end:12px}.charts-css.bar.data-spacing-13 tbody tr{-webkit-padding-before:13px;padding-block-start:13px;-webkit-padding-after:13px;padding-block-end:13px}.charts-css.bar.data-spacing-14 tbody tr{-webkit-padding-before:14px;padding-block-start:14px;-webkit-padding-after:14px;padding-block-end:14px}.charts-css.bar.data-spacing-15 tbody tr{-webkit-padding-before:15px;padding-block-start:15px;-webkit-padding-after:15px;padding-block-end:15px}.charts-css.bar.data-spacing-16 tbody tr{-webkit-padding-before:16px;padding-block-start:16px;-webkit-padding-after:16px;padding-block-end:16px}.charts-css.bar.data-spacing-17 tbody tr{-webkit-padding-before:17px;padding-block-start:17px;-webkit-padding-after:17px;padding-block-end:17px}.charts-css.bar.data-spacing-18 tbody tr{-webkit-padding-before:18px;padding-block-start:18px;-webkit-padding-after:18px;padding-block-end:18px}.charts-css.bar.data-spacing-19 tbody tr{-webkit-padding-before:19px;padding-block-start:19px;-webkit-padding-after:19px;padding-block-end:19px}.charts-css.bar.data-spacing-20 tbody tr{-webkit-padding-before:20px;padding-block-start:20px;-webkit-padding-after:20px;padding-block-end:20px}.charts-css.bar.datasets-spacing-1 tbody tr td{-webkit-margin-before:1px;margin-block-start:1px;-webkit-margin-after:1px;margin-block-end:1px}.charts-css.bar.datasets-spacing-2 tbody tr td{-webkit-margin-before:2px;margin-block-start:2px;-webkit-margin-after:2px;margin-block-end:2px}.charts-css.bar.datasets-spacing-3 tbody tr td{-webkit-margin-before:3px;margin-block-start:3px;-webkit-margin-after:3px;margin-block-end:3px}.charts-css.bar.datasets-spacing-4 tbody tr td{-webkit-margin-before:4px;margin-block-start:4px;-webkit-margin-after:4px;margin-block-end:4px}.charts-css.bar.datasets-spacing-5 tbody tr td{-webkit-margin-before:5px;margin-block-start:5px;-webkit-margin-after:5px;margin-block-end:5px}.charts-css.bar.datasets-spacing-6 tbody tr td{-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-after:6px;margin-block-end:6px}.charts-css.bar.datasets-spacing-7 tbody tr td{-webkit-margin-before:7px;margin-block-start:7px;-webkit-margin-after:7px;margin-block-end:7px}.charts-css.bar.datasets-spacing-8 tbody tr td{-webkit-margin-before:8px;margin-block-start:8px;-webkit-margin-after:8px;margin-block-end:8px}.charts-css.bar.datasets-spacing-9 tbody tr td{-webkit-margin-before:9px;margin-block-start:9px;-webkit-margin-after:9px;margin-block-end:9px}.charts-css.bar.datasets-spacing-10 tbody tr td{-webkit-margin-before:10px;margin-block-start:10px;-webkit-margin-after:10px;margin-block-end:10px}.charts-css.bar.datasets-spacing-11 tbody tr td{-webkit-margin-before:11px;margin-block-start:11px;-webkit-margin-after:11px;margin-block-end:11px}.charts-css.bar.datasets-spacing-12 tbody tr td{-webkit-margin-before:12px;margin-block-start:12px;-webkit-margin-after:12px;margin-block-end:12px}.charts-css.bar.datasets-spacing-13 tbody tr td{-webkit-margin-before:13px;margin-block-start:13px;-webkit-margin-after:13px;margin-block-end:13px}.charts-css.bar.datasets-spacing-14 tbody tr td{-webkit-margin-before:14px;margin-block-start:14px;-webkit-margin-after:14px;margin-block-end:14px}.charts-css.bar.datasets-spacing-15 tbody tr td{-webkit-margin-before:15px;margin-block-start:15px;-webkit-margin-after:15px;margin-block-end:15px}.charts-css.bar.datasets-spacing-16 tbody tr td{-webkit-margin-before:16px;margin-block-start:16px;-webkit-margin-after:16px;margin-block-end:16px}.charts-css.bar.datasets-spacing-17 tbody tr td{-webkit-margin-before:17px;margin-block-start:17px;-webkit-margin-after:17px;margin-block-end:17px}.charts-css.bar.datasets-spacing-18 tbody tr td{-webkit-margin-before:18px;margin-block-start:18px;-webkit-margin-after:18px;margin-block-end:18px}.charts-css.bar.datasets-spacing-19 tbody tr td{-webkit-margin-before:19px;margin-block-start:19px;-webkit-margin-after:19px;margin-block-end:19px}.charts-css.bar.datasets-spacing-20 tbody tr td{-webkit-margin-before:20px;margin-block-start:20px;-webkit-margin-after:20px;margin-block-end:20px}.charts-css.column tbody{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;height:calc(100% - var(--heading-size))}.charts-css.column tbody tr{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:0;flex-basis:0;overflow-wrap:anywhere;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.charts-css.column tbody tr th{position:absolute;right:0;left:0}.charts-css.column tbody tr td{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:calc(100%*var(--size, 1));position:relative}.charts-css.column:not(.reverse) tbody tr{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-margin-after:var(--labels-size);margin-block-end:var(--labels-size)}.charts-css.column:not(.reverse) tbody tr th{bottom:calc(var(--labels-size)*-1 - var(--primary-axis-width));height:var(--labels-size)}.charts-css.column.reverse tbody tr,.charts-css.column:not(.reverse) tbody tr td{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.charts-css.column.reverse tbody tr{-webkit-margin-before:var(--labels-size);margin-block-start:var(--labels-size)}.charts-css.column.reverse tbody tr th{top:calc(var(--labels-size)*-1 - var(--primary-axis-width));height:var(--labels-size)}.charts-css.column.reverse tbody tr td{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.charts-css.column:not(.stacked) tbody tr td{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:0;flex-basis:0}.charts-css.column.stacked tbody tr td{-webkit-box-flex:unset;-ms-flex-positive:unset;flex-grow:unset;-ms-flex-negative:unset;flex-shrink:unset;-ms-flex-preferred-size:unset;flex-basis:unset}.charts-css.column.stacked.reverse-datasets tbody tr{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.charts-css.column:not(.reverse-data) tbody{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.charts-css.column.reverse-data tbody{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.charts-css.column:not(.reverse-datasets):not(.stacked) tbody tr{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.charts-css.column:not(.reverse-datasets).stacked:not(.reverse) tbody tr{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.charts-css.column:not(.reverse-datasets).stacked.reverse tbody tr{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.charts-css.column.reverse-datasets:not(.stacked) tbody tr{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.charts-css.column.reverse-datasets.stacked:not(.reverse) tbody tr{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.charts-css.column.reverse-datasets.stacked.reverse tbody tr{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.charts-css.column.data-spacing-1 tbody tr{-webkit-padding-start:1px;padding-inline-start:1px;-webkit-padding-end:1px;padding-inline-end:1px}.charts-css.column.data-spacing-2 tbody tr{-webkit-padding-start:2px;padding-inline-start:2px;-webkit-padding-end:2px;padding-inline-end:2px}.charts-css.column.data-spacing-3 tbody tr{-webkit-padding-start:3px;padding-inline-start:3px;-webkit-padding-end:3px;padding-inline-end:3px}.charts-css.column.data-spacing-4 tbody tr{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px}.charts-css.column.data-spacing-5 tbody tr{-webkit-padding-start:5px;padding-inline-start:5px;-webkit-padding-end:5px;padding-inline-end:5px}.charts-css.column.data-spacing-6 tbody tr{-webkit-padding-start:6px;padding-inline-start:6px;-webkit-padding-end:6px;padding-inline-end:6px}.charts-css.column.data-spacing-7 tbody tr{-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px}.charts-css.column.data-spacing-8 tbody tr{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}.charts-css.column.data-spacing-9 tbody tr{-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px}.charts-css.column.data-spacing-10 tbody tr{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px}.charts-css.column.data-spacing-11 tbody tr{-webkit-padding-start:11px;padding-inline-start:11px;-webkit-padding-end:11px;padding-inline-end:11px}.charts-css.column.data-spacing-12 tbody tr{-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}.charts-css.column.data-spacing-13 tbody tr{-webkit-padding-start:13px;padding-inline-start:13px;-webkit-padding-end:13px;padding-inline-end:13px}.charts-css.column.data-spacing-14 tbody tr{-webkit-padding-start:14px;padding-inline-start:14px;-webkit-padding-end:14px;padding-inline-end:14px}.charts-css.column.data-spacing-15 tbody tr{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px}.charts-css.column.data-spacing-16 tbody tr{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}.charts-css.column.data-spacing-17 tbody tr{-webkit-padding-start:17px;padding-inline-start:17px;-webkit-padding-end:17px;padding-inline-end:17px}.charts-css.column.data-spacing-18 tbody tr{-webkit-padding-start:18px;padding-inline-start:18px;-webkit-padding-end:18px;padding-inline-end:18px}.charts-css.column.data-spacing-19 tbody tr{-webkit-padding-start:19px;padding-inline-start:19px;-webkit-padding-end:19px;padding-inline-end:19px}.charts-css.column.data-spacing-20 tbody tr{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}.charts-css.column.datasets-spacing-1 tbody tr td{-webkit-margin-start:1px;margin-inline-start:1px;-webkit-margin-end:1px;margin-inline-end:1px}.charts-css.column.datasets-spacing-2 tbody tr td{-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}.charts-css.column.datasets-spacing-3 tbody tr td{-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:3px;margin-inline-end:3px}.charts-css.column.datasets-spacing-4 tbody tr td{-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:4px;margin-inline-end:4px}.charts-css.column.datasets-spacing-5 tbody tr td{-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:5px;margin-inline-end:5px}.charts-css.column.datasets-spacing-6 tbody tr td{-webkit-margin-start:6px;margin-inline-start:6px;-webkit-margin-end:6px;margin-inline-end:6px}.charts-css.column.datasets-spacing-7 tbody tr td{-webkit-margin-start:7px;margin-inline-start:7px;-webkit-margin-end:7px;margin-inline-end:7px}.charts-css.column.datasets-spacing-8 tbody tr td{-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px}.charts-css.column.datasets-spacing-9 tbody tr td{-webkit-margin-start:9px;margin-inline-start:9px;-webkit-margin-end:9px;margin-inline-end:9px}.charts-css.column.datasets-spacing-10 tbody tr td{-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}.charts-css.column.datasets-spacing-11 tbody tr td{-webkit-margin-start:11px;margin-inline-start:11px;-webkit-margin-end:11px;margin-inline-end:11px}.charts-css.column.datasets-spacing-12 tbody tr td{-webkit-margin-start:12px;margin-inline-start:12px;-webkit-margin-end:12px;margin-inline-end:12px}.charts-css.column.datasets-spacing-13 tbody tr td{-webkit-margin-start:13px;margin-inline-start:13px;-webkit-margin-end:13px;margin-inline-end:13px}.charts-css.column.datasets-spacing-14 tbody tr td{-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:14px;margin-inline-end:14px}.charts-css.column.datasets-spacing-15 tbody tr td{-webkit-margin-start:15px;margin-inline-start:15px;-webkit-margin-end:15px;margin-inline-end:15px}.charts-css.column.datasets-spacing-16 tbody tr td{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}.charts-css.column.datasets-spacing-17 tbody tr td{-webkit-margin-start:17px;margin-inline-start:17px;-webkit-margin-end:17px;margin-inline-end:17px}.charts-css.column.datasets-spacing-18 tbody tr td{-webkit-margin-start:18px;margin-inline-start:18px;-webkit-margin-end:18px;margin-inline-end:18px}.charts-css.column.datasets-spacing-19 tbody tr td{-webkit-margin-start:19px;margin-inline-start:19px;-webkit-margin-end:19px;margin-inline-end:19px}.charts-css.column.datasets-spacing-20 tbody tr td{-webkit-margin-start:20px;margin-inline-start:20px;-webkit-margin-end:20px;margin-inline-end:20px}.charts-css.area tbody{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;height:calc(100% - var(--heading-size))}.charts-css.area tbody,.charts-css.area tbody tr{display:-webkit-box;display:-ms-flexbox;display:flex}.charts-css.area tbody tr{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:0;flex-basis:0;overflow-wrap:anywhere;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.charts-css.area tbody tr th{position:absolute;right:0;left:0}.charts-css.area tbody tr td{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.charts-css.area tbody tr td::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}.charts-css.area tbody tr td::after{content:"";width:100%}.charts-css.area:not(.reverse) tbody tr{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-margin-after:var(--labels-size);margin-block-end:var(--labels-size)}.charts-css.area:not(.reverse) tbody tr th{bottom:calc(var(--labels-size)*-1 - var(--primary-axis-width));height:var(--labels-size)}.charts-css.area.reverse tbody tr,.charts-css.area:not(.reverse) tbody tr td{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.charts-css.area.reverse tbody tr{-webkit-margin-before:var(--labels-size);margin-block-start:var(--labels-size)}.charts-css.area.reverse tbody tr th{top:calc(var(--labels-size)*-1 - var(--primary-axis-width));height:var(--labels-size)}.charts-css.area.reverse tbody tr td{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.charts-css.area:not(.reverse-data) tbody{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.charts-css.area.reverse-data tbody{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.charts-css.area:not(.reverse-datasets) tbody tr{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.charts-css.area.reverse-datasets tbody tr{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.charts-css.area:not(.reverse):not(.reverse-data) tbody tr td{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.charts-css.area:not(.reverse):not(.reverse-data) tbody tr td::before{-webkit-clip-path:polygon(0 calc(100%*(1 - var(--start, var(--size)))),100% calc(100%*(1 - var(--size))),100% 100%,0 100%);clip-path:polygon(0 calc(100%*(1 - var(--start, var(--size)))),100% calc(100%*(1 - var(--size))),100% 100%,0 100%)}.charts-css.area:not(.reverse):not(.reverse-data) tbody tr td .data{-webkit-transform:translateX(50%);transform:translateX(50%)}.charts-css.area:not(.reverse):not(.reverse-data) tbody tr td::after{height:calc(100%*var(--size))}.charts-css.area:not(.reverse).reverse-data tbody tr td{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.charts-css.area:not(.reverse).reverse-data tbody tr td::before{-webkit-clip-path:polygon(0 calc(100%*(1 - var(--size))),100% calc(100%*(1 - var(--start, var(--size)))),100% 100%,0 100%);clip-path:polygon(0 calc(100%*(1 - var(--size))),100% calc(100%*(1 - var(--start, var(--size)))),100% 100%,0 100%)}.charts-css.area:not(.reverse).reverse-data tbody tr td .data{-webkit-transform:translateX(-50%);transform:translateX(-50%)}.charts-css.area:not(.reverse).reverse-data tbody tr td::after{height:calc(100%*var(--size))}.charts-css.area.reverse:not(.reverse-data) tbody tr td{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.charts-css.area.reverse:not(.reverse-data) tbody tr td::before{-webkit-clip-path:polygon(0 0,100% 0,100% calc(100%*var(--size)),0 calc(100%*var(--start, var(--size))));clip-path:polygon(0 0,100% 0,100% calc(100%*var(--size)),0 calc(100%*var(--start, var(--size))))}.charts-css.area.reverse:not(.reverse-data) tbody tr td .data{-webkit-transform:translateX(50%);transform:translateX(50%)}.charts-css.area.reverse:not(.reverse-data) tbody tr td::after{height:calc(100%*(1 - var(--size)))}.charts-css.area.reverse.reverse-data tbody tr td{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.charts-css.area.reverse.reverse-data tbody tr td::before{-webkit-clip-path:polygon(0 0,100% 0,100% calc(100%*var(--start, var(--size))),0 calc(100%*var(--size)));clip-path:polygon(0 0,100% 0,100% calc(100%*var(--start, var(--size))),0 calc(100%*var(--size)))}.charts-css.area.reverse.reverse-data tbody tr td .data{-webkit-transform:translateX(-50%);transform:translateX(-50%)}.charts-css.area.reverse.reverse-data tbody tr td::after{height:calc(100%*(1 - var(--size)))}.charts-css.area.data-spacing-1 tbody tr td::before,.charts-css.area.datasets-spacing-1 tbody tr td::before{-webkit-margin-start:1px;margin-inline-start:1px;-webkit-margin-end:1px;margin-inline-end:1px}.charts-css.area.data-spacing-2 tbody tr td::before,.charts-css.area.datasets-spacing-2 tbody tr td::before{-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}.charts-css.area.data-spacing-3 tbody tr td::before,.charts-css.area.datasets-spacing-3 tbody tr td::before{-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:3px;margin-inline-end:3px}.charts-css.area.data-spacing-4 tbody tr td::before,.charts-css.area.datasets-spacing-4 tbody tr td::before{-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:4px;margin-inline-end:4px}.charts-css.area.data-spacing-5 tbody tr td::before,.charts-css.area.datasets-spacing-5 tbody tr td::before{-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:5px;margin-inline-end:5px}.charts-css.area.data-spacing-6 tbody tr td::before,.charts-css.area.datasets-spacing-6 tbody tr td::before{-webkit-margin-start:6px;margin-inline-start:6px;-webkit-margin-end:6px;margin-inline-end:6px}.charts-css.area.data-spacing-7 tbody tr td::before,.charts-css.area.datasets-spacing-7 tbody tr td::before{-webkit-margin-start:7px;margin-inline-start:7px;-webkit-margin-end:7px;margin-inline-end:7px}.charts-css.area.data-spacing-8 tbody tr td::before,.charts-css.area.datasets-spacing-8 tbody tr td::before{-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px}.charts-css.area.data-spacing-9 tbody tr td::before,.charts-css.area.datasets-spacing-9 tbody tr td::before{-webkit-margin-start:9px;margin-inline-start:9px;-webkit-margin-end:9px;margin-inline-end:9px}.charts-css.area.data-spacing-10 tbody tr td::before,.charts-css.area.datasets-spacing-10 tbody tr td::before{-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}.charts-css.area.data-spacing-11 tbody tr td::before,.charts-css.area.datasets-spacing-11 tbody tr td::before{-webkit-margin-start:11px;margin-inline-start:11px;-webkit-margin-end:11px;margin-inline-end:11px}.charts-css.area.data-spacing-12 tbody tr td::before,.charts-css.area.datasets-spacing-12 tbody tr td::before{-webkit-margin-start:12px;margin-inline-start:12px;-webkit-margin-end:12px;margin-inline-end:12px}.charts-css.area.data-spacing-13 tbody tr td::before,.charts-css.area.datasets-spacing-13 tbody tr td::before{-webkit-margin-start:13px;margin-inline-start:13px;-webkit-margin-end:13px;margin-inline-end:13px}.charts-css.area.data-spacing-14 tbody tr td::before,.charts-css.area.datasets-spacing-14 tbody tr td::before{-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:14px;margin-inline-end:14px}.charts-css.area.data-spacing-15 tbody tr td::before,.charts-css.area.datasets-spacing-15 tbody tr td::before{-webkit-margin-start:15px;margin-inline-start:15px;-webkit-margin-end:15px;margin-inline-end:15px}.charts-css.area.data-spacing-16 tbody tr td::before,.charts-css.area.datasets-spacing-16 tbody tr td::before{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}.charts-css.area.data-spacing-17 tbody tr td::before,.charts-css.area.datasets-spacing-17 tbody tr td::before{-webkit-margin-start:17px;margin-inline-start:17px;-webkit-margin-end:17px;margin-inline-end:17px}.charts-css.area.data-spacing-18 tbody tr td::before,.charts-css.area.datasets-spacing-18 tbody tr td::before{-webkit-margin-start:18px;margin-inline-start:18px;-webkit-margin-end:18px;margin-inline-end:18px}.charts-css.area.data-spacing-19 tbody tr td::before,.charts-css.area.datasets-spacing-19 tbody tr td::before{-webkit-margin-start:19px;margin-inline-start:19px;-webkit-margin-end:19px;margin-inline-end:19px}.charts-css.area.data-spacing-20 tbody tr td::before,.charts-css.area.datasets-spacing-20 tbody tr td::before{-webkit-margin-start:20px;margin-inline-start:20px;-webkit-margin-end:20px;margin-inline-end:20px}.charts-css.line{--line-size:3px}.charts-css.line tbody{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;height:calc(100% - var(--heading-size))}.charts-css.line tbody,.charts-css.line tbody tr{display:-webkit-box;display:-ms-flexbox;display:flex}.charts-css.line tbody tr{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:0;flex-basis:0;overflow-wrap:anywhere;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.charts-css.line tbody tr th{position:absolute;right:0;left:0}.charts-css.line tbody tr td{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.charts-css.line tbody tr td::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}.charts-css.line tbody tr td::after{content:"";width:100%}.charts-css.line:not(.reverse) tbody tr{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-margin-after:var(--labels-size);margin-block-end:var(--labels-size)}.charts-css.line:not(.reverse) tbody tr th{bottom:calc(var(--labels-size)*-1 - var(--primary-axis-width));height:var(--labels-size)}.charts-css.line.reverse tbody tr,.charts-css.line:not(.reverse) tbody tr td{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.charts-css.line.reverse tbody tr{-webkit-margin-before:var(--labels-size);margin-block-start:var(--labels-size)}.charts-css.line.reverse tbody tr th{top:calc(var(--labels-size)*-1 - var(--primary-axis-width));height:var(--labels-size)}.charts-css.line.reverse tbody tr td{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.charts-css.line:not(.reverse-data) tbody{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.charts-css.line.reverse-data tbody{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.charts-css.line:not(.reverse-datasets) tbody tr{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.charts-css.line.reverse-datasets tbody tr{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.charts-css.line:not(.reverse):not(.reverse-data) tbody tr td{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.charts-css.line:not(.reverse):not(.reverse-data) tbody tr td::before{-webkit-clip-path:polygon(0 calc(100%*(1 - var(--start, var(--size)))),100% calc(100%*(1 - var(--size))),100% calc(100%*(1 - var(--size)) - var(--line-size)),0 calc(100%*(1 - var(--start, var(--size))) - var(--line-size)));clip-path:polygon(0 calc(100%*(1 - var(--start, var(--size)))),100% calc(100%*(1 - var(--size))),100% calc(100%*(1 - var(--size)) - var(--line-size)),0 calc(100%*(1 - var(--start, var(--size))) - var(--line-size)))}.charts-css.line:not(.reverse):not(.reverse-data) tbody tr td .data{-webkit-transform:translateX(50%);transform:translateX(50%)}.charts-css.line:not(.reverse):not(.reverse-data) tbody tr td::after{height:calc(100%*var(--size))}.charts-css.line:not(.reverse).reverse-data tbody tr td{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.charts-css.line:not(.reverse).reverse-data tbody tr td::before{-webkit-clip-path:polygon(0 calc(100%*(1 - var(--size))),100% calc(100%*(1 - var(--start, var(--size)))),100% calc(100%*(1 - var(--start, var(--size))) - var(--line-size)),0 calc(100%*(1 - var(--size)) - var(--line-size)));clip-path:polygon(0 calc(100%*(1 - var(--size))),100% calc(100%*(1 - var(--start, var(--size)))),100% calc(100%*(1 - var(--start, var(--size))) - var(--line-size)),0 calc(100%*(1 - var(--size)) - var(--line-size)))}.charts-css.line:not(.reverse).reverse-data tbody tr td .data{-webkit-transform:translateX(-50%);transform:translateX(-50%)}.charts-css.line:not(.reverse).reverse-data tbody tr td::after{height:calc(100%*var(--size))}.charts-css.line.reverse:not(.reverse-data) tbody tr td{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.charts-css.line.reverse:not(.reverse-data) tbody tr td::before{-webkit-clip-path:polygon(0 calc(100%*var(--start, var(--size)) - var(--line-size)),100% calc(100%*var(--size) - var(--line-size)),100% calc(100%*var(--size)),0 calc(100%*var(--start, var(--size))));clip-path:polygon(0 calc(100%*var(--start, var(--size)) - var(--line-size)),100% calc(100%*var(--size) - var(--line-size)),100% calc(100%*var(--size)),0 calc(100%*var(--start, var(--size))))}.charts-css.line.reverse:not(.reverse-data) tbody tr td .data{-webkit-transform:translateX(50%);transform:translateX(50%)}.charts-css.line.reverse:not(.reverse-data) tbody tr td::after{height:calc(100%*(1 - var(--size)))}.charts-css.line.reverse.reverse-data tbody tr td{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.charts-css.line.reverse.reverse-data tbody tr td::before{-webkit-clip-path:polygon(0 calc(100%*var(--size) - var(--line-size)),100% calc(100%*var(--start, var(--size)) - var(--line-size)),100% calc(100%*var(--start, var(--size))),0 calc(100%*var(--size)));clip-path:polygon(0 calc(100%*var(--size) - var(--line-size)),100% calc(100%*var(--start, var(--size)) - var(--line-size)),100% calc(100%*var(--start, var(--size))),0 calc(100%*var(--size)))}.charts-css.line.reverse.reverse-data tbody tr td .data{-webkit-transform:translateX(-50%);transform:translateX(-50%)}.charts-css.line.reverse.reverse-data tbody tr td::after{height:calc(100%*(1 - var(--size)))}.charts-css.line.data-spacing-1 tbody tr td::before,.charts-css.line.datasets-spacing-1 tbody tr td::before{-webkit-margin-start:1px;margin-inline-start:1px;-webkit-margin-end:1px;margin-inline-end:1px}.charts-css.line.data-spacing-2 tbody tr td::before,.charts-css.line.datasets-spacing-2 tbody tr td::before{-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}.charts-css.line.data-spacing-3 tbody tr td::before,.charts-css.line.datasets-spacing-3 tbody tr td::before{-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:3px;margin-inline-end:3px}.charts-css.line.data-spacing-4 tbody tr td::before,.charts-css.line.datasets-spacing-4 tbody tr td::before{-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:4px;margin-inline-end:4px}.charts-css.line.data-spacing-5 tbody tr td::before,.charts-css.line.datasets-spacing-5 tbody tr td::before{-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:5px;margin-inline-end:5px}.charts-css.line.data-spacing-6 tbody tr td::before,.charts-css.line.datasets-spacing-6 tbody tr td::before{-webkit-margin-start:6px;margin-inline-start:6px;-webkit-margin-end:6px;margin-inline-end:6px}.charts-css.line.data-spacing-7 tbody tr td::before,.charts-css.line.datasets-spacing-7 tbody tr td::before{-webkit-margin-start:7px;margin-inline-start:7px;-webkit-margin-end:7px;margin-inline-end:7px}.charts-css.line.data-spacing-8 tbody tr td::before,.charts-css.line.datasets-spacing-8 tbody tr td::before{-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px}.charts-css.line.data-spacing-9 tbody tr td::before,.charts-css.line.datasets-spacing-9 tbody tr td::before{-webkit-margin-start:9px;margin-inline-start:9px;-webkit-margin-end:9px;margin-inline-end:9px}.charts-css.line.data-spacing-10 tbody tr td::before,.charts-css.line.datasets-spacing-10 tbody tr td::before{-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}.charts-css.line.data-spacing-11 tbody tr td::before,.charts-css.line.datasets-spacing-11 tbody tr td::before{-webkit-margin-start:11px;margin-inline-start:11px;-webkit-margin-end:11px;margin-inline-end:11px}.charts-css.line.data-spacing-12 tbody tr td::before,.charts-css.line.datasets-spacing-12 tbody tr td::before{-webkit-margin-start:12px;margin-inline-start:12px;-webkit-margin-end:12px;margin-inline-end:12px}.charts-css.line.data-spacing-13 tbody tr td::before,.charts-css.line.datasets-spacing-13 tbody tr td::before{-webkit-margin-start:13px;margin-inline-start:13px;-webkit-margin-end:13px;margin-inline-end:13px}.charts-css.line.data-spacing-14 tbody tr td::before,.charts-css.line.datasets-spacing-14 tbody tr td::before{-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:14px;margin-inline-end:14px}.charts-css.line.data-spacing-15 tbody tr td::before,.charts-css.line.datasets-spacing-15 tbody tr td::before{-webkit-margin-start:15px;margin-inline-start:15px;-webkit-margin-end:15px;margin-inline-end:15px}.charts-css.line.data-spacing-16 tbody tr td::before,.charts-css.line.datasets-spacing-16 tbody tr td::before{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}.charts-css.line.data-spacing-17 tbody tr td::before,.charts-css.line.datasets-spacing-17 tbody tr td::before{-webkit-margin-start:17px;margin-inline-start:17px;-webkit-margin-end:17px;margin-inline-end:17px}.charts-css.line.data-spacing-18 tbody tr td::before,.charts-css.line.datasets-spacing-18 tbody tr td::before{-webkit-margin-start:18px;margin-inline-start:18px;-webkit-margin-end:18px;margin-inline-end:18px}.charts-css.line.data-spacing-19 tbody tr td::before,.charts-css.line.datasets-spacing-19 tbody tr td::before{-webkit-margin-start:19px;margin-inline-start:19px;-webkit-margin-end:19px;margin-inline-end:19px}.charts-css.line.data-spacing-20 tbody tr td::before,.charts-css.line.datasets-spacing-20 tbody tr td::before{-webkit-margin-start:20px;margin-inline-start:20px;-webkit-margin-end:20px;margin-inline-end:20px}.charts-css.radial tbody{display:block;width:100%;height:0;-webkit-padding-after:100%;padding-block-end:100%;border-radius:50%;background-color:var(--chart-bg-color)}.charts-css.radial tbody tr{display:none}.charts-css.pie tbody{display:block;width:100%;height:0;-webkit-padding-after:100%;padding-block-end:100%;border-radius:50%;background-color:var(--chart-bg-color)}.charts-css.pie tbody tr{display:none}.charts-css.donut tbody{display:block;width:100%;height:0;-webkit-padding-after:100%;padding-block-end:100%;border-radius:50%;background-color:var(--chart-bg-color)}.charts-css.donut tbody tr{display:none}.charts-css.donut tbody::after{content:"";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:var(--donut-inner-size,50%);height:var(--donut-inner-size,50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:50%;background-color:var(--donut-inner-color,#fff)}.charts-css.polar tbody{display:block;width:100%;height:0;-webkit-padding-after:100%;padding-block-end:100%;border-radius:50%;background-color:var(--chart-bg-color)}.charts-css.polar tbody tr{display:none}.charts-css.radar tbody{display:block;width:100%;height:0;-webkit-padding-after:100%;padding-block-end:100%;border-radius:50%;background-color:var(--chart-bg-color)}.charts-css.radar tbody tr{display:none} \ No newline at end of file diff --git a/www/test/index.html b/www/test/index.html deleted file mode 100644 index 74f510041..000000000 --- a/www/test/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - CryptPad - - - - - - - diff --git a/www/test/inner.js b/www/test/inner.js deleted file mode 100644 index 4b02d51a1..000000000 --- a/www/test/inner.js +++ /dev/null @@ -1,68 +0,0 @@ -define([ - '/common/hyperscript.js', - '/common/inner/charts.js', -], function (h, Charts) { - var wrap = function (content) { - return h('div', { - style: 'height: 500px; width: 500px; padding: 15px; border: 1px solid #222; margin: 15px;' - }, content); - }; - - var append = function (el) { - document.body.appendChild(el); - }; - - var data = [ - 25, 58, 5, 96, 79, - 23, 75, 13, 44, 29, - 65, 80, 30, 47, 22, - 7, 62, 64, 46, 21, - 29, 31, 76, 65, 61, - 78, 58, 12, 90, 98, - 37, 75, 92, 74, 16, - 17, 52, 42, 71, 19 - ]; - - - append(h('h1', 'Charts')); - append(h('hr')); - - var cell = (function () { - var i = 0; - - return function () { - var val = data[i++]; - return h('td', { - style: '--size: ' + (val / 100), - }, val); - }; - }()); - - var multirow = function (n) { - var cells = []; - while (n--) { - cells.push(cell()); - } - return h('tr', { - style: 'margin: 15px', - }, cells); - }; - - append(wrap(Charts.table([ - h('tbody', [ - multirow(4), - multirow(4), - multirow(4), - multirow(4), - ]), - ], [ - 'charts-css', - 'bar', - 'multiple', - ]))); - - - append(h('hr')); - append(wrap(Charts.columns([ 40, 60, 75, 90, 100]))); - append(wrap(Charts.columns(data.slice(20)))); -});