281 lines
18 KiB
Svelte
281 lines
18 KiB
Svelte
<div class="w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
|
|
<div class="flex flex-row items-center justify-between mb-6">
|
|
<div class="flex flex-col">
|
|
<div class="text-sm font-light text-grey-500">Conversions</div>
|
|
<div class="text-sm font-bold"><span>This year</span></div>
|
|
</div>
|
|
<div class="relative"><button
|
|
class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"><svg
|
|
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
|
stroke-linejoin="round" class="stroke-current stroke-1" size="18" height="18" width="18"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="1"></circle>
|
|
<circle cx="12" cy="5" r="1"></circle>
|
|
<circle cx="12" cy="19" r="1"></circle>
|
|
</svg></button>
|
|
<div class="dropdown absolute top-0 right-0 mt-8 ">
|
|
<div class="dropdown-content w-48 bottom-start">
|
|
<div class="flex flex-col w-full">
|
|
<ul class="list-none">
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">Today</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This week</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This month</a></li>
|
|
<li><a
|
|
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
|
href="/">This year</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row w-full">
|
|
<div style="width:100%;height:240px">
|
|
<div class="recharts-responsive-container" style="width:100%;height:100%">
|
|
<div class="recharts-wrapper"
|
|
style="position: relative; cursor: default; width: 704px; height: 240px;"><svg
|
|
class="recharts-surface" width="704" height="240" viewBox="0 0 704 240" version="1.1">
|
|
<defs>
|
|
<clipPath id="recharts3-clip">
|
|
<rect x="40" y="10" height="190" width="654"></rect>
|
|
</clipPath>
|
|
</defs>
|
|
<g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
|
|
<g class="recharts-cartesian-axis-ticks">
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30" x="67.25"
|
|
y="208" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
|
text-anchor="middle">
|
|
<tspan x="67.25" dy="0.71em">Jan</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
|
x="121.75" y="208" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="121.75" dy="0.71em">Feb</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
|
x="176.25" y="208" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="176.25" dy="0.71em">Mar</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
|
x="230.75" y="208" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="230.75" dy="0.71em">Apr</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
|
x="285.25" y="208" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="285.25" dy="0.71em">May</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
|
x="339.75" y="208" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="339.75" dy="0.71em">Jun</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
|
x="394.25" y="208" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="394.25" dy="0.71em">Jul</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
|
x="448.75" y="208" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="448.75" dy="0.71em">Aug</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
|
x="503.25" y="208" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="503.25" dy="0.71em">Sep</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
|
x="557.75" y="208" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="557.75" dy="0.71em">Oct</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
|
x="612.25" y="208" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="612.25" dy="0.71em">Nov</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
|
x="666.75" y="208" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
|
<tspan x="666.75" dy="0.71em">Dec</tspan>
|
|
</text></g>
|
|
</g>
|
|
</g>
|
|
<g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
|
|
<g class="recharts-cartesian-axis-ticks">
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
|
y="200" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
|
text-anchor="end">
|
|
<tspan x="32" dy="0.355em">0</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
|
y="152.5" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
|
|
<tspan x="32" dy="0.355em">65</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
|
y="105" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
|
text-anchor="end">
|
|
<tspan x="32" dy="0.355em">130</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
|
y="57.5" stroke="none" fill="#666"
|
|
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
|
|
<tspan x="32" dy="0.355em">195</tspan>
|
|
</text></g>
|
|
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
|
y="10" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
|
text-anchor="end">
|
|
<tspan x="32" dy="0.355em">260</tspan>
|
|
</text></g>
|
|
</g>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar">
|
|
<g class="recharts-layer recharts-bar-rectangles">
|
|
<g class="recharts-layer">
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#90caf9" width="10" height="119.11538461538461" x="55" y="80.88461538461539"
|
|
radius="0" class="recharts-rectangle"
|
|
d="M 55,80.88461538461539 h 10 v 119.11538461538461 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#90caf9" width="10" height="95" x="109.5" y="105" radius="0"
|
|
class="recharts-rectangle" d="M 109.5,105 h 10 v 95 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#90caf9" width="10" height="122.03846153846155" x="164" y="77.96153846153845"
|
|
radius="0" class="recharts-rectangle"
|
|
d="M 164,77.96153846153845 h 10 v 122.03846153846155 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#90caf9" width="10" height="81.11538461538461" x="218.5"
|
|
y="118.88461538461539" radius="0" class="recharts-rectangle"
|
|
d="M 218.5,118.88461538461539 h 10 v 81.11538461538461 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#90caf9" width="10" height="114" x="273" y="86" radius="0"
|
|
class="recharts-rectangle" d="M 273,86 h 10 v 114 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#90caf9" width="10" height="117.65384615384616" x="327.5"
|
|
y="82.34615384615384" radius="0" class="recharts-rectangle"
|
|
d="M 327.5,82.34615384615384 h 10 v 117.65384615384616 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#90caf9" width="10" height="103.76923076923076" x="382" y="96.23076923076924"
|
|
radius="0" class="recharts-rectangle"
|
|
d="M 382,96.23076923076924 h 10 v 103.76923076923076 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#90caf9" width="10" height="92.80769230769232" x="436.5"
|
|
y="107.19230769230768" radius="0" class="recharts-rectangle"
|
|
d="M 436.5,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#90caf9" width="10" height="92.80769230769232" x="491" y="107.19230769230768"
|
|
radius="0" class="recharts-rectangle"
|
|
d="M 491,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#90caf9" width="10" height="127.8846153846154" x="545.5" y="72.1153846153846"
|
|
radius="0" class="recharts-rectangle"
|
|
d="M 545.5,72.1153846153846 h 10 v 127.8846153846154 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#90caf9" width="10" height="105.23076923076924" x="600" y="94.76923076923076"
|
|
radius="0" class="recharts-rectangle"
|
|
d="M 600,94.76923076923076 h 10 v 105.23076923076924 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#90caf9" width="10" height="115.46153846153845" x="654.5"
|
|
y="84.53846153846155" radius="0" class="recharts-rectangle"
|
|
d="M 654.5,84.53846153846155 h 10 v 115.46153846153845 h -10 Z"></path>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar">
|
|
<g class="recharts-layer recharts-bar-rectangles">
|
|
<g class="recharts-layer">
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#1e88e5" width="10" height="112.53846153846155" x="69" y="87.46153846153845"
|
|
radius="0" class="recharts-rectangle"
|
|
d="M 69,87.46153846153845 h 10 v 112.53846153846155 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#1e88e5" width="10" height="151.26923076923077" x="123.5"
|
|
y="48.730769230769226" radius="0" class="recharts-rectangle"
|
|
d="M 123.5,48.730769230769226 h 10 v 151.26923076923077 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#1e88e5" width="10" height="181.23076923076923" x="178" y="18.769230769230774"
|
|
radius="0" class="recharts-rectangle"
|
|
d="M 178,18.769230769230774 h 10 v 181.23076923076923 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#1e88e5" width="10" height="165.8846153846154" x="232.5" y="34.11538461538461"
|
|
radius="0" class="recharts-rectangle"
|
|
d="M 232.5,34.11538461538461 h 10 v 165.8846153846154 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#1e88e5" width="10" height="156.38461538461536" x="287" y="43.61538461538464"
|
|
radius="0" class="recharts-rectangle"
|
|
d="M 287,43.61538461538464 h 10 v 156.38461538461536 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#1e88e5" width="10" height="118.38461538461539" x="341.5"
|
|
y="81.61538461538461" radius="0" class="recharts-rectangle"
|
|
d="M 341.5,81.61538461538461 h 10 v 118.38461538461539 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#1e88e5" width="10" height="138.84615384615384" x="396" y="61.15384615384616"
|
|
radius="0" class="recharts-rectangle"
|
|
d="M 396,61.15384615384616 h 10 v 138.84615384615384 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#1e88e5" width="10" height="175.3846153846154" x="450.5"
|
|
y="24.615384615384613" radius="0" class="recharts-rectangle"
|
|
d="M 450.5,24.615384615384613 h 10 v 175.3846153846154 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#1e88e5" width="10" height="155.65384615384613" x="505" y="44.34615384615387"
|
|
radius="0" class="recharts-rectangle"
|
|
d="M 505,44.34615384615387 h 10 v 155.65384615384613 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#1e88e5" width="10" height="179.76923076923077" x="559.5"
|
|
y="20.230769230769226" radius="0" class="recharts-rectangle"
|
|
d="M 559.5,20.230769230769226 h 10 v 179.76923076923077 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#1e88e5" width="10" height="173.19230769230768" x="614" y="26.80769230769232"
|
|
radius="0" class="recharts-rectangle"
|
|
d="M 614,26.80769230769232 h 10 v 173.19230769230768 h -10 Z"></path>
|
|
</g>
|
|
<g class="recharts-layer recharts-bar-rectangle">
|
|
<path fill="#1e88e5" width="10" height="146.15384615384616" x="668.5"
|
|
y="53.84615384615384" radius="0" class="recharts-rectangle"
|
|
d="M 668.5,53.84615384615384 h 10 v 146.15384615384616 h -10 Z"></path>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<div class="recharts-tooltip-wrapper"
|
|
style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; transform: translate(538.875px, 126px);">
|
|
</div>
|
|
</div>
|
|
<div style="position:absolute;width:0;height:0;visibility:hidden;display:none"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |