@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTGraph/components/RadialChart/constants.js

@@ -1 +1,4 @@
-export const BASE_INNER_RADIUS_RATIO=.45;export const CORNER_RADIUS=4;export const PAD_ANGLE=.01;export const RING_GAP=3;
+export const BASE_INNER_RADIUS_RATIO = 0.45;
+export const CORNER_RADIUS = 4;
+export const PAD_ANGLE = 0.01;
+export const RING_GAP = 3;

package/dist/esm/components/UTGraph/components/RadialChart/index.js

@@ -1 +1,132 @@
-import React,{useMemo}from"react";import*as d3 from"d3";import{func,number,object}from"prop-types";import UTLabel from"../../../UTLabel";import UTTooltip from"../../../UTTooltip";import UTIcon from"../../../UTIcon";import{TOOLTIP_SIZE}from"../../constants";import styles from"./styles.module.scss";import{getValueMapByCode}from"./utils";import{BASE_INNER_RADIUS_RATIO,CORNER_RADIUS,PAD_ANGLE,RING_GAP}from"./constants";const RadialChart=_ref=>{var _configuration$baseIn,_configuration$corner,_configuration$padAng,_configuration$ringGa,_dataset$domain,_tab$configuration;let{tab:tab,width:width,height:height,dataset:dataset,color:color,configuration:configuration}=_ref;const cX=width/2,cY=height/2,outerRadius=Math.max(0,Math.min(cX,cY)),baseInnerRadius=outerRadius*(null!==(_configuration$baseIn=null==configuration?void 0:configuration.baseInnerRadiusRatio)&&void 0!==_configuration$baseIn?_configuration$baseIn:BASE_INNER_RADIUS_RATIO),cornerRadius=null!==(_configuration$corner=null==configuration?void 0:configuration.cornerRadius)&&void 0!==_configuration$corner?_configuration$corner:CORNER_RADIUS,padAngle=null!==(_configuration$padAng=null==configuration?void 0:configuration.padAngle)&&void 0!==_configuration$padAng?_configuration$padAng:PAD_ANGLE,ringGap=null!==(_configuration$ringGa=null==configuration?void 0:configuration.ringGap)&&void 0!==_configuration$ringGa?_configuration$ringGa:RING_GAP,domainEntry=null==dataset||null===(_dataset$domain=dataset.domain)||void 0===_dataset$domain?void 0:_dataset$domain[0],clusters=useMemo(()=>tab.subitems||[],[tab]),valueByCode=useMemo(()=>getValueMapByCode(null==domainEntry?void 0:domainEntry.concepts),[domainEntry]),pieInputsByCluster=useMemo(()=>clusters.map(cluster=>cluster.map(series=>{var _valueByCode$get;const code=series.bindings.range;return{code:code,value:Number(null!==(_valueByCode$get=valueByCode.get(code))&&void 0!==_valueByCode$get?_valueByCode$get:0)}})),[clusters,valueByCode]),pie=useMemo(()=>d3.pie().value(d=>d.value).sort(null).padAngle(padAngle),[padAngle]),ringCount=clusters.length||1,totalRadialSpace=outerRadius-baseInnerRadius,ringThickness=Math.max(1,(totalRadialSpace-(ringCount-1)*ringGap)/ringCount),innerMostRadius=outerRadius-ringCount*ringThickness-(ringCount-1)*ringGap,rings=useMemo(()=>pieInputsByCluster.map((pieInput,clusterIndex)=>{const visibleInput=pieInput.filter(d=>d.value>0),ringOuter=outerRadius-clusterIndex*(ringThickness+ringGap),ringInner=ringOuter-ringThickness;return{clusterIndex:clusterIndex,arcs:pie(visibleInput),arcGen:d3.arc().innerRadius(ringInner).outerRadius(ringOuter).cornerRadius(cornerRadius)}}),[pieInputsByCluster,pie,outerRadius,ringThickness,ringGap,cornerRadius]),{title:title,tooltip:tooltip,value:value,icon:icon}=(null===(_tab$configuration=tab.configuration)||void 0===_tab$configuration?void 0:_tab$configuration.radialCenter)||{};return React.createElement("div",{style:{position:"relative",width:width,height:height}},React.createElement("svg",{width:width,height:height},React.createElement("g",{transform:"translate(".concat(cX,", ").concat(cY,")")},rings.map(_ref2=>{let{clusterIndex:clusterIndex,arcs:arcs,arcGen:arcGen}=_ref2;return React.createElement("g",{key:"ring-".concat(clusterIndex)},arcs.map(arcDatum=>{const d=arcGen(arcDatum),{code:code}=arcDatum.data;return React.createElement("path",{key:code,d:d,fill:color(code),stroke:"white",strokeWidth:1})}))}))),React.createElement("div",{style:{position:"absolute",inset:0,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}},title&&React.createElement(UTLabel,{weight:"medium",variant:"xsmall",colorTheme:"gray",title:title},title),(null==value?void 0:value.code)&&React.createElement(UTLabel,{weight:"medium",variant:"title2",title:value.code},value.format?d3.format(value.format)(valueByCode.get(value.code)):valueByCode.get(value.code)),tooltip&&React.createElement(UTTooltip,{content:tooltip},React.createElement("div",{className:styles.tooltipIcon},React.createElement(UTIcon,{name:"IconInfoCircle",size:TOOLTIP_SIZE}))),icon&&React.createElement(UTIcon,{name:icon,size:Math.max(innerMostRadius-ringGap,0)})))};RadialChart.propTypes={tab:object,width:number,height:number,dataset:object,color:func,configuration:object};export default RadialChart;
+import React, { useMemo } from 'react';
+import * as d3 from 'd3';
+import { func, number, object } from 'prop-types';
+import UTLabel from '../../../UTLabel';
+import UTTooltip from '../../../UTTooltip';
+import UTIcon from '../../../UTIcon';
+import { TOOLTIP_SIZE } from '../../constants';
+import styles from './styles.module.scss';
+import { getValueMapByCode } from './utils';
+import { BASE_INNER_RADIUS_RATIO, CORNER_RADIUS, PAD_ANGLE, RING_GAP } from './constants';
+const RadialChart = _ref => {
+  var _configuration$baseIn, _configuration$corner, _configuration$padAng, _configuration$ringGa, _dataset$domain, _tab$configuration;
+  let {
+    tab,
+    width,
+    height,
+    dataset,
+    color,
+    configuration
+  } = _ref;
+  const cX = width / 2;
+  const cY = height / 2;
+  const outerRadius = Math.max(0, Math.min(cX, cY));
+  const baseInnerRadius = outerRadius * ((_configuration$baseIn = configuration === null || configuration === void 0 ? void 0 : configuration.baseInnerRadiusRatio) !== null && _configuration$baseIn !== void 0 ? _configuration$baseIn : BASE_INNER_RADIUS_RATIO);
+  const cornerRadius = (_configuration$corner = configuration === null || configuration === void 0 ? void 0 : configuration.cornerRadius) !== null && _configuration$corner !== void 0 ? _configuration$corner : CORNER_RADIUS;
+  const padAngle = (_configuration$padAng = configuration === null || configuration === void 0 ? void 0 : configuration.padAngle) !== null && _configuration$padAng !== void 0 ? _configuration$padAng : PAD_ANGLE;
+  const ringGap = (_configuration$ringGa = configuration === null || configuration === void 0 ? void 0 : configuration.ringGap) !== null && _configuration$ringGa !== void 0 ? _configuration$ringGa : RING_GAP;
+  const domainEntry = dataset === null || dataset === void 0 || (_dataset$domain = dataset.domain) === null || _dataset$domain === void 0 ? void 0 : _dataset$domain[0];
+  const clusters = useMemo(() => tab.subitems || [], [tab]);
+  const valueByCode = useMemo(() => getValueMapByCode(domainEntry === null || domainEntry === void 0 ? void 0 : domainEntry.concepts), [domainEntry]);
+  const pieInputsByCluster = useMemo(() => clusters.map(cluster => cluster.map(series => {
+    var _valueByCode$get;
+    const code = series.bindings.range;
+    return {
+      code,
+      value: Number((_valueByCode$get = valueByCode.get(code)) !== null && _valueByCode$get !== void 0 ? _valueByCode$get : 0)
+    };
+  })), [clusters, valueByCode]);
+  const pie = useMemo(() => d3.pie().value(d => d.value).sort(null).padAngle(padAngle), [padAngle]);
+  const ringCount = clusters.length || 1;
+  const totalRadialSpace = outerRadius - baseInnerRadius;
+  const ringThickness = Math.max(1, (totalRadialSpace - (ringCount - 1) * ringGap) / ringCount);
+  const innerMostRadius = outerRadius - ringCount * ringThickness - (ringCount - 1) * ringGap;
+  const rings = useMemo(() => pieInputsByCluster.map((pieInput, clusterIndex) => {
+    const visibleInput = pieInput.filter(d => d.value > 0);
+    const ringOuter = outerRadius - clusterIndex * (ringThickness + ringGap);
+    const ringInner = ringOuter - ringThickness;
+    const arcs = pie(visibleInput);
+    const arcGen = d3.arc().innerRadius(ringInner).outerRadius(ringOuter).cornerRadius(cornerRadius);
+    return {
+      clusterIndex,
+      arcs,
+      arcGen
+    };
+  }), [pieInputsByCluster, pie, outerRadius, ringThickness, ringGap, cornerRadius]);
+  const {
+    title,
+    tooltip,
+    value,
+    icon
+  } = ((_tab$configuration = tab.configuration) === null || _tab$configuration === void 0 ? void 0 : _tab$configuration.radialCenter) || {};
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative',
+      width,
+      height
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(".concat(cX, ", ").concat(cY, ")")
+  }, rings.map(_ref2 => {
+    let {
+      clusterIndex,
+      arcs,
+      arcGen
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("g", {
+      key: "ring-".concat(clusterIndex)
+    }, arcs.map(arcDatum => {
+      const d = arcGen(arcDatum);
+      const {
+        code
+      } = arcDatum.data;
+      return /*#__PURE__*/React.createElement("path", {
+        key: code,
+        d: d,
+        fill: color(code),
+        stroke: "white",
+        strokeWidth: 1
+      });
+    }));
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, title && /*#__PURE__*/React.createElement(UTLabel, {
+    weight: "medium",
+    variant: "xsmall",
+    colorTheme: "gray",
+    title: title
+  }, title), (value === null || value === void 0 ? void 0 : value.code) && /*#__PURE__*/React.createElement(UTLabel, {
+    weight: "medium",
+    variant: "title2",
+    title: value.code
+  }, value.format ? d3.format(value.format)(valueByCode.get(value.code)) : valueByCode.get(value.code)), tooltip && /*#__PURE__*/React.createElement(UTTooltip, {
+    content: tooltip
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.tooltipIcon
+  }, /*#__PURE__*/React.createElement(UTIcon, {
+    name: "IconInfoCircle",
+    size: TOOLTIP_SIZE
+  }))), icon && /*#__PURE__*/React.createElement(UTIcon, {
+    name: icon,
+    size: Math.max(innerMostRadius - ringGap, 0)
+  })));
+};
+RadialChart.propTypes = {
+  tab: object,
+  width: number,
+  height: number,
+  dataset: object,
+  color: func,
+  configuration: object
+};
+export default RadialChart;

package/dist/esm/components/UTGraph/components/RadialChart/utils.js

@@ -1 +1,6 @@
-export const getValueMapByCode=concepts=>{const map=new Map;return concepts?(concepts.forEach(concept=>map.set(concept.code,concept.value)),map):map};
+export const getValueMapByCode = concepts => {
+  const map = new Map();
+  if (!concepts) return map;
+  concepts.forEach(concept => map.set(concept.code, concept.value));
+  return map;
+};

package/dist/esm/components/UTGraph/constants.js

@@ -1 +1,27 @@
-import styles from"./styles.module.scss";export const LEFT_SIDE="left";export const RIGHT_SIDE="right";export const LINE_TYPE="line";export const BAR_TYPE="bar";export const POINT_TYPE="point";export const DOMAIN_CATEGORICAL="categorical";export const DOMAIN_NUMERICAL="numerical";export const TOOLTIP_SIZE=17;export const DEFAULT_DOMAIN_TICK_FORMAT="~s";export const DEFAULT_DOMAIN_TICKS=4;export const DEFAULT_RANGE_TICK_FORMAT="~s";export const DEFAULT_RANGE_TICKS=4;export const DEFAULT_CARTESIAN_PLANE_MARGINS={top:24,right:24,bottom:24,left:24};export const MIN_BAR_WIDTH=4;export const MAX_BAR_WIDTH=20;export const DEFAULT_BAR_WIDTH=10;export const LEGEND_TYPE_STYLES={[POINT_TYPE]:styles.legendPoint,[BAR_TYPE]:styles.legendBar,[LINE_TYPE]:styles.legendLine};
+import styles from './styles.module.scss';
+export const LEFT_SIDE = 'left';
+export const RIGHT_SIDE = 'right';
+export const LINE_TYPE = 'line';
+export const BAR_TYPE = 'bar';
+export const POINT_TYPE = 'point';
+export const DOMAIN_CATEGORICAL = 'categorical';
+export const DOMAIN_NUMERICAL = 'numerical';
+export const TOOLTIP_SIZE = 17;
+export const DEFAULT_DOMAIN_TICK_FORMAT = '~s';
+export const DEFAULT_DOMAIN_TICKS = 4;
+export const DEFAULT_RANGE_TICK_FORMAT = '~s';
+export const DEFAULT_RANGE_TICKS = 4;
+export const DEFAULT_CARTESIAN_PLANE_MARGINS = {
+  top: 24,
+  right: 24,
+  bottom: 24,
+  left: 24
+};
+export const MIN_BAR_WIDTH = 4;
+export const MAX_BAR_WIDTH = 20;
+export const DEFAULT_BAR_WIDTH = 10;
+export const LEGEND_TYPE_STYLES = {
+  [POINT_TYPE]: styles.legendPoint,
+  [BAR_TYPE]: styles.legendBar,
+  [LINE_TYPE]: styles.legendLine
+};

package/dist/esm/components/UTGraph/index.js

@@ -1 +1,225 @@
-import React,{useEffect,useMemo,useRef,useState}from"react";import*as d3 from"d3";import{array,object,objectOf,string}from"prop-types";import{mergeMultipleClassNames}from"../../utils/classesUtils";import WithTheme from"../WithTheme";import UTLabel from"../UTLabel";import UTButtonGroup from"../UTButtonGroup";import UTIcon from"../UTIcon";import UTTooltip from"../UTTooltip";import Bars from"./components/Bars";import Lines from"./components/Lines";import CartesianPlane from"./components/CartesianPlane";import RadialChart from"./components/RadialChart";import{applyHeadroom,computeCrossAxisDomainForSide,computeMainAxisExtentNumerical,detectAxisSides}from"./utils";import{DEFAULT_CARTESIAN_PLANE_MARGINS,DEFAULT_DOMAIN_TICK_FORMAT,DEFAULT_DOMAIN_TICKS,DEFAULT_RANGE_TICK_FORMAT,DEFAULT_RANGE_TICKS,DOMAIN_NUMERICAL,LEFT_SIDE,LEGEND_TYPE_STYLES,RIGHT_SIDE,TOOLTIP_SIZE}from"./constants";import ownStyles from"./styles.module.scss";import{retrieveStyle}from"./theme";import Points from"./components/Points";const UTGraph=_ref=>{var _meta$configuration,_meta$configuration2;let{meta:meta,datasets:datasets,classNames:classNames,classes:theme}=_ref;const{margin:cartesianPlaneMargin,rangeLeftTickFormat:rangeLeftTickFormat,rangeLeftTicks:rangeLeftTicks,rangeRightTickFormat:rangeRightTickFormat,rangeRightTicks:rangeRightTicks,domainTickFormat:domainTickFormat,domainTicks:domainTicks}=(null===(_meta$configuration=meta.configuration)||void 0===_meta$configuration?void 0:_meta$configuration.cartesianPlane)||{},styles=useMemo(()=>mergeMultipleClassNames(ownStyles,theme,classNames),[ownStyles,theme,classNames]),[selectedTab,setSelectedTab]=useState(meta.chart_tabs[0]),tabOptions=useMemo(()=>{var _meta$chart_tabs;return meta.chart_tabs?null===(_meta$chart_tabs=meta.chart_tabs)||void 0===_meta$chart_tabs?void 0:_meta$chart_tabs.map(tab=>({Icon:tab.icon,id:tab.code,onClick:()=>setSelectedTab(tab),value:tab.code})):[]},[meta.chart_tabs]),dataset=useMemo(()=>datasets.find(ds=>ds.code===selectedTab.code),[datasets,selectedTab]),mainAxisDomain=useMemo(()=>{var _selectedTab$domain;return dataset?(null===(_selectedTab$domain=selectedTab.domain)||void 0===_selectedTab$domain?void 0:_selectedTab$domain.binding)===DOMAIN_NUMERICAL?applyHeadroom(computeMainAxisExtentNumerical(selectedTab,dataset),{padBottom:.08}):dataset.domain.map(item=>item.domain_value):[]},[dataset,selectedTab]),crossAxisLeftDomain=useMemo(()=>applyHeadroom(computeCrossAxisDomainForSide(selectedTab,dataset,LEFT_SIDE)),[selectedTab,dataset]),crossAxisRightDomain=useMemo(()=>applyHeadroom(computeCrossAxisDomainForSide(selectedTab,dataset,RIGHT_SIDE)),[selectedTab,dataset]),{hasLeft:hasLeft,hasRight:hasRight}=detectAxisSides(selectedTab),colorDomain=useMemo(()=>{const seriesCodes=selectedTab.subitems.flatMap(cluster=>cluster.map(series=>series.bindings.range).filter(Boolean)),colorCodesUsed=new Set(selectedTab.subitems.flatMap(cluster=>cluster.map(s=>{var _s$bindings;return null===(_s$bindings=s.bindings)||void 0===_s$bindings?void 0:_s$bindings.color}).filter(Boolean))),colorValues=[];if(dataset&&colorCodesUsed.size>0){const codes=Array.from(colorCodesUsed);dataset.domain.forEach(record=>{const dict=Object.fromEntries(record.concepts.map(d=>[d.code,d.value]));codes.forEach(cc=>{const v=dict[cc];null==v||colorValues.includes(v)||colorValues.push(v)})})}return Array.from(new Set([...seriesCodes,...colorValues]))},[selectedTab,dataset]),color=useMemo(()=>d3.scaleOrdinal(colorDomain,d3.schemeTableau10),[colorDomain]),legendItems=useMemo(()=>{const seen=new Set;return selectedTab.subitems.flat().filter(series=>{const code=series.bindings.range;return!(!code||seen.has(code))&&(seen.add(code),!0)}).map(series=>({code:series.bindings.range,name:series.name,type:series.type}))},[selectedTab]),containerRef=useRef(null),planeWrapperRef=useRef(null),[containerSize,setContainerSize]=useState({width:0,height:0});return useEffect(()=>{if(!containerRef.current||!planeWrapperRef.current)return;const resizeObserver=new ResizeObserver(entries=>{if(!entries[0])return;const{width:width,height:height}=entries[0].contentRect;setContainerSize(prev=>{const next={width:width,height:Math.max(height,0)};return Math.abs(prev.width-next.width)<1&&Math.abs(prev.height-next.height)<1?prev:next})});return resizeObserver.observe(planeWrapperRef.current),()=>{resizeObserver.disconnect()}},[]),React.createElement("div",{className:styles.container,ref:containerRef},React.createElement("div",{className:styles.header},React.createElement("div",{className:styles.title},React.createElement(UTLabel,{variant:"subtitle1",weight:"medium",title:selectedTab.name},selectedTab.name),(null==selectedTab?void 0:selectedTab.tooltip)&&React.createElement(UTTooltip,{content:selectedTab.tooltip},React.createElement("div",{className:styles.tooltipIcon},React.createElement(UTIcon,{name:"IconInfoCircle",size:TOOLTIP_SIZE})))),tabOptions.length>1&&React.createElement(UTButtonGroup,{actions:tabOptions,selected:selectedTab.code})),React.createElement("div",{className:styles.planeWrapper,ref:planeWrapperRef},"cartesian"===meta.chart_layout?React.createElement(CartesianPlane,{crossAxisLeftDomain:crossAxisLeftDomain,crossAxisRightDomain:crossAxisRightDomain,crossAxisLeftTickFormat:rangeLeftTickFormat||DEFAULT_RANGE_TICK_FORMAT,crossAxisLeftTicks:rangeLeftTicks||DEFAULT_RANGE_TICKS,crossAxisRightTickFormat:rangeRightTickFormat||DEFAULT_RANGE_TICK_FORMAT,crossAxisRightTicks:rangeRightTicks||DEFAULT_RANGE_TICKS,height:containerSize.height,mainAxisDomain:mainAxisDomain,mainAxisTickFormat:domainTickFormat||DEFAULT_DOMAIN_TICK_FORMAT,mainAxisTicks:domainTicks||DEFAULT_DOMAIN_TICKS,margin:cartesianPlaneMargin||DEFAULT_CARTESIAN_PLANE_MARGINS,width:containerSize.width,hasLeft:hasLeft,hasRight:hasRight,tab:selectedTab},_ref2=>{let{mainAxis:mainAxis,crossAxisLeft:crossAxisLeft,crossAxisRight:crossAxisRight}=_ref2;return React.createElement(React.Fragment,null,React.createElement(Bars,{crossAxisLeft:crossAxisLeft,crossAxisRight:crossAxisRight,dataset:dataset,mainAxis:mainAxis,mainAxisDomain:mainAxisDomain,tab:selectedTab,color:color}),React.createElement(Lines,{crossAxisLeft:crossAxisLeft,crossAxisRight:crossAxisRight,dataset:dataset,mainAxis:mainAxis,mainAxisDomain:mainAxisDomain,tab:selectedTab,color:color}),React.createElement(Points,{crossAxisLeft:crossAxisLeft,crossAxisRight:crossAxisRight,dataset:dataset,mainAxis:mainAxis,mainAxisDomain:mainAxisDomain,tab:selectedTab,color:color}))}):"radial"===meta.chart_layout?React.createElement(RadialChart,{tab:selectedTab,width:containerSize.width,height:containerSize.height,dataset:dataset,color:color,configuration:null==meta||null===(_meta$configuration2=meta.configuration)||void 0===_meta$configuration2?void 0:_meta$configuration2.radialChart}):null),React.createElement("div",{className:styles.legends},legendItems.map(item=>React.createElement("div",{key:item.code,className:styles.legendItem,title:item.name},React.createElement("div",{style:{backgroundColor:color(item.code)},className:LEGEND_TYPE_STYLES[item.type]}),React.createElement(UTLabel,{variant:"xsmall",className:styles.legendLabel},item.name)))))};UTGraph.propTypes={classes:objectOf(string),classNames:objectOf(string),meta:object,datasets:array};export default WithTheme(retrieveStyle)(UTGraph);
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import * as d3 from 'd3';
+import { array, object, objectOf, string } from 'prop-types';
+import { mergeMultipleClassNames } from '../../utils/classesUtils';
+import WithTheme from '../WithTheme';
+import UTLabel from '../UTLabel';
+import UTButtonGroup from '../UTButtonGroup';
+import UTIcon from '../UTIcon';
+import UTTooltip from '../UTTooltip';
+import Bars from './components/Bars';
+import Lines from './components/Lines';
+import CartesianPlane from './components/CartesianPlane';
+import RadialChart from './components/RadialChart';
+import { applyHeadroom, computeCrossAxisDomainForSide, computeMainAxisExtentNumerical, detectAxisSides } from './utils';
+import { DEFAULT_CARTESIAN_PLANE_MARGINS, DEFAULT_DOMAIN_TICK_FORMAT, DEFAULT_DOMAIN_TICKS, DEFAULT_RANGE_TICK_FORMAT, DEFAULT_RANGE_TICKS, DOMAIN_NUMERICAL, LEFT_SIDE, LEGEND_TYPE_STYLES, RIGHT_SIDE, TOOLTIP_SIZE } from './constants';
+import ownStyles from './styles.module.scss';
+import { retrieveStyle } from './theme';
+import Points from './components/Points';
+const UTGraph = _ref => {
+  var _meta$configuration, _meta$configuration2;
+  let {
+    meta,
+    datasets,
+    classNames,
+    classes: theme
+  } = _ref;
+  const {
+    margin: cartesianPlaneMargin,
+    rangeLeftTickFormat,
+    rangeLeftTicks,
+    rangeRightTickFormat,
+    rangeRightTicks,
+    domainTickFormat,
+    domainTicks
+  } = ((_meta$configuration = meta.configuration) === null || _meta$configuration === void 0 ? void 0 : _meta$configuration.cartesianPlane) || {};
+  const styles = useMemo(() => mergeMultipleClassNames(ownStyles, theme, classNames), [ownStyles, theme, classNames]);
+  const [selectedTab, setSelectedTab] = useState(meta.chart_tabs[0]);
+  const tabOptions = useMemo(() => {
+    var _meta$chart_tabs;
+    return meta.chart_tabs ? (_meta$chart_tabs = meta.chart_tabs) === null || _meta$chart_tabs === void 0 ? void 0 : _meta$chart_tabs.map(tab => ({
+      Icon: tab.icon,
+      id: tab.code,
+      onClick: () => setSelectedTab(tab),
+      value: tab.code
+    })) : [];
+  }, [meta.chart_tabs]);
+  const dataset = useMemo(() => datasets.find(ds => ds.code === selectedTab.code), [datasets, selectedTab]);
+  const mainAxisDomain = useMemo(() => {
+    var _selectedTab$domain;
+    if (!dataset) return [];
+    if (((_selectedTab$domain = selectedTab.domain) === null || _selectedTab$domain === void 0 ? void 0 : _selectedTab$domain.binding) === DOMAIN_NUMERICAL) return applyHeadroom(computeMainAxisExtentNumerical(selectedTab, dataset), {
+      padBottom: 0.08
+    });
+    return dataset.domain.map(item => item.domain_value);
+  }, [dataset, selectedTab]);
+  const crossAxisLeftDomain = useMemo(() => applyHeadroom(computeCrossAxisDomainForSide(selectedTab, dataset, LEFT_SIDE)), [selectedTab, dataset]);
+  const crossAxisRightDomain = useMemo(() => applyHeadroom(computeCrossAxisDomainForSide(selectedTab, dataset, RIGHT_SIDE)), [selectedTab, dataset]);
+  const {
+    hasLeft,
+    hasRight
+  } = detectAxisSides(selectedTab);
+
+  // TBD: colors should be retrieved from the report's meta
+  const colorDomain = useMemo(() => {
+    const seriesCodes = selectedTab.subitems.flatMap(cluster => cluster.map(series => series.bindings.range).filter(Boolean));
+    const colorCodesUsed = new Set(selectedTab.subitems.flatMap(cluster => cluster.map(s => {
+      var _s$bindings;
+      return (_s$bindings = s.bindings) === null || _s$bindings === void 0 ? void 0 : _s$bindings.color;
+    }).filter(Boolean)));
+    const colorValues = [];
+    if (dataset && colorCodesUsed.size > 0) {
+      const codes = Array.from(colorCodesUsed);
+      dataset.domain.forEach(record => {
+        const dict = Object.fromEntries(record.concepts.map(d => [d.code, d.value]));
+        codes.forEach(cc => {
+          const v = dict[cc];
+          if (v != null && !colorValues.includes(v)) colorValues.push(v);
+        });
+      });
+    }
+    return Array.from(new Set([...seriesCodes, ...colorValues]));
+  }, [selectedTab, dataset]);
+  const color = useMemo(() => d3.scaleOrdinal(colorDomain, d3.schemeTableau10), [colorDomain]);
+  const legendItems = useMemo(() => {
+    const seen = new Set();
+    return selectedTab.subitems.flat().filter(series => {
+      const code = series.bindings.range;
+      if (!code || seen.has(code)) return false;
+      seen.add(code);
+      return true;
+    }).map(series => ({
+      code: series.bindings.range,
+      name: series.name,
+      type: series.type
+    }));
+  }, [selectedTab]);
+  const containerRef = useRef(null);
+  const planeWrapperRef = useRef(null);
+  const [containerSize, setContainerSize] = useState({
+    width: 0,
+    height: 0
+  });
+  useEffect(() => {
+    if (!containerRef.current || !planeWrapperRef.current) return;
+    const resizeObserver = new ResizeObserver(entries => {
+      if (!entries[0]) return;
+      const {
+        width,
+        height
+      } = entries[0].contentRect;
+      setContainerSize(prev => {
+        const next = {
+          width,
+          height: Math.max(height, 0)
+        };
+        if (Math.abs(prev.width - next.width) < 1 && Math.abs(prev.height - next.height) < 1) return prev;
+        return next;
+      });
+    });
+    resizeObserver.observe(planeWrapperRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container,
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.header
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.title
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    variant: "subtitle1",
+    weight: "medium",
+    title: selectedTab.name
+  }, selectedTab.name), (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.tooltip) && /*#__PURE__*/React.createElement(UTTooltip, {
+    content: selectedTab.tooltip
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.tooltipIcon
+  }, /*#__PURE__*/React.createElement(UTIcon, {
+    name: "IconInfoCircle",
+    size: TOOLTIP_SIZE
+  })))), tabOptions.length > 1 && /*#__PURE__*/React.createElement(UTButtonGroup, {
+    actions: tabOptions,
+    selected: selectedTab.code
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.planeWrapper,
+    ref: planeWrapperRef
+  }, meta.chart_layout === 'cartesian' ? /*#__PURE__*/React.createElement(CartesianPlane, {
+    crossAxisLeftDomain: crossAxisLeftDomain,
+    crossAxisRightDomain: crossAxisRightDomain,
+    crossAxisLeftTickFormat: rangeLeftTickFormat || DEFAULT_RANGE_TICK_FORMAT,
+    crossAxisLeftTicks: rangeLeftTicks || DEFAULT_RANGE_TICKS,
+    crossAxisRightTickFormat: rangeRightTickFormat || DEFAULT_RANGE_TICK_FORMAT,
+    crossAxisRightTicks: rangeRightTicks || DEFAULT_RANGE_TICKS,
+    height: containerSize.height,
+    mainAxisDomain: mainAxisDomain,
+    mainAxisTickFormat: domainTickFormat || DEFAULT_DOMAIN_TICK_FORMAT,
+    mainAxisTicks: domainTicks || DEFAULT_DOMAIN_TICKS,
+    margin: cartesianPlaneMargin || DEFAULT_CARTESIAN_PLANE_MARGINS,
+    width: containerSize.width,
+    hasLeft: hasLeft,
+    hasRight: hasRight,
+    tab: selectedTab
+  }, _ref2 => {
+    let {
+      mainAxis,
+      crossAxisLeft,
+      crossAxisRight
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Bars, {
+      crossAxisLeft: crossAxisLeft,
+      crossAxisRight: crossAxisRight,
+      dataset: dataset,
+      mainAxis: mainAxis,
+      mainAxisDomain: mainAxisDomain,
+      tab: selectedTab,
+      color: color
+    }), /*#__PURE__*/React.createElement(Lines, {
+      crossAxisLeft: crossAxisLeft,
+      crossAxisRight: crossAxisRight,
+      dataset: dataset,
+      mainAxis: mainAxis,
+      mainAxisDomain: mainAxisDomain,
+      tab: selectedTab,
+      color: color
+    }), /*#__PURE__*/React.createElement(Points, {
+      crossAxisLeft: crossAxisLeft,
+      crossAxisRight: crossAxisRight,
+      dataset: dataset,
+      mainAxis: mainAxis,
+      mainAxisDomain: mainAxisDomain,
+      tab: selectedTab,
+      color: color
+    }));
+  }) : meta.chart_layout === 'radial' ? /*#__PURE__*/React.createElement(RadialChart, {
+    tab: selectedTab,
+    width: containerSize.width,
+    height: containerSize.height,
+    dataset: dataset,
+    color: color,
+    configuration: meta === null || meta === void 0 || (_meta$configuration2 = meta.configuration) === null || _meta$configuration2 === void 0 ? void 0 : _meta$configuration2.radialChart
+  }) : null), /*#__PURE__*/React.createElement("div", {
+    className: styles.legends
+  }, legendItems.map(item => /*#__PURE__*/React.createElement("div", {
+    key: item.code,
+    className: styles.legendItem,
+    title: item.name
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: color(item.code)
+    },
+    className: LEGEND_TYPE_STYLES[item.type]
+  }), /*#__PURE__*/React.createElement(UTLabel, {
+    variant: "xsmall",
+    className: styles.legendLabel
+  }, item.name)))));
+};
+UTGraph.propTypes = {
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  meta: object,
+  datasets: array
+};
+export default WithTheme(retrieveStyle)(UTGraph);

package/dist/esm/components/UTGraph/theme.js

@@ -1 +1,17 @@
-import{getShadow}from"../../utils/shadowUtils";import{COLOR_THEMES,COLOR_SHADES}from"../../constants/Palette";export const retrieveStyle=_ref=>{var _theme$Palette$shadow;let{theme:theme}=_ref;return{container:{backgroundColor:theme.Palette[COLOR_THEMES.light][COLOR_SHADES.shade01],boxShadow:getShadow({color:null===(_theme$Palette$shadow=theme.Palette.shadows)||void 0===_theme$Palette$shadow?void 0:_theme$Palette$shadow.grayscale,level:1})}}};
+import { getShadow } from '../../utils/shadowUtils';
+import { COLOR_THEMES, COLOR_SHADES } from '../../constants/Palette';
+export const retrieveStyle = _ref => {
+  var _theme$Palette$shadow;
+  let {
+    theme
+  } = _ref;
+  return {
+    container: {
+      backgroundColor: theme.Palette[COLOR_THEMES.light][COLOR_SHADES.shade01],
+      boxShadow: getShadow({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 1
+      })
+    }
+  };
+};

package/dist/esm/components/UTGraph/utils.js

@@ -1 +1,143 @@
-import isEmpty from"lodash/isEmpty";import{BAR_TYPE,LEFT_SIDE,LINE_TYPE,POINT_TYPE,RIGHT_SIDE}from"./constants";export const computeCrossAxisDomain=(tab,dataset)=>{if(!dataset)return[0,1];const{yMin:yMin,yMax:yMax}=dataset.domain.reduce((acc,record)=>{const clusterMaxValues=tab.subitems.map(cluster=>{const typeGroups=cluster.reduce((groups,series)=>(groups[series.type]||(groups[series.type]=[]),groups[series.type].push(series),groups),{}),typeSums=Object.entries(typeGroups).map(_ref=>{let[type,typeSeries]=_ref;return{type:type,positiveSum:typeSeries.map(series=>{var _record$concepts$find,_record$concepts$find2;return null!==(_record$concepts$find=null===(_record$concepts$find2=record.concepts.find(datum=>datum.code===series.bindings.range))||void 0===_record$concepts$find2?void 0:_record$concepts$find2.value)&&void 0!==_record$concepts$find?_record$concepts$find:0}).filter(Number.isFinite).reduce((sum,v)=>v>=0?sum+v:sum,0),negativeSum:typeSeries.map(series=>{var _record$concepts$find3,_record$concepts$find4;return null!==(_record$concepts$find3=null===(_record$concepts$find4=record.concepts.find(datum=>datum.code===series.bindings.range))||void 0===_record$concepts$find4?void 0:_record$concepts$find4.value)&&void 0!==_record$concepts$find3?_record$concepts$find3:0}).filter(Number.isFinite).reduce((sum,v)=>v<0?sum+v:sum,0)}});return{positiveSum:Math.max(...typeSums.map(g=>g.positiveSum)),negativeSum:Math.min(...typeSums.map(g=>g.negativeSum))}}),maxPos=Math.max(...clusterMaxValues.map(g=>g.positiveSum),acc.yMax);return{yMin:Math.min(...clusterMaxValues.map(g=>g.negativeSum),acc.yMin),yMax:maxPos}},{yMin:0,yMax:0});return 0===yMax&&0===yMin?[0,1]:[Math.min(0,yMin),Math.max(0,yMax)]};export const computeCrossAxisDomainForSide=(tab,dataset,side)=>{const filteredTab={...tab,subitems:tab.subitems.map(cluster=>cluster.filter(series=>(series.range||LEFT_SIDE)===side))};return filteredTab.subitems=filteredTab.subitems.filter(cluster=>cluster.length>0),computeCrossAxisDomain(filteredTab,dataset)};export const applyHeadroom=function(_ref2){let[min,max]=_ref2,{padBottom:padBottom=0,padTop:padTop=.08}=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return[min*(1-padBottom),max*(1+padTop)]};export const getValuesMapByCategory=dataset=>{const map=new Map;return dataset?(dataset.domain.forEach(record=>{map.set(record.domain_value,Object.fromEntries(record.concepts.map(datum=>[datum.code,datum.value])))}),map):map};export const detectAxisSides=tab=>{let hasLeft=!1,hasRight=!1;return tab.subitems.forEach(cluster=>{cluster.forEach(s=>{if(s.type===LINE_TYPE||s.type===BAR_TYPE||s.type===POINT_TYPE){const side=s.range||LEFT_SIDE;side===LEFT_SIDE&&(hasLeft=!0),side===RIGHT_SIDE&&(hasRight=!0)}})}),{hasLeft:hasLeft,hasRight:hasRight}};export const computeMainAxisExtentNumerical=(tab,dataset)=>{if(!tab||!dataset)return[0,1];const domainCodes=new Set;if(tab.subitems.forEach(cluster=>cluster.forEach(series=>{var _series$bindings;const code=null==series||null===(_series$bindings=series.bindings)||void 0===_series$bindings?void 0:_series$bindings.domain;code&&domainCodes.add(code)})),0===domainCodes.size)return[0,1];let min=Number.POSITIVE_INFINITY,max=Number.NEGATIVE_INFINITY;return dataset.domain.forEach(record=>{const dict=Object.fromEntries(record.concepts.map(d=>[d.code,d.value]));domainCodes.forEach(code=>{const v=dict[code];Number.isFinite(v)&&(v<min&&(min=v),v>max&&(max=v))})}),Number.isFinite(min)&&Number.isFinite(max)&&min!==max?[min,max]:[0,1]};export const getRowList=dataset=>dataset&&Array.isArray(dataset.domain)?dataset.domain.map(record=>Object.fromEntries(record.concepts.map(d=>[d.code,d.value]))):[];export const getSeriesForSide=(series,side)=>series.filter(s=>(s.range||LEFT_SIDE)===side).map(s=>{var _s$bindings,_s$bindings2,_s$bindings3,_s$bindings4;return{rangeCode:null===(_s$bindings=s.bindings)||void 0===_s$bindings?void 0:_s$bindings.range,domainCode:null===(_s$bindings2=s.bindings)||void 0===_s$bindings2?void 0:_s$bindings2.domain,sizeCode:null===(_s$bindings3=s.bindings)||void 0===_s$bindings3?void 0:_s$bindings3.size,colorCode:null===(_s$bindings4=s.bindings)||void 0===_s$bindings4?void 0:_s$bindings4.color}});export const getClusters=(tab,type)=>tab.subitems.map(cluster=>{const series=cluster.filter(s=>s.type===type);return{leftItems:getSeriesForSide(series,LEFT_SIDE),rightItems:getSeriesForSide(series,RIGHT_SIDE)}}).filter(_ref3=>{let{leftItems:leftItems,rightItems:rightItems}=_ref3;return!isEmpty(leftItems)||!isEmpty(rightItems)});
+import isEmpty from 'lodash/isEmpty';
+import { BAR_TYPE, LEFT_SIDE, LINE_TYPE, POINT_TYPE, RIGHT_SIDE } from './constants';
+export const computeCrossAxisDomain = (tab, dataset) => {
+  if (!dataset) return [0, 1];
+  const {
+    yMin,
+    yMax
+  } = dataset.domain.reduce((acc, record) => {
+    const clusterMaxValues = tab.subitems.map(cluster => {
+      const typeGroups = cluster.reduce((groups, series) => {
+        if (!groups[series.type]) groups[series.type] = [];
+        groups[series.type].push(series);
+        return groups;
+      }, {});
+      const typeSums = Object.entries(typeGroups).map(_ref => {
+        let [type, typeSeries] = _ref;
+        const positiveSum = typeSeries.map(series => {
+          var _record$concepts$find, _record$concepts$find2;
+          return (_record$concepts$find = (_record$concepts$find2 = record.concepts.find(datum => datum.code === series.bindings.range)) === null || _record$concepts$find2 === void 0 ? void 0 : _record$concepts$find2.value) !== null && _record$concepts$find !== void 0 ? _record$concepts$find : 0;
+        }).filter(Number.isFinite).reduce((sum, v) => v >= 0 ? sum + v : sum, 0);
+        const negativeSum = typeSeries.map(series => {
+          var _record$concepts$find3, _record$concepts$find4;
+          return (_record$concepts$find3 = (_record$concepts$find4 = record.concepts.find(datum => datum.code === series.bindings.range)) === null || _record$concepts$find4 === void 0 ? void 0 : _record$concepts$find4.value) !== null && _record$concepts$find3 !== void 0 ? _record$concepts$find3 : 0;
+        }).filter(Number.isFinite).reduce((sum, v) => v < 0 ? sum + v : sum, 0);
+        return {
+          type,
+          positiveSum,
+          negativeSum
+        };
+      });
+      return {
+        positiveSum: Math.max(...typeSums.map(g => g.positiveSum)),
+        negativeSum: Math.min(...typeSums.map(g => g.negativeSum))
+      };
+    });
+    const maxPos = Math.max(...clusterMaxValues.map(g => g.positiveSum), acc.yMax);
+    const minNeg = Math.min(...clusterMaxValues.map(g => g.negativeSum), acc.yMin);
+    return {
+      yMin: minNeg,
+      yMax: maxPos
+    };
+  }, {
+    yMin: 0,
+    yMax: 0
+  });
+  if (yMax === 0 && yMin === 0) return [0, 1];
+  return [Math.min(0, yMin), Math.max(0, yMax)];
+};
+export const computeCrossAxisDomainForSide = (tab, dataset, side) => {
+  const filteredTab = {
+    ...tab,
+    subitems: tab.subitems.map(cluster => cluster.filter(series => (series.range || LEFT_SIDE) === side))
+  };
+  filteredTab.subitems = filteredTab.subitems.filter(cluster => cluster.length > 0);
+  return computeCrossAxisDomain(filteredTab, dataset);
+};
+export const applyHeadroom = function (_ref2) {
+  let [min, max] = _ref2;
+  let {
+    padBottom = 0,
+    padTop = 0.08
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return [min * (1 - padBottom), max * (1 + padTop)];
+};
+export const getValuesMapByCategory = dataset => {
+  const map = new Map();
+  if (!dataset) return map;
+  dataset.domain.forEach(record => {
+    map.set(record.domain_value, Object.fromEntries(record.concepts.map(datum => [datum.code, datum.value])));
+  });
+  return map;
+};
+export const detectAxisSides = tab => {
+  let hasLeft = false;
+  let hasRight = false;
+  tab.subitems.forEach(cluster => {
+    cluster.forEach(s => {
+      if (s.type === LINE_TYPE || s.type === BAR_TYPE || s.type === POINT_TYPE) {
+        const side = s.range || LEFT_SIDE;
+        if (side === LEFT_SIDE) hasLeft = true;
+        if (side === RIGHT_SIDE) hasRight = true;
+      }
+    });
+  });
+  return {
+    hasLeft,
+    hasRight
+  };
+};
+export const computeMainAxisExtentNumerical = (tab, dataset) => {
+  if (!tab || !dataset) return [0, 1];
+  const domainCodes = new Set();
+  tab.subitems.forEach(cluster => cluster.forEach(series => {
+    var _series$bindings;
+    const code = series === null || series === void 0 || (_series$bindings = series.bindings) === null || _series$bindings === void 0 ? void 0 : _series$bindings.domain;
+    if (code) domainCodes.add(code);
+  }));
+  if (domainCodes.size === 0) return [0, 1];
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  dataset.domain.forEach(record => {
+    const dict = Object.fromEntries(record.concepts.map(d => [d.code, d.value]));
+    domainCodes.forEach(code => {
+      const v = dict[code];
+      if (Number.isFinite(v)) {
+        if (v < min) min = v;
+        if (v > max) max = v;
+      }
+    });
+  });
+  if (!Number.isFinite(min) || !Number.isFinite(max) || min === max) {
+    return [0, 1];
+  }
+  return [min, max];
+};
+export const getRowList = dataset => {
+  if (!dataset || !Array.isArray(dataset.domain)) return [];
+  return dataset.domain.map(record => Object.fromEntries(record.concepts.map(d => [d.code, d.value])));
+};
+export const getSeriesForSide = (series, side) => series.filter(s => (s.range || LEFT_SIDE) === side).map(s => {
+  var _s$bindings, _s$bindings2, _s$bindings3, _s$bindings4;
+  return {
+    rangeCode: (_s$bindings = s.bindings) === null || _s$bindings === void 0 ? void 0 : _s$bindings.range,
+    domainCode: (_s$bindings2 = s.bindings) === null || _s$bindings2 === void 0 ? void 0 : _s$bindings2.domain,
+    sizeCode: (_s$bindings3 = s.bindings) === null || _s$bindings3 === void 0 ? void 0 : _s$bindings3.size,
+    colorCode: (_s$bindings4 = s.bindings) === null || _s$bindings4 === void 0 ? void 0 : _s$bindings4.color
+  };
+});
+export const getClusters = (tab, type) => tab.subitems.map(cluster => {
+  const series = cluster.filter(s => s.type === type);
+  const leftItems = getSeriesForSide(series, LEFT_SIDE);
+  const rightItems = getSeriesForSide(series, RIGHT_SIDE);
+  return {
+    leftItems,
+    rightItems
+  };
+}).filter(_ref3 => {
+  let {
+    leftItems,
+    rightItems
+  } = _ref3;
+  return !isEmpty(leftItems) || !isEmpty(rightItems);
+});

package/dist/esm/components/UTHeader/README.md

@@ -0,0 +1,27 @@
+# UTHeader
+
+### Description
+
+This component displays a series of texts in different variants. It also handles a dropdown menu for actions in the top right corner
+
+## Props
+
+| Name              | Type             | Default | Description                                                                                                                                                              |
+| ----------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| actions           | actionType       |         | Actions to be displayed in a dropdown menu at the top right corner, the first one that has the prop `main` as true will be displayed next to the menu with its own icon. |
+| banner            | bannerType       |         | If present, it will render a banner at the bottom.                                                                                                                       |
+| classes           | object of string |         | Classes returned by UTHeader's own [theme](./theme.js#L40) `retrieveStyle`.                                                                                              |
+| classNames        | object of string |         | Additional classes.                                                                                                                                                      |
+| helpText          | string           |         | Text that will be rendered above the banner.                                                                                                                             |
+| requiredFieldInfo | string           |         | Text to display as a helper for required fields, it will be rendered below the description.                                                                              |
+| subtitle          | string           |         | Text that will be rendered below the title.                                                                                                                              |
+| tagline           | string           |         | Text that will be rendered in uppercase on top of the title.                                                                                                             |
+| title             | string           |         | Text that will be rendered between the stages and the content.                                                                                                           |
+| TitleIcon         | element          |         | Icon that will be rendered on top of the title.                                                                                                                          |
+
+### Custom Types
+
+| Type       | Shape                                                         |
+| ---------- | ------------------------------------------------------------- |
+| actionType | `{ label: string, onClick: func, main: bool, Icon: element }` |
+| bannerType | `{ Icon: element, text: string }`                             |