@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

package/dist/docs/components/lineCharts.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/lineCharts
-*Captured:* 2026-03-06T10:41:27.791Z
+*Captured:* 2026-04-27T14:59:14.012Z
 
 ## LineChart
 
@@ -26,23 +26,21 @@ type CustomData = {
     value: number;
 };
 
-export default () => {
-    return (
-        <>
-            <label>Simple LineChart</label>
-            <div className='panel panel-default panel-body margin-bottom-0 height-200 max-width-500'>
-                <LineChart
-                    data={data}
-                    dataKey={(entry: CustomData) => entry.name}
-                    xAxisOptions={{ padding: { left: 30, right: 30 } }}
-                    showGrid
-                    gridOptions={{ vertical: false, strokeDasharray: '0', stroke: 'gray-lighter' }}
-                    lines={[<Line key='line' dataKey={entry => entry.value} />]}
-                />
-            </div>
-        </>
-    );
-};
+export default () => (
+    <>
+        <label>Simple LineChart</label>
+        <div className='panel panel-default panel-body margin-bottom-0 height-200 max-width-500'>
+            <LineChart
+                data={data}
+                dataKey={(entry: CustomData) => entry.name}
+                xAxisOptions={{ padding: { left: 30, right: 30 } }}
+                showGrid
+                gridOptions={{ vertical: false, strokeDasharray: '0', stroke: 'gray-lighter' }}
+                lines={[<Line key='line' dataKey={entry => entry.value} />]}
+            />
+        </div>
+    </>
+);
 
 const data: CustomData[] = [
     {
@@ -95,7 +93,7 @@ const data: CustomData[] = [
                     </title>
                     <desc>
                     </desc>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                         <g class="recharts-cartesian-grid">
                             <g class="recharts-cartesian-grid-horizontal">
                                 <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="438" height="108" x1="15" y1="123" x2="453" y2="123">
@@ -111,7 +109,7 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                     </g>
                     <defs>
                         <clipPath id="recharts1-clip">
@@ -119,19 +117,21 @@ const data: CustomData[] = [
                             </rect>
                         </clipPath>
                     </defs>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                         <g class="recharts-layer recharts-line">
-                            <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r0:" height="108" width="438" class="recharts-curve recharts-line-curve" stroke-dasharray="18.3801px 33.008716833496095px" d="M45,27C66,28,87,29,108,33C129,37,150,63,171,63C192,63,213,39.6,234,39.6C255,39.6,276,66.3,297,66.3C318,66.3,339,59.3,360,51.3C381,43.3,402,30.8,423,18.3">
-                            </path>
+                            <g class="recharts-layer recharts-shape">
+                                <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r0:" height="108" width="438" class="recharts-curve recharts-line-curve" stroke-dasharray="11.3402px 51.388816833496094px" d="M45,27C66,28,87,29,108,33C129,37,150,63,171,63C192,63,213,39.6,234,39.6C255,39.6,276,66.3,297,66.3C318,66.3,339,59.3,360,51.3C381,43.3,402,30.8,423,18.3">
+                                </path>
+                            </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                         <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                             <line angle="0" height="30" orientation="bottom" x="15" y="123" width="438" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="15" y1="123" x2="453" y2="123">
                             </line>
@@ -169,7 +169,7 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                         <g class="recharts-layer recharts-line-dots">
                             <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="438" cx="45" cy="27.000000000000007" class="recharts-dot recharts-line-dot">
                             </circle>
@@ -187,13 +187,13 @@ const data: CustomData[] = [
                             </circle>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                         <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                             <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                 <text height="30" orientation="bottom" width="438" stroke="none" x="45" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
@@ -318,42 +318,34 @@ type CustomData = {
     value: number;
 };
 
-export default () => {
-    return (
-        <>
-            <label>LineChart with ReferenceLine</label>
-            <div className='panel panel-default panel-body margin-bottom-0 height-200 max-width-500'>
-                <LineChart
-                    data={data}
-                    dataKey={(entry: CustomData) => entry.name}
-                    xAxisOptions={{ padding: { left: 30, right: 30 } }}
-                    lines={[<Line key='line' type='monotone' dataKey={entry => entry.value} />]}
-                    tooltip={<ChartTooltip content={<CustomTooltip />} cursor={{ fill: '#ebf9fa80' }} />}
-                    referenceLines={[
-                        <ReferenceLine key='x' x='Page E' stroke='color-coldplay-turquoise' label={<CustomLabel />} />,
-                        <ReferenceLine
-                            key='y'
-                            y={3500}
-                            stroke='color-warmup-salmon'
-                            strokeDasharray='3 3'
-                            label='Max'
-                        />,
-                        <ReferenceLine
-                            key='segment'
-                            stroke='color-warmup-salmon'
-                            strokeDasharray='3 6'
-                            segment={[
-                                { x: 'Page A', y: 0 },
-                                { x: 'Page E', y: 3500 },
-                            ]}
-                            label='Segment'
-                        />,
-                    ]}
-                />
-            </div>
-        </>
-    );
-};
+export default () => (
+    <>
+        <label>LineChart with ReferenceLine</label>
+        <div className='panel panel-default panel-body margin-bottom-0 height-200 max-width-500'>
+            <LineChart
+                data={data}
+                dataKey={(entry: CustomData) => entry.name}
+                xAxisOptions={{ padding: { left: 30, right: 30 } }}
+                lines={[<Line key='line' type='monotone' dataKey={entry => entry.value} />]}
+                tooltip={<ChartTooltip content={<CustomTooltip />} cursor={{ fill: '#ebf9fa80' }} />}
+                referenceLines={[
+                    <ReferenceLine key='x' x='Page E' stroke='color-coldplay-turquoise' label={<CustomLabel />} />,
+                    <ReferenceLine key='y' y={3500} stroke='color-warmup-salmon' strokeDasharray='3 3' label='Max' />,
+                    <ReferenceLine
+                        key='segment'
+                        stroke='color-warmup-salmon'
+                        strokeDasharray='3 6'
+                        segment={[
+                            { x: 'Page A', y: 0 },
+                            { x: 'Page E', y: 3500 },
+                        ]}
+                        label='Segment'
+                    />,
+                ]}
+            />
+        </div>
+    </>
+);
 
 const CustomLabel = (props: any) => {
     const { viewBox } = props;
@@ -438,9 +430,9 @@ const data: CustomData[] = [
                     </title>
                     <desc>
                     </desc>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                     </g>
                     <defs>
                         <clipPath id="recharts2-clip">
@@ -448,16 +440,18 @@ const data: CustomData[] = [
                             </rect>
                         </clipPath>
                     </defs>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                         <g class="recharts-layer recharts-line">
-                            <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r1:" height="108" width="438" class="recharts-curve recharts-line-curve" stroke-dasharray="48.0863px 3.3025168334960924px" d="M45,27C66,28,87,29,108,33C129,37,150,63,171,63C192,63,213,39.6,234,39.6C255,39.6,276,66.3,297,66.3C318,66.3,339,59.3,360,51.3C381,43.3,402,30.8,423,18.3">
-                            </path>
+                            <g class="recharts-layer recharts-shape">
+                                <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r1:" height="108" width="438" class="recharts-curve recharts-line-curve" stroke-dasharray="46.0356px 51.388816833496094px" d="M45,27C66,28,87,29,108,33C129,37,150,63,171,63C192,63,213,39.6,234,39.6C255,39.6,276,66.3,297,66.3C318,66.3,339,59.3,360,51.3C381,43.3,402,30.8,423,18.3">
+                                </path>
+                            </g>
                         </g>
                         <g class="recharts-layer recharts-reference-line">
                             <line x="Page E" stroke="#4eccc1 " fill="none" fill-opacity="1" stroke-width="1" x1="297" y1="123" x2="297" y2="15" class="recharts-reference-line-line">
@@ -473,7 +467,7 @@ const data: CustomData[] = [
                             </line>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                         <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                             <line angle="0" height="30" orientation="bottom" x="15" y="123" width="438" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="15" y1="123" x2="453" y2="123">
                             </line>
@@ -511,7 +505,7 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                         <g class="recharts-layer recharts-line-dots">
                             <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="438" cx="45" cy="27.000000000000007" class="recharts-dot recharts-line-dot">
                             </circle>
@@ -529,13 +523,13 @@ const data: CustomData[] = [
                             </circle>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                         <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                             <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                 <text height="30" orientation="bottom" width="438" stroke="none" x="45" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
@@ -672,38 +666,36 @@ type CustomData = {
     amt: number;
 };
 
-export default () => {
-    return (
-        <>
-            <label>Multiple lines in a LineChart with a brush for range selection</label>
-            <div className='panel panel-default panel-body margin-bottom-0 height-300'>
-                <LineChart
-                    data={data}
-                    dataKey={(entry: CustomData) => entry.name}
-                    brush
-                    showYAxis
-                    showGrid
-                    legend={
-                        <Legend
-                            layout='horizontal'
-                            verticalAlign='bottom'
-                            iconType='line'
-                            formatter={(_value: string, entry: any, index: number) => {
-                                const { color } = entry;
-                                return <span style={{ color }}>{Object.keys(data[0])[index + 1]}</span>;
-                            }}
-                        />
-                    }
-                    lines={[
-                        <Line key='line1' name='uv' dataKey='uv' strokeColor='color-coldplay-fountain' />,
-                        <Line key='line2' name='pv' dataKey='pv' strokeColor='color-coldplay-moos' />,
-                        <Line key='line3' name='amt' dataKey='amt' strokeColor='color-warmup-raspberry' />,
-                    ]}
-                />
-            </div>
-        </>
-    );
-};
+export default () => (
+    <>
+        <label>Multiple lines in a LineChart with a brush for range selection</label>
+        <div className='panel panel-default panel-body margin-bottom-0 height-300'>
+            <LineChart
+                data={data}
+                dataKey={(entry: CustomData) => entry.name}
+                brush
+                showYAxis
+                showGrid
+                legend={
+                    <Legend
+                        layout='horizontal'
+                        verticalAlign='bottom'
+                        iconType='line'
+                        formatter={(_value: string, entry: any, index: number) => {
+                            const { color } = entry;
+                            return <span style={{ color }}>{Object.keys(data[0])[index + 1]}</span>;
+                        }}
+                    />
+                }
+                lines={[
+                    <Line key='line1' name='uv' dataKey='uv' strokeColor='color-coldplay-fountain' />,
+                    <Line key='line2' name='pv' dataKey='pv' strokeColor='color-coldplay-moos' />,
+                    <Line key='line3' name='amt' dataKey='amt' strokeColor='color-warmup-raspberry' />,
+                ]}
+            />
+        </div>
+    </>
+);
 
 const data: CustomData[] = [
     {
@@ -768,7 +760,7 @@ const data: CustomData[] = [
                 <div class="recharts-legend-wrapper" style="position: absolute; width: 846px; height: auto; right: 15px; bottom: 15px;">
                     <ul class="recharts-default-legend" style="padding: 0px; margin: 0px; text-align: right;">
                         <li class="recharts-legend-item legend-item-0" style="display: inline-block; margin-right: 10px;">
-                            <svg aria-label="[object Object] legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                            <svg aria-label="amt legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                 <title>
                                 </title>
                                 <desc>
@@ -784,7 +776,7 @@ const data: CustomData[] = [
                             </span>
                         </li>
                         <li class="recharts-legend-item legend-item-1" style="display: inline-block; margin-right: 10px;">
-                            <svg aria-label="[object Object] legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                            <svg aria-label="pv legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                 <title>
                                 </title>
                                 <desc>
@@ -800,7 +792,7 @@ const data: CustomData[] = [
                             </span>
                         </li>
                         <li class="recharts-legend-item legend-item-2" style="display: inline-block; margin-right: 10px;">
-                            <svg aria-label="[object Object] legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                            <svg aria-label="uv legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                 <title>
                                 </title>
                                 <desc>
@@ -822,7 +814,7 @@ const data: CustomData[] = [
                     </title>
                     <desc>
                     </desc>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                         <g class="recharts-cartesian-grid">
                             <g class="recharts-cartesian-grid-horizontal">
                                 <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="786" height="108" x1="75" y1="123" x2="861" y2="123">
@@ -854,7 +846,7 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                     </g>
                     <defs>
                         <clipPath id="recharts3-clip">
@@ -884,27 +876,33 @@ const data: CustomData[] = [
                             </line>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                         <g class="recharts-layer recharts-line">
-                            <path name="uv" stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r2:" height="108" width="786" class="recharts-curve recharts-line-curve" stroke-dasharray="787.956298828125px 0px" d="M75,88.44C118.667,88.8,162.333,89.16,206,90.6C249.667,92.04,293.333,101.4,337,101.4C380.667,101.4,424.333,92.976,468,92.976C511.667,92.976,555.333,102.588,599,102.588C642.667,102.588,686.333,100.068,730,97.188C773.667,94.308,817.333,89.808,861,85.308">
-                            </path>
+                            <g class="recharts-layer recharts-shape">
+                                <path name="uv" stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r2:" height="108" width="786" class="recharts-curve recharts-line-curve" stroke-dasharray="787.956298828125px 787.956298828125px" d="M75,88.44C118.667,88.8,162.333,89.16,206,90.6C249.667,92.04,293.333,101.4,337,101.4C380.667,101.4,424.333,92.976,468,92.976C511.667,92.976,555.333,102.588,599,102.588C642.667,102.588,686.333,100.068,730,97.188C773.667,94.308,817.333,89.808,861,85.308">
+                                </path>
+                            </g>
                         </g>
                         <g class="recharts-layer recharts-line">
-                            <path name="pv" stroke="#a1daa3 " fill="none" stroke-width="1" id="recharts-line-:r3:" height="108" width="786" class="recharts-curve recharts-line-curve" stroke-dasharray="836.8355px 0.000010253906225443643px" d="M75,97.08C118.667,102.491,162.333,107.902,206,107.902C249.667,107.902,293.333,17.16,337,17.16C380.667,17.16,424.333,80.794,468,80.794C511.667,80.794,555.333,71.16,599,71.16C642.667,71.16,686.333,81.96,730,81.96C773.667,81.96,817.333,79.26,861,76.56">
-                            </path>
+                            <g class="recharts-layer recharts-shape">
+                                <path name="pv" stroke="#a1daa3 " fill="none" stroke-width="1" id="recharts-line-:r3:" height="108" width="786" class="recharts-curve recharts-line-curve" stroke-dasharray="836.8355px 836.8355102539062px" d="M75,97.08C118.667,102.491,162.333,107.902,206,107.902C249.667,107.902,293.333,17.16,337,17.16C380.667,17.16,424.333,80.794,468,80.794C511.667,80.794,555.333,71.16,599,71.16C642.667,71.16,686.333,81.96,730,81.96C773.667,81.96,817.333,79.26,861,76.56">
+                                </path>
+                            </g>
                         </g>
                         <g class="recharts-layer recharts-line">
-                            <path name="amt" stroke="#b23672 " fill="none" stroke-width="1" id="recharts-line-:r4:" height="108" width="786" class="recharts-curve recharts-line-curve" stroke-dasharray="786.2213px 0.000013476562457981345px" d="M75,97.08C118.667,98.106,162.333,99.132,206,99.132C249.667,99.132,293.333,98.268,337,98.268C380.667,98.268,424.333,101.4,468,101.4C511.667,101.4,555.333,100.345,599,99.445C642.667,98.545,686.333,96,730,96C773.667,96,817.333,98.16,861,100.32">
-                            </path>
+                            <g class="recharts-layer recharts-shape">
+                                <path name="amt" stroke="#b23672 " fill="none" stroke-width="1" id="recharts-line-:r4:" height="108" width="786" class="recharts-curve recharts-line-curve" stroke-dasharray="786.2213px 786.2213134765625px" d="M75,97.08C118.667,98.106,162.333,99.132,206,99.132C249.667,99.132,293.333,98.268,337,98.268C380.667,98.268,424.333,101.4,468,101.4C511.667,101.4,555.333,100.345,599,99.445C642.667,98.545,686.333,96,730,96C773.667,96,817.333,98.16,861,100.32">
+                                </path>
+                            </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                         <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                             <line angle="0" height="30" orientation="bottom" x="75" y="123" width="786" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="75" y1="123" x2="861" y2="123">
                             </line>
@@ -970,7 +968,7 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                         <g class="recharts-layer recharts-line-dots">
                             <circle r="3" name="uv" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="786" cx="75" cy="88.43999999999998" class="recharts-dot recharts-line-dot">
                             </circle>
@@ -1020,13 +1018,13 @@ const data: CustomData[] = [
                             </circle>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                         <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                             <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                 <text height="30" orientation="bottom" width="786" stroke="none" x="75" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
@@ -1280,23 +1278,21 @@ type CustomLegendProps = {
     onMouseLeave: () => void;
 };
 
-const CustomLegend = ({ payload, highlightedLine, onMouseEnter, onMouseLeave }: CustomLegendProps) => {
-    return (
-        <ul className='list-style-none padding-left-20'>
-            {payload?.map((entry: any, index: number) => (
-                <li
-                    key={`item-${index}`}
-                    onMouseEnter={() => onMouseEnter(entry.dataKey)}
-                    onMouseLeave={onMouseLeave}
-                    className={`cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 ${highlightedLine === entry.dataKey ? 'bg-lightest' : ''}`}
-                >
-                    <span className='rioglyph rioglyph-sphere' style={{ color: entry.color }} />
-                    <span className='text-color-darker text-capitalize-first-word'>{entry.value}</span>
-                </li>
-            ))}
-        </ul>
-    );
-};
+const CustomLegend = ({ payload, highlightedLine, onMouseEnter, onMouseLeave }: CustomLegendProps) => (
+    <ul className='list-style-none padding-left-20'>
+        {payload?.map((entry: any, index: number) => (
+            <li
+                key={`item-${index}`}
+                onMouseEnter={() => onMouseEnter(entry.dataKey)}
+                onMouseLeave={onMouseLeave}
+                className={`cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 ${highlightedLine === entry.dataKey ? 'bg-lightest' : ''}`}
+            >
+                <span className='rioglyph rioglyph-sphere' style={{ color: entry.color }} />
+                <span className='text-color-darker text-capitalize-first-word'>{entry.value}</span>
+            </li>
+        ))}
+    </ul>
+);
 
 const data: CustomData[] = [
     {
@@ -1480,7 +1476,7 @@ const data: CustomData[] = [
                     </title>
                     <desc>
                     </desc>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                         <g class="recharts-cartesian-grid">
                             <g class="recharts-cartesian-grid-horizontal">
                                 <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="681.640625" height="158" x1="75" y1="173" x2="756.640625" y2="173">
@@ -1520,7 +1516,7 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                     </g>
                     <defs>
                         <clipPath id="recharts4-clip">
@@ -1550,32 +1546,38 @@ const data: CustomData[] = [
                             </line>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                         <g class="recharts-layer recharts-reference-line">
                             <line x="03:30" stroke="#f19588 " fill="none" fill-opacity="1" stroke-width="1" x1="577.2615131578948" y1="173" x2="577.2615131578948" y2="15" class="recharts-reference-line-line">
                             </line>
                             <text x="582.2615131578948" y="30" fill="gray" text-anchor="right">Now</text>
                         </g>
                         <g class="recharts-layer recharts-line">
-                            <path name="Nominal" stroke-width="1" stroke="#67abc5 " fill="none" id="recharts-line-:r5:" height="158" width="681.640625" class="recharts-curve recharts-line-curve" stroke-dasharray="734.8751831054688px 0px" d="M75,48.417C86.959,55.102,98.917,61.788,110.876,68.773C122.834,75.758,134.793,83.75,146.752,90.327C158.71,96.903,170.669,108.233,182.627,108.233C194.586,108.233,206.545,75.909,218.503,75.909C230.462,75.909,242.421,87.592,254.379,92.091C266.338,96.589,278.296,99.703,290.255,102.901C302.214,106.098,314.172,111.275,326.131,111.275C338.089,111.275,350.048,86.284,362.007,86.284C373.965,86.284,385.924,96.133,397.882,98.924C409.841,101.716,421.8,101.885,433.758,103.111C445.717,104.338,457.675,104.595,469.634,106.285C481.593,107.974,493.551,113.25,505.51,113.25C517.468,113.25,529.427,110.368,541.386,108.207C553.344,106.045,565.303,103.563,577.262,100.28C589.22,96.998,601.179,88.509,613.137,88.509C625.096,88.509,637.055,93.776,649.013,93.776C660.972,93.776,672.93,88.509,684.889,88.509C696.848,88.509,708.806,88.509,720.765,88.509C732.723,88.509,744.682,88.509,756.641,88.509">
-                            </path>
+                            <g class="recharts-layer recharts-shape">
+                                <path name="Nominal" stroke-width="1" stroke="#67abc5 " fill="none" id="recharts-line-:r5:" height="158" width="681.640625" class="recharts-curve recharts-line-curve" stroke-dasharray="734.8751831054688px 734.8751831054688px" d="M75,48.417C86.959,55.102,98.917,61.788,110.876,68.773C122.834,75.758,134.793,83.75,146.752,90.327C158.71,96.903,170.669,108.233,182.627,108.233C194.586,108.233,206.545,75.909,218.503,75.909C230.462,75.909,242.421,87.592,254.379,92.091C266.338,96.589,278.296,99.703,290.255,102.901C302.214,106.098,314.172,111.275,326.131,111.275C338.089,111.275,350.048,86.284,362.007,86.284C373.965,86.284,385.924,96.133,397.882,98.924C409.841,101.716,421.8,101.885,433.758,103.111C445.717,104.338,457.675,104.595,469.634,106.285C481.593,107.974,493.551,113.25,505.51,113.25C517.468,113.25,529.427,110.368,541.386,108.207C553.344,106.045,565.303,103.563,577.262,100.28C589.22,96.998,601.179,88.509,613.137,88.509C625.096,88.509,637.055,93.776,649.013,93.776C660.972,93.776,672.93,88.509,684.889,88.509C696.848,88.509,708.806,88.509,720.765,88.509C732.723,88.509,744.682,88.509,756.641,88.509">
+                                </path>
+                            </g>
                         </g>
                         <g class="recharts-layer recharts-line">
-                            <path name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="none" id="recharts-line-:r6:" height="158" width="681.640625" class="recharts-curve recharts-line-curve" stroke-dasharray="704.3584594726562px 0px" d="M75,48.285C86.959,52.468,98.917,56.651,110.876,61.018C122.834,65.384,134.793,70.377,146.752,74.487C158.71,78.597,170.669,85.679,182.627,85.679C194.586,85.679,206.545,65.573,218.503,65.573C230.462,65.573,242.421,72.887,254.379,75.698C266.338,78.509,278.296,80.443,290.255,82.44C302.214,84.437,314.172,87.68,326.131,87.68C338.089,87.68,350.048,72.104,362.007,72.104C373.965,72.104,385.924,78.257,397.882,80.004C409.841,81.751,421.8,81.858,433.758,82.624C445.717,83.39,457.675,83.539,469.634,84.599C481.593,85.659,493.551,88.983,505.51,88.983C517.468,88.983,529.427,87.188,541.386,85.837C553.344,84.485,565.303,82.925,577.262,80.873C589.22,78.821,601.179,73.526,613.137,73.526C625.096,73.526,637.055,78.793,649.013,78.793C660.972,78.793,672.93,73.526,684.889,73.526C696.848,73.526,708.806,73.526,720.765,73.526C732.723,73.526,744.682,73.526,756.641,73.526">
-                            </path>
+                            <g class="recharts-layer recharts-shape">
+                                <path name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="none" id="recharts-line-:r6:" height="158" width="681.640625" class="recharts-curve recharts-line-curve" stroke-dasharray="704.3584594726562px 704.3584594726562px" d="M75,48.285C86.959,52.468,98.917,56.651,110.876,61.018C122.834,65.384,134.793,70.377,146.752,74.487C158.71,78.597,170.669,85.679,182.627,85.679C194.586,85.679,206.545,65.573,218.503,65.573C230.462,65.573,242.421,72.887,254.379,75.698C266.338,78.509,278.296,80.443,290.255,82.44C302.214,84.437,314.172,87.68,326.131,87.68C338.089,87.68,350.048,72.104,362.007,72.104C373.965,72.104,385.924,78.257,397.882,80.004C409.841,81.751,421.8,81.858,433.758,82.624C445.717,83.39,457.675,83.539,469.634,84.599C481.593,85.659,493.551,88.983,505.51,88.983C517.468,88.983,529.427,87.188,541.386,85.837C553.344,84.485,565.303,82.925,577.262,80.873C589.22,78.821,601.179,73.526,613.137,73.526C625.096,73.526,637.055,78.793,649.013,78.793C660.972,78.793,672.93,73.526,684.889,73.526C696.848,73.526,708.806,73.526,720.765,73.526C732.723,73.526,744.682,73.526,756.641,73.526">
+                                </path>
+                            </g>
                         </g>
                         <g class="recharts-layer recharts-line">
-                            <path name="Extreme" stroke-width="1" stroke="#b23672 " fill="none" id="recharts-line-:r7:" height="158" width="681.640625" class="recharts-curve recharts-line-curve" stroke-dasharray="786.7827px 0.000014843750022919266px" d="M75,39.424C86.959,49.112,98.917,58.799,110.876,68.918C122.834,79.036,134.793,90.61,146.752,100.136C158.71,109.662,170.669,126.074,182.627,126.074C194.586,126.074,206.545,75.369,218.503,75.369C230.462,75.369,242.421,92.304,254.379,98.819C266.338,105.334,278.296,109.831,290.255,114.461C302.214,119.091,314.172,126.601,326.131,126.601C338.089,126.601,350.048,88.76,362.007,88.76C373.965,88.76,385.924,103.024,397.882,107.061C409.841,111.099,421.8,111.343,433.758,113.118C445.717,114.893,457.675,115.418,469.634,117.713C481.593,120.009,493.551,126.89,505.51,126.89C517.468,126.89,529.427,122.712,541.386,119.583C553.344,116.454,565.303,112.868,577.262,108.115C589.22,103.361,601.179,91.064,613.137,91.064C625.096,91.064,637.055,95.014,649.013,95.014C660.972,95.014,672.93,91.064,684.889,91.064C696.848,91.064,708.806,91.064,720.765,91.064C732.723,91.064,744.682,91.064,756.641,91.064">
-                            </path>
+                            <g class="recharts-layer recharts-shape">
+                                <path name="Extreme" stroke-width="1" stroke="#b23672 " fill="none" id="recharts-line-:r7:" height="158" width="681.640625" class="recharts-curve recharts-line-curve" stroke-dasharray="786.7827px 786.78271484375px" d="M75,39.424C86.959,49.112,98.917,58.799,110.876,68.918C122.834,79.036,134.793,90.61,146.752,100.136C158.71,109.662,170.669,126.074,182.627,126.074C194.586,126.074,206.545,75.369,218.503,75.369C230.462,75.369,242.421,92.304,254.379,98.819C266.338,105.334,278.296,109.831,290.255,114.461C302.214,119.091,314.172,126.601,326.131,126.601C338.089,126.601,350.048,88.76,362.007,88.76C373.965,88.76,385.924,103.024,397.882,107.061C409.841,111.099,421.8,111.343,433.758,113.118C445.717,114.893,457.675,115.418,469.634,117.713C481.593,120.009,493.551,126.89,505.51,126.89C517.468,126.89,529.427,122.712,541.386,119.583C553.344,116.454,565.303,112.868,577.262,108.115C589.22,103.361,601.179,91.064,613.137,91.064C625.096,91.064,637.055,95.014,649.013,95.014C660.972,95.014,672.93,91.064,684.889,91.064C696.848,91.064,708.806,91.064,720.765,91.064C732.723,91.064,744.682,91.064,756.641,91.064">
+                                </path>
+                            </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                         <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                             <line angle="0" height="30" orientation="bottom" x="75" y="173" width="681.640625" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="75" y1="173" x2="756.640625" y2="173">
                             </line>
@@ -1677,7 +1679,7 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                         <g class="recharts-layer recharts-line-dots">
                             <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="75" cy="48.41699999999999" class="recharts-dot recharts-line-dot">
                             </circle>
@@ -1805,13 +1807,13 @@ const data: CustomData[] = [
                             </circle>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                         <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                             <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                 <text height="30" orientation="bottom" width="681.640625" stroke="none" x="110.87582236842105" y="181" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">