-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a673403
commit 4754291
Showing
3 changed files
with
417 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| <section class="py-4 overflow-hidden"> | ||
| <div class="container px-4 mx-auto"> | ||
| <div class="pt-4 px-6 pb-6 bg-white border rounded-xl"> | ||
| <div class="flex flex-wrap items-center justify-between mb-11 -m-2"> | ||
| <div class="w-auto p-2"> | ||
| <h3 class="font-heading text-lg font-semibold">Analytics</h3> | ||
| </div> | ||
| <div class="w-auto p-2"> | ||
| <svg class="text-neutral-300" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M3.75 8C3.19772 8 2.75 8.44772 2.75 9C2.75 9.55228 3.19772 10 3.75 10V8ZM3.7575 10C4.30978 10 4.7575 9.55228 4.7575 9C4.7575 8.44772 4.30978 8 3.7575 8V10ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10V8ZM9.0075 10C9.55978 10 10.0075 9.55228 10.0075 9C10.0075 8.44772 9.55978 8 9.0075 8V10ZM14.25 8C13.6977 8 13.25 8.44772 13.25 9C13.25 9.55228 13.6977 10 14.25 10V8ZM14.2575 10C14.8098 10 15.2575 9.55228 15.2575 9C15.2575 8.44772 14.8098 8 14.2575 8V10ZM3.5 9C3.5 8.86193 3.61193 8.75 3.75 8.75V10.75C4.7165 10.75 5.5 9.9665 5.5 9H3.5ZM3.75 8.75C3.88807 8.75 4 8.86193 4 9H2C2 9.9665 2.7835 10.75 3.75 10.75V8.75ZM4 9C4 9.13807 3.88807 9.25 3.75 9.25V7.25C2.7835 7.25 2 8.0335 2 9H4ZM3.75 9.25C3.61193 9.25 3.5 9.13807 3.5 9H5.5C5.5 8.0335 4.7165 7.25 3.75 7.25V9.25ZM8.75 9C8.75 8.86193 8.86193 8.75 9 8.75V10.75C9.9665 10.75 10.75 9.9665 10.75 9H8.75ZM9 8.75C9.13807 8.75 9.25 8.86193 9.25 9H7.25C7.25 9.9665 8.0335 10.75 9 10.75V8.75ZM9.25 9C9.25 9.13807 9.13807 9.25 9 9.25V7.25C8.0335 7.25 7.25 8.0335 7.25 9H9.25ZM9 9.25C8.86193 9.25 8.75 9.13807 8.75 9H10.75C10.75 8.0335 9.9665 7.25 9 7.25V9.25ZM14 9C14 8.86193 14.1119 8.75 14.25 8.75V10.75C15.2165 10.75 16 9.9665 16 9H14ZM14.25 8.75C14.3881 8.75 14.5 8.86193 14.5 9H12.5C12.5 9.9665 13.2835 10.75 14.25 10.75V8.75ZM14.5 9C14.5 9.13807 14.3881 9.25 14.25 9.25V7.25C13.2835 7.25 12.5 8.0335 12.5 9H14.5ZM14.25 9.25C14.1119 9.25 14 9.13807 14 9H16C16 8.0335 15.2165 7.25 14.25 7.25V9.25ZM3.75 10H3.7575V8H3.75V10ZM9 10H9.0075V8H9V10ZM14.25 10H14.2575V8H14.25V10Z" fill="currentColor"></path> | ||
| </svg> | ||
| </div> | ||
| </div> | ||
| <div class="chart mb-10" data-type="donut" style="min-height: 238.7px;"> | ||
| <div id="apexchartsgydeukmt" class="apexcharts-canvas apexchartsgydeukmt apexcharts-theme-light" style="width: 1198px; height: 238.7px;"> | ||
| <svg id="SvgjsSvg2112" width="1198" height="238.70000000000002" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent;"> | ||
| <foreignobject x="0" y="0" width="1198" height="238.70000000000002"> | ||
| <div class="apexcharts-legend" xmlns="http://www.w3.org/1999/xhtml"></div> | ||
| </foreignobject> | ||
| <g id="SvgjsG2114" class="apexcharts-inner apexcharts-graphical" transform="translate(482, 0)"> | ||
| <defs id="SvgjsDefs2113"><clippath id="gridRectMaskgydeukmt"><rect id="SvgjsRect2115" width="242" height="270" x="-4" y="-6" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect></clippath><clippath id="forecastMaskgydeukmt"></clippath><clippath id="nonForecastMaskgydeukmt"></clippath><clippath id="gridRectMarkerMaskgydeukmt"><rect id="SvgjsRect2116" width="240" height="262" x="-2" y="-2" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect></clippath></defs> | ||
| <g id="SvgjsG2117" class="apexcharts-pie"> | ||
| <g id="SvgjsG2118" transform="translate(0, 0) scale(1)"> | ||
| <circle id="SvgjsCircle2119" r="86.20634146341465" cx="118" cy="118" fill="transparent"></circle> | ||
| <g id="SvgjsG2120" class="apexcharts-slices"> | ||
| <g id="SvgjsG2121" class="apexcharts-series apexcharts-pie-series" seriesname="Sale" rel="1" data:realindex="0"> | ||
| <path id="SvgjsPath2122" d="M 118 8.878048780487788 A 109.12195121951221 109.12195121951221 0 0 1 118 227.1219512195122 L 118 204.20634146341465 A 86.20634146341465 86.20634146341465 0 0 0 118 31.793658536585355 L 118 8.878048780487788 z " fill="rgba(63,60,255,1)" fill-opacity="1" stroke-opacity="1" stroke-linecap="round" stroke-width="2" stroke-dasharray="0" class="apexcharts-pie-area apexcharts-donut-slice-0" index="0" j="0" data:angle="180" data:startangle="0" data:strokewidth="2" data:value="40" data:pathorig="M 118 8.878048780487788 A 109.12195121951221 109.12195121951221 0 0 1 118 227.1219512195122 L 118 204.20634146341465 A 86.20634146341465 86.20634146341465 0 0 0 118 31.793658536585355 L 118 8.878048780487788 z " stroke="transparent"></path> | ||
| </g> | ||
| <g id="SvgjsG2123" class="apexcharts-series apexcharts-pie-series" seriesname="Expenses" rel="2" data:realindex="1"> | ||
| <path id="SvgjsPath2124" d="M 118 227.1219512195122 A 109.12195121951221 109.12195121951221 0 0 1 8.878048780487788 118.00000000000001 L 31.793658536585355 118.00000000000001 A 86.20634146341465 86.20634146341465 0 0 0 118 204.20634146341465 L 118 227.1219512195122 z " fill="rgba(12,21,35,1)" fill-opacity="1" stroke-opacity="1" stroke-linecap="round" stroke-width="2" stroke-dasharray="0" class="apexcharts-pie-area apexcharts-donut-slice-1" index="0" j="1" data:angle="90" data:startangle="180" data:strokewidth="2" data:value="20" data:pathorig="M 118 227.1219512195122 A 109.12195121951221 109.12195121951221 0 0 1 8.878048780487788 118.00000000000001 L 31.793658536585355 118.00000000000001 A 86.20634146341465 86.20634146341465 0 0 0 118 204.20634146341465 L 118 227.1219512195122 z " stroke="transparent"></path> | ||
| </g> | ||
| <g id="SvgjsG2125" class="apexcharts-series apexcharts-pie-series" seriesname="Revenue" rel="3" data:realindex="2"> | ||
| <path id="SvgjsPath2126" d="M 8.878048780487788 118.00000000000001 A 109.12195121951221 109.12195121951221 0 0 1 117.98095462674686 8.878050442510144 L 117.98495415513003 31.79365984958301 A 86.20634146341465 86.20634146341465 0 0 0 31.793658536585355 118.00000000000001 L 8.878048780487788 118.00000000000001 z " fill="rgba(203,210,217,1)" fill-opacity="1" stroke-opacity="1" stroke-linecap="round" stroke-width="2" stroke-dasharray="0" class="apexcharts-pie-area apexcharts-donut-slice-2" index="0" j="2" data:angle="90" data:startangle="270" data:strokewidth="2" data:value="20" data:pathorig="M 8.878048780487788 118.00000000000001 A 109.12195121951221 109.12195121951221 0 0 1 117.98095462674686 8.878050442510144 L 117.98495415513003 31.79365984958301 A 86.20634146341465 86.20634146341465 0 0 0 31.793658536585355 118.00000000000001 L 8.878048780487788 118.00000000000001 z " stroke="transparent"></path> | ||
| </g> | ||
| </g> | ||
| </g> | ||
| <g id="SvgjsG2127" class="apexcharts-datalabels-group" transform="translate(0, 0) scale(1)"><text id="SvgjsText2128" font-family="Inter" x="118" y="143" text-anchor="middle" dominant-baseline="auto" font-size="14px" font-weight="400" fill="#7f8995" class="apexcharts-text apexcharts-datalabel-label" style="font-family: Inter;">Investment</text><text id="SvgjsText2129" font-family="Inter" x="118" y="119" text-anchor="middle" dominant-baseline="auto" font-size="28px" font-weight="600" fill="#0c1523" class="apexcharts-text apexcharts-datalabel-value" style="font-family: Inter;">80%</text></g> | ||
| </g> | ||
| <line id="SvgjsLine2130" x1="0" y1="0" x2="236" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" stroke-linecap="butt" class="apexcharts-ycrosshairs"></line><line id="SvgjsLine2131" x1="0" y1="0" x2="236" y2="0" stroke-dasharray="0" stroke-width="0" stroke-linecap="butt" class="apexcharts-ycrosshairs-hidden"></line> | ||
| </g> | ||
| </svg> | ||
| <div class="apexcharts-tooltip apexcharts-theme-dark"> | ||
| <div class="apexcharts-tooltip-series-group" style="order: 1;"> | ||
| <span class="apexcharts-tooltip-marker" style="background-color: rgb(63, 60, 255);"></span> | ||
| <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;"> | ||
| <div class="apexcharts-tooltip-y-group"> | ||
| <span class="apexcharts-tooltip-text-y-label"></span> | ||
| <span class="apexcharts-tooltip-text-y-value"></span> | ||
| </div> | ||
| <div class="apexcharts-tooltip-goals-group"> | ||
| <span class="apexcharts-tooltip-text-goals-label"></span> | ||
| <span class="apexcharts-tooltip-text-goals-value"></span> | ||
| </div> | ||
| <div class="apexcharts-tooltip-z-group"> | ||
| <span class="apexcharts-tooltip-text-z-label"></span> | ||
| <span class="apexcharts-tooltip-text-z-value"></span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="apexcharts-tooltip-series-group" style="order: 2;"> | ||
| <span class="apexcharts-tooltip-marker" style="background-color: rgb(12, 21, 35);"></span> | ||
| <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;"> | ||
| <div class="apexcharts-tooltip-y-group"> | ||
| <span class="apexcharts-tooltip-text-y-label"></span> | ||
| <span class="apexcharts-tooltip-text-y-value"></span> | ||
| </div> | ||
| <div class="apexcharts-tooltip-goals-group"> | ||
| <span class="apexcharts-tooltip-text-goals-label"></span> | ||
| <span class="apexcharts-tooltip-text-goals-value"></span> | ||
| </div> | ||
| <div class="apexcharts-tooltip-z-group"> | ||
| <span class="apexcharts-tooltip-text-z-label"></span> | ||
| <span class="apexcharts-tooltip-text-z-value"></span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="apexcharts-tooltip-series-group" style="order: 3;"> | ||
| <span class="apexcharts-tooltip-marker" style="background-color: rgb(203, 210, 217);"></span> | ||
| <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;"> | ||
| <div class="apexcharts-tooltip-y-group"> | ||
| <span class="apexcharts-tooltip-text-y-label"></span> | ||
| <span class="apexcharts-tooltip-text-y-value"></span> | ||
| </div> | ||
| <div class="apexcharts-tooltip-goals-group"> | ||
| <span class="apexcharts-tooltip-text-goals-label"></span> | ||
| <span class="apexcharts-tooltip-text-goals-value"></span> | ||
| </div> | ||
| <div class="apexcharts-tooltip-z-group"> | ||
| <span class="apexcharts-tooltip-text-z-label"></span> | ||
| <span class="apexcharts-tooltip-text-z-value"></span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="flex flex-wrap justify-center -m-5"> | ||
| <div class="w-auto p-5"> | ||
| <div class="inline-flex items-center"> | ||
| <div class="mr-3 w-3 h-3 bg-gradient-purple-top rounded-full"></div> | ||
| <span class="font-medium">Sale</span> | ||
| </div> | ||
| </div> | ||
| <div class="w-auto p-5"> | ||
| <div class="inline-flex items-center"> | ||
| <div class="mr-3 w-3 h-3 bg-neutral-600 rounded-full"></div> | ||
| <span class="font-medium">Expenses</span> | ||
| </div> | ||
| </div> | ||
| <div class="w-auto p-5"> | ||
| <div class="inline-flex items-center"> | ||
| <div class="mr-3 w-3 h-3 bg-neutral-200 rounded-full"></div> | ||
| <span class="font-medium">Revenue</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> |
Oops, something went wrong.