"})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onMouseEnter"}),": Shows a tooltip with complete content if the text content overflows and is truncated."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onMouseLeave"}),": Hides the tooltip if it is visible."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Root
"})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onMouseLeave"}),": Hides the callout if it is visible."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Legend
"})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onMouseOver"}),": Highlights the corresponding bar segment."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onMouseOut"}),": Unhighlights the corresponding bar segment."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onClick"}),": Highlights the corresponding bar segment if the legend is not already selected, otherwise unhighlights it."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"known-issues",children:"Known issues"}),"\n",(0,s.jsx)(t.h2,{id:"design-figma",children:"Design figma"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://www.figma.com/file/WOoCs0CmNYZhYl9xXeCGpi/Data-viz-(Archive)?type=design&node-id=21153-107763&mode=design&t=Ubd0AoDYFIsZ770q-4",children:"Horizontal stacked bar chart \u2013 Figma"})}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"learnings",children:"Learnings"}),"\n",(0,s.jsx)(t.h2,{id:"extensions",children:"Extensions"})]})}function d(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1968:(e,t,n)=>{n.d(t,{Z:()=>s});const s=n.p+"assets/images/stackedbarchart-test-coverage-60e746591e727d9b5a4aeadf84c995d5.png"},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>a});var s=n(7294);const i={},r=s.createContext(i);function a(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/5181bfc2.b1d31591.js b/assets/js/5181bfc2.b1d31591.js
new file mode 100644
index 0000000000..54cdef654d
--- /dev/null
+++ b/assets/js/5181bfc2.b1d31591.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdocsite=self.webpackChunkdocsite||[]).push([[7659],{5417:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>h});var s=n(5893),i=n(1151);const r={},a="Contributor guide: Stacked Bar Chart",o={id:"Charting-Concepts/StackedBarChart",title:"Contributor guide: Stacked Bar Chart",description:"A stacked bar chart is a type of data visualization that represents data using rectangular bars with lengths proportional to the values they represent. In a stacked bar chart, each bar is divided into segments, and the segments represent different categories or components. The segments are stacked next to each other to show the total value of each bar.",source:"@site/../../docs/Charting-Concepts/StackedBarChart.md",sourceDirName:"Charting-Concepts",slug:"/Charting-Concepts/StackedBarChart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/StackedBarChart",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Contributor guide: Sparkline Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/SparklineChart"},next:{title:"Contributor guide: Vertical Bar Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/VerticalBarChart"}},l={},h=[{value:"Use cases",id:"use-cases",level:2},{value:"Dev Design details",id:"dev-design-details",level:2},{value:"Mathematical/Geometrical concepts",id:"mathematicalgeometrical-concepts",level:2},{value:"Performance",id:"performance",level:2},{value:"Accessibility",id:"accessibility",level:2},{value:"Testing",id:"testing",level:2},{value:"Variants",id:"variants",level:2},{value:"Theming",id:"theming",level:2},{value:"Debugging",id:"debugging",level:2},{value:"Error scenarios",id:"error-scenarios",level:2},{value:"Localization aspects",id:"localization-aspects",level:2},{value:"Some notable PRs and their brief description",id:"some-notable-prs-and-their-brief-description",level:2},{value:"Future improvements",id:"future-improvements",level:2},{value:"Rendering details",id:"rendering-details",level:2},{value:"Interactions",id:"interactions",level:2},{value:"Known issues",id:"known-issues",level:2},{value:"Design figma",id:"design-figma",level:2},{value:"Learnings",id:"learnings",level:2},{value:"Extensions",id:"extensions",level:2}];function c(e){const t={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"contributor-guide-stacked-bar-chart",children:"Contributor guide: Stacked Bar Chart"}),"\n",(0,s.jsx)(t.p,{children:"A stacked bar chart is a type of data visualization that represents data using rectangular bars with lengths proportional to the values they represent. In a stacked bar chart, each bar is divided into segments, and the segments represent different categories or components. The segments are stacked next to each other to show the total value of each bar."}),"\n",(0,s.jsx)(t.h2,{id:"use-cases",children:"Use cases"}),"\n",(0,s.jsx)(t.p,{children:"Here are some common use cases for stacked bar charts:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Tracking Trends Over Time: Show changes in category proportions over time, allowing you to analyze how the distribution of data points evolves."}),"\n",(0,s.jsx)(t.li,{children:"Highlighting Part-to-Whole Relationships: Emphasize the contribution of individual categories to the whole, helping viewers understand the significance of each component."}),"\n",(0,s.jsx)(t.li,{children:"Visualizing Survey Data: Present the distribution of responses in a survey across various answer choices for different questions, providing insights into the survey's results."}),"\n",(0,s.jsx)(t.li,{children:"Resource Allocation: Show how resources, such as budget or time, are allocated among various tasks, projects, or departments within an organization."}),"\n",(0,s.jsx)(t.li,{children:"Market Share Analysis: Illustrate the market share of different companies or products within a specific industry, helping in competitive analysis."}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"dev-design-details",children:"Dev Design details"}),"\n",(0,s.jsx)(t.p,{children:"The stacked bar chart comprises the following components and subcomponents:"}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"StackedBarChart"}),": This is the main component responsible for rendering and managing subcomponents, such as bar titles, bars, bar labels, benchmark and triangle indicators, and other components. It handles user interactions and provides the overall functionality of the chart."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"FocusZone"}),": This component facilitates focus navigation within the chart. It allows users to navigate between focusable subcomponents, such as bars and bar segments, using the tab and arrow keys."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"FocusableTooltipText"}),": This component is used to render a bar title with a tooltip. It monitors the size of the container to detect if the text content overflows. If it does, it truncates the text with ellipsis and enables users to view the tooltip with complete content by focusing or hovering over the element."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Legends"}),": Legends are a unique list of strings that identify each bar segment in the chart. The Legends component renders a button for each legend, enabling users to highlight the corresponding segment by hovering over or selecting the legend."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Callout"}),": This component functions as an anchored tip, offering additional information about the bar segment that is currently hovered over or focused without blocking the user."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"ChartHoverCard"}),": This component acts as the body of the callout, presenting relevant details in a well-organized manner."]}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Benchmark & Target indicators"}),": Currently, these indicators are only supported by the stacked bar chart and not the multi-stacked bar chart. They act as visual reference points, making it easier for users to compare bar values to the benchmark/target value."]}),"\n",(0,s.jsx)(t.h2,{id:"mathematicalgeometrical-concepts",children:"Mathematical/Geometrical concepts"}),"\n",(0,s.jsx)(t.p,{children:"All calculations are performed in percentages to ensure the responsiveness of the chart."}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"First, the spacing between bar segments is determined as a percentage of the chart's width when the component mounts."}),"\n",(0,s.jsx)(t.li,{children:"The total width required for all the gaps between segments is calculated by multiplying the number of gaps (which is one less than the number of segments) by the width of a single gap, as calculated previously."}),"\n",(0,s.jsx)(t.li,{children:"The sum of widths for each segment is computed, ensuring that even segments with very small values remain visible and accessible to users. This sum is always equal to or greater than 100. In the absolute-scale variant of the multi-stacked bar chart, the width percentage of each segment is calculated against the total value of the longest bar."}),"\n",(0,s.jsx)(t.li,{children:"The total width required for rendering all the segments without any gaps is derived by subtracting the total width of all the gaps from 100. A scale factor is then obtained by dividing the real length (the total width of all segments without gaps) by the scale length (the sum of segment widths). This scale factor is used to calculate the precise width of each segment."}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"performance",children:"Performance"}),"\n",(0,s.jsx)(t.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,s.jsx)(t.p,{children:"The following subcomponents are accessible using a screen reader:"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Chart title "}),": It is already accessible to screen readers."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Chart data
"}),": It is already accessible to screen readers. Users can provide a custom accessible name or description for it using the chartDataAccessibilityData prop."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Chart
"}),": The following attributes provide an accessible label for the bar."]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"aria-label"})," = the bar title, which is referred to as chartTitle in the component"]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Bar segment "}),": The following attributes provide an accessible description for the bar segment."]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"role"}),' = "img"']}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"aria-label"}),' = "{legend}, {segmentValue}."']}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Users can customize this description using the xAxisCalloutData, yAxisCalloutData and callOutAccessibilityData props."}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Bar label "}),": The bar labels are limited to the absolute-scale variant of the multi-stacked bar chart. It is already accessible to screen readers, but the content doesn\u2019t convey complete information. The following attributes specify a different accessible name for the bar label."]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"role"}),' = "img"']}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"aria-label"}),' = "Total: {barTotalValue}"']}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"testing",children:"Testing"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"Test coverage report",src:n(1968).Z+"",width:"3679",height:"1505"})}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.a,{href:"/fluentui-charting-contrib/docs/Test%20Plans/StackedBarChart/ComponentTests",children:"StackedBarChart test plan"})}),"\n",(0,s.jsx)(t.h2,{id:"variants",children:"Variants"}),"\n",(0,s.jsx)(t.p,{children:"Here are the props available for customizing the stacked bar chart:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"data"}),": Use this prop to provide a series of bar data, including colors and values, to populate the chart."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"width"}),": Use this prop to set the width of the chart. If not provided, the chart will occupy the total available width."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"barHeight"}),": Use this prop to set the height of the bars in the chart. If not provided, a default bar height of 12px is used."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"hideDenominator"}),": Use this prop to hide the denominator of the chart data when it is displayed as a fraction/ratio. In the case of the multi-stacked bar chart, it takes an array of booleans with length equal to the number of bars in the chart, where each element determines whether to hide the denominator for the corresponding bar."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"benchmarkData"})," (Stacked): Use this prop to show a benchmark indicator/triangle above the bar."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"targetData"})," (Stacked): Use this prop to show a target indicator/triangle above the bar."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"hideNumberDisplay"})," (Stacked): Use this prop to hide the chart data from above the bar."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"ignoreFixStyle"})," (Stacked): By default, the chart data with a length of 1 is displayed as a number, and a length of 2 is displayed as a fraction/ratio. Use this prop to ignore the default display pattern and hide the chart data, irrespective of its length."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"hideRatio"})," (Multi-Stacked): This prop takes an array of booleans with length equal to the number of bars in the chart, where each element determines whether to hide the chart data for the corresponding bar."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"variant"})," (Multi-Stacked): Select the presentation style of the multi-stacked bar chart from the following options:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.em,{children:"MultiStackedBarChartVariant.PartToWhole"})," (default): In this variant, each bar represents a part or segment of a whole. It is excellent for showing how each category or segment contributes to the total or whole."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.em,{children:"MultiStackedBarChartVariant.AbsoluteScale"}),": In this variant, each bar's length is directly proportional to its absolute value or quantity. It is useful for comparing magnitudes across different categories."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"hideLabels"})," (Multi-Stacked): Use this prop to hide bar labels when using the AbsoluteScale variant."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.p,{children:["For more details, see ",(0,s.jsx)(t.a,{href:"https://developer.microsoft.com/en-us/fluentui#/controls/web/horizontalbarchart/stackedbarchart",children:"Fluent UI - Controls - React - HorizontalBarChart - Stacked"})," and ",(0,s.jsx)(t.a,{href:"https://developer.microsoft.com/en-us/fluentui#/controls/web/horizontalbarchart/multistackedbarchart",children:"Fluent UI - Controls - React - HorizontalBarChart - Multi Stacked"})]}),"\n",(0,s.jsx)(t.h2,{id:"theming",children:"Theming"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["The styles file contains a function called getStyles, which returns styles for different areas or subcomponents of the chart based on the props passed to it. The base component is wrapped with the styled HOC, which passes the theme (set by the user) and the concatenated styles (obtained from the styling function and any additional styles provided by the user) as props to the base component. Within the base component, the styles are applied to corresponding elements after converting them into class names. This conversion is done by passing theme and other style props as arguments to the function returned by the classNamesFunction utility. To learn more about component styling, refer ",(0,s.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/wiki/Component-Styling",children:"this"}),"."]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"debugging",children:"Debugging"}),"\n",(0,s.jsx)(t.h2,{id:"error-scenarios",children:"Error scenarios"}),"\n",(0,s.jsx)(t.h2,{id:"localization-aspects",children:"Localization aspects"}),"\n",(0,s.jsx)(t.p,{children:"Currently, the chart supports localization only for the chart data texts and the callout content."}),"\n",(0,s.jsx)(t.h2,{id:"some-notable-prs-and-their-brief-description",children:"Some notable PRs and their brief description"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/pull/28414",children:"Focus indicator bug in bar charts by yush-singla \xb7 Pull Request #28414 \xb7 microsoft/fluentui (github.com)"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/pull/27580",children:"Disable focus on non-interactive elements by krkshitij \xb7 Pull Request #27580 \xb7 microsoft/fluentui (github.com)"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/pull/26082",children:"Add new variant to horizontal bar chart by krkshitij \xb7 Pull Request #26082 \xb7 microsoft/fluentui (github.com)"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/pull/24563",children:"Fix legends selection bugs by krkshitij \xb7 Pull Request #24563 \xb7 microsoft/fluentui (github.com)"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/pull/24835",children:"Set minimum width of 1% for multi stacked horizontal bar chart by AtishayMsft \xb7 Pull Request #24835 \xb7 microsoft/fluentui (github.com)"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/pull/24631",children:"Fix min width of bars as 1% for horizontal bar charts by AtishayMsft \xb7 Pull Request #24631 \xb7 microsoft/fluentui (github.com)"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/pull/21750",children:"Fix charting callout not hoverable using mouse and callout flickering by AtishayMsft \xb7 Pull Request #21750 \xb7 microsoft/fluentui (github.com)"})}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"future-improvements",children:"Future improvements"}),"\n",(0,s.jsx)(t.h2,{id:"rendering-details",children:"Rendering details"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"When no data is provided by the user, an empty div is rendered in place of the chart."}),"\n",(0,s.jsx)(t.li,{children:"By default, chart data with a length of 1 is displayed as a number, and data with a length of 2 is displayed as a fraction/ratio above the bar. However, in the absolute-scale variant of the multi-stacked bar chart, the sum of the values of all highlighted bar segments is displayed as a number beside the bar."}),"\n",(0,s.jsx)(t.li,{children:"Changes in layout direction do not affect the stacking order of the bars but rather the text anchor. Therefore, the stacking order of the bars is reversed by adjusting the x attribute according to the layout direction, making it easier for the respective users to read the chart."}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"interactions",children:"Interactions"}),"\n",(0,s.jsx)(t.p,{children:"The chart is wrapped with a FocusZone component to allow focus on its interactive subcomponents. The following subcomponents are accessible using the keyboard:"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Bar segment "})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"data-is-focusable"}),": True if the hideTooltip prop is falsy."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onFocus"}),": Shows a callout near the element containing the segment details."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onBlur"}),": Does nothing."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Chart title "})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"data-is-focusable"}),": True if the text content overflows and is truncated."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onFocus"}),": Shows a tooltip with complete content."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onBlur"}),": Hides the tooltip if it is visible."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Legend "})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"data-is-focusable"}),": Depends on the allowFocusOnLegends prop, which is true by default."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onFocus"}),": Highlights the corresponding bar segment."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onBlur"}),": Unhighlights the corresponding bar segment."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Users can interact with the following subcomponents using the mouse:"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Bar segment "})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onMouseOver"}),": Shows a callout near the element containing the segment details."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onMouseMove"}),": Shows the callout if it is not already visible."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onMouseLeave"}),": Does nothing."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Chart title "})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onMouseEnter"}),": Shows a tooltip with complete content if the text content overflows and is truncated."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onMouseLeave"}),": Hides the tooltip if it is visible."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Root
"})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onMouseLeave"}),": Hides the callout if it is visible."]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Legend
"})}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onMouseOver"}),": Highlights the corresponding bar segment."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onMouseOut"}),": Unhighlights the corresponding bar segment."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.code,{children:"onClick"}),": Highlights the corresponding bar segment if the legend is not already selected, otherwise unhighlights it."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"known-issues",children:"Known issues"}),"\n",(0,s.jsx)(t.h2,{id:"design-figma",children:"Design figma"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://www.figma.com/file/WOoCs0CmNYZhYl9xXeCGpi/Data-viz-(Archive)?type=design&node-id=21153-107763&mode=design&t=Ubd0AoDYFIsZ770q-4",children:"Horizontal stacked bar chart \u2013 Figma"})}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"learnings",children:"Learnings"}),"\n",(0,s.jsx)(t.h2,{id:"extensions",children:"Extensions"})]})}function d(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},1968:(e,t,n)=>{n.d(t,{Z:()=>s});const s=n.p+"assets/images/stackedbarchart-test-coverage-60e746591e727d9b5a4aeadf84c995d5.png"},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>a});var s=n(7294);const i={},r=s.createContext(i);function a(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/544aba92.032b542b.js b/assets/js/544aba92.70e03cf8.js
similarity index 99%
rename from assets/js/544aba92.032b542b.js
rename to assets/js/544aba92.70e03cf8.js
index 79b5c38dc8..f3f80ab15f 100644
--- a/assets/js/544aba92.032b542b.js
+++ b/assets/js/544aba92.70e03cf8.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkdocsite=self.webpackChunkdocsite||[]).push([[774],{1264:(e,a,t)=>{t.r(a),t.d(a,{assets:()=>c,contentTitle:()=>s,default:()=>d,frontMatter:()=>n,metadata:()=>o,toc:()=>h});var i=t(5893),r=t(1151);const n={},s="Contributor guide: Area Chart",o={id:"Charting-Concepts/AreaChart",title:"Contributor guide: Area Chart",description:"Areachartpic1.png",source:"@site/../../docs/Charting-Concepts/AreaChart.md",sourceDirName:"Charting-Concepts",slug:"/Charting-Concepts/AreaChart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/AreaChart",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Detailed Implementation Steps",permalink:"/fluentui-charting-contrib/docs/Detailed Implementation Steps"},next:{title:"Contributor guide: Gauge Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/GaugeChart"}},c={},h=[{value:"Use cases:",id:"use-cases",level:2},{value:"Fluent Area chart also provide support for the scenarios where we need",id:"fluent-area-chart-also-provide-support-for-the-scenarios-where-we-need",level:3},{value:"Stacked Area Chart",id:"stacked-area-chart",level:3},{value:"Custom Accessibility",id:"custom-accessibility",level:3},{value:"Hover Options:",id:"hover-options",level:3},{value:"Dev Design Details",id:"dev-design-details",level:2},{value:"1.Area Chart",id:"1area-chart",level:3},{value:"2.Cartesian chart",id:"2cartesian-chart",level:3},{value:"3.ChartHover Card:",id:"3charthover-card",level:3},{value:"4.Legends:",id:"4legends",level:3},{value:"Mathematical/Geometrical concepts",id:"mathematicalgeometrical-concepts",level:2},{value:"D3-Line",id:"d3-line",level:3},{value:"D3-Area",id:"d3-area",level:3},{value:"Performance",id:"performance",level:2},{value:"Accessibility",id:"accessibility",level:2},{value:"Testingareachart4.png",id:"testingareachart4png",level:2},{value:"Variants",id:"variants",level:2},{value:"Stacked area chart:",id:"stacked-area-chart-1",level:3},{value:"Custom accessibility:",id:"custom-accessibility-1",level:3},{value:"Area chart with large dataset:",id:"area-chart-with-large-dataset",level:3},{value:"Theming",id:"theming",level:2},{value:"Debugging",id:"debugging",level:2},{value:"Error scenarios",id:"error-scenarios",level:2},{value:"The stacked area chart cannot be loaded if the x-values are not consistent across all the charts within the stack.",id:"the-stacked-area-chart-cannot-be-loaded-if-the-x-values-are-not-consistent-across-all-the-charts-within-the-stack",level:3},{value:"The chart is in a loading state because of one or more reasons below.",id:"the-chart-is-in-a-loading-state-because-of-one-or-more-reasons-below",level:3},{value:"Errors in other components:",id:"errors-in-other-components",level:3},{value:"Localization aspects",id:"localization-aspects",level:2},{value:"Date Axis localization: The axes support 2 ways of localization.",id:"date-axis-localization-the-axes-support-2-ways-of-localization",level:3},{value:"Some notable PRs and their brief description",id:"some-notable-prs-and-their-brief-description",level:2},{value:"Future improvements",id:"future-improvements",level:2},{value:"Rendering details",id:"rendering-details",level:2},{value:"Chart Hover Card -> Cartesian Chart -> Legend -> Area chart.",id:"chart-hover-card---cartesian-chart---legend---area-chart",level:3},{value:"Interactions",id:"interactions",level:2},{value:"Extension",id:"extension",level:2}];function l(e){const a={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(a.h1,{id:"contributor-guide-area-chart",children:"Contributor guide: Area Chart"}),"\n",(0,i.jsx)(a.p,{children:(0,i.jsx)(a.img,{alt:"Areachartpic1.png",src:t(7039).Z+"",width:"1440",height:"784"})}),"\n",(0,i.jsx)(a.p,{children:"Area charts are graphical representations of data that display quantitative data points connected by lines and filled with colors to create a visual representation of trends and patterns. The area between the line and the x-axis is filled, which helps in emphasizing the cumulative total or the overall magnitude of the data."}),"\n",(0,i.jsx)(a.h2,{id:"use-cases",children:"Use cases:"}),"\n",(0,i.jsx)(a.p,{children:"Area charts are used for various use cases which involve Trend Analysis, Cumulative Data, Comparing Multiple Series , Part-to-Whole Relationships , Distribution Comparison Forecasting etc."}),"\n",(0,i.jsx)(a.h3,{id:"fluent-area-chart-also-provide-support-for-the-scenarios-where-we-need",children:"Fluent Area chart also provide support for the scenarios where we need"}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsxs)(a.li,{children:["\n",(0,i.jsx)(a.h3,{id:"stacked-area-chart",children:"Stacked Area Chart"}),"\n","In stacked area chart, two or more data series are stacked vertically. It helps in easy comparison across different dimensions."]}),"\n",(0,i.jsxs)(a.li,{children:["\n",(0,i.jsx)(a.h3,{id:"custom-accessibility",children:"Custom Accessibility"}),"\n","Area chart provides a bunch of props to enable custom accessibility messages.UsexAxisCalloutAccessibilityData and callOutAccessibilityData to configure x axis and y axis accessibility messages respectively"]}),"\n",(0,i.jsxs)(a.li,{children:["\n",(0,i.jsx)(a.h3,{id:"hover-options",children:"Hover Options:"}),"\n","Area chart also provide different interactive options like ChartHoverCard on hovering over some data in chart. You can customize the content of the Hover card on the basis of the requirement.\n",(0,i.jsx)(a.img,{alt:"areachartpic2.png",src:t(8476).Z+"",width:"1400",height:"740"})]}),"\n"]}),"\n",(0,i.jsx)(a.h2,{id:"dev-design-details",children:"Dev Design Details"}),"\n",(0,i.jsx)(a.p,{children:(0,i.jsx)(a.img,{alt:"Areachart3.png",src:t(826).Z+"",width:"1196",height:"860"})}),"\n",(0,i.jsx)(a.h3,{id:"1area-chart",children:"1.Area Chart"}),"\n",(0,i.jsx)(a.p,{children:"This is the main component which is responsible for invoking/using other components. This is the component which is responsible for creating area and managing user interactions with itself , Legends and Cartesian Chart."}),"\n",(0,i.jsx)(a.h3,{id:"2cartesian-chart",children:"2.Cartesian chart"}),"\n",(0,i.jsx)(a.p,{children:"This is component which is responsible for creating the X and Y Axis and the ticks for Axis. All the calculation for domain/range is done in cartesian chart. This component can be accessed through area chart. This is also manages the ChartHoverCard component ."}),"\n",(0,i.jsx)(a.h3,{id:"3charthover-card",children:"3.ChartHover Card:"}),"\n",(0,i.jsx)(a.p,{children:"ChartHoverCard is a utility in the Fluent UI web library that provides a tooltip-like experience for charts. It is a React component that can be used to display additional information about data points on a chart when the user hovers over them."}),"\n",(0,i.jsx)(a.h3,{id:"4legends",children:"4.Legends:"}),"\n",(0,i.jsx)(a.p,{children:"In the Fluent UI React charting library, a legend contains a list of the variables appearing in the chart and an example of their appearance. This information allows the data from each variable to be identified in the chart. This component is populated in Area chart component."}),"\n",(0,i.jsx)(a.h2,{id:"mathematicalgeometrical-concepts",children:"Mathematical/Geometrical concepts"}),"\n",(0,i.jsxs)(a.p,{children:["Area Chart are created using ",(0,i.jsx)(a.a,{href:"https://github.com/d3/d3-shape#readme",children:"d3-shape"}),". The main API used from this library to create line between 2 points is ",(0,i.jsx)(a.a,{href:"https://github.com/d3/d3-shape#lines",children:"d3-line"})," and ",(0,i.jsx)(a.a,{href:"https://github.com/d3/d3-shape#areas",children:"d3-area"}),"."]}),"\n",(0,i.jsx)(a.h3,{id:"d3-line",children:"D3-Line"}),"\n",(0,i.jsxs)(a.p,{children:["Line Generator are generated using a\u202f",(0,i.jsx)(a.a,{href:"https://en.wikipedia.org/wiki/Spline_(mathematics)",children:"spline"})," or ",(0,i.jsx)(a.a,{href:"https://en.wikipedia.org/wiki/Polygonal_chain",children:"polyline"})," , as in a area chart. While\u202flines \u202fare defined as a sequence of two-dimensional [x,\u202fy] points, and ",(0,i.jsx)(a.a,{href:"https://github.com/d3/d3-shape#areas",children:"areas"})," similarly defined by a topline and a baseline, there remains the task of transforming this discrete representation into a continuous shape:\u202fi.e., how to interpolate between the points. A variety of curves are provided for this purpose. The curve used to draw these lines are ",(0,i.jsx)(a.a,{href:"https://github.com/d3/d3-shape#curveLinear",children:"curveLinear"})," ."]}),"\n",(0,i.jsx)(a.h3,{id:"d3-area",children:"D3-Area"}),"\n",(0,i.jsx)(a.p,{children:"The area generator produces an area, as in an area chart. An area is defined by two bounding lines, either splines or polylines. Typically, the two lines share the same x-values (x0 = x1), differing only in y-value (y0 and y1); most commonly, y0 is defined as a constant representing zero. The first line (the topline) is defined by x1 and y1 and is rendered first; the second line (the baseline) is defined by x0 and y0 and is rendered second, with the points in reverse order. With a curveLinear curve, this produces a clockwise polygon."}),"\n",(0,i.jsx)(a.h2,{id:"performance",children:"Performance"}),"\n",(0,i.jsx)(a.p,{children:"The performance aspect of a area chart refers to how efficiently and effectively it conveys information to the viewer. Here are some key considerations regarding the performance of a area chart:"}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsx)(a.li,{children:"Data Visualization Efficiency"}),"\n",(0,i.jsx)(a.li,{children:"Clarity and Simplicity"}),"\n",(0,i.jsx)(a.li,{children:"Responsiveness"}),"\n",(0,i.jsx)(a.li,{children:"Handling Large Datasets"}),"\n",(0,i.jsx)(a.li,{children:"Interactive Features"}),"\n"]}),"\n",(0,i.jsx)(a.p,{children:"We use Lighthouse tool for measuring the performance of our charts. We have multiple scenarios against which we measure the performance score for area chart:"}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsx)(a.li,{children:"1 chart with 30k Points"}),"\n",(0,i.jsx)(a.li,{children:"6 charts,1 series with 100 data points each"}),"\n",(0,i.jsx)(a.li,{children:"18 charts,1 series 5 data points each\nLast two scenarios have 90+ LH score. We are currently working on improving the performance of the area with heavy data set (30 k Data points)."}),"\n"]}),"\n",(0,i.jsx)(a.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,i.jsx)(a.p,{children:"Following subcomponents are accessible using a screen reader:"}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsxs)(a.li,{children:["Chart ",(0,i.jsx)(a.code,{children:""}),"The role is set as presentation, and the aria-label attribute is set as a string to describe its contents. This is readable by screen reader if user has given chartTitle prop"]}),"\n",(0,i.jsxs)(a.li,{children:["Points accessibility is managed by ",(0,i.jsx)(a.code,{children:""})," tags with role=\u201dimg\u201d whose accessibility is managed by aria-label property ."]}),"\n",(0,i.jsx)(a.li,{children:"Area chart provides a bunch of props to enable custom accessibility messages.Use xAxisCalloutAccessibilityData and callOutAccessibilityData to configure x axis and y axis accessibility messages respectively."}),"\n"]}),"\n",(0,i.jsxs)(a.h2,{id:"testingareachart4png",children:["Testing",(0,i.jsx)(a.img,{alt:"areachart4.png",src:t(7541).Z+"",width:"1264",height:"422"})]}),"\n",(0,i.jsx)(a.h2,{id:"variants",children:"Variants"}),"\n",(0,i.jsxs)(a.p,{children:["Different variants of area charts are available starting from the basic area chart to stacked area charts, styled area chart, area chart with custom accessibility, Area chart with large data set, area chart with data change functionality. For more details visit DemoSite ",(0,i.jsx)(a.a,{href:"https://fluentuipr.z22.web.core.windows.net/heads/master/react-charting/demo/index.html#/examples/areachart",children:"Fluent UI React Charting Examples - Area Chart (windows.net)"})]}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsxs)(a.li,{children:["\n",(0,i.jsx)(a.h3,{id:"stacked-area-chart-1",children:"Stacked area chart:"}),"\n","In stacked area chart, two or more data series are stacked vertically. It helps in easy comparison across different dimensions. The callout on hover for stacked chart displays multiple values from the stack. The callout can be customized to show single values or stacked values. Refer to the propsonRenderCalloutPerDataPoint and onRenderCalloutPerStack using which custom content for the callout can be defined."]}),"\n",(0,i.jsxs)(a.li,{children:["\n",(0,i.jsx)(a.h3,{id:"custom-accessibility-1",children:"Custom accessibility:"}),"\n","Area chart provides a bunch of props to enable custom accessibility messages.UsexAxisCalloutAccessibilityDataand callOutAccessibilityData to configure x axis and y axis accessibility messages respectively."]}),"\n",(0,i.jsxs)(a.li,{children:["\n",(0,i.jsx)(a.h3,{id:"area-chart-with-large-dataset",children:"Area chart with large dataset:"}),"\n","We provide support for smoth rendering of large data area chart."]}),"\n"]}),"\n",(0,i.jsx)(a.h2,{id:"theming",children:"Theming"}),"\n",(0,i.jsx)(a.p,{children:"The getStyles function defined in the styles file returns styles for different areas (or subcomponents) of the chart based on the props passed to it. The base component is wrapped with the styled HOC, which passes the theme (set by the user) and the concatenated styles (derived from the styling function and any additional styles provided by the user) as props to the base component. Within the base component, the styles are named as the class name. The conversion is done by passing theme and other style props as arguments to the function returned by the classNamesFunction utility. Learn more about component styling here.\nThe color prop for a segment is optional. If the color prop is not defined, a color is selected from the qualitative palette using the getNextColor utility. On the other hand, if the color prop is defined, the getColorFromToken utility is used to determine the appropriate CSS color. If the value of the color prop is a theme-specific color token from the DataVizPalette, the utility will return the corresponding CSS color. Otherwise, if the color prop is already a valid CSS color, it will be returned as is."}),"\n",(0,i.jsx)(a.h2,{id:"debugging",children:"Debugging"}),"\n",(0,i.jsx)(a.p,{children:"Our Test Suites are exhaustive to test each and every features provided with Area Charts, for debugging any particular feature these can be used respectively .Few of these tests also verify the technical aspect of rendering like there is a test suite \u201cRender calling with respective to props\u201d available in area chart test which verifies that the render is called 2 times.\nFurthermore, the fundamental debugging techniques can also be applied to Area charts. These techniques encompass:"}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsx)(a.li,{children:"Employing logging mechanisms"}),"\n",(0,i.jsx)(a.li,{children:"Utilizing the browser debugger"}),"\n",(0,i.jsx)(a.li,{children:"Leveraging browser extensions"}),"\n"]}),"\n",(0,i.jsx)(a.h2,{id:"error-scenarios",children:"Error scenarios"}),"\n",(0,i.jsx)(a.h3,{id:"the-stacked-area-chart-cannot-be-loaded-if-the-x-values-are-not-consistent-across-all-the-charts-within-the-stack",children:"The stacked area chart cannot be loaded if the x-values are not consistent across all the charts within the stack."}),"\n",(0,i.jsx)(a.p,{children:"The chart cannot be loaded because of one or more reasons:"}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsx)(a.li,{children:"Empty data passed such that chart does not have visual to show."}),"\n",(0,i.jsx)(a.li,{children:"One of the datapoint passed to the chart is corrupted. The corrupted datapoint can be for a continuous chart like line or area, or a discrete chart like bar chart, donut chart."}),"\n",(0,i.jsx)(a.li,{children:"The type of data passed to the chart is not supported."}),"\n",(0,i.jsx)(a.li,{children:"The user has not provided the required property."}),"\n"]}),"\n",(0,i.jsx)(a.h3,{id:"the-chart-is-in-a-loading-state-because-of-one-or-more-reasons-below",children:"The chart is in a loading state because of one or more reasons below."}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsx)(a.li,{children:"The chart data is too heavy."}),"\n",(0,i.jsx)(a.li,{children:"Chart is waiting for data from a webservice."}),"\n"]}),"\n",(0,i.jsx)(a.h3,{id:"errors-in-other-components",children:"Errors in other components:"}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsx)(a.li,{children:"Empty/invalid data passed to hover callout."}),"\n",(0,i.jsx)(a.li,{children:"There is a large variation in data in one datapoint compared to others causing the graphs to become extremely skewed and non-interactable."}),"\n",(0,i.jsx)(a.li,{children:"Title for legends is not defined or is corrupted."}),"\n",(0,i.jsx)(a.li,{children:"There is more than point on y axis for the same point in x axis."}),"\n"]}),"\n",(0,i.jsx)(a.h2,{id:"localization-aspects",children:"Localization aspects"}),"\n",(0,i.jsx)(a.h3,{id:"date-axis-localization-the-axes-support-2-ways-of-localization",children:"Date Axis localization: The axes support 2 ways of localization."}),"\n",(0,i.jsxs)(a.ol,{children:["\n",(0,i.jsxs)(a.li,{children:["\n",(0,i.jsx)(a.p,{children:"Javascript provided inbuilt localization for numeric and date axis. Specify the culture and dateLocalizeOptions for date axis to define target localization. Refer theJavascript localization guidefor usage."}),"\n"]}),"\n",(0,i.jsxs)(a.li,{children:["\n",(0,i.jsx)(a.p,{children:"Custom locale definition: The consumer of the library can specify a custom locale definition as supported by d3 like this:\nThe date axis will use the date range and the multiformat specified in the definition to determine the correct labels to show in the ticks. For example - If the date range is in days then the axis will show hourly ticks. If the date range spans across months then the a xis will show months in tick labels and so on. Specify the custom locale definition in the timeFormatLocale prop. Refer to the Custom Locale Date Axis example in line chart for sample usage."}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(a.h2,{id:"some-notable-prs-and-their-brief-description",children:"Some notable PRs and their brief description"}),"\n",(0,i.jsxs)(a.p,{children:[(0,i.jsx)(a.a,{href:"https://github.com/microsoft/fluentui/pull/26869",children:"Add color palette for data visualization by krkshitij \xb7 Pull Request #26869 \xb7 microsoft/fluentui (github.com)"})," -Color is optional for the data series in AreaChart and LineChart. If the color is absent, it will be picked automatically from the default color palette. New DataVizPalette provides users with theme-specific color tokens"]}),"\n",(0,i.jsxs)(a.p,{children:[(0,i.jsx)(a.a,{href:"https://github.com/microsoft/fluentui/pull/27721",children:"[2 of N] Changes for Making first render cycle faster and fixing test cases by ankityadav4 \xb7 Pull Request #27721 \xb7 microsoft/fluentui (github.com)"})," -Improving first render cycle of cartesian chart"]}),"\n",(0,i.jsxs)(a.p,{children:[(0,i.jsx)(a.a,{href:"https://github.com/microsoft/fluentui/pull/27234",children:"Make area chart keyboard accessible by krkshitij \xb7 Pull Request #27234 \xb7 microsoft/fluentui (github.com)"})," -Data points in AreaChart are accessible using keyboard"]}),"\n",(0,i.jsxs)(a.p,{children:[(0,i.jsx)(a.a,{href:"https://github.com/microsoft/fluentui/pull/27857",children:"[3 of N] Changes for lazy load for hover card and legends by ankityadav4 \xb7 Pull Request #27857 \xb7 microsoft/fluentui (github.com)"})," \u2013 Lazy loading for hover cards in cartesian charts."]}),"\n",(0,i.jsx)(a.h2,{id:"future-improvements",children:"Future improvements"}),"\n",(0,i.jsx)(a.p,{children:"We are working on Performance Improvements for area chart for large dataset scenario(30k data points)."}),"\n",(0,i.jsx)(a.h2,{id:"rendering-details",children:"Rendering details"}),"\n",(0,i.jsx)(a.p,{children:"Area Chart is a react class Component, which uses different states for managing user interaction. The various other components that are used and their relationship are shown here.The rendering order is reverse of the diagram that means the order of rendering of the components is."}),"\n",(0,i.jsx)(a.h3,{id:"chart-hover-card---cartesian-chart---legend---area-chart",children:"Chart Hover Card -> Cartesian Chart -> Legend -> Area chart."}),"\n",(0,i.jsx)(a.p,{children:"Every state change of user interaction causes different components to re-render. Example if a user hover onto the Legends then the components that will be re-rendered are Legends and then Area chart. However, if the user hovers onto a data point then the components that are re-rendered are Chart Hover Card then Cartesian Chart and then the Area Chart."}),"\n",(0,i.jsx)(a.h2,{id:"interactions",children:"Interactions"}),"\n",(0,i.jsxs)(a.p,{children:["There are various interactions that a user experiences in Area Chart which are\n",(0,i.jsx)(a.strong,{children:"1. Hover on Legends\n2. Hover on Data Points"}),"\nHovering on the legend highlights only that legend and area related to that legend.\nHovering on Data Points renders a card which highlights the nearest points and displays the value of x and all the y on it."]}),"\n",(0,i.jsx)(a.h2,{id:"extension",children:"Extension"}),"\n",(0,i.jsxs)(a.p,{children:["While working on area chart if you are exploring or adding any new things , so if you are planning to contribute or fix something related to creation of line, interaction with the chart and data related things you should start exploring ",(0,i.jsx)(a.a,{href:"https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/AreaChart",children:"fluentui/packages/react-charting/src/components/AreaChart at master \xb7 microsoft/fluentui (github.com)"}),"\nIf anything is related axis creation, domain range issues then one should start exploring cartesian chart code:\n",(0,i.jsx)(a.a,{href:"https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/CommonComponents",children:"fluentui/packages/react-charting/src/components/CommonComponents at master \xb7 microsoft/fluentui \xb7 GitHub"})]})]})}function d(e={}){const{wrapper:a}={...(0,r.a)(),...e.components};return a?(0,i.jsx)(a,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},7039:(e,a,t)=>{t.d(a,{Z:()=>i});const i=t.p+"assets/images/Areachartpic1-b4935c2435221321169a237a02618ca9.png"},8476:(e,a,t)=>{t.d(a,{Z:()=>i});const i=t.p+"assets/images/Areachartpic2-aa303ec052eb09134b5806a63b6a0451.png"},826:(e,a,t)=>{t.d(a,{Z:()=>i});const i=t.p+"assets/images/Areachartpic3-f759d8bae28dcf41be165b6f447bb7be.png"},7541:(e,a,t)=>{t.d(a,{Z:()=>i});const i=t.p+"assets/images/Areachartpic4-a7f762ab0ea882fd9482d5f59c74b208.png"},1151:(e,a,t)=>{t.d(a,{Z:()=>o,a:()=>s});var i=t(7294);const r={},n=i.createContext(r);function s(e){const a=i.useContext(n);return i.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}function o(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),i.createElement(n.Provider,{value:a},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkdocsite=self.webpackChunkdocsite||[]).push([[774],{1264:(e,a,t)=>{t.r(a),t.d(a,{assets:()=>c,contentTitle:()=>s,default:()=>d,frontMatter:()=>n,metadata:()=>o,toc:()=>h});var i=t(5893),r=t(1151);const n={},s="Contributor guide: Area Chart",o={id:"Charting-Concepts/AreaChart",title:"Contributor guide: Area Chart",description:"Areachartpic1.png",source:"@site/../../docs/Charting-Concepts/AreaChart.md",sourceDirName:"Charting-Concepts",slug:"/Charting-Concepts/AreaChart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/AreaChart",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Detailed Implementation Steps",permalink:"/fluentui-charting-contrib/docs/Detailed Implementation Steps"},next:{title:"Contributor guide: Donut Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/DonutChart"}},c={},h=[{value:"Use cases:",id:"use-cases",level:2},{value:"Fluent Area chart also provide support for the scenarios where we need",id:"fluent-area-chart-also-provide-support-for-the-scenarios-where-we-need",level:3},{value:"Stacked Area Chart",id:"stacked-area-chart",level:3},{value:"Custom Accessibility",id:"custom-accessibility",level:3},{value:"Hover Options:",id:"hover-options",level:3},{value:"Dev Design Details",id:"dev-design-details",level:2},{value:"1.Area Chart",id:"1area-chart",level:3},{value:"2.Cartesian chart",id:"2cartesian-chart",level:3},{value:"3.ChartHover Card:",id:"3charthover-card",level:3},{value:"4.Legends:",id:"4legends",level:3},{value:"Mathematical/Geometrical concepts",id:"mathematicalgeometrical-concepts",level:2},{value:"D3-Line",id:"d3-line",level:3},{value:"D3-Area",id:"d3-area",level:3},{value:"Performance",id:"performance",level:2},{value:"Accessibility",id:"accessibility",level:2},{value:"Testingareachart4.png",id:"testingareachart4png",level:2},{value:"Variants",id:"variants",level:2},{value:"Stacked area chart:",id:"stacked-area-chart-1",level:3},{value:"Custom accessibility:",id:"custom-accessibility-1",level:3},{value:"Area chart with large dataset:",id:"area-chart-with-large-dataset",level:3},{value:"Theming",id:"theming",level:2},{value:"Debugging",id:"debugging",level:2},{value:"Error scenarios",id:"error-scenarios",level:2},{value:"The stacked area chart cannot be loaded if the x-values are not consistent across all the charts within the stack.",id:"the-stacked-area-chart-cannot-be-loaded-if-the-x-values-are-not-consistent-across-all-the-charts-within-the-stack",level:3},{value:"The chart is in a loading state because of one or more reasons below.",id:"the-chart-is-in-a-loading-state-because-of-one-or-more-reasons-below",level:3},{value:"Errors in other components:",id:"errors-in-other-components",level:3},{value:"Localization aspects",id:"localization-aspects",level:2},{value:"Date Axis localization: The axes support 2 ways of localization.",id:"date-axis-localization-the-axes-support-2-ways-of-localization",level:3},{value:"Some notable PRs and their brief description",id:"some-notable-prs-and-their-brief-description",level:2},{value:"Future improvements",id:"future-improvements",level:2},{value:"Rendering details",id:"rendering-details",level:2},{value:"Chart Hover Card -> Cartesian Chart -> Legend -> Area chart.",id:"chart-hover-card---cartesian-chart---legend---area-chart",level:3},{value:"Interactions",id:"interactions",level:2},{value:"Extension",id:"extension",level:2}];function l(e){const a={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(a.h1,{id:"contributor-guide-area-chart",children:"Contributor guide: Area Chart"}),"\n",(0,i.jsx)(a.p,{children:(0,i.jsx)(a.img,{alt:"Areachartpic1.png",src:t(7039).Z+"",width:"1440",height:"784"})}),"\n",(0,i.jsx)(a.p,{children:"Area charts are graphical representations of data that display quantitative data points connected by lines and filled with colors to create a visual representation of trends and patterns. The area between the line and the x-axis is filled, which helps in emphasizing the cumulative total or the overall magnitude of the data."}),"\n",(0,i.jsx)(a.h2,{id:"use-cases",children:"Use cases:"}),"\n",(0,i.jsx)(a.p,{children:"Area charts are used for various use cases which involve Trend Analysis, Cumulative Data, Comparing Multiple Series , Part-to-Whole Relationships , Distribution Comparison Forecasting etc."}),"\n",(0,i.jsx)(a.h3,{id:"fluent-area-chart-also-provide-support-for-the-scenarios-where-we-need",children:"Fluent Area chart also provide support for the scenarios where we need"}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsxs)(a.li,{children:["\n",(0,i.jsx)(a.h3,{id:"stacked-area-chart",children:"Stacked Area Chart"}),"\n","In stacked area chart, two or more data series are stacked vertically. It helps in easy comparison across different dimensions."]}),"\n",(0,i.jsxs)(a.li,{children:["\n",(0,i.jsx)(a.h3,{id:"custom-accessibility",children:"Custom Accessibility"}),"\n","Area chart provides a bunch of props to enable custom accessibility messages.UsexAxisCalloutAccessibilityData and callOutAccessibilityData to configure x axis and y axis accessibility messages respectively"]}),"\n",(0,i.jsxs)(a.li,{children:["\n",(0,i.jsx)(a.h3,{id:"hover-options",children:"Hover Options:"}),"\n","Area chart also provide different interactive options like ChartHoverCard on hovering over some data in chart. You can customize the content of the Hover card on the basis of the requirement.\n",(0,i.jsx)(a.img,{alt:"areachartpic2.png",src:t(8476).Z+"",width:"1400",height:"740"})]}),"\n"]}),"\n",(0,i.jsx)(a.h2,{id:"dev-design-details",children:"Dev Design Details"}),"\n",(0,i.jsx)(a.p,{children:(0,i.jsx)(a.img,{alt:"Areachart3.png",src:t(826).Z+"",width:"1196",height:"860"})}),"\n",(0,i.jsx)(a.h3,{id:"1area-chart",children:"1.Area Chart"}),"\n",(0,i.jsx)(a.p,{children:"This is the main component which is responsible for invoking/using other components. This is the component which is responsible for creating area and managing user interactions with itself , Legends and Cartesian Chart."}),"\n",(0,i.jsx)(a.h3,{id:"2cartesian-chart",children:"2.Cartesian chart"}),"\n",(0,i.jsx)(a.p,{children:"This is component which is responsible for creating the X and Y Axis and the ticks for Axis. All the calculation for domain/range is done in cartesian chart. This component can be accessed through area chart. This is also manages the ChartHoverCard component ."}),"\n",(0,i.jsx)(a.h3,{id:"3charthover-card",children:"3.ChartHover Card:"}),"\n",(0,i.jsx)(a.p,{children:"ChartHoverCard is a utility in the Fluent UI web library that provides a tooltip-like experience for charts. It is a React component that can be used to display additional information about data points on a chart when the user hovers over them."}),"\n",(0,i.jsx)(a.h3,{id:"4legends",children:"4.Legends:"}),"\n",(0,i.jsx)(a.p,{children:"In the Fluent UI React charting library, a legend contains a list of the variables appearing in the chart and an example of their appearance. This information allows the data from each variable to be identified in the chart. This component is populated in Area chart component."}),"\n",(0,i.jsx)(a.h2,{id:"mathematicalgeometrical-concepts",children:"Mathematical/Geometrical concepts"}),"\n",(0,i.jsxs)(a.p,{children:["Area Chart are created using ",(0,i.jsx)(a.a,{href:"https://github.com/d3/d3-shape#readme",children:"d3-shape"}),". The main API used from this library to create line between 2 points is ",(0,i.jsx)(a.a,{href:"https://github.com/d3/d3-shape#lines",children:"d3-line"})," and ",(0,i.jsx)(a.a,{href:"https://github.com/d3/d3-shape#areas",children:"d3-area"}),"."]}),"\n",(0,i.jsx)(a.h3,{id:"d3-line",children:"D3-Line"}),"\n",(0,i.jsxs)(a.p,{children:["Line Generator are generated using a\u202f",(0,i.jsx)(a.a,{href:"https://en.wikipedia.org/wiki/Spline_(mathematics)",children:"spline"})," or ",(0,i.jsx)(a.a,{href:"https://en.wikipedia.org/wiki/Polygonal_chain",children:"polyline"})," , as in a area chart. While\u202flines \u202fare defined as a sequence of two-dimensional [x,\u202fy] points, and ",(0,i.jsx)(a.a,{href:"https://github.com/d3/d3-shape#areas",children:"areas"})," similarly defined by a topline and a baseline, there remains the task of transforming this discrete representation into a continuous shape:\u202fi.e., how to interpolate between the points. A variety of curves are provided for this purpose. The curve used to draw these lines are ",(0,i.jsx)(a.a,{href:"https://github.com/d3/d3-shape#curveLinear",children:"curveLinear"})," ."]}),"\n",(0,i.jsx)(a.h3,{id:"d3-area",children:"D3-Area"}),"\n",(0,i.jsx)(a.p,{children:"The area generator produces an area, as in an area chart. An area is defined by two bounding lines, either splines or polylines. Typically, the two lines share the same x-values (x0 = x1), differing only in y-value (y0 and y1); most commonly, y0 is defined as a constant representing zero. The first line (the topline) is defined by x1 and y1 and is rendered first; the second line (the baseline) is defined by x0 and y0 and is rendered second, with the points in reverse order. With a curveLinear curve, this produces a clockwise polygon."}),"\n",(0,i.jsx)(a.h2,{id:"performance",children:"Performance"}),"\n",(0,i.jsx)(a.p,{children:"The performance aspect of a area chart refers to how efficiently and effectively it conveys information to the viewer. Here are some key considerations regarding the performance of a area chart:"}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsx)(a.li,{children:"Data Visualization Efficiency"}),"\n",(0,i.jsx)(a.li,{children:"Clarity and Simplicity"}),"\n",(0,i.jsx)(a.li,{children:"Responsiveness"}),"\n",(0,i.jsx)(a.li,{children:"Handling Large Datasets"}),"\n",(0,i.jsx)(a.li,{children:"Interactive Features"}),"\n"]}),"\n",(0,i.jsx)(a.p,{children:"We use Lighthouse tool for measuring the performance of our charts. We have multiple scenarios against which we measure the performance score for area chart:"}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsx)(a.li,{children:"1 chart with 30k Points"}),"\n",(0,i.jsx)(a.li,{children:"6 charts,1 series with 100 data points each"}),"\n",(0,i.jsx)(a.li,{children:"18 charts,1 series 5 data points each\nLast two scenarios have 90+ LH score. We are currently working on improving the performance of the area with heavy data set (30 k Data points)."}),"\n"]}),"\n",(0,i.jsx)(a.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,i.jsx)(a.p,{children:"Following subcomponents are accessible using a screen reader:"}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsxs)(a.li,{children:["Chart ",(0,i.jsx)(a.code,{children:""}),"The role is set as presentation, and the aria-label attribute is set as a string to describe its contents. This is readable by screen reader if user has given chartTitle prop"]}),"\n",(0,i.jsxs)(a.li,{children:["Points accessibility is managed by ",(0,i.jsx)(a.code,{children:""})," tags with role=\u201dimg\u201d whose accessibility is managed by aria-label property ."]}),"\n",(0,i.jsx)(a.li,{children:"Area chart provides a bunch of props to enable custom accessibility messages.Use xAxisCalloutAccessibilityData and callOutAccessibilityData to configure x axis and y axis accessibility messages respectively."}),"\n"]}),"\n",(0,i.jsxs)(a.h2,{id:"testingareachart4png",children:["Testing",(0,i.jsx)(a.img,{alt:"areachart4.png",src:t(7541).Z+"",width:"1264",height:"422"})]}),"\n",(0,i.jsx)(a.h2,{id:"variants",children:"Variants"}),"\n",(0,i.jsxs)(a.p,{children:["Different variants of area charts are available starting from the basic area chart to stacked area charts, styled area chart, area chart with custom accessibility, Area chart with large data set, area chart with data change functionality. For more details visit DemoSite ",(0,i.jsx)(a.a,{href:"https://fluentuipr.z22.web.core.windows.net/heads/master/react-charting/demo/index.html#/examples/areachart",children:"Fluent UI React Charting Examples - Area Chart (windows.net)"})]}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsxs)(a.li,{children:["\n",(0,i.jsx)(a.h3,{id:"stacked-area-chart-1",children:"Stacked area chart:"}),"\n","In stacked area chart, two or more data series are stacked vertically. It helps in easy comparison across different dimensions. The callout on hover for stacked chart displays multiple values from the stack. The callout can be customized to show single values or stacked values. Refer to the propsonRenderCalloutPerDataPoint and onRenderCalloutPerStack using which custom content for the callout can be defined."]}),"\n",(0,i.jsxs)(a.li,{children:["\n",(0,i.jsx)(a.h3,{id:"custom-accessibility-1",children:"Custom accessibility:"}),"\n","Area chart provides a bunch of props to enable custom accessibility messages.UsexAxisCalloutAccessibilityDataand callOutAccessibilityData to configure x axis and y axis accessibility messages respectively."]}),"\n",(0,i.jsxs)(a.li,{children:["\n",(0,i.jsx)(a.h3,{id:"area-chart-with-large-dataset",children:"Area chart with large dataset:"}),"\n","We provide support for smoth rendering of large data area chart."]}),"\n"]}),"\n",(0,i.jsx)(a.h2,{id:"theming",children:"Theming"}),"\n",(0,i.jsx)(a.p,{children:"The getStyles function defined in the styles file returns styles for different areas (or subcomponents) of the chart based on the props passed to it. The base component is wrapped with the styled HOC, which passes the theme (set by the user) and the concatenated styles (derived from the styling function and any additional styles provided by the user) as props to the base component. Within the base component, the styles are named as the class name. The conversion is done by passing theme and other style props as arguments to the function returned by the classNamesFunction utility. Learn more about component styling here.\nThe color prop for a segment is optional. If the color prop is not defined, a color is selected from the qualitative palette using the getNextColor utility. On the other hand, if the color prop is defined, the getColorFromToken utility is used to determine the appropriate CSS color. If the value of the color prop is a theme-specific color token from the DataVizPalette, the utility will return the corresponding CSS color. Otherwise, if the color prop is already a valid CSS color, it will be returned as is."}),"\n",(0,i.jsx)(a.h2,{id:"debugging",children:"Debugging"}),"\n",(0,i.jsx)(a.p,{children:"Our Test Suites are exhaustive to test each and every features provided with Area Charts, for debugging any particular feature these can be used respectively .Few of these tests also verify the technical aspect of rendering like there is a test suite \u201cRender calling with respective to props\u201d available in area chart test which verifies that the render is called 2 times.\nFurthermore, the fundamental debugging techniques can also be applied to Area charts. These techniques encompass:"}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsx)(a.li,{children:"Employing logging mechanisms"}),"\n",(0,i.jsx)(a.li,{children:"Utilizing the browser debugger"}),"\n",(0,i.jsx)(a.li,{children:"Leveraging browser extensions"}),"\n"]}),"\n",(0,i.jsx)(a.h2,{id:"error-scenarios",children:"Error scenarios"}),"\n",(0,i.jsx)(a.h3,{id:"the-stacked-area-chart-cannot-be-loaded-if-the-x-values-are-not-consistent-across-all-the-charts-within-the-stack",children:"The stacked area chart cannot be loaded if the x-values are not consistent across all the charts within the stack."}),"\n",(0,i.jsx)(a.p,{children:"The chart cannot be loaded because of one or more reasons:"}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsx)(a.li,{children:"Empty data passed such that chart does not have visual to show."}),"\n",(0,i.jsx)(a.li,{children:"One of the datapoint passed to the chart is corrupted. The corrupted datapoint can be for a continuous chart like line or area, or a discrete chart like bar chart, donut chart."}),"\n",(0,i.jsx)(a.li,{children:"The type of data passed to the chart is not supported."}),"\n",(0,i.jsx)(a.li,{children:"The user has not provided the required property."}),"\n"]}),"\n",(0,i.jsx)(a.h3,{id:"the-chart-is-in-a-loading-state-because-of-one-or-more-reasons-below",children:"The chart is in a loading state because of one or more reasons below."}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsx)(a.li,{children:"The chart data is too heavy."}),"\n",(0,i.jsx)(a.li,{children:"Chart is waiting for data from a webservice."}),"\n"]}),"\n",(0,i.jsx)(a.h3,{id:"errors-in-other-components",children:"Errors in other components:"}),"\n",(0,i.jsxs)(a.ul,{children:["\n",(0,i.jsx)(a.li,{children:"Empty/invalid data passed to hover callout."}),"\n",(0,i.jsx)(a.li,{children:"There is a large variation in data in one datapoint compared to others causing the graphs to become extremely skewed and non-interactable."}),"\n",(0,i.jsx)(a.li,{children:"Title for legends is not defined or is corrupted."}),"\n",(0,i.jsx)(a.li,{children:"There is more than point on y axis for the same point in x axis."}),"\n"]}),"\n",(0,i.jsx)(a.h2,{id:"localization-aspects",children:"Localization aspects"}),"\n",(0,i.jsx)(a.h3,{id:"date-axis-localization-the-axes-support-2-ways-of-localization",children:"Date Axis localization: The axes support 2 ways of localization."}),"\n",(0,i.jsxs)(a.ol,{children:["\n",(0,i.jsxs)(a.li,{children:["\n",(0,i.jsx)(a.p,{children:"Javascript provided inbuilt localization for numeric and date axis. Specify the culture and dateLocalizeOptions for date axis to define target localization. Refer theJavascript localization guidefor usage."}),"\n"]}),"\n",(0,i.jsxs)(a.li,{children:["\n",(0,i.jsx)(a.p,{children:"Custom locale definition: The consumer of the library can specify a custom locale definition as supported by d3 like this:\nThe date axis will use the date range and the multiformat specified in the definition to determine the correct labels to show in the ticks. For example - If the date range is in days then the axis will show hourly ticks. If the date range spans across months then the a xis will show months in tick labels and so on. Specify the custom locale definition in the timeFormatLocale prop. Refer to the Custom Locale Date Axis example in line chart for sample usage."}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(a.h2,{id:"some-notable-prs-and-their-brief-description",children:"Some notable PRs and their brief description"}),"\n",(0,i.jsxs)(a.p,{children:[(0,i.jsx)(a.a,{href:"https://github.com/microsoft/fluentui/pull/26869",children:"Add color palette for data visualization by krkshitij \xb7 Pull Request #26869 \xb7 microsoft/fluentui (github.com)"})," -Color is optional for the data series in AreaChart and LineChart. If the color is absent, it will be picked automatically from the default color palette. New DataVizPalette provides users with theme-specific color tokens"]}),"\n",(0,i.jsxs)(a.p,{children:[(0,i.jsx)(a.a,{href:"https://github.com/microsoft/fluentui/pull/27721",children:"[2 of N] Changes for Making first render cycle faster and fixing test cases by ankityadav4 \xb7 Pull Request #27721 \xb7 microsoft/fluentui (github.com)"})," -Improving first render cycle of cartesian chart"]}),"\n",(0,i.jsxs)(a.p,{children:[(0,i.jsx)(a.a,{href:"https://github.com/microsoft/fluentui/pull/27234",children:"Make area chart keyboard accessible by krkshitij \xb7 Pull Request #27234 \xb7 microsoft/fluentui (github.com)"})," -Data points in AreaChart are accessible using keyboard"]}),"\n",(0,i.jsxs)(a.p,{children:[(0,i.jsx)(a.a,{href:"https://github.com/microsoft/fluentui/pull/27857",children:"[3 of N] Changes for lazy load for hover card and legends by ankityadav4 \xb7 Pull Request #27857 \xb7 microsoft/fluentui (github.com)"})," \u2013 Lazy loading for hover cards in cartesian charts."]}),"\n",(0,i.jsx)(a.h2,{id:"future-improvements",children:"Future improvements"}),"\n",(0,i.jsx)(a.p,{children:"We are working on Performance Improvements for area chart for large dataset scenario(30k data points)."}),"\n",(0,i.jsx)(a.h2,{id:"rendering-details",children:"Rendering details"}),"\n",(0,i.jsx)(a.p,{children:"Area Chart is a react class Component, which uses different states for managing user interaction. The various other components that are used and their relationship are shown here.The rendering order is reverse of the diagram that means the order of rendering of the components is."}),"\n",(0,i.jsx)(a.h3,{id:"chart-hover-card---cartesian-chart---legend---area-chart",children:"Chart Hover Card -> Cartesian Chart -> Legend -> Area chart."}),"\n",(0,i.jsx)(a.p,{children:"Every state change of user interaction causes different components to re-render. Example if a user hover onto the Legends then the components that will be re-rendered are Legends and then Area chart. However, if the user hovers onto a data point then the components that are re-rendered are Chart Hover Card then Cartesian Chart and then the Area Chart."}),"\n",(0,i.jsx)(a.h2,{id:"interactions",children:"Interactions"}),"\n",(0,i.jsxs)(a.p,{children:["There are various interactions that a user experiences in Area Chart which are\n",(0,i.jsx)(a.strong,{children:"1. Hover on Legends\n2. Hover on Data Points"}),"\nHovering on the legend highlights only that legend and area related to that legend.\nHovering on Data Points renders a card which highlights the nearest points and displays the value of x and all the y on it."]}),"\n",(0,i.jsx)(a.h2,{id:"extension",children:"Extension"}),"\n",(0,i.jsxs)(a.p,{children:["While working on area chart if you are exploring or adding any new things , so if you are planning to contribute or fix something related to creation of line, interaction with the chart and data related things you should start exploring ",(0,i.jsx)(a.a,{href:"https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/AreaChart",children:"fluentui/packages/react-charting/src/components/AreaChart at master \xb7 microsoft/fluentui (github.com)"}),"\nIf anything is related axis creation, domain range issues then one should start exploring cartesian chart code:\n",(0,i.jsx)(a.a,{href:"https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/CommonComponents",children:"fluentui/packages/react-charting/src/components/CommonComponents at master \xb7 microsoft/fluentui \xb7 GitHub"})]})]})}function d(e={}){const{wrapper:a}={...(0,r.a)(),...e.components};return a?(0,i.jsx)(a,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},7039:(e,a,t)=>{t.d(a,{Z:()=>i});const i=t.p+"assets/images/Areachartpic1-b4935c2435221321169a237a02618ca9.png"},8476:(e,a,t)=>{t.d(a,{Z:()=>i});const i=t.p+"assets/images/Areachartpic2-aa303ec052eb09134b5806a63b6a0451.png"},826:(e,a,t)=>{t.d(a,{Z:()=>i});const i=t.p+"assets/images/Areachartpic3-f759d8bae28dcf41be165b6f447bb7be.png"},7541:(e,a,t)=>{t.d(a,{Z:()=>i});const i=t.p+"assets/images/Areachartpic4-a7f762ab0ea882fd9482d5f59c74b208.png"},1151:(e,a,t)=>{t.d(a,{Z:()=>o,a:()=>s});var i=t(7294);const r={},n=i.createContext(r);function s(e){const a=i.useContext(n);return i.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}function o(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),i.createElement(n.Provider,{value:a},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/712b8a2d.0fec8f3f.js b/assets/js/712b8a2d.0fec8f3f.js
deleted file mode 100644
index 55201e8ae5..0000000000
--- a/assets/js/712b8a2d.0fec8f3f.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkdocsite=self.webpackChunkdocsite||[]).push([[6863],{4227:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>c});var t=s(5893),i=s(1151);const r={},a="Contributor guide: Heatmap Chart",o={id:"Charting-Concepts/HeatMapChart",title:"Contributor guide: Heatmap Chart",description:"A heatmap chart is a type of data visualization that represents data values as colors in a grid of rectangles. Each cell's color intensity corresponds to the value it represents, making it easy to spot patterns and variations in the data.",source:"@site/../../docs/Charting-Concepts/HeatMapChart.md",sourceDirName:"Charting-Concepts",slug:"/Charting-Concepts/HeatMapChart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/HeatMapChart",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Contributor guide: Gauge Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/GaugeChart"},next:{title:"Contributor guide: Horizontal Bar Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/HorizontalBarChart"}},l={},c=[{value:"Use cases",id:"use-cases",level:2},{value:"Dev Design details",id:"dev-design-details",level:2},{value:"Mathematical/Geometrical concepts",id:"mathematicalgeometrical-concepts",level:2},{value:"Performance",id:"performance",level:2},{value:"Accessibility",id:"accessibility",level:2},{value:"Testing",id:"testing",level:2},{value:"Variants",id:"variants",level:2},{value:"Theming",id:"theming",level:2},{value:"Debugging",id:"debugging",level:2},{value:"Error scenarios",id:"error-scenarios",level:2},{value:"Localization aspects",id:"localization-aspects",level:2},{value:"Some notable PRs and their brief description",id:"some-notable-prs-and-their-brief-description",level:2},{value:"Future improvements",id:"future-improvements",level:2},{value:"Rendering details",id:"rendering-details",level:2},{value:"Interactions",id:"interactions",level:2},{value:"Known issues",id:"known-issues",level:2},{value:"Design figma",id:"design-figma",level:2},{value:"Learnings",id:"learnings",level:2},{value:"Extensions",id:"extensions",level:2}];function h(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"contributor-guide-heatmap-chart",children:"Contributor guide: Heatmap Chart"}),"\n",(0,t.jsx)(n.p,{children:"A heatmap chart is a type of data visualization that represents data values as colors in a grid of rectangles. Each cell's color intensity corresponds to the value it represents, making it easy to spot patterns and variations in the data."}),"\n",(0,t.jsx)(n.h2,{id:"use-cases",children:"Use cases"}),"\n",(0,t.jsx)(n.p,{children:"Here are some common use cases for heatmap charts:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Data Analysis: Heatmaps help analyze large datasets by visually identifying trends, outliers, and correlations."}),"\n",(0,t.jsx)(n.li,{children:"User Behavior Tracking: In web analytics, heatmaps can show where users click, move, or spend time on a webpage, helping optimize user experience."}),"\n",(0,t.jsx)(n.li,{children:"Risk Assessment: Heatmaps are used in financial and project management to assess and manage risks by highlighting areas with the highest potential impact."}),"\n",(0,t.jsx)(n.li,{children:"Sports Analysis: In sports, heatmaps show player movement and performance on the field or court, aiding in strategic decision-making."}),"\n",(0,t.jsx)(n.li,{children:"Weather and Climate Analysis: Meteorologists use heatmaps to visualize temperature, precipitation, and other climate-related data."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"dev-design-details",children:"Dev Design details"}),"\n",(0,t.jsx)(n.p,{children:"The heatmap chart comprises the following components and subcomponents:"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"HeatMapChart"}),": This is the main component responsible for rendering and managing subcomponents, such as rectangles and other components. It handles user interactions and provides the overall functionality of the chart."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"CartesianChart"}),": This component is responsible for rendering the x and y axes. Additionally, it wraps the entire chart with a FocusZone component, which allows users to navigate focus between rectangles using arrow keys. It also renders a Callout component with a ChartHoverCard component, which functions as an anchored tip, offering additional information about the rectangle that is currently hovered over or focused without blocking the user."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Legends"}),": Legends are a unique list of strings that identify each group of rectangles in the chart. The Legends component renders a button for each legend, enabling users to highlight the associated rectangles by hovering over or selecting the legend."]}),"\n",(0,t.jsx)(n.h2,{id:"mathematicalgeometrical-concepts",children:"Mathematical/Geometrical concepts"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Numeric x and y values are converted to strings using the ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-format#format",children:"format"})," utility from the ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-format",children:"d3-format"})," library, based on the provided format specifier string. Similarly, date x and y values are converted to human readable strings using the ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-time-format#timeFormat",children:"timeFormat"})," utility from the ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-time-format",children:"d3-time-format"})," library, according to the provided format specifier string. The resulting string values are then passed as domains to CartesianChart for creating string x and y axes."]}),"\n",(0,t.jsxs)(n.li,{children:["A linear scale is created using the ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-scale/linear#scaleLinear",children:"scaleLinear"})," utility from the ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-scale",children:"d3-scale"})," library, which maps rectangle values (continuous input domain) to colors (continuous output range) using the default interpolation. Specifying more than 2 domain and range values produces a piecewise scale."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"performance",children:"Performance"}),"\n",(0,t.jsx)(n.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,t.jsx)(n.p,{children:"The following subcomponents are accessible using a screen reader:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Rectangle "}),": The following attributes provide an accessible description for the rectangle."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"role"}),' = "img"']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aria-label"}),' = "{xCoordinate}, {yCoordinate}. {legend}, {rectangleValue}. {description}."']}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Users can customize this description using the callOutAccessibilityData prop."}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"testing",children:"Testing"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"Test coverage report",src:s(2491).Z+"",width:"3680",height:"1060"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"/fluentui-charting-contrib/docs/Test%20Plans/HeatMapChart/ComponentTests",children:"HeatMapChart test plan"})}),"\n",(0,t.jsx)(n.h2,{id:"variants",children:"Variants"}),"\n",(0,t.jsx)(n.p,{children:"Here are the props available for customizing the heatmap chart:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"data"})," (required): Use this prop to populate the chart by providing a series of groups, each containing data for a series of rectangles."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"domainValuesForColorScale"})," and ",(0,t.jsx)(n.strong,{children:"rangeValuesForColorScale"})," (required): These props are used to generate a scale that transforms rectangle values into colors. The domainValuesForColorScale prop accepts an array of numbers, and the rangeValuesForColorScale prop accepts an array of CSS color strings. For optimal results, ensure the length of these arrays is the same."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"xAxisDateFormatString"}),": Use this prop to specify a custom string format for formatting date-based x-axis labels. For more information, refer to ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-time-format#locale_format",children:"d3-time-format | D3 by Observable (d3js.org)"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"yAxisDateFormatString"}),": Use this prop to specify a custom string format for formatting date-based y-axis labels. For more information, refer to ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-time-format#locale_format",children:"d3-time-format | D3 by Observable (d3js.org)"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"xAxisNumberFormatString"}),": Use this prop to specify a custom string format for formatting numeric x-axis labels. For more information, refer to ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-format#locale_format",children:"d3-format | D3 by Observable (d3js.org)"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"yAxisNumberFormatString"}),": Use this prop to specify a custom string format for formatting numeric y-axis labels. For more information, refer to ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-format#locale_format",children:"d3-format | D3 by Observable (d3js.org)"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"xAxisStringFormatter"}),": Use this prop to provide a custom function for formatting string-based x-axis labels."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"yAxisStringFormatter"}),": Use this prop to provide a custom function for formatting string-based y-axis labels."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["For more details, see ",(0,t.jsx)(n.a,{href:"https://developer.microsoft.com/en-us/fluentui#/controls/web/heatmapchart",children:"Fluent UI - Controls - React - HeatMapChart"})]}),"\n",(0,t.jsx)(n.h2,{id:"theming",children:"Theming"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["The styles file contains a function called getHeatMapChartStyles, which returns styles for different areas or subcomponents of the chart based on the props passed to it. The base component is wrapped with the styled HOC, which passes the theme (set by the user) and the concatenated styles (obtained from the styling function and any additional styles provided by the user) as props to the base component. Within the base component, the styles are applied to corresponding elements after converting them into class names. This conversion is done by passing theme and other style props as arguments to the function returned by the classNamesFunction utility. To learn more about component styling, refer ",(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/wiki/Component-Styling",children:"this"}),"."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"debugging",children:"Debugging"}),"\n",(0,t.jsx)(n.h2,{id:"error-scenarios",children:"Error scenarios"}),"\n",(0,t.jsx)(n.h2,{id:"localization-aspects",children:"Localization aspects"}),"\n",(0,t.jsx)(n.p,{children:"Currently, the chart supports localization only for numeric texts inside rectangles."}),"\n",(0,t.jsx)(n.h2,{id:"some-notable-prs-and-their-brief-description",children:"Some notable PRs and their brief description"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/pull/28321",children:"Fixing re-render issue for all charts when empty by srmukher \xb7 Pull Request #28321 \xb7 microsoft/fluentui (github.com)"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/pull/25616",children:"Fix wrong narration in browse mode by krkshitij \xb7 Pull Request #25616 \xb7 microsoft/fluentui (github.com)"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/pull/24563",children:"Fix legends selection bugs by krkshitij \xb7 Pull Request #24563 \xb7 microsoft/fluentui (github.com)"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/pull/24903",children:"Fix wrong narration when legend selected by krkshitij \xb7 Pull Request #24903 \xb7 microsoft/fluentui (github.com)"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/pull/21750",children:"Fix charting callout not hoverable using mouse and callout flickering by AtishayMsft \xb7 Pull Request #21750 \xb7 microsoft/fluentui (github.com)"})}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"future-improvements",children:"Future improvements"}),"\n",(0,t.jsx)(n.h2,{id:"rendering-details",children:"Rendering details"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"When no data is provided by the user, an empty div is rendered in place of the chart."}),"\n",(0,t.jsxs)(n.li,{children:["Currently, a string axis is created regardless of the type of x and y values, which uses the d3 ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-scale/band",children:"scaleBand"})," utility. This utility has a ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-scale/band#band_bandwidth",children:"bandwidth"})," property that is used to determine the width and height of rectangles. The d3 ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-scale/linear",children:"scaleLinear"})," and ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-scale/time",children:"scaleTime"})," utilities, used for number and date axes respectively, don't have such a property."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"interactions",children:"Interactions"}),"\n",(0,t.jsx)(n.p,{children:"The chart is wrapped with a FocusZone component to allow focus on its interactive subcomponents. The following subcomponents are accessible using the keyboard:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Rectangle "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"data-is-focusable"}),": True."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onFocus"}),": Shows a callout near the element containing the rectangle details."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onBlur"}),": Does nothing."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Legend "})," (Legends)"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"data-is-focusable"}),": Depends on the allowFocusOnLegends prop, which is true by default."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onFocus"}),": Highlights the associated rectangles."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onBlur"}),": Unhighlights the associated rectangles."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Users can interact with the following subcomponents using the mouse:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Rectangle"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:""}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseOver"}),": Shows a callout near the element containing the rectangle details."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseOut"}),": Does nothing."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:""}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onClick"}),": Calls the onClick prop associated with the rectangle if provided."]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Root "})," (CartesianChart)"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseLeave"}),": Hides the callout if it is visible."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Legend
"})," (Legends)"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseOver"}),": Highlights the associated rectangles."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseOut"}),": Unhighlights the associated rectangles."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onClick"}),": Highlights the associated rectangles if the legend is not already selected, otherwise unhighlights them."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"known-issues",children:"Known issues"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/issues/30128",children:"[Bug]: Date axis labels formatted to show only the year are being localized as if they were numbers \xb7 Issue #30128 \xb7 microsoft/fluentui"})}),"\n",(0,t.jsx)(n.li,{children:"Y-axis labels are accessible through assistive technologies, such as screen readers."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"design-figma",children:"Design figma"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://www.figma.com/file/7ywOrSjGW5DEkNETagzXf2/Heat-map?type=design&t=FUFuc5mzEF4G6hag-6",children:"Heat map - Figma"})}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"learnings",children:"Learnings"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Long y axis labels get clipped which can be fixed by passing custom left or right margin to the chart. In contrast, horizontal bar chart with axis calculates longest label width and updates the margin with that value to prevent the labels from clipping."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"extensions",children:"Extensions"})]})}function d(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(h,{...e})}):h(e)}},2491:(e,n,s)=>{s.d(n,{Z:()=>t});const t=s.p+"assets/images/heatmapchart-test-coverage-020d10786fd47cd143a84149f2665adb.png"},1151:(e,n,s)=>{s.d(n,{Z:()=>o,a:()=>a});var t=s(7294);const i={},r=t.createContext(i);function a(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/712b8a2d.b2c49b65.js b/assets/js/712b8a2d.b2c49b65.js
new file mode 100644
index 0000000000..9e0534996e
--- /dev/null
+++ b/assets/js/712b8a2d.b2c49b65.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdocsite=self.webpackChunkdocsite||[]).push([[6863],{4227:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>c});var t=s(5893),i=s(1151);const r={},a="Contributor guide: Heatmap Chart",o={id:"Charting-Concepts/HeatMapChart",title:"Contributor guide: Heatmap Chart",description:"A heatmap chart is a type of data visualization that represents data values as colors in a grid of rectangles. Each cell's color intensity corresponds to the value it represents, making it easy to spot patterns and variations in the data.",source:"@site/../../docs/Charting-Concepts/HeatMapChart.md",sourceDirName:"Charting-Concepts",slug:"/Charting-Concepts/HeatMapChart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/HeatMapChart",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Contributor guide: Grouped Vertical Bar Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/GroupedVerticalBarChart"},next:{title:"Contributor guide: Horizontal Bar Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/HorizontalBarChart"}},l={},c=[{value:"Use cases",id:"use-cases",level:2},{value:"Dev Design details",id:"dev-design-details",level:2},{value:"Mathematical/Geometrical concepts",id:"mathematicalgeometrical-concepts",level:2},{value:"Performance",id:"performance",level:2},{value:"Accessibility",id:"accessibility",level:2},{value:"Testing",id:"testing",level:2},{value:"Variants",id:"variants",level:2},{value:"Theming",id:"theming",level:2},{value:"Debugging",id:"debugging",level:2},{value:"Error scenarios",id:"error-scenarios",level:2},{value:"Localization aspects",id:"localization-aspects",level:2},{value:"Some notable PRs and their brief description",id:"some-notable-prs-and-their-brief-description",level:2},{value:"Future improvements",id:"future-improvements",level:2},{value:"Rendering details",id:"rendering-details",level:2},{value:"Interactions",id:"interactions",level:2},{value:"Known issues",id:"known-issues",level:2},{value:"Design figma",id:"design-figma",level:2},{value:"Learnings",id:"learnings",level:2},{value:"Extensions",id:"extensions",level:2}];function h(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"contributor-guide-heatmap-chart",children:"Contributor guide: Heatmap Chart"}),"\n",(0,t.jsx)(n.p,{children:"A heatmap chart is a type of data visualization that represents data values as colors in a grid of rectangles. Each cell's color intensity corresponds to the value it represents, making it easy to spot patterns and variations in the data."}),"\n",(0,t.jsx)(n.h2,{id:"use-cases",children:"Use cases"}),"\n",(0,t.jsx)(n.p,{children:"Here are some common use cases for heatmap charts:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Data Analysis: Heatmaps help analyze large datasets by visually identifying trends, outliers, and correlations."}),"\n",(0,t.jsx)(n.li,{children:"User Behavior Tracking: In web analytics, heatmaps can show where users click, move, or spend time on a webpage, helping optimize user experience."}),"\n",(0,t.jsx)(n.li,{children:"Risk Assessment: Heatmaps are used in financial and project management to assess and manage risks by highlighting areas with the highest potential impact."}),"\n",(0,t.jsx)(n.li,{children:"Sports Analysis: In sports, heatmaps show player movement and performance on the field or court, aiding in strategic decision-making."}),"\n",(0,t.jsx)(n.li,{children:"Weather and Climate Analysis: Meteorologists use heatmaps to visualize temperature, precipitation, and other climate-related data."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"dev-design-details",children:"Dev Design details"}),"\n",(0,t.jsx)(n.p,{children:"The heatmap chart comprises the following components and subcomponents:"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"HeatMapChart"}),": This is the main component responsible for rendering and managing subcomponents, such as rectangles and other components. It handles user interactions and provides the overall functionality of the chart."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"CartesianChart"}),": This component is responsible for rendering the x and y axes. Additionally, it wraps the entire chart with a FocusZone component, which allows users to navigate focus between rectangles using arrow keys. It also renders a Callout component with a ChartHoverCard component, which functions as an anchored tip, offering additional information about the rectangle that is currently hovered over or focused without blocking the user."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Legends"}),": Legends are a unique list of strings that identify each group of rectangles in the chart. The Legends component renders a button for each legend, enabling users to highlight the associated rectangles by hovering over or selecting the legend."]}),"\n",(0,t.jsx)(n.h2,{id:"mathematicalgeometrical-concepts",children:"Mathematical/Geometrical concepts"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Numeric x and y values are converted to strings using the ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-format#format",children:"format"})," utility from the ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-format",children:"d3-format"})," library, based on the provided format specifier string. Similarly, date x and y values are converted to human readable strings using the ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-time-format#timeFormat",children:"timeFormat"})," utility from the ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-time-format",children:"d3-time-format"})," library, according to the provided format specifier string. The resulting string values are then passed as domains to CartesianChart for creating string x and y axes."]}),"\n",(0,t.jsxs)(n.li,{children:["A linear scale is created using the ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-scale/linear#scaleLinear",children:"scaleLinear"})," utility from the ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-scale",children:"d3-scale"})," library, which maps rectangle values (continuous input domain) to colors (continuous output range) using the default interpolation. Specifying more than 2 domain and range values produces a piecewise scale."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"performance",children:"Performance"}),"\n",(0,t.jsx)(n.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,t.jsx)(n.p,{children:"The following subcomponents are accessible using a screen reader:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Rectangle "}),": The following attributes provide an accessible description for the rectangle."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"role"}),' = "img"']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aria-label"}),' = "{xCoordinate}, {yCoordinate}. {legend}, {rectangleValue}. {description}."']}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Users can customize this description using the callOutAccessibilityData prop."}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"testing",children:"Testing"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"Test coverage report",src:s(2491).Z+"",width:"3680",height:"1060"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"/fluentui-charting-contrib/docs/Test%20Plans/HeatMapChart/ComponentTests",children:"HeatMapChart test plan"})}),"\n",(0,t.jsx)(n.h2,{id:"variants",children:"Variants"}),"\n",(0,t.jsx)(n.p,{children:"Here are the props available for customizing the heatmap chart:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"data"})," (required): Use this prop to populate the chart by providing a series of groups, each containing data for a series of rectangles."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"domainValuesForColorScale"})," and ",(0,t.jsx)(n.strong,{children:"rangeValuesForColorScale"})," (required): These props are used to generate a scale that transforms rectangle values into colors. The domainValuesForColorScale prop accepts an array of numbers, and the rangeValuesForColorScale prop accepts an array of CSS color strings. For optimal results, ensure the length of these arrays is the same."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"xAxisDateFormatString"}),": Use this prop to specify a custom string format for formatting date-based x-axis labels. For more information, refer to ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-time-format#locale_format",children:"d3-time-format | D3 by Observable (d3js.org)"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"yAxisDateFormatString"}),": Use this prop to specify a custom string format for formatting date-based y-axis labels. For more information, refer to ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-time-format#locale_format",children:"d3-time-format | D3 by Observable (d3js.org)"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"xAxisNumberFormatString"}),": Use this prop to specify a custom string format for formatting numeric x-axis labels. For more information, refer to ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-format#locale_format",children:"d3-format | D3 by Observable (d3js.org)"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"yAxisNumberFormatString"}),": Use this prop to specify a custom string format for formatting numeric y-axis labels. For more information, refer to ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-format#locale_format",children:"d3-format | D3 by Observable (d3js.org)"})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"xAxisStringFormatter"}),": Use this prop to provide a custom function for formatting string-based x-axis labels."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"yAxisStringFormatter"}),": Use this prop to provide a custom function for formatting string-based y-axis labels."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["For more details, see ",(0,t.jsx)(n.a,{href:"https://developer.microsoft.com/en-us/fluentui#/controls/web/heatmapchart",children:"Fluent UI - Controls - React - HeatMapChart"})]}),"\n",(0,t.jsx)(n.h2,{id:"theming",children:"Theming"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["The styles file contains a function called getHeatMapChartStyles, which returns styles for different areas or subcomponents of the chart based on the props passed to it. The base component is wrapped with the styled HOC, which passes the theme (set by the user) and the concatenated styles (obtained from the styling function and any additional styles provided by the user) as props to the base component. Within the base component, the styles are applied to corresponding elements after converting them into class names. This conversion is done by passing theme and other style props as arguments to the function returned by the classNamesFunction utility. To learn more about component styling, refer ",(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/wiki/Component-Styling",children:"this"}),"."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"debugging",children:"Debugging"}),"\n",(0,t.jsx)(n.h2,{id:"error-scenarios",children:"Error scenarios"}),"\n",(0,t.jsx)(n.h2,{id:"localization-aspects",children:"Localization aspects"}),"\n",(0,t.jsx)(n.p,{children:"Currently, the chart supports localization only for numeric texts inside rectangles."}),"\n",(0,t.jsx)(n.h2,{id:"some-notable-prs-and-their-brief-description",children:"Some notable PRs and their brief description"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/pull/28321",children:"Fixing re-render issue for all charts when empty by srmukher \xb7 Pull Request #28321 \xb7 microsoft/fluentui (github.com)"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/pull/25616",children:"Fix wrong narration in browse mode by krkshitij \xb7 Pull Request #25616 \xb7 microsoft/fluentui (github.com)"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/pull/24563",children:"Fix legends selection bugs by krkshitij \xb7 Pull Request #24563 \xb7 microsoft/fluentui (github.com)"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/pull/24903",children:"Fix wrong narration when legend selected by krkshitij \xb7 Pull Request #24903 \xb7 microsoft/fluentui (github.com)"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/pull/21750",children:"Fix charting callout not hoverable using mouse and callout flickering by AtishayMsft \xb7 Pull Request #21750 \xb7 microsoft/fluentui (github.com)"})}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"future-improvements",children:"Future improvements"}),"\n",(0,t.jsx)(n.h2,{id:"rendering-details",children:"Rendering details"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"When no data is provided by the user, an empty div is rendered in place of the chart."}),"\n",(0,t.jsxs)(n.li,{children:["Currently, a string axis is created regardless of the type of x and y values, which uses the d3 ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-scale/band",children:"scaleBand"})," utility. This utility has a ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-scale/band#band_bandwidth",children:"bandwidth"})," property that is used to determine the width and height of rectangles. The d3 ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-scale/linear",children:"scaleLinear"})," and ",(0,t.jsx)(n.a,{href:"https://d3js.org/d3-scale/time",children:"scaleTime"})," utilities, used for number and date axes respectively, don't have such a property."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"interactions",children:"Interactions"}),"\n",(0,t.jsx)(n.p,{children:"The chart is wrapped with a FocusZone component to allow focus on its interactive subcomponents. The following subcomponents are accessible using the keyboard:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Rectangle "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"data-is-focusable"}),": True."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onFocus"}),": Shows a callout near the element containing the rectangle details."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onBlur"}),": Does nothing."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Legend "})," (Legends)"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"data-is-focusable"}),": Depends on the allowFocusOnLegends prop, which is true by default."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onFocus"}),": Highlights the associated rectangles."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onBlur"}),": Unhighlights the associated rectangles."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Users can interact with the following subcomponents using the mouse:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Rectangle"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:""}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseOver"}),": Shows a callout near the element containing the rectangle details."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseOut"}),": Does nothing."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:""}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onClick"}),": Calls the onClick prop associated with the rectangle if provided."]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Root "})," (CartesianChart)"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseLeave"}),": Hides the callout if it is visible."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Legend
"})," (Legends)"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseOver"}),": Highlights the associated rectangles."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseOut"}),": Unhighlights the associated rectangles."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onClick"}),": Highlights the associated rectangles if the legend is not already selected, otherwise unhighlights them."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"known-issues",children:"Known issues"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/issues/30128",children:"[Bug]: Date axis labels formatted to show only the year are being localized as if they were numbers \xb7 Issue #30128 \xb7 microsoft/fluentui"})}),"\n",(0,t.jsx)(n.li,{children:"Y-axis labels are accessible through assistive technologies, such as screen readers."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"design-figma",children:"Design figma"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.a,{href:"https://www.figma.com/file/7ywOrSjGW5DEkNETagzXf2/Heat-map?type=design&t=FUFuc5mzEF4G6hag-6",children:"Heat map - Figma"})}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"learnings",children:"Learnings"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Long y axis labels get clipped which can be fixed by passing custom left or right margin to the chart. In contrast, horizontal bar chart with axis calculates longest label width and updates the margin with that value to prevent the labels from clipping."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"extensions",children:"Extensions"})]})}function d(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(h,{...e})}):h(e)}},2491:(e,n,s)=>{s.d(n,{Z:()=>t});const t=s.p+"assets/images/heatmapchart-test-coverage-020d10786fd47cd143a84149f2665adb.png"},1151:(e,n,s)=>{s.d(n,{Z:()=>o,a:()=>a});var t=s(7294);const i={},r=t.createContext(i);function a(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/80060540.a76e6a01.js b/assets/js/80060540.a76e6a01.js
new file mode 100644
index 0000000000..e7dc15b3af
--- /dev/null
+++ b/assets/js/80060540.a76e6a01.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdocsite=self.webpackChunkdocsite||[]).push([[1321],{9431:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>l,toc:()=>h});var t=s(5893),i=s(1151);const r={},a="Contributor guide: Gauge Chart",l={id:"Charting-Concepts/GaugeChart",title:"Contributor guide: Gauge Chart",description:"Gauge chart measures the progress of a metric against its target and its primary components are a speedometer and a needle. The speedometer usually consists of color-coded segments progressing value from left to right.",source:"@site/../../docs/Charting-Concepts/GaugeChart.md",sourceDirName:"Charting-Concepts",slug:"/Charting-Concepts/GaugeChart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/GaugeChart",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Contributor guide: Donut Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/DonutChart"},next:{title:"Contributor guide: Grouped Vertical Bar Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/GroupedVerticalBarChart"}},o={},h=[{value:"Use cases",id:"use-cases",level:2},{value:"Dev Design details",id:"dev-design-details",level:2},{value:"Mathematical/Geometrical concepts",id:"mathematicalgeometrical-concepts",level:2},{value:"Performance",id:"performance",level:2},{value:"Accessibility",id:"accessibility",level:2},{value:"Testing",id:"testing",level:2},{value:"Variants",id:"variants",level:2},{value:"Theming",id:"theming",level:2},{value:"Debugging",id:"debugging",level:2},{value:"Error scenarios",id:"error-scenarios",level:2},{value:"Localization aspects",id:"localization-aspects",level:2},{value:"Some notable PRs and their brief description",id:"some-notable-prs-and-their-brief-description",level:2},{value:"Future improvements",id:"future-improvements",level:2},{value:"Rendering details",id:"rendering-details",level:2},{value:"Interactions",id:"interactions",level:2},{value:"Known issues",id:"known-issues",level:2},{value:"Design figma",id:"design-figma",level:2},{value:"Learnings",id:"learnings",level:2},{value:"Extensions",id:"extensions",level:2}];function c(e){const n={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"contributor-guide-gauge-chart",children:"Contributor guide: Gauge Chart"}),"\n",(0,t.jsx)(n.p,{children:"Gauge chart measures the progress of a metric against its target and its primary components are a speedometer and a needle. The speedometer usually consists of color-coded segments progressing value from left to right."}),"\n",(0,t.jsx)(n.h2,{id:"use-cases",children:"Use cases"}),"\n",(0,t.jsx)(n.p,{children:"Gauge chart offers a quick and intuitive way to evaluate a single value within a specific range and its relation to targets or thresholds. Here are some common use cases for gauge chart:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Performance Monitoring: Track metrics like sales or customer satisfaction against predefined benchmarks."}),"\n",(0,t.jsx)(n.li,{children:"KPI Tracking: Monitor progress towards goals by displaying key performance indicators."}),"\n",(0,t.jsx)(n.li,{children:"Health and Fitness: Display health parameters such as heart rate or steps taken."}),"\n",(0,t.jsx)(n.li,{children:"Survey Feedback: Visualize satisfaction scores or survey feedback."}),"\n",(0,t.jsx)(n.li,{children:"Resource Allocation: Show resource distribution across different categories."}),"\n",(0,t.jsx)(n.li,{children:"Risk Assessment: Assess risk levels or safety ratings."}),"\n",(0,t.jsx)(n.li,{children:"Project Progress: Represent project or task completion percentage."}),"\n",(0,t.jsx)(n.li,{children:"Quality Control: Monitor defect or error rates."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"dev-design-details",children:"Dev Design details"}),"\n",(0,t.jsx)("img",{src:s(6399).Z,alt:"Gauge chart dev design",width:"300"}),"\n",(0,t.jsx)(n.p,{children:"The Gauge chart comprises the following components and subcomponents:"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"GaugeChart"}),": This is the main component responsible for rendering and managing subcomponents such as chart title, limits (min and max values), segments, needle, chart value, sublabel, and other components. It handles user interactions and provides the overall functionality of the chart."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"FocusZone"}),": This component facilitates focus navigation within the Gauge chart. It allows users to navigate between focusable subcomponents, such as segments and the needle, using the arrow and tab keys."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"SVGTooltipText"}),": This component is used to render the chart value and sublabel as SVG text elements with an optional tooltip. The tooltip is triggered when the content overflows and appears when users hover over or focus on the element."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Legends"}),": Legends are a list of strings that identify each segment in the Gauge chart. The Legends component renders a button for each legend, enabling users to highlight the corresponding segment by hovering over or selecting the legend."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Callout"}),": This component functions as an anchored tip, offering additional information about the segment, needle, or chart value that is currently hovered over or focused without blocking the user."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Segments"}),": These are the color-coded intervals that indicate different levels or categories."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Needle"}),": It indicates the current value of the chart within a range."]}),"\n",(0,t.jsx)(n.h2,{id:"mathematicalgeometrical-concepts",children:"Mathematical/Geometrical concepts"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Segments in the chart are generated using the ",(0,t.jsx)(n.a,{href:"https://github.com/d3/d3-shape#arcs",children:"arc"})," utility from the ",(0,t.jsx)(n.a,{href:"https://github.com/d3/d3-shape",children:"d3-shape"})," library. This utility returns an arc generator that produces path data based on specified angle and radius values. The arcs are always centred at coordinates {0, 0}, so a transform is applied to move the arc to a different position."]}),"\n",(0,t.jsx)(n.li,{children:"Here, an angle of 0 radians corresponds to the positive y-axis. The arc is created in a clockwise direction if the signed difference between the start and end angles is positive. The angular span of each segment is determined by the ratio of its individual size to the total size of all segments."}),"\n",(0,t.jsxs)(n.li,{children:["The ",(0,t.jsx)(n.a,{href:"https://github.com/d3/d3-shape#arc_padAngle",children:"pad angle"})," is converted to a fixed linear distance separating adjacent arcs, defined as padRadius * padAngle. As per the design doc, the desired distance between adjacent arcs is 2px, referred to as ARC_PADDING. To maintain this distance between the outer boundaries of the arcs, padRadius is kept the same as outerRadius, and padAngle is calculated as ARC_PADDING / padRadius. Note that if the inner radius or angular span is small relative to the pad angle, it may not be possible to maintain parallel edges between adjacent arcs."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"performance",children:"Performance"}),"\n",(0,t.jsx)(n.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,t.jsx)(n.p,{children:"The following subcomponents are accessible using a screen reader:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Chart "}),": The following attributes provide an accessible name describing the contents of the chart."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"role"}),' = "presentation"']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aria-label"}),' = "This is a gauge chart with {numSegments} section represented."']}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Min value "}),": It is already accessible to screen readers, but the content doesn\u2019t convey complete information. The following attributes specify a different accessible name for the min value."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"role"}),' = "img"']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aria-label"}),' = "Min value: {minValue}"']}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Max value "}),": It is already accessible to screen readers, but the content doesn\u2019t convey complete information. The following attributes specify a different accessible name for the max value."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"role"}),' = "img"']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aria-label"}),' = "Max value: {adjustedMaxValue}"']}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Segments "}),": The following attributes provide an accessible name describing the segment."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"role"}),' = "img"']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aria-label"}),' =\n"{segmentLegend}, {segmentStart} - {segmentEnd}" when variant is GaugeChartVariant.MultipleSegments, or\n"{segmentLegend}, {segmentSize} out of {totalSizeOfSegments} or {segmentSizeInPercent}%" when variant is GaugeChartVariant.SingleSegment.']}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Users can provide a custom accessible name or description for a segment using its accessibilityData prop."}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Chart value "}),": It is already accessible to screen readers, but the content doesn\u2019t convey complete information. The following attributes specify a different accessible name for the chart value."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"role"}),' = "img"']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aria-label"}),' = "Current value: {formattedChartValue}"']}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Sublabel "}),": It is already accessible to screen readers. The following attributes provide an accessible name for the sublabel."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"role"}),' = "img"']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aria-label"})," = the sublabel itself"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"testing",children:"Testing"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"Test coverage report",src:s(9485).Z+"",width:"1430",height:"456"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"/fluentui-charting-contrib/docs/Test%20Plans/GaugeChart/ComponentTests",children:"GaugeChart test plan"})}),"\n",(0,t.jsx)(n.h2,{id:"variants",children:"Variants"}),"\n",(0,t.jsx)(n.p,{children:"Here are the props available for customizing the gauge chart:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"width"})," and ",(0,t.jsx)(n.strong,{children:"height"}),": These props determine the diameter of the gauge. If not provided, a default diameter of 140px is used."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"chartTitle"}),": Use this prop to render a title above the gauge."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"chartValue"}),": This required prop controls the rotation of the needle. If the chart value is less than the minimum, the needle points to the min value. Similarly, if it exceeds the maximum, the needle points to the max value."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"segments"}),": Use this required prop to divide the gauge into colored sections. The segments can have fixed sizes or vary with the chart value to create a sweeping effect. Negative segment sizes are treated as 0."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"minValue"}),": Use this prop if the minimum value of the gauge is different from 0."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"maxValue"}),": Use this prop to render a placeholder segment when the difference between the max and min values is larger than the total size of the segments. If the difference is smaller, the max value will be adjusted so that the total size of the segments matches the difference."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"sublabel"}),": Use this prop to render additional text below the chart value."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"hideMinMax"}),": Set this prop to true to hide the min and max values of the gauge."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"chartValueFormat"}),": This prop controls how the chart value is displayed. Set it to one of the following options:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"A custom formatter function that returns a string representing the chart value."}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"GaugeValueFormat.Fraction"}),": Renders the chart value as a fraction."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"GaugeValueFormat.Percentage"}),": Renders the chart value as a percentage. This is the default format."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Note: If the min value is non-zero and no formatter function is provided, the chart value will be rendered as a number."}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"variant"}),": This prop determines the presentation style of the gauge chart. Set it to one of the following options:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"GaugeChartVariant.SingleSegment"}),": Displays and announces the segment sizes as percentages."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"GaugeChartVariant.MultipleSegments"}),": Displays and announces the segment sizes as ranges. This is the default variant."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["For more details, see ",(0,t.jsx)(n.a,{href:"https://developer.microsoft.com/en-us/fluentui#/controls/web/gaugechart",children:"Fluent UI - Controls - React - GaugeChart"})]}),"\n",(0,t.jsx)(n.h2,{id:"theming",children:"Theming"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["The styles file contains a function called getStyles, which returns styles for different areas or subcomponents of the chart based on the props passed to it. The base component is wrapped with the styled HOC, which passes the theme (set by the user) and the concatenated styles (obtained from the styling function and any additional styles provided by the user) as props to the base component. Within the base component, the styles are applied to corresponding elements after converting them into class names. This conversion is done by passing theme and other style props as arguments to the function returned by the classNamesFunction utility. To learn more about component styling, refer ",(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/wiki/Component-Styling",children:"this"}),"."]}),"\n",(0,t.jsx)(n.li,{children:"For each segment in the chart, the color prop is optional. If the color prop is not defined, a color is selected from the qualitative palette using the getNextColor utility. However, if the color prop is defined, the getColorFromToken utility is used to determine the appropriate CSS color. If the value of the color prop is a theme-specific color token from the DataVizPalette, the utility will return the corresponding CSS color. Otherwise, if the color prop is already a valid CSS color, it will be returned as is."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"debugging",children:"Debugging"}),"\n",(0,t.jsx)(n.h2,{id:"error-scenarios",children:"Error scenarios"}),"\n",(0,t.jsx)(n.h2,{id:"localization-aspects",children:"Localization aspects"}),"\n",(0,t.jsx)(n.p,{children:"Currently, the chart supports localization only for the callout content."}),"\n",(0,t.jsx)(n.h2,{id:"some-notable-prs-and-their-brief-description",children:"Some notable PRs and their brief description"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/pull/27170",children:"Add gauge chart by krkshitij \xb7 Pull Request #27170 \xb7 microsoft/fluentui (github.com)"})}),"\n",(0,t.jsx)(n.h2,{id:"future-improvements",children:"Future improvements"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsx)(n.li,{children:"Add min width and height"}),"\n",(0,t.jsx)(n.li,{children:"Show message when chart is empty"}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"rendering-details",children:"Rendering details"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The calculation of margins for the Gauge chart takes into account the presence of the chart title, sublabel, and limits (min and max values) to ensure that they do not overlap with the segments. Additionally, there is an extra margin of 16px around the gauge, referred to as GAUGE_MARGIN."}),"\n",(0,t.jsx)(n.li,{children:"Assuming that the legends do not wrap, the legends container is considered to have a fixed height of 24px. This helps calculate the available height for the element."}),"\n",(0,t.jsx)(n.li,{children:"The outer radius of the gauge is calculated based on the width and height props. If these props are not provided, the viewable width and height of the root div when the component mounts are used instead."}),"\n",(0,t.jsx)(n.li,{children:"According to the design doc, the font size of the chart value and the arc width vary depending on the size of the gauge chart. We cannot use CSS media queries in this case because the styles would be conditionally applied based on browser and operating system parameters. Instead, we use the BREAKPOINTS constant to determine the appropriate inner radius of the gauge and the font size of the chart value."}),"\n",(0,t.jsx)(n.li,{children:"If the difference between the max and min values exceeds the total size of all segments, a placeholder segment is rendered with a value equal to the difference. However, if the difference is smaller, the maximum value is adjusted to the correct value."}),"\n",(0,t.jsx)(n.li,{children:"The sweep fraction is calculated using the chart value, min value, and adjusted max value to determine the rotation of the needle."}),"\n",(0,t.jsx)(n.li,{children:"The min and max values are formatted with SI prefixes, as mentioned in the design doc. This formatting ensures that the values do not exceed 6 characters, equivalent to a width of 36px, referred to as LABEL_WIDTH."}),"\n",(0,t.jsx)(n.li,{children:"By default, the focus outline for segments is rectangular in shape. So the default outline is removed, and a custom outline is shown or hidden based on focus and blur events by adjusting the stroke width."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"interactions",children:"Interactions"}),"\n",(0,t.jsx)(n.p,{children:"The chart is wrapped with a FocusZone component to allow focus on its interactive subcomponents. The following subcomponents are accessible using the keyboard:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Segments "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"data-is-focusable"}),": True"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onFocus"}),": Shows a callout near the element containing the chart value and all segments, along with their respective ranges"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onBlur"}),": Hides the callout if it is visible"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Needle "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"data-is-focusable"}),": True"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onFocus"}),": Shows a callout near the element containing the chart value and all segments, along with their respective ranges"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onBlur"}),": Hides the callout if it is visible"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Chart value "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"data-is-focusable"}),": True if the text content overflows the specified width and height"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onFocus"}),": Shows a tooltip with the complete content"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onBlur"}),": Hides the tooltip if it is visible"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Legend "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"data-is-focusable"}),": Depends on the allowFocusOnLegends prop, which is true by default"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onFocus"}),": Highlights the corresponding segment"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onBlur"}),":\tUnhighlights the corresponding segment"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Users can interact with the following subcomponents using the mouse:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Segments "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseEnter"}),": Shows a callout near the element containing the chart value and all segments, along with their respective ranges"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseMove"}),": Shows the callout if it is not already visible"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Needle "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseEnter"}),": Shows a callout near the element containing the chart value and all segments, along with their respective ranges"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseMove"}),": Shows the callout if it is not already visible"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Chart value"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:""}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseEnter"}),": Shows a callout near the element containing the chart value and all segments, along with their respective ranges"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseMove"}),": Shows the callout if it is not already visible"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:""}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseEnter"}),": Shows a tooltip with the complete content if the text content overflows the specified width and height"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseLeave"}),": Hides the tooltip if it is visible"]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Sublabel "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseEnter"}),": Shows a tooltip with the complete content if the text content overflows the specified width and height"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseLeave"}),": Hides the tooltip if it is visible"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Chart "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseLeave"}),": Hides the callout if it is visible"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Legend "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseOver"}),": Highlights the corresponding segment"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseOut"}),": Unhighlights the corresponding segment"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onClick"}),": Highlights the corresponding segment if the legend is not already selected, otherwise unhighlights it"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"known-issues",children:"Known issues"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:['The chart is assigned the role of presentation. The "presentation" role and its synonym "none" remove an element\'s implicit ARIA semantics from being exposed to the accessibility tree. For more details, see ',(0,t.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role",children:"ARIA: presentation role - Accessibility | MDN"})]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"design-figma",children:"Design figma"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://www.figma.com/file/oNWKEgIOCSLElvMZPOVMCq/ARCHIVED-Fluent-Data-Viz-(WIP)?type=design&node-id=2415-274387&mode=design&t=jdEfxXd3aMNuyWuz-4",children:"Gauge chart \u2013 Figma"})}),"\n",(0,t.jsx)(n.h2,{id:"learnings",children:"Learnings"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The needle is expanded from all sides by half the stroke width to maintain consistent dimensions with the design doc. This is necessary because the stroke is always centered on the outline, with half on the inside and half on the outside."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"extensions",children:"Extensions"})]})}function d(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},6399:(e,n,s)=>{s.d(n,{Z:()=>t});const t=s.p+"assets/images/gaugechart-dev-design-35b9551ffa7dc491d20730e4a65e9c2c.png"},9485:(e,n,s)=>{s.d(n,{Z:()=>t});const t=s.p+"assets/images/gaugechart-test-coverage-eb67779e6e7ab65f6e1aebce72af193d.png"},1151:(e,n,s)=>{s.d(n,{Z:()=>l,a:()=>a});var t=s(7294);const i={},r=t.createContext(i);function a(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/80060540.f9288bde.js b/assets/js/80060540.f9288bde.js
deleted file mode 100644
index 0991ae4447..0000000000
--- a/assets/js/80060540.f9288bde.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkdocsite=self.webpackChunkdocsite||[]).push([[1321],{9431:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>o,contentTitle:()=>a,default:()=>d,frontMatter:()=>r,metadata:()=>l,toc:()=>h});var t=s(5893),i=s(1151);const r={},a="Contributor guide: Gauge Chart",l={id:"Charting-Concepts/GaugeChart",title:"Contributor guide: Gauge Chart",description:"Gauge chart measures the progress of a metric against its target and its primary components are a speedometer and a needle. The speedometer usually consists of color-coded segments progressing value from left to right.",source:"@site/../../docs/Charting-Concepts/GaugeChart.md",sourceDirName:"Charting-Concepts",slug:"/Charting-Concepts/GaugeChart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/GaugeChart",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Contributor guide: Area Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/AreaChart"},next:{title:"Contributor guide: Heatmap Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/HeatMapChart"}},o={},h=[{value:"Use cases",id:"use-cases",level:2},{value:"Dev Design details",id:"dev-design-details",level:2},{value:"Mathematical/Geometrical concepts",id:"mathematicalgeometrical-concepts",level:2},{value:"Performance",id:"performance",level:2},{value:"Accessibility",id:"accessibility",level:2},{value:"Testing",id:"testing",level:2},{value:"Variants",id:"variants",level:2},{value:"Theming",id:"theming",level:2},{value:"Debugging",id:"debugging",level:2},{value:"Error scenarios",id:"error-scenarios",level:2},{value:"Localization aspects",id:"localization-aspects",level:2},{value:"Some notable PRs and their brief description",id:"some-notable-prs-and-their-brief-description",level:2},{value:"Future improvements",id:"future-improvements",level:2},{value:"Rendering details",id:"rendering-details",level:2},{value:"Interactions",id:"interactions",level:2},{value:"Known issues",id:"known-issues",level:2},{value:"Design figma",id:"design-figma",level:2},{value:"Learnings",id:"learnings",level:2},{value:"Extensions",id:"extensions",level:2}];function c(e){const n={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"contributor-guide-gauge-chart",children:"Contributor guide: Gauge Chart"}),"\n",(0,t.jsx)(n.p,{children:"Gauge chart measures the progress of a metric against its target and its primary components are a speedometer and a needle. The speedometer usually consists of color-coded segments progressing value from left to right."}),"\n",(0,t.jsx)(n.h2,{id:"use-cases",children:"Use cases"}),"\n",(0,t.jsx)(n.p,{children:"Gauge chart offers a quick and intuitive way to evaluate a single value within a specific range and its relation to targets or thresholds. Here are some common use cases for gauge chart:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"Performance Monitoring: Track metrics like sales or customer satisfaction against predefined benchmarks."}),"\n",(0,t.jsx)(n.li,{children:"KPI Tracking: Monitor progress towards goals by displaying key performance indicators."}),"\n",(0,t.jsx)(n.li,{children:"Health and Fitness: Display health parameters such as heart rate or steps taken."}),"\n",(0,t.jsx)(n.li,{children:"Survey Feedback: Visualize satisfaction scores or survey feedback."}),"\n",(0,t.jsx)(n.li,{children:"Resource Allocation: Show resource distribution across different categories."}),"\n",(0,t.jsx)(n.li,{children:"Risk Assessment: Assess risk levels or safety ratings."}),"\n",(0,t.jsx)(n.li,{children:"Project Progress: Represent project or task completion percentage."}),"\n",(0,t.jsx)(n.li,{children:"Quality Control: Monitor defect or error rates."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"dev-design-details",children:"Dev Design details"}),"\n",(0,t.jsx)("img",{src:s(6399).Z,alt:"Gauge chart dev design",width:"300"}),"\n",(0,t.jsx)(n.p,{children:"The Gauge chart comprises the following components and subcomponents:"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"GaugeChart"}),": This is the main component responsible for rendering and managing subcomponents such as chart title, limits (min and max values), segments, needle, chart value, sublabel, and other components. It handles user interactions and provides the overall functionality of the chart."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"FocusZone"}),": This component facilitates focus navigation within the Gauge chart. It allows users to navigate between focusable subcomponents, such as segments and the needle, using the arrow and tab keys."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"SVGTooltipText"}),": This component is used to render the chart value and sublabel as SVG text elements with an optional tooltip. The tooltip is triggered when the content overflows and appears when users hover over or focus on the element."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Legends"}),": Legends are a list of strings that identify each segment in the Gauge chart. The Legends component renders a button for each legend, enabling users to highlight the corresponding segment by hovering over or selecting the legend."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Callout"}),": This component functions as an anchored tip, offering additional information about the segment, needle, or chart value that is currently hovered over or focused without blocking the user."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Segments"}),": These are the color-coded intervals that indicate different levels or categories."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Needle"}),": It indicates the current value of the chart within a range."]}),"\n",(0,t.jsx)(n.h2,{id:"mathematicalgeometrical-concepts",children:"Mathematical/Geometrical concepts"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Segments in the chart are generated using the ",(0,t.jsx)(n.a,{href:"https://github.com/d3/d3-shape#arcs",children:"arc"})," utility from the ",(0,t.jsx)(n.a,{href:"https://github.com/d3/d3-shape",children:"d3-shape"})," library. This utility returns an arc generator that produces path data based on specified angle and radius values. The arcs are always centred at coordinates {0, 0}, so a transform is applied to move the arc to a different position."]}),"\n",(0,t.jsx)(n.li,{children:"Here, an angle of 0 radians corresponds to the positive y-axis. The arc is created in a clockwise direction if the signed difference between the start and end angles is positive. The angular span of each segment is determined by the ratio of its individual size to the total size of all segments."}),"\n",(0,t.jsxs)(n.li,{children:["The ",(0,t.jsx)(n.a,{href:"https://github.com/d3/d3-shape#arc_padAngle",children:"pad angle"})," is converted to a fixed linear distance separating adjacent arcs, defined as padRadius * padAngle. As per the design doc, the desired distance between adjacent arcs is 2px, referred to as ARC_PADDING. To maintain this distance between the outer boundaries of the arcs, padRadius is kept the same as outerRadius, and padAngle is calculated as ARC_PADDING / padRadius. Note that if the inner radius or angular span is small relative to the pad angle, it may not be possible to maintain parallel edges between adjacent arcs."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"performance",children:"Performance"}),"\n",(0,t.jsx)(n.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,t.jsx)(n.p,{children:"The following subcomponents are accessible using a screen reader:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Chart "}),": The following attributes provide an accessible name describing the contents of the chart."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"role"}),' = "presentation"']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aria-label"}),' = "This is a gauge chart with {numSegments} section represented."']}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Min value "}),": It is already accessible to screen readers, but the content doesn\u2019t convey complete information. The following attributes specify a different accessible name for the min value."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"role"}),' = "img"']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aria-label"}),' = "Min value: {minValue}"']}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Max value "}),": It is already accessible to screen readers, but the content doesn\u2019t convey complete information. The following attributes specify a different accessible name for the max value."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"role"}),' = "img"']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aria-label"}),' = "Max value: {adjustedMaxValue}"']}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Segments "}),": The following attributes provide an accessible name describing the segment."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"role"}),' = "img"']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aria-label"}),' =\n"{segmentLegend}, {segmentStart} - {segmentEnd}" when variant is GaugeChartVariant.MultipleSegments, or\n"{segmentLegend}, {segmentSize} out of {totalSizeOfSegments} or {segmentSizeInPercent}%" when variant is GaugeChartVariant.SingleSegment.']}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Users can provide a custom accessible name or description for a segment using its accessibilityData prop."}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Chart value "}),": It is already accessible to screen readers, but the content doesn\u2019t convey complete information. The following attributes specify a different accessible name for the chart value."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"role"}),' = "img"']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aria-label"}),' = "Current value: {formattedChartValue}"']}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Sublabel "}),": It is already accessible to screen readers. The following attributes provide an accessible name for the sublabel."]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"role"}),' = "img"']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"aria-label"})," = the sublabel itself"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"testing",children:"Testing"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"Test coverage report",src:s(9485).Z+"",width:"1430",height:"456"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"/fluentui-charting-contrib/docs/Test%20Plans/GaugeChart/ComponentTests",children:"GaugeChart test plan"})}),"\n",(0,t.jsx)(n.h2,{id:"variants",children:"Variants"}),"\n",(0,t.jsx)(n.p,{children:"Here are the props available for customizing the gauge chart:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"width"})," and ",(0,t.jsx)(n.strong,{children:"height"}),": These props determine the diameter of the gauge. If not provided, a default diameter of 140px is used."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"chartTitle"}),": Use this prop to render a title above the gauge."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"chartValue"}),": This required prop controls the rotation of the needle. If the chart value is less than the minimum, the needle points to the min value. Similarly, if it exceeds the maximum, the needle points to the max value."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"segments"}),": Use this required prop to divide the gauge into colored sections. The segments can have fixed sizes or vary with the chart value to create a sweeping effect. Negative segment sizes are treated as 0."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"minValue"}),": Use this prop if the minimum value of the gauge is different from 0."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"maxValue"}),": Use this prop to render a placeholder segment when the difference between the max and min values is larger than the total size of the segments. If the difference is smaller, the max value will be adjusted so that the total size of the segments matches the difference."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"sublabel"}),": Use this prop to render additional text below the chart value."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"hideMinMax"}),": Set this prop to true to hide the min and max values of the gauge."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"chartValueFormat"}),": This prop controls how the chart value is displayed. Set it to one of the following options:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"A custom formatter function that returns a string representing the chart value."}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"GaugeValueFormat.Fraction"}),": Renders the chart value as a fraction."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"GaugeValueFormat.Percentage"}),": Renders the chart value as a percentage. This is the default format."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Note: If the min value is non-zero and no formatter function is provided, the chart value will be rendered as a number."}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"variant"}),": This prop determines the presentation style of the gauge chart. Set it to one of the following options:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"GaugeChartVariant.SingleSegment"}),": Displays and announces the segment sizes as percentages."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.em,{children:"GaugeChartVariant.MultipleSegments"}),": Displays and announces the segment sizes as ranges. This is the default variant."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["For more details, see ",(0,t.jsx)(n.a,{href:"https://developer.microsoft.com/en-us/fluentui#/controls/web/gaugechart",children:"Fluent UI - Controls - React - GaugeChart"})]}),"\n",(0,t.jsx)(n.h2,{id:"theming",children:"Theming"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["The styles file contains a function called getStyles, which returns styles for different areas or subcomponents of the chart based on the props passed to it. The base component is wrapped with the styled HOC, which passes the theme (set by the user) and the concatenated styles (obtained from the styling function and any additional styles provided by the user) as props to the base component. Within the base component, the styles are applied to corresponding elements after converting them into class names. This conversion is done by passing theme and other style props as arguments to the function returned by the classNamesFunction utility. To learn more about component styling, refer ",(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/wiki/Component-Styling",children:"this"}),"."]}),"\n",(0,t.jsx)(n.li,{children:"For each segment in the chart, the color prop is optional. If the color prop is not defined, a color is selected from the qualitative palette using the getNextColor utility. However, if the color prop is defined, the getColorFromToken utility is used to determine the appropriate CSS color. If the value of the color prop is a theme-specific color token from the DataVizPalette, the utility will return the corresponding CSS color. Otherwise, if the color prop is already a valid CSS color, it will be returned as is."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"debugging",children:"Debugging"}),"\n",(0,t.jsx)(n.h2,{id:"error-scenarios",children:"Error scenarios"}),"\n",(0,t.jsx)(n.h2,{id:"localization-aspects",children:"Localization aspects"}),"\n",(0,t.jsx)(n.p,{children:"Currently, the chart supports localization only for the callout content."}),"\n",(0,t.jsx)(n.h2,{id:"some-notable-prs-and-their-brief-description",children:"Some notable PRs and their brief description"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/pull/27170",children:"Add gauge chart by krkshitij \xb7 Pull Request #27170 \xb7 microsoft/fluentui (github.com)"})}),"\n",(0,t.jsx)(n.h2,{id:"future-improvements",children:"Future improvements"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsx)(n.li,{children:"Add min width and height"}),"\n",(0,t.jsx)(n.li,{children:"Show message when chart is empty"}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"rendering-details",children:"Rendering details"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The calculation of margins for the Gauge chart takes into account the presence of the chart title, sublabel, and limits (min and max values) to ensure that they do not overlap with the segments. Additionally, there is an extra margin of 16px around the gauge, referred to as GAUGE_MARGIN."}),"\n",(0,t.jsx)(n.li,{children:"Assuming that the legends do not wrap, the legends container is considered to have a fixed height of 24px. This helps calculate the available height for the element."}),"\n",(0,t.jsx)(n.li,{children:"The outer radius of the gauge is calculated based on the width and height props. If these props are not provided, the viewable width and height of the root div when the component mounts are used instead."}),"\n",(0,t.jsx)(n.li,{children:"According to the design doc, the font size of the chart value and the arc width vary depending on the size of the gauge chart. We cannot use CSS media queries in this case because the styles would be conditionally applied based on browser and operating system parameters. Instead, we use the BREAKPOINTS constant to determine the appropriate inner radius of the gauge and the font size of the chart value."}),"\n",(0,t.jsx)(n.li,{children:"If the difference between the max and min values exceeds the total size of all segments, a placeholder segment is rendered with a value equal to the difference. However, if the difference is smaller, the maximum value is adjusted to the correct value."}),"\n",(0,t.jsx)(n.li,{children:"The sweep fraction is calculated using the chart value, min value, and adjusted max value to determine the rotation of the needle."}),"\n",(0,t.jsx)(n.li,{children:"The min and max values are formatted with SI prefixes, as mentioned in the design doc. This formatting ensures that the values do not exceed 6 characters, equivalent to a width of 36px, referred to as LABEL_WIDTH."}),"\n",(0,t.jsx)(n.li,{children:"By default, the focus outline for segments is rectangular in shape. So the default outline is removed, and a custom outline is shown or hidden based on focus and blur events by adjusting the stroke width."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"interactions",children:"Interactions"}),"\n",(0,t.jsx)(n.p,{children:"The chart is wrapped with a FocusZone component to allow focus on its interactive subcomponents. The following subcomponents are accessible using the keyboard:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Segments "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"data-is-focusable"}),": True"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onFocus"}),": Shows a callout near the element containing the chart value and all segments, along with their respective ranges"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onBlur"}),": Hides the callout if it is visible"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Needle "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"data-is-focusable"}),": True"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onFocus"}),": Shows a callout near the element containing the chart value and all segments, along with their respective ranges"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onBlur"}),": Hides the callout if it is visible"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Chart value "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"data-is-focusable"}),": True if the text content overflows the specified width and height"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onFocus"}),": Shows a tooltip with the complete content"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onBlur"}),": Hides the tooltip if it is visible"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Legend "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"data-is-focusable"}),": Depends on the allowFocusOnLegends prop, which is true by default"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onFocus"}),": Highlights the corresponding segment"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onBlur"}),":\tUnhighlights the corresponding segment"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Users can interact with the following subcomponents using the mouse:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Segments "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseEnter"}),": Shows a callout near the element containing the chart value and all segments, along with their respective ranges"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseMove"}),": Shows the callout if it is not already visible"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Needle "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseEnter"}),": Shows a callout near the element containing the chart value and all segments, along with their respective ranges"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseMove"}),": Shows the callout if it is not already visible"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Chart value"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:""}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseEnter"}),": Shows a callout near the element containing the chart value and all segments, along with their respective ranges"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseMove"}),": Shows the callout if it is not already visible"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:""}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseEnter"}),": Shows a tooltip with the complete content if the text content overflows the specified width and height"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseLeave"}),": Hides the tooltip if it is visible"]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Sublabel "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseEnter"}),": Shows a tooltip with the complete content if the text content overflows the specified width and height"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseLeave"}),": Hides the tooltip if it is visible"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Chart "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseLeave"}),": Hides the callout if it is visible"]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Legend "})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseOver"}),": Highlights the corresponding segment"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onMouseOut"}),": Unhighlights the corresponding segment"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onClick"}),": Highlights the corresponding segment if the legend is not already selected, otherwise unhighlights it"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"known-issues",children:"Known issues"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:['The chart is assigned the role of presentation. The "presentation" role and its synonym "none" remove an element\'s implicit ARIA semantics from being exposed to the accessibility tree. For more details, see ',(0,t.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role",children:"ARIA: presentation role - Accessibility | MDN"})]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"design-figma",children:"Design figma"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.a,{href:"https://www.figma.com/file/oNWKEgIOCSLElvMZPOVMCq/ARCHIVED-Fluent-Data-Viz-(WIP)?type=design&node-id=2415-274387&mode=design&t=jdEfxXd3aMNuyWuz-4",children:"Gauge chart \u2013 Figma"})}),"\n",(0,t.jsx)(n.h2,{id:"learnings",children:"Learnings"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The needle is expanded from all sides by half the stroke width to maintain consistent dimensions with the design doc. This is necessary because the stroke is always centered on the outline, with half on the inside and half on the outside."}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"extensions",children:"Extensions"})]})}function d(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},6399:(e,n,s)=>{s.d(n,{Z:()=>t});const t=s.p+"assets/images/gaugechart-dev-design-35b9551ffa7dc491d20730e4a65e9c2c.png"},9485:(e,n,s)=>{s.d(n,{Z:()=>t});const t=s.p+"assets/images/gaugechart-test-coverage-eb67779e6e7ab65f6e1aebce72af193d.png"},1151:(e,n,s)=>{s.d(n,{Z:()=>l,a:()=>a});var t=s(7294);const i={},r=t.createContext(i);function a(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/935f2afb.19b11408.js b/assets/js/935f2afb.19b11408.js
deleted file mode 100644
index e69164c027..0000000000
--- a/assets/js/935f2afb.19b11408.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkdocsite=self.webpackChunkdocsite||[]).push([[53],{1109:t=>{t.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Overview","href":"/fluentui-charting-contrib/docs/Overview","docId":"Overview","unlisted":false},{"type":"link","label":"Release Log","href":"/fluentui-charting-contrib/docs/CHANGELOG","docId":"CHANGELOG","unlisted":false},{"type":"link","label":"Start Developing","href":"/fluentui-charting-contrib/docs/Start Developing","docId":"Start Developing","unlisted":false},{"type":"link","label":"Contributor Guide","href":"/fluentui-charting-contrib/docs/Contributor Guide","docId":"Contributor Guide","unlisted":false},{"type":"link","label":"Technical details","href":"/fluentui-charting-contrib/docs/Technical Details","docId":"Technical Details","unlisted":false},{"type":"link","label":"Detailed Implementation Steps","href":"/fluentui-charting-contrib/docs/Detailed Implementation Steps","docId":"Detailed Implementation Steps","unlisted":false},{"type":"category","label":"Charting Concepts","items":[{"type":"link","label":"Contributor guide: Area Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/AreaChart","docId":"Charting-Concepts/AreaChart","unlisted":false},{"type":"link","label":"Contributor guide: Gauge Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/GaugeChart","docId":"Charting-Concepts/GaugeChart","unlisted":false},{"type":"link","label":"Contributor guide: Heatmap Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/HeatMapChart","docId":"Charting-Concepts/HeatMapChart","unlisted":false},{"type":"link","label":"Contributor guide: Horizontal Bar Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/HorizontalBarChart","docId":"Charting-Concepts/HorizontalBarChart","unlisted":false},{"type":"link","label":"Contributor guide: Line Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/LineChart","docId":"Charting-Concepts/LineChart","unlisted":false},{"type":"link","label":"Contributor Guide: Sankey Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/SankeyChart","docId":"Charting-Concepts/SankeyChart","unlisted":false},{"type":"link","label":"Contributor guide: Stacked Bar Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/StackedBarChart","docId":"Charting-Concepts/StackedBarChart","unlisted":false}],"collapsed":true,"collapsible":true},{"type":"link","label":"Debugging","href":"/fluentui-charting-contrib/docs/Debugging","docId":"Debugging","unlisted":false},{"type":"link","label":"Implementation Best Practices","href":"/fluentui-charting-contrib/docs/Implementation Best Practices","docId":"Implementation Best Practices","unlisted":false},{"type":"link","label":"Accessibility","href":"/fluentui-charting-contrib/docs/Accessibility","docId":"Accessibility","unlisted":false},{"type":"link","label":"Colors","href":"/fluentui-charting-contrib/docs/colors","docId":"colors","unlisted":false},{"type":"link","label":"Implementing 2:1 spacing","href":"/fluentui-charting-contrib/docs/implementing-2-to-1-spacing","docId":"implementing-2-to-1-spacing","unlisted":false},{"type":"link","label":"Creating Date Objects For Chart Data","href":"/fluentui-charting-contrib/docs/creating-date-objects-for-chart-data","docId":"creating-date-objects-for-chart-data","unlisted":false},{"type":"link","label":"Testing Strategy","href":"/fluentui-charting-contrib/docs/Testing Strategy","docId":"Testing Strategy","unlisted":false},{"type":"category","label":"Test Plans","items":[{"type":"category","label":"AreaChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/AreaChart/ComponentTests","docId":"Test Plans/AreaChart/ComponentTests","unlisted":false}]},{"type":"category","label":"DonutChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/DonutChart/ComponentTests","docId":"Test Plans/DonutChart/ComponentTests","unlisted":false}]},{"type":"category","label":"GaugeChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Component testing - Gauge chart test plan","href":"/fluentui-charting-contrib/docs/Test Plans/GaugeChart/ComponentTests","docId":"Test Plans/GaugeChart/ComponentTests","unlisted":false}]},{"type":"category","label":"GroupedVerticalBarChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/GroupedVerticalBarChart/ComponentTests","docId":"Test Plans/GroupedVerticalBarChart/ComponentTests","unlisted":false}]},{"type":"category","label":"HeatMapChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Heatmap Chart - Component test plan","href":"/fluentui-charting-contrib/docs/Test Plans/HeatMapChart/ComponentTests","docId":"Test Plans/HeatMapChart/ComponentTests","unlisted":false}]},{"type":"category","label":"HorizontalBarChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChart/ComponentTests","docId":"Test Plans/HorizontalBarChart/ComponentTests","unlisted":false},{"type":"link","label":"UnitTests","href":"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChart/UnitTests","docId":"Test Plans/HorizontalBarChart/UnitTests","unlisted":false}]},{"type":"category","label":"HorizontalBarChartWithAxis","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChartWithAxis/ComponentTests","docId":"Test Plans/HorizontalBarChartWithAxis/ComponentTests","unlisted":false},{"type":"link","label":"UnitTests","href":"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChartWithAxis/UnitTests","docId":"Test Plans/HorizontalBarChartWithAxis/UnitTests","unlisted":false}]},{"type":"category","label":"LineChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/LineChart/ComponentTests","docId":"Test Plans/LineChart/ComponentTests","unlisted":false}]},{"type":"category","label":"MultiStackedBarChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"componentTests","href":"/fluentui-charting-contrib/docs/Test Plans/MultiStackedBarChart/componentTests","docId":"Test Plans/MultiStackedBarChart/componentTests","unlisted":false}]},{"type":"category","label":"SankeyChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/SankeyChart/ComponentTests","docId":"Test Plans/SankeyChart/ComponentTests","unlisted":false}]},{"type":"category","label":"StackedBarChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/StackedBarChart/ComponentTests","docId":"Test Plans/StackedBarChart/ComponentTests","unlisted":false}]},{"type":"link","label":"TestingGuide","href":"/fluentui-charting-contrib/docs/Test Plans/TestingGuide","docId":"Test Plans/TestingGuide","unlisted":false},{"type":"category","label":"Utilities","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Unit test plan for Donut Chart","href":"/fluentui-charting-contrib/docs/Test Plans/Utilities/UnitTests","docId":"Test Plans/Utilities/UnitTests","unlisted":false}]},{"type":"category","label":"VerticalBarChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/VerticalBarChart/ComponentTests","docId":"Test Plans/VerticalBarChart/ComponentTests","unlisted":false}]},{"type":"category","label":"VerticalStackedBarChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/VerticalStackedBarChart/ComponentTests","docId":"Test Plans/VerticalStackedBarChart/ComponentTests","unlisted":false}]}],"collapsed":true,"collapsible":true},{"type":"link","label":"Testing Unpublished Library Version","href":"/fluentui-charting-contrib/docs/Testing Unpublished Library Version","docId":"Testing Unpublished Library Version","unlisted":false}]},"docs":{"Accessibility":{"id":"Accessibility","title":"Accessibility","description":"The react charting library is accessibility MAS C compliant.","sidebar":"tutorialSidebar"},"CHANGELOG":{"id":"CHANGELOG","title":"Release Log","description":"This log was last generated on Wed, 10 Jan 2024 0750 GMT and should not be manually modified.","sidebar":"tutorialSidebar"},"Charting-Concepts/AreaChart":{"id":"Charting-Concepts/AreaChart","title":"Contributor guide: Area Chart","description":"Areachartpic1.png","sidebar":"tutorialSidebar"},"Charting-Concepts/GaugeChart":{"id":"Charting-Concepts/GaugeChart","title":"Contributor guide: Gauge Chart","description":"Gauge chart measures the progress of a metric against its target and its primary components are a speedometer and a needle. The speedometer usually consists of color-coded segments progressing value from left to right.","sidebar":"tutorialSidebar"},"Charting-Concepts/HeatMapChart":{"id":"Charting-Concepts/HeatMapChart","title":"Contributor guide: Heatmap Chart","description":"A heatmap chart is a type of data visualization that represents data values as colors in a grid of rectangles. Each cell\'s color intensity corresponds to the value it represents, making it easy to spot patterns and variations in the data.","sidebar":"tutorialSidebar"},"Charting-Concepts/HorizontalBarChart":{"id":"Charting-Concepts/HorizontalBarChart","title":"Contributor guide: Horizontal Bar Chart","description":"A horizontal bar chart is a chart that presents categorical data with rectangular bars with lengths proportional to the values they represent. This type of chart is particularly useful when the intention is to show comparisons among different categories and the labels for those categories are long.","sidebar":"tutorialSidebar"},"Charting-Concepts/LineChart":{"id":"Charting-Concepts/LineChart","title":"Contributor guide: Line Chart","description":"Line charts are a versatile type of graph used to visualize data trends over time. They are commonly used in various fields and industries for different purposes.","sidebar":"tutorialSidebar"},"Charting-Concepts/SankeyChart":{"id":"Charting-Concepts/SankeyChart","title":"Contributor Guide: Sankey Chart","description":"Sankey charts are a type of data visualization that are particularly useful for showing the flow of resources, energy, or information through a system. They are characterized by their flowing, interconnected arrows that represent the quantity or value of something as it moves from one stage or category to another.","sidebar":"tutorialSidebar"},"Charting-Concepts/StackedBarChart":{"id":"Charting-Concepts/StackedBarChart","title":"Contributor guide: Stacked Bar Chart","description":"A stacked bar chart is a type of data visualization that represents data using rectangular bars with lengths proportional to the values they represent. In a stacked bar chart, each bar is divided into segments, and the segments represent different categories or components. The segments are stacked next to each other to show the total value of each bar.","sidebar":"tutorialSidebar"},"colors":{"id":"colors","title":"Colors","description":"We provide the following 3 ways to specify colors for the data series.","sidebar":"tutorialSidebar"},"Contributor Guide":{"id":"Contributor Guide","title":"Contributor Guide","description":"Fluent charting library is a collection of individual charts like LineChart, AreaChart, Horizontal bar chart, vertical bar chart.","sidebar":"tutorialSidebar"},"creating-date-objects-for-chart-data":{"id":"creating-date-objects-for-chart-data","title":"Creating Date Objects For Chart Data","description":"There are many ways to format a date as a string. The JavaScript specification only specifies one format to be universally supported","sidebar":"tutorialSidebar"},"Debugging":{"id":"Debugging","title":"Debugging","description":"The chart components can be debugged using few techniques.","sidebar":"tutorialSidebar"},"Detailed Implementation Steps":{"id":"Detailed Implementation Steps","title":"Detailed Implementation Steps","description":"If you are planning to contribute a major chart, follow the below steps to align the component with fluent charting design, principles, style and standards.","sidebar":"tutorialSidebar"},"Implementation Best Practices":{"id":"Implementation Best Practices","title":"Implementation Best Practices","description":"Component Props","sidebar":"tutorialSidebar"},"implementing-2-to-1-spacing":{"id":"implementing-2-to-1-spacing","title":"Implementing 2:1 spacing","description":"Discrete Axis","sidebar":"tutorialSidebar"},"Overview":{"id":"Overview","title":"Overview","description":"Fluent UI React (formerly Office UI Fabric React) charts is a set of modern, accessible, interactive, lightweight and highly customizable visualization library representing the Microsoft design system. The charts are used across 100+ projects inside Microsoft including Microsoft 365 and Azure.","sidebar":"tutorialSidebar"},"Start Developing":{"id":"Start Developing","title":"Start Developing","description":"This page will help you get familiar with the react charting controls, how the code and documents are organized.","sidebar":"tutorialSidebar"},"Technical Details":{"id":"Technical Details","title":"Technical details","description":"Overview","sidebar":"tutorialSidebar"},"Test Plans/AreaChart/ComponentTests":{"id":"Test Plans/AreaChart/ComponentTests","title":"ComponentTests","description":"Area Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/DonutChart/ComponentTests":{"id":"Test Plans/DonutChart/ComponentTests","title":"ComponentTests","description":"Alt text","sidebar":"tutorialSidebar"},"Test Plans/GaugeChart/ComponentTests":{"id":"Test Plans/GaugeChart/ComponentTests","title":"Component testing - Gauge chart test plan","description":"Snapshot testing","sidebar":"tutorialSidebar"},"Test Plans/GroupedVerticalBarChart/ComponentTests":{"id":"Test Plans/GroupedVerticalBarChart/ComponentTests","title":"ComponentTests","description":"Grouped Vertical Bar Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/HeatMapChart/ComponentTests":{"id":"Test Plans/HeatMapChart/ComponentTests","title":"Heatmap Chart - Component test plan","description":"Snapshot tests","sidebar":"tutorialSidebar"},"Test Plans/HorizontalBarChart/ComponentTests":{"id":"Test Plans/HorizontalBarChart/ComponentTests","title":"ComponentTests","description":"Horizontal Bar Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/HorizontalBarChart/UnitTests":{"id":"Test Plans/HorizontalBarChart/UnitTests","title":"UnitTests","description":"Unit Test Plan - Horizontal Bar Chart","sidebar":"tutorialSidebar"},"Test Plans/HorizontalBarChartWithAxis/ComponentTests":{"id":"Test Plans/HorizontalBarChartWithAxis/ComponentTests","title":"ComponentTests","description":"Horizontal Bar Chart With Axis \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/HorizontalBarChartWithAxis/UnitTests":{"id":"Test Plans/HorizontalBarChartWithAxis/UnitTests","title":"UnitTests","description":"Unit Test Plan \u2013 Horizontal Bar Chart with axiss","sidebar":"tutorialSidebar"},"Test Plans/LineChart/ComponentTests":{"id":"Test Plans/LineChart/ComponentTests","title":"ComponentTests","description":"Line Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/MultiStackedBarChart/componentTests":{"id":"Test Plans/MultiStackedBarChart/componentTests","title":"componentTests","description":"Multi stacked bar Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/SankeyChart/ComponentTests":{"id":"Test Plans/SankeyChart/ComponentTests","title":"ComponentTests","description":"Sankey Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/StackedBarChart/ComponentTests":{"id":"Test Plans/StackedBarChart/ComponentTests","title":"ComponentTests","description":"Stacked Bar Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/TestingGuide":{"id":"Test Plans/TestingGuide","title":"TestingGuide","description":"This document highlights few common testing practices for any new tests that are being added to the charting library.","sidebar":"tutorialSidebar"},"Test Plans/Utilities/UnitTests":{"id":"Test Plans/Utilities/UnitTests","title":"Unit test plan for Donut Chart","description":"This test plan contains the list of unit testable functions which are used as a part of the Donut Chart component.","sidebar":"tutorialSidebar"},"Test Plans/VerticalBarChart/ComponentTests":{"id":"Test Plans/VerticalBarChart/ComponentTests","title":"ComponentTests","description":"Vertical Bar Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/VerticalStackedBarChart/ComponentTests":{"id":"Test Plans/VerticalStackedBarChart/ComponentTests","title":"ComponentTests","description":"Vertical Stacked Bar Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Testing Strategy":{"id":"Testing Strategy","title":"Testing Strategy","description":"Details","sidebar":"tutorialSidebar"},"Testing Unpublished Library Version":{"id":"Testing Unpublished Library Version","title":"Testing Unpublished Library Version","description":"You may want to test changes made to the library in an app locally. This becomes useful to validate a fix or root cause an issue occuring only in a specific app or context.","sidebar":"tutorialSidebar"}}}')}}]);
\ No newline at end of file
diff --git a/assets/js/935f2afb.2bcfdc71.js b/assets/js/935f2afb.2bcfdc71.js
new file mode 100644
index 0000000000..9815865e06
--- /dev/null
+++ b/assets/js/935f2afb.2bcfdc71.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdocsite=self.webpackChunkdocsite||[]).push([[53],{1109:t=>{t.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Overview","href":"/fluentui-charting-contrib/docs/Overview","docId":"Overview","unlisted":false},{"type":"link","label":"Release Log","href":"/fluentui-charting-contrib/docs/CHANGELOG","docId":"CHANGELOG","unlisted":false},{"type":"link","label":"Start Developing","href":"/fluentui-charting-contrib/docs/Start Developing","docId":"Start Developing","unlisted":false},{"type":"link","label":"Contributor Guide","href":"/fluentui-charting-contrib/docs/Contributor Guide","docId":"Contributor Guide","unlisted":false},{"type":"link","label":"Technical details","href":"/fluentui-charting-contrib/docs/Technical Details","docId":"Technical Details","unlisted":false},{"type":"link","label":"Detailed Implementation Steps","href":"/fluentui-charting-contrib/docs/Detailed Implementation Steps","docId":"Detailed Implementation Steps","unlisted":false},{"type":"category","label":"Charting Concepts","items":[{"type":"link","label":"Contributor guide: Area Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/AreaChart","docId":"Charting-Concepts/AreaChart","unlisted":false},{"type":"link","label":"Contributor guide: Donut Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/DonutChart","docId":"Charting-Concepts/DonutChart","unlisted":false},{"type":"link","label":"Contributor guide: Gauge Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/GaugeChart","docId":"Charting-Concepts/GaugeChart","unlisted":false},{"type":"link","label":"Contributor guide: Grouped Vertical Bar Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/GroupedVerticalBarChart","docId":"Charting-Concepts/GroupedVerticalBarChart","unlisted":false},{"type":"link","label":"Contributor guide: Heatmap Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/HeatMapChart","docId":"Charting-Concepts/HeatMapChart","unlisted":false},{"type":"link","label":"Contributor guide: Horizontal Bar Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/HorizontalBarChart","docId":"Charting-Concepts/HorizontalBarChart","unlisted":false},{"type":"link","label":"Contributor guide: Line Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/LineChart","docId":"Charting-Concepts/LineChart","unlisted":false},{"type":"link","label":"Contributor Guide: Sankey Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/SankeyChart","docId":"Charting-Concepts/SankeyChart","unlisted":false},{"type":"link","label":"Contributor guide: Sparkline Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/SparklineChart","docId":"Charting-Concepts/SparklineChart","unlisted":false},{"type":"link","label":"Contributor guide: Stacked Bar Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/StackedBarChart","docId":"Charting-Concepts/StackedBarChart","unlisted":false},{"type":"link","label":"Contributor guide: Vertical Bar Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/VerticalBarChart","docId":"Charting-Concepts/VerticalBarChart","unlisted":false},{"type":"link","label":"Contributor guide: Vertical Stacked Bar Chart","href":"/fluentui-charting-contrib/docs/Charting-Concepts/VerticalStackedBarChart","docId":"Charting-Concepts/VerticalStackedBarChart","unlisted":false}],"collapsed":true,"collapsible":true},{"type":"link","label":"Debugging","href":"/fluentui-charting-contrib/docs/Debugging","docId":"Debugging","unlisted":false},{"type":"link","label":"Implementation Best Practices","href":"/fluentui-charting-contrib/docs/Implementation Best Practices","docId":"Implementation Best Practices","unlisted":false},{"type":"link","label":"Accessibility","href":"/fluentui-charting-contrib/docs/Accessibility","docId":"Accessibility","unlisted":false},{"type":"link","label":"Colors","href":"/fluentui-charting-contrib/docs/colors","docId":"colors","unlisted":false},{"type":"link","label":"Implementing 2:1 spacing","href":"/fluentui-charting-contrib/docs/implementing-2-to-1-spacing","docId":"implementing-2-to-1-spacing","unlisted":false},{"type":"link","label":"Creating Date Objects For Chart Data","href":"/fluentui-charting-contrib/docs/creating-date-objects-for-chart-data","docId":"creating-date-objects-for-chart-data","unlisted":false},{"type":"link","label":"Testing Strategy","href":"/fluentui-charting-contrib/docs/Testing Strategy","docId":"Testing Strategy","unlisted":false},{"type":"category","label":"Test Plans","items":[{"type":"category","label":"AreaChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/AreaChart/ComponentTests","docId":"Test Plans/AreaChart/ComponentTests","unlisted":false}]},{"type":"category","label":"DonutChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/DonutChart/ComponentTests","docId":"Test Plans/DonutChart/ComponentTests","unlisted":false}]},{"type":"category","label":"GaugeChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Component testing - Gauge chart test plan","href":"/fluentui-charting-contrib/docs/Test Plans/GaugeChart/ComponentTests","docId":"Test Plans/GaugeChart/ComponentTests","unlisted":false}]},{"type":"category","label":"GroupedVerticalBarChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/GroupedVerticalBarChart/ComponentTests","docId":"Test Plans/GroupedVerticalBarChart/ComponentTests","unlisted":false}]},{"type":"category","label":"HeatMapChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Heatmap Chart - Component test plan","href":"/fluentui-charting-contrib/docs/Test Plans/HeatMapChart/ComponentTests","docId":"Test Plans/HeatMapChart/ComponentTests","unlisted":false}]},{"type":"category","label":"HorizontalBarChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChart/ComponentTests","docId":"Test Plans/HorizontalBarChart/ComponentTests","unlisted":false},{"type":"link","label":"UnitTests","href":"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChart/UnitTests","docId":"Test Plans/HorizontalBarChart/UnitTests","unlisted":false}]},{"type":"category","label":"HorizontalBarChartWithAxis","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChartWithAxis/ComponentTests","docId":"Test Plans/HorizontalBarChartWithAxis/ComponentTests","unlisted":false},{"type":"link","label":"UnitTests","href":"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChartWithAxis/UnitTests","docId":"Test Plans/HorizontalBarChartWithAxis/UnitTests","unlisted":false}]},{"type":"category","label":"LineChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/LineChart/ComponentTests","docId":"Test Plans/LineChart/ComponentTests","unlisted":false}]},{"type":"category","label":"MultiStackedBarChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"componentTests","href":"/fluentui-charting-contrib/docs/Test Plans/MultiStackedBarChart/componentTests","docId":"Test Plans/MultiStackedBarChart/componentTests","unlisted":false}]},{"type":"category","label":"SankeyChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/SankeyChart/ComponentTests","docId":"Test Plans/SankeyChart/ComponentTests","unlisted":false}]},{"type":"category","label":"StackedBarChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/StackedBarChart/ComponentTests","docId":"Test Plans/StackedBarChart/ComponentTests","unlisted":false}]},{"type":"link","label":"TestingGuide","href":"/fluentui-charting-contrib/docs/Test Plans/TestingGuide","docId":"Test Plans/TestingGuide","unlisted":false},{"type":"category","label":"Utilities","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Unit test plan for Donut Chart","href":"/fluentui-charting-contrib/docs/Test Plans/Utilities/UnitTests","docId":"Test Plans/Utilities/UnitTests","unlisted":false}]},{"type":"category","label":"VerticalBarChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/VerticalBarChart/ComponentTests","docId":"Test Plans/VerticalBarChart/ComponentTests","unlisted":false}]},{"type":"category","label":"VerticalStackedBarChart","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"ComponentTests","href":"/fluentui-charting-contrib/docs/Test Plans/VerticalStackedBarChart/ComponentTests","docId":"Test Plans/VerticalStackedBarChart/ComponentTests","unlisted":false}]}],"collapsed":true,"collapsible":true},{"type":"link","label":"Testing Unpublished Library Version","href":"/fluentui-charting-contrib/docs/Testing Unpublished Library Version","docId":"Testing Unpublished Library Version","unlisted":false}]},"docs":{"Accessibility":{"id":"Accessibility","title":"Accessibility","description":"The react charting library is accessibility MAS C compliant.","sidebar":"tutorialSidebar"},"CHANGELOG":{"id":"CHANGELOG","title":"Release Log","description":"This log was last generated on Wed, 10 Jan 2024 0750 GMT and should not be manually modified.","sidebar":"tutorialSidebar"},"Charting-Concepts/AreaChart":{"id":"Charting-Concepts/AreaChart","title":"Contributor guide: Area Chart","description":"Areachartpic1.png","sidebar":"tutorialSidebar"},"Charting-Concepts/DonutChart":{"id":"Charting-Concepts/DonutChart","title":"Contributor guide: Donut Chart","description":"DonutChart1.png","sidebar":"tutorialSidebar"},"Charting-Concepts/GaugeChart":{"id":"Charting-Concepts/GaugeChart","title":"Contributor guide: Gauge Chart","description":"Gauge chart measures the progress of a metric against its target and its primary components are a speedometer and a needle. The speedometer usually consists of color-coded segments progressing value from left to right.","sidebar":"tutorialSidebar"},"Charting-Concepts/GroupedVerticalBarChart":{"id":"Charting-Concepts/GroupedVerticalBarChart","title":"Contributor guide: Grouped Vertical Bar Chart","description":"GroupedVerticalBarChart1.png","sidebar":"tutorialSidebar"},"Charting-Concepts/HeatMapChart":{"id":"Charting-Concepts/HeatMapChart","title":"Contributor guide: Heatmap Chart","description":"A heatmap chart is a type of data visualization that represents data values as colors in a grid of rectangles. Each cell\'s color intensity corresponds to the value it represents, making it easy to spot patterns and variations in the data.","sidebar":"tutorialSidebar"},"Charting-Concepts/HorizontalBarChart":{"id":"Charting-Concepts/HorizontalBarChart","title":"Contributor guide: Horizontal Bar Chart","description":"A horizontal bar chart is a chart that presents categorical data with rectangular bars with lengths proportional to the values they represent. This type of chart is particularly useful when the intention is to show comparisons among different categories and the labels for those categories are long.","sidebar":"tutorialSidebar"},"Charting-Concepts/LineChart":{"id":"Charting-Concepts/LineChart","title":"Contributor guide: Line Chart","description":"Line charts are a versatile type of graph used to visualize data trends over time. They are commonly used in various fields and industries for different purposes.","sidebar":"tutorialSidebar"},"Charting-Concepts/SankeyChart":{"id":"Charting-Concepts/SankeyChart","title":"Contributor Guide: Sankey Chart","description":"Sankey charts are a type of data visualization that are particularly useful for showing the flow of resources, energy, or information through a system. They are characterized by their flowing, interconnected arrows that represent the quantity or value of something as it moves from one stage or category to another.","sidebar":"tutorialSidebar"},"Charting-Concepts/SparklineChart":{"id":"Charting-Concepts/SparklineChart","title":"Contributor guide: Sparkline Chart","description":"Sparkline1.png","sidebar":"tutorialSidebar"},"Charting-Concepts/StackedBarChart":{"id":"Charting-Concepts/StackedBarChart","title":"Contributor guide: Stacked Bar Chart","description":"A stacked bar chart is a type of data visualization that represents data using rectangular bars with lengths proportional to the values they represent. In a stacked bar chart, each bar is divided into segments, and the segments represent different categories or components. The segments are stacked next to each other to show the total value of each bar.","sidebar":"tutorialSidebar"},"Charting-Concepts/VerticalBarChart":{"id":"Charting-Concepts/VerticalBarChart","title":"Contributor guide: Vertical Bar Chart","description":"VerticalBarChart1.png","sidebar":"tutorialSidebar"},"Charting-Concepts/VerticalStackedBarChart":{"id":"Charting-Concepts/VerticalStackedBarChart","title":"Contributor guide: Vertical Stacked Bar Chart","description":"VerticalStackedBarChart1.png","sidebar":"tutorialSidebar"},"colors":{"id":"colors","title":"Colors","description":"We provide the following 3 ways to specify colors for the data series.","sidebar":"tutorialSidebar"},"Contributor Guide":{"id":"Contributor Guide","title":"Contributor Guide","description":"Fluent charting library is a collection of individual charts like LineChart, AreaChart, Horizontal bar chart, vertical bar chart.","sidebar":"tutorialSidebar"},"creating-date-objects-for-chart-data":{"id":"creating-date-objects-for-chart-data","title":"Creating Date Objects For Chart Data","description":"There are many ways to format a date as a string. The JavaScript specification only specifies one format to be universally supported","sidebar":"tutorialSidebar"},"Debugging":{"id":"Debugging","title":"Debugging","description":"The chart components can be debugged using few techniques.","sidebar":"tutorialSidebar"},"Detailed Implementation Steps":{"id":"Detailed Implementation Steps","title":"Detailed Implementation Steps","description":"If you are planning to contribute a major chart, follow the below steps to align the component with fluent charting design, principles, style and standards.","sidebar":"tutorialSidebar"},"Implementation Best Practices":{"id":"Implementation Best Practices","title":"Implementation Best Practices","description":"Component Props","sidebar":"tutorialSidebar"},"implementing-2-to-1-spacing":{"id":"implementing-2-to-1-spacing","title":"Implementing 2:1 spacing","description":"Discrete Axis","sidebar":"tutorialSidebar"},"Overview":{"id":"Overview","title":"Overview","description":"Fluent UI React (formerly Office UI Fabric React) charts is a set of modern, accessible, interactive, lightweight and highly customizable visualization library representing the Microsoft design system. The charts are used across 100+ projects inside Microsoft including Microsoft 365 and Azure.","sidebar":"tutorialSidebar"},"Start Developing":{"id":"Start Developing","title":"Start Developing","description":"This page will help you get familiar with the react charting controls, how the code and documents are organized.","sidebar":"tutorialSidebar"},"Technical Details":{"id":"Technical Details","title":"Technical details","description":"Overview","sidebar":"tutorialSidebar"},"Test Plans/AreaChart/ComponentTests":{"id":"Test Plans/AreaChart/ComponentTests","title":"ComponentTests","description":"Area Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/DonutChart/ComponentTests":{"id":"Test Plans/DonutChart/ComponentTests","title":"ComponentTests","description":"Alt text","sidebar":"tutorialSidebar"},"Test Plans/GaugeChart/ComponentTests":{"id":"Test Plans/GaugeChart/ComponentTests","title":"Component testing - Gauge chart test plan","description":"Snapshot testing","sidebar":"tutorialSidebar"},"Test Plans/GroupedVerticalBarChart/ComponentTests":{"id":"Test Plans/GroupedVerticalBarChart/ComponentTests","title":"ComponentTests","description":"Grouped Vertical Bar Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/HeatMapChart/ComponentTests":{"id":"Test Plans/HeatMapChart/ComponentTests","title":"Heatmap Chart - Component test plan","description":"Snapshot tests","sidebar":"tutorialSidebar"},"Test Plans/HorizontalBarChart/ComponentTests":{"id":"Test Plans/HorizontalBarChart/ComponentTests","title":"ComponentTests","description":"Horizontal Bar Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/HorizontalBarChart/UnitTests":{"id":"Test Plans/HorizontalBarChart/UnitTests","title":"UnitTests","description":"Unit Test Plan - Horizontal Bar Chart","sidebar":"tutorialSidebar"},"Test Plans/HorizontalBarChartWithAxis/ComponentTests":{"id":"Test Plans/HorizontalBarChartWithAxis/ComponentTests","title":"ComponentTests","description":"Horizontal Bar Chart With Axis \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/HorizontalBarChartWithAxis/UnitTests":{"id":"Test Plans/HorizontalBarChartWithAxis/UnitTests","title":"UnitTests","description":"Unit Test Plan \u2013 Horizontal Bar Chart with axiss","sidebar":"tutorialSidebar"},"Test Plans/LineChart/ComponentTests":{"id":"Test Plans/LineChart/ComponentTests","title":"ComponentTests","description":"Line Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/MultiStackedBarChart/componentTests":{"id":"Test Plans/MultiStackedBarChart/componentTests","title":"componentTests","description":"Multi stacked bar Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/SankeyChart/ComponentTests":{"id":"Test Plans/SankeyChart/ComponentTests","title":"ComponentTests","description":"Sankey Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/StackedBarChart/ComponentTests":{"id":"Test Plans/StackedBarChart/ComponentTests","title":"ComponentTests","description":"Stacked Bar Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/TestingGuide":{"id":"Test Plans/TestingGuide","title":"TestingGuide","description":"This document highlights few common testing practices for any new tests that are being added to the charting library.","sidebar":"tutorialSidebar"},"Test Plans/Utilities/UnitTests":{"id":"Test Plans/Utilities/UnitTests","title":"Unit test plan for Donut Chart","description":"This test plan contains the list of unit testable functions which are used as a part of the Donut Chart component.","sidebar":"tutorialSidebar"},"Test Plans/VerticalBarChart/ComponentTests":{"id":"Test Plans/VerticalBarChart/ComponentTests","title":"ComponentTests","description":"Vertical Bar Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Test Plans/VerticalStackedBarChart/ComponentTests":{"id":"Test Plans/VerticalStackedBarChart/ComponentTests","title":"ComponentTests","description":"Vertical Stacked Bar Chart \u2013 Component test plan","sidebar":"tutorialSidebar"},"Testing Strategy":{"id":"Testing Strategy","title":"Testing Strategy","description":"Details","sidebar":"tutorialSidebar"},"Testing Unpublished Library Version":{"id":"Testing Unpublished Library Version","title":"Testing Unpublished Library Version","description":"You may want to test changes made to the library in an app locally. This becomes useful to validate a fix or root cause an issue occuring only in a specific app or context.","sidebar":"tutorialSidebar"}}}')}}]);
\ No newline at end of file
diff --git a/assets/js/b7f64af1.7bb0cce2.js b/assets/js/b7f64af1.7bb0cce2.js
new file mode 100644
index 0000000000..a0e9d0da31
--- /dev/null
+++ b/assets/js/b7f64af1.7bb0cce2.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdocsite=self.webpackChunkdocsite||[]).push([[8751],{4622:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>o,contentTitle:()=>r,default:()=>d,frontMatter:()=>s,metadata:()=>h,toc:()=>l});var a=n(5893),i=n(1151);const s={},r="Contributor guide: Vertical Stacked Bar Chart",h={id:"Charting-Concepts/VerticalStackedBarChart",title:"Contributor guide: Vertical Stacked Bar Chart",description:"VerticalStackedBarChart1.png",source:"@site/../../docs/Charting-Concepts/VerticalStackedBarChart.md",sourceDirName:"Charting-Concepts",slug:"/Charting-Concepts/VerticalStackedBarChart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/VerticalStackedBarChart",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Contributor guide: Vertical Bar Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/VerticalBarChart"},next:{title:"Debugging",permalink:"/fluentui-charting-contrib/docs/Debugging"}},o={},l=[];function c(e){const t={a:"a",code:"code",em:"em",h1:"h1",hr:"hr",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.h1,{id:"contributor-guide-vertical-stacked-bar-chart",children:"Contributor guide: Vertical Stacked Bar Chart"}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"VerticalStackedBarChart1.png",src:n(4757).Z+"",width:"1207",height:"781"})}),"\n",(0,a.jsx)(t.p,{children:"A vertical stacked bar chart is a type of chart that displays multiple series of data as stacked bars, with each bar representing a category. The bars are stacked on top of each other, with the height of each bar representing the total value of the series at that category."}),"\n",(0,a.jsx)(t.p,{children:"In a vertical stacked bar chart, the x-axis represents the categories, while the y-axis represents the values of the series. Each bar is divided into segments, with each segment representing a different series. The segments are colored differently to differentiate between the series."}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.strong,{children:"Use cases"}),"\nHere are some common use cases for a vertical stacked bar chart:","\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"Comparing the total size of different categories over time"}),"\n",(0,a.jsx)(t.li,{children:"Analyzing the composition of a whole category into subcategories"}),"\n",(0,a.jsx)(t.li,{children:"Identifying trends in the distribution of data over time"}),"\n",(0,a.jsx)(t.li,{children:"Comparing the relative sizes of different categories at a single point in time"}),"\n",(0,a.jsx)(t.li,{children:"Highlighting the contribution of each subcategory to the whole category"}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.strong,{children:"Mathematical/Geometrical concepts"})}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"VerticalStackedBarChart2.png",src:n(3160).Z+"",width:"1128",height:"753"})}),"\n",(0,a.jsx)(t.p,{children:"The major D3 functions that are involved in the creation of Vertical bar charts are:"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"d3-scale:"}),"\nThe\xa0d3-scale\xa0module is a part of the d3 library, which is a collection of JavaScript functions that are used for data visualization. The\xa0d3-scale\xa0module provides several functions for creating and manipulating scales, which are used to map data values to visual properties, such as\xa0position, size, and color."]}),"\n",(0,a.jsx)(t.p,{children:"The\xa0d3-scale\xa0module includes several scale types, including linear, logarithmic, power, and time scales. These scales are used to map continuous data values to a continuous range of visual properties. The module also includes ordinal and band scales, which are used to map categorical data values to a discrete range of visual properties."}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:"The\xa0d3-scale\xa0module provides several functions for creating and manipulating scales, including\xa0scaleLinear, scaleLog, scalePow, scaleTime, scaleOrdinal, and scaleBand. These functions take one or more arguments that define the domain and range of the scale, as well as any additional properties, such as the number of ticks or the padding between bands."}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Application in Vertical Stacked bar chart:"}),"\nIn the Vertical Stacked Bar Chart, d3-scale is used to create scales for the x and y axes of the chart. The d3-scale library provides a set of functions for creating different types of scales, such as linear, logarithmic, and ordinal scales. Here, the d3-scale library is used to create a linear scale for the y-axis of the chart."]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"d3.scaleLinear()"}),": The\xa0d3ScaleLinear\xa0is a function from the\xa0d3-scale\xa0module that is used to create a linear scale for the y-axis of the chart. The linear scale maps a continuous domain of data values to a continuous range of visual properties, such as position or height. The\xa0d3ScaleLinear\xa0function takes no arguments and returns a new linear scale. The scale can be customized using several methods, including\xa0domain, range, clamp, and nice. The\xa0domain\xa0method sets the domain of the scale, which is the range of data values that the scale maps to the range of visual properties. The\xa0range\xa0method sets the range of the scale, which is the range of visual properties that the scale maps to the domain of data values."]}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Application in Vertical Stacked bar chart:"}),"\nIn Vertical stacked bar chart,\xa0d3.scaleLinear()\xa0is used to create a linear scale for the y-axis of the chart."]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"A linear scale is a mapping function that maps a continuous input domain to a continuous output range. In this case, the input domain is the range of data values to be plotted on the y-axis, and the output range is the range of pixel values available for the y-axis on the chart."}),"\n",(0,a.jsx)(t.li,{children:"The\xa0scaleLinear()\xa0method of the\xa0d3\xa0library returns a new linear scale function. This function can be used to map data values to pixel values on the y-axis of the chart."}),"\n",(0,a.jsx)(t.li,{children:"To create the scale, the\xa0domain()\xa0method is used to set the minimum and maximum values of the data array as the input domain. The\xa0range()\xa0method is used to set the height of the chart minus the top and bottom margins as the output range."}),"\n",(0,a.jsx)(t.li,{children:"The resulting\xa0yScale\xa0function can then be used to map data values to pixel values on the y-axis of the chart."}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"d3.scaleBand():"}),"\xa0The\xa0d3ScaleBand\xa0is a function from the\xa0d3-scale\xa0module that is used to create a band scale for the x-axis of the chart. The band scale maps a discrete domain of data values to a discrete range of visual properties, such as\xa0position or width. The\xa0d3ScaleBand\xa0function takes no arguments and returns a new band scale. The scale can be customized using several methods, including\xa0domain, range, padding, and align. The\xa0domain\xa0method sets the domain of the scale, which is the range of data values that the scale maps to the range of visual properties. The\xa0range\xa0method sets the range of the scale, which is the range of visual properties that the scale maps to the domain of data values. The\xa0padding\xa0method sets the padding between the bands of the scale, which determines the width of the bands. The\xa0align\xa0method sets the alignment of the bands within the range of the scale."]}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Application in Vertical Stacked bar chart:"}),"\nIn the vertical stacked bar chart,\xa0d3.scaleBand()\xa0is used to create a band scale for the x-axis of the chart."]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"A band scale is a mapping function that maps a discrete input domain to a continuous output range. In this case, the input domain is an array of discrete values to be plotted on the x-axis, and the output range is the range of pixel values available for the x-axis on the chart."}),"\n",(0,a.jsx)(t.li,{children:"The\xa0scaleBand()\xa0method of the\xa0d3\xa0library returns a new band scale function. This function can be used to map data values to pixel values on the x-axis of the chart."}),"\n",(0,a.jsx)(t.li,{children:"To create the scale, the\xa0domain()\xa0method is used to set the array of discrete values as the input domain. The\xa0range()\xa0method is used to set the width of the chart minus the left and right margins as the output range."}),"\n",(0,a.jsx)(t.li,{children:"The\xa0padding()\xa0method can be used to set the padding between the bands in the scale. The\xa0paddingInner()\xa0and\xa0paddingOuter()\xa0methods can be used to set the inner and outer padding, respectively."}),"\n",(0,a.jsx)(t.li,{children:"The resulting\xa0xScale\xa0function can then be used to map data values to pixel values on the x-axis of the chart."}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"d3-selection:"}),"\xa0The\xa0d3-selection\xa0is a module from the d3 library that is used to select and manipulate DOM elements in the chart component. The\xa0d3-selection\xa0module provides several functions for selecting and manipulating DOM elements, including\xa0select, selectAll, append, attr, and style. The select function is used to select a single DOM element that matches a given selector. The\xa0selectAll\xa0function is used to select multiple DOM elements that match a given selector. The\xa0append\xa0function is used to append a new DOM element to a selected element. The\xa0attr\xa0function is used to set or get an attribute of a selected element. The\xa0style\xa0function is used to set or get a style property of a selected element."]}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Application in Vertical Stacked bar chart:"}),"\nIn the Vertical stacked bar chart, d3-selection is used to select and manipulate DOM elements in the chart."]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"The\xa0d3-selection\xa0library provides various methods for selecting and manipulating DOM elements, such as\xa0select(), selectAll(), append(), and attr(). In this case, the\xa0d3-selection\xa0library is used to select the\xa0svg\xa0element that holds the chart and to create and manipulate the\xa0rect\xa0elements that represent the bars in the chart."}),"\n",(0,a.jsx)(t.li,{children:"To select the\xa0svg\xa0element, the\xa0d3-selection\xa0library's\xa0select()\xa0method is used. This method takes\xa0SVG\xa0node as an argument and returns a new selection object that represents the selected element. The resulting selection object can then be used to manipulate the selected element."}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"d3-array:"}),"\xa0The\xa0d3-array\xa0is a module from the d3 library that is used to manipulate arrays of data in the chart component. The\xa0d3-array\xa0module provides several functions for manipulating arrays of data, including\xa0max, min, extent, sum, and mean. The\xa0max\xa0function is used to find the maximum value in an array of data. The\xa0min\xa0function is used to find the minimum value in an array of data. The\xa0extent\xa0function is used to find the minimum and maximum values in an array of data. The\xa0sum\xa0function is used to find the sum of the values in an array of data. The\xa0mean\xa0function is used to find the mean (average) of the values in an array of data."]}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Application in Vertical Stacked bar chart:"}),"\nIn the Vertical stacked bar chart,\xa0d3-array\xa0is used to calculate the minimum and maximum values of the data array."]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"The\xa0d3-array\xa0library provides various methods for working with arrays of data, such as\xa0min(),\xa0max(), and\xa0sum(). In this case, the\xa0d3-array\xa0library is used to calculate the minimum and maximum values of the data array."}),"\n",(0,a.jsx)(t.li,{children:"To calculate the minimum and maximum values of the data array, the\xa0d3-array\xa0library's\xa0min()\xa0and\xa0max()\xa0methods are used. These methods take an array of data as an argument and return the minimum and maximum values of the array, respectively."}),"\n",(0,a.jsx)(t.li,{children:"The resulting minimum and maximum values are then used to set the input domain of the y-axis scale created using the\xa0d3-scale\xa0library."}),"\n",(0,a.jsx)(t.li,{children:"Overall, the\xa0d3-array\xa0library is used to calculate the minimum and maximum values of the data array by using the\xa0min()\xa0and\xa0max()\xa0methods. These values are then used to set the input domain of the y-axis scale created using the\xa0d3-scale\xa0library."}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"d3-format:"}),"\xa0The\xa0d3-format\xa0is a module from the d3 library that is used to format numbers and strings in the chart component. The\xa0d3-format\xa0module provides several functions for formatting numbers and strings, including\xa0format, formatPrefix, precisionFixed, and precisionRound."]}),"\n",(0,a.jsx)(t.p,{children:"The\xa0format\xa0function is used to format a number or string using a specified format string. The format string can include placeholders for the value, such as\xa0%\xa0for a percentage or\xa0,\xa0for a comma-separated number. The\xa0formatPrefix\xa0function is used to format a number using a prefix notation that rounds the value to a specified precision and appends a prefix, such as k for thousands or M for millions. The\xa0precisionFixed\xa0function is used to format a number using a fixed number of decimal places. The\xa0precisionRound\xa0function is used to format a number using a variable number of decimal places that is determined by the magnitude of the value."}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Application in Vertical Stacked bar chart:"}),"\nIn the Vertical stacked bar chart,\xa0d3-format\xa0is used to format the tick values on the y-axis of the chart."]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:"The\xa0d3-format\xa0library provides various methods for formatting numbers, such as\xa0format(),\xa0formatPrefix(), and\xa0precisionRound(). In this case, the\xa0d3-format\xa0library is used to format the tick values on the y-axis of the chart."}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:"To format the tick values, the\xa0d3-format\xa0library's\xa0format()\xa0method is used. This method takes a format string as an argument and returns a new function that can be used to format numbers according to the specified format."}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:"The resulting format function is then used to format the tick values on the y-axis of the chart. The tick values are generated using the\xa0ticks()\xa0method of the y-axis scale created using the\xa0d3-scale\xa0library."}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:"The\xa0tickFormat()\xa0method of the y-axis scale is then used to set the tick format function. This method takes the format function as an argument and sets it as the tick format function for the y-axis scale."}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:"Overall, the\xa0d3-format\xa0library is used to format the tick values on the y-axis of the chart by using the\xa0format()\xa0method to create a format function and setting this function as the tick format function for the y-axis scale using the\xa0tickFormat()\xa0method."}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"d3-axis:"}),"\xa0The\xa0d3-axis\xa0module is a part of the d3 library, which is a collection of JavaScript functions that are used for data visualization. The\xa0d3-axis\xa0module provides several functions for creating and manipulating axes, which are used to display the scales of a chart component."]}),"\n",(0,a.jsx)(t.p,{children:"In data visualization, axes are used to display the scales of a chart component, such as the x-axis and y-axis of a bar chart. Axes provide visual cues to help readers interpret the data values of a chart component, such as the range and domain of the data values."}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:"The\xa0d3-axis\xa0module provides several types of axes, including\xa0bottom, top, left, and right axes. Each type of axis has its own set of methods for customizing the axis and displaying the tick values."}),"\n",(0,a.jsx)(t.p,{children:"Overall, the\xa0d3-axis\xa0module is an essential part of data visualization, as it provides a powerful and flexible way to display the scales of a chart component and help readers interpret the data values of the chart."}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Application in Vertical Stacked bar chart:"}),"\nIn the Vertical stacked bar chart,\xa0d3-axis\xa0is used to create and render the x and y axes of the chart."]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"The\xa0d3-axis\xa0library provides various methods for creating and rendering axes, such as\xa0axisBottom(),\xa0axisLeft(), and\xa0tickFormat(). In this case, the\xa0d3-axis\xa0library is used to create and render the x and y axes of the chart."}),"\n",(0,a.jsx)(t.li,{children:"To create the x and y axes, the\xa0d3-axis\xa0library's\xa0axisBottom()\xa0and\xa0axisLeft()\xa0methods are used, respectively. These methods take a scale function as an argument and return a new axis function that can be used to render the axis."}),"\n",(0,a.jsx)(t.li,{children:"The resulting x and y axis functions are then used to render the x and y axes of the chart. The\xa0call()\xa0method of the selection object is used to call the axis function and render the axis."}),"\n",(0,a.jsx)(t.li,{children:"The\xa0tickFormat()\xa0method of the y-axis scale is also used to set the tick format function for the y-axis. This method takes the format function created using the\xa0d3-format\xa0library as an argument and sets it as the tick format function for the y-axis."}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:"Overall, the\xa0d3-axis\xa0library is used to create and render the x and y axes of the chart by using the\xa0axisBottom()\xa0and\xa0axisLeft()\xa0methods to create the axis functions and the\xa0call()\xa0method to render the axes. The\xa0tickFormat()\xa0method is also used to set the tick format function for the y-axis."}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.strong,{children:"Dev Design details"}),"\nFollowing are the major components that contribute towards creating a complete vertical stacked bar chart:","\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.strong,{children:"Axes:"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"_getScales():"}),"\xa0This method is responsible for creating the x and y scales for the chart."]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Function arguments:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"containerHeight: a number representing the height of the container in which the chart will be rendered."}),"\n",(0,a.jsx)(t.li,{children:"containerWidth: a number representing the width of the container in which the chart will be rendered."}),"\n",(0,a.jsx)(t.li,{children:"isNumeric: a boolean value indicating whether the x-axis data is numeric or not. If\xa0true, the x-axis data is numeric, otherwise it is not."}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Working algorithm:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"The method takes several arguments, including the container height and width, and a boolean value indicating whether the x-axis is numeric or categorical."}),"\n",(0,a.jsx)(t.li,{children:"The method first calculates the maximum y-value of the chart data and creates a linear scale for the y-axis using the\xa0d3-scale\xa0library's\xa0scaleLinear()\xa0method. The domain of the y-axis scale is set to\xa0[0, yMax], where\xa0yMax\xa0is the maximum y-value of the chart data. The range of the y-axis scale is set to\xa0[0, containerHeight - this.margins.bottom! - this.margins.top!], where\xa0containerHeight\xa0is the height of the chart container and\xa0this.margins.bottom!\xa0and\xa0this.margins.top!\xa0are the bottom and top margins of the chart, respectively."}),"\n",(0,a.jsx)(t.li,{children:"If the x-axis is numeric, the method calculates the minimum and maximum x-values of the chart data using the\xa0d3-array\xa0library's\xa0d3Min()\xa0and\xa0d3Max()\xa0methods. It then creates a linear scale for the x-axis using the\xa0d3-scale\xa0library's\xa0scaleLinear()\xa0method. The domain of the x-axis scale is set to\xa0[xMin, xMax]\xa0or\xa0[xMax, xMin]\xa0if the chart is right-to-left, where\xa0xMin\xa0and\xa0xMax\xa0are the minimum and maximum x-values of the chart data, respectively. The range of the x-axis scale is set to\xa0[this.margins.left! + this._domainMargin, containerWidth - this.margins.right! - this._barWidth - this._domainMargin], where\xa0this.margins.left!\xa0and\xa0this.margins.right!\xa0are the left and right margins of the chart, respectively, and\xa0this._barWidth\xa0and\xa0this._domainMargin\xa0are properties of the chart."}),"\n",(0,a.jsx)(t.li,{children:"If the x-axis is categorical, the method creates a band scale for the x-axis using the\xa0d3-scale\xa0library's\xa0scaleBand()\xa0method. The domain of the x-axis scale is set to the unique x-axis labels of the chart data. The range of the x-axis scale is set to\xa0[this.margins.left! + this._domainMargin, containerWidth - this.margins.right! - this._domainMargin], where\xa0this.margins.left!\xa0and\xa0this.margins.right!\xa0are the left and right margins of the chart, respectively, and\xa0this._domainMargin\xa0is a property of the chart. The\xa0paddingInner()\xa0method is used to set the inner padding of the bars to\xa02 / 3."}),"\n",(0,a.jsx)(t.li,{children:"Finally, the method returns an object with the x and y scales."}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:"Overall, the\xa0_getScales\xa0method is responsible for creating the x and y scales for the chart using the\xa0d3-scale\xa0library's\xa0scaleLinear()\xa0and\xa0scaleBand()\xa0methods. The method calculates the domain and range of the scales based on the chart data and properties of the chart."}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"_getDomainMargins():"}),"\xa0This method is responsible for calculating the margins for the x-axis domain based on the width of the chart container and the width of the bars."]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Function arguments:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"containerWidth\xa0which is a number representing the width of the container in which the chart is being rendered."}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Working algorithm:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"The method takes a single argument,\xa0containerWidth, which is the width of the chart container."}),"\n",(0,a.jsx)(t.li,{children:"The method first checks whether the x-axis is numeric or categorical. If the x-axis is not numeric, the method calculates the total width available to render the bars by subtracting the left and right margins and the minimum domain margin from the container width. It then calculates the required width to render the bars based on the number of x-axis labels and the bar width. If the total width available is greater than or equal to the required width, the method sets the domain margin to half of the difference between the total width available and the required width to center align the chart. If the total width available is less than the required width, the method calculates the maximum possible bar width to maintain a 2:1 spacing between the bars and sets the domain margin to the minimum domain margin."}),"\n",(0,a.jsx)(t.li,{children:"The method then sets the bar width and domain margin properties of the chart based on the calculated values."}),"\n",(0,a.jsx)(t.li,{children:"Finally, the method returns an object with the margins for the x-axis domain, which includes the left and right margins and the domain margin."}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:"Overall, the\xa0_getDomainMargins\xa0method is responsible for calculating the margins for the x-axis domain based on the width of the chart container and the width of the bars. The method calculates the total width available to render the bars, the required width to render the bars, and the maximum possible bar width to maintain a 2:1 spacing between the bars. The method then sets the domain margin and bar width properties of the chart based on the calculated values."}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"createNumericXAxis():"}),"\xa0The code above is a function called\xa0createNumericXAxis\xa0in the\xa0utilities.ts\xa0file. This function is responsible for creating a numeric x-axis for a chart component. The function takes two arguments:\xa0xAxisParams\xa0and\xa0chartType.\xa0xAxisParams\xa0is an object that contains several properties, including\xa0domainNRangeValues,\xa0showRoundOffXTickValues,\xa0xAxistickSize,\xa0tickPadding,\xa0xAxisCount, and\xa0xAxisElement.\xa0chartType\xa0is an enumeration that specifies the type of chart component."]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Function arguments:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["xAxisParams\xa0of type\xa0IXAxisParams\xa0which is an object containing the following properties:","\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"domainNRangeValues\xa0of type\xa0IDomainNRange\xa0which is an object containing the domain and range values for the x-axis."}),"\n",(0,a.jsx)(t.li,{children:"showRoundOffXTickValues\xa0of type\xa0boolean\xa0which is an optional property that determines whether to round off the x-axis tick values."}),"\n",(0,a.jsx)(t.li,{children:"xAxistickSize\xa0of type\xa0number\xa0which is an optional property that determines the size of the x-axis ticks."}),"\n",(0,a.jsx)(t.li,{children:"tickPadding\xa0of type\xa0number\xa0which is an optional property that determines the padding between the x-axis ticks and the x-axis labels."}),"\n",(0,a.jsx)(t.li,{children:"xAxisCount\xa0of type\xa0number\xa0which is an optional property that determines the number of x-axis ticks."}),"\n",(0,a.jsx)(t.li,{children:"xAxisElement\xa0of type\xa0SVGElement | null\xa0which is an optional property that represents the x-axis element."}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.li,{children:"chartType\xa0of type\xa0ChartTypes\xa0which is an enum that represents the type of chart."}),"\n",(0,a.jsx)(t.li,{children:"culture\xa0of type string which is an optional paramter represents the locale into which the numeric x-axis labels will be localized."}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Working algorithm:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"The function first extracts the properties of the\xa0xAxisParams\xa0object using destructuring. The\xa0domainNRangeValues\xa0property is an object that contains the start and end values of the domain and range of the x-axis. The\xa0showRoundOffXTickValues\xa0property is a boolean that specifies whether to round off the tick values of the x-axis. The\xa0xAxistickSize\xa0property is a number that specifies the size of the ticks of the x-axis. The\xa0tickPadding\xa0property is a number that specifies the padding between the ticks and the labels of the x-axis. The\xa0xAxisCount\xa0property is a number that specifies the number of ticks of the x-axis. The\xa0xAxisElement\xa0property is a reference to the DOM node that contains the x-axis of the chart."}),"\n",(0,a.jsx)(t.li,{children:"The function then creates a linear scale for the x-axis using the\xa0d3ScaleLinear\xa0function from the\xa0d3-scale\xa0module. The scale is customized using the\xa0domain\xa0and\xa0range\xa0methods, which set the domain and range of the scale, respectively. If the\xa0showRoundOffXTickValues\xa0property is\xa0true, the\xa0nice\xa0method is called on the scale to round off the tick values of the x-axis."}),"\n",(0,a.jsx)(t.li,{children:"The function then creates a bottom axis for the x-axis using the\xa0d3AxisBottom\xa0function from the\xa0d3-axis\xa0module. The axis is customized using the\xa0tickSize,\xa0tickPadding,\xa0ticks, and\xa0tickFormat\xa0methods. The\xa0tickSize\xa0method sets the size of the ticks of the x-axis. The\xa0tickPadding\xa0method sets the padding between the ticks and the labels of the x-axis. The\xa0ticks\xa0method sets the number of ticks of the x-axis. The\xa0tickFormat\xa0method formats the tick values of the x-axis using the\xa0convertToLocaleString\xa0function and the\xa0culture\xa0parameter."}),"\n",(0,a.jsx)(t.li,{children:"If the\xa0xAxisElement\xa0property is not\xa0null, the axis is rendered on the DOM node using the\xa0call\xa0method of the\xa0d3-selection\xa0module. The\xa0selectAll\xa0method is called on the axis to select all the text elements of the x-axis, and the\xa0attr\xa0method is called to set the\xa0aria-hidden\xa0attribute of the text elements to\xa0true."}),"\n",(0,a.jsx)(t.li,{children:"Finally, the function computes the tick values of the x-axis using the\xa0ticks\xa0and\xa0tickFormat\xa0methods of the scale, and returns an object that contains the x-axis scale and the tick values."}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:"Overall, the\xa0createNumericXAxis\xa0function is responsible for creating a numeric x-axis for a chart component. The function creates a linear scale for the x-axis and a bottom axis for the x-axis using the\xa0d3-scale\xa0and\xa0d3-axis\xa0modules, respectively. The function customizes the scale and axis using several methods, including\xa0domain,\xa0range,\xa0tickSize,\xa0tickPadding,\xa0ticks, and\xa0tickFormat. The function also renders the axis on the DOM node and computes the tick values of the x-axis."}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"createStringXAxis():"}),"\xa0This function is responsible for creating a string x-axis for a chart component. The function takes four arguments:\xa0xAxisParams,\xa0tickParams,\xa0dataset, and\xa0culture.\xa0xAxisParams\xa0is an object that contains several properties, including\xa0domainNRangeValues,\xa0xAxisCount,\xa0xAxistickSize,\xa0tickPadding,\xa0xAxisPadding,\xa0xAxisInnerPadding, and\xa0xAxisOuterPadding.\xa0tickParams\xa0is an object that contains several properties, including\xa0tickValues\xa0and\xa0tickFormat.\xa0dataset\xa0is an array of strings that contains the values of the x-axis.\xa0culture\xa0is a string that specifies the locale into which the x-axis labels can be localized."]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Function Arguments:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"xAxisParams: An object containing the parameters for the x-axis, including the domain and range values, tick size, tick padding, number of ticks, padding for the inner and outer edges of the axis, and the element to render the axis."}),"\n",(0,a.jsx)(t.li,{children:"tickParams: An object containing the parameters for the ticks on the x-axis, including the tick values and tick format."}),"\n",(0,a.jsx)(t.li,{children:"dataset: An array of strings representing the data points for the x-axis."}),"\n",(0,a.jsx)(t.li,{children:"culture: An optional string representing the culture to use for formatting the tick labels on the x-axis. However, the localization works only if the string can be converted to a numeric value. Otherwise, the x-axis labels remain unlocalized."}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Working algorithm:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"The function first extracts the properties of the\xa0xAxisParams\xa0object using destructuring. The\xa0domainNRangeValues\xa0property is an object that contains the start and end values of the domain and range of the x-axis. The\xa0xAxisCount\xa0property is a number that specifies the number of ticks of the x-axis. The\xa0xAxistickSize\xa0property is a number that specifies the size of the ticks of the x-axis. The\xa0tickPadding\xa0property is a number that specifies the padding between the ticks and the labels of the x-axis. The\xa0xAxisPadding\xa0property is a number that specifies the padding between the bars of the chart. The\xa0xAxisInnerPadding\xa0property is a number that specifies the inner padding between the bars of the chart. The\xa0xAxisOuterPadding\xa0property is a number that specifies the outer padding between the bars of the chart."}),"\n",(0,a.jsx)(t.li,{children:"The function then creates a band scale for the x-axis using the\xa0d3ScaleBand\xa0function from the\xa0d3-scale\xa0module. The scale is customized using the\xa0domain\xa0and\xa0range\xa0methods, which set the domain and range of the scale, respectively. The\xa0paddingInner\xa0and\xa0paddingOuter\xa0methods are used to set the inner and outer padding between the bars of the chart, respectively."}),"\n",(0,a.jsx)(t.li,{children:"The function then creates a bottom axis for the x-axis using the\xa0d3AxisBottom\xa0function from the\xa0d3-axis\xa0module. The axis is customized using the\xa0tickSize,\xa0tickPadding,\xa0ticks, and\xa0tickFormat\xa0methods. The\xa0tickSize\xa0method sets the size of the ticks of the x-axis. The\xa0tickPadding\xa0method sets the padding between the ticks and the labels of the x-axis. The\xa0ticks\xa0method sets the number of ticks of the x-axis. The\xa0tickFormat\xa0method formats the tick values of the x-axis using the\xa0convertToLocaleString\xa0function and the\xa0culture\xa0parameter."}),"\n",(0,a.jsx)(t.li,{children:"If the\xa0xAxisParams.xAxisElement\xa0property is not\xa0null, the axis is rendered on the DOM node using the\xa0call\xa0method of the\xa0d3-selection\xa0module. The\xa0selectAll\xa0method is called on the axis to select all the text elements of the x-axis, and the\xa0attr\xa0method is called to set the\xa0aria-hidden\xa0attribute of the text elements to\xa0true."}),"\n",(0,a.jsx)(t.li,{children:"Finally, the function computes the tick values of the x-axis using the\xa0tickFormat\xa0method of the axis, and returns an object that contains the x-axis scale and the tick values."}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:"Overall, the\xa0createStringXAxis\xa0function is responsible for creating a string x-axis for a chart component. The function creates a band scale for the x-axis and a bottom axis for the x-axis using the\xa0d3-scale\xa0and\xa0d3-axis\xa0modules, respectively. The function customizes the scale and axis using several methods, including\xa0domain,\xa0range,\xa0paddingInner,\xa0paddingOuter,\xa0tickSize,\xa0tickPadding,\xa0ticks, and\xa0tickFormat. The function also renders the axis on the DOM node and computes the tick values of the x-axis."}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"createYAxis():"}),"\xa0In the Vertical bar chart component, the\xa0d3-axis\xa0module is used to create and customize the y-axis of a vertical bar chart. The\xa0createYAxis\xa0function is responsible for creating the y-axis using the\xa0createYAxisForOtherCharts\xa0function. The function takes in several parameters, including\xa0yAxisParams,\xa0isRtl,\xa0axisData, and\xa0useSecondaryYScale. These parameters are used to customize the y-axis, such as setting the tick values, tick format, and tick padding."]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Function arguments:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["yAxisParams: An object that contains various parameters related to the y-axis of the chart. It has the following properties:","\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"yMinMaxValues: An object that contains the start and end values of the y-axis."}),"\n",(0,a.jsx)(t.li,{children:"yAxisElement: The DOM element that represents the y-axis."}),"\n",(0,a.jsx)(t.li,{children:"yMaxValue: The maximum value of the y-axis."}),"\n",(0,a.jsx)(t.li,{children:"yMinValue: The minimum value of the y-axis."}),"\n",(0,a.jsx)(t.li,{children:"containerHeight: The height of the container that holds the chart."}),"\n",(0,a.jsx)(t.li,{children:"containerWidth: The width of the container that holds the chart."}),"\n",(0,a.jsx)(t.li,{children:"margins: An object that contains the margins of the chart."}),"\n",(0,a.jsx)(t.li,{children:"tickPadding: The padding between the ticks and the axis line."}),"\n",(0,a.jsx)(t.li,{children:"maxOfYVal: The maximum value of the y-axis for area chart and Grouped vertical bar chart."}),"\n",(0,a.jsx)(t.li,{children:"yAxisTickFormat: The format of the y-axis tick labels."}),"\n",(0,a.jsx)(t.li,{children:"yAxisTickCount: The number of ticks on the y-axis."}),"\n",(0,a.jsx)(t.li,{children:"eventAnnotationProps: An object that contains the properties of the event annotation."}),"\n",(0,a.jsx)(t.li,{children:"eventLabelHeight: The height of the event label."}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.li,{children:"isRtl: A boolean value that indicates whether the chart is in right-to-left mode."}),"\n",(0,a.jsx)(t.li,{children:"axisData: An object that contains the data related to the axis of the chart."}),"\n",(0,a.jsx)(t.li,{children:"useSecondaryYScale: A boolean value that indicates whether to use a secondary y-axis scale."}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Working algorithm:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:"The function first extracts the necessary parameters from the\xa0yAxisParams\xa0object, such as the\xa0yMinMaxValues, yAxisElement, containerHeight, and containerWidth. It then calculates the final maximum and minimum values for the y-axis, based on the\xa0maxOfYVal, yMaxValue, and yMinValue\xa0parameters."}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:"The function then prepares the datapoints for the y-axis using the\xa0prepareDatapoints\xa0function, which calculates the tick values based on the maximum and minimum values of the y-axis. It then creates a linear scale for the y-axis using the\xa0d3ScaleLinear\xa0function from the\xa0d3-scale\xa0library."}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:"The function then creates the y-axis using the\xa0d3AxisLeft\xa0or\xa0d3AxisRight\xa0function from the\xa0d3-axis\xa0library, depending on the\xa0isRtl and useSecondaryYScale\xa0parameters. It sets the tick padding, tick values, and tick size for the y-axis, and formats the tick labels using the\xa0yAxisTickFormat\xa0parameter."}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:"Finally, the function uses the d3Select function to select the\xa0yAxisElement\xa0and apply the y-axis to it using the call method. It also sets the aria-hidden attribute of the y-axis text elements to true to improve accessibility."}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"createStringYAxis():"}),"\xa0In the Vertical bar chart component, the\xa0d3-axis\xa0module is used to create and customize the y-axis of a vertical bar chart. The\xa0createStringYAxis\xa0function is responsible for creating the y-axis that use string values for the y-axis using the\xa0createStringYAxisForOtherCharts\xa0function. The function takes in several parameters, including\xa0yAxisParams, dataPoints, and isRtl. These parameters are used to customize the y-axis, such as setting the tick values, tick format, and tick padding."]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Function arguments:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"yAxisParams: An object that contains the parameters for the y-axis, including\xa0containerHeight,\xa0tickPadding,\xa0margins,\xa0yAxisTickFormat,\xa0yAxisElement, and\xa0yAxisPadding."}),"\n",(0,a.jsx)(t.li,{children:"dataPoints: An array of strings that represent the data points for the y-axis."}),"\n",(0,a.jsx)(t.li,{children:"isRtl: A boolean value that indicates whether the chart is in right-to-left mode."}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Working algorithm:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"The function first extracts the necessary parameters from the\xa0yAxisParams\xa0object, such as the\xa0containerHeight,\xa0margins,\xa0yAxisTickFormat,\xa0yAxisElement, and\xa0yAxisPadding. It then creates a band scale for the y-axis using the\xa0d3ScaleBand\xa0function from the\xa0d3-scale\xa0library."}),"\n",(0,a.jsx)(t.li,{children:"The band scale is defined using the\xa0dataPoints\xa0array as the domain, and the\xa0containerHeight\xa0and\xa0margins\xa0parameters as the range. The\xa0padding\xa0method is used to set the padding between the bands in the y-axis."}),"\n",(0,a.jsx)(t.li,{children:"The function then creates the y-axis using the\xa0d3AxisLeft\xa0or\xa0d3AxisRight\xa0function from the\xa0d3-axis\xa0library, depending on the\xa0isRtl\xa0parameter. It sets the tick padding, tick values, and tick size for the y-axis, and formats the tick labels using the\xa0yAxisTickFormat\xa0parameter."}),"\n",(0,a.jsx)(t.li,{children:"Finally, the function uses the\xa0d3Select\xa0function to select the\xa0yAxisElement\xa0and apply the y-axis to it using the\xa0call\xa0method. It also selects all the text elements of the y-axis and returns the y-axis scale."}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.strong,{children:"Bars:"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"_createBar():"}),"\xa0This method is responsible for creating and rendering the bars of the chart."]}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Function arguments:"}),"\nThe\xa0_createBar\xa0function takes four arguments:"]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"xBarScale: This is a scaling function that maps the x-axis data points to the corresponding x-axis positions on the chart. The type of this argument is\xa0any, which means that it can be any type of scaling function."}),"\n",(0,a.jsx)(t.li,{children:"yBarScale: This is a scaling function that maps the y-axis data points to the corresponding y-axis positions on the chart. The type of this argument is\xa0NumericScale, which is a custom type defined elsewhere in the code."}),"\n",(0,a.jsx)(t.li,{children:"containerHeight: This is the height of the container element that holds the chart. This is used to calculate the y-axis position of the bars."}),"\n",(0,a.jsx)(t.li,{children:"xElement: This is an SVG element that represents the x-axis of the chart. This is used to calculate the x-axis position of the bars."}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Working algorithm:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:"The method takes several arguments, including the x and y scales, the container height and width, and an SVG element for the x-axis. It first checks whether the chart has any line data and whether to focus on the whole stack or not."}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:"The method then iterates over each item in the chart data and calculates the x and y coordinates for each bar using the scales and the bar width. It also calculates the height of each bar based on the data and the y scale. If the bar height is less than the minimum bar height, it sets the height to the minimum bar height."}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:"For each bar, the method creates a rectangle element using the\xa0rect\xa0SVG element and sets the x, y, width, height, fill, and other properties. It also adds an\xa0onMouseOver,\xa0onMouseMove,\xa0onMouseLeave,\xa0onFocus,\xa0onBlur, and\xa0onClick\xa0event listener for the bar if the legend is selected."}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:"If the bar has a corner radius and is the last bar in the stack, it creates a path element using the\xa0path\xa0SVG element and sets the\xa0d, fill, and other properties. It also adds an\xa0onMouseOver,\xa0onMouseMove,\xa0onMouseLeave,\xa0onFocus,\xa0onBlur, and\xa0onClick\xa0event listener for the path if the legend is selected."}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:"The method then creates a group element using the\xa0g\xa0SVG element and adds the rectangle and path elements to the group. It also adds an\xa0onMouseOver,\xa0onMouseMove,\xa0onMouseLeave,\xa0onFocus,\xa0onBlur, and\xa0onClick\xa0event listener for the group if the legend is selected."}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:"Finally, the method returns the bars as a React fragment."}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Numeric bars (_createNumericBars()):"}),"\xa0This method is responsible for creating and rendering the numeric bars of the chart."]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Function arguments:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"containerHeight\xa0(number): The height of the container in which the chart is rendered."}),"\n",(0,a.jsx)(t.li,{children:"containerWidth\xa0(number): The width of the container in which the chart is rendered."}),"\n",(0,a.jsx)(t.li,{children:"xElement\xa0(SVGElement): The SVG element that represents the x-axis of the chart."}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Working algorithm:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"The method takes several arguments, including the container height and width, and an SVG element for the x-axis. It first gets the x and y bar scales using the _getScales method with the numeric parameter set to true."}),"\n",(0,a.jsx)(t.li,{children:"The method then calls the _createBar method with the x and y bar scales, container height, and x-axis element as arguments. The _createBar method is responsible for creating and rendering the bars of the chart."}),"\n",(0,a.jsx)(t.li,{children:"The _createBar method creates a rectangle element for each bar using the rect SVG element and sets the x, y, width, height, fill, and other properties. It also adds event listeners for the bar if the legend is selected."}),"\n",(0,a.jsx)(t.li,{children:"The _createBar method then creates a group element using the g SVG element and adds the rectangle elements to the group. It also adds event listeners for the group if the legend is selected."}),"\n",(0,a.jsx)(t.li,{children:"Finally, the _createBar method returns the bars as a React fragment."}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:"Overall, the _createNumericBars method is responsible for creating and rendering the numeric bars of the chart by calling the _createBar method with the appropriate scales and arguments. The _createBar method is responsible for creating and rendering the bars of the chart using the rect and g SVG elements and adding event listeners for interactivity."}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"String bars (_createStringBars()):"}),"\xa0This method is responsible for creating and rendering the string bars of the chart."]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Function arguments:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"containerHeight\xa0(number): The height of the container in which the chart is rendered."}),"\n",(0,a.jsx)(t.li,{children:"containerWidth\xa0(number): The width of the container in which the chart is rendered."}),"\n",(0,a.jsx)(t.li,{children:"xElement\xa0(SVGElement): The SVG element that represents the x-axis of the chart."}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Working algorithm:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"The method takes several arguments, including the container height and width, and an SVG element for the x-axis. It first gets the x and y bar scales using the _getScales method with the numeric parameter set to false."}),"\n",(0,a.jsx)(t.li,{children:"The method then calls the _createBar method with the x and y bar scales, container height, and x-axis element as arguments. The _createBar method is responsible for creating and rendering the bars of the chart."}),"\n",(0,a.jsx)(t.li,{children:"The _createBar method creates a rectangle element for each bar using the rect SVG element and sets the x, y, width, height, fill, and other properties. It also adds event listeners for the bar if the legend is selected."}),"\n",(0,a.jsx)(t.li,{children:"The _createBar method then creates a group element using the g SVG element and adds the rectangle elements to the group. It also adds event listeners for the group if the legend is selected."}),"\n",(0,a.jsx)(t.li,{children:"Finally, the _createBar method returns the bars as a React fragment."}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:"Overall, the _createStringBars method is responsible for creating and rendering the string bars of the chart by calling the _createBar method with the appropriate scales and arguments. The _createBar method is responsible for creating and rendering the bars of the chart using the rect and g SVG elements and adding event listeners for interactivity."}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.strong,{children:"Lines:"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"_createLines():"}),"\xa0This method is responsible for creating and rendering the lines and dots of the chart."]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Function arguments:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"xScale: A\xa0NumericScale\xa0object that represents the scale for the x-axis of the chart."}),"\n",(0,a.jsx)(t.li,{children:"yScale: A\xa0NumericScale\xa0object that represents the scale for the y-axis of the chart."}),"\n",(0,a.jsx)(t.li,{children:"containerHeight: A number that represents the height of the container that holds the chart."}),"\n",(0,a.jsx)(t.li,{children:"containerWidth: A number that represents the width of the container that holds the chart."}),"\n",(0,a.jsx)(t.li,{children:"secondaryYScale: An optional\xa0NumericScale\xa0object that represents the scale for the secondary y-axis of the chart. This argument is only used if the chart has a secondary y-axis."}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Working algorithm:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"The method takes several arguments, including the x and y scales, the container height and width, and an optional secondary y scale. It first checks whether the x-axis is numeric or not and gets the scales using the\xa0_getScales\xa0method."}),"\n",(0,a.jsx)(t.li,{children:"The method then gets the formatted line data using the\xa0_getFormattedLineData\xa0method and iterates over each item in the line object. For each item, it checks whether the legend is highlighted or not and iterates over each point in the line. It calculates the x and y coordinates for each point using the scales and whether to use the secondary y scale or not."}),"\n",(0,a.jsx)(t.li,{children:"If the line border width is greater than zero, it creates a line element for the border of the line using the\xa0line\xa0SVG element. It then creates a line element for the line itself using the same\xa0line\xa0SVG element and adds an\xa0onMouseOver\xa0and\xa0onMouseLeave\xa0event listener if the legend is selected."}),"\n",(0,a.jsx)(t.li,{children:"Finally, it creates a circle element for each point in the line using the\xa0circle\xa0SVG element and adds an\xa0onMouseOver\xa0and\xa0onMouseLeave\xa0event listener if the legend is selected. It sets the radius and visibility of the circle based on the legend and x-axis point."}),"\n",(0,a.jsx)(t.li,{children:"The method returns the border lines, lines, and dots as a React fragment."}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.strong,{children:"Legends:"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"_getLegendData():"}),"\xa0This method is responsible for creating and rendering the legend of the chart."]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Function arguments:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"data: an array of IVerticalStackedChartProps objects, which contain the chart data to be displayed."}),"\n",(0,a.jsx)(t.li,{children:"palette: an object of type IPalette that contains a set of colors to be used for the chart."}),"\n",(0,a.jsx)(t.li,{children:"lineLegends: an array of LineLegends objects, which contain the legend data for any lines that are displayed on the chart."}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Working algorithm:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"The method takes several arguments, including the chart data, the color palette, and an array of line legends. It first checks whether the legend should be hidden or not based on the\xa0hideLegend\xa0prop."}),"\n",(0,a.jsx)(t.li,{children:"The method then iterates over each item in the chart data and creates a legend for each unique legend title and color combination. It generates a random color from the default palette if the point does not have a color. It also checks whether there are any similar legends already created and skips the creation if there are."}),"\n",(0,a.jsx)(t.li,{children:"For each legend, the method creates an object with the legend title, color, and event listeners for click, hover, and mouse out actions. It adds the legend object to an array of actions."}),"\n",(0,a.jsx)(t.li,{children:"If there are any line legends, the method iterates over each item in the line legends and creates a legend object with the title, color, and event listeners. It adds the legend object to an array of line legends."}),"\n",(0,a.jsx)(t.li,{children:"The method then concatenates the arrays of actions and line legends and creates a\xa0Legends\xa0component with the resulting array of legends. It also passes any additional props for the\xa0Legends\xa0component."}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:"Overall, the\xa0_getLegendData\xa0method is responsible for creating and rendering the legend of the chart by iterating over the chart data and line legends and creating legend objects with event listeners. It then passes the resulting array of legends to a\xa0Legends\xa0component for rendering."}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.strong,{children:"Callouts:"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.strong,{children:"_renderCallout():"}),"\xa0This method is responsible for rendering the callout for a data point when it is hovered over."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Working algorithm:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"The method takes an optional\xa0IVSChartDataPoint\xa0object as an argument, which contains the data for the hovered data point. If the argument is not provided, the method returns\xa0null."}),"\n",(0,a.jsx)(t.li,{children:"If the argument is provided, the method creates a\xa0ChartHoverCard\xa0component with the\xa0XValue, Legend, YValue, color, and culture\xa0props set to the corresponding values from the\xa0IVSChartDataPoint\xa0object. The\xa0ChartHoverCard\xa0component is responsible for rendering the callout with the data for the hovered data point."}),"\n",(0,a.jsx)(t.li,{children:"Finally, the method returns the\xa0ChartHoverCard\xa0component."}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:"Overall, the\xa0_renderCallout\xa0method is responsible for rendering the callout for a data point when it is hovered over by creating a\xa0ChartHoverCard\xa0component with the data for the hovered data point."}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"_getCustomizedCallout():"}),"\xa0This method is responsible for rendering the callout for a data point or stack when it is hovered over."]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Working algorithm:"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"The method first checks whether the chart has any line data by iterating over the chart data and checking whether each item has a\xa0lineData\xa0property with a length greater than zero. If the chart has any line data, it sets a boolean variable\xa0_isHavingLines\xa0to\xa0true."}),"\n",(0,a.jsx)(t.li,{children:"The method then checks whether the\xa0onRenderCalloutPerStack\xa0prop is defined. If it is defined, the method calls the\xa0onRenderCalloutPerStack\xa0function with the\xa0stackCalloutProps\xa0object as an argument. The\xa0stackCalloutProps\xa0object contains the data for the hovered stack."}),"\n",(0,a.jsx)(t.li,{children:"If the\xa0onRenderCalloutPerStack\xa0prop is not defined, the method checks whether the\xa0onRenderCalloutPerDataPoint\xa0prop is defined and whether the chart has any line data. If the\xa0onRenderCalloutPerDataPoint\xa0prop is defined and the chart does not have any line data, the method calls the\xa0onRenderCalloutPerDataPoint\xa0function with the\xa0dataPointCalloutProps\xa0object and the\xa0_renderCallout\xa0method as arguments. The\xa0dataPointCalloutProps\xa0object contains the data for the hovered data point."}),"\n",(0,a.jsx)(t.li,{children:"If neither the\xa0onRenderCalloutPerStack\xa0nor the\xa0onRenderCalloutPerDataPoint\xa0prop is defined, the method returns\xa0null."}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:"Overall, the\xa0_getCustomizedCallout\xa0method is responsible for rendering the callout for a data point or stack when it is hovered over by calling the appropriate\xa0onRenderCallout\xa0function with the corresponding data. If neither\xa0onRenderCallout\xa0function is defined, the method returns\xa0null."}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.strong,{children:"Rendering details"}),"\nThe Vertical stacked bar chart uses d3 SVG based rendering, which follows the following render cycles:","\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{children:"- Invocation cycle: Vertical stacked bar Chart -> Cartesian base chart -> X-axis -> X-axis labels -> Y-axis -> Y-axis labels -> bars, legends, callouts\n- Rendering cycle: Vertical stacked bar chart <- Bars (rect), lines (line), Legends, Callouts <- Axes (d3.axis, d3.scale)\n"})}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Following are the rendering details:"})}),"\n",(0,a.jsxs)(t.ol,{children:["\n",(0,a.jsx)(t.li,{children:"The Vertical stacked bar chart component defines a class component that renders a vertical stacked bar chart. The chart can be either numeric or categorical, depending on the type of data passed in. The chart is rendered using\xa0SVG\xa0elements."}),"\n",(0,a.jsx)(t.li,{children:"The component has several private methods that are used to create the chart. The\xa0_getScales\xa0method is used to create the x and y scales for the chart. The\xa0_createNumericBars\xa0and\xa0_createStringBars\xa0methods are used to create the bars for the chart. The\xa0_getGraphData\xa0method is used to get the data for the chart. The\xa0_getAxisData\xa0method is used to get the data for the y-axis."}),"\n",(0,a.jsx)(t.li,{children:"The component also has several private variables that are used to calculate the margins and bar width for the chart. The\xa0_domainMargin\xa0variable is used to calculate the margin for the x-axis. The\xa0_barWidth\xa0variable is used to calculate the width of the bars in the chart."}),"\n",(0,a.jsx)(t.li,{children:"The component also has several private methods that are used to handle user interactions with the chart. The\xa0_legendHighlighted\xa0method is used to check if a legend is highlighted. The\xa0_noLegendHighlighted\xa0method is used to check if no legend is highlighted. The\xa0_getAriaLabel\xa0method is used to get the aria label for the chart."}),"\n",(0,a.jsx)(t.li,{children:"Finally, the component has a render method that renders the chart using\xa0SVG\xa0elements. The chart is rendered as a series of stacked bars, with each bar representing a category or value. The chart also includes a legend and a callout that displays additional information about the data point when the user hovers over it."}),"\n"]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Variants"}),"\nFollowing are the variants of vertical bar chart:\xa0",(0,a.jsx)(t.a,{href:"https://developer.microsoft.com/en-us/fluentui#/controls/web/verticalbarchart/verticalstackedbarchart",children:"Ref8"}),"\xa0"]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.em,{children:"Basic Vertical stacked bar Chart"}),": Only basic props are provided."]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.em,{children:"Custom Callout"}),": Can show customized callout data."]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.em,{children:"Custom Accessibility"}),": Providing custom aria labels."]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.em,{children:"Styled"}),": Can show bars with a single callout or a stacked callout."]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.em,{children:"Tooltip"}),": Can show tooltip over x-axis ticks."]}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Testing"}),"\nThe manual tests for Vertical stacked bar chart has been completed and the component tests are in PR. Following is the improvement in code coverage:\n",(0,a.jsx)(t.img,{alt:"VerticalStackedBarChart3.png",src:n(9845).Z+"",width:"2477",height:"538"})]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["Component Tests:","\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["Work item ",(0,a.jsx)(t.a,{href:"https://uifabric.visualstudio.com/iss/_workitems/edit/7439",children:"7439"})]}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["Unit Tests:","\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["Work item ",(0,a.jsx)(t.a,{href:"https://uifabric.visualstudio.com/iss/_workitems/edit/7440",children:"7440"})]}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["Manual Tests:","\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["Work item ",(0,a.jsx)(t.a,{href:"https://uifabric.visualstudio.com/iss/_workitems/edit/8602",children:"8602"})]}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["Accessibility Tests:","\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["Work item ",(0,a.jsx)(t.a,{href:"https://uifabric.visualstudio.com/iss/_workitems/edit/7438",children:"7438"})]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Accessibility"}),"\nFAST pass checks resulted in no error for Vertical stacked bar chart. Link to the ",(0,a.jsx)(t.a,{href:"https://accessibilityinsights.io/docs/web/getstarted/fastpass/",children:"FAST pass tool"}),"\nOur charts have elaborate accessibility support. The charts are WCAG 2.1 MAS C compliant for accessibility.\nConsumers can define their own aria labels for each point by setting the\xa0callOutAccessibilityData\xa0properties."]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Theming"}),'\nThe palette for donut chart is set from the "theme" prop as passed to the component during rendering. Both light and dark themes are supported and users can create there own theme too.\xa0',(0,a.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/wiki/Theming",children:"Ref3"}),"\xa0\xa0and\xa0",(0,a.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/wiki/How-to-apply-theme-to-Fluent-UI-React-components",children:"Ref4"}),"\xa0\xa0explains theming in detail."]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Debugging"}),"\nThe detailed steps on debugging has been given in\xa0",(0,a.jsx)(t.a,{href:"https://github.com/microsoft/fluentui-charting-contrib/blob/main/docs/Debugging.md",children:"Debugging"}),"."]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Error scenarios"}),"\nThe Vertical stacked bar chart handles the following error scenario:"]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"Empty data: If the data passed to the chart component is empty, the chart will not render and a message will be narrated to the user.\xa0_isChartEmpty\xa0functions handles that scenario."}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Localization aspects"}),"\nThe component has a\xa0culture\xa0prop, which is used to set the culture for the chart. This prop is used to format the x-axis labels and the callout values based on the specified culture. Currently, vertical bar chart provides localization only for the x-axis ticks if they are numbers."]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Some notable PRs and their brief description"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/pull/12308",children:"Added the vertical stacked bar chart component"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/commit/f986d68c3fad2ff4034ebb86fd4618df11d81221",children:"Vertical stacked bar chart code refactor. Cartesian chart implemented in base file"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/pull/16914",children:"Accessibility: narrator issues fixed in bar charts"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/pull/17571",children:"Accessibility: Callout dismiss on ESC issue solved in all bar charts"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/pull/19072",children:"Accessibility change for Vertical Stacked Bar chart"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/pull/28594",children:"Adding component tests for Vertical Stacked Bar chart."})}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Future improvements"}),"\nFollowing are the future improvements that can be incorporated in vertical stacked bar charts:"]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"Add support for animations: Animations can make the chart more engaging and help to highlight changes in the data over time. Adding support for animations would require using a library such as d3-transition."}),"\n",(0,a.jsx)(t.li,{children:"Add support for multiple data sets: Currently, the chart only supports a single data set. Adding support for multiple data sets would allow the user to compare different sets of data on the same chart. For example: grouped vertical stacked bar chart."}),"\n",(0,a.jsx)(t.li,{children:"Improve accessibility: The chart could be made more accessible by adding support for keyboard navigation. This would require adding additional attributes to the chart elements and updating the event handlers accordingly."}),"\n",(0,a.jsxs)(t.li,{children:["Following error handling scenarios can be improved:","\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"Invalid or missing chart dimensions: If the dimensions of the chart are invalid or missing, the chart will not render and a message will be displayed to the user."}),"\n",(0,a.jsx)(t.li,{children:"Invalid or missing axis parameters: If the parameters for the x-axis or y-axis are invalid or missing, the chart will not render and a message will be displayed to the user."}),"\n",(0,a.jsx)(t.li,{children:"Invalid or missing legends: If the legends for the chart are invalid or missing, the chart will not render and a message will be displayed to the user."}),"\n",(0,a.jsx)(t.li,{children:"Invalid bar width: If the bar width for the chart is invalid, the chart will not render and a message will be displayed to the user."}),"\n",(0,a.jsx)(t.li,{children:"Invalid or missing data for callout: If the data for the callout is invalid or missing, the callout will not render and a message will be displayed to the user."}),"\n",(0,a.jsx)(t.li,{children:"Invalid or missing accessibility data: If the accessibility data for the chart is invalid or missing, the chart will not render and a message will be displayed to the user."}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.li,{children:"Localization support can be improved for all strings and numbers."}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Interactions"}),"\nFollowing are the interactions that are allowed for vertical stacked bar chart:"]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.em,{children:"Mouse Events"}),":\na. Hover mouse over a stacked bar, should call the corresponding handler and show the callout containing information about all the bars stacked over that bar.\nb. On mouse move on stacked Bar 1 (step 1) -> mouse leave (step 2) -> mouse move on stacked Bar 2 (step 3), should render the callout of the stacked Bar 2.\nc. On mouse over, callout should be defined, on mouse leave, callout should disappear.\nd. On mouse over on legends, should highlight the corresponding bar/line.\nf. On click on stacked Bar, should highlight the corresponding entire stacked bar.\ng. On mouse over a bar legend, should highlight all the bars of that type on all the stacked bars.\ng. On mouse out after mouse over on first legend, should have opacity 0.1 for second bar initially (during mouseOver on first legend) and opacity set to 1 for both the bars on mouse out."]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.em,{children:"Keyboard Events"}),":\na. On focus on a bar, should render the corresponding callout.\nb. On focus on a line, should highlight the corresponding line and its legend."]}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Learnings"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"While implementing the tests using react testing library, it was found that certain browser functions like\xa0getComputedTextLength()\xa0cannot be unit tested and needs to be tested End-to-End only."}),"\n",(0,a.jsx)(t.li,{children:"Order of imports are important.\nFor example: for Vertical bar charts tests, improper sequencing of the imports (data first and then render) results in incorrect and incopmlete rendering of charts:"}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{children:"import { chartPoints } from '../VerticalBarChart/VerticalBarChart.test';\nimport { render, screen, queryAllByAttribute, fireEvent, act } from '@testing-library/react';\n"})}),"\n",(0,a.jsx)(t.p,{children:"However, the following results in correct rendering:"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{children:"import { render, screen, queryAllByAttribute } from '@testing-library/react';\n\nimport { chartPoints } from './VerticalBarChart.test';\n"})}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:"Certain props need async await structure (waitFor in react testing library) for different props or nested SVGs to render."}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Design figma"}),"\nVertical Stacked Bar Chart Figma -\xa0",(0,a.jsx)(t.a,{href:"https://www.figma.com/file/WOoCs0CmNYZhYl9xXeCGpi/Data-viz-(Archive)?type=design&node-id=21153-80197&mode=design&t=kjtgBpG3tOGCcx00-0",children:"Link"}),"\xa0"]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Known issues"})}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"Setting the margins externally via the props may cut the x and y ticks if the margins provided are very less. Setting a minimum margin would prevent any such distortions."}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Performance"}),"\nThe performance aspect of a vertical stacked bar chart refers to how efficiently and effectively it conveys information to the viewer. Here are some key considerations regarding the performance of a line chart:"]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:"Data Visualization Efficiency"}),"\n",(0,a.jsx)(t.li,{children:"Clarity and Simplicity"}),"\n",(0,a.jsx)(t.li,{children:"Responsiveness"}),"\n",(0,a.jsx)(t.li,{children:"Handling Large Datasets"}),"\n",(0,a.jsx)(t.li,{children:"Interactive Features"}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"References"})}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(t.ol,{children:["\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://github.com/d3/d3-scale/blob/main/README.md",children:"D3-scale"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://github.com/d3/d3-selection/blob/main/README.md",children:"D3-selection"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://github.com/d3/d3-array/blob/main/README.md",children:"D3-array"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://github.com/d3/d3-axis/blob/main/README.md",children:"D3-axis"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/wiki/How-to-apply-theme-to-Fluent-UI-React-components",children:"How to apply theme"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/wiki/Theming",children:"Theming"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://developer.microsoft.com/en-us/fluentui#/controls/web/verticalbarchart/verticalstackedbarchart",children:"Vertical Stacked Bar Chart"})}),"\n"]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.strong,{children:"Appendix"}),"\nThe mathematical formulae used in the Vertical Stacked bar chart component are as follows:"]}),"\n"]}),"\n",(0,a.jsxs)(t.ol,{children:["\n",(0,a.jsx)(t.li,{children:"Formula for calculating the\xa0yBarScale\xa0using\xa0d3ScaleLinear:"}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{children:"yBarScale = d3ScaleLinear()\n\n.domain([0, yMax])\n\n.range([0, containerHeight - margins.bottom! - margins.top!])\n"})}),"\n",(0,a.jsxs)(t.ol,{start:"2",children:["\n",(0,a.jsx)(t.li,{children:"Formula for calculating the\xa0xBarScale\xa0for numeric data using\xa0d3ScaleLinear:"}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{children:"xMax = d3Max(this.\\_dataset, (point: IDataPoint) => point.x as number)!\n\nxMin = d3Min(this.\\_dataset, (point: IDataPoint) => point.x as number)!\n\nxBarScale = d3ScaleLinear()\n\n.domain(this.\\_isRtl ? [xMax, xMin] : [xMin, xMax])\n\n.nice()\n\n.range([\n\n` `margins.left! + \\_domainMargin,\n\n` `containerWidth - margins.right! - \\_barWidth - \\_domainMargin,\n\n` `])\n"})}),"\n",(0,a.jsxs)(t.ol,{start:"3",children:["\n",(0,a.jsx)(t.li,{children:"Formula for calculating the\xa0xBarScale\xa0for categorical data using\xa0d3ScaleBand:"}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{children:"xBarScale = d3ScaleBand()\n\n.domain(\\_xAxisLabels)\n\n.range([margins.left! + \\_domainMargin, containerWidth - margins.right! - \\_domainMargin])\n\n.paddingInner(2 / 3)\n"})}),"\n",(0,a.jsxs)(t.ol,{start:"4",children:["\n",(0,a.jsx)(t.li,{children:"Formula for calculating the height of each bar in the chart:"}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{children:"barHeight = heightValueScale \\* point.data;\n\nWhen displaying gaps between the bars, the height of each bar is adjusted so that the total of all bars is not changed by the gaps\n\ntotalData = bars.reduce((iter, value) => iter + value.data, 0)\n\ntotalHeight = defaultTotalHeight ?? yBarScale(totalData)\n\ngaps = barGapMax && bars.length - 1\n\ngapHeight = gaps && Math.max(barGapMin, Math.min(barGapMax, (totalHeight \\* barGapMultiplier) / gaps))\n\nheightValueScale = (totalHeight - gapHeight \\* gaps) / totalData\n\nif (barHeight < barMinimumHeight) {\n\n` `barHeight = barMinimumHeight\n\n}\n\nDefault values:\n\nbarGapMax = props.barGapMax (default value = 0)\n\nWhen displaying gaps between bars, the max height of the gap is given in the props. The actual gap is calculated with this multiplier, with a minimum gap of 1 pixel.\n\nbarGapMin = 1\n\nbarGapMultiplier = 0.2\n"})}),"\n",(0,a.jsxs)(t.ol,{start:"5",children:["\n",(0,a.jsx)(t.li,{children:"Formula for calculating the x position of each bar in the chart:"}),"\n"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{children:"x = xBarScale(bar.category) + (this.\\_barWidth / 2)\n"})}),"\n",(0,a.jsx)(t.hr,{})]})}function d(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(c,{...e})}):c(e)}},4757:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/VSBC1-de2ee9ef0194f703abc7f8806bc869e7.png"},3160:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/VSBC2-3decd6986a55117047292cb20444e7c1.png"},9845:(e,t,n)=>{n.d(t,{Z:()=>a});const a=n.p+"assets/images/VSBC3-01489e0f79d82ab97318b9dc49952bae.png"},1151:(e,t,n)=>{n.d(t,{Z:()=>h,a:()=>r});var a=n(7294);const i={},s=a.createContext(i);function r(e){const t=a.useContext(s);return a.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function h(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),a.createElement(s.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/df751193.11c160c7.js b/assets/js/df751193.11c160c7.js
new file mode 100644
index 0000000000..aa5af5ce7e
--- /dev/null
+++ b/assets/js/df751193.11c160c7.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdocsite=self.webpackChunkdocsite||[]).push([[5966],{5321:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>h,contentTitle:()=>i,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>c});var s=n(5893),a=n(1151);const r={},i="Contributor guide: Donut Chart",o={id:"Charting-Concepts/DonutChart",title:"Contributor guide: Donut Chart",description:"DonutChart1.png",source:"@site/../../docs/Charting-Concepts/DonutChart.md",sourceDirName:"Charting-Concepts",slug:"/Charting-Concepts/DonutChart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/DonutChart",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Contributor guide: Area Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/AreaChart"},next:{title:"Contributor guide: Gauge Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/GaugeChart"}},h={},c=[{value:"Use cases",id:"use-cases",level:2},{value:"Mathematical/Geometrical concepts",id:"mathematicalgeometrical-concepts",level:2},{value:"Dev Design details",id:"dev-design-details",level:2}];function l(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"contributor-guide-donut-chart",children:"Contributor guide: Donut Chart"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"DonutChart1.png",src:n(3088).Z+"",width:"749",height:"529"})}),"\n",(0,s.jsx)(t.p,{children:"A Donut chart is a type of chart used to visualize data as a circular shape with the central area hollow. It is similar to a Pie chart, but with the area in the center cut out instead of a solid circle.\nDonut charts are useful for displaying data as parts of a whole, where each segment represents a percentage or proportion of the total. The segments are typically colored differently to make them easier to distinguish."}),"\n",(0,s.jsx)(t.h2,{id:"use-cases",children:"Use cases"}),"\n",(0,s.jsx)(t.p,{children:"Donut charts are commonly used in business and finance to display financial data, such as revenue or expenses. They are also used in marketing to display customer demographics or market share. Here are some real-world use cases for Donut charts:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Sales data: Donut charts can be used to display sales data, where each segment represents a product or service category. This can help businesses identify which products or services are performing well and which ones need improvement."}),"\n",(0,s.jsx)(t.li,{children:"Budget data: Donut charts can be used to display budget data, where each segment represents a budget category. This can help businesses identify areas where they are overspending or underspending."}),"\n",(0,s.jsx)(t.li,{children:"Demographic data: Donut charts can be used to display demographic data, where each segment represents a different demographic group. This can help businesses identify their target audience and tailor their marketing efforts accordingly."}),"\n",(0,s.jsx)(t.li,{children:"Market share data: Donut charts can be used to display market share data, where each segment represents a different company or brand. This can help businesses identify their competitors and their position in the market."}),"\n",(0,s.jsx)(t.li,{children:"Survey data: Donut charts can be used to display survey data, where each segment represents a different response option. This can help businesses identify the most popular responses and areas where improvements can be made."}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Overall, Donut charts are useful for displaying data as parts of a whole, where each segment represents a percentage or proportion of the total. They are a popular choice for visualizing financial, marketing, and survey data."}),"\n",(0,s.jsx)(t.h2,{id:"mathematicalgeometrical-concepts",children:"Mathematical/Geometrical concepts"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"DonutChart2.png",src:n(5269).Z+"",width:"1117",height:"662"})}),"\n",(0,s.jsx)(t.p,{children:"The d3-shape library provides various functions for creating and manipulating shapes such as arcs, lines, and areas. Following are the main mathematical/geometrical concepts that are used while drawing a donut chart."}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"d3.arc():"})," Creates an arc generator function that can be used to create an SVG arc path. The arc generator function takes in an object that specifies the start and end angles of the arc, as well as the inner and outer radii of the arc. The following are some of the main props that the arc generator accepts:"]}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{children:"- startAngle: The starting angle of the arc, in radians. The default value is 0.\n- endAngle: The ending angle of the arc, in radians. The default value is 2\u03c0 (i.e., a full circle).\n- innerRadius: The inner radius of the arc, in pixels. The default value is 0.\n- outerRadius: The outer radius of the arc, in pixels. This prop is required.\n- padAngle: The amount of padding to add between adjacent arcs, in radians. The default value is 0.\n"})}),"\n",(0,s.jsxs)(t.ol,{start:"2",children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"d3.pie():"})," creates a pie generator function that can be used to create a pie chart. The pie generator function takes in an array of data and returns an array of objects that represent each data point in the pie chart."]}),"\n"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Pie formation: The function uses the data values to calculate the angles for each data point. It then uses the angles to create a series of arcs that represent each data point in the pie chart. The arcs are created using the d3.arc() function, which creates an SVG arc path based on the start and end angles of the arc."}),"\n",(0,s.jsx)(t.li,{children:"Supported props: The function also provides various options for customizing the pie chart, such as the pie start angle, the pie end angle, and the sort order of the data points. These options can be used to create different types of pie charts, such as donut charts or exploded pie charts.\nHere are the main props that can be passed to the pie generator function:"}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{children:"- data: the input datum; the corresponding element in the input data array.\n- value: the numeric value of the arc.\n- index: the zero-based sorted index of the arc.\n- startAngle: The starting angle of the pie chart, in radians. The default value is 0.\n- endAngle: The ending angle of the pie chart, in radians. The default value is 2\u03c0 (i.e., a full circle).\n- padAngle: The amount of padding to add between adjacent data points, in radians. The default zalue is 0.\n"})}),"\n",(0,s.jsx)(t.h2,{id:"dev-design-details",children:"Dev Design details"}),"\n",(0,s.jsx)(t.p,{children:"This section contains the technical design of various sub components of a donut chart and how they interact with each other. This section can also contain any key interface or class structure of the donut chart.\nThe Donut chart consists of the following sub-components:"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.strong,{children:"Arc:"})}),"\n"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Arc creation:"})," This component is used to render an arc in a pie chart, and it receives various props such as the arc data, color, and focus state. The component uses the d3-shape library to create the arc shape, and it also uses the @fluentui/react library to apply styles to the component."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Arc event handlers:"})," The Arc component has several methods that handle events such as _onFocus, _hoverOn, _hoverOff, _onBlur and onClick. These methods are used to update the component's state and to trigger callbacks that are passed in as props. The component also has a method called _renderArcLabel that is used to render the label for the arc."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Arc update:"})," The Arc component uses the getDerivedStateFromProps method to update the chart whenever new props are received. This method calls the _updateChart function, which updates the inner and outer radius of the arc based on the new props.\nOverall, the Arc component is a reusable component that can be used to render an arc in a pie chart. It is highly customizable and can be used in a variety of contexts."]}),"\n"]}),"\n",(0,s.jsxs)(t.ol,{start:"2",children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.strong,{children:"Pie:"})}),"\n"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Pie creation:"})," This component is used to render a pie chart, and it receives various props such as the chart data, inner and outer radius, and callbacks for hover and focus events. The component uses the d3-shape library to create the pie chart shape, and it also uses the @fluentui/react library to apply styles to the component."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Constraint:"})," The inner radius has to be greater than 0."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Pie handlers:"})," The Pie component has several methods that handle events such as _focusCallback and _hoverCallback. These methods are used to update the component's state and to trigger callbacks that are passed in as props. The component also has a method called _computeTotalValue that is used to calculate the total value of the chart data."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Pie update:"})," The Pie component uses the getDerivedStateFromProps method to update the chart whenever new props are received. This method calls the _updateChart function, which updates the inner and outer radius of the chart based on the new props.\nOverall, the Pie component is a reusable component that can be used to render a pie chart. It is highly customizable and can be used in a variety of contexts."]}),"\n"]}),"\n",(0,s.jsxs)(t.ol,{start:"3",children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.strong,{children:"Callout:"})}),"\n"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Callout creation:"})," The DonutChart component has a method called _renderCallouts that is used to render callouts for the data points. This method creates a Callout component from the @fluentui/react library and passes in various props such as the target element, the callout ID, and the callout content. The method also sets up various actions for the callout, such as hover and dismiss actions."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Callout behaviour:"})," The Callout component is used to display additional information about a data point when it is hovered over. It is positioned relative to the hovered data point and displays information such as the data point's legend, value, and color. The Callout component is highly customizable and can be used in a variety of contexts."]}),"\n"]}),"\n",(0,s.jsxs)(t.ol,{start:"4",children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.strong,{children:"Legends:"})}),"\n"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Legend creation:"})," The DonutChart component has a private method called _createLegends that is used to create the legends for the chart. This method takes in the chart data and color palette as arguments and returns a JSX element that contains the legends. The method maps over the chart data and creates a legend for each data point. It also sets up various actions for each legend, such as hover and click actions."]}),"\n"]}),"\n",(0,s.jsxs)(t.ol,{start:"5",children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.strong,{children:"Inner Text:"})}),"\n"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Inner text description:"})," The inner text in a Donut chart is the text displayed in the centre of the donut chart, inside the hollow region. This text can be used to display additional information about the data being displayed, such as the total value or the name of the data set."]}),"\n"]}),"\n",(0,s.jsxs)(t.ol,{start:"6",children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Rendering details"}),"\nThe donut chart uses d3 SVG based rendering, which follows the following render cycles:"]}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{children:"Invocation cycle: Donut Chart -> Pie -> Arc\nRendering cycle: Donut chart <- d3.pie() <- d3.arc()\n"})}),"\n",(0,s.jsxs)(t.ol,{start:"7",children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.strong,{children:"Error scenarios"})}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Currently, donut chart cannot handle long inner texts which overflows and results in error state. Fix for this issue is already in PR."}),"\n",(0,s.jsxs)(t.ol,{start:"8",children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Localization aspects"}),"\nCurrently, donut chart provides localization only for the inner text."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Testing"}),"\nThe manual, component and unit testing of donut charts have been completed. Following is the improvement in code coverage:"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"DonutChart3.png",src:n(2621).Z+"",width:"2475",height:"537"})}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["Component Tests:\no Work item: ",(0,s.jsx)(t.a,{href:"https://uifabric.visualstudio.com/iss/_workitems/edit/6798/",children:"https://uifabric.visualstudio.com/iss/_workitems/edit/6798/"}),"\no Test plan: ",(0,s.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/blob/master/packages/react-charting/docs/TestPlans/DonutChart/ComponentTests.md",children:"https://github.com/microsoft/fluentui/blob/master/packages/react-charting/docs/TestPlans/DonutChart/ComponentTests.md"})]}),"\n",(0,s.jsxs)(t.li,{children:["Unit Tests:\no Work item: ",(0,s.jsx)(t.a,{href:"https://uifabric.visualstudio.com/iss/_workitems/edit/7403",children:"https://uifabric.visualstudio.com/iss/_workitems/edit/7403"})]}),"\n"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Accessibility"}),"\nFAST pass checks resulted in no error for Donut chart. Link to the FAST pass tool: ",(0,s.jsx)(t.a,{href:"https://accessibilityinsights.io/docs/web/getstarted/fastpass/",children:"https://accessibilityinsights.io/docs/web/getstarted/fastpass/"}),"\nOur charts have elaborate accessibility support. The charts are WCAG 2.1 MAS C compliant for accessibility.\nConsumers can define their own aria labels for each point by setting the xAxisCalloutAccessibilityData and callOutAccessibilityData properties."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Theming"}),'\nThe palette for donut chart is set from the "theme" prop as passed to the component during rendering. Both light and dark themes are supported and users can create there own theme too. Ref[3] and Ref[4] explains theming in detail.']}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Debugging"}),"\nThe detailed steps on debugging has been given in\xa0",(0,s.jsx)(t.a,{href:"https://github.com/microsoft/fluentui-charting-contrib/blob/main/docs/Debugging.md",children:"Debugging"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Variants"}),"\nFollowing are the variants of donut chart: ",(0,s.jsx)(t.a,{href:"https://developer.microsoft.com/en-us/fluentui#/controls/web/donutchart",children:"Ref2"})]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsx)(t.li,{children:"Basic Donut Chart: Only basic props are provided."}),"\n",(0,s.jsx)(t.li,{children:"Dynamic Donut Chart: The data and pie colors can change."}),"\n",(0,s.jsx)(t.li,{children:"Custom Callout: Can show customized callout data."}),"\n",(0,s.jsx)(t.li,{children:"Custom Accessibility: Providing custom aria labels."}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Interaction"}),"\nFollowing are the interactions that are allowed for donut chart:"]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsx)(t.li,{children:"Mouse Events:\na. On mouse over on the donut chart, should render callout.\nb. On mouse move on Pie 1 (step 1) -> mouse leave (step 2) -> mouse move on Pie 2 (step 3), should render the callout of the Pie 2.\nc. On mouse over, callout should be defined, on mouse leave, callout should disappear.\nd. On mouse over on legends, should highlight the corresponding pie.\ne. On mouse over on legends, should change the value inside donut with the legend value.\nf. On click on Pie, should highlight the corresponding pie with aria-selected set to \u201ctrue\u201d and tabIndex set to 0.\ng. On mouse out after mouse over on first legend, should have opacity 0.1 for second Pie initially (during mouseOver on first legend) and opacity set to 1 for both the Pies on mouse out."}),"\n",(0,s.jsx)(t.li,{children:"Keyboard Events:\na. On focus on a Pie, should render the corresponding callout.\nb. On blur on a Pie, should remove focus from the corresponding Pie."}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Some notable PRs and their brief description"})}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/commit/b60d3dfb35367467568d91c2933bb7053e9b716b",children:"Adding the Donut Chart main component"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/commit/5349c8cbc522ff7b9eac2e5858cbad092d22eb82",children:"Adding Tests for Donut Chart using React Testing Library"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/commit/50ee71862affde61ace35edcb5c3d6f67928f343",children:"Allow focus navigation with tab key in donut chart (Accessibility)"})}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Learnings"})}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:"While implementing the tests using react testing library, it was found that certain browser functions like getComputedTextLength() cannot be unit tested and needs to be tested End-to-End only."}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:"Order of imports are important.\nFor example: for Vertical bar charts tests, improper sequencing of the imports (data first and then render) results in incorrect and incopmlete rendering of charts:"}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{children:"import { chartPoints } from '../VerticalBarChart/VerticalBarChart.test';\nimport { render, screen, queryAllByAttribute, fireEvent, act } from '@testing- \nlibrary/react';\nHowever, the following results in correct rendering:\n\nimport { render, screen, queryAllByAttribute } from '@testing-library/react';\nimport { chartPoints } from './VerticalBarChart.test';\n"})}),"\n",(0,s.jsxs)(t.ol,{start:"3",children:["\n",(0,s.jsx)(t.li,{children:"Certain props need async await structure (waitFor in react testing library) for different props or nested SVGs to render."}),"\n"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.strong,{children:"Known issues"})}),"\n"]}),"\n",(0,s.jsxs)(t.p,{children:["The value inside Donut chart overflows. Should be ideally wrapping inside the donut chart. Work item 5321 captures this bug. This item has already been fixed in this ",(0,s.jsx)(t.a,{href:"https://github.com/microsoft/fluentui/pull/26192",children:"PR"}),"."]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.strong,{children:"Future improvements"})}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Following are the list of future improvements for the donut chart:"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsx)(t.li,{children:"The donut chart component can be extended to support Nested Donut Charts which can also be used to display multiple sets of data, where each ring represents a different data set."}),"\n"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Design figma"}),"\nDonut Chart Figma: ",(0,s.jsx)(t.a,{href:"https://www.figma.com/file/WOoCs0CmNYZhYl9xXeCGpi/Data-viz-(Archive)?type=design&node-id=3361-77520&mode=design&t=lvW5txXwtfI7wvOI-0",children:"Link"})]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.strong,{children:"Performance"})}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"The performance aspect of a donut chart refers to how efficiently and effectively it conveys information to the viewer. Here are some key considerations regarding the performance of a line chart:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Data Visualization Efficiency"}),"\n",(0,s.jsx)(t.li,{children:"Clarity and Simplicity"}),"\n",(0,s.jsx)(t.li,{children:"Responsiveness"}),"\n",(0,s.jsx)(t.li,{children:"Handling Large Datasets"}),"\n",(0,s.jsxs)(t.li,{children:["Interactive Features\nWe use Lighthouse tool for measuring the performance of our charts. Following are few of the scenarios for which we measure the performance score for donut chart:","\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsx)(t.li,{children:"chart with 100 data points"}),"\n",(0,s.jsx)(t.li,{children:"charts with localized data\nAll of the above scenarios have 95+ Lighthouse score. We are efficient in terms of the performance of the donut chart."}),"\n"]}),"\n"]}),"\n"]})]})}function d(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},3088:(e,t,n)=>{n.d(t,{Z:()=>s});const s=n.p+"assets/images/DonutChart1-9f10b2df3479f2d893fa20709ae72eb0.png"},5269:(e,t,n)=>{n.d(t,{Z:()=>s});const s=n.p+"assets/images/DonutChart2-8fa01069f0af01a5a142c8909c588c1f.png"},2621:(e,t,n)=>{n.d(t,{Z:()=>s});const s=n.p+"assets/images/DonutChart3-43bb764e6b1372961370da02b2f7196b.png"},1151:(e,t,n)=>{n.d(t,{Z:()=>o,a:()=>i});var s=n(7294);const a={},r=s.createContext(a);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/e1621294.274910be.js b/assets/js/e1621294.274910be.js
new file mode 100644
index 0000000000..52408f379c
--- /dev/null
+++ b/assets/js/e1621294.274910be.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdocsite=self.webpackChunkdocsite||[]).push([[3633],{7037:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>h,contentTitle:()=>s,default:()=>d,frontMatter:()=>r,metadata:()=>o,toc:()=>l});var a=t(5893),i=t(1151);const r={},s="Contributor guide: Sparkline Chart",o={id:"Charting-Concepts/SparklineChart",title:"Contributor guide: Sparkline Chart",description:"Sparkline1.png",source:"@site/../../docs/Charting-Concepts/SparklineChart.md",sourceDirName:"Charting-Concepts",slug:"/Charting-Concepts/SparklineChart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/SparklineChart",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Contributor Guide: Sankey Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/SankeyChart"},next:{title:"Contributor guide: Stacked Bar Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/StackedBarChart"}},h={},l=[];function c(e){const n={a:"a",code:"code",em:"em",h1:"h1",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h1,{id:"contributor-guide-sparkline-chart",children:"Contributor guide: Sparkline Chart"}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"Sparkline1.png",src:t(5458).Z+"",width:"919",height:"326"})}),"\n",(0,a.jsx)(n.p,{children:"A Sparkline chart is a small, simple chart that is used to display trends over time or changes in data. It is typically used in dashboards or reports where space is limited. The chart consists of a line that shows the trend over time, and an area that shows the range of the data. The chart is designed to be small and compact, so it can be used in dashboards or reports where space is limited."}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Use cases"}),"\nFollowing are some use cases for Sparkline Chart:","\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Displaying trends over time:"}),"\xa0Sparkline charts are great for showing trends over time, such as stock prices, website traffic, or weather patterns. By compressing the data into a small space, sparklines can quickly show whether the trend is up, down, or flat."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Showing changes in data:"}),"\xa0Sparkline charts can also be used to show changes in data, such as the number of sales per day or the number of website visitors per hour. By comparing the data points to each other, sparklines can show whether the changes are significant or not."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Comparing multiple data sets:"}),"\xa0Sparkline charts can be used to compare multiple data sets, such as the sales of different products or the performance of different teams. By placing the sparklines side by side, it's easy to see which data set is performing better."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Visualizing data in a small space:"}),"\xa0Sparkline charts are great for visualizing data in a small space, such as a dashboard or a report. By compressing the data into a small chart, sparklines can provide a quick overview of the data without taking up too much space."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Providing a quick overview of data:"}),"\xa0Sparkline charts can be used to provide a quick overview of data, such as the performance of a website or the progress of a project. By placing the sparkline chart in a prominent location, it's easy to see whether the data is trending in the right direction."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Displaying data in a dashboard or report:"}),"\xa0Sparkline charts are often used in dashboards or reports to provide a quick overview of data. By combining sparkline charts with other types of charts and graphs, it's possible to create a comprehensive view of the data."]}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Mathematical/Geometrical concepts"}),"\nThe major D3 functions that are involved in the creation of Vertical bar charts are:","\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.strong,{children:"d3-scale:"}),"\nThe\xa0d3-scale\xa0module is a part of the d3 library, which is a collection of JavaScript functions that are used for data visualization. The\xa0d3-scale\xa0module provides several functions for creating and manipulating scales, which are used to map data values to visual properties, such as\xa0position, size, and color."]}),"\n",(0,a.jsx)(n.p,{children:"The\xa0d3-scale\xa0module includes several scale types, including linear, logarithmic, power, and time scales. These scales are used to map continuous data values to a continuous range of visual properties. The module also includes ordinal and band scales, which are used to map categorical data values to a discrete range of visual properties."}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"The\xa0d3-scale\xa0module provides several functions for creating and manipulating scales, including\xa0scaleLinear, scaleLog, scalePow, scaleTime, scaleOrdinal, and scaleBand. These functions take one or more arguments that define the domain and range of the scale, as well as any additional properties, such as the number of ticks or the padding between bands."}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.strong,{children:"Application in Sparkline chart:"}),"\nIn Sparkline chart, d3Scale is used to create a linear scale for the x and y axes of the sparkline chart."]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.strong,{children:"d3.scaleLinear()"}),": The\xa0d3.scaleLinear\xa0is a function from the\xa0d3-scale\xa0module that is used to create a linear scale for the y-axis of the chart. The linear scale maps a continuous domain of data values to a continuous range of visual properties, such as position or height. The\xa0d3ScaleLinear\xa0function takes no arguments and returns a new linear scale. The scale can be customized using several methods, including\xa0domain, range, clamp, and nice. The\xa0domain\xa0method sets the domain of the scale, which is the range of data values that the scale maps to the range of visual properties. The\xa0range\xa0method sets the range of the scale, which is the range of visual properties that the scale maps to the domain of data values."]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"Application in Sparkline chart:"})}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"In Sparkline chart,\xa0d3.scaleLinear()\xa0is used to create a linear scale for the x and y axes of the sparkline chart."}),"\n",(0,a.jsx)(n.li,{children:"The x scale is created using the\xa0d3.scaleLinear()\xa0function and is defined by the minimum and maximum values of the x-axis data points."}),"\n",(0,a.jsx)(n.li,{children:"The y scale is also created using the\xa0d3.scaleLinear()\xa0function and is defined by the minimum and maximum values of the y-axis data points."}),"\n",(0,a.jsx)(n.li,{children:"These scales are then used to map the data points to the corresponding positions on the chart."}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.strong,{children:"d3-shape:"}),"\xa0The d3-shape library provides various functions for creating and manipulating shapes such as arcs, lines, and areas. Following are the main mathematical/geometrical concepts that are used while drawing a Sparkline chart.\n",(0,a.jsx)(n.strong,{children:"Application in Sparkline chart:"})]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"d3.area():"}),'\xa0In Sparkline chart,\xa0d3.area()\xa0is used to create an area chart for the Sparkline component. It is initialized in the\xa0componentDidMount\xa0method and takes in an array of data points as input. The\xa0x\xa0and\xa0y\xa0values of each data point are used to create the shape of the area chart. The\xa0x\xa0value is mapped to the\xa0x-axis\xa0and the\xa0y\xa0value is mapped to the\xa0y-axis. The area chart is then rendered using the\xa0drawSparkline\xa0method, which returns a path element with the class name "area". The fill color of the area chart is set to the color of the line chart data point and the opacity is set to\xa00.2. The\xa0aria-label\xa0attribute is also set to the legend of the line chart data point.']}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"d3.line():"}),"\xa0In Sparkline chart, d3Line is used to create a line generator function that is used to generate a line path for the Sparkline chart. The line generator function takes an array of data points and generates a path string that represents the line connecting those points. The\xa0x\xa0and\xa0y\xa0values of each data point are mapped to the\xa0x\xa0and\xa0y\xa0coordinates of the line path using the\xa0x\xa0and\xa0y\xa0scales created using\xa0d3.scaleLinear(). The\xa0curveLinear\xa0function is used to specify the type of curve used to interpolate between the data points. The resulting line path is then rendered in the SVG element of the Sparkline chart."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"d3.curveLinear():"}),"\xa0In the Sparkline chart,\xa0d3.curveLinear()\xa0is used to define the curve type for the line and area charts in the Sparkline component. It is used in the\xa0componentDidMount\xa0method to create an area and line function that will be used to draw the chart. The\xa0curve\xa0method is called on both the\xa0area\xa0and\xa0line\xa0functions, passing in\xa0d3.curveLinear()\xa0as the argument. This sets the curve type to be a straight line between each data point. This means that the line and area charts will be drawn with straight lines connecting each data point, rather than a curved line."]}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.strong,{children:"d3-array:"}),"\xa0The\xa0d3-array\xa0is a module from the d3 library that is used to manipulate arrays of data in the chart component. The\xa0d3-array\xa0module provides several functions for manipulating arrays of data, including\xa0max, min, extent, sum, and mean. The\xa0max\xa0function is used to find the maximum value in an array of data. The\xa0min\xa0function is used to find the minimum value in an array of data. The\xa0extent\xa0function is used to find the minimum and maximum values in an array of data. The\xa0sum\xa0function is used to find the sum of the values in an array of data. The\xa0mean\xa0function is used to find the mean (average) of the values in an array of data."]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"Application in Sparkline chart:"})}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"d3.max():"}),"\xa0In Sparkline chart,\xa0d3.max()\xa0is used to find the maximum value of the y-axis domain for the Sparkline chart. It takes an array of data points and a function that returns the value to be compared. In this case, it compares the y value of each data point. The maximum y value is then used to set the upper limit of the y-axis scale."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"d3.extent():"}),"\xa0In Sparkline chart,\xa0d3.extent()\xa0is used to calculate the minimum and maximum values of the x-axis of the sparkline chart. It takes an array of data points as its first argument and a function that returns the value to be used for the extent calculation as its second argument. In this case, the function returns the x-value of each data point. The resulting array of minimum and maximum values is then used to set the domain of the x-axis scale."]}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.strong,{children:"Dev Design details"}),"\nThis section contains the technical design of various sub-components of a Sparkline chart and how they interact with each other. This section can also contain any key interface or class structure of the donut chart.\nThe Sparkline chart consists of the following sub-components:"]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"1. Line:"})}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.strong,{children:"Line creation:"}),"\xa0In the Sparkline chart, the line is created using the\xa0d3Line()\xa0function from the\xa0d3-shape\xa0library. The\xa0d3Line()\xa0function generates a line generator function that can be used to generate a line path string for the given data points."]}),"\n",(0,a.jsx)(n.p,{children:"In the\xa0Sparkline\xa0component, the\xa0line\xa0variable is assigned to the line generator function created using\xa0d3Line(). The\xa0x\xa0and\xa0y\xa0values for each data point are specified using the\xa0x()\xa0and\xa0y()\xa0methods of the line generator function, respectively. The\xa0curve()\xa0method is used to specify the type of curve to use for the line."}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"Finally, the line path string is generated by calling the\xa0line()\xa0method of the line generator function with the array of data points as its argument. This path string is then used to draw the line in the chart."}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"2. Area:"})}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Area creation:"}),"\xa0The area in the Sparkline chart is created using the\xa0d3.area()\xa0function from the\xa0d3-shape\xa0library. The\xa0d3.area()\xa0function generates an area shape for the given data points. In this code, the\xa0d3.area()\xa0function is called with the following parameters:","\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:".x((d: any) => this.x(d.x)): This sets the x-coordinate of each point in the area to the corresponding x-coordinate of the data point."}),"\n",(0,a.jsx)(n.li,{children:".y0(this.state._height): This sets the y-coordinate of the bottom of the area to the height of the Sparkline chart."}),"\n",(0,a.jsx)(n.li,{children:".y1((d: any) => this.y(d.y)): This sets the y-coordinate of each point in the area to the corresponding y-coordinate of the data point."}),"\n",(0,a.jsx)(n.li,{children:".curve(d3curveLinear): This sets the curve of the area to a linear curve."}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"The resulting area shape is then rendered in the\xa0drawSparkline\xa0method of the\xa0Sparkline\xa0component."}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"3. Legend:"})}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"If\xa0showLegend\xa0prop is set to true, the chart displays the value of the legend which is mentioned in the provided data. Otherwise, no value is displayed."}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.strong,{children:"Rendering details"})}),"\n"]}),"\n",(0,a.jsxs)(n.ol,{children:["\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsx)(n.p,{children:"A Sparkline chart is drawn using a line and an area that represent the trend of the data over time. The line shows the trend of the data, while the area shows the range of the data. The chart is typically small and compact, making it ideal for displaying trends and changes in data in a small space."}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsx)(n.p,{children:"The chart is drawn using the D3 (Data-Driven Documents) library. The\xa0drawSparkline\xa0method of the\xa0Sparkline\xa0component returns a JSX element that contains two SVG paths, one for the line and one for the area."}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsx)(n.p,{children:"The\xa0line\xa0and\xa0area\xa0variables are created using the\xa0d3.line()\xa0and\xa0d3.area()\xa0functions respectively. These functions take an array of data points and generate a path string that can be used to draw the line or area."}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsx)(n.p,{children:"The\xa0x\xa0and\xa0y\xa0scales are created using the\xa0d3.scaleLinear()\xa0function, which maps the data points to the x and y coordinates of the chart. The\xa0domain\xa0method sets the range of the data, while the\xa0range\xa0method sets the range of the chart."}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsx)(n.p,{children:"Once the scales are created, the\xa0line\xa0and\xa0area\xa0functions are called with the data points to generate the path strings. These path strings are then used to draw the line and area on the chart."}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsx)(n.p,{children:"The\xa0drawSparkline\xa0method also sets the stroke and fill colors of the line and area based on the\xa0color\xa0property of the\xa0lineChartData\xa0object. The\xa0opacity\xa0and\xa0fillOpacity\xa0properties are also set to control the transparency of the chart."}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsx)(n.p,{children:"Finally, the\xa0aria-label\xa0property is set to provide an accessible label for the chart. This label includes the legend text of the\xa0lineChartData\xa0object."}),"\n",(0,a.jsx)(n.p,{children:"Overall, the Sparkline chart is drawn using D3 to generate the path strings for the line and area of the chart and sets the properties of the chart based on the\xa0lineChartData\xa0object."}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Error scenarios"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:'The Sparkline chart handles the scenario where there is no data to display. In this case, it displays a message stating that the graph has no data to display. This is done by rendering a div with an id of\xa0_SparklineChart_empty\xa0and setting its opacity to 0. The div has an aria-label attribute with the value "Graph has no data to display".'}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Localization aspects"}),"\nCurrently, Sparkline chart does not provide any localization support."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Testing"}),"\nFollowing is the test report for Sparkline Chart:\n",(0,a.jsx)(n.img,{alt:"Sparkline2.png",src:t(9636).Z+"",width:"2479",height:"535"})]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Accessibility"}),"\nFAST pass checks resulted in no error for Sparkline chart. Link to the ",(0,a.jsx)(n.a,{href:"https://accessibilityinsights.io/docs/web/getstarted/fastpass/",children:"FAST pass tool"}),"\xa0\nOur charts have elaborate accessibility support. The charts are WCAG 2.1 MAS C compliant for accessibility."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Theming"}),'\nThe palette for donut chart is set from the "theme" prop as passed to the component during rendering. Both light and dark themes are supported and users can create there own theme too.\xa0',(0,a.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/wiki/Theming",children:"Ref3"}),"\xa0\xa0and\xa0",(0,a.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/wiki/How-to-apply-theme-to-Fluent-UI-React-components",children:"Ref4"}),"\xa0\xa0explains theming in detail."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Debugging"}),"\nThe detailed steps on debugging has been given in\xa0",(0,a.jsx)(n.a,{href:"https://github.com/microsoft/fluentui-charting-contrib/blob/main/docs/Debugging.md",children:"Debugging"}),"."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Variants"}),"\nFollowing are the variants of donut chart:\xa0",(0,a.jsx)(n.a,{href:"https://developer.microsoft.com/en-us/fluentui#/controls/web/sparklinechart",children:"Ref2"}),"\xa0","\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"Basic Sparkline Chart: Only basic props are provided."}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Interaction"}),"\nFollowing are the interactions that are allowed for Sparkline chart:","\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"The Sparkline charts are focusable using mouse and keyboard."}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Some notable PRs and their brief description"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/commit/e4efe4f056ed6af7d6e55e87580906efacc9a1fc",children:"Adding the Sparkline Chart main component and tests"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/commit/9af1af0649760df3eb0fae4a9c542466388318ac",children:"Fixing charting visualization bugs"})}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.strong,{children:"Learnings"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["While implementing the tests using react testing library, it was found that certain browser functions like\xa0",(0,a.jsx)(n.em,{children:"getComputedTextLength()"}),"\xa0cannot be unit tested and needs to be tested End-to-End only."]}),"\n",(0,a.jsx)(n.li,{children:"Order of imports are important.\nFor example: for Vertical bar charts tests, improper sequencing of the imports (data first and then render) results in incorrect and incomplete rendering of charts:"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{children:" - import { chartPoints } from '../VerticalBarChart/VerticalBarChart.test';\n - import { render, screen, queryAllByAttribute, fireEvent, act } from '@testing-library/react';\n"})}),"\n",(0,a.jsx)(n.p,{children:"However, the following results in correct rendering:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{children:"import { render, screen, queryAllByAttribute } from '@testing-library/react';\n\nimport { chartPoints } from './VerticalBarChart.test';\n"})}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsx)(n.p,{children:"Certain props need async await structure (waitFor\xa0in react testing library) for different props or nested SVGs to render."}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"Future improvements"})}),"\n",(0,a.jsx)(n.p,{children:"Following are the list of potential future improvements for the Sparkline chart:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"Add sub-components: Callouts can be added on hover over a point on Sparkline chart."}),"\n",(0,a.jsx)(n.li,{children:"Add support for multiple data series: Currently, the component only supports a single data series. It could be improved to allow for multiple series to be displayed on the same chart."}),"\n",(0,a.jsx)(n.li,{children:"Improve accessibility: The component could be improved to better support accessibility, such as by adding support for keyboard navigation and improving the use of ARIA attributes."}),"\n",(0,a.jsx)(n.li,{children:"Add support for custom styling: Currently, the component has a limited set of styles that can be customized. It could be improved to allow for more customization, such as by allowing users to specify custom CSS classes or inline styles."}),"\n",(0,a.jsx)(n.li,{children:"Improve performance: Depending on the size of the data set, the component could potentially have performance issues. It could be improved to better handle large data sets or to use more performant rendering techniques, such as canvas rendering."}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.strong,{children:"Design figma"}),"\nSparkline Chart Figma:\xa0",(0,a.jsx)(n.a,{href:"https://www.figma.com/file/WOoCs0CmNYZhYl9xXeCGpi/Data-viz-(Archive)?type=design&node-id=3583-83411&mode=design&t=q0qfn10YyA5UiKNb-0",children:"Link"}),"\xa0"]}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"Performance"})}),"\n",(0,a.jsx)(n.p,{children:"The performance aspect of a donut chart refers to how efficiently and effectively it conveys information to the viewer. Here are some key considerations regarding the performance of a line chart:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"Data Visualization Efficiency"}),"\n",(0,a.jsx)(n.li,{children:"Clarity and Simplicity"}),"\n",(0,a.jsx)(n.li,{children:"Responsiveness"}),"\n",(0,a.jsx)(n.li,{children:"Handling Large Datasets\n-Interactive Features"}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"References"})}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(n.ol,{children:["\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://github.com/d3/d3-shape/blob/main/README.md",children:"D3-shape"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://developer.microsoft.com/en-us/fluentui#/controls/web/sparklinechart",children:"Sparkline Chart"})}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/wiki/Theming",children:"Theming"}),"\xa0"]}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://github.com/microsoft/fluentui/wiki/How-to-apply-theme-to-Fluent-UI-React-components",children:"How to apply theme"})}),"\n"]})]})}function d(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(c,{...e})}):c(e)}},5458:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/Sparkline1-a8ff43c85309eba19385b762775ce8af.png"},9636:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/Sparkline2-3d71bcc13bdec5365ffc0802a3515f57.png"},1151:(e,n,t)=>{t.d(n,{Z:()=>o,a:()=>s});var a=t(7294);const i={},r=a.createContext(i);function s(e){const n=a.useContext(r);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),a.createElement(r.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/fdebbd26.6a0dca0e.js b/assets/js/fdebbd26.6a0dca0e.js
deleted file mode 100644
index d3fe527f5c..0000000000
--- a/assets/js/fdebbd26.6a0dca0e.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkdocsite=self.webpackChunkdocsite||[]).push([[8864],{7338:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>r,default:()=>u,frontMatter:()=>i,metadata:()=>c,toc:()=>l});var s=t(5893),o=t(1151);const i={},r=void 0,c={id:"Debugging",title:"Debugging",description:"The chart components can be debugged using few techniques.",source:"@site/../../docs/Debugging.md",sourceDirName:".",slug:"/Debugging",permalink:"/fluentui-charting-contrib/docs/Debugging",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Contributor guide: Stacked Bar Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/StackedBarChart"},next:{title:"Implementation Best Practices",permalink:"/fluentui-charting-contrib/docs/Implementation Best Practices"}},d={},l=[];function a(e){const n={code:"code",li:"li",ol:"ol",p:"p",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:"The chart components can be debugged using few techniques."}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Using browser developer tools."}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["Open developer tools (Pressing ",(0,s.jsx)(n.code,{children:"F12"}),")."]}),"\n",(0,s.jsxs)(n.li,{children:["Go to sources tab and open search bar (Pressing ",(0,s.jsx)(n.code,{children:"Ctrl + Shift + F"}),")."]}),"\n",(0,s.jsx)(n.li,{children:"Search for the component name and open the sources file from the search results."}),"\n",(0,s.jsx)(n.li,{children:"Apply breakpoints and run the scenario to see the breakpoints getting hit."}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Add console logs with the variables that you want to test. (Make sure to remove these logs while commiting your changes.)"}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Add a ",(0,s.jsx)(n.code,{children:"debugger"})," statement wherever you want to debug. Open dev tools and run the scenario. The execution will pause once the debugger statement is hit. (Make sure to remove these logs while commiting your changes.)"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Debugging using test cases"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["Open visual studio code from fluent ui root folder. (Not from ",(0,s.jsx)(n.code,{children:"packages\\react-charting"}),")"]}),"\n",(0,s.jsxs)(n.li,{children:["Check whether the ",(0,s.jsx)(n.code,{children:"Debug current open test"})," debug option is visible under the run and debug tab."]}),"\n",(0,s.jsxs)(n.li,{children:["Add breakpoints to the relevant test case and start debugging using ",(0,s.jsx)(n.code,{children:"Debug current open test"})," option.\nNote that this option renders the components under a headless browser. So some actual rendering dependent functions like ",(0,s.jsx)(n.code,{children:"getBoundingClientRect"})," will not work and will need to be mocked."]}),"\n"]}),"\n"]}),"\n"]})]})}function u(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>r});var s=t(7294);const o={},i=s.createContext(o);function r(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/fdebbd26.e19eb6a0.js b/assets/js/fdebbd26.e19eb6a0.js
new file mode 100644
index 0000000000..e700513ee7
--- /dev/null
+++ b/assets/js/fdebbd26.e19eb6a0.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkdocsite=self.webpackChunkdocsite||[]).push([[8864],{7338:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>u,frontMatter:()=>i,metadata:()=>c,toc:()=>d});var s=t(5893),o=t(1151);const i={},r=void 0,c={id:"Debugging",title:"Debugging",description:"The chart components can be debugged using few techniques.",source:"@site/../../docs/Debugging.md",sourceDirName:".",slug:"/Debugging",permalink:"/fluentui-charting-contrib/docs/Debugging",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Contributor guide: Vertical Stacked Bar Chart",permalink:"/fluentui-charting-contrib/docs/Charting-Concepts/VerticalStackedBarChart"},next:{title:"Implementation Best Practices",permalink:"/fluentui-charting-contrib/docs/Implementation Best Practices"}},l={},d=[];function a(e){const n={code:"code",li:"li",ol:"ol",p:"p",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:"The chart components can be debugged using few techniques."}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Using browser developer tools."}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["Open developer tools (Pressing ",(0,s.jsx)(n.code,{children:"F12"}),")."]}),"\n",(0,s.jsxs)(n.li,{children:["Go to sources tab and open search bar (Pressing ",(0,s.jsx)(n.code,{children:"Ctrl + Shift + F"}),")."]}),"\n",(0,s.jsx)(n.li,{children:"Search for the component name and open the sources file from the search results."}),"\n",(0,s.jsx)(n.li,{children:"Apply breakpoints and run the scenario to see the breakpoints getting hit."}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Add console logs with the variables that you want to test. (Make sure to remove these logs while commiting your changes.)"}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Add a ",(0,s.jsx)(n.code,{children:"debugger"})," statement wherever you want to debug. Open dev tools and run the scenario. The execution will pause once the debugger statement is hit. (Make sure to remove these logs while commiting your changes.)"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Debugging using test cases"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["Open visual studio code from fluent ui root folder. (Not from ",(0,s.jsx)(n.code,{children:"packages\\react-charting"}),")"]}),"\n",(0,s.jsxs)(n.li,{children:["Check whether the ",(0,s.jsx)(n.code,{children:"Debug current open test"})," debug option is visible under the run and debug tab."]}),"\n",(0,s.jsxs)(n.li,{children:["Add breakpoints to the relevant test case and start debugging using ",(0,s.jsx)(n.code,{children:"Debug current open test"})," option.\nNote that this option renders the components under a headless browser. So some actual rendering dependent functions like ",(0,s.jsx)(n.code,{children:"getBoundingClientRect"})," will not work and will need to be mocked."]}),"\n"]}),"\n"]}),"\n"]})]})}function u(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>r});var s=t(7294);const o={},i=s.createContext(o);function r(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/main.0aa75249.js b/assets/js/main.0aa75249.js
deleted file mode 100644
index 44d265c8fd..0000000000
--- a/assets/js/main.0aa75249.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! For license information please see main.0aa75249.js.LICENSE.txt */
-(self.webpackChunkdocsite=self.webpackChunkdocsite||[]).push([[179],{830:(e,t,n)=>{"use strict";n.d(t,{W:()=>a});var r=n(7294);function a(){return r.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},r.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}},723:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});n(7294);var r=n(8356),a=n.n(r),o=n(6887);const i={"100d50c4":[()=>n.e(5724).then(n.bind(n,9854)),"@site/../../docs/Start Developing.md",9854],"10c2b1cf":[()=>n.e(1914).then(n.bind(n,9423)),"@site/../../docs/colors.md",9423],17896441:[()=>Promise.all([n.e(532),n.e(7918)]).then(n.bind(n,9413)),"@theme/DocItem",9413],"1a4e3797":[()=>Promise.all([n.e(532),n.e(7920)]).then(n.bind(n,6675)),"@theme/SearchPage",6675],"1b37b4b0":[()=>n.e(1483).then(n.bind(n,1421)),"@site/../../docs/Testing Unpublished Library Version.md",1421],"1d29b0d8":[()=>n.e(3861).then(n.bind(n,6001)),"@site/../../docs/Charting-Concepts/SankeyChart.md",6001],"1df93b7f":[()=>Promise.all([n.e(532),n.e(3237)]).then(n.bind(n,6358)),"@site/src/pages/index.tsx",6358],25929091:[()=>n.e(1283).then(n.t.bind(n,5745,19)),"/home/runner/work/fluentui-charting-contrib/fluentui-charting-contrib/apps/docsite/.docusaurus/docusaurus-plugin-content-pages/default/plugin-route-context-module-100.json",5745],"2bd67647":[()=>n.e(9013).then(n.bind(n,1936)),"@site/../../docs/Test Plans/SankeyChart/ComponentTests.md",1936],"35f90ace":[()=>n.e(1888).then(n.bind(n,3823)),"@site/../../docs/Test Plans/LineChart/ComponentTests.md",3823],41748239:[()=>n.e(150).then(n.bind(n,323)),"@site/../../docs/Test Plans/VerticalStackedBarChart/ComponentTests.md",323],"43c91bec":[()=>n.e(2357).then(n.bind(n,5438)),"@site/../../docs/Test Plans/HorizontalBarChart/UnitTests.md",5438],"4c3c7f6c":[()=>n.e(9368).then(n.bind(n,7812)),"@site/../../docs/Charting-Concepts/HorizontalBarChart.md",7812],"5181bfc2":[()=>n.e(7659).then(n.bind(n,5417)),"@site/../../docs/Charting-Concepts/StackedBarChart.md",5417],"53fd9a32":[()=>n.e(4630).then(n.bind(n,5197)),"@site/../../docs/implementing-2-to-1-spacing.md",5197],"544aba92":[()=>n.e(774).then(n.bind(n,1264)),"@site/../../docs/Charting-Concepts/AreaChart.md",1264],"5e95c892":[()=>n.e(9661).then(n.bind(n,1892)),"@theme/DocsRoot",1892],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,6809)),"@generated/docusaurus.config",6809],"5fc975be":[()=>n.e(7706).then(n.t.bind(n,7085,19)),"/home/runner/work/fluentui-charting-contrib/fluentui-charting-contrib/apps/docsite/.docusaurus/docusaurus-theme-search-algolia/default/plugin-route-context-module-100.json",7085],"6158391e":[()=>n.e(1605).then(n.bind(n,430)),"@site/../../docs/Test Plans/HorizontalBarChart/ComponentTests.md",430],62692344:[()=>n.e(9330).then(n.bind(n,4520)),"@site/../../docs/Charting-Concepts/LineChart.md",4520],"6ede8325":[()=>n.e(2637).then(n.bind(n,6792)),"@site/../../docs/Test Plans/HeatMapChart/ComponentTests.md",6792],"6fe236e0":[()=>n.e(6942).then(n.bind(n,6166)),"@site/../../docs/Accessibility.md",6166],"712b8a2d":[()=>n.e(6863).then(n.bind(n,4227)),"@site/../../docs/Charting-Concepts/HeatMapChart.md",4227],"72f1352f":[()=>n.e(3072).then(n.bind(n,5618)),"@site/../../docs/Test Plans/MultiStackedBarChart/componentTests.md",5618],"785e1e6a":[()=>n.e(9159).then(n.bind(n,4242)),"@site/../../docs/Testing Strategy.md",4242],"78e65ac0":[()=>n.e(2907).then(n.bind(n,4199)),"@site/../../docs/Test Plans/GroupedVerticalBarChart/ComponentTests.md",4199],"790ff6d5":[()=>n.e(9860).then(n.bind(n,3854)),"@site/../../docs/Test Plans/DonutChart/ComponentTests.md",3854],"7ef89a43":[()=>n.e(8466).then(n.bind(n,4488)),"@site/../../docs/Technical Details.md",4488],80060540:[()=>n.e(1321).then(n.bind(n,9431)),"@site/../../docs/Charting-Concepts/GaugeChart.md",9431],"82e69e4a":[()=>n.e(4145).then(n.bind(n,5228)),"@site/../../docs/Test Plans/Utilities/UnitTests.md",5228],"8f2faa25":[()=>n.e(1125).then(n.bind(n,8625)),"@site/../../docs/Test Plans/VerticalBarChart/ComponentTests.md",8625],"918c9c28":[()=>n.e(3469).then(n.bind(n,7270)),"@site/../../docs/Detailed Implementation Steps.md",7270],"935f2afb":[()=>n.e(53).then(n.t.bind(n,1109,19)),"~docs/default/version-current-metadata-prop-751.json",1109],a4b720fd:[()=>n.e(9428).then(n.bind(n,8300)),"@site/../../docs/Implementation Best Practices.md",8300],a62d60fb:[()=>n.e(4798).then(n.bind(n,2485)),"@site/../../docs/Test Plans/HorizontalBarChartWithAxis/UnitTests.md",2485],a7bd4aaa:[()=>n.e(8518).then(n.bind(n,8564)),"@theme/DocVersionRoot",8564],a85ccfbf:[()=>n.e(2190).then(n.t.bind(n,3769,19)),"/home/runner/work/fluentui-charting-contrib/fluentui-charting-contrib/apps/docsite/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",3769],a94703ab:[()=>Promise.all([n.e(532),n.e(4368)]).then(n.bind(n,2674)),"@theme/DocRoot",2674],b0683616:[()=>n.e(5112).then(n.bind(n,6374)),"@site/../../docs/Test Plans/TestingGuide.md",6374],b0e8dd6d:[()=>n.e(8673).then(n.bind(n,6231)),"@site/../../docs/Contributor Guide.md",6231],c1fd7385:[()=>n.e(8171).then(n.bind(n,8964)),"@site/../../docs/creating-date-objects-for-chart-data.md",8964],c81dfe5f:[()=>n.e(2871).then(n.bind(n,3028)),"@site/../../docs/Test Plans/StackedBarChart/ComponentTests.md",3028],ddc35001:[()=>n.e(8968).then(n.bind(n,9313)),"@site/../../docs/Overview.md",9313],e8c0cc48:[()=>n.e(4014).then(n.bind(n,4162)),"@site/../../docs/Test Plans/HorizontalBarChartWithAxis/ComponentTests.md",4162],e9780fb0:[()=>n.e(1351).then(n.bind(n,9611)),"@site/../../docs/Test Plans/GaugeChart/ComponentTests.md",9611],ec9b348c:[()=>n.e(917).then(n.bind(n,8121)),"@site/../../docs/CHANGELOG.md",8121],fa9519d0:[()=>n.e(2408).then(n.bind(n,4286)),"@site/../../docs/Test Plans/AreaChart/ComponentTests.md",4286],fdebbd26:[()=>n.e(8864).then(n.bind(n,7338)),"@site/../../docs/Debugging.md",7338]};var l=n(5893);function s(e){let{error:t,retry:n,pastDelay:r}=e;return t?(0,l.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,l.jsx)("p",{children:String(t)}),(0,l.jsx)("div",{children:(0,l.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):r?(0,l.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,l.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,l.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,l.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,l.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,l.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,l.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,l.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,l.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n(9670),u=n(226);function d(e,t){if("*"===e)return a()({loading:s,loader:()=>n.e(1772).then(n.bind(n,1772)),modules:["@theme/NotFound"],webpack:()=>[1772],render(e,t){const n=e.default;return(0,l.jsx)(u.z,{value:{plugin:{name:"native",id:"default"}},children:(0,l.jsx)(n,{...t})})}});const r=o[`${e}-${t}`],d={},p=[],f=[],h=(0,c.Z)(r);return Object.entries(h).forEach((e=>{let[t,n]=e;const r=i[n];r&&(d[t]=r[0],p.push(r[1]),f.push(r[2]))})),a().Map({loading:s,loader:d,modules:p,webpack:()=>f,render(t,n){const a=JSON.parse(JSON.stringify(r));Object.entries(t).forEach((t=>{let[n,r]=t;const o=r.default;if(!o)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof o&&"function"!=typeof o||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{o[e]=r[e]}));let i=a;const l=n.split(".");l.slice(0,-1).forEach((e=>{i=i[e]})),i[l[l.length-1]]=o}));const o=a.__comp;delete a.__comp;const i=a.__context;return delete a.__context,(0,l.jsx)(u.z,{value:i,children:(0,l.jsx)(o,{...a,...n})})}})}const p=[{path:"/fluentui-charting-contrib/search",component:d("/fluentui-charting-contrib/search","d67"),exact:!0},{path:"/fluentui-charting-contrib/docs",component:d("/fluentui-charting-contrib/docs","94c"),routes:[{path:"/fluentui-charting-contrib/docs",component:d("/fluentui-charting-contrib/docs","509"),routes:[{path:"/fluentui-charting-contrib/docs",component:d("/fluentui-charting-contrib/docs","e25"),routes:[{path:"/fluentui-charting-contrib/docs/Accessibility",component:d("/fluentui-charting-contrib/docs/Accessibility","9b7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/CHANGELOG",component:d("/fluentui-charting-contrib/docs/CHANGELOG","84b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/AreaChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/AreaChart","440"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/GaugeChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/GaugeChart","7e8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/HeatMapChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/HeatMapChart","23a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/HorizontalBarChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/HorizontalBarChart","a8f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/LineChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/LineChart","df4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/SankeyChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/SankeyChart","3ab"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/StackedBarChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/StackedBarChart","530"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/colors",component:d("/fluentui-charting-contrib/docs/colors","ef0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Contributor Guide",component:d("/fluentui-charting-contrib/docs/Contributor Guide","387"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/creating-date-objects-for-chart-data",component:d("/fluentui-charting-contrib/docs/creating-date-objects-for-chart-data","d31"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Debugging",component:d("/fluentui-charting-contrib/docs/Debugging","a60"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Detailed Implementation Steps",component:d("/fluentui-charting-contrib/docs/Detailed Implementation Steps","7b4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Implementation Best Practices",component:d("/fluentui-charting-contrib/docs/Implementation Best Practices","bf6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/implementing-2-to-1-spacing",component:d("/fluentui-charting-contrib/docs/implementing-2-to-1-spacing","3a6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Overview",component:d("/fluentui-charting-contrib/docs/Overview","7e4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Start Developing",component:d("/fluentui-charting-contrib/docs/Start Developing","764"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Technical Details",component:d("/fluentui-charting-contrib/docs/Technical Details","111"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/AreaChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/AreaChart/ComponentTests","490"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/DonutChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/DonutChart/ComponentTests","371"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/GaugeChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/GaugeChart/ComponentTests","d89"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/GroupedVerticalBarChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/GroupedVerticalBarChart/ComponentTests","201"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/HeatMapChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/HeatMapChart/ComponentTests","926"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChart/ComponentTests","048"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChart/UnitTests",component:d("/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChart/UnitTests","8d7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChartWithAxis/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChartWithAxis/ComponentTests","41f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChartWithAxis/UnitTests",component:d("/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChartWithAxis/UnitTests","8d9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/LineChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/LineChart/ComponentTests","c6a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/MultiStackedBarChart/componentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/MultiStackedBarChart/componentTests","4c6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/SankeyChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/SankeyChart/ComponentTests","fff"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/StackedBarChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/StackedBarChart/ComponentTests","c60"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/TestingGuide",component:d("/fluentui-charting-contrib/docs/Test Plans/TestingGuide","348"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/Utilities/UnitTests",component:d("/fluentui-charting-contrib/docs/Test Plans/Utilities/UnitTests","bfd"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/VerticalBarChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/VerticalBarChart/ComponentTests","a74"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/VerticalStackedBarChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/VerticalStackedBarChart/ComponentTests","25a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Testing Strategy",component:d("/fluentui-charting-contrib/docs/Testing Strategy","37b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Testing Unpublished Library Version",component:d("/fluentui-charting-contrib/docs/Testing Unpublished Library Version","b2f"),exact:!0,sidebar:"tutorialSidebar"}]}]}]},{path:"/fluentui-charting-contrib/",component:d("/fluentui-charting-contrib/","c50"),exact:!0},{path:"*",component:d("*")}]},8934:(e,t,n)=>{"use strict";n.d(t,{_:()=>o,t:()=>i});var r=n(7294),a=n(5893);const o=r.createContext(!1);function i(e){let{children:t}=e;const[n,i]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{i(!0)}),[]),(0,a.jsx)(o.Provider,{value:n,children:t})}},7221:(e,t,n)=>{"use strict";var r=n(7294),a=n(745),o=n(3727),i=n(405),l=n(412);const s=[n(2497),n(3310),n(8320),n(2295)];var c=n(723),u=n(6550),d=n(8790),p=n(5893);function f(e){let{children:t}=e;return(0,p.jsx)(p.Fragment,{children:t})}var h=n(5742),m=n(2263),g=n(4996),b=n(6668),y=n(833),v=n(4711),w=n(9727),k=n(3320),x=n(8780),S=n(197);function C(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,m.Z)(),r=(0,v.l)(),a=n[e].htmlLang,o=e=>e.replace("-","_");return(0,p.jsxs)(h.Z,{children:[Object.entries(n).map((e=>{let[t,{htmlLang:n}]=e;return(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:n},t)})),(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,p.jsx)("meta",{property:"og:locale",content:o(a)}),Object.values(n).filter((e=>a!==e.htmlLang)).map((e=>(0,p.jsx)("meta",{property:"og:locale:alternate",content:o(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function T(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,m.Z)(),r=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,m.Z)(),{pathname:r}=(0,u.TH)();return e+(0,x.applyTrailingSlash)((0,g.Z)(r),{trailingSlash:n,baseUrl:t})}(),a=t?`${n}${t}`:r;return(0,p.jsxs)(h.Z,{children:[(0,p.jsx)("meta",{property:"og:url",content:a}),(0,p.jsx)("link",{rel:"canonical",href:a})]})}function E(){const{i18n:{currentLocale:e}}=(0,m.Z)(),{metadata:t,image:n}=(0,b.L)();return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(h.Z,{children:[(0,p.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,p.jsx)("body",{className:w.h})]}),n&&(0,p.jsx)(y.d,{image:n}),(0,p.jsx)(T,{}),(0,p.jsx)(C,{}),(0,p.jsx)(S.Z,{tag:k.HX,locale:e}),(0,p.jsx)(h.Z,{children:t.map(((e,t)=>(0,p.jsx)("meta",{...e},t)))})]})}const _=new Map;function A(e){if(_.has(e.pathname))return{...e,pathname:_.get(e.pathname)};if((0,d.f)(c.Z,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return _.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return _.set(e.pathname,t),{...e,pathname:t}}var P=n(8934),L=n(8940),j=n(469);function R(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r{const r=t.default?.[e]??t[e];return r?.(...n)}));return()=>a.forEach((e=>e?.()))}const N=function(e){let{children:t,location:n,previousLocation:r}=e;return(0,j.Z)((()=>{r!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const r=t.pathname===n.pathname,a=t.hash===n.hash,o=t.search===n.search;if(r&&a&&!o)return;const{hash:i}=t;if(i){const e=decodeURIComponent(i.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:r}),R("onRouteDidUpdate",{previousLocation:r,location:n}))}),[r,n]),t};function O(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,d.f)(c.Z,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class D extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=l.Z.canUseDOM?R("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=R("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),O(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,p.jsx)(N,{previousLocation:this.previousLocation,location:t,children:(0,p.jsx)(u.AW,{location:t,render:()=>e})})}}const I=D,M="__docusaurus-base-url-issue-banner-container",F="__docusaurus-base-url-issue-banner",B="__docusaurus-base-url-issue-banner-suggestion-container";function z(e){return`\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n var shouldInsert = typeof window['docusaurus'] === 'undefined';\n shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n var bannerContainer = document.createElement('div');\n bannerContainer.id = '${M}';\n var bannerHtml = ${JSON.stringify(function(e){return`\n\n
Your Docusaurus site did not load properly.
\n
A very common reason is a wrong site baseUrl configuration .
\n
Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}
\n
We suggest trying baseUrl =
\n
children",t),new Error("The Docusaurus component only accept simple string values");const i=l({message:t,id:n});return(0,a.jsx)(a.Fragment,{children:o(i,r)})}},9935:(e,t,n)=>{"use strict";n.d(t,{m:()=>r});const r="default"},3919:(e,t,n)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function a(e){return void 0!==e&&!r(e)}n.d(t,{Z:()=>a,b:()=>r})},4996:(e,t,n)=>{"use strict";n.d(t,{C:()=>i,Z:()=>l});var r=n(7294),a=n(2263),o=n(3919);function i(){const{siteConfig:{baseUrl:e,url:t}}=(0,a.Z)(),n=(0,r.useCallback)(((n,r)=>function(e,t,n,r){let{forcePrependBaseUrl:a=!1,absolute:i=!1}=void 0===r?{}:r;if(!n||n.startsWith("#")||(0,o.b)(n))return n;if(a)return t+n.replace(/^\//,"");if(n===t.replace(/\/$/,""))return t;const l=n.startsWith(t)?n:t+n.replace(/^\//,"");return i?e+l:l}(t,e,n,r)),[t,e]);return{withBaseUrl:n}}function l(e,t){void 0===t&&(t={});const{withBaseUrl:n}=i();return n(e,t)}},8138:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});var r=n(7294);n(5893);const a=r.createContext({collectAnchor:()=>{},collectLink:()=>{}}),o=()=>(0,r.useContext)(a);function i(){return o()}},2263:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(8940);function o(){return(0,r.useContext)(a._)}},2389:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(8934);function o(){return(0,r.useContext)(a._)}},469:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});var r=n(7294);const a=n(412).Z.canUseDOM?r.useLayoutEffect:r.useEffect},9670:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});const r=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function a(e){const t={};return function e(n,a){Object.entries(n).forEach((n=>{let[o,i]=n;const l=a?`${a}.${o}`:o;r(i)?e(i,l):t[l]=i}))}(e),t}},226:(e,t,n)=>{"use strict";n.d(t,{_:()=>o,z:()=>i});var r=n(7294),a=n(5893);const o=r.createContext(null);function i(e){let{children:t,value:n}=e;const i=r.useContext(o),l=(0,r.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const r={...t.data,...n?.data};return{plugin:t.plugin,data:r}}({parent:i,value:n})),[i,n]);return(0,a.jsx)(o.Provider,{value:l,children:t})}},143:(e,t,n)=>{"use strict";n.d(t,{Iw:()=>b,gA:()=>f,WS:()=>h,_r:()=>d,Jo:()=>y,zh:()=>p,yW:()=>g,gB:()=>m});var r=n(6550),a=n(2263),o=n(9935);function i(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,a.Z)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}const l=e=>e.versions.find((e=>e.isLast));function s(e,t){const n=l(e);return[...e.versions.filter((e=>e!==n)),n].find((e=>!!(0,r.LX)(t,{path:e.path,exact:!1,strict:!1})))}function c(e,t){const n=s(e,t),a=n?.docs.find((e=>!!(0,r.LX)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:a,alternateDocVersions:a?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===t&&(n[e.name]=r)}))})),n}(a.id):{}}}const u={},d=()=>i("docusaurus-plugin-content-docs")??u,p=e=>function(e,t,n){void 0===t&&(t=o.m),void 0===n&&(n={});const r=i(e),a=r?.[t];if(!a&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return a}("docusaurus-plugin-content-docs",e,{failfast:!0});function f(e){void 0===e&&(e={});const t=d(),{pathname:n}=(0,r.TH)();return function(e,t,n){void 0===n&&(n={});const a=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,r.LX)(t,{path:n.path,exact:!1,strict:!1})})),o=a?{pluginId:a[0],pluginData:a[1]}:void 0;if(!o&&n.failfast)throw new Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map((e=>e.path)).join(", ")}`);return o}(t,n,e)}function h(e){void 0===e&&(e={});const t=f(e),{pathname:n}=(0,r.TH)();if(!t)return;return{activePlugin:t,activeVersion:s(t.pluginData,n)}}function m(e){return p(e).versions}function g(e){const t=p(e);return l(t)}function b(e){const t=p(e),{pathname:n}=(0,r.TH)();return c(t,n)}function y(e){const t=p(e),{pathname:n}=(0,r.TH)();return function(e,t){const n=l(e);return{latestDocSuggestion:c(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},8320:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>o});var r=n(4865),a=n.n(r);a().configure({showSpinner:!1});const o={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{a().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){a().done()}}},3310:(e,t,n)=>{"use strict";n.r(t);var r=n(2573),a=n(6809);!function(e){const{themeConfig:{prism:t}}=a.default,{additionalLanguages:r}=t;globalThis.Prism=e,r.forEach((e=>{"php"===e&&n(6854),n(6726)(`./prism-${e}`)})),delete globalThis.Prism}(r.p1)},2503:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});n(7294);var r=n(512),a=n(5999),o=n(6668),i=n(3692),l=n(8138);const s={anchorWithStickyNavbar:"anchorWithStickyNavbar_LWe7",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_WYt5"};var c=n(5893);function u(e){let{as:t,id:n,...u}=e;const d=(0,l.Z)(),{navbar:{hideOnScroll:p}}=(0,o.L)();if("h1"===t||!n)return(0,c.jsx)(t,{...u,id:void 0});d.collectAnchor(n);const f=(0,a.I)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof u.children?u.children:n});return(0,c.jsxs)(t,{...u,className:(0,r.Z)("anchor",p?s.anchorWithHideOnScrollNavbar:s.anchorWithStickyNavbar,u.className),id:n,children:[u.children,(0,c.jsx)(i.Z,{className:"hash-link",to:`#${n}`,"aria-label":f,title:f,children:"\u200b"})]})}},9471:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});n(7294);const r={iconExternalLink:"iconExternalLink_nPIU"};var a=n(5893);function o(e){let{width:t=13.5,height:n=13.5}=e;return(0,a.jsx)("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:r.iconExternalLink,children:(0,a.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})}},7372:(e,t,n)=>{"use strict";n.d(t,{Z:()=>Rt});var r=n(7294),a=n(512),o=n(4763),i=n(833),l=n(6550),s=n(5999),c=n(5936),u=n(5893);const d="__docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){const e=(0,r.useRef)(null),{action:t}=(0,l.k6)(),n=(0,r.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&p(t)}),[]);return(0,c.S)((n=>{let{location:r}=n;e.current&&!r.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const h=(0,s.I)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function m(e){const t=e.children??h,{containerRef:n,onClick:r}=f();return(0,u.jsx)("div",{ref:n,role:"region","aria-label":h,children:(0,u.jsx)("a",{...e,href:`#${d}`,onClick:r,children:t})})}var g=n(5281),b=n(9727);const y={skipToContent:"skipToContent_fXgn"};function v(){return(0,u.jsx)(m,{className:y.skipToContent})}var w=n(6668),k=n(9689);function x(e){let{width:t=21,height:n=21,color:r="currentColor",strokeWidth:a=1.2,className:o,...i}=e;return(0,u.jsx)("svg",{viewBox:"0 0 15 15",width:t,height:n,...i,children:(0,u.jsx)("g",{stroke:r,strokeWidth:a,children:(0,u.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const S={closeButton:"closeButton_CVFx"};function C(e){return(0,u.jsx)("button",{type:"button","aria-label":(0,s.I)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,a.Z)("clean-btn close",S.closeButton,e.className),children:(0,u.jsx)(x,{width:14,height:14,strokeWidth:3.1})})}const T={content:"content_knG7"};function E(e){const{announcementBar:t}=(0,w.L)(),{content:n}=t;return(0,u.jsx)("div",{...e,className:(0,a.Z)(T.content,e.className),dangerouslySetInnerHTML:{__html:n}})}const _={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function A(){const{announcementBar:e}=(0,w.L)(),{isActive:t,close:n}=(0,k.nT)();if(!t)return null;const{backgroundColor:r,textColor:a,isCloseable:o}=e;return(0,u.jsxs)("div",{className:_.announcementBar,style:{backgroundColor:r,color:a},role:"banner",children:[o&&(0,u.jsx)("div",{className:_.announcementBarPlaceholder}),(0,u.jsx)(E,{className:_.announcementBarContent}),o&&(0,u.jsx)(C,{onClick:n,className:_.announcementBarClose})]})}var P=n(3163),L=n(2466);var j=n(902),R=n(3102);const N=r.createContext(null);function O(e){let{children:t}=e;const n=function(){const e=(0,P.e)(),t=(0,R.HY)(),[n,a]=(0,r.useState)(!1),o=null!==t.component,i=(0,j.D9)(o);return(0,r.useEffect)((()=>{o&&!i&&a(!0)}),[o,i]),(0,r.useEffect)((()=>{o?e.shown||a(!0):a(!1)}),[e.shown,o]),(0,r.useMemo)((()=>[n,a]),[n])}();return(0,u.jsx)(N.Provider,{value:n,children:t})}function D(e){if(e.component){const t=e.component;return(0,u.jsx)(t,{...e.props})}}function I(){const e=(0,r.useContext)(N);if(!e)throw new j.i6("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,a=(0,r.useCallback)((()=>n(!1)),[n]),o=(0,R.HY)();return(0,r.useMemo)((()=>({shown:t,hide:a,content:D(o)})),[a,o,t])}function M(e){let{header:t,primaryMenu:n,secondaryMenu:r}=e;const{shown:o}=I();return(0,u.jsxs)("div",{className:"navbar-sidebar",children:[t,(0,u.jsxs)("div",{className:(0,a.Z)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":o}),children:[(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:n}),(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:r})]})]})}var F=n(2949),B=n(2389);function z(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"})})}function U(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"})})}const $={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function H(e){let{className:t,buttonClassName:n,value:r,onChange:o}=e;const i=(0,B.Z)(),l=(0,s.I)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===r?(0,s.I)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,s.I)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,u.jsx)("div",{className:(0,a.Z)($.toggle,t),children:(0,u.jsxs)("button",{className:(0,a.Z)("clean-btn",$.toggleButton,!i&&$.toggleButtonDisabled,n),type:"button",onClick:()=>o("dark"===r?"light":"dark"),disabled:!i,title:l,"aria-label":l,"aria-live":"polite",children:[(0,u.jsx)(z,{className:(0,a.Z)($.toggleIcon,$.lightToggleIcon)}),(0,u.jsx)(U,{className:(0,a.Z)($.toggleIcon,$.darkToggleIcon)})]})})}const q=r.memo(H),Z={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_X3D1"};function G(e){let{className:t}=e;const n=(0,w.L)().navbar.style,r=(0,w.L)().colorMode.disableSwitch,{colorMode:a,setColorMode:o}=(0,F.I)();return r?null:(0,u.jsx)(q,{className:t,buttonClassName:"dark"===n?Z.darkNavbarColorModeToggle:void 0,value:a,onChange:o})}var V=n(1327);function W(){return(0,u.jsx)(V.Z,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function K(){const e=(0,P.e)();return(0,u.jsx)("button",{type:"button","aria-label":(0,s.I)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle(),children:(0,u.jsx)(x,{color:"var(--ifm-color-emphasis-600)"})})}function Q(){return(0,u.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,u.jsx)(W,{}),(0,u.jsx)(G,{className:"margin-right--md"}),(0,u.jsx)(K,{})]})}var Y=n(3692),X=n(4996),J=n(3919),ee=n(8022),te=n(9471);function ne(e){let{activeBasePath:t,activeBaseRegex:n,to:r,href:a,label:o,html:i,isDropdownLink:l,prependBaseUrlToHref:s,...c}=e;const d=(0,X.Z)(r),p=(0,X.Z)(t),f=(0,X.Z)(a,{forcePrependBaseUrl:!0}),h=o&&a&&!(0,J.Z)(a),m=i?{dangerouslySetInnerHTML:{__html:i}}:{children:(0,u.jsxs)(u.Fragment,{children:[o,h&&(0,u.jsx)(te.Z,{...l&&{width:12,height:12}})]})};return a?(0,u.jsx)(Y.Z,{href:s?f:a,...c,...m}):(0,u.jsx)(Y.Z,{to:d,isNavLink:!0,...(t||n)&&{isActive:(e,t)=>n?(0,ee.F)(n,t.pathname):t.pathname.startsWith(p)},...c,...m})}function re(e){let{className:t,isDropdownItem:n=!1,...r}=e;const o=(0,u.jsx)(ne,{className:(0,a.Z)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n,...r});return n?(0,u.jsx)("li",{children:o}):o}function ae(e){let{className:t,isDropdownItem:n,...r}=e;return(0,u.jsx)("li",{className:"menu__list-item",children:(0,u.jsx)(ne,{className:(0,a.Z)("menu__link",t),...r})})}function oe(e){let{mobile:t=!1,position:n,...r}=e;const a=t?ae:re;return(0,u.jsx)(a,{...r,activeClassName:r.activeClassName??(t?"menu__link--active":"navbar__link--active")})}var ie=n(6043),le=n(8596),se=n(2263);const ce={dropdownNavbarItemMobile:"dropdownNavbarItemMobile_S0Fm"};function ue(e,t){return e.some((e=>function(e,t){return!!(0,le.Mg)(e.to,t)||!!(0,ee.F)(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function de(e){let{items:t,position:n,className:o,onClick:i,...l}=e;const s=(0,r.useRef)(null),[c,d]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{const e=e=>{s.current&&!s.current.contains(e.target)&&d(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[s]),(0,u.jsxs)("div",{ref:s,className:(0,a.Z)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===n,"dropdown--show":c}),children:[(0,u.jsx)(ne,{"aria-haspopup":"true","aria-expanded":c,role:"button",href:l.to?void 0:"#",className:(0,a.Z)("navbar__link",o),...l,onClick:l.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!c))},children:l.children??l.label}),(0,u.jsx)("ul",{className:"dropdown__menu",children:t.map(((e,t)=>(0,r.createElement)(qe,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:t})))})]})}function pe(e){let{items:t,className:n,position:o,onClick:i,...s}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,se.Z)(),{pathname:t}=(0,l.TH)();return t.replace(e,"/")}(),d=ue(t,c),{collapsed:p,toggleCollapsed:f,setCollapsed:h}=(0,ie.u)({initialState:()=>!d});return(0,r.useEffect)((()=>{d&&h(!d)}),[c,d,h]),(0,u.jsxs)("li",{className:(0,a.Z)("menu__list-item",{"menu__list-item--collapsed":p}),children:[(0,u.jsx)(ne,{role:"button",className:(0,a.Z)(ce.dropdownNavbarItemMobile,"menu__link menu__link--sublist menu__link--sublist-caret",n),...s,onClick:e=>{e.preventDefault(),f()},children:s.children??s.label}),(0,u.jsx)(ie.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:p,children:t.map(((e,t)=>(0,r.createElement)(qe,{mobile:!0,isDropdownItem:!0,onClick:i,activeClassName:"menu__link--active",...e,key:t})))})]})}function fe(e){let{mobile:t=!1,...n}=e;const r=t?pe:de;return(0,u.jsx)(r,{...n})}var he=n(4711);function me(e){let{width:t=20,height:n=20,...r}=e;return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0,...r,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"})})}const ge="iconLanguage_nlXk";var be=n(3935);function ye(){return r.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},r.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}var ve=n(830),we=["translations"];function ke(){return ke=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var Te="Ctrl";var Ee=r.forwardRef((function(e,t){var n=e.translations,a=void 0===n?{}:n,o=Ce(e,we),i=a.buttonText,l=void 0===i?"Search":i,s=a.buttonAriaLabel,c=void 0===s?"Search":s,u=xe((0,r.useState)(null),2),d=u[0],p=u[1];return(0,r.useEffect)((function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?p("\u2318"):p(Te))}),[]),r.createElement("button",ke({type:"button",className:"DocSearch DocSearch-Button","aria-label":c},o,{ref:t}),r.createElement("span",{className:"DocSearch-Button-Container"},r.createElement(ve.W,null),r.createElement("span",{className:"DocSearch-Button-Placeholder"},l)),r.createElement("span",{className:"DocSearch-Button-Keys"},null!==d&&r.createElement(r.Fragment,null,r.createElement("kbd",{className:"DocSearch-Button-Key"},d===Te?r.createElement(ye,null):d),r.createElement("kbd",{className:"DocSearch-Button-Key"},"K"))))})),_e=n(5742),Ae=n(6177),Pe=n(239),Le=n(3320);const je={button:{buttonText:(0,s.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),buttonAriaLabel:(0,s.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"})},modal:{searchBox:{resetButtonTitle:(0,s.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),resetButtonAriaLabel:(0,s.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),cancelButtonText:(0,s.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"}),cancelButtonAriaLabel:(0,s.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"})},startScreen:{recentSearchesTitle:(0,s.I)({id:"theme.SearchModal.startScreen.recentSearchesTitle",message:"Recent",description:"The title for recent searches"}),noRecentSearchesText:(0,s.I)({id:"theme.SearchModal.startScreen.noRecentSearchesText",message:"No recent searches",description:"The text when no recent searches"}),saveRecentSearchButtonTitle:(0,s.I)({id:"theme.SearchModal.startScreen.saveRecentSearchButtonTitle",message:"Save this search",description:"The label for save recent search button"}),removeRecentSearchButtonTitle:(0,s.I)({id:"theme.SearchModal.startScreen.removeRecentSearchButtonTitle",message:"Remove this search from history",description:"The label for remove recent search button"}),favoriteSearchesTitle:(0,s.I)({id:"theme.SearchModal.startScreen.favoriteSearchesTitle",message:"Favorite",description:"The title for favorite searches"}),removeFavoriteSearchButtonTitle:(0,s.I)({id:"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle",message:"Remove this search from favorites",description:"The label for remove favorite search button"})},errorScreen:{titleText:(0,s.I)({id:"theme.SearchModal.errorScreen.titleText",message:"Unable to fetch results",description:"The title for error screen of search modal"}),helpText:(0,s.I)({id:"theme.SearchModal.errorScreen.helpText",message:"You might want to check your network connection.",description:"The help text for error screen of search modal"})},footer:{selectText:(0,s.I)({id:"theme.SearchModal.footer.selectText",message:"to select",description:"The explanatory text of the action for the enter key"}),selectKeyAriaLabel:(0,s.I)({id:"theme.SearchModal.footer.selectKeyAriaLabel",message:"Enter key",description:"The ARIA label for the Enter key button that makes the selection"}),navigateText:(0,s.I)({id:"theme.SearchModal.footer.navigateText",message:"to navigate",description:"The explanatory text of the action for the Arrow up and Arrow down key"}),navigateUpKeyAriaLabel:(0,s.I)({id:"theme.SearchModal.footer.navigateUpKeyAriaLabel",message:"Arrow up",description:"The ARIA label for the Arrow up key button that makes the navigation"}),navigateDownKeyAriaLabel:(0,s.I)({id:"theme.SearchModal.footer.navigateDownKeyAriaLabel",message:"Arrow down",description:"The ARIA label for the Arrow down key button that makes the navigation"}),closeText:(0,s.I)({id:"theme.SearchModal.footer.closeText",message:"to close",description:"The explanatory text of the action for Escape key"}),closeKeyAriaLabel:(0,s.I)({id:"theme.SearchModal.footer.closeKeyAriaLabel",message:"Escape key",description:"The ARIA label for the Escape key button that close the modal"}),searchByText:(0,s.I)({id:"theme.SearchModal.footer.searchByText",message:"Search by",description:"The text explain that the search is making by Algolia"})},noResultsScreen:{noResultsText:(0,s.I)({id:"theme.SearchModal.noResultsScreen.noResultsText",message:"No results for",description:"The text explains that there are no results for the following search"}),suggestedQueryText:(0,s.I)({id:"theme.SearchModal.noResultsScreen.suggestedQueryText",message:"Try searching for",description:"The text for the suggested query when no results are found for the following search"}),reportMissingResultsText:(0,s.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsText",message:"Believe this query should return results?",description:"The text for the question where the user thinks there are missing results"}),reportMissingResultsLinkText:(0,s.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText",message:"Let us know.",description:"The text for the link to report missing results"})}},placeholder:(0,s.I)({id:"theme.SearchModal.placeholder",message:"Search docs",description:"The placeholder of the input of the DocSearch pop-up modal"})};let Re=null;function Ne(e){let{hit:t,children:n}=e;return(0,u.jsx)(Y.Z,{to:t.url,children:n})}function Oe(e){let{state:t,onClose:n}=e;const r=(0,Ae.M)();return(0,u.jsx)(Y.Z,{to:r(t.query),onClick:n,children:(0,u.jsx)(s.Z,{id:"theme.SearchBar.seeAll",values:{count:t.context.nbHits},children:"See all {count} results"})})}function De(e){let{contextualSearch:t,externalUrlRegex:a,...o}=e;const{siteMetadata:i}=(0,se.Z)(),s=(0,Pe.l)(),c=function(){const{locale:e,tags:t}=(0,Le._q)();return[`language:${e}`,t.map((e=>`docusaurus_tag:${e}`))]}(),d=o.searchParameters?.facetFilters??[],p=t?function(e,t){const n=e=>"string"==typeof e?[e]:e;return[...n(e),...n(t)]}(c,d):d,f={...o.searchParameters,facetFilters:p},h=(0,l.k6)(),m=(0,r.useRef)(null),g=(0,r.useRef)(null),[b,y]=(0,r.useState)(!1),[v,w]=(0,r.useState)(void 0),k=(0,r.useCallback)((()=>Re?Promise.resolve():Promise.all([n.e(1426).then(n.bind(n,1426)),Promise.all([n.e(532),n.e(6945)]).then(n.bind(n,6945)),Promise.all([n.e(532),n.e(8894)]).then(n.bind(n,8894))]).then((e=>{let[{DocSearchModal:t}]=e;Re=t}))),[]),x=(0,r.useCallback)((()=>{k().then((()=>{m.current=document.createElement("div"),document.body.insertBefore(m.current,document.body.firstChild),y(!0)}))}),[k,y]),S=(0,r.useCallback)((()=>{y(!1),m.current?.remove()}),[y]),C=(0,r.useCallback)((e=>{k().then((()=>{y(!0),w(e.key)}))}),[k,y,w]),T=(0,r.useRef)({navigate(e){let{itemUrl:t}=e;(0,ee.F)(a,t)?window.location.href=t:h.push(t)}}).current,E=(0,r.useRef)((e=>o.transformItems?o.transformItems(e):e.map((e=>({...e,url:s(e.url)}))))).current,_=(0,r.useMemo)((()=>e=>(0,u.jsx)(Oe,{...e,onClose:S})),[S]),A=(0,r.useCallback)((e=>(e.addAlgoliaAgent("docusaurus",i.docusaurusVersion),e)),[i.docusaurusVersion]);return function(e){var t=e.isOpen,n=e.onOpen,a=e.onClose,o=e.onInput,i=e.searchButtonRef;r.useEffect((function(){function e(e){var r;(27===e.keyCode&&t||"k"===(null===(r=e.key)||void 0===r?void 0:r.toLowerCase())&&(e.metaKey||e.ctrlKey)||!function(e){var t=e.target,n=t.tagName;return t.isContentEditable||"INPUT"===n||"SELECT"===n||"TEXTAREA"===n}(e)&&"/"===e.key&&!t)&&(e.preventDefault(),t?a():document.body.classList.contains("DocSearch--active")||document.body.classList.contains("DocSearch--active")||n()),i&&i.current===document.activeElement&&o&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&o(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[t,n,a,o,i])}({isOpen:b,onOpen:x,onClose:S,onInput:C,searchButtonRef:g}),(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(_e.Z,{children:(0,u.jsx)("link",{rel:"preconnect",href:`https://${o.appId}-dsn.algolia.net`,crossOrigin:"anonymous"})}),(0,u.jsx)(Ee,{onTouchStart:k,onFocus:k,onMouseOver:k,onClick:x,ref:g,translations:je.button}),b&&Re&&m.current&&(0,be.createPortal)((0,u.jsx)(Re,{onClose:S,initialScrollY:window.scrollY,initialQuery:v,navigator:T,transformItems:E,hitComponent:Ne,transformSearchClient:A,...o.searchPagePath&&{resultsFooterComponent:_},...o,searchParameters:f,placeholder:je.placeholder,translations:je.modal}),m.current)]})}function Ie(){const{siteConfig:e}=(0,se.Z)();return(0,u.jsx)(De,{...e.themeConfig.algolia})}const Me={navbarSearchContainer:"navbarSearchContainer_Bca1"};function Fe(e){let{children:t,className:n}=e;return(0,u.jsx)("div",{className:(0,a.Z)(n,Me.navbarSearchContainer),children:t})}var Be=n(143),ze=n(2802);var Ue=n(373);const $e=e=>e.docs.find((t=>t.id===e.mainDocId));const He={default:oe,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:r,queryString:a="",...o}=e;const{i18n:{currentLocale:i,locales:c,localeConfigs:d}}=(0,se.Z)(),p=(0,he.l)(),{search:f,hash:h}=(0,l.TH)(),m=[...n,...c.map((e=>{const n=`${`pathname://${p.createUrl({locale:e,fullyQualified:!1})}`}${f}${h}${a}`;return{label:d[e].label,lang:d[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===i?t?"menu__link--active":"dropdown__link--active":""}})),...r],g=t?(0,s.I)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[i].label;return(0,u.jsx)(fe,{...o,mobile:t,label:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(me,{className:ge}),g]}),items:m})},search:function(e){let{mobile:t,className:n}=e;return t?null:(0,u.jsx)(Fe,{className:n,children:(0,u.jsx)(Ie,{})})},dropdown:fe,html:function(e){let{value:t,className:n,mobile:r=!1,isDropdownItem:o=!1}=e;const i=o?"li":"div";return(0,u.jsx)(i,{className:(0,a.Z)({navbar__item:!r&&!o,"menu__list-item":r},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:r,...a}=e;const{activeDoc:o}=(0,Be.Iw)(r),i=(0,ze.vY)(t,r),l=o?.path===i?.path;return null===i||i.unlisted&&!l?null:(0,u.jsx)(oe,{exact:!0,...a,isActive:()=>l||!!o?.sidebar&&o.sidebar===i.sidebar,label:n??i.id,to:i.path})},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:r,...a}=e;const{activeDoc:o}=(0,Be.Iw)(r),i=(0,ze.oz)(t,r).link;if(!i)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return(0,u.jsx)(oe,{exact:!0,...a,isActive:()=>o?.sidebar===t,label:n??i.label,to:i.path})},docsVersion:function(e){let{label:t,to:n,docsPluginId:r,...a}=e;const o=(0,ze.lO)(r)[0],i=t??o.label,l=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(o).path;return(0,u.jsx)(oe,{...a,label:i,to:l})},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:r,dropdownItemsBefore:a,dropdownItemsAfter:o,...i}=e;const{search:c,hash:d}=(0,l.TH)(),p=(0,Be.Iw)(n),f=(0,Be.gB)(n),{savePreferredVersionName:h}=(0,Ue.J)(n),m=[...a,...f.map((e=>{const t=p.alternateDocVersions[e.name]??$e(e);return{label:e.label,to:`${t.path}${c}${d}`,isActive:()=>e===p.activeVersion,onClick:()=>h(e.name)}})),...o],g=(0,ze.lO)(n)[0],b=t&&m.length>1?(0,s.I)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):g.label,y=t&&m.length>1?void 0:$e(g).path;return m.length<=1?(0,u.jsx)(oe,{...i,mobile:t,label:b,to:y,isActive:r?()=>!1:void 0}):(0,u.jsx)(fe,{...i,mobile:t,label:b,to:y,items:m,isActive:r?()=>!1:void 0})}};function qe(e){let{type:t,...n}=e;const r=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),a=He[r];if(!a)throw new Error(`No NavbarItem component found for type "${t}".`);return(0,u.jsx)(a,{...n})}function Ze(){const e=(0,P.e)(),t=(0,w.L)().navbar.items;return(0,u.jsx)("ul",{className:"menu__list",children:t.map(((t,n)=>(0,r.createElement)(qe,{mobile:!0,...t,onClick:()=>e.toggle(),key:n})))})}function Ge(e){return(0,u.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,u.jsx)(s.Z,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)",children:"\u2190 Back to main menu"})})}function Ve(){const e=0===(0,w.L)().navbar.items.length,t=I();return(0,u.jsxs)(u.Fragment,{children:[!e&&(0,u.jsx)(Ge,{onClick:()=>t.hide()}),t.content]})}function We(){const e=(0,P.e)();var t;return void 0===(t=e.shown)&&(t=!0),(0,r.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?(0,u.jsx)(M,{header:(0,u.jsx)(Q,{}),primaryMenu:(0,u.jsx)(Ze,{}),secondaryMenu:(0,u.jsx)(Ve,{})}):null}const Ke={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function Qe(e){return(0,u.jsx)("div",{role:"presentation",...e,className:(0,a.Z)("navbar-sidebar__backdrop",e.className)})}function Ye(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:o}}=(0,w.L)(),i=(0,P.e)(),{navbarRef:l,isNavbarVisible:d}=function(e){const[t,n]=(0,r.useState)(e),a=(0,r.useRef)(!1),o=(0,r.useRef)(0),i=(0,r.useCallback)((e=>{null!==e&&(o.current=e.getBoundingClientRect().height)}),[]);return(0,L.RF)(((t,r)=>{let{scrollY:i}=t;if(!e)return;if(i=l?n(!1):i+c{if(!e)return;const r=t.location.hash;if(r?document.getElementById(r.substring(1)):void 0)return a.current=!0,void n(!1);n(!0)})),{navbarRef:i,isNavbarVisible:t}}(n);return(0,u.jsxs)("nav",{ref:l,"aria-label":(0,s.I)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,a.Z)("navbar","navbar--fixed-top",n&&[Ke.navbarHideable,!d&&Ke.navbarHidden],{"navbar--dark":"dark"===o,"navbar--primary":"primary"===o,"navbar-sidebar--show":i.shown}),children:[t,(0,u.jsx)(Qe,{onClick:i.toggle}),(0,u.jsx)(We,{})]})}var Xe=n(8780);const Je={errorBoundaryError:"errorBoundaryError_a6uf",errorBoundaryFallback:"errorBoundaryFallback_VBag"};function et(e){return(0,u.jsx)("button",{type:"button",...e,children:(0,u.jsx)(s.Z,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error",children:"Try again"})})}function tt(e){let{error:t}=e;const n=(0,Xe.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,u.jsx)("p",{className:Je.errorBoundaryError,children:n})}class nt extends r.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const rt="right";function at(e){let{width:t=30,height:n=30,className:r,...a}=e;return(0,u.jsx)("svg",{className:r,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true",...a,children:(0,u.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function ot(){const{toggle:e,shown:t}=(0,P.e)();return(0,u.jsx)("button",{onClick:e,"aria-label":(0,s.I)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button",children:(0,u.jsx)(at,{})})}const it={colorModeToggle:"colorModeToggle_DEke"};function lt(e){let{items:t}=e;return(0,u.jsx)(u.Fragment,{children:t.map(((e,t)=>(0,u.jsx)(nt,{onError:t=>new Error(`A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n${JSON.stringify(e,null,2)}`,{cause:t}),children:(0,u.jsx)(qe,{...e})},t)))})}function st(e){let{left:t,right:n}=e;return(0,u.jsxs)("div",{className:"navbar__inner",children:[(0,u.jsx)("div",{className:"navbar__items",children:t}),(0,u.jsx)("div",{className:"navbar__items navbar__items--right",children:n})]})}function ct(){const e=(0,P.e)(),t=(0,w.L)().navbar.items,[n,r]=function(e){function t(e){return"left"===(e.position??rt)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),a=t.find((e=>"search"===e.type));return(0,u.jsx)(st,{left:(0,u.jsxs)(u.Fragment,{children:[!e.disabled&&(0,u.jsx)(ot,{}),(0,u.jsx)(W,{}),(0,u.jsx)(lt,{items:n})]}),right:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(lt,{items:r}),(0,u.jsx)(G,{className:it.colorModeToggle}),!a&&(0,u.jsx)(Fe,{children:(0,u.jsx)(Ie,{})})]})})}function ut(){return(0,u.jsx)(Ye,{children:(0,u.jsx)(ct,{})})}function dt(e){let{item:t}=e;const{to:n,href:r,label:a,prependBaseUrlToHref:o,...i}=t,l=(0,X.Z)(n),s=(0,X.Z)(r,{forcePrependBaseUrl:!0});return(0,u.jsxs)(Y.Z,{className:"footer__link-item",...r?{href:o?s:r}:{to:l},...i,children:[a,r&&!(0,J.Z)(r)&&(0,u.jsx)(te.Z,{})]})}function pt(e){let{item:t}=e;return t.html?(0,u.jsx)("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)("li",{className:"footer__item",children:(0,u.jsx)(dt,{item:t})},t.href??t.to)}function ft(e){let{column:t}=e;return(0,u.jsxs)("div",{className:"col footer__col",children:[(0,u.jsx)("div",{className:"footer__title",children:t.title}),(0,u.jsx)("ul",{className:"footer__items clean-list",children:t.items.map(((e,t)=>(0,u.jsx)(pt,{item:e},t)))})]})}function ht(e){let{columns:t}=e;return(0,u.jsx)("div",{className:"row footer__links",children:t.map(((e,t)=>(0,u.jsx)(ft,{column:e},t)))})}function mt(){return(0,u.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function gt(e){let{item:t}=e;return t.html?(0,u.jsx)("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)(dt,{item:t})}function bt(e){let{links:t}=e;return(0,u.jsx)("div",{className:"footer__links text--center",children:(0,u.jsx)("div",{className:"footer__links",children:t.map(((e,n)=>(0,u.jsxs)(r.Fragment,{children:[(0,u.jsx)(gt,{item:e}),t.length!==n+1&&(0,u.jsx)(mt,{})]},n)))})})}function yt(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?(0,u.jsx)(ht,{columns:t}):(0,u.jsx)(bt,{links:t})}var vt=n(9965);const wt={footerLogoLink:"footerLogoLink_BH7S"};function kt(e){let{logo:t}=e;const{withBaseUrl:n}=(0,X.C)(),r={light:n(t.src),dark:n(t.srcDark??t.src)};return(0,u.jsx)(vt.Z,{className:(0,a.Z)("footer__logo",t.className),alt:t.alt,sources:r,width:t.width,height:t.height,style:t.style})}function xt(e){let{logo:t}=e;return t.href?(0,u.jsx)(Y.Z,{href:t.href,className:wt.footerLogoLink,target:t.target,children:(0,u.jsx)(kt,{logo:t})}):(0,u.jsx)(kt,{logo:t})}function St(e){let{copyright:t}=e;return(0,u.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function Ct(e){let{style:t,links:n,logo:r,copyright:o}=e;return(0,u.jsx)("footer",{className:(0,a.Z)("footer",{"footer--dark":"dark"===t}),children:(0,u.jsxs)("div",{className:"container container-fluid",children:[n,(r||o)&&(0,u.jsxs)("div",{className:"footer__bottom text--center",children:[r&&(0,u.jsx)("div",{className:"margin-bottom--sm",children:r}),o]})]})})}function Tt(){const{footer:e}=(0,w.L)();if(!e)return null;const{copyright:t,links:n,logo:r,style:a}=e;return(0,u.jsx)(Ct,{style:a,links:n&&n.length>0&&(0,u.jsx)(yt,{links:n}),logo:r&&(0,u.jsx)(xt,{logo:r}),copyright:t&&(0,u.jsx)(St,{copyright:t})})}const Et=r.memo(Tt),_t=(0,j.Qc)([F.S,k.pl,L.OC,Ue.L5,i.VC,function(e){let{children:t}=e;return(0,u.jsx)(R.n2,{children:(0,u.jsx)(P.M,{children:(0,u.jsx)(O,{children:t})})})}]);function At(e){let{children:t}=e;return(0,u.jsx)(_t,{children:t})}var Pt=n(2503);function Lt(e){let{error:t,tryAgain:n}=e;return(0,u.jsx)("main",{className:"container margin-vert--xl",children:(0,u.jsx)("div",{className:"row",children:(0,u.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,u.jsx)(Pt.Z,{as:"h1",className:"hero__title",children:(0,u.jsx)(s.Z,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed",children:"This page crashed."})}),(0,u.jsx)("div",{className:"margin-vert--lg",children:(0,u.jsx)(et,{onClick:n,className:"button button--primary shadow--lw"})}),(0,u.jsx)("hr",{}),(0,u.jsx)("div",{className:"margin-vert--md",children:(0,u.jsx)(tt,{error:t})})]})})})}const jt={mainWrapper:"mainWrapper_z2l0"};function Rt(e){const{children:t,noFooter:n,wrapperClassName:r,title:l,description:s}=e;return(0,b.t)(),(0,u.jsxs)(At,{children:[(0,u.jsx)(i.d,{title:l,description:s}),(0,u.jsx)(v,{}),(0,u.jsx)(A,{}),(0,u.jsx)(ut,{}),(0,u.jsx)("div",{id:d,className:(0,a.Z)(g.k.wrapper.main,jt.mainWrapper,r),children:(0,u.jsx)(o.Z,{fallback:e=>(0,u.jsx)(Lt,{...e}),children:t})}),!n&&(0,u.jsx)(Et,{})]})}},1327:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});n(7294);var r=n(3692),a=n(4996),o=n(2263),i=n(6668),l=n(9965),s=n(5893);function c(e){let{logo:t,alt:n,imageClassName:r}=e;const o={light:(0,a.Z)(t.src),dark:(0,a.Z)(t.srcDark||t.src)},i=(0,s.jsx)(l.Z,{className:t.className,sources:o,height:t.height,width:t.width,alt:n,style:t.style});return r?(0,s.jsx)("div",{className:r,children:i}):i}function u(e){const{siteConfig:{title:t}}=(0,o.Z)(),{navbar:{title:n,logo:l}}=(0,i.L)(),{imageClassName:u,titleClassName:d,...p}=e,f=(0,a.Z)(l?.href||"/"),h=n?"":t,m=l?.alt??h;return(0,s.jsxs)(r.Z,{to:f,...p,...l?.target&&{target:l.target},children:[l&&(0,s.jsx)(c,{logo:l,alt:m,imageClassName:u}),null!=n&&(0,s.jsx)("b",{className:d,children:n})]})}},197:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});n(7294);var r=n(5742),a=n(5893);function o(e){let{locale:t,version:n,tag:o}=e;const i=t;return(0,a.jsxs)(r.Z,{children:[t&&(0,a.jsx)("meta",{name:"docusaurus_locale",content:t}),n&&(0,a.jsx)("meta",{name:"docusaurus_version",content:n}),o&&(0,a.jsx)("meta",{name:"docusaurus_tag",content:o}),i&&(0,a.jsx)("meta",{name:"docsearch:language",content:i}),n&&(0,a.jsx)("meta",{name:"docsearch:version",content:n}),o&&(0,a.jsx)("meta",{name:"docsearch:docusaurus_tag",content:o})]})}},9965:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});var r=n(7294),a=n(512),o=n(2389),i=n(2949);const l={themedComponent:"themedComponent_mlkZ","themedComponent--light":"themedComponent--light_NVdE","themedComponent--dark":"themedComponent--dark_xIcU"};var s=n(5893);function c(e){let{className:t,children:n}=e;const c=(0,o.Z)(),{colorMode:u}=(0,i.I)();return(0,s.jsx)(s.Fragment,{children:(c?"dark"===u?["dark"]:["light"]:["light","dark"]).map((e=>{const o=n({theme:e,className:(0,a.Z)(t,l.themedComponent,l[`themedComponent--${e}`])});return(0,s.jsx)(r.Fragment,{children:o},e)}))})}function u(e){const{sources:t,className:n,alt:r,...a}=e;return(0,s.jsx)(c,{className:n,children:e=>{let{theme:n,className:o}=e;return(0,s.jsx)("img",{src:t[n],alt:r,className:o,...a})}})}},6043:(e,t,n)=>{"use strict";n.d(t,{u:()=>c,z:()=>b});var r=n(7294),a=n(412),o=n(469),i=n(1442),l=n(5893);const s="ease-in-out";function c(e){let{initialState:t}=e;const[n,a]=(0,r.useState)(t??!1),o=(0,r.useCallback)((()=>{a((e=>!e))}),[]);return{collapsed:n,setCollapsed:a,toggleCollapsed:o}}const u={display:"none",overflow:"hidden",height:"0px"},d={display:"block",overflow:"visible",height:"auto"};function p(e,t){const n=t?u:d;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function f(e){let{collapsibleRef:t,collapsed:n,animation:a}=e;const o=(0,r.useRef)(!1);(0,r.useEffect)((()=>{const e=t.current;function r(){const t=e.scrollHeight,n=a?.duration??function(e){if((0,i.n)())return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(t);return{transition:`height ${n}ms ${a?.easing??s}`,height:`${t}px`}}function l(){const t=r();e.style.transition=t.transition,e.style.height=t.height}if(!o.current)return p(e,n),void(o.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(l(),requestAnimationFrame((()=>{e.style.height=u.height,e.style.overflow=u.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{l()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,a])}function h(e){if(!a.Z.canUseDOM)return e?u:d}function m(e){let{as:t="div",collapsed:n,children:a,animation:o,onCollapseTransitionEnd:i,className:s,disableSSRStyle:c}=e;const u=(0,r.useRef)(null);return f({collapsibleRef:u,collapsed:n,animation:o}),(0,l.jsx)(t,{ref:u,style:c?void 0:h(n),onTransitionEnd:e=>{"height"===e.propertyName&&(p(u.current,n),i?.(n))},className:s,children:a})}function g(e){let{collapsed:t,...n}=e;const[a,i]=(0,r.useState)(!t),[s,c]=(0,r.useState)(t);return(0,o.Z)((()=>{t||i(!0)}),[t]),(0,o.Z)((()=>{a&&c(t)}),[a,t]),a?(0,l.jsx)(m,{...n,collapsed:s}):null}function b(e){let{lazy:t,...n}=e;const r=t?g:m;return(0,l.jsx)(r,{...n})}},9689:(e,t,n)=>{"use strict";n.d(t,{nT:()=>m,pl:()=>h});var r=n(7294),a=n(2389),o=n(12),i=n(902),l=n(6668),s=n(5893);const c=(0,o.WA)("docusaurus.announcement.dismiss"),u=(0,o.WA)("docusaurus.announcement.id"),d=()=>"true"===c.get(),p=e=>c.set(String(e)),f=r.createContext(null);function h(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,l.L)(),t=(0,a.Z)(),[n,o]=(0,r.useState)((()=>!!t&&d()));(0,r.useEffect)((()=>{o(d())}),[]);const i=(0,r.useCallback)((()=>{p(!0),o(!0)}),[]);return(0,r.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=u.get();"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;u.set(t),r&&p(!1),!r&&d()||o(!1)}),[e]),(0,r.useMemo)((()=>({isActive:!!e&&!n,close:i})),[e,n,i])}();return(0,s.jsx)(f.Provider,{value:n,children:t})}function m(){const e=(0,r.useContext)(f);if(!e)throw new i.i6("AnnouncementBarProvider");return e}},2949:(e,t,n)=>{"use strict";n.d(t,{I:()=>b,S:()=>g});var r=n(7294),a=n(412),o=n(902),i=n(12),l=n(6668),s=n(5893);const c=r.createContext(void 0),u="theme",d=(0,i.WA)(u),p={light:"light",dark:"dark"},f=e=>e===p.dark?p.dark:p.light,h=e=>a.Z.canUseDOM?f(document.documentElement.getAttribute("data-theme")):f(e),m=e=>{d.set(f(e))};function g(e){let{children:t}=e;const n=function(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,l.L)(),[a,o]=(0,r.useState)(h(e));(0,r.useEffect)((()=>{t&&d.del()}),[t]);const i=(0,r.useCallback)((function(t,r){void 0===r&&(r={});const{persist:a=!0}=r;t?(o(t),a&&m(t)):(o(n?window.matchMedia("(prefers-color-scheme: dark)").matches?p.dark:p.light:e),d.del())}),[n,e]);(0,r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",f(a))}),[a]),(0,r.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==u)return;const t=d.get();null!==t&&i(f(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,i]);const s=(0,r.useRef)(!1);return(0,r.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{window.matchMedia("print").matches||s.current?s.current=window.matchMedia("print").matches:i(null)};return e.addListener(r),()=>e.removeListener(r)}),[i,t,n]),(0,r.useMemo)((()=>({colorMode:a,setColorMode:i,get isDarkTheme(){return a===p.dark},setLightTheme(){i(p.light)},setDarkTheme(){i(p.dark)}})),[a,i])}();return(0,s.jsx)(c.Provider,{value:n,children:t})}function b(){const e=(0,r.useContext)(c);if(null==e)throw new o.i6("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},373:(e,t,n)=>{"use strict";n.d(t,{J:()=>v,L5:()=>b,Oh:()=>w});var r=n(7294),a=n(143),o=n(9935),i=n(6668),l=n(2802),s=n(902),c=n(12),u=n(5893);const d=e=>`docs-preferred-version-${e}`,p={save:(e,t,n)=>{(0,c.WA)(d(e),{persistence:t}).set(n)},read:(e,t)=>(0,c.WA)(d(e),{persistence:t}).get(),clear:(e,t)=>{(0,c.WA)(d(e),{persistence:t}).del()}},f=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const h=r.createContext(null);function m(){const e=(0,a._r)(),t=(0,i.L)().docs.versionPersistence,n=(0,r.useMemo)((()=>Object.keys(e)),[e]),[o,l]=(0,r.useState)((()=>f(n)));(0,r.useEffect)((()=>{l(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:r}=e;function a(e){const t=p.read(e,n);return r[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(p.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,a(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[o,(0,r.useMemo)((()=>({savePreferredVersion:function(e,n){p.save(e,t,n),l((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function g(e){let{children:t}=e;const n=m();return(0,u.jsx)(h.Provider,{value:n,children:t})}function b(e){let{children:t}=e;return l.cE?(0,u.jsx)(g,{children:t}):(0,u.jsx)(u.Fragment,{children:t})}function y(){const e=(0,r.useContext)(h);if(!e)throw new s.i6("DocsPreferredVersionContextProvider");return e}function v(e){void 0===e&&(e=o.m);const t=(0,a.zh)(e),[n,i]=y(),{preferredVersionName:l}=n[e];return{preferredVersion:t.versions.find((e=>e.name===l))??null,savePreferredVersionName:(0,r.useCallback)((t=>{i.savePreferredVersion(e,t)}),[i,e])}}function w(){const e=(0,a._r)(),[t]=y();function n(n){const r=e[n],{preferredVersionName:a}=t[n];return r.versions.find((e=>e.name===a))??null}const r=Object.keys(e);return Object.fromEntries(r.map((e=>[e,n(e)])))}},1116:(e,t,n)=>{"use strict";n.d(t,{V:()=>c,b:()=>s});var r=n(7294),a=n(902),o=n(5893);const i=Symbol("EmptyContext"),l=r.createContext(i);function s(e){let{children:t,name:n,items:a}=e;const i=(0,r.useMemo)((()=>n&&a?{name:n,items:a}:null),[n,a]);return(0,o.jsx)(l.Provider,{value:i,children:t})}function c(){const e=(0,r.useContext)(l);if(e===i)throw new a.i6("DocsSidebarProvider");return e}},4477:(e,t,n)=>{"use strict";n.d(t,{E:()=>s,q:()=>l});var r=n(7294),a=n(902),o=n(5893);const i=r.createContext(null);function l(e){let{children:t,version:n}=e;return(0,o.jsx)(i.Provider,{value:n,children:t})}function s(){const e=(0,r.useContext)(i);if(null===e)throw new a.i6("DocsVersionProvider");return e}},3163:(e,t,n)=>{"use strict";n.d(t,{M:()=>p,e:()=>f});var r=n(7294),a=n(3102),o=n(7524),i=n(1980),l=n(6668),s=n(902),c=n(5893);const u=r.createContext(void 0);function d(){const e=function(){const e=(0,a.HY)(),{items:t}=(0,l.L)().navbar;return 0===t.length&&!e.component}(),t=(0,o.i)(),n=!e&&"mobile"===t,[s,c]=(0,r.useState)(!1);(0,i.Rb)((()=>{if(s)return c(!1),!1}));const u=(0,r.useCallback)((()=>{c((e=>!e))}),[]);return(0,r.useEffect)((()=>{"desktop"===t&&c(!1)}),[t]),(0,r.useMemo)((()=>({disabled:e,shouldRender:n,toggle:u,shown:s})),[e,n,u,s])}function p(e){let{children:t}=e;const n=d();return(0,c.jsx)(u.Provider,{value:n,children:t})}function f(){const e=r.useContext(u);if(void 0===e)throw new s.i6("NavbarMobileSidebarProvider");return e}},3102:(e,t,n)=>{"use strict";n.d(t,{HY:()=>s,Zo:()=>c,n2:()=>l});var r=n(7294),a=n(902),o=n(5893);const i=r.createContext(null);function l(e){let{children:t}=e;const n=(0,r.useState)({component:null,props:null});return(0,o.jsx)(i.Provider,{value:n,children:t})}function s(){const e=(0,r.useContext)(i);if(!e)throw new a.i6("NavbarSecondaryMenuContentProvider");return e[0]}function c(e){let{component:t,props:n}=e;const o=(0,r.useContext)(i);if(!o)throw new a.i6("NavbarSecondaryMenuContentProvider");const[,l]=o,s=(0,a.Ql)(n);return(0,r.useEffect)((()=>{l({component:t,props:s})}),[l,t,s]),(0,r.useEffect)((()=>()=>l({component:null,props:null})),[l]),null}},9727:(e,t,n)=>{"use strict";n.d(t,{h:()=>a,t:()=>o});var r=n(7294);const a="navigation-with-keyboard";function o(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(a),"mousedown"===e.type&&document.body.classList.remove(a)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(a),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},6177:(e,t,n)=>{"use strict";n.d(t,{K:()=>l,M:()=>s});var r=n(7294),a=n(2263),o=n(1980);const i="q";function l(){return(0,o.Nc)(i)}function s(){const{siteConfig:{baseUrl:e,themeConfig:t}}=(0,a.Z)(),{algolia:{searchPagePath:n}}=t;return(0,r.useCallback)((t=>`${e}${n}?${i}=${encodeURIComponent(t)}`),[e,n])}},7524:(e,t,n)=>{"use strict";n.d(t,{i:()=>l});var r=n(7294),a=n(412);const o={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function l(e){let{desktopBreakpoint:t=i}=void 0===e?{}:e;const[n,l]=(0,r.useState)((()=>"ssr"));return(0,r.useEffect)((()=>{function e(){l(function(e){if(!a.Z.canUseDOM)throw new Error("getWindowSize() should only be called after React hydration");return window.innerWidth>e?o.desktop:o.mobile}(t))}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[t]),n}},5281:(e,t,n)=>{"use strict";n.d(t,{k:()=>r});const r={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",unlistedBanner:"theme-unlisted-banner",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{}}},1442:(e,t,n)=>{"use strict";function r(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{n:()=>r})},2802:(e,t,n)=>{"use strict";n.d(t,{LM:()=>f,_F:()=>g,cE:()=>p,SN:()=>C,lO:()=>k,vY:()=>S,oz:()=>x,s1:()=>w,f:()=>y});var r=n(7294),a=n(6550),o=n(8790),i=n(143),l=n(373),s=n(4477),c=n(1116);function u(e){return Array.from(new Set(e))}var d=n(8596);const p=!!i._r;function f(e){return"link"!==e.type||e.unlisted?"category"===e.type?function(e){if(e.href&&!e.linkUnlisted)return e.href;for(const t of e.items){const e=f(t);if(e)return e}}(e):void 0:e.href}const h=(e,t)=>void 0!==e&&(0,d.Mg)(e,t),m=(e,t)=>e.some((e=>g(e,t)));function g(e,t){return"link"===e.type?h(e.href,t):"category"===e.type&&(h(e.href,t)||m(e.items,t))}function b(e,t){switch(e.type){case"category":return g(e,t)||e.items.some((e=>b(e,t)));case"link":return!e.unlisted||g(e,t);default:return!0}}function y(e,t){return(0,r.useMemo)((()=>e.filter((e=>b(e,t)))),[e,t])}function v(e){let{sidebarItems:t,pathname:n,onlyCategories:r=!1}=e;const a=[];return function e(t){for(const o of t)if("category"===o.type&&((0,d.Mg)(o.href,n)||e(o.items))||"link"===o.type&&(0,d.Mg)(o.href,n)){return r&&"category"!==o.type||a.unshift(o),!0}return!1}(t),a}function w(){const e=(0,c.V)(),{pathname:t}=(0,a.TH)(),n=(0,i.gA)()?.pluginData.breadcrumbs;return!1!==n&&e?v({sidebarItems:e.items,pathname:t}):null}function k(e){const{activeVersion:t}=(0,i.Iw)(e),{preferredVersion:n}=(0,l.J)(e),a=(0,i.yW)(e);return(0,r.useMemo)((()=>u([t,n,a].filter(Boolean))),[t,n,a])}function x(e,t){const n=k(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),r=t.find((t=>t[0]===e));if(!r)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${t.map((e=>e[0])).join("\n- ")}`);return r[1]}),[e,n])}function S(e,t){const n=k(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),r=t.find((t=>t.id===e));if(!r){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${n.length>1?"s":""} "${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${u(t.map((e=>e.id))).join("\n- ")}`)}return r}),[e,n])}function C(e){let{route:t}=e;const n=(0,a.TH)(),r=(0,s.E)(),i=t.routes,l=i.find((e=>(0,a.LX)(n.pathname,e)));if(!l)return null;const c=l.sidebar,u=c?r.docsSidebars[c]:void 0;return{docElement:(0,o.H)(i),sidebarName:c,sidebarItems:u}}},2128:(e,t,n)=>{"use strict";n.d(t,{p:()=>a});var r=n(2263);function a(e){const{siteConfig:t}=(0,r.Z)(),{title:n,titleDelimiter:a}=t;return e?.trim().length?`${e.trim()} ${a} ${n}`:n}},1980:(e,t,n)=>{"use strict";n.d(t,{Nc:()=>s,Rb:()=>i});var r=n(7294),a=n(6550),o=n(902);function i(e){!function(e){const t=(0,a.k6)(),n=(0,o.zX)(e);(0,r.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}function l(e){return function(e){const t=(0,a.k6)();return(0,r.useSyncExternalStore)(t.listen,(()=>e(t)),(()=>e(t)))}((t=>null===e?null:new URLSearchParams(t.location.search).get(e)))}function s(e){const t=l(e)??"",n=function(){const e=(0,a.k6)();return(0,r.useCallback)(((t,n,r)=>{const a=new URLSearchParams(e.location.search);n?a.set(t,n):a.delete(t),(r?.push?e.push:e.replace)({search:a.toString()})}),[e])}();return[t,(0,r.useCallback)(((t,r)=>{n(e,t,r)}),[n,e])]}},833:(e,t,n)=>{"use strict";n.d(t,{FG:()=>f,d:()=>d,VC:()=>h});var r=n(7294),a=n(512),o=n(5742),i=n(226);function l(){const e=r.useContext(i._);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var s=n(4996),c=n(2128),u=n(5893);function d(e){let{title:t,description:n,keywords:r,image:a,children:i}=e;const l=(0,c.p)(t),{withBaseUrl:d}=(0,s.C)(),p=a?d(a,{absolute:!0}):void 0;return(0,u.jsxs)(o.Z,{children:[t&&(0,u.jsx)("title",{children:l}),t&&(0,u.jsx)("meta",{property:"og:title",content:l}),n&&(0,u.jsx)("meta",{name:"description",content:n}),n&&(0,u.jsx)("meta",{property:"og:description",content:n}),r&&(0,u.jsx)("meta",{name:"keywords",content:Array.isArray(r)?r.join(","):r}),p&&(0,u.jsx)("meta",{property:"og:image",content:p}),p&&(0,u.jsx)("meta",{name:"twitter:image",content:p}),i]})}const p=r.createContext(void 0);function f(e){let{className:t,children:n}=e;const i=r.useContext(p),l=(0,a.Z)(i,t);return(0,u.jsxs)(p.Provider,{value:l,children:[(0,u.jsx)(o.Z,{children:(0,u.jsx)("html",{className:l})}),n]})}function h(e){let{children:t}=e;const n=l(),r=`plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const o=`plugin-id-${n.plugin.id}`;return(0,u.jsx)(f,{className:(0,a.Z)(r,o),children:t})}},902:(e,t,n)=>{"use strict";n.d(t,{D9:()=>l,Qc:()=>u,Ql:()=>c,i6:()=>s,zX:()=>i});var r=n(7294),a=n(469),o=n(5893);function i(e){const t=(0,r.useRef)(e);return(0,a.Z)((()=>{t.current=e}),[e]),(0,r.useCallback)((function(){return t.current(...arguments)}),[])}function l(e){const t=(0,r.useRef)();return(0,a.Z)((()=>{t.current=e})),t.current}class s extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function c(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,r.useMemo)((()=>e),t.flat())}function u(e){return t=>{let{children:n}=t;return(0,o.jsx)(o.Fragment,{children:e.reduceRight(((e,t)=>(0,o.jsx)(t,{children:e})),n)})}}},8022:(e,t,n)=>{"use strict";function r(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}n.d(t,{F:()=>r})},8596:(e,t,n)=>{"use strict";n.d(t,{Mg:()=>i,Ns:()=>l});var r=n(7294),a=n(723),o=n(2263);function i(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function l(){const{baseUrl:e}=(0,o.Z)().siteConfig;return(0,r.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function r(e){return e.path===t&&!0===e.exact}function a(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(r)||e(t.filter(a).flatMap((e=>e.routes??[])))}(n)}({routes:a.Z,baseUrl:e})),[e])}},2466:(e,t,n)=>{"use strict";n.d(t,{Ct:()=>f,OC:()=>c,RF:()=>p});var r=n(7294),a=n(412),o=n(2389),i=(n(469),n(902)),l=n(5893);const s=r.createContext(void 0);function c(e){let{children:t}=e;const n=function(){const e=(0,r.useRef)(!0);return(0,r.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return(0,l.jsx)(s.Provider,{value:n,children:t})}function u(){const e=(0,r.useContext)(s);if(null==e)throw new i.i6("ScrollControllerProvider");return e}const d=()=>a.Z.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function p(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=u(),a=(0,r.useRef)(d()),o=(0,i.zX)(e);(0,r.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=d();o(e,a.current),a.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[o,n,...t])}function f(){const e=(0,r.useRef)(null),t=(0,o.Z)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function r(){const a=document.documentElement.scrollTop;(n&&a>e||!n&&at&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},3320:(e,t,n)=>{"use strict";n.d(t,{HX:()=>i,_q:()=>s,os:()=>l});var r=n(143),a=n(2263),o=n(373);const i="default";function l(e,t){return`docs-${e}-${t}`}function s(){const{i18n:e}=(0,a.Z)(),t=(0,r._r)(),n=(0,r.WS)(),s=(0,o.Oh)();const c=[i,...Object.keys(t).map((function(e){const r=n?.activePlugin.pluginId===e?n.activeVersion:void 0,a=s[e],o=t[e].versions.find((e=>e.isLast));return l(e,(r??a??o).name)}))];return{locale:e.currentLocale,tags:c}}},12:(e,t,n)=>{"use strict";n.d(t,{WA:()=>s});n(7294);const r="localStorage";function a(e){let{key:t,oldValue:n,newValue:r,storage:a}=e;if(n===r)return;const o=document.createEvent("StorageEvent");o.initStorageEvent("storage",!1,!1,t,n,r,window.location.href,a),window.dispatchEvent(o)}function o(e){if(void 0===e&&(e=r),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,i||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),i=!0),null}var t}let i=!1;const l={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function s(e,t){if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(e);const n=o(t?.persistence);return null===n?l:{get:()=>{try{return n.getItem(e)}catch(t){return console.error(`Docusaurus storage error, can't get key=${e}`,t),null}},set:t=>{try{const r=n.getItem(e);n.setItem(e,t),a({key:e,oldValue:r,newValue:t,storage:n})}catch(r){console.error(`Docusaurus storage error, can't set ${e}=${t}`,r)}},del:()=>{try{const t=n.getItem(e);n.removeItem(e),a({key:e,oldValue:t,newValue:null,storage:n})}catch(t){console.error(`Docusaurus storage error, can't delete key=${e}`,t)}},listen:t=>{try{const r=r=>{r.storageArea===n&&r.key===e&&t(r)};return window.addEventListener("storage",r),()=>window.removeEventListener("storage",r)}catch(r){return console.error(`Docusaurus storage error, can't listen for changes of key=${e}`,r),()=>{}}}}}},4711:(e,t,n)=>{"use strict";n.d(t,{l:()=>i});var r=n(2263),a=n(6550),o=n(8780);function i(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:i,currentLocale:l}}=(0,r.Z)(),{pathname:s}=(0,a.TH)(),c=(0,o.applyTrailingSlash)(s,{trailingSlash:n,baseUrl:e}),u=l===i?e:e.replace(`/${l}/`,"/"),d=c.replace(e,"");return{createUrl:function(e){let{locale:n,fullyQualified:r}=e;return`${r?t:""}${function(e){return e===i?`${u}`:`${u}${e}/`}(n)}${d}`}}}},5936:(e,t,n)=>{"use strict";n.d(t,{S:()=>i});var r=n(7294),a=n(6550),o=n(902);function i(e){const t=(0,a.TH)(),n=(0,o.D9)(t),i=(0,o.zX)(e);(0,r.useEffect)((()=>{n&&t!==n&&i({location:t,previousLocation:n})}),[i,t,n])}},6668:(e,t,n)=>{"use strict";n.d(t,{L:()=>a});var r=n(2263);function a(){return(0,r.Z)().siteConfig.themeConfig}},6278:(e,t,n)=>{"use strict";n.d(t,{L:()=>a});var r=n(2263);function a(){const{siteConfig:{themeConfig:e}}=(0,r.Z)();return e}},239:(e,t,n)=>{"use strict";n.d(t,{l:()=>l});var r=n(7294),a=n(8022),o=n(4996),i=n(6278);function l(){const{withBaseUrl:e}=(0,o.C)(),{algolia:{externalUrlRegex:t,replaceSearchResultPathname:n}}=(0,i.L)();return(0,r.useCallback)((r=>{const o=new URL(r);if((0,a.F)(t,o.href))return r;const i=`${o.pathname+o.hash}`;return e(function(e,t){return t?e.replaceAll(new RegExp(t.from,"g"),t.to):e}(i,n))}),[e,t,n])}},8802:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){const{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[a]=e.split(/[#?]/),o="/"===a||a===r?a:(i=a,n?function(e){return e.endsWith("/")?e:`${e}/`}(i):function(e){return e.endsWith("/")?e.slice(0,-1):e}(i));var i;return e.replace(a,o)}},4143:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=void 0,t.getErrorCausalChain=function e(t){return t.cause?[t,...e(t.cause)]:[t]}},8780:function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=t.applyTrailingSlash=t.blogPostContainerID=void 0,t.blogPostContainerID="__blog-post-container";var a=n(8802);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return r(a).default}});var o=n(4143);Object.defineProperty(t,"getErrorCausalChain",{enumerable:!0,get:function(){return o.getErrorCausalChain}})},9318:(e,t,n)=>{"use strict";n.d(t,{lX:()=>w,q_:()=>E,ob:()=>f,PP:()=>A,Ep:()=>p});var r=n(7462);function a(e){return"/"===e.charAt(0)}function o(e,t){for(var n=t,r=n+1,a=e.length;r=0;p--){var f=i[p];"."===f?o(i,p):".."===f?(o(i,p),d++):d&&(o(i,p),d--)}if(!c)for(;d--;d)i.unshift("..");!c||""===i[0]||i[0]&&a(i[0])||i.unshift("");var h=i.join("/");return n&&"/"!==h.substr(-1)&&(h+="/"),h};var l=n(8776);function s(e){return"/"===e.charAt(0)?e:"/"+e}function c(e){return"/"===e.charAt(0)?e.substr(1):e}function u(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var t=e.pathname,n=e.search,r=e.hash,a=t||"/";return n&&"?"!==n&&(a+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(a+="#"===r.charAt(0)?r:"#"+r),a}function f(e,t,n,a){var o;"string"==typeof e?(o=function(e){var t=e||"/",n="",r="",a=t.indexOf("#");-1!==a&&(r=t.substr(a),t=t.substr(0,a));var o=t.indexOf("?");return-1!==o&&(n=t.substr(o),t=t.substr(0,o)),{pathname:t,search:"?"===n?"":n,hash:"#"===r?"":r}}(e),o.state=t):(void 0===(o=(0,r.Z)({},e)).pathname&&(o.pathname=""),o.search?"?"!==o.search.charAt(0)&&(o.search="?"+o.search):o.search="",o.hash?"#"!==o.hash.charAt(0)&&(o.hash="#"+o.hash):o.hash="",void 0!==t&&void 0===o.state&&(o.state=t));try{o.pathname=decodeURI(o.pathname)}catch(l){throw l instanceof URIError?new URIError('Pathname "'+o.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):l}return n&&(o.key=n),a?o.pathname?"/"!==o.pathname.charAt(0)&&(o.pathname=i(o.pathname,a.pathname)):o.pathname=a.pathname:o.pathname||(o.pathname="/"),o}function h(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,r,a){if(null!=e){var o="function"==typeof e?e(t,n):e;"string"==typeof o?"function"==typeof r?r(o,a):a(!0):a(!1!==o)}else a(!0)},appendListener:function(e){var n=!0;function r(){n&&e.apply(void 0,arguments)}return t.push(r),function(){n=!1,t=t.filter((function(e){return e!==r}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),r=0;rt?n.splice(t,n.length-t,a):n.push(a),d({action:r,location:a,index:t,entries:n})}}))},replace:function(e,t){var r="REPLACE",a=f(e,t,m(),w.location);u.confirmTransitionTo(a,r,n,(function(e){e&&(w.entries[w.index]=a,d({action:r,location:a}))}))},go:v,goBack:function(){v(-1)},goForward:function(){v(1)},canGo:function(e){var t=w.index+e;return t>=0&&t{"use strict";var r=n(9864),a={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},o={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},l={};function s(e){return r.isMemo(e)?i:l[e.$$typeof]||a}l[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},l[r.Memo]=i;var c=Object.defineProperty,u=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,h=Object.prototype;e.exports=function e(t,n,r){if("string"!=typeof n){if(h){var a=f(n);a&&a!==h&&e(t,a,r)}var i=u(n);d&&(i=i.concat(d(n)));for(var l=s(t),m=s(n),g=0;g{"use strict";e.exports=function(e,t,n,r,a,o,i,l){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,a,o,i,l],u=0;(s=new Error(t.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw s.framesToPop=1,s}}},5826:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},2497:(e,t,n)=>{"use strict";n.r(t)},2295:(e,t,n)=>{"use strict";n.r(t)},4865:function(e,t,n){var r,a;r=function(){var e,t,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:''};function a(e,t,n){return en?n:e}function o(e){return 100*(-1+e)}function i(e,t,n){var a;return(a="translate3d"===r.positionUsing?{transform:"translate3d("+o(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+o(e)+"%,0)"}:{"margin-left":o(e)+"%"}).transition="all "+t+"ms "+n,a}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=a(e,r.minimum,1),n.status=1===e?null:e;var o=n.render(!t),c=o.querySelector(r.barSelector),u=r.speed,d=r.easing;return o.offsetWidth,l((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),s(c,i(e,u,d)),1===e?(s(o,{transition:"none",opacity:1}),o.offsetWidth,setTimeout((function(){s(o,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),u)}),u)):setTimeout(t,u)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*a(Math.random()*t,.1,.95)),t=a(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var a,i=t.querySelector(r.barSelector),l=e?"-100":o(n.status||0),c=document.querySelector(r.parent);return s(i,{transition:"all 0 linear",transform:"translate3d("+l+"%,0,0)"}),r.showSpinner||(a=t.querySelector(r.spinnerSelector))&&f(a),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(t),t},n.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var l=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),s=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function r(t){var n=document.body.style;if(t in n)return t;for(var r,a=e.length,o=t.charAt(0).toUpperCase()+t.slice(1);a--;)if((r=e[a]+o)in n)return r;return t}function a(e){return e=n(e),t[e]||(t[e]=r(e))}function o(e,t,n){t=a(t),e.style[t]=n}return function(e,t){var n,r,a=arguments;if(2==a.length)for(n in t)void 0!==(r=t[n])&&t.hasOwnProperty(n)&&o(e,n,r);else o(e,a[1],a[2])}}();function c(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function u(e,t){var n=p(e),r=n+t;c(n,t)||(e.className=r.substring(1))}function d(e,t){var n,r=p(e);c(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(a="function"==typeof r?r.call(t,n,t,e):r)||(e.exports=a)},9901:e=>{e.exports&&(e.exports={core:{meta:{path:"components/prism-core.js",option:"mandatory"},core:"Core"},themes:{meta:{path:"themes/{id}.css",link:"index.html?theme={id}",exclusive:!0},prism:{title:"Default",option:"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{title:"Okaidia",owner:"ocodia"},"prism-twilight":{title:"Twilight",owner:"remybach"},"prism-coy":{title:"Coy",owner:"tshedor"},"prism-solarizedlight":{title:"Solarized Light",owner:"hectormatos2011 "},"prism-tomorrow":{title:"Tomorrow Night",owner:"Rosey"}},languages:{meta:{path:"components/prism-{id}",noCSS:!0,examplesPath:"examples/prism-{id}",addCheckAll:!0},markup:{title:"Markup",alias:["html","xml","svg","mathml","ssml","atom","rss"],aliasTitles:{html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",ssml:"SSML",atom:"Atom",rss:"RSS"},option:"default"},css:{title:"CSS",option:"default",modify:"markup"},clike:{title:"C-like",option:"default"},javascript:{title:"JavaScript",require:"clike",modify:"markup",optional:"regex",alias:"js",option:"default"},abap:{title:"ABAP",owner:"dellagustin"},abnf:{title:"ABNF",owner:"RunDevelopment"},actionscript:{title:"ActionScript",require:"javascript",modify:"markup",owner:"Golmote"},ada:{title:"Ada",owner:"Lucretia"},agda:{title:"Agda",owner:"xy-ren"},al:{title:"AL",owner:"RunDevelopment"},antlr4:{title:"ANTLR4",alias:"g4",owner:"RunDevelopment"},apacheconf:{title:"Apache Configuration",owner:"GuiTeK"},apex:{title:"Apex",require:["clike","sql"],owner:"RunDevelopment"},apl:{title:"APL",owner:"ngn"},applescript:{title:"AppleScript",owner:"Golmote"},aql:{title:"AQL",owner:"RunDevelopment"},arduino:{title:"Arduino",require:"cpp",alias:"ino",owner:"dkern"},arff:{title:"ARFF",owner:"Golmote"},armasm:{title:"ARM Assembly",alias:"arm-asm",owner:"RunDevelopment"},arturo:{title:"Arturo",alias:"art",optional:["bash","css","javascript","markup","markdown","sql"],owner:"drkameleon"},asciidoc:{alias:"adoc",title:"AsciiDoc",owner:"Golmote"},aspnet:{title:"ASP.NET (C#)",require:["markup","csharp"],owner:"nauzilus"},asm6502:{title:"6502 Assembly",owner:"kzurawel"},asmatmel:{title:"Atmel AVR Assembly",owner:"cerkit"},autohotkey:{title:"AutoHotkey",owner:"aviaryan"},autoit:{title:"AutoIt",owner:"Golmote"},avisynth:{title:"AviSynth",alias:"avs",owner:"Zinfidel"},"avro-idl":{title:"Avro IDL",alias:"avdl",owner:"RunDevelopment"},awk:{title:"AWK",alias:"gawk",aliasTitles:{gawk:"GAWK"},owner:"RunDevelopment"},bash:{title:"Bash",alias:["sh","shell"],aliasTitles:{sh:"Shell",shell:"Shell"},owner:"zeitgeist87"},basic:{title:"BASIC",owner:"Golmote"},batch:{title:"Batch",owner:"Golmote"},bbcode:{title:"BBcode",alias:"shortcode",aliasTitles:{shortcode:"Shortcode"},owner:"RunDevelopment"},bbj:{title:"BBj",owner:"hyyan"},bicep:{title:"Bicep",owner:"johnnyreilly"},birb:{title:"Birb",require:"clike",owner:"Calamity210"},bison:{title:"Bison",require:"c",owner:"Golmote"},bnf:{title:"BNF",alias:"rbnf",aliasTitles:{rbnf:"RBNF"},owner:"RunDevelopment"},bqn:{title:"BQN",owner:"yewscion"},brainfuck:{title:"Brainfuck",owner:"Golmote"},brightscript:{title:"BrightScript",owner:"RunDevelopment"},bro:{title:"Bro",owner:"wayward710"},bsl:{title:"BSL (1C:Enterprise)",alias:"oscript",aliasTitles:{oscript:"OneScript"},owner:"Diversus23"},c:{title:"C",require:"clike",owner:"zeitgeist87"},csharp:{title:"C#",require:"clike",alias:["cs","dotnet"],owner:"mvalipour"},cpp:{title:"C++",require:"c",owner:"zeitgeist87"},cfscript:{title:"CFScript",require:"clike",alias:"cfc",owner:"mjclemente"},chaiscript:{title:"ChaiScript",require:["clike","cpp"],owner:"RunDevelopment"},cil:{title:"CIL",owner:"sbrl"},cilkc:{title:"Cilk/C",require:"c",alias:"cilk-c",owner:"OpenCilk"},cilkcpp:{title:"Cilk/C++",require:"cpp",alias:["cilk-cpp","cilk"],owner:"OpenCilk"},clojure:{title:"Clojure",owner:"troglotit"},cmake:{title:"CMake",owner:"mjrogozinski"},cobol:{title:"COBOL",owner:"RunDevelopment"},coffeescript:{title:"CoffeeScript",require:"javascript",alias:"coffee",owner:"R-osey"},concurnas:{title:"Concurnas",alias:"conc",owner:"jasontatton"},csp:{title:"Content-Security-Policy",owner:"ScottHelme"},cooklang:{title:"Cooklang",owner:"ahue"},coq:{title:"Coq",owner:"RunDevelopment"},crystal:{title:"Crystal",require:"ruby",owner:"MakeNowJust"},"css-extras":{title:"CSS Extras",require:"css",modify:"css",owner:"milesj"},csv:{title:"CSV",owner:"RunDevelopment"},cue:{title:"CUE",owner:"RunDevelopment"},cypher:{title:"Cypher",owner:"RunDevelopment"},d:{title:"D",require:"clike",owner:"Golmote"},dart:{title:"Dart",require:"clike",owner:"Golmote"},dataweave:{title:"DataWeave",owner:"machaval"},dax:{title:"DAX",owner:"peterbud"},dhall:{title:"Dhall",owner:"RunDevelopment"},diff:{title:"Diff",owner:"uranusjr"},django:{title:"Django/Jinja2",require:"markup-templating",alias:"jinja2",owner:"romanvm"},"dns-zone-file":{title:"DNS zone file",owner:"RunDevelopment",alias:"dns-zone"},docker:{title:"Docker",alias:"dockerfile",owner:"JustinBeckwith"},dot:{title:"DOT (Graphviz)",alias:"gv",optional:"markup",owner:"RunDevelopment"},ebnf:{title:"EBNF",owner:"RunDevelopment"},editorconfig:{title:"EditorConfig",owner:"osipxd"},eiffel:{title:"Eiffel",owner:"Conaclos"},ejs:{title:"EJS",require:["javascript","markup-templating"],owner:"RunDevelopment",alias:"eta",aliasTitles:{eta:"Eta"}},elixir:{title:"Elixir",owner:"Golmote"},elm:{title:"Elm",owner:"zwilias"},etlua:{title:"Embedded Lua templating",require:["lua","markup-templating"],owner:"RunDevelopment"},erb:{title:"ERB",require:["ruby","markup-templating"],owner:"Golmote"},erlang:{title:"Erlang",owner:"Golmote"},"excel-formula":{title:"Excel Formula",alias:["xlsx","xls"],owner:"RunDevelopment"},fsharp:{title:"F#",require:"clike",owner:"simonreynolds7"},factor:{title:"Factor",owner:"catb0t"},false:{title:"False",owner:"edukisto"},"firestore-security-rules":{title:"Firestore security rules",require:"clike",owner:"RunDevelopment"},flow:{title:"Flow",require:"javascript",owner:"Golmote"},fortran:{title:"Fortran",owner:"Golmote"},ftl:{title:"FreeMarker Template Language",require:"markup-templating",owner:"RunDevelopment"},gml:{title:"GameMaker Language",alias:"gamemakerlanguage",require:"clike",owner:"LiarOnce"},gap:{title:"GAP (CAS)",owner:"RunDevelopment"},gcode:{title:"G-code",owner:"RunDevelopment"},gdscript:{title:"GDScript",owner:"RunDevelopment"},gedcom:{title:"GEDCOM",owner:"Golmote"},gettext:{title:"gettext",alias:"po",owner:"RunDevelopment"},gherkin:{title:"Gherkin",owner:"hason"},git:{title:"Git",owner:"lgiraudel"},glsl:{title:"GLSL",require:"c",owner:"Golmote"},gn:{title:"GN",alias:"gni",owner:"RunDevelopment"},"linker-script":{title:"GNU Linker Script",alias:"ld",owner:"RunDevelopment"},go:{title:"Go",require:"clike",owner:"arnehormann"},"go-module":{title:"Go module",alias:"go-mod",owner:"RunDevelopment"},gradle:{title:"Gradle",require:"clike",owner:"zeabdelkhalek-badido18"},graphql:{title:"GraphQL",optional:"markdown",owner:"Golmote"},groovy:{title:"Groovy",require:"clike",owner:"robfletcher"},haml:{title:"Haml",require:"ruby",optional:["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],owner:"Golmote"},handlebars:{title:"Handlebars",require:"markup-templating",alias:["hbs","mustache"],aliasTitles:{mustache:"Mustache"},owner:"Golmote"},haskell:{title:"Haskell",alias:"hs",owner:"bholst"},haxe:{title:"Haxe",require:"clike",optional:"regex",owner:"Golmote"},hcl:{title:"HCL",owner:"outsideris"},hlsl:{title:"HLSL",require:"c",owner:"RunDevelopment"},hoon:{title:"Hoon",owner:"matildepark"},http:{title:"HTTP",optional:["csp","css","hpkp","hsts","javascript","json","markup","uri"],owner:"danielgtaylor"},hpkp:{title:"HTTP Public-Key-Pins",owner:"ScottHelme"},hsts:{title:"HTTP Strict-Transport-Security",owner:"ScottHelme"},ichigojam:{title:"IchigoJam",owner:"BlueCocoa"},icon:{title:"Icon",owner:"Golmote"},"icu-message-format":{title:"ICU Message Format",owner:"RunDevelopment"},idris:{title:"Idris",alias:"idr",owner:"KeenS",require:"haskell"},ignore:{title:".ignore",owner:"osipxd",alias:["gitignore","hgignore","npmignore"],aliasTitles:{gitignore:".gitignore",hgignore:".hgignore",npmignore:".npmignore"}},inform7:{title:"Inform 7",owner:"Golmote"},ini:{title:"Ini",owner:"aviaryan"},io:{title:"Io",owner:"AlesTsurko"},j:{title:"J",owner:"Golmote"},java:{title:"Java",require:"clike",owner:"sherblot"},javadoc:{title:"JavaDoc",require:["markup","java","javadoclike"],modify:"java",optional:"scala",owner:"RunDevelopment"},javadoclike:{title:"JavaDoc-like",modify:["java","javascript","php"],owner:"RunDevelopment"},javastacktrace:{title:"Java stack trace",owner:"RunDevelopment"},jexl:{title:"Jexl",owner:"czosel"},jolie:{title:"Jolie",require:"clike",owner:"thesave"},jq:{title:"JQ",owner:"RunDevelopment"},jsdoc:{title:"JSDoc",require:["javascript","javadoclike","typescript"],modify:"javascript",optional:["actionscript","coffeescript"],owner:"RunDevelopment"},"js-extras":{title:"JS Extras",require:"javascript",modify:"javascript",optional:["actionscript","coffeescript","flow","n4js","typescript"],owner:"RunDevelopment"},json:{title:"JSON",alias:"webmanifest",aliasTitles:{webmanifest:"Web App Manifest"},owner:"CupOfTea696"},json5:{title:"JSON5",require:"json",owner:"RunDevelopment"},jsonp:{title:"JSONP",require:"json",owner:"RunDevelopment"},jsstacktrace:{title:"JS stack trace",owner:"sbrl"},"js-templates":{title:"JS Templates",require:"javascript",modify:"javascript",optional:["css","css-extras","graphql","markdown","markup","sql"],owner:"RunDevelopment"},julia:{title:"Julia",owner:"cdagnino"},keepalived:{title:"Keepalived Configure",owner:"dev-itsheng"},keyman:{title:"Keyman",owner:"mcdurdin"},kotlin:{title:"Kotlin",alias:["kt","kts"],aliasTitles:{kts:"Kotlin Script"},require:"clike",owner:"Golmote"},kumir:{title:"KuMir (\u041a\u0443\u041c\u0438\u0440)",alias:"kum",owner:"edukisto"},kusto:{title:"Kusto",owner:"RunDevelopment"},latex:{title:"LaTeX",alias:["tex","context"],aliasTitles:{tex:"TeX",context:"ConTeXt"},owner:"japborst"},latte:{title:"Latte",require:["clike","markup-templating","php"],owner:"nette"},less:{title:"Less",require:"css",optional:"css-extras",owner:"Golmote"},lilypond:{title:"LilyPond",require:"scheme",alias:"ly",owner:"RunDevelopment"},liquid:{title:"Liquid",require:"markup-templating",owner:"cinhtau"},lisp:{title:"Lisp",alias:["emacs","elisp","emacs-lisp"],owner:"JuanCaicedo"},livescript:{title:"LiveScript",owner:"Golmote"},llvm:{title:"LLVM IR",owner:"porglezomp"},log:{title:"Log file",optional:"javastacktrace",owner:"RunDevelopment"},lolcode:{title:"LOLCODE",owner:"Golmote"},lua:{title:"Lua",owner:"Golmote"},magma:{title:"Magma (CAS)",owner:"RunDevelopment"},makefile:{title:"Makefile",owner:"Golmote"},markdown:{title:"Markdown",require:"markup",optional:"yaml",alias:"md",owner:"Golmote"},"markup-templating":{title:"Markup templating",require:"markup",owner:"Golmote"},mata:{title:"Mata",owner:"RunDevelopment"},matlab:{title:"MATLAB",owner:"Golmote"},maxscript:{title:"MAXScript",owner:"RunDevelopment"},mel:{title:"MEL",owner:"Golmote"},mermaid:{title:"Mermaid",owner:"RunDevelopment"},metafont:{title:"METAFONT",owner:"LaeriExNihilo"},mizar:{title:"Mizar",owner:"Golmote"},mongodb:{title:"MongoDB",owner:"airs0urce",require:"javascript"},monkey:{title:"Monkey",owner:"Golmote"},moonscript:{title:"MoonScript",alias:"moon",owner:"RunDevelopment"},n1ql:{title:"N1QL",owner:"TMWilds"},n4js:{title:"N4JS",require:"javascript",optional:"jsdoc",alias:"n4jsd",owner:"bsmith-n4"},"nand2tetris-hdl":{title:"Nand To Tetris HDL",owner:"stephanmax"},naniscript:{title:"Naninovel Script",owner:"Elringus",alias:"nani"},nasm:{title:"NASM",owner:"rbmj"},neon:{title:"NEON",owner:"nette"},nevod:{title:"Nevod",owner:"nezaboodka"},nginx:{title:"nginx",owner:"volado"},nim:{title:"Nim",owner:"Golmote"},nix:{title:"Nix",owner:"Golmote"},nsis:{title:"NSIS",owner:"idleberg"},objectivec:{title:"Objective-C",require:"c",alias:"objc",owner:"uranusjr"},ocaml:{title:"OCaml",owner:"Golmote"},odin:{title:"Odin",owner:"edukisto"},opencl:{title:"OpenCL",require:"c",modify:["c","cpp"],owner:"Milania1"},openqasm:{title:"OpenQasm",alias:"qasm",owner:"RunDevelopment"},oz:{title:"Oz",owner:"Golmote"},parigp:{title:"PARI/GP",owner:"Golmote"},parser:{title:"Parser",require:"markup",owner:"Golmote"},pascal:{title:"Pascal",alias:"objectpascal",aliasTitles:{objectpascal:"Object Pascal"},owner:"Golmote"},pascaligo:{title:"Pascaligo",owner:"DefinitelyNotAGoat"},psl:{title:"PATROL Scripting Language",owner:"bertysentry"},pcaxis:{title:"PC-Axis",alias:"px",owner:"RunDevelopment"},peoplecode:{title:"PeopleCode",alias:"pcode",owner:"RunDevelopment"},perl:{title:"Perl",owner:"Golmote"},php:{title:"PHP",require:"markup-templating",owner:"milesj"},phpdoc:{title:"PHPDoc",require:["php","javadoclike"],modify:"php",owner:"RunDevelopment"},"php-extras":{title:"PHP Extras",require:"php",modify:"php",owner:"milesj"},"plant-uml":{title:"PlantUML",alias:"plantuml",owner:"RunDevelopment"},plsql:{title:"PL/SQL",require:"sql",owner:"Golmote"},powerquery:{title:"PowerQuery",alias:["pq","mscript"],owner:"peterbud"},powershell:{title:"PowerShell",owner:"nauzilus"},processing:{title:"Processing",require:"clike",owner:"Golmote"},prolog:{title:"Prolog",owner:"Golmote"},promql:{title:"PromQL",owner:"arendjr"},properties:{title:".properties",owner:"Golmote"},protobuf:{title:"Protocol Buffers",require:"clike",owner:"just-boris"},pug:{title:"Pug",require:["markup","javascript"],optional:["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],owner:"Golmote"},puppet:{title:"Puppet",owner:"Golmote"},pure:{title:"Pure",optional:["c","cpp","fortran"],owner:"Golmote"},purebasic:{title:"PureBasic",require:"clike",alias:"pbfasm",owner:"HeX0R101"},purescript:{title:"PureScript",require:"haskell",alias:"purs",owner:"sriharshachilakapati"},python:{title:"Python",alias:"py",owner:"multipetros"},qsharp:{title:"Q#",require:"clike",alias:"qs",owner:"fedonman"},q:{title:"Q (kdb+ database)",owner:"Golmote"},qml:{title:"QML",require:"javascript",owner:"RunDevelopment"},qore:{title:"Qore",require:"clike",owner:"temnroegg"},r:{title:"R",owner:"Golmote"},racket:{title:"Racket",require:"scheme",alias:"rkt",owner:"RunDevelopment"},cshtml:{title:"Razor C#",alias:"razor",require:["markup","csharp"],optional:["css","css-extras","javascript","js-extras"],owner:"RunDevelopment"},jsx:{title:"React JSX",require:["markup","javascript"],optional:["jsdoc","js-extras","js-templates"],owner:"vkbansal"},tsx:{title:"React TSX",require:["jsx","typescript"]},reason:{title:"Reason",require:"clike",owner:"Golmote"},regex:{title:"Regex",owner:"RunDevelopment"},rego:{title:"Rego",owner:"JordanSh"},renpy:{title:"Ren'py",alias:"rpy",owner:"HyuchiaDiego"},rescript:{title:"ReScript",alias:"res",owner:"vmarcosp"},rest:{title:"reST (reStructuredText)",owner:"Golmote"},rip:{title:"Rip",owner:"ravinggenius"},roboconf:{title:"Roboconf",owner:"Golmote"},robotframework:{title:"Robot Framework",alias:"robot",owner:"RunDevelopment"},ruby:{title:"Ruby",require:"clike",alias:"rb",owner:"samflores"},rust:{title:"Rust",owner:"Golmote"},sas:{title:"SAS",optional:["groovy","lua","sql"],owner:"Golmote"},sass:{title:"Sass (Sass)",require:"css",optional:"css-extras",owner:"Golmote"},scss:{title:"Sass (SCSS)",require:"css",optional:"css-extras",owner:"MoOx"},scala:{title:"Scala",require:"java",owner:"jozic"},scheme:{title:"Scheme",owner:"bacchus123"},"shell-session":{title:"Shell session",require:"bash",alias:["sh-session","shellsession"],owner:"RunDevelopment"},smali:{title:"Smali",owner:"RunDevelopment"},smalltalk:{title:"Smalltalk",owner:"Golmote"},smarty:{title:"Smarty",require:"markup-templating",optional:"php",owner:"Golmote"},sml:{title:"SML",alias:"smlnj",aliasTitles:{smlnj:"SML/NJ"},owner:"RunDevelopment"},solidity:{title:"Solidity (Ethereum)",alias:"sol",require:"clike",owner:"glachaud"},"solution-file":{title:"Solution file",alias:"sln",owner:"RunDevelopment"},soy:{title:"Soy (Closure Template)",require:"markup-templating",owner:"Golmote"},sparql:{title:"SPARQL",require:"turtle",owner:"Triply-Dev",alias:"rq"},"splunk-spl":{title:"Splunk SPL",owner:"RunDevelopment"},sqf:{title:"SQF: Status Quo Function (Arma 3)",require:"clike",owner:"RunDevelopment"},sql:{title:"SQL",owner:"multipetros"},squirrel:{title:"Squirrel",require:"clike",owner:"RunDevelopment"},stan:{title:"Stan",owner:"RunDevelopment"},stata:{title:"Stata Ado",require:["mata","java","python"],owner:"RunDevelopment"},iecst:{title:"Structured Text (IEC 61131-3)",owner:"serhioromano"},stylus:{title:"Stylus",owner:"vkbansal"},supercollider:{title:"SuperCollider",alias:"sclang",owner:"RunDevelopment"},swift:{title:"Swift",owner:"chrischares"},systemd:{title:"Systemd configuration file",owner:"RunDevelopment"},"t4-templating":{title:"T4 templating",owner:"RunDevelopment"},"t4-cs":{title:"T4 Text Templates (C#)",require:["t4-templating","csharp"],alias:"t4",owner:"RunDevelopment"},"t4-vb":{title:"T4 Text Templates (VB)",require:["t4-templating","vbnet"],owner:"RunDevelopment"},tap:{title:"TAP",owner:"isaacs",require:"yaml"},tcl:{title:"Tcl",owner:"PeterChaplin"},tt2:{title:"Template Toolkit 2",require:["clike","markup-templating"],owner:"gflohr"},textile:{title:"Textile",require:"markup",optional:"css",owner:"Golmote"},toml:{title:"TOML",owner:"RunDevelopment"},tremor:{title:"Tremor",alias:["trickle","troy"],owner:"darach",aliasTitles:{trickle:"trickle",troy:"troy"}},turtle:{title:"Turtle",alias:"trig",aliasTitles:{trig:"TriG"},owner:"jakubklimek"},twig:{title:"Twig",require:"markup-templating",owner:"brandonkelly"},typescript:{title:"TypeScript",require:"javascript",optional:"js-templates",alias:"ts",owner:"vkbansal"},typoscript:{title:"TypoScript",alias:"tsconfig",aliasTitles:{tsconfig:"TSConfig"},owner:"dkern"},unrealscript:{title:"UnrealScript",alias:["uscript","uc"],owner:"RunDevelopment"},uorazor:{title:"UO Razor Script",owner:"jaseowns"},uri:{title:"URI",alias:"url",aliasTitles:{url:"URL"},owner:"RunDevelopment"},v:{title:"V",require:"clike",owner:"taggon"},vala:{title:"Vala",require:"clike",optional:"regex",owner:"TemplarVolk"},vbnet:{title:"VB.Net",require:"basic",owner:"Bigsby"},velocity:{title:"Velocity",require:"markup",owner:"Golmote"},verilog:{title:"Verilog",owner:"a-rey"},vhdl:{title:"VHDL",owner:"a-rey"},vim:{title:"vim",owner:"westonganger"},"visual-basic":{title:"Visual Basic",alias:["vb","vba"],aliasTitles:{vba:"VBA"},owner:"Golmote"},warpscript:{title:"WarpScript",owner:"RunDevelopment"},wasm:{title:"WebAssembly",owner:"Golmote"},"web-idl":{title:"Web IDL",alias:"webidl",owner:"RunDevelopment"},wgsl:{title:"WGSL",owner:"Dr4gonthree"},wiki:{title:"Wiki markup",require:"markup",owner:"Golmote"},wolfram:{title:"Wolfram language",alias:["mathematica","nb","wl"],aliasTitles:{mathematica:"Mathematica",nb:"Mathematica Notebook"},owner:"msollami"},wren:{title:"Wren",owner:"clsource"},xeora:{title:"Xeora",require:"markup",alias:"xeoracube",aliasTitles:{xeoracube:"XeoraCube"},owner:"freakmaxi"},"xml-doc":{title:"XML doc (.net)",require:"markup",modify:["csharp","fsharp","vbnet"],owner:"RunDevelopment"},xojo:{title:"Xojo (REALbasic)",owner:"Golmote"},xquery:{title:"XQuery",require:"markup",owner:"Golmote"},yaml:{title:"YAML",alias:"yml",owner:"hason"},yang:{title:"YANG",owner:"RunDevelopment"},zig:{title:"Zig",owner:"RunDevelopment"}},plugins:{meta:{path:"plugins/{id}/prism-{id}",link:"plugins/{id}/"},"line-highlight":{title:"Line Highlight",description:"Highlights specific lines and/or line ranges."},"line-numbers":{title:"Line Numbers",description:"Line number at the beginning of code lines.",owner:"kuba-kubula"},"show-invisibles":{title:"Show Invisibles",description:"Show hidden characters such as tabs and line breaks.",optional:["autolinker","data-uri-highlight"]},autolinker:{title:"Autolinker",description:"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},wpd:{title:"WebPlatform Docs",description:'Makes tokens link to WebPlatform.org documentation . The links open in a new tab.'},"custom-class":{title:"Custom Class",description:"This plugin allows you to prefix Prism's default classes (.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},2885:(e,t,n)=>{const r=n(9901),a=n(9642),o=new Set;function i(e){void 0===e?e=Object.keys(r.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...o,...Object.keys(Prism.languages)];a(r,e,t).load((e=>{if(!(e in r.languages))return void(i.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(6500).resolve(t)],delete Prism.languages[e],n(6500)(t),o.add(e)}))}i.silent=!1,e.exports=i},6854:()=>{!function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,a,o){if(n.language===r){var i=n.tokenStack=[];n.code=n.code.replace(a,(function(e){if("function"==typeof o&&!o(e))return e;for(var a,l=i.length;-1!==n.code.indexOf(a=t(r,l));)++l;return i[l]=e,a})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var a=0,o=Object.keys(n.tokenStack);!function i(l){for(var s=0;s=o.length);s++){var c=l[s];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=o[a],d=n.tokenStack[u],p="string"==typeof c?c:c.content,f=t(r,u),h=p.indexOf(f);if(h>-1){++a;var m=p.substring(0,h),g=new e.Token(r,e.tokenize(d,n.grammar),"language-"+r,d),b=p.substring(h+f.length),y=[];m&&y.push.apply(y,i([m])),y.push(g),b&&y.push.apply(y,i([b])),"string"==typeof c?l.splice.apply(l,[s,1].concat(y)):c.content=y}}else c.content&&i(c.content)}return l}(n.tokens)}}}})}(Prism)},6726:(e,t,n)=>{var r={"./":2885};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=6726},6500:(e,t,n)=>{var r={"./":2885};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=6500},9642:e=>{"use strict";var t=function(){var e=function(){};function t(e,t){Array.isArray(e)?e.forEach(t):null!=e&&t(e,0)}function n(e){for(var t={},n=0,r=e.length;n "));var l={},s=e[r];if(s){function c(t){if(!(t in e))throw new Error(r+" depends on an unknown component "+t);if(!(t in l))for(var i in a(t,o),l[t]=!0,n[t])l[i]=!0}t(s.require,c),t(s.optional,c),t(s.modify,c)}n[r]=l,o.pop()}}return function(e){var t=n[e];return t||(a(e,r),t=n[e]),t}}function a(e){for(var t in e)return!0;return!1}return function(o,i,l){var s=function(e){var t={};for(var n in e){var r=e[n];for(var a in r)if("meta"!=a){var o=r[a];t[a]="string"==typeof o?{title:o}:o}}return t}(o),c=function(e){var n;return function(r){if(r in e)return r;if(!n)for(var a in n={},e){var o=e[a];t(o&&o.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+a+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+a+" because it is a component.");n[t]=a}))}return n[r]||r}}(s);i=i.map(c),l=(l||[]).map(c);var u=n(i),d=n(l);i.forEach((function e(n){var r=s[n];t(r&&r.require,(function(t){t in d||(u[t]=!0,e(t))}))}));for(var p,f=r(s),h=u;a(h);){for(var m in p={},h){var g=s[m];t(g&&g.modify,(function(e){e in d&&(p[e]=!0)}))}for(var b in d)if(!(b in u))for(var y in f(b))if(y in u){p[b]=!0;break}for(var v in h=p)u[v]=!0}var w={getIds:function(){var e=[];return w.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,r,a){var o=a?a.series:void 0,i=a?a.parallel:e,l={},s={};function c(e){if(e in l)return l[e];s[e]=!0;var a,u=[];for(var d in t(e))d in n&&u.push(d);if(0===u.length)a=r(e);else{var p=i(u.map((function(e){var t=c(e);return delete s[e],t})));o?a=o(p,(function(){return r(e)})):r(e)}return l[e]=a}for(var u in n)c(u);var d=[];for(var p in s)d.push(l[p]);return i(d)}(f,u,t,n)}};return w}}();e.exports=t},2703:(e,t,n)=>{"use strict";var r=n(414);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,o,i){if(i!==r){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:a};return n.PropTypes=n,n}},5697:(e,t,n)=>{e.exports=n(2703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},4448:(e,t,n)=>{"use strict";var r=n(7294),a=n(3840);function o(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;nt}return!1}(t,n,a,r)&&(n=null),r||null===a?function(e){return!!d.call(h,e)||!d.call(f,e)&&(p.test(e)?h[e]=!0:(f[e]=!0,!1))}(t)&&(null===n?e.removeAttribute(t):e.setAttribute(t,""+n)):a.mustUseProperty?e[a.propertyName]=null===n?3!==a.type&&"":n:(t=a.attributeName,r=a.attributeNamespace,null===n?e.removeAttribute(t):(n=3===(a=a.type)||4===a&&!0===n?"":""+n,r?e.setAttributeNS(r,t,n):e.setAttribute(t,n))))}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach((function(e){var t=e.replace(b,y);g[t]=new m(t,1,!1,e,null,!1,!1)})),"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach((function(e){var t=e.replace(b,y);g[t]=new m(t,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)})),["xml:base","xml:lang","xml:space"].forEach((function(e){var t=e.replace(b,y);g[t]=new m(t,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1,!1)})),["tabIndex","crossOrigin"].forEach((function(e){g[e]=new m(e,1,!1,e.toLowerCase(),null,!1,!1)})),g.xlinkHref=new m("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1),["src","href","action","formAction"].forEach((function(e){g[e]=new m(e,1,!1,e.toLowerCase(),null,!0,!0)}));var w=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,k=Symbol.for("react.element"),x=Symbol.for("react.portal"),S=Symbol.for("react.fragment"),C=Symbol.for("react.strict_mode"),T=Symbol.for("react.profiler"),E=Symbol.for("react.provider"),_=Symbol.for("react.context"),A=Symbol.for("react.forward_ref"),P=Symbol.for("react.suspense"),L=Symbol.for("react.suspense_list"),j=Symbol.for("react.memo"),R=Symbol.for("react.lazy");Symbol.for("react.scope"),Symbol.for("react.debug_trace_mode");var N=Symbol.for("react.offscreen");Symbol.for("react.legacy_hidden"),Symbol.for("react.cache"),Symbol.for("react.tracing_marker");var O=Symbol.iterator;function D(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=O&&e[O]||e["@@iterator"])?e:null}var I,M=Object.assign;function F(e){if(void 0===I)try{throw Error()}catch(n){var t=n.stack.trim().match(/\n( *(at )?)/);I=t&&t[1]||""}return"\n"+I+e}var B=!1;function z(e,t){if(!e||B)return"";B=!0;var n=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(t)if(t=function(){throw Error()},Object.defineProperty(t.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(t,[])}catch(c){var r=c}Reflect.construct(e,[],t)}else{try{t.call()}catch(c){r=c}e.call(t.prototype)}else{try{throw Error()}catch(c){r=c}e()}}catch(c){if(c&&r&&"string"==typeof c.stack){for(var a=c.stack.split("\n"),o=r.stack.split("\n"),i=a.length-1,l=o.length-1;1<=i&&0<=l&&a[i]!==o[l];)l--;for(;1<=i&&0<=l;i--,l--)if(a[i]!==o[l]){if(1!==i||1!==l)do{if(i--,0>--l||a[i]!==o[l]){var s="\n"+a[i].replace(" at new "," at ");return e.displayName&&s.includes("")&&(s=s.replace("",e.displayName)),s}}while(1<=i&&0<=l);break}}}finally{B=!1,Error.prepareStackTrace=n}return(e=e?e.displayName||e.name:"")?F(e):""}function U(e){switch(e.tag){case 5:return F(e.type);case 16:return F("Lazy");case 13:return F("Suspense");case 19:return F("SuspenseList");case 0:case 2:case 15:return e=z(e.type,!1);case 11:return e=z(e.type.render,!1);case 1:return e=z(e.type,!0);default:return""}}function $(e){if(null==e)return null;if("function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case S:return"Fragment";case x:return"Portal";case T:return"Profiler";case C:return"StrictMode";case P:return"Suspense";case L:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case _:return(e.displayName||"Context")+".Consumer";case E:return(e._context.displayName||"Context")+".Provider";case A:var t=e.render;return(e=e.displayName)||(e=""!==(e=t.displayName||t.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case j:return null!==(t=e.displayName||null)?t:$(e.type)||"Memo";case R:t=e._payload,e=e._init;try{return $(e(t))}catch(n){}}return null}function H(e){var t=e.type;switch(e.tag){case 24:return"Cache";case 9:return(t.displayName||"Context")+".Consumer";case 10:return(t._context.displayName||"Context")+".Provider";case 18:return"DehydratedFragment";case 11:return e=(e=t.render).displayName||e.name||"",t.displayName||(""!==e?"ForwardRef("+e+")":"ForwardRef");case 7:return"Fragment";case 5:return t;case 4:return"Portal";case 3:return"Root";case 6:return"Text";case 16:return $(t);case 8:return t===C?"StrictMode":"Mode";case 22:return"Offscreen";case 12:return"Profiler";case 21:return"Scope";case 13:return"Suspense";case 19:return"SuspenseList";case 25:return"TracingMarker";case 1:case 0:case 17:case 2:case 14:case 15:if("function"==typeof t)return t.displayName||t.name||null;if("string"==typeof t)return t}return null}function q(e){switch(typeof e){case"boolean":case"number":case"string":case"undefined":case"object":return e;default:return""}}function Z(e){var t=e.type;return(e=e.nodeName)&&"input"===e.toLowerCase()&&("checkbox"===t||"radio"===t)}function G(e){e._valueTracker||(e._valueTracker=function(e){var t=Z(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),r=""+e[t];if(!e.hasOwnProperty(t)&&void 0!==n&&"function"==typeof n.get&&"function"==typeof n.set){var a=n.get,o=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return a.call(this)},set:function(e){r=""+e,o.call(this,e)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return r},setValue:function(e){r=""+e},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}(e))}function V(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r="";return e&&(r=Z(e)?e.checked?"true":"false":e.value),(e=r)!==n&&(t.setValue(e),!0)}function W(e){if(void 0===(e=e||("undefined"!=typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(t){return e.body}}function K(e,t){var n=t.checked;return M({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=n?n:e._wrapperState.initialChecked})}function Q(e,t){var n=null==t.defaultValue?"":t.defaultValue,r=null!=t.checked?t.checked:t.defaultChecked;n=q(null!=t.value?t.value:n),e._wrapperState={initialChecked:r,initialValue:n,controlled:"checkbox"===t.type||"radio"===t.type?null!=t.checked:null!=t.value}}function Y(e,t){null!=(t=t.checked)&&v(e,"checked",t,!1)}function X(e,t){Y(e,t);var n=q(t.value),r=t.type;if(null!=n)"number"===r?(0===n&&""===e.value||e.value!=n)&&(e.value=""+n):e.value!==""+n&&(e.value=""+n);else if("submit"===r||"reset"===r)return void e.removeAttribute("value");t.hasOwnProperty("value")?ee(e,t.type,n):t.hasOwnProperty("defaultValue")&&ee(e,t.type,q(t.defaultValue)),null==t.checked&&null!=t.defaultChecked&&(e.defaultChecked=!!t.defaultChecked)}function J(e,t,n){if(t.hasOwnProperty("value")||t.hasOwnProperty("defaultValue")){var r=t.type;if(!("submit"!==r&&"reset"!==r||void 0!==t.value&&null!==t.value))return;t=""+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}""!==(n=e.name)&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,""!==n&&(e.name=n)}function ee(e,t,n){"number"===t&&W(e.ownerDocument)===e||(null==n?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+n&&(e.defaultValue=""+n))}var te=Array.isArray;function ne(e,t,n,r){if(e=e.options,t){t={};for(var a=0;a"+t.valueOf().toString()+" ",t=ce.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}},"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(e,t,n,r){MSApp.execUnsafeLocalFunction((function(){return ue(e,t)}))}:ue);function pe(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t}var fe={animationIterationCount:!0,aspectRatio:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},he=["Webkit","ms","Moz","O"];function me(e,t,n){return null==t||"boolean"==typeof t||""===t?"":n||"number"!=typeof t||0===t||fe.hasOwnProperty(e)&&fe[e]?(""+t).trim():t+"px"}function ge(e,t){for(var n in e=e.style,t)if(t.hasOwnProperty(n)){var r=0===n.indexOf("--"),a=me(n,t[n],r);"float"===n&&(n="cssFloat"),r?e.setProperty(n,a):e[n]=a}}Object.keys(fe).forEach((function(e){he.forEach((function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),fe[t]=fe[e]}))}));var be=M({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});function ye(e,t){if(t){if(be[e]&&(null!=t.children||null!=t.dangerouslySetInnerHTML))throw Error(o(137,e));if(null!=t.dangerouslySetInnerHTML){if(null!=t.children)throw Error(o(60));if("object"!=typeof t.dangerouslySetInnerHTML||!("__html"in t.dangerouslySetInnerHTML))throw Error(o(61))}if(null!=t.style&&"object"!=typeof t.style)throw Error(o(62))}}function ve(e,t){if(-1===e.indexOf("-"))return"string"==typeof t.is;switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}var we=null;function ke(e){return(e=e.target||e.srcElement||window).correspondingUseElement&&(e=e.correspondingUseElement),3===e.nodeType?e.parentNode:e}var xe=null,Se=null,Ce=null;function Te(e){if(e=va(e)){if("function"!=typeof xe)throw Error(o(280));var t=e.stateNode;t&&(t=ka(t),xe(e.stateNode,e.type,t))}}function Ee(e){Se?Ce?Ce.push(e):Ce=[e]:Se=e}function _e(){if(Se){var e=Se,t=Ce;if(Ce=Se=null,Te(e),t)for(e=0;e>>=0,0===e?32:31-(lt(e)/st|0)|0},lt=Math.log,st=Math.LN2;var ct=64,ut=4194304;function dt(e){switch(e&-e){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return 4194240&e;case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:return 130023424&e;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 1073741824;default:return e}}function pt(e,t){var n=e.pendingLanes;if(0===n)return 0;var r=0,a=e.suspendedLanes,o=e.pingedLanes,i=268435455&n;if(0!==i){var l=i&~a;0!==l?r=dt(l):0!==(o&=i)&&(r=dt(o))}else 0!==(i=n&~a)?r=dt(i):0!==o&&(r=dt(o));if(0===r)return 0;if(0!==t&&t!==r&&0==(t&a)&&((a=r&-r)>=(o=t&-t)||16===a&&0!=(4194240&o)))return t;if(0!=(4&r)&&(r|=16&n),0!==(t=e.entangledLanes))for(e=e.entanglements,t&=r;0n;n++)t.push(e);return t}function bt(e,t,n){e.pendingLanes|=t,536870912!==t&&(e.suspendedLanes=0,e.pingedLanes=0),(e=e.eventTimes)[t=31-it(t)]=n}function yt(e,t){var n=e.entangledLanes|=t;for(e=e.entanglements;n;){var r=31-it(n),a=1<=Dn),Fn=String.fromCharCode(32),Bn=!1;function zn(e,t){switch(e){case"keyup":return-1!==Nn.indexOf(t.keyCode);case"keydown":return 229!==t.keyCode;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function Un(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var $n=!1;var Hn={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function qn(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!Hn[e.type]:"textarea"===t}function Zn(e,t,n,r){Ee(r),0<(t=Gr(t,"onChange")).length&&(n=new un("onChange","change",null,n,r),e.push({event:n,listeners:t}))}var Gn=null,Vn=null;function Wn(e){Fr(e,0)}function Kn(e){if(V(wa(e)))return e}function Qn(e,t){if("change"===e)return t}var Yn=!1;if(u){var Xn;if(u){var Jn="oninput"in document;if(!Jn){var er=document.createElement("div");er.setAttribute("oninput","return;"),Jn="function"==typeof er.oninput}Xn=Jn}else Xn=!1;Yn=Xn&&(!document.documentMode||9=t)return{node:r,offset:t-e};e=n}e:{for(;r;){if(r.nextSibling){r=r.nextSibling;break e}r=r.parentNode}r=void 0}r=cr(r)}}function dr(e,t){return!(!e||!t)&&(e===t||(!e||3!==e.nodeType)&&(t&&3===t.nodeType?dr(e,t.parentNode):"contains"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}function pr(){for(var e=window,t=W();t instanceof e.HTMLIFrameElement;){try{var n="string"==typeof t.contentWindow.location.href}catch(r){n=!1}if(!n)break;t=W((e=t.contentWindow).document)}return t}function fr(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&("text"===e.type||"search"===e.type||"tel"===e.type||"url"===e.type||"password"===e.type)||"textarea"===t||"true"===e.contentEditable)}function hr(e){var t=pr(),n=e.focusedElem,r=e.selectionRange;if(t!==n&&n&&n.ownerDocument&&dr(n.ownerDocument.documentElement,n)){if(null!==r&&fr(n))if(t=r.start,void 0===(e=r.end)&&(e=t),"selectionStart"in n)n.selectionStart=t,n.selectionEnd=Math.min(e,n.value.length);else if((e=(t=n.ownerDocument||document)&&t.defaultView||window).getSelection){e=e.getSelection();var a=n.textContent.length,o=Math.min(r.start,a);r=void 0===r.end?o:Math.min(r.end,a),!e.extend&&o>r&&(a=r,r=o,o=a),a=ur(n,o);var i=ur(n,r);a&&i&&(1!==e.rangeCount||e.anchorNode!==a.node||e.anchorOffset!==a.offset||e.focusNode!==i.node||e.focusOffset!==i.offset)&&((t=t.createRange()).setStart(a.node,a.offset),e.removeAllRanges(),o>r?(e.addRange(t),e.extend(i.node,i.offset)):(t.setEnd(i.node,i.offset),e.addRange(t)))}for(t=[],e=n;e=e.parentNode;)1===e.nodeType&&t.push({element:e,left:e.scrollLeft,top:e.scrollTop});for("function"==typeof n.focus&&n.focus(),n=0;n=document.documentMode,gr=null,br=null,yr=null,vr=!1;function wr(e,t,n){var r=n.window===n?n.document:9===n.nodeType?n:n.ownerDocument;vr||null==gr||gr!==W(r)||("selectionStart"in(r=gr)&&fr(r)?r={start:r.selectionStart,end:r.selectionEnd}:r={anchorNode:(r=(r.ownerDocument&&r.ownerDocument.defaultView||window).getSelection()).anchorNode,anchorOffset:r.anchorOffset,focusNode:r.focusNode,focusOffset:r.focusOffset},yr&&sr(yr,r)||(yr=r,0<(r=Gr(br,"onSelect")).length&&(t=new un("onSelect","select",null,t,n),e.push({event:t,listeners:r}),t.target=gr)))}function kr(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n}var xr={animationend:kr("Animation","AnimationEnd"),animationiteration:kr("Animation","AnimationIteration"),animationstart:kr("Animation","AnimationStart"),transitionend:kr("Transition","TransitionEnd")},Sr={},Cr={};function Tr(e){if(Sr[e])return Sr[e];if(!xr[e])return e;var t,n=xr[e];for(t in n)if(n.hasOwnProperty(t)&&t in Cr)return Sr[e]=n[t];return e}u&&(Cr=document.createElement("div").style,"AnimationEvent"in window||(delete xr.animationend.animation,delete xr.animationiteration.animation,delete xr.animationstart.animation),"TransitionEvent"in window||delete xr.transitionend.transition);var Er=Tr("animationend"),_r=Tr("animationiteration"),Ar=Tr("animationstart"),Pr=Tr("transitionend"),Lr=new Map,jr="abort auxClick cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking stalled submit suspend timeUpdate touchCancel touchEnd touchStart volumeChange scroll toggle touchMove waiting wheel".split(" ");function Rr(e,t){Lr.set(e,t),s(t,[e])}for(var Nr=0;NrSa||(e.current=xa[Sa],xa[Sa]=null,Sa--)}function Ea(e,t){Sa++,xa[Sa]=e.current,e.current=t}var _a={},Aa=Ca(_a),Pa=Ca(!1),La=_a;function ja(e,t){var n=e.type.contextTypes;if(!n)return _a;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var a,o={};for(a in n)o[a]=t[a];return r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=o),o}function Ra(e){return null!=(e=e.childContextTypes)}function Na(){Ta(Pa),Ta(Aa)}function Oa(e,t,n){if(Aa.current!==_a)throw Error(o(168));Ea(Aa,t),Ea(Pa,n)}function Da(e,t,n){var r=e.stateNode;if(t=t.childContextTypes,"function"!=typeof r.getChildContext)return n;for(var a in r=r.getChildContext())if(!(a in t))throw Error(o(108,H(e)||"Unknown",a));return M({},n,r)}function Ia(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||_a,La=Aa.current,Ea(Aa,e),Ea(Pa,Pa.current),!0}function Ma(e,t,n){var r=e.stateNode;if(!r)throw Error(o(169));n?(e=Da(e,t,La),r.__reactInternalMemoizedMergedChildContext=e,Ta(Pa),Ta(Aa),Ea(Aa,e)):Ta(Pa),Ea(Pa,n)}var Fa=null,Ba=!1,za=!1;function Ua(e){null===Fa?Fa=[e]:Fa.push(e)}function $a(){if(!za&&null!==Fa){za=!0;var e=0,t=vt;try{var n=Fa;for(vt=1;e>=i,a-=i,Qa=1<<32-it(t)+a|n<m?(g=d,d=null):g=d.sibling;var b=f(a,d,l[m],s);if(null===b){null===d&&(d=g);break}e&&d&&null===b.alternate&&t(a,d),o=i(b,o,m),null===u?c=b:u.sibling=b,u=b,d=g}if(m===l.length)return n(a,d),ao&&Xa(a,m),c;if(null===d){for(;mg?(b=m,m=null):b=m.sibling;var v=f(a,m,y.value,c);if(null===v){null===m&&(m=b);break}e&&m&&null===v.alternate&&t(a,m),l=i(v,l,g),null===d?u=v:d.sibling=v,d=v,m=b}if(y.done)return n(a,m),ao&&Xa(a,g),u;if(null===m){for(;!y.done;g++,y=s.next())null!==(y=p(a,y.value,c))&&(l=i(y,l,g),null===d?u=y:d.sibling=y,d=y);return ao&&Xa(a,g),u}for(m=r(a,m);!y.done;g++,y=s.next())null!==(y=h(m,a,g,y.value,c))&&(e&&null!==y.alternate&&m.delete(null===y.key?g:y.key),l=i(y,l,g),null===d?u=y:d.sibling=y,d=y);return e&&m.forEach((function(e){return t(a,e)})),ao&&Xa(a,g),u}return function e(r,o,i,s){if("object"==typeof i&&null!==i&&i.type===S&&null===i.key&&(i=i.props.children),"object"==typeof i&&null!==i){switch(i.$$typeof){case k:e:{for(var c=i.key,u=o;null!==u;){if(u.key===c){if((c=i.type)===S){if(7===u.tag){n(r,u.sibling),(o=a(u,i.props.children)).return=r,r=o;break e}}else if(u.elementType===c||"object"==typeof c&&null!==c&&c.$$typeof===R&&Ko(c)===u.type){n(r,u.sibling),(o=a(u,i.props)).ref=Vo(r,u,i),o.return=r,r=o;break e}n(r,u);break}t(r,u),u=u.sibling}i.type===S?((o=Ic(i.props.children,r.mode,s,i.key)).return=r,r=o):((s=Dc(i.type,i.key,i.props,null,r.mode,s)).ref=Vo(r,o,i),s.return=r,r=s)}return l(r);case x:e:{for(u=i.key;null!==o;){if(o.key===u){if(4===o.tag&&o.stateNode.containerInfo===i.containerInfo&&o.stateNode.implementation===i.implementation){n(r,o.sibling),(o=a(o,i.children||[])).return=r,r=o;break e}n(r,o);break}t(r,o),o=o.sibling}(o=Bc(i,r.mode,s)).return=r,r=o}return l(r);case R:return e(r,o,(u=i._init)(i._payload),s)}if(te(i))return m(r,o,i,s);if(D(i))return g(r,o,i,s);Wo(r,i)}return"string"==typeof i&&""!==i||"number"==typeof i?(i=""+i,null!==o&&6===o.tag?(n(r,o.sibling),(o=a(o,i)).return=r,r=o):(n(r,o),(o=Fc(i,r.mode,s)).return=r,r=o),l(r)):n(r,o)}}var Yo=Qo(!0),Xo=Qo(!1),Jo={},ei=Ca(Jo),ti=Ca(Jo),ni=Ca(Jo);function ri(e){if(e===Jo)throw Error(o(174));return e}function ai(e,t){switch(Ea(ni,t),Ea(ti,e),Ea(ei,Jo),e=t.nodeType){case 9:case 11:t=(t=t.documentElement)?t.namespaceURI:se(null,"");break;default:t=se(t=(e=8===e?t.parentNode:t).namespaceURI||null,e=e.tagName)}Ta(ei),Ea(ei,t)}function oi(){Ta(ei),Ta(ti),Ta(ni)}function ii(e){ri(ni.current);var t=ri(ei.current),n=se(t,e.type);t!==n&&(Ea(ti,e),Ea(ei,n))}function li(e){ti.current===e&&(Ta(ei),Ta(ti))}var si=Ca(0);function ci(e){for(var t=e;null!==t;){if(13===t.tag){var n=t.memoizedState;if(null!==n&&(null===(n=n.dehydrated)||"$?"===n.data||"$!"===n.data))return t}else if(19===t.tag&&void 0!==t.memoizedProps.revealOrder){if(0!=(128&t.flags))return t}else if(null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}return null}var ui=[];function di(){for(var e=0;en?n:4,e(!0);var r=fi.transition;fi.transition={};try{e(!1),t()}finally{vt=n,fi.transition=r}}function el(){return _i().memoizedState}function tl(e,t,n){var r=nc(e);if(n={lane:r,action:n,hasEagerState:!1,eagerState:null,next:null},rl(e))al(t,n);else if(null!==(n=Po(e,t,n,r))){rc(n,e,r,tc()),ol(n,t,r)}}function nl(e,t,n){var r=nc(e),a={lane:r,action:n,hasEagerState:!1,eagerState:null,next:null};if(rl(e))al(t,a);else{var o=e.alternate;if(0===e.lanes&&(null===o||0===o.lanes)&&null!==(o=t.lastRenderedReducer))try{var i=t.lastRenderedState,l=o(i,n);if(a.hasEagerState=!0,a.eagerState=l,lr(l,i)){var s=t.interleaved;return null===s?(a.next=a,Ao(t)):(a.next=s.next,s.next=a),void(t.interleaved=a)}}catch(c){}null!==(n=Po(e,t,a,r))&&(rc(n,e,r,a=tc()),ol(n,t,r))}}function rl(e){var t=e.alternate;return e===mi||null!==t&&t===mi}function al(e,t){vi=yi=!0;var n=e.pending;null===n?t.next=t:(t.next=n.next,n.next=t),e.pending=t}function ol(e,t,n){if(0!=(4194240&n)){var r=t.lanes;n|=r&=e.pendingLanes,t.lanes=n,yt(e,n)}}var il={readContext:Eo,useCallback:xi,useContext:xi,useEffect:xi,useImperativeHandle:xi,useInsertionEffect:xi,useLayoutEffect:xi,useMemo:xi,useReducer:xi,useRef:xi,useState:xi,useDebugValue:xi,useDeferredValue:xi,useTransition:xi,useMutableSource:xi,useSyncExternalStore:xi,useId:xi,unstable_isNewReconciler:!1},ll={readContext:Eo,useCallback:function(e,t){return Ei().memoizedState=[e,void 0===t?null:t],e},useContext:Eo,useEffect:Hi,useImperativeHandle:function(e,t,n){return n=null!=n?n.concat([e]):null,Ui(4194308,4,Vi.bind(null,t,e),n)},useLayoutEffect:function(e,t){return Ui(4194308,4,e,t)},useInsertionEffect:function(e,t){return Ui(4,2,e,t)},useMemo:function(e,t){var n=Ei();return t=void 0===t?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var r=Ei();return t=void 0!==n?n(t):t,r.memoizedState=r.baseState=t,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:e,lastRenderedState:t},r.queue=e,e=e.dispatch=tl.bind(null,mi,e),[r.memoizedState,e]},useRef:function(e){return e={current:e},Ei().memoizedState=e},useState:Fi,useDebugValue:Ki,useDeferredValue:function(e){return Ei().memoizedState=e},useTransition:function(){var e=Fi(!1),t=e[0];return e=Ji.bind(null,e[1]),Ei().memoizedState=e,[t,e]},useMutableSource:function(){},useSyncExternalStore:function(e,t,n){var r=mi,a=Ei();if(ao){if(void 0===n)throw Error(o(407));n=n()}else{if(n=t(),null===Ls)throw Error(o(349));0!=(30&hi)||Ni(r,t,n)}a.memoizedState=n;var i={value:n,getSnapshot:t};return a.queue=i,Hi(Di.bind(null,r,i,e),[e]),r.flags|=2048,Bi(9,Oi.bind(null,r,i,n,t),void 0,null),n},useId:function(){var e=Ei(),t=Ls.identifierPrefix;if(ao){var n=Ya;t=":"+t+"R"+(n=(Qa&~(1<<32-it(Qa)-1)).toString(32)+n),0<(n=wi++)&&(t+="H"+n.toString(32)),t+=":"}else t=":"+t+"r"+(n=ki++).toString(32)+":";return e.memoizedState=t},unstable_isNewReconciler:!1},sl={readContext:Eo,useCallback:Qi,useContext:Eo,useEffect:qi,useImperativeHandle:Wi,useInsertionEffect:Zi,useLayoutEffect:Gi,useMemo:Yi,useReducer:Pi,useRef:zi,useState:function(){return Pi(Ai)},useDebugValue:Ki,useDeferredValue:function(e){return Xi(_i(),gi.memoizedState,e)},useTransition:function(){return[Pi(Ai)[0],_i().memoizedState]},useMutableSource:ji,useSyncExternalStore:Ri,useId:el,unstable_isNewReconciler:!1},cl={readContext:Eo,useCallback:Qi,useContext:Eo,useEffect:qi,useImperativeHandle:Wi,useInsertionEffect:Zi,useLayoutEffect:Gi,useMemo:Yi,useReducer:Li,useRef:zi,useState:function(){return Li(Ai)},useDebugValue:Ki,useDeferredValue:function(e){var t=_i();return null===gi?t.memoizedState=e:Xi(t,gi.memoizedState,e)},useTransition:function(){return[Li(Ai)[0],_i().memoizedState]},useMutableSource:ji,useSyncExternalStore:Ri,useId:el,unstable_isNewReconciler:!1};function ul(e,t){try{var n="",r=t;do{n+=U(r),r=r.return}while(r);var a=n}catch(o){a="\nError generating stack: "+o.message+"\n"+o.stack}return{value:e,source:t,stack:a,digest:null}}function dl(e,t,n){return{value:e,source:null,stack:null!=n?n:null,digest:null!=t?t:null}}function pl(e,t){try{console.error(t.value)}catch(n){setTimeout((function(){throw n}))}}var fl="function"==typeof WeakMap?WeakMap:Map;function hl(e,t,n){(n=Oo(-1,n)).tag=3,n.payload={element:null};var r=t.value;return n.callback=function(){Zs||(Zs=!0,Gs=r),pl(0,t)},n}function ml(e,t,n){(n=Oo(-1,n)).tag=3;var r=e.type.getDerivedStateFromError;if("function"==typeof r){var a=t.value;n.payload=function(){return r(a)},n.callback=function(){pl(0,t)}}var o=e.stateNode;return null!==o&&"function"==typeof o.componentDidCatch&&(n.callback=function(){pl(0,t),"function"!=typeof r&&(null===Vs?Vs=new Set([this]):Vs.add(this));var e=t.stack;this.componentDidCatch(t.value,{componentStack:null!==e?e:""})}),n}function gl(e,t,n){var r=e.pingCache;if(null===r){r=e.pingCache=new fl;var a=new Set;r.set(t,a)}else void 0===(a=r.get(t))&&(a=new Set,r.set(t,a));a.has(n)||(a.add(n),e=Ec.bind(null,e,t,n),t.then(e,e))}function bl(e){do{var t;if((t=13===e.tag)&&(t=null===(t=e.memoizedState)||null!==t.dehydrated),t)return e;e=e.return}while(null!==e);return null}function yl(e,t,n,r,a){return 0==(1&e.mode)?(e===t?e.flags|=65536:(e.flags|=128,n.flags|=131072,n.flags&=-52805,1===n.tag&&(null===n.alternate?n.tag=17:((t=Oo(-1,1)).tag=2,Do(n,t,1))),n.lanes|=1),e):(e.flags|=65536,e.lanes=a,e)}var vl=w.ReactCurrentOwner,wl=!1;function kl(e,t,n,r){t.child=null===e?Xo(t,null,n,r):Yo(t,e.child,n,r)}function xl(e,t,n,r,a){n=n.render;var o=t.ref;return To(t,a),r=Ci(e,t,n,r,o,a),n=Ti(),null===e||wl?(ao&&n&&eo(t),t.flags|=1,kl(e,t,r,a),t.child):(t.updateQueue=e.updateQueue,t.flags&=-2053,e.lanes&=~a,Zl(e,t,a))}function Sl(e,t,n,r,a){if(null===e){var o=n.type;return"function"!=typeof o||Nc(o)||void 0!==o.defaultProps||null!==n.compare||void 0!==n.defaultProps?((e=Dc(n.type,null,r,t,t.mode,a)).ref=t.ref,e.return=t,t.child=e):(t.tag=15,t.type=o,Cl(e,t,o,r,a))}if(o=e.child,0==(e.lanes&a)){var i=o.memoizedProps;if((n=null!==(n=n.compare)?n:sr)(i,r)&&e.ref===t.ref)return Zl(e,t,a)}return t.flags|=1,(e=Oc(o,r)).ref=t.ref,e.return=t,t.child=e}function Cl(e,t,n,r,a){if(null!==e){var o=e.memoizedProps;if(sr(o,r)&&e.ref===t.ref){if(wl=!1,t.pendingProps=r=o,0==(e.lanes&a))return t.lanes=e.lanes,Zl(e,t,a);0!=(131072&e.flags)&&(wl=!0)}}return _l(e,t,n,r,a)}function Tl(e,t,n){var r=t.pendingProps,a=r.children,o=null!==e?e.memoizedState:null;if("hidden"===r.mode)if(0==(1&t.mode))t.memoizedState={baseLanes:0,cachePool:null,transitions:null},Ea(Os,Ns),Ns|=n;else{if(0==(1073741824&n))return e=null!==o?o.baseLanes|n:n,t.lanes=t.childLanes=1073741824,t.memoizedState={baseLanes:e,cachePool:null,transitions:null},t.updateQueue=null,Ea(Os,Ns),Ns|=e,null;t.memoizedState={baseLanes:0,cachePool:null,transitions:null},r=null!==o?o.baseLanes:n,Ea(Os,Ns),Ns|=r}else null!==o?(r=o.baseLanes|n,t.memoizedState=null):r=n,Ea(Os,Ns),Ns|=r;return kl(e,t,a,n),t.child}function El(e,t){var n=t.ref;(null===e&&null!==n||null!==e&&e.ref!==n)&&(t.flags|=512,t.flags|=2097152)}function _l(e,t,n,r,a){var o=Ra(n)?La:Aa.current;return o=ja(t,o),To(t,a),n=Ci(e,t,n,r,o,a),r=Ti(),null===e||wl?(ao&&r&&eo(t),t.flags|=1,kl(e,t,n,a),t.child):(t.updateQueue=e.updateQueue,t.flags&=-2053,e.lanes&=~a,Zl(e,t,a))}function Al(e,t,n,r,a){if(Ra(n)){var o=!0;Ia(t)}else o=!1;if(To(t,a),null===t.stateNode)ql(e,t),qo(t,n,r),Go(t,n,r,a),r=!0;else if(null===e){var i=t.stateNode,l=t.memoizedProps;i.props=l;var s=i.context,c=n.contextType;"object"==typeof c&&null!==c?c=Eo(c):c=ja(t,c=Ra(n)?La:Aa.current);var u=n.getDerivedStateFromProps,d="function"==typeof u||"function"==typeof i.getSnapshotBeforeUpdate;d||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(l!==r||s!==c)&&Zo(t,i,r,c),jo=!1;var p=t.memoizedState;i.state=p,Fo(t,r,i,a),s=t.memoizedState,l!==r||p!==s||Pa.current||jo?("function"==typeof u&&(Uo(t,n,u,r),s=t.memoizedState),(l=jo||Ho(t,n,l,r,p,s,c))?(d||"function"!=typeof i.UNSAFE_componentWillMount&&"function"!=typeof i.componentWillMount||("function"==typeof i.componentWillMount&&i.componentWillMount(),"function"==typeof i.UNSAFE_componentWillMount&&i.UNSAFE_componentWillMount()),"function"==typeof i.componentDidMount&&(t.flags|=4194308)):("function"==typeof i.componentDidMount&&(t.flags|=4194308),t.memoizedProps=r,t.memoizedState=s),i.props=r,i.state=s,i.context=c,r=l):("function"==typeof i.componentDidMount&&(t.flags|=4194308),r=!1)}else{i=t.stateNode,No(e,t),l=t.memoizedProps,c=t.type===t.elementType?l:bo(t.type,l),i.props=c,d=t.pendingProps,p=i.context,"object"==typeof(s=n.contextType)&&null!==s?s=Eo(s):s=ja(t,s=Ra(n)?La:Aa.current);var f=n.getDerivedStateFromProps;(u="function"==typeof f||"function"==typeof i.getSnapshotBeforeUpdate)||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(l!==d||p!==s)&&Zo(t,i,r,s),jo=!1,p=t.memoizedState,i.state=p,Fo(t,r,i,a);var h=t.memoizedState;l!==d||p!==h||Pa.current||jo?("function"==typeof f&&(Uo(t,n,f,r),h=t.memoizedState),(c=jo||Ho(t,n,c,r,p,h,s)||!1)?(u||"function"!=typeof i.UNSAFE_componentWillUpdate&&"function"!=typeof i.componentWillUpdate||("function"==typeof i.componentWillUpdate&&i.componentWillUpdate(r,h,s),"function"==typeof i.UNSAFE_componentWillUpdate&&i.UNSAFE_componentWillUpdate(r,h,s)),"function"==typeof i.componentDidUpdate&&(t.flags|=4),"function"==typeof i.getSnapshotBeforeUpdate&&(t.flags|=1024)):("function"!=typeof i.componentDidUpdate||l===e.memoizedProps&&p===e.memoizedState||(t.flags|=4),"function"!=typeof i.getSnapshotBeforeUpdate||l===e.memoizedProps&&p===e.memoizedState||(t.flags|=1024),t.memoizedProps=r,t.memoizedState=h),i.props=r,i.state=h,i.context=s,r=c):("function"!=typeof i.componentDidUpdate||l===e.memoizedProps&&p===e.memoizedState||(t.flags|=4),"function"!=typeof i.getSnapshotBeforeUpdate||l===e.memoizedProps&&p===e.memoizedState||(t.flags|=1024),r=!1)}return Pl(e,t,n,r,o,a)}function Pl(e,t,n,r,a,o){El(e,t);var i=0!=(128&t.flags);if(!r&&!i)return a&&Ma(t,n,!1),Zl(e,t,o);r=t.stateNode,vl.current=t;var l=i&&"function"!=typeof n.getDerivedStateFromError?null:r.render();return t.flags|=1,null!==e&&i?(t.child=Yo(t,e.child,null,o),t.child=Yo(t,null,l,o)):kl(e,t,l,o),t.memoizedState=r.state,a&&Ma(t,n,!0),t.child}function Ll(e){var t=e.stateNode;t.pendingContext?Oa(0,t.pendingContext,t.pendingContext!==t.context):t.context&&Oa(0,t.context,!1),ai(e,t.containerInfo)}function jl(e,t,n,r,a){return ho(),mo(a),t.flags|=256,kl(e,t,n,r),t.child}var Rl,Nl,Ol,Dl,Il={dehydrated:null,treeContext:null,retryLane:0};function Ml(e){return{baseLanes:e,cachePool:null,transitions:null}}function Fl(e,t,n){var r,a=t.pendingProps,i=si.current,l=!1,s=0!=(128&t.flags);if((r=s)||(r=(null===e||null!==e.memoizedState)&&0!=(2&i)),r?(l=!0,t.flags&=-129):null!==e&&null===e.memoizedState||(i|=1),Ea(si,1&i),null===e)return co(t),null!==(e=t.memoizedState)&&null!==(e=e.dehydrated)?(0==(1&t.mode)?t.lanes=1:"$!"===e.data?t.lanes=8:t.lanes=1073741824,null):(s=a.children,e=a.fallback,l?(a=t.mode,l=t.child,s={mode:"hidden",children:s},0==(1&a)&&null!==l?(l.childLanes=0,l.pendingProps=s):l=Mc(s,a,0,null),e=Ic(e,a,n,null),l.return=t,e.return=t,l.sibling=e,t.child=l,t.child.memoizedState=Ml(n),t.memoizedState=Il,e):Bl(t,s));if(null!==(i=e.memoizedState)&&null!==(r=i.dehydrated))return function(e,t,n,r,a,i,l){if(n)return 256&t.flags?(t.flags&=-257,zl(e,t,l,r=dl(Error(o(422))))):null!==t.memoizedState?(t.child=e.child,t.flags|=128,null):(i=r.fallback,a=t.mode,r=Mc({mode:"visible",children:r.children},a,0,null),(i=Ic(i,a,l,null)).flags|=2,r.return=t,i.return=t,r.sibling=i,t.child=r,0!=(1&t.mode)&&Yo(t,e.child,null,l),t.child.memoizedState=Ml(l),t.memoizedState=Il,i);if(0==(1&t.mode))return zl(e,t,l,null);if("$!"===a.data){if(r=a.nextSibling&&a.nextSibling.dataset)var s=r.dgst;return r=s,zl(e,t,l,r=dl(i=Error(o(419)),r,void 0))}if(s=0!=(l&e.childLanes),wl||s){if(null!==(r=Ls)){switch(l&-l){case 4:a=2;break;case 16:a=8;break;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:a=32;break;case 536870912:a=268435456;break;default:a=0}0!==(a=0!=(a&(r.suspendedLanes|l))?0:a)&&a!==i.retryLane&&(i.retryLane=a,Lo(e,a),rc(r,e,a,-1))}return gc(),zl(e,t,l,r=dl(Error(o(421))))}return"$?"===a.data?(t.flags|=128,t.child=e.child,t=Ac.bind(null,e),a._reactRetry=t,null):(e=i.treeContext,ro=ca(a.nextSibling),no=t,ao=!0,oo=null,null!==e&&(Va[Wa++]=Qa,Va[Wa++]=Ya,Va[Wa++]=Ka,Qa=e.id,Ya=e.overflow,Ka=t),t=Bl(t,r.children),t.flags|=4096,t)}(e,t,s,a,r,i,n);if(l){l=a.fallback,s=t.mode,r=(i=e.child).sibling;var c={mode:"hidden",children:a.children};return 0==(1&s)&&t.child!==i?((a=t.child).childLanes=0,a.pendingProps=c,t.deletions=null):(a=Oc(i,c)).subtreeFlags=14680064&i.subtreeFlags,null!==r?l=Oc(r,l):(l=Ic(l,s,n,null)).flags|=2,l.return=t,a.return=t,a.sibling=l,t.child=a,a=l,l=t.child,s=null===(s=e.child.memoizedState)?Ml(n):{baseLanes:s.baseLanes|n,cachePool:null,transitions:s.transitions},l.memoizedState=s,l.childLanes=e.childLanes&~n,t.memoizedState=Il,a}return e=(l=e.child).sibling,a=Oc(l,{mode:"visible",children:a.children}),0==(1&t.mode)&&(a.lanes=n),a.return=t,a.sibling=null,null!==e&&(null===(n=t.deletions)?(t.deletions=[e],t.flags|=16):n.push(e)),t.child=a,t.memoizedState=null,a}function Bl(e,t){return(t=Mc({mode:"visible",children:t},e.mode,0,null)).return=e,e.child=t}function zl(e,t,n,r){return null!==r&&mo(r),Yo(t,e.child,null,n),(e=Bl(t,t.pendingProps.children)).flags|=2,t.memoizedState=null,e}function Ul(e,t,n){e.lanes|=t;var r=e.alternate;null!==r&&(r.lanes|=t),Co(e.return,t,n)}function $l(e,t,n,r,a){var o=e.memoizedState;null===o?e.memoizedState={isBackwards:t,rendering:null,renderingStartTime:0,last:r,tail:n,tailMode:a}:(o.isBackwards=t,o.rendering=null,o.renderingStartTime=0,o.last=r,o.tail=n,o.tailMode=a)}function Hl(e,t,n){var r=t.pendingProps,a=r.revealOrder,o=r.tail;if(kl(e,t,r.children,n),0!=(2&(r=si.current)))r=1&r|2,t.flags|=128;else{if(null!==e&&0!=(128&e.flags))e:for(e=t.child;null!==e;){if(13===e.tag)null!==e.memoizedState&&Ul(e,n,t);else if(19===e.tag)Ul(e,n,t);else if(null!==e.child){e.child.return=e,e=e.child;continue}if(e===t)break e;for(;null===e.sibling;){if(null===e.return||e.return===t)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}r&=1}if(Ea(si,r),0==(1&t.mode))t.memoizedState=null;else switch(a){case"forwards":for(n=t.child,a=null;null!==n;)null!==(e=n.alternate)&&null===ci(e)&&(a=n),n=n.sibling;null===(n=a)?(a=t.child,t.child=null):(a=n.sibling,n.sibling=null),$l(t,!1,a,n,o);break;case"backwards":for(n=null,a=t.child,t.child=null;null!==a;){if(null!==(e=a.alternate)&&null===ci(e)){t.child=a;break}e=a.sibling,a.sibling=n,n=a,a=e}$l(t,!0,n,null,o);break;case"together":$l(t,!1,null,null,void 0);break;default:t.memoizedState=null}return t.child}function ql(e,t){0==(1&t.mode)&&null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2)}function Zl(e,t,n){if(null!==e&&(t.dependencies=e.dependencies),Ms|=t.lanes,0==(n&t.childLanes))return null;if(null!==e&&t.child!==e.child)throw Error(o(153));if(null!==t.child){for(n=Oc(e=t.child,e.pendingProps),t.child=n,n.return=t;null!==e.sibling;)e=e.sibling,(n=n.sibling=Oc(e,e.pendingProps)).return=t;n.sibling=null}return t.child}function Gl(e,t){if(!ao)switch(e.tailMode){case"hidden":t=e.tail;for(var n=null;null!==t;)null!==t.alternate&&(n=t),t=t.sibling;null===n?e.tail=null:n.sibling=null;break;case"collapsed":n=e.tail;for(var r=null;null!==n;)null!==n.alternate&&(r=n),n=n.sibling;null===r?t||null===e.tail?e.tail=null:e.tail.sibling=null:r.sibling=null}}function Vl(e){var t=null!==e.alternate&&e.alternate.child===e.child,n=0,r=0;if(t)for(var a=e.child;null!==a;)n|=a.lanes|a.childLanes,r|=14680064&a.subtreeFlags,r|=14680064&a.flags,a.return=e,a=a.sibling;else for(a=e.child;null!==a;)n|=a.lanes|a.childLanes,r|=a.subtreeFlags,r|=a.flags,a.return=e,a=a.sibling;return e.subtreeFlags|=r,e.childLanes=n,t}function Wl(e,t,n){var r=t.pendingProps;switch(to(t),t.tag){case 2:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return Vl(t),null;case 1:case 17:return Ra(t.type)&&Na(),Vl(t),null;case 3:return r=t.stateNode,oi(),Ta(Pa),Ta(Aa),di(),r.pendingContext&&(r.context=r.pendingContext,r.pendingContext=null),null!==e&&null!==e.child||(po(t)?t.flags|=4:null===e||e.memoizedState.isDehydrated&&0==(256&t.flags)||(t.flags|=1024,null!==oo&&(lc(oo),oo=null))),Nl(e,t),Vl(t),null;case 5:li(t);var a=ri(ni.current);if(n=t.type,null!==e&&null!=t.stateNode)Ol(e,t,n,r,a),e.ref!==t.ref&&(t.flags|=512,t.flags|=2097152);else{if(!r){if(null===t.stateNode)throw Error(o(166));return Vl(t),null}if(e=ri(ei.current),po(t)){r=t.stateNode,n=t.type;var i=t.memoizedProps;switch(r[pa]=t,r[fa]=i,e=0!=(1&t.mode),n){case"dialog":Br("cancel",r),Br("close",r);break;case"iframe":case"object":case"embed":Br("load",r);break;case"video":case"audio":for(a=0;a<\/script>",e=e.removeChild(e.firstChild)):"string"==typeof r.is?e=s.createElement(n,{is:r.is}):(e=s.createElement(n),"select"===n&&(s=e,r.multiple?s.multiple=!0:r.size&&(s.size=r.size))):e=s.createElementNS(e,n),e[pa]=t,e[fa]=r,Rl(e,t,!1,!1),t.stateNode=e;e:{switch(s=ve(n,r),n){case"dialog":Br("cancel",e),Br("close",e),a=r;break;case"iframe":case"object":case"embed":Br("load",e),a=r;break;case"video":case"audio":for(a=0;aHs&&(t.flags|=128,r=!0,Gl(i,!1),t.lanes=4194304)}else{if(!r)if(null!==(e=ci(s))){if(t.flags|=128,r=!0,null!==(n=e.updateQueue)&&(t.updateQueue=n,t.flags|=4),Gl(i,!0),null===i.tail&&"hidden"===i.tailMode&&!s.alternate&&!ao)return Vl(t),null}else 2*Ye()-i.renderingStartTime>Hs&&1073741824!==n&&(t.flags|=128,r=!0,Gl(i,!1),t.lanes=4194304);i.isBackwards?(s.sibling=t.child,t.child=s):(null!==(n=i.last)?n.sibling=s:t.child=s,i.last=s)}return null!==i.tail?(t=i.tail,i.rendering=t,i.tail=t.sibling,i.renderingStartTime=Ye(),t.sibling=null,n=si.current,Ea(si,r?1&n|2:1&n),t):(Vl(t),null);case 22:case 23:return pc(),r=null!==t.memoizedState,null!==e&&null!==e.memoizedState!==r&&(t.flags|=8192),r&&0!=(1&t.mode)?0!=(1073741824&Ns)&&(Vl(t),6&t.subtreeFlags&&(t.flags|=8192)):Vl(t),null;case 24:case 25:return null}throw Error(o(156,t.tag))}function Kl(e,t){switch(to(t),t.tag){case 1:return Ra(t.type)&&Na(),65536&(e=t.flags)?(t.flags=-65537&e|128,t):null;case 3:return oi(),Ta(Pa),Ta(Aa),di(),0!=(65536&(e=t.flags))&&0==(128&e)?(t.flags=-65537&e|128,t):null;case 5:return li(t),null;case 13:if(Ta(si),null!==(e=t.memoizedState)&&null!==e.dehydrated){if(null===t.alternate)throw Error(o(340));ho()}return 65536&(e=t.flags)?(t.flags=-65537&e|128,t):null;case 19:return Ta(si),null;case 4:return oi(),null;case 10:return So(t.type._context),null;case 22:case 23:return pc(),null;default:return null}}Rl=function(e,t){for(var n=t.child;null!==n;){if(5===n.tag||6===n.tag)e.appendChild(n.stateNode);else if(4!==n.tag&&null!==n.child){n.child.return=n,n=n.child;continue}if(n===t)break;for(;null===n.sibling;){if(null===n.return||n.return===t)return;n=n.return}n.sibling.return=n.return,n=n.sibling}},Nl=function(){},Ol=function(e,t,n,r){var a=e.memoizedProps;if(a!==r){e=t.stateNode,ri(ei.current);var o,i=null;switch(n){case"input":a=K(e,a),r=K(e,r),i=[];break;case"select":a=M({},a,{value:void 0}),r=M({},r,{value:void 0}),i=[];break;case"textarea":a=re(e,a),r=re(e,r),i=[];break;default:"function"!=typeof a.onClick&&"function"==typeof r.onClick&&(e.onclick=Jr)}for(u in ye(n,r),n=null,a)if(!r.hasOwnProperty(u)&&a.hasOwnProperty(u)&&null!=a[u])if("style"===u){var s=a[u];for(o in s)s.hasOwnProperty(o)&&(n||(n={}),n[o]="")}else"dangerouslySetInnerHTML"!==u&&"children"!==u&&"suppressContentEditableWarning"!==u&&"suppressHydrationWarning"!==u&&"autoFocus"!==u&&(l.hasOwnProperty(u)?i||(i=[]):(i=i||[]).push(u,null));for(u in r){var c=r[u];if(s=null!=a?a[u]:void 0,r.hasOwnProperty(u)&&c!==s&&(null!=c||null!=s))if("style"===u)if(s){for(o in s)!s.hasOwnProperty(o)||c&&c.hasOwnProperty(o)||(n||(n={}),n[o]="");for(o in c)c.hasOwnProperty(o)&&s[o]!==c[o]&&(n||(n={}),n[o]=c[o])}else n||(i||(i=[]),i.push(u,n)),n=c;else"dangerouslySetInnerHTML"===u?(c=c?c.__html:void 0,s=s?s.__html:void 0,null!=c&&s!==c&&(i=i||[]).push(u,c)):"children"===u?"string"!=typeof c&&"number"!=typeof c||(i=i||[]).push(u,""+c):"suppressContentEditableWarning"!==u&&"suppressHydrationWarning"!==u&&(l.hasOwnProperty(u)?(null!=c&&"onScroll"===u&&Br("scroll",e),i||s===c||(i=[])):(i=i||[]).push(u,c))}n&&(i=i||[]).push("style",n);var u=i;(t.updateQueue=u)&&(t.flags|=4)}},Dl=function(e,t,n,r){n!==r&&(t.flags|=4)};var Ql=!1,Yl=!1,Xl="function"==typeof WeakSet?WeakSet:Set,Jl=null;function es(e,t){var n=e.ref;if(null!==n)if("function"==typeof n)try{n(null)}catch(r){Tc(e,t,r)}else n.current=null}function ts(e,t,n){try{n()}catch(r){Tc(e,t,r)}}var ns=!1;function rs(e,t,n){var r=t.updateQueue;if(null!==(r=null!==r?r.lastEffect:null)){var a=r=r.next;do{if((a.tag&e)===e){var o=a.destroy;a.destroy=void 0,void 0!==o&&ts(t,n,o)}a=a.next}while(a!==r)}}function as(e,t){if(null!==(t=null!==(t=t.updateQueue)?t.lastEffect:null)){var n=t=t.next;do{if((n.tag&e)===e){var r=n.create;n.destroy=r()}n=n.next}while(n!==t)}}function os(e){var t=e.ref;if(null!==t){var n=e.stateNode;e.tag,e=n,"function"==typeof t?t(e):t.current=e}}function is(e){var t=e.alternate;null!==t&&(e.alternate=null,is(t)),e.child=null,e.deletions=null,e.sibling=null,5===e.tag&&(null!==(t=e.stateNode)&&(delete t[pa],delete t[fa],delete t[ma],delete t[ga],delete t[ba])),e.stateNode=null,e.return=null,e.dependencies=null,e.memoizedProps=null,e.memoizedState=null,e.pendingProps=null,e.stateNode=null,e.updateQueue=null}function ls(e){return 5===e.tag||3===e.tag||4===e.tag}function ss(e){e:for(;;){for(;null===e.sibling;){if(null===e.return||ls(e.return))return null;e=e.return}for(e.sibling.return=e.return,e=e.sibling;5!==e.tag&&6!==e.tag&&18!==e.tag;){if(2&e.flags)continue e;if(null===e.child||4===e.tag)continue e;e.child.return=e,e=e.child}if(!(2&e.flags))return e.stateNode}}function cs(e,t,n){var r=e.tag;if(5===r||6===r)e=e.stateNode,t?8===n.nodeType?n.parentNode.insertBefore(e,t):n.insertBefore(e,t):(8===n.nodeType?(t=n.parentNode).insertBefore(e,n):(t=n).appendChild(e),null!=(n=n._reactRootContainer)||null!==t.onclick||(t.onclick=Jr));else if(4!==r&&null!==(e=e.child))for(cs(e,t,n),e=e.sibling;null!==e;)cs(e,t,n),e=e.sibling}function us(e,t,n){var r=e.tag;if(5===r||6===r)e=e.stateNode,t?n.insertBefore(e,t):n.appendChild(e);else if(4!==r&&null!==(e=e.child))for(us(e,t,n),e=e.sibling;null!==e;)us(e,t,n),e=e.sibling}var ds=null,ps=!1;function fs(e,t,n){for(n=n.child;null!==n;)hs(e,t,n),n=n.sibling}function hs(e,t,n){if(ot&&"function"==typeof ot.onCommitFiberUnmount)try{ot.onCommitFiberUnmount(at,n)}catch(l){}switch(n.tag){case 5:Yl||es(n,t);case 6:var r=ds,a=ps;ds=null,fs(e,t,n),ps=a,null!==(ds=r)&&(ps?(e=ds,n=n.stateNode,8===e.nodeType?e.parentNode.removeChild(n):e.removeChild(n)):ds.removeChild(n.stateNode));break;case 18:null!==ds&&(ps?(e=ds,n=n.stateNode,8===e.nodeType?sa(e.parentNode,n):1===e.nodeType&&sa(e,n),$t(e)):sa(ds,n.stateNode));break;case 4:r=ds,a=ps,ds=n.stateNode.containerInfo,ps=!0,fs(e,t,n),ds=r,ps=a;break;case 0:case 11:case 14:case 15:if(!Yl&&(null!==(r=n.updateQueue)&&null!==(r=r.lastEffect))){a=r=r.next;do{var o=a,i=o.destroy;o=o.tag,void 0!==i&&(0!=(2&o)||0!=(4&o))&&ts(n,t,i),a=a.next}while(a!==r)}fs(e,t,n);break;case 1:if(!Yl&&(es(n,t),"function"==typeof(r=n.stateNode).componentWillUnmount))try{r.props=n.memoizedProps,r.state=n.memoizedState,r.componentWillUnmount()}catch(l){Tc(n,t,l)}fs(e,t,n);break;case 21:fs(e,t,n);break;case 22:1&n.mode?(Yl=(r=Yl)||null!==n.memoizedState,fs(e,t,n),Yl=r):fs(e,t,n);break;default:fs(e,t,n)}}function ms(e){var t=e.updateQueue;if(null!==t){e.updateQueue=null;var n=e.stateNode;null===n&&(n=e.stateNode=new Xl),t.forEach((function(t){var r=Pc.bind(null,e,t);n.has(t)||(n.add(t),t.then(r,r))}))}}function gs(e,t){var n=t.deletions;if(null!==n)for(var r=0;ra&&(a=l),r&=~i}if(r=a,10<(r=(120>(r=Ye()-r)?120:480>r?480:1080>r?1080:1920>r?1920:3e3>r?3e3:4320>r?4320:1960*Ts(r/1960))-r)){e.timeoutHandle=ra(xc.bind(null,e,Us,qs),r);break}xc(e,Us,qs);break;default:throw Error(o(329))}}}return ac(e,Ye()),e.callbackNode===n?oc.bind(null,e):null}function ic(e,t){var n=zs;return e.current.memoizedState.isDehydrated&&(fc(e,t).flags|=256),2!==(e=bc(e,t))&&(t=Us,Us=n,null!==t&&lc(t)),e}function lc(e){null===Us?Us=e:Us.push.apply(Us,e)}function sc(e,t){for(t&=~Bs,t&=~Fs,e.suspendedLanes|=t,e.pingedLanes&=~t,e=e.expirationTimes;0e?16:e,null===Ks)var r=!1;else{if(e=Ks,Ks=null,Qs=0,0!=(6&Ps))throw Error(o(331));var a=Ps;for(Ps|=4,Jl=e.current;null!==Jl;){var i=Jl,l=i.child;if(0!=(16&Jl.flags)){var s=i.deletions;if(null!==s){for(var c=0;cYe()-$s?fc(e,0):Bs|=n),ac(e,t)}function _c(e,t){0===t&&(0==(1&e.mode)?t=1:(t=ut,0==(130023424&(ut<<=1))&&(ut=4194304)));var n=tc();null!==(e=Lo(e,t))&&(bt(e,t,n),ac(e,n))}function Ac(e){var t=e.memoizedState,n=0;null!==t&&(n=t.retryLane),_c(e,n)}function Pc(e,t){var n=0;switch(e.tag){case 13:var r=e.stateNode,a=e.memoizedState;null!==a&&(n=a.retryLane);break;case 19:r=e.stateNode;break;default:throw Error(o(314))}null!==r&&r.delete(t),_c(e,n)}function Lc(e,t){return Ve(e,t)}function jc(e,t,n,r){this.tag=e,this.key=n,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=t,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=r,this.subtreeFlags=this.flags=0,this.deletions=null,this.childLanes=this.lanes=0,this.alternate=null}function Rc(e,t,n,r){return new jc(e,t,n,r)}function Nc(e){return!(!(e=e.prototype)||!e.isReactComponent)}function Oc(e,t){var n=e.alternate;return null===n?((n=Rc(e.tag,t,e.key,e.mode)).elementType=e.elementType,n.type=e.type,n.stateNode=e.stateNode,n.alternate=e,e.alternate=n):(n.pendingProps=t,n.type=e.type,n.flags=0,n.subtreeFlags=0,n.deletions=null),n.flags=14680064&e.flags,n.childLanes=e.childLanes,n.lanes=e.lanes,n.child=e.child,n.memoizedProps=e.memoizedProps,n.memoizedState=e.memoizedState,n.updateQueue=e.updateQueue,t=e.dependencies,n.dependencies=null===t?null:{lanes:t.lanes,firstContext:t.firstContext},n.sibling=e.sibling,n.index=e.index,n.ref=e.ref,n}function Dc(e,t,n,r,a,i){var l=2;if(r=e,"function"==typeof e)Nc(e)&&(l=1);else if("string"==typeof e)l=5;else e:switch(e){case S:return Ic(n.children,a,i,t);case C:l=8,a|=8;break;case T:return(e=Rc(12,n,t,2|a)).elementType=T,e.lanes=i,e;case P:return(e=Rc(13,n,t,a)).elementType=P,e.lanes=i,e;case L:return(e=Rc(19,n,t,a)).elementType=L,e.lanes=i,e;case N:return Mc(n,a,i,t);default:if("object"==typeof e&&null!==e)switch(e.$$typeof){case E:l=10;break e;case _:l=9;break e;case A:l=11;break e;case j:l=14;break e;case R:l=16,r=null;break e}throw Error(o(130,null==e?e:typeof e,""))}return(t=Rc(l,n,t,a)).elementType=e,t.type=r,t.lanes=i,t}function Ic(e,t,n,r){return(e=Rc(7,e,r,t)).lanes=n,e}function Mc(e,t,n,r){return(e=Rc(22,e,r,t)).elementType=N,e.lanes=n,e.stateNode={isHidden:!1},e}function Fc(e,t,n){return(e=Rc(6,e,null,t)).lanes=n,e}function Bc(e,t,n){return(t=Rc(4,null!==e.children?e.children:[],e.key,t)).lanes=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function zc(e,t,n,r,a){this.tag=t,this.containerInfo=e,this.finishedWork=this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.callbackNode=this.pendingContext=this.context=null,this.callbackPriority=0,this.eventTimes=gt(0),this.expirationTimes=gt(-1),this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=gt(0),this.identifierPrefix=r,this.onRecoverableError=a,this.mutableSourceEagerHydrationData=null}function Uc(e,t,n,r,a,o,i,l,s){return e=new zc(e,t,n,l,s),1===t?(t=1,!0===o&&(t|=8)):t=0,o=Rc(3,null,null,t),e.current=o,o.stateNode=e,o.memoizedState={element:r,isDehydrated:n,cache:null,transitions:null,pendingSuspenseBoundaries:null},Ro(o),e}function $c(e){if(!e)return _a;e:{if($e(e=e._reactInternals)!==e||1!==e.tag)throw Error(o(170));var t=e;do{switch(t.tag){case 3:t=t.stateNode.context;break e;case 1:if(Ra(t.type)){t=t.stateNode.__reactInternalMemoizedMergedChildContext;break e}}t=t.return}while(null!==t);throw Error(o(171))}if(1===e.tag){var n=e.type;if(Ra(n))return Da(e,n,t)}return t}function Hc(e,t,n,r,a,o,i,l,s){return(e=Uc(n,r,!0,e,0,o,0,l,s)).context=$c(null),n=e.current,(o=Oo(r=tc(),a=nc(n))).callback=null!=t?t:null,Do(n,o,a),e.current.lanes=a,bt(e,a,r),ac(e,r),e}function qc(e,t,n,r){var a=t.current,o=tc(),i=nc(a);return n=$c(n),null===t.context?t.context=n:t.pendingContext=n,(t=Oo(o,i)).payload={element:e},null!==(r=void 0===r?null:r)&&(t.callback=r),null!==(e=Do(a,t,i))&&(rc(e,a,i,o),Io(e,a,i)),i}function Zc(e){return(e=e.current).child?(e.child.tag,e.child.stateNode):null}function Gc(e,t){if(null!==(e=e.memoizedState)&&null!==e.dehydrated){var n=e.retryLane;e.retryLane=0!==n&&n{"use strict";var r=n(3935);t.createRoot=r.createRoot,t.hydrateRoot=r.hydrateRoot},3935:(e,t,n)=>{"use strict";!function e(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(t){console.error(t)}}(),e.exports=n(4448)},9590:e=>{var t="undefined"!=typeof Element,n="function"==typeof Map,r="function"==typeof Set,a="function"==typeof ArrayBuffer&&!!ArrayBuffer.isView;function o(e,i){if(e===i)return!0;if(e&&i&&"object"==typeof e&&"object"==typeof i){if(e.constructor!==i.constructor)return!1;var l,s,c,u;if(Array.isArray(e)){if((l=e.length)!=i.length)return!1;for(s=l;0!=s--;)if(!o(e[s],i[s]))return!1;return!0}if(n&&e instanceof Map&&i instanceof Map){if(e.size!==i.size)return!1;for(u=e.entries();!(s=u.next()).done;)if(!i.has(s.value[0]))return!1;for(u=e.entries();!(s=u.next()).done;)if(!o(s.value[1],i.get(s.value[0])))return!1;return!0}if(r&&e instanceof Set&&i instanceof Set){if(e.size!==i.size)return!1;for(u=e.entries();!(s=u.next()).done;)if(!i.has(s.value[0]))return!1;return!0}if(a&&ArrayBuffer.isView(e)&&ArrayBuffer.isView(i)){if((l=e.length)!=i.length)return!1;for(s=l;0!=s--;)if(e[s]!==i[s])return!1;return!0}if(e.constructor===RegExp)return e.source===i.source&&e.flags===i.flags;if(e.valueOf!==Object.prototype.valueOf&&"function"==typeof e.valueOf&&"function"==typeof i.valueOf)return e.valueOf()===i.valueOf();if(e.toString!==Object.prototype.toString&&"function"==typeof e.toString&&"function"==typeof i.toString)return e.toString()===i.toString();if((l=(c=Object.keys(e)).length)!==Object.keys(i).length)return!1;for(s=l;0!=s--;)if(!Object.prototype.hasOwnProperty.call(i,c[s]))return!1;if(t&&e instanceof Element)return!1;for(s=l;0!=s--;)if(("_owner"!==c[s]&&"__v"!==c[s]&&"__o"!==c[s]||!e.$$typeof)&&!o(e[c[s]],i[c[s]]))return!1;return!0}return e!=e&&i!=i}e.exports=function(e,t){try{return o(e,t)}catch(n){if((n.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw n}}},405:(e,t,n)=>{"use strict";n.d(t,{B6:()=>Z,ql:()=>J});var r=n(7294),a=n(5697),o=n.n(a),i=n(9590),l=n.n(i),s=n(1143),c=n.n(s),u=n(6774),d=n.n(u);function p(){return p=Object.assign||function(e){for(var t=1;t=0||(a[n]=e[n]);return a}var g={BASE:"base",BODY:"body",HEAD:"head",HTML:"html",LINK:"link",META:"meta",NOSCRIPT:"noscript",SCRIPT:"script",STYLE:"style",TITLE:"title",FRAGMENT:"Symbol(react.fragment)"},b={rel:["amphtml","canonical","alternate"]},y={type:["application/ld+json"]},v={charset:"",name:["robots","description"],property:["og:type","og:title","og:url","og:image","og:image:alt","og:description","twitter:url","twitter:title","twitter:description","twitter:image","twitter:image:alt","twitter:card","twitter:site"]},w=Object.keys(g).map((function(e){return g[e]})),k={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"},x=Object.keys(k).reduce((function(e,t){return e[k[t]]=t,e}),{}),S=function(e,t){for(var n=e.length-1;n>=0;n-=1){var r=e[n];if(Object.prototype.hasOwnProperty.call(r,t))return r[t]}return null},C=function(e){var t=S(e,g.TITLE),n=S(e,"titleTemplate");if(Array.isArray(t)&&(t=t.join("")),n&&t)return n.replace(/%s/g,(function(){return t}));var r=S(e,"defaultTitle");return t||r||void 0},T=function(e){return S(e,"onChangeClientState")||function(){}},E=function(e,t){return t.filter((function(t){return void 0!==t[e]})).map((function(t){return t[e]})).reduce((function(e,t){return p({},e,t)}),{})},_=function(e,t){return t.filter((function(e){return void 0!==e[g.BASE]})).map((function(e){return e[g.BASE]})).reverse().reduce((function(t,n){if(!t.length)for(var r=Object.keys(n),a=0;a/g,">").replace(/"/g,""").replace(/'/g,"'")},D=function(e){return Object.keys(e).reduce((function(t,n){var r=void 0!==e[n]?n+'="'+e[n]+'"':""+n;return t?t+" "+r:r}),"")},I=function(e,t){return void 0===t&&(t={}),Object.keys(e).reduce((function(t,n){return t[k[n]||n]=e[n],t}),t)},M=function(e,t){return t.map((function(t,n){var a,o=((a={key:n})["data-rh"]=!0,a);return Object.keys(t).forEach((function(e){var n=k[e]||e;"innerHTML"===n||"cssText"===n?o.dangerouslySetInnerHTML={__html:t.innerHTML||t.cssText}:o[n]=t[e]})),r.createElement(e,o)}))},F=function(e,t,n){switch(e){case g.TITLE:return{toComponent:function(){return n=t.titleAttributes,(a={key:e=t.title})["data-rh"]=!0,o=I(n,a),[r.createElement(g.TITLE,o,e)];var e,n,a,o},toString:function(){return function(e,t,n,r){var a=D(n),o=L(t);return a?"<"+e+' data-rh="true" '+a+">"+O(o,r)+"":"<"+e+' data-rh="true">'+O(o,r)+""}(e,t.title,t.titleAttributes,n)}};case"bodyAttributes":case"htmlAttributes":return{toComponent:function(){return I(t)},toString:function(){return D(t)}};default:return{toComponent:function(){return M(e,t)},toString:function(){return function(e,t,n){return t.reduce((function(t,r){var a=Object.keys(r).filter((function(e){return!("innerHTML"===e||"cssText"===e)})).reduce((function(e,t){var a=void 0===r[t]?t:t+'="'+O(r[t],n)+'"';return e?e+" "+a:a}),""),o=r.innerHTML||r.cssText||"",i=-1===N.indexOf(e);return t+"<"+e+' data-rh="true" '+a+(i?"/>":">"+o+"")}),"")}(e,t,n)}}}},B=function(e){var t=e.baseTag,n=e.bodyAttributes,r=e.encode,a=e.htmlAttributes,o=e.noscriptTags,i=e.styleTags,l=e.title,s=void 0===l?"":l,c=e.titleAttributes,u=e.linkTags,d=e.metaTags,p=e.scriptTags,f={toComponent:function(){},toString:function(){return""}};if(e.prioritizeSeoTags){var h=function(e){var t=e.linkTags,n=e.scriptTags,r=e.encode,a=j(e.metaTags,v),o=j(t,b),i=j(n,y);return{priorityMethods:{toComponent:function(){return[].concat(M(g.META,a.priority),M(g.LINK,o.priority),M(g.SCRIPT,i.priority))},toString:function(){return F(g.META,a.priority,r)+" "+F(g.LINK,o.priority,r)+" "+F(g.SCRIPT,i.priority,r)}},metaTags:a.default,linkTags:o.default,scriptTags:i.default}}(e);f=h.priorityMethods,u=h.linkTags,d=h.metaTags,p=h.scriptTags}return{priority:f,base:F(g.BASE,t,r),bodyAttributes:F("bodyAttributes",n,r),htmlAttributes:F("htmlAttributes",a,r),link:F(g.LINK,u,r),meta:F(g.META,d,r),noscript:F(g.NOSCRIPT,o,r),script:F(g.SCRIPT,p,r),style:F(g.STYLE,i,r),title:F(g.TITLE,{title:s,titleAttributes:c},r)}},z=[],U=function(e,t){var n=this;void 0===t&&(t="undefined"!=typeof document),this.instances=[],this.value={setHelmet:function(e){n.context.helmet=e},helmetInstances:{get:function(){return n.canUseDOM?z:n.instances},add:function(e){(n.canUseDOM?z:n.instances).push(e)},remove:function(e){var t=(n.canUseDOM?z:n.instances).indexOf(e);(n.canUseDOM?z:n.instances).splice(t,1)}}},this.context=e,this.canUseDOM=t,t||(e.helmet=B({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}}))},$=r.createContext({}),H=o().shape({setHelmet:o().func,helmetInstances:o().shape({get:o().func,add:o().func,remove:o().func})}),q="undefined"!=typeof document,Z=function(e){function t(n){var r;return(r=e.call(this,n)||this).helmetData=new U(r.props.context,t.canUseDOM),r}return f(t,e),t.prototype.render=function(){return r.createElement($.Provider,{value:this.helmetData.value},this.props.children)},t}(r.Component);Z.canUseDOM=q,Z.propTypes={context:o().shape({helmet:o().shape()}),children:o().node.isRequired},Z.defaultProps={context:{}},Z.displayName="HelmetProvider";var G=function(e,t){var n,r=document.head||document.querySelector(g.HEAD),a=r.querySelectorAll(e+"[data-rh]"),o=[].slice.call(a),i=[];return t&&t.length&&t.forEach((function(t){var r=document.createElement(e);for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&("innerHTML"===a?r.innerHTML=t.innerHTML:"cssText"===a?r.styleSheet?r.styleSheet.cssText=t.cssText:r.appendChild(document.createTextNode(t.cssText)):r.setAttribute(a,void 0===t[a]?"":t[a]));r.setAttribute("data-rh","true"),o.some((function(e,t){return n=t,r.isEqualNode(e)}))?o.splice(n,1):i.push(r)})),o.forEach((function(e){return e.parentNode.removeChild(e)})),i.forEach((function(e){return r.appendChild(e)})),{oldTags:o,newTags:i}},V=function(e,t){var n=document.getElementsByTagName(e)[0];if(n){for(var r=n.getAttribute("data-rh"),a=r?r.split(","):[],o=[].concat(a),i=Object.keys(t),l=0;l=0;d-=1)n.removeAttribute(o[d]);a.length===o.length?n.removeAttribute("data-rh"):n.getAttribute("data-rh")!==i.join(",")&&n.setAttribute("data-rh",i.join(","))}},W=function(e,t){var n=e.baseTag,r=e.htmlAttributes,a=e.linkTags,o=e.metaTags,i=e.noscriptTags,l=e.onChangeClientState,s=e.scriptTags,c=e.styleTags,u=e.title,d=e.titleAttributes;V(g.BODY,e.bodyAttributes),V(g.HTML,r),function(e,t){void 0!==e&&document.title!==e&&(document.title=L(e)),V(g.TITLE,t)}(u,d);var p={baseTag:G(g.BASE,n),linkTags:G(g.LINK,a),metaTags:G(g.META,o),noscriptTags:G(g.NOSCRIPT,i),scriptTags:G(g.SCRIPT,s),styleTags:G(g.STYLE,c)},f={},h={};Object.keys(p).forEach((function(e){var t=p[e],n=t.newTags,r=t.oldTags;n.length&&(f[e]=n),r.length&&(h[e]=p[e].oldTags)})),t&&t(),l(e,f,h)},K=null,Q=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),a=0;a components within each other, which is not allowed. Refer to our API for more information.":"Only elements types "+w.join(", ")+" are allowed. Helmet does not support rendering <"+e.type+"> elements. Refer to our API for more information."),c()(!t||"string"==typeof t||Array.isArray(t)&&!t.some((function(e){return"string"!=typeof e})),"Helmet expects a string as a child of <"+e.type+">. Did you forget to wrap your children in braces? ( <"+e.type+">{``} ) Refer to our API for more information."),!0},n.mapChildrenToProps=function(e,t){var n=this,a={};return r.Children.forEach(e,(function(e){if(e&&e.props){var r=e.props,o=r.children,i=m(r,Y),l=Object.keys(i).reduce((function(e,t){return e[x[t]||t]=i[t],e}),{}),s=e.type;switch("symbol"==typeof s?s=s.toString():n.warnOnInvalidChildren(e,o),s){case g.FRAGMENT:t=n.mapChildrenToProps(o,t);break;case g.LINK:case g.META:case g.NOSCRIPT:case g.SCRIPT:case g.STYLE:a=n.flattenArrayTypeChildren({child:e,arrayTypeChildren:a,newChildProps:l,nestedChildren:o});break;default:t=n.mapObjectTypeChildren({child:e,newProps:t,newChildProps:l,nestedChildren:o})}}})),this.mapArrayTypeChildrenToProps(a,t)},n.render=function(){var e=this.props,t=e.children,n=m(e,X),a=p({},n),o=n.helmetData;return t&&(a=this.mapChildrenToProps(t,a)),!o||o instanceof U||(o=new U(o.context,o.instances)),o?r.createElement(Q,p({},a,{context:o.value,helmetData:void 0})):r.createElement($.Consumer,null,(function(e){return r.createElement(Q,p({},a,{context:e}))}))},t}(r.Component);J.propTypes={base:o().object,bodyAttributes:o().object,children:o().oneOfType([o().arrayOf(o().node),o().node]),defaultTitle:o().string,defer:o().bool,encodeSpecialCharacters:o().bool,htmlAttributes:o().object,link:o().arrayOf(o().object),meta:o().arrayOf(o().object),noscript:o().arrayOf(o().object),onChangeClientState:o().func,script:o().arrayOf(o().object),style:o().arrayOf(o().object),title:o().string,titleAttributes:o().object,titleTemplate:o().string,prioritizeSeoTags:o().bool,helmetData:o().object},J.defaultProps={defer:!0,encodeSpecialCharacters:!0,prioritizeSeoTags:!1},J.displayName="Helmet"},9921:(e,t)=>{"use strict";var n="function"==typeof Symbol&&Symbol.for,r=n?Symbol.for("react.element"):60103,a=n?Symbol.for("react.portal"):60106,o=n?Symbol.for("react.fragment"):60107,i=n?Symbol.for("react.strict_mode"):60108,l=n?Symbol.for("react.profiler"):60114,s=n?Symbol.for("react.provider"):60109,c=n?Symbol.for("react.context"):60110,u=n?Symbol.for("react.async_mode"):60111,d=n?Symbol.for("react.concurrent_mode"):60111,p=n?Symbol.for("react.forward_ref"):60112,f=n?Symbol.for("react.suspense"):60113,h=n?Symbol.for("react.suspense_list"):60120,m=n?Symbol.for("react.memo"):60115,g=n?Symbol.for("react.lazy"):60116,b=n?Symbol.for("react.block"):60121,y=n?Symbol.for("react.fundamental"):60117,v=n?Symbol.for("react.responder"):60118,w=n?Symbol.for("react.scope"):60119;function k(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case r:switch(e=e.type){case u:case d:case o:case l:case i:case f:return e;default:switch(e=e&&e.$$typeof){case c:case p:case g:case m:case s:return e;default:return t}}case a:return t}}}function x(e){return k(e)===d}t.AsyncMode=u,t.ConcurrentMode=d,t.ContextConsumer=c,t.ContextProvider=s,t.Element=r,t.ForwardRef=p,t.Fragment=o,t.Lazy=g,t.Memo=m,t.Portal=a,t.Profiler=l,t.StrictMode=i,t.Suspense=f,t.isAsyncMode=function(e){return x(e)||k(e)===u},t.isConcurrentMode=x,t.isContextConsumer=function(e){return k(e)===c},t.isContextProvider=function(e){return k(e)===s},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},t.isForwardRef=function(e){return k(e)===p},t.isFragment=function(e){return k(e)===o},t.isLazy=function(e){return k(e)===g},t.isMemo=function(e){return k(e)===m},t.isPortal=function(e){return k(e)===a},t.isProfiler=function(e){return k(e)===l},t.isStrictMode=function(e){return k(e)===i},t.isSuspense=function(e){return k(e)===f},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===o||e===d||e===l||e===i||e===f||e===h||"object"==typeof e&&null!==e&&(e.$$typeof===g||e.$$typeof===m||e.$$typeof===s||e.$$typeof===c||e.$$typeof===p||e.$$typeof===y||e.$$typeof===v||e.$$typeof===w||e.$$typeof===b)},t.typeOf=k},9864:(e,t,n)=>{"use strict";e.exports=n(9921)},8356:(e,t,n)=>{"use strict";function r(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(){return i=Object.assign||function(e){for(var t=1;t{"use strict";n.d(t,{H:()=>l,f:()=>i});var r=n(6550),a=n(7462),o=n(7294);function i(e,t,n){return void 0===n&&(n=[]),e.some((function(e){var a=e.path?(0,r.LX)(t,e):n.length?n[n.length-1].match:r.F0.computeRootMatch(t);return a&&(n.push({route:e,match:a}),e.routes&&i(e.routes,t,n)),a})),n}function l(e,t,n){return void 0===t&&(t={}),void 0===n&&(n={}),e?o.createElement(r.rs,n,e.map((function(e,n){return o.createElement(r.AW,{key:e.key||n,path:e.path,exact:e.exact,strict:e.strict,render:function(n){return e.render?e.render((0,a.Z)({},n,{},t,{route:e})):o.createElement(e.component,(0,a.Z)({},n,t,{route:e}))}})}))):null}},3727:(e,t,n)=>{"use strict";n.d(t,{OL:()=>v,VK:()=>u,rU:()=>g});var r=n(6550),a=n(5068),o=n(7294),i=n(9318),l=n(7462),s=n(3366),c=n(8776),u=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),a=0;a{"use strict";n.d(t,{AW:()=>C,F0:()=>v,LX:()=>S,TH:()=>N,k6:()=>R,rs:()=>L,s6:()=>y});var r=n(5068),a=n(7294),o=n(5697),i=n.n(o),l=n(9318),s=n(8776),c=n(7462),u=n(9658),d=n.n(u),p=(n(9864),n(3366)),f=(n(8679),1073741823),h="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:void 0!==n.g?n.g:{};var m=a.createContext||function(e,t){var n,o,l="__create-react-context-"+function(){var e="__global_unique_id__";return h[e]=(h[e]||0)+1}()+"__",s=function(e){function n(){for(var t,n,r,a=arguments.length,o=new Array(a),i=0;i{var r=n(5826);e.exports=f,e.exports.parse=o,e.exports.compile=function(e,t){return l(o(e,t),t)},e.exports.tokensToFunction=l,e.exports.tokensToRegExp=p;var a=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function o(e,t){for(var n,r=[],o=0,i=0,l="",u=t&&t.delimiter||"/";null!=(n=a.exec(e));){var d=n[0],p=n[1],f=n.index;if(l+=e.slice(i,f),i=f+d.length,p)l+=p[1];else{var h=e[i],m=n[2],g=n[3],b=n[4],y=n[5],v=n[6],w=n[7];l&&(r.push(l),l="");var k=null!=m&&null!=h&&h!==m,x="+"===v||"*"===v,S="?"===v||"*"===v,C=n[2]||u,T=b||y;r.push({name:g||o++,prefix:m||"",delimiter:C,optional:S,repeat:x,partial:k,asterisk:!!w,pattern:T?c(T):w?".*":"[^"+s(C)+"]+?"})}}return i{"use strict";var r=n(7294),a=Symbol.for("react.element"),o=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,l=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s={key:!0,ref:!0,__self:!0,__source:!0};function c(e,t,n){var r,o={},c=null,u=null;for(r in void 0!==n&&(c=""+n),void 0!==t.key&&(c=""+t.key),void 0!==t.ref&&(u=t.ref),t)i.call(t,r)&&!s.hasOwnProperty(r)&&(o[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===o[r]&&(o[r]=t[r]);return{$$typeof:a,type:e,key:c,ref:u,props:o,_owner:l.current}}t.Fragment=o,t.jsx=c,t.jsxs=c},2408:(e,t)=>{"use strict";var n=Symbol.for("react.element"),r=Symbol.for("react.portal"),a=Symbol.for("react.fragment"),o=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),l=Symbol.for("react.provider"),s=Symbol.for("react.context"),c=Symbol.for("react.forward_ref"),u=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),p=Symbol.for("react.lazy"),f=Symbol.iterator;var h={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},m=Object.assign,g={};function b(e,t,n){this.props=e,this.context=t,this.refs=g,this.updater=n||h}function y(){}function v(e,t,n){this.props=e,this.context=t,this.refs=g,this.updater=n||h}b.prototype.isReactComponent={},b.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},b.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},y.prototype=b.prototype;var w=v.prototype=new y;w.constructor=v,m(w,b.prototype),w.isPureReactComponent=!0;var k=Array.isArray,x=Object.prototype.hasOwnProperty,S={current:null},C={key:!0,ref:!0,__self:!0,__source:!0};function T(e,t,r){var a,o={},i=null,l=null;if(null!=t)for(a in void 0!==t.ref&&(l=t.ref),void 0!==t.key&&(i=""+t.key),t)x.call(t,a)&&!C.hasOwnProperty(a)&&(o[a]=t[a]);var s=arguments.length-2;if(1===s)o.children=r;else if(1{"use strict";e.exports=n(2408)},5893:(e,t,n)=>{"use strict";e.exports=n(5251)},53:(e,t)=>{"use strict";function n(e,t){var n=e.length;e.push(t);e:for(;0>>1,a=e[r];if(!(0>>1;ro(s,n))co(u,s)?(e[r]=u,e[c]=n,r=c):(e[r]=s,e[l]=n,r=l);else{if(!(co(u,n)))break e;e[r]=u,e[c]=n,r=c}}}return t}function o(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}if("object"==typeof performance&&"function"==typeof performance.now){var i=performance;t.unstable_now=function(){return i.now()}}else{var l=Date,s=l.now();t.unstable_now=function(){return l.now()-s}}var c=[],u=[],d=1,p=null,f=3,h=!1,m=!1,g=!1,b="function"==typeof setTimeout?setTimeout:null,y="function"==typeof clearTimeout?clearTimeout:null,v="undefined"!=typeof setImmediate?setImmediate:null;function w(e){for(var t=r(u);null!==t;){if(null===t.callback)a(u);else{if(!(t.startTime<=e))break;a(u),t.sortIndex=t.expirationTime,n(c,t)}t=r(u)}}function k(e){if(g=!1,w(e),!m)if(null!==r(c))m=!0,N(x);else{var t=r(u);null!==t&&O(k,t.startTime-e)}}function x(e,n){m=!1,g&&(g=!1,y(E),E=-1),h=!0;var o=f;try{for(w(n),p=r(c);null!==p&&(!(p.expirationTime>n)||e&&!P());){var i=p.callback;if("function"==typeof i){p.callback=null,f=p.priorityLevel;var l=i(p.expirationTime<=n);n=t.unstable_now(),"function"==typeof l?p.callback=l:p===r(c)&&a(c),w(n)}else a(c);p=r(c)}if(null!==p)var s=!0;else{var d=r(u);null!==d&&O(k,d.startTime-n),s=!1}return s}finally{p=null,f=o,h=!1}}"undefined"!=typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var S,C=!1,T=null,E=-1,_=5,A=-1;function P(){return!(t.unstable_now()-A<_)}function L(){if(null!==T){var e=t.unstable_now();A=e;var n=!0;try{n=T(!0,e)}finally{n?S():(C=!1,T=null)}}else C=!1}if("function"==typeof v)S=function(){v(L)};else if("undefined"!=typeof MessageChannel){var j=new MessageChannel,R=j.port2;j.port1.onmessage=L,S=function(){R.postMessage(null)}}else S=function(){b(L,0)};function N(e){T=e,C||(C=!0,S())}function O(e,n){E=b((function(){e(t.unstable_now())}),n)}t.unstable_IdlePriority=5,t.unstable_ImmediatePriority=1,t.unstable_LowPriority=4,t.unstable_NormalPriority=3,t.unstable_Profiling=null,t.unstable_UserBlockingPriority=2,t.unstable_cancelCallback=function(e){e.callback=null},t.unstable_continueExecution=function(){m||h||(m=!0,N(x))},t.unstable_forceFrameRate=function(e){0>e||125i?(e.sortIndex=o,n(u,e),null===r(c)&&e===r(u)&&(g?(y(E),E=-1):g=!0,O(k,o-i))):(e.sortIndex=l,n(c,e),m||h||(m=!0,N(x))),e},t.unstable_shouldYield=P,t.unstable_wrapCallback=function(e){var t=f;return function(){var n=f;f=t;try{return e.apply(this,arguments)}finally{f=n}}}},3840:(e,t,n)=>{"use strict";e.exports=n(53)},6774:e=>{e.exports=function(e,t,n,r){var a=n?n.call(r,e,t):void 0;if(void 0!==a)return!!a;if(e===t)return!0;if("object"!=typeof e||!e||"object"!=typeof t||!t)return!1;var o=Object.keys(e),i=Object.keys(t);if(o.length!==i.length)return!1;for(var l=Object.prototype.hasOwnProperty.bind(t),s=0;s{"use strict";n.r(t),n.d(t,{default:()=>r});const r={title:"FluentUI Charting Contrib Docsite",tagline:"MD docs related to FluentUI Charting library",favicon:"img/favicon.ico",url:"https://microsoft.github.io",baseUrl:"/fluentui-charting-contrib/",organizationName:"microsoft",projectName:"fluentui-charting-contrib",deploymentBranch:"gh-pages",trailingSlash:!1,staticDirectories:["../../docs/assets","static"],onBrokenLinks:"warn",onBrokenMarkdownLinks:"warn",i18n:{defaultLocale:"en",locales:["en"],path:"i18n",localeConfigs:{}},presets:[["classic",{docs:{path:"../../docs",sidebarPath:"./sidebars.ts",remarkPlugins:[null],rehypePlugins:[null]},theme:{customCss:"./src/css/custom.css"}}]],stylesheets:[{href:"https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css",type:"text/css",integrity:"sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM",crossorigin:"anonymous"}],themeConfig:{image:"img/docusaurus-social-card.jpg",navbar:{title:"FluentUI Charting",logo:{alt:"FluentUI Charting Logo",src:"img/logo.svg"},items:[{type:"docSidebar",sidebarId:"tutorialSidebar",position:"left",label:"Docs"},{href:"https://github.com/microsoft/fluentui-charting-contrib",label:"GitHub",position:"right"}],hideOnScroll:!1},footer:{style:"dark",links:[{title:"Docs",items:[{label:"Docs",to:"/docs/Fluent-React-Charting"}]},{title:"FluentUI",items:[{label:"Public Developer Docsite",href:"https://aka.ms/fluentcharting"},{label:"Github",href:"https://github.com/microsoft/fluentui"}]},{title:"FluentUI Charting Contrib",items:[{label:"GitHub",href:"https://github.com/microsoft/fluentui-charting-contrib"}]}],copyright:"Copyright \xa9 2024 Microsoft"},prism:{theme:{plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},darkTheme:{plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},additionalLanguages:[],magicComments:[{className:"theme-code-block-highlighted-line",line:"highlight-next-line",block:{start:"highlight-start",end:"highlight-end"}}]},algolia:{appId:"XZ2D9M7V2V",apiKey:"dbef9c4c79e37ac05ce104dbd93faeec",indexName:"fluentui-charting-contrib",contextualSearch:!1,searchParameters:{},searchPagePath:"search"},colorMode:{defaultMode:"light",disableSwitch:!1,respectPrefersColorScheme:!1},docs:{versionPersistence:"localStorage",sidebar:{hideable:!1,autoCollapseCategories:!1}},metadata:[],tableOfContents:{minHeadingLevel:2,maxHeadingLevel:3}},baseUrlIssueBanner:!0,onBrokenAnchors:"warn",onDuplicateRoutes:"warn",customFields:{},plugins:[],themes:[],scripts:[],headTags:[],clientModules:[],titleDelimiter:"|",noIndex:!1,markdown:{format:"mdx",mermaid:!1,mdx1Compat:{comments:!0,admonitions:!0,headingIds:!0}}}},7462:(e,t,n)=>{"use strict";function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;tr})},5068:(e,t,n)=>{"use strict";function r(e,t){return r=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},r(e,t)}function a(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,r(e,t)}n.d(t,{Z:()=>a})},3366:(e,t,n)=>{"use strict";function r(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r=0||(a[n]=e[n]);return a}n.d(t,{Z:()=>r})},512:(e,t,n)=>{"use strict";function r(e){var t,n,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;ta});const a=function(){for(var e,t,n=0,a="",o=arguments.length;n{"use strict";n.d(t,{p1:()=>_,y$:()=>ee});var r,a,o,i,l,s,c,u=n(7294),d=n(512),p=Object.create,f=Object.defineProperty,h=Object.defineProperties,m=Object.getOwnPropertyDescriptor,g=Object.getOwnPropertyDescriptors,b=Object.getOwnPropertyNames,y=Object.getOwnPropertySymbols,v=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable,x=(e,t,n)=>t in e?f(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,S=(e,t)=>{for(var n in t||(t={}))w.call(t,n)&&x(e,n,t[n]);if(y)for(var n of y(t))k.call(t,n)&&x(e,n,t[n]);return e},C=(e,t)=>h(e,g(t)),T=(e,t)=>{var n={};for(var r in e)w.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&y)for(var r of y(e))t.indexOf(r)<0&&k.call(e,r)&&(n[r]=e[r]);return n},E=(r={"../../node_modules/.pnpm/prismjs@1.29.0_patch_hash=vrxx3pzkik6jpmgpayxfjunetu/node_modules/prismjs/prism.js"(e,t){var n=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},r={util:{encode:function e(t){return t instanceof a?new a(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/=d.reach);S+=x.value.length,x=x.next){var C=x.value;if(t.length>e.length)return;if(!(C instanceof a)){var T,E=1;if(y){if(!(T=o(k,S,e,b))||T.index>=e.length)break;var _=T.index,A=T.index+T[0].length,P=S;for(P+=x.value.length;_>=P;)P+=(x=x.next).value.length;if(S=P-=x.value.length,x.value instanceof a)continue;for(var L=x;L!==t.tail&&(Pd.reach&&(d.reach=O);var D=x.prev;if(R&&(D=s(t,D,R),S+=R.length),c(t,D,E),x=s(t,D,new a(p,g?r.tokenize(j,g):j,v,j)),N&&s(t,x,N),E>1){var I={cause:p+","+h,reach:O};i(e,t,n,x.prev,S,I),d&&I.reach>d.reach&&(d.reach=I.reach)}}}}}}function l(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function s(e,t,n){var r=t.next,a={value:n,prev:t,next:r};return t.next=a,r.prev=a,e.length++,a}function c(e,t,n){for(var r=t.next,a=0;a"+o.content+""},r}();t.exports=n,n.default=n}},function(){return a||(0,r[b(r)[0]])((a={exports:{}}).exports,a),a.exports}),_=((e,t,n)=>(n=null!=e?p(v(e)):{},((e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of b(t))w.call(e,a)||a===n||f(e,a,{get:()=>t[a],enumerable:!(r=m(t,a))||r.enumerable});return e})(!t&&e&&e.__esModule?n:f(n,"default",{value:e,enumerable:!0}),e)))(E());_.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},_.languages.markup.tag.inside["attr-value"].inside.entity=_.languages.markup.entity,_.languages.markup.doctype.inside["internal-subset"].inside=_.languages.markup,_.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(_.languages.markup.tag,"addInlined",{value:function(e,t){var n;(t=((n=((n={})["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:_.languages[t]},n.cdata=/^$/i,{"included-cdata":{pattern://i,inside:n}}))["language-"+t]={pattern:/[\s\S]+/,inside:_.languages[t]},{}))[e]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:n},_.languages.insertBefore("markup","cdata",t)}}),Object.defineProperty(_.languages.markup.tag,"addAttribute",{value:function(e,t){_.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:_.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),_.languages.html=_.languages.markup,_.languages.mathml=_.languages.markup,_.languages.svg=_.languages.markup,_.languages.xml=_.languages.extend("markup",{}),_.languages.ssml=_.languages.xml,_.languages.atom=_.languages.xml,_.languages.rss=_.languages.xml,o=_,i={pattern:/\\[\\(){}[\]^$+*?|.]/,alias:"escape"},s="(?:[^\\\\-]|"+(l=/\\(?:x[\da-fA-F]{2}|u[\da-fA-F]{4}|u\{[\da-fA-F]+\}|0[0-7]{0,2}|[123][0-7]{2}|c[a-zA-Z]|.)/).source+")",s=RegExp(s+"-"+s),c={pattern:/(<|')[^<>']+(?=[>']$)/,lookbehind:!0,alias:"variable"},o.languages.regex={"char-class":{pattern:/((?:^|[^\\])(?:\\\\)*)\[(?:[^\\\]]|\\[\s\S])*\]/,lookbehind:!0,inside:{"char-class-negation":{pattern:/(^\[)\^/,lookbehind:!0,alias:"operator"},"char-class-punctuation":{pattern:/^\[|\]$/,alias:"punctuation"},range:{pattern:s,inside:{escape:l,"range-punctuation":{pattern:/-/,alias:"operator"}}},"special-escape":i,"char-set":{pattern:/\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},escape:l}},"special-escape":i,"char-set":{pattern:/\.|\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},backreference:[{pattern:/\\(?![123][0-7]{2})[1-9]/,alias:"keyword"},{pattern:/\\k<[^<>']+>/,alias:"keyword",inside:{"group-name":c}}],anchor:{pattern:/[$^]|\\[ABbGZz]/,alias:"function"},escape:l,group:[{pattern:/\((?:\?(?:<[^<>']+>|'[^<>']+'|[>:]|]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},_.languages.javascript=_.languages.extend("clike",{"class-name":[_.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),_.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,_.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp(/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source+/\//.source+"(?:"+/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source+"|"+/(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source+")"+/(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:_.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:_.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:_.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:_.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:_.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),_.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:_.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),_.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),_.languages.markup&&(_.languages.markup.tag.addInlined("script","javascript"),_.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),_.languages.js=_.languages.javascript,_.languages.actionscript=_.languages.extend("javascript",{keyword:/\b(?:as|break|case|catch|class|const|default|delete|do|dynamic|each|else|extends|final|finally|for|function|get|if|implements|import|in|include|instanceof|interface|internal|is|namespace|native|new|null|override|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|use|var|void|while|with)\b/,operator:/\+\+|--|(?:[+\-*\/%^]|&&?|\|\|?|<>?>?|[!=]=?)=?|[~?@]/}),_.languages.actionscript["class-name"].alias="function",delete _.languages.actionscript.parameter,delete _.languages.actionscript["literal-property"],_.languages.markup&&_.languages.insertBefore("actionscript","string",{xml:{pattern:/(^|[^.])<\/?\w+(?:\s+[^\s>\/=]+=("|')(?:\\[\s\S]|(?!\2)[^\\])*\2)*\s*\/?>/,lookbehind:!0,inside:_.languages.markup}}),function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(_),function(e){var t=e.languages.javadoclike={parameter:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*@(?:arg|arguments|param)\s+)\w+/m,lookbehind:!0},keyword:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*|\{)@[a-z][a-zA-Z-]+\b/m,lookbehind:!0},punctuation:/[{}]/};Object.defineProperty(t,"addSupport",{value:function(t,n){(t="string"==typeof t?[t]:t).forEach((function(t){var r=function(e){e.inside||(e.inside={}),e.inside.rest=n},a="doc-comment";if(o=e.languages[t]){var o,i=o[a];if((i=i||(o=e.languages.insertBefore(t,"comment",{"doc-comment":{pattern:/(^|[^\\])\/\*\*[^/][\s\S]*?(?:\*\/|$)/,lookbehind:!0,alias:"comment"}}))[a])instanceof RegExp&&(i=o[a]={pattern:i}),Array.isArray(i))for(var l=0,s=i.length;l|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}}),{pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0}),{pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0});e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|RebeccaPurple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,number:n})}(_),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,r="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",a=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-])(?:[ \t]*(?:(?![#:])|:))*/.source.replace(//g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),o=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function i(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<>[ \t]+)?)(?:<>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return e}));return RegExp(n,t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<>/g,(function(){return r}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<>[ \t]+)?)<>(?=\s*:\s)/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return"(?:"+a+"|"+o+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:i(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:i(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:i(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:i(o),lookbehind:!0,greedy:!0},number:{pattern:i(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(_),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(//g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,a=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return r})),o=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source,i=(e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+a+o+"(?:"+a+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+a+o+")(?:"+a+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+a+")"+o+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+a+"$"),inside:{"table-header":{pattern:RegExp(r),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)|_(?:(?!_))+_)+__\b|\*\*(?:(?!\*)|\*(?:(?!\*))+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)|__(?:(?!_))+__)+_\b|\*(?:(?!\*)|\*\*(?:(?!\*))+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\]))+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,r=t.length;n",quot:'"'},s=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(_),_.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:_.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},_.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,r=t.inside.interpolation,a=r.inside["interpolation-punctuation"],o=r.pattern.source;function i(t,r){if(e.languages[t])return{pattern:RegExp("((?:"+r+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function l(t,n,r){return t={code:t,grammar:n,language:r},e.hooks.run("before-tokenize",t),t.tokens=e.tokenize(t.code,t.grammar),e.hooks.run("after-tokenize",t),t.tokens}function s(t,n,i){var s=e.tokenize(t,{interpolation:{pattern:RegExp(o),lookbehind:!0}}),c=0,u={},d=(s=l(s.map((function(e){if("string"==typeof e)return e;var n,r;for(e=e.content;-1!==t.indexOf((r=c++,n="___"+i.toUpperCase()+"_"+r+"___")););return u[n]=e,n})).join(""),n,i),Object.keys(u));return c=0,function t(n){for(var o=0;o=d.length)return;var i,s,p,f,h,m,g,b=n[o];"string"==typeof b||"string"==typeof b.content?(i=d[c],-1!==(g=(m="string"==typeof b?b:b.content).indexOf(i))&&(++c,s=m.substring(0,g),h=u[i],p=void 0,(f={})["interpolation-punctuation"]=a,3===(f=e.tokenize(h,f)).length&&((p=[1,1]).push.apply(p,l(f[1],e.languages.javascript,"javascript")),f.splice.apply(f,p)),p=new e.Token("interpolation",f,r.alias,h),f=m.substring(g+i.length),h=[],s&&h.push(s),h.push(p),f&&(t(m=[f]),h.push.apply(h,m)),"string"==typeof b?(n.splice.apply(n,[o,1].concat(h)),o+=h.length-1):b.content=h)):(g=b.content,Array.isArray(g)?t(g):t([g]))}}(s),new e.Token(i,s,"language-"+i,t)}e.languages.javascript["template-string"]=[i("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),i("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),i("svg",/\bsvg/.source),i("markdown",/\b(?:markdown|md)/.source),i("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),i("sql",/\bsql/.source),t].filter(Boolean);var c={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function u(e){return"string"==typeof e?e:Array.isArray(e)?e.map(u).join(""):u(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in c&&function t(n){for(var r=0,a=n.length;r]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(_),function(e){var t=e.languages.javascript,n=/\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})+\}/.source,r="(@(?:arg|argument|param|property)\\s+(?:"+n+"\\s+)?)";e.languages.jsdoc=e.languages.extend("javadoclike",{parameter:{pattern:RegExp(r+/(?:(?!\s)[$\w\xA0-\uFFFF.])+(?=\s|$)/.source),lookbehind:!0,inside:{punctuation:/\./}}}),e.languages.insertBefore("jsdoc","keyword",{"optional-parameter":{pattern:RegExp(r+/\[(?:(?!\s)[$\w\xA0-\uFFFF.])+(?:=[^[\]]+)?\](?=\s|$)/.source),lookbehind:!0,inside:{parameter:{pattern:/(^\[)[$\w\xA0-\uFFFF\.]+/,lookbehind:!0,inside:{punctuation:/\./}},code:{pattern:/(=)[\s\S]*(?=\]$)/,lookbehind:!0,inside:t,alias:"language-javascript"},punctuation:/[=[\]]/}},"class-name":[{pattern:RegExp(/(@(?:augments|class|extends|interface|memberof!?|template|this|typedef)\s+(?:\s+)?)[A-Z]\w*(?:\.[A-Z]\w*)*/.source.replace(//g,(function(){return n}))),lookbehind:!0,inside:{punctuation:/\./}},{pattern:RegExp("(@[a-z]+\\s+)"+n),lookbehind:!0,inside:{string:t.string,number:t.number,boolean:t.boolean,keyword:e.languages.typescript.keyword,operator:/=>|\.\.\.|[&|?:*]/,punctuation:/[.,;=<>{}()[\]]/}}],example:{pattern:/(@example\s+(?!\s))(?:[^@\s]|\s+(?!\s))+?(?=\s*(?:\*\s*)?(?:@\w|\*\/))/,lookbehind:!0,inside:{code:{pattern:/^([\t ]*(?:\*\s*)?)\S.*$/m,lookbehind:!0,inside:t,alias:"language-javascript"}}}}),e.languages.javadoclike.addSupport("javascript",e.languages.jsdoc)}(_),function(e){e.languages.flow=e.languages.extend("javascript",{}),e.languages.insertBefore("flow","keyword",{type:[{pattern:/\b(?:[Bb]oolean|Function|[Nn]umber|[Ss]tring|[Ss]ymbol|any|mixed|null|void)\b/,alias:"class-name"}]}),e.languages.flow["function-variable"].pattern=/(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=\s*(?:function\b|(?:\([^()]*\)(?:\s*:\s*\w+)?|(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/i,delete e.languages.flow.parameter,e.languages.insertBefore("flow","operator",{"flow-punctuation":{pattern:/\{\||\|\}/,alias:"punctuation"}}),Array.isArray(e.languages.flow.keyword)||(e.languages.flow.keyword=[e.languages.flow.keyword]),e.languages.flow.keyword.unshift({pattern:/(^|[^$]\b)(?:Class|declare|opaque|type)\b(?!\$)/,lookbehind:!0},{pattern:/(^|[^$]\B)\$(?:Diff|Enum|Exact|Keys|ObjMap|PropertyType|Record|Shape|Subtype|Supertype|await)\b(?!\$)/,lookbehind:!0})}(_),_.languages.n4js=_.languages.extend("javascript",{keyword:/\b(?:Array|any|boolean|break|case|catch|class|const|constructor|continue|debugger|declare|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|module|new|null|number|package|private|protected|public|return|set|static|string|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/}),_.languages.insertBefore("n4js","constant",{annotation:{pattern:/@+\w+/,alias:"operator"}}),_.languages.n4jsd=_.languages.n4js,function(e){function t(e,t){return RegExp(e.replace(//g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:(?:\s*,\s*(?:\*\s*as\s+|\{[^{}]*\}))?|\*\s*as\s+|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],r=0;r*\.{3}(?:[^{}]|)*\})/.source;function o(e,t){return e=e.replace(//g,(function(){return n})).replace(//g,(function(){return r})).replace(//g,(function(){return a})),RegExp(e,t)}function i(t){for(var n=[],r=0;r"!==a.content[a.content.length-1].content&&n.push({tagName:l(a.content[0].content[1]),openedBraces:0}):0+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:o(//.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:o(/=/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var l=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(l).join(""):""};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||i(e.tokens)}))}(_),function(e){var t=e.util.clone(e.languages.typescript);(t=(e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"],e.languages.tsx.tag)).pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+t.pattern.source+")",t.pattern.flags),t.lookbehind=!0}(_),_.languages.swift={comment:{pattern:/(^|[^\\:])(?:\/\/.*|\/\*(?:[^/*]|\/(?!\*)|\*(?!\/)|\/\*(?:[^*]|\*(?!\/))*\*\/)*\*\/)/,lookbehind:!0,greedy:!0},"string-literal":[{pattern:RegExp(/(^|[^"#])/.source+"(?:"+/"(?:\\(?:\((?:[^()]|\([^()]*\))*\)|\r\n|[^(])|[^\\\r\n"])*"/.source+"|"+/"""(?:\\(?:\((?:[^()]|\([^()]*\))*\)|[^(])|[^\\"]|"(?!""))*"""/.source+")"+/(?!["#])/.source),lookbehind:!0,greedy:!0,inside:{interpolation:{pattern:/(\\\()(?:[^()]|\([^()]*\))*(?=\))/,lookbehind:!0,inside:null},"interpolation-punctuation":{pattern:/^\)|\\\($/,alias:"punctuation"},punctuation:/\\(?=[\r\n])/,string:/[\s\S]+/}},{pattern:RegExp(/(^|[^"#])(#+)/.source+"(?:"+/"(?:\\(?:#+\((?:[^()]|\([^()]*\))*\)|\r\n|[^#])|[^\\\r\n])*?"/.source+"|"+/"""(?:\\(?:#+\((?:[^()]|\([^()]*\))*\)|[^#])|[^\\])*?"""/.source+")\\2"),lookbehind:!0,greedy:!0,inside:{interpolation:{pattern:/(\\#+\()(?:[^()]|\([^()]*\))*(?=\))/,lookbehind:!0,inside:null},"interpolation-punctuation":{pattern:/^\)|\\#+\($/,alias:"punctuation"},string:/[\s\S]+/}}],directive:{pattern:RegExp(/#/.source+"(?:"+/(?:elseif|if)\b/.source+"(?:[ \t]*"+/(?:![ \t]*)?(?:\b\w+\b(?:[ \t]*\((?:[^()]|\([^()]*\))*\))?|\((?:[^()]|\([^()]*\))*\))(?:[ \t]*(?:&&|\|\|))?/.source+")+|"+/(?:else|endif)\b/.source+")"),alias:"property",inside:{"directive-name":/^#\w+/,boolean:/\b(?:false|true)\b/,number:/\b\d+(?:\.\d+)*\b/,operator:/!|&&|\|\||[<>]=?/,punctuation:/[(),]/}},literal:{pattern:/#(?:colorLiteral|column|dsohandle|file(?:ID|Literal|Path)?|function|imageLiteral|line)\b/,alias:"constant"},"other-directive":{pattern:/#\w+\b/,alias:"property"},attribute:{pattern:/@\w+/,alias:"atrule"},"function-definition":{pattern:/(\bfunc\s+)\w+/,lookbehind:!0,alias:"function"},label:{pattern:/\b(break|continue)\s+\w+|\b[a-zA-Z_]\w*(?=\s*:\s*(?:for|repeat|while)\b)/,lookbehind:!0,alias:"important"},keyword:/\b(?:Any|Protocol|Self|Type|actor|as|assignment|associatedtype|associativity|async|await|break|case|catch|class|continue|convenience|default|defer|deinit|didSet|do|dynamic|else|enum|extension|fallthrough|fileprivate|final|for|func|get|guard|higherThan|if|import|in|indirect|infix|init|inout|internal|is|isolated|lazy|left|let|lowerThan|mutating|none|nonisolated|nonmutating|open|operator|optional|override|postfix|precedencegroup|prefix|private|protocol|public|repeat|required|rethrows|return|right|safe|self|set|some|static|struct|subscript|super|switch|throw|throws|try|typealias|unowned|unsafe|var|weak|where|while|willSet)\b/,boolean:/\b(?:false|true)\b/,nil:{pattern:/\bnil\b/,alias:"constant"},"short-argument":/\$\d+\b/,omit:{pattern:/\b_\b/,alias:"keyword"},number:/\b(?:[\d_]+(?:\.[\de_]+)?|0x[a-f0-9_]+(?:\.[a-f0-9p_]+)?|0b[01_]+|0o[0-7_]+)\b/i,"class-name":/\b[A-Z](?:[A-Z_\d]*[a-z]\w*)?\b/,function:/\b[a-z_]\w*(?=\s*\()/i,constant:/\b(?:[A-Z_]{2,}|k[A-Z][A-Za-z_]+)\b/,operator:/[-+*/%=!<>&|^~?]+|\.[.\-+*/%=!<>&|^~?]+/,punctuation:/[{}[\]();,.:\\]/},_.languages.swift["string-literal"].forEach((function(e){e.inside.interpolation.inside=_.languages.swift})),function(e){e.languages.kotlin=e.languages.extend("clike",{keyword:{pattern:/(^|[^.])\b(?:abstract|actual|annotation|as|break|by|catch|class|companion|const|constructor|continue|crossinline|data|do|dynamic|else|enum|expect|external|final|finally|for|fun|get|if|import|in|infix|init|inline|inner|interface|internal|is|lateinit|noinline|null|object|open|operator|out|override|package|private|protected|public|reified|return|sealed|set|super|suspend|tailrec|this|throw|to|try|typealias|val|var|vararg|when|where|while)\b/,lookbehind:!0},function:[{pattern:/(?:`[^\r\n`]+`|\b\w+)(?=\s*\()/,greedy:!0},{pattern:/(\.)(?:`[^\r\n`]+`|\w+)(?=\s*\{)/,lookbehind:!0,greedy:!0}],number:/\b(?:0[xX][\da-fA-F]+(?:_[\da-fA-F]+)*|0[bB][01]+(?:_[01]+)*|\d+(?:_\d+)*(?:\.\d+(?:_\d+)*)?(?:[eE][+-]?\d+(?:_\d+)*)?[fFL]?)\b/,operator:/\+[+=]?|-[-=>]?|==?=?|!(?:!|==?)?|[\/*%<>]=?|[?:]:?|\.\.|&&|\|\||\b(?:and|inv|or|shl|shr|ushr|xor)\b/}),delete e.languages.kotlin["class-name"];var t={"interpolation-punctuation":{pattern:/^\$\{?|\}$/,alias:"punctuation"},expression:{pattern:/[\s\S]+/,inside:e.languages.kotlin}};e.languages.insertBefore("kotlin","string",{"string-literal":[{pattern:/"""(?:[^$]|\$(?:(?!\{)|\{[^{}]*\}))*?"""/,alias:"multiline",inside:{interpolation:{pattern:/\$(?:[a-z_]\w*|\{[^{}]*\})/i,inside:t},string:/[\s\S]+/}},{pattern:/"(?:[^"\\\r\n$]|\\.|\$(?:(?!\{)|\{[^{}]*\}))*"/,alias:"singleline",inside:{interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$(?:[a-z_]\w*|\{[^{}]*\})/i,lookbehind:!0,inside:t},string:/[\s\S]+/}}],char:{pattern:/'(?:[^'\\\r\n]|\\(?:.|u[a-fA-F0-9]{0,4}))'/,greedy:!0}}),delete e.languages.kotlin.string,e.languages.insertBefore("kotlin","keyword",{annotation:{pattern:/\B@(?:\w+:)?(?:[A-Z]\w*|\[[^\]]+\])/,alias:"builtin"}}),e.languages.insertBefore("kotlin","function",{label:{pattern:/\b\w+@|@\w+\b/,alias:"symbol"}}),e.languages.kt=e.languages.kotlin,e.languages.kts=e.languages.kotlin}(_),_.languages.c=_.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),_.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),_.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},_.languages.c.string],char:_.languages.c.char,comment:_.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:_.languages.c}}}}),_.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete _.languages.c.boolean,_.languages.objectivec=_.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete _.languages.objectivec["class-name"],_.languages.objc=_.languages.objectivec,_.languages.reason=_.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),_.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete _.languages.reason.function,function(e){for(var t=/\/\*(?:[^*/]|\*(?!\/)|\/(?!\*)|)*\*\//.source,n=0;n<2;n++)t=t.replace(//g,(function(){return t}));t=t.replace(//g,(function(){return/[^\s\S]/.source})),e.languages.rust={comment:[{pattern:RegExp(/(^|[^\\])/.source+t),lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/b?"(?:\\[\s\S]|[^\\"])*"|b?r(#*)"(?:[^"]|"(?!\1))*"\1/,greedy:!0},char:{pattern:/b?'(?:\\(?:x[0-7][\da-fA-F]|u\{(?:[\da-fA-F]_*){1,6}\}|.)|[^\\\r\n\t'])'/,greedy:!0},attribute:{pattern:/#!?\[(?:[^\[\]"]|"(?:\\[\s\S]|[^\\"])*")*\]/,greedy:!0,alias:"attr-name",inside:{string:null}},"closure-params":{pattern:/([=(,:]\s*|\bmove\s*)\|[^|]*\||\|[^|]*\|(?=\s*(?:\{|->))/,lookbehind:!0,greedy:!0,inside:{"closure-punctuation":{pattern:/^\||\|$/,alias:"punctuation"},rest:null}},"lifetime-annotation":{pattern:/'\w+/,alias:"symbol"},"fragment-specifier":{pattern:/(\$\w+:)[a-z]+/,lookbehind:!0,alias:"punctuation"},variable:/\$\w+/,"function-definition":{pattern:/(\bfn\s+)\w+/,lookbehind:!0,alias:"function"},"type-definition":{pattern:/(\b(?:enum|struct|trait|type|union)\s+)\w+/,lookbehind:!0,alias:"class-name"},"module-declaration":[{pattern:/(\b(?:crate|mod)\s+)[a-z][a-z_\d]*/,lookbehind:!0,alias:"namespace"},{pattern:/(\b(?:crate|self|super)\s*)::\s*[a-z][a-z_\d]*\b(?:\s*::(?:\s*[a-z][a-z_\d]*\s*::)*)?/,lookbehind:!0,alias:"namespace",inside:{punctuation:/::/}}],keyword:[/\b(?:Self|abstract|as|async|await|become|box|break|const|continue|crate|do|dyn|else|enum|extern|final|fn|for|if|impl|in|let|loop|macro|match|mod|move|mut|override|priv|pub|ref|return|self|static|struct|super|trait|try|type|typeof|union|unsafe|unsized|use|virtual|where|while|yield)\b/,/\b(?:bool|char|f(?:32|64)|[ui](?:8|16|32|64|128|size)|str)\b/],function:/\b[a-z_]\w*(?=\s*(?:::\s*<|\())/,macro:{pattern:/\b\w+!/,alias:"property"},constant:/\b[A-Z_][A-Z_\d]+\b/,"class-name":/\b[A-Z]\w*\b/,namespace:{pattern:/(?:\b[a-z][a-z_\d]*\s*::\s*)*\b[a-z][a-z_\d]*\s*::(?!\s*<)/,inside:{punctuation:/::/}},number:/\b(?:0x[\dA-Fa-f](?:_?[\dA-Fa-f])*|0o[0-7](?:_?[0-7])*|0b[01](?:_?[01])*|(?:(?:\d(?:_?\d)*)?\.)?\d(?:_?\d)*(?:[Ee][+-]?\d+)?)(?:_?(?:f32|f64|[iu](?:8|16|32|64|size)?))?\b/,boolean:/\b(?:false|true)\b/,punctuation:/->|\.\.=|\.{1,3}|::|[{}[\];(),:]/,operator:/[-+*\/%!^]=?|=[=>]?|&[&=]?|\|[|=]?|<>?=?|[@?]/},e.languages.rust["closure-params"].inside.rest=e.languages.rust,e.languages.rust.attribute.inside.string=e.languages.rust.string}(_),_.languages.go=_.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),_.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete _.languages.go["class-name"],function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!)\w+(?:\s*\.\s*\w+)*\b/.source.replace(//g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!)\w+/.source.replace(//g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/(?:\s*:\s*)?|:\s*/.source.replace(//g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(_),_.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern://,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},_.languages.python["string-interpolation"].inside.interpolation.inside.rest=_.languages.python,_.languages.py=_.languages.python;((e,t)=>{for(var n in t)f(e,n,{get:t[n],enumerable:!0})})({},{dracula:()=>A,duotoneDark:()=>P,duotoneLight:()=>L,github:()=>j,jettwaveDark:()=>q,jettwaveLight:()=>Z,nightOwl:()=>R,nightOwlLight:()=>N,oceanicNext:()=>I,okaidia:()=>M,oneDark:()=>G,oneLight:()=>V,palenight:()=>F,shadesOfPurple:()=>B,synthwave84:()=>z,ultramin:()=>U,vsDark:()=>$,vsLight:()=>H});var A={plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},P={plain:{backgroundColor:"#2a2734",color:"#9a86fd"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#6c6783"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#e09142"}},{types:["property","function"],style:{color:"#9a86fd"}},{types:["tag-id","selector","atrule-id"],style:{color:"#eeebff"}},{types:["attr-name"],style:{color:"#c4b9fe"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule","placeholder","variable"],style:{color:"#ffcc99"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#c4b9fe"}}]},L={plain:{backgroundColor:"#faf8f5",color:"#728fcb"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#b6ad9a"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#063289"}},{types:["property","function"],style:{color:"#b29762"}},{types:["tag-id","selector","atrule-id"],style:{color:"#2d2006"}},{types:["attr-name"],style:{color:"#896724"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule"],style:{color:"#728fcb"}},{types:["placeholder","variable"],style:{color:"#93abdc"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#896724"}}]},j={plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},R={plain:{color:"#d6deeb",backgroundColor:"#011627"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(99, 119, 119)",fontStyle:"italic"}},{types:["string","url"],style:{color:"rgb(173, 219, 103)"}},{types:["variable"],style:{color:"rgb(214, 222, 235)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation"],style:{color:"rgb(199, 146, 234)"}},{types:["selector","doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(255, 203, 139)"}},{types:["tag","operator","keyword"],style:{color:"rgb(127, 219, 202)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["property"],style:{color:"rgb(128, 203, 196)"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}}]},N={plain:{color:"#403f53",backgroundColor:"#FBFBFB"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(72, 118, 214)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(152, 159, 177)",fontStyle:"italic"}},{types:["string","builtin","char","constant","url"],style:{color:"rgb(72, 118, 214)"}},{types:["variable"],style:{color:"rgb(201, 103, 101)"}},{types:["number"],style:{color:"rgb(170, 9, 130)"}},{types:["punctuation"],style:{color:"rgb(153, 76, 195)"}},{types:["function","selector","doctype"],style:{color:"rgb(153, 76, 195)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(17, 17, 17)"}},{types:["tag"],style:{color:"rgb(153, 76, 195)"}},{types:["operator","property","keyword","namespace"],style:{color:"rgb(12, 150, 155)"}},{types:["boolean"],style:{color:"rgb(188, 84, 84)"}}]},O="#c5a5c5",D="#8dc891",I={plain:{backgroundColor:"#282c34",color:"#ffffff"},styles:[{types:["attr-name"],style:{color:O}},{types:["attr-value"],style:{color:D}},{types:["comment","block-comment","prolog","doctype","cdata","shebang"],style:{color:"#999999"}},{types:["property","number","function-name","constant","symbol","deleted"],style:{color:"#5a9bcf"}},{types:["boolean"],style:{color:"#ff8b50"}},{types:["tag"],style:{color:"#fc929e"}},{types:["string"],style:{color:D}},{types:["punctuation"],style:{color:D}},{types:["selector","char","builtin","inserted"],style:{color:"#D8DEE9"}},{types:["function"],style:{color:"#79b6f2"}},{types:["operator","entity","url","variable"],style:{color:"#d7deea"}},{types:["keyword"],style:{color:O}},{types:["atrule","class-name"],style:{color:"#FAC863"}},{types:["important"],style:{fontWeight:"400"}},{types:["bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}}]},M={plain:{color:"#f8f8f2",backgroundColor:"#272822"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"#f92672",fontStyle:"italic"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"#8292a2",fontStyle:"italic"}},{types:["string","url"],style:{color:"#a6e22e"}},{types:["variable"],style:{color:"#f8f8f2"}},{types:["number"],style:{color:"#ae81ff"}},{types:["builtin","char","constant","function","class-name"],style:{color:"#e6db74"}},{types:["punctuation"],style:{color:"#f8f8f2"}},{types:["selector","doctype"],style:{color:"#a6e22e",fontStyle:"italic"}},{types:["tag","operator","keyword"],style:{color:"#66d9ef"}},{types:["boolean"],style:{color:"#ae81ff"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)",opacity:.7}},{types:["tag","property"],style:{color:"#f92672"}},{types:["attr-name"],style:{color:"#a6e22e !important"}},{types:["doctype"],style:{color:"#8292a2"}},{types:["rule"],style:{color:"#e6db74"}}]},F={plain:{color:"#bfc7d5",backgroundColor:"#292d3e"},styles:[{types:["comment"],style:{color:"rgb(105, 112, 152)",fontStyle:"italic"}},{types:["string","inserted"],style:{color:"rgb(195, 232, 141)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation","selector"],style:{color:"rgb(199, 146, 234)"}},{types:["variable"],style:{color:"rgb(191, 199, 213)"}},{types:["class-name","attr-name"],style:{color:"rgb(255, 203, 107)"}},{types:["tag","deleted"],style:{color:"rgb(255, 85, 114)"}},{types:["operator"],style:{color:"rgb(137, 221, 255)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["keyword"],style:{fontStyle:"italic"}},{types:["doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}},{types:["url"],style:{color:"rgb(221, 221, 221)"}}]},B={plain:{color:"#9EFEFF",backgroundColor:"#2D2A55"},styles:[{types:["changed"],style:{color:"rgb(255, 238, 128)"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)"}},{types:["comment"],style:{color:"rgb(179, 98, 255)",fontStyle:"italic"}},{types:["punctuation"],style:{color:"rgb(255, 255, 255)"}},{types:["constant"],style:{color:"rgb(255, 98, 140)"}},{types:["string","url"],style:{color:"rgb(165, 255, 144)"}},{types:["variable"],style:{color:"rgb(255, 238, 128)"}},{types:["number","boolean"],style:{color:"rgb(255, 98, 140)"}},{types:["attr-name"],style:{color:"rgb(255, 180, 84)"}},{types:["keyword","operator","property","namespace","tag","selector","doctype"],style:{color:"rgb(255, 157, 0)"}},{types:["builtin","char","constant","function","class-name"],style:{color:"rgb(250, 208, 0)"}}]},z={plain:{backgroundColor:"linear-gradient(to bottom, #2a2139 75%, #34294f)",backgroundImage:"#34294f",color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"},styles:[{types:["comment","block-comment","prolog","doctype","cdata"],style:{color:"#495495",fontStyle:"italic"}},{types:["punctuation"],style:{color:"#ccc"}},{types:["tag","attr-name","namespace","number","unit","hexcode","deleted"],style:{color:"#e2777a"}},{types:["property","selector"],style:{color:"#72f1b8",textShadow:"0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475"}},{types:["function-name"],style:{color:"#6196cc"}},{types:["boolean","selector-id","function"],style:{color:"#fdfdfd",textShadow:"0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975"}},{types:["class-name","maybe-class-name","builtin"],style:{color:"#fff5f6",textShadow:"0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75"}},{types:["constant","symbol"],style:{color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"}},{types:["important","atrule","keyword","selector-class"],style:{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575"}},{types:["string","char","attr-value","regex","variable"],style:{color:"#f87c32"}},{types:["parameter"],style:{fontStyle:"italic"}},{types:["entity","url"],style:{color:"#67cdcc"}},{types:["operator"],style:{color:"ffffffee"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["entity"],style:{cursor:"help"}},{types:["inserted"],style:{color:"green"}}]},U={plain:{color:"#282a2e",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(197, 200, 198)"}},{types:["string","number","builtin","variable"],style:{color:"rgb(150, 152, 150)"}},{types:["class-name","function","tag","attr-name"],style:{color:"rgb(40, 42, 46)"}}]},$={plain:{color:"#9CDCFE",backgroundColor:"#1E1E1E"},styles:[{types:["prolog"],style:{color:"rgb(0, 0, 128)"}},{types:["comment"],style:{color:"rgb(106, 153, 85)"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"rgb(86, 156, 214)"}},{types:["number","inserted"],style:{color:"rgb(181, 206, 168)"}},{types:["constant"],style:{color:"rgb(100, 102, 149)"}},{types:["attr-name","variable"],style:{color:"rgb(156, 220, 254)"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"rgb(206, 145, 120)"}},{types:["selector"],style:{color:"rgb(215, 186, 125)"}},{types:["tag"],style:{color:"rgb(78, 201, 176)"}},{types:["tag"],languages:["markup"],style:{color:"rgb(86, 156, 214)"}},{types:["punctuation","operator"],style:{color:"rgb(212, 212, 212)"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"rgb(220, 220, 170)"}},{types:["class-name"],style:{color:"rgb(78, 201, 176)"}},{types:["char"],style:{color:"rgb(209, 105, 105)"}}]},H={plain:{color:"#000000",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(0, 128, 0)"}},{types:["builtin"],style:{color:"rgb(0, 112, 193)"}},{types:["number","variable","inserted"],style:{color:"rgb(9, 134, 88)"}},{types:["operator"],style:{color:"rgb(0, 0, 0)"}},{types:["constant","char"],style:{color:"rgb(129, 31, 63)"}},{types:["tag"],style:{color:"rgb(128, 0, 0)"}},{types:["attr-name"],style:{color:"rgb(255, 0, 0)"}},{types:["deleted","string"],style:{color:"rgb(163, 21, 21)"}},{types:["changed","punctuation"],style:{color:"rgb(4, 81, 165)"}},{types:["function","keyword"],style:{color:"rgb(0, 0, 255)"}},{types:["class-name"],style:{color:"rgb(38, 127, 153)"}}]},q={plain:{color:"#f8fafc",backgroundColor:"#011627"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#569CD6"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#f8fafc"}},{types:["attr-name","variable"],style:{color:"#9CDCFE"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#cbd5e1"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#D4D4D4"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#7dd3fc"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},Z={plain:{color:"#0f172a",backgroundColor:"#f1f5f9"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#0c4a6e"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#0f172a"}},{types:["attr-name","variable"],style:{color:"#0c4a6e"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#64748b"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#475569"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#0e7490"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},G={plain:{backgroundColor:"hsl(220, 13%, 18%)",color:"hsl(220, 14%, 71%)",textShadow:"0 1px rgba(0, 0, 0, 0.3)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(220, 10%, 40%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(220, 14%, 71%)"}},{types:["attr-name","class-name","maybe-class-name","boolean","constant","number","atrule"],style:{color:"hsl(29, 54%, 61%)"}},{types:["keyword"],style:{color:"hsl(286, 60%, 67%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(355, 65%, 65%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value"],style:{color:"hsl(95, 38%, 62%)"}},{types:["variable","operator","function"],style:{color:"hsl(207, 82%, 66%)"}},{types:["url"],style:{color:"hsl(187, 47%, 55%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(220, 14%, 71%)"}}]},V={plain:{backgroundColor:"hsl(230, 1%, 98%)",color:"hsl(230, 8%, 24%)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(230, 4%, 64%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(230, 8%, 24%)"}},{types:["attr-name","class-name","boolean","constant","number","atrule"],style:{color:"hsl(35, 99%, 36%)"}},{types:["keyword"],style:{color:"hsl(301, 63%, 40%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(5, 74%, 59%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value","punctuation"],style:{color:"hsl(119, 34%, 47%)"}},{types:["variable","operator","function"],style:{color:"hsl(221, 87%, 60%)"}},{types:["url"],style:{color:"hsl(198, 99%, 37%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(230, 8%, 24%)"}}]},W=(e,t)=>{const{plain:n}=e,r=e.styles.reduce(((e,n)=>{const{languages:r,style:a}=n;return r&&!r.includes(t)||n.types.forEach((t=>{const n=S(S({},e[t]),a);e[t]=n})),e}),{});return r.root=n,r.plain=C(S({},n),{backgroundColor:void 0}),r},K=/\r\n|\r|\n/,Q=e=>{0===e.length?e.push({types:["plain"],content:"\n",empty:!0}):1===e.length&&""===e[0].content&&(e[0].content="\n",e[0].empty=!0)},Y=(e,t)=>{const n=e.length;return n>0&&e[n-1]===t?e:e.concat(t)},X=e=>{const t=[[]],n=[e],r=[0],a=[e.length];let o=0,i=0,l=[];const s=[l];for(;i>-1;){for(;(o=r[i]++)0?c:["plain"],e=u):(c=Y(c,u.type),u.alias&&(c=Y(c,u.alias)),e=u.content),"string"!=typeof e){i++,t.push(c),n.push(e),r.push(0),a.push(e.length);continue}const d=e.split(K),p=d.length;l.push({types:c,content:d[0]});for(let t=1;t{const o=t.toLowerCase(),i=((e,t)=>{const[n,r]=(0,u.useState)(W(t,e)),a=(0,u.useRef)(),o=(0,u.useRef)();return(0,u.useEffect)((()=>{t===a.current&&e===o.current||(a.current=t,o.current=e,r(W(t,e)))}),[e,t]),n})(o,r),l=(e=>(0,u.useCallback)((t=>{var n=t,{className:r,style:a,line:o}=n,i=T(n,["className","style","line"]);const l=C(S({},i),{className:(0,d.Z)("token-line",r)});return"object"==typeof e&&"plain"in e&&(l.style=e.plain),"object"==typeof a&&(l.style=S(S({},l.style||{}),a)),l}),[e]))(i),s=(e=>{const t=(0,u.useCallback)((({types:t,empty:n})=>{if(null!=e)return 1===t.length&&"plain"===t[0]?null!=n?{display:"inline-block"}:void 0:1===t.length&&null!=n?e[t[0]]:Object.assign(null!=n?{display:"inline-block"}:{},...t.map((t=>e[t])))}),[e]);return(0,u.useCallback)((e=>{var n=e,{token:r,className:a,style:o}=n,i=T(n,["token","className","style"]);const l=C(S({},i),{className:(0,d.Z)("token",...r.types,a),children:r.content,style:t(r)});return null!=o&&(l.style=S(S({},l.style||{}),o)),l}),[t])})(i),c=(({prism:e,code:t,grammar:n,language:r})=>{const a=(0,u.useRef)(e);return(0,u.useMemo)((()=>{if(null==n)return X([t]);const e={code:t,grammar:n,language:r,tokens:[]};return a.current.hooks.run("before-tokenize",e),e.tokens=a.current.tokenize(t,n),a.current.hooks.run("after-tokenize",e),X(e.tokens)}),[t,n,r])})({prism:a,language:o,code:n,grammar:a.languages[o]});return e({tokens:c,className:`prism-code language-${o}`,style:null!=i?i.root:{},getLineProps:l,getTokenProps:s})},ee=e=>(0,u.createElement)(J,C(S({},e),{prism:e.prism||_,theme:e.theme||$,code:e.code,language:e.language}))},8776:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=!0,a="Invariant failed";function o(e,t){if(!e){if(r)throw new Error(a);var n="function"==typeof t?t():t,o=n?"".concat(a,": ").concat(n):a;throw new Error(o)}}},7529:e=>{"use strict";e.exports={}},6887:e=>{"use strict";e.exports=JSON.parse('{"/fluentui-charting-contrib/search-d67":{"__comp":"1a4e3797","__context":{"plugin":"5fc975be"}},"/fluentui-charting-contrib/docs-94c":{"__comp":"5e95c892","__context":{"plugin":"a85ccfbf"}},"/fluentui-charting-contrib/docs-509":{"__comp":"a7bd4aaa","version":"935f2afb"},"/fluentui-charting-contrib/docs-e25":{"__comp":"a94703ab"},"/fluentui-charting-contrib/docs/Accessibility-9b7":{"__comp":"17896441","content":"6fe236e0"},"/fluentui-charting-contrib/docs/CHANGELOG-84b":{"__comp":"17896441","content":"ec9b348c"},"/fluentui-charting-contrib/docs/Charting-Concepts/AreaChart-440":{"__comp":"17896441","content":"544aba92"},"/fluentui-charting-contrib/docs/Charting-Concepts/GaugeChart-7e8":{"__comp":"17896441","content":"80060540"},"/fluentui-charting-contrib/docs/Charting-Concepts/HeatMapChart-23a":{"__comp":"17896441","content":"712b8a2d"},"/fluentui-charting-contrib/docs/Charting-Concepts/HorizontalBarChart-a8f":{"__comp":"17896441","content":"4c3c7f6c"},"/fluentui-charting-contrib/docs/Charting-Concepts/LineChart-df4":{"__comp":"17896441","content":"62692344"},"/fluentui-charting-contrib/docs/Charting-Concepts/SankeyChart-3ab":{"__comp":"17896441","content":"1d29b0d8"},"/fluentui-charting-contrib/docs/Charting-Concepts/StackedBarChart-530":{"__comp":"17896441","content":"5181bfc2"},"/fluentui-charting-contrib/docs/colors-ef0":{"__comp":"17896441","content":"10c2b1cf"},"/fluentui-charting-contrib/docs/Contributor Guide-387":{"__comp":"17896441","content":"b0e8dd6d"},"/fluentui-charting-contrib/docs/creating-date-objects-for-chart-data-d31":{"__comp":"17896441","content":"c1fd7385"},"/fluentui-charting-contrib/docs/Debugging-a60":{"__comp":"17896441","content":"fdebbd26"},"/fluentui-charting-contrib/docs/Detailed Implementation Steps-7b4":{"__comp":"17896441","content":"918c9c28"},"/fluentui-charting-contrib/docs/Implementation Best Practices-bf6":{"__comp":"17896441","content":"a4b720fd"},"/fluentui-charting-contrib/docs/implementing-2-to-1-spacing-3a6":{"__comp":"17896441","content":"53fd9a32"},"/fluentui-charting-contrib/docs/Overview-7e4":{"__comp":"17896441","content":"ddc35001"},"/fluentui-charting-contrib/docs/Start Developing-764":{"__comp":"17896441","content":"100d50c4"},"/fluentui-charting-contrib/docs/Technical Details-111":{"__comp":"17896441","content":"7ef89a43"},"/fluentui-charting-contrib/docs/Test Plans/AreaChart/ComponentTests-490":{"__comp":"17896441","content":"fa9519d0"},"/fluentui-charting-contrib/docs/Test Plans/DonutChart/ComponentTests-371":{"__comp":"17896441","content":"790ff6d5"},"/fluentui-charting-contrib/docs/Test Plans/GaugeChart/ComponentTests-d89":{"__comp":"17896441","content":"e9780fb0"},"/fluentui-charting-contrib/docs/Test Plans/GroupedVerticalBarChart/ComponentTests-201":{"__comp":"17896441","content":"78e65ac0"},"/fluentui-charting-contrib/docs/Test Plans/HeatMapChart/ComponentTests-926":{"__comp":"17896441","content":"6ede8325"},"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChart/ComponentTests-048":{"__comp":"17896441","content":"6158391e"},"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChart/UnitTests-8d7":{"__comp":"17896441","content":"43c91bec"},"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChartWithAxis/ComponentTests-41f":{"__comp":"17896441","content":"e8c0cc48"},"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChartWithAxis/UnitTests-8d9":{"__comp":"17896441","content":"a62d60fb"},"/fluentui-charting-contrib/docs/Test Plans/LineChart/ComponentTests-c6a":{"__comp":"17896441","content":"35f90ace"},"/fluentui-charting-contrib/docs/Test Plans/MultiStackedBarChart/componentTests-4c6":{"__comp":"17896441","content":"72f1352f"},"/fluentui-charting-contrib/docs/Test Plans/SankeyChart/ComponentTests-fff":{"__comp":"17896441","content":"2bd67647"},"/fluentui-charting-contrib/docs/Test Plans/StackedBarChart/ComponentTests-c60":{"__comp":"17896441","content":"c81dfe5f"},"/fluentui-charting-contrib/docs/Test Plans/TestingGuide-348":{"__comp":"17896441","content":"b0683616"},"/fluentui-charting-contrib/docs/Test Plans/Utilities/UnitTests-bfd":{"__comp":"17896441","content":"82e69e4a"},"/fluentui-charting-contrib/docs/Test Plans/VerticalBarChart/ComponentTests-a74":{"__comp":"17896441","content":"8f2faa25"},"/fluentui-charting-contrib/docs/Test Plans/VerticalStackedBarChart/ComponentTests-25a":{"__comp":"17896441","content":"41748239"},"/fluentui-charting-contrib/docs/Testing Strategy-37b":{"__comp":"17896441","content":"785e1e6a"},"/fluentui-charting-contrib/docs/Testing Unpublished Library Version-b2f":{"__comp":"17896441","content":"1b37b4b0"},"/fluentui-charting-contrib/-c50":{"__comp":"1df93b7f","__context":{"plugin":"25929091"},"config":"5e9f5e1a"}}')}},e=>{e.O(0,[532],(()=>{return t=7221,e(e.s=t);var t}));e.O()}]);
\ No newline at end of file
diff --git a/assets/js/main.fd07d10c.js b/assets/js/main.fd07d10c.js
new file mode 100644
index 0000000000..e6af30de2b
--- /dev/null
+++ b/assets/js/main.fd07d10c.js
@@ -0,0 +1,2 @@
+/*! For license information please see main.fd07d10c.js.LICENSE.txt */
+(self.webpackChunkdocsite=self.webpackChunkdocsite||[]).push([[179],{830:(e,t,n)=>{"use strict";n.d(t,{W:()=>a});var r=n(7294);function a(){return r.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},r.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}},723:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});n(7294);var r=n(8356),a=n.n(r),o=n(6887);const i={"100d50c4":[()=>n.e(5724).then(n.bind(n,9854)),"@site/../../docs/Start Developing.md",9854],"10c2b1cf":[()=>n.e(1914).then(n.bind(n,9423)),"@site/../../docs/colors.md",9423],17896441:[()=>Promise.all([n.e(532),n.e(7918)]).then(n.bind(n,9413)),"@theme/DocItem",9413],"1a4e3797":[()=>Promise.all([n.e(532),n.e(7920)]).then(n.bind(n,6675)),"@theme/SearchPage",6675],"1b37b4b0":[()=>n.e(1483).then(n.bind(n,1421)),"@site/../../docs/Testing Unpublished Library Version.md",1421],"1d29b0d8":[()=>n.e(3861).then(n.bind(n,6001)),"@site/../../docs/Charting-Concepts/SankeyChart.md",6001],"1df93b7f":[()=>Promise.all([n.e(532),n.e(3237)]).then(n.bind(n,6358)),"@site/src/pages/index.tsx",6358],"1ff5abae":[()=>n.e(5671).then(n.bind(n,2972)),"@site/../../docs/Charting-Concepts/GroupedVerticalBarChart.md",2972],25929091:[()=>n.e(1283).then(n.t.bind(n,5745,19)),"/home/runner/work/fluentui-charting-contrib/fluentui-charting-contrib/apps/docsite/.docusaurus/docusaurus-plugin-content-pages/default/plugin-route-context-module-100.json",5745],"2bd67647":[()=>n.e(9013).then(n.bind(n,1936)),"@site/../../docs/Test Plans/SankeyChart/ComponentTests.md",1936],"35f90ace":[()=>n.e(1888).then(n.bind(n,3823)),"@site/../../docs/Test Plans/LineChart/ComponentTests.md",3823],41748239:[()=>n.e(150).then(n.bind(n,323)),"@site/../../docs/Test Plans/VerticalStackedBarChart/ComponentTests.md",323],"43c91bec":[()=>n.e(2357).then(n.bind(n,5438)),"@site/../../docs/Test Plans/HorizontalBarChart/UnitTests.md",5438],"44a464d7":[()=>n.e(6662).then(n.bind(n,1826)),"@site/../../docs/Charting-Concepts/VerticalBarChart.md",1826],"4c3c7f6c":[()=>n.e(9368).then(n.bind(n,7812)),"@site/../../docs/Charting-Concepts/HorizontalBarChart.md",7812],"5181bfc2":[()=>n.e(7659).then(n.bind(n,5417)),"@site/../../docs/Charting-Concepts/StackedBarChart.md",5417],"53fd9a32":[()=>n.e(4630).then(n.bind(n,5197)),"@site/../../docs/implementing-2-to-1-spacing.md",5197],"544aba92":[()=>n.e(774).then(n.bind(n,1264)),"@site/../../docs/Charting-Concepts/AreaChart.md",1264],"5e95c892":[()=>n.e(9661).then(n.bind(n,1892)),"@theme/DocsRoot",1892],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,6809)),"@generated/docusaurus.config",6809],"5fc975be":[()=>n.e(7706).then(n.t.bind(n,7085,19)),"/home/runner/work/fluentui-charting-contrib/fluentui-charting-contrib/apps/docsite/.docusaurus/docusaurus-theme-search-algolia/default/plugin-route-context-module-100.json",7085],"6158391e":[()=>n.e(1605).then(n.bind(n,430)),"@site/../../docs/Test Plans/HorizontalBarChart/ComponentTests.md",430],62692344:[()=>n.e(9330).then(n.bind(n,4520)),"@site/../../docs/Charting-Concepts/LineChart.md",4520],"6ede8325":[()=>n.e(2637).then(n.bind(n,6792)),"@site/../../docs/Test Plans/HeatMapChart/ComponentTests.md",6792],"6fe236e0":[()=>n.e(6942).then(n.bind(n,6166)),"@site/../../docs/Accessibility.md",6166],"712b8a2d":[()=>n.e(6863).then(n.bind(n,4227)),"@site/../../docs/Charting-Concepts/HeatMapChart.md",4227],"72f1352f":[()=>n.e(3072).then(n.bind(n,5618)),"@site/../../docs/Test Plans/MultiStackedBarChart/componentTests.md",5618],"785e1e6a":[()=>n.e(9159).then(n.bind(n,4242)),"@site/../../docs/Testing Strategy.md",4242],"78e65ac0":[()=>n.e(2907).then(n.bind(n,4199)),"@site/../../docs/Test Plans/GroupedVerticalBarChart/ComponentTests.md",4199],"790ff6d5":[()=>n.e(9860).then(n.bind(n,3854)),"@site/../../docs/Test Plans/DonutChart/ComponentTests.md",3854],"7ef89a43":[()=>n.e(8466).then(n.bind(n,4488)),"@site/../../docs/Technical Details.md",4488],80060540:[()=>n.e(1321).then(n.bind(n,9431)),"@site/../../docs/Charting-Concepts/GaugeChart.md",9431],"82e69e4a":[()=>n.e(4145).then(n.bind(n,5228)),"@site/../../docs/Test Plans/Utilities/UnitTests.md",5228],"8f2faa25":[()=>n.e(1125).then(n.bind(n,8625)),"@site/../../docs/Test Plans/VerticalBarChart/ComponentTests.md",8625],"918c9c28":[()=>n.e(3469).then(n.bind(n,7270)),"@site/../../docs/Detailed Implementation Steps.md",7270],"935f2afb":[()=>n.e(53).then(n.t.bind(n,1109,19)),"~docs/default/version-current-metadata-prop-751.json",1109],a4b720fd:[()=>n.e(9428).then(n.bind(n,8300)),"@site/../../docs/Implementation Best Practices.md",8300],a62d60fb:[()=>n.e(4798).then(n.bind(n,2485)),"@site/../../docs/Test Plans/HorizontalBarChartWithAxis/UnitTests.md",2485],a7bd4aaa:[()=>n.e(8518).then(n.bind(n,8564)),"@theme/DocVersionRoot",8564],a85ccfbf:[()=>n.e(2190).then(n.t.bind(n,3769,19)),"/home/runner/work/fluentui-charting-contrib/fluentui-charting-contrib/apps/docsite/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",3769],a94703ab:[()=>Promise.all([n.e(532),n.e(4368)]).then(n.bind(n,2674)),"@theme/DocRoot",2674],b0683616:[()=>n.e(5112).then(n.bind(n,6374)),"@site/../../docs/Test Plans/TestingGuide.md",6374],b0e8dd6d:[()=>n.e(8673).then(n.bind(n,6231)),"@site/../../docs/Contributor Guide.md",6231],b7f64af1:[()=>n.e(8751).then(n.bind(n,4622)),"@site/../../docs/Charting-Concepts/VerticalStackedBarChart.md",4622],c1fd7385:[()=>n.e(8171).then(n.bind(n,8964)),"@site/../../docs/creating-date-objects-for-chart-data.md",8964],c81dfe5f:[()=>n.e(2871).then(n.bind(n,3028)),"@site/../../docs/Test Plans/StackedBarChart/ComponentTests.md",3028],ddc35001:[()=>n.e(8968).then(n.bind(n,9313)),"@site/../../docs/Overview.md",9313],df751193:[()=>n.e(5966).then(n.bind(n,5321)),"@site/../../docs/Charting-Concepts/DonutChart.md",5321],e1621294:[()=>n.e(3633).then(n.bind(n,7037)),"@site/../../docs/Charting-Concepts/SparklineChart.md",7037],e8c0cc48:[()=>n.e(4014).then(n.bind(n,4162)),"@site/../../docs/Test Plans/HorizontalBarChartWithAxis/ComponentTests.md",4162],e9780fb0:[()=>n.e(1351).then(n.bind(n,9611)),"@site/../../docs/Test Plans/GaugeChart/ComponentTests.md",9611],ec9b348c:[()=>n.e(917).then(n.bind(n,8121)),"@site/../../docs/CHANGELOG.md",8121],fa9519d0:[()=>n.e(2408).then(n.bind(n,4286)),"@site/../../docs/Test Plans/AreaChart/ComponentTests.md",4286],fdebbd26:[()=>n.e(8864).then(n.bind(n,7338)),"@site/../../docs/Debugging.md",7338]};var l=n(5893);function s(e){let{error:t,retry:n,pastDelay:r}=e;return t?(0,l.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,l.jsx)("p",{children:String(t)}),(0,l.jsx)("div",{children:(0,l.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):r?(0,l.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,l.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,l.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,l.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,l.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,l.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,l.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,l.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,l.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,l.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n(9670),u=n(226);function d(e,t){if("*"===e)return a()({loading:s,loader:()=>n.e(1772).then(n.bind(n,1772)),modules:["@theme/NotFound"],webpack:()=>[1772],render(e,t){const n=e.default;return(0,l.jsx)(u.z,{value:{plugin:{name:"native",id:"default"}},children:(0,l.jsx)(n,{...t})})}});const r=o[`${e}-${t}`],d={},p=[],f=[],h=(0,c.Z)(r);return Object.entries(h).forEach((e=>{let[t,n]=e;const r=i[n];r&&(d[t]=r[0],p.push(r[1]),f.push(r[2]))})),a().Map({loading:s,loader:d,modules:p,webpack:()=>f,render(t,n){const a=JSON.parse(JSON.stringify(r));Object.entries(t).forEach((t=>{let[n,r]=t;const o=r.default;if(!o)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof o&&"function"!=typeof o||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{o[e]=r[e]}));let i=a;const l=n.split(".");l.slice(0,-1).forEach((e=>{i=i[e]})),i[l[l.length-1]]=o}));const o=a.__comp;delete a.__comp;const i=a.__context;return delete a.__context,(0,l.jsx)(u.z,{value:i,children:(0,l.jsx)(o,{...a,...n})})}})}const p=[{path:"/fluentui-charting-contrib/search",component:d("/fluentui-charting-contrib/search","d67"),exact:!0},{path:"/fluentui-charting-contrib/docs",component:d("/fluentui-charting-contrib/docs","559"),routes:[{path:"/fluentui-charting-contrib/docs",component:d("/fluentui-charting-contrib/docs","f07"),routes:[{path:"/fluentui-charting-contrib/docs",component:d("/fluentui-charting-contrib/docs","a8f"),routes:[{path:"/fluentui-charting-contrib/docs/Accessibility",component:d("/fluentui-charting-contrib/docs/Accessibility","9b7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/CHANGELOG",component:d("/fluentui-charting-contrib/docs/CHANGELOG","84b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/AreaChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/AreaChart","440"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/DonutChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/DonutChart","82a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/GaugeChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/GaugeChart","7e8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/GroupedVerticalBarChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/GroupedVerticalBarChart","7d1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/HeatMapChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/HeatMapChart","23a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/HorizontalBarChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/HorizontalBarChart","a8f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/LineChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/LineChart","df4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/SankeyChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/SankeyChart","3ab"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/SparklineChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/SparklineChart","1ee"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/StackedBarChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/StackedBarChart","530"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/VerticalBarChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/VerticalBarChart","28a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Charting-Concepts/VerticalStackedBarChart",component:d("/fluentui-charting-contrib/docs/Charting-Concepts/VerticalStackedBarChart","b6b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/colors",component:d("/fluentui-charting-contrib/docs/colors","ef0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Contributor Guide",component:d("/fluentui-charting-contrib/docs/Contributor Guide","387"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/creating-date-objects-for-chart-data",component:d("/fluentui-charting-contrib/docs/creating-date-objects-for-chart-data","d31"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Debugging",component:d("/fluentui-charting-contrib/docs/Debugging","a60"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Detailed Implementation Steps",component:d("/fluentui-charting-contrib/docs/Detailed Implementation Steps","7b4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Implementation Best Practices",component:d("/fluentui-charting-contrib/docs/Implementation Best Practices","bf6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/implementing-2-to-1-spacing",component:d("/fluentui-charting-contrib/docs/implementing-2-to-1-spacing","3a6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Overview",component:d("/fluentui-charting-contrib/docs/Overview","7e4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Start Developing",component:d("/fluentui-charting-contrib/docs/Start Developing","764"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Technical Details",component:d("/fluentui-charting-contrib/docs/Technical Details","111"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/AreaChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/AreaChart/ComponentTests","490"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/DonutChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/DonutChart/ComponentTests","371"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/GaugeChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/GaugeChart/ComponentTests","d89"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/GroupedVerticalBarChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/GroupedVerticalBarChart/ComponentTests","201"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/HeatMapChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/HeatMapChart/ComponentTests","926"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChart/ComponentTests","048"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChart/UnitTests",component:d("/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChart/UnitTests","8d7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChartWithAxis/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChartWithAxis/ComponentTests","41f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChartWithAxis/UnitTests",component:d("/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChartWithAxis/UnitTests","8d9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/LineChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/LineChart/ComponentTests","c6a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/MultiStackedBarChart/componentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/MultiStackedBarChart/componentTests","4c6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/SankeyChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/SankeyChart/ComponentTests","fff"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/StackedBarChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/StackedBarChart/ComponentTests","c60"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/TestingGuide",component:d("/fluentui-charting-contrib/docs/Test Plans/TestingGuide","348"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/Utilities/UnitTests",component:d("/fluentui-charting-contrib/docs/Test Plans/Utilities/UnitTests","bfd"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/VerticalBarChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/VerticalBarChart/ComponentTests","a74"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Test Plans/VerticalStackedBarChart/ComponentTests",component:d("/fluentui-charting-contrib/docs/Test Plans/VerticalStackedBarChart/ComponentTests","25a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Testing Strategy",component:d("/fluentui-charting-contrib/docs/Testing Strategy","37b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/fluentui-charting-contrib/docs/Testing Unpublished Library Version",component:d("/fluentui-charting-contrib/docs/Testing Unpublished Library Version","b2f"),exact:!0,sidebar:"tutorialSidebar"}]}]}]},{path:"/fluentui-charting-contrib/",component:d("/fluentui-charting-contrib/","c50"),exact:!0},{path:"*",component:d("*")}]},8934:(e,t,n)=>{"use strict";n.d(t,{_:()=>o,t:()=>i});var r=n(7294),a=n(5893);const o=r.createContext(!1);function i(e){let{children:t}=e;const[n,i]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{i(!0)}),[]),(0,a.jsx)(o.Provider,{value:n,children:t})}},7221:(e,t,n)=>{"use strict";var r=n(7294),a=n(745),o=n(3727),i=n(405),l=n(412);const s=[n(2497),n(3310),n(8320),n(2295)];var c=n(723),u=n(6550),d=n(8790),p=n(5893);function f(e){let{children:t}=e;return(0,p.jsx)(p.Fragment,{children:t})}var h=n(5742),m=n(2263),g=n(4996),b=n(6668),y=n(833),v=n(4711),w=n(9727),k=n(3320),x=n(8780),S=n(197);function C(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,m.Z)(),r=(0,v.l)(),a=n[e].htmlLang,o=e=>e.replace("-","_");return(0,p.jsxs)(h.Z,{children:[Object.entries(n).map((e=>{let[t,{htmlLang:n}]=e;return(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:n},t)})),(0,p.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,p.jsx)("meta",{property:"og:locale",content:o(a)}),Object.values(n).filter((e=>a!==e.htmlLang)).map((e=>(0,p.jsx)("meta",{property:"og:locale:alternate",content:o(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function T(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,m.Z)(),r=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,m.Z)(),{pathname:r}=(0,u.TH)();return e+(0,x.applyTrailingSlash)((0,g.Z)(r),{trailingSlash:n,baseUrl:t})}(),a=t?`${n}${t}`:r;return(0,p.jsxs)(h.Z,{children:[(0,p.jsx)("meta",{property:"og:url",content:a}),(0,p.jsx)("link",{rel:"canonical",href:a})]})}function E(){const{i18n:{currentLocale:e}}=(0,m.Z)(),{metadata:t,image:n}=(0,b.L)();return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(h.Z,{children:[(0,p.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,p.jsx)("body",{className:w.h})]}),n&&(0,p.jsx)(y.d,{image:n}),(0,p.jsx)(T,{}),(0,p.jsx)(C,{}),(0,p.jsx)(S.Z,{tag:k.HX,locale:e}),(0,p.jsx)(h.Z,{children:t.map(((e,t)=>(0,p.jsx)("meta",{...e},t)))})]})}const _=new Map;function A(e){if(_.has(e.pathname))return{...e,pathname:_.get(e.pathname)};if((0,d.f)(c.Z,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return _.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return _.set(e.pathname,t),{...e,pathname:t}}var P=n(8934),L=n(8940),j=n(469);function R(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r{const r=t.default?.[e]??t[e];return r?.(...n)}));return()=>a.forEach((e=>e?.()))}const N=function(e){let{children:t,location:n,previousLocation:r}=e;return(0,j.Z)((()=>{r!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const r=t.pathname===n.pathname,a=t.hash===n.hash,o=t.search===n.search;if(r&&a&&!o)return;const{hash:i}=t;if(i){const e=decodeURIComponent(i.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:r}),R("onRouteDidUpdate",{previousLocation:r,location:n}))}),[r,n]),t};function O(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,d.f)(c.Z,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class D extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=l.Z.canUseDOM?R("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=R("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),O(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,p.jsx)(N,{previousLocation:this.previousLocation,location:t,children:(0,p.jsx)(u.AW,{location:t,render:()=>e})})}}const I=D,M="__docusaurus-base-url-issue-banner-container",F="__docusaurus-base-url-issue-banner",B="__docusaurus-base-url-issue-banner-suggestion-container";function z(e){return`\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n var shouldInsert = typeof window['docusaurus'] === 'undefined';\n shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n var bannerContainer = document.createElement('div');\n bannerContainer.id = '${M}';\n var bannerHtml = ${JSON.stringify(function(e){return`\n\n
Your Docusaurus site did not load properly.
\n
A very common reason is a wrong site baseUrl configuration .
\n
Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}
\n
We suggest trying baseUrl =
\n
children",t),new Error("The Docusaurus component only accept simple string values");const i=l({message:t,id:n});return(0,a.jsx)(a.Fragment,{children:o(i,r)})}},9935:(e,t,n)=>{"use strict";n.d(t,{m:()=>r});const r="default"},3919:(e,t,n)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function a(e){return void 0!==e&&!r(e)}n.d(t,{Z:()=>a,b:()=>r})},4996:(e,t,n)=>{"use strict";n.d(t,{C:()=>i,Z:()=>l});var r=n(7294),a=n(2263),o=n(3919);function i(){const{siteConfig:{baseUrl:e,url:t}}=(0,a.Z)(),n=(0,r.useCallback)(((n,r)=>function(e,t,n,r){let{forcePrependBaseUrl:a=!1,absolute:i=!1}=void 0===r?{}:r;if(!n||n.startsWith("#")||(0,o.b)(n))return n;if(a)return t+n.replace(/^\//,"");if(n===t.replace(/\/$/,""))return t;const l=n.startsWith(t)?n:t+n.replace(/^\//,"");return i?e+l:l}(t,e,n,r)),[t,e]);return{withBaseUrl:n}}function l(e,t){void 0===t&&(t={});const{withBaseUrl:n}=i();return n(e,t)}},8138:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});var r=n(7294);n(5893);const a=r.createContext({collectAnchor:()=>{},collectLink:()=>{}}),o=()=>(0,r.useContext)(a);function i(){return o()}},2263:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(8940);function o(){return(0,r.useContext)(a._)}},2389:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7294),a=n(8934);function o(){return(0,r.useContext)(a._)}},469:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});var r=n(7294);const a=n(412).Z.canUseDOM?r.useLayoutEffect:r.useEffect},9670:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});const r=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function a(e){const t={};return function e(n,a){Object.entries(n).forEach((n=>{let[o,i]=n;const l=a?`${a}.${o}`:o;r(i)?e(i,l):t[l]=i}))}(e),t}},226:(e,t,n)=>{"use strict";n.d(t,{_:()=>o,z:()=>i});var r=n(7294),a=n(5893);const o=r.createContext(null);function i(e){let{children:t,value:n}=e;const i=r.useContext(o),l=(0,r.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const r={...t.data,...n?.data};return{plugin:t.plugin,data:r}}({parent:i,value:n})),[i,n]);return(0,a.jsx)(o.Provider,{value:l,children:t})}},143:(e,t,n)=>{"use strict";n.d(t,{Iw:()=>b,gA:()=>f,WS:()=>h,_r:()=>d,Jo:()=>y,zh:()=>p,yW:()=>g,gB:()=>m});var r=n(6550),a=n(2263),o=n(9935);function i(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,a.Z)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}const l=e=>e.versions.find((e=>e.isLast));function s(e,t){const n=l(e);return[...e.versions.filter((e=>e!==n)),n].find((e=>!!(0,r.LX)(t,{path:e.path,exact:!1,strict:!1})))}function c(e,t){const n=s(e,t),a=n?.docs.find((e=>!!(0,r.LX)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:a,alternateDocVersions:a?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===t&&(n[e.name]=r)}))})),n}(a.id):{}}}const u={},d=()=>i("docusaurus-plugin-content-docs")??u,p=e=>function(e,t,n){void 0===t&&(t=o.m),void 0===n&&(n={});const r=i(e),a=r?.[t];if(!a&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return a}("docusaurus-plugin-content-docs",e,{failfast:!0});function f(e){void 0===e&&(e={});const t=d(),{pathname:n}=(0,r.TH)();return function(e,t,n){void 0===n&&(n={});const a=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,r.LX)(t,{path:n.path,exact:!1,strict:!1})})),o=a?{pluginId:a[0],pluginData:a[1]}:void 0;if(!o&&n.failfast)throw new Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map((e=>e.path)).join(", ")}`);return o}(t,n,e)}function h(e){void 0===e&&(e={});const t=f(e),{pathname:n}=(0,r.TH)();if(!t)return;return{activePlugin:t,activeVersion:s(t.pluginData,n)}}function m(e){return p(e).versions}function g(e){const t=p(e);return l(t)}function b(e){const t=p(e),{pathname:n}=(0,r.TH)();return c(t,n)}function y(e){const t=p(e),{pathname:n}=(0,r.TH)();return function(e,t){const n=l(e);return{latestDocSuggestion:c(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},8320:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>o});var r=n(4865),a=n.n(r);a().configure({showSpinner:!1});const o={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{a().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){a().done()}}},3310:(e,t,n)=>{"use strict";n.r(t);var r=n(2573),a=n(6809);!function(e){const{themeConfig:{prism:t}}=a.default,{additionalLanguages:r}=t;globalThis.Prism=e,r.forEach((e=>{"php"===e&&n(6854),n(6726)(`./prism-${e}`)})),delete globalThis.Prism}(r.p1)},2503:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});n(7294);var r=n(512),a=n(5999),o=n(6668),i=n(3692),l=n(8138);const s={anchorWithStickyNavbar:"anchorWithStickyNavbar_LWe7",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_WYt5"};var c=n(5893);function u(e){let{as:t,id:n,...u}=e;const d=(0,l.Z)(),{navbar:{hideOnScroll:p}}=(0,o.L)();if("h1"===t||!n)return(0,c.jsx)(t,{...u,id:void 0});d.collectAnchor(n);const f=(0,a.I)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof u.children?u.children:n});return(0,c.jsxs)(t,{...u,className:(0,r.Z)("anchor",p?s.anchorWithHideOnScrollNavbar:s.anchorWithStickyNavbar,u.className),id:n,children:[u.children,(0,c.jsx)(i.Z,{className:"hash-link",to:`#${n}`,"aria-label":f,title:f,children:"\u200b"})]})}},9471:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});n(7294);const r={iconExternalLink:"iconExternalLink_nPIU"};var a=n(5893);function o(e){let{width:t=13.5,height:n=13.5}=e;return(0,a.jsx)("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:r.iconExternalLink,children:(0,a.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})}},7372:(e,t,n)=>{"use strict";n.d(t,{Z:()=>Rt});var r=n(7294),a=n(512),o=n(4763),i=n(833),l=n(6550),s=n(5999),c=n(5936),u=n(5893);const d="__docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){const e=(0,r.useRef)(null),{action:t}=(0,l.k6)(),n=(0,r.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&p(t)}),[]);return(0,c.S)((n=>{let{location:r}=n;e.current&&!r.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const h=(0,s.I)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function m(e){const t=e.children??h,{containerRef:n,onClick:r}=f();return(0,u.jsx)("div",{ref:n,role:"region","aria-label":h,children:(0,u.jsx)("a",{...e,href:`#${d}`,onClick:r,children:t})})}var g=n(5281),b=n(9727);const y={skipToContent:"skipToContent_fXgn"};function v(){return(0,u.jsx)(m,{className:y.skipToContent})}var w=n(6668),k=n(9689);function x(e){let{width:t=21,height:n=21,color:r="currentColor",strokeWidth:a=1.2,className:o,...i}=e;return(0,u.jsx)("svg",{viewBox:"0 0 15 15",width:t,height:n,...i,children:(0,u.jsx)("g",{stroke:r,strokeWidth:a,children:(0,u.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const S={closeButton:"closeButton_CVFx"};function C(e){return(0,u.jsx)("button",{type:"button","aria-label":(0,s.I)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,a.Z)("clean-btn close",S.closeButton,e.className),children:(0,u.jsx)(x,{width:14,height:14,strokeWidth:3.1})})}const T={content:"content_knG7"};function E(e){const{announcementBar:t}=(0,w.L)(),{content:n}=t;return(0,u.jsx)("div",{...e,className:(0,a.Z)(T.content,e.className),dangerouslySetInnerHTML:{__html:n}})}const _={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function A(){const{announcementBar:e}=(0,w.L)(),{isActive:t,close:n}=(0,k.nT)();if(!t)return null;const{backgroundColor:r,textColor:a,isCloseable:o}=e;return(0,u.jsxs)("div",{className:_.announcementBar,style:{backgroundColor:r,color:a},role:"banner",children:[o&&(0,u.jsx)("div",{className:_.announcementBarPlaceholder}),(0,u.jsx)(E,{className:_.announcementBarContent}),o&&(0,u.jsx)(C,{onClick:n,className:_.announcementBarClose})]})}var P=n(3163),L=n(2466);var j=n(902),R=n(3102);const N=r.createContext(null);function O(e){let{children:t}=e;const n=function(){const e=(0,P.e)(),t=(0,R.HY)(),[n,a]=(0,r.useState)(!1),o=null!==t.component,i=(0,j.D9)(o);return(0,r.useEffect)((()=>{o&&!i&&a(!0)}),[o,i]),(0,r.useEffect)((()=>{o?e.shown||a(!0):a(!1)}),[e.shown,o]),(0,r.useMemo)((()=>[n,a]),[n])}();return(0,u.jsx)(N.Provider,{value:n,children:t})}function D(e){if(e.component){const t=e.component;return(0,u.jsx)(t,{...e.props})}}function I(){const e=(0,r.useContext)(N);if(!e)throw new j.i6("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,a=(0,r.useCallback)((()=>n(!1)),[n]),o=(0,R.HY)();return(0,r.useMemo)((()=>({shown:t,hide:a,content:D(o)})),[a,o,t])}function M(e){let{header:t,primaryMenu:n,secondaryMenu:r}=e;const{shown:o}=I();return(0,u.jsxs)("div",{className:"navbar-sidebar",children:[t,(0,u.jsxs)("div",{className:(0,a.Z)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":o}),children:[(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:n}),(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:r})]})]})}var F=n(2949),B=n(2389);function z(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"})})}function U(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"})})}const $={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function H(e){let{className:t,buttonClassName:n,value:r,onChange:o}=e;const i=(0,B.Z)(),l=(0,s.I)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===r?(0,s.I)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,s.I)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,u.jsx)("div",{className:(0,a.Z)($.toggle,t),children:(0,u.jsxs)("button",{className:(0,a.Z)("clean-btn",$.toggleButton,!i&&$.toggleButtonDisabled,n),type:"button",onClick:()=>o("dark"===r?"light":"dark"),disabled:!i,title:l,"aria-label":l,"aria-live":"polite",children:[(0,u.jsx)(z,{className:(0,a.Z)($.toggleIcon,$.lightToggleIcon)}),(0,u.jsx)(U,{className:(0,a.Z)($.toggleIcon,$.darkToggleIcon)})]})})}const q=r.memo(H),G={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_X3D1"};function Z(e){let{className:t}=e;const n=(0,w.L)().navbar.style,r=(0,w.L)().colorMode.disableSwitch,{colorMode:a,setColorMode:o}=(0,F.I)();return r?null:(0,u.jsx)(q,{className:t,buttonClassName:"dark"===n?G.darkNavbarColorModeToggle:void 0,value:a,onChange:o})}var V=n(1327);function W(){return(0,u.jsx)(V.Z,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function K(){const e=(0,P.e)();return(0,u.jsx)("button",{type:"button","aria-label":(0,s.I)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle(),children:(0,u.jsx)(x,{color:"var(--ifm-color-emphasis-600)"})})}function Q(){return(0,u.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,u.jsx)(W,{}),(0,u.jsx)(Z,{className:"margin-right--md"}),(0,u.jsx)(K,{})]})}var Y=n(3692),X=n(4996),J=n(3919),ee=n(8022),te=n(9471);function ne(e){let{activeBasePath:t,activeBaseRegex:n,to:r,href:a,label:o,html:i,isDropdownLink:l,prependBaseUrlToHref:s,...c}=e;const d=(0,X.Z)(r),p=(0,X.Z)(t),f=(0,X.Z)(a,{forcePrependBaseUrl:!0}),h=o&&a&&!(0,J.Z)(a),m=i?{dangerouslySetInnerHTML:{__html:i}}:{children:(0,u.jsxs)(u.Fragment,{children:[o,h&&(0,u.jsx)(te.Z,{...l&&{width:12,height:12}})]})};return a?(0,u.jsx)(Y.Z,{href:s?f:a,...c,...m}):(0,u.jsx)(Y.Z,{to:d,isNavLink:!0,...(t||n)&&{isActive:(e,t)=>n?(0,ee.F)(n,t.pathname):t.pathname.startsWith(p)},...c,...m})}function re(e){let{className:t,isDropdownItem:n=!1,...r}=e;const o=(0,u.jsx)(ne,{className:(0,a.Z)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n,...r});return n?(0,u.jsx)("li",{children:o}):o}function ae(e){let{className:t,isDropdownItem:n,...r}=e;return(0,u.jsx)("li",{className:"menu__list-item",children:(0,u.jsx)(ne,{className:(0,a.Z)("menu__link",t),...r})})}function oe(e){let{mobile:t=!1,position:n,...r}=e;const a=t?ae:re;return(0,u.jsx)(a,{...r,activeClassName:r.activeClassName??(t?"menu__link--active":"navbar__link--active")})}var ie=n(6043),le=n(8596),se=n(2263);const ce={dropdownNavbarItemMobile:"dropdownNavbarItemMobile_S0Fm"};function ue(e,t){return e.some((e=>function(e,t){return!!(0,le.Mg)(e.to,t)||!!(0,ee.F)(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function de(e){let{items:t,position:n,className:o,onClick:i,...l}=e;const s=(0,r.useRef)(null),[c,d]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{const e=e=>{s.current&&!s.current.contains(e.target)&&d(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[s]),(0,u.jsxs)("div",{ref:s,className:(0,a.Z)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===n,"dropdown--show":c}),children:[(0,u.jsx)(ne,{"aria-haspopup":"true","aria-expanded":c,role:"button",href:l.to?void 0:"#",className:(0,a.Z)("navbar__link",o),...l,onClick:l.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!c))},children:l.children??l.label}),(0,u.jsx)("ul",{className:"dropdown__menu",children:t.map(((e,t)=>(0,r.createElement)(qe,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:t})))})]})}function pe(e){let{items:t,className:n,position:o,onClick:i,...s}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,se.Z)(),{pathname:t}=(0,l.TH)();return t.replace(e,"/")}(),d=ue(t,c),{collapsed:p,toggleCollapsed:f,setCollapsed:h}=(0,ie.u)({initialState:()=>!d});return(0,r.useEffect)((()=>{d&&h(!d)}),[c,d,h]),(0,u.jsxs)("li",{className:(0,a.Z)("menu__list-item",{"menu__list-item--collapsed":p}),children:[(0,u.jsx)(ne,{role:"button",className:(0,a.Z)(ce.dropdownNavbarItemMobile,"menu__link menu__link--sublist menu__link--sublist-caret",n),...s,onClick:e=>{e.preventDefault(),f()},children:s.children??s.label}),(0,u.jsx)(ie.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:p,children:t.map(((e,t)=>(0,r.createElement)(qe,{mobile:!0,isDropdownItem:!0,onClick:i,activeClassName:"menu__link--active",...e,key:t})))})]})}function fe(e){let{mobile:t=!1,...n}=e;const r=t?pe:de;return(0,u.jsx)(r,{...n})}var he=n(4711);function me(e){let{width:t=20,height:n=20,...r}=e;return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0,...r,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"})})}const ge="iconLanguage_nlXk";var be=n(3935);function ye(){return r.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},r.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}var ve=n(830),we=["translations"];function ke(){return ke=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var Te="Ctrl";var Ee=r.forwardRef((function(e,t){var n=e.translations,a=void 0===n?{}:n,o=Ce(e,we),i=a.buttonText,l=void 0===i?"Search":i,s=a.buttonAriaLabel,c=void 0===s?"Search":s,u=xe((0,r.useState)(null),2),d=u[0],p=u[1];return(0,r.useEffect)((function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?p("\u2318"):p(Te))}),[]),r.createElement("button",ke({type:"button",className:"DocSearch DocSearch-Button","aria-label":c},o,{ref:t}),r.createElement("span",{className:"DocSearch-Button-Container"},r.createElement(ve.W,null),r.createElement("span",{className:"DocSearch-Button-Placeholder"},l)),r.createElement("span",{className:"DocSearch-Button-Keys"},null!==d&&r.createElement(r.Fragment,null,r.createElement("kbd",{className:"DocSearch-Button-Key"},d===Te?r.createElement(ye,null):d),r.createElement("kbd",{className:"DocSearch-Button-Key"},"K"))))})),_e=n(5742),Ae=n(6177),Pe=n(239),Le=n(3320);const je={button:{buttonText:(0,s.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),buttonAriaLabel:(0,s.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"})},modal:{searchBox:{resetButtonTitle:(0,s.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),resetButtonAriaLabel:(0,s.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),cancelButtonText:(0,s.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"}),cancelButtonAriaLabel:(0,s.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"})},startScreen:{recentSearchesTitle:(0,s.I)({id:"theme.SearchModal.startScreen.recentSearchesTitle",message:"Recent",description:"The title for recent searches"}),noRecentSearchesText:(0,s.I)({id:"theme.SearchModal.startScreen.noRecentSearchesText",message:"No recent searches",description:"The text when no recent searches"}),saveRecentSearchButtonTitle:(0,s.I)({id:"theme.SearchModal.startScreen.saveRecentSearchButtonTitle",message:"Save this search",description:"The label for save recent search button"}),removeRecentSearchButtonTitle:(0,s.I)({id:"theme.SearchModal.startScreen.removeRecentSearchButtonTitle",message:"Remove this search from history",description:"The label for remove recent search button"}),favoriteSearchesTitle:(0,s.I)({id:"theme.SearchModal.startScreen.favoriteSearchesTitle",message:"Favorite",description:"The title for favorite searches"}),removeFavoriteSearchButtonTitle:(0,s.I)({id:"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle",message:"Remove this search from favorites",description:"The label for remove favorite search button"})},errorScreen:{titleText:(0,s.I)({id:"theme.SearchModal.errorScreen.titleText",message:"Unable to fetch results",description:"The title for error screen of search modal"}),helpText:(0,s.I)({id:"theme.SearchModal.errorScreen.helpText",message:"You might want to check your network connection.",description:"The help text for error screen of search modal"})},footer:{selectText:(0,s.I)({id:"theme.SearchModal.footer.selectText",message:"to select",description:"The explanatory text of the action for the enter key"}),selectKeyAriaLabel:(0,s.I)({id:"theme.SearchModal.footer.selectKeyAriaLabel",message:"Enter key",description:"The ARIA label for the Enter key button that makes the selection"}),navigateText:(0,s.I)({id:"theme.SearchModal.footer.navigateText",message:"to navigate",description:"The explanatory text of the action for the Arrow up and Arrow down key"}),navigateUpKeyAriaLabel:(0,s.I)({id:"theme.SearchModal.footer.navigateUpKeyAriaLabel",message:"Arrow up",description:"The ARIA label for the Arrow up key button that makes the navigation"}),navigateDownKeyAriaLabel:(0,s.I)({id:"theme.SearchModal.footer.navigateDownKeyAriaLabel",message:"Arrow down",description:"The ARIA label for the Arrow down key button that makes the navigation"}),closeText:(0,s.I)({id:"theme.SearchModal.footer.closeText",message:"to close",description:"The explanatory text of the action for Escape key"}),closeKeyAriaLabel:(0,s.I)({id:"theme.SearchModal.footer.closeKeyAriaLabel",message:"Escape key",description:"The ARIA label for the Escape key button that close the modal"}),searchByText:(0,s.I)({id:"theme.SearchModal.footer.searchByText",message:"Search by",description:"The text explain that the search is making by Algolia"})},noResultsScreen:{noResultsText:(0,s.I)({id:"theme.SearchModal.noResultsScreen.noResultsText",message:"No results for",description:"The text explains that there are no results for the following search"}),suggestedQueryText:(0,s.I)({id:"theme.SearchModal.noResultsScreen.suggestedQueryText",message:"Try searching for",description:"The text for the suggested query when no results are found for the following search"}),reportMissingResultsText:(0,s.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsText",message:"Believe this query should return results?",description:"The text for the question where the user thinks there are missing results"}),reportMissingResultsLinkText:(0,s.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText",message:"Let us know.",description:"The text for the link to report missing results"})}},placeholder:(0,s.I)({id:"theme.SearchModal.placeholder",message:"Search docs",description:"The placeholder of the input of the DocSearch pop-up modal"})};let Re=null;function Ne(e){let{hit:t,children:n}=e;return(0,u.jsx)(Y.Z,{to:t.url,children:n})}function Oe(e){let{state:t,onClose:n}=e;const r=(0,Ae.M)();return(0,u.jsx)(Y.Z,{to:r(t.query),onClick:n,children:(0,u.jsx)(s.Z,{id:"theme.SearchBar.seeAll",values:{count:t.context.nbHits},children:"See all {count} results"})})}function De(e){let{contextualSearch:t,externalUrlRegex:a,...o}=e;const{siteMetadata:i}=(0,se.Z)(),s=(0,Pe.l)(),c=function(){const{locale:e,tags:t}=(0,Le._q)();return[`language:${e}`,t.map((e=>`docusaurus_tag:${e}`))]}(),d=o.searchParameters?.facetFilters??[],p=t?function(e,t){const n=e=>"string"==typeof e?[e]:e;return[...n(e),...n(t)]}(c,d):d,f={...o.searchParameters,facetFilters:p},h=(0,l.k6)(),m=(0,r.useRef)(null),g=(0,r.useRef)(null),[b,y]=(0,r.useState)(!1),[v,w]=(0,r.useState)(void 0),k=(0,r.useCallback)((()=>Re?Promise.resolve():Promise.all([n.e(1426).then(n.bind(n,1426)),Promise.all([n.e(532),n.e(6945)]).then(n.bind(n,6945)),Promise.all([n.e(532),n.e(8894)]).then(n.bind(n,8894))]).then((e=>{let[{DocSearchModal:t}]=e;Re=t}))),[]),x=(0,r.useCallback)((()=>{k().then((()=>{m.current=document.createElement("div"),document.body.insertBefore(m.current,document.body.firstChild),y(!0)}))}),[k,y]),S=(0,r.useCallback)((()=>{y(!1),m.current?.remove()}),[y]),C=(0,r.useCallback)((e=>{k().then((()=>{y(!0),w(e.key)}))}),[k,y,w]),T=(0,r.useRef)({navigate(e){let{itemUrl:t}=e;(0,ee.F)(a,t)?window.location.href=t:h.push(t)}}).current,E=(0,r.useRef)((e=>o.transformItems?o.transformItems(e):e.map((e=>({...e,url:s(e.url)}))))).current,_=(0,r.useMemo)((()=>e=>(0,u.jsx)(Oe,{...e,onClose:S})),[S]),A=(0,r.useCallback)((e=>(e.addAlgoliaAgent("docusaurus",i.docusaurusVersion),e)),[i.docusaurusVersion]);return function(e){var t=e.isOpen,n=e.onOpen,a=e.onClose,o=e.onInput,i=e.searchButtonRef;r.useEffect((function(){function e(e){var r;(27===e.keyCode&&t||"k"===(null===(r=e.key)||void 0===r?void 0:r.toLowerCase())&&(e.metaKey||e.ctrlKey)||!function(e){var t=e.target,n=t.tagName;return t.isContentEditable||"INPUT"===n||"SELECT"===n||"TEXTAREA"===n}(e)&&"/"===e.key&&!t)&&(e.preventDefault(),t?a():document.body.classList.contains("DocSearch--active")||document.body.classList.contains("DocSearch--active")||n()),i&&i.current===document.activeElement&&o&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&o(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[t,n,a,o,i])}({isOpen:b,onOpen:x,onClose:S,onInput:C,searchButtonRef:g}),(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(_e.Z,{children:(0,u.jsx)("link",{rel:"preconnect",href:`https://${o.appId}-dsn.algolia.net`,crossOrigin:"anonymous"})}),(0,u.jsx)(Ee,{onTouchStart:k,onFocus:k,onMouseOver:k,onClick:x,ref:g,translations:je.button}),b&&Re&&m.current&&(0,be.createPortal)((0,u.jsx)(Re,{onClose:S,initialScrollY:window.scrollY,initialQuery:v,navigator:T,transformItems:E,hitComponent:Ne,transformSearchClient:A,...o.searchPagePath&&{resultsFooterComponent:_},...o,searchParameters:f,placeholder:je.placeholder,translations:je.modal}),m.current)]})}function Ie(){const{siteConfig:e}=(0,se.Z)();return(0,u.jsx)(De,{...e.themeConfig.algolia})}const Me={navbarSearchContainer:"navbarSearchContainer_Bca1"};function Fe(e){let{children:t,className:n}=e;return(0,u.jsx)("div",{className:(0,a.Z)(n,Me.navbarSearchContainer),children:t})}var Be=n(143),ze=n(2802);var Ue=n(373);const $e=e=>e.docs.find((t=>t.id===e.mainDocId));const He={default:oe,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:r,queryString:a="",...o}=e;const{i18n:{currentLocale:i,locales:c,localeConfigs:d}}=(0,se.Z)(),p=(0,he.l)(),{search:f,hash:h}=(0,l.TH)(),m=[...n,...c.map((e=>{const n=`${`pathname://${p.createUrl({locale:e,fullyQualified:!1})}`}${f}${h}${a}`;return{label:d[e].label,lang:d[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===i?t?"menu__link--active":"dropdown__link--active":""}})),...r],g=t?(0,s.I)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[i].label;return(0,u.jsx)(fe,{...o,mobile:t,label:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(me,{className:ge}),g]}),items:m})},search:function(e){let{mobile:t,className:n}=e;return t?null:(0,u.jsx)(Fe,{className:n,children:(0,u.jsx)(Ie,{})})},dropdown:fe,html:function(e){let{value:t,className:n,mobile:r=!1,isDropdownItem:o=!1}=e;const i=o?"li":"div";return(0,u.jsx)(i,{className:(0,a.Z)({navbar__item:!r&&!o,"menu__list-item":r},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:r,...a}=e;const{activeDoc:o}=(0,Be.Iw)(r),i=(0,ze.vY)(t,r),l=o?.path===i?.path;return null===i||i.unlisted&&!l?null:(0,u.jsx)(oe,{exact:!0,...a,isActive:()=>l||!!o?.sidebar&&o.sidebar===i.sidebar,label:n??i.id,to:i.path})},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:r,...a}=e;const{activeDoc:o}=(0,Be.Iw)(r),i=(0,ze.oz)(t,r).link;if(!i)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return(0,u.jsx)(oe,{exact:!0,...a,isActive:()=>o?.sidebar===t,label:n??i.label,to:i.path})},docsVersion:function(e){let{label:t,to:n,docsPluginId:r,...a}=e;const o=(0,ze.lO)(r)[0],i=t??o.label,l=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(o).path;return(0,u.jsx)(oe,{...a,label:i,to:l})},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:r,dropdownItemsBefore:a,dropdownItemsAfter:o,...i}=e;const{search:c,hash:d}=(0,l.TH)(),p=(0,Be.Iw)(n),f=(0,Be.gB)(n),{savePreferredVersionName:h}=(0,Ue.J)(n),m=[...a,...f.map((e=>{const t=p.alternateDocVersions[e.name]??$e(e);return{label:e.label,to:`${t.path}${c}${d}`,isActive:()=>e===p.activeVersion,onClick:()=>h(e.name)}})),...o],g=(0,ze.lO)(n)[0],b=t&&m.length>1?(0,s.I)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):g.label,y=t&&m.length>1?void 0:$e(g).path;return m.length<=1?(0,u.jsx)(oe,{...i,mobile:t,label:b,to:y,isActive:r?()=>!1:void 0}):(0,u.jsx)(fe,{...i,mobile:t,label:b,to:y,items:m,isActive:r?()=>!1:void 0})}};function qe(e){let{type:t,...n}=e;const r=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),a=He[r];if(!a)throw new Error(`No NavbarItem component found for type "${t}".`);return(0,u.jsx)(a,{...n})}function Ge(){const e=(0,P.e)(),t=(0,w.L)().navbar.items;return(0,u.jsx)("ul",{className:"menu__list",children:t.map(((t,n)=>(0,r.createElement)(qe,{mobile:!0,...t,onClick:()=>e.toggle(),key:n})))})}function Ze(e){return(0,u.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,u.jsx)(s.Z,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)",children:"\u2190 Back to main menu"})})}function Ve(){const e=0===(0,w.L)().navbar.items.length,t=I();return(0,u.jsxs)(u.Fragment,{children:[!e&&(0,u.jsx)(Ze,{onClick:()=>t.hide()}),t.content]})}function We(){const e=(0,P.e)();var t;return void 0===(t=e.shown)&&(t=!0),(0,r.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?(0,u.jsx)(M,{header:(0,u.jsx)(Q,{}),primaryMenu:(0,u.jsx)(Ge,{}),secondaryMenu:(0,u.jsx)(Ve,{})}):null}const Ke={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function Qe(e){return(0,u.jsx)("div",{role:"presentation",...e,className:(0,a.Z)("navbar-sidebar__backdrop",e.className)})}function Ye(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:o}}=(0,w.L)(),i=(0,P.e)(),{navbarRef:l,isNavbarVisible:d}=function(e){const[t,n]=(0,r.useState)(e),a=(0,r.useRef)(!1),o=(0,r.useRef)(0),i=(0,r.useCallback)((e=>{null!==e&&(o.current=e.getBoundingClientRect().height)}),[]);return(0,L.RF)(((t,r)=>{let{scrollY:i}=t;if(!e)return;if(i=l?n(!1):i+c{if(!e)return;const r=t.location.hash;if(r?document.getElementById(r.substring(1)):void 0)return a.current=!0,void n(!1);n(!0)})),{navbarRef:i,isNavbarVisible:t}}(n);return(0,u.jsxs)("nav",{ref:l,"aria-label":(0,s.I)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,a.Z)("navbar","navbar--fixed-top",n&&[Ke.navbarHideable,!d&&Ke.navbarHidden],{"navbar--dark":"dark"===o,"navbar--primary":"primary"===o,"navbar-sidebar--show":i.shown}),children:[t,(0,u.jsx)(Qe,{onClick:i.toggle}),(0,u.jsx)(We,{})]})}var Xe=n(8780);const Je={errorBoundaryError:"errorBoundaryError_a6uf",errorBoundaryFallback:"errorBoundaryFallback_VBag"};function et(e){return(0,u.jsx)("button",{type:"button",...e,children:(0,u.jsx)(s.Z,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error",children:"Try again"})})}function tt(e){let{error:t}=e;const n=(0,Xe.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,u.jsx)("p",{className:Je.errorBoundaryError,children:n})}class nt extends r.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const rt="right";function at(e){let{width:t=30,height:n=30,className:r,...a}=e;return(0,u.jsx)("svg",{className:r,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true",...a,children:(0,u.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function ot(){const{toggle:e,shown:t}=(0,P.e)();return(0,u.jsx)("button",{onClick:e,"aria-label":(0,s.I)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button",children:(0,u.jsx)(at,{})})}const it={colorModeToggle:"colorModeToggle_DEke"};function lt(e){let{items:t}=e;return(0,u.jsx)(u.Fragment,{children:t.map(((e,t)=>(0,u.jsx)(nt,{onError:t=>new Error(`A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n${JSON.stringify(e,null,2)}`,{cause:t}),children:(0,u.jsx)(qe,{...e})},t)))})}function st(e){let{left:t,right:n}=e;return(0,u.jsxs)("div",{className:"navbar__inner",children:[(0,u.jsx)("div",{className:"navbar__items",children:t}),(0,u.jsx)("div",{className:"navbar__items navbar__items--right",children:n})]})}function ct(){const e=(0,P.e)(),t=(0,w.L)().navbar.items,[n,r]=function(e){function t(e){return"left"===(e.position??rt)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),a=t.find((e=>"search"===e.type));return(0,u.jsx)(st,{left:(0,u.jsxs)(u.Fragment,{children:[!e.disabled&&(0,u.jsx)(ot,{}),(0,u.jsx)(W,{}),(0,u.jsx)(lt,{items:n})]}),right:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(lt,{items:r}),(0,u.jsx)(Z,{className:it.colorModeToggle}),!a&&(0,u.jsx)(Fe,{children:(0,u.jsx)(Ie,{})})]})})}function ut(){return(0,u.jsx)(Ye,{children:(0,u.jsx)(ct,{})})}function dt(e){let{item:t}=e;const{to:n,href:r,label:a,prependBaseUrlToHref:o,...i}=t,l=(0,X.Z)(n),s=(0,X.Z)(r,{forcePrependBaseUrl:!0});return(0,u.jsxs)(Y.Z,{className:"footer__link-item",...r?{href:o?s:r}:{to:l},...i,children:[a,r&&!(0,J.Z)(r)&&(0,u.jsx)(te.Z,{})]})}function pt(e){let{item:t}=e;return t.html?(0,u.jsx)("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)("li",{className:"footer__item",children:(0,u.jsx)(dt,{item:t})},t.href??t.to)}function ft(e){let{column:t}=e;return(0,u.jsxs)("div",{className:"col footer__col",children:[(0,u.jsx)("div",{className:"footer__title",children:t.title}),(0,u.jsx)("ul",{className:"footer__items clean-list",children:t.items.map(((e,t)=>(0,u.jsx)(pt,{item:e},t)))})]})}function ht(e){let{columns:t}=e;return(0,u.jsx)("div",{className:"row footer__links",children:t.map(((e,t)=>(0,u.jsx)(ft,{column:e},t)))})}function mt(){return(0,u.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function gt(e){let{item:t}=e;return t.html?(0,u.jsx)("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)(dt,{item:t})}function bt(e){let{links:t}=e;return(0,u.jsx)("div",{className:"footer__links text--center",children:(0,u.jsx)("div",{className:"footer__links",children:t.map(((e,n)=>(0,u.jsxs)(r.Fragment,{children:[(0,u.jsx)(gt,{item:e}),t.length!==n+1&&(0,u.jsx)(mt,{})]},n)))})})}function yt(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?(0,u.jsx)(ht,{columns:t}):(0,u.jsx)(bt,{links:t})}var vt=n(9965);const wt={footerLogoLink:"footerLogoLink_BH7S"};function kt(e){let{logo:t}=e;const{withBaseUrl:n}=(0,X.C)(),r={light:n(t.src),dark:n(t.srcDark??t.src)};return(0,u.jsx)(vt.Z,{className:(0,a.Z)("footer__logo",t.className),alt:t.alt,sources:r,width:t.width,height:t.height,style:t.style})}function xt(e){let{logo:t}=e;return t.href?(0,u.jsx)(Y.Z,{href:t.href,className:wt.footerLogoLink,target:t.target,children:(0,u.jsx)(kt,{logo:t})}):(0,u.jsx)(kt,{logo:t})}function St(e){let{copyright:t}=e;return(0,u.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function Ct(e){let{style:t,links:n,logo:r,copyright:o}=e;return(0,u.jsx)("footer",{className:(0,a.Z)("footer",{"footer--dark":"dark"===t}),children:(0,u.jsxs)("div",{className:"container container-fluid",children:[n,(r||o)&&(0,u.jsxs)("div",{className:"footer__bottom text--center",children:[r&&(0,u.jsx)("div",{className:"margin-bottom--sm",children:r}),o]})]})})}function Tt(){const{footer:e}=(0,w.L)();if(!e)return null;const{copyright:t,links:n,logo:r,style:a}=e;return(0,u.jsx)(Ct,{style:a,links:n&&n.length>0&&(0,u.jsx)(yt,{links:n}),logo:r&&(0,u.jsx)(xt,{logo:r}),copyright:t&&(0,u.jsx)(St,{copyright:t})})}const Et=r.memo(Tt),_t=(0,j.Qc)([F.S,k.pl,L.OC,Ue.L5,i.VC,function(e){let{children:t}=e;return(0,u.jsx)(R.n2,{children:(0,u.jsx)(P.M,{children:(0,u.jsx)(O,{children:t})})})}]);function At(e){let{children:t}=e;return(0,u.jsx)(_t,{children:t})}var Pt=n(2503);function Lt(e){let{error:t,tryAgain:n}=e;return(0,u.jsx)("main",{className:"container margin-vert--xl",children:(0,u.jsx)("div",{className:"row",children:(0,u.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,u.jsx)(Pt.Z,{as:"h1",className:"hero__title",children:(0,u.jsx)(s.Z,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed",children:"This page crashed."})}),(0,u.jsx)("div",{className:"margin-vert--lg",children:(0,u.jsx)(et,{onClick:n,className:"button button--primary shadow--lw"})}),(0,u.jsx)("hr",{}),(0,u.jsx)("div",{className:"margin-vert--md",children:(0,u.jsx)(tt,{error:t})})]})})})}const jt={mainWrapper:"mainWrapper_z2l0"};function Rt(e){const{children:t,noFooter:n,wrapperClassName:r,title:l,description:s}=e;return(0,b.t)(),(0,u.jsxs)(At,{children:[(0,u.jsx)(i.d,{title:l,description:s}),(0,u.jsx)(v,{}),(0,u.jsx)(A,{}),(0,u.jsx)(ut,{}),(0,u.jsx)("div",{id:d,className:(0,a.Z)(g.k.wrapper.main,jt.mainWrapper,r),children:(0,u.jsx)(o.Z,{fallback:e=>(0,u.jsx)(Lt,{...e}),children:t})}),!n&&(0,u.jsx)(Et,{})]})}},1327:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});n(7294);var r=n(3692),a=n(4996),o=n(2263),i=n(6668),l=n(9965),s=n(5893);function c(e){let{logo:t,alt:n,imageClassName:r}=e;const o={light:(0,a.Z)(t.src),dark:(0,a.Z)(t.srcDark||t.src)},i=(0,s.jsx)(l.Z,{className:t.className,sources:o,height:t.height,width:t.width,alt:n,style:t.style});return r?(0,s.jsx)("div",{className:r,children:i}):i}function u(e){const{siteConfig:{title:t}}=(0,o.Z)(),{navbar:{title:n,logo:l}}=(0,i.L)(),{imageClassName:u,titleClassName:d,...p}=e,f=(0,a.Z)(l?.href||"/"),h=n?"":t,m=l?.alt??h;return(0,s.jsxs)(r.Z,{to:f,...p,...l?.target&&{target:l.target},children:[l&&(0,s.jsx)(c,{logo:l,alt:m,imageClassName:u}),null!=n&&(0,s.jsx)("b",{className:d,children:n})]})}},197:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});n(7294);var r=n(5742),a=n(5893);function o(e){let{locale:t,version:n,tag:o}=e;const i=t;return(0,a.jsxs)(r.Z,{children:[t&&(0,a.jsx)("meta",{name:"docusaurus_locale",content:t}),n&&(0,a.jsx)("meta",{name:"docusaurus_version",content:n}),o&&(0,a.jsx)("meta",{name:"docusaurus_tag",content:o}),i&&(0,a.jsx)("meta",{name:"docsearch:language",content:i}),n&&(0,a.jsx)("meta",{name:"docsearch:version",content:n}),o&&(0,a.jsx)("meta",{name:"docsearch:docusaurus_tag",content:o})]})}},9965:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});var r=n(7294),a=n(512),o=n(2389),i=n(2949);const l={themedComponent:"themedComponent_mlkZ","themedComponent--light":"themedComponent--light_NVdE","themedComponent--dark":"themedComponent--dark_xIcU"};var s=n(5893);function c(e){let{className:t,children:n}=e;const c=(0,o.Z)(),{colorMode:u}=(0,i.I)();return(0,s.jsx)(s.Fragment,{children:(c?"dark"===u?["dark"]:["light"]:["light","dark"]).map((e=>{const o=n({theme:e,className:(0,a.Z)(t,l.themedComponent,l[`themedComponent--${e}`])});return(0,s.jsx)(r.Fragment,{children:o},e)}))})}function u(e){const{sources:t,className:n,alt:r,...a}=e;return(0,s.jsx)(c,{className:n,children:e=>{let{theme:n,className:o}=e;return(0,s.jsx)("img",{src:t[n],alt:r,className:o,...a})}})}},6043:(e,t,n)=>{"use strict";n.d(t,{u:()=>c,z:()=>b});var r=n(7294),a=n(412),o=n(469),i=n(1442),l=n(5893);const s="ease-in-out";function c(e){let{initialState:t}=e;const[n,a]=(0,r.useState)(t??!1),o=(0,r.useCallback)((()=>{a((e=>!e))}),[]);return{collapsed:n,setCollapsed:a,toggleCollapsed:o}}const u={display:"none",overflow:"hidden",height:"0px"},d={display:"block",overflow:"visible",height:"auto"};function p(e,t){const n=t?u:d;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function f(e){let{collapsibleRef:t,collapsed:n,animation:a}=e;const o=(0,r.useRef)(!1);(0,r.useEffect)((()=>{const e=t.current;function r(){const t=e.scrollHeight,n=a?.duration??function(e){if((0,i.n)())return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(t);return{transition:`height ${n}ms ${a?.easing??s}`,height:`${t}px`}}function l(){const t=r();e.style.transition=t.transition,e.style.height=t.height}if(!o.current)return p(e,n),void(o.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(l(),requestAnimationFrame((()=>{e.style.height=u.height,e.style.overflow=u.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{l()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,a])}function h(e){if(!a.Z.canUseDOM)return e?u:d}function m(e){let{as:t="div",collapsed:n,children:a,animation:o,onCollapseTransitionEnd:i,className:s,disableSSRStyle:c}=e;const u=(0,r.useRef)(null);return f({collapsibleRef:u,collapsed:n,animation:o}),(0,l.jsx)(t,{ref:u,style:c?void 0:h(n),onTransitionEnd:e=>{"height"===e.propertyName&&(p(u.current,n),i?.(n))},className:s,children:a})}function g(e){let{collapsed:t,...n}=e;const[a,i]=(0,r.useState)(!t),[s,c]=(0,r.useState)(t);return(0,o.Z)((()=>{t||i(!0)}),[t]),(0,o.Z)((()=>{a&&c(t)}),[a,t]),a?(0,l.jsx)(m,{...n,collapsed:s}):null}function b(e){let{lazy:t,...n}=e;const r=t?g:m;return(0,l.jsx)(r,{...n})}},9689:(e,t,n)=>{"use strict";n.d(t,{nT:()=>m,pl:()=>h});var r=n(7294),a=n(2389),o=n(12),i=n(902),l=n(6668),s=n(5893);const c=(0,o.WA)("docusaurus.announcement.dismiss"),u=(0,o.WA)("docusaurus.announcement.id"),d=()=>"true"===c.get(),p=e=>c.set(String(e)),f=r.createContext(null);function h(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,l.L)(),t=(0,a.Z)(),[n,o]=(0,r.useState)((()=>!!t&&d()));(0,r.useEffect)((()=>{o(d())}),[]);const i=(0,r.useCallback)((()=>{p(!0),o(!0)}),[]);return(0,r.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=u.get();"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;u.set(t),r&&p(!1),!r&&d()||o(!1)}),[e]),(0,r.useMemo)((()=>({isActive:!!e&&!n,close:i})),[e,n,i])}();return(0,s.jsx)(f.Provider,{value:n,children:t})}function m(){const e=(0,r.useContext)(f);if(!e)throw new i.i6("AnnouncementBarProvider");return e}},2949:(e,t,n)=>{"use strict";n.d(t,{I:()=>b,S:()=>g});var r=n(7294),a=n(412),o=n(902),i=n(12),l=n(6668),s=n(5893);const c=r.createContext(void 0),u="theme",d=(0,i.WA)(u),p={light:"light",dark:"dark"},f=e=>e===p.dark?p.dark:p.light,h=e=>a.Z.canUseDOM?f(document.documentElement.getAttribute("data-theme")):f(e),m=e=>{d.set(f(e))};function g(e){let{children:t}=e;const n=function(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,l.L)(),[a,o]=(0,r.useState)(h(e));(0,r.useEffect)((()=>{t&&d.del()}),[t]);const i=(0,r.useCallback)((function(t,r){void 0===r&&(r={});const{persist:a=!0}=r;t?(o(t),a&&m(t)):(o(n?window.matchMedia("(prefers-color-scheme: dark)").matches?p.dark:p.light:e),d.del())}),[n,e]);(0,r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",f(a))}),[a]),(0,r.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==u)return;const t=d.get();null!==t&&i(f(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,i]);const s=(0,r.useRef)(!1);return(0,r.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{window.matchMedia("print").matches||s.current?s.current=window.matchMedia("print").matches:i(null)};return e.addListener(r),()=>e.removeListener(r)}),[i,t,n]),(0,r.useMemo)((()=>({colorMode:a,setColorMode:i,get isDarkTheme(){return a===p.dark},setLightTheme(){i(p.light)},setDarkTheme(){i(p.dark)}})),[a,i])}();return(0,s.jsx)(c.Provider,{value:n,children:t})}function b(){const e=(0,r.useContext)(c);if(null==e)throw new o.i6("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},373:(e,t,n)=>{"use strict";n.d(t,{J:()=>v,L5:()=>b,Oh:()=>w});var r=n(7294),a=n(143),o=n(9935),i=n(6668),l=n(2802),s=n(902),c=n(12),u=n(5893);const d=e=>`docs-preferred-version-${e}`,p={save:(e,t,n)=>{(0,c.WA)(d(e),{persistence:t}).set(n)},read:(e,t)=>(0,c.WA)(d(e),{persistence:t}).get(),clear:(e,t)=>{(0,c.WA)(d(e),{persistence:t}).del()}},f=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const h=r.createContext(null);function m(){const e=(0,a._r)(),t=(0,i.L)().docs.versionPersistence,n=(0,r.useMemo)((()=>Object.keys(e)),[e]),[o,l]=(0,r.useState)((()=>f(n)));(0,r.useEffect)((()=>{l(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:r}=e;function a(e){const t=p.read(e,n);return r[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(p.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,a(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[o,(0,r.useMemo)((()=>({savePreferredVersion:function(e,n){p.save(e,t,n),l((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function g(e){let{children:t}=e;const n=m();return(0,u.jsx)(h.Provider,{value:n,children:t})}function b(e){let{children:t}=e;return l.cE?(0,u.jsx)(g,{children:t}):(0,u.jsx)(u.Fragment,{children:t})}function y(){const e=(0,r.useContext)(h);if(!e)throw new s.i6("DocsPreferredVersionContextProvider");return e}function v(e){void 0===e&&(e=o.m);const t=(0,a.zh)(e),[n,i]=y(),{preferredVersionName:l}=n[e];return{preferredVersion:t.versions.find((e=>e.name===l))??null,savePreferredVersionName:(0,r.useCallback)((t=>{i.savePreferredVersion(e,t)}),[i,e])}}function w(){const e=(0,a._r)(),[t]=y();function n(n){const r=e[n],{preferredVersionName:a}=t[n];return r.versions.find((e=>e.name===a))??null}const r=Object.keys(e);return Object.fromEntries(r.map((e=>[e,n(e)])))}},1116:(e,t,n)=>{"use strict";n.d(t,{V:()=>c,b:()=>s});var r=n(7294),a=n(902),o=n(5893);const i=Symbol("EmptyContext"),l=r.createContext(i);function s(e){let{children:t,name:n,items:a}=e;const i=(0,r.useMemo)((()=>n&&a?{name:n,items:a}:null),[n,a]);return(0,o.jsx)(l.Provider,{value:i,children:t})}function c(){const e=(0,r.useContext)(l);if(e===i)throw new a.i6("DocsSidebarProvider");return e}},4477:(e,t,n)=>{"use strict";n.d(t,{E:()=>s,q:()=>l});var r=n(7294),a=n(902),o=n(5893);const i=r.createContext(null);function l(e){let{children:t,version:n}=e;return(0,o.jsx)(i.Provider,{value:n,children:t})}function s(){const e=(0,r.useContext)(i);if(null===e)throw new a.i6("DocsVersionProvider");return e}},3163:(e,t,n)=>{"use strict";n.d(t,{M:()=>p,e:()=>f});var r=n(7294),a=n(3102),o=n(7524),i=n(1980),l=n(6668),s=n(902),c=n(5893);const u=r.createContext(void 0);function d(){const e=function(){const e=(0,a.HY)(),{items:t}=(0,l.L)().navbar;return 0===t.length&&!e.component}(),t=(0,o.i)(),n=!e&&"mobile"===t,[s,c]=(0,r.useState)(!1);(0,i.Rb)((()=>{if(s)return c(!1),!1}));const u=(0,r.useCallback)((()=>{c((e=>!e))}),[]);return(0,r.useEffect)((()=>{"desktop"===t&&c(!1)}),[t]),(0,r.useMemo)((()=>({disabled:e,shouldRender:n,toggle:u,shown:s})),[e,n,u,s])}function p(e){let{children:t}=e;const n=d();return(0,c.jsx)(u.Provider,{value:n,children:t})}function f(){const e=r.useContext(u);if(void 0===e)throw new s.i6("NavbarMobileSidebarProvider");return e}},3102:(e,t,n)=>{"use strict";n.d(t,{HY:()=>s,Zo:()=>c,n2:()=>l});var r=n(7294),a=n(902),o=n(5893);const i=r.createContext(null);function l(e){let{children:t}=e;const n=(0,r.useState)({component:null,props:null});return(0,o.jsx)(i.Provider,{value:n,children:t})}function s(){const e=(0,r.useContext)(i);if(!e)throw new a.i6("NavbarSecondaryMenuContentProvider");return e[0]}function c(e){let{component:t,props:n}=e;const o=(0,r.useContext)(i);if(!o)throw new a.i6("NavbarSecondaryMenuContentProvider");const[,l]=o,s=(0,a.Ql)(n);return(0,r.useEffect)((()=>{l({component:t,props:s})}),[l,t,s]),(0,r.useEffect)((()=>()=>l({component:null,props:null})),[l]),null}},9727:(e,t,n)=>{"use strict";n.d(t,{h:()=>a,t:()=>o});var r=n(7294);const a="navigation-with-keyboard";function o(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(a),"mousedown"===e.type&&document.body.classList.remove(a)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(a),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},6177:(e,t,n)=>{"use strict";n.d(t,{K:()=>l,M:()=>s});var r=n(7294),a=n(2263),o=n(1980);const i="q";function l(){return(0,o.Nc)(i)}function s(){const{siteConfig:{baseUrl:e,themeConfig:t}}=(0,a.Z)(),{algolia:{searchPagePath:n}}=t;return(0,r.useCallback)((t=>`${e}${n}?${i}=${encodeURIComponent(t)}`),[e,n])}},7524:(e,t,n)=>{"use strict";n.d(t,{i:()=>l});var r=n(7294),a=n(412);const o={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function l(e){let{desktopBreakpoint:t=i}=void 0===e?{}:e;const[n,l]=(0,r.useState)((()=>"ssr"));return(0,r.useEffect)((()=>{function e(){l(function(e){if(!a.Z.canUseDOM)throw new Error("getWindowSize() should only be called after React hydration");return window.innerWidth>e?o.desktop:o.mobile}(t))}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[t]),n}},5281:(e,t,n)=>{"use strict";n.d(t,{k:()=>r});const r={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",unlistedBanner:"theme-unlisted-banner",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{}}},1442:(e,t,n)=>{"use strict";function r(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{n:()=>r})},2802:(e,t,n)=>{"use strict";n.d(t,{LM:()=>f,_F:()=>g,cE:()=>p,SN:()=>C,lO:()=>k,vY:()=>S,oz:()=>x,s1:()=>w,f:()=>y});var r=n(7294),a=n(6550),o=n(8790),i=n(143),l=n(373),s=n(4477),c=n(1116);function u(e){return Array.from(new Set(e))}var d=n(8596);const p=!!i._r;function f(e){return"link"!==e.type||e.unlisted?"category"===e.type?function(e){if(e.href&&!e.linkUnlisted)return e.href;for(const t of e.items){const e=f(t);if(e)return e}}(e):void 0:e.href}const h=(e,t)=>void 0!==e&&(0,d.Mg)(e,t),m=(e,t)=>e.some((e=>g(e,t)));function g(e,t){return"link"===e.type?h(e.href,t):"category"===e.type&&(h(e.href,t)||m(e.items,t))}function b(e,t){switch(e.type){case"category":return g(e,t)||e.items.some((e=>b(e,t)));case"link":return!e.unlisted||g(e,t);default:return!0}}function y(e,t){return(0,r.useMemo)((()=>e.filter((e=>b(e,t)))),[e,t])}function v(e){let{sidebarItems:t,pathname:n,onlyCategories:r=!1}=e;const a=[];return function e(t){for(const o of t)if("category"===o.type&&((0,d.Mg)(o.href,n)||e(o.items))||"link"===o.type&&(0,d.Mg)(o.href,n)){return r&&"category"!==o.type||a.unshift(o),!0}return!1}(t),a}function w(){const e=(0,c.V)(),{pathname:t}=(0,a.TH)(),n=(0,i.gA)()?.pluginData.breadcrumbs;return!1!==n&&e?v({sidebarItems:e.items,pathname:t}):null}function k(e){const{activeVersion:t}=(0,i.Iw)(e),{preferredVersion:n}=(0,l.J)(e),a=(0,i.yW)(e);return(0,r.useMemo)((()=>u([t,n,a].filter(Boolean))),[t,n,a])}function x(e,t){const n=k(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),r=t.find((t=>t[0]===e));if(!r)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${t.map((e=>e[0])).join("\n- ")}`);return r[1]}),[e,n])}function S(e,t){const n=k(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),r=t.find((t=>t.id===e));if(!r){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${n.length>1?"s":""} "${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${u(t.map((e=>e.id))).join("\n- ")}`)}return r}),[e,n])}function C(e){let{route:t}=e;const n=(0,a.TH)(),r=(0,s.E)(),i=t.routes,l=i.find((e=>(0,a.LX)(n.pathname,e)));if(!l)return null;const c=l.sidebar,u=c?r.docsSidebars[c]:void 0;return{docElement:(0,o.H)(i),sidebarName:c,sidebarItems:u}}},2128:(e,t,n)=>{"use strict";n.d(t,{p:()=>a});var r=n(2263);function a(e){const{siteConfig:t}=(0,r.Z)(),{title:n,titleDelimiter:a}=t;return e?.trim().length?`${e.trim()} ${a} ${n}`:n}},1980:(e,t,n)=>{"use strict";n.d(t,{Nc:()=>s,Rb:()=>i});var r=n(7294),a=n(6550),o=n(902);function i(e){!function(e){const t=(0,a.k6)(),n=(0,o.zX)(e);(0,r.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}function l(e){return function(e){const t=(0,a.k6)();return(0,r.useSyncExternalStore)(t.listen,(()=>e(t)),(()=>e(t)))}((t=>null===e?null:new URLSearchParams(t.location.search).get(e)))}function s(e){const t=l(e)??"",n=function(){const e=(0,a.k6)();return(0,r.useCallback)(((t,n,r)=>{const a=new URLSearchParams(e.location.search);n?a.set(t,n):a.delete(t),(r?.push?e.push:e.replace)({search:a.toString()})}),[e])}();return[t,(0,r.useCallback)(((t,r)=>{n(e,t,r)}),[n,e])]}},833:(e,t,n)=>{"use strict";n.d(t,{FG:()=>f,d:()=>d,VC:()=>h});var r=n(7294),a=n(512),o=n(5742),i=n(226);function l(){const e=r.useContext(i._);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var s=n(4996),c=n(2128),u=n(5893);function d(e){let{title:t,description:n,keywords:r,image:a,children:i}=e;const l=(0,c.p)(t),{withBaseUrl:d}=(0,s.C)(),p=a?d(a,{absolute:!0}):void 0;return(0,u.jsxs)(o.Z,{children:[t&&(0,u.jsx)("title",{children:l}),t&&(0,u.jsx)("meta",{property:"og:title",content:l}),n&&(0,u.jsx)("meta",{name:"description",content:n}),n&&(0,u.jsx)("meta",{property:"og:description",content:n}),r&&(0,u.jsx)("meta",{name:"keywords",content:Array.isArray(r)?r.join(","):r}),p&&(0,u.jsx)("meta",{property:"og:image",content:p}),p&&(0,u.jsx)("meta",{name:"twitter:image",content:p}),i]})}const p=r.createContext(void 0);function f(e){let{className:t,children:n}=e;const i=r.useContext(p),l=(0,a.Z)(i,t);return(0,u.jsxs)(p.Provider,{value:l,children:[(0,u.jsx)(o.Z,{children:(0,u.jsx)("html",{className:l})}),n]})}function h(e){let{children:t}=e;const n=l(),r=`plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const o=`plugin-id-${n.plugin.id}`;return(0,u.jsx)(f,{className:(0,a.Z)(r,o),children:t})}},902:(e,t,n)=>{"use strict";n.d(t,{D9:()=>l,Qc:()=>u,Ql:()=>c,i6:()=>s,zX:()=>i});var r=n(7294),a=n(469),o=n(5893);function i(e){const t=(0,r.useRef)(e);return(0,a.Z)((()=>{t.current=e}),[e]),(0,r.useCallback)((function(){return t.current(...arguments)}),[])}function l(e){const t=(0,r.useRef)();return(0,a.Z)((()=>{t.current=e})),t.current}class s extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function c(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,r.useMemo)((()=>e),t.flat())}function u(e){return t=>{let{children:n}=t;return(0,o.jsx)(o.Fragment,{children:e.reduceRight(((e,t)=>(0,o.jsx)(t,{children:e})),n)})}}},8022:(e,t,n)=>{"use strict";function r(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}n.d(t,{F:()=>r})},8596:(e,t,n)=>{"use strict";n.d(t,{Mg:()=>i,Ns:()=>l});var r=n(7294),a=n(723),o=n(2263);function i(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function l(){const{baseUrl:e}=(0,o.Z)().siteConfig;return(0,r.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function r(e){return e.path===t&&!0===e.exact}function a(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(r)||e(t.filter(a).flatMap((e=>e.routes??[])))}(n)}({routes:a.Z,baseUrl:e})),[e])}},2466:(e,t,n)=>{"use strict";n.d(t,{Ct:()=>f,OC:()=>c,RF:()=>p});var r=n(7294),a=n(412),o=n(2389),i=(n(469),n(902)),l=n(5893);const s=r.createContext(void 0);function c(e){let{children:t}=e;const n=function(){const e=(0,r.useRef)(!0);return(0,r.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return(0,l.jsx)(s.Provider,{value:n,children:t})}function u(){const e=(0,r.useContext)(s);if(null==e)throw new i.i6("ScrollControllerProvider");return e}const d=()=>a.Z.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function p(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=u(),a=(0,r.useRef)(d()),o=(0,i.zX)(e);(0,r.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=d();o(e,a.current),a.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[o,n,...t])}function f(){const e=(0,r.useRef)(null),t=(0,o.Z)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function r(){const a=document.documentElement.scrollTop;(n&&a>e||!n&&at&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},3320:(e,t,n)=>{"use strict";n.d(t,{HX:()=>i,_q:()=>s,os:()=>l});var r=n(143),a=n(2263),o=n(373);const i="default";function l(e,t){return`docs-${e}-${t}`}function s(){const{i18n:e}=(0,a.Z)(),t=(0,r._r)(),n=(0,r.WS)(),s=(0,o.Oh)();const c=[i,...Object.keys(t).map((function(e){const r=n?.activePlugin.pluginId===e?n.activeVersion:void 0,a=s[e],o=t[e].versions.find((e=>e.isLast));return l(e,(r??a??o).name)}))];return{locale:e.currentLocale,tags:c}}},12:(e,t,n)=>{"use strict";n.d(t,{WA:()=>s});n(7294);const r="localStorage";function a(e){let{key:t,oldValue:n,newValue:r,storage:a}=e;if(n===r)return;const o=document.createEvent("StorageEvent");o.initStorageEvent("storage",!1,!1,t,n,r,window.location.href,a),window.dispatchEvent(o)}function o(e){if(void 0===e&&(e=r),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,i||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),i=!0),null}var t}let i=!1;const l={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function s(e,t){if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(e);const n=o(t?.persistence);return null===n?l:{get:()=>{try{return n.getItem(e)}catch(t){return console.error(`Docusaurus storage error, can't get key=${e}`,t),null}},set:t=>{try{const r=n.getItem(e);n.setItem(e,t),a({key:e,oldValue:r,newValue:t,storage:n})}catch(r){console.error(`Docusaurus storage error, can't set ${e}=${t}`,r)}},del:()=>{try{const t=n.getItem(e);n.removeItem(e),a({key:e,oldValue:t,newValue:null,storage:n})}catch(t){console.error(`Docusaurus storage error, can't delete key=${e}`,t)}},listen:t=>{try{const r=r=>{r.storageArea===n&&r.key===e&&t(r)};return window.addEventListener("storage",r),()=>window.removeEventListener("storage",r)}catch(r){return console.error(`Docusaurus storage error, can't listen for changes of key=${e}`,r),()=>{}}}}}},4711:(e,t,n)=>{"use strict";n.d(t,{l:()=>i});var r=n(2263),a=n(6550),o=n(8780);function i(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:i,currentLocale:l}}=(0,r.Z)(),{pathname:s}=(0,a.TH)(),c=(0,o.applyTrailingSlash)(s,{trailingSlash:n,baseUrl:e}),u=l===i?e:e.replace(`/${l}/`,"/"),d=c.replace(e,"");return{createUrl:function(e){let{locale:n,fullyQualified:r}=e;return`${r?t:""}${function(e){return e===i?`${u}`:`${u}${e}/`}(n)}${d}`}}}},5936:(e,t,n)=>{"use strict";n.d(t,{S:()=>i});var r=n(7294),a=n(6550),o=n(902);function i(e){const t=(0,a.TH)(),n=(0,o.D9)(t),i=(0,o.zX)(e);(0,r.useEffect)((()=>{n&&t!==n&&i({location:t,previousLocation:n})}),[i,t,n])}},6668:(e,t,n)=>{"use strict";n.d(t,{L:()=>a});var r=n(2263);function a(){return(0,r.Z)().siteConfig.themeConfig}},6278:(e,t,n)=>{"use strict";n.d(t,{L:()=>a});var r=n(2263);function a(){const{siteConfig:{themeConfig:e}}=(0,r.Z)();return e}},239:(e,t,n)=>{"use strict";n.d(t,{l:()=>l});var r=n(7294),a=n(8022),o=n(4996),i=n(6278);function l(){const{withBaseUrl:e}=(0,o.C)(),{algolia:{externalUrlRegex:t,replaceSearchResultPathname:n}}=(0,i.L)();return(0,r.useCallback)((r=>{const o=new URL(r);if((0,a.F)(t,o.href))return r;const i=`${o.pathname+o.hash}`;return e(function(e,t){return t?e.replaceAll(new RegExp(t.from,"g"),t.to):e}(i,n))}),[e,t,n])}},8802:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){const{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[a]=e.split(/[#?]/),o="/"===a||a===r?a:(i=a,n?function(e){return e.endsWith("/")?e:`${e}/`}(i):function(e){return e.endsWith("/")?e.slice(0,-1):e}(i));var i;return e.replace(a,o)}},4143:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=void 0,t.getErrorCausalChain=function e(t){return t.cause?[t,...e(t.cause)]:[t]}},8780:function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=t.applyTrailingSlash=t.blogPostContainerID=void 0,t.blogPostContainerID="__blog-post-container";var a=n(8802);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return r(a).default}});var o=n(4143);Object.defineProperty(t,"getErrorCausalChain",{enumerable:!0,get:function(){return o.getErrorCausalChain}})},9318:(e,t,n)=>{"use strict";n.d(t,{lX:()=>w,q_:()=>E,ob:()=>f,PP:()=>A,Ep:()=>p});var r=n(7462);function a(e){return"/"===e.charAt(0)}function o(e,t){for(var n=t,r=n+1,a=e.length;r=0;p--){var f=i[p];"."===f?o(i,p):".."===f?(o(i,p),d++):d&&(o(i,p),d--)}if(!c)for(;d--;d)i.unshift("..");!c||""===i[0]||i[0]&&a(i[0])||i.unshift("");var h=i.join("/");return n&&"/"!==h.substr(-1)&&(h+="/"),h};var l=n(8776);function s(e){return"/"===e.charAt(0)?e:"/"+e}function c(e){return"/"===e.charAt(0)?e.substr(1):e}function u(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var t=e.pathname,n=e.search,r=e.hash,a=t||"/";return n&&"?"!==n&&(a+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(a+="#"===r.charAt(0)?r:"#"+r),a}function f(e,t,n,a){var o;"string"==typeof e?(o=function(e){var t=e||"/",n="",r="",a=t.indexOf("#");-1!==a&&(r=t.substr(a),t=t.substr(0,a));var o=t.indexOf("?");return-1!==o&&(n=t.substr(o),t=t.substr(0,o)),{pathname:t,search:"?"===n?"":n,hash:"#"===r?"":r}}(e),o.state=t):(void 0===(o=(0,r.Z)({},e)).pathname&&(o.pathname=""),o.search?"?"!==o.search.charAt(0)&&(o.search="?"+o.search):o.search="",o.hash?"#"!==o.hash.charAt(0)&&(o.hash="#"+o.hash):o.hash="",void 0!==t&&void 0===o.state&&(o.state=t));try{o.pathname=decodeURI(o.pathname)}catch(l){throw l instanceof URIError?new URIError('Pathname "'+o.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):l}return n&&(o.key=n),a?o.pathname?"/"!==o.pathname.charAt(0)&&(o.pathname=i(o.pathname,a.pathname)):o.pathname=a.pathname:o.pathname||(o.pathname="/"),o}function h(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,r,a){if(null!=e){var o="function"==typeof e?e(t,n):e;"string"==typeof o?"function"==typeof r?r(o,a):a(!0):a(!1!==o)}else a(!0)},appendListener:function(e){var n=!0;function r(){n&&e.apply(void 0,arguments)}return t.push(r),function(){n=!1,t=t.filter((function(e){return e!==r}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),r=0;rt?n.splice(t,n.length-t,a):n.push(a),d({action:r,location:a,index:t,entries:n})}}))},replace:function(e,t){var r="REPLACE",a=f(e,t,m(),w.location);u.confirmTransitionTo(a,r,n,(function(e){e&&(w.entries[w.index]=a,d({action:r,location:a}))}))},go:v,goBack:function(){v(-1)},goForward:function(){v(1)},canGo:function(e){var t=w.index+e;return t>=0&&t{"use strict";var r=n(9864),a={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},o={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},l={};function s(e){return r.isMemo(e)?i:l[e.$$typeof]||a}l[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},l[r.Memo]=i;var c=Object.defineProperty,u=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,h=Object.prototype;e.exports=function e(t,n,r){if("string"!=typeof n){if(h){var a=f(n);a&&a!==h&&e(t,a,r)}var i=u(n);d&&(i=i.concat(d(n)));for(var l=s(t),m=s(n),g=0;g{"use strict";e.exports=function(e,t,n,r,a,o,i,l){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,a,o,i,l],u=0;(s=new Error(t.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw s.framesToPop=1,s}}},5826:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},2497:(e,t,n)=>{"use strict";n.r(t)},2295:(e,t,n)=>{"use strict";n.r(t)},4865:function(e,t,n){var r,a;r=function(){var e,t,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:''};function a(e,t,n){return en?n:e}function o(e){return 100*(-1+e)}function i(e,t,n){var a;return(a="translate3d"===r.positionUsing?{transform:"translate3d("+o(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+o(e)+"%,0)"}:{"margin-left":o(e)+"%"}).transition="all "+t+"ms "+n,a}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=a(e,r.minimum,1),n.status=1===e?null:e;var o=n.render(!t),c=o.querySelector(r.barSelector),u=r.speed,d=r.easing;return o.offsetWidth,l((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),s(c,i(e,u,d)),1===e?(s(o,{transition:"none",opacity:1}),o.offsetWidth,setTimeout((function(){s(o,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),u)}),u)):setTimeout(t,u)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*a(Math.random()*t,.1,.95)),t=a(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var a,i=t.querySelector(r.barSelector),l=e?"-100":o(n.status||0),c=document.querySelector(r.parent);return s(i,{transition:"all 0 linear",transform:"translate3d("+l+"%,0,0)"}),r.showSpinner||(a=t.querySelector(r.spinnerSelector))&&f(a),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(t),t},n.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var l=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),s=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function r(t){var n=document.body.style;if(t in n)return t;for(var r,a=e.length,o=t.charAt(0).toUpperCase()+t.slice(1);a--;)if((r=e[a]+o)in n)return r;return t}function a(e){return e=n(e),t[e]||(t[e]=r(e))}function o(e,t,n){t=a(t),e.style[t]=n}return function(e,t){var n,r,a=arguments;if(2==a.length)for(n in t)void 0!==(r=t[n])&&t.hasOwnProperty(n)&&o(e,n,r);else o(e,a[1],a[2])}}();function c(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function u(e,t){var n=p(e),r=n+t;c(n,t)||(e.className=r.substring(1))}function d(e,t){var n,r=p(e);c(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(a="function"==typeof r?r.call(t,n,t,e):r)||(e.exports=a)},9901:e=>{e.exports&&(e.exports={core:{meta:{path:"components/prism-core.js",option:"mandatory"},core:"Core"},themes:{meta:{path:"themes/{id}.css",link:"index.html?theme={id}",exclusive:!0},prism:{title:"Default",option:"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{title:"Okaidia",owner:"ocodia"},"prism-twilight":{title:"Twilight",owner:"remybach"},"prism-coy":{title:"Coy",owner:"tshedor"},"prism-solarizedlight":{title:"Solarized Light",owner:"hectormatos2011 "},"prism-tomorrow":{title:"Tomorrow Night",owner:"Rosey"}},languages:{meta:{path:"components/prism-{id}",noCSS:!0,examplesPath:"examples/prism-{id}",addCheckAll:!0},markup:{title:"Markup",alias:["html","xml","svg","mathml","ssml","atom","rss"],aliasTitles:{html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",ssml:"SSML",atom:"Atom",rss:"RSS"},option:"default"},css:{title:"CSS",option:"default",modify:"markup"},clike:{title:"C-like",option:"default"},javascript:{title:"JavaScript",require:"clike",modify:"markup",optional:"regex",alias:"js",option:"default"},abap:{title:"ABAP",owner:"dellagustin"},abnf:{title:"ABNF",owner:"RunDevelopment"},actionscript:{title:"ActionScript",require:"javascript",modify:"markup",owner:"Golmote"},ada:{title:"Ada",owner:"Lucretia"},agda:{title:"Agda",owner:"xy-ren"},al:{title:"AL",owner:"RunDevelopment"},antlr4:{title:"ANTLR4",alias:"g4",owner:"RunDevelopment"},apacheconf:{title:"Apache Configuration",owner:"GuiTeK"},apex:{title:"Apex",require:["clike","sql"],owner:"RunDevelopment"},apl:{title:"APL",owner:"ngn"},applescript:{title:"AppleScript",owner:"Golmote"},aql:{title:"AQL",owner:"RunDevelopment"},arduino:{title:"Arduino",require:"cpp",alias:"ino",owner:"dkern"},arff:{title:"ARFF",owner:"Golmote"},armasm:{title:"ARM Assembly",alias:"arm-asm",owner:"RunDevelopment"},arturo:{title:"Arturo",alias:"art",optional:["bash","css","javascript","markup","markdown","sql"],owner:"drkameleon"},asciidoc:{alias:"adoc",title:"AsciiDoc",owner:"Golmote"},aspnet:{title:"ASP.NET (C#)",require:["markup","csharp"],owner:"nauzilus"},asm6502:{title:"6502 Assembly",owner:"kzurawel"},asmatmel:{title:"Atmel AVR Assembly",owner:"cerkit"},autohotkey:{title:"AutoHotkey",owner:"aviaryan"},autoit:{title:"AutoIt",owner:"Golmote"},avisynth:{title:"AviSynth",alias:"avs",owner:"Zinfidel"},"avro-idl":{title:"Avro IDL",alias:"avdl",owner:"RunDevelopment"},awk:{title:"AWK",alias:"gawk",aliasTitles:{gawk:"GAWK"},owner:"RunDevelopment"},bash:{title:"Bash",alias:["sh","shell"],aliasTitles:{sh:"Shell",shell:"Shell"},owner:"zeitgeist87"},basic:{title:"BASIC",owner:"Golmote"},batch:{title:"Batch",owner:"Golmote"},bbcode:{title:"BBcode",alias:"shortcode",aliasTitles:{shortcode:"Shortcode"},owner:"RunDevelopment"},bbj:{title:"BBj",owner:"hyyan"},bicep:{title:"Bicep",owner:"johnnyreilly"},birb:{title:"Birb",require:"clike",owner:"Calamity210"},bison:{title:"Bison",require:"c",owner:"Golmote"},bnf:{title:"BNF",alias:"rbnf",aliasTitles:{rbnf:"RBNF"},owner:"RunDevelopment"},bqn:{title:"BQN",owner:"yewscion"},brainfuck:{title:"Brainfuck",owner:"Golmote"},brightscript:{title:"BrightScript",owner:"RunDevelopment"},bro:{title:"Bro",owner:"wayward710"},bsl:{title:"BSL (1C:Enterprise)",alias:"oscript",aliasTitles:{oscript:"OneScript"},owner:"Diversus23"},c:{title:"C",require:"clike",owner:"zeitgeist87"},csharp:{title:"C#",require:"clike",alias:["cs","dotnet"],owner:"mvalipour"},cpp:{title:"C++",require:"c",owner:"zeitgeist87"},cfscript:{title:"CFScript",require:"clike",alias:"cfc",owner:"mjclemente"},chaiscript:{title:"ChaiScript",require:["clike","cpp"],owner:"RunDevelopment"},cil:{title:"CIL",owner:"sbrl"},cilkc:{title:"Cilk/C",require:"c",alias:"cilk-c",owner:"OpenCilk"},cilkcpp:{title:"Cilk/C++",require:"cpp",alias:["cilk-cpp","cilk"],owner:"OpenCilk"},clojure:{title:"Clojure",owner:"troglotit"},cmake:{title:"CMake",owner:"mjrogozinski"},cobol:{title:"COBOL",owner:"RunDevelopment"},coffeescript:{title:"CoffeeScript",require:"javascript",alias:"coffee",owner:"R-osey"},concurnas:{title:"Concurnas",alias:"conc",owner:"jasontatton"},csp:{title:"Content-Security-Policy",owner:"ScottHelme"},cooklang:{title:"Cooklang",owner:"ahue"},coq:{title:"Coq",owner:"RunDevelopment"},crystal:{title:"Crystal",require:"ruby",owner:"MakeNowJust"},"css-extras":{title:"CSS Extras",require:"css",modify:"css",owner:"milesj"},csv:{title:"CSV",owner:"RunDevelopment"},cue:{title:"CUE",owner:"RunDevelopment"},cypher:{title:"Cypher",owner:"RunDevelopment"},d:{title:"D",require:"clike",owner:"Golmote"},dart:{title:"Dart",require:"clike",owner:"Golmote"},dataweave:{title:"DataWeave",owner:"machaval"},dax:{title:"DAX",owner:"peterbud"},dhall:{title:"Dhall",owner:"RunDevelopment"},diff:{title:"Diff",owner:"uranusjr"},django:{title:"Django/Jinja2",require:"markup-templating",alias:"jinja2",owner:"romanvm"},"dns-zone-file":{title:"DNS zone file",owner:"RunDevelopment",alias:"dns-zone"},docker:{title:"Docker",alias:"dockerfile",owner:"JustinBeckwith"},dot:{title:"DOT (Graphviz)",alias:"gv",optional:"markup",owner:"RunDevelopment"},ebnf:{title:"EBNF",owner:"RunDevelopment"},editorconfig:{title:"EditorConfig",owner:"osipxd"},eiffel:{title:"Eiffel",owner:"Conaclos"},ejs:{title:"EJS",require:["javascript","markup-templating"],owner:"RunDevelopment",alias:"eta",aliasTitles:{eta:"Eta"}},elixir:{title:"Elixir",owner:"Golmote"},elm:{title:"Elm",owner:"zwilias"},etlua:{title:"Embedded Lua templating",require:["lua","markup-templating"],owner:"RunDevelopment"},erb:{title:"ERB",require:["ruby","markup-templating"],owner:"Golmote"},erlang:{title:"Erlang",owner:"Golmote"},"excel-formula":{title:"Excel Formula",alias:["xlsx","xls"],owner:"RunDevelopment"},fsharp:{title:"F#",require:"clike",owner:"simonreynolds7"},factor:{title:"Factor",owner:"catb0t"},false:{title:"False",owner:"edukisto"},"firestore-security-rules":{title:"Firestore security rules",require:"clike",owner:"RunDevelopment"},flow:{title:"Flow",require:"javascript",owner:"Golmote"},fortran:{title:"Fortran",owner:"Golmote"},ftl:{title:"FreeMarker Template Language",require:"markup-templating",owner:"RunDevelopment"},gml:{title:"GameMaker Language",alias:"gamemakerlanguage",require:"clike",owner:"LiarOnce"},gap:{title:"GAP (CAS)",owner:"RunDevelopment"},gcode:{title:"G-code",owner:"RunDevelopment"},gdscript:{title:"GDScript",owner:"RunDevelopment"},gedcom:{title:"GEDCOM",owner:"Golmote"},gettext:{title:"gettext",alias:"po",owner:"RunDevelopment"},gherkin:{title:"Gherkin",owner:"hason"},git:{title:"Git",owner:"lgiraudel"},glsl:{title:"GLSL",require:"c",owner:"Golmote"},gn:{title:"GN",alias:"gni",owner:"RunDevelopment"},"linker-script":{title:"GNU Linker Script",alias:"ld",owner:"RunDevelopment"},go:{title:"Go",require:"clike",owner:"arnehormann"},"go-module":{title:"Go module",alias:"go-mod",owner:"RunDevelopment"},gradle:{title:"Gradle",require:"clike",owner:"zeabdelkhalek-badido18"},graphql:{title:"GraphQL",optional:"markdown",owner:"Golmote"},groovy:{title:"Groovy",require:"clike",owner:"robfletcher"},haml:{title:"Haml",require:"ruby",optional:["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],owner:"Golmote"},handlebars:{title:"Handlebars",require:"markup-templating",alias:["hbs","mustache"],aliasTitles:{mustache:"Mustache"},owner:"Golmote"},haskell:{title:"Haskell",alias:"hs",owner:"bholst"},haxe:{title:"Haxe",require:"clike",optional:"regex",owner:"Golmote"},hcl:{title:"HCL",owner:"outsideris"},hlsl:{title:"HLSL",require:"c",owner:"RunDevelopment"},hoon:{title:"Hoon",owner:"matildepark"},http:{title:"HTTP",optional:["csp","css","hpkp","hsts","javascript","json","markup","uri"],owner:"danielgtaylor"},hpkp:{title:"HTTP Public-Key-Pins",owner:"ScottHelme"},hsts:{title:"HTTP Strict-Transport-Security",owner:"ScottHelme"},ichigojam:{title:"IchigoJam",owner:"BlueCocoa"},icon:{title:"Icon",owner:"Golmote"},"icu-message-format":{title:"ICU Message Format",owner:"RunDevelopment"},idris:{title:"Idris",alias:"idr",owner:"KeenS",require:"haskell"},ignore:{title:".ignore",owner:"osipxd",alias:["gitignore","hgignore","npmignore"],aliasTitles:{gitignore:".gitignore",hgignore:".hgignore",npmignore:".npmignore"}},inform7:{title:"Inform 7",owner:"Golmote"},ini:{title:"Ini",owner:"aviaryan"},io:{title:"Io",owner:"AlesTsurko"},j:{title:"J",owner:"Golmote"},java:{title:"Java",require:"clike",owner:"sherblot"},javadoc:{title:"JavaDoc",require:["markup","java","javadoclike"],modify:"java",optional:"scala",owner:"RunDevelopment"},javadoclike:{title:"JavaDoc-like",modify:["java","javascript","php"],owner:"RunDevelopment"},javastacktrace:{title:"Java stack trace",owner:"RunDevelopment"},jexl:{title:"Jexl",owner:"czosel"},jolie:{title:"Jolie",require:"clike",owner:"thesave"},jq:{title:"JQ",owner:"RunDevelopment"},jsdoc:{title:"JSDoc",require:["javascript","javadoclike","typescript"],modify:"javascript",optional:["actionscript","coffeescript"],owner:"RunDevelopment"},"js-extras":{title:"JS Extras",require:"javascript",modify:"javascript",optional:["actionscript","coffeescript","flow","n4js","typescript"],owner:"RunDevelopment"},json:{title:"JSON",alias:"webmanifest",aliasTitles:{webmanifest:"Web App Manifest"},owner:"CupOfTea696"},json5:{title:"JSON5",require:"json",owner:"RunDevelopment"},jsonp:{title:"JSONP",require:"json",owner:"RunDevelopment"},jsstacktrace:{title:"JS stack trace",owner:"sbrl"},"js-templates":{title:"JS Templates",require:"javascript",modify:"javascript",optional:["css","css-extras","graphql","markdown","markup","sql"],owner:"RunDevelopment"},julia:{title:"Julia",owner:"cdagnino"},keepalived:{title:"Keepalived Configure",owner:"dev-itsheng"},keyman:{title:"Keyman",owner:"mcdurdin"},kotlin:{title:"Kotlin",alias:["kt","kts"],aliasTitles:{kts:"Kotlin Script"},require:"clike",owner:"Golmote"},kumir:{title:"KuMir (\u041a\u0443\u041c\u0438\u0440)",alias:"kum",owner:"edukisto"},kusto:{title:"Kusto",owner:"RunDevelopment"},latex:{title:"LaTeX",alias:["tex","context"],aliasTitles:{tex:"TeX",context:"ConTeXt"},owner:"japborst"},latte:{title:"Latte",require:["clike","markup-templating","php"],owner:"nette"},less:{title:"Less",require:"css",optional:"css-extras",owner:"Golmote"},lilypond:{title:"LilyPond",require:"scheme",alias:"ly",owner:"RunDevelopment"},liquid:{title:"Liquid",require:"markup-templating",owner:"cinhtau"},lisp:{title:"Lisp",alias:["emacs","elisp","emacs-lisp"],owner:"JuanCaicedo"},livescript:{title:"LiveScript",owner:"Golmote"},llvm:{title:"LLVM IR",owner:"porglezomp"},log:{title:"Log file",optional:"javastacktrace",owner:"RunDevelopment"},lolcode:{title:"LOLCODE",owner:"Golmote"},lua:{title:"Lua",owner:"Golmote"},magma:{title:"Magma (CAS)",owner:"RunDevelopment"},makefile:{title:"Makefile",owner:"Golmote"},markdown:{title:"Markdown",require:"markup",optional:"yaml",alias:"md",owner:"Golmote"},"markup-templating":{title:"Markup templating",require:"markup",owner:"Golmote"},mata:{title:"Mata",owner:"RunDevelopment"},matlab:{title:"MATLAB",owner:"Golmote"},maxscript:{title:"MAXScript",owner:"RunDevelopment"},mel:{title:"MEL",owner:"Golmote"},mermaid:{title:"Mermaid",owner:"RunDevelopment"},metafont:{title:"METAFONT",owner:"LaeriExNihilo"},mizar:{title:"Mizar",owner:"Golmote"},mongodb:{title:"MongoDB",owner:"airs0urce",require:"javascript"},monkey:{title:"Monkey",owner:"Golmote"},moonscript:{title:"MoonScript",alias:"moon",owner:"RunDevelopment"},n1ql:{title:"N1QL",owner:"TMWilds"},n4js:{title:"N4JS",require:"javascript",optional:"jsdoc",alias:"n4jsd",owner:"bsmith-n4"},"nand2tetris-hdl":{title:"Nand To Tetris HDL",owner:"stephanmax"},naniscript:{title:"Naninovel Script",owner:"Elringus",alias:"nani"},nasm:{title:"NASM",owner:"rbmj"},neon:{title:"NEON",owner:"nette"},nevod:{title:"Nevod",owner:"nezaboodka"},nginx:{title:"nginx",owner:"volado"},nim:{title:"Nim",owner:"Golmote"},nix:{title:"Nix",owner:"Golmote"},nsis:{title:"NSIS",owner:"idleberg"},objectivec:{title:"Objective-C",require:"c",alias:"objc",owner:"uranusjr"},ocaml:{title:"OCaml",owner:"Golmote"},odin:{title:"Odin",owner:"edukisto"},opencl:{title:"OpenCL",require:"c",modify:["c","cpp"],owner:"Milania1"},openqasm:{title:"OpenQasm",alias:"qasm",owner:"RunDevelopment"},oz:{title:"Oz",owner:"Golmote"},parigp:{title:"PARI/GP",owner:"Golmote"},parser:{title:"Parser",require:"markup",owner:"Golmote"},pascal:{title:"Pascal",alias:"objectpascal",aliasTitles:{objectpascal:"Object Pascal"},owner:"Golmote"},pascaligo:{title:"Pascaligo",owner:"DefinitelyNotAGoat"},psl:{title:"PATROL Scripting Language",owner:"bertysentry"},pcaxis:{title:"PC-Axis",alias:"px",owner:"RunDevelopment"},peoplecode:{title:"PeopleCode",alias:"pcode",owner:"RunDevelopment"},perl:{title:"Perl",owner:"Golmote"},php:{title:"PHP",require:"markup-templating",owner:"milesj"},phpdoc:{title:"PHPDoc",require:["php","javadoclike"],modify:"php",owner:"RunDevelopment"},"php-extras":{title:"PHP Extras",require:"php",modify:"php",owner:"milesj"},"plant-uml":{title:"PlantUML",alias:"plantuml",owner:"RunDevelopment"},plsql:{title:"PL/SQL",require:"sql",owner:"Golmote"},powerquery:{title:"PowerQuery",alias:["pq","mscript"],owner:"peterbud"},powershell:{title:"PowerShell",owner:"nauzilus"},processing:{title:"Processing",require:"clike",owner:"Golmote"},prolog:{title:"Prolog",owner:"Golmote"},promql:{title:"PromQL",owner:"arendjr"},properties:{title:".properties",owner:"Golmote"},protobuf:{title:"Protocol Buffers",require:"clike",owner:"just-boris"},pug:{title:"Pug",require:["markup","javascript"],optional:["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],owner:"Golmote"},puppet:{title:"Puppet",owner:"Golmote"},pure:{title:"Pure",optional:["c","cpp","fortran"],owner:"Golmote"},purebasic:{title:"PureBasic",require:"clike",alias:"pbfasm",owner:"HeX0R101"},purescript:{title:"PureScript",require:"haskell",alias:"purs",owner:"sriharshachilakapati"},python:{title:"Python",alias:"py",owner:"multipetros"},qsharp:{title:"Q#",require:"clike",alias:"qs",owner:"fedonman"},q:{title:"Q (kdb+ database)",owner:"Golmote"},qml:{title:"QML",require:"javascript",owner:"RunDevelopment"},qore:{title:"Qore",require:"clike",owner:"temnroegg"},r:{title:"R",owner:"Golmote"},racket:{title:"Racket",require:"scheme",alias:"rkt",owner:"RunDevelopment"},cshtml:{title:"Razor C#",alias:"razor",require:["markup","csharp"],optional:["css","css-extras","javascript","js-extras"],owner:"RunDevelopment"},jsx:{title:"React JSX",require:["markup","javascript"],optional:["jsdoc","js-extras","js-templates"],owner:"vkbansal"},tsx:{title:"React TSX",require:["jsx","typescript"]},reason:{title:"Reason",require:"clike",owner:"Golmote"},regex:{title:"Regex",owner:"RunDevelopment"},rego:{title:"Rego",owner:"JordanSh"},renpy:{title:"Ren'py",alias:"rpy",owner:"HyuchiaDiego"},rescript:{title:"ReScript",alias:"res",owner:"vmarcosp"},rest:{title:"reST (reStructuredText)",owner:"Golmote"},rip:{title:"Rip",owner:"ravinggenius"},roboconf:{title:"Roboconf",owner:"Golmote"},robotframework:{title:"Robot Framework",alias:"robot",owner:"RunDevelopment"},ruby:{title:"Ruby",require:"clike",alias:"rb",owner:"samflores"},rust:{title:"Rust",owner:"Golmote"},sas:{title:"SAS",optional:["groovy","lua","sql"],owner:"Golmote"},sass:{title:"Sass (Sass)",require:"css",optional:"css-extras",owner:"Golmote"},scss:{title:"Sass (SCSS)",require:"css",optional:"css-extras",owner:"MoOx"},scala:{title:"Scala",require:"java",owner:"jozic"},scheme:{title:"Scheme",owner:"bacchus123"},"shell-session":{title:"Shell session",require:"bash",alias:["sh-session","shellsession"],owner:"RunDevelopment"},smali:{title:"Smali",owner:"RunDevelopment"},smalltalk:{title:"Smalltalk",owner:"Golmote"},smarty:{title:"Smarty",require:"markup-templating",optional:"php",owner:"Golmote"},sml:{title:"SML",alias:"smlnj",aliasTitles:{smlnj:"SML/NJ"},owner:"RunDevelopment"},solidity:{title:"Solidity (Ethereum)",alias:"sol",require:"clike",owner:"glachaud"},"solution-file":{title:"Solution file",alias:"sln",owner:"RunDevelopment"},soy:{title:"Soy (Closure Template)",require:"markup-templating",owner:"Golmote"},sparql:{title:"SPARQL",require:"turtle",owner:"Triply-Dev",alias:"rq"},"splunk-spl":{title:"Splunk SPL",owner:"RunDevelopment"},sqf:{title:"SQF: Status Quo Function (Arma 3)",require:"clike",owner:"RunDevelopment"},sql:{title:"SQL",owner:"multipetros"},squirrel:{title:"Squirrel",require:"clike",owner:"RunDevelopment"},stan:{title:"Stan",owner:"RunDevelopment"},stata:{title:"Stata Ado",require:["mata","java","python"],owner:"RunDevelopment"},iecst:{title:"Structured Text (IEC 61131-3)",owner:"serhioromano"},stylus:{title:"Stylus",owner:"vkbansal"},supercollider:{title:"SuperCollider",alias:"sclang",owner:"RunDevelopment"},swift:{title:"Swift",owner:"chrischares"},systemd:{title:"Systemd configuration file",owner:"RunDevelopment"},"t4-templating":{title:"T4 templating",owner:"RunDevelopment"},"t4-cs":{title:"T4 Text Templates (C#)",require:["t4-templating","csharp"],alias:"t4",owner:"RunDevelopment"},"t4-vb":{title:"T4 Text Templates (VB)",require:["t4-templating","vbnet"],owner:"RunDevelopment"},tap:{title:"TAP",owner:"isaacs",require:"yaml"},tcl:{title:"Tcl",owner:"PeterChaplin"},tt2:{title:"Template Toolkit 2",require:["clike","markup-templating"],owner:"gflohr"},textile:{title:"Textile",require:"markup",optional:"css",owner:"Golmote"},toml:{title:"TOML",owner:"RunDevelopment"},tremor:{title:"Tremor",alias:["trickle","troy"],owner:"darach",aliasTitles:{trickle:"trickle",troy:"troy"}},turtle:{title:"Turtle",alias:"trig",aliasTitles:{trig:"TriG"},owner:"jakubklimek"},twig:{title:"Twig",require:"markup-templating",owner:"brandonkelly"},typescript:{title:"TypeScript",require:"javascript",optional:"js-templates",alias:"ts",owner:"vkbansal"},typoscript:{title:"TypoScript",alias:"tsconfig",aliasTitles:{tsconfig:"TSConfig"},owner:"dkern"},unrealscript:{title:"UnrealScript",alias:["uscript","uc"],owner:"RunDevelopment"},uorazor:{title:"UO Razor Script",owner:"jaseowns"},uri:{title:"URI",alias:"url",aliasTitles:{url:"URL"},owner:"RunDevelopment"},v:{title:"V",require:"clike",owner:"taggon"},vala:{title:"Vala",require:"clike",optional:"regex",owner:"TemplarVolk"},vbnet:{title:"VB.Net",require:"basic",owner:"Bigsby"},velocity:{title:"Velocity",require:"markup",owner:"Golmote"},verilog:{title:"Verilog",owner:"a-rey"},vhdl:{title:"VHDL",owner:"a-rey"},vim:{title:"vim",owner:"westonganger"},"visual-basic":{title:"Visual Basic",alias:["vb","vba"],aliasTitles:{vba:"VBA"},owner:"Golmote"},warpscript:{title:"WarpScript",owner:"RunDevelopment"},wasm:{title:"WebAssembly",owner:"Golmote"},"web-idl":{title:"Web IDL",alias:"webidl",owner:"RunDevelopment"},wgsl:{title:"WGSL",owner:"Dr4gonthree"},wiki:{title:"Wiki markup",require:"markup",owner:"Golmote"},wolfram:{title:"Wolfram language",alias:["mathematica","nb","wl"],aliasTitles:{mathematica:"Mathematica",nb:"Mathematica Notebook"},owner:"msollami"},wren:{title:"Wren",owner:"clsource"},xeora:{title:"Xeora",require:"markup",alias:"xeoracube",aliasTitles:{xeoracube:"XeoraCube"},owner:"freakmaxi"},"xml-doc":{title:"XML doc (.net)",require:"markup",modify:["csharp","fsharp","vbnet"],owner:"RunDevelopment"},xojo:{title:"Xojo (REALbasic)",owner:"Golmote"},xquery:{title:"XQuery",require:"markup",owner:"Golmote"},yaml:{title:"YAML",alias:"yml",owner:"hason"},yang:{title:"YANG",owner:"RunDevelopment"},zig:{title:"Zig",owner:"RunDevelopment"}},plugins:{meta:{path:"plugins/{id}/prism-{id}",link:"plugins/{id}/"},"line-highlight":{title:"Line Highlight",description:"Highlights specific lines and/or line ranges."},"line-numbers":{title:"Line Numbers",description:"Line number at the beginning of code lines.",owner:"kuba-kubula"},"show-invisibles":{title:"Show Invisibles",description:"Show hidden characters such as tabs and line breaks.",optional:["autolinker","data-uri-highlight"]},autolinker:{title:"Autolinker",description:"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},wpd:{title:"WebPlatform Docs",description:'Makes tokens link to WebPlatform.org documentation . The links open in a new tab.'},"custom-class":{title:"Custom Class",description:"This plugin allows you to prefix Prism's default classes (.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},2885:(e,t,n)=>{const r=n(9901),a=n(9642),o=new Set;function i(e){void 0===e?e=Object.keys(r.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...o,...Object.keys(Prism.languages)];a(r,e,t).load((e=>{if(!(e in r.languages))return void(i.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(6500).resolve(t)],delete Prism.languages[e],n(6500)(t),o.add(e)}))}i.silent=!1,e.exports=i},6854:()=>{!function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,a,o){if(n.language===r){var i=n.tokenStack=[];n.code=n.code.replace(a,(function(e){if("function"==typeof o&&!o(e))return e;for(var a,l=i.length;-1!==n.code.indexOf(a=t(r,l));)++l;return i[l]=e,a})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var a=0,o=Object.keys(n.tokenStack);!function i(l){for(var s=0;s=o.length);s++){var c=l[s];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=o[a],d=n.tokenStack[u],p="string"==typeof c?c:c.content,f=t(r,u),h=p.indexOf(f);if(h>-1){++a;var m=p.substring(0,h),g=new e.Token(r,e.tokenize(d,n.grammar),"language-"+r,d),b=p.substring(h+f.length),y=[];m&&y.push.apply(y,i([m])),y.push(g),b&&y.push.apply(y,i([b])),"string"==typeof c?l.splice.apply(l,[s,1].concat(y)):c.content=y}}else c.content&&i(c.content)}return l}(n.tokens)}}}})}(Prism)},6726:(e,t,n)=>{var r={"./":2885};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=6726},6500:(e,t,n)=>{var r={"./":2885};function a(e){var t=o(e);return n(t)}function o(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id=6500},9642:e=>{"use strict";var t=function(){var e=function(){};function t(e,t){Array.isArray(e)?e.forEach(t):null!=e&&t(e,0)}function n(e){for(var t={},n=0,r=e.length;n "));var l={},s=e[r];if(s){function c(t){if(!(t in e))throw new Error(r+" depends on an unknown component "+t);if(!(t in l))for(var i in a(t,o),l[t]=!0,n[t])l[i]=!0}t(s.require,c),t(s.optional,c),t(s.modify,c)}n[r]=l,o.pop()}}return function(e){var t=n[e];return t||(a(e,r),t=n[e]),t}}function a(e){for(var t in e)return!0;return!1}return function(o,i,l){var s=function(e){var t={};for(var n in e){var r=e[n];for(var a in r)if("meta"!=a){var o=r[a];t[a]="string"==typeof o?{title:o}:o}}return t}(o),c=function(e){var n;return function(r){if(r in e)return r;if(!n)for(var a in n={},e){var o=e[a];t(o&&o.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+a+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+a+" because it is a component.");n[t]=a}))}return n[r]||r}}(s);i=i.map(c),l=(l||[]).map(c);var u=n(i),d=n(l);i.forEach((function e(n){var r=s[n];t(r&&r.require,(function(t){t in d||(u[t]=!0,e(t))}))}));for(var p,f=r(s),h=u;a(h);){for(var m in p={},h){var g=s[m];t(g&&g.modify,(function(e){e in d&&(p[e]=!0)}))}for(var b in d)if(!(b in u))for(var y in f(b))if(y in u){p[b]=!0;break}for(var v in h=p)u[v]=!0}var w={getIds:function(){var e=[];return w.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,r,a){var o=a?a.series:void 0,i=a?a.parallel:e,l={},s={};function c(e){if(e in l)return l[e];s[e]=!0;var a,u=[];for(var d in t(e))d in n&&u.push(d);if(0===u.length)a=r(e);else{var p=i(u.map((function(e){var t=c(e);return delete s[e],t})));o?a=o(p,(function(){return r(e)})):r(e)}return l[e]=a}for(var u in n)c(u);var d=[];for(var p in s)d.push(l[p]);return i(d)}(f,u,t,n)}};return w}}();e.exports=t},2703:(e,t,n)=>{"use strict";var r=n(414);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,o,i){if(i!==r){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:a};return n.PropTypes=n,n}},5697:(e,t,n)=>{e.exports=n(2703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},4448:(e,t,n)=>{"use strict";var r=n(7294),a=n(3840);function o(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;nt}return!1}(t,n,a,r)&&(n=null),r||null===a?function(e){return!!d.call(h,e)||!d.call(f,e)&&(p.test(e)?h[e]=!0:(f[e]=!0,!1))}(t)&&(null===n?e.removeAttribute(t):e.setAttribute(t,""+n)):a.mustUseProperty?e[a.propertyName]=null===n?3!==a.type&&"":n:(t=a.attributeName,r=a.attributeNamespace,null===n?e.removeAttribute(t):(n=3===(a=a.type)||4===a&&!0===n?"":""+n,r?e.setAttributeNS(r,t,n):e.setAttribute(t,n))))}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach((function(e){var t=e.replace(b,y);g[t]=new m(t,1,!1,e,null,!1,!1)})),"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach((function(e){var t=e.replace(b,y);g[t]=new m(t,1,!1,e,"http://www.w3.org/1999/xlink",!1,!1)})),["xml:base","xml:lang","xml:space"].forEach((function(e){var t=e.replace(b,y);g[t]=new m(t,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1,!1)})),["tabIndex","crossOrigin"].forEach((function(e){g[e]=new m(e,1,!1,e.toLowerCase(),null,!1,!1)})),g.xlinkHref=new m("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1),["src","href","action","formAction"].forEach((function(e){g[e]=new m(e,1,!1,e.toLowerCase(),null,!0,!0)}));var w=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,k=Symbol.for("react.element"),x=Symbol.for("react.portal"),S=Symbol.for("react.fragment"),C=Symbol.for("react.strict_mode"),T=Symbol.for("react.profiler"),E=Symbol.for("react.provider"),_=Symbol.for("react.context"),A=Symbol.for("react.forward_ref"),P=Symbol.for("react.suspense"),L=Symbol.for("react.suspense_list"),j=Symbol.for("react.memo"),R=Symbol.for("react.lazy");Symbol.for("react.scope"),Symbol.for("react.debug_trace_mode");var N=Symbol.for("react.offscreen");Symbol.for("react.legacy_hidden"),Symbol.for("react.cache"),Symbol.for("react.tracing_marker");var O=Symbol.iterator;function D(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=O&&e[O]||e["@@iterator"])?e:null}var I,M=Object.assign;function F(e){if(void 0===I)try{throw Error()}catch(n){var t=n.stack.trim().match(/\n( *(at )?)/);I=t&&t[1]||""}return"\n"+I+e}var B=!1;function z(e,t){if(!e||B)return"";B=!0;var n=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(t)if(t=function(){throw Error()},Object.defineProperty(t.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(t,[])}catch(c){var r=c}Reflect.construct(e,[],t)}else{try{t.call()}catch(c){r=c}e.call(t.prototype)}else{try{throw Error()}catch(c){r=c}e()}}catch(c){if(c&&r&&"string"==typeof c.stack){for(var a=c.stack.split("\n"),o=r.stack.split("\n"),i=a.length-1,l=o.length-1;1<=i&&0<=l&&a[i]!==o[l];)l--;for(;1<=i&&0<=l;i--,l--)if(a[i]!==o[l]){if(1!==i||1!==l)do{if(i--,0>--l||a[i]!==o[l]){var s="\n"+a[i].replace(" at new "," at ");return e.displayName&&s.includes("")&&(s=s.replace("",e.displayName)),s}}while(1<=i&&0<=l);break}}}finally{B=!1,Error.prepareStackTrace=n}return(e=e?e.displayName||e.name:"")?F(e):""}function U(e){switch(e.tag){case 5:return F(e.type);case 16:return F("Lazy");case 13:return F("Suspense");case 19:return F("SuspenseList");case 0:case 2:case 15:return e=z(e.type,!1);case 11:return e=z(e.type.render,!1);case 1:return e=z(e.type,!0);default:return""}}function $(e){if(null==e)return null;if("function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case S:return"Fragment";case x:return"Portal";case T:return"Profiler";case C:return"StrictMode";case P:return"Suspense";case L:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case _:return(e.displayName||"Context")+".Consumer";case E:return(e._context.displayName||"Context")+".Provider";case A:var t=e.render;return(e=e.displayName)||(e=""!==(e=t.displayName||t.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case j:return null!==(t=e.displayName||null)?t:$(e.type)||"Memo";case R:t=e._payload,e=e._init;try{return $(e(t))}catch(n){}}return null}function H(e){var t=e.type;switch(e.tag){case 24:return"Cache";case 9:return(t.displayName||"Context")+".Consumer";case 10:return(t._context.displayName||"Context")+".Provider";case 18:return"DehydratedFragment";case 11:return e=(e=t.render).displayName||e.name||"",t.displayName||(""!==e?"ForwardRef("+e+")":"ForwardRef");case 7:return"Fragment";case 5:return t;case 4:return"Portal";case 3:return"Root";case 6:return"Text";case 16:return $(t);case 8:return t===C?"StrictMode":"Mode";case 22:return"Offscreen";case 12:return"Profiler";case 21:return"Scope";case 13:return"Suspense";case 19:return"SuspenseList";case 25:return"TracingMarker";case 1:case 0:case 17:case 2:case 14:case 15:if("function"==typeof t)return t.displayName||t.name||null;if("string"==typeof t)return t}return null}function q(e){switch(typeof e){case"boolean":case"number":case"string":case"undefined":case"object":return e;default:return""}}function G(e){var t=e.type;return(e=e.nodeName)&&"input"===e.toLowerCase()&&("checkbox"===t||"radio"===t)}function Z(e){e._valueTracker||(e._valueTracker=function(e){var t=G(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),r=""+e[t];if(!e.hasOwnProperty(t)&&void 0!==n&&"function"==typeof n.get&&"function"==typeof n.set){var a=n.get,o=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return a.call(this)},set:function(e){r=""+e,o.call(this,e)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return r},setValue:function(e){r=""+e},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}(e))}function V(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r="";return e&&(r=G(e)?e.checked?"true":"false":e.value),(e=r)!==n&&(t.setValue(e),!0)}function W(e){if(void 0===(e=e||("undefined"!=typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(t){return e.body}}function K(e,t){var n=t.checked;return M({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=n?n:e._wrapperState.initialChecked})}function Q(e,t){var n=null==t.defaultValue?"":t.defaultValue,r=null!=t.checked?t.checked:t.defaultChecked;n=q(null!=t.value?t.value:n),e._wrapperState={initialChecked:r,initialValue:n,controlled:"checkbox"===t.type||"radio"===t.type?null!=t.checked:null!=t.value}}function Y(e,t){null!=(t=t.checked)&&v(e,"checked",t,!1)}function X(e,t){Y(e,t);var n=q(t.value),r=t.type;if(null!=n)"number"===r?(0===n&&""===e.value||e.value!=n)&&(e.value=""+n):e.value!==""+n&&(e.value=""+n);else if("submit"===r||"reset"===r)return void e.removeAttribute("value");t.hasOwnProperty("value")?ee(e,t.type,n):t.hasOwnProperty("defaultValue")&&ee(e,t.type,q(t.defaultValue)),null==t.checked&&null!=t.defaultChecked&&(e.defaultChecked=!!t.defaultChecked)}function J(e,t,n){if(t.hasOwnProperty("value")||t.hasOwnProperty("defaultValue")){var r=t.type;if(!("submit"!==r&&"reset"!==r||void 0!==t.value&&null!==t.value))return;t=""+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}""!==(n=e.name)&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,""!==n&&(e.name=n)}function ee(e,t,n){"number"===t&&W(e.ownerDocument)===e||(null==n?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+n&&(e.defaultValue=""+n))}var te=Array.isArray;function ne(e,t,n,r){if(e=e.options,t){t={};for(var a=0;a"+t.valueOf().toString()+" ",t=ce.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}},"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(e,t,n,r){MSApp.execUnsafeLocalFunction((function(){return ue(e,t)}))}:ue);function pe(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t}var fe={animationIterationCount:!0,aspectRatio:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},he=["Webkit","ms","Moz","O"];function me(e,t,n){return null==t||"boolean"==typeof t||""===t?"":n||"number"!=typeof t||0===t||fe.hasOwnProperty(e)&&fe[e]?(""+t).trim():t+"px"}function ge(e,t){for(var n in e=e.style,t)if(t.hasOwnProperty(n)){var r=0===n.indexOf("--"),a=me(n,t[n],r);"float"===n&&(n="cssFloat"),r?e.setProperty(n,a):e[n]=a}}Object.keys(fe).forEach((function(e){he.forEach((function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),fe[t]=fe[e]}))}));var be=M({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});function ye(e,t){if(t){if(be[e]&&(null!=t.children||null!=t.dangerouslySetInnerHTML))throw Error(o(137,e));if(null!=t.dangerouslySetInnerHTML){if(null!=t.children)throw Error(o(60));if("object"!=typeof t.dangerouslySetInnerHTML||!("__html"in t.dangerouslySetInnerHTML))throw Error(o(61))}if(null!=t.style&&"object"!=typeof t.style)throw Error(o(62))}}function ve(e,t){if(-1===e.indexOf("-"))return"string"==typeof t.is;switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}var we=null;function ke(e){return(e=e.target||e.srcElement||window).correspondingUseElement&&(e=e.correspondingUseElement),3===e.nodeType?e.parentNode:e}var xe=null,Se=null,Ce=null;function Te(e){if(e=va(e)){if("function"!=typeof xe)throw Error(o(280));var t=e.stateNode;t&&(t=ka(t),xe(e.stateNode,e.type,t))}}function Ee(e){Se?Ce?Ce.push(e):Ce=[e]:Se=e}function _e(){if(Se){var e=Se,t=Ce;if(Ce=Se=null,Te(e),t)for(e=0;e>>=0,0===e?32:31-(lt(e)/st|0)|0},lt=Math.log,st=Math.LN2;var ct=64,ut=4194304;function dt(e){switch(e&-e){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return 4194240&e;case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:return 130023424&e;case 134217728:return 134217728;case 268435456:return 268435456;case 536870912:return 536870912;case 1073741824:return 1073741824;default:return e}}function pt(e,t){var n=e.pendingLanes;if(0===n)return 0;var r=0,a=e.suspendedLanes,o=e.pingedLanes,i=268435455&n;if(0!==i){var l=i&~a;0!==l?r=dt(l):0!==(o&=i)&&(r=dt(o))}else 0!==(i=n&~a)?r=dt(i):0!==o&&(r=dt(o));if(0===r)return 0;if(0!==t&&t!==r&&0==(t&a)&&((a=r&-r)>=(o=t&-t)||16===a&&0!=(4194240&o)))return t;if(0!=(4&r)&&(r|=16&n),0!==(t=e.entangledLanes))for(e=e.entanglements,t&=r;0n;n++)t.push(e);return t}function bt(e,t,n){e.pendingLanes|=t,536870912!==t&&(e.suspendedLanes=0,e.pingedLanes=0),(e=e.eventTimes)[t=31-it(t)]=n}function yt(e,t){var n=e.entangledLanes|=t;for(e=e.entanglements;n;){var r=31-it(n),a=1<=Dn),Fn=String.fromCharCode(32),Bn=!1;function zn(e,t){switch(e){case"keyup":return-1!==Nn.indexOf(t.keyCode);case"keydown":return 229!==t.keyCode;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function Un(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var $n=!1;var Hn={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function qn(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!Hn[e.type]:"textarea"===t}function Gn(e,t,n,r){Ee(r),0<(t=Zr(t,"onChange")).length&&(n=new un("onChange","change",null,n,r),e.push({event:n,listeners:t}))}var Zn=null,Vn=null;function Wn(e){Fr(e,0)}function Kn(e){if(V(wa(e)))return e}function Qn(e,t){if("change"===e)return t}var Yn=!1;if(u){var Xn;if(u){var Jn="oninput"in document;if(!Jn){var er=document.createElement("div");er.setAttribute("oninput","return;"),Jn="function"==typeof er.oninput}Xn=Jn}else Xn=!1;Yn=Xn&&(!document.documentMode||9=t)return{node:r,offset:t-e};e=n}e:{for(;r;){if(r.nextSibling){r=r.nextSibling;break e}r=r.parentNode}r=void 0}r=cr(r)}}function dr(e,t){return!(!e||!t)&&(e===t||(!e||3!==e.nodeType)&&(t&&3===t.nodeType?dr(e,t.parentNode):"contains"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}function pr(){for(var e=window,t=W();t instanceof e.HTMLIFrameElement;){try{var n="string"==typeof t.contentWindow.location.href}catch(r){n=!1}if(!n)break;t=W((e=t.contentWindow).document)}return t}function fr(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&("text"===e.type||"search"===e.type||"tel"===e.type||"url"===e.type||"password"===e.type)||"textarea"===t||"true"===e.contentEditable)}function hr(e){var t=pr(),n=e.focusedElem,r=e.selectionRange;if(t!==n&&n&&n.ownerDocument&&dr(n.ownerDocument.documentElement,n)){if(null!==r&&fr(n))if(t=r.start,void 0===(e=r.end)&&(e=t),"selectionStart"in n)n.selectionStart=t,n.selectionEnd=Math.min(e,n.value.length);else if((e=(t=n.ownerDocument||document)&&t.defaultView||window).getSelection){e=e.getSelection();var a=n.textContent.length,o=Math.min(r.start,a);r=void 0===r.end?o:Math.min(r.end,a),!e.extend&&o>r&&(a=r,r=o,o=a),a=ur(n,o);var i=ur(n,r);a&&i&&(1!==e.rangeCount||e.anchorNode!==a.node||e.anchorOffset!==a.offset||e.focusNode!==i.node||e.focusOffset!==i.offset)&&((t=t.createRange()).setStart(a.node,a.offset),e.removeAllRanges(),o>r?(e.addRange(t),e.extend(i.node,i.offset)):(t.setEnd(i.node,i.offset),e.addRange(t)))}for(t=[],e=n;e=e.parentNode;)1===e.nodeType&&t.push({element:e,left:e.scrollLeft,top:e.scrollTop});for("function"==typeof n.focus&&n.focus(),n=0;n=document.documentMode,gr=null,br=null,yr=null,vr=!1;function wr(e,t,n){var r=n.window===n?n.document:9===n.nodeType?n:n.ownerDocument;vr||null==gr||gr!==W(r)||("selectionStart"in(r=gr)&&fr(r)?r={start:r.selectionStart,end:r.selectionEnd}:r={anchorNode:(r=(r.ownerDocument&&r.ownerDocument.defaultView||window).getSelection()).anchorNode,anchorOffset:r.anchorOffset,focusNode:r.focusNode,focusOffset:r.focusOffset},yr&&sr(yr,r)||(yr=r,0<(r=Zr(br,"onSelect")).length&&(t=new un("onSelect","select",null,t,n),e.push({event:t,listeners:r}),t.target=gr)))}function kr(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n}var xr={animationend:kr("Animation","AnimationEnd"),animationiteration:kr("Animation","AnimationIteration"),animationstart:kr("Animation","AnimationStart"),transitionend:kr("Transition","TransitionEnd")},Sr={},Cr={};function Tr(e){if(Sr[e])return Sr[e];if(!xr[e])return e;var t,n=xr[e];for(t in n)if(n.hasOwnProperty(t)&&t in Cr)return Sr[e]=n[t];return e}u&&(Cr=document.createElement("div").style,"AnimationEvent"in window||(delete xr.animationend.animation,delete xr.animationiteration.animation,delete xr.animationstart.animation),"TransitionEvent"in window||delete xr.transitionend.transition);var Er=Tr("animationend"),_r=Tr("animationiteration"),Ar=Tr("animationstart"),Pr=Tr("transitionend"),Lr=new Map,jr="abort auxClick cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking stalled submit suspend timeUpdate touchCancel touchEnd touchStart volumeChange scroll toggle touchMove waiting wheel".split(" ");function Rr(e,t){Lr.set(e,t),s(t,[e])}for(var Nr=0;NrSa||(e.current=xa[Sa],xa[Sa]=null,Sa--)}function Ea(e,t){Sa++,xa[Sa]=e.current,e.current=t}var _a={},Aa=Ca(_a),Pa=Ca(!1),La=_a;function ja(e,t){var n=e.type.contextTypes;if(!n)return _a;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var a,o={};for(a in n)o[a]=t[a];return r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=o),o}function Ra(e){return null!=(e=e.childContextTypes)}function Na(){Ta(Pa),Ta(Aa)}function Oa(e,t,n){if(Aa.current!==_a)throw Error(o(168));Ea(Aa,t),Ea(Pa,n)}function Da(e,t,n){var r=e.stateNode;if(t=t.childContextTypes,"function"!=typeof r.getChildContext)return n;for(var a in r=r.getChildContext())if(!(a in t))throw Error(o(108,H(e)||"Unknown",a));return M({},n,r)}function Ia(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||_a,La=Aa.current,Ea(Aa,e),Ea(Pa,Pa.current),!0}function Ma(e,t,n){var r=e.stateNode;if(!r)throw Error(o(169));n?(e=Da(e,t,La),r.__reactInternalMemoizedMergedChildContext=e,Ta(Pa),Ta(Aa),Ea(Aa,e)):Ta(Pa),Ea(Pa,n)}var Fa=null,Ba=!1,za=!1;function Ua(e){null===Fa?Fa=[e]:Fa.push(e)}function $a(){if(!za&&null!==Fa){za=!0;var e=0,t=vt;try{var n=Fa;for(vt=1;e>=i,a-=i,Qa=1<<32-it(t)+a|n<m?(g=d,d=null):g=d.sibling;var b=f(a,d,l[m],s);if(null===b){null===d&&(d=g);break}e&&d&&null===b.alternate&&t(a,d),o=i(b,o,m),null===u?c=b:u.sibling=b,u=b,d=g}if(m===l.length)return n(a,d),ao&&Xa(a,m),c;if(null===d){for(;mg?(b=m,m=null):b=m.sibling;var v=f(a,m,y.value,c);if(null===v){null===m&&(m=b);break}e&&m&&null===v.alternate&&t(a,m),l=i(v,l,g),null===d?u=v:d.sibling=v,d=v,m=b}if(y.done)return n(a,m),ao&&Xa(a,g),u;if(null===m){for(;!y.done;g++,y=s.next())null!==(y=p(a,y.value,c))&&(l=i(y,l,g),null===d?u=y:d.sibling=y,d=y);return ao&&Xa(a,g),u}for(m=r(a,m);!y.done;g++,y=s.next())null!==(y=h(m,a,g,y.value,c))&&(e&&null!==y.alternate&&m.delete(null===y.key?g:y.key),l=i(y,l,g),null===d?u=y:d.sibling=y,d=y);return e&&m.forEach((function(e){return t(a,e)})),ao&&Xa(a,g),u}return function e(r,o,i,s){if("object"==typeof i&&null!==i&&i.type===S&&null===i.key&&(i=i.props.children),"object"==typeof i&&null!==i){switch(i.$$typeof){case k:e:{for(var c=i.key,u=o;null!==u;){if(u.key===c){if((c=i.type)===S){if(7===u.tag){n(r,u.sibling),(o=a(u,i.props.children)).return=r,r=o;break e}}else if(u.elementType===c||"object"==typeof c&&null!==c&&c.$$typeof===R&&Ko(c)===u.type){n(r,u.sibling),(o=a(u,i.props)).ref=Vo(r,u,i),o.return=r,r=o;break e}n(r,u);break}t(r,u),u=u.sibling}i.type===S?((o=Ic(i.props.children,r.mode,s,i.key)).return=r,r=o):((s=Dc(i.type,i.key,i.props,null,r.mode,s)).ref=Vo(r,o,i),s.return=r,r=s)}return l(r);case x:e:{for(u=i.key;null!==o;){if(o.key===u){if(4===o.tag&&o.stateNode.containerInfo===i.containerInfo&&o.stateNode.implementation===i.implementation){n(r,o.sibling),(o=a(o,i.children||[])).return=r,r=o;break e}n(r,o);break}t(r,o),o=o.sibling}(o=Bc(i,r.mode,s)).return=r,r=o}return l(r);case R:return e(r,o,(u=i._init)(i._payload),s)}if(te(i))return m(r,o,i,s);if(D(i))return g(r,o,i,s);Wo(r,i)}return"string"==typeof i&&""!==i||"number"==typeof i?(i=""+i,null!==o&&6===o.tag?(n(r,o.sibling),(o=a(o,i)).return=r,r=o):(n(r,o),(o=Fc(i,r.mode,s)).return=r,r=o),l(r)):n(r,o)}}var Yo=Qo(!0),Xo=Qo(!1),Jo={},ei=Ca(Jo),ti=Ca(Jo),ni=Ca(Jo);function ri(e){if(e===Jo)throw Error(o(174));return e}function ai(e,t){switch(Ea(ni,t),Ea(ti,e),Ea(ei,Jo),e=t.nodeType){case 9:case 11:t=(t=t.documentElement)?t.namespaceURI:se(null,"");break;default:t=se(t=(e=8===e?t.parentNode:t).namespaceURI||null,e=e.tagName)}Ta(ei),Ea(ei,t)}function oi(){Ta(ei),Ta(ti),Ta(ni)}function ii(e){ri(ni.current);var t=ri(ei.current),n=se(t,e.type);t!==n&&(Ea(ti,e),Ea(ei,n))}function li(e){ti.current===e&&(Ta(ei),Ta(ti))}var si=Ca(0);function ci(e){for(var t=e;null!==t;){if(13===t.tag){var n=t.memoizedState;if(null!==n&&(null===(n=n.dehydrated)||"$?"===n.data||"$!"===n.data))return t}else if(19===t.tag&&void 0!==t.memoizedProps.revealOrder){if(0!=(128&t.flags))return t}else if(null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}return null}var ui=[];function di(){for(var e=0;en?n:4,e(!0);var r=fi.transition;fi.transition={};try{e(!1),t()}finally{vt=n,fi.transition=r}}function el(){return _i().memoizedState}function tl(e,t,n){var r=nc(e);if(n={lane:r,action:n,hasEagerState:!1,eagerState:null,next:null},rl(e))al(t,n);else if(null!==(n=Po(e,t,n,r))){rc(n,e,r,tc()),ol(n,t,r)}}function nl(e,t,n){var r=nc(e),a={lane:r,action:n,hasEagerState:!1,eagerState:null,next:null};if(rl(e))al(t,a);else{var o=e.alternate;if(0===e.lanes&&(null===o||0===o.lanes)&&null!==(o=t.lastRenderedReducer))try{var i=t.lastRenderedState,l=o(i,n);if(a.hasEagerState=!0,a.eagerState=l,lr(l,i)){var s=t.interleaved;return null===s?(a.next=a,Ao(t)):(a.next=s.next,s.next=a),void(t.interleaved=a)}}catch(c){}null!==(n=Po(e,t,a,r))&&(rc(n,e,r,a=tc()),ol(n,t,r))}}function rl(e){var t=e.alternate;return e===mi||null!==t&&t===mi}function al(e,t){vi=yi=!0;var n=e.pending;null===n?t.next=t:(t.next=n.next,n.next=t),e.pending=t}function ol(e,t,n){if(0!=(4194240&n)){var r=t.lanes;n|=r&=e.pendingLanes,t.lanes=n,yt(e,n)}}var il={readContext:Eo,useCallback:xi,useContext:xi,useEffect:xi,useImperativeHandle:xi,useInsertionEffect:xi,useLayoutEffect:xi,useMemo:xi,useReducer:xi,useRef:xi,useState:xi,useDebugValue:xi,useDeferredValue:xi,useTransition:xi,useMutableSource:xi,useSyncExternalStore:xi,useId:xi,unstable_isNewReconciler:!1},ll={readContext:Eo,useCallback:function(e,t){return Ei().memoizedState=[e,void 0===t?null:t],e},useContext:Eo,useEffect:Hi,useImperativeHandle:function(e,t,n){return n=null!=n?n.concat([e]):null,Ui(4194308,4,Vi.bind(null,t,e),n)},useLayoutEffect:function(e,t){return Ui(4194308,4,e,t)},useInsertionEffect:function(e,t){return Ui(4,2,e,t)},useMemo:function(e,t){var n=Ei();return t=void 0===t?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var r=Ei();return t=void 0!==n?n(t):t,r.memoizedState=r.baseState=t,e={pending:null,interleaved:null,lanes:0,dispatch:null,lastRenderedReducer:e,lastRenderedState:t},r.queue=e,e=e.dispatch=tl.bind(null,mi,e),[r.memoizedState,e]},useRef:function(e){return e={current:e},Ei().memoizedState=e},useState:Fi,useDebugValue:Ki,useDeferredValue:function(e){return Ei().memoizedState=e},useTransition:function(){var e=Fi(!1),t=e[0];return e=Ji.bind(null,e[1]),Ei().memoizedState=e,[t,e]},useMutableSource:function(){},useSyncExternalStore:function(e,t,n){var r=mi,a=Ei();if(ao){if(void 0===n)throw Error(o(407));n=n()}else{if(n=t(),null===Ls)throw Error(o(349));0!=(30&hi)||Ni(r,t,n)}a.memoizedState=n;var i={value:n,getSnapshot:t};return a.queue=i,Hi(Di.bind(null,r,i,e),[e]),r.flags|=2048,Bi(9,Oi.bind(null,r,i,n,t),void 0,null),n},useId:function(){var e=Ei(),t=Ls.identifierPrefix;if(ao){var n=Ya;t=":"+t+"R"+(n=(Qa&~(1<<32-it(Qa)-1)).toString(32)+n),0<(n=wi++)&&(t+="H"+n.toString(32)),t+=":"}else t=":"+t+"r"+(n=ki++).toString(32)+":";return e.memoizedState=t},unstable_isNewReconciler:!1},sl={readContext:Eo,useCallback:Qi,useContext:Eo,useEffect:qi,useImperativeHandle:Wi,useInsertionEffect:Gi,useLayoutEffect:Zi,useMemo:Yi,useReducer:Pi,useRef:zi,useState:function(){return Pi(Ai)},useDebugValue:Ki,useDeferredValue:function(e){return Xi(_i(),gi.memoizedState,e)},useTransition:function(){return[Pi(Ai)[0],_i().memoizedState]},useMutableSource:ji,useSyncExternalStore:Ri,useId:el,unstable_isNewReconciler:!1},cl={readContext:Eo,useCallback:Qi,useContext:Eo,useEffect:qi,useImperativeHandle:Wi,useInsertionEffect:Gi,useLayoutEffect:Zi,useMemo:Yi,useReducer:Li,useRef:zi,useState:function(){return Li(Ai)},useDebugValue:Ki,useDeferredValue:function(e){var t=_i();return null===gi?t.memoizedState=e:Xi(t,gi.memoizedState,e)},useTransition:function(){return[Li(Ai)[0],_i().memoizedState]},useMutableSource:ji,useSyncExternalStore:Ri,useId:el,unstable_isNewReconciler:!1};function ul(e,t){try{var n="",r=t;do{n+=U(r),r=r.return}while(r);var a=n}catch(o){a="\nError generating stack: "+o.message+"\n"+o.stack}return{value:e,source:t,stack:a,digest:null}}function dl(e,t,n){return{value:e,source:null,stack:null!=n?n:null,digest:null!=t?t:null}}function pl(e,t){try{console.error(t.value)}catch(n){setTimeout((function(){throw n}))}}var fl="function"==typeof WeakMap?WeakMap:Map;function hl(e,t,n){(n=Oo(-1,n)).tag=3,n.payload={element:null};var r=t.value;return n.callback=function(){Gs||(Gs=!0,Zs=r),pl(0,t)},n}function ml(e,t,n){(n=Oo(-1,n)).tag=3;var r=e.type.getDerivedStateFromError;if("function"==typeof r){var a=t.value;n.payload=function(){return r(a)},n.callback=function(){pl(0,t)}}var o=e.stateNode;return null!==o&&"function"==typeof o.componentDidCatch&&(n.callback=function(){pl(0,t),"function"!=typeof r&&(null===Vs?Vs=new Set([this]):Vs.add(this));var e=t.stack;this.componentDidCatch(t.value,{componentStack:null!==e?e:""})}),n}function gl(e,t,n){var r=e.pingCache;if(null===r){r=e.pingCache=new fl;var a=new Set;r.set(t,a)}else void 0===(a=r.get(t))&&(a=new Set,r.set(t,a));a.has(n)||(a.add(n),e=Ec.bind(null,e,t,n),t.then(e,e))}function bl(e){do{var t;if((t=13===e.tag)&&(t=null===(t=e.memoizedState)||null!==t.dehydrated),t)return e;e=e.return}while(null!==e);return null}function yl(e,t,n,r,a){return 0==(1&e.mode)?(e===t?e.flags|=65536:(e.flags|=128,n.flags|=131072,n.flags&=-52805,1===n.tag&&(null===n.alternate?n.tag=17:((t=Oo(-1,1)).tag=2,Do(n,t,1))),n.lanes|=1),e):(e.flags|=65536,e.lanes=a,e)}var vl=w.ReactCurrentOwner,wl=!1;function kl(e,t,n,r){t.child=null===e?Xo(t,null,n,r):Yo(t,e.child,n,r)}function xl(e,t,n,r,a){n=n.render;var o=t.ref;return To(t,a),r=Ci(e,t,n,r,o,a),n=Ti(),null===e||wl?(ao&&n&&eo(t),t.flags|=1,kl(e,t,r,a),t.child):(t.updateQueue=e.updateQueue,t.flags&=-2053,e.lanes&=~a,Gl(e,t,a))}function Sl(e,t,n,r,a){if(null===e){var o=n.type;return"function"!=typeof o||Nc(o)||void 0!==o.defaultProps||null!==n.compare||void 0!==n.defaultProps?((e=Dc(n.type,null,r,t,t.mode,a)).ref=t.ref,e.return=t,t.child=e):(t.tag=15,t.type=o,Cl(e,t,o,r,a))}if(o=e.child,0==(e.lanes&a)){var i=o.memoizedProps;if((n=null!==(n=n.compare)?n:sr)(i,r)&&e.ref===t.ref)return Gl(e,t,a)}return t.flags|=1,(e=Oc(o,r)).ref=t.ref,e.return=t,t.child=e}function Cl(e,t,n,r,a){if(null!==e){var o=e.memoizedProps;if(sr(o,r)&&e.ref===t.ref){if(wl=!1,t.pendingProps=r=o,0==(e.lanes&a))return t.lanes=e.lanes,Gl(e,t,a);0!=(131072&e.flags)&&(wl=!0)}}return _l(e,t,n,r,a)}function Tl(e,t,n){var r=t.pendingProps,a=r.children,o=null!==e?e.memoizedState:null;if("hidden"===r.mode)if(0==(1&t.mode))t.memoizedState={baseLanes:0,cachePool:null,transitions:null},Ea(Os,Ns),Ns|=n;else{if(0==(1073741824&n))return e=null!==o?o.baseLanes|n:n,t.lanes=t.childLanes=1073741824,t.memoizedState={baseLanes:e,cachePool:null,transitions:null},t.updateQueue=null,Ea(Os,Ns),Ns|=e,null;t.memoizedState={baseLanes:0,cachePool:null,transitions:null},r=null!==o?o.baseLanes:n,Ea(Os,Ns),Ns|=r}else null!==o?(r=o.baseLanes|n,t.memoizedState=null):r=n,Ea(Os,Ns),Ns|=r;return kl(e,t,a,n),t.child}function El(e,t){var n=t.ref;(null===e&&null!==n||null!==e&&e.ref!==n)&&(t.flags|=512,t.flags|=2097152)}function _l(e,t,n,r,a){var o=Ra(n)?La:Aa.current;return o=ja(t,o),To(t,a),n=Ci(e,t,n,r,o,a),r=Ti(),null===e||wl?(ao&&r&&eo(t),t.flags|=1,kl(e,t,n,a),t.child):(t.updateQueue=e.updateQueue,t.flags&=-2053,e.lanes&=~a,Gl(e,t,a))}function Al(e,t,n,r,a){if(Ra(n)){var o=!0;Ia(t)}else o=!1;if(To(t,a),null===t.stateNode)ql(e,t),qo(t,n,r),Zo(t,n,r,a),r=!0;else if(null===e){var i=t.stateNode,l=t.memoizedProps;i.props=l;var s=i.context,c=n.contextType;"object"==typeof c&&null!==c?c=Eo(c):c=ja(t,c=Ra(n)?La:Aa.current);var u=n.getDerivedStateFromProps,d="function"==typeof u||"function"==typeof i.getSnapshotBeforeUpdate;d||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(l!==r||s!==c)&&Go(t,i,r,c),jo=!1;var p=t.memoizedState;i.state=p,Fo(t,r,i,a),s=t.memoizedState,l!==r||p!==s||Pa.current||jo?("function"==typeof u&&(Uo(t,n,u,r),s=t.memoizedState),(l=jo||Ho(t,n,l,r,p,s,c))?(d||"function"!=typeof i.UNSAFE_componentWillMount&&"function"!=typeof i.componentWillMount||("function"==typeof i.componentWillMount&&i.componentWillMount(),"function"==typeof i.UNSAFE_componentWillMount&&i.UNSAFE_componentWillMount()),"function"==typeof i.componentDidMount&&(t.flags|=4194308)):("function"==typeof i.componentDidMount&&(t.flags|=4194308),t.memoizedProps=r,t.memoizedState=s),i.props=r,i.state=s,i.context=c,r=l):("function"==typeof i.componentDidMount&&(t.flags|=4194308),r=!1)}else{i=t.stateNode,No(e,t),l=t.memoizedProps,c=t.type===t.elementType?l:bo(t.type,l),i.props=c,d=t.pendingProps,p=i.context,"object"==typeof(s=n.contextType)&&null!==s?s=Eo(s):s=ja(t,s=Ra(n)?La:Aa.current);var f=n.getDerivedStateFromProps;(u="function"==typeof f||"function"==typeof i.getSnapshotBeforeUpdate)||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(l!==d||p!==s)&&Go(t,i,r,s),jo=!1,p=t.memoizedState,i.state=p,Fo(t,r,i,a);var h=t.memoizedState;l!==d||p!==h||Pa.current||jo?("function"==typeof f&&(Uo(t,n,f,r),h=t.memoizedState),(c=jo||Ho(t,n,c,r,p,h,s)||!1)?(u||"function"!=typeof i.UNSAFE_componentWillUpdate&&"function"!=typeof i.componentWillUpdate||("function"==typeof i.componentWillUpdate&&i.componentWillUpdate(r,h,s),"function"==typeof i.UNSAFE_componentWillUpdate&&i.UNSAFE_componentWillUpdate(r,h,s)),"function"==typeof i.componentDidUpdate&&(t.flags|=4),"function"==typeof i.getSnapshotBeforeUpdate&&(t.flags|=1024)):("function"!=typeof i.componentDidUpdate||l===e.memoizedProps&&p===e.memoizedState||(t.flags|=4),"function"!=typeof i.getSnapshotBeforeUpdate||l===e.memoizedProps&&p===e.memoizedState||(t.flags|=1024),t.memoizedProps=r,t.memoizedState=h),i.props=r,i.state=h,i.context=s,r=c):("function"!=typeof i.componentDidUpdate||l===e.memoizedProps&&p===e.memoizedState||(t.flags|=4),"function"!=typeof i.getSnapshotBeforeUpdate||l===e.memoizedProps&&p===e.memoizedState||(t.flags|=1024),r=!1)}return Pl(e,t,n,r,o,a)}function Pl(e,t,n,r,a,o){El(e,t);var i=0!=(128&t.flags);if(!r&&!i)return a&&Ma(t,n,!1),Gl(e,t,o);r=t.stateNode,vl.current=t;var l=i&&"function"!=typeof n.getDerivedStateFromError?null:r.render();return t.flags|=1,null!==e&&i?(t.child=Yo(t,e.child,null,o),t.child=Yo(t,null,l,o)):kl(e,t,l,o),t.memoizedState=r.state,a&&Ma(t,n,!0),t.child}function Ll(e){var t=e.stateNode;t.pendingContext?Oa(0,t.pendingContext,t.pendingContext!==t.context):t.context&&Oa(0,t.context,!1),ai(e,t.containerInfo)}function jl(e,t,n,r,a){return ho(),mo(a),t.flags|=256,kl(e,t,n,r),t.child}var Rl,Nl,Ol,Dl,Il={dehydrated:null,treeContext:null,retryLane:0};function Ml(e){return{baseLanes:e,cachePool:null,transitions:null}}function Fl(e,t,n){var r,a=t.pendingProps,i=si.current,l=!1,s=0!=(128&t.flags);if((r=s)||(r=(null===e||null!==e.memoizedState)&&0!=(2&i)),r?(l=!0,t.flags&=-129):null!==e&&null===e.memoizedState||(i|=1),Ea(si,1&i),null===e)return co(t),null!==(e=t.memoizedState)&&null!==(e=e.dehydrated)?(0==(1&t.mode)?t.lanes=1:"$!"===e.data?t.lanes=8:t.lanes=1073741824,null):(s=a.children,e=a.fallback,l?(a=t.mode,l=t.child,s={mode:"hidden",children:s},0==(1&a)&&null!==l?(l.childLanes=0,l.pendingProps=s):l=Mc(s,a,0,null),e=Ic(e,a,n,null),l.return=t,e.return=t,l.sibling=e,t.child=l,t.child.memoizedState=Ml(n),t.memoizedState=Il,e):Bl(t,s));if(null!==(i=e.memoizedState)&&null!==(r=i.dehydrated))return function(e,t,n,r,a,i,l){if(n)return 256&t.flags?(t.flags&=-257,zl(e,t,l,r=dl(Error(o(422))))):null!==t.memoizedState?(t.child=e.child,t.flags|=128,null):(i=r.fallback,a=t.mode,r=Mc({mode:"visible",children:r.children},a,0,null),(i=Ic(i,a,l,null)).flags|=2,r.return=t,i.return=t,r.sibling=i,t.child=r,0!=(1&t.mode)&&Yo(t,e.child,null,l),t.child.memoizedState=Ml(l),t.memoizedState=Il,i);if(0==(1&t.mode))return zl(e,t,l,null);if("$!"===a.data){if(r=a.nextSibling&&a.nextSibling.dataset)var s=r.dgst;return r=s,zl(e,t,l,r=dl(i=Error(o(419)),r,void 0))}if(s=0!=(l&e.childLanes),wl||s){if(null!==(r=Ls)){switch(l&-l){case 4:a=2;break;case 16:a=8;break;case 64:case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:case 4194304:case 8388608:case 16777216:case 33554432:case 67108864:a=32;break;case 536870912:a=268435456;break;default:a=0}0!==(a=0!=(a&(r.suspendedLanes|l))?0:a)&&a!==i.retryLane&&(i.retryLane=a,Lo(e,a),rc(r,e,a,-1))}return gc(),zl(e,t,l,r=dl(Error(o(421))))}return"$?"===a.data?(t.flags|=128,t.child=e.child,t=Ac.bind(null,e),a._reactRetry=t,null):(e=i.treeContext,ro=ca(a.nextSibling),no=t,ao=!0,oo=null,null!==e&&(Va[Wa++]=Qa,Va[Wa++]=Ya,Va[Wa++]=Ka,Qa=e.id,Ya=e.overflow,Ka=t),t=Bl(t,r.children),t.flags|=4096,t)}(e,t,s,a,r,i,n);if(l){l=a.fallback,s=t.mode,r=(i=e.child).sibling;var c={mode:"hidden",children:a.children};return 0==(1&s)&&t.child!==i?((a=t.child).childLanes=0,a.pendingProps=c,t.deletions=null):(a=Oc(i,c)).subtreeFlags=14680064&i.subtreeFlags,null!==r?l=Oc(r,l):(l=Ic(l,s,n,null)).flags|=2,l.return=t,a.return=t,a.sibling=l,t.child=a,a=l,l=t.child,s=null===(s=e.child.memoizedState)?Ml(n):{baseLanes:s.baseLanes|n,cachePool:null,transitions:s.transitions},l.memoizedState=s,l.childLanes=e.childLanes&~n,t.memoizedState=Il,a}return e=(l=e.child).sibling,a=Oc(l,{mode:"visible",children:a.children}),0==(1&t.mode)&&(a.lanes=n),a.return=t,a.sibling=null,null!==e&&(null===(n=t.deletions)?(t.deletions=[e],t.flags|=16):n.push(e)),t.child=a,t.memoizedState=null,a}function Bl(e,t){return(t=Mc({mode:"visible",children:t},e.mode,0,null)).return=e,e.child=t}function zl(e,t,n,r){return null!==r&&mo(r),Yo(t,e.child,null,n),(e=Bl(t,t.pendingProps.children)).flags|=2,t.memoizedState=null,e}function Ul(e,t,n){e.lanes|=t;var r=e.alternate;null!==r&&(r.lanes|=t),Co(e.return,t,n)}function $l(e,t,n,r,a){var o=e.memoizedState;null===o?e.memoizedState={isBackwards:t,rendering:null,renderingStartTime:0,last:r,tail:n,tailMode:a}:(o.isBackwards=t,o.rendering=null,o.renderingStartTime=0,o.last=r,o.tail=n,o.tailMode=a)}function Hl(e,t,n){var r=t.pendingProps,a=r.revealOrder,o=r.tail;if(kl(e,t,r.children,n),0!=(2&(r=si.current)))r=1&r|2,t.flags|=128;else{if(null!==e&&0!=(128&e.flags))e:for(e=t.child;null!==e;){if(13===e.tag)null!==e.memoizedState&&Ul(e,n,t);else if(19===e.tag)Ul(e,n,t);else if(null!==e.child){e.child.return=e,e=e.child;continue}if(e===t)break e;for(;null===e.sibling;){if(null===e.return||e.return===t)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}r&=1}if(Ea(si,r),0==(1&t.mode))t.memoizedState=null;else switch(a){case"forwards":for(n=t.child,a=null;null!==n;)null!==(e=n.alternate)&&null===ci(e)&&(a=n),n=n.sibling;null===(n=a)?(a=t.child,t.child=null):(a=n.sibling,n.sibling=null),$l(t,!1,a,n,o);break;case"backwards":for(n=null,a=t.child,t.child=null;null!==a;){if(null!==(e=a.alternate)&&null===ci(e)){t.child=a;break}e=a.sibling,a.sibling=n,n=a,a=e}$l(t,!0,n,null,o);break;case"together":$l(t,!1,null,null,void 0);break;default:t.memoizedState=null}return t.child}function ql(e,t){0==(1&t.mode)&&null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2)}function Gl(e,t,n){if(null!==e&&(t.dependencies=e.dependencies),Ms|=t.lanes,0==(n&t.childLanes))return null;if(null!==e&&t.child!==e.child)throw Error(o(153));if(null!==t.child){for(n=Oc(e=t.child,e.pendingProps),t.child=n,n.return=t;null!==e.sibling;)e=e.sibling,(n=n.sibling=Oc(e,e.pendingProps)).return=t;n.sibling=null}return t.child}function Zl(e,t){if(!ao)switch(e.tailMode){case"hidden":t=e.tail;for(var n=null;null!==t;)null!==t.alternate&&(n=t),t=t.sibling;null===n?e.tail=null:n.sibling=null;break;case"collapsed":n=e.tail;for(var r=null;null!==n;)null!==n.alternate&&(r=n),n=n.sibling;null===r?t||null===e.tail?e.tail=null:e.tail.sibling=null:r.sibling=null}}function Vl(e){var t=null!==e.alternate&&e.alternate.child===e.child,n=0,r=0;if(t)for(var a=e.child;null!==a;)n|=a.lanes|a.childLanes,r|=14680064&a.subtreeFlags,r|=14680064&a.flags,a.return=e,a=a.sibling;else for(a=e.child;null!==a;)n|=a.lanes|a.childLanes,r|=a.subtreeFlags,r|=a.flags,a.return=e,a=a.sibling;return e.subtreeFlags|=r,e.childLanes=n,t}function Wl(e,t,n){var r=t.pendingProps;switch(to(t),t.tag){case 2:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return Vl(t),null;case 1:case 17:return Ra(t.type)&&Na(),Vl(t),null;case 3:return r=t.stateNode,oi(),Ta(Pa),Ta(Aa),di(),r.pendingContext&&(r.context=r.pendingContext,r.pendingContext=null),null!==e&&null!==e.child||(po(t)?t.flags|=4:null===e||e.memoizedState.isDehydrated&&0==(256&t.flags)||(t.flags|=1024,null!==oo&&(lc(oo),oo=null))),Nl(e,t),Vl(t),null;case 5:li(t);var a=ri(ni.current);if(n=t.type,null!==e&&null!=t.stateNode)Ol(e,t,n,r,a),e.ref!==t.ref&&(t.flags|=512,t.flags|=2097152);else{if(!r){if(null===t.stateNode)throw Error(o(166));return Vl(t),null}if(e=ri(ei.current),po(t)){r=t.stateNode,n=t.type;var i=t.memoizedProps;switch(r[pa]=t,r[fa]=i,e=0!=(1&t.mode),n){case"dialog":Br("cancel",r),Br("close",r);break;case"iframe":case"object":case"embed":Br("load",r);break;case"video":case"audio":for(a=0;a<\/script>",e=e.removeChild(e.firstChild)):"string"==typeof r.is?e=s.createElement(n,{is:r.is}):(e=s.createElement(n),"select"===n&&(s=e,r.multiple?s.multiple=!0:r.size&&(s.size=r.size))):e=s.createElementNS(e,n),e[pa]=t,e[fa]=r,Rl(e,t,!1,!1),t.stateNode=e;e:{switch(s=ve(n,r),n){case"dialog":Br("cancel",e),Br("close",e),a=r;break;case"iframe":case"object":case"embed":Br("load",e),a=r;break;case"video":case"audio":for(a=0;aHs&&(t.flags|=128,r=!0,Zl(i,!1),t.lanes=4194304)}else{if(!r)if(null!==(e=ci(s))){if(t.flags|=128,r=!0,null!==(n=e.updateQueue)&&(t.updateQueue=n,t.flags|=4),Zl(i,!0),null===i.tail&&"hidden"===i.tailMode&&!s.alternate&&!ao)return Vl(t),null}else 2*Ye()-i.renderingStartTime>Hs&&1073741824!==n&&(t.flags|=128,r=!0,Zl(i,!1),t.lanes=4194304);i.isBackwards?(s.sibling=t.child,t.child=s):(null!==(n=i.last)?n.sibling=s:t.child=s,i.last=s)}return null!==i.tail?(t=i.tail,i.rendering=t,i.tail=t.sibling,i.renderingStartTime=Ye(),t.sibling=null,n=si.current,Ea(si,r?1&n|2:1&n),t):(Vl(t),null);case 22:case 23:return pc(),r=null!==t.memoizedState,null!==e&&null!==e.memoizedState!==r&&(t.flags|=8192),r&&0!=(1&t.mode)?0!=(1073741824&Ns)&&(Vl(t),6&t.subtreeFlags&&(t.flags|=8192)):Vl(t),null;case 24:case 25:return null}throw Error(o(156,t.tag))}function Kl(e,t){switch(to(t),t.tag){case 1:return Ra(t.type)&&Na(),65536&(e=t.flags)?(t.flags=-65537&e|128,t):null;case 3:return oi(),Ta(Pa),Ta(Aa),di(),0!=(65536&(e=t.flags))&&0==(128&e)?(t.flags=-65537&e|128,t):null;case 5:return li(t),null;case 13:if(Ta(si),null!==(e=t.memoizedState)&&null!==e.dehydrated){if(null===t.alternate)throw Error(o(340));ho()}return 65536&(e=t.flags)?(t.flags=-65537&e|128,t):null;case 19:return Ta(si),null;case 4:return oi(),null;case 10:return So(t.type._context),null;case 22:case 23:return pc(),null;default:return null}}Rl=function(e,t){for(var n=t.child;null!==n;){if(5===n.tag||6===n.tag)e.appendChild(n.stateNode);else if(4!==n.tag&&null!==n.child){n.child.return=n,n=n.child;continue}if(n===t)break;for(;null===n.sibling;){if(null===n.return||n.return===t)return;n=n.return}n.sibling.return=n.return,n=n.sibling}},Nl=function(){},Ol=function(e,t,n,r){var a=e.memoizedProps;if(a!==r){e=t.stateNode,ri(ei.current);var o,i=null;switch(n){case"input":a=K(e,a),r=K(e,r),i=[];break;case"select":a=M({},a,{value:void 0}),r=M({},r,{value:void 0}),i=[];break;case"textarea":a=re(e,a),r=re(e,r),i=[];break;default:"function"!=typeof a.onClick&&"function"==typeof r.onClick&&(e.onclick=Jr)}for(u in ye(n,r),n=null,a)if(!r.hasOwnProperty(u)&&a.hasOwnProperty(u)&&null!=a[u])if("style"===u){var s=a[u];for(o in s)s.hasOwnProperty(o)&&(n||(n={}),n[o]="")}else"dangerouslySetInnerHTML"!==u&&"children"!==u&&"suppressContentEditableWarning"!==u&&"suppressHydrationWarning"!==u&&"autoFocus"!==u&&(l.hasOwnProperty(u)?i||(i=[]):(i=i||[]).push(u,null));for(u in r){var c=r[u];if(s=null!=a?a[u]:void 0,r.hasOwnProperty(u)&&c!==s&&(null!=c||null!=s))if("style"===u)if(s){for(o in s)!s.hasOwnProperty(o)||c&&c.hasOwnProperty(o)||(n||(n={}),n[o]="");for(o in c)c.hasOwnProperty(o)&&s[o]!==c[o]&&(n||(n={}),n[o]=c[o])}else n||(i||(i=[]),i.push(u,n)),n=c;else"dangerouslySetInnerHTML"===u?(c=c?c.__html:void 0,s=s?s.__html:void 0,null!=c&&s!==c&&(i=i||[]).push(u,c)):"children"===u?"string"!=typeof c&&"number"!=typeof c||(i=i||[]).push(u,""+c):"suppressContentEditableWarning"!==u&&"suppressHydrationWarning"!==u&&(l.hasOwnProperty(u)?(null!=c&&"onScroll"===u&&Br("scroll",e),i||s===c||(i=[])):(i=i||[]).push(u,c))}n&&(i=i||[]).push("style",n);var u=i;(t.updateQueue=u)&&(t.flags|=4)}},Dl=function(e,t,n,r){n!==r&&(t.flags|=4)};var Ql=!1,Yl=!1,Xl="function"==typeof WeakSet?WeakSet:Set,Jl=null;function es(e,t){var n=e.ref;if(null!==n)if("function"==typeof n)try{n(null)}catch(r){Tc(e,t,r)}else n.current=null}function ts(e,t,n){try{n()}catch(r){Tc(e,t,r)}}var ns=!1;function rs(e,t,n){var r=t.updateQueue;if(null!==(r=null!==r?r.lastEffect:null)){var a=r=r.next;do{if((a.tag&e)===e){var o=a.destroy;a.destroy=void 0,void 0!==o&&ts(t,n,o)}a=a.next}while(a!==r)}}function as(e,t){if(null!==(t=null!==(t=t.updateQueue)?t.lastEffect:null)){var n=t=t.next;do{if((n.tag&e)===e){var r=n.create;n.destroy=r()}n=n.next}while(n!==t)}}function os(e){var t=e.ref;if(null!==t){var n=e.stateNode;e.tag,e=n,"function"==typeof t?t(e):t.current=e}}function is(e){var t=e.alternate;null!==t&&(e.alternate=null,is(t)),e.child=null,e.deletions=null,e.sibling=null,5===e.tag&&(null!==(t=e.stateNode)&&(delete t[pa],delete t[fa],delete t[ma],delete t[ga],delete t[ba])),e.stateNode=null,e.return=null,e.dependencies=null,e.memoizedProps=null,e.memoizedState=null,e.pendingProps=null,e.stateNode=null,e.updateQueue=null}function ls(e){return 5===e.tag||3===e.tag||4===e.tag}function ss(e){e:for(;;){for(;null===e.sibling;){if(null===e.return||ls(e.return))return null;e=e.return}for(e.sibling.return=e.return,e=e.sibling;5!==e.tag&&6!==e.tag&&18!==e.tag;){if(2&e.flags)continue e;if(null===e.child||4===e.tag)continue e;e.child.return=e,e=e.child}if(!(2&e.flags))return e.stateNode}}function cs(e,t,n){var r=e.tag;if(5===r||6===r)e=e.stateNode,t?8===n.nodeType?n.parentNode.insertBefore(e,t):n.insertBefore(e,t):(8===n.nodeType?(t=n.parentNode).insertBefore(e,n):(t=n).appendChild(e),null!=(n=n._reactRootContainer)||null!==t.onclick||(t.onclick=Jr));else if(4!==r&&null!==(e=e.child))for(cs(e,t,n),e=e.sibling;null!==e;)cs(e,t,n),e=e.sibling}function us(e,t,n){var r=e.tag;if(5===r||6===r)e=e.stateNode,t?n.insertBefore(e,t):n.appendChild(e);else if(4!==r&&null!==(e=e.child))for(us(e,t,n),e=e.sibling;null!==e;)us(e,t,n),e=e.sibling}var ds=null,ps=!1;function fs(e,t,n){for(n=n.child;null!==n;)hs(e,t,n),n=n.sibling}function hs(e,t,n){if(ot&&"function"==typeof ot.onCommitFiberUnmount)try{ot.onCommitFiberUnmount(at,n)}catch(l){}switch(n.tag){case 5:Yl||es(n,t);case 6:var r=ds,a=ps;ds=null,fs(e,t,n),ps=a,null!==(ds=r)&&(ps?(e=ds,n=n.stateNode,8===e.nodeType?e.parentNode.removeChild(n):e.removeChild(n)):ds.removeChild(n.stateNode));break;case 18:null!==ds&&(ps?(e=ds,n=n.stateNode,8===e.nodeType?sa(e.parentNode,n):1===e.nodeType&&sa(e,n),$t(e)):sa(ds,n.stateNode));break;case 4:r=ds,a=ps,ds=n.stateNode.containerInfo,ps=!0,fs(e,t,n),ds=r,ps=a;break;case 0:case 11:case 14:case 15:if(!Yl&&(null!==(r=n.updateQueue)&&null!==(r=r.lastEffect))){a=r=r.next;do{var o=a,i=o.destroy;o=o.tag,void 0!==i&&(0!=(2&o)||0!=(4&o))&&ts(n,t,i),a=a.next}while(a!==r)}fs(e,t,n);break;case 1:if(!Yl&&(es(n,t),"function"==typeof(r=n.stateNode).componentWillUnmount))try{r.props=n.memoizedProps,r.state=n.memoizedState,r.componentWillUnmount()}catch(l){Tc(n,t,l)}fs(e,t,n);break;case 21:fs(e,t,n);break;case 22:1&n.mode?(Yl=(r=Yl)||null!==n.memoizedState,fs(e,t,n),Yl=r):fs(e,t,n);break;default:fs(e,t,n)}}function ms(e){var t=e.updateQueue;if(null!==t){e.updateQueue=null;var n=e.stateNode;null===n&&(n=e.stateNode=new Xl),t.forEach((function(t){var r=Pc.bind(null,e,t);n.has(t)||(n.add(t),t.then(r,r))}))}}function gs(e,t){var n=t.deletions;if(null!==n)for(var r=0;ra&&(a=l),r&=~i}if(r=a,10<(r=(120>(r=Ye()-r)?120:480>r?480:1080>r?1080:1920>r?1920:3e3>r?3e3:4320>r?4320:1960*Ts(r/1960))-r)){e.timeoutHandle=ra(xc.bind(null,e,Us,qs),r);break}xc(e,Us,qs);break;default:throw Error(o(329))}}}return ac(e,Ye()),e.callbackNode===n?oc.bind(null,e):null}function ic(e,t){var n=zs;return e.current.memoizedState.isDehydrated&&(fc(e,t).flags|=256),2!==(e=bc(e,t))&&(t=Us,Us=n,null!==t&&lc(t)),e}function lc(e){null===Us?Us=e:Us.push.apply(Us,e)}function sc(e,t){for(t&=~Bs,t&=~Fs,e.suspendedLanes|=t,e.pingedLanes&=~t,e=e.expirationTimes;0e?16:e,null===Ks)var r=!1;else{if(e=Ks,Ks=null,Qs=0,0!=(6&Ps))throw Error(o(331));var a=Ps;for(Ps|=4,Jl=e.current;null!==Jl;){var i=Jl,l=i.child;if(0!=(16&Jl.flags)){var s=i.deletions;if(null!==s){for(var c=0;cYe()-$s?fc(e,0):Bs|=n),ac(e,t)}function _c(e,t){0===t&&(0==(1&e.mode)?t=1:(t=ut,0==(130023424&(ut<<=1))&&(ut=4194304)));var n=tc();null!==(e=Lo(e,t))&&(bt(e,t,n),ac(e,n))}function Ac(e){var t=e.memoizedState,n=0;null!==t&&(n=t.retryLane),_c(e,n)}function Pc(e,t){var n=0;switch(e.tag){case 13:var r=e.stateNode,a=e.memoizedState;null!==a&&(n=a.retryLane);break;case 19:r=e.stateNode;break;default:throw Error(o(314))}null!==r&&r.delete(t),_c(e,n)}function Lc(e,t){return Ve(e,t)}function jc(e,t,n,r){this.tag=e,this.key=n,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=t,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=r,this.subtreeFlags=this.flags=0,this.deletions=null,this.childLanes=this.lanes=0,this.alternate=null}function Rc(e,t,n,r){return new jc(e,t,n,r)}function Nc(e){return!(!(e=e.prototype)||!e.isReactComponent)}function Oc(e,t){var n=e.alternate;return null===n?((n=Rc(e.tag,t,e.key,e.mode)).elementType=e.elementType,n.type=e.type,n.stateNode=e.stateNode,n.alternate=e,e.alternate=n):(n.pendingProps=t,n.type=e.type,n.flags=0,n.subtreeFlags=0,n.deletions=null),n.flags=14680064&e.flags,n.childLanes=e.childLanes,n.lanes=e.lanes,n.child=e.child,n.memoizedProps=e.memoizedProps,n.memoizedState=e.memoizedState,n.updateQueue=e.updateQueue,t=e.dependencies,n.dependencies=null===t?null:{lanes:t.lanes,firstContext:t.firstContext},n.sibling=e.sibling,n.index=e.index,n.ref=e.ref,n}function Dc(e,t,n,r,a,i){var l=2;if(r=e,"function"==typeof e)Nc(e)&&(l=1);else if("string"==typeof e)l=5;else e:switch(e){case S:return Ic(n.children,a,i,t);case C:l=8,a|=8;break;case T:return(e=Rc(12,n,t,2|a)).elementType=T,e.lanes=i,e;case P:return(e=Rc(13,n,t,a)).elementType=P,e.lanes=i,e;case L:return(e=Rc(19,n,t,a)).elementType=L,e.lanes=i,e;case N:return Mc(n,a,i,t);default:if("object"==typeof e&&null!==e)switch(e.$$typeof){case E:l=10;break e;case _:l=9;break e;case A:l=11;break e;case j:l=14;break e;case R:l=16,r=null;break e}throw Error(o(130,null==e?e:typeof e,""))}return(t=Rc(l,n,t,a)).elementType=e,t.type=r,t.lanes=i,t}function Ic(e,t,n,r){return(e=Rc(7,e,r,t)).lanes=n,e}function Mc(e,t,n,r){return(e=Rc(22,e,r,t)).elementType=N,e.lanes=n,e.stateNode={isHidden:!1},e}function Fc(e,t,n){return(e=Rc(6,e,null,t)).lanes=n,e}function Bc(e,t,n){return(t=Rc(4,null!==e.children?e.children:[],e.key,t)).lanes=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function zc(e,t,n,r,a){this.tag=t,this.containerInfo=e,this.finishedWork=this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.callbackNode=this.pendingContext=this.context=null,this.callbackPriority=0,this.eventTimes=gt(0),this.expirationTimes=gt(-1),this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=gt(0),this.identifierPrefix=r,this.onRecoverableError=a,this.mutableSourceEagerHydrationData=null}function Uc(e,t,n,r,a,o,i,l,s){return e=new zc(e,t,n,l,s),1===t?(t=1,!0===o&&(t|=8)):t=0,o=Rc(3,null,null,t),e.current=o,o.stateNode=e,o.memoizedState={element:r,isDehydrated:n,cache:null,transitions:null,pendingSuspenseBoundaries:null},Ro(o),e}function $c(e){if(!e)return _a;e:{if($e(e=e._reactInternals)!==e||1!==e.tag)throw Error(o(170));var t=e;do{switch(t.tag){case 3:t=t.stateNode.context;break e;case 1:if(Ra(t.type)){t=t.stateNode.__reactInternalMemoizedMergedChildContext;break e}}t=t.return}while(null!==t);throw Error(o(171))}if(1===e.tag){var n=e.type;if(Ra(n))return Da(e,n,t)}return t}function Hc(e,t,n,r,a,o,i,l,s){return(e=Uc(n,r,!0,e,0,o,0,l,s)).context=$c(null),n=e.current,(o=Oo(r=tc(),a=nc(n))).callback=null!=t?t:null,Do(n,o,a),e.current.lanes=a,bt(e,a,r),ac(e,r),e}function qc(e,t,n,r){var a=t.current,o=tc(),i=nc(a);return n=$c(n),null===t.context?t.context=n:t.pendingContext=n,(t=Oo(o,i)).payload={element:e},null!==(r=void 0===r?null:r)&&(t.callback=r),null!==(e=Do(a,t,i))&&(rc(e,a,i,o),Io(e,a,i)),i}function Gc(e){return(e=e.current).child?(e.child.tag,e.child.stateNode):null}function Zc(e,t){if(null!==(e=e.memoizedState)&&null!==e.dehydrated){var n=e.retryLane;e.retryLane=0!==n&&n{"use strict";var r=n(3935);t.createRoot=r.createRoot,t.hydrateRoot=r.hydrateRoot},3935:(e,t,n)=>{"use strict";!function e(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(t){console.error(t)}}(),e.exports=n(4448)},9590:e=>{var t="undefined"!=typeof Element,n="function"==typeof Map,r="function"==typeof Set,a="function"==typeof ArrayBuffer&&!!ArrayBuffer.isView;function o(e,i){if(e===i)return!0;if(e&&i&&"object"==typeof e&&"object"==typeof i){if(e.constructor!==i.constructor)return!1;var l,s,c,u;if(Array.isArray(e)){if((l=e.length)!=i.length)return!1;for(s=l;0!=s--;)if(!o(e[s],i[s]))return!1;return!0}if(n&&e instanceof Map&&i instanceof Map){if(e.size!==i.size)return!1;for(u=e.entries();!(s=u.next()).done;)if(!i.has(s.value[0]))return!1;for(u=e.entries();!(s=u.next()).done;)if(!o(s.value[1],i.get(s.value[0])))return!1;return!0}if(r&&e instanceof Set&&i instanceof Set){if(e.size!==i.size)return!1;for(u=e.entries();!(s=u.next()).done;)if(!i.has(s.value[0]))return!1;return!0}if(a&&ArrayBuffer.isView(e)&&ArrayBuffer.isView(i)){if((l=e.length)!=i.length)return!1;for(s=l;0!=s--;)if(e[s]!==i[s])return!1;return!0}if(e.constructor===RegExp)return e.source===i.source&&e.flags===i.flags;if(e.valueOf!==Object.prototype.valueOf&&"function"==typeof e.valueOf&&"function"==typeof i.valueOf)return e.valueOf()===i.valueOf();if(e.toString!==Object.prototype.toString&&"function"==typeof e.toString&&"function"==typeof i.toString)return e.toString()===i.toString();if((l=(c=Object.keys(e)).length)!==Object.keys(i).length)return!1;for(s=l;0!=s--;)if(!Object.prototype.hasOwnProperty.call(i,c[s]))return!1;if(t&&e instanceof Element)return!1;for(s=l;0!=s--;)if(("_owner"!==c[s]&&"__v"!==c[s]&&"__o"!==c[s]||!e.$$typeof)&&!o(e[c[s]],i[c[s]]))return!1;return!0}return e!=e&&i!=i}e.exports=function(e,t){try{return o(e,t)}catch(n){if((n.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw n}}},405:(e,t,n)=>{"use strict";n.d(t,{B6:()=>G,ql:()=>J});var r=n(7294),a=n(5697),o=n.n(a),i=n(9590),l=n.n(i),s=n(1143),c=n.n(s),u=n(6774),d=n.n(u);function p(){return p=Object.assign||function(e){for(var t=1;t=0||(a[n]=e[n]);return a}var g={BASE:"base",BODY:"body",HEAD:"head",HTML:"html",LINK:"link",META:"meta",NOSCRIPT:"noscript",SCRIPT:"script",STYLE:"style",TITLE:"title",FRAGMENT:"Symbol(react.fragment)"},b={rel:["amphtml","canonical","alternate"]},y={type:["application/ld+json"]},v={charset:"",name:["robots","description"],property:["og:type","og:title","og:url","og:image","og:image:alt","og:description","twitter:url","twitter:title","twitter:description","twitter:image","twitter:image:alt","twitter:card","twitter:site"]},w=Object.keys(g).map((function(e){return g[e]})),k={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"},x=Object.keys(k).reduce((function(e,t){return e[k[t]]=t,e}),{}),S=function(e,t){for(var n=e.length-1;n>=0;n-=1){var r=e[n];if(Object.prototype.hasOwnProperty.call(r,t))return r[t]}return null},C=function(e){var t=S(e,g.TITLE),n=S(e,"titleTemplate");if(Array.isArray(t)&&(t=t.join("")),n&&t)return n.replace(/%s/g,(function(){return t}));var r=S(e,"defaultTitle");return t||r||void 0},T=function(e){return S(e,"onChangeClientState")||function(){}},E=function(e,t){return t.filter((function(t){return void 0!==t[e]})).map((function(t){return t[e]})).reduce((function(e,t){return p({},e,t)}),{})},_=function(e,t){return t.filter((function(e){return void 0!==e[g.BASE]})).map((function(e){return e[g.BASE]})).reverse().reduce((function(t,n){if(!t.length)for(var r=Object.keys(n),a=0;a/g,">").replace(/"/g,""").replace(/'/g,"'")},D=function(e){return Object.keys(e).reduce((function(t,n){var r=void 0!==e[n]?n+'="'+e[n]+'"':""+n;return t?t+" "+r:r}),"")},I=function(e,t){return void 0===t&&(t={}),Object.keys(e).reduce((function(t,n){return t[k[n]||n]=e[n],t}),t)},M=function(e,t){return t.map((function(t,n){var a,o=((a={key:n})["data-rh"]=!0,a);return Object.keys(t).forEach((function(e){var n=k[e]||e;"innerHTML"===n||"cssText"===n?o.dangerouslySetInnerHTML={__html:t.innerHTML||t.cssText}:o[n]=t[e]})),r.createElement(e,o)}))},F=function(e,t,n){switch(e){case g.TITLE:return{toComponent:function(){return n=t.titleAttributes,(a={key:e=t.title})["data-rh"]=!0,o=I(n,a),[r.createElement(g.TITLE,o,e)];var e,n,a,o},toString:function(){return function(e,t,n,r){var a=D(n),o=L(t);return a?"<"+e+' data-rh="true" '+a+">"+O(o,r)+"":"<"+e+' data-rh="true">'+O(o,r)+""}(e,t.title,t.titleAttributes,n)}};case"bodyAttributes":case"htmlAttributes":return{toComponent:function(){return I(t)},toString:function(){return D(t)}};default:return{toComponent:function(){return M(e,t)},toString:function(){return function(e,t,n){return t.reduce((function(t,r){var a=Object.keys(r).filter((function(e){return!("innerHTML"===e||"cssText"===e)})).reduce((function(e,t){var a=void 0===r[t]?t:t+'="'+O(r[t],n)+'"';return e?e+" "+a:a}),""),o=r.innerHTML||r.cssText||"",i=-1===N.indexOf(e);return t+"<"+e+' data-rh="true" '+a+(i?"/>":">"+o+"")}),"")}(e,t,n)}}}},B=function(e){var t=e.baseTag,n=e.bodyAttributes,r=e.encode,a=e.htmlAttributes,o=e.noscriptTags,i=e.styleTags,l=e.title,s=void 0===l?"":l,c=e.titleAttributes,u=e.linkTags,d=e.metaTags,p=e.scriptTags,f={toComponent:function(){},toString:function(){return""}};if(e.prioritizeSeoTags){var h=function(e){var t=e.linkTags,n=e.scriptTags,r=e.encode,a=j(e.metaTags,v),o=j(t,b),i=j(n,y);return{priorityMethods:{toComponent:function(){return[].concat(M(g.META,a.priority),M(g.LINK,o.priority),M(g.SCRIPT,i.priority))},toString:function(){return F(g.META,a.priority,r)+" "+F(g.LINK,o.priority,r)+" "+F(g.SCRIPT,i.priority,r)}},metaTags:a.default,linkTags:o.default,scriptTags:i.default}}(e);f=h.priorityMethods,u=h.linkTags,d=h.metaTags,p=h.scriptTags}return{priority:f,base:F(g.BASE,t,r),bodyAttributes:F("bodyAttributes",n,r),htmlAttributes:F("htmlAttributes",a,r),link:F(g.LINK,u,r),meta:F(g.META,d,r),noscript:F(g.NOSCRIPT,o,r),script:F(g.SCRIPT,p,r),style:F(g.STYLE,i,r),title:F(g.TITLE,{title:s,titleAttributes:c},r)}},z=[],U=function(e,t){var n=this;void 0===t&&(t="undefined"!=typeof document),this.instances=[],this.value={setHelmet:function(e){n.context.helmet=e},helmetInstances:{get:function(){return n.canUseDOM?z:n.instances},add:function(e){(n.canUseDOM?z:n.instances).push(e)},remove:function(e){var t=(n.canUseDOM?z:n.instances).indexOf(e);(n.canUseDOM?z:n.instances).splice(t,1)}}},this.context=e,this.canUseDOM=t,t||(e.helmet=B({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}}))},$=r.createContext({}),H=o().shape({setHelmet:o().func,helmetInstances:o().shape({get:o().func,add:o().func,remove:o().func})}),q="undefined"!=typeof document,G=function(e){function t(n){var r;return(r=e.call(this,n)||this).helmetData=new U(r.props.context,t.canUseDOM),r}return f(t,e),t.prototype.render=function(){return r.createElement($.Provider,{value:this.helmetData.value},this.props.children)},t}(r.Component);G.canUseDOM=q,G.propTypes={context:o().shape({helmet:o().shape()}),children:o().node.isRequired},G.defaultProps={context:{}},G.displayName="HelmetProvider";var Z=function(e,t){var n,r=document.head||document.querySelector(g.HEAD),a=r.querySelectorAll(e+"[data-rh]"),o=[].slice.call(a),i=[];return t&&t.length&&t.forEach((function(t){var r=document.createElement(e);for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&("innerHTML"===a?r.innerHTML=t.innerHTML:"cssText"===a?r.styleSheet?r.styleSheet.cssText=t.cssText:r.appendChild(document.createTextNode(t.cssText)):r.setAttribute(a,void 0===t[a]?"":t[a]));r.setAttribute("data-rh","true"),o.some((function(e,t){return n=t,r.isEqualNode(e)}))?o.splice(n,1):i.push(r)})),o.forEach((function(e){return e.parentNode.removeChild(e)})),i.forEach((function(e){return r.appendChild(e)})),{oldTags:o,newTags:i}},V=function(e,t){var n=document.getElementsByTagName(e)[0];if(n){for(var r=n.getAttribute("data-rh"),a=r?r.split(","):[],o=[].concat(a),i=Object.keys(t),l=0;l=0;d-=1)n.removeAttribute(o[d]);a.length===o.length?n.removeAttribute("data-rh"):n.getAttribute("data-rh")!==i.join(",")&&n.setAttribute("data-rh",i.join(","))}},W=function(e,t){var n=e.baseTag,r=e.htmlAttributes,a=e.linkTags,o=e.metaTags,i=e.noscriptTags,l=e.onChangeClientState,s=e.scriptTags,c=e.styleTags,u=e.title,d=e.titleAttributes;V(g.BODY,e.bodyAttributes),V(g.HTML,r),function(e,t){void 0!==e&&document.title!==e&&(document.title=L(e)),V(g.TITLE,t)}(u,d);var p={baseTag:Z(g.BASE,n),linkTags:Z(g.LINK,a),metaTags:Z(g.META,o),noscriptTags:Z(g.NOSCRIPT,i),scriptTags:Z(g.SCRIPT,s),styleTags:Z(g.STYLE,c)},f={},h={};Object.keys(p).forEach((function(e){var t=p[e],n=t.newTags,r=t.oldTags;n.length&&(f[e]=n),r.length&&(h[e]=p[e].oldTags)})),t&&t(),l(e,f,h)},K=null,Q=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),a=0;a components within each other, which is not allowed. Refer to our API for more information.":"Only elements types "+w.join(", ")+" are allowed. Helmet does not support rendering <"+e.type+"> elements. Refer to our API for more information."),c()(!t||"string"==typeof t||Array.isArray(t)&&!t.some((function(e){return"string"!=typeof e})),"Helmet expects a string as a child of <"+e.type+">. Did you forget to wrap your children in braces? ( <"+e.type+">{``} ) Refer to our API for more information."),!0},n.mapChildrenToProps=function(e,t){var n=this,a={};return r.Children.forEach(e,(function(e){if(e&&e.props){var r=e.props,o=r.children,i=m(r,Y),l=Object.keys(i).reduce((function(e,t){return e[x[t]||t]=i[t],e}),{}),s=e.type;switch("symbol"==typeof s?s=s.toString():n.warnOnInvalidChildren(e,o),s){case g.FRAGMENT:t=n.mapChildrenToProps(o,t);break;case g.LINK:case g.META:case g.NOSCRIPT:case g.SCRIPT:case g.STYLE:a=n.flattenArrayTypeChildren({child:e,arrayTypeChildren:a,newChildProps:l,nestedChildren:o});break;default:t=n.mapObjectTypeChildren({child:e,newProps:t,newChildProps:l,nestedChildren:o})}}})),this.mapArrayTypeChildrenToProps(a,t)},n.render=function(){var e=this.props,t=e.children,n=m(e,X),a=p({},n),o=n.helmetData;return t&&(a=this.mapChildrenToProps(t,a)),!o||o instanceof U||(o=new U(o.context,o.instances)),o?r.createElement(Q,p({},a,{context:o.value,helmetData:void 0})):r.createElement($.Consumer,null,(function(e){return r.createElement(Q,p({},a,{context:e}))}))},t}(r.Component);J.propTypes={base:o().object,bodyAttributes:o().object,children:o().oneOfType([o().arrayOf(o().node),o().node]),defaultTitle:o().string,defer:o().bool,encodeSpecialCharacters:o().bool,htmlAttributes:o().object,link:o().arrayOf(o().object),meta:o().arrayOf(o().object),noscript:o().arrayOf(o().object),onChangeClientState:o().func,script:o().arrayOf(o().object),style:o().arrayOf(o().object),title:o().string,titleAttributes:o().object,titleTemplate:o().string,prioritizeSeoTags:o().bool,helmetData:o().object},J.defaultProps={defer:!0,encodeSpecialCharacters:!0,prioritizeSeoTags:!1},J.displayName="Helmet"},9921:(e,t)=>{"use strict";var n="function"==typeof Symbol&&Symbol.for,r=n?Symbol.for("react.element"):60103,a=n?Symbol.for("react.portal"):60106,o=n?Symbol.for("react.fragment"):60107,i=n?Symbol.for("react.strict_mode"):60108,l=n?Symbol.for("react.profiler"):60114,s=n?Symbol.for("react.provider"):60109,c=n?Symbol.for("react.context"):60110,u=n?Symbol.for("react.async_mode"):60111,d=n?Symbol.for("react.concurrent_mode"):60111,p=n?Symbol.for("react.forward_ref"):60112,f=n?Symbol.for("react.suspense"):60113,h=n?Symbol.for("react.suspense_list"):60120,m=n?Symbol.for("react.memo"):60115,g=n?Symbol.for("react.lazy"):60116,b=n?Symbol.for("react.block"):60121,y=n?Symbol.for("react.fundamental"):60117,v=n?Symbol.for("react.responder"):60118,w=n?Symbol.for("react.scope"):60119;function k(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case r:switch(e=e.type){case u:case d:case o:case l:case i:case f:return e;default:switch(e=e&&e.$$typeof){case c:case p:case g:case m:case s:return e;default:return t}}case a:return t}}}function x(e){return k(e)===d}t.AsyncMode=u,t.ConcurrentMode=d,t.ContextConsumer=c,t.ContextProvider=s,t.Element=r,t.ForwardRef=p,t.Fragment=o,t.Lazy=g,t.Memo=m,t.Portal=a,t.Profiler=l,t.StrictMode=i,t.Suspense=f,t.isAsyncMode=function(e){return x(e)||k(e)===u},t.isConcurrentMode=x,t.isContextConsumer=function(e){return k(e)===c},t.isContextProvider=function(e){return k(e)===s},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},t.isForwardRef=function(e){return k(e)===p},t.isFragment=function(e){return k(e)===o},t.isLazy=function(e){return k(e)===g},t.isMemo=function(e){return k(e)===m},t.isPortal=function(e){return k(e)===a},t.isProfiler=function(e){return k(e)===l},t.isStrictMode=function(e){return k(e)===i},t.isSuspense=function(e){return k(e)===f},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===o||e===d||e===l||e===i||e===f||e===h||"object"==typeof e&&null!==e&&(e.$$typeof===g||e.$$typeof===m||e.$$typeof===s||e.$$typeof===c||e.$$typeof===p||e.$$typeof===y||e.$$typeof===v||e.$$typeof===w||e.$$typeof===b)},t.typeOf=k},9864:(e,t,n)=>{"use strict";e.exports=n(9921)},8356:(e,t,n)=>{"use strict";function r(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(){return i=Object.assign||function(e){for(var t=1;t{"use strict";n.d(t,{H:()=>l,f:()=>i});var r=n(6550),a=n(7462),o=n(7294);function i(e,t,n){return void 0===n&&(n=[]),e.some((function(e){var a=e.path?(0,r.LX)(t,e):n.length?n[n.length-1].match:r.F0.computeRootMatch(t);return a&&(n.push({route:e,match:a}),e.routes&&i(e.routes,t,n)),a})),n}function l(e,t,n){return void 0===t&&(t={}),void 0===n&&(n={}),e?o.createElement(r.rs,n,e.map((function(e,n){return o.createElement(r.AW,{key:e.key||n,path:e.path,exact:e.exact,strict:e.strict,render:function(n){return e.render?e.render((0,a.Z)({},n,{},t,{route:e})):o.createElement(e.component,(0,a.Z)({},n,t,{route:e}))}})}))):null}},3727:(e,t,n)=>{"use strict";n.d(t,{OL:()=>v,VK:()=>u,rU:()=>g});var r=n(6550),a=n(5068),o=n(7294),i=n(9318),l=n(7462),s=n(3366),c=n(8776),u=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),a=0;a{"use strict";n.d(t,{AW:()=>C,F0:()=>v,LX:()=>S,TH:()=>N,k6:()=>R,rs:()=>L,s6:()=>y});var r=n(5068),a=n(7294),o=n(5697),i=n.n(o),l=n(9318),s=n(8776),c=n(7462),u=n(9658),d=n.n(u),p=(n(9864),n(3366)),f=(n(8679),1073741823),h="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:void 0!==n.g?n.g:{};var m=a.createContext||function(e,t){var n,o,l="__create-react-context-"+function(){var e="__global_unique_id__";return h[e]=(h[e]||0)+1}()+"__",s=function(e){function n(){for(var t,n,r,a=arguments.length,o=new Array(a),i=0;i{var r=n(5826);e.exports=f,e.exports.parse=o,e.exports.compile=function(e,t){return l(o(e,t),t)},e.exports.tokensToFunction=l,e.exports.tokensToRegExp=p;var a=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function o(e,t){for(var n,r=[],o=0,i=0,l="",u=t&&t.delimiter||"/";null!=(n=a.exec(e));){var d=n[0],p=n[1],f=n.index;if(l+=e.slice(i,f),i=f+d.length,p)l+=p[1];else{var h=e[i],m=n[2],g=n[3],b=n[4],y=n[5],v=n[6],w=n[7];l&&(r.push(l),l="");var k=null!=m&&null!=h&&h!==m,x="+"===v||"*"===v,S="?"===v||"*"===v,C=n[2]||u,T=b||y;r.push({name:g||o++,prefix:m||"",delimiter:C,optional:S,repeat:x,partial:k,asterisk:!!w,pattern:T?c(T):w?".*":"[^"+s(C)+"]+?"})}}return i{"use strict";var r=n(7294),a=Symbol.for("react.element"),o=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,l=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s={key:!0,ref:!0,__self:!0,__source:!0};function c(e,t,n){var r,o={},c=null,u=null;for(r in void 0!==n&&(c=""+n),void 0!==t.key&&(c=""+t.key),void 0!==t.ref&&(u=t.ref),t)i.call(t,r)&&!s.hasOwnProperty(r)&&(o[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===o[r]&&(o[r]=t[r]);return{$$typeof:a,type:e,key:c,ref:u,props:o,_owner:l.current}}t.Fragment=o,t.jsx=c,t.jsxs=c},2408:(e,t)=>{"use strict";var n=Symbol.for("react.element"),r=Symbol.for("react.portal"),a=Symbol.for("react.fragment"),o=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),l=Symbol.for("react.provider"),s=Symbol.for("react.context"),c=Symbol.for("react.forward_ref"),u=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),p=Symbol.for("react.lazy"),f=Symbol.iterator;var h={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},m=Object.assign,g={};function b(e,t,n){this.props=e,this.context=t,this.refs=g,this.updater=n||h}function y(){}function v(e,t,n){this.props=e,this.context=t,this.refs=g,this.updater=n||h}b.prototype.isReactComponent={},b.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},b.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},y.prototype=b.prototype;var w=v.prototype=new y;w.constructor=v,m(w,b.prototype),w.isPureReactComponent=!0;var k=Array.isArray,x=Object.prototype.hasOwnProperty,S={current:null},C={key:!0,ref:!0,__self:!0,__source:!0};function T(e,t,r){var a,o={},i=null,l=null;if(null!=t)for(a in void 0!==t.ref&&(l=t.ref),void 0!==t.key&&(i=""+t.key),t)x.call(t,a)&&!C.hasOwnProperty(a)&&(o[a]=t[a]);var s=arguments.length-2;if(1===s)o.children=r;else if(1{"use strict";e.exports=n(2408)},5893:(e,t,n)=>{"use strict";e.exports=n(5251)},53:(e,t)=>{"use strict";function n(e,t){var n=e.length;e.push(t);e:for(;0>>1,a=e[r];if(!(0>>1;ro(s,n))co(u,s)?(e[r]=u,e[c]=n,r=c):(e[r]=s,e[l]=n,r=l);else{if(!(co(u,n)))break e;e[r]=u,e[c]=n,r=c}}}return t}function o(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}if("object"==typeof performance&&"function"==typeof performance.now){var i=performance;t.unstable_now=function(){return i.now()}}else{var l=Date,s=l.now();t.unstable_now=function(){return l.now()-s}}var c=[],u=[],d=1,p=null,f=3,h=!1,m=!1,g=!1,b="function"==typeof setTimeout?setTimeout:null,y="function"==typeof clearTimeout?clearTimeout:null,v="undefined"!=typeof setImmediate?setImmediate:null;function w(e){for(var t=r(u);null!==t;){if(null===t.callback)a(u);else{if(!(t.startTime<=e))break;a(u),t.sortIndex=t.expirationTime,n(c,t)}t=r(u)}}function k(e){if(g=!1,w(e),!m)if(null!==r(c))m=!0,N(x);else{var t=r(u);null!==t&&O(k,t.startTime-e)}}function x(e,n){m=!1,g&&(g=!1,y(E),E=-1),h=!0;var o=f;try{for(w(n),p=r(c);null!==p&&(!(p.expirationTime>n)||e&&!P());){var i=p.callback;if("function"==typeof i){p.callback=null,f=p.priorityLevel;var l=i(p.expirationTime<=n);n=t.unstable_now(),"function"==typeof l?p.callback=l:p===r(c)&&a(c),w(n)}else a(c);p=r(c)}if(null!==p)var s=!0;else{var d=r(u);null!==d&&O(k,d.startTime-n),s=!1}return s}finally{p=null,f=o,h=!1}}"undefined"!=typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);var S,C=!1,T=null,E=-1,_=5,A=-1;function P(){return!(t.unstable_now()-A<_)}function L(){if(null!==T){var e=t.unstable_now();A=e;var n=!0;try{n=T(!0,e)}finally{n?S():(C=!1,T=null)}}else C=!1}if("function"==typeof v)S=function(){v(L)};else if("undefined"!=typeof MessageChannel){var j=new MessageChannel,R=j.port2;j.port1.onmessage=L,S=function(){R.postMessage(null)}}else S=function(){b(L,0)};function N(e){T=e,C||(C=!0,S())}function O(e,n){E=b((function(){e(t.unstable_now())}),n)}t.unstable_IdlePriority=5,t.unstable_ImmediatePriority=1,t.unstable_LowPriority=4,t.unstable_NormalPriority=3,t.unstable_Profiling=null,t.unstable_UserBlockingPriority=2,t.unstable_cancelCallback=function(e){e.callback=null},t.unstable_continueExecution=function(){m||h||(m=!0,N(x))},t.unstable_forceFrameRate=function(e){0>e||125i?(e.sortIndex=o,n(u,e),null===r(c)&&e===r(u)&&(g?(y(E),E=-1):g=!0,O(k,o-i))):(e.sortIndex=l,n(c,e),m||h||(m=!0,N(x))),e},t.unstable_shouldYield=P,t.unstable_wrapCallback=function(e){var t=f;return function(){var n=f;f=t;try{return e.apply(this,arguments)}finally{f=n}}}},3840:(e,t,n)=>{"use strict";e.exports=n(53)},6774:e=>{e.exports=function(e,t,n,r){var a=n?n.call(r,e,t):void 0;if(void 0!==a)return!!a;if(e===t)return!0;if("object"!=typeof e||!e||"object"!=typeof t||!t)return!1;var o=Object.keys(e),i=Object.keys(t);if(o.length!==i.length)return!1;for(var l=Object.prototype.hasOwnProperty.bind(t),s=0;s{"use strict";n.r(t),n.d(t,{default:()=>r});const r={title:"FluentUI Charting Contrib Docsite",tagline:"MD docs related to FluentUI Charting library",favicon:"img/favicon.ico",url:"https://microsoft.github.io",baseUrl:"/fluentui-charting-contrib/",organizationName:"microsoft",projectName:"fluentui-charting-contrib",deploymentBranch:"gh-pages",trailingSlash:!1,staticDirectories:["../../docs/assets","static"],onBrokenLinks:"warn",onBrokenMarkdownLinks:"warn",i18n:{defaultLocale:"en",locales:["en"],path:"i18n",localeConfigs:{}},presets:[["classic",{docs:{path:"../../docs",sidebarPath:"./sidebars.ts",remarkPlugins:[null],rehypePlugins:[null]},theme:{customCss:"./src/css/custom.css"}}]],stylesheets:[{href:"https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css",type:"text/css",integrity:"sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM",crossorigin:"anonymous"}],themeConfig:{image:"img/docusaurus-social-card.jpg",navbar:{title:"FluentUI Charting",logo:{alt:"FluentUI Charting Logo",src:"img/logo.svg"},items:[{type:"docSidebar",sidebarId:"tutorialSidebar",position:"left",label:"Docs"},{href:"https://github.com/microsoft/fluentui-charting-contrib",label:"GitHub",position:"right"}],hideOnScroll:!1},footer:{style:"dark",links:[{title:"Docs",items:[{label:"Docs",to:"/docs/Fluent-React-Charting"}]},{title:"FluentUI",items:[{label:"Public Developer Docsite",href:"https://aka.ms/fluentcharting"},{label:"Github",href:"https://github.com/microsoft/fluentui"}]},{title:"FluentUI Charting Contrib",items:[{label:"GitHub",href:"https://github.com/microsoft/fluentui-charting-contrib"}]}],copyright:"Copyright \xa9 2024 Microsoft"},prism:{theme:{plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},darkTheme:{plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},additionalLanguages:[],magicComments:[{className:"theme-code-block-highlighted-line",line:"highlight-next-line",block:{start:"highlight-start",end:"highlight-end"}}]},algolia:{appId:"XZ2D9M7V2V",apiKey:"dbef9c4c79e37ac05ce104dbd93faeec",indexName:"fluentui-charting-contrib",contextualSearch:!1,searchParameters:{},searchPagePath:"search"},colorMode:{defaultMode:"light",disableSwitch:!1,respectPrefersColorScheme:!1},docs:{versionPersistence:"localStorage",sidebar:{hideable:!1,autoCollapseCategories:!1}},metadata:[],tableOfContents:{minHeadingLevel:2,maxHeadingLevel:3}},baseUrlIssueBanner:!0,onBrokenAnchors:"warn",onDuplicateRoutes:"warn",customFields:{},plugins:[],themes:[],scripts:[],headTags:[],clientModules:[],titleDelimiter:"|",noIndex:!1,markdown:{format:"mdx",mermaid:!1,mdx1Compat:{comments:!0,admonitions:!0,headingIds:!0}}}},7462:(e,t,n)=>{"use strict";function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;tr})},5068:(e,t,n)=>{"use strict";function r(e,t){return r=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},r(e,t)}function a(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,r(e,t)}n.d(t,{Z:()=>a})},3366:(e,t,n)=>{"use strict";function r(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r=0||(a[n]=e[n]);return a}n.d(t,{Z:()=>r})},512:(e,t,n)=>{"use strict";function r(e){var t,n,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;ta});const a=function(){for(var e,t,n=0,a="",o=arguments.length;n{"use strict";n.d(t,{p1:()=>_,y$:()=>ee});var r,a,o,i,l,s,c,u=n(7294),d=n(512),p=Object.create,f=Object.defineProperty,h=Object.defineProperties,m=Object.getOwnPropertyDescriptor,g=Object.getOwnPropertyDescriptors,b=Object.getOwnPropertyNames,y=Object.getOwnPropertySymbols,v=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable,x=(e,t,n)=>t in e?f(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,S=(e,t)=>{for(var n in t||(t={}))w.call(t,n)&&x(e,n,t[n]);if(y)for(var n of y(t))k.call(t,n)&&x(e,n,t[n]);return e},C=(e,t)=>h(e,g(t)),T=(e,t)=>{var n={};for(var r in e)w.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&y)for(var r of y(e))t.indexOf(r)<0&&k.call(e,r)&&(n[r]=e[r]);return n},E=(r={"../../node_modules/.pnpm/prismjs@1.29.0_patch_hash=vrxx3pzkik6jpmgpayxfjunetu/node_modules/prismjs/prism.js"(e,t){var n=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},r={util:{encode:function e(t){return t instanceof a?new a(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/=d.reach);S+=x.value.length,x=x.next){var C=x.value;if(t.length>e.length)return;if(!(C instanceof a)){var T,E=1;if(y){if(!(T=o(k,S,e,b))||T.index>=e.length)break;var _=T.index,A=T.index+T[0].length,P=S;for(P+=x.value.length;_>=P;)P+=(x=x.next).value.length;if(S=P-=x.value.length,x.value instanceof a)continue;for(var L=x;L!==t.tail&&(Pd.reach&&(d.reach=O);var D=x.prev;if(R&&(D=s(t,D,R),S+=R.length),c(t,D,E),x=s(t,D,new a(p,g?r.tokenize(j,g):j,v,j)),N&&s(t,x,N),E>1){var I={cause:p+","+h,reach:O};i(e,t,n,x.prev,S,I),d&&I.reach>d.reach&&(d.reach=I.reach)}}}}}}function l(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function s(e,t,n){var r=t.next,a={value:n,prev:t,next:r};return t.next=a,r.prev=a,e.length++,a}function c(e,t,n){for(var r=t.next,a=0;a"+o.content+""},r}();t.exports=n,n.default=n}},function(){return a||(0,r[b(r)[0]])((a={exports:{}}).exports,a),a.exports}),_=((e,t,n)=>(n=null!=e?p(v(e)):{},((e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of b(t))w.call(e,a)||a===n||f(e,a,{get:()=>t[a],enumerable:!(r=m(t,a))||r.enumerable});return e})(!t&&e&&e.__esModule?n:f(n,"default",{value:e,enumerable:!0}),e)))(E());_.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},_.languages.markup.tag.inside["attr-value"].inside.entity=_.languages.markup.entity,_.languages.markup.doctype.inside["internal-subset"].inside=_.languages.markup,_.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(_.languages.markup.tag,"addInlined",{value:function(e,t){var n;(t=((n=((n={})["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:_.languages[t]},n.cdata=/^$/i,{"included-cdata":{pattern://i,inside:n}}))["language-"+t]={pattern:/[\s\S]+/,inside:_.languages[t]},{}))[e]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:n},_.languages.insertBefore("markup","cdata",t)}}),Object.defineProperty(_.languages.markup.tag,"addAttribute",{value:function(e,t){_.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:_.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),_.languages.html=_.languages.markup,_.languages.mathml=_.languages.markup,_.languages.svg=_.languages.markup,_.languages.xml=_.languages.extend("markup",{}),_.languages.ssml=_.languages.xml,_.languages.atom=_.languages.xml,_.languages.rss=_.languages.xml,o=_,i={pattern:/\\[\\(){}[\]^$+*?|.]/,alias:"escape"},s="(?:[^\\\\-]|"+(l=/\\(?:x[\da-fA-F]{2}|u[\da-fA-F]{4}|u\{[\da-fA-F]+\}|0[0-7]{0,2}|[123][0-7]{2}|c[a-zA-Z]|.)/).source+")",s=RegExp(s+"-"+s),c={pattern:/(<|')[^<>']+(?=[>']$)/,lookbehind:!0,alias:"variable"},o.languages.regex={"char-class":{pattern:/((?:^|[^\\])(?:\\\\)*)\[(?:[^\\\]]|\\[\s\S])*\]/,lookbehind:!0,inside:{"char-class-negation":{pattern:/(^\[)\^/,lookbehind:!0,alias:"operator"},"char-class-punctuation":{pattern:/^\[|\]$/,alias:"punctuation"},range:{pattern:s,inside:{escape:l,"range-punctuation":{pattern:/-/,alias:"operator"}}},"special-escape":i,"char-set":{pattern:/\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},escape:l}},"special-escape":i,"char-set":{pattern:/\.|\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},backreference:[{pattern:/\\(?![123][0-7]{2})[1-9]/,alias:"keyword"},{pattern:/\\k<[^<>']+>/,alias:"keyword",inside:{"group-name":c}}],anchor:{pattern:/[$^]|\\[ABbGZz]/,alias:"function"},escape:l,group:[{pattern:/\((?:\?(?:<[^<>']+>|'[^<>']+'|[>:]|]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},_.languages.javascript=_.languages.extend("clike",{"class-name":[_.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),_.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,_.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp(/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source+/\//.source+"(?:"+/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source+"|"+/(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source+")"+/(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:_.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:_.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:_.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:_.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:_.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),_.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:_.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),_.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),_.languages.markup&&(_.languages.markup.tag.addInlined("script","javascript"),_.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),_.languages.js=_.languages.javascript,_.languages.actionscript=_.languages.extend("javascript",{keyword:/\b(?:as|break|case|catch|class|const|default|delete|do|dynamic|each|else|extends|final|finally|for|function|get|if|implements|import|in|include|instanceof|interface|internal|is|namespace|native|new|null|override|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|use|var|void|while|with)\b/,operator:/\+\+|--|(?:[+\-*\/%^]|&&?|\|\|?|<>?>?|[!=]=?)=?|[~?@]/}),_.languages.actionscript["class-name"].alias="function",delete _.languages.actionscript.parameter,delete _.languages.actionscript["literal-property"],_.languages.markup&&_.languages.insertBefore("actionscript","string",{xml:{pattern:/(^|[^.])<\/?\w+(?:\s+[^\s>\/=]+=("|')(?:\\[\s\S]|(?!\2)[^\\])*\2)*\s*\/?>/,lookbehind:!0,inside:_.languages.markup}}),function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(_),function(e){var t=e.languages.javadoclike={parameter:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*@(?:arg|arguments|param)\s+)\w+/m,lookbehind:!0},keyword:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*|\{)@[a-z][a-zA-Z-]+\b/m,lookbehind:!0},punctuation:/[{}]/};Object.defineProperty(t,"addSupport",{value:function(t,n){(t="string"==typeof t?[t]:t).forEach((function(t){var r=function(e){e.inside||(e.inside={}),e.inside.rest=n},a="doc-comment";if(o=e.languages[t]){var o,i=o[a];if((i=i||(o=e.languages.insertBefore(t,"comment",{"doc-comment":{pattern:/(^|[^\\])\/\*\*[^/][\s\S]*?(?:\*\/|$)/,lookbehind:!0,alias:"comment"}}))[a])instanceof RegExp&&(i=o[a]={pattern:i}),Array.isArray(i))for(var l=0,s=i.length;l|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}}),{pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0}),{pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0});e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|RebeccaPurple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,number:n})}(_),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,r="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",a=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-])(?:[ \t]*(?:(?![#:])|:))*/.source.replace(//g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),o=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function i(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<>[ \t]+)?)(?:<>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return e}));return RegExp(n,t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<>/g,(function(){return r}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<>[ \t]+)?)<>(?=\s*:\s)/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return"(?:"+a+"|"+o+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:i(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:i(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:i(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:i(o),lookbehind:!0,greedy:!0},number:{pattern:i(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(_),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(//g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,a=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return r})),o=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source,i=(e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+a+o+"(?:"+a+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+a+o+")(?:"+a+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+a+")"+o+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+a+"$"),inside:{"table-header":{pattern:RegExp(r),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)|_(?:(?!_))+_)+__\b|\*\*(?:(?!\*)|\*(?:(?!\*))+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)|__(?:(?!_))+__)+_\b|\*(?:(?!\*)|\*\*(?:(?!\*))+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\]))+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,r=t.length;n",quot:'"'},s=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(_),_.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:_.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},_.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,r=t.inside.interpolation,a=r.inside["interpolation-punctuation"],o=r.pattern.source;function i(t,r){if(e.languages[t])return{pattern:RegExp("((?:"+r+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function l(t,n,r){return t={code:t,grammar:n,language:r},e.hooks.run("before-tokenize",t),t.tokens=e.tokenize(t.code,t.grammar),e.hooks.run("after-tokenize",t),t.tokens}function s(t,n,i){var s=e.tokenize(t,{interpolation:{pattern:RegExp(o),lookbehind:!0}}),c=0,u={},d=(s=l(s.map((function(e){if("string"==typeof e)return e;var n,r;for(e=e.content;-1!==t.indexOf((r=c++,n="___"+i.toUpperCase()+"_"+r+"___")););return u[n]=e,n})).join(""),n,i),Object.keys(u));return c=0,function t(n){for(var o=0;o=d.length)return;var i,s,p,f,h,m,g,b=n[o];"string"==typeof b||"string"==typeof b.content?(i=d[c],-1!==(g=(m="string"==typeof b?b:b.content).indexOf(i))&&(++c,s=m.substring(0,g),h=u[i],p=void 0,(f={})["interpolation-punctuation"]=a,3===(f=e.tokenize(h,f)).length&&((p=[1,1]).push.apply(p,l(f[1],e.languages.javascript,"javascript")),f.splice.apply(f,p)),p=new e.Token("interpolation",f,r.alias,h),f=m.substring(g+i.length),h=[],s&&h.push(s),h.push(p),f&&(t(m=[f]),h.push.apply(h,m)),"string"==typeof b?(n.splice.apply(n,[o,1].concat(h)),o+=h.length-1):b.content=h)):(g=b.content,Array.isArray(g)?t(g):t([g]))}}(s),new e.Token(i,s,"language-"+i,t)}e.languages.javascript["template-string"]=[i("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),i("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),i("svg",/\bsvg/.source),i("markdown",/\b(?:markdown|md)/.source),i("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),i("sql",/\bsql/.source),t].filter(Boolean);var c={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function u(e){return"string"==typeof e?e:Array.isArray(e)?e.map(u).join(""):u(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in c&&function t(n){for(var r=0,a=n.length;r]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(_),function(e){var t=e.languages.javascript,n=/\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})+\}/.source,r="(@(?:arg|argument|param|property)\\s+(?:"+n+"\\s+)?)";e.languages.jsdoc=e.languages.extend("javadoclike",{parameter:{pattern:RegExp(r+/(?:(?!\s)[$\w\xA0-\uFFFF.])+(?=\s|$)/.source),lookbehind:!0,inside:{punctuation:/\./}}}),e.languages.insertBefore("jsdoc","keyword",{"optional-parameter":{pattern:RegExp(r+/\[(?:(?!\s)[$\w\xA0-\uFFFF.])+(?:=[^[\]]+)?\](?=\s|$)/.source),lookbehind:!0,inside:{parameter:{pattern:/(^\[)[$\w\xA0-\uFFFF\.]+/,lookbehind:!0,inside:{punctuation:/\./}},code:{pattern:/(=)[\s\S]*(?=\]$)/,lookbehind:!0,inside:t,alias:"language-javascript"},punctuation:/[=[\]]/}},"class-name":[{pattern:RegExp(/(@(?:augments|class|extends|interface|memberof!?|template|this|typedef)\s+(?:\s+)?)[A-Z]\w*(?:\.[A-Z]\w*)*/.source.replace(//g,(function(){return n}))),lookbehind:!0,inside:{punctuation:/\./}},{pattern:RegExp("(@[a-z]+\\s+)"+n),lookbehind:!0,inside:{string:t.string,number:t.number,boolean:t.boolean,keyword:e.languages.typescript.keyword,operator:/=>|\.\.\.|[&|?:*]/,punctuation:/[.,;=<>{}()[\]]/}}],example:{pattern:/(@example\s+(?!\s))(?:[^@\s]|\s+(?!\s))+?(?=\s*(?:\*\s*)?(?:@\w|\*\/))/,lookbehind:!0,inside:{code:{pattern:/^([\t ]*(?:\*\s*)?)\S.*$/m,lookbehind:!0,inside:t,alias:"language-javascript"}}}}),e.languages.javadoclike.addSupport("javascript",e.languages.jsdoc)}(_),function(e){e.languages.flow=e.languages.extend("javascript",{}),e.languages.insertBefore("flow","keyword",{type:[{pattern:/\b(?:[Bb]oolean|Function|[Nn]umber|[Ss]tring|[Ss]ymbol|any|mixed|null|void)\b/,alias:"class-name"}]}),e.languages.flow["function-variable"].pattern=/(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=\s*(?:function\b|(?:\([^()]*\)(?:\s*:\s*\w+)?|(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/i,delete e.languages.flow.parameter,e.languages.insertBefore("flow","operator",{"flow-punctuation":{pattern:/\{\||\|\}/,alias:"punctuation"}}),Array.isArray(e.languages.flow.keyword)||(e.languages.flow.keyword=[e.languages.flow.keyword]),e.languages.flow.keyword.unshift({pattern:/(^|[^$]\b)(?:Class|declare|opaque|type)\b(?!\$)/,lookbehind:!0},{pattern:/(^|[^$]\B)\$(?:Diff|Enum|Exact|Keys|ObjMap|PropertyType|Record|Shape|Subtype|Supertype|await)\b(?!\$)/,lookbehind:!0})}(_),_.languages.n4js=_.languages.extend("javascript",{keyword:/\b(?:Array|any|boolean|break|case|catch|class|const|constructor|continue|debugger|declare|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|module|new|null|number|package|private|protected|public|return|set|static|string|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/}),_.languages.insertBefore("n4js","constant",{annotation:{pattern:/@+\w+/,alias:"operator"}}),_.languages.n4jsd=_.languages.n4js,function(e){function t(e,t){return RegExp(e.replace(//g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:(?:\s*,\s*(?:\*\s*as\s+|\{[^{}]*\}))?|\*\s*as\s+|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],r=0;r*\.{3}(?:[^{}]|)*\})/.source;function o(e,t){return e=e.replace(//g,(function(){return n})).replace(//g,(function(){return r})).replace(//g,(function(){return a})),RegExp(e,t)}function i(t){for(var n=[],r=0;r"!==a.content[a.content.length-1].content&&n.push({tagName:l(a.content[0].content[1]),openedBraces:0}):0+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:o(//.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:o(/=/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var l=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(l).join(""):""};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||i(e.tokens)}))}(_),function(e){var t=e.util.clone(e.languages.typescript);(t=(e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"],e.languages.tsx.tag)).pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+t.pattern.source+")",t.pattern.flags),t.lookbehind=!0}(_),_.languages.swift={comment:{pattern:/(^|[^\\:])(?:\/\/.*|\/\*(?:[^/*]|\/(?!\*)|\*(?!\/)|\/\*(?:[^*]|\*(?!\/))*\*\/)*\*\/)/,lookbehind:!0,greedy:!0},"string-literal":[{pattern:RegExp(/(^|[^"#])/.source+"(?:"+/"(?:\\(?:\((?:[^()]|\([^()]*\))*\)|\r\n|[^(])|[^\\\r\n"])*"/.source+"|"+/"""(?:\\(?:\((?:[^()]|\([^()]*\))*\)|[^(])|[^\\"]|"(?!""))*"""/.source+")"+/(?!["#])/.source),lookbehind:!0,greedy:!0,inside:{interpolation:{pattern:/(\\\()(?:[^()]|\([^()]*\))*(?=\))/,lookbehind:!0,inside:null},"interpolation-punctuation":{pattern:/^\)|\\\($/,alias:"punctuation"},punctuation:/\\(?=[\r\n])/,string:/[\s\S]+/}},{pattern:RegExp(/(^|[^"#])(#+)/.source+"(?:"+/"(?:\\(?:#+\((?:[^()]|\([^()]*\))*\)|\r\n|[^#])|[^\\\r\n])*?"/.source+"|"+/"""(?:\\(?:#+\((?:[^()]|\([^()]*\))*\)|[^#])|[^\\])*?"""/.source+")\\2"),lookbehind:!0,greedy:!0,inside:{interpolation:{pattern:/(\\#+\()(?:[^()]|\([^()]*\))*(?=\))/,lookbehind:!0,inside:null},"interpolation-punctuation":{pattern:/^\)|\\#+\($/,alias:"punctuation"},string:/[\s\S]+/}}],directive:{pattern:RegExp(/#/.source+"(?:"+/(?:elseif|if)\b/.source+"(?:[ \t]*"+/(?:![ \t]*)?(?:\b\w+\b(?:[ \t]*\((?:[^()]|\([^()]*\))*\))?|\((?:[^()]|\([^()]*\))*\))(?:[ \t]*(?:&&|\|\|))?/.source+")+|"+/(?:else|endif)\b/.source+")"),alias:"property",inside:{"directive-name":/^#\w+/,boolean:/\b(?:false|true)\b/,number:/\b\d+(?:\.\d+)*\b/,operator:/!|&&|\|\||[<>]=?/,punctuation:/[(),]/}},literal:{pattern:/#(?:colorLiteral|column|dsohandle|file(?:ID|Literal|Path)?|function|imageLiteral|line)\b/,alias:"constant"},"other-directive":{pattern:/#\w+\b/,alias:"property"},attribute:{pattern:/@\w+/,alias:"atrule"},"function-definition":{pattern:/(\bfunc\s+)\w+/,lookbehind:!0,alias:"function"},label:{pattern:/\b(break|continue)\s+\w+|\b[a-zA-Z_]\w*(?=\s*:\s*(?:for|repeat|while)\b)/,lookbehind:!0,alias:"important"},keyword:/\b(?:Any|Protocol|Self|Type|actor|as|assignment|associatedtype|associativity|async|await|break|case|catch|class|continue|convenience|default|defer|deinit|didSet|do|dynamic|else|enum|extension|fallthrough|fileprivate|final|for|func|get|guard|higherThan|if|import|in|indirect|infix|init|inout|internal|is|isolated|lazy|left|let|lowerThan|mutating|none|nonisolated|nonmutating|open|operator|optional|override|postfix|precedencegroup|prefix|private|protocol|public|repeat|required|rethrows|return|right|safe|self|set|some|static|struct|subscript|super|switch|throw|throws|try|typealias|unowned|unsafe|var|weak|where|while|willSet)\b/,boolean:/\b(?:false|true)\b/,nil:{pattern:/\bnil\b/,alias:"constant"},"short-argument":/\$\d+\b/,omit:{pattern:/\b_\b/,alias:"keyword"},number:/\b(?:[\d_]+(?:\.[\de_]+)?|0x[a-f0-9_]+(?:\.[a-f0-9p_]+)?|0b[01_]+|0o[0-7_]+)\b/i,"class-name":/\b[A-Z](?:[A-Z_\d]*[a-z]\w*)?\b/,function:/\b[a-z_]\w*(?=\s*\()/i,constant:/\b(?:[A-Z_]{2,}|k[A-Z][A-Za-z_]+)\b/,operator:/[-+*/%=!<>&|^~?]+|\.[.\-+*/%=!<>&|^~?]+/,punctuation:/[{}[\]();,.:\\]/},_.languages.swift["string-literal"].forEach((function(e){e.inside.interpolation.inside=_.languages.swift})),function(e){e.languages.kotlin=e.languages.extend("clike",{keyword:{pattern:/(^|[^.])\b(?:abstract|actual|annotation|as|break|by|catch|class|companion|const|constructor|continue|crossinline|data|do|dynamic|else|enum|expect|external|final|finally|for|fun|get|if|import|in|infix|init|inline|inner|interface|internal|is|lateinit|noinline|null|object|open|operator|out|override|package|private|protected|public|reified|return|sealed|set|super|suspend|tailrec|this|throw|to|try|typealias|val|var|vararg|when|where|while)\b/,lookbehind:!0},function:[{pattern:/(?:`[^\r\n`]+`|\b\w+)(?=\s*\()/,greedy:!0},{pattern:/(\.)(?:`[^\r\n`]+`|\w+)(?=\s*\{)/,lookbehind:!0,greedy:!0}],number:/\b(?:0[xX][\da-fA-F]+(?:_[\da-fA-F]+)*|0[bB][01]+(?:_[01]+)*|\d+(?:_\d+)*(?:\.\d+(?:_\d+)*)?(?:[eE][+-]?\d+(?:_\d+)*)?[fFL]?)\b/,operator:/\+[+=]?|-[-=>]?|==?=?|!(?:!|==?)?|[\/*%<>]=?|[?:]:?|\.\.|&&|\|\||\b(?:and|inv|or|shl|shr|ushr|xor)\b/}),delete e.languages.kotlin["class-name"];var t={"interpolation-punctuation":{pattern:/^\$\{?|\}$/,alias:"punctuation"},expression:{pattern:/[\s\S]+/,inside:e.languages.kotlin}};e.languages.insertBefore("kotlin","string",{"string-literal":[{pattern:/"""(?:[^$]|\$(?:(?!\{)|\{[^{}]*\}))*?"""/,alias:"multiline",inside:{interpolation:{pattern:/\$(?:[a-z_]\w*|\{[^{}]*\})/i,inside:t},string:/[\s\S]+/}},{pattern:/"(?:[^"\\\r\n$]|\\.|\$(?:(?!\{)|\{[^{}]*\}))*"/,alias:"singleline",inside:{interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$(?:[a-z_]\w*|\{[^{}]*\})/i,lookbehind:!0,inside:t},string:/[\s\S]+/}}],char:{pattern:/'(?:[^'\\\r\n]|\\(?:.|u[a-fA-F0-9]{0,4}))'/,greedy:!0}}),delete e.languages.kotlin.string,e.languages.insertBefore("kotlin","keyword",{annotation:{pattern:/\B@(?:\w+:)?(?:[A-Z]\w*|\[[^\]]+\])/,alias:"builtin"}}),e.languages.insertBefore("kotlin","function",{label:{pattern:/\b\w+@|@\w+\b/,alias:"symbol"}}),e.languages.kt=e.languages.kotlin,e.languages.kts=e.languages.kotlin}(_),_.languages.c=_.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),_.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),_.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},_.languages.c.string],char:_.languages.c.char,comment:_.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:_.languages.c}}}}),_.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete _.languages.c.boolean,_.languages.objectivec=_.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete _.languages.objectivec["class-name"],_.languages.objc=_.languages.objectivec,_.languages.reason=_.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),_.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete _.languages.reason.function,function(e){for(var t=/\/\*(?:[^*/]|\*(?!\/)|\/(?!\*)|)*\*\//.source,n=0;n<2;n++)t=t.replace(//g,(function(){return t}));t=t.replace(//g,(function(){return/[^\s\S]/.source})),e.languages.rust={comment:[{pattern:RegExp(/(^|[^\\])/.source+t),lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/b?"(?:\\[\s\S]|[^\\"])*"|b?r(#*)"(?:[^"]|"(?!\1))*"\1/,greedy:!0},char:{pattern:/b?'(?:\\(?:x[0-7][\da-fA-F]|u\{(?:[\da-fA-F]_*){1,6}\}|.)|[^\\\r\n\t'])'/,greedy:!0},attribute:{pattern:/#!?\[(?:[^\[\]"]|"(?:\\[\s\S]|[^\\"])*")*\]/,greedy:!0,alias:"attr-name",inside:{string:null}},"closure-params":{pattern:/([=(,:]\s*|\bmove\s*)\|[^|]*\||\|[^|]*\|(?=\s*(?:\{|->))/,lookbehind:!0,greedy:!0,inside:{"closure-punctuation":{pattern:/^\||\|$/,alias:"punctuation"},rest:null}},"lifetime-annotation":{pattern:/'\w+/,alias:"symbol"},"fragment-specifier":{pattern:/(\$\w+:)[a-z]+/,lookbehind:!0,alias:"punctuation"},variable:/\$\w+/,"function-definition":{pattern:/(\bfn\s+)\w+/,lookbehind:!0,alias:"function"},"type-definition":{pattern:/(\b(?:enum|struct|trait|type|union)\s+)\w+/,lookbehind:!0,alias:"class-name"},"module-declaration":[{pattern:/(\b(?:crate|mod)\s+)[a-z][a-z_\d]*/,lookbehind:!0,alias:"namespace"},{pattern:/(\b(?:crate|self|super)\s*)::\s*[a-z][a-z_\d]*\b(?:\s*::(?:\s*[a-z][a-z_\d]*\s*::)*)?/,lookbehind:!0,alias:"namespace",inside:{punctuation:/::/}}],keyword:[/\b(?:Self|abstract|as|async|await|become|box|break|const|continue|crate|do|dyn|else|enum|extern|final|fn|for|if|impl|in|let|loop|macro|match|mod|move|mut|override|priv|pub|ref|return|self|static|struct|super|trait|try|type|typeof|union|unsafe|unsized|use|virtual|where|while|yield)\b/,/\b(?:bool|char|f(?:32|64)|[ui](?:8|16|32|64|128|size)|str)\b/],function:/\b[a-z_]\w*(?=\s*(?:::\s*<|\())/,macro:{pattern:/\b\w+!/,alias:"property"},constant:/\b[A-Z_][A-Z_\d]+\b/,"class-name":/\b[A-Z]\w*\b/,namespace:{pattern:/(?:\b[a-z][a-z_\d]*\s*::\s*)*\b[a-z][a-z_\d]*\s*::(?!\s*<)/,inside:{punctuation:/::/}},number:/\b(?:0x[\dA-Fa-f](?:_?[\dA-Fa-f])*|0o[0-7](?:_?[0-7])*|0b[01](?:_?[01])*|(?:(?:\d(?:_?\d)*)?\.)?\d(?:_?\d)*(?:[Ee][+-]?\d+)?)(?:_?(?:f32|f64|[iu](?:8|16|32|64|size)?))?\b/,boolean:/\b(?:false|true)\b/,punctuation:/->|\.\.=|\.{1,3}|::|[{}[\];(),:]/,operator:/[-+*\/%!^]=?|=[=>]?|&[&=]?|\|[|=]?|<>?=?|[@?]/},e.languages.rust["closure-params"].inside.rest=e.languages.rust,e.languages.rust.attribute.inside.string=e.languages.rust.string}(_),_.languages.go=_.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),_.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete _.languages.go["class-name"],function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!)\w+(?:\s*\.\s*\w+)*\b/.source.replace(//g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!)\w+/.source.replace(//g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/(?:\s*:\s*)?|:\s*/.source.replace(//g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(_),_.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern://,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},_.languages.python["string-interpolation"].inside.interpolation.inside.rest=_.languages.python,_.languages.py=_.languages.python;((e,t)=>{for(var n in t)f(e,n,{get:t[n],enumerable:!0})})({},{dracula:()=>A,duotoneDark:()=>P,duotoneLight:()=>L,github:()=>j,jettwaveDark:()=>q,jettwaveLight:()=>G,nightOwl:()=>R,nightOwlLight:()=>N,oceanicNext:()=>I,okaidia:()=>M,oneDark:()=>Z,oneLight:()=>V,palenight:()=>F,shadesOfPurple:()=>B,synthwave84:()=>z,ultramin:()=>U,vsDark:()=>$,vsLight:()=>H});var A={plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},P={plain:{backgroundColor:"#2a2734",color:"#9a86fd"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#6c6783"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#e09142"}},{types:["property","function"],style:{color:"#9a86fd"}},{types:["tag-id","selector","atrule-id"],style:{color:"#eeebff"}},{types:["attr-name"],style:{color:"#c4b9fe"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule","placeholder","variable"],style:{color:"#ffcc99"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#c4b9fe"}}]},L={plain:{backgroundColor:"#faf8f5",color:"#728fcb"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#b6ad9a"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#063289"}},{types:["property","function"],style:{color:"#b29762"}},{types:["tag-id","selector","atrule-id"],style:{color:"#2d2006"}},{types:["attr-name"],style:{color:"#896724"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule"],style:{color:"#728fcb"}},{types:["placeholder","variable"],style:{color:"#93abdc"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#896724"}}]},j={plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},R={plain:{color:"#d6deeb",backgroundColor:"#011627"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(99, 119, 119)",fontStyle:"italic"}},{types:["string","url"],style:{color:"rgb(173, 219, 103)"}},{types:["variable"],style:{color:"rgb(214, 222, 235)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation"],style:{color:"rgb(199, 146, 234)"}},{types:["selector","doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(255, 203, 139)"}},{types:["tag","operator","keyword"],style:{color:"rgb(127, 219, 202)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["property"],style:{color:"rgb(128, 203, 196)"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}}]},N={plain:{color:"#403f53",backgroundColor:"#FBFBFB"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(72, 118, 214)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(152, 159, 177)",fontStyle:"italic"}},{types:["string","builtin","char","constant","url"],style:{color:"rgb(72, 118, 214)"}},{types:["variable"],style:{color:"rgb(201, 103, 101)"}},{types:["number"],style:{color:"rgb(170, 9, 130)"}},{types:["punctuation"],style:{color:"rgb(153, 76, 195)"}},{types:["function","selector","doctype"],style:{color:"rgb(153, 76, 195)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(17, 17, 17)"}},{types:["tag"],style:{color:"rgb(153, 76, 195)"}},{types:["operator","property","keyword","namespace"],style:{color:"rgb(12, 150, 155)"}},{types:["boolean"],style:{color:"rgb(188, 84, 84)"}}]},O="#c5a5c5",D="#8dc891",I={plain:{backgroundColor:"#282c34",color:"#ffffff"},styles:[{types:["attr-name"],style:{color:O}},{types:["attr-value"],style:{color:D}},{types:["comment","block-comment","prolog","doctype","cdata","shebang"],style:{color:"#999999"}},{types:["property","number","function-name","constant","symbol","deleted"],style:{color:"#5a9bcf"}},{types:["boolean"],style:{color:"#ff8b50"}},{types:["tag"],style:{color:"#fc929e"}},{types:["string"],style:{color:D}},{types:["punctuation"],style:{color:D}},{types:["selector","char","builtin","inserted"],style:{color:"#D8DEE9"}},{types:["function"],style:{color:"#79b6f2"}},{types:["operator","entity","url","variable"],style:{color:"#d7deea"}},{types:["keyword"],style:{color:O}},{types:["atrule","class-name"],style:{color:"#FAC863"}},{types:["important"],style:{fontWeight:"400"}},{types:["bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}}]},M={plain:{color:"#f8f8f2",backgroundColor:"#272822"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"#f92672",fontStyle:"italic"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"#8292a2",fontStyle:"italic"}},{types:["string","url"],style:{color:"#a6e22e"}},{types:["variable"],style:{color:"#f8f8f2"}},{types:["number"],style:{color:"#ae81ff"}},{types:["builtin","char","constant","function","class-name"],style:{color:"#e6db74"}},{types:["punctuation"],style:{color:"#f8f8f2"}},{types:["selector","doctype"],style:{color:"#a6e22e",fontStyle:"italic"}},{types:["tag","operator","keyword"],style:{color:"#66d9ef"}},{types:["boolean"],style:{color:"#ae81ff"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)",opacity:.7}},{types:["tag","property"],style:{color:"#f92672"}},{types:["attr-name"],style:{color:"#a6e22e !important"}},{types:["doctype"],style:{color:"#8292a2"}},{types:["rule"],style:{color:"#e6db74"}}]},F={plain:{color:"#bfc7d5",backgroundColor:"#292d3e"},styles:[{types:["comment"],style:{color:"rgb(105, 112, 152)",fontStyle:"italic"}},{types:["string","inserted"],style:{color:"rgb(195, 232, 141)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation","selector"],style:{color:"rgb(199, 146, 234)"}},{types:["variable"],style:{color:"rgb(191, 199, 213)"}},{types:["class-name","attr-name"],style:{color:"rgb(255, 203, 107)"}},{types:["tag","deleted"],style:{color:"rgb(255, 85, 114)"}},{types:["operator"],style:{color:"rgb(137, 221, 255)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["keyword"],style:{fontStyle:"italic"}},{types:["doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}},{types:["url"],style:{color:"rgb(221, 221, 221)"}}]},B={plain:{color:"#9EFEFF",backgroundColor:"#2D2A55"},styles:[{types:["changed"],style:{color:"rgb(255, 238, 128)"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)"}},{types:["comment"],style:{color:"rgb(179, 98, 255)",fontStyle:"italic"}},{types:["punctuation"],style:{color:"rgb(255, 255, 255)"}},{types:["constant"],style:{color:"rgb(255, 98, 140)"}},{types:["string","url"],style:{color:"rgb(165, 255, 144)"}},{types:["variable"],style:{color:"rgb(255, 238, 128)"}},{types:["number","boolean"],style:{color:"rgb(255, 98, 140)"}},{types:["attr-name"],style:{color:"rgb(255, 180, 84)"}},{types:["keyword","operator","property","namespace","tag","selector","doctype"],style:{color:"rgb(255, 157, 0)"}},{types:["builtin","char","constant","function","class-name"],style:{color:"rgb(250, 208, 0)"}}]},z={plain:{backgroundColor:"linear-gradient(to bottom, #2a2139 75%, #34294f)",backgroundImage:"#34294f",color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"},styles:[{types:["comment","block-comment","prolog","doctype","cdata"],style:{color:"#495495",fontStyle:"italic"}},{types:["punctuation"],style:{color:"#ccc"}},{types:["tag","attr-name","namespace","number","unit","hexcode","deleted"],style:{color:"#e2777a"}},{types:["property","selector"],style:{color:"#72f1b8",textShadow:"0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475"}},{types:["function-name"],style:{color:"#6196cc"}},{types:["boolean","selector-id","function"],style:{color:"#fdfdfd",textShadow:"0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975"}},{types:["class-name","maybe-class-name","builtin"],style:{color:"#fff5f6",textShadow:"0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75"}},{types:["constant","symbol"],style:{color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"}},{types:["important","atrule","keyword","selector-class"],style:{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575"}},{types:["string","char","attr-value","regex","variable"],style:{color:"#f87c32"}},{types:["parameter"],style:{fontStyle:"italic"}},{types:["entity","url"],style:{color:"#67cdcc"}},{types:["operator"],style:{color:"ffffffee"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["entity"],style:{cursor:"help"}},{types:["inserted"],style:{color:"green"}}]},U={plain:{color:"#282a2e",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(197, 200, 198)"}},{types:["string","number","builtin","variable"],style:{color:"rgb(150, 152, 150)"}},{types:["class-name","function","tag","attr-name"],style:{color:"rgb(40, 42, 46)"}}]},$={plain:{color:"#9CDCFE",backgroundColor:"#1E1E1E"},styles:[{types:["prolog"],style:{color:"rgb(0, 0, 128)"}},{types:["comment"],style:{color:"rgb(106, 153, 85)"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"rgb(86, 156, 214)"}},{types:["number","inserted"],style:{color:"rgb(181, 206, 168)"}},{types:["constant"],style:{color:"rgb(100, 102, 149)"}},{types:["attr-name","variable"],style:{color:"rgb(156, 220, 254)"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"rgb(206, 145, 120)"}},{types:["selector"],style:{color:"rgb(215, 186, 125)"}},{types:["tag"],style:{color:"rgb(78, 201, 176)"}},{types:["tag"],languages:["markup"],style:{color:"rgb(86, 156, 214)"}},{types:["punctuation","operator"],style:{color:"rgb(212, 212, 212)"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"rgb(220, 220, 170)"}},{types:["class-name"],style:{color:"rgb(78, 201, 176)"}},{types:["char"],style:{color:"rgb(209, 105, 105)"}}]},H={plain:{color:"#000000",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(0, 128, 0)"}},{types:["builtin"],style:{color:"rgb(0, 112, 193)"}},{types:["number","variable","inserted"],style:{color:"rgb(9, 134, 88)"}},{types:["operator"],style:{color:"rgb(0, 0, 0)"}},{types:["constant","char"],style:{color:"rgb(129, 31, 63)"}},{types:["tag"],style:{color:"rgb(128, 0, 0)"}},{types:["attr-name"],style:{color:"rgb(255, 0, 0)"}},{types:["deleted","string"],style:{color:"rgb(163, 21, 21)"}},{types:["changed","punctuation"],style:{color:"rgb(4, 81, 165)"}},{types:["function","keyword"],style:{color:"rgb(0, 0, 255)"}},{types:["class-name"],style:{color:"rgb(38, 127, 153)"}}]},q={plain:{color:"#f8fafc",backgroundColor:"#011627"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#569CD6"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#f8fafc"}},{types:["attr-name","variable"],style:{color:"#9CDCFE"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#cbd5e1"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#D4D4D4"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#7dd3fc"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},G={plain:{color:"#0f172a",backgroundColor:"#f1f5f9"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#0c4a6e"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#0f172a"}},{types:["attr-name","variable"],style:{color:"#0c4a6e"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#64748b"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#475569"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#0e7490"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},Z={plain:{backgroundColor:"hsl(220, 13%, 18%)",color:"hsl(220, 14%, 71%)",textShadow:"0 1px rgba(0, 0, 0, 0.3)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(220, 10%, 40%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(220, 14%, 71%)"}},{types:["attr-name","class-name","maybe-class-name","boolean","constant","number","atrule"],style:{color:"hsl(29, 54%, 61%)"}},{types:["keyword"],style:{color:"hsl(286, 60%, 67%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(355, 65%, 65%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value"],style:{color:"hsl(95, 38%, 62%)"}},{types:["variable","operator","function"],style:{color:"hsl(207, 82%, 66%)"}},{types:["url"],style:{color:"hsl(187, 47%, 55%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(220, 14%, 71%)"}}]},V={plain:{backgroundColor:"hsl(230, 1%, 98%)",color:"hsl(230, 8%, 24%)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(230, 4%, 64%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(230, 8%, 24%)"}},{types:["attr-name","class-name","boolean","constant","number","atrule"],style:{color:"hsl(35, 99%, 36%)"}},{types:["keyword"],style:{color:"hsl(301, 63%, 40%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(5, 74%, 59%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value","punctuation"],style:{color:"hsl(119, 34%, 47%)"}},{types:["variable","operator","function"],style:{color:"hsl(221, 87%, 60%)"}},{types:["url"],style:{color:"hsl(198, 99%, 37%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(230, 8%, 24%)"}}]},W=(e,t)=>{const{plain:n}=e,r=e.styles.reduce(((e,n)=>{const{languages:r,style:a}=n;return r&&!r.includes(t)||n.types.forEach((t=>{const n=S(S({},e[t]),a);e[t]=n})),e}),{});return r.root=n,r.plain=C(S({},n),{backgroundColor:void 0}),r},K=/\r\n|\r|\n/,Q=e=>{0===e.length?e.push({types:["plain"],content:"\n",empty:!0}):1===e.length&&""===e[0].content&&(e[0].content="\n",e[0].empty=!0)},Y=(e,t)=>{const n=e.length;return n>0&&e[n-1]===t?e:e.concat(t)},X=e=>{const t=[[]],n=[e],r=[0],a=[e.length];let o=0,i=0,l=[];const s=[l];for(;i>-1;){for(;(o=r[i]++)0?c:["plain"],e=u):(c=Y(c,u.type),u.alias&&(c=Y(c,u.alias)),e=u.content),"string"!=typeof e){i++,t.push(c),n.push(e),r.push(0),a.push(e.length);continue}const d=e.split(K),p=d.length;l.push({types:c,content:d[0]});for(let t=1;t{const o=t.toLowerCase(),i=((e,t)=>{const[n,r]=(0,u.useState)(W(t,e)),a=(0,u.useRef)(),o=(0,u.useRef)();return(0,u.useEffect)((()=>{t===a.current&&e===o.current||(a.current=t,o.current=e,r(W(t,e)))}),[e,t]),n})(o,r),l=(e=>(0,u.useCallback)((t=>{var n=t,{className:r,style:a,line:o}=n,i=T(n,["className","style","line"]);const l=C(S({},i),{className:(0,d.Z)("token-line",r)});return"object"==typeof e&&"plain"in e&&(l.style=e.plain),"object"==typeof a&&(l.style=S(S({},l.style||{}),a)),l}),[e]))(i),s=(e=>{const t=(0,u.useCallback)((({types:t,empty:n})=>{if(null!=e)return 1===t.length&&"plain"===t[0]?null!=n?{display:"inline-block"}:void 0:1===t.length&&null!=n?e[t[0]]:Object.assign(null!=n?{display:"inline-block"}:{},...t.map((t=>e[t])))}),[e]);return(0,u.useCallback)((e=>{var n=e,{token:r,className:a,style:o}=n,i=T(n,["token","className","style"]);const l=C(S({},i),{className:(0,d.Z)("token",...r.types,a),children:r.content,style:t(r)});return null!=o&&(l.style=S(S({},l.style||{}),o)),l}),[t])})(i),c=(({prism:e,code:t,grammar:n,language:r})=>{const a=(0,u.useRef)(e);return(0,u.useMemo)((()=>{if(null==n)return X([t]);const e={code:t,grammar:n,language:r,tokens:[]};return a.current.hooks.run("before-tokenize",e),e.tokens=a.current.tokenize(t,n),a.current.hooks.run("after-tokenize",e),X(e.tokens)}),[t,n,r])})({prism:a,language:o,code:n,grammar:a.languages[o]});return e({tokens:c,className:`prism-code language-${o}`,style:null!=i?i.root:{},getLineProps:l,getTokenProps:s})},ee=e=>(0,u.createElement)(J,C(S({},e),{prism:e.prism||_,theme:e.theme||$,code:e.code,language:e.language}))},8776:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=!0,a="Invariant failed";function o(e,t){if(!e){if(r)throw new Error(a);var n="function"==typeof t?t():t,o=n?"".concat(a,": ").concat(n):a;throw new Error(o)}}},7529:e=>{"use strict";e.exports={}},6887:e=>{"use strict";e.exports=JSON.parse('{"/fluentui-charting-contrib/search-d67":{"__comp":"1a4e3797","__context":{"plugin":"5fc975be"}},"/fluentui-charting-contrib/docs-559":{"__comp":"5e95c892","__context":{"plugin":"a85ccfbf"}},"/fluentui-charting-contrib/docs-f07":{"__comp":"a7bd4aaa","version":"935f2afb"},"/fluentui-charting-contrib/docs-a8f":{"__comp":"a94703ab"},"/fluentui-charting-contrib/docs/Accessibility-9b7":{"__comp":"17896441","content":"6fe236e0"},"/fluentui-charting-contrib/docs/CHANGELOG-84b":{"__comp":"17896441","content":"ec9b348c"},"/fluentui-charting-contrib/docs/Charting-Concepts/AreaChart-440":{"__comp":"17896441","content":"544aba92"},"/fluentui-charting-contrib/docs/Charting-Concepts/DonutChart-82a":{"__comp":"17896441","content":"df751193"},"/fluentui-charting-contrib/docs/Charting-Concepts/GaugeChart-7e8":{"__comp":"17896441","content":"80060540"},"/fluentui-charting-contrib/docs/Charting-Concepts/GroupedVerticalBarChart-7d1":{"__comp":"17896441","content":"1ff5abae"},"/fluentui-charting-contrib/docs/Charting-Concepts/HeatMapChart-23a":{"__comp":"17896441","content":"712b8a2d"},"/fluentui-charting-contrib/docs/Charting-Concepts/HorizontalBarChart-a8f":{"__comp":"17896441","content":"4c3c7f6c"},"/fluentui-charting-contrib/docs/Charting-Concepts/LineChart-df4":{"__comp":"17896441","content":"62692344"},"/fluentui-charting-contrib/docs/Charting-Concepts/SankeyChart-3ab":{"__comp":"17896441","content":"1d29b0d8"},"/fluentui-charting-contrib/docs/Charting-Concepts/SparklineChart-1ee":{"__comp":"17896441","content":"e1621294"},"/fluentui-charting-contrib/docs/Charting-Concepts/StackedBarChart-530":{"__comp":"17896441","content":"5181bfc2"},"/fluentui-charting-contrib/docs/Charting-Concepts/VerticalBarChart-28a":{"__comp":"17896441","content":"44a464d7"},"/fluentui-charting-contrib/docs/Charting-Concepts/VerticalStackedBarChart-b6b":{"__comp":"17896441","content":"b7f64af1"},"/fluentui-charting-contrib/docs/colors-ef0":{"__comp":"17896441","content":"10c2b1cf"},"/fluentui-charting-contrib/docs/Contributor Guide-387":{"__comp":"17896441","content":"b0e8dd6d"},"/fluentui-charting-contrib/docs/creating-date-objects-for-chart-data-d31":{"__comp":"17896441","content":"c1fd7385"},"/fluentui-charting-contrib/docs/Debugging-a60":{"__comp":"17896441","content":"fdebbd26"},"/fluentui-charting-contrib/docs/Detailed Implementation Steps-7b4":{"__comp":"17896441","content":"918c9c28"},"/fluentui-charting-contrib/docs/Implementation Best Practices-bf6":{"__comp":"17896441","content":"a4b720fd"},"/fluentui-charting-contrib/docs/implementing-2-to-1-spacing-3a6":{"__comp":"17896441","content":"53fd9a32"},"/fluentui-charting-contrib/docs/Overview-7e4":{"__comp":"17896441","content":"ddc35001"},"/fluentui-charting-contrib/docs/Start Developing-764":{"__comp":"17896441","content":"100d50c4"},"/fluentui-charting-contrib/docs/Technical Details-111":{"__comp":"17896441","content":"7ef89a43"},"/fluentui-charting-contrib/docs/Test Plans/AreaChart/ComponentTests-490":{"__comp":"17896441","content":"fa9519d0"},"/fluentui-charting-contrib/docs/Test Plans/DonutChart/ComponentTests-371":{"__comp":"17896441","content":"790ff6d5"},"/fluentui-charting-contrib/docs/Test Plans/GaugeChart/ComponentTests-d89":{"__comp":"17896441","content":"e9780fb0"},"/fluentui-charting-contrib/docs/Test Plans/GroupedVerticalBarChart/ComponentTests-201":{"__comp":"17896441","content":"78e65ac0"},"/fluentui-charting-contrib/docs/Test Plans/HeatMapChart/ComponentTests-926":{"__comp":"17896441","content":"6ede8325"},"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChart/ComponentTests-048":{"__comp":"17896441","content":"6158391e"},"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChart/UnitTests-8d7":{"__comp":"17896441","content":"43c91bec"},"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChartWithAxis/ComponentTests-41f":{"__comp":"17896441","content":"e8c0cc48"},"/fluentui-charting-contrib/docs/Test Plans/HorizontalBarChartWithAxis/UnitTests-8d9":{"__comp":"17896441","content":"a62d60fb"},"/fluentui-charting-contrib/docs/Test Plans/LineChart/ComponentTests-c6a":{"__comp":"17896441","content":"35f90ace"},"/fluentui-charting-contrib/docs/Test Plans/MultiStackedBarChart/componentTests-4c6":{"__comp":"17896441","content":"72f1352f"},"/fluentui-charting-contrib/docs/Test Plans/SankeyChart/ComponentTests-fff":{"__comp":"17896441","content":"2bd67647"},"/fluentui-charting-contrib/docs/Test Plans/StackedBarChart/ComponentTests-c60":{"__comp":"17896441","content":"c81dfe5f"},"/fluentui-charting-contrib/docs/Test Plans/TestingGuide-348":{"__comp":"17896441","content":"b0683616"},"/fluentui-charting-contrib/docs/Test Plans/Utilities/UnitTests-bfd":{"__comp":"17896441","content":"82e69e4a"},"/fluentui-charting-contrib/docs/Test Plans/VerticalBarChart/ComponentTests-a74":{"__comp":"17896441","content":"8f2faa25"},"/fluentui-charting-contrib/docs/Test Plans/VerticalStackedBarChart/ComponentTests-25a":{"__comp":"17896441","content":"41748239"},"/fluentui-charting-contrib/docs/Testing Strategy-37b":{"__comp":"17896441","content":"785e1e6a"},"/fluentui-charting-contrib/docs/Testing Unpublished Library Version-b2f":{"__comp":"17896441","content":"1b37b4b0"},"/fluentui-charting-contrib/-c50":{"__comp":"1df93b7f","__context":{"plugin":"25929091"},"config":"5e9f5e1a"}}')}},e=>{e.O(0,[532],(()=>{return t=7221,e(e.s=t);var t}));e.O()}]);
\ No newline at end of file
diff --git a/assets/js/main.0aa75249.js.LICENSE.txt b/assets/js/main.fd07d10c.js.LICENSE.txt
similarity index 100%
rename from assets/js/main.0aa75249.js.LICENSE.txt
rename to assets/js/main.fd07d10c.js.LICENSE.txt
diff --git a/assets/js/runtime~main.307509f1.js b/assets/js/runtime~main.307509f1.js
deleted file mode 100644
index ddcd890234..0000000000
--- a/assets/js/runtime~main.307509f1.js
+++ /dev/null
@@ -1 +0,0 @@
-(()=>{"use strict";var e,a,t,f,c,r={},d={};function b(e){var a=d[e];if(void 0!==a)return a.exports;var t=d[e]={id:e,loaded:!1,exports:{}};return r[e].call(t.exports,t,t.exports,b),t.loaded=!0,t.exports}b.m=r,b.c=d,e=[],b.O=(a,t,f,c)=>{if(!t){var r=1/0;for(i=0;i=c)&&Object.keys(b.O).every((e=>b.O[e](t[o])))?t.splice(o--,1):(d=!1,c0&&e[i-1][2]>c;i--)e[i]=e[i-1];e[i]=[t,f,c]},b.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return b.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,b.t=function(e,f){if(1&f&&(e=this(e)),8&f)return e;if("object"==typeof e&&e){if(4&f&&e.__esModule)return e;if(16&f&&"function"==typeof e.then)return e}var c=Object.create(null);b.r(c);var r={};a=a||[null,t({}),t([]),t(t)];for(var d=2&f&&e;"object"==typeof d&&!~a.indexOf(d);d=t(d))Object.getOwnPropertyNames(d).forEach((a=>r[a]=()=>e[a]));return r.default=()=>e,b.d(c,r),c},b.d=(e,a)=>{for(var t in a)b.o(a,t)&&!b.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},b.f={},b.e=e=>Promise.all(Object.keys(b.f).reduce(((a,t)=>(b.f[t](e,a),a)),[])),b.u=e=>"assets/js/"+({53:"935f2afb",150:"41748239",774:"544aba92",917:"ec9b348c",1125:"8f2faa25",1283:"25929091",1321:"80060540",1351:"e9780fb0",1483:"1b37b4b0",1605:"6158391e",1888:"35f90ace",1914:"10c2b1cf",2190:"a85ccfbf",2357:"43c91bec",2408:"fa9519d0",2637:"6ede8325",2871:"c81dfe5f",2907:"78e65ac0",3072:"72f1352f",3237:"1df93b7f",3469:"918c9c28",3861:"1d29b0d8",4014:"e8c0cc48",4145:"82e69e4a",4368:"a94703ab",4630:"53fd9a32",4798:"a62d60fb",5112:"b0683616",5724:"100d50c4",6863:"712b8a2d",6942:"6fe236e0",7659:"5181bfc2",7706:"5fc975be",7918:"17896441",7920:"1a4e3797",8171:"c1fd7385",8466:"7ef89a43",8518:"a7bd4aaa",8673:"b0e8dd6d",8864:"fdebbd26",8968:"ddc35001",9013:"2bd67647",9159:"785e1e6a",9330:"62692344",9368:"4c3c7f6c",9428:"a4b720fd",9661:"5e95c892",9860:"790ff6d5"}[e]||e)+"."+{53:"19b11408",150:"308d9309",774:"032b542b",917:"44716512",1125:"1f8e5cc5",1283:"4bcc76f7",1321:"f9288bde",1351:"8b54cb62",1426:"ada98236",1483:"5ea1e3c2",1605:"5ebdff7e",1772:"05b37fcf",1888:"d08ce316",1914:"b046c885",2190:"d4e7bdd2",2357:"db589e06",2408:"e23dd3d0",2637:"4dd5a347",2871:"55a95f78",2907:"59b2ef74",3072:"311a6085",3237:"b286c556",3469:"442e3710",3861:"77873fa9",4014:"9c908003",4145:"47151c70",4368:"978f186e",4630:"1618df65",4798:"49014181",5112:"c91f045c",5724:"369553a2",6863:"0fec8f3f",6942:"ded0e513",6945:"73cb8f6d",7659:"87d8f065",7706:"8d26ad56",7918:"eba4c161",7920:"1065628c",8171:"19344f10",8466:"37a63f5c",8518:"5fdeee4a",8673:"14bdb836",8864:"6a0dca0e",8894:"d8733546",8968:"5310a204",9013:"758121c9",9159:"c6992023",9330:"d438a31c",9368:"a4278219",9428:"7a47f5f7",9661:"53db30f1",9860:"5e42560f"}[e]+".js",b.miniCssF=e=>{},b.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),b.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),f={},c="docsite:",b.l=(e,a,t,r)=>{if(f[e])f[e].push(a);else{var d,o;if(void 0!==t)for(var n=document.getElementsByTagName("script"),i=0;i{d.onerror=d.onload=null,clearTimeout(s);var c=f[e];if(delete f[e],d.parentNode&&d.parentNode.removeChild(d),c&&c.forEach((e=>e(t))),a)return a(t)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:d}),12e4);d.onerror=l.bind(null,d.onerror),d.onload=l.bind(null,d.onload),o&&document.head.appendChild(d)}},b.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},b.p="/fluentui-charting-contrib/",b.gca=function(e){return e={17896441:"7918",25929091:"1283",41748239:"150",62692344:"9330",80060540:"1321","935f2afb":"53","544aba92":"774",ec9b348c:"917","8f2faa25":"1125",e9780fb0:"1351","1b37b4b0":"1483","6158391e":"1605","35f90ace":"1888","10c2b1cf":"1914",a85ccfbf:"2190","43c91bec":"2357",fa9519d0:"2408","6ede8325":"2637",c81dfe5f:"2871","78e65ac0":"2907","72f1352f":"3072","1df93b7f":"3237","918c9c28":"3469","1d29b0d8":"3861",e8c0cc48:"4014","82e69e4a":"4145",a94703ab:"4368","53fd9a32":"4630",a62d60fb:"4798",b0683616:"5112","100d50c4":"5724","712b8a2d":"6863","6fe236e0":"6942","5181bfc2":"7659","5fc975be":"7706","1a4e3797":"7920",c1fd7385:"8171","7ef89a43":"8466",a7bd4aaa:"8518",b0e8dd6d:"8673",fdebbd26:"8864",ddc35001:"8968","2bd67647":"9013","785e1e6a":"9159","4c3c7f6c":"9368",a4b720fd:"9428","5e95c892":"9661","790ff6d5":"9860"}[e]||e,b.p+b.u(e)},(()=>{var e={1303:0,532:0};b.f.j=(a,t)=>{var f=b.o(e,a)?e[a]:void 0;if(0!==f)if(f)t.push(f[2]);else if(/^(1303|532)$/.test(a))e[a]=0;else{var c=new Promise(((t,c)=>f=e[a]=[t,c]));t.push(f[2]=c);var r=b.p+b.u(a),d=new Error;b.l(r,(t=>{if(b.o(e,a)&&(0!==(f=e[a])&&(e[a]=void 0),f)){var c=t&&("load"===t.type?"missing":t.type),r=t&&t.target&&t.target.src;d.message="Loading chunk "+a+" failed.\n("+c+": "+r+")",d.name="ChunkLoadError",d.type=c,d.request=r,f[1](d)}}),"chunk-"+a,a)}},b.O.j=a=>0===e[a];var a=(a,t)=>{var f,c,r=t[0],d=t[1],o=t[2],n=0;if(r.some((a=>0!==e[a]))){for(f in d)b.o(d,f)&&(b.m[f]=d[f]);if(o)var i=o(b)}for(a&&a(t);n{"use strict";var e,a,f,t,c,r={},d={};function b(e){var a=d[e];if(void 0!==a)return a.exports;var f=d[e]={id:e,loaded:!1,exports:{}};return r[e].call(f.exports,f,f.exports,b),f.loaded=!0,f.exports}b.m=r,b.c=d,e=[],b.O=(a,f,t,c)=>{if(!f){var r=1/0;for(i=0;i=c)&&Object.keys(b.O).every((e=>b.O[e](f[o])))?f.splice(o--,1):(d=!1,c0&&e[i-1][2]>c;i--)e[i]=e[i-1];e[i]=[f,t,c]},b.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return b.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,b.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var c=Object.create(null);b.r(c);var r={};a=a||[null,f({}),f([]),f(f)];for(var d=2&t&&e;"object"==typeof d&&!~a.indexOf(d);d=f(d))Object.getOwnPropertyNames(d).forEach((a=>r[a]=()=>e[a]));return r.default=()=>e,b.d(c,r),c},b.d=(e,a)=>{for(var f in a)b.o(a,f)&&!b.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},b.f={},b.e=e=>Promise.all(Object.keys(b.f).reduce(((a,f)=>(b.f[f](e,a),a)),[])),b.u=e=>"assets/js/"+({53:"935f2afb",150:"41748239",774:"544aba92",917:"ec9b348c",1125:"8f2faa25",1283:"25929091",1321:"80060540",1351:"e9780fb0",1483:"1b37b4b0",1605:"6158391e",1888:"35f90ace",1914:"10c2b1cf",2190:"a85ccfbf",2357:"43c91bec",2408:"fa9519d0",2637:"6ede8325",2871:"c81dfe5f",2907:"78e65ac0",3072:"72f1352f",3237:"1df93b7f",3469:"918c9c28",3633:"e1621294",3861:"1d29b0d8",4014:"e8c0cc48",4145:"82e69e4a",4368:"a94703ab",4630:"53fd9a32",4798:"a62d60fb",5112:"b0683616",5671:"1ff5abae",5724:"100d50c4",5966:"df751193",6662:"44a464d7",6863:"712b8a2d",6942:"6fe236e0",7659:"5181bfc2",7706:"5fc975be",7918:"17896441",7920:"1a4e3797",8171:"c1fd7385",8466:"7ef89a43",8518:"a7bd4aaa",8673:"b0e8dd6d",8751:"b7f64af1",8864:"fdebbd26",8968:"ddc35001",9013:"2bd67647",9159:"785e1e6a",9330:"62692344",9368:"4c3c7f6c",9428:"a4b720fd",9661:"5e95c892",9860:"790ff6d5"}[e]||e)+"."+{53:"2bcfdc71",150:"308d9309",774:"70e03cf8",917:"44716512",1125:"1f8e5cc5",1283:"4bcc76f7",1321:"a76e6a01",1351:"8b54cb62",1426:"ada98236",1483:"5ea1e3c2",1605:"5ebdff7e",1772:"05b37fcf",1888:"d08ce316",1914:"b046c885",2190:"d4e7bdd2",2357:"db589e06",2408:"e23dd3d0",2637:"4dd5a347",2871:"55a95f78",2907:"59b2ef74",3072:"311a6085",3237:"b286c556",3469:"442e3710",3633:"274910be",3861:"8fa1bc20",4014:"9c908003",4145:"47151c70",4368:"978f186e",4630:"1618df65",4798:"49014181",5112:"c91f045c",5671:"b0c49283",5724:"369553a2",5966:"11c160c7",6662:"ef547f4b",6863:"b2c49b65",6942:"ded0e513",6945:"73cb8f6d",7659:"b1d31591",7706:"8d26ad56",7918:"eba4c161",7920:"1065628c",8171:"19344f10",8466:"37a63f5c",8518:"5fdeee4a",8673:"14bdb836",8751:"7bb0cce2",8864:"e19eb6a0",8894:"d8733546",8968:"5310a204",9013:"758121c9",9159:"c6992023",9330:"d438a31c",9368:"a4278219",9428:"7a47f5f7",9661:"53db30f1",9860:"5e42560f"}[e]+".js",b.miniCssF=e=>{},b.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),b.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),t={},c="docsite:",b.l=(e,a,f,r)=>{if(t[e])t[e].push(a);else{var d,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i{d.onerror=d.onload=null,clearTimeout(s);var c=t[e];if(delete t[e],d.parentNode&&d.parentNode.removeChild(d),c&&c.forEach((e=>e(f))),a)return a(f)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:d}),12e4);d.onerror=l.bind(null,d.onerror),d.onload=l.bind(null,d.onload),o&&document.head.appendChild(d)}},b.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},b.p="/fluentui-charting-contrib/",b.gca=function(e){return e={17896441:"7918",25929091:"1283",41748239:"150",62692344:"9330",80060540:"1321","935f2afb":"53","544aba92":"774",ec9b348c:"917","8f2faa25":"1125",e9780fb0:"1351","1b37b4b0":"1483","6158391e":"1605","35f90ace":"1888","10c2b1cf":"1914",a85ccfbf:"2190","43c91bec":"2357",fa9519d0:"2408","6ede8325":"2637",c81dfe5f:"2871","78e65ac0":"2907","72f1352f":"3072","1df93b7f":"3237","918c9c28":"3469",e1621294:"3633","1d29b0d8":"3861",e8c0cc48:"4014","82e69e4a":"4145",a94703ab:"4368","53fd9a32":"4630",a62d60fb:"4798",b0683616:"5112","1ff5abae":"5671","100d50c4":"5724",df751193:"5966","44a464d7":"6662","712b8a2d":"6863","6fe236e0":"6942","5181bfc2":"7659","5fc975be":"7706","1a4e3797":"7920",c1fd7385:"8171","7ef89a43":"8466",a7bd4aaa:"8518",b0e8dd6d:"8673",b7f64af1:"8751",fdebbd26:"8864",ddc35001:"8968","2bd67647":"9013","785e1e6a":"9159","4c3c7f6c":"9368",a4b720fd:"9428","5e95c892":"9661","790ff6d5":"9860"}[e]||e,b.p+b.u(e)},(()=>{var e={1303:0,532:0};b.f.j=(a,f)=>{var t=b.o(e,a)?e[a]:void 0;if(0!==t)if(t)f.push(t[2]);else if(/^(1303|532)$/.test(a))e[a]=0;else{var c=new Promise(((f,c)=>t=e[a]=[f,c]));f.push(t[2]=c);var r=b.p+b.u(a),d=new Error;b.l(r,(f=>{if(b.o(e,a)&&(0!==(t=e[a])&&(e[a]=void 0),t)){var c=f&&("load"===f.type?"missing":f.type),r=f&&f.target&&f.target.src;d.message="Loading chunk "+a+" failed.\n("+c+": "+r+")",d.name="ChunkLoadError",d.type=c,d.request=r,t[1](d)}}),"chunk-"+a,a)}},b.O.j=a=>0===e[a];var a=(a,f)=>{var t,c,r=f[0],d=f[1],o=f[2],n=0;if(r.some((a=>0!==e[a]))){for(t in d)b.o(d,t)&&(b.m[t]=d[t]);if(o)var i=o(b)}for(a&&a(f);n
Accessibility | FluentUI Charting Contrib Docsite The react charting library is accessibility MAS C compliant.
diff --git a/docs/CHANGELOG.html b/docs/CHANGELOG.html
index c36609c812..39a7d82436 100644
--- a/docs/CHANGELOG.html
+++ b/docs/CHANGELOG.html
@@ -5,8 +5,8 @@
Release Log | FluentUI Charting Contrib Docsite
-
-
+
+
On this page
Release Log
diff --git a/docs/Charting-Concepts/AreaChart.html b/docs/Charting-Concepts/AreaChart.html
index 93e57713d2..bc5dee8811 100644
--- a/docs/Charting-Concepts/AreaChart.html
+++ b/docs/Charting-Concepts/AreaChart.html
@@ -5,11 +5,11 @@
Contributor guide: Area Chart | FluentUI Charting Contrib Docsite
-
-
+
+
-
Charting Concepts Contributor guide: Area Chart On this page