metrics.plugin.stock.svg

<svg xmlns="http://www.w3.org/2000/svg" width="480" height="302" class="">
    <defs>
        <style/>
    </defs>
    <style>@keyframes animation-gauge{0%{stroke-dasharray:0 329}}@keyframes animation-rainbow{0%,to{color:#7f00ff;fill:#7f00ff}14%{color:#a933ff;fill:#a933ff}29%{color:#007fff;fill:#007fff}43%{color:#00ff7f;fill:#00ff7f}57%{color:#ff0;fill:#ff0}71%{color:#ff7f00;fill:#ff7f00}86%{color:red;fill:red}}svg{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;font-size:14px;color:#777}h2{margin:8px 0 2px;padding:0;color:#0366d6;font-weight:400;font-size:16px}h2 svg{fill:currentColor}section&gt;.field{margin-left:5px;margin-right:5px}.field{display:flex;align-items:center;margin-bottom:2px;white-space:nowrap}.field svg{margin:0 8px;fill:#959da5;flex-shrink:0}.row{display:flex;flex-wrap:wrap}.row section{flex:1 1 0}:root{--color-calendar-graph-day-bg:#ebedf0;--color-calendar-graph-day-border:rgba(27,31,35,0.06);--color-calendar-graph-day-L1-bg:#9be9a8;--color-calendar-graph-day-L2-bg:#40c463;--color-calendar-graph-day-L3-bg:#30a14e;--color-calendar-graph-day-L4-bg:#216e39;--color-calendar-halloween-graph-day-L1-bg:#ffee4a;--color-calendar-halloween-graph-day-L2-bg:#ffc501;--color-calendar-halloween-graph-day-L3-bg:#fe9600;--color-calendar-halloween-graph-day-L4-bg:#03001c;--color-calendar-winter-graph-day-L1-bg:#0a3069;--color-calendar-winter-graph-day-L2-bg:#0969da;--color-calendar-winter-graph-day-L3-bg:#54aeff;--color-calendar-winter-graph-day-L4-bg:#b6e3ff;--color-calendar-graph-day-L4-border:rgba(27,31,35,0.06);--color-calendar-graph-day-L3-border:rgba(27,31,35,0.06);--color-calendar-graph-day-L2-border:rgba(27,31,35,0.06);--color-calendar-graph-day-L1-border:rgba(27,31,35,0.06)}#metrics-end{width:100%}</style>
    <style/>
    <foreignObject x="0" y="0" width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" class="items-wrapper">
            <section>
                <h2 class="field">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                        <path d="M10.75 9a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5z"/>
                        <path fill-rule="evenodd" d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0114.25 14H1.75A1.75 1.75 0 010 12.25v-8.5zm14.5 0V5h-13V3.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25zm0 2.75h-13v5.75c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V6.5z"/>
                    </svg>
                    Stock prices for TSLA
                </h2>
                <div class="row">
                    <section>
                        <div class="field">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                                <path fill-rule="evenodd" d="M1.5 14.25c0 .138.112.25.25.25H4v-1.25a.75.75 0 01.75-.75h2.5a.75.75 0 01.75.75v1.25h2.25a.25.25 0 00.25-.25V1.75a.25.25 0 00-.25-.25h-8.5a.25.25 0 00-.25.25v12.5zM1.75 16A1.75 1.75 0 010 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 00.25-.25V8.285a.25.25 0 00-.111-.208l-1.055-.703a.75.75 0 11.832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0114.25 16h-3.5a.75.75 0 01-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 01-.75-.75V14h-1v1.25a.75.75 0 01-.75.75h-3zM3 3.75A.75.75 0 013.75 3h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 3.75zM3.75 6a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM3 9.75A.75.75 0 013.75 9h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 9.75zM7.75 9a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM7 6.75A.75.75 0 017.75 6h.5a.75.75 0 010 1.5h-.5A.75.75 0 017 6.75zM7.75 3a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z"/>
                            </svg>
                            Tesla, Inc.
                        </div>
                        <div class="field">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                                <path fill-rule="evenodd" d="M6 2a.75.75 0 01.696.471L10 10.731l1.304-3.26A.75.75 0 0112 7h3.25a.75.75 0 010 1.5h-2.742l-1.812 4.528a.75.75 0 01-1.392 0L6 4.77 4.696 8.03A.75.75 0 014 8.5H.75a.75.75 0 010-1.5h2.742l1.812-4.529A.75.75 0 016 2z"/>
                            </svg>
                            Valued at 254.22 USD
                        </div>
                    </section>
                    <section>
                        <div class="field">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                                <path fill-rule="evenodd" d="M4.75 0a.75.75 0 01.75.75V2h5V.75a.75.75 0 011.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 014.75 0zm0 3.5h8.5a.25.25 0 01.25.25V6h-11V3.75a.25.25 0 01.25-.25h2zm-2.25 4v6.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V7.5h-11z"/>
                            </svg>
                            Today
                        </div>
                        <div class="field">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                                <path fill-rule="evenodd" d="M13.03 8.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.47 9.28a.75.75 0 011.06-1.06l2.97 2.97V3.75a.75.75 0 011.5 0v7.44l2.97-2.97a.75.75 0 011.06 0z"/>
                            </svg>
                            -2.80 USD (-1.10%)
                        </div>
                    </section>
                </div>
                <div class="stock-chart">
                    <svg xmlns="http://www.w3.org/2000/svg" width="480" height="200">
                        <g transform="translate(10,155)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
                            <path class="domain" stroke="rgba(127, 127, 127, .8)" d="M10.5,0.5H460.5"/>
                            <g class="tick" opacity="1" transform="translate(10.5,0)">
                                <line stroke="currentColor" y2="6" stroke-opacity="0.5"/>
                                <text fill="rgba(127, 127, 127, .8)" y="9" dy="0.71em" transform="translate(-5,5) rotate(-45)" style="text-anchor: end;">08 AM</text>
                            </g>
                            <g class="tick" opacity="1" transform="translate(65.54213101386246,0)">
                                <line stroke="currentColor" y2="6" stroke-opacity="0.5"/>
                                <text fill="rgba(127, 127, 127, .8)" y="9" dy="0.71em" transform="translate(-5,5) rotate(-45)" style="text-anchor: end;">08:30</text>
                            </g>
                            <g class="tick" opacity="1" transform="translate(120.58426202772492,0)">
                                <line stroke="currentColor" y2="6" stroke-opacity="0.5"/>
                                <text fill="rgba(127, 127, 127, .8)" y="9" dy="0.71em" transform="translate(-5,5) rotate(-45)" style="text-anchor: end;">09 AM</text>
                            </g>
                            <g class="tick" opacity="1" transform="translate(175.6263930415874,0)">
                                <line stroke="currentColor" y2="6" stroke-opacity="0.5"/>
                                <text fill="rgba(127, 127, 127, .8)" y="9" dy="0.71em" transform="translate(-5,5) rotate(-45)" style="text-anchor: end;">09:30</text>
                            </g>
                            <g class="tick" opacity="1" transform="translate(230.66852405544984,0)">
                                <line stroke="currentColor" y2="6" stroke-opacity="0.5"/>
                                <text fill="rgba(127, 127, 127, .8)" y="9" dy="0.71em" transform="translate(-5,5) rotate(-45)" style="text-anchor: end;">10 AM</text>
                            </g>
                            <g class="tick" opacity="1" transform="translate(285.7106550693123,0)">
                                <line stroke="currentColor" y2="6" stroke-opacity="0.5"/>
                                <text fill="rgba(127, 127, 127, .8)" y="9" dy="0.71em" transform="translate(-5,5) rotate(-45)" style="text-anchor: end;">10:30</text>
                            </g>
                            <g class="tick" opacity="1" transform="translate(340.7527860831748,0)">
                                <line stroke="currentColor" y2="6" stroke-opacity="0.5"/>
                                <text fill="rgba(127, 127, 127, .8)" y="9" dy="0.71em" transform="translate(-5,5) rotate(-45)" style="text-anchor: end;">11 AM</text>
                            </g>
                            <g class="tick" opacity="1" transform="translate(395.7949170970372,0)">
                                <line stroke="currentColor" y2="6" stroke-opacity="0.5"/>
                                <text fill="rgba(127, 127, 127, .8)" y="9" dy="0.71em" transform="translate(-5,5) rotate(-45)" style="text-anchor: end;">11:30</text>
                            </g>
                            <g class="tick" opacity="1" transform="translate(450.8370481108997,0)">
                                <line stroke="currentColor" y2="6" stroke-opacity="0.5"/>
                                <text fill="rgba(127, 127, 127, .8)" y="9" dy="0.71em" transform="translate(-5,5) rotate(-45)" style="text-anchor: end;">12 PM</text>
                            </g>
                        </g>
                        <g transform="translate(10,10)" fill="none" font-size="10" font-family="sans-serif" text-anchor="start">
                            <g class="tick" opacity="1" transform="translate(0,18.972803347279104)">
                                <line stroke="currentColor" x2="460" stroke-opacity="0.5" stroke-dasharray="2,2"/>
                                <text fill="rgba(127, 127, 127, .8)" x="0" dy="-4">256.5</text>
                            </g>
                            <g class="tick" opacity="1" transform="translate(0,47.21548117154703)">
                                <line stroke="currentColor" x2="460" stroke-opacity="0.5" stroke-dasharray="2,2"/>
                                <text fill="rgba(127, 127, 127, .8)" x="0" dy="-4">256.0</text>
                            </g>
                            <g class="tick" opacity="1" transform="translate(0,75.45815899581498)">
                                <line stroke="currentColor" x2="460" stroke-opacity="0.5" stroke-dasharray="2,2"/>
                                <text fill="rgba(127, 127, 127, .8)" x="0" dy="-4">255.5</text>
                            </g>
                            <g class="tick" opacity="1" transform="translate(0,103.70083682008293)">
                                <line stroke="currentColor" x2="460" stroke-opacity="0.5" stroke-dasharray="2,2"/>
                                <text fill="rgba(127, 127, 127, .8)" x="0" dy="-4">255.0</text>
                            </g>
                            <g class="tick" opacity="1" transform="translate(0,131.94351464435087)">
                                <line stroke="currentColor" x2="460" stroke-opacity="0.5" stroke-dasharray="2,2"/>
                                <text fill="rgba(127, 127, 127, .8)" x="0" dy="-4">254.5</text>
                            </g>
                        </g>
                        <path transform="translate(10,10)" d="M10,145L19.174,96.987L28.347,91.339L37.521,108.849L46.695,86.255L55.868,59.142L65.042,10L74.216,29.77L83.39,71.569L92.563,57.448L101.737,49.54L110.911,35.418L120.084,33.724L129.258,32.594L138.432,46.715L147.605,35.418L156.779,46.715L165.953,52.929L175.126,67.05L184.3,67.05L193.474,56.318L202.647,65.921L211.821,64.226L220.995,69.31L230.169,65.356L239.342,47.28L248.516,42.762L257.69,44.456L266.863,46.715L276.037,50.669L285.211,68.18L294.384,58.577L303.558,64.226L312.732,54.059L321.905,53.494L331.079,59.142L340.253,66.485L349.426,63.661L358.6,63.661L367.774,55.188L376.948,53.494L386.121,51.799L395.295,24.686L404.469,45.586L413.642,33.159L422.816,28.64L431.99,19.603L441.163,12.259L450.337,16.665L460,18.473" fill="transparent" stroke="#87ceeb" stroke-width="2"/>
                        <path transform="translate(10,10)" d="M10,145L19.174,145L28.347,145L37.521,145L46.695,145L55.868,145L65.042,145L74.216,145L83.39,145L92.563,145L101.737,145L110.911,145L120.084,145L129.258,145L138.432,145L147.605,145L156.779,145L165.953,145L175.126,145L184.3,145L193.474,145L202.647,145L211.821,145L220.995,145L230.169,145L239.342,145L248.516,145L257.69,145L266.863,145L276.037,145L285.211,145L294.384,145L303.558,145L312.732,145L321.905,145L331.079,145L340.253,145L349.426,145L358.6,145L367.774,145L376.948,145L386.121,145L395.295,145L404.469,145L413.642,145L422.816,145L431.99,145L441.163,145L450.337,145L460,145L460,18.473L450.337,16.665L441.163,12.259L431.99,19.603L422.816,28.64L413.642,33.159L404.469,45.586L395.295,24.686L386.121,51.799L376.948,53.494L367.774,55.188L358.6,63.661L349.426,63.661L340.253,66.485L331.079,59.142L321.905,53.494L312.732,54.059L303.558,64.226L294.384,58.577L285.211,68.18L276.037,50.669L266.863,46.715L257.69,44.456L248.516,42.762L239.342,47.28L230.169,65.356L220.995,69.31L211.821,64.226L202.647,65.921L193.474,56.318L184.3,67.05L175.126,67.05L165.953,52.929L156.779,46.715L147.605,35.418L138.432,46.715L129.258,32.594L120.084,33.724L110.911,35.418L101.737,49.54L92.563,57.448L83.39,71.569L74.216,29.77L65.042,10L55.868,59.142L46.695,86.255L37.521,108.849L28.347,91.339L19.174,96.987L10,145Z" fill="rgba(88, 166, 255, .1)"/>
                    </svg>
                </div>
            </section>
        </div>
        <div xmlns="http://www.w3.org/1999/xhtml" id="metrics-end"></div>
    </foreignObject>
</svg>