fix(ui): fix weird wording, bug with svg
This commit is contained in:
parent
fec8b9e13c
commit
a2c999ccef
3 changed files with 57 additions and 8 deletions
48
frontend/app/svg/icons/dashboard-icn.svg
Normal file
48
frontend/app/svg/icons/dashboard-icn.svg
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<svg width="276" height="241" viewBox="0 0 276 241" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_59_3139)">
|
||||
<rect x="6" y="4" width="264" height="229" rx="6" fill="white"/>
|
||||
</g>
|
||||
<g opacity="0.7">
|
||||
<rect x="141" y="14" width="119" height="101" rx="4.24365" fill="black" fill-opacity="0.08"/>
|
||||
<rect x="141.5" y="14.5" width="118" height="100" rx="3.74365" stroke="black" stroke-opacity="0.12"/>
|
||||
</g>
|
||||
<g opacity="0.3">
|
||||
<rect x="16" y="14" width="119" height="101" rx="4.24365" fill="black" fill-opacity="0.08"/>
|
||||
<rect x="16.5" y="14.5" width="118" height="100" rx="3.74365" stroke="black" stroke-opacity="0.12"/>
|
||||
</g>
|
||||
<g opacity="0.46">
|
||||
<rect x="16" y="122" width="244" height="99" rx="4.24365" fill="black" fill-opacity="0.08"/>
|
||||
<rect x="16.5" y="122.5" width="243" height="98" rx="3.74365" stroke="black" stroke-opacity="0.12"/>
|
||||
</g>
|
||||
<rect opacity="0.2" x="149" y="85" width="15" height="20" rx="2" fill="#3EAAAF"/>
|
||||
<rect opacity="0.4" x="178" y="54" width="15" height="51" rx="2" fill="#3EAAAF"/>
|
||||
<rect opacity="0.6" x="207" y="62" width="15" height="43" rx="2" fill="#3EAAAF"/>
|
||||
<rect opacity="0.4" x="236" y="45" width="15" height="60" rx="2" fill="#3EAAAF"/>
|
||||
<path opacity="0.6" d="M109 62C109 68.5268 107.065 74.907 103.438 80.3338C99.8124 85.7606 94.6585 89.9903 88.6286 92.488C82.5986 94.9857 75.9634 95.6392 69.562 94.3659C63.1607 93.0926 57.2806 89.9497 52.6655 85.3345L61.8266 76.1734C64.6298 78.9766 68.2014 80.8857 72.0896 81.6591C75.9778 82.4325 80.008 82.0355 83.6706 80.5184C87.3332 79.0013 90.4637 76.4322 92.6662 73.136C94.8686 69.8397 96.0442 65.9644 96.0442 62H109Z" fill="#3EAAAF"/>
|
||||
<path opacity="0.2" d="M51.0905 83.6453C47.5164 79.5321 45.0164 74.5979 43.8137 69.2832C42.6111 63.9685 42.7433 58.4387 44.1984 53.1875L56.78 56.6739C55.9005 59.8476 55.8207 63.1897 56.5475 66.4018C57.2743 69.6139 58.7853 72.596 60.9454 75.0818L51.0905 83.6453Z" fill="#3EAAAF"/>
|
||||
<path opacity="0.4" d="M44.6524 51.6884C47.0678 44.3455 51.9843 38.0834 58.5444 33.9946C65.1045 29.9057 72.8918 28.2496 80.548 29.3149C88.2043 30.3802 95.2436 34.0995 100.438 39.824C105.633 45.5484 108.653 52.9148 108.972 60.6383L96.0235 61.173C95.8298 56.4827 93.9957 52.0091 90.841 48.5327C87.6864 45.0563 83.4115 42.7977 78.762 42.1507C74.1124 41.5037 69.3833 42.5095 65.3994 44.9926C61.4155 47.4757 58.4298 51.2786 56.9629 55.7379L44.6524 51.6884Z" fill="#3EAAAF"/>
|
||||
<path d="M150.176 79.4331C149.863 79.8881 149.978 80.5107 150.433 80.8238C150.888 81.1369 151.511 81.0219 151.824 80.5669L150.176 79.4331ZM247 29L235.543 30.4366L242.515 39.6406L247 29ZM211.046 52.0464L210.494 52.8805L211.046 52.0464ZM216.823 51.8613L216.219 51.0642L216.823 51.8613ZM180.217 37.5435L179.394 36.9766L180.217 37.5435ZM187.094 36.2075L186.543 37.0416L187.094 36.2075ZM151.824 80.5669L181.041 38.1104L179.394 36.9766L150.176 79.4331L151.824 80.5669ZM186.543 37.0416L210.494 52.8805L211.597 51.2123L187.646 35.3734L186.543 37.0416ZM217.427 52.6584L240.43 35.2318L239.222 33.6376L216.219 51.0642L217.427 52.6584ZM210.494 52.8805C212.618 54.2851 215.397 54.196 217.427 52.6584L216.219 51.0642C214.866 52.0893 213.013 52.1487 211.597 51.2123L210.494 52.8805ZM181.041 38.1104C182.277 36.3143 184.724 35.8389 186.543 37.0416L187.646 35.3734C184.918 33.5694 181.248 34.2824 179.394 36.9766L181.041 38.1104Z" fill="#3EAAAF"/>
|
||||
<rect opacity="0.2" x="60" y="102" width="7" height="3" rx="1.5" fill="#3EAAAF"/>
|
||||
<rect opacity="0.3" x="72" y="102" width="7" height="3" rx="1.5" fill="#3EAAAF"/>
|
||||
<rect opacity="0.6" x="84" y="102" width="7" height="3" rx="1.5" fill="#3EAAAF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 187.928C17 186.918 18.3264 186.545 18.8532 187.406L20.63 190.312C24.26 196.25 31.7217 208.125 38.9817 209.312C46.2417 210.5 53.7033 201 60.9633 189.125C68.425 177.25 75.685 163 82.945 163C90.4067 163 97.6667 177.25 104.927 184.375C112.388 191.5 119.648 191.5 126.908 186.75C134.37 182 141.63 172.5 149.092 172.5C156.352 172.5 163.612 182 171.073 189.125C178.333 196.25 185.593 201 193.055 197.438C200.315 193.875 207.575 182 215.037 183.188C222.297 184.375 229.758 198.625 237.018 199.812C244.278 201 251.74 189.125 255.37 183.188L257.147 180.281C257.674 179.42 259 179.793 259 180.803V217C259 218.657 257.657 220 256 220H255.37C251.74 220 244.278 220 237.018 220C229.758 220 222.297 220 215.037 220C207.575 220 200.315 220 193.055 220C185.593 220 178.333 220 171.073 220C163.612 220 156.352 220 149.092 220C141.63 220 134.37 220 126.908 220C119.648 220 112.388 220 104.927 220C97.6667 220 90.4067 220 82.945 220C75.685 220 68.425 220 60.9633 220C53.7033 220 46.2417 220 38.9817 220C31.7217 220 24.26 220 20.63 220H20C18.3431 220 17 218.657 17 217V187.928Z" fill="url(#paint0_linear_59_3139)"/>
|
||||
<path d="M258 180.5C251 191.5 240.118 209.621 229 194.5C216.5 177.5 207.667 183 204.5 186.5C188 208 174 197 161.5 180.5C151.5 167.3 141.667 172.667 138 177C115.5 205 102.5 180.5 89.5 165.5C79 154 67 179 59 194C51 207.5 38 223.5 18 187.5" stroke="#3EAAAF" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="42" cy="206" r="7" fill="white" stroke="#3EAAAF" stroke-width="2"/>
|
||||
<circle cx="117" cy="187" r="7" fill="white" stroke="#3EAAAF" stroke-width="2"/>
|
||||
<circle cx="212" cy="183" r="7" fill="white" stroke="#3EAAAF" stroke-width="2"/>
|
||||
<defs>
|
||||
<filter id="filter0_d_59_3139" x="0" y="0" width="276" height="241" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="3"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_59_3139"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_59_3139" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_59_3139" x1="138" y1="163" x2="138.49" y2="224" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#86C6C9"/>
|
||||
<stop offset="1" stop-color="#F6F6F6"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6 KiB |
|
|
@ -2,7 +2,7 @@ import { Map, List } from 'immutable';
|
|||
import Session from 'Types/session';
|
||||
import { camelCased } from 'App/utils';
|
||||
|
||||
import { getChartFormatter } from './helper';
|
||||
import { getChartFormatter } from './helper';
|
||||
import ProcessedSessions from './processedSessions';
|
||||
import DomBuildingTime from './domBuildingTime';
|
||||
import MemoryConsumption from './memoryConsumption';
|
||||
|
|
@ -84,7 +84,7 @@ export const WIDGET_LIST = [{
|
|||
if (sessionK1 !== sessionK2) return sessionK2 - sessionK1;
|
||||
return i2.avgDuration - i1.avgDuration;
|
||||
}),
|
||||
},
|
||||
},
|
||||
// {
|
||||
// key: "errorsTrend",
|
||||
// name: "Most Impactful Errors",
|
||||
|
|
@ -130,7 +130,7 @@ export const WIDGET_LIST = [{
|
|||
},
|
||||
{
|
||||
key: "overview",
|
||||
name: "Overview Widgets",
|
||||
name: "Overview Metrics",
|
||||
description: 'List of resources that are slowing down your website, sorted by the number of impacted sessions.',
|
||||
thumb: 'na.png',
|
||||
dataWrapper: (p, period) => {
|
||||
|
|
@ -571,7 +571,7 @@ WIDGET_LIST.forEach(w => { WIDGET_MAP[ w.key ] = w; });
|
|||
const OVERVIEW_WIDGET_MAP = {};
|
||||
WIDGET_LIST.filter(w => w.type === 'overview').forEach(w => { OVERVIEW_WIDGET_MAP[ w.key ] = w; });
|
||||
|
||||
export {
|
||||
export {
|
||||
WIDGET_MAP,
|
||||
OVERVIEW_WIDGET_MAP,
|
||||
ProcessedSessions,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@ const ICONS_DIRNAME = 'app/svg/icons';
|
|||
const UI_DIRNAME = 'app/components/ui';
|
||||
|
||||
const svgo = new SVGO({ plugins: [
|
||||
{ removeAttrs: { attrs: [ "width", "height", "class", "data-name", "dataName" ] } },
|
||||
//"width", "height",
|
||||
{ removeAttrs: { attrs: [ "class", "data-name", "dataName" ] } },
|
||||
{ addAttributesToSVGElement: { attributes: [ "width={ `${ width }px` }", "height={ `${ height }px` }" ] } },
|
||||
{ convertPathData: true }, // ?
|
||||
{ removeViewBox: false }, // ?
|
||||
|
|
@ -20,7 +21,7 @@ const svgo = new SVGO({ plugins: [
|
|||
item.eachAttr(attr => {
|
||||
attr.name = attr.name.replace(/-([a-z])/g, gr => gr[1].toUpperCase())
|
||||
})
|
||||
}
|
||||
}
|
||||
}}
|
||||
]});
|
||||
|
||||
|
|
@ -41,7 +42,7 @@ ${ icons.map(name => ` case '${ name.slice(0, -4) }': return ${
|
|||
.replace(/xlink\:href/g, 'xlinkHref')
|
||||
.replace(/xmlns\:xlink/g, 'xmlnsXlink')
|
||||
}`).join('\n') }
|
||||
default:
|
||||
default:
|
||||
if (window.ENV.PRODUCTION) return null;
|
||||
throw "unknown icon name " + name;
|
||||
}
|
||||
|
|
@ -51,4 +52,4 @@ SVG.displayName = 'SVG';
|
|||
export default SVG;
|
||||
`);
|
||||
|
||||
console.log('SVG.js generated')
|
||||
console.log('SVG.js generated')
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue