644 lines
24 KiB
Svelte
644 lines
24 KiB
Svelte
<div class="w-full p-4 rounded-lg bg-white border border-grey-100">
|
|
<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 cx="12" cy="5" r="1" />
|
|
<circle cx="12" cy="19" r="1" />
|
|
</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"
|
|
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"
|
|
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"
|
|
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"
|
|
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" />
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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
|
|
style="position:absolute;width:0;height:0;visibility:hidden;display:none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|