npm - @corva/ui - Versions diffs - 3.75.0-0 → 3.75.0-2 - Mend

@corva/ui 3.75.0-0 → 3.75.0-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (283) hide show

package/mcp-server/server.mjs CHANGED Viewed

@@ -248,7 +248,7 @@ const validateDsn = dsn => {
 const MCP_SERVER_VERSION = '1.4.1';
-var version = "3.75.0-0";
+var version = "3.75.0-2";
 const CORVA_UI_VERSION = version;
@@ -7965,7 +7965,7 @@ var componentsV2Data = [{
   keywords: ["datepickernext", "date", "date-tme", "month", "picker", "range", "support", "provides", "generic", "datepickervalue", "isrange"]
 }];
-var componentsV1Data = [{name:"AdvancedSlider",modulePath:"components/AdvancedSlider",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AdvancedSlider",specifier:"@corva/ui/components",exportName:"AdvancedSlider"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"min",type:"number",required:true,description:"Must be strictly smaller than `max`"},{name:"max",type:"number",required:true,description:"Must be strictly bigger than `min`"},{name:"value",type:"[number, number]",required:true,description:""},{name:"onChange",type:"(values: [number, number]) => void",required:false,description:""},{name:"orientation",type:"'horizontal' | 'vertical'",required:false,description:"",enumValues:["horizontal","vertical"]},{name:"valueFormatter",type:"(value: number) => number",required:false,description:"Formats value before passing it to onChange"},{name:"displayFormatter",type:"(value: number) => ReactNode",required:false,description:"Formats value before displaying"},{name:"editableHandles",type:"boolean",required:false,description:""},{name:"onStop",type:"() => void",required:false,description:"Called when user stops changing values"},{name:"reversed",type:"boolean",required:false,description:"Reverses axis"},{name:"handlePosition",type:"'left' | 'right' | 'top' | 'bottom'",required:false,description:"Positions \"floating\" handle (outside of track). Positioned at the `bottom` for horizontal orientation, and at the `right` for vertical",enumValues:["left","right","top","bottom"]},{name:"handleClasses",type:"Record<string, string>",required:false,description:""},{name:"minimal",type:"boolean",required:false,description:"Hides values in handles"},{name:"dimension",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<AdvancedSlider {...props} />"},{name:"Sizes",description:"Component supports 3 sizes through a `dimension` prop:\n\n- `small` (default)\n- `medium`\n- `large`\n",code:"<SbColumn alignItems=\"stretch\">\n    <AdvancedSlider dimension=\"small\" min={0} max={10_000} value={[3_000, 7_000]} />\n    <AdvancedSlider dimension=\"medium\" min={0} max={10_000} value={[3_000, 7_000]} />\n    <AdvancedSlider dimension=\"large\" min={0} max={10_000} value={[3_000, 7_000]} />\n  </SbColumn>"},{name:"Reversed",description:"Component can be displayed in a reversed mode through the use of `reversed` prop",code:"<div style={{ height: '300px' }}>\n    <AdvancedSlider min={0} max={10_000} value={[3_000, 7_000]} reversed />\n  </div>"},{name:"Vertical",description:"Component can be displayed as a vertical slider through the use of `orientation` prop\n\nIn this case the component will take all available vertical space",code:"<div style={{ height: '300px' }}>\n    <AdvancedSlider\n      min={0}\n      max={10_000}\n      value={[3_000, 5_000]}\n      orientation=\"vertical\"\n      displayFormatter={value => new Intl.NumberFormat().format(value).toString()}\n    />\n  </div>"},{name:"WithCharts",description:"Component can be used overlaid over a chart. See example",code:"{\n  const chartRef = useRef();\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <ChartWrapper chartRef={chartRef}>\n        <HighchartsReact\n          highcharts={Highcharts}\n          options={chartOptions}\n          containerProps={{ style: { height: '100%', width: '100%' } }}\n          ref={chartRef}\n        />\n      </ChartWrapper>\n      <div\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          bottom: 0,\n        }}\n      >\n        <AdvancedSlider\n          dimension=\"medium\"\n          orientation=\"vertical\"\n          min={2000}\n          max={10_000}\n          value={[3_000, 5_000]}\n        />\n      </div>\n    </div>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AdvancedSlider/AdvancedSlider.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=31925%3A122776",keywords:["advancedslider"]},{name:"AnchorsList",modulePath:"components/AnchorsList",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AnchorsList",specifier:"@corva/ui/components",exportName:"AnchorsList"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"title",type:"string",required:false,description:""},{name:"items",type:"array",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AnchorsList/AnchorsList.js",keywords:["anchorslist"]},{name:"AppIcon",modulePath:"components/AppIcon",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppIcon",specifier:"@corva/ui/components",exportName:"AppIcon"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"alt",type:"string",required:false,description:""},{name:"appDevType",type:"'ui' | 'be' | 'beIdle'",required:false,description:"",enumValues:["ui","be","beIdle"]},{name:"className",type:"string",required:false,description:""},{name:"'data-testid'",type:"string",required:false,description:""},{name:"height",type:"number",required:false,description:""},{name:"iconUrl",type:"string | null",required:false,description:""},{name:"radius",type:"number",required:false,description:""},{name:"segment",type:"string[] | string",required:false,description:""},{name:"width",type:"number",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AppIcon/AppIcon.tsx",keywords:["appicon"]},{name:"AppVersionsSelect",modulePath:"components/AppVersionsSelect",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppVersionsSelect",specifier:"@corva/ui/components",exportName:"AppVersionsSelect"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"value",type:"custom",required:false,description:""},{name:"onChange",type:"function",required:true,description:""},{name:"appId",type:"custom",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AppVersionsSelect/AppVersionsSelect.js",keywords:["appversionsselect"]},{name:"AssetNameLabel",modulePath:"components/AssetNameLabel",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"AssetNameLabel",specifier:"@corva/ui/components/AssetNameLabel/AssetNameLabel",form:"named",exportName:"AssetNameLabel"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"AssetNameLabel"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetNameLabel/AssetNameLabel.tsx",keywords:["assetnamelabel"]},{name:"AssetsMultipleSelector",modulePath:"components/AssetsMultipleSelector",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AssetsMultipleSelector",specifier:"@corva/ui/components",exportName:"AssetsMultipleSelector"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"selectedAssets",type:"[] | Asset[]",required:true,description:"array of asset objects with required id and name fields."},{name:"onChange",type:"(assets: Asset[] | []) => void",required:true,description:"callback fires on asset selection with array of all selected assets."},{name:"label",type:"string",required:true,description:"label for autocomplete input."},{name:"type",type:"'program' | 'rig' | 'well' | 'frac_fleet' | 'drillout_unit' | 'pad' | 'assets'",required:true,description:"type of asset.",enumValues:["program","rig","well","frac_fleet","drillout_unit","pad","assets"]},{name:"className",type:"string",required:false,description:"css for root component."},{name:"customRequestQueryParams",type:"Record<string, unknown> & {\n    fields?: string[];\n    per_page?: number | string;\n  }",required:false,description:"custom query params for assets request like fields, per_page."},{name:"classes",type:"any",required:false,description:"material ui autocomplete classes."}],propsList:{kind:"complete"},examples:[{name:"AssetsMultipleSelector",description:"",code:"{\n  const [value, setValue] = useState([]);\n\n  const onAssetChange = assets => {\n    setValue(assets);\n  };\n\n  useEffect(() => {\n    setValue([]);\n  }, [type]);\n\n  return (\n    <div style={{ width }}>\n      <AssetsSelectorComponent\n        selectedAssets={value}\n        onChange={onAssetChange}\n        label={startCase(type)}\n        type={type}\n        key={type}\n      />\n    </div>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetsMultipleSelector/AssetsMultipleSelector.tsx",keywords:["assetsmultipleselector"]},{name:"AttachFileButton",modulePath:"components/AttachFileButton",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"AttachFileButton",specifier:"@corva/ui/components/AttachFileButton/AttachFileButton",form:"named",exportName:"AttachFileButton"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"inputRef",type:"RefObject<HTMLInputElement>",required:true,description:""},{name:"onClick",type:"() => void",required:true,description:""},{name:"onFileSelect",type:"(event: ChangeEvent<HTMLInputElement>) => void",required:true,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"tooltip",type:"string",required:false,description:""},{name:"accept",type:"string",required:false,description:""},{name:"multiple",type:"boolean",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AttachFileButton/AttachFileButton.tsx",keywords:["attachfilebutton"]},{name:"Attachment",modulePath:"components/Attachment",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Attachment",specifier:"@corva/ui/components",exportName:"Attachment"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"attachmentUrl",type:"string",required:true,description:""},{name:"attachmentSize",type:"number",required:false,description:""},{name:"displayName",type:"string",required:false,description:""},{name:"fileName",type:"string",required:false,description:""},{name:"size",type:"enum",required:false,description:"",enumValues:["small","medium"]},{name:"classes",type:"object",required:false,description:""},{name:"small",type:"boolean",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Attachment/index.js",keywords:["attachment"]},{name:"AttachmentLightbox",modulePath:"components/AttachmentLightbox",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"AttachmentLightbox",specifier:"@corva/ui/components/AttachmentLightbox/AttachmentLightbox",form:"named",exportName:"AttachmentLightbox"},category:"v1",description:"Full-size preview for a comment’s attachments. The header carries the file name, its size, Download, and an overflow menu; media zooms with the buttons, the wheel or a pinch and drags to pan; documents render inline (PDF, CSV, XLSX, TXT, JSON) or offer a download card. The strip along the bottom steps through the rest of the set — click a tile, use the arrows, or press ← / →.",isExperimental:true,isDeprecated:false,props:[{name:"items",type:"AttachmentPreviewItem[]",required:true,description:""},{name:"activeId",type:"AttachmentPreviewItem['id'] | null",required:true,description:"`null` keeps the lightbox closed."},{name:"onActiveIdChange",type:"(id: AttachmentPreviewItem['id']) => void",required:true,description:""},{name:"onClose",type:"() => void",required:true,description:""},{name:"onShare",type:"(item: AttachmentPreviewItem) => void",required:false,description:"Adds \"Share file\" to the overflow menu."},{name:"title",type:"ReactNode",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Demo items={ITEMS} onShare={item => console.log('share', item)} />"},{name:"SingleAttachment",description:"",code:"<Demo items={[ITEMS[0]]} />"},{name:"WithoutInlinePreview",description:"",code:"<Demo items={[ITEMS[3]]} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AttachmentLightbox/AttachmentLightbox.tsx",figmaUrl:"https://www.figma.com/file/g7HMsT490usxg8oBs5olcD/Comment-Tool?node-id=3474-55198",keywords:["attachmentlightbox","full-size","preview","comment","attachments","header","carries","file","name","size","download"]},{name:"AttachmentPreview",modulePath:"components/AttachmentPreview",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AttachmentPreview",specifier:"@corva/ui/components",exportName:"AttachmentPreview"},category:"v1",description:"Horizontal row of attachment tiles for the comment input — image / video thumbnails and file-type cards (`FileIcon` + name + extension), with a hover remove (✕). Layout reused from the Chat MessageInput file preview. Passing `onReorder` turns the row into a drag-to-reorder list: hold a tile (or focus it and press Space) to pick it up, then drop it on the insertion bar.",isExperimental:true,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"AttachmentPreview"},examples:[{name:"Default",description:"",code:"<div style={{ background: '#1c1c1c', padding: 24, width: 420 }}>\n    <AttachmentPreview\n      onRemove={() => {}}\n      items={[\n        { id: 1, name: 'log.png', kind: 'image', src: img },\n        { id: 2, name: 'run.mp4', kind: 'video', src: img },\n        { id: 3, name: 'Corva report.xls', kind: 'file' },\n        { id: 4, name: 'notes.pdf', kind: 'file' },\n      ]}\n    />\n  </div>"},{name:"Reorderable",description:"",code:"{\n  const [items, setItems] = useState(REORDERABLE);\n\n  return (\n    <div style={{ background: '#1c1c1c', padding: 24, width: 420 }}>\n      <AttachmentPreview\n        items={items}\n        onRemove={id => setItems(prev => prev.filter(item => item.id !== id))}\n        onReorder={orderedIds =>\n          setItems(prev =>\n            orderedIds.map(\n              id => prev.find(item => String(item.id) === String(id)) as Props['items'][number]\n            )\n          )\n        }\n      />\n    </div>\n  );\n}"},{name:"Uploading",description:"",code:"<div style={{ background: '#1c1c1c', padding: 24, width: 420 }}>\n    <AttachmentPreview\n      onRemove={() => {}}\n      items={[\n        { id: 1, name: 'log.png', kind: 'image', src: img, isUploading: true },\n        { id: 2, name: 'Corva report.xls', kind: 'file', isUploading: true },\n      ]}\n    />\n  </div>"},{name:"Downloadable",description:"",code:"<div style={{ background: '#1c1c1c', padding: 24, width: 420 }}>\n    <AttachmentPreview\n      items={[\n        { id: 1, name: 'Corva report.xls', kind: 'file', downloadUrl: img },\n        { id: 2, name: 'notes.pdf', kind: 'file', downloadUrl: img },\n      ]}\n    />\n  </div>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AttachmentPreview/AttachmentPreview.tsx",figmaUrl:"https://www.figma.com/file/g7HMsT490usxg8oBs5olcD/Comment-Tool?node-id=2799-44081",keywords:["attachmentpreview","horizontal","attachment","tiles","comment","input","image","video","thumbnails","file-type","cards"]},{name:"Autocomplete",modulePath:"components/Autocomplete",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Autocomplete",specifier:"@corva/ui/components",exportName:"Autocomplete"},category:"v1",description:"Wrapper over MUI's `<Autocomplete/>` component for selecting values from a predefined list, with an ability to search for entries",isExperimental:false,isDeprecated:false,props:[{name:"options",type:"(object | string)[]",required:true,description:""},{name:"renderInput",type:"(params: any) => ReactNode",required:true,description:"Renders input"},{name:"value",type:"object | string",required:false,description:""},{name:"size",type:"MuiAutocompleteProps<any, any, any, any>['size']",required:false,description:""},{name:"isCreatable",type:"boolean",required:false,description:"Works only with strings as `options`. If `true`, `onChange` has the following signature:<br/>\n```\n(value: string, wasCreated: boolean) => void;\n```"},{name:"getOptionLabel",type:"(option: object | string) => string",required:true,description:"Used for searching the options list by default"},{name:"renderOption",type:"(option: object | string, params: { selected: boolean; inputValue: string }) => string",required:false,description:"Required when working with objects as `options`."},{name:"onInputChange",type:"(event: ChangeEvent<{}>, value: string, action: 'input' | 'reset' | 'clear') => void",required:false,description:""},{name:"onChange",type:"(event: ChangeEvent<{}>, value: object | string, reason: 'create-option' | 'select-option' | 'remove-option' | 'clear' | 'blur') => void",required:false,description:""},{name:"classes",type:"Record<string, string>",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"loading",type:"boolean",required:false,description:""},{name:"loadingText",type:"ReactNode",required:false,description:""},{name:"getOptionDisabled",type:"(option: object | string) => boolean",required:false,description:""},{name:"disableCloseOnSelect",type:"boolean",required:false,description:"If `true` - prevents Autocomplete from closing on select"},{name:"multiple",type:"boolean",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit< MuiAutocompleteProps<any, any, any, any>, | 'options' | 'renderInput' | 'value' | 'size' | 'isCreatable' | 'getOptionLabel' | 'renderOption' | 'onInputChange' | 'onChange' | 'classes' | 'className' | 'loading' | 'loadingText' | 'getOptionDisabled' | 'disableCloseOnSelect' | 'multiple' >"]},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<Option>();\n  return (\n    <Autocomplete\n      {...props}\n      value={value}\n      onChange={(e, newValue, ...rest) => {\n        setValue(newValue as Option);\n        props.onChange?.(e, newValue, ...rest);\n      }}\n      renderInput={params => <TextField {...params} />}\n      getOptionLabel={option => (option as Option).name}\n      renderOption={option => (option as Option).name}\n    />\n  );\n}"},{name:"InputOptions",description:"Input-related options should be done through `renderInput` prop",code:"{\n  return (\n    <Autocomplete\n      value={null}\n      options={Options}\n      getOptionLabel={option => (option as Option).name}\n      renderOption={option => (option as Option).name}\n      renderInput={params => (\n        <TextField {...params} label=\"Field Label\" placeholder=\"Field placeholder\" />\n      )}\n    />\n  );\n}"},{name:"Sizes",description:"Input size can be controlled through `size` prop.",code:"{\n  return (\n    <SbRow>\n      <Autocomplete\n        value={Options[1]}\n        size=\"small\"\n        options={Options}\n        renderInput={params => <TextField {...params} />}\n        getOptionLabel={option => (option as Option).name}\n        renderOption={option => (option as Option).name}\n      />\n      <Autocomplete\n        value={Options[1]}\n        size=\"medium\"\n        options={Options}\n        renderInput={params => <TextField {...params} />}\n        getOptionLabel={option => (option as Option).name}\n        renderOption={option => (option as Option).name}\n      />\n    </SbRow>\n  );\n}"},{name:"LoadingState",description:"Use `loading` and `loadingText` props to show a custom message when some data is being loaded in the background",code:"{\n  return (\n    <Autocomplete\n      value={null}\n      options={[]}\n      renderInput={params => <TextField {...params} />}\n      getOptionLabel={option => (option as Option).name}\n      renderOption={option => (option as Option).name}\n      loading\n      loadingText={\n        <>\n          Can't you see, I'm <u>loading</u>!\n        </>\n      }\n    />\n  );\n}"},{name:"DisabledOptions",description:"Use `getOptionDisabled` prop to tell which options are disabled",code:"{\n  return (\n    <Autocomplete\n      value={null}\n      options={Options}\n      renderInput={params => <TextField {...params} />}\n      getOptionLabel={option => (option as Option).name}\n      renderOption={option => (option as Option).name}\n      getOptionDisabled={option => (option as Option).id === '2'}\n    />\n  );\n}"},{name:"Creatable",description:"Works only with string `options`",code:"{\n  const [options, setOptions] = useState(Options.map((option: Option) => option.name));\n  const [value, setValue] = useState<string>();\n\n  return (\n    <Autocomplete\n      options={options}\n      renderInput={params => <TextField {...params} />}\n      value={value}\n      isCreatable\n      getOptionLabel={i => i as string}\n      onChange={(value: any, wasCreated) => {\n        console.log('onChange', value, wasCreated);\n\n        if (wasCreated) {\n          setOptions(prev => [...prev, value as string]);\n        }\n\n        setValue(value);\n      }}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Autocomplete/Autocomplete.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A7954&mode=dev",keywords:["autocomplete","search","typeahead","suggest","filter","wrapper","over","component","selecting","values","predefined","list","ability"]},{name:"Avatar",modulePath:"components/Avatar/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Avatar",specifier:"@corva/ui/components",exportName:"Avatar"},category:"v1",description:"Used to display user's avatar or initials",isExperimental:false,isDeprecated:false,props:[{name:"displayName",type:"string",required:true,description:""},{name:"showTooltip",type:"boolean",required:false,description:""},{name:"size",type:"number",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"imgSrc",type:"string",required:false,description:""},{name:"alt",type:"string",required:false,description:""},{name:"'data-testid'",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Avatar {...props} />"},{name:"TextSize",description:"Text size is calculated by the following formula: `Math.floor(avatarSize / 2)`\n\nHowever, there are \"fixed\" avatar sizes: `24`, `32`, `40`, `48`, `128`, and `200`, for which their own font sizes are defined",code:"{\n  const sizes = [12, 24, 28, 32, 36, 40, 48, 100, 128, 180, 200];\n  return (\n    <SbColumn>\n      {sizes.map(size => (\n        <SbRow key={size} alignItems=\"center\">\n          {size}px\n          <Avatar size={size} displayName=\"Ian Moone\" />\n        </SbRow>\n      ))}\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Avatar/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105%3A59473",keywords:["avatar","user","profile","image","icon","used","display","initials"]},{name:"BICOffsetPickerDialog",modulePath:"components/BICOffsetPickerDialog",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BICOffsetPickerDialog",specifier:"@corva/ui/components",exportName:"BICOffsetPickerDialog"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"defaultSubjectWell",type:"object",required:false,description:""},{name:"offsetSetting",type:"object",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""},{name:"isOpen",type:"boolean",required:true,description:""},{name:"onClose",type:"function",required:true,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"addWellsUsabilityInfo",type:"function",required:false,description:""},{name:"unusableWellAlarm",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/BICOffsetPickerDialog/index.js",keywords:["bicoffsetpickerdialog"]},{name:"Breadcrumbs",modulePath:"components/Breadcrumbs",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Breadcrumbs",specifier:"@corva/ui/components",exportName:"Breadcrumbs"},category:"v1",description:"Used as a hierarchical navigation element at the tp of the page",isExperimental:false,isDeprecated:false,props:[{name:"pathItems",type:"{ text: string; href?: string }[]",required:true,description:""},{name:"classes",type:"Record<string, string>",required:false,description:""},{name:"withBackIcon",type:"boolean",required:false,description:""},{name:"separator",type:"ReactNode",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Breadcrumbs {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Breadcrumbs/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=31967%3A122781&mode=dev",keywords:["breadcrumbs","navigation","path","trail","breadcrumb","used","hierarchical","element","page"]},{name:"Button",modulePath:"components/Button/components/Button/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Button",specifier:"@corva/ui/components",exportName:"Button"},category:"v1",description:"A wrapper around Material UI v4 `Button`. Read more information on the [MUI docs page](https://v4.mui.com/components/buttons/#button)",isExperimental:false,isDeprecated:false,props:[{name:"color",type:"'inherit' | 'primary' | 'default'",required:false,description:"",enumValues:["inherit","primary","default"]},{name:"variant",type:"'text' | 'contained'",required:false,description:"",enumValues:["text","contained"]},{name:"variation",type:"Variation",required:false,description:""}],propsList:{kind:"partial",undescended:["Partial<MUIButtonProps>"]},examples:[{name:"Playground",description:"Use to highlight the most important actions in any experience.",code:"<Button {...props}>Click me!</Button>"},{name:"Size",description:"Adjust the component size using the `size` prop. It supports 3 sizes:\n\n- `large`: use for large, very important buttons\n- `medium` (default): should be used in most cases\n- `small`: use when space is at a premium",code:"<SbColumn>\n    <Button size=\"large\">Click me!</Button>\n    <Button size=\"medium\">Click me!</Button>\n    <Button size=\"small\">Click me!</Button>\n  </SbColumn>"},{name:"Color",description:"We use 2 color variants, controlled through `color` prop:\n\n- `default`\n- `primary`",code:"<SbColumn>\n    <Button color=\"default\">Click me!</Button>\n    <Button color=\"primary\">Click me!</Button>\n  </SbColumn>"},{name:"Variant",description:"Background is controlled through `variant` prop:\n\n- `contained`\n- `text`\n\nNotice the interaction with `color` prop",code:"<SbRow>\n    <SbColumn>\n      <Button variant=\"contained\">Click me!</Button>\n      <Button variant=\"text\">Click me!</Button>\n    </SbColumn>\n    <SbColumn>\n      <Button variant=\"contained\" color=\"primary\">\n        Click me!\n      </Button>\n      <Button variant=\"text\" color=\"primary\">\n        Click me!\n      </Button>\n    </SbColumn>\n  </SbRow>"},{name:"Icons",description:"Pass leading and/or trailing icons through `startIcon` and `endIcon` props respectively. The icon's size is adjusted automatically.\n\nSome text goes here",code:"<SbRow>\n    <SbColumn>\n      <Button startIcon={<BubbleChartIcon />} size=\"large\">\n        Click me!\n      </Button>\n      <Button startIcon={<BubbleChartIcon />} size=\"medium\">\n        Click me!\n      </Button>\n      <Button startIcon={<BubbleChartIcon />} size=\"small\">\n        Click me!\n      </Button>\n    </SbColumn>\n    <SbColumn>\n      <Button endIcon={<BubbleChartIcon />} size=\"large\">\n        Click me!\n      </Button>\n      <Button endIcon={<BubbleChartIcon />} size=\"medium\">\n        Click me!\n      </Button>\n      <Button endIcon={<BubbleChartIcon />} size=\"small\">\n        Click me!\n      </Button>\n    </SbColumn>\n  </SbRow>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Button/components/Button/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105%3A59490",keywords:["button","action","click","submit","trigger","cta","wrapper","around","material","read","more","information","docs","page"]},{name:"ChartButton",modulePath:"components/Chart/components/ChartButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ChartButton",specifier:"@corva/ui/components",exportName:"ChartButton"},category:"v1",description:"ChartButton — chart button for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/ChartButton.js",keywords:["chartbutton","chart","button","family","story","canonical","usage"]},{name:"ChartButtons",modulePath:"components/Chart/components/ChartButtons",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ChartButtons",specifier:"@corva/ui/components",exportName:"ChartButtons"},category:"v1",description:"ChartButtons — chart buttons for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/ChartButtons.js",keywords:["chartbuttons","chart","buttons","family","story","canonical","usage"]},{name:"ChartWrapper",modulePath:"components/Chart/components/ChartWrapper",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ChartWrapper",specifier:"@corva/ui/components",exportName:"ChartWrapper"},category:"v1",description:"ChartWrapper — chart wrapper for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/ChartWrapper.js",keywords:["chartwrapper","chart","wrapper","family","story","canonical","usage"]},{name:"AxisDropdown",modulePath:"components/Chart/components/AxisDropdown",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AxisDropdown",specifier:"@corva/ui/components",exportName:"AxisDropdown"},category:"v1",description:"AxisDropdown — axis dropdown for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/AxisDropdown.js",keywords:["axisdropdown","axis","dropdown","chart","family","story","canonical","usage"]},{name:"ChartSelect",modulePath:"components/Chart/components/ChartSelect",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ChartSelect",specifier:"@corva/ui/components",exportName:"ChartSelect"},category:"v1",description:"ChartSelect — chart select for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/ChartSelect.js",keywords:["chartselect","chart","select","family","story","canonical","usage"]},{name:"DragToZoomButton",modulePath:"components/Chart/components/buttons/DragToZoomButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DragToZoomButton",specifier:"@corva/ui/components",exportName:"DragToZoomButton"},category:"v1",description:"DragToZoomButton — drag to zoom button for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/DragToZoomButton.js",keywords:["dragtozoombutton","drag","zoom","button","chart","family","story","canonical","usage"]},{name:"ZoomInButton",modulePath:"components/Chart/components/buttons/ZoomInButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ZoomInButton",specifier:"@corva/ui/components",exportName:"ZoomInButton"},category:"v1",description:"ZoomInButton — zoom in button for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/ZoomInButton.js",keywords:["zoominbutton","zoom","button","chart","family","story","canonical","usage"]},{name:"ZoomOutButton",modulePath:"components/Chart/components/buttons/ZoomOutButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ZoomOutButton",specifier:"@corva/ui/components",exportName:"ZoomOutButton"},category:"v1",description:"ZoomOutButton — zoom out button for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/ZoomOutButton.js",keywords:["zoomoutbutton","zoom","button","chart","family","story","canonical","usage","out"]},{name:"PanButton",modulePath:"components/Chart/components/buttons/PanButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"PanButton",specifier:"@corva/ui/components",exportName:"PanButton"},category:"v1",description:"PanButton — pan button for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/PanButton.js",keywords:["panbutton","button","chart","family","story","canonical","usage","pan"]},{name:"ResetZoomButton",modulePath:"components/Chart/components/buttons/ResetZoomButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ResetZoomButton",specifier:"@corva/ui/components",exportName:"ResetZoomButton"},category:"v1",description:"ResetZoomButton — reset zoom button for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/ResetZoomButton.js",keywords:["resetzoombutton","reset","zoom","button","chart","family","story","canonical","usage"]},{name:"HideAxesButton",modulePath:"components/Chart/components/buttons/HideAxesButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"HideAxesButton",specifier:"@corva/ui/components",exportName:"HideAxesButton"},category:"v1",description:"HideAxesButton — hide axes button for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/HideAxesButton.js",keywords:["hideaxesbutton","hide","axes","button","chart","family","story","canonical","usage"]},{name:"ChartTypeButton",modulePath:"components/Chart/components/buttons/ChartTypeButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ChartTypeButton",specifier:"@corva/ui/components",exportName:"ChartTypeButton"},category:"v1",description:"ChartTypeButton — chart type button for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/ChartTypeButton.js",keywords:["charttypebutton","chart","type","button","family","story","canonical","usage"]},{name:"ChartActionsList",modulePath:"components/ChartActionsList",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ChartActionsList",specifier:"@corva/ui/components",exportName:"ChartActionsList"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onChange",type:"function",required:true,description:""},{name:"min",type:"number",required:true,description:""},{name:"max",type:"number",required:true,description:""},{name:"left",type:"number",required:true,description:""},{name:"right",type:"number",required:true,description:""},{name:"classes",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ChartActionsList/ChartActionsList.js",keywords:["chartactionslist"]},{name:"Checkbox",modulePath:"components/Checkbox",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Checkbox",specifier:"@corva/ui/components",exportName:"Checkbox"},category:"v1",description:"We use styled MUI checkbox components. See details in [MUI documentation](https://v4.mui.com/components/checkboxes)",isExperimental:false,isDeprecated:false,props:[{name:"checked",type:"boolean",required:false,description:""},{name:"size",type:"'medium' | 'small'",required:false,description:"",enumValues:["medium","small"]},{name:"classes",type:"Record<string, string>",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"indeterminate",type:"boolean",required:false,description:""},{name:"onChange",type:"(event: ChangeEvent, value: boolean) => void",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Checkbox {...props} />"},{name:"Sizes",description:"Component's size is controlled through `size` prop, which supports 2 sizes: `small` and `medium` (default)",code:"{\n  return (\n    <SbRow>\n      <Checkbox size=\"small\" />\n      <Checkbox size=\"small\" checked />\n      <Checkbox size=\"medium\" />\n      <Checkbox size=\"medium\" checked />\n    </SbRow>\n  );\n}"},{name:"UsageWithLabel",description:"Use `<FormControlLabel/>` to display a label for the checkbox",code:"{\n  const [isChecked, setIsChecked] = useState(false);\n\n  return (\n    <SbColumn>\n      <FormControlLabel\n        control={<Checkbox onChange={() => setIsChecked(value => !value)} />}\n        label=\"Label\"\n        checked={isChecked}\n        disabled\n      />\n      <FormControlLabel\n        control={<Checkbox onChange={() => setIsChecked(value => !value)} />}\n        label=\"Label\"\n        checked={isChecked}\n      />\n      <FormControlLabel\n        control={<Checkbox size=\"small\" onChange={() => setIsChecked(value => !value)} />}\n        label=\"Label\"\n        checked={isChecked}\n      />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Checkbox/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105%3A59492",keywords:["checkbox","toggle","check","boolean","option","styled","components","details","documentation"]},{name:"Chip",modulePath:"components/Chip",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Chip",specifier:"@corva/ui/components",exportName:"Chip"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"variant",type:"'default' | 'outlined' | 'basic'",required:false,description:"",enumValues:["default","outlined","basic"]},{name:"checked",type:"boolean",required:false,description:"Displays a checked icon"},{name:"'data-testid'",type:"string",required:false,description:""},{name:"onClick",type:"MouseEventHandler<HTMLDivElement>",required:false,description:""}],propsList:{kind:"partial",undescended:["Partial< Omit<MuiChipProps, 'variant' | 'color' | 'onClick' | 'children' | 'avatar'> >"]},examples:[{name:"Default",description:"",code:"<Chip {...props} />"},{name:"WithIcons",description:"`icon` prop allows adding icons/content to a chip.",code:"{\n  return (\n    <SbColumn>\n      <Chip icon={<CautionFilledCustomIcon size={16} />} label=\"With Icon\" />\n      <Chip icon={<FileAdditionOne size={16} />} label=\"With Icon\" />\n      <Chip icon={<FileAdditionOne size={16} />} label=\"With Icon and checked\" checked />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chip/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105%3A59510",keywords:["chip","tag","label","badge","pill"]},{name:"ColorPicker",modulePath:"components/ColorPicker",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ColorPicker",specifier:"@corva/ui/components",exportName:"ColorPicker"},category:"v1",description:"Used to provide a rich color input",isExperimental:false,isDeprecated:false,props:[{name:"label",type:"string",required:false,description:""},{name:"value",type:"string",required:true,description:""},{name:"onChange",type:"(color: string) => void",required:true,description:""},{name:"converter",type:"keyof typeof converters",required:false,description:""},{name:"pickerComponent",type:"ComponentType<any>",required:false,description:""},{name:"buttonClassName",type:"string",required:false,description:""},{name:"labelPosition",type:"'top' | 'right'",required:false,description:"",enumValues:["top","right"]},{name:"hideLabel",type:"boolean",required:false,description:""},{name:"lensColor",type:"string",required:false,description:""},{name:"enableTransparencyPalette",type:"boolean",required:false,description:""},{name:"tooltipProps",type:"Omit<TooltipProps, 'children'>",required:false,description:""},{name:"'data-testid'",type:"string",required:false,description:""},{name:"popoverAnchorOrigin",type:"PopoverOrigin",required:false,description:""},{name:"popoverTransformOrigin",type:"PopoverOrigin",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"onOpen",type:"() => void",required:false,description:""},{name:"onClose",type:"() => void",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ColorPicker {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ColorPicker/ColorPicker.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19119%3A59766&mode=dev",keywords:["colorpicker","color","palette","pick","swatch","used","provide","rich","input"]},{name:"ColorPickerPalette",modulePath:"components/ColorPickerPalette",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ColorPickerPalette",specifier:"@corva/ui/components",exportName:"ColorPickerPalette"},category:"v1",description:"",isExperimental:false,isDeprecated:true,props:[{name:"color",type:"string",required:true,description:""},{name:"onChange",type:"(convertedColor: string) => void",required:true,description:""},{name:"handleClose",type:"() => void",required:true,description:""},{name:"anchorEl",type:"null | Element",required:false,description:"Anchor element to position the popover to. Pass falsy value to hide popover"},{name:"converter",type:"Format",required:false,description:""},{name:"popoverAnchorOrigin",type:"PopoverOrigin",required:false,description:""},{name:"popoverTransformOrigin",type:"PopoverOrigin",required:false,description:""},{name:"pickerComponent",type:"ComponentType<PaletteChromePickerProps>",required:false,description:""},{name:"enableTransparencyPalette",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [anchorEl, setAnchorEl] = useState<HTMLElement>();\n  const [value, setValue] = useState<string>('#FFF000');\n\n  return (\n    <SbRow alignItems=\"center\">\n      <ColorPickerPalette\n        {...props}\n        color={value}\n        anchorEl={anchorEl}\n        onChange={(color, ...rest) => {\n          props.onChange?.(color, ...rest);\n          setValue(color);\n        }}\n        handleClose={() => setAnchorEl(undefined)}\n      />\n      <Button onClick={e => setAnchorEl(e.currentTarget)}>Click me</Button>\n      Value: {value}\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ColorPickerPalette/ColorPickerPalette.tsx",figmaUrl:"https://www.figma.com/file/smNVlGhHv4dyuH5Q22pxAS/CrossPlot?node-id=1580%3A148784",keywords:["colorpickerpalette"]},{name:"Comment",modulePath:"components/Comment",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Comment",specifier:"@corva/ui/components",exportName:"Comment"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"comment",type:"object",required:true,description:""},{name:"showOnMount",type:"boolean",required:false,description:""},{name:"spaceAround",type:"boolean",required:false,description:""},{name:"handleShowOnMount",type:"function",required:false,description:""},{name:"handleEdit",type:"function",required:false,description:""},{name:"handleDeleteCallback",type:"function",required:true,description:""},{name:"patchCommentCallback",type:"function",required:true,description:""},{name:"companyId",type:"number",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""},{name:"classes",type:"object",required:false,description:""},{name:"isNative",type:"boolean",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Comment/index.js",keywords:["comment"]},{name:"CommentCard",modulePath:"components/CommentCard",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CommentCard",specifier:"@corva/ui/components",exportName:"CommentCard"},category:"v1",description:"See the [Comments migration guide](?path=/docs/components-v2-comments-migration-guide--docs). Comment card on the shared `FeedCard` surface. Two variants:\n\n- **`expanded`** (default) — header (avatar + name + timestamp, optional accent `subtitle`), body ending with the trace `chip` (its leading edge takes the trace `chipColor`), an optional attachment slot, the actions row, and — once `isReplyOpen` — the reply input above the replies list.\n- **`preview`** — compact list card: the same header + body, with the actions row in a bordered footer.\n\nActions row (Figma 2799:61842): `reply · like · share` on the left (each showing its count when `> 0`; the active like turns accent), then the info icon and the kebab `menuItems` on the right. Depth/time metadata lives only in the info-icon hover tooltip — never inline on the card.",isExperimental:true,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"CommentCard"},examples:[{name:"Default",description:"Expanded card, replies closed. Hover the footer info icon to reveal the depth/time tooltip.",code:"<Frame>\n    <CommentCard\n      variant=\"expanded\"\n      width={302}\n      author={{ name: 'User Name' }}\n      timestamp=\"Nov 14, 13:20\"\n      chip=\"ROP Depth\"\n      chipColor=\"#fd964b\"\n      body=\"MUD WT IN 16.0 Visc 60, attantion to BD.\"\n      contextRows={metadata}\n      onReplyToggle={() => {}}\n      onLike={() => {}}\n      onForward={() => {}}\n      menuItems={menuItems}\n    />\n  </Frame>"},{name:"Liked",description:"Active like (accent) with like + comment counts beside the icons.",code:"<Frame>\n    <CommentCard\n      variant=\"expanded\"\n      width={302}\n      author={{ name: 'User Name' }}\n      timestamp=\"Nov 14, 13:20\"\n      chip=\"ROP Depth\"\n      body=\"MUD WT IN 16.0 Visc 60, attantion to BD.\"\n      contextRows={metadata}\n      isLiked\n      likesCount={12}\n      commentsCount={2}\n      onReplyToggle={() => {}}\n      onLike={() => {}}\n      onForward={() => {}}\n      menuItems={menuItems}\n    />\n  </Frame>"},{name:"RepliesExpanded",description:"Reply section open (Figma 2841:66442): dimmed footer surface — reply input first, replies list, \"show more\" at the bottom.",code:"<Frame>\n    <CommentCard\n      variant=\"expanded\"\n      width={364}\n      author={{ name: 'Name Name' }}\n      timestamp=\"Nov 14 2025, 13:20\"\n      subtitle=\"Rig Name - Well Name\"\n      body=\"MUD WT IN 16.0 Visc 60, attantion to BD.\"\n      contextRows={metadata}\n      commentsCount={2}\n      onReplyToggle={() => {}}\n      onLike={() => {}}\n      onForward={() => {}}\n      menuItems={menuItems}\n      isReplyOpen\n      replyInput={\n        <CommentInput\n          bare\n          placeholder=\"Reply\"\n          autoFocus\n          onSubmit={() => {}}\n          leading={<Avatar size={32} name=\"Jane Roe\" />}\n        />\n      }\n      replies={replies}\n      hasMoreReplies\n      moreRepliesCount={2}\n      onShowMoreReplies={() => {}}\n    />\n  </Frame>"},{name:"WithAttachments",description:"Attachments (AttachmentPreview) in the `attachmentSlot`, below the body.",code:"<Frame>\n    <CommentCard\n      variant=\"expanded\"\n      width={364}\n      author={{ name: 'Name Name' }}\n      timestamp=\"Nov 14 2025, 13:20\"\n      subtitle=\"Rig Name - Well Name\"\n      contextRows={metadata}\n      body=\"Check the bottom slips on Penelope 9\"\n      attachmentSlot={\n        <AttachmentPreview\n          onRemove={() => {}}\n          items={[\n            { id: 1, name: 'log.png', kind: 'image', src: img },\n            { id: 2, name: 'Corva report.xls', kind: 'file' },\n          ]}\n        />\n      }\n      commentsCount={1}\n      onReplyToggle={() => {}}\n      onForward={() => {}}\n      menuItems={menuItems}\n    />\n  </Frame>"},{name:"EditMode",description:"Edit mode — the body is replaced by an app-supplied form.",code:"<Frame>\n    <CommentCard\n      variant=\"expanded\"\n      width={364}\n      author={{ name: 'Name Name' }}\n      timestamp=\"Nov 14 2025, 13:20\"\n      subtitle=\"Rig Name - Well Name\"\n      body=\"MUD WT IN 16.0 Visc 60, attantion to BD.\"\n      editForm={\n        <CommentInput value=\"MUD WT IN 16.0 Visc 60, attantion to BD.\" onSubmit={() => {}} />\n      }\n    />\n  </Frame>"},{name:"Compact",description:"Compact `preview` variant — actions row in a bordered footer.",code:"<Frame>\n    <CommentCard\n      variant=\"preview\"\n      width={302}\n      author={{ name: 'User Name' }}\n      timestamp=\"Nov 14, 13:20\"\n      chip=\"ROP Depth\"\n      body=\"MUD WT IN 16.0 Visc 60, attantion to BD.\"\n      contextRows={metadata}\n      commentsCount={2}\n      onReplyToggle={() => {}}\n      onLike={() => {}}\n      onForward={() => {}}\n      menuItems={menuItems}\n    />\n  </Frame>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CommentCard/CommentCard.tsx",figmaUrl:"https://www.figma.com/file/g7HMsT490usxg8oBs5olcD/Comment-Tool?node-id=2799-61842",keywords:["commentcard","comments","migration","guide","comment","card","shared","feedcard","surface","variants","expanded"]},{name:"CommentComposer",modulePath:"components/CommentComposer",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CommentComposer",specifier:"@corva/ui/components",exportName:"CommentComposer"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"body",type:"string",required:true,description:""},{name:"onBodyChange",type:"(value: string) => void",required:true,description:""},{name:"onSubmit",type:"() => void",required:true,description:""},{name:"canSubmit",type:"boolean",required:true,description:""},{name:"currentUser",type:"CommentComposerUser",required:true,description:""},{name:"attachments",type:"UploadedAttachment[]",required:false,description:""},{name:"onAttachmentsChange",type:"(attachments: UploadedAttachment[]) => void",required:false,description:""},{name:"maxAttachments",type:"number",required:false,description:""},{name:"attachment",type:"UploadedAttachment | null",required:false,description:""},{name:"onAttachmentChange",type:"(attachment: UploadedAttachment | null) => void",required:false,description:""},{name:"attachmentError",type:"string | null",required:false,description:""},{name:"onAttachmentError",type:"(message: string | null) => void",required:false,description:""},{name:"maxAttachmentSizeBytes",type:"number",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"autoFocus",type:"boolean",required:false,description:""},{name:"placeholder",type:"string",required:false,description:""},{name:"metaRows",type:"CommentMetaRow[]",required:false,description:""},{name:"isMetaSingleLine",type:"boolean",required:false,description:""},{name:"shareToChat",type:"Omit<ShareToChatRowProps, 'testId'>",required:false,description:""},{name:"trailing",type:"ReactNode",required:false,description:"Replaces the default send button, e.g. the edit form's Cancel/Save."},{name:"embedded",type:"boolean",required:false,description:"Render flush inside a host card instead of as its own surface."},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CommentComposer/CommentComposer.tsx",keywords:["commentcomposer"]},{name:"CommentInput",modulePath:"components/CommentInput",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CommentInput",specifier:"@corva/ui/components",exportName:"CommentInput"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"inputRef",type:"object",required:false,description:""},{name:"editFeedItemId",type:"number",required:false,description:""},{name:"editCommentId",type:"number",required:false,description:""},{name:"editComment",type:"string",required:false,description:""},{name:"editAttachment",type:"object",required:false,description:""},{name:"spaceAround",type:"boolean",required:false,description:""},{name:"postComment",type:"function",required:true,description:""},{name:"postCommentCallback",type:"function",required:false,description:""},{name:"patchCommentCallback",type:"function",required:false,description:""},{name:"exitEditMode",type:"function",required:false,description:""},{name:"setIsPosting",type:"function",required:false,description:""},{name:"setIsEditting",type:"function",required:false,description:""},{name:"onMount",type:"function",required:false,description:""},{name:"autoFocus",type:"boolean",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"classes",type:"object",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""},{name:"isNative",type:"boolean",required:false,description:""},{name:"companyId",type:"number",required:false,description:""},{name:"parentId",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CommentInput/index.js",keywords:["commentinput"]},{name:"CommentInputNext",modulePath:"components/CommentInputNext/CommentInputNext",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CommentInputNext",specifier:"@corva/ui/components",exportName:"CommentInputNext"},category:"v1",description:"See the [Comments migration guide](?path=/docs/components-v2-comments-migration-guide--docs). Shared comment input shell. The field auto-grows from `minRows` up to `maxRows`. Send is disabled until there is text (override with `canSubmit`); Enter submits, Shift+Enter newlines.\n\nTwo layouts:\n\n- **Create** (default) — a borderless input panel: text, then a toolbar row with the `toolbar` actions (attach / @ / emoji) on the left and the send button on the right; a divider; then the `footer` (depth/time metadata, Share-in-Chat + trace selector).\n- **Reply** (`bare`) — a bordered field inline with a `leading` avatar, inside the comment card.\n\nSlots: `field` (custom mention editor), `leading` (bare only), `trailing` (replaces send — e.g. an upload spinner), `attachmentSlot` (below the text), `toolbar` (create toolbar row), `footer`.",isExperimental:true,isDeprecated:false,props:[{name:"placeholder",type:"string",required:false,description:""},{name:"value",type:"string",required:false,description:""},{name:"onChange",type:"(value: string) => void",required:false,description:""},{name:"onSubmit",type:"(value: string) => void",required:false,description:""},{name:"onCancel",type:"() => void",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"autoFocus",type:"boolean",required:false,description:""},{name:"minRows",type:"number",required:false,description:""},{name:"maxRows",type:"number",required:false,description:""},{name:"field",type:"ReactNode",required:false,description:"Editable control rendered in place of the built-in textarea."},{name:"canSubmit",type:"boolean",required:false,description:""},{name:"bare",type:"boolean",required:false,description:"Drop the outer surface so the field sits flush, for the in-card reply input."},{name:"leading",type:"ReactNode",required:false,description:""},{name:"trailing",type:"ReactNode",required:false,description:"Replaces the default send button."},{name:"sendTooltip",type:"string",required:false,description:""},{name:"attachments",type:"AttachmentPreviewItem[]",required:false,description:""},{name:"onAttachmentRemove",type:"(id: AttachmentPreviewItem['id']) => void",required:false,description:""},{name:"onAttachmentRetry",type:"(id: AttachmentPreviewItem['id']) => void",required:false,description:""},{name:"onAttachmentReorder",type:"(orderedIds: AttachmentPreviewItem['id'][]) => void",required:false,description:"Enables drag-to-reorder on the attachment strip."},{name:"onFilesDrop",type:"(files: File[]) => void",required:false,description:"Enables dropping files from the desktop onto the composer."},{name:"onImageLinkPaste",type:"(url: string) => void",required:false,description:"Given a pasted link that points at an image."},{name:"dropLabel",type:"string",required:false,description:""},{name:"attachmentSlot",type:"ReactNode",required:false,description:"Extra content in the attachment area, e.g. an upload-error banner."},{name:"toolbar",type:"ReactNode",required:false,description:""},{name:"footer",type:"ReactNode",required:false,description:""},{name:"embedded",type:"boolean",required:false,description:"Render flush inside a host surface: no background, full-width divider."},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"Empty input — send disabled until there is text.",code:"<Frame>\n    <CommentInput onSubmit={() => {}} />\n  </Frame>"},{name:"Filled",description:"Filled (\"Type\") state — send is enabled.",code:"<Frame>\n    <CommentInput value=\"MUD WT IN 16.0 Visc 60\" onSubmit={() => {}} />\n  </Frame>"},{name:"Reply",description:"Reply input — `bare` so the avatar aligns with the reply avatars; lives inside the card footer.",code:"<Frame>\n    <CommentInput\n      bare\n      placeholder=\"Reply\"\n      onSubmit={() => {}}\n      leading={<Avatar size={32} name=\"Jane Roe\" />}\n    />\n  </Frame>"},{name:"CreateComment",description:"Create-comment state — in-field attach/@/emoji toolbar + metadata & share footer.",code:"<Frame width={420}>\n    <CommentInput\n      minRows={3}\n      autoFocus\n      onSubmit={() => {}}\n      toolbar={<Toolbar />}\n      footer={<Footer />}\n    />\n  </Frame>"},{name:"WithAttachments",description:"Attachments (AttachmentPreview) render below the text, above the toolbar.",code:"<Frame width={420}>\n    <CommentInput\n      value=\"Check the bottom slips\"\n      onSubmit={() => {}}\n      toolbar={<Toolbar />}\n      attachmentSlot={\n        <AttachmentPreview\n          onRemove={() => {}}\n          items={[\n            { id: 1, name: 'log.png', kind: 'image', src: img },\n            { id: 2, name: 'Corva report.xls', kind: 'file' },\n          ]}\n        />\n      }\n    />\n  </Frame>"},{name:"MaxHeight",description:"Field auto-grows to `maxRows` (~256px) then scrolls internally.",code:"<Frame width={420}>\n    <CommentInput\n      maxRows={12}\n      value={'MUD WT IN 16.0 Visc 60, attantion to BD.\\n'.repeat(8).trim()}\n      onSubmit={() => {}}\n      toolbar={<Toolbar />}\n    />\n  </Frame>"},{name:"Uploading",description:"File-uploading state — the `trailing` slot shows an upload spinner in place of send.",code:"<Frame>\n    <CommentInput\n      value=\"MUD WT IN 16.0 Visc 60\"\n      onSubmit={() => {}}\n      trailing={<LoaderCircular size=\"xs\" />}\n    />\n  </Frame>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CommentInputNext/CommentInputNext.tsx",figmaUrl:"https://www.figma.com/file/g7HMsT490usxg8oBs5olcD/Comment-Tool?node-id=3035-22201",keywords:["commentinputnext","comments","migration","guide","shared","comment","input","shell","field","auto-grows","minrows"]},{name:"CommentPin",modulePath:"components/CommentPin",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CommentPin",specifier:"@corva/ui/components",exportName:"CommentPin"},category:"v1",description:"See the [Comments migration guide](?path=/docs/components-v2-comments-migration-guide--docs). Pin marking a placed comment on a chart: the first commenter’s avatar with a `Counter` badge top-right when there is more than one comment. Single comment = just the avatar; `selected` gives the accent ring for the opened comment.\n\n**Props:** `users` (first avatar is shown), `count` / `maxCount` (badge), `size`, `selected`, `onClick`.",isExperimental:true,isDeprecated:false,props:[{name:"users",type:"CommentPinUser[]",required:true,description:"Only the first avatar is shown, with a count badge when there are more."},{name:"count",type:"number",required:false,description:""},{name:"maxCount",type:"number",required:false,description:""},{name:"size",type:"number",required:false,description:""},{name:"selected",type:"boolean",required:false,description:""},{name:"onClick",type:"() => void",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Playground",description:"",code:"<Frame>\n    <CommentPin {...props} />\n  </Frame>"},{name:"Single",description:"One commenter, no count badge.",code:"<Frame>\n    <CommentPin users={[{ name: 'John Doe' }]} />\n  </Frame>"},{name:"Grouped",description:"Multiple commenters with a comment-count badge.",code:"<Frame>\n    <CommentPin users={[{ name: 'John Doe' }, { name: 'Jane Roe' }]} count={2} />\n  </Frame>"},{name:"ManyComments",description:"",code:"<Frame>\n    <CommentPin users={[{ name: 'John Doe' }, { name: 'Jane Roe' }]} count={12} />\n  </Frame>"},{name:"Selected",description:"Accent ring for the currently opened comment.",code:"<Frame>\n    <CommentPin users={[{ name: 'John Doe' }, { name: 'Jane Roe' }]} count={2} selected />\n  </Frame>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CommentPin/CommentPin.tsx",figmaUrl:"https://www.figma.com/file/g7HMsT490usxg8oBs5olcD/Comment-Tool?node-id=2799-44309",keywords:["commentpin","comments","migration","guide","marking","placed","comment","chart","first","commenter","avatar"]},{name:"CommentsInfo",modulePath:"components/CommentsInfo",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CommentsInfo",specifier:"@corva/ui/components",exportName:"CommentsInfo"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"likesCount",type:"number",required:false,description:""},{name:"usersWhoLike",type:"array",required:false,description:""},{name:"commentsCount",type:"number",required:false,description:""},{name:"usersWhoCommented",type:"array",required:true,description:""},{name:"onCommentsClick",type:"function",required:false,description:""},{name:"activeUsersList",type:"array",required:true,description:""},{name:"classes",type:"object",required:false,description:""},{name:"isNative",type:"boolean",required:false,description:""},{name:"small",type:"boolean",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CommentsInfo/index.js",keywords:["commentsinfo"]},{name:"ContextMenuItem",modulePath:"components/ContextMenuItem",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ContextMenuItem",specifier:"@corva/ui/components",exportName:"ContextMenuItem"},category:"v1",description:"Used to render menu items with icons. Use MUI Menus. Read more information on the MUI docs page [here](https://material-ui.com/api/menu-item/)",isExperimental:false,isDeprecated:false,props:[{name:"icon",type:"ReactNode",required:false,description:""},{name:"iconType",type:"'mui' | 'iconPark'",required:false,description:"Indicates the icon type: different icon types require different styling",enumValues:["mui","iconPark"]},{name:"small",type:"boolean",required:false,description:""}],propsList:{kind:"partial",undescended:["MenuItemProps"]},examples:[{name:"Default",description:"",code:"<ContextMenuItem {...props} />"},{name:"UsageExample",description:"Basic usage example is shown here",code:"{\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>(undefined);\n  const [selectedItem, setSelectedItem] = useState<number>();\n\n  const icons = [DownloadIcon, ActivitySourceIcon, AdjustmentIcon, AlarmClockIcon];\n\n  return (\n    <>\n      <Button onClick={e => setAnchorEl(e.currentTarget)}>Open Menu</Button>\n      <Popover open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={() => setAnchorEl(undefined)}>\n        {icons.map((Icon, index) => (\n          <ContextMenuItem\n            onClick={() => setSelectedItem(index)}\n            selected={selectedItem === index}\n            icon={<Icon />}\n            iconType=\"iconPark\"\n            key={index}\n          >\n            Menu Item {index}\n          </ContextMenuItem>\n        ))}\n      </Popover>\n    </>\n  );\n}"},{name:"Disabled",description:"Use `DisabledTooltipProps` prop to add a tooltip to a disabled menu item",code:"{\n  return (\n    <ContextMenuItem\n      icon={<DownloadIcon />}\n      iconType=\"iconPark\"\n      disabled\n      DisabledTooltipProps={{\n        title: 'Tooltip title goes here!',\n        placement: 'bottom',\n      }}\n    >\n      Disabled Menu Item\n    </ContextMenuItem>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ContextMenuItem/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9597%3A17471",keywords:["contextmenuitem","used","render","menu","items","icons","menus","read","more","information","docs"]},{name:"CopyToClipboard",modulePath:"components/CopyToClipboard",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CopyToClipboard",specifier:"@corva/ui/components",exportName:"CopyToClipboard"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"string",required:true,description:"⚠️ Must be a string"},{name:"dataTestId",type:"string",required:false,description:""},{name:"IconComponent",type:"ComponentType<any>",required:false,description:""},{name:"tooltipProps",type:"{\n    title?: string;\n    placement?: TooltipProps['placement'];\n    delay?: number;\n  }",required:false,description:""},{name:"classes",type:"{\n    root?: string;\n    icon?: string;\n    iconWrapper?: string;\n    tooltip?: string;\n    tooltipPopper?: string;\n  }",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<CopyToClipboard {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CopyToClipboard/CopyToClipboard.tsx",keywords:["copytoclipboard","copy","clipboard","duplicate"]},{name:"Counter",modulePath:"components/Counter",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Counter",specifier:"@corva/ui/components",exportName:"Counter"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"label",type:"string",required:true,description:""},{name:"classes",type:"{\n    root?: string;\n  }",required:false,description:""},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"limited",type:"boolean",required:false,description:""},{name:"clickable",type:"boolean",required:false,description:""},{name:"tooltip",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit< ChipProps, | 'classes' | 'size' | 'label' | 'clickable' | 'children' | 'avatar' | 'icon' | 'deleteIcon' | 'onDelete' | 'variant' | 'color' | 'className' >"]},examples:[{name:"Default",description:"",code:"<Counter {...props} />"},{name:"Usage",description:"`Counter` may be used as-is, or absolutely positioned over the element to indicate some items count",code:"{\n  const styles = makeStyles({\n    wrapper: {\n      position: 'relative',\n      display: 'inline-block',\n    },\n    counter: {\n      position: 'absolute',\n      transform: 'translate(50%, -50%)',\n      top: 0,\n      right: 0,\n    },\n  })();\n\n  return (\n    <SbColumn>\n      <div>\n        Some items: <Counter size=\"medium\" label=\"99+\" />\n      </div>\n      <div className={styles.wrapper}>\n        <Avatar displayName=\"Ian Moone\" />\n        <Counter size=\"small\" label=\"99+\" className={styles.counter} />\n      </div>\n      <div className={styles.wrapper}>\n        <Avatar displayName=\"Ian Moone\" />\n        <Counter size=\"small\" label=\"1\" className={styles.counter} />\n      </div>\n    </SbColumn>\n  );\n}"},{name:"Colored",description:"Adding color to a counter can be done through `className` prop, target `MuiChip-label` class to change text color.\n\nSee code for an example",code:"{\n  const styles = makeStyles(() => ({\n    primary: {\n      backgroundColor: `var(--palette-primary-main) !important`,\n      '& .MuiChip-label': {\n        color: `var(--palette-background-b-1) !important`,\n      },\n      '&:hover': {\n        backgroundColor: `var(--palette-primary-dark) !important`,\n      },\n    },\n    destructive: {\n      backgroundColor: `var(--palette-error-main) !important`,\n      '& .MuiChip-label': {\n        color: `var(--palette-background-b-1) !important`,\n      },\n      '&:hover': {\n        backgroundColor: `var(--palette-error-dark) !important`,\n      },\n    },\n  }))();\n\n  return (\n    <SbRow>\n      <Counter label=\"+1\" />\n      <Counter label=\"+1\" className={styles.primary} />\n      <Counter label=\"+1\" className={styles.destructive} />\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Counter/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105%3A59511",keywords:["counter","count","number","badge","indicator"]},{name:"CustomSelect",modulePath:"components/CustomSelect",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CustomSelect",specifier:"@corva/ui/components",exportName:"CustomSelect"},category:"v1",description:"A Material UI v4 FormControl + Select wrapper driven by `<MenuItem>` children. Deprecated in favor of the V2 `Select`.",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"object",required:true,description:""},{name:"label",type:"string",required:true,description:""},{name:"height",type:"number",required:false,description:""},{name:"MenuProps",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[{name:"Default",description:"",code:"<CustomSelect label=\"Example\" value=\"a\" onChange={() => {}}>\n    <MenuItem value=\"a\">Option A</MenuItem>\n    <MenuItem value=\"b\">Option B</MenuItem>\n  </CustomSelect>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CustomSelect/index.js",keywords:["customselect","material","formcontrol","select","wrapper","driven","menuitem","children","deprecated","favor"]},{name:"DatePicker",modulePath:"components/DatePicker",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DatePicker",specifier:"@corva/ui/components",exportName:"DatePicker"},category:"v1",description:"This component was created as styled MUI Date Picker (v3.2.10). You can use MUI component props. For more information, please, follow the official [documentation](https://github.com/mui/material-ui-pickers/tree/v3-x)\n\nUnfortunately, we couldn't generate docs for this component, but the types should work",isExperimental:false,isDeprecated:false,props:[{name:"className",type:"string",required:false,description:""}],propsList:{kind:"partial",undescended:["KeyboardDatePickerProps"]},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState(new Date());\n  return (\n    <DatePicker\n      {...props}\n      value={value}\n      onChange={(moment, _stringValue) => setValue(moment.toDate())}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DatePicker/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=10221%3A54&mode=dev",keywords:["datepicker","date","calendar","time","schedule","component","created","styled","picker","props","more","information","please","follow"]},{name:"DateTimePicker",modulePath:"components/DateTimePicker",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DateTimePicker",specifier:"@corva/ui/components",exportName:"DateTimePicker"},category:"v1",description:"This component was created as styled MUI Date Picker (v3.2.10). You can use MUI component props. For more information, please, follow the official [documentation](https://github.com/mui/material-ui-pickers/tree/v3-x)\n\nUnfortunately, we couldn't generate docs for this component, but the types should work",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"partial",undescended:["KeyboardDateTimePickerProps"]},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState(new Date());\n  return (\n    <DateTimePicker\n      {...props}\n      value={value}\n      onChange={(moment, _stringValue) => setValue(moment.toDate())}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DateTimePicker/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=10221%3A54&mode=dev",keywords:["datetimepicker","date","time","calendar","schedule","component","created","styled","picker","props","more","information","please","follow"]},{name:"DisabledSettingsMessage",modulePath:"components/DisabledSettingsMessage",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DisabledSettingsMessage",specifier:"@corva/ui/components",exportName:"DisabledSettingsMessage"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onCloneDashboard",type:"function",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DisabledSettingsMessage/DisabledSettingsMessage.js",keywords:["disabledsettingsmessage"]},{name:"DocumentViewer",modulePath:"components/DocumentViewer",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DocumentViewer",specifier:"@corva/ui/components",exportName:"DocumentViewer"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"fileUrl",type:"string",required:true,description:""},{name:"webviewType",type:"enum",required:false,description:"",enumValues:["google","office"]},{name:"fileName",type:"string",required:false,description:""},{name:"fileSize",type:"number",required:false,description:""},{name:"onClose",type:"function",required:true,description:""},{name:"classes",type:"object",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DocumentViewer/DocumentViewer.js",keywords:["documentviewer"]},{name:"EChartsWrapper",modulePath:"components/EChartsWrapper",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"EChartsWrapper",specifier:"@corva/ui/components",exportName:"EChartsWrapper"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"EChartsWrapper"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EChartsWrapper/EChartsWrapper.tsx",keywords:["echartswrapper"]},{name:"EditableItem",modulePath:"components/EditableItem/EditableItem/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"EditableItem",specifier:"@corva/ui/components",exportName:"EditableItem"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"partial",undescended:["PropTypes.InferProps<typeof editableItemPropTypes>"]},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EditableItem/EditableItem/index.tsx",keywords:["editableitem"]},{name:"EmbeddedApp",modulePath:"components/EmbeddedApp",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"EmbeddedApp",specifier:"@corva/ui/components",exportName:"EmbeddedApp"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EmbeddedApp/EmbeddedApp.js",keywords:["embeddedapp"]},{name:"EmptyState",modulePath:"components/EmptyState",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"EmptyState",specifier:"@corva/ui/components",exportName:"EmptyState"},category:"v1",description:"Component for displaying an empty/error state.\n\nNeeds to be in a container with fixed height to be visible. Takes 100% height by default and changes its own layout based on its own height. Uses a resize observer to recalculate its own layout",isExperimental:false,isDeprecated:false,props:[{name:"title",type:"ReactNode",required:false,description:""},{name:"subtitle",type:"ReactNode",required:false,description:""},{name:"image",type:"string",required:false,description:"URL to an image"},{name:"classes",type:"{\n    root?: string;\n    content?: string;\n    title?: string;\n    subtitle?: string;\n    image?: string;\n  }",required:false,description:"ClassNames for inner components"},{name:"'data-testid'",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<EmptyState {...props} />"},{name:"Images",description:"Component provides standard images as its own `IMAGES` property. Using `EmptyState.IMAGES.*` is preferred to using string literals\n\nAvailable images:```tsx\n{\n  AppLoadingError,\n  AssetHasNoData,\n  DataSuccessfullySaved,\n  FracFleetHasNoActivePad,\n  NoDataAvailable,\n  NoIssueFound,\n  NoNotifications,\n  NoSubscription,\n  NoWellsSelected,\n  PageNotFound,\n  RigHasNoActiveWell,\n  UnderConstruction,\n  AccessDenied,\n}\n```",code:"<EmptyState title=\"Title\" image={EmptyState.IMAGES.RigHasNoActiveWell} />"},{name:"Messages",description:"Component provides standard messages as its own `APP_MESSAGES` property.\n\nAvailable messages:```tsx\nexport type AppMessages = Record<\n  | 'appNotSubscribed'\n  | 'appNotSubscribedForAsset'\n  | 'internalAppError'\n  | 'appPackageWasNotFound'\n  | 'fracFleetWasNotFound'\n  | 'fracFleetHasNoPad'\n  | 'padHasNoWells'\n  | 'appComponentWasNotFound'\n  | 'noAssetData'\n  | 'assetNotAvailable'\n  | 'AccessDenied',\n  { title: string; subtitle?: string }\n>;\n```",code:"<EmptyState\n    image={EmptyState.IMAGES.FracFleetHasNoActivePad}\n    title={EmptyState.APP_MESSAGES.fracFleetHasNoPad.title}\n    subtitle={EmptyState.APP_MESSAGES.fracFleetHasNoPad.subtitle}\n  />"},{name:"Sizes",description:"Component takes all available height, and uses `resizeObserver` to automatically adjust own layout.\n\nBreakpoints: `300px` and `400px`",code:"{\n  const max = 500;\n  const min = 100;\n  const [height, setHeight] = useState(500);\n\n  const onHeightChange = useCallback(\n    (_: ChangeEvent<{}>, value: number | number[]) =>\n      setHeight(value instanceof Array ? value[0] : value),\n    []\n  );\n\n  return (\n    <SbColumn>\n      <div style={{ width: '200px' }}>\n        Height: {height}px\n        <Slider value={height} onChange={onHeightChange} min={min} max={max} />\n      </div>\n\n      <div style={{ height: `${max}px` }}>\n        <div style={{ height: `${height}px` }}>\n          <EmptyState\n            image={EmptyState.IMAGES.FracFleetHasNoActivePad}\n            title={EmptyState.APP_MESSAGES.fracFleetHasNoPad.title}\n            subtitle={EmptyState.APP_MESSAGES.fracFleetHasNoPad.subtitle}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EmptyState/EmptyState.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9662-18&t=C6zKC8YvzxNUJ5ka-0",keywords:["emptystate","empty","no data","placeholder","blank","no results","component","displaying","error","state","needs","container","fixed","height","visible"]},{name:"EmptyView",modulePath:"components/EmptyView",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"EmptyView",specifier:"@corva/ui/components",exportName:"EmptyView"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"title",type:"string",required:false,description:""},{name:"description",type:"string",required:false,description:""},{name:"showArrow",type:"boolean",required:false,description:""},{name:"customStyles",type:"{\n    wrapper?: string;\n    title?: string;\n    description?: string;\n    arrow?: string;\n  }",required:false,description:"Classes for internal elements"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<EmptyView {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EmptyView/EmptyView.tsx",keywords:["emptyview"]},{name:"ErrorBoundary",modulePath:"components/ErrorBoundary",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ErrorBoundary",specifier:"@corva/ui/components",exportName:"ErrorBoundary"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""},{name:"ErrorView",type:"elementType",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ErrorBoundary/ErrorBoundary.js",keywords:["errorboundary"]},{name:"FeedCard",modulePath:"components/FeedCard",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FeedCard",specifier:"@corva/ui/components",exportName:"FeedCard"},category:"v1",description:"See the [Comments migration guide](?path=/docs/components-v2-comments-migration-guide--docs). Shared outer surface for chart feed-item cards — the translucent `rgba(44,44,44,.9)` panel with blur and rounded corners. It provides *only* the container chrome; consumers compose their own header / body / footer inside so every feed card shares one surface. `CommentCard` and `FeedItemCard` are both built on it.\n\nProps: `width` (fixed px, omit to fill), `radius` (px, default 16 — comment/feed cards pass 12), `onClick` / `onMouseEnter` / `onMouseLeave`.",isExperimental:true,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"FeedCard"},examples:[{name:"Default",description:"The surface hosting a composed header / body / footer.",code:"<Frame>\n    <FeedCard {...props}>\n      <Composed />\n    </FeedCard>\n  </Frame>"},{name:"Radius",description:"The `radius` prop — comment and feed cards pass 12.",code:"<Frame>\n    <div style={{ display: 'flex', gap: 24 }}>\n      <FeedCard width={260} radius={16}>\n        <div style={bodyStyle}>Default radius (16)</div>\n      </FeedCard>\n      <FeedCard width={260} radius={12}>\n        <div style={bodyStyle}>Comment/feed radius (12)</div>\n      </FeedCard>\n    </div>\n  </Frame>"},{name:"FullWidth",description:"Omit `width` to fill the container.",code:"<Frame>\n    <FeedCard>\n      <Composed />\n    </FeedCard>\n  </Frame>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FeedCard/FeedCard.tsx",figmaUrl:"https://www.figma.com/file/g7HMsT490usxg8oBs5olcD/Comment-Tool?node-id=2774-89203",keywords:["feedcard","comments","migration","guide","shared","outer","surface","chart","feed-item","cards","translucent"]},{name:"FeedItem",modulePath:"components/FeedItem",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FeedItem",specifier:"@corva/ui/components",exportName:"FeedItem"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"FeedItem",description:"",code:"{\n  const styles = useStyles();\n\n  return (\n    <ProvidePermissions>\n      <div className={styles.root} style={{ width: containerWidth }}>\n        {feedItems.map(feedItem => (\n          <div key={feedItem.type} className={styles.itemContainer}>\n            <div>\n              {FEED_ITEM_TYPES_BY_KEY[feedItem.type].label} ({feedItem.type}):\n            </div>\n            <FeedItemComponent\n              feedItem={feedItem}\n              timestamp={null}\n              well={{}}\n              currentUser={{ first_name: 'Test', last_name: 'User' }}\n              enterEditMode={() => null}\n              appData={{}}\n            />\n          </div>\n        ))}\n      </div>\n    </ProvidePermissions>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FeedItem/FeedItem.js",keywords:["feeditem"]},{name:"FeedItemCard",modulePath:"components/FeedItemCard",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FeedItemCard",specifier:"@corva/ui/components",exportName:"FeedItemCard"},category:"v1",description:"See the [Comments migration guide](?path=/docs/components-v2-comments-migration-guide--docs). Non-comment counterpart to `CommentCard` on the same `FeedCard` surface — used for external / app-generated feed items (NPT, alerts, lessons-learned, …). Header (colored `icon` + `title` + timestamp, optional accent `subtitle`), a body (`children` and/or `contextRows`), and the shared reactions/replies footer (rendered only when a reaction handler is provided). Like `CommentCard` it caps at 256px and scrolls its content internally.",isExperimental:true,isDeprecated:false,props:[{name:"activity",type:"FeedActivityProps",required:false,description:"Runs the card's own likes, replies and deletion. Omit to drive it from the props below."},{name:"icon",type:"ReactNode",required:true,description:""},{name:"iconBg",type:"string",required:false,description:""},{name:"iconColor",type:"string",required:false,description:""},{name:"title",type:"ReactNode",required:true,description:""},{name:"timestamp",type:"ReactNode",required:false,description:""},{name:"subtitle",type:"ReactNode",required:false,description:""},{name:"contextRows",type:"FeedItemContextRow[]",required:false,description:""},{name:"children",type:"ReactNode",required:false,description:""},{name:"isLiked",type:"boolean",required:false,description:""},{name:"likesCount",type:"number",required:false,description:""},{name:"commentsCount",type:"number",required:false,description:""},{name:"onLike",type:"() => void",required:false,description:""},{name:"onReplyToggle",type:"() => void",required:false,description:""},{name:"onForward",type:"() => void",required:false,description:""},{name:"menuItems",type:"CommentMenuItem[]",required:false,description:""},{name:"isReplyOpen",type:"boolean",required:false,description:""},{name:"replyInput",type:"ReactNode",required:false,description:""},{name:"replies",type:"CommentReply[]",required:false,description:""},{name:"hasMoreReplies",type:"boolean",required:false,description:""},{name:"moreRepliesCount",type:"number",required:false,description:""},{name:"onShowMoreReplies",type:"() => void",required:false,description:""},{name:"width",type:"number",required:false,description:""},{name:"onClick",type:"() => void",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"Header + body + context rows. No footer — no reaction handlers are supplied.",code:"<Frame>\n    <FeedItemCard icon={icon} title=\"NPT\" timestamp=\"04/16/26 18:11\" contextRows={contextRows}>\n      Con barrena PDC de 18 1/2” y sarta rotatoria estacionada, se mantiene en espera por\n      acondicionamiento de acceso.\n    </FeedItemCard>\n  </Frame>"},{name:"WithReactions",description:"Reactions/replies footer with an active like + counts and a kebab menu.",code:"<Frame>\n    <FeedItemCard\n      icon={icon}\n      title=\"NPT\"\n      timestamp=\"04/16/26 18:11\"\n      subtitle=\"Rig Name - Well Name\"\n      contextRows={contextRows}\n      isLiked\n      likesCount={3}\n      commentsCount={2}\n      onReplyToggle={() => {}}\n      onLike={() => {}}\n      menuItems={menuItems}\n    />\n  </Frame>"},{name:"RepliesExpanded",description:"Reply section open — reply input above the replies list (shared with CommentCard).",code:"<Frame>\n    <FeedItemCard\n      icon={icon}\n      title=\"NPT\"\n      timestamp=\"04/16/26 18:11\"\n      contextRows={contextRows}\n      commentsCount={1}\n      onReplyToggle={() => {}}\n      onLike={() => {}}\n      isReplyOpen\n      replyInput={\n        <CommentInput\n          bare\n          placeholder=\"Reply\"\n          autoFocus\n          onSubmit={() => {}}\n          leading={<Avatar size={32} name=\"Jane Roe\" />}\n        />\n      }\n      replies={[\n        {\n          id: 1,\n          author: { name: 'Name Name' },\n          timestamp: 'Nov 14 2025, 13:20',\n          body: 'Acknowledged — updating the plan.',\n          menuItems: [{ label: 'Delete', icon: <DeleteIcon size={16} />, onClick: () => {} }],\n        },\n      ]}\n    />\n  </Frame>"},{name:"LongContentScrolls",description:"Body longer than 256px — the card caps its height and scrolls internally.",code:"<Frame>\n    <FeedItemCard\n      icon={icon}\n      title=\"NPT\"\n      timestamp=\"04/16/26 18:11\"\n      contextRows={contextRows}\n      onLike={() => {}}\n      menuItems={menuItems}\n    >\n      {'Con barrena PDC de 18 1/2” y sarta rotatoria estacionada a la profundidad de 973 m, se mantiene en espera por acondicionamiento de acceso y terraplén de la presa de quema. '.repeat(\n        6\n      )}\n    </FeedItemCard>\n  </Frame>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FeedItemCard/FeedItemCard.tsx",keywords:["feeditemcard","comments","migration","guide","non-comment","counterpart","commentcard","same","feedcard","surface","used"]},{name:"FileIcon",modulePath:"components/FileIcon",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FileIcon",specifier:"@corva/ui/components",exportName:"FileIcon"},category:"v1",description:"Shows an icon of file type, based on `name` prop",isExperimental:false,isDeprecated:false,props:[{name:"name",type:"string",required:true,description:""}],propsList:{kind:"partial",undescended:["Omit<SvgIconProps, 'children' | 'name'>"]},examples:[{name:"Default",description:"",code:"<FileIcon {...props} />"},{name:"FileTypes",description:"Icon is determined by a filename's extension passed into `name` prop\n\nSupported extensions: `.pdf`, `.csv`, `.json`, `.edm.xml`, `.xml`, `.las`, `.txt`, `.pptx`, `.ppt`, `.xlsx`, `.xls`, `.docx`, `.doc`, `.jpg`, `.png`, `.jpeg`, `.gif`, `.bmp`, `.svg`, `.webp`, `.rar`, `.zip`, `.7z`, `.mp4`, `.avi`, `.mkv`, `.mov`, `.wmv`, `.flv`, `.webm`, `.mpg`, `.mpeg`, `.m4v`",code:"{\n  return (\n    <SbRow>\n      {ExtensionsToIconArray.map(([ext], index) => (\n        <div key={index} style={{ textAlign: 'center', width: '50px', fontSize: '12px' }}>\n          <FileIcon name={`file${ext}`} />\n          <br />\n          {ext}\n        </div>\n      ))}\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FileIcon/FileIcon.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=28893-113900",keywords:["fileicon","shows","icon","file","type","based","name","prop"]},{name:"FilePreview",modulePath:"components/FilePreview",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FilePreview",specifier:"@corva/ui/components",exportName:"FilePreview"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"fileName",type:"string",required:true,description:""},{name:"fileUrl",type:"string",required:true,description:""},{name:"handleFileDelete",type:"function",required:true,description:""},{name:"classes",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FilePreview/index.js",keywords:["filepreview"]},{name:"FilesDropzone",modulePath:"components/FilesDropzone",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FilesDropzone",specifier:"@corva/ui/components",exportName:"FilesDropzone"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onDrop",type:"DropzoneOptions['onDrop']",required:false,description:"Handles file drop"},{name:"children",type:"ReactNode",required:false,description:"Content to render"},{name:"multiple",type:"boolean",required:false,description:"Controls if dropzone accepts multiple files"},{name:"accept",type:"string[] | string",required:false,description:"Array of or comma-separated MIME types/File Extensions to accept\n\nNB: file extensions <b>must</b> start with `.`<br/>, otherwise they will be treated as MIME types\nfile extensions will be shown below the dropzone in the description\n\nExample:<br/>\n`.xsl,image/*,.csv`<br/>\nWill accept any file with `xsl` or `csv` extensions, and also - any file with `image/...` MIME type"},{name:"maxFiles",type:"number",required:false,description:"Maximum files to accept"},{name:"maxSize",type:"number",required:false,description:"Maximum file size to accept"},{name:"errorText",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<FilesDropzone {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FilesDropzone/FilesDropzone.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=74032-69042",keywords:["filesdropzone","upload","drag","drop","file","attachment"]},{name:"FilesLoader",modulePath:"components/FilesLoader",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FilesLoader",specifier:"@corva/ui/components",exportName:"FilesLoader"},category:"v1",description:"",isExperimental:false,isDeprecated:true,props:[],propsList:{kind:"partial",undescended:["PropTypes.InferProps<typeof filesLoaderPropTypes>"]},examples:[{name:"Default",description:"",code:"<FilesLoader {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FilesLoader/FilesLoader.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9520%3A19052",keywords:["filesloader"]},{name:"FilesLoaderV2",modulePath:"components/FilesLoaderV2",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FilesLoaderV2",specifier:"@corva/ui/components",exportName:"FilesLoaderV2"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"name",type:"string",required:true,description:""},{name:"total",type:"number",required:false,description:"Total progress value (bytes by default)\n\nIf undefined or < 0 - makes progress bar indeterminate"},{name:"current",type:"number",required:false,description:"Current progress value (bytes by default)\n\nIf undefined or < 0 - makes progress bar indeterminate"},{name:"errorText",type:"string",required:false,description:"Error to show"},{name:"onDelete",type:"() => void",required:false,description:"If exists - displays the \"Delete\" button"},{name:"onReload",type:"() => void",required:false,description:"If exists - displays the \"Reload\" button on error state"},{name:"onCancel",type:"() => void",required:false,description:"If exists - displays the \"Cancel\" button when loading"},{name:"formatProgress",type:"(total: number, current: number) => ReactNode",required:false,description:"Allows custom progress units"},{name:"className",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<FilesLoaderV2 {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FilesLoaderV2/FilesLoaderV2.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=74164-77295",keywords:["filesloaderv2"]},{name:"FilesProcessor",modulePath:"components/FilesProcessor",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FilesProcessor",specifier:"@corva/ui/components",exportName:"FilesProcessor"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"processFile",type:"FileProcessorFunction<T>",required:true,description:"Function that processes file (uploads, parses, etc.)\n\nAccepts 3 arguments:<br/>\n`file: File`<br/>\n`onProgress: (totalProgress: number, currentProgress: number) => void,`<br/>\n`registerOnCancel: (onCancel: Function) => void` - processing cancellation function"},{name:"onDone",type:"(results: T[]) => void",required:true,description:"Called when files are uploaded/reuploaded"},{name:"value",type:"ValueItem[]",required:false,description:"Files list to display\n\n`type ValueItem = {id: string | number; name: string;};`"},{name:"onDelete",type:"(item: ValueItem) => void",required:false,description:"Used in conjunction with `value`. Called when user presses \"delete\" button. If undefined - no button is shown"},{name:"onStartProcessing",type:"(files: File[]) => void",required:false,description:"Fired when file(s) selected for processing"},{name:"onProcessingFailure",type:"(file: File, isCancelled: boolean, error: Error) => void",required:false,description:"Fired when file processing failed or cancelled"},{name:"multiple",type:"FilesDropzoneProps['multiple']",required:false,description:"Controls if multiple files can be processed"},{name:"accept",type:"FilesDropzoneProps['accept']",required:false,description:"Array of or comma-separated MIME types/File Extensions to accept\n\nSee `FilesDropzone`'s props"},{name:"maxFiles",type:"FilesDropzoneProps['maxFiles']",required:false,description:"Maximum files to accept"},{name:"maxSize",type:"FilesDropzoneProps['maxSize']",required:false,description:"Maximum file size to accept"},{name:"formatProgress",type:"ProcessorProps<any>['formatProgress']",required:false,description:"Allows custom progress units"},{name:"className",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState(() => [\n    { id: 1, name: 'data.csv' },\n    { id: 2, name: 'more data.xlsx' },\n    { id: 3, name: 'My Cat.jpeg' },\n  ]);\n\n  // This function processes file (uploads/parses/etc) and optionally reports progress\n  const processFile: FileProcessorFunction<ProcessResult> = useCallback(\n    async (file, onProgress, registerOnCancel) => {\n      console.log('PROCESSING', file);\n      onProgress(600, 0);\n\n      registerOnCancel(() => console.log('CANCELLED', file));\n      for (let i = 0, c = 5; i < c; i++) {\n        onProgress(600, 100 * (i + 1));\n        await new Promise(r => setTimeout(r, 1000));\n      }\n\n      return {\n        id: Math.random() * 1000,\n        fileName: file.name,\n      };\n    },\n    []\n  );\n\n  // This typing is optional, you can rely on inferred types\n  // const TypedFilesProcessor = FilesProcessor<{ id: number; fileName: string }>;\n  return (\n    <FilesProcessor\n      {...props}\n      processFile={processFile}\n      value={value}\n      onDone={(results, ...rest) => {\n        props.onDone?.(results, ...rest);\n\n        const mapResults = (result: typeof results[number]) => ({\n          id: result.id,\n          name: result.fileName,\n        });\n\n        setValue(items => [...results.map(mapResults), ...items]);\n      }}\n      onDelete={(item, ...rest) => {\n        props.onDelete?.(item, ...rest);\n        setValue(items => items.filter(({ id }) => id !== item.id));\n      }}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FilesProcessor/FilesProcessor.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=73896-71907",keywords:["filesprocessor"]},{name:"FolderMenuItem",modulePath:"components/FolderMenuItem",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FolderMenuItem",specifier:"@corva/ui/components",exportName:"FolderMenuItem"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"folderColor",type:"string",required:true,description:""},{name:"isCreatable",type:"boolean",required:false,description:""},{name:"isOpen",type:"boolean",required:false,description:""},{name:"isSelected",type:"boolean",required:false,description:""},{name:"name",type:"string",required:true,description:""},{name:"onAdd",type:"function",required:true,description:""},{name:"onClick",type:"function",required:true,description:""},{name:"onToggle",type:"function",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FolderMenuItem/index.js",keywords:["foldermenuitem"]},{name:"FolderMenuItemWithLinks",modulePath:"components/FolderMenuItemWithLinks",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FolderMenuItemWithLinks",specifier:"@corva/ui/components",exportName:"FolderMenuItemWithLinks"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"id",type:"string",required:true,description:""},{name:"isOpen",type:"boolean",required:false,description:""},{name:"selectedItemId",type:"string",required:true,description:""},{name:"items",type:"array",required:false,description:""},{name:"name",type:"string",required:true,description:""},{name:"onItemClick",type:"function",required:true,description:""},{name:"onFolderClick",type:"function",required:false,description:""},{name:"folderColor",type:"string",required:true,description:""},{name:"isCreatable",type:"boolean",required:false,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"onAdd",type:"function",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FolderMenuItemWithLinks/index.js",keywords:["foldermenuitemwithlinks"]},{name:"Formula",modulePath:"components/Formula",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Formula",specifier:"@corva/ui/components",exportName:"Formula"},category:"v1",description:"Component for interactive formula editing",isExperimental:false,isDeprecated:false,props:[{name:"suggestions",type:"{ key: string; label: string; unit?: string; type: string }[]",required:false,description:""},{name:"initFormula",type:"string",required:false,description:""},{name:"onSave",type:"(param: { formula: string; variables: string[]; formulaFunc: FormulaObject }) => void",required:false,description:"`FormulaObject` is an instance of [fparser](https://github.com/bylexus/fparse)"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Formula {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Formula/Formula.tsx",figmaUrl:"https://www.figma.com/file/itdGcE7hIlVKUKtQCWyvL4/Traces?type=design&node-id=9320-489804",keywords:["formula","component","interactive","editing"]},{name:"GoogleDocsViewer",modulePath:"components/GoogleDocsViewer",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"GoogleDocsViewer",specifier:"@corva/ui/components/GoogleDocsViewer",form:"default"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"fileUrl",type:"string",required:true,description:""},{name:"webviewType",type:"enum",required:false,description:"",enumValues:["google","office"]},{name:"fileName",type:"string",required:false,description:""},{name:"fileSize",type:"number",required:false,description:""},{name:"onClose",type:"function",required:true,description:""},{name:"data-testid",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/GoogleDocsViewer/index.js",keywords:["googledocsviewer"]},{name:"GradientManager",modulePath:"components/GradientManager",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"GradientManager",specifier:"@corva/ui/components",exportName:"GradientManager"},category:"v1",description:"The Gradient Manager component takes care of the UI part of the shared user gradient feature and solves multiple problems as once.\n\n- It is *a gradient select*, that can be used in your app settings and allow a user to pick a gradient from the list. The `onChange` callback is invoked each time a user picks a gradient.\n- This component also allows a user to Manage gradients, e.g. to add, remove, and edit custom ones. The `onGradientsChange` callback is invoked on any of such user actions.\n\n#### Gradients Data\n**NOTE:** It is recommended to use `GradientManagerWithStorage` component for a DC app. As it will take care of storing gradients in User Settings.\n\nOtherwise the `GradientManager` itself does not store any data so you still need to implement two other essential parts in your app:\n\n- The storage. It should take care of fetching and storing gradients to User Settings. It should be quite small. See \"useGradientStorage\" implementation in the Formation Evaluation app for reference. It is a good idea to put this code close to the top of your application so you can share the data with any component of your app using props or context.\n- If your app stores *gradient stops* along with *gradientId* somewhere in your app (for example in Template configuration)then you have to update the stops every time user changes the gradient with linked id.\n\n#### Built-in gradients\nA set of predefined gradients is included in this component. You can also replace it with your own list. Only user created gradients are present in the argument of `onGradientsChange` callback. You can import `DEFAULT_GRADIENTS` from `@corva/ui/constants/componentsSettings`.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"GradientManager"},examples:[{name:"Default",description:"",code:"{\n  const [gradientId, setGradientId] = useState<Props['gradientId']>();\n  const [gradients, setGradients] = useState<Props['gradients']>([]);\n\n  return (\n    <GradientManager\n      {...props}\n      gradientId={gradientId}\n      gradients={gradients}\n      onChange={gradient => {\n        props.onChange?.(gradient);\n        setGradientId(gradient.gradientId);\n      }}\n      onGradientsChange={gradients => {\n        props.onGradientsChange?.(gradients);\n        setGradients(gradients);\n      }}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/GradientManager/GradientManager.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System",keywords:["gradientmanager","gradient","manager","component","takes","care","part","shared","user","feature","solves"]},{name:"GradientPicker",modulePath:"components/GradientPicker",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"GradientPicker",specifier:"@corva/ui/components",exportName:"GradientPicker"},category:"v1",description:"A component that allows modification of a gradient. Usage of `GradientManager` is recommended instead",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"GradientPicker"},examples:[{name:"Default",description:"",code:"<GradientPicker {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/GradientPicker/GradientPicker.tsx",keywords:["gradientpicker","component","allows","modification","gradient","usage","gradientmanager","recommended","instead"]},{name:"HeaderLayout",modulePath:"components/HeaderLayout/HeaderLayout",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"HeaderLayout",specifier:"@corva/ui/components",exportName:"HeaderLayout"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"array",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/HeaderLayout/HeaderLayout.js",keywords:["headerlayout"]},{name:"Hint",modulePath:"components/Hint",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Hint",specifier:"@corva/ui/components",exportName:"Hint"},category:"v1",description:"Used for attracting user's attention to new features, providing usage hints, etc",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"children",type:"ReactElement",required:false,description:"⚠️ Has to be a <i>single</i> reffable child (use `forwardRef` for custom components)"},{name:"title",type:"ReactNode",required:false,description:""},{name:"content",type:"ReactNode",required:false,description:""},{name:"confirmText",type:"ReactNode",required:false,description:""},{name:"onConfirm",type:"() => void",required:false,description:"Action button is shown only if this prop is present"},{name:"placement",type:"PopperProps['placement']",required:false,description:"Check [Positioned Popper](https://v4.mui.com/components/popper/#positioned-popper) example for more info"},{name:"anchorEl",type:"HTMLElement | null",required:false,description:"Allows anchoring to arbitrary element"},{name:"className",type:"string",required:false,description:""},{name:"onClose",type:"() => void",required:false,description:"Close button is shown only when this prop is present"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Hint {...props}>\n    <Button>\n      A single <Node />\n    </Button>\n  </Hint>"},{name:"AnchorEl",description:"`Hint` can be positioned relative to an arbitrary element by passing `anchorEl` prop.In this case, positioning relative to children is disabled",code:"{\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n\n  return (\n    <>\n      <Button ref={setAnchorEl}>This is not wrapped</Button>\n\n      <Hint content=\"I have children but am posiotioned to a button\" open anchorEl={anchorEl}>\n        <span>This is wrapped</span>\n      </Hint>\n    </>\n  );\n}"},{name:"AnchorElNoChild",description:"You can omit `Hint`'s children if you're using `anchorEl` prop",code:"{\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n\n  return (\n    <>\n      <Button ref={setAnchorEl}>This is not wrapped</Button>\n\n      <Hint content=\"I'm childless\" open anchorEl={anchorEl} />\n    </>\n  );\n}"},{name:"CustomComponents",description:"To position `Hint` to a custom component, or to a specific node inside the custom component, use `forwardRef`",code:"{\n  const CustomComponent = useMemo(\n    () =>\n      forwardRef<HTMLButtonElement>((_, ref) => {\n        return (\n          <div\n            style={{ border: '1px solid', padding: '50px', textAlign: 'center', margin: '0 20px' }}\n          >\n            I'm a child component\n            <br />\n            <button ref={ref}>I'm a feature button with forwarded ref</button>\n          </div>\n        );\n      }),\n    []\n  );\n\n  return (\n    <Hint content={\"I'm positioned to a forwarded ref\"} open>\n      <CustomComponent />\n    </Hint>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Hint/Hint.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=62479-3491",keywords:["hint","help","info","question","tooltip","information","used","attracting","user","attention","features","providing","usage","hints"]},{name:"IconButton",modulePath:"components/IconButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"IconButton",specifier:"@corva/ui/components",exportName:"IconButton"},category:"v1",description:"A wrapper around Material UI v4 IconButton component.",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"The content of the component."},{name:"onClick",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"variant",type:"'transparent' | 'contained' | 'default'",required:false,description:"",enumValues:["transparent","contained","default"]},{name:"className",type:"string",required:false,description:""},{name:"isActive",type:"boolean",required:false,description:""},{name:"tooltipProps",type:"Omit<TooltipProps, 'children'>",required:false,description:""},{name:"classes",type:"{\n    root?: string;\n    disabled?: string;\n    colorPrimary?: string;\n    sizeSmall?: string;\n  }",required:false,description:""},{name:"'data-testid'",type:"string",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit< MuiIconButtonProps, 'size' | 'variant' | 'classes' | 'className' | 'children' | 'onClick' >"]},examples:[{name:"Default",description:"",code:"<IconButton {...props} />"},{name:"Size",description:"Component supports 3 sizes through `size` prop:\n\n* `small`\n* `medium` (default)\n* `large`: for main buttons",code:"<SbRow>\n    <IconButton size=\"small\">\n      <SettingTwoIcon />\n    </IconButton>\n    <IconButton size=\"medium\">\n      <SettingTwoIcon />\n    </IconButton>\n    <IconButton size=\"large\">\n      <SettingTwoIcon />\n    </IconButton>\n  </SbRow>"},{name:"Variant",description:"Background is controlled through `variant` prop:\n\n- `default`\n- `contained`\n- `transparent`\n\n",code:"{\n  return (\n    <SbColumn>\n      <SbRow>\n        <IconButton variant=\"default\">\n          <SettingTwoIcon />\n        </IconButton>\n        <IconButton variant=\"contained\">\n          <SettingTwoIcon />\n        </IconButton>\n        <IconButton variant=\"transparent\">\n          <SettingTwoIcon />\n        </IconButton>\n      </SbRow>\n      <SbRow>\n        <IconButton variant=\"default\" color=\"primary\">\n          <SettingTwoIcon />\n        </IconButton>\n        <IconButton variant=\"contained\" color=\"primary\">\n          <SettingTwoIcon />\n        </IconButton>\n        <IconButton variant=\"transparent\" color=\"primary\">\n          <SettingTwoIcon />\n        </IconButton>\n      </SbRow>\n    </SbColumn>\n  );\n}"},{name:"WithTooltip",description:"`IconButton` has an integrated `Tooltip`, controlled through `tooltipProps` prop. It is generally recommended to use this prop to give users an explanation of what a button does",code:"{\n  return (\n    <IconButton tooltipProps={{ title: 'I describe the action' }}>\n      <SettingTwoIcon />\n    </IconButton>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/IconButton/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9696%3A17373",keywords:["iconbutton","wrapper","around","material","component"]},{name:"IconMenu",modulePath:"components/IconMenu",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"IconMenu",specifier:"@corva/ui/components",exportName:"IconMenu"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"union",required:false,description:""},{name:"classes",type:"object",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"color",type:"string",required:false,description:""},{name:"IconElement",type:"ReactElement",required:false,description:""},{name:"IconButtonComponent",type:"any",required:false,description:""},{name:"iconButtonStyle",type:"object",required:false,description:""},{name:"anchorOrigin",type:"object",required:false,description:""},{name:"transformOrigin",type:"object",required:false,description:""},{name:"disableRipple",type:"boolean",required:false,description:""},{name:"data-testid",type:"string",required:false,description:""},{name:"marginThreshold",type:"number",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"tooltipProps",type:"object",required:false,description:""},{name:"menuProps",type:"object",required:false,description:""},{name:"iconButtonProps",type:"object",required:false,description:""},{name:"paperClassName",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/IconMenu/index.js",keywords:["iconmenu"]},{name:"InfiniteList",modulePath:"components/InfiniteList",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"InfiniteList",specifier:"@corva/ui/components/InfiniteList",form:"default"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"infiniteClassName",type:"string",required:false,description:""},{name:"useWindow",type:"boolean",required:false,description:""},{name:"headerComponent",type:"ReactNode",required:false,description:""},{name:"items",type:"array",required:true,description:""},{name:"showNoItemsFound",type:"boolean",required:true,description:""},{name:"noItemsFoundLabel",type:"string",required:true,description:""},{name:"infiniteContainerHeight",type:"number",required:false,description:""},{name:"moreItemsMayExist",type:"boolean",required:true,description:""},{name:"pathToCreatedAt",type:"array",required:true,description:""},{name:"renderItem",type:"function",required:true,description:""},{name:"loadItems",type:"function",required:true,description:""},{name:"threshold",type:"number",required:false,description:""},{name:"initialLoad",type:"boolean",required:false,description:""},{name:"divideByPeriods",type:"boolean",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/InfiniteList/index.js",keywords:["infinitelist"]},{name:"LabelsCounter",modulePath:"components/LabelsCounter",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"LabelsCounter",specifier:"@corva/ui/components",exportName:"LabelsCounter"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"items",type:"array",required:true,description:""},{name:"limit",type:"number",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/LabelsCounter/LabelsCounter.js",keywords:["labelscounter"]},{name:"LinkedText",modulePath:"components/LinkedText",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"LinkedText",specifier:"@corva/ui/components",exportName:"LinkedText"},category:"v1",description:"Renders text with any urls in it turned into links.\n\nContent that is already rendered — a mention, say — passes through untouched, so a comment body made of mixed text and elements keeps its mentions while its urls become clickable.\n\n`mirror` paints the links without making them clickable, for a copy positioned behind a textarea so that links show up as they are typed.",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"mirror",type:"boolean",required:false,description:"Paints the links without making them clickable, for a copy sitting behind a textarea: the\nfield on top takes the clicks, and a screen reader reads it rather than this."},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<LinkedText {...props}>Have a look at https://corva.ai/dashboards before the shift.</LinkedText>"},{name:"Variants",description:"",code:"<SbColumn>\n    <LinkedText {...props}>No link in this one.</LinkedText>\n\n    <LinkedText {...props}>\n      Two of them: https://corva.ai/one and https://corva.ai/two — both clickable.\n    </LinkedText>\n\n    <LinkedText {...props}>Ends a sentence: https://corva.ai/report.pdf.</LinkedText>\n\n    <LinkedText {...props}>\n      https://corva-files.s3.amazonaws.com/corva/1/traces.png?X-Amz-Expires=900&X-Amz-Signature=abc\n    </LinkedText>\n\n    <LinkedText {...props}>\n      {['Ping ', <b key=\"mention\">@Mark</b>, ' about https://corva.ai/dashboards']}\n    </LinkedText>\n  </SbColumn>"},{name:"Mirror",description:"",code:"<div style={{ position: 'relative', height: 24 }}>\n    <LinkedText {...props} mirror>\n      Paste a link and it lights up: https://corva.ai/dashboards\n    </LinkedText>\n  </div>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/LinkedText/LinkedText.tsx",keywords:["linkedtext","renders","text","urls","turned","into","links","content","already","rendered","mention"]},{name:"LoadingIndicator",modulePath:"components/LoadingIndicator",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"LoadingIndicator",specifier:"@corva/ui/components",exportName:"LoadingIndicator"},category:"v1",description:"Used to provide a visusal clue that the page/app is loading. Takes all available space by default.",isExperimental:false,isDeprecated:false,props:[{name:"white",type:"boolean",required:false,description:""},{name:"size",type:"number",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"fullscreen",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<div style={{ height: '200px' }}>\n    <LoadingIndicator {...props} />\n  </div>"},{name:"Fullscreen",description:"Component can be used in \"fullscreen\" or \"inline\" modes:\n\n- `fullscreen={true}`: component has `position: absolute`, has its width and height set to 100%, and the image inside is centered vertically and horizontally. Should be used when a whole page/app is being loaded.\n- `fullscreen={false}`: component is displayed as an ordinary `div`. Should be used when a relatively small section is being loaded",code:"{\n  const style = { height: '200px', width: '45%', position: 'relative' } as CSSProperties;\n\n  return (\n    <SbRow>\n      <div style={style}>\n        <LoadingIndicator fullscreen />\n      </div>\n      <div style={style}>\n        <LoadingIndicator fullscreen={false} />\n      </div>\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/LoadingIndicator/LoadingIndicator.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=13182%3A1005",keywords:["loadingindicator","used","provide","visusal","clue","page","loading","takes","available","space","default"]},{name:"MenuItem",modulePath:"components/MenuItem",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"MenuItem",specifier:"@corva/ui/components",exportName:"MenuItem"},category:"v1",description:"Used to render menu items with icons. Use MUI Menus. Read more information on the MUI docs page [here](https://material-ui.com/api/menu-item/)",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Menu item content"},{name:"disabled",type:"boolean",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"DisabledTooltipProps",type:"Omit<TooltipProps, 'children'>",required:false,description:""},{name:"classes",type:"Record<string, string>",required:false,description:""},{name:"onClick",type:"() => void",required:false,description:""},{name:"selected",type:"boolean",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit< MuiMenuItemProps, 'children' | 'disabled' | 'className' | 'classes' | 'onClick' | 'selected' >"]},examples:[{name:"Default",description:"",code:"<MenuItem {...props} />"},{name:"UsageExample",description:"Basic usage example is shown here",code:"{\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>(undefined);\n  const [selectedItem, setSelectedItem] = useState<number>();\n\n  const icons = new Array(5).fill(null);\n\n  return (\n    <>\n      <Button onClick={e => setAnchorEl(e.currentTarget)}>Open Menu</Button>\n      <Popover open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={() => setAnchorEl(undefined)}>\n        {icons.map((_, index) => (\n          <MenuItem\n            onClick={() => setSelectedItem(index)}\n            selected={selectedItem === index}\n            key={index}\n          >\n            Menu Item {index}\n          </MenuItem>\n        ))}\n      </Popover>\n    </>\n  );\n}"},{name:"Disabled",description:"Use `DisabledTooltipProps` prop to add a tooltip to a disabled menu item",code:"{\n  return (\n    <MenuItem\n      disabled\n      DisabledTooltipProps={{\n        title: 'Tooltip title goes here!',\n        placement: 'bottom',\n      }}\n    >\n      Disabled Menu Item\n    </MenuItem>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/MenuItem/index.tsx",keywords:["menuitem","used","render","menu","items","icons","menus","read","more","information","docs"]},{name:"MiddleTruncate",modulePath:"components/MiddleTruncate",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"MiddleTruncate",specifier:"@corva/ui/components",exportName:"MiddleTruncate"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"union",required:true,description:""},{name:"truncatedText",type:"string",required:false,description:""},{name:"onTruncate",type:"function",required:false,description:""},{name:"separator",type:"string",required:false,description:""},{name:"maxWidth",type:"number",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/MiddleTruncate/MiddleTruncate.js",keywords:["middletruncate"]},{name:"MiddleTruncatedText",modulePath:"components/MiddleTruncatedText",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"MiddleTruncatedText",specifier:"@corva/ui/components",exportName:"MiddleTruncatedText"},category:"v1",description:"A wrapper to \"intelligently\" truncate text: show only start and end portion",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"MiddleTruncatedText"},examples:[{name:"Default",description:"",code:"<div style={{ width: '200px' }}>\n    <MiddleTruncatedText {...props} />\n  </div>"},{name:"DynamicWidthAdjustment",description:"Component uses `ResizeObserver` to automatically adjust itself depending on the available space",code:"{\n  const min = 100;\n  const max = 300;\n  const [width, setWidth] = useState(200);\n\n  const NonReRenderingComponent = useMemo(\n    () =>\n      memo(() => (\n        <MiddleTruncatedText>\n          Some very long and verbose text to truncate that will be truncated dynamically\n        </MiddleTruncatedText>\n      )),\n    []\n  );\n\n  return (\n    <SbColumn>\n      <div style={{ width: '200px' }}>\n        Width: {width}px\n        <Slider\n          value={width}\n          onChange={(_, value) => setWidth(value instanceof Array ? value[0] : value)}\n          min={min}\n          max={max}\n        />\n      </div>\n      <div style={{ width: `${width}px` }}>\n        <NonReRenderingComponent />\n      </div>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/MiddleTruncatedText/MiddleTruncatedText.tsx",keywords:["middletruncatedtext","wrapper","intelligently","truncate","text","show","only","start","portion"]},{name:"Modal",modulePath:"components/Modal",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Modal",specifier:"@corva/ui/components",exportName:"Modal"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"partial",undescended:["ModalProps"]},examples:[{name:"Default",description:"",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n\n      <Modal\n        {...props}\n        open={isOpen}\n        onClose={(...args) => {\n          props.onClose?.(...args);\n          setIsOpen(false);\n        }}\n      />\n    </>\n  );\n}"},{name:"WithTitle",description:"Title is controlled through `title` prop",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n\n      <Modal open={isOpen} onClose={() => setIsOpen(false)} title=\"Title\" size=\"medium\">\n        Content\n      </Modal>\n    </>\n  );\n}"},{name:"WithActions",description:"Actions, controlled through the `actions` prop, are a `ReactNode` displayed under the content",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n\n  const styles = makeStyles(theme => ({\n    actions: {\n      display: 'flex',\n      gap: theme.spacing(2),\n      justifyContent: 'flex-end',\n    },\n  }))();\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n\n      <Modal\n        open={isOpen}\n        onClose={() => setIsOpen(false)}\n        title=\"Title\"\n        size=\"large\"\n        actionsClassName={styles.actions}\n        actions={\n          <>\n            <Button color=\"primary\" variant=\"text\" size=\"small\">\n              I'm a secondary action\n            </Button>\n            <Button color=\"primary\" variant=\"contained\" size=\"small\">\n              I'm a primary action\n            </Button>\n          </>\n        }\n      >\n        Content\n      </Modal>\n    </>\n  );\n}"},{name:"Sizes",description:"Modal's size is determined by the `size` prop:\n\n- `small`: `416px`\n- `medium`: `552px`\n- `large`: `768px`\n- `extraLarge`: takes `80%` of screen width, capped at `1152px`. Also takes all available vertical space",code:"{\n  const [size, setSize] = useState<Props['size']>();\n\n  const sizes: Record<Props['size'], Props['size']> = {\n    small: 'small',\n    medium: 'medium',\n    large: 'large',\n    extraLarge: 'extraLarge',\n  };\n\n  return (\n    <SbRow>\n      {Object.values(sizes).map(size => (\n        <Button key={size} onClick={() => setSize(size)}>\n          Open {size} Modal\n        </Button>\n      ))}\n\n      <Modal open={!!size} onClose={() => setSize(undefined)} title={`Size: ${size}`} size={size}>\n        Content\n      </Modal>\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Modal/Modal.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=16382%3A40936&mode=dev",keywords:["modal","dialog","popup","overlay","confirmation"]},{name:"NewCommentCursor",modulePath:"components/NewCommentCursor",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"NewCommentCursor",specifier:"@corva/ui/components",exportName:"NewCommentCursor"},category:"v1",description:"See the [Comments migration guide](?path=/docs/components-v2-comments-migration-guide--docs). White speech-bubble marker shown at the click point on the chart while adding a comment. Apps position it absolutely at the cursor/anchor; `size` controls the diameter.",isExperimental:true,isDeprecated:false,props:[{name:"size",type:"number",required:false,description:""},{name:"onClick",type:"() => void",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Playground",description:"",code:"<div style={{ background: '#1c1c1c', padding: 32 }}>\n    <NewCommentCursor {...props} />\n  </div>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/NewCommentCursor/NewCommentCursor.tsx",figmaUrl:"https://www.figma.com/file/g7HMsT490usxg8oBs5olcD/Comment-Tool",keywords:["newcommentcursor","comments","migration","guide","white","speech-bubble","marker","shown","click","point","chart"]},{name:"NewDocumentViewer",modulePath:"components/NewDocumentViewer",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"NewDocumentViewer",specifier:"@corva/ui/components",exportName:"NewDocumentViewer"},category:"v1",description:"An overlay that displays a file preview",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"fileUrl",type:"string",required:true,description:""},{name:"fileName",type:"string",required:true,description:"Determines the type in which the file will be displayed. Supported extensions: `csv`, `txt`, `json`, `pdf`, `xlsx`"},{name:"fileSize",type:"number",required:false,description:""},{name:"onClose",type:"() => void",required:true,description:""},{name:"'data-testid'",type:"string",required:false,description:""},{name:"classes",type:"any",required:false,description:""},{name:"webviewType",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [open, setOpen] = useState(false);\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Open preview</Button>\n\n      <NewDocumentViewer\n        {...props}\n        open={open}\n        onClose={(...args) => {\n          props.onClose?.(...args);\n          setOpen(false);\n        }}\n      />\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/NewDocumentViewer/NewDocumentViewer.tsx",keywords:["newdocumentviewer","overlay","displays","file","preview"]},{name:"Notifications",modulePath:"components/Notifications",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Notifications",specifier:"@corva/ui/components",exportName:"Notifications"},category:"v1",description:"Component that displays notifications.\n\nYou can use `NotificationsContainer` instead, that writes its API to `window` (and therefore should be unique to a page), and use utils methods to show notifications:\n```\nimport {showSuccessNotification} from '@corva/ui/utils';\n/* ... */\nshowSuccessNotification(message, options);\n```\nDefault auto-hide duration: `3000ms`",isExperimental:false,isDeprecated:false,props:[{name:"removeNotification",type:"(id: string) => void",required:true,description:""},{name:"notifications",type:"Notification[]",required:true,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<div style={{ height: '100px' }}>\n    <Notifications {...props} />\n  </div>"},{name:"NotificationTypes",description:"Notification type is set through `variant` property of an item in `notifications` prop.\n\n5 notification types are supported:\n\n- `error`\n- `info`\n- `success`\n- `warning`\n",code:"{\n  const variants: Record<\n    Props['notifications'][number]['variant'],\n    Props['notifications'][number]['variant']\n  > = {\n    error: 'error',\n    info: 'info',\n    success: 'success',\n    warning: 'warning',\n  };\n\n  return (\n    <div style={{ height: '350px' }}>\n      <Notifications\n        removeNotification={() => {}}\n        notifications={Object.values(variants).map(variant => ({\n          id: variant,\n          content: variant,\n          variant,\n        }))}\n      />\n    </div>\n  );\n}"},{name:"UsageWithContainer",description:"You can use `NotificationsContainer` and control notifications with utility methods imported from `@corva/ui/utils`. See example below",code:"{\n  /*\n    import {\n      showErrorNotification,\n      showInfoNotification,\n      showSuccessNotification,\n      showWarningNotification,\n    } from '@corva/ui/utils';\n   */\n\n  return (\n    <>\n      {/* In some other component */}\n      <NotificationsContainer />\n\n      <SbColumn>\n        <Button onClick={() => showErrorNotification('error')}>error</Button>\n        <Button onClick={() => showInfoNotification('info')}>info</Button>\n        <Button onClick={() => showSuccessNotification('success')}>success</Button>\n        <Button onClick={() => showWarningNotification('warning')}>warning</Button>\n      </SbColumn>\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Notifications/Notifications.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9597%3A20397",keywords:["notifications","component","displays","notificationscontainer","instead","writes","window","therefore","should","unique"]},{name:"OffsetWellButton",modulePath:"components/OffsetWellButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"OffsetWellButton",specifier:"@corva/ui/components",exportName:"OffsetWellButton"},category:"v1",description:"",isExperimental:false,isDeprecated:true,props:[{name:"onClick",type:"(args: any[]) => any",required:true,description:""},{name:"wells",type:"{ id?: number | null; title?: string | null }[]",required:false,description:""},{name:"label",type:"string",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"onExpand",type:"((...args: any[]) => any) | null",required:false,description:""},{name:"expanded",type:"boolean",required:false,description:""},{name:"offsetWellsLimited",type:"boolean",required:false,description:""},{name:"isTooltipDisabled",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<OffsetWellButton {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/OffsetWellButton/OffsetWellButton.tsx",keywords:["offsetwellbutton"]},{name:"OffsetWellMap",modulePath:"components/OffsetWellMap",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"OffsetWellMap",specifier:"@corva/ui/components",exportName:"OffsetWellMap"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/OffsetWellMap/OffsetWellMap.js",keywords:["offsetwellmap"]},{name:"OffsetWellPickerV2",modulePath:"components/OffsetWellPickerV2/OffsetWellPickerDialog",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"OffsetWellPickerV2",specifier:"@corva/ui/components",exportName:"OffsetWellPickerV2"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"isOpen",type:"boolean",required:true,description:""},{name:"defaultSubjectWellId",type:"number",required:false,description:""},{name:"companyId",type:"number",required:false,description:""},{name:"offsetSetting",type:"object",required:true,description:""},{name:"currentUser",type:"object",required:true,description:""},{name:"addWellsUsabilityInfo",type:"function",required:false,description:""},{name:"unusableWellAlarm",type:"string",required:false,description:""},{name:"isAdvancedSearch",type:"boolean",required:false,description:""},{name:"bestCount",type:"number",required:false,description:""},{name:"maxOffsetSize",type:"number",required:false,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"onClose",type:"function",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/OffsetWellPickerV2/OffsetWellPickerDialog.js",keywords:["offsetwellpickerv2"]},{name:"OffsetWellPickerV3",modulePath:"components/OffsetWellPickerV3",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"OffsetWellPickerV3",specifier:"@corva/ui/components",exportName:"OffsetWellPickerV3"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"dataSource",type:"custom",required:false,description:""},{name:"filterBasedOn",type:"custom",required:false,description:""},{name:"defaultSubjectWell",type:"object",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""},{name:"offsetSettings",type:"object",required:false,description:""},{name:"unusableWellAlarm",type:"custom",required:false,description:""},{name:"addWellsUsabilityInfo",type:"custom",required:false,description:""},{name:"onClose",type:"function",required:true,description:""},{name:"onSave",type:"function",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/OffsetWellPickerV3/index.js",keywords:["offsetwellpickerv3"]},{name:"OffsetWellPickerV4",modulePath:"components/OffsetWellPickerV4/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"OffsetWellPickerV4",specifier:"@corva/ui/components",exportName:"OffsetWellPickerV4"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/OffsetWellPickerV4/index.js",keywords:["offsetwellpickerv4"]},{name:"OffsetWellPickerV5",modulePath:"components/OffsetWellPickerV5/components/OffsetWellPickerV5WithStore/OffsetWellPickerV5WithStore",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"OffsetWellPickerV5",specifier:"@corva/ui/components",exportName:"OffsetWellPickerV5"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"OffsetWellPickerV5WithStore"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/OffsetWellPickerV5/components/OffsetWellPickerV5WithStore/OffsetWellPickerV5WithStore.tsx",keywords:["offsetwellpickerv5"]},{name:"PadModeSelect",modulePath:"components/PadModeSelect",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"PadModeSelect",specifier:"@corva/ui/components",exportName:"PadModeSelect"},category:"v1",description:"Pad/well mode selector rendered in the app header. Reads its data from `useAppCommons()` (so it must render inside an AppCommonsProvider).",isExperimental:false,isDeprecated:false,props:[{name:"padModeSetting",type:"PadModeSetting",required:false,description:""},{name:"assets",type:"Well[]",required:false,description:""},{name:"fracFleetLines",type:"FracFleetLine[]",required:true,description:""},{name:"completionAppType",type:"string",required:true,description:""},{name:"disableActiveWellsInPadSelect",type:"boolean",required:true,description:""},{name:"enableSimulFracInPadSelect",type:"boolean",required:true,description:""},{name:"onChange",type:"(value: PadModeSetting) => void",required:true,description:""},{name:"formControlClassName",type:"string",required:false,description:""},{name:"activeAssetComponent",type:"ComponentType<ActiveAssetProps>",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<div>\n    PadModeSelect renders inside an <code>AppCommonsProvider</code>. See the migration guide below.\n  </div>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/PadModeSelect/PadModeSelect.tsx",keywords:["padmodeselect","well","mode","selector","rendered","header","reads","data","useappcommons","must","render"]},{name:"PadOffsetsPicker",modulePath:"components/PadOffsetsPicker",importPath:"@corva/ui/components",importRecipe:{kind:"namespace-member",componentName:"PadOffsetsPicker",specifier:"@corva/ui/components",namespaceName:"PadOffsetsPicker",memberName:"PadOffsetsPicker"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"currentOffsetSetting",type:"array",required:true,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"companyId",type:"string",required:true,description:""},{name:"assets",type:"array",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/PadOffsetsPicker/PadOffsetsPicker.js",keywords:["padoffsetspicker"]},{name:"PadOffsetsPickerV2",modulePath:"components/PadOffsetsPickerV2",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"PadOffsetsPickerV2",specifier:"@corva/ui/components",exportName:"PadOffsetsPickerV2"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"PadOffsetsPickerV2"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/PadOffsetsPickerV2/PadOffsetsPickerV2.tsx",keywords:["padoffsetspickerv2"]},{name:"ParameterCharts",modulePath:"components/ParameterCharts",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ParameterCharts",specifier:"@corva/ui/components",exportName:"ParameterCharts"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"data",type:"object",required:true,description:""},{name:"mapping",type:"array",required:true,description:""},{name:"indexes",type:"object",required:true,description:""},{name:"settingsKey",type:"custom",required:false,description:""},{name:"settings",type:"object",required:false,description:""},{name:"onSettingsChange",type:"function",required:true,description:""},{name:"horizontal",type:"custom",required:false,description:""},{name:"multipleAssets",type:"custom",required:false,description:""},{name:"isLoading",type:"boolean",required:true,description:""},{name:"assestColors",type:"array",required:false,description:""}],propsList:{kind:"unjudged"},examples:[{name:"HorizontalChart",description:"",code:"{\n  const [settings, setSettings] = useState({});\n\n  return (\n    <>\n      <AddEditTrack settings={settings} onSettingsChange={setSettings} mapping={mapping}>\n        <AddOneIcon fill=\"#03BCD4\" fontSize={16} />\n      </AddEditTrack>\n      <ParameterCharts\n        data={{ dataCollection }}\n        mapping={mapping}\n        settings={settings}\n        onSettingsChange={setSettings}\n        horizontal\n        indexes={{\n          min: 18312,\n          max: 18323,\n          keys: {\n            dataCollection: {\n              key: 'data.hole_depth_mean',\n              name: 'Depth',\n              unit: 'ft',\n              unitType: 'length',\n              collection: 'dataCollection',\n            },\n          },\n        }}\n        // settingsKey\n      />\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ParameterCharts/ParameterCharts.js",keywords:["parametercharts"]},{name:"PinnableFilters",modulePath:"components/PinnableFilters/PinnableFilters",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"PinnableFilters",specifier:"@corva/ui/components",exportName:"PinnableFilters"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"array",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/PinnableFilters/PinnableFilters.js",keywords:["pinnablefilters"]},{name:"Popover",modulePath:"components/Popover",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Popover",specifier:"@corva/ui/components",exportName:"Popover"},category:"v1",description:"MUI Popover. Read more information on the MUI docs page  [here](https://v4.mui.com/api/popover/)",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"anchorEl",type:"HTMLElement | (() => HTMLElement)",required:true,description:"A HTML element, or a function that returns it. It's used to set the position of the popover."},{name:"children",type:"ReactNode",required:false,description:"The content of the component."},{name:"onClose",type:"() => void",required:false,description:""},{name:"anchorOrigin",type:"{\n    horizontal: 'center' | 'left' | 'right' | number;\n    vertical: 'bottom' | 'center' | 'top' | number;\n  }",required:false,description:"This is the point on the anchor where the popover's anchorEl will attach to. This is not used when the anchorReference is 'anchorPosition'.\\nOptions: vertical: [top, center, bottom]; horizontal: [left, center, right]."},{name:"transformOrigin",type:"{\n    horizontal: 'center' | 'left' | 'right' | number;\n    vertical: 'bottom' | 'center' | 'top' | number;\n  }",required:false,description:"This is the point on the popover which will attach to the anchor's origin.\\nOptions: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]."}],propsList:{kind:"partial",undescended:["Omit< MuiPopoverProps, 'open' | 'anchorEl' | 'onClose' | 'children' | 'anchorOrigin' | 'transformOrigin' >"]},examples:[{name:"Default",description:"",code:"{\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLButtonElement>();\n\n  return (\n    <>\n      <Button ref={ref} onClick={() => setOpen(true)}>\n        Open menu\n      </Button>\n\n      <Popover {...props} open={open} anchorEl={ref.current} onClose={() => setOpen(false)} />\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Popover/Popover.tsx",keywords:["popover","popup","overlay","floating","hover","read","more","information","docs","page","here"]},{name:"Popper",modulePath:"components/Popper",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Popper",specifier:"@corva/ui/components",exportName:"Popper"},category:"v1",description:"A wrapper over Popper - a barebones component that positions come content as a popover.\n\nAll props are passed through to it's base. Refer to MUI [documentation](https://v4.mui.com/api/popper/) and [examples](https://v4.mui.com/components/popper/) for more information",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"Contents of the popover"},{name:"open",type:"boolean",required:true,description:""},{name:"anchorEl",type:"HTMLElement | (() => HTMLElement)",required:true,description:"Defines an HTML node to which the content will be positioned"},{name:"placement",type:"'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'",required:false,description:"Defines placement",enumValues:["bottom-end","bottom-start","bottom","left-end","left-start","left","right-end","right-start","right","top-end","top-start","top"]}],propsList:{kind:"partial",undescended:["Omit<MuiPopperProps, 'children' | 'anchorEl' | 'open' | 'placement'>"]},examples:[{name:"Default",description:"",code:"{\n  const [anchorEl, setAnchorEl] = useState<HTMLElement>();\n  return (\n    <>\n      <Button onClick={e => setAnchorEl(anchorEl ? undefined : e.currentTarget)}>\n        Toggle Open\n      </Button>\n      <Popper {...props} open={!!anchorEl} anchorEl={anchorEl} />\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Popper/Popper.tsx",keywords:["popper","floating","positioned","overlay","popup","wrapper","over","barebones","component","positions","come","content","popover","props"]},{name:"PostInput",modulePath:"components/PostInput",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"PostInput",specifier:"@corva/ui/components",exportName:"PostInput"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"userCompanyId",type:"union",required:true,description:""},{name:"className",type:"string",required:false,description:""},{name:"onKeyDown",type:"function",required:false,description:""},{name:"onChange",type:"function",required:false,description:""},{name:"initialValue",type:"object",required:false,description:""},{name:"filePreviewWrapperClass",type:"string",required:false,description:""},{name:"suggestionsPortalHost",type:"ReactNode",required:false,description:""},{name:"allowSuggestionsAboveCursor",type:"boolean",required:false,description:""},{name:"smallerView",type:"boolean",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/PostInput/PostInput.js",keywords:["postinput"]},{name:"PostPreviewDialog",modulePath:"components/PostPreviewDialog",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"PostPreviewDialog",specifier:"@corva/ui/components/PostPreviewDialog",form:"default"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/PostPreviewDialog/index.js",keywords:["postpreviewdialog"]},{name:"PriceInput",modulePath:"components/PriceInput",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"PriceInput",specifier:"@corva/ui/components",exportName:"PriceInput"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"InputProps",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/PriceInput/PriceInput.js",keywords:["priceinput"]},{name:"RangeSlider",modulePath:"components/RangeSlider",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"RangeSlider",specifier:"@corva/ui/components",exportName:"RangeSlider"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"from",type:"number",required:true,description:"Range start value"},{name:"to",type:"number",required:true,description:"Range end value"},{name:"onChange",type:"(range: { from: number; to: number }) => void",required:false,description:"Callback function called every time `from` or `to` values are changed. Bound to mousemove event"},{name:"min",type:"number",required:false,description:"Minimum value"},{name:"max",type:"number",required:false,description:"Maximum value"},{name:"orientation",type:"'horizontal' | 'vertical'",required:false,description:"",enumValues:["horizontal","vertical"]},{name:"precision",type:"number",required:false,description:"Digits after decimal point"},{name:"minRange",type:"number",required:false,description:"Minimum allowed difference between `from` and `to` values"},{name:"isSingleRange",type:"boolean",required:false,description:"Fixes range's lower border, effectively turning the component into a single-value `Slider`"},{name:"isWithoutInput",type:"boolean",required:false,description:"Hides input fields on the edges of the slider"},{name:"disabled",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<Parameters<Props['onChange']>[0]>({\n    from: props.from,\n    to: props.to,\n  });\n\n  return (\n    <RangeSlider\n      {...props}\n      from={value.from}\n      to={value.to}\n      onChange={(range, ...rest) => {\n        props.onChange?.(range, ...rest);\n        setValue(range);\n      }}\n    />\n  );\n}"},{name:"Vertical",description:"Component can be displayed as a vertical slider through the use of `orientation` prop\n\nIn this case the component will take all available vertical space",code:"{\n  const [value, setValue] = useState<Parameters<Props['onChange']>[0]>({\n    from: 20,\n    to: 40,\n  });\n\n  return (\n    <div style={{ height: '300px' }}>\n      <RangeSlider\n        from={value.from}\n        to={value.to}\n        onChange={range => setValue(range)}\n        orientation=\"vertical\"\n      />\n    </div>\n  );\n}"},{name:"AsASlider",description:"Component can work in a \"slider\" mode when `from` is fixed, and user can only move the `to` handle. Use `isSingleRange` prop for this",code:"{\n  const [value, setValue] = useState(0);\n  const [value2, setValue2] = useState(50);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <RangeSlider from={0} to={value} onChange={range => setValue(range.to)} isSingleRange />\n      <RangeSlider from={20} to={value2} onChange={range => setValue2(range.to)} isSingleRange />\n    </SbColumn>\n  );\n}"},{name:"MinimumRange",description:"You can set the minimum range size through `minRange` prop.\n\nUser won't be able to select a range smaller than this prop",code:"{\n  const [value, setValue] = useState<Parameters<Props['onChange']>[0]>({\n    from: 20,\n    to: 40,\n  });\n\n  return (\n    <RangeSlider\n      from={value.from}\n      to={value.to}\n      onChange={range => setValue(range)}\n      minRange={10}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/RangeSlider/RangeSlider.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A7373&mode=dev",keywords:["rangeslider"]},{name:"ResizableTable",modulePath:"components/ResizableTable",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ResizableTable",specifier:"@corva/ui/components",exportName:"ResizableTable"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"ResizableTable"},examples:[{name:"TableResizable",description:"",code:"export function TableResizable({ size, withCheckboxes }) {\n  const [order, setOrder] = useState('asc');\n  const [orderBy, setOrderBy] = useState('calories');\n  const [selected, setSelected] = useState([]);\n  const [page, setPage] = useState(0);\n  const [rowsPerPage, setRowsPerPage] = useState(10);\n  const [isLoading, setIsLoading] = useState(true);\n\n  const handleChangePage = (event, newPage) => {\n    setPage(newPage);\n  };\n\n  const createSortHandler = (property, handleRequestSort) => event => {\n    handleRequestSort(event, property);\n  };\n\n  const handleChangeRowsPerPage = event => {\n    setRowsPerPage(+event.target.value);\n    setPage(0);\n  };\n\n  const handleRequestSort = (event, property) => {\n    const isAsc = orderBy === property && order === 'asc';\n    setOrder(isAsc ? 'desc' : 'asc');\n    setOrderBy(property);\n  };\n\n  const handleSelectAllClick = event => {\n    if (event.target.checked) {\n      const newSelecteds = rows.map(n => n.name);\n      setSelected(newSelecteds);\n      return;\n    }\n    setSelected([]);\n  };\n\n  const handleClick = (event, name) => {\n    const selectedIndex = selected.indexOf(name);\n    let newSelected = [];\n\n    if (selectedIndex === -1) {\n      newSelected = newSelected.concat(selected, name);\n    } else if (selectedIndex === 0) {\n      newSelected = newSelected.concat(selected.slice(1));\n    } else if (selectedIndex === selected.length - 1) {\n      newSelected = newSelected.concat(selected.slice(0, -1));\n    } else if (selectedIndex > 0) {\n      newSelected = newSelected.concat(\n        selected.slice(0, selectedIndex),\n        selected.slice(selectedIndex + 1)\n      );\n    }\n\n    setSelected(newSelected);\n  };\n\n  const isSelected = name => selected.indexOf(name) !== -1;\n\n  useEffect(() => {\n    const isLoadingTimeout = setTimeout(() => {\n      setIsLoading(false);\n    }, 1500);\n\n    return () => clearTimeout(isLoadingTimeout);\n  }, []);\n\n  return (\n    <div style={{ width: 1200, backgroundColor: '#212121' }}>\n      {withCheckboxes && (\n        <TableToolbar\n          numSelected={selected.length}\n          actions={\n            <IconButton size={size === 'medium' ? 'medium' : 'small'}>\n              <Tooltip title=\"Delete\">\n                <DeleteIcon />\n              </Tooltip>\n            </IconButton>\n          }\n          content={\n            <div>\n              <Typography variant=\"h6\" id=\"tableTitle\" component=\"div\">\n                Nutrition\n              </Typography>\n            </div>\n          }\n        />\n      )}\n      <TableContainer style={{ width: 1200 }}>\n        <ResizableTable>\n          <TableHead>\n            <TableRow>\n              {withCheckboxes && (\n                <StyledTableCell\n                  className={classNames({ dense: size === 'dense' })}\n                  style={{\n                    paddingTop: 0,\n                    paddingBottom: 0,\n                    verticalAlign: 'middle',\n                    border: '1px solid #808080',\n                  }}\n                >\n                  <Checkbox\n                    indeterminate={selected.length > 0 && selected.length < rows.length}\n                    checked={rows.length > 0 && selected.length === rows.length}\n                    onChange={handleSelectAllClick}\n                    size=\"small\"\n                  />\n                </StyledTableCell>\n              )}\n              {headCells.map(headCell => (\n                <StyledTableCell\n                  className={size === 'dense' ? 'dense' : ''}\n                  key={headCell.id}\n                  align=\"left\"\n                  sortDirection={orderBy === headCell.id ? order : false}\n                  style={{ border: '1px solid #808080' }}\n                >\n                  <TableSortLabel\n                    active={orderBy === headCell.id}\n                    direction={orderBy === headCell.id ? order : 'asc'}\n                    onClick={createSortHandler(headCell.id, handleRequestSort)}\n                  >\n                    {headCell.label}\n                  </TableSortLabel>\n                </StyledTableCell>\n              ))}\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {isLoading\n              ? rows.map(row => (\n                  <TableRow key={row.id}>\n                    {headCells.map(column => (\n                      <TableCell\n                        key={`${column.id}-${row.id}`}\n                        style={{ height: SKELETON_HEIGHT_BY_SIZE[size].cell }}\n                      >\n                        <Skeleton\n                          animation=\"wave\"\n                          variant=\"text\"\n                          style={{ height: SKELETON_HEIGHT_BY_SIZE[size].sceleton }}\n                        />\n                      </TableCell>\n                    ))}\n                  </TableRow>\n                ))\n              : stableSort(rows, getComparator(order, orderBy)).map((row, index) => {\n                  const isItemSelected = isSelected(row.name);\n                  return (\n                    <TableRow\n                      hover\n                      onClick={withCheckboxes ? event => handleClick(event, row.name) : () => {}}\n                      role=\"checkbox\"\n                      tabIndex={-1}\n                      key={row.name}\n                    >\n                      {withCheckboxes && (\n                        <StyledTableCell\n                          className={classNames({ dense: size === 'dense' })}\n                          style={{ paddingTop: 0, paddingBottom: 0 }}\n                        >\n                          <Checkbox size=\"small\" checked={isItemSelected} />\n                        </StyledTableCell>\n                      )}\n                      <StyledTableCell\n                        className={size === 'dense' ? 'dense' : ''}\n                        id={`enhanced-table-checkbox-${index}`}\n                        scope=\"row\"\n                      >\n                        {row.name}\n                      </StyledTableCell>\n                      <StyledTableCell className={size === 'dense' ? 'dense' : ''} align=\"left\">\n                        {row.calories}\n                      </StyledTableCell>\n                      <StyledTableCell className={size === 'dense' ? 'dense' : ''} align=\"left\">\n                        {row.fat}\n                      </StyledTableCell>\n                      <StyledTableCell className={size === 'dense' ? 'dense' : ''} align=\"left\">\n                        {row.carbs}\n                      </StyledTableCell>\n                      <StyledTableCell className={size === 'dense' ? 'dense' : ''} align=\"left\">\n                        {row.protein}\n                      </StyledTableCell>\n                    </TableRow>\n                  );\n                })}\n          </TableBody>\n        </ResizableTable>\n        <TablePagination\n          rowsPerPageOptions={[10, 25, 100]}\n          component=\"div\"\n          count={rows.length}\n          rowsPerPage={rowsPerPage}\n          page={page}\n          onChangePage={handleChangePage}\n          onChangeRowsPerPage={handleChangeRowsPerPage}\n        />\n      </TableContainer>\n    </div>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ResizableTable/ResizableTable.tsx",keywords:["resizabletable"]},{name:"Search",modulePath:"components/Search",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Search",specifier:"@corva/ui/components",exportName:"Search"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onChange",type:"(event: ChangeEvent<{}>, selected: any | any[] | null) => void",required:true,description:""},{name:"value",type:"object | object[]",required:false,description:""},{name:"options",type:"{ label?: string; id: string; group?: string }[]",required:false,description:""},{name:"AutocompleteProps",type:"{\n    getOptionDisabled?: (option: any) => boolean;\n    forcePopupIcon?: boolean;\n  }",required:false,description:""},{name:"allChecked",type:"boolean",required:false,description:""},{name:"TextFieldProps",type:"{\n    label?: string;\n    endAdornment?: ReactNode;\n  }",required:false,description:""},{name:"selectedGroup",type:"{\n    name?: string;\n    id?: string;\n  }",required:false,description:""},{name:"onGroupReset",type:"MouseEventHandler<HTMLSpanElement>",required:false,description:""},{name:"onClose",type:"() => void",required:false,description:""},{name:"disableClearable",type:"boolean",required:false,description:""},{name:"disableResetOnGroupChange",type:"boolean",required:false,description:"MUI Autocomplete triggers onInputChange when startAdornment is changed (via selectedGroup update).\nIf disableResetOnGroupChange is true, we won't store a new value in onInputChange when the 'reason' is \"reset\".\nAdditionally, handleSelectedGroupChange won't trigger handleInputReset if disableResetOnGroupChange is true."},{name:"onInputChange",type:"(value: string) => void",required:false,description:""},{name:"getOptionLabel",type:"(option: any) => string",required:false,description:""},{name:"onGroupChange",type:"(group: { name?: string; id?: string }) => void",required:false,description:""},{name:"loading",type:"boolean",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"multiple",type:"boolean",required:false,description:""},{name:"optionSize",type:"'large'",required:false,description:""},{name:"popupIcon",type:"ReactNode",required:false,description:""},{name:"InputProps",type:"Partial<MuiInputProps>",required:false,description:""},{name:"ListboxProps",type:"object",required:false,description:""},{name:"classes",type:"Partial<{\n      popper: string;\n      listbox: string;\n      popupIndicator: string;\n      popupIndicatorOpen: string;\n      groupChip: string;\n    } & Record<string, string>>",required:false,description:""},{name:"onInputChangeCallback",type:"(newInputValue: string, reason: string) => void",required:false,description:""},{name:"placeholder",type:"string",required:false,description:""},{name:"RecentSearchesComponent",type:"ComponentType<any>",required:false,description:""},{name:"ListboxComponent",type:"any",required:false,description:""},{name:"recentSearchesMaxCount",type:"number",required:false,description:""},{name:"dataStorageKey",type:"string",required:false,description:""},{name:"dataStorage",type:"object",required:false,description:""},{name:"groups",type:"{ id: string; name: string }[]",required:false,description:""},{name:"GroupsComponent",type:"ComponentType<{\n    onGroupClick: (id: string) => void;\n    groups: { id: string; name: string }[];\n  }>",required:false,description:""},{name:"onOpen",type:"(e: any) => void",required:false,description:""},{name:"renderCustomOption",type:"(option: any, state: any) => ReactNode",required:false,description:""},{name:"onInputReset",type:"() => void",required:false,description:""},{name:"isHiddenAllOption",type:"boolean",required:false,description:""},{name:"isHiddenAllLabel",type:"boolean",required:false,description:""},{name:"paperFooter",type:"ReactNode",required:false,description:""},{name:"isOpenedFromParent",type:"boolean",required:false,description:""},{name:"popperProps",type:"Partial<{ style: object }>",required:false,description:""},{name:"onFocus",type:"() => void",required:false,description:""},{name:"inputProps",type:"object",required:false,description:""},{name:"noOptionsText",type:"string",required:false,description:""},{name:"isPrioritizedSelectedOptions",type:"boolean",required:false,description:""},{name:"shouldResetInputOnAutocompleteChange",type:"boolean",required:false,description:"There is a check if it is multiple search then we should keep input value on autocomplete change\nBut now there is another case, when we should reset input value on autocomplete change\nThis new prop allows to have both options"}],propsList:{kind:"partial",undescended:["Omit< AutocompleteProps<any, false, false, false>, | 'value' | 'onChange' | 'options' | 'onClose' | 'disableClearable' | 'onInputChange' | 'getOptionLabel' | 'loading' | 'disabled' | 'multiple' | 'popupIcon' | 'ListboxProps' | 'classes' | 'placeholder' | 'ListboxComponent' | 'onOpen' | 'onFocus' | 'inp' | 'noOptionsText' | 'renderInput' | 'PopperComponent' | 'open' | 'forcePopupIcon' | 'fullWidth' | 'renderGroup' | 'disableCloseOnSelect' | 'renderOption' | 'groupBy' | 'PaperComponent' | 'inputValue' | 'getOptionDisabled' | 'loadingText' | 'InputProps' | 'isNullable' >"]},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState();\n  return (\n    <Search\n      {...props}\n      value={value}\n      options={options}\n      onChange={(event, value, ...rest) => {\n        props.onChange?.(event, value, ...rest);\n        setValue(value);\n      }}\n    />\n  );\n}"},{name:"MultipleSelection",description:"You can switch `Search` to a multiple selection mode with `multiple` prop.\n\nN.B: in this case, `value` prop *must* be an array, and `onChange` receives an array as its second argument",code:"{\n  const [value, setValue] = useState([]);\n  return (\n    <Search\n      multiple\n      value={value}\n      options={options}\n      onChange={(_e, value) => {\n        console.log(value);\n        setValue(value);\n      }}\n    />\n  );\n}"},{name:"GroupedOptions",description:"You can group your options by adding `group` property to items in `options` prop.\n\nBy adding a `GroupsComponent` prop, you can display a group selection block. Component provides a default one as it's own `Search.Groups` property, but you can use your own implementation.",code:"{\n  const [value, setValue] = useState();\n  const [group, setGroup] = useState<Props['selectedGroup']>();\n\n  const groups: Props['groups'] = [\n    { id: 'ondOne', name: 'Great Old Ones' },\n    { id: 'elderGod', name: 'Elder Gods' },\n  ];\n\n  const optionsWithGroups = [\n    ...options.map(option => ({ ...option, group: 'Great Old Ones' })),\n\n    { id: '11', group: 'Elder Gods', label: 'Adaedu' },\n    { id: '12', group: 'Elder Gods', label: 'Alithlai' },\n    { id: '13', group: 'Elder Gods', label: 'Amaterasu' },\n    { id: '14', group: 'Elder Gods', label: 'Bast' },\n    { id: '15', group: 'Elder Gods', label: 'Dveahtehs' },\n\n    // Groupless\n    { id: '21', label: 'Ian Moone' },\n    { id: '22', label: 'Enoch Bowen' },\n    { id: '23', label: 'Herbert West' },\n  ];\n\n  return (\n    <SbColumn>\n      <Search\n        value={value}\n        options={optionsWithGroups}\n        onChange={(_e, value) => setValue(value)}\n        onGroupChange={group => setGroup(group)}\n        onGroupReset={() => setGroup(undefined)}\n        GroupsComponent={Search.Groups}\n        groups={groups}\n        selectedGroup={group}\n        placeholder={'With \"default\" GroupsComponent'}\n      />\n\n      <Search\n        value={value}\n        options={optionsWithGroups}\n        onChange={(_e, value) => setValue(value)}\n        onGroupChange={group => setGroup(group)}\n        onGroupReset={() => setGroup(undefined)}\n        GroupsComponent={({ groups, onGroupClick }) => {\n          return (\n            <>\n              {groups.map(group => (\n                <Button key={group.id} size=\"small\" onClick={() => onGroupClick(group.id)}>\n                  {group.name}\n                </Button>\n              ))}\n            </>\n          );\n        }}\n        groups={groups}\n        selectedGroup={group}\n        placeholder=\"With custom GroupsComponent\"\n      />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Search/Search.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=30300%3A122250&mode=dev",keywords:["search"]},{name:"SearchInput",modulePath:"components/SearchInput",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"SearchInput",specifier:"@corva/ui/components",exportName:"SearchInput"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"handleSearch",type:"function",required:true,description:""},{name:"className",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/SearchInput/index.js",keywords:["searchinput"]},{name:"Select",modulePath:"components/Select",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Select",specifier:"@corva/ui/components",exportName:"Select"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"Select"},examples:[{name:"Default",description:"",code:"<Select {...props}>\n    {options.map(({ id, name }) => (\n      <MenuItem key={id} value={id}>\n        {name}\n      </MenuItem>\n    ))}\n  </Select>"},{name:"ErrorState",description:"Component supports \"error\" state, turned on by `error` prop. To add error description, use the `formHelperText` prop",code:"<Select value=\"1\" error formHelperText=\"I am error text\">\n    {options.map(({ id, name }) => (\n      <MenuItem key={id} value={id}>\n        {name}\n      </MenuItem>\n    ))}\n  </Select>"},{name:"WithIcons",description:"Use `startAdornment` prop and `<InputAdornment/>` to add an icon or an arbitrary content at the start of a Select",code:"{\n  return (\n    <Select\n      value=\"1\"\n      startAdornment={\n        <InputAdornment position=\"start\">\n          <LayersIcon size={16} />\n        </InputAdornment>\n      }\n    >\n      {options.map(({ id, name }) => (\n        <MenuItem key={id} value={id}>\n          {name}\n        </MenuItem>\n      ))}\n    </Select>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Select/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A7954&mode=dev",keywords:["select","dropdown","choose","pick","options"]},{name:"SlateFormattedText",modulePath:"components/SlateFormattedText",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"SlateFormattedText",specifier:"@corva/ui/components",exportName:"SlateFormattedText"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"text",type:"string",required:false,description:""},{name:"textsList",type:"array",required:false,description:""},{name:"defaultText",type:"union",required:false,description:""},{name:"defaultRenderingTextNode",type:"ReactNode",required:false,description:""},{name:"locator",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/SlateFormattedText/SlateFormattedText.js",keywords:["slateformattedtext"]},{name:"StatusBadge",modulePath:"components/StatusBadge",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"StatusBadge",specifier:"@corva/ui/components",exportName:"StatusBadge"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"assetsData",type:"AssetData",required:false,description:""},{name:"appWidth",type:"number",required:true,description:""},{name:"className",type:"string",required:false,description:""},{name:"DQIssueTooltipMaxHeight",type:"number",required:false,description:""},{name:"iconType",type:"'error' | 'success' | 'issue' | ''",required:false,description:"",enumValues:["error","success","issue",""]},{name:"lastTimestamp",type:"number",required:false,description:""},{name:"warningData",type:"Record<string, any>",required:false,description:""},{name:"hasSubscriptionsData",type:"boolean",required:false,description:""},{name:"maximized",type:"boolean",required:false,description:""},{name:"statusBadgeContentClassName",type:"string",required:false,description:""},{name:"tooltipPlacement",type:"TooltipProps['placement']",required:false,description:""},{name:"setAssetsData",type:"Dispatch<SetStateAction<AssetData | { hasSubscriptionsData?: boolean }>>",required:true,description:""}],propsList:{kind:"complete"},examples:[{name:"StatusBadge",description:"",code:"{\n  return (\n    <div style={{ marginTop: 400 }}>\n      <StatusBadgeComponent\n        assetsData={assetsData}\n        appWidth={appWidth}\n        DQIssueTooltipMaxHeight={DQIssueTooltipMaxHeight}\n        iconType={iconType}\n        lastTimestamp={lastTimestamp}\n        warningData={warningData}\n        tooltipPlacement={tooltipPlacement}\n      />\n    </div>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/StatusBadge/index.tsx",keywords:["statusbadge"]},{name:"Stepper",modulePath:"components/Stepper",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Stepper",specifier:"@corva/ui/components",exportName:"Stepper"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"steps",type:"ComponentProps<typeof Step>[]",required:true,description:""},{name:"className",type:"string",required:false,description:""},{name:"activeStep",type:"number",required:false,description:""},{name:"size",type:"Size",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Stepper {...props} />"},{name:"Sizes",description:"Component supports 2 sizes, provided as its own `SIZES` property. Using `Stepper.SIZES.*` is preferred:\n\n- `SIZE.Medium` (daefault)\n- `SIZE.Large`",code:"<SbColumn>\n    <Stepper steps={meta.args.steps.slice(0, 2)} size={Stepper.SIZE.Medium} />\n    <Stepper steps={meta.args.steps.slice(0, 2)} size={Stepper.SIZE.Large} />\n  </SbColumn>"},{name:"StepParameters",description:"`steps` prop item has the following shape:\n\n```tsx\n\ntype StepProps = {\n  // Content\n  value: ReactNode;\n  label?: ReactNode;\n  tooltip?: ReactNode;\n  goBackTooltip?: ReactNode;\n\n  // State\n  checked?: boolean;\n  active?: boolean;\n  error?: boolean;\n  disabled?: boolean;\n  size?: Size;\n\n  // Utility\n  className?: string;\n  canGoBack?: boolean;\n  onClick?: () => void;\n};\n```",code:"{\n  return (\n    <Stepper\n      activeStep={4}\n      steps={[\n        { value: '1', label: 'Passed step' },\n        {\n          value: '2',\n          label: (\n            <>\n              Passed step\n              <br />\n              (hoverable)\n            </>\n          ),\n          onClick: log,\n        },\n        {\n          value: '3',\n          label: (\n            <>\n              Passed step\n              <br />\n              (no way back)\n            </>\n          ),\n          onClick: log,\n          canGoBack: false,\n        },\n        { value: '4', label: 'Active Step' },\n        { value: '5', label: 'Disabled Step', disabled: true },\n        { value: '6', label: 'Step with error', error: true },\n      ]}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Stepper/Stepper.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=70173-98742",keywords:["stepper","wizard","steps","progress","flow"]},{name:"StyledMenuItem",modulePath:"components/StyledMenuItem",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"StyledMenuItem",specifier:"@corva/ui/components",exportName:"StyledMenuItem"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/StyledMenuItem/index.js",keywords:["styledmenuitem"]},{name:"SwitchControl",modulePath:"components/SwitchControl/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"SwitchControl",specifier:"@corva/ui/components",exportName:"SwitchControl"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"SwitchControlComponent"},examples:[{name:"Default",description:"",code:"{\n  const [checked, setChecked] = useState(false);\n\n  return (\n    <SwitchControl\n      {...props}\n      checked={checked}\n      onChange={(_, value) => {\n        props.onChange?.(_, value);\n        setChecked(value);\n      }}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/SwitchControl/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9699%3A2848&mode=dev",keywords:["switchcontrol"]},{name:"Table",modulePath:"components/Table/Table/Table",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Table",specifier:"@corva/ui/components",exportName:"Table"},category:"v1",description:"`<TableHead />`, `<TableBody />`, and `<TableRow />` are direct reexports from MUI, with same API. You can read more about them here:\n\n- [TableHead](https://v4.mui.com/api/table-head/)\n- [TableBody](https://v4.mui.com/api/table-body/)\n- [TableRow](https://v4.mui.com/api/table-row/)\n",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"The content of the table, normally TableHead and TableBody."}],propsList:{kind:"partial",undescended:["Omit<MuiTableProps, 'children'>"]},examples:[{name:"Default",description:"",code:"<Table {...props}>\n    <TableHead>\n      <TableRow>\n        <TableCell width={300} />\n        <TableCell width=\"20%\">Rick Astley</TableCell>\n        <TableCell>Other people</TableCell>\n      </TableRow>\n    </TableHead>\n\n    <TableBody>\n      <TableRow>\n        <TableCell>gonna give you up</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow>\n        <TableCell>gonna let you down</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow>\n        <TableCell>gonna run around and desert you</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow>\n        <TableCell>gonna make you cry</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow>\n        <TableCell>gonna say goodbye</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow>\n        <TableCell>gonna tell a lie and hurt you</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>"},{name:"StickyHeader",description:"To make `stickyHeader` work with `<TableContainer />`, is must have a fixed height.\n\nYou can pass `shadowColor` prop to control shadow colour. The prop accepts either background colour names (`B1 | B2 ... B11`), or a colour in any notation (`#FF0000`, `rgb(255, 0, 0)`, `red`, etc).",code:"{\n  const styles = makeStyles({ root: { height: 300 } })();\n\n  const content = (\n    <Table stickyHeader>\n      <TableHead>\n        <TableRow>\n          <TableCell width={300} />\n          <TableCell width=\"20%\">Rick Astley</TableCell>\n          <TableCell>Other people</TableCell>\n        </TableRow>\n      </TableHead>\n\n      <TableBody>\n        <TableRow>\n          <TableCell>gonna give you up</TableCell>\n          <TableCell>Never</TableCell>\n          <TableCell>Sometimes</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell>gonna let you down</TableCell>\n          <TableCell>Never</TableCell>\n          <TableCell>Sometimes</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell>gonna run around and desert you</TableCell>\n          <TableCell>Never</TableCell>\n          <TableCell>Sometimes</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell>gonna make you cry</TableCell>\n          <TableCell>Never</TableCell>\n          <TableCell>Sometimes</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell>gonna say goodbye</TableCell>\n          <TableCell>Never</TableCell>\n          <TableCell>Sometimes</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell>gonna tell a lie and hurt you</TableCell>\n          <TableCell>Never</TableCell>\n          <TableCell>Sometimes</TableCell>\n        </TableRow>\n      </TableBody>\n    </Table>\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <TableContainer stickyHeader className={styles.root} shadowColor=\"B5\">\n        {content}\n      </TableContainer>\n\n      <TableContainer stickyHeader className={styles.root} shadowColor=\"#ff0000\">\n        {content}\n      </TableContainer>\n    </SbColumn>\n  );\n}"},{name:"WithStickyColumnHeaders",description:"`<TableContainer />` gives an ability to have column headers \"stick\" while scrolling: use the `stickyColumn` prop",code:"{\n  const styles = makeStyles({\n    root: { height: 300, width: '100%' },\n    table: { width: '200%' },\n  })();\n\n  return (\n    <TableContainer stickyHeader stickyColumn className={styles.root}>\n      <Table stickyHeader className={styles.table}>\n        <TableHead>\n          <TableRow>\n            <TableCell width={300}>What?</TableCell>\n            <TableCell width={300}>Will he?</TableCell>\n            <TableCell width={300}>Will other people?</TableCell>\n          </TableRow>\n        </TableHead>\n\n        <TableBody>\n          <TableRow>\n            <TableCell>gonna give you up</TableCell>\n            <TableCell>Never</TableCell>\n            <TableCell>Sometimes</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell>gonna let you down</TableCell>\n            <TableCell>Never</TableCell>\n            <TableCell>Sometimes</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell>gonna run around and desert you</TableCell>\n            <TableCell>Never</TableCell>\n            <TableCell>Sometimes</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell>gonna make you cry</TableCell>\n            <TableCell>Never</TableCell>\n            <TableCell>Sometimes</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell>gonna say goodbye</TableCell>\n            <TableCell>Never</TableCell>\n            <TableCell>Sometimes</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell>gonna tell a lie and hurt you</TableCell>\n            <TableCell>Never</TableCell>\n            <TableCell>Sometimes</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </TableContainer>\n  );\n}"},{name:"RowStates",description:"",code:"<Table {...props}>\n    <TableHead>\n      <TableRow>\n        <TableCell width={300} />\n        <TableCell width=\"20%\">Rick Astley</TableCell>\n        <TableCell>Other people</TableCell>\n      </TableRow>\n    </TableHead>\n\n    <TableBody>\n      <TableRow hover selected>\n        <TableCell>gonna give you up</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow hover>\n        <TableCell>gonna let you down</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow hover>\n        <TableCell>gonna run around and desert you</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow hover>\n        <TableCell>gonna make you cry</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow hover>\n        <TableCell>gonna say goodbye</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow hover>\n        <TableCell>gonna tell a lie and hurt you</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Table/Table/Table.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A43261&mode=dev",keywords:["table","data","grid","list","rows","columns","tablehead","tablebody","tablerow","direct","reexports","same","read","more","about","them"]},{name:"Tabs",modulePath:"components/Tabs",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Tabs",specifier:"@corva/ui/components",exportName:"Tabs"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Contents of the component, for instance - `<Tab/>`s"},{name:"onChange",type:"(event: ChangeEvent, value: any) => void",required:false,description:""},{name:"compact",type:"boolean",required:false,description:""},{name:"type",type:"'default' | 'filled' | 'filledTab'",required:false,description:"",enumValues:["default","filled","filledTab"]},{name:"TabIndicatorProps",type:"Partial<React.HTMLAttributes<HTMLDivElement>> & {\n    classes: {\n      root: string;\n    };\n  }",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit< MuiTabsProps, 'type' | 'TabIndicatorProps' | 'onChange' | 'children' >"]},examples:[{name:"Default",description:"",code:"{\n  const [activeTab, setActiveTab] = useState(0);\n  return (\n    <Tabs\n      {...props}\n      value={activeTab}\n      onChange={(event, value) => {\n        props.onChange?.(event, value);\n        setActiveTab(value);\n      }}\n    >\n      {options.map(({ id, name }) => (\n        <Tab key={id} label={name} />\n      ))}\n    </Tabs>\n  );\n}"},{name:"TabsWithValue",description:"`<Tab />`s can have `value` prop, which will be passed to `onChange` as a second argument, and should be passed to `value` prop to mark corresponding tab as active",code:"{\n  const [activeTab, setActiveTab] = useState('Hastur');\n\n  return (\n    <>\n      <Tabs onChange={(_, value) => setActiveTab(value)} value={activeTab}>\n        {options.slice(0, 3).map(({ id, name }) => (\n          <Tab key={id} label={name} value={name} />\n        ))}\n      </Tabs>\n      <br />\n      Selected: {activeTab}\n    </>\n  );\n}"},{name:"WithDisabledTabs",description:"You can disable a tab by using its `disabled` prop. You can control tooltip's props with `DisabledTooltipProps` prop",code:"{\n  const [activeTab, setActiveTab] = useState(0);\n\n  return (\n    <SbColumn>\n      <Tabs type=\"default\" onChange={(_, value) => setActiveTab(value)} value={activeTab}>\n        <Tab\n          label=\"Hastur\"\n          disabled\n          DisabledTooltipProps={{ title: '\"Hastur\" tab is disabled because of reasons' }}\n        />\n        <Tab label=\"Chtulhu\" disabled />\n      </Tabs>\n      <Tabs type=\"filledTab\" onChange={(_, value) => setActiveTab(value)} value={activeTab}>\n        <Tab\n          label=\"Hastur\"\n          disabled\n          DisabledTooltipProps={{ title: '\"Hastur\" tab is disabled because of reasons' }}\n        />\n        <Tab label=\"Chtulhu\" disabled />\n      </Tabs>\n      <Tabs type=\"filled\" onChange={(_, value) => setActiveTab(value)} value={activeTab}>\n        <Tab\n          label=\"Hastur\"\n          disabled\n          DisabledTooltipProps={{ title: '\"Hastur\" tab is disabled because of reasons' }}\n        />\n        <Tab label=\"Chtulhu\" disabled />\n      </Tabs>\n    </SbColumn>\n  );\n}"},{name:"VerticalTabs",description:"Component supports vertical orientation. Use the `orientation` prop",code:"{\n  const [activeTab, setActiveTab] = useState(0);\n  return (\n    <div style={{ width: '200px' }}>\n      <Tabs onChange={(_, value) => setActiveTab(value)} value={activeTab} orientation=\"vertical\">\n        {options.map(({ id, name }) => (\n          <Tab key={id} label={name} />\n        ))}\n      </Tabs>\n    </div>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Tabs/Tabs.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9597%3A17644",keywords:["tabs","navigation","sections","panels","switch"]},{name:"TextField",modulePath:"components/TextField",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TextField",specifier:"@corva/ui/components",exportName:"TextField"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"value",type:"string | number | null | undefined",required:true,description:""},{name:"onChange",type:"ChangeEventHandler<HTMLInputElement>",required:false,description:""},{name:"startIcon",type:"React.ReactNode",required:false,description:""},{name:"endIcon",type:"React.ReactNode",required:false,description:""},{name:"InputProps",type:"MuiTextFieldProps['InputProps'] & { startAdornment?: React.ReactNode }",required:false,description:""},{name:"InputLabelProps",type:"MuiTextFieldProps['InputLabelProps'] & { startAdornment?: React.ReactNode }",required:false,description:""},{name:"onFocus",type:"FocusEventHandler<HTMLInputElement>",required:false,description:""},{name:"onBlur",type:"FocusEventHandler<HTMLInputElement>",required:false,description:""},{name:"endAdornment",type:"React.ReactNode",required:false,description:""},{name:"startAdornment",type:"React.ReactNode",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit< MuiTextFieldProps, | 'value' | 'startIcon' | 'endIcon' | 'InputProps' | 'InputLabelProps' | 'onFocus' | 'onBlur' | 'endAdornment' | 'startAdornment' | 'onChange' | 'classes' >"]},examples:[{name:"Default",description:"",code:"<TextField {...props} />"},{name:"Sizes",description:"Component supports 2 sizes, controlled through `size` prop:\n\n- `medium` (default)\n- `small`",code:"<SbColumn>\n    <TextField value=\"medium\" size=\"medium\" />\n    <TextField value=\"small\" size=\"small\" />\n  </SbColumn>"},{name:"WithLabelAndPlaceholder",description:"You can add placeholder to input through `placeholder` prop.\n\nPlease note, placeholder is visible only if there is no label or the field is focused",code:"<SbColumn>\n    <TextField placeholder=\"Placeholder\" value=\"\" />\n    <TextField label=\"Label\" placeholder=\"Placeholder\" value=\"\" />\n  </SbColumn>"},{name:"ErrorState",description:"Component supports \"error\" state, turned on by `error` prop. To add error description, use the `helperText` prop",code:"{\n  const [value, setValue] = useState('some text here');\n  return (\n    <TextField\n      label=\"Label\"\n      placeholder=\"Placeholder\"\n      value={value}\n      onChange={e => setValue(e.target.value)}\n      error\n      helperText=\"I am error text\"\n    />\n  );\n}"},{name:"PrefixesAndSuffixes",description:"You can add prefix and/or suffix through `startIcon` and `endIcon` props, respectively.",code:"<SbColumn>\n    <TextField\n      label=\"Label\"\n      placeholder=\"Placeholder\"\n      value=\"\"\n      startIcon={<ActivitySourceIcon size={16} />}\n    />\n    <TextField\n      label=\"Label\"\n      placeholder=\"Placeholder\"\n      value=\"\"\n      endIcon={<ActivitySourceIcon size={16} />}\n    />\n    <TextField\n      label=\"Label\"\n      placeholder=\"Placeholder\"\n      value=\"\"\n      startIcon={<ActivitySourceIcon size={16} />}\n      endIcon={<ActivitySourceIcon size={16} />}\n    />\n    <TextField\n      label=\"Label\"\n      placeholder=\"Placeholder\"\n      value=\"\"\n      startIcon=\"string prefix\"\n      endIcon=\"string suffix\"\n    />\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/TextField/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A7777",keywords:["textfield","form","input","text","field","entry"]},{name:"TextLink",modulePath:"components/TextLink",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TextLink",specifier:"@corva/ui/components",exportName:"TextLink"},category:"v1",description:"A simple text link. Has almost the same API as an `a` tag.\n\nBy default opens a link in a new tab, so you need to explicitly set `target=\"_self\"` to open your link in the current tab",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"Component's content"},{name:"href",type:"string",required:true,description:""},{name:"className",type:"string",required:false,description:""},{name:"color",type:"string",required:false,description:""},{name:"target",type:"'_self' | '_blank'",required:false,description:"",enumValues:["_self","_blank"]},{name:"disabled",type:"boolean",required:false,description:""},{name:"showTooltip",type:"boolean",required:false,description:""},{name:"tooltipText",type:"string",required:false,description:"Uses `href` if empty"},{name:"TooltipProps",type:"Omit<TooltipProps, 'children' | 'title'> & { title?: TooltipProps['title'] }",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<TextLink {...props} />"},{name:"WithTooltip",description:"You can show the tooltip using the `showTooltip` prop. The text is link's `href` by default, but you can change the tooltip text with `tooltipText` prop.\n\nWhen using `tooltipText`, you can omit the `showTooltip`",code:"<SbColumn>\n    <TextLink href=\"https://lovecraft.fandom.com/wiki/Church_of_Starry_Wisdom\" showTooltip>\n      Link\n    </TextLink>\n    <TextLink\n      href=\"https://lovecraft.fandom.com/wiki/Church_of_Starry_Wisdom\"\n      tooltipText=\"Church Of Starry Wisdom\"\n      showTooltip\n    >\n      Link\n    </TextLink>\n    <TextLink\n      href=\"https://lovecraft.fandom.com/wiki/Church_of_Starry_Wisdom\"\n      tooltipText=\"Church Of Starry Wisdom\"\n    >\n      Link\n    </TextLink>\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/TextLink/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9694%3A126",keywords:["textlink","link","anchor","hyperlink","navigate","url","simple","text","almost","same","default","opens","need","explicitly","target"]},{name:"Toaster",modulePath:"components/Toaster",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"Toaster",specifier:"@corva/ui/components/Toaster/Toaster",form:"named",exportName:"Toaster"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onDismiss",type:"() => void",required:true,description:""}],propsList:{kind:"partial",undescended:["ToasterType"]},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Toaster/Toaster.tsx",keywords:["toaster"]},{name:"Tooltip",modulePath:"components/Tooltip",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Tooltip",specifier:"@corva/ui/components",exportName:"Tooltip"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"title",type:"ReactNode",required:true,description:"Tooltip title. Zero-length titles string are never displayed."},{name:"children",type:"ReactElement",required:true,description:"Element to position a tooltip to.\n\n⚠️ Has to be a *single* reffable child (use `forwardRef` for custom components)"},{name:"isFullScreen",type:"boolean",required:false,description:""},{name:"disableFocusListener",type:"boolean",required:false,description:""},{name:"disableHoverListener",type:"boolean",required:false,description:"Do not respond to hover events."},{name:"disableTouchListener",type:"boolean",required:false,description:"Do not respond to long press touch events."},{name:"enterDelay",type:"number",required:false,description:"The number of milliseconds to wait before showing the tooltip.\nThis prop won't impact the enter touch delay (`enterTouchDelay`)."},{name:"enterNextDelay",type:"number",required:false,description:"The number of milliseconds to wait before showing the tooltip when one was already recently opened."},{name:"enterTouchDelay",type:"number",required:false,description:"The number of milliseconds a user must touch the element before showing the tooltip."},{name:"id",type:"string",required:false,description:"This prop is used to help implement the accessibility logic.\nIf you don't provide this prop. It falls back to a randomly generated id."},{name:"interactive",type:"boolean",required:false,description:"Makes a tooltip interactive, i.e. will not close when the user\nhovers over the tooltip before the `leaveDelay` is expired."},{name:"leaveDelay",type:"number",required:false,description:"The number of milliseconds to wait before hiding the tooltip.\nThis prop won't impact the leave touch delay (`leaveTouchDelay`)."},{name:"leaveTouchDelay",type:"number",required:false,description:"The number of milliseconds after the user stops touching an element before hiding the tooltip."},{name:"onClose",type:"(event: ChangeEvent<{}>) => void",required:false,description:"Callback fired when the component requests to be closed."},{name:"onOpen",type:"(event: ChangeEvent<{}>) => void",required:false,description:"Callback fired when the component requests to be open."},{name:"open",type:"boolean",required:false,description:"If `true`, the tooltip is shown."},{name:"placement",type:"'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'",required:false,description:"Tooltip placement.",enumValues:["bottom-end","bottom-start","bottom","left-end","left-start","left","right-end","right-start","right","top-end","top-start","top"]},{name:"classes",type:"Record<string, string>",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit< MuiTooltipProps, | 'title' | 'children' | 'disableFocusListener' | 'disableHoverListener' | 'disableTouchListener' | 'enterDelay' | 'enterNextDelay' | 'enterTouchDelay' | 'id' | 'interactive' | 'leaveDelay' | 'leaveTouchDelay' | 'onClose' | 'onOpen' | 'open' | 'placement' | 'classes' >"]},examples:[{name:"Default",description:"",code:"<Tooltip {...props}>\n    <Button>Hover me</Button>\n  </Tooltip>"},{name:"InteractiveTooltip",description:"Use `interactive` prop to make tooltip interactive: i.e. it will not close when the user hovers over the tooltip before the `leaveDelay` is expired.\n\n⚠️ If you're putting control elements into a tooltip, it's recommended to use `Popover` instead",code:"<Tooltip\n    title={\n      <>\n        Some content with a button:\n        <br />\n        <Button onClick={console.log}>Click me!</Button>\n      </>\n    }\n    interactive\n  >\n    <Button>Hover me</Button>\n  </Tooltip>"},{name:"ControlledTooltip",description:"Use `open` prop to control tooltip's state from outside",code:"{\n  const [open, setOpen] = useState(false);\n\n  return (\n    <SbRow alignItems=\"center\">\n      <Button onClick={() => setOpen(value => !value)}>Click to toggle</Button>\n      <Tooltip title=\"Tooltip text\" open={open}>\n        <span>Hover me and nothing happens</span>\n      </Tooltip>\n    </SbRow>\n  );\n}"},{name:"WithLargeContent",description:"Use `ScrollableTooltip` for tooltips with potentially very large content",code:"<ScrollableTooltip title={'Lorem ipsum dolor sit amet. '.repeat(300)} placement=\"left\">\n    <Button>Hover me</Button>\n  </ScrollableTooltip>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Tooltip/Tooltip.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9597%3A19173",keywords:["tooltip","hover","hint","help","info","popup"]},{name:"TracesEditModal",modulePath:"components/TracesEditModal",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"TracesEditModal",specifier:"@corva/ui/components/TracesEditModal/TracesEditModal",form:"default"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/TracesEditModal/TracesEditModal.js",keywords:["traceseditmodal"]},{name:"TruncatedText",modulePath:"components/TruncatedText",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TruncatedText",specifier:"@corva/ui/components",exportName:"TruncatedText"},category:"v1",description:"A wrapper around text to truncate it with an ellipsis. Supports multiline text",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"Text to truncate"},{name:"className",type:"string",required:false,description:""},{name:"maxLines",type:"number | null",required:false,description:""},{name:"showTooltip",type:"boolean",required:false,description:""}],propsList:{kind:"partial",undescended:["DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>"]},examples:[{name:"Default",description:"",code:"<div style={{ width: '400px' }}>\n    <TruncatedText {...props} />\n  </div>"},{name:"MultilineText",description:"You can truncate multiline text by setting `maxLines` to a number of lines desired",code:"{\n  const min = 1;\n  const max = 5;\n  const [lines, setLines] = useState(2);\n  return (\n    <SbColumn>\n      <div style={{ width: '200px' }}>\n        Lines: {lines}\n        <Slider\n          value={lines}\n          onChange={(_, value) => setLines(value instanceof Array ? value[0] : value)}\n          min={min}\n          max={max}\n        />\n      </div>\n      <TruncatedText maxLines={lines}>\n        Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century\n        BC text by the Roman statesman and philosopher Cicero, with words altered, added, and\n        removed to make it nonsensical and improper Latin.\n      </TruncatedText>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/TruncatedText/index.tsx",keywords:["truncatedtext","wrapper","around","text","truncate","ellipsis","supports","multiline"]},{name:"UserCard",modulePath:"components/UserCard",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"UserCard",specifier:"@corva/ui/components/UserCard",form:"default"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"user",type:"object",required:true,description:""},{name:"classes",type:"object",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/UserCard/index.js",keywords:["usercard"]},{name:"UserMention",modulePath:"components/UserMention",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"UserMention",specifier:"@corva/ui/components",exportName:"UserMention"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onChange",type:"function",required:false,description:""},{name:"singleLine",type:"boolean",required:false,description:""},{name:"suggestionsPortalHost",type:"object",required:false,description:""},{name:"value",type:"string",required:false,description:""},{name:"inputRef",type:"object",required:false,description:""},{name:"classes",type:"object",required:false,description:""},{name:"withLightTheme",type:"boolean",required:false,description:""},{name:"placeholder",type:"string",required:false,description:""},{name:"style",type:"object",required:false,description:""},{name:"mentionProps",type:"object",required:false,description:""},{name:"onMount",type:"function",required:false,description:""},{name:"onKeyDown",type:"function",required:false,description:""},{name:"onKeyUp",type:"function",required:false,description:""},{name:"onFocus",type:"function",required:false,description:""},{name:"onBlur",type:"function",required:false,description:""},{name:"autoFocus",type:"boolean",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""},{name:"companyId",type:"number",required:false,description:""},{name:"allowSuggestionsAboveCursor",type:"boolean",required:false,description:""},{name:"highlightLinks",type:"boolean",required:false,description:""},{name:"allowEmptyQuery",type:"boolean",required:false,description:"Show default users when only \"@\" is typed, instead of waiting for a search term."}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/UserMention/index.js",keywords:["usermention"]},{name:"VirtualizedTable",modulePath:"components/VirtualizedTable/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"VirtualizedTable",specifier:"@corva/ui/components",exportName:"VirtualizedTable"},category:"v1",description:"Virtualized table.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"VTableComponent"},examples:[{name:"Default",description:"",code:"<div style={{ height: '200px' }}>\n    <VirtualizedTable {...props} />\n  </div>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/VirtualizedTable/index.tsx",keywords:["virtualizedtable","virtualized","table"]},{name:"AddCommentPopover",modulePath:"components/AddComment/Popover",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AddCommentPopover",specifier:"@corva/ui/components",exportName:"AddCommentPopover"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onClose",type:"custom",required:false,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"anchorEl",type:"ReactNode",required:true,description:""},{name:"anchorOrigin",type:"custom",required:false,description:""},{name:"startAdornment",type:"custom",required:false,description:""},{name:"endAdornment",type:"custom",required:false,description:""},{name:"customContent",type:"custom",required:false,description:""},{name:"userCompanyId",type:"number",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AddComment/Popover.js",keywords:["addcommentpopover"]},{name:"AddCommentPopup",modulePath:"components/AddComment/Popup",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AddCommentPopup",specifier:"@corva/ui/components",exportName:"AddCommentPopup"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onClose",type:"custom",required:false,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"isProcessing",type:"custom",required:false,description:""},{name:"isSaveDisabled",type:"custom",required:false,description:""},{name:"startAdornment",type:"custom",required:false,description:""},{name:"endAdornment",type:"custom",required:false,description:""},{name:"actionsAdornment",type:"custom",required:false,description:""},{name:"customContent",type:"custom",required:false,description:""},{name:"userCompanyId",type:"number",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AddComment/Popup.js",keywords:["addcommentpopup"]},{name:"AddEditTrack",modulePath:"components/ParameterCharts/AddEditTrack",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AddEditTrack",specifier:"@corva/ui/components",exportName:"AddEditTrack"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"settingsKey",type:"string",required:false,description:""},{name:"multipleAssets",type:"boolean",required:false,description:""},{name:"settings",type:"object",required:false,description:""},{name:"onSettingsChange",type:"function",required:true,description:""},{name:"children",type:"ReactElement",required:true,description:""},{name:"id",type:"string",required:false,description:""},{name:"mapping",type:"array",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ParameterCharts/AddEditTrack.js",keywords:["addedittrack"]},{name:"AnnotationsList",modulePath:"components/Annotations/components/AnnotationsList/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AnnotationsList",specifier:"@corva/ui/components",exportName:"AnnotationsList"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"appId",type:"number",required:true,description:""},{name:"appTitle",type:"string",required:true,description:""},{name:"assetId",type:"number",required:true,description:""},{name:"assetCompanyId",type:"number",required:true,description:""},{name:"appSettings",type:"object",required:false,description:""},{name:"classes",type:"object",required:false,description:""},{name:"onClose",type:"function",required:true,description:""},{name:"currentUser",type:"object",required:true,description:""},{name:"isNative",type:"custom",required:false,description:""},{name:"dashboardType",type:"custom",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Annotations/components/AnnotationsList/index.js",keywords:["annotationslist"]},{name:"AnnotationsProvider",modulePath:"components/Annotations/AnnotationsContext",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AnnotationsProvider",specifier:"@corva/ui/components",exportName:"AnnotationsProvider"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Annotations/AnnotationsContext.js",keywords:["annotationsprovider"]},{name:"AppContext",modulePath:"components/DevCenter/AppContext",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppContext",specifier:"@corva/ui/components",exportName:"AppContext"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/AppContext.js",keywords:["appcontext"]},{name:"AppFilterPanelLayout",modulePath:"components/DevCenter/AppFilterPanelLayout/AppFilterPanelLayout",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppFilterPanelLayout",specifier:"@corva/ui/components",exportName:"AppFilterPanelLayout"},category:"v1",description:"Used to add app settings and/or filters as a sidebar",isExperimental:false,isDeprecated:false,props:[{name:"sideBarContent",type:"ReactNode",required:true,description:""},{name:"appSettingsPopoverProps",type:"Omit<AppSettingsPopoverProps, 'children' | 'classes'>",required:false,description:""},{name:"children",type:"ReactNode",required:false,description:""},{name:"classes",type:"{\n    appLayout?: string;\n    content?: string;\n    contentWrapper?: string;\n    header?: string;\n  }",required:false,description:""},{name:"header",type:"ReactNode",required:false,description:""},{name:"sideBarProps",type:"Omit<AppSideBarProps, 'anchor'>",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <Wrapper omitId>\n      <AppFilterPanelLayout\n        sideBarProps={{\n          isOpen,\n          setIsOpen,\n          header: 'Sidebar',\n          headerIcon: <CenterAlignmentIcon size={24} />,\n          onAllOptionsClick: console.log,\n        }}\n        appSettingsPopoverProps={{\n          defaultScrollable: true,\n          maxHeight: 480,\n        }}\n        {...props}\n      />\n    </Wrapper>\n  );\n}"},{name:"Tablet",description:"Component has a different look if it detects it's displayed on mobile, or in a narrow container. \nTo determine its container size, the component relies on a wrapper `#isolated-page-app-container`",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <Wrapper>\n      <AppFilterPanelLayout\n        sideBarProps={{\n          isOpen,\n          setIsOpen,\n          header: 'Sidebar',\n          headerIcon: <CenterAlignmentIcon size={24} />,\n          onAllOptionsClick: console.log,\n        }}\n        appSettingsPopoverProps={{\n          defaultScrollable: true,\n          maxHeight: 480,\n        }}\n        sideBarContent=\"Sidebar Content\"\n        header=\"Header content\"\n        children=\"Children\"\n      />\n    </Wrapper>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/AppFilterPanelLayout/AppFilterPanelLayout.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=16962%3A72580&mode=dev",keywords:["appfilterpanellayout","used","settings","filters","sidebar"]},{name:"AppHeader",modulePath:"components/DevCenter/AppHeader/AppHeader",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppHeader",specifier:"@corva/ui/components",exportName:"AppHeader"},category:"v1",description:"Use as a header for the application, can contain asset, and other information",isExperimental:false,isDeprecated:false,props:[{name:"app",type:"object",required:true,description:""},{name:"badge",type:"ReactNode",required:false,description:""},{name:"classes",type:"object",required:false,description:""},{name:"showLastAnnotation",type:"boolean",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""},{name:"appLastAnnotation",type:"object",required:false,description:""},{name:"updateCurrentDashboardAppLastAnnotation",type:"function",required:false,description:""},{name:"openAnnotationsList",type:"function",required:false,description:""},{name:"rig",type:"object",required:false,description:""},{name:"well",type:"object",required:false,description:""},{name:"fracFleet",type:"object",required:false,description:""},{name:"wells",type:"array",required:false,description:""},{name:"coordinates",type:"object",required:false,description:""},{name:"isMaximized",type:"boolean",required:false,description:""},{name:"appSettings",type:"object",required:false,description:""},{name:"onSettingChange",type:"function",required:false,description:""},{name:"children",type:"ReactNode",required:false,description:""},{name:"logoSrc",type:"string",required:false,description:""},{name:"primaryAssetStatusBadge",type:"ReactNode",required:false,description:""},{name:"PadModeComponent",type:"elementType",required:false,description:""},{name:"activeWellName",type:"string",required:false,description:""},{name:"rightSideContent",type:"ReactNode",required:false,description:""}],propsList:{kind:"unjudged"},examples:[{name:"Default",description:"",code:"<AppHeader {...props} />"},{name:"WithFracFleet",description:"",code:"<AppHeader\n    onSettingChange={console.log}\n    coordinates={{ pixelWidth: 1024 }}\n    app={{\n      package: {\n        manifest: {\n          application: {\n            name: 'App name',\n            segments: [SEGMENTS.COMPLETION],\n          },\n        },\n        version: '1.0.0',\n      },\n      settings: { fracFleetId: 'frac fleet id', padId: 42 },\n    }}\n    appSettings={{ fracFleetId: 'frac fleet id' }}\n    fracFleet={{\n      name: 'Frac Fleet name',\n      current_pad_id: 43,\n      pad_frac_fleets: [{ pad: { id: 42 } }],\n    }}\n  />"},{name:"WithPad",description:"",code:"<AppHeader\n    onSettingChange={console.log}\n    coordinates={{ pixelWidth: 1024 }}\n    app={{\n      package: {\n        manifest: {\n          application: {\n            name: 'App name',\n            segments: [SEGMENTS.COMPLETION],\n          },\n        },\n        version: '1.0.0',\n      },\n      settings: { fracFleetId: 'frac fleet id', padId: 42 },\n    }}\n    fracFleet={{\n      name: 'Frac Fleet name',\n      current_pad_id: 42,\n      pad_frac_fleets: [{ pad: { id: 42 } }],\n    }}\n    wells={[]}\n    appSettings={{ fracFleetId: 'frac fleet id' }}\n  />"},{name:"NoLabelNoWell",description:"",code:"<AppHeader\n    onSettingChange={console.log}\n    coordinates={{ pixelWidth: 1024 }}\n    app={{\n      package: {\n        manifest: {\n          application: {\n            name: 'App name',\n            segments: [SEGMENTS.DRILLING],\n          },\n        },\n        version: '1.0.0',\n      },\n      settings: { rigId: 'rig id' },\n    }}\n    rig={{ name: 'Rig name' }}\n  >\n    <OffsetWellButton onExpand={() => {}} expanded={false} wells={[]} onClick={() => {}} />\n  </AppHeader>"},{name:"WithLogo",description:"",code:"<AppHeader\n    onSettingChange={console.log}\n    coordinates={{ pixelWidth: 1024 }}\n    app={{\n      package: {\n        manifest: {\n          application: {\n            name: 'App name',\n            segments: [SEGMENTS.DRILLING],\n          },\n        },\n        version: '1.0.0',\n      },\n      settings: { rigId: 'rig id' },\n    }}\n    rig={{ name: 'Rig name' }}\n    logoSrc=\"https://upload.wikimedia.org/wikipedia/commons/1/18/Exxon_Mobil_Logo.svg\"\n  >\n    <OffsetWellButton onExpand={() => {}} expanded={false} wells={[]} onClick={() => {}} />\n  </AppHeader>"},{name:"WithLabel",description:"",code:"<AppHeader\n    onSettingChange={console.log}\n    coordinates={{ pixelWidth: 1024 }}\n    app={{\n      package: {\n        manifest: {\n          application: {\n            name: 'App name',\n            segments: [SEGMENTS.COMPLETION],\n          },\n        },\n        version: '1.0.0',\n        label: 'PROD',\n      },\n      settings: { wellId: 'well id' },\n    }}\n    rig={{ name: 'Rig name' }}\n    well={{ name: 'Well name' }}\n  >\n    <OffsetWellButton onExpand={() => {}} expanded={false} wells={[]} onClick={() => {}} />\n  </AppHeader>"},{name:"WithBetaLabel",description:"",code:"<AppHeader\n    onSettingChange={console.log}\n    coordinates={{ pixelWidth: 1024 }}\n    app={{\n      package: {\n        manifest: {\n          application: {\n            name: 'App name',\n            segments: [SEGMENTS.COMPLETION],\n          },\n        },\n        version: '1.0.0',\n        label: 'Beta',\n      },\n      settings: {},\n    }}\n    well={{ name: 'Well name', asset_id: 4200 }}\n  />"},{name:"WithWellStatusBadge",description:"",code:"<AppHeader\n    onSettingChange={console.log}\n    coordinates={{ pixelWidth: 1024 }}\n    app={{\n      package: {\n        manifest: {\n          application: {\n            name: 'App name',\n            segments: [SEGMENTS.COMPLETION],\n          },\n        },\n        version: '1.0.0',\n        label: 'Beta',\n      },\n      settings: {},\n    }}\n    well={{ name: 'Well name', asset_id: 4200 }}\n    primaryAssetStatusBadge={<AssetStatusBadge text=\"frac\" />}\n  />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/AppHeader/AppHeader.js",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?type=design&node-id=20186-86586&t=dpmyoDTafwPDvFsN-0",keywords:["appheader","header","application","contain","asset","other","information"]},{name:"AppsDataProvider",modulePath:"components/DevCenter/AppsDataProvider/AppsDataProvider",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppsDataProvider",specifier:"@corva/ui/components",exportName:"AppsDataProvider"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""},{name:"dashboardAssetId",type:"string",required:false,description:""},{name:"apps",type:"array",required:true,description:""},{name:"dashboardMeta",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/AppsDataProvider/AppsDataProvider.js",keywords:["appsdataprovider"]},{name:"AppSettingsAssetEditor",modulePath:"components/AssetEditor/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppSettingsAssetEditor",specifier:"@corva/ui/components",exportName:"AppSettingsAssetEditor"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"settings",type:"object",required:true,description:""},{name:"appType",type:"object",required:true,description:""},{name:"defaultValue",type:"any",required:false,description:""},{name:"onSettingsChange",type:"function",required:true,description:""},{name:"label",type:"string",required:false,description:""},{name:"isNullable",type:"boolean",required:false,description:""},{name:"appKey",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetEditor/index.js",keywords:["appsettingsasseteditor"]},{name:"AppSettingsAssetEditorV2",modulePath:"components/AssetEditorV2/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppSettingsAssetEditorV2",specifier:"@corva/ui/components",exportName:"AppSettingsAssetEditorV2"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"assetsLimit",type:"number",required:false,description:""},{name:"settings",type:"object",required:true,description:""},{name:"appType",type:"object",required:true,description:""},{name:"defaultValue",type:"any",required:false,description:""},{name:"secondaryDefaultValue",type:"any",required:false,description:""},{name:"onSettingsChange",type:"function",required:true,description:""},{name:"label",type:"string",required:false,description:""},{name:"isNullable",type:"boolean",required:false,description:""},{name:"isHiddenTitle",type:"boolean",required:false,description:""},{name:"appKey",type:"string",required:false,description:""},{name:"isVisibleMultipleAssetsToggle",type:"boolean",required:false,description:""},{name:"isDisabledSecondaryAssetSelect",type:"boolean",required:false,description:""},{name:"primaryAssetFields",type:"array",required:false,description:""},{name:"secondaryAssetFields",type:"array",required:false,description:""},{name:"secondaryAssetHelpText",type:"union",required:false,description:""},{name:"onChange",type:"function",required:false,description:""},{name:"elementsClassNames",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetEditorV2/index.js",keywords:["appsettingsasseteditorv2"]},{name:"AppSettingsDialog",modulePath:"components/DevCenter/DevCenterAppContainer/components/AppSettingsDialog/AppSettingsDialog",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppSettingsDialog",specifier:"@corva/ui/components",exportName:"AppSettingsDialog"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"AppSettingsComponent",type:"custom",required:false,description:""},{name:"app",type:"object",required:true,description:""},{name:"appData",type:"object",required:true,description:""},{name:"appName",type:"string",required:true,description:""},{name:"currentUser",type:"object",required:true,description:""},{name:"disableAppAssetSelection",type:"custom",required:false,description:""},{name:"isMultiRig",type:"boolean",required:true,description:""},{name:"isSettingsDialogHidden",type:"custom",required:false,description:""},{name:"layoutEnvironment",type:"object",required:true,description:""},{name:"onAppRemove",type:"custom",required:false,description:""},{name:"onCloneDashboard",type:"custom",required:false,description:""},{name:"onSettingsChange",type:"function",required:true,description:""},{name:"toggleAppSettingsDialog",type:"function",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/DevCenterAppContainer/components/AppSettingsDialog/AppSettingsDialog.js",keywords:["appsettingsdialog"]},{name:"AppSettingsPopover",modulePath:"components/DevCenter/AppSettingsPopover/AppSettingsPopover",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppSettingsPopover",specifier:"@corva/ui/components",exportName:"AppSettingsPopover"},category:"v1",description:"Used to display app settings under a dropdown menu for desktop, or modal for mobiles/tablets",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"Popover/Modal content"},{name:"classes",type:"PopoverProps['classes'] & {\n    popoverContent?: string;\n  }",required:false,description:""},{name:"Trigger",type:"((props: { onClick: (event: React.MouseEvent<HTMLElement>) => void; isActive: boolean }) => JSX.Element) | null",required:false,description:""},{name:"open",type:"boolean",required:false,description:""},{name:"defaultScrollable",type:"boolean",required:false,description:""},{name:"header",type:"ReactNode",required:false,description:""},{name:"iconSettingsProps",type:"Omit<IconButtonProps, 'children'>",required:false,description:""},{name:"maxHeight",type:"number | null",required:false,description:""},{name:"modalActions",type:"ReactNode",required:false,description:""},{name:"modalProps",type:"{}",required:false,description:""},{name:"onClose",type:"() => void",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit<PopoverProps, 'classes' | 'children' | 'open'>"]},examples:[{name:"Default",description:"",code:"<AppSettingsPopover {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/AppSettingsPopover/AppSettingsPopover.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=16382%3A40936&mode=dev",keywords:["appsettingspopover","used","display","settings","under","dropdown","menu","desktop","modal","mobiles","tablets"]},{name:"AppSideBar",modulePath:"components/DevCenter/AppSideBar/AppSideBar",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppSideBar",specifier:"@corva/ui/components",exportName:"AppSideBar"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"classes",type:"{\n    contentWrapper?: string;\n    content?: string;\n    header?: string;\n    openToggleContainer?: string;\n  }",required:false,description:""},{name:"anchor",type:"Anchor",required:false,description:""},{name:"children",type:"ReactNode",required:true,description:""},{name:"drawerPaperClassName",type:"string",required:false,description:""},{name:"drawerClassName",type:"string",required:false,description:""},{name:"expandedTooltipTitle",type:"string",required:false,description:""},{name:"collapsedTooltipTitle",type:"string",required:false,description:""},{name:"header",type:"ReactNode",required:false,description:""},{name:"headerIcon",type:"ReactNode",required:false,description:""},{name:"headerTitleIcon",type:"ReactNode",required:false,description:""},{name:"isOpen",type:"boolean",required:false,description:""},{name:"openedDrawerWidth",type:"string | number",required:false,description:""},{name:"setIsOpen",type:"(isOpen: boolean) => void",required:false,description:""},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"allOptionsButtonShown",type:"boolean",required:false,description:""},{name:"isAllOptionsSelected",type:"boolean",required:false,description:""},{name:"onAllOptionsClick",type:"(e: React.MouseEvent) => void",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"AppSideBar",description:"",code:"{\n  const styles = useStyles();\n  const [isOpen, setIsOpen] = useState(false);\n  const [isAllOptionsSelected, setIsAllOptionsSelected] = useState(false);\n\n  const [isChecked, setIsChecked] = useState(false);\n  const onChange = e => {\n    setIsChecked(e.target.checked);\n  };\n\n  const onAllOptionsClick = () => {\n    setIsChecked(!isAllOptionsSelected);\n    setIsAllOptionsSelected(prev => !prev);\n  };\n\n  return (\n    <div className={styles.container} style={{ height }}>\n      <div className={styles.header}>My awesome app</div>\n      <div className={styles.contentWrapper}>\n        {anchor === 'left' && (\n          <AppSideBarComponent\n            size={size}\n            isOpen={isOpen}\n            setIsOpen={setIsOpen}\n            anchor={anchor}\n            header={<span>filter</span>}\n            headerIcon={<CenterAlignmentIcon />}\n            allOptionsButtonShown={allOptionsButtonShown}\n            isAllOptionsSelected={isAllOptionsSelected}\n            onAllOptionsClick={onAllOptionsClick}\n          >\n            <div className={styles.scrollableContent}>\n              <div>\n                <SwitchControl\n                  title=\"Switch Control with two labels\"\n                  leftLabel=\"Left\"\n                  rightLabel=\"Right\"\n                  color=\"primary\"\n                  checked={isChecked}\n                  onChange={onChange}\n                />\n                <SwitchControl\n                  title=\"Switch Control with two labels\"\n                  rightLabel=\"Right\"\n                  leftLabel=\"Left\"\n                  color=\"primary\"\n                  checked={isChecked}\n                  onChange={onChange}\n                />\n              </div>\n              <div>Scroll start</div>\n              <div>Scroll end</div>\n            </div>\n          </AppSideBarComponent>\n        )}\n        <div className={styles.content}>\n          <div>\n            <p>\n              Edit <code>src/App.js</code> and save to reload.\n              <br />\n              <br />\n            </p>\n          </div>\n        </div>\n        {anchor === 'right' && (\n          <AppSideBarComponent\n            isOpen={isOpen}\n            setIsOpen={setIsOpen}\n            allOptionsButtonShown={allOptionsButtonShown}\n            header={\n              <>\n                <span>filter</span>\n              </>\n            }\n            headerIcon={<CenterAlignmentIcon />}\n            anchor={anchor}\n            size={size}\n          >\n            Not scrollable content\n          </AppSideBarComponent>\n        )}\n      </div>\n    </div>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/AppSideBar/AppSideBar.tsx",keywords:["appsidebar"]},{name:"AppVersionsSelectView",modulePath:"components/AppVersionsSelect/AppVersionsSelect",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppVersionsSelectView",specifier:"@corva/ui/components",exportName:"AppVersionsSelectView"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AppVersionsSelect/AppVersionsSelect.js",keywords:["appversionsselectview"]},{name:"AssetEditorAutocomplete",modulePath:"components/AssetEditor/AssetEditorAutocomplete",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AssetEditorAutocomplete",specifier:"@corva/ui/components",exportName:"AssetEditorAutocomplete"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"label",type:"string",required:false,description:""},{name:"currentValue",type:"union",required:false,description:""},{name:"isNullable",type:"boolean",required:false,description:""},{name:"onChange",type:"function",required:true,description:""},{name:"classes",type:"object",required:false,description:""},{name:"disableClearable",type:"boolean",required:false,description:""},{name:"parentAssetId",type:"number",required:false,description:""},{name:"parentAssetType",type:"string",required:false,description:""},{name:"companyId",type:"number",required:false,description:""},{name:"assetType",type:"string",required:true,description:""},{name:"errorText",type:"string",required:false,description:""},{name:"data-testid",type:"string",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"isMultiple",type:"boolean",required:false,description:""},{name:"appKey",type:"string",required:false,description:""},{name:"queryParams",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetEditor/AssetEditorAutocomplete.js",keywords:["asseteditorautocomplete"]},{name:"AssetStatusBadge",modulePath:"components/AssetNameLabel/AssetStatusBadge",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AssetStatusBadge",specifier:"@corva/ui/components",exportName:"AssetStatusBadge"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"text",type:"string",required:true,description:""},{name:"className",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetNameLabel/AssetStatusBadge.tsx",keywords:["assetstatusbadge"]},{name:"BHAComponentDetail",modulePath:"components/Drillstring/BHAComponentDetail/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BHAComponentDetail",specifier:"@corva/ui/components",exportName:"BHAComponentDetail"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"component",type:"object",required:true,description:""},{name:"onDone",type:"function",required:true,description:""},{name:"currentUser",type:"object",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Drillstring/BHAComponentDetail/index.js",keywords:["bhacomponentdetail"]},{name:"BHAComponentIcon",modulePath:"components/Drillstring/BHAComponentIcon",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BHAComponentIcon",specifier:"@corva/ui/components",exportName:"BHAComponentIcon"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"width",type:"number",required:false,description:""},{name:"height",type:"number",required:false,description:""},{name:"component",type:"object",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Drillstring/BHAComponentIcon.js",keywords:["bhacomponenticon"]},{name:"BHAComponentsTable",modulePath:"components/Drillstring/BHAComponentsTable/BHAComponentsTable",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BHAComponentsTable",specifier:"@corva/ui/components",exportName:"BHAComponentsTable"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"isActualBha",type:"boolean",required:true,description:""},{name:"viewColumnsPerRow",type:"enum",required:false,description:""},{name:"editColumnsPerRow",type:"enum",required:false,description:""},{name:"components",type:"array",required:false,description:""},{name:"draftComponent",type:"array",required:false,description:""},{name:"validate",type:"function",required:true,description:""},{name:"onSort",type:"function",required:true,description:""},{name:"onAdd",type:"function",required:true,description:""},{name:"onDelete",type:"function",required:true,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"onCancel",type:"function",required:true,description:""},{name:"isMobile",type:"boolean",required:true,description:""},{name:"onAutocompleteApplied",type:"function",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Drillstring/BHAComponentsTable/BHAComponentsTable.js",keywords:["bhacomponentstable"]},{name:"BHAList",modulePath:"components/Drillstring/BHAList/BHAList",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BHAList",specifier:"@corva/ui/components",exportName:"BHAList"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"isMobile",type:"custom",required:false,description:""},{name:"drillstringsBySection",type:"array",required:false,description:""},{name:"selectedBha",type:"object",required:false,description:""},{name:"isMetricsHidden",type:"custom",required:false,description:""},{name:"onSelectBha",type:"function",required:true,description:""},{name:"contentClassName",type:"custom",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Drillstring/BHAList/BHAList.js",keywords:["bhalist"]},{name:"BHASchematic",modulePath:"components/Drillstring/BHASchematic",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BHASchematic",specifier:"@corva/ui/components",exportName:"BHASchematic"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"containerWidth",type:"number",required:false,description:""},{name:"containerHeight",type:"number",required:false,description:""},{name:"schematic",type:"array",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Drillstring/BHASchematic.js",keywords:["bhaschematic"]},{name:"BHATable",modulePath:"components/Drillstring/BHATable/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BHATable",specifier:"@corva/ui/components",exportName:"BHATable"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"components",type:"array",required:true,description:""},{name:"onSelectComponent",type:"function",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Drillstring/BHATable/index.js",keywords:["bhatable"]},{name:"BHATile",modulePath:"components/Drillstring/BHATile/BHATile",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BHATile",specifier:"@corva/ui/components",exportName:"BHATile"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"drillstring",type:"object",required:false,description:""},{name:"isSelected",type:"custom",required:false,description:""},{name:"onSelect",type:"function",required:true,description:""},{name:"height",type:"custom",required:false,description:""},{name:"isMetricsHidden",type:"custom",required:false,description:""},{name:"isMobile",type:"custom",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Drillstring/BHATile/BHATile.js",keywords:["bhatile"]},{name:"BHATileIcon",modulePath:"components/Drillstring/BHATileIcon",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BHATileIcon",specifier:"@corva/ui/components",exportName:"BHATileIcon"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"width",type:"string",required:true,description:""},{name:"height",type:"number",required:true,description:""},{name:"component",type:"object",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Drillstring/BHATileIcon.js",keywords:["bhatileicon"]},{name:"CasingComponentIcon",modulePath:"components/Casing/CasingComponentIcon",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CasingComponentIcon",specifier:"@corva/ui/components",exportName:"CasingComponentIcon"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"width",type:"number",required:false,description:""},{name:"height",type:"number",required:false,description:""},{name:"component",type:"object",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Casing/CasingComponentIcon.js",keywords:["casingcomponenticon"]},{name:"CasingTable",modulePath:"components/Casing/CasingTable/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CasingTable",specifier:"@corva/ui/components",exportName:"CasingTable"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"components",type:"array",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Casing/CasingTable/index.js",keywords:["casingtable"]},{name:"CasingTableV2",modulePath:"components/Casing/CasingTableV2/CasingTableV2",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CasingTableV2",specifier:"@corva/ui/components",exportName:"CasingTableV2"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"viewColumnsPerRow",type:"enum",required:false,description:""},{name:"editColumnsPerRow",type:"enum",required:false,description:""},{name:"components",type:"array",required:false,description:""},{name:"draftComponent",type:"array",required:false,description:""},{name:"validate",type:"function",required:true,description:""},{name:"onSort",type:"function",required:true,description:""},{name:"onAdd",type:"function",required:true,description:""},{name:"onDelete",type:"function",required:true,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"onCancel",type:"function",required:true,description:""},{name:"isMobile",type:"boolean",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Casing/CasingTableV2/CasingTableV2.js",keywords:["casingtablev2"]},{name:"CasingTile",modulePath:"components/Casing/CasingTile/CasingTile",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CasingTile",specifier:"@corva/ui/components",exportName:"CasingTile"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"tileData",type:"object",required:false,description:""},{name:"onSelect",type:"function",required:true,description:""},{name:"isMobile",type:"boolean",required:false,description:""},{name:"isMetricsHidden",type:"boolean",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Casing/CasingTile/CasingTile.js",keywords:["casingtile"]},{name:"CasingTileIcon",modulePath:"components/Casing/CasingTileIcon",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CasingTileIcon",specifier:"@corva/ui/components",exportName:"CasingTileIcon"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"width",type:"string",required:true,description:""},{name:"component",type:"object",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Casing/CasingTileIcon.js",keywords:["casingtileicon"]},{name:"CollapsableSidebar",modulePath:"components/CollapsableSidebar",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CollapsableSidebar",specifier:"@corva/ui/components",exportName:"CollapsableSidebar"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""},{name:"onStateChange",type:"function",required:false,description:""},{name:"initialState",type:"boolean",required:false,description:""},{name:"drawerPaperClassName",type:"string",required:false,description:""},{name:"isToolbarGutterShown",type:"boolean",required:false,description:""},{name:"openedDrawerWidth",type:"union",required:false,description:""},{name:"anchor",type:"enum",required:false,description:"",enumValues:["left","right"]},{name:"closedWidth",type:"union",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CollapsableSidebar.js",keywords:["collapsablesidebar"]},{name:"ColorEditor",modulePath:"components/SettingEditors/ColorEditor/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ColorEditor",specifier:"@corva/ui/components",exportName:"ColorEditor"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onChange",type:"(color: string) => void",required:true,description:""},{name:"currentValue",type:"string",required:false,description:""},{name:"defaultValue",type:"string",required:false,description:""},{name:"condensed",type:"boolean",required:false,description:""},{name:"colors",type:"string[]",required:false,description:"Used as swatches for `condensed`"},{name:"lensColor",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ColorEditor {...props} />"},{name:"Condensed",description:"Component can work in \"swatch\" mode through a combination of `condensed` and `colors` props",code:"<ColorEditor\n    currentValue=\"#FF6633\"\n    onChange={onChange}\n    condensed\n    colors={[\n      '#FF6633',\n      '#FFB399',\n      '#FF33FF',\n      '#FFFF99',\n      '#00B3E6',\n      '#E6B333',\n      '#3366E6',\n      '#999966',\n      '#99FF99',\n      '#B34D4D',\n    ]}\n  />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/SettingEditors/ColorEditor/index.tsx",keywords:["coloreditor"]},{name:"CommentIcon",modulePath:"components/Comment/CommentIcon/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CommentIcon",specifier:"@corva/ui/components",exportName:"CommentIcon"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"displayName",type:"string",required:false,description:""},{name:"imgSrc",type:"string",required:false,description:""},{name:"size",type:"number",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<CommentIcon {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Comment/CommentIcon/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=10181%3A9614&mode=dev",keywords:["commenticon"]},{name:"CommentLoader",modulePath:"components/CommentLoader",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CommentLoader",specifier:"@corva/ui/components",exportName:"CommentLoader"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"showOnMount",type:"boolean",required:false,description:""},{name:"spaceAround",type:"boolean",required:false,description:""},{name:"classes",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CommentLoader.js",keywords:["commentloader"]},{name:"ComparisonBar",modulePath:"components/StageDesignVActual/ComparisonBar/ComparisonBar",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ComparisonBar",specifier:"@corva/ui/components",exportName:"ComparisonBar"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"designVal",type:"custom",required:false,description:""},{name:"actualVal",type:"custom",required:false,description:""},{name:"isCalcMode",type:"custom",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/StageDesignVActual/ComparisonBar/ComparisonBar.js",keywords:["comparisonbar"]},{name:"ComparisonHeader",modulePath:"components/StageDesignVActual/ComparisonHeader",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ComparisonHeader",specifier:"@corva/ui/components",exportName:"ComparisonHeader"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"renderStages",type:"custom",required:false,description:""},{name:"handleSortClick",type:"custom",required:false,description:""},{name:"renderSortIcon",type:"custom",required:false,description:""},{name:"showBar",type:"custom",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/StageDesignVActual/ComparisonHeader.js",keywords:["comparisonheader"]},{name:"ComparisonRow",modulePath:"components/StageDesignVActual/ComparisonRow",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ComparisonRow",specifier:"@corva/ui/components",exportName:"ComparisonRow"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"rowKey",type:"string",required:true,description:""},{name:"label",type:"custom",required:false,description:""},{name:"elemKey",type:"custom",required:false,description:""},{name:"unitType",type:"custom",required:false,description:""},{name:"elemMax",type:"custom",required:false,description:""},{name:"summaries",type:"custom",required:false,description:""},{name:"showBar",type:"custom",required:false,description:""},{name:"viewMode",type:"custom",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/StageDesignVActual/ComparisonRow.js",keywords:["comparisonrow"]},{name:"ConfirmationDialog",modulePath:"components/ConfirmationDialog",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ConfirmationDialog",specifier:"@corva/ui/components",exportName:"ConfirmationDialog"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"title",type:"string",required:false,description:""},{name:"text",type:"string",required:true,description:""},{name:"confirmationText",type:"string",required:false,description:""},{name:"confirmation",type:"string",required:false,description:""},{name:"handleClose",type:"function",required:false,description:""},{name:"handleOk",type:"function",required:false,description:""},{name:"okText",type:"string",required:false,description:""},{name:"disableOk",type:"boolean",required:false,description:""},{name:"isShowCancel",type:"boolean",required:false,description:""},{name:"classes",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ConfirmationDialog.js",keywords:["confirmationdialog"]},{name:"DevCenterAppContainer",modulePath:"components/DevCenter/DevCenterAppContainer/DevCenterAppContainer",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DevCenterAppContainer",specifier:"@corva/ui/components",exportName:"DevCenterAppContainer"},category:"v1",description:"A wrapper for all DC apps",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Default",description:"",code:"<div style={{ height: '300px', position: 'relative' }}>\n    <DevCenterAppContainer\n      {...appContainerProps}\n      dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n    />\n  </div>"},{name:"AppCommonsContext",description:"App container provides an app context with general info about app, its maximized state, etc.\n\nYou can use it with `useAppCommons` hook from `/effects`.\n\nContext's type is:\n\n```tsx\nexport type AppCommonsContextType = {\n  maximized: boolean;\n  appId: number;\n  app: App;\n  appKey: string;\n  appSettings: AppSettings;\n  onSettingChange: (key: string, value: unknown) => void;\n\n  well?: Well;\n  rig?: Asset;\n  fracFleet?: FracFleet;\n  wells?: Well[];\n\n  dashboardMeta?: {\n    isMultiAsset?: boolean;\n    isMultiWell?: boolean;\n  };};\n```",code:"{\n  const CliApp = () => {\n    const commons = useAppCommons();\n    return (\n      <div style={{ height: '100%', overflow: 'auto' }}>\n        <Text>App Commons: {JSON.stringify(commons)}</Text>\n      </div>\n    );\n  };\n\n  return (\n    <div style={{ height: '200px', position: 'relative' }}>\n      <DevCenterAppContainer\n        {...appContainerProps}\n        CLIAppComponent={CliApp}\n        dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n      />\n    </div>\n  );\n}"},{name:"UsageWithAppContainer",description:"Use `<AppContainer/>` to place header and footer",code:"{\n  const CliApp = () => {\n    return (\n      <AppContainer\n        header={<AppHeader />}\n        footer={\n          <AppFooter\n            asset={{\n              id: 12345,\n              name: 'Some Asset',\n            }}\n            lastUpdate={Math.ceil(new Date().getTime() / 1000)}\n            showWarning\n          />\n        }\n      >\n        Content\n      </AppContainer>\n    );\n  };\n\n  return (\n    <div style={{ height: '200px', position: 'relative' }}>\n      <DevCenterAppContainer\n        {...appContainerProps}\n        CLIAppComponent={CliApp}\n        dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n      />\n    </div>\n  );\n}"},{name:"CommentsMode",description:"To enable comments in footer, app's manifest needs to have `application.ui.enable_comments` set to true.\n\nYou can read comments mode state using the `useAppCommentsMode` hook from `/effects`.",code:"{\n  const CliApp = () => {\n    const comments = useAppCommentsMode();\n    return <Text>Comments: {comments ? 'enabled' : 'disabled'}</Text>;\n  };\n\n  const appWithComments = structuredClone(appContainerProps.app);\n  appWithComments.package.manifest.application.ui.enable_comments = true;\n\n  const appWithOutComments = structuredClone(appContainerProps.app);\n  appWithOutComments.package.manifest.application.ui.enable_comments = false;\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <div style={{ height: '200px', position: 'relative' }}>\n        <DevCenterAppContainer\n          {...appContainerProps}\n          app={appWithOutComments}\n          CLIAppComponent={CliApp}\n          dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n        />\n      </div>\n      <div style={{ height: '200px', position: 'relative' }}>\n        <DevCenterAppContainer\n          {...appContainerProps}\n          app={appWithComments}\n          CLIAppComponent={CliApp}\n          dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n        />\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AppErrorState",description:"When something goes wrong, app error state is shown. It detects if the app is using the AppHeaderV3 and shows corresponding header",code:"{\n  const appWithHeaderV3 = structuredClone(app) as any;\n  appWithHeaderV3.package.manifest.application.ui.use_app_header_v3 = true;\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <div style={{ height: '400px', position: 'relative' }}>\n        <DevCenterAppContainer\n          {...appContainerProps}\n          CLIAppComponent={undefined}\n          CLIAppSettings={undefined}\n          dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n        />\n      </div>\n      <div style={{ height: '400px', position: 'relative' }}>\n        <DevCenterAppContainer\n          {...appContainerProps}\n          CLIAppComponent={undefined}\n          CLIAppSettings={undefined}\n          dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n          app={appWithHeaderV3}\n        />\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AppCrashedState",description:"When something goes wrong inside an app, app error state is shown. It shows controls regardless of whether an app uses a new header",code:"{\n  const appWithHeaderV3 = structuredClone(app) as any;\n  appWithHeaderV3.package.manifest.application.ui.use_app_header_v3 = true;\n  const AppThatWillCrash = () => {\n    throw 'up';\n  };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <div style={{ height: '400px', position: 'relative' }}>\n        <DevCenterAppContainer\n          {...appContainerProps}\n          CLIAppComponent={AppThatWillCrash}\n          CLIAppSettings={undefined}\n          dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n        />\n      </div>\n      <div style={{ height: '400px', position: 'relative' }}>\n        <DevCenterAppContainer\n          {...appContainerProps}\n          CLIAppComponent={AppThatWillCrash}\n          CLIAppSettings={undefined}\n          dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n          app={appWithHeaderV3}\n        />\n      </div>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/DevCenterAppContainer/DevCenterAppContainer.js",keywords:["devcenterappcontainer","wrapper","apps"]},{name:"DevCenterEmbeddedApp",modulePath:"components/EmbeddedApp/DevCenterEmbeddedApp",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DevCenterEmbeddedApp",specifier:"@corva/ui/components",exportName:"DevCenterEmbeddedApp"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"appContainerClassName",type:"string",required:false,description:""},{name:"appId",type:"number",required:false,description:""},{name:"appSize",type:"string",required:false,description:""},{name:"app",type:"object",required:true,description:""},{name:"currentUser",type:"object",required:true,description:""},{name:"coordinates",type:"object",required:false,description:""},{name:"timestamp",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EmbeddedApp/DevCenterEmbeddedApp.js",keywords:["devcenterembeddedapp"]},{name:"DevCenterIsolatedApp",modulePath:"components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DevCenterIsolatedApp",specifier:"@corva/ui/components",exportName:"DevCenterIsolatedApp"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js",keywords:["devcenterisolatedapp"]},{name:"DevCenterIsolatedAppPage",modulePath:"components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedAppPage",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DevCenterIsolatedAppPage",specifier:"@corva/ui/components",exportName:"DevCenterIsolatedAppPage"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"CLIAppComponent",type:"function",required:false,description:""},{name:"CLIAppSettings",type:"function",required:false,description:""},{name:"containerReportClassName",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedAppPage.js",keywords:["devcenterisolatedapppage"]},{name:"EditableItemWithBadge",modulePath:"components/EditableItem/EditableItemWithBadge/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"EditableItemWithBadge",specifier:"@corva/ui/components",exportName:"EditableItemWithBadge"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"isSelected",type:"boolean",required:false,description:""},{name:"children",type:"ReactNode",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EditableItem/EditableItemWithBadge/index.js",keywords:["editableitemwithbadge"]},{name:"Element",modulePath:"components/SlateFormattedText/RenderElements",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Element",specifier:"@corva/ui/components",exportName:"Element"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/SlateFormattedText/RenderElements.js",keywords:["element"]},{name:"ElementsComparison",modulePath:"components/StageDesignVActual/ElementsComparison/ElementsComparison",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ElementsComparison",specifier:"@corva/ui/components",exportName:"ElementsComparison"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/StageDesignVActual/ElementsComparison/ElementsComparison.js",keywords:["elementscomparison"]},{name:"EmojiIconButton",modulePath:"components/EmojiIconButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"EmojiIconButton",specifier:"@corva/ui/components",exportName:"EmojiIconButton"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"handleSelectEmoji",type:"function",required:true,description:""},{name:"emojiIconClassName",type:"string",required:false,description:""},{name:"disableRipple",type:"boolean",required:false,description:""},{name:"closeOnSelect",type:"boolean",required:false,description:""},{name:"data-testid",type:"string",required:false,description:""},{name:"tooltipProps",type:"object",required:false,description:""},{name:"icon",type:"ReactNode",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EmojiIconButton.js",keywords:["emojiiconbutton"]},{name:"EmptyAppView",modulePath:"components/EmptyView/EmptyAppView/EmptyAppView",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"EmptyAppView",specifier:"@corva/ui/components",exportName:"EmptyAppView"},category:"v1",description:"Component for displaying app's empty/error state.\n\nNeeds to be in a container with fixed height to be visible. Takes 100% height by default and changes its own layout based on its own height on mount",isExperimental:false,isDeprecated:false,props:[{name:"title",type:"ReactNode",required:true,description:""},{name:"actions",type:"ReactNode",required:false,description:""},{name:"app",type:"object",required:false,description:""},{name:"state",type:"EmptyStates",required:false,description:""},{name:"subtitle",type:"ReactNode",required:false,description:""},{name:"withAppHeader",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<div style={wrapperStyles}>\n    <EmptyAppView {...props} />\n  </div>"},{name:"PropertiesState",description:"Component provides its states as its own `EMPTY_STATES` property. Using `EmptyAppView.EMPTY_STATES.*` is preferred to using string literals",code:"<div style={wrapperStyles}>\n    <EmptyAppView title=\"Title\" state={EmptyAppView.EMPTY_STATES.error} />\n  </div>"},{name:"PropertiesMessages",description:"Component provides common error messages as its own `APP_MESSAGES` property\n\n```tsx\ntype AppMessages = Record<\n  | 'appNotSubscribed'\n  | 'appNotSubscribedForAsset'\n  | 'internalAppError'\n  | 'appPackageWasNotFound'\n  | 'fracFleetWasNotFound'\n  | 'fracFleetHasNoPad'\n  | 'padHasNoWells'\n  | 'appComponentWasNotFound'\n  | 'noAssetData'\n  | 'assetNotAvailable',\n  { title: string; subtitle?: string }\n>;```",code:"<div style={wrapperStyles}>\n    <EmptyAppView\n      title={EmptyAppView.APP_MESSAGES.appPackageWasNotFound.title}\n      subtitle={EmptyAppView.APP_MESSAGES.appPackageWasNotFound.subtitle}\n    />\n  </div>"},{name:"Sizes",description:"`EmptyAppView` changes its layout based on its own height. Breakpoints are: `300px` and `400px`",code:"<SbRow>\n    <div style={{ height: '290px', width: 'calc(33% - 20px)' }}>\n      <EmptyAppView title=\"Title\" state={EmptyAppView.EMPTY_STATES.error} />\n    </div>\n    <div style={{ height: '390px', width: 'calc(33% - 20px)' }}>\n      <EmptyAppView title=\"Title\" state={EmptyAppView.EMPTY_STATES.error} />\n    </div>\n    <div style={{ height: '410px', width: 'calc(33% - 20px)' }}>\n      <EmptyAppView title=\"Title\" state={EmptyAppView.EMPTY_STATES.error} />\n    </div>\n  </SbRow>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EmptyView/EmptyAppView/EmptyAppView.tsx",keywords:["emptyappview","component","displaying","empty","error","state","needs","container","fixed","height","visible"]},{name:"FailedFileUploading",modulePath:"components/FailedFileUploading",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FailedFileUploading",specifier:"@corva/ui/components",exportName:"FailedFileUploading"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"errorMessage",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"classes",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FailedFileUploading.js",keywords:["failedfileuploading"]},{name:"FeedItemContent",modulePath:"components/FeedItem/components/Content",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FeedItemContent",specifier:"@corva/ui/components",exportName:"FeedItemContent"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FeedItem/components/Content.js",keywords:["feeditemcontent"]},{name:"FeedItemEditProvider",modulePath:"components/FeedItem/FeedItemEditProvider/FeedItemEditProvider",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FeedItemEditProvider",specifier:"@corva/ui/components",exportName:"FeedItemEditProvider"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""},{name:"tracesMinDateSec",type:"union",required:false,description:""},{name:"tracesMaxDateSec",type:"union",required:false,description:""},{name:"tracesAssetId",type:"union",required:false,description:""},{name:"exitFunc",type:"function",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FeedItem/FeedItemEditProvider/FeedItemEditProvider.js",keywords:["feeditemeditprovider"]},{name:"FileUploadIconButton",modulePath:"components/FileUploadIconButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FileUploadIconButton",specifier:"@corva/ui/components",exportName:"FileUploadIconButton"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"additionalFields",type:"array",required:false,description:""},{name:"classes",type:"object",required:false,description:""},{name:"tooltipProps",type:"object",required:false,description:""},{name:"disableRipple",type:"boolean",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"fileUploadIconClassName",type:"string",required:false,description:""},{name:"handleShare",type:"function",required:false,description:""},{name:"inputId",type:"string",required:false,description:""},{name:"message",type:"string",required:false,description:""},{name:"onError",type:"function",required:false,description:""},{name:"onFinish",type:"function",required:false,description:""},{name:"openPreviewDialogOnUpload",type:"boolean",required:false,description:""},{name:"requiredFields",type:"array",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FileUploadIconButton.js",keywords:["fileuploadiconbutton"]},{name:"GradientManagerWithStorage",modulePath:"components/GradientManager/GradientManagerWithStorage/GradientManagerWithStorage",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"GradientManagerWithStorage",specifier:"@corva/ui/components",exportName:"GradientManagerWithStorage"},category:"v1",description:"Version of `GradientManager` that handles saving and loading gradients in user settings.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"GradientManagerWithStorage"},examples:[{name:"Default",description:"",code:"{\n  const [gradientId, setGradientId] = useState<Props['gradientId']>();\n\n  return (\n    <GradientManagerWithStorage\n      {...props}\n      onChange={gradient => {\n        props.onChange?.(gradient);\n        setGradientId(gradient.gradientId);\n      }}\n      gradientId={gradientId}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/GradientManager/GradientManagerWithStorage/GradientManagerWithStorage.tsx",keywords:["gradientmanagerwithstorage","version","gradientmanager","handles","saving","loading","gradients","user","settings"]},{name:"KeyboardDateTimePicker",modulePath:"components/KeyboardDateTimePicker",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"KeyboardDateTimePicker",specifier:"@corva/ui/components",exportName:"KeyboardDateTimePicker"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onChange",type:"function",required:true,description:""},{name:"format",type:"string",required:false,description:""},{name:"label",type:"string",required:false,description:""},{name:"data-testid",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/KeyboardDateTimePicker.js",keywords:["keyboarddatetimepicker"]},{name:"LastAnnotation",modulePath:"components/Annotations/components/LastAnnotation/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"LastAnnotation",specifier:"@corva/ui/components",exportName:"LastAnnotation"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"appId",type:"number",required:true,description:""},{name:"annotation",type:"object",required:true,description:""},{name:"classes",type:"object",required:false,description:""},{name:"isNative",type:"custom",required:false,description:""},{name:"width",type:"string",required:false,description:""},{name:"openAnnotationsList",type:"function",required:true,description:""},{name:"updateCurrentDashboardAppLastAnnotation",type:"custom",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Annotations/components/LastAnnotation/index.js",keywords:["lastannotation"]},{name:"Leaf",modulePath:"components/SlateFormattedText/RenderElements",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Leaf",specifier:"@corva/ui/components",exportName:"Leaf"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/SlateFormattedText/RenderElements.js",keywords:["leaf"]},{name:"LiveButton",modulePath:"components/Button/components/LiveButton/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"LiveButton",specifier:"@corva/ui/components",exportName:"LiveButton"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"React.ReactNode",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"lastActiveAt",type:"string",required:false,description:""},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"startIcon",type:"React.ReactNode",required:false,description:""},{name:"state",type:"LiveButtonStateType",required:false,description:""},{name:"tooltipProps",type:"Record<string, any>",required:false,description:""}],propsList:{kind:"partial",undescended:["ButtonProps"]},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Button/components/LiveButton/index.tsx",keywords:["livebutton"]},{name:"LiveButtonState",modulePath:"components/Button/components/LiveButton/constants",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"LiveButtonState",specifier:"@corva/ui/components",exportName:"LiveButtonState"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"LiveButtonState"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Button/components/LiveButton/constants.ts",keywords:["livebuttonstate"]},{name:"MultipleAssetsToggle",modulePath:"components/AssetEditorV2/components/MultipleAssetsToggle",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"MultipleAssetsToggle",specifier:"@corva/ui/components",exportName:"MultipleAssetsToggle"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetEditorV2/components/MultipleAssetsToggle.js",keywords:["multipleassetstoggle"]},{name:"NavigationBar",modulePath:"components/DevCenter/NavigationBar/NavigationBar",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"NavigationBar",specifier:"@corva/ui/components",exportName:"NavigationBar"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""},{name:"appBarClassName",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/NavigationBar/NavigationBar.js",keywords:["navigationbar"]},{name:"NotificationsContainer",modulePath:"components/Notifications/NotificationsContainer",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"NotificationsContainer",specifier:"@corva/ui/components",exportName:"NotificationsContainer"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"NotificationsContainer"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Notifications/NotificationsContainer.tsx",keywords:["notificationscontainer"]},{name:"OffsetWellChip",modulePath:"components/OffsetWellChips/Chip",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"OffsetWellChip",specifier:"@corva/ui/components",exportName:"OffsetWellChip"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"OffsetWellChip"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/OffsetWellChips/Chip.tsx",keywords:["offsetwellchip"]},{name:"OffsetWellChipsContainer",modulePath:"components/OffsetWellChips/ChipsContainer",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"OffsetWellChipsContainer",specifier:"@corva/ui/components",exportName:"OffsetWellChipsContainer"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"OffsetWellChips"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/OffsetWellChips/ChipsContainer.tsx",keywords:["offsetwellchipscontainer"]},{name:"PaletteChromePicker",modulePath:"components/ColorPicker/PaletteChromePicker/PaletteChromePicker",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"PaletteChromePicker",specifier:"@corva/ui/components",exportName:"PaletteChromePicker"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"color",type:"string | RGBA | HSLA | HSVA",required:true,description:""},{name:"onChange",type:"(color: Color) => void",required:true,description:""},{name:"onSizeChange",type:"() => void",required:true,description:""},{name:"enableTransparencyPalette",type:"boolean",required:true,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [color, setColor] = useState<string>(props.color as string);\n\n  return (\n    <PaletteChromePicker\n      {...props}\n      color={color}\n      onChange={(color, ...rest) => {\n        props.onChange?.(color, ...rest);\n        setColor(color.hex);\n      }}\n    />\n  );\n}"},{name:"ColorFormats",description:"`color` prop accepts color in 4 possible types: `string` (HEX value), `RGBA`, `HSLA`, or `HSVA`\n\n```tsx\ntype RGBA = { r: number; g: number; b: number; a: number };\ntype HSLA = { h: number; s: number; l: number; a: number };\ntype HSVA = { h: number; s: number; v: number; a: number };\n```",code:"{\n  const [colorHex, setColorHex] = useState<string>('#FF0000');\n  const [colorRgb, setColorRgb] = useState<RGBA>({ r: 42, g: 0, b: 255, a: 1 });\n  const [colorHsl, setColorHsl] = useState<HSLA>({ h: 120, s: 1, l: 0.5, a: 1 });\n  const [colorHsv, setColorHsv] = useState<HSVA>({ h: 0, s: 1, v: 1, a: 1 });\n\n  return (\n    <SbRow>\n      <SbColumn>\n        HEX\n        <PaletteChromePicker\n          enableTransparencyPalette={false}\n          onSizeChange={() => {}}\n          color={colorHex}\n          onChange={color => setColorHex(color.hex)}\n        />\n        {JSON.stringify(colorHex)}\n      </SbColumn>\n      <SbColumn>\n        RGB\n        <PaletteChromePicker\n          enableTransparencyPalette={false}\n          onSizeChange={() => {}}\n          color={colorRgb}\n          onChange={color => setColorRgb(color.rgb)}\n        />\n        {JSON.stringify(colorRgb)}\n      </SbColumn>\n      <SbColumn>\n        HSL\n        <PaletteChromePicker\n          enableTransparencyPalette={false}\n          onSizeChange={() => {}}\n          color={colorHsl}\n          onChange={color => setColorHsl(color.hsl)}\n        />\n        {JSON.stringify(colorHsl)}\n      </SbColumn>\n      <SbColumn>\n        HSV\n        <PaletteChromePicker\n          enableTransparencyPalette={false}\n          onSizeChange={() => {}}\n          color={colorHsv}\n          onChange={color => setColorHsv(color.hsv)}\n        />\n        {JSON.stringify(colorHsv)}\n      </SbColumn>\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ColorPicker/PaletteChromePicker/PaletteChromePicker.tsx",keywords:["palettechromepicker"]},{name:"PrimaryAssetSelect",modulePath:"components/AssetEditorV2/components/PrimaryAssetSelect",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"PrimaryAssetSelect",specifier:"@corva/ui/components",exportName:"PrimaryAssetSelect"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"assetFields",type:"array",required:false,description:""},{name:"isSecondaryAssetPresent",type:"boolean",required:false,description:""},{name:"data-testid",type:"string",required:false,description:""},{name:"onInputReset",type:"function",required:false,description:""},{name:"onActiveAssetIdChange",type:"function",required:false,description:""},{name:"placeholder",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetEditorV2/components/PrimaryAssetSelect.js",keywords:["primaryassetselect"]},{name:"RadioEditor",modulePath:"components/SettingEditors/RadioEditor/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"RadioEditor",specifier:"@corva/ui/components",exportName:"RadioEditor"},category:"v1",description:"A block of radio buttons",isExperimental:false,isDeprecated:false,props:[{name:"options",type:"{ value: string | number; label: string }[]",required:true,description:""},{name:"onChange",type:"(value: string | number) => void",required:true,description:""},{name:"defaultValue",type:"string | number",required:true,description:""},{name:"currentValue",type:"string | number",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<string | number>(props.currentValue);\n  return (\n    <RadioEditor\n      {...props}\n      currentValue={value}\n      onChange={(value, ...rest) => {\n        props.onChange?.(value, ...rest);\n        setValue(value);\n      }}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/SettingEditors/RadioEditor/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9699%3A1638",keywords:["radioeditor","block","radio","buttons"]},{name:"RealTimeSidebar",modulePath:"components/RealTimeValuesSidebar/RealTimeSidebar",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"RealTimeSidebar",specifier:"@corva/ui/components",exportName:"RealTimeSidebar"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"RealTimeSidebar"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/RealTimeValuesSidebar/RealTimeSidebar.tsx",keywords:["realtimesidebar"]},{name:"RecentSearches",modulePath:"components/Search/components/RecentSearches",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"RecentSearches",specifier:"@corva/ui/components",exportName:"RecentSearches"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"dataStorage",type:"Storage",required:true,description:""},{name:"dataStorageKey",type:"string",required:true,description:""},{name:"onInputChange",type:"(value: string) => void",required:true,description:""},{name:"maxCount",type:"number",required:true,description:""},{name:"className",type:"string",required:false,description:""},{name:"title",type:"ReactNode",required:false,description:""},{name:"Icon",type:"ComponentType<{ className: string }>",required:false,description:""},{name:"inputValue",type:"string",required:false,description:""},{name:"isHidden",type:"boolean",required:false,description:""},{name:"clearable",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<RecentSearches {...props} />"},{name:"WithIcons",description:"Can be used with icon component, passe as `Icon` prop",code:"<RecentSearches\n    Icon={AccessTime}\n    onInputChange={() => {}}\n    dataStorage={dataStorage}\n    dataStorageKey=\"\"\n    maxCount={5}\n  />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Search/components/RecentSearches.tsx",keywords:["recentsearches"]},{name:"RemoveAppButton",modulePath:"components/DevCenter/DevCenterAppContainer/components/AppSettingsDialog/components/RemoveAppButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"RemoveAppButton",specifier:"@corva/ui/components",exportName:"RemoveAppButton"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/DevCenterAppContainer/components/AppSettingsDialog/components/RemoveAppButton.js",keywords:["removeappbutton"]},{name:"ScrollableTooltip",modulePath:"components/Tooltip/ScrollableTooltip",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ScrollableTooltip",specifier:"@corva/ui/components",exportName:"ScrollableTooltip"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"ScrollableTooltip"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Tooltip/ScrollableTooltip.tsx",keywords:["scrollabletooltip"]},{name:"SecondaryAssetSelect",modulePath:"components/AssetEditorV2/components/SecondaryAssetSelect",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"SecondaryAssetSelect",specifier:"@corva/ui/components",exportName:"SecondaryAssetSelect"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"appType",type:"object",required:false,description:""},{name:"currentValue",type:"union",required:false,description:""},{name:"defaultValue",type:"any",required:false,description:""},{name:"onChange",type:"function",required:true,description:""},{name:"parentAssetId",type:"number",required:false,description:""},{name:"parentAssetType",type:"string",required:false,description:""},{name:"assetType",type:"string",required:true,description:""},{name:"data-testid",type:"string",required:false,description:""},{name:"appKey",type:"string",required:false,description:""},{name:"assetFields",type:"array",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetEditorV2/components/SecondaryAssetSelect.js",keywords:["secondaryassetselect"]},{name:"SelectFilterBy",modulePath:"components/Select/SelectFilterBy",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"SelectFilterBy",specifier:"@corva/ui/components",exportName:"SelectFilterBy"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"SelectFilterBy"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Select/SelectFilterBy.tsx",keywords:["selectfilterby"]},{name:"SideBar",modulePath:"components/DevCenter/SideBar/SideBar",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"SideBar",specifier:"@corva/ui/components",exportName:"SideBar"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"union",required:true,description:""},{name:"drawerPaperClassName",type:"string",required:false,description:""},{name:"drawerClassName",type:"string",required:false,description:""},{name:"listClassName",type:"string",required:false,description:""},{name:"onClick",type:"function",required:false,description:""},{name:"isToolbarGutterShown",type:"boolean",required:false,description:""},{name:"drawerWidth",type:"union",required:false,description:""},{name:"anchor",type:"enum",required:false,description:"",enumValues:["left","right"]}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/SideBar/SideBar.js",keywords:["sidebar"]},{name:"SingleAssetEditor",modulePath:"components/AssetEditor/SingleAssetEditor",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"SingleAssetEditor",specifier:"@corva/ui/components",exportName:"SingleAssetEditor"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"classes",type:"object",required:false,description:""},{name:"appType",type:"object",required:false,description:""},{name:"currentValue",type:"union",required:false,description:""},{name:"defaultValue",type:"any",required:false,description:""},{name:"onChange",type:"function",required:true,description:""},{name:"label",type:"string",required:false,description:""},{name:"isNullable",type:"boolean",required:false,description:""},{name:"parentAssetId",type:"number",required:false,description:""},{name:"parentAssetType",type:"string",required:false,description:""},{name:"assetType",type:"string",required:true,description:""},{name:"data-testid",type:"string",required:false,description:""},{name:"appKey",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetEditor/SingleAssetEditor.js",keywords:["singleasseteditor"]},{name:"SingleAssetEditorAutocomplete",modulePath:"components/AssetEditor/AssetEditorAutocomplete",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"SingleAssetEditorAutocomplete",specifier:"@corva/ui/components",exportName:"SingleAssetEditorAutocomplete"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"label",type:"string",required:false,description:""},{name:"currentValue",type:"union",required:false,description:""},{name:"isNullable",type:"boolean",required:false,description:""},{name:"onChange",type:"function",required:true,description:""},{name:"classes",type:"object",required:false,description:""},{name:"disableClearable",type:"boolean",required:false,description:""},{name:"parentAssetId",type:"number",required:false,description:""},{name:"parentAssetType",type:"string",required:false,description:""},{name:"companyId",type:"number",required:false,description:""},{name:"assetType",type:"string",required:true,description:""},{name:"errorText",type:"string",required:false,description:""},{name:"data-testid",type:"string",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"isMultiple",type:"boolean",required:false,description:""},{name:"appKey",type:"string",required:false,description:""},{name:"queryParams",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetEditor/AssetEditorAutocomplete.js",keywords:["singleasseteditorautocomplete"]},{name:"Step",modulePath:"components/Stepper/Step/Step",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Step",specifier:"@corva/ui/components",exportName:"Step"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"value",type:"ReactNode",required:true,description:""},{name:"label",type:"ReactNode",required:false,description:""},{name:"tooltip",type:"ReactNode",required:false,description:""},{name:"goBackTooltip",type:"ReactNode",required:false,description:""},{name:"checked",type:"boolean",required:false,description:""},{name:"active",type:"boolean",required:false,description:""},{name:"error",type:"boolean",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"size",type:"Size",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"canGoBack",type:"boolean",required:false,description:""},{name:"onClick",type:"() => void",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Stepper/Step/Step.tsx",keywords:["step"]},{name:"StepsWrapper",modulePath:"components/Stepper/StepsWrapper",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"StepsWrapper",specifier:"@corva/ui/components",exportName:"StepsWrapper"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"className",type:"string",required:false,description:""},{name:"children",type:"ReactNode",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Stepper/StepsWrapper.tsx",keywords:["stepswrapper"]},{name:"StyledDropdownEditor",modulePath:"components/SettingEditors/DropdownEditor/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"StyledDropdownEditor",specifier:"@corva/ui/components",exportName:"StyledDropdownEditor"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/SettingEditors/DropdownEditor/index.js",keywords:["styleddropdowneditor"]},{name:"Tab",modulePath:"components/Tabs/Tab",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Tab",specifier:"@corva/ui/components",exportName:"Tab"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"DisabledTooltipProps",type:"Omit<TooltipProps, 'children'>",required:false,description:""}],propsList:{kind:"partial",undescended:["MuiTabProps"]},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Tabs/Tab.tsx",keywords:["tab"]},{name:"TableCell",modulePath:"components/Table/TableCell/TableCell",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TableCell",specifier:"@corva/ui/components",exportName:"TableCell"},category:"v1",description:"A Cell subcomponent for `<Table/>`",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Cell Content"},{name:"isExpanded",type:"boolean",required:false,description:""},{name:"setIsExpanded",type:"(value: boolean) => void",required:false,description:""},{name:"tooltipTitle",type:"string",required:false,description:""},{name:"collapsibleHeader",type:"boolean",required:false,description:""},{name:"collapsibleBody",type:"boolean",required:false,description:""},{name:"cellWidth",type:"string | number",required:false,description:"Cell width when expanded"},{name:"maxCellWidth",type:"string | number",required:false,description:"Cell width when collapsed"},{name:"maxCharsNumberFromStart",type:"number",required:false,description:""},{name:"maxCharsNumberFromEnd",type:"number",required:false,description:""},{name:"stickyCell",type:"boolean",required:false,description:""},{name:"emptyCell",type:"boolean",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"align",type:"'center' | 'inherit' | 'justify' | 'left' | 'right'",required:false,description:"",enumValues:["center","inherit","justify","left","right"]},{name:"size",type:"'medium' | 'small'",required:false,description:"",enumValues:["medium","small"]}],propsList:{kind:"partial",undescended:["Omit<MUITableCellProps, 'children' | 'className' | 'align' | 'size'>"]},examples:[{name:"Default",description:"",code:"<TableCell {...props} />"},{name:"CollapsibleContent",description:"You can make cell's content collapsible, but there are some changes to the components API:\n\n- `children` becomes a cell's \"header\" when it's collapsed\n- `tooltipTitle` becomes cell's \"content\" when it's collapsed and *is required*\n- `collapsibleBody=true` makes \"content\" shown\n- `maxCharsNumberFromStart` and `maxCharsNumberFromEnd` props control the truncating of `tooltipTitle`",code:"{\n  const [expanded, setExpanded] = useState(false);\n\n  return (\n    <SbColumn>\n      <Button onClick={() => setExpanded(value => !value)}>Toggle</Button>\n\n      <Table>\n        <TableBody>\n          <TableRow>\n            <TableCell\n              collapsibleBody\n              collapsibleHeader\n              isExpanded={expanded}\n              setIsExpanded={setExpanded}\n              cellWidth=\"20%\"\n              maxCellWidth={300}\n              tooltipTitle=\"Some very long stuff here\"\n            >\n              Cell content\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Table/TableCell/TableCell.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A43261&mode=dev",keywords:["tablecell","cell","subcomponent","table"]},{name:"TableContainer",modulePath:"components/Table/TableContainer/TableContainer",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TableContainer",specifier:"@corva/ui/components",exportName:"TableContainer"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"stickyHeader",type:"boolean",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"stickyColumn",type:"boolean",required:false,description:""},{name:"classes",type:"Record<string, string>",required:false,description:""},{name:"shadowColor",type:"'B1' | 'B2' | 'B3' | 'B4' | 'B5' | 'B6' | 'B7' | 'B8' | 'B9' | 'B10' | 'B11' | string",required:false,description:"Shadow colour for sticky headers, etc.",enumValues:["B1","B2","B3","B4","B5","B6","B7","B8","B9","B10","B11"]}],propsList:{kind:"partial",undescended:["Partial<Omit<MUITableContainerProps, 'classes' | 'className'>>"]},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Table/TableContainer/TableContainer.tsx",keywords:["tablecontainer"]},{name:"TablePagination",modulePath:"components/Table/TablePagination/TablePagination",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TablePagination",specifier:"@corva/ui/components",exportName:"TablePagination"},category:"v1",description:"A thin wrapper over MUI's `<TablePagination />`",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"TablePagination"},examples:[{name:"Default",description:"",code:"<TablePagination {...props} />"},{name:"WithoutRowsPerPageControl",description:"Pass an empty array to `rowsPerPageOptions` prop to disable \"Rows per page\" select",code:"<TablePagination\n    count={100}\n    onChangePage={console.log}\n    page={1}\n    rowsPerPage={30}\n    rowsPerPageOptions={[]}\n  />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Table/TablePagination/TablePagination.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A43261&mode=dev",keywords:["tablepagination","thin","wrapper","over"]},{name:"TablePaginationActions",modulePath:"components/Table/TablePaginationActions/TablePaginationActions",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TablePaginationActions",specifier:"@corva/ui/components",exportName:"TablePaginationActions"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"TablePaginationActions"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Table/TablePaginationActions/TablePaginationActions.tsx",keywords:["tablepaginationactions"]},{name:"TableSortLabel",modulePath:"components/Table/TableSortLabel/TableSortLabel",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TableSortLabel",specifier:"@corva/ui/components",exportName:"TableSortLabel"},category:"v1",description:"Sort label for `<Table />` - a thin wrapper over MUI's `<TableSortLabel /> component`",isExperimental:false,isDeprecated:false,props:[{name:"active",type:"boolean",required:false,description:"Shows an arrow indicating sort direction"},{name:"onClick",type:"MUITableSortLabelProps['onClick']",required:false,description:"Click handler"}],propsList:{kind:"partial",undescended:["Omit<MUITableSortLabelProps, 'IconComponent' | 'active' | 'onClick'>"]},examples:[{name:"Default",description:"",code:"<TableSortLabel {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Table/TableSortLabel/TableSortLabel.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A43261&mode=dev",keywords:["tablesortlabel","sort","label","table","thin","wrapper","over","component"]},{name:"TableToolbar",modulePath:"components/Table/TableToolbar/TableToolbar",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TableToolbar",specifier:"@corva/ui/components",exportName:"TableToolbar"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"numSelected",type:"number",required:false,description:""},{name:"actions",type:"ReactNode",required:false,description:""},{name:"content",type:"ReactNode",required:false,description:""},{name:"classes",type:"Record<string, string>",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit<ToolbarProps, 'children' | 'classes' | 'content'>"]},examples:[{name:"Default",description:"",code:"<TableToolbar {...props} />"},{name:"Sizes",description:"Component supports 2 sizes controlled through `variant` prop:\n\n- `regular`\n- `dense`",code:"<SbColumn alignItems=\"stretch\">\n    <TableToolbar numSelected={5} variant=\"regular\" />\n    <TableToolbar numSelected={5} variant=\"dense\" />\n  </SbColumn>"},{name:"WithActions",description:"You can add arbitrary content by using `actions` prop",code:"<TableToolbar\n    numSelected={5}\n    actions={\n      <>\n        <IconButton size=\"small\" tooltipProps={{ title: 'Delete' }}>\n          <DeleteIcon size={16} />\n        </IconButton>\n        <IconButton size=\"small\" tooltipProps={{ title: 'Delete' }}>\n          <EditTwoIcon size={16} />\n        </IconButton>\n      </>\n    }\n  />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Table/TableToolbar/TableToolbar.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A43261&mode=dev",keywords:["tabletoolbar"]},{name:"TemplatePopover",modulePath:"components/Template/TemplatePopover/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TemplatePopover",specifier:"@corva/ui/components",exportName:"TemplatePopover"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"anchorEl",type:"ReactNode",required:false,description:""},{name:"anchorOrigin",type:"object",required:false,description:""},{name:"transformOrigin",type:"object",required:false,description:""},{name:"onClose",type:"function",required:true,description:""},{name:"templates",type:"array",required:true,description:""},{name:"activeTemplateId",type:"number",required:true,description:""},{name:"getDefaultTemplates",type:"function",required:true,description:""},{name:"getUserTemplates",type:"function",required:true,description:""},{name:"getSharedTemplates",type:"function",required:true,description:""},{name:"onAddNewTemplate",type:"function",required:true,description:""},{name:"onTemplateDelete",type:"function",required:true,description:""},{name:"onTemplateCopy",type:"function",required:true,description:""},{name:"onTemplateEdit",type:"function",required:true,description:""},{name:"onTemplateShare",type:"function",required:true,description:""},{name:"onActiveTemplateChange",type:"function",required:true,description:""},{name:"loading",type:"boolean",required:false,description:""},{name:"classes",type:"object",required:false,description:""},{name:"hasNameSlot",type:"boolean",required:false,description:""},{name:"renderSlot",type:"function",required:true,description:""},{name:"currentUser",type:"object",required:true,description:""},{name:"readOnly",type:"boolean",required:false,description:""},{name:"hideDefaultTemplates",type:"boolean",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Template/TemplatePopover/index.js",keywords:["templatepopover"]},{name:"TemplateSharingDialog",modulePath:"components/Template/TemplateSharingDialog/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TemplateSharingDialog",specifier:"@corva/ui/components",exportName:"TemplateSharingDialog"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"title",type:"string",required:false,description:""},{name:"open",type:"boolean",required:true,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"onCancel",type:"function",required:true,description:""},{name:"currentUser",type:"object",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Template/TemplateSharingDialog/index.js",keywords:["templatesharingdialog"]},{name:"ToastContainer",modulePath:"components/Toaster/ToastContainer",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ToastContainer",specifier:"@corva/ui/components",exportName:"ToastContainer"},category:"v1",description:"Component that shows toasts - small messages at the top of the screen. The component writes its API to `window` (and therefore should be unique to a page), so showing the actual toast should be done through `showToast` from `@corva/ui/utils`\n```\nimport { showToast } from '@corva/ui/utils';\n/*...*/\nshowToast(message)\n```\nDefault auto-hide duration: `3000ms`",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"ToastContainer"},examples:[{name:"Default",description:"",code:"<>\n    <ToastContainer />\n\n    <Button onClick={() => showToast('I am a toast!')}>Show Toast</Button>\n  </>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Toaster/ToastContainer.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9597%3A20397",keywords:["toastcontainer","component","shows","toasts","small","messages","screen","writes","window","therefore","should"]},{name:"UniversalLink",modulePath:"components/DevCenter/DevCenterRouterContext/UniversalLink/UniversalLink",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"UniversalLink",specifier:"@corva/ui/components",exportName:"UniversalLink"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"href",type:"any",required:false,description:""},{name:"children",type:"ReactNode",required:true,description:""},{name:"className",type:"string",required:false,description:""},{name:"onClick",type:"function",required:false,description:""},{name:"data-testid",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/DevCenterRouterContext/UniversalLink/UniversalLink.js",keywords:["universallink"]}];
+var componentsV1Data = [{name:"AdvancedSlider",modulePath:"components/AdvancedSlider",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AdvancedSlider",specifier:"@corva/ui/components",exportName:"AdvancedSlider"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"min",type:"number",required:true,description:"Must be strictly smaller than `max`"},{name:"max",type:"number",required:true,description:"Must be strictly bigger than `min`"},{name:"value",type:"[number, number]",required:true,description:""},{name:"onChange",type:"(values: [number, number]) => void",required:false,description:""},{name:"orientation",type:"'horizontal' | 'vertical'",required:false,description:"",enumValues:["horizontal","vertical"]},{name:"valueFormatter",type:"(value: number) => number",required:false,description:"Formats value before passing it to onChange"},{name:"displayFormatter",type:"(value: number) => ReactNode",required:false,description:"Formats value before displaying"},{name:"editableHandles",type:"boolean",required:false,description:""},{name:"onStop",type:"() => void",required:false,description:"Called when user stops changing values"},{name:"reversed",type:"boolean",required:false,description:"Reverses axis"},{name:"handlePosition",type:"'left' | 'right' | 'top' | 'bottom'",required:false,description:"Positions \"floating\" handle (outside of track). Positioned at the `bottom` for horizontal orientation, and at the `right` for vertical",enumValues:["left","right","top","bottom"]},{name:"handleClasses",type:"Record<string, string>",required:false,description:""},{name:"minimal",type:"boolean",required:false,description:"Hides values in handles"},{name:"dimension",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<AdvancedSlider {...props} />"},{name:"Sizes",description:"Component supports 3 sizes through a `dimension` prop:\n\n- `small` (default)\n- `medium`\n- `large`\n",code:"<SbColumn alignItems=\"stretch\">\n    <AdvancedSlider dimension=\"small\" min={0} max={10_000} value={[3_000, 7_000]} />\n    <AdvancedSlider dimension=\"medium\" min={0} max={10_000} value={[3_000, 7_000]} />\n    <AdvancedSlider dimension=\"large\" min={0} max={10_000} value={[3_000, 7_000]} />\n  </SbColumn>"},{name:"Reversed",description:"Component can be displayed in a reversed mode through the use of `reversed` prop",code:"<div style={{ height: '300px' }}>\n    <AdvancedSlider min={0} max={10_000} value={[3_000, 7_000]} reversed />\n  </div>"},{name:"Vertical",description:"Component can be displayed as a vertical slider through the use of `orientation` prop\n\nIn this case the component will take all available vertical space",code:"<div style={{ height: '300px' }}>\n    <AdvancedSlider\n      min={0}\n      max={10_000}\n      value={[3_000, 5_000]}\n      orientation=\"vertical\"\n      displayFormatter={value => new Intl.NumberFormat().format(value).toString()}\n    />\n  </div>"},{name:"WithCharts",description:"Component can be used overlaid over a chart. See example",code:"{\n  const chartRef = useRef();\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <ChartWrapper chartRef={chartRef}>\n        <HighchartsReact\n          highcharts={Highcharts}\n          options={chartOptions}\n          containerProps={{ style: { height: '100%', width: '100%' } }}\n          ref={chartRef}\n        />\n      </ChartWrapper>\n      <div\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          bottom: 0,\n        }}\n      >\n        <AdvancedSlider\n          dimension=\"medium\"\n          orientation=\"vertical\"\n          min={2000}\n          max={10_000}\n          value={[3_000, 5_000]}\n        />\n      </div>\n    </div>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AdvancedSlider/AdvancedSlider.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=31925%3A122776",keywords:["advancedslider"]},{name:"AnchorsList",modulePath:"components/AnchorsList",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AnchorsList",specifier:"@corva/ui/components",exportName:"AnchorsList"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"title",type:"string",required:false,description:""},{name:"items",type:"array",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AnchorsList/AnchorsList.js",keywords:["anchorslist"]},{name:"AppIcon",modulePath:"components/AppIcon",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppIcon",specifier:"@corva/ui/components",exportName:"AppIcon"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"alt",type:"string",required:false,description:""},{name:"appDevType",type:"'ui' | 'be' | 'beIdle'",required:false,description:"",enumValues:["ui","be","beIdle"]},{name:"className",type:"string",required:false,description:""},{name:"'data-testid'",type:"string",required:false,description:""},{name:"height",type:"number",required:false,description:""},{name:"iconUrl",type:"string | null",required:false,description:""},{name:"radius",type:"number",required:false,description:""},{name:"segment",type:"string[] | string",required:false,description:""},{name:"width",type:"number",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AppIcon/AppIcon.tsx",keywords:["appicon"]},{name:"AppVersionsSelect",modulePath:"components/AppVersionsSelect",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppVersionsSelect",specifier:"@corva/ui/components",exportName:"AppVersionsSelect"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"value",type:"custom",required:false,description:""},{name:"onChange",type:"function",required:true,description:""},{name:"appId",type:"custom",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AppVersionsSelect/AppVersionsSelect.js",keywords:["appversionsselect"]},{name:"AssetNameLabel",modulePath:"components/AssetNameLabel",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"AssetNameLabel",specifier:"@corva/ui/components/AssetNameLabel/AssetNameLabel",form:"named",exportName:"AssetNameLabel"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"AssetNameLabel"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetNameLabel/AssetNameLabel.tsx",keywords:["assetnamelabel"]},{name:"AssetsMultipleSelector",modulePath:"components/AssetsMultipleSelector",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AssetsMultipleSelector",specifier:"@corva/ui/components",exportName:"AssetsMultipleSelector"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"selectedAssets",type:"[] | Asset[]",required:true,description:"array of asset objects with required id and name fields."},{name:"onChange",type:"(assets: Asset[] | []) => void",required:true,description:"callback fires on asset selection with array of all selected assets."},{name:"label",type:"string",required:true,description:"label for autocomplete input."},{name:"type",type:"'program' | 'rig' | 'well' | 'frac_fleet' | 'drillout_unit' | 'pad' | 'assets'",required:true,description:"type of asset.",enumValues:["program","rig","well","frac_fleet","drillout_unit","pad","assets"]},{name:"className",type:"string",required:false,description:"css for root component."},{name:"customRequestQueryParams",type:"Record<string, unknown> & {\n    fields?: string[];\n    per_page?: number | string;\n  }",required:false,description:"custom query params for assets request like fields, per_page."},{name:"classes",type:"any",required:false,description:"material ui autocomplete classes."}],propsList:{kind:"complete"},examples:[{name:"AssetsMultipleSelector",description:"",code:"{\n  const [value, setValue] = useState([]);\n\n  const onAssetChange = assets => {\n    setValue(assets);\n  };\n\n  useEffect(() => {\n    setValue([]);\n  }, [type]);\n\n  return (\n    <div style={{ width }}>\n      <AssetsSelectorComponent\n        selectedAssets={value}\n        onChange={onAssetChange}\n        label={startCase(type)}\n        type={type}\n        key={type}\n      />\n    </div>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetsMultipleSelector/AssetsMultipleSelector.tsx",keywords:["assetsmultipleselector"]},{name:"AttachFileButton",modulePath:"components/AttachFileButton",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"AttachFileButton",specifier:"@corva/ui/components/AttachFileButton/AttachFileButton",form:"named",exportName:"AttachFileButton"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"inputRef",type:"RefObject<HTMLInputElement>",required:true,description:""},{name:"onClick",type:"() => void",required:true,description:""},{name:"onFileSelect",type:"(event: ChangeEvent<HTMLInputElement>) => void",required:true,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"tooltip",type:"string",required:false,description:""},{name:"accept",type:"string",required:false,description:""},{name:"multiple",type:"boolean",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AttachFileButton/AttachFileButton.tsx",keywords:["attachfilebutton"]},{name:"Attachment",modulePath:"components/Attachment",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Attachment",specifier:"@corva/ui/components",exportName:"Attachment"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"attachmentUrl",type:"string",required:true,description:""},{name:"attachmentSize",type:"number",required:false,description:""},{name:"displayName",type:"string",required:false,description:""},{name:"fileName",type:"string",required:false,description:""},{name:"size",type:"enum",required:false,description:"",enumValues:["small","medium"]},{name:"classes",type:"object",required:false,description:""},{name:"small",type:"boolean",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Attachment/index.js",keywords:["attachment"]},{name:"AttachmentLightbox",modulePath:"components/AttachmentLightbox",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"AttachmentLightbox",specifier:"@corva/ui/components/AttachmentLightbox/AttachmentLightbox",form:"named",exportName:"AttachmentLightbox"},category:"v1",description:"Full-size preview for a comment’s attachments. The header carries the file name, its size, Download, and an overflow menu; media zooms with the buttons, the wheel or a pinch and drags to pan; documents render inline (PDF, CSV, XLSX, TXT, JSON) or offer a download card. The strip along the bottom steps through the rest of the set — click a tile, use the arrows, or press ← / →.",isExperimental:true,isDeprecated:false,props:[{name:"items",type:"AttachmentPreviewItem[]",required:true,description:""},{name:"activeId",type:"AttachmentPreviewItem['id'] | null",required:true,description:"`null` keeps the lightbox closed."},{name:"onActiveIdChange",type:"(id: AttachmentPreviewItem['id']) => void",required:true,description:""},{name:"onClose",type:"() => void",required:true,description:""},{name:"onShare",type:"(item: AttachmentPreviewItem) => void",required:false,description:"Adds \"Share file\" to the overflow menu."},{name:"title",type:"ReactNode",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Demo items={ITEMS} onShare={item => console.log('share', item)} />"},{name:"SingleAttachment",description:"",code:"<Demo items={[ITEMS[0]]} />"},{name:"WithoutInlinePreview",description:"",code:"<Demo items={[ITEMS[3]]} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AttachmentLightbox/AttachmentLightbox.tsx",figmaUrl:"https://www.figma.com/file/g7HMsT490usxg8oBs5olcD/Comment-Tool?node-id=3474-55198",keywords:["attachmentlightbox","full-size","preview","comment","attachments","header","carries","file","name","size","download"]},{name:"AttachmentPreview",modulePath:"components/AttachmentPreview",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AttachmentPreview",specifier:"@corva/ui/components",exportName:"AttachmentPreview"},category:"v1",description:"Horizontal row of attachment tiles for the comment input — image / video thumbnails and file-type cards (`FileIcon` + name + extension), with a hover remove (✕). Layout reused from the Chat MessageInput file preview. Passing `onReorder` turns the row into a drag-to-reorder list: hold a tile (or focus it and press Space) to pick it up, then drop it on the insertion bar.",isExperimental:true,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"AttachmentPreview"},examples:[{name:"Default",description:"",code:"<div style={{ background: '#1c1c1c', padding: 24, width: 420 }}>\n    <AttachmentPreview\n      onRemove={() => {}}\n      items={[\n        { id: 1, name: 'log.png', kind: 'image', src: img },\n        { id: 2, name: 'run.mp4', kind: 'video', src: img },\n        { id: 3, name: 'Corva report.xls', kind: 'file' },\n        { id: 4, name: 'notes.pdf', kind: 'file' },\n      ]}\n    />\n  </div>"},{name:"Reorderable",description:"",code:"{\n  const [items, setItems] = useState(REORDERABLE);\n\n  return (\n    <div style={{ background: '#1c1c1c', padding: 24, width: 420 }}>\n      <AttachmentPreview\n        items={items}\n        onRemove={id => setItems(prev => prev.filter(item => item.id !== id))}\n        onReorder={orderedIds =>\n          setItems(prev =>\n            orderedIds.map(\n              id => prev.find(item => String(item.id) === String(id)) as Props['items'][number]\n            )\n          )\n        }\n      />\n    </div>\n  );\n}"},{name:"Uploading",description:"",code:"<div style={{ background: '#1c1c1c', padding: 24, width: 420 }}>\n    <AttachmentPreview\n      onRemove={() => {}}\n      items={[\n        { id: 1, name: 'log.png', kind: 'image', src: img, isUploading: true },\n        { id: 2, name: 'Corva report.xls', kind: 'file', isUploading: true },\n      ]}\n    />\n  </div>"},{name:"Downloadable",description:"",code:"<div style={{ background: '#1c1c1c', padding: 24, width: 420 }}>\n    <AttachmentPreview\n      items={[\n        { id: 1, name: 'Corva report.xls', kind: 'file', downloadUrl: img },\n        { id: 2, name: 'notes.pdf', kind: 'file', downloadUrl: img },\n      ]}\n    />\n  </div>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AttachmentPreview/AttachmentPreview.tsx",figmaUrl:"https://www.figma.com/file/g7HMsT490usxg8oBs5olcD/Comment-Tool?node-id=2799-44081",keywords:["attachmentpreview","horizontal","attachment","tiles","comment","input","image","video","thumbnails","file-type","cards"]},{name:"Autocomplete",modulePath:"components/Autocomplete",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Autocomplete",specifier:"@corva/ui/components",exportName:"Autocomplete"},category:"v1",description:"Wrapper over MUI's `<Autocomplete/>` component for selecting values from a predefined list, with an ability to search for entries",isExperimental:false,isDeprecated:false,props:[{name:"options",type:"(object | string)[]",required:true,description:""},{name:"renderInput",type:"(params: any) => ReactNode",required:true,description:"Renders input"},{name:"value",type:"object | string",required:false,description:""},{name:"size",type:"MuiAutocompleteProps<any, any, any, any>['size']",required:false,description:""},{name:"isCreatable",type:"boolean",required:false,description:"Works only with strings as `options`. If `true`, `onChange` has the following signature:<br/>\n```\n(value: string, wasCreated: boolean) => void;\n```"},{name:"getOptionLabel",type:"(option: object | string) => string",required:true,description:"Used for searching the options list by default"},{name:"renderOption",type:"(option: object | string, params: { selected: boolean; inputValue: string }) => string",required:false,description:"Required when working with objects as `options`."},{name:"onInputChange",type:"(event: ChangeEvent<{}>, value: string, action: 'input' | 'reset' | 'clear') => void",required:false,description:""},{name:"onChange",type:"(event: ChangeEvent<{}>, value: object | string, reason: 'create-option' | 'select-option' | 'remove-option' | 'clear' | 'blur') => void",required:false,description:""},{name:"classes",type:"Record<string, string>",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"loading",type:"boolean",required:false,description:""},{name:"loadingText",type:"ReactNode",required:false,description:""},{name:"getOptionDisabled",type:"(option: object | string) => boolean",required:false,description:""},{name:"disableCloseOnSelect",type:"boolean",required:false,description:"If `true` - prevents Autocomplete from closing on select"},{name:"multiple",type:"boolean",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit< MuiAutocompleteProps<any, any, any, any>, | 'options' | 'renderInput' | 'value' | 'size' | 'isCreatable' | 'getOptionLabel' | 'renderOption' | 'onInputChange' | 'onChange' | 'classes' | 'className' | 'loading' | 'loadingText' | 'getOptionDisabled' | 'disableCloseOnSelect' | 'multiple' >"]},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<Option>();\n  return (\n    <Autocomplete\n      {...props}\n      value={value}\n      onChange={(e, newValue, ...rest) => {\n        setValue(newValue as Option);\n        props.onChange?.(e, newValue, ...rest);\n      }}\n      renderInput={params => <TextField {...params} />}\n      getOptionLabel={option => (option as Option).name}\n      renderOption={option => (option as Option).name}\n    />\n  );\n}"},{name:"InputOptions",description:"Input-related options should be done through `renderInput` prop",code:"{\n  return (\n    <Autocomplete\n      value={null}\n      options={Options}\n      getOptionLabel={option => (option as Option).name}\n      renderOption={option => (option as Option).name}\n      renderInput={params => (\n        <TextField {...params} label=\"Field Label\" placeholder=\"Field placeholder\" />\n      )}\n    />\n  );\n}"},{name:"Sizes",description:"Input size can be controlled through `size` prop.",code:"{\n  return (\n    <SbRow>\n      <Autocomplete\n        value={Options[1]}\n        size=\"small\"\n        options={Options}\n        renderInput={params => <TextField {...params} />}\n        getOptionLabel={option => (option as Option).name}\n        renderOption={option => (option as Option).name}\n      />\n      <Autocomplete\n        value={Options[1]}\n        size=\"medium\"\n        options={Options}\n        renderInput={params => <TextField {...params} />}\n        getOptionLabel={option => (option as Option).name}\n        renderOption={option => (option as Option).name}\n      />\n    </SbRow>\n  );\n}"},{name:"LoadingState",description:"Use `loading` and `loadingText` props to show a custom message when some data is being loaded in the background",code:"{\n  return (\n    <Autocomplete\n      value={null}\n      options={[]}\n      renderInput={params => <TextField {...params} />}\n      getOptionLabel={option => (option as Option).name}\n      renderOption={option => (option as Option).name}\n      loading\n      loadingText={\n        <>\n          Can't you see, I'm <u>loading</u>!\n        </>\n      }\n    />\n  );\n}"},{name:"DisabledOptions",description:"Use `getOptionDisabled` prop to tell which options are disabled",code:"{\n  return (\n    <Autocomplete\n      value={null}\n      options={Options}\n      renderInput={params => <TextField {...params} />}\n      getOptionLabel={option => (option as Option).name}\n      renderOption={option => (option as Option).name}\n      getOptionDisabled={option => (option as Option).id === '2'}\n    />\n  );\n}"},{name:"Creatable",description:"Works only with string `options`",code:"{\n  const [options, setOptions] = useState(Options.map((option: Option) => option.name));\n  const [value, setValue] = useState<string>();\n\n  return (\n    <Autocomplete\n      options={options}\n      renderInput={params => <TextField {...params} />}\n      value={value}\n      isCreatable\n      getOptionLabel={i => i as string}\n      onChange={(value: any, wasCreated) => {\n        console.log('onChange', value, wasCreated);\n\n        if (wasCreated) {\n          setOptions(prev => [...prev, value as string]);\n        }\n\n        setValue(value);\n      }}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Autocomplete/Autocomplete.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A7954&mode=dev",keywords:["autocomplete","search","typeahead","suggest","filter","wrapper","over","component","selecting","values","predefined","list","ability"]},{name:"Avatar",modulePath:"components/Avatar/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Avatar",specifier:"@corva/ui/components",exportName:"Avatar"},category:"v1",description:"Used to display user's avatar or initials",isExperimental:false,isDeprecated:false,props:[{name:"displayName",type:"string",required:true,description:""},{name:"showTooltip",type:"boolean",required:false,description:""},{name:"size",type:"number",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"imgSrc",type:"string",required:false,description:""},{name:"alt",type:"string",required:false,description:""},{name:"'data-testid'",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Avatar {...props} />"},{name:"TextSize",description:"Text size is calculated by the following formula: `Math.floor(avatarSize / 2)`\n\nHowever, there are \"fixed\" avatar sizes: `24`, `32`, `40`, `48`, `128`, and `200`, for which their own font sizes are defined",code:"{\n  const sizes = [12, 24, 28, 32, 36, 40, 48, 100, 128, 180, 200];\n  return (\n    <SbColumn>\n      {sizes.map(size => (\n        <SbRow key={size} alignItems=\"center\">\n          {size}px\n          <Avatar size={size} displayName=\"Ian Moone\" />\n        </SbRow>\n      ))}\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Avatar/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105%3A59473",keywords:["avatar","user","profile","image","icon","used","display","initials"]},{name:"BICOffsetPickerDialog",modulePath:"components/BICOffsetPickerDialog",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BICOffsetPickerDialog",specifier:"@corva/ui/components",exportName:"BICOffsetPickerDialog"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"defaultSubjectWell",type:"object",required:false,description:""},{name:"offsetSetting",type:"object",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""},{name:"isOpen",type:"boolean",required:true,description:""},{name:"onClose",type:"function",required:true,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"addWellsUsabilityInfo",type:"function",required:false,description:""},{name:"unusableWellAlarm",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/BICOffsetPickerDialog/index.js",keywords:["bicoffsetpickerdialog"]},{name:"Breadcrumbs",modulePath:"components/Breadcrumbs",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Breadcrumbs",specifier:"@corva/ui/components",exportName:"Breadcrumbs"},category:"v1",description:"Used as a hierarchical navigation element at the tp of the page",isExperimental:false,isDeprecated:false,props:[{name:"pathItems",type:"{ text: string; href?: string }[]",required:true,description:""},{name:"classes",type:"Record<string, string>",required:false,description:""},{name:"withBackIcon",type:"boolean",required:false,description:""},{name:"separator",type:"ReactNode",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Breadcrumbs {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Breadcrumbs/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=31967%3A122781&mode=dev",keywords:["breadcrumbs","navigation","path","trail","breadcrumb","used","hierarchical","element","page"]},{name:"Button",modulePath:"components/Button/components/Button/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Button",specifier:"@corva/ui/components",exportName:"Button"},category:"v1",description:"A wrapper around Material UI v4 `Button`. Read more information on the [MUI docs page](https://v4.mui.com/components/buttons/#button)",isExperimental:false,isDeprecated:false,props:[{name:"color",type:"'inherit' | 'primary' | 'default'",required:false,description:"",enumValues:["inherit","primary","default"]},{name:"variant",type:"'text' | 'contained'",required:false,description:"",enumValues:["text","contained"]},{name:"variation",type:"Variation",required:false,description:""}],propsList:{kind:"partial",undescended:["Partial<MUIButtonProps>"]},examples:[{name:"Playground",description:"Use to highlight the most important actions in any experience.",code:"<Button {...props}>Click me!</Button>"},{name:"Size",description:"Adjust the component size using the `size` prop. It supports 3 sizes:\n\n- `large`: use for large, very important buttons\n- `medium` (default): should be used in most cases\n- `small`: use when space is at a premium",code:"<SbColumn>\n    <Button size=\"large\">Click me!</Button>\n    <Button size=\"medium\">Click me!</Button>\n    <Button size=\"small\">Click me!</Button>\n  </SbColumn>"},{name:"Color",description:"We use 2 color variants, controlled through `color` prop:\n\n- `default`\n- `primary`",code:"<SbColumn>\n    <Button color=\"default\">Click me!</Button>\n    <Button color=\"primary\">Click me!</Button>\n  </SbColumn>"},{name:"Variant",description:"Background is controlled through `variant` prop:\n\n- `contained`\n- `text`\n\nNotice the interaction with `color` prop",code:"<SbRow>\n    <SbColumn>\n      <Button variant=\"contained\">Click me!</Button>\n      <Button variant=\"text\">Click me!</Button>\n    </SbColumn>\n    <SbColumn>\n      <Button variant=\"contained\" color=\"primary\">\n        Click me!\n      </Button>\n      <Button variant=\"text\" color=\"primary\">\n        Click me!\n      </Button>\n    </SbColumn>\n  </SbRow>"},{name:"Icons",description:"Pass leading and/or trailing icons through `startIcon` and `endIcon` props respectively. The icon's size is adjusted automatically.\n\nSome text goes here",code:"<SbRow>\n    <SbColumn>\n      <Button startIcon={<BubbleChartIcon />} size=\"large\">\n        Click me!\n      </Button>\n      <Button startIcon={<BubbleChartIcon />} size=\"medium\">\n        Click me!\n      </Button>\n      <Button startIcon={<BubbleChartIcon />} size=\"small\">\n        Click me!\n      </Button>\n    </SbColumn>\n    <SbColumn>\n      <Button endIcon={<BubbleChartIcon />} size=\"large\">\n        Click me!\n      </Button>\n      <Button endIcon={<BubbleChartIcon />} size=\"medium\">\n        Click me!\n      </Button>\n      <Button endIcon={<BubbleChartIcon />} size=\"small\">\n        Click me!\n      </Button>\n    </SbColumn>\n  </SbRow>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Button/components/Button/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105%3A59490",keywords:["button","action","click","submit","trigger","cta","wrapper","around","material","read","more","information","docs","page"]},{name:"ChartButton",modulePath:"components/Chart/components/ChartButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ChartButton",specifier:"@corva/ui/components",exportName:"ChartButton"},category:"v1",description:"ChartButton — chart button for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/ChartButton.js",keywords:["chartbutton","chart","button","family","story","canonical","usage"]},{name:"ChartButtons",modulePath:"components/Chart/components/ChartButtons",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ChartButtons",specifier:"@corva/ui/components",exportName:"ChartButtons"},category:"v1",description:"ChartButtons — chart buttons for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/ChartButtons.js",keywords:["chartbuttons","chart","buttons","family","story","canonical","usage"]},{name:"ChartWrapper",modulePath:"components/Chart/components/ChartWrapper",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ChartWrapper",specifier:"@corva/ui/components",exportName:"ChartWrapper"},category:"v1",description:"ChartWrapper — chart wrapper for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/ChartWrapper.js",keywords:["chartwrapper","chart","wrapper","family","story","canonical","usage"]},{name:"AxisDropdown",modulePath:"components/Chart/components/AxisDropdown",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AxisDropdown",specifier:"@corva/ui/components",exportName:"AxisDropdown"},category:"v1",description:"AxisDropdown — axis dropdown for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/AxisDropdown.js",keywords:["axisdropdown","axis","dropdown","chart","family","story","canonical","usage"]},{name:"ChartSelect",modulePath:"components/Chart/components/ChartSelect",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ChartSelect",specifier:"@corva/ui/components",exportName:"ChartSelect"},category:"v1",description:"ChartSelect — chart select for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/ChartSelect.js",keywords:["chartselect","chart","select","family","story","canonical","usage"]},{name:"DragToZoomButton",modulePath:"components/Chart/components/buttons/DragToZoomButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DragToZoomButton",specifier:"@corva/ui/components",exportName:"DragToZoomButton"},category:"v1",description:"DragToZoomButton — drag to zoom button for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/DragToZoomButton.js",keywords:["dragtozoombutton","drag","zoom","button","chart","family","story","canonical","usage"]},{name:"ZoomInButton",modulePath:"components/Chart/components/buttons/ZoomInButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ZoomInButton",specifier:"@corva/ui/components",exportName:"ZoomInButton"},category:"v1",description:"ZoomInButton — zoom in button for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/ZoomInButton.js",keywords:["zoominbutton","zoom","button","chart","family","story","canonical","usage"]},{name:"ZoomOutButton",modulePath:"components/Chart/components/buttons/ZoomOutButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ZoomOutButton",specifier:"@corva/ui/components",exportName:"ZoomOutButton"},category:"v1",description:"ZoomOutButton — zoom out button for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/ZoomOutButton.js",keywords:["zoomoutbutton","zoom","button","chart","family","story","canonical","usage","out"]},{name:"PanButton",modulePath:"components/Chart/components/buttons/PanButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"PanButton",specifier:"@corva/ui/components",exportName:"PanButton"},category:"v1",description:"PanButton — pan button for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/PanButton.js",keywords:["panbutton","button","chart","family","story","canonical","usage","pan"]},{name:"ResetZoomButton",modulePath:"components/Chart/components/buttons/ResetZoomButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ResetZoomButton",specifier:"@corva/ui/components",exportName:"ResetZoomButton"},category:"v1",description:"ResetZoomButton — reset zoom button for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/ResetZoomButton.js",keywords:["resetzoombutton","reset","zoom","button","chart","family","story","canonical","usage"]},{name:"HideAxesButton",modulePath:"components/Chart/components/buttons/HideAxesButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"HideAxesButton",specifier:"@corva/ui/components",exportName:"HideAxesButton"},category:"v1",description:"HideAxesButton — hide axes button for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/HideAxesButton.js",keywords:["hideaxesbutton","hide","axes","button","chart","family","story","canonical","usage"]},{name:"ChartTypeButton",modulePath:"components/Chart/components/buttons/ChartTypeButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ChartTypeButton",specifier:"@corva/ui/components",exportName:"ChartTypeButton"},category:"v1",description:"ChartTypeButton — chart type button for the Chart family. See the Chart story for canonical usage.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"Chart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisConfigRegularSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AxisConfigDenseSpacing",description:"Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"ChartsWithDropdownAxes",description:"Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",code:"{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseVerticalAxisOptions),\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      key={String(isDense)}\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Dense Axes\" size=\"small\" checked={isDense} onChange={setIsDense} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n          <AxisDropdown\n            className={storyStyles.axisDropdownHorizontal}\n            value={dropdownValue}\n            unit=\"ft\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n          <AxisDropdown\n            className={storyStyles.axisDropdownVertical}\n            value={dropdownValue}\n            unit=\"gb\"\n            onChange={handleDropdownValueChange}\n            options={dropdownOptions}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"MultipleAxesChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    customOptions\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props} onCustomizeScaleClick={onCustomizeScaleClick}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"CustomizeScaleChartInverted",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"ChartWithFormations",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AdditionalButtonsChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n              defaultValue=\"test1\"\n              options={[\n                {\n                  label: 'test 1',\n                  value: 'test1',\n                },\n                {\n                  label: 'test 2',\n                  value: 'test2',\n                },\n                {\n                  label: 'test 3',\n                  value: 'test3',\n                },\n              ]}\n            />\n            <HideAxesButton tooltipProps={{ placement: 'bottom' }} />\n          </ChartButtons>\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"BarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"StackedBarChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: '#64B5FF',\n          borderColor: 'transparent',\n          data: [3, 2, 1],\n        },\n      ],\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"SmallChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"AxisDropdownChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n          text: null,\n        },\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n        <AxisDropdown\n          className={dropdownClasses.horizontalDropdown}\n          value={dropdownValue}\n          unit=\"ft\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n        <AxisDropdown\n          className={dropdownClasses.verticalDropdown}\n          value={dropdownValue}\n          unit=\"gb\"\n          onChange={handleDropdownValueChange}\n          options={dropdownOptions}\n        />\n      </div>\n    </div>\n  );\n}"},{name:"ChartRightAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"ChartTwoValuesAxis",description:"",code:"{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"},{name:"MobileResponsiveChart",description:"",code:"props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={isTabletView && classes.mobileButtons}>\n            <ResetZoomButton />\n            {!isTabletView && (\n              <>\n                <PanButton />\n                <DragToZoomButton />\n                <ZoomInButton />\n                <ZoomOutButton />\n              </>\n            )}\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"HighchartStockChart",description:"",code:"props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={HighchartsStock}\n        constructorType=\"stockChart\"\n        options={stockOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"},{name:"DonutChart",description:"",code:"{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/ChartTypeButton.js",keywords:["charttypebutton","chart","type","button","family","story","canonical","usage"]},{name:"ChartActionsList",modulePath:"components/ChartActionsList",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ChartActionsList",specifier:"@corva/ui/components",exportName:"ChartActionsList"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onChange",type:"function",required:true,description:""},{name:"min",type:"number",required:true,description:""},{name:"max",type:"number",required:true,description:""},{name:"left",type:"number",required:true,description:""},{name:"right",type:"number",required:true,description:""},{name:"classes",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ChartActionsList/ChartActionsList.js",keywords:["chartactionslist"]},{name:"Checkbox",modulePath:"components/Checkbox",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Checkbox",specifier:"@corva/ui/components",exportName:"Checkbox"},category:"v1",description:"We use styled MUI checkbox components. See details in [MUI documentation](https://v4.mui.com/components/checkboxes)",isExperimental:false,isDeprecated:false,props:[{name:"checked",type:"boolean",required:false,description:""},{name:"size",type:"'medium' | 'small'",required:false,description:"",enumValues:["medium","small"]},{name:"classes",type:"Record<string, string>",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"indeterminate",type:"boolean",required:false,description:""},{name:"onChange",type:"(event: ChangeEvent, value: boolean) => void",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Checkbox {...props} />"},{name:"Sizes",description:"Component's size is controlled through `size` prop, which supports 2 sizes: `small` and `medium` (default)",code:"{\n  return (\n    <SbRow>\n      <Checkbox size=\"small\" />\n      <Checkbox size=\"small\" checked />\n      <Checkbox size=\"medium\" />\n      <Checkbox size=\"medium\" checked />\n    </SbRow>\n  );\n}"},{name:"UsageWithLabel",description:"Use `<FormControlLabel/>` to display a label for the checkbox",code:"{\n  const [isChecked, setIsChecked] = useState(false);\n\n  return (\n    <SbColumn>\n      <FormControlLabel\n        control={<Checkbox onChange={() => setIsChecked(value => !value)} />}\n        label=\"Label\"\n        checked={isChecked}\n        disabled\n      />\n      <FormControlLabel\n        control={<Checkbox onChange={() => setIsChecked(value => !value)} />}\n        label=\"Label\"\n        checked={isChecked}\n      />\n      <FormControlLabel\n        control={<Checkbox size=\"small\" onChange={() => setIsChecked(value => !value)} />}\n        label=\"Label\"\n        checked={isChecked}\n      />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Checkbox/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105%3A59492",keywords:["checkbox","toggle","check","boolean","option","styled","components","details","documentation"]},{name:"Chip",modulePath:"components/Chip",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Chip",specifier:"@corva/ui/components",exportName:"Chip"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"variant",type:"'default' | 'outlined' | 'basic'",required:false,description:"",enumValues:["default","outlined","basic"]},{name:"checked",type:"boolean",required:false,description:"Displays a checked icon"},{name:"'data-testid'",type:"string",required:false,description:""},{name:"onClick",type:"MouseEventHandler<HTMLDivElement>",required:false,description:""}],propsList:{kind:"partial",undescended:["Partial< Omit<MuiChipProps, 'variant' | 'color' | 'onClick' | 'children' | 'avatar'> >"]},examples:[{name:"Default",description:"",code:"<Chip {...props} />"},{name:"WithIcons",description:"`icon` prop allows adding icons/content to a chip.",code:"{\n  return (\n    <SbColumn>\n      <Chip icon={<CautionFilledCustomIcon size={16} />} label=\"With Icon\" />\n      <Chip icon={<FileAdditionOne size={16} />} label=\"With Icon\" />\n      <Chip icon={<FileAdditionOne size={16} />} label=\"With Icon and checked\" checked />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chip/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105%3A59510",keywords:["chip","tag","label","badge","pill"]},{name:"ColorPicker",modulePath:"components/ColorPicker",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ColorPicker",specifier:"@corva/ui/components",exportName:"ColorPicker"},category:"v1",description:"Used to provide a rich color input",isExperimental:false,isDeprecated:false,props:[{name:"label",type:"string",required:false,description:""},{name:"value",type:"string",required:true,description:""},{name:"onChange",type:"(color: string) => void",required:true,description:""},{name:"converter",type:"keyof typeof converters",required:false,description:""},{name:"pickerComponent",type:"ComponentType<any>",required:false,description:""},{name:"buttonClassName",type:"string",required:false,description:""},{name:"labelPosition",type:"'top' | 'right'",required:false,description:"",enumValues:["top","right"]},{name:"hideLabel",type:"boolean",required:false,description:""},{name:"lensColor",type:"string",required:false,description:""},{name:"enableTransparencyPalette",type:"boolean",required:false,description:""},{name:"tooltipProps",type:"Omit<TooltipProps, 'children'>",required:false,description:""},{name:"'data-testid'",type:"string",required:false,description:""},{name:"popoverAnchorOrigin",type:"PopoverOrigin",required:false,description:""},{name:"popoverTransformOrigin",type:"PopoverOrigin",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"onOpen",type:"() => void",required:false,description:""},{name:"onClose",type:"() => void",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ColorPicker {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ColorPicker/ColorPicker.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19119%3A59766&mode=dev",keywords:["colorpicker","color","palette","pick","swatch","used","provide","rich","input"]},{name:"ColorPickerPalette",modulePath:"components/ColorPickerPalette",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ColorPickerPalette",specifier:"@corva/ui/components",exportName:"ColorPickerPalette"},category:"v1",description:"",isExperimental:false,isDeprecated:true,props:[{name:"color",type:"string",required:true,description:""},{name:"onChange",type:"(convertedColor: string) => void",required:true,description:""},{name:"handleClose",type:"() => void",required:true,description:""},{name:"anchorEl",type:"null | Element",required:false,description:"Anchor element to position the popover to. Pass falsy value to hide popover"},{name:"converter",type:"Format",required:false,description:""},{name:"popoverAnchorOrigin",type:"PopoverOrigin",required:false,description:""},{name:"popoverTransformOrigin",type:"PopoverOrigin",required:false,description:""},{name:"pickerComponent",type:"ComponentType<PaletteChromePickerProps>",required:false,description:""},{name:"enableTransparencyPalette",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [anchorEl, setAnchorEl] = useState<HTMLElement>();\n  const [value, setValue] = useState<string>('#FFF000');\n\n  return (\n    <SbRow alignItems=\"center\">\n      <ColorPickerPalette\n        {...props}\n        color={value}\n        anchorEl={anchorEl}\n        onChange={(color, ...rest) => {\n          props.onChange?.(color, ...rest);\n          setValue(color);\n        }}\n        handleClose={() => setAnchorEl(undefined)}\n      />\n      <Button onClick={e => setAnchorEl(e.currentTarget)}>Click me</Button>\n      Value: {value}\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ColorPickerPalette/ColorPickerPalette.tsx",figmaUrl:"https://www.figma.com/file/smNVlGhHv4dyuH5Q22pxAS/CrossPlot?node-id=1580%3A148784",keywords:["colorpickerpalette"]},{name:"Comment",modulePath:"components/Comment",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Comment",specifier:"@corva/ui/components",exportName:"Comment"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"comment",type:"object",required:true,description:""},{name:"showOnMount",type:"boolean",required:false,description:""},{name:"spaceAround",type:"boolean",required:false,description:""},{name:"handleShowOnMount",type:"function",required:false,description:""},{name:"handleEdit",type:"function",required:false,description:""},{name:"handleDeleteCallback",type:"function",required:true,description:""},{name:"patchCommentCallback",type:"function",required:true,description:""},{name:"companyId",type:"number",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""},{name:"classes",type:"object",required:false,description:""},{name:"isNative",type:"boolean",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Comment/index.js",keywords:["comment"]},{name:"CommentCard",modulePath:"components/CommentCard",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CommentCard",specifier:"@corva/ui/components",exportName:"CommentCard"},category:"v1",description:"See the [Comments migration guide](?path=/docs/components-v2-comments-migration-guide--docs). Comment card on the shared `FeedCard` surface. Two variants:\n\n- **`expanded`** (default) — header (avatar + name + timestamp, optional accent `subtitle`), body ending with the trace `chip` (its leading edge takes the trace `chipColor`), an optional attachment slot, the actions row, and — once `isReplyOpen` — the reply input above the replies list.\n- **`preview`** — compact list card: the same header + body, with the actions row in a bordered footer.\n\nActions row (Figma 2799:61842): `reply · like · share` on the left (each showing its count when `> 0`; the active like turns accent), then the info icon and the kebab `menuItems` on the right. Depth/time metadata lives only in the info-icon hover tooltip — never inline on the card.",isExperimental:true,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"CommentCard"},examples:[{name:"Default",description:"Expanded card, replies closed. Hover the footer info icon to reveal the depth/time tooltip.",code:"<Frame>\n    <CommentCard\n      variant=\"expanded\"\n      width={302}\n      author={{ name: 'User Name' }}\n      timestamp=\"Nov 14, 13:20\"\n      chip=\"ROP Depth\"\n      chipColor=\"#fd964b\"\n      body=\"MUD WT IN 16.0 Visc 60, attantion to BD.\"\n      contextRows={metadata}\n      onReplyToggle={() => {}}\n      onLike={() => {}}\n      onForward={() => {}}\n      menuItems={menuItems}\n    />\n  </Frame>"},{name:"Liked",description:"Active like (accent) with like + comment counts beside the icons.",code:"<Frame>\n    <CommentCard\n      variant=\"expanded\"\n      width={302}\n      author={{ name: 'User Name' }}\n      timestamp=\"Nov 14, 13:20\"\n      chip=\"ROP Depth\"\n      body=\"MUD WT IN 16.0 Visc 60, attantion to BD.\"\n      contextRows={metadata}\n      isLiked\n      likesCount={12}\n      commentsCount={2}\n      onReplyToggle={() => {}}\n      onLike={() => {}}\n      onForward={() => {}}\n      menuItems={menuItems}\n    />\n  </Frame>"},{name:"RepliesExpanded",description:"Reply section open (Figma 2841:66442): dimmed footer surface — reply input first, replies list, \"show more\" at the bottom.",code:"<Frame>\n    <CommentCard\n      variant=\"expanded\"\n      width={364}\n      author={{ name: 'Name Name' }}\n      timestamp=\"Nov 14 2025, 13:20\"\n      subtitle=\"Rig Name - Well Name\"\n      body=\"MUD WT IN 16.0 Visc 60, attantion to BD.\"\n      contextRows={metadata}\n      commentsCount={2}\n      onReplyToggle={() => {}}\n      onLike={() => {}}\n      onForward={() => {}}\n      menuItems={menuItems}\n      isReplyOpen\n      replyInput={\n        <CommentInput\n          bare\n          placeholder=\"Reply\"\n          autoFocus\n          onSubmit={() => {}}\n          leading={<Avatar size={32} name=\"Jane Roe\" />}\n        />\n      }\n      replies={replies}\n      hasMoreReplies\n      moreRepliesCount={2}\n      onShowMoreReplies={() => {}}\n    />\n  </Frame>"},{name:"WithAttachments",description:"Attachments (AttachmentPreview) in the `attachmentSlot`, below the body.",code:"<Frame>\n    <CommentCard\n      variant=\"expanded\"\n      width={364}\n      author={{ name: 'Name Name' }}\n      timestamp=\"Nov 14 2025, 13:20\"\n      subtitle=\"Rig Name - Well Name\"\n      contextRows={metadata}\n      body=\"Check the bottom slips on Penelope 9\"\n      attachmentSlot={\n        <AttachmentPreview\n          onRemove={() => {}}\n          items={[\n            { id: 1, name: 'log.png', kind: 'image', src: img },\n            { id: 2, name: 'Corva report.xls', kind: 'file' },\n          ]}\n        />\n      }\n      commentsCount={1}\n      onReplyToggle={() => {}}\n      onForward={() => {}}\n      menuItems={menuItems}\n    />\n  </Frame>"},{name:"EditMode",description:"Edit mode — the body is replaced by an app-supplied form.",code:"<Frame>\n    <CommentCard\n      variant=\"expanded\"\n      width={364}\n      author={{ name: 'Name Name' }}\n      timestamp=\"Nov 14 2025, 13:20\"\n      subtitle=\"Rig Name - Well Name\"\n      body=\"MUD WT IN 16.0 Visc 60, attantion to BD.\"\n      editForm={\n        <CommentInput value=\"MUD WT IN 16.0 Visc 60, attantion to BD.\" onSubmit={() => {}} />\n      }\n    />\n  </Frame>"},{name:"Compact",description:"Compact `preview` variant — actions row in a bordered footer.",code:"<Frame>\n    <CommentCard\n      variant=\"preview\"\n      width={302}\n      author={{ name: 'User Name' }}\n      timestamp=\"Nov 14, 13:20\"\n      chip=\"ROP Depth\"\n      body=\"MUD WT IN 16.0 Visc 60, attantion to BD.\"\n      contextRows={metadata}\n      commentsCount={2}\n      onReplyToggle={() => {}}\n      onLike={() => {}}\n      onForward={() => {}}\n      menuItems={menuItems}\n    />\n  </Frame>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CommentCard/CommentCard.tsx",figmaUrl:"https://www.figma.com/file/g7HMsT490usxg8oBs5olcD/Comment-Tool?node-id=2799-61842",keywords:["commentcard","comments","migration","guide","comment","card","shared","feedcard","surface","variants","expanded"]},{name:"CommentComposer",modulePath:"components/CommentComposer",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CommentComposer",specifier:"@corva/ui/components",exportName:"CommentComposer"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"body",type:"string",required:true,description:""},{name:"onBodyChange",type:"(value: string) => void",required:true,description:""},{name:"onSubmit",type:"() => void",required:true,description:""},{name:"canSubmit",type:"boolean",required:true,description:""},{name:"currentUser",type:"CommentComposerUser",required:true,description:""},{name:"attachments",type:"UploadedAttachment[]",required:false,description:""},{name:"onAttachmentsChange",type:"(attachments: UploadedAttachment[]) => void",required:false,description:""},{name:"maxAttachments",type:"number",required:false,description:""},{name:"attachment",type:"UploadedAttachment | null",required:false,description:""},{name:"onAttachmentChange",type:"(attachment: UploadedAttachment | null) => void",required:false,description:""},{name:"attachmentError",type:"string | null",required:false,description:""},{name:"onAttachmentError",type:"(message: string | null) => void",required:false,description:""},{name:"maxAttachmentSizeBytes",type:"number",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"autoFocus",type:"boolean",required:false,description:""},{name:"placeholder",type:"string",required:false,description:""},{name:"metaRows",type:"CommentMetaRow[]",required:false,description:""},{name:"isMetaSingleLine",type:"boolean",required:false,description:""},{name:"shareToChat",type:"Omit<ShareToChatRowProps, 'testId'>",required:false,description:""},{name:"trailing",type:"ReactNode",required:false,description:"Replaces the default send button, e.g. the edit form's Cancel/Save."},{name:"embedded",type:"boolean",required:false,description:"Render flush inside a host card instead of as its own surface."},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CommentComposer/CommentComposer.tsx",keywords:["commentcomposer"]},{name:"CommentInput",modulePath:"components/CommentInput",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CommentInput",specifier:"@corva/ui/components",exportName:"CommentInput"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"inputRef",type:"object",required:false,description:""},{name:"editFeedItemId",type:"number",required:false,description:""},{name:"editCommentId",type:"number",required:false,description:""},{name:"editComment",type:"string",required:false,description:""},{name:"editAttachment",type:"object",required:false,description:""},{name:"spaceAround",type:"boolean",required:false,description:""},{name:"postComment",type:"function",required:true,description:""},{name:"postCommentCallback",type:"function",required:false,description:""},{name:"patchCommentCallback",type:"function",required:false,description:""},{name:"exitEditMode",type:"function",required:false,description:""},{name:"setIsPosting",type:"function",required:false,description:""},{name:"setIsEditting",type:"function",required:false,description:""},{name:"onMount",type:"function",required:false,description:""},{name:"autoFocus",type:"boolean",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"classes",type:"object",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""},{name:"isNative",type:"boolean",required:false,description:""},{name:"companyId",type:"number",required:false,description:""},{name:"parentId",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CommentInput/index.js",keywords:["commentinput"]},{name:"CommentInputNext",modulePath:"components/CommentInputNext/CommentInputNext",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CommentInputNext",specifier:"@corva/ui/components",exportName:"CommentInputNext"},category:"v1",description:"See the [Comments migration guide](?path=/docs/components-v2-comments-migration-guide--docs). Shared comment input shell. The field auto-grows from `minRows` up to `maxRows`. Send is disabled until there is text (override with `canSubmit`); Enter submits, Shift+Enter newlines.\n\nTwo layouts:\n\n- **Create** (default) — a borderless input panel: text, then a toolbar row with the `toolbar` actions (attach / @ / emoji) on the left and the send button on the right; a divider; then the `footer` (depth/time metadata, Share-in-Chat + trace selector).\n- **Reply** (`bare`) — a bordered field inline with a `leading` avatar, inside the comment card.\n\nSlots: `field` (custom mention editor), `leading` (bare only), `trailing` (replaces send — e.g. an upload spinner), `attachmentSlot` (below the text), `toolbar` (create toolbar row), `footer`.",isExperimental:true,isDeprecated:false,props:[{name:"placeholder",type:"string",required:false,description:""},{name:"value",type:"string",required:false,description:""},{name:"onChange",type:"(value: string) => void",required:false,description:""},{name:"onSubmit",type:"(value: string) => void",required:false,description:""},{name:"onCancel",type:"() => void",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"autoFocus",type:"boolean",required:false,description:""},{name:"minRows",type:"number",required:false,description:""},{name:"maxRows",type:"number",required:false,description:""},{name:"field",type:"ReactNode",required:false,description:"Editable control rendered in place of the built-in textarea."},{name:"canSubmit",type:"boolean",required:false,description:""},{name:"bare",type:"boolean",required:false,description:"Drop the outer surface so the field sits flush, for the in-card reply input."},{name:"leading",type:"ReactNode",required:false,description:""},{name:"trailing",type:"ReactNode",required:false,description:"Replaces the default send button."},{name:"sendTooltip",type:"string",required:false,description:""},{name:"attachments",type:"AttachmentPreviewItem[]",required:false,description:""},{name:"onAttachmentRemove",type:"(id: AttachmentPreviewItem['id']) => void",required:false,description:""},{name:"onAttachmentRetry",type:"(id: AttachmentPreviewItem['id']) => void",required:false,description:""},{name:"onAttachmentReorder",type:"(orderedIds: AttachmentPreviewItem['id'][]) => void",required:false,description:"Enables drag-to-reorder on the attachment strip."},{name:"onFilesDrop",type:"(files: File[]) => void",required:false,description:"Enables dropping files from the desktop onto the composer."},{name:"onImageLinkPaste",type:"(url: string) => void",required:false,description:"Given a pasted link that points at an image."},{name:"dropLabel",type:"string",required:false,description:""},{name:"attachmentSlot",type:"ReactNode",required:false,description:"Extra content in the attachment area, e.g. an upload-error banner."},{name:"toolbar",type:"ReactNode",required:false,description:""},{name:"footer",type:"ReactNode",required:false,description:""},{name:"embedded",type:"boolean",required:false,description:"Render flush inside a host surface: no background, full-width divider."},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"Empty input — send disabled until there is text.",code:"<Frame>\n    <CommentInput onSubmit={() => {}} />\n  </Frame>"},{name:"Filled",description:"Filled (\"Type\") state — send is enabled.",code:"<Frame>\n    <CommentInput value=\"MUD WT IN 16.0 Visc 60\" onSubmit={() => {}} />\n  </Frame>"},{name:"Reply",description:"Reply input — `bare` so the avatar aligns with the reply avatars; lives inside the card footer.",code:"<Frame>\n    <CommentInput\n      bare\n      placeholder=\"Reply\"\n      onSubmit={() => {}}\n      leading={<Avatar size={32} name=\"Jane Roe\" />}\n    />\n  </Frame>"},{name:"CreateComment",description:"Create-comment state — in-field attach/@/emoji toolbar + metadata & share footer.",code:"<Frame width={420}>\n    <CommentInput\n      minRows={3}\n      autoFocus\n      onSubmit={() => {}}\n      toolbar={<Toolbar />}\n      footer={<Footer />}\n    />\n  </Frame>"},{name:"WithAttachments",description:"Attachments (AttachmentPreview) render below the text, above the toolbar.",code:"<Frame width={420}>\n    <CommentInput\n      value=\"Check the bottom slips\"\n      onSubmit={() => {}}\n      toolbar={<Toolbar />}\n      attachmentSlot={\n        <AttachmentPreview\n          onRemove={() => {}}\n          items={[\n            { id: 1, name: 'log.png', kind: 'image', src: img },\n            { id: 2, name: 'Corva report.xls', kind: 'file' },\n          ]}\n        />\n      }\n    />\n  </Frame>"},{name:"MaxHeight",description:"Field auto-grows to `maxRows` (~256px) then scrolls internally.",code:"<Frame width={420}>\n    <CommentInput\n      maxRows={12}\n      value={'MUD WT IN 16.0 Visc 60, attantion to BD.\\n'.repeat(8).trim()}\n      onSubmit={() => {}}\n      toolbar={<Toolbar />}\n    />\n  </Frame>"},{name:"Uploading",description:"File-uploading state — the `trailing` slot shows an upload spinner in place of send.",code:"<Frame>\n    <CommentInput\n      value=\"MUD WT IN 16.0 Visc 60\"\n      onSubmit={() => {}}\n      trailing={<LoaderCircular size=\"xs\" />}\n    />\n  </Frame>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CommentInputNext/CommentInputNext.tsx",figmaUrl:"https://www.figma.com/file/g7HMsT490usxg8oBs5olcD/Comment-Tool?node-id=3035-22201",keywords:["commentinputnext","comments","migration","guide","shared","comment","input","shell","field","auto-grows","minrows"]},{name:"CommentPin",modulePath:"components/CommentPin",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CommentPin",specifier:"@corva/ui/components",exportName:"CommentPin"},category:"v1",description:"See the [Comments migration guide](?path=/docs/components-v2-comments-migration-guide--docs). Pin marking a placed comment on a chart: the first commenter’s avatar with a `Counter` badge top-right when there is more than one comment. Single comment = just the avatar; `selected` gives the accent ring for the opened comment.\n\n**Props:** `users` (first avatar is shown), `count` / `maxCount` (badge), `size`, `selected`, `onClick`.",isExperimental:true,isDeprecated:false,props:[{name:"users",type:"CommentPinUser[]",required:true,description:"Only the first avatar is shown, with a count badge when there are more."},{name:"count",type:"number",required:false,description:""},{name:"maxCount",type:"number",required:false,description:""},{name:"size",type:"number",required:false,description:""},{name:"selected",type:"boolean",required:false,description:""},{name:"onClick",type:"() => void",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Playground",description:"",code:"<Frame>\n    <CommentPin {...props} />\n  </Frame>"},{name:"Single",description:"One commenter, no count badge.",code:"<Frame>\n    <CommentPin users={[{ name: 'John Doe' }]} />\n  </Frame>"},{name:"Grouped",description:"Multiple commenters with a comment-count badge.",code:"<Frame>\n    <CommentPin users={[{ name: 'John Doe' }, { name: 'Jane Roe' }]} count={2} />\n  </Frame>"},{name:"ManyComments",description:"",code:"<Frame>\n    <CommentPin users={[{ name: 'John Doe' }, { name: 'Jane Roe' }]} count={12} />\n  </Frame>"},{name:"Selected",description:"Accent ring for the currently opened comment.",code:"<Frame>\n    <CommentPin users={[{ name: 'John Doe' }, { name: 'Jane Roe' }]} count={2} selected />\n  </Frame>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CommentPin/CommentPin.tsx",figmaUrl:"https://www.figma.com/file/g7HMsT490usxg8oBs5olcD/Comment-Tool?node-id=2799-44309",keywords:["commentpin","comments","migration","guide","marking","placed","comment","chart","first","commenter","avatar"]},{name:"CommentsInfo",modulePath:"components/CommentsInfo",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CommentsInfo",specifier:"@corva/ui/components",exportName:"CommentsInfo"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"likesCount",type:"number",required:false,description:""},{name:"usersWhoLike",type:"array",required:false,description:""},{name:"commentsCount",type:"number",required:false,description:""},{name:"usersWhoCommented",type:"array",required:true,description:""},{name:"onCommentsClick",type:"function",required:false,description:""},{name:"activeUsersList",type:"array",required:true,description:""},{name:"classes",type:"object",required:false,description:""},{name:"isNative",type:"boolean",required:false,description:""},{name:"small",type:"boolean",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CommentsInfo/index.js",keywords:["commentsinfo"]},{name:"ContextMenuItem",modulePath:"components/ContextMenuItem",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ContextMenuItem",specifier:"@corva/ui/components",exportName:"ContextMenuItem"},category:"v1",description:"Used to render menu items with icons. Use MUI Menus. Read more information on the MUI docs page [here](https://material-ui.com/api/menu-item/)",isExperimental:false,isDeprecated:false,props:[{name:"icon",type:"ReactNode",required:false,description:""},{name:"iconType",type:"'mui' | 'iconPark'",required:false,description:"Indicates the icon type: different icon types require different styling",enumValues:["mui","iconPark"]},{name:"small",type:"boolean",required:false,description:""}],propsList:{kind:"partial",undescended:["MenuItemProps"]},examples:[{name:"Default",description:"",code:"<ContextMenuItem {...props} />"},{name:"UsageExample",description:"Basic usage example is shown here",code:"{\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>(undefined);\n  const [selectedItem, setSelectedItem] = useState<number>();\n\n  const icons = [DownloadIcon, ActivitySourceIcon, AdjustmentIcon, AlarmClockIcon];\n\n  return (\n    <>\n      <Button onClick={e => setAnchorEl(e.currentTarget)}>Open Menu</Button>\n      <Popover open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={() => setAnchorEl(undefined)}>\n        {icons.map((Icon, index) => (\n          <ContextMenuItem\n            onClick={() => setSelectedItem(index)}\n            selected={selectedItem === index}\n            icon={<Icon />}\n            iconType=\"iconPark\"\n            key={index}\n          >\n            Menu Item {index}\n          </ContextMenuItem>\n        ))}\n      </Popover>\n    </>\n  );\n}"},{name:"Disabled",description:"Use `DisabledTooltipProps` prop to add a tooltip to a disabled menu item",code:"{\n  return (\n    <ContextMenuItem\n      icon={<DownloadIcon />}\n      iconType=\"iconPark\"\n      disabled\n      DisabledTooltipProps={{\n        title: 'Tooltip title goes here!',\n        placement: 'bottom',\n      }}\n    >\n      Disabled Menu Item\n    </ContextMenuItem>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ContextMenuItem/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9597%3A17471",keywords:["contextmenuitem","used","render","menu","items","icons","menus","read","more","information","docs"]},{name:"CopyToClipboard",modulePath:"components/CopyToClipboard",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CopyToClipboard",specifier:"@corva/ui/components",exportName:"CopyToClipboard"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"string",required:true,description:"⚠️ Must be a string"},{name:"dataTestId",type:"string",required:false,description:""},{name:"IconComponent",type:"ComponentType<any>",required:false,description:""},{name:"tooltipProps",type:"{\n    title?: string;\n    placement?: TooltipProps['placement'];\n    delay?: number;\n  }",required:false,description:""},{name:"classes",type:"{\n    root?: string;\n    icon?: string;\n    iconWrapper?: string;\n    tooltip?: string;\n    tooltipPopper?: string;\n  }",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<CopyToClipboard {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CopyToClipboard/CopyToClipboard.tsx",keywords:["copytoclipboard","copy","clipboard","duplicate"]},{name:"Counter",modulePath:"components/Counter",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Counter",specifier:"@corva/ui/components",exportName:"Counter"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"label",type:"string",required:true,description:""},{name:"classes",type:"{\n    root?: string;\n  }",required:false,description:""},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"limited",type:"boolean",required:false,description:""},{name:"clickable",type:"boolean",required:false,description:""},{name:"tooltip",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit< ChipProps, | 'classes' | 'size' | 'label' | 'clickable' | 'children' | 'avatar' | 'icon' | 'deleteIcon' | 'onDelete' | 'variant' | 'color' | 'className' >"]},examples:[{name:"Default",description:"",code:"<Counter {...props} />"},{name:"Usage",description:"`Counter` may be used as-is, or absolutely positioned over the element to indicate some items count",code:"{\n  const styles = makeStyles({\n    wrapper: {\n      position: 'relative',\n      display: 'inline-block',\n    },\n    counter: {\n      position: 'absolute',\n      transform: 'translate(50%, -50%)',\n      top: 0,\n      right: 0,\n    },\n  })();\n\n  return (\n    <SbColumn>\n      <div>\n        Some items: <Counter size=\"medium\" label=\"99+\" />\n      </div>\n      <div className={styles.wrapper}>\n        <Avatar displayName=\"Ian Moone\" />\n        <Counter size=\"small\" label=\"99+\" className={styles.counter} />\n      </div>\n      <div className={styles.wrapper}>\n        <Avatar displayName=\"Ian Moone\" />\n        <Counter size=\"small\" label=\"1\" className={styles.counter} />\n      </div>\n    </SbColumn>\n  );\n}"},{name:"Colored",description:"Adding color to a counter can be done through `className` prop, target `MuiChip-label` class to change text color.\n\nSee code for an example",code:"{\n  const styles = makeStyles(() => ({\n    primary: {\n      backgroundColor: `var(--palette-primary-main) !important`,\n      '& .MuiChip-label': {\n        color: `var(--palette-background-b-1) !important`,\n      },\n      '&:hover': {\n        backgroundColor: `var(--palette-primary-dark) !important`,\n      },\n    },\n    destructive: {\n      backgroundColor: `var(--palette-error-main) !important`,\n      '& .MuiChip-label': {\n        color: `var(--palette-background-b-1) !important`,\n      },\n      '&:hover': {\n        backgroundColor: `var(--palette-error-dark) !important`,\n      },\n    },\n  }))();\n\n  return (\n    <SbRow>\n      <Counter label=\"+1\" />\n      <Counter label=\"+1\" className={styles.primary} />\n      <Counter label=\"+1\" className={styles.destructive} />\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Counter/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105%3A59511",keywords:["counter","count","number","badge","indicator"]},{name:"CustomSelect",modulePath:"components/CustomSelect",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CustomSelect",specifier:"@corva/ui/components",exportName:"CustomSelect"},category:"v1",description:"A Material UI v4 FormControl + Select wrapper driven by `<MenuItem>` children. Deprecated in favor of the V2 `Select`.",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"object",required:true,description:""},{name:"label",type:"string",required:true,description:""},{name:"height",type:"number",required:false,description:""},{name:"MenuProps",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[{name:"Default",description:"",code:"<CustomSelect label=\"Example\" value=\"a\" onChange={() => {}}>\n    <MenuItem value=\"a\">Option A</MenuItem>\n    <MenuItem value=\"b\">Option B</MenuItem>\n  </CustomSelect>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CustomSelect/index.js",keywords:["customselect","material","formcontrol","select","wrapper","driven","menuitem","children","deprecated","favor"]},{name:"DatePicker",modulePath:"components/DatePicker",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DatePicker",specifier:"@corva/ui/components",exportName:"DatePicker"},category:"v1",description:"This component was created as styled MUI Date Picker (v3.2.10). You can use MUI component props. For more information, please, follow the official [documentation](https://github.com/mui/material-ui-pickers/tree/v3-x)\n\nUnfortunately, we couldn't generate docs for this component, but the types should work",isExperimental:false,isDeprecated:false,props:[{name:"className",type:"string",required:false,description:""}],propsList:{kind:"partial",undescended:["KeyboardDatePickerProps"]},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState(new Date());\n  return (\n    <DatePicker\n      {...props}\n      value={value}\n      onChange={(moment, _stringValue) => setValue(moment.toDate())}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DatePicker/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=10221%3A54&mode=dev",keywords:["datepicker","date","calendar","time","schedule","component","created","styled","picker","props","more","information","please","follow"]},{name:"DateTimePicker",modulePath:"components/DateTimePicker",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DateTimePicker",specifier:"@corva/ui/components",exportName:"DateTimePicker"},category:"v1",description:"This component was created as styled MUI Date Picker (v3.2.10). You can use MUI component props. For more information, please, follow the official [documentation](https://github.com/mui/material-ui-pickers/tree/v3-x)\n\nUnfortunately, we couldn't generate docs for this component, but the types should work",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"partial",undescended:["KeyboardDateTimePickerProps"]},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState(new Date());\n  return (\n    <DateTimePicker\n      {...props}\n      value={value}\n      onChange={(moment, _stringValue) => setValue(moment.toDate())}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DateTimePicker/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=10221%3A54&mode=dev",keywords:["datetimepicker","date","time","calendar","schedule","component","created","styled","picker","props","more","information","please","follow"]},{name:"DisabledSettingsMessage",modulePath:"components/DisabledSettingsMessage",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DisabledSettingsMessage",specifier:"@corva/ui/components",exportName:"DisabledSettingsMessage"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onCloneDashboard",type:"function",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DisabledSettingsMessage/DisabledSettingsMessage.js",keywords:["disabledsettingsmessage"]},{name:"DocumentViewer",modulePath:"components/DocumentViewer",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DocumentViewer",specifier:"@corva/ui/components",exportName:"DocumentViewer"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"fileUrl",type:"string",required:true,description:""},{name:"webviewType",type:"enum",required:false,description:"",enumValues:["google","office"]},{name:"fileName",type:"string",required:false,description:""},{name:"fileSize",type:"number",required:false,description:""},{name:"onClose",type:"function",required:true,description:""},{name:"classes",type:"object",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DocumentViewer/DocumentViewer.js",keywords:["documentviewer"]},{name:"EChartsWrapper",modulePath:"components/EChartsWrapper",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"EChartsWrapper",specifier:"@corva/ui/components",exportName:"EChartsWrapper"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"EChartsWrapper"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EChartsWrapper/EChartsWrapper.tsx",keywords:["echartswrapper"]},{name:"EditableItem",modulePath:"components/EditableItem/EditableItem/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"EditableItem",specifier:"@corva/ui/components",exportName:"EditableItem"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"partial",undescended:["PropTypes.InferProps<typeof editableItemPropTypes>"]},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EditableItem/EditableItem/index.tsx",keywords:["editableitem"]},{name:"EmbeddedApp",modulePath:"components/EmbeddedApp",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"EmbeddedApp",specifier:"@corva/ui/components",exportName:"EmbeddedApp"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EmbeddedApp/EmbeddedApp.js",keywords:["embeddedapp"]},{name:"EmptyState",modulePath:"components/EmptyState",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"EmptyState",specifier:"@corva/ui/components",exportName:"EmptyState"},category:"v1",description:"Component for displaying an empty/error state.\n\nNeeds to be in a container with fixed height to be visible. Takes 100% height by default and changes its own layout based on its own height. Uses a resize observer to recalculate its own layout",isExperimental:false,isDeprecated:false,props:[{name:"title",type:"ReactNode",required:false,description:""},{name:"subtitle",type:"ReactNode",required:false,description:""},{name:"image",type:"string",required:false,description:"URL to an image"},{name:"classes",type:"{\n    root?: string;\n    content?: string;\n    title?: string;\n    subtitle?: string;\n    image?: string;\n  }",required:false,description:"ClassNames for inner components"},{name:"'data-testid'",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<EmptyState {...props} />"},{name:"Images",description:"Component provides standard images as its own `IMAGES` property. Using `EmptyState.IMAGES.*` is preferred to using string literals\n\nAvailable images:```tsx\n{\n  AppLoadingError,\n  AssetHasNoData,\n  DataSuccessfullySaved,\n  FracFleetHasNoActivePad,\n  NoDataAvailable,\n  NoIssueFound,\n  NoNotifications,\n  NoSubscription,\n  NoWellsSelected,\n  PageNotFound,\n  RigHasNoActiveWell,\n  UnderConstruction,\n  AccessDenied,\n}\n```",code:"<EmptyState title=\"Title\" image={EmptyState.IMAGES.RigHasNoActiveWell} />"},{name:"Messages",description:"Component provides standard messages as its own `APP_MESSAGES` property.\n\nAvailable messages:```tsx\nexport type AppMessages = Record<\n  | 'appNotSubscribed'\n  | 'appNotSubscribedForAsset'\n  | 'internalAppError'\n  | 'appPackageWasNotFound'\n  | 'fracFleetWasNotFound'\n  | 'fracFleetHasNoPad'\n  | 'padHasNoWells'\n  | 'appComponentWasNotFound'\n  | 'noAssetData'\n  | 'assetNotAvailable'\n  | 'AccessDenied',\n  { title: string; subtitle?: string }\n>;\n```",code:"<EmptyState\n    image={EmptyState.IMAGES.FracFleetHasNoActivePad}\n    title={EmptyState.APP_MESSAGES.fracFleetHasNoPad.title}\n    subtitle={EmptyState.APP_MESSAGES.fracFleetHasNoPad.subtitle}\n  />"},{name:"Sizes",description:"Component takes all available height, and uses `resizeObserver` to automatically adjust own layout.\n\nBreakpoints: `300px` and `400px`",code:"{\n  const max = 500;\n  const min = 100;\n  const [height, setHeight] = useState(500);\n\n  const onHeightChange = useCallback(\n    (_: ChangeEvent<{}>, value: number | number[]) =>\n      setHeight(value instanceof Array ? value[0] : value),\n    []\n  );\n\n  return (\n    <SbColumn>\n      <div style={{ width: '200px' }}>\n        Height: {height}px\n        <Slider value={height} onChange={onHeightChange} min={min} max={max} />\n      </div>\n\n      <div style={{ height: `${max}px` }}>\n        <div style={{ height: `${height}px` }}>\n          <EmptyState\n            image={EmptyState.IMAGES.FracFleetHasNoActivePad}\n            title={EmptyState.APP_MESSAGES.fracFleetHasNoPad.title}\n            subtitle={EmptyState.APP_MESSAGES.fracFleetHasNoPad.subtitle}\n          />\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EmptyState/EmptyState.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9662-18&t=C6zKC8YvzxNUJ5ka-0",keywords:["emptystate","empty","no data","placeholder","blank","no results","component","displaying","error","state","needs","container","fixed","height","visible"]},{name:"EmptyView",modulePath:"components/EmptyView",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"EmptyView",specifier:"@corva/ui/components",exportName:"EmptyView"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"title",type:"string",required:false,description:""},{name:"description",type:"string",required:false,description:""},{name:"showArrow",type:"boolean",required:false,description:""},{name:"customStyles",type:"{\n    wrapper?: string;\n    title?: string;\n    description?: string;\n    arrow?: string;\n  }",required:false,description:"Classes for internal elements"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<EmptyView {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EmptyView/EmptyView.tsx",keywords:["emptyview"]},{name:"ErrorBoundary",modulePath:"components/ErrorBoundary",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ErrorBoundary",specifier:"@corva/ui/components",exportName:"ErrorBoundary"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""},{name:"ErrorView",type:"elementType",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ErrorBoundary/ErrorBoundary.js",keywords:["errorboundary"]},{name:"FeedCard",modulePath:"components/FeedCard",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FeedCard",specifier:"@corva/ui/components",exportName:"FeedCard"},category:"v1",description:"See the [Comments migration guide](?path=/docs/components-v2-comments-migration-guide--docs). Shared outer surface for chart feed-item cards — the translucent `rgba(44,44,44,.9)` panel with blur and rounded corners. It provides *only* the container chrome; consumers compose their own header / body / footer inside so every feed card shares one surface. `CommentCard` and `FeedItemCard` are both built on it.\n\nProps: `width` (fixed px, omit to fill), `radius` (px, default 16 — comment/feed cards pass 12), `onClick` / `onMouseEnter` / `onMouseLeave`.",isExperimental:true,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"FeedCard"},examples:[{name:"Default",description:"The surface hosting a composed header / body / footer.",code:"<Frame>\n    <FeedCard {...props}>\n      <Composed />\n    </FeedCard>\n  </Frame>"},{name:"Radius",description:"The `radius` prop — comment and feed cards pass 12.",code:"<Frame>\n    <div style={{ display: 'flex', gap: 24 }}>\n      <FeedCard width={260} radius={16}>\n        <div style={bodyStyle}>Default radius (16)</div>\n      </FeedCard>\n      <FeedCard width={260} radius={12}>\n        <div style={bodyStyle}>Comment/feed radius (12)</div>\n      </FeedCard>\n    </div>\n  </Frame>"},{name:"FullWidth",description:"Omit `width` to fill the container.",code:"<Frame>\n    <FeedCard>\n      <Composed />\n    </FeedCard>\n  </Frame>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FeedCard/FeedCard.tsx",figmaUrl:"https://www.figma.com/file/g7HMsT490usxg8oBs5olcD/Comment-Tool?node-id=2774-89203",keywords:["feedcard","comments","migration","guide","shared","outer","surface","chart","feed-item","cards","translucent"]},{name:"FeedItem",modulePath:"components/FeedItem",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FeedItem",specifier:"@corva/ui/components",exportName:"FeedItem"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[{name:"FeedItem",description:"",code:"{\n  const styles = useStyles();\n\n  return (\n    <ProvidePermissions>\n      <div className={styles.root} style={{ width: containerWidth }}>\n        {feedItems.map(feedItem => (\n          <div key={feedItem.type} className={styles.itemContainer}>\n            <div>\n              {FEED_ITEM_TYPES_BY_KEY[feedItem.type].label} ({feedItem.type}):\n            </div>\n            <FeedItemComponent\n              feedItem={feedItem}\n              timestamp={null}\n              well={{}}\n              currentUser={{ first_name: 'Test', last_name: 'User' }}\n              enterEditMode={() => null}\n              appData={{}}\n            />\n          </div>\n        ))}\n      </div>\n    </ProvidePermissions>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FeedItem/FeedItem.js",keywords:["feeditem"]},{name:"FeedItemCard",modulePath:"components/FeedItemCard",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FeedItemCard",specifier:"@corva/ui/components",exportName:"FeedItemCard"},category:"v1",description:"See the [Comments migration guide](?path=/docs/components-v2-comments-migration-guide--docs). Non-comment counterpart to `CommentCard` on the same `FeedCard` surface — used for external / app-generated feed items (NPT, alerts, lessons-learned, …). Header (colored `icon` + `title` + timestamp, optional accent `subtitle`), a body (`children` and/or `contextRows`), and the shared reactions/replies footer (rendered only when a reaction handler is provided). Like `CommentCard` it caps at 256px and scrolls its content internally.",isExperimental:true,isDeprecated:false,props:[{name:"activity",type:"FeedActivityProps",required:false,description:"Runs the card's own likes, replies and deletion. Omit to drive it from the props below."},{name:"icon",type:"ReactNode",required:true,description:""},{name:"iconBg",type:"string",required:false,description:""},{name:"iconColor",type:"string",required:false,description:""},{name:"title",type:"ReactNode",required:true,description:""},{name:"timestamp",type:"ReactNode",required:false,description:""},{name:"subtitle",type:"ReactNode",required:false,description:""},{name:"contextRows",type:"FeedItemContextRow[]",required:false,description:""},{name:"children",type:"ReactNode",required:false,description:""},{name:"isLiked",type:"boolean",required:false,description:""},{name:"likesCount",type:"number",required:false,description:""},{name:"commentsCount",type:"number",required:false,description:""},{name:"onLike",type:"() => void",required:false,description:""},{name:"onReplyToggle",type:"() => void",required:false,description:""},{name:"onForward",type:"() => void",required:false,description:""},{name:"menuItems",type:"CommentMenuItem[]",required:false,description:""},{name:"isReplyOpen",type:"boolean",required:false,description:""},{name:"replyInput",type:"ReactNode",required:false,description:""},{name:"replies",type:"CommentReply[]",required:false,description:""},{name:"hasMoreReplies",type:"boolean",required:false,description:""},{name:"moreRepliesCount",type:"number",required:false,description:""},{name:"onShowMoreReplies",type:"() => void",required:false,description:""},{name:"width",type:"number",required:false,description:""},{name:"onClick",type:"() => void",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"Header + body + context rows. No footer — no reaction handlers are supplied.",code:"<Frame>\n    <FeedItemCard icon={icon} title=\"NPT\" timestamp=\"04/16/26 18:11\" contextRows={contextRows}>\n      Con barrena PDC de 18 1/2” y sarta rotatoria estacionada, se mantiene en espera por\n      acondicionamiento de acceso.\n    </FeedItemCard>\n  </Frame>"},{name:"WithReactions",description:"Reactions/replies footer with an active like + counts and a kebab menu.",code:"<Frame>\n    <FeedItemCard\n      icon={icon}\n      title=\"NPT\"\n      timestamp=\"04/16/26 18:11\"\n      subtitle=\"Rig Name - Well Name\"\n      contextRows={contextRows}\n      isLiked\n      likesCount={3}\n      commentsCount={2}\n      onReplyToggle={() => {}}\n      onLike={() => {}}\n      menuItems={menuItems}\n    />\n  </Frame>"},{name:"RepliesExpanded",description:"Reply section open — reply input above the replies list (shared with CommentCard).",code:"<Frame>\n    <FeedItemCard\n      icon={icon}\n      title=\"NPT\"\n      timestamp=\"04/16/26 18:11\"\n      contextRows={contextRows}\n      commentsCount={1}\n      onReplyToggle={() => {}}\n      onLike={() => {}}\n      isReplyOpen\n      replyInput={\n        <CommentInput\n          bare\n          placeholder=\"Reply\"\n          autoFocus\n          onSubmit={() => {}}\n          leading={<Avatar size={32} name=\"Jane Roe\" />}\n        />\n      }\n      replies={[\n        {\n          id: 1,\n          author: { name: 'Name Name' },\n          timestamp: 'Nov 14 2025, 13:20',\n          body: 'Acknowledged — updating the plan.',\n          menuItems: [{ label: 'Delete', icon: <DeleteIcon size={16} />, onClick: () => {} }],\n        },\n      ]}\n    />\n  </Frame>"},{name:"LongContentScrolls",description:"Body longer than 256px — the card caps its height and scrolls internally.",code:"<Frame>\n    <FeedItemCard\n      icon={icon}\n      title=\"NPT\"\n      timestamp=\"04/16/26 18:11\"\n      contextRows={contextRows}\n      onLike={() => {}}\n      menuItems={menuItems}\n    >\n      {'Con barrena PDC de 18 1/2” y sarta rotatoria estacionada a la profundidad de 973 m, se mantiene en espera por acondicionamiento de acceso y terraplén de la presa de quema. '.repeat(\n        6\n      )}\n    </FeedItemCard>\n  </Frame>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FeedItemCard/FeedItemCard.tsx",keywords:["feeditemcard","comments","migration","guide","non-comment","counterpart","commentcard","same","feedcard","surface","used"]},{name:"FileIcon",modulePath:"components/FileIcon",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FileIcon",specifier:"@corva/ui/components",exportName:"FileIcon"},category:"v1",description:"Shows an icon of file type, based on `name` prop",isExperimental:false,isDeprecated:false,props:[{name:"name",type:"string",required:true,description:""}],propsList:{kind:"partial",undescended:["Omit<SvgIconProps, 'children' | 'name'>"]},examples:[{name:"Default",description:"",code:"<FileIcon {...props} />"},{name:"FileTypes",description:"Icon is determined by a filename's extension passed into `name` prop\n\nSupported extensions: `.pdf`, `.csv`, `.json`, `.edm.xml`, `.xml`, `.las`, `.txt`, `.pptx`, `.ppt`, `.xlsx`, `.xls`, `.docx`, `.doc`, `.jpg`, `.png`, `.jpeg`, `.gif`, `.bmp`, `.svg`, `.webp`, `.rar`, `.zip`, `.7z`, `.mp4`, `.avi`, `.mkv`, `.mov`, `.wmv`, `.flv`, `.webm`, `.mpg`, `.mpeg`, `.m4v`",code:"{\n  return (\n    <SbRow>\n      {ExtensionsToIconArray.map(([ext], index) => (\n        <div key={index} style={{ textAlign: 'center', width: '50px', fontSize: '12px' }}>\n          <FileIcon name={`file${ext}`} />\n          <br />\n          {ext}\n        </div>\n      ))}\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FileIcon/FileIcon.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=28893-113900",keywords:["fileicon","shows","icon","file","type","based","name","prop"]},{name:"FilePreview",modulePath:"components/FilePreview",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FilePreview",specifier:"@corva/ui/components",exportName:"FilePreview"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"fileName",type:"string",required:true,description:""},{name:"fileUrl",type:"string",required:true,description:""},{name:"handleFileDelete",type:"function",required:true,description:""},{name:"classes",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FilePreview/index.js",keywords:["filepreview"]},{name:"FilesDropzone",modulePath:"components/FilesDropzone",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FilesDropzone",specifier:"@corva/ui/components",exportName:"FilesDropzone"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onDrop",type:"DropzoneOptions['onDrop']",required:false,description:"Handles file drop"},{name:"children",type:"ReactNode",required:false,description:"Content to render"},{name:"multiple",type:"boolean",required:false,description:"Controls if dropzone accepts multiple files"},{name:"accept",type:"string[] | string",required:false,description:"Array of or comma-separated MIME types/File Extensions to accept\n\nNB: file extensions <b>must</b> start with `.`<br/>, otherwise they will be treated as MIME types\nfile extensions will be shown below the dropzone in the description\n\nExample:<br/>\n`.xsl,image/*,.csv`<br/>\nWill accept any file with `xsl` or `csv` extensions, and also - any file with `image/...` MIME type"},{name:"maxFiles",type:"number",required:false,description:"Maximum files to accept"},{name:"maxSize",type:"number",required:false,description:"Maximum file size to accept"},{name:"errorText",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<FilesDropzone {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FilesDropzone/FilesDropzone.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=74032-69042",keywords:["filesdropzone","upload","drag","drop","file","attachment"]},{name:"FilesLoader",modulePath:"components/FilesLoader",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FilesLoader",specifier:"@corva/ui/components",exportName:"FilesLoader"},category:"v1",description:"",isExperimental:false,isDeprecated:true,props:[],propsList:{kind:"partial",undescended:["PropTypes.InferProps<typeof filesLoaderPropTypes>"]},examples:[{name:"Default",description:"",code:"<FilesLoader {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FilesLoader/FilesLoader.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9520%3A19052",keywords:["filesloader"]},{name:"FilesLoaderV2",modulePath:"components/FilesLoaderV2",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FilesLoaderV2",specifier:"@corva/ui/components",exportName:"FilesLoaderV2"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"name",type:"string",required:true,description:""},{name:"total",type:"number",required:false,description:"Total progress value (bytes by default)\n\nIf undefined or < 0 - makes progress bar indeterminate"},{name:"current",type:"number",required:false,description:"Current progress value (bytes by default)\n\nIf undefined or < 0 - makes progress bar indeterminate"},{name:"errorText",type:"string",required:false,description:"Error to show"},{name:"onDelete",type:"() => void",required:false,description:"If exists - displays the \"Delete\" button"},{name:"onReload",type:"() => void",required:false,description:"If exists - displays the \"Reload\" button on error state"},{name:"onCancel",type:"() => void",required:false,description:"If exists - displays the \"Cancel\" button when loading"},{name:"formatProgress",type:"(total: number, current: number) => ReactNode",required:false,description:"Allows custom progress units"},{name:"className",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<FilesLoaderV2 {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FilesLoaderV2/FilesLoaderV2.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=74164-77295",keywords:["filesloaderv2"]},{name:"FilesProcessor",modulePath:"components/FilesProcessor",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FilesProcessor",specifier:"@corva/ui/components",exportName:"FilesProcessor"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"processFile",type:"FileProcessorFunction<T>",required:true,description:"Function that processes file (uploads, parses, etc.)\n\nAccepts 3 arguments:<br/>\n`file: File`<br/>\n`onProgress: (totalProgress: number, currentProgress: number) => void,`<br/>\n`registerOnCancel: (onCancel: Function) => void` - processing cancellation function"},{name:"onDone",type:"(results: T[]) => void",required:true,description:"Called when files are uploaded/reuploaded"},{name:"value",type:"ValueItem[]",required:false,description:"Files list to display\n\n`type ValueItem = {id: string | number; name: string;};`"},{name:"onDelete",type:"(item: ValueItem) => void",required:false,description:"Used in conjunction with `value`. Called when user presses \"delete\" button. If undefined - no button is shown"},{name:"onStartProcessing",type:"(files: File[]) => void",required:false,description:"Fired when file(s) selected for processing"},{name:"onProcessingFailure",type:"(file: File, isCancelled: boolean, error: Error) => void",required:false,description:"Fired when file processing failed or cancelled"},{name:"multiple",type:"FilesDropzoneProps['multiple']",required:false,description:"Controls if multiple files can be processed"},{name:"accept",type:"FilesDropzoneProps['accept']",required:false,description:"Array of or comma-separated MIME types/File Extensions to accept\n\nSee `FilesDropzone`'s props"},{name:"maxFiles",type:"FilesDropzoneProps['maxFiles']",required:false,description:"Maximum files to accept"},{name:"maxSize",type:"FilesDropzoneProps['maxSize']",required:false,description:"Maximum file size to accept"},{name:"formatProgress",type:"ProcessorProps<any>['formatProgress']",required:false,description:"Allows custom progress units"},{name:"className",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState(() => [\n    { id: 1, name: 'data.csv' },\n    { id: 2, name: 'more data.xlsx' },\n    { id: 3, name: 'My Cat.jpeg' },\n  ]);\n\n  // This function processes file (uploads/parses/etc) and optionally reports progress\n  const processFile: FileProcessorFunction<ProcessResult> = useCallback(\n    async (file, onProgress, registerOnCancel) => {\n      console.log('PROCESSING', file);\n      onProgress(600, 0);\n\n      registerOnCancel(() => console.log('CANCELLED', file));\n      for (let i = 0, c = 5; i < c; i++) {\n        onProgress(600, 100 * (i + 1));\n        await new Promise(r => setTimeout(r, 1000));\n      }\n\n      return {\n        id: Math.random() * 1000,\n        fileName: file.name,\n      };\n    },\n    []\n  );\n\n  // This typing is optional, you can rely on inferred types\n  // const TypedFilesProcessor = FilesProcessor<{ id: number; fileName: string }>;\n  return (\n    <FilesProcessor\n      {...props}\n      processFile={processFile}\n      value={value}\n      onDone={(results, ...rest) => {\n        props.onDone?.(results, ...rest);\n\n        const mapResults = (result: typeof results[number]) => ({\n          id: result.id,\n          name: result.fileName,\n        });\n\n        setValue(items => [...results.map(mapResults), ...items]);\n      }}\n      onDelete={(item, ...rest) => {\n        props.onDelete?.(item, ...rest);\n        setValue(items => items.filter(({ id }) => id !== item.id));\n      }}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FilesProcessor/FilesProcessor.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=73896-71907",keywords:["filesprocessor"]},{name:"FolderMenuItem",modulePath:"components/FolderMenuItem",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FolderMenuItem",specifier:"@corva/ui/components",exportName:"FolderMenuItem"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"folderColor",type:"string",required:true,description:""},{name:"isCreatable",type:"boolean",required:false,description:""},{name:"isOpen",type:"boolean",required:false,description:""},{name:"isSelected",type:"boolean",required:false,description:""},{name:"name",type:"string",required:true,description:""},{name:"onAdd",type:"function",required:true,description:""},{name:"onClick",type:"function",required:true,description:""},{name:"onToggle",type:"function",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FolderMenuItem/index.js",keywords:["foldermenuitem"]},{name:"FolderMenuItemWithLinks",modulePath:"components/FolderMenuItemWithLinks",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FolderMenuItemWithLinks",specifier:"@corva/ui/components",exportName:"FolderMenuItemWithLinks"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"id",type:"string",required:true,description:""},{name:"isOpen",type:"boolean",required:false,description:""},{name:"selectedItemId",type:"string",required:true,description:""},{name:"items",type:"array",required:false,description:""},{name:"name",type:"string",required:true,description:""},{name:"onItemClick",type:"function",required:true,description:""},{name:"onFolderClick",type:"function",required:false,description:""},{name:"folderColor",type:"string",required:true,description:""},{name:"isCreatable",type:"boolean",required:false,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"onAdd",type:"function",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FolderMenuItemWithLinks/index.js",keywords:["foldermenuitemwithlinks"]},{name:"Formula",modulePath:"components/Formula",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Formula",specifier:"@corva/ui/components",exportName:"Formula"},category:"v1",description:"Component for interactive formula editing",isExperimental:false,isDeprecated:false,props:[{name:"suggestions",type:"{ key: string; label: string; unit?: string; type: string }[]",required:false,description:""},{name:"initFormula",type:"string",required:false,description:""},{name:"onSave",type:"(param: { formula: string; variables: string[]; formulaFunc: FormulaObject }) => void",required:false,description:"`FormulaObject` is an instance of [fparser](https://github.com/bylexus/fparse)"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Formula {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Formula/Formula.tsx",figmaUrl:"https://www.figma.com/file/itdGcE7hIlVKUKtQCWyvL4/Traces?type=design&node-id=9320-489804",keywords:["formula","component","interactive","editing"]},{name:"GoogleDocsViewer",modulePath:"components/GoogleDocsViewer",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"GoogleDocsViewer",specifier:"@corva/ui/components/GoogleDocsViewer",form:"default"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"fileUrl",type:"string",required:true,description:""},{name:"webviewType",type:"enum",required:false,description:"",enumValues:["google","office"]},{name:"fileName",type:"string",required:false,description:""},{name:"fileSize",type:"number",required:false,description:""},{name:"onClose",type:"function",required:true,description:""},{name:"data-testid",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/GoogleDocsViewer/index.js",keywords:["googledocsviewer"]},{name:"GradientManager",modulePath:"components/GradientManager",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"GradientManager",specifier:"@corva/ui/components",exportName:"GradientManager"},category:"v1",description:"The Gradient Manager component takes care of the UI part of the shared user gradient feature and solves multiple problems as once.\n\n- It is *a gradient select*, that can be used in your app settings and allow a user to pick a gradient from the list. The `onChange` callback is invoked each time a user picks a gradient.\n- This component also allows a user to Manage gradients, e.g. to add, remove, and edit custom ones. The `onGradientsChange` callback is invoked on any of such user actions.\n\n#### Gradients Data\n**NOTE:** It is recommended to use `GradientManagerWithStorage` component for a DC app. As it will take care of storing gradients in User Settings.\n\nOtherwise the `GradientManager` itself does not store any data so you still need to implement two other essential parts in your app:\n\n- The storage. It should take care of fetching and storing gradients to User Settings. It should be quite small. See \"useGradientStorage\" implementation in the Formation Evaluation app for reference. It is a good idea to put this code close to the top of your application so you can share the data with any component of your app using props or context.\n- If your app stores *gradient stops* along with *gradientId* somewhere in your app (for example in Template configuration)then you have to update the stops every time user changes the gradient with linked id.\n\n#### Built-in gradients\nA set of predefined gradients is included in this component. You can also replace it with your own list. Only user created gradients are present in the argument of `onGradientsChange` callback. You can import `DEFAULT_GRADIENTS` from `@corva/ui/constants/componentsSettings`.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"GradientManager"},examples:[{name:"Default",description:"",code:"{\n  const [gradientId, setGradientId] = useState<Props['gradientId']>();\n  const [gradients, setGradients] = useState<Props['gradients']>([]);\n\n  return (\n    <GradientManager\n      {...props}\n      gradientId={gradientId}\n      gradients={gradients}\n      onChange={gradient => {\n        props.onChange?.(gradient);\n        setGradientId(gradient.gradientId);\n      }}\n      onGradientsChange={gradients => {\n        props.onGradientsChange?.(gradients);\n        setGradients(gradients);\n      }}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/GradientManager/GradientManager.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System",keywords:["gradientmanager","gradient","manager","component","takes","care","part","shared","user","feature","solves"]},{name:"GradientPicker",modulePath:"components/GradientPicker",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"GradientPicker",specifier:"@corva/ui/components",exportName:"GradientPicker"},category:"v1",description:"A component that allows modification of a gradient. Usage of `GradientManager` is recommended instead",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"GradientPicker"},examples:[{name:"Default",description:"",code:"<GradientPicker {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/GradientPicker/GradientPicker.tsx",keywords:["gradientpicker","component","allows","modification","gradient","usage","gradientmanager","recommended","instead"]},{name:"HeaderLayout",modulePath:"components/HeaderLayout/HeaderLayout",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"HeaderLayout",specifier:"@corva/ui/components",exportName:"HeaderLayout"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"array",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/HeaderLayout/HeaderLayout.js",keywords:["headerlayout"]},{name:"Hint",modulePath:"components/Hint",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Hint",specifier:"@corva/ui/components",exportName:"Hint"},category:"v1",description:"Used for attracting user's attention to new features, providing usage hints, etc",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"children",type:"ReactElement",required:false,description:"⚠️ Has to be a <i>single</i> reffable child (use `forwardRef` for custom components)"},{name:"title",type:"ReactNode",required:false,description:""},{name:"content",type:"ReactNode",required:false,description:""},{name:"confirmText",type:"ReactNode",required:false,description:""},{name:"onConfirm",type:"() => void",required:false,description:"Action button is shown only if this prop is present"},{name:"placement",type:"PopperProps['placement']",required:false,description:"Check [Positioned Popper](https://v4.mui.com/components/popper/#positioned-popper) example for more info"},{name:"anchorEl",type:"HTMLElement | null",required:false,description:"Allows anchoring to arbitrary element"},{name:"className",type:"string",required:false,description:""},{name:"onClose",type:"() => void",required:false,description:"Close button is shown only when this prop is present"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Hint {...props}>\n    <Button>\n      A single <Node />\n    </Button>\n  </Hint>"},{name:"AnchorEl",description:"`Hint` can be positioned relative to an arbitrary element by passing `anchorEl` prop.In this case, positioning relative to children is disabled",code:"{\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n\n  return (\n    <>\n      <Button ref={setAnchorEl}>This is not wrapped</Button>\n\n      <Hint content=\"I have children but am posiotioned to a button\" open anchorEl={anchorEl}>\n        <span>This is wrapped</span>\n      </Hint>\n    </>\n  );\n}"},{name:"AnchorElNoChild",description:"You can omit `Hint`'s children if you're using `anchorEl` prop",code:"{\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n\n  return (\n    <>\n      <Button ref={setAnchorEl}>This is not wrapped</Button>\n\n      <Hint content=\"I'm childless\" open anchorEl={anchorEl} />\n    </>\n  );\n}"},{name:"CustomComponents",description:"To position `Hint` to a custom component, or to a specific node inside the custom component, use `forwardRef`",code:"{\n  const CustomComponent = useMemo(\n    () =>\n      forwardRef<HTMLButtonElement>((_, ref) => {\n        return (\n          <div\n            style={{ border: '1px solid', padding: '50px', textAlign: 'center', margin: '0 20px' }}\n          >\n            I'm a child component\n            <br />\n            <button ref={ref}>I'm a feature button with forwarded ref</button>\n          </div>\n        );\n      }),\n    []\n  );\n\n  return (\n    <Hint content={\"I'm positioned to a forwarded ref\"} open>\n      <CustomComponent />\n    </Hint>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Hint/Hint.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=62479-3491",keywords:["hint","help","info","question","tooltip","information","used","attracting","user","attention","features","providing","usage","hints"]},{name:"IconButton",modulePath:"components/IconButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"IconButton",specifier:"@corva/ui/components",exportName:"IconButton"},category:"v1",description:"A wrapper around Material UI v4 IconButton component.",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"The content of the component."},{name:"onClick",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"variant",type:"'transparent' | 'contained' | 'default'",required:false,description:"",enumValues:["transparent","contained","default"]},{name:"className",type:"string",required:false,description:""},{name:"isActive",type:"boolean",required:false,description:""},{name:"tooltipProps",type:"Omit<TooltipProps, 'children'>",required:false,description:""},{name:"classes",type:"{\n    root?: string;\n    disabled?: string;\n    colorPrimary?: string;\n    sizeSmall?: string;\n  }",required:false,description:""},{name:"'data-testid'",type:"string",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit< MuiIconButtonProps, 'size' | 'variant' | 'classes' | 'className' | 'children' | 'onClick' >"]},examples:[{name:"Default",description:"",code:"<IconButton {...props} />"},{name:"Size",description:"Component supports 3 sizes through `size` prop:\n\n* `small`\n* `medium` (default)\n* `large`: for main buttons",code:"<SbRow>\n    <IconButton size=\"small\">\n      <SettingTwoIcon />\n    </IconButton>\n    <IconButton size=\"medium\">\n      <SettingTwoIcon />\n    </IconButton>\n    <IconButton size=\"large\">\n      <SettingTwoIcon />\n    </IconButton>\n  </SbRow>"},{name:"Variant",description:"Background is controlled through `variant` prop:\n\n- `default`\n- `contained`\n- `transparent`\n\n",code:"{\n  return (\n    <SbColumn>\n      <SbRow>\n        <IconButton variant=\"default\">\n          <SettingTwoIcon />\n        </IconButton>\n        <IconButton variant=\"contained\">\n          <SettingTwoIcon />\n        </IconButton>\n        <IconButton variant=\"transparent\">\n          <SettingTwoIcon />\n        </IconButton>\n      </SbRow>\n      <SbRow>\n        <IconButton variant=\"default\" color=\"primary\">\n          <SettingTwoIcon />\n        </IconButton>\n        <IconButton variant=\"contained\" color=\"primary\">\n          <SettingTwoIcon />\n        </IconButton>\n        <IconButton variant=\"transparent\" color=\"primary\">\n          <SettingTwoIcon />\n        </IconButton>\n      </SbRow>\n    </SbColumn>\n  );\n}"},{name:"WithTooltip",description:"`IconButton` has an integrated `Tooltip`, controlled through `tooltipProps` prop. It is generally recommended to use this prop to give users an explanation of what a button does",code:"{\n  return (\n    <IconButton tooltipProps={{ title: 'I describe the action' }}>\n      <SettingTwoIcon />\n    </IconButton>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/IconButton/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9696%3A17373",keywords:["iconbutton","wrapper","around","material","component"]},{name:"IconMenu",modulePath:"components/IconMenu",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"IconMenu",specifier:"@corva/ui/components",exportName:"IconMenu"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"union",required:false,description:""},{name:"classes",type:"object",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"color",type:"string",required:false,description:""},{name:"IconElement",type:"ReactElement",required:false,description:""},{name:"IconButtonComponent",type:"any",required:false,description:""},{name:"iconButtonStyle",type:"object",required:false,description:""},{name:"anchorOrigin",type:"object",required:false,description:""},{name:"transformOrigin",type:"object",required:false,description:""},{name:"disableRipple",type:"boolean",required:false,description:""},{name:"data-testid",type:"string",required:false,description:""},{name:"marginThreshold",type:"number",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"tooltipProps",type:"object",required:false,description:""},{name:"menuProps",type:"object",required:false,description:""},{name:"iconButtonProps",type:"object",required:false,description:""},{name:"paperClassName",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/IconMenu/index.js",keywords:["iconmenu"]},{name:"InfiniteList",modulePath:"components/InfiniteList",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"InfiniteList",specifier:"@corva/ui/components/InfiniteList",form:"default"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"infiniteClassName",type:"string",required:false,description:""},{name:"useWindow",type:"boolean",required:false,description:""},{name:"headerComponent",type:"ReactNode",required:false,description:""},{name:"items",type:"array",required:true,description:""},{name:"showNoItemsFound",type:"boolean",required:true,description:""},{name:"noItemsFoundLabel",type:"string",required:true,description:""},{name:"infiniteContainerHeight",type:"number",required:false,description:""},{name:"moreItemsMayExist",type:"boolean",required:true,description:""},{name:"pathToCreatedAt",type:"array",required:true,description:""},{name:"renderItem",type:"function",required:true,description:""},{name:"loadItems",type:"function",required:true,description:""},{name:"threshold",type:"number",required:false,description:""},{name:"initialLoad",type:"boolean",required:false,description:""},{name:"divideByPeriods",type:"boolean",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/InfiniteList/index.js",keywords:["infinitelist"]},{name:"LabelsCounter",modulePath:"components/LabelsCounter",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"LabelsCounter",specifier:"@corva/ui/components",exportName:"LabelsCounter"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"items",type:"array",required:true,description:""},{name:"limit",type:"number",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/LabelsCounter/LabelsCounter.js",keywords:["labelscounter"]},{name:"LinkedText",modulePath:"components/LinkedText",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"LinkedText",specifier:"@corva/ui/components",exportName:"LinkedText"},category:"v1",description:"Renders text with any urls in it turned into links.\n\nContent that is already rendered — a mention, say — passes through untouched, so a comment body made of mixed text and elements keeps its mentions while its urls become clickable.\n\n`mirror` paints the links without making them clickable, for a copy positioned behind a textarea so that links show up as they are typed.",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"mirror",type:"boolean",required:false,description:"Paints the links without making them clickable, for a copy sitting behind a textarea: the\nfield on top takes the clicks, and a screen reader reads it rather than this."},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<LinkedText {...props}>Have a look at https://corva.ai/dashboards before the shift.</LinkedText>"},{name:"Variants",description:"",code:"<SbColumn>\n    <LinkedText {...props}>No link in this one.</LinkedText>\n\n    <LinkedText {...props}>\n      Two of them: https://corva.ai/one and https://corva.ai/two — both clickable.\n    </LinkedText>\n\n    <LinkedText {...props}>Ends a sentence: https://corva.ai/report.pdf.</LinkedText>\n\n    <LinkedText {...props}>\n      https://corva-files.s3.amazonaws.com/corva/1/traces.png?X-Amz-Expires=900&X-Amz-Signature=abc\n    </LinkedText>\n\n    <LinkedText {...props}>\n      {['Ping ', <b key=\"mention\">@Mark</b>, ' about https://corva.ai/dashboards']}\n    </LinkedText>\n  </SbColumn>"},{name:"Mirror",description:"",code:"<div style={{ position: 'relative', height: 24 }}>\n    <LinkedText {...props} mirror>\n      Paste a link and it lights up: https://corva.ai/dashboards\n    </LinkedText>\n  </div>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/LinkedText/LinkedText.tsx",keywords:["linkedtext","renders","text","urls","turned","into","links","content","already","rendered","mention"]},{name:"LoadingIndicator",modulePath:"components/LoadingIndicator",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"LoadingIndicator",specifier:"@corva/ui/components",exportName:"LoadingIndicator"},category:"v1",description:"Used to provide a visusal clue that the page/app is loading. Takes all available space by default.",isExperimental:false,isDeprecated:false,props:[{name:"white",type:"boolean",required:false,description:""},{name:"size",type:"number",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"fullscreen",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<div style={{ height: '200px' }}>\n    <LoadingIndicator {...props} />\n  </div>"},{name:"Fullscreen",description:"Component can be used in \"fullscreen\" or \"inline\" modes:\n\n- `fullscreen={true}`: component has `position: absolute`, has its width and height set to 100%, and the image inside is centered vertically and horizontally. Should be used when a whole page/app is being loaded.\n- `fullscreen={false}`: component is displayed as an ordinary `div`. Should be used when a relatively small section is being loaded",code:"{\n  const style = { height: '200px', width: '45%', position: 'relative' } as CSSProperties;\n\n  return (\n    <SbRow>\n      <div style={style}>\n        <LoadingIndicator fullscreen />\n      </div>\n      <div style={style}>\n        <LoadingIndicator fullscreen={false} />\n      </div>\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/LoadingIndicator/LoadingIndicator.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=13182%3A1005",keywords:["loadingindicator","used","provide","visusal","clue","page","loading","takes","available","space","default"]},{name:"MenuItem",modulePath:"components/MenuItem",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"MenuItem",specifier:"@corva/ui/components",exportName:"MenuItem"},category:"v1",description:"Used to render menu items with icons. Use MUI Menus. Read more information on the MUI docs page [here](https://material-ui.com/api/menu-item/)",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Menu item content"},{name:"disabled",type:"boolean",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"DisabledTooltipProps",type:"Omit<TooltipProps, 'children'>",required:false,description:""},{name:"classes",type:"Record<string, string>",required:false,description:""},{name:"onClick",type:"() => void",required:false,description:""},{name:"selected",type:"boolean",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit< MuiMenuItemProps, 'children' | 'disabled' | 'className' | 'classes' | 'onClick' | 'selected' >"]},examples:[{name:"Default",description:"",code:"<MenuItem {...props} />"},{name:"UsageExample",description:"Basic usage example is shown here",code:"{\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>(undefined);\n  const [selectedItem, setSelectedItem] = useState<number>();\n\n  const icons = new Array(5).fill(null);\n\n  return (\n    <>\n      <Button onClick={e => setAnchorEl(e.currentTarget)}>Open Menu</Button>\n      <Popover open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={() => setAnchorEl(undefined)}>\n        {icons.map((_, index) => (\n          <MenuItem\n            onClick={() => setSelectedItem(index)}\n            selected={selectedItem === index}\n            key={index}\n          >\n            Menu Item {index}\n          </MenuItem>\n        ))}\n      </Popover>\n    </>\n  );\n}"},{name:"Disabled",description:"Use `DisabledTooltipProps` prop to add a tooltip to a disabled menu item",code:"{\n  return (\n    <MenuItem\n      disabled\n      DisabledTooltipProps={{\n        title: 'Tooltip title goes here!',\n        placement: 'bottom',\n      }}\n    >\n      Disabled Menu Item\n    </MenuItem>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/MenuItem/index.tsx",keywords:["menuitem","used","render","menu","items","icons","menus","read","more","information","docs"]},{name:"MiddleTruncate",modulePath:"components/MiddleTruncate",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"MiddleTruncate",specifier:"@corva/ui/components",exportName:"MiddleTruncate"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"union",required:true,description:""},{name:"truncatedText",type:"string",required:false,description:""},{name:"onTruncate",type:"function",required:false,description:""},{name:"separator",type:"string",required:false,description:""},{name:"maxWidth",type:"number",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/MiddleTruncate/MiddleTruncate.js",keywords:["middletruncate"]},{name:"MiddleTruncatedText",modulePath:"components/MiddleTruncatedText",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"MiddleTruncatedText",specifier:"@corva/ui/components",exportName:"MiddleTruncatedText"},category:"v1",description:"A wrapper to \"intelligently\" truncate text: show only start and end portion",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"MiddleTruncatedText"},examples:[{name:"Default",description:"",code:"<div style={{ width: '200px' }}>\n    <MiddleTruncatedText {...props} />\n  </div>"},{name:"DynamicWidthAdjustment",description:"Component uses `ResizeObserver` to automatically adjust itself depending on the available space",code:"{\n  const min = 100;\n  const max = 300;\n  const [width, setWidth] = useState(200);\n\n  const NonReRenderingComponent = useMemo(\n    () =>\n      memo(() => (\n        <MiddleTruncatedText>\n          Some very long and verbose text to truncate that will be truncated dynamically\n        </MiddleTruncatedText>\n      )),\n    []\n  );\n\n  return (\n    <SbColumn>\n      <div style={{ width: '200px' }}>\n        Width: {width}px\n        <Slider\n          value={width}\n          onChange={(_, value) => setWidth(value instanceof Array ? value[0] : value)}\n          min={min}\n          max={max}\n        />\n      </div>\n      <div style={{ width: `${width}px` }}>\n        <NonReRenderingComponent />\n      </div>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/MiddleTruncatedText/MiddleTruncatedText.tsx",keywords:["middletruncatedtext","wrapper","intelligently","truncate","text","show","only","start","portion"]},{name:"Modal",modulePath:"components/Modal",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Modal",specifier:"@corva/ui/components",exportName:"Modal"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"partial",undescended:["ModalProps"]},examples:[{name:"Default",description:"",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n\n      <Modal\n        {...props}\n        open={isOpen}\n        onClose={(...args) => {\n          props.onClose?.(...args);\n          setIsOpen(false);\n        }}\n      />\n    </>\n  );\n}"},{name:"WithTitle",description:"Title is controlled through `title` prop",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n\n      <Modal open={isOpen} onClose={() => setIsOpen(false)} title=\"Title\" size=\"medium\">\n        Content\n      </Modal>\n    </>\n  );\n}"},{name:"WithActions",description:"Actions, controlled through the `actions` prop, are a `ReactNode` displayed under the content",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n\n  const styles = makeStyles(theme => ({\n    actions: {\n      display: 'flex',\n      gap: theme.spacing(2),\n      justifyContent: 'flex-end',\n    },\n  }))();\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n\n      <Modal\n        open={isOpen}\n        onClose={() => setIsOpen(false)}\n        title=\"Title\"\n        size=\"large\"\n        actionsClassName={styles.actions}\n        actions={\n          <>\n            <Button color=\"primary\" variant=\"text\" size=\"small\">\n              I'm a secondary action\n            </Button>\n            <Button color=\"primary\" variant=\"contained\" size=\"small\">\n              I'm a primary action\n            </Button>\n          </>\n        }\n      >\n        Content\n      </Modal>\n    </>\n  );\n}"},{name:"Sizes",description:"Modal's size is determined by the `size` prop:\n\n- `small`: `416px`\n- `medium`: `552px`\n- `large`: `768px`\n- `extraLarge`: takes `80%` of screen width, capped at `1152px`. Also takes all available vertical space",code:"{\n  const [size, setSize] = useState<Props['size']>();\n\n  const sizes: Record<Props['size'], Props['size']> = {\n    small: 'small',\n    medium: 'medium',\n    large: 'large',\n    extraLarge: 'extraLarge',\n  };\n\n  return (\n    <SbRow>\n      {Object.values(sizes).map(size => (\n        <Button key={size} onClick={() => setSize(size)}>\n          Open {size} Modal\n        </Button>\n      ))}\n\n      <Modal open={!!size} onClose={() => setSize(undefined)} title={`Size: ${size}`} size={size}>\n        Content\n      </Modal>\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Modal/Modal.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=16382%3A40936&mode=dev",keywords:["modal","dialog","popup","overlay","confirmation"]},{name:"NewCommentCursor",modulePath:"components/NewCommentCursor",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"NewCommentCursor",specifier:"@corva/ui/components",exportName:"NewCommentCursor"},category:"v1",description:"See the [Comments migration guide](?path=/docs/components-v2-comments-migration-guide--docs). White speech-bubble marker shown at the click point on the chart while adding a comment. Apps position it absolutely at the cursor/anchor; `size` controls the diameter.",isExperimental:true,isDeprecated:false,props:[{name:"size",type:"number",required:false,description:""},{name:"onClick",type:"() => void",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Playground",description:"",code:"<div style={{ background: '#1c1c1c', padding: 32 }}>\n    <NewCommentCursor {...props} />\n  </div>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/NewCommentCursor/NewCommentCursor.tsx",figmaUrl:"https://www.figma.com/file/g7HMsT490usxg8oBs5olcD/Comment-Tool",keywords:["newcommentcursor","comments","migration","guide","white","speech-bubble","marker","shown","click","point","chart"]},{name:"NewDocumentViewer",modulePath:"components/NewDocumentViewer",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"NewDocumentViewer",specifier:"@corva/ui/components",exportName:"NewDocumentViewer"},category:"v1",description:"An overlay that displays a file preview",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"fileUrl",type:"string",required:true,description:""},{name:"fileName",type:"string",required:true,description:"Determines the type in which the file will be displayed. Supported extensions: `csv`, `txt`, `json`, `pdf`, `xlsx`"},{name:"fileSize",type:"number",required:false,description:""},{name:"onClose",type:"() => void",required:true,description:""},{name:"'data-testid'",type:"string",required:false,description:""},{name:"classes",type:"any",required:false,description:""},{name:"webviewType",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [open, setOpen] = useState(false);\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Open preview</Button>\n\n      <NewDocumentViewer\n        {...props}\n        open={open}\n        onClose={(...args) => {\n          props.onClose?.(...args);\n          setOpen(false);\n        }}\n      />\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/NewDocumentViewer/NewDocumentViewer.tsx",keywords:["newdocumentviewer","overlay","displays","file","preview"]},{name:"Notifications",modulePath:"components/Notifications",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Notifications",specifier:"@corva/ui/components",exportName:"Notifications"},category:"v1",description:"Component that displays notifications.\n\nYou can use `NotificationsContainer` instead, that writes its API to `window` (and therefore should be unique to a page), and use utils methods to show notifications:\n```\nimport {showSuccessNotification} from '@corva/ui/utils';\n/* ... */\nshowSuccessNotification(message, options);\n```\nDefault auto-hide duration: `3000ms`",isExperimental:false,isDeprecated:false,props:[{name:"removeNotification",type:"(id: string) => void",required:true,description:""},{name:"notifications",type:"Notification[]",required:true,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<div style={{ height: '100px' }}>\n    <Notifications {...props} />\n  </div>"},{name:"NotificationTypes",description:"Notification type is set through `variant` property of an item in `notifications` prop.\n\n5 notification types are supported:\n\n- `error`\n- `info`\n- `success`\n- `warning`\n",code:"{\n  const variants: Record<\n    Props['notifications'][number]['variant'],\n    Props['notifications'][number]['variant']\n  > = {\n    error: 'error',\n    info: 'info',\n    success: 'success',\n    warning: 'warning',\n  };\n\n  return (\n    <div style={{ height: '350px' }}>\n      <Notifications\n        removeNotification={() => {}}\n        notifications={Object.values(variants).map(variant => ({\n          id: variant,\n          content: variant,\n          variant,\n        }))}\n      />\n    </div>\n  );\n}"},{name:"UsageWithContainer",description:"You can use `NotificationsContainer` and control notifications with utility methods imported from `@corva/ui/utils`. See example below",code:"{\n  /*\n    import {\n      showErrorNotification,\n      showInfoNotification,\n      showSuccessNotification,\n      showWarningNotification,\n    } from '@corva/ui/utils';\n   */\n\n  return (\n    <>\n      {/* In some other component */}\n      <NotificationsContainer />\n\n      <SbColumn>\n        <Button onClick={() => showErrorNotification('error')}>error</Button>\n        <Button onClick={() => showInfoNotification('info')}>info</Button>\n        <Button onClick={() => showSuccessNotification('success')}>success</Button>\n        <Button onClick={() => showWarningNotification('warning')}>warning</Button>\n      </SbColumn>\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Notifications/Notifications.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9597%3A20397",keywords:["notifications","component","displays","notificationscontainer","instead","writes","window","therefore","should","unique"]},{name:"OffsetWellButton",modulePath:"components/OffsetWellButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"OffsetWellButton",specifier:"@corva/ui/components",exportName:"OffsetWellButton"},category:"v1",description:"",isExperimental:false,isDeprecated:true,props:[{name:"onClick",type:"(args: any[]) => any",required:true,description:""},{name:"wells",type:"{ id?: number | null; title?: string | null }[]",required:false,description:""},{name:"label",type:"string",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"onExpand",type:"((...args: any[]) => any) | null",required:false,description:""},{name:"expanded",type:"boolean",required:false,description:""},{name:"offsetWellsLimited",type:"boolean",required:false,description:""},{name:"isTooltipDisabled",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<OffsetWellButton {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/OffsetWellButton/OffsetWellButton.tsx",keywords:["offsetwellbutton"]},{name:"OffsetWellMap",modulePath:"components/OffsetWellMap",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"OffsetWellMap",specifier:"@corva/ui/components",exportName:"OffsetWellMap"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/OffsetWellMap/OffsetWellMap.js",keywords:["offsetwellmap"]},{name:"OffsetWellPickerV2",modulePath:"components/OffsetWellPickerV2/OffsetWellPickerDialog",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"OffsetWellPickerV2",specifier:"@corva/ui/components",exportName:"OffsetWellPickerV2"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"isOpen",type:"boolean",required:true,description:""},{name:"defaultSubjectWellId",type:"number",required:false,description:""},{name:"companyId",type:"number",required:false,description:""},{name:"offsetSetting",type:"object",required:true,description:""},{name:"currentUser",type:"object",required:true,description:""},{name:"addWellsUsabilityInfo",type:"function",required:false,description:""},{name:"unusableWellAlarm",type:"string",required:false,description:""},{name:"isAdvancedSearch",type:"boolean",required:false,description:""},{name:"bestCount",type:"number",required:false,description:""},{name:"maxOffsetSize",type:"number",required:false,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"onClose",type:"function",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/OffsetWellPickerV2/OffsetWellPickerDialog.js",keywords:["offsetwellpickerv2"]},{name:"OffsetWellPickerV3",modulePath:"components/OffsetWellPickerV3",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"OffsetWellPickerV3",specifier:"@corva/ui/components",exportName:"OffsetWellPickerV3"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"dataSource",type:"custom",required:false,description:""},{name:"filterBasedOn",type:"custom",required:false,description:""},{name:"defaultSubjectWell",type:"object",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""},{name:"offsetSettings",type:"object",required:false,description:""},{name:"unusableWellAlarm",type:"custom",required:false,description:""},{name:"addWellsUsabilityInfo",type:"custom",required:false,description:""},{name:"onClose",type:"function",required:true,description:""},{name:"onSave",type:"function",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/OffsetWellPickerV3/index.js",keywords:["offsetwellpickerv3"]},{name:"OffsetWellPickerV4",modulePath:"components/OffsetWellPickerV4/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"OffsetWellPickerV4",specifier:"@corva/ui/components",exportName:"OffsetWellPickerV4"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/OffsetWellPickerV4/index.js",keywords:["offsetwellpickerv4"]},{name:"OffsetWellPickerV5",modulePath:"components/OffsetWellPickerV5/components/OffsetWellPickerV5WithStore/OffsetWellPickerV5WithStore",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"OffsetWellPickerV5",specifier:"@corva/ui/components",exportName:"OffsetWellPickerV5"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"OffsetWellPickerV5WithStore"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/OffsetWellPickerV5/components/OffsetWellPickerV5WithStore/OffsetWellPickerV5WithStore.tsx",keywords:["offsetwellpickerv5"]},{name:"PadModeSelect",modulePath:"components/PadModeSelect",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"PadModeSelect",specifier:"@corva/ui/components",exportName:"PadModeSelect"},category:"v1",description:"Pad/well mode selector rendered in the app header. Reads its data from `useAppCommons()` (so it must render inside an AppCommonsProvider).",isExperimental:false,isDeprecated:false,props:[{name:"padModeSetting",type:"PadModeSetting",required:false,description:""},{name:"assets",type:"Well[]",required:false,description:""},{name:"fracFleetLines",type:"FracFleetLine[]",required:true,description:""},{name:"completionAppType",type:"string",required:true,description:""},{name:"disableActiveWellsInPadSelect",type:"boolean",required:true,description:""},{name:"enableSimulFracInPadSelect",type:"boolean",required:true,description:""},{name:"onChange",type:"(value: PadModeSetting) => void",required:true,description:""},{name:"formControlClassName",type:"string",required:false,description:""},{name:"activeAssetComponent",type:"ComponentType<ActiveAssetProps>",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<div>\n    PadModeSelect renders inside an <code>AppCommonsProvider</code>. See the migration guide below.\n  </div>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/PadModeSelect/PadModeSelect.tsx",keywords:["padmodeselect","well","mode","selector","rendered","header","reads","data","useappcommons","must","render"]},{name:"PadOffsetsPicker",modulePath:"components/PadOffsetsPicker",importPath:"@corva/ui/components",importRecipe:{kind:"namespace-member",componentName:"PadOffsetsPicker",specifier:"@corva/ui/components",namespaceName:"PadOffsetsPicker",memberName:"PadOffsetsPicker"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"currentOffsetSetting",type:"array",required:true,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"companyId",type:"string",required:true,description:""},{name:"assets",type:"array",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/PadOffsetsPicker/PadOffsetsPicker.js",keywords:["padoffsetspicker"]},{name:"PadOffsetsPickerV2",modulePath:"components/PadOffsetsPickerV2",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"PadOffsetsPickerV2",specifier:"@corva/ui/components",exportName:"PadOffsetsPickerV2"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"PadOffsetsPickerV2"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/PadOffsetsPickerV2/PadOffsetsPickerV2.tsx",keywords:["padoffsetspickerv2"]},{name:"ParameterCharts",modulePath:"components/ParameterCharts",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ParameterCharts",specifier:"@corva/ui/components",exportName:"ParameterCharts"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"data",type:"object",required:true,description:""},{name:"mapping",type:"array",required:true,description:""},{name:"indexes",type:"object",required:true,description:""},{name:"settingsKey",type:"custom",required:false,description:""},{name:"settings",type:"object",required:false,description:""},{name:"onSettingsChange",type:"function",required:true,description:""},{name:"horizontal",type:"custom",required:false,description:""},{name:"multipleAssets",type:"custom",required:false,description:""},{name:"isLoading",type:"boolean",required:true,description:""},{name:"assestColors",type:"array",required:false,description:""}],propsList:{kind:"unjudged"},examples:[{name:"HorizontalChart",description:"",code:"{\n  const [settings, setSettings] = useState({});\n\n  return (\n    <>\n      <AddEditTrack settings={settings} onSettingsChange={setSettings} mapping={mapping}>\n        <AddOneIcon fill=\"#03BCD4\" fontSize={16} />\n      </AddEditTrack>\n      <ParameterCharts\n        data={{ dataCollection }}\n        mapping={mapping}\n        settings={settings}\n        onSettingsChange={setSettings}\n        horizontal\n        indexes={{\n          min: 18312,\n          max: 18323,\n          keys: {\n            dataCollection: {\n              key: 'data.hole_depth_mean',\n              name: 'Depth',\n              unit: 'ft',\n              unitType: 'length',\n              collection: 'dataCollection',\n            },\n          },\n        }}\n        // settingsKey\n      />\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ParameterCharts/ParameterCharts.js",keywords:["parametercharts"]},{name:"PinnableFilters",modulePath:"components/PinnableFilters/PinnableFilters",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"PinnableFilters",specifier:"@corva/ui/components",exportName:"PinnableFilters"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"array",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/PinnableFilters/PinnableFilters.js",keywords:["pinnablefilters"]},{name:"Popover",modulePath:"components/Popover",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Popover",specifier:"@corva/ui/components",exportName:"Popover"},category:"v1",description:"MUI Popover. Read more information on the MUI docs page  [here](https://v4.mui.com/api/popover/)",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"anchorEl",type:"HTMLElement | (() => HTMLElement)",required:true,description:"A HTML element, or a function that returns it. It's used to set the position of the popover."},{name:"children",type:"ReactNode",required:false,description:"The content of the component."},{name:"onClose",type:"() => void",required:false,description:""},{name:"anchorOrigin",type:"{\n    horizontal: 'center' | 'left' | 'right' | number;\n    vertical: 'bottom' | 'center' | 'top' | number;\n  }",required:false,description:"This is the point on the anchor where the popover's anchorEl will attach to. This is not used when the anchorReference is 'anchorPosition'.\\nOptions: vertical: [top, center, bottom]; horizontal: [left, center, right]."},{name:"transformOrigin",type:"{\n    horizontal: 'center' | 'left' | 'right' | number;\n    vertical: 'bottom' | 'center' | 'top' | number;\n  }",required:false,description:"This is the point on the popover which will attach to the anchor's origin.\\nOptions: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]."}],propsList:{kind:"partial",undescended:["Omit< MuiPopoverProps, 'open' | 'anchorEl' | 'onClose' | 'children' | 'anchorOrigin' | 'transformOrigin' >"]},examples:[{name:"Default",description:"",code:"{\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLButtonElement>();\n\n  return (\n    <>\n      <Button ref={ref} onClick={() => setOpen(true)}>\n        Open menu\n      </Button>\n\n      <Popover {...props} open={open} anchorEl={ref.current} onClose={() => setOpen(false)} />\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Popover/Popover.tsx",keywords:["popover","popup","overlay","floating","hover","read","more","information","docs","page","here"]},{name:"Popper",modulePath:"components/Popper",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Popper",specifier:"@corva/ui/components",exportName:"Popper"},category:"v1",description:"A wrapper over Popper - a barebones component that positions come content as a popover.\n\nAll props are passed through to it's base. Refer to MUI [documentation](https://v4.mui.com/api/popper/) and [examples](https://v4.mui.com/components/popper/) for more information",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"Contents of the popover"},{name:"open",type:"boolean",required:true,description:""},{name:"anchorEl",type:"HTMLElement | (() => HTMLElement)",required:true,description:"Defines an HTML node to which the content will be positioned"},{name:"placement",type:"'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'",required:false,description:"Defines placement",enumValues:["bottom-end","bottom-start","bottom","left-end","left-start","left","right-end","right-start","right","top-end","top-start","top"]}],propsList:{kind:"partial",undescended:["Omit<MuiPopperProps, 'children' | 'anchorEl' | 'open' | 'placement'>"]},examples:[{name:"Default",description:"",code:"{\n  const [anchorEl, setAnchorEl] = useState<HTMLElement>();\n  return (\n    <>\n      <Button onClick={e => setAnchorEl(anchorEl ? undefined : e.currentTarget)}>\n        Toggle Open\n      </Button>\n      <Popper {...props} open={!!anchorEl} anchorEl={anchorEl} />\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Popper/Popper.tsx",keywords:["popper","floating","positioned","overlay","popup","wrapper","over","barebones","component","positions","come","content","popover","props"]},{name:"PostInput",modulePath:"components/PostInput",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"PostInput",specifier:"@corva/ui/components",exportName:"PostInput"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"userCompanyId",type:"union",required:true,description:""},{name:"className",type:"string",required:false,description:""},{name:"onKeyDown",type:"function",required:false,description:""},{name:"onChange",type:"function",required:false,description:""},{name:"initialValue",type:"object",required:false,description:""},{name:"filePreviewWrapperClass",type:"string",required:false,description:""},{name:"suggestionsPortalHost",type:"ReactNode",required:false,description:""},{name:"allowSuggestionsAboveCursor",type:"boolean",required:false,description:""},{name:"smallerView",type:"boolean",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/PostInput/PostInput.js",keywords:["postinput"]},{name:"PostPreviewDialog",modulePath:"components/PostPreviewDialog",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"PostPreviewDialog",specifier:"@corva/ui/components/PostPreviewDialog",form:"default"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/PostPreviewDialog/index.js",keywords:["postpreviewdialog"]},{name:"PriceInput",modulePath:"components/PriceInput",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"PriceInput",specifier:"@corva/ui/components",exportName:"PriceInput"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"InputProps",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/PriceInput/PriceInput.js",keywords:["priceinput"]},{name:"RangeSlider",modulePath:"components/RangeSlider",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"RangeSlider",specifier:"@corva/ui/components",exportName:"RangeSlider"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"from",type:"number",required:true,description:"Range start value"},{name:"to",type:"number",required:true,description:"Range end value"},{name:"onChange",type:"(range: { from: number; to: number }) => void",required:false,description:"Callback function called every time `from` or `to` values are changed. Bound to mousemove event"},{name:"min",type:"number",required:false,description:"Minimum value"},{name:"max",type:"number",required:false,description:"Maximum value"},{name:"orientation",type:"'horizontal' | 'vertical'",required:false,description:"",enumValues:["horizontal","vertical"]},{name:"precision",type:"number",required:false,description:"Digits after decimal point"},{name:"minRange",type:"number",required:false,description:"Minimum allowed difference between `from` and `to` values"},{name:"isSingleRange",type:"boolean",required:false,description:"Fixes range's lower border, effectively turning the component into a single-value `Slider`"},{name:"isWithoutInput",type:"boolean",required:false,description:"Hides input fields on the edges of the slider"},{name:"disabled",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<Parameters<Props['onChange']>[0]>({\n    from: props.from,\n    to: props.to,\n  });\n\n  return (\n    <RangeSlider\n      {...props}\n      from={value.from}\n      to={value.to}\n      onChange={(range, ...rest) => {\n        props.onChange?.(range, ...rest);\n        setValue(range);\n      }}\n    />\n  );\n}"},{name:"Vertical",description:"Component can be displayed as a vertical slider through the use of `orientation` prop\n\nIn this case the component will take all available vertical space",code:"{\n  const [value, setValue] = useState<Parameters<Props['onChange']>[0]>({\n    from: 20,\n    to: 40,\n  });\n\n  return (\n    <div style={{ height: '300px' }}>\n      <RangeSlider\n        from={value.from}\n        to={value.to}\n        onChange={range => setValue(range)}\n        orientation=\"vertical\"\n      />\n    </div>\n  );\n}"},{name:"AsASlider",description:"Component can work in a \"slider\" mode when `from` is fixed, and user can only move the `to` handle. Use `isSingleRange` prop for this",code:"{\n  const [value, setValue] = useState(0);\n  const [value2, setValue2] = useState(50);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <RangeSlider from={0} to={value} onChange={range => setValue(range.to)} isSingleRange />\n      <RangeSlider from={20} to={value2} onChange={range => setValue2(range.to)} isSingleRange />\n    </SbColumn>\n  );\n}"},{name:"MinimumRange",description:"You can set the minimum range size through `minRange` prop.\n\nUser won't be able to select a range smaller than this prop",code:"{\n  const [value, setValue] = useState<Parameters<Props['onChange']>[0]>({\n    from: 20,\n    to: 40,\n  });\n\n  return (\n    <RangeSlider\n      from={value.from}\n      to={value.to}\n      onChange={range => setValue(range)}\n      minRange={10}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/RangeSlider/RangeSlider.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A7373&mode=dev",keywords:["rangeslider"]},{name:"ResizableTable",modulePath:"components/ResizableTable",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ResizableTable",specifier:"@corva/ui/components",exportName:"ResizableTable"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"ResizableTable"},examples:[{name:"TableResizable",description:"",code:"export function TableResizable({ size, withCheckboxes }) {\n  const [order, setOrder] = useState('asc');\n  const [orderBy, setOrderBy] = useState('calories');\n  const [selected, setSelected] = useState([]);\n  const [page, setPage] = useState(0);\n  const [rowsPerPage, setRowsPerPage] = useState(10);\n  const [isLoading, setIsLoading] = useState(true);\n\n  const handleChangePage = (event, newPage) => {\n    setPage(newPage);\n  };\n\n  const createSortHandler = (property, handleRequestSort) => event => {\n    handleRequestSort(event, property);\n  };\n\n  const handleChangeRowsPerPage = event => {\n    setRowsPerPage(+event.target.value);\n    setPage(0);\n  };\n\n  const handleRequestSort = (event, property) => {\n    const isAsc = orderBy === property && order === 'asc';\n    setOrder(isAsc ? 'desc' : 'asc');\n    setOrderBy(property);\n  };\n\n  const handleSelectAllClick = event => {\n    if (event.target.checked) {\n      const newSelecteds = rows.map(n => n.name);\n      setSelected(newSelecteds);\n      return;\n    }\n    setSelected([]);\n  };\n\n  const handleClick = (event, name) => {\n    const selectedIndex = selected.indexOf(name);\n    let newSelected = [];\n\n    if (selectedIndex === -1) {\n      newSelected = newSelected.concat(selected, name);\n    } else if (selectedIndex === 0) {\n      newSelected = newSelected.concat(selected.slice(1));\n    } else if (selectedIndex === selected.length - 1) {\n      newSelected = newSelected.concat(selected.slice(0, -1));\n    } else if (selectedIndex > 0) {\n      newSelected = newSelected.concat(\n        selected.slice(0, selectedIndex),\n        selected.slice(selectedIndex + 1)\n      );\n    }\n\n    setSelected(newSelected);\n  };\n\n  const isSelected = name => selected.indexOf(name) !== -1;\n\n  useEffect(() => {\n    const isLoadingTimeout = setTimeout(() => {\n      setIsLoading(false);\n    }, 1500);\n\n    return () => clearTimeout(isLoadingTimeout);\n  }, []);\n\n  return (\n    <div style={{ width: 1200, backgroundColor: '#212121' }}>\n      {withCheckboxes && (\n        <TableToolbar\n          numSelected={selected.length}\n          actions={\n            <IconButton size={size === 'medium' ? 'medium' : 'small'}>\n              <Tooltip title=\"Delete\">\n                <DeleteIcon />\n              </Tooltip>\n            </IconButton>\n          }\n          content={\n            <div>\n              <Typography variant=\"h6\" id=\"tableTitle\" component=\"div\">\n                Nutrition\n              </Typography>\n            </div>\n          }\n        />\n      )}\n      <TableContainer style={{ width: 1200 }}>\n        <ResizableTable>\n          <TableHead>\n            <TableRow>\n              {withCheckboxes && (\n                <StyledTableCell\n                  className={classNames({ dense: size === 'dense' })}\n                  style={{\n                    paddingTop: 0,\n                    paddingBottom: 0,\n                    verticalAlign: 'middle',\n                    border: '1px solid #808080',\n                  }}\n                >\n                  <Checkbox\n                    indeterminate={selected.length > 0 && selected.length < rows.length}\n                    checked={rows.length > 0 && selected.length === rows.length}\n                    onChange={handleSelectAllClick}\n                    size=\"small\"\n                  />\n                </StyledTableCell>\n              )}\n              {headCells.map(headCell => (\n                <StyledTableCell\n                  className={size === 'dense' ? 'dense' : ''}\n                  key={headCell.id}\n                  align=\"left\"\n                  sortDirection={orderBy === headCell.id ? order : false}\n                  style={{ border: '1px solid #808080' }}\n                >\n                  <TableSortLabel\n                    active={orderBy === headCell.id}\n                    direction={orderBy === headCell.id ? order : 'asc'}\n                    onClick={createSortHandler(headCell.id, handleRequestSort)}\n                  >\n                    {headCell.label}\n                  </TableSortLabel>\n                </StyledTableCell>\n              ))}\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {isLoading\n              ? rows.map(row => (\n                  <TableRow key={row.id}>\n                    {headCells.map(column => (\n                      <TableCell\n                        key={`${column.id}-${row.id}`}\n                        style={{ height: SKELETON_HEIGHT_BY_SIZE[size].cell }}\n                      >\n                        <Skeleton\n                          animation=\"wave\"\n                          variant=\"text\"\n                          style={{ height: SKELETON_HEIGHT_BY_SIZE[size].sceleton }}\n                        />\n                      </TableCell>\n                    ))}\n                  </TableRow>\n                ))\n              : stableSort(rows, getComparator(order, orderBy)).map((row, index) => {\n                  const isItemSelected = isSelected(row.name);\n                  return (\n                    <TableRow\n                      hover\n                      onClick={withCheckboxes ? event => handleClick(event, row.name) : () => {}}\n                      role=\"checkbox\"\n                      tabIndex={-1}\n                      key={row.name}\n                    >\n                      {withCheckboxes && (\n                        <StyledTableCell\n                          className={classNames({ dense: size === 'dense' })}\n                          style={{ paddingTop: 0, paddingBottom: 0 }}\n                        >\n                          <Checkbox size=\"small\" checked={isItemSelected} />\n                        </StyledTableCell>\n                      )}\n                      <StyledTableCell\n                        className={size === 'dense' ? 'dense' : ''}\n                        id={`enhanced-table-checkbox-${index}`}\n                        scope=\"row\"\n                      >\n                        {row.name}\n                      </StyledTableCell>\n                      <StyledTableCell className={size === 'dense' ? 'dense' : ''} align=\"left\">\n                        {row.calories}\n                      </StyledTableCell>\n                      <StyledTableCell className={size === 'dense' ? 'dense' : ''} align=\"left\">\n                        {row.fat}\n                      </StyledTableCell>\n                      <StyledTableCell className={size === 'dense' ? 'dense' : ''} align=\"left\">\n                        {row.carbs}\n                      </StyledTableCell>\n                      <StyledTableCell className={size === 'dense' ? 'dense' : ''} align=\"left\">\n                        {row.protein}\n                      </StyledTableCell>\n                    </TableRow>\n                  );\n                })}\n          </TableBody>\n        </ResizableTable>\n        <TablePagination\n          rowsPerPageOptions={[10, 25, 100]}\n          component=\"div\"\n          count={rows.length}\n          rowsPerPage={rowsPerPage}\n          page={page}\n          onChangePage={handleChangePage}\n          onChangeRowsPerPage={handleChangeRowsPerPage}\n        />\n      </TableContainer>\n    </div>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ResizableTable/ResizableTable.tsx",keywords:["resizabletable"]},{name:"Search",modulePath:"components/Search",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Search",specifier:"@corva/ui/components",exportName:"Search"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onChange",type:"(event: ChangeEvent<{}>, selected: any | any[] | null) => void",required:true,description:""},{name:"value",type:"object | object[]",required:false,description:""},{name:"options",type:"{ label?: string; id: string; group?: string }[]",required:false,description:""},{name:"AutocompleteProps",type:"{\n    getOptionDisabled?: (option: any) => boolean;\n    forcePopupIcon?: boolean;\n  }",required:false,description:""},{name:"allChecked",type:"boolean",required:false,description:""},{name:"TextFieldProps",type:"{\n    label?: string;\n    endAdornment?: ReactNode;\n  }",required:false,description:""},{name:"selectedGroup",type:"{\n    name?: string;\n    id?: string;\n  }",required:false,description:""},{name:"onGroupReset",type:"MouseEventHandler<HTMLSpanElement>",required:false,description:""},{name:"onClose",type:"() => void",required:false,description:""},{name:"disableClearable",type:"boolean",required:false,description:""},{name:"disableResetOnGroupChange",type:"boolean",required:false,description:"MUI Autocomplete triggers onInputChange when startAdornment is changed (via selectedGroup update).\nIf disableResetOnGroupChange is true, we won't store a new value in onInputChange when the 'reason' is \"reset\".\nAdditionally, handleSelectedGroupChange won't trigger handleInputReset if disableResetOnGroupChange is true."},{name:"onInputChange",type:"(value: string) => void",required:false,description:""},{name:"getOptionLabel",type:"(option: any) => string",required:false,description:""},{name:"onGroupChange",type:"(group: { name?: string; id?: string }) => void",required:false,description:""},{name:"loading",type:"boolean",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"multiple",type:"boolean",required:false,description:""},{name:"optionSize",type:"'large'",required:false,description:""},{name:"popupIcon",type:"ReactNode",required:false,description:""},{name:"InputProps",type:"Partial<MuiInputProps>",required:false,description:""},{name:"ListboxProps",type:"object",required:false,description:""},{name:"classes",type:"Partial<{\n      popper: string;\n      listbox: string;\n      popupIndicator: string;\n      popupIndicatorOpen: string;\n      groupChip: string;\n    } & Record<string, string>>",required:false,description:""},{name:"onInputChangeCallback",type:"(newInputValue: string, reason: string) => void",required:false,description:""},{name:"placeholder",type:"string",required:false,description:""},{name:"RecentSearchesComponent",type:"ComponentType<any>",required:false,description:""},{name:"ListboxComponent",type:"any",required:false,description:""},{name:"recentSearchesMaxCount",type:"number",required:false,description:""},{name:"dataStorageKey",type:"string",required:false,description:""},{name:"dataStorage",type:"object",required:false,description:""},{name:"groups",type:"{ id: string; name: string }[]",required:false,description:""},{name:"GroupsComponent",type:"ComponentType<{\n    onGroupClick: (id: string) => void;\n    groups: { id: string; name: string }[];\n  }>",required:false,description:""},{name:"onOpen",type:"(e: any) => void",required:false,description:""},{name:"renderCustomOption",type:"(option: any, state: any) => ReactNode",required:false,description:""},{name:"onInputReset",type:"() => void",required:false,description:""},{name:"isHiddenAllOption",type:"boolean",required:false,description:""},{name:"isHiddenAllLabel",type:"boolean",required:false,description:""},{name:"paperFooter",type:"ReactNode",required:false,description:""},{name:"isOpenedFromParent",type:"boolean",required:false,description:""},{name:"popperProps",type:"Partial<{ style: object }>",required:false,description:""},{name:"onFocus",type:"() => void",required:false,description:""},{name:"inputProps",type:"object",required:false,description:""},{name:"noOptionsText",type:"string",required:false,description:""},{name:"isPrioritizedSelectedOptions",type:"boolean",required:false,description:""},{name:"shouldResetInputOnAutocompleteChange",type:"boolean",required:false,description:"There is a check if it is multiple search then we should keep input value on autocomplete change\nBut now there is another case, when we should reset input value on autocomplete change\nThis new prop allows to have both options"}],propsList:{kind:"partial",undescended:["Omit< AutocompleteProps<any, false, false, false>, | 'value' | 'onChange' | 'options' | 'onClose' | 'disableClearable' | 'onInputChange' | 'getOptionLabel' | 'loading' | 'disabled' | 'multiple' | 'popupIcon' | 'ListboxProps' | 'classes' | 'placeholder' | 'ListboxComponent' | 'onOpen' | 'onFocus' | 'inp' | 'noOptionsText' | 'renderInput' | 'PopperComponent' | 'open' | 'forcePopupIcon' | 'fullWidth' | 'renderGroup' | 'disableCloseOnSelect' | 'renderOption' | 'groupBy' | 'PaperComponent' | 'inputValue' | 'getOptionDisabled' | 'loadingText' | 'InputProps' | 'isNullable' >"]},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState();\n  return (\n    <Search\n      {...props}\n      value={value}\n      options={options}\n      onChange={(event, value, ...rest) => {\n        props.onChange?.(event, value, ...rest);\n        setValue(value);\n      }}\n    />\n  );\n}"},{name:"MultipleSelection",description:"You can switch `Search` to a multiple selection mode with `multiple` prop.\n\nN.B: in this case, `value` prop *must* be an array, and `onChange` receives an array as its second argument",code:"{\n  const [value, setValue] = useState([]);\n  return (\n    <Search\n      multiple\n      value={value}\n      options={options}\n      onChange={(_e, value) => {\n        console.log(value);\n        setValue(value);\n      }}\n    />\n  );\n}"},{name:"GroupedOptions",description:"You can group your options by adding `group` property to items in `options` prop.\n\nBy adding a `GroupsComponent` prop, you can display a group selection block. Component provides a default one as it's own `Search.Groups` property, but you can use your own implementation.",code:"{\n  const [value, setValue] = useState();\n  const [group, setGroup] = useState<Props['selectedGroup']>();\n\n  const groups: Props['groups'] = [\n    { id: 'ondOne', name: 'Great Old Ones' },\n    { id: 'elderGod', name: 'Elder Gods' },\n  ];\n\n  const optionsWithGroups = [\n    ...options.map(option => ({ ...option, group: 'Great Old Ones' })),\n\n    { id: '11', group: 'Elder Gods', label: 'Adaedu' },\n    { id: '12', group: 'Elder Gods', label: 'Alithlai' },\n    { id: '13', group: 'Elder Gods', label: 'Amaterasu' },\n    { id: '14', group: 'Elder Gods', label: 'Bast' },\n    { id: '15', group: 'Elder Gods', label: 'Dveahtehs' },\n\n    // Groupless\n    { id: '21', label: 'Ian Moone' },\n    { id: '22', label: 'Enoch Bowen' },\n    { id: '23', label: 'Herbert West' },\n  ];\n\n  return (\n    <SbColumn>\n      <Search\n        value={value}\n        options={optionsWithGroups}\n        onChange={(_e, value) => setValue(value)}\n        onGroupChange={group => setGroup(group)}\n        onGroupReset={() => setGroup(undefined)}\n        GroupsComponent={Search.Groups}\n        groups={groups}\n        selectedGroup={group}\n        placeholder={'With \"default\" GroupsComponent'}\n      />\n\n      <Search\n        value={value}\n        options={optionsWithGroups}\n        onChange={(_e, value) => setValue(value)}\n        onGroupChange={group => setGroup(group)}\n        onGroupReset={() => setGroup(undefined)}\n        GroupsComponent={({ groups, onGroupClick }) => {\n          return (\n            <>\n              {groups.map(group => (\n                <Button key={group.id} size=\"small\" onClick={() => onGroupClick(group.id)}>\n                  {group.name}\n                </Button>\n              ))}\n            </>\n          );\n        }}\n        groups={groups}\n        selectedGroup={group}\n        placeholder=\"With custom GroupsComponent\"\n      />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Search/Search.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=30300%3A122250&mode=dev",keywords:["search"]},{name:"SearchInput",modulePath:"components/SearchInput",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"SearchInput",specifier:"@corva/ui/components",exportName:"SearchInput"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"handleSearch",type:"function",required:true,description:""},{name:"className",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/SearchInput/index.js",keywords:["searchinput"]},{name:"Select",modulePath:"components/Select",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Select",specifier:"@corva/ui/components",exportName:"Select"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"Select"},examples:[{name:"Default",description:"",code:"<Select {...props}>\n    {options.map(({ id, name }) => (\n      <MenuItem key={id} value={id}>\n        {name}\n      </MenuItem>\n    ))}\n  </Select>"},{name:"ErrorState",description:"Component supports \"error\" state, turned on by `error` prop. To add error description, use the `formHelperText` prop",code:"<Select value=\"1\" error formHelperText=\"I am error text\">\n    {options.map(({ id, name }) => (\n      <MenuItem key={id} value={id}>\n        {name}\n      </MenuItem>\n    ))}\n  </Select>"},{name:"WithIcons",description:"Use `startAdornment` prop and `<InputAdornment/>` to add an icon or an arbitrary content at the start of a Select",code:"{\n  return (\n    <Select\n      value=\"1\"\n      startAdornment={\n        <InputAdornment position=\"start\">\n          <LayersIcon size={16} />\n        </InputAdornment>\n      }\n    >\n      {options.map(({ id, name }) => (\n        <MenuItem key={id} value={id}>\n          {name}\n        </MenuItem>\n      ))}\n    </Select>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Select/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A7954&mode=dev",keywords:["select","dropdown","choose","pick","options"]},{name:"SlateFormattedText",modulePath:"components/SlateFormattedText",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"SlateFormattedText",specifier:"@corva/ui/components",exportName:"SlateFormattedText"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"text",type:"string",required:false,description:""},{name:"textsList",type:"array",required:false,description:""},{name:"defaultText",type:"union",required:false,description:""},{name:"defaultRenderingTextNode",type:"ReactNode",required:false,description:""},{name:"locator",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/SlateFormattedText/SlateFormattedText.js",keywords:["slateformattedtext"]},{name:"StatusBadge",modulePath:"components/StatusBadge",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"StatusBadge",specifier:"@corva/ui/components",exportName:"StatusBadge"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"assetsData",type:"AssetData",required:false,description:""},{name:"appWidth",type:"number",required:true,description:""},{name:"className",type:"string",required:false,description:""},{name:"DQIssueTooltipMaxHeight",type:"number",required:false,description:""},{name:"iconType",type:"'error' | 'success' | 'issue' | ''",required:false,description:"",enumValues:["error","success","issue",""]},{name:"lastTimestamp",type:"number",required:false,description:""},{name:"warningData",type:"Record<string, any>",required:false,description:""},{name:"hasSubscriptionsData",type:"boolean",required:false,description:""},{name:"maximized",type:"boolean",required:false,description:""},{name:"statusBadgeContentClassName",type:"string",required:false,description:""},{name:"tooltipPlacement",type:"TooltipProps['placement']",required:false,description:""},{name:"setAssetsData",type:"Dispatch<SetStateAction<AssetData | { hasSubscriptionsData?: boolean }>>",required:true,description:""}],propsList:{kind:"complete"},examples:[{name:"StatusBadge",description:"",code:"{\n  return (\n    <div style={{ marginTop: 400 }}>\n      <StatusBadgeComponent\n        assetsData={assetsData}\n        appWidth={appWidth}\n        DQIssueTooltipMaxHeight={DQIssueTooltipMaxHeight}\n        iconType={iconType}\n        lastTimestamp={lastTimestamp}\n        warningData={warningData}\n        tooltipPlacement={tooltipPlacement}\n      />\n    </div>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/StatusBadge/index.tsx",keywords:["statusbadge"]},{name:"Stepper",modulePath:"components/Stepper",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Stepper",specifier:"@corva/ui/components",exportName:"Stepper"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"steps",type:"ComponentProps<typeof Step>[]",required:true,description:""},{name:"className",type:"string",required:false,description:""},{name:"activeStep",type:"number",required:false,description:""},{name:"size",type:"Size",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Stepper {...props} />"},{name:"Sizes",description:"Component supports 2 sizes, provided as its own `SIZES` property. Using `Stepper.SIZES.*` is preferred:\n\n- `SIZE.Medium` (daefault)\n- `SIZE.Large`",code:"<SbColumn>\n    <Stepper steps={meta.args.steps.slice(0, 2)} size={Stepper.SIZE.Medium} />\n    <Stepper steps={meta.args.steps.slice(0, 2)} size={Stepper.SIZE.Large} />\n  </SbColumn>"},{name:"StepParameters",description:"`steps` prop item has the following shape:\n\n```tsx\n\ntype StepProps = {\n  // Content\n  value: ReactNode;\n  label?: ReactNode;\n  tooltip?: ReactNode;\n  goBackTooltip?: ReactNode;\n\n  // State\n  checked?: boolean;\n  active?: boolean;\n  error?: boolean;\n  disabled?: boolean;\n  size?: Size;\n\n  // Utility\n  className?: string;\n  canGoBack?: boolean;\n  onClick?: () => void;\n};\n```",code:"{\n  return (\n    <Stepper\n      activeStep={4}\n      steps={[\n        { value: '1', label: 'Passed step' },\n        {\n          value: '2',\n          label: (\n            <>\n              Passed step\n              <br />\n              (hoverable)\n            </>\n          ),\n          onClick: log,\n        },\n        {\n          value: '3',\n          label: (\n            <>\n              Passed step\n              <br />\n              (no way back)\n            </>\n          ),\n          onClick: log,\n          canGoBack: false,\n        },\n        { value: '4', label: 'Active Step' },\n        { value: '5', label: 'Disabled Step', disabled: true },\n        { value: '6', label: 'Step with error', error: true },\n      ]}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Stepper/Stepper.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=70173-98742",keywords:["stepper","wizard","steps","progress","flow"]},{name:"StyledMenuItem",modulePath:"components/StyledMenuItem",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"StyledMenuItem",specifier:"@corva/ui/components",exportName:"StyledMenuItem"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/StyledMenuItem/index.js",keywords:["styledmenuitem"]},{name:"SwitchControl",modulePath:"components/SwitchControl/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"SwitchControl",specifier:"@corva/ui/components",exportName:"SwitchControl"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"SwitchControlComponent"},examples:[{name:"Default",description:"",code:"{\n  const [checked, setChecked] = useState(false);\n\n  return (\n    <SwitchControl\n      {...props}\n      checked={checked}\n      onChange={(_, value) => {\n        props.onChange?.(_, value);\n        setChecked(value);\n      }}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/SwitchControl/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9699%3A2848&mode=dev",keywords:["switchcontrol"]},{name:"Table",modulePath:"components/Table/Table/Table",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Table",specifier:"@corva/ui/components",exportName:"Table"},category:"v1",description:"`<TableHead />`, `<TableBody />`, and `<TableRow />` are direct reexports from MUI, with same API. You can read more about them here:\n\n- [TableHead](https://v4.mui.com/api/table-head/)\n- [TableBody](https://v4.mui.com/api/table-body/)\n- [TableRow](https://v4.mui.com/api/table-row/)\n",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"The content of the table, normally TableHead and TableBody."}],propsList:{kind:"partial",undescended:["Omit<MuiTableProps, 'children'>"]},examples:[{name:"Default",description:"",code:"<Table {...props}>\n    <TableHead>\n      <TableRow>\n        <TableCell width={300} />\n        <TableCell width=\"20%\">Rick Astley</TableCell>\n        <TableCell>Other people</TableCell>\n      </TableRow>\n    </TableHead>\n\n    <TableBody>\n      <TableRow>\n        <TableCell>gonna give you up</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow>\n        <TableCell>gonna let you down</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow>\n        <TableCell>gonna run around and desert you</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow>\n        <TableCell>gonna make you cry</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow>\n        <TableCell>gonna say goodbye</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow>\n        <TableCell>gonna tell a lie and hurt you</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>"},{name:"StickyHeader",description:"To make `stickyHeader` work with `<TableContainer />`, is must have a fixed height.\n\nYou can pass `shadowColor` prop to control shadow colour. The prop accepts either background colour names (`B1 | B2 ... B11`), or a colour in any notation (`#FF0000`, `rgb(255, 0, 0)`, `red`, etc).",code:"{\n  const styles = makeStyles({ root: { height: 300 } })();\n\n  const content = (\n    <Table stickyHeader>\n      <TableHead>\n        <TableRow>\n          <TableCell width={300} />\n          <TableCell width=\"20%\">Rick Astley</TableCell>\n          <TableCell>Other people</TableCell>\n        </TableRow>\n      </TableHead>\n\n      <TableBody>\n        <TableRow>\n          <TableCell>gonna give you up</TableCell>\n          <TableCell>Never</TableCell>\n          <TableCell>Sometimes</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell>gonna let you down</TableCell>\n          <TableCell>Never</TableCell>\n          <TableCell>Sometimes</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell>gonna run around and desert you</TableCell>\n          <TableCell>Never</TableCell>\n          <TableCell>Sometimes</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell>gonna make you cry</TableCell>\n          <TableCell>Never</TableCell>\n          <TableCell>Sometimes</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell>gonna say goodbye</TableCell>\n          <TableCell>Never</TableCell>\n          <TableCell>Sometimes</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell>gonna tell a lie and hurt you</TableCell>\n          <TableCell>Never</TableCell>\n          <TableCell>Sometimes</TableCell>\n        </TableRow>\n      </TableBody>\n    </Table>\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <TableContainer stickyHeader className={styles.root} shadowColor=\"B5\">\n        {content}\n      </TableContainer>\n\n      <TableContainer stickyHeader className={styles.root} shadowColor=\"#ff0000\">\n        {content}\n      </TableContainer>\n    </SbColumn>\n  );\n}"},{name:"WithStickyColumnHeaders",description:"`<TableContainer />` gives an ability to have column headers \"stick\" while scrolling: use the `stickyColumn` prop",code:"{\n  const styles = makeStyles({\n    root: { height: 300, width: '100%' },\n    table: { width: '200%' },\n  })();\n\n  return (\n    <TableContainer stickyHeader stickyColumn className={styles.root}>\n      <Table stickyHeader className={styles.table}>\n        <TableHead>\n          <TableRow>\n            <TableCell width={300}>What?</TableCell>\n            <TableCell width={300}>Will he?</TableCell>\n            <TableCell width={300}>Will other people?</TableCell>\n          </TableRow>\n        </TableHead>\n\n        <TableBody>\n          <TableRow>\n            <TableCell>gonna give you up</TableCell>\n            <TableCell>Never</TableCell>\n            <TableCell>Sometimes</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell>gonna let you down</TableCell>\n            <TableCell>Never</TableCell>\n            <TableCell>Sometimes</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell>gonna run around and desert you</TableCell>\n            <TableCell>Never</TableCell>\n            <TableCell>Sometimes</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell>gonna make you cry</TableCell>\n            <TableCell>Never</TableCell>\n            <TableCell>Sometimes</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell>gonna say goodbye</TableCell>\n            <TableCell>Never</TableCell>\n            <TableCell>Sometimes</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell>gonna tell a lie and hurt you</TableCell>\n            <TableCell>Never</TableCell>\n            <TableCell>Sometimes</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </TableContainer>\n  );\n}"},{name:"RowStates",description:"",code:"<Table {...props}>\n    <TableHead>\n      <TableRow>\n        <TableCell width={300} />\n        <TableCell width=\"20%\">Rick Astley</TableCell>\n        <TableCell>Other people</TableCell>\n      </TableRow>\n    </TableHead>\n\n    <TableBody>\n      <TableRow hover selected>\n        <TableCell>gonna give you up</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow hover>\n        <TableCell>gonna let you down</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow hover>\n        <TableCell>gonna run around and desert you</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow hover>\n        <TableCell>gonna make you cry</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow hover>\n        <TableCell>gonna say goodbye</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n      <TableRow hover>\n        <TableCell>gonna tell a lie and hurt you</TableCell>\n        <TableCell>Never</TableCell>\n        <TableCell>Sometimes</TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Table/Table/Table.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A43261&mode=dev",keywords:["table","data","grid","list","rows","columns","tablehead","tablebody","tablerow","direct","reexports","same","read","more","about","them"]},{name:"Tabs",modulePath:"components/Tabs",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Tabs",specifier:"@corva/ui/components",exportName:"Tabs"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Contents of the component, for instance - `<Tab/>`s"},{name:"onChange",type:"(event: ChangeEvent, value: any) => void",required:false,description:""},{name:"compact",type:"boolean",required:false,description:""},{name:"type",type:"'default' | 'filled' | 'filledTab'",required:false,description:"",enumValues:["default","filled","filledTab"]},{name:"TabIndicatorProps",type:"Partial<React.HTMLAttributes<HTMLDivElement>> & {\n    classes: {\n      root: string;\n    };\n  }",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit< MuiTabsProps, 'type' | 'TabIndicatorProps' | 'onChange' | 'children' >"]},examples:[{name:"Default",description:"",code:"{\n  const [activeTab, setActiveTab] = useState(0);\n  return (\n    <Tabs\n      {...props}\n      value={activeTab}\n      onChange={(event, value) => {\n        props.onChange?.(event, value);\n        setActiveTab(value);\n      }}\n    >\n      {options.map(({ id, name }) => (\n        <Tab key={id} label={name} />\n      ))}\n    </Tabs>\n  );\n}"},{name:"TabsWithValue",description:"`<Tab />`s can have `value` prop, which will be passed to `onChange` as a second argument, and should be passed to `value` prop to mark corresponding tab as active",code:"{\n  const [activeTab, setActiveTab] = useState('Hastur');\n\n  return (\n    <>\n      <Tabs onChange={(_, value) => setActiveTab(value)} value={activeTab}>\n        {options.slice(0, 3).map(({ id, name }) => (\n          <Tab key={id} label={name} value={name} />\n        ))}\n      </Tabs>\n      <br />\n      Selected: {activeTab}\n    </>\n  );\n}"},{name:"WithDisabledTabs",description:"You can disable a tab by using its `disabled` prop. You can control tooltip's props with `DisabledTooltipProps` prop",code:"{\n  const [activeTab, setActiveTab] = useState(0);\n\n  return (\n    <SbColumn>\n      <Tabs type=\"default\" onChange={(_, value) => setActiveTab(value)} value={activeTab}>\n        <Tab\n          label=\"Hastur\"\n          disabled\n          DisabledTooltipProps={{ title: '\"Hastur\" tab is disabled because of reasons' }}\n        />\n        <Tab label=\"Chtulhu\" disabled />\n      </Tabs>\n      <Tabs type=\"filledTab\" onChange={(_, value) => setActiveTab(value)} value={activeTab}>\n        <Tab\n          label=\"Hastur\"\n          disabled\n          DisabledTooltipProps={{ title: '\"Hastur\" tab is disabled because of reasons' }}\n        />\n        <Tab label=\"Chtulhu\" disabled />\n      </Tabs>\n      <Tabs type=\"filled\" onChange={(_, value) => setActiveTab(value)} value={activeTab}>\n        <Tab\n          label=\"Hastur\"\n          disabled\n          DisabledTooltipProps={{ title: '\"Hastur\" tab is disabled because of reasons' }}\n        />\n        <Tab label=\"Chtulhu\" disabled />\n      </Tabs>\n    </SbColumn>\n  );\n}"},{name:"VerticalTabs",description:"Component supports vertical orientation. Use the `orientation` prop",code:"{\n  const [activeTab, setActiveTab] = useState(0);\n  return (\n    <div style={{ width: '200px' }}>\n      <Tabs onChange={(_, value) => setActiveTab(value)} value={activeTab} orientation=\"vertical\">\n        {options.map(({ id, name }) => (\n          <Tab key={id} label={name} />\n        ))}\n      </Tabs>\n    </div>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Tabs/Tabs.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9597%3A17644",keywords:["tabs","navigation","sections","panels","switch"]},{name:"TextField",modulePath:"components/TextField",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TextField",specifier:"@corva/ui/components",exportName:"TextField"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"value",type:"string | number | null | undefined",required:true,description:""},{name:"onChange",type:"ChangeEventHandler<HTMLInputElement>",required:false,description:""},{name:"startIcon",type:"React.ReactNode",required:false,description:""},{name:"endIcon",type:"React.ReactNode",required:false,description:""},{name:"InputProps",type:"MuiTextFieldProps['InputProps'] & { startAdornment?: React.ReactNode }",required:false,description:""},{name:"InputLabelProps",type:"MuiTextFieldProps['InputLabelProps'] & { startAdornment?: React.ReactNode }",required:false,description:""},{name:"onFocus",type:"FocusEventHandler<HTMLInputElement>",required:false,description:""},{name:"onBlur",type:"FocusEventHandler<HTMLInputElement>",required:false,description:""},{name:"endAdornment",type:"React.ReactNode",required:false,description:""},{name:"startAdornment",type:"React.ReactNode",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit< MuiTextFieldProps, | 'value' | 'startIcon' | 'endIcon' | 'InputProps' | 'InputLabelProps' | 'onFocus' | 'onBlur' | 'endAdornment' | 'startAdornment' | 'onChange' | 'classes' >"]},examples:[{name:"Default",description:"",code:"<TextField {...props} />"},{name:"Sizes",description:"Component supports 2 sizes, controlled through `size` prop:\n\n- `medium` (default)\n- `small`",code:"<SbColumn>\n    <TextField value=\"medium\" size=\"medium\" />\n    <TextField value=\"small\" size=\"small\" />\n  </SbColumn>"},{name:"WithLabelAndPlaceholder",description:"You can add placeholder to input through `placeholder` prop.\n\nPlease note, placeholder is visible only if there is no label or the field is focused",code:"<SbColumn>\n    <TextField placeholder=\"Placeholder\" value=\"\" />\n    <TextField label=\"Label\" placeholder=\"Placeholder\" value=\"\" />\n  </SbColumn>"},{name:"ErrorState",description:"Component supports \"error\" state, turned on by `error` prop. To add error description, use the `helperText` prop",code:"{\n  const [value, setValue] = useState('some text here');\n  return (\n    <TextField\n      label=\"Label\"\n      placeholder=\"Placeholder\"\n      value={value}\n      onChange={e => setValue(e.target.value)}\n      error\n      helperText=\"I am error text\"\n    />\n  );\n}"},{name:"PrefixesAndSuffixes",description:"You can add prefix and/or suffix through `startIcon` and `endIcon` props, respectively.",code:"<SbColumn>\n    <TextField\n      label=\"Label\"\n      placeholder=\"Placeholder\"\n      value=\"\"\n      startIcon={<ActivitySourceIcon size={16} />}\n    />\n    <TextField\n      label=\"Label\"\n      placeholder=\"Placeholder\"\n      value=\"\"\n      endIcon={<ActivitySourceIcon size={16} />}\n    />\n    <TextField\n      label=\"Label\"\n      placeholder=\"Placeholder\"\n      value=\"\"\n      startIcon={<ActivitySourceIcon size={16} />}\n      endIcon={<ActivitySourceIcon size={16} />}\n    />\n    <TextField\n      label=\"Label\"\n      placeholder=\"Placeholder\"\n      value=\"\"\n      startIcon=\"string prefix\"\n      endIcon=\"string suffix\"\n    />\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/TextField/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A7777",keywords:["textfield","form","input","text","field","entry"]},{name:"TextLink",modulePath:"components/TextLink",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TextLink",specifier:"@corva/ui/components",exportName:"TextLink"},category:"v1",description:"A simple text link. Has almost the same API as an `a` tag.\n\nBy default opens a link in a new tab, so you need to explicitly set `target=\"_self\"` to open your link in the current tab",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"Component's content"},{name:"href",type:"string",required:true,description:""},{name:"className",type:"string",required:false,description:""},{name:"color",type:"string",required:false,description:""},{name:"target",type:"'_self' | '_blank'",required:false,description:"",enumValues:["_self","_blank"]},{name:"disabled",type:"boolean",required:false,description:""},{name:"showTooltip",type:"boolean",required:false,description:""},{name:"tooltipText",type:"string",required:false,description:"Uses `href` if empty"},{name:"TooltipProps",type:"Omit<TooltipProps, 'children' | 'title'> & { title?: TooltipProps['title'] }",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<TextLink {...props} />"},{name:"WithTooltip",description:"You can show the tooltip using the `showTooltip` prop. The text is link's `href` by default, but you can change the tooltip text with `tooltipText` prop.\n\nWhen using `tooltipText`, you can omit the `showTooltip`",code:"<SbColumn>\n    <TextLink href=\"https://lovecraft.fandom.com/wiki/Church_of_Starry_Wisdom\" showTooltip>\n      Link\n    </TextLink>\n    <TextLink\n      href=\"https://lovecraft.fandom.com/wiki/Church_of_Starry_Wisdom\"\n      tooltipText=\"Church Of Starry Wisdom\"\n      showTooltip\n    >\n      Link\n    </TextLink>\n    <TextLink\n      href=\"https://lovecraft.fandom.com/wiki/Church_of_Starry_Wisdom\"\n      tooltipText=\"Church Of Starry Wisdom\"\n    >\n      Link\n    </TextLink>\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/TextLink/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9694%3A126",keywords:["textlink","link","anchor","hyperlink","navigate","url","simple","text","almost","same","default","opens","need","explicitly","target"]},{name:"Toaster",modulePath:"components/Toaster",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"Toaster",specifier:"@corva/ui/components/Toaster/Toaster",form:"named",exportName:"Toaster"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onDismiss",type:"() => void",required:true,description:""}],propsList:{kind:"partial",undescended:["ToasterType"]},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Toaster/Toaster.tsx",keywords:["toaster"]},{name:"Tooltip",modulePath:"components/Tooltip",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Tooltip",specifier:"@corva/ui/components",exportName:"Tooltip"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"title",type:"ReactNode",required:true,description:"Tooltip title. Zero-length titles string are never displayed."},{name:"children",type:"ReactElement",required:true,description:"Element to position a tooltip to.\n\n⚠️ Has to be a *single* reffable child (use `forwardRef` for custom components)"},{name:"isFullScreen",type:"boolean",required:false,description:""},{name:"disableFocusListener",type:"boolean",required:false,description:""},{name:"disableHoverListener",type:"boolean",required:false,description:"Do not respond to hover events."},{name:"disableTouchListener",type:"boolean",required:false,description:"Do not respond to long press touch events."},{name:"enterDelay",type:"number",required:false,description:"The number of milliseconds to wait before showing the tooltip.\nThis prop won't impact the enter touch delay (`enterTouchDelay`)."},{name:"enterNextDelay",type:"number",required:false,description:"The number of milliseconds to wait before showing the tooltip when one was already recently opened."},{name:"enterTouchDelay",type:"number",required:false,description:"The number of milliseconds a user must touch the element before showing the tooltip."},{name:"id",type:"string",required:false,description:"This prop is used to help implement the accessibility logic.\nIf you don't provide this prop. It falls back to a randomly generated id."},{name:"interactive",type:"boolean",required:false,description:"Makes a tooltip interactive, i.e. will not close when the user\nhovers over the tooltip before the `leaveDelay` is expired."},{name:"leaveDelay",type:"number",required:false,description:"The number of milliseconds to wait before hiding the tooltip.\nThis prop won't impact the leave touch delay (`leaveTouchDelay`)."},{name:"leaveTouchDelay",type:"number",required:false,description:"The number of milliseconds after the user stops touching an element before hiding the tooltip."},{name:"onClose",type:"(event: ChangeEvent<{}>) => void",required:false,description:"Callback fired when the component requests to be closed."},{name:"onOpen",type:"(event: ChangeEvent<{}>) => void",required:false,description:"Callback fired when the component requests to be open."},{name:"open",type:"boolean",required:false,description:"If `true`, the tooltip is shown."},{name:"placement",type:"'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'",required:false,description:"Tooltip placement.",enumValues:["bottom-end","bottom-start","bottom","left-end","left-start","left","right-end","right-start","right","top-end","top-start","top"]},{name:"classes",type:"Record<string, string>",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit< MuiTooltipProps, | 'title' | 'children' | 'disableFocusListener' | 'disableHoverListener' | 'disableTouchListener' | 'enterDelay' | 'enterNextDelay' | 'enterTouchDelay' | 'id' | 'interactive' | 'leaveDelay' | 'leaveTouchDelay' | 'onClose' | 'onOpen' | 'open' | 'placement' | 'classes' >"]},examples:[{name:"Default",description:"",code:"<Tooltip {...props}>\n    <Button>Hover me</Button>\n  </Tooltip>"},{name:"InteractiveTooltip",description:"Use `interactive` prop to make tooltip interactive: i.e. it will not close when the user hovers over the tooltip before the `leaveDelay` is expired.\n\n⚠️ If you're putting control elements into a tooltip, it's recommended to use `Popover` instead",code:"<Tooltip\n    title={\n      <>\n        Some content with a button:\n        <br />\n        <Button onClick={console.log}>Click me!</Button>\n      </>\n    }\n    interactive\n  >\n    <Button>Hover me</Button>\n  </Tooltip>"},{name:"ControlledTooltip",description:"Use `open` prop to control tooltip's state from outside",code:"{\n  const [open, setOpen] = useState(false);\n\n  return (\n    <SbRow alignItems=\"center\">\n      <Button onClick={() => setOpen(value => !value)}>Click to toggle</Button>\n      <Tooltip title=\"Tooltip text\" open={open}>\n        <span>Hover me and nothing happens</span>\n      </Tooltip>\n    </SbRow>\n  );\n}"},{name:"WithLargeContent",description:"Use `ScrollableTooltip` for tooltips with potentially very large content",code:"<ScrollableTooltip title={'Lorem ipsum dolor sit amet. '.repeat(300)} placement=\"left\">\n    <Button>Hover me</Button>\n  </ScrollableTooltip>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Tooltip/Tooltip.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9597%3A19173",keywords:["tooltip","hover","hint","help","info","popup"]},{name:"TracesEditModal",modulePath:"components/TracesEditModal",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"TracesEditModal",specifier:"@corva/ui/components/TracesEditModal/TracesEditModal",form:"default"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/TracesEditModal/TracesEditModal.js",keywords:["traceseditmodal"]},{name:"TruncatedText",modulePath:"components/TruncatedText",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TruncatedText",specifier:"@corva/ui/components",exportName:"TruncatedText"},category:"v1",description:"A wrapper around text to truncate it with an ellipsis. Supports multiline text",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"Text to truncate"},{name:"className",type:"string",required:false,description:""},{name:"maxLines",type:"number | null",required:false,description:""},{name:"showTooltip",type:"boolean",required:false,description:""}],propsList:{kind:"partial",undescended:["DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>"]},examples:[{name:"Default",description:"",code:"<div style={{ width: '400px' }}>\n    <TruncatedText {...props} />\n  </div>"},{name:"MultilineText",description:"You can truncate multiline text by setting `maxLines` to a number of lines desired",code:"{\n  const min = 1;\n  const max = 5;\n  const [lines, setLines] = useState(2);\n  return (\n    <SbColumn>\n      <div style={{ width: '200px' }}>\n        Lines: {lines}\n        <Slider\n          value={lines}\n          onChange={(_, value) => setLines(value instanceof Array ? value[0] : value)}\n          min={min}\n          max={max}\n        />\n      </div>\n      <TruncatedText maxLines={lines}>\n        Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century\n        BC text by the Roman statesman and philosopher Cicero, with words altered, added, and\n        removed to make it nonsensical and improper Latin.\n      </TruncatedText>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/TruncatedText/index.tsx",keywords:["truncatedtext","wrapper","around","text","truncate","ellipsis","supports","multiline"]},{name:"UserCard",modulePath:"components/UserCard",importPath:"@corva/ui/components",importRecipe:{kind:"deep",componentName:"UserCard",specifier:"@corva/ui/components/UserCard",form:"default"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"user",type:"object",required:true,description:""},{name:"classes",type:"object",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/UserCard/index.js",keywords:["usercard"]},{name:"UserMention",modulePath:"components/UserMention",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"UserMention",specifier:"@corva/ui/components",exportName:"UserMention"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onChange",type:"function",required:false,description:""},{name:"singleLine",type:"boolean",required:false,description:""},{name:"suggestionsPortalHost",type:"object",required:false,description:""},{name:"value",type:"string",required:false,description:""},{name:"inputRef",type:"object",required:false,description:""},{name:"classes",type:"object",required:false,description:""},{name:"withLightTheme",type:"boolean",required:false,description:""},{name:"placeholder",type:"string",required:false,description:""},{name:"style",type:"object",required:false,description:""},{name:"mentionProps",type:"object",required:false,description:""},{name:"onMount",type:"function",required:false,description:""},{name:"onKeyDown",type:"function",required:false,description:""},{name:"onKeyUp",type:"function",required:false,description:""},{name:"onFocus",type:"function",required:false,description:""},{name:"onBlur",type:"function",required:false,description:""},{name:"autoFocus",type:"boolean",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""},{name:"companyId",type:"number",required:false,description:""},{name:"allowSuggestionsAboveCursor",type:"boolean",required:false,description:""},{name:"highlightLinks",type:"boolean",required:false,description:""},{name:"allowEmptyQuery",type:"boolean",required:false,description:"Show default users when only \"@\" is typed, instead of waiting for a search term."}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/UserMention/index.js",keywords:["usermention"]},{name:"VirtualizedTable",modulePath:"components/VirtualizedTable/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"VirtualizedTable",specifier:"@corva/ui/components",exportName:"VirtualizedTable"},category:"v1",description:"Virtualized table.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"VTableComponent"},examples:[{name:"Default",description:"",code:"<div style={{ height: '200px' }}>\n    <VirtualizedTable {...props} />\n  </div>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/VirtualizedTable/index.tsx",keywords:["virtualizedtable","virtualized","table"]},{name:"AddCommentPopover",modulePath:"components/AddComment/Popover",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AddCommentPopover",specifier:"@corva/ui/components",exportName:"AddCommentPopover"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onClose",type:"custom",required:false,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"anchorEl",type:"ReactNode",required:true,description:""},{name:"anchorOrigin",type:"custom",required:false,description:""},{name:"startAdornment",type:"custom",required:false,description:""},{name:"endAdornment",type:"custom",required:false,description:""},{name:"customContent",type:"custom",required:false,description:""},{name:"userCompanyId",type:"number",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AddComment/Popover.js",keywords:["addcommentpopover"]},{name:"AddCommentPopup",modulePath:"components/AddComment/Popup",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AddCommentPopup",specifier:"@corva/ui/components",exportName:"AddCommentPopup"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onClose",type:"custom",required:false,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"isProcessing",type:"custom",required:false,description:""},{name:"isSaveDisabled",type:"custom",required:false,description:""},{name:"startAdornment",type:"custom",required:false,description:""},{name:"endAdornment",type:"custom",required:false,description:""},{name:"actionsAdornment",type:"custom",required:false,description:""},{name:"customContent",type:"custom",required:false,description:""},{name:"userCompanyId",type:"number",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AddComment/Popup.js",keywords:["addcommentpopup"]},{name:"AddEditTrack",modulePath:"components/ParameterCharts/AddEditTrack",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AddEditTrack",specifier:"@corva/ui/components",exportName:"AddEditTrack"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"settingsKey",type:"string",required:false,description:""},{name:"multipleAssets",type:"boolean",required:false,description:""},{name:"settings",type:"object",required:false,description:""},{name:"onSettingsChange",type:"function",required:true,description:""},{name:"children",type:"ReactElement",required:true,description:""},{name:"id",type:"string",required:false,description:""},{name:"mapping",type:"array",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ParameterCharts/AddEditTrack.js",keywords:["addedittrack"]},{name:"AnnotationsList",modulePath:"components/Annotations/components/AnnotationsList/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AnnotationsList",specifier:"@corva/ui/components",exportName:"AnnotationsList"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"appId",type:"number",required:true,description:""},{name:"appTitle",type:"string",required:true,description:""},{name:"assetId",type:"number",required:true,description:""},{name:"assetCompanyId",type:"number",required:true,description:""},{name:"appSettings",type:"object",required:false,description:""},{name:"classes",type:"object",required:false,description:""},{name:"onClose",type:"function",required:true,description:""},{name:"currentUser",type:"object",required:true,description:""},{name:"isNative",type:"custom",required:false,description:""},{name:"dashboardType",type:"custom",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Annotations/components/AnnotationsList/index.js",keywords:["annotationslist"]},{name:"AnnotationsProvider",modulePath:"components/Annotations/AnnotationsContext",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AnnotationsProvider",specifier:"@corva/ui/components",exportName:"AnnotationsProvider"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Annotations/AnnotationsContext.js",keywords:["annotationsprovider"]},{name:"AppContext",modulePath:"components/DevCenter/AppContext",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppContext",specifier:"@corva/ui/components",exportName:"AppContext"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/AppContext.js",keywords:["appcontext"]},{name:"AppFilterPanelLayout",modulePath:"components/DevCenter/AppFilterPanelLayout/AppFilterPanelLayout",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppFilterPanelLayout",specifier:"@corva/ui/components",exportName:"AppFilterPanelLayout"},category:"v1",description:"Used to add app settings and/or filters as a sidebar",isExperimental:false,isDeprecated:false,props:[{name:"sideBarContent",type:"ReactNode",required:true,description:""},{name:"appSettingsPopoverProps",type:"Omit<AppSettingsPopoverProps, 'children' | 'classes'>",required:false,description:""},{name:"children",type:"ReactNode",required:false,description:""},{name:"classes",type:"{\n    appLayout?: string;\n    content?: string;\n    contentWrapper?: string;\n    header?: string;\n  }",required:false,description:""},{name:"header",type:"ReactNode",required:false,description:""},{name:"sideBarProps",type:"Omit<AppSideBarProps, 'anchor'>",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <Wrapper omitId>\n      <AppFilterPanelLayout\n        sideBarProps={{\n          isOpen,\n          setIsOpen,\n          header: 'Sidebar',\n          headerIcon: <CenterAlignmentIcon size={24} />,\n          onAllOptionsClick: console.log,\n        }}\n        appSettingsPopoverProps={{\n          defaultScrollable: true,\n          maxHeight: 480,\n        }}\n        {...props}\n      />\n    </Wrapper>\n  );\n}"},{name:"Tablet",description:"Component has a different look if it detects it's displayed on mobile, or in a narrow container. \nTo determine its container size, the component relies on a wrapper `#isolated-page-app-container`",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <Wrapper>\n      <AppFilterPanelLayout\n        sideBarProps={{\n          isOpen,\n          setIsOpen,\n          header: 'Sidebar',\n          headerIcon: <CenterAlignmentIcon size={24} />,\n          onAllOptionsClick: console.log,\n        }}\n        appSettingsPopoverProps={{\n          defaultScrollable: true,\n          maxHeight: 480,\n        }}\n        sideBarContent=\"Sidebar Content\"\n        header=\"Header content\"\n        children=\"Children\"\n      />\n    </Wrapper>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/AppFilterPanelLayout/AppFilterPanelLayout.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=16962%3A72580&mode=dev",keywords:["appfilterpanellayout","used","settings","filters","sidebar"]},{name:"AppHeader",modulePath:"components/DevCenter/AppHeader/AppHeader",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppHeader",specifier:"@corva/ui/components",exportName:"AppHeader"},category:"v1",description:"Use as a header for the application, can contain asset, and other information",isExperimental:false,isDeprecated:false,props:[{name:"app",type:"object",required:true,description:""},{name:"badge",type:"ReactNode",required:false,description:""},{name:"classes",type:"object",required:false,description:""},{name:"showLastAnnotation",type:"boolean",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""},{name:"appLastAnnotation",type:"object",required:false,description:""},{name:"updateCurrentDashboardAppLastAnnotation",type:"function",required:false,description:""},{name:"openAnnotationsList",type:"function",required:false,description:""},{name:"rig",type:"object",required:false,description:""},{name:"well",type:"object",required:false,description:""},{name:"fracFleet",type:"object",required:false,description:""},{name:"wells",type:"array",required:false,description:""},{name:"coordinates",type:"object",required:false,description:""},{name:"isMaximized",type:"boolean",required:false,description:""},{name:"appSettings",type:"object",required:false,description:""},{name:"onSettingChange",type:"function",required:false,description:""},{name:"children",type:"ReactNode",required:false,description:""},{name:"logoSrc",type:"string",required:false,description:""},{name:"primaryAssetStatusBadge",type:"ReactNode",required:false,description:""},{name:"PadModeComponent",type:"elementType",required:false,description:""},{name:"activeWellName",type:"string",required:false,description:""},{name:"rightSideContent",type:"ReactNode",required:false,description:""}],propsList:{kind:"unjudged"},examples:[{name:"Default",description:"",code:"<AppHeader {...props} />"},{name:"WithFracFleet",description:"",code:"<AppHeader\n    onSettingChange={console.log}\n    coordinates={{ pixelWidth: 1024 }}\n    app={{\n      package: {\n        manifest: {\n          application: {\n            name: 'App name',\n            segments: [SEGMENTS.COMPLETION],\n          },\n        },\n        version: '1.0.0',\n      },\n      settings: { fracFleetId: 'frac fleet id', padId: 42 },\n    }}\n    appSettings={{ fracFleetId: 'frac fleet id' }}\n    fracFleet={{\n      name: 'Frac Fleet name',\n      current_pad_id: 43,\n      pad_frac_fleets: [{ pad: { id: 42 } }],\n    }}\n  />"},{name:"WithPad",description:"",code:"<AppHeader\n    onSettingChange={console.log}\n    coordinates={{ pixelWidth: 1024 }}\n    app={{\n      package: {\n        manifest: {\n          application: {\n            name: 'App name',\n            segments: [SEGMENTS.COMPLETION],\n          },\n        },\n        version: '1.0.0',\n      },\n      settings: { fracFleetId: 'frac fleet id', padId: 42 },\n    }}\n    fracFleet={{\n      name: 'Frac Fleet name',\n      current_pad_id: 42,\n      pad_frac_fleets: [{ pad: { id: 42 } }],\n    }}\n    wells={[]}\n    appSettings={{ fracFleetId: 'frac fleet id' }}\n  />"},{name:"NoLabelNoWell",description:"",code:"<AppHeader\n    onSettingChange={console.log}\n    coordinates={{ pixelWidth: 1024 }}\n    app={{\n      package: {\n        manifest: {\n          application: {\n            name: 'App name',\n            segments: [SEGMENTS.DRILLING],\n          },\n        },\n        version: '1.0.0',\n      },\n      settings: { rigId: 'rig id' },\n    }}\n    rig={{ name: 'Rig name' }}\n  >\n    <OffsetWellButton onExpand={() => {}} expanded={false} wells={[]} onClick={() => {}} />\n  </AppHeader>"},{name:"WithLogo",description:"",code:"<AppHeader\n    onSettingChange={console.log}\n    coordinates={{ pixelWidth: 1024 }}\n    app={{\n      package: {\n        manifest: {\n          application: {\n            name: 'App name',\n            segments: [SEGMENTS.DRILLING],\n          },\n        },\n        version: '1.0.0',\n      },\n      settings: { rigId: 'rig id' },\n    }}\n    rig={{ name: 'Rig name' }}\n    logoSrc=\"https://upload.wikimedia.org/wikipedia/commons/1/18/Exxon_Mobil_Logo.svg\"\n  >\n    <OffsetWellButton onExpand={() => {}} expanded={false} wells={[]} onClick={() => {}} />\n  </AppHeader>"},{name:"WithLabel",description:"",code:"<AppHeader\n    onSettingChange={console.log}\n    coordinates={{ pixelWidth: 1024 }}\n    app={{\n      package: {\n        manifest: {\n          application: {\n            name: 'App name',\n            segments: [SEGMENTS.COMPLETION],\n          },\n        },\n        version: '1.0.0',\n        label: 'PROD',\n      },\n      settings: { wellId: 'well id' },\n    }}\n    rig={{ name: 'Rig name' }}\n    well={{ name: 'Well name' }}\n  >\n    <OffsetWellButton onExpand={() => {}} expanded={false} wells={[]} onClick={() => {}} />\n  </AppHeader>"},{name:"WithBetaLabel",description:"",code:"<AppHeader\n    onSettingChange={console.log}\n    coordinates={{ pixelWidth: 1024 }}\n    app={{\n      package: {\n        manifest: {\n          application: {\n            name: 'App name',\n            segments: [SEGMENTS.COMPLETION],\n          },\n        },\n        version: '1.0.0',\n        label: 'Beta',\n      },\n      settings: {},\n    }}\n    well={{ name: 'Well name', asset_id: 4200 }}\n  />"},{name:"WithWellStatusBadge",description:"",code:"<AppHeader\n    onSettingChange={console.log}\n    coordinates={{ pixelWidth: 1024 }}\n    app={{\n      package: {\n        manifest: {\n          application: {\n            name: 'App name',\n            segments: [SEGMENTS.COMPLETION],\n          },\n        },\n        version: '1.0.0',\n        label: 'Beta',\n      },\n      settings: {},\n    }}\n    well={{ name: 'Well name', asset_id: 4200 }}\n    primaryAssetStatusBadge={<AssetStatusBadge text=\"frac\" />}\n  />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/AppHeader/AppHeader.js",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?type=design&node-id=20186-86586&t=dpmyoDTafwPDvFsN-0",keywords:["appheader","header","application","contain","asset","other","information"]},{name:"AppsDataProvider",modulePath:"components/DevCenter/AppsDataProvider/AppsDataProvider",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppsDataProvider",specifier:"@corva/ui/components",exportName:"AppsDataProvider"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""},{name:"dashboardAssetId",type:"string",required:false,description:""},{name:"apps",type:"array",required:true,description:""},{name:"dashboardMeta",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/AppsDataProvider/AppsDataProvider.js",keywords:["appsdataprovider"]},{name:"AppSettingsAssetEditor",modulePath:"components/AssetEditor/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppSettingsAssetEditor",specifier:"@corva/ui/components",exportName:"AppSettingsAssetEditor"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"settings",type:"object",required:true,description:""},{name:"appType",type:"object",required:true,description:""},{name:"defaultValue",type:"any",required:false,description:""},{name:"onSettingsChange",type:"function",required:true,description:""},{name:"label",type:"string",required:false,description:""},{name:"isNullable",type:"boolean",required:false,description:""},{name:"appKey",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetEditor/index.js",keywords:["appsettingsasseteditor"]},{name:"AppSettingsAssetEditorV2",modulePath:"components/AssetEditorV2/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppSettingsAssetEditorV2",specifier:"@corva/ui/components",exportName:"AppSettingsAssetEditorV2"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"assetsLimit",type:"number",required:false,description:""},{name:"settings",type:"object",required:true,description:""},{name:"appType",type:"object",required:true,description:""},{name:"defaultValue",type:"any",required:false,description:""},{name:"secondaryDefaultValue",type:"any",required:false,description:""},{name:"onSettingsChange",type:"function",required:true,description:""},{name:"label",type:"string",required:false,description:""},{name:"isNullable",type:"boolean",required:false,description:""},{name:"isHiddenTitle",type:"boolean",required:false,description:""},{name:"appKey",type:"string",required:false,description:""},{name:"isVisibleMultipleAssetsToggle",type:"boolean",required:false,description:""},{name:"isDisabledSecondaryAssetSelect",type:"boolean",required:false,description:""},{name:"primaryAssetFields",type:"array",required:false,description:""},{name:"secondaryAssetFields",type:"array",required:false,description:""},{name:"secondaryAssetHelpText",type:"union",required:false,description:""},{name:"onChange",type:"function",required:false,description:""},{name:"elementsClassNames",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetEditorV2/index.js",keywords:["appsettingsasseteditorv2"]},{name:"AppSettingsDialog",modulePath:"components/DevCenter/DevCenterAppContainer/components/AppSettingsDialog/AppSettingsDialog",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppSettingsDialog",specifier:"@corva/ui/components",exportName:"AppSettingsDialog"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"AppSettingsComponent",type:"custom",required:false,description:""},{name:"app",type:"object",required:true,description:""},{name:"appData",type:"object",required:true,description:""},{name:"appName",type:"string",required:true,description:""},{name:"currentUser",type:"object",required:true,description:""},{name:"disableAppAssetSelection",type:"custom",required:false,description:""},{name:"isMultiRig",type:"boolean",required:true,description:""},{name:"isSettingsDialogHidden",type:"custom",required:false,description:""},{name:"layoutEnvironment",type:"object",required:false,description:""},{name:"onAppRemove",type:"custom",required:false,description:""},{name:"onCloneDashboard",type:"custom",required:false,description:""},{name:"onSettingsChange",type:"function",required:true,description:""},{name:"toggleAppSettingsDialog",type:"function",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/DevCenterAppContainer/components/AppSettingsDialog/AppSettingsDialog.js",keywords:["appsettingsdialog"]},{name:"AppSettingsPopover",modulePath:"components/DevCenter/AppSettingsPopover/AppSettingsPopover",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppSettingsPopover",specifier:"@corva/ui/components",exportName:"AppSettingsPopover"},category:"v1",description:"Used to display app settings under a dropdown menu for desktop, or modal for mobiles/tablets",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"Popover/Modal content"},{name:"classes",type:"PopoverProps['classes'] & {\n    popoverContent?: string;\n  }",required:false,description:""},{name:"Trigger",type:"((props: { onClick: (event: React.MouseEvent<HTMLElement>) => void; isActive: boolean }) => JSX.Element) | null",required:false,description:""},{name:"open",type:"boolean",required:false,description:""},{name:"defaultScrollable",type:"boolean",required:false,description:""},{name:"header",type:"ReactNode",required:false,description:""},{name:"iconSettingsProps",type:"Omit<IconButtonProps, 'children'>",required:false,description:""},{name:"maxHeight",type:"number | null",required:false,description:""},{name:"modalActions",type:"ReactNode",required:false,description:""},{name:"modalProps",type:"{}",required:false,description:""},{name:"onClose",type:"() => void",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit<PopoverProps, 'classes' | 'children' | 'open'>"]},examples:[{name:"Default",description:"",code:"<AppSettingsPopover {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/AppSettingsPopover/AppSettingsPopover.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=16382%3A40936&mode=dev",keywords:["appsettingspopover","used","display","settings","under","dropdown","menu","desktop","modal","mobiles","tablets"]},{name:"AppSideBar",modulePath:"components/DevCenter/AppSideBar/AppSideBar",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppSideBar",specifier:"@corva/ui/components",exportName:"AppSideBar"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"classes",type:"{\n    contentWrapper?: string;\n    content?: string;\n    header?: string;\n    openToggleContainer?: string;\n  }",required:false,description:""},{name:"anchor",type:"Anchor",required:false,description:""},{name:"children",type:"ReactNode",required:true,description:""},{name:"drawerPaperClassName",type:"string",required:false,description:""},{name:"drawerClassName",type:"string",required:false,description:""},{name:"expandedTooltipTitle",type:"string",required:false,description:""},{name:"collapsedTooltipTitle",type:"string",required:false,description:""},{name:"header",type:"ReactNode",required:false,description:""},{name:"headerIcon",type:"ReactNode",required:false,description:""},{name:"headerTitleIcon",type:"ReactNode",required:false,description:""},{name:"isOpen",type:"boolean",required:false,description:""},{name:"openedDrawerWidth",type:"string | number",required:false,description:""},{name:"setIsOpen",type:"(isOpen: boolean) => void",required:false,description:""},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"allOptionsButtonShown",type:"boolean",required:false,description:""},{name:"isAllOptionsSelected",type:"boolean",required:false,description:""},{name:"onAllOptionsClick",type:"(e: React.MouseEvent) => void",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"AppSideBar",description:"",code:"{\n  const styles = useStyles();\n  const [isOpen, setIsOpen] = useState(false);\n  const [isAllOptionsSelected, setIsAllOptionsSelected] = useState(false);\n\n  const [isChecked, setIsChecked] = useState(false);\n  const onChange = e => {\n    setIsChecked(e.target.checked);\n  };\n\n  const onAllOptionsClick = () => {\n    setIsChecked(!isAllOptionsSelected);\n    setIsAllOptionsSelected(prev => !prev);\n  };\n\n  return (\n    <div className={styles.container} style={{ height }}>\n      <div className={styles.header}>My awesome app</div>\n      <div className={styles.contentWrapper}>\n        {anchor === 'left' && (\n          <AppSideBarComponent\n            size={size}\n            isOpen={isOpen}\n            setIsOpen={setIsOpen}\n            anchor={anchor}\n            header={<span>filter</span>}\n            headerIcon={<CenterAlignmentIcon />}\n            allOptionsButtonShown={allOptionsButtonShown}\n            isAllOptionsSelected={isAllOptionsSelected}\n            onAllOptionsClick={onAllOptionsClick}\n          >\n            <div className={styles.scrollableContent}>\n              <div>\n                <SwitchControl\n                  title=\"Switch Control with two labels\"\n                  leftLabel=\"Left\"\n                  rightLabel=\"Right\"\n                  color=\"primary\"\n                  checked={isChecked}\n                  onChange={onChange}\n                />\n                <SwitchControl\n                  title=\"Switch Control with two labels\"\n                  rightLabel=\"Right\"\n                  leftLabel=\"Left\"\n                  color=\"primary\"\n                  checked={isChecked}\n                  onChange={onChange}\n                />\n              </div>\n              <div>Scroll start</div>\n              <div>Scroll end</div>\n            </div>\n          </AppSideBarComponent>\n        )}\n        <div className={styles.content}>\n          <div>\n            <p>\n              Edit <code>src/App.js</code> and save to reload.\n              <br />\n              <br />\n            </p>\n          </div>\n        </div>\n        {anchor === 'right' && (\n          <AppSideBarComponent\n            isOpen={isOpen}\n            setIsOpen={setIsOpen}\n            allOptionsButtonShown={allOptionsButtonShown}\n            header={\n              <>\n                <span>filter</span>\n              </>\n            }\n            headerIcon={<CenterAlignmentIcon />}\n            anchor={anchor}\n            size={size}\n          >\n            Not scrollable content\n          </AppSideBarComponent>\n        )}\n      </div>\n    </div>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/AppSideBar/AppSideBar.tsx",keywords:["appsidebar"]},{name:"AppVersionsSelectView",modulePath:"components/AppVersionsSelect/AppVersionsSelect",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AppVersionsSelectView",specifier:"@corva/ui/components",exportName:"AppVersionsSelectView"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AppVersionsSelect/AppVersionsSelect.js",keywords:["appversionsselectview"]},{name:"AssetEditorAutocomplete",modulePath:"components/AssetEditor/AssetEditorAutocomplete",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AssetEditorAutocomplete",specifier:"@corva/ui/components",exportName:"AssetEditorAutocomplete"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"label",type:"string",required:false,description:""},{name:"currentValue",type:"union",required:false,description:""},{name:"isNullable",type:"boolean",required:false,description:""},{name:"onChange",type:"function",required:true,description:""},{name:"classes",type:"object",required:false,description:""},{name:"disableClearable",type:"boolean",required:false,description:""},{name:"parentAssetId",type:"number",required:false,description:""},{name:"parentAssetType",type:"string",required:false,description:""},{name:"companyId",type:"number",required:false,description:""},{name:"assetType",type:"string",required:true,description:""},{name:"errorText",type:"string",required:false,description:""},{name:"data-testid",type:"string",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"isMultiple",type:"boolean",required:false,description:""},{name:"appKey",type:"string",required:false,description:""},{name:"queryParams",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetEditor/AssetEditorAutocomplete.js",keywords:["asseteditorautocomplete"]},{name:"AssetStatusBadge",modulePath:"components/AssetNameLabel/AssetStatusBadge",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"AssetStatusBadge",specifier:"@corva/ui/components",exportName:"AssetStatusBadge"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"text",type:"string",required:true,description:""},{name:"className",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetNameLabel/AssetStatusBadge.tsx",keywords:["assetstatusbadge"]},{name:"BHAComponentDetail",modulePath:"components/Drillstring/BHAComponentDetail/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BHAComponentDetail",specifier:"@corva/ui/components",exportName:"BHAComponentDetail"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"component",type:"object",required:true,description:""},{name:"onDone",type:"function",required:true,description:""},{name:"currentUser",type:"object",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Drillstring/BHAComponentDetail/index.js",keywords:["bhacomponentdetail"]},{name:"BHAComponentIcon",modulePath:"components/Drillstring/BHAComponentIcon",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BHAComponentIcon",specifier:"@corva/ui/components",exportName:"BHAComponentIcon"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"width",type:"number",required:false,description:""},{name:"height",type:"number",required:false,description:""},{name:"component",type:"object",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Drillstring/BHAComponentIcon.js",keywords:["bhacomponenticon"]},{name:"BHAComponentsTable",modulePath:"components/Drillstring/BHAComponentsTable/BHAComponentsTable",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BHAComponentsTable",specifier:"@corva/ui/components",exportName:"BHAComponentsTable"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"isActualBha",type:"boolean",required:true,description:""},{name:"viewColumnsPerRow",type:"enum",required:false,description:""},{name:"editColumnsPerRow",type:"enum",required:false,description:""},{name:"components",type:"array",required:false,description:""},{name:"draftComponent",type:"array",required:false,description:""},{name:"validate",type:"function",required:true,description:""},{name:"onSort",type:"function",required:true,description:""},{name:"onAdd",type:"function",required:true,description:""},{name:"onDelete",type:"function",required:true,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"onCancel",type:"function",required:true,description:""},{name:"isMobile",type:"boolean",required:true,description:""},{name:"onAutocompleteApplied",type:"function",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Drillstring/BHAComponentsTable/BHAComponentsTable.js",keywords:["bhacomponentstable"]},{name:"BHAList",modulePath:"components/Drillstring/BHAList/BHAList",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BHAList",specifier:"@corva/ui/components",exportName:"BHAList"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"isMobile",type:"custom",required:false,description:""},{name:"drillstringsBySection",type:"array",required:false,description:""},{name:"selectedBha",type:"object",required:false,description:""},{name:"isMetricsHidden",type:"custom",required:false,description:""},{name:"onSelectBha",type:"function",required:true,description:""},{name:"contentClassName",type:"custom",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Drillstring/BHAList/BHAList.js",keywords:["bhalist"]},{name:"BHASchematic",modulePath:"components/Drillstring/BHASchematic",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BHASchematic",specifier:"@corva/ui/components",exportName:"BHASchematic"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"containerWidth",type:"number",required:false,description:""},{name:"containerHeight",type:"number",required:false,description:""},{name:"schematic",type:"array",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Drillstring/BHASchematic.js",keywords:["bhaschematic"]},{name:"BHATable",modulePath:"components/Drillstring/BHATable/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BHATable",specifier:"@corva/ui/components",exportName:"BHATable"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"components",type:"array",required:true,description:""},{name:"onSelectComponent",type:"function",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Drillstring/BHATable/index.js",keywords:["bhatable"]},{name:"BHATile",modulePath:"components/Drillstring/BHATile/BHATile",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BHATile",specifier:"@corva/ui/components",exportName:"BHATile"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"drillstring",type:"object",required:false,description:""},{name:"isSelected",type:"custom",required:false,description:""},{name:"onSelect",type:"function",required:true,description:""},{name:"height",type:"custom",required:false,description:""},{name:"isMetricsHidden",type:"custom",required:false,description:""},{name:"isMobile",type:"custom",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Drillstring/BHATile/BHATile.js",keywords:["bhatile"]},{name:"BHATileIcon",modulePath:"components/Drillstring/BHATileIcon",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"BHATileIcon",specifier:"@corva/ui/components",exportName:"BHATileIcon"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"width",type:"string",required:true,description:""},{name:"height",type:"number",required:true,description:""},{name:"component",type:"object",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Drillstring/BHATileIcon.js",keywords:["bhatileicon"]},{name:"CasingComponentIcon",modulePath:"components/Casing/CasingComponentIcon",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CasingComponentIcon",specifier:"@corva/ui/components",exportName:"CasingComponentIcon"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"width",type:"number",required:false,description:""},{name:"height",type:"number",required:false,description:""},{name:"component",type:"object",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Casing/CasingComponentIcon.js",keywords:["casingcomponenticon"]},{name:"CasingTable",modulePath:"components/Casing/CasingTable/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CasingTable",specifier:"@corva/ui/components",exportName:"CasingTable"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"components",type:"array",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Casing/CasingTable/index.js",keywords:["casingtable"]},{name:"CasingTableV2",modulePath:"components/Casing/CasingTableV2/CasingTableV2",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CasingTableV2",specifier:"@corva/ui/components",exportName:"CasingTableV2"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"viewColumnsPerRow",type:"enum",required:false,description:""},{name:"editColumnsPerRow",type:"enum",required:false,description:""},{name:"components",type:"array",required:false,description:""},{name:"draftComponent",type:"array",required:false,description:""},{name:"validate",type:"function",required:true,description:""},{name:"onSort",type:"function",required:true,description:""},{name:"onAdd",type:"function",required:true,description:""},{name:"onDelete",type:"function",required:true,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"onCancel",type:"function",required:true,description:""},{name:"isMobile",type:"boolean",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Casing/CasingTableV2/CasingTableV2.js",keywords:["casingtablev2"]},{name:"CasingTile",modulePath:"components/Casing/CasingTile/CasingTile",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CasingTile",specifier:"@corva/ui/components",exportName:"CasingTile"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"tileData",type:"object",required:false,description:""},{name:"onSelect",type:"function",required:true,description:""},{name:"isMobile",type:"boolean",required:false,description:""},{name:"isMetricsHidden",type:"boolean",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Casing/CasingTile/CasingTile.js",keywords:["casingtile"]},{name:"CasingTileIcon",modulePath:"components/Casing/CasingTileIcon",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CasingTileIcon",specifier:"@corva/ui/components",exportName:"CasingTileIcon"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"width",type:"string",required:true,description:""},{name:"component",type:"object",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Casing/CasingTileIcon.js",keywords:["casingtileicon"]},{name:"CollapsableSidebar",modulePath:"components/CollapsableSidebar",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CollapsableSidebar",specifier:"@corva/ui/components",exportName:"CollapsableSidebar"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""},{name:"onStateChange",type:"function",required:false,description:""},{name:"initialState",type:"boolean",required:false,description:""},{name:"drawerPaperClassName",type:"string",required:false,description:""},{name:"isToolbarGutterShown",type:"boolean",required:false,description:""},{name:"openedDrawerWidth",type:"union",required:false,description:""},{name:"anchor",type:"enum",required:false,description:"",enumValues:["left","right"]},{name:"closedWidth",type:"union",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CollapsableSidebar.js",keywords:["collapsablesidebar"]},{name:"ColorEditor",modulePath:"components/SettingEditors/ColorEditor/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ColorEditor",specifier:"@corva/ui/components",exportName:"ColorEditor"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onChange",type:"(color: string) => void",required:true,description:""},{name:"currentValue",type:"string",required:false,description:""},{name:"defaultValue",type:"string",required:false,description:""},{name:"condensed",type:"boolean",required:false,description:""},{name:"colors",type:"string[]",required:false,description:"Used as swatches for `condensed`"},{name:"lensColor",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ColorEditor {...props} />"},{name:"Condensed",description:"Component can work in \"swatch\" mode through a combination of `condensed` and `colors` props",code:"<ColorEditor\n    currentValue=\"#FF6633\"\n    onChange={onChange}\n    condensed\n    colors={[\n      '#FF6633',\n      '#FFB399',\n      '#FF33FF',\n      '#FFFF99',\n      '#00B3E6',\n      '#E6B333',\n      '#3366E6',\n      '#999966',\n      '#99FF99',\n      '#B34D4D',\n    ]}\n  />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/SettingEditors/ColorEditor/index.tsx",keywords:["coloreditor"]},{name:"CommentIcon",modulePath:"components/Comment/CommentIcon/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CommentIcon",specifier:"@corva/ui/components",exportName:"CommentIcon"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"displayName",type:"string",required:false,description:""},{name:"imgSrc",type:"string",required:false,description:""},{name:"size",type:"number",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<CommentIcon {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Comment/CommentIcon/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=10181%3A9614&mode=dev",keywords:["commenticon"]},{name:"CommentLoader",modulePath:"components/CommentLoader",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"CommentLoader",specifier:"@corva/ui/components",exportName:"CommentLoader"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"showOnMount",type:"boolean",required:false,description:""},{name:"spaceAround",type:"boolean",required:false,description:""},{name:"classes",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/CommentLoader.js",keywords:["commentloader"]},{name:"ComparisonBar",modulePath:"components/StageDesignVActual/ComparisonBar/ComparisonBar",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ComparisonBar",specifier:"@corva/ui/components",exportName:"ComparisonBar"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"designVal",type:"custom",required:false,description:""},{name:"actualVal",type:"custom",required:false,description:""},{name:"isCalcMode",type:"custom",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/StageDesignVActual/ComparisonBar/ComparisonBar.js",keywords:["comparisonbar"]},{name:"ComparisonHeader",modulePath:"components/StageDesignVActual/ComparisonHeader",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ComparisonHeader",specifier:"@corva/ui/components",exportName:"ComparisonHeader"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"renderStages",type:"custom",required:false,description:""},{name:"handleSortClick",type:"custom",required:false,description:""},{name:"renderSortIcon",type:"custom",required:false,description:""},{name:"showBar",type:"custom",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/StageDesignVActual/ComparisonHeader.js",keywords:["comparisonheader"]},{name:"ComparisonRow",modulePath:"components/StageDesignVActual/ComparisonRow",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ComparisonRow",specifier:"@corva/ui/components",exportName:"ComparisonRow"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"rowKey",type:"string",required:true,description:""},{name:"label",type:"custom",required:false,description:""},{name:"elemKey",type:"custom",required:false,description:""},{name:"unitType",type:"custom",required:false,description:""},{name:"elemMax",type:"custom",required:false,description:""},{name:"summaries",type:"custom",required:false,description:""},{name:"showBar",type:"custom",required:false,description:""},{name:"viewMode",type:"custom",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/StageDesignVActual/ComparisonRow.js",keywords:["comparisonrow"]},{name:"ConfirmationDialog",modulePath:"components/ConfirmationDialog",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ConfirmationDialog",specifier:"@corva/ui/components",exportName:"ConfirmationDialog"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"title",type:"string",required:false,description:""},{name:"text",type:"string",required:true,description:""},{name:"confirmationText",type:"string",required:false,description:""},{name:"confirmation",type:"string",required:false,description:""},{name:"handleClose",type:"function",required:false,description:""},{name:"handleOk",type:"function",required:false,description:""},{name:"okText",type:"string",required:false,description:""},{name:"disableOk",type:"boolean",required:false,description:""},{name:"isShowCancel",type:"boolean",required:false,description:""},{name:"classes",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ConfirmationDialog.js",keywords:["confirmationdialog"]},{name:"DevCenterAppContainer",modulePath:"components/DevCenter/DevCenterAppContainer/DevCenterAppContainer",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DevCenterAppContainer",specifier:"@corva/ui/components",exportName:"DevCenterAppContainer"},category:"v1",description:"A wrapper for all DC apps",isExperimental:false,isDeprecated:false,props:[{name:"app",type:"DevCenterAppResource",required:true,description:""},{name:"currentUser",type:"DevCenterCurrentUser",required:true,description:""},{name:"devCenterRouter",type:"DevCenterRouter",required:true,description:"Platform router. Not React Router — the DC shell supplies its own."},{name:"CLIAppComponent",type:"ComponentType<any> | null",required:false,description:"Slots for the CLI app bundle's own components. `any` rather than a narrower prop type on\npurpose: this accepts arbitrary app components, and any narrowing would reject the concretely\ntyped ones consumers pass."},{name:"CLIAppSettings",type:"ComponentType<any> | null",required:false,description:""},{name:"appId",type:"number",required:false,description:"Defaults to `app.id` when omitted."},{name:"className",type:"string | null",required:false,description:""},{name:"chatActions",type:"Record<string, any> | null",required:false,description:"Owned by `corva-web-frontend`'s chat module; forwarded to the app bundle unread."},{name:"coordinates",type:"AppCoordinates | null",required:false,description:""},{name:"currentDashboardAppsLastAnnotations",type:"DashboardAppLastAnnotation[] | null",required:false,description:""},{name:"dashboardMeta",type:"{\n    isMultiAsset?: boolean;\n    isMultiWell?: boolean;\n    isChiplessDashboard?: boolean;\n    globalOffsetWells?: GlobalOffsetWell[];\n    globalOffsetWellsVersion?: number;\n    globalOffsetWellsToken?: number;\n  }",required:false,description:""},{name:"disableAppAssetSelection",type:"boolean",required:false,description:""},{name:"isActionsDisabled",type:"boolean",required:false,description:""},{name:"isNonIsolatedApp",type:"boolean",required:false,description:"[REACT-18-MIGRATION-TAG] PLT-3099: the platform's isolation decision, passed only by the\nin-process branch of DevCenterIsolatedApp; iframe mounts leave it false."},{name:"isSettingsDialogHidden",type:"boolean",required:false,description:""},{name:"layoutEnvironment",type:"LayoutEnvironment | null",required:false,description:""},{name:"onAppContainerClick",type:"() => void",required:false,description:""},{name:"onAppRemove",type:"() => void",required:false,description:""},{name:"onCloneDashboard",type:"() => void",required:false,description:""},{name:"onHelpCenterClick",type:"() => void",required:false,description:""},{name:"onIsMaximizedChange",type:"(isMaximized: boolean) => void",required:false,description:""},{name:"onReportBugClick",type:"(() => void) | null",required:false,description:""},{name:"onSettingChange",type:"(key: string, value: unknown) => void",required:false,description:""},{name:"onSettingsChange",type:"(value: unknown) => void",required:false,description:""},{name:"openIntercom",type:"() => void",required:false,description:""},{name:"registerAITools",type:"any",required:false,description:"`AppToolRegisterFn` from `@corva/fe-ai-tools`, which this package does not depend on."},{name:"reloadApp",type:"() => void",required:false,description:""},{name:"setIsFullscreenModalMode",type:"SetIsFullscreenModalMode",required:false,description:""},{name:"timestamp",type:"number | null",required:false,description:""},{name:"updateCurrentDashboardAppLastAnnotation",type:"UpdateDashboardAppLastAnnotation",required:false,description:""}],propsList:{kind:"partial",undescended:["Partial<FullscreenModes>"]},examples:[{name:"Default",description:"",code:"<div style={{ height: '300px', position: 'relative' }}>\n    <DevCenterAppContainer\n      {...appContainerProps}\n      dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n    />\n  </div>"},{name:"AppCommonsContext",description:"App container provides an app context with general info about app, its maximized state, etc.\n\nYou can use it with `useAppCommons` hook from `/effects`.\n\nContext's type is:\n\n```tsx\nexport type AppCommonsContextType = {\n  maximized: boolean;\n  appId: number;\n  app: App;\n  appKey: string;\n  appSettings: AppSettings;\n  onSettingChange: (key: string, value: unknown) => void;\n\n  well?: Well;\n  rig?: Asset;\n  fracFleet?: FracFleet;\n  wells?: Well[];\n\n  dashboardMeta?: {\n    isMultiAsset?: boolean;\n    isMultiWell?: boolean;\n  };};\n```",code:"{\n  const CliApp = () => {\n    const commons = useAppCommons();\n    return (\n      <div style={{ height: '100%', overflow: 'auto' }}>\n        <Text>App Commons: {JSON.stringify(commons)}</Text>\n      </div>\n    );\n  };\n\n  return (\n    <div style={{ height: '200px', position: 'relative' }}>\n      <DevCenterAppContainer\n        {...appContainerProps}\n        CLIAppComponent={CliApp}\n        dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n      />\n    </div>\n  );\n}"},{name:"UsageWithAppContainer",description:"Use `<AppContainer/>` to place header and footer",code:"{\n  const CliApp = () => {\n    return (\n      <AppContainer\n        header={<AppHeader />}\n        footer={\n          <AppFooter\n            asset={{\n              id: 12345,\n              name: 'Some Asset',\n            }}\n            lastUpdate={Math.ceil(new Date().getTime() / 1000)}\n            showWarning\n          />\n        }\n      >\n        Content\n      </AppContainer>\n    );\n  };\n\n  return (\n    <div style={{ height: '200px', position: 'relative' }}>\n      <DevCenterAppContainer\n        {...appContainerProps}\n        CLIAppComponent={CliApp}\n        dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n      />\n    </div>\n  );\n}"},{name:"CommentsMode",description:"To enable comments in footer, app's manifest needs to have `application.ui.enable_comments` set to true.\n\nYou can read comments mode state using the `useAppCommentsMode` hook from `/effects`.",code:"{\n  const CliApp = () => {\n    const comments = useAppCommentsMode();\n    return <Text>Comments: {comments ? 'enabled' : 'disabled'}</Text>;\n  };\n\n  const appWithComments = structuredClone(appContainerProps.app);\n  appWithComments.package.manifest.application.ui.enable_comments = true;\n\n  const appWithOutComments = structuredClone(appContainerProps.app);\n  appWithOutComments.package.manifest.application.ui.enable_comments = false;\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <div style={{ height: '200px', position: 'relative' }}>\n        <DevCenterAppContainer\n          {...appContainerProps}\n          app={appWithOutComments}\n          CLIAppComponent={CliApp}\n          dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n        />\n      </div>\n      <div style={{ height: '200px', position: 'relative' }}>\n        <DevCenterAppContainer\n          {...appContainerProps}\n          app={appWithComments}\n          CLIAppComponent={CliApp}\n          dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n        />\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AppErrorState",description:"When something goes wrong, app error state is shown. It detects if the app is using the AppHeaderV3 and shows corresponding header",code:"{\n  const appWithHeaderV3 = structuredClone(app) as any;\n  appWithHeaderV3.package.manifest.application.ui.use_app_header_v3 = true;\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <div style={{ height: '400px', position: 'relative' }}>\n        <DevCenterAppContainer\n          {...appContainerProps}\n          CLIAppComponent={undefined}\n          CLIAppSettings={undefined}\n          dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n        />\n      </div>\n      <div style={{ height: '400px', position: 'relative' }}>\n        <DevCenterAppContainer\n          {...appContainerProps}\n          CLIAppComponent={undefined}\n          CLIAppSettings={undefined}\n          dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n          app={appWithHeaderV3}\n        />\n      </div>\n    </SbColumn>\n  );\n}"},{name:"AppCrashedState",description:"When something goes wrong inside an app, app error state is shown. It shows controls regardless of whether an app uses a new header",code:"{\n  const appWithHeaderV3 = structuredClone(app) as any;\n  appWithHeaderV3.package.manifest.application.ui.use_app_header_v3 = true;\n  const AppThatWillCrash = () => {\n    throw 'up';\n  };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <div style={{ height: '400px', position: 'relative' }}>\n        <DevCenterAppContainer\n          {...appContainerProps}\n          CLIAppComponent={AppThatWillCrash}\n          CLIAppSettings={undefined}\n          dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n        />\n      </div>\n      <div style={{ height: '400px', position: 'relative' }}>\n        <DevCenterAppContainer\n          {...appContainerProps}\n          CLIAppComponent={AppThatWillCrash}\n          CLIAppSettings={undefined}\n          dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n          app={appWithHeaderV3}\n        />\n      </div>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/DevCenterAppContainer/DevCenterAppContainer.tsx",keywords:["devcenterappcontainer","wrapper","apps"]},{name:"DevCenterEmbeddedApp",modulePath:"components/EmbeddedApp/DevCenterEmbeddedApp",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DevCenterEmbeddedApp",specifier:"@corva/ui/components",exportName:"DevCenterEmbeddedApp"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"appContainerClassName",type:"string",required:false,description:""},{name:"appId",type:"number",required:false,description:""},{name:"appSize",type:"string",required:false,description:""},{name:"app",type:"object",required:true,description:""},{name:"currentUser",type:"object",required:true,description:""},{name:"coordinates",type:"object",required:false,description:""},{name:"timestamp",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EmbeddedApp/DevCenterEmbeddedApp.js",keywords:["devcenterembeddedapp"]},{name:"DevCenterIsolatedApp",modulePath:"components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DevCenterIsolatedApp",specifier:"@corva/ui/components",exportName:"DevCenterIsolatedApp"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js",keywords:["devcenterisolatedapp"]},{name:"DevCenterIsolatedAppPage",modulePath:"components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedAppPage",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"DevCenterIsolatedAppPage",specifier:"@corva/ui/components",exportName:"DevCenterIsolatedAppPage"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"CLIAppComponent",type:"function",required:false,description:""},{name:"CLIAppSettings",type:"function",required:false,description:""},{name:"containerReportClassName",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedAppPage.js",keywords:["devcenterisolatedapppage"]},{name:"EditableItemWithBadge",modulePath:"components/EditableItem/EditableItemWithBadge/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"EditableItemWithBadge",specifier:"@corva/ui/components",exportName:"EditableItemWithBadge"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"isSelected",type:"boolean",required:false,description:""},{name:"children",type:"ReactNode",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EditableItem/EditableItemWithBadge/index.js",keywords:["editableitemwithbadge"]},{name:"Element",modulePath:"components/SlateFormattedText/RenderElements",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Element",specifier:"@corva/ui/components",exportName:"Element"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/SlateFormattedText/RenderElements.js",keywords:["element"]},{name:"ElementsComparison",modulePath:"components/StageDesignVActual/ElementsComparison/ElementsComparison",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ElementsComparison",specifier:"@corva/ui/components",exportName:"ElementsComparison"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/StageDesignVActual/ElementsComparison/ElementsComparison.js",keywords:["elementscomparison"]},{name:"EmojiIconButton",modulePath:"components/EmojiIconButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"EmojiIconButton",specifier:"@corva/ui/components",exportName:"EmojiIconButton"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"handleSelectEmoji",type:"function",required:true,description:""},{name:"emojiIconClassName",type:"string",required:false,description:""},{name:"disableRipple",type:"boolean",required:false,description:""},{name:"closeOnSelect",type:"boolean",required:false,description:""},{name:"data-testid",type:"string",required:false,description:""},{name:"tooltipProps",type:"object",required:false,description:""},{name:"icon",type:"ReactNode",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EmojiIconButton.js",keywords:["emojiiconbutton"]},{name:"EmptyAppView",modulePath:"components/EmptyView/EmptyAppView/EmptyAppView",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"EmptyAppView",specifier:"@corva/ui/components",exportName:"EmptyAppView"},category:"v1",description:"Component for displaying app's empty/error state.\n\nNeeds to be in a container with fixed height to be visible. Takes 100% height by default and changes its own layout based on its own height on mount",isExperimental:false,isDeprecated:false,props:[{name:"title",type:"ReactNode",required:true,description:""},{name:"actions",type:"ReactNode",required:false,description:""},{name:"app",type:"object",required:false,description:""},{name:"state",type:"EmptyStates",required:false,description:""},{name:"subtitle",type:"ReactNode",required:false,description:""},{name:"withAppHeader",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<div style={wrapperStyles}>\n    <EmptyAppView {...props} />\n  </div>"},{name:"PropertiesState",description:"Component provides its states as its own `EMPTY_STATES` property. Using `EmptyAppView.EMPTY_STATES.*` is preferred to using string literals",code:"<div style={wrapperStyles}>\n    <EmptyAppView title=\"Title\" state={EmptyAppView.EMPTY_STATES.error} />\n  </div>"},{name:"PropertiesMessages",description:"Component provides common error messages as its own `APP_MESSAGES` property\n\n```tsx\ntype AppMessages = Record<\n  | 'appNotSubscribed'\n  | 'appNotSubscribedForAsset'\n  | 'internalAppError'\n  | 'appPackageWasNotFound'\n  | 'fracFleetWasNotFound'\n  | 'fracFleetHasNoPad'\n  | 'padHasNoWells'\n  | 'appComponentWasNotFound'\n  | 'noAssetData'\n  | 'assetNotAvailable',\n  { title: string; subtitle?: string }\n>;```",code:"<div style={wrapperStyles}>\n    <EmptyAppView\n      title={EmptyAppView.APP_MESSAGES.appPackageWasNotFound.title}\n      subtitle={EmptyAppView.APP_MESSAGES.appPackageWasNotFound.subtitle}\n    />\n  </div>"},{name:"Sizes",description:"`EmptyAppView` changes its layout based on its own height. Breakpoints are: `300px` and `400px`",code:"<SbRow>\n    <div style={{ height: '290px', width: 'calc(33% - 20px)' }}>\n      <EmptyAppView title=\"Title\" state={EmptyAppView.EMPTY_STATES.error} />\n    </div>\n    <div style={{ height: '390px', width: 'calc(33% - 20px)' }}>\n      <EmptyAppView title=\"Title\" state={EmptyAppView.EMPTY_STATES.error} />\n    </div>\n    <div style={{ height: '410px', width: 'calc(33% - 20px)' }}>\n      <EmptyAppView title=\"Title\" state={EmptyAppView.EMPTY_STATES.error} />\n    </div>\n  </SbRow>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/EmptyView/EmptyAppView/EmptyAppView.tsx",keywords:["emptyappview","component","displaying","empty","error","state","needs","container","fixed","height","visible"]},{name:"FailedFileUploading",modulePath:"components/FailedFileUploading",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FailedFileUploading",specifier:"@corva/ui/components",exportName:"FailedFileUploading"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"errorMessage",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"classes",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FailedFileUploading.js",keywords:["failedfileuploading"]},{name:"FeedItemContent",modulePath:"components/FeedItem/components/Content",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FeedItemContent",specifier:"@corva/ui/components",exportName:"FeedItemContent"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FeedItem/components/Content.js",keywords:["feeditemcontent"]},{name:"FeedItemEditProvider",modulePath:"components/FeedItem/FeedItemEditProvider/FeedItemEditProvider",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FeedItemEditProvider",specifier:"@corva/ui/components",exportName:"FeedItemEditProvider"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""},{name:"tracesMinDateSec",type:"union",required:false,description:""},{name:"tracesMaxDateSec",type:"union",required:false,description:""},{name:"tracesAssetId",type:"union",required:false,description:""},{name:"exitFunc",type:"function",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FeedItem/FeedItemEditProvider/FeedItemEditProvider.js",keywords:["feeditemeditprovider"]},{name:"FileUploadIconButton",modulePath:"components/FileUploadIconButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"FileUploadIconButton",specifier:"@corva/ui/components",exportName:"FileUploadIconButton"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"additionalFields",type:"array",required:false,description:""},{name:"classes",type:"object",required:false,description:""},{name:"tooltipProps",type:"object",required:false,description:""},{name:"disableRipple",type:"boolean",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"fileUploadIconClassName",type:"string",required:false,description:""},{name:"handleShare",type:"function",required:false,description:""},{name:"inputId",type:"string",required:false,description:""},{name:"message",type:"string",required:false,description:""},{name:"onError",type:"function",required:false,description:""},{name:"onFinish",type:"function",required:false,description:""},{name:"openPreviewDialogOnUpload",type:"boolean",required:false,description:""},{name:"requiredFields",type:"array",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/FileUploadIconButton.js",keywords:["fileuploadiconbutton"]},{name:"GradientManagerWithStorage",modulePath:"components/GradientManager/GradientManagerWithStorage/GradientManagerWithStorage",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"GradientManagerWithStorage",specifier:"@corva/ui/components",exportName:"GradientManagerWithStorage"},category:"v1",description:"Version of `GradientManager` that handles saving and loading gradients in user settings.",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"GradientManagerWithStorage"},examples:[{name:"Default",description:"",code:"{\n  const [gradientId, setGradientId] = useState<Props['gradientId']>();\n\n  return (\n    <GradientManagerWithStorage\n      {...props}\n      onChange={gradient => {\n        props.onChange?.(gradient);\n        setGradientId(gradient.gradientId);\n      }}\n      gradientId={gradientId}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/GradientManager/GradientManagerWithStorage/GradientManagerWithStorage.tsx",keywords:["gradientmanagerwithstorage","version","gradientmanager","handles","saving","loading","gradients","user","settings"]},{name:"KeyboardDateTimePicker",modulePath:"components/KeyboardDateTimePicker",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"KeyboardDateTimePicker",specifier:"@corva/ui/components",exportName:"KeyboardDateTimePicker"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"onChange",type:"function",required:true,description:""},{name:"format",type:"string",required:false,description:""},{name:"label",type:"string",required:false,description:""},{name:"data-testid",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/KeyboardDateTimePicker.js",keywords:["keyboarddatetimepicker"]},{name:"LastAnnotation",modulePath:"components/Annotations/components/LastAnnotation/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"LastAnnotation",specifier:"@corva/ui/components",exportName:"LastAnnotation"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"appId",type:"number",required:true,description:""},{name:"annotation",type:"object",required:true,description:""},{name:"classes",type:"object",required:false,description:""},{name:"isNative",type:"custom",required:false,description:""},{name:"width",type:"string",required:false,description:""},{name:"openAnnotationsList",type:"function",required:true,description:""},{name:"updateCurrentDashboardAppLastAnnotation",type:"custom",required:false,description:""},{name:"currentUser",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Annotations/components/LastAnnotation/index.js",keywords:["lastannotation"]},{name:"Leaf",modulePath:"components/SlateFormattedText/RenderElements",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Leaf",specifier:"@corva/ui/components",exportName:"Leaf"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/SlateFormattedText/RenderElements.js",keywords:["leaf"]},{name:"LiveButton",modulePath:"components/Button/components/LiveButton/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"LiveButton",specifier:"@corva/ui/components",exportName:"LiveButton"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"React.ReactNode",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"lastActiveAt",type:"string",required:false,description:""},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"startIcon",type:"React.ReactNode",required:false,description:""},{name:"state",type:"LiveButtonStateType",required:false,description:""},{name:"tooltipProps",type:"Record<string, any>",required:false,description:""}],propsList:{kind:"partial",undescended:["ButtonProps"]},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Button/components/LiveButton/index.tsx",keywords:["livebutton"]},{name:"LiveButtonState",modulePath:"components/Button/components/LiveButton/constants",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"LiveButtonState",specifier:"@corva/ui/components",exportName:"LiveButtonState"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"LiveButtonState"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Button/components/LiveButton/constants.ts",keywords:["livebuttonstate"]},{name:"MultipleAssetsToggle",modulePath:"components/AssetEditorV2/components/MultipleAssetsToggle",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"MultipleAssetsToggle",specifier:"@corva/ui/components",exportName:"MultipleAssetsToggle"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetEditorV2/components/MultipleAssetsToggle.js",keywords:["multipleassetstoggle"]},{name:"NavigationBar",modulePath:"components/DevCenter/NavigationBar/NavigationBar",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"NavigationBar",specifier:"@corva/ui/components",exportName:"NavigationBar"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""},{name:"appBarClassName",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/NavigationBar/NavigationBar.js",keywords:["navigationbar"]},{name:"NotificationsContainer",modulePath:"components/Notifications/NotificationsContainer",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"NotificationsContainer",specifier:"@corva/ui/components",exportName:"NotificationsContainer"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"NotificationsContainer"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Notifications/NotificationsContainer.tsx",keywords:["notificationscontainer"]},{name:"OffsetWellChip",modulePath:"components/OffsetWellChips/Chip",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"OffsetWellChip",specifier:"@corva/ui/components",exportName:"OffsetWellChip"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"OffsetWellChip"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/OffsetWellChips/Chip.tsx",keywords:["offsetwellchip"]},{name:"OffsetWellChipsContainer",modulePath:"components/OffsetWellChips/ChipsContainer",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"OffsetWellChipsContainer",specifier:"@corva/ui/components",exportName:"OffsetWellChipsContainer"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"OffsetWellChips"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/OffsetWellChips/ChipsContainer.tsx",keywords:["offsetwellchipscontainer"]},{name:"PaletteChromePicker",modulePath:"components/ColorPicker/PaletteChromePicker/PaletteChromePicker",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"PaletteChromePicker",specifier:"@corva/ui/components",exportName:"PaletteChromePicker"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"color",type:"string | RGBA | HSLA | HSVA",required:true,description:""},{name:"onChange",type:"(color: Color) => void",required:true,description:""},{name:"onSizeChange",type:"() => void",required:true,description:""},{name:"enableTransparencyPalette",type:"boolean",required:true,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [color, setColor] = useState<string>(props.color as string);\n\n  return (\n    <PaletteChromePicker\n      {...props}\n      color={color}\n      onChange={(color, ...rest) => {\n        props.onChange?.(color, ...rest);\n        setColor(color.hex);\n      }}\n    />\n  );\n}"},{name:"ColorFormats",description:"`color` prop accepts color in 4 possible types: `string` (HEX value), `RGBA`, `HSLA`, or `HSVA`\n\n```tsx\ntype RGBA = { r: number; g: number; b: number; a: number };\ntype HSLA = { h: number; s: number; l: number; a: number };\ntype HSVA = { h: number; s: number; v: number; a: number };\n```",code:"{\n  const [colorHex, setColorHex] = useState<string>('#FF0000');\n  const [colorRgb, setColorRgb] = useState<RGBA>({ r: 42, g: 0, b: 255, a: 1 });\n  const [colorHsl, setColorHsl] = useState<HSLA>({ h: 120, s: 1, l: 0.5, a: 1 });\n  const [colorHsv, setColorHsv] = useState<HSVA>({ h: 0, s: 1, v: 1, a: 1 });\n\n  return (\n    <SbRow>\n      <SbColumn>\n        HEX\n        <PaletteChromePicker\n          enableTransparencyPalette={false}\n          onSizeChange={() => {}}\n          color={colorHex}\n          onChange={color => setColorHex(color.hex)}\n        />\n        {JSON.stringify(colorHex)}\n      </SbColumn>\n      <SbColumn>\n        RGB\n        <PaletteChromePicker\n          enableTransparencyPalette={false}\n          onSizeChange={() => {}}\n          color={colorRgb}\n          onChange={color => setColorRgb(color.rgb)}\n        />\n        {JSON.stringify(colorRgb)}\n      </SbColumn>\n      <SbColumn>\n        HSL\n        <PaletteChromePicker\n          enableTransparencyPalette={false}\n          onSizeChange={() => {}}\n          color={colorHsl}\n          onChange={color => setColorHsl(color.hsl)}\n        />\n        {JSON.stringify(colorHsl)}\n      </SbColumn>\n      <SbColumn>\n        HSV\n        <PaletteChromePicker\n          enableTransparencyPalette={false}\n          onSizeChange={() => {}}\n          color={colorHsv}\n          onChange={color => setColorHsv(color.hsv)}\n        />\n        {JSON.stringify(colorHsv)}\n      </SbColumn>\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/ColorPicker/PaletteChromePicker/PaletteChromePicker.tsx",keywords:["palettechromepicker"]},{name:"PrimaryAssetSelect",modulePath:"components/AssetEditorV2/components/PrimaryAssetSelect",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"PrimaryAssetSelect",specifier:"@corva/ui/components",exportName:"PrimaryAssetSelect"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"assetFields",type:"array",required:false,description:""},{name:"isSecondaryAssetPresent",type:"boolean",required:false,description:""},{name:"data-testid",type:"string",required:false,description:""},{name:"onInputReset",type:"function",required:false,description:""},{name:"onActiveAssetIdChange",type:"function",required:false,description:""},{name:"placeholder",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetEditorV2/components/PrimaryAssetSelect.js",keywords:["primaryassetselect"]},{name:"RadioEditor",modulePath:"components/SettingEditors/RadioEditor/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"RadioEditor",specifier:"@corva/ui/components",exportName:"RadioEditor"},category:"v1",description:"A block of radio buttons",isExperimental:false,isDeprecated:false,props:[{name:"options",type:"{ value: string | number; label: string }[]",required:true,description:""},{name:"onChange",type:"(value: string | number) => void",required:true,description:""},{name:"defaultValue",type:"string | number",required:true,description:""},{name:"currentValue",type:"string | number",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<string | number>(props.currentValue);\n  return (\n    <RadioEditor\n      {...props}\n      currentValue={value}\n      onChange={(value, ...rest) => {\n        props.onChange?.(value, ...rest);\n        setValue(value);\n      }}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/SettingEditors/RadioEditor/index.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9699%3A1638",keywords:["radioeditor","block","radio","buttons"]},{name:"RealTimeSidebar",modulePath:"components/RealTimeValuesSidebar/RealTimeSidebar",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"RealTimeSidebar",specifier:"@corva/ui/components",exportName:"RealTimeSidebar"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"RealTimeSidebar"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/RealTimeValuesSidebar/RealTimeSidebar.tsx",keywords:["realtimesidebar"]},{name:"RecentSearches",modulePath:"components/Search/components/RecentSearches",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"RecentSearches",specifier:"@corva/ui/components",exportName:"RecentSearches"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"dataStorage",type:"Storage",required:true,description:""},{name:"dataStorageKey",type:"string",required:true,description:""},{name:"onInputChange",type:"(value: string) => void",required:true,description:""},{name:"maxCount",type:"number",required:true,description:""},{name:"className",type:"string",required:false,description:""},{name:"title",type:"ReactNode",required:false,description:""},{name:"Icon",type:"ComponentType<{ className: string }>",required:false,description:""},{name:"inputValue",type:"string",required:false,description:""},{name:"isHidden",type:"boolean",required:false,description:""},{name:"clearable",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<RecentSearches {...props} />"},{name:"WithIcons",description:"Can be used with icon component, passe as `Icon` prop",code:"<RecentSearches\n    Icon={AccessTime}\n    onInputChange={() => {}}\n    dataStorage={dataStorage}\n    dataStorageKey=\"\"\n    maxCount={5}\n  />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Search/components/RecentSearches.tsx",keywords:["recentsearches"]},{name:"RemoveAppButton",modulePath:"components/DevCenter/DevCenterAppContainer/components/AppSettingsDialog/components/RemoveAppButton",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"RemoveAppButton",specifier:"@corva/ui/components",exportName:"RemoveAppButton"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/DevCenterAppContainer/components/AppSettingsDialog/components/RemoveAppButton.js",keywords:["removeappbutton"]},{name:"ScrollableTooltip",modulePath:"components/Tooltip/ScrollableTooltip",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ScrollableTooltip",specifier:"@corva/ui/components",exportName:"ScrollableTooltip"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"ScrollableTooltip"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Tooltip/ScrollableTooltip.tsx",keywords:["scrollabletooltip"]},{name:"SecondaryAssetSelect",modulePath:"components/AssetEditorV2/components/SecondaryAssetSelect",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"SecondaryAssetSelect",specifier:"@corva/ui/components",exportName:"SecondaryAssetSelect"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"appType",type:"object",required:false,description:""},{name:"currentValue",type:"union",required:false,description:""},{name:"defaultValue",type:"any",required:false,description:""},{name:"onChange",type:"function",required:true,description:""},{name:"parentAssetId",type:"number",required:false,description:""},{name:"parentAssetType",type:"string",required:false,description:""},{name:"assetType",type:"string",required:true,description:""},{name:"data-testid",type:"string",required:false,description:""},{name:"appKey",type:"string",required:false,description:""},{name:"assetFields",type:"array",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetEditorV2/components/SecondaryAssetSelect.js",keywords:["secondaryassetselect"]},{name:"SelectFilterBy",modulePath:"components/Select/SelectFilterBy",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"SelectFilterBy",specifier:"@corva/ui/components",exportName:"SelectFilterBy"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"SelectFilterBy"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Select/SelectFilterBy.tsx",keywords:["selectfilterby"]},{name:"SideBar",modulePath:"components/DevCenter/SideBar/SideBar",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"SideBar",specifier:"@corva/ui/components",exportName:"SideBar"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"union",required:true,description:""},{name:"drawerPaperClassName",type:"string",required:false,description:""},{name:"drawerClassName",type:"string",required:false,description:""},{name:"listClassName",type:"string",required:false,description:""},{name:"onClick",type:"function",required:false,description:""},{name:"isToolbarGutterShown",type:"boolean",required:false,description:""},{name:"drawerWidth",type:"union",required:false,description:""},{name:"anchor",type:"enum",required:false,description:"",enumValues:["left","right"]}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/SideBar/SideBar.js",keywords:["sidebar"]},{name:"SingleAssetEditor",modulePath:"components/AssetEditor/SingleAssetEditor",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"SingleAssetEditor",specifier:"@corva/ui/components",exportName:"SingleAssetEditor"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"classes",type:"object",required:false,description:""},{name:"appType",type:"object",required:false,description:""},{name:"currentValue",type:"union",required:false,description:""},{name:"defaultValue",type:"any",required:false,description:""},{name:"onChange",type:"function",required:true,description:""},{name:"label",type:"string",required:false,description:""},{name:"isNullable",type:"boolean",required:false,description:""},{name:"parentAssetId",type:"number",required:false,description:""},{name:"parentAssetType",type:"string",required:false,description:""},{name:"assetType",type:"string",required:true,description:""},{name:"data-testid",type:"string",required:false,description:""},{name:"appKey",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetEditor/SingleAssetEditor.js",keywords:["singleasseteditor"]},{name:"SingleAssetEditorAutocomplete",modulePath:"components/AssetEditor/AssetEditorAutocomplete",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"SingleAssetEditorAutocomplete",specifier:"@corva/ui/components",exportName:"SingleAssetEditorAutocomplete"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"label",type:"string",required:false,description:""},{name:"currentValue",type:"union",required:false,description:""},{name:"isNullable",type:"boolean",required:false,description:""},{name:"onChange",type:"function",required:true,description:""},{name:"classes",type:"object",required:false,description:""},{name:"disableClearable",type:"boolean",required:false,description:""},{name:"parentAssetId",type:"number",required:false,description:""},{name:"parentAssetType",type:"string",required:false,description:""},{name:"companyId",type:"number",required:false,description:""},{name:"assetType",type:"string",required:true,description:""},{name:"errorText",type:"string",required:false,description:""},{name:"data-testid",type:"string",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"isMultiple",type:"boolean",required:false,description:""},{name:"appKey",type:"string",required:false,description:""},{name:"queryParams",type:"object",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/AssetEditor/AssetEditorAutocomplete.js",keywords:["singleasseteditorautocomplete"]},{name:"Step",modulePath:"components/Stepper/Step/Step",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Step",specifier:"@corva/ui/components",exportName:"Step"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"value",type:"ReactNode",required:true,description:""},{name:"label",type:"ReactNode",required:false,description:""},{name:"tooltip",type:"ReactNode",required:false,description:""},{name:"goBackTooltip",type:"ReactNode",required:false,description:""},{name:"checked",type:"boolean",required:false,description:""},{name:"active",type:"boolean",required:false,description:""},{name:"error",type:"boolean",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"size",type:"Size",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"canGoBack",type:"boolean",required:false,description:""},{name:"onClick",type:"() => void",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Stepper/Step/Step.tsx",keywords:["step"]},{name:"StepsWrapper",modulePath:"components/Stepper/StepsWrapper",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"StepsWrapper",specifier:"@corva/ui/components",exportName:"StepsWrapper"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"className",type:"string",required:false,description:""},{name:"children",type:"ReactNode",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Stepper/StepsWrapper.tsx",keywords:["stepswrapper"]},{name:"StyledDropdownEditor",modulePath:"components/SettingEditors/DropdownEditor/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"StyledDropdownEditor",specifier:"@corva/ui/components",exportName:"StyledDropdownEditor"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/SettingEditors/DropdownEditor/index.js",keywords:["styleddropdowneditor"]},{name:"Tab",modulePath:"components/Tabs/Tab",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"Tab",specifier:"@corva/ui/components",exportName:"Tab"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"DisabledTooltipProps",type:"Omit<TooltipProps, 'children'>",required:false,description:""}],propsList:{kind:"partial",undescended:["MuiTabProps"]},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Tabs/Tab.tsx",keywords:["tab"]},{name:"TableCell",modulePath:"components/Table/TableCell/TableCell",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TableCell",specifier:"@corva/ui/components",exportName:"TableCell"},category:"v1",description:"A Cell subcomponent for `<Table/>`",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Cell Content"},{name:"isExpanded",type:"boolean",required:false,description:""},{name:"setIsExpanded",type:"(value: boolean) => void",required:false,description:""},{name:"tooltipTitle",type:"string",required:false,description:""},{name:"collapsibleHeader",type:"boolean",required:false,description:""},{name:"collapsibleBody",type:"boolean",required:false,description:""},{name:"cellWidth",type:"string | number",required:false,description:"Cell width when expanded"},{name:"maxCellWidth",type:"string | number",required:false,description:"Cell width when collapsed"},{name:"maxCharsNumberFromStart",type:"number",required:false,description:""},{name:"maxCharsNumberFromEnd",type:"number",required:false,description:""},{name:"stickyCell",type:"boolean",required:false,description:""},{name:"emptyCell",type:"boolean",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"align",type:"'center' | 'inherit' | 'justify' | 'left' | 'right'",required:false,description:"",enumValues:["center","inherit","justify","left","right"]},{name:"size",type:"'medium' | 'small'",required:false,description:"",enumValues:["medium","small"]}],propsList:{kind:"partial",undescended:["Omit<MUITableCellProps, 'children' | 'className' | 'align' | 'size'>"]},examples:[{name:"Default",description:"",code:"<TableCell {...props} />"},{name:"CollapsibleContent",description:"You can make cell's content collapsible, but there are some changes to the components API:\n\n- `children` becomes a cell's \"header\" when it's collapsed\n- `tooltipTitle` becomes cell's \"content\" when it's collapsed and *is required*\n- `collapsibleBody=true` makes \"content\" shown\n- `maxCharsNumberFromStart` and `maxCharsNumberFromEnd` props control the truncating of `tooltipTitle`",code:"{\n  const [expanded, setExpanded] = useState(false);\n\n  return (\n    <SbColumn>\n      <Button onClick={() => setExpanded(value => !value)}>Toggle</Button>\n\n      <Table>\n        <TableBody>\n          <TableRow>\n            <TableCell\n              collapsibleBody\n              collapsibleHeader\n              isExpanded={expanded}\n              setIsExpanded={setExpanded}\n              cellWidth=\"20%\"\n              maxCellWidth={300}\n              tooltipTitle=\"Some very long stuff here\"\n            >\n              Cell content\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Table/TableCell/TableCell.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A43261&mode=dev",keywords:["tablecell","cell","subcomponent","table"]},{name:"TableContainer",modulePath:"components/Table/TableContainer/TableContainer",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TableContainer",specifier:"@corva/ui/components",exportName:"TableContainer"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"stickyHeader",type:"boolean",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"stickyColumn",type:"boolean",required:false,description:""},{name:"classes",type:"Record<string, string>",required:false,description:""},{name:"shadowColor",type:"'B1' | 'B2' | 'B3' | 'B4' | 'B5' | 'B6' | 'B7' | 'B8' | 'B9' | 'B10' | 'B11' | string",required:false,description:"Shadow colour for sticky headers, etc.",enumValues:["B1","B2","B3","B4","B5","B6","B7","B8","B9","B10","B11"]}],propsList:{kind:"partial",undescended:["Partial<Omit<MUITableContainerProps, 'classes' | 'className'>>"]},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Table/TableContainer/TableContainer.tsx",keywords:["tablecontainer"]},{name:"TablePagination",modulePath:"components/Table/TablePagination/TablePagination",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TablePagination",specifier:"@corva/ui/components",exportName:"TablePagination"},category:"v1",description:"A thin wrapper over MUI's `<TablePagination />`",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"TablePagination"},examples:[{name:"Default",description:"",code:"<TablePagination {...props} />"},{name:"WithoutRowsPerPageControl",description:"Pass an empty array to `rowsPerPageOptions` prop to disable \"Rows per page\" select",code:"<TablePagination\n    count={100}\n    onChangePage={console.log}\n    page={1}\n    rowsPerPage={30}\n    rowsPerPageOptions={[]}\n  />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Table/TablePagination/TablePagination.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A43261&mode=dev",keywords:["tablepagination","thin","wrapper","over"]},{name:"TablePaginationActions",modulePath:"components/Table/TablePaginationActions/TablePaginationActions",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TablePaginationActions",specifier:"@corva/ui/components",exportName:"TablePaginationActions"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"TablePaginationActions"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Table/TablePaginationActions/TablePaginationActions.tsx",keywords:["tablepaginationactions"]},{name:"TableSortLabel",modulePath:"components/Table/TableSortLabel/TableSortLabel",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TableSortLabel",specifier:"@corva/ui/components",exportName:"TableSortLabel"},category:"v1",description:"Sort label for `<Table />` - a thin wrapper over MUI's `<TableSortLabel /> component`",isExperimental:false,isDeprecated:false,props:[{name:"active",type:"boolean",required:false,description:"Shows an arrow indicating sort direction"},{name:"onClick",type:"MUITableSortLabelProps['onClick']",required:false,description:"Click handler"}],propsList:{kind:"partial",undescended:["Omit<MUITableSortLabelProps, 'IconComponent' | 'active' | 'onClick'>"]},examples:[{name:"Default",description:"",code:"<TableSortLabel {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Table/TableSortLabel/TableSortLabel.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A43261&mode=dev",keywords:["tablesortlabel","sort","label","table","thin","wrapper","over","component"]},{name:"TableToolbar",modulePath:"components/Table/TableToolbar/TableToolbar",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TableToolbar",specifier:"@corva/ui/components",exportName:"TableToolbar"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"numSelected",type:"number",required:false,description:""},{name:"actions",type:"ReactNode",required:false,description:""},{name:"content",type:"ReactNode",required:false,description:""},{name:"classes",type:"Record<string, string>",required:false,description:""}],propsList:{kind:"partial",undescended:["Omit<ToolbarProps, 'children' | 'classes' | 'content'>"]},examples:[{name:"Default",description:"",code:"<TableToolbar {...props} />"},{name:"Sizes",description:"Component supports 2 sizes controlled through `variant` prop:\n\n- `regular`\n- `dense`",code:"<SbColumn alignItems=\"stretch\">\n    <TableToolbar numSelected={5} variant=\"regular\" />\n    <TableToolbar numSelected={5} variant=\"dense\" />\n  </SbColumn>"},{name:"WithActions",description:"You can add arbitrary content by using `actions` prop",code:"<TableToolbar\n    numSelected={5}\n    actions={\n      <>\n        <IconButton size=\"small\" tooltipProps={{ title: 'Delete' }}>\n          <DeleteIcon size={16} />\n        </IconButton>\n        <IconButton size=\"small\" tooltipProps={{ title: 'Delete' }}>\n          <EditTwoIcon size={16} />\n        </IconButton>\n      </>\n    }\n  />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Table/TableToolbar/TableToolbar.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A43261&mode=dev",keywords:["tabletoolbar"]},{name:"TemplatePopover",modulePath:"components/Template/TemplatePopover/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TemplatePopover",specifier:"@corva/ui/components",exportName:"TemplatePopover"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"anchorEl",type:"ReactNode",required:false,description:""},{name:"anchorOrigin",type:"object",required:false,description:""},{name:"transformOrigin",type:"object",required:false,description:""},{name:"onClose",type:"function",required:true,description:""},{name:"templates",type:"array",required:true,description:""},{name:"activeTemplateId",type:"number",required:true,description:""},{name:"getDefaultTemplates",type:"function",required:true,description:""},{name:"getUserTemplates",type:"function",required:true,description:""},{name:"getSharedTemplates",type:"function",required:true,description:""},{name:"onAddNewTemplate",type:"function",required:true,description:""},{name:"onTemplateDelete",type:"function",required:true,description:""},{name:"onTemplateCopy",type:"function",required:true,description:""},{name:"onTemplateEdit",type:"function",required:true,description:""},{name:"onTemplateShare",type:"function",required:true,description:""},{name:"onActiveTemplateChange",type:"function",required:true,description:""},{name:"loading",type:"boolean",required:false,description:""},{name:"classes",type:"object",required:false,description:""},{name:"hasNameSlot",type:"boolean",required:false,description:""},{name:"renderSlot",type:"function",required:true,description:""},{name:"currentUser",type:"object",required:true,description:""},{name:"readOnly",type:"boolean",required:false,description:""},{name:"hideDefaultTemplates",type:"boolean",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Template/TemplatePopover/index.js",keywords:["templatepopover"]},{name:"TemplateSharingDialog",modulePath:"components/Template/TemplateSharingDialog/index",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"TemplateSharingDialog",specifier:"@corva/ui/components",exportName:"TemplateSharingDialog"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"title",type:"string",required:false,description:""},{name:"open",type:"boolean",required:true,description:""},{name:"onSave",type:"function",required:true,description:""},{name:"onCancel",type:"function",required:true,description:""},{name:"currentUser",type:"object",required:true,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Template/TemplateSharingDialog/index.js",keywords:["templatesharingdialog"]},{name:"ToastContainer",modulePath:"components/Toaster/ToastContainer",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"ToastContainer",specifier:"@corva/ui/components",exportName:"ToastContainer"},category:"v1",description:"Component that shows toasts - small messages at the top of the screen. The component writes its API to `window` (and therefore should be unique to a page), so showing the actual toast should be done through `showToast` from `@corva/ui/utils`\n```\nimport { showToast } from '@corva/ui/utils';\n/*...*/\nshowToast(message)\n```\nDefault auto-hide duration: `3000ms`",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"unmodeled",componentName:"ToastContainer"},examples:[{name:"Default",description:"",code:"<>\n    <ToastContainer />\n\n    <Button onClick={() => showToast('I am a toast!')}>Show Toast</Button>\n  </>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/Toaster/ToastContainer.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9597%3A20397",keywords:["toastcontainer","component","shows","toasts","small","messages","screen","writes","window","therefore","should"]},{name:"UniversalLink",modulePath:"components/DevCenter/DevCenterRouterContext/UniversalLink/UniversalLink",importPath:"@corva/ui/components",importRecipe:{kind:"barrel",componentName:"UniversalLink",specifier:"@corva/ui/components",exportName:"UniversalLink"},category:"v1",description:"",isExperimental:false,isDeprecated:false,props:[{name:"href",type:"any",required:false,description:""},{name:"children",type:"ReactNode",required:true,description:""},{name:"className",type:"string",required:false,description:""},{name:"onClick",type:"function",required:false,description:""},{name:"data-testid",type:"string",required:false,description:""}],propsList:{kind:"unjudged"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/components/DevCenter/DevCenterRouterContext/UniversalLink/UniversalLink.js",keywords:["universallink"]}];
 var hooksData = [{
   name: "useSubscriptions",