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 227.20 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>
                            -0.67 USD (-0.29%)
                        </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(69.48201412655648,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(128.46402825311293,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(187.4460423796694,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(246.4280565062259,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(305.4100706327824,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(364.3920847593388,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(423.3740988858953,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>
                        <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,40.645631067961645)">
                                <line stroke="currentColor" x2="460" stroke-opacity="0.5" stroke-dasharray="2,2"/>
                                <text fill="rgba(127, 127, 127, .8)" x="0" dy="-4">234.0</text>
                            </g>
                            <g class="tick" opacity="1" transform="translate(0,73.41262135922375)">
                                <line stroke="currentColor" x2="460" stroke-opacity="0.5" stroke-dasharray="2,2"/>
                                <text fill="rgba(127, 127, 127, .8)" x="0" dy="-4">233.5</text>
                            </g>
                            <g class="tick" opacity="1" transform="translate(0,106.17961165048584)">
                                <line stroke="currentColor" x2="460" stroke-opacity="0.5" stroke-dasharray="2,2"/>
                                <text fill="rgba(127, 127, 127, .8)" x="0" dy="-4">233.0</text>
                            </g>
                            <g class="tick" opacity="1" transform="translate(0,138.94660194174796)">
                                <line stroke="currentColor" x2="460" stroke-opacity="0.5" stroke-dasharray="2,2"/>
                                <text fill="rgba(127, 127, 127, .8)" x="0" dy="-4">232.5</text>
                            </g>
                        </g>
                        <path transform="translate(10,10)" d="M10,145L19.83,89.296L29.661,70.947L39.491,92.573L49.321,120.097L59.152,118.786L68.982,129.272L78.812,94.539L88.643,94.539L98.473,110.922L108.303,125.995L118.134,112.233L127.964,55.874L137.794,83.398L147.625,50.631L157.455,42.767L167.285,48.665L177.116,59.15L186.946,59.806L196.776,55.218L206.607,57.184L216.437,44.078L226.267,49.976L236.098,46.699L245.928,52.597L255.758,51.286L265.589,49.32L275.419,42.767L285.249,50.631L295.08,46.044L304.91,45.388L314.74,46.699L324.571,15.243L334.401,19.83L344.231,19.83L354.062,27.694L363.892,33.592L373.722,10L383.553,19.175L393.383,28.35L403.213,44.078L413.044,43.422L422.874,23.762L432.704,23.762L442.535,17.209L452.365,34.248L460,30.971" fill="transparent" stroke="#87ceeb" stroke-width="2"/>
                        <path transform="translate(10,10)" d="M10,145L19.83,145L29.661,145L39.491,145L49.321,145L59.152,145L68.982,145L78.812,145L88.643,145L98.473,145L108.303,145L118.134,145L127.964,145L137.794,145L147.625,145L157.455,145L167.285,145L177.116,145L186.946,145L196.776,145L206.607,145L216.437,145L226.267,145L236.098,145L245.928,145L255.758,145L265.589,145L275.419,145L285.249,145L295.08,145L304.91,145L314.74,145L324.571,145L334.401,145L344.231,145L354.062,145L363.892,145L373.722,145L383.553,145L393.383,145L403.213,145L413.044,145L422.874,145L432.704,145L442.535,145L452.365,145L460,145L460,30.971L452.365,34.248L442.535,17.209L432.704,23.762L422.874,23.762L413.044,43.422L403.213,44.078L393.383,28.35L383.553,19.175L373.722,10L363.892,33.592L354.062,27.694L344.231,19.83L334.401,19.83L324.571,15.243L314.74,46.699L304.91,45.388L295.08,46.044L285.249,50.631L275.419,42.767L265.589,49.32L255.758,51.286L245.928,52.597L236.098,46.699L226.267,49.976L216.437,44.078L206.607,57.184L196.776,55.218L186.946,59.806L177.116,59.15L167.285,48.665L157.455,42.767L147.625,50.631L137.794,83.398L127.964,55.874L118.134,112.233L108.303,125.995L98.473,110.922L88.643,94.539L78.812,94.539L68.982,129.272L59.152,118.786L49.321,120.097L39.491,92.573L29.661,70.947L19.83,89.296L10,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>