You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Connected.Components/Components/Sparkline/SparkLine.razor

21 lines
2.0 KiB

@namespace Connected.Components
@using Connected.Utilities
@inherits UIComponent;
<svg @attributes="UserAttributes" class=@Class style=@Style stroke-linecap="round" display="block" stroke-width="@StrokeWidth" viewBox="0 0 300 75">
<defs>
<linearGradient id="1337" gradientUnits="userSpaceOnUse" x1="0" y1="100%" x2="0" y2="0">
<stop offset="0" stop-color="rgb(89,74,226)"></stop>
<stop offset="1" stop-color="rgb(255,69,138)"></stop>
</linearGradient>
</defs>
<path d="@StaticSparkLine" fill="none" stroke="url(#1337)" style="transition: stroke-dashoffset 2000ms ease 0s; stroke-dasharray: 433.901, 433.901; stroke-dashoffset: 0;"></path>
</svg>
@code {
[Parameter] public int StrokeWidth { get; set; } = 2;
public string StaticSparkLine { get; set; } = "M1 74L15.688473556373268 63.92508726536008S22.285714285714285 59.4 27.861539803229217 53.66326139708028L37.99560305391364 43.23673860291972S43.57142857142857 37.5 48.28394541736507 31.035312461010605L60.14462601120636 14.76468753898939S64.85714285714286 8.299999999999997 69.56965970307935 14.764687538989392L81.43034029692065 31.035312461010605S86.14285714285714 37.5 90.17298445189184 30.58927833920561L103.39844411953672 7.910721660794391S107.42857142857142 1 110.50476151148447 8.384920756093958L125.63809563137266 44.71507924390605S128.71428571428572 52.1 135.31152644362675 47.574912734639916L143.40275927065898 42.025087265360085S150 37.5 154.0301273090347 44.410721660794394L167.25558697667958 67.0892783392056S171.28571428571428 74 179.28571428571428 74L184.57142857142856 74S192.57142857142856 74 200.1387735214474 71.40475619499354L206.28979790712398 69.29524380500646S213.85714285714283 66.7 216.9333329400559 59.31507924390604L232.06666705994408 22.98492075609396S235.14285714285714 15.600000000000001 238.63960783972632 22.79532727288654L252.93182073170226 52.20467272711346S256.42857142857144 59.4 259.5047615114845 52.01507924390604L274.63809563137266 15.684920756093957S277.7142857142857 8.299999999999997 280.17997601927675 15.910543431311153L299 74";
}