# ExpandableEmbeddedList ExpandableEmbeddedList component to visualize a list of data and modal associated ```js import ExpandableEmbeddedList from 'deepsight-react-components/ExpandableEmbeddedList'; return ``` # Props | Props | Type | Required | Default | Description | | :----------------------- | :------- | :------: | :------------------:| :-------------------------------------------------------------------------- | | `headers` | `array` | `true` | | Array of `HeaderInterface` to set header of the component | | `data` | `array` | `true` | | Array of `ItemGlobal` interface to set data to display inside the component | # Headers settings *List of header to set up column and map data to display inside the row and child row.* ## Header Interface | Props | Type | Required | Default | Description | | :-------------------: | :--------: | :-------: | :-----: | :----------------------------------------------------------------------------------------------------------: | | `name` | `string` | `true` | | The name of the column to display | | `propertyKey` | `string` | `true` | | The name of the property to match with the key element in the list of data | | `tooltipDisplay` | `string` | `optional` | | The description require to display the tooltip and the inside content | | `unit` | `string` | `optional` | | String of the unit use to display currency value | | `TextTransform` | `string` | `optional` | | String use in css to switch row text item to uppercase or other | | `TextDecorationChild` | `string` | `optional` | | String use in css to switch decoration row text child item row to underline or other | | `hrefPrefix` | `string` | `optional` | | Prefix to display `` with link inside the app | | `hrefSuffix` | `string` | `optional` | | Suffix to display `` with link inside the app | | `isNumber` | `boolean` | `optional` | | Boolean needed to format the number data after render of the component | | `large` | `boolean` | `optional` | | Boolean to display a double width of a column | | `bold` | `boolean` | `optional` | | Boolean use to display content as bold instead of normal font weight | | `withRender` | `boolean` | `optional` | | Boolean use to change size of column display text with input to open associated modal | | `graphConfiguration` | `interface`| `optional` | | Interface of `GraphConfiguration` to display information inside modal associated if `withRender` is `true` | ## Graph Configuration *Graph interface to set up graph inside modal associated to the button.* | Props | Type | Required | Default | Description | | :-------------------: | :--------: | :-------: | :-----: | :---------------------------------------------------------------------------------------: | | `title` | `string` | `true` | | The title of the graph modal | | `subtitle` | `string` | `true` | | The subtitle of the graph modal | # Data Settings *List of Data used for display value inside row.* ## Data Interface ### ItemGlobal Interface *Element for display data matching header* | Props | Type | Required | Default | Description | | :-------------------: | :---------: | :---------: | :-----: | :----------------------------------------------------------------------------: | | `parentItem` | `object` | `true` | | Object interface from `ItemTotal` to set all parent data | | `childItems` | `array` | `true` | | Array of `ItemTotal` to set all child element | ## ItemTotal Interface *Interface used to set each element of the component* | Props | Type | Required | Default | Description | | :-------------------: | :---------: | :---------: | :-----: | :----------------------------------------------------------------------------: | | `items` | `unknown` | `true` | | Object of data type unknown require to match header propertyKey to be display | | `chart` | `array` | `true` | | Array of `ChartItem` to set graph for each element | ## DataItem *Interface used by parent and child element to match and display data* | Props | Type | Required | Default | Description | | :-------------------: | :----------------: | :---------: | :-----: | :----------------------------------------------------------------------------: | | `propertyKey` | `string` | `true` | | String used to match with header associated key | | `value` | `string or number` | `optionnal` | | Value require to display data if the propertyKey match with the header | | `setting` | `boolean` | `optionnal` | | Boolean used to open row or chart | ## ChartItem *Interface used to display value in chart* | Props | Type | Required | Default | Description | | :---------: | :----------------: | :---------: | :-----: | :----------------------------------------------------------------------------: | | `x` | `string` | `true` | | String used to display value on abscissa inside chart | | `y` | `number` | `true` | | Number to display the value on ordinate inside chart | # Custom Hook ## UseInteractDataRowAndGraphProps Interface *Props passed to the custom hook* | Props | Type | Required | Default | Description | | :-------------------: | :---------: | :---------: | :-----: | :-------------------------------------------------: | | `dataState` | `array` | `true` | | Array of `ItemGlobal` require for the custom hook | ## ReturnFromInteractDataRowAndGraph Interface *Used to export of logic in index* | Props | Type | Required | Default | Description | | :-------------------: | :---------: | :---------: | :-----: | :----------------------------------------------------------------------------------------------------------: | | `dataState` | `array` | `true` | | Array of `ItemGlobal` use to set state and update value with useEffect | | `openRow` | `function` | `true` | | Function used to update item of dataState to open and close row | | `openGraph` | `function` | `true` | | Function used to update item of dataState to open and close graph in parent item with index | | `openGraphChild` | `function` | `true` | | Function used to update item of dataState to open and close graph in child item with parent and child index | #Other Props ## PropsItemRow *Props used to set each row* | Props | Type | Required | Default | Description | | :-------------------: | :-----------------: | :---------: | :-----: | :-------------------------------------------------------------------------------------------------------: | | `headers` | `array` | `true` | | Array of `HeaderInterface` use to set and match each item | | `items` | `object` | `true` | | Interface of `ItemGlobal` to set row and prepare to pass to each child | | `openRow` | `function` | `true` | | Function used to open or close row | | `openGraph` | `function` | `optionnal` | | Function used to open or close graphs | | `openGraphChild` | `function` | `true` | | Function used to set up open or close graphs with parent and child with indexes | | `parentIndex` | `number` | `true` | | Number require for setting up `openChildGraph` function | ## PropsChildItemRow *Props used to set each child row* | Props | type | required | default | description | | :-------------------: | :-----------------: | :---------: | :-----: | :-------------------------------------------------------------------------------------------------------: | | `headers` | `array` | `true` | | Array of `HeaderInterface` use to set and match each item | | `childItems` | `unknown` | `true` | | Object of data type unknown require to match header propertyKey to be display | | `childChart` | `array` | `true` | | Interface of `ChartItem` to display child chart | | `openGraphChild` | `function` | `true` | | Function used to set up open or close graphs with parent and child with indexes | ## PropsItemDisplay *Props used to display item inside rows* | prop | type | required | default | description | | :-------------------: | :----------------------------: | :---------: | :-----: | :-------------------------------------------------------------------------------------------------------------: | | `value` | `string or number` | `true` | | Value to display in item | | `id` | `string or number or undefined` | `optionnal` | | Id string use to set link in child element (Triple type because of interface constraint in `dataItem` interface | | `TextTransform` | `string` | `optionnal` | | String use in css to switch row text item to uppercase or other | | `TextDecorationChild` | `string` | `optionnal` | | String use in css to switch decoration row text child item row to underline or other | | `hrefPrefix` | `string` | `optionnal` | | Prefix to display `` with link inside the app | | `hrefSuffix` | `string` | `optionnal` | | Suffix to display `` with link inside the app | | `nbColumn` | `number` | `true` | | Number of column require to set size of element | | `large` | `boolean` | `optionnal` | | Boolean use for flex ccs setting | | `bold` | `boolean` | `optionnal` | | Boolean use for font weight ccs setting | | `withRender` | `boolean` | `optionnal` | | Boolean use to change size of column display text with input to open associated modal | ## PropsActionButton *Props passed to the action button to trigger open and close of row* | prop | type | required | default | description | | :-------------------: | :---------: | :---------: | :-----: | :-----------------------------------------------------: | | `open` | `boolean` | `optionnal` | | Boolean use to switch icon and display if close or open | | `visibility` | `boolean` | `optionnal` | | Boolean use to display action button or not | ## PropsGraphButton *Props passed to the graph button* | prop | type | required | default | description | | :-------------------: | :---------: | :---------: | :-----: | :-------------------------------------------------------------------------------------------------------: | | `openGraph` | `function` | `optionnal` | | Function used to open or close graphs | | `open` | `boolean` | `optionnal` | | Boolean use to set if graph is open | | `graphConfiguration` | `object` | `true` | | `GraphConfiguration` interface use to be passed to the graph component to display header inside modal | | `graphs` | `array` | `optionnal` | | Array of `ChartItem` used to pass data inside chart modal | ##PropGraphContent *Props passed to the graph component* | prop | type | required | default | description | | :-------------------: | :---------: | :---------: | :-----: | :-------------------------------------------------------------------: | | `graphConfiguration` | `object` | `true` | | `GraphConfiguration` interface use to display header inside modal | | `graphs` | `array` | `optionnal` | | Array of `GraphItem` interface used to display data chart | | `openGraph` | `function` | `true` | | Function use to close graph with the icon |