diff --git a/src/axes.js b/src/axes.js index 8ff27f4084..6dc4026230 100644 --- a/src/axes.js +++ b/src/axes.js @@ -1,22 +1,5 @@ -import {format, utcFormat} from "d3"; -import {formatIsoDate} from "./format.js"; -import {constant, isTemporal, string} from "./options.js"; import {isOrdinalScale} from "./scales.js"; export function inferFontVariant(scale) { return isOrdinalScale(scale) && scale.interval === undefined ? undefined : "tabular-nums"; } - -// D3 doesn’t provide a tick format for ordinal scales; we want shorthand when -// an ordinal domain is numbers or dates, and we want null to mean the empty -// string, not the default identity format. TODO Remove this in favor of the -// axis mark’s inferTickFormat. -export function maybeAutoTickFormat(tickFormat, domain) { - return tickFormat === undefined - ? isTemporal(domain) - ? formatIsoDate - : string - : typeof tickFormat === "function" - ? tickFormat - : (typeof tickFormat === "string" ? (isTemporal(domain) ? utcFormat : format) : constant)(tickFormat); -} diff --git a/src/legends/swatches.js b/src/legends/swatches.js index 560645377f..ac1a26e507 100644 --- a/src/legends/swatches.js +++ b/src/legends/swatches.js @@ -1,9 +1,10 @@ import {pathRound as path} from "d3"; -import {inferFontVariant, maybeAutoTickFormat} from "../axes.js"; -import {createContext, create} from "../context.js"; +import {inferFontVariant} from "../axes.js"; +import {create, createContext} from "../context.js"; import {isNoneish, maybeColorChannel, maybeNumberChannel} from "../options.js"; import {isOrdinalScale, isThresholdScale} from "../scales.js"; import {applyInlineStyles, impliedString, maybeClassName} from "../style.js"; +import {inferTickFormat} from "../marks/axis.js"; function maybeScale(scale, key) { if (key == null) return key; @@ -85,7 +86,7 @@ function legendItems(scale, options = {}, swatch) { } = options; const context = createContext(options); className = maybeClassName(className); - tickFormat = maybeAutoTickFormat(tickFormat, scale.domain); + if (typeof tickFormat !== "function") tickFormat = inferTickFormat(scale.scale, undefined, tickFormat); const swatches = create("div", context).attr( "class", diff --git a/src/marks/axis.js b/src/marks/axis.js index b10cc1188e..8b96182686 100644 --- a/src/marks/axis.js +++ b/src/marks/axis.js @@ -7,7 +7,7 @@ import {isIterable, isNoneish, isTemporal, orderof} from "../options.js"; import {maybeColorChannel, maybeNumberChannel, maybeRangeInterval} from "../options.js"; import {isTemporalScale} from "../scales.js"; import {offset} from "../style.js"; -import {isTimeYear, isUtcYear} from "../time.js"; +import {formatTimeTicks, isTimeYear, isUtcYear} from "../time.js"; import {initializer} from "../transforms/basic.js"; import {ruleX, ruleY} from "./rule.js"; import {text, textX, textY} from "./text.js"; @@ -368,7 +368,7 @@ function axisTextKy( }, function (scale, ticks, channels) { if (fontVariant === undefined) this.fontVariant = inferFontVariant(scale); - if (text === undefined) channels.text = inferTextChannel(scale, ticks, tickFormat); + if (text === undefined) channels.text = inferTextChannel(scale, ticks, tickFormat, anchor); } ); } @@ -415,7 +415,7 @@ function axisTextKx( }, function (scale, ticks, channels) { if (fontVariant === undefined) this.fontVariant = inferFontVariant(scale); - if (text === undefined) channels.text = inferTextChannel(scale, ticks, tickFormat); + if (text === undefined) channels.text = inferTextChannel(scale, ticks, tickFormat, anchor); } ); } @@ -565,15 +565,17 @@ function axisMark(mark, k, ariaLabel, data, options, initialize) { return m; } -function inferTextChannel(scale, ticks, tickFormat) { - return {value: inferTickFormat(scale, ticks, tickFormat)}; +function inferTextChannel(scale, ticks, tickFormat, anchor) { + return {value: inferTickFormat(scale, ticks, tickFormat, anchor)}; } // D3’s ordinal scales simply use toString by default, but if the ordinal scale // domain (or ticks) are numbers or dates (say because we’re applying a time // interval to the ordinal scale), we want Plot’s default formatter. -export function inferTickFormat(scale, ticks, tickFormat) { - return scale.tickFormat +export function inferTickFormat(scale, ticks, tickFormat, anchor) { + return tickFormat === undefined && isTemporalScale(scale) + ? formatTimeTicks(scale, ticks, anchor) + : scale.tickFormat ? scale.tickFormat(isIterable(ticks) ? null : ticks, tickFormat) : tickFormat === undefined ? isUtcYear(scale.interval) diff --git a/src/time.js b/src/time.js index fb1cd0d4dc..3020309503 100644 --- a/src/time.js +++ b/src/time.js @@ -1,7 +1,34 @@ +import {bisector, extent, timeFormat, utcFormat} from "d3"; import {utcSecond, utcMinute, utcHour, unixDay, utcWeek, utcMonth, utcYear} from "d3"; import {utcMonday, utcTuesday, utcWednesday, utcThursday, utcFriday, utcSaturday, utcSunday} from "d3"; import {timeSecond, timeMinute, timeHour, timeDay, timeWeek, timeMonth, timeYear} from "d3"; import {timeMonday, timeTuesday, timeWednesday, timeThursday, timeFriday, timeSaturday, timeSunday} from "d3"; +import {orderof} from "./options.js"; + +const durationSecond = 1000; +const durationMinute = durationSecond * 60; +const durationHour = durationMinute * 60; +const durationDay = durationHour * 24; +const durationWeek = durationDay * 7; +const durationMonth = durationDay * 30; +const durationYear = durationDay * 365; + +// See https://github.com/d3/d3-time/blob/9e8dc940f38f78d7588aad68a54a25b1f0c2d97b/src/ticks.js#L14-L33 +const formats = [ + ["millisecond", 0.5 * durationSecond], + ["second", durationSecond], + ["second", 30 * durationSecond], + ["minute", durationMinute], + ["minute", 30 * durationMinute], + ["hour", durationHour], + ["hour", 12 * durationHour], + ["day", durationDay], + ["day", 2 * durationDay], + ["week", durationWeek], + ["month", durationMonth], + ["month", 3 * durationMonth], + ["year", durationYear] +]; const timeIntervals = new Map([ ["second", timeSecond], @@ -82,3 +109,49 @@ export function isTimeYear(i) { const date = i.floor(new Date(2000, 11, 31)); return timeYear(date) >= date; // coercing equality } + +export function formatTimeTicks(scale, ticks, anchor) { + const format = scale.type === "time" ? timeFormat : utcFormat; + const template = + anchor === "left" || anchor === "right" + ? (f1, f2) => `\n${f1}\n${f2}` // extra newline to keep f1 centered + : anchor === "top" + ? (f1, f2) => `${f2}\n${f1}` + : (f1, f2) => `${f1}\n${f2}`; + switch (getTimeTicksInterval(scale, ticks)) { + case "millisecond": + return formatConditional(format(".%L"), format(":%M:%S"), template); + case "second": + return formatConditional(format(":%S"), format("%-I:%M"), template); + case "minute": + return formatConditional(format("%-I:%M"), format("%p"), template); + case "hour": + return formatConditional(format("%-I %p"), format("%b %-d"), template); + case "day": + return formatConditional(format("%-d"), format("%b"), template); + case "week": + return formatConditional(format("%-d"), format("%b"), template); + case "month": + return formatConditional(format("%b"), format("%Y"), template); + case "year": + return format("%Y"); + } + throw new Error("unable to format time ticks"); +} + +// See https://github.com/d3/d3-time/blob/9e8dc940f38f78d7588aad68a54a25b1f0c2d97b/src/ticks.js#L43-L50 +function getTimeTicksInterval(scale, ticks) { + const [start, stop] = extent(scale.domain()); + const count = typeof ticks === "number" ? ticks : 10; // TODO detect ticks as time interval? + const step = Math.abs(stop - start) / count; + return formats[bisector(([, step]) => Math.log(step)).center(formats, Math.log(step))][0]; +} + +function formatConditional(format1, format2, template) { + return (x, i, X) => { + const f1 = format1(x, i); // always shown + const f2 = format2(x, i); // only shown if different + const j = i - orderof(X); // detect reversed domains + return i !== j && X[j] !== undefined && f2 === format2(X[j], j) ? f1 : template(f1, f2); + }; +} diff --git a/test/output/aaplCandlestick.svg b/test/output/aaplCandlestick.svg index 92e6ddda36..b60901d70f 100644 --- a/test/output/aaplCandlestick.svg +++ b/test/output/aaplCandlestick.svg @@ -63,11 +63,11 @@ - December - 2018 - February - March - April + Dec2017 + Jan2018 + Feb + Mar + Apr May diff --git a/test/output/aaplVolumeRect.svg b/test/output/aaplVolumeRect.svg index 42a109c0a3..85fb7accd7 100644 --- a/test/output/aaplVolumeRect.svg +++ b/test/output/aaplVolumeRect.svg @@ -75,14 +75,14 @@ - Mar 18 - Mar 25 - April - Apr 08 - Apr 15 - Apr 22 - Apr 29 - May 06 + 18Mar + 25 + 1Apr + 8 + 15 + 22 + 29 + 6May diff --git a/test/output/availability.svg b/test/output/availability.svg index b153c1f0a3..fe2ff96428 100644 --- a/test/output/availability.svg +++ b/test/output/availability.svg @@ -41,12 +41,12 @@ - 2020 - April - July - October - 2021 - April + Jan2020 + Apr + Jul + Oct + Jan2021 + Apr diff --git a/test/output/bin1m.svg b/test/output/bin1m.svg index 12449de3d3..96c219a75c 100644 --- a/test/output/bin1m.svg +++ b/test/output/bin1m.svg @@ -60,19 +60,19 @@ - 2020 - February - March - April + Jan2020 + Feb + Mar + Apr May - June - July - August - September - October - November - December - 2021 + Jun + Jul + Aug + Sep + Oct + Nov + Dec + Jan2021 diff --git a/test/output/binTimestamps.svg b/test/output/binTimestamps.svg index dab9e7e3fd..2870d55f6f 100644 --- a/test/output/binTimestamps.svg +++ b/test/output/binTimestamps.svg @@ -53,14 +53,14 @@ - 2021 - Sat 02 - Jan 03 - Mon 04 - Tue 05 - Wed 06 - Thu 07 - Fri 08 + 1Jan + 2 + 3 + 4 + 5 + 6 + 7 + 8 diff --git a/test/output/clamp.svg b/test/output/clamp.svg index 0247b29d4f..b7d622255c 100644 --- a/test/output/clamp.svg +++ b/test/output/clamp.svg @@ -25,15 +25,15 @@ - 2006 - April - July - October - 2007 - April - July - October - 2008 + Jan2006 + Apr + Jul + Oct + Jan2007 + Apr + Jul + Oct + Jan2008 diff --git a/test/output/covidIhmeProjectedDeaths.svg b/test/output/covidIhmeProjectedDeaths.svg index d09f543845..c1838e9c5f 100644 --- a/test/output/covidIhmeProjectedDeaths.svg +++ b/test/output/covidIhmeProjectedDeaths.svg @@ -115,28 +115,6 @@ ↑ Deaths per day to COVID-19 (projected) - - - - - - - - - - - - - - - - - - - - - - @@ -160,27 +138,49 @@ - 01March - 08 + 1Mar + 8 15 22 29 - 05April + 5Apr 12 19 26 - 03May + 3May 10 17 24 31 - 07June + 7Jun 14 21 28 - 05July + 5Jul 12 + + + + + + + + + + + + + + + + + + + + + + cone of uncertainty diff --git a/test/output/googleTrendsRidgeline.svg b/test/output/googleTrendsRidgeline.svg index c8cee5c6e2..9684601e88 100644 --- a/test/output/googleTrendsRidgeline.svg +++ b/test/output/googleTrendsRidgeline.svg @@ -225,18 +225,18 @@ - 2020 - February - March - April + 2020Jan + Feb + Mar + Apr May - June - July - August - September - October - November - December + Jun + Jul + Aug + Sep + Oct + Nov + Dec diff --git a/test/output/seattlePrecipitationSum.svg b/test/output/seattlePrecipitationSum.svg index da4dfb089c..1585a8495c 100644 --- a/test/output/seattlePrecipitationSum.svg +++ b/test/output/seattlePrecipitationSum.svg @@ -62,17 +62,17 @@ - Fri 11 - Dec 13 - Tue 15 - Thu 17 - Sat 19 - Mon 21 - Wed 23 - Fri 25 - Dec 27 - Tue 29 - Thu 31 + 11Dec + 13 + 15 + 17 + 19 + 21 + 23 + 25 + 27 + 29 + 31 diff --git a/test/output/sfCovidDeaths.svg b/test/output/sfCovidDeaths.svg index 54bb86183c..8ea55d9093 100644 --- a/test/output/sfCovidDeaths.svg +++ b/test/output/sfCovidDeaths.svg @@ -49,12 +49,12 @@ - April - July - October - 2021 - April - July + Apr2020 + Jul + Oct + Jan2021 + Apr + Jul specimen_collection_date → diff --git a/test/output/sfTemperatureBand.svg b/test/output/sfTemperatureBand.svg index 5538505657..395e0ea167 100644 --- a/test/output/sfTemperatureBand.svg +++ b/test/output/sfTemperatureBand.svg @@ -61,15 +61,15 @@ - October - 2011 - April - July - October - 2012 - April - July - October + Oct2010 + Jan2011 + Apr + Jul + Oct + Jan2012 + Apr + Jul + Oct diff --git a/test/output/sfTemperatureBandArea.svg b/test/output/sfTemperatureBandArea.svg index c109fd42ac..f55308e19a 100644 --- a/test/output/sfTemperatureBandArea.svg +++ b/test/output/sfTemperatureBandArea.svg @@ -79,15 +79,15 @@ - October - 2011 - April - July - October - 2012 - April - July - October + Oct2010 + Jan2011 + Apr + Jul + Oct + Jan2012 + Apr + Jul + Oct diff --git a/test/output/sfTemperatureWindow.svg b/test/output/sfTemperatureWindow.svg index 9ba17a2d0e..32e1398581 100644 --- a/test/output/sfTemperatureWindow.svg +++ b/test/output/sfTemperatureWindow.svg @@ -73,15 +73,15 @@ - October - 2011 - April - July - October - 2012 - April - July - October + Oct2010 + Jan2011 + Apr + Jul + Oct + Jan2012 + Apr + Jul + Oct diff --git a/test/output/shorthandArea.svg b/test/output/shorthandArea.svg index ad3565ece5..016d698ab2 100644 --- a/test/output/shorthandArea.svg +++ b/test/output/shorthandArea.svg @@ -46,14 +46,14 @@ - Jan 07 - Jan 14 - Jan 21 - Jan 28 - Feb 04 - Feb 11 - Feb 18 - Feb 25 + 7Jan + 14 + 21 + 28 + 4Feb + 11 + 18 + 25 diff --git a/test/output/shorthandDot.svg b/test/output/shorthandDot.svg index f9548f1faf..2b8dfb76a4 100644 --- a/test/output/shorthandDot.svg +++ b/test/output/shorthandDot.svg @@ -52,14 +52,14 @@ - Jan 07 - Jan 14 - Jan 21 - Jan 28 - Feb 04 - Feb 11 - Feb 18 - Feb 25 + 7Jan + 14 + 21 + 28 + 4Feb + 11 + 18 + 25 diff --git a/test/output/shorthandLine.svg b/test/output/shorthandLine.svg index ccfa5c0ed0..967e97d799 100644 --- a/test/output/shorthandLine.svg +++ b/test/output/shorthandLine.svg @@ -52,14 +52,14 @@ - Jan 07 - Jan 14 - Jan 21 - Jan 28 - Feb 04 - Feb 11 - Feb 18 - Feb 25 + 7Jan + 14 + 21 + 28 + 4Feb + 11 + 18 + 25 diff --git a/test/output/shorthandText.svg b/test/output/shorthandText.svg index 7e8b1a4bbe..7b9a6c043b 100644 --- a/test/output/shorthandText.svg +++ b/test/output/shorthandText.svg @@ -52,14 +52,14 @@ - Jan 07 - Jan 14 - Jan 21 - Jan 28 - Feb 04 - Feb 11 - Feb 18 - Feb 25 + 7Jan + 14 + 21 + 28 + 4Feb + 11 + 18 + 25 0 diff --git a/test/output/shorthandVector.svg b/test/output/shorthandVector.svg index e96509c09e..a0be321182 100644 --- a/test/output/shorthandVector.svg +++ b/test/output/shorthandVector.svg @@ -52,14 +52,14 @@ - Jan 07 - Jan 14 - Jan 21 - Jan 28 - Feb 04 - Feb 11 - Feb 18 - Feb 25 + 7Jan + 14 + 21 + 28 + 4Feb + 11 + 18 + 25 diff --git a/test/output/stargazers.svg b/test/output/stargazers.svg index d649ab397c..545faf5c44 100644 --- a/test/output/stargazers.svg +++ b/test/output/stargazers.svg @@ -65,13 +65,13 @@ - December - 2021 - February - March - April + Dec2020 + Jan2021 + Feb + Mar + Apr May - June + Jun diff --git a/test/output/stargazersBinned.svg b/test/output/stargazersBinned.svg index b85fbac89e..66b295ca41 100644 --- a/test/output/stargazersBinned.svg +++ b/test/output/stargazersBinned.svg @@ -72,14 +72,14 @@ - November - December - 2021 - February - March - April + Nov2020 + Dec + Jan2021 + Feb + Mar + Apr May - June + Jun 2020-11-01 to 2020-11-08 diff --git a/test/output/timeAxisBottom.svg b/test/output/timeAxisBottom.svg new file mode 100644 index 0000000000..9a4d080945 --- /dev/null +++ b/test/output/timeAxisBottom.svg @@ -0,0 +1,1386 @@ +<svg width="640" height="1500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g transform="translate(0,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="80" x2="80" y1="0" y2="20"></line> + <line x1="140" x2="140" y1="0" y2="20"></line> + <line x1="200" x2="200" y1="0" y2="20"></line> + <line x1="260" x2="260" y1="0" y2="20"></line> + <line x1="320" x2="320" y1="0" y2="20"></line> + <line x1="380" x2="380" y1="0" y2="20"></line> + <line x1="440" x2="440" y1="0" y2="20"></line> + <line x1="500" x2="500" y1="0" y2="20"></line> + <line x1="560" x2="560" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(80,20)" d="M0,0L0,6"></path> + <path transform="translate(140,20)" d="M0,0L0,6"></path> + <path transform="translate(200,20)" d="M0,0L0,6"></path> + <path transform="translate(260,20)" d="M0,0L0,6"></path> + <path transform="translate(320,20)" d="M0,0L0,6"></path> + <path transform="translate(380,20)" d="M0,0L0,6"></path> + <path transform="translate(440,20)" d="M0,0L0,6"></path> + <path transform="translate(500,20)" d="M0,0L0,6"></path> + <path transform="translate(560,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">.000</tspan><tspan x="0" dy="1em">:00:00</tspan></text> + <text y="0.71em" transform="translate(80,20)">.100</text> + <text y="0.71em" transform="translate(140,20)">.200</text> + <text y="0.71em" transform="translate(200,20)">.300</text> + <text y="0.71em" transform="translate(260,20)">.400</text> + <text y="0.71em" transform="translate(320,20)">.500</text> + <text y="0.71em" transform="translate(380,20)">.600</text> + <text y="0.71em" transform="translate(440,20)">.700</text> + <text y="0.71em" transform="translate(500,20)">.800</text> + <text y="0.71em" transform="translate(560,20)">.900</text> + <text transform="translate(620,20)"><tspan x="0" y="0.71em">.000</tspan><tspan x="0" dy="1em">:00:01</tspan></text> + </g> + </svg></g> + <g transform="translate(0,60)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="80" x2="80" y1="0" y2="20"></line> + <line x1="140" x2="140" y1="0" y2="20"></line> + <line x1="200" x2="200" y1="0" y2="20"></line> + <line x1="260" x2="260" y1="0" y2="20"></line> + <line x1="320" x2="320" y1="0" y2="20"></line> + <line x1="380" x2="380" y1="0" y2="20"></line> + <line x1="440" x2="440" y1="0" y2="20"></line> + <line x1="500" x2="500" y1="0" y2="20"></line> + <line x1="560" x2="560" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(80,20)" d="M0,0L0,6"></path> + <path transform="translate(140,20)" d="M0,0L0,6"></path> + <path transform="translate(200,20)" d="M0,0L0,6"></path> + <path transform="translate(260,20)" d="M0,0L0,6"></path> + <path transform="translate(320,20)" d="M0,0L0,6"></path> + <path transform="translate(380,20)" d="M0,0L0,6"></path> + <path transform="translate(440,20)" d="M0,0L0,6"></path> + <path transform="translate(500,20)" d="M0,0L0,6"></path> + <path transform="translate(560,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">.000</tspan><tspan x="0" dy="1em">:00:00</tspan></text> + <text y="0.71em" transform="translate(80,20)">.500</text> + <text transform="translate(140,20)"><tspan x="0" y="0.71em">.000</tspan><tspan x="0" dy="1em">:00:01</tspan></text> + <text y="0.71em" transform="translate(200,20)">.500</text> + <text transform="translate(260,20)"><tspan x="0" y="0.71em">.000</tspan><tspan x="0" dy="1em">:00:02</tspan></text> + <text y="0.71em" transform="translate(320,20)">.500</text> + <text transform="translate(380,20)"><tspan x="0" y="0.71em">.000</tspan><tspan x="0" dy="1em">:00:03</tspan></text> + <text y="0.71em" transform="translate(440,20)">.500</text> + <text transform="translate(500,20)"><tspan x="0" y="0.71em">.000</tspan><tspan x="0" dy="1em">:00:04</tspan></text> + <text y="0.71em" transform="translate(560,20)">.500</text> + <text transform="translate(620,20)"><tspan x="0" y="0.71em">.000</tspan><tspan x="0" dy="1em">:00:05</tspan></text> + </g> + </svg></g> + <g transform="translate(0,120)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="80" x2="80" y1="0" y2="20"></line> + <line x1="140" x2="140" y1="0" y2="20"></line> + <line x1="200" x2="200" y1="0" y2="20"></line> + <line x1="260" x2="260" y1="0" y2="20"></line> + <line x1="320" x2="320" y1="0" y2="20"></line> + <line x1="380" x2="380" y1="0" y2="20"></line> + <line x1="440" x2="440" y1="0" y2="20"></line> + <line x1="500" x2="500" y1="0" y2="20"></line> + <line x1="560" x2="560" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(80,20)" d="M0,0L0,6"></path> + <path transform="translate(140,20)" d="M0,0L0,6"></path> + <path transform="translate(200,20)" d="M0,0L0,6"></path> + <path transform="translate(260,20)" d="M0,0L0,6"></path> + <path transform="translate(320,20)" d="M0,0L0,6"></path> + <path transform="translate(380,20)" d="M0,0L0,6"></path> + <path transform="translate(440,20)" d="M0,0L0,6"></path> + <path transform="translate(500,20)" d="M0,0L0,6"></path> + <path transform="translate(560,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">:00</tspan><tspan x="0" dy="1em">12:00</tspan></text> + <text y="0.71em" transform="translate(80,20)">:01</text> + <text y="0.71em" transform="translate(140,20)">:02</text> + <text y="0.71em" transform="translate(200,20)">:03</text> + <text y="0.71em" transform="translate(260,20)">:04</text> + <text y="0.71em" transform="translate(320,20)">:05</text> + <text y="0.71em" transform="translate(380,20)">:06</text> + <text y="0.71em" transform="translate(440,20)">:07</text> + <text y="0.71em" transform="translate(500,20)">:08</text> + <text y="0.71em" transform="translate(560,20)">:09</text> + <text y="0.71em" transform="translate(620,20)">:10</text> + </g> + </svg></g> + <g transform="translate(0,180)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="70" x2="70" y1="0" y2="20"></line> + <line x1="120" x2="120" y1="0" y2="20"></line> + <line x1="170" x2="170" y1="0" y2="20"></line> + <line x1="220" x2="220" y1="0" y2="20"></line> + <line x1="270.00000000000006" x2="270.00000000000006" y1="0" y2="20"></line> + <line x1="320" x2="320" y1="0" y2="20"></line> + <line x1="370" x2="370" y1="0" y2="20"></line> + <line x1="420" x2="420" y1="0" y2="20"></line> + <line x1="470" x2="470" y1="0" y2="20"></line> + <line x1="520.0000000000001" x2="520.0000000000001" y1="0" y2="20"></line> + <line x1="569.9999999999999" x2="569.9999999999999" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(70,20)" d="M0,0L0,6"></path> + <path transform="translate(120,20)" d="M0,0L0,6"></path> + <path transform="translate(170,20)" d="M0,0L0,6"></path> + <path transform="translate(220,20)" d="M0,0L0,6"></path> + <path transform="translate(270.00000000000006,20)" d="M0,0L0,6"></path> + <path transform="translate(320,20)" d="M0,0L0,6"></path> + <path transform="translate(370,20)" d="M0,0L0,6"></path> + <path transform="translate(420,20)" d="M0,0L0,6"></path> + <path transform="translate(470,20)" d="M0,0L0,6"></path> + <path transform="translate(520.0000000000001,20)" d="M0,0L0,6"></path> + <path transform="translate(569.9999999999999,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">:00</tspan><tspan x="0" dy="1em">12:00</tspan></text> + <text y="0.71em" transform="translate(70,20)">:05</text> + <text y="0.71em" transform="translate(120,20)">:10</text> + <text y="0.71em" transform="translate(170,20)">:15</text> + <text y="0.71em" transform="translate(220,20)">:20</text> + <text y="0.71em" transform="translate(270.00000000000006,20)">:25</text> + <text y="0.71em" transform="translate(320,20)">:30</text> + <text y="0.71em" transform="translate(370,20)">:35</text> + <text y="0.71em" transform="translate(420,20)">:40</text> + <text y="0.71em" transform="translate(470,20)">:45</text> + <text y="0.71em" transform="translate(520.0000000000001,20)">:50</text> + <text y="0.71em" transform="translate(569.9999999999999,20)">:55</text> + <text transform="translate(620,20)"><tspan x="0" y="0.71em">:00</tspan><tspan x="0" dy="1em">12:01</tspan></text> + </g> + </svg></g> + <g transform="translate(0,240)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="95" x2="95" y1="0" y2="20"></line> + <line x1="170" x2="170" y1="0" y2="20"></line> + <line x1="245" x2="245" y1="0" y2="20"></line> + <line x1="320" x2="320" y1="0" y2="20"></line> + <line x1="395" x2="395" y1="0" y2="20"></line> + <line x1="470" x2="470" y1="0" y2="20"></line> + <line x1="545" x2="545" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(95,20)" d="M0,0L0,6"></path> + <path transform="translate(170,20)" d="M0,0L0,6"></path> + <path transform="translate(245,20)" d="M0,0L0,6"></path> + <path transform="translate(320,20)" d="M0,0L0,6"></path> + <path transform="translate(395,20)" d="M0,0L0,6"></path> + <path transform="translate(470,20)" d="M0,0L0,6"></path> + <path transform="translate(545,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">:00</tspan><tspan x="0" dy="1em">12:00</tspan></text> + <text y="0.71em" transform="translate(95,20)">:15</text> + <text y="0.71em" transform="translate(170,20)">:30</text> + <text y="0.71em" transform="translate(245,20)">:45</text> + <text transform="translate(320,20)"><tspan x="0" y="0.71em">:00</tspan><tspan x="0" dy="1em">12:01</tspan></text> + <text y="0.71em" transform="translate(395,20)">:15</text> + <text y="0.71em" transform="translate(470,20)">:30</text> + <text y="0.71em" transform="translate(545,20)">:45</text> + <text transform="translate(620,20)"><tspan x="0" y="0.71em">:00</tspan><tspan x="0" dy="1em">12:02</tspan></text> + </g> + </svg></g> + <g transform="translate(0,300)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="95" x2="95" y1="0" y2="20"></line> + <line x1="170" x2="170" y1="0" y2="20"></line> + <line x1="245" x2="245" y1="0" y2="20"></line> + <line x1="320" x2="320" y1="0" y2="20"></line> + <line x1="395" x2="395" y1="0" y2="20"></line> + <line x1="470" x2="470" y1="0" y2="20"></line> + <line x1="545" x2="545" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(95,20)" d="M0,0L0,6"></path> + <path transform="translate(170,20)" d="M0,0L0,6"></path> + <path transform="translate(245,20)" d="M0,0L0,6"></path> + <path transform="translate(320,20)" d="M0,0L0,6"></path> + <path transform="translate(395,20)" d="M0,0L0,6"></path> + <path transform="translate(470,20)" d="M0,0L0,6"></path> + <path transform="translate(545,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">:00</tspan><tspan x="0" dy="1em">12:00</tspan></text> + <text y="0.71em" transform="translate(95,20)">:30</text> + <text transform="translate(170,20)"><tspan x="0" y="0.71em">:00</tspan><tspan x="0" dy="1em">12:01</tspan></text> + <text y="0.71em" transform="translate(245,20)">:30</text> + <text transform="translate(320,20)"><tspan x="0" y="0.71em">:00</tspan><tspan x="0" dy="1em">12:02</tspan></text> + <text y="0.71em" transform="translate(395,20)">:30</text> + <text transform="translate(470,20)"><tspan x="0" y="0.71em">:00</tspan><tspan x="0" dy="1em">12:03</tspan></text> + <text y="0.71em" transform="translate(545,20)">:30</text> + <text transform="translate(620,20)"><tspan x="0" y="0.71em">:00</tspan><tspan x="0" dy="1em">12:04</tspan></text> + </g> + </svg></g> + <g transform="translate(0,360)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="80" x2="80" y1="0" y2="20"></line> + <line x1="140" x2="140" y1="0" y2="20"></line> + <line x1="200" x2="200" y1="0" y2="20"></line> + <line x1="260" x2="260" y1="0" y2="20"></line> + <line x1="320" x2="320" y1="0" y2="20"></line> + <line x1="380" x2="380" y1="0" y2="20"></line> + <line x1="440" x2="440" y1="0" y2="20"></line> + <line x1="500" x2="500" y1="0" y2="20"></line> + <line x1="560" x2="560" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(80,20)" d="M0,0L0,6"></path> + <path transform="translate(140,20)" d="M0,0L0,6"></path> + <path transform="translate(200,20)" d="M0,0L0,6"></path> + <path transform="translate(260,20)" d="M0,0L0,6"></path> + <path transform="translate(320,20)" d="M0,0L0,6"></path> + <path transform="translate(380,20)" d="M0,0L0,6"></path> + <path transform="translate(440,20)" d="M0,0L0,6"></path> + <path transform="translate(500,20)" d="M0,0L0,6"></path> + <path transform="translate(560,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">12:00</tspan><tspan x="0" dy="1em">AM</tspan></text> + <text y="0.71em" transform="translate(80,20)">12:01</text> + <text y="0.71em" transform="translate(140,20)">12:02</text> + <text y="0.71em" transform="translate(200,20)">12:03</text> + <text y="0.71em" transform="translate(260,20)">12:04</text> + <text y="0.71em" transform="translate(320,20)">12:05</text> + <text y="0.71em" transform="translate(380,20)">12:06</text> + <text y="0.71em" transform="translate(440,20)">12:07</text> + <text y="0.71em" transform="translate(500,20)">12:08</text> + <text y="0.71em" transform="translate(560,20)">12:09</text> + <text y="0.71em" transform="translate(620,20)">12:10</text> + </g> + </svg></g> + <g transform="translate(0,420)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="70" x2="70" y1="0" y2="20"></line> + <line x1="120" x2="120" y1="0" y2="20"></line> + <line x1="170" x2="170" y1="0" y2="20"></line> + <line x1="220" x2="220" y1="0" y2="20"></line> + <line x1="270.00000000000006" x2="270.00000000000006" y1="0" y2="20"></line> + <line x1="320" x2="320" y1="0" y2="20"></line> + <line x1="370" x2="370" y1="0" y2="20"></line> + <line x1="420" x2="420" y1="0" y2="20"></line> + <line x1="470" x2="470" y1="0" y2="20"></line> + <line x1="520.0000000000001" x2="520.0000000000001" y1="0" y2="20"></line> + <line x1="569.9999999999999" x2="569.9999999999999" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(70,20)" d="M0,0L0,6"></path> + <path transform="translate(120,20)" d="M0,0L0,6"></path> + <path transform="translate(170,20)" d="M0,0L0,6"></path> + <path transform="translate(220,20)" d="M0,0L0,6"></path> + <path transform="translate(270.00000000000006,20)" d="M0,0L0,6"></path> + <path transform="translate(320,20)" d="M0,0L0,6"></path> + <path transform="translate(370,20)" d="M0,0L0,6"></path> + <path transform="translate(420,20)" d="M0,0L0,6"></path> + <path transform="translate(470,20)" d="M0,0L0,6"></path> + <path transform="translate(520.0000000000001,20)" d="M0,0L0,6"></path> + <path transform="translate(569.9999999999999,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">12:00</tspan><tspan x="0" dy="1em">AM</tspan></text> + <text y="0.71em" transform="translate(70,20)">12:05</text> + <text y="0.71em" transform="translate(120,20)">12:10</text> + <text y="0.71em" transform="translate(170,20)">12:15</text> + <text y="0.71em" transform="translate(220,20)">12:20</text> + <text y="0.71em" transform="translate(270.00000000000006,20)">12:25</text> + <text y="0.71em" transform="translate(320,20)">12:30</text> + <text y="0.71em" transform="translate(370,20)">12:35</text> + <text y="0.71em" transform="translate(420,20)">12:40</text> + <text y="0.71em" transform="translate(470,20)">12:45</text> + <text y="0.71em" transform="translate(520.0000000000001,20)">12:50</text> + <text y="0.71em" transform="translate(569.9999999999999,20)">12:55</text> + <text y="0.71em" transform="translate(620,20)">1:00</text> + </g> + </svg></g> + <g transform="translate(0,480)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="80" x2="80" y1="0" y2="20"></line> + <line x1="140" x2="140" y1="0" y2="20"></line> + <line x1="200" x2="200" y1="0" y2="20"></line> + <line x1="260" x2="260" y1="0" y2="20"></line> + <line x1="320" x2="320" y1="0" y2="20"></line> + <line x1="380" x2="380" y1="0" y2="20"></line> + <line x1="440" x2="440" y1="0" y2="20"></line> + <line x1="500" x2="500" y1="0" y2="20"></line> + <line x1="560" x2="560" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(80,20)" d="M0,0L0,6"></path> + <path transform="translate(140,20)" d="M0,0L0,6"></path> + <path transform="translate(200,20)" d="M0,0L0,6"></path> + <path transform="translate(260,20)" d="M0,0L0,6"></path> + <path transform="translate(320,20)" d="M0,0L0,6"></path> + <path transform="translate(380,20)" d="M0,0L0,6"></path> + <path transform="translate(440,20)" d="M0,0L0,6"></path> + <path transform="translate(500,20)" d="M0,0L0,6"></path> + <path transform="translate(560,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">12:00</tspan><tspan x="0" dy="1em">AM</tspan></text> + <text y="0.71em" transform="translate(80,20)">12:15</text> + <text y="0.71em" transform="translate(140,20)">12:30</text> + <text y="0.71em" transform="translate(200,20)">12:45</text> + <text y="0.71em" transform="translate(260,20)">1:00</text> + <text y="0.71em" transform="translate(320,20)">1:15</text> + <text y="0.71em" transform="translate(380,20)">1:30</text> + <text y="0.71em" transform="translate(440,20)">1:45</text> + <text y="0.71em" transform="translate(500,20)">2:00</text> + <text y="0.71em" transform="translate(560,20)">2:15</text> + <text y="0.71em" transform="translate(620,20)">2:30</text> + </g> + </svg></g> + <g transform="translate(0,540)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="80" x2="80" y1="0" y2="20"></line> + <line x1="140" x2="140" y1="0" y2="20"></line> + <line x1="200" x2="200" y1="0" y2="20"></line> + <line x1="260" x2="260" y1="0" y2="20"></line> + <line x1="320" x2="320" y1="0" y2="20"></line> + <line x1="380" x2="380" y1="0" y2="20"></line> + <line x1="440" x2="440" y1="0" y2="20"></line> + <line x1="500" x2="500" y1="0" y2="20"></line> + <line x1="560" x2="560" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(80,20)" d="M0,0L0,6"></path> + <path transform="translate(140,20)" d="M0,0L0,6"></path> + <path transform="translate(200,20)" d="M0,0L0,6"></path> + <path transform="translate(260,20)" d="M0,0L0,6"></path> + <path transform="translate(320,20)" d="M0,0L0,6"></path> + <path transform="translate(380,20)" d="M0,0L0,6"></path> + <path transform="translate(440,20)" d="M0,0L0,6"></path> + <path transform="translate(500,20)" d="M0,0L0,6"></path> + <path transform="translate(560,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">12:00</tspan><tspan x="0" dy="1em">AM</tspan></text> + <text y="0.71em" transform="translate(80,20)">12:30</text> + <text y="0.71em" transform="translate(140,20)">1:00</text> + <text y="0.71em" transform="translate(200,20)">1:30</text> + <text y="0.71em" transform="translate(260,20)">2:00</text> + <text y="0.71em" transform="translate(320,20)">2:30</text> + <text y="0.71em" transform="translate(380,20)">3:00</text> + <text y="0.71em" transform="translate(440,20)">3:30</text> + <text y="0.71em" transform="translate(500,20)">4:00</text> + <text y="0.71em" transform="translate(560,20)">4:30</text> + <text y="0.71em" transform="translate(620,20)">5:00</text> + </g> + </svg></g> + <g transform="translate(0,600)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="80" x2="80" y1="0" y2="20"></line> + <line x1="140" x2="140" y1="0" y2="20"></line> + <line x1="200" x2="200" y1="0" y2="20"></line> + <line x1="260" x2="260" y1="0" y2="20"></line> + <line x1="320" x2="320" y1="0" y2="20"></line> + <line x1="380" x2="380" y1="0" y2="20"></line> + <line x1="440" x2="440" y1="0" y2="20"></line> + <line x1="500" x2="500" y1="0" y2="20"></line> + <line x1="560" x2="560" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(80,20)" d="M0,0L0,6"></path> + <path transform="translate(140,20)" d="M0,0L0,6"></path> + <path transform="translate(200,20)" d="M0,0L0,6"></path> + <path transform="translate(260,20)" d="M0,0L0,6"></path> + <path transform="translate(320,20)" d="M0,0L0,6"></path> + <path transform="translate(380,20)" d="M0,0L0,6"></path> + <path transform="translate(440,20)" d="M0,0L0,6"></path> + <path transform="translate(500,20)" d="M0,0L0,6"></path> + <path transform="translate(560,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">10:00</tspan><tspan x="0" dy="1em">AM</tspan></text> + <text y="0.71em" transform="translate(80,20)">10:30</text> + <text y="0.71em" transform="translate(140,20)">11:00</text> + <text y="0.71em" transform="translate(200,20)">11:30</text> + <text transform="translate(260,20)"><tspan x="0" y="0.71em">12:00</tspan><tspan x="0" dy="1em">PM</tspan></text> + <text y="0.71em" transform="translate(320,20)">12:30</text> + <text y="0.71em" transform="translate(380,20)">1:00</text> + <text y="0.71em" transform="translate(440,20)">1:30</text> + <text y="0.71em" transform="translate(500,20)">2:00</text> + <text y="0.71em" transform="translate(560,20)">2:30</text> + <text y="0.71em" transform="translate(620,20)">3:00</text> + </g> + </svg></g> + <g transform="translate(0,660)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="80" x2="80" y1="0" y2="20"></line> + <line x1="140" x2="140" y1="0" y2="20"></line> + <line x1="200" x2="200" y1="0" y2="20"></line> + <line x1="260" x2="260" y1="0" y2="20"></line> + <line x1="320" x2="320" y1="0" y2="20"></line> + <line x1="380" x2="380" y1="0" y2="20"></line> + <line x1="440" x2="440" y1="0" y2="20"></line> + <line x1="500" x2="500" y1="0" y2="20"></line> + <line x1="560" x2="560" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(80,20)" d="M0,0L0,6"></path> + <path transform="translate(140,20)" d="M0,0L0,6"></path> + <path transform="translate(200,20)" d="M0,0L0,6"></path> + <path transform="translate(260,20)" d="M0,0L0,6"></path> + <path transform="translate(320,20)" d="M0,0L0,6"></path> + <path transform="translate(380,20)" d="M0,0L0,6"></path> + <path transform="translate(440,20)" d="M0,0L0,6"></path> + <path transform="translate(500,20)" d="M0,0L0,6"></path> + <path transform="translate(560,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">12 AM</tspan><tspan x="0" dy="1em">Jan 1</tspan></text> + <text y="0.71em" transform="translate(80,20)">1 AM</text> + <text y="0.71em" transform="translate(140,20)">2 AM</text> + <text y="0.71em" transform="translate(200,20)">3 AM</text> + <text y="0.71em" transform="translate(260,20)">4 AM</text> + <text y="0.71em" transform="translate(320,20)">5 AM</text> + <text y="0.71em" transform="translate(380,20)">6 AM</text> + <text y="0.71em" transform="translate(440,20)">7 AM</text> + <text y="0.71em" transform="translate(500,20)">8 AM</text> + <text y="0.71em" transform="translate(560,20)">9 AM</text> + <text y="0.71em" transform="translate(620,20)">10 AM</text> + </g> + </svg></g> + <g transform="translate(0,720)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="82.06896551724138" x2="82.06896551724138" y1="0" y2="20"></line> + <line x1="144.13793103448276" x2="144.13793103448276" y1="0" y2="20"></line> + <line x1="206.20689655172416" x2="206.20689655172416" y1="0" y2="20"></line> + <line x1="268.2758620689655" x2="268.2758620689655" y1="0" y2="20"></line> + <line x1="330.3448275862069" x2="330.3448275862069" y1="0" y2="20"></line> + <line x1="392.4137931034483" x2="392.4137931034483" y1="0" y2="20"></line> + <line x1="454.48275862068965" x2="454.48275862068965" y1="0" y2="20"></line> + <line x1="516.551724137931" x2="516.551724137931" y1="0" y2="20"></line> + <line x1="578.6206896551723" x2="578.6206896551723" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(82.06896551724138,20)" d="M0,0L0,6"></path> + <path transform="translate(144.13793103448276,20)" d="M0,0L0,6"></path> + <path transform="translate(206.20689655172416,20)" d="M0,0L0,6"></path> + <path transform="translate(268.2758620689655,20)" d="M0,0L0,6"></path> + <path transform="translate(330.3448275862069,20)" d="M0,0L0,6"></path> + <path transform="translate(392.4137931034483,20)" d="M0,0L0,6"></path> + <path transform="translate(454.48275862068965,20)" d="M0,0L0,6"></path> + <path transform="translate(516.551724137931,20)" d="M0,0L0,6"></path> + <path transform="translate(578.6206896551723,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">12 AM</tspan><tspan x="0" dy="1em">Jan 1</tspan></text> + <text y="0.71em" transform="translate(82.06896551724138,20)">3 AM</text> + <text y="0.71em" transform="translate(144.13793103448276,20)">6 AM</text> + <text y="0.71em" transform="translate(206.20689655172416,20)">9 AM</text> + <text y="0.71em" transform="translate(268.2758620689655,20)">12 PM</text> + <text y="0.71em" transform="translate(330.3448275862069,20)">3 PM</text> + <text y="0.71em" transform="translate(392.4137931034483,20)">6 PM</text> + <text y="0.71em" transform="translate(454.48275862068965,20)">9 PM</text> + <text transform="translate(516.551724137931,20)"><tspan x="0" y="0.71em">12 AM</tspan><tspan x="0" dy="1em">Jan 2</tspan></text> + <text y="0.71em" transform="translate(578.6206896551723,20)">3 AM</text> + </g> + </svg></g> + <g transform="translate(0,780)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="95" x2="95" y1="0" y2="20"></line> + <line x1="170" x2="170" y1="0" y2="20"></line> + <line x1="245" x2="245" y1="0" y2="20"></line> + <line x1="320" x2="320" y1="0" y2="20"></line> + <line x1="395" x2="395" y1="0" y2="20"></line> + <line x1="470" x2="470" y1="0" y2="20"></line> + <line x1="545" x2="545" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(95,20)" d="M0,0L0,6"></path> + <path transform="translate(170,20)" d="M0,0L0,6"></path> + <path transform="translate(245,20)" d="M0,0L0,6"></path> + <path transform="translate(320,20)" d="M0,0L0,6"></path> + <path transform="translate(395,20)" d="M0,0L0,6"></path> + <path transform="translate(470,20)" d="M0,0L0,6"></path> + <path transform="translate(545,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">12 AM</tspan><tspan x="0" dy="1em">Jan 1</tspan></text> + <text y="0.71em" transform="translate(95,20)">6 AM</text> + <text y="0.71em" transform="translate(170,20)">12 PM</text> + <text y="0.71em" transform="translate(245,20)">6 PM</text> + <text transform="translate(320,20)"><tspan x="0" y="0.71em">12 AM</tspan><tspan x="0" dy="1em">Jan 2</tspan></text> + <text y="0.71em" transform="translate(395,20)">6 AM</text> + <text y="0.71em" transform="translate(470,20)">12 PM</text> + <text y="0.71em" transform="translate(545,20)">6 PM</text> + <text transform="translate(620,20)"><tspan x="0" y="0.71em">12 AM</tspan><tspan x="0" dy="1em">Jan 3</tspan></text> + </g> + </svg></g> + <g transform="translate(0,840)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="95" x2="95" y1="0" y2="20"></line> + <line x1="170" x2="170" y1="0" y2="20"></line> + <line x1="245" x2="245" y1="0" y2="20"></line> + <line x1="320" x2="320" y1="0" y2="20"></line> + <line x1="395" x2="395" y1="0" y2="20"></line> + <line x1="470" x2="470" y1="0" y2="20"></line> + <line x1="545" x2="545" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(95,20)" d="M0,0L0,6"></path> + <path transform="translate(170,20)" d="M0,0L0,6"></path> + <path transform="translate(245,20)" d="M0,0L0,6"></path> + <path transform="translate(320,20)" d="M0,0L0,6"></path> + <path transform="translate(395,20)" d="M0,0L0,6"></path> + <path transform="translate(470,20)" d="M0,0L0,6"></path> + <path transform="translate(545,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">12 AM</tspan><tspan x="0" dy="1em">Jan 1</tspan></text> + <text y="0.71em" transform="translate(95,20)">12 PM</text> + <text transform="translate(170,20)"><tspan x="0" y="0.71em">12 AM</tspan><tspan x="0" dy="1em">Jan 2</tspan></text> + <text y="0.71em" transform="translate(245,20)">12 PM</text> + <text transform="translate(320,20)"><tspan x="0" y="0.71em">12 AM</tspan><tspan x="0" dy="1em">Jan 3</tspan></text> + <text y="0.71em" transform="translate(395,20)">12 PM</text> + <text transform="translate(470,20)"><tspan x="0" y="0.71em">12 AM</tspan><tspan x="0" dy="1em">Jan 4</tspan></text> + <text y="0.71em" transform="translate(545,20)">12 PM</text> + <text transform="translate(620,20)"><tspan x="0" y="0.71em">12 AM</tspan><tspan x="0" dy="1em">Jan 5</tspan></text> + </g> + </svg></g> + <g transform="translate(0,900)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="120" x2="120" y1="0" y2="20"></line> + <line x1="220" x2="220" y1="0" y2="20"></line> + <line x1="320" x2="320" y1="0" y2="20"></line> + <line x1="420" x2="420" y1="0" y2="20"></line> + <line x1="520.0000000000001" x2="520.0000000000001" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(120,20)" d="M0,0L0,6"></path> + <path transform="translate(220,20)" d="M0,0L0,6"></path> + <path transform="translate(320,20)" d="M0,0L0,6"></path> + <path transform="translate(420,20)" d="M0,0L0,6"></path> + <path transform="translate(520.0000000000001,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">5</tspan><tspan x="0" dy="1em">Jan</tspan></text> + <text y="0.71em" transform="translate(120,20)">6</text> + <text y="0.71em" transform="translate(220,20)">7</text> + <text y="0.71em" transform="translate(320,20)">8</text> + <text y="0.71em" transform="translate(420,20)">9</text> + <text y="0.71em" transform="translate(520.0000000000001,20)">10</text> + <text y="0.71em" transform="translate(620,20)">11</text> + </g> + </svg></g> + <g transform="translate(0,960)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="80" x2="80" y1="0" y2="20"></line> + <line x1="140" x2="140" y1="0" y2="20"></line> + <line x1="200" x2="200" y1="0" y2="20"></line> + <line x1="260" x2="260" y1="0" y2="20"></line> + <line x1="320" x2="320" y1="0" y2="20"></line> + <line x1="380" x2="380" y1="0" y2="20"></line> + <line x1="440" x2="440" y1="0" y2="20"></line> + <line x1="500" x2="500" y1="0" y2="20"></line> + <line x1="560" x2="560" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(80,20)" d="M0,0L0,6"></path> + <path transform="translate(140,20)" d="M0,0L0,6"></path> + <path transform="translate(200,20)" d="M0,0L0,6"></path> + <path transform="translate(260,20)" d="M0,0L0,6"></path> + <path transform="translate(320,20)" d="M0,0L0,6"></path> + <path transform="translate(380,20)" d="M0,0L0,6"></path> + <path transform="translate(440,20)" d="M0,0L0,6"></path> + <path transform="translate(500,20)" d="M0,0L0,6"></path> + <path transform="translate(560,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">1</tspan><tspan x="0" dy="1em">Jan</tspan></text> + <text y="0.71em" transform="translate(80,20)">2</text> + <text y="0.71em" transform="translate(140,20)">3</text> + <text y="0.71em" transform="translate(200,20)">4</text> + <text y="0.71em" transform="translate(260,20)">5</text> + <text y="0.71em" transform="translate(320,20)">6</text> + <text y="0.71em" transform="translate(380,20)">7</text> + <text y="0.71em" transform="translate(440,20)">8</text> + <text y="0.71em" transform="translate(500,20)">9</text> + <text y="0.71em" transform="translate(560,20)">10</text> + <text y="0.71em" transform="translate(620,20)">11</text> + </g> + </svg></g> + <g transform="translate(0,1020)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="74.54545454545455" x2="74.54545454545455" y1="0" y2="20"></line> + <line x1="129.0909090909091" x2="129.0909090909091" y1="0" y2="20"></line> + <line x1="183.63636363636363" x2="183.63636363636363" y1="0" y2="20"></line> + <line x1="238.1818181818182" x2="238.1818181818182" y1="0" y2="20"></line> + <line x1="292.72727272727275" x2="292.72727272727275" y1="0" y2="20"></line> + <line x1="347.2727272727272" x2="347.2727272727272" y1="0" y2="20"></line> + <line x1="401.8181818181818" x2="401.8181818181818" y1="0" y2="20"></line> + <line x1="456.3636363636364" x2="456.3636363636364" y1="0" y2="20"></line> + <line x1="510.90909090909093" x2="510.90909090909093" y1="0" y2="20"></line> + <line x1="565.4545454545455" x2="565.4545454545455" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(74.54545454545455,20)" d="M0,0L0,6"></path> + <path transform="translate(129.0909090909091,20)" d="M0,0L0,6"></path> + <path transform="translate(183.63636363636363,20)" d="M0,0L0,6"></path> + <path transform="translate(238.1818181818182,20)" d="M0,0L0,6"></path> + <path transform="translate(292.72727272727275,20)" d="M0,0L0,6"></path> + <path transform="translate(347.2727272727272,20)" d="M0,0L0,6"></path> + <path transform="translate(401.8181818181818,20)" d="M0,0L0,6"></path> + <path transform="translate(456.3636363636364,20)" d="M0,0L0,6"></path> + <path transform="translate(510.90909090909093,20)" d="M0,0L0,6"></path> + <path transform="translate(565.4545454545455,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">1</tspan><tspan x="0" dy="1em">Jan</tspan></text> + <text y="0.71em" transform="translate(74.54545454545455,20)">3</text> + <text y="0.71em" transform="translate(129.0909090909091,20)">5</text> + <text y="0.71em" transform="translate(183.63636363636363,20)">7</text> + <text y="0.71em" transform="translate(238.1818181818182,20)">9</text> + <text y="0.71em" transform="translate(292.72727272727275,20)">11</text> + <text y="0.71em" transform="translate(347.2727272727272,20)">13</text> + <text y="0.71em" transform="translate(401.8181818181818,20)">15</text> + <text y="0.71em" transform="translate(456.3636363636364,20)">17</text> + <text y="0.71em" transform="translate(510.90909090909093,20)">19</text> + <text y="0.71em" transform="translate(565.4545454545455,20)">21</text> + <text y="0.71em" transform="translate(620,20)">23</text> + </g> + </svg></g> + <g transform="translate(0,1080)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="64.44444444444444" x2="64.44444444444444" y1="0" y2="20"></line> + <line x1="108.88888888888889" x2="108.88888888888889" y1="0" y2="20"></line> + <line x1="153.33333333333331" x2="153.33333333333331" y1="0" y2="20"></line> + <line x1="197.77777777777777" x2="197.77777777777777" y1="0" y2="20"></line> + <line x1="242.2222222222222" x2="242.2222222222222" y1="0" y2="20"></line> + <line x1="286.66666666666663" x2="286.66666666666663" y1="0" y2="20"></line> + <line x1="331.1111111111111" x2="331.1111111111111" y1="0" y2="20"></line> + <line x1="375.55555555555554" x2="375.55555555555554" y1="0" y2="20"></line> + <line x1="420" x2="420" y1="0" y2="20"></line> + <line x1="464.4444444444444" x2="464.4444444444444" y1="0" y2="20"></line> + <line x1="508.88888888888886" x2="508.88888888888886" y1="0" y2="20"></line> + <line x1="553.3333333333333" x2="553.3333333333333" y1="0" y2="20"></line> + <line x1="597.7777777777777" x2="597.7777777777777" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(64.44444444444444,20)" d="M0,0L0,6"></path> + <path transform="translate(108.88888888888889,20)" d="M0,0L0,6"></path> + <path transform="translate(153.33333333333331,20)" d="M0,0L0,6"></path> + <path transform="translate(197.77777777777777,20)" d="M0,0L0,6"></path> + <path transform="translate(242.2222222222222,20)" d="M0,0L0,6"></path> + <path transform="translate(286.66666666666663,20)" d="M0,0L0,6"></path> + <path transform="translate(331.1111111111111,20)" d="M0,0L0,6"></path> + <path transform="translate(375.55555555555554,20)" d="M0,0L0,6"></path> + <path transform="translate(420,20)" d="M0,0L0,6"></path> + <path transform="translate(464.4444444444444,20)" d="M0,0L0,6"></path> + <path transform="translate(508.88888888888886,20)" d="M0,0L0,6"></path> + <path transform="translate(553.3333333333333,20)" d="M0,0L0,6"></path> + <path transform="translate(597.7777777777777,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">17</tspan><tspan x="0" dy="1em">Jan</tspan></text> + <text y="0.71em" transform="translate(64.44444444444444,20)">19</text> + <text y="0.71em" transform="translate(108.88888888888889,20)">21</text> + <text y="0.71em" transform="translate(153.33333333333331,20)">23</text> + <text y="0.71em" transform="translate(197.77777777777777,20)">25</text> + <text y="0.71em" transform="translate(242.2222222222222,20)">27</text> + <text y="0.71em" transform="translate(286.66666666666663,20)">29</text> + <text y="0.71em" transform="translate(331.1111111111111,20)">31</text> + <text transform="translate(375.55555555555554,20)"><tspan x="0" y="0.71em">2</tspan><tspan x="0" dy="1em">Feb</tspan></text> + <text y="0.71em" transform="translate(420,20)">4</text> + <text y="0.71em" transform="translate(464.4444444444444,20)">6</text> + <text y="0.71em" transform="translate(508.88888888888886,20)">8</text> + <text y="0.71em" transform="translate(553.3333333333333,20)">10</text> + <text y="0.71em" transform="translate(597.7777777777777,20)">12</text> + </g> + </svg></g> + <g transform="translate(0,1140)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="66.66666666666667" x2="66.66666666666667" y1="0" y2="20"></line> + <line x1="113.33333333333333" x2="113.33333333333333" y1="0" y2="20"></line> + <line x1="160" x2="160" y1="0" y2="20"></line> + <line x1="206.66666666666666" x2="206.66666666666666" y1="0" y2="20"></line> + <line x1="253.33333333333334" x2="253.33333333333334" y1="0" y2="20"></line> + <line x1="300" x2="300" y1="0" y2="20"></line> + <line x1="346.66666666666663" x2="346.66666666666663" y1="0" y2="20"></line> + <line x1="393.3333333333333" x2="393.3333333333333" y1="0" y2="20"></line> + <line x1="440" x2="440" y1="0" y2="20"></line> + <line x1="486.6666666666667" x2="486.6666666666667" y1="0" y2="20"></line> + <line x1="533.3333333333334" x2="533.3333333333334" y1="0" y2="20"></line> + <line x1="580" x2="580" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(66.66666666666667,20)" d="M0,0L0,6"></path> + <path transform="translate(113.33333333333333,20)" d="M0,0L0,6"></path> + <path transform="translate(160,20)" d="M0,0L0,6"></path> + <path transform="translate(206.66666666666666,20)" d="M0,0L0,6"></path> + <path transform="translate(253.33333333333334,20)" d="M0,0L0,6"></path> + <path transform="translate(300,20)" d="M0,0L0,6"></path> + <path transform="translate(346.66666666666663,20)" d="M0,0L0,6"></path> + <path transform="translate(393.3333333333333,20)" d="M0,0L0,6"></path> + <path transform="translate(440,20)" d="M0,0L0,6"></path> + <path transform="translate(486.6666666666667,20)" d="M0,0L0,6"></path> + <path transform="translate(533.3333333333334,20)" d="M0,0L0,6"></path> + <path transform="translate(580,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">1</tspan><tspan x="0" dy="1em">Jan</tspan></text> + <text y="0.71em" transform="translate(66.66666666666667,20)">8</text> + <text y="0.71em" transform="translate(113.33333333333333,20)">15</text> + <text y="0.71em" transform="translate(160,20)">22</text> + <text y="0.71em" transform="translate(206.66666666666666,20)">29</text> + <text transform="translate(253.33333333333334,20)"><tspan x="0" y="0.71em">5</tspan><tspan x="0" dy="1em">Feb</tspan></text> + <text y="0.71em" transform="translate(300,20)">12</text> + <text y="0.71em" transform="translate(346.66666666666663,20)">19</text> + <text y="0.71em" transform="translate(393.3333333333333,20)">26</text> + <text transform="translate(440,20)"><tspan x="0" y="0.71em">5</tspan><tspan x="0" dy="1em">Mar</tspan></text> + <text y="0.71em" transform="translate(486.6666666666667,20)">12</text> + <text y="0.71em" transform="translate(533.3333333333334,20)">19</text> + <text y="0.71em" transform="translate(580,20)">26</text> + </g> + </svg></g> + <g transform="translate(0,1200)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="70.95890410958904" x2="70.95890410958904" y1="0" y2="20"></line> + <line x1="116.98630136986301" x2="116.98630136986301" y1="0" y2="20"></line> + <line x1="167.94520547945206" x2="167.94520547945206" y1="0" y2="20"></line> + <line x1="217.2602739726027" x2="217.2602739726027" y1="0" y2="20"></line> + <line x1="268.2191780821918" x2="268.2191780821918" y1="0" y2="20"></line> + <line x1="317.5342465753425" x2="317.5342465753425" y1="0" y2="20"></line> + <line x1="368.49315068493144" x2="368.49315068493144" y1="0" y2="20"></line> + <line x1="419.45205479452056" x2="419.45205479452056" y1="0" y2="20"></line> + <line x1="468.7671232876712" x2="468.7671232876712" y1="0" y2="20"></line> + <line x1="519.7260273972603" x2="519.7260273972603" y1="0" y2="20"></line> + <line x1="569.0410958904109" x2="569.0410958904109" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(70.95890410958904,20)" d="M0,0L0,6"></path> + <path transform="translate(116.98630136986301,20)" d="M0,0L0,6"></path> + <path transform="translate(167.94520547945206,20)" d="M0,0L0,6"></path> + <path transform="translate(217.2602739726027,20)" d="M0,0L0,6"></path> + <path transform="translate(268.2191780821918,20)" d="M0,0L0,6"></path> + <path transform="translate(317.5342465753425,20)" d="M0,0L0,6"></path> + <path transform="translate(368.49315068493144,20)" d="M0,0L0,6"></path> + <path transform="translate(419.45205479452056,20)" d="M0,0L0,6"></path> + <path transform="translate(468.7671232876712,20)" d="M0,0L0,6"></path> + <path transform="translate(519.7260273972603,20)" d="M0,0L0,6"></path> + <path transform="translate(569.0410958904109,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">Jan</tspan><tspan x="0" dy="1em">2023</tspan></text> + <text y="0.71em" transform="translate(70.95890410958904,20)">Feb</text> + <text y="0.71em" transform="translate(116.98630136986301,20)">Mar</text> + <text y="0.71em" transform="translate(167.94520547945206,20)">Apr</text> + <text y="0.71em" transform="translate(217.2602739726027,20)">May</text> + <text y="0.71em" transform="translate(268.2191780821918,20)">Jun</text> + <text y="0.71em" transform="translate(317.5342465753425,20)">Jul</text> + <text y="0.71em" transform="translate(368.49315068493144,20)">Aug</text> + <text y="0.71em" transform="translate(419.45205479452056,20)">Sep</text> + <text y="0.71em" transform="translate(468.7671232876712,20)">Oct</text> + <text y="0.71em" transform="translate(519.7260273972603,20)">Nov</text> + <text y="0.71em" transform="translate(569.0410958904109,20)">Dec</text> + <text transform="translate(620,20)"><tspan x="0" y="0.71em">Jan</tspan><tspan x="0" dy="1em">2024</tspan></text> + </g> + </svg></g> + <g transform="translate(0,1260)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="69.18032786885246" x2="69.18032786885246" y1="0" y2="20"></line> + <line x1="120" x2="120" y1="0" y2="20"></line> + <line x1="169.18032786885246" x2="169.18032786885246" y1="0" y2="20"></line> + <line x1="220" x2="220" y1="0" y2="20"></line> + <line x1="270.81967213114757" x2="270.81967213114757" y1="0" y2="20"></line> + <line x1="320" x2="320" y1="0" y2="20"></line> + <line x1="370.81967213114757" x2="370.81967213114757" y1="0" y2="20"></line> + <line x1="420" x2="420" y1="0" y2="20"></line> + <line x1="470.8196721311475" x2="470.8196721311475" y1="0" y2="20"></line> + <line x1="521.6393442622951" x2="521.6393442622951" y1="0" y2="20"></line> + <line x1="569.1803278688525" x2="569.1803278688525" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(69.18032786885246,20)" d="M0,0L0,6"></path> + <path transform="translate(120,20)" d="M0,0L0,6"></path> + <path transform="translate(169.18032786885246,20)" d="M0,0L0,6"></path> + <path transform="translate(220,20)" d="M0,0L0,6"></path> + <path transform="translate(270.81967213114757,20)" d="M0,0L0,6"></path> + <path transform="translate(320,20)" d="M0,0L0,6"></path> + <path transform="translate(370.81967213114757,20)" d="M0,0L0,6"></path> + <path transform="translate(420,20)" d="M0,0L0,6"></path> + <path transform="translate(470.8196721311475,20)" d="M0,0L0,6"></path> + <path transform="translate(521.6393442622951,20)" d="M0,0L0,6"></path> + <path transform="translate(569.1803278688525,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">Apr</tspan><tspan x="0" dy="1em">2023</tspan></text> + <text y="0.71em" transform="translate(69.18032786885246,20)">May</text> + <text y="0.71em" transform="translate(120,20)">Jun</text> + <text y="0.71em" transform="translate(169.18032786885246,20)">Jul</text> + <text y="0.71em" transform="translate(220,20)">Aug</text> + <text y="0.71em" transform="translate(270.81967213114757,20)">Sep</text> + <text y="0.71em" transform="translate(320,20)">Oct</text> + <text y="0.71em" transform="translate(370.81967213114757,20)">Nov</text> + <text y="0.71em" transform="translate(420,20)">Dec</text> + <text transform="translate(470.8196721311475,20)"><tspan x="0" y="0.71em">Jan</tspan><tspan x="0" dy="1em">2024</tspan></text> + <text y="0.71em" transform="translate(521.6393442622951,20)">Feb</text> + <text y="0.71em" transform="translate(569.1803278688525,20)">Mar</text> + <text y="0.71em" transform="translate(620,20)">Apr</text> + </g> + </svg></g> + <g transform="translate(0,1320)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="69.27007299270073" x2="69.27007299270073" y1="0" y2="20"></line> + <line x1="119.08759124087592" x2="119.08759124087592" y1="0" y2="20"></line> + <line x1="169.45255474452554" x2="169.45255474452554" y1="0" y2="20"></line> + <line x1="219.8175182481752" x2="219.8175182481752" y1="0" y2="20"></line> + <line x1="269.6350364963504" x2="269.6350364963504" y1="0" y2="20"></line> + <line x1="319.4525547445255" x2="319.4525547445255" y1="0" y2="20"></line> + <line x1="369.8175182481752" x2="369.8175182481752" y1="0" y2="20"></line> + <line x1="420.1824817518248" x2="420.1824817518248" y1="0" y2="20"></line> + <line x1="469.4525547445255" x2="469.4525547445255" y1="0" y2="20"></line> + <line x1="519.2700729927008" x2="519.2700729927008" y1="0" y2="20"></line> + <line x1="569.6350364963504" x2="569.6350364963504" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(69.27007299270073,20)" d="M0,0L0,6"></path> + <path transform="translate(119.08759124087592,20)" d="M0,0L0,6"></path> + <path transform="translate(169.45255474452554,20)" d="M0,0L0,6"></path> + <path transform="translate(219.8175182481752,20)" d="M0,0L0,6"></path> + <path transform="translate(269.6350364963504,20)" d="M0,0L0,6"></path> + <path transform="translate(319.4525547445255,20)" d="M0,0L0,6"></path> + <path transform="translate(369.8175182481752,20)" d="M0,0L0,6"></path> + <path transform="translate(420.1824817518248,20)" d="M0,0L0,6"></path> + <path transform="translate(469.4525547445255,20)" d="M0,0L0,6"></path> + <path transform="translate(519.2700729927008,20)" d="M0,0L0,6"></path> + <path transform="translate(569.6350364963504,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text transform="translate(20,20)"><tspan x="0" y="0.71em">Jan</tspan><tspan x="0" dy="1em">2023</tspan></text> + <text y="0.71em" transform="translate(69.27007299270073,20)">Apr</text> + <text y="0.71em" transform="translate(119.08759124087592,20)">Jul</text> + <text y="0.71em" transform="translate(169.45255474452554,20)">Oct</text> + <text transform="translate(219.8175182481752,20)"><tspan x="0" y="0.71em">Jan</tspan><tspan x="0" dy="1em">2024</tspan></text> + <text y="0.71em" transform="translate(269.6350364963504,20)">Apr</text> + <text y="0.71em" transform="translate(319.4525547445255,20)">Jul</text> + <text y="0.71em" transform="translate(369.8175182481752,20)">Oct</text> + <text transform="translate(420.1824817518248,20)"><tspan x="0" y="0.71em">Jan</tspan><tspan x="0" dy="1em">2025</tspan></text> + <text y="0.71em" transform="translate(469.4525547445255,20)">Apr</text> + <text y="0.71em" transform="translate(519.2700729927008,20)">Jul</text> + <text y="0.71em" transform="translate(569.6350364963504,20)">Oct</text> + <text transform="translate(620,20)"><tspan x="0" y="0.71em">Jan</tspan><tspan x="0" dy="1em">2026</tspan></text> + </g> + </svg></g> + <g transform="translate(0,1380)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="79.95072543115248" x2="79.95072543115248" y1="0" y2="20"></line> + <line x1="140.06569942513002" x2="140.06569942513002" y1="0" y2="20"></line> + <line x1="200.01642485628253" x2="200.01642485628253" y1="0" y2="20"></line> + <line x1="259.967150287435" x2="259.967150287435" y1="0" y2="20"></line> + <line x1="319.9178757185874" x2="319.9178757185874" y1="0" y2="20"></line> + <line x1="380.03284971256505" x2="380.03284971256505" y1="0" y2="20"></line> + <line x1="439.9835751437175" x2="439.9835751437175" y1="0" y2="20"></line> + <line x1="499.93430057487" x2="499.93430057487" y1="0" y2="20"></line> + <line x1="559.8850260060225" x2="559.8850260060225" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(79.95072543115248,20)" d="M0,0L0,6"></path> + <path transform="translate(140.06569942513002,20)" d="M0,0L0,6"></path> + <path transform="translate(200.01642485628253,20)" d="M0,0L0,6"></path> + <path transform="translate(259.967150287435,20)" d="M0,0L0,6"></path> + <path transform="translate(319.9178757185874,20)" d="M0,0L0,6"></path> + <path transform="translate(380.03284971256505,20)" d="M0,0L0,6"></path> + <path transform="translate(439.9835751437175,20)" d="M0,0L0,6"></path> + <path transform="translate(499.93430057487,20)" d="M0,0L0,6"></path> + <path transform="translate(559.8850260060225,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text y="0.71em" transform="translate(20,20)">2023</text> + <text y="0.71em" transform="translate(79.95072543115248,20)">2024</text> + <text y="0.71em" transform="translate(140.06569942513002,20)">2025</text> + <text y="0.71em" transform="translate(200.01642485628253,20)">2026</text> + <text y="0.71em" transform="translate(259.967150287435,20)">2027</text> + <text y="0.71em" transform="translate(319.9178757185874,20)">2028</text> + <text y="0.71em" transform="translate(380.03284971256505,20)">2029</text> + <text y="0.71em" transform="translate(439.9835751437175,20)">2030</text> + <text y="0.71em" transform="translate(499.93430057487,20)">2031</text> + <text y="0.71em" transform="translate(559.8850260060225,20)">2032</text> + <text y="0.71em" transform="translate(620,20)">2033</text> + </g> + </svg></g> + <g transform="translate(0,1440)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="0" y2="20"></line> + <line x1="80.02299731697968" x2="80.02299731697968" y1="0" y2="20"></line> + <line x1="140.01314132398838" x2="140.01314132398838" y1="0" y2="20"></line> + <line x1="200.00328533099713" x2="200.00328533099713" y1="0" y2="20"></line> + <line x1="259.9934293380058" x2="259.9934293380058" y1="0" y2="20"></line> + <line x1="320.01642665498554" x2="320.01642665498554" y1="0" y2="20"></line> + <line x1="380.00657066199426" x2="380.00657066199426" y1="0" y2="20"></line> + <line x1="439.9967146690029" x2="439.9967146690029" y1="0" y2="20"></line> + <line x1="499.9868586760116" x2="499.9868586760116" y1="0" y2="20"></line> + <line x1="560.0098559929913" x2="560.0098559929913" y1="0" y2="20"></line> + <line x1="620" x2="620" y1="0" y2="20"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)"> + <path transform="translate(20,20)" d="M0,0L0,6"></path> + <path transform="translate(80.02299731697968,20)" d="M0,0L0,6"></path> + <path transform="translate(140.01314132398838,20)" d="M0,0L0,6"></path> + <path transform="translate(200.00328533099713,20)" d="M0,0L0,6"></path> + <path transform="translate(259.9934293380058,20)" d="M0,0L0,6"></path> + <path transform="translate(320.01642665498554,20)" d="M0,0L0,6"></path> + <path transform="translate(380.00657066199426,20)" d="M0,0L0,6"></path> + <path transform="translate(439.9967146690029,20)" d="M0,0L0,6"></path> + <path transform="translate(499.9868586760116,20)" d="M0,0L0,6"></path> + <path transform="translate(560.0098559929913,20)" d="M0,0L0,6"></path> + <path transform="translate(620,20)" d="M0,0L0,6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> + <text y="0.71em" transform="translate(20,20)">2020</text> + <text y="0.71em" transform="translate(80.02299731697968,20)">2025</text> + <text y="0.71em" transform="translate(140.01314132398838,20)">2030</text> + <text y="0.71em" transform="translate(200.00328533099713,20)">2035</text> + <text y="0.71em" transform="translate(259.9934293380058,20)">2040</text> + <text y="0.71em" transform="translate(320.01642665498554,20)">2045</text> + <text y="0.71em" transform="translate(380.00657066199426,20)">2050</text> + <text y="0.71em" transform="translate(439.9967146690029,20)">2055</text> + <text y="0.71em" transform="translate(499.9868586760116,20)">2060</text> + <text y="0.71em" transform="translate(560.0098559929913,20)">2065</text> + <text y="0.71em" transform="translate(620,20)">2070</text> + </g> + </svg></g> +</svg> \ No newline at end of file diff --git a/test/output/timeAxisLeft.svg b/test/output/timeAxisLeft.svg new file mode 100644 index 0000000000..868e69fa0a --- /dev/null +++ b/test/output/timeAxisLeft.svg @@ -0,0 +1,521 @@ +<svg height="400" width="720" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g transform="translate(0,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="60" x2="79" y1="380" y2="380"></line> + <line x1="60" x2="79" y1="344" y2="344"></line> + <line x1="60" x2="79" y1="308" y2="308"></line> + <line x1="60" x2="79" y1="272" y2="272"></line> + <line x1="60" x2="79" y1="236" y2="236"></line> + <line x1="60" x2="79" y1="200" y2="200"></line> + <line x1="60" x2="79" y1="164" y2="164"></line> + <line x1="60" x2="79" y1="128" y2="128"></line> + <line x1="60" x2="79" y1="91.99999999999999" y2="91.99999999999999"></line> + <line x1="60" x2="79" y1="55.99999999999999" y2="55.99999999999999"></line> + <line x1="60" x2="79" y1="20" y2="20"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(0,0.5)"> + <path transform="translate(60,380)" d="M0,0L-6,0"></path> + <path transform="translate(60,344)" d="M0,0L-6,0"></path> + <path transform="translate(60,308)" d="M0,0L-6,0"></path> + <path transform="translate(60,272)" d="M0,0L-6,0"></path> + <path transform="translate(60,236)" d="M0,0L-6,0"></path> + <path transform="translate(60,200)" d="M0,0L-6,0"></path> + <path transform="translate(60,164)" d="M0,0L-6,0"></path> + <path transform="translate(60,128)" d="M0,0L-6,0"></path> + <path transform="translate(60,91.99999999999999)" d="M0,0L-6,0"></path> + <path transform="translate(60,55.99999999999999)" d="M0,0L-6,0"></path> + <path transform="translate(60,20)" d="M0,0L-6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)"> + <text transform="translate(60,380)"><tspan x="0" y="0.31999999999999995em">.000</tspan><tspan x="0" dy="1em">:00:00</tspan></text> + <text y="0.32em" transform="translate(60,344)">.100</text> + <text y="0.32em" transform="translate(60,308)">.200</text> + <text y="0.32em" transform="translate(60,272)">.300</text> + <text y="0.32em" transform="translate(60,236)">.400</text> + <text y="0.32em" transform="translate(60,200)">.500</text> + <text y="0.32em" transform="translate(60,164)">.600</text> + <text y="0.32em" transform="translate(60,128)">.700</text> + <text y="0.32em" transform="translate(60,91.99999999999999)">.800</text> + <text y="0.32em" transform="translate(60,55.99999999999999)">.900</text> + <text transform="translate(60,20)"><tspan x="0" y="0.31999999999999995em">.000</tspan><tspan x="0" dy="1em">:00:01</tspan></text> + </g> + </svg></g> + <g transform="translate(80,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="60" x2="79" y1="380" y2="380"></line> + <line x1="60" x2="79" y1="350" y2="350"></line> + <line x1="60" x2="79" y1="320" y2="320"></line> + <line x1="60" x2="79" y1="290" y2="290"></line> + <line x1="60" x2="79" y1="260.00000000000006" y2="260.00000000000006"></line> + <line x1="60" x2="79" y1="229.99999999999997" y2="229.99999999999997"></line> + <line x1="60" x2="79" y1="200" y2="200"></line> + <line x1="60" x2="79" y1="169.99999999999997" y2="169.99999999999997"></line> + <line x1="60" x2="79" y1="140.00000000000003" y2="140.00000000000003"></line> + <line x1="60" x2="79" y1="110" y2="110"></line> + <line x1="60" x2="79" y1="79.99999999999999" y2="79.99999999999999"></line> + <line x1="60" x2="79" y1="50.000000000000014" y2="50.000000000000014"></line> + <line x1="60" x2="79" y1="20" y2="20"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(0,0.5)"> + <path transform="translate(60,380)" d="M0,0L-6,0"></path> + <path transform="translate(60,350)" d="M0,0L-6,0"></path> + <path transform="translate(60,320)" d="M0,0L-6,0"></path> + <path transform="translate(60,290)" d="M0,0L-6,0"></path> + <path transform="translate(60,260.00000000000006)" d="M0,0L-6,0"></path> + <path transform="translate(60,229.99999999999997)" d="M0,0L-6,0"></path> + <path transform="translate(60,200)" d="M0,0L-6,0"></path> + <path transform="translate(60,169.99999999999997)" d="M0,0L-6,0"></path> + <path transform="translate(60,140.00000000000003)" d="M0,0L-6,0"></path> + <path transform="translate(60,110)" d="M0,0L-6,0"></path> + <path transform="translate(60,79.99999999999999)" d="M0,0L-6,0"></path> + <path transform="translate(60,50.000000000000014)" d="M0,0L-6,0"></path> + <path transform="translate(60,20)" d="M0,0L-6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)"> + <text transform="translate(60,380)"><tspan x="0" y="0.31999999999999995em">:00</tspan><tspan x="0" dy="1em">12:00</tspan></text> + <text y="0.32em" transform="translate(60,350)">:05</text> + <text y="0.32em" transform="translate(60,320)">:10</text> + <text y="0.32em" transform="translate(60,290)">:15</text> + <text y="0.32em" transform="translate(60,260.00000000000006)">:20</text> + <text y="0.32em" transform="translate(60,229.99999999999997)">:25</text> + <text y="0.32em" transform="translate(60,200)">:30</text> + <text y="0.32em" transform="translate(60,169.99999999999997)">:35</text> + <text y="0.32em" transform="translate(60,140.00000000000003)">:40</text> + <text y="0.32em" transform="translate(60,110)">:45</text> + <text y="0.32em" transform="translate(60,79.99999999999999)">:50</text> + <text y="0.32em" transform="translate(60,50.000000000000014)">:55</text> + <text transform="translate(60,20)"><tspan x="0" y="0.31999999999999995em">:00</tspan><tspan x="0" dy="1em">12:01</tspan></text> + </g> + </svg></g> + <g transform="translate(160,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="60" x2="79" y1="380" y2="380"></line> + <line x1="60" x2="79" y1="344" y2="344"></line> + <line x1="60" x2="79" y1="308" y2="308"></line> + <line x1="60" x2="79" y1="272" y2="272"></line> + <line x1="60" x2="79" y1="236" y2="236"></line> + <line x1="60" x2="79" y1="200" y2="200"></line> + <line x1="60" x2="79" y1="164" y2="164"></line> + <line x1="60" x2="79" y1="128" y2="128"></line> + <line x1="60" x2="79" y1="91.99999999999999" y2="91.99999999999999"></line> + <line x1="60" x2="79" y1="55.99999999999999" y2="55.99999999999999"></line> + <line x1="60" x2="79" y1="20" y2="20"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(0,0.5)"> + <path transform="translate(60,380)" d="M0,0L-6,0"></path> + <path transform="translate(60,344)" d="M0,0L-6,0"></path> + <path transform="translate(60,308)" d="M0,0L-6,0"></path> + <path transform="translate(60,272)" d="M0,0L-6,0"></path> + <path transform="translate(60,236)" d="M0,0L-6,0"></path> + <path transform="translate(60,200)" d="M0,0L-6,0"></path> + <path transform="translate(60,164)" d="M0,0L-6,0"></path> + <path transform="translate(60,128)" d="M0,0L-6,0"></path> + <path transform="translate(60,91.99999999999999)" d="M0,0L-6,0"></path> + <path transform="translate(60,55.99999999999999)" d="M0,0L-6,0"></path> + <path transform="translate(60,20)" d="M0,0L-6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)"> + <text transform="translate(60,380)"><tspan x="0" y="0.31999999999999995em">12:00</tspan><tspan x="0" dy="1em">AM</tspan></text> + <text y="0.32em" transform="translate(60,344)">12:01</text> + <text y="0.32em" transform="translate(60,308)">12:02</text> + <text y="0.32em" transform="translate(60,272)">12:03</text> + <text y="0.32em" transform="translate(60,236)">12:04</text> + <text y="0.32em" transform="translate(60,200)">12:05</text> + <text y="0.32em" transform="translate(60,164)">12:06</text> + <text y="0.32em" transform="translate(60,128)">12:07</text> + <text y="0.32em" transform="translate(60,91.99999999999999)">12:08</text> + <text y="0.32em" transform="translate(60,55.99999999999999)">12:09</text> + <text y="0.32em" transform="translate(60,20)">12:10</text> + </g> + </svg></g> + <g transform="translate(240,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="60" x2="79" y1="380" y2="380"></line> + <line x1="60" x2="79" y1="344" y2="344"></line> + <line x1="60" x2="79" y1="308" y2="308"></line> + <line x1="60" x2="79" y1="272" y2="272"></line> + <line x1="60" x2="79" y1="236" y2="236"></line> + <line x1="60" x2="79" y1="200" y2="200"></line> + <line x1="60" x2="79" y1="164" y2="164"></line> + <line x1="60" x2="79" y1="128" y2="128"></line> + <line x1="60" x2="79" y1="91.99999999999999" y2="91.99999999999999"></line> + <line x1="60" x2="79" y1="55.99999999999999" y2="55.99999999999999"></line> + <line x1="60" x2="79" y1="20" y2="20"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(0,0.5)"> + <path transform="translate(60,380)" d="M0,0L-6,0"></path> + <path transform="translate(60,344)" d="M0,0L-6,0"></path> + <path transform="translate(60,308)" d="M0,0L-6,0"></path> + <path transform="translate(60,272)" d="M0,0L-6,0"></path> + <path transform="translate(60,236)" d="M0,0L-6,0"></path> + <path transform="translate(60,200)" d="M0,0L-6,0"></path> + <path transform="translate(60,164)" d="M0,0L-6,0"></path> + <path transform="translate(60,128)" d="M0,0L-6,0"></path> + <path transform="translate(60,91.99999999999999)" d="M0,0L-6,0"></path> + <path transform="translate(60,55.99999999999999)" d="M0,0L-6,0"></path> + <path transform="translate(60,20)" d="M0,0L-6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)"> + <text transform="translate(60,380)"><tspan x="0" y="0.31999999999999995em">12:00</tspan><tspan x="0" dy="1em">AM</tspan></text> + <text y="0.32em" transform="translate(60,344)">12:30</text> + <text y="0.32em" transform="translate(60,308)">1:00</text> + <text y="0.32em" transform="translate(60,272)">1:30</text> + <text y="0.32em" transform="translate(60,236)">2:00</text> + <text y="0.32em" transform="translate(60,200)">2:30</text> + <text y="0.32em" transform="translate(60,164)">3:00</text> + <text y="0.32em" transform="translate(60,128)">3:30</text> + <text y="0.32em" transform="translate(60,91.99999999999999)">4:00</text> + <text y="0.32em" transform="translate(60,55.99999999999999)">4:30</text> + <text y="0.32em" transform="translate(60,20)">5:00</text> + </g> + </svg></g> + <g transform="translate(320,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="60" x2="79" y1="380" y2="380"></line> + <line x1="60" x2="79" y1="342.7586206896552" y2="342.7586206896552"></line> + <line x1="60" x2="79" y1="305.51724137931035" y2="305.51724137931035"></line> + <line x1="60" x2="79" y1="268.2758620689655" y2="268.2758620689655"></line> + <line x1="60" x2="79" y1="231.03448275862073" y2="231.03448275862073"></line> + <line x1="60" x2="79" y1="193.79310344827584" y2="193.79310344827584"></line> + <line x1="60" x2="79" y1="156.55172413793105" y2="156.55172413793105"></line> + <line x1="60" x2="79" y1="119.3103448275862" y2="119.3103448275862"></line> + <line x1="60" x2="79" y1="82.06896551724138" y2="82.06896551724138"></line> + <line x1="60" x2="79" y1="44.82758620689656" y2="44.82758620689656"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(0,0.5)"> + <path transform="translate(60,380)" d="M0,0L-6,0"></path> + <path transform="translate(60,342.7586206896552)" d="M0,0L-6,0"></path> + <path transform="translate(60,305.51724137931035)" d="M0,0L-6,0"></path> + <path transform="translate(60,268.2758620689655)" d="M0,0L-6,0"></path> + <path transform="translate(60,231.03448275862073)" d="M0,0L-6,0"></path> + <path transform="translate(60,193.79310344827584)" d="M0,0L-6,0"></path> + <path transform="translate(60,156.55172413793105)" d="M0,0L-6,0"></path> + <path transform="translate(60,119.3103448275862)" d="M0,0L-6,0"></path> + <path transform="translate(60,82.06896551724138)" d="M0,0L-6,0"></path> + <path transform="translate(60,44.82758620689656)" d="M0,0L-6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)"> + <text transform="translate(60,380)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 1</tspan></text> + <text y="0.32em" transform="translate(60,342.7586206896552)">3 AM</text> + <text y="0.32em" transform="translate(60,305.51724137931035)">6 AM</text> + <text y="0.32em" transform="translate(60,268.2758620689655)">9 AM</text> + <text y="0.32em" transform="translate(60,231.03448275862073)">12 PM</text> + <text y="0.32em" transform="translate(60,193.79310344827584)">3 PM</text> + <text y="0.32em" transform="translate(60,156.55172413793105)">6 PM</text> + <text y="0.32em" transform="translate(60,119.3103448275862)">9 PM</text> + <text transform="translate(60,82.06896551724138)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 2</tspan></text> + <text y="0.32em" transform="translate(60,44.82758620689656)">3 AM</text> + </g> + </svg></g> + <g transform="translate(400,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="60" x2="79" y1="380" y2="380"></line> + <line x1="60" x2="79" y1="350" y2="350"></line> + <line x1="60" x2="79" y1="320" y2="320"></line> + <line x1="60" x2="79" y1="290" y2="290"></line> + <line x1="60" x2="79" y1="260.00000000000006" y2="260.00000000000006"></line> + <line x1="60" x2="79" y1="229.99999999999997" y2="229.99999999999997"></line> + <line x1="60" x2="79" y1="200" y2="200"></line> + <line x1="60" x2="79" y1="169.99999999999997" y2="169.99999999999997"></line> + <line x1="60" x2="79" y1="140.00000000000003" y2="140.00000000000003"></line> + <line x1="60" x2="79" y1="110" y2="110"></line> + <line x1="60" x2="79" y1="79.99999999999999" y2="79.99999999999999"></line> + <line x1="60" x2="79" y1="50.000000000000014" y2="50.000000000000014"></line> + <line x1="60" x2="79" y1="20" y2="20"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(0,0.5)"> + <path transform="translate(60,380)" d="M0,0L-6,0"></path> + <path transform="translate(60,350)" d="M0,0L-6,0"></path> + <path transform="translate(60,320)" d="M0,0L-6,0"></path> + <path transform="translate(60,290)" d="M0,0L-6,0"></path> + <path transform="translate(60,260.00000000000006)" d="M0,0L-6,0"></path> + <path transform="translate(60,229.99999999999997)" d="M0,0L-6,0"></path> + <path transform="translate(60,200)" d="M0,0L-6,0"></path> + <path transform="translate(60,169.99999999999997)" d="M0,0L-6,0"></path> + <path transform="translate(60,140.00000000000003)" d="M0,0L-6,0"></path> + <path transform="translate(60,110)" d="M0,0L-6,0"></path> + <path transform="translate(60,79.99999999999999)" d="M0,0L-6,0"></path> + <path transform="translate(60,50.000000000000014)" d="M0,0L-6,0"></path> + <path transform="translate(60,20)" d="M0,0L-6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)"> + <text transform="translate(60,380)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 5</tspan></text> + <text y="0.32em" transform="translate(60,350)">12 PM</text> + <text transform="translate(60,320)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 6</tspan></text> + <text y="0.32em" transform="translate(60,290)">12 PM</text> + <text transform="translate(60,260.00000000000006)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 7</tspan></text> + <text y="0.32em" transform="translate(60,229.99999999999997)">12 PM</text> + <text transform="translate(60,200)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 8</tspan></text> + <text y="0.32em" transform="translate(60,169.99999999999997)">12 PM</text> + <text transform="translate(60,140.00000000000003)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 9</tspan></text> + <text y="0.32em" transform="translate(60,110)">12 PM</text> + <text transform="translate(60,79.99999999999999)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 10</tspan></text> + <text y="0.32em" transform="translate(60,50.000000000000014)">12 PM</text> + <text transform="translate(60,20)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 11</tspan></text> + </g> + </svg></g> + <g transform="translate(480,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="60" x2="79" y1="380" y2="380"></line> + <line x1="60" x2="79" y1="353.3333333333333" y2="353.3333333333333"></line> + <line x1="60" x2="79" y1="326.6666666666667" y2="326.6666666666667"></line> + <line x1="60" x2="79" y1="300" y2="300"></line> + <line x1="60" x2="79" y1="273.3333333333333" y2="273.3333333333333"></line> + <line x1="60" x2="79" y1="246.66666666666669" y2="246.66666666666669"></line> + <line x1="60" x2="79" y1="220" y2="220"></line> + <line x1="60" x2="79" y1="193.33333333333334" y2="193.33333333333334"></line> + <line x1="60" x2="79" y1="166.66666666666669" y2="166.66666666666669"></line> + <line x1="60" x2="79" y1="140.00000000000003" y2="140.00000000000003"></line> + <line x1="60" x2="79" y1="113.33333333333334" y2="113.33333333333334"></line> + <line x1="60" x2="79" y1="86.66666666666667" y2="86.66666666666667"></line> + <line x1="60" x2="79" y1="60.00000000000002" y2="60.00000000000002"></line> + <line x1="60" x2="79" y1="33.33333333333336" y2="33.33333333333336"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(0,0.5)"> + <path transform="translate(60,380)" d="M0,0L-6,0"></path> + <path transform="translate(60,353.3333333333333)" d="M0,0L-6,0"></path> + <path transform="translate(60,326.6666666666667)" d="M0,0L-6,0"></path> + <path transform="translate(60,300)" d="M0,0L-6,0"></path> + <path transform="translate(60,273.3333333333333)" d="M0,0L-6,0"></path> + <path transform="translate(60,246.66666666666669)" d="M0,0L-6,0"></path> + <path transform="translate(60,220)" d="M0,0L-6,0"></path> + <path transform="translate(60,193.33333333333334)" d="M0,0L-6,0"></path> + <path transform="translate(60,166.66666666666669)" d="M0,0L-6,0"></path> + <path transform="translate(60,140.00000000000003)" d="M0,0L-6,0"></path> + <path transform="translate(60,113.33333333333334)" d="M0,0L-6,0"></path> + <path transform="translate(60,86.66666666666667)" d="M0,0L-6,0"></path> + <path transform="translate(60,60.00000000000002)" d="M0,0L-6,0"></path> + <path transform="translate(60,33.33333333333336)" d="M0,0L-6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)"> + <text transform="translate(60,380)"><tspan x="0" y="0.31999999999999995em">17</tspan><tspan x="0" dy="1em">Jan</tspan></text> + <text y="0.32em" transform="translate(60,353.3333333333333)">19</text> + <text y="0.32em" transform="translate(60,326.6666666666667)">21</text> + <text y="0.32em" transform="translate(60,300)">23</text> + <text y="0.32em" transform="translate(60,273.3333333333333)">25</text> + <text y="0.32em" transform="translate(60,246.66666666666669)">27</text> + <text y="0.32em" transform="translate(60,220)">29</text> + <text y="0.32em" transform="translate(60,193.33333333333334)">31</text> + <text transform="translate(60,166.66666666666669)"><tspan x="0" y="0.31999999999999995em">2</tspan><tspan x="0" dy="1em">Feb</tspan></text> + <text y="0.32em" transform="translate(60,140.00000000000003)">4</text> + <text y="0.32em" transform="translate(60,113.33333333333334)">6</text> + <text y="0.32em" transform="translate(60,86.66666666666667)">8</text> + <text y="0.32em" transform="translate(60,60.00000000000002)">10</text> + <text y="0.32em" transform="translate(60,33.33333333333336)">12</text> + </g> + </svg></g> + <g transform="translate(560,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="60" x2="79" y1="380" y2="380"></line> + <line x1="60" x2="79" y1="350.4918032786885" y2="350.4918032786885"></line> + <line x1="60" x2="79" y1="320" y2="320"></line> + <line x1="60" x2="79" y1="290.4918032786885" y2="290.4918032786885"></line> + <line x1="60" x2="79" y1="260.00000000000006" y2="260.00000000000006"></line> + <line x1="60" x2="79" y1="229.50819672131146" y2="229.50819672131146"></line> + <line x1="60" x2="79" y1="200" y2="200"></line> + <line x1="60" x2="79" y1="169.5081967213115" y2="169.5081967213115"></line> + <line x1="60" x2="79" y1="140.00000000000003" y2="140.00000000000003"></line> + <line x1="60" x2="79" y1="109.5081967213115" y2="109.5081967213115"></line> + <line x1="60" x2="79" y1="79.01639344262294" y2="79.01639344262294"></line> + <line x1="60" x2="79" y1="50.491803278688515" y2="50.491803278688515"></line> + <line x1="60" x2="79" y1="20" y2="20"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(0,0.5)"> + <path transform="translate(60,380)" d="M0,0L-6,0"></path> + <path transform="translate(60,350.4918032786885)" d="M0,0L-6,0"></path> + <path transform="translate(60,320)" d="M0,0L-6,0"></path> + <path transform="translate(60,290.4918032786885)" d="M0,0L-6,0"></path> + <path transform="translate(60,260.00000000000006)" d="M0,0L-6,0"></path> + <path transform="translate(60,229.50819672131146)" d="M0,0L-6,0"></path> + <path transform="translate(60,200)" d="M0,0L-6,0"></path> + <path transform="translate(60,169.5081967213115)" d="M0,0L-6,0"></path> + <path transform="translate(60,140.00000000000003)" d="M0,0L-6,0"></path> + <path transform="translate(60,109.5081967213115)" d="M0,0L-6,0"></path> + <path transform="translate(60,79.01639344262294)" d="M0,0L-6,0"></path> + <path transform="translate(60,50.491803278688515)" d="M0,0L-6,0"></path> + <path transform="translate(60,20)" d="M0,0L-6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)"> + <text transform="translate(60,380)"><tspan x="0" y="0.31999999999999995em">Apr</tspan><tspan x="0" dy="1em">2023</tspan></text> + <text y="0.32em" transform="translate(60,350.4918032786885)">May</text> + <text y="0.32em" transform="translate(60,320)">Jun</text> + <text y="0.32em" transform="translate(60,290.4918032786885)">Jul</text> + <text y="0.32em" transform="translate(60,260.00000000000006)">Aug</text> + <text y="0.32em" transform="translate(60,229.50819672131146)">Sep</text> + <text y="0.32em" transform="translate(60,200)">Oct</text> + <text y="0.32em" transform="translate(60,169.5081967213115)">Nov</text> + <text y="0.32em" transform="translate(60,140.00000000000003)">Dec</text> + <text transform="translate(60,109.5081967213115)"><tspan x="0" y="0.31999999999999995em">Jan</tspan><tspan x="0" dy="1em">2024</tspan></text> + <text y="0.32em" transform="translate(60,79.01639344262294)">Feb</text> + <text y="0.32em" transform="translate(60,50.491803278688515)">Mar</text> + <text y="0.32em" transform="translate(60,20)">Apr</text> + </g> + </svg></g> + <g transform="translate(640,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="60" x2="79" y1="380" y2="380"></line> + <line x1="60" x2="79" y1="343.9862016098122" y2="343.9862016098122"></line> + <line x1="60" x2="79" y1="307.992115205607" y2="307.992115205607"></line> + <line x1="60" x2="79" y1="271.99802880140174" y2="271.99802880140174"></line> + <line x1="60" x2="79" y1="236.0039423971965" y2="236.0039423971965"></line> + <line x1="60" x2="79" y1="199.9901440070087" y2="199.9901440070087"></line> + <line x1="60" x2="79" y1="163.9960576028035" y2="163.9960576028035"></line> + <line x1="60" x2="79" y1="128.00197119859826" y2="128.00197119859826"></line> + <line x1="60" x2="79" y1="92.00788479439302" y2="92.00788479439302"></line> + <line x1="60" x2="79" y1="55.99408640420523" y2="55.99408640420523"></line> + <line x1="60" x2="79" y1="20" y2="20"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(0,0.5)"> + <path transform="translate(60,380)" d="M0,0L-6,0"></path> + <path transform="translate(60,343.9862016098122)" d="M0,0L-6,0"></path> + <path transform="translate(60,307.992115205607)" d="M0,0L-6,0"></path> + <path transform="translate(60,271.99802880140174)" d="M0,0L-6,0"></path> + <path transform="translate(60,236.0039423971965)" d="M0,0L-6,0"></path> + <path transform="translate(60,199.9901440070087)" d="M0,0L-6,0"></path> + <path transform="translate(60,163.9960576028035)" d="M0,0L-6,0"></path> + <path transform="translate(60,128.00197119859826)" d="M0,0L-6,0"></path> + <path transform="translate(60,92.00788479439302)" d="M0,0L-6,0"></path> + <path transform="translate(60,55.99408640420523)" d="M0,0L-6,0"></path> + <path transform="translate(60,20)" d="M0,0L-6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)"> + <text y="0.32em" transform="translate(60,380)">2020</text> + <text y="0.32em" transform="translate(60,343.9862016098122)">2025</text> + <text y="0.32em" transform="translate(60,307.992115205607)">2030</text> + <text y="0.32em" transform="translate(60,271.99802880140174)">2035</text> + <text y="0.32em" transform="translate(60,236.0039423971965)">2040</text> + <text y="0.32em" transform="translate(60,199.9901440070087)">2045</text> + <text y="0.32em" transform="translate(60,163.9960576028035)">2050</text> + <text y="0.32em" transform="translate(60,128.00197119859826)">2055</text> + <text y="0.32em" transform="translate(60,92.00788479439302)">2060</text> + <text y="0.32em" transform="translate(60,55.99408640420523)">2065</text> + <text y="0.32em" transform="translate(60,20)">2070</text> + </g> + </svg></g> +</svg> \ No newline at end of file diff --git a/test/output/timeAxisRight.svg b/test/output/timeAxisRight.svg new file mode 100644 index 0000000000..c745687eb1 --- /dev/null +++ b/test/output/timeAxisRight.svg @@ -0,0 +1,521 @@ +<svg height="400" width="720" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g transform="translate(0,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="0" x2="20" y1="380" y2="380"></line> + <line x1="0" x2="20" y1="344" y2="344"></line> + <line x1="0" x2="20" y1="308" y2="308"></line> + <line x1="0" x2="20" y1="272" y2="272"></line> + <line x1="0" x2="20" y1="236" y2="236"></line> + <line x1="0" x2="20" y1="200" y2="200"></line> + <line x1="0" x2="20" y1="164" y2="164"></line> + <line x1="0" x2="20" y1="128" y2="128"></line> + <line x1="0" x2="20" y1="91.99999999999999" y2="91.99999999999999"></line> + <line x1="0" x2="20" y1="55.99999999999999" y2="55.99999999999999"></line> + <line x1="0" x2="20" y1="20" y2="20"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(1,0.5)"> + <path transform="translate(20,380)" d="M0,0L6,0"></path> + <path transform="translate(20,344)" d="M0,0L6,0"></path> + <path transform="translate(20,308)" d="M0,0L6,0"></path> + <path transform="translate(20,272)" d="M0,0L6,0"></path> + <path transform="translate(20,236)" d="M0,0L6,0"></path> + <path transform="translate(20,200)" d="M0,0L6,0"></path> + <path transform="translate(20,164)" d="M0,0L6,0"></path> + <path transform="translate(20,128)" d="M0,0L6,0"></path> + <path transform="translate(20,91.99999999999999)" d="M0,0L6,0"></path> + <path transform="translate(20,55.99999999999999)" d="M0,0L6,0"></path> + <path transform="translate(20,20)" d="M0,0L6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="start" font-variant="tabular-nums" transform="translate(9.5,0.5)"> + <text transform="translate(20,380)"><tspan x="0" y="0.31999999999999995em">.000</tspan><tspan x="0" dy="1em">:00:00</tspan></text> + <text y="0.32em" transform="translate(20,344)">.100</text> + <text y="0.32em" transform="translate(20,308)">.200</text> + <text y="0.32em" transform="translate(20,272)">.300</text> + <text y="0.32em" transform="translate(20,236)">.400</text> + <text y="0.32em" transform="translate(20,200)">.500</text> + <text y="0.32em" transform="translate(20,164)">.600</text> + <text y="0.32em" transform="translate(20,128)">.700</text> + <text y="0.32em" transform="translate(20,91.99999999999999)">.800</text> + <text y="0.32em" transform="translate(20,55.99999999999999)">.900</text> + <text transform="translate(20,20)"><tspan x="0" y="0.31999999999999995em">.000</tspan><tspan x="0" dy="1em">:00:01</tspan></text> + </g> + </svg></g> + <g transform="translate(80,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="0" x2="20" y1="380" y2="380"></line> + <line x1="0" x2="20" y1="350" y2="350"></line> + <line x1="0" x2="20" y1="320" y2="320"></line> + <line x1="0" x2="20" y1="290" y2="290"></line> + <line x1="0" x2="20" y1="260.00000000000006" y2="260.00000000000006"></line> + <line x1="0" x2="20" y1="229.99999999999997" y2="229.99999999999997"></line> + <line x1="0" x2="20" y1="200" y2="200"></line> + <line x1="0" x2="20" y1="169.99999999999997" y2="169.99999999999997"></line> + <line x1="0" x2="20" y1="140.00000000000003" y2="140.00000000000003"></line> + <line x1="0" x2="20" y1="110" y2="110"></line> + <line x1="0" x2="20" y1="79.99999999999999" y2="79.99999999999999"></line> + <line x1="0" x2="20" y1="50.000000000000014" y2="50.000000000000014"></line> + <line x1="0" x2="20" y1="20" y2="20"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(1,0.5)"> + <path transform="translate(20,380)" d="M0,0L6,0"></path> + <path transform="translate(20,350)" d="M0,0L6,0"></path> + <path transform="translate(20,320)" d="M0,0L6,0"></path> + <path transform="translate(20,290)" d="M0,0L6,0"></path> + <path transform="translate(20,260.00000000000006)" d="M0,0L6,0"></path> + <path transform="translate(20,229.99999999999997)" d="M0,0L6,0"></path> + <path transform="translate(20,200)" d="M0,0L6,0"></path> + <path transform="translate(20,169.99999999999997)" d="M0,0L6,0"></path> + <path transform="translate(20,140.00000000000003)" d="M0,0L6,0"></path> + <path transform="translate(20,110)" d="M0,0L6,0"></path> + <path transform="translate(20,79.99999999999999)" d="M0,0L6,0"></path> + <path transform="translate(20,50.000000000000014)" d="M0,0L6,0"></path> + <path transform="translate(20,20)" d="M0,0L6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="start" font-variant="tabular-nums" transform="translate(9.5,0.5)"> + <text transform="translate(20,380)"><tspan x="0" y="0.31999999999999995em">:00</tspan><tspan x="0" dy="1em">12:00</tspan></text> + <text y="0.32em" transform="translate(20,350)">:05</text> + <text y="0.32em" transform="translate(20,320)">:10</text> + <text y="0.32em" transform="translate(20,290)">:15</text> + <text y="0.32em" transform="translate(20,260.00000000000006)">:20</text> + <text y="0.32em" transform="translate(20,229.99999999999997)">:25</text> + <text y="0.32em" transform="translate(20,200)">:30</text> + <text y="0.32em" transform="translate(20,169.99999999999997)">:35</text> + <text y="0.32em" transform="translate(20,140.00000000000003)">:40</text> + <text y="0.32em" transform="translate(20,110)">:45</text> + <text y="0.32em" transform="translate(20,79.99999999999999)">:50</text> + <text y="0.32em" transform="translate(20,50.000000000000014)">:55</text> + <text transform="translate(20,20)"><tspan x="0" y="0.31999999999999995em">:00</tspan><tspan x="0" dy="1em">12:01</tspan></text> + </g> + </svg></g> + <g transform="translate(160,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="0" x2="20" y1="380" y2="380"></line> + <line x1="0" x2="20" y1="344" y2="344"></line> + <line x1="0" x2="20" y1="308" y2="308"></line> + <line x1="0" x2="20" y1="272" y2="272"></line> + <line x1="0" x2="20" y1="236" y2="236"></line> + <line x1="0" x2="20" y1="200" y2="200"></line> + <line x1="0" x2="20" y1="164" y2="164"></line> + <line x1="0" x2="20" y1="128" y2="128"></line> + <line x1="0" x2="20" y1="91.99999999999999" y2="91.99999999999999"></line> + <line x1="0" x2="20" y1="55.99999999999999" y2="55.99999999999999"></line> + <line x1="0" x2="20" y1="20" y2="20"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(1,0.5)"> + <path transform="translate(20,380)" d="M0,0L6,0"></path> + <path transform="translate(20,344)" d="M0,0L6,0"></path> + <path transform="translate(20,308)" d="M0,0L6,0"></path> + <path transform="translate(20,272)" d="M0,0L6,0"></path> + <path transform="translate(20,236)" d="M0,0L6,0"></path> + <path transform="translate(20,200)" d="M0,0L6,0"></path> + <path transform="translate(20,164)" d="M0,0L6,0"></path> + <path transform="translate(20,128)" d="M0,0L6,0"></path> + <path transform="translate(20,91.99999999999999)" d="M0,0L6,0"></path> + <path transform="translate(20,55.99999999999999)" d="M0,0L6,0"></path> + <path transform="translate(20,20)" d="M0,0L6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="start" font-variant="tabular-nums" transform="translate(9.5,0.5)"> + <text transform="translate(20,380)"><tspan x="0" y="0.31999999999999995em">12:00</tspan><tspan x="0" dy="1em">AM</tspan></text> + <text y="0.32em" transform="translate(20,344)">12:01</text> + <text y="0.32em" transform="translate(20,308)">12:02</text> + <text y="0.32em" transform="translate(20,272)">12:03</text> + <text y="0.32em" transform="translate(20,236)">12:04</text> + <text y="0.32em" transform="translate(20,200)">12:05</text> + <text y="0.32em" transform="translate(20,164)">12:06</text> + <text y="0.32em" transform="translate(20,128)">12:07</text> + <text y="0.32em" transform="translate(20,91.99999999999999)">12:08</text> + <text y="0.32em" transform="translate(20,55.99999999999999)">12:09</text> + <text y="0.32em" transform="translate(20,20)">12:10</text> + </g> + </svg></g> + <g transform="translate(240,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="0" x2="20" y1="380" y2="380"></line> + <line x1="0" x2="20" y1="344" y2="344"></line> + <line x1="0" x2="20" y1="308" y2="308"></line> + <line x1="0" x2="20" y1="272" y2="272"></line> + <line x1="0" x2="20" y1="236" y2="236"></line> + <line x1="0" x2="20" y1="200" y2="200"></line> + <line x1="0" x2="20" y1="164" y2="164"></line> + <line x1="0" x2="20" y1="128" y2="128"></line> + <line x1="0" x2="20" y1="91.99999999999999" y2="91.99999999999999"></line> + <line x1="0" x2="20" y1="55.99999999999999" y2="55.99999999999999"></line> + <line x1="0" x2="20" y1="20" y2="20"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(1,0.5)"> + <path transform="translate(20,380)" d="M0,0L6,0"></path> + <path transform="translate(20,344)" d="M0,0L6,0"></path> + <path transform="translate(20,308)" d="M0,0L6,0"></path> + <path transform="translate(20,272)" d="M0,0L6,0"></path> + <path transform="translate(20,236)" d="M0,0L6,0"></path> + <path transform="translate(20,200)" d="M0,0L6,0"></path> + <path transform="translate(20,164)" d="M0,0L6,0"></path> + <path transform="translate(20,128)" d="M0,0L6,0"></path> + <path transform="translate(20,91.99999999999999)" d="M0,0L6,0"></path> + <path transform="translate(20,55.99999999999999)" d="M0,0L6,0"></path> + <path transform="translate(20,20)" d="M0,0L6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="start" font-variant="tabular-nums" transform="translate(9.5,0.5)"> + <text transform="translate(20,380)"><tspan x="0" y="0.31999999999999995em">12:00</tspan><tspan x="0" dy="1em">AM</tspan></text> + <text y="0.32em" transform="translate(20,344)">12:30</text> + <text y="0.32em" transform="translate(20,308)">1:00</text> + <text y="0.32em" transform="translate(20,272)">1:30</text> + <text y="0.32em" transform="translate(20,236)">2:00</text> + <text y="0.32em" transform="translate(20,200)">2:30</text> + <text y="0.32em" transform="translate(20,164)">3:00</text> + <text y="0.32em" transform="translate(20,128)">3:30</text> + <text y="0.32em" transform="translate(20,91.99999999999999)">4:00</text> + <text y="0.32em" transform="translate(20,55.99999999999999)">4:30</text> + <text y="0.32em" transform="translate(20,20)">5:00</text> + </g> + </svg></g> + <g transform="translate(320,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="0" x2="20" y1="380" y2="380"></line> + <line x1="0" x2="20" y1="342.7586206896552" y2="342.7586206896552"></line> + <line x1="0" x2="20" y1="305.51724137931035" y2="305.51724137931035"></line> + <line x1="0" x2="20" y1="268.2758620689655" y2="268.2758620689655"></line> + <line x1="0" x2="20" y1="231.03448275862073" y2="231.03448275862073"></line> + <line x1="0" x2="20" y1="193.79310344827584" y2="193.79310344827584"></line> + <line x1="0" x2="20" y1="156.55172413793105" y2="156.55172413793105"></line> + <line x1="0" x2="20" y1="119.3103448275862" y2="119.3103448275862"></line> + <line x1="0" x2="20" y1="82.06896551724138" y2="82.06896551724138"></line> + <line x1="0" x2="20" y1="44.82758620689656" y2="44.82758620689656"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(1,0.5)"> + <path transform="translate(20,380)" d="M0,0L6,0"></path> + <path transform="translate(20,342.7586206896552)" d="M0,0L6,0"></path> + <path transform="translate(20,305.51724137931035)" d="M0,0L6,0"></path> + <path transform="translate(20,268.2758620689655)" d="M0,0L6,0"></path> + <path transform="translate(20,231.03448275862073)" d="M0,0L6,0"></path> + <path transform="translate(20,193.79310344827584)" d="M0,0L6,0"></path> + <path transform="translate(20,156.55172413793105)" d="M0,0L6,0"></path> + <path transform="translate(20,119.3103448275862)" d="M0,0L6,0"></path> + <path transform="translate(20,82.06896551724138)" d="M0,0L6,0"></path> + <path transform="translate(20,44.82758620689656)" d="M0,0L6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="start" font-variant="tabular-nums" transform="translate(9.5,0.5)"> + <text transform="translate(20,380)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 1</tspan></text> + <text y="0.32em" transform="translate(20,342.7586206896552)">3 AM</text> + <text y="0.32em" transform="translate(20,305.51724137931035)">6 AM</text> + <text y="0.32em" transform="translate(20,268.2758620689655)">9 AM</text> + <text y="0.32em" transform="translate(20,231.03448275862073)">12 PM</text> + <text y="0.32em" transform="translate(20,193.79310344827584)">3 PM</text> + <text y="0.32em" transform="translate(20,156.55172413793105)">6 PM</text> + <text y="0.32em" transform="translate(20,119.3103448275862)">9 PM</text> + <text transform="translate(20,82.06896551724138)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 2</tspan></text> + <text y="0.32em" transform="translate(20,44.82758620689656)">3 AM</text> + </g> + </svg></g> + <g transform="translate(400,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="0" x2="20" y1="380" y2="380"></line> + <line x1="0" x2="20" y1="350" y2="350"></line> + <line x1="0" x2="20" y1="320" y2="320"></line> + <line x1="0" x2="20" y1="290" y2="290"></line> + <line x1="0" x2="20" y1="260.00000000000006" y2="260.00000000000006"></line> + <line x1="0" x2="20" y1="229.99999999999997" y2="229.99999999999997"></line> + <line x1="0" x2="20" y1="200" y2="200"></line> + <line x1="0" x2="20" y1="169.99999999999997" y2="169.99999999999997"></line> + <line x1="0" x2="20" y1="140.00000000000003" y2="140.00000000000003"></line> + <line x1="0" x2="20" y1="110" y2="110"></line> + <line x1="0" x2="20" y1="79.99999999999999" y2="79.99999999999999"></line> + <line x1="0" x2="20" y1="50.000000000000014" y2="50.000000000000014"></line> + <line x1="0" x2="20" y1="20" y2="20"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(1,0.5)"> + <path transform="translate(20,380)" d="M0,0L6,0"></path> + <path transform="translate(20,350)" d="M0,0L6,0"></path> + <path transform="translate(20,320)" d="M0,0L6,0"></path> + <path transform="translate(20,290)" d="M0,0L6,0"></path> + <path transform="translate(20,260.00000000000006)" d="M0,0L6,0"></path> + <path transform="translate(20,229.99999999999997)" d="M0,0L6,0"></path> + <path transform="translate(20,200)" d="M0,0L6,0"></path> + <path transform="translate(20,169.99999999999997)" d="M0,0L6,0"></path> + <path transform="translate(20,140.00000000000003)" d="M0,0L6,0"></path> + <path transform="translate(20,110)" d="M0,0L6,0"></path> + <path transform="translate(20,79.99999999999999)" d="M0,0L6,0"></path> + <path transform="translate(20,50.000000000000014)" d="M0,0L6,0"></path> + <path transform="translate(20,20)" d="M0,0L6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="start" font-variant="tabular-nums" transform="translate(9.5,0.5)"> + <text transform="translate(20,380)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 5</tspan></text> + <text y="0.32em" transform="translate(20,350)">12 PM</text> + <text transform="translate(20,320)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 6</tspan></text> + <text y="0.32em" transform="translate(20,290)">12 PM</text> + <text transform="translate(20,260.00000000000006)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 7</tspan></text> + <text y="0.32em" transform="translate(20,229.99999999999997)">12 PM</text> + <text transform="translate(20,200)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 8</tspan></text> + <text y="0.32em" transform="translate(20,169.99999999999997)">12 PM</text> + <text transform="translate(20,140.00000000000003)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 9</tspan></text> + <text y="0.32em" transform="translate(20,110)">12 PM</text> + <text transform="translate(20,79.99999999999999)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 10</tspan></text> + <text y="0.32em" transform="translate(20,50.000000000000014)">12 PM</text> + <text transform="translate(20,20)"><tspan x="0" y="0.31999999999999995em">12 AM</tspan><tspan x="0" dy="1em">Jan 11</tspan></text> + </g> + </svg></g> + <g transform="translate(480,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="0" x2="20" y1="380" y2="380"></line> + <line x1="0" x2="20" y1="353.3333333333333" y2="353.3333333333333"></line> + <line x1="0" x2="20" y1="326.6666666666667" y2="326.6666666666667"></line> + <line x1="0" x2="20" y1="300" y2="300"></line> + <line x1="0" x2="20" y1="273.3333333333333" y2="273.3333333333333"></line> + <line x1="0" x2="20" y1="246.66666666666669" y2="246.66666666666669"></line> + <line x1="0" x2="20" y1="220" y2="220"></line> + <line x1="0" x2="20" y1="193.33333333333334" y2="193.33333333333334"></line> + <line x1="0" x2="20" y1="166.66666666666669" y2="166.66666666666669"></line> + <line x1="0" x2="20" y1="140.00000000000003" y2="140.00000000000003"></line> + <line x1="0" x2="20" y1="113.33333333333334" y2="113.33333333333334"></line> + <line x1="0" x2="20" y1="86.66666666666667" y2="86.66666666666667"></line> + <line x1="0" x2="20" y1="60.00000000000002" y2="60.00000000000002"></line> + <line x1="0" x2="20" y1="33.33333333333336" y2="33.33333333333336"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(1,0.5)"> + <path transform="translate(20,380)" d="M0,0L6,0"></path> + <path transform="translate(20,353.3333333333333)" d="M0,0L6,0"></path> + <path transform="translate(20,326.6666666666667)" d="M0,0L6,0"></path> + <path transform="translate(20,300)" d="M0,0L6,0"></path> + <path transform="translate(20,273.3333333333333)" d="M0,0L6,0"></path> + <path transform="translate(20,246.66666666666669)" d="M0,0L6,0"></path> + <path transform="translate(20,220)" d="M0,0L6,0"></path> + <path transform="translate(20,193.33333333333334)" d="M0,0L6,0"></path> + <path transform="translate(20,166.66666666666669)" d="M0,0L6,0"></path> + <path transform="translate(20,140.00000000000003)" d="M0,0L6,0"></path> + <path transform="translate(20,113.33333333333334)" d="M0,0L6,0"></path> + <path transform="translate(20,86.66666666666667)" d="M0,0L6,0"></path> + <path transform="translate(20,60.00000000000002)" d="M0,0L6,0"></path> + <path transform="translate(20,33.33333333333336)" d="M0,0L6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="start" font-variant="tabular-nums" transform="translate(9.5,0.5)"> + <text transform="translate(20,380)"><tspan x="0" y="0.31999999999999995em">17</tspan><tspan x="0" dy="1em">Jan</tspan></text> + <text y="0.32em" transform="translate(20,353.3333333333333)">19</text> + <text y="0.32em" transform="translate(20,326.6666666666667)">21</text> + <text y="0.32em" transform="translate(20,300)">23</text> + <text y="0.32em" transform="translate(20,273.3333333333333)">25</text> + <text y="0.32em" transform="translate(20,246.66666666666669)">27</text> + <text y="0.32em" transform="translate(20,220)">29</text> + <text y="0.32em" transform="translate(20,193.33333333333334)">31</text> + <text transform="translate(20,166.66666666666669)"><tspan x="0" y="0.31999999999999995em">2</tspan><tspan x="0" dy="1em">Feb</tspan></text> + <text y="0.32em" transform="translate(20,140.00000000000003)">4</text> + <text y="0.32em" transform="translate(20,113.33333333333334)">6</text> + <text y="0.32em" transform="translate(20,86.66666666666667)">8</text> + <text y="0.32em" transform="translate(20,60.00000000000002)">10</text> + <text y="0.32em" transform="translate(20,33.33333333333336)">12</text> + </g> + </svg></g> + <g transform="translate(560,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="0" x2="20" y1="380" y2="380"></line> + <line x1="0" x2="20" y1="350.4918032786885" y2="350.4918032786885"></line> + <line x1="0" x2="20" y1="320" y2="320"></line> + <line x1="0" x2="20" y1="290.4918032786885" y2="290.4918032786885"></line> + <line x1="0" x2="20" y1="260.00000000000006" y2="260.00000000000006"></line> + <line x1="0" x2="20" y1="229.50819672131146" y2="229.50819672131146"></line> + <line x1="0" x2="20" y1="200" y2="200"></line> + <line x1="0" x2="20" y1="169.5081967213115" y2="169.5081967213115"></line> + <line x1="0" x2="20" y1="140.00000000000003" y2="140.00000000000003"></line> + <line x1="0" x2="20" y1="109.5081967213115" y2="109.5081967213115"></line> + <line x1="0" x2="20" y1="79.01639344262294" y2="79.01639344262294"></line> + <line x1="0" x2="20" y1="50.491803278688515" y2="50.491803278688515"></line> + <line x1="0" x2="20" y1="20" y2="20"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(1,0.5)"> + <path transform="translate(20,380)" d="M0,0L6,0"></path> + <path transform="translate(20,350.4918032786885)" d="M0,0L6,0"></path> + <path transform="translate(20,320)" d="M0,0L6,0"></path> + <path transform="translate(20,290.4918032786885)" d="M0,0L6,0"></path> + <path transform="translate(20,260.00000000000006)" d="M0,0L6,0"></path> + <path transform="translate(20,229.50819672131146)" d="M0,0L6,0"></path> + <path transform="translate(20,200)" d="M0,0L6,0"></path> + <path transform="translate(20,169.5081967213115)" d="M0,0L6,0"></path> + <path transform="translate(20,140.00000000000003)" d="M0,0L6,0"></path> + <path transform="translate(20,109.5081967213115)" d="M0,0L6,0"></path> + <path transform="translate(20,79.01639344262294)" d="M0,0L6,0"></path> + <path transform="translate(20,50.491803278688515)" d="M0,0L6,0"></path> + <path transform="translate(20,20)" d="M0,0L6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="start" font-variant="tabular-nums" transform="translate(9.5,0.5)"> + <text transform="translate(20,380)"><tspan x="0" y="0.31999999999999995em">Apr</tspan><tspan x="0" dy="1em">2023</tspan></text> + <text y="0.32em" transform="translate(20,350.4918032786885)">May</text> + <text y="0.32em" transform="translate(20,320)">Jun</text> + <text y="0.32em" transform="translate(20,290.4918032786885)">Jul</text> + <text y="0.32em" transform="translate(20,260.00000000000006)">Aug</text> + <text y="0.32em" transform="translate(20,229.50819672131146)">Sep</text> + <text y="0.32em" transform="translate(20,200)">Oct</text> + <text y="0.32em" transform="translate(20,169.5081967213115)">Nov</text> + <text y="0.32em" transform="translate(20,140.00000000000003)">Dec</text> + <text transform="translate(20,109.5081967213115)"><tspan x="0" y="0.31999999999999995em">Jan</tspan><tspan x="0" dy="1em">2024</tspan></text> + <text y="0.32em" transform="translate(20,79.01639344262294)">Feb</text> + <text y="0.32em" transform="translate(20,50.491803278688515)">Mar</text> + <text y="0.32em" transform="translate(20,20)">Apr</text> + </g> + </svg></g> + <g transform="translate(640,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="80" height="400" viewBox="0 0 80 400"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="y-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"> + <line x1="0" x2="20" y1="380" y2="380"></line> + <line x1="0" x2="20" y1="343.9862016098122" y2="343.9862016098122"></line> + <line x1="0" x2="20" y1="307.992115205607" y2="307.992115205607"></line> + <line x1="0" x2="20" y1="271.99802880140174" y2="271.99802880140174"></line> + <line x1="0" x2="20" y1="236.0039423971965" y2="236.0039423971965"></line> + <line x1="0" x2="20" y1="199.9901440070087" y2="199.9901440070087"></line> + <line x1="0" x2="20" y1="163.9960576028035" y2="163.9960576028035"></line> + <line x1="0" x2="20" y1="128.00197119859826" y2="128.00197119859826"></line> + <line x1="0" x2="20" y1="92.00788479439302" y2="92.00788479439302"></line> + <line x1="0" x2="20" y1="55.99408640420523" y2="55.99408640420523"></line> + <line x1="0" x2="20" y1="20" y2="20"></line> + </g> + <g aria-label="y-axis tick" fill="none" stroke="currentColor" transform="translate(1,0.5)"> + <path transform="translate(20,380)" d="M0,0L6,0"></path> + <path transform="translate(20,343.9862016098122)" d="M0,0L6,0"></path> + <path transform="translate(20,307.992115205607)" d="M0,0L6,0"></path> + <path transform="translate(20,271.99802880140174)" d="M0,0L6,0"></path> + <path transform="translate(20,236.0039423971965)" d="M0,0L6,0"></path> + <path transform="translate(20,199.9901440070087)" d="M0,0L6,0"></path> + <path transform="translate(20,163.9960576028035)" d="M0,0L6,0"></path> + <path transform="translate(20,128.00197119859826)" d="M0,0L6,0"></path> + <path transform="translate(20,92.00788479439302)" d="M0,0L6,0"></path> + <path transform="translate(20,55.99408640420523)" d="M0,0L6,0"></path> + <path transform="translate(20,20)" d="M0,0L6,0"></path> + </g> + <g aria-label="y-axis tick label" text-anchor="start" font-variant="tabular-nums" transform="translate(9.5,0.5)"> + <text y="0.32em" transform="translate(20,380)">2020</text> + <text y="0.32em" transform="translate(20,343.9862016098122)">2025</text> + <text y="0.32em" transform="translate(20,307.992115205607)">2030</text> + <text y="0.32em" transform="translate(20,271.99802880140174)">2035</text> + <text y="0.32em" transform="translate(20,236.0039423971965)">2040</text> + <text y="0.32em" transform="translate(20,199.9901440070087)">2045</text> + <text y="0.32em" transform="translate(20,163.9960576028035)">2050</text> + <text y="0.32em" transform="translate(20,128.00197119859826)">2055</text> + <text y="0.32em" transform="translate(20,92.00788479439302)">2060</text> + <text y="0.32em" transform="translate(20,55.99408640420523)">2065</text> + <text y="0.32em" transform="translate(20,20)">2070</text> + </g> + </svg></g> +</svg> \ No newline at end of file diff --git a/test/output/timeAxisTop.svg b/test/output/timeAxisTop.svg new file mode 100644 index 0000000000..07030bbaee --- /dev/null +++ b/test/output/timeAxisTop.svg @@ -0,0 +1,1386 @@ +<svg width="640" height="1500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g transform="translate(0,0)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="80" x2="80" y1="40" y2="59"></line> + <line x1="140" x2="140" y1="40" y2="59"></line> + <line x1="200" x2="200" y1="40" y2="59"></line> + <line x1="260" x2="260" y1="40" y2="59"></line> + <line x1="320" x2="320" y1="40" y2="59"></line> + <line x1="380" x2="380" y1="40" y2="59"></line> + <line x1="440" x2="440" y1="40" y2="59"></line> + <line x1="500" x2="500" y1="40" y2="59"></line> + <line x1="560" x2="560" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(80,40)" d="M0,0L0,-6"></path> + <path transform="translate(140,40)" d="M0,0L0,-6"></path> + <path transform="translate(200,40)" d="M0,0L0,-6"></path> + <path transform="translate(260,40)" d="M0,0L0,-6"></path> + <path transform="translate(320,40)" d="M0,0L0,-6"></path> + <path transform="translate(380,40)" d="M0,0L0,-6"></path> + <path transform="translate(440,40)" d="M0,0L0,-6"></path> + <path transform="translate(500,40)" d="M0,0L0,-6"></path> + <path transform="translate(560,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">:00:00</tspan><tspan x="0" dy="1em">.000</tspan></text> + <text transform="translate(80,40)">.100</text> + <text transform="translate(140,40)">.200</text> + <text transform="translate(200,40)">.300</text> + <text transform="translate(260,40)">.400</text> + <text transform="translate(320,40)">.500</text> + <text transform="translate(380,40)">.600</text> + <text transform="translate(440,40)">.700</text> + <text transform="translate(500,40)">.800</text> + <text transform="translate(560,40)">.900</text> + <text transform="translate(620,40)"><tspan x="0" y="-1em">:00:01</tspan><tspan x="0" dy="1em">.000</tspan></text> + </g> + </svg></g> + <g transform="translate(0,60)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="80" x2="80" y1="40" y2="59"></line> + <line x1="140" x2="140" y1="40" y2="59"></line> + <line x1="200" x2="200" y1="40" y2="59"></line> + <line x1="260" x2="260" y1="40" y2="59"></line> + <line x1="320" x2="320" y1="40" y2="59"></line> + <line x1="380" x2="380" y1="40" y2="59"></line> + <line x1="440" x2="440" y1="40" y2="59"></line> + <line x1="500" x2="500" y1="40" y2="59"></line> + <line x1="560" x2="560" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(80,40)" d="M0,0L0,-6"></path> + <path transform="translate(140,40)" d="M0,0L0,-6"></path> + <path transform="translate(200,40)" d="M0,0L0,-6"></path> + <path transform="translate(260,40)" d="M0,0L0,-6"></path> + <path transform="translate(320,40)" d="M0,0L0,-6"></path> + <path transform="translate(380,40)" d="M0,0L0,-6"></path> + <path transform="translate(440,40)" d="M0,0L0,-6"></path> + <path transform="translate(500,40)" d="M0,0L0,-6"></path> + <path transform="translate(560,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">:00:00</tspan><tspan x="0" dy="1em">.000</tspan></text> + <text transform="translate(80,40)">.500</text> + <text transform="translate(140,40)"><tspan x="0" y="-1em">:00:01</tspan><tspan x="0" dy="1em">.000</tspan></text> + <text transform="translate(200,40)">.500</text> + <text transform="translate(260,40)"><tspan x="0" y="-1em">:00:02</tspan><tspan x="0" dy="1em">.000</tspan></text> + <text transform="translate(320,40)">.500</text> + <text transform="translate(380,40)"><tspan x="0" y="-1em">:00:03</tspan><tspan x="0" dy="1em">.000</tspan></text> + <text transform="translate(440,40)">.500</text> + <text transform="translate(500,40)"><tspan x="0" y="-1em">:00:04</tspan><tspan x="0" dy="1em">.000</tspan></text> + <text transform="translate(560,40)">.500</text> + <text transform="translate(620,40)"><tspan x="0" y="-1em">:00:05</tspan><tspan x="0" dy="1em">.000</tspan></text> + </g> + </svg></g> + <g transform="translate(0,120)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="80" x2="80" y1="40" y2="59"></line> + <line x1="140" x2="140" y1="40" y2="59"></line> + <line x1="200" x2="200" y1="40" y2="59"></line> + <line x1="260" x2="260" y1="40" y2="59"></line> + <line x1="320" x2="320" y1="40" y2="59"></line> + <line x1="380" x2="380" y1="40" y2="59"></line> + <line x1="440" x2="440" y1="40" y2="59"></line> + <line x1="500" x2="500" y1="40" y2="59"></line> + <line x1="560" x2="560" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(80,40)" d="M0,0L0,-6"></path> + <path transform="translate(140,40)" d="M0,0L0,-6"></path> + <path transform="translate(200,40)" d="M0,0L0,-6"></path> + <path transform="translate(260,40)" d="M0,0L0,-6"></path> + <path transform="translate(320,40)" d="M0,0L0,-6"></path> + <path transform="translate(380,40)" d="M0,0L0,-6"></path> + <path transform="translate(440,40)" d="M0,0L0,-6"></path> + <path transform="translate(500,40)" d="M0,0L0,-6"></path> + <path transform="translate(560,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">12:00</tspan><tspan x="0" dy="1em">:00</tspan></text> + <text transform="translate(80,40)">:01</text> + <text transform="translate(140,40)">:02</text> + <text transform="translate(200,40)">:03</text> + <text transform="translate(260,40)">:04</text> + <text transform="translate(320,40)">:05</text> + <text transform="translate(380,40)">:06</text> + <text transform="translate(440,40)">:07</text> + <text transform="translate(500,40)">:08</text> + <text transform="translate(560,40)">:09</text> + <text transform="translate(620,40)">:10</text> + </g> + </svg></g> + <g transform="translate(0,180)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="70" x2="70" y1="40" y2="59"></line> + <line x1="120" x2="120" y1="40" y2="59"></line> + <line x1="170" x2="170" y1="40" y2="59"></line> + <line x1="220" x2="220" y1="40" y2="59"></line> + <line x1="270.00000000000006" x2="270.00000000000006" y1="40" y2="59"></line> + <line x1="320" x2="320" y1="40" y2="59"></line> + <line x1="370" x2="370" y1="40" y2="59"></line> + <line x1="420" x2="420" y1="40" y2="59"></line> + <line x1="470" x2="470" y1="40" y2="59"></line> + <line x1="520.0000000000001" x2="520.0000000000001" y1="40" y2="59"></line> + <line x1="569.9999999999999" x2="569.9999999999999" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(70,40)" d="M0,0L0,-6"></path> + <path transform="translate(120,40)" d="M0,0L0,-6"></path> + <path transform="translate(170,40)" d="M0,0L0,-6"></path> + <path transform="translate(220,40)" d="M0,0L0,-6"></path> + <path transform="translate(270.00000000000006,40)" d="M0,0L0,-6"></path> + <path transform="translate(320,40)" d="M0,0L0,-6"></path> + <path transform="translate(370,40)" d="M0,0L0,-6"></path> + <path transform="translate(420,40)" d="M0,0L0,-6"></path> + <path transform="translate(470,40)" d="M0,0L0,-6"></path> + <path transform="translate(520.0000000000001,40)" d="M0,0L0,-6"></path> + <path transform="translate(569.9999999999999,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">12:00</tspan><tspan x="0" dy="1em">:00</tspan></text> + <text transform="translate(70,40)">:05</text> + <text transform="translate(120,40)">:10</text> + <text transform="translate(170,40)">:15</text> + <text transform="translate(220,40)">:20</text> + <text transform="translate(270.00000000000006,40)">:25</text> + <text transform="translate(320,40)">:30</text> + <text transform="translate(370,40)">:35</text> + <text transform="translate(420,40)">:40</text> + <text transform="translate(470,40)">:45</text> + <text transform="translate(520.0000000000001,40)">:50</text> + <text transform="translate(569.9999999999999,40)">:55</text> + <text transform="translate(620,40)"><tspan x="0" y="-1em">12:01</tspan><tspan x="0" dy="1em">:00</tspan></text> + </g> + </svg></g> + <g transform="translate(0,240)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="95" x2="95" y1="40" y2="59"></line> + <line x1="170" x2="170" y1="40" y2="59"></line> + <line x1="245" x2="245" y1="40" y2="59"></line> + <line x1="320" x2="320" y1="40" y2="59"></line> + <line x1="395" x2="395" y1="40" y2="59"></line> + <line x1="470" x2="470" y1="40" y2="59"></line> + <line x1="545" x2="545" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(95,40)" d="M0,0L0,-6"></path> + <path transform="translate(170,40)" d="M0,0L0,-6"></path> + <path transform="translate(245,40)" d="M0,0L0,-6"></path> + <path transform="translate(320,40)" d="M0,0L0,-6"></path> + <path transform="translate(395,40)" d="M0,0L0,-6"></path> + <path transform="translate(470,40)" d="M0,0L0,-6"></path> + <path transform="translate(545,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">12:00</tspan><tspan x="0" dy="1em">:00</tspan></text> + <text transform="translate(95,40)">:15</text> + <text transform="translate(170,40)">:30</text> + <text transform="translate(245,40)">:45</text> + <text transform="translate(320,40)"><tspan x="0" y="-1em">12:01</tspan><tspan x="0" dy="1em">:00</tspan></text> + <text transform="translate(395,40)">:15</text> + <text transform="translate(470,40)">:30</text> + <text transform="translate(545,40)">:45</text> + <text transform="translate(620,40)"><tspan x="0" y="-1em">12:02</tspan><tspan x="0" dy="1em">:00</tspan></text> + </g> + </svg></g> + <g transform="translate(0,300)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="95" x2="95" y1="40" y2="59"></line> + <line x1="170" x2="170" y1="40" y2="59"></line> + <line x1="245" x2="245" y1="40" y2="59"></line> + <line x1="320" x2="320" y1="40" y2="59"></line> + <line x1="395" x2="395" y1="40" y2="59"></line> + <line x1="470" x2="470" y1="40" y2="59"></line> + <line x1="545" x2="545" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(95,40)" d="M0,0L0,-6"></path> + <path transform="translate(170,40)" d="M0,0L0,-6"></path> + <path transform="translate(245,40)" d="M0,0L0,-6"></path> + <path transform="translate(320,40)" d="M0,0L0,-6"></path> + <path transform="translate(395,40)" d="M0,0L0,-6"></path> + <path transform="translate(470,40)" d="M0,0L0,-6"></path> + <path transform="translate(545,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">12:00</tspan><tspan x="0" dy="1em">:00</tspan></text> + <text transform="translate(95,40)">:30</text> + <text transform="translate(170,40)"><tspan x="0" y="-1em">12:01</tspan><tspan x="0" dy="1em">:00</tspan></text> + <text transform="translate(245,40)">:30</text> + <text transform="translate(320,40)"><tspan x="0" y="-1em">12:02</tspan><tspan x="0" dy="1em">:00</tspan></text> + <text transform="translate(395,40)">:30</text> + <text transform="translate(470,40)"><tspan x="0" y="-1em">12:03</tspan><tspan x="0" dy="1em">:00</tspan></text> + <text transform="translate(545,40)">:30</text> + <text transform="translate(620,40)"><tspan x="0" y="-1em">12:04</tspan><tspan x="0" dy="1em">:00</tspan></text> + </g> + </svg></g> + <g transform="translate(0,360)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="80" x2="80" y1="40" y2="59"></line> + <line x1="140" x2="140" y1="40" y2="59"></line> + <line x1="200" x2="200" y1="40" y2="59"></line> + <line x1="260" x2="260" y1="40" y2="59"></line> + <line x1="320" x2="320" y1="40" y2="59"></line> + <line x1="380" x2="380" y1="40" y2="59"></line> + <line x1="440" x2="440" y1="40" y2="59"></line> + <line x1="500" x2="500" y1="40" y2="59"></line> + <line x1="560" x2="560" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(80,40)" d="M0,0L0,-6"></path> + <path transform="translate(140,40)" d="M0,0L0,-6"></path> + <path transform="translate(200,40)" d="M0,0L0,-6"></path> + <path transform="translate(260,40)" d="M0,0L0,-6"></path> + <path transform="translate(320,40)" d="M0,0L0,-6"></path> + <path transform="translate(380,40)" d="M0,0L0,-6"></path> + <path transform="translate(440,40)" d="M0,0L0,-6"></path> + <path transform="translate(500,40)" d="M0,0L0,-6"></path> + <path transform="translate(560,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">AM</tspan><tspan x="0" dy="1em">12:00</tspan></text> + <text transform="translate(80,40)">12:01</text> + <text transform="translate(140,40)">12:02</text> + <text transform="translate(200,40)">12:03</text> + <text transform="translate(260,40)">12:04</text> + <text transform="translate(320,40)">12:05</text> + <text transform="translate(380,40)">12:06</text> + <text transform="translate(440,40)">12:07</text> + <text transform="translate(500,40)">12:08</text> + <text transform="translate(560,40)">12:09</text> + <text transform="translate(620,40)">12:10</text> + </g> + </svg></g> + <g transform="translate(0,420)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="70" x2="70" y1="40" y2="59"></line> + <line x1="120" x2="120" y1="40" y2="59"></line> + <line x1="170" x2="170" y1="40" y2="59"></line> + <line x1="220" x2="220" y1="40" y2="59"></line> + <line x1="270.00000000000006" x2="270.00000000000006" y1="40" y2="59"></line> + <line x1="320" x2="320" y1="40" y2="59"></line> + <line x1="370" x2="370" y1="40" y2="59"></line> + <line x1="420" x2="420" y1="40" y2="59"></line> + <line x1="470" x2="470" y1="40" y2="59"></line> + <line x1="520.0000000000001" x2="520.0000000000001" y1="40" y2="59"></line> + <line x1="569.9999999999999" x2="569.9999999999999" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(70,40)" d="M0,0L0,-6"></path> + <path transform="translate(120,40)" d="M0,0L0,-6"></path> + <path transform="translate(170,40)" d="M0,0L0,-6"></path> + <path transform="translate(220,40)" d="M0,0L0,-6"></path> + <path transform="translate(270.00000000000006,40)" d="M0,0L0,-6"></path> + <path transform="translate(320,40)" d="M0,0L0,-6"></path> + <path transform="translate(370,40)" d="M0,0L0,-6"></path> + <path transform="translate(420,40)" d="M0,0L0,-6"></path> + <path transform="translate(470,40)" d="M0,0L0,-6"></path> + <path transform="translate(520.0000000000001,40)" d="M0,0L0,-6"></path> + <path transform="translate(569.9999999999999,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">AM</tspan><tspan x="0" dy="1em">12:00</tspan></text> + <text transform="translate(70,40)">12:05</text> + <text transform="translate(120,40)">12:10</text> + <text transform="translate(170,40)">12:15</text> + <text transform="translate(220,40)">12:20</text> + <text transform="translate(270.00000000000006,40)">12:25</text> + <text transform="translate(320,40)">12:30</text> + <text transform="translate(370,40)">12:35</text> + <text transform="translate(420,40)">12:40</text> + <text transform="translate(470,40)">12:45</text> + <text transform="translate(520.0000000000001,40)">12:50</text> + <text transform="translate(569.9999999999999,40)">12:55</text> + <text transform="translate(620,40)">1:00</text> + </g> + </svg></g> + <g transform="translate(0,480)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="80" x2="80" y1="40" y2="59"></line> + <line x1="140" x2="140" y1="40" y2="59"></line> + <line x1="200" x2="200" y1="40" y2="59"></line> + <line x1="260" x2="260" y1="40" y2="59"></line> + <line x1="320" x2="320" y1="40" y2="59"></line> + <line x1="380" x2="380" y1="40" y2="59"></line> + <line x1="440" x2="440" y1="40" y2="59"></line> + <line x1="500" x2="500" y1="40" y2="59"></line> + <line x1="560" x2="560" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(80,40)" d="M0,0L0,-6"></path> + <path transform="translate(140,40)" d="M0,0L0,-6"></path> + <path transform="translate(200,40)" d="M0,0L0,-6"></path> + <path transform="translate(260,40)" d="M0,0L0,-6"></path> + <path transform="translate(320,40)" d="M0,0L0,-6"></path> + <path transform="translate(380,40)" d="M0,0L0,-6"></path> + <path transform="translate(440,40)" d="M0,0L0,-6"></path> + <path transform="translate(500,40)" d="M0,0L0,-6"></path> + <path transform="translate(560,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">AM</tspan><tspan x="0" dy="1em">12:00</tspan></text> + <text transform="translate(80,40)">12:15</text> + <text transform="translate(140,40)">12:30</text> + <text transform="translate(200,40)">12:45</text> + <text transform="translate(260,40)">1:00</text> + <text transform="translate(320,40)">1:15</text> + <text transform="translate(380,40)">1:30</text> + <text transform="translate(440,40)">1:45</text> + <text transform="translate(500,40)">2:00</text> + <text transform="translate(560,40)">2:15</text> + <text transform="translate(620,40)">2:30</text> + </g> + </svg></g> + <g transform="translate(0,540)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="80" x2="80" y1="40" y2="59"></line> + <line x1="140" x2="140" y1="40" y2="59"></line> + <line x1="200" x2="200" y1="40" y2="59"></line> + <line x1="260" x2="260" y1="40" y2="59"></line> + <line x1="320" x2="320" y1="40" y2="59"></line> + <line x1="380" x2="380" y1="40" y2="59"></line> + <line x1="440" x2="440" y1="40" y2="59"></line> + <line x1="500" x2="500" y1="40" y2="59"></line> + <line x1="560" x2="560" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(80,40)" d="M0,0L0,-6"></path> + <path transform="translate(140,40)" d="M0,0L0,-6"></path> + <path transform="translate(200,40)" d="M0,0L0,-6"></path> + <path transform="translate(260,40)" d="M0,0L0,-6"></path> + <path transform="translate(320,40)" d="M0,0L0,-6"></path> + <path transform="translate(380,40)" d="M0,0L0,-6"></path> + <path transform="translate(440,40)" d="M0,0L0,-6"></path> + <path transform="translate(500,40)" d="M0,0L0,-6"></path> + <path transform="translate(560,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">AM</tspan><tspan x="0" dy="1em">12:00</tspan></text> + <text transform="translate(80,40)">12:30</text> + <text transform="translate(140,40)">1:00</text> + <text transform="translate(200,40)">1:30</text> + <text transform="translate(260,40)">2:00</text> + <text transform="translate(320,40)">2:30</text> + <text transform="translate(380,40)">3:00</text> + <text transform="translate(440,40)">3:30</text> + <text transform="translate(500,40)">4:00</text> + <text transform="translate(560,40)">4:30</text> + <text transform="translate(620,40)">5:00</text> + </g> + </svg></g> + <g transform="translate(0,600)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="80" x2="80" y1="40" y2="59"></line> + <line x1="140" x2="140" y1="40" y2="59"></line> + <line x1="200" x2="200" y1="40" y2="59"></line> + <line x1="260" x2="260" y1="40" y2="59"></line> + <line x1="320" x2="320" y1="40" y2="59"></line> + <line x1="380" x2="380" y1="40" y2="59"></line> + <line x1="440" x2="440" y1="40" y2="59"></line> + <line x1="500" x2="500" y1="40" y2="59"></line> + <line x1="560" x2="560" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(80,40)" d="M0,0L0,-6"></path> + <path transform="translate(140,40)" d="M0,0L0,-6"></path> + <path transform="translate(200,40)" d="M0,0L0,-6"></path> + <path transform="translate(260,40)" d="M0,0L0,-6"></path> + <path transform="translate(320,40)" d="M0,0L0,-6"></path> + <path transform="translate(380,40)" d="M0,0L0,-6"></path> + <path transform="translate(440,40)" d="M0,0L0,-6"></path> + <path transform="translate(500,40)" d="M0,0L0,-6"></path> + <path transform="translate(560,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">AM</tspan><tspan x="0" dy="1em">10:00</tspan></text> + <text transform="translate(80,40)">10:30</text> + <text transform="translate(140,40)">11:00</text> + <text transform="translate(200,40)">11:30</text> + <text transform="translate(260,40)"><tspan x="0" y="-1em">PM</tspan><tspan x="0" dy="1em">12:00</tspan></text> + <text transform="translate(320,40)">12:30</text> + <text transform="translate(380,40)">1:00</text> + <text transform="translate(440,40)">1:30</text> + <text transform="translate(500,40)">2:00</text> + <text transform="translate(560,40)">2:30</text> + <text transform="translate(620,40)">3:00</text> + </g> + </svg></g> + <g transform="translate(0,660)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="80" x2="80" y1="40" y2="59"></line> + <line x1="140" x2="140" y1="40" y2="59"></line> + <line x1="200" x2="200" y1="40" y2="59"></line> + <line x1="260" x2="260" y1="40" y2="59"></line> + <line x1="320" x2="320" y1="40" y2="59"></line> + <line x1="380" x2="380" y1="40" y2="59"></line> + <line x1="440" x2="440" y1="40" y2="59"></line> + <line x1="500" x2="500" y1="40" y2="59"></line> + <line x1="560" x2="560" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(80,40)" d="M0,0L0,-6"></path> + <path transform="translate(140,40)" d="M0,0L0,-6"></path> + <path transform="translate(200,40)" d="M0,0L0,-6"></path> + <path transform="translate(260,40)" d="M0,0L0,-6"></path> + <path transform="translate(320,40)" d="M0,0L0,-6"></path> + <path transform="translate(380,40)" d="M0,0L0,-6"></path> + <path transform="translate(440,40)" d="M0,0L0,-6"></path> + <path transform="translate(500,40)" d="M0,0L0,-6"></path> + <path transform="translate(560,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">Jan 1</tspan><tspan x="0" dy="1em">12 AM</tspan></text> + <text transform="translate(80,40)">1 AM</text> + <text transform="translate(140,40)">2 AM</text> + <text transform="translate(200,40)">3 AM</text> + <text transform="translate(260,40)">4 AM</text> + <text transform="translate(320,40)">5 AM</text> + <text transform="translate(380,40)">6 AM</text> + <text transform="translate(440,40)">7 AM</text> + <text transform="translate(500,40)">8 AM</text> + <text transform="translate(560,40)">9 AM</text> + <text transform="translate(620,40)">10 AM</text> + </g> + </svg></g> + <g transform="translate(0,720)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="82.06896551724138" x2="82.06896551724138" y1="40" y2="59"></line> + <line x1="144.13793103448276" x2="144.13793103448276" y1="40" y2="59"></line> + <line x1="206.20689655172416" x2="206.20689655172416" y1="40" y2="59"></line> + <line x1="268.2758620689655" x2="268.2758620689655" y1="40" y2="59"></line> + <line x1="330.3448275862069" x2="330.3448275862069" y1="40" y2="59"></line> + <line x1="392.4137931034483" x2="392.4137931034483" y1="40" y2="59"></line> + <line x1="454.48275862068965" x2="454.48275862068965" y1="40" y2="59"></line> + <line x1="516.551724137931" x2="516.551724137931" y1="40" y2="59"></line> + <line x1="578.6206896551723" x2="578.6206896551723" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(82.06896551724138,40)" d="M0,0L0,-6"></path> + <path transform="translate(144.13793103448276,40)" d="M0,0L0,-6"></path> + <path transform="translate(206.20689655172416,40)" d="M0,0L0,-6"></path> + <path transform="translate(268.2758620689655,40)" d="M0,0L0,-6"></path> + <path transform="translate(330.3448275862069,40)" d="M0,0L0,-6"></path> + <path transform="translate(392.4137931034483,40)" d="M0,0L0,-6"></path> + <path transform="translate(454.48275862068965,40)" d="M0,0L0,-6"></path> + <path transform="translate(516.551724137931,40)" d="M0,0L0,-6"></path> + <path transform="translate(578.6206896551723,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">Jan 1</tspan><tspan x="0" dy="1em">12 AM</tspan></text> + <text transform="translate(82.06896551724138,40)">3 AM</text> + <text transform="translate(144.13793103448276,40)">6 AM</text> + <text transform="translate(206.20689655172416,40)">9 AM</text> + <text transform="translate(268.2758620689655,40)">12 PM</text> + <text transform="translate(330.3448275862069,40)">3 PM</text> + <text transform="translate(392.4137931034483,40)">6 PM</text> + <text transform="translate(454.48275862068965,40)">9 PM</text> + <text transform="translate(516.551724137931,40)"><tspan x="0" y="-1em">Jan 2</tspan><tspan x="0" dy="1em">12 AM</tspan></text> + <text transform="translate(578.6206896551723,40)">3 AM</text> + </g> + </svg></g> + <g transform="translate(0,780)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="95" x2="95" y1="40" y2="59"></line> + <line x1="170" x2="170" y1="40" y2="59"></line> + <line x1="245" x2="245" y1="40" y2="59"></line> + <line x1="320" x2="320" y1="40" y2="59"></line> + <line x1="395" x2="395" y1="40" y2="59"></line> + <line x1="470" x2="470" y1="40" y2="59"></line> + <line x1="545" x2="545" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(95,40)" d="M0,0L0,-6"></path> + <path transform="translate(170,40)" d="M0,0L0,-6"></path> + <path transform="translate(245,40)" d="M0,0L0,-6"></path> + <path transform="translate(320,40)" d="M0,0L0,-6"></path> + <path transform="translate(395,40)" d="M0,0L0,-6"></path> + <path transform="translate(470,40)" d="M0,0L0,-6"></path> + <path transform="translate(545,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">Jan 1</tspan><tspan x="0" dy="1em">12 AM</tspan></text> + <text transform="translate(95,40)">6 AM</text> + <text transform="translate(170,40)">12 PM</text> + <text transform="translate(245,40)">6 PM</text> + <text transform="translate(320,40)"><tspan x="0" y="-1em">Jan 2</tspan><tspan x="0" dy="1em">12 AM</tspan></text> + <text transform="translate(395,40)">6 AM</text> + <text transform="translate(470,40)">12 PM</text> + <text transform="translate(545,40)">6 PM</text> + <text transform="translate(620,40)"><tspan x="0" y="-1em">Jan 3</tspan><tspan x="0" dy="1em">12 AM</tspan></text> + </g> + </svg></g> + <g transform="translate(0,840)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="95" x2="95" y1="40" y2="59"></line> + <line x1="170" x2="170" y1="40" y2="59"></line> + <line x1="245" x2="245" y1="40" y2="59"></line> + <line x1="320" x2="320" y1="40" y2="59"></line> + <line x1="395" x2="395" y1="40" y2="59"></line> + <line x1="470" x2="470" y1="40" y2="59"></line> + <line x1="545" x2="545" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(95,40)" d="M0,0L0,-6"></path> + <path transform="translate(170,40)" d="M0,0L0,-6"></path> + <path transform="translate(245,40)" d="M0,0L0,-6"></path> + <path transform="translate(320,40)" d="M0,0L0,-6"></path> + <path transform="translate(395,40)" d="M0,0L0,-6"></path> + <path transform="translate(470,40)" d="M0,0L0,-6"></path> + <path transform="translate(545,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">Jan 1</tspan><tspan x="0" dy="1em">12 AM</tspan></text> + <text transform="translate(95,40)">12 PM</text> + <text transform="translate(170,40)"><tspan x="0" y="-1em">Jan 2</tspan><tspan x="0" dy="1em">12 AM</tspan></text> + <text transform="translate(245,40)">12 PM</text> + <text transform="translate(320,40)"><tspan x="0" y="-1em">Jan 3</tspan><tspan x="0" dy="1em">12 AM</tspan></text> + <text transform="translate(395,40)">12 PM</text> + <text transform="translate(470,40)"><tspan x="0" y="-1em">Jan 4</tspan><tspan x="0" dy="1em">12 AM</tspan></text> + <text transform="translate(545,40)">12 PM</text> + <text transform="translate(620,40)"><tspan x="0" y="-1em">Jan 5</tspan><tspan x="0" dy="1em">12 AM</tspan></text> + </g> + </svg></g> + <g transform="translate(0,900)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="120" x2="120" y1="40" y2="59"></line> + <line x1="220" x2="220" y1="40" y2="59"></line> + <line x1="320" x2="320" y1="40" y2="59"></line> + <line x1="420" x2="420" y1="40" y2="59"></line> + <line x1="520.0000000000001" x2="520.0000000000001" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(120,40)" d="M0,0L0,-6"></path> + <path transform="translate(220,40)" d="M0,0L0,-6"></path> + <path transform="translate(320,40)" d="M0,0L0,-6"></path> + <path transform="translate(420,40)" d="M0,0L0,-6"></path> + <path transform="translate(520.0000000000001,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">Jan</tspan><tspan x="0" dy="1em">5</tspan></text> + <text transform="translate(120,40)">6</text> + <text transform="translate(220,40)">7</text> + <text transform="translate(320,40)">8</text> + <text transform="translate(420,40)">9</text> + <text transform="translate(520.0000000000001,40)">10</text> + <text transform="translate(620,40)">11</text> + </g> + </svg></g> + <g transform="translate(0,960)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="80" x2="80" y1="40" y2="59"></line> + <line x1="140" x2="140" y1="40" y2="59"></line> + <line x1="200" x2="200" y1="40" y2="59"></line> + <line x1="260" x2="260" y1="40" y2="59"></line> + <line x1="320" x2="320" y1="40" y2="59"></line> + <line x1="380" x2="380" y1="40" y2="59"></line> + <line x1="440" x2="440" y1="40" y2="59"></line> + <line x1="500" x2="500" y1="40" y2="59"></line> + <line x1="560" x2="560" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(80,40)" d="M0,0L0,-6"></path> + <path transform="translate(140,40)" d="M0,0L0,-6"></path> + <path transform="translate(200,40)" d="M0,0L0,-6"></path> + <path transform="translate(260,40)" d="M0,0L0,-6"></path> + <path transform="translate(320,40)" d="M0,0L0,-6"></path> + <path transform="translate(380,40)" d="M0,0L0,-6"></path> + <path transform="translate(440,40)" d="M0,0L0,-6"></path> + <path transform="translate(500,40)" d="M0,0L0,-6"></path> + <path transform="translate(560,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">Jan</tspan><tspan x="0" dy="1em">1</tspan></text> + <text transform="translate(80,40)">2</text> + <text transform="translate(140,40)">3</text> + <text transform="translate(200,40)">4</text> + <text transform="translate(260,40)">5</text> + <text transform="translate(320,40)">6</text> + <text transform="translate(380,40)">7</text> + <text transform="translate(440,40)">8</text> + <text transform="translate(500,40)">9</text> + <text transform="translate(560,40)">10</text> + <text transform="translate(620,40)">11</text> + </g> + </svg></g> + <g transform="translate(0,1020)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="74.54545454545455" x2="74.54545454545455" y1="40" y2="59"></line> + <line x1="129.0909090909091" x2="129.0909090909091" y1="40" y2="59"></line> + <line x1="183.63636363636363" x2="183.63636363636363" y1="40" y2="59"></line> + <line x1="238.1818181818182" x2="238.1818181818182" y1="40" y2="59"></line> + <line x1="292.72727272727275" x2="292.72727272727275" y1="40" y2="59"></line> + <line x1="347.2727272727272" x2="347.2727272727272" y1="40" y2="59"></line> + <line x1="401.8181818181818" x2="401.8181818181818" y1="40" y2="59"></line> + <line x1="456.3636363636364" x2="456.3636363636364" y1="40" y2="59"></line> + <line x1="510.90909090909093" x2="510.90909090909093" y1="40" y2="59"></line> + <line x1="565.4545454545455" x2="565.4545454545455" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(74.54545454545455,40)" d="M0,0L0,-6"></path> + <path transform="translate(129.0909090909091,40)" d="M0,0L0,-6"></path> + <path transform="translate(183.63636363636363,40)" d="M0,0L0,-6"></path> + <path transform="translate(238.1818181818182,40)" d="M0,0L0,-6"></path> + <path transform="translate(292.72727272727275,40)" d="M0,0L0,-6"></path> + <path transform="translate(347.2727272727272,40)" d="M0,0L0,-6"></path> + <path transform="translate(401.8181818181818,40)" d="M0,0L0,-6"></path> + <path transform="translate(456.3636363636364,40)" d="M0,0L0,-6"></path> + <path transform="translate(510.90909090909093,40)" d="M0,0L0,-6"></path> + <path transform="translate(565.4545454545455,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">Jan</tspan><tspan x="0" dy="1em">1</tspan></text> + <text transform="translate(74.54545454545455,40)">3</text> + <text transform="translate(129.0909090909091,40)">5</text> + <text transform="translate(183.63636363636363,40)">7</text> + <text transform="translate(238.1818181818182,40)">9</text> + <text transform="translate(292.72727272727275,40)">11</text> + <text transform="translate(347.2727272727272,40)">13</text> + <text transform="translate(401.8181818181818,40)">15</text> + <text transform="translate(456.3636363636364,40)">17</text> + <text transform="translate(510.90909090909093,40)">19</text> + <text transform="translate(565.4545454545455,40)">21</text> + <text transform="translate(620,40)">23</text> + </g> + </svg></g> + <g transform="translate(0,1080)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="64.44444444444444" x2="64.44444444444444" y1="40" y2="59"></line> + <line x1="108.88888888888889" x2="108.88888888888889" y1="40" y2="59"></line> + <line x1="153.33333333333331" x2="153.33333333333331" y1="40" y2="59"></line> + <line x1="197.77777777777777" x2="197.77777777777777" y1="40" y2="59"></line> + <line x1="242.2222222222222" x2="242.2222222222222" y1="40" y2="59"></line> + <line x1="286.66666666666663" x2="286.66666666666663" y1="40" y2="59"></line> + <line x1="331.1111111111111" x2="331.1111111111111" y1="40" y2="59"></line> + <line x1="375.55555555555554" x2="375.55555555555554" y1="40" y2="59"></line> + <line x1="420" x2="420" y1="40" y2="59"></line> + <line x1="464.4444444444444" x2="464.4444444444444" y1="40" y2="59"></line> + <line x1="508.88888888888886" x2="508.88888888888886" y1="40" y2="59"></line> + <line x1="553.3333333333333" x2="553.3333333333333" y1="40" y2="59"></line> + <line x1="597.7777777777777" x2="597.7777777777777" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(64.44444444444444,40)" d="M0,0L0,-6"></path> + <path transform="translate(108.88888888888889,40)" d="M0,0L0,-6"></path> + <path transform="translate(153.33333333333331,40)" d="M0,0L0,-6"></path> + <path transform="translate(197.77777777777777,40)" d="M0,0L0,-6"></path> + <path transform="translate(242.2222222222222,40)" d="M0,0L0,-6"></path> + <path transform="translate(286.66666666666663,40)" d="M0,0L0,-6"></path> + <path transform="translate(331.1111111111111,40)" d="M0,0L0,-6"></path> + <path transform="translate(375.55555555555554,40)" d="M0,0L0,-6"></path> + <path transform="translate(420,40)" d="M0,0L0,-6"></path> + <path transform="translate(464.4444444444444,40)" d="M0,0L0,-6"></path> + <path transform="translate(508.88888888888886,40)" d="M0,0L0,-6"></path> + <path transform="translate(553.3333333333333,40)" d="M0,0L0,-6"></path> + <path transform="translate(597.7777777777777,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">Jan</tspan><tspan x="0" dy="1em">17</tspan></text> + <text transform="translate(64.44444444444444,40)">19</text> + <text transform="translate(108.88888888888889,40)">21</text> + <text transform="translate(153.33333333333331,40)">23</text> + <text transform="translate(197.77777777777777,40)">25</text> + <text transform="translate(242.2222222222222,40)">27</text> + <text transform="translate(286.66666666666663,40)">29</text> + <text transform="translate(331.1111111111111,40)">31</text> + <text transform="translate(375.55555555555554,40)"><tspan x="0" y="-1em">Feb</tspan><tspan x="0" dy="1em">2</tspan></text> + <text transform="translate(420,40)">4</text> + <text transform="translate(464.4444444444444,40)">6</text> + <text transform="translate(508.88888888888886,40)">8</text> + <text transform="translate(553.3333333333333,40)">10</text> + <text transform="translate(597.7777777777777,40)">12</text> + </g> + </svg></g> + <g transform="translate(0,1140)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="66.66666666666667" x2="66.66666666666667" y1="40" y2="59"></line> + <line x1="113.33333333333333" x2="113.33333333333333" y1="40" y2="59"></line> + <line x1="160" x2="160" y1="40" y2="59"></line> + <line x1="206.66666666666666" x2="206.66666666666666" y1="40" y2="59"></line> + <line x1="253.33333333333334" x2="253.33333333333334" y1="40" y2="59"></line> + <line x1="300" x2="300" y1="40" y2="59"></line> + <line x1="346.66666666666663" x2="346.66666666666663" y1="40" y2="59"></line> + <line x1="393.3333333333333" x2="393.3333333333333" y1="40" y2="59"></line> + <line x1="440" x2="440" y1="40" y2="59"></line> + <line x1="486.6666666666667" x2="486.6666666666667" y1="40" y2="59"></line> + <line x1="533.3333333333334" x2="533.3333333333334" y1="40" y2="59"></line> + <line x1="580" x2="580" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(66.66666666666667,40)" d="M0,0L0,-6"></path> + <path transform="translate(113.33333333333333,40)" d="M0,0L0,-6"></path> + <path transform="translate(160,40)" d="M0,0L0,-6"></path> + <path transform="translate(206.66666666666666,40)" d="M0,0L0,-6"></path> + <path transform="translate(253.33333333333334,40)" d="M0,0L0,-6"></path> + <path transform="translate(300,40)" d="M0,0L0,-6"></path> + <path transform="translate(346.66666666666663,40)" d="M0,0L0,-6"></path> + <path transform="translate(393.3333333333333,40)" d="M0,0L0,-6"></path> + <path transform="translate(440,40)" d="M0,0L0,-6"></path> + <path transform="translate(486.6666666666667,40)" d="M0,0L0,-6"></path> + <path transform="translate(533.3333333333334,40)" d="M0,0L0,-6"></path> + <path transform="translate(580,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">Jan</tspan><tspan x="0" dy="1em">1</tspan></text> + <text transform="translate(66.66666666666667,40)">8</text> + <text transform="translate(113.33333333333333,40)">15</text> + <text transform="translate(160,40)">22</text> + <text transform="translate(206.66666666666666,40)">29</text> + <text transform="translate(253.33333333333334,40)"><tspan x="0" y="-1em">Feb</tspan><tspan x="0" dy="1em">5</tspan></text> + <text transform="translate(300,40)">12</text> + <text transform="translate(346.66666666666663,40)">19</text> + <text transform="translate(393.3333333333333,40)">26</text> + <text transform="translate(440,40)"><tspan x="0" y="-1em">Mar</tspan><tspan x="0" dy="1em">5</tspan></text> + <text transform="translate(486.6666666666667,40)">12</text> + <text transform="translate(533.3333333333334,40)">19</text> + <text transform="translate(580,40)">26</text> + </g> + </svg></g> + <g transform="translate(0,1200)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="70.95890410958904" x2="70.95890410958904" y1="40" y2="59"></line> + <line x1="116.98630136986301" x2="116.98630136986301" y1="40" y2="59"></line> + <line x1="167.94520547945206" x2="167.94520547945206" y1="40" y2="59"></line> + <line x1="217.2602739726027" x2="217.2602739726027" y1="40" y2="59"></line> + <line x1="268.2191780821918" x2="268.2191780821918" y1="40" y2="59"></line> + <line x1="317.5342465753425" x2="317.5342465753425" y1="40" y2="59"></line> + <line x1="368.49315068493144" x2="368.49315068493144" y1="40" y2="59"></line> + <line x1="419.45205479452056" x2="419.45205479452056" y1="40" y2="59"></line> + <line x1="468.7671232876712" x2="468.7671232876712" y1="40" y2="59"></line> + <line x1="519.7260273972603" x2="519.7260273972603" y1="40" y2="59"></line> + <line x1="569.0410958904109" x2="569.0410958904109" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(70.95890410958904,40)" d="M0,0L0,-6"></path> + <path transform="translate(116.98630136986301,40)" d="M0,0L0,-6"></path> + <path transform="translate(167.94520547945206,40)" d="M0,0L0,-6"></path> + <path transform="translate(217.2602739726027,40)" d="M0,0L0,-6"></path> + <path transform="translate(268.2191780821918,40)" d="M0,0L0,-6"></path> + <path transform="translate(317.5342465753425,40)" d="M0,0L0,-6"></path> + <path transform="translate(368.49315068493144,40)" d="M0,0L0,-6"></path> + <path transform="translate(419.45205479452056,40)" d="M0,0L0,-6"></path> + <path transform="translate(468.7671232876712,40)" d="M0,0L0,-6"></path> + <path transform="translate(519.7260273972603,40)" d="M0,0L0,-6"></path> + <path transform="translate(569.0410958904109,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">2023</tspan><tspan x="0" dy="1em">Jan</tspan></text> + <text transform="translate(70.95890410958904,40)">Feb</text> + <text transform="translate(116.98630136986301,40)">Mar</text> + <text transform="translate(167.94520547945206,40)">Apr</text> + <text transform="translate(217.2602739726027,40)">May</text> + <text transform="translate(268.2191780821918,40)">Jun</text> + <text transform="translate(317.5342465753425,40)">Jul</text> + <text transform="translate(368.49315068493144,40)">Aug</text> + <text transform="translate(419.45205479452056,40)">Sep</text> + <text transform="translate(468.7671232876712,40)">Oct</text> + <text transform="translate(519.7260273972603,40)">Nov</text> + <text transform="translate(569.0410958904109,40)">Dec</text> + <text transform="translate(620,40)"><tspan x="0" y="-1em">2024</tspan><tspan x="0" dy="1em">Jan</tspan></text> + </g> + </svg></g> + <g transform="translate(0,1260)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="69.18032786885246" x2="69.18032786885246" y1="40" y2="59"></line> + <line x1="120" x2="120" y1="40" y2="59"></line> + <line x1="169.18032786885246" x2="169.18032786885246" y1="40" y2="59"></line> + <line x1="220" x2="220" y1="40" y2="59"></line> + <line x1="270.81967213114757" x2="270.81967213114757" y1="40" y2="59"></line> + <line x1="320" x2="320" y1="40" y2="59"></line> + <line x1="370.81967213114757" x2="370.81967213114757" y1="40" y2="59"></line> + <line x1="420" x2="420" y1="40" y2="59"></line> + <line x1="470.8196721311475" x2="470.8196721311475" y1="40" y2="59"></line> + <line x1="521.6393442622951" x2="521.6393442622951" y1="40" y2="59"></line> + <line x1="569.1803278688525" x2="569.1803278688525" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(69.18032786885246,40)" d="M0,0L0,-6"></path> + <path transform="translate(120,40)" d="M0,0L0,-6"></path> + <path transform="translate(169.18032786885246,40)" d="M0,0L0,-6"></path> + <path transform="translate(220,40)" d="M0,0L0,-6"></path> + <path transform="translate(270.81967213114757,40)" d="M0,0L0,-6"></path> + <path transform="translate(320,40)" d="M0,0L0,-6"></path> + <path transform="translate(370.81967213114757,40)" d="M0,0L0,-6"></path> + <path transform="translate(420,40)" d="M0,0L0,-6"></path> + <path transform="translate(470.8196721311475,40)" d="M0,0L0,-6"></path> + <path transform="translate(521.6393442622951,40)" d="M0,0L0,-6"></path> + <path transform="translate(569.1803278688525,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">2023</tspan><tspan x="0" dy="1em">Apr</tspan></text> + <text transform="translate(69.18032786885246,40)">May</text> + <text transform="translate(120,40)">Jun</text> + <text transform="translate(169.18032786885246,40)">Jul</text> + <text transform="translate(220,40)">Aug</text> + <text transform="translate(270.81967213114757,40)">Sep</text> + <text transform="translate(320,40)">Oct</text> + <text transform="translate(370.81967213114757,40)">Nov</text> + <text transform="translate(420,40)">Dec</text> + <text transform="translate(470.8196721311475,40)"><tspan x="0" y="-1em">2024</tspan><tspan x="0" dy="1em">Jan</tspan></text> + <text transform="translate(521.6393442622951,40)">Feb</text> + <text transform="translate(569.1803278688525,40)">Mar</text> + <text transform="translate(620,40)">Apr</text> + </g> + </svg></g> + <g transform="translate(0,1320)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="69.27007299270073" x2="69.27007299270073" y1="40" y2="59"></line> + <line x1="119.08759124087592" x2="119.08759124087592" y1="40" y2="59"></line> + <line x1="169.45255474452554" x2="169.45255474452554" y1="40" y2="59"></line> + <line x1="219.8175182481752" x2="219.8175182481752" y1="40" y2="59"></line> + <line x1="269.6350364963504" x2="269.6350364963504" y1="40" y2="59"></line> + <line x1="319.4525547445255" x2="319.4525547445255" y1="40" y2="59"></line> + <line x1="369.8175182481752" x2="369.8175182481752" y1="40" y2="59"></line> + <line x1="420.1824817518248" x2="420.1824817518248" y1="40" y2="59"></line> + <line x1="469.4525547445255" x2="469.4525547445255" y1="40" y2="59"></line> + <line x1="519.2700729927008" x2="519.2700729927008" y1="40" y2="59"></line> + <line x1="569.6350364963504" x2="569.6350364963504" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(69.27007299270073,40)" d="M0,0L0,-6"></path> + <path transform="translate(119.08759124087592,40)" d="M0,0L0,-6"></path> + <path transform="translate(169.45255474452554,40)" d="M0,0L0,-6"></path> + <path transform="translate(219.8175182481752,40)" d="M0,0L0,-6"></path> + <path transform="translate(269.6350364963504,40)" d="M0,0L0,-6"></path> + <path transform="translate(319.4525547445255,40)" d="M0,0L0,-6"></path> + <path transform="translate(369.8175182481752,40)" d="M0,0L0,-6"></path> + <path transform="translate(420.1824817518248,40)" d="M0,0L0,-6"></path> + <path transform="translate(469.4525547445255,40)" d="M0,0L0,-6"></path> + <path transform="translate(519.2700729927008,40)" d="M0,0L0,-6"></path> + <path transform="translate(569.6350364963504,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)"><tspan x="0" y="-1em">2023</tspan><tspan x="0" dy="1em">Jan</tspan></text> + <text transform="translate(69.27007299270073,40)">Apr</text> + <text transform="translate(119.08759124087592,40)">Jul</text> + <text transform="translate(169.45255474452554,40)">Oct</text> + <text transform="translate(219.8175182481752,40)"><tspan x="0" y="-1em">2024</tspan><tspan x="0" dy="1em">Jan</tspan></text> + <text transform="translate(269.6350364963504,40)">Apr</text> + <text transform="translate(319.4525547445255,40)">Jul</text> + <text transform="translate(369.8175182481752,40)">Oct</text> + <text transform="translate(420.1824817518248,40)"><tspan x="0" y="-1em">2025</tspan><tspan x="0" dy="1em">Jan</tspan></text> + <text transform="translate(469.4525547445255,40)">Apr</text> + <text transform="translate(519.2700729927008,40)">Jul</text> + <text transform="translate(569.6350364963504,40)">Oct</text> + <text transform="translate(620,40)"><tspan x="0" y="-1em">2026</tspan><tspan x="0" dy="1em">Jan</tspan></text> + </g> + </svg></g> + <g transform="translate(0,1380)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="79.95072543115248" x2="79.95072543115248" y1="40" y2="59"></line> + <line x1="140.06569942513002" x2="140.06569942513002" y1="40" y2="59"></line> + <line x1="200.01642485628253" x2="200.01642485628253" y1="40" y2="59"></line> + <line x1="259.967150287435" x2="259.967150287435" y1="40" y2="59"></line> + <line x1="319.9178757185874" x2="319.9178757185874" y1="40" y2="59"></line> + <line x1="380.03284971256505" x2="380.03284971256505" y1="40" y2="59"></line> + <line x1="439.9835751437175" x2="439.9835751437175" y1="40" y2="59"></line> + <line x1="499.93430057487" x2="499.93430057487" y1="40" y2="59"></line> + <line x1="559.8850260060225" x2="559.8850260060225" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(79.95072543115248,40)" d="M0,0L0,-6"></path> + <path transform="translate(140.06569942513002,40)" d="M0,0L0,-6"></path> + <path transform="translate(200.01642485628253,40)" d="M0,0L0,-6"></path> + <path transform="translate(259.967150287435,40)" d="M0,0L0,-6"></path> + <path transform="translate(319.9178757185874,40)" d="M0,0L0,-6"></path> + <path transform="translate(380.03284971256505,40)" d="M0,0L0,-6"></path> + <path transform="translate(439.9835751437175,40)" d="M0,0L0,-6"></path> + <path transform="translate(499.93430057487,40)" d="M0,0L0,-6"></path> + <path transform="translate(559.8850260060225,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)">2023</text> + <text transform="translate(79.95072543115248,40)">2024</text> + <text transform="translate(140.06569942513002,40)">2025</text> + <text transform="translate(200.01642485628253,40)">2026</text> + <text transform="translate(259.967150287435,40)">2027</text> + <text transform="translate(319.9178757185874,40)">2028</text> + <text transform="translate(380.03284971256505,40)">2029</text> + <text transform="translate(439.9835751437175,40)">2030</text> + <text transform="translate(499.93430057487,40)">2031</text> + <text transform="translate(559.8850260060225,40)">2032</text> + <text transform="translate(620,40)">2033</text> + </g> + </svg></g> + <g transform="translate(0,1440)"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60"> + <style> + .plot { + display: block; + background: white; + height: auto; + height: intrinsic; + max-width: 100%; + } + + .plot text, + .plot tspan { + white-space: pre; + } + </style> + <g aria-label="x-grid" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"> + <line x1="20" x2="20" y1="40" y2="59"></line> + <line x1="80.02299731697968" x2="80.02299731697968" y1="40" y2="59"></line> + <line x1="140.01314132398838" x2="140.01314132398838" y1="40" y2="59"></line> + <line x1="200.00328533099713" x2="200.00328533099713" y1="40" y2="59"></line> + <line x1="259.9934293380058" x2="259.9934293380058" y1="40" y2="59"></line> + <line x1="320.01642665498554" x2="320.01642665498554" y1="40" y2="59"></line> + <line x1="380.00657066199426" x2="380.00657066199426" y1="40" y2="59"></line> + <line x1="439.9967146690029" x2="439.9967146690029" y1="40" y2="59"></line> + <line x1="499.9868586760116" x2="499.9868586760116" y1="40" y2="59"></line> + <line x1="560.0098559929913" x2="560.0098559929913" y1="40" y2="59"></line> + <line x1="620" x2="620" y1="40" y2="59"></line> + </g> + <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,1)"> + <path transform="translate(20,40)" d="M0,0L0,-6"></path> + <path transform="translate(80.02299731697968,40)" d="M0,0L0,-6"></path> + <path transform="translate(140.01314132398838,40)" d="M0,0L0,-6"></path> + <path transform="translate(200.00328533099713,40)" d="M0,0L0,-6"></path> + <path transform="translate(259.9934293380058,40)" d="M0,0L0,-6"></path> + <path transform="translate(320.01642665498554,40)" d="M0,0L0,-6"></path> + <path transform="translate(380.00657066199426,40)" d="M0,0L0,-6"></path> + <path transform="translate(439.9967146690029,40)" d="M0,0L0,-6"></path> + <path transform="translate(499.9868586760116,40)" d="M0,0L0,-6"></path> + <path transform="translate(560.0098559929913,40)" d="M0,0L0,-6"></path> + <path transform="translate(620,40)" d="M0,0L0,-6"></path> + </g> + <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,-8.5)"> + <text transform="translate(20,40)">2020</text> + <text transform="translate(80.02299731697968,40)">2025</text> + <text transform="translate(140.01314132398838,40)">2030</text> + <text transform="translate(200.00328533099713,40)">2035</text> + <text transform="translate(259.9934293380058,40)">2040</text> + <text transform="translate(320.01642665498554,40)">2045</text> + <text transform="translate(380.00657066199426,40)">2050</text> + <text transform="translate(439.9967146690029,40)">2055</text> + <text transform="translate(499.9868586760116,40)">2060</text> + <text transform="translate(560.0098559929913,40)">2065</text> + <text transform="translate(620,40)">2070</text> + </g> + </svg></g> +</svg> \ No newline at end of file diff --git a/test/output/trafficHorizon.html b/test/output/trafficHorizon.html index bb11d9b198..dc2d132b0f 100644 --- a/test/output/trafficHorizon.html +++ b/test/output/trafficHorizon.html @@ -68,17 +68,17 @@ </g> <g aria-label="x-axis tick label" transform="translate(0.5,-8.5)"> <g font-variant="tabular-nums" transform="translate(0,4)"> - <text transform="translate(20,30)">Mon 04</text> + <text transform="translate(20,30)"><tspan x="0" y="-1em">Jan 4</tspan><tspan x="0" dy="1em">12 AM</tspan></text> <text transform="translate(97.2027972027972,30)">12 PM</text> - <text transform="translate(174.4055944055944,30)">Tue 05</text> + <text transform="translate(174.4055944055944,30)"><tspan x="0" y="-1em">Jan 5</tspan><tspan x="0" dy="1em">12 AM</tspan></text> <text transform="translate(251.60839160839163,30)">12 PM</text> - <text transform="translate(328.8111888111888,30)">Wed 06</text> + <text transform="translate(328.8111888111888,30)"><tspan x="0" y="-1em">Jan 6</tspan><tspan x="0" dy="1em">12 AM</tspan></text> <text transform="translate(406.013986013986,30)">12 PM</text> - <text transform="translate(483.21678321678326,30)">Thu 07</text> + <text transform="translate(483.21678321678326,30)"><tspan x="0" y="-1em">Jan 7</tspan><tspan x="0" dy="1em">12 AM</tspan></text> <text transform="translate(560.4195804195804,30)">12 PM</text> - <text transform="translate(637.6223776223776,30)">Fri 08</text> + <text transform="translate(637.6223776223776,30)"><tspan x="0" y="-1em">Jan 8</tspan><tspan x="0" dy="1em">12 AM</tspan></text> <text transform="translate(714.8251748251747,30)">12 PM</text> - <text transform="translate(792.027972027972,30)">Sat 09</text> + <text transform="translate(792.027972027972,30)"><tspan x="0" y="-1em">Jan 9</tspan><tspan x="0" dy="1em">12 AM</tspan></text> <text transform="translate(869.2307692307693,30)">12 PM</text> </g> </g> diff --git a/test/output/travelersCovidDrop.svg b/test/output/travelersCovidDrop.svg index bb821a9386..bb5c75e408 100644 --- a/test/output/travelersCovidDrop.svg +++ b/test/output/travelersCovidDrop.svg @@ -65,16 +65,16 @@ <path transform="translate(867.7591973244148,370)" d="M0,0L0,6"></path> </g> <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> - <text y="0.71em" transform="translate(40,370)">March</text> - <text y="0.71em" transform="translate(133.31103678929765,370)">April</text> + <text transform="translate(40,370)"><tspan x="0" y="0.71em">Mar</tspan><tspan x="0" dy="1em">2020</tspan></text> + <text y="0.71em" transform="translate(133.31103678929765,370)">Apr</text> <text y="0.71em" transform="translate(223.61204013377926,370)">May</text> - <text y="0.71em" transform="translate(316.9230769230769,370)">June</text> - <text y="0.71em" transform="translate(407.2240802675585,370)">July</text> - <text y="0.71em" transform="translate(500.53511705685617,370)">August</text> - <text y="0.71em" transform="translate(593.8461538461538,370)">September</text> - <text y="0.71em" transform="translate(684.1471571906354,370)">October</text> - <text y="0.71em" transform="translate(777.4581939799331,370)">November</text> - <text y="0.71em" transform="translate(867.7591973244148,370)">December</text> + <text y="0.71em" transform="translate(316.9230769230769,370)">Jun</text> + <text y="0.71em" transform="translate(407.2240802675585,370)">Jul</text> + <text y="0.71em" transform="translate(500.53511705685617,370)">Aug</text> + <text y="0.71em" transform="translate(593.8461538461538,370)">Sep</text> + <text y="0.71em" transform="translate(684.1471571906354,370)">Oct</text> + <text y="0.71em" transform="translate(777.4581939799331,370)">Nov</text> + <text y="0.71em" transform="translate(867.7591973244148,370)">Dec</text> </g> <g aria-label="line" fill="none" stroke="currentColor" stroke-width="0.25" stroke-linejoin="round" stroke-linecap="round" transform="translate(0.5,0.5)"> <path d="M940,296.504L938.495,296.504L938.495,262.733L935.485,262.733L935.485,159.884L932.475,159.884L932.475,201.334L929.465,201.334L929.465,243.961L926.455,243.961L926.455,229.723L923.445,229.723L923.445,226.48L920.435,226.48L920.435,234.646L917.425,234.646L917.425,258.734L914.415,258.734L914.415,278.848L911.405,278.848L911.405,283.408L908.395,283.408L908.395,261.759L905.385,261.759L905.385,246.618L902.375,246.618L902.375,256.171L899.365,256.171L899.365,263.43L896.355,263.43L896.355,267.227L893.344,267.227L893.344,281.75L890.334,281.75L890.334,287.183L887.324,287.183L887.324,268.423L884.314,268.423L884.314,250.549L881.304,250.549L881.304,252.998L878.294,252.998L878.294,263.003L875.284,263.003L875.284,264.741L872.274,264.741L872.274,271.404L869.264,271.404L869.264,258.925L866.254,258.925L866.254,245.583L863.244,245.583L863.244,235.032L860.234,235.032L860.234,250.905L857.224,250.905L857.224,231.804L854.214,231.804L854.214,255.168L851.204,255.168L851.204,234.977L848.194,234.977L848.194,247.164L845.184,247.164L845.184,235.394L842.174,235.394L842.174,219.254L839.164,219.254L839.164,220.267L836.154,220.267L836.154,237.97L833.144,237.97L833.144,247.48L830.134,247.48L830.134,259.926L827.124,259.926L827.124,266.363L824.114,266.363L824.114,243.669L821.104,243.669L821.104,234.946L818.094,234.946L818.094,243.052L815.084,243.052L815.084,251.825L812.074,251.825L812.074,250.097L809.064,250.097L809.064,264.956L806.054,264.956L806.054,282.438L803.043,282.438L803.043,259.953L800.033,259.953L800.033,233.222L797.023,233.222L797.023,251.919L794.013,251.919L794.013,255.428L791.003,255.428L791.003,257.597L787.993,257.597L787.993,275.565L784.983,275.565L784.983,278.896L781.973,278.896L781.973,255.328L778.963,255.328L778.963,244.967L775.953,244.967L775.953,260.905L772.943,260.905L772.943,243.439L769.933,243.439L769.933,228.26L766.923,228.26L766.923,265.98L763.913,265.98L763.913,259.913L760.903,259.913L760.903,244.121L757.893,244.121L757.893,239.03L754.883,239.03L754.883,241.211L751.873,241.211L751.873,249.022L748.863,249.022L748.863,249.674L745.853,249.674L745.853,270.91L742.843,270.91L742.843,270.057L739.833,270.057L739.833,250.174L736.823,250.174L736.823,239.453L733.813,239.453L733.813,243.448L730.803,243.448L730.803,249.214L727.793,249.214L727.793,249.513L724.783,249.513L724.783,270.697L721.773,270.697L721.773,276.312L718.763,276.312L718.763,250.172L715.753,250.172L715.753,243.307L712.742,243.307L712.742,248.427L709.732,248.427L709.732,252.333L706.722,252.333L706.722,252.586L703.712,252.586L703.712,273.593L700.702,273.593L700.702,277.795L697.692,277.795L697.692,259.593L694.682,259.593L694.682,254.485L691.672,254.485L691.672,255.089L688.662,255.089L688.662,259.991L685.652,259.991L685.652,256.197L682.642,256.197L682.642,272.602L679.632,272.602L679.632,279.874L676.622,279.874L676.622,260.893L673.612,260.893L673.612,253.914L670.602,253.914L670.602,261.406L667.592,261.406L667.592,265.395L664.582,265.395L664.582,263.676L661.572,263.676L661.572,282.165L658.562,282.165L658.562,285.012L655.552,285.012L655.552,268.188L652.542,268.188L652.542,260.88L649.532,260.88L649.532,263.55L646.522,263.55L646.522,268.502L643.512,268.502L643.512,267.122L640.502,267.122L640.502,285.442L637.492,285.442L637.492,288.951L634.482,288.951L634.482,273.062L631.472,273.062L631.472,264.842L628.462,264.842L628.462,264.627L625.452,264.627L625.452,276.266L622.441,276.266L622.441,271.236L619.431,271.236L619.431,271.495L616.421,271.495L616.421,251.615L613.411,251.615L613.411,235.051L610.401,235.051L610.401,277.516L607.391,277.516L607.391,245.691L604.381,245.691L604.381,223.196L601.371,223.196L601.371,232.11L598.361,232.11L598.361,272.045L595.351,272.045L595.351,291.219L592.341,291.219L592.341,269.819L589.331,269.819L589.331,227.809L586.321,227.809L586.321,273.263L583.311,273.263L583.311,282.259L580.301,282.259L580.301,280.944L577.291,280.944L577.291,293.583L574.281,293.583L574.281,288.901L571.271,288.901L571.271,271.254L568.261,271.254L568.261,260.567L565.251,260.567L565.251,271.738L562.241,271.738L562.241,274.71L559.231,274.71L559.231,272.459L556.221,272.459L556.221,290.825L553.211,290.825L553.211,291.74L550.201,291.74L550.201,274.208L547.191,274.208L547.191,261.927L544.181,261.927L544.181,267.835L541.171,267.835L541.171,274.866L538.161,274.866L538.161,276.88L535.151,276.88L535.151,293.498L532.14,293.498L532.14,295.122L529.13,295.122L529.13,275.448L526.12,275.448L526.12,269.108L523.11,269.108L523.11,274.857L520.1,274.857L520.1,281.565L517.09,281.565L517.09,283.468L514.08,283.468L514.08,294.162L511.07,294.162L511.07,300.491L508.06,300.491L508.06,280.977L505.05,280.977L505.05,275.15L502.04,275.15L502.04,274.449L499.03,274.449L499.03,281.151L496.02,281.151L496.02,288.085L493.01,288.085L493.01,301.314L490,301.314L490,303.269L486.99,303.269L486.99,285.909L483.98,285.909L483.98,282.177L480.97,282.177L480.97,283.524L477.96,283.524L477.96,286.875L474.95,286.875L474.95,288.579L471.94,288.579L471.94,302.257L468.93,302.257L468.93,306.124L465.92,306.124L465.92,287.37L462.91,287.37L462.91,283.667L459.9,283.667L459.9,285.196L456.89,285.196L456.89,288.982L453.88,288.982L453.88,288.797L450.87,288.797L450.87,298.355L447.86,298.355L447.86,303.016L444.849,303.016L444.849,286.261L441.839,286.261L441.839,280.549L438.829,280.549L438.829,280.11L435.819,280.11L435.819,288.133L432.809,288.133L432.809,284.379L429.799,284.379L429.799,291.892L426.789,291.892L426.789,290.221L423.779,290.221L423.779,283.366L420.769,283.366L420.769,288.076L417.759,288.076L417.759,310.948L414.749,310.948L414.749,263.646L411.739,263.646L411.739,250.221L408.729,250.221L408.729,293.891L405.719,293.891L405.719,305.842L402.709,305.842L402.709,290.722L399.699,290.722L399.699,295.74L396.689,295.74L396.689,299.438L393.679,299.438L393.679,299.004L390.669,299.004L390.669,299.659L387.659,299.659L387.659,313.935L384.649,313.935L384.649,314.89L381.639,314.89L381.639,301.969L378.629,301.969L378.629,304.347L375.619,304.347L375.619,305.763L372.609,305.763L372.609,306.195L369.599,306.195L369.599,306.467L366.589,306.467L366.589,320.329L363.579,320.329L363.579,321.662L360.569,321.662L360.569,311.285L357.559,311.285L357.559,308.412L354.548,308.412L354.548,314.738L351.538,314.738L351.538,314.058L348.528,314.058L348.528,315.03L345.518,315.03L345.518,327.185L342.508,327.185L342.508,332.691L339.498,332.691L339.498,324.098L336.488,324.098L336.488,323.173L333.478,323.173L333.478,325.6L330.468,325.6L330.468,325.677L327.458,325.677L327.458,328.957L324.448,328.957L324.448,336.549L321.438,336.549L321.438,339.931L318.428,339.931L318.428,331.858L315.418,331.858L315.418,333.04L312.408,333.04L312.408,337.077L309.398,337.077L309.398,336.98L306.388,336.98L306.388,336.185L303.378,336.185L303.378,341.396L300.368,341.396L300.368,343.997L297.358,343.997L297.358,333.935L294.348,333.935L294.348,336.29L291.338,336.29L291.338,339.922L288.328,339.922L288.328,337.854L285.318,337.854L285.318,339.941L282.308,339.941L282.308,349.355L279.298,349.355L279.298,353.287L276.288,353.287L276.288,349.296L273.278,349.296L273.278,348.02L270.268,348.02L270.268,349.62L267.258,349.62L267.258,349.06L264.247,349.06L264.247,350.525L261.237,350.525L261.237,355.822L258.227,355.822L258.227,356.151L255.217,356.151L255.217,352.025L252.207,352.025L252.207,353.051L249.197,353.051L249.197,352.187L246.187,352.187L246.187,353.135L243.177,353.135L243.177,356.073L240.167,356.073L240.167,360.742L237.157,360.742L237.157,360.684L234.147,360.684L234.147,359.14L231.137,359.14L231.137,358.59L228.127,358.59L228.127,358.426L225.117,358.426L225.117,358.727L222.107,358.727L222.107,360.722L219.097,360.722L219.097,363.945L216.087,363.945L216.087,364.037L213.077,364.037L213.077,365.159L210.067,365.159L210.067,364.528L207.057,364.528L207.057,362.315L204.047,362.315L204.047,365.419L201.037,365.419L201.037,367.156L198.027,367.156L198.027,367.255L195.017,367.255L195.017,368.06L192.007,368.06L192.007,369.292L188.997,369.292L188.997,366.96L185.987,366.96L185.987,365.438L182.977,365.438L182.977,367.475L179.967,367.475L179.967,370L176.957,370L176.957,368.972L173.946,368.972L173.946,368.806L170.936,368.806L170.936,368.263L167.926,368.263L167.926,369.765L164.916,369.765L164.916,366.683L161.906,366.683L161.906,367.922L158.896,367.922L158.896,368.002L155.886,368.002L155.886,367.734L152.876,367.734L152.876,366.33L149.866,366.33L149.866,366.7L146.856,366.7L146.856,365.205L143.846,365.205L143.846,361.842L140.836,361.842L140.836,364.173L137.826,364.173L137.826,364.522L134.816,364.522L134.816,360.24L131.806,360.24L131.806,356.968L128.796,356.968L128.796,359.488L125.786,359.488L125.786,357.157L122.776,357.157L122.776,352.441L119.766,352.441L119.766,354.635L116.756,354.635L116.756,353.431L113.746,353.431L113.746,344.987L110.736,344.987L110.736,336.108L107.726,336.108L107.726,333.752L104.716,333.752L104.716,318.276L101.706,318.276L101.706,293.813L98.696,293.813L98.696,299.022L95.686,299.022L95.686,293.473L92.676,293.473L92.676,261.194L89.666,261.194L89.666,224.158L86.656,224.158L86.656,197.922L83.645,197.922L83.645,166.458L80.635,166.458L80.635,145.998L77.625,145.998L77.625,146.826L74.615,146.826L74.615,123.78L71.605,123.78L71.605,100.47L68.595,100.47L68.595,106.515L65.585,106.515L65.585,91.659L62.575,91.659L62.575,73.42L59.565,73.42L59.565,72.461L56.555,72.461L56.555,69.285L53.545,69.285L53.545,61.219L50.535,61.219L50.535,65.106L47.525,65.106L47.525,64.615L44.515,64.615L44.515,47.069L41.505,47.069L41.505,23.301L40,23.301"></path> diff --git a/test/output/travelersYearOverYear.svg b/test/output/travelersYearOverYear.svg index df259a5e29..8ec3bbcab5 100644 --- a/test/output/travelersYearOverYear.svg +++ b/test/output/travelersYearOverYear.svg @@ -83,16 +83,16 @@ <path transform="translate(573.4448160535118,370)" d="M0,0L0,6"></path> </g> <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"> - <text y="0.71em" transform="translate(40,370)">March</text> - <text y="0.71em" transform="translate(100.13377926421404,370)">April</text> + <text transform="translate(40,370)"><tspan x="0" y="0.71em">Mar</tspan><tspan x="0" dy="1em">2020</tspan></text> + <text y="0.71em" transform="translate(100.13377926421404,370)">Apr</text> <text y="0.71em" transform="translate(158.3277591973244,370)">May</text> - <text y="0.71em" transform="translate(218.46153846153845,370)">June</text> - <text y="0.71em" transform="translate(276.6555183946488,370)">July</text> - <text y="0.71em" transform="translate(336.7892976588629,370)">August</text> - <text y="0.71em" transform="translate(396.9230769230769,370)">September</text> - <text y="0.71em" transform="translate(455.1170568561873,370)">October</text> - <text y="0.71em" transform="translate(515.2508361204013,370)">November</text> - <text y="0.71em" transform="translate(573.4448160535118,370)">December</text> + <text y="0.71em" transform="translate(218.46153846153845,370)">Jun</text> + <text y="0.71em" transform="translate(276.6555183946488,370)">Jul</text> + <text y="0.71em" transform="translate(336.7892976588629,370)">Aug</text> + <text y="0.71em" transform="translate(396.9230769230769,370)">Sep</text> + <text y="0.71em" transform="translate(455.1170568561873,370)">Oct</text> + <text y="0.71em" transform="translate(515.2508361204013,370)">Nov</text> + <text y="0.71em" transform="translate(573.4448160535118,370)">Dec</text> </g> <g aria-label="rule" stroke="currentColor" transform="translate(0,0.5)"> <line x1="40" x2="620" y1="370" y2="370"></line> diff --git a/test/plots/covid-ihme-projected-deaths.ts b/test/plots/covid-ihme-projected-deaths.ts index 13657b047c..b8bfd20552 100644 --- a/test/plots/covid-ihme-projected-deaths.ts +++ b/test/plots/covid-ihme-projected-deaths.ts @@ -15,12 +15,6 @@ export async function covidIhmeProjectedDeaths() { }, marks: [ Plot.gridX(), - Plot.axisX({ - tickFormat: ( - (fm, fd) => (x, i) => - i === 0 || d3.utcDay.count(d3.utcMonth(x), x) < 7 ? `${fd(x)}\n${fm(x)}` : fd(x) - )(d3.utcFormat("%B"), d3.utcFormat("%d")) - }), Plot.areaY(data, { x: "date", y1: (d) => Math.max(1, d.lower), // avoid zero diff --git a/test/plots/index.ts b/test/plots/index.ts index 5bfd5b464f..bba13661b0 100644 --- a/test/plots/index.ts +++ b/test/plots/index.ts @@ -283,6 +283,7 @@ export * from "./stargazers.js"; export * from "./stocks-index.js"; export * from "./text-overflow.js"; export * from "./this-is-just-to-say.js"; +export * from "./time-axis.js"; export * from "./tip.js"; export * from "./traffic-horizon.js"; export * from "./travelers-covid-drop.js"; diff --git a/test/plots/time-axis.ts b/test/plots/time-axis.ts new file mode 100644 index 0000000000..264bda2175 --- /dev/null +++ b/test/plots/time-axis.ts @@ -0,0 +1,76 @@ +import * as Plot from "@observablehq/plot"; +import {svg} from "htl"; + +const domains = [ + [new Date("2023-01-01"), new Date("2023-01-01T00:00:01Z")], // 100ms + [new Date("2023-01-01"), new Date("2023-01-01T00:00:05Z")], // 500ms + [new Date("2023-01-01"), new Date("2023-01-01T00:00:10Z")], // 1s + [new Date("2023-01-01"), new Date("2023-01-01T00:01Z")], // 5s + [new Date("2023-01-01"), new Date("2023-01-01T00:02Z")], // 15s + [new Date("2023-01-01"), new Date("2023-01-01T00:04Z")], // 30s + [new Date("2023-01-01"), new Date("2023-01-01T00:10Z")], // 1m + [new Date("2023-01-01"), new Date("2023-01-01T01:00Z")], // 5m + [new Date("2023-01-01"), new Date("2023-01-01T02:30Z")], // 15m + [new Date("2023-01-01"), new Date("2023-01-01T05:00Z")], // 30m + [new Date("2023-01-01T10:00Z"), new Date("2023-01-01T15:00Z")], // 30m + [new Date("2023-01-01"), new Date("2023-01-01T10:00Z")], // 1h + [new Date("2023-01-01"), new Date("2023-01-02T05:00Z")], // 3h + [new Date("2023-01-01"), new Date("2023-01-03")], // 6h + [new Date("2023-01-01"), new Date("2023-01-05")], // 12h + [new Date("2023-01-05"), new Date("2023-01-11")], // 1d + [new Date("2023-01-01"), new Date("2023-01-11")], // 1d + [new Date("2023-01-01"), new Date("2023-01-23")], // 2d + [new Date("2023-01-17"), new Date("2023-02-13")], // 2d + [new Date("2023-01-01"), new Date("2023-04-01")], // 1w + [new Date("2023-01-01"), new Date("2024-01-01")], // 1m + [new Date("2023-04-01"), new Date("2024-04-01")], // 1m + [new Date("2023-01-01"), new Date("2026-01-01")], // 3m + [new Date("2023-01-01"), new Date("2033-01-01")], // 1y + [new Date("2020-01-01"), new Date("2070-01-01")] // 5y +]; + +export async function timeAxisBottom() { + return svg`<svg width=640 height=${domains.length * 60}>${domains.map( + (domain, i) => + svg`<g transform="translate(0,${i * 60})">${Plot.plot({ + marginBottom: 40, + height: 60, + x: {axis: "bottom", grid: true, type: "utc", domain} + })}` + )}`; +} + +export async function timeAxisTop() { + return svg`<svg width=640 height=${domains.length * 60}>${domains.map( + (domain, i) => + svg`<g transform="translate(0,${i * 60})">${Plot.plot({ + marginTop: 40, + height: 60, + x: {axis: "top", grid: true, type: "utc", domain} + })}` + )}`; +} + +export async function timeAxisLeft() { + const somedomains = domains.filter((d, i) => i % 3 === 0); + return svg`<svg height=400 width=${somedomains.length * 80}>${somedomains.map( + (domain, i) => + svg`<g transform="translate(${i * 80},0)">${Plot.plot({ + marginLeft: 60, + width: 80, + y: {grid: true, axis: "left", type: "utc", domain} + })}` + )}`; +} + +export async function timeAxisRight() { + const somedomains = domains.filter((d, i) => i % 3 === 0); + return svg`<svg height=400 width=${somedomains.length * 80}>${somedomains.map( + (domain, i) => + svg`<g transform="translate(${i * 80},0)">${Plot.plot({ + marginRight: 60, + width: 80, + y: {grid: true, axis: "right", type: "utc", domain} + })}` + )}`; +}